/* Realms of Elo - dark fantasy theme */
:root {
  --bg: #120d0a; --bg2: #1b1410; --panel: #221a14; --panel2: #2b2119; --line: #4a3a2a; --line2: #6b5235;
  --ink: #eadfc8; --ink2: #bfae8f; --mute: #8a7a62; --gold: #e2b35b; --gold2: #f5d58e; --red: #d4573d; --red2: #ff7a5c;
  --green: #6fbf73; --blue: #5aa7e6; --purple: #b07ae8; --orange: #ff9d2e; --hp: #c8423a; --en: #3f8fd6; --xp: #c9a227;
  --r-common: #c9c9c9; --r-uncommon: #4fd16b; --r-rare: #4aa3ff; --r-epic: #b05cff; --r-legendary: #ff9d2e;
  --shadow: 0 10px 30px rgba(0,0,0,.55); --radius: 10px;
  --title: 'Cinzel', 'Trajan Pro', Georgia, serif; --deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif; --body: 'EB Garamond', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; }
body { background: radial-gradient(ellipse at top, #2a1d14 0%, var(--bg) 60%) fixed; overflow-x: hidden; }
a { color: var(--gold2); }
button { font-family: var(--title); }
input, select, textarea { font-family: var(--body); font-size: 16px; background: #120d09; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,179,91,.2); }
h1, h2, h3, h4 { font-family: var(--title); color: var(--gold2); margin: .2em 0 .5em; letter-spacing: .03em; }
h1 { font-family: var(--deco); font-size: clamp(28px, 6vw, 54px); text-shadow: 0 2px 0 #000, 0 0 30px rgba(226,179,91,.35); }
.muted { color: var(--mute); } .small { font-size: 14px; } .tiny { font-size: 12px; } .center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; } .right { margin-left: auto; } .hidden { display: none !important; }
.boot { display: grid; place-items: center; height: 100vh; gap: 20px; align-content: center; }
.boot-title { font-family: var(--deco); font-size: 48px; color: var(--gold2); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line2); cursor: pointer;
  color: var(--ink); background: linear-gradient(#3a2b1e, #261b13); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; transition: .15s; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); min-height: 40px; }
.btn:hover { border-color: var(--gold); color: var(--gold2); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#b9862f, #7c5418); border-color: #e2b35b; color: #fff7e2; text-shadow: 0 1px 0 #000; }
.btn.primary:hover { background: linear-gradient(#d39d3c, #8f611c); color: #fff; }
.btn.danger { background: linear-gradient(#7a2a1d, #4c160e); border-color: #b5442e; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; min-height: 30px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: #1a130e; font-size: 13px; color: var(--ink2); }
.chip.gold { color: var(--gold2); border-color: #7c5c2a; } .chip.red { color: var(--red2); border-color: #7a2a1d; } .chip.green { color: var(--green); border-color: #2f6b33; } .chip.blue { color: var(--blue); border-color: #2a5379; }

/* panels */
.panel { background: linear-gradient(180deg, rgba(43,33,25,.96), rgba(28,21,16,.96)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: relative; }
.panel.ornate::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(226,179,91,.18); border-radius: 7px; pointer-events: none; }
.card { background: #1d1611; border: 1px solid var(--line); border-radius: 8px; padding: 12px; transition: .15s; }
.card.click { cursor: pointer; } .card.click:hover { border-color: var(--gold); transform: translateY(-2px); }
.card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,179,91,.35), 0 0 20px rgba(226,179,91,.15); }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid.sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid.xs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); margin: 14px 0; }
.page { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tab { padding: 8px 14px; cursor: pointer; font-family: var(--title); font-size: 13px; color: var(--ink2); border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; letter-spacing: .04em; }
.tab.on { color: var(--gold2); background: var(--panel2); border-color: var(--line); }
.label { font-family: var(--title); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* landing */
.hero-bg { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; position: relative; overflow: hidden; }
.hero-bg canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth { width: min(420px, 100%); z-index: 1; }
.tagline { font-style: italic; color: var(--ink2); margin-top: -6px; }
.features { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 14px; }
.feature { font-size: 14px; color: var(--ink2); padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }

/* top nav */
.nav { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(18,13,10,.85); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; }
.brand { font-family: var(--deco); color: var(--gold2); font-size: 20px; cursor: pointer; white-space: nowrap; }

/* portraits */
.portrait { position: relative; border-radius: 10px; overflow: hidden; background: #0c0907; border: 2px solid #5b4630; flex: none; box-shadow: inset 0 0 20px rgba(0,0,0,.6); }
.portrait > .sil, .portrait > img, .portrait > .micon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait > img { opacity: 0; transition: opacity .6s ease; } .portrait > img.ok { opacity: 1; }
.portrait > .sil::after { content: ''; } .portrait:not(:has(img.ok)) > .sil { animation: shimmer 1.6s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .55; } }
.portrait > .micon { display: grid; place-items: center; font-size: 2.2em; }
.portrait::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 18px rgba(0,0,0,.65); border-radius: 8px; pointer-events: none; }
.portrait.r-legendary { border-color: var(--orange); }
.pt-xs { width: 34px; height: 34px; border-radius: 7px; } .pt-sm { width: 56px; height: 56px; } .pt-md { width: 88px; height: 88px; } .pt-lg { width: 140px; height: 140px; } .pt-xl { width: 200px; height: 240px; }

/* hero cards */
.hcard { display: flex; gap: 10px; align-items: flex-start; }
.hcard .name { font-family: var(--title); color: var(--gold2); font-size: 15px; line-height: 1.15; }
.hcard .sub { color: var(--ink2); font-size: 13px; }
.bar { height: 8px; background: #0b0806; border-radius: 4px; overflow: hidden; border: 1px solid #000; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; display: block; transition: width .4s ease; }
.bar.hp > i { background: linear-gradient(90deg, #8e1f1a, var(--hp), #e2665c); }
.bar.en > i { background: linear-gradient(90deg, #1d4f80, var(--en), #7cc0ff); }
.bar.xp > i { background: linear-gradient(90deg, #7b5e12, var(--xp)); }
.bar.doom > i { background: linear-gradient(90deg, #3a0d2e, #8c1f6b, #ff3c7a); }
.bar.lg { height: 12px; }

/* game layout */
.game { display: grid; grid-template-columns: 290px 1fr 330px; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }
.gtop { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(#21180f, #150f0b); flex-wrap: wrap; }
.gleft, .gright { overflow-y: auto; padding: 10px; border-right: 1px solid var(--line); background: rgba(20,15,11,.9); }
.gright { border-right: none; border-left: 1px solid var(--line); }
.gcenter { position: relative; overflow: hidden; background: #0b1520; }
.gcenter canvas.map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.stat-pill { display: flex; align-items: center; gap: 6px; font-family: var(--title); font-size: 13px; color: var(--ink2); padding: 4px 10px; background: #120d09; border: 1px solid var(--line); border-radius: 999px; }
.stat-pill b { color: var(--gold2); font-weight: 700; }
.doomwrap { min-width: 140px; }
.mapbtns { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.mapbtns .btn { width: 44px; height: 44px; padding: 0; font-size: 18px; }
.maphud { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 80px); }
.region-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; pointer-events: none; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.region-banner .rn { font-family: var(--title); color: var(--gold2); font-size: 20px; }
.region-banner .rs { color: var(--ink2); font-size: 14px; }
.tooltip { position: absolute; pointer-events: none; z-index: 5; background: rgba(15,11,8,.95); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 10px; font-size: 14px; max-width: 240px; }
.mobile-tabs { display: none; }

.party-card { padding: 8px; margin-bottom: 8px; cursor: pointer; }
.party-card .bars { display: grid; gap: 3px; margin-top: 5px; }
.party-card .lvlup { color: var(--gold2); font-size: 12px; animation: glow 1.4s ease-in-out infinite; }
.party-card.dead { opacity: .45; filter: grayscale(1); }
@keyframes glow { 50% { text-shadow: 0 0 10px var(--gold); } }
.seat { font-size: 11px; color: var(--blue); font-family: var(--title); letter-spacing: .05em; }

/* scene overlay */
.scene { position: absolute; inset: 0; z-index: 10; display: grid; justify-items: center; align-items: start; padding: 16px; background: rgba(5,4,3,.55); backdrop-filter: blur(2px); overflow-y: auto; }
/* centred with auto margins: a card taller than the screen scrolls from its top instead of being cut off above it */
.scene > * { margin-block: auto; }
.scene-card { width: min(760px, 100%); border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0,0,0,.8); background: #17110c; animation: rise .35s ease; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.scene-art { height: 190px; position: relative; overflow: hidden; }
.scene-art svg { width: 100%; height: 100%; display: block; }
.scene-art .art-title { position: absolute; left: 18px; bottom: 12px; font-family: var(--title); font-size: clamp(20px, 4vw, 30px); color: #fff3d6; text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.scene-body { padding: 18px 20px 20px; }
.scene-text { font-size: 19px; line-height: 1.55; color: var(--ink); }
.scene-text p { margin: 0 0 .6em; }
.choices { display: grid; gap: 8px; margin-top: 14px; }
.choice { text-align: left; display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line); background: linear-gradient(90deg, #2a1f16, #1c1510); cursor: pointer; color: var(--ink); font-family: var(--body); font-size: 17px; transition: .15s; }
.choice:hover { border-color: var(--gold); background: linear-gradient(90deg, #3a2a1b, #1f1711); transform: translateX(3px); }
.choice .num { font-family: var(--title); color: var(--gold); min-width: 20px; }
.choice .meta { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.choice.locked { opacity: .5; cursor: not-allowed; }
.choice.voted { border-color: var(--blue); }
.result-lines { display: grid; gap: 6px; }
.result-lines .ln { padding: 6px 10px; border-left: 3px solid var(--line2); background: rgba(255,255,255,.02); border-radius: 0 6px 6px 0; }
.result-lines .ln.roll { border-color: var(--blue); color: #cfe3f7; font-size: 15px; }
.result-lines .ln.pick { border-color: var(--gold); color: var(--gold2); font-style: italic; }
.result-lines .ln.good { border-color: var(--green); }
.result-lines .ln.bad { border-color: var(--red); }
.result-lines .ln.loot { border-color: var(--purple); }

/* town */
.town-head { display: flex; gap: 14px; align-items: center; }
.svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.svc .card { text-align: center; padding: 14px 8px; }
.svc .ico { font-size: 30px; }
.item { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: #1a130e; cursor: pointer; }
.item:hover { border-color: var(--gold); }
.item .iname { font-family: var(--title); font-size: 13px; }
.item .idesc { font-size: 12px; color: var(--ink2); }
.item .fit { color: var(--ink2); opacity: .85; }
.rar-mythic { color: #ff4d6d; text-shadow: 0 0 8px rgba(255, 77, 109, .55); }
.bd-mythic { border-color: #c2183c !important; box-shadow: 0 0 12px rgba(255, 60, 100, .35), inset 0 0 10px rgba(255, 60, 100, .12); }
.item .fit.no { color: #d88; }
.icon { width: 38px; height: 38px; border-radius: 7px; display: grid; place-items: center; font-size: 22px; flex: none; background: radial-gradient(circle at 30% 30%, #3a2c1f, #120d09); border: 1px solid #000; }
.rar-common { color: var(--r-common); } .rar-uncommon { color: var(--r-uncommon); } .rar-rare { color: var(--r-rare); } .rar-epic { color: var(--r-epic); } .rar-legendary { color: var(--r-legendary); }
.bd-uncommon { border-color: #2f6b3a !important; } .bd-rare { border-color: #2a5c8f !important; } .bd-epic { border-color: #6a3a9a !important; } .bd-legendary { border-color: #a8651d !important; box-shadow: 0 0 12px rgba(255,157,46,.2); }

/* dungeon map */
.dmap { position: relative; width: 100%; overflow-x: auto; padding: 10px 0; }
.dmap svg { display: block; margin: 0 auto; }
.dnode { cursor: default; }
.dnode.reach { cursor: pointer; }
.dnode.reach circle { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { stroke-width: 4; } }

/* combat */
.combat { position: absolute; inset: 0; z-index: 12; display: grid; grid-template-rows: 1fr auto; background: #0d0907; }
.combat-field { position: relative; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-rows: auto auto; align-content: space-evenly; padding: 46px 10px 10px; gap: 14px; }
.combat > .bgart { position: absolute; inset: 0; z-index: 0; opacity: .9; pointer-events: none; }
.combat > .bgart svg { width: 100%; height: 100%; }
.combat { overflow: hidden; } .combat-field, .combat-bar { position: relative; z-index: 1; }
.side { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.rowline { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.unit { position: relative; width: 112px; padding: 6px; border-radius: 10px; background: rgba(18,13,10,.85); border: 1px solid var(--line); text-align: center; transition: transform .2s; }
.unit.enemy .uicon { font-size: 44px; line-height: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.unit.boss { width: 150px; border-color: var(--red); box-shadow: 0 0 20px rgba(212,87,61,.35); }
.unit.boss .uicon { font-size: 64px; height: 84px; line-height: 84px; }
.unit.elite { border-color: var(--purple); }
.unit .uname { font-family: var(--title); font-size: 11px; line-height: 1.2; height: 27px; overflow: hidden; }
.unit.current { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(226,179,91,.5); transform: translateY(-4px); }
.unit.targetable { cursor: crosshair; border-color: var(--red2); animation: pulse2 1s infinite; }
@keyframes pulse2 { 50% { box-shadow: 0 0 18px rgba(255,122,92,.6); } }
.unit.down { opacity: .3; filter: grayscale(1); }
.unit .sts { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; min-height: 18px; font-size: 13px; }
.unit .combo { position: absolute; top: -8px; right: -8px; background: var(--gold); color: #000; border-radius: 999px; font-family: var(--title); font-size: 12px; padding: 1px 7px; }
.unit.hit { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.floater { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: var(--title); font-weight: 900; font-size: 24px; pointer-events: none; text-shadow: 0 2px 0 #000, 0 0 8px #000; animation: floatup 1.3s ease-out forwards; z-index: 5; white-space: nowrap; }
.floater.dmg { color: #ff6b57; } .floater.crit { color: #ffd34d; font-size: 32px; } .floater.heal { color: #7dff8e; } .floater.miss { color: #c8c8c8; font-size: 16px; } .floater.status { font-size: 22px; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
.combat-bar { background: linear-gradient(#211810, #150f0a); border-top: 1px solid var(--line2); padding: 10px; display: grid; grid-template-columns: 1fr 300px; gap: 10px; max-height: 46vh; }
.actions { overflow-y: auto; }
.abil { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; margin: 3px; border-radius: 8px; border: 1px solid var(--line); background: #1e160f; cursor: pointer; color: var(--ink); min-width: 120px; max-width: 200px; text-align: left; font-family: var(--body); }
.abil:hover { border-color: var(--gold); }
.abil.on { border-color: var(--gold); background: #3a2a18; }
.abil.martial { border-color: #5a3f6b; } .abil.finisher { border-color: #a8651d; }
.abil .an { font-family: var(--title); font-size: 12px; color: var(--gold2); }
.abil .ad { font-size: 12px; color: var(--ink2); line-height: 1.2; }
.abil.dis { opacity: .4; pointer-events: none; }
.clog { overflow-y: auto; font-size: 14px; background: #0f0b08; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.clog div { padding: 1px 0; }
.clog .head, .clog .round { color: var(--gold); font-family: var(--title); font-size: 12px; margin-top: 4px; }
.clog .crit { color: #ffd34d; } .clog .kill, .clog .win { color: var(--green); } .clog .lose, .clog .bad, .clog .ehit { color: #ff8f7a; } .clog .heal { color: #8fe39a; } .clog .funny { color: var(--purple); } .clog .level { color: var(--gold2); } .clog .miss, .clog .info { color: var(--mute); }
.turn-banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4; background: rgba(15,11,8,.9); border: 1px solid var(--gold); padding: 4px 14px; border-radius: 999px; font-family: var(--title); font-size: 14px; color: var(--gold2); white-space: nowrap; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .2s; overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(900px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal .x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--ink2); font-size: 22px; cursor: pointer; }

/* sheet */
.statgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.statbox { text-align: center; padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px; background: #17110c; }
.statbox .sv { font-family: var(--title); font-size: 22px; color: var(--gold2); }
.statbox .sm { font-size: 13px; color: var(--ink2); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.slot { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px dashed var(--line); border-radius: 8px; min-height: 52px; }
.slot.filled { border-style: solid; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 15px; }
.kv b { color: var(--ink2); font-weight: 600; }
.style-card { border: 1px solid #4a3560; background: linear-gradient(135deg, #20162a, #17110c); }
.rank { color: var(--gold); letter-spacing: 2px; }

/* creator */
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.step { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--title); font-size: 12px; color: var(--mute); cursor: pointer; }
.step.on { color: #000; background: var(--gold); border-color: var(--gold); }
.step.done { color: var(--gold2); border-color: #7c5c2a; }
.pb { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pb .card { text-align: center; }
.pb .val { font-family: var(--title); font-size: 30px; color: var(--gold2); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 330px; overflow-y: auto; padding: 4px; }
.gallery .portrait { width: 100%; height: auto; aspect-ratio: 1; cursor: pointer; }
.gallery .portrait.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.preview { position: sticky; top: 70px; }

/* toasts */
#toasts { position: fixed; right: 14px; bottom: 14px; z-index: 100; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 28px)); }
.toast { background: rgba(26,19,14,.97); border: 1px solid var(--line2); border-left: 4px solid var(--gold); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); animation: rise .3s; font-size: 15px; }
.toast.err { border-left-color: var(--red); }

/* chronicle */
.chron { display: grid; gap: 8px; }
.chron .ce { padding: 8px 10px; border-left: 3px solid var(--line2); background: rgba(255,255,255,.02); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.4; }
.chron .ce .d { font-family: var(--title); font-size: 11px; color: var(--mute); }
.chron .ce.story { border-color: var(--gold); } .chron .ce.world { border-color: var(--blue); } .chron .ce.death { border-color: var(--red); } .chron .ce.level { border-color: var(--xp); } .chron .ce.martial { border-color: var(--purple); } .chron .ce.ending { border-color: var(--orange); }
.saga-book { font-size: 18px; line-height: 1.7; columns: 2 340px; column-gap: 32px; }
.saga-book p:first-letter { font-family: var(--deco); font-size: 2.2em; float: left; line-height: .9; margin: 4px 6px 0 0; color: var(--gold2); }

/* responsive */
@media (max-width: 1100px) { .game { grid-template-columns: 250px 1fr; } .gright { display: none; } .gright.show { display: block; position: absolute; right: 0; top: 52px; bottom: 0; width: min(360px, 100%); z-index: 15; } }
@media (max-width: 760px) {
  body { font-size: 16px; }
  .game { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .gleft { display: none; } .gleft.show { display: block; position: absolute; left: 0; top: 52px; bottom: 56px; width: min(320px, 100%); z-index: 15; }
  .gright.show { top: 52px; bottom: 56px; }
  .mobile-tabs { display: flex; grid-column: 1; border-top: 1px solid var(--line); background: #150f0b; }
  .mobile-tabs button { flex: 1; background: none; border: none; color: var(--ink2); padding: 10px 4px; font-size: 12px; }
  .combat-bar { grid-template-columns: 1fr; max-height: 52vh; } .clog { max-height: 90px; }
  .unit { width: 84px; } .unit.enemy .uicon { font-size: 34px; height: 48px; line-height: 48px; } .unit.boss { width: 110px; } .unit .uname { font-size: 10px; }
  .statgrid { grid-template-columns: repeat(3, 1fr); }
  .scene-art { height: 140px; } .scene-text { font-size: 17px; }
  .gtop { gap: 6px; } .stat-pill { font-size: 12px; padding: 3px 8px; }
  #toasts { top: 10px; bottom: auto; right: 10px; left: 10px; max-width: none; }
}

/* battle modes */
.modebox { border: 1px solid var(--line2); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: #19120c; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.modebtn { font-family: var(--title); font-size: 16px; padding: 12px 6px; border-radius: 9px; border: 2px solid var(--line); background: #241a12; color: var(--ink); cursor: pointer; letter-spacing: .03em; }
.modebtn.on { border-color: var(--gold); background: #4a3418; color: var(--gold2); box-shadow: 0 0 14px rgba(226,179,91,.3); }
.modebtn[disabled] { opacity: .4; }
.modedesc { font-size: 16px; color: var(--ink2); margin: 8px 2px; min-height: 22px; }
.modego { width: 100%; font-size: 18px; min-height: 52px; }
.portrait.dead img, .portrait.dead .sil { filter: grayscale(1) brightness(.6); }

/* ---- travel panel: choose the way, watch the party walk */
.travel-panel { position: absolute; left: 12px; bottom: 12px; z-index: 9; width: min(440px, calc(100% - 84px)); max-height: calc(100% - 70px); display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); background: rgba(23,17,12,.94); box-shadow: 0 14px 40px rgba(0,0,0,.7); animation: rise .3s ease; }
.travel-panel .jv { position: relative; height: 128px; flex: none; }
.travel-panel.walking .tp-body { opacity: .5; pointer-events: none; transition: opacity .2s; }
.travel-panel .jvhost { position: absolute; inset: 0; }
.travel-panel .jv canvas { width: 100%; height: 100%; display: block; }
.travel-panel .jv-title { position: absolute; left: 12px; top: 8px; font-family: var(--title); color: #fff3d6; font-size: 17px; text-shadow: 0 2px 6px #000, 0 0 2px #000; pointer-events: none; }
.travel-panel .jv-title span { display: block; font-family: var(--body); font-size: 13px; color: #f0e2c0; }
.travel-panel .tp-toggle { position: absolute; right: 8px; top: 8px; }
.travel-panel .tp-body { padding: 10px 12px 12px; overflow-y: auto; }
.travel-panel.mini .tp-body { display: none; }
.travel-panel.mini { width: min(300px, calc(100% - 84px)); }
.travel-panel.mini .jv { height: 84px; }
.travel-panel .choices { margin-top: 6px; gap: 6px; }
.travel-panel .choice { padding: 8px 10px; font-size: 15px; }
.travel-panel .choice.picked { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,179,91,.3); }
.travel-panel .primary-choice { border-color: var(--gold); background: linear-gradient(90deg, #4a3518, #241a10); margin-bottom: 6px; width: 100%; }
.travel-panel .label { margin-top: 10px; }
.compass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px; border-radius: 9px;
  border: 1px solid var(--line); background: linear-gradient(180deg, #2a1f16, #1a140f); color: var(--ink); cursor: pointer; font-family: var(--body); transition: .15s; }
.cbtn b { font-size: 20px; color: var(--gold2); line-height: 1; }
.cbtn span { font-size: 11px; color: var(--ink2); }
.cbtn i { position: absolute; right: 6px; top: 3px; font-style: normal; font-size: 11px; color: var(--blue); }
.cbtn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.cbtn.camp { font-size: 22px; }
.cbtn.off { border: none; background: none; cursor: default; }
.cbtn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .travel-panel { left: 8px; right: 8px; width: auto; bottom: 64px; max-height: 62%; }
  .travel-panel.mini { width: auto; }
  .travel-panel .jv { height: 100px; }
}
.travel-panel .jv::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52px; background: linear-gradient(rgba(10,6,3,.55), transparent); pointer-events: none; }
.travel-panel .jv-title { z-index: 1; }
.travel-panel .tp-toggle { z-index: 2; }

/* ======================================================================== polish */
/* subtle parchment grain and warm light behind everything */
body { background:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(226,179,91,.12), transparent 70%),
  radial-gradient(ellipse at top, #2a1d14 0%, var(--bg) 60%) fixed; }
.gleft, .gright { background:
  linear-gradient(rgba(20,15,11,.93), rgba(16,12,9,.96)),
  repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px); }
.gtop, .nav { background: linear-gradient(180deg, #2a1e13, #160f0a 85%); box-shadow: 0 2px 0 rgba(226,179,91,.12), 0 6px 18px rgba(0,0,0,.45); position: relative; z-index: 15; }
.gtop::after, .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,179,91,.55), transparent); }
.stat-pill { background: linear-gradient(#22190f, #150f0a); border: 1px solid #4a3a26; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* buttons: gilded edges and a soft glow */
.btn { border-color: #6b5235; background: linear-gradient(180deg, #3d2d1f, #241a12); box-shadow: inset 0 1px 0 rgba(255,236,190,.09), 0 2px 6px rgba(0,0,0,.35); }
.btn:hover { box-shadow: inset 0 1px 0 rgba(255,236,190,.12), 0 0 0 1px rgba(226,179,91,.35), 0 4px 14px rgba(226,179,91,.15); }
.btn.primary { background: linear-gradient(180deg, #d9a443 0%, #a8761f 55%, #7c5418 100%); box-shadow: inset 0 1px 0 rgba(255,245,210,.5), 0 2px 10px rgba(226,179,91,.25); }
.btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255,245,210,.6), 0 0 18px rgba(226,179,91,.45); }

/* cards and panels */
.card { background: linear-gradient(180deg, #221a13, #19130e); box-shadow: inset 0 1px 0 rgba(255,236,190,.04); }
.card.click:hover { box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(226,179,91,.3); }
.party-card { border-radius: 10px; }
.party-card:hover { border-color: var(--line2); }
.party-card .bars { gap: 4px; }
.party-card .bar.hp { height: 10px; }
.bar { box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.bar > i::after { content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(255,255,255,.25), transparent); border-radius: 4px 4px 0 0; }

/* scene cards: an ornate gilded frame */
.scene { background: radial-gradient(ellipse at center, rgba(5,4,3,.35), rgba(5,4,3,.75)); }
.scene-card { position: relative; border: 1px solid #8a6a3a; box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(42,30,19,.95), 0 0 0 5px rgba(226,179,91,.35), 0 24px 70px rgba(0,0,0,.85); }
.scene-card::before, .scene-card::after { content: '❦'; position: absolute; z-index: 3; color: var(--gold); font-size: 18px; text-shadow: 0 0 6px #000; pointer-events: none; }
.scene-card::before { left: 10px; top: 6px; }
.scene-card::after { right: 10px; top: 6px; transform: scaleX(-1); }
.scene-art::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(transparent, rgba(23,17,12,.85)); pointer-events: none; }
.scene-art .art-title { z-index: 1; letter-spacing: .04em; }
.scene-body { background:
  linear-gradient(180deg, rgba(23,17,12,1), rgba(18,13,9,1)),
  repeating-linear-gradient(0deg, rgba(255,255,255,.01) 0 1px, transparent 1px 3px); }
.scene-text p:first-child::first-letter { font-family: var(--deco); font-size: 2.1em; float: left; line-height: .9; margin: 4px 4px 0 0; color: var(--gold2); text-shadow: 0 2px 0 #000; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--gold); }

/* choices: medallion numbers */
.choice { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,236,190,.05); }
.choice .num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; border: 1px solid #8a6a3a; background: radial-gradient(circle at 35% 30%, #4a3620, #1c140d); color: var(--gold2); font-size: 14px; flex: none; }
.choice:hover .num { border-color: var(--gold); box-shadow: 0 0 10px rgba(226,179,91,.4); }
.result-lines .ln { border-left-width: 3px; border-radius: 0 8px 8px 0; }
.result-lines .ln.loot { border-left-color: var(--orange); background: rgba(255,157,46,.06); }
.result-lines .ln.good { border-left-color: var(--green); background: rgba(111,191,115,.05); }
.result-lines .ln.bad { border-left-color: var(--red); background: rgba(212,87,61,.06); }

/* toasts */
.toast { background: linear-gradient(90deg, rgba(43,31,20,.98), rgba(26,19,14,.98)); border-color: #6b5235; box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6); }

/* tabs */
.tab.on { background: linear-gradient(180deg, #3a2a1b, #2b2119); box-shadow: inset 0 2px 0 var(--gold); }

/* modals */
.modal { border: 1px solid #8a6a3a; box-shadow: 0 0 0 4px rgba(42,30,19,.95), 0 0 0 5px rgba(226,179,91,.3), 0 30px 80px rgba(0,0,0,.9); }

/* options */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.optgroup { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.optgroup .label { margin-bottom: 2px; font-size: 13px; color: var(--gold2); }
.opt { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.opt > span { flex: 1; }
.opt select { min-width: 150px; }
.opt input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); }
.opt.range input { flex: 1.4; accent-color: var(--gold); }
.opt.range b { width: 30px; text-align: right; color: var(--gold2); font-family: var(--title); font-size: 13px; }
.travel-panel .jv.nojv { height: 46px; background: linear-gradient(90deg, #2a1e13, #1a130d); }
.travel-panel .jv.nojv canvas { display: none; }

/* captivity */
.captive-banner { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 4; }

/* large text and reduced motion (Options) */
html[data-text="large"] body { font-size: 19.5px; }
html[data-text="large"] .small { font-size: 16px; } html[data-text="large"] .tiny { font-size: 14px; }
html[data-text="large"] .scene-text { font-size: 21px; } html[data-text="large"] .choice { font-size: 19px; }
html.nomotion *, html.nomotion *::before, html.nomotion *::after { animation-duration: 0s !important; transition-duration: 0s !important; }

/* no white flashes: dark native controls (dropdown lists, scrollbars), no tap highlight, no replayed fade-ins */
:root { color-scheme: dark; }
* { -webkit-tap-highlight-color: transparent; }
select, select option, select optgroup { background-color: #1b1410; color: var(--ink); }
select:focus option:checked { background: #4a3620; }
button:focus { outline: none; } button:focus-visible, .choice:focus-visible, .cbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.scene.still, .scene.still .scene-card, .travel-panel.still { animation: none; }

/* ---------------- 3D (WebGL) */
.combat.c3d { grid-template-rows: minmax(300px, 1fr) auto auto; }
.combat.c3d .combat-bar { max-height: 38vh; }
.stage3d { position: relative; overflow: hidden; background: radial-gradient(#2a2018, #0d0907); min-height: 200px; }
.stage3d.off { display: none; }
.stage3d canvas, .jv3 canvas, .wd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s3-canvas { touch-action: none; }
.s3-wx { pointer-events: none; }
.s3-hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.s3-tag { position: absolute; left: 0; top: 0; width: 46px; height: 6px; margin-left: -23px; margin-top: -10px; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.25); border-radius: 3px; overflow: hidden; }
.s3-tag i { display: block; height: 100%; background: linear-gradient(#ff8a6a, #c8341c); transition: width .4s; }
.s3-tag.party i { background: linear-gradient(#9aff8a, #3a9a2a); }
.s3-tag.cur { box-shadow: 0 0 0 1px var(--gold), 0 0 10px var(--gold); }
.s3-float { position: absolute; transform: translate(-50%, -100%); font-family: var(--title); font-weight: 900; font-size: 26px; color: #ff7a5a; text-shadow: 0 2px 0 #000, 0 0 10px #000; animation: s3up 1.4s ease-out forwards; white-space: nowrap; }
.s3-float.crit { color: #ffd34d; font-size: 40px; animation-name: s3crit; }
.s3-float.heal { color: #7dff8e; } .s3-float.miss { color: #e0e0e0; font-size: 18px; letter-spacing: 2px; } .s3-float.status { font-size: 24px; }
@keyframes s3up { 0% { opacity: 0; margin-top: 10px; } 12% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -46px; } }
@keyframes s3crit { 0% { opacity: 0; transform: translate(-50%, -100%) scale(2.2); } 15% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1.1); } }
.s3-banner { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); font-family: 'Cinzel Decorative', var(--title); font-size: clamp(20px, 3.4vw, 34px); color: #ffe9b0; text-shadow: 0 0 18px rgba(255,170,60,.8), 0 3px 0 #000; opacity: 0; pointer-events: none; white-space: nowrap; }
.s3-banner.fin { color: #ffb070; text-shadow: 0 0 22px rgba(255,80,30,.9), 0 3px 0 #000; }
.s3-banner.go { animation: s3banner 1.6s ease-out; }
@keyframes s3banner { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); letter-spacing: 8px; } 15% { opacity: 1; transform: translateX(-50%) scale(1); letter-spacing: 1px; } 70% { opacity: 1; } 100% { opacity: 0; } }
.s3-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.s3-flash.go { animation: s3flash .35s ease-out forwards; }
@keyframes s3flash { to { opacity: 0; } }
.c3d .combat-field { padding: 6px 8px; gap: 6px; display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: stretch; justify-content: center; }
.c3d .combat-field .side { flex-direction: row; gap: 6px; }
.c3d .combat-field .side:first-of-type { order: 2; } .c3d .combat-field .side:last-of-type { order: 1; border-right: 1px solid var(--line2); padding-right: 6px; }
.c3d .rowline { flex-wrap: nowrap; gap: 6px; }
.c3d .unit { width: 84px; padding: 4px; }
.c3d .unit .portrait { width: 40px !important; height: 40px !important; }
.c3d .unit .uname { height: 14px; white-space: nowrap; text-overflow: ellipsis; }
.c3d .unit.boss { width: 96px; }
.c3d .unit.current { transform: none; }
.c3d .combat-field { position: static; }
.c3d .turn-banner { position: absolute; top: 8px; z-index: 5; }
.jv3 { position: absolute; inset: 0; }
/* wardrobe */
.wardrobe { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.1fr); gap: 14px; align-items: start; }
.wd-view { position: sticky; top: 0; }
.wd-stage { position: relative; height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: radial-gradient(#3a2a1a, #120d0a); }
.wd-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink2); padding: 20px; text-align: center; }
.wd-anims { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; justify-content: center; }
.wd-ctrl { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.wd-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.wd-row.col { flex-direction: column; align-items: flex-start; }
.wd-row .lbl, .wd-grid .lbl { font-family: var(--title); font-size: 12px; color: var(--gold2); min-width: 56px; }
.wd-row input[type=range] { flex: 1; min-width: 120px; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.wd-grid label { display: flex; flex-direction: column; gap: 2px; }
.wd-grid select, .wd-row select { width: 100%; max-width: 220px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); cursor: pointer; padding: 0; position: relative; }
.sw.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,179,91,.5); }
.sw.pick { display: grid; place-items: center; font-size: 12px; background: #2a2018; overflow: hidden; }
.sw.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips .chip { cursor: pointer; border: 1px solid var(--line2); background: #1a130d; color: var(--ink2); }
.chips .chip.on { background: #4a3618; color: #ffe9b0; border-color: var(--gold); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.seg button { background: none; border: none; color: var(--ink2); padding: 4px 14px; cursor: pointer; font-family: var(--title); }
.seg button.on { background: #4a3618; color: #ffe9b0; }
@media (max-width: 720px) {
  .wardrobe { grid-template-columns: 1fr; }
  .wd-view { position: static; }
  .wd-stage { height: 300px; }
  .wd-ctrl { max-height: none; }
  .combat.c3d { grid-template-rows: minmax(230px, 44vh) auto minmax(0, 1fr); }
  .combat.c3d .combat-bar { max-height: none; overflow-y: auto; }
  .c3d .unit { width: 72px; }
}
/* scene pictures made from the Blender panoramas */
.pano-art { position: absolute; inset: 0; background-repeat: repeat-x, no-repeat; background-size: auto 190%, 100% 100%; background-position: var(--px, 0%) 75%, 0 0; animation: panodrift 90s linear infinite; }
.pano-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.pano-art.night::before { content: ''; position: absolute; inset: 0; background: rgba(10,18,60,.45); mix-blend-mode: multiply; }
.pano-art.dusk::before { content: ''; position: absolute; inset: 0; background: rgba(255,140,60,.18); mix-blend-mode: soft-light; }
@keyframes panodrift { from { background-position-x: var(--px, 0%), 0; } to { background-position-x: calc(var(--px, 0%) - 600px), 0; } }
.nomotion .pano-art { animation: none; }

/* face customization in the hero creator */
.face-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.face-opts label { display: flex; flex-direction: column; gap: 3px; font-size: .85em; }

/* ---- playing together: friends, guilds, rankings, world boss */
.online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4a3a2a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); flex: none; }
.online-dot.on { background: #5fd36a; box-shadow: 0 0 6px #5fd36a; }
.social-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-family: var(--title); font-size: 12px; color: var(--ink2); letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 6px 8px; border-bottom: 1px solid rgba(74,58,42,.4); vertical-align: middle; }
.table tr.me td { background: rgba(226,179,91,.1); }
.guild-chat { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.guild-chat .msg { background: #1a130e; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.wb-card { margin-bottom: 12px; }
.bar.wb { height: 12px; margin-top: 8px; border-radius: 6px; background: #1a0d0b; border: 1px solid #5a2a1d; overflow: hidden; }
.bar.wb > i { display: block; height: 100%; background: linear-gradient(90deg, #8a1f1f, #e0503a, #ff9a5a); transition: width .6s; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.ach { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #17110d; opacity: .55; }
.ach.got { opacity: 1; border-color: #7c5c2a; background: linear-gradient(180deg, #2b2014, #1d1510); }
.ach-icon { font-size: 26px; line-height: 1; }
.ach-pop { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 12px;
  background: linear-gradient(180deg, #3a2a16, #21180f); border: 1px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 24px rgba(226,179,91,.25); animation: achIn .5s ease-out; max-width: calc(100vw - 32px); }
.ach-pop.out { opacity: 0; transform: translate(-50%, -20px); transition: .6s; }
@keyframes achIn { from { opacity: 0; transform: translate(-50%, -30px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.ico-svg { display: block; }
.abilcard { padding: 8px 10px; line-height: 1.3; }
.abilcard.locked { opacity: .55; }
.abilgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
a, a:hover { text-decoration: none; }
/* hero sheets keep one size, so switching tabs or spending points never moves the header */
.modal.sheetmodal { height: min(920px, calc(100dvh - 32px)); align-self: center; }
.sheetnav { display: flex; align-items: center; gap: 6px; margin: -4px 34px 8px 0; }
.sheetnav .btn { min-height: 30px; padding: 4px 12px; }
.sheetnav .who { flex: 1; text-align: center; font-size: 13px; color: var(--mute); }
.tipbox { position: fixed; z-index: 200; pointer-events: none; max-width: 300px; padding: 8px 11px; border-radius: 8px; background: #17110c; border: 1px solid var(--line2); box-shadow: var(--shadow); line-height: 1.35; }
.tipbox .iname { font-family: var(--title); font-size: 14px; }
@media (hover: none) { .tipbox { display: none; } }
/* the main menu wraps instead of pushing the page wider than the screen */
.nav { flex-wrap: wrap; gap: 6px 8px; }
.nav .btn { white-space: nowrap; }
@media (max-width: 760px) { .nav { padding: 8px 10px; } .nav .brand { width: 100%; } }

/* ---------------- clearer battles: tags over fighters, camera buttons, who acts next */
.s3-tag { width: auto; min-width: 64px; height: auto; margin: 0; background: none; border: none; overflow: visible; translate: -50% -100%; display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: 0; }
.s3-tag .tn { font-family: var(--title); font-size: 11px; line-height: 1.1; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000; white-space: nowrap; }
.s3-tag .tn em { font-style: normal; font-size: 9px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 3px; margin-right: 3px; color: var(--gold2); }
.s3-tag .tn .tc { color: #ffb84a; font-size: 9px; letter-spacing: -1px; }
.s3-tag .tb { position: relative; width: 70px; height: 9px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.35); border-radius: 4px; overflow: hidden; }
.s3-tag .tb i { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; background: linear-gradient(#ff8a6a, #c8341c); transition: width .5s; }
.s3-tag.party .tb i { background: linear-gradient(#9aff8a, #3a9a2a); }
.s3-tag.summon .tb i { background: linear-gradient(#a8eaff, #3a8ac8); }
.s3-tag.low .tb { box-shadow: 0 0 6px #ff3a2a; }
.s3-tag .tb u { position: absolute; inset: 0; text-decoration: none; font: 700 8px/9px system-ui, sans-serif; color: #fff; text-align: center; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.s3-tag .ts { display: flex; gap: 1px; font-size: 11px; line-height: 12px; filter: drop-shadow(0 1px 1px #000); }
.s3-tag.cur { box-shadow: none; }
.s3-tag.cur .tb { box-shadow: 0 0 0 1px var(--gold), 0 0 10px var(--gold); }
.s3-tag.cur .tn { color: var(--gold2); }
.s3-hud.notags .s3-tag { display: none !important; }
.s3-float.absorb { color: #8ae4ff; font-size: 20px; }
.s3-ctrl { position: absolute; right: 8px; bottom: 8px; z-index: 6; display: flex; gap: 4px; }
.s3-ctrl button { background: rgba(15,11,8,.78); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; min-width: 30px; }
.s3-ctrl button:hover, .s3-ctrl button.on { border-color: var(--gold); color: var(--gold2); }
.turn-order { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 3px; align-items: center; background: rgba(15,11,8,.7); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; pointer-events: none; max-width: 94%; overflow: hidden; }
.turn-order .to { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 2px solid var(--green); display: grid; place-items: center; font-size: 14px; background: #1a130d; flex: none; }
.turn-order .to.enemy { border-color: var(--red2); }
.turn-order .to.now { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--gold), 0 0 10px var(--gold); }
.turn-order .to .portrait { width: 100% !important; height: 100% !important; border: none !important; border-radius: 50% !important; }
.turn-order .lbl { font-family: var(--title); font-size: 10px; color: var(--mute); margin-right: 3px; }
.combat.c3d.big .combat-field { display: none; }
.combat.c3d.big { grid-template-rows: minmax(300px, 1fr) auto; }
.combat.c3d.big .combat-bar { max-height: 30vh; }
.bigbtn { position: absolute; left: 8px; bottom: 8px; z-index: 6; background: rgba(15,11,8,.78); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.bigbtn:hover { border-color: var(--gold); color: var(--gold2); }
.unit.summon { border-style: dashed; border-color: #6ab8e8; }
.unit .tiny.sum { color: #8adcff; }

/* ---------------- the arena */
.arena-hero { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: linear-gradient(120deg, rgba(120,60,20,.45), rgba(20,14,10,.75)), url(/assets/env/pano_arena.webp) center/cover; border: 1px solid var(--line2); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.arena-hero h2 { margin: 0 0 4px; font-family: var(--deco); font-size: clamp(24px, 4vw, 38px); text-shadow: 0 2px 0 #000; }
.glory { font-family: var(--title); color: var(--gold2); font-size: 20px; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.ladder-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lchip { background: rgba(15,11,8,.8); border: 1px solid var(--line2); border-radius: 8px; padding: 4px 9px; font-size: 13px; }
.lchip b { color: var(--gold2); font-family: var(--title); }
.modes4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.modecard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: .15s; }
.modecard:hover { border-color: var(--gold); }
.modecard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(226,179,91,.25); background: #2e2217; }
.modecard .mi { font-size: 26px; } .modecard b { font-family: var(--title); color: var(--gold2); }
.pick-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.phero { display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px; cursor: pointer; font-size: 13px; }
.phero.on { border-color: var(--gold); background: #33261a; box-shadow: 0 0 0 1px var(--gold); }
.phero.busy { opacity: .4; cursor: not-allowed; }
.phero .nm { font-family: var(--title); font-size: 12px; color: var(--ink); line-height: 1.15; }
.offer { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.offer.easy { border-color: #4a7a3a; } .offer.hard { border-color: #8a3a2a; }
.seatgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.seat { background: var(--panel); border: 1px dashed var(--line2); border-radius: 8px; padding: 8px; min-height: 44px; margin-bottom: 6px; }
.seat.full { border-style: solid; }
.vs { font-family: var(--deco); font-size: 26px; color: var(--red2); align-self: center; }
.style-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.style-card.legend { border-color: var(--r-legendary); box-shadow: 0 0 14px rgba(255,157,46,.2); }
.style-card .moves { font-size: 13px; margin-top: 6px; }
.style-card .moves div { padding: 1px 0; border-bottom: 1px dotted rgba(255,255,255,.06); }
.pas { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; margin: 2px; font-size: 13px; background: var(--panel); cursor: pointer; color: var(--ink); font-family: var(--body); }
.pas.on { border-color: var(--gold); background: #3a2a18; }
.pas.locked { opacity: .55; }
.arena-screen { position: fixed; inset: 0; z-index: 30; background: #0d0907; }
.arena-screen .combat { position: absolute; inset: 0; }
.team-head { position: absolute; top: 8px; z-index: 5; font-family: var(--title); font-size: 13px; padding: 3px 10px; border-radius: 6px; background: rgba(15,11,8,.8); border: 1px solid var(--line2); max-width: 28%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-head.l { left: 8px; color: #9aff8a; } .team-head.r { right: 8px; color: #ff9a7a; }
.timer { font-family: var(--title); color: var(--gold2); }
.timer.low { color: var(--red2); }
.arena-result { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.arena-result .panel { max-width: 480px; width: 92%; text-align: center; }
.arena-result h2 { font-family: var(--deco); font-size: 42px; margin: 0; }
.arena-result h2.win { color: var(--gold2); text-shadow: 0 0 24px rgba(255,200,80,.7); } .arena-result h2.lose { color: #ff8a7a; }
@media (max-width: 720px) {
  .arena-hero { grid-template-columns: 1fr; }
  .seatgrid { grid-template-columns: 1fr; } .vs { text-align: center; }
  .team-head { font-size: 11px; max-width: 40%; }
  .turn-order { top: 40px; } .turn-order .to { width: 22px; height: 22px; } .turn-order .to.now { width: 26px; height: 26px; }
}
/* the cards under a 3D battle follow the field: your side on the left */
.c3d .combat-field .side.foes { order: 2; border-right: none; padding-right: 0; }
.c3d .combat-field .side.ours { order: 1; border-right: 1px solid var(--line2); padding-right: 6px; }
/* many fighters: smaller tags */
.s3-hud.dense .s3-tag .tn { font-size: 9px; }
.s3-hud.dense .s3-tag .tb { width: 54px; height: 8px; }
.s3-hud.dense .s3-tag .tb u { font-size: 7px; line-height: 8px; }
.s3-hud.dense .s3-tag .ts { font-size: 9px; line-height: 10px; }
/* more room for the 3D battle; compact cards when many fight */
.combat.c3d { grid-template-rows: minmax(48vh, 1fr) auto auto; }
.combat.c3d .combat-bar { max-height: 32vh; }
.c3d .combat-field.dense .unit { width: 66px; padding: 3px; }
.c3d .combat-field.dense .unit .portrait { width: 30px !important; height: 30px !important; }
.c3d .combat-field.dense .unit .uname { font-size: 9px; height: 12px; }
.c3d .combat-field.dense .unit .tiny { font-size: 10px; }
.c3d .combat-field.dense .unit .uicon { font-size: 22px; height: 30px; line-height: 30px; }
@media (max-width: 720px) { .combat.c3d { grid-template-rows: minmax(40vh, 44vh) auto minmax(0, 1fr); } }
/* phones: the labels over the battle stack instead of overlapping */
@media (max-width: 720px) {
  .c3d .turn-banner { white-space: normal; max-width: 92%; font-size: 12px; text-align: center; padding: 3px 10px; }
  .arena-screen .team-head { top: 44px; font-size: 10px; padding: 2px 6px; }
  .arena-screen .turn-order { top: 72px; }
  .s3-ctrl button { padding: 3px 6px; }
}

/* scenes with tabs (town, house, castle, a trader): picture, purse, way out and tabs stay; only the content scrolls */
.scene.tabbed { overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* as tall as the space it has (the map area, under the top bar), at most 880px */
.scene-card.tabbed { display: flex; flex-direction: column; height: 880px; max-height: 100%; flex: none; }
.scene-card.tabbed .scene-art { flex: none; height: 150px; }
.scene-head { flex: none; padding: 10px 20px 0; background: #17110c; }
.scene-head .scene-bar { gap: 8px; margin-bottom: 8px; }
.scene-head .tabs { margin-bottom: 0; }
.scene-card.tabbed .scene-body { flex: 1; min-height: 0; overflow-y: auto; padding-top: 12px; }
.scene-card.tabbed .scene-body.fill { overflow: hidden; display: flex; flex-direction: column; }
.panes { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.pane { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.pane-list { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.scene-body.fill > .panes { flex: 1; min-height: 0; flex-wrap: nowrap; }
.scene-body.fill .pane { min-height: 0; }
.scene-body.fill .pane-list { max-height: none; flex: 1; min-height: 0; }
@media (max-width: 640px) {
  .scene-card.tabbed .scene-art { height: 96px; }
  .scene-head { padding: 8px 12px 0; }
  .scene-body.fill > .panes { flex-direction: column; }
  /* one row of tabs that scrolls sideways, so the lists keep their room */
  .scene-head .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .scene-head .tabs .tab { flex: none; white-space: nowrap; }
}

/* hero sheets (saga and roster): the same rows in the same places for every hero; only the tab's content scrolls */
.modal.sheetmodal { display: flex; flex-direction: column; overflow: hidden; }
.sheetmodal .sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheetmodal .sheetnav, .sheet-head, .sheet-lvl, .sheetmodal .statgrid, .sheetmodal .tabs { flex: none; }
.sheet-head { display: flex; align-items: flex-start; gap: 16px; }
.sheet-pic { gap: 6px; align-items: center; flex: none; }
.sheet-info { flex: 1; min-width: 0; }
.sheet-info h2 { margin: 0; }
.sheet-info .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-info .kv span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sheet-lvl { min-height: 36px; margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.sheet-lvl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-tab { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 4px 4px 0; }
.statbox { position: relative; }
.statbox .plus { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: #4a3518; color: var(--gold2); font-weight: 700; cursor: pointer; line-height: 1; }
.statbox .plus:hover:not(:disabled) { background: #6a4b20; }
.statbox .plus:disabled { opacity: .35; cursor: default; }
.sheetnav button:disabled { opacity: .35; }
@media (max-width: 640px) {
  .modal.sheetmodal { display: block; overflow-y: auto; }
  .sheetmodal .sheet-body { display: block; }
  .sheet-tab { overflow: visible; }
  .sheet-head { flex-direction: column; align-items: center; }
  .sheet-info { width: 100%; }
}
/* an item from the bag: picture and name on top, what you can do at the bottom, the same for every item */
.modal.itemmodal { width: min(560px, 100%); height: min(560px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.itemmodal .item-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.itemmodal .item-main { flex: 1; min-height: 0; overflow-y: auto; }
.itemmodal .item-acts { flex: none; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Houses and Towns tabs */
.hold-hero { gap: 8px; margin-bottom: 4px; align-items: center; }
.sendsel { max-width: 150px; font-size: 12px; padding: 3px 4px; }
.town-card .good { color: var(--green); } .town-card .bad { color: var(--red2); }
/* saga cards on the home page: the same height in a row, Delete / Leave always in the bottom-right corner */
.saga-card { display: flex; flex-direction: column; }
.saga-card .saga-faces { margin-top: 8px; min-height: 34px; flex-wrap: wrap; }
.saga-card .saga-foot { margin-top: auto; padding-top: 6px; flex-wrap: nowrap; }
.saga-card .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.saga-card .saga-foot .btn { flex: none; }
.hero-card { display: flex; flex-direction: column; }
.hero-card .hcard { flex: 1; }
.hero-card .hcard > .grow { display: flex; flex-direction: column; align-self: stretch; }
.hero-card .acts { margin-top: auto; padding-top: 6px; }
.party-head { gap: 6px; align-items: center; margin-bottom: 4px; } .party-head .label { margin: 0; }
/* a special move's close-up: black bars slide in at the top and bottom of the battle */
.s3-cine { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.s3-cine::before, .s3-cine::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .25s ease; }
.s3-cine::before { top: 0; } .s3-cine::after { bottom: 0; }
.s3-cine.on::before, .s3-cine.on::after { height: 11%; }
.nomotion .s3-cine.on::before, .nomotion .s3-cine.on::after { transition: none; }

/* the battle view keeps its size: the cards and the bar under it have fixed heights, whatever they hold (the moves
   list, the log, statuses on the cards), so the 3D field no longer grows and shrinks from turn to turn */
.combat.c3d { grid-template-rows: minmax(0, 1fr) 128px 31vh; }
.combat.c3d .combat-field { height: 128px; overflow-y: auto; align-items: flex-start; }
.combat.c3d .combat-bar { height: 31vh; max-height: none; grid-template-rows: minmax(0, 1fr); }
.combat.c3d .combat-bar > * { min-height: 0; }
.combat.c3d.big { grid-template-rows: minmax(0, 1fr) 30vh; }
.combat.c3d.big .combat-bar { height: 30vh; }
.combat:not(.c3d) .combat-bar { height: 34vh; max-height: none; grid-template-rows: minmax(0, 1fr); }
@media (max-width: 720px) {
  .combat.c3d { grid-template-rows: 42vh 112px minmax(0, 1fr); }
  .combat.c3d .combat-field { height: 112px; }
  .combat.c3d .combat-bar { height: auto; grid-template-rows: minmax(0, 1fr) 90px; }
  .combat:not(.c3d) .combat-bar { height: 46vh; grid-template-rows: minmax(0, 1fr) 90px; }
}
.homelink { color: inherit; } .homelink:hover b { color: var(--gold2); }

/* Fights take the right panel's place (the user: "replace the right side with fighting stuff and increase the fighting
   view; the view's size should be fixed"). On wide screens: the 3D field on the left at a fixed size (it fills
   what is left after fixed columns and rows, whatever the turn shows), the fighters and the log on the right, the
   moves under the field. */
@media (min-width: 900px) {
  .game.fighting { grid-template-columns: 290px 1fr; }
  .game.fighting .gright { display: none; }
  .game.fighting .combat.c3d { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr) 26vh; }
  .game.fighting .combat.c3d > .stage3d, .game.fighting .combat.c3d > .bgart { grid-column: 1; grid-row: 1; min-height: 0; }
  .game.fighting .c3d .combat-field { grid-column: 2; grid-row: 1; height: auto; min-height: 0; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    overflow-y: auto; border-left: 1px solid var(--line2); padding: 8px; gap: 8px; background: linear-gradient(#1a130d, #120d09); }
  .game.fighting .c3d .combat-field .side { flex-direction: column; flex-wrap: nowrap; border: none !important; padding: 0 !important; gap: 6px; }
  .game.fighting .c3d .combat-field .side::before { font-family: var(--title); font-size: 12px; letter-spacing: .08em; color: var(--ink2); text-transform: uppercase; }
  .game.fighting .c3d .combat-field .side.ours::before { content: 'Your side'; }
  .game.fighting .c3d .combat-field .side.foes::before { content: 'Foes'; }
  .game.fighting .c3d .combat-field .side.ours { order: 1; padding-bottom: 8px !important; border-bottom: 1px solid var(--line2) !important; }
  .game.fighting .c3d .combat-field .side.foes { order: 2; }
  .game.fighting .c3d .rowline { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  .game.fighting .c3d .rowline:empty { display: none; }
  .game.fighting .combat.c3d .combat-bar { grid-column: 1 / 3; grid-row: 2; height: 26vh; grid-template-columns: minmax(0, 1fr) 340px; }
  .game.fighting .combat.c3d.big { grid-template-columns: minmax(0, 1fr); }
  .game.fighting .combat.c3d.big > .stage3d { grid-column: 1; }
  .game.fighting .combat.c3d.big .combat-bar { grid-template-columns: minmax(0, 1fr) 340px; }
  /* the banner and the turn order stay centred over the 3D field, not over field + column */
  .game.fighting .combat.c3d:not(.big) .turn-banner, .game.fighting .combat.c3d:not(.big) .turn-order { left: calc((100% - 340px) / 2); }
}
@media (min-width: 900px) { .game.fighting .combat.c3d.big .combat-bar { grid-column: 1; } }

/* hero sheets and the item window: ◀ ▶ halfway down the window's sides (the user asked), the count stays on top */
.sheetmodal, .itemmodal { position: relative; }
.sheetmodal .sheetnav, .itemmodal .sheetnav { justify-content: center; }
.sheetmodal .sheetnav [data-nav], .itemmodal .sheetnav [data-inav] { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 34px; min-height: 64px; padding: 0;
  border-radius: 10px; font-size: 16px; background: rgba(23,17,12,.88); box-shadow: 0 4px 14px rgba(0,0,0,.6); }
.sheetmodal .sheetnav [data-nav="-1"], .itemmodal .sheetnav [data-inav="-1"] { left: 6px; }
.sheetmodal .sheetnav [data-nav="1"], .itemmodal .sheetnav [data-inav="1"] { right: 6px; }
.sheetmodal .sheetnav [data-nav]:disabled, .itemmodal .sheetnav [data-inav]:disabled { display: none; }
/* room for them: the content keeps clear of the arrows */
.sheetmodal .sheet-body, .itemmodal .item-body { padding: 0 34px; }
@media (max-width: 640px) {
  .sheetmodal .sheetnav [data-nav], .itemmodal .sheetnav [data-inav] { position: fixed; width: 30px; min-height: 52px; }
  .sheetmodal .sheet-body, .itemmodal .item-body { padding: 0 26px; }
}

/* the Command window (public/js/command.js): every hero in one place, missions, places, reports.
   Fixed height: the header, tabs and the action bar stay put, only the list under the tabs scrolls. */
.modal.cmdmodal { width: min(1080px, 100%); height: min(880px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.cmd { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cmd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 30px; }
.cmd-head h2 { margin: 0; }
.cmd-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.cmd-sum .chip { font-size: 12px; padding: 2px 8px; }
.cmd-tabs { margin: 10px 0 0; flex-wrap: nowrap; overflow-x: auto; }
.cmd-tabs .tab { white-space: nowrap; }
.cmd-tabs .tab.hot .cnt { color: var(--red2); }
.cmd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 2px 10px 0; }
.cmd-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
.cmd-bar select { max-width: 220px; }
.cmd-tools input { width: 100%; margin-bottom: 8px; }
.cmd-filters { gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cmd-filters .chip { cursor: pointer; }
.cmd-group { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 6px 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(226,179,91,.12), transparent); border-left: 3px solid var(--gold); }
.cmd-group .gi { font-size: 18px; }
.cmd-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; min-height: 46px; }
.cmd-row:hover { border-color: var(--line); background: #1a130e; }
.cmd-row.nosel { opacity: .9; }
.cmd-row .one { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-row .bad, .cmd-out .bad, .cmd-plan .bad { color: var(--red2); } .cmd-plan .good, .cmd-out .good { color: var(--green); }
.cmd .ck { width: 22px; display: inline-flex; justify-content: center; flex: none; }
.cmd .ck input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.cmd-acts { display: flex; gap: 4px; align-items: center; flex: none; }
.cmd-empty { padding: 4px 38px; }
.cmd-sec { margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.cmd-sec:first-child { margin-top: 0; }
.cmd-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.cmd-kind { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #1a130e; color: var(--ink2); cursor: pointer; font-size: 13px; text-align: left; }
.cmd-kind span { font-size: 18px; }
.cmd-kind:hover { border-color: var(--gold); }
.cmd-kind.on { border-color: var(--gold); color: var(--gold2); background: linear-gradient(180deg, #3a2a1b, #2b2119); }
.cmd-desc { margin: 6px 2px 8px; min-height: 2.6em; }
.cmd-line { gap: 8px; margin: 6px 0; align-items: center; }
.cmd-line .lbl { width: 70px; flex: none; font-family: var(--title); font-size: 12px; color: var(--ink2); }
.cmd-line select { min-width: 0; }
.cmd-pick { cursor: pointer; }
.cmd-plan { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 12px; border: 1px solid #7c5c2a; border-radius: 10px; background: #1d150f; min-height: 74px; }
.cmd-out { margin-bottom: 6px; padding: 8px 10px; }
.cmd-place { margin: 10px 0 0; }
.cmd-place.threat { border-color: var(--red); }
.cmd-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.cmd-res .big { font-family: var(--title); color: var(--gold2); }
.cmd-res .btn { margin-top: 4px; }
.cmd-sendgold { gap: 6px; margin: 4px 0 0; justify-content: flex-end; }
.cmd-sendgold:empty { display: none; }
.cmd-sendgold input { width: 90px; }
.cmd-report { margin-bottom: 8px; }
.cmd-report .small { margin-top: 2px; }
@media (max-width: 640px) {
  .modal.cmdmodal { height: calc(100dvh - 16px); padding: 12px; }
  .cmd-res { grid-template-columns: 1fr 1fr; }
  .cmd-acts .sendsel { max-width: 110px; }
  .cmd-bar select { max-width: 140px; }
  .cmd-line .lbl { width: 56px; }
}

/* hunger bar (Game.hungerHours) and the party effects window */
.bar.food > i { background: linear-gradient(90deg, #6b4a1c, #c98a3a, #e8b46a); }
.bar.food.mid > i { background: linear-gradient(90deg, #6b4a1c, #b07a2a); }
.bar.food.low > i { background: linear-gradient(90deg, #5a1a10, #a8402a); }
.party-card .bar.food { height: 5px; margin-top: 2px; }
.modal.fxmodal { width: min(820px, 100%); }
.fx-group { margin-bottom: 10px; }
.fx-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.04); }
.fx-row .fi { width: 22px; text-align: center; flex: none; }
.fx-row.bad b { color: var(--red2); }
.fx-group .bad { color: var(--red2); }
.card.mastery { border-color: #7c5c2a; }

/* the Heroes roster page: heroes of your sagas */
.saga-heroes { margin-bottom: 14px; }
.sh-card.dead { opacity: .5; }
.sh-gear { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.sh-gear .gi { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; font-size: 14px; background: #1a130e; }
.sh-gear .gi svg { width: 18px; height: 18px; }

/* the hero sheet's location line, and clickable heroes anywhere */
.sheet-where { gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; min-height: 30px; }
.sheet-where .one { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-hero] { cursor: pointer; }
.clickhero:hover, [data-hero]:hover > .portrait { filter: brightness(1.15); }
b[data-hero]:hover, a[data-hero]:hover { text-decoration: underline; }

/* Command window: place headers in the mission picker, the activity feed, building from afar */
.cmd-subhead { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 3px 8px; border-left: 2px solid var(--line2); background: rgba(255,255,255,.02); border-radius: 4px; }
.cmd-act { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; border-left: 3px solid transparent; }
.cmd-act .ai { width: 22px; text-align: center; flex: none; }
.cmd-act.new { background: rgba(226,179,91,.07); }
.cmd-act.k-home, .cmd-act.k-arrive { border-left-color: var(--green); }
.cmd-act.k-out, .cmd-act.k-back { border-left-color: var(--blue); }
.cmd-act.k-report { border-left-color: var(--gold); }
.cmd-act.k-bad { border-left-color: var(--red); }
.cmd-buildbox { margin-top: 6px; }
.cmd-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; margin-top: 6px; }
.cmd-build { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #1a130e; }
.cmd-build.max { opacity: .6; }
.cmd-build .bi { font-size: 18px; width: 24px; text-align: center; }