/* Player platform — same design tokens as the join/role pages and the host app. */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
:root{
  --ink:#10131A; --mut:#6B7480; --mut2:#8E97A3; --bg:#F4F5F7; --card:#fff;
  --line:#E4E7EC; --lineweak:#ECEEF2; --accent:#D02734; --accent-wash:#FBEAEC;
  --green:#46A758; --mafia:#7B3AED; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
body{background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;
  min-height:100dvh;padding-bottom:86px;overflow-x:hidden}
#root{width:100%;max-width:480px;margin:0 auto;padding:18px 20px 30px;display:flex;
  flex-direction:column;gap:14px}
h1{font:600 26px/1.15 Oswald,sans-serif;text-transform:uppercase;white-space:pre-line}
h2{font:600 10.5px Manrope;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}
.lead{font:400 13px/1.55 Manrope;color:var(--mut);text-wrap:pretty}
.err{font:600 12.5px Manrope;color:var(--accent)}
.ok{font:600 12.5px Manrope;color:var(--green)}

/* Шапка — та сама розмітка й ті самі класи, що в brandBar (src/web.ts),
   щоб сторінки столу і платформа виглядали однією річчю. */
header.bar{width:100%;display:flex;align-items:center;gap:8px;padding:4px 0 8px}
.brandlink{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent}
.mark{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font:600 16px Oswald;flex:none}
.brand{font:600 17px Oswald;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.brand i{color:var(--accent);font-style:normal}
.langpick{position:relative;margin-left:auto;display:flex;align-items:center;min-width:0}
.langpick::after{content:'▾';position:absolute;right:11px;pointer-events:none;
  font:600 10px Manrope;color:var(--mut2)}
select.lngsel{appearance:none;-webkit-appearance:none;min-height:34px;max-width:140px;flex:none;
  padding:0 25px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:#3D4654;font:600 12px Manrope;line-height:1;cursor:pointer;outline:none;
  text-overflow:ellipsis;white-space:nowrap}
select.lngsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acct{font:700 12px Manrope;color:var(--ink);text-decoration:none;padding:9px 13px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);flex:none;
  max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Вигляд пігулок шапки — як на сторінках столу, а палець ловить 44px.
   overflow:visible тут обов'язковий: інакше пігулка обрізала б свою хіт-зону
   (задовгий нік натомість ріже JS). */
.brandlink,.acct{position:relative}
.acct{overflow:visible}
.brandlink::after,.acct::after{content:"";position:absolute;inset:-5px -4px}
.iconbtn{width:44px;height:44px;border-radius:50%;background:var(--card);flex:none;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--mut);cursor:pointer;text-decoration:none;font-size:15px}

.card{background:var(--card);border:1px solid var(--lineweak);border-radius:20px;padding:16px}
.pill{width:100%;height:56px;border-radius:999px;border:none;background:var(--accent);
  color:#fff;font:600 15px Oswald;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 10px 24px rgba(208,39,52,.24);cursor:pointer}
.pill:disabled{background:#EDEEF1;color:#AEB4BF;box-shadow:none;cursor:default}
.ghost{width:100%;min-height:48px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:#3D4654;font:600 13.5px Manrope;cursor:pointer}
/* Ті самі кнопки, але посиланнями — вирівнювання тексту тримає CSS, не стилі в розмітці */
a.pill,a.ghost{display:flex;align-items:center;justify-content:center;text-decoration:none}
.txt{width:100%;height:54px;border-radius:999px;border:1.5px solid var(--line);
  padding:0 22px;font:600 15px Manrope;outline:none;background:var(--card)}
.txt:focus{border-color:var(--accent)}
/* Код столу: поле на всю висоту пігулки, щоб палець влучав будь-де в ній */
.codein{flex:1;min-width:0;align-self:stretch;border:none;outline:none;background:none;
  font:600 17px var(--mono);letter-spacing:.2em;text-transform:uppercase}
textarea.txt{height:84px;border-radius:20px;padding:14px 20px;resize:none;font-weight:500}
label.fld{display:flex;flex-direction:column;gap:6px;font:600 11px Manrope;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font:600 12px Manrope;color:#3D4654}
.chip.acc{background:var(--accent-wash);border-color:rgba(208,39,52,.3);color:var(--accent)}
.mono{font-family:var(--mono)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:var(--card);border:1px solid var(--lineweak);border-radius:16px;
  padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:3px}
.tile b{font:500 22px Oswald}
.tile span{font:600 9px Manrope;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut2);text-align:center;line-height:1.25}

.row{display:flex;align-items:center;gap:10px}
.list{display:flex;flex-direction:column;gap:6px}
.li{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--lineweak);border-radius:14px;padding:11px 14px}
.li .grow{flex:1;min-width:0}
.li b{font:700 14px Manrope;display:block}
.li small{font:500 11px Manrope;color:var(--mut2)}
.li .pts{font:600 13px var(--mono);font-family:var(--mono)}
.li.you{background:var(--ink);border-color:var(--ink)}
.li.you b,.li.you .pts{color:#fff}
.li.you small{color:#8E97A3}

.rolebar{display:flex;flex-direction:column;gap:4px}
.rolebar .rb-top{display:flex;justify-content:space-between;gap:10px;
  font:600 12px Manrope}
.rolebar .rb-top span:last-child{color:var(--mut2);font-weight:500;white-space:nowrap}
.rb-track{height:6px;border-radius:3px;background:var(--lineweak);overflow:hidden}
.rb-fill{height:100%;border-radius:3px;background:var(--accent)}

.seg{display:flex;gap:8px}
.seg button{flex:1;min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font:600 13px Manrope;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* Чотири ролі в рядок не влазять у 375px — тому сітка 2×2 */
.rolepick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rolepick button{min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font:600 12.5px Manrope;color:var(--mut);cursor:pointer;
  padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rolepick button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.skins{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skin{background:var(--card);border:1px solid var(--lineweak);border-radius:18px;
  padding:14px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.skin .sw{width:52px;height:74px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;color:#D6BEFF;font:600 15px Oswald;
  box-shadow:0 6px 14px rgba(16,19,26,.18)}
.skin b{font:700 13.5px Manrope}
.skin small{font:500 11px Manrope;color:var(--mut2)}
.skin button{align-self:stretch;min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font:600 12px Manrope;cursor:pointer;color:#3D4654;padding:0 8px}
.skin button.buy{background:var(--accent);border-color:var(--accent);color:#fff}
.skin button.act{background:var(--green);border-color:var(--green);color:#fff}
.skin button:disabled{opacity:.5;cursor:default}

.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--card);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;flex:1;min-width:0;
  font:600 10px Manrope;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut2);text-decoration:none;padding:4px 6px;border-radius:12px}
.tabs a .tt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs a.on{color:var(--accent)}
.tabs .ti{font-size:16px;line-height:1}

.center{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.avatar{width:76px;height:76px;border-radius:50%;background:var(--accent-wash);flex:none;
  border:1.5px solid rgba(208,39,52,.35);display:flex;align-items:center;
  justify-content:center;font:600 30px Oswald;color:var(--accent)}
.medals{display:flex;gap:8px;flex-wrap:wrap}
.medal{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font:600 13px Oswald;
  border:2px solid #C9A227}
.danger{color:var(--accent);background:none;border:none;font:600 13px Manrope;
  cursor:pointer;min-height:44px;padding:0}
footer{margin-top:18px;text-align:center;font:500 10px var(--mono);
  font-family:var(--mono);color:var(--mut2);letter-spacing:.12em;text-transform:uppercase}

/* iPhone 375px: вужчі поля і дрібніший заголовок, щоб шапка лишалась в один рядок */
@media (max-width:400px){
  #root{padding:16px 14px 28px}
  h1{font-size:23px}
  .avatar{width:64px;height:64px;font-size:26px}
  .tile{padding:11px 4px}
  .tile b{font-size:20px}
  .acct{max-width:88px}
}

@media (min-width:900px){
  #root{max-width:720px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .rolepick{grid-template-columns:repeat(4,1fr)}
  .skins{grid-template-columns:repeat(4,1fr)}
}

/* ══ Екрани входу ══════════════════════════════════════════════════════════
   Дві половини: темна вітрина 520px і картка 394px на #F2F3F5; на телефоні
   вітрина стає шапкою 330px, а картка — формою на всю ширину. Числа зняті з
   макета (design_handoff_auth, турн 4) — округлення ламає перспективу столу. */
/* Акцент екранів входу — #E01F2D, а не спільний #D02734: інакше фокусна
   рамка перемикача мови під карткою світилась би чужим червоним. */
body.auth{--accent:#E01F2D;padding-bottom:0;background:#F2F3F5;color:#14161A}
body.auth #root{display:block;width:100%;max-width:none;margin:0;padding:0;gap:0}
.auth-wrap{display:flex;min-height:100dvh}

/* Вітрина ─ стіл, карти, логотип */
.sc{position:relative;flex:none;width:520px;overflow:hidden;background:#0A0B0E;color:#ECEFF3}
.sc-desk,.sc-phone{position:absolute;inset:0}
.sc-phone{display:none}
/* Карти лежать у площині столу, тому їхні left/top — координати ДО повороту:
   rotateZ виносить велике left за клип-бокс, і карта просто зникає. */
.sc-plane{position:absolute;left:-140px;bottom:-150px;width:820px;height:660px;
  transform:perspective(1500px) rotateX(55deg) rotateZ(-32deg) scale(1.24);
  transform-style:preserve-3d}
.sc-b{position:absolute;width:190px;height:190px;border-radius:3px}
.sc-dom{position:absolute;right:14px;bottom:14px;font:700 15px Oswald,sans-serif;
  letter-spacing:.14em;color:#3A4252}
/* content-box навмисно: у макеті 118×166 — це сама картинка, а 1px рамка
   лежить зовні. З глобальним border-box кожна карта втрачала б по 2px і стіл
   «сідав» на ~1.6%. Те саме для трійки-логотипа нижче. */
.sc-c{position:absolute;box-sizing:content-box;width:118px;height:166px;border-radius:12px;
  overflow:hidden;box-shadow:0 22px 34px rgba(0,0,0,.62)}
.sc-c img,.sc-fan img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 8%}
.sc-top{position:absolute;left:0;right:0;top:0;height:310px;z-index:1;
  background:linear-gradient(to bottom,#0A0B0E 34%,rgba(10,11,14,.74) 70%,rgba(10,11,14,0))}
/* Нижнє затемнення НЕ дзеркальне до верхнього (як каже README), а одна пологa
   рампа з макета — інакше передній ряд карт гасне вдвічі. */
.sc-bot{position:absolute;left:0;right:0;bottom:0;height:170px;z-index:1;
  background:linear-gradient(to top,#0A0B0E 26%,rgba(10,11,14,0))}
.sc-logo{position:absolute;left:0;right:0;top:64px;z-index:2;display:flex;
  flex-direction:column;align-items:center;gap:26px}
.sc-fan{position:relative;width:340px;height:250px}
.halo-r{position:absolute;left:50%;top:34px;margin-left:-150px;width:300px;height:200px;
  border-radius:50%;filter:blur(6px);
  background:radial-gradient(ellipse,rgba(224,31,45,.46),transparent 68%)}
.halo-v{position:absolute;left:50%;top:18px;margin-left:-120px;width:240px;height:200px;
  border-radius:50%;filter:blur(6px);
  background:radial-gradient(ellipse,rgba(150,85,235,.5),transparent 66%)}
.fan-l,.fan-r{position:absolute;box-sizing:content-box;top:36px;width:134px;height:192px;
  border-radius:18px;overflow:hidden}
.fan-l{left:16px;background:#FBE9EC;border:1px solid rgba(224,31,45,.5);
  transform:rotate(-13deg);box-shadow:0 20px 44px rgba(0,0,0,.7),0 0 34px rgba(224,31,45,.28)}
.fan-r{right:16px;background:#E8EEFB;border:1px solid rgba(90,130,220,.5);
  transform:rotate(13deg);box-shadow:0 20px 44px rgba(0,0,0,.7),0 0 34px rgba(70,110,220,.24)}
/* #F0E6F7 — власний, тепліший відтінок центральної карти, а не мафійна плитка */
.fan-m{position:absolute;box-sizing:content-box;left:50%;top:6px;margin-left:-76px;
  width:152px;height:216px;border-radius:20px;overflow:hidden;background:#F0E6F7;
  border:1.5px solid #B87FE0;
  box-shadow:0 26px 56px rgba(0,0,0,.78),0 0 54px rgba(160,90,235,.5)}
.fan-m img{object-position:center 6%}
/* Без цієї віньєтки слово лягає на світлі карти й зникає */
.sc-word{position:relative;padding:6px 26px}
.sc-vig{position:absolute;left:50%;top:50%;margin:-64px 0 0 -175px;width:350px;height:128px;
  border-radius:50%;
  background:radial-gradient(ellipse,#0A0B0E 42%,rgba(10,11,14,.86) 66%,rgba(10,11,14,0) 78%)}
.sc-word b{position:relative;display:block;font:700 74px/.86 Oswald,sans-serif;
  letter-spacing:.03em;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(10,11,14,.9),0 0 40px rgba(224,31,45,.28)}
.sc-word i{color:#E01F2D;font-style:normal}

/* Телефонна вітрина: та сама сцена, але щільніша й темніша під шапку 330px */
.sc-phone .sc-plane{left:-90px;bottom:-170px;width:620px;height:470px;
  transform:perspective(1200px) rotateX(56deg) rotateZ(-32deg)}
.sc-phone .sc-b{width:150px;height:150px}
.sc-phone .sc-dom{right:11px;bottom:11px;font-size:12px;color:#191C23}
.sc-phone .sc-c{width:96px;height:136px;border-radius:11px;
  box-shadow:0 18px 28px rgba(0,0,0,.62)}
.sc-phone .sc-top{height:230px;
  background:linear-gradient(to bottom,#0A0B0E 46%,rgba(10,11,14,.8) 76%,rgba(10,11,14,0))}
/* Край столу має лишатись видимим і йти під форму — тому рампа пологіша */
.sc-phone .sc-bot{height:120px;
  background:linear-gradient(to top,#0A0B0E 24%,rgba(10,11,14,0))}
.sc-phone .sc-logo{top:58px;gap:14px}
.sc-phone .sc-fan{width:240px;height:150px}
.sc-phone .halo-r{top:22px;margin-left:-105px;width:210px;height:130px;filter:blur(5px);
  background:radial-gradient(ellipse,rgba(224,31,45,.46),transparent 68%)}
.sc-phone .halo-v{top:12px;margin-left:-85px;width:170px;height:130px;filter:blur(5px);
  background:radial-gradient(ellipse,rgba(150,85,235,.5),transparent 66%)}
.sc-phone .fan-l,.sc-phone .fan-r{top:24px;width:88px;height:122px;border-radius:13px}
.sc-phone .fan-l{left:10px;box-shadow:0 14px 30px rgba(0,0,0,.7),0 0 24px rgba(224,31,45,.26)}
.sc-phone .fan-r{right:10px;box-shadow:0 14px 30px rgba(0,0,0,.7),0 0 24px rgba(70,110,220,.22)}
.sc-phone .fan-m{top:2px;margin-left:-50px;width:100px;height:140px;border-radius:15px;
  box-shadow:0 18px 40px rgba(0,0,0,.78),0 0 40px rgba(160,90,235,.5)}
.sc-phone .sc-word{padding:4px 20px}
.sc-phone .sc-vig{margin:-44px 0 0 -125px;width:250px;height:88px;
  background:radial-gradient(ellipse,#0A0B0E 44%,rgba(10,11,14,.88) 68%,rgba(10,11,14,0) 80%)}
.sc-phone .sc-word b{font-size:48px;line-height:.88;
  text-shadow:0 2px 14px rgba(10,11,14,.92),0 0 30px rgba(224,31,45,.3)}

/* Картка ─ права половина */
.auth-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  padding:18px 30px;overflow:auto;background:#F2F3F5}
/* margin:auto замість justify-content: центрування в скролері не ріже верх */
.auth-col{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%}
.auth-card{flex:none;width:394px;max-width:100%;border-radius:24px;background:#fff;
  box-shadow:0 8px 30px rgba(20,22,26,.09);overflow:hidden}
/* Внутрішні лінійки картки — #EEF0F3, світліші за #E4E7EB роздільника й поля:
   на темнішому картка розсипалась би на три окремі блоки. */
.auth-head{padding:15px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;
  justify-content:center;gap:10px}
.auth-mark{width:32px;height:32px;border-radius:10px;background:#14161A;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font:700 15px Oswald,sans-serif}
.auth-wm{font:700 21px Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.auth-wm i{color:#E01F2D;font-style:normal}
.auth-body{padding:18px 28px 16px;display:flex;flex-direction:column;gap:13px}
.auth-h{font:600 23px Oswald,sans-serif;text-transform:uppercase;text-align:center}
.auth-seen{font:600 12px/1.45 Manrope,sans-serif;color:#E01F2D;text-align:center;
  text-wrap:pretty}
.soc{display:flex;flex-direction:column;gap:9px}
/* 48, а не 46: у макеті 46 — це внутрішня висота, рамка додана зверху.
   Поле пошти там border-box, тому лишається 46 — різниця свідома. */
.sbtn{position:relative;width:100%;height:48px;padding:0 14px;border-radius:14px;
  border:1px solid #D9DDE3;background:#fff;color:#14161A;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:11px;
  font:600 14px Manrope,sans-serif}
.sbtn:active{background:#F7F8FA}
.sbtn svg{flex:none}
/* Кнопку Google малює їхній скрипт і перефарбувати її не можна, тож справжня
   кнопка лежить прозорим шаром поверх нашої — клік дістається саме їй. */
.gsi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;opacity:0}
.orline{display:flex;align-items:center;gap:12px;font:600 11px Manrope,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#9AA1AC}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:#E4E7EB}
.au-form{display:flex;flex-direction:column;gap:9px}
.au-in{width:100%;height:46px;padding:0 15px;border-radius:14px;background:#F7F8FA;
  border:1px solid #E4E7EB;font:400 14px Manrope,sans-serif;color:#14161A;outline:none}
/* Світліший за #9AA1AC роздільника: порожнє поле не має важити як текст */
.au-in::placeholder{color:#A6ADB6}
.au-in:focus{border-color:#14161A;background:#fff}
.au-in.bad{border-color:#E01F2D;background:#FDECEE}
.au-go{width:100%;height:50px;border:none;border-radius:14px;background:#E01F2D;color:#fff;
  font:700 15px Manrope,sans-serif;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;box-shadow:0 10px 22px rgba(224,31,45,.24)}
.au-go:disabled{background:#E9ECEF;color:#9AA1AC;box-shadow:none;cursor:default}
.au-note{font:400 11.5px/1.5 Manrope,sans-serif;color:#9AA1AC;text-align:center;
  text-wrap:pretty}
/* На телефоні полотно (4c) підказку про пароль не показує — екран і так довгий.
   Ховаємо лише її: юридичний рядок реєстрації лишається на обох ширинах. */
@media (max-width:899px){ .au-hint{display:none} }
.au-err{font:600 12px/1.45 Manrope,sans-serif;color:#E01F2D;text-align:center;
  text-wrap:pretty}
.au-ok{font:600 12px/1.45 Manrope,sans-serif;color:#46A758;text-align:center}
.au-code{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
  font:500 12px Manrope,sans-serif;color:#9AA1AC}
.au-code:hover{color:#6B7280}
.auth-foot{padding:13px;border-top:1px solid #EEF0F3;background:#FAFBFC;display:flex;
  align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  font:400 12.5px Manrope,sans-serif;color:#6B7280}
.auth-foot a,.linkbtn{font:700 12.5px Manrope,sans-serif;color:#E01F2D;text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer}
.linkbtn:disabled{color:#9AA1AC;cursor:default}
.authlang{position:relative;display:flex;align-items:center;gap:8px;
  font:500 12.5px Manrope,sans-serif;color:#6B7280}
.authlang svg{flex:none}
.authlang::after{content:'⌄';position:absolute;right:2px;top:1px;color:#9AA1AC;
  pointer-events:none}
select.aulng{appearance:none;-webkit-appearance:none;min-height:34px;max-width:none;
  padding:0 18px 0 0;border:none;border-radius:0;background:none;color:#6B7280;
  font:500 12.5px Manrope,sans-serif;cursor:pointer;outline:none}

/* Екран коду */
.cdrow{display:flex;gap:8px;justify-content:center}
.cdc{flex:0 1 48px;min-width:0;height:58px;padding:0;border-radius:13px;
  border:1.5px solid #E4E7EB;background:#F7F8FA;color:#14161A;text-align:center;
  text-transform:uppercase;caret-color:#E01F2D;outline:none;
  font:600 22px 'IBM Plex Mono',ui-monospace,monospace}
.cdc.on{border-color:#14161A;background:#fff}
.cdc:focus{border-color:#E01F2D;background:#fff}
/* Блок на 15 хвилин і перевірка коду вимикають клітинки — без цього вони
   виглядають живими й мовчки ковтають набір. */
.cdc:disabled{background:#E9ECEF;border-color:#E4E7EB;color:#9AA1AC;cursor:default}
.cdrow.bad .cdc{border-color:#E01F2D;color:#E01F2D;background:#FDECEE}
.cdrow.shake{animation:cdshake .38s}
@keyframes cdshake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}}
.mailrow{display:flex;gap:9px}
.mailrow .sbtn{font-size:13px;padding:0 8px}
.spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.only-phone{display:none}

/* Телефон: вітрина — шапка, форма без білої картки, поля вищі й округліші */
@media (max-width:899px){
  .auth-wrap{flex-direction:column}
  .sc{width:auto;height:330px}
  .sc-desk{display:none}
  .sc-phone{display:block}
  .auth-side{padding:0;overflow:visible}
  /* Футер картки притиснутий до низу екрана, як у макеті: тягнеться тіло */
  .auth-col{margin:0;gap:0;flex:1}
  .auth-card{width:100%;max-width:560px;border-radius:0;background:none;box-shadow:none;
    flex:1;display:flex;flex-direction:column}
  .auth-head{display:none}
  .auth-body{flex:1;padding:18px 18px 20px;gap:12px}
  .auth-h{font-size:22px}
  /* У телефонного макета власні метрики: 50/54, радіус 16. Білої картки
     під формою немає, тому елементи відділяє сама заливка — рамки гасимо
     прозорим кольором (не border:none), щоб :focus і .bad могли її
     повернути, а висота лишилась тією самою. Тінь під головною кнопкою
     теж прибрана: на #F2F3F5 без картки вона читається як брудна пляма. */
  .sbtn{height:50px;border-radius:16px;border-color:transparent}
  .au-in{height:50px;padding:0 16px;border-radius:16px;background:#fff;
    border-color:transparent}
  .au-go{height:54px;border-radius:16px;box-shadow:none}
  .auth-foot{padding:12px 18px 26px;background:none;border-top:none;font-size:13px}
  .auth-foot a,.linkbtn{font-size:13px}
  .authlang{padding-bottom:26px}
  .only-desk{display:none}
  .only-phone{display:flex}
}

/* Десктоп: дві половини в одному вікні, сторінка не скролиться */
@media (min-width:900px){
  body.auth{overflow:hidden}
  .auth-wrap{height:100dvh}
}