[hidden]{display:none!important}
:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#fff5e7;background:#201817}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 25%,#5d3a28,#1b1818 72%)}button{font:inherit;cursor:pointer}.game{width:min(100%,500px);height:max(740px,100svh);max-height:900px;margin:0 auto;position:relative;overflow:hidden;background:#3c241c;box-shadow:0 0 50px #0008}.scene{position:absolute;inset:0;overflow:hidden}.illustration{position:absolute;inset:0;background-size:100% auto;background-position:center top;background-repeat:no-repeat;background-color:#382018;transition:opacity .45s}.scene:after{content:"";position:absolute;inset:auto 0 0;height:43%;background:linear-gradient(transparent,#2113158c 34%,#150e13eb 82%);pointer-events:none}.scene-content{position:absolute;top:0;left:0;width:100%;aspect-ratio:941/1672;z-index:2}.hud{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 108px 10px 14px;background:linear-gradient(#1b1719bd,transparent);text-shadow:0 2px 5px #000}.hud-title{font-size:13px;font-weight:900;letter-spacing:.04em}.hud-count{font-size:13px;white-space:nowrap;background:#38221bd9;border:1px solid #efd6ad7a;border-radius:999px;padding:5px 9px}.sound{position:absolute;top:calc(8px + env(safe-area-inset-top));right:13px;z-index:9;border:1px solid #f4d0a8b5;border-radius:50%;background:#38221bba;color:#fff;width:39px;height:39px;font-size:21px}.dialogue{position:absolute;left:12px;right:12px;bottom:calc(28px + env(safe-area-inset-bottom));z-index:12;min-height:144px;max-height:38%;overflow:auto;padding:17px 17px 15px 81px;border:2px solid #e4af66;border-radius:18px;background:linear-gradient(145deg,#fff8e6f5,#f4e2bff6);box-shadow:0 8px 25px #100b0bc9,0 0 0 4px #4f322ae3;color:#392a27}.portrait{position:absolute;left:4px;bottom:6px;width:76px;height:99px;object-fit:contain;filter:drop-shadow(0 3px 4px #523e3970);animation:pop .45s both}.speaker{font-size:14px;color:#8b4631;font-weight:900;margin:0 0 4px}.speech{font-size:15px;line-height:1.48;margin:0 0 11px;font-weight:700}.dialogue .actions{display:flex;flex-wrap:wrap;gap:7px}.answer,.next,.hint-button{border:1.5px solid #9b5b3c;background:#fff8ea;color:#603422;padding:9px 13px;min-height:44px;border-radius:999px;font-size:14px;font-weight:900;box-shadow:0 3px 0 #b88967}.next{background:#664432;color:white;border-color:#664432}.answer:active,.next:active,.hint-button:active{transform:translateY(2px);box-shadow:none}.answer:focus-visible,.next:focus-visible,.hint-button:focus-visible,.hotspot:focus-visible,.stage-item:focus-visible,.sound:focus-visible{outline:3px solid #ffce55;outline-offset:2px}.credit{position:absolute;bottom:6px;z-index:13;width:100%;font-size:11px;color:#e1c1a5;text-align:center;text-shadow:0 1px 3px #000}.character{position:absolute;width:27%;height:23%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 9px #1c111099);pointer-events:none;animation:walkIn .6s both,breath 3s .6s infinite}.character.left{left:4%;top:34%}.character.right{right:3%;top:34%}.character.center{left:36%;top:35%}.character.small{width:20%;height:18%}.character.lower{top:51%}.character.celebrate{animation:walkIn .6s both,hop .8s .6s infinite}.hotspot{position:absolute;z-index:4;width:9%;height:6%;min-width:35px;min-height:35px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;color:transparent;touch-action:manipulation}.hotspot.found{background:#f9dc8c44;border:2px solid #ffe9a2;box-shadow:0 0 14px #ffda65,inset 0 0 14px #ffdf86;pointer-events:none;animation:found .5s both}.hotspot.hint{border:3px solid #ffe29d;background:#ffca4a50;box-shadow:0 0 25px 8px #ffd46e;animation:pulse 1.1s infinite}.hotspot.star{font-size:21px;color:#f6d888;text-shadow:0 0 8px #ffdc7d;background:#fff4be29;border:1px solid #fff6c5a0}.hotspot.star.found{opacity:0}.inventory{position:absolute;top:52px;left:12px;right:54px;z-index:7;display:flex;gap:4px;justify-content:flex-start;align-items:center;flex-wrap:wrap;max-height:52px;overflow:hidden;pointer-events:none}.inventory span{font-size:15px;line-height:1;background:#3e241cdd;border:1px solid #f6d6a0a8;padding:4px 5px;border-radius:8px;box-shadow:0 2px 5px #1e111177}.stage-item{position:absolute;z-index:5;border:0;background:transparent;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 8px #2c17158a);transition:transform .25s,filter .25s;touch-action:manipulation}.stage-item img{width:100%;height:100%;object-fit:contain;pointer-events:none}.stage-item:active{transform:translate(-50%,-50%) scale(.92)}.stage-item.selected{transform:translate(-50%,-57%) scale(1.1);filter:drop-shadow(0 0 12px #ffdb7b) drop-shadow(0 8px 8px #2c17158a)}.stage-item .label{display:block;color:#fff5da;background:#44291bcc;border-radius:99px;padding:3px 6px;font-size:12px;font-weight:900;white-space:nowrap;text-shadow:0 1px 2px #000}.flavor-item{width:25%;height:16%;top:64%}.jar-item{width:20%;height:16%;top:54%}.color-item{width:11%;height:7%;top:38%;border:2px solid #fff5d5;border-radius:50%;box-shadow:0 0 17px var(--glow);background:var(--glow);animation:float 2.4s infinite}.color-item:after{content:"";position:absolute;inset:18%;border-radius:50%;background:#fff8}.cauldron-tap{position:absolute;top:43%;left:22%;width:58%;height:19%;z-index:4;border:0;background:transparent;border-radius:50%;color:transparent}.cauldron-tap.ready{box-shadow:0 0 20px 8px var(--glow),inset 0 0 24px var(--glow);animation:pulse 1.1s infinite}.cauldron-tap.stir{animation:shake .35s}.decoration-item{width:17%;height:10%;top:56%}.decoration-item .label{font-size:11px}.deco-display{position:absolute;z-index:4;top:49%;left:41%;width:18%;height:12%;object-fit:contain;filter:drop-shadow(0 3px 4px #0008);animation:pop .45s both}.final-card{position:absolute;z-index:4;left:13%;right:13%;top:28%;height:39%;background:#fffaebeb;border:4px solid #d09b66;border-radius:22px;text-align:center;color:#3c2723;box-shadow:0 10px 25px #241014aa;display:grid;grid-template-rows:1fr auto}.final-cake{display:block;max-width:65%;height:83%;object-fit:contain;margin:auto;align-self:center}.final-card strong{font-size:17px;padding:0 10px 18px}.toast{position:absolute;top:17%;left:12%;right:12%;z-index:11;text-align:center;pointer-events:none;opacity:0;color:white;font-size:20px;font-weight:900;text-shadow:0 3px 6px #2a1113}.toast.show{animation:toast .9s both}.spark{position:absolute;z-index:10;pointer-events:none;color:#ffe7a2;font-size:25px;text-shadow:0 0 10px #ffe478;animation:spark .9s forwards}.flash{position:absolute;inset:0;background:#fff2b2;z-index:10;pointer-events:none;animation:flash .55s forwards}.intro-title{position:absolute;top:15%;left:7%;right:7%;text-align:center;font-weight:900;font-size:clamp(29px,8vw,43px);line-height:1.25;color:#fff2d4;text-shadow:0 4px 3px #40221f,0 0 18px #4a241f;animation:pop .6s}.progress-note{position:absolute;z-index:6;top:9%;right:5%;font-size:13px;background:#3d231ec4;border:1px solid #e7bc8b;border-radius:99px;padding:6px 10px}.final-note{position:absolute;z-index:6;top:13%;left:10%;right:10%;text-align:center;font-size:25px;font-weight:900;text-shadow:0 3px 4px #4f261d}@keyframes walkIn{from{opacity:0;transform:translateY(30px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes breath{50%{translate:0 -6px;rotate:1deg}}@keyframes hop{50%{translate:0 -15px;rotate:-5deg}}@keyframes pulse{50%{opacity:.65;scale:1.06}}@keyframes float{50%{translate:0 -9px}}@keyframes found{50%{scale:1.35}to{scale:1;opacity:.7}}@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}@keyframes shake{50%{rotate:8deg}}@keyframes spark{to{opacity:0;transform:translate(var(--x),var(--y))}}@keyframes flash{to{opacity:0}}@keyframes toast{10%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}@media(min-width:520px){.game{border-radius:18px;margin:1vh auto}}@media(max-height:780px){.game{min-height:740px}.dialogue{bottom:28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.final-layers{position:relative;width:70%;height:100%;margin:auto;min-height:190px}.final-layers img{position:absolute;object-fit:contain;filter:drop-shadow(0 4px 4px #48302a55)}.final-layers .base{left:20%;width:60%;height:68%;bottom:4%}.final-layers .icing{left:23%;width:54%;height:38%;top:8%}.final-layers .topper{left:40%;width:20%;height:25%;top:0}.signup-note{font-size:12px;line-height:1.35;color:#69564c;margin:10px 0 0}.dialogue:has(.signup-note){padding-bottom:12px}
.final-layers .filling{width:24%;height:31%;right:0;bottom:2%;transform:rotate(8deg)}
.hotspot:not(.star){width:5.5%;height:3.5%;min-width:22px;min-height:22px}.hotspot.star{width:6%;height:4%;min-width:25px;min-height:25px}.flavor-item{width:22%;height:13%}.jar-item{width:17%;height:12%}.decoration-item{width:14%;height:8%}
.scene-icing{position:absolute;z-index:3;left:34%;top:43%;width:32%;height:14%;object-fit:contain;filter:drop-shadow(0 5px 4px #3b1e1c77);pointer-events:none;animation:pop .5s both}.deco-display{z-index:4;left:43%;top:42%;width:14%;height:9%;filter:drop-shadow(0 3px 3px #44201f88);pointer-events:none}
.final-card{top:24%;height:43%;overflow:hidden}.final-layers{width:86%;min-height:0}.final-layers .base{left:22%;width:56%;height:66%;bottom:5%}.final-layers .icing{left:29%;width:42%;height:36%;top:auto;bottom:46%}.final-layers .topper{left:43%;width:14%;height:18%;top:auto;bottom:70%}.final-layers .filling{width:18%;height:23%;right:4%;bottom:9%}.final-card strong{font-size:14px;padding:0 8px 12px}
.final-layers.finished{width:100%;height:100%}.final-layers .finished-cake{left:4%;top:5%;width:92%;height:87%;object-fit:contain}.final-layers.finished .topper{left:45%;width:10%;height:14%;bottom:auto;top:7%;filter:drop-shadow(0 2px 2px #6e453e77)}
.color-item{width:17%;height:12%;top:37%;border:0;border-radius:0;box-shadow:none;background:transparent;animation:float 2.4s infinite}.color-item:after{display:none}.color-item img{display:block;filter:drop-shadow(0 4px 4px #26140f88)}.color-item.selected{filter:drop-shadow(0 0 10px var(--glow))}.decoration-item img{transform:scale(1.55)}.scene-icing{left:27%;top:39%;width:46%;height:22%}.deco-display{left:39%;top:40%;width:22%;height:12%;transform:scale(1.5)}.final-layers.finished .topper{left:35%;width:30%;height:24%;top:4%;transform:scale(1.55)}
.dialogue:has(.answer img){max-height:46%;padding-left:70px}.dialogue:has(.answer img) .actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.answer:has(img){border-radius:12px;padding:5px 2px;min-width:0;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:13px}.answer img{display:block;width:48px;height:48px;object-fit:contain}.answer span{white-space:nowrap}
.final-layers.finished .topper{top:11%}
.final-layers.finished .selected-icing{left:0;top:0;width:100%;height:70%;transform:scale(1.55);filter:drop-shadow(0 3px 3px #56322d55);pointer-events:none}

/* Illustrated game scenes */
.scene[data-phase="intro"] .hud,.scene[data-phase="intro"] .sound{background:transparent}
.scene[data-phase="intro"] .hud-title,.scene[data-phase="intro"] .hud-count{display:none}
.intro-start{position:absolute;z-index:10;left:9.78%;top:79.07%;width:80.23%;height:10.41%;border:0;padding:0;background:transparent;touch-action:manipulation}
.intro-start img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.intro-start:focus-visible{outline:4px solid #ffdf91;outline-offset:4px;border-radius:999px}
.intro-start:active{transform:scale(.98)}
.scene[data-phase="intro"]:after{height:31%}
.scene-content{aspect-ratio:941/1672}

.character.search-guide{left:23%;top:40%;width:23%;height:23%;filter:drop-shadow(0 0 9px #ffc36b) drop-shadow(0 0 16px #f5a44999) drop-shadow(0 3px 5px #1b1311)}
.character.quiz-guide{left:0;top:48%;width:18%;height:17%}
.character.window{left:12%;top:19%;width:21%;height:17%;filter:drop-shadow(0 0 8px #ffecb6) drop-shadow(0 3px 4px #24140e)}
.character.kabo-wall{left:64%;top:21%;width:27%;height:20%;filter:drop-shadow(0 0 10px #ffe3a3) drop-shadow(0 4px 5px #301a14)}
.character.deco-guide{left:67%;top:23%;width:20%;height:16%}
.character.final-guide{left:5%;top:25%;width:23%;height:18%}
.hotspot:not(.star){width:var(--w);min-width:0;min-height:0;border-radius:36%;transform:translate(-50%,-50%);touch-action:manipulation}
.hotspot.star{width:6%;height:3.5%;min-width:24px;min-height:24px;transform:translate(-50%,-50%)}
.hotspot.hint{border-radius:50%}
.quiz-question{position:absolute;z-index:3;top:13%;left:23%;width:54%;height:23%;display:grid;place-items:center;text-align:center;padding:14px;color:#593426;font-weight:900;font-size:clamp(18px,5vw,26px);line-height:1.45;text-shadow:0 1px #fff8}
.quiz-option{position:absolute;z-index:5;width:29%;height:13%;transform:translate(-50%,-50%);border:0;background:transparent;color:#583324;font-size:14px;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation}
.quiz-option img{width:65%;height:73%;object-fit:contain;filter:drop-shadow(0 3px 3px #67462666)}
.quiz-option.correct{filter:drop-shadow(0 0 12px #faca54);animation:pop .4s}
.quiz-option.wrong{animation:shake .25s}
.pick-base{position:absolute;z-index:5;top:73%;width:26%;height:18%;transform:translate(-50%,-50%);border:0;background:transparent;color:#fff1db;font-weight:900;text-shadow:0 2px 3px #301813;filter:drop-shadow(0 5px 5px #2d181888)}
.pick-base img{width:100%;height:82%;object-fit:contain;scale:1.22}
.pick-base span{display:block;background:#4c2d23bb;border-radius:20px;padding:3px}
.jar-hit{position:absolute;z-index:5;top:50%;width:29%;height:19%;transform:translate(-50%,-50%);border:0;background:transparent;border-radius:30px}
.jar-hit:hover,.jar-hit:focus-visible{box-shadow:0 0 0 3px #ffe6a5bb}
.pigment{position:absolute;z-index:5;top:69%;width:19%;height:10%;transform:translate(-50%,-50%);border:0;background:transparent;color:white;font-size:13px;font-weight:900;text-shadow:0 2px 4px #2b1b19}
.pigment img{width:100%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 4px #24130f)}
.pigment span{display:block}
.bubble-magic{position:absolute;z-index:6;left:21%;top:42%;width:58%;height:16%;border-radius:50%;box-shadow:0 0 22px 18px #ffe5a6;animation:magic .65s both;pointer-events:none}
@keyframes magic{from{opacity:0;scale:.65}50%{opacity:1;scale:1.12}to{opacity:0;scale:1.3}}
.cake-stack{position:absolute;left:28%;top:47%;width:44%;height:24%;z-index:4;pointer-events:none;filter:drop-shadow(0 8px 5px #5b351f88)}
.cake-stack img{position:absolute;width:100%;object-fit:contain}
.cake-stack .cake-base{left:5%;bottom:0;height:83%;scale:1.12}
.cake-stack .cake-icing{left:13%;top:-3%;width:74%;height:53%;scale:1.18}
.cake-stack .cake-topper{left:35%;top:-1%;width:30%;height:35%;scale:1.2;animation:pop .45s}
.drag-deco{position:absolute;z-index:7;width:15%;height:7%;transform:translate(-50%,-50%);border:0;background:transparent;touch-action:none;filter:drop-shadow(0 3px 3px #3b201b88)}
.drag-deco img{width:100%;height:100%;object-fit:contain;scale:1.7;pointer-events:none}
.drag-deco.dragging{z-index:10;scale:1.3;filter:drop-shadow(0 0 9px #ffe3ac)}
.result-card{position:absolute;z-index:5;left:16%;top:29%;width:68%;height:35%;background:#fff3d9ed;border:3px solid #d69d65;border-radius:20px;box-shadow:0 9px 20px #28140ea8;text-align:center;color:#4a2b22}
.result-cake{position:relative;width:100%;height:84%}
.result-cake img{position:absolute;object-fit:contain;filter:drop-shadow(0 3px 4px #56352b65)}
.result-cake .cut-cake{width:95%;height:84%;left:2.5%;bottom:0;scale:1.1}
.result-cake .result-icing{width:55%;height:43%;left:22%;top:0;scale:1.2}
.result-cake .result-topper{width:21%;height:28%;left:39.5%;top:0;scale:1.2}
.result-label{font-size:14px;font-weight:900;white-space:nowrap}
.registration{position:absolute;inset:0;z-index:20;overflow:auto;padding:44px 20px 32px;background:linear-gradient(#342019ed,#271614f8),url('assets/La%20fiesta%20de%20cupcakes%20de%20Halloween-3.png') center/cover;color:#fff4df}
.registration h1{font-size:22px;line-height:1.35;margin:0 0 8px;color:#ffd98f;text-align:center}
.registration>p{text-align:center;margin:5px 0 14px;font-weight:700}
.registration .adult{background:#fff1d8;color:#482f27;border-radius:12px;padding:12px}
.registration form{display:grid;gap:12px;max-width:560px;margin:0 auto}
.registration label{display:block;font-size:14px;font-weight:800}
.registration input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.registration textarea{display:block;width:100%;margin-top:5px;padding:12px;border:2px solid #b89270;border-radius:10px;background:#fffaf0;color:#392a26;font:inherit}
.registration textarea{min-height:60px;resize:vertical}
.registration fieldset{border:1px solid #c7a878;border-radius:10px;margin:0;padding:10px 14px}
.registration legend{padding:0 5px;font-weight:800}
.registration .check{display:flex;gap:10px;align-items:center;padding:5px 0}
.registration .check input{width:20px;height:20px;flex:none}
.registration button{min-height:46px}
.registration .registration-status{font-size:14px;color:#ffe0a7;line-height:1.5;text-align:center}
.registration button:disabled{opacity:.7;cursor:wait}
.registration .registration-submit-frame{position:absolute;width:1px;height:1px;border:0;clip-path:inset(50%);pointer-events:none}
.registration .back-game{background:transparent;color:#fff5db;border:1px solid #edc48e;border-radius:20px;padding:8px 20px;margin-top:14px}
@media(max-width:420px){.quiz-question{font-size:18px}.dialogue{left:8px;right:8px;padding-left:70px}.portrait{width:65px}.speech{font-size:14px}}
/* Keep the complete cover, button, and signature inside short viewports. */
@supports selector(.game:has(.scene[data-phase="intro"])) {
  .game:has(.scene[data-phase="intro"]) {
    width: min(100%, 500px, calc(100svh * 941 / 1672));
    height: auto;
    min-height: 0;
    max-height: 100svh;
    aspect-ratio: 941 / 1672;
  }
}

/* Keep Choco perched at the window, clear of the search targets. */
.character.search-window{left:47%;top:13%;width:12%;height:12%;filter:drop-shadow(0 0 7px #ffe5a1) drop-shadow(0 3px 4px #24140e)}

/* Pointing poses face into the scene: Maho points left from the right edge,
   while Kabo points right from the left edge. Never mirror these sprites. */
.character.quiz-guide{left:82%;right:auto;top:48%;width:18%;height:17%}
.character.kabo-wall{left:5%;right:auto;top:21%;width:27%;height:20%}
.character{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.character img{user-select:none;-webkit-user-drag:none}

/* Color-mixing screen: bright bowls and aligned transparent cauldron layers. */
.scene[data-phase="color"]:after{display:none}
.cauldron-color-layer{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:fill;pointer-events:none}
.character.kabo-wall{z-index:3}
.color-bowl{position:absolute;z-index:5;top:64%;width:22%;height:13%;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;touch-action:manipulation}
.color-bowl:focus-visible{outline:3px solid #fff2bf;outline-offset:2px;box-shadow:0 0 0 5px #36231c88}
.color-bowl.selected{background:radial-gradient(ellipse,transparent 43%,#ffffff38 72%,transparent 100%);box-shadow:0 0 0 2px #fff3d5,0 0 22px 10px var(--glow),inset 0 0 18px var(--glow);animation:pulse 1s infinite}
.color-bowl:disabled{cursor:default;pointer-events:none}

/* Focused fixes for the search, recipe quiz, and muffin choice stages. */
.dialogue.compact-dialogue{min-height:0;max-height:18%;padding:9px 12px 10px;border-radius:16px;overflow:auto}
.dialogue.compact-dialogue .speaker{font-size:12px;margin:0 0 2px}
.dialogue.compact-dialogue .speech{font-size:13px;line-height:1.28;margin:0 0 6px}
.dialogue.compact-dialogue .actions{gap:5px}
.dialogue.compact-dialogue .next{min-height:36px;padding:6px 11px;font-size:12px}
.dialogue.compact-dialogue .portrait{display:none}
.search-help{position:absolute;z-index:9;right:4%;top:12%;width:48px;height:48px;border:3px solid #fff0bf;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff2be,#e99b3e 65%,#9b4a26);color:#fff9e7;font-size:29px;font-weight:1000;line-height:1;text-shadow:0 2px 3px #713714;box-shadow:0 0 0 4px #5d321d99,0 0 20px #ffdb7e;animation:help-bob 1.8s ease-in-out infinite;touch-action:manipulation}
.search-help:active{transform:scale(.92)}.search-help:disabled{opacity:.45;animation:none;cursor:default}
@keyframes help-bob{50%{translate:0 -4px;box-shadow:0 0 0 4px #5d321d99,0 0 26px #ffe3a0}}
.quiz-question{top:17%;left:18%;width:64%;height:16%;padding:10px 14px;border:2px solid #dfa96a;border-radius:18px;background:linear-gradient(145deg,#fff8e9f5,#f4dfbdf5);box-shadow:0 5px 14px #351d1788,0 0 0 4px #72472b99;color:#593426;font-size:clamp(16px,4.4vw,22px);line-height:1.35;text-shadow:none}
.quiz-option{top:63%;height:13%;width:27%;font-size:13px}
.quiz-option img{height:70%;width:69%}
.quiz-book-glimmer{position:absolute;z-index:2;left:17%;top:37%;width:66%;height:27%;overflow:hidden;pointer-events:none}
.quiz-book-glimmer:after{content:"";position:absolute;top:-30%;left:-38%;width:24%;height:170%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,#fff9d766,transparent);filter:blur(3px);animation:book-sheen 4s ease-in-out infinite}
@keyframes book-sheen{0%,34%{left:-38%;opacity:0}44%{opacity:1}75%,100%{left:118%;opacity:0}}
@media(max-width:420px){.search-help{width:44px;height:44px;right:3%;top:13%}.quiz-question{top:17%;height:16%;font-size:17px}.dialogue.compact-dialogue{left:8px;right:8px}}

.character.quiz-guide{left:83%;right:auto;top:34%;width:15%;height:14%}

/* Final layout calibration from the latest mobile screenshots. */
.dialogue.compact-dialogue{max-height:15%;padding:8px 12px 9px}
.dialogue.compact-dialogue .speech{font-size:12px;line-height:1.25;margin-bottom:5px}
.dialogue.compact-dialogue .portrait{display:none}
.dialogue.compact-dialogue:has(.portrait){padding-left:62px}
.dialogue.compact-dialogue:has(.portrait) .portrait{display:block;left:5px;bottom:4px;width:48px;height:58px}
.dialogue.compact-dialogue .next{min-height:34px;padding:5px 10px;font-size:12px}
.quiz-question{top:16%;left:16%;width:64%;height:14%;padding:8px 12px;font-size:clamp(15px,4vw,21px)}
.quiz-option{top:68%;width:29%;height:10%;padding:3px;border:2px solid #d6a164;border-radius:15px;background:linear-gradient(145deg,#fff8e9f5,#efdbb8f5);box-shadow:0 5px 12px #24130f99,0 0 0 3px #633e2977;color:#4d2d20;font-size:15px;text-shadow:none}
.quiz-option img{height:65%;width:55%;filter:drop-shadow(0 2px 3px #60422677)}
.quiz-option span{font-weight:1000;color:#4a281b;background:#fff9e6e8;border-radius:9px;padding:1px 7px;line-height:1.2}
.character.quiz-guide{z-index:4;left:80%;right:auto;top:17%;width:18%;height:15%}
.pick-base{top:66%;height:15%;width:25%}
.pick-base img{height:84%;scale:1.18}
.dialogue.compact-dialogue .portrait{display:none}
.character.deco-guide{left:32%;right:auto;top:17%;width:18%;height:14%;z-index:5}
.character.final-guide{left:1%;right:auto;top:49%;width:15%;height:12%;z-index:6;animation:mori-float 3.2s ease-in-out infinite}
@keyframes mori-float{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -12px;rotate:3deg}}
.search-help{top:12%;right:4%}
.dialogue.compact-dialogue:has(.portrait){min-height:82px;padding-top:8px;padding-bottom:8px}
@media(max-width:420px){.quiz-option{font-size:13px}.quiz-option img{width:52%}.character.quiz-guide{left:80%;top:16%;width:18%;height:14%}.character.deco-guide{left:31%;top:16%;width:19%;height:14%}}
.scene[data-phase="color"]+.dialogue.compact-dialogue{max-height:11%;padding-top:6px;padding-bottom:7px}
.scene[data-phase="decorate"]+.dialogue.compact-dialogue{max-height:12%;padding-top:6px;padding-bottom:7px}
.scene[data-phase="final"]+.dialogue.compact-dialogue{max-height:17%}

/* Decoration stage: bring the cupcake back onto its platform. */
.cake-stack{left:29%;top:40%;width:42%;height:22%}
/* Make every tray option crisp and bright; the dialogue card already supplies contrast. */
.scene[data-phase="decorate"]:after{display:none}
.drag-deco.source-copy{width:6.7%;height:5.6%;filter:drop-shadow(0 2px 2px #341c14aa)}
.drag-deco.source-copy img{scale:1.35;filter:saturate(1.08) contrast(1.08)}
.drag-deco.source-copy.dragging{width:8%;height:7%;}
.deco-placement-layer{position:absolute;left:37%;top:38%;width:26%;height:15%;z-index:6;pointer-events:none}
.deco-placement-layer .placed-deco{position:absolute;z-index:6;width:48%;height:50%;object-fit:contain;transform:translate(-50%,-50%) scale(1.16);filter:drop-shadow(0 3px 3px #41241d99);pointer-events:none;animation:pop .25s both}
.result-cake .result-decoration{position:absolute;z-index:5;width:24%;height:28%;object-fit:contain;transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 3px 3px #462a2388);pointer-events:none}
.final-mori-fairy{position:absolute;z-index:7;right:1%;top:0;width:25%;height:28%;object-fit:contain;filter:drop-shadow(0 4px 5px #54322177);pointer-events:none;animation:fairy-hover 2.7s ease-in-out infinite}
@keyframes fairy-hover{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -9px;rotate:5deg}}
.music{position:absolute;top:calc(8px + env(safe-area-inset-top));right:61px;z-index:9;width:39px;height:39px;border:1px solid #f4d0a8b5;border-radius:50%;background:#38221bba;color:#fff;font-size:21px;box-shadow:0 2px 8px #170d0d66}
.sound{font-size:19px}
@media(max-width:420px){.music{right:57px;width:36px;height:36px}.sound{width:36px;height:36px}.drag-deco.source-copy{width:7.2%;height:5.8%}.final-mori-fairy{width:27%;height:29%}}
.drag-deco.source-copy{width:7.2%;height:6.2%}
.drag-deco.source-copy img{scale:1.4}
@media(max-width:420px){.drag-deco.source-copy{width:7.2%;height:6.2%}}