/* ============ Телефон игрока ============ */
:root{--team:#26d9ff;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%}
body{font-size:22px;overscroll-behavior-y:none}
#app{min-height:100vh;min-height:100dvh;padding-bottom:calc(76px + var(--sab))}
svg{display:block}
.wrap{padding:0 16px;max-width:560px;margin:0 auto}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:20;padding:calc(10px + var(--sat)) 16px 10px;background:linear-gradient(180deg,rgba(5,7,15,.96),rgba(5,7,15,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--stroke)}
.top .in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px}
.tchip{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.tchip .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tchip .sub{font-size:17px;color:var(--muted)}
.score{font-family:var(--f-display);font-weight:900;font-size:26px;color:var(--team);text-shadow:0 0 16px color-mix(in srgb,var(--team) 60%,transparent)}
.tm{font-family:var(--f-display);font-weight:700;font-size:23px;padding:6px 11px;border-radius:99px;background:rgba(61,255,160,.12);border:1px solid rgba(61,255,160,.4);color:var(--green);font-variant-numeric:tabular-nums}
.tm.warn{background:rgba(255,178,62,.12);border-color:rgba(255,178,62,.5);color:var(--amber)}
.tm.crit{background:rgba(255,61,90,.14);border-color:rgba(255,61,90,.6);color:var(--red);animation:crit 1s steps(2) infinite}
.tm.off{background:var(--glass);border-color:var(--stroke);color:var(--muted)}
@keyframes crit{50%{opacity:.5}}
.fogb{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:rgba(190,205,255,.1);border:1px solid rgba(200,215,255,.35);font-size:20px;color:#dfe8ff}

/* ---------- вход ---------- */
.join{padding:calc(28px + var(--sat)) 16px 30px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand svg{width:44px;height:44px;filter:drop-shadow(0 0 10px rgba(38,217,255,.7))}
.brand b{font-family:var(--f-display);font-weight:900;font-size:29px}
.join h1{font-family:var(--f-display);font-weight:900;font-size:39px;line-height:1.1;margin:22px 0 8px}
.join p{color:var(--muted);margin:0 0 20px}
label.f{display:block;font-size:18px;color:var(--muted);margin:16px 0 7px;font-weight:600}
input.in,.inp{width:100%;min-height:50px;padding:12px 15px;border-radius:14px;border:1px solid var(--stroke2);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:22px}
input.in:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(38,217,255,.2)}
.teams{display:flex;flex-direction:column;gap:9px}
.tm-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px;border:1.5px solid var(--stroke);background:var(--glass);cursor:pointer;min-height:56px;text-align:left;width:100%}
.tm-card.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--c) 30%,transparent)}
.tm-card .n{flex:1;min-width:0;font-weight:600}
.tm-card small{display:block;color:var(--muted);font-weight:400;font-size:17px}
.tm-card.full{opacity:.45}
.sep{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:18px;margin:16px 0 0}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--stroke)}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;padding:0 20px;border:0;border-radius:15px;font-weight:700;font-size:22px;cursor:pointer;background:linear-gradient(95deg,var(--cyan),#7be4ff);color:#031018;transition:transform .15s var(--ease),filter .2s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;filter:grayscale(.5)}
.btn.ghost{background:var(--glass2);color:var(--text);border:1px solid var(--stroke2)}
.btn.sm{min-height:44px;font-size:20px;width:auto;padding:0 16px;border-radius:12px}
.btn.green{background:linear-gradient(95deg,var(--green),#9bffd0)}
.err{color:#ff8a9c;font-size:20px;margin-top:10px;min-height:20px}

/* ---------- ожидание ---------- */
.wait{padding:26px 0;text-align:center}
.radar{position:relative;width:170px;height:170px;margin:10px auto 22px;border-radius:50%;border:1px solid rgba(38,217,255,.5);background:radial-gradient(circle,rgba(38,217,255,.12),transparent 70%)}
.radar::before,.radar::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(38,217,255,.35)}
.radar::after{inset:38%}
.radar i{position:absolute;left:50%;top:50%;width:50%;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,var(--cyan),transparent);animation:sweep 3s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.wait h2{font-family:var(--f-display);font-weight:900;font-size:30px;margin:0 0 8px}
.wait p{color:var(--muted);margin:0}
.mates{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.mates span{padding:7px 13px;border-radius:99px;background:var(--glass2);border:1px solid var(--stroke);font-size:20px}

/* ---------- задания ---------- */
.sect{display:flex;align-items:center;gap:9px;margin:22px 0 10px;font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.sect em{margin-left:auto;font-style:normal;font-family:var(--f-body);font-weight:600;letter-spacing:0;color:var(--muted);font-size:17px}
.tk{position:relative;display:flex;align-items:center;gap:13px;width:100%;padding:14px 15px 14px 18px;margin-bottom:9px;border-radius:16px;background:var(--glass);border:1px solid var(--stroke);text-align:left;cursor:pointer;min-height:68px;overflow:hidden;transition:transform .15s var(--ease),border-color .2s}
.tk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);box-shadow:0 0 14px var(--c)}
.tk:active{transform:scale(.985)}
.tk .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);flex:none}
.tk .tt{flex:1;min-width:0}
.tk .tt b{display:block;font-size:22px;line-height:1.25}
.tk .tt small{color:var(--muted);font-size:18px}
.tk .pt{font-family:var(--f-display);font-weight:700;font-size:21px;color:var(--c)}
.tk.done{background:rgba(61,255,160,.07);border-color:rgba(61,255,160,.35)}
.tk.done .pt{color:var(--green)}
.tk.lock{opacity:.5}
.bnr{padding:12px 14px;border-radius:14px;margin-top:14px;font-size:20px;line-height:1.4}
.bnr.red{background:rgba(255,61,90,.1);border:1px solid rgba(255,61,90,.45)}
.bnr.blue{background:rgba(38,217,255,.08);border:1px solid rgba(38,217,255,.35)}

/* ---------- нижняя навигация ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);padding:7px 10px calc(7px + var(--sab));background:rgba(7,10,22,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--stroke2)}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;padding:6px 2px;border:0;background:transparent;color:var(--dim);font-size:17px;font-weight:600;border-radius:12px;cursor:pointer}
.nav button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav button.on{color:var(--cyan)}
.nav button.on svg{filter:drop-shadow(0 0 7px var(--cyan))}

/* ---------- панели и листы ---------- */
.sheet{position:fixed;inset:0;z-index:60;background:var(--bg);transform:translateY(102%);transition:transform .45s var(--ease);display:flex;flex-direction:column;visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sh-head{display:flex;align-items:center;gap:12px;padding:calc(10px + var(--sat)) 14px 10px;border-bottom:1px solid var(--stroke);background:linear-gradient(180deg,color-mix(in srgb,var(--c,#26d9ff) 22%,#05070f),#05070f)}
.sh-head .back{width:44px;height:44px;border-radius:13px;border:1px solid var(--stroke2);background:var(--glass2);display:grid;place-items:center;cursor:pointer;flex:none}
.sh-head .back svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sh-head .cat{font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:700}
.sh-head .pts{margin-left:auto;font-family:var(--f-display);font-weight:900;font-size:26px;color:var(--c)}
.sh-body{flex:1;overflow-y:auto;padding:18px 16px calc(40px + var(--sab));-webkit-overflow-scrolling:touch}
.sh-in{max-width:560px;margin:0 auto}
.sh-in h2{font-family:var(--f-display);font-weight:900;font-size:32px;line-height:1.12;margin:0 0 8px}
.who{font-size:20px;color:var(--muted);margin-bottom:10px;font-weight:600}
.story{font-size:22px;line-height:1.55;margin:0 0 14px}
.quote{border-left:3px solid var(--c);padding:3px 0 3px 14px;font-style:italic;color:#e0e7ff;margin:0 0 16px;line-height:1.5}
.bubble{padding:14px 16px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);margin:0 0 16px;font-size:22px;line-height:1.7}
.bubble div+div{margin-top:3px}
.actions{display:flex;flex-direction:column;gap:9px;margin:4px 0 16px}
.file{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke2);width:100%;text-align:left;cursor:pointer;min-height:56px}
.file b{display:block;font-size:21px}.file small{color:var(--muted);font-size:17px}
.file svg{width:26px;height:26px;stroke:var(--c);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hint{padding:12px 14px;border-radius:14px;background:rgba(255,178,62,.08);border:1px solid rgba(255,178,62,.4);margin-bottom:9px;font-size:21px;line-height:1.5}
.hint b{color:var(--amber)}
.flagform{margin-top:18px;padding:16px;border-radius:20px;background:linear-gradient(160deg,rgba(38,217,255,.09),rgba(176,108,255,.07));border:1px solid var(--stroke2)}
.flagform h3{margin:0 0 10px;font-family:var(--f-display);font-size:22px}
.flagform .inp{font-family:var(--f-mono);font-size:22px}
.flagform .inp+.inp{margin-top:9px;font-family:var(--f-body)}
.flagform .btn{margin-top:12px}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.okpanel{padding:20px 16px;border-radius:20px;text-align:center;background:rgba(61,255,160,.09);border:1.5px solid rgba(61,255,160,.55);margin-top:18px;animation:pop .6s var(--ease-spring)}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.okpanel .big{font-family:var(--f-display);font-weight:900;font-size:44px;color:var(--green);text-shadow:0 0 24px rgba(61,255,160,.5)}
.okpanel p{margin:6px 0 0;color:#cfe;font-size:21px}
.sol{margin-top:18px;padding:16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
.sol h3{margin:0 0 8px;font-family:var(--f-display);font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sol ol{margin:0;padding-left:20px;line-height:1.55}
.sol .df{margin-top:12px;padding:12px;border-radius:12px;background:rgba(61,255,160,.08);border:1px solid rgba(61,255,160,.3);font-size:20px;line-height:1.5}
.sol code{font-family:var(--f-mono);color:var(--green)}

/* ---------- инструменты ---------- */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:6px}
.tl{padding:16px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--stroke);text-align:left;cursor:pointer;min-height:112px;display:flex;flex-direction:column;gap:7px}
.tl svg{width:30px;height:30px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tl b{font-size:22px}.tl small{color:var(--muted);font-size:17px;line-height:1.35}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.seg button{min-height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--stroke2);background:var(--glass);color:var(--muted);font-weight:600;font-size:20px;cursor:pointer}
.seg button.on{background:rgba(38,217,255,.15);border-color:var(--cyan);color:var(--cyan)}
.canvaswrap{border-radius:14px;overflow:auto;border:1px solid var(--stroke2);background:#000;max-height:60vh;-webkit-overflow-scrolling:touch}
.canvaswrap canvas{display:block;width:100%;height:auto}
.canvaswrap.zoom canvas{width:220%}
input[type=range]{width:100%;height:36px;accent-color:var(--cyan)}
.strl{font-family:var(--f-mono);font-size:17px;line-height:1.5;background:#03050c;border:1px solid var(--stroke2);border-radius:12px;padding:10px 12px;max-height:55vh;overflow:auto;word-break:break-all}
.strl div{display:flex;gap:10px;padding:1px 0}
.strl div span{color:var(--dim);flex:none;min-width:54px}
.strl .mk{color:var(--amber);font-weight:700}
.bar{display:flex;gap:8px;margin-bottom:10px}
.bar .in{min-height:46px}
.bar .btn{width:auto;min-height:46px;padding:0 16px;font-size:20px}
.frame{width:100%;height:58vh;border:1px solid var(--stroke2);border-radius:14px;background:#fff}
.src{font-family:var(--f-mono);font-size:17px;line-height:1.5;background:#03050c;color:#9de6ff;padding:12px;border-radius:12px;border:1px solid var(--stroke2);max-height:58vh;overflow:auto;white-space:pre-wrap;word-break:break-all}
.res{font-family:var(--f-mono);padding:12px 14px;border-radius:12px;background:#03050c;border:1px solid var(--stroke2);margin-top:10px;word-break:break-all;font-size:20px}
.res.ok{border-color:var(--green);color:var(--green)}
.hh{font-family:var(--f-display);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:20px 0 4px}

/* ---------- отряд / карта ---------- */
.hero{display:flex;align-items:center;gap:16px;padding:18px;margin:16px 0}
.hero .g{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--team) 16%,transparent);border:1px solid var(--team)}
.hero h2{margin:0;font-family:var(--f-display);font-size:28px;line-height:1.1}
.hero small{color:var(--muted)}
.big-sc{font-family:var(--f-display);font-weight:900;font-size:60px;color:var(--team);line-height:1;text-shadow:0 0 28px color-mix(in srgb,var(--team) 55%,transparent)}
.row2{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--stroke);font-size:21px}
.row2 b{font-family:var(--f-display);color:var(--green)}
.mapc{padding:8px;margin:14px 0}
.mapc svg{width:100%;height:auto}
.podm{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.podm div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke)}
.podm div b{margin-left:auto;font-family:var(--f-display)}
#toast{position:fixed;left:50%;bottom:calc(92px + var(--sab));transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:520px}
#toast div{padding:12px 18px;border-radius:14px;background:rgba(14,20,40,.96);border:1px solid var(--stroke2);font-size:20px;animation:tst 3.2s var(--ease) both;text-align:center}
@keyframes tst{0%{opacity:0;transform:translateY(14px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}