:root{--bg: #0c0f18;--panel: #1b2030;--panel-2: #232a3d;--text: #eef1f8;--muted: #9aa3b8;--accent: #3dc9e5;font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(circle at 50% 0%,#1a2236 0%,var(--bg) 70%);color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none}.app{position:relative;height:100dvh;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden;transition:background .8s ease}.app[data-richness="1"]{background:radial-gradient(circle at 50% 18%,rgba(61,201,229,.06),transparent 55%)}.app[data-richness="2"]{background:radial-gradient(circle at 50% 16%,rgba(61,201,229,.1),transparent 52%),radial-gradient(circle at 50% 100%,rgba(155,93,229,.08),transparent 55%)}.app[data-richness="3"]{background:radial-gradient(circle at 50% 14%,rgba(61,201,229,.14),transparent 50%),radial-gradient(circle at 12% 80%,rgba(229,169,61,.1),transparent 45%),radial-gradient(circle at 88% 30%,rgba(155,93,229,.12),transparent 45%)}.app[data-richness="4"]{background:radial-gradient(circle at 50% 12%,rgba(255,225,77,.16),transparent 48%),radial-gradient(circle at 12% 80%,rgba(229,83,61,.12),transparent 42%),radial-gradient(circle at 88% 28%,rgba(155,93,229,.16),transparent 42%),radial-gradient(circle at 50% 100%,rgba(61,201,229,.12),transparent 50%)}.app:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .8s ease;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(2px 2px at 80% 20%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 65% 70%,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 35% 80%,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 90% 60%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 10% 60%,rgba(255,255,255,.5),transparent)}.app[data-richness="2"]:before{opacity:.4}.app[data-richness="3"]:before{opacity:.7}.app[data-richness="4"]:before{opacity:1}.app-frame{position:relative;width:min(440px,100%)}.charsel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 16px 28px;text-align:center}.charsel-title{font-size:24px;font-weight:900;margin:4px 0}.charsel-stage{width:100%;border-radius:18px;padding:18px 12px 14px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--cat-color) 40%,#1b2030),#11141f);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cat-color) 50%,transparent)}.charsel-stage-emoji{font-size:96px;line-height:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));animation:charBob 3s ease-in-out infinite}.charsel-stage-name{font-size:22px;font-weight:900;margin-top:6px}.charsel-stage-tag{font-size:13px;color:var(--muted);margin-top:2px}.charsel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}.charsel-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:14px;background:var(--panel);border:2px solid transparent;cursor:pointer;transition:transform .08s}.charsel-card:active{transform:scale(.95)}.charsel-card.selected{border-color:var(--cat-color);background:color-mix(in srgb,var(--cat-color) 18%,var(--panel));box-shadow:0 0 14px color-mix(in srgb,var(--cat-color) 50%,transparent)}.charsel-card-emoji{font-size:34px;line-height:1}.charsel-card-name{font-size:10px;font-weight:700;color:var(--text)}.charsel-actions{display:flex;gap:10px;align-items:center;margin-top:4px}.btn-primary{background:linear-gradient(180deg,#4ad4ee,#2ba6c4);color:#04222b;border:none;border-radius:14px;padding:14px 34px;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 5px #1c7c95;transition:transform .05s}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px #1c7c95}.btn-ghost{background:transparent;color:var(--muted);border:2px solid var(--panel-2);border-radius:14px;padding:12px 24px;font-size:16px;font-weight:700;cursor:pointer}.icon-btn{background:var(--panel);border:1px solid var(--panel-2);color:var(--text);width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer}.screen{display:flex;flex-direction:column;align-items:center}.title-screen{gap:14px;padding:18px 10px;text-align:center}.title-logo{font-size:40px;margin:6px 0 0;letter-spacing:1px;text-shadow:0 4px 0 rgba(0,0,0,.3)}.title-accent{color:var(--accent)}.title-tag{color:var(--muted);margin:0 0 6px;font-size:14px;line-height:1.6}.cat-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.cat-chip{color:#fff;font-weight:800;font-size:13px;padding:6px 12px;border-radius:20px}.title-help{background:var(--panel);border-radius:14px;padding:14px 18px;width:100%;max-width:360px}.help-title{font-weight:800;margin-bottom:8px;color:var(--accent)}.title-help table{width:100%;font-size:13px;border-collapse:collapse}.title-help td{padding:4px 0;vertical-align:top}.title-help td:first-child{color:var(--accent);font-weight:700;white-space:nowrap;padding-right:12px;width:38%}.title-highscore{color:#ffe14d;font-weight:800;font-size:15px}.title-foot{color:var(--muted);font-size:11px;margin:0}.game-screen{width:100%}.game-topbar{display:flex;justify-content:flex-end;gap:8px;width:100%;margin-bottom:8px}.game-body{display:flex;gap:12px;width:100%;align-items:flex-start}.field-wrap{position:relative;flex-shrink:0;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px #00000080;background:linear-gradient(180deg,#1b2030,#11141f)}.field-canvas{display:block;width:276px;height:552px;cursor:crosshair;position:relative;z-index:2;background:transparent}.char-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5%;gap:2%;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--char-color) 24%,transparent),transparent 56%)}.char-bg.clearing{background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--cat-color) 40%,transparent),transparent 50%),radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--char-color) 26%,transparent),transparent 56%)}.char-bg-emoji{font-size:130px;line-height:1;opacity:.42;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));animation:charBob 3.6s ease-in-out infinite}.char-bg-garbage{font-size:86px;line-height:1;opacity:.92;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));animation:garbPop 1.1s cubic-bezier(.2,1.5,.4,1) both}@keyframes garbPop{0%{opacity:0;transform:scale(.4) translateY(24px) rotate(-12deg)}20%{opacity:1;transform:scale(1.14) translateY(0) rotate(5deg)}36%{transform:scale(1) rotate(0)}76%{opacity:1}to{opacity:0;transform:scale(1.06) translateY(-6px)}}@keyframes charBob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}.char-bg-emoji.react{opacity:.75}.char-bg-emoji.react-1{animation:charR1 .9s ease-out both}.char-bg-emoji.react-2{animation:charR2 .9s ease-out both}.char-bg-emoji.react-3{animation:charR3 .9s cubic-bezier(.2,1.5,.4,1) both}.char-bg-emoji.react-4{animation:charR4 .95s cubic-bezier(.2,1.6,.4,1) both}@keyframes charR1{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.06)}to{transform:translateY(0) scale(1)}}@keyframes charR2{0%{transform:translateY(0) scale(1) rotate(0)}35%{transform:translateY(-18px) scale(1.12) rotate(-4deg)}to{transform:translateY(0) scale(1) rotate(0)}}@keyframes charR3{0%{transform:translateY(0) scale(1) rotate(0)}30%{transform:translateY(-26px) scale(1.2) rotate(6deg)}60%{transform:translateY(0) scale(1.08) rotate(-4deg)}to{transform:translateY(0) scale(1) rotate(0)}}@keyframes charR4{0%{transform:translateY(0) scale(1) rotate(0)}20%{transform:translateY(-34px) scale(1.3) rotate(-8deg)}45%{transform:translateY(0) scale(1.15) rotate(8deg)}65%{transform:translateY(-8px) scale(1.18) rotate(-6deg)}to{transform:translateY(0) scale(1) rotate(0)}}.char-react{position:absolute;top:5%;right:15%;font-size:46px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:reactPop .9s cubic-bezier(.2,1.6,.4,1) both}.char-react.react-3{font-size:56px}.char-react.react-4{font-size:66px}@keyframes reactPop{0%{opacity:0;transform:translateY(10px) scale(.4)}25%{opacity:1;transform:translateY(0) scale(1.15)}70%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(1)}}.callout-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:flex-start;justify-content:center;padding-top:5%;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--cat-color) 70%,transparent),transparent 64%),linear-gradient(160deg,color-mix(in srgb,var(--cat-color) 34%,#11141f),#11141f)}.callout-bg-in{animation:bgIn 1s ease-out both}@keyframes bgIn{0%{opacity:0}16%{opacity:1}68%{opacity:1}to{opacity:0}}.callout-bg-emoji{font-size:172px;line-height:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));animation:bgCutin 1.05s cubic-bezier(.16,1.1,.3,1) both}@keyframes bgCutin{0%{transform:translate(-58%) scale(.5) rotate(-12deg);opacity:0}22%{transform:translate(7%) scale(1.14) rotate(3deg);opacity:.5}34%{transform:translate(0) scale(1) rotate(0);opacity:.48}68%{transform:translate(0) scale(1.04) rotate(0);opacity:.48}to{transform:translate(16%) scale(1.16) rotate(0);opacity:0}}.hud{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}.hud-panel{background:var(--panel);border-radius:12px;padding:10px 12px}.hud-label{font-size:11px;color:var(--muted);letter-spacing:1px;font-weight:700}.hud-score{font-size:26px;font-weight:900;line-height:1.1}.hud-sub{font-size:11px;color:var(--muted);margin-top:2px}.next-row{display:flex;gap:12px;margin-top:6px}.hud-stats{display:flex;justify-content:space-between;gap:8px}.hud-num{font-size:22px;font-weight:900}.callout{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center;width:100%}.callout-emoji{font-size:56px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}.callout-text{font-weight:900;font-size:22px;line-height:1.3;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.6)}.callout-head{color:#fff}.callout-tail{display:inline-block;margin-left:2px}.callout-tip{margin-top:8px;font-size:13px;font-weight:700;color:#fff;background:#0000008c;border-radius:10px;padding:6px 12px;max-width:90%;line-height:1.4;text-shadow:none}.callout-in{animation:calloutIn .32s cubic-bezier(.2,1.4,.5,1) both}.callout-out{animation:calloutOut .3s ease-in forwards}@keyframes calloutIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}@keyframes calloutOut{to{opacity:0;transform:translate(-50%,-120%) scale(.9)}}.cutin{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:hidden;pointer-events:none;display:flex;align-items:center}.cutin-band{position:relative;width:130%;margin-left:-15%;height:132px;display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--cat-color) 80%,#000) 16%,var(--cat-color) 50%,color-mix(in srgb,var(--cat-color) 80%,#000) 84%,transparent);box-shadow:0 0 24px #00000080;transform:skew(-12deg);animation:cutinBand .9s cubic-bezier(.18,1.3,.32,1) both}.cutin-stripes{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 12px,transparent 12px 30px);mix-blend-mode:overlay}.cutin-emoji{font-size:92px;line-height:1;transform:skew(12deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));z-index:1}.cutin-text{display:flex;align-items:baseline;gap:6px;transform:skew(12deg);color:#fff;font-weight:900;font-style:italic;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 18px rgba(255,255,255,.5);z-index:1}.cutin-num{font-size:76px;line-height:1}.cutin-label{font-size:30px}.cutin-hype{margin-left:8px;font-size:26px;color:#ffe14d}@keyframes cutinBand{0%{transform:translate(115%) skew(-12deg);opacity:0}20%{transform:translate(-3%) skew(-12deg);opacity:1}30%{transform:translate(0) skew(-12deg)}70%{transform:translate(0) skew(-12deg);opacity:1}to{transform:translate(-120%) skew(-12deg);opacity:0}}.allclear{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:allclearIn .4s cubic-bezier(.2,1.5,.4,1) both}.allclear-text{font-size:38px;font-weight:900;font-style:italic;color:#fff;background:linear-gradient(90deg,#ff7a3d,#ffe14d,#3dc9e5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 24px rgba(255,220,90,.5);filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}.allclear-bonus{font-size:26px;font-weight:900;color:#ffe14d;text-shadow:0 2px 0 #b5450f}@keyframes allclearIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#080a12c7;display:flex;align-items:center;justify-content:center;cursor:pointer}.pause-card{text-align:center;font-size:28px;font-weight:900}.pause-hint{font-size:13px;color:var(--muted);font-weight:600;margin-top:8px}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#080a12d1;display:flex;align-items:center;justify-content:center;z-index:20;animation:fadeIn .2s ease both;padding:12px}.zukan{background:var(--panel);border-radius:16px;width:100%;max-width:400px;max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px #0009}.zukan-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--panel-2)}.zukan-title{font-size:20px;font-weight:900}.zukan-count{margin-left:auto;color:var(--accent);font-weight:800}.zukan-body{padding:12px 16px;overflow-y:auto}.zukan-cat{margin-bottom:14px}.zukan-cat-head{font-weight:800;font-size:14px;margin-bottom:8px}.zukan-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.zukan-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:10px;background:var(--panel-2)}.zukan-item.locked{opacity:.45}.zukan-item{position:relative}.zukan-tipmark{position:absolute;top:2px;right:4px;font-size:11px}.zukan-emoji{font-size:26px;line-height:1}.zukan-name{font-size:10px;font-weight:700;color:#fff;text-align:center;line-height:1.2}.zukan-item.locked .zukan-name{color:var(--muted)}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:#080a12f7;display:flex;align-items:center;justify-content:center;border-radius:16px;animation:fadeIn .3s ease both}@keyframes fadeIn{0%{opacity:0}}.result-screen{gap:14px;padding:20px;width:100%;max-width:400px}.result-title{font-size:30px;margin:0}.result-char{position:relative;display:flex;align-items:center;justify-content:center;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cat-color) 36%,transparent),transparent 70%)}.result-char-emoji{font-size:96px;line-height:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}.result-char.win .result-char-emoji{animation:charR4 .9s cubic-bezier(.2,1.6,.4,1) both,charBob 3s ease-in-out .9s infinite}.result-char.lose .result-char-emoji{animation:loseDroop .7s ease both;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) grayscale(.5)}@keyframes loseDroop{0%{transform:translateY(-8px) scale(1.05)}to{transform:translateY(4px) scale(.96)}}.result-char-bubble{position:absolute;top:-4px;right:-4px;font-size:40px;animation:reactPop 1.2s cubic-bezier(.2,1.6,.4,1) both}.result-record{color:#ffe14d;font-weight:900;font-size:18px;animation:pop .5s ease both}@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.result-score-box{background:var(--panel);border-radius:14px;padding:16px 24px;text-align:center;width:100%}.result-score{font-size:44px;font-weight:900;line-height:1.1}.result-meta{color:var(--muted);font-size:13px;margin-top:4px}.zukan-progress{width:100%;text-align:center;background:var(--panel-2);border-radius:12px;padding:10px 12px;font-weight:800;color:var(--accent);font-size:15px}.learned-box{width:100%;background:var(--panel);border-radius:14px;padding:14px 16px}.learned-title{font-weight:800;color:var(--accent);margin-bottom:10px}.learned-empty{color:var(--muted);font-size:14px;margin:0}.learned-grid{display:flex;flex-direction:column;gap:8px}.learned-cat{border-left:4px solid;padding:4px 10px;background:var(--panel-2);border-radius:6px}.learned-cat-name{font-weight:800;margin-right:8px;font-size:14px}.learned-items{font-size:13px;color:var(--text)}.result-btns{display:flex;gap:12px;margin-top:4px}