:root{--cream:#FAF6ED;--ink:#1E1E1E;--orange:#FF5232;--yellow:#FFD56B;--muted:#69707a;--mint:#bcebdd}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Arial","Microsoft JhengHei",sans-serif;font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button,.button{font:inherit;font-weight:800;border:2px solid var(--ink);border-radius:11px;padding:12px 16px;color:var(--ink);background:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,box-shadow .15s;touch-action:manipulation}button:hover,.button:hover{transform:translateY(-2px);box-shadow:2px 3px 0 var(--ink)}button:active,.button:active{transform:translateY(2px);box-shadow:none}button:disabled{cursor:default;opacity:.65;transform:none;box-shadow:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #187fa1;outline-offset:5px}[hidden]{display:none!important}.wrap{max-width:950px;margin-inline:auto;width:calc(100% - 48px)}.header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);padding:30px 0 18px;gap:15px}.brand{text-decoration:none;color:inherit;display:flex;gap:12px;align-items:center}.brand-icon{background:var(--orange);color:white;border:2px solid var(--ink);width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;box-shadow:2px 2px 0 var(--ink)}.brand strong{font-size:23px;display:flex;align-items:center;gap:10px;letter-spacing:1px}.brand small{font-size:10px;letter-spacing:0;background:var(--yellow);padding:4px 8px;border:1.5px solid var(--ink);border-radius:30px}.tagline{font-size:10px;display:block;margin-top:5px}nav{display:flex;gap:8px}.small{padding:9px 12px;font-size:12px}.yellow{background:var(--yellow)}.primary{background:var(--orange);color:white}.mint{background:var(--mint)}.blue{background:#bde6f0}.panel{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:5px 6px 0 var(--ink)}.hero{margin-top:66px;text-align:center;padding:40px 25px 20px;position:relative;overflow:hidden}.pill{display:inline-block;border:1.5px solid var(--ink);border-radius:30px;font-size:10px;font-weight:bold;padding:5px 10px}.hero-pill{position:absolute;left:20px;top:18px;background:var(--cream)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--muted)}h1{font-size:32px;line-height:1.35;letter-spacing:-1px;margin:16px 0 10px}p{line-height:1.6}.hint{font-size:12px;color:var(--muted);margin:0}.frame-space{height:325px;position:relative;display:flex;align-items:center;justify-content:center;padding-top:20px}.nail{position:absolute;width:12px;height:12px;background:var(--ink);border:2px solid white;box-shadow:0 0 0 1px var(--ink);border-radius:50%;top:24px;left:calc(50% - 6px);z-index:2}.wire{position:absolute;top:35px;width:130px;height:80px;border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg);left:calc(50% - 65px)}.frame{width:220px;height:265px;background:var(--yellow);padding:17px;border:5px solid var(--ink);border-radius:15px;box-shadow:5px 5px 0 var(--ink);transform:rotate(-22.1deg);cursor:grab;touch-action:none;user-select:none;position:relative}.frame:active{cursor:grabbing}.portrait{height:100%;background:var(--cream);border:2px solid var(--ink);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px}.blob{width:90px;height:77px;border:4px solid var(--ink);border-radius:49% 49% 36% 38%;background:#fffdf6;position:relative;display:block;animation:breathe 3s ease-in-out infinite}.eyes{position:absolute;left:23%;top:17%;font-size:23px;font-family:Arial;letter-spacing:5px;white-space:nowrap}.mouth{position:absolute;top:35%;left:36%;font-size:31px;font-weight:900;line-height:1}.blob i{position:absolute;top:54%;left:14%;width:10px;height:6px;background:#ffa18f;border-radius:50%}.blob i+i{left:auto;right:14%}.portrait-label{font-size:10px;border:1.5px solid var(--ink);padding:5px 8px;background:#fff;transform:rotate(-5deg)}.angle{display:inline-block;border:2px solid var(--ink);border-radius:30px;background:var(--cream);padding:7px 15px;font-size:12px;font-weight:bold}.angle output{color:var(--orange);font-variant-numeric:tabular-nums}.slider-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:17px 0}input[type=range]{accent-color:var(--orange);width:245px;cursor:pointer}.hero-actions{display:flex;justify-content:center;gap:10px}.hero-actions .primary{min-width:220px;box-shadow:3px 3px 0 var(--ink)}.feedback{min-height:20px;font-size:11px;color:var(--muted);margin:14px 0 0}.text-button{border:0;padding:6px;background:none;text-decoration:underline;font-size:12px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);margin:36px 0 24px;padding-bottom:14px;gap:12px}h2{font-size:23px;margin:0}.section-heading h2 span{color:var(--orange)}.section-heading p{font-size:11px;margin:5px 0 0;color:var(--muted)}.availability{background:#fff;white-space:nowrap}.availability::first-letter{color:#21b99a}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.game{padding:20px 18px;border-radius:23px;display:flex;flex-direction:column}.card-top{display:flex;align-items:center;justify-content:space-between;gap:5px}.card-top>span:last-child{font-size:10px;color:var(--muted)}.card-top .pill{font-size:9px;padding:4px 8px}h3{font-size:22px;margin:16px 0 8px;letter-spacing:-.5px}.description{font-size:11px;margin:0 0 20px;min-height:36px;color:#4a5058;line-height:1.7}.game-stage{height:174px;border:1.5px solid var(--ink);border-radius:16px;background:var(--cream);margin-bottom:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}.full{width:100%;font-size:12px;padding:12px 5px}.glass{height:119px;width:72px;border:3px solid var(--ink);border-top:0;border-radius:0 0 12px 12px;position:relative;overflow:hidden;margin-top:9px;background:#fff9}.liquid{position:absolute;bottom:0;width:100%;height:0;background:var(--orange)}.liquid:before{content:"";position:absolute;top:-5px;left:-30%;width:160%;height:12px;border-radius:45%;background:#ff9879;animation:wave 1s ease-in-out infinite alternate}.target{position:absolute;bottom:80%;border-top:1px dashed var(--orange);width:100%;z-index:1}.target span{position:absolute;right:2px;top:-13px;color:var(--orange);font-size:9px}.pour-stage p{font-size:10px;margin:9px 0}#pour{user-select:none;touch-action:none}.timer-stage{gap:10px}.timer-dots{font-size:9px;letter-spacing:7px;color:#d8d0bf}#timer-display{font-family:Consolas,monospace;font-size:38px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-2px}#timer-hint{font-size:10px;color:var(--muted)}.duel-stage{padding:12px;gap:12px;text-align:center}.duel-stage strong{font-size:12px}.duel-bubble{font-size:11px;border:1px solid var(--ink);border-radius:5px;background:#fff;padding:6px 9px}.sample-options{display:flex;gap:8px;font-size:10px}.sample-options span{background:#fff;border:1px solid var(--ink);border-radius:5px;padding:6px 12px}.duel-options{display:flex;gap:6px;width:100%}.duel-options button{font-size:11px;padding:10px 3px;flex:1}.duel-progress{font-size:10px;color:var(--muted)}.result-actions{display:flex;gap:8px;margin-top:10px}.game>button[hidden]+.feedback{margin-top:0}#timer-share,#duel-share{margin-top:10px}.closing{display:flex;align-items:center;gap:20px;padding:45px 0 30px;color:var(--muted)}.closing>span{font-size:42px;color:var(--orange)}.closing p{font-size:13px;margin:0}.closing strong{color:var(--ink)}.closing a{margin-left:auto;font-size:12px;color:var(--ink)}footer{border-top:1px solid #c9c5bd;display:flex;justify-content:space-between;padding:22px 0 40px;font-size:10px;color:var(--muted)}.mascot{position:fixed;bottom:18px;right:22px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}.mascot p{background:white;border:2px solid var(--ink);border-radius:15px 15px 0 15px;padding:10px 13px;font-size:11px;margin:0 0 8px;max-width:210px;box-shadow:2px 2px 0 var(--ink)}.mascot button{background:var(--yellow);border-radius:50%;width:62px;height:62px;padding:7px;pointer-events:auto;box-shadow:2px 3px 0 var(--ink)}.mini{width:43px;height:37px;border-width:2px}.mini .eyes{font-size:11px;letter-spacing:2px}.mini .mouth{font-size:17px}.mini i{width:5px;height:3px}.squish{animation:squish .45s!important}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}.confetti-piece{position:absolute;top:-20px;width:9px;height:16px;animation:fall 1.6s ease-in forwards}dialog{border:2px solid var(--ink);border-radius:24px;background:var(--cream);padding:30px;max-width:450px;width:calc(100% - 32px);box-shadow:6px 6px 0 var(--ink);max-height:90dvh;overflow:auto}dialog::backdrop{background:#1e1e1e88;backdrop-filter:blur(3px)}dialog h2{margin:12px 0 20px;font-size:25px}.close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:23px;padding:0 7px}canvas{width:100%;height:auto;border:1px solid var(--ink);border-radius:10px}.share-actions{display:flex;gap:8px;margin-top:16px}.share-actions button{flex:1;font-size:12px}#share-status{font-size:11px;color:var(--muted);margin-bottom:0}@keyframes breathe{50%{transform:translateY(-3px) rotate(3deg)}}@keyframes wave{to{transform:translateX(12px) rotate(3deg)}}@keyframes squish{35%{transform:scale(1.2,.75)}75%{transform:scale(.9,1.12)}}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(600deg)}}@media(min-width:1500px){.wrap{max-width:950px}}@media(max-width:720px){.wrap{width:calc(100% - 36px);max-width:470px}.header{padding-top:20px;align-items:flex-start}.brand strong{font-size:18px;display:block}.brand small{display:none}.brand-icon{width:36px;height:36px;font-size:20px}.tagline{font-size:8px}.header nav{gap:5px}.header nav .button{display:none}.header nav button{font-size:10px;padding:8px}.hero{margin-top:30px;padding:54px 16px 20px}.hero-pill{font-size:9px}h1{font-size:25px}.hint{font-size:11px;max-width:290px;margin:auto}.eyebrow{font-size:9px}.frame-space{height:300px}.frame{width:190px;height:235px}.hero-actions .primary{min-width:190px}.section-heading{align-items:flex-start}.section-heading h2{font-size:22px}.availability{font-size:8px;padding:5px}.game-grid{grid-template-columns:1fr;gap:23px}.game{padding:22px}.game-stage{height:195px}.description{min-height:0}.closing{padding-bottom:25px}.closing a{display:none}footer{padding-bottom:120px;gap:15px;font-size:9px}.mascot{right:16px;bottom:12px}.mascot p{font-size:10px;padding:7px 10px}.mascot button{width:54px;height:54px}.game .full{padding:14px}.card-top .pill{font-size:10px}#timer-display{font-size:44px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.confetti-piece{display:none}}

/* Result overlays: cream paper, chunky shadow, and a spring-like entrance. */
.result-popup{width:min(390px,calc(100% - 32px));padding:28px 24px 22px;text-align:center;overflow-x:hidden;border-radius:23px;box-shadow:6px 7px 0 #1e1e1e}
.result-popup[open]{animation:popup-in .32s cubic-bezier(.2,1.35,.4,1) both}
.result-popup::backdrop{background:rgba(20,20,20,.7);backdrop-filter:blur(4px)}
.result-popup h2{font-size:23px;margin:14px 0 8px}.result-popup .eyebrow{font-size:8px;letter-spacing:1px}
.result-mascot{display:grid;place-items:center;margin:0 auto;width:64px;height:64px;background:var(--yellow);border:3px solid var(--ink);border-radius:50%;font-size:40px;box-shadow:2px 2px 0 var(--ink)}
.result-score{color:var(--orange);font-size:22px;display:block;margin:10px 0}.result-quote{background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:13px 9px;font-size:13px;margin:16px 0 22px}.result-popup .primary{box-shadow:2px 3px 0 var(--ink)}.replay{margin-top:12px;padding:9px;font-size:12px}.result-popup canvas{max-height:43dvh;width:auto;max-width:100%;object-fit:contain}.result-popup .share-actions{gap:8px}.result-popup .share-actions button{padding:12px 8px}.popup-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.result-popup .close{z-index:6}.result-popup #share-status{font-size:10px}.result-popup .confetti-piece{height:10px;width:5px}.result-popup:has(.popup-confetti){isolation:isolate}
@keyframes popup-in{from{opacity:0;transform:translateY(18px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.result-popup[open]{animation:none}}

.game-art{font-size:60px;display:grid;place-items:center;height:120px;border:1.5px solid var(--ink);border-radius:14px;margin-top:18px;font-family:Arial,sans-serif}.art-0{background:#fff1c5}.art-1{background:#d9f2e9}.art-2{background:#e2eff5}.extra-game .description{flex:1;min-height:40px}.extra-game h3{font-size:21px}
#play-dialog{width:min(520px,calc(100% - 28px));max-width:520px;text-align:center;padding:30px 24px;max-height:92dvh}#play-dialog::backdrop{background:#1e1e1eb3;backdrop-filter:blur(4px)}#play-title{margin:18px 0 10px}#play-description{font-size:12px;color:var(--muted)}#play-status{font-size:13px;font-weight:bold;min-height:42px;margin:16px 0}#play-area{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.ready-art{font-size:80px;color:var(--orange);padding:20px}.bubble-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}.bubble{aspect-ratio:1;border-radius:50%;font-size:32px;padding:0;background:#ffd9c7;box-shadow:3px 4px 0 #1e1e1e}.popped{background:#eee9df!important;box-shadow:none!important;opacity:.5!important}.reaction-pad{width:100%;min-height:220px;font-size:26px}.waiting{background:#ffb3a4}.go{background:#a8e7bf}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.memory-tile{height:95px;padding:5px;font-size:30px;background:#ffe6a3}.center-board{width:min(100%,320px);aspect-ratio:1;background:white;border:3px solid var(--ink);position:relative;cursor:crosshair;border-radius:12px;touch-action:manipulation}.center-cursor{position:absolute;transform:translate(-50%,-50%);color:var(--orange);font-size:24px;pointer-events:none}.nine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,330px)}.color-tile,.number-tile{aspect-ratio:1;min-height:65px;font-size:32px;padding:0}.number-tile{background:var(--yellow)}.sequence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:min(100%,310px)}.sequence-key{min-height:110px;font-size:40px;background:#e8e2d5;opacity:1!important}.sequence-key.lit{background:var(--orange);color:white;outline:4px solid var(--yellow);transform:scale(.95)}.mail-card{width:100%;background:white;border:2px solid var(--ink);border-radius:14px;padding:25px 12px;display:flex;flex-direction:column;gap:15px}.mail-card span{font-size:45px}.mail-card strong{font-size:18px}.mini-actions{display:flex;gap:10px;width:100%}.mini-actions button{flex:1;padding:14px 5px}.rps-key{font-size:15px}.toss-board{height:220px;width:100%;position:relative;border:2px solid var(--ink);border-radius:16px;background:#fff;overflow:hidden}.paper-ball{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:30px;color:var(--orange)}.paper-bin{position:absolute;bottom:15px;left:38%;width:24%;text-align:center;background:var(--mint);font-size:44px;border:2px solid var(--ink);border-radius:0 0 12px 12px}.extra-game button{margin-top:auto}@media(max-width:400px){#play-dialog{padding:28px 15px}.bubble-grid{gap:8px}.memory-tile{height:74px}.mini-actions{gap:6px}}

.rps-arena{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:10px}.rps-hand{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:18px 8px;box-shadow:3px 4px 0 var(--ink)}.rps-hand.winner{background:#fff0bc;border-color:var(--ink)}.rps-player{font-size:13px;font-weight:800}.rps-hand-icon{font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;font-size:64px;line-height:1.2;display:block;animation:hand-reveal .22s ease-out both}.rps-hand-name{font-size:17px}.rps-vs{font-size:15px;font-weight:900;color:var(--orange)}.rps-verdict{font-size:16px;font-weight:800;margin:3px 0;text-align:center}.rps-verdict.win{color:#24634d}.rps-verdict.lose{color:#a33a28}@keyframes hand-reveal{from{transform:translateY(8px) scale(.9);opacity:.5}to{transform:none;opacity:1}}@media(max-width:380px){.rps-arena{gap:7px;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr)}.rps-hand-icon{font-size:52px}.rps-hand{padding:15px 6px}.rps-verdict{font-size:14px}}@media(prefers-reduced-motion:reduce){.rps-hand-icon{animation:none}}

.flight-board{height:270px}.flight-board .thrown-paper{width:5%;aspect-ratio:1;background:var(--orange);border:1.5px solid var(--ink);border-radius:43% 52% 38% 48%;font-size:0;top:12%;transform:translate(-50%,-50%);z-index:3}.thrown-paper:after{content:'';position:absolute;inset:23%;border-left:1px solid #fff9;border-bottom:1px solid #fff9;transform:rotate(30deg)}.flight-board .open-bin{top:67%;bottom:auto;left:38%;width:24%;height:25%;font-size:12px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:0 0 14px 14px;background:#bcebdd}.open-bin:before{content:'';position:absolute;top:-5px;left:-3px;right:-3px;height:6px;border:2px solid var(--ink);border-radius:50%;background:#568c7b}.bin-caption{font-size:10px;font-weight:bold;white-space:nowrap}.open-bin.basket-hit{background:#7ee0ac;box-shadow:0 0 0 4px #a6e8bb66}.open-bin.basket-miss{background:#e4e5df}.throw-trail{position:absolute;inset:0;pointer-events:none;z-index:1}.trajectory-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--orange);transform:translate(-50%,-50%)}.throw-label{position:absolute;right:10px;top:10px;font-size:11px;padding:5px 8px;border:1px solid var(--ink);border-radius:20px;background:var(--cream);z-index:4}.throw-label.hit{background:#bcebdd;color:#154c35}.throw-label.miss{background:#ffdfd6;color:#8b2c18}

.balance-scale{position:relative;height:170px;width:90%;display:flex;align-items:center;justify-content:center}.balance-beam{width:80%;height:6px;background:var(--ink);display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2;transition:transform .1s}.balance-pan{display:block;margin-top:10px;border:2px solid var(--ink);background:var(--yellow);padding:14px 8px;border-radius:0 0 25px 25px;font-size:13px}.balance-base{position:absolute;top:82px;font-size:56px;color:var(--orange)}.mini-receipt{width:100%;padding:22px;background:white;border:2px dashed var(--ink);display:flex;flex-direction:column;gap:12px}.mini-receipt strong{font-size:24px}.mini-receipt p{margin:0}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.coffee-tile{aspect-ratio:1;font-size:34px;padding:4px;background:#fff}.align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.align-column{display:flex;flex-direction:column;gap:16px}.align-face{display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;background:var(--yellow);font-size:46px;min-height:100px}.maze-grid{display:grid;grid-template-columns:repeat(5,1fr);width:min(100%,300px);border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:white}.maze-cell{aspect-ratio:1;display:grid;place-items:center;border:1px solid #ddd;font-size:26px;color:var(--orange)}.maze-cell.wall{background:#484943;color:#8b8d81;font-size:22px}.maze-cell.exit{background:#bcebdd;color:#24634d;font-size:19px}.maze-controls{display:flex;gap:8px}.maze-controls button{min-width:50px;font-size:22px}.light-tile{aspect-ratio:1;font-size:32px;padding:0}.light-tile.on{background:var(--yellow)}.light-tile.off{background:#3e4149;color:#e5e5e5}.sentence-answer{padding:20px 12px;border:2px dashed var(--ink);border-radius:12px;width:100%;font-size:20px;min-height:78px;background:#fff}.word-tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.word-tiles button{background:var(--yellow);padding:10px 14px}.star-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;padding:15px;background:#fff;border:2px solid var(--ink);border-radius:12px}.star-grid span{font-size:26px;text-align:center;color:#ad720e}@media(max-width:380px){.align-face{font-size:36px;min-height:80px}.star-grid{gap:7px}.maze-controls button{min-width:45px}}

.odd-grid{display:grid;gap:8px;width:min(100%,330px)}.odd-grid .color-tile{min-height:0;min-width:0;aspect-ratio:1;border-radius:12px;padding:0;font-size:24px}.odd-grid .color-tile:disabled{opacity:1;box-shadow:none;transform:none}.odd-grid .odd-answer{outline:3px solid var(--ink);outline-offset:1px;color:var(--ink);text-shadow:0 1px 2px #fff}.odd-grid .odd-wrong{color:var(--ink);text-shadow:0 1px 2px #fff}.odd-progress{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:min(100%,330px)}.odd-step{display:grid;place-items:center;aspect-ratio:1;border:1px solid #c9c4b8;border-radius:50%;font-size:11px;background:#eee9dd}.odd-step.current{background:var(--yellow);border:2px solid var(--ink);font-weight:bold}.odd-step.pass{background:#bcebdd;border-color:#376d59}.odd-step.fail{background:#ffd7ca;border-color:#a94a31}.odd-feedback{font-size:13px;margin:0;line-height:1.6}@media(max-width:380px){.odd-grid{gap:6px}.odd-grid .color-tile{border-radius:8px}.odd-step{font-size:10px}}

.center-surface{position:absolute;inset:0;border-radius:9px}.center-distance-line{position:absolute;height:0;border-top:2px dashed #8e8e80;transform-origin:0 0;pointer-events:none;z-index:1}.center-picked{position:absolute;width:18px;height:18px;background:var(--orange);border:2px solid white;outline:2px solid var(--orange);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2}.center-truth{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);pointer-events:none;z-index:3;filter:drop-shadow(0 0 1px white)}.center-truth:before,.center-truth:after{content:'';position:absolute;background:#167b69;border-radius:2px;box-shadow:0 0 0 1px white}.center-truth:before{width:30px;height:3px;left:0;top:13.5px}.center-truth:after{height:30px;width:3px;left:13.5px;top:0}.center-revealed{cursor:default}.center-legend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:13px;font-weight:bold}.picked-legend{color:#b93821}.truth-legend{color:#146b5c}.center-explanation{margin:0;font-size:13px;line-height:1.6;text-align:center}

.bubble-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.bubble-grid .bubble{min-width:0;font-size:28px}@media(max-width:380px){.bubble-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}

.align-clock{order:-1;display:block;font-family:Consolas,"Microsoft JhengHei",monospace;font-variant-numeric:tabular-nums;font-size:23px;font-weight:800;color:var(--orange);padding:10px 16px;border:2px solid var(--ink);border-radius:12px;background:white}

.mini-receipt .receipt-discount{color:#ad3823;font-weight:bold}.receipt-answer{padding:12px;border:1px solid var(--ink);border-radius:12px;background:#fff;width:100%;font-size:13px}.receipt-answer p{margin:7px 0}.generated-maze{width:min(100%,350px)}.generated-maze .maze-cell{min-width:0;font-size:clamp(13px,3vw,22px);border:1px solid #eee}.generated-maze .maze-cell.wall{border-color:#484943}.generated-maze .maze-cell.exit{font-size:13px}.generated-maze .maze-cell.player{background:#ffe29c;color:#161616}

.numbers-grid{width:min(100%,380px);gap:8px}.numbers-grid .number-tile{min-width:0;min-height:44px;font-size:clamp(20px,5vw,30px)}

/* Suan Ni: a small place to rest, before or after a game. */
.ip-nav{color:var(--ink);font-weight:bold;align-self:center;white-space:nowrap;font-size:12px}.recess-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:30px;padding:48px 0 28px}.recess-intro h1{font-size:clamp(36px,5vw,62px);line-height:1.12;margin:22px 0}.recess-intro p{font-size:16px;color:#50534d}.recess-intro figure{margin:0;text-align:center;background:radial-gradient(ellipse,#ffe8bc 0%,transparent 70%)}.recess-intro img{width:100%;height:auto;max-width:360px}.recess-intro figcaption{font-size:11px;font-weight:bold;letter-spacing:1px}.intro-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.intro-links>a:not(.button){font-size:12px;color:var(--ink)}.mood-room{padding:26px;background:#fffdf6}.mood-room h2{margin-top:10px}.mood-room>p{color:var(--muted);font-size:13px}.mood-options{display:flex;gap:8px;flex-wrap:wrap}.mood-options button{font-size:13px;flex:1;min-width:120px}.mood-options button[aria-pressed=true]{background:var(--yellow);box-shadow:2px 3px 0 var(--ink)}.mood-answer{display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px dashed #b9b2a6;margin-top:22px;padding-top:15px}.mood-answer p{font-size:13px;flex:1}.mood-answer button{font-size:12px}.hero{margin-top:36px}.hero #hero-title{font-size:30px;line-height:1.4;margin:18px 0 10px}.portrait-suanni{object-fit:contain}.mascot button img{width:100%;height:auto}.suanni-result{background:none!important;border:0!important;width:auto!important;height:auto!important}.suanni-profile{display:flex;align-items:center;gap:28px;padding:24px;background:#fff8e9}.suanni-profile>img{width:30%;height:auto}.suanni-profile h3{font-size:26px}.suanni-profile p{max-width:550px;color:#50534d;font-size:13px}.friends-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}.friend-card{padding:18px;box-shadow:3px 4px 0 var(--ink)}.friend-card>img{width:100%;height:auto}.friend-card h3{margin:10px 0}.friend-card strong,.friend-card p,.friend-card summary{font-size:12px}.friend-card details{border-top:1px dashed #c9c5bd;padding-top:10px}.friend-card summary,.name-lore summary{cursor:pointer;font-weight:bold}.name-lore{padding:20px 0;margin:16px 0;border-bottom:1px solid #c9c5bd}.name-lore p,.name-lore dl{font-size:13px;line-height:1.8}.name-lore dl{display:grid;grid-template-columns:80px 1fr;gap:10px}.name-lore dt{font-weight:bold}.name-lore dd{margin:0}.story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.story-grid article{border:2px solid var(--ink);border-radius:16px;padding:14px;background:white;text-align:center}.story-number{font-family:monospace;font-weight:bold;display:block;text-align:left;color:#9a7256}.story-grid img{width:100%;height:auto;object-fit:contain}.story-grid p{font-size:12px}.story-dialogue{min-height:40px;background:var(--cream);border-radius:10px;padding:8px;font-weight:bold}.flat-suanni{transform:scaleY(.38);transform-origin:50% 80%}.story-cta{margin-top:20px}.ip-section{margin-top:45px}.friend-card summary:focus-visible,.name-lore summary:focus-visible{outline:3px solid #187fa1;outline-offset:4px}
@media(max-width:720px){.header{flex-wrap:wrap}.header nav{width:100%;justify-content:flex-end}.header nav .button{display:inline-flex}.recess-intro{grid-template-columns:1fr;gap:6px;padding-top:28px}.recess-intro figure{grid-row:2}.recess-intro img{max-width:240px}.recess-intro h1{font-size:42px}.mood-room{padding:20px}.mood-answer{flex-direction:column;align-items:stretch;gap:6px}.mood-answer p{margin:0 0 10px}.hero #hero-title{font-size:24px}.suanni-profile{flex-direction:column;padding:22px;gap:0}.suanni-profile>img{width:190px}.suanni-profile h3{font-size:24px}.friends-grid,.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.friend-card{padding:13px}.friend-card .eyebrow{letter-spacing:0;font-size:9px}.name-lore dl{grid-template-columns:64px 1fr}.mascot p{max-width:180px}}

/* Official IP artwork: CSS viewports, original supplied PNGs remain unchanged. */
.ip-portrait{position:relative;display:block;overflow:hidden;border-radius:18px;background:#f7ead6;isolation:isolate}.ip-portrait>img{position:absolute!important;display:block;width:var(--ip-width)!important;max-width:none!important;height:auto!important;left:var(--ip-left);top:var(--ip-top);margin:0!important;transform:none!important}.recess-intro figure>.ip-portrait{width:100%;max-width:400px;margin:0 auto 14px;box-shadow:5px 6px 0 #e5cfad}.recess-intro figure{background:none}.portrait>.ip-portrait{width:145px;flex-shrink:0}.suanni-profile>.ip-portrait{width:32%;flex-shrink:0}.friend-card>.ip-portrait{width:100%;margin-bottom:16px;border-radius:12px}.mascot button>.ip-portrait{width:100%;border-radius:50%;pointer-events:none}.mascot button{width:76px;height:76px;padding:4px;background:#ffdfba}.suanni-result>.ip-portrait{width:96px;margin:auto}.story-grid .ip-portrait{width:100%;margin:15px auto;transform:none}.story-grid article{display:flex;flex-direction:column}.story-grid article>p:last-child{margin-top:auto}.story-tired{filter:saturate(.8)}.family-album{margin:18px 0;overflow:hidden;border-radius:18px;box-shadow:3px 4px 0 var(--ink)}.family-album summary{padding:18px 22px;cursor:pointer;font-weight:bold;font-size:16px}.family-album summary span{display:block;font-weight:normal;font-size:12px;color:#6c665b;margin:8px 0 0 18px;line-height:1.6}.family-album a{display:block}.family-album a:focus-visible{outline:4px solid #187fa1;outline-offset:-4px}.family-album img{display:block;width:100%;height:auto}.family-names{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px}.family-names span{border:1px solid #c9b393;background:#fff7e8;border-radius:20px;padding:6px 12px;font-size:12px}.family-note{font-size:11px;color:var(--muted)}.family-album summary:focus-visible{outline:3px solid #187fa1;outline-offset:-5px}
@media(max-width:720px){.recess-intro figure>.ip-portrait{max-width:340px}.suanni-profile>.ip-portrait{width:100%;max-width:310px}.mascot button{width:66px;height:66px}.family-album summary{padding:16px}.family-album summary span{margin-left:0}.friend-card>.ip-portrait{border-radius:9px}}

.share-image{display:block;width:100%;height:auto;border:1px solid var(--ink);border-radius:10px;-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto;touch-action:auto}.save-hint{font-size:13px;line-height:1.7;background:#fff0ca;border-radius:10px;padding:12px;color:var(--ink)}
.brand-icon{display:block;flex:0 0 auto;object-fit:cover;border:0;border-radius:12px;background:transparent;box-shadow:none;width:48px;height:48px}.brand-icon:hover{transform:rotate(-5deg)}@media(max-width:600px){.brand-icon{width:40px;height:40px}}
.lianwu-card{overflow:hidden}.lianwu-art{display:block;width:100%;height:230px;object-fit:contain;background:#fff1ed;border:2px solid var(--ink);border-radius:16px;margin-bottom:16px}
.new-fruit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.new-fruit-card{padding:16px;overflow:hidden}.new-fruit-card img{width:100%;height:220px;object-fit:contain;background:#fff7f1;border:2px solid var(--ink);border-radius:16px}.new-fruit-card h3{font-size:22px;margin:14px 0 4px}.new-fruit-card p{color:var(--muted);margin:0;line-height:1.6}@media(max-width:700px){.new-fruit-grid{grid-template-columns:repeat(2,1fr);gap:12px}.new-fruit-card{padding:11px}.new-fruit-card img{height:175px}}

.story-grid img.story-character-img{width:100%;height:auto;aspect-ratio:425/310;object-fit:cover;border-radius:12px;background:#fff7e8;margin:15px auto}.story-grid .story-dialogue{line-height:1.5}

/* Snack drawer */
.snack-drawer {
  width: min(100%, 450px);
  margin: 0 auto 14px;
  overflow: hidden;
  border: 2px solid #29201b;
  border-radius: 12px;
  background: #ad7452;
  box-shadow: 0 4px 0 #29201b;
}
.snack-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1vw, 8px);
  min-height: 112px;
  margin: 8px 9px 0;
  padding: 7px;
  border: 2px solid #29201b;
  border-radius: 8px 8px 0 0;
  background: #51382d;
  color: #fff3da;
  box-shadow: inset 0 5px 0 #35251e;
}
.snack-tray img {
  display: block;
  width: min(17%, 60px);
  height: auto;
}
.snack-tray img[src$="snack-empty.svg"] { width: min(25%, 68px); }
.snack-drawer-front {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 6px 8px 8px;
  border-top: 2px solid #29201b;
  background: #e4ad7d;
  color: #3b261d;
  font-size: .78rem;
  font-weight: 800;
}
.snack-drawer-front::after {
  content: '';
  width: 40px;
  height: 6px;
  border-radius: 8px;
  background: #51382d;
}

/* Sliding lunch box: generous touch targets, with numbered non-colour cues. */
.bento-guide { font-size:.85rem; line-height:1.8; text-align:center; }
.cookie-scoreboard { display:grid; gap:4px; font-size:13px; }
.cookie-scoreboard strong { font-size:18px; font-variant-numeric:tabular-nums; }
.cookie-tray {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:center;
  gap:4px;
  width:min(100%,340px);
  min-height:154px;
  padding:12px;
  background:#fff1c5;
  border:2px solid var(--ink);
  border-radius:16px;
  box-shadow:3px 4px 0 var(--ink);
  font-size:18px;
  line-height:1.2;
}
.cookie-controls { width:100%; }
.cookie-controls button { min-height:44px; }
.bento-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,320px); margin:16px auto; }
.bento-tile,.bento-empty { min-height:62px; aspect-ratio:1; display:grid; place-items:center; font-size:1.15rem; border:2px solid #29201b; border-radius:12px; padding:6px; }
.bento-tile:disabled { opacity:1; background:#eee7dc; color:#645d54; box-shadow:none; }
.bento-tile.movable { background:#ffd56b; color:#29201b; box-shadow:2px 3px 0 #29201b; touch-action:manipulation; }
.bento-tile:focus-visible { outline:3px solid #ff5232; outline-offset:2px; }
.bento-empty { border-style:dashed; color:#645d54; background:#faf6ed; font-size:.85rem; }