:root{--bg: #0b0c0e;--panel: rgba(16, 18, 21, .86);--panel-line: rgba(224, 178, 74, .28);--text: #e8e2d0;--dim: #9a968a;--accent: #e0b24a;--good: #8fd18a;--bad: #ff6b5a;--door: #ff4a36;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Yu Gothic UI,Noto Sans,sans-serif;color:var(--text);color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}#app{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#loading{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);color:var(--dim);transition:opacity .35s}#loading.done{opacity:0;pointer-events:none}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(224,178,74,.2);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hud{position:absolute;inset:0;pointer-events:none;z-index:5;transition:opacity .2s}.hud.ghosted{opacity:0}.hud>*{pointer-events:none}.hud button,.hud .upgrades{pointer-events:auto}.hud-top{position:absolute;top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));display:flex;gap:8px;align-items:center}.spacer{flex:1}.chip{min-width:0;white-space:nowrap;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;padding:6px 12px;display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.2;backdrop-filter:blur(4px)}.chip small{color:var(--dim);font-size:12px}.chip.rubble{align-items:center}.chip.rubble .lbl{color:var(--dim);font-size:12px}.chip.rubble b{font-size:18px;color:var(--accent);font-variant-numeric:tabular-nums}.ico-rubble{display:inline-block;width:12px;height:12px;background:linear-gradient(135deg,#cfc7b2,#7d7766);clip-path:polygon(20% 0,100% 25%,85% 100%,0 80%);flex:none}.icon-btn{width:44px;height:44px;border-radius:10px;background:var(--panel);border:1px solid var(--panel-line);font-size:20px;display:grid;place-items:center;backdrop-filter:blur(4px)}.icon-btn:hover{border-color:var(--accent)}.progress{position:absolute;top:calc(62px + var(--safe-t));left:50%;transform:translate(-50%);width:min(380px,70vw);text-align:center}.progress-label{font-size:13px;color:var(--text);text-shadow:0 1px 3px #000;margin-bottom:4px}.bar{height:6px;border-radius:3px;background:#ffffff1f;overflow:hidden}.bar>div{height:100%;width:0;background:linear-gradient(90deg,#8a6d2a,var(--accent));transition:width .25s}.gauge{position:absolute;left:50%;transform:translate(-50%);top:calc(88px + var(--safe-t));width:min(380px,70vw);height:8px;border-radius:4px;background:#0000008c;border:1px solid rgba(255,255,255,.18);overflow:hidden}.gauge>div{height:100%;width:100%;background:linear-gradient(90deg,#b9b19b,#e8e2d0);transition:width .08s}.gauge>div.door{background:linear-gradient(90deg,#a1281c,var(--door))}.hint{position:absolute;left:50%;top:56%;transform:translate(-50%);background:#0000008c;border-radius:999px;padding:8px 18px;font-size:14px;color:var(--text);text-shadow:0 1px 2px #000;animation:pulse 1.6s ease-in-out infinite;transition:opacity .4s;white-space:nowrap}.hint.gone{opacity:0;animation:none}@keyframes pulse{50%{transform:translate(-50%) scale(1.05)}}.toasts{position:absolute;left:50%;transform:translate(-50%);top:calc(112px + var(--safe-t));display:flex;flex-direction:column;align-items:center;gap:6px;width:min(460px,92vw)}.toast{background:#000000b8;border-left:3px solid var(--accent);border-radius:6px;padding:7px 14px;font-size:14px;text-align:center;animation:toast-in .2s ease-out;transition:opacity .5s}.toast.good{border-color:var(--good)}.toast.bad{border-color:var(--bad)}.toast.out{opacity:0}@keyframes toast-in{0%{transform:translateY(-6px);opacity:0}}.peek-wrap{position:absolute;left:calc(10px + var(--safe-l));top:50%;transform:translateY(-50%);width:min(200px,17vw);display:flex;flex-direction:column;gap:8px}.peek{position:relative;display:block;width:100%;padding:0;overflow:hidden;text-align:left;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px}.peek:hover{border-color:var(--accent)}.peek-art{display:block}.peek-art img,.peek-art svg{display:block;width:100%;aspect-ratio:2 / 3;object-fit:cover;animation:portrait-in .8s ease-out}.peek-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:18px 8px 6px;background:linear-gradient(transparent,#000000c7)}.peek-name{font-size:13px;color:var(--accent);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.peek-pips{display:flex;gap:3px;flex:none}.peek-pips i{width:6px;height:6px;border-radius:50%;background:#ffffff47}.peek-pips i.on{background:var(--accent)}.peek.flash{animation:peek-flash 1.2s ease-out}@keyframes peek-flash{0%{box-shadow:0 0 #e0b24ae6;transform:scale(1.05)}to{box-shadow:0 0 0 16px #e0b24a00;transform:scale(1)}}.peek-say{background:#000c;border:1px solid var(--panel-line);border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.45;opacity:0;transition:opacity .4s}.peek-say.show{opacity:1}.peek-say b{display:block;color:var(--accent);font-size:12px;margin-bottom:2px}.peekview .reward-fig img{max-height:calc(100dvh - 150px - var(--safe-t) - var(--safe-b))}.peek-view-say{max-width:min(640px,100%);text-align:center;font-size:15px;line-height:1.5}.upgrades{position:absolute;right:calc(10px + var(--safe-r));top:50%;transform:translateY(-50%);width:292px;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:10px;backdrop-filter:blur(4px)}.upgrades h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:2px 4px 8px}.ups{display:flex;flex-direction:column;gap:8px}.up{display:grid;grid-template-columns:1fr auto;grid-template-areas:"head head" "desc desc" "val cost";gap:2px 8px;text-align:left;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:8px 10px;min-height:44px;transition:border-color .15s,background .15s,transform .08s}.up:hover:not(:disabled){border-color:var(--accent)}.up:active:not(:disabled){transform:scale(.98)}.up:disabled{cursor:default;opacity:.6}.up.can{border-color:var(--accent);background:#e0b24a21;animation:glow 1.4s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 0 10px #e0b24a73}}.up-head{grid-area:head;display:flex;justify-content:space-between;align-items:baseline;gap:8px}.up-name{font-size:14px}.up-lv{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}.up-desc{grid-area:desc;font-size:12px;color:var(--dim)}.up-val{grid-area:val;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;align-self:center}.up-cost{grid-area:cost;display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.up.short .up-cost{color:var(--bad)}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#0506089e;backdrop-filter:blur(3px)}.overlay.title{background:radial-gradient(ellipse at center,#05060859,#050608d1)}.title-box{text-align:center;display:flex;flex-direction:column;gap:34px;align-items:center}.title-logo{display:flex;flex-direction:column;line-height:.95;font-family:Impact,Arial Black,Helvetica Neue,sans-serif;letter-spacing:.04em;text-transform:uppercase}.title-logo span:first-child{font-size:clamp(28px,6vw,46px);color:var(--accent)}.title-logo span:last-child{font-size:clamp(46px,11vw,92px);color:#e9e3d0;text-shadow:0 3px 0 #5a3d12,0 0 28px rgba(224,178,74,.35)}.menu{display:flex;flex-direction:column;gap:10px;width:min(280px,80vw)}.btn{min-height:48px;padding:10px 20px;border-radius:10px;font-size:16px;font-weight:600;background:#ffffff12;border:1px solid rgba(255,255,255,.22);transition:transform .08s,border-color .15s}.btn:hover{border-color:var(--accent)}.btn:active{transform:scale(.98)}.btn.primary{background:var(--accent);color:#17130a;border-color:var(--accent)}.btn.ghost{background:transparent}.btn.danger{background:#8e2a20;border-color:#b8402f}.btn.small{min-height:44px;padding:8px 14px;font-size:14px}.btn:focus-visible,.up:focus-visible,.icon-btn:focus-visible,.choice:focus-visible,.peek:focus-visible,.gcard:focus-visible,.chip-btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:2px}.card{display:flex;gap:22px;align-items:stretch;width:min(640px,100%);background:#14171b;border:1px solid var(--panel-line);border-radius:14px;padding:18px;box-shadow:0 20px 60px #0009}.card.slim{flex-direction:column;width:min(460px,100%);max-height:100%;overflow-y:auto;gap:14px;align-items:stretch}.portrait{width:200px;flex:none;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);align-self:center}.portrait svg{display:block;width:100%;height:auto}.portrait img{display:block;width:100%;aspect-ratio:2 / 3;object-fit:cover;animation:portrait-in .35s ease-out}@keyframes portrait-in{0%{opacity:0}to{opacity:1}}.info{display:flex;flex-direction:column;gap:8px;justify-content:center;flex:1;min-width:0}.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--door)}.info h2,.card.slim h2{font-size:28px}.role{color:var(--accent);font-size:14px}.info p,.card.slim p{font-size:15px;line-height:1.5}.note{color:var(--dim);font-size:12px!important}.info .btn{margin-top:8px}.stats{color:var(--accent);font-variant-numeric:tabular-nums}.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.face{border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.face svg{display:block;width:100%;height:auto}.face:has(img){aspect-ratio:1}.face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.7);transform-origin:50% 18%}.cell .card{width:auto;max-width:100%}.cell .portrait{width:min(46vw,calc((100dvh - 80px) * 2 / 3),500px)}.cell .info{width:min(340px,34vw);flex:none}.cell .portrait{cursor:pointer}.skit-say{background:#ffffff0d;border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;min-height:5.6em}.skit-say b{display:block;font-size:13px;color:var(--accent);margin-bottom:4px}.skit-say p{font-size:16px;line-height:1.55;animation:portrait-in .35s ease-out}.skit-say.you{border-left-color:var(--dim)}.skit-say.you b{color:var(--dim)}.skit-row{display:flex;gap:8px;align-items:center;margin-top:4px}.skit-row .btn.primary{flex:1;margin-top:0}.skit-row .btn{margin-top:0}.overlay.gallery{display:flex;justify-content:center;align-items:center;background:#050608e0}.gallery-box{width:min(980px,100%);max-height:100%;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:#14171b;border:1px solid var(--panel-line);border-radius:14px;padding:16px}.gallery-head{display:flex;align-items:center;gap:12px}.gallery-head h2{font-size:24px;flex:1}.gallery-hint{color:var(--dim);font-size:13px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}.gcard{display:flex;flex-direction:column;gap:4px;padding:6px;text-align:left;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:10px}.gcard:hover:not(:disabled){border-color:var(--accent)}.gcard:disabled{cursor:default}.gcard-art{display:block;border-radius:6px;overflow:hidden}.gcard-art img,.gcard-art svg{display:block;width:100%;aspect-ratio:2 / 3;object-fit:cover}.gcard.locked .gcard-art{filter:brightness(.22) grayscale(1)}.gcard-name{font-size:14px}.gcard-count{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}.gallery-view{display:flex;gap:16px;align-items:flex-start;min-height:0}.gallery-fig{flex:1;min-width:0;margin:0;display:flex;justify-content:center}.gallery-fig img{display:block;max-width:100%;max-height:calc(100dvh - 110px);border-radius:10px;animation:portrait-in .3s ease-out}.gallery-side{width:240px;flex:none;display:flex;flex-direction:column;gap:10px}.gallery-side h3{font-size:22px}.gallery-stages{display:flex;flex-wrap:wrap;gap:6px}.chip-btn{min-height:40px;padding:6px 12px;border-radius:999px;font-size:13px;background:#ffffff0f;border:1px solid rgba(255,255,255,.18)}.chip-btn.on{background:var(--accent);color:#17130a;border-color:var(--accent)}.chip-btn:disabled{opacity:.45;cursor:default}.overlay.choose{display:flex;justify-content:center;align-items:center;background:#050608cc}.choose-box{--chrome: 230px;width:min(1100px,100%);min-width:0;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.choose-box h2{font-size:26px}.choose-hint{color:var(--dim);font-size:14px}.choices{display:flex;gap:14px;justify-content:center;max-width:100%;padding:4px}.choice{--w: min(280px, calc((100vw - 40px - (var(--n) - 1) * 14px) / var(--n)), calc((100dvh - var(--chrome)) * 2 / 3));width:var(--w);flex:none;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px;background:#14171b;border:1px solid var(--panel-line);border-radius:12px;transition:transform .1s,border-color .15s}.choice:hover,.choice:focus-visible{border-color:var(--accent);transform:translateY(-2px)}.choice-art{display:block;border-radius:8px;overflow:hidden}.choice-art img,.choice-art svg{display:block;width:100%;height:auto;aspect-ratio:2 / 3;object-fit:cover}.choice-name{font-size:18px}.choice-role{font-size:12px;color:var(--accent)}.overlay.reward{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:#030405eb}.reward-fig{position:relative;margin:0;display:flex;justify-content:center;min-height:0;max-width:100%}.reward-fig img{display:block;max-width:100%;max-height:calc(100vh - 92px - var(--safe-t) - var(--safe-b));max-height:calc(100dvh - 92px - var(--safe-t) - var(--safe-b));width:auto;height:auto;border-radius:10px;box-shadow:0 20px 60px #000000b3;animation:portrait-in .45s ease-out}.reward-fig figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:6px;font-weight:700;font-size:15px;background:#0000008c;color:var(--accent)}.reward .btn{min-width:min(280px,80vw)}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.row>span:first-child{min-width:110px;font-size:15px}.row input[type=range]{flex:1;min-width:110px;accent-color:var(--accent);height:28px}.row select{flex:1;min-height:44px;background:#0d0f12;color:var(--text);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:0 10px;font-size:15px}.mute{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim)}.mute input{width:20px;height:20px;accent-color:var(--accent)}.row.confirm{flex-direction:column;align-items:stretch;background:#8e2a202e;border:1px solid #8e2a20;border-radius:10px;padding:12px}.row.confirm .buttons{display:flex;gap:10px}.row.confirm .buttons .btn{flex:1}@media(max-width:760px),(max-aspect-ratio:1/1),(max-height:520px){.upgrades{top:auto;bottom:calc(8px + var(--safe-b));right:calc(8px + var(--safe-r));left:calc(8px + var(--safe-l));transform:none;width:auto;padding:6px}.upgrades h2{display:none}.ups{flex-direction:row;gap:6px}.up{flex:1 1 0;min-width:0;grid-template-columns:1fr;grid-template-areas:"head" "val" "cost";padding:6px 7px;gap:1px}.up-head{flex-direction:column;align-items:flex-start;gap:0}.up-desc{display:none}.up-name{font-size:12px;line-height:1.15;overflow-wrap:anywhere}.up-lv,.up-val{font-size:11px;line-height:1.2}.up-cost{font-size:13px}.hint{top:50%;font-size:13px}.chip{font-size:12px;padding:5px 9px}.chip.layer{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;display:block}.chip.layer small,.chip.rubble .lbl{display:none}.card{flex-direction:column;align-items:center;gap:12px;padding:14px;max-height:94vh;overflow:auto}.portrait{width:min(46vw,170px)}.info{align-items:center;text-align:center}.info h2{font-size:24px}.faces{grid-template-columns:repeat(4,1fr)}.peek-wrap{top:auto;transform:none;bottom:calc(var(--ups-h, 110px) + 16px + var(--safe-b));right:calc(10px + var(--safe-r));width:auto;flex-direction:row;align-items:flex-end}.peek{width:min(26vw,100px);flex:none}.peek-cap{padding:14px 5px 4px}.peek-name{font-size:11px}.peek-pips i{width:5px;height:5px}.peek-say{max-width:min(62vw,300px);font-size:12px}.skit-say{min-height:0}.skit-say p{font-size:15px}.gallery-box{padding:12px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.gallery-view{flex-direction:column;align-items:stretch}.gallery-side{width:auto}.gallery-fig img{max-height:calc(100dvh - 300px)}.cell .card{width:min(640px,100%)}.cell .portrait{width:min(84vw,calc((100dvh - 330px) * 2 / 3))}.cell .info{width:auto;flex:1}}@media(max-aspect-ratio:3/4){.choices{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;width:100%}.choice{--w: min(64vw, calc((100dvh - var(--chrome)) * 2 / 3));scroll-snap-align:center}}@media(max-height:520px)and (min-aspect-ratio:1/1){.card{flex-direction:row;align-items:center;gap:14px;padding:12px;max-height:94vh}.portrait{width:min(24vw,120px)}.cell .portrait{width:calc((100dvh - 40px) * 2 / 3)}.cell .info{width:auto;flex:1}.choose-box{--chrome: 160px;gap:4px}.choose-box h2{font-size:20px}.choose-hint{display:none}.choice-name{font-size:15px}.info{align-items:flex-start;text-align:left;gap:4px}.info h2{font-size:22px}.info p{font-size:13px;line-height:1.35}.info .btn{margin-top:4px;min-height:44px}.card.slim{flex-direction:column;align-items:stretch}.faces{grid-template-columns:repeat(12,1fr)}.peek{width:72px}.skit-say{padding:6px 10px}.skit-say p{font-size:13px;line-height:1.4}.gallery-view{flex-direction:row}.gallery-side{width:200px}.gallery-fig img{max-height:calc(100dvh - 60px)}}@media(prefers-reduced-motion:reduce){.hint,.up.can,.toast,.portrait img,.reward-fig img,.peek.flash,.peek-art img,.skit-say p,.gallery-fig img{animation:none}.peek-say{transition:none}}.cta{border-top:1px solid rgba(255,255,255,.14);padding-top:12px;display:flex;flex-direction:column;gap:8px}.cta h3{font-size:18px;color:var(--accent)}.cta p{color:var(--muted, inherit)}.cta-btn{align-self:stretch}@media(max-height:460px){.card.slim .faces{display:none}.card.slim{gap:8px}.card.slim h2{font-size:22px}}