html, body { margin: 0; height: 100%; overflow: hidden; background: #b9c9c0; font-family: system-ui, sans-serif; }
canvas { display: block; }
/* The loading screen: black until every asset is in, then a fade into the field. */
#loading { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; color:#f4f0dd; background:#000; opacity:1; transition:opacity .9s ease; }
#loading.fading { opacity:0; pointer-events:none; }
.loading-card { display:flex; flex-direction:column; align-items:center; gap:14px; width:min(360px,calc(100vw - 48px)); text-align:center; letter-spacing:.2em; }
.loading-eyebrow { font-size:10px; opacity:.6; }
.loading-card strong { font:400 30px Georgia,serif; letter-spacing:.3em; color:#e9dcc3; }
.loading-track { width:100%; height:6px; margin-top:8px; background:#1c2225; border:1px solid #c4ad7855; border-radius:4px; overflow:hidden; }
.loading-track i { display:block; width:0; height:100%; background:linear-gradient(90deg,#b98b2e,#f0d58c); transition:width .25s ease-out; }
#loading-text { margin:0; font-size:12px; letter-spacing:.06em; opacity:.75; }
#loading.failed .loading-track { display:none; } #loading.failed #loading-text { color:#ef9176; opacity:1; }
[hidden] { display: none !important; }


/* Field HUD: the knight's portrait with level, health and gold, in the duel panels' livery. */
#player-hud { position:fixed; top:22px; left:24px; z-index:2; display:flex; align-items:center; gap:14px; padding:10px 18px 10px 10px; color:#f8f0db; background:linear-gradient(160deg,#1c2a2ff0,#131c20f0); border:1px solid #c4ad7866; border-radius:12px; box-shadow:inset 0 0 0 1px #0006,0 6px 25px #0005; pointer-events:none; }
#player-hud .portrait { position:relative; width:72px; height:72px; flex-shrink:0; border-radius:9px; border:2px solid #c4ad78; background:radial-gradient(circle at 50% 30%,#4f6a6f,#243a40 70%); box-shadow:inset 0 0 0 2px #182c32,0 2px 8px #0006; overflow:visible; }
#player-hud .portrait-canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:7px; display:none; }
#player-hud .portrait-fallback { position:absolute; inset:0; margin:auto; width:40px; height:44px; color:#d9c38f; stroke-width:2; opacity:.7; }
#player-hud.has-portrait .portrait-canvas { display:block; }
#player-hud.has-portrait .portrait-fallback { display:none; }
.level-seal { position:absolute; right:-10px; bottom:-10px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#293735; border:2px solid #e8c783; color:#f5db92; font:bold 13px Georgia,serif; box-shadow:0 2px 6px #0008; }
#player-hud .status { display:flex; flex-direction:column; gap:5px; min-width:120px; }
.status-name { font-size:10px; letter-spacing:.18em; font-weight:650; color:#e2cfaa; }
.status-row { display:flex; align-items:center; gap:6px; font-size:13px; font-variant-numeric:tabular-nums; }
.status-row .icon { width:13px; height:13px; }
.status-row.health .icon { fill:#c98681; stroke:none; }
.status-row.gold { color:#f0d58c; font:600 13px Georgia,serif; }
.status-row.gold .icon { width:15px; height:15px; }
.status-track { height:5px; margin:1px 0 3px; background:#ffffff16; border-radius:4px; overflow:hidden; }
.status-track i { display:block; height:100%; width:100%; background:#e4c17c; transition:width .25s; }
/* Experience towards the next level: a violet row and bar under the health, the level seal pulsing on a level-up. */
.status-row.xp { color:#cdbdf0; font-size:11px; letter-spacing:.04em; }
.status-row.xp .icon { fill:#b8a3ea; stroke:none; }
.status-track.xp { height:4px; margin-top:0; }
.status-track.xp i { background:linear-gradient(90deg,#8f74d8,#c7b3ff); width:0; transition:width .5s ease-out; }
.level-seal.gain { animation:level-gain 1.2s ease-out; }
@keyframes level-gain { 0% { transform:scale(1); } 20% { transform:scale(1.7); box-shadow:0 0 22px #e8c783; background:#5a4a1e; } 100% { transform:scale(1); } }
#player-hud.low-health .status-track i { background:#ef9176; }
#player-hud.low-health #hud-hp { color:#ffa583; }
@media(max-width:600px) { #player-hud { top:14px; left:14px; gap:10px; padding:8px 14px 8px 8px; } #player-hud .portrait { width:56px; height:56px; } #player-hud .status { min-width:100px; } }

#climb-hint { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 10px 18px; border: 1px solid #e4d59a88; border-radius: 8px; color: #f4edce; background: #1e3029e6; font-size: 13px; pointer-events: none; }

#house-hint { position:fixed; left:50%; bottom:132px; transform:translateX(-50%); padding:12px 20px; border:1px solid #e4d59a88; border-radius:8px; color:#f4edce; background:#1e3029ed; font-size:13px; white-space:nowrap; pointer-events:none; }
@media(max-width:850px) { #house-hint { max-width:calc(100% - 60px); white-space:normal; text-align:center; } }

#goblin-hint { position:fixed; bottom:132px; left:50%; transform:translateX(-50%); padding:13px 22px; border:1px solid #ead294; border-radius:6px; color:#faedc4; background:#19271df2; font-size:14px; pointer-events:none; }
.dueling #player-hud, .dueling #house-hint, .dueling #climb-hint, .dueling #goblin-hint, .dueling #open-deck, .dueling #open-quests, .dueling #quest-tracker { display:none !important; }

/* The deck button, bottom-left, an icon in the HUD's livery stacked just above the map button: shown once the opening story is complete. */
#open-deck { position:fixed; left:24px; bottom:86px; z-index:4; display:grid; place-items:center; width:52px; height:52px; padding:0; color:#e9dcc3; background:linear-gradient(160deg,#1c2a2ff0,#131c20f0); border:1px solid #c4ad7866; border-radius:12px; box-shadow:inset 0 0 0 1px #0006,0 6px 25px #0005; font:inherit; cursor:pointer; transition:border-color .15s,background .15s; }
#open-deck:hover { border-color:#e8bf73; background:linear-gradient(160deg,#2a3c42f0,#1a262bf0); }
#open-deck:focus-visible { outline:2px solid #efd193; outline-offset:3px; }
#open-deck .icon { width:30px; height:30px; color:#e4c17c; stroke-width:3; }
.deck-button-text { display:none; }
body:has(#story-dialogue:not([hidden])) #open-deck, body:has(#story-name:not([hidden])) #open-deck, body:has(#story-dialogue:not([hidden])) #open-quests, body:has(#story-name:not([hidden])) #open-quests { display:none; }

/* The quest button, stacked above the deck button, with a count of open quests; the log opens beside it. */
#open-quests { position:fixed; left:24px; bottom:148px; z-index:4; display:grid; place-items:center; width:52px; height:52px; padding:0; color:#e9dcc3; background:linear-gradient(160deg,#1c2a2ff0,#131c20f0); border:1px solid #c4ad7866; border-radius:12px; box-shadow:inset 0 0 0 1px #0006,0 6px 25px #0005; font:inherit; cursor:pointer; transition:border-color .15s,background .15s; }
#open-quests:hover { border-color:#e8bf73; background:linear-gradient(160deg,#2a3c42f0,#1a262bf0); }
#open-quests:focus-visible { outline:2px solid #efd193; outline-offset:3px; }
#open-quests .icon { width:30px; height:30px; color:#e4c17c; stroke-width:3; }
.quest-badge { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; display:grid; place-items:center; border-radius:10px; background:#d9a53a; color:#1a1408; border:2px solid #131c20; font:700 11px system-ui,sans-serif; }
/* The tracked quest, under the story's objective banner when that is up; notices stack beneath. */
#quest-tracker { position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 20px; color:#f4edce; background:#1e3029e6; border:1px solid #d9a53a99; border-radius:8px; text-align:center; pointer-events:none; }
#quest-tracker span { font-size:9px; letter-spacing:.2em; color:#d9a53a; }
#quest-tracker strong { font:15px Georgia,serif; letter-spacing:.04em; }
#quest-tracker small { font-size:11px; color:#d5d8c7; }
body:has(#story-objective:not([hidden])) #quest-tracker { top:92px; }
body:has(#story-objective:not([hidden])) #quest-toasts { top:182px; }
#quest-toasts { position:fixed; top:112px; left:50%; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.quest-toast { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:240px; max-width:min(460px,calc(100vw - 40px)); padding:10px 22px; text-align:center; color:#f8f0db; background:#172126f2; border:1px solid #d9a53a; border-radius:10px; box-shadow:0 8px 30px #0008; animation:quest-toast 5s ease-out forwards; }
.quest-toast-kicker { font-size:9px; letter-spacing:.22em; color:#d9a53a; }
.quest-toast b { font:20px Georgia,serif; }
.quest-toast small { font-size:12px; color:#d5d8c7; line-height:1.4; }
.quest-toast.level-up { border-color:#e8c783; box-shadow:0 0 0 2px #e8c78333,0 0 40px #e8c78366,0 8px 30px #0008; }
.quest-toast.level-up .quest-toast-kicker { color:#f5db92; }
.quest-toast.quest-complete { border-color:#9fd39b; } .quest-toast.quest-complete .quest-toast-kicker { color:#9fd39b; }
@keyframes quest-toast { 0% { opacity:0; transform:translateY(-12px) scale(.96); } 6% { opacity:1; transform:none; } 85% { opacity:1; } 100% { opacity:0; transform:translateY(-8px); } }

#duel-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; flex-shrink:0; }
kbd { font:10px system-ui; border:1px solid currentColor; border-radius:3px; padding:2px 5px; opacity:.6; }
#duel-ui { position:fixed; inset:0; z-index:3; pointer-events:none; color:#f8f0db; background:linear-gradient(#10151888,transparent 20%,transparent 72%,#0c141988); }
.duel-top { display:grid; grid-template-columns:minmax(180px,310px) 140px minmax(180px,310px); justify-content:center; align-items:center; gap:30px; padding:24px 28px 0; }
.fighter { display:flex; align-items:center; gap:14px; padding:14px 18px 16px 12px; background:#151d22ee; border:1px solid #9aa9ac40; border-radius:12px; box-shadow:0 6px 25px #0004; transition:border-color .2s,box-shadow .2s; }
.fighter.active { border-color:#e8bf73; box-shadow:0 0 0 2px #e8bf7325,0 7px 25px #0004; }
.fighter.goblin.active { border-color:#ef9176; box-shadow:0 0 0 2px #ef917625,0 7px 25px #0004; }
.fighter-avatar { display:grid; place-items:center; width:47px; height:56px; border-radius:9px; background:#2e373b; color:#e7c888; flex-shrink:0; }
.fighter-avatar .icon { width:35px; height:35px; stroke-width:2; }
.goblin .fighter-avatar { color:#bed095; background:#303931; }
.fighter-info { flex:1; min-width:0; }
.fighter-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; font-size:11px; letter-spacing:.10em; }
.fighter-title>b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resource { display:flex; align-items:center; gap:3px; color:#e8ca7b; font:16px Georgia,serif; }
.resource .icon { width:14px; height:17px; fill:currentColor; stroke-width:1; }
.health-readout { display:flex; align-items:center; gap:6px; font-size:13px; font-variant-numeric:tabular-nums; }
.health-readout>.icon { width:13px; height:13px; fill:#c98681; stroke:none; }
.health-track { height:5px; margin-top:9px; background:#ffffff16; border-radius:4px; overflow:hidden; }
.health-track i { display:block; height:100%; width:100%; background:#e4c17c; transition:width .25s; }
.goblin .health-track i { background:#b2c28f; }
.guard-badge { display:inline-flex; align-items:center; margin-left:auto; color:#95c9ea; gap:3px; font-size:10px; }
.guard-badge .icon { width:12px; height:13px; }
#duel-callout { position:fixed; display:flex; align-items:center; gap:8px; transform:translate(-50%,-100%); border:1px solid #e8c17e; color:#f9e3b7; background:#171f26ef; padding:8px 12px; border-radius:7px; box-shadow:0 4px 16px #0006; font-size:11px; font-weight:600; white-space:nowrap; }
#duel-callout.goblin-turn { border-color:#ee987c; color:#ffe0d3; }
#duel-callout .icon { width:21px; height:21px; }
.duel-hand { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); }
.hand-heading { display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:13px; height:27px; }
#duel-selection { font-size:10px; letter-spacing:.18em; font-weight:600; text-shadow:0 2px 8px #000c; }
.timer-disc { border:1px solid #f4e5bd77; border-radius:50%; width:27px; height:27px; display:grid; place-items:center; font-size:12px; font-variant-numeric:tabular-nums; background:#172126cc; }
#duel-timer.urgent { color:#ffa583; }
.duel-cards { display:flex; gap:14px; align-items:center; }
/* Hand cards: aged parchment in a bronze double frame with corner flourishes, a painted illustration
   of the knight (rendered from the model at load, see card-art.js), a ribbon banner and a wax cost seal. */
:root { --parchment-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .21 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --card-flourish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%236f4f24' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 30V9q0-6 6-6h21'/%3E%3Cpath d='M9 24V14q0-5 5-5h10'/%3E%3Cpath d='M14 19q0-4 4-4t4 4-4 4-4-4z'/%3E%3C/g%3E%3Ccircle cx='18' cy='19' r='1.6' fill='%236f4f24'/%3E%3C/svg%3E"); }
.duel-card { --ink:#3a2812; --accent:#8a3d1e; --ribbon:#b8783a; --ribbon-deep:#6e3d18; --glow:#f0b46a; pointer-events:auto; position:relative; display:flex; flex-direction:column; width:143px; height:196px; padding:11px 10px 9px; border:3px solid #6f4f24; border-radius:8px; color:var(--ink); font-family:Georgia,serif; background:var(--parchment-grain),radial-gradient(ellipse at 50% 40%,#f3e6c6,#e2cf9f 70%,#c7ab6f); background-blend-mode:multiply,normal; box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,inset 0 0 22px #6f4f2455,0 1px 0 #fff6,0 12px 24px #000a,0 2px 4px #0008; cursor:pointer; transition:transform .18s,box-shadow .18s,opacity .18s,filter .18s; transform-style:preserve-3d; }
.duel-card::before,.duel-card::after,.card-corners::before,.card-corners::after { content:""; position:absolute; width:22px; height:22px; background:var(--card-flourish) center/contain no-repeat; pointer-events:none; opacity:.9; }
.duel-card::before { top:4px; left:4px; }
.duel-card::after { top:4px; right:4px; transform:scaleX(-1); }
.card-corners::before { bottom:4px; left:4px; transform:scaleY(-1); }
.card-corners::after { bottom:4px; right:4px; transform:scale(-1); }
.card-shield { --accent:#2f4d5b; --ribbon:#5f8399; --ribbon-deep:#2c4656; --glow:#a9d3e6; }
.card-sunder { --accent:#7a1a12; --ribbon:#c2452a; --ribbon-deep:#5a1410; --glow:#ffb35c; }
.card-sunder .card-cost { background:radial-gradient(circle at 35% 30%,#ffb14a,#b8461a 60%,#5c1c0c); box-shadow:inset 0 0 0 2px #ffd88a88,inset 0 -2px 4px #0008,0 0 10px #ff8a2a99,0 2px 5px #000a; }
.card-sunder:not(:disabled) { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,inset 0 0 22px #6f4f2455,0 1px 0 #fff6,0 0 18px #ff7a2a55,0 12px 24px #000a,0 2px 4px #0008; }
/* Feint: pale gold and green-grey, a trick rather than a blow. */
.card-feint { --accent:#4a5a3a; --ribbon:#9aa86a; --ribbon-deep:#465237; --glow:#f2eec8; }
.card-feint .card-cost { background:radial-gradient(circle at 35% 30%,#f7f1c8,#8a9a5a 60%,#3a4630); box-shadow:inset 0 0 0 2px #fff8d888,inset 0 -2px 4px #0008,0 0 10px #e6f0a099,0 2px 5px #000a; }
.card-feint:not(:disabled) { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,inset 0 0 22px #6f4f2455,0 1px 0 #fff6,0 0 18px #e6f0a055,0 12px 24px #000a,0 2px 4px #0008; }
/* Flurry: tempered steel and cold silver, three cuts in one breath. */
.card-flurry { --accent:#2a3a52; --ribbon:#6a86a8; --ribbon-deep:#2b3a52; --glow:#d8ecff; }
.card-flurry .card-cost { background:radial-gradient(circle at 35% 30%,#dff1ff,#5b7ea6 60%,#22314a); box-shadow:inset 0 0 0 2px #e8f4ff88,inset 0 -2px 4px #0008,0 0 10px #9fd0ff99,0 2px 5px #000a; }
.card-flurry:not(:disabled) { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,inset 0 0 22px #6f4f2455,0 1px 0 #fff6,0 0 18px #9fd0ff55,0 12px 24px #000a,0 2px 4px #0008; }
.duel-card.unaffordable:not(:disabled) { cursor:not-allowed; opacity:.55; filter:saturate(.35) brightness(.8); }
.duel-card.unaffordable:not(:disabled) .card-cost { background:radial-gradient(circle at 35% 30%,#7a7a7a,#3d3d3d 60%,#222); box-shadow:inset 0 0 0 2px #9a9a9a66,inset 0 -2px 4px #0008,0 2px 5px #000a; }
/* Hovering lights a card up in place: a gold rim and a brighter face, but it stays where it was dealt. */
.duel-card:hover:not(:disabled):not(.unaffordable) { filter:brightness(1.1) saturate(1.08); box-shadow:inset 0 0 0 1px #f0d58c,inset 0 0 0 2px #7a5a2c,inset 0 0 22px #6f4f2455,0 1px 0 #fff6,0 0 0 3px #f6dc95,0 0 28px #f0d58caa,0 12px 24px #000a; }
button:focus-visible { outline:2px solid #fff1b8; outline-offset:4px; }
.duel-card.selected { transform:translateY(-8px); box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,inset 0 0 22px #6f4f2455,0 0 0 2px #efd08b,0 0 30px #e8bf7399,0 10px 28px #000b; }
.card-cost { position:absolute; z-index:2; top:-7px; left:-7px; display:flex; align-items:center; justify-content:center; gap:1px; width:30px; height:30px; color:#f8e2b0; border-radius:50%; font:bold 13px Georgia,serif; background:radial-gradient(circle at 35% 30%,#c0432e,#7c1d14 60%,#4d100a); box-shadow:inset 0 0 0 2px #e7a54e88,inset 0 -2px 4px #0008,0 2px 5px #000a; text-shadow:0 1px 1px #0009; }
.card-cost .icon { width:10px; height:13px; fill:currentColor; stroke-width:1; filter:drop-shadow(0 1px 1px #0009); }
.card-art { position:relative; flex:1; min-height:0; margin:2px 1px 0; border:2px solid #7a5a2c; border-radius:3px; background:var(--card-art-fallback,radial-gradient(ellipse at 50% 35%,var(--glow),var(--accent) 60%,#1a100a)) center/cover no-repeat; box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 26px #000b,0 0 0 1px #d9b86a88; overflow:hidden; }
.card-slash .card-art { background-image:var(--card-art-slash,radial-gradient(ellipse at 50% 35%,var(--glow),var(--accent) 60%,#1a100a)); }
.card-shield .card-art { background-image:var(--card-art-shield,radial-gradient(ellipse at 50% 35%,var(--glow),var(--accent) 60%,#1a100a)); }
.card-sunder .card-art { background-image:var(--card-art-sunder,radial-gradient(ellipse at 50% 35%,var(--glow),var(--accent) 60%,#1a100a)); }
.card-flurry .card-art { background-image:var(--card-art-flurry,radial-gradient(ellipse at 50% 35%,var(--glow),var(--accent) 60%,#0d1220)); }
.card-feint .card-art { background-image:var(--card-art-feint,radial-gradient(ellipse at 50% 35%,var(--glow),var(--accent) 60%,#141a10)); }
.card-art::after { content:""; position:absolute; inset:0; background:linear-gradient(#0000 60%,#0007),var(--parchment-grain); background-blend-mode:normal,soft-light; opacity:.9; pointer-events:none; }
.card-art .icon { position:absolute; right:5px; bottom:4px; width:22px; height:24px; color:#f5e1b0; stroke-width:2.6; opacity:.85; filter:drop-shadow(0 1px 2px #000c); }
.card-name { position:relative; z-index:1; display:block; margin:-9px -2px 0; padding:4px 10px 3px; font:700 8.5px system-ui,sans-serif; letter-spacing:.2em; text-align:center; color:#fbecc8; background:linear-gradient(#e1a55c,var(--ribbon) 45%,var(--ribbon-deep)); clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 6px) 50%,100% 100%,0 100%,6px 50%); text-shadow:0 1px 1px #0009; box-shadow:0 2px 3px #0008; }
.card-shield .card-name { background:linear-gradient(#a8c8d8,var(--ribbon) 45%,var(--ribbon-deep)); }
.card-sunder .card-name { background:linear-gradient(#ffb066,var(--ribbon) 45%,var(--ribbon-deep)); }
.card-flurry .card-name { background:linear-gradient(#c9dcf2,var(--ribbon) 45%,var(--ribbon-deep)); }
.card-feint .card-name { background:linear-gradient(#e8ecc4,var(--ribbon) 45%,var(--ribbon-deep)); }
.card-stat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; margin:7px 6px 0; font:bold 21px Georgia,serif; color:var(--ink); white-space:nowrap; text-shadow:0 1px 0 #fff8; }
.stat-line { display:flex; align-items:center; justify-content:center; gap:5px; }
.stat-line.minor { font-size:11px; letter-spacing:.04em; font-style:italic; }
.stat-line.minor .icon { width:12px; height:13px; }
.card-stat .icon use[href="#icon-block"] { fill:#0000; }
.card-stat .icon { width:19px; height:21px; stroke-width:2.2; color:var(--accent); }
.card-stat .icon use[href="#icon-damage"] { fill:currentColor; stroke:none; }
.duel-card>kbd { position:absolute; z-index:1; top:7px; right:9px; font:9px Georgia,serif; padding:1px 4px; color:#6f4f24; border-color:#6f4f24; opacity:.75; }
.duel-card:disabled { cursor:default; opacity:.6; filter:saturate(.55) brightness(.85); }
.duel-card.selected:disabled { opacity:1; filter:none; }
#duel-pass { pointer-events:auto; align-self:flex-end; display:flex; flex-direction:column; justify-content:center; gap:11px; padding:13px 15px; margin-left:4px; height:86px; min-width:100px; color:#eee2c7; border:1px solid #f6e4b84d; border-radius:9px; background:#19242ce6; cursor:pointer; }
#duel-pass>span { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; }
#duel-pass .icon { width:17px; height:17px; }
#duel-pass .pass-cost { color:#c5b88f; font-size:11px; gap:4px; }
#duel-pass .pass-cost .icon { width:10px; height:12px; }
#duel-pass kbd { margin-left:10px; }
#duel-pass:hover:not(:disabled) { background:#35424a; border-color:#e2cca0; }
#duel-pass:disabled { opacity:.4; cursor:default; }
#duel-result { pointer-events:auto; position:absolute; top:43%; left:50%; transform:translate(-50%,-50%); width:310px; text-align:center; padding:28px 30px; background:#172126f5; border:1px solid #d7bf78; border-radius:12px; box-shadow:0 12px 80px #07100b80; }
.duel-kicker { font-size:9px; font-weight:650; letter-spacing:.2em; color:#dbc58b; }
#duel-result h2 { font:34px Georgia,serif; margin:12px 0; }
#duel-result p { font-size:12px; line-height:1.6; color:#d0d4bd; }
#duel-return { cursor:pointer; border:1px solid #ddc588; color:#eeddaf; padding:11px 20px; background:#304435; margin-top:8px; border-radius:4px; }
#duel-return kbd { margin-left:10px; }
#duel-damage { position:fixed; z-index:4; transform:translate(-50%,-100%); pointer-events:none; color:#ffe6bf; font-weight:750; font-size:26px; white-space:nowrap; text-shadow:0 2px 3px #27190c,0 0 18px #82371b; animation:damage-pop 1.3s cubic-bezier(.2,.7,.3,1) forwards; }
#duel-damage.blocked { color:#cde8f8; text-shadow:0 2px 3px #10283b,0 0 18px #2b6f9c; }
/* A sunder's number lands bigger and hotter, with a slam-down instead of the pop. */
#duel-damage.heavy { font-size:44px; color:#fff1c8; text-shadow:0 3px 4px #3a1206,0 0 26px #ff7a1a,0 0 60px #ff3c12aa; animation:damage-slam 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes damage-slam { 0% { transform:translate(-50%,calc(-100% - 90px)) scale(2.6); opacity:0; } 10% { opacity:1; transform:translate(-50%,-100%) scale(1.15); } 16% { transform:translate(-50%,calc(-100% + 6px)) scale(.94); } 24% { transform:translate(-50%,-100%) scale(1); } 70% { opacity:1; } 100% { transform:translate(-50%,calc(-100% - 40px)) scale(.9); opacity:0; } }
/* Full-screen impact flash on a sunder: a white-hot bloom that burns down to ember at the edges. */
#duel-impact-flash { position:fixed; inset:0; z-index:4; pointer-events:none; background:radial-gradient(ellipse at 50% 58%,#fff6e0 0%,#ffb35c 22%,#ff5a1a66 50%,#3a0a0400 78%); animation:impact-flash .55s ease-out forwards; }
#duel-impact-flash[hidden] { display:none; }
@keyframes impact-flash { 0% { opacity:0; } 6% { opacity:1; } 30% { opacity:.55; } 100% { opacity:0; } }
/* Flurry: each cut's number pops in cold steel; the ones before it are left behind as drifting ghosts,
   and the last cut lands heavy with the three-cut total beneath it. */
#duel-damage.cut { color:#e9f4ff; text-shadow:0 2px 3px #0f1c2c,0 0 18px #6fb4ff; animation:damage-cut .9s cubic-bezier(.2,.7,.3,1) forwards; }
#duel-damage.cut.heavy { font-size:42px; color:#ffffff; text-shadow:0 3px 4px #0f1c2c,0 0 26px #8fc8ff,0 0 60px #4f9cffaa; animation:damage-slam 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
#duel-damage.feint { font-size:22px; color:#f7f1c8; text-shadow:0 2px 3px #1c2210,0 0 16px #c8d67a; animation:damage-feint 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes damage-feint { 0% { transform:translate(-50%,-100%) scale(.6) rotate(8deg); opacity:0; } 12% { opacity:1; transform:translate(-50%,-100%) scale(1.15) rotate(-4deg); } 22% { transform:translate(-50%,-100%) scale(1) rotate(0); } 65% { opacity:1; } 100% { transform:translate(-50%,calc(-100% - 40px)) scale(.9); opacity:0; } }
#duel-damage .damage-total { display:block; margin-top:2px; font-size:15px; letter-spacing:.14em; color:#cfe6ff; text-shadow:0 1px 2px #0f1c2c,0 0 12px #6fb4ff; }
@keyframes damage-cut { 0% { transform:translate(-50%,-100%) scale(2.1) rotate(-6deg); opacity:0; } 7% { opacity:1; } 16% { transform:translate(-50%,-100%) scale(1) rotate(0deg); } 70% { opacity:1; } 100% { transform:translate(-50%,calc(-100% - 30px)) scale(.9); opacity:0; } }
.damage-ghost { position:fixed; z-index:4; transform:translate(-50%,-100%); pointer-events:none; color:#cfe6ff; font-weight:750; font-size:26px; white-space:nowrap; text-shadow:0 2px 3px #0f1c2c,0 0 14px #6fb4ff; animation:damage-ghost 1.1s ease-out forwards; }
.damage-ghost.blocked { color:#cde8f8; }
@keyframes damage-ghost { 0% { opacity:1; transform:translate(-50%,-100%) scale(1); } 100% { opacity:0; transform:translate(calc(-50% + var(--drift,-34px)),calc(-100% - 56px)) scale(.75); } }
#duel-impact-flash.steel { background:radial-gradient(ellipse at 50% 58%,#f4faff 0%,#bfe0ff 18%,#4f8fe066 42%,#0a142400 70%); animation:impact-flash .4s ease-out forwards; }
@keyframes damage-pop { 0% { transform:translate(-50%,-100%) scale(1.9); opacity:0; } 8% { opacity:1; } 18% { transform:translate(-50%,-100%) scale(1); } 65% { opacity:1; } 100% { transform:translate(-50%,calc(-100% - 48px)) scale(.9); opacity:0; } }
#duel-round-flash { position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; text-align:center; text-shadow:0 2px 10px #000c; animation:round-flash 1.4s ease-out forwards; }
#duel-round-flash[hidden] { display:none; }
#duel-round-flash b { font:42px Georgia,serif; letter-spacing:.14em; color:#f6e2b3; }
#duel-round-flash span { font-size:11px; letter-spacing:.2em; color:#e8ca7b; }
@keyframes round-flash { 0% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 12% { opacity:1; transform:translate(-50%,-50%) scale(1.06); } 22% { transform:translate(-50%,-50%) scale(1); } 75% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-62%) scale(1); } }
.resource.gain { animation:stamina-gain .7s ease-out; }
@keyframes stamina-gain { 0% { transform:scale(1); } 25% { transform:scale(1.55); color:#fff2c4; } 100% { transform:scale(1); } }
@media(max-height:760px) { .duel-top { padding-top:14px; } .duel-hand { bottom:16px; } .duel-card { width:123px; height:168px; padding:10px 8px 8px; } .card-stat { font-size:18px; margin-top:6px; } .card-stat .icon { width:17px; height:19px; } }
@media(max-width:720px) { .duel-top { grid-template-columns:minmax(100px,1fr) 70px minmax(100px,1fr); padding:12px 12px 0; gap:10px; } .fighter { gap:8px; padding:10px; } .fighter-avatar { display:none; } .fighter-title { font-size:9px; } .health-readout { font-size:11px; } .duel-card { width:117px; height:160px; padding:10px 7px 7px; } .card-stat { font-size:18px; } .card-stat .icon { width:17px; height:19px; } .duel-cards { gap:10px; } #duel-pass { min-width:75px; padding:10px; margin-left:0; } #duel-result { width:260px; padding:24px 18px; } }
/* A persistent five-card hand, with the remaining deck on its left. */
.duel-hand { width:min(1050px,calc(100vw - 24px)); }
.duel-cards { gap:12px; align-items:stretch; }
#duel-hand-cards { display:flex; gap:12px; flex:1; min-width:0; }
#duel-hand-cards .duel-card { width:calc((100% - 48px)/5); flex-shrink:0; }
.deck-back { position:relative; width:90px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:3px solid #6f4f24; border-radius:8px; background:var(--parchment-grain),repeating-linear-gradient(45deg,#263c41 0 8px,#2e4549 8px 10px); background-blend-mode:soft-light,normal; box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,inset 0 0 0 7px #182c32,inset 0 0 0 8px #d9b86a66,3px 3px 0 #c7ab6f,4px 4px 0 #6f4f24,7px 7px 0 #c7ab6f,8px 8px 0 #6f4f24,0 10px 20px #0008; }
.deck-back .icon { width:36px; height:44px; color:#d9c38f; }
.deck-back b { font-size:18px; }
.deck-back>span { font-size:9px; letter-spacing:.15em; }
.duel-controls { display:flex; flex-direction:column; justify-content:flex-end; gap:10px; width:100px; flex-shrink:0; }
#duel-draw-help { pointer-events:auto; display:block; }
#duel-draw { width:100%; padding:14px 10px; border:1px solid #e2cca0; border-radius:9px; background:#354b47; color:#fff0cc; cursor:pointer; }
#duel-draw:disabled { opacity:.5; cursor:default; pointer-events:none; }
#duel-pass { width:100%; min-width:0; height:55px; padding:10px; margin:0; }
#duel-pass kbd { margin-left:0; }
.hand-help { font-size:11px; text-align:center; color:#eee2c7; text-shadow:0 2px 5px #000; margin:12px 0 0; }
.empty-hand { flex:1; align-self:center; text-align:center; font-size:14px; }
@media(max-width:720px) {
 .duel-cards,#duel-hand-cards { gap:5px; }
 #duel-hand-cards .duel-card { width:calc((100% - 20px)/5); height:125px; border-radius:6px; }
 .deck-back { width:44px; gap:8px; }
 .deck-back b { font-size:12px; }
 .deck-back .icon { width:24px; height:30px; }
 .duel-controls { width:57px; }
 #duel-pass,#duel-draw { padding:10px 3px; font-size:11px; }
 #duel-pass .icon,#duel-pass kbd { display:none; }
 #duel-hand-cards .duel-card { padding:8px 5px 5px; border-width:2px; }
 .duel-card::before,.duel-card::after,.card-corners::before,.card-corners::after { width:12px; height:12px; }
 .card-art { margin:0; border-width:1px; }
 .card-art .icon { width:14px; height:16px; right:3px; bottom:2px; }
 .card-name { font-size:6px; padding:2px 6px; margin:-6px -1px 0; }
 .card-stat { margin:4px 0 0; font-size:11px; }
 .card-stat .icon { width:12px; height:13px; }
 .card-cost { top:-5px; left:-5px; width:20px; height:20px; font-size:10px; }
 .duel-card>kbd { top:3px; right:4px; padding:0 2px; font-size:7px; }
 .hand-help { font-size:9px; }
}
/* The played shield card lifts out of the hand, flips, and dives into the knight as the brace begins. */
.card-flight { position:fixed; z-index:5; pointer-events:none; margin:0; box-sizing:border-box; box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #ffe3a0aa,0 0 28px #f0b46acc; transform-origin:center; animation:card-flight var(--flight,.6s) cubic-bezier(.45,0,.2,1) forwards; }
@keyframes card-flight {
  0% { transform:translate(0,0) scale(1) rotate(0deg); opacity:1; filter:brightness(1); }
  28% { transform:translate(calc(var(--dx)*.18),calc(var(--dy)*.22 - 80px)) scale(.8) rotate(-9deg); opacity:1; filter:brightness(1.3); }
  85% { transform:translate(calc(var(--dx)*.96),calc(var(--dy)*.96)) scale(.22) rotate(6deg); opacity:.9; filter:brightness(2.2); }
  100% { transform:translate(var(--dx),var(--dy)) scale(.05) rotate(8deg); opacity:0; filter:brightness(3); }
}
.card-flight.card-shield { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #cfe9f5aa,0 0 28px #8fd8f2aa; }
.card-flight.card-sunder { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #ffd9a0aa,0 0 32px #ff8a2acc; }
.card-flight.card-feint { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #f7f1c8aa,0 0 28px #e6f0a0cc; }
.card-flight.card-flurry { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #dff1ffaa,0 0 32px #9fd0ffcc; }
/* A discarded card drops out of the hand, tumbling away behind the duel plates as it fades; the rest slide together (duel.js). */
.card-drop { position:fixed; z-index:2; pointer-events:none; margin:0; box-sizing:border-box; transition:none; animation:card-drop .5s cubic-bezier(.4,0,.8,.6) forwards; }
@keyframes card-drop { from { transform:var(--from,none); opacity:1; } to { transform:translateY(150px) var(--from,none) rotate(16deg) scale(.86); opacity:0; } }

#corner-buttons { position:fixed; right:20px; top:20px; z-index:4; display:flex; gap:8px; }
#open-settings, #open-dev { padding:9px 14px; }
#open-dev { background:#3a2f22; border-color:#c9a45a; color:#f5db92; }
#settings, #dev { width:min(560px,calc(100vw - 48px)); max-height:calc(100vh - 48px); padding:26px 30px 22px; color:#f3e5c8; background:#192321; border:1px solid #ad9158; border-radius:12px; box-shadow:0 20px 80px #0009; box-sizing:border-box; }
#dev { width:min(400px,calc(100vw - 48px)); }
#settings::backdrop, #dev::backdrop { background:#08100dc0; }
#settings h1, #dev h1 { margin:4px 0 0; font-size:28px; }
#settings h2 { margin:18px 0 8px; font:600 11px system-ui; letter-spacing:2px; color:#c7aa70; text-transform:uppercase; }
#settings h2:first-child { margin-top:4px; }
.settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.settings-head button { flex-shrink:0; padding:9px 14px; }
.settings-head kbd { margin-left:8px; }
.settings-eyebrow { color:#c7aa70; letter-spacing:2px; font-size:11px; margin:0; }
.settings-tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid #ad915855; }
.settings-tabs [role=tab] { flex:1; padding:10px 6px; color:#b6beb1; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; font:inherit; letter-spacing:.04em; cursor:pointer; }
.settings-tabs [role=tab]:hover { color:#f3e5c8; }
.settings-tabs [role=tab][aria-selected=true] { color:#f5db92; border-bottom-color:#e8bf73; }
.settings-panel { min-height:240px; }
#settings label, #dev label { display:block; margin-bottom:9px; }
#dev select { width:100%; padding:12px; color:#f3e5c8; background:#101916; border:1px solid #80714e; border-radius:5px; font:inherit; box-sizing:border-box; }
#dev #skip-intro { margin-top:6px; }
.credits ul { margin:0 0 4px; padding-left:18px; font-size:13px; line-height:1.5; }
.credits li { margin:2px 0; }
.credits a { color:#e6c993; }
.credits .settings-note { margin-top:4px; }
#settings label output { float:right; color:#dec58e; font-variant-numeric:tabular-nums; }
#settings select, #settings input[type=text] { width:100%; padding:12px; color:#f3e5c8; background:#101916; border:1px solid #80714e; border-radius:5px; font:inherit; box-sizing:border-box; }
#settings input[type=range] { width:100%; margin:2px 0 6px; accent-color:#e4c17c; }
.settings-check { display:flex !important; align-items:center; gap:10px; margin:14px 0 0; cursor:pointer; }
.settings-check input { width:18px; height:18px; margin:0; accent-color:#e4c17c; }
.settings-note { color:#b6beb1; font-size:13px; }
.settings-note kbd { opacity:.9; }
.settings-status, #armor-status, #weapon-status { min-height:20px; margin:8px 0; font-size:13px; color:#dec58e; }
.binding-head, .binding-row { display:grid; grid-template-columns:1fr 112px 112px; gap:8px; align-items:center; }
.binding-head { font-size:10px; letter-spacing:.14em; color:#8fa39b; margin-bottom:4px; }
.binding-row { padding:3px 0; border-top:1px solid #ffffff0d; font-size:14px; }
.key-chip { padding:7px 8px; color:#f3e5c8; background:#101916; border:1px solid #80714e; border-radius:5px; font:600 13px system-ui; text-align:center; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.key-chip:hover { border-color:#e8bf73; }
.key-chip.empty { color:#7f8a83; font-weight:400; border-style:dashed; }
.key-chip.listening { color:#192321; background:#e8bf73; border-color:#e8bf73; font-weight:500; animation:chip-pulse 1s ease-in-out infinite; }
@keyframes chip-pulse { 50% { background:#f5db92; } }
.settings-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid #ad915855; }
.settings-foot .settings-note { margin:0; font-size:12px; color:#8fa39b; }
.settings-minor { padding:8px 12px; font-size:13px; }
#open-settings, #open-dev, #resume-game, #dev-close, #travel-thornwall, #travel-hall, #skip-intro, #map-close, #grant-gold, #bindings-reset, #fullscreen-toggle, #settings-reset { color:#f3e5c8; background:#24362e; border:1px solid #ad9158; border-radius:5px; font:inherit; cursor:pointer; }
#open-settings:hover, #resume-game:hover, #dev-close:hover, #travel-thornwall:hover, #travel-hall:hover, #skip-intro:hover:not(:disabled), #map-close:hover, #bindings-reset:hover, #fullscreen-toggle:hover, #settings-reset:hover { border-color:#e8bf73; background:#2d4438; }
#travel-thornwall, #travel-hall, #skip-intro, #grant-gold { width:100%; padding:12px; }
#grant-gold { margin-top:6px; background:#3a2f22; border-color:#c9a45a; color:#f5db92; }
#gold-status { color:#dec58e; }
.dev-note { margin-bottom:0; font-size:12px; color:#8fa39b; }
.dev-note code { color:#dec58e; }
#skip-intro:disabled { opacity:.45; cursor:default; }
@media(max-width:600px) { #settings, #dev { padding:18px 16px 16px; } .binding-head, .binding-row { grid-template-columns:1fr 84px 84px; gap:6px; } .settings-tabs [role=tab] { padding:9px 2px; font-size:13px; } .settings-foot { flex-direction:column; align-items:stretch; } }

/* The map: a button in the bottom-left corner, and the realm drawn on parchment when it is open. */
/* The compass: bottom-right, a dial whose rose turns with the camera and whose needle points to the tracked quest. */
#compass { position:fixed; right:24px; bottom:24px; z-index:4; display:flex; flex-direction:column; align-items:center; gap:2px; width:104px; pointer-events:none; user-select:none; }
.compass-dial { position:relative; width:88px; height:88px; border-radius:50%; background:radial-gradient(circle at 50% 42%,#26383e,#131c20 72%); border:1px solid #c4ad7866; box-shadow:inset 0 0 0 1px #0006,inset 0 0 18px #0008,0 6px 25px #0005; }
.compass-dial svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.compass-rose { transition:transform .08s linear; }
.compass-rose .compass-ring { fill:none; stroke:#c4ad7844; stroke-width:1; }
.compass-rose .compass-ticks path { fill:none; stroke:#e4c17c; stroke-width:2.5; stroke-linecap:round; }
.compass-rose .compass-ticks .minor { stroke:#c4ad7877; stroke-width:1.5; }
.compass-rose text { font:bold 13px Georgia,serif; fill:#f5db92; }
.compass-needle { transition:transform .08s linear; filter:drop-shadow(0 1px 2px #000c); }
.compass-needle .needle-head { fill:#d9a53a; stroke:#7a4a10; stroke-width:1; stroke-linejoin:round; }
.compass-needle .needle-tail { fill:#8d8577; stroke:#3a3a36; stroke-width:1; stroke-linejoin:round; }
.compass-pin { position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#f5db92; border:1px solid #7a4a10; box-shadow:0 1px 2px #000c; }
#compass.near .compass-needle { opacity:.35; }
#compass.near .compass-pin { background:#d9a53a; box-shadow:0 0 10px #d9a53a, 0 1px 2px #000c; }
#compass strong { margin-top:4px; font:15px Georgia,serif; color:#f4edce; letter-spacing:.04em; font-variant-numeric:tabular-nums; text-shadow:0 1px 3px #000c; }
#compass small { max-width:104px; font-size:10px; letter-spacing:.06em; color:#d9a53a; text-align:center; text-shadow:0 1px 3px #000c; }
.dueling #compass, body:has(#story-dialogue:not([hidden])) #compass, body:has(#story-name:not([hidden])) #compass { display:none !important; }
#open-map { position:fixed; left:24px; bottom:24px; z-index:4; display:grid; place-items:center; width:52px; height:52px; padding:0; color:#e9dcc3; background:linear-gradient(160deg,#1c2a2ff0,#131c20f0); border:1px solid #c4ad7866; border-radius:12px; box-shadow:inset 0 0 0 1px #0006,0 6px 25px #0005; cursor:pointer; }
#open-map svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
#open-map:hover { background:linear-gradient(160deg,#2a3c42f0,#1a262bf0); }
#map { position:fixed; inset:0; z-index:5; display:grid; place-items:center; background:#08100d90; }
.map-card { display:flex; flex-direction:column; gap:12px; padding:18px 22px 16px; color:#f3e5c8; background:#192321; border:1px solid #ad9158; border-radius:12px; box-shadow:0 20px 80px #0009; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); box-sizing:border-box; }
.map-card header { display:flex; align-items:baseline; gap:14px; }
.map-card h2 { margin:0; font:28px Georgia,serif; flex:1; }
#map-close { padding:8px 14px; }
#map-close kbd { margin-left:8px; }
.map-card canvas { display:block; max-width:100%; max-height:calc(100vh - 160px); object-fit:contain; border:2px solid #6f4f24; border-radius:6px; box-shadow:inset 0 0 0 1px #d9b86a,0 8px 20px #0008; }
.map-help { margin:0; font-size:12px; color:#b6beb1; text-align:center; }
.dueling #open-map, body:has(#story-name:not([hidden])) #open-map { display:none !important; }
#settings :focus-visible, #dev :focus-visible, #open-settings:focus-visible, #open-dev:focus-visible { outline:2px solid #efd193; outline-offset:3px; }
.scene-links { display:flex; gap:16px; margin:16px 0; font-size:13px; }
.scene-links a { color:#e6c993; }

/* The opening story: objective banner, spoken lines, the name entry and the captain's lesson tips. */
#story-objective { position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 22px; color:#f4edce; background:#1e3029e6; border:1px solid #e4d59a88; border-radius:8px; text-align:center; pointer-events:none; }
#story-objective span { font-size:9px; letter-spacing:.2em; color:#dbc58b; }
#story-objective strong { font:15px Georgia,serif; letter-spacing:.04em; }
#story-dialogue, #story-name { position:fixed; bottom:64px; left:50%; transform:translateX(-50%); z-index:3; width:min(660px,calc(100vw - 32px)); box-sizing:border-box; padding:18px 24px 16px; color:#f3e5c8; background:#172126f5; border:1px solid #d7bf78; border-radius:12px; box-shadow:0 12px 60px #07100b80; }
#story-dialogue, #story-name, #story-tip { display:flex; align-items:flex-start; gap:18px; }
#story-dialogue.caption { background:#172126d8; border-color:#d7bf7888; cursor:pointer; }
#story-dismiss { display:block; margin-top:10px; font-size:10px; letter-spacing:.08em; color:#c9b98f; opacity:.8; }
#story-dismiss kbd { font:inherit; padding:1px 5px; border:1px solid #c9b98f88; border-radius:3px; }
/* A passing caption sits where the interaction prompt usually goes: lift the prompt above it. */
body:has(#story-dialogue.caption:not([hidden])) #house-hint { bottom:215px; }
.story-words { flex:1; min-width:0; }
/* The speaker's face, rendered from the hall: a framed rectangle beside the words. */
.story-portrait { flex-shrink:0; width:72px; height:88px; border:2px solid #d7bf78; border-radius:6px; background:radial-gradient(circle at 50% 30%,#3d5158,#1a2a30 75%); box-shadow:inset 0 0 0 2px #0e171a,0 3px 10px #0008; overflow:hidden; }
.story-portrait canvas { display:block; width:100%; height:100%; }
.story-portrait.small { width:44px; height:54px; border-width:1px; }
#story-tip { text-align:left; align-items:center; gap:12px; }
#story-speaker, .story-speaker { display:block; font-size:10px; letter-spacing:.2em; color:#e8c783; margin-bottom:8px; }
#story-line { margin:0; font:17px/1.5 Georgia,serif; }
#story-continue { display:flex; align-items:center; gap:10px; margin:14px 0 0 auto; padding:9px 16px; color:#eeddaf; background:#304435; border:1px solid #ddc588; border-radius:5px; font:inherit; cursor:pointer; }
#story-continue:hover { background:#3d5644; }
#story-name label { display:block; margin:4px 0 10px; font:16px Georgia,serif; }
#story-name input { width:100%; box-sizing:border-box; padding:12px 14px; color:#f3e5c8; background:#101916; border:1px solid #80714e; border-radius:5px; font:18px Georgia,serif; }
#story-name-status { min-height:18px; margin:8px 0 6px; font-size:13px; color:#ef9176; }
#story-name-confirm { display:block; margin-left:auto; padding:10px 18px; color:#eeddaf; background:#304435; border:1px solid #ddc588; border-radius:5px; font:inherit; cursor:pointer; }
#story-name-confirm:hover { background:#3d5644; }
#story-tip { position:fixed; bottom:calc(24px + 262px); left:50%; transform:translateX(-50%); z-index:4; width:min(560px,calc(100vw - 32px)); box-sizing:border-box; padding:12px 18px; color:#f9e3b7; background:#171f26ef; border:1px solid #e8c17e; border-radius:9px; box-shadow:0 4px 16px #0006; text-align:center; pointer-events:none; }
#story-tip b { display:block; font-size:9px; letter-spacing:.2em; color:#e8c783; margin-bottom:5px; }
#story-tip p { margin:0; font:14px/1.45 Georgia,serif; }
#story-dialogue :focus-visible, #story-name :focus-visible { outline:2px solid #efd193; outline-offset:3px; }
.dueling #story-objective, .dueling #story-dialogue { display:none !important; }
/* The guided duel: the card the captain calls for glows; everything else is locked. */
.duel-card.locked { opacity:.32; filter:saturate(.2) brightness(.7); cursor:not-allowed; }
.duel-card.guided:not(:disabled) { animation:guided-pulse 1.3s ease-in-out infinite; }
#duel-pass.guided:not(:disabled) { border-color:#ffe3a0; animation:guided-pulse 1.3s ease-in-out infinite; }
@keyframes guided-pulse { 0%,100% { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #ffe3a0aa,0 0 18px #f0b46a99,0 12px 24px #000a; transform:translateY(-6px); } 50% { box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 3px #ffe3a0,0 0 34px #f0b46a,0 16px 28px #000a; transform:translateY(-12px); } }
@media(max-height:760px) { #story-tip { bottom:calc(16px + 226px); } }
@media(max-width:720px) { #story-tip { bottom:calc(24px + 205px); padding:8px 12px; } #story-tip p { font-size:12px; } #story-line { font-size:15px; } #story-dialogue, #story-name { bottom:20px; padding:14px 16px 12px; gap:12px; } .story-portrait { width:54px; height:66px; } }

/* The card choice borrows the old shop's header. */
.shop-head { display:flex; align-items:center; gap:18px; padding:20px 26px 16px; border-bottom:1px solid #c4ad7833; }
.shop-head > div { flex:1; min-width:0; }
.shop-head h1 { margin:4px 0 0; font:400 26px Georgia,serif; }
.deck-note { margin:0 6px 12px; color:#b6beb1; font-size:12px; line-height:1.45; }
#dev h1:focus { outline:none; }

/* A level's card choice: two cards laid out side by side, one to keep. */
#card-choice { width:min(760px,calc(100vw - 40px)); max-height:calc(100vh - 40px); padding:0; flex-direction:column; color:#f3e5c8; background:linear-gradient(160deg,#1c2a2f,#131c20); border:1px solid #c4ad78; border-radius:14px; box-shadow:inset 0 0 0 1px #0006,0 20px 80px #000b; overflow:hidden; }
#card-choice[open] { display:flex; }
#card-choice::backdrop { background:#08100dc8; }
.card-choice-body { padding:18px 26px 24px; overflow:auto; }
#card-choice-options { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
#card-choice-options li { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
#card-choice-options .card-choice-card { cursor:pointer; }
#card-choice-options .card-choice-card:hover:not(:disabled) { transform:translateY(-10px) rotate(-1.5deg); }
.card-choice-name { font:22px Georgia,serif; color:#f5db92; }
.card-choice-blurb { max-width:300px; font-size:13px; line-height:1.45; color:#d5d8c7; }
.card-choice-pick { padding:11px 18px; color:#1a1408; background:#e4c17c; border:1px solid #f5db92; border-radius:6px; font:600 14px system-ui,sans-serif; cursor:pointer; }
.card-choice-pick:disabled { opacity:.55; cursor:default; }
#card-choice-status { min-height:18px; margin:14px 0 0; color:#dec58e; font-size:13px; text-align:center; }
#card-choice :focus-visible { outline:2px solid #efd193; outline-offset:3px; }
/* The deck helper: the screen dims and a callout beside the deck button says to open it. The button itself stays lit above the veil. */
#deck-helper { position:fixed; inset:0; z-index:5; background:#08100dc0; }
#deck-helper[hidden] { display:none; }
body.deck-helper-on #open-deck { z-index:6; box-shadow:inset 0 0 0 1px #0006,0 0 0 3px #f5db92,0 0 34px #f0d58ccc,0 6px 25px #0005; animation:deck-helper-pulse 1.2s ease-in-out infinite; }
@keyframes deck-helper-pulse { 50% { box-shadow:inset 0 0 0 1px #0006,0 0 0 6px #f5db9288,0 0 48px #f0d58cee,0 6px 25px #0005; } }
.deck-helper-callout { position:absolute; left:96px; bottom:120px; width:min(380px,calc(100vw - 130px)); padding:18px 22px 20px; color:#f3e5c8; background:linear-gradient(160deg,#1c2a2f,#131c20); border:1px solid #e4c17c; border-radius:12px; box-shadow:0 0 0 1px #0006,0 20px 60px #000c; }
.deck-helper-callout h2 { margin:4px 0 8px; font:400 22px Georgia,serif; }
.deck-helper-callout h2 span { color:#f5db92; }
.deck-helper-callout p { margin:0 0 14px; font-size:14px; line-height:1.5; color:#d5d8c7; }
.deck-helper-callout p b { color:#f5db92; }
#deck-helper-open { padding:11px 18px; color:#1a1408; background:#e4c17c; border:1px solid #f5db92; border-radius:6px; font:600 14px system-ui,sans-serif; cursor:pointer; }
.deck-helper-arrow { position:absolute; left:-58px; bottom:-34px; width:64px; height:64px; color:#f5db92; filter:drop-shadow(0 0 8px #f0d58c); animation:deck-helper-arrow 1s ease-in-out infinite; }
@keyframes deck-helper-arrow { 50% { transform:translate(-6px,6px); } }

/* ---- Duel HUD -----------------------------------------------------------------------------------
   Tall portrait plates on either edge, level with the fighters: the portrait with a 1ST/2ND turn-order
   badge, the name, a big health readout with a trailing "ghost" on the bar, and the stamina count.
   The hand sits in an arc under a large timer ring; it is dealt when the round's planning opens and
   put away while the turns play out. */
.dueling #corner-buttons { top:auto; bottom:20px; }   /* the duel plates own the edges */
#duel-ui { background:linear-gradient(90deg,#0b111488,transparent 22%,transparent 78%,#0b111488),linear-gradient(#0b111499,transparent 14%,transparent 76%,#0b1114aa); }
.duel-top { display:block; padding:0; }
.fighter { position:absolute; top:50%; transform:translateY(-50%); width:168px; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 14px 16px; border-radius:16px; background:linear-gradient(#1a242aee,#0f171bee); border:1px solid #d9b86a55; box-shadow:0 10px 36px #0008,inset 0 1px 0 #ffffff12; transition:transform .2s,box-shadow .2s; }
.fighter.knight { left:26px; }
.fighter.goblin { right:26px; }
.fighter.active { transform:translateY(-50%) scale(1.04); }
.fighter-avatar { position:relative; width:92px; height:92px; border-radius:50%; border:3px solid #d9b86a; box-shadow:0 0 0 3px #0f171b,0 0 20px #0008; transition:box-shadow .2s; }
.goblin .fighter-avatar { border-color:#e79a7c; }
.fighter-avatar .icon { width:58px; height:58px; }
.fighter.active .fighter-avatar { box-shadow:0 0 0 3px #0f171b,0 0 0 5px #f0c977,0 0 28px #f0c977aa; }
.fighter.goblin.active .fighter-avatar { box-shadow:0 0 0 3px #0f171b,0 0 0 5px #ef9176,0 0 28px #ef9176aa; }
.fighter.active .fighter-title>b { color:#fff0cc; text-shadow:0 0 14px #f0c977; }
.order-badge { position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); padding:3px 9px; font-size:9px; font-weight:700; letter-spacing:.12em; color:#8e9599; background:#0f171b; border:1px solid #9aa9ac55; border-radius:9px; white-space:nowrap; }
.order-badge.first { color:#1d1607; background:linear-gradient(#f5dc9a,#d9ae55); border-color:#fff2c6; box-shadow:0 0 10px #e8bf7366; }
.fighter.active .order-badge { animation:guided-pulse 1s ease-in-out infinite; }
.fighter-info { width:100%; display:flex; flex-direction:column; align-items:center; }
.fighter-title { flex-direction:column; gap:2px; margin:6px 0 2px; font-size:13px; letter-spacing:.16em; }
.health-readout { flex-direction:column; gap:0; font:700 30px/1.05 Georgia,serif; color:#fff0cc; }
.health-readout>.icon { display:none; }
.health-readout span:first-of-type::after { content:"HEALTH"; display:block; font:600 8px system-ui,sans-serif; letter-spacing:.2em; color:#b7b4a3; margin-top:2px; }
.guard-badge { margin:4px 0 0; font-size:11px; }
.health-track { position:relative; width:100%; height:12px; margin-top:8px; border-radius:6px; border:1px solid #d9b86a55; background:#00000055; }
.health-track>i { position:relative; z-index:1; }
.health-track .health-ghost { position:absolute; z-index:0; inset:0 auto 0 0; background:#d97b63; transition:width .6s .45s ease-out; }
.fighter.low .health-track>i:not(.health-ghost) { background:#ef7a5c; animation:low-health 1s ease-in-out infinite; }
@keyframes low-health { 50% { filter:brightness(1.5); } }
.stamina-row { margin-top:10px; }
.stamina-row .resource { gap:5px; font:700 24px Georgia,serif; color:#f0c977; }
.goblin .stamina-row .resource { color:#ffb28f; }
.stamina-row .resource .icon { width:16px; height:20px; }
/* The hand: dealt when the round's planning opens, put away while the cards are played out. */
.duel-hand { bottom:11vh; width:min(1000px,calc(100vw - 420px)); transition:opacity .3s ease,visibility 0s linear 0s; }
.duel-hand.put-away { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility 0s linear .3s; }
.duel-hand .duel-cards { transition:transform .3s ease-out; }
.duel-hand.put-away .duel-cards { transform:translate(-120px,40px) scale(.8); transition:transform .3s ease-in; }
.duel-hand.dealt #duel-hand-cards .duel-card { animation:arc-deal .5s cubic-bezier(.2,.8,.3,1) both; }
.duel-hand.dealt #duel-hand-cards .duel-card:nth-child(2) { animation-delay:.06s; } .duel-hand.dealt #duel-hand-cards .duel-card:nth-child(3) { animation-delay:.12s; }
.duel-hand.dealt #duel-hand-cards .duel-card:nth-child(4) { animation-delay:.18s; } .duel-hand.dealt #duel-hand-cards .duel-card:nth-child(5) { animation-delay:.24s; }
@keyframes arc-deal { from { opacity:0; transform:translate(-220px,40px) rotate(-30deg) scale(.7); } }
.duel-hand.dealt .deck-back,.duel-hand.dealt .duel-controls,.duel-hand.dealt .hand-heading { animation:fade-up .35s ease-out both; }
@keyframes fade-up { from { opacity:0; transform:translateY(14px); } }
.hand-heading { flex-direction:column; gap:6px; height:auto; margin-bottom:18px; }
.timer-disc { order:-1; width:64px; height:64px; font:700 24px Georgia,serif; border:3px solid #e8bf73; background:radial-gradient(circle at 50% 30%,#2a3740,#0f171b 72%); box-shadow:0 0 0 3px #0f171b,0 0 0 4px #d9b86a55,0 0 24px #e8bf7355; }
#duel-selection { font-size:12px; letter-spacing:.24em; }
.duel-cards { align-items:flex-end; gap:22px; }
#duel-hand-cards { justify-content:center; gap:0; padding:0 8px 14px; }
#duel-hand-cards .duel-card { width:138px; height:189px; margin:0 -12px; transform-origin:50% 150%; }
#duel-hand-cards .duel-card:nth-child(1) { transform:rotate(-14deg) translateY(30px); }
#duel-hand-cards .duel-card:nth-child(2) { transform:rotate(-7deg) translateY(8px); }
#duel-hand-cards .duel-card:nth-child(4) { transform:rotate(7deg) translateY(8px); }
#duel-hand-cards .duel-card:nth-child(5) { transform:rotate(14deg) translateY(30px); }
#duel-hand-cards .duel-card:hover:not(:disabled):not(.unaffordable) { z-index:2; }
#duel-hand-cards .duel-card.selected { transform:translateY(-30px) scale(1.08); z-index:2; }
.deck-back { width:72px; height:104px; gap:6px; }
.deck-back b { font-size:14px; }
.duel-controls { width:96px; gap:8px; }
#duel-draw,#duel-pass { height:46px; padding:6px; border-radius:23px; }
.hand-help { margin-top:14px; }
#duel-result { top:50%; }
#duel-callout { font-size:14px; padding:12px 18px; border-width:2px; }
/* Narrow screens: the plates shrink into the top corners and the hand lays flat across the width. */
@media(max-width:720px) {
 .fighter { top:12px; transform:none; width:118px; padding:10px 8px; gap:6px; border-radius:12px; }
 .fighter.knight { left:12px; } .fighter.goblin { right:12px; }
 .fighter.active { transform:scale(1.03); }
 .fighter-avatar { display:grid; width:44px; height:44px; }
 .fighter-avatar .icon { width:26px; height:26px; }
 .order-badge { font-size:7px; padding:2px 6px; bottom:-8px; }
 .fighter-title { font-size:9px; margin:4px 0 0; }
 .health-readout { font-size:16px; }
 .health-track { height:7px; margin-top:4px; }
 .stamina-row { margin-top:4px; } .stamina-row .resource { font-size:16px; } .stamina-row .resource .icon { width:11px; height:14px; }
 .duel-hand { bottom:16px; width:calc(100vw - 24px); }
 .hand-heading { margin-bottom:8px; }
 .timer-disc { width:36px; height:36px; font-size:14px; border-width:2px; }
 .duel-cards { gap:5px; align-items:stretch; }
 #duel-hand-cards { padding:0; }
 #duel-hand-cards .duel-card { width:calc((100% - 20px)/5); height:125px; margin:0; }
 #duel-hand-cards .duel-card:nth-child(n) { transform:none; }
 #duel-hand-cards .duel-card.selected { transform:translateY(-8px); }
 .deck-back { width:44px; height:auto; }
 .duel-controls { width:57px; }
 #duel-draw,#duel-pass { height:auto; border-radius:9px; }
 .hand-help { margin-top:8px; }
 .duel-hand.dealt #duel-hand-cards .duel-card,.duel-hand.dealt .deck-back,.duel-hand.dealt .duel-controls,.duel-hand.dealt .hand-heading { animation:none; }
 .dueling #corner-buttons { top:190px; bottom:auto; right:12px; }
 .duel-hand .duel-cards,.duel-hand.put-away .duel-cards { transform:none; transition:none; }
}

/* ===== The menus: the quest log and the deck builder share one frame, oak and iron. Tokens first, then the parts, then the look. ===== */
:root { --kb-display:Luminari,"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --kb-wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .18' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .2 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='240' height='120' filter='url(%23w)'/%3E%3C/svg%3E"); }
.kb-panel { width:min(760px,calc(100vw - 40px)); max-height:calc(100vh - 40px); padding:0; flex-direction:column; color:var(--ink); background:var(--surface); border:var(--frame); border-radius:var(--radius); box-shadow:var(--frame-shadow); overflow:hidden; box-sizing:border-box; }
.kb-panel[open] { display:flex; }
.kb-panel::backdrop { background:var(--backdrop,#08100dc8); }
#deck.kb-panel { width:min(980px,calc(100vw - 40px)); }
#shop.kb-panel { width:min(980px,calc(100vw - 40px)); }
.kb-panel :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.kb-head { position:relative; display:flex; align-items:center; gap:16px; padding:18px 24px 14px; border-bottom:var(--rule); }
.kb-head > div { flex:1; min-width:0; }
.kb-eyebrow { margin:0; font:600 10px system-ui,sans-serif; letter-spacing:.24em; color:var(--accent); }
.kb-head h1 { margin:2px 0 0; font:400 27px var(--kb-display); letter-spacing:.05em; color:var(--title); }
.kb-count { display:flex; align-items:center; gap:5px; padding:7px 13px; color:var(--ink); background:var(--well); border:1px solid var(--edge); border-radius:var(--chip-radius); font:600 15px Georgia,serif; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kb-count b { font-size:18px; color:var(--title); }
.kb-count small { font-size:11px; color:var(--muted); }
.kb-count .icon { width:16px; height:16px; color:var(--accent); }
.kb-count.full { border-color:var(--accent); }
.kb-close { display:flex; align-items:center; gap:8px; padding:8px 13px; color:var(--button-ink); background:var(--button); border:1px solid var(--button-edge); border-radius:var(--chip-radius); font:inherit; cursor:pointer; transition:border-color .15s,background .15s; }
.kb-close:hover { border-color:var(--accent); }
.kb-label { margin:6px 0 10px 4px; font:600 10px system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }

/* --- The quest log: one card per open quest --- */
.quests-body { padding:16px 20px 20px; overflow-y:auto; }
.quest-empty { margin:12px 6px; color:var(--muted); font:italic 14px Georgia,serif; }
#quest-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
.quest-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:10px 12px 10px 10px; background:var(--card); border:1px solid var(--card-edge); border-radius:var(--card-radius); box-shadow:var(--card-shadow); transition:border-color .15s,box-shadow .15s; }
.quest-card:hover { border-color:var(--edge-strong); }
.quest-card.selected { border-color:var(--accent); box-shadow:var(--card-shadow),inset 0 0 0 1px var(--accent-soft); }
.quest-art { position:relative; width:66px; height:66px; display:grid; place-items:center; flex-shrink:0; border-radius:var(--art-radius); overflow:hidden; background:var(--art-bg); border:2px solid var(--art-edge); box-shadow:var(--art-shadow); }
.quest-art img { width:100%; height:100%; object-fit:cover; display:block; }
.quest-art .icon { width:32px; height:32px; color:var(--muted); stroke-width:2.6; }
.quest-main { display:flex; flex-direction:column; gap:7px; min-width:0; }
.quest-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.quest-title { font:500 18px var(--kb-display); color:var(--title); letter-spacing:.02em; }
.quest-giver { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.quest-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.quest-progress { display:inline-flex; align-items:center; gap:7px; font:600 14px Georgia,serif; font-variant-numeric:tabular-nums; }
.quest-progress small { font-size:11px; color:var(--muted); margin-left:-4px; }
.quest-pips { display:inline-flex; gap:4px; }
.quest-pips i { width:13px; height:13px; border-radius:50%; box-sizing:border-box; border:1.5px solid var(--pip-edge); background:var(--pip); }
.quest-pips i.on { background:var(--pip-on); border-color:var(--pip-on-edge); box-shadow:0 0 6px var(--pip-glow); }
.quest-progress-track { width:84px; height:7px; border-radius:4px; overflow:hidden; background:var(--pip); border:1px solid var(--pip-edge); }
.quest-progress-track i { display:block; height:100%; background:var(--pip-on); transition:width .3s; }
.quest-ready { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; border-radius:99px; background:var(--ready-bg); border:1px solid var(--ready-edge); color:var(--ready-ink); font:600 11px Georgia,serif; }
.quest-ready .icon { width:12px; height:12px; stroke-width:4; }
.quest-reward { display:inline-flex; align-items:center; gap:6px; }
.quest-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; border-radius:99px; background:var(--chip); border:1px solid var(--chip-edge); font:600 12px Georgia,serif; font-variant-numeric:tabular-nums; color:var(--ink); }
.quest-chip .icon { width:14px; height:14px; }
.quest-chip.xp .icon { fill:var(--xp); stroke:none; }
.quest-chip.gold .icon { color:#e8c25a; }
.quest-chip.xp { color:var(--xp-ink); }
.quest-chip.gold { color:var(--gold-ink); }
.quest-track { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:58px; height:58px; padding:0; color:var(--track-ink); background:var(--track); border:1px solid var(--track-edge); border-radius:var(--track-radius); box-shadow:var(--track-shadow); font:700 7.5px system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s; }
.quest-track .icon { width:22px; height:22px; stroke-width:2.6; }
.quest-track:hover { transform:translateY(-1px); border-color:var(--accent); }
.quest-track[aria-pressed=true] { color:var(--track-on-ink); background:var(--track-on); border-color:var(--track-on-edge); box-shadow:var(--track-on-shadow); cursor:default; }
.quest-track[aria-pressed=true]:hover { transform:none; }

/* --- The Armoury: a wall of wares, each a card with its picture, its stats as icons and one button: buy, equip, or worn --- */
.shop-body { display:grid; grid-template-columns:minmax(300px,1fr) minmax(300px,340px); grid-template-rows:minmax(0,1fr); flex:1; min-height:0; }
.shop-wares { padding:12px 12px 16px 18px; overflow-y:auto; border-right:var(--rule); }
.shop-wares .kb-label { margin:4px 0 8px 4px; }
.shop-wares section + section { margin-top:8px; }
.shop-list { list-style:none; margin:0 0 4px; padding:0 4px 0 0; display:grid; grid-template-columns:1fr; gap:6px; }
.shop-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:6px 8px 6px 6px; background:var(--card); border:1px solid var(--card-edge); border-radius:var(--card-radius); box-shadow:var(--card-shadow); cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.shop-card:hover { border-color:var(--edge-strong); }
.shop-card.selected { border-color:var(--accent); box-shadow:var(--card-shadow),inset 0 0 0 1px var(--accent-soft); }
.shop-detail { display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 20px 20px; overflow-y:auto; }
#shop-preview, #shop-deck-preview { position:relative; width:100%; max-width:300px; aspect-ratio:1; box-sizing:border-box; flex-shrink:0; border-radius:var(--art-radius); overflow:hidden; background:var(--art-bg); border:2px solid var(--art-edge); box-shadow:var(--art-shadow); }
.deck-fan { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.deck-fan .duel-card { position:absolute; width:102px; height:140px; padding:8px 7px 6px; cursor:default; transform-origin:50% 120%; pointer-events:none; }
.deck-fan .duel-card:nth-child(1) { transform:translateX(-52px) rotate(-18deg); }
.deck-fan .duel-card:nth-child(2) { transform:translateY(-18px); z-index:1; }
.deck-fan .duel-card:nth-child(3) { transform:translateX(52px) rotate(18deg); }
.deck-fan .card-stat { font-size:14px; margin-top:4px; }
.deck-fan .card-stat .icon { width:15px; height:17px; }
.shop-detail .shop-name { margin-top:2px; }
.shop-blurb { margin:0; color:var(--muted); font:italic 13px Georgia,serif; line-height:1.45; text-align:center; }
#shop-item-action { display:flex; justify-content:center; width:100%; margin-top:4px; }
#shop-item-action .shop-act.wide span { font-size:9px; }
.shop-art { position:relative; width:54px; height:54px; display:grid; place-items:center; flex-shrink:0; border-radius:var(--art-radius); overflow:hidden; background:var(--art-bg); border:2px solid var(--art-edge); box-shadow:var(--art-shadow); }
.shop-art img { width:100%; height:100%; object-fit:cover; display:block; }
.shop-art .icon { width:32px; height:32px; color:var(--muted); stroke-width:2.6; }
.shop-art.case i { position:absolute; left:50%; top:50%; width:22px; height:32px; margin:-19px 0 0 -11px; border:1.5px solid #6f4f24; border-radius:3px; background:var(--parchment-grain),radial-gradient(ellipse at 50% 40%,#f3e6c6,#e2cf9f 70%,#c7ab6f); background-blend-mode:multiply,normal; box-shadow:inset 0 0 0 1px #d9b86a,0 3px 6px #0009; transform-origin:50% 130%; }
.shop-art.case i:nth-child(1) { transform:rotate(-16deg); } .shop-art.case i:nth-child(2) { transform:translateY(-3px); z-index:1; } .shop-art.case i:nth-child(3) { transform:rotate(16deg); }
.shop-art.case i::after { content:""; position:absolute; inset:5px 4px 8px; border:1px solid #8a3d1e66; border-radius:2px; }
.shop-main { display:flex; flex-direction:column; gap:5px; min-width:0; }
.shop-name { align-self:flex-start; font:500 18px var(--kb-display); color:var(--title); letter-spacing:.02em; }
.shop-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.shop-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; border-radius:99px; background:var(--chip); border:1px solid var(--chip-edge); font:600 12px Georgia,serif; font-variant-numeric:tabular-nums; color:var(--ink); }
.shop-chip .icon { width:14px; height:14px; }
.shop-chip.damage { color:#f0b46a; } .shop-chip.damage .icon { fill:#e07a3a; stroke:none; }
.shop-chip.damage.none { color:var(--muted); } .shop-chip.damage.none .icon { fill:var(--muted); }
.shop-chip.cards { color:#d5c6f5; } .shop-chip.cards .icon { color:#b8a3ea; }
.shop-chip.copies { color:#b8e6a6; } .shop-chip.copies .icon { color:#7db06b; }
.shop-owned { display:inline-flex; align-items:center; gap:4px; color:var(--ready-ink); font:600 11px Georgia,serif; letter-spacing:.06em; text-transform:uppercase; }
.shop-owned .icon { width:11px; height:11px; stroke-width:4; }
.shop-act { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:64px; height:52px; padding:0; color:var(--track-ink); background:var(--track); border:1px solid var(--track-edge); border-radius:var(--track-radius); box-shadow:var(--track-shadow); font:700 7.5px system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s; }
.shop-act .icon { width:22px; height:22px; stroke-width:2.6; }
.shop-act.wide { flex-direction:row; gap:8px; width:auto; min-width:150px; height:44px; padding:0 18px; }
.shop-act b { display:inline-flex; align-items:center; gap:3px; font:700 13px Georgia,serif; font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; color:var(--gold-ink); }
.shop-act b .icon { width:14px; height:14px; }
.shop-act:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--accent); }
.shop-act[data-mode=equipped] { color:var(--track-on-ink); background:var(--track-on); border-color:var(--track-on-edge); box-shadow:var(--track-on-shadow); cursor:default; }
.shop-act[data-mode=equipped]:hover { transform:none; }
.shop-act:disabled:not([data-mode=equipped]) { opacity:.45; cursor:default; }
.shop-act.poor b { color:var(--muted); }
#shop-status { margin:0; color:var(--warn); font-size:13px; text-align:center; }
#shop-status.good { color:var(--ready-ink); }

/* --- The deck builder: the collection on the left, the deck's slots on the right, the hover card floating between --- */
.deck-body { display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,1.15fr); grid-template-rows:minmax(0,1fr); flex:1; min-height:0; }
.deck-collection { padding:14px 12px 18px 18px; overflow-y:auto; border-right:var(--rule); }
.deck-list { display:flex; flex-direction:column; padding:14px 20px 20px; overflow-y:auto; }
#deck-cards { list-style:none; margin:0; padding:0 4px 0 0; display:flex; flex-direction:column; gap:8px; }
.deck-entry { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:8px 10px 8px 8px; background:var(--card); border:1px solid var(--card-edge); border-radius:var(--card-radius); box-shadow:var(--card-shadow); transition:border-color .15s; }
.deck-entry:hover { border-color:var(--edge-strong); }
.deck-entry-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.deck-entry-name { font:500 16px var(--kb-display); color:var(--title); }
.deck-entry-cost { display:inline-flex; align-items:center; gap:2px; color:var(--muted); font:600 12px Georgia,serif; }
.deck-entry-cost .icon { width:10px; height:12px; fill:currentColor; stroke-width:1; }
.deck-counter { display:flex; align-items:center; gap:5px; }
.deck-counter button { width:32px; height:32px; color:var(--button-ink); background:var(--button); border:1px solid var(--button-edge); border-radius:var(--chip-radius); font:600 18px Georgia,serif; line-height:1; cursor:pointer; transition:border-color .15s,background .15s; }
.deck-counter button:hover:not(:disabled) { border-color:var(--accent); }
.deck-counter button:disabled { opacity:.35; cursor:default; }
.deck-copies { display:inline-flex; align-items:baseline; justify-content:center; gap:2px; min-width:42px; font:600 13px Georgia,serif; font-variant-numeric:tabular-nums; color:var(--ink); }
.deck-copies b { font-size:18px; color:var(--title); }
.deck-copies small { font-size:10px; color:var(--muted); }
.deck-entry:not(.in-deck) .deck-copies b { color:var(--muted); }
/* Small cards: the collection's picks and the deck's slots draw the same face as the duel, smaller. */
.deck-pick, .deck-slot { padding:5px 4px 3px; border-width:2px; border-radius:5px; }
.deck-entry .deck-pick { width:58px; height:80px; }
.deck-pick .card-cost, .deck-slot .card-cost { top:-5px; left:-5px; width:20px; height:20px; font-size:10px; }
.deck-pick .card-cost .icon, .deck-slot .card-cost .icon { width:8px; height:10px; }
.deck-pick .card-art, .deck-slot .card-art { margin:0; border-width:1px; }
.deck-pick .card-art .icon, .deck-slot .card-art .icon { width:14px; height:16px; right:3px; bottom:2px; }
.deck-pick .card-name, .deck-slot .card-name { font-size:5.5px; padding:2px 5px; margin:-5px -1px 0; letter-spacing:.12em; }
.deck-pick .card-stat, .deck-slot .card-stat { margin:2px 0 0; font-size:10px; gap:0; }
.deck-pick .card-stat .icon, .deck-slot .card-stat .icon { width:10px; height:11px; }
.deck-pick .stat-line.minor, .deck-slot .stat-line.minor { display:none; }
.deck-pick .card-stat { display:none; }
.deck-pick .card-name { margin-bottom:1px; }
.deck-pick::before, .deck-pick::after, .deck-pick .card-corners::before, .deck-pick .card-corners::after, .deck-slot::before, .deck-slot::after, .deck-slot .card-corners::before, .deck-slot .card-corners::after { width:10px; height:10px; }
.deck-entry .deck-pick:hover:not(:disabled) { transform:translateY(-3px) rotate(-1.5deg); }
.deck-entry .deck-pick:disabled { opacity:.7; filter:saturate(.6) brightness(.9); cursor:not-allowed; }
#deck-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:9px; padding:12px; background:var(--mat); border:1px solid var(--mat-edge); border-radius:var(--card-radius); box-shadow:var(--mat-shadow); }
#deck-slots .duel-card.deck-slot { width:100%; height:auto; aspect-ratio:74/102; }
#deck-slots .deck-slot:hover:not(:disabled) { transform:translateY(-4px); box-shadow:inset 0 0 0 1px #d9b86a,inset 0 0 0 2px #7a5a2c,0 0 0 2px #ef9176,0 8px 18px #000b; }
#deck-slots .deck-slot:disabled { cursor:default; }
.deck-slot.empty { display:block; aspect-ratio:74/102; border:2px dashed var(--slot-edge); border-radius:6px; background:var(--slot); }
#deck-status { margin:10px 0 0; color:var(--warn); font-size:13px; }
#deck-tip { position:absolute; z-index:3; display:flex; gap:12px; width:310px; padding:12px; box-sizing:border-box; color:var(--tip-ink); background:var(--tip); border:1px solid var(--tip-edge); border-radius:10px; box-shadow:0 16px 44px #000b; pointer-events:none; animation:kb-tip .12s ease-out; }
@keyframes kb-tip { from { opacity:0; transform:translateX(-6px); } }
#deck-tip .duel-card { width:118px; height:162px; padding:9px 8px 7px; flex-shrink:0; cursor:default; }
#deck-tip .card-stat { font-size:16px; margin-top:5px; }
#deck-tip .card-stat .icon { width:15px; height:17px; }
.deck-tip-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.deck-tip-text b { font:500 18px var(--kb-display); color:var(--tip-title); }
.deck-tip-text small { color:var(--tip-muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.deck-tip-text p { margin:6px 0 0; font-size:13px; line-height:1.45; }
@media(max-width:720px) { .kb-panel { max-height:calc(100vh - 20px); } .shop-body { grid-template-columns:1fr; } .shop-wares { border-right:0; border-bottom:var(--rule); max-height:45vh; } .deck-body { grid-template-columns:1fr; } .deck-collection { border-right:0; border-bottom:var(--rule); max-height:45vh; } #deck-slots { grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); } #deck-tip { display:none; } .quest-card { grid-template-columns:auto 1fr; } .quest-track { grid-column:2; justify-self:end; } }

/* --- The look: dark oak planks with iron rivets and brass plates; quests as a wall of plaques. --- */
.kb-panel { --ink:#f3e5c8; --title:#f6dfa4; --muted:#b39c78; --accent:#d9a53a; --accent-soft:#d9a53a66; --focus:#f0d58c; --backdrop:#0a0805cc;
  --surface:repeating-linear-gradient(180deg,#0000 0 118px,#00000099 118px 120px),repeating-linear-gradient(90deg,#0000 0 238px,#00000055 238px 240px),var(--kb-wood),linear-gradient(170deg,#4a3520,#2e2014 60%,#22160d); --frame:5px solid #16100a; --radius:6px; --frame-shadow:inset 0 0 0 1px #7a5a2c,inset 0 0 0 2px #0008,inset 0 0 80px #000a,0 24px 80px #000d;
  --rule:2px solid #0008; --well:#120c07; --edge:#7a5a2c; --edge-strong:#b98b2e; --chip-radius:4px;
  --button:linear-gradient(#4a3a26,#2e2216); --button-ink:#f3e5c8; --button-edge:#8a6a3c;
  --card:linear-gradient(#2a1d12e6,#1a120ce6); --card-edge:#5a4226; --card-radius:5px; --card-shadow:inset 0 1px 0 #fff1,0 4px 10px #0008;
  --art-radius:4px; --art-bg:radial-gradient(circle at 50% 35%,#4f6a6f,#1b2a30 70%); --art-edge:#8a6a3c; --art-shadow:inset 0 0 0 1px #000a,0 0 0 1px #d9a53a44;
  --pip:#0f0a06; --pip-edge:#7a5a2c; --pip-on:#d9a53a; --pip-on-edge:#f0d58c; --pip-glow:#d9a53a88;
  --ready-bg:#1d3320; --ready-edge:#7db06b; --ready-ink:#b8e6a6;
  --chip:#120c07; --chip-edge:#5a4226; --xp:#b8a3ea; --xp-ink:#d5c6f5; --gold-ink:#f0d58c;
  --track:linear-gradient(#5a4530,#2e2216); --track-ink:#d9c38f; --track-edge:#0a0704; --track-radius:5px; --track-shadow:inset 0 1px 0 #fff2,inset 0 0 0 1px #8a6a3c66,0 3px 6px #0009;
  --track-on:linear-gradient(#f0c96a,#b98b2e 60%,#8a6318); --track-on-ink:#2b1a0a; --track-on-edge:#5a3e1c; --track-on-shadow:inset 0 1px 0 #fff8,0 0 0 2px #d9a53a55,0 0 18px #d9a53a66,0 3px 6px #0009;
  --mat:radial-gradient(ellipse at 50% 30%,#2a4a35,#17301f 70%,#10231a); --mat-edge:#0a0704; --mat-shadow:inset 0 0 0 2px #7a5a2c,inset 0 0 0 3px #000a,inset 0 0 30px #0009; --slot:#00000040; --slot-edge:#8fbf9a55;
  --tip:linear-gradient(#2a1d12,#1a120c); --tip-ink:#f3e5c8; --tip-title:#f6dfa4; --tip-muted:#b39c78; --tip-edge:#b98b2e; --warn:#f0a070; }
.kb-panel { --rivet:radial-gradient(circle at 40% 35%,#d6d6d6,#7a7a7a 50%,#2a2a2a 68%,#0000 72%); background:var(--rivet) 8px 8px/18px 18px no-repeat,var(--rivet) calc(100% - 8px) 8px/18px 18px no-repeat,var(--rivet) 8px calc(100% - 8px)/18px 18px no-repeat,var(--rivet) calc(100% - 8px) calc(100% - 8px)/18px 18px no-repeat,var(--surface); }
.kb-head h1 { color:#f6dfa4; text-shadow:0 2px 4px #000c; }
#quest-list { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.quest-title, .shop-name { padding:2px 10px; background:linear-gradient(#e6c479,#b98b2e 55%,#8a6318); color:#2b1a0a; border-radius:2px; box-shadow:inset 0 1px 0 #fff8,0 1px 2px #000a; font-size:15px; letter-spacing:.06em; text-shadow:none; }
.quest-track span, .shop-act span { font-size:7px; }
.quest-track .icon, .shop-act .icon { width:20px; height:20px; }
.deck-counter button { text-shadow:0 1px 0 #000a; }