:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100%; color: #cfe9ff;
  font-family: "Menlo", "Consolas", "Monaco", monospace;
  background: radial-gradient(1200px 700px at 50% -10%, #0a1430 0%, #05070d 60%) #05070d;
  -webkit-text-size-adjust: 100%;
}

/* ---- game stage (hero, ~one viewport tall) ---- */
#stage { min-height: 100vh; display: grid; place-items: center; padding: 12px; }
#frame { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
canvas#cv {
  width: min(100%, 177.78vh);   /* keep 1290:720 (~16:9), fit the viewport */
  max-width: 1290px; height: auto; aspect-ratio: 1290 / 720;
  display: block; border: 1px solid #16306b; border-radius: 10px; background: #070b16;
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.08); touch-action: none;
}
#hint { margin: 0; font-size: 11px; color: #6b86b8; text-align: center; }

/* ---- rotate-to-landscape prompt (portrait phones) ---- */
#rotate { display: none; }
#rotate .ic {
  font-size: 64px; color: #00e5ff; animation: spin 2.4s ease-in-out infinite;
  text-shadow: 0 0 24px rgba(0,229,255,.5);
}
@keyframes spin { 0%,100% { transform: rotate(-25deg); } 50% { transform: rotate(25deg); } }
@media (pointer: coarse) and (orientation: portrait) {
  #frame { display: none; }
  #rotate {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; min-height: 80vh; font-size: 18px; color: #cfe9ff; text-align: center; padding: 28px;
  }
}
@media (pointer: coarse) and (orientation: landscape) {
  #stage { padding: 0; }
  canvas#cv { max-width: 100vw; max-height: 100vh; border: none; border-radius: 0; }
  #hint { display: none; }
}

/* ---- about / how-to-play content ---- */
#about { max-width: 860px; margin: 0 auto; padding: 26px 20px 64px; line-height: 1.7; font-size: 15px; }
#about h1 { color: #00e5ff; font-size: 26px; line-height: 1.3; margin: 0 0 14px; text-shadow: 0 0 16px rgba(0,229,255,.35); }
#about h2 { color: #cfe9ff; font-size: 19px; margin: 30px 0 10px; border-left: 3px solid #00e5ff; padding-left: 10px; }
#about p { color: #bcd3ee; margin: 10px 0; }
#about strong { color: #fff; }
#about code { background: #0c1530; border: 1px solid #16306b; border-radius: 4px; padding: 0 4px; font-size: 13px; }
#about ul { color: #bcd3ee; padding-left: 20px; margin: 8px 0; }
#about li { margin: 6px 0; }
#about .modes { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
#about .mode { border: 1px solid #16306b; border-radius: 10px; padding: 14px 16px; background: rgba(11,16,32,.5); }
#about .mode.red { border-color: rgba(255,59,92,.35); }
#about .mode h3 { margin: 0 0 6px; font-size: 15px; }
#about .blue h3 { color: #00e5ff; }
#about .red h3 { color: #ff3b5c; }
#about footer { margin-top: 36px; padding-top: 18px; border-top: 1px solid #16306b; font-size: 13px; color: #6b86b8; }
#about a { color: #00e5ff; text-decoration: none; }
#about a:hover { text-decoration: underline; }
@media (max-width: 620px) { #about .modes { grid-template-columns: 1fr; } #about { font-size: 14px; } }