:root{color:#27324a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--surface:#fff;--surface-soft:#fff9e6;--line:#ffd58f;--ink:#27324a;--muted:#68728a;--accent:#ff7a59;--accent-dark:#dd4f34;--success:#42c77a;--warning:#ffca3a;--wrong:#ff8a8a;--piece:#fff0b9;--piece-border:#ffb703;--placed:#67d99f;--focus:#ff4f7b;--sky:#dff7ff;--ink-cyan:#00c8e0;--ink-orange:#ff6b1a;--bottom-tray-height:124px;--bottom-tray-safe-area:env(safe-area-inset-bottom,0px);--shadow:0 16px 36px #5a3e1a29;--button-shadow:0 7px 0 #7c481429, 0 16px 30px #5a3e1a1f;background:#fff7da;font-family:"M PLUS Rounded 1c",Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none}button{font:inherit}button:focus-visible{outline-offset:3px;outline:4px solid #ff7b5480}.app-shell{background:linear-gradient(135deg,#ffca3a2e,#55c7f71f 48%,#ff7a591f),linear-gradient(90deg,#ffb84d1f 0 1px,#0000 1px 100%) 0 0/34px 34px,linear-gradient(0deg,#ffb84d1f 0 1px,#0000 1px 100%) 0 0/34px 34px,#fff7da;width:100%;height:100dvh;overflow:hidden}.header-bar{z-index:5;background:#fffffff0;border-bottom:3px solid #ffe08a;justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:10px 16px;display:flex;box-shadow:0 8px 22px #5a3e1a1a}.brand-button{color:var(--ink);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;min-width:0;padding:4px;display:inline-flex}.brand-mark{color:#126782;background:#dff7ff;border-radius:14px;flex:none;place-items:center;min-width:48px;height:36px;padding:0 8px;font-weight:900;display:inline-grid;box-shadow:inset 0 -3px #1267821f}.brand-title{white-space:nowrap;text-overflow:ellipsis;font-size:clamp(1.02rem,2.2vw,1.42rem);font-weight:900;overflow:hidden}.header-actions,.result-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.primary-button,.secondary-button,.ghost-button{cursor:pointer;border:0;border-radius:16px;min-height:46px;padding:12px 18px;font-weight:900;transition:transform .12s,box-shadow .12s,filter .12s}.primary-button{color:#fff;background:var(--accent);box-shadow:var(--button-shadow)}.primary-button:hover{background:var(--accent-dark)}.secondary-button{color:#126782;background:#dff7ff;box-shadow:0 5px #1267821f}.ghost-button{color:var(--ink);background:#fff;border:2px solid #ffe08a;box-shadow:0 5px #7c48141f}.primary-button:active,.secondary-button:active,.ghost-button:active,.region-card:active,.puzzle-piece:active,.option-button:active{transform:translateY(3px)scale(.98);box-shadow:0 3px #7c48141f}.compact{min-height:38px;padding:8px 12px}.home-screen,.select-screen{grid-template-rows:auto minmax(0,1fr);gap:clamp(14px,2.4vh,22px);height:100%;padding:clamp(16px,4vw,34px);display:grid;overflow:hidden}.home-screen{isolation:isolate;grid-template-rows:auto minmax(0,1fr) auto;position:relative}.home-screen:before,.home-screen:after{content:"";pointer-events:none;z-index:0;position:absolute}.home-screen:before{opacity:.22;background:radial-gradient(circle at 16% 24%, var(--ink-cyan) 0 10px, transparent 11px), radial-gradient(circle at 24% 12%, var(--ink-cyan) 0 5px, transparent 6px), radial-gradient(circle at 78% 24%, var(--ink-orange) 0 11px, transparent 12px), radial-gradient(circle at 88% 38%, var(--ink-orange) 0 5px, transparent 6px), radial-gradient(ellipse at 18% 28%, var(--ink-cyan) 0 21%, transparent 22%), radial-gradient(ellipse at 82% 20%, var(--ink-orange) 0 19%, transparent 20%);clip-path:polygon(2% 16%,10% 8%,18% 18%,25% 6%,33% 28%,42% 14%,50% 31%,59% 12%,67% 29%,78% 7%,86% 24%,96% 15%,90% 56%,98% 68%,79% 70%,70% 91%,58% 70%,47% 91%,39% 66%,23% 78%,19% 58%,3% 65%);height:62%;inset:-8% -4% auto -5%}.home-screen:after{opacity:.15;background:radial-gradient(circle at 18% 72%, var(--ink-orange) 0 6px, transparent 7px), radial-gradient(circle at 70% 18%, var(--ink-cyan) 0 7px, transparent 8px), radial-gradient(ellipse at 46% 55%, var(--ink-orange) 0 28%, transparent 29%), radial-gradient(ellipse at 64% 35%, var(--ink-cyan) 0 20%, transparent 21%);clip-path:polygon(6% 45%,22% 28%,19% 7%,42% 21%,60% 0,63% 24%,91% 16%,79% 44%,100% 57%,72% 65%,78% 96%,51% 76%,29% 100%,30% 70%,0 70%);width:min(360px,46vw);height:min(240px,34vh);bottom:8%;right:-7%}.home-screen>*{z-index:1;position:relative}.onboarding-backdrop{z-index:80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(circle at 18% 20%,#00c8e042 0 70px,#0000 71px),radial-gradient(circle at 82% 76%,#ff6b1a38 0 88px,#0000 89px),#1c23366b;place-items:center;padding:clamp(14px,4vw,28px);display:grid;position:fixed;inset:0}.onboarding-card{clip-path:polygon(0 5%,6% 0,44% 1%,50% 0,100% 5%,98% 90%,93% 100%,44% 98%,37% 100%,0 94%);background:radial-gradient(circle at 8% 14%,#00c8e029 0 52px,#0000 53px),radial-gradient(circle at 94% 8%,#ff6b1a29 0 48px,#0000 49px),linear-gradient(135deg,#fff7d6 0%,#fff 62%,#e7fbff 100%);border:4px solid #ffffffdb;border-radius:28px;gap:12px;width:min(560px,100%);max-height:min(92dvh,720px);padding:clamp(18px,4vw,28px);display:grid;position:relative;overflow:hidden;box-shadow:0 18px #00c8e024,0 28px 60px #1c233642}.onboarding-card:before{content:"";pointer-events:none;opacity:.24;background:radial-gradient(circle at 24% 74%, #fff 0 5px, transparent 6px), radial-gradient(ellipse at 48% 48%, var(--ink-orange) 0 34%, transparent 35%);clip-path:polygon(5% 48%,20% 19%,38% 27%,54% 0,64% 27%,91% 13%,80% 43%,100% 58%,72% 66%,77% 96%,52% 76%,27% 100%,31% 70%,0 70%);width:160px;height:112px;position:absolute;top:-28px;right:-34px}.onboarding-close{z-index:2;color:#27324a;background:#fff;border:0;border-radius:999px;width:40px;height:40px;font-size:1.55rem;font-weight:900;position:absolute;top:12px;right:14px;box-shadow:0 6px #26324c1f}.onboarding-kicker{background:linear-gradient(90deg, var(--ink-cyan), var(--ink-orange));color:#fff;text-shadow:0 2px #26324c33;border-radius:999px;width:fit-content;margin:0;padding:5px 10px;font-size:.95rem;font-weight:900}.onboarding-card h2{color:#10294a;text-shadow:2px 3px #00c8e03d;margin:0;padding-right:34px;font-size:clamp(1.6rem,5vw,2.45rem);line-height:1.05}.onboarding-copy{color:#3b4862;margin:0;font-size:clamp(1rem,2.4vw,1.18rem);font-weight:800;line-height:1.55}.onboarding-demo{--demo-travel-x:clamp(190px, 48vw, 280px);background-color:#eafbff;background-image:linear-gradient(90deg,#00c8e014 1px,#0000 1px),linear-gradient(0deg,#ff6b1a14 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border-radius:24px;min-height:160px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #ffffffc7}.demo-map-slot{color:#007c8f;border:4px dashed #008f9e80;border-radius:22px 18px 25px 17px;place-items:center;width:132px;height:72px;font-size:.9rem;font-weight:900;animation:2.6s ease-in-out infinite demo-slot-glow;display:grid;position:absolute;top:44px;right:46px;transform:rotate(-4deg)}.demo-piece{color:#5d3b00;background:linear-gradient(135deg,#ffe181,#fff3b0);border:4px solid #7a5200;border-radius:35% 25% 36% 22%;place-items:center;width:92px;height:56px;font-size:1.15rem;font-weight:900;animation:2.6s cubic-bezier(.2,.85,.2,1) infinite demo-piece-move;display:grid;position:absolute;top:56px;left:44px;box-shadow:0 9px #7a520029}.demo-pointer{transform-origin:top;background:#fff;border:3px solid #26324c;border-radius:999px 999px 9px 9px;width:22px;height:38px;animation:2.6s cubic-bezier(.2,.85,.2,1) infinite demo-pointer-move;position:absolute;top:112px;left:96px;box-shadow:0 5px #26324c29}.demo-pointer:after{content:"";background:#fff;border-bottom:3px solid #26324c;border-right:3px solid #26324c;width:14px;height:14px;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)rotate(45deg)}.demo-spark{background:var(--ink-orange);opacity:0;border-radius:999px;width:12px;height:12px;animation:2.6s ease-in-out infinite demo-spark-pop;position:absolute;top:68px;right:96px}.demo-spark-two{background:var(--ink-cyan);width:9px;height:9px;animation-delay:80ms;top:102px;right:62px}.onboarding-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.onboarding-steps li{color:#27324a;text-align:center;background:#ffffffbd;border-radius:16px;justify-items:center;gap:5px;min-width:0;padding:9px 6px;font-weight:900;display:grid}.onboarding-steps strong{background:var(--ink-cyan);color:#fff;border-radius:999px;place-items:center;width:28px;height:28px;line-height:1;display:grid}.onboarding-actions{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;display:grid}.onboarding-skip,.onboarding-start{justify-content:center;min-height:48px}.home-hero{align-content:end;gap:8px;min-height:0;padding-inline:clamp(0px,1vw,12px);display:grid;position:relative}.home-hero:before{content:"";pointer-events:none;z-index:-1;opacity:.82;background:radial-gradient(circle at 14% 18%, #fff 0 7px, transparent 8px), radial-gradient(circle at 88% 22%, #ffffffd1 0 5px, transparent 6px), linear-gradient(135deg, color-mix(in srgb, var(--ink-cyan) 84%, white), color-mix(in srgb, var(--ink-orange) 88%, white));clip-path:polygon(4% 40%,15% 22%,12% 4%,31% 15%,45% 0,53% 18%,72% 6%,78% 27%,96% 20%,88% 48%,100% 62%,77% 67%,78% 96%,55% 77%,38% 100%,29% 76%,9% 84%,14% 58%);width:min(520px,58vw);height:min(210px,28vh);position:absolute;top:clamp(18px,4vh,42px);left:clamp(-22px,-2vw,-8px)}.hero-kicker,.hero-catch,.result-mode,.quiz-step{color:var(--accent-dark);letter-spacing:0;margin:0;font-weight:900}.hero-catch{background:linear-gradient(90deg, var(--ink-cyan), var(--ink-orange));color:#fff;text-shadow:0 2px #26324c38;border-radius:999px;width:fit-content;padding:7px 14px;font-size:clamp(1.25rem,3vw,2rem);transform:rotate(-2deg);box-shadow:0 8px #26324c1f,inset 0 -4px #ffffff2e}.home-hero h1{letter-spacing:0;color:#10294a;-webkit-text-stroke:2px #ffffffe6;text-shadow:-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 5px 6px 0 var(--ink-cyan), -3px 10px 0 color-mix(in srgb, var(--ink-orange) 62%, white), 0 16px 28px #5a3e1a24;margin:0;font-size:clamp(4rem,13vw,8.6rem);line-height:.9}.select-heading h1{letter-spacing:0;color:#26324c;text-shadow:0 4px #ffca3a42;margin:0;font-size:clamp(2rem,6vw,4.8rem);line-height:1.04}.hero-copy,.select-heading p{color:var(--muted);margin:0;font-size:clamp(1rem,2.1vw,1.35rem);font-weight:700}.onboarding-replay-button{color:#27324a;background:#fffc;border:2px solid #00c8e047;border-radius:999px;width:fit-content;min-height:34px;padding:6px 12px;font-size:.88rem;font-weight:900;box-shadow:0 5px #00c8e01f}.mode-grid,.region-grid{scrollbar-width:thin;align-content:start;gap:14px;min-height:0;display:grid;overflow:auto}.mode-grid{isolation:isolate;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 6px 12px;position:relative}.home-footer{color:#4f5b73;background:radial-gradient(circle at 8%,#00c8e024 0 15px,#0000 16px),radial-gradient(circle at 92%,#ff6b1a1f 0 14px,#0000 15px),#ffffffb8;border-radius:999px;grid-template-columns:34px auto;grid-template-areas:"ink tagline""credit credit";justify-content:center;justify-self:center;place-items:center;gap:2px 9px;width:fit-content;max-width:100%;padding:8px 14px 9px;font-size:clamp(.74rem,1.8vw,.9rem);font-weight:800;line-height:1.25;display:grid;position:relative;box-shadow:0 5px #26324c14}.home-footer:before{content:"";background:linear-gradient(90deg, var(--ink-cyan), var(--ink-orange));border-radius:999px;grid-area:ink;align-self:center;width:34px;height:5px}.home-footer-tagline{grid-area:tagline}.home-footer-credit{white-space:nowrap;grid-area:credit;justify-content:center;align-items:baseline;gap:8px;display:inline-flex}.home-footer strong{color:#27324a;font-size:1.08em;font-weight:900}.home-footer small{color:#66718a;font-size:.9em;font-weight:800}.mode-grid:before,.mode-grid:after{content:"";pointer-events:none;z-index:0;opacity:.12;position:absolute}.mode-grid:before{background:radial-gradient(circle at 18% 78%, #ffffffeb 0 5px, transparent 6px), radial-gradient(circle at 78% 16%, var(--ink-cyan) 0 7px, transparent 8px), radial-gradient(ellipse at 48% 45%, var(--ink-cyan) 0 31%, transparent 32%);clip-path:polygon(5% 44%,21% 18%,38% 30%,54% 0,62% 25%,89% 12%,78% 42%,100% 57%,70% 65%,73% 96%,50% 75%,26% 100%,32% 70%,0 70%);width:min(240px,34vw);height:132px;top:-22px;left:min(44%,420px);transform:rotate(-8deg)}.mode-grid:after{background:radial-gradient(circle at 80% 70%, #ffffffd1 0 4px, transparent 5px), radial-gradient(circle at 18% 18%, var(--ink-orange) 0 6px, transparent 7px), radial-gradient(ellipse at 44% 52%, var(--ink-orange) 0 28%, transparent 29%);clip-path:polygon(8% 48%,20% 21%,38% 28%,54% 0,63% 27%,91% 14%,80% 44%,100% 58%,72% 65%,78% 96%,51% 77%,27% 100%,30% 70%,0 70%);width:min(220px,32vw);height:118px;top:42%;right:min(8%,80px);transform:rotate(12deg)}.region-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-card,.region-card{text-align:left;background:var(--surface);color:var(--ink);cursor:pointer;min-height:160px;box-shadow:var(--button-shadow);border:3px solid #ffe08a;border-radius:22px;gap:8px;padding:clamp(16px,2vw,22px);transition:transform .18s cubic-bezier(.18,.9,.28,1.25),box-shadow .14s,border-color .14s,filter .14s;position:relative;overflow:hidden}.mode-card{--mode-tilt:-1deg;--mode-hover-tilt:1.1deg;--mode-press-tilt:-2.2deg;z-index:1;border-color:color-mix(in srgb, var(--card-accent,#ffb703) 64%, white);background:radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--card-accent,#ffb703) 19%, transparent) 0 38px, transparent 39px), radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--ink-cyan) 25%, transparent) 0 18px, transparent 19px), radial-gradient(circle at 6% 92%, color-mix(in srgb, var(--ink-orange) 20%, transparent) 0 22px, transparent 23px), linear-gradient(135deg, color-mix(in srgb, var(--card-accent,#ffb703) 18%, white) 0%, color-mix(in srgb, var(--card-accent,#ffb703) 7%, white) 48%, #fff 74%);clip-path:polygon(0 7%,5% 2%,47% 0,100% 5%,98% 88%,93% 100%,39% 98%,0 94%);min-height:174px;transform:rotate(var(--mode-tilt));will-change:transform;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding-left:clamp(20px,2.2vw,26px);display:flex}.region-card{background:linear-gradient(135deg, color-mix(in srgb, var(--region-soft,#fff7d6) 84%, white), #fff 72%), var(--surface);border-color:color-mix(in srgb, var(--region-main,#ffb703) 68%, white);color:var(--region-ink,var(--ink));grid-template-rows:auto auto auto 1fr;align-content:start;display:grid}.mode-card:before,.region-card:before{content:"";background:var(--card-accent,#ffb703);width:8px;position:absolute;inset:0}.mode-card:before{opacity:.82;background:linear-gradient(90deg, var(--card-accent,#ffb703) 0 16px, transparent 17px), radial-gradient(circle at 38px 32px, color-mix(in srgb, var(--card-accent,#ffb703) 34%, transparent) 0 25px, transparent 26px), radial-gradient(circle at 78px 58px, color-mix(in srgb, var(--ink-cyan) 20%, transparent) 0 19px, transparent 20px), radial-gradient(ellipse at 52px 50px, color-mix(in srgb, var(--card-accent,#ffb703) 20%, white) 0 38%, transparent 39%);clip-path:polygon(0 0,15% 7%,30% 0,44% 12%,66% 4%,78% 22%,100% 18%,86% 46%,98% 65%,69% 67%,62% 100%,42% 76%,20% 91%,22% 62%,0 70%);transform-origin:0 0;width:132px;height:112px;inset:-14px auto auto -8px;transform:rotate(-7deg)}.mode-card:after{content:"";pointer-events:none;opacity:.72;background:radial-gradient(circle at 16% 70%, #fff 0 4px, transparent 5px), radial-gradient(circle at 78% 16%, #ffffffc7 0 5px, transparent 6px), radial-gradient(ellipse at 48% 46%, color-mix(in srgb, var(--card-accent,#ffb703) 70%, var(--ink-cyan)) 0 43%, transparent 44%);clip-path:polygon(7% 48%,20% 20%,39% 28%,55% 0,64% 28%,91% 14%,80% 44%,100% 57%,70% 66%,74% 96%,51% 75%,28% 100%,31% 70%,0 70%);width:108px;height:74px;transition:transform .18s,opacity .18s;position:absolute;top:-18px;right:-16px;transform:rotate(12deg)scale(.98)}.mode-card>*{z-index:2;position:relative}.mode-card:hover:not(.is-launching),.region-card:hover{border-color:var(--card-accent,var(--accent));transform:translateY(-3px)}.mode-card:hover:not(.is-launching){border-color:color-mix(in srgb, var(--card-accent,var(--accent)) 70%, var(--ink-cyan));transform:translate(4px, -6px) rotate(var(--mode-hover-tilt)) scale(1.015);animation:.26s cubic-bezier(.22,1.25,.36,1) both mode-ink-bounce;box-shadow:0 10px #00c8e01f,0 20px 34px #5a3e1a26}.mode-card:hover:not(.is-launching):after{opacity:.95;transform:rotate(3deg)scale(1.08)}.mode-card:active:not(.is-launching){transform:translate(6px, 2px) rotate(var(--mode-press-tilt)) scale(.985);animation:.18s cubic-bezier(.2,.9,.3,1) both mode-press-bounce;box-shadow:0 4px #7c48141f}.mode-card.is-launch-locked{pointer-events:none}.mode-card.is-launching{z-index:9;pointer-events:none;border-color:color-mix(in srgb, var(--card-accent,var(--accent)) 70%, var(--ink-orange));animation:.42s cubic-bezier(.17,.88,.22,1.32) both mode-card-launch;box-shadow:0 16px #ff6b1a29,0 28px 42px #5a3e1a33}.mode-card.is-launching:after{opacity:0;background:radial-gradient(circle at 22% 72%, #ffffffeb 0 5px, transparent 6px), radial-gradient(circle at 82% 28%, #ffffffdb 0 6px, transparent 7px), radial-gradient(circle at 56% 48%, color-mix(in srgb, var(--ink-cyan) 52%, var(--card-accent,#ffb703)) 0 17%, transparent 18%), radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--card-accent,#ffb703) 68%, var(--ink-orange)) 0 38%, transparent 39%);width:168px;height:126px;animation:.42s ease-out both mode-card-ink-burst;top:50%;right:50%}.region-card-top{align-items:center;gap:8px;min-width:0;display:flex}.region-emoji{background:color-mix(in srgb, var(--region-main,#ffb703) 22%, white);width:42px;height:42px;color:var(--region-main,#ffb703);border-radius:15px;flex:0 0 42px;place-items:center;font-size:1.45rem;line-height:1;display:grid;box-shadow:inset 0 -4px #27324a14}.region-pill{background:color-mix(in srgb, var(--region-main,#ffb703) 18%, white);min-width:0;color:var(--region-ink,#27324a);border-radius:999px;padding:4px 9px;font-size:.86rem;font-weight:900;line-height:1.25}.national-card{--card-accent:#ff85b3;--region-main:#ff85b3;--region-soft:#fff1d6;--region-ink:#26324c;background:linear-gradient(135deg,#ff85b333,#55c7f733,#8bd45033,#ffb84d33),#fff}.national-card:before{background:linear-gradient(#55c7f7,#ff85b3,#8bd450,#ffb84d,#ff7a66,#b28cff)}.special-card{--card-accent:#b28cff;--region-main:#b28cff;--region-soft:#f1e9ff;--region-ink:#4c2e95;background:linear-gradient(135deg,#f1e9ff,#fff7d6 76%);border-color:#d9c2ff}.primary-mode{border-color:color-mix(in srgb, var(--card-accent,#e8332a) 52%, white);background:radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--card-accent,#e8332a) 24%, transparent) 0 38px, transparent 39px), radial-gradient(circle at 92% 18%, #00c8e029 0 24px, transparent 25px), radial-gradient(circle at 6% 92%, #ff6b1a29 0 22px, transparent 23px), linear-gradient(135deg, #fff1df 0%, #fff7d6 46%, #fff 74%)}.mode-red{--card-accent:#e8332a;--mode-tilt:-1.4deg;--mode-hover-tilt:1.1deg;--mode-press-tilt:-2.1deg}.mode-green{--card-accent:#f5c400;--mode-tilt:1deg;--mode-hover-tilt:-1.2deg;--mode-press-tilt:2deg}.mode-blue{--card-accent:#2eaa4a;--mode-tilt:-.7deg;--mode-hover-tilt:1.3deg;--mode-press-tilt:-1.8deg}.mode-orange{--card-accent:#1a7ae8;--mode-tilt:1.2deg;--mode-hover-tilt:-1deg;--mode-press-tilt:2.1deg}.mode-purple{--card-accent:#8b3ae8;--mode-tilt:-.9deg;--mode-hover-tilt:1.4deg;--mode-press-tilt:-2deg}.mode-card-top{align-items:center;gap:9px;width:100%;min-width:0;display:flex}.mode-emoji{background:radial-gradient(circle at 76% 18%, #fffffff2 0 4px, transparent 5px), linear-gradient(135deg, color-mix(in srgb, var(--card-accent,#ffb703) 34%, white), color-mix(in srgb, var(--ink-cyan) 22%, white));border-radius:16px;flex:0 0 46px;place-items:center;width:46px;height:46px;font-size:1.65rem;line-height:1;display:grid;box-shadow:0 4px #00c8e029,inset 0 -4px #27324a14}.mode-label{background:color-mix(in srgb, var(--card-accent,#ffb703) 20%, white);border:2px solid color-mix(in srgb, var(--ink-orange) 30%, white);color:#27324a;border-radius:999px;min-width:0;padding:4px 8px;font-size:.88rem;font-weight:900;line-height:1.25}.mode-card strong,.region-card strong{color:#26324c;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.2;display:block}.mode-description,.region-card span,.mode-card small,.region-card small{color:var(--muted);font-weight:800}.region-card .region-emoji{color:var(--region-main,#ffb703)}.region-card .region-pill{color:var(--region-ink,#27324a)}.region-card>span:not(.region-card-top){color:color-mix(in srgb, var(--region-ink,#26324c) 78%, white)}.region-card small{color:color-mix(in srgb, var(--region-ink,#26324c) 74%, white)}.mode-description{line-height:1.42}.mode-meta{background:color-mix(in srgb, var(--card-accent,#ffb703) 14%, white);color:#27324a;border-radius:999px;align-items:center;min-height:28px;margin-top:auto;padding:4px 9px;line-height:1.25;display:inline-flex}@media (width>=768px){.home-screen{grid-template-rows:auto auto auto;gap:clamp(8px,1.4vh,14px);padding:clamp(12px,2vw,24px);overflow-y:auto}.home-screen:before{opacity:.16;height:38%}.home-screen:after{opacity:.12;width:min(280px,30vw);height:min(180px,24vh);bottom:2%;right:-5%}.home-hero{align-content:start;gap:6px;padding-inline:clamp(4px,1vw,12px)}.home-hero:before{opacity:.62;width:min(380px,38vw);height:min(130px,18vh);top:-2px;left:clamp(-16px,-1.5vw,-6px)}.hero-catch{padding:5px 12px;font-size:clamp(1rem,1.35vw,1.25rem);box-shadow:0 5px #26324c1f,inset 0 -3px #ffffff2e}.home-hero h1{-webkit-text-stroke:1.4px #ffffffe6;text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 3px 4px 0 var(--ink-cyan), -2px 6px 0 color-mix(in srgb, var(--ink-orange) 58%, white), 0 10px 18px #5a3e1a1f;font-size:clamp(3.5rem,5vw,4rem);line-height:.88}.hero-copy{font-size:clamp(.95rem,1.3vw,1.08rem)}.onboarding-replay-button{min-height:30px;padding:5px 10px;font-size:.82rem}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px;padding:4px 6px 22px;overflow:visible}.mode-card{padding:clamp(20px,1.9vw,24px) clamp(22px,2.1vw,28px);border-radius:18px;gap:10px;min-height:188px;padding-left:clamp(26px,2.4vw,32px)}.mode-emoji{border-radius:14px;flex-basis:42px;width:42px;height:42px;font-size:1.48rem}.mode-label{padding:4px 8px;font-size:.84rem}.mode-card strong{font-size:clamp(1.32rem,2vw,1.65rem);line-height:1.18}.mode-description{font-size:.94rem;line-height:1.36}.mode-meta{min-height:28px;padding:5px 10px;font-size:.84rem}.home-footer{margin-top:0;padding:6px 12px;font-size:.76rem;position:static}}@media (width>=900px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.select-heading{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.puzzle-screen,.quiz-screen{height:100%;min-height:0;display:grid;overflow:hidden}.puzzle-screen{grid-template-rows:auto auto minmax(0,1fr) auto}.quiz-screen{grid-template-rows:auto auto minmax(0,1fr)}.play-status{background:#ffffffe6;border-bottom:3px solid #ffe08a;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;min-height:56px;padding:8px 14px;display:grid;overflow:hidden}.puzzle-play-status{grid-template-columns:minmax(104px,auto) auto auto minmax(0,1fr)}.drag-status-slot{min-width:clamp(104px,15vw,158px);min-height:42px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;background:#ffffffb8;border:2px dashed #ffe08a;border-radius:999px;place-items:center;padding:6px 12px;font-size:1rem;font-weight:900;line-height:1;display:inline-grid;overflow:hidden;box-shadow:inset 0 -3px #ffffff80}.drag-status-slot.is-active{border-style:solid;border-color:var(--region-main);background:color-mix(in srgb, var(--region-soft) 86%, white);color:var(--region-ink);box-shadow:0 4px #7c481414,inset 0 -4px #ffffff8c}.stat-row{background:var(--surface);border:2px solid #ffe08a;border-radius:16px;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px;font-weight:900;display:inline-flex;box-shadow:0 4px #7c481414}.stat-row strong{color:var(--accent-dark);font-size:1.12em}.status-message{min-width:0;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:800;overflow:hidden}.mascot{background:#fff0b9;border-radius:50%;place-items:center;width:28px;height:28px;margin-right:6px;display:inline-grid}.progress-panel{gap:6px;display:grid}.progress-stat{justify-content:space-between;width:100%}.mistake-pill{color:#8f5d00}.progress-track{background:#fff0b9;border:2px solid #ffe08a;border-radius:999px;height:10px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#55c7f7,#8bd450,#ffb84d,#ff7a66,#b28cff);height:100%;transition:width .26s cubic-bezier(.2,.8,.2,1)}.map-stage{touch-action:none;background:var(--sky);min-height:0;position:relative;overflow:hidden}.japan-map{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.map-sea{fill:var(--sky)}.prefecture-shape path{fill:#fffdf3;fill-rule:evenodd;stroke:#607588;stroke-width:2.2px;vector-effect:non-scaling-stroke;will-change:fill, stroke;transition:fill .18s,stroke .18s,opacity .18s,filter .18s}.prefecture-shape.is-out-scope{opacity:.25}.prefecture-shape.is-in-scope:not(.is-placed) path{fill:#fff9df}.prefecture-shape.is-placed path{fill:var(--region-main);stroke:var(--region-ink);animation:.36s cubic-bezier(.2,1.3,.34,1) pop-in}.prefecture-shape.is-target path{stroke:var(--focus);stroke-width:3.4px}.prefecture-shape.is-hinted path{fill:#fff0b9;stroke:var(--focus);stroke-width:4px;filter:url(#hint-glow)}.prefecture-shape.is-drop-preview path{fill:color-mix(in srgb, var(--region-main) 28%, white);stroke:var(--region-main);stroke-width:4px;filter:drop-shadow(0 0 9px color-mix(in srgb, var(--region-main) 45%, transparent))}.prefecture-shape.is-recent path{filter:drop-shadow(0 0 7px #fffc)}.prefecture-label rect{fill:#ffffffe6;stroke:var(--region-ink);stroke-width:1.2px;vector-effect:non-scaling-stroke}.prefecture-label text{fill:#27324a;pointer-events:none;font-size:9.5px;font-weight:900}.prefecture-shape.is-recent .prefecture-label text{font-size:11px}.mini-map{border:1px solid var(--line);background:#ffffffdb;border-radius:8px;width:min(170px,28vw);height:min(120px,20vw);padding:6px;position:absolute;top:14px;right:14px}.mini-context{fill:#d8e2e8;stroke:#8fa1ab;stroke-width:3px}.mini-scope{fill:#9bd8bf;stroke:#31745b;stroke-width:4px}.mini-view{fill:#ff7b5414;stroke:var(--focus);stroke-width:8px;vector-effect:non-scaling-stroke}.zoom-controls{align-items:center;gap:8px;display:flex;position:absolute;bottom:14px;right:14px}.zoom-controls button{min-width:46px;min-height:46px;color:var(--ink);box-shadow:var(--shadow);cursor:pointer;background:#fff;border:0;border-radius:8px;font-weight:900}.zoom-controls .fit-button{color:#fff;background:var(--accent);min-width:118px;padding:0 14px}.hint-panel{border:1px solid var(--line);max-width:min(390px,100vw - 210px);box-shadow:var(--shadow);background:#ffffffeb;border-radius:8px;gap:8px;padding:12px;display:grid;position:absolute;bottom:14px;left:14px}.hint-panel p{color:var(--muted);margin:0;font-weight:800}.bottom-tray{height:calc(var(--bottom-tray-height) + var(--bottom-tray-safe-area));min-height:0;padding-bottom:var(--bottom-tray-safe-area);touch-action:pan-x;background:#fffffff2;border-top:3px solid #ffe08a;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden;box-shadow:0 -10px 24px #5a3e1a1f}.tray-label{color:#dd4f34;padding:8px 14px 2px;font-weight:900}.tray-scroll{touch-action:pan-x;overscroll-behavior-x:contain;overscroll-behavior-y:none;scrollbar-width:thin;align-items:stretch;gap:10px;min-width:0;min-height:0;padding:4px 14px 12px;display:flex;overflow:auto hidden}.puzzle-piece{border:3px solid var(--region-main,var(--piece-border));background:var(--region-soft,var(--piece));width:96px;min-height:82px;color:var(--region-ink,#4a3200);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 6px 0 color-mix(in srgb, var(--region-main,#ffb703) 34%, #a66f00);will-change:transform;border-radius:18px;flex:0 0 96px;grid-template-rows:minmax(0,1fr) auto;place-items:center;gap:2px;font-weight:900;transition:transform .12s,box-shadow .12s,filter .12s;display:grid}.puzzle-piece:disabled{cursor:not-allowed;opacity:.58}.puzzle-piece svg{width:72px;height:42px}.puzzle-piece path,.puzzle-piece path{fill:color-mix(in srgb, var(--region-main,#ffd96a) 28%, white);fill-rule:evenodd;stroke:var(--region-ink,#8b5e00);stroke-width:2.4px;vector-effect:non-scaling-stroke}.puzzle-piece.is-wobbling{animation:.42s gentle-wobble}.puzzle-piece span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;padding:0 4px;font-size:.9rem;overflow:hidden}.drag-layer{pointer-events:none;z-index:40;filter:drop-shadow(0 18px 24px #27324a42)drop-shadow(0 4px 8px #27324a2e);transform-origin:50%;will-change:transform, filter;place-items:center;width:144px;height:120px;animation:.18s ease-out lift-piece;display:grid;position:fixed;top:0;left:0}.drag-layer svg{width:100%;height:100%;overflow:hidden}.drag-layer path{fill:color-mix(in srgb, var(--region-main,#ffd96a) 72%, white);fill-rule:evenodd;fill-opacity:.76;stroke:#ffffff52;stroke-width:.35px;vector-effect:non-scaling-stroke}.countdown{z-index:20;pointer-events:none;background:#eef3f6b8;place-items:center;display:grid;position:absolute;inset:0}.countdown span{min-width:160px;min-height:160px;color:var(--accent-dark);box-shadow:var(--shadow);background:#fff;border-radius:999px;place-items:center;padding:24px;font-size:clamp(3rem,10vw,6rem);font-weight:1000;display:grid}.sparkle-burst{z-index:45;pointer-events:none;width:1px;height:1px;position:fixed}.sparkle-burst span{background:var(--sparkle-color,#ffca3a);border-radius:999px;width:10px;height:10px;animation:.68s ease-out forwards sparkle-pop;position:absolute;top:-5px;left:-5px}.sparkle-burst span:first-child{--spark-x:-34px;--spark-y:-22px}.sparkle-burst span:nth-child(2){--spark-x:30px;--spark-y:-26px}.sparkle-burst span:nth-child(3){--spark-x:-22px;--spark-y:28px}.sparkle-burst span:nth-child(4){--spark-x:36px;--spark-y:20px}.sparkle-burst span:nth-child(5){--spark-x:0;--spark-y:-40px}.sparkle-burst span:nth-child(6){--spark-x:0;--spark-y:38px}.sparkle-burst span:nth-child(7){--spark-x:-40px;--spark-y:4px}.sparkle-burst span:nth-child(8){--spark-x:42px;--spark-y:-4px}.result-backdrop{z-index:50;background:#19323c6b;place-items:center;padding:10px;display:grid;position:fixed;inset:0}.result-card{background:linear-gradient(#fff,#fff8db);border:3px solid #ffe08a;border-radius:22px;gap:9px;width:min(560px,100%);max-height:90dvh;padding:clamp(13px,3vw,20px);display:grid;overflow:hidden;box-shadow:0 22px 52px #19323c47}.result-heading{text-align:center;justify-items:center;gap:2px;display:grid}.result-card h2{margin:0;font-size:clamp(2.1rem,7vw,3.5rem);line-height:1}.time-title-badge{background:linear-gradient(135deg,#fff0b9,#dff7ff);border:3px solid #ffca3a;border-radius:16px;gap:2px;padding:9px 12px;display:grid}.badge-label{color:#8b5e00;font-size:.82rem;font-weight:900}.time-title-badge strong{font-size:clamp(1.08rem,3vw,1.65rem);line-height:1.12}.result-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;display:grid}.result-stats div{background:#fff0b9;border:2px solid #ffe08a;border-radius:16px;place-items:center;gap:2px;min-width:0;padding:9px 6px;display:grid}.result-stats .result-stat-time{background:#dff7ff;border-color:#8ee8ff}.result-stats dt{color:var(--muted);font-size:.78rem;font-weight:800}.result-stats dd{white-space:nowrap;margin:0;font-size:clamp(1.08rem,3vw,1.55rem);font-weight:900;line-height:1.1}.result-message,.result-note{color:var(--ink);text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:clamp(.86rem,2.4vw,1rem);font-weight:800;line-height:1.35;display:-webkit-box;overflow:hidden}.new-record{color:#0b7550}.result-note{-webkit-line-clamp:1;min-height:1.3em}.result-actions{grid-template-columns:1fr;align-items:stretch;gap:7px;display:grid}.result-actions button{border-radius:14px;width:100%;min-height:38px;padding:8px 12px}.quiz-main{grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr);gap:14px;min-height:0;padding:14px;display:grid;position:relative;overflow:hidden}.quiz-card,.quiz-map-panel,.placeholder-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:0;box-shadow:0 10px 22px #19323c14}.quiz-card{align-content:center;gap:18px;padding:clamp(16px,3vw,28px);display:grid;overflow:hidden}.quiz-card.is-correct{background:linear-gradient(#fff,#ecffd9);border-color:#8bd450;animation:.24s ease-out pop-in}.quiz-card.is-wrong{background:linear-gradient(#fff,#fff1d6);border-color:#ffd580;animation:.32s ease-out gentle-wobble}.quiz-card h1{margin:0;font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.16}.quiz-card ruby,.option-button ruby,.mode-card ruby,.select-heading ruby{ruby-position:over}.quiz-card rt,.option-button rt,.mode-card rt,.select-heading rt{color:var(--muted);font-size:.42em;font-weight:900;line-height:1}.option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.option-grid.has-six-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.option-button{border:2px solid var(--line);min-height:72px;color:var(--ink);cursor:pointer;background:#f8fbfd;border-radius:8px;font-size:clamp(1.08rem,2.2vw,1.35rem);font-weight:900;line-height:1.1;box-shadow:0 6px #7c481414}.option-button:hover:not(:disabled){border-color:var(--accent)}.option-button.is-selected{border-color:var(--focus)}.option-button.is-correct{border-color:var(--success);color:#176447;background:#daf4e8}.option-button.is-wrong{color:#8f5d00;background:#fff1d6;border-color:#ffb84d}.quiz-map-panel{touch-action:none;position:relative;overflow:hidden}.placeholder-panel{padding:24px}@keyframes lift-piece{0%{opacity:.7}to{opacity:1}}@keyframes mode-ink-bounce{0%{transform:rotate(var(--mode-tilt)) translate(0, 0) scale(1)}52%{transform:translate(8px, -9px) rotate(var(--mode-hover-tilt)) scale(1.03)}to{transform:translate(4px, -6px) rotate(var(--mode-hover-tilt)) scale(1.015)}}@keyframes mode-press-bounce{0%{transform:translate(4px, -6px) rotate(var(--mode-hover-tilt)) scale(1.015)}to{transform:translate(6px, 2px) rotate(var(--mode-press-tilt)) scale(.985)}}@keyframes mode-card-launch{0%{transform:rotate(var(--mode-tilt)) translate(0, 0) scale(1)}30%{transform:translate(8px,10px)rotate(-3deg)scale(.88)}60%{transform:translate(14px,-12px)rotate(2deg)scale(1.12)}85%{transform:translate(4px,2px)rotate(-1deg)scale(.97)}to{transform:translate(0, 0) rotate(var(--mode-tilt)) scale(1)}}@keyframes mode-card-ink-burst{0%{opacity:0;transform:translate(50%,-50%)rotate(10deg)scale(.35)}28%{opacity:.92}to{opacity:0;transform:translate(50%,-50%)rotate(-7deg)scale(1.65)}}@keyframes demo-piece-move{0%,14%{transform:translate(0)rotate(-5deg)scale(1)}34%{transform:translate(34px,-10px)rotate(4deg)scale(1.08)}62%,78%{transform:translate(var(--demo-travel-x), -8px) rotate(-3deg) scale(.98)}to{transform:translate(0)rotate(-5deg)scale(1)}}@keyframes demo-pointer-move{0%,14%{transform:translate(0)rotate(-10deg)}34%{transform:translate(34px,-10px)rotate(5deg)}62%,78%{transform:translate(var(--demo-travel-x), -8px) rotate(-5deg)}to{transform:translate(0)rotate(-10deg)}}@keyframes demo-slot-glow{0%,42%,to{box-shadow:none;background:#ffffff3d}62%,78%{background:#00c8e01f;box-shadow:0 0 0 7px #00c8e024}}@keyframes demo-spark-pop{0%,58%,to{opacity:0;transform:scale(.4)}66%{opacity:1;transform:scale(1.35)}78%{opacity:0;transform:scale(.2)translate(16px,-12px)}}@keyframes pop-in{0%{opacity:.68;transform:scale(.94)}60%{transform:scale(1.045)}to{opacity:1;transform:scale(1)}}@keyframes gentle-wobble{0%,to{transform:translate(0)}25%{transform:translate(-7px)rotate(-2deg)}55%{transform:translate(6px)rotate(2deg)}78%{transform:translate(-3px)rotate(-1deg)}}@keyframes sparkle-pop{0%{opacity:0;transform:translate(0)scale(.45)}20%{opacity:1}to{transform:translate(var(--spark-x), var(--spark-y)) scale(0);opacity:0}}@media (width<=860px){.mode-grid,.region-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.play-status{grid-template-columns:1fr 1fr}.puzzle-play-status{grid-template-columns:minmax(92px,.8fr) minmax(0,1.2fr)}.puzzle-play-status .progress-panel,.status-message{grid-column:1/-1}.quiz-main{grid-template-rows:minmax(210px,.88fr) minmax(190px,1fr);grid-template-columns:1fr}}@media (width<=560px){.app-shell{background-size:30px 30px}.header-bar{gap:6px;min-height:50px;padding:7px 9px}.brand-mark{min-width:40px;height:32px;font-size:.86rem}.brand-title{max-width:190px;font-size:1rem}.header-actions{gap:5px}.ghost-button.compact{min-height:34px;padding:6px 8px;font-size:.86rem}.home-screen,.select-screen{gap:10px;padding:12px}.onboarding-backdrop{padding:10px}.onboarding-card{border-radius:24px;gap:9px;max-height:94dvh;padding:16px 14px 14px}.onboarding-close{width:36px;height:36px;top:10px;right:10px}.onboarding-card h2{padding-right:32px;font-size:1.55rem}.onboarding-copy{font-size:.96rem;line-height:1.45}.onboarding-demo{--demo-travel-x:190px;min-height:132px}.demo-map-slot{width:112px;height:62px;top:37px;right:24px}.demo-piece{width:78px;height:48px;top:50px;left:26px}.demo-pointer{top:98px;left:72px}.onboarding-steps{gap:6px}.onboarding-steps li{padding:7px 4px;font-size:.82rem}.onboarding-actions{grid-template-columns:1fr 1fr;gap:8px}.home-screen:before{opacity:.18;height:42%;inset:-6% -20% auto -18%}.home-screen:after{opacity:.11;bottom:20%;right:-24%}.home-hero:before{opacity:.72;width:92vw;height:150px;top:24px;left:-18px}.home-hero h1{text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 3px 4px 0 var(--ink-cyan), -2px 6px 0 color-mix(in srgb, var(--ink-orange) 56%, white), 0 11px 18px #5a3e1a1f;font-size:clamp(3.5rem,17vw,4.5rem)}.select-heading h1{font-size:1.85rem}.hero-catch{padding:5px 10px;font-size:1.08rem}.onboarding-replay-button{min-height:31px;padding:5px 10px;font-size:.8rem}.hero-copy,.select-heading p{font-size:.98rem}.select-heading{align-items:stretch}.mode-grid,.region-grid{grid-template-columns:1fr;gap:10px}.mode-grid{padding:4px 3px 9px}.mode-grid:before{opacity:.1;width:168px;height:92px;top:-18px;left:48%}.mode-grid:after{opacity:.08;width:154px;height:86px;top:34%;right:-18%}.mode-card,.region-card{gap:6px;min-height:162px;padding:12px 12px 13px 18px}.mode-card{--mode-tilt:-.45deg;--mode-hover-tilt:.65deg;--mode-press-tilt:-.8deg;clip-path:polygon(0 5%,4% 1%,47% 0,100% 4%,99% 91%,94% 100%,38% 99%,0 95%)}.mode-card:hover{transform:translate(2px, -4px) rotate(var(--mode-hover-tilt)) scale(1.008)}.mode-card:after{opacity:.58;width:84px;height:58px;top:-16px;right:-14px}.home-footer{grid-template-columns:26px auto;gap:1px 7px;width:100%;padding:7px 10px;font-size:.72rem}.home-footer:before{width:26px}.mode-card strong,.region-card strong{font-size:1.14rem}.mode-card-top{gap:8px}.mode-emoji{border-radius:13px;flex-basis:38px;width:38px;height:38px;font-size:1.35rem}.region-emoji{border-radius:13px;flex-basis:38px;width:38px;height:38px;font-size:1.25rem}.mode-label,.region-pill{font-size:.78rem}.mode-description,.mode-meta{font-size:.84rem}.puzzle-screen{--bottom-tray-height:106px;grid-template-rows:auto auto minmax(0, 1fr) calc(var(--bottom-tray-height) + var(--bottom-tray-safe-area))}.play-status{grid-template-columns:1fr 1fr;gap:5px;min-height:72px;padding:5px 8px}.puzzle-play-status{grid-template-columns:minmax(86px,.85fr) minmax(0,1.15fr)}.drag-status-slot{min-width:0;min-height:34px;padding:5px 8px;font-size:.86rem}.stat-row{gap:5px;padding:6px 7px;font-size:.88rem}.status-message{font-size:.85rem}.bottom-tray{height:calc(var(--bottom-tray-height) + var(--bottom-tray-safe-area))}.tray-label{padding:5px 9px 0;font-size:.88rem}.tray-scroll{gap:8px;padding:3px 9px 9px}.puzzle-piece{flex-basis:80px;width:80px;min-height:72px}.puzzle-piece svg{width:58px;height:34px}.puzzle-piece span{font-size:.78rem}.hint-panel{max-width:calc(100vw - 150px);padding:8px;bottom:8px;left:8px}.hint-panel p{display:none}.hint-panel .secondary-button{min-height:40px;padding:8px 10px;font-size:.84rem}.zoom-controls{gap:5px;bottom:8px;right:8px}.zoom-controls button{min-width:40px;min-height:40px}.zoom-controls .fit-button{min-width:86px;padding:0 8px;font-size:.8rem}.mini-map{width:108px;height:78px;top:8px;right:8px}.countdown span{min-width:118px;min-height:118px}.result-stats{gap:5px}.result-stats div{padding:7px 4px}.result-card{gap:7px;padding:12px}.time-title-badge{padding:8px 10px}.result-actions{gap:6px}.quiz-main{grid-template-rows:minmax(260px,.9fr) minmax(170px,1fr);gap:8px;padding:8px}.quiz-card{gap:10px;padding:12px}.quiz-card h1{font-size:1.55rem}.option-grid{gap:8px}.option-button{min-height:58px;font-size:1rem}.option-grid.has-six-options{gap:7px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}