/* ПРОЕКТ ЭХО. Общие токены дизайна; сейчас оформлен только экран кода.
   Остальные экраны сохраняют каркас до отдельного согласования. */
:root{
  --echo-color-ink:#c2c6c9;
  --echo-color-muted:#969da3;
  --echo-color-line:#535c64;
  --echo-color-focus:#aeb7bd;
  --echo-surface-access:#000000;
  --echo-surface-graphite:#25292d;
  --echo-surface-coal:#1c2024;
  --echo-surface-metal:#343a40;
  --echo-font-ui:"Roboto Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --echo-font-small:.8125rem;
  --echo-font-body:1rem;
  --echo-font-title:1.125rem;
  --echo-line-height:1.5;
  --echo-tracking:.12em;
  --echo-border-width:1px;
  --echo-border:var(--echo-border-width) solid var(--echo-color-line);
  --echo-radius:2px;
  --echo-space-1:4px;
  --echo-space-2:8px;
  --echo-space-3:12px;
  --echo-space-4:16px;
  --echo-space-6:24px;
  --echo-space-8:32px;
  --echo-control-height:48px;
  --echo-access-width:340px;
}

*{box-sizing:border-box}
body{margin:0;font:16px/1.4 system-ui,sans-serif;background:#fff;color:#000}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.shell{max-width:760px;margin:0 auto;padding:12px}
.hidden{display:none!important}

/* общие блоки */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.panel{border:1px solid #000;padding:12px;margin:12px 0}
.status{border-left:3px solid #000;padding:6px 8px;margin:8px 0}
.note{font-size:14px}
.label{display:block;margin:12px 0 4px}
.rule{border-top:1px solid #000;margin:16px 0}
.row{display:flex;gap:8px;align-items:center}
.row>*{min-width:0}
.grow{flex:1}

/* поля и кнопки */
input:not([type=checkbox]):not([type=radio]),select{width:100%;padding:8px}
.btn{display:block;width:100%;padding:10px;margin-top:6px}
.row .btn{margin-top:0}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* шаги регистрации */
.steps{display:flex;gap:8px;margin:12px 0;font-size:12px}
.step{flex:1;min-width:0;overflow-wrap:anywhere;font-size:10px}
.step.active{font-weight:700;text-decoration:underline}
.step.done{opacity:.5}

/* Первый экран: намеренно чистый чёрный, без фактуры, изображений и эффектов.
   accessOutput показывает код и сообщения API; настоящее поле остаётся доступным
   для клавиатуры/автозаполнения, но не дублирует видимый текст. */
.access-screen{
  position:fixed;left:0;right:0;top:var(--echo-access-top,0px);height:var(--echo-access-height,100dvh);z-index:1000;
  background:var(--echo-surface-access);color:var(--echo-color-ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--echo-space-6);
  font:var(--echo-font-body)/var(--echo-line-height) var(--echo-font-ui);
  color-scheme:dark;
}
.access-center{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--echo-space-6);width:min(100%,var(--echo-access-width));
}
.access-center>div:first-child{
  font-size:var(--echo-font-title);font-weight:400;
  letter-spacing:var(--echo-tracking);color:var(--echo-color-ink);
}
.access-output{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:var(--echo-control-height);
  padding:var(--echo-space-2) 0;
  border:0;outline:0;background:transparent;box-shadow:none;text-decoration:none;
  font-size:clamp(.75rem,3.6vw,1rem);letter-spacing:.08em;
  overflow-wrap:anywhere;white-space:normal;
}
.access-output:empty{display:none}
input.access-hidden-input{
  position:fixed;z-index:1002;left:50%;top:calc(var(--echo-access-top,0px) + var(--echo-access-height,100dvh)/2 + 1.5px);
  transform:translateX(-50%);width:min(calc(100% - 48px),var(--echo-access-width));
  height:var(--echo-control-height);margin:0;padding:var(--echo-space-2) 0;
  border:0;border-radius:0;outline:0;background:transparent;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;
  font:var(--echo-font-body)/var(--echo-line-height) var(--echo-font-ui);
  text-align:center;letter-spacing:.08em;color-scheme:dark;
}
body:has(#accessScreen:not(.hidden)){overflow:hidden;background:var(--echo-surface-access)}
/* Скрытый под полноэкранным вводом интерфейс не перехватывает Tab. */
.shell:has(#accessScreen:not(.hidden))>:not(#accessScreen):not(#accessHiddenInput){visibility:hidden}
/* На первом экране нет ни навигации, ни видимых границ поля, даже при фокусе. */
body:has(#accessScreen:not(.hidden)) #navBack{display:none}
input.access-hidden-input:focus{border:0;outline:0;box-shadow:none;background:transparent}
.access-screen.ending .access-center>div:first-child{display:none}
body:has(.access-screen.ending) input.access-hidden-input{visibility:hidden}
#sessionEnded{font-size:var(--echo-font-title);letter-spacing:var(--echo-tracking);line-height:var(--echo-line-height)}

/* камера и снимки */
.camera-box{position:relative;aspect-ratio:4/3;border:1px solid #000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camera-box video,.camera-box img{width:100%;height:100%;object-fit:cover}
.camera-overlay{position:absolute;inset:10%;border:1px solid #000;pointer-events:none}
.capture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.capture-card{border:1px solid #000;padding:6px;min-width:0}
.thumb{height:100px;border:1px solid #000;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:11px;text-align:center}
.thumb img{width:100%;height:100%;object-fit:cover}

/* вопросы и выбор роли */
.question{padding:8px 0;border-bottom:1px solid #000}
.choice{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid #000;margin:6px 0;cursor:pointer}
.choice input{width:auto;margin:3px 0 0}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.role{text-align:left;padding:10px;border:1px solid #000;background:#fff}
.role strong,.role small{display:block}
.role.selected{outline:3px solid #000;font-weight:700}
.role:disabled{opacity:.5;cursor:default}

/* позывной / дата рождения (барабаны) */
.wheels{display:grid;grid-template-columns:1fr 1.5fr 1.2fr;gap:8px;margin:12px 0}
.wheel-head{text-align:center;font-size:12px}
.wheel{height:200px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border:1px solid #000}
.wopt{display:block;width:100%;height:40px;border:0;border-bottom:1px solid #000;background:#fff;text-align:center}
.wopt.sel{background:#000;color:#fff;font-weight:700}
.birth-shown{text-align:center;min-height:20px;margin:8px 0}
.code-notice-value{font-size:20px;font-weight:700;letter-spacing:.12em;word-break:break-all}

/* досье: листается кликом, видна только активная страница */
/* обложка (в оригинале — картинка; здесь текстовая кнопка) */
.dossier-cover{display:block;width:100%;padding:28px 12px;border:1px solid #000;background:#fff}
.dossier-cover::after{content:"ОТКРЫТЬ ДОСЬЕ"}
.dossier-cover-hint{text-align:center;font-size:12px;margin:8px 0}
.dossier-book{border:1px solid #000;padding:8px}
.dossier-controls{display:flex;gap:8px;margin-top:8px}
.dossier-controls .btn{flex:1}
#dossier{cursor:pointer;-webkit-user-select:none;user-select:none}
.dossier-page{display:none;border:1px solid #000;padding:12px;min-height:300px}
.dossier-page.active{display:block}
.dossier-grid{display:grid;grid-template-columns:120px 1fr;gap:12px}
.portrait{width:120px;height:150px;border:1px solid #000;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:11px;text-align:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.paper-line{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.paper-line span{flex:0 0 auto;width:110px}
.paper-line strong{flex:1;min-width:0;overflow-wrap:break-word}
.paper-photos{display:flex;gap:8px;margin:8px 0}
.paper-photos figure{flex:1;margin:0;min-width:0}
.paper-photos img{display:block;width:100%;height:150px;object-fit:cover}
.flip-hint{text-align:center;font-size:12px}

/* лобби, команды, админка */
.card{border:1px solid #000;padding:8px;margin:8px 0}
.card.mine{border-width:3px}
.card strong,.card small{display:block}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #000}
.mrow .btn{width:auto;margin-top:0}
.mrow small{display:block}
.admin-nav{display:flex;gap:8px;margin-bottom:12px}
.admin-nav button{flex:1}

@media(max-width:430px){
  .dossier-grid{grid-template-columns:96px 1fr}
  .portrait{width:96px;height:128px}
  .thumb{height:82px}
}

/* v0.8: лента чата — без этого длинная переписка растягивает страницу */
.chatlog{max-height:50vh;overflow-y:auto}

/* v0.9: всплывающие окна и мерцающий значок в углу (без них окна нельзя показать поверх экрана) */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{max-width:420px;width:100%;background:#fff;color:#000}
.corner-badge{position:fixed;right:12px;bottom:12px;z-index:40;animation:cornerblink 1s steps(2,start) infinite}
@keyframes cornerblink{50%{opacity:.25}}

/* v0.11: лицо игрока рядом с именем (только раскладка) */
.face{width:56px;height:56px;flex:0 0 auto;object-fit:cover;border:1px solid #000;display:block}

/* v0.15: цвет протокола у окон игровых экранов (цвета пробные, задаются в PROTO в app.js) */
body.has-proto .panel{border-left:6px solid var(--proto)}

/* v0.18: телефон — страница не шире экрана; календарь не зависит от тёмной темы телефона */
html{color-scheme:light;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,iframe{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
input[type=datetime-local],input[type=date],input[type=time]{color-scheme:light;background:#fff;color:#000;-webkit-appearance:none;appearance:none;min-height:42px}
input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}
.shell{width:100%}
.panel,.card,.mrow,.status,.note{overflow-wrap:anywhere}

/* v0.18: вступительный ролик — отдельный экран на весь телефон, ролик горизонтальный (16:9) */
.intro-screen{position:fixed;inset:0;z-index:60;margin:0;border:0;padding:0;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.intro-screen.hidden{display:none!important}
.intro-stage{width:100%;aspect-ratio:16/9;max-height:100vh;display:flex;align-items:center;justify-content:center;background:#000;text-align:center}
.intro-stage video{width:100%;height:100%;object-fit:contain}
.intro-rotate{display:none;margin:12px;text-align:center}
@media(orientation:portrait){.intro-rotate{display:block}}
.intro-skip.btn{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));width:auto;margin:0;padding:6px 10px;font-size:13px;transition:opacity .2s}
.intro-skip.off{opacity:0;pointer-events:none}

/* v0.18: карта внутри приложения с кнопкой НАЗАД */
.map-overlay{position:fixed;inset:0;z-index:70;background:#fff;display:flex;flex-direction:column}
.map-overlay.hidden{display:none!important}
.map-bar{padding:8px;gap:8px}
.map-bar .btn{margin:0;text-align:center;text-decoration:none;color:inherit;border:1px solid #000}
.map-overlay iframe{flex:1;width:100%;border:0}
.map-pick.sel{outline:3px solid #000;font-weight:700}
.map-picks{padding-top:0}

/* v0.19: фраза после выбора: большая, на пол экрана, растворяется за 5 секунд */
.conseq{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:#fff;color:#000;text-align:center;padding:24px;font-size:clamp(30px,10vw,60px);font-weight:700;line-height:1.15;opacity:1;transition:opacity 5s linear}
.conseq.fade{opacity:0}