#game-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:32px; }
#game-toolbar button, .menu-confirm, .start-choice { border:1px solid #1e655f; background:#07191a; color:#bafff4; font:600 12px Arial,sans-serif; padding:7px 12px; cursor:pointer; }
#sound { position:relative; display:flex; top:auto; right:auto; z-index:3; }
#game-toolbar #sound-toggle { width:32px; height:32px; padding:0; border-radius:0; }
#volume-menu { top:100%; right:0; }
#game h1 { max-width:100%; font-size:clamp(24px,6vmin,38px); line-height:1.15; text-align:center; }
#game.start-mode, #game.menu-mode { width:min(92vw,560px) !important; height:calc(100dvh - 24px); padding:0; grid-template-rows:auto auto minmax(0,1fr); gap:8px; }
.start-mode #hud, .start-mode #board, .start-mode #feature-nav, .start-mode #save-status, .start-mode #controls,
.menu-mode #hud, .menu-mode #board, .menu-mode #feature-nav, .menu-mode #save-status, .menu-mode #controls, .menu-mode #start-menu { display:none; }
.start-mode:not(.menu-mode):not(.replay-mode) #menu-home { visibility:hidden; }
#game.start-mode.replay-mode { height:auto; grid-template-rows:none; }
.replay-mode #start-menu { display:none; }
.replay-mode #hud { display:flex; }
#start-menu { min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px; color:#bafff4; font:13px/1.5 Arial,sans-serif; }
#start-menu[hidden] { display:none; }
.start-choices { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:0; width:min(66vw,240px); aspect-ratio:1; align-self:center; flex-shrink:0; }
.start-choice { position:relative; display:flex; align-items:flex-end; justify-content:center; min-width:0; font-size:12px; padding:6px 3px; text-align:center; background:#010506; }
.start-choice span { position:relative; z-index:1; }
.start-choice.selected { border-color:#50ffe1; background:#0b2e2c; color:#50ffe1; }
.menu-cube { display:block; position:absolute; width:32px; height:32px; transform:translate(-50%,-70%); pointer-events:none; transition:left .12s ease-out,top .12s ease-out; }
.menu-cube.at-center { transform:translate(-50%,-50%); }
.menu-cube .cube { position:absolute; inset:0; width:100%; height:100%; }
.menu-confirm { min-height:40px; min-width:112px; align-self:center; border-radius:4px; box-shadow:0 3px 0 #164143; letter-spacing:.08em; }
.menu-confirm::after { content:''; display:block; width:44px; height:4px; margin:3px auto 0; border:1px solid currentColor; border-top:0; }
.menu-confirm:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #164143; }
#feature-panel[open] { position:static; width:100%; height:100%; max-height:none; min-height:0; margin:0; padding:14px; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; overflow:hidden; }
#feature-panel .panel-content { min-height:0; overflow:auto; overscroll-behavior:contain; }
#feature-panel .panel-header h2 { font-size:20px; }
#feature-panel .panel-message { margin:6px 0; }
#feature-panel.history-view .panel-content { display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; overflow:hidden; gap:8px; }
.history-view .personal-records { padding:0 0 8px; font-size:12px; }
.history-view .panel-actions { margin:0; gap:6px; }
.history-view .panel-actions select { min-width:0; flex:1; padding:7px; font-size:11px; }
.history-view .run-list { display:block; overflow:auto; min-height:0; }
.run-card { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; padding:12px 8px; text-align:left; border:0; border-bottom:1px solid #164143; background:transparent; color:#bafff4; cursor:pointer; }
.run-card:hover, .run-card:focus-visible { background:#07191a; }
.run-card strong { font-size:17px; color:#50ffe1; }
.run-card .run-meta { display:grid; gap:3px; text-align:right; font:11px/1.4 Arial,sans-serif; }
.run-detail { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.run-detail dt { color:#9abcb9; font-size:11px; }
.run-detail dd { margin:3px 0 0; }
@media(max-height:520px) {
  #start-menu { gap:6px; }
  .start-choice { font-size:12px; }
  .menu-cube { width:23px; height:23px; }
  .menu-confirm { min-height:32px; }
}
@media(max-height:420px) {
  .start-choices { width:180px; max-width:100%; height:150px; }
  .menu-cube { transform:translate(-50%,-85%); }
  #start-menu { gap:4px; }
  .start-choice { padding:3px; font-size:11px; }
  #game h1 { font-size:24px; margin:0; }
}
@media(prefers-reduced-motion:reduce) { .menu-cube { transition:none; } }
@media (min-width:520px) and (max-height:380px) {
  #game.replay-mode { gap:2px; }
  #feature-panel.result-view .panel-content { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
  .result-view .result-summary .panel-message { margin:3px 0; font-size:11px; }
  .result-view .result-summary .result-score { font-size:24px; }
  .result-view .panel-actions { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:4px; margin:0; }
  .result-view .feature-button { padding:6px; font-size:11px; }
}

.run-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:6px; align-items:center; }
.run-favorite { min-width:44px; min-height:44px; padding:4px; font-size:22px; }
