:root {
  color-scheme: dark;
  --ink: #f8f5d8;
  --muted: #b5c5d5;
  --navy: #111a36;
  --navy-2: #1b2b50;
  --line: #506789;
  --yellow: #ffcf69;
  --pink: #ff8f9f;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: #0b1126;
  font-family: "Courier New", ui-monospace, monospace;
  image-rendering: pixelated;
}
button { font: inherit; }

.game-shell { position: relative; width: 100%; height: 100dvh; min-height: 100svh; }
.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: max(15px, env(safe-area-inset-top)) clamp(14px, 3vw, 38px) 0;
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff6c6; font-size: clamp(15px, 2vw, 23px); font-weight: 900; letter-spacing: .02em; text-shadow: 3px 3px #18213e; }
.brand-dot { width: 15px; height: 15px; display: inline-block; background: #8ee66f; border: 3px solid #284f5a; box-shadow: 3px 3px #0a1226; transform: rotate(45deg); }
.stats { display: flex; gap: 7px; }
.stat { min-width: 65px; padding: 5px 9px 6px; text-align: right; background: #172546dd; border: 3px solid #40577d; box-shadow: 3px 3px #0a1226; }
.stat span { display: block; color: #9fb4c9; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.stat strong { display: block; color: #fff5b1; font-size: clamp(16px, 2.4vw, 23px); line-height: 1; }
.top-actions { display: flex; gap: 7px; pointer-events: auto; }
.icon-button { width: 34px; height: 34px; padding: 0; color: #fff5b1; background: #172546dd; border: 3px solid #40577d; box-shadow: 3px 3px #0a1226; cursor: pointer; font-size: 19px; font-weight: 900; line-height: 1; }
.icon-button:hover { color: #fff; border-color: #fff0a1; transform: translate(-1px, -1px); }

.game-card { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; background: #17294b; }
.canvas-wrap { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #202f59 0%, #426f87 52%, #d48d69 100%); }
.canvas-wrap::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(ellipse at 74% 17%, #fff1a526 0 4%, transparent 4.2%), repeating-linear-gradient(0deg, transparent 0 47px, #d9f0df08 48px 49px); }
canvas { position: absolute; top: 50%; left: 50%; display: block; width: 100vw; height: 100dvh; transform: translate(-50%, -50%); touch-action: none; cursor: pointer; image-rendering: pixelated; }

.overlay { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #111a36d9; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.overlay.active { opacity: 1; visibility: visible; }
.mascot { display: grid; place-items: center; width: 76px; height: 62px; margin-bottom: 15px; color: #20364b; background: #92ed78; border: 4px solid #2a685c; box-shadow: 5px 5px #080f22; font-size: 23px; font-weight: 900; letter-spacing: -4px; }
.mascot.sad { background: #ffb36e; }
.eyebrow { margin: 0 0 10px; color: #ffdd72; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
h1, h2 { margin: 0; color: #fff9d9; letter-spacing: .01em; line-height: 1.05; text-shadow: 4px 4px #111a36; }
h1 { max-width: 680px; font-size: clamp(25px, 5vw, 52px); }
h2 { font-size: clamp(45px, 9vw, 80px); }
.hint { max-width: 460px; margin: 16px 0 21px; color: #d6e1ec; line-height: 1.6; font-size: 13px; }
kbd { padding: 2px 6px; color: #fff4b0; background: #273e65; border: 2px solid #7085a6; box-shadow: 2px 2px #0b1228; font-size: 11px; }
.primary-button, .ghost-button { border: 3px solid #713f52; padding: 12px 20px; color: #35243a; font-weight: 900; cursor: pointer; transition: transform .1s ease, filter .1s ease; }
.primary-button { background: var(--yellow); box-shadow: 5px 5px #0b1228; }
.primary-button:hover, .ghost-button:hover { filter: brightness(1.12); transform: translate(-1px, -1px); }
.primary-button:active { transform: translate(4px, 4px); box-shadow: 1px 1px #0b1228; }
.ghost-button { margin-top: 11px; color: #f6f1cf; background: #263a61; border-color: #6682a9; box-shadow: 4px 4px #0b1228; }
.small-note { margin: 18px 0 0; color: #9fb4c9; font-size: 10px; }

.control-hud { position: absolute; z-index: 5; left: 50%; bottom: max(17px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 5px; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .15s ease; }
.control-hud.visible { opacity: 1; visibility: visible; }
.control-row { display: flex; align-items: center; justify-content: center; gap: 7px; }
.control-label { width: 54px; color: #fff0ac; font-size: 9px; font-weight: 900; text-align: right; text-shadow: 2px 2px #0b1226; }
.shape-controls, .color-controls { display: flex; gap: 5px; }
.control-button { display: grid; grid-template-columns: 23px auto; align-items: center; gap: 5px; min-width: 75px; padding: 5px 7px 5px 5px; color: #d5e2ed; background: #1a2a4c; border: 3px solid #536c92; box-shadow: 3px 3px #0a1226; cursor: pointer; }
.control-button b { display: grid; place-items: center; width: 22px; height: 22px; color: #15243e; background: #fff; font-size: 16px; line-height: 1; }
.control-button span { overflow: hidden; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.control-button.active { color: #fff6be; border-color: #fff0a1; transform: translate(-1px, -1px); }
.control-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px #0a1226; }
.ready-panel { position: absolute; z-index: 4; top: 22%; left: 50%; display: none; flex-direction: column; gap: 8px; align-items: center; transform: translateX(-50%); color: #fff2ac; text-align: center; text-shadow: 3px 3px #18223f; pointer-events: none; }
.ready-panel.visible { display: flex; }
.ready-panel strong { font-size: clamp(12px, 2vw, 18px); letter-spacing: .08em; white-space: nowrap; }
.ready-panel span { color: #d5e2ed; font-size: 10px; }

.tap-hint { position: absolute; z-index: 4; left: 50%; bottom: 17%; transform: translateX(-50%); color: #fff0ac; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-shadow: 2px 2px #18223f; pointer-events: none; animation: breathe 1.3s steps(2, end) infinite; }
.tap-hint.hidden { display: none; }
@keyframes breathe { 50% { opacity: .45; transform: translateX(-50%) translateY(-3px); } }
.game-footer { position: absolute; z-index: 8; bottom: max(8px, env(safe-area-inset-bottom)); left: 0; display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 0 clamp(14px, 3vw, 38px); color: #a8bfd0; font-size: 9px; pointer-events: none; text-shadow: 2px 2px #0b1226; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; }
.status-dot i { width: 7px; height: 7px; background: #8ee66f; border: 1px solid #1c4d47; box-shadow: 2px 2px #0b1226; }
.footer-note { display: none; }

.modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: #0b1226dd; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease; }
.modal.active { opacity: 1; visibility: visible; }
.modal-card { position: relative; width: min(500px, 100%); max-height: min(90dvh, 760px); overflow: auto; padding: clamp(24px, 5vw, 42px); color: #e7edf1; background: #172546; border: 4px solid #607ca4; box-shadow: 8px 8px #070d1d; }
.modal-close { position: absolute; top: 9px; right: 12px; width: 32px; height: 32px; padding: 0; color: #fff5b1; background: #263b63; border: 2px solid #6c84a7; cursor: pointer; font-size: 22px; line-height: 1; }
.modal-card h2 { margin-bottom: 19px; font-size: clamp(32px, 6vw, 52px); }
.help-list { display: grid; gap: 11px; margin: 0 0 19px; padding-left: 22px; color: #e2ebee; font-size: 13px; line-height: 1.5; }
.help-list b, .help-note b { color: #ffe18b; }
.help-note, .settings-note { margin: 0 0 20px; color: #adc0d0; font-size: 11px; line-height: 1.6; }
.settings-card { width: min(720px, 100%); }
.setting-section { margin-top: 17px; }
.setting-section h3 { display: flex; justify-content: space-between; margin: 0 0 8px; color: #ffe18b; font-size: 11px; letter-spacing: .12em; }
.setting-section h3 span { color: #a7bfd1; }
.library { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.library-option { display: grid; justify-items: center; gap: 5px; min-height: 60px; padding: 7px 4px; color: #b9cad8; background: #21365b; border: 2px solid #4d678c; cursor: pointer; }
.library-option b { display: grid; place-items: center; width: 28px; height: 28px; color: #1b2a47; background: #f1f2da; font-size: 15px; }
.library-option span { overflow: hidden; max-width: 100%; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.library-option.active { color: #fff6bd; border-color: #fff0a1; background: #2e4a76; box-shadow: 3px 3px #0b1226; transform: translate(-1px, -1px); }
.library-option.disabled { opacity: .45; }
.settings-error { min-height: 16px; margin: 13px 0 0; color: #ff9d9d; font-size: 10px; }
.setting-actions { display: flex; justify-content: flex-end; margin-top: 7px; }

@media (max-width: 620px) {
  .topbar { gap: 8px; }
  .brand { font-size: 13px; }
  .brand-dot { width: 12px; height: 12px; }
  .stats { gap: 4px; }
  .stat { min-width: 51px; padding: 4px 5px; border-width: 2px; box-shadow: 2px 2px #0a1226; }
  .stat span { font-size: 7px; }
  .stat strong { font-size: 14px; }
  .speed-stat { display: block; }
  .top-actions { gap: 4px; }
  .icon-button { width: 29px; height: 29px; border-width: 2px; font-size: 16px; }
  .control-hud { width: min(97vw, 430px); bottom: max(15px, env(safe-area-inset-bottom)); }
  .control-row { gap: 3px; }
  .control-label { width: 43px; font-size: 8px; }
  .shape-controls, .color-controls { flex: 1; gap: 3px; }
  .control-button { min-width: 0; flex: 1; grid-template-columns: 19px auto; gap: 3px; padding: 4px 3px; }
  .control-button b { width: 19px; height: 19px; font-size: 13px; }
  .control-button span { font-size: 7px; }
  .game-footer { font-size: 8px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .control-hud { bottom: 16px; }
  .game-footer { display: none; }
  .mascot { width: 54px; height: 44px; margin-bottom: 8px; }
  .hint { margin: 8px 0 12px; }
}