:root{--parchment: #f6ecd7;--parchment-deep: #efe0c2;--ink: #3a2f22;--colonial: #2c4f7c;--colonial-deep: #1d3a5f;--brick: #a94438;--field: #6a9251;--gold: #e9b949;--gold-deep: #b98a1f;--wood: #a97c48;--wood-deep: #7a5b3a;--smoke: #faf6ec}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:Comic Sans MS,Comic Neue,Segoe UI Rounded,ui-rounded,Verdana,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 12%,rgba(242,201,76,.14),transparent 42%),radial-gradient(circle at 82% 88%,rgba(44,79,124,.1),transparent 46%),linear-gradient(180deg,var(--parchment) 0%,var(--parchment-deep) 100%);-webkit-tap-highlight-color:transparent;user-select:none}button{font-family:inherit;cursor:pointer;touch-action:manipulation}#app,.game{height:100dvh}.game{display:flex;flex-direction:column;width:100%;max-width:1180px;margin:0 auto;padding:clamp(4px,1.2vw,14px);gap:clamp(6px,1.4dvh,14px)}.stage{position:relative;flex:0 0 auto;display:flex;justify-content:center}.battlefield{position:relative;width:min(100%,calc(52dvh * 1.7857));aspect-ratio:1000 / 560;border:clamp(3px,.9vw,7px) solid #b7a98c;border-radius:clamp(10px,2vw,22px);overflow:hidden;box-shadow:0 4px #7a5b3a59,0 10px 26px #3a2f2238,inset 0 0 0 3px #faf6ec8c;background:#aecfe3}.bf-scene{display:block;width:100%;height:100%}.company{transition:transform 1.25s ease-in-out;will-change:transform}.soldier{transition:transform 1s ease-in-out}.wave{transform-box:fill-box;transform-origin:left center;animation:flag-wave 2.8s ease-in-out infinite}@keyframes flag-wave{0%,to{transform:rotate(0) skewY(0)}50%{transform:rotate(2.4deg) skewY(1.6deg)}}.cloud{animation:cloud-drift 26s ease-in-out infinite alternate}.cloud.c2{animation-duration:34s;animation-delay:-8s}.cloud.c3{animation-duration:30s;animation-delay:-16s}@keyframes cloud-drift{0%{translate:-14px 0}to{translate:22px 0}}.walk{transform-box:fill-box}.marching .liberty .walk{animation:march-bob .5s ease-in-out infinite}.marching .liberty .soldier:nth-child(2n) .walk{animation-delay:.25s}.leg{transform-box:fill-box;transform-origin:50% 12%}.marching .leg-a{animation:step-swing .5s ease-in-out infinite}.marching .leg-b{animation:step-swing .5s ease-in-out infinite reverse}.stick{transform-box:fill-box;transform-origin:15% 15%}.marching .stick-a{animation:stick-tap .25s ease-in-out infinite alternate}.marching .stick-b{animation:stick-tap .25s ease-in-out infinite alternate-reverse}@keyframes march-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3.5px)}}@keyframes step-swing{0%,to{transform:rotate(13deg)}50%{transform:rotate(-13deg)}}@keyframes stick-tap{0%{transform:rotate(0)}to{transform:rotate(-22deg)}}.from-1 .liberty .s1{transform:translate(-62px,2px)}.from-1 .liberty .s2{transform:translate(-34px,-6px) scale(.94)}.from-1 .liberty .s3{transform:translate(-40px,4px)}.from-1 .liberty .s4{transform:translate(-12px,-5px) scale(.94)}.from-3 .liberty .flagbearer{transform:translate(50px,1px)}.from-7 .liberty .flagbearer{transform:translate(58px,-2px)}.from-7 .liberty .drummer{transform:translate(30px,1px)}.puff{opacity:0;transform-box:fill-box;transform-origin:center}.stage-6 .puff{opacity:.95;animation:puff-rise 2.6s ease-out forwards}.stage-6 .puff.p2{animation-delay:.22s}.stage-6 .puff.p3{animation-delay:.45s}.stage-6 .cannon .barrel{animation:recoil .5s ease-out}@keyframes puff-rise{0%{opacity:0;transform:translate(-14px,12px) scale(.3)}22%{opacity:.95}to{opacity:0;transform:translate(16px,-46px) scale(1.7)}}@keyframes recoil{0%{transform:translate(0)}35%{transform:translate(-7px)}to{transform:translate(0)}}.opp-flag{transition:transform 1.2s ease-in-out}.from-9 .opp-flag{animation:none;transform:translateY(44px) rotate(26deg)}.company.opposing{transition:transform 1.6s ease-in-out,opacity 1.2s ease}.stage-10 .company.opposing{opacity:0}.victory-flag{transform:translateY(96px);opacity:0;transition:transform 1.6s ease-in-out .2s,opacity .5s ease .2s}.stage-10 .victory-flag{transform:translateY(0);opacity:1}.confetti{opacity:0}.stage-10 .confetti{opacity:1;animation:confetti-fall 2.8s ease-in infinite}@keyframes confetti-fall{0%{opacity:0;transform:translateY(-36px) rotate(0)}12%{opacity:1}to{opacity:0;transform:translateY(150px) rotate(240deg)}}.sound-toggle{position:absolute;top:clamp(8px,1.6vw,16px);right:clamp(8px,1.6vw,16px);width:66px;height:66px;border-radius:50%;border:3px solid var(--wood-deep);background:linear-gradient(180deg,#fdf6e4,#efe0c2);color:var(--colonial);display:grid;place-items:center;box-shadow:0 3px #7a5b3a80;z-index:30}.sound-toggle svg{width:32px;height:32px}.sound-toggle .spk-slash{display:none}.sound-toggle.muted{color:#8f8578}.sound-toggle.muted .spk-waves{display:none}.sound-toggle.muted .spk-slash{display:block;stroke:var(--brick)}.sound-toggle:active{transform:translateY(2px);box-shadow:0 1px #7a5b3a80}.panel{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.6dvh,18px);width:100%;min-height:0;padding-bottom:clamp(4px,2dvh,22px)}.notice{display:flex;align-items:center;gap:10px;background:#fdf6e4;border:2px dashed var(--gold-deep);border-radius:12px;padding:8px 12px;max-width:640px;font-size:.92rem}.notice-close{border:none;background:none;font-size:1.5rem;line-height:1;color:var(--wood-deep);padding:2px 8px}.scroll-card{display:flex;align-items:center;gap:clamp(10px,2.4vw,20px);background:linear-gradient(180deg,#fbf3de,#f1e2c0);border:3px solid #d9c19b;border-left:10px solid #cbb187;border-right:10px solid #cbb187;border-radius:18px;box-shadow:0 4px #7a5b3a47,0 8px 18px #3a2f2224;padding:clamp(8px,1.4dvh,14px) clamp(12px,3vw,22px);width:min(100%,640px)}.replay-btn{flex:0 0 auto;width:clamp(64px,9dvh,84px);height:clamp(64px,9dvh,84px);border-radius:50%;border:3px solid var(--colonial-deep);background:linear-gradient(180deg,#3c6396,var(--colonial));color:var(--smoke);display:grid;place-items:center;box-shadow:0 4px 0 var(--colonial-deep)}.replay-btn svg{width:58%;height:58%}.replay-btn .spk-slash{display:none}.replay-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--colonial-deep)}.scroll-body{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0}.scroll-letter{font-family:Georgia,Times New Roman,serif;font-size:clamp(2.2rem,6dvh,3.2rem);font-weight:700;min-width:1.6em;text-align:center;color:#b3a284;line-height:1}.scroll-letter.revealed{color:var(--colonial)}.scroll-letter.pulse{animation:letter-pulse .8s ease-in-out}@keyframes letter-pulse{0%,to{transform:scale(1)}40%{transform:scale(1.35)}}.progress{display:flex;gap:clamp(2px,.8vw,6px);row-gap:3px;flex-wrap:wrap;justify-content:flex-end;min-width:0}.pennant{width:clamp(13px,2.6vw,20px);height:auto}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2.4vw,22px);width:min(100%,640px);margin-top:clamp(2px,1dvh,10px)}.tiles.locked{pointer-events:none}.tiles.wiggle .tile{animation:tiles-sway .55s ease-in-out}.tile{position:relative;container-type:size;aspect-ratio:1 / 1.02;min-width:64px;min-height:64px;border:4px solid var(--wood-deep);border-radius:18px;background:repeating-linear-gradient(98deg,#7a5b3a24 0 7px,#7a5b3a00 7px 15px),linear-gradient(180deg,#c89b62 0%,var(--wood) 55%,#96683a 100%);box-shadow:inset 0 3px #faf6ec73,inset 0 -5px #4a382659,0 5px #4a38268c,0 9px 16px #3a2f2240;color:#fdf6e4;display:grid;place-items:center;padding:0;transition:transform .12s ease}.tile:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#4a3826;top:9px;left:9px;box-shadow:calc(100cqw - 32px) 0 0 #4a3826,0 calc(100cqh - 32px) 0 #4a3826,calc(100cqw - 32px) calc(100cqh - 32px) 0 #4a3826}.tile-letter{font-family:Georgia,Times New Roman,serif;font-size:clamp(3rem,13cqw + 1.4rem,5.6rem);font-weight:700;line-height:1;text-shadow:0 3px 0 rgba(74,56,38,.65),0 -1px 0 rgba(250,246,236,.35)}.tile:active{transform:scale(.95)}.tile.correct{animation:tile-pop .6s ease;border-color:var(--gold-deep);box-shadow:inset 0 3px #faf6ec73,inset 0 -5px #4a382659,0 5px #4a38268c,0 0 0 5px #e9b9498c,0 9px 18px #3a2f2240}.tile-badge{position:absolute;top:5px;right:5px;width:clamp(34px,7vw,48px);height:clamp(34px,7vw,48px);opacity:0;pointer-events:none}.tile-badge svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(58,47,34,.4))}.tile.correct .tile-badge{opacity:1;animation:star-pop .55s cubic-bezier(.2,1.6,.4,1)}.tile.nudged{animation:tile-nudge .55s ease-in-out}@keyframes tile-pop{0%{transform:scale(1)}35%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes star-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes tiles-sway{0%,to{transform:translate(0)}25%{transform:translate(-7px)}60%{transform:translate(6px)}}@keyframes tile-nudge{0%,to{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:18px}.start-overlay{background:linear-gradient(180deg,rgba(246,236,215,.55) 0%,rgba(246,236,215,.9) 46%,var(--parchment) 100%)}.start-card{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2dvh,20px);background:linear-gradient(180deg,#fbf3de,#f3e6c8);border:4px solid #cbb187;border-radius:26px;box-shadow:0 6px #7a5b3a4d,0 16px 34px #3a2f2238;padding:clamp(18px,3.4dvh,34px) clamp(18px,5vw,40px);max-width:480px;width:100%;text-align:center}.emblem{width:clamp(76px,12dvh,116px);height:auto}.title{margin:0;display:flex;flex-direction:column;gap:4px;font-family:Georgia,Times New Roman,serif}.title-liberty{font-size:clamp(1.9rem,6.4vw,2.7rem);color:var(--colonial);letter-spacing:.4px}.title-sub{font-size:clamp(1rem,3.4vw,1.25rem);color:var(--brick);font-style:italic;font-weight:400}.mode-picker{display:flex;gap:12px;width:100%;justify-content:center}.mode-btn{flex:1 1 0;max-width:180px;min-height:76px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:16px;border:3px solid #cbb187;background:#fdf6e4;color:var(--ink);position:relative}.mode-sample{font-family:Georgia,Times New Roman,serif;font-size:1.55rem;font-weight:700;color:var(--wood-deep)}.mode-name{font-size:.95rem}.mode-btn.active{border-color:var(--colonial);border-width:4px;background:#eaf0f7;box-shadow:0 0 0 3px #2c4f7c40}.mode-btn.active .mode-sample{color:var(--colonial)}.mode-btn.active:after{content:"";position:absolute;top:-10px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--colonial) no-repeat center /14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 L6 11 L11.5 3.5' stroke='%23faf6ec' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border:2px solid #fdf6e4}.begin-btn{min-height:68px;padding:14px 38px;border-radius:999px;border:3px solid var(--gold-deep);background:linear-gradient(180deg,#f6d97b,var(--gold) 55%,#dfa62d);color:#4a3826;font-size:clamp(1.35rem,4.6vw,1.7rem);font-weight:700;box-shadow:0 5px 0 var(--gold-deep),0 10px 20px #3a2f2240}.begin-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-deep)}.parent-note{margin:0;font-size:.85rem;color:#7c6f5a;max-width:300px}.victory-overlay{align-items:flex-end;padding-bottom:max(4dvh,20px);background:transparent;pointer-events:none}@media(max-width:640px){.victory-overlay{align-items:center;padding-top:calc(100vw / 1.7857 + 8dvh)}}.victory-card{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6dvh,16px);background:linear-gradient(180deg,#fbf3de,#f3e6c8);border:4px solid var(--gold-deep);border-radius:26px;box-shadow:0 6px #7a5b3a4d,0 16px 34px #3a2f2247;padding:clamp(16px,3dvh,30px) clamp(20px,6vw,44px);max-width:440px;width:100%;text-align:center}.victory-ribbon{font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,7vw,2.9rem);font-weight:700;color:var(--brick);background:linear-gradient(180deg,#fdf6e4,#f1e2c0);border:3px solid var(--brick);border-radius:14px;padding:6px 26px;position:relative}.victory-line{margin:0;font-size:clamp(1rem,3.6vw,1.2rem)}.victory-stars{display:flex;gap:10px}.vstar{width:clamp(44px,8dvh,64px);height:clamp(44px,8dvh,64px);animation:star-pop .6s cubic-bezier(.2,1.6,.4,1) backwards}.vstar.v2{animation-delay:.35s;width:clamp(54px,9.6dvh,76px);height:clamp(54px,9.6dvh,76px)}.vstar.v3{animation-delay:.7s}.again-btn{min-height:64px;padding:12px 34px;border-radius:999px;border:3px solid var(--colonial-deep);background:linear-gradient(180deg,#3c6396,var(--colonial));color:var(--smoke);font-size:clamp(1.2rem,4.2vw,1.5rem);font-weight:700;box-shadow:0 5px 0 var(--colonial-deep)}.again-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--colonial-deep)}@media(min-width:900px)and (min-height:640px){.tiles,.scroll-card{width:min(100%,660px)}}@media(max-height:480px){.battlefield{width:min(100%,164.2844dvh)}.game{flex-direction:row;align-items:center}.stage{flex:1 1 55%;min-width:0}.panel{flex:1 1 45%;min-width:0}}@media(max-width:480px){.scroll-body{flex-direction:column;align-items:center;gap:6px}.progress{justify-content:center}}@media(max-width:360px){.scroll-card{border-left-width:6px;border-right-width:6px}}@media(prefers-reduced-motion:reduce){.company,.soldier,.opp-flag,.victory-flag{transition-duration:.01s}.wave,.cloud,.marching .walk,.marching .leg-a,.marching .leg-b,.marching .stick-a,.marching .stick-b,.stage-6 .cannon .barrel,.tiles.wiggle .tile,.tile.nudged,.tile.correct,.tile.correct .tile-badge,.vstar,.scroll-letter.pulse{animation:none}.stage-6 .puff{animation:none;opacity:.9}.stage-10 .confetti{animation:none;opacity:1}}