/* Toolbox games use native controls, with no external assets or game services. */
.tools-subtitle { color: var(--text-2); font-size: .85rem; margin-top: .7rem; }
.tools-search { max-width: 580px; margin-bottom: 1.5rem; }
.tools-category-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.tools-categories { display: flex; gap: .5rem; flex-wrap: wrap; }
.tools-categories button { display: flex; align-items: center; gap: .5rem; background: #ffffff03; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: .8rem; padding: .5rem 1rem; }
.tools-categories button.is-active { color: var(--text-1); background: #6c63ff20; border-color: #6c63ff80; }
.tools-categories button > span { border-radius: 4px; background: #ffffff0a; padding: 0 .35rem; font-size: .65rem; color: #b8b0ff; }
#tools-result-status { font-size: .75rem; color: var(--text-2); }
.tools-empty { grid-column: 1 / -1; text-align: center; color: var(--text-2); padding: 3rem 1rem; }
.game-card { border-color: #83d9bd26; background: linear-gradient(135deg, #83d9bd08, var(--glass-bg)); padding-top: 2.1rem; }
.game-card:hover { border-color: #83d9bd60; }
.game-card-badge { position: absolute !important; top: 12px; right: 14px; color: #a7d5c9; font-size: .55rem; letter-spacing: 1px; }
#tool-modal .modal:has(.local-game) { width: min(820px, 95vw); max-width: 820px; padding: 1.7rem; background: #11151f; border-color: #ffffff16; }
.local-game { --game-accent: #a99cff; --game-muted: #a0a6bb; color: #edf0fa; }
.local-game [hidden] { display: none !important; }
.local-game :is(button, select, [tabindex]):focus-visible, .tools-categories button:focus-visible { outline: 2px solid #b7abff; outline-offset: 3px; }
.game-eyebrow { font-family: var(--font-mono); color: var(--game-accent); font-size: .6rem; letter-spacing: 1.7px; margin-bottom: .5rem; }
.local-game h3 { font-size: 1.7rem; font-weight: 650; letter-spacing: 1px; }
.game-subtitle { font-size: .8rem; color: var(--game-muted); margin-top: .4rem; }
.game-topbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 1.4rem 0 1.2rem; }
.game-stats { display: flex; gap: .65rem; min-width: 0; }
.game-stats > div { min-width: 86px; background: #ffffff05; border: 1px solid #ffffff0c; border-radius: 10px; padding: .6rem .9rem; }
.game-stats span { display: block; color: var(--game-muted); font-size: .62rem; margin-bottom: .15rem; }
.game-stats strong { display: block; font-family: var(--font-mono); font-size: 1.25rem; line-height: 1.4; overflow-wrap: anywhere; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 175px; gap: 1.7rem; align-items: start; }
.game-stage { min-width: 0; }
.game-board-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.game-guide { color: var(--game-muted); font-size: .74rem; line-height: 1.85; }
.game-guide h4 { color: #daddf0; font-weight: 500; font-size: .82rem; margin-bottom: .5rem; }
.game-guide p + p { margin-top: .7rem; }
.game-guide-note { display: block; font-size: .65rem; color: #9a9eb1; margin-top: .8rem; }
.game-direction-pad { display: grid; grid-template-columns: repeat(3, 40px); gap: 5px; width: max-content; margin: 1rem auto; }
.game-direction-pad button { display: grid; place-items: center; width: 40px; height: 37px; border-radius: 8px; background: #ffffff07; border: 1px solid #ffffff16; color: #dad8f5; font-size: 1rem; touch-action: manipulation; }
.game-direction-pad button:hover { background: #a99cff24; border-color: #a99cff55; }
.game-direction-pad button:active { background: #a99cff40; }
.game-direction-pad button:first-child { grid-column: 2; }
.game-direction-pad button:nth-child(2) { grid-column: 1; }
.game-secondary { display: block; background: transparent; border: 1px solid #ffffff16; border-radius: 8px; padding: .5rem .8rem; color: #dad8f5; font-size: .72rem; margin: 0 auto; }
.local-game button:disabled { opacity: .4; cursor: not-allowed; }
.game-speed-label { display: block; font-size: .7rem; margin: .8rem 0 .35rem; }
.game-guide select { width: 100%; padding: .6rem .45rem; color-scheme: dark; background: #1c2130; border: 1px solid #ffffff16; border-radius: 8px; font-size: .7rem; }
.game-start, .game-flag-toggle { margin: .8rem 0; justify-content: center; width: 100%; border-radius: 8px; }
.game-flag-toggle { font-size: .72rem; padding: .55rem; }
.game-flag-toggle[aria-pressed="true"] { color: #ffe1a4; background: #ffd07716; border-color: #ffd07780; }
.game-status { color: #c4c2e2; font-size: .75rem; line-height: 1.8; min-height: 2.5em; margin-top: 1.2rem; overflow-wrap: anywhere; }
.game-local-note { color: #9499af; border-top: 1px solid #ffffff0c; font-size: .6rem; margin-top: .7rem; padding-top: 1rem; letter-spacing: .4px; }
/* 2048 */
.board-2048 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 10px; border-radius: 14px; background: #252538; border: 1px solid #ffffff0a; touch-action: none; user-select: none; }
.tile-2048 { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 9px; background: #ffffff06; font-family: var(--font-mono); font-size: clamp(1.15rem, 3.5vw, 1.9rem); font-weight: 700; color: #f7f3ff; }
.tile-2048[data-tone="1"] { background: #494365; color: #eee8ff; }
.tile-2048[data-tone="2"] { background: #5a4b7c; }
.tile-2048[data-tone="3"] { background: #71559a; }
.tile-2048[data-tone="4"] { background: #8c60ae; }
.tile-2048[data-tone="5"] { background: #ae6ca4; }
.tile-2048[data-tone="6"] { background: #c1758d; }
.tile-2048[data-tone="7"] { background: #d88d87; color: #291d31; }
.tile-2048[data-tone="8"] { background: #d7a57f; color: #291d31; }
.tile-2048[data-tone="9"] { background: #e4bb7d; color: #291d31; }
.tile-2048[data-tone="10"] { background: #edcf87; color: #291d31; font-size: 1.35rem; }
.tile-2048[data-tone="11"], .tile-2048[data-tone="12"] { background: #f7e1a4; color: #291d31; font-size: 1.35rem; box-shadow: inset 0 0 20px #fff4; }
.game-overlay { position: absolute; inset: 0; border-radius: 14px; background: #11151fe8; backdrop-filter: blur(5px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .7rem; padding: 1.3rem; text-align: center; }
.game-overlay strong { font-size: 1.2rem; color: #e5dcff; }
.game-overlay p { font-size: .75rem; color: var(--game-muted); }
.game-overlay .btn { justify-content: center; min-width: 130px; }
/* Snake */
.snake-board { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); aspect-ratio: 1; padding: 7px; gap: 1px; max-width: 420px; margin: 0 auto; border-radius: 13px; background: #121f23; border: 1px solid #8bd4b725; touch-action: none; user-select: none; }
.snake-cell { border-radius: 3px; background: #ffffff02; min-width: 0; aspect-ratio: 1; }
.snake-cell.is-body { background: #6eaa94; border-radius: 4px; }
.snake-cell.is-head { background: #b0e7c9; box-shadow: 0 0 9px #b0e7c930; border-radius: 4px; }
.snake-cell.is-food { background: #f2b495; border-radius: 50%; box-shadow: 0 0 10px #f2b49520; transform: scale(.8); }
.snake-board[data-state="paused"] { opacity: .55; }
.snake-board[data-state="over"] { border-color: #ff879d70; }
/* Minesweeper */
.mines-board { display: grid; grid-template-columns: repeat(var(--mine-size), minmax(0, 1fr)); gap: 4px; padding: 8px; border: 1px solid #ffffff0c; border-radius: 12px; background: #1a2030; max-width: 420px; margin: 0 auto; user-select: none; }
.mine-row { display: contents; }
.mine-cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid #ffffff14; border-radius: 4px; background: #30394e; color: #dce7ff; box-shadow: inset 0 1px #ffffff0b; font-family: var(--font-mono); font-size: .95rem; font-weight: 600; padding: 0; touch-action: manipulation; }
.mine-cell:hover:not(.is-open) { background: #424963; }
.mine-cell.is-open { background: #ffffff02; border-color: #ffffff04; box-shadow: none; cursor: default; }
.mine-cell.is-flagged { color: #ffce80; }
.mine-cell.is-mine { background: #ff879d20; color: #ffb1be; }
.mine-cell.is-exploded { background: #b64a66; color: white; }
.mine-cell.is-wrong { background: #ffce8015; color: #ffce80; }
.mine-cell[data-number="1"] { color: #a8baff; }
.mine-cell[data-number="2"] { color: #9fe3bc; }
.mine-cell[data-number="3"] { color: #ffaba5; }
.mine-cell[data-number="4"] { color: #d1a8ff; }
.mine-cell[data-number="5"], .mine-cell[data-number="6"], .mine-cell[data-number="7"], .mine-cell[data-number="8"] { color: #f3d18e; }
@media (max-width: 640px) {
    .tools-category-row { align-items: flex-start; flex-direction: column; gap: .7rem; }
    .tools-categories button { padding: .45rem .8rem; font-size: .74rem; }
    #tool-modal .modal:has(.local-game) { padding: 1rem; }
    .local-game h3 { font-size: 1.4rem; }
    .game-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .game-topbar { margin-top: 1rem; }
    .game-topbar > .btn { font-size: .7rem; padding: .5rem .75rem; }
    .game-stats { gap: .4rem; }
    .game-stats > div { min-width: 68px; padding: .45rem .6rem; }
    .game-stats strong { font-size: 1rem; }
    .game-stats span { font-size: .55rem; }
    .game-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr); align-items: start; gap: .5rem .8rem; }
    .game-guide h4, .game-guide > p, .game-guide-note { grid-column: 1 / -1; }
    .game-guide > p + p { margin-top: 0; }
    .game-guide > .game-direction-pad { margin: .2rem auto; grid-column: 2; grid-row: span 2; }
    .game-guide .game-secondary { grid-column: 1; grid-row: 4; margin: auto 0; width: 100%; }
    .game-guide .game-guide-note { margin-top: .2rem; }
    .game-speed-label { margin: .3rem 0 0; grid-column: 1 / -1; }
    .game-start, .game-flag-toggle { margin: 0; }
    .game-direction-pad { grid-template-columns: repeat(3, 38px); }
    .game-direction-pad button { width: 38px; height: 36px; }
    .board-2048 { gap: 7px; padding: 8px; }
    .tile-2048 { font-size: 1.4rem; border-radius: 7px; }
    .tile-2048[data-tone="10"], .tile-2048[data-tone="11"], .tile-2048[data-tone="12"] { font-size: 1rem; }
    .mines-board { gap: 3px; padding: 6px; }
    .mine-cell { font-size: .8rem; }
    .game-status { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .game-card:hover .tool-icon { animation: none; } }