@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { color: #ecf4ff; background: #091221; font-family: "DM Mono", monospace; font-size: 15px; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 20% -10%, #223f70 0, transparent 35rem), #091221; }
button, select, input { font: inherit; }
button, select, input { accent-color: #55d8c0; }
button, select { color: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #fff2a2; outline-offset: 3px; }
.game-shell { width: min(1120px, 100%); margin: 0 auto; padding: clamp(20px, 4vw, 52px) clamp(14px, 3vw, 32px) 42px; }
.game-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.eyebrow { margin: 0 0 8px; color: #8db6e8; font-size: 11px; letter-spacing: .11em; }
h1, h2 { margin: 0; font-family: "Space Grotesk", sans-serif; }
h1 { max-width: 690px; font-size: clamp(30px, 5vw, 54px); line-height: .98; letter-spacing: -.05em; }
h2 { font-size: 18px; letter-spacing: -.02em; }
.restart, .fullscreen, .advanced-toggle { border: 1px solid #5d769e; border-radius: 7px; background: #172840; padding: 9px 11px; white-space: nowrap; }
.fullscreen { color: #c9d8ee; }
kbd { padding: 1px 4px; border: 1px solid #6a85ad; border-radius: 3px; color: #b9cde8; }
.preset-wrap { display: grid; grid-template-columns: auto minmax(220px, 330px) 1fr; align-items: center; gap: 12px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid #29415f; border-radius: 10px; background: #101e32; }
.preset-wrap label { color: #b9cde8; font-size: 12px; }
.preset-wrap select, .settings-grid select { border: 1px solid #557198; border-radius: 5px; padding: 7px; background: #0b1627; }
.preset-wrap p { margin: 0; color: #9bb1d0; font-size: 12px; line-height: 1.4; }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
.play-column { min-width: 0; }
.canvas-wrap { display: grid; min-width: 0; place-items: center; border: 1px solid #43658d; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 42px #0207128c; background: #10203b; }
canvas { display: block; width: 100%; aspect-ratio: 2 / 1; image-rendering: pixelated; touch-action: none; }
.touch-controls { display: none; }
.status-card, .rules-card { border: 1px solid #29415f; border-radius: 10px; background: #101e32; }
.status-card { padding: 18px; }
.status-card h2 { margin-bottom: 15px; }
dl { display: grid; gap: 9px; margin: 0; } dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } dt { color: #91aad0; } dd { margin: 0; color: #e9c56e; font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.course-message { margin: -7px 0 12px; color: #c9d8ee; font-size: 12px; line-height: 1.45; }
.controls { display: grid; gap: 6px; color: #9eb6d4; font-size: 11px; line-height: 1.35; }.controls b { color: #eaf3ff; }.controls em { color: #6d89ad; font-style: normal; }
.rules-card { margin-top: 16px; padding: 18px; }.rules-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.rules-title .eyebrow { margin-bottom: 4px; }.advanced-toggle { font-size: 12px; }
.rule-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }.rule-summary span { border: 1px solid #365374; border-radius: 99px; padding: 5px 8px; color: #b9cde8; font-size: 11px; }
.advanced { margin-top: 18px; padding-top: 16px; border-top: 1px solid #29415f; }.advanced-intro { margin: 0 0 14px; color: #9fb7d6; line-height: 1.45; font-size: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }.settings-grid label { display: grid; gap: 6px; min-height: 48px; color: #bfcee4; font-size: 11px; }.settings-grid output { color: #65dcc6; }.settings-grid input[type="range"] { width: 100%; }.settings-grid .check { display: flex; align-items: center; gap: 7px; }
.footer-note { max-width: 760px; margin: 18px 0 0; color: #839dbd; font-size: 12px; line-height: 1.55; }
@media (max-width: 780px) {
  .game-grid { grid-template-columns: 1fr; }
  .status-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .status-card h2 { grid-column: 1 / -1; }
  .controls { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preset-wrap { grid-template-columns: 1fr 1fr; }
  .preset-wrap p { grid-column: 1 / -1; }
  .touch-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
  .touch-controls button { display: grid; min-height: 62px; place-items: center; gap: 1px; border: 1px solid #5276a0; border-radius: 10px; background: #1d3555; color: #eef7ff; font-family: "Space Grotesk", sans-serif; font-size: 25px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
  .touch-controls button:active { transform: translateY(2px); background: #2b5d74; box-shadow: inset 0 0 0 2px #78e0cf; }
  .touch-controls button span { font: 11px "DM Mono", monospace; letter-spacing: .04em; }
}
@media (max-width: 520px) {
  body { height: 100dvh; overflow: hidden; }
  .game-shell { display: grid; height: 100dvh; grid-template-rows: auto auto auto auto; align-content: start; gap: 7px; padding: 9px 10px 10px; }
  .game-actions { margin: 0; }.restart, .fullscreen { padding: 7px; font-size: 10px; }
  .preset-wrap { display: grid; grid-template-columns: 1fr auto; gap: 5px 9px; margin: 0; padding: 7px 9px; }.preset-wrap label { font-size: 10px; }.preset-wrap select { min-width: 180px; max-width: 58vw; padding: 5px; font-size: 11px; }.preset-wrap p { display: none; }.course-message { margin: -2px 2px 0; font-size: 10px; line-height: 1.25; }
  .game-grid { grid-template-rows: auto auto; align-content: start; gap: 7px; min-height: 0; }.play-column { display: block; min-height: 0; }.canvas-wrap { min-height: 0; place-items: start center; box-shadow: none; }.canvas-wrap canvas { width: min(100%, 96dvh); max-height: 100%; height: auto; }
  .touch-controls { margin: 0; gap: 7px; }.touch-controls button { min-height: 48px; border-radius: 8px; font-size: 21px; }.touch-controls button span { font-size: 9px; }
  .status-card { grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 8px 10px; }.status-card h2 { display: none; }.status-card dl { display: contents; }.status-card dl div { display: block; }.status-card dt { font-size: 9px; }.status-card dd { font-size: 14px; }.controls { display: none; }
  .rules-card { margin: 0; padding: 7px 10px; }.rules-title .eyebrow, .rule-summary, .footer-note { display: none; }.rules-title h2 { font-size: 13px; }.advanced-toggle { padding: 5px 7px; font-size: 9px; }.advanced { position: absolute; z-index: 3; right: 10px; bottom: 58px; left: 10px; max-height: 68dvh; overflow: auto; border: 1px solid #5276a0; border-radius: 9px; background: #101e32; box-shadow: 0 14px 36px #030915dd; padding: 13px; }.settings-grid { grid-template-columns: 1fr 1fr; }
}

/* The blog iframe has a fixed height, so keep its mid-width layout compact too. */
@media (max-width: 780px) {
  html.embedded, html.embedded body { height: 100%; overflow: hidden; }
  html.embedded .game-shell { display: grid; height: 100dvh; grid-template-rows: auto auto auto auto; align-content: start; gap: 7px; padding: 10px; }
  html.embedded .game-actions { margin: 0; }
  html.embedded .game-grid { grid-template-rows: auto auto; align-content: start; gap: 7px; min-height: 0; }
  html.embedded .play-column { display: block; min-height: 0; }
  html.embedded .canvas-wrap { min-height: 0; place-items: start center; box-shadow: none; }
  html.embedded .canvas-wrap canvas { width: min(100%, 96dvh); max-height: 100%; height: auto; }
  html.embedded .touch-controls { margin: 0; gap: 7px; }
  html.embedded .touch-controls button { min-height: 48px; border-radius: 8px; font-size: 21px; }
  html.embedded .touch-controls button span { font-size: 9px; }
  html.embedded .status-card { grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 8px 10px; }
  html.embedded .status-card h2, html.embedded .controls { display: none; }
  html.embedded .status-card dl { display: contents; }
  html.embedded .status-card dl div { display: block; }
  html.embedded .status-card dt { font-size: 9px; }
  html.embedded .status-card dd { font-size: 14px; }
  html.embedded .rules-card { margin: 0; padding: 7px 10px; }
  html.embedded .rules-title .eyebrow, html.embedded .rule-summary, html.embedded .footer-note { display: none; }
  html.embedded .rules-title h2 { font-size: 13px; }
  html.embedded .advanced-toggle { padding: 5px 7px; font-size: 9px; }
  html.embedded .advanced { position: absolute; z-index: 3; right: 10px; bottom: 58px; left: 10px; max-height: 68dvh; overflow: auto; border: 1px solid #5276a0; border-radius: 9px; background: #101e32; box-shadow: 0 14px 36px #030915dd; padding: 13px; }
}