/* Phone layout. The page is one fixed screen: no browser-style bars, no scrolling or rubber band.
   iOS browsers (Safari, Brave) have no element fullscreen, so this does not depend on it. */
html.touch-device,html.touch-device body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#000;display:block;-webkit-text-size-adjust:100%}
html.touch-device main{width:100%;height:100%;padding:0}
html.touch-device .browser-bar,html.touch-device .notice,html.touch-device .game-fullscreen-tools{display:none!important}
html.touch-device .game-screen-shell{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:#000}
html.touch-device #game-frame{width:min(100vw,calc(100dvh*4/3));border:0;box-shadow:none}
/* While playing the frame is only the 800x515 field: the HUD picture falls below it and the
   phone HUD shows the same facts in readable size. */
html.touch-device .game-screen-shell:has(#menu[hidden]) #game-frame:not(.dialog-open){aspect-ratio:800/515;width:min(100vw,calc(100dvh*800/515))}
html.touch-device #game{position:absolute;left:0;top:0;width:100%;height:100%}
html.touch-device .game-screen-shell:has(#menu[hidden]) #game-frame:not(.dialog-open) #game{height:116.505%}
@media (orientation:portrait){
 html.touch-device .game-screen-shell:has(#menu[hidden]){place-items:start center;padding-top:calc(env(safe-area-inset-top) + 46px)}
}
html.touch-device #message{top:50px;font-size:13px}
@media (orientation:portrait){html.touch-device #message{top:8px}}

/* Game HUD */
.phone-hud{position:absolute;left:0;right:0;top:0;height:calc(env(safe-area-inset-top) + 44px);padding:env(safe-area-inset-top) calc(var(--edge-r) + 2px) 0 calc(var(--edge-x) + 54px);display:flex;align-items:center;justify-content:space-between;gap:6px;pointer-events:none;color:#fff;font:600 13px/1 -apple-system,system-ui,Tahoma,sans-serif;text-shadow:0 1px 2px #000}
.phone-hud-side{display:flex;gap:6px;min-width:0;flex:1 1 0}.phone-hud-side:last-child{justify-content:flex-end}
.phone-chip{display:flex;align-items:center;gap:5px;min-width:0;height:28px;padding:0 8px;border-radius:14px;background:#000a}
.phone-chip.me{background:#000d;box-shadow:inset 0 0 0 1px #fff7}
.phone-chip i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px #0008}
.phone-chip span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:82px}
.phone-chip b{font-size:15px;font-variant-numeric:tabular-nums}
.phone-time{flex:none;min-width:52px;height:28px;display:grid;place-items:center;border-radius:14px;background:#000a;font-size:15px;font-variant-numeric:tabular-nums}
@media (orientation:portrait){.phone-chip:not(.me) span{display:none}.phone-chip span{max-width:56px}}
.phone-rotate{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 56px + 64.4vw);margin:0;text-align:center;color:#8d8d8d;font:13px -apple-system,system-ui,Tahoma,sans-serif;pointer-events:none}
@media (orientation:landscape){.phone-rotate{display:none}}

/* Controls */
.touch-controls{--stick:clamp(116px,32vmin,148px);--fire:clamp(92px,25vmin,116px)}
.touch-stick{opacity:.4}
.touch-fire{width:var(--fire);height:var(--fire);opacity:.5}
.touch-pause{top:calc(env(safe-area-inset-top) + 2px);left:var(--edge-x);width:40px!important;height:40px!important}
.touch-controls button.touch-weapon{right:var(--edge-r);bottom:calc(var(--edge-b) + var(--fire) + 16px);width:var(--fire);height:50px;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:3px;color:#fff;font:600 12px/1 -apple-system,system-ui,Tahoma,sans-serif;text-shadow:0 1px 2px #000}
.touch-weapon b{font-size:14px;font-variant-numeric:tabular-nums}
.touch-fire{right:var(--edge-r);bottom:var(--edge-b)}

/* Menu */
.phone-menu,.phone-sheet{position:absolute;inset:0;z-index:70;color:#eee;font:16px -apple-system,system-ui,Tahoma,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.phone-menu[hidden],.phone-sheet[hidden],.phone-back[hidden],.phone-tip[hidden]{display:none}
.phone-menu{display:grid;grid-template:auto 1fr auto/1fr;gap:14px;padding:calc(env(safe-area-inset-top) + 14px) max(16px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 14px) max(16px,env(safe-area-inset-left));background:linear-gradient(#000c,#000e),#111 url(assets/menu.jpg) center/cover no-repeat}
.phone-title h1{margin:0;font-size:32px;font-weight:700;letter-spacing:8px;text-align:center;text-shadow:0 0 14px #fff6}
.phone-levels{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
.phone-level{position:relative;display:block;padding:0;aspect-ratio:4/3;overflow:hidden;border-radius:10px;border:2px solid #fff3;background:#222;color:#fff}
.phone-level img{display:block;width:100%;height:100%;object-fit:cover;opacity:.75}
.phone-level span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 7px;font-size:14px;font-weight:600;text-align:left;background:linear-gradient(#0000,#000d)}
.phone-level[aria-selected="true"]{border-color:#ffd976;box-shadow:0 0 0 1px #ffd976}.phone-level[aria-selected="true"] img{opacity:1}
.phone-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.phone-who{display:flex;flex-direction:column;gap:8px}
.phone-name{width:100%;height:44px;padding:0 12px;border:1px solid #fff4;border-radius:10px;background:#0009;color:#fff;font:16px -apple-system,system-ui,Tahoma,sans-serif;-webkit-user-select:text;user-select:text}
.phone-colors{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:3px}
.phone-swatch{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:2px solid #0006}.phone-swatch[aria-pressed="true"]{outline:3px solid #fff;outline-offset:1px}
.phone-play,.phone-primary{min-height:52px;border:0;border-radius:12px;background:linear-gradient(#ffd976,#d99a2e);color:#201400;font:700 18px -apple-system,system-ui,Tahoma,sans-serif}.phone-play:disabled{opacity:.5}
.phone-foes{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;gap:6px;font-size:14px}.phone-foes span{padding-right:4px;color:#bbb}
.phone-foes button{min-height:38px;padding:0 4px;border:1px solid #fff3;border-radius:10px;background:#0009;color:#eee;font:14px -apple-system,system-ui,Tahoma,sans-serif}.phone-foes button[aria-pressed="true"]{border-color:#ffd976;color:#ffd976}
.phone-tools{position:static;left:auto;top:auto;width:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.phone-tools button,.phone-back{min-height:44px;padding:0 6px;border:1px solid #fff3;border-radius:10px;background:#0009;color:#eee;font:14px -apple-system,system-ui,Tahoma,sans-serif}
.phone-tip{margin:0;text-align:center;font-size:12px;color:#9a9a9a}
.phone-back{position:absolute;z-index:71;left:max(10px,env(safe-area-inset-left));top:calc(env(safe-area-inset-top) + 8px);padding:0 14px;background:#000c}
@media (orientation:landscape){
 .phone-menu{grid-template:auto 1fr/minmax(0,1fr) min(300px,38vw);gap:8px 16px}
 .phone-title{grid-column:1/3}.phone-title h1{font-size:22px}
 .phone-levels{grid-template-columns:repeat(3,1fr)}
 .phone-side{justify-content:center;gap:8px}
 .phone-tip{display:none}
 .phone-colors{flex-wrap:nowrap;gap:4px}.phone-swatch{flex:1 1 0;min-width:0;width:auto;height:auto;aspect-ratio:1}
}

/* Sheets: pause, sound, result */
.phone-sheet{display:grid;place-items:center;padding:16px;background:#000b}
.phone-sheet-box{display:flex;flex-direction:column;gap:12px;width:min(340px,100%);max-height:100%;overflow-y:auto;padding:18px;border-radius:16px;border:1px solid #fff3;background:#1c1c1e}
.phone-sheet-box h2{margin:0;font-size:20px;text-align:center}
.phone-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;margin:0;font-size:16px;color:#eee}
.phone-row input[type=range]{flex:1;min-width:0;height:32px;accent-color:#ffd976}.phone-row input[type=checkbox]{width:26px;height:26px;accent-color:#ffd976}
.phone-danger{min-height:48px;border:1px solid #e2483d88;border-radius:12px;background:#0000;color:#ff8d84;font:600 16px -apple-system,system-ui,Tahoma,sans-serif}
.phone-score{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:place}
.phone-score li{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;border-radius:10px;background:#fff1}
.phone-score i{flex:none;width:14px;height:14px;border-radius:50%}.phone-score span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-score b{font-size:18px;font-variant-numeric:tabular-nums}