.speech-game{position:fixed;inset:0;z-index:1000;overflow:clip;background:#e9e6d4;color:#524530;font-family:'Dictionary Round',sans-serif;isolation:isolate}
.speech-game *{box-sizing:border-box}.speech-game button{font:inherit;cursor:pointer;border:3px solid #987b53;border-radius:18px;padding:12px 22px;color:#58442c;background:#fff2cf;box-shadow:0 4px 0 #987b53}.speech-game button:hover{background:#e7f4c8}.speech-game button:focus-visible{outline:4px solid #75bde1;outline-offset:4px}.speech-game [hidden]{display:none!important}
.sg-corridor{position:absolute;inset:0;background:linear-gradient(#a7d8d9 0%,#e9f1cf 58%,#b8c49b 58%);perspective:500px}.sg-distance{position:absolute;inset:18% 29% 13%;border:45px solid #b5b998;border-bottom:0;border-radius:90px 90px 0 0;background:#e1edca;box-shadow:0 0 0 32px #d0cfb0,0 0 0 65px #9da98b}.sg-floor{position:absolute;bottom:-25%;left:-25%;width:150%;height:65%;transform:rotateX(52deg);background:repeating-linear-gradient(0deg,transparent 0 65px,#b6ad8a 66px 70px),repeating-linear-gradient(90deg,#d5cfaa 0 140px,#b6ad8a 141px 145px);transform-origin:bottom}
.sg-top{position:absolute;z-index:6;top:3%;left:4%;right:4%;display:flex;align-items:center;gap:20px}.sg-count{color:#9ac858;font-size:clamp(22px,4vw,50px);text-shadow:0 3px white;-webkit-text-stroke:1px white;paint-order:stroke fill}.sg-time{margin-left:auto;color:#62b9db;background:#fff9e8;border:3px solid #c7b990;border-radius:50%;width:80px;height:80px;display:grid;place-items:center;font-size:30px}.sg-exit{font-size:16px!important}
.sg-wall{position:absolute;inset:17% 13% 17%;perspective:800px;filter:drop-shadow(0 15px 8px #4a513b35)}.sg-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;border:5px solid #9b9879;background-color:#d2c5a0;background-image:linear-gradient(0deg,transparent 90%,#9b9879 90%),linear-gradient(90deg,transparent 95%,#b2a588 95%);background-size:100% 25%,33.33% 100%;box-shadow:inset 0 4px 0 #f4e9c7,inset 0 -10px 0 #afa17d;transition:transform .85s cubic-bezier(.55,.05,.25,1),opacity .7s;border-radius:18px 3px 3px 18px}.sg-left{left:0}.sg-right{right:0;border-radius:3px 18px 18px 3px}.sg-fruit{position:absolute;top:12%;bottom:12%;width:150%;display:grid;place-items:center;border:8px solid #ae956b;background:#fff4d9;border-radius:40px;box-shadow:inset 0 0 0 6px #ebdbb5}.sg-left .sg-fruit{left:25%}.sg-right .sg-fruit{right:25%}.sg-fruit img{width:76%;height:86%;object-fit:contain;max-height:100%}.sg-timer{position:absolute;bottom:11%;left:25%;right:25%;height:16px;border:3px solid #897e60;border-radius:20px;background:#f7f0d6;overflow:hidden}.sg-timer i{display:block;height:100%;background:#9ed58b;transform-origin:left;transition:transform .05s linear}.sg-status{position:absolute;bottom:2%;left:10%;right:10%;text-align:center;font-family:inherit;font-size:clamp(13px,2vw,23px);min-height:1.5em}
.sg-panel{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:min(570px,88vw);max-height:83dvh;overflow:auto;padding:30px;text-align:center;background:#fff9e9f5;border:5px solid #aa906a;border-radius:28px;box-shadow:0 14px 0 #62563e30}.sg-panel h2{font-size:clamp(26px,5vw,48px);color:#689765;margin:0 0 18px}.sg-panel p{font-family:system-ui,sans-serif;font-size:17px;line-height:1.7;white-space:pre-line;margin:0 0 24px}.sg-panel button{background:#d7edb7}
.sg-rubble{display:none;position:absolute;inset:0}.sg-rubble i{position:absolute;left:var(--x);top:var(--y);width:16.67%;height:33.33%;background:#d2c5a0;border:4px solid #9b9879;border-radius:8px;box-shadow:inset 0 5px #f4e9c7}
.speech-game[data-state=passing] .sg-current .sg-left{transform:translateX(-125%) rotateY(12deg);opacity:0}.speech-game[data-state=passing] .sg-current .sg-right{transform:translateX(125%) rotateY(-12deg);opacity:0}.speech-game[data-state=passing] .sg-corridor{animation:sg-forward 1.1s ease-in forwards}.speech-game[data-state=fail] .sg-current .sg-half{visibility:hidden}.speech-game[data-state=fail] .sg-current .sg-rubble{display:block}.speech-game[data-state=fail] .sg-current .sg-rubble i{animation:sg-fall .85s ease-in both;animation-delay:calc(var(--i)*.018s)}.speech-game[data-state=fail] .sg-panel h2{color:#ed393d;font-size:clamp(65px,14vw,130px);text-shadow:0 5px #fff,0 9px #a6252530}.speech-game[data-state=complete] .sg-wall{display:none}
@keyframes sg-forward{to{transform:scale(1.6)}}@keyframes sg-fall{to{transform:translateY(100vh) rotate(var(--turn));opacity:0}}
@media(max-height:500px){.sg-top{top:2%;gap:10px}.sg-time{width:48px;height:48px;font-size:22px}.sg-exit{padding:7px 14px!important}.sg-wall{inset:20% 22% 18%}.sg-panel{padding:18px}.sg-panel h2{margin-bottom:8px}.sg-panel p{font-size:14px;margin-bottom:12px}.sg-status{bottom:0}.sg-timer{bottom:12%}}
@media(max-width:600px) and (orientation:portrait){.sg-top{gap:10px}.sg-time{width:58px;height:58px;font-size:24px}.sg-exit{padding:10px!important}.sg-wall{inset:24% 5% 23%}.sg-fruit{border-width:5px}.sg-panel{padding:22px}.sg-count{font-size:24px}}
@media(prefers-reduced-motion:reduce){.speech-game *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}

/* Whole-image sizing is explicit, avoiding intrinsic grid minimums and clipping. */
.sg-fruit{display:block;min-width:0;min-height:0}
.sg-fruit img{position:absolute;inset:8%;width:84%;height:84%;max-width:84%;max-height:84%;object-fit:contain;display:block}
.sg-wall{z-index:3;transform-origin:50% 55%}
.sg-next{z-index:2;transform:scale(.58);filter:brightness(.85) drop-shadow(0 8px 6px #4a513b35)}
.sg-far{z-index:1;transform:scale(.34);filter:brightness(.7)}
.sg-away{display:none}
.speech-game[data-state=passing] .sg-next{animation:sg-approach 1.1s ease-in-out forwards}
.speech-game[data-state=passing] .sg-far{animation:sg-follow 1.1s ease-in-out forwards}
@keyframes sg-approach{0%,25%{transform:scale(.58);filter:brightness(.85)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes sg-follow{0%,25%{transform:scale(.34);filter:brightness(.7)}100%{transform:scale(.58);filter:brightness(.85)}}

/* Both pieces share the same complete image coordinates, without a center border. */
.sg-half{width:100%;border-radius:18px;left:0;right:auto}
.sg-left{clip-path:inset(0 calc(50% - 1px) 0 0)}
.sg-right{clip-path:inset(0 0 0 50%)}
.sg-left .sg-fruit,.sg-right .sg-fruit{width:75%;left:12.5%;right:auto}
.speech-game .sg-freeze{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 12px;background:#e1f7ff;border-color:#7ebbd7;box-shadow:0 4px #7ebbd7}
.sg-freeze span{font-size:38px;line-height:1.15}.sg-freeze small{font-size:11px}.sg-freeze:disabled{opacity:.5;cursor:default}

.sg-frozen .sg-time{background:#ccefff;border-color:#69c2ed}.sg-frozen .sg-timer i{background:#85d8ff}
@media(max-width:600px),(max-height:500px){.speech-game .sg-freeze{padding:3px 6px}.sg-freeze span{font-size:26px}.sg-freeze small{font-size:9px}.sg-top{gap:8px}.sg-time{flex-shrink:0}.sg-count{font-size:clamp(17px,4vw,28px)}}

.sg-revive-count{font-size:clamp(12px,1.5vw,20px);color:#a86475;background:#fff0e7;border:2px solid #dbb4aa;padding:8px 10px;border-radius:14px;white-space:nowrap}
.speech-game .sg-revive{display:block;margin:18px auto 0;background:#f7d7e5;border-color:#b88299;box-shadow:0 4px #b88299}
.speech-game[data-state=complete] .sg-panel h2{font-size:clamp(25px,4.6vw,44px);line-height:1.3}
@media(max-width:600px),(max-height:500px){.sg-revive-count{font-size:11px;padding:5px}.sg-top{left:2%;right:2%;gap:5px}.sg-count{font-size:20px}.sg-time{width:48px;height:48px;font-size:20px}.speech-game .sg-exit{font-size:12px!important;padding:8px!important}}

.speech-game .sg-result-replay{display:block;margin:14px auto 0;background:#e1efff;font-size:14px}
.sg-fireworks{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden}
.sg-firework-flower{position:absolute;width:clamp(150px,23vw,300px);height:auto;overflow:visible;opacity:0;transform:translate(-50%,-50%) scale(.02);animation:sg-flower 1.35s cubic-bezier(.16,.65,.32,1) var(--delay) forwards;filter:drop-shadow(0 0 3px #fff9)}
@keyframes sg-flower{0%{opacity:0;transform:translate(-50%,-50%) scale(.02)}12%{opacity:1}55%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-43%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.sg-firework-flower{animation:none;opacity:.55;transform:translate(-50%,-50%) scale(.7)}}

.sg-reward-layer{position:absolute;inset:0;z-index:14;pointer-events:none}
.sg-reward-sticker{position:absolute;left:50%;top:50%;width:min(58vw,52vh,440px);height:min(58vw,52vh,440px);margin-left:calc(min(58vw,52vh,440px)/-2);margin-top:calc(min(58vw,52vh,440px)/-2);object-fit:contain;filter:drop-shadow(0 8px 15px #654b3655)}
.speech-game .sg-reward-bag{position:absolute;right:3%;bottom:5%;width:clamp(72px,11vw,140px);padding:0;background:none;border:0;box-shadow:none;pointer-events:auto}
.sg-reward-bag img{display:block;width:100%;height:auto}.sg-bag-received{animation:sg-bag-pop .5s ease-out}
.sg-reward-note{position:absolute;bottom:17%;left:15%;right:15%;text-align:center;background:#fff8e9ee;border-radius:20px;padding:10px;color:#597643;font-size:clamp(13px,2vw,21px)}
@keyframes sg-bag-pop{50%{transform:scale(1.18) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.sg-bag-received{animation:none}}

.sg-monkey{display:flex;align-items:center;justify-content:center;gap:12px;margin:-8px 0 12px;animation:sg-monkey-peek .6s ease-out both}.sg-monkey img{width:clamp(90px,15vw,170px);height:clamp(100px,17vw,185px);object-fit:contain;transform:rotate(-6deg)}.sg-monkey-bubble{background:#fff;border:3px solid #94714c;border-radius:24px 24px 24px 4px;padding:14px;color:#725331;font-size:clamp(19px,3vw,30px)}
.sg-monkey-surprised img{transform:rotate(7deg) scale(1.08);transition:transform .25s}.sg-monkey-leaving{transform:translateX(80px);opacity:0;transition:transform .45s,opacity .45s}.speech-game .sg-rest{display:block;margin:15px auto 0;background:#e4edf5;font-size:16px}.sg-panel:has(.sg-monkey) h2{font-size:clamp(38px,8vw,65px)!important;margin-bottom:8px}.sg-panel:has(.sg-monkey) p{font-size:14px;margin-bottom:8px}.sg-panel:has(.sg-monkey) .sg-result-replay{font-size:12px;padding:6px 12px}
@keyframes sg-monkey-peek{from{transform:translateY(65px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-height:500px){.sg-monkey img{width:85px;height:95px}.sg-monkey-bubble{font-size:20px;padding:8px}.sg-panel:has(.sg-monkey){padding:12px}.sg-panel:has(.sg-monkey) h2{font-size:36px!important}.sg-panel:has(.sg-monkey) .sg-revive,.sg-panel:has(.sg-monkey) .sg-rest{display:inline-block;margin:8px 5px 0;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.sg-monkey{animation:none}.sg-monkey-leaving,.sg-monkey-surprised img{transition:none}}

.sg-monkey-choices{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-top:15px}.speech-game .sg-monkey-choices .sg-revive,.speech-game .sg-monkey-choices .sg-rest{display:block;flex:1;min-width:0;margin:0!important;padding:10px 8px;font-size:clamp(15px,2.2vw,22px)}.sg-monkey-choices small{display:block;font-family:system-ui,sans-serif;font-size:12px;margin-top:5px}
.speech-game[data-state=break] .sg-wall,.speech-game[data-state=break] .sg-timer{visibility:hidden}
.sg-monkey.sg-break-character{position:absolute;z-index:12;inset:22% 10% 15%;margin:0;gap:4%;animation:sg-monkey-peek .6s ease-out both}.sg-break-character img{width:min(32vw,310px);height:min(48vh,350px)}.sg-break-character .sg-monkey-bubble{max-width:48%;font-size:clamp(22px,3vw,40px);padding:24px;line-height:1.5}
@media(max-width:600px){.sg-monkey.sg-break-character{inset:22% 4% 15%;gap:8px}.sg-break-character .sg-monkey-bubble{padding:12px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.sg-monkey.sg-break-character{animation:none}}

.sg-break-character .sg-monkey-bubble{white-space:pre-line;word-break:keep-all;text-align:center}