/* Tunie and Runie: Puzzles and games. Same palette as site.css (ink, Desk Red, warm paper). No pink in the interface. */
.game-tiles{list-style:none;display:grid;gap:var(--s3);max-width:1000px;margin:var(--s5) auto 0;grid-template-columns:1fr}
@media(min-width:700px){.game-tiles{grid-template-columns:repeat(3,1fr)}}
.game-tile{display:flex;flex-direction:column;height:100%;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .2s,box-shadow .2s}
.game-tile:hover{transform:translateY(-4px);box-shadow:7px 9px 0 var(--red);color:var(--ink)}
.game-tile .gt-art{display:block;aspect-ratio:16/9;background:var(--paper-2);border-bottom:2px solid var(--ink);overflow:hidden}
.game-tile .gt-art img{width:100%;height:100%;object-fit:cover;display:block}
.game-tile .gt-body{display:flex;flex-direction:column;gap:6px;padding:var(--s3);text-align:left;flex:1}
.game-tile b{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15}
.game-tile .gt-txt{color:var(--ink-soft);font-size:17px}
.game-tile .gt-go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--red)}
.gt-best{font-size:15px;color:var(--ink-soft)}
.grownup-note{max-width:760px;margin:var(--s5) auto 0;text-align:left;background:var(--white);border:2px dashed var(--ink);border-radius:var(--r);padding:var(--s3)}
.grownup-note h3{font-size:20px}
.grownup-note p{color:var(--ink-soft);margin-top:8px}
.grownup-note .btn{margin-top:var(--s2)}

/* game shell */
.game{max-width:980px;margin:0 auto;text-align:center}
.game-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin:0 auto var(--s3)}
.game-bar .btn{width:auto;margin:0}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--white)}
.seg button{min-height:48px;min-width:48px;padding:8px 18px;border:0;background:transparent;font:700 16px var(--sans);color:var(--ink);cursor:pointer}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.sound-btn{min-height:48px;padding:8px 18px;border:2px solid var(--ink);border-radius:999px;background:var(--white);font:700 16px var(--sans);color:var(--ink);cursor:pointer}
.sound-btn[aria-pressed=true]{background:var(--paper-2)}
.game-stats{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:17px;margin-bottom:var(--s3);color:var(--ink-soft)}
.game-stats b{color:var(--ink)}
.game-msg{min-height:1.6em;font-weight:700;margin:var(--s2) 0;color:var(--ink)}
.how{max-width:640px;margin:var(--s5) auto 0;text-align:left;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:var(--s3)}
.how h2{font-size:24px;margin:0 0 8px}
.how ul{padding-left:1.2em}
.how li{margin:6px 0;color:var(--ink-soft)}
.back-row{margin-top:var(--s4)}

/* win panel */
.win{position:relative;max-width:620px;margin:var(--s3) auto 0;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--red);padding:var(--s4) var(--s3);overflow:hidden}
.win[hidden]{display:none}
.win h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:8px}
.win h2:focus{outline:none}
.win .stars{display:flex;justify-content:center;gap:8px;margin:8px 0 12px}
.win .stars svg{width:40px;height:40px}
.win .win-stats{color:var(--ink-soft)}
.win .actions .btn{width:auto;margin:0}
.win .for-grownups{margin-top:var(--s3);padding-top:var(--s2);border-top:2px dashed var(--line);font-size:16px;color:var(--ink-soft)}
.win .for-grownups a{color:var(--red-deep);font-weight:700}
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bubbles span{position:absolute;bottom:-30px;width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.6);opacity:0}
@media (prefers-reduced-motion:no-preference){
 .bubbles span{animation:bub 2.6s ease-out forwards}
 @keyframes bub{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-360px) scale(1.1);opacity:0}}
}

