/* Колесо — вид. Аркадный ростер-скрин: жёсткие края, плотный шрифт, один горячий акцент. */

:root{
  --ink:#0f1013;
  --panel:#171a1f;
  --panel-2:#1e2228;
  --line:#2b3037;
  --line-hi:#3c434c;
  --text:#e8e6e1;
  --dim:#9aa0a8;
  --faint:#6d737b;
  --hot:#e0402c;
  --hot-dim:#8f2a1d;
  --cool:#58c7b2;
  --warn:#d9a13a;
  --gold:#e8c35a;
  --sp:8px;
  --fd:'Oswald',system-ui,sans-serif;
  --fb:'IBM Plex Sans',system-ui,sans-serif;
}

*{box-sizing:border-box}
/* иначе display из класса перебивает атрибут hidden, и спрятанный блок остаётся на экране */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text);
  font:400 15px/1.55 var(--fb);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:15px}
img{display:block}

/* ───────── вход ───────── */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.gate-box{
  width:360px;background:var(--panel);
  border:1px solid var(--line);border-top:3px solid var(--hot);
  padding:28px 28px 24px;
}
.gate-mark{font:500 13px/1 var(--fd);letter-spacing:.08em;color:var(--hot);margin-bottom:12px}
.gate-box h1{font:600 42px/1 var(--fd);margin:0 0 6px;letter-spacing:-.01em}
.gate-sub{margin:0 0 22px;color:var(--dim);font-size:14px}
.gate-box label{display:block;margin-bottom:14px;font-size:13px;color:var(--dim)}
.gate-box input{
  display:block;width:100%;margin-top:5px;padding:10px 12px;
  background:var(--ink);border:1px solid var(--line);color:var(--text);
}
.gate-box input:focus{outline:none;border-color:var(--hot)}
#g-keybox{margin:-4px 0 18px}
#g-keybox summary{cursor:pointer;font-size:13px;color:var(--faint)}
#g-keybox summary:hover{color:var(--dim)}
#g-keybox label{margin-top:10px}
.err{color:var(--hot);font-size:13px;min-height:19px;margin-top:10px}

/* ───────── каркас ───────── */
.app{max-width:1120px;margin:0 auto;padding:0 20px 64px}
.top{
  display:flex;align-items:center;gap:28px;
  padding:18px 0;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.brand{font:600 24px/1 var(--fd);letter-spacing:.01em}
.brand::before{content:'';display:inline-block;width:10px;height:10px;background:var(--hot);margin-right:10px;vertical-align:2px}
.tabs{display:flex;gap:2px;margin-right:auto}
.tab{
  background:none;border:none;padding:8px 14px;cursor:pointer;
  font:500 15px/1 var(--fd);letter-spacing:.02em;color:var(--faint);
  border-bottom:2px solid transparent;
}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--hot)}
.who{font-size:13px;color:var(--dim);display:flex;gap:10px;align-items:baseline}
.link{background:none;border:none;color:var(--faint);text-decoration:underline;cursor:pointer;font-size:12px;padding:0}
.link:hover{color:var(--text)}

h2{font:500 22px/1.2 var(--fd);margin:0 0 4px}
.lede{color:var(--dim);font-size:14px;margin:0 0 20px}
.sect{margin-bottom:40px}
.hr{height:1px;background:var(--line);margin:28px 0}

