:root{color-scheme:dark;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#2e2b27;background:#11171d;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{display:grid;place-items:center;height:100vh;height:100dvh}
button,input{-webkit-tap-highlight-color:transparent}
button,a,input{touch-action:manipulation}
button{font:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid #e9d5a6;outline-offset:5px}
button:disabled{cursor:default}
button,img{-webkit-user-drag:none}
img{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}
/* One coordinate system keeps every object at the same scale in every browser. */
.stage{--u:.4px;position:relative;isolation:isolate;width:min(100vw,66.6666667vh);height:min(100vh,150vw);aspect-ratio:2/3;overflow:hidden;background:#18232c;box-shadow:0 0 80px #0004;touch-action:manipulation}
.scene{position:absolute;inset:0;overflow:hidden}
.ground-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.ground{background:#69685d}
.viewport{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:grid;place-items:center;overflow:hidden}
.floor-plane{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 75%;transform:perspective(calc(2900 * var(--u))) rotateX(14deg)}
.stage[aria-busy="true"] .floor-plane{visibility:hidden}
.pill{position:absolute;z-index:5;border:1.6px solid #393730;border-radius:999px;background:#f8f5ec;color:#282723;font-size:clamp(14px,calc(34 * var(--u)),22px);font-weight:650;letter-spacing:.07em;min-height:44px;padding:.63em 1.28em;box-shadow:0 2px 2px #0002}
.pill:active{transform:translateY(2px)}
.navigation{left:5%;top:3%}
.options-open{position:absolute;top:3%;right:4%;min-width:64px;min-height:44px;padding:8px 14px;border:1px solid #eee0be70;border-radius:999px;color:#f8f3e6;background:#18212aaa;z-index:6;font-size:14px;letter-spacing:.1em;line-height:1.4}
.cards{position:absolute;inset:0;pointer-events:none}
.card{position:absolute;display:block;width:calc(280 * var(--u));height:calc(300 * var(--u));padding:calc(14 * var(--u));border:calc(8 * var(--u)) solid #34342b;background:#d4c3a1;color:inherit;box-shadow:calc(var(--shadow-x) * var(--u)) calc(var(--shadow-y) * var(--u)) calc(5 * var(--u)) #0008,0 calc(2 * var(--u)) calc(2 * var(--u)) #000a;transform:rotate(var(--angle));pointer-events:auto;transition:filter .2s;isolation:isolate}
.card .print{display:block;width:100%;height:100%;overflow:hidden;background:#d9cfb9}
.card img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.72) contrast(.94) brightness(var(--exposure));pointer-events:none}
/* Both layers cover the print AND paper rim. Counter-rotate light, not the card. */
.card::after{content:"";position:absolute;inset:calc(-8 * var(--u));pointer-events:none;background:linear-gradient(var(--light-angle),rgba(218,178,107,var(--warmth)) 0%,rgba(100,79,45,.07) 44%,rgba(22,26,31,var(--shade)) 100%);mix-blend-mode:multiply;z-index:1}
.card::before{content:"";position:absolute;inset:calc(-8 * var(--u));pointer-events:none;background:linear-gradient(var(--light-angle),rgba(255,224,160,var(--highlight)) 0%,rgba(255,217,145,var(--highlight-mid)) 38%,rgba(255,217,145,0) 78%);mix-blend-mode:screen;z-index:2}
.card:active{filter:brightness(.94)}
.card.correct{animation:accepted .35s ease}
.card.miss{animation:miss .22s ease}
.wood{position:absolute;left:46%;top:69%;transform:translate(-50%,-50%);width:calc(var(--wood-size,225) * var(--u));height:calc(var(--wood-size,225) * var(--u));min-width:44px;min-height:44px;border:0;border-radius:50%;padding:0;background:none;filter:brightness(.94) saturate(.88) sepia(.05) drop-shadow(0 calc(7 * var(--u)) calc(4 * var(--u)) #0009);z-index:2;pointer-events:auto}
.wood img{position:absolute;left:50%;top:50%;width:220%;height:220%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none}
.wood:active,.wood.pressed{transform:translate(-50%,calc(-50% + 3px));filter:brightness(.91) saturate(.88) sepia(.05) drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) #0008)}
.knee{position:absolute;bottom:0;width:46%;height:24%;border:0;padding:0;background:none;cursor:default;z-index:0}
.knee-left{left:1%}.knee-right{right:1%}
.knee:active{background:#f2dab909;border-radius:60% 60% 0 0}
.sky{background:#071425}
.sky::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0005}
#sky-grain,.stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stars{z-index:1}
.star{position:absolute;width:46px;height:46px;padding:0;transform:translate(-50%,-50%);border:0;background:none;color:#ffe4a0;pointer-events:auto;cursor:default;isolation:isolate}
.star .spark{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);background:#fff2c9;clip-path:polygon(47% 0,55% 43%,100% 49%,56% 55%,50% 100%,44% 56%,0 50%,43% 44%);transform:translate(-50%,-50%);animation:twinkle var(--period) ease-in-out infinite alternate;animation-delay:var(--delay)}
.star::before{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;transform:translate(-50%,-50%);background:#fff4cc;box-shadow:0 0 7px 3px #ffe3a038;border-radius:50%}
.star.sparkled .spark{animation:star-press .4s ease}
.raised-hands{position:absolute;left:0;bottom:0;width:100%;height:54%;object-fit:contain;object-position:center bottom;z-index:3;pointer-events:none;opacity:0;transform:translateY(115%);transition:transform .7s cubic-bezier(.2,.65,.2,1),opacity .2s ease;will-change:transform}
.raised-hands.visible{opacity:1;transform:translateY(0)}
.raise{bottom:6%;left:50%;transform:translateX(-50%);white-space:nowrap;min-width:43%;text-align:center;z-index:5}
.raise:active{transform:translate(-50%,2px)}
.raise.is-raised{box-shadow:0 0 0 2px #ead8b13d,0 2px 2px #0002}
.effects{position:absolute;inset:0;pointer-events:none;z-index:12}
.effect{position:absolute;white-space:nowrap;font-weight:650;letter-spacing:.17em;font-size:clamp(21px,calc(52 * var(--u)),31px);color:#fff4d6;text-shadow:0 1px 5px #181818;transform:translate(-50%,-50%);animation:float-away .8s ease-out forwards}
.effect.kira{color:#fff4b3;font-size:clamp(17px,calc(42 * var(--u)),26px)}
.dialog{position:fixed;max-width:min(90vw,400px);width:340px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;border:1px solid #9c927c;border-radius:10px;background:#f3efe4;color:#34302a;padding:38px 26px 28px;box-shadow:0 15px 65px #0007;font-size:15px}
.dialog::backdrop{background:#060c14a8}
.dialog h1,.dialog h2{margin:0 0 26px;font-size:20px;font-weight:600;letter-spacing:.05em}
.dialog-close{position:absolute;right:9px;top:7px;border:0;background:none;color:#454137;font-size:25px;width:36px;height:36px}
.volume{display:flex;align-items:center;gap:18px;margin:0 0 30px}
.volume input{width:100%;accent-color:#8b7547;touch-action:pan-x}
.volume-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}
.volume-heading output{font-size:13px;color:#716754}
.volume-slider{display:block;width:100%;height:40px;margin:4px 0 12px;accent-color:#8b7547;font-size:16px}
.mute{width:100%;margin-bottom:14px}.mute.is-muted{background:#453e32;color:#fff9ec}
.setting-links{margin:0 0 20px}.setting-links a{display:block;padding:14px 0;border-top:1px solid #b3a68d66;color:#383128;text-decoration:none;font-size:15px;font-weight:600;line-height:1.5}
.setting-links span{display:block;margin-top:6px;font-size:12px;line-height:1.75;font-weight:400;color:#716754}
.setting-note{font-size:12px;line-height:1.75;color:#716754;margin:14px 0 0}
.record-grid{display:grid;grid-template-columns:1fr auto;gap:16px;margin:0}.record-grid dt{font-size:14px}.record-grid dd{margin:0;font-size:20px;font-variant-numeric:tabular-nums}
.share-link{display:block;min-height:44px;margin:0 0 16px;padding:12px 18px;border-radius:4px;background:#171717;color:white;text-decoration:none;font-size:15px}
.connection{position:fixed;z-index:20;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90vw,400px);padding:18px;background:#f3efe4;color:#34302a;border:1px solid #9c927c;border-radius:8px;text-align:center;font-size:14px;box-shadow:0 4px 18px #0006}.connection p{margin:0 0 12px}
.plain{min-height:44px;padding:10px 18px;border:1px solid #b3a68d;border-radius:4px;background:#faf7ef;color:#383128;font-size:14px}
.primary{background:#453e32;color:#fff9ec;border-color:#453e32}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px}
.clear-dialog{text-align:center;padding:43px 24px 30px}
.clear-dialog h2{font-size:20px;line-height:1.8;margin:0 0 25px}
.overline{font-size:11px;letter-spacing:.3em;color:#8c7955;margin:0 0 15px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes accepted{40%{transform:rotate(var(--angle)) translateY(-6px);filter:brightness(1.09)}}
@keyframes miss{25%{transform:rotate(calc(var(--angle) - 2deg))}75%{transform:rotate(calc(var(--angle) + 2deg))}}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
@keyframes star-press{50%{transform:translate(-50%,-50%) scale(1.7);opacity:1}}
@keyframes float-away{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -45px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.effect{opacity:1}}
@media(max-height:480px){.navigation,.options-open{top:2%}.pill{font-size:14px;padding:.5em 1em;min-height:36px}.options-open{width:36px;height:36px}.star{width:40px;height:40px}}