/* Shared game materials, with compact header and frame insets. Keep gameplay
   interactions, touch targets and inner scrolling in their own controllers. */
body.medieval-game {
  --game-paper:#e4d1ac;
  --game-muted:#c6b593;
  --game-gold:#dfb87b;
  --game-panel:#29231b;
  --game-raised:#352a1e;
  --game-border:#8e7045;
  --game-button:#213d2e;
  --game-button-hover:#31523d;
  --game-button-active:#3a5336;
  --game-button-stone:linear-gradient(#174431cc,#174431cc),url('/site-art/stone-panel.webp');
  --game-button-stone-hover:linear-gradient(#2d6345cc,#2d6345cc),url('/site-art/stone-panel.webp');
  --game-button-stone-active:linear-gradient(#366044b8,#366044b8),url('/site-art/stone-panel.webp');
  --ink:#181610;
  --line:#68563d;
  --gold:var(--game-gold);
  --muted:var(--game-muted);
  color:var(--game-paper);
  background:#1b1813;
  scrollbar-color:#96794d #211c16;
}
body.medieval-game :is(header,.aside-bottom,main>aside,#world-log) {
  background-color:#211d17;
  border-color:var(--game-border);
}
body.medieval-game>header {
  background:linear-gradient(180deg,#352b1d,#211d17);
  box-shadow:inset 0 -1px #d6b27020;
}
body.medieval-game .brand :is(strong,.crest) { color:var(--game-gold); }
body.medieval-game :is(.world-status,#save-status,.brand small,.chapter,.pack-hint,.controls) {
  color:var(--game-muted);
}
body.medieval-game :is(#vitals,#combat-panel,#dialog,#context,
  #hover-label,.sign-tooltip,#connection-status,#compact-stats,#compact-view) {
  color:var(--game-paper);
  background-color:#29231bf5;
  border-color:var(--game-border);
  box-shadow:0 3px 12px #0004,inset 0 0 0 1px #d8ae6814;
}
body.medieval-game .location { background:transparent; border-color:transparent; box-shadow:none; }
body.medieval-game :is(#region,#region-domain,#dialog-speaker,.section-title,
  #skills h3,#vitals h3,.needs-heading,#combat-panel strong,.feed-heading>span) {
  color:var(--game-gold);
}
body.medieval-game :is(#region-detail,#movement-status,#environment-note,#needs-note,
  #vitals .need-row label,#vitals .vital label,.bank-count,#slots) { color:var(--game-muted); }
body.medieval-game :is(.section-title,.feed-heading,.vitals-tabs,.vitals-condition-heading,
  .aside-bottom,.pack-toolbar,aside nav,.bank-count) { border-color:#68563d; }

/* Green stone controls match the website standings. Real borders keep
   small buttons clean at their corners and reserve space for their labels. */
body.medieval-game :is(.interface-panel,dialog,[role=dialog],[role=menu],#map-layers-panel,main>aside,#vitals,#world-log,#compact-dock,#compact-bank-switcher,#dialog,#context)
  button:not(:where(#sidebar-resize,#sidebar-height-resize,#minimap-resize,.minimap-resize,.slot,.equipment-slot)),
body.medieval-game :is(#vitals-toggle,#sidebar-show,#equipment-trade-return) {
  color:var(--game-paper);
  background-color:var(--game-button);
  background-image:var(--game-button-stone);
  background-size:auto,256px 256px;
  background-position:center;
  border-color:#7c8964;
  border-radius:3px;
  border-image:none;
  box-shadow:inset 0 1px #dfebbd14,inset 0 -1px #07150d55;
}
body.medieval-game :is(.interface-panel,dialog,[role=dialog],[role=menu],#map-layers-panel,main>aside,#vitals,#world-log,#compact-dock,#compact-bank-switcher,#dialog,#context)
  button:not(:where(#sidebar-resize,#sidebar-height-resize,#minimap-resize,.minimap-resize,.slot,.equipment-slot)):enabled:hover,
body.medieval-game :is(#vitals-toggle,#sidebar-show,#equipment-trade-return):enabled:hover {
  color:#fff0cb;
  background-color:var(--game-button-hover);
  background-image:var(--game-button-stone-hover);
  border-color:#d6b477;
}
body.medieval-game #dialog #dialog-close {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
  border:1px solid #7c8964;
  padding:8px 12px;
  line-height:1.4;
  min-height:40px;
}
body.medieval-game #dialog #dialog-close span { float:none; flex:none; }
body.medieval-game.compact-ui #dialog #dialog-close { min-height:44px; }
body.medieval-game :is(button,input,select,textarea,a,summary):focus-visible {
  outline:2px solid #f0ca86;
  outline-offset:2px;
}
body.medieval-game :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea) {
  color:var(--game-paper);
  background-color:#1d1a15;
  border-color:#907349;
  accent-color:#d3ab6a;
}
body.medieval-game :is(input,textarea)::placeholder { color:#b0a085; opacity:1; }
body.medieval-game :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color:#c69c5e; }
body.medieval-game select option { color:var(--game-paper); background:#29231b; }
body.medieval-game :is(#chat-form,#bank-panel,#options-panel,#magic-panel,#community-panel,
  #faith-book,#skill-panel,#artisan-panel,#character-sidebar)
  :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea) {
  color:var(--game-paper);
  background-color:#1d1a15;
  border-color:#907349;
}
body.medieval-game :is(main>aside nav button.selected,.vitals-tabs button[aria-selected=true],
  #compact-dock button[aria-pressed=true],#compact-bank-switcher button[aria-pressed=true]) {
  color:#ffe6ad;
  background-color:var(--game-button-active);
  background-image:var(--game-button-stone-active);
  border-color:var(--game-gold);
  box-shadow:inset 0 -2px #dfb87b;
}
/* Never mute warnings, damage, healing, item rarity, or custom chat colours. */
body.medieval-game :is(button:disabled,button[aria-disabled=true]) { opacity:.55; }
body.medieval-game :is(#run-toggle,#rest-toggle,#shadow-toggle,#retaliate-toggle)[aria-pressed=true] {
  color:#e5efd0;
  background-color:#3a4530;
  background-image:var(--game-button-stone-active);
  border-color:#a5b47b;
}
body.medieval-game #vitals-toggle.has-ailments {
  color:#ffd0bc;
  background-color:#4a2820;
  background-image:linear-gradient(#4a2820e6,#4a2820e6),url('/site-art/stone-panel.webp');
  border-color:#c5866b;
}

/* Inset leather slots keep their original icons, counts, drag and worn states. */
body.medieval-game :where(.slot,#hotbar button,.equipment-slot) {
  background-color:#201d17;
  border-color:#756043;
  box-shadow:inset 0 1px 6px #0004;
}
body.medieval-game .slot.filled { background-color:#342c20; border-color:#9e8153; }
body.medieval-game :where(.slot:hover,#hotbar button:hover) { border-color:#dfb87b; }
body.medieval-game :where(.slot.selected,.slot.using,#hotbar button.selected) {
  background-color:#503b23;
  border-color:#f0ca86;
}
body.medieval-game :is(.slot,.equipment-slot).drop-target { background-color:#45523b; }
body.medieval-game :is(.slot,.equipment-slot).drop-invalid { outline-color:#d98e7b; }
body.medieval-game :is(.slot small,#hotbar button small,.hotbar-key) { color:#f7e4ba; }
body.medieval-game #hotbar { background-color:#29231bf5; border-color:#8e7045; }
body.medieval-game #hotbar button { background-color:#30281d; border-color:#8e7045; }
body.medieval-game #hotbar button:hover { background-color:#493823; border-color:#dfb87b; }
body.medieval-game #hotbar kbd { color:var(--game-paper); }
/* Overlay labels on the artwork without making the compact skill rows taller. */
body.medieval-game #skill-groups .skill-grid {
  grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
}
body.medieval-game #skill-groups .skill-tile {
  min-height:78px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-content:stretch;
  place-items:center;
  isolation:isolate;
  background-color:var(--game-button);
  border-color:#7c8964;
}
body.medieval-game #skill-groups .skill-tile .skill-emblem {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
body.medieval-game #skill-groups .skill-name {
  position:relative;
  z-index:1;
  align-self:end;
  width:100%;
  box-sizing:border-box;
  padding:12px 1px 4px;
  color:#f6dfac;
  font:600 10px/1.2 Arial,sans-serif;
  overflow-wrap:anywhere;
  background:linear-gradient(transparent,#10271fe8 38%,#0c1d18fa);
  text-shadow:0 1px 2px #000;
}
body.medieval-game #skill-groups .skill-tile-level {
  z-index:2;
  top:3px;
  right:3px;
  min-width:1.4em;
  padding:2px 3px;
  border:1px solid #a78b5666;
  border-radius:2px;
  background:#0b1c17ed;
  color:#f6dfac;
  font:600 10px/1 Arial,sans-serif;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
body.medieval-game #skill-groups .skill-tile::before { z-index:2; }
body.medieval-game #skill-groups .skill-tile:hover { background-color:var(--game-button-hover); border-color:#bc985e; }
body.medieval-game #skill-groups .skill-tile[aria-expanded=true] {
  background-color:var(--game-button-active);
  border-color:#dfb87b;
}
body.medieval-game .equipment-outline { stroke:#af9c78; }

/* Small ornaments on existing headings cost no vertical room. */
body.medieval-game .section-title {
  background-image:url('/site-art/ornament.webp');
  background-repeat:no-repeat;
  background-size:74px auto;
  background-position:right center;
}
body.medieval-game .map-panel { background-color:#262219; border-color:#68563d; }
body.medieval-game .minimap-frame { border-color:#a98a55; box-shadow:0 1px 5px #0007; }
body.medieval-game :is(.minimap-tools,.compass-control,#sidebar-layout-tools) { border-color:#68563d; }
body.medieval-game #sidebar-resize { background:transparent; box-shadow:none; border-image:none; }
body.medieval-game #context button { color:var(--game-paper); border-color:#69573c; }
body.medieval-game #context button:hover { background-color:var(--game-button-hover); color:#fff0cb; }
body.medieval-game #action { background-color:var(--game-button); border-color:#7c8964; }
body.medieval-game #action-text { color:var(--game-paper); }
body.medieval-game #action>div { background-color:#0d1e15; }
body.medieval-game #action-fill { background-color:#39784f; }
body.medieval-game #chat-form { border-color:#68563d; }
body.medieval-game #world-log #chat-filters-open,
body.medieval-game #bank-panel #bank-tools-toggle {
  color:var(--game-paper);
  background-color:var(--game-button);
  border-color:#7c8964;
}
body.medieval-game #bottom-hud .controls { background-color:#29231bf5; border-color:#68563d; }
body.medieval-game #feed { color:#c6b593; scrollbar-color:#96794d transparent; }
body.medieval-game .world-links a { color:#dfb87b; }
body.medieval-game .world-links a:hover { color:#ffdf9f; }
body.medieval-game #chat-resize { border-color:#8e7045; background-color:#30271c; }

/* Compact drawers retain their existing safe areas, 44px controls, and bank
   view switching. These selectors change their surfaces only. */
body.medieval-game.compact-ui :is(#compact-dock,#compact-dismiss,#compact-bank-switcher,
  .compact-heading,#compact-stats,#compact-view) {
  color:var(--game-paper);
  background-color:#29231b;
  border-color:#8e7045;
}
body.medieval-game.compact-ui #compact-dismiss { background-color:#100e0aa6; }
body.medieval-game.compact-ui :is(main>aside,#vitals,#world-log,.local-navigation) {
  background-color:#29231b;
  border-color:#8e7045;
}

/* Small, static tiles from the supplied artwork keep surfaces tactile without
   stretching an illustration or adding animation/compositing work. */
body.medieval-game {
  --game-wood:linear-gradient(#21180e40,#21180e40),url('/site-art/wood-panel.webp');
  --game-stone:url('/site-art/stone-panel.webp');
}
body.medieval-game :is(main>aside,#vitals,#combat-panel,#hotbar,#bottom-hud .controls) {
  background-color:#29231b;
  background-image:var(--game-wood);
  background-size:auto,512px 512px;
}
body.medieval-game :is(header,.aside-bottom,aside nav,.map-panel,#sidebar-layout-tools) {
  background-color:#29231b;
  background-image:linear-gradient(#17120c66,#17120c66),url('/site-art/wood-panel.webp');
  background-size:auto,512px 512px;
}
body.medieval-game :is(main>aside,#vitals,#world-log,#hotbar) {
  border-image-source:var(--game-stone);
  border-image-slice:24;
  border-image-width:5px;
  border-image-repeat:round;
}
/* Reserve space for the entire stone frame so child panels cannot paint over
   its left edge or the footer. This also frames the minimap and toolbar. */
body.medieval-game main>aside {
  border-width:5px;
  border-style:solid;
  border-color:transparent;
  background-clip:padding-box;
}
body.medieval-game #chat-resize {
  background-color:#474642;
  background-image:var(--game-stone);
  background-size:256px 256px;
  border-color:#777367;
  top:-5px;
}
/* Paper gets its own dark ink palette; badges and the compose controls keep
   their dark backing. Inline player-selected chat colours remain intact. */
body.medieval-game #world-log,
body.medieval-game.compact-ui #world-log {
  color:#3e2c19;
  background-color:#29231b;
  background-image:var(--game-wood);
  background-size:auto,512px 512px;
  scrollbar-color:#795e3d transparent;
  border-width:5px;
  border-style:solid;
  padding:0;
  gap:0;
}
body.medieval-game #world-log .conversation {
  background-color:#d8bb8d;
  background-image:linear-gradient(#f9e9c32b,#f9e9c32b),url('/site-art/paper-grain.webp');
  background-size:auto,512px 512px;
  padding:10px 12px;
  border-left:1px solid #806545;
}
body.medieval-game.compact-ui #world-log .conversation {
  border-left:0;
  border-top:1px solid #806545;
}
body.medieval-game.compact-ui.compact-short-viewport #world-log {
  padding:0;
  gap:0;
}
body.medieval-game #feed,
body.medieval-game #feed>div { color:#4b3722; }
body.medieval-game #feed>.chat-latest { color:#2e2115; }
body.medieval-game #feed>.chat-line,
body.medieval-game #feed>.chat-line.chat-latest,
body.medieval-game #feed>.chat-line:first-child { color:#21464b; }
body.medieval-game #feed>[data-chat-filter=combat] { color:#713820; }
body.medieval-game #feed>[data-chat-filter=notice] { color:#602b20; font-weight:bold; }
body.medieval-game #world-log .feed-heading {
  background-color:#29231b;
  background-image:var(--game-wood);
  background-size:auto,512px 512px;
  color:var(--game-paper);
  padding:10px 12px;
  border:0;
  box-shadow:none;
  scrollbar-color:#96794d transparent;
}
body.medieval-game #world-log .feed-heading>span { color:var(--game-gold); }
body.medieval-game #world-log .world-links a { color:var(--game-paper); }
body.medieval-game #world-log .world-links a:hover { color:#ffdf9f; }
body.medieval-game #world-log #chat-form { border-color:#9c7a4a; }
body.medieval-game #chat-form #chat-channel {
  background-color:var(--game-button);
  background-image:var(--game-button-stone);
  background-size:auto,256px 256px;
  border-color:#7c8964;
}

/* One restrained header line gives the world back its vertical room. The
   tagline yields first when a wider sidebar leaves less horizontal space. */
body.medieval-game,
body.medieval-game.compact-ui { --header-height:44px; }
body.medieval-game>header {
  height:var(--header-height);
  min-height:0;
  padding:0 14px;
  gap:16px;
  border-bottom:5px solid transparent;
  border-image-source:var(--game-stone);
  border-image-slice:24;
  border-image-width:0 0 5px;
  border-image-repeat:round;
  container:game-header / inline-size;
}
body.medieval-game>header .brand {
  flex:1 1 auto;
  min-width:0;
  gap:8px;
  font:16px/1.2 Georgia,serif;
  letter-spacing:.25px;
  white-space:nowrap;
}
body.medieval-game>header .brand>div { min-width:0;overflow:hidden;text-overflow:ellipsis; }
body.medieval-game>header .crest { font-size:21px; }
body.medieval-game>header .brand small {
  display:inline;
  font:12px/1.2 Georgia,serif;
  letter-spacing:0;
  margin:0;
}
body.medieval-game>header .world-status {
  display:flex;
  flex:0 1 auto;
  min-width:0;
  max-width:50%;
  gap:0;
  font:11px/1.3 Arial,sans-serif;
  letter-spacing:0;
  white-space:nowrap;
  flex-wrap:nowrap;
}
body.medieval-game>header .world-status>i { display:none; }
body.medieval-game>header #world-status {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:normal;
}
body.medieval-game>header #save-status {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
@container game-header (max-width:800px) {
  body.medieval-game>header .brand small { display:none; }
}
@container game-header (max-width:560px) {
  body.medieval-game>header .crest { display:none; }
  body.medieval-game>header .brand { font-size:13px;letter-spacing:0; }
  body.medieval-game>header .world-status { font-size:10px;max-width:62%; }
}
@container game-header (max-width:360px) {
  body.medieval-game>header .brand { font-size:11px; }
  body.medieval-game>header .world-status { font-size:9px;max-width:62%; }
}

/* A single location line leaves the space below it for the Survival panel. */
body.medieval-game .location {
  top:8px;
  display:flex;
  align-items:baseline;
  max-width:calc(100% - 56px);
  min-width:0;
  white-space:nowrap;
  line-height:22px;
}
body.medieval-game .location h1 {
  flex:0 0 auto;
  min-width:0;
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
  font:16px/22px Georgia,serif;
  margin:0;
}
body.medieval-game .location #region-domain {
  display:inline;
  flex:none;
  font:12px/22px Georgia,serif;
  letter-spacing:0;
}
body.medieval-game .location #region-detail {
  display:block;
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font:12px/22px Georgia,serif;
  margin:0;
}
body.medieval-game .location :is(#region-domain,#region-detail)::before { content:' - ';white-space:pre; }
body.medieval-game:not(.compact-ui) #vitals-toggle { top:36px; }
body.medieval-game:not(.compact-ui) #vitals { top:calc(62px / var(--interface-vitals,1)); }
body.medieval-game:not(.compact-ui) #vitals:not(.survival-resizable) {
  max-height:max(0px,calc(100% - (66px + var(--bottom-hud-height,0px)) / var(--interface-vitals,1)));
}
body.medieval-game.compact-ui .location { max-width:calc(100% - 24px); }
body.medieval-game.compact-ui .location h1 { font-size:14px; }
body.medieval-game.compact-ui .location :is(#region-domain,#region-detail) { font-size:10px; }

body.medieval-game #world-log #chat-filters-open {
  align-self:flex-start;
  width:auto;
  min-height:28px;
  padding:4px 8px;
  font:10px/1.4 Arial,sans-serif;
}
body.medieval-game.compact-ui #world-log #chat-filters-open { min-height:44px;font-size:12px; }
body.medieval-game #bottom-hud>.controls { padding-right:34px; }
body.medieval-game #movement-hints-close {
  pointer-events:auto;
  position:absolute;
  right:3px;
  top:3px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  padding:0;
  border:1px solid #7c8964;
  border-radius:3px;
  background:var(--game-button);
  color:var(--game-paper);
  font:18px/1 Arial,sans-serif;
}
body.medieval-game #movement-hints-close:hover { background:var(--game-button-hover);border-color:var(--game-gold); }

.companion-command-hint{position:absolute;bottom:7rem;left:50%;transform:translateX(-50%);z-index:15;max-width:90%;padding:.6rem 1rem;background:#183d2c;color:#f1d89a;border:1px solid #a88a55;box-shadow:0 2px 10px #0008;}
body.medieval-game #witch-reading{width:min(520px,calc(100vw - 24px));box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;padding:22px;color:var(--game-paper);background:linear-gradient(#100d0b55,#100d0b55),url('/site-art/wood-panel.webp') repeat;border:6px solid #66665a;border-image:url('/site-art/stone-panel.webp') 20 round;box-shadow:0 16px 70px #000b;}
#witch-reading::backdrop{background:#030a08bb;}
#witch-reading .witch-reading-header{display:flex;align-items:center;gap:12px;}
#witch-reading h2{flex:1;margin:0;color:#e8c581;font:26px/1.2 Georgia,serif;}
#witch-reading .witch-reading-cards{display:flex;justify-content:center;gap:14px;padding:24px 0;}
#witch-reading .witch-reading-cards span{display:grid;place-items:center;width:70px;height:100px;background:var(--game-button-stone);border:2px solid #b4955f;box-shadow:0 5px 8px #0008;outline:1px solid #b4955f;outline-offset:-7px;color:#e8c581;font:36px Georgia,serif;transform:rotate(-7deg);}
#witch-reading .witch-reading-cards span:nth-child(2){transform:translateY(-8px);}
#witch-reading .witch-reading-cards span:nth-child(3){transform:rotate(7deg);}
#witch-reading .witch-reading-paper{background:#dfc69d url('/site-art/paper-grain.webp') repeat;color:#302115;padding:14px 18px;font:15px/1.5 Georgia,serif;}
#witch-reading p{margin:0 0 10px;}
#witch-reading .witch-reading-cost{font-weight:bold;}
#witch-reading ul{margin:0;padding-left:20px;}
#witch-reading .witch-reading-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
#witch-reading .witch-reading-actions button{flex:1;min-height:42px;}