:root{
  --bg:#0b1d3a; --panel:#13294f; --gold:#f2c21b; --orange:#f39a1e; --text:#f3ead0; --red:#ff5a4e;
  --vh: var(--tg-viewport-stable-height, 100vh);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;
  font-family:"Courier New",ui-monospace,monospace;font-weight:700;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit}
.hidden{display:none!important}

#app{height:var(--vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#stage{position:relative;width:min(100vw, calc((var(--vh) - 190px) * 16 / 9));aspect-ratio:16/9;
  background:#000;box-shadow:0 0 0 3px #000, 0 0 0 5px var(--gold);overflow:hidden}
#cv{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;
  padding:4px 6px;font-size:clamp(10px,2.6vw,15px);text-shadow:2px 2px 0 #000}
.hud-l,.hud-r{display:flex;flex-direction:column;gap:2px}
.hud-r{align-items:flex-end;margin-right:34px}
.hud-c{text-align:center;flex:1;padding:0 6px}
#hud-lives{color:var(--gold)} #hud-hp{color:var(--red);letter-spacing:1px}
#hud-weapon{color:var(--orange)}
#hud-level{font-size:.85em;opacity:.85}
#hud-boss{margin:3px auto 0;width:min(60%,220px);height:7px;border:2px solid #000;background:#400;box-shadow:0 0 0 1px #fff}
#hud-boss i{display:block;height:100%;background:linear-gradient(#ff8a5a,#d31);width:100%}
#btn-pause{position:absolute;top:4px;right:4px;width:28px;height:24px;pointer-events:auto;border:2px solid #000;
  background:rgba(0,0,0,.45);font-size:12px;cursor:pointer}

