/* Пульт выбора бойца: телефон (портрет), планшет, ПК. Стиль — как на экране игры */
:root{--pc:#00C7B1;--pcd:#006B5F;--pch:#2FD6C3;--bg:#161616;--px:'Press Start 2P',monospace;--tx:Inter,system-ui,sans-serif}
.p2{--pc:#BDEE00;--pcd:#7E9E00;--pch:#D2FF2E}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--px);-webkit-font-smoothing:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#root{height:100%}
.app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);color:#fff;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* шапка */
.top{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:11px;line-height:1;flex:none}
.chip{background:var(--pc);color:#161616;padding:9px 10px;white-space:nowrap}
.top .ttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .cnt{color:#9A9A9A;white-space:nowrap}
.top .logo{height:22px;width:auto;display:block}
.dot{width:8px;height:8px;background:#3A3A3A;flex:none}
.dot.on{background:var(--pc)}
.dot.off{background:#B40091;animation:px-blink 1s steps(1) infinite}

/* полосы как на экране ожидания */
.stripes{flex:none;height:84px;position:relative}
.stripes div{position:absolute;left:0;right:0}

/* выбор */
.sel{flex:1;min-height:0;display:flex;flex-direction:column}
.stage{position:relative;flex:1 1 auto;min-height:180px;display:flex;align-items:flex-end;justify-content:center;touch-action:pan-y}
.fig{position:relative;height:100%;max-height:440px;aspect-ratio:540/584;max-width:86vw}
.fig .shadow{position:absolute;left:50%;bottom:0;width:61%;height:5%;background:#000;opacity:.6;clip-path:polygon(15% 0,85% 0,100% 40%,100% 60%,85% 100%,15% 100%,0 60%,0 40%);transform:translateX(-50%);animation:px-shadow-idle .8s steps(2) infinite}
.fig .body{position:absolute;left:0;top:0;width:100%;height:96%;animation:px-idle .8s steps(2) infinite}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;background:#161616;border:4px solid #fff;color:#fff;font-size:20px;cursor:pointer;box-shadow:5px 5px 0 #000;display:grid;place-items:center;padding:0;z-index:2}
.arrow:active{transform:translateY(-50%) translate(3px,3px);box-shadow:2px 2px 0 #000}
.arrow.l{left:12px}.arrow.r{right:12px}
@media (hover:hover){.arrow:hover{background:#2A2A2A}}
.info{flex:none;padding:6px 16px 0;display:flex;flex-direction:column;gap:12px}
.name{font-size:18px;line-height:1.35;text-shadow:4px 4px 0 #000}
.tag{font:500 16px/1.4 var(--tx);color:#CFCFCF}
.hp{display:flex;flex-direction:column;gap:8px}
.hp .row{display:flex;justify-content:space-between;font-size:10px;color:#9A9A9A}
.hp .row b{color:#fff;font-weight:400}
.hpbar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;height:18px;padding:4px;border:3px solid #fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:10px;line-height:1.7;align-items:baseline}
.kv .k{color:#9A9A9A}
.kv .skill{color:#00C7B1}
.kv .line{font:500 15px/1.45 var(--tx)}
.thumbs{flex:none;display:flex;gap:10px;overflow-x:auto;padding:14px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.thumbs::-webkit-scrollbar{display:none}
.th{position:relative;flex:none;width:64px;height:64px;border:3px solid #3A3A3A;background:#1C1C1C;cursor:pointer;scroll-snap-align:center;padding:0}
.th.cur{border-color:var(--pc)}
.th.taken{opacity:.45}
.th .tk{position:absolute;inset:0;display:grid;place-items:center;background:rgba(22,22,22,.75);font-size:7px;color:#BDEE00}
.cta{flex:none;padding:10px 16px calc(16px + env(safe-area-inset-bottom))}
.btn{display:block;width:100%;background:var(--pc);color:#161616;border:0;padding:22px 20px;font-size:18px;cursor:pointer;box-shadow:0 8px 0 var(--pcd);margin-bottom:8px;font-family:var(--px)}
.btn:active{transform:translateY(8px);box-shadow:0 0 0 var(--pcd)}
@media (hover:hover){.btn:hover{background:var(--pch)}}
.btn.ghost{background:#161616;color:#fff;border:4px solid #fff;box-shadow:6px 6px 0 #000;font-size:13px;padding:16px}
.btn.ghost:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #000}
.busy{background:#2A2A2A;color:#9A9A9A;padding:22px 20px;font-size:16px;border:4px dashed #555;text-align:center;margin-bottom:8px}

/* экраны ожидания и статуса */
.screen{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;text-align:center;overflow:auto}
.kick{font-size:12px;color:#00C7B1}
.big{font-size:30px;line-height:1.2;text-shadow:6px 6px 0 #000}
.mid{font-size:16px;line-height:1.5}
.blink{animation:px-blink 1s steps(1) infinite}
.muted{font:500 15px/1.5 var(--tx);color:#CFCFCF;max-width:420px}
.lime{color:#BDEE00}
.mini{position:relative;width:min(56vw,260px);aspect-ratio:440/484}
.mini .body{position:absolute;left:0;top:0;width:100%;height:95%;animation:px-idle .8s steps(2) infinite}
.mini .shadow{position:absolute;left:50%;bottom:0;width:64%;height:5%;background:#000;opacity:.6;clip-path:polygon(15% 0,85% 0,100% 40%,100% 60%,85% 100%,15% 100%,0 60%,0 40%);transform:translateX(-50%);animation:px-shadow-idle .8s steps(2) infinite}
.mini.jump .body{animation:px-winjump .7s steps(4) infinite}
.stamp{position:absolute;right:-8%;top:6%;transform:rotate(14deg);border:5px solid #BDEE00;color:#BDEE00;font-size:16px;padding:8px 10px;background:#161616;box-shadow:5px 5px 0 #000;line-height:1}
.qm{width:min(40vw,190px);aspect-ratio:420/520;border:5px dashed #3A3A3A;display:grid;place-items:center;font-size:72px;color:#3A3A3A}
.duo{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.duo .side{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:0}
.duo .mini{width:min(36vw,220px)}
.duo .vs{font-size:22px;color:#3A3A3A}
.duo .nm{font-size:9px;line-height:1.5;color:#CFCFCF}
.you{font-size:8px;padding:6px 7px;background:var(--pc);color:#161616;line-height:1}
.prize{border:4px solid var(--pc);padding:16px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 #000;max-width:440px;width:100%}
.prize .l{font-size:10px;color:#9A9A9A}
.prize .v{font-size:20px;line-height:1.4}
.row-heroes{display:flex;gap:6px;justify-content:center;align-items:flex-end;width:100%;max-width:640px}
.row-heroes .h{flex:1;aspect-ratio:176/200;position:relative;max-width:80px}
.row-heroes .h>div{position:absolute;inset:0;animation:px-idle .8s steps(2) infinite}
.keybox{display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px}
.keybox input{font:500 20px var(--tx);padding:16px;background:#1F1F1F;border:4px solid #fff;color:#fff;text-align:center;outline:none;border-radius:0}
.keybox input:focus{border-color:var(--pc)}
.err{font:500 14px var(--tx);color:#ff8a9a}

/* планшет/ПК в альбомной ориентации: две колонки как на экране выбора стенда */
@media (min-width:820px) and (orientation:landscape), (min-width:1100px){
  .top{padding:22px 32px;font-size:14px;gap:16px}
  .top .logo{height:30px}
  .chip{padding:11px 12px}
  .sel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;column-gap:32px;padding:0 32px}
  .stage{grid-column:1;grid-row:1/3;min-height:0}
  .fig{max-height:none;max-width:100%}
  .arrow{width:72px;height:72px;font-size:28px;border-width:5px}
  .arrow.l{left:0}.arrow.r{right:0}
  .info{grid-column:2;grid-row:1;align-self:center;gap:22px;padding:0}
  .name{font-size:28px}
  .tag{font-size:21px}
  .hp .row{font-size:13px}
  .hpbar{height:24px;border-width:4px}
  .kv{font-size:13px;gap:16px 20px}
  .kv .line{font-size:19px}
  .cta{grid-column:2;grid-row:2;padding:12px 0 8px}
  .btn{font-size:22px;padding:26px}
  .busy{font-size:20px}
  .thumbs{grid-column:1/3;grid-row:3;justify-content:center;padding:16px 0 24px;gap:14px}
  .th{width:84px;height:84px;border-width:4px}
  .big{font-size:44px}
  .mid{font-size:20px}
  .kick{font-size:16px}
  .muted{font-size:19px;max-width:560px}
  .mini{width:min(30vw,340px)}
  .duo .mini{width:min(24vw,300px)}
  .duo .vs{font-size:40px}
  .duo .nm{font-size:13px}
  .you{font-size:11px}
  .prize .v{font-size:26px}
  .prize .l{font-size:12px}
}
/* низкие экраны телефона в альбомной */
@media (max-height:520px) and (orientation:landscape){
  .sel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr) auto;column-gap:16px;padding:0 12px}
  .stage{grid-column:1;grid-row:1/3;min-height:0}
  .info{grid-column:2;grid-row:1;overflow:auto;gap:8px;padding:0}
  .tag{font-size:13px}.name{font-size:14px}
  .cta{grid-column:2;grid-row:2;padding:6px 0 10px}
  .btn{padding:14px;font-size:14px}
  .thumbs{display:none}
  .stripes{display:none}
  .big{font-size:22px}
}