/* SIDEQUEST · the four daily puzzle rooms, dialogs and feedback. Loaded after site.css. */
.game-page{max-width:720px;margin:28px auto 70px}
.game-breadcrumb{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;font-size:12px;color:var(--muted)}
.game-breadcrumb a{font-size:13px;font-weight:650;color:var(--ink);padding:8px 14px 8px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);transition:transform .2s var(--spring),background .2s}
.game-breadcrumb a:hover{transform:translateX(-3px)}
.game-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.game-heading h1{font-size:52px;line-height:1.05;font-weight:800}
.game-heading .game-icon{width:61px;height:61px;display:grid;place-items:center;border-radius:18px;background:var(--green);font:700 36px var(--display);color:#26372c;transform:rotate(6deg);box-shadow:0 4px 0 #0000001a}
.game-heading .game-icon.fivefold{background:var(--yellow)}.game-heading .game-icon.sumkind{background:var(--blue)}.game-heading .game-icon.lights{background:#f1c4ae}
.game-subtitle{color:var(--muted);font-size:15px;line-height:1.6;max-width:520px}
.game-tools{display:flex;align-items:center;justify-content:space-between;margin:23px 0 22px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:12px;font-size:12px}
.game-tools-right{display:flex;gap:16px;align-items:center}.game-tools .text-button{font-size:12px}
.puzzle-tag{font-weight:650;display:flex;align-items:center;gap:7px}
.game-instruction{text-align:center;font-size:14px;margin:0 0 18px}
.group-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.word-tile{min-width:0;background:var(--soft);border:2px solid transparent;border-radius:10px;min-height:77px;padding:8px 3px;font-size:14px;font-weight:750;letter-spacing:-.02em;overflow-wrap:anywhere;transition:transform .18s var(--spring),background .15s,box-shadow .18s}
.word-tile:hover{border-color:var(--line);transform:translateY(-2px)}
.word-tile:active{transform:scale(.95)}
.word-tile.selected{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-3px);box-shadow:0 4px 0 var(--accent)}
.solved-group{grid-column:1/-1;text-align:center;border-radius:10px;padding:17px 8px;color:#25322b;min-height:77px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.solved-group strong{font-size:14px;text-transform:uppercase;letter-spacing:.06em}.solved-group span{font-size:13px;line-height:1.5}
.g0{background:var(--yellow)}.g1{background:var(--green)}.g2{background:var(--blue)}.g3{background:var(--purple)}
.reveal{animation:reveal .55s var(--spring) both}
.mistakes{display:flex;justify-content:center;gap:8px;align-items:center;margin:24px 0;font-size:13px;color:var(--muted)}
.life{display:inline-block;height:12px;width:12px;border-radius:50%;background:var(--ink);transition:transform .3s var(--spring),background .3s}.life.lost{background:var(--line);transform:scale(.7)}
.game-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.game-footnote{font-size:12px;color:var(--muted);text-align:center;margin-top:24px}
.difficulty{display:flex;justify-content:center;gap:7px;margin-top:26px;align-items:center;font-size:11px;color:var(--muted)}.difficulty i{width:13px;height:13px;border-radius:3px}
.word-board{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:305px;margin:0 auto 24px}
.letter-tile{aspect-ratio:1;border:2px solid var(--line);border-radius:6px;display:grid;place-items:center;font:700 30px var(--display);perspective:500px}
.letter-tile.filled{border-color:var(--muted);animation:pop .14s ease}
.letter-tile.s0,.key.s0{background:#747c73;color:white;border-color:#747c73}.letter-tile.s1,.key.s1{background:#ae852c;color:white;border-color:#ae852c}.letter-tile.s2,.key.s2{background:#507c56;color:white;border-color:#507c56}
.letter-tile.flip{animation:flip .48s ease both;animation-delay:calc(var(--i)*.18s)}
.keyboard{max-width:505px;margin:auto;display:flex;flex-direction:column;gap:7px}.key-row{display:flex;justify-content:center;gap:5px}
.key{border-radius:7px;background:var(--soft);font-size:13px;font-weight:700;min-width:0;flex:1;height:52px;padding:0 3px;max-width:45px}.key:active:not(:disabled){transform:scale(.92)}
.key.wide{flex:1.6;max-width:68px;font-size:11px}
.hard-toggle{display:flex;gap:7px;align-items:center;cursor:pointer;font-size:12px}.hard-toggle input{accent-color:var(--accent);width:15px;height:15px}
.result{margin:25px 0;padding:26px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;animation:reveal .45s var(--spring)}
.result h2{font-size:30px;margin-bottom:7px}.result p{font-size:14px;color:var(--muted);margin-bottom:17px}.result .game-buttons{margin-top:12px}
.result-medal{font-size:34px;color:var(--accent);margin-bottom:5px;animation:spin-in .7s var(--spring)}
.result small{display:block;margin-top:15px;color:var(--muted);line-height:1.6}
.sudoku-wrap{max-width:398px;margin:auto}
.sudoku-board{display:grid;grid-template-columns:repeat(6,1fr);border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--line);gap:1px}
.sudoku-cell{aspect-ratio:1;min-width:0;background:var(--surface);font-size:26px;font-family:var(--display);color:#3879aa;position:relative;display:grid;place-items:center;border-radius:0}
.sudoku-cell.fixed{font-weight:750;color:var(--ink)}.sudoku-cell.box-right{border-right:2px solid var(--ink)}.sudoku-cell.box-bottom{border-bottom:2px solid var(--ink)}
.sudoku-cell.related{background:var(--soft)}.sudoku-cell.selected{background:#d5e4ee;box-shadow:inset 0 0 0 2px #3b6f8e;color:#24435b}.sudoku-cell.same{background:#e6e8c8;color:#26372c}.sudoku-cell.conflict{color:#c83f31;background:#f8ddd5}
.cell-notes{display:grid;grid-template-columns:repeat(3,1fr);width:85%;height:80%;font:500 10px var(--body);color:var(--muted)}.cell-notes span{display:grid;place-items:center}
.number-pad{display:flex;gap:7px;margin:18px 0}.number-pad button{flex:1;border-radius:10px;background:var(--soft);height:50px;font:650 23px var(--display)}.number-pad button:active{transform:scale(.92)}
.logic-tools{display:flex;justify-content:center;gap:9px;margin:12px 0 20px;flex-wrap:wrap}.logic-tools .active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.logic-status{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:0 auto 14px;max-width:398px}
.lights-board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:375px;margin:20px auto;padding:22px;background:#293c34;border:6px solid #354b40;border-radius:26px;box-shadow:0 6px 0 #1c2e25}
.light-cell{aspect-ratio:1;border-radius:50%;background:#43594a;border:1px solid #526854;box-shadow:inset 0 3px 5px #0003,0 2px 0 #1b2b23;transition:background .16s,box-shadow .16s,transform .16s var(--spring);position:relative}
.light-cell:active:not(:disabled){transform:scale(.9)}
.light-cell.on{background:#f8d16c;border-color:#ffe4a1;box-shadow:0 0 18px #f8d16c55,inset 0 -3px 0 #d5aa47,0 2px 0 #1b2b23}
.light-cell:after{content:'';position:absolute;inset:36%;border-radius:50%;border:1px solid #ffffff20}.light-cell.on:after{background:#fff1b7;border-color:transparent}
.light-cell.hint{outline:3px dashed var(--accent);outline-offset:4px}
.light-legend{display:flex;justify-content:center;gap:18px;font-size:12px;color:var(--muted);margin-bottom:22px}.light-legend span{display:flex;align-items:center;gap:6px}.light-legend i{width:9px;height:9px;border-radius:50%;background:#43594a}.light-legend span:first-child i{background:#e9bd50}
.shake{animation:shake .3s ease}
.hint-copy{text-align:center;font-size:12px;color:var(--muted);min-height:20px;margin-top:12px}

/* Dialogs, archive, stats, toast */
dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:35px;max-width:520px;width:calc(100% - 32px);max-height:85dvh;box-shadow:0 25px 100px #0003}
dialog[open]{animation:dialog-in .35s var(--spring)}
dialog::backdrop{background:#14201b70;backdrop-filter:blur(5px)}
dialog h2{font-size:33px;margin:0 28px 12px 0}dialog h3{font-size:19px;margin:22px 0 8px}
dialog p,dialog li{font-size:14px;line-height:1.75;color:var(--muted)}dialog ul,dialog ol{padding-left:21px}dialog li{margin-bottom:9px}
.dialog-close{position:absolute;right:15px;top:15px;font-size:26px}
.dialog-intro{margin-bottom:20px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.stat-block{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 5px}.stat-block strong{font:700 30px var(--display);display:block}.stat-block small{font-size:11px;color:var(--muted)}
.stat-game{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}
.distribution{display:flex;flex-direction:column;gap:5px;margin:15px 0}.distribution-row{display:flex;align-items:center;gap:10px;font-size:12px}.distribution-row b{display:block;background:#608365;color:#fff;min-width:24px;padding:3px 8px;border-radius:4px;text-align:right}
.archive-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.archive-day{background:var(--surface);border:1px solid var(--line);padding:12px 3px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:6px}.archive-day strong{font:700 22px var(--display)}.archive-day small{font-size:10px;color:var(--muted)}
.archive-day:hover{border-color:var(--accent);transform:translateY(-2px)}.archive-day.done{border-color:#75946a;background:color-mix(in srgb,var(--green) 30%,var(--surface))}
.archive-tabs{display:flex;gap:5px;flex-wrap:wrap}.archive-tabs button{background:var(--soft);padding:9px 12px;border-radius:999px;font-size:12px;font-weight:600}.archive-tabs button.active{background:var(--ink);color:var(--paper)}
.share-text{width:100%;min-height:180px;padding:15px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;resize:vertical;font:14px/1.6 ui-monospace,monospace}
.rules-sample{display:flex;gap:5px;margin:15px 0}.rules-sample span{width:38px;height:38px;background:var(--green);color:#25322b;display:grid;place-items:center;font-weight:750;border-radius:6px}
.storage-note{padding:10px;background:var(--yellow);color:#25322b;text-align:center;font-size:12px;border-radius:10px;margin-top:12px}
#toast{position:fixed;z-index:100;bottom:calc(28px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px) scale(.96);max-width:calc(100% - 32px);padding:13px 22px;border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:var(--shadow);font-size:14px;font-weight:550;opacity:0;pointer-events:none;transition:opacity .2s,transform .35s var(--spring);text-align:center;width:max-content}
#toast.visible{opacity:1;transform:translate(-50%,0) scale(1)}
.is-deep #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
.noscript{text-align:center;padding:40px}
.confetti{position:fixed;pointer-events:none;z-index:90;width:8px;height:13px;top:20%;border-radius:2px;animation:confetti 1.6s ease-out both}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@keyframes reveal{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes flip{0%{transform:rotateX(0);background:var(--surface);color:var(--ink);border-color:var(--line)}49%{background:var(--surface);color:var(--ink);border-color:var(--line)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),65vh) rotate(650deg);opacity:0}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes spin-in{from{transform:rotate(-180deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:650px){
  .game-page{margin-top:18px;margin-bottom:42px}.game-breadcrumb{margin-bottom:20px;font-size:11px}
  .game-heading h1{font-size:40px}.game-heading .game-icon{width:52px;height:52px;font-size:30px}
  .game-subtitle{font-size:14px}.game-tools{margin:18px 0;padding:10px 0;font-size:11px}.game-tools-right{gap:12px}
  .word-tile{min-height:70px;font-size:12px;padding:5px 2px}.group-grid{gap:6px}
  .solved-group{min-height:70px;padding:13px 6px}.solved-group strong{font-size:12px}.solved-group span{font-size:12px}
  .game-instruction{font-size:13px}.word-board{width:min(285px,90%);gap:5px;margin-bottom:20px}.letter-tile{font-size:29px}
  .key{height:50px;font-size:12px}.key-row{gap:4px}.keyboard{margin-left:-10px;margin-right:-10px}.key.wide{font-size:10px}
  .game-buttons{gap:8px}.game-buttons .button{padding:11px 15px;font-size:13px}
  .sudoku-cell{font-size:25px}.lights-board{gap:10px;padding:19px}
  .result{padding:22px 14px}.result h2{font-size:26px}
  dialog{padding:28px 22px}dialog h2{font-size:29px}.archive-list{gap:6px}
  .hint-copy{font-size:11px}.game-tools .text-button,.hard-toggle{font-size:11px}.button.small{font-size:12px;padding:8px 12px}
}
@media(max-width:370px){.word-tile{font-size:10px}}