*{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)}.big-btn:disabled{opacity:.5;cursor:default}.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:70px 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:27px;text-align:center;white-space:nowrap}.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,#DFF4E3 0 46%,var(--cream) 46%)}.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:31px;font-size:clamp(17px,4.5vw,22px);font-weight:900;text-align:center}.path-wrap{position:relative;width:min(100%,720px);margin-top:10px;padding-top:32px;overflow-x:auto;overflow-y:hidden}.pattern-path{display:flex;justify-content:center;gap:clamp(6px,2vw,13px);min-width:max-content;padding:8px 10px 16px}.stone{display:grid;place-items:center;width:clamp(50px,13vw,72px);height:clamp(50px,13vw,72px);border:4px solid #fff;border-radius:22px;background:#fff;box-shadow:0 5px 0 #79A77A;font-size:clamp(29px,8vw,42px);font-weight:900}.stone.blank{border:4px dashed var(--purple-soft);color:var(--purple-soft);background:rgba(255,255,255,.7)}.dot-token{letter-spacing:2px;font-size:clamp(18px,5vw,28px);overflow-wrap:anywhere;text-align:center}.walker{position:absolute;top:0;left:12%;z-index:3;font-size:30px;transition:left .8s ease;transform:translateX(-50%)}.walker.walk{left:88%}.choices{display:flex;justify-content:center;gap:clamp(10px,3vw,18px);width:min(100%,500px);margin-top:18px}.choice-btn,.palette-btn{display:grid;place-items:center;min-width:72px;min-height:72px;border:0;border-radius:18px;background:#fff;box-shadow:0 5px 0 var(--shadow);font-size:40px;font-weight:900;cursor:pointer}.choice-btn:active,.palette-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--shadow)}.choice-btn.correct{border:4px solid var(--teal-dark);background:#E8FAF7}.choice-btn.wobble{animation:wobble .4s ease}.creator{display:flex;width:min(560px,100%);flex-direction:column;align-items:center;margin-top:8px}.creator>p{font-weight:900;text-align:center}.creator-slots{display:flex;gap:10px;margin:9px 0}.creator-slot{display:grid;place-items:center;width:64px;height:64px;border:4px dashed var(--purple-soft);border-radius:17px;background:rgba(255,255,255,.72);font-size:36px}.creator-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}.palette-btn{min-width:54px;min-height:54px;font-size:31px}.feedback{min-height:34px;margin-top:12px;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:#fff;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}.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)}}@media(max-width:390px){.game-header{gap:5px;padding-inline:6px}.icon-btn{min-width:44px;min-height:44px}.stage-card{grid-template-columns:58px 1fr auto;padding:10px}.stage-icon{font-size:22px}.stone{border-radius:16px}.choice-btn{min-width:68px;min-height:68px}}@media(orientation:landscape) and (max-height:590px){.game-header{min-height:54px}.play-area{padding-top:5px}.path-wrap{margin-top:3px;padding-top:25px}.stone{width:50px;height:50px}.choices{margin-top:8px}.creator-slots{margin:4px 0}.palette-btn{min-height:48px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}