:root { color-scheme: light; --cream: #f5f5f1; --ink: #191b23; --green: #1b27b0; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #e6e7ea; color: var(--ink); font-family: system-ui, sans-serif; }
[hidden] { display: none !important; }
#game { width: 100%; height: 100%; }
#unity-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 133.3333vh); height: min(75vw, 100vh); display: block; background: #e6e7ea; outline-offset: -3px; touch-action: none; }
#loading, #paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #e6e7ea; color: var(--green); padding: 24px; z-index: 5; }
#paused { background: #fff8eced; font-size: 28px; }
#paused small { font-size: 16px; margin-top: 8px; }
#bar { width: 70%; max-width: 280px; height: 14px; border-radius: 7px; background: #e4ecd0; overflow: hidden; margin-top: 12px; }
#fill { width: 0; height: 100%; background: #8fc45a; border-radius: 7px; }
#touch-panel { display: none; }
#save-status { position: absolute; bottom: max(0px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; padding: 4px 8px; font-size: 14px; text-align: center; color: var(--ink); background: #fff8ecf5; pointer-events: none; z-index: 4; }
#save-status:empty { display: none; }
button { min-width: 48px; min-height: 48px; padding: 10px 12px; font: inherit; font-weight: 650; color: var(--ink); background: var(--cream); border: 2px solid #d8c8ad; border-radius: 3px; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .48; cursor: default; }
button:focus-visible, canvas:focus-visible { outline: 3px solid #315eb0; outline-offset: 2px; }
button:active:not(:disabled) { background: #e2efd5; }
/* A short landscape view uses the same dock beside the board. No orientation lock. */
@media (max-aspect-ratio: 1/1), (max-height: 500px) {
  #game { display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #unity-canvas { position: relative; inset: auto; transform: none; width: 100%; height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto; object-fit: contain; }
  #touch-panel:not([hidden]) { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 36px; background: var(--cream); touch-action: pan-y; }
  #screen-title { font-size: 20px; line-height: 1.2; margin: 0 0 8px; color: var(--green); }
  #message { font-size: 16px; line-height: 1.4; margin: 0 0 12px; white-space: pre-line; }
  #readout { font-size: 16px; line-height: 1.45; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
  #readout p { margin: 3px 0; white-space: pre-line; }
  #controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #controls button { width: 100%; font-size: 15px; overflow-wrap: anywhere; }
  body[data-screen="hub"] #controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-screen="hub"] #controls button.act-tile { min-height: 82px; padding: 8px 4px; font-size: 14px; background: #fff; }
  body[data-screen="hub"] #controls button:not(.act-tile) { grid-column: 1 / -1; }
  body[data-screen="title"] #controls, body[data-screen="menu"] #controls, body[data-screen="error"] #controls, body[data-screen="progress"] #controls { grid-template-columns: 1fr; }
  /* Keep a real drawing buffer during menus/loading; a zero-sized hidden canvas can stall Unity startup. */
  body:not([data-screen="act"]) #unity-canvas { position: absolute; visibility: hidden; pointer-events: none; width: min(100vw, 133.3333vh); height: auto; }
  body[data-screen="title"] #touch-panel { display: flex; justify-content: center; flex-direction: column; text-align: center; }
  #progress table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
  #progress th, #progress td { padding: 7px 2px; border-bottom: 1px solid #e4d8c4; text-align: center; }
  #progress th:first-child { text-align: left; max-width: 110px; font-weight: 600; }
  #progress td[data-state="Done"] { color: #246632; font-weight: 750; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  #game { flex-direction: row; align-items: center; }
  #unity-canvas { width: min(54%, 133.3333vh); height: auto; }
  #touch-panel:not([hidden]) { align-self: stretch; width: 46%; flex: 1 1 46%; }
  body:not([data-screen="act"]) #touch-panel { width: 100%; }
}