html,body{color:#eee;background:#0b0707;height:100%;margin:0;font:15px system-ui,sans-serif}body{overflow:hidden}#play{touch-action:none;-webkit-user-select:none;user-select:none;height:100dvh;position:fixed;inset:0;overflow:hidden}.play-layer{position:absolute;inset:0}.play-scene{z-index:0}.play-backdrop{background:radial-gradient(at 50% 60%,#2a1712 0%,#0b0707 70%);justify-content:center;align-items:center;display:flex}.play-backdrop canvas{width:min(40vmin,220px);image-rendering:pixelated;opacity:.35}.play-well{background:radial-gradient(ellipse at 50% 45%, #0000 35%, #00000080 100%), linear-gradient(#0000001a, #0000001a), var(--well-art) center / cover no-repeat;image-rendering:pixelated}.play-map{z-index:5;background:#0b0707}.play .hud{z-index:10}.play button:not(.hud-slot):not(.mapscene-legend-btn){font:inherit;color:#eee;cursor:pointer;background:#8a2020;border:1px solid #c44;border-radius:8px;min-width:44px;min-height:44px;padding:8px 14px;font-weight:600}.play button.quiet{background:#2a1a1a;border-color:#533}.play button:disabled{opacity:.5;cursor:not-allowed}.play button:focus-visible{outline-offset:2px;outline:3px solid #f0c060}.play-mapbtn,.play-mapclose{z-index:20;top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));position:absolute}.play-pausebtn{z-index:35;top:calc(max(8px, env(safe-area-inset-top)) + 52px);right:max(8px, env(safe-area-inset-right));width:44px;height:44px;line-height:1;position:absolute;padding:0!important;font-size:18px!important}.play-pausebtn:before{content:"";box-sizing:border-box;border-inline:6px solid;width:16px;height:18px;margin:auto;display:block}.play.fighting .play-pausebtn{top:calc(max(8px, env(safe-area-inset-top)) + 88px)}.play-maptitle{z-index:20;left:50%;bottom:max(56px, calc(env(safe-area-inset-bottom) + 48px));pointer-events:none;white-space:nowrap;background:#140a0ad9;border:1px solid #c44;border-radius:8px;padding:6px 12px;font-weight:600;position:absolute;transform:translate(-50%)}.play-prompt{z-index:15;left:50%;bottom:max(44px, calc(env(safe-area-inset-bottom) + 36px));box-sizing:border-box;flex-wrap:wrap;align-items:center;gap:4px 10px;width:min(92vw,420px);padding:10px 12px;font-family:Georgia,Times New Roman,serif;display:flex;position:absolute;transform:translate(-50%)}.play-prompt b{flex:auto;min-width:0;font-size:17px}.play-prompt p{color:var(--pc-dim);flex-basis:100%;margin:0;font-size:14px}.play-prompt .why{color:var(--pc-warn)}.play-prompt .note-icon{flex:none}.play-dim{z-index:30;box-sizing:border-box;background:#0502028c;justify-content:center;align-items:center;padding:12px;display:flex}.play-dim.well{padding-bottom:max(16px, env(safe-area-inset-bottom));background:0 0;align-items:flex-end}@media (aspect-ratio>=1) and (height<=540px){.play-dim.well{justify-content:flex-end;align-items:center}}.play-card{box-sizing:border-box;background:#1d1111;border:1px solid #6a3030;border-radius:12px;width:min(94vw,460px);max-height:calc(100dvh - 24px);padding:16px;overflow:auto;box-shadow:0 8px 40px #000}.play-card h2{align-items:center;gap:10px;margin:0 0 4px;font-size:20px;display:flex}.play-card h2 canvas{width:32px;height:32px;image-rendering:pixelated}.play-card .lead{color:#cbb;margin:0 0 12px}.play-choices{gap:8px;display:grid}.play-choices button{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.play-choices button small{color:#f3dada;opacity:.85;font-weight:400}.play-devil{z-index:40;box-sizing:border-box;background:radial-gradient(at 50% 35%,#3a0d0d 0%,#0a0303 75%);flex-direction:column;justify-content:center;align-items:center;padding:12px;display:flex}.play-devil .play-card{z-index:1;background:#120606f0;border-color:#a33;flex:0 auto;min-height:0;margin-top:-14px;position:relative}.play-devil-art{pointer-events:none;filter:drop-shadow(0 0 1px #ff8c46e6)drop-shadow(0 0 5px #e6461e8c)drop-shadow(0 0 22px #aa190a73);flex:1 1 0;width:100%;min-height:72px;max-height:58vh;position:relative;-webkit-mask-image:linear-gradient(#000 84%,#0000 100%);mask-image:linear-gradient(#000 84%,#0000 100%)}.play-devil-art img{object-fit:contain;object-position:50% 100%;opacity:0;filter:brightness(0);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;transition:opacity .2s ease-in-out;position:absolute;inset:0}.play-devil-art img.on{opacity:1}.play-devil-art.instant img{transition:none}.play-devil.leaving{pointer-events:none;background:0 0;animation:1.6s ease-in forwards play-devil-leave}.play-devil.leaving .play-card{visibility:hidden}@keyframes play-devil-leave{0%,55%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.play-devil.leaving{animation:none}}@media (aspect-ratio<=1){.play-devil-art{max-height:36vh}}@media (aspect-ratio>=1) and (height<=540px){.play-devil-art{max-height:30vh}}.play-devil .say{color:#f2d2c0;min-height:2.4em;margin:8px 0 12px;font:italic 17px Georgia,serif}.play-devil .strike{color:#ff8a7a;margin:0 0 8px;font-weight:600}.play-devil .chips{flex-wrap:wrap;gap:6px;margin:0 0 10px;display:flex}.play-devil .chip{border:1px solid;border-radius:999px;padding:2px 10px;font-size:13px}.play-devil .chip.good{color:#9fe39f;border-color:#3f7a3f}.play-devil .chip.bad{color:#ff9a8a;border-color:#8a3a30}.play-devil .count{color:#c9a;margin:0 0 10px;font-size:13px}.play-devil form{gap:8px;margin:0 0 10px;display:flex}.play-devil input{min-width:0;font:inherit;color:#eee;box-sizing:border-box;-webkit-user-select:text;user-select:text;background:#2a1a1a;border:1px solid #533;border-radius:8px;flex:1;min-height:44px;padding:8px 10px}.play-devil .row{flex-wrap:wrap;gap:8px;display:flex}.play-ending{z-index:50;text-align:center;background:#050202e6;justify-content:center;align-items:center;display:flex}.play-ending h2{letter-spacing:.05em;margin:0 0 8px;font-size:40px}.play-ending.win h2{color:#f0c060}.play-ending.hell h2,.play-ending.lose h2{color:#ff5a4a}.play-ending p{color:#cbb;margin:0 0 18px}.play-fightcard{z-index:30}.play-mapbtn .key{opacity:.8;font-weight:400}@media (aspect-ratio<=1){.play-mapbtn .key,.play-mapclose .key{display:none}#play .play-mapclose{padding-inline:10px}.play-prompt{left:max(10px, env(safe-area-inset-left));right:max(10px, env(safe-area-inset-right));width:auto;bottom:calc(max(12px, env(safe-area-inset-bottom)) + 150px);transform:none}.play-maptitle{bottom:auto;top:calc(var(--hud-bottom,122px) + 8px)}}@media (aspect-ratio>=1) and (height<=540px){.play-maptitle{left:max(8px, env(safe-area-inset-left));bottom:auto;top:calc(var(--hud-bottom,96px) + 8px);transform:none}}.play-pause{z-index:70;box-sizing:border-box;background:#050202c7;justify-content:center;align-items:center;padding:12px;display:flex}.play-pause .play-card{width:min(94vw,520px)}.play-pause .lead{color:#cbb;margin:4px 0 14px}.play-pause .controls h3{color:#f0c060;text-transform:uppercase;letter-spacing:.06em;margin:12px 0 6px;font-size:14px}.play-pause dl{grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;font-size:14px;display:grid}.play-pause dt{color:#f3e8e8;font-weight:700}.play-pause dd{color:#cbb;margin:0}.play-pause .row{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.play-pause .row button{flex:140px}.play-title{z-index:80;text-align:center;background:radial-gradient(at 50% 40%,#3a0d0d 0%,#0a0303 75%);justify-content:center;align-items:center;display:flex}.play-title h1{color:#f2d2c0;letter-spacing:.03em;margin:0 16px 28px;font:400 clamp(28px,7vw,56px)/1.15 Georgia,serif}.play-title h1 b{color:#ff5a4a;font-weight:700}.play-title button{padding:12px 28px!important;font-size:18px!important}.play [hidden]{display:none!important}.play-credits{z-index:90;box-sizing:border-box;background:#050202e6;justify-content:center;align-items:center;padding:12px;display:flex}.play-credits .credits-body{margin:8px 0 14px}.play-credits h3{color:#f0c060;margin:12px 0 4px;font-size:14px}.play-credits pre{white-space:pre-wrap;word-break:break-word;color:#ddd;margin:0;font:13px/1.4 system-ui,sans-serif}.play-ending-row,.play-title-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.play-pause .row.menu{flex-direction:column}.play-pause .row.menu button{flex:none}.play-title{overflow:hidden}.play-title>div:not(.play-title-devil){z-index:1;position:relative}.play-title-devil{aspect-ratio:1;pointer-events:none;z-index:0;filter:drop-shadow(0 0 1px #ff8c46e6)drop-shadow(0 0 5px #e6461e8c)drop-shadow(0 0 22px #aa190a73);height:min(82vh,640px);position:absolute;bottom:0;left:50%;transform:translate(-50%)}.play-title-devil img{object-fit:contain;object-position:50% 100%;filter:brightness(0);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%}@keyframes play-title-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.play-title h1{transform-origin:50% 55%;will-change:transform;animation:3.2s ease-in-out infinite play-title-pulse}@media (prefers-reduced-motion:reduce){.play-title h1{animation:none}}.play{--pc-bg:#1d1111;--pc-border:#6a3030;--pc-ink:#f3e8e8;--pc-dim:#d2bcbc;--pc-warn:#ff9f94;--pc-shadow:#0009;--pc-focus:#f0c060;--pc-btn-bg:#8a2020;--pc-btn-ink:#fff4f4;--pc-btn-border:#c44}.play[data-scene=village]{--pc-bg:#f0e4c4;--pc-border:#8a6a3a;--pc-ink:#3b2713;--pc-dim:#5e4124;--pc-warn:#8c2a18;--pc-shadow:#3c280a80;--pc-focus:#3b2713;--pc-btn-bg:#4e3219;--pc-btn-ink:#fbf1d8;--pc-btn-border:#2e1d0d}.play[data-scene=map]{--pc-bg:#e2cd9f;--pc-border:#7a5230;--pc-ink:#2e1c0e;--pc-dim:#553a1f;--pc-warn:#86230f;--pc-shadow:#2818088c;--pc-focus:#2e1c0e;--pc-btn-bg:#5a3a1c;--pc-btn-ink:#fbf1d8;--pc-btn-border:#2e1d0d}.play[data-scene=forest]{--pc-bg:#1e2c1b;--pc-border:#7a5a30;--pc-ink:#eef2dc;--pc-dim:#b9c7a0;--pc-warn:#ffb5a0;--pc-shadow:#000a00a6;--pc-focus:#f0d080;--pc-btn-bg:#5b3f22;--pc-btn-ink:#fbf1dc;--pc-btn-border:#94703e}.play[data-scene=well]{--pc-bg:#2b3230;--pc-border:#80918a;--pc-ink:#e9efeb;--pc-dim:#b4c1ba;--pc-warn:#ffb8a6;--pc-shadow:#0009;--pc-focus:#d8f0c0;--pc-btn-bg:#3a6044;--pc-btn-ink:#f2f8f3;--pc-btn-border:#7cab88}.play[data-scene=campfire]{--pc-bg:#26150d;--pc-border:#e0782a;--pc-ink:#ffe8cc;--pc-dim:#d9b494;--pc-warn:#ffb590;--pc-shadow:#000000b3;--pc-focus:#ffd070;--pc-btn-bg:#a8410f;--pc-btn-ink:#fff4e6;--pc-btn-border:#f08a24}.play{--ch-gold-bg:#3d2f0d;--ch-gold-ink:#ffd98a;--ch-loss-bg:#3a1a16;--ch-loss-ink:#e8aea4;--ch-up-bg:#173a1e;--ch-up-ink:#94e89f;--ch-down-bg:#44140f;--ch-down-ink:#ffa597;--ch-atk-bg:#2c3038;--ch-atk-ink:#e6eaf0;--ch-plain-bg:#2a2020;--ch-plain-ink:#e6dada}.play[data-scene=village],.play[data-scene=map]{--ch-gold-bg:#fff0b8;--ch-gold-ink:#614300;--ch-loss-bg:#f3d9d2;--ch-loss-ink:#84352a;--ch-up-bg:#d4ecc8;--ch-up-ink:#1d5522;--ch-down-bg:#f6cfc7;--ch-down-ink:#901c0e;--ch-atk-bg:#dfe3ea;--ch-atk-ink:#343b49;--ch-plain-bg:#e8dcc0;--ch-plain-ink:#43301c}.play-prompt,.play-toast,.play-dim .play-card{background:var(--pc-bg);color:var(--pc-ink);border:1px solid var(--pc-border);box-shadow:0 6px 22px var(--pc-shadow), inset 0 0 0 1px #ffffff0f;border-radius:10px;transition:background-color .2s,border-color .2s}.play-dim .play-card .lead{color:var(--pc-dim)}.play-dim .play-card h2{font-family:Georgia,Times New Roman,serif}#play .play-prompt button,#play .play-dim .play-card button:not(.quiet){background:var(--pc-btn-bg);color:var(--pc-btn-ink);border:1px solid var(--pc-btn-border)}#play .play-dim .play-card button.quiet{color:var(--pc-ink);border-color:var(--pc-border);background:0 0}.play-dim .play-card button small{color:inherit;opacity:.88}#play .play-prompt button:focus-visible,#play .play-dim .play-card button:focus-visible{outline-color:var(--pc-focus)}.play-prompt button{min-width:72px}.play .chip-row{flex-wrap:wrap;gap:6px;display:flex}.note-chip{font-variant-numeric:tabular-nums;white-space:nowrap;border:1px solid color-mix(in srgb, currentColor 40%, transparent);border-radius:999px;padding:1px 9px;font:600 13px/1.5 system-ui,sans-serif;display:inline-block}.note-chip.gold{background:var(--ch-gold-bg);color:var(--ch-gold-ink)}.note-chip.gold-loss{background:var(--ch-loss-bg);color:var(--ch-loss-ink)}.note-chip.hp-up{background:var(--ch-up-bg);color:var(--ch-up-ink)}.note-chip.hp-down{background:var(--ch-down-bg);color:var(--ch-down-ink)}.note-chip.atk{background:var(--ch-atk-bg);color:var(--ch-atk-ink)}.note-chip.plain{background:var(--ch-plain-bg);color:var(--ch-plain-ink)}.note-icon{width:32px;height:32px;image-rendering:pixelated;filter:drop-shadow(0 1px 1px #00000073);flex:none}.play-toast{z-index:60;left:50%;bottom:calc(max(24px, calc(env(safe-area-inset-bottom) + 16px)) + var(--lift,0px));box-sizing:border-box;cursor:pointer;align-items:center;gap:10px;width:max-content;max-width:min(92vw,520px);padding:9px 14px 9px 10px;font:16px/1.3 Georgia,Times New Roman,serif;display:flex;position:absolute;transform:translate(-50%)}.play-toast.reject{border-color:#d65545}.play-toast .body{flex-direction:column;gap:5px;min-width:0;display:flex}.play-toast .title{font-weight:600}.play-toast .detail{color:var(--pc-dim);font-size:14px}.play-toast.in{animation:.18s ease-out both play-toast-in}.play-toast.out{opacity:0;transition:opacity .35s ease-in}@keyframes play-toast-in{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}@keyframes play-toast-fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.play-toast.in{animation-name:play-toast-fade}.play-toast.out,.play-prompt,.play-toast,.play-dim .play-card{transition:none}}@media (aspect-ratio<=1){.play-toast{bottom:calc(max(12px, env(safe-area-inset-bottom)) + 150px + var(--lift,0px))}.play.fighting .play-toast{bottom:calc(max(12px, env(safe-area-inset-bottom)) + 232px + var(--lift,0px))}}.hud{--hud-bg:#120a0ad1;--hud-panel:#1d1111;--hud-ink:#f3e8e8;--hud-muted:#b3a0a0;--hud-line:#4a2e2e;--hud-hp:#c0392b;--hud-hp-low:#ff5a3c;--hud-gold:#ffd27a;--hud-curse:#8a3a80;--hud-accent:#ffd27a;--hud-gap:8px;--hud-slot:64px;z-index:10;pointer-events:none;color:var(--hud-ink);font-variant-numeric:tabular-nums;font:14px/1.25 system-ui,sans-serif;position:absolute;inset:0;container-type:size}.hud [hidden]{display:none!important}.hud .hud-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hud-stats{top:max(var(--hud-gap), env(safe-area-inset-top));left:max(var(--hud-gap), env(safe-area-inset-left));width:min(340px, calc(100% - 2 * var(--hud-gap)));box-sizing:border-box;background:var(--hud-bg);border:1px solid var(--hud-line);border-radius:10px;flex-direction:column;gap:6px;padding:8px 10px;display:flex;position:absolute}.hud-where{color:var(--hud-muted);text-transform:uppercase;letter-spacing:.06em;font-size:12px}.hud-hp{background:#0c0606;border:1px solid #5a3a3a;border-radius:6px;justify-content:center;align-items:center;height:22px;display:flex;position:relative;overflow:hidden}.hud-hp-fill{background:var(--hud-hp);transition:width .25s ease-out;position:absolute;inset:0 auto 0 0}.hud-hp.low .hud-hp-fill{background:var(--hud-hp-low)}.hud-hp-text{text-shadow:0 1px 2px #000;font-weight:700;position:relative}.hud-row{flex-wrap:wrap;gap:4px 12px;display:flex}.hud-stat{align-items:baseline;gap:4px;display:inline-flex}.hud-stat small{color:var(--hud-muted);font-size:12px}.hud-stat b{font-size:16px}.hud-gold b{color:var(--hud-gold)}.hud-stat.lost b{color:#ff9a8a}.hud-devil{color:#e0b8ff;font-size:13px}.hud-curses{flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none;display:flex}.hud-curse{pointer-events:auto;cursor:help;border:1px solid var(--hud-curse);color:#ffc4f0;background:#3a1030;border-radius:999px;padding:1px 8px;font-size:12px}.hud-status{color:var(--hud-accent);font-weight:700}.hud-items{right:max(var(--hud-gap), env(safe-area-inset-right));bottom:max(var(--hud-gap), env(safe-area-inset-bottom));gap:var(--hud-gap);flex-wrap:wrap-reverse;justify-content:flex-end;max-width:55%;display:flex;position:absolute}.hud-slot{pointer-events:auto;box-sizing:border-box;width:var(--hud-slot);min-width:44px;min-height:max(44px, var(--hud-slot));font:inherit;color:var(--hud-ink);background:var(--hud-panel);border:2px solid var(--hud-gold);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:4px;display:flex;position:relative}.hud-slot:hover:not(:disabled){background:#3a2a22}.hud-slot:focus-visible{outline:3px solid var(--hud-accent);outline-offset:2px}.hud-slot:disabled{cursor:not-allowed;opacity:.6;border-style:dashed;border-color:#6a4444}.hud-slot-name{font-size:13px;font-weight:700}.hud-slot-tag{color:var(--hud-gold);font-size:12px}.hud-slot-hint{color:var(--hud-muted);text-align:center;overflow-wrap:break-word;align-self:stretch;font-size:10px;line-height:1.1}@container (orientation:portrait){.hud-items{flex-flow:column-reverse;max-width:none}.hud-stats{width:min(300px, calc(100% - 2 * var(--hud-gap)))}}.mapscene{touch-action:none;-webkit-user-select:none;user-select:none;background:#1d1210;position:absolute;inset:0;overflow:hidden}.mapscene [hidden]{display:none!important}.mapscene-canvas{outline:none;position:absolute;inset:0}.mapscene-canvas canvas{display:block}.mapscene-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mapscene-hint{left:50%;bottom:max(14px, env(safe-area-inset-bottom));z-index:11;box-sizing:border-box;text-align:center;color:#24150e;pointer-events:none;background:#e4d1a8;border:2px solid #5a3a1e;border-radius:6px;max-width:min(420px,100% - 176px);padding:8px 14px;font:600 14px/1.3 ui-monospace,Menlo,Consolas,monospace;position:absolute;transform:translate(-50%);box-shadow:0 2px 8px #00000080}.mapscene-tip{z-index:12;pointer-events:none;color:#f3e8d8;background:#24150eeb;border-radius:4px;max-width:260px;padding:4px 8px;font:12px/1.3 ui-monospace,Menlo,Consolas,monospace;position:absolute}.mapscene-legend-btn{left:max(8px, env(safe-area-inset-left));bottom:max(8px, env(safe-area-inset-bottom));z-index:12;box-sizing:border-box;color:#24150e;cursor:pointer;background:#e4d1a8;border:2px solid #5a3a1e;border-radius:6px;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:6px 10px;font:600 13px/1 ui-monospace,Menlo,Consolas,monospace;display:inline-flex;position:absolute;box-shadow:0 2px 8px #00000080}.mapscene-legend-btn .chev{transition:transform .15s;display:inline-block}.mapscene-legend-btn.open .chev{transform:rotate(180deg)}.mapscene-legend-btn:focus-visible{outline-offset:2px;outline:3px solid #e02a1c}
