:root{color-scheme:dark;--bg:#111e1b;--panel:#1b2b25;--gold:#d4b675;--white:#f0ede5;--muted:#afbab1;--red:#bf6967;--border:#526054}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:Georgia,"Yu Mincho","Noto Serif CJK JP",serif;letter-spacing:0}button,select{font:inherit;cursor:pointer}button,a,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit;text-decoration:none}.topbar{height:72px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #34433a}.brand{font-size:21px}.brand span{font:10px sans-serif;color:var(--gold);margin-left:16px}nav{display:flex;gap:12px;align-items:center}select{background:transparent;color:var(--muted);border:0;padding:8px;font-size:12px}select option{background:var(--bg)}.icon{background:transparent;border:1px solid #526054;color:var(--white);width:36px;height:36px;font-size:23px;border-radius:50%;display:inline-grid;place-items:center}.icon[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}main{max-width:1120px;margin:auto;padding:26px 36px 18px}.heading{display:flex;justify-content:space-between;align-items:center}.eyebrow{font:10px sans-serif;color:var(--gold)}h1{font-size:32px;font-weight:400;margin:8px 0 0}h2{font-weight:400}.journey{color:var(--muted);font-size:12px;text-align:right}.journey ol{list-style:none;display:flex;gap:22px;margin:12px 0;padding:0}.journey li{width:24px;height:24px;display:grid;place-items:center;border:1px solid #526054;transform:rotate(45deg);position:relative;font-size:11px}.journey li span{transform:rotate(-45deg)}.journey li.active{background:var(--gold);border-color:var(--gold);color:#17251f}.journey li.done{color:var(--gold);border-color:var(--gold)}.arena{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:36px 60px 22px;min-height:350px}.arena-line{position:absolute;border:1px solid #344a3d;border-radius:50%;width:70%;height:75%;top:12%;left:15%;pointer-events:none}.combatant{position:relative;text-align:center;max-width:220px;width:100%;justify-self:center}.portrait{width:150px;height:185px;margin:auto;overflow:hidden;border:1px solid var(--gold);border-radius:76px 76px 4px 4px;box-shadow:0 10px 35px #0005;background:#e7e1d2}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 45%;transform:scale(1.1)}.enemy .portrait{border-color:#b57c7a}.fighter-caption h2{margin:5px 0 9px;font-size:22px}.fighter-caption .eyebrow{display:block;margin-top:14px}.health{position:relative;height:20px;width:150px;margin:auto;background:#29352e;border-radius:2px;overflow:hidden}.health span{position:absolute;z-index:1;inset:0;text-align:center;font:12px/20px sans-serif}.health meter{display:block;width:100%;height:20px;border:0;background:#29352e}.health meter::-webkit-meter-bar{border:0;border-radius:0;background:#29352e}.health meter::-webkit-meter-optimum-value{background:#477b67}.enemy meter::-webkit-meter-optimum-value{background:#9a525b}.health meter::-moz-meter-bar{background:#477b67}.enemy meter::-moz-meter-bar{background:#9a525b}.shield{display:block;min-height:19px;font:12px/19px sans-serif;color:#a8d6d6;margin-top:7px}.intent{position:absolute;top:-27px;left:0;right:0;color:#f4b3ab;font:12px sans-serif}.battle-center{z-index:1;text-align:center;align-self:center}.seal{font-size:36px;color:var(--gold)}#stage-name{font-size:15px;margin:10px 0}#turn-label{font:11px sans-serif;color:var(--muted)}#battle-log{min-height:48px;max-width:180px;margin:14px auto 0;font:12px/1.7 sans-serif;color:var(--gold)}.player-area{border-top:1px solid #405045;padding-top:18px}.turnbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.energy{display:flex;align-items:center;gap:12px}.energy-count{display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;width:44px;height:44px;font-size:25px;color:var(--gold)}.energy strong{display:block;font:13px sans-serif}.energy div>span{display:block;font:11px sans-serif;color:var(--muted);margin-top:6px}.turn-actions{display:flex;gap:14px}.primary,.quiet{border-radius:3px;padding:12px 20px;font-size:13px;border:1px solid var(--border)}.primary{background:var(--gold);color:#18251e;border-color:var(--gold)}.primary:hover{background:#e8c98a}.primary span{margin-left:24px}.quiet{background:transparent;color:var(--white)}.quiet:hover{background:#2a3d31}.hand{display:flex;justify-content:center;gap:12px;min-height:238px;align-items:flex-start;padding:6px 0 12px}.card{position:relative;width:168px;flex:0 0 168px;min-height:228px;border:1px solid #c3b393;border-radius:6px;padding:0;overflow:hidden;background:#eee9df;color:#272b26;text-align:left;box-shadow:0 6px 12px #0004;transition:transform .18s,box-shadow .18s;animation:deal .25s ease-out both}.card:hover:not(:disabled){transform:translateY(-9px);box-shadow:0 12px 20px #0006}.card:disabled{opacity:.53}.card img{width:100%;height:121px;object-fit:cover;object-position:center 43%;display:block}.card .cost{position:absolute;left:8px;top:8px;width:27px;height:27px;display:grid;place-items:center;border:1px solid #e3cea6;border-radius:50%;background:#213a2f;color:#fff;font:17px Georgia,serif}.card-text{padding:10px 11px 12px;border-top:1px solid #b6a785}.card h3{margin:0 0 8px;font-size:16px;font-weight:400}.card p{margin:0;font:12px/1.6 sans-serif;min-height:39px}.card.attack .card-text{border-top:3px solid #aa6666}.card.defend .card-text{border-top:3px solid #56827b}.card.heal .card-text{border-top:3px solid #a08b42}.save-status{text-align:center;font:11px/1.5 sans-serif;color:var(--muted);margin:6px 0}dialog{border:1px solid #617263;border-radius:8px;background:#192a23;color:var(--white);padding:30px;width:min(680px,92vw);max-height:90dvh;box-shadow:0 25px 70px #0008}dialog::backdrop{background:#060d0bd9}dialog h2{font-size:27px;margin:14px 0}dialog p{font:14px/1.8 sans-serif;color:var(--muted)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.rewards{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:24px}#end-actions{display:flex;gap:12px;margin-top:22px}.restart-actions{display:flex;gap:12px;flex-wrap:wrap}#deck-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.deck-row{display:flex;justify-content:space-between;border-bottom:1px solid #3b4d40;padding:10px;font-size:14px}.hit{animation:hit .3s ease-out}.won-art{width:120px;border-radius:60px 60px 4px 4px;float:right;margin:0 0 16px 20px}@keyframes deal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes hit{0%,100%{transform:translateX(0)}30%{transform:translateX(5px);filter:brightness(1.4)}65%{transform:translateX(-4px)}}
@media(min-width:1400px){main{padding-top:38px}.arena{padding-top:50px;padding-bottom:34px;min-height:390px}.portrait{width:170px;height:210px}}
@media(max-width:650px){.topbar{height:58px;padding:0 18px}.brand{font-size:17px}.brand span{display:none}nav{gap:7px}main{padding:20px 16px}.heading{align-items:flex-start}h1{font-size:25px}.journey ol{gap:12px}.journey li{width:18px;height:18px;font-size:9px}.journey{font-size:10px}.eyebrow{font-size:8px}.arena{padding:32px 0 16px;grid-template-columns:1fr .65fr 1fr;min-height:280px}.portrait{width:105px;height:134px}.health{width:105px;height:18px}.health span{font-size:11px;line-height:18px}.health meter{height:18px}.fighter-caption h2{font-size:17px}.intent{font-size:10px;top:-22px}.seal{font-size:25px}#stage-name{font-size:11px}#turn-label{font-size:10px}#battle-log{font-size:10px;min-height:46px;margin-top:8px}.turnbar{margin-bottom:10px}.primary,.quiet{padding:10px 12px;font-size:12px}.primary span{margin-left:8px}.turn-actions{gap:8px}.energy-count{width:36px;height:36px;font-size:21px}.energy{gap:8px}.energy strong{font-size:11px}.energy div>span{font-size:9px}.hand{justify-content:flex-start;overflow-x:auto;gap:9px;min-height:218px;margin:0 -16px;padding:12px 16px 16px;scroll-snap-type:x proximity}.card{width:135px;flex-basis:135px;min-height:204px;scroll-snap-align:center}.card img{height:100px}.card h3{font-size:14px}.card p{font-size:11px}.card-text{padding:9px}.card:hover:not(:disabled){transform:none}.rewards{gap:9px}.rewards .card{width:145px;flex-basis:145px}dialog{padding:22px}#deck-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The illustrated battlefield is separate from all interactive HUD elements. */
body{background:#101a18}.arena{display:block;padding:0;min-height:0;aspect-ratio:3/2;max-width:950px;margin:20px auto 0;background:#1a2524 url('./battle-v1.png') center/100% 100% no-repeat;overflow:hidden}.arena-line{display:none}.combatant{position:absolute;bottom:7%;width:28%;max-width:none;background:#13251cdc;border:1px solid #a8936280;padding:7px 5px 3px;border-radius:4px}.hero{left:9%}.enemy{right:9%}.fighter-caption .eyebrow{display:none}.fighter-caption h2{font-size:16px;margin:0 0 6px}.health{width:85%;max-width:180px}.shield{position:absolute;top:-24px;left:0;right:0;color:#c2ebeb;text-shadow:0 1px 3px #000}.intent{top:auto;bottom:calc(100% + 12px);left:auto;right:8%;background:#4a1e24e8;border:1px solid #b87965;border-radius:3px;padding:8px;color:#ffe0c0}.battle-center{position:absolute;top:4%;left:38%;width:24%;background:#13251cdc;border-radius:3px;padding:7px}.battle-center .seal{display:none}#stage-name{margin:0;font-size:14px}#turn-label{margin:5px 0}#battle-log{min-height:0;margin:4px auto;font-size:11px;line-height:1.5}.arena::after{content:'';position:absolute;top:40%;left:28%;width:38%;height:6%;border-top:3px solid #ffe1a2;transform:rotate(24deg) scaleX(0);opacity:0;pointer-events:none;box-shadow:0 -3px 15px #f5c574}.arena.attacking::after{animation:strike .3s ease-out}.player-area{padding:16px 0 0;border:0;max-width:950px;margin:auto}.card-art{height:121px;background-image:url('./cards-v1.png');background-size:400% 300%;background-repeat:no-repeat}.hand{min-height:228px}.card{min-height:222px}.heading{max-width:950px;margin:auto}.card p{min-height:36px}.topbar .brand span{color:#c6bd9e}@keyframes strike{0%{transform:rotate(24deg) scaleX(.1);opacity:0}35%{transform:rotate(24deg) scaleX(1);opacity:1}100%{transform:rotate(24deg) scaleX(1.1);opacity:0}}
@media(min-width:900px){main{padding-top:20px;max-width:1050px}.arena{aspect-ratio:1.95;background-size:100% auto;background-position:center 49%}.combatant{bottom:4%}.heading h1{font-size:28px}.turnbar{margin-bottom:10px}.hand{padding-top:4px}}
@media(max-width:650px){main{padding:16px 12px}.arena{margin:17px -12px 0;max-width:none;aspect-ratio:1.3;background-size:auto 100%;background-position:center}.heading{padding:0 4px}.combatant{bottom:5%;width:33%;padding:5px 3px}.hero{left:5%}.enemy{right:5%}.fighter-caption h2{font-size:12px;margin-bottom:5px}.health{width:91%}.intent{font-size:10px;padding:5px;bottom:calc(100% + 7px)}.battle-center{top:3%;left:36%;width:28%;padding:5px}#stage-name{font-size:10px}#turn-label{font-size:9px}#battle-log{font-size:9px}.card-art{height:100px}.hand{margin:0 -12px;padding:8px 12px 12px;min-height:208px}.card{width:128px;flex-basis:128px;min-height:202px}.card h3{font-size:15px}.card p{font-size:11px}.player-area{padding-top:14px}.save-status{font-size:10px}.rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.rewards .card{width:100%;min-width:0;min-height:180px}.rewards .card-art{height:85px}.rewards .card-text{padding:8px 5px}.rewards .card p{font-size:10px}.rewards .card h3{font-size:13px}.rewards .card .cost{width:23px;height:23px;font-size:15px;top:5px;left:5px}}
:root { --story-gold: #d4b878; }
.story-option { border: 1px solid var(--story-gold); background: #182b29; color: #f5f1e7; padding: 20px; text-align: left; min-height: 120px; border-radius: 4px; cursor: pointer; }
.story-option strong { font-size: 20px; }
.story-option p { color: #e2dbc9; font-size: 16px; line-height: 1.7; }
.story-option:hover { background: #2b403a; }
.story-option:focus-visible { outline: 3px solid #faf4dd; outline-offset: 3px; }
#story-dialog { max-width: 560px; }
#story-copy { font-size: 18px; line-height: 1.9; margin-bottom: 28px; }
.ending-art { grid-column: 1 / -1; width: min(240px, 100%); aspect-ratio: 1; background-image: url('./cards-v1.png'); background-size: 400% 300%; border: 1px solid var(--story-gold); margin: 0 auto 20px; }
@media(max-width:600px) { #rewards:has(.story-option) { display:grid; grid-template-columns:1fr; } }