:root{--page-bg:hsl(307.4 50.6% 26.0%);--accent:hsl(307.4 50.6% 80%)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--page-bg);color:#301329;font-family:Arial,"PingFang SC",sans-serif;display:flex;justify-content:center;align-items:center;padding:20px}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #301329;outline-offset:4px}.game{width:min(100%,430px);background:var(--page-bg);border-radius:32px;padding:25px 24px 18px;box-shadow:0 18px 65px #68205021}header{color:#fff4fb}.progress-row{display:flex;gap:14px;align-items:center}.count{font-size:14px;font-weight:bold;white-space:nowrap}.track{height:10px;border-radius:20px;overflow:hidden;background:#ffffff24;flex:1}#fill{height:100%;width:0;background:var(--accent);border-radius:20px;transition:width .6s}.brand{text-align:center;font-size:25px;font-weight:800;margin:18px 0 22px;letter-spacing:-1px}.brand>span:first-child{font-weight:800}.edition{display:block;font-size:12px;letter-spacing:1px;font-weight:400;margin-top:5px}.stage{perspective:1400px;width:min(100%,calc((100svh - 295px)*.75));min-width:150px;margin:0 auto;aspect-ratio:3/4;position:relative}.stage:before,.stage:after{content:"";position:absolute;inset:0;background:var(--accent);border-radius:17px;transform:translateY(-8px) scale(.95)}.stage:before{transform:translateY(-15px) scale(.89);opacity:.6}.card{position:relative;z-index:1;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.65,.25,1)}.card.flipped{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:10px}.face img{width:100%;height:100%;display:block;object-fit:contain}.back{transform:rotateY(180deg)}footer{text-align:center}.prompt{color:#fff1fa;font-size:14px;margin:13px 0 10px}.prompt strong{font-size:19px;margin-left:6px}.actions{display:flex;gap:10px}.actions button{height:48px;border:0;border-radius:12px;box-shadow:0 4px 0 #0004}.mic{width:52px;flex-shrink:0;background:var(--accent);color:#411536}.mic svg{height:23px;width:23px}.mic.listening{background:#fff;animation:pulse 1s infinite}.mic:disabled{opacity:.45;cursor:default}.learn{flex:1;background:#fff5fa;color:var(--page-bg);font-weight:bold;font-size:19px;letter-spacing:.6px}.actions button:active{transform:translateY(3px);box-shadow:0 1px 0 #0004}.status{font-size:13px;color:#fff3fb;line-height:1.5;min-height:39px;margin:12px 0 2px}.note{font-size:12px;color:#ffffffbf;margin:0}@keyframes pulse{50%{box-shadow:0 0 0 5px #f8cde566}}@media(max-width:480px){body{padding:10px;background:var(--page-bg)}.game{padding:18px 15px 12px;box-shadow:none;border-radius:22px}.brand{margin:14px 0 24px}.stage{width:min(100%,calc((100svh - 275px)*.75))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.count{display:none}

body,.game{transition:background-color .45s ease}.stage:before,.stage:after,.mic,#fill{transition:background-color .45s ease,width .6s}button:focus-visible{outline-color:#fff}
/* Keep the controls anchored while hiding the word prompt in every state. */
.prompt{visibility:hidden;height:23px;min-height:23px;line-height:23px;overflow:hidden}
.status{height:4.5em;min-height:4.5em;overflow:auto}

footer{position:relative}
.settings-button{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:5;width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff55;border-radius:12px;background:var(--page-bg);color:#fff5fa;box-shadow:0 3px 0 #0003}.settings-button svg{width:22px;height:22px}
#settings-panel{position:fixed;inset:64px auto auto 12px;margin:0;width:min(300px,calc(100vw - 24px));padding:20px;border:1px solid #ffffff60;border-radius:20px;background:#fff5fa;color:#301329;box-shadow:0 14px 50px #0005}#settings-panel::backdrop{background:#0005}.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.settings-heading h2{font-size:20px;margin:0}.settings-heading button{border:0;background:transparent;color:inherit;font-size:28px;width:36px;height:36px;border-radius:8px}#settings-panel label{display:flex;justify-content:space-between;font-size:15px;font-weight:bold}#volume{display:block;width:100%;height:32px;margin:12px 0 0;accent-color:var(--page-bg)}.volume-caption{font-size:12px;opacity:.7;margin:0 0 24px}.restart-button{width:100%;min-height:44px;border:0;border-radius:12px;background:var(--page-bg);color:#fff5fa;font-weight:bold}#settings-panel button:focus-visible,#volume:focus-visible{outline:3px solid var(--page-bg);outline-offset:3px}

#front-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#front-video[hidden]{display:none}

.face img[hidden]{display:none}






.creator-credit{text-align:center}.creator-credit a{color:inherit;font-weight:bold;text-decoration:none}.creator-credit a:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* Compact mobile header; keep settings in its original corner. */
@media(max-width:480px){
 body{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 .game{padding:18px 6px 10px}
 .progress-row{margin-left:50px;height:20px}
 .brand{margin:10px 0 42px}
 .stage{width:min(100%,calc((100svh - 240px - env(safe-area-inset-bottom))*.75))}
 .prompt{height:0;min-height:0;margin:46px 0 0}
 .status{height:3em;min-height:3em;margin-top:10px}
}