/* КиберСмена — общий стиль (порт StyleBlock концепта + мини-utility) */
:root{
  --bg:#070a12; --panel:#0c111f; --panel2:#111729; --line:#1d2743;
  --ink:#e9effb; --dim:#7d8aad; --amber:#ffb347; --danger:#ff4d6d; --ok:#2ee6a8;
  --tc:#54d6ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(900px 460px at 50% -12%, rgba(84,214,255,.07), transparent 60%),
    radial-gradient(rgba(125,138,173,.10) 1px, transparent 1px),
    var(--bg);
  background-size:auto, 26px 26px, auto;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.disp{letter-spacing:.01em}

.tc1{--tc:#54d6ff}.tc2{--tc:#c48bff}.tc3{--tc:#2ee6a8}.tc4{--tc:#ff9e64}
.teamink{color:var(--tc)}

.panel{background:var(--panel);border:1px solid var(--line);position:relative;box-shadow:0 10px 26px rgba(0,0,0,.30)}
.panel::before{content:'';position:absolute;top:-1px;left:-1px;width:26px;height:2px;background:var(--amber)}
.panel2{background:var(--panel2);border:1px solid var(--line)}

.flagchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line);background:#090d18;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.flagbad{border-color:#5a2740;background:#241019;color:#ffb3c2}

.opt{position:relative;border:1px solid var(--line);border-left:2px solid #2a3760;background:var(--panel2);
  padding:12px 14px;text-align:left;width:100%;transition:transform .08s ease,border-color .15s;display:block}
.opt:active{transform:scale(.99)}
.optsel{border-color:var(--amber);border-left-color:var(--amber);background:#161206}
.optdis{opacity:.4;pointer-events:none}
.check{width:20px;height:20px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;flex:none;background:#090d18;color:var(--amber)}

.btn{position:relative;border:1px solid var(--line);background:var(--panel2);padding:12px 16px;
  font-weight:700;font-size:13.5px;letter-spacing:.03em;color:var(--ink);width:100%;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.btnacc{background:var(--amber);border-color:var(--amber);color:#221503}
.btndanger{background:#2a1017;border-color:#5a2740;color:#ffb3c2}
.btn:disabled{opacity:.45;pointer-events:none}
.btnsm{padding:8px 12px;font-size:12px;width:auto}

.cost{font-family:ui-monospace,Menlo,monospace;color:var(--amber);font-size:11.5px;border:1px solid #46381d;background:#171004;padding:2px 8px;flex:none}
.hint{border:1px solid var(--line);border-left:2px solid var(--amber);background:#12100a;padding:10px 12px}
.truth{border-left:2px solid var(--amber);padding:9px 12px;background:#12100a}

.timer{height:4px;background:#0a0f1c;border:1px solid var(--line);overflow:hidden}
.timer>i{display:block;height:100%;background:var(--amber);transition:width .4s linear}

.hpwrap{background:#0a0f1c;border:1px solid var(--line);overflow:hidden;position:relative}
.hpwrap::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line) calc(25% - 1px) 25%)}
.hpbar{height:100%;background:var(--tc);transition:width .8s ease;position:relative;z-index:1}

.eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:10.5px;color:var(--dim);
  font-family:ui-monospace,Menlo,monospace;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:14px;height:1px;background:var(--amber);flex:none}

.splash{position:fixed;inset:0;z-index:60;cursor:pointer;overflow:hidden;
  background:radial-gradient(700px 420px at 50% 35%, rgba(84,214,255,.06), transparent 70%), rgba(5,7,13,.96);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadein .25s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.stamp{animation:stampin .4s cubic-bezier(.2,1.2,.3,1) both}
@keyframes stampin{from{transform:scale(1.04);opacity:0}to{transform:scale(1);opacity:1}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.shake{animation:shakex .45s ease both}
@keyframes shakex{10%,50%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(4px)}}
.hitcard{border-color:#5a2740}.hitcard::before{background:var(--danger)}
.okcard{border-color:#1e4a3c}.okcard::before{background:var(--ok)}

.sheet{position:fixed;inset:0;z-index:55;background:rgba(4,6,12,.72);display:flex;align-items:flex-end;justify-content:center;animation:fadein .2s ease both}
.sheetin{width:100%;max-width:28rem;background:var(--panel);border:1px solid var(--line);border-bottom:none;
  padding:16px 16px 20px;max-height:82vh;overflow:auto}
.st{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.04em;padding:2px 7px;border:1px solid;text-transform:uppercase;flex:none}
.st-ok{color:var(--ok);border-color:rgba(46,230,168,.4)}
.st-warn{color:var(--amber);border-color:rgba(255,179,71,.45)}
.st-bad{color:var(--danger);border-color:rgba(255,77,109,.5)}
input.ks{background:#090d18;border:1px solid var(--line);padding:12px 14px;color:var(--ink);width:100%;font-family:ui-monospace,Menlo,monospace;font-size:16px}
input.ks:focus{outline:none;border-color:#54d6ff}
input.codeinput{font-size:30px;letter-spacing:.45em;text-align:center;text-transform:uppercase}
.iconbtn{border:1px solid var(--line);background:var(--panel2);padding:5px 10px;color:var(--dim);display:inline-flex;align-items:center}

.pauseband{position:fixed;top:0;left:0;right:0;z-index:70;background:#2a1017;border-bottom:1px solid #5a2740;
  color:#ffb3c2;text-align:center;padding:8px;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* utilities */
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.flex-1{flex:1;min-width:0}.flex-none{flex:none}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}
.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-4{padding-top:16px;padding-bottom:16px}.py-6{padding-top:24px;padding-bottom:24px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-auto{margin-top:auto}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mx-auto{margin-left:auto;margin-right:auto}
.text-center{text-align:center}.text-right{text-align:right}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-base{font-size:15.5px}.text-lg{font-size:18px}
.text-xl{font-size:21px}.text-2xl{font-size:25px}.text-3xl{font-size:30px}.text-5xl{font-size:46px}
.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.w-full{width:100%}.max-w-md{max-width:28rem}.min-h-screen{min-height:100vh}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dim{color:var(--dim)}.amber{color:var(--amber)}.danger{color:var(--danger)}.ok{color:var(--ok)}
.leading-relaxed{line-height:1.6}