/* V2 builds on the original responsive shell. */
:root{color-scheme:dark;--gold:#d5b67e;--ink:#0d1413;--muted:#a3b1a9;--line:#35453b}
body{background:radial-gradient(ellipse at 50% 0,#29372d 0,#101817 45%,#090f0f 100%);color:#efece1;font-family:Georgia,'Times New Roman',serif}
button,select,small,.muted,.stats,header,.eyebrow,.controls-help,.notice,.collection,footer,#hud,.run-header,#message{font-family:system-ui,-apple-system,Segoe UI,sans-serif}
button,select{color:#e9e7db;font-size:13px;background:#24332b;border:1px solid #56634a;border-radius:6px;padding:9px 12px;cursor:pointer}
button:hover:not(:disabled){background:#354839;border-color:#cbb481}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,select:focus-visible{outline:2px solid #f5d49a;outline-offset:4px}
#app{max-width:1260px;padding:22px 30px}header{letter-spacing:2px;color:#a5b4aa;padding:0 0 22px}.brand{font-weight:800;letter-spacing:5px;color:#ecdbba;text-decoration:none;font-size:19px}
.panel.hero{position:relative;overflow:hidden;min-height:320px;padding:48px 24px 25px;border-color:#5e6044;background:linear-gradient(90deg,#101817d9,#14211c78,#101817d9),url('assets/goblin-camp.png') center 38%/cover}
.hero:before{content:'';position:absolute;inset:8px;border:1px solid #c7b77835;pointer-events:none}.hero h1{font-weight:400;font-size:clamp(42px,7vw,83px);letter-spacing:9px;color:#f4e2ba;text-shadow:0 3px 20px #000;margin:14px 0}.hero .eyebrow{color:#dfc691;letter-spacing:5px}.hero p{color:#e0dfce;margin:9px 0}.hero .hero-caption{font-size:13px;font-style:italic;color:#becab8}
.panel{border-radius:9px;background:#151f1ced;border-color:#354237;box-shadow:0 12px 30px #0003;padding:23px}.panel h2{font-size:26px;font-weight:400;margin:5px 0 18px}.panel h3{font-weight:400;font-size:20px;margin:23px 0 12px}.eyebrow{font-size:10px;color:var(--gold);letter-spacing:2.5px;margin:0 0 9px}
.stats{margin-top:24px;gap:9px;font-size:12px}.stats span{background:#0e1719c7;border:1px solid #53604a70;border-radius:5px;padding:10px 15px}.stats b{color:#f0d6a0;font-weight:600;margin-left:5px}.grid{gap:18px;grid-template-columns:1.05fr 1fr}
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.card{text-align:center;display:flex;align-items:center;flex-direction:column;padding:8px 2px 10px;background:linear-gradient(#25322b,#17231e);border-color:#394b3c;border-radius:6px;overflow:hidden;min-height:130px;transition:border-color .2s,background .2s}.card strong{font-size:11px;font-family:system-ui,sans-serif;font-weight:600;margin-top:5px;white-space:nowrap}.card small{font-size:9px;color:#a8b7a8;margin-top:4px}.card.selected,.talent.selected{outline:1px solid #ddc18a;border-color:#ddc18a;background:#3b422a}.card.selected{box-shadow:inset 0 0 22px #c5a75b1f}
.portrait{display:block;flex:none;width:86px;height:86px;background-image:url('assets/classes.webp');background-repeat:no-repeat;background-size:300% 200%;background-position:calc(var(--col)*100%/2) calc(var(--row)*100%);filter:drop-shadow(0 6px 6px #0008)}.portrait.large{width:142px;height:142px}.class-feature{display:flex;gap:13px;align-items:center;min-height:155px}.class-feature h2{font-size:32px;margin:4px 0 9px}.class-feature p:not(.eyebrow){font-size:14px;color:#c3cdbd;line-height:1.5;margin:0 0 9px}.class-feature small{font-size:11px;color:#9ead9e}
.equipment-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:13px}.equipment-slots>div{position:relative;border:1px solid #3b4b3c;background:#111b17;padding:9px 26px 9px 10px;min-height:52px;border-radius:5px}.equipment-slots small{display:block;text-transform:uppercase;font-size:9px;letter-spacing:1.3px;color:#a6ad8f;margin-bottom:4px}.equipment-slots b{font:12px system-ui,sans-serif;color:#e3d6b6}.equipment-slots button{position:absolute;right:3px;top:15px;background:none;border:none;padding:2px 5px}
.talents{grid-template-columns:1fr 1fr;gap:7px}.talent{text-align:left;background:#1c2a22;border-color:#3b4b3b;border-radius:5px;padding:10px}.talent b{display:block;font-size:11px;color:#e3d6b6;font-weight:600;margin-bottom:5px}.talent small{display:block;font-size:10px;line-height:1.45;color:#b5bdaa}.muted{color:#a8b3a7;font-size:12px;line-height:1.6}#slotText{font-size:10px}
.notice{padding:9px 12px;background:#263021;border-left:2px solid #c4ac73;color:#cbd0b7;font-size:11px;line-height:1.6}.expedition{position:relative;background:linear-gradient(90deg,#18271ef5,#19271de8),url('assets/goblin-camp.png') center/cover}.expedition h2{font-size:35px;margin-bottom:8px}.expedition p:not(.eyebrow){max-width:750px;font-size:14px;color:#bcc8b5;line-height:1.6}.expedition-controls{display:flex;gap:14px;margin:20px 0 4px}.expedition label{font:10px system-ui;letter-spacing:1.5px;text-transform:uppercase;color:#bdc5ad;display:flex;flex-direction:column;gap:7px;flex:1;max-width:290px}select{width:100%;padding:12px;background:#111f18}
.primary{background:linear-gradient(100deg,#b69a62,#ecd69d,#c3a567);color:#242a1e;font-family:system-ui;font-weight:750;border:1px solid #efdaa5;border-radius:5px;font-size:13px;letter-spacing:2px;padding:17px;text-align:center}.primary:hover:not(:disabled){background:#eed8a0;color:#162119;border-color:#fff0c7}.primary span{float:right;font-size:20px;line-height:16px}.expedition .controls-help{font-size:10px;color:#9dad9b;margin-bottom:0}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.section-heading h2{margin:0}.gear-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gear{border:1px solid #40513f;border-top:2px solid var(--rarity,#b1b4a7);background:#111b16;border-radius:5px;padding:13px;font:12px system-ui;color:#e1dbc8;min-width:0}.gear>b{display:block;font-family:Georgia,serif;font-size:18px;margin:10px 0;color:var(--rarity,#b1b4a7)}.gear p{font-size:11px;line-height:1.5;color:#bcc3b0}.gear small{display:block;font-size:10px;color:#a4ad97;line-height:1.5}.gear-top{display:flex;justify-content:space-between;color:var(--rarity);font-size:10px;text-transform:uppercase;letter-spacing:.5px}.gear-actions{display:flex;gap:7px;margin-top:13px}.gear-actions button{font-size:10px;padding:7px}.shop-item{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:14px 0;border-top:1px solid #344636}.shop-item b{font-size:15px;font-weight:400;color:#dfd4ba}.shop-item small{grid-column:1;line-height:1.5;font-size:10px;color:#a9b69f}.shop-item button{grid-column:2;grid-row:1/3;align-self:center;font-size:10px}#merchant,#blacksmith{max-height:360px;overflow:auto}.collection{text-align:center;font-size:11px;color:#c2c5a3;line-height:1.8}footer{text-align:center;font-size:9px;letter-spacing:2px;color:#708575;padding:23px 0}
.run-header{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;color:#dbc79d;margin-bottom:12px}#hud{font-size:10px;gap:5px}#hud span{background:#1c2a22;border:1px solid #354739;border-radius:4px;padding:6px 9px}#blessingHud{flex-basis:100%;color:#b7c5a2;line-height:1.6}#hudClass{color:#e7d5b1}.health-track{height:6px;background:#372523;border:1px solid #593d34;margin-bottom:10px;border-radius:4px;overflow:hidden}.health-track i{display:block;height:100%;background:linear-gradient(90deg,#918847,#c9be7b);transition:width .1s}#canvas{border:1px solid #6c6b46;border-radius:6px}#message{font-size:12px;color:#e0d2ab;letter-spacing:.5px}
#bossHud{display:flex;gap:20px;justify-content:center;position:absolute;left:20%;right:20%;top:160px;z-index:2;pointer-events:none}#bossHud>div{position:relative;flex:1;height:7px;background:#251917;border:1px solid #785d44;box-shadow:0 2px 10px #000a}#bossHud span{position:absolute;bottom:11px;left:0;right:0;text-align:center;font:9px system-ui;letter-spacing:2px;color:#ffe0b4;text-shadow:0 2px 4px #000}#bossHud i{display:block;height:100%;background:#c66e47}
.modal{background:#06100edb;backdrop-filter:blur(7px)}.modalBox{border:1px solid #a28e5c;background:linear-gradient(145deg,#253128,#111c17);border-radius:8px;max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #000c;padding:28px}.modalBox h2{font:32px Georgia;color:#f0dab0}.modalBox p{color:#c3ccb8;font-size:14px;line-height:1.6}.choice{background:#243629;border-color:#526448;border-radius:5px}.choice strong{font-family:Georgia;font-size:19px;color:#e8d9b5;font-weight:400}.choice small{display:block;color:#b7c6aa;font-size:12px;line-height:1.6;margin-top:5px}.text-button{width:100%;margin-top:12px;background:transparent}.reward-loot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.reward-loot .gear{padding:9px}.reward-loot .gear>b{font-size:14px}.reward-loot .gear p{font-size:10px}
#touch button{background:#283b2c;border-color:#71865b;touch-action:none;user-select:none}#touch .actions button{background:#b49c64;color:#152119}#touch{gap:10px}#touch .dpad button{min-width:46px;min-height:46px}
@media(max-width:1000px){#app{padding:18px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.portrait{width:78px;height:78px}.portrait.large{width:110px;height:110px}.talents{grid-template-columns:1fr}.card{min-height:115px}}
@media(max-width:760px){#app{padding:10px}.grid{grid-template-columns:1fr}.hero{min-height:255px;padding:32px 15px 23px}.hero h1{letter-spacing:4px}.hero .eyebrow{letter-spacing:3px;font-size:9px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.portrait{width:71px;height:71px}.card{min-height:112px}.card strong{font-size:10px}.card small{font-size:8px}.talents{grid-template-columns:1fr 1fr}.panel{padding:16px}.gear-grid{grid-template-columns:1fr 1fr}.run-header{font-size:9px;letter-spacing:1px}.run-header button{font-size:10px}#bossHud{top:180px;left:15%;right:15%}.class-feature h2{font-size:30px}.portrait.large{width:120px;height:120px}.expedition p:not(.eyebrow){font-size:12px}.expedition .controls-help{font-size:10px}#touch{display:flex}}
@media(max-width:390px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.gear-grid{grid-template-columns:1fr}.stats{font-size:10px}.stats span{padding:8px}.hero h1{font-size:36px}.actions{flex-direction:column}.class-feature{gap:4px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@keyframes campDrift{from{background-position:46% 38%}to{background-position:54% 42%}}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.panel.hero{animation:campDrift 22s ease-in-out infinite alternate}
.class-feature{position:relative;overflow:hidden}
.class-feature:before{content:'';position:absolute;width:210px;height:210px;border-radius:50%;left:-30px;top:-22px;background:radial-gradient(circle,#d7b86a2b 0,transparent 67%);animation:heroFloat 5s ease-in-out infinite;pointer-events:none}
.class-feature .portrait.large{position:relative;animation:heroFloat 4.5s ease-in-out infinite;filter:drop-shadow(0 10px 16px #000b) drop-shadow(0 0 18px #d7b86a44)}
.actions button{position:relative;min-width:112px;min-height:64px;overflow:hidden}.actions button:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--cooldown,0%);background:#15211980;pointer-events:none}.actions button b,.actions button span{position:relative;z-index:1}.ability-key{display:block;font:9px system-ui;letter-spacing:1px;opacity:.75}.ability-time{display:block;font:10px system-ui;margin-top:2px}
#chestBtn[hidden]{display:none}.chest-result{border-left:2px solid #e5c478;background:#cab16115;padding:10px 13px}
.realm-loot{margin:12px 0 18px;font:12px system-ui;color:#c5ceaf}.realm-loot summary{cursor:pointer;color:#e0c891}.realm-loot #regionLoot p{font:11px/1.7 system-ui;color:#a8b99e}.realm-loot #regionLoot>div{display:flex;justify-content:space-between;border-bottom:1px solid #4d583944;padding:8px 0;max-width:600px}.realm-loot b{font-weight:500;color:#ecc77e}
.arena{position:relative}.arena #bossHud{top:35px;left:20%;right:20%}.arena #bossHud:empty{display:none}
.account-panel h2{margin-bottom:0}.account-panel input{width:100%;min-width:0;background:#0f1c15;border:1px solid #53624b;color:#e4dfca;border-radius:5px;padding:11px;font:13px system-ui}.account-panel label{display:block;font:11px system-ui;color:#aebda5}.account-panel label input{display:block;margin-top:6px}#accountForm{display:grid;grid-template-columns:1fr 1fr;gap:12px}.account-buttons{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}.account-panel [hidden]{display:none!important}.restore-label{margin-top:17px;max-width:400px}#accountChoice{margin-top:12px}#accountChoice:empty{display:none}#accountChoice p{font:12px/1.6 system-ui;color:#b7c4ad}#accountChoice button+button{margin-left:5px}#accountLogin{display:flex;align-items:center;gap:16px}#accountLogin p{margin:0;max-width:580px}#googleSignIn{white-space:nowrap}#signedInControls{display:flex;gap:8px}
@media(max-width:760px){.panel.hero{min-height:255px;padding:32px 15px 23px}.arena #bossHud{top:25px;left:13%;right:13%}.arena #bossHud span{font-size:7px;letter-spacing:.5px;bottom:9px}#accountLogin{align-items:stretch;flex-direction:column;gap:8px}.account-panel .section-heading{align-items:start}.account-panel .section-heading>button{font-size:10px;max-width:120px}.account-panel h2{font-size:22px}#accountForm{grid-template-columns:1fr}.arena #bossHud>div{height:5px}.account-panel input{font-size:16px}}

/* Six-class production atlas; animation remains composited pending directional frames. */
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.portrait{width:100%;max-width:146px;height:auto;aspect-ratio:1}.portrait.large{width:180px;height:180px;max-width:45%;flex-shrink:0}.card{padding:10px 5px 14px}.card small{white-space:normal}.class-feature .portrait.large{animation:heroFloat 5s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.panel.hero,.class-feature:before,.class-feature .portrait.large{animation:none!important}}