*{box-sizing:border-box;margin:0;padding:0}:root{--purple:#4A1A63;--purple-soft:#6B3A85;--amber:#FFC42E;--orange:#FF7A2F;--orange-dark:#DD5E15;--teal:#2FAFAF;--teal-dark:#218A8A;--cream:#FFF7EA;--cream-2:#FCEBD2;--white:#fff;--shadow:#DFCBAE;--font-brand:ui-rounded,"SF Pro Rounded",Nunito,Quicksand,"Hiragino Maru Gothic ProN","Trebuchet MS",system-ui,sans-serif}html,body{min-height:100%;font-family:var(--font-brand);color:var(--purple);background:var(--cream)}body{min-height:100vh;min-height:100dvh;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--amber);outline-offset:3px}#app,.screen{min-height:100vh;min-height:100dvh}.screen{display:none}.screen.active{display:flex}.hidden{display:none!important}.menu-screen{flex-direction:column;align-items:center;overflow-y:auto;padding:clamp(16px,4vh,34px) 16px}.brand-mark{width:clamp(86px,23vw,122px);height:auto}h1{margin-top:8px;font-size:clamp(30px,8vw,48px);text-align:center}.tagline{width:min(480px,94vw);margin:12px 0 25px;color:var(--purple-soft);font-size:clamp(16px,4vw,20px);line-height:1.5;text-align:center}.menu-buttons{display:grid;gap:14px;width:min(340px,92vw)}.big-btn{min-height:56px;border:0;border-radius:16px;padding:10px 18px;color:var(--white);background:var(--orange);box-shadow:0 5px 0 var(--orange-dark);font-size:18px;font-weight:800;cursor:pointer}.big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--orange-dark)}.big-btn.ghost{color:var(--purple);background:var(--white);box-shadow:0 5px 0 var(--shadow)}.reset-btn{background:var(--purple-soft);box-shadow:0 5px 0 var(--purple)}.portal-link{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;padding:10px 20px;border-radius:999px;color:var(--purple);background:var(--white);box-shadow:0 3px 0 var(--shadow);font-weight:700;text-decoration:none}.build{margin-top:14px;color:var(--purple-soft);font-size:12px}.menu-header{display:flex;align-items:center;gap:14px;width:min(680px,100%);margin-bottom:18px}.menu-header h2{font-size:clamp(21px,5vw,30px)}.subtle{margin-top:4px;color:var(--purple-soft);font-size:14px}.icon-btn{flex:0 0 auto;min-width:48px;min-height:48px;border:0;border-radius:14px;color:var(--purple);background:var(--white);box-shadow:0 3px 0 var(--shadow);font-size:20px;cursor:pointer}.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}.stage-grid{display:grid;gap:14px;width:min(680px,100%)}.stage-card{display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:12px;min-height:88px;border:0;border-radius:18px;padding:12px;color:var(--purple);background:var(--white);box-shadow:0 4px 0 var(--shadow);text-align:left;cursor:pointer}.stage-card:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}.stage-card:disabled{opacity:.55;cursor:default}.stage-icon{font-size:38px;text-align:center}.stage-copy strong{display:block;font-size:18px}.stage-copy span{display:block;margin-top:4px;color:var(--purple-soft);font-size:14px;line-height:1.35}.stage-state{font-size:22px}#screen-game{flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#E5F8F4 0 34%,var(--cream) 34%)}.game-header{display:flex;align-items:center;gap:8px;min-height:64px;padding:8px 10px;background:rgba(255,255,255,.94);box-shadow:0 2px 0 var(--cream-2)}.round-meta{display:flex;flex:1;min-width:0;flex-direction:column;text-align:center}.round-meta strong{overflow:hidden;font-size:clamp(15px,4vw,19px);text-overflow:ellipsis;white-space:nowrap}.round-meta span{color:var(--purple-soft);font-size:13px}.play-area{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;overflow-y:auto;padding:clamp(10px,3vh,22px) 12px 18px}.instruction{min-height:30px;font-size:clamp(17px,4.5vw,21px);font-weight:900;text-align:center}.clue-card{display:flex;min-width:150px;min-height:116px;align-items:center;justify-content:center;gap:10px;margin-top:6px;border:5px solid var(--amber);border-radius:26px;padding:12px 18px;background:var(--white);box-shadow:0 6px 0 var(--shadow)}.clue-emoji{font-size:clamp(46px,14vw,70px)}.clue-word{font-size:clamp(27px,8vw,42px);font-weight:900;text-transform:capitalize}.clue-card.audio-card{font-size:64px}.couplet{width:min(520px,94vw);min-height:34px;margin-top:10px;font-size:clamp(18px,5vw,26px);font-weight:900;line-height:1.4;text-align:center}.choices{display:grid;grid-template-columns:repeat(3,minmax(88px,145px));justify-content:center;gap:clamp(8px,2.5vw,15px);width:min(100%,500px);margin-top:16px}.choices.four{grid-template-columns:repeat(2,minmax(120px,180px));max-width:390px}.choice-btn{position:relative;display:flex;min-height:120px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;border-radius:20px;padding:8px;color:var(--purple);background:var(--white);box-shadow:0 5px 0 var(--shadow);cursor:pointer;touch-action:manipulation}.choice-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--shadow)}.choice-btn:disabled{cursor:default}.choice-emoji{font-size:clamp(38px,11vw,58px)}.choice-word{font-size:clamp(15px,4vw,20px);font-weight:900;text-transform:capitalize;overflow-wrap:anywhere}.audio-choice .choice-emoji{font-size:45px}.audio-choice.heard{border:4px solid var(--teal);background:#E8FAF7}.choice-btn.selected{border:4px solid var(--teal-dark);background:#E8FAF7}.choice-btn.correct{border:4px solid var(--teal-dark);background:#E8FAF7;animation:bounce .75s ease}.choice-btn.wobble{animation:wobble .4s ease}.selection-count{min-height:24px;margin-top:8px;color:var(--purple-soft);font-weight:800}.feedback{min-height:34px;margin-top:10px;font-size:clamp(16px,4vw,20px);font-weight:900;text-align:center}.feedback.success{color:var(--teal-dark)}.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(74,26,99,.58)}.card{width:min(420px,94vw);max-height:90vh;overflow-y:auto;border-radius:22px;padding:24px;background:var(--white);text-align:center}.card h2{font-size:clamp(23px,6vw,31px)}.card p{margin-top:10px;color:var(--purple-soft);font-size:16px;line-height:1.5}.celebration{font-size:60px;animation:bounce .8s ease}.card-buttons{display:grid;gap:12px;margin-top:20px}.setting-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 4px;font-size:17px;font-weight:800;text-align:left;cursor:pointer}.setting-row input{width:24px;height:24px;accent-color:var(--teal-dark)}@keyframes wobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-3deg)}75%{transform:translateX(7px) rotate(3deg)}}@keyframes bounce{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}@media(max-width:390px){.game-header{gap:5px;padding-inline:6px}.icon-btn{min-width:44px;min-height:44px}.choices{gap:7px;grid-template-columns:repeat(3,1fr)}.choice-btn{min-height:108px;padding:5px}.stage-card{grid-template-columns:50px 1fr auto;padding:10px}}@media(orientation:landscape) and (max-height:590px){.game-header{min-height:54px}.play-area{padding-top:5px}.clue-card{min-height:78px}.clue-emoji{font-size:40px}.choices{margin-top:7px}.choice-btn{min-height:88px}.feedback{margin-top:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
