@import url("tetris-space-theme.css?v=20260922-10");

:root {
  --block-size: clamp(22px, 3.55vh, 36px);
  --panel-bg: #181d1b; --text-color: #e9e0cb;
  --accent: #efb94f; --accent-soft: #ffe0a0;
  --line: #827050; --panel: #292b25; --panel-deep: #101715;
  --amber: #ffc264; --scrollbar-thumb: #b8995f;
  --scrollbar-thumb-end: #695838; --scrollbar-track: #151d1b; --scrollbar-border: #292b25;
}
body.tetris-sewage-plant {
  min-width: 320px;
  background: #101b1a url('../assets/images/tetris-sewage-plant.png') center / cover fixed no-repeat;
  font-family: 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
}
[hidden] { display: none !important; }
.modal:not([hidden]), .mode-start-overlay:not([hidden]) { display: grid; }
.pause-overlay:not([hidden]) { display: flex; }
#gameCanvas > canvas { width: 100% !important; height: 100% !important; display: block; }
#holdCanvas, #nextCanvas { width: 100%; height: 100%; display: grid; place-items: center; }
.piece-preview-canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
.space-game-shell { min-width: 0; background: linear-gradient(180deg, #07110e80, transparent 30%, #08120f60); }
.command-header { border-bottom-color: #94724070; background: linear-gradient(#101715ed, #151c19cc); }
.brand { font-size: clamp(15px, 1.5vw, 22px); letter-spacing: .09em; color: #e9dfc6; text-shadow: 0 2px #000; }
.brand-mark i { background: #d5a53b; box-shadow: inset 0 0 0 2px #65502a; }
.mode-tab { color: #a8aba0; }
.mode-tab.is-active { color: #ffcf7b; background: linear-gradient(0deg, #c8983525, transparent); text-shadow: 0 0 16px #f4b85060; }
.mode-tab.is-active::after { background: #efb94f; box-shadow: 0 0 15px #efb94f80; }
.icon-button { color: #d8c6a6; border-color: #77705c; background: #242b26; }
.game-stage { width: min(900px, 96vw); grid-template-columns: 175px auto 175px; gap: 20px; padding-block: 20px; }
.left-rail, .right-rail { width: 175px; gap: 16px; margin-top: 40px; }
.left-rail .hold-panel { order: -1; }
.board-column { transform: none; }
.hud-panel {
  border: 3px solid #655e4e; border-radius: 5px;
  background: repeating-linear-gradient(117deg, #ffffff03 0 1px, transparent 1px 5px), linear-gradient(125deg, #454239, #232925 45%, #332e23);
  box-shadow: inset 0 0 0 1px #a39978, inset 0 0 0 5px #24241e, 0 8px 16px #0009;
  backdrop-filter: none;
}
.hud-panel::before, .hud-panel::after {
  content: ''; position: absolute; left: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #b1aa90, #373a32 48%, #111 51%, #736d57 62%); border: 1px solid #141813;
  box-shadow: 143px 0 0 -1px #777361, 143px 0 0 0 #151915;
}
.hud-panel::before { top: 7px; } .hud-panel::after { bottom: 7px; }
.hud-panel h2 { color: #d1c3a8; letter-spacing: .1em; text-shadow: 0 2px #080b08; }
.stats-panel { padding: 18px 13px; }
.score-hero { padding: 8px 0 14px; border-bottom: 1px solid #655a40; }
.score-hero::after, .stat-card::after, .score-scale { display: none; }
.score-heading { color: #bfb39c; font-size: 10px; }
#score { font: 36px 'Courier New', monospace; color: #ffc15b; text-shadow: 0 0 12px #ed921c80; }
.stat-cards { gap: 7px; margin-block: 12px; }
.stat-card { min-height: 83px; padding: 10px 7px; border-color: #5d5b46; border-radius: 2px; background: #101915; }
.stat-card span, .telemetry-item span, .timer-block span { color: #b2ae9c; font-size: 9px; }
.stat-card strong { color: #ffc15b; font-family: 'Courier New', monospace; text-shadow: 0 0 10px #ed921c60; }
.stat-card small, .control-copy small { display: none; }
.telemetry-row { gap: 7px; }.telemetry-item strong { color: #d1c8ae; font-size: 15px; }
.hold-panel, .next-panel { padding: 18px 12px; }
.mini-screen { background: #0b1210; border: 2px solid #66614e; border-radius: 2px; box-shadow: inset 0 0 18px #000; }
.hold-screen, .primary-next, .next-stack .mini-screen { height: 85px !important; }
.board-frame {
  padding: 23px 26px; border: 3px solid #777261; border-radius: 5px;
  background: repeating-linear-gradient(124deg, #ae8735 0 13px, #242822 13px 27px);
  box-shadow: inset 0 0 0 2px #aca18a, inset 0 0 0 9px #45473d, 0 0 0 3px #171b16, 0 18px 50px #000b;
}
.board-frame::before, .board-frame::after { left: 12px; right: 12px; height: 7px; background: repeating-linear-gradient(90deg, #aaa28a 0 6px, #33382e 6px 38px); box-shadow: 0 1px #111; }
.frame-light { top: 48%; bottom: auto; height: 38px; width: 5px; background: #ffda83; box-shadow: 0 0 9px #ffc360, 0 0 22px #ff9f38; }
.canvas-container { border-color: #080e0d; border-radius: 0; box-shadow: 0 0 0 2px #646657, 0 0 8px #000; }
#gameCanvas { background-color: #101a1b !important; }
.action-panel { padding: 15px 12px; }
.pause-button, .restart-button, .pause-card button, .mode-start-actions button, .primary-action, .revive-primary {
  border: 1px solid #a98b4f; border-radius: 3px; color: #f1dfb6;
  background: linear-gradient(#605239, #302f24); box-shadow: inset 0 1px #c3af7740, 0 3px #0e1511;
}
.pause-button { font-size: 11px; }.timer-block strong { color: #ffc264; font-family: 'Courier New', monospace; }
.mode-start-overlay, .pause-overlay { background: #091411df; backdrop-filter: blur(4px); }
.mode-start-card { width: 90%; }.mode-start-card h2 { font-size: 22px; color: #eee4cc; }
.eyebrow, .pause-status { color: #e9b952; letter-spacing: .13em; }
.mode-start-card p, .pause-card p { color: #a7b5a9; }
.mode-start-actions button:first-child, .mode-start-actions button:hover, .pause-card button:hover, .primary-action:hover { background: linear-gradient(#bd913b, #805e25); color: #fff5d8; }
.control-dock { width: min(890px, 95vw); justify-self: center; border: 1px solid #68634b; border-radius: 4px; background: #1a241ee8; padding: 12px; margin-bottom: 15px; }
.control-card, .primary-control { border-color: #575e4a; background: #30382b70; border-radius: 3px; }.control-copy b { color: #c5cbbb; font-size: 10px; }
kbd, .control-card kbd, .primary-control kbd { border-color: #98977b; color: #e6dec5; background: #303a2e; border-radius: 3px; box-shadow: 0 2px #090e0b; }
.review-content { border-color: #666046; background: #101a17f5; }.review-shell { border-color: #5b614d; background: #222b23; border-radius: 4px; }
.review-heading h2 { color: #efe3c8; }.review-eyebrow { color: #e7b653; }.review-heading p, .comment-status { color: #adb7a8; }
.modal { background: #060e0bd9; }.modal-card { border: 3px solid #7e765b; border-radius: 6px; background: linear-gradient(135deg, #303b30, #111c18); color: #e5dfc9; box-shadow: inset 0 0 0 2px #343b2b, 0 20px 70px #000b; }
.modal-card h2 { color: #efdfb5; }.result-title-copy p { color: #a8b6a6; line-height: 1.6; }.final-score-block strong, .result-grid strong { color: #ffc264; }.result-grid div, .final-score-block, .result-records { background: #111b15; border-color: #6b674a; }.result-grid b, .final-score-block small { display: none; }
.revive-benefits > div { border-color: #626b51; background: #1c291f; }.revive-copy { color: #bbc3af; }.revive-orb { color: #e7bb5e; background: #35482d; }.revive-decline { color: #c9d0bb; }.revive-primary:disabled { opacity: .45; }
button:focus-visible, a:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 4px; }
@media (max-width: 900px) {
  .space-game-shell { display: block; min-height: 100dvh; }
  .command-header { height: auto; min-height: 112px; grid-template-columns: 1fr auto; padding: 12px; }
  .brand { grid-column: 1; font-size: 15px; }.header-actions { grid-column: 2; grid-row: 1; gap: 4px; }.icon-button { width: 30px; height: 30px; }
  .mode-tabs { grid-row: 2; grid-column: 1 / -1; height: 42px; justify-content: center; }.mode-tab { min-width: 0; font-size: 12px; padding-inline: 12px; }
  .game-stage { width: 100%; grid-template-columns: 140px auto 140px; gap: 12px; padding: 16px 12px 100px; }
  .board-column { grid-column: 2; grid-row: 1; }.left-rail, .right-rail { width: 140px; grid-row: 1; }.left-rail { grid-column: 1; }.right-rail { grid-column: 3; }
  .hud-panel::before, .hud-panel::after { box-shadow: none; }
  .control-dock { display: none; }
  .mobile-controls-area { display: grid; position: fixed; z-index: 40; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; right: 8px; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; border: 1px solid #7d7958; border-radius: 5px; background: #18271ff5; }
  .mobile-controls-area button { min-width: 0; min-height: 48px; padding: 3px; border-color: #89845f; border-radius: 3px; background: linear-gradient(#45533b, #263326); color: #eedfbb; touch-action: manipulation; }
  [data-game-mount] { touch-action: none; }
}
@media (max-width: 700px) {
  :root { --block-size: clamp(18px, min(7.3vw, 3.35dvh), 29px); }
  .brand { font-size: 12px; letter-spacing: .02em; }.brand-mark { display: none; }
  .game-stage { grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 155px; }
  .board-column { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .left-rail, .right-rail { width: 100%; grid-row: 2; margin: 0; }.left-rail { grid-column: 1; }.right-rail { grid-column: 2; }
  .board-frame { padding: 18px; }.mobile-controls-area { grid-template-columns: repeat(3, 1fr); }
  .modal-card { max-height: 90dvh; overflow: auto; }.review-content { padding: 40px 12px 160px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
/* Repaint the shared console's remaining blue accents. */
.score-hero, .telemetry-item { border: 1px solid #65664d; border-radius: 3px; background: linear-gradient(135deg, #233023, #101a15); box-shadow: inset 0 1px #bcc49a12; }
.score-hero { padding: 10px; }
.score-icon { color: #edbb56; text-shadow: 0 0 9px #ffae3244; }
.telemetry-item:last-child strong { color: #c9d3b8; }
.pause-glyph i { background: #ecc567; box-shadow: 0 0 15px #e9a83a55; }