/* Layout: a classic MMO screen. Left = the world (zone banner, scene, unit frames, action bar, XP bar, combat log);
   right = the game menus in tabs. Dark stone with bronze trim, gold engraved headings, rarity-colored loot. */
:root{
  --bg:#0f0d0a; --stone:#1b1712; --stone2:#241e17; --stone3:#2e261c; --bronze:#8a6a35; --bronze-d:#5a4422;
  --gold:#f2c14e; --fg:#e9e1cf; --muted:#a89a80; --dim:#6f6452;
  --hp:#2fbf3b; --mana:#2f6fe0; --rage:#d0312d; --energy:#e8c62a; --xp:#8c3fd1; --rested:#3a8bff;
  --q0:#9d9d9d; --q1:#ffffff; --q2:#1eff00; --q3:#3a8bff; --q4:#b55cf0; --q5:#ff8000;
  --con-gray:#8e8e8e; --con-green:#3fd44a; --con-yellow:#f5e050; --con-orange:#ff8a2a; --con-red:#ff3b30;
  --concord:#4f7fe0; --wild:#d24a3a;
  --f-head:'IM Fell English SC', 'Palatino Linotype', Georgia, serif;
  --f-body:'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.4;
  background-image:radial-gradient(ellipse at 50% 0,#2a2117 0,transparent 70%)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.app{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:12px 40px;display:flex;flex-direction:column;gap:12px}
.frame{background:var(--stone);border:2px solid var(--bronze-d);border-radius:8px;box-shadow:inset 0 0 0 1px #000,0 2px 10px rgba(0,0,0,.5);min-width:0}
h2,h3{font-family:var(--f-head);font-weight:400;color:var(--gold);margin:0;letter-spacing:.02em}
.g{color:#ffd24a} .s{color:#d8d8e0} .c{color:#d08a4a}
.q0{color:var(--q0)} .q1{color:var(--q1)} .q2{color:var(--q2)} .q3{color:var(--q3)} .q4{color:var(--q4)} .q5{color:var(--q5)}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 14px}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand h1{font-family:var(--f-head);font-weight:400;font-size:30px;margin:0;color:var(--gold);text-shadow:0 2px 0 #000}
.home{color:var(--muted);text-decoration:none;font-size:13px}
.home:hover{color:var(--gold)}
.who{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px}
.crest{display:inline-block;width:12px;height:12px;border-radius:2px;transform:rotate(45deg);margin-right:6px}

/* layout */
.grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;align-items:start}
.world{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:0}
.zonebar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.zonebar h2{font-size:24px}
.zsub{color:var(--muted);font-size:13px}
.zlore{margin:4px 0 0;color:var(--muted);font-size:12.5px;font-style:italic;max-width:62ch;line-height:1.4}
.zlore:empty{display:none}
.zbtns{display:flex;gap:6px;flex-wrap:wrap}
.scene{position:relative;aspect-ratio:16/7;max-width:100%;border:1px solid var(--bronze-d);border-radius:6px;overflow:hidden;background:#223}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.statusline{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-weight:700;font-size:14px;text-shadow:0 1px 3px #000;pointer-events:none}
.errtext{position:absolute;left:0;right:0;top:8px;text-align:center;color:#ff3b30;font-weight:800;text-shadow:0 1px 2px #000;pointer-events:none;font-size:15px}

/* unit frames */
.units{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unit{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;align-items:center;background:var(--stone2);border:1px solid var(--bronze-d);border-radius:30px 8px 8px 30px;padding:5px 10px 5px 5px;min-width:0}
.unit.target{grid-template-columns:minmax(0,1fr) 50px;border-radius:8px 30px 30px 8px;padding:5px 5px 5px 10px}
.portrait{width:50px;height:50px;border-radius:50%;border:2px solid var(--bronze);background:#000;position:relative;display:grid;place-items:center;font-family:var(--f-head);font-size:22px;color:var(--fg);overflow:hidden}
.portrait.elite{border-color:var(--gold);box-shadow:0 0 0 2px #6b4b10,0 0 10px rgba(242,193,78,.6)}
.lvl{position:absolute;bottom:-1px;right:-1px;background:#000;border:1px solid var(--bronze);border-radius:50%;width:20px;height:20px;font-size:11px;display:grid;place-items:center;font-family:var(--f-body);font-weight:800}
.uname{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{position:relative;height:14px;background:#000;border:1px solid #3a3022;border-radius:2px;overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;transition:width .12s linear}
.bar span{position:absolute;inset:0;font-size:11px;font-weight:800;display:grid;place-items:center;text-shadow:0 1px 1px #000}
.b-hp i{background:linear-gradient(#45d64f,#1f8a28)} .b-mana i{background:linear-gradient(#4f8cff,#1f4fb0)}
.b-rage i{background:linear-gradient(#ef4a44,#8f1d1a)} .b-energy i{background:linear-gradient(#f3d64a,#a88d10)}
.b-cast i{background:linear-gradient(#f2c14e,#a5781a)}
.cps{display:flex;gap:3px;margin-top:3px;height:8px}
.cps b{width:14px;height:8px;border-radius:2px;background:#3a2b10;border:1px solid #6b5020}
.cps b.on{background:#ffcf3a}

/* action bar */
.abar{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--stone2);border:1px solid var(--bronze-d);border-radius:8px;padding:8px}
.slots{display:flex;gap:6px;flex-wrap:wrap}
.ab{position:relative;width:54px;height:54px;border:2px solid var(--bronze);border-radius:6px;background:linear-gradient(#3a2f22,#18130d);padding:0;overflow:hidden;display:grid;place-items:center;text-align:center}
.ab .ic{font-family:var(--f-head);font-size:13px;line-height:1.05;padding:2px;color:var(--fg)}
.ab .key{position:absolute;top:1px;left:4px;font-size:11px;font-weight:800;color:var(--muted)}
.ab .cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.72) var(--p,0%),transparent 0);pointer-events:none}
.ab .cdn{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:16px;text-shadow:0 1px 2px #000;pointer-events:none}
.ab.nores .ic{color:#6d8bd6}
.ab.unusable{filter:grayscale(.8) brightness(.6)}
.ab.react{border-color:#ffe36a;box-shadow:0 0 12px #ffd23a;animation:pulse .6s ease-in-out infinite alternate}
.ab.locked{opacity:.35}
@keyframes pulse{to{box-shadow:0 0 22px #ffd23a}}
.mode{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.seg{display:inline-flex;border:2px solid var(--bronze);border-radius:6px;overflow:hidden}
.seg button{border:0;background:var(--stone3);padding:6px 14px;font-weight:800}
.seg button.on{background:var(--gold);color:#2a1d00}
.modehint{font-size:12px;color:var(--muted);text-align:right;max-width:34ch}
.engaged{color:#7cf08a;font-weight:800}

/* xp */
.xp{position:relative;height:16px;background:#000;border:1px solid var(--bronze-d);border-radius:3px;overflow:hidden}
.xp i{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(#a65be8,#5e1f99)}
.xp em{position:absolute;top:0;bottom:0;background:rgba(58,139,255,.45);border-right:2px solid #3a8bff}
.xp span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;text-shadow:0 1px 2px #000}
.xpticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),rgba(0,0,0,.6) calc(5% - 1px) 5%)}

/* loot + log */
.lootwin{background:var(--stone2);border:1px solid var(--gold);border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.lootwin ul{list-style:none;margin:0;padding:0;font-size:14px}
.log{background:rgba(0,0,0,.45);border:1px solid #2a2218;border-radius:6px;padding:6px 10px;font-size:13px;height:118px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-hit{color:#e9e1cf} .l-crit{color:#ffd24a} .l-hurt{color:#ff8a7a} .l-sys{color:#ffe36a} .l-xp{color:#b48cff} .l-loot{color:#7cf08a} .l-heal{color:#7cf08a} .l-pet{color:#d9f7a8} .l-say{color:#8fd0ff} .l-party{color:#cfe3ff} .l-warn{color:#ff8a2a;font-weight:800}

/* menus */
.menu{min-width:0}
.tabs{display:flex;gap:2px;flex-wrap:wrap;padding:8px 8px 0;border-bottom:2px solid var(--bronze-d)}
.tabs button{background:var(--stone2);border:1px solid var(--bronze-d);border-bottom:0;border-radius:6px 6px 0 0;padding:6px 11px;font-weight:700;color:var(--muted);display:flex;gap:5px;align-items:center}
.tabs button[aria-selected="true"]{background:var(--stone3);color:var(--gold)}
.badge{background:#c0392b;color:#fff;border-radius:999px;font-size:11px;padding:0 6px;font-weight:800}
.tb{padding:12px 14px}
.tb h3{font-size:20px;margin-bottom:4px}
.sub{color:var(--muted);font-size:13px;margin:0 0 10px;max-width:62ch}
h4{margin:14px 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.btn{background:linear-gradient(#5a1e12,#33100a);border:1px solid var(--bronze);border-radius:5px;padding:5px 12px;font-weight:800;color:#ffd890}
.btn:hover:not(:disabled){border-color:var(--gold)}
.btn:disabled{opacity:.4;cursor:default}
.btn.sm{padding:2px 8px;font-size:13px}
.btn.alt{background:var(--stone3);color:var(--fg)}
.btn.armed{background:#8f1d1a;color:#fff}
.rowl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #2a2218}
.rowl:last-child{border-bottom:0}
.rowl .l{min-width:0}
.rowl .r{display:flex;gap:6px;flex-shrink:0;align-items:center}
.meta{font-size:12.5px;color:var(--muted)}
.qtitle{font-weight:800;color:#ffd24a}
.qtitle.done{color:#7cf08a}
.qtext{font-size:13px;color:#d5c9ac;font-style:italic;margin:2px 0}
.prog{font-size:13px}
.pill{font-size:11px;font-weight:800;padding:0 6px;border-radius:4px;border:1px solid currentColor}
.slotrow{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid #2a2218}
.slotrow .sl{font-size:12px;color:var(--muted);text-transform:capitalize}
.item{cursor:help;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 16px;font-size:14px}
.stats div{display:flex;justify-content:space-between;border-bottom:1px dotted #3a3022}
.tal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #2a2218}
.rank{font-weight:800;color:#7cf08a;font-size:13px}
.tgl{width:42px;height:22px;border-radius:999px;border:1px solid var(--bronze);background:#000;position:relative;padding:0}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:left .12s}
.tgl[aria-pressed="true"]{background:#1f5a24}
.tgl[aria-pressed="true"]::after{left:22px;background:#7cf08a}
textarea{width:100%;min-height:60px;background:#000;color:var(--fg);border:1px solid var(--bronze-d);border-radius:4px;font-size:11px;padding:6px}

/* tooltip */
.tip{position:fixed;z-index:50;max-width:290px;background:rgba(8,10,24,.96);border:1px solid #6a7aa8;border-radius:5px;padding:8px 10px;font-size:13.5px;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.tip .tn{font-weight:800;font-size:15px}
.tip .gold{color:#ffd24a}
.tip .up{color:#7cf08a} .tip .down{color:#ff6a5a}

/* modal + create */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.sheet{max-width:860px;width:100%;max-height:calc(100% - 32px);overflow:auto;padding:18px}
.sheet h2{font-size:30px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:8px 0 14px}
.choice{text-align:left;background:var(--stone2);border:2px solid var(--bronze-d);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:4px}
.choice:hover{border-color:var(--bronze)}
.choice.on{border-color:var(--gold);background:#2d2414}
.choice b{font-family:var(--f-head);font-weight:400;font-size:19px;color:var(--gold)}
.choice span{font-size:13px;color:var(--muted)}
.nameinp{background:#000;border:1px solid var(--bronze);border-radius:4px;color:var(--fg);padding:6px 10px;font-size:16px;font-weight:700;width:220px}
.mfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap}
.toasts{position:fixed;left:50%;transform:translateX(-50%);top:14px;display:flex;flex-direction:column;gap:6px;z-index:45;pointer-events:none;align-items:center}
.toast{background:rgba(0,0,0,.8);border:1px solid var(--bronze);border-radius:6px;padding:6px 14px;font-weight:800;color:#ffe36a;text-shadow:0 1px 2px #000;animation:tin .25s ease-out}
.toast.ding{font-family:var(--f-head);font-weight:400;font-size:26px;color:var(--gold);border-color:var(--gold)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}

/* pets */
.petframe{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--stone2);border:1px solid var(--bronze-d);border-radius:8px;padding:5px 10px}
.petframe .pn{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.petframe .bar{height:10px;margin-top:2px}
.petframe .mood{font-size:12px;font-weight:800;white-space:nowrap}
.tamebtn{margin-top:4px;background:linear-gradient(#2f5a1e,#163010);border:1px solid #7cf08a;border-radius:5px;color:#c8ffc8;font-weight:800;padding:2px 10px;font-size:13px}
.r0{color:#d8d8d8} .r1{color:var(--q2)} .r2{color:var(--q3)} .r3{color:var(--q4)} .r4{color:var(--q5)} .r5{color:#ff4f8b}
.petcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;background:var(--stone2);border:1px solid var(--bronze-d);border-radius:8px;padding:10px}
.petcard canvas{width:96px;height:72px;image-rendering:pixelated;background:#11161a;border:1px solid var(--bronze-d);border-radius:4px}
.petname{font-family:var(--f-head);font-size:22px;line-height:1.1}
.mini{height:10px;background:#000;border:1px solid #3a3022;border-radius:2px;overflow:hidden;margin:3px 0 6px}
.mini i{display:block;height:100%}
.traits{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.trait{font-size:12px;border:1px solid var(--bronze-d);border-radius:4px;padding:0 6px;background:var(--stone3)}
.rarlegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;font-weight:800}
.petinp{background:#000;border:1px solid var(--bronze);border-radius:4px;color:var(--fg);padding:2px 6px;font-weight:700;width:140px}

/* party + people */
.party{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.pm{background:var(--stone2);border:1px solid var(--bronze-d);border-radius:6px;padding:4px 8px;min-width:0}
.pm .pn{font-weight:800;font-size:13px;display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden}
.pm .role{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pm .bar{height:9px;margin-top:2px}
.pm.dead{opacity:.45}
.enccard{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(90deg,#1c2a3a,var(--stone2));border:1px solid #6a8ab0;border-radius:8px;padding:7px 10px}
.enccard .who2{font-size:14px}
.enccard .who2 b{font-family:var(--f-head);font-weight:400;font-size:18px}
.enccard .acts2{display:flex;gap:6px;flex-wrap:wrap}
.ab.special{width:auto;min-width:86px;padding:0 10px;border-color:#7cf08a}
.ab.special .ic{font-family:var(--f-body);font-weight:800;font-size:13px}
.ab.dodge{border-color:#ff8a2a;box-shadow:0 0 14px #ff8a2a;animation:pulse .4s ease-in-out infinite alternate}
.ab.combo{border-color:#8fd0ff;box-shadow:0 0 14px #8fd0ff;animation:pulse .5s ease-in-out infinite alternate}
.aff{height:6px;background:#000;border:1px solid #3a3022;border-radius:2px;overflow:hidden;margin-top:3px;max-width:220px}
.aff i{display:block;height:100%;background:linear-gradient(90deg,#8fd0ff,#b55cf0)}
.lfgrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--bronze-d);border-radius:6px;margin-bottom:5px;background:var(--stone2);text-align:left;width:100%}
.lfgrow.on{border-color:var(--gold);background:#2d2414}

@media (max-width:980px){.grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.units{grid-template-columns:1fr}.ab{width:46px;height:46px}.ab .ic{font-size:11px}}
@media (prefers-reduced-motion:reduce){.ab.react{animation:none}.toast{animation:none}.bar i{transition:none}}
/* Big screens (L11; Evan plays on a 3440x1440 ultrawide): use the space. The scene gets most of it and grows wider; everything
   around it (header, panels, bars, buttons, pop-ups) scales up with CSS zoom so it stays readable (the canvas itself never
   zooms, so taps on the world map stay exact).
   on ultrawides (more of the zone, and more of the town when you walk it); panels stay readable; text grows a little. */
/* Text size from the shared settings (L1): --arc-text is 1, 1.15 or 1.3, and multiplies the big-screen zoom below. */
.top,.menu,.world>:not(.scene),.sheet{zoom:var(--arc-text, 1)}
@media (min-width:1700px){.app{max-width:min(2300px,94vw)}.grid{grid-template-columns:minmax(0,1.8fr) minmax(440px,1fr)}.scene{aspect-ratio:2/1}.top,.menu,.world>:not(.scene),.sheet{zoom:calc(1.12 * var(--arc-text, 1))}}
@media (min-width:2400px){.app{max-width:min(3100px,95vw)}.grid{grid-template-columns:minmax(0,2.3fr) minmax(520px,1fr)}.scene{aspect-ratio:21/9}.top,.menu,.world>:not(.scene),.sheet{zoom:calc(1.32 * var(--arc-text, 1))}}
@media (min-width:1700px) and (max-height:900px){.scene{aspect-ratio:21/8}}

/* Optional milestone guidance sits outside the world canvas and never blocks its controls. */
.road-guide{border:1px solid var(--bronze-d);border-left:3px solid var(--gold);border-radius:6px;padding:10px 14px;background:var(--stone2)}
.road-guide h3{font-family:var(--f-head);font-weight:400;color:var(--gold);font-size:20px;margin:0 0 4px}
.road-guide p{margin:0 0 8px;line-height:1.4;overflow-wrap:anywhere}
.road-acts{display:flex;gap:8px;flex-wrap:wrap}
.road-guide[hidden]{display:none}

#arrivalControls[hidden]{display:none}

/* Personal story controls keep the whole line readable on phones. */
@media (max-width:520px){.member-story{flex-wrap:wrap;align-items:flex-start}.member-story .l{width:100%}.member-story .r{width:100%;justify-content:flex-end}}

@media (max-width:520px){.scene:has(.member-story-dialogue:not([hidden])){min-height:560px;aspect-ratio:auto}}

@media(max-width:520px){.scene:has(.town-service-dialogue:not([hidden])){min-height:420px;aspect-ratio:auto}}

.guild-craft-preview{font-size:13px;line-height:1.4;border-block:1px solid #896b32;padding:6px 0;margin:6px 0}.craft-unavailable{color:#ffe0a8;margin-top:4px}
@media(max-width:520px){.scene:has(.guild-craft-preview){min-height:480px;aspect-ratio:auto}}

/* RB1.12a: short, readable objectives inside the carried Journal. */
.thornvale-requests{border:1px solid var(--gold);border-radius:8px;padding:10px;margin:8px 0 14px}
.thornvale-requests .rowl{flex-wrap:wrap;align-items:center}
.thornvale-requests .l{flex:1 1 150px;overflow-wrap:anywhere}
.thornvale-requests button{min-height:44px;flex-shrink:0}

/* Shared first-journey presenter, using the existing Road note surface. */
.road-guide .onboarding-action,.road-guide .onboarding-dismiss{background:var(--stone2);color:var(--gold);border:1px solid var(--bronze-d);border-radius:5px}
#roadNextGoal{display:inline-block;max-width:220px;margin-inline-start:.5em;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;font-size:.85em;font-weight:400}
#roadNextGoal[hidden]{display:none}