/* memory match */
.match-grid{display:grid;gap:12px;margin:0 auto;max-width:640px;grid-template-columns:repeat(3,1fr)}
.match-grid.g4{grid-template-columns:repeat(4,1fr)}
@media(min-width:700px){.match-grid{gap:16px}}
.mcard{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;perspective:800px;border-radius:14px;min-height:64px}
.mcard .mc-in{position:absolute;inset:0;transform-style:preserve-3d}
.mcard .face,.mcard .back{position:absolute;inset:0;border:2px solid var(--ink);border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.mcard .back{background:var(--red);display:flex;align-items:center;justify-content:center}
.mcard .back svg{width:70%;height:70%}
.mcard .face{background:var(--white);transform:rotateY(180deg)}
.mcard .face img{width:100%;height:100%;object-fit:cover;display:block}
.mcard.up .mc-in{transform:rotateY(180deg)}
.mcard.got .face{box-shadow:3px 3px 0 var(--red);border-color:var(--red-deep)}
.mcard.got .face::after{content:"";position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%239E2A2A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border:2px solid var(--red-deep)}
@media (prefers-reduced-motion:no-preference){.mcard .mc-in{transition:transform .45s ease}.mcard:not(.got):hover .back{transform:translateY(-2px)}}
.mcard:focus-visible{outline-offset:4px}

/* maze */
.maze-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
@media(min-width:900px){.maze-wrap{flex-direction:row;justify-content:center;align-items:center}}
.maze-board{position:relative;width:min(92vw,560px);width:max(260px,min(92vw,560px,calc(100svh - 380px)));aspect-ratio:1;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);padding:10px;touch-action:none;user-select:none;-webkit-user-select:none}
.maze-board:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.maze-board svg{display:block;width:100%;height:100%}
.maze-board .pl{transition:none}
@media (prefers-reduced-motion:no-preference){.maze-board .pl{transition:transform .14s ease-out}}
.maze-board.bump{animation:none}
@media (prefers-reduced-motion:no-preference){.maze-board.bump{animation:bump .18s}@keyframes bump{50%{transform:translateX(3px)}}}
.dpad{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:repeat(3,72px);gap:8px}
.dpad button{-webkit-tap-highlight-color:transparent;border:2px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:3px 3px 0 var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dpad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dpad button svg{width:34px;height:34px}
.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}
.dpad .mid{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center}
.dpad .mid img{width:48px;height:48px}

/* spot the difference */
.spot-pics{display:grid;gap:var(--s3);grid-template-columns:1fr;max-width:1100px;margin:0 auto}
@media(min-width:900px){.spot-pics{grid-template-columns:1fr 1fr}}
.spot-pic{margin:0}
.spot-pic figcaption{font-weight:700;margin-bottom:8px}
.spot-frame{position:relative;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--white);box-shadow:4px 4px 0 var(--ink);cursor:crosshair;touch-action:manipulation}
.spot-frame:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.spot-frame img{display:block;width:100%;height:auto}
.spot-frame svg{position:absolute;inset:0;width:100%;height:100%}
.spot-frame .ring{fill:none;stroke:var(--red);stroke-width:5}
.spot-frame .ring-in{fill:none;stroke:var(--white);stroke-width:2}
.spot-frame .miss{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;opacity:.75}
.spot-frame .hint{fill:rgba(28,26,23,.05);stroke:var(--red);stroke-width:4;stroke-dasharray:10 8}
@media (prefers-reduced-motion:no-preference){.spot-frame .hint{animation:hint 1s ease-in-out 3}@keyframes hint{50%{stroke-width:8}}.spot-frame .miss{animation:fade 1.1s forwards}@keyframes fade{70%{opacity:.75}100%{opacity:0}}}
.spot-frame .cursor{fill:none;stroke:var(--ink);stroke-width:3}
.spot-frame:not(:focus-visible) .cursor{display:none}
.found-row{display:flex;gap:10px;justify-content:center;margin:var(--s2) 0}
.found-row span{width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;background:var(--white)}
.found-row span.on{background:var(--red)}
@media(max-width:480px){.dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px)}.seg button{padding:8px 14px}}
.spot-frame .spot-fx{position:absolute;-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1)}
@media(max-width:899px){.maze-wrap{gap:16px}}
.mcard,.spot-frame,.seg button,.sound-btn{-webkit-tap-highlight-color:transparent}
.game-page .phero{padding:40px 0 0}
.game-page .phero h1{font-size:clamp(36px,5vw,60px)}
.game-page .phero .lede{margin-top:12px}
.game-page .phero .wave{display:none}
.game-page main>section.tight{padding-top:24px}