/* Three original grid implementations; no external runtime or image assets. */
.tile-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 440px; margin: 20px auto; padding: 10px; border-radius: 16px; border: 1px solid #789cac; background: #12232e; touch-action: none; }
.tile-board:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tile-2048 { display: flex; justify-content: center; align-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid #54717c; border-radius: 10px; background: #182e3b; color: #f0f7fa; font-size: clamp(1rem, 5vw, 2rem); font-weight: 800; font-family: var(--font-mono); }
.tile-2048[data-value="0"] { color: #b0c4ce; background: #101c25; }
.tile-2048[data-value="2"], .tile-2048[data-value="4"] { background: #214b58; }
.tile-2048[data-value="8"], .tile-2048[data-value="16"] { background: #264e42; }
.tile-2048[data-value="32"], .tile-2048[data-value="64"] { background: #65401b; }
.tile-2048[data-value="128"], .tile-2048[data-value="256"] { background: #604166; }
.tile-2048[data-value="512"], .tile-2048[data-value="1024"], .tile-2048[data-value="2048"] { background: #663749; }
.grid-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 12px 0; }
.grid-metrics div { text-align: center; }
.grid-metrics dt { color: var(--color-text-muted); font-size: .85rem; }
.grid-metrics dd { font: 750 1.4rem var(--font-mono); color: #e9f8fc; }
.direction-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 280px; margin: 16px auto; }
.direction-pad button:first-child { grid-column: 2; }
.direction-pad button:nth-child(2) { grid-column: 1; }
.games-main .direction-pad button { font-size: 1.5rem; padding: 8px; min-width: 0; }
.logic-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px; margin: 12px auto; }
.nonogram-table { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 340px; max-width: 580px; margin: auto; color: #eaf6fa; }
.nonogram-table th { padding: 4px; font: 700 .8rem var(--font-mono); background: #1c3543; border: 1px solid #607c88; text-align: center; }
.nonogram-table th:first-child { width: 70px; }
.nonogram-table td { padding: 0; border: 1px solid #607c88; }
.nonogram-table .clue-complete { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: #21483b; }
.nonogram-column-clue span { display: block; line-height: 1.4; }
.games-main .logic-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 0; box-shadow: none; border: 1px solid #607c88; background: #142631; color: #f4faff; font: 750 clamp(.85rem, 3vw, 1.1rem) var(--font-mono); line-height: 1; touch-action: manipulation; }
.games-main .nonogram-cell { border: 0; }
.games-main .nonogram-cell--filled { background: #8de7ed; color: #05232b; }
.games-main .logic-cell:focus-visible { outline: 3px solid #fff; outline-offset: -3px; z-index: 1; position: relative; }
.games-main .mine-cell--open { background: #294856; color: #fff; }
.games-main .mine-cell--mine { background: #7b3040; color: #fff; }
.mine-grid { display: grid; width: 100%; min-width: 300px; max-width: 500px; margin: auto; border: 2px solid #93becd; }
.mine-row { display: grid; grid-template-columns: repeat(var(--grid-size, 8), minmax(0, 1fr)); }
.games-main #nonogram-tools [aria-pressed="true"], .games-main #mine-flag-mode[aria-pressed="true"] { color: #06171e; background: var(--color-focus); }
.grid-help { font-size: .85rem; color: var(--color-text-muted); margin: 12px 0; }
@media (max-width: 540px) { .tile-board { gap: 6px; padding: 8px; } .nonogram-table th:first-child { width: 56px; } .mine-grid { min-width: 280px; } }