/* sandals.css — Swords & Sandals overhaul layer (see load order in index.html). */
/* Theme layer: dark wood, bronze trim, parchment, crimson and gold. Colours, fonts, borders and shadows only. */
:root{color-scheme:dark;
 --ss-ink:#2b1709;--ss-wood:#3b2414;--ss-wood-2:#4d301a;--ss-leather:#6b4424;--ss-parch:#f3e3bd;--ss-parch-2:#e3c78f;--ss-parch-ink:#3a220f;
 --ss-bronze:#c98b3c;--ss-bronze-hi:#f0c46a;--ss-gold:#ffd24a;--ss-red:#c0392b;--ss-red-dk:#7d1a12;--ss-blue:#3f7fbf;
 --ss-hp:#5fb83a;--ss-hp-enemy:#e0452f;--ss-energy:#ffb627;
 --ss-font-display:'Lilita One','DM Sans',system-ui,sans-serif;
 --ss-outline:0 2px 0 var(--ss-ink),2px 0 0 var(--ss-ink),-2px 0 0 var(--ss-ink),0 -2px 0 var(--ss-ink),1.5px 1.5px 0 var(--ss-ink),-1.5px 1.5px 0 var(--ss-ink),1.5px -1.5px 0 var(--ss-ink),-1.5px -1.5px 0 var(--ss-ink),0 4px 6px #0007;
 --ss-outline-sm:0 1px 0 var(--ss-ink),1px 0 0 var(--ss-ink),-1px 0 0 var(--ss-ink),0 -1px 0 var(--ss-ink),1px 1px 0 var(--ss-ink),-1px 1px 0 var(--ss-ink),1px -1px 0 var(--ss-ink),-1px -1px 0 var(--ss-ink),0 2px 3px #0008;
 --ss-bevel:inset 0 2px 0 #fff5,inset 0 -3px 0 #0004,0 3px 0 var(--ss-ink);
 --ss-bevel-press:inset 0 2px 0 #fff3,inset 0 -1px 0 #0004,0 1px 0 var(--ss-ink);
 --ss-grain:repeating-linear-gradient(176deg,#0000 0 7px,#1a0b0312 7px 8px,#0000 8px 15px,#ffd9a00a 15px 16px);
 --ss-wood-bg:var(--ss-grain),linear-gradient(180deg,#56361c,#452a16 22%,#3b2414 70%,#321d0f);
 --ss-panel-shadow:inset 0 1px 0 #ffd79a3d,inset 0 0 0 1px #2b170980,0 0 0 1px #2b1709b3,0 4px 0 #1a0b03a6,0 8px 18px #0006;
 --ss-parch-bg:radial-gradient(ellipse at 28% 18%,#fff8e2,#fff8e200 58%),radial-gradient(ellipse at 85% 95%,#d9b575aa,#d9b57500 55%),linear-gradient(#f5e6c2,#ead29f);
 /* legacy tokens re-pointed */
 --bg:#1f1109;--panel:var(--ss-wood);--panel-light:var(--ss-wood-2);--line:#8a5d3399;--gold:var(--ss-bronze-hi);--gold-light:#ffe0a0;
 --text:#fff3dc;--muted:#e3cba5;--green:#8ed06a;--red:#ff8f78;--display:var(--ss-font-display)}
/* Lilita One has a single weight: never fake-bold it (DM Sans/Cinzel have real bold faces). */
html{font-synthesis:style;background:var(--bg)}
body{background:radial-gradient(ellipse at 60% 0,#6b3f1a55,transparent 50%),var(--bg)}
.mobile-app.map-app{--scene-shadow:0 1.5px 0 var(--ss-ink),1.5px 0 0 var(--ss-ink),-1.5px 0 0 var(--ss-ink),0 -1.5px 0 var(--ss-ink),1px 1px 0 var(--ss-ink),-1px 1px 0 var(--ss-ink),1px -1px 0 var(--ss-ink),-1px -1px 0 var(--ss-ink),0 3px 5px #000a}
.venue-screen{background:var(--ss-ink);--venue-ink:#fff3dc;--venue-muted:#efd9b3;--venue-surface:#3b2414f2}
.venue-content{--text:#fff3dc;--muted:#efd9b3;--line:#c98b3c66;--panel:var(--venue-surface);--venue-muted:#efd9b3;--venue-surface:#3b2414f2}
.venue-magic{--venue-surface:#3b2414f2}
.venue-screen:before{background:linear-gradient(#2b1709f4,#3b2414ee 86%,#3b241400)}

/* ---------- display type ---------- */
h1,h2{font-family:var(--ss-font-display);font-weight:400;letter-spacing:.01em}
.app-shell :is(h1,h2),#dialog h2,.travel-dialog h2{text-shadow:var(--ss-outline-sm)}
.town-hero h2,.venue-card h3,.cup-title h2,.tournament-camp h2,.tavern-panel>h2,.cup-victory h3,.match-details h3,.campaign-title h3,.potion-shop h3,.empty-state h3,.full-campaign h3,.trial-victory h3,.leaderboard-empty :is(h2,h3){font-family:var(--ss-font-display);font-weight:400;letter-spacing:.01em}
.venue-heading h1{font:400 22px/1.15 var(--ss-font-display);letter-spacing:.015em;color:#fff3dc;text-shadow:var(--ss-outline)}
@media(min-width:1000px) and (min-height:600px){.venue-heading h1{font-size:27px}}
@media(max-width:360px){.venue-heading h1{font-size:19px}}
@media(max-height:599px) and (min-width:600px){.venue-heading h1{font-size:20px}}
.venue-heading small{color:var(--ss-bronze-hi);text-shadow:var(--ss-outline-sm)}
#dialog>h2,#dialog h2#dialog-title{color:#fff3dc;text-shadow:var(--ss-outline)}
.eyebrow{font-family:var(--ss-font-display);font-weight:400;letter-spacing:.12em}
.app-shell .eyebrow,#dialog .eyebrow{text-shadow:0 1px 0 var(--ss-ink),0 0 1px var(--ss-ink)}
.section-heading h1{color:#fff3dc;text-shadow:var(--ss-outline)}
.panel-heading h2,.item-card h2,.venue-content .item-card h2{color:#fff0d0}

/* ---------- HUD ---------- */
.scene-profile .app-player-copy>b,.scene-wallet b{font-family:var(--ss-font-display);font-weight:400;letter-spacing:.02em}
.scene-wallet b{color:var(--ss-gold)}
.scene-profile .app-avatar{background:radial-gradient(circle at 50% 35%,#7a4e2a,#3b2414);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 2px var(--ss-bronze),inset 0 3px 4px #ffd79a33,0 2px 0 var(--ss-ink);filter:none;color:#ffe0a0}
.scene-profile .app-avatar>small{background:linear-gradient(#ffe08f,#e0a64a);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);border-radius:9px;text-shadow:none;font:400 11px/15px var(--ss-font-display);bottom:-5px}
.scene-vitals{font-family:var(--ss-font-display);letter-spacing:.03em}
.scene-experience .town-xp-track{height:7px;background:#2b1709cc;border:1.5px solid var(--ss-ink);box-shadow:0 1px 0 #ffd79a26,0 2px 4px #0008;border-radius:6px}
.scene-experience .town-xp-track>i{background:linear-gradient(#ffe89a,#f0b43c 60%,#c98b3c);border-radius:4px}
.scene-experience small{font-weight:700}
/* town map labels scroll under the HUD: back the name/level on a wood plaque (spread shadow, no layout change) */
.map-app.screen-town:not(.venue-open) .scene-profile .app-player-copy{background:linear-gradient(#4d301ae0,#3b2414e0);border-radius:8px;box-shadow:0 0 0 4px #3b2414e0,0 0 0 5px #c98b3c99}
.venue-greeting{background:var(--ss-parch-bg);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);border-radius:14px;padding:7px 11px 8px;box-shadow:inset 0 0 0 2px #c98b3c66,0 3px 0 var(--ss-ink),0 6px 14px #0006;text-shadow:none}
.venue-greeting>span{font:400 12px/1.2 var(--ss-font-display);letter-spacing:.03em;color:#8a3d12}
.venue-greeting>p,.venue-content .venue-greeting>p{color:var(--ss-parch-ink)}
.venue-intro .venue-greeting>p{color:var(--ss-parch-ink)}

/* ---------- buttons ---------- */
.app-shell :is(.primary,.secondary),#dialog :is(.primary,.secondary),.travel-dialog :is(.primary,.secondary),.venue-content .arena-destinations>button{font-family:var(--ss-font-display);font-weight:400;letter-spacing:.02em;border:2px solid var(--ss-ink);border-radius:12px;box-shadow:var(--ss-bevel)}
.app-shell .primary,#dialog .primary,.travel-dialog .primary,.venue-content button.primary{background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);color:var(--ss-parch-ink);text-shadow:0 1px 0 #fff4;border-color:var(--ss-ink)}
.app-shell .primary:hover:not(:disabled),#dialog .primary:hover:not(:disabled),.travel-dialog .primary:hover:not(:disabled){background:linear-gradient(#ffe9a8,#f6c466 48%,#dc9a42);box-shadow:var(--ss-bevel)}
.app-shell .secondary,#dialog .secondary,.travel-dialog .secondary,.venue-content button.secondary,.venue-content .arena-destinations>button{background:linear-gradient(#8c5b31,#6b4424 55%,#5a361b);color:#fff0d2;text-shadow:0 1px 0 var(--ss-ink);border-color:var(--ss-ink)}
.app-shell .secondary:hover:not(:disabled),#dialog .secondary:hover:not(:disabled),.travel-dialog .secondary:hover:not(:disabled){background:linear-gradient(#9b6838,#784c28 55%,#633c1e)}
.app-shell .secondary .icon,#dialog .secondary .icon,.venue-content .arena-destinations>button .icon{color:var(--ss-bronze-hi)}
.app-shell .fight-button,.venue-content button.fight-button{background:linear-gradient(#c43e2d,#b03022 52%,#8e2117);color:#fff3dc;text-shadow:var(--ss-outline-sm);font-size:1.1rem;letter-spacing:.04em}
.app-shell .fight-button:hover:not(:disabled){background:linear-gradient(#cd4735,#b9372a 52%,#98261b)}
.app-shell .fight-button .icon{color:#ffe0a0}
html:not([data-motion=off]) :is(.app-shell,#dialog,.travel-dialog) :is(.primary,.secondary,.add-button,.venue-back,.icon-button,.enchant-choice):active:not(:disabled){transform:translateY(2px)}
:is(.app-shell,#dialog,.travel-dialog) :is(.primary,.secondary,.add-button,.venue-back,.arena-destinations>button):active:not(:disabled){box-shadow:var(--ss-bevel-press)}
.app-shell .text-button,#dialog .text-button{color:var(--ss-bronze-hi)}
.app-shell .text-button:hover,#dialog .text-button:hover{color:#ffe0a0}
.app-shell .icon-button,#dialog .icon-button{background:linear-gradient(#5e3b1f,#442a16);border:2px solid var(--ss-ink);color:var(--ss-bronze-hi);box-shadow:inset 0 1px 0 #ffd79a44,inset 0 -2px 0 #0004,0 2px 0 var(--ss-ink)}
#dialog .dialog-close{background:linear-gradient(#5e3b1f,#442a16);border:2px solid var(--ss-ink);color:#ffe0a0}
.app-shell .add-button,.venue-content button.add-button{background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);border:2px solid var(--ss-ink);color:var(--ss-parch-ink);border-radius:10px;box-shadow:var(--ss-bevel)}
.app-shell .add-button .icon{stroke-width:2.6}
.app-shell .venue-back,.venue-screen .venue-back{font-family:var(--ss-font-display);font-weight:400;font-size:15px;letter-spacing:.02em;color:#fff3dc;background:linear-gradient(#8c5b31,#6b4424 55%,#5a361b);border:2px solid var(--ss-ink);border-radius:12px;box-shadow:inset 0 2px 0 #ffd79a55,inset 0 -3px 0 #0004,0 3px 0 var(--ss-ink),0 5px 10px #0005;text-shadow:var(--ss-outline-sm)}
.venue-back>.icon{color:var(--ss-bronze-hi)}
/* disabled: pale, flat, still readable */
.app-shell button:disabled:is(.primary,.secondary,.add-button),#dialog button:disabled:is(.primary,.secondary),.venue-content button:disabled:not(.text-button){background:linear-gradient(#5d4b3b,#4c3c2e)!important;color:#dccab0!important;border-color:#2b1709!important;box-shadow:inset 0 1px 0 #ffffff14,0 2px 0 #2b1709aa!important;text-shadow:none!important;opacity:1;filter:none!important}
.venue-content button:disabled .icon{opacity:.75}
/* menu + rankings toggles on the map */
.mobile-app .game-menu>summary,.mobile-app .town-rankings>summary,.town-rankings>summary{background:linear-gradient(#6a4323,#4d301a 55%,#3b2414)!important;border:2px solid var(--ss-ink)!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px #c98b3c99,inset 0 2px 0 #ffd79a40,0 3px 0 var(--ss-ink),0 5px 10px #0006;color:#fff3dc;font-family:var(--ss-font-display);font-weight:400;letter-spacing:.03em;text-shadow:var(--ss-outline-sm)}
.mobile-app .game-menu>summary .icon,.mobile-app .town-rankings>summary .icon{color:var(--ss-bronze-hi)}
/* segmented controls / tabs */
.app-shell :is(.segmented-control,.shop-tabs,.fighter-tabs),.venue-content :is(.segmented-control,.shop-tabs,.fighter-tabs){background:#1f1109cc;border:2px solid var(--ss-ink);box-shadow:inset 0 2px 5px #000a,0 1px 0 #ffd79a26}
.app-shell :is(.segmented-control,.shop-tabs,.fighter-tabs)>button,.venue-content :is(.segmented-control,.shop-tabs,.fighter-tabs)>button{background:transparent;border-color:transparent;color:#efd9b3;font-family:var(--ss-font-display);font-weight:400;letter-spacing:.02em}
.app-shell :is(.segmented-control,.shop-tabs,.fighter-tabs)>button.selected,.app-shell :is(.segmented-control,.shop-tabs,.fighter-tabs)>button[aria-selected=true],.venue-content :is(.segmented-control,.shop-tabs,.fighter-tabs)>button.selected{background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);box-shadow:inset 0 2px 0 #fff5,inset 0 -2px 0 #0003;text-shadow:none}
.app-shell :is(.segmented-control,.shop-tabs,.fighter-tabs)>button.selected .icon{color:var(--ss-parch-ink)}
/* dropdowns */
.app-shell .game-dropdown,.venue-content .game-dropdown{background:linear-gradient(#5a381d,#442a16)!important;border:2px solid var(--ss-ink)!important;box-shadow:inset 0 0 0 1px #c98b3c8c,inset 0 2px 0 #ffd79a33,0 3px 0 #1a0b03b3}
.app-shell .game-dropdown>span,.venue-content .game-dropdown>span{color:var(--ss-bronze-hi);font-weight:600;letter-spacing:.06em}
.app-shell .game-dropdown>select,.venue-content .game-dropdown>select{color:#fff3dc;font-family:var(--ss-font-display);font-weight:400;font-size:15px;letter-spacing:.02em}
.app-shell .game-dropdown>.icon{color:var(--ss-bronze-hi)}
.game-dropdown>select option,.venue-content .game-dropdown>select option,.hud-board-select>select option{background:#3b2414;color:#fff3dc}
.mobile-app.map-app .town-play-hud .game-dropdown{background:transparent!important}
/* enchant choices + weapon family pills */
.enchant-choice{background:var(--ss-wood-bg);border:2px solid var(--ss-ink);border-radius:12px;box-shadow:inset 0 0 0 1px #c98b3c80,inset 0 2px 0 #ffd79a33,0 3px 0 var(--ss-ink);color:#fff3dc}
.enchant-choice.selected{box-shadow:inset 0 0 0 2px var(--ss-gold),0 0 0 2px var(--ss-bronze),0 3px 0 var(--ss-ink)}
.enchant-choice b{font-family:var(--ss-font-display);font-weight:400;font-size:16px;letter-spacing:.02em}
.enchant-choice small{color:#efd9b3}
.enchant-choice>span{color:var(--ss-bronze-hi)}
.app-shell .weapon-filter button,.venue-content .weapon-filter>button{background:linear-gradient(#7a4e2a,#5e3a1e);color:#fff0d2;border:2px solid var(--ss-ink);box-shadow:inset 0 1px 0 #ffd79a44,0 2px 0 var(--ss-ink);font-weight:600}
.app-shell .weapon-filter button.selected,.venue-content .weapon-filter>button.selected{background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);color:var(--ss-parch-ink);border-color:var(--ss-ink)}

/* ---------- panels ---------- */
.app-shell .panel,.venue-content .panel,.mobile-app .panel{background:var(--ss-wood-bg);border:2px solid var(--ss-bronze);box-shadow:var(--ss-panel-shadow)}
.app-shell .item-card,.venue-content .item-card{background:var(--ss-wood-bg);border:2px solid #9a6a33;box-shadow:var(--ss-panel-shadow)}
.app-shell .item-card.equipped,.venue-content .item-card.equipped{border:2px solid var(--ss-gold);box-shadow:0 0 0 2px var(--ss-ink),0 0 14px #ffd24a55,inset 0 1px 0 #ffd79a4d,0 4px 0 #1a0b03a6}
.app-shell .shop-item-art,.venue-content .shop-item-art{background:radial-gradient(ellipse at 50% 42%,#fff8e2,#f3e3bd 45%,#dcbd83);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 2px #c98b3c88,inset 0 -6px 12px #9a6a3355,0 2px 0 #1a0b03aa}
.app-shell .shop-item-art:hover{background-color:transparent;filter:brightness(1.04)}
.shop-item-art>span{background:#3b2414;border:1.5px solid var(--ss-ink);color:#ffe0a0}
/* parchment notes */
.app-shell :is(.notice,.shop-location-note,.difficulty-note),#dialog :is(.notice,.shop-location-note){background:var(--ss-parch-bg);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);border-left:2px solid var(--ss-ink);box-shadow:inset 0 0 0 2px #c98b3c66,inset 0 0 16px #b8864a40,0 3px 0 #1a0b03a6;text-shadow:none;--text:var(--ss-parch-ink);--muted:#5e3f22;--gold:#8a4f12;--gold-light:#7a4510}
.app-shell :is(.notice,.shop-location-note,.difficulty-note) :is(b,strong),#dialog :is(.notice,.shop-location-note) :is(b,strong){color:#6e2a0d}
/* game menu */
.game-menu-panel,.scene-status .game-menu-panel{background:var(--ss-wood-bg);border:2px solid var(--ss-bronze);box-shadow:0 0 0 2px var(--ss-ink),inset 0 1px 0 #ffd79a3d,0 14px 40px #000b;text-shadow:none}
.game-menu-panel>button{color:#fff3dc;font-weight:600}
.game-menu-panel>button>.icon{color:var(--ss-bronze-hi)}
.game-menu-panel>button:hover{background:#f3e3bd1f}
.menu-identity b{font-family:var(--ss-font-display);font-weight:400;font-size:18px;letter-spacing:.02em}
.menu-identity{border-bottom-color:#c98b3c66}
/* dialogs */
dialog::backdrop{background:#1a0b03d9}
#dialog{background:var(--ss-grain),radial-gradient(ellipse at 50% -10%,#7a4a2466,#7a4a2400 60%),linear-gradient(170deg,#4d301a,#3b2414 45%,#2f1b0d);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 2px var(--ss-bronze),inset 0 0 0 4px #2b170999,inset 0 5px 0 #ffd79a2e,0 -12px 60px #000b;color:#fff3dc}
@media(max-width:900px){#dialog{border:2px solid var(--ss-ink);border-bottom:0}#dialog::before{background:var(--ss-bronze);height:5px;box-shadow:0 1px 0 var(--ss-ink)}}
#dialog .dialog-intro,#dialog>p,#dialog form>p{color:#f2dfbd}
#dialog .input-label,#dialog form>label,#dialog .class-picker legend{color:#ffe0a0;font-weight:600}
#dialog input[type=text],#dialog input:not([type]),#dialog input[type=password],#dialog input[type=email],#dialog textarea{background:var(--ss-parch-bg);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);box-shadow:inset 0 2px 4px #7a4a2455,0 1px 0 #ffd79a33;font-weight:600}
#dialog input::placeholder,#dialog textarea::placeholder{color:#7a5a3a}
#dialog .class-option-content{background:linear-gradient(#56361c,#3f2715);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 1px #c98b3c80,inset 0 2px 0 #ffd79a33,0 3px 0 var(--ss-ink)}
#dialog .class-option-content>b{font-family:var(--ss-font-display);font-weight:400;font-size:16px;letter-spacing:.02em;color:#fff3dc;text-shadow:var(--ss-outline-sm)}
#dialog .class-option-content>small{color:#efd9b3}
#dialog .class-option>input:checked+.class-option-content{background:var(--ss-parch-bg);border-color:var(--ss-ink);box-shadow:inset 0 0 0 2px var(--ss-bronze),0 0 0 2px var(--ss-gold),0 3px 0 var(--ss-ink)}
#dialog .class-option>input:checked+.class-option-content>b{color:var(--ss-parch-ink);text-shadow:none}
#dialog .class-option>input:checked+.class-option-content>small{color:#5e3f22}
#dialog .class-option>input:checked+.class-option-content>.icon{color:#9a4f10}
#dialog .creation-note,#dialog .entry-benefits{color:#e8d2ad}
#dialog .settings-list>button{background:linear-gradient(#5a381d,#442a16);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 1px #c98b3c66,inset 0 2px 0 #ffd79a2e,0 2px 0 var(--ss-ink);color:#fff3dc}
#dialog .help-list h3{color:var(--ss-bronze-hi);font-family:var(--ss-font-display);font-weight:400;letter-spacing:.02em}
#dialog .help-list p{color:#efd9b3}
/* toast */
.toast,#toast{background:var(--ss-parch-bg);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);border-radius:12px;box-shadow:inset 0 0 0 2px #c98b3c88,0 3px 0 var(--ss-ink),0 10px 30px #000a;font-weight:700}
/* town signboards + hints */
.map-app .town-scene .town-map .hotspot-label{background:var(--ss-grain),linear-gradient(#5e3b1f,#452a16 55%,#3b2414);border:2px solid var(--ss-ink);border-top:4px solid var(--place-color,var(--ss-bronze));box-shadow:inset 0 0 0 1px #c98b3c99,inset 0 2px 0 #ffd79a33,0 3px 0 var(--ss-ink),0 6px 14px #1a0b0377;color:#fff3dc}
.map-app .town-scene .town-map .hotspot-label>b{font:400 15px/1.15 var(--ss-font-display);letter-spacing:.02em;color:#fff3dc;text-shadow:var(--ss-outline-sm)}
.map-app .town-scene .town-map .hotspot-label>small{color:#f2dcb6}
.map-app .town-scene .town-map .map-play-entry .hotspot-label{background:var(--ss-grain),linear-gradient(#7d2a1c,#5e1d12 60%,#4d170e)}
.map-gesture-hint{color:var(--ss-parch-ink)!important;background:#f3e3bdeb!important;border:2px solid var(--ss-ink);box-shadow:0 2px 0 var(--ss-ink);font-weight:700;width:fit-content;margin-inline:auto}
/* travel / arrival cards */
.arrival-card,.travel-route-panel{background:var(--ss-wood-bg);border:2px solid var(--ss-bronze);box-shadow:0 0 0 2px var(--ss-ink),inset 0 1px 0 #ffd79a3d,0 14px 50px #000a}
.travel-dialog.inside .arrival-card{background:var(--ss-ink)}
.travel-dialog.inside .arrival-caption{background:linear-gradient(#1a0b0300,#1a0b03f0)}
/* small wood cards, pills and tabs */
.venue-content :is(.contract-board article,.active-contract,.trial-route,.chronicle-online-link),.venue-content>.stance-panel,.app-shell .chronicle-online-link{background:linear-gradient(#4d301a,#3b2414);border:2px solid #9a6a33;box-shadow:inset 0 1px 0 #ffd79a33,0 0 0 1px #2b1709b3,0 3px 0 #1a0b03a6;color:#fff3dc}
.app-shell .chapter-tag,.venue-content .chapter-tag{background:linear-gradient(#5e3b1f,#442a16);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 1px #c98b3c80,0 2px 0 var(--ss-ink);color:#ffebc7;font-weight:600}
.app-shell .perk,#dialog .perk{background:#2b1709aa;border:1.5px solid var(--ss-bronze);color:var(--ss-bronze-hi);font-weight:600}
.leaderboard-modes>button{background:linear-gradient(#5e3b1f,#442a16);border:2px solid var(--ss-ink);box-shadow:inset 0 1px 0 #ffd79a33,0 2px 0 var(--ss-ink);color:#efd9b3;font-family:var(--ss-font-display);font-weight:400;font-size:13px;letter-spacing:.02em}
.leaderboard-modes>button[aria-pressed=true]{background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);color:var(--ss-parch-ink);border-color:var(--ss-ink)}
#dialog .forge-upgrade,.app-shell .forge-upgrade{background:#2b170966;border:2px solid #9a6a33;border-radius:12px;box-shadow:inset 0 1px 0 #ffd79a26}
#dialog .item-fitting,.app-shell .item-fitting{background:radial-gradient(ellipse at 36% 78%,#c98b3c55,#c98b3c00 60%),var(--ss-parch-bg);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 2px var(--ss-bronze),inset 0 0 22px #9a6a3355,0 3px 0 #1a0b03a6;color:var(--ss-parch-ink);--text:var(--ss-parch-ink);--muted:#5e3f22;--gold:#8a4f12;--gold-light:#7a4510}
.item-fitting .fitting-info>b{font-family:var(--ss-font-display);font-weight:400;font-size:17px;letter-spacing:.02em}
/* text inputs: parchment slips */
.app-shell :is(input[type=text],input[type=password],input[type=email],input:not([type]),textarea),.online-auth input,.online-join input{background:var(--ss-parch-bg)!important;color:var(--ss-parch-ink)!important;border:2px solid var(--ss-ink)!important;box-shadow:inset 0 2px 4px #7a4a2455;font-weight:600}
.app-shell :is(input,textarea)::placeholder{color:#7a5a3a}
.online-selects select{background:linear-gradient(#5a381d,#442a16)!important;border:2px solid var(--ss-ink)!important;color:#fff3dc}
/* town rankings popover */
.map-app .town-rankings[open] .hud-leaderboard{background:var(--ss-wood-bg);border:2px solid var(--ss-bronze);box-shadow:0 0 0 2px var(--ss-ink),inset 0 1px 0 #ffd79a3d,0 14px 40px #000b;text-shadow:none}
.map-app .town-rankings .hud-board-select>select{background:linear-gradient(#5a381d,#442a16);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 1px #c98b3c8c;color:#fff3dc;text-shadow:none;font-weight:600}
.map-app .town-rankings .hud-rank-list>li,.map-app .town-rankings .hud-my-rank{border-color:#c98b3c4d}
.map-app .town-rankings .hud-my-rank b{font-family:var(--ss-font-display);font-weight:400;color:var(--ss-gold)}
.map-app .town-rankings .hud-full-ranks{color:var(--ss-bronze-hi);text-shadow:none;font-weight:700}
/* fighter: loadout, training rows, skills */
.expanded-loadout .equipped-item,.mobile-app .expanded-loadout .equipped-item{background:linear-gradient(#4d301a,#3b2414);border:2px solid #9a6a33;box-shadow:inset 0 1px 0 #ffd79a33,0 0 0 1px #2b1709b3,0 3px 0 #1a0b03a6}
.expanded-loadout .equipped-item:hover{background:linear-gradient(#56361c,#422816)}
.expanded-loadout .equipped-item small{color:var(--ss-bronze-hi);font-weight:600}
.expanded-loadout .equipped-item b{font-family:var(--ss-font-display);font-weight:400;font-size:15px;letter-spacing:.02em}
.expanded-loadout .item-icon,.app-shell .item-icon{background:radial-gradient(ellipse at 50% 42%,#fff8e2,#f3e3bd 45%,#dcbd83);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 1.5px #c98b3c88,inset 0 -4px 8px #9a6a3355;color:var(--ss-parch-ink)}
.app-shell .stat-icon{background:linear-gradient(#5e3b1f,#442a16);border:2px solid var(--ss-ink);box-shadow:inset 0 0 0 1px #c98b3c80;color:var(--ss-bronze-hi)}
.app-shell .training-row b{font-family:var(--ss-font-display);font-weight:400;font-size:16px;letter-spacing:.02em}
.app-shell .training-row strong,.app-shell .derived-stats b{font-family:var(--ss-font-display);font-weight:400;color:#fff3dc;text-shadow:var(--ss-outline-sm)}
.app-shell .training-row strong{font-size:1.45rem}
.app-shell .points-badge{background:linear-gradient(#ffe08f,#e0a64a);color:var(--ss-parch-ink);border:2px solid var(--ss-ink);border-radius:10px;font:400 14px var(--ss-font-display);letter-spacing:.03em;box-shadow:0 2px 0 var(--ss-ink)}
.app-shell .skill-card h3{font-family:var(--ss-font-display);font-weight:400;font-size:16px;letter-spacing:.02em}
.app-shell .skill-symbol{background:linear-gradient(#5e3b1f,#442a16);border:2px solid var(--ss-ink);color:#efd9b3}
.app-shell .skill-card.learned .skill-symbol{background:linear-gradient(#ffe08f,#e0a64a);border-color:var(--ss-ink);color:var(--ss-parch-ink)}
.app-shell .color-swatch{border-color:var(--ss-ink);outline:2px solid #9a6a33}
.app-shell .color-swatch.selected{outline:3px solid var(--ss-gold)}
/* travel + arrival scene buttons */
.travel-dialog .arrival-buttons button,.travel-route-panel .arrival-buttons button{font-family:var(--ss-font-display);font-weight:400;letter-spacing:.02em;background:linear-gradient(#8c5b31,#6b4424 55%,#5a361b);color:#fff0d2;border:2px solid var(--ss-ink);border-radius:12px;box-shadow:var(--ss-bevel);text-shadow:0 1px 0 var(--ss-ink)}
.travel-dialog .arrival-buttons button:last-child,.travel-route-panel .arrival-buttons button:last-child{background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);color:var(--ss-parch-ink);text-shadow:0 1px 0 #fff4}
.travel-dialog .arrival-buttons button:active,.travel-route-panel .arrival-buttons button:active{box-shadow:var(--ss-bevel-press)}
.travel-route-panel small,.arrival-caption small{color:var(--ss-bronze-hi)}
.travel-route-panel h2{color:#fff3dc}
.arrival-progress{background:#2b1709}
.arrival-progress span{background:linear-gradient(90deg,var(--ss-bronze),var(--ss-gold))}
/* leaderboard podium */
.podium-place{background:var(--ss-wood-bg)!important;border:2px solid #9a6a33!important;box-shadow:var(--ss-panel-shadow)}
.podium-place.podium-slot-1{background:radial-gradient(ellipse at 50% 0,#ffd24a45,#ffd24a00 70%),var(--ss-wood-bg)!important;border-color:var(--ss-gold)!important;box-shadow:0 0 0 1px var(--ss-ink),0 0 16px #ffd24a40,inset 0 1px 0 #ffd79a4d,0 4px 0 #1a0b03a6}
.podium-place>strong{text-shadow:var(--ss-outline-sm)}
.medal-3{--medal:#f2c29c}
.leaderboard-table .is-you{background:#ffd24a1a;box-shadow:inset 4px 0 var(--ss-gold)}
.leaderboard-you{background:linear-gradient(#ffe08f,#e0a64a);color:var(--ss-parch-ink);border:1.5px solid var(--ss-ink)}
/* short landscape: the keeper card is clipped by the header, the arrival scene already shows the quote */
@media(max-height:500px){.venue-intro .venue-greeting{display:none}}
/* loose text sitting straight on a venue backdrop gets the ink outline */
.venue-content>:where(p,small,.text-button):not(.shop-location-note,.notice,.difficulty-note),.venue-content .gear-progression,.venue-content .leaderboard-counts,.venue-content .trial-route>.text-button{text-shadow:var(--ss-outline-sm)}
.venue-content .gear-progression{color:#fff0d0}
/* living town: slimmer signposts on phones (portrait and landscape) so the 3D town shows between them */
@media(max-width:600px),(max-height:500px){
 .map-app .town-scene .town-map .town-hotspot{max-width:156px;min-height:44px}
 .map-app .town-scene .town-map .town-hotspot.map-online-entry{max-width:190px}
 .map-app .town-scene .town-map .hotspot-label,.map-app .town-scene .town-map .map-play-entry .hotspot-label,.map-app .town-scene .town-map .map-online-entry .hotspot-label{min-width:0;min-height:38px;padding:6px 10px;gap:0 6px;grid-template-columns:19px minmax(0,1fr);border-radius:10px}
 .map-app .town-scene .town-map .hotspot-label>.icon{width:19px;height:19px}
 .map-app .town-scene .town-map .hotspot-label>b{font-size:13.5px}
 .map-app .town-scene .town-map .hotspot-label>small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .map-app .town-scene .town-walker{width:10%;max-width:84px}
}
/* living town: the player's gladiator is drawn in 3D at town scale; the HTML walker stays as its invisible anchor */
html[data-town-hero="3d"] .town-art-host[data-mode="3d"]~.town-walker>.scene-actor{visibility:hidden}
/* headroom above the venue figure: tall crests and Towering gladiators rise above the figure's box, and the scroll area clips anything above the intro */
.venue-intro{height:174px}
@media(max-height:500px){.venue-intro{height:146px}}
@media(min-width:1000px) and (min-height:600px){.venue-intro{height:calc(100dvh - 190px)}}
/* 10.1: a crowned gladiator (Imperator) — the HUD's name line turns imperial gold (app.js dress() swaps the title). */
.app-player.imperator .app-player-copy small{color:#ffe08f}
.app-player.imperator .app-avatar{box-shadow:0 0 0 2px #ffd24a,0 0 12px #ffd24a88}
/* 10.15 the field guide folds (views.js helpHTML): a list of topics, tap one to read it. */
#dialog .help-lead{margin:6px 0 0;font-size:.85rem;color:#efd9b3}
#dialog .help-list{gap:8px;margin:14px 0 22px}
#dialog .help-list>details{border:2px solid #c98b3c4d;border-radius:12px;background:#ffffff08}
#dialog .help-list>details[open]{background:#ffffff12}
#dialog .help-list>details>summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;cursor:pointer;list-style:none;border-radius:10px}
#dialog .help-list>details>summary::-webkit-details-marker{display:none}
#dialog .help-list>details>summary:hover{background:#ffffff0d}
#dialog .help-list>details>summary>.icon:first-child{flex:none;width:24px;height:24px;color:var(--ss-bronze-hi)}
#dialog .help-list>details>summary h3{flex:1;min-width:0;margin:0}
#dialog .help-list>details>summary>.icon:last-child{flex:none;width:16px;height:16px;color:#efd9b3;transform:rotate(90deg);transition:transform .15s}
#dialog .help-list>details[open]>summary>.icon:last-child{transform:rotate(-90deg)}
#dialog .help-list>details>p{margin:0;padding:0 14px 12px 48px}
html[data-motion=off] #dialog .help-list>details>summary>.icon:last-child{transition:none}
@media (min-width:901px){#dialog .dialog-close{width:40px;height:40px}}
/* 10.16 what's new: the ribbon in town after a release (town.js .town-news: open or ×), and the card (views.js whatsNewHTML). */
.town-news{position:absolute;z-index:11;left:50%;bottom:calc(62px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:stretch;width:max-content;max-width:calc(100% - 28px);border:2px solid var(--ss-ink);border-radius:16px;background:linear-gradient(#ffe7a0,#f0b955 55%,#d8953f);box-shadow:inset 0 2px 0 #fff8,0 3px 0 var(--ss-ink),0 8px 18px #0008;animation:town-news-in .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes town-news-in{from{transform:translate(-50%,14px);opacity:0}}
.town-news button{display:flex;align-items:center;min-height:48px;border:0;background:none;color:var(--ss-parch-ink);cursor:pointer;text-shadow:none}
.town-news-open{gap:9px;padding:6px 6px 6px 12px;text-align:left}
.town-news-open>.icon:first-child{flex:none;width:22px;height:22px;color:#8a3d12}
.town-news-open>.icon:last-child{flex:none;width:16px;height:16px}
.town-news-open b{display:block;font:400 16px/1.1 var(--ss-font-display);letter-spacing:.02em}
.town-news-open small{display:block;font:700 12px/1.25 var(--font);color:#5a2d0c}
.town-news-close{justify-content:center;width:44px;border-left:2px solid #2b170933!important}
.town-news-close .icon{width:16px;height:16px}
.town-news button:hover{background:#fff3}
@media (max-height:520px) and (min-width:600px){.town-news{bottom:calc(14px + env(safe-area-inset-bottom));left:auto;right:18px;transform:none;animation-name:town-news-side}}
@keyframes town-news-side{from{transform:translateY(14px);opacity:0}}
html[data-motion=off] .town-news{animation:none}
#dialog .news-lead{margin:6px 0 0;font-size:.85rem;color:#efd9b3}
#dialog .news-list{display:grid;gap:8px;margin:14px 0 0}
#dialog .news-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 10px 10px 12px;border:2px solid #c98b3c4d;border-radius:12px;background:#ffffff08}
#dialog .news-icon{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ss-ink);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf,#e3b95c);color:#7a3a10;box-shadow:0 2px 0 var(--ss-ink)}
#dialog .news-icon .icon{width:20px;height:20px}
#dialog .news-item h3{margin:0;color:var(--ss-bronze-hi);font:400 16px/1.2 var(--ss-font-display);letter-spacing:.02em}
#dialog .news-item p{margin:2px 0 0;font-size:.82rem;line-height:1.45;color:#efd9b3}
#dialog .news-go{width:auto;min-height:44px;margin:0;padding:0 12px;white-space:nowrap}
#dialog .news-more{margin:10px 0 0}
#dialog .news-more>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border:2px dashed #c98b3c66;border-radius:12px;color:#efd9b3;cursor:pointer;list-style:none;font-weight:700}
#dialog .news-more>summary::-webkit-details-marker{display:none}
#dialog .news-more>summary em{font-style:normal;padding:0 7px;border:1.5px solid #efd9b3a6;border-radius:9px;font-size:.75rem}
#dialog .news-more>summary>.icon:last-child{margin-left:auto;width:16px;height:16px;transform:rotate(90deg);transition:transform .15s}
#dialog .news-more[open]>summary>.icon:last-child{transform:rotate(-90deg)}
#dialog .news-list+.primary,#dialog .news-more+.primary{margin-top:18px}
@media (max-width:380px){#dialog .news-item{grid-template-columns:auto minmax(0,1fr);}#dialog .news-go{grid-column:2;justify-self:start}}