:root{color-scheme:dark;--bg:#0c111a;--paper:#181f2b;--muted:#98a6bc;--text:#f7f3ed;--line:#354051;--accent:#f8ba79}*{box-sizing:border-box}html{background:var(--bg);min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100svh;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 90% 0%,#222b3a 0,transparent 45%),var(--bg)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #f5c980;outline-offset:4px}.top{max-width:1100px;margin:auto;min-height:80px;padding:21px clamp(20px,5vw,36px);display:flex;justify-content:space-between;align-items:center;gap:20px}.logo{font-size:19px;font-weight:850;letter-spacing:-.055em;line-height:1.1}.logo span{font-weight:400}.logo small{display:block;letter-spacing:.17em;color:#a7b1c3;font-size:9px;font-weight:600;margin-top:4px}.follow{border:1px solid #556071;border-radius:100px;padding:10px 13px;font-size:12px;color:#f3f3f3;white-space:nowrap}.home{max-width:1100px;padding:0 clamp(20px,5vw,36px) 90px;margin:auto}.hero{min-height:370px;padding:65px 0 65px;display:flex;flex-direction:column;align-items:start;justify-content:center}.eyebrow{letter-spacing:.16em;font-weight:800;font-size:11px;color:#f5b985}.hero h1{font-size:clamp(66px,14vw,134px);line-height:1.06;letter-spacing:-.09em;margin:14px 0 18px}.hero em{font-style:normal;color:#f4ad7a}.hero p{font-size:16px;line-height:1.9;color:#c0c8d4;margin:0}.hero-meta{color:#73859f;font-size:10px;font-weight:700;letter-spacing:.14em;margin-top:22px}.hero-meta span{padding:0 7px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 19px}.section-head h2{font-size:23px;margin:0}.section-head span{font-size:10px;color:#8491a4;letter-spacing:.12em}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{display:block;background:#1a222d;border:1px solid #333f4d;overflow:hidden;border-radius:17px;transition:transform .18s,border-color .18s}.card:hover{transform:translateY(-3px);border-color:#c5a88a}.card-art{height:210px;display:grid;place-items:center;position:relative;overflow:hidden}.card.aqua .card-art{background:radial-gradient(circle at 50% 30%,#2ba5b8,#0d3a50 70%)}.card.amber .card-art{background:radial-gradient(circle at 55% 40%,#b96759,#3b2741 80%)}.card.violet .card-art{background:radial-gradient(circle at 50% 20%,#614265,#17131e 80%)}.art-icon{font-size:clamp(70px,12vw,134px);font-weight:200;line-height:1;filter:drop-shadow(0 20px 13px #0015)}.art-num{position:absolute;right:15px;top:13px;font-size:11px;font-weight:800;opacity:.6}.card-info{padding:23px}.emotion{font-size:11px;font-weight:800;letter-spacing:.12em;color:#f6bb8d}.card h3{font-size:29px;letter-spacing:-.05em;margin:8px 0}.card p{color:#b7c2d1;font-size:13px;line-height:1.7;min-height:44px}.card-cta{font-size:12px;font-weight:800;border-top:1px solid #394452;display:flex;justify-content:space-between;padding-top:20px;margin-top:25px}.card-cta b{font-size:19px}.manifesto{margin-top:75px;background:#141b26;border-left:3px solid #f1b680;border-radius:10px;padding:34px}.manifesto span{color:#f1b680;font-size:10px;letter-spacing:.16em}.manifesto h2{margin:11px 0;font-size:24px}.manifesto p{line-height:1.8;color:#aeb8c6;margin:0}.foot{max-width:1100px;padding:22px 36px 40px;margin:auto;display:flex;flex-wrap:wrap;gap:22px;justify-content:center;font-size:12px;color:#91a0b2}.game-shell{max-width:560px;margin:0 auto;padding:4px 16px 25px}.game-heading{text-align:center;padding:2px 0 12px}.game-heading .label{font-size:10px;font-weight:800;letter-spacing:.15em;color:#f4b989}.game-heading .label span{color:#adbbcb}.game-heading h1{font-size:clamp(31px,9vw,49px);line-height:1.15;letter-spacing:-.055em;margin:5px 0}.game-heading p{margin:0;color:#c1c9d5;font-size:13px}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.hud>div{background:#17232f;border:1px solid #35404f;border-radius:10px;text-align:center;padding:8px}.hud small{display:block;font-size:9px;color:#9aa9ba;letter-spacing:.1em}.hud strong{font-size:20px;font-variant-numeric:tabular-nums;display:block;margin-top:3px}.arena{aspect-ratio:360/400;max-height: min(48svh,430px);position:relative;border-radius:17px;border:1px solid #3b5062;overflow:hidden;background:#102632;box-shadow:0 20px 65px #0005}.arena canvas{display:block;width:100%;height:100%}.curtain{position:absolute;inset:0;background:#09111edc;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;backdrop-filter:blur(5px);z-index:2}.curtain.hidden{display:none}.curtain h2{font-size:clamp(30px,10vw,47px);letter-spacing:-.05em;margin:12px 0}.curtain p{font-size:14px;color:#dde1e7;line-height:1.8;max-width:270px}.btn,.action{border:none;border-radius:14px;color:#111b24;background:linear-gradient(130deg,#f7c989,#f3a679);font-weight:850;box-shadow:0 6px 0 #9a6045;min-height:54px}.btn{width:min(260px,100%);margin:18px 0 0}.share-btn{margin-top:16px;border:1px solid #8d98a7;background:transparent;border-radius:9px;color:#fff;padding:10px 16px}.related{font-size:12px;color:#f5c588;margin-top:14px;text-decoration:underline;text-underline-offset:3px}.play-controls{padding:10px 0 0}.play-controls>p{text-align:center;color:#adbdce;font-size:12px;min-height:19px;margin:6px 0 10px}.action{width:100%;font-size:17px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.action:disabled{opacity:.55;cursor:default;box-shadow:none}.action:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #9a6045}.controls-bottom{display:flex;justify-content:space-between;gap:12px;margin:13px 0 0}.controls-bottom>*{font-size:11px;color:#a8b5c3;background:none;border:none;padding:8px 2px}.game-shell.violet .action{background:linear-gradient(135deg,#e9b6cf,#ca9fd7)}.game-shell.amber .action{background:linear-gradient(135deg,#ffce8e,#f59a81)}@media(max-width:700px){.cards{grid-template-columns:1fr}.card{display:grid;grid-template-columns:38% 62%}.card-art{height:100%;min-height:175px}.card-info{padding:16px}.card p{min-height:unset}.card h3{font-size:23px}.card-cta{margin-top:10px;padding-top:10px}.hero{min-height:325px;padding-top:30px}.top{min-height:67px}.follow{font-size:11px}.manifesto{margin-top:46px}}@media(max-height:720px){.game-shell{padding-top:0}.game-heading{padding-bottom:6px}.game-heading h1{font-size:28px}.arena{max-height:43svh}.hud{margin-bottom:7px}.hud>div{padding:5px}.hud strong{font-size:17px}.action{min-height:49px}.play-controls>p{margin:4px 0 8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
[hidden]{display:none!important}
.collect-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px;padding:5px 2px;font-size:12px}
.collect-bar span{font-weight:800;color:#f5cc94;letter-spacing:.025em}
.collect-bar button{color:#e3eaf0;background:#223344;border:1px solid #667688;border-radius:99px;padding:7px 12px;font-size:11px;font-weight:700}
.collection-panel{position:absolute;inset:0;z-index:4;background:#0c1520f5;color:#edf2f7;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.collection-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.collection-head strong{font-size:22px}
.collection-head button{border:1px solid #667688;border-radius:10px;background:#243243;color:#f8f8fa;padding:9px 14px}
.collection-panel>p{font-size:12px;line-height:1.6;color:#b2c0d1;margin:9px 0 15px}
.collection-panel ol{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.collection-panel li{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #384454;background:#192431;border-radius:10px;min-height:57px}
.collection-panel li.found{border-color:#67856e;background:#20312f}
.ending-number{font-size:10px;color:#9cabc1;font-weight:800;white-space:nowrap}
.ending-info{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.ending-info strong{font-size:13px}
.ending-info small{font-size:11px;color:#b1bdd0;line-height:1.5}
.ending-mark{font-size:20px;font-weight:800;color:#ecc391}
@media(max-height:720px){.collect-bar{padding:0;margin-bottom:5px}.collect-bar button{padding:5px 9px}}

/* Discovery and completion: lightweight, accessible, no external assets */
.curtain{overflow-y:auto;overscroll-behavior:contain}
.curtain.found-new{background:radial-gradient(circle at 50% 36%,#6c502466,transparent 55%),#09111ee9}
.curtain.found-new .discovery-result{animation:discovery-rise .45s cubic-bezier(.18,.8,.25,1) both}
.curtain.found-new .discovery-glyph{animation:discovery-pop .65s ease-out both}
.discovery-result{margin:9px 0 3px;display:flex;align-items:center;gap:10px;justify-content:center;border:1px solid #b89a61;border-radius:12px;background:#3c3028e8;padding:9px 13px;width:min(292px,100%);min-height:48px}
.discovery-glyph{font-size:24px;color:#ffd68e}
.discovery-info{display:flex;flex:1;flex-direction:column;gap:3px;text-align:left;min-width:0}
.discovery-info strong{font-size:11px;color:#ffe3ab;letter-spacing:.015em}
.discovery-info small{font-size:10px;color:#efdfc6}
.discovery-info small:empty{display:none}
.discovery-sparks{font-size:12px;color:#f7d98c;opacity:.7}
.curtain .btn{margin-top:10px}
.curtain .share-btn{margin-top:11px;padding:8px 13px}
.curtain .related{margin-top:10px}
.curtain h2{font-size:clamp(27px,8vw,43px);margin:6px 0}
.curtain p{font-size:13px;line-height:1.55;margin:7px 0}
.collection-track{height:8px;background:#394353;overflow:hidden;border-radius:10px;margin:0 0 13px}
.collection-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#b99368,#ffe2ae);transition:width .35s ease-out}
#collection-awards{margin-top:14px;display:grid;gap:9px;padding-bottom:10px}
.award-card{display:flex;gap:12px;border-radius:12px;padding:12px 13px;border:1px solid #434957;background:#1b2531}
.award-card.earned{border-color:#c0a273;background:linear-gradient(125deg,#3d3025,#252f3a)}
.award-symbol{font-size:27px;min-width:30px;color:#f0c68e}
.award-card.locked .award-symbol{filter:grayscale(1);opacity:.5}
.award-card>div{min-width:0;flex:1}
.award-card small{font-size:10px;color:#c2bdaf;display:block}
.award-card strong{font-size:15px;display:block;margin:4px 0}
.award-card p{font-size:11px;color:#bdc6d3;line-height:1.6;margin:2px 0}
.award-card.locked{opacity:.76}
.completion-share{border-radius:9px;border:1px solid #dfb677;background:#31271e;color:#ffe7bc;padding:9px 12px;margin-top:8px;font-size:11px;font-weight:700}
.archive-progress{margin-top:21px;padding:14px;border:1px solid #4b4b52;border-radius:12px;background:#151e28;max-width:500px;width:100%}
.archive-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:10px;letter-spacing:.13em;color:#d7b999;font-weight:750}
.archive-progress-head strong{font-size:16px;color:#f7dfbd;letter-spacing:0}
.archive-track{height:7px;border-radius:10px;overflow:hidden;background:#303846;margin-top:10px}
.archive-track>span{display:block;height:100%;background:linear-gradient(90deg,#e19f81,#f1d198)}
.archive-progress p{margin:9px 0 0;font-size:12px;color:#b5c3d2}
.archive-award{margin-top:13px;display:flex;flex-direction:column;align-items:start;gap:7px;padding:12px;border:1px solid #b69b72;border-radius:9px;background:#382b2380}
.archive-award strong{font-size:16px;color:#fbe3ab}
.archive-award span{font-size:12px;color:#e2d7c5}
.archive-award button{border:1px solid #d2ae84;border-radius:9px;color:#ffe0aa;padding:9px 12px;background:#362b25;font-size:12px}
@keyframes discovery-rise{from{opacity:0;transform:translateY(13px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes discovery-pop{0%{transform:scale(.7) rotate(-35deg)}60%{transform:scale(1.28) rotate(7deg)}100%{transform:scale(1) rotate(0)}}
@media (max-height:720px){.curtain{padding:10px}.curtain h2{font-size:25px}.curtain p{font-size:11px}.discovery-result{min-height:40px;padding:5px 10px;margin:4px 0}.curtain .btn{min-height:43px;margin-top:7px}.curtain .share-btn{margin-top:7px}.curtain .related{margin-top:6px}}
@media (prefers-reduced-motion:reduce){.curtain.found-new .discovery-result,.curtain.found-new .discovery-glyph{animation:none}.collection-track span{transition:none}}

/* 004: candle, wind and lingering warmth */
.card.ember .card-art{background:radial-gradient(ellipse at 50% 38%,#ce864f 0%,#6e4855 36%,#1b263e 90%);}
.card.ember .art-icon{color:#ffdeae;text-shadow:0 0 30px #ffae58}
.game-shell.ember .action{background:linear-gradient(135deg,#ffe5b4,#f4a85f)}
.game-shell.ember .hud>div{border-color:#63505b}
.game-shell.ember .arena{border-color:#8e6471;box-shadow:0 24px 66px #0007,0 0 40px #bb6e3522}
.game-shell.ember{max-width:590px}
.game-shell.ember .arena{max-height:min(55svh,500px)}
.story-beat{position:absolute;z-index:1;left:14px;right:14px;top:67px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;pointer-events:none;opacity:.82;text-shadow:0 2px 12px #07101d,0 1px 2px #07101d;transition:opacity .35s,transform .35s}
.story-beat.show{animation:story-arrive 4s ease both}
.story-beat small{font-size:9px;letter-spacing:.18em;color:#f4d3a4;font-weight:800}
.story-beat strong{font-size:12px;line-height:1.55;color:#f6f1e8;font-weight:650}
.sound-toggle{position:absolute;z-index:3;right:9px;top:9px;border:1px solid #ffffff3d;background:#111b29bd;color:#e9eef5;border-radius:99px;padding:6px 9px;font-size:9px;font-weight:750;backdrop-filter:blur(5px)}
.game-shell.ember .curtain{background:radial-gradient(circle at 50% 39%,#804b2c55,transparent 47%),#0a1320ef}
.game-shell.ember .curtain h2{text-shadow:0 0 30px #f8ae6188}
@keyframes story-arrive{0%{opacity:0;transform:translateY(7px)}12%,76%{opacity:1;transform:translateY(0)}100%{opacity:.58;transform:translateY(0)}}
@media(max-height:720px){.game-shell.ember .arena{max-height:48svh}.story-beat{top:54px}.story-beat strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){.story-beat.show{animation:none}}

/* 16 new prototype variants — one shared engine, distinct emotional atmospheres. */
.card.timing .card-art{background:radial-gradient(ellipse at 55% 45%,var(--tone),#202538 70%);color:#fff}
.card.balance .card-art{background:radial-gradient(ellipse at 30% 35%,var(--tone),#1a2c3a 79%)}
.card.rhythm .card-art{background:radial-gradient(ellipse at 50% 25%,var(--tone),#19192d 78%)}
.card.choice .card-art{background:radial-gradient(ellipse at 70% 25%,var(--tone),#342535 80%)}
.card.timing .art-icon,.card.balance .art-icon,.card.rhythm .art-icon,.card.choice .art-icon{color:#fff;opacity:.96;text-shadow:0 0 29px #fff8}
.game-shell.timing .arena,.game-shell.balance .arena,.game-shell.rhythm .arena,.game-shell.choice .arena{border-color:var(--tone);box-shadow:0 20px 65px #0006,0 0 32px color-mix(in srgb,var(--tone),transparent 81%)}
.game-shell.timing .action,.game-shell.balance .action,.game-shell.rhythm .action,.game-shell.choice .action{background:linear-gradient(130deg,var(--tone),#f3cfb4)}
.card .card-info .emotion{line-height:1.7}
@media(max-width:700px){.cards{gap:12px}.card-art{min-height:155px}}

/* Research mode: invisible labels reduce leading questions; optional survey never blocks replay. */
html[data-study="1"] .game-heading .label span{visibility:hidden}
html[data-study="1"] .card-info .emotion{visibility:hidden}
.study-feedback{width:min(292px,100%);margin:7px auto 0;color:#e8e8ee;text-align:left}
.study-feedback details{background:#1c2939;border:1px solid #68798e;border-radius:9px;padding:7px 9px;font-size:11px}
.study-feedback summary{cursor:pointer;list-style:revert;font-weight:750;text-align:center}
.study-feedback p{font-size:11px;margin:6px 0;color:#d7dce6}
.study-feelings{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.study-feelings button{padding:6px 9px;min-height:29px;border:1px solid #5a7b96;border-radius:99px;background:#32465e;color:#f9f5f0;font-size:11px;white-space:nowrap}
.study-feelings button:disabled{opacity:.55;cursor:default}
#study-saved{display:block;text-align:center;color:#f6cf9e;font-size:10px;margin-top:4px}
.study-dashboard{background:#141f2d;border:1px solid #657d92;padding:13px 16px;border-radius:12px;margin-top:20px;width:min(530px,100%)}
.study-dashboard strong{font-size:12px;letter-spacing:.08em;color:#e2bb8a}
.study-dashboard p{font-size:12px;line-height:1.6;color:#bfcbd6;margin:8px 0}
.study-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.study-actions span{font-size:11px;color:#d0d7df;margin-right:auto}
.study-actions button{border:1px solid #6b879c;border-radius:8px;background:#263a4f;color:#e9ecf2;padding:7px 10px;font-size:11px}
@media(max-height:720px){.study-feedback{margin-top:5px}.study-feedback details{padding:5px 7px}}