/* Экраны */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:8px;text-align:center;background:linear-gradient(#0b1d3acc,#06122ae6);overflow:auto}
.screen.dim{background:rgba(3,10,25,.82)}
#scr-title{background:linear-gradient(180deg,#123a7a 0%,#0b1d3a 55%,#08304f 100%)}
h2{margin:0 0 4px;color:var(--gold);font-size:clamp(14px,4vw,24px);letter-spacing:.08em;text-shadow:3px 3px 0 #000}
h2.red{color:var(--red)}
.logo{line-height:1}
.logo-top{font-size:clamp(8px,2.2vw,13px);color:var(--orange);letter-spacing:.2em}
.logo-main{font-size:clamp(28px,9vw,56px);color:var(--gold);letter-spacing:.06em;
  text-shadow:3px 3px 0 #c0391b,6px 6px 0 #000;font-style:italic}
.logo-sub{font-size:clamp(9px,2.4vw,14px);letter-spacing:.35em;color:#8fd3ff}
#cv-hero{width:clamp(150px,45vw,230px);image-rendering:pixelated}
.who{font-size:clamp(9px,2.3vw,13px);color:#8fd3ff;min-height:1em}
.menu{display:flex;flex-direction:column;gap:5px;align-items:center}
.menu.row{flex-direction:row}
.btn{min-width:140px;padding:5px 12px;background:var(--panel);border:2px solid var(--gold);box-shadow:3px 3px 0 #000;
  font-size:clamp(10px,2.6vw,15px);cursor:pointer;letter-spacing:.05em}
.btn.big{background:#c0391b;border-color:#ffd37a;font-size:clamp(12px,3.2vw,18px)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn:disabled{opacity:.4}
.hint{font-size:clamp(8px,2.1vw,12px);opacity:.75;max-width:90%}
.list{display:flex;flex-direction:column;gap:5px;width:min(92%,460px);overflow:auto;max-height:70%}
.item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--panel);border:2px solid #2b4a80;text-align:left;
  font-size:clamp(9px,2.4vw,13px)}
.item.lvl{cursor:pointer;border-color:var(--gold)}
.item.lvl.locked{border-color:#2b4a80;opacity:.5;cursor:default}
.item .n{color:var(--gold);min-width:2.2em}
.item .grow{flex:1}
.item small{display:block;opacity:.7;font-weight:400}
.item img{width:72px;height:72px;image-rendering:pixelated;background:#fff;cursor:pointer}

.stage-no{color:var(--orange);font-size:clamp(12px,3.4vw,20px);letter-spacing:.3em}
.stage-name{color:var(--gold);font-size:clamp(22px,7vw,44px);text-shadow:3px 3px 0 #000}
.stage-desc{font-size:clamp(9px,2.4vw,14px);max-width:80%;opacity:.85}

.award-top{font-size:clamp(9px,2.3vw,13px);color:#8fd3ff;letter-spacing:.12em}
.stars{color:var(--gold);font-size:clamp(16px,4.5vw,26px);letter-spacing:4px}
.award-rank{color:var(--gold);font-size:clamp(14px,4.4vw,26px);text-shadow:2px 2px 0 #000}
.qr img{width:clamp(80px,28vh,150px);height:auto;image-rendering:pixelated;border:4px solid #fff;display:block}

/* Пульт */
#pad{width:min(100vw,640px);flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 10px;
  touch-action:none}
.pad-l{display:grid;grid-template-columns:repeat(3,min(54px,14vw));grid-template-rows:auto auto;gap:4px;
  grid-template-areas:". u ." "l d r"}
.pad-l .key[data-k="up"]{grid-area:u} .pad-l .key[data-k="left"]{grid-area:l}
.pad-l .key[data-k="down"]{grid-area:d} .pad-l .key[data-k="right"]{grid-area:r}
.pad-r{display:flex;gap:10px;align-items:center}
.key{height:min(54px,14vw);border:3px solid #000;background:#2b3d63;box-shadow:inset 0 -5px 0 rgba(0,0,0,.35),0 0 0 2px #5b75a8;
  font-size:20px;color:#dfe8ff;border-radius:10px;touch-action:none}
.key.round{width:min(76px,19vw);height:min(76px,19vw);border-radius:50%;font-size:11px;letter-spacing:.02em}
.key.b{background:#c0391b;box-shadow:inset 0 -6px 0 rgba(0,0,0,.35),0 0 0 2px #ff9a7a}
.key.a{background:#d89a12;box-shadow:inset 0 -6px 0 rgba(0,0,0,.35),0 0 0 2px #ffe08a;transform:translateY(-22px)}
.key.on{filter:brightness(1.5);box-shadow:inset 0 3px 0 rgba(0,0,0,.4)}

/* Альбомная ориентация: игра на всю высоту, пульт полупрозрачный поверх картинки */
@media (orientation:landscape) and (max-height:600px){
  #app{gap:0;padding:0}
  #stage{width:min(100vw, calc(var(--vh) * 16 / 9));box-shadow:none}
  #hud{padding:calc(4px + var(--tg-content-safe-area-inset-top, 0px)) calc(8px + var(--tg-safe-area-inset-right, 0px)) 0 calc(8px + var(--tg-safe-area-inset-left, 0px))}
  #btn-pause{top:calc(4px + var(--tg-content-safe-area-inset-top, 0px));right:calc(4px + var(--tg-safe-area-inset-right, 0px))}
  #pad{position:fixed;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));width:100%;max-width:none;align-items:flex-end;
    padding:0 calc(14px + max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px))) 0 calc(14px + max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px)));
    pointer-events:none}
  #pad .key{pointer-events:auto;opacity:.5;background-color:rgba(43,61,99,.55)}
  #pad .key.b{background-color:rgba(192,57,27,.6)} #pad .key.a{background-color:rgba(216,154,18,.6)}
  #pad .key.on{opacity:.85}
  .pad-l{grid-template-columns:repeat(3,min(50px,13vh));gap:3px}
  .key{height:min(50px,13vh);font-size:16px}
  .key.round{width:min(66px,18vh);height:min(66px,18vh)}
  .key.a{transform:translateY(-16px)}

  /* меню ужимаем под низкий экран */
  .screen{gap:3px;padding:calc(4px + var(--tg-content-safe-area-inset-top, 0px)) 8px 4px}
  #scr-title{flex-direction:row;flex-wrap:wrap;align-content:center;column-gap:24px}
  #scr-title .logo{flex-basis:100%}
  .logo-main{font-size:13vh}
  #cv-hero{width:auto;height:30vh}
  .btn{padding:3px 12px;font-size:min(15px,4vh)}
  .btn.big{font-size:min(18px,4.8vh)}
  .menu{gap:4px}
  #scr-title .hint{flex-basis:100%}
  .qr img{width:min(150px,34vh)}
  .list{max-height:62vh}
  .item img{width:56px;height:56px}
}
#rotate-tip{display:none}
@media (orientation:portrait){
  #rotate-tip{display:block;font-size:clamp(8px,2.1vw,12px);color:#8fd3ff;opacity:.8}
}