/* ═══════════════════════════════════════════════════════════════════════ palettes.css — playful theme system for Kakuro Kokoro Activate a palette by setting data-palette="" on . Palettes: valentine · ballpit · candy · citrus · bubblegum Tile strategy: large background pattern images (200×200 px, generated by other/gen_backgrounds.py) are tiled on #game. td and .gameCell are transparent so the wallpaper shows through; .playCell stays opaque. The diagonal dividers in clue cells are replaced by the pattern itself. ═══════════════════════════════════════════════════════════════════════ */ /* ── Palette Switcher widget ─────────────────────────────────────────── */ #palette-switcher { position: fixed; top: 0.85rem; right: 1rem; z-index: 9000; display: flex; align-items: center; gap: 0.45rem; background: rgba(0, 0, 0, 0.65); border-radius: 2rem; padding: 0.45rem 0.85rem; backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } .pal-label { font-size: 0.62rem; color: rgba(255, 255, 255, 0.55); font-family: Helvetica Neue, Arial, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; margin-right: 0.1rem; white-space: nowrap; } .pal-chip { display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; background: none; padding: 0; overflow: hidden; width: 26px; height: 26px; flex-shrink: 0; transition: border-color 0.15s, transform 0.15s; } .pal-chip:hover { transform: scale(1.2); border-color: rgba(255, 255, 255, 0.7); } .pal-chip.active { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.4); } .pal-swatch { display: flex; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .pal-swatch span { flex: 1; height: 100%; } /* ════════════════════════════════════════════════════════════════════════ PALETTE 1: Valentine — rose container, heart-tile wallpaper ════════════════════════════════════════════════════════════════════════ */ body[data-palette="valentine"] { background: #3c0016; } body[data-palette="valentine"] #gameContainer { background-color: #880e4f; } body[data-palette="valentine"] #game { background-image: url("/images/bg-valentine.png"); background-repeat: repeat; background-size: 200px 200px; background-color: #560027; border-color: #2b0012; color: #560027; } body[data-palette="valentine"] td { background-color: transparent; } body[data-palette="valentine"] th { background-color: #2b0012; border-color: #560027; color: rgba(255, 192, 210, 0.95); } body[data-palette="valentine"] .gameCell { background-image: none; background-color: transparent; color: transparent; } body[data-palette="valentine"] .gameCell.noline { background-image: none; background-color: transparent; } body[data-palette="valentine"] .playCell { background-color: #fff0f5; color: #880e4f; border-right-color: rgba(233, 30, 99, 0.35); border-bottom-color: rgba(233, 30, 99, 0.35); } body[data-palette="valentine"] .entryPanel { background-color: #fff0f5; color: #880e4f; } body[data-palette="valentine"] .numberCircle { background: #fff0f5; border-color: #e91e63; color: #880e4f; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.9), 0 0 6px rgba(233,30,99,0.55), 0 1px 5px rgba(0,0,0,0.45); } body[data-palette="valentine"] #gameFormDiv { background: #ad1457; border-color: #560027; } body[data-palette="valentine"] #solutionsDiv { color: #ffc0d0; } body[data-palette="valentine"] #gameSolverDiv h4 { background-color: #880e4f !important; color: #ffc0d0; } body[data-palette="valentine"] #gameSolverDiv h4 a { color: #ff80ab !important; } body[data-palette="valentine"] #instructions { background-color: #880e4f !important; color: #ffd6e4; } body[data-palette="valentine"] #instructions a, body[data-palette="valentine"] #instructions h3 { color: #ff80ab; } body[data-palette="valentine"] .markdown { background-color: #880e4f !important; color: #ffd6e4; } body[data-palette="valentine"] .digit-btn { background: #e91e63; color: #fff; box-shadow: 0 3px 8px rgba(233, 30, 99, 0.55); } body[data-palette="valentine"] .digit-btn:hover { background: #c2185b; } body[data-palette="valentine"] .digit-btn:active { background: #ad1457; } body[data-palette="valentine"] .arrow-btn { background: #fff0f5; color: #880e4f; border-color: #f48fb1; } body[data-palette="valentine"] .arrow-btn:hover { background: #fce4ec; border-color: #e91e63; } body[data-palette="valentine"] .clear-btn { background: #fce4ec; color: #c2185b; border-color: #f48fb1; } body[data-palette="valentine"] .clear-btn:hover { background: #f8bbd0; } body[data-palette="valentine"] .flash { background: #ffd6e4 !important; } /* ════════════════════════════════════════════════════════════════════════ PALETTE 2: Ball Pit — cobalt blue, ball-tile wallpaper ════════════════════════════════════════════════════════════════════════ */ body[data-palette="ballpit"] { background: #020d1f; } body[data-palette="ballpit"] #gameContainer { background-color: #1565c0; } body[data-palette="ballpit"] #game { background-image: url("/images/bg-ballpit.png"); background-repeat: repeat; background-size: 200px 200px; background-color: #0a3070; border-color: #04163a; color: #0a3070; } body[data-palette="ballpit"] td { background-color: transparent; } body[data-palette="ballpit"] th { background-color: #04163a; border-color: #0a3070; color: rgba(255, 214, 0, 0.95); } body[data-palette="ballpit"] .gameCell { background-image: none; background-color: transparent; color: transparent; } body[data-palette="ballpit"] .gameCell.noline { background-image: none; background-color: transparent; } body[data-palette="ballpit"] .playCell { background-color: #fffde7; color: #0d47a1; border-right-color: rgba(255, 214, 0, 0.45); border-bottom-color: rgba(255, 214, 0, 0.45); } body[data-palette="ballpit"] .entryPanel { background-color: #fffde7; color: #0d47a1; } body[data-palette="ballpit"] .numberCircle { background: #fffde7; border-color: #ffd600; color: #0d47a1; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.9), 0 0 6px rgba(255,214,0,0.6), 0 1px 5px rgba(0,0,0,0.45); } body[data-palette="ballpit"] #gameFormDiv { background: #1976d2; border-color: #0a3070; } body[data-palette="ballpit"] #solutionsDiv { color: #ffd600; } body[data-palette="ballpit"] #gameSolverDiv h4 { background-color: #1565c0 !important; color: #ffd600; } body[data-palette="ballpit"] #gameSolverDiv h4 a { color: #ffee58 !important; } body[data-palette="ballpit"] #instructions { background-color: #1565c0 !important; color: #e3f2fd; } body[data-palette="ballpit"] #instructions a, body[data-palette="ballpit"] #instructions h3 { color: #ffd600; } body[data-palette="ballpit"] .markdown { background-color: #1565c0 !important; color: #e3f2fd; } body[data-palette="ballpit"] .digit-btn { background: #ffd600; color: #0d47a1; box-shadow: 0 3px 8px rgba(255, 214, 0, 0.5); } body[data-palette="ballpit"] .digit-btn:hover { background: #ffca28; } body[data-palette="ballpit"] .digit-btn:active { background: #f9a825; } body[data-palette="ballpit"] .arrow-btn { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; } body[data-palette="ballpit"] .arrow-btn:hover { background: #bbdefb; border-color: #42a5f5; } body[data-palette="ballpit"] .clear-btn { background: #fffde7; color: #0d47a1; border-color: #ffd600; } body[data-palette="ballpit"] .clear-btn:hover { background: #fff9c4; } body[data-palette="ballpit"] .flash { background: #fff9c4 !important; } /* ════════════════════════════════════════════════════════════════════════ PALETTE 3: Candy — deep purple, candy-stripe tile wallpaper ════════════════════════════════════════════════════════════════════════ */ body[data-palette="candy"] { background: #1a0030; } body[data-palette="candy"] #gameContainer { background-color: #6a1b9a; } body[data-palette="candy"] #game { background-image: url("/images/bg-candy.png"); background-repeat: repeat; background-size: 200px 200px; background-color: #380060; border-color: #1a0030; color: #380060; } body[data-palette="candy"] td { background-color: transparent; } body[data-palette="candy"] th { background-color: #1a0030; border-color: #380060; color: rgba(240, 180, 255, 0.95); } body[data-palette="candy"] .gameCell { background-image: none; background-color: transparent; color: transparent; } body[data-palette="candy"] .gameCell.noline { background-image: none; background-color: transparent; } body[data-palette="candy"] .playCell { background-color: #fce4ec; color: #4a148c; border-right-color: rgba(224, 64, 251, 0.35); border-bottom-color: rgba(224, 64, 251, 0.35); } body[data-palette="candy"] .entryPanel { background-color: #fce4ec; color: #4a148c; } body[data-palette="candy"] .numberCircle { background: #fff; border-color: #e040fb; color: #4a148c; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.9), 0 0 6px rgba(224,64,251,0.55), 0 1px 5px rgba(0,0,0,0.45); } body[data-palette="candy"] #gameFormDiv { background: #7b1fa2; border-color: #380060; } body[data-palette="candy"] #solutionsDiv { color: #e040fb; } body[data-palette="candy"] #gameSolverDiv h4 { background-color: #6a1b9a !important; color: #f0b4ff; } body[data-palette="candy"] #gameSolverDiv h4 a { color: #ea80fc !important; } body[data-palette="candy"] #instructions { background-color: #6a1b9a !important; color: #f3e5f5; } body[data-palette="candy"] #instructions a, body[data-palette="candy"] #instructions h3 { color: #ea80fc; } body[data-palette="candy"] .markdown { background-color: #6a1b9a !important; color: #f3e5f5; } body[data-palette="candy"] .digit-btn { background: #e040fb; color: #fff; box-shadow: 0 3px 8px rgba(224, 64, 251, 0.55); } body[data-palette="candy"] .digit-btn:hover { background: #d500f9; } body[data-palette="candy"] .digit-btn:active { background: #aa00ff; } body[data-palette="candy"] .arrow-btn { background: #f3e5f5; color: #4a148c; border-color: #ce93d8; } body[data-palette="candy"] .arrow-btn:hover { background: #e1bee7; border-color: #ab47bc; } body[data-palette="candy"] .clear-btn { background: #fce4ec; color: #4a148c; border-color: #f48fb1; } body[data-palette="candy"] .clear-btn:hover { background: #f8bbd0; } body[data-palette="candy"] .flash { background: #fce4ec !important; } /* ════════════════════════════════════════════════════════════════════════ PALETTE 4: Citrus — burnt orange, star-tile wallpaper ════════════════════════════════════════════════════════════════════════ */ body[data-palette="citrus"] { background: #3e0c00; } body[data-palette="citrus"] #gameContainer { background-color: #bf360c; } body[data-palette="citrus"] #game { background-image: url("/images/bg-citrus.png"); background-repeat: repeat; background-size: 200px 200px; background-color: #6d1500; border-color: #3e0c00; color: #6d1500; } body[data-palette="citrus"] td { background-color: transparent; } body[data-palette="citrus"] th { background-color: #3e0c00; border-color: #6d1500; color: rgba(255, 220, 90, 0.95); } body[data-palette="citrus"] .gameCell { background-image: none; background-color: transparent; color: transparent; } body[data-palette="citrus"] .gameCell.noline { background-image: none; background-color: transparent; } body[data-palette="citrus"] .playCell { background-color: #fff8e1; color: #bf360c; border-right-color: rgba(216, 67, 0, 0.35); border-bottom-color: rgba(216, 67, 0, 0.35); } body[data-palette="citrus"] .entryPanel { background-color: #fff8e1; color: #bf360c; } body[data-palette="citrus"] .numberCircle { background: #fff8e1; border-color: #ffab00; color: #bf360c; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.9), 0 0 6px rgba(255,171,0,0.6), 0 1px 5px rgba(0,0,0,0.45); } body[data-palette="citrus"] #gameFormDiv { background: #d84300; border-color: #6d1500; } body[data-palette="citrus"] #solutionsDiv { color: #ffcc02; } body[data-palette="citrus"] #gameSolverDiv h4 { background-color: #bf360c !important; color: #ffe082; } body[data-palette="citrus"] #gameSolverDiv h4 a { color: #ffee58 !important; } body[data-palette="citrus"] #instructions { background-color: #bf360c !important; color: #fff8e1; } body[data-palette="citrus"] #instructions a, body[data-palette="citrus"] #instructions h3 { color: #ffee58; } body[data-palette="citrus"] .markdown { background-color: #bf360c !important; color: #fff8e1; } body[data-palette="citrus"] .digit-btn { background: #ffab00; color: #4e1200; box-shadow: 0 3px 8px rgba(255, 171, 0, 0.55); } body[data-palette="citrus"] .digit-btn:hover { background: #ff8f00; } body[data-palette="citrus"] .digit-btn:active { background: #e65100; color: #fff; } body[data-palette="citrus"] .arrow-btn { background: #fff8e1; color: #bf360c; border-color: #ffcc80; } body[data-palette="citrus"] .arrow-btn:hover { background: #fff3e0; border-color: #ffab00; } body[data-palette="citrus"] .clear-btn { background: #fff3e0; color: #bf360c; border-color: #ffcc80; } body[data-palette="citrus"] .clear-btn:hover { background: #ffe0b2; } body[data-palette="citrus"] .flash { background: #fff9c4 !important; } /* ════════════════════════════════════════════════════════════════════════ PALETTE 5: Bubblegum — teal, bubble-tile wallpaper ════════════════════════════════════════════════════════════════════════ */ body[data-palette="bubblegum"] { background: #001518; } body[data-palette="bubblegum"] #gameContainer { background-color: #006064; } body[data-palette="bubblegum"] #game { background-image: url("/images/bg-bubblegum.png"); background-repeat: repeat; background-size: 200px 200px; background-color: #003538; border-color: #001518; color: #003538; } body[data-palette="bubblegum"] td { background-color: transparent; } body[data-palette="bubblegum"] th { background-color: #001518; border-color: #003538; color: rgba(128, 255, 244, 0.95); } body[data-palette="bubblegum"] .gameCell { background-image: none; background-color: transparent; color: transparent; } body[data-palette="bubblegum"] .gameCell.noline { background-image: none; background-color: transparent; } body[data-palette="bubblegum"] .playCell { background-color: #e0f7fa; color: #006064; border-right-color: rgba(255, 128, 171, 0.4); border-bottom-color: rgba(255, 128, 171, 0.4); } body[data-palette="bubblegum"] .entryPanel { background-color: #e0f7fa; color: #006064; } body[data-palette="bubblegum"] .numberCircle { background: #e0f7fa; border-color: #ff80ab; color: #006064; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.9), 0 0 6px rgba(255,128,171,0.55), 0 1px 5px rgba(0,0,0,0.45); } body[data-palette="bubblegum"] #gameFormDiv { background: #00838f; border-color: #003538; } body[data-palette="bubblegum"] #solutionsDiv { color: #80deea; } body[data-palette="bubblegum"] #gameSolverDiv h4 { background-color: #006064 !important; color: #80deea; } body[data-palette="bubblegum"] #gameSolverDiv h4 a { color: #ff80ab !important; } body[data-palette="bubblegum"] #instructions { background-color: #006064 !important; color: #e0f7fa; } body[data-palette="bubblegum"] #instructions a, body[data-palette="bubblegum"] #instructions h3 { color: #ff80ab; } body[data-palette="bubblegum"] .markdown { background-color: #006064 !important; color: #e0f7fa; } body[data-palette="bubblegum"] .digit-btn { background: #ff80ab; color: #fff; box-shadow: 0 3px 8px rgba(255, 128, 171, 0.55); } body[data-palette="bubblegum"] .digit-btn:hover { background: #f06292; } body[data-palette="bubblegum"] .digit-btn:active { background: #e91e63; } body[data-palette="bubblegum"] .arrow-btn { background: #e0f7fa; color: #006064; border-color: #80deea; } body[data-palette="bubblegum"] .arrow-btn:hover { background: #b2ebf2; border-color: #4dd0e1; } body[data-palette="bubblegum"] .clear-btn { background: #fce4ec; color: #f06292; border-color: #ff80ab; } body[data-palette="bubblegum"] .clear-btn:hover { background: #f8bbd0; } body[data-palette="bubblegum"] .flash { background: #b2ebf2 !important; } /* ════════════════════════════════════════════════════════════════════════ PALETTE 6: Classic Mono — black & white, no wallpaper ════════════════════════════════════════════════════════════════════════ */ body[data-palette="classic-mono"] { background: #1a1a1a; } body[data-palette="classic-mono"] #gameContainer { background-color: #333; } body[data-palette="classic-mono"] #game { background-image: none; background-color: #111; border-color: #000; color: #111; } body[data-palette="classic-mono"] td { background-color: transparent; } body[data-palette="classic-mono"] th { background-color: #000; border-color: #111; color: rgba(255, 255, 255, 0.9); } body[data-palette="classic-mono"] .gameCell { background-image: none; background-color: transparent; color: transparent; } body[data-palette="classic-mono"] .gameCell.noline { background-image: none; background-color: transparent; } body[data-palette="classic-mono"] .playCell { background-color: #fff; color: #000; border-right-color: rgba(0, 0, 0, 0.3); border-bottom-color: rgba(0, 0, 0, 0.3); } body[data-palette="classic-mono"] .entryPanel { background-color: #fff; color: #000; } body[data-palette="classic-mono"] .numberCircle { background: #fff; border-color: #000; color: #000; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.9), 0 0 4px rgba(0,0,0,0.4), 0 1px 5px rgba(0,0,0,0.45); } body[data-palette="classic-mono"] #gameFormDiv { background: #444; border-color: #111; } body[data-palette="classic-mono"] #solutionsDiv { color: #ccc; } body[data-palette="classic-mono"] #gameSolverDiv h4 { background-color: #333 !important; color: #eee; } body[data-palette="classic-mono"] #gameSolverDiv h4 a { color: #aaa !important; } body[data-palette="classic-mono"] #instructions { background-color: #333 !important; color: #eee; } body[data-palette="classic-mono"] #instructions a, body[data-palette="classic-mono"] #instructions h3 { color: #bbb; } body[data-palette="classic-mono"] .markdown { background-color: #333 !important; color: #eee; } body[data-palette="classic-mono"] .digit-btn { background: #111; color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); } body[data-palette="classic-mono"] .digit-btn:hover { background: #333; } body[data-palette="classic-mono"] .digit-btn:active { background: #000; } body[data-palette="classic-mono"] .arrow-btn { background: #fff; color: #000; border-color: #999; } body[data-palette="classic-mono"] .arrow-btn:hover { background: #eee; border-color: #555; } body[data-palette="classic-mono"] .clear-btn { background: #f5f5f5; color: #333; border-color: #999; } body[data-palette="classic-mono"] .clear-btn:hover { background: #e0e0e0; } body[data-palette="classic-mono"] .flash { background: #e0e0e0 !important; } /* ════════════════════════════════════════════════════════════════════════ CELL INTERACTION STATES Applied by game_v2.js — focus, run highlight, conflict, overflow, solved Uses inset box-shadow so states work across all palette backgrounds. ════════════════════════════════════════════════════════════════════════ */ .playCell { transition: background-color .12s ease, border-radius .12s ease, box-shadow .10s ease; } .playCell.selected { box-shadow: inset 0 0 0 2.5px #f59e0b; border-radius: 4px; z-index: 5; } .playCell.selected .entryPanel { background-color: #fffde7; } .playCell.run-active { filter: brightness(0.88); } .playCell.conflict { box-shadow: inset 0 0 0 2.5px #dc2626; border-radius: 0; animation: cell-shake .26s ease; } .playCell.conflict .entryPanel { background-color: #fde8e8; color: #dc2626; } .playCell.overflow { box-shadow: inset 0 0 0 2.5px #d97706; } .playCell.overflow .entryPanel { background-color: #fef9e7; color: #b45309; } .playCell.run-complete { box-shadow: inset 0 0 0 2px #f59e0b, 0 0 10px rgba(245,158,11,0.45); border-radius: 6px; animation: cell-complete .35s ease; } .playCell.run-complete .entryPanel { background-color: #fffbeb; color: #92400e; } @keyframes cell-shake { 0%,100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } @keyframes cell-complete { 0% { transform: scale(1.07); box-shadow: inset 0 0 0 2px #f59e0b, 0 0 18px rgba(245,158,11,0.7); } 60% { transform: scale(0.97); } 100% { transform: scale(1); } }