.btn{
  border:1px solid var(--line-hi);background:var(--panel-2);color:var(--text);
  padding:9px 18px;cursor:pointer;font:500 15px/1.2 var(--fd);letter-spacing:.02em;
}
.btn:hover{border-color:var(--text)}
.btn:disabled{opacity:.4;cursor:default;border-color:var(--line)}
.btn-main{background:var(--hot);border-color:var(--hot);color:#fff}
.btn-main:hover{background:#f04b35;border-color:#f04b35}
.btn-sm{padding:5px 11px;font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ───────── колесо ───────── */
.wheel-page{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
@media(max-width:860px){.wheel-page{grid-template-columns:1fr}}

.wheel-stage{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1}
.pointer{
  position:absolute;left:50%;top:-10px;transform:translateX(-50%);
  width:0;height:0;border:11px solid transparent;border-top:20px solid var(--hot);
  z-index:3;
}
.wheel{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  border:4px solid var(--line-hi);background:var(--panel);
  transition:transform 4.4s cubic-bezier(.1,.76,.06,1);
}
.wheel.idle{transition:none}
.seg{position:absolute;inset:0;clip-path:polygon(50% 50%,36.6% 0,63.4% 0)}
.seg-a{background:#1d2127}
.seg-b{background:#262b33}
.seg .face{
  position:absolute;left:50%;top:7%;transform:translateX(-50%);
  width:58px;height:58px;overflow:hidden;border:2px solid #0f1013;
  background:#0f1013;
}
.seg .face img{width:100%;height:100%;object-fit:cover}
.noface{
  display:grid;place-items:center;width:100%;height:100%;
  font:500 18px/1 var(--fd);color:var(--faint);
}
.seg .noface{font-size:22px}
.hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--ink);
  border:3px solid var(--line-hi);z-index:2;display:grid;place-items:center;
  font:500 11px/1.1 var(--fd);letter-spacing:.1em;color:var(--faint);text-align:center;
}

.result{
  margin-top:24px;min-height:128px;
  border:1px solid var(--line);border-left:3px solid var(--hot);
  background:var(--panel);padding:16px;display:flex;gap:16px;align-items:center;
}
.result.empty{border-left-color:var(--line);color:var(--faint);font-size:14px;align-items:center}
.result .shot{width:96px;height:96px;background:var(--ink);border:1px solid var(--line);flex:none;overflow:hidden}
.result .shot img{width:100%;height:100%;object-fit:cover}
.result h3{font:600 30px/1 var(--fd);margin:0 0 4px}
.result .meta{color:var(--dim);font-size:13px;margin-bottom:12px}

.spin-side .card{background:var(--panel);border:1px solid var(--line);padding:16px;margin-bottom:16px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;border-bottom:1px dotted var(--line)}
.kv:last-child{border-bottom:none}
.kv span:first-child{color:var(--faint)}
.cond{
  background:var(--panel);border:1px solid var(--warn);border-left-width:3px;
  padding:12px 14px;margin-bottom:16px;
}
.cond b{display:block;font:500 12px/1 var(--fd);letter-spacing:.1em;color:var(--warn);margin-bottom:6px}
.cond p{margin:0;font-size:14px}

/* слоты своей команды */
.myteam{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.slot{width:48px;height:48px;border:1px solid var(--line);background:var(--ink);overflow:hidden;flex:none}
.slot img{width:100%;height:100%;object-fit:cover}
.slot.empty{border-style:dashed}

/* ───────── пул ───────── */
.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
.ch{background:var(--panel);border:1px solid var(--line);position:relative}
.ch .pic{aspect-ratio:3/4;background:var(--ink);overflow:hidden}
.ch .pic img{width:100%;height:100%;object-fit:cover}
.ch .pic .noface{height:100%;font-size:30px}
.ch .nm{font:500 15px/1.2 var(--fd);padding:8px 8px 2px;word-break:break-word}
.ch .tl{font-size:11px;color:var(--faint);padding:0 8px 8px}
.ch .tier{
  position:absolute;top:0;right:0;width:24px;height:24px;display:grid;place-items:center;
  font:600 13px/1 var(--fd);background:var(--hot);color:#fff;
}
.ch .tier.t-A{background:#c87a2a}.ch .tier.t-B{background:#486b8f}.ch .tier.t-C{background:#4a5057}
.ch .acts{position:absolute;bottom:0;right:0;display:flex;background:rgba(15,16,19,.88)}
.ch .act{
  background:none;border:none;color:var(--faint);cursor:pointer;
  padding:5px 8px;font-size:12px;
}
.ch .act:hover{color:var(--text)}
.ch .act:last-child:hover{color:var(--hot)}
.ch.used{opacity:.42}
.ch.editing{outline:2px solid var(--hot);outline-offset:-2px}

.addform{background:var(--panel);border:1px solid var(--line);padding:18px;margin-bottom:24px;
  display:grid;grid-template-columns:1fr 1fr 90px auto;gap:12px;align-items:end}
@media(max-width:700px){.addform{grid-template-columns:1fr 1fr}}
.addform label{font-size:12px;color:var(--faint);display:block}
.addform input,.addform select{
  display:block;width:100%;margin-top:4px;padding:8px 10px;
  background:var(--ink);border:1px solid var(--line);color:var(--text);
}
.addform input:focus,.addform select:focus{outline:none;border-color:var(--hot)}
.drop{
  grid-column:1/-1;border:1px dashed var(--line-hi);padding:14px;text-align:center;
  color:var(--faint);font-size:13px;cursor:pointer;display:flex;gap:14px;align-items:center;justify-content:center;
}
.drop:hover{border-color:var(--hot);color:var(--dim)}
.drop img{width:52px;height:52px;object-fit:cover;border:1px solid var(--line)}

/* ───────── доска ───────── */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.col{background:var(--panel);border:1px solid var(--line);padding:14px}
.col.mine{border-color:var(--cool)}
.col.turn{border-color:var(--hot)}
.col h4{font:500 18px/1 var(--fd);margin:0 0 2px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.col .tag{font:500 11px/1 var(--fd);letter-spacing:.08em;color:var(--faint)}
.col.turn .tag{color:var(--hot)}
.col.mine .tag{color:var(--cool)}
.lineup{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.lu{display:flex;gap:9px;align-items:center;font-size:13px}
.lu .av{width:34px;height:34px;flex:none;background:var(--ink);border:1px solid var(--line);overflow:hidden}
.lu .av img{width:100%;height:100%;object-fit:cover}
.lu .av .noface{height:100%;font-size:15px}
.lu.blank{color:var(--faint)}
.lu.blank .av{border-style:dashed}
.lu .sub{color:var(--faint);font-size:11px}

.newround{background:var(--panel);border:1px solid var(--line);padding:18px;margin-bottom:24px}
.newround .row{margin-top:12px}
.newround select,.newround input[type=number]{
  padding:8px 10px;background:var(--ink);border:1px solid var(--line);color:var(--text);
}
.pair{display:flex;gap:8px;align-items:center}
.chk{display:flex;gap:7px;align-items:center;font-size:14px;color:var(--dim);cursor:pointer}
.chk input{accent-color:var(--hot);width:16px;height:16px}

/* ───────── бои ───────── */
.battle{background:var(--panel);border:1px solid var(--line);padding:18px;margin-bottom:20px}
.battle .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.battle .hd h4{font:500 19px/1 var(--fd);margin:0}
.battle .hd .when{font-size:12px;color:var(--faint)}
.sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.side{border:1px solid var(--line);padding:12px;background:var(--panel-2)}
.side.won{border-color:var(--gold)}
.side .nm{font:500 16px/1 var(--fd);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px}
.side .score{color:var(--gold);font-size:13px}
.side .faces{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.side .faces .av{width:38px;height:38px;background:var(--ink);border:1px solid var(--line);overflow:hidden}
.side .faces .av img{width:100%;height:100%;object-fit:cover}
.side .faces .av .noface{height:100%;font-size:16px}
.side .names{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:10px}
.talk{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.msg{font-size:14px;margin-bottom:9px}
.msg b{font-weight:600;color:var(--cool)}
.msg .at{font-size:11px;color:var(--faint);margin-left:6px}
.talk textarea{
  width:100%;min-height:62px;padding:9px 11px;background:var(--ink);
  border:1px solid var(--line);color:var(--text);resize:vertical;
}
.talk textarea:focus{outline:none;border-color:var(--hot)}

.empty-note{color:var(--faint);font-size:14px;padding:28px 0}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--hot);color:#fff;padding:11px 20px;font-size:14px;z-index:40;max-width:92vw;
}
.toast.ok{background:var(--panel-2);border:1px solid var(--cool);color:var(--text)}

/* служебное */
.soon{opacity:.5}
.soon-note{font-size:12px;color:var(--faint);margin-top:6px}

/* ───────── телефоны ─────────
   Друзья откроют ссылку с телефона, так что это основной экран, а не запасной. */
@media(max-width:720px){
  body{font-size:16px}
  .app{padding:0 12px 48px}
  .top{
    flex-wrap:wrap;gap:10px 16px;padding:14px 0;margin-bottom:20px;
    position:sticky;top:0;background:var(--ink);z-index:20;
  }
  .brand{font-size:21px;order:1}
  .who{order:2;margin-left:auto}
  .tabs{
    order:3;width:100%;margin-right:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:8px 12px;flex:none}

  h2{font-size:20px}
  .sect{margin-bottom:28px}

  /* пальцем в мелкую кнопку не попасть */
  .btn{padding:11px 18px}
  .btn-sm{padding:8px 13px}
  .ch .act{padding:9px 11px;font-size:13px}

  .wheel-page{gap:24px}
  .wheel-stage{max-width:min(92vw,380px)}
  .seg .face{width:46px;height:46px;top:6%}
  .hub{width:58px;height:58px;font-size:9px}
  .result{flex-direction:row;gap:12px;padding:12px;min-height:0}
  .result .shot{width:68px;height:68px}
  .result h3{font-size:23px}
  .result .meta{margin-bottom:0;font-size:12px}

  /* в одну колонку кнопка «Добавить» оказывалась выше выбора картинки — ставим её последней */
  .addform{grid-template-columns:1fr;gap:10px;padding:14px}
  .addform .drop{order:1}
  .addform .btn{order:2}
  /* меньше 16px — и Safari на iPhone сам зумит страницу при тапе в поле */
  input,select,textarea{font-size:16px}
  .addform input,.addform select{padding:11px 10px}
  .drop{padding:18px 12px}

  .pool-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
  .ch .nm{font-size:14px}

  .newround .row{gap:8px}
  .newround select,.newround input[type=number]{padding:10px}

  .sides{grid-template-columns:1fr}
  .battle,.col,.newround{padding:13px}
  .talk textarea{padding:11px}
  .toast{left:12px;right:12px;bottom:12px;transform:none;text-align:center}
  .gate{padding:16px}
  .gate-box{width:100%;max-width:360px;padding:24px 20px 20px}
  .gate-box h1{font-size:36px}
}

/* совсем узкие экраны */
@media(max-width:380px){
  .pool-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .seg .face{width:38px;height:38px}
}