@import url('/assets/fonts/fonts.css?v=20261025a');
:root { color-scheme: dark; --accent: #bdb3f4; --ink: #19182a; --app-border: #303b50; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 10% 0%, #202541 0, #10141f 55%, #0d111b 100%); color: #eef0f6; }
button, select, input, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, select { color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
[hidden] { display: none !important; }
a { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.game-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 48px; }
.game-layout > * { min-width: 0; }
.game-copy .app-intro-title { text-wrap: balance; }
.game-copy .app-intro-description { max-width: 410px; }
.game-steps { list-style: none; padding: 0; margin: 28px 0; border-top: 1px solid #ffffff18; }
.game-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #ffffff10; font-size: 13px; color: #b0bdd0; }
.game-steps b { color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.game-meta { color: #8f9db2; font-size: 12px; line-height: 1.9; }
.game-settings { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.game-settings label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; font-size: 12px; color: #aebcd0; }
select { width: 100%; min-height: 44px; border: 1px solid #3a4760; border-radius: 10px; padding: 9px 12px; background: #1a2233; }
.game-card { position: relative; min-width: 0; padding: 24px; border: 1px solid #ffffff1c; border-radius: 22px; background: linear-gradient(145deg, #1c2534ee, #131a29); box-shadow: 0 24px 70px #0002; }
.game-card-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.game-card-header h2 { font-size: 15px; font-weight: 600; margin: 0; color: #d4deec; }
.game-stats { display: flex; gap: 24px; margin: 20px 0; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; padding: 14px 0; }
.game-stats > div { flex: 1; }
.game-stats span { display: block; color: #9cabc0; font-size: 11px; }
.game-stats strong { font-variant-numeric: tabular-nums; font-size: 24px; line-height: 1.4; font-weight: 600; color: #e7e7f4; }
.game-stats small { font-size: 11px; font-weight: 400; color: #9cabc0; margin-left: 5px; }
.game-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.game-button { min-height: 44px; border: 1px solid #42516b; border-radius: 10px; padding: 10px 15px; background: #ffffff05; color: #cbd7e7; font-size: 13px; font-weight: 600; }
.game-button:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
.game-button.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.game-button.quiet { background: transparent; border-color: transparent; color: #acbdd3; }
.game-status { min-height: 48px; margin: 16px 0 0; color: #b9c6da; font-size: 13px; line-height: 1.8; }
.game-result { padding: 18px; margin-top: 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.game-result h2 { margin: 4px 0 8px; font-size: 22px; font-weight: 700; }
.game-result p { margin: 8px 0 16px; color: #b8c6d9; font-size: 13px; }
.share-area { margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff14; }
.share-area p { margin: 8px 0; font-size: 12px; color: #95a5bc; }
.share-area label { display: block; font-size: 12px; color: #aab8cc; }
.share-area textarea { width: 100%; min-height: 90px; padding: 10px; border: 1px solid #465575; border-radius: 8px; color: #eef0f6; background: #141b2a; overflow-wrap: anywhere; }
.check-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #acbdd3; margin: 14px 0 0; cursor: pointer; }
.check-label input { width: 18px; height: 18px; accent-color: var(--accent); }
.color-stage { min-height: 240px; display: grid; align-content: center; padding: 14px 0; }
.color-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; width: 100%; }
.color-tile { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid #ffffff18; border-radius: 10px; background: var(--tile); box-shadow: inset 0 1px #ffffff35, 0 3px 6px #0001; touch-action: none; user-select: none; -webkit-user-select: none; }
.color-tile:hover { box-shadow: inset 0 0 0 2px #fff6; }
.color-tile[aria-pressed='true'] { outline: 3px solid #fff; outline-offset: 2px; z-index: 1; }
.color-tile.fixed::after { content: '•'; color: #111a2aaa; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.color-tile .tile-number { display: none; background: #101728bb; color: #fff; padding: 2px 5px; border-radius: 5px; font-size: 12px; }
.color-board.guides .tile-number { display: inline-block; }
.color-board.guides .fixed::after { display: none; }
.color-board.completed { gap: 4px; }
.color-board.completed .color-tile { box-shadow: none; }
.color-board.completed .color-tile::after { display: none; }
.color-endpoints { display: flex; justify-content: space-between; font-size: 11px; color: #a4b1c5; margin-top: 12px; }
/* Pouch pieces stay on a grid. Only a deliberate valid placement changes them. */
body[data-app='pouch'] { --accent: #a8ccbd; --ink: #142820; }
.pouch-frame { padding: 14px; border: 1px solid #a8ccbd55; border-radius: 18px; background: #101b2377; box-shadow: inset 0 0 0 5px #ffffff03; }
.pouch-zip { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .2em; color: #91adab; margin-bottom: 12px; }
.pouch-zip::before { content: ''; height: 3px; flex: 1; background: repeating-linear-gradient(90deg, #78938c 0 2px, transparent 2px 5px); }
.pouch-zip::after { content: '▰'; font-size: 12px; }
.pouch-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; }
.pouch-cell { position: relative; aspect-ratio: 1; border-radius: 5px; border: 1px solid #ffffff08; background: #ffffff05; padding: 0; color: #1b2b31; font-size: 24px; user-select: none; -webkit-user-select: none; }
.pouch-cell:hover { outline: 2px solid #a8ccbd66; z-index: 1; }
.pouch-cell.filled { background: var(--piece); box-shadow: inset 0 1px #ffffff55; border-color: #ffffff22; }
.pouch-cell.selected { outline: 2px solid #fff; outline-offset: -2px; }
.pouch-cell.preview { background: #a8ccbd44; outline: 2px dashed #a8ccbd; outline-offset: -2px; }
.pouch-cell.preview-invalid { background: #e6b1a444; outline: 2px dashed #e6b1a4; outline-offset: -2px; }
.pouch-cell .piece-mark { font-size: 12px; font-weight: 700; position: absolute; top: 2px; left: 4px; opacity: .7; }
.inventory-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 20px 0 10px; }
.inventory-title h3 { margin: 0; font-size: 13px; font-weight: 600; }
.inventory-title span { font-size: 11px; color: #94a7bc; }
.pouch-inventory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pouch-piece { min-height: 94px; padding: 10px 4px 8px; border: 1px solid #3a4b5c; border-radius: 12px; background: #10182655; color: #b4c4d6; display: flex; align-items: center; flex-direction: column; gap: 6px; }
.pouch-piece[aria-pressed='true'] { border-color: var(--piece); background: color-mix(in srgb, var(--piece) 13%, #131c28); }
.pouch-piece.placed { border-style: dashed; }
.pouch-piece .piece-name { font-size: 11px; line-height: 1.4; }
.pouch-piece .piece-name b { color: var(--piece); margin-right: 4px; }
.piece-preview { display: grid; grid-template-columns: repeat(var(--pw), 10px); grid-template-rows: repeat(var(--ph), 10px); gap: 2px; align-content: center; justify-content: center; height: 34px; }
.piece-preview i { display: block; background: var(--piece); border-radius: 2px; box-shadow: inset 0 1px #ffffff44; }
.selection-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.selection-bar p { color: var(--accent); font-size: 12px; margin: 0; }
.selection-bar .game-button { padding: 8px 12px; }
.pouch-help { font-size: 11px; color: #9fafa9; margin: 10px 0 0; }
body[data-app='stop'] { --accent: #eac891; --ink: #322717; }
.stop-action { display: block; width: 100%; min-height: 56px; font-size: 15px; }
.tower-stage { position: relative; border: 1px solid #ffffff18; border-radius: 16px; background: radial-gradient(ellipse at 50% 100%, #384353, #111a29); }
.tower-sky { position: absolute; top: 18px; left: 20px; color: #a8b8cd; font-size: 12px; }
.tower { height: 330px; position: relative; margin-inline: 12px; }
.tower-block { position: absolute; height: 27px; background: var(--floor-color, #eac891); border-radius: 4px; box-shadow: inset 0 2px #ffffff50, inset 0 -4px #0002; }
.tower-block.moving { background: #f7e1ae; outline: 2px solid #fff9; outline-offset: -2px; }
.tower-feedback { min-height: 24px; color: #eac891; text-align: center; font-size: 14px; margin: 14px 0; }
@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr; gap: 24px; }
  .game-copy .app-intro-description { max-width: none; }
  .game-steps { display: none; }
  .game-copy .game-meta { margin: 12px 0; }
  .game-settings { margin: 16px 0 0; }
}
@media (max-width: 480px) {
  .game-card { padding: 16px; border-radius: 16px; }
  .game-card-header { margin-bottom: 14px; }
  .color-board { gap: 6px; }
  .color-tile { border-radius: 7px; }
  .color-stage { min-height: 170px; }
  .pouch-frame { padding: 8px; }
  .pouch-cell { font-size: 18px; }
  .pouch-inventory { gap: 6px; }
  .pouch-piece { min-height: 86px; }
  .piece-preview { grid-template-columns: repeat(var(--pw), 8px); grid-template-rows: repeat(var(--ph), 8px); gap: 2px; }
  .game-actions .game-button { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Keep the board and the pieces within reach of one another. */
.color-board { max-width: 360px; margin-inline: auto; }
.color-endpoints { max-width: 360px; margin-inline: auto; }
@media (min-width: 1100px) {
  .pouch-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 16px; }
  .pouch-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pouch-piece { min-height: 80px; padding-block: 7px; }
  .inventory-title { margin-top: 0; }
}

.color-reference { color: #aebcd0; font-size: 12px; margin-bottom: 12px; }
.color-reference summary { cursor: pointer; padding-block: 8px; }
#reference { display: grid; grid-template-columns: repeat(var(--cols), 1fr); max-width: 160px; gap: 2px; margin-top: 8px; }
#reference i { aspect-ratio: 1; border-radius: 3px; }
.selection-bar > div { display: flex; flex-wrap: wrap; gap: 6px; }