/* 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: 13px; } .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: 13px; 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: 14px; 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: 14px; 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: 13px; 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: 14px; }
.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)); }
/* N42b: the rage bar under a fighter's health; glows when full, and the rage art button */
.unit .bar.rage { height: 5px; margin-top: 2px; }
.bar.rage > i { background: linear-gradient(90deg, #5a0c06, #c4260f, #ff7a2e); }
.bar.rage.full { border-color: #ff5a1f; animation: rageGlow 1.1s ease-in-out infinite alternate; }
.bar.rage.full > i { background: linear-gradient(90deg, #d8340f, #ffb347, #ff5a1f); }
@keyframes rageGlow { from { box-shadow: 0 0 2px #ff3c1a; } to { box-shadow: 0 0 9px #ff6a2a, 0 0 3px #ffd08a; } }
.abil.rage-art { border-color: #ff5a1f; background: linear-gradient(90deg, #3a0f06, #1a0c08); box-shadow: 0 0 8px #ff4a1a66; }
.abil.rage-art .an { color: #ffb070; }
.tac-rage { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.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: 14px; 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; }
.region-banner .rf { color: var(--ink2); font-size: 13px; opacity: .85; }
.region-banner .rr { color: var(--ink2); font-size: 12px; font-style: italic; opacity: .85; } /* N40b: the region chunk the land is in */
/* N40b: world view: the realm as a grid of region chunks */
.wv-modal { max-width: min(920px, 96vw); }
.wv-grid { display: grid; gap: 4px; margin-top: 8px; }
.wv-cell { aspect-ratio: 2 / 1; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; font-size: 12px; min-width: 0; overflow: hidden; }
.wv-cell.known { background: linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--tint) 55%, #000)); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; text-shadow: 0 1px 3px #000; }
.wv-cell.known:hover { outline: 2px solid var(--gold2); }
.wv-cell.known b { font-family: var(--title); font-size: 13px; line-height: 1.1; overflow-wrap: anywhere; }
.wv-cell.known span { opacity: .85; font-size: 11px; }
.wv-cell.here { outline: 2px solid var(--gold2); box-shadow: 0 0 12px rgba(245,213,142,.5); }
.wv-cell i { font-style: normal; font-size: 11px; color: var(--gold2); }
.wv-cell.fog { background: repeating-linear-gradient(45deg, #1b1d24, #1b1d24 6px, #22252e 6px, #22252e 12px); color: #555a66; font-size: 18px; border: 1px solid rgba(255,255,255,.05); }
@media (max-width: 600px) { .wv-cell b { font-size: 11px; } .wv-cell span, .wv-cell i { display: none; } }
.region-banner .runrest { color: #ff9a7a; }
.region-banner .rfold { display: none; margin-left: 6px; font-size: 13px; color: var(--ink2); }
@media (max-width: 760px) {
  .region-banner { pointer-events: auto; cursor: pointer; max-width: calc(100% - 24px); padding: 2px 10px; border-radius: 8px; }
  .region-banner .rn { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .region-banner .rfold { display: inline; }
  .region-banner:not(.open) .rs, .region-banner:not(.open) .rf { display: none; }
  .region-banner.open { background: rgba(10, 8, 6, .72); }
  .region-banner.open .rfold { display: inline-block; transform: rotate(180deg); }
}
.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: 13px; 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: 12px; 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; }
/* F7: anchored near the top (not centred by height), so a card that grows or shrinks after it opens never moves;
   a card taller than the screen scrolls from its top */
.scene > * { margin-block: min(5vh, 48px) 0; }
.scene-card { width: min(760px, 100%); border-radius: 14px; overflow: clip; /* N64h: clip, not hidden: hidden made the card a scroll box and the sticky .choices never stuck */ 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: 14px; }
.item .idesc { font-size: 13px; 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: 12px; 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; }
.unit.targetable.kbfocus { outline: 3px solid var(--gold2); outline-offset: 2px; box-shadow: 0 0 14px rgba(255,211,77,.65); }
@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: 14px; }
.unit .combo { position: absolute; top: -8px; right: -8px; background: var(--gold); color: #000; border-radius: 999px; font-family: var(--title); font-size: 13px; 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; }
/* F2: the action panel is a column; the top block (modes, who acts, Defend / row / item / stances) never scrolls,
   only the list of moves under it does */
.actions { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.acts-top { flex: none; }
.acts-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 2px; }
.acts-who { margin-bottom: 4px; }
.acts-who .kbhint { margin-left: auto; cursor: help; white-space: nowrap; }
@media (max-width: 700px) { .acts-who .kbhint { display: none; } }
.acts-tools, .acts-auto { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.acts-tools .btn, .acts-auto .btn { margin: 0; font-size: 12px; padding: 3px 8px; }
.acts-wait { margin: 4px 2px; }
.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; }
/* N30c: the forms of a summon skill, under its button */
.sum-forms { display: inline-flex; flex-wrap: wrap; gap: 3px; margin: -1px 3px 4px; max-width: 260px; vertical-align: top; }
.sform { font: inherit; font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: #1a130d; color: var(--ink); cursor: pointer; }
.sform:hover:not([disabled]) { border-color: var(--gold); }
.sform.on { border-color: var(--gold); background: #3a2a18; color: var(--gold2); }
.sform[disabled] { opacity: .45; cursor: default; }
.sform.lock { font-style: italic; }
.abil.martial { border-color: #5a3f6b; } .abil.finisher { border-color: #a8651d; }
.abil .an { font-family: var(--title); font-size: 13px; color: var(--gold2); }
.abil .ad { font-size: 13px; 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: 13px; 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: flex; flex-direction: column; align-items: center; padding: 16px; animation: fade .2s; overflow-y: auto; }
/* F7: windows hang from near the top instead of being centred by height, so one whose content changes after it opens
   (pictures, lists filled later) never jumps; the gap above shrinks away for windows as tall as the screen */
.modal-back::before { content: ''; flex: 0 1 min(6vh, 56px); }
.modal-back > .modal { flex-shrink: 0; }
/* F26: confirmations and the Esc menu sit in the middle (auto margins: a tall box still scrolls from its top) */
.modal-back.centered::before { display: none; }
.modal-back.centered > .modal { margin: auto 0; }
@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: 14px; 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: 13px; color: var(--mute); cursor: pointer; }
.step.on { color: #000; background: var(--gold); border-color: var(--gold); }
.step.done { color: var(--gold2); border-color: #7c5c2a; }
/* hero creator (F10): step names + Back / Next in one block that stays under the top bar while the step scrolls */
.cr-nav { position: sticky; top: var(--cr-top, 52px); z-index: 15; margin: 0 -8px 14px; padding: 8px 8px 10px; background: rgba(18,13,10,.96); border-bottom: 1px solid var(--line); }
.cr-nav .steps { margin-bottom: 8px; }
.cr-nav .cr-btns { gap: 8px; }
.cr-nav ~ .row .preview, .cr-nav ~ .row .wd-view { top: calc(var(--cr-top, 52px) + var(--cr-h, 96px) + 8px); }
@media (max-width: 600px) { .cr-nav .step { padding: 4px 8px; font-size: 12px; white-space: nowrap; } .cr-nav .steps { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } }
.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: 12px; 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: 13px; }
  .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: 12px; }
  .statgrid { grid-template-columns: repeat(3, 1fr); }
  .scene-art { height: 140px; } .scene-text { font-size: 17px; }
  .gtop { gap: 6px; } .stat-pill { font-size: 13px; 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: 9px; padding: 6px; margin-bottom: 6px; background: #19120c; }
.modes { display: flex; gap: 5px; }
.modes > * { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modes > .modego { flex-grow: 1.5; }
.modes > .modebtn { letter-spacing: 0; padding: 5px 2px; font-size: 12px; }
.modego[disabled] { display: none; } /* "Fighting manually" is only a label: the three modes share the row */
.modebtn { font-family: var(--title); font-size: 13px; padding: 5px 4px; 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: 12px; color: var(--ink2); margin: 4px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modego { width: 100%; font-size: 13px; min-height: 0; padding: 5px 6px; margin: 0; }
@media (max-width: 520px) { .modes { flex-wrap: wrap; } .modes > .modego { flex-basis: 100%; } .modedesc { display: none; } }
.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: 14px; 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: 12px; color: var(--ink2); }
.cbtn i { position: absolute; right: 6px; top: 3px; font-style: normal; font-size: 12px; 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: 14px; 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: 14px; }
/* N18: the Options window in tabs: wide, a fixed height (switching tabs never jumps), the tab row on top, the page scrolls */
.modal.optmodal { width: min(960px, 100%); height: min(760px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.optmodal > h2 { margin: 0 0 8px; }
.opttabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.opttab { background: rgba(0,0,0,.25); border: 1px solid var(--line); color: var(--ink2); border-radius: 8px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.opttab:hover { color: var(--ink); border-color: var(--line2); }
.opttab.on { color: var(--gold2); border-color: var(--gold); background: rgba(226,179,91,.12); }
.optpages { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.optpage { display: none; } .optpage.on { display: block; }
.optpage .opts { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (max-width: 640px) {
  .modal-back:has(> .optmodal) { padding: 0; }
  .modal-back:has(> .optmodal)::before { display: none; }
  .modal.optmodal { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .opttabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .opttab { flex: none; white-space: nowrap; }
  .optpage .opts { grid-template-columns: 1fr; }
  .opt select { min-width: 0; max-width: 55%; }
}
/* N18 accessibility: hints off, high contrast, colour-blind rarity marks */
.nohints .hint-note { display: none !important; }
html.hicontrast { --ink: #fff8ea; --ink2: #e8dcc4; --mute: #c4b498; --line: #8a7050; --line2: #b08a58; --gold2: #ffe7a8; }
html.hicontrast .muted { color: var(--ink2) !important; } html.hicontrast .panel, html.hicontrast .modal { background-color: #0d0907; }
html.cbmarks .rar-uncommon::after { content: ' CF'; font-size: .75em; } html.cbmarks .rar-rare::after { content: ' C6'; font-size: .75em; }
html.cbmarks .rar-epic::after { content: ' °5'; font-size: .75em; } html.cbmarks .rar-legendary::after { content: ' º6'; font-size: .75em; }
html.cbmarks .rar-mythic::after { content: ' ½6'; font-size: .75em; }
.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; }
/* F17: damage numbers end at opacity 0, so a 0s animation hid them at once (menu motion off, reduced motion): without
   motion they still show, standing still and fading out */
html.nomotion .floater, html.nomotion .s3-float { animation-name: fxfade !important; animation-duration: 1.3s !important; animation-timing-function: linear !important; }
@keyframes fxfade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* 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, .pv3d 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: soft-light; max-height: 100%; } /* F27: never a white screen: a dim tint at most */
.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); }
.pv3d { position: relative; height: 280px; margin: -4px -4px 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); background: radial-gradient(#3a2a1a, #120d0a); }
.pv3d-hint { position: absolute; right: 8px; bottom: 6px; z-index: 2; color: #e8d8b8; opacity: .6; pointer-events: none; text-shadow: 0 1px 2px #000; }
.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: 13px; 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: 13px; 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; }
.face-scope { margin: 6px 0; }
.face-scope .tab { font-size: .85em; }
.gallery.face-gal { max-height: min(56vh, 520px); }

/* ---- 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: 12px; font-weight: 700; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-family: var(--title); font-size: 13px; 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: 14px; 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: 12px; 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: 11px; 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: 11px; 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: 12px; 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: 13px; 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: 12px; 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: 13px; 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: 14px; }
.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: 14px; }
.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: 13px; 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: 14px; 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: 14px; 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: 14px; 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: 12px; 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: 11px; }
.s3-hud.dense .s3-tag .tb { width: 54px; height: 8px; }
.s3-hud.dense .s3-tag .tb u { font-size: 9px; line-height: 8px; }
.s3-hud.dense .s3-tag .ts { font-size: 11px; 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: 11px; height: 12px; }
.c3d .combat-field.dense .unit .tiny { font-size: 12px; }
.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: 13px; text-align: center; padding: 3px 10px; }
  .arena-screen .team-head { top: 44px; font-size: 12px; 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 .scene-info { margin: -4px 0 8px; line-height: 1.35; }
.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; justify-content: safe center; }
  .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: 13px; 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) max(26vh, 240px); }
  .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: 13px; 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: max(26vh, 240px); 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: 13px; padding: 2px 8px; }
.cmd-tabs { margin: 10px 0 0; flex-wrap: wrap; row-gap: 2px; }
.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: 14px; 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: 13px; 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; }
.cmd-buildbox .cmd-filters { gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cmd-buildbox .cmd-filters .chip { min-height: 32px; cursor: pointer; }
.cmd-buildbox .cmd-builds { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cmd-bcard { display: grid; grid-template-columns: 28px 1fr; column-gap: 6px; row-gap: 2px; align-items: center; text-align: left; min-height: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #1a130e; color: var(--ink); font: inherit; cursor: pointer; }
.cmd-bcard:hover { border-color: var(--gold); }
.cmd-bcard.sel { border-color: var(--gold2); box-shadow: 0 0 0 2px var(--gold2) inset; background: #2a1e12; }
.cmd-bcard .bi { font-size: 22px; grid-row: span 2; text-align: center; }
.cmd-bcard .bc, .cmd-bcard .bd, .cmd-bcard .bw { grid-column: 2; }
.cmd-bcard .bw { color: #e0907a; }
.cmd-bcard.cant { opacity: .55; }
.cmd-bcard.max { opacity: .45; }
.cmd-bnow { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--gold); border-radius: 8px; background: #241a10; }
.cmd-bnow .bi { font-size: 20px; }
.cmd-bnow .bar { height: 6px; background: #000a; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.cmd-bnow .bar i { display: block; height: 100%; background: var(--gold2); }
.cmd-bgo { margin-top: 6px; gap: 8px; align-items: center; }
.cmd-bgo .btn { min-height: 44px; }
@media (max-width: 480px) { .cmd-buildbox .cmd-builds { grid-template-columns: 1fr 1fr; } .cmd-bcard .bd { display: none; } }

/* ---- the bag: a toolbar that stays on top while the list scrolls, stacks, locks */
.bagbar { position: sticky; top: -10px; z-index: 3; margin: -10px -10px 8px; padding: 10px 10px 6px; background: rgba(20,15,11,.97); border-bottom: 1px solid var(--line); }
.bagbar select { max-width: 130px; }
.bagfilters { gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.bagfilters .chip { cursor: pointer; font-size: 12px; padding: 1px 7px; }
.icon { position: relative; }
.stackn { position: absolute; right: -4px; bottom: -4px; font-size: 12px; font-weight: 700; background: #000c; color: var(--gold2); border-radius: 6px; padding: 0 3px; line-height: 14px; }
.item.locked { box-shadow: inset 3px 0 0 var(--gold); }
.lockbtn { min-width: 30px; padding: 0 4px; opacity: .55; }
.item:hover .lockbtn, .item.locked .lockbtn { opacity: 1; }
/* the dungeon map follows the party; the room you are in pulses */
.dmap { scroll-behavior: auto; }
.dmap .dhere { animation: dherePulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dherePulse { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: .8; transform: scale(1.08); } }
/* ---- Command window: parties, contracts, the plan at the bottom */
.cmd-plan.bar { margin: 0; flex: 1; min-height: 0; padding: 8px 10px; }
.cmd-bar:has(.cmd-plan.bar) { padding-top: 8px; }
.cmd-gchips { gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; align-items: center; }
.cmd-gchips .chip { cursor: pointer; }
.cmd-gcard { margin-bottom: 8px; padding: 8px 10px; }
.cmd-gmem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cmd-gm { display: flex; gap: 6px; align-items: center; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 8px; background: #1a130e; cursor: pointer; min-width: 130px; }
.cmd-gm.busy { opacity: .55; }
.cmd-gedit { margin-bottom: 8px; padding: 8px 10px; border-color: var(--gold); }
.cmd-icons { display: flex; gap: 3px; flex-wrap: wrap; }
.cmd-icons .chip { cursor: pointer; padding: 1px 5px; }
.cmd-ctpick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.cmd-ctplace { border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: #17110c; }
.cmd-ctplace > div:first-child { margin-bottom: 3px; }
.cmd-ctchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; margin: 2px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.cmd-ctchip:has(input:checked) { border-color: var(--gold); background: #2b2119; }
.cmd-ctchip input { width: 14px; height: 14px; accent-color: var(--gold); }
.cmd-job { margin-bottom: 6px; padding: 8px 10px; }
.cmd-job .chip.green { color: var(--green); } .cmd-job .chip.red { color: var(--red2); }
/* ---- new saga: settings */
.ssets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sset { display: grid; grid-template-columns: 110px 1fr; gap: 2px 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #1a130e; }
.sset select { min-width: 0; }
.sset .tiny { grid-column: 1 / -1; min-height: 2.4em; }
.saga-rules summary { cursor: pointer; }
/* hero creator: no photo before the Face step */
.portrait.noface { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2b2119, #120d09); border: 1px dashed #6b5235; }
.noface-in { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 34px; color: var(--ink2); text-align: center; }
.noface-in span { font-size: 12px; line-height: 1.3; }
.race-emblem { width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; border-radius: 8px; background: radial-gradient(circle at 30% 30%, #3a2c1f, #120d09); border: 1px solid #000; flex: none; }

/* ================= 2026-11-08: the user's list (readability, steady menus, centred menus, bigger screens) ================= */
/* text a step bigger everywhere it was tiny */
.tiny { font-size: 13px; line-height: 1.35; } .small { font-size: 15px; }
.btn.small { font-size: 13px; }
/* menus never move: the top bars stay put while the page scrolls */
.nav { position: sticky; top: 0; z-index: 20; }
/* ---- notifications: in the middle of the screen, at the bottom */
#toasts { left: 50%; right: auto; bottom: 18px; transform: translateX(-50%); justify-items: center; max-width: min(560px, calc(100vw - 28px)); width: max-content; pointer-events: none; }
#toasts .toast { pointer-events: auto; text-align: center; font-size: 15px; padding: 10px 18px; border-left-width: 1px; border-bottom: 3px solid var(--gold); }
#toasts .toast.err { border-bottom-color: var(--red); }
@media (max-width: 760px) { #toasts { top: auto; bottom: 66px; left: 50%; right: auto; max-width: calc(100vw - 20px); } }
/* ---- the Options button: easy to find */
.btn.optbtn { border-color: var(--gold); color: var(--gold2); background: linear-gradient(#3a2a1b, #22180f); font-weight: 600; }
.btn.optbtn:hover { background: linear-gradient(#4a3522, #2b1f14); }
/* ---- menus: tabs, headings and button rows centred (lists and long text keep to the left) */
.tabs { justify-content: center; }
.scene-head .tabs { justify-content: safe center; }
.modal h2, .modal h3, .scene-card h2, .scene-card h3, .panel > h2, .panel > h3 { text-align: center; }
.choices { justify-items: stretch; }
.choices .btn { justify-self: center; min-width: min(320px, 100%); }
.scene-body > .row:last-child:has(> .btn), .modal .row.end { justify-content: center; }
/* service cards: fixed-width cards in centred rows, so a short last row sits in the middle too (F1) */
.svc { display: flex; flex-wrap: wrap; justify-content: center; } .svc > .card { flex: 0 1 132px; min-width: 112px; }
.label { text-align: inherit; }
/* ---- the game screen: wider side panels on big monitors */
@media (min-width: 1600px) { .game { grid-template-columns: 330px 1fr 390px; } }
@media (min-width: 2200px) { .game { grid-template-columns: 370px 1fr 440px; } }
/* left: the party list, then the tools under the heroes; the heading stays on top while the list scrolls */
.gleft .party-head { position: sticky; top: -10px; z-index: 4; margin: -10px -10px 6px; padding: 10px 10px 6px; background: rgba(20,15,11,.97); border-bottom: 1px solid var(--line); }
.party-tools { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 8px 0 4px; position: sticky; bottom: -10px; z-index: 4; padding: 8px 0; background: rgba(20,15,11,.97); }
.party-tools .btn { width: 100%; }
.dropwrap { position: relative; }
.dropmenu { position: absolute; left: 0; right: -60px; bottom: calc(100% + 6px); z-index: 30; display: grid; gap: 4px; padding: 6px; background: #1d150e; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.dropmenu.hidden { display: none; }
.dropopt { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #241a12; color: var(--ink); cursor: pointer; font: inherit; }
.dropopt:hover { border-color: var(--gold); background: #2e2117; }
.dropopt b { font-family: var(--title); color: var(--gold2); font-size: 14px; font-weight: 600; }
.dropopt span { font-size: 13px; color: var(--ink2); line-height: 1.3; }
/* dragging heroes to change the party's order (left list, and the fight's cards) */
.party-card[draggable="true"] { cursor: grab; }
.party-card.dragging, .unit.dragging { opacity: .45; }
.party-card.drop-before { box-shadow: 0 -3px 0 var(--gold); }
.party-card.drop-after { box-shadow: 0 3px 0 var(--gold); }
.unit.drop-on { outline: 2px dashed var(--gold); outline-offset: 2px; }
.party-card .learnable { color: #9fd0ff; animation: none; }
/* right: the tabs in a tidy grid that never scrolls away, the content under them */
.gright { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.gright .rtabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 8px; border-bottom: 1px solid var(--line); background: rgba(20,15,11,.98); }
.gright .rtabs .tab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; text-align: center; position: relative; }
.gright .rtabs .tab .ti { font-size: 18px; line-height: 1.1; }
.gright .rtabs .tab .tcnt { position: absolute; top: 2px; right: 4px; font-size: 11px; color: var(--ink2); font-family: var(--body, inherit); }
.gright .rtabs .tab.on { border-color: var(--gold); }
.gright .rbody { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.gright .rbody .bagbar { top: -10px; }
/* below 1100px the right panel only shows when opened (.show); the flex rule above must not bring it back (F2: on phones it took the fight's room) */
@media (max-width: 1100px) { .gright { display: none; } .gright.show { display: flex; } }
/* ---- towns, houses and traders: bigger on big monitors */
@media (min-width: 1500px) and (min-height: 900px) { .scene-card.tabbed { width: min(1120px, 100%) !important; } .scene-card.tabbed .scene-art { height: 170px; } .svc .card { padding: 16px 10px; } .svc .ico { font-size: 34px; } }
@media (min-width: 2000px) and (min-height: 1100px) { .scene-card.tabbed { width: min(1400px, 100%) !important; height: 1040px; } .scene-card.tabbed .scene-body { font-size: 17px; } }
/* ---- every dialog in a dungeon has the same size: the text scrolls, the choices stay at the bottom */
/* the user, 2026-11-13: "make the dungeon menu way bigger": nearly the whole screen */
#overlay.in-dungeon .scene-card { width: min(1600px, 100%) !important; height: calc(100vh - 100px); display: flex; flex-direction: column; }
#overlay.in-dungeon .scene-card .scene-art { flex: none; height: 140px !important; }
#overlay.in-dungeon .scene-card .scene-body { flex: 1; min-height: 0; overflow-y: auto; }
#overlay.in-dungeon .scene > * { margin-block: 0; }
#overlay.in-dungeon .scene { align-items: center; }
/* the choices of any dialog stay in view when its text is long */
.scene-body .choices { position: sticky; bottom: -20px; padding: 8px 0 4px; background: linear-gradient(transparent, #17110c 14px); z-index: 2; }
/* ---- home: saga cards and hero cards built the same way, buttons on one line at the bottom */
.saga-card, .hero-card { min-height: 210px; }
.saga-card > .row:first-child { flex-wrap: nowrap; align-items: flex-start; }
.saga-card > .row:first-child b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; min-height: 2.4em; }
.saga-card .saga-faces { min-height: 76px; align-content: flex-start; }
.card-foot { margin-top: auto; padding-top: 8px; gap: 6px; flex-wrap: nowrap; align-items: center; border-top: 1px solid var(--line); }
.saga-card .saga-foot { border-top: 1px solid var(--line); padding-top: 8px; }
.hero-card .hcard { flex: 1; }
.card-foot .btn, .saga-foot .btn { white-space: nowrap; padding: 5px 10px; flex: none; }
.page > .grid, .page .grid:has(> .saga-card), .page .grid:has(> .hero-card) { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.party-tools .btn { white-space: nowrap; padding-inline: 10px; }
.gleft { overflow-x: hidden; }
.party-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.party-tools .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .nav { position: relative; } }

/* ---------------------------------------------------------------- cinematics (cinema.js) */
.cine { position: fixed; inset: 0; z-index: 9000; background: #000; opacity: 0; transition: opacity .45s ease; cursor: pointer; overflow: hidden; }
.cine.in { opacity: 1; }
.cine.out { opacity: 0; }
.cine-view { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.cine-view.ready { opacity: 1; }
.cine-view::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.62) 88%); }
.cine-intro .cine-view::after, .cine-saga .cine-view::after { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,.5), rgba(0,0,0,0) 62%); }
.cine-view canvas { width: 100% !important; height: 100% !important; display: block; }
.cine-view.flat { background-size: auto 100%; background-position: 0% 50%; animation: cinePan 9s linear forwards; filter: saturate(1.1) contrast(1.05); }
@keyframes cinePan { to { background-position: 60% 50%; transform: scale(1.08); } }
.cine-bar { position: absolute; left: 0; right: 0; height: 12vh; background: #000; transition: transform .8s cubic-bezier(.2,.8,.2,1); z-index: 2; }
.cine-bar.top { top: 0; transform: translateY(-100%); }
.cine-bar.bot { bottom: 0; transform: translateY(100%); }
.cine.in .cine-bar { transform: none; }
.cine-text { position: absolute; left: 0; right: 0; bottom: 15vh; text-align: center; z-index: 3; color: #f4ead2; text-shadow: 0 2px 18px #000, 0 0 2px #000; pointer-events: none; }
.cine-kicker, .cine-title, .cine-sub, .cine-quip { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.cine.titled .cine-kicker { opacity: .85; transform: none; }
.cine.titled .cine-title { opacity: 1; transform: none; transition-delay: .25s; }
.cine.titled .cine-sub { opacity: .9; transform: none; transition-delay: .6s; }
.cine.titled .cine-quip { opacity: .95; transform: none; transition-delay: 1.4s; }
.cine-kicker { font: 600 clamp(11px, 1.3vw, 15px)/1 var(--title); letter-spacing: .45em; text-transform: uppercase; color: #e2b35b; margin-bottom: 10px; }
.cine-title { font: 700 clamp(30px, 5.4vw, 72px)/1.05 var(--deco); letter-spacing: .03em; }
.cine-sub { font: italic clamp(13px, 1.6vw, 20px)/1.4 var(--body); margin-top: 10px; color: #d8cbb0; }
.cine-quip { font: clamp(12px, 1.3vw, 16px)/1.3 system-ui, sans-serif; margin-top: 16px; color: #ffd98a; }
.cine-boss .cine-title { color: #ffd27a; text-shadow: 0 0 30px rgba(255, 170, 60, .6), 0 2px 18px #000; }
.cine-find .cine-title { color: #fff1c4; text-shadow: 0 0 26px rgba(255, 220, 120, .55), 0 2px 18px #000; }
.cine-find .cine-title.rar-legendary { color: var(--r-legendary); } .cine-find .cine-title.rar-mythic { color: #ff4d6d; }
/* F6: the found item floats large in a ray of light above the finder */
.cine-item { --rc: var(--r-legendary); position: absolute; left: 50%; top: 16%; z-index: 3; width: min(260px, 60vw); transform: translate(-50%, 30px) scale(.6); opacity: 0; text-align: center; pointer-events: none; transition: opacity .9s ease .7s, transform 1.4s cubic-bezier(.2,.8,.2,1) .7s; }
.cine-item.r-mythic { --rc: #ff4d6d; }
.cine.in .cine-item { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cine.out .cine-item { opacity: 0; transition-delay: 0s; }
.cine-item-ray { position: absolute; left: 50%; top: -40%; width: 140%; height: 190%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 62%); filter: blur(6px); animation: cineRay 3s ease-in-out infinite alternate; }
.cine-item-pic { position: relative; width: clamp(84px, 13vw, 140px); height: clamp(84px, 13vw, 140px); margin: 0 auto; display: grid; place-items: center; font-size: clamp(60px, 9vw, 104px); line-height: 1; border-radius: 18px; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(0,0,0,.35) 70%); border: 2px solid var(--rc); box-shadow: 0 0 34px var(--rc), inset 0 0 22px color-mix(in srgb, var(--rc) 40%, transparent); animation: cineFloat 2.6s ease-in-out infinite; }
.cine-item-pic svg { width: 72%; height: 72%; filter: drop-shadow(0 0 10px var(--rc)); }
.cine-item-name { position: relative; margin-top: 10px; font: 700 clamp(15px, 1.9vw, 22px)/1.2 var(--deco); text-shadow: 0 0 14px var(--rc), 0 2px 10px #000; }
.cine-item-base { position: relative; font: italic 12px/1.3 var(--body); color: #d8cbb0; text-transform: capitalize; text-shadow: 0 1px 6px #000; }
@keyframes cineFloat { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes cineRay { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cine-item-pic, .cine-item-ray { animation: none; } }
.cine-intro .cine-title { font-size: clamp(42px, 8vw, 110px); letter-spacing: .08em; background: linear-gradient(180deg, #fff6dc, #e2b35b 60%, #9a6a24); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)); }
.cine-intro .cine-text, .cine-saga .cine-text { bottom: auto; top: 38vh; }
.cine-saga .cine-title { font-size: clamp(36px, 6.4vw, 92px); letter-spacing: .05em; background: linear-gradient(180deg, #fff6dc, #e2b35b 60%, #9a6a24); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)); }
.cine-level .cine-title { color: #ffe9a8; text-shadow: 0 0 30px rgba(255, 200, 80, .7), 0 2px 18px #000; }
.cine-farewell .cine-title, .cine-ending.lost .cine-title { color: #d8dce6; text-shadow: 0 0 24px rgba(160, 180, 220, .45), 0 2px 18px #000; }
.cine-farewell .cine-kicker { color: #9aa6bc; }
.cine-arena .cine-title { color: #ffd0a0; text-shadow: 0 0 28px rgba(255, 110, 50, .55), 0 2px 18px #000; }
.cine-arena .cine-kicker { color: #ff9a6a; }
.cine-join .cine-title { color: #e8f4d8; text-shadow: 0 0 22px rgba(160, 230, 140, .45), 0 2px 18px #000; }
.cine-skip { position: absolute; right: 18px; bottom: calc(12vh + 10px); z-index: 4; font: 12px system-ui, sans-serif; color: rgba(255,255,255,.45); }
.nomotion .cine-view.flat { animation: none; }

/* ---------------------------------------------------------------- the landing page: live 3D camp behind a glass panel */
.hero-bg.landing { background: #07060a; }
.land-art, .land-3d, .land-vignette, .land-embers { position: absolute; inset: 0; }
.land-art { z-index: 0; transition: opacity 1.6s ease; }
.land-3d { z-index: 0; opacity: 0; transition: opacity 2.2s ease; }
.land-3d.live { opacity: 1; }
.land-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.land-3d .s3-hud, .land-3d .s3-wx { display: none; }
.land-vignette { z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 35%, rgba(5,3,2,.55) 75%, rgba(5,3,2,.92) 100%), linear-gradient(180deg, rgba(5,3,2,.35), rgba(5,3,2,0) 30%, rgba(5,3,2,0) 70%, rgba(5,3,2,.6)); }
.land-embers { z-index: 0; pointer-events: none; overflow: hidden; }
.land-embers::before, .land-embers::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10vh; height: 120vh;
  background-image: radial-gradient(2px 2px at 10% 90%, #ffb45a, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #ff8a3a, transparent), radial-gradient(2px 2px at 55% 85%, #ffd27a, transparent),
    radial-gradient(1.5px 1.5px at 75% 95%, #ff9a4a, transparent), radial-gradient(2.5px 2.5px at 88% 75%, #ffc060, transparent), radial-gradient(1.5px 1.5px at 42% 60%, #ffb45a, transparent);
  animation: embersUp 14s linear infinite; opacity: .7; }
.land-embers::after { animation-duration: 21s; animation-delay: -7s; transform: scale(1.4); opacity: .45; }
@keyframes embersUp { from { transform: translateY(0); } to { transform: translateY(-110vh); } }
.nomotion .land-embers::before, .nomotion .land-embers::after { animation: none; }
.auth.glass { background: linear-gradient(180deg, rgba(30,22,16,.62), rgba(14,10,8,.78)); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(226,179,91,.45); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,170,.12), 0 0 60px rgba(226,140,40,.12);
  padding: 26px 26px 20px; animation: authIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.auth.glass h1 { margin-top: 0; background: linear-gradient(180deg, #fff6dc 10%, #f0c870 55%, #a8761f); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 12px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(226,179,91,.25)); }
.auth .crest { text-align: center; font-size: 34px; color: var(--gold); line-height: 1; margin-bottom: 4px; text-shadow: 0 0 18px rgba(226,179,91,.6); animation: crestGlow 4s ease-in-out infinite; }
@keyframes crestGlow { 50% { text-shadow: 0 0 30px rgba(255,200,110,.9); } }
/* the login screen: the panel on the left on wide screens, so the camp and its heroes show on the right */
@media (min-width: 900px) { .hero-bg.landing { place-items: center start; padding-left: max(5vw, 24px); } .hero-bg.landing .auth { width: 400px; } }
.land-title { position: absolute; right: 4vw; bottom: 6vh; z-index: 1; text-align: right; pointer-events: none; display: none; }
@media (min-width: 900px) { .land-title { display: block; } }
.land-title .lt-kick { font: 600 13px/1 var(--title); letter-spacing: .45em; text-transform: uppercase; color: #e2b35b; opacity: .85; }
.land-title .lt-line { font: italic clamp(16px, 1.6vw, 22px)/1.4 var(--body); color: #e8dcc0; text-shadow: 0 2px 12px #000; margin-top: 8px; max-width: 36vw; }
.auth.glass input { background: rgba(10,7,5,.65); border-color: rgba(226,179,91,.28); padding: 11px 12px; transition: border-color .2s, box-shadow .2s; }
.auth.glass input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226,179,91,.18); }
.auth.glass .btn.primary { padding: 12px; font-size: 16px; letter-spacing: .08em; }
.auth.glass .feature { border: 1px solid rgba(226,179,91,.16); background: rgba(10,7,5,.35); border-radius: 8px; }
.auth.glass .tabs { border-bottom-color: rgba(226,179,91,.2); }
@media (max-width: 520px) { .auth.glass { padding: 18px 14px; } .auth.glass .features { display: none; } }

/* ---- hero sheet: section tiles that open a big window, footer with Part ways in the lower right; bonds & mood */
.sheetmodal .sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.sheet-foot { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); }
.sheet-social { gap: 6px; margin-top: 4px; min-height: 28px; flex-wrap: wrap; }
.chip.bad { border-color: #7a2a1d; }
.chip.dim { opacity: .5; }
.statbox .uses { font-size: 11px; color: var(--gold); min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.sec-tile { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); background: linear-gradient(180deg, #2b2119, #1d1610); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.sec-tile:hover { border-color: var(--gold); background: linear-gradient(180deg, #3a2a1b, #241a12); }
.sec-tile .grow { display: flex; flex-direction: column; min-width: 0; }
.sec-tile b { font-family: var(--title); font-size: 15px; color: var(--gold2); }
.sec-tile .si { font-size: 24px; flex: none; }
.sec-tile .go { color: var(--mute); flex: none; }
.sec-tile.hot { border-color: var(--gold); box-shadow: 0 0 12px rgba(226,179,91,.35); }
.modal.bigmodal { width: min(1240px, 100%); height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.bigmodal .big-head { flex: none; display: flex; align-items: center; gap: 10px; padding-right: 36px; margin-bottom: 8px; }
.bigmodal .big-tabs { flex: none; margin-bottom: 0; }
.bigmodal .big-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 6px 6px 0; }
.bigmodal .abilgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.abilcard .scale, .style-card .scale { color: var(--gold); }
.skillcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.skillcol { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #17110c; }
.skillrow { display: flex; gap: 8px; font-size: 15px; padding: 1px 0; color: var(--ink2); }
.skillrow.trained { color: var(--gold2); }
.mood-card .mood-face { font-size: 40px; line-height: 1; }
.bar.mood i { background: linear-gradient(90deg, #c8423a, #c9a227 50%, #6fbf73); }
.bar.thin { height: 4px; }
.bond-card { margin-bottom: 8px; border-left: 3px solid var(--line2); }
.bond-card.tone1, .bond-card.tone2 { border-left-color: var(--green); }
.bond-card.tone3 { border-left-color: #ff7ab8; }
.bond-card.tone-1 { border-left-color: var(--orange); }
.bond-card.tone-2, .bond-card.tone-3 { border-left-color: var(--red); }
.affbar { position: relative; height: 6px; border-radius: 3px; background: #120d0a; border: 1px solid var(--line); margin: 3px 0; max-width: 320px; }
.affbar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--mute); }
.affbar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.affbar i.pos { background: var(--green); } .affbar i.neg { background: var(--red); }
.bond-skills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.bond-mem { margin-top: 4px; font-style: italic; }
.bond-ref { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.chron-line { padding: 2px 0; border-bottom: 1px dashed rgba(74,58,42,.5); }
.bigmodal .good, .sheetmodal .good { color: var(--green); } .bigmodal .bad, .sheetmodal .bad { color: var(--red2); }
.bigmodal .chip.bad, .sheetmodal .chip.bad { color: var(--red2); }
@media (max-width: 640px) {
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .sec-tile { padding: 8px; gap: 6px; } .sec-tile .si { font-size: 20px; }
  .bigmodal .big-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .bigmodal .big-tabs .tab { flex: none; white-space: nowrap; }
}

/* bond scenes: a live 3D vignette of the heroes in the event picture (game.js bondVignette) */
.scene-art .scene-3d { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 60%, #241a12, #0b0806); }   /* dark until the stage is drawn (F7) */
.scene-art .scene-3d canvas { display: block; width: 100%; height: 100%; }
/* the dungeon view parked while a fight is on (game.js parkDelve): same fixed box, or its canvas grows without end and fights go black */
#delve-park .scene-3d { position: absolute; inset: 0; overflow: hidden; }
#delve-park .scene-3d canvas { display: block; width: 100%; height: 100%; }
.scene-art.has-3d { height: 250px; }
.scene-art.has-3d .pano-art { display: none; }   /* the painted panorama (positioned after the 3D box) would cover it */
@media (max-width: 700px) { .scene-art.has-3d { height: 180px; } }
/* places in 3D (three/place.js): the town, house and dungeon windows' picture strip grows a little when it is live */
.scene-card.tabbed .scene-art.has-3d { height: 220px; }
#overlay.in-dungeon .scene-card .scene-art.has-3d { height: 210px !important; }
@media (max-width: 700px) { .scene-card.tabbed .scene-art.has-3d { height: 140px; } #overlay.in-dungeon .scene-card .scene-art.has-3d { height: 150px !important; } }
/* F32: the coming foes over the painted picture before a fight (with the 3D picture on, the figures show them instead) */
.scene-art .art-foes { position: absolute; right: 14px; bottom: 12px; z-index: 1; display: flex; gap: 6px; align-items: flex-end; }
.scene-art .art-foe { font-size: 30px; line-height: 1; padding: 4px 6px; border-radius: 10px; background: rgba(20, 8, 8, .55); box-shadow: 0 0 0 1px rgba(255, 120, 90, .35); filter: drop-shadow(0 2px 4px #000); }
.scene-art .art-foe small { font-size: 13px; color: #ffd9c8; margin-left: 2px; }
.scene-art .art-foe.boss { font-size: 40px; box-shadow: 0 0 0 2px rgba(255, 90, 40, .7); }
.scene-art .art-foe.rival { font-size: 16px; font-family: var(--title); color: #ffe2c8; padding: 6px 10px; }
.scene-art.has-3d .art-foes { display: none; }

/* ---- menu pages (app.js nav): a backdrop of the land, glass panels and cards ---- */
.page-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center 40%; filter: saturate(.9) brightness(.62) blur(1.5px); transform: scale(1.04); }
.page-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 10%, rgba(20,14,10,0), rgba(12,9,7,.7) 80%), linear-gradient(180deg, rgba(12,9,7,.05) 0%, rgba(12,9,7,.55) 45%, rgba(12,9,7,.88)); }
.page > h2, .page .row > h2 { text-shadow: 0 2px 10px #000; }
.page .panel { background: linear-gradient(180deg, rgba(36,27,20,.84), rgba(20,15,11,.9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.page .card { background: linear-gradient(180deg, rgba(34,26,19,.86), rgba(22,17,12,.9)); border-color: rgba(226,179,91,.18); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.page .card.click:hover { box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(226,179,91,.45), 0 0 24px rgba(226,179,91,.12); }
/* a picked card must look picked even under the pointer (F1: the hover glow above hid the click, so the death options seemed dead) */
.card.sel, .page .card.sel, .page .card.sel:hover { border-color: var(--gold2); background-image: linear-gradient(180deg, rgba(226,179,91,.16), rgba(226,179,91,.05)), linear-gradient(180deg, #221a13, #19130e); box-shadow: 0 0 0 2px rgba(226,179,91,.6), 0 0 22px rgba(226,179,91,.25); }
.saga-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.saga-card > *:not(.saga-art) { margin-left: 12px; margin-right: 12px; }
.saga-card > .small { margin-bottom: 4px; }
.saga-card .saga-foot { margin-bottom: 10px; }
.saga-art { height: 96px; background-size: cover; background-position: center 45%; position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; margin-bottom: -18px; transition: background-position 1.2s ease; }
.saga-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(14,10,8,.92)); }
.saga-art > * { position: relative; }
.saga-art .saga-name { flex: 1; font: 700 19px/1.15 var(--title); color: #fff1cc; text-shadow: 0 2px 8px #000; }
.saga-card:hover .saga-art { background-position: center 55%; }
.saga-card.ended .saga-art { filter: grayscale(.6) brightness(.8); }
.saga-faces { position: relative; z-index: 1; gap: 0; }
.saga-faces > * { margin-right: -6px; border: 2px solid #1a130e; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.hero-card .hcard .name { font-size: 16px; }
.nav { background: linear-gradient(180deg, rgba(18,13,10,.92), rgba(18,13,10,.78)); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.brand { text-shadow: 0 0 18px rgba(226,179,91,.35); }
/* every page sits above the fixed backdrop, wrapped in a div or not (F1: the creator's wrapper left its Next button under it) */
.page-backdrop ~ :not(.nav), .page-backdrop ~ * > .page { position: relative; z-index: 1; }

/* F2 on phones: the fight's action panel gets enough room for its fixed top block and a scrolling move list */
@media (max-width: 720px) {
  .combat.c3d { grid-template-rows: 30vh 104px minmax(0, 1fr); }
  .combat.c3d .combat-field { height: 104px; }
  .combat.c3d .combat-bar, .combat:not(.c3d) .combat-bar { overflow: hidden; grid-template-rows: minmax(0, 1fr) 48px; padding: 6px; gap: 6px; }
  .combat-bar .clog { max-height: none; font-size: 13px; }
  .acts-list .abil { min-width: 0; max-width: calc(50% - 6px); padding: 5px 8px; }
}

/* 📘 the Manual window and the hero sheet's Skills tabs (N3, public/js/manual.js) */
.modal.manmodal { width: min(1240px, 100%); height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.manmodal h2 { margin: 0 0 8px; }
.man-search input { padding: 8px 10px; font-size: 15px; }
.man-wrap { display: flex; gap: 12px; flex: 1; min-height: 0; margin-top: 10px; }
.man-nav { width: 210px; flex: none; overflow-y: auto; border-right: 1px solid var(--line); padding-right: 8px; }
.man-link { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink2); }
.man-link:hover { background: var(--panel2); }
.man-link.on { color: var(--gold2); background: var(--panel2); box-shadow: inset 3px 0 0 var(--gold); }
.man-link.dim { opacity: .4; }
.man-body { flex: 1; overflow-y: auto; padding-right: 6px; }
.man-body h3 { margin: 0 0 8px; color: var(--gold2); font-family: var(--title); }
.man-body mark { background: rgba(230, 190, 90, .35); color: inherit; border-radius: 2px; }
.man-filters { gap: 8px; flex-wrap: wrap; position: sticky; top: 0; background: var(--panel); padding: 4px 0 8px; z-index: 1; }
.man-filters select { max-width: 220px; }
.sktabs .tab { padding: 6px 10px; font-size: 13px; }
.skcard .chip { font-size: 11px; padding: 1px 6px; }
@media (max-width: 700px) {
  .man-wrap { flex-direction: column; }
  .man-nav { width: auto; border-right: none; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; max-height: none; flex-wrap: nowrap; padding: 0 0 6px; }
  .man-link { white-space: nowrap; }
}
.man-body .click { cursor: pointer; text-decoration: underline dotted; } .man-body .gold { color: var(--gold2); }
/* 🤝 the Bond window (public/js/bondwin.js): plan the day, heroes and bonds, the day's log */
.party-tools .dropwrap { grid-column: 1 / -1; }
.modal.bwmodal { width: min(980px, 100%); height: min(860px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.bw { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bw-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-right: 30px; } .bw-head h2 { margin: 0; }
.bw-tabs { margin: 10px 0 0; }
.bw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 2px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.bw-body > .card { margin: 0; }
.bw-top { align-items: center; gap: 8px; }
.bw-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.bw-act { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--ink); cursor: pointer; font: inherit; }
.bw-act .bi { grid-row: span 2; font-size: 22px; } .bw-act b { font-size: 13px; }
.bw-act:hover:not(.no) { border-color: var(--gold); } .bw-act.no { opacity: .45; cursor: not-allowed; }
.bw-row .bw-hours { display: flex; align-items: center; gap: 6px; } .bw-row input[type=range] { width: 120px; }
.bw-teach { gap: 10px; margin-top: 6px; align-items: center; flex-wrap: wrap; } .bw-teach select { margin-left: 4px; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bw-chip { display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border: 1px solid var(--line); border-radius: 20px; background: rgba(0,0,0,.25); color: var(--ink2); cursor: pointer; font: inherit; font-size: 13px; position: relative; }
.bw-chip .portrait, .bw-chip .pt-xs { width: 26px; height: 26px; border-radius: 50%; }
.bw-chip.on { border-color: var(--gold); color: var(--gold2); background: rgba(201,160,80,.15); }
.bw-chip.else { opacity: .6; } .bw-chip.else i { font-style: normal; font-size: 11px; }
.bw-chip.no { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.bw-total { border-color: var(--gold); } .bw-warn { border-color: #a33; }
.bw-hero .bar.mood { max-width: 260px; margin: 3px 0; } .bw-ties { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0; }
.bw-bonds { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.dayplan-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.dayplan-acts .btn.on { border-color: var(--gold); color: var(--gold2); }
@media (max-width: 760px) { .modal.bwmodal { height: calc(100dvh - 16px); padding: 12px; } .bw-row input[type=range] { width: 90px; } }
/* N5: stat boxes are the buttons for ability points; the small Level up window */
.statbox.spend { cursor: pointer; border-color: var(--gold); box-shadow: 0 0 0 1px #c9a24a33 inset; transition: background .12s; }
.statbox.spend:hover { background: #2a1e10; }
.statbox.spend:active { background: #3a2a14; }
.statbox .plus-mark { position: absolute; top: 3px; right: 5px; color: var(--gold2); font-weight: 700; font-size: 15px; line-height: 1; pointer-events: none; }
.modal.lvlmodal { width: min(620px, 100%); height: min(680px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px);   /* F15: fixed size, editing the plan moves nothing */
  display: flex; flex-direction: column; overflow: hidden; }
.lvlmodal .big-head { flex: none; display: flex; align-items: center; gap: 10px; padding-right: 36px; margin-bottom: 8px; }
.lvlmodal .lvl-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 4px 0; }
.lvlmodal .statgrid { margin: 4px 0 6px; }
.lvlmodal .lvl-none { text-align: center; padding: 28px 12px; color: var(--ink2); }
.lvlmodal .lvl-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); gap: 8px; }

/* F7: one rule for every row of tabs: the title stays and the tab row never scrolls away with the list under it.
   Windows with a fixed layout (town / house / trader .scene-head, Command, Bonds, hero sheet, Manual, the big windows)
   already keep them out of the scrolling part; these catch the rest: a plain window and the full pages (arena, guild, rankings). */
.modal > .tabs, .page > .tabs { position: sticky; z-index: 6; background: rgba(28,21,16,.97); padding-top: 4px; }
.modal > .tabs { top: -16px; }
.page > .tabs { top: var(--navh, 54px); }
#arenapage > #ahead { display: contents; }   /* the arena's tab row sticks to the page, not to its short header box */
@media (max-width: 700px) { .page > .tabs { top: var(--navh, 90px); } }   /* the menu bar wraps onto two rows */
/* F9: a hero with perks or stat points to spend glows gold in the party list (still glow when menu motion is off) */
.party-card.can-up { border-color: rgba(240, 196, 80, .8); box-shadow: 0 0 10px 2px rgba(240, 196, 80, .45); animation: upglow 2.4s ease-in-out infinite; }
@keyframes upglow { 0%, 100% { box-shadow: 0 0 6px 1px rgba(240, 196, 80, .3); } 50% { box-shadow: 0 0 16px 4px rgba(240, 196, 80, .65); } }
.nomotion .party-card.can-up { animation: none; box-shadow: 0 0 10px 2px rgba(240, 196, 80, .45); }

/* N36: auto-combat mark in the party panel, auto-assign points in the level menu */
.autoskip { font-size: 11px; color: var(--warn, #e0a040); margin-left: 4px; cursor: help; }
.autopts { margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.autopts.on { border-color: var(--gold, #c9a227); }
.autopts > .row { gap: 6px; flex-wrap: wrap; }
.autopts .ap-name { display: inline-block; width: 92px; white-space: nowrap; }
.autopts .ap-on { width: 44px; }
.autopts .ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; margin: 6px 0; }
.autopts .ap-row { display: flex; align-items: center; gap: 4px; }
.autopts .ap-row b { width: 34px; flex: none; font-size: 12px; }
.autopts .ap-row.capped { opacity: .55; }
.autopts .ap-w { width: 42px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.autopts .btn.tiny { padding: 0 7px; min-width: 0; line-height: 18px; }

/* N34a: a hero sheet entry popped out bigger (util.js popOut) */
.popout-back { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s; }
.popout { position: relative; width: min(840px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); padding: 24px 30px; font-size: 23px; line-height: 1.45; }
.popout .x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--ink2); font-size: 30px; cursor: pointer; }
.popout .pop-head { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; padding-right: 40px; }
.popout .pop-icon { font-size: 64px; line-height: 1; width: 84px; text-align: center; flex: none; }
.popout .pop-icon svg { width: 72px; height: 72px; }
.popout .pop-name { font-family: var(--title); font-size: 32px; color: var(--gold2); }
.popout .chip { font-size: 17px; } .popout .label { font-size: 18px; } .popout b.small, .popout .abilcard b { font-size: 23px; }
.popout .small, .popout .tiny { font-size: 20px; }
.popout .card { border: none; background: none; padding: 0; cursor: default; }
.popout .pop-dmg { margin: 14px 0 8px; padding: 12px 15px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.popout .pop-dmg b.big { font-size: 33px; color: var(--gold2); }
.popout .pop-src { display: grid; grid-template-columns: 1fr auto; gap: 3px 20px; font-size: 20px; }
.popout .pop-src .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.popout .pop-diff .up { color: #7fd17f; } .popout .pop-diff .down { color: var(--red2); }
.sheetmodal [data-abil], .bigmodal [data-abil], .bigmodal [data-slot].filled, .bigmodal [data-buid], .bigmodal .big-body .card { cursor: default; }   /* F15: the arrow, not the "+" (still click to open) */
@media (max-width: 600px) { .popout-back { padding: 0; align-items: flex-end; } .popout { width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; padding: 18px 18px; font-size: 19px; } .popout .small, .popout .tiny, .popout .pop-src { font-size: 17px; } .popout .pop-name { font-size: 26px; } }
/* N34b: ability types. The ring sits inside the tile (2.5 px, hard segments from a conic gradient, never blended),
   a faint 4 px glow of the main colour at most; dense rows (the fight bar) get a segmented edge instead; nothing moves. */
.abil-ic { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 14px; line-height: 1; background: #120d09; box-shadow: 0 0 4px var(--glow, transparent); }
.abil-ic::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 2.5px; background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pop-icon .abil-ic { width: 66px; height: 66px; font-size: 33px; }
.pop-icon .abil-ic::before { padding: 4px; }
.abilcard.locked .abil-ic { box-shadow: none; }
.tchips { display: inline-flex; gap: 3px; flex: none; }
.tchip { display: inline-block; min-width: 15px; padding: 0 3px; border-radius: 3px; font: 700 10px/14px var(--body); text-align: center; color: #120d09; background: var(--tc); }
.abilcard .where { color: var(--gold); }
.tlegend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 8px; color: var(--ink2); }
.tlegend > span { display: inline-flex; align-items: center; gap: 4px; }
.abil.typed { position: relative; padding-left: 15px; }
.abil.typed::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--edge); }
.abilgrid { gap: 8px; }

/* N35b: places we were told about (Places tab) */
.lead-card { border-color: rgba(255, 205, 90, .55); box-shadow: inset 0 0 12px rgba(255, 200, 80, .08); }

/* N32b: the level-up perk offer: six cards, 3 x 2 on a desktop, a list on phones; owner badges and party perks */
.perk-offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.perk-card { display: flex; flex-direction: column; gap: 3px; }
.perk-card.party { border-color: var(--gold2); }
.perk-badges { gap: 4px; flex-wrap: wrap; }
.perk-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; border: 1px solid currentColor; opacity: .9; white-space: nowrap; }
.perk-badge.class { color: #8fb8ff; }
.perk-badge.people { color: #9fdc8f; }
.perk-badge.party { color: var(--gold2); }
.perk-covered { color: #e0a060; }
@media (max-width: 700px) { .perk-offer { grid-template-columns: 1fr; } }
/* N39: dojo training panel */
.dojo-train { margin-top: 10px; border: 1px solid #4a3560; background: linear-gradient(135deg, #20162a, #17110c); display: flex; flex-direction: column; gap: 4px; }
.dojo-train select { max-width: 100%; }
.dojo-each { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.dojo-each label { display: flex; align-items: center; gap: 4px; }

/* N17b: the Tactics window (public/js/tactics.js) */
.party-tools #tacleft { grid-column: 1 / -1; }
.modal.tacmodal { width: min(860px, 100%); height: min(860px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.tac { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tac-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-right: 30px; }
.tac-head h2 { margin: 0; }
.tac-tabs { flex-wrap: wrap; margin: 8px 0; }
.tac-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.tac-hero { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.tac .label { margin: 10px 0 5px; }
.tac-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.tac-role { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; text-align: left; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); color: inherit; cursor: pointer; }
.tac-role .tiny { grid-column: 1 / -1; }
.tac-role.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.tac-ic { font-size: 1.15em; width: 1.4em; text-align: center; }
.tac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 5px; }
.tac-sw { display: flex; gap: 6px; align-items: flex-start; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; opacity: .55; }
.tac-sw.on { opacity: 1; background: var(--panel2); }
.tac-sw input { margin-top: 3px; }
.tac-desc { display: block; }
.tac-rules { display: flex; flex-direction: column; gap: 6px; }
.tac-rule { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.tac-ctl { display: flex; gap: 6px; align-items: center; }
.tac-ctl input[type=number] { width: 70px; }
.tac-pri { margin-top: 8px; }
.tac-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 7px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; background: var(--panel); } /* F16: under the mentality, stays put while the skills scroll */
.tac-pname { width: 130px; }
@media (max-width: 600px) {
  .modal.tacmodal { height: calc(100dvh - 16px); padding: 12px; }
  .tac-roles { grid-template-columns: 1fr 1fr; }
  .tac-list { grid-template-columns: 1fr; }
  .tac-bar .grow { display: none; }
}

/* N43d: the roster hero's Build and Martial arts tabs */
.buildstats { width: 100%; border-collapse: collapse; margin: 4px 0; }
.buildstats td, .buildstats th { padding: 3px 4px; text-align: left; border-bottom: 1px solid #2a2016; }
.buildstats td.num { white-space: nowrap; }
.buildstats tr.dim td { opacity: .55; }
.buildstats .btn.small { padding: 0 7px; min-width: 24px; }
.capbar { width: 90px; display: inline-block; vertical-align: middle; height: 6px; }
.perkcard { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; }
.buildsum { display: flex; flex-direction: column; gap: 3px; }
.forge select { max-width: 230px; }
.modpick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.modpick .chip { cursor: pointer; }
.modpick input { margin: 0 3px 0 0; vertical-align: middle; }
.movepal { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.movepal .chip { cursor: grab; }
.cchain { min-height: 44px; border: 1px dashed var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.clink { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #17110c; cursor: grab; }
.clink b { min-width: 110px; }

/* N45: the cursor picked in Options (prefs.js cursorCss sets --cur and --curhand on <html>) */
html.ucur, html.ucur body { cursor: var(--cur); }
html.ucur :is(button, a[href], select, summary, label, [role=button], input[type=checkbox], input[type=radio], input[type=range], input[type=color],
  .btn, .click, .tab, .opttab, .choice, .item, .cbtn, .modebtn, .abil, .step, .sw, .chip, .party-card, .brand, .dnode.reach, .wv-cell.known,
  .region-banner, .seg button, .s3-ctrl button, .bigbtn, .gallery .portrait):not(:disabled):not(.locked):not(.off) { cursor: var(--curhand); }
/* Options > Keys (keys.js) */
.keytab .keygroup { margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .05em; }
.keytab .keyrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.keytab .keyslot { min-width: 64px; font-family: inherit; }
.keytab .keyslot.empty { opacity: .45; }
.keytab .keyslot.wait { border-color: var(--gold2); color: var(--gold2); animation: pulse2 1s infinite; }
.keytab .keyrow.fixed .chip { min-width: 134px; text-align: center; opacity: .8; }

/* N24d: the capture popup, the catch scene, the Menagerie */
.capmodal .cap-row { margin-bottom: 6px; }
.capmodal .good { color: var(--green2, #7dff8e); }
.unit .sum.pet { font-weight: 600; }
.catch-scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; pointer-events: none; z-index: 30; animation: catchfade 1.8s ease-out forwards; }
.catch-ring { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; border: 4px solid #f5d58e; box-shadow: 0 0 24px rgba(245, 213, 142, .7), inset 0 0 18px rgba(245, 213, 142, .5); background: radial-gradient(rgba(30, 22, 8, .85), rgba(30, 22, 8, .4)); animation: catchring 1s cubic-bezier(.2, .9, .3, 1.2) both; }
.catch-name { font-family: var(--title); font-weight: 900; font-size: 26px; text-shadow: 0 2px 0 #000, 0 0 10px #000; }
.catch-scene.still, .catch-scene.still .catch-ring { animation: none; }
@keyframes catchring { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); } }
@keyframes catchfade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.menamodal { width: min(760px, 96vw); }
.mena-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mena-body { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.mena-grp { margin-top: 12px; }
.mena-pet { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: start; padding: 8px; margin: 6px 0; border: 1px solid var(--line, #4a3a24); border-left: 4px solid var(--r-common); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.mena-pet.r-uncommon { border-left-color: var(--r-uncommon); } .mena-pet.r-rare { border-left-color: var(--r-rare); } .mena-pet.r-epic { border-left-color: var(--r-epic); } .mena-pet.r-legendary { border-left-color: var(--r-legendary); box-shadow: 0 0 10px rgba(255, 170, 40, .18); }
.mena-ic { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(var(--tint, rgba(255, 255, 255, .08)), transparent 70%); }
.mena-sk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mena-acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 150px; }
.mena-ren { width: 160px; }
.mena-warn, .mena-err { color: var(--red2, #ff8a7a); margin: 6px 0; font-weight: 600; }
.mena-seek { margin: 6px 0 4px; padding: 8px; border: 1px dashed var(--line, #4a3a24); border-radius: 6px; }
.mena-seek .row { gap: 8px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
.mena-pet .bar.xp { height: 4px; margin-top: 3px; } .mena-pet .bar.xp i { background: #7ab8e8; }
@media (max-width: 600px) { .mena-pet { grid-template-columns: 36px 1fr; } .mena-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; } }

/* N48: drawn icons (util.js icon(): a game-icons.net SVG as a mask over a gold gradient, or the table's tint --gf).
   --s = size (1.2em in text, px when given); .ring = a dark round tile with a soft gold ring; the drop shadow sits on the
   outer span because a filter on the masked element itself would be cut away by the mask. */
.gico { display: inline-grid; place-items: center; width: var(--s, 1.2em); height: var(--s, 1.2em); vertical-align: -0.24em; flex: none; line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 0 2px rgba(0, 0, 0, .45)); }
.gico > i { display: block; width: 100%; height: 100%; background: var(--gf, linear-gradient(180deg, #fff4cc 0%, #f1cf78 38%, #c8912f 72%, #8a5a1c 100%));
  -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; }
.gico.ring { border-radius: 50%; padding: calc(var(--s, 1.2em) * .17); box-sizing: border-box; filter: none;
  background: radial-gradient(circle at 35% 30%, #3a2c1d, #120d09 70%); box-shadow: inset 0 0 0 1px rgba(226, 179, 91, .55), 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .6); }
.gico.ring > i { filter: drop-shadow(0 1px 0 #000); }
.gico.emo { font-size: calc(var(--s, 1.2em) * .72); }
/* class auras: the two main stats of the class (util.js clsIcon, STAT_COLOR), first upper left, second lower right */
.gico.aura { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .85)) drop-shadow(-1px -1px 1.5px var(--a1)) drop-shadow(1px 1px 1.5px var(--a2)); }
.gico.ring.aura { filter: none; border: max(1.5px, calc(var(--s, 1.2em) * .06)) solid transparent;
  background: radial-gradient(circle at 35% 30%, #3a2c1d, #120d09 70%) padding-box, conic-gradient(from 225deg, var(--a1), var(--a1) 30%, var(--a2) 50%, var(--a2) 80%, var(--a1)) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), -2px -2px 7px -2px var(--a1), 2px 2px 7px -2px var(--a2); }
/* N50 colour cues (Options > Interface > Colour cues; html[data-cues]): stat colours, rarity glow, damage-type rings, status chips */
.st-str { --sc: #e5483b; } .st-dex { --sc: #4fd36a; } .st-con { --sc: #f0a030; } .st-int { --sc: #4f8ff7; } .st-wis { --sc: #dfe6ff; } .st-cha { --sc: #d35ce8; }
html[data-cues="all"] .statbox[class*="st-"], html[data-cues="all"] .pb .card[class*="st-"] { border-top: 2px solid var(--sc); }
html[data-cues="all"] .stw { color: var(--sc); font-weight: 600; }
.gico.rg-uncommon { --rc: var(--r-uncommon); } .gico.rg-rare { --rc: var(--r-rare); } .gico.rg-epic { --rc: var(--r-epic); } .gico.rg-legendary { --rc: var(--r-legendary); } .gico.rg-mythic { --rc: #ff4d6d; }
html[data-cues="all"] .gico.rg[class*="rg-"]:not(.rg-common):not(.ring) { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 0 2.5px var(--rc, transparent)) drop-shadow(0 0 1px var(--rc, transparent)); }
html[data-cues="all"] .gico.rg.ring:not(.rg-common) { box-shadow: inset 0 0 0 1.5px var(--rc, transparent), 0 0 6px -1px var(--rc, transparent); }
html[data-cues="all"] .abil-ic.dt { box-shadow: 0 0 0 1.5px #0b0805, 0 0 0 3px var(--dt), 0 0 5px var(--dt); }
html[data-cues="all"] .abilcard.locked .abil-ic.dt { box-shadow: 0 0 0 1.5px #0b0805, 0 0 0 3px var(--dt); }
html[data-cues="all"] .abil.typed.dt { box-shadow: inset 0 -2px 0 var(--dt); }
.unit .sts .stc { position: relative; padding: 0 2px; border-radius: 5px; }
.unit .sts .stc sub { font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; margin-left: -3px; vertical-align: -2px; }
html[data-cues="all"] .unit .sts .stc.good { background: rgba(214, 190, 70, .18); box-shadow: inset 0 0 0 1px rgba(150, 220, 90, .65); }
html[data-cues="all"] .unit .sts .stc.bad { background: rgba(170, 40, 90, .2); box-shadow: inset 0 0 0 1px rgba(220, 60, 110, .7); }
/* the class emblem on the hero menu's portrait */
.sheet-pic { position: relative; }
.sheet-pic > .cls-emblem { position: absolute; top: 5px; left: 5px; z-index: 2; pointer-events: auto; }
.sheet-pic > .hero-ban { position: absolute; top: 5px; right: 5px; z-index: 2; background: rgba(10,12,18,.55); border: 1px solid rgba(232,190,100,.45); border-radius: 6px; padding: 2px 3px; min-width: 30px; min-height: 30px; color: var(--gold2); font-size: 18px; cursor: pointer; line-height: 1; }
.sheet-pic > .hero-ban:hover { border-color: var(--gold); }
/* N51b: the emblem grid holds ~700: draw (and fetch) only the visible ones */
.bm-icons .bm-ico { content-visibility: auto; contain-intrinsic-size: 40px 40px; }
/* inside the ability-type ring (abilIcon) and the item tiles: fill most of the tile */
.abil-ic .gico.in-ring { --s: 62%; vertical-align: 0; }
.icon > .gico { --s: 80%; vertical-align: 0; }
.gi > .gico { --s: 1.15em; }
.pop-icon > .gico { --s: 70px; vertical-align: 0; }
.race-emblem .gico { vertical-align: 0; }

/* N25: faction banners (public/js/banners.js): the SVG field + the charge as a tinted mask with a dark edge */
.banr { position: relative; display: inline-block; width: var(--s, 40px); height: calc(var(--s, 40px) * 1.209); vertical-align: middle; flex: none; line-height: 0; }
.banr > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.banr > .chg { position: absolute; filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .95)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.banr > .chg > i { display: block; width: 100%; height: 100%; background: var(--gf); -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; }
.ban-modal { max-width: min(760px, 96vw); }
.ban-body { margin-top: 6px; }
.ban-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; margin-top: 6px; padding: 4px; }
.ban-pick { background: rgba(0, 0, 0, .25); border: 1px solid rgba(226, 179, 91, .18); border-radius: 6px; padding: 5px 0 3px; cursor: pointer; display: grid; place-items: center; }
.ban-pick:hover { border-color: rgba(226, 179, 91, .6); }
.ban-pick.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 8px rgba(226, 179, 91, .4); }
.ban-make { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; margin-top: 6px; }
.ban-make select { width: 100%; display: block; }
/* N51: banner v2: aura (one or two colours, like .gico.aura), laurel wreath behind, motto ribbon under the big banner */
.banr.au-soft { filter: drop-shadow(0 0 calc(var(--s) * .05) var(--a1)) drop-shadow(0 0 calc(var(--s) * .03) var(--a2)); }
.banr.au-strong { filter: drop-shadow(0 0 calc(var(--s) * .07) var(--a1)) drop-shadow(0 0 calc(var(--s) * .07) var(--a2)) drop-shadow(0 0 calc(var(--s) * .03) var(--a1)); }
.banr.au-pulse { filter: drop-shadow(0 0 calc(var(--s) * .06) var(--a1)) drop-shadow(0 0 calc(var(--s) * .05) var(--a2)); animation: banpulse 2.4s ease-in-out infinite; }
@keyframes banpulse { 50% { filter: drop-shadow(0 0 calc(var(--s) * .11) var(--a1)) drop-shadow(0 0 calc(var(--s) * .08) var(--a2)) drop-shadow(0 0 calc(var(--s) * .03) var(--a1)); } }
.nomotion .banr.au-pulse { animation: none; }
.banr > .lau { position: absolute; left: -20%; width: 140%; top: 38%; height: 76%; }
.banr > .lau > i { display: block; width: 100%; height: 100%; background: linear-gradient(170deg, #fff1b8, #d9a640 45%, #7a5216); -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.banr > .ban-motto { position: absolute; top: calc(100% + var(--s) * .05); left: -12%; right: -12%; text-align: center; line-height: 1.5; font: italic 600 max(10px, calc(var(--s) * .075))/1.5 var(--serif, Georgia, serif); color: #2b1a06; background: linear-gradient(#f3dfa6, #c9a35a); border: 1px solid #7a5216; border-radius: 3px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
/* N51: the banner maker window (public/js/bannermaker.js) */
.bm-modal { max-width: min(1040px, 97vw); width: 1040px; }
.bm { display: grid; grid-template-columns: 290px 1fr; gap: 14px; }
.bm-left { display: flex; flex-direction: column; }
.bm-big { display: grid; place-items: center; padding: 22px 10px 52px; background: radial-gradient(circle at 50% 40%, #2a2f3a, #0d0f14); border-radius: 8px; border: 1px solid rgba(226, 179, 91, .25); min-height: 330px; }
.bm-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.bm-sizes > div { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 6px; border-radius: 6px; }
.bm-dark { background: #14161c; border: 1px solid #2a2d36; }
.bm-light { background: #e9e2d0; border: 1px solid #c6b998; }
.bm-name { margin-top: 6px; color: var(--gold2); }
.bm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.bm-tab { max-height: min(560px, 64vh); overflow-y: auto; padding-right: 4px; }
.bm-tab .ban-grid { max-height: none; }
.bm-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bm-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(226, 179, 91, .18); border-radius: 6px; cursor: pointer; color: inherit; font-size: 11px; }
.bm-opt:hover { border-color: rgba(226, 179, 91, .6); }
.bm-opt.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bm-sws { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.bm-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .6); cursor: pointer; padding: 0; box-shadow: inset 0 1px 2px rgba(255, 255, 255, .35); }
.bm-sw.on { outline: 2px solid var(--gold); outline-offset: 2px; }
.bm-sw.same { background: #333; color: #ddd; font-weight: 700; }
.bm-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; margin-top: 6px; }
.bm-ico { aspect-ratio: 1; background: rgba(0, 0, 0, .3); border: 1px solid rgba(226, 179, 91, .18); border-radius: 6px; cursor: pointer; padding: 6px; color: #ccc; font-size: 18px; }
.bm-ico > i { display: block; width: 100%; height: 100%; background: linear-gradient(170deg, #fff4cc, #d9a640 60%, #8a5a1c); -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; }
.bm-ico:hover { border-color: rgba(226, 179, 91, .6); }
.bm-ico.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 8px rgba(226, 179, 91, .4); }
.bm-saved { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bm-sv { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: rgba(0, 0, 0, .2); border-radius: 6px; }
@media (max-width: 760px) { .bm { grid-template-columns: 1fr; } .bm-big { min-height: 0; } .bm-tab { max-height: none; } }

/* ---- castle chat: the right panel's groups (the ⚑ Command group stands out), the Command overview, war and lands */
.gright .rtabs.rgroups { padding-bottom: 6px; }
.gright .rtabs.rsub { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); padding-top: 6px; background: rgba(28,21,15,.98); }
.gright .rtabs.rsub .tab { flex-direction: row; justify-content: center; gap: 4px; padding: 4px 2px; font-size: 12px; }
.gright .rtabs.rsub .tab .ti { font-size: 14px; }
.gright .rtabs .tab.rg-cmd { border-color: #8a6a2a; background: linear-gradient(180deg, rgba(120,84,30,.35), rgba(60,40,18,.25)); color: var(--gold2); }
.gright .rtabs .tab.rg-cmd.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.cmd-big { width: 100%; justify-content: center; margin-bottom: 8px; font-size: 15px; }
.cmd-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.cmd-quick .btn { justify-content: flex-start; }
.cmd-alert { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 5px; }
.cmd-alert.bad { border-color: var(--red); }
.cmd-forces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cmd-forces > div { border: 1px solid var(--line); border-radius: 8px; padding: 5px 3px; text-align: center; display: flex; flex-direction: column; }
.cmd-forces b { font-size: 16px; color: var(--gold2); }
.cmd-forces span { font-size: 10px; color: var(--ink2); line-height: 1.1; }
.war-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-bottom: 6px; }
.war-group { cursor: pointer; padding: 8px; }
.war-group.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.war-g { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 4px; }
.war-def { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.war-off.on { border-color: var(--gold); }
/* N62g: rank block (Officers tab, hero sheet): XP bar, buttons, badges; the service record; the rank badge on party portraits */
.rk-wrap { margin-top: 3px; }
.rank-ctl { display: flex; flex-direction: column; gap: 3px; }
.rk-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rk-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; }
.rk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.rk-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.rk-why { color: var(--ink2); }
.rk-ready { color: var(--gold2); border-color: var(--gold); }
.svc-rec { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.15); }
.svc-rec .chip.medal { margin: 2px 2px 0 0; }
.svc-log { margin-top: 3px; line-height: 1.35; }
.pf-wrap { position: relative; display: inline-block; flex: none; }
.rank-badge { position: absolute; right: -4px; bottom: -3px; font-size: 13px; line-height: 1; padding: 1px 2px; border-radius: 6px; background: rgba(20,14,8,.85); border: 1px solid var(--gold); pointer-events: none; }
.war-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 8px; }
.war-perk { border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.war-perk .pips { color: var(--gold2); letter-spacing: 1px; font-size: 12px; margin-right: 6px; }
/* N60c: War / Personal tabs, compact rows, search */
.war-perks-box { margin-top: 8px; }
.war-perks-box .wp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.war-perks-box .wp-q { flex: 1 1 140px; min-width: 0; max-width: 240px; margin-left: auto; padding: 3px 6px; }
.war-perks-box .war-perks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px; margin-top: 6px; }
.war-perks-box[data-tab="war"] .war-perk[data-pkind="personal"], .war-perks-box[data-tab="personal"] .war-perk[data-pkind="war"], .war-perk[hidden] { display: none; }
.war-perks-box .war-perk { padding: 3px 6px; min-width: 0; }
.war-perks-box .war-perk.has { border-color: var(--gold2); }
.war-perk .wp-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.war-perk .wp-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-perk .wp-top .btn { padding: 0 8px; }
.siege-state .chip { font-size: 12px; }
@media (max-width: 600px) { .cmd-forces { grid-template-columns: repeat(2, 1fr); } .cmd-quick { grid-template-columns: 1fr 1fr; } }
/* N29: the Gauntlet record tab */
.pve-record { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 900px) { .pve-record { grid-template-columns: 1fr; } }
.pve-ach { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.pve-a { display: flex; gap: 8px; align-items: center; padding: 5px 7px; border-radius: 6px; background: rgba(0,0,0,.25); opacity: .75; }
.pve-a.done { opacity: 1; box-shadow: inset 0 0 0 1px #c9a24a; }
.pve-ai { font-size: 22px; width: 28px; text-align: center; }
/* N54b: a land's rule (unrest bar, law switch, festival) in the Lordship tab, the Lands page and Command */
.land-rule { margin: 6px 0; padding: 6px 8px; border: 1px solid rgba(232,184,90,.25); border-radius: 6px; background: rgba(0,0,0,.18); }
.land-unrest .lu-row { display: flex; justify-content: space-between; gap: 8px; }
.land-unrest .lu-bar { position: relative; height: 7px; margin: 3px 0 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.land-unrest .lu-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #7fc97a; transition: width .3s; }
.land-unrest.uneasy .lu-bar i { background: #e8b85a; }
.land-unrest.riot .lu-bar i { background: #ff7a5c; }
.land-unrest .lu-bar s { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,170,90,.8); }
.land-unrest .lu-bar s.reb { background: #ff4a3a; }
.land-rule .lu-causes { margin-bottom: 4px; line-height: 1.5; }
.land-rule .lu-law, .land-rule .lu-deeds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.land-rule .lu-law .tiny { margin-right: 2px; }
/* F20: roster tiles open the hero on a click (keyboard focus shows the same ring); entries in the hero window pop out */
.htile:focus-visible, .sh-card:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.sheetmodal #hsb .card, .sheetmodal #hsb .item, .sheetmodal #hsb .slot.filled { cursor: pointer; }
/* N58d: the dungeon 3D view: the path strip over the picture, the openings' tags (= the "Paths ahead" buttons' numbers) */
.scene-art .delve-strip { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; pointer-events: none; font-size: 13px; line-height: 1.35; color: #e8dcc2; text-shadow: 0 1px 4px #000, 0 0 2px #000; }
.delve-strip .ds-floor { font-family: var(--title); color: var(--gold2); padding: 1px 8px; border: 1px solid rgba(226,179,91,.45); border-radius: 10px; background: rgba(12,9,6,.6); }
.delve-strip .ds-trail { padding: 2px 9px; border-radius: 10px; background: rgba(12,9,6,.55); }
.delve-strip .here { color: #ffe6a8; font-weight: 600; } .delve-strip .ds-path i { font-style: italic; }
.delve-strip .ds-arr, .delve-strip .ds-more { opacity: .6; } .delve-strip .ds-q { color: var(--gold); font-weight: 700; }
.s3-hud .dv-tag { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; gap: 4px; align-items: center; padding: 3px 8px 3px 4px; border-radius: 14px; border: 1px solid #8a6a3a; background: rgba(20,14,9,.82); color: #f3e3bf; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.6); transition: transform .12s, border-color .12s, box-shadow .12s; }
.s3-hud .dv-tag b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a4224, #22180e); color: var(--gold2); font-family: var(--title); font-size: 12px; }
.s3-hud .dv-tag.lit { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,210,120,.55); transform: translate(-50%, -50%) scale(1.12); }
.s3-hud .dv-tag.shut { padding: 3px 7px; cursor: help; opacity: .85; border-color: #6a3a2a; }
.s3-hud .dv-note { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); max-width: min(560px, 92%); padding: 4px 10px; border-radius: 8px; background: rgba(12,9,6,.82); color: #eadfc6; font-size: 13px; text-align: center; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 3; }
.s3-hud .dv-note.on { opacity: 1; }
.choice .dnum { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: #3a2a18; color: var(--gold2); font-family: var(--title); font-size: 12px; flex: none; }
.choice.lit { border-color: var(--gold); background: linear-gradient(90deg, #3a2a1b, #1f1711); box-shadow: 0 0 0 2px rgba(226,179,91,.3); }
#overlay.in-dungeon .scene-card .scene-art.has-3d .art-title { font-size: clamp(16px, 3vw, 22px); }
@media (min-width: 1100px) { #overlay.in-dungeon .scene-card .scene-art.has-3d { height: clamp(260px, 42vh, 560px) !important; } #overlay.in-dungeon .scene-card .scene-art { height: clamp(140px, 22vh, 260px) !important; } }
@media (min-width: 1500px) and (min-height: 900px) { #overlay.in-dungeon .scene-card .scene-body { font-size: 16px; } }
@media (max-width: 700px) { .scene-art .delve-strip { font-size: 11px; top: 5px; left: 6px; right: 6px; } .s3-hud .dv-tag { font-size: 12px; padding: 2px 6px 2px 3px; } }
/* the saga's top bar: the title goes to the main menu, a clear Main menu button; the Esc game menu (2026-11-12) */
.gtop .gbrand { text-decoration: none; font-size: 18px; }
.gtop .homebtn { border-color: var(--gold2); color: var(--gold2); }
.gamemenu { max-width: 340px; }
.gamemenu .gm-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.gamemenu .gm-list .btn { width: 100%; justify-content: center; }
@media (max-width: 760px) { .gtop .gbrand-t { display: none; } }

/* N61d: food and siege screens */
.tiny.warn, .small.warn { color: var(--red2); }
.card.larder.hungry { border-color: var(--red); }
.cmd-res .hungry .big { color: var(--red2); }
.war-bk { margin-top: 4px; padding: 4px 6px; border-left: 2px solid var(--red); background: rgba(120, 40, 20, .12); border-radius: 4px; }
.war-bk > div + div { margin-top: 2px; }
.war-terms { margin-top: 4px; padding: 4px; border: 1px dashed var(--gold2); border-radius: 4px; }
.war-siege { border-color: var(--red); }
/* N55e: the hidden dungeon map's bar, exits and Turn back list */
.dbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.dgroup { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.dexit { display: flex; gap: 6px; align-items: stretch; }
.dexit .choice { flex: 1; }
.dexit .dscout { white-space: nowrap; min-width: 0; flex: 0 0 auto; } /* CP18: not the 320px floor of .choices .btn (the scout took half the row) */
/* F28: the Turn back list: 3 small one-line rows under the paths, the rest folded */
.dback { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.dback .choice { padding: 4px 10px; font-size: 13px; gap: 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dback .choice .num { min-width: 20px; height: 20px; font-size: 11px; }
.dback-more { display: flex; flex-direction: column; gap: 4px; }
.dback-more summary { cursor: pointer; color: var(--gold2); padding: 2px 4px; }
.dback-more[open] { gap: 3px; }
.dback-more[open] > .choice { width: 100%; box-sizing: border-box; margin-top: 3px; padding: 2px 10px; font-size: 12px; }
.dnode.unseen text { opacity: .8; }
.dedge.blocked line { opacity: .85; }
/* N55k: dungeon screen 2: map + side bar, floor switcher, map marks, the Codex */
.dlay { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.dlay .dmain { flex: 3 1 440px; min-width: 0; }
.dlay .dside { flex: 1 1 230px; }
.dside { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid #3a2c1e; border-radius: 8px; background: rgba(20, 14, 9, .55); }
.dside-sec .label { margin: 0 0 3px; }
.dfloors { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.dmap.dsketch { outline: 1px dashed #6a5232; outline-offset: -2px; border-radius: 6px; }
.dnode.empty { opacity: .55; }
.dcorner { pointer-events: none; }
.domen { animation: none; }
.ddw { font-size: 13px; }
.ddot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dseals { font-size: 15px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.dseals .broken { opacity: .45; }
.dfx summary, .dpages summary, .codex-place summary { cursor: pointer; font-size: 13px; }
.dfx p, .dpages p { margin: 4px 0 2px 14px; }
.dfx.bad summary { color: #f0a090; }
.dfx.good summary { color: #a8e09a; }
.dterror { font-size: 13px; padding: 6px; border: 1px solid #8a3a30; border-radius: 6px; background: rgba(90, 20, 15, .35); }
.dterror.hunt { border-color: #ff5a4a; }
.dtricks { display: flex; flex-wrap: wrap; gap: 4px; }
.codex-rank { margin: 6px 0 10px; }
.codex-rank .cbar { height: 8px; border-radius: 4px; background: #2a2018; margin: 4px 0; overflow: hidden; }
.codex-rank .cbar span { display: block; height: 100%; background: #d0a040; }
.codexmodal { max-width: 640px; }
/* N62c: rank seats, role lines, rank-only and locked perks */
.seats { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 6px; }
.seat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.seat-k { min-width: 120px; }
.chip.seat.full { border-color: var(--gold); }
.chip.seat.free { border-style: dashed; }
.ranks-roles { margin: 2px 0 6px; }
.ranks-roles .rank-role { margin: 3px 0 3px 8px; }
.rank-now { margin: 2px 0 4px; }
.wp-rank { font-size: 10px; padding: 0 5px; border: 1px solid var(--line); border-radius: 8px; margin-right: 4px; white-space: nowrap; color: var(--muted); }
.wp-rank.only { border-color: var(--gold); color: var(--gold2); }
.wp-sleep { font-size: 10px; margin-right: 4px; color: #9ab; white-space: nowrap; }
.wp-lock { color: var(--muted); }
.chip.wp-aside { border-color: #b86; color: #e9b; }
.war-perk.locked { opacity: 0.55; }
.war-perk.asleep { border-style: dashed; }
.wp-only { border: 1px solid var(--gold); border-radius: 8px; padding: 6px; margin: 4px 0 6px; }
.wp-only .label { margin-bottom: 4px; }
.wp-more summary { cursor: pointer; margin: 4px 0; }
.war-perks-box[data-tab="personal"] .wp-only { display: none; }

/* N63c: the Heroes window (public/js/heroesui.js) */
.modal.hrwmodal { width: min(1180px, 100%); height: min(880px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.hrw { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hrw-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.hrw-sum { font-size: 13px; opacity: .9; }
.hrw-body { flex: 1; overflow: auto; min-height: 0; padding-top: 8px; }
.hrw-filters { gap: 6px; margin-bottom: 6px; }
.hrw-filters select, .hrw-q { max-width: 190px; }
.hrw-bulk { gap: 8px; align-items: center; margin-bottom: 6px; }
.hrw-tablewrap { overflow-x: auto; }
.hrw-table { width: 100%; border-collapse: collapse; }
.hrw-table th { text-align: left; font-size: 12px; opacity: .75; position: sticky; top: 0; background: var(--panel, #1c1712); }
.hrw-table td, .hrw-table th { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
.hrw-table tr.hrw-warn td { background: rgba(200, 80, 60, .08); }
.hrw-who { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.hrw-who .portrait, .hrw-chip .portrait { width: 28px; height: 28px; flex: none; }
.hrw-rank { white-space: nowrap; font-size: 12px; }
.hrw-cols { display: flex; gap: 8px; overflow-x: auto; align-items: flex-start; padding-bottom: 6px; }
.hrw-col { min-width: 190px; flex: 0 0 200px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.hrw-col.target { border-color: rgba(230, 190, 90, .45); }
.hrw-colhead { margin-bottom: 4px; }
.hrw-chip { display: inline-flex; gap: 6px; align-items: center; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.hrw-chip.on { outline: 2px solid #e6be5a; }
.hrw-seat { display: inline-block; margin-right: 6px; white-space: nowrap; }
.hrw-seat.full { color: #e6a85a; }
.hrw-pseat { margin: 3px 0; }
.hrw-cp { margin-bottom: 8px; }
.hrw-err { margin-bottom: 8px; }
@media (max-width: 700px) { .modal.hrwmodal { height: calc(100dvh - 16px); padding: 12px; } .hrw-filters select, .hrw-q { max-width: 46%; } }
/* N64d: party talk drawer (bottom right of the map, beside the zoom buttons) and the mark tool */
.talk { position: absolute; right: 64px; bottom: 12px; z-index: 12; }
.talk.hidden { display: none; }
.talk-btn { width: 44px; height: 44px; padding: 0; font-size: 19px; position: relative; }
.talk-btn.new i { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.talk.open { width: min(340px, calc(100vw - 100px)); background: rgba(22,16,12,.96); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: min(420px, calc(100% - 30px)); }
.talk-head { display: flex; align-items: center; gap: 6px; }
.talk-head b { flex: 1; }
.talk-calls { display: flex; flex-wrap: wrap; gap: 4px; }
.talk-calls .chip { cursor: pointer; font-size: 12px; padding: 3px 7px; }
.talk-log { overflow-y: auto; min-height: 60px; max-height: 220px; font-size: 13px; display: grid; gap: 2px; align-content: start; overflow-wrap: anywhere; }
.talk-log .tl.call { color: #f0d9a8; font-style: italic; }
.talk-log .tl.mine b { color: var(--gold); }
.talk-say { display: flex; gap: 6px; }
.talk-say input { flex: 1; min-width: 0; }
.mk-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-modal #mknote { width: 100%; margin: 8px 0; }
.tp-marks { display: grid; gap: 2px; margin-bottom: 6px; }
.tp-mark { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tp-mark .linkish { flex: 1; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; padding: 2px 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .talk { right: 60px; } .talk.open { width: calc(100vw - 84px); } }
/* N64e: suggestions, the leader's prompt, road duties, the wayside card, open dungeon votes */
.sug-card { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; margin: 4px 0; border: 1px solid var(--gold); border-radius: 8px; background: rgba(70,52,14,.35); font-size: 13px; }
.sug-card.mine { border-color: var(--line2); background: rgba(40,32,22,.5); }
.chip.sug { border-color: #ffd34d; color: #ffd34d; }
.duties { display: grid; gap: 4px; }
.duty { display: flex; align-items: center; gap: 8px; text-align: left; padding: 5px 8px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(30,22,16,.7); color: inherit; cursor: pointer; font: inherit; font-size: 13px; }
.duty:hover:not([disabled]) { border-color: var(--gold); }
.duty.mine { border-color: var(--gold); background: rgba(70,52,14,.45); }
.duty[disabled] { opacity: .55; cursor: default; }
.duty-i { font-size: 18px; }
.duty-held { margin: 2px 0; }
.wayside { position: absolute; right: 64px; top: 12px; z-index: 12; width: min(320px, calc(100% - 90px)); background: rgba(22,16,12,.96); border: 1px solid var(--gold); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 10px; }
.wayside.hidden { display: none; }
.wayside p { margin: 6px 0; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ws-choices { display: grid; gap: 4px; }
.ws-choices .btn { text-align: left; }
.ws-res { color: var(--muted, #b9a88a); }
.ws-res.ok { color: #9fd18b; }
.vchips { display: inline-flex; gap: 2px; margin-right: 4px; vertical-align: middle; }
.vchip { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; background: #3a5a8a; color: #fff; font-size: 10px; font-weight: 700; }
.vchip.me { background: #b8862b; }
.voted { outline: 2px solid #ffd34d; outline-offset: -2px; }
.dvotebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 6px 10px; border: 1px dashed var(--line2); border-radius: 8px; }
.dvote { font-size: 10px; fill: #ffd34d; }
/* N64d leftover: with the talk drawer open the toasts go up top, off its input */
body:has(.talk.open) #toasts { top: 60px; bottom: auto; }

/* N64h: the trial card (parts with takers, the split clue, the outcome) */
.trial-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 8px 0; }
.trial-part { text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: linear-gradient(160deg, #2a1f16, #1c1510); color: var(--ink); font-family: var(--body); font-size: 15px; }
button.trial-part { cursor: pointer; transition: .15s; }
button.trial-part:hover:not([disabled]) { border-color: var(--gold); }
.trial-part.mine { border-color: var(--green); box-shadow: 0 0 0 1px #2f6b33 inset; }
.trial-part.taken { opacity: .8; }
.trial-part .row { gap: 4px; flex-wrap: wrap; }
.trial-part-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.trial-by { display: flex; gap: 4px; flex-wrap: wrap; }
.trial-heroes { display: flex; gap: 4px; flex-wrap: wrap; }
.trial-wait { margin: 4px 0; }
.trial-clue { border: 1px dashed #7c5c2a; border-radius: 9px; padding: 8px 12px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; background: rgba(60, 40, 15, .25); }
.clue-line { font-style: italic; }
.clue-form { gap: 6px; align-items: center; flex-wrap: wrap; }
.clue-form input { flex: 1; min-width: 140px; }
.clue-ok { color: var(--green); }
.trial-grade { font-size: 18px; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); }
.trial-grade.all { border-color: #2f6b33; } .trial-grade.none { border-color: #7a2a1d; }
.trial-rolls > * { opacity: 0; animation: trialRoll .35s ease forwards; }
.trial-rolls > *:nth-child(2) { animation-delay: .5s; } .trial-rolls > *:nth-child(3) { animation-delay: 1s; } .trial-rolls > *:nth-child(4) { animation-delay: 1.5s; }
.trial-rolls > *:nth-child(5) { animation-delay: 2s; } .trial-rolls > *:nth-child(n+6) { animation-delay: 2.5s; }
.scene.still .trial-rolls > * { opacity: 1; animation: none; }
@keyframes trialRoll { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }