:root {
  color-scheme: dark;
  font-family: "Yu Gothic UI", "Meiryo", sans-serif;
  background: #081126;
  --cyan: #8ce8ff;
  --honey: #ffd971;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 18% 12%, rgba(70,146,189,.22), transparent 28rem), radial-gradient(circle at 84% 86%, rgba(87,84,178,.2), transparent 25rem), #081126;
  color: #f8fbff;
}
.game-shell { width: min(96vw, 930px); text-align: center; padding: 20px 12px 24px; }
header { margin-bottom: 10px; }
.eyebrow { margin: 0; color: var(--cyan); font-weight: 800; letter-spacing: .24em; font-size: 11px; }
h1 { margin: 2px 0 0; letter-spacing: .13em; font-size: clamp(25px, 5vw, 40px); line-height: 1.08; text-shadow: 0 3px 0 #152249; }
.tagline { margin: 4px 0 0; color: #cbd8f7; font-size: 13px; }
.canvas-frame { position: relative; max-width: 900px; margin: 0 auto; }
canvas { display: block; width: 100%; height: auto; border: 1px solid rgba(186,225,255,.32); border-radius: 20px; background: #182549; box-shadow: 0 18px 50px rgba(0,0,0,.38); }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 18px; margin: 13px 0 0; color: #d9e5ff; font-size: clamp(11px, 1.8vw, 14px); }
.touch-controls { display: none; }
button { margin-top: 12px; padding: 10px 30px; border: 0; border-radius: 999px; background: var(--honey); color: #18213c; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #b97824; }
button:hover { filter: brightness(1.06); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #b97824; }
.help-button { position: absolute; right: 15px; bottom: 14px; margin: 0; padding: 7px 14px; border: 1px solid rgba(180,225,255,.4); color: #dceaff; background: rgba(7,20,44,.74); box-shadow: none; font-size: 12px; backdrop-filter: blur(8px); }
.guide { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(3,10,26,.82); backdrop-filter: blur(8px); }
.guide[hidden] { display: none; }
.guide-card { width: min(92vw, 460px); max-width: 100%; min-width: 0; padding: 27px 28px 30px; border: 1px solid rgba(168,225,255,.35); border-radius: 24px; background: linear-gradient(145deg, #203e70, #111e3d); box-shadow: 0 28px 70px rgba(0,0,0,.48); }
.guide-kicker { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.guide h2 { margin: 7px 0 12px; font-size: clamp(21px, 5vw, 28px); }
.guide p { color: #d9e5ff; line-height: 1.75; }
.guide strong { color: var(--honey); }
.color-count-picker { width: 100%; max-width: 100%; min-width: 0; min-inline-size: 0; margin: 16px 0; padding: 0; border: 0; }
.color-count-picker legend { width: 100%; padding: 0; color: #fff; font-size: 14px; font-weight: 800; text-align: left; }
.picker-hint { margin: 3px 0 9px; color: #abc2e8 !important; font-size: 12px; text-align: left; line-height: 1.4 !important; }
.color-count-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 100%; min-width: 0; gap: 8px; }
.color-count-options label { position: relative; display: block; min-width: 0; cursor: pointer; }
.color-count-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.color-count-options span { display: grid; gap: 2px; min-height: 58px; place-content: center; border: 1px solid rgba(173,220,255,.22); border-radius: 12px; background: rgba(5,17,39,.48); color: #d9e5ff; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.color-count-options b { font-size: 15px; }
.color-count-options small { color: #abc2e8; font-size: 10px; }
.color-count-options input:checked + span { border-color: var(--honey); background: rgba(255,217,113,.14); color: #fff4c2; box-shadow: inset 0 0 0 1px rgba(255,217,113,.3); }
.color-count-options input:focus-visible + span { outline: 3px solid #fff; outline-offset: 3px; }
.color-count-options label:hover span { transform: translateY(-1px); border-color: rgba(173,220,255,.55); }
.guide dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; min-width: 0; gap: 8px; margin: 18px 0 5px; }
.guide dl div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 10px; background: rgba(5,17,39,.48); }
.guide dt { color: #fff; font-weight: 800; }
.guide dd { min-width: 0; margin: 0; color: #abc2e8; font-size: 13px; overflow-wrap: anywhere; }
.guide-orbs { display: flex; justify-content: center; gap: 3px; margin: 16px 0; }
.guide-orbs i { width: 31px; height: 28px; border-radius: 48% 48% 44% 44%; border: 2px solid rgba(17,39,76,.7); box-shadow: inset 6px 6px 8px rgba(255,255,255,.25); }
.guide-orbs i:nth-child(1) { background: #f26378; }
.guide-orbs i:nth-child(2) { background: #4ea9e8; transform: translateY(4px); }
.guide-orbs i:nth-child(3) { background: #55c990; }
.guide-orbs i:nth-child(4) { background: #f4bd4f; transform: translateY(4px); }
.guide-orbs i:nth-child(5) { background: #9a68dc; }
@media (max-width: 650px) {
  body { place-items: start center; min-height: 100svh; overflow-x: hidden; }
  .game-shell { width: 100%; padding: max(8px, env(safe-area-inset-top)) 5px max(14px, env(safe-area-inset-bottom)); }
  header { margin-bottom: 7px; }
  .tagline { font-size: 11px; }
  canvas { border-radius: 12px; }
  .help-button { right: 8px; bottom: 8px; padding: 5px 10px; font-size: 10px; }
  .controls { display: none; }
  .touch-controls { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 8px; width: 100%; margin: 9px auto 0; padding: 0 max(5px, env(safe-area-inset-right)) 0 max(5px, env(safe-area-inset-left)); touch-action: none; user-select: none; -webkit-user-select: none; }
  .touch-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .touch-controls button { display: grid; min-width: 0; min-height: 58px; margin: 0; padding: 5px 2px; place-content: center; gap: 1px; border: 1px solid rgba(173,220,255,.32); border-radius: 15px; color: #eef7ff; background: linear-gradient(180deg, rgba(41,75,120,.96), rgba(13,34,68,.96)); box-shadow: 0 3px 0 rgba(4,12,30,.9); touch-action: none; }
  .touch-controls button span { font-size: 23px; line-height: 1; }
  .touch-controls button small { color: #bcd0ee; font-size: 9px; font-weight: 800; }
  .touch-controls button[data-game-action^="rotate"] { border-color: rgba(255,217,113,.42); }
  .touch-controls button[data-game-action="pause"] { color: #ffd971; }
  .touch-controls button.is-pressed, .touch-controls button:active { transform: translateY(2px) scale(.98); background: rgba(83,135,188,.96); box-shadow: 0 1px 0 rgba(4,12,30,.9); }
}
@media (min-width: 481px) and (max-width: 650px) {
  .guide { justify-items: start; padding-inline: 20px; overflow-x: hidden; }
  .guide-card { width: 335px; max-width: 335px; }
}
@media (max-width: 420px) {
  .guide { align-items: start; overflow-y: auto; }
  .guide-card { margin: 10px 0; padding: 20px 18px 22px; }
  .guide dl { grid-template-columns: 1fr; }
  .eyebrow { font-size: 9px; }
  .color-count-options { gap: 5px; }
  .color-count-options span { min-height: 52px; }
  .touch-controls { gap: 5px; }
  .touch-group { gap: 4px; }
  .touch-controls button { min-height: 54px; border-radius: 13px; }
}