*{box-sizing:border-box;margin:0}
html,body{touch-action:manipulation;-webkit-touch-callout:none;height:100%;background:#05050f;color:#e6faff;font-family:"Courier New",monospace;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
#wrap{position:relative;width:min(100vw,calc(100vh*16/9));width:min(100vw,calc(100dvh*16/9));aspect-ratio:16/9;user-select:none;-webkit-user-select:none}
canvas{width:100%;height:100%;display:block;touch-action:none;background:#0a0a1a;box-shadow:0 0 24px #0ff4}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vmin;background:rgba(5,5,20,.85);text-align:center}
.hidden{display:none!important}
h1,h2{color:#0ff;letter-spacing:.15em;text-shadow:0 0 10px #0ff,0 0 26px #f0f}
h1{font-size:clamp(22px,6vmin,56px)}
h2{font-size:clamp(20px,5vmin,44px)}
p,small{font-size:clamp(11px,2.6vmin,20px)}
small{opacity:.7}
b{color:#ff0}
#newBest{color:#f0f;margin-left:.5em}
button{font:inherit;font-size:clamp(12px,3vmin,22px);color:#0ff;background:transparent;border:2px solid #0ff;padding:.5em 1.6em;cursor:pointer;box-shadow:0 0 10px #0ff8,inset 0 0 10px #0ff3;min-width:9em}
button:hover,button:active{background:#0ff3}
#pauseBtn{position:absolute;top:6px;right:6px;min-width:0;padding:.2em .8em}
#dropBtn{position:absolute;bottom:12px;right:12px;min-width:0;padding:.2em .8em;font-weight:bold;z-index:2}
/* Session 2: screen fades + settings toggles */
@keyframes scrFade{from{opacity:0}to{opacity:1}}
.screen{animation:scrFade .22s ease-out}
#over{animation:scrFade .4s ease-out .3s backwards}
body.rm .screen{animation:none!important}
.toggle{min-width:17em}
.toggle[aria-pressed=false]{color:#99a;border-color:#668;box-shadow:none;opacity:.75}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2vmin 1.6vmin;width:min(92%,680px)}
.settings-grid .toggle{min-width:0;width:100%;padding:.45em .8em;font-size:clamp(10px,2.2vmin,16px)}
@media (max-width:520px){
  .settings-grid{grid-template-columns:1fr;gap:1vmin}
  .settings-grid .toggle{font-size:clamp(10px,2.8vmin,14px);padding:.35em .6em}
}
#settings small{max-width:80%}

/* Session 4: menu grid, shop / achievements / missions pages */
#menu .grid{display:grid;grid-template-columns:1fr 1fr;gap:1vmin 1.4vmin}
#menu .grid button{min-width:7.5em}
.notes{min-height:1.2em;font-size:clamp(10px,2.3vmin,16px);color:#f6f;text-align:center}
.notes div{margin:.2em 0}
.page{justify-content:flex-start;gap:1vmin;padding:2vmin 3vmin;overflow:hidden}
.page header{display:flex;justify-content:space-between;align-items:center;width:min(94%,760px)}
#shop header{width:min(96%,920px)}
.page h2{font-size:clamp(16px,4vmin,32px)}
.coins{font-size:clamp(12px,2.8vmin,20px)}
.page button{min-width:0;padding:.3em .9em;font-size:clamp(11px,2.4vmin,16px)}
.page .list{flex:1;min-height:0;overflow-y:auto;width:min(94%,760px);touch-action:pan-y;-webkit-overflow-scrolling:touch;text-align:left;border:1px solid #0ff3;padding:.6vmin 1vmin;background:rgba(0,0,0,.25)}
.shopbody{display:flex;gap:2vmin;flex:1;min-height:0;width:min(96%,920px)}
.shopbody .list{width:auto;flex:1;overflow-x:hidden}
.previewbox{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.6vmin;flex:none;width:min(30vw,240px)}
.previewbox canvas{width:100%;max-width:240px;height:auto;aspect-ratio:240/130;background:#0a0a1a;border:1px solid #0ff5;box-shadow:0 0 12px rgba(0,255,255,.2)}
.previewbox small{max-width:220px;text-align:center;line-height:1.3;display:block}
.pname{font-size:clamp(10px,2.2vmin,15px);color:#ff0;text-align:center}
.sec{margin:.8vmin 0 .2vmin;color:#f6f;font-size:clamp(11px,2.4vmin,16px);letter-spacing:.12em}
.item{display:flex;align-items:center;gap:1.2vmin;padding:.7vmin .6vmin;border-bottom:1px solid #fff1;font-size:clamp(10px,2.3vmin,16px)}
.item .nm{flex:1;min-width:0}
.item .nm small{display:block;opacity:.75}
.item .st{min-width:8.5em;text-align:right;opacity:.9}
.item.eq{background:rgba(0,255,255,.09)}
#shopList .item{display:grid;grid-template-columns:auto 1fr minmax(5.6em,auto) minmax(5.6em,auto);grid-template-rows:auto auto;align-items:center;column-gap:1.4vmin;row-gap:.2vmin;padding:.8vmin 1vmin}
#shopList .item .sw{grid-column:1;grid-row:1/span 2;align-self:center}
#shopList .item .nm{grid-column:2;grid-row:1;min-width:0;font-weight:bold;color:#fff;line-height:1.25;white-space:normal;overflow-wrap:break-word}
#shopList .item .st{grid-column:2;grid-row:2;min-width:0;text-align:left;font-size:.85em;opacity:.85;line-height:1.25}
#shopList .item button[data-shop=preview]{grid-column:3;grid-row:1/span 2;align-self:center;min-width:5.6em;padding:.35em .5em;white-space:nowrap}
#shopList .item button[data-shop=buy],#shopList .item button[data-shop=equip]{grid-column:4;grid-row:1/span 2;align-self:center;min-width:5.6em;padding:.35em .5em;white-space:nowrap}
#shopList .item button.pv-active{color:#ff0;border-color:#ff0;box-shadow:0 0 12px #ff0a,inset 0 0 8px rgba(255,255,0,.3);background:rgba(255,255,0,.15)}
#shopList .item button.pv-active:hover{background:rgba(255,255,0,.25)}
.sw{display:inline-block;width:2.4vmin;height:2.4vmin;min-width:13px;min-height:13px;border:2px solid;flex:none}
.bar{height:6px;background:rgba(255,255,255,.15);margin-top:4px}
.bar i{display:block;height:100%;background:#0ff}
.msg{min-height:1.3em;font-size:clamp(10px,2.4vmin,16px);color:#ff0;text-align:center}
.modal{position:absolute;inset:0;background:rgba(0,0,10,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;z-index:5}
.modal .row{display:flex;gap:2vmin}
.item button:focus-visible,.page button:focus-visible,.modal button:focus-visible,#menu button:focus-visible{outline:3px solid #ff0;outline-offset:2px}
@media (max-aspect-ratio:1.15/1){
  .shopbody{flex-direction:column;align-items:center}
  .previewbox{width:100%;max-width:240px}
  #shopList{width:100%;max-width:480px}
}