/* ═══════════════════════════════════════════════════════════════════════
Кабинет crazybots.io — тот же пиксельный язык, что на страницах сайта
(prototype/styles.css) и в панели робота Chatty: крем и синие ступенчатые
рамки днём, тёмно-синяя ночь, Press Start 2P в заголовках и кнопках,
JetBrains Mono в тексте, жёсткие тени без размытия, ход шагами.
Стили сайта целиком не подключаются: base.html делит с кабинетом страница
мероприятия, и глобальные правила главной переоформили бы её.
Спрайты рамок и лестницы — копии токенов из prototype/styles.css.
═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400 700;font-display:swap;size-adjust:70%;
src:url('fonts/press-start-2p.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/jetbrains-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/jetbrains-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/jetbrains-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ── Токены: день ─────────────────────────────────────────────────────── */
:root{
--stair:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,calc(100% - 2px) 4px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),2px calc(100% - 4px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 4px,4px 4px,4px 2px,6px 2px);
--stair-sm:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 1px,calc(100% - 2px) 1px,calc(100% - 2px) 2px,calc(100% - 1px) 2px,calc(100% - 1px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 1px) calc(100% - 3px),calc(100% - 1px) calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) calc(100% - 1px),calc(100% - 3px) calc(100% - 1px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 1px),2px calc(100% - 1px),2px calc(100% - 2px),1px calc(100% - 2px),1px calc(100% - 3px),0 calc(100% - 3px),0 3px,1px 3px,1px 2px,2px 2px,2px 1px,3px 1px);
--frame-orange:url("data:image/svg+xml;utf8,");
--frame-blue2:url("data:image/svg+xml;utf8,");
--frame-img:url("data:image/svg+xml;utf8,");
--ground:#f1ebda;--paper:#fcf9f1;--paper-lo:#f4efe2;--white:#fcf9f1;--field:#f5eeda;
--ink:#0d1b2a;--petrol:#0d1b2a;--slate:#6b7a99;
--text-soft:rgba(13,27,42,.8);--text-mute:rgba(13,27,42,.68);--text-faint:rgba(13,27,42,.5);
--line-soft:rgba(13,27,42,.18);
--navy:#0d5bd9;--heading-blue:#0d5bd9;--outline-blue:#0d5bd9;--navy-fill:#0d5bd9;
--band:#0d5bd9;--band-glow:#5eb0fe;--band-glow-2:#2b83fa;--bevel-lt:#dad7d5;--bevel-md:#c8c4c1;--band-deep:#062a75;
--blue-pale:#d0ecfc;--blue-soft:#8dc6ff;--cyan:#5eb0fe;--yellow:#ffd875;
--orange:#ff6601;--orange-line:#8f3600;--orange-ink:#8f3600;
--green:#0e4a2e;--green-ink:#0e4a2e;--mint:#b7f0c1;
--danger:#c2185b;
--shadow:#cec1a0;--emboss-hi:#ffffff;--emboss-lo:#dccfae;
--brick:#e2dac5;
--ink-accent:#0d1b2a;
--robot-body:#0d5bd9;
--line:2px;
--font-display:'Press Start 2P',system-ui,sans-serif;
--font-body:'JetBrains Mono','SF Mono',ui-monospace,monospace;
--top-h:72px;
}
/* ── Токены: ночь (значения — из ночной ветки prototype/styles.css) ──── */
:root[data-theme="dark"]{
color-scheme:dark;
--frame-img:url("data:image/svg+xml;utf8,");
--ground:#0b1530;--paper:#101e42;--paper-lo:#16295a;--white:#101e42;--field:#0f1c3d;
--petrol:#fff4d6;--slate:#8a97b3;
--text-soft:rgba(255,244,214,.8);--text-mute:rgba(255,244,214,.74);--text-faint:rgba(255,244,214,.55);
--line-soft:rgba(142,184,255,.28);
--navy:#5f9bff;--heading-blue:#5f9bff;--outline-blue:#173a77;--navy-fill:#1a5ae0;
--band:#0a3f96;--band-glow:#2f7ae0;--band-glow-2:#14539f;--bevel-lt:#46639f;--bevel-md:#0a1430;--band-deep:#051536;
--green:#1c6b45;--green-ink:#74dfae;--orange-ink:#ffa06a;--yellow:#ffe89a;
--danger:#ff6f9d;
--shadow:#05091a;--emboss-hi:#1b2f5c;--emboss-lo:#060d20;
--brick:#1a2b52;
--robot-body:#2d7cff;
}
/* ── База ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--ground);color:var(--petrol);
font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;color:var(--heading-blue);letter-spacing:.02em;margin:0}
h1{font-size:26px;line-height:1.25;margin:0 0 14px}
h2{font-size:16px;line-height:1.35;margin:0 0 12px}
h3{font-size:13px;line-height:1.4;margin:0 0 10px}
p{margin:0}
:focus-visible{outline:var(--line) solid var(--orange);outline-offset:2px}
.muted{color:var(--text-mute)}
.inline{display:inline;margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* иероглифы пиксельного шрифта нет в подмножестве — заголовки в тексте */
html[lang="zh-hans"]{--font-display:var(--font-body)}
html[lang="zh-hans"] h1,html[lang="zh-hans"] h2,html[lang="zh-hans"] h3,html[lang="zh-hans"] .btn{letter-spacing:0;text-transform:none}
/* ── Шапка: та же полоса, что у сайта и панели ───────────────────────── */
.top{position:sticky;top:0;z-index:40;flex:none} /* выше уведомлений (.flash, 30): открытое меню телефона не должно оказаться под ними */
.top__band{display:flex;align-items:center;gap:22px;min-height:64px;padding:10px 24px;
background:var(--band);color:#fff;border-bottom:3px solid #000;
box-shadow:inset 2px 2px 0 var(--band-glow),inset 6px 6px 0 var(--band-glow-2),0 3px 0 var(--bevel-lt),0 8px 0 var(--bevel-md)}
.top__rule{height:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 4px,var(--orange) 4px 8px)}
.top__logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
.top__logo img{height:30px;width:auto;display:block}
.top__logo span{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.12em}
.top__nav{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap}
.top__nav a,.top__nav .link{font-family:var(--font-display);font-size:13px;letter-spacing:.06em;color:#fff;text-decoration:none;
background:none;border:0;border-bottom:var(--line) solid transparent;padding:2px 0;cursor:pointer}
.top__nav a:hover,.top__nav .link:hover{border-bottom-color:var(--orange)}
.top__nav a[aria-current="page"]{border-bottom-color:var(--yellow);color:var(--yellow)}
.top__nav .top__nav-m{display:none}
.top__nav-h{font-family:var(--font-display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-glow)}
.theme-switch{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;color:inherit;flex:none}
.theme-switch__label{font-family:var(--font-display);font-size:11px;letter-spacing:.06em;color:#fff;white-space:nowrap}
.theme-switch__track{position:relative;display:block;width:44px;height:24px;background-color:rgba(0,0,0,.34);clip-path:var(--stair-sm);
box-shadow:inset 0 2px 0 rgba(0,0,0,.3),inset 2px 0 0 rgba(0,0,0,.3),inset 0 -2px 0 rgba(255,255,255,.26),inset -2px 0 0 rgba(255,255,255,.26);
transition:background-color .12s steps(2)}
.theme-switch__track::before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background-color:var(--blue-soft);clip-path:var(--stair-sm);
box-shadow:inset 2px 2px 0 rgba(255,255,255,.55),inset -2px -2px 0 rgba(0,0,0,.28);transition:transform .12s steps(2),background-color .12s steps(2)}
.theme-switch[aria-checked="true"] .theme-switch__track{background-color:var(--cyan)}
.theme-switch[aria-checked="true"] .theme-switch__track::before{background-color:#fcf9f1;transform:translateX(20px)}
.lang{display:flex;gap:4px;margin:0;flex:none}
.top__me{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;flex:none;
font-family:var(--font-display);font-size:12px;letter-spacing:.04em;max-width:220px}
.top__me span{overflow-wrap:anywhere;line-height:1.35}
.top__me .px-face{width:45px;flex:none;box-shadow:0 0 0 2px #000,0 0 0 4px var(--band-glow)}
/* Бургер: три пиксельные полосы; открыт — крест, ход шагами. Виден только на телефоне. */
.burger{display:none;position:relative;flex:none;width:44px;height:40px;padding:0;cursor:pointer;background:var(--topbar-btn,#1360dd);
border:0;clip-path:var(--stair-sm);box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.35)}
.burger__bars,.burger__bars::before,.burger__bars::after{position:absolute;left:11px;width:22px;height:4px;background:#fff;transition:transform .12s steps(2),opacity .12s steps(2)}
.burger__bars{top:18px}
.burger__bars::before,.burger__bars::after{content:'';left:0}
.burger__bars::before{top:-8px}.burger__bars::after{top:8px}
.burger[aria-expanded="true"]{background:var(--orange)}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{transform:translateY(-8px) rotate(-45deg)}
.burger:focus-visible{outline:var(--line) solid var(--yellow);outline-offset:2px}
/* ── Кнопки: семейство панели ─────────────────────────────────────────── */
.btn{--btn-ink:var(--shadow);display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;isolation:isolate;
font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
padding:12px 20px;border:3px solid transparent;cursor:pointer;color:var(--band);
background:linear-gradient(var(--btn-ink),var(--btn-ink)) right bottom/6px 6px no-repeat;background-origin:border-box;
box-shadow:9px 3px 0 -6px var(--btn-ink),3px 9px 0 -6px var(--btn-ink),5px 3px 0 -4px var(--btn-ink),3px 5px 0 -4px var(--btn-ink);
transition:transform .06s steps(1)}
.btn::after{content:"";position:absolute;inset:-3px;z-index:-1;pointer-events:none;
border:3px solid var(--outline-blue);border-image-source:var(--frame-blue2);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
background-color:var(--blue-pale);background-clip:padding-box;clip-path:var(--stair);
background-image:radial-gradient(rgba(13,91,217,.22) .5px,transparent .5px);background-size:4px 4px;
box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset -1px -1px 0 rgba(0,0,0,.16)}
.btn::before{content:"\25B6";position:absolute;left:5px;top:50%;translate:0 -50%;font-size:.65em;line-height:1;opacity:0}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px)}
.btn:hover::before,.btn:focus-visible::before{opacity:1;animation:sel-blink .5s steps(2,end) infinite}
.btn:active{transform:translate(3px,3px);box-shadow:none;background:none}
.btn--primary{color:#fff}
.btn--primary::after{border-color:var(--orange-line);border-image-source:var(--frame-orange);background-color:var(--orange);background-image:none;
box-shadow:inset 1px 1px 0 rgba(255,255,255,.3)}
.btn--primary:active::after{background-color:var(--paper)}.btn--primary:active{color:var(--orange)}
.btn--lg{font-size:15px;padding:16px 26px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn[disabled]:hover::before{opacity:0;animation:none}
@keyframes sel-blink{50%{opacity:0}}
/* ── Лист с рамкой: карточка панели ───────────────────────────────────── */
.sheet{position:relative;isolation:isolate;border:3px solid transparent;
background:linear-gradient(var(--shadow),var(--shadow)) right bottom/6px 6px no-repeat;background-origin:border-box}
.sheet::after{content:'';position:absolute;inset:-3px;z-index:-1;pointer-events:none;
border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
background:var(--paper);background-clip:padding-box;clip-path:var(--stair);
box-shadow:inset 4px 4px 0 var(--emboss-hi),inset -4px -4px 0 var(--emboss-lo)}
.sheet::before{content:'';position:absolute;inset:-3px;z-index:-2;pointer-events:none;background:var(--shadow);clip-path:var(--stair);transform:translate(5px,5px)}
/* Окно: лист с полосой-заголовком, как окна панели */
.win__bar{display:flex;align-items:center;gap:12px;margin:0 0 0;padding:10px 16px;background:var(--band);color:#fff;
box-shadow:inset 2px 2px 0 var(--band-glow),inset -2px -2px 0 var(--band-deep);
font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.win__bar b{font-weight:700;color:var(--yellow)}
.win__dots{margin-left:auto;display:flex;gap:5px}
.win__dots i{width:10px;height:10px;background:rgba(255,255,255,.28);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.win__dots i:first-child{background:var(--orange)}
.win__body{padding:26px 28px 28px}
/* ── Поля: px-input панели ────────────────────────────────────────────── */
.fld{display:block;margin:0 0 16px}
.fld__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;color:var(--slate);margin:0 0 6px;line-height:1.4}
.fld__label em{font-style:normal;color:var(--text-faint)}
.fld__box{position:relative;display:block}
.fld input[type=text],.fld input[type=password],.fld input[type=tel],.fld input[type=email],.fld textarea,.fld select,.fld__box input{
width:100%;height:48px;padding:0 14px;border:3px solid var(--outline-blue);
border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
background:var(--field);background-clip:padding-box;border-radius:0;
font-family:var(--font-body);font-size:16px;color:var(--petrol)}
.fld textarea{height:auto;min-height:96px;padding:10px 14px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--slate);opacity:.8}
.fld input:focus,.fld textarea:focus{outline:none;background-color:var(--paper)}
.fld.is-bad input,.fld.is-bad textarea{border-image-source:var(--frame-orange);border-color:var(--orange-line)}
.fld.is-ok input{border-color:var(--green-ink)}
.fld .fld__box--pre input{padding-left:40px}
.fld__pre{position:absolute;left:15px;top:50%;translate:0 -50%;font-family:var(--font-display);font-size:13px;color:var(--navy);pointer-events:none}
.fld .fld__box--eye input{padding-right:64px}
.fld__eye{position:absolute;right:8px;top:50%;translate:0 -50%;height:30px;min-width:48px;padding:0 8px;cursor:pointer;
font-family:var(--font-display);font-size:9px;letter-spacing:.06em;color:var(--navy);background:var(--blue-pale);border:0;
clip-path:var(--stair-sm);box-shadow:inset 2px 2px 0 rgba(255,255,255,.55),inset -2px -2px 0 rgba(0,0,0,.18)}
:root[data-theme="dark"] .fld__eye{background:#1d3a74;color:#cfe3ff;box-shadow:inset 2px 2px 0 rgba(255,255,255,.15),inset -2px -2px 0 rgba(0,0,0,.35)}
.fld__eye[aria-pressed="true"]{background:var(--cyan);color:var(--ink-accent)}
.fld__note{display:block;min-height:20px;margin-top:6px;font-size:12px;line-height:1.5;color:var(--text-mute)}
.fld__note.is-ok{color:var(--green-ink)}.fld__note.is-ok::before{content:"✓ "}
.fld__note.is-err,.fld__error{color:var(--danger)}
.fld__error{display:block;margin-top:6px;font-size:12px;line-height:1.5}
.fld__error::before,.fld__note.is-err::before{content:"✕ "}
.form-errors{margin:0 0 16px;padding:10px 14px;border-left:4px solid var(--danger);background:var(--paper-lo);font-size:13px;color:var(--danger)}
/* Правила пароля: пиксельные «лампочки» вместо стены текста */
.rules{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-4px 0 18px;padding:0;list-style:none;font-size:12px;color:var(--text-mute)}
.rules li{display:flex;align-items:center;gap:7px}
.rules li::before{content:'';width:10px;height:10px;flex:none;background:var(--line-soft);box-shadow:inset -2px -2px 0 rgba(0,0,0,.15)}
.rules li.is-on{color:var(--green-ink)}
.rules li.is-on::before{background:var(--green-ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),0 0 0 2px var(--mint)}
:root[data-theme="dark"] .rules li.is-on::before{box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),0 0 0 2px #12352a}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;height:8px;margin:0 0 20px}
.meter i{background:var(--line-soft)}
.meter[data-level="1"] i:nth-child(-n+1){background:var(--danger)}
.meter[data-level="2"] i:nth-child(-n+2){background:var(--orange)}
.meter[data-level="3"] i:nth-child(-n+3){background:var(--yellow)}
.meter[data-level="4"] i:nth-child(-n+4){background:var(--cyan)}
.meter[data-level="5"] i{background:var(--green-ink)}
/* ── Пиксельное лицо Chatty (canvas, рисует account.js) ───────────────── */
.px-face{display:block;aspect-ratio:15/8;width:100%;background:#000;image-rendering:pixelated}
.px-face canvas{display:block;width:100%;height:100%}
/* ═══ Вход и регистрация ═══════════════════════════════════════════════
Экран делится на две части и занимает всё окно: слева окно формы на
кремовом листе, справа сцена — голова Chatty с живым лицом, которая
следит за вводом и отворачивается, пока набирают пароль. */
.auth{flex:1;display:grid;grid-template-columns:minmax(440px,5fr) 6fr;min-height:calc(100svh - var(--top-h))}
.auth__side{display:flex;align-items:center;justify-content:center;padding:40px 48px}
.auth__win{width:100%;max-width:540px}
.auth__kicker{display:inline-block;margin:0 0 14px;padding:3px 8px;background:var(--ink);color:var(--yellow);
font-family:var(--font-display);font-size:11px;letter-spacing:.1em}
:root[data-theme="dark"] .auth__kicker{background:#000}
.auth__lede{color:var(--text-soft);margin:0 0 24px;max-width:46ch}
.auth__alt{margin:20px 0 0;padding-top:16px;border-top:var(--line) dotted var(--line-soft);font-size:14px;color:var(--text-mute)}
.auth__alt a{font-weight:700}
.auth__submit{margin-top:6px}
.auth__mail{margin:-4px 0 22px;padding:14px 16px;border-left:4px solid var(--cyan);background:var(--paper-lo);
color:var(--heading-blue);font-weight:700;overflow-wrap:anywhere}
.verify-steps{display:grid;gap:8px;margin:0 0 24px;padding-left:24px;color:var(--text-soft)}
.verify-steps li::marker{color:var(--orange);font-weight:700}
.auth__text-button{padding:0;border:0;background:transparent;color:var(--navy);font:inherit;font-weight:700;text-decoration:underline;
text-underline-offset:3px;cursor:pointer;text-align:left}
.auth__text-button:hover{text-decoration-thickness:2px}
/* Сцена справа — синяя полоса панели, решётка пикселей и кирпичи уровня */
.stagebox{--head-w:560px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:48px 40px 96px;
background:
linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,
#012556;
box-shadow:inset 6px 0 0 #000,inset 10px 0 0 var(--band-glow-2)}
:root[data-theme="dark"] .stagebox{background:
linear-gradient(rgba(142,184,255,.07) 1px,transparent 1px) 0 0/24px 24px,
linear-gradient(90deg,rgba(142,184,255,.07) 1px,transparent 1px) 0 0/24px 24px,
#081231}
.stagebox::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;border-top:3px solid #000;
background:repeating-linear-gradient(90deg,var(--brick) 0 30px,var(--navy-fill) 30px 32px),
repeating-linear-gradient(0deg,transparent 0 12px,var(--navy-fill) 12px 14px);background-blend-mode:normal}
/* Голова: корпус цвета робота, кошачьи уши ступеньками, чёрный экран */
.head{position:relative;width:min(var(--head-w),78%);padding:30px 32px 34px;background:var(--robot-body);
clip-path:polygon(0 12px,6px 12px,6px 6px,12px 6px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 12px),0 calc(100% - 12px));
box-shadow:inset 8px 8px 0 rgba(255,255,255,.18),inset -8px -8px 0 rgba(0,0,0,.25)}
.head__wrap{position:relative;width:100%;display:flex;justify-content:center;filter:drop-shadow(10px 10px 0 rgba(0,0,0,.35))}
.head__ear{position:absolute;top:-44px;width:96px;height:48px;background:var(--robot-body);
clip-path:polygon(0 100%,0 75%,12.5% 75%,12.5% 50%,25% 50%,25% 25%,37.5% 25%,37.5% 0,62.5% 0,62.5% 25%,75% 25%,75% 50%,87.5% 50%,87.5% 75%,100% 75%,100% 100%)}
.head__ear--l{left:calc(50% - min(var(--head-w),78%)/2 + 28px)}
.head__ear--r{right:calc(50% - min(var(--head-w),78%)/2 + 28px)}
.head__screen{padding:14px;background:#000;box-shadow:inset 0 0 0 3px #0a0a0a,0 0 0 4px rgba(0,0,0,.35)}
.bubble{position:relative;width:min(var(--head-w),80%);min-height:64px;padding:16px 20px;color:var(--petrol);
font-family:var(--font-display);font-size:13px;line-height:1.7;letter-spacing:.03em}
.bubble::after{content:'';position:absolute;inset:0;z-index:-1;border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;
background:var(--paper);background-clip:padding-box;clip-path:var(--stair)}
.bubble{isolation:isolate;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.35))}
.bubble__tail{position:absolute;left:50%;top:-18px;width:32px;height:16px;translate:-50% 0;background:var(--paper);clip-path:polygon(0 100%,0 75%,12.5% 75%,12.5% 50%,25% 50%,25% 25%,37.5% 25%,37.5% 0,62.5% 0,62.5% 25%,75% 25%,75% 50%,87.5% 50%,87.5% 75%,100% 75%,100% 100%)}
.bubble__text::after{content:'';display:inline-block;width:.6em;height:1em;margin-left:4px;vertical-align:-.15em;background:var(--orange);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.stagebox__tag{position:absolute;top:18px;left:24px;font-family:var(--font-display);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.stagebox__tag b{background:#000;color:var(--yellow);padding:2px 6px;margin-right:8px}
.bubble__tail{filter:none}
/* Высокие и широкие окна: окно формы и голова крупнее, чтобы не тонуть в поле */
@media (min-width:1600px) and (min-height:1000px){
.stagebox{--head-w:760px}
.bubble{font-size:15px;padding:20px 26px}
.auth__win{max-width:640px}
.auth .win__body{padding:34px 40px 36px}
.auth h1{font-size:32px}
.auth .fld{margin-bottom:20px}
.auth .fld__box input{height:56px;font-size:17px}
.auth__lede{font-size:16px}
}
/* Низкие окна (1366×768): форма целиком в экране без прокрутки */
@media (min-width:981px) and (max-height:860px){
.auth__side{padding:20px 40px}
.auth .win__body{padding:18px 26px 20px}
.auth h1{font-size:22px;margin-bottom:8px}
.auth__lede{margin-bottom:14px;font-size:14px}
.auth .fld{margin-bottom:10px}
.auth .fld__box input{height:44px}
.auth .fld__note{min-height:0;margin-top:4px}
.auth .rules{margin-bottom:10px}
.auth__alt{margin-top:12px;padding-top:10px}
.stagebox{--head-w:480px;gap:22px}
}
/* 3D-Chatty (chatty3d.js): блок фиксированного размера, iframe вьюера поверх
запасного 2D-экрана; экран прячется, когда модель нарисовала первый кадр. */
.chatty3d{position:relative;display:flex;align-items:center;justify-content:center}
.chatty3d__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity .3s steps(3,end);pointer-events:none}
.chatty3d.is-3d .chatty3d__frame{opacity:1}
.chatty3d.is-3d > .px-face,.chatty3d.is-3d > .head__wrap{visibility:hidden}
.chatty3d--full{width:100%;height:min(60svh,600px)}
.chatty3d--full.is-3d{filter:drop-shadow(10px 10px 0 rgba(0,0,0,.35))}
/* ═══ Кабинет: карточка игрока слева, вкладки и лист справа ═════════════ */
.cab{flex:1;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:32px;padding:32px;min-height:calc(100svh - var(--top-h))}
/* Карточка игрока. Сцена с Chatty забирает всю свободную высоту: на низком окне робот
мельче, на высоком — крупнее, а текст под ним своего роста. */
.player{align-self:stretch;display:flex;flex-direction:column}
.player__head{flex:1 1 0;min-height:190px;padding:0;overflow:hidden;
background:
linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,
#012556;
box-shadow:inset 0 -3px 0 #000}
:root[data-theme="dark"] .player__head{background:
linear-gradient(rgba(142,184,255,.07) 1px,transparent 1px) 0 0/24px 24px,
linear-gradient(90deg,rgba(142,184,255,.07) 1px,transparent 1px) 0 0/24px 24px,
#081231}
/* пол уровня — те же кирпичи, что на сцене входа; робот стоит над ним */
.player__head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;border-top:3px solid #000;
background:repeating-linear-gradient(90deg,var(--brick) 0 30px,var(--navy-fill) 30px 32px),
repeating-linear-gradient(0deg,transparent 0 9px,var(--navy-fill) 9px 11px)}
.player__head .chatty3d__frame{top:auto;bottom:4px;height:auto;aspect-ratio:3/4;max-height:calc(100% - 18px)}
.player__head > .px-face{width:62%;box-shadow:0 0 0 8px #000;margin-bottom:22px}
.player__body{flex:0 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;padding:18px 22px 22px}
.player__head{flex-shrink:0}
.player__nick{font-family:var(--font-display);font-size:20px;line-height:1.3;color:var(--heading-blue);word-break:break-word;margin:0 0 6px}
.player__name{font-size:14px;color:var(--text-soft);margin:0 0 10px}
.player__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.player__stats div{padding:10px 12px;background:var(--paper-lo);box-shadow:inset -3px -3px 0 var(--emboss-lo)}
.player__stats dt{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em}
.player__stats dd{margin:2px 0 0;font-family:var(--font-display);font-size:20px;color:var(--navy)}
.player__meta{display:grid;gap:6px;margin:0 0 16px;font-size:13px}
.player__meta div{display:grid;grid-template-columns:110px 1fr;gap:8px;border-bottom:var(--line) dotted var(--line-soft);padding-bottom:6px}
.player__meta dt{color:var(--slate)}
.player__meta dd{margin:0;word-break:break-word}
.player__actions{display:grid;gap:14px}
.player__actions form{margin:0}
.player__actions .btn{width:100%}
.cab__main{display:flex;flex-direction:column;gap:22px;min-width:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:3px solid var(--outline-blue);margin:0}
.tabs a{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
padding:12px 18px 10px;color:var(--navy);background:var(--paper-lo);position:relative;top:3px;
border:3px solid var(--outline-blue);border-bottom:0;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% 100%,0 100%)}
.tabs a:hover{color:var(--orange)}
.tabs a[aria-current="page"]{background:var(--paper);color:var(--petrol);padding-bottom:13px}
.tabs a[aria-current="page"]::before{content:"\25B6 ";color:var(--orange)}
.tabs__count{display:inline-block;margin-left:8px;padding:1px 6px;background:var(--orange);color:#fff;font-size:10px}
.cab__sheet{flex:1;display:flex;flex-direction:column;min-height:0}
.cab__more{margin-top:10px;font-size:13px}
.cab__sheet > .win__body{flex:1;min-height:0;display:flex;flex-direction:column}
/* списки (сообщения, рекорды) не растят лист: высоту делит экран, лишнее прокручивается внутри */
.cab__grid--fill{grid-template-rows:minmax(0,1fr);min-height:0}
.cab__grid--fill > .cab__col{min-height:0}
/* нулевая база: у растущих блоков свой рост не в счёт — берут только то, что осталось */
@media (min-width:1181px){
.cab__grid--fill .scroll,.mlist--fill,.fld--grow textarea,.compose__text textarea{height:0;flex:1 1 0;contain:size}
.compose__text{min-height:0}
}
.cab__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 40px;flex:1}
.cab__col{min-width:0}
.cab__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:var(--line) dotted var(--line-soft)}
.cab__foot p{font-size:13px;color:var(--text-mute);flex:1 1 220px}
.sec{margin:0 0 22px}
.sec__title{display:flex;align-items:center;gap:10px}
.sec__title::before{content:'';width:10px;height:10px;flex:none;background:var(--orange)}
.sec__hint{font-size:13px;color:var(--text-mute);margin:-4px 0 14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.rules--list{flex-direction:column;margin:0;font-size:14px;gap:10px}
/* Профиль: анкета слева, справа двери в Chatty Studio и Burnline и последние сообщения.
Лишнюю высоту берут поле «О себе» и список сообщений. */
.cab__grid--profile{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.cab__form,.cab__col--side{display:flex;flex-direction:column}
.cab__form .sec__title{margin-top:6px}
.fld--grow{flex:1;display:flex;flex-direction:column}
.fld--grow textarea{flex:1;min-height:72px;resize:none}
.cab__form .cab__foot{margin-top:4px}
.mlist--fill{flex:1 1 0;min-height:120px;overflow:auto;padding-right:6px}
.cab__col--side .empty--big{flex:1;justify-content:center;align-items:center;text-align:center}
.empty--link{text-decoration:none}
.empty--link:hover{color:var(--petrol)}
/* Дверь в раздел: экран слева, что там — посередине, куда ведёт — справа */
.door{--door-bg:var(--paper-lo);display:flex;align-items:center;gap:16px;
margin:0 0 18px;padding:14px 16px;background:var(--door-bg);color:var(--text-soft);text-decoration:none;font-size:13px;line-height:1.5;
box-shadow:0 0 0 3px var(--outline-blue),6px 6px 0 3px var(--shadow);transition:transform .06s steps(1)}
.door:hover,.door:focus-visible{transform:translate(-2px,-2px)}
.door:focus-visible{outline:var(--line) solid var(--orange);outline-offset:5px}
.door__body{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title go" "desc desc";align-items:center;gap:6px 14px}
.door .px-face,.door__mark{width:96px;flex:none;box-shadow:0 0 0 3px #000}
.door__desc{grid-area:desc;align-self:start}
.door__mark{display:grid;place-items:center;aspect-ratio:15/8;background:#000;color:#39ff88;
font-family:var(--font-display);font-size:22px;text-shadow:0 0 6px rgba(57,255,136,.55)}
.door__title{grid-area:title;display:block;margin:0;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.03em;color:var(--heading-blue)}
.door__go{grid-area:go;justify-self:end;font-family:var(--font-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
padding:10px 12px;color:#fff;background:var(--orange);clip-path:var(--stair-sm);box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.25)}
.door:hover .door__go::before,.door:focus-visible .door__go::before{content:"\25B6 ";animation:sel-blink .5s steps(2,end) infinite}
/* Burnline — в своих цветах: чёрный терминал и фосфорный зелёный */
.door--bl{--door-bg:#020403;color:#7fcf9f}
.door--bl .door__mark{box-shadow:0 0 0 3px #0f3a22}
.door--bl .door__title{color:#39ff88;text-shadow:0 0 6px rgba(57,255,136,.4)}
.door__nick{color:#a8ffcb;overflow-wrap:anywhere}
/* Список сообщений */
.mlist{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.mlist li{padding:12px 14px;background:var(--paper-lo);border-left:4px solid var(--outline-blue)}
.mlist__head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--slate);margin-bottom:6px}
.mlist__text{font-size:14px;white-space:pre-line;word-break:break-word}
.reply{margin:10px 0 0;padding:8px 10px;background:var(--paper);border-left:3px solid var(--green-ink);font-size:13px}
.tag{display:inline-block;padding:2px 8px;font-size:11px;color:#fff;background:#6b7a99;text-transform:uppercase;letter-spacing:.04em}
.tag--new{background:var(--orange)}.tag--progress{background:#1e6bff}.tag--done{background:var(--green)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;background:var(--paper-lo);color:var(--text-mute);font-size:14px}
.empty .px-face{width:150px}
.cab__grid--fill > .cab__col{display:flex;flex-direction:column}
.cab__grid--fill .empty--big{flex:1;justify-content:center;align-items:center;text-align:center;margin-top:16px}
.cab__grid--fill .cab__col > .sec__title + .empty--big{margin-top:0}
.empty--big .px-face{width:min(360px,70%)}
.compose{display:flex;flex-direction:column;flex:1}
.compose__text{flex:1;display:flex;flex-direction:column}
.compose__text textarea{flex:1;min-height:140px}
.compose .btn{align-self:flex-start}
.cab__grid--fill .mlist.scroll{flex:1;max-height:none;min-height:0;overflow:auto}
.scroll{overflow:auto;max-height:calc(100svh - var(--top-h) - 220px);padding-right:6px}
/* Burnline */
.bl-nick{margin:0 0 22px;padding:16px 18px;background:#020403;color:#a8ffcb;box-shadow:0 0 0 3px var(--outline-blue),6px 6px 0 3px var(--shadow)}
.bl-nick__k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#3f9a67;margin:0 0 6px}
.bl-nick__v{font-family:var(--font-display);font-size:24px;color:#39ff88;text-shadow:0 0 6px rgba(57,255,136,.45);margin:0 0 10px;word-break:break-all}
.bl-nick .muted{color:#7fcf9f;font-size:13px}
.cab__grid--bl{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:18px 32px}
.bl-total{margin:0 0 10px;font-size:13px}
.bl-table-wrap{flex:1}
.bl-table{width:100%;border-collapse:collapse;font-size:14px}
.bl-table th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);text-align:left;padding:8px 8px;border-bottom:3px solid var(--outline-blue);white-space:nowrap}
.bl-table td{padding:9px 8px;border-bottom:var(--line) dotted var(--line-soft);vertical-align:top}
.bl-table .num{text-align:right;font-variant-numeric:tabular-nums}
.bl-table tbody tr:hover td{background:var(--paper-lo)}
/* Сообщения-вспышки */
.flash{list-style:none;margin:0;padding:0;position:fixed;right:24px;top:calc(var(--top-h) + 20px);z-index:30;display:grid;gap:8px;max-width:380px}
.flash__item{padding:12px 16px;background:var(--paper);color:var(--petrol);border-left:6px solid var(--cyan);font-size:14px;
box-shadow:0 0 0 2px var(--outline-blue),6px 6px 0 2px var(--shadow);animation:flash-in .3s steps(3,end),flash-out .3s steps(3,end) 5s forwards}
.flash__item--success{border-left-color:var(--green-ink)}.flash__item--error{border-left-color:var(--danger)}
@keyframes flash-in{from{transform:translateX(40px);opacity:0}}
@keyframes flash-out{to{transform:translateX(40px);opacity:0;visibility:hidden}}
/* Страницы вне кабинета (мероприятия) — прежняя простая колонка */
.wrap{max-width:1160px;width:100%;margin:0 auto;padding:40px 24px 48px;overflow-x:clip}
.wrap > h1{font-size:30px}
.panel{background:var(--paper);border:2px solid var(--outline-blue);box-shadow:5px 5px 0 var(--shadow);padding:20px 24px;margin-bottom:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.card{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:2px solid var(--outline-blue);box-shadow:5px 5px 0 var(--shadow);padding:16px 18px;text-decoration:none;color:var(--petrol)}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.crumbs{margin:0 0 12px;font-size:13px;color:var(--text-mute)}
.cover{margin:0 0 20px;border:2px solid var(--outline-blue);box-shadow:5px 5px 0 var(--shadow);overflow:hidden;aspect-ratio:16/9;background:var(--paper-lo)}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0 0 28px}
.gallery__item{margin:0;border:2px solid var(--outline-blue);box-shadow:4px 4px 0 var(--shadow);background:var(--paper)}
.gallery__item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery__item figcaption{padding:6px 8px;font-size:12px;color:var(--text-mute)}
.card__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:6px;border:1px solid var(--outline-blue)}
.foot{padding:20px 24px;color:var(--text-faint);font-size:13px;border-top:2px solid var(--outline-blue)}
/* ── Узкие экраны ─────────────────────────────────────────────────────── */
/* Низкие окна (1280×720, 1366×768): кабинет без прокрутки страницы */
@media (min-width:981px) and (max-height:860px){
.cab{padding:22px 28px;gap:26px}
.player__head{min-height:150px}
.player__body{padding:12px 18px 16px}
.player__nick{font-size:17px;margin-bottom:4px}
.player__stats{margin:2px 0 10px}
.player__stats div{padding:7px 10px}
.player__stats dd{font-size:17px}
.player__meta{margin-bottom:12px}
.player__actions .btn{padding:9px 16px}
.cab .win__body{padding:18px 24px 18px}
.cab h1{font-size:20px;margin-bottom:10px}
.cab h1 + .sec__hint{display:none}
.cab h2{margin-bottom:10px}
.cab .sec{margin-bottom:10px}
.cab .fld{margin-bottom:10px}
.cab .fld input[type=text],.cab .fld input[type=tel],.cab .fld input[type=password]{height:42px}
.cab .fld textarea{min-height:64px}
.cab .fld--grow textarea{min-height:48px}
.cab__form h1{font-size:17px;line-height:1.3}
.cab .fld--grow textarea{min-height:48px}
.cab__form h1{font-size:17px;line-height:1.3}
.cab__foot{margin-top:6px;padding-top:12px}
.cab .btn--lg{font-size:13px;padding:12px 20px}
.door{padding:10px 14px;margin-bottom:14px;gap:14px}
.door .px-face,.door__mark{width:76px}
.door__mark{font-size:18px}
.tabs a{padding:10px 16px 8px}
}
/* Высокие окна (1920×1080 и выше): всё крупнее, чтобы лист не выглядел пустым */
@media (min-width:1500px) and (min-height:1000px){
.cab{padding:40px 48px;gap:40px;grid-template-columns:minmax(340px,440px) minmax(0,1fr)}
.player__body{padding:22px 26px 26px}
.player__nick{font-size:22px}
.cab .win__body{padding:34px 40px 36px}
.cab h1{font-size:30px;margin-bottom:16px}
.cab .sec__hint{font-size:14px;margin-bottom:22px}
.cab h2{font-size:17px;margin-bottom:16px}
.cab .fld{margin-bottom:20px}
.cab .fld__label{font-size:13px}
.cab .fld input[type=text],.cab .fld input[type=tel],.cab .fld input[type=password]{height:56px;font-size:17px}
.cab__grid{gap:24px 56px}
.door{padding:20px 22px;margin-bottom:26px;gap:22px;font-size:14px}
.door .px-face,.door__mark{width:128px}
.door__mark{font-size:28px}
.door__title{font-size:17px}
.door__go{font-size:12px;padding:12px 16px}
.mlist li{padding:14px 16px}
.tabs a{font-size:13px;padding:14px 22px 12px}
}
@media (max-width:1180px){
.cab__grid,.cab__grid--bl,.cab__grid--profile{grid-template-columns:1fr}
.cab__grid--fill{grid-template-rows:none}
.fld--grow textarea{flex:none;min-height:96px;resize:vertical}
.mlist--fill{flex:none;min-height:0;overflow:visible}
}
@media (max-width:980px){
.top__band{gap:12px;padding:10px 16px}
.theme-switch{margin-left:auto}
.burger{display:block}
/* меню — выпадающая панель под шапкой, открывает бургер */
.top__nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:25;margin:0;flex-direction:column;gap:0;
padding:6px 16px 12px;background:var(--band);border-bottom:3px solid #000;
box-shadow:inset 0 2px 0 var(--band-glow-2),0 6px 0 rgba(0,0,0,.35)}
.top.is-open .top__nav{display:flex;animation:nav-drop .16s steps(3,end)}
.top__nav{align-items:stretch}
.top__nav a,.top__nav .link{display:block;text-align:left;font-size:14px;padding:14px 4px;border-bottom:var(--line) dotted rgba(255,255,255,.28)}
.top__nav a:last-child{border-bottom:0}
.top__nav .top__nav-m{display:block}
.top__nav .top__nav-d{display:none}
.top__nav a > .top__nav-m{display:inline}
.top__nav .link{width:100%;cursor:pointer}
.top__nav-h{padding:14px 4px 4px}
.top__nav-h:first-child{padding-top:8px}
/* разделы кабинета — в бургере; вкладки под карточкой на телефоне не нужны */
.tabs{display:none}
.top__nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.28)}
.top__nav a[aria-current="page"]::before{content:"\25B6 ";color:var(--orange)}
.auth{grid-template-columns:1fr;min-height:0}
.stagebox{--head-w:360px;order:-1;flex-direction:row;padding:30px 16px 36px;gap:16px}
.stagebox::after{height:18px;border-top-width:2px}
.stagebox__tag{display:none}
.head__wrap{width:auto;flex:none}
.head{width:min(var(--head-w),34vw);padding:10px}
.head__screen{padding:6px}
.chatty3d--full{width:min(260px,38vw);height:auto;aspect-ratio:3/4;flex:none}
.head__ear{width:40px;height:20px;top:-18px}
.head__ear--l{left:8px}.head__ear--r{right:8px}
.bubble{flex:1;width:auto;font-size:11px;line-height:1.6;padding:10px 12px;min-height:0}
.bubble__tail{left:-14px;top:50%;width:16px;height:24px;translate:0 -50%;
clip-path:polygon(100% 0,100% 100%,75% 100%,75% 75%,50% 75%,50% 50%,0 50%,50% 50%,50% 25%,75% 25%,75% 0)}
.auth__side{padding:28px 16px 40px}
.cab{grid-template-columns:minmax(0,1fr);padding:20px 16px;gap:24px;min-height:0;align-content:start}
.player__head{flex:none;aspect-ratio:4/3;max-height:360px;min-height:0}
.scroll{max-height:none}
}
@keyframes nav-drop{from{transform:translateY(-8px);opacity:0}}
/* Whatever a user types — a link in "about", an organisation, a message — wraps instead of
pushing the cabinet sideways on a phone. */
.player,.cab{overflow-wrap:anywhere}
/* Burnline records in a narrow column (a phone, or the cabinet's right column on a laptop):
a card per board instead of an eight-column table, which needs ~590px and scrolled sideways.
Mode and points on top, where it was played and on what under them, then the numbers with
their names. Keyed to the column's own width, not the screen's. */
.bl-table-wrap{container-type:inline-size}
@container (max-width:600px){
.bl-table,.bl-table tbody{display:block}
.bl-table thead{display:none}
.bl-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:2px 10px;align-items:baseline;
padding:12px 0;border-bottom:var(--line) dotted var(--line-soft)}
.bl-table td{display:block;padding:0;border:0;min-width:0}
.bl-table tbody tr:hover td{background:none}
.bl-table .bl-mode{grid-column:1/4;font-weight:700;font-size:15px}
.bl-table .bl-score{grid-column:4;grid-row:1/3;align-self:center;font-size:22px}
.bl-table .bl-pack{grid-column:1/3;color:var(--slate);font-size:13px;overflow-wrap:anywhere}
.bl-table .bl-dev{grid-column:3;justify-self:start;font-size:12px;color:var(--slate)}
.bl-table .bl-dev--phone{color:inherit}
.bl-table .bl-stat{text-align:left;font-size:14px;margin-top:6px}
.bl-table .bl-stat::before{content:attr(data-k);display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
.bl-table .bl-last{grid-column:4;text-align:right;align-self:end;font-size:12px;color:var(--slate)}
}
@media (max-width:560px){
.top__logo span{display:none}
.top__me span:not(.px-face){display:none}
.theme-switch__label{display:none}
.win__body{padding:20px 16px 22px}
h1{font-size:20px}
.two{grid-template-columns:1fr}
.door{gap:14px}
.door__body{grid-template-areas:"title title" "desc desc" "go go"}
.door .px-face,.door__mark{width:72px}
.door__go{justify-self:start;margin-top:6px}
.tabs a{padding:10px 10px 8px;font-size:10px}
.flash{left:16px;right:16px}
}
/* The smallest phones (320–380px): logo, theme, three languages and the burger fit with
tighter gaps and without the avatar. */
@media (max-width:380px){
.top__band{gap:10px;padding:10px 12px}
.top__me{display:none} /* the burger has the cabinet links */
}
@media (prefers-reduced-motion:reduce){
.theme-switch__track,.theme-switch__track::before,.btn{transition:none}
.btn:hover::before,.bubble__text::after{animation:none}
.flash__item{animation:none}
}
/* Телефон, страницы входа и регистрации: шапка не липнет. Прилипшая, она ложилась поверх сцены
с роботом, когда страницу прокручивали к форме, - робот и его реплика оказывались разрезаны. */
@media (max-width:760px){
body:has(main.auth) .top{position:static}
}
/* ── Чат с командой в кабинете: лента и поле ввода под ней ───────────────────────────────── */
.chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.chat__head{flex:none;display:flex;align-items:center;gap:12px}
.chat__face{flex:none;width:44px;height:44px}
.chat__head h1{margin:0;font-size:18px;line-height:1.3}
.chat__head p{margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--slate)}
.chat__list{flex:1 1 0;min-height:220px;margin:0;padding:14px;list-style:none;display:flex;flex-direction:column;gap:10px;overflow-y:auto;
background:var(--paper-lo);clip-path:var(--stair)}
@media (max-width:1180px){.chat__list{max-height:60svh}}
.chat__day{align-self:center;margin:4px 0}
.chat__day span{padding:2px 10px;font-size:12px;color:var(--slate);background:var(--paper);clip-path:var(--stair-sm)}
.chat__msg{display:flex;flex-direction:column;max-width:min(78%,640px)}
.chat__msg--out{align-self:flex-end;align-items:flex-end}
.chat__msg--in{align-self:flex-start;align-items:flex-start}
.chat__bubble{padding:9px 13px;font-size:14px;line-height:1.5;overflow-wrap:anywhere;color:var(--ink);background:var(--paper);clip-path:var(--stair)}
.chat__msg--out .chat__bubble{color:#fff;background:var(--navy-fill)}
.chat__msg--in .chat__bubble{box-shadow:inset 3px 0 0 var(--orange)}
.chat__who{margin-bottom:3px;font-family:var(--font-display);font-size:10px;letter-spacing:.06em;color:var(--orange-ink)}
.chat__meta{margin-top:3px;font-size:11px;color:var(--slate);font-variant-numeric:tabular-nums}
.chat__msg.is-new .chat__bubble{animation:chat-new 3s steps(6) 1}
@keyframes chat-new{from{filter:brightness(1.5)}to{filter:none}}
@media (prefers-reduced-motion:reduce){.chat__msg.is-new .chat__bubble{animation:none}}
.chat__empty{margin:auto;max-width:36ch;text-align:center;font-size:14px;color:var(--slate)}
.chat__form{flex:none;display:grid;gap:6px}
.chat__contact{display:grid;gap:4px;font-size:13px}
.chat__row{display:flex;align-items:flex-end;gap:8px}
.chat__row textarea{flex:1 1 auto;min-width:0;min-height:44px;max-height:160px;resize:none;font-size:16px;line-height:1.4}
.chat__send{flex:none;min-height:44px}
.chat__hint{font-size:11px;color:var(--slate)}
@media (hover:none){.chat__hint{display:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chat__form .fld{margin:0}
.chat__row.fld textarea{width:auto;flex:1 1 0;min-width:0;min-height:44px;height:44px;padding:10px 12px;resize:none}
.chat__contact.fld input{width:100%;min-width:0}
.chat,.chat__form,.chat__row{min-width:0;max-width:100%}
.chat__bubble{color:inherit}
.chat__msg--out .chat__bubble{color:#fff}
.chat__list{scrollbar-width:thin;scrollbar-color:var(--outline-blue) transparent;padding-bottom:18px}
/* ── Выбор языка: кнопка с глобусом и выпадающий список ───────────────────────────────────
Кнопка - пиксельная плашка в две ступенчатые рамки: глобус, код текущего языка, стрелка.
Список открывается под ней: код и название языка на нем самом; текущий - голубой плашкой. */
.langsel{position:relative;flex:none}
.langsel summary{--l:rgba(241,235,218,.45);--f:#0b1530;list-style:none;position:relative;isolation:isolate;display:flex;align-items:center;gap:7px;
height:32px;padding:0 9px 0 8px;cursor:pointer;color:#fff;background:var(--l);clip-path:var(--stair-sm);
font-family:var(--font-display);font-size:11px;letter-spacing:.06em;line-height:1;white-space:nowrap;user-select:none}
.langsel summary::-webkit-details-marker{display:none}
.langsel summary::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--f);clip-path:var(--stair-sm)}
.langsel summary:hover,.langsel[open] summary{--l:var(--orange)}
.langsel summary:focus-visible{outline:none;--l:var(--orange)}
.langsel__globe{flex:none;color:var(--cyan)}
.langsel[open] .langsel__globe,.langsel summary:hover .langsel__globe{color:#fff}
.langsel__caret{flex:none;opacity:.8}
.langsel[open] .langsel__caret{transform:scaleY(-1)}
.langsel__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:190px;padding:3px;display:grid;gap:2px;
background:var(--orange);clip-path:var(--stair)}
.langsel__menu > *{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:9px 12px;border:0;text-align:left;text-decoration:none;cursor:pointer;
color:#fff;background:#0b1530;font-family:var(--font-body,inherit);font-size:14px;line-height:1.2}
.langsel__menu b{flex:none;min-width:34px;font-family:var(--font-display);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--cyan)}
.langsel__menu span{flex:1 1 auto;white-space:nowrap}
.langsel__menu > *:hover,.langsel__menu > *:focus-visible{background:#16295a;outline:none}
.langsel__menu > .is-on,.langsel__menu > [aria-pressed="true"]{background:var(--cyan);color:var(--ink-accent)}
.langsel__menu > .is-on b,.langsel__menu > [aria-pressed="true"] b{color:var(--ink-accent)}
.langsel__menu > .is-on::after,.langsel__menu > [aria-pressed="true"]::after{content:"";flex:none;width:8px;height:8px;background:var(--ink-accent)}
.langsel .langsel__menu > *{box-sizing:border-box;clip-path:none}
.langsel summary{box-sizing:border-box}
/* телефонные браузеры: без своей подсветки нажатия, своего маркера и своего вида кнопок */
.langsel summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.langsel summary::marker{content:""}
.langsel__menu > *{-webkit-appearance:none;appearance:none;border-radius:0;-webkit-tap-highlight-color:transparent}
/* ── Скриншоты в чате ─────────────────────────────────────────────────────────────────────── */
.chat__form .fld__error[hidden]{display:none}
.chat__picked{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chat__picked[hidden]{display:none}
.chat__picked li{position:relative;width:72px;height:72px;background:var(--paper);clip-path:var(--stair)}
.chat__picked img{display:block;width:100%;height:100%;object-fit:cover}
.chat__picked button{position:absolute;top:0;right:0;display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0;border:0;cursor:pointer;font:400 12px/1 var(--font-display);color:#fff;background:var(--navy-fill)}
.chat__picked button:hover,.chat__picked button:focus-visible{background:var(--orange);outline:none}
.chat__shots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;justify-content:inherit}
.chat__msg--out .chat__shots{justify-content:flex-end}
.chat__shot{display:block;padding:3px;background:var(--navy-fill);clip-path:var(--stair)}
.chat__shot img{display:block;width:auto;height:auto;max-width:min(240px,100%);max-height:200px;object-fit:contain}
.chat__shot:hover,.chat__shot:focus-visible{background:var(--orange);outline:none}
/* ── Поле сообщения: один блок в рамке - скриншоты, текст, под ним полоса с кнопками ───────── */
.chat__box{display:grid;min-width:0;border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
background:var(--field);background-clip:padding-box}
.chat__box:focus-within{background-color:var(--paper)}
.chat__box.is-bad,.chat.is-drop .chat__box{border-image-source:var(--frame-orange);border-color:var(--orange-line)}
.chat__box textarea{display:block;width:100%;min-width:0;height:44px;min-height:44px;max-height:160px;margin:0;padding:12px 14px 6px;border:0;border-radius:0;resize:none;
background:transparent;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--petrol)}
.chat__box textarea:focus{outline:none}
.chat__box textarea::placeholder{color:var(--slate);opacity:.8}
.chat__box .chat__picked{padding:12px 14px 0}
.chat__bar{display:flex;align-items:center;gap:12px;min-width:0;padding:6px 8px 8px}
.chat__bar .chat__hint{flex:1 1 0;min-width:0;line-height:1.4}
.chat__clip{flex:none;position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;cursor:pointer;
font-family:var(--font-display);font-size:11px;letter-spacing:.06em;line-height:1;color:var(--cyan);background:var(--cyan);clip-path:var(--stair-sm);
-webkit-tap-highlight-color:transparent;user-select:none}
.chat__clip::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--field);clip-path:var(--stair-sm)}
.chat__clip svg{flex:none}
.chat__clip:hover,.chat__clip:focus-within{color:#fff;background:var(--orange)}
.chat__bar .chat__send{flex:none;min-height:36px;height:36px;margin-left:auto;padding-top:0;padding-bottom:0}
@media (hover:none){.chat__bar{justify-content:space-between}}
/* ── Полноэкранный режим на телефоне: черные полосы у краев с вырезом камеры (как на сайте) ── */
@media (display-mode:fullscreen) and (pointer:coarse){
html{background:#000}
body{box-sizing:border-box;border:0 solid #000;border-top-width:max(36px,env(safe-area-inset-top,0px));border-bottom-width:max(24px,env(safe-area-inset-bottom,0px))}
.top{top:max(36px,env(safe-area-inset-top,0px))}
.flash{top:calc(var(--top-h) + 20px + max(36px,env(safe-area-inset-top,0px)))}
/* полосы закреплены: рамка body уезжала при прокрутке, и над прилипшей шапкой просвечивал текст */
html::before,html::after{content:"";position:fixed;left:0;right:0;z-index:2147483000;background:#000;pointer-events:none}
html::before{top:0;height:max(36px,env(safe-area-inset-top,0px))}
html::after{bottom:0;height:max(24px,env(safe-area-inset-bottom,0px))}
}
@media (display-mode:fullscreen) and (pointer:coarse) and (orientation:landscape){
body{border-top-width:0;border-bottom-width:0;border-left-width:max(36px,env(safe-area-inset-left,0px));border-right-width:max(36px,env(safe-area-inset-right,0px))}
.top{top:0}
.flash{top:calc(var(--top-h) + 20px)}
html::before,html::after{top:0;bottom:0;height:auto}
html::before{left:0;right:auto;width:max(36px,env(safe-area-inset-left,0px))}
html::after{right:0;left:auto;width:max(36px,env(safe-area-inset-right,0px))}
}
/* ── Телефон (≤980 px): шапки нет, как на сайте ─────────────────────────────────────────────────────
Логотип и оранжевая кнопка меню плавают в верхних углах поверх страницы; меню открыто - появляется
полоса шапки и под ней панель меню: плитки разделов (пиксельная иконка, название, подсказка), разделы
сайта, выход или вход и регистрация, строка настроек - тема и язык. Прокрутили страницу - за кнопками
подложка цвета страницы. Тема, язык и аватар в полосе - только на десктопе. */
.burger-glow{display:contents}
.top-scrim{display:none}
.tile-prefs,.tile-sep,.tile-auth{display:none}
@media (max-width:980px){
.top,body:has(main.auth) .top{position:fixed;left:0;right:0;top:0;pointer-events:none}
body{padding-top:calc(70px + env(safe-area-inset-top,0px))}
.top__band{background:none;box-shadow:none;border-bottom:0;min-height:0;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0}
.top__band > *,.top__nav{pointer-events:auto}
.top__rule{display:none}
.top-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(4,10,28,.55)}
.top__logo{width:56px;height:52px;justify-content:center}
.top__logo span{display:none}
.top__logo img{height:44px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.top__logo:active{transform:translateY(1px)}
.top__band > .theme-switch,.top__band > .lang,.top__me{display:none}
.burger-glow{display:block;order:3;margin-left:auto;flex:none;animation:cab-burger-glow 2.6s ease-in-out infinite}
.burger-glow:has(.burger[aria-expanded="true"]){animation:none;filter:drop-shadow(0 0 6px rgba(255,102,1,.85))}
.burger{width:56px;height:52px;background:var(--orange);box-shadow:inset 2px 2px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(0,0,0,.3)}
.burger__bars{left:17px;top:24px}
.burger[aria-expanded="true"]{background:#0b1530}
.burger[aria-expanded="true"] .burger__bars::before,.burger[aria-expanded="true"] .burger__bars::after{background:var(--orange)}
.top.is-open .top__band{background:#0b1530;border-bottom:2px solid var(--orange);padding-bottom:10px;animation:nav-drop .12s steps(2,end)}
.top.is-open .top__band::after{content:"CRAZYBOTS";order:2;font-family:var(--font-display);font-size:15px;letter-spacing:.14em;color:#fff;
text-shadow:2px 2px 0 rgba(0,0,0,.35);white-space:nowrap}
.top.is-scrolled:not(.is-open) .top__band{padding-bottom:18px;background:linear-gradient(var(--ground) 0 calc(100% - 18px),transparent)}
/* панель меню */
.top__nav{top:100%;gap:8px;padding:12px 14px 16px;background:#0b1530;border-bottom:3px solid #000;box-shadow:0 6px 0 rgba(0,0,0,.35);
max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
.top.is-open .top__nav{display:grid;grid-template-columns:1fr}
.top__nav .top__nav-m.tile{display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 12px 9px 10px;border:0;
color:#fff;text-decoration:none;font-family:var(--font-display);font-size:13px;line-height:1.35;
background:#15244a;clip-path:var(--stair-sm);box-shadow:inset 0 -2px 0 #0a1228}
.top__nav a.tile:hover,.top__nav a.tile:focus-visible{background:#1b2d5c;outline:0}
.top__nav a.tile[aria-current="page"]{box-shadow:inset 4px 0 0 var(--orange),inset 0 -2px 0 #0a1228}
.top__nav a.tile[aria-current="page"]::before{content:none}
.tile__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;color:#fff;background:var(--orange);clip-path:var(--stair-sm);
box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.25)}
.tile__ico--profile{background:var(--yellow);color:#0b1530}
.tile__ico svg{display:block}
.tile__t{flex:1 1 auto;min-width:0;display:grid;gap:5px}
.tile__t b{font-weight:400;overflow-wrap:anywhere}
.tile__t small{font:12px/1.4 var(--font-body);letter-spacing:0;color:#9fb4d8;overflow-wrap:break-word}
.tile__go{flex:none;color:var(--yellow)}
.top__nav .top__nav-m.tile-sep{display:block;height:2px;margin:4px 0;
background:repeating-linear-gradient(to right,rgba(241,235,218,.3) 0 4px,transparent 4px 8px)}
/* выход - контурной кнопкой; гость - вход и регистрация в ряд */
.top__nav .top__nav-m.tile-out{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:2px;
font-family:var(--font-display);font-size:12px;color:#fff;background:transparent;border:0;clip-path:var(--stair-sm);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);cursor:pointer;text-decoration:none}
.top__nav .top__nav-m.tile-out:hover{background:#1b2d5c}
.top__nav .top__nav-m.tile-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.top__nav .tile-auth a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 8px;border:0;text-align:center;
font-size:12px;color:#fff;clip-path:var(--stair-sm);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.top__nav .tile-auth a:last-child{background:var(--orange);box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.3)}
.top__nav .tile-auth a[aria-current="page"]::before{content:none}
/* настройки: тема двумя иконками, язык - кнопками; одна строка */
.top__nav .top__nav-m.tile-prefs{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:6px;padding-top:12px;
background:repeating-linear-gradient(to right,rgba(241,235,218,.3) 0 4px,transparent 4px 8px) 0 0/100% 2px no-repeat}
.tile-theme,.tile-langs{display:flex;align-items:stretch;min-height:48px;padding:2px;margin:0;border:0;background:#34508a;clip-path:var(--stair-sm)}
.tile-theme{cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.tile-theme > span,.tile-langs button{display:flex;align-items:center;justify-content:center;min-height:44px;border:0;margin:0;
background:#0b1530;color:#cfd6e6;font-family:var(--font-display);font-size:11px;letter-spacing:.06em;cursor:pointer}
.tile-theme > span{flex:0 0 48px;font-size:0}
.tile-theme > span + span,.tile-langs button + button{margin-left:2px}
.tile-theme i{width:24px;height:24px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.tile-theme .tile-theme__dark i{background-image:url("data:image/svg+xml;utf8,")}
.tile-theme[aria-checked="false"] .tile-theme__light,.tile-theme[aria-checked="true"] .tile-theme__dark{background:#1b3270;box-shadow:inset 0 -4px 0 var(--orange)}
.tile-langs button{flex:1 1 0;padding:0 6px}
.tile-langs button[aria-current]{background:#1b3270;color:var(--orange);box-shadow:inset 0 -4px 0 var(--orange)}
.tile-langs button:hover{background:#16295a}
.tile-globe{flex:none;align-self:stretch;box-sizing:content-box;width:20px;height:auto;padding:0 12px;margin-right:2px;background:#0b1530;color:var(--cyan)}
}
@media (max-width:339px){ .top__nav .top__nav-m.tile-prefs{grid-template-columns:1fr} }
@keyframes cab-burger-glow{
0%,100%{filter:drop-shadow(0 0 2px rgba(255,102,1,.35))}
50%{filter:drop-shadow(0 0 10px rgba(255,102,1,.95)) drop-shadow(0 0 3px rgba(255,170,60,.9))}
}
@keyframes cab-burger-glow-light{
0%,100%{filter:drop-shadow(3px 3px 0 #0b1530)}
50%{filter:drop-shadow(3px 3px 0 #0b1530) drop-shadow(0 0 5px rgba(255,102,1,.55))}
}
@media (max-width:980px){
:root[data-theme="light"] .burger-glow{animation-name:cab-burger-glow-light}
:root[data-theme="light"] .burger-glow:has(.burger[aria-expanded="true"]){filter:drop-shadow(3px 3px 0 #0b1530)}
}
@media (prefers-reduced-motion:reduce){ .burger-glow{animation:none !important} }
/* Десктоп: тема и язык - одна приборная планка, как на сайте: ступенчатая рамка, тема - иконкой режима
(солнце - светлая, месяц - темная) за пиксельной перегородкой, язык - глобус и код. */
@media (min-width:981px){
.top__tools{display:flex;align-items:stretch;flex:none;position:relative;isolation:isolate;padding:2px;height:48px;box-sizing:border-box}
.top__tools::before{content:"";position:absolute;inset:0;z-index:-2;background:rgba(241,235,218,.45);clip-path:var(--stair-sm)}
.top__tools::after{content:"";position:absolute;inset:2px;z-index:-1;background:#0b1530;clip-path:var(--stair-sm)}
.top__tools > .theme-switch{justify-content:center;width:46px;gap:0;
background:repeating-linear-gradient(to bottom,rgba(241,235,218,.35) 0 4px,transparent 4px 8px) right 8px/2px calc(100% - 16px) no-repeat}
.top__tools > .theme-switch::after{content:"";display:block;width:24px;height:24px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.top__tools > .theme-switch[aria-checked="true"]::after{background-image:url("data:image/svg+xml;utf8,")}
.top__tools > .theme-switch:hover,.top__tools > .theme-switch:focus-visible{outline:none;background-color:#1b3270}
.top__tools .theme-switch__label,.top__tools .theme-switch__track{display:none}
.top__tools .langsel,.top__tools .langsel summary{height:100%}
.top__tools .langsel summary{padding:0 12px 0 10px;clip-path:none;background:none}
.top__tools .langsel summary::before{display:none}
.top__tools .langsel summary:hover,.top__tools .langsel[open] summary,.top__tools .langsel summary:focus-visible{background-color:#1b3270}
.top__tools .langsel[open] .langsel__caret{color:var(--orange);opacity:1}
.top__tools .langsel__menu{top:calc(100% + 8px)}
}
@media (max-width:980px){ .top__tools{display:none} }
/* список языков - как на сайте: темная панель в светлой рамке, текущий язык - оранжевая метка и галочка */
.langsel__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:200px;padding:2px;display:grid;gap:0;
background:#7d8fb5;clip-path:var(--stair)} /* рамка - как у кнопки языка и приборной планки шапки */
.langsel__menu > *{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:9px 12px;border:0;text-align:left;text-decoration:none;cursor:pointer;
color:#fff;background:#0b1530;font-family:var(--font-body,inherit);font-size:14px;line-height:1.2;
box-shadow:inset 4px 0 0 transparent}
/* строки - через пиксельный пунктир */
.langsel__menu > * + *{background:repeating-linear-gradient(to right,rgba(241,235,218,.28) 0 4px,transparent 4px 8px) 12px 0/calc(100% - 24px) 2px no-repeat,#0b1530}
.langsel__menu b{flex:none;min-width:34px;font-family:var(--font-display);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--cyan)}
.langsel__menu span{flex:1 1 auto;white-space:nowrap}
.langsel__menu > *:hover,.langsel__menu > *:focus-visible{background:#1b3270;outline:none}
/* выбранный язык: оранжевая метка слева, оранжевый код и пиксельная галочка (раньше - голубая заливка) */
.langsel__menu > .is-on,.langsel__menu > [aria-pressed="true"]{box-shadow:inset 4px 0 0 var(--orange)}
.langsel__menu > .is-on b,.langsel__menu > [aria-pressed="true"] b{color:var(--orange)}
.langsel__menu > .is-on::after,.langsel__menu > [aria-pressed="true"]::after{content:"";flex:none;width:12px;height:10px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.langsel__menu > .is-on,.langsel__menu > [aria-pressed="true"]{background:#0b1530;color:#fff}
.langsel__menu > .is-on:hover,.langsel__menu > [aria-pressed="true"]:hover{background:#1b3270}
/* Светлая тема: меню телефона - фирменный синий, как на сайте */
@media (max-width:980px){
:root[data-theme="light"] .top.is-open .top__band{background:var(--band);border-bottom-color:#08327c}
:root[data-theme="light"] .top__nav{background:var(--band);border-bottom-color:#062a75;box-shadow:0 6px 0 rgba(13,27,42,.25)}
:root[data-theme="light"] .top__nav .top__nav-m.tile{background:#0b47b0;color:#fff;box-shadow:inset 0 -3px 0 #08327c}
:root[data-theme="light"] .top__nav a.tile:hover,:root[data-theme="light"] .top__nav a.tile:focus-visible{background:#1257c4}
:root[data-theme="light"] .top__nav a.tile[aria-current="page"]{box-shadow:inset 4px 0 0 var(--orange),inset 0 -3px 0 #08327c}
:root[data-theme="light"] .tile__t small{color:#cfe4ff}
:root[data-theme="light"] .top__nav .top__nav-m.tile-sep{background:repeating-linear-gradient(to right,rgba(255,255,255,.4) 0 4px,transparent 4px 8px)}
:root[data-theme="light"] .top__nav .top__nav-m.tile-out{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
:root[data-theme="light"] .top__nav .top__nav-m.tile-out:hover{background:#1257c4}
:root[data-theme="light"] .top__nav .tile-auth a{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
:root[data-theme="light"] .top__nav .tile-auth a:last-child{box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.3)}
:root[data-theme="light"] .top__nav .top__nav-m.tile-prefs{background:repeating-linear-gradient(to right,rgba(255,255,255,.4) 0 4px,transparent 4px 8px) 0 0/100% 2px no-repeat}
:root[data-theme="light"] .tile-theme,:root[data-theme="light"] .tile-langs{background:#08327c}
:root[data-theme="light"] .tile-theme > span,:root[data-theme="light"] .tile-langs button,:root[data-theme="light"] .tile-globe{background:#0b47b0;color:#fff}
:root[data-theme="light"] .tile-globe{color:var(--cyan)}
:root[data-theme="light"] .tile-theme[aria-checked="false"] .tile-theme__light,:root[data-theme="light"] .tile-theme[aria-checked="true"] .tile-theme__dark{background:#1b6af0;box-shadow:inset 0 -4px 0 var(--orange)}
:root[data-theme="light"] .tile-langs button[aria-current]{background:#1b6af0;color:#fff;box-shadow:inset 0 -4px 0 var(--orange)}
:root[data-theme="light"] .tile-langs button:hover{background:#1257c4}
:root[data-theme="light"] .top-scrim{background:rgba(13,27,42,.4)}
}
/* светлая тема: кнопка закрытия меню - та же оранжевая кнопка с белым крестиком */
@media (max-width:980px){
:root[data-theme="light"] .burger[aria-expanded="true"]{background:var(--orange)}
:root[data-theme="light"] .burger[aria-expanded="true"] .burger__bars::before,
:root[data-theme="light"] .burger[aria-expanded="true"] .burger__bars::after{background:#fff}
}
/* Двери (Chatty Studio, Burnline) - пиксельные углы, как у панелей кабинета (.sheet): ступенчатая рамка
из пиксельной картинки и ступенчатая тень со сдвигом; раньше - прямоугольник из box-shadow */
.door{position:relative;isolation:isolate;background:none;box-shadow:none;border:3px solid transparent}
.door::after{content:'';position:absolute;inset:-3px;z-index:-1;pointer-events:none;
border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
background:var(--door-bg);background-clip:padding-box;clip-path:var(--stair)}
.door::before{content:'';position:absolute;inset:3px -9px -9px 3px;z-index:-2;pointer-events:none;background:var(--shadow);clip-path:var(--stair)}
/* ── Агент-настройщик (account/agent.html): чат - встроенная страница студии /chatty-studio/agent (iframe),
справа - свой агент по MCP. Карточки игрока на этой вкладке нет: чату нужна ширина. ── */
.cab:has([data-agent]){grid-template-columns:minmax(0,1fr)}
.cab:has([data-agent]) .player{display:none}
.cab__grid--agent{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);min-height:0;gap:18px 24px}
.agent__frame{display:block;width:100%;height:100%;min-height:560px;border:0;background:var(--paper-lo);clip-path:var(--stair)}
.agent__side{display:flex;flex-direction:column;overflow-y:auto;min-height:0}
.agent__side .sec__title{margin-top:0}
@media (min-width:1181px){
.cab__grid--agent > .agent__side{contain:size}
.cab:has([data-agent]) .cab__sheet{min-height:calc(100svh - 190px)}
}
@media (max-width:1180px){
.cab__grid--agent{grid-template-columns:1fr;grid-template-rows:auto}
.agent__frame{height:calc(100svh - 150px);min-height:480px}
}
@media (max-width:760px){
.agent__frame{height:calc(100svh - 150px);min-height:420px}
}
/* свой агент по MCP: адрес, токены, выпуск; новый токен - один раз, с командой для Claude Code */
.agent__mcp{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.agent__mcp .agent__note{margin:0;font-size:12px;line-height:1.5;color:var(--text-mute)}
.agent__kv{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:13px;align-items:baseline}
.agent__kv span{color:var(--slate)}
.agent__mcp code{font-size:12px;overflow-wrap:anywhere;word-break:break-all}
.agent__tokens{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.agent__tokens li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--paper-lo);clip-path:var(--stair-sm)}
.agent__tokens li > span{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;overflow-wrap:anywhere}
.agent__tokens small{font-size:11px;color:var(--slate)}
.agent__revoke{flex:none;min-height:36px;padding:0 10px;border:0;cursor:pointer;font:inherit;font-size:12px;color:inherit;background:var(--paper);clip-path:var(--stair-sm)}
.agent__revoke:hover,.agent__revoke:focus-visible{color:#fff;background:var(--danger);outline:none}
.agent__issue{display:flex;flex-wrap:wrap;gap:8px}
.agent__issue input{flex:1 1 180px;min-width:0;min-height:44px;font-size:16px}
.agent__issue .btn{flex:none}
.agent__fresh{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--paper);box-shadow:inset 3px 0 0 var(--orange)}
.agent__fresh[hidden],.agent__meter[hidden]{display:none}
.agent__fresh p{margin:0;font-size:13px;line-height:1.45}
.agent__fresh .btn{align-self:flex-start}
.agent__admin{margin:0 0 22px;padding:10px 12px;background:var(--paper-lo);box-shadow:inset 3px 0 0 var(--orange)}
.agent__issue input{height:44px;padding:0 12px;border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;
border-image-width:6px;border-image-repeat:repeat;background:var(--field);background-clip:padding-box;border-radius:0;
font-family:var(--font-body);color:var(--petrol)}
.agent__issue input::placeholder{color:var(--slate);opacity:.8}
.agent__issue input:focus{outline:none;background-color:var(--paper)}
.agent__mcp .fld__error[hidden],.agent .fld__error[hidden]{display:none}