*{box-sizing:border-box}html,body{height:100%}html,body{overflow:hidden}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:#e9eef3;background:#0e1116}h1,h2,h3{margin:0 0 .5rem}.app{max-width:400px;margin:0 auto;padding:16px;height:100vh;display:flex;flex-direction:column;gap:16px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.topbar h1{font-size:20px;letter-spacing:.06em}
.meta{display:flex;gap:16px;color:#a7b4c2}
.stage-wrap{position:relative;display:block;flex:1;min-height:0}
#game{background:#0b0f14;border:1px solid #2a3441;border-radius:8px;image-rendering:pixelated;outline:none;touch-action:none;user-select:none}
.tray canvas,#tray{touch-action:none;-webkit-user-select:none;user-select:none}
.topbar .spacer{flex:1}
.topbar .help-btn{margin-left:auto}
.help-btn{appearance:none;border:1px solid #334155;background:#121822;color:#e9eef3;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}
.help-btn:active{transform:translateY(1px)}
.reference{display:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.overlay .panel{background:rgba(13,17,23,.9);backdrop-filter:saturate(140%) blur(6px);border:1px solid #2a3441;border-radius:12px;padding:20px;max-width:480px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.overlay h2{font-size:18px;margin-bottom:8px}
.overlay p{color:#9fb0c2;margin:0 0 12px}
.buttons{display:flex;gap:8px}
button{appearance:none;border:1px solid #334155;background:#121822;color:#e9eef3;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
button.primary{background:#2563eb;border-color:#2563eb}
button.ghost{background:transparent}
button:active{transform:translateY(1px)}
.hint{margin-top:10px;color:#9fb0c2}
.switch{display:flex;align-items:center;gap:8px}
.help{color:#9fb0c2}
.help ul{margin:6px 0 0 18px}
.help{display:none}
.tray > h3{display:none}

/* Desktop layout - stage-wrap takes 60% of available height */
@media (min-width:861px){
  .app{box-sizing:border-box}
  .stage-wrap{flex:none;height:60%}
  .tray{flex:none;height:auto;min-height:50px}
}

@media (max-width:860px){
  .stage-wrap{display:block}
}