@import url('./loot-card.css');
@import url('./food-buffs.css');
@import url('./city-service.css');
@import url('./assignment.css');
@import url('./professions.css');
@import url('./quest-book.css');
@import url('./quest-journal.css');
@import url('./adventure-guild.css');
@import url('./commerce.css');
@import url('./player-profile.css');
@import url('./possession.css');
@import url('./grove.css');
@import url('./tide.css');
@import url('./group-loot.css');
@import url('./drop-statistics.css');
@import url('./party.css');
@import url('./workshop.css');
@import url('./surveys.css');
@import url('./guild.css');
:root {
  color-scheme:dark;
  --bg:#101411;
  --sidebar:#131814;
  --panel:#191f1a;
  --panel-soft:#1d241e;
  --border:#30382d;
  --border-soft:#262f27;
  --text:#e6e7dd;
  --muted:#959c8e;
  --dim:#64705f;
  --gold:#d1b37a;
  --green:#87a883;
  --red:#bb776c;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
  --ui-font-hud:11px;
  --ui-font-journal:12px;
  --ui-font-field:14px;
  --ui-font-encounter:12px;
  --ui-font-inventory:12px;
  --ui-font-navigation:10px;
  --encounter-font-extra:0px
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:not-allowed;
  opacity:.42
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}

button {
  transition:background .18s,border-color .18s,color .18s,transform .18s
}

input,select {
  background:#111712;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:5px;
  padding:10px 12px;
  min-width:0;
  outline:none
}

input:focus,select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 2px #d1b37a13
}

input::placeholder {
  color:#727d6e
}

a {
  color:inherit;
  text-decoration:none
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-weight:500
}

h1 {
  font-family:var(--serif);
  font-size:35px;
  line-height:1.2;
  letter-spacing:-.6px
}

h2 {
  font-family:var(--serif);
  font-size:20px
}

h3 {
  font-family:var(--serif);
  font-size:18px
}

p {
  color:var(--muted)
}

strong,b {
  font-weight:600
}

small,.small {
  font-size:12px
}

.muted,.subtle {
  color:var(--muted)
}

.subtle {
  font-size:11px
}

.gold {
  color:var(--gold)
}

.icon {
  width:19px;
  height:19px;
  flex-shrink:0;
  vertical-align:middle
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:600;
  color:var(--gold)
}

.title-dot {
  color:var(--gold)
}

.brand-word {
  font-family:var(--serif);
  font-size:37px;
  letter-spacing:5px;
  color:#eee5ca
}

.brand-word>span {
  color:var(--gold);
  font-size:20px;
  position:relative;
  top:-10px;
  letter-spacing:0;
  margin-left:3px
}

.brand {
  display:block;
  margin:29px 25px 25px
}

.brand-sub {
  font-size:7px;
  color:#92977f;
  display:block;
  letter-spacing:1.4px;
  margin-top:1px
}

.sidebar {
  width:207px;
  position:fixed;
  inset:0 auto 0 0;
  border-right:1px solid var(--border-soft);
  background:linear-gradient(165deg,#192018,var(--sidebar) 45%);
  z-index:10;
  display:flex;
  flex-direction:column
}

.sidebar-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,#424634,transparent);
  margin:0 23px 28px
}

.nav-label {
  font-size:9px;
  font-weight:600;
  letter-spacing:1.8px;
  color:#747f6d;
  margin:0 26px 14px
}

.sidebar nav {
  padding:0 12px
}

.nav-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid transparent;
  background:none;
  text-align:left;
  border-radius:5px;
  color:#9ba493;
  margin-bottom:5px;
  font-size:12px
}

.nav-item .icon {
  width:18px;
  height:18px;
  color:#7e8c73
}

.nav-item:hover {
  color:var(--text);
  background:#ffffff05
}

.nav-item.active {
  color:#e1d6b4;
  background:linear-gradient(90deg,#c6b97919,#9e956708);
  border-color:#a89d4830;
  box-shadow:inset 2px 0 var(--gold)
}

.nav-item.active .icon {
  color:var(--gold)
}

.nav-badge {
  font-size:9px;
  background:#b3a66a1c;
  padding:1px 5px;
  color:var(--gold);
  margin-left:auto;
  border:1px solid #a89d4830;
  border-radius:3px
}

.sidebar-bottom {
  margin-top:auto;
  padding:24px 12px 0
}

.journey-note {
  padding:24px 13px 31px;
  font-family:var(--serif);
  font-style:italic;
  color:#89977c;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  line-height:1.8
}

.journey-note .icon {
  width:18px;
  color:#667959;
  margin-top:4px
}

.server-status {
  border-top:1px solid var(--border-soft);
  margin:15px 0 0;
  padding:20px 9px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  color:var(--muted)
}

.server-status i,.online-dot,.footer i {
  display:inline-block;
  width:5px;
  height:5px;
  background:#80a97c;
  border-radius:50%;
  box-shadow:0 0 8px #8fb98c44
}

.server-status>span:last-child {
  margin-left:auto;
  color:#76876e
}

.main {
  margin-left:207px
}

.topbar {
  height:69px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border-soft);
  padding:0 35px;
  background:#141915
}

.breadcrumb {
  font-size:11px;
  color:#828b7a
}

.breadcrumb span {
  margin:0 14px;
  color:#45513f
}

.breadcrumb strong {
  font-weight:400;
  color:#c2c8b7
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:24px
}

.world-time {
  font-size:10px;
  color:#8f997f;
  display:flex;
  align-items:center;
  gap:7px
}

.world-time .icon {
  color:#c4ac74;
  width:15px
}

.profile-chip {
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-left:1px solid var(--border);
  padding:0 0 0 23px;
  background:none;
  font-size:11px
}

.profile-chip>.icon {
  width:12px;
  color:var(--muted)
}

.avatar-small {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  flex-shrink:0;
  background:linear-gradient(135deg,#616547,#2e3f30);
  border:1px solid #8b8a5a50;
  border-radius:50%;
  color:#ddd3ad;
  font-family:var(--serif);
  font-size:14px
}

.content {
  max-width:1480px;
  margin:0 auto;
  padding:30px 35px 0
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:23px
}

.page-heading .eyebrow {
  font-size:9px;
  letter-spacing:2px;
  display:block;
  margin-bottom:8px
}

.page-heading p {
  font-size:12px;
  margin-top:9px
}

.region-tag {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:#a5b494;
  padding:8px 11px;
  border:1px solid #62774b40;
  border-radius:5px;
  background:#788c4c09
}

.region-tag .icon {
  width:15px
}

.hud {
  display:flex;
  align-items:center;
  gap:24px;
  border:1px solid var(--border);
  border-radius:7px;
  background:linear-gradient(100deg,#20271d,#181e19);
  padding:17px 20px;
  margin-bottom:24px;
  min-height:83px
}

.hud-identity {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:168px;
  padding-right:16px;
  border-right:1px solid #36402e
}

.hud-identity>div:last-child {
  min-width:0
}

.hud-identity strong {
  font-family:var(--serif);
  font-size:16px;
  display:block;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis
}

.hud-identity>div>span {
  font-size:9px;
  color:#959f87;
  display:block;
  margin-top:3px
}

.level-medallion {
  height:44px;
  width:39px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#a4925410;
  border:1px solid #97854c70;
  clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);
  font-family:var(--serif);
  font-size:22px;
  color:var(--gold);
  line-height:1
}

.level-medallion span {
  font-family:var(--sans);
  font-size:7px;
  letter-spacing:1px;
  margin-top:3px
}

.hud-bar {
  flex:1;
  min-width:100px;
  max-width:260px
}

.hud-bar>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px;
  font-size:9px;
  gap:8px;
  color:#afb7a1
}

.hud-bar>div>span {
  display:flex;
  align-items:center;
  gap:5px
}

.hud-bar .icon {
  width:12px;
  height:12px
}

.hud-bar:has(.hp) .icon {
  color:var(--red)
}

.hud-bar:has(.xp) .icon {
  color:var(--gold)
}

.hud-bar strong {
  color:#d2d7c8;
  font-size:10px;
  white-space:nowrap
}

.hud-bar small {
  font-size:9px;
  color:#6f7c68
}

.progress {
  height:4px;
  background:#0f1510;
  border-radius:3px;
  overflow:hidden;
  border:1px solid #37422d30
}

.progress>span {
  display:block;
  background:#6b895b;
  height:100%;
  border-radius:3px;
  transition:width .3s
}

.progress.hp>span {
  background:linear-gradient(90deg,#7c5448,#bb8071)
}

.progress.xp>span {
  background:linear-gradient(90deg,#8f8145,#c4ae6e)
}

.hud-stat {
  display:grid;
  grid-template-columns:17px 20px;
  column-gap:7px;
  align-items:center
}

.hud-stat .icon {
  width:16px;
  color:#a5ae95
}

.hud-stat strong {
  font-size:16px
}

.hud-stat>span {
  font-size:9px;
  color:#89967f;
  grid-column:1 / -1;
  text-align:center;
  margin-top:3px
}

.hud-gold {
  display:flex;
  align-items:center;
  gap:9px;
  border-left:1px solid #36402e;
  padding-left:20px;
  min-width:112px
}

.hud-gold>.icon {
  width:23px;
  height:23px;
  color:var(--gold)
}

.hud-gold strong {
  color:#e1c489;
  display:block;
  font-size:19px;
  font-family:var(--serif)
}

.hud-gold span {
  font-size:9px;
  color:#989d84;
  display:block
}

.world-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 306px;
  gap:21px
}

.world-main,.world-aside {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px
}

.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:7px;
  overflow:hidden
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--border-soft);
  gap:10px;
  min-height:54px
}

.panel-heading>div {
  display:flex;
  align-items:center;
  gap:9px
}

.panel-heading>div>.icon {
  width:16px;
  height:16px;
  color:#a8b197
}

.panel-heading h2 {
  font-size:15px;
  white-space:nowrap
}

.coordinates {
  display:flex;
  align-items:center;
  gap:7px;
  color:#c8b783;
  font-size:11px;
  letter-spacing:1px
}

.coordinates .icon {
  width:13px
}

.coordinates>span {
  color:#677361
}

.map-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  background:radial-gradient(ellipse at center,#47523933,#141a14 80%);
  padding:22px 55px 43px;
  overflow:hidden
}

.tile-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  width:100%;
  max-width:440px;
  aspect-ratio:1;
  gap:3px;
  padding:3px;
  background:#000;
  border:1px solid #59583b75;
  box-shadow:0 14px 40px #0005;
  transform:rotate(0deg)
}

.tile {
  position:relative;
  container-type:inline-size;
  container-name:map-tile;
  border:1px solid #ffffff08;
  background:#000;
  min-width:0;
  padding:0;
  aspect-ratio:1;
  overflow:hidden;
  opacity:1!important;
  border-radius:1px;
  transition:filter .18s,border-color .18s
}

.tile img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.83) saturate(.8);
  pointer-events:none
}

.tile.unmapped {
  background:#000;
  border-color:#000
}

.tile.unmapped:after {
  display:none
}

.tile.blocked img {
  filter:none
}

.tile.blocked:after {
  display:none
}

.tile.adjacent:not(:disabled):hover {
  border-color:#e0c175;
  z-index:1;
  box-shadow:0 0 14px #c7b27e33
}

.tile.adjacent:not(:disabled):hover img {
  filter:brightness(1.08) saturate(.9)
}

.tile.current {
  z-index:2
}

/* Open corners identify the tile without covering its artwork with a frame. */
.tile-current-corners {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#e4dbca;
  stroke-width:1.5;
  stroke-linecap:square;
  filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 1px #000);
  pointer-events:none;
  z-index:1
}

.player-marker {
  /* Always reserve the count row so arriving players never shift or resize the P. */
  --player-marker-size:min(clamp(24px,44cqw,42px),calc((100cqw - 35px) * 6 / 7));
  position:absolute;
  top:min(50%,calc(100% - 31px - var(--player-marker-size) * 7 / 12));
  left:50%;
  transform:translate(-50%,-50%);
  width:var(--player-marker-size);
  aspect-ratio:36 / 42;
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px #000b);
  z-index:2;
}

.player-marker-shield {
  fill:#2c2925;
  stroke:#cbbb9e;
  stroke-width:1.25;
  stroke-linejoin:round
}

.player-marker-letter {
  fill:#f5eddd;
  font:700 21px var(--serif);
  text-anchor:middle
}

/* The tutorial uses the existing chat column for calm, persistent guidance. */
.in-tutorial .chat-pane > :not(#tutorial-guide) { display:none; }
.in-tutorial .gameplay-frame > .journal { grid-template-rows:90px minmax(0,1fr); }
.tutorial-guide { padding:16px 4px 16px 0; overflow:auto; min-height:0; color:#d8ccb2; }
.tutorial-guide .eyebrow { color:#b9a67b; font-size:10px; letter-spacing:1.6px; }
.tutorial-guide h3 { font:400 24px/1.2 var(--serif); color:#eadfc7; margin:12px 0; }
.tutorial-guide p { font-size:14px; line-height:1.6; margin:0 0 12px; }
#page-content > .tutorial-guide { padding:16px 22px; margin-bottom:16px; border:1px solid #766749; border-radius:8px; background:#373228; max-width:760px; }
.tutorial-focus { animation:tutorial-emphasis 2.4s ease-in-out infinite; }
@keyframes tutorial-emphasis { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.22); } }
.tutorial-pointers { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; overflow:visible; pointer-events:none; z-index:10000; }
.tutorial-pointers::backdrop { background:transparent; pointer-events:none; }
.tutorial-pointer { position:absolute; display:block; width:var(--tutorial-pointer-size,72px); height:var(--tutorial-pointer-size,72px); pointer-events:none; }
.tutorial-pointer svg { width:100%; height:100%; overflow:visible; stroke:#f4d38c; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 3px #10140f) drop-shadow(0 0 5px #10140f); animation:tutorial-arrow 2.4s ease-in-out infinite; }
@keyframes tutorial-arrow { 0%,100% { transform:translateX(-6px); opacity:.9; } 50% { transform:translateX(0); opacity:1; } }
.in-tutorial .tile img { animation:tutorial-reveal .55s ease-out; }
@keyframes tutorial-reveal { from { opacity:0; } to { opacity:1; } }
.tutorial-modal-hint { margin:0 0 18px; padding:12px 16px; border:0; border-radius:6px; background:#d6bf7f0d; color:#d9cbaa; font-size:14px; line-height:1.6; }
.tutorial-modal-hint p { margin:0 0 8px; }
.tutorial-modal-hint p:last-child { margin-bottom:0; }
.game-dialog.cooking-dialog:has(.tutorial-modal-hint) { --cook-list-height:clamp(200px,calc(87dvh - 480px),300px); }
.tutorial-map-locked { padding:32px; }
dialog.tutorial-story { width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 44px); padding:0; overflow:hidden; background:radial-gradient(ellipse at top,#49403155,transparent 60%),#28251f; border:1px solid #8e7b55; border-radius:12px; color:#d8ccb4; box-shadow:0 22px 100px #000a; }
dialog.tutorial-story[open] { display:flex; flex-direction:column; }
.tutorial-story::backdrop { background:#080a08ba; backdrop-filter:blur(3px); }
.tutorial-story-heading { padding:26px 36px 18px; flex:none; }
.tutorial-story-heading h2 { font:400 30px/1.15 var(--serif); letter-spacing:1px; margin:10px 0 0; color:#eee2c6; }
.tutorial-story-body { padding:0 36px 12px; overflow-y:auto; overscroll-behavior:contain; min-height:0; font:16px/1.65 var(--serif); scrollbar-gutter:stable; }
.tutorial-story-body p { margin:0 0 13px; }
.tutorial-story-body p:last-child { color:#f0dfb7; }
.tutorial-story-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 36px; border-top:1px solid #bba27122; background:#26231e; flex:none; }
.tutorial-story-footer small,.tutorial-story-footer strong { display:block; }
.tutorial-story-footer small { font-size:11px; color:#ac9b79; margin-bottom:5px; }
.tutorial-story-ornament { color:#b39c6e; }
.quest-story .tutorial-story-heading { position:relative; padding-right:76px; }
.quest-story .tutorial-story-heading h2 { letter-spacing:0; text-transform:none; }
.quest-story-close { position:absolute; right:20px; top:22px; font-size:24px; }
.quest-story .quest-spoken { color:#eadbbf; }
.quest-story .tutorial-story-footer { flex-wrap:wrap; }
.quest-story .tutorial-story-footer > .btn { max-width:100%; white-space:normal; }
.quest-story-terms { display:flex; flex-wrap:wrap; gap:12px 28px; }
.quest-rewards { margin-top:16px; padding-top:12px; border-top:1px solid var(--border-soft); }
.quest-rewards > small { display:block; color:var(--muted); font-size:11px; margin-bottom:7px; }
.quest-reward-list { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.quest-reward-token { display:inline-flex; align-items:center; gap:7px; min-height:36px; max-width:100%; padding:7px 11px; border:1px solid #777b5e66; border-radius:5px; background:linear-gradient(135deg,#343a2e,#272e25); color:#c1c3b3; font:500 13px/1.5 var(--sans); box-shadow:inset 0 1px 0 #ffffff08; }
.quest-reward-item strong { color:var(--item-color); font-weight:600; overflow-wrap:anywhere; }
.quest-reward-quantity { flex:none; font-variant-numeric:tabular-nums; }
.quest-reward-gold { color:#e6c77e; white-space:nowrap; }
.quest-reward-gold svg { flex:none; width:18px; height:18px; }
.quest-reward-item:hover,.quest-reward-item:focus-visible { border-color:#a69a70; background:linear-gradient(135deg,#3d4435,#2d352a); }
.quest-reward-item:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.quest-story-terms .quest-rewards { margin:0; padding:0; border:0; }
.quest-story-terms .quest-reward-list strong { display:inline; }
@media (prefers-reduced-motion:reduce) { .in-tutorial .tile img,.tutorial-focus,.tutorial-pointer svg { animation:none; } }

.tile-quest {
  position:absolute;
  right:4px;
  top:3px;
  display:grid;
  place-items:center;
  width:15px;
  height:18px;
  color:#ffe098;
  text-shadow:0 1px 3px #000;
  font-family:var(--serif);
  font-size:18px;
  font-weight:bold
}

.tile-players {
  position:absolute;
  bottom:4px;
  right:4px;
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  font-size:16px;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:#f5eddd;
  background:#24211de8;
  padding:0 4px;
  border:1px solid #cbbb9e50;
  border-radius:3px;
  box-shadow:0 1px 3px #0008;
  z-index:3
}

@container map-tile (max-width:54px) {
  .tile-players { height:17px; min-width:17px; font-size:12px; padding:0 2px; right:2px; bottom:2px; }
  .player-marker {
    --player-marker-size:min(24px,calc((100cqw - 24px) * 6 / 7));
    top:min(50%,calc(100% - 22px - var(--player-marker-size) * 7 / 12));
  }
}
@container map-tile (max-width:36px) {
  .tile-players { height:12px; min-width:12px; font-size:10px; padding:0 1px; right:1px; bottom:1px; }
  .player-marker {
    --player-marker-size:min(14px,calc((100cqw - 15px) * 6 / 7));
    top:min(50%,calc(100% - 14px - var(--player-marker-size) * 7 / 12));
  }
}

.map-north {
  position:absolute;
  left:22px;
  top:20px;
  font-family:var(--serif);
  font-size:12px;
  color:#a7a580;
  display:flex;
  flex-direction:column;
  align-items:center
}

.map-north span {
  font-size:25px;
  margin-top:-5px
}

.map-location {
  position:absolute;
  bottom:13px;
  left:0;
  right:0;
  text-align:center;
  font-family:var(--serif);
  font-size:13px;
  color:#cfc4a2
}

.map-location .icon {
  width:13px;
  margin-right:6px;
  color:var(--gold)
}

.map-legend {
  display:none;
  position:absolute;
  bottom:17px;
  right:17px;
  font-size:8px;
  color:#919c7e;
  gap:9px
}

.map-legend>span {
  display:flex;
  align-items:center;
  gap:4px
}

.map-legend i {
  height:5px;
  width:5px;
  border-radius:1px;
  background:#9ea783
}

.map-legend .legend-you {
  background:var(--gold)
}

.map-bottom {
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#181f17;
  border-top:1px solid var(--border-soft)
}

.map-bottom>span {
  font-size:9px;
  color:#8b967e;
  display:flex;
  align-items:center;
  gap:6px
}

.map-bottom .icon {
  width:13px;
  height:13px
}

.text-btn {
  border:0;
  background:none;
  color:#9eae8b;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  white-space:nowrap
}

.text-btn:hover {
  color:var(--gold)
}

.text-btn .icon {
  width:13px;
  height:13px
}

.cooldown-track {
  height:2px;
  background:#151b13
}

.cooldown-track>span {
  display:block;
  height:100%;
  background:var(--gold);
  transition:width .1s linear
}

.location-image {
  height:100px;
  background-position:center;
  background-size:cover;
  position:relative;
  isolation:isolate;
  overflow:hidden
}

.location-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#182019 0%,#18201977 60%,#18201933);
  z-index:-1
}

.location-overline {
  position:absolute;
  left:18px;
  top:16px;
  font-size:8px;
  letter-spacing:2px;
  color:#ece7c6;
  text-shadow:0 1px 3px #000
}

.location-symbol {
  position:absolute;
  bottom:3px;
  left:18px;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:1px solid #a89a6a77;
  background:#263024cf;
  border-radius:6px;
  color:var(--gold)
}

.location-body {
  padding:13px 18px 15px
}

.location-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px
}

.location-title h2 {
  font-size:22px
}

.area-badge {
  padding:3px 6px;
  border:1px solid #71845b35;
  border-radius:3px;
  font-size:8px;
  white-space:nowrap;
  color:#acbd99;
  background:#7a99591a
}

.area-badge.danger {
  color:#ccaaa0;
  background:#b8866a0a;
  border-color:#ac765a40
}

.area-badge.gold-badge {
  color:var(--gold);
  border-color:#b3995333;
  background:#b399530a
}

.location-body>p {
  font-size:11px;
  line-height:1.85
}

.field-actions {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:16px
}

.field-actions:empty {
  margin-top:0
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #515d40;
  background:#293722;
  padding:9px 14px;
  border-radius:4px;
  color:#cfddc0;
  font-size:11px;
  line-height:1.5;
  white-space:nowrap
}

.btn .icon {
  width:15px;
  height:15px
}

.btn:not(:disabled):hover {
  background:#36462e;
  border-color:#7c8e63;
  transform:translateY(-1px)
}

.btn.primary {
  background:linear-gradient(135deg,#c4b078,#ad955d);
  color:#202818;
  border-color:#dfcd924f;
  font-weight:600
}

.btn.primary:not(:disabled):hover {
  background:linear-gradient(135deg,#d5c18c,#c0a770);
  box-shadow:0 3px 12px #a9984420
}

.btn.secondary {
  background:#252e23;
  border-color:#3c4734;
  color:#b8c3ac
}

.btn.wide {
  width:100%
}

.btn.wide>.icon:last-child:not(:first-child) {
  margin-left:auto
}

.btn.small-btn {
  font-size:10px;
  padding:7px 10px
}

.field-actions .quest-btn {
  display:flex;
  flex-wrap:nowrap;
  container-type:inline-size;
  justify-content:center;
  text-align:center
}

.quest-button-label { display:inline-flex; align-items:center; justify-content:center; gap:.55em; white-space:nowrap; font-size:min(1em,4.2cqi); }
.quest-button-emblem { flex:none; width:1.55em; height:1.8em; overflow:visible; }
.quest-button-emblem path { fill:#293829; stroke:#c0c49b; stroke-width:1.1; }
.quest-button-emblem text { fill:#ffe098; font:700 21px Georgia,'Times New Roman',serif; }
.quest-button-status { color:inherit; }
.quest-button-name { color:inherit; font-weight:600; }
.field-actions .quest-btn:not(:disabled):hover .quest-button-emblem path { stroke:#e0c47d; }
.field-actions .quest-btn:focus-visible { outline:2px solid #e0c47d; outline-offset:3px; }
.field-actions .quest-btn:disabled .quest-button-emblem text { fill:#c6c4ad; }

.button-caption {
  display:block;
  font-size:9px;
  color:#a7a58c;
  font-weight:400;
  width:100%;
  text-align:left;
  margin-left:22px;
  white-space:normal
}

.action-status {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  color:#7f8d72;
  margin-top:14px
}

.status-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#8fa57b
}

.tracker-body {
  padding:17px 18px
}

.tracker-body .eyebrow {
  font-size:8px;
  letter-spacing:1.3px;
  color:#a6ae8b
}

.tracker-body h3 {
  font-size:16px;
  margin:7px 0 10px
}

.tracker-body>p {
  font-size:11px;
  line-height:1.8
}

.tracker-hint {
  border-top:1px solid var(--border-soft);
  padding-top:13px;
  margin-top:14px;
  color:#979f82;
  font-size:9px;
  display:flex;
  align-items:center;
  gap:6px
}

.tracker-hint .icon {
  width:12px;
  height:12px
}

.objective {
  margin:11px 0
}

.objective>div:first-child {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  margin-bottom:6px;
  color:#b3bda5;
  gap:10px
}

.objective span {
  display:flex;
  align-items:center;
  gap:5px
}

.objective i {
  width:5px;
  height:5px;
  border:1px solid #727e64;
  border-radius:50%
}

.objective .icon {
  width:11px;
  height:11px
}

.objective strong {
  color:#bcb28a;
  font-weight:400;
  white-space:nowrap
}

.objective .progress {
  height:3px
}

.guild-tracker {
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:16px
}

.guild-tracker small {
  font-size:9px;
  color:var(--muted)
}

.skill-mini-list {
  padding:10px 18px 13px
}

.skill-mini {
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 0
}

.skill-mini>.icon {
  width:14px;
  height:14px;
  color:#a6b38f
}

.skill-mini>span {
  font-size:11px;
  color:#b8c2ab;
  min-width:62px
}

.skill-mini>div {
  flex:1
}

.skill-mini strong {
  font-size:10px;
  color:#cec6a1;
  width:15px;
  text-align:right
}

.skill-mini .progress {
  height:3px
}

.peaceful {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:22px 18px;
  min-height:82px
}

.peaceful>.icon {
  width:28px;
  height:28px;
  color:#687d55;
  transform:rotate(-10deg)
}

.peaceful strong {
  font-family:var(--serif);
  color:#b8c4a9;
  font-size:14px;
  font-weight:400
}

.peaceful p {
  font-size:10px;
  color:#849276;
  margin-top:4px
}

.enemy-list {
  padding:0 16px
}

.enemy {
  display:flex;
  align-items:center;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--border-soft)
}

.enemy:last-child {
  border:0
}

.enemy-info {
  flex:1;
  min-width:0
}

.enemy-info>strong {
  font-family:var(--serif);
  font-size:15px
}

.enemy-stats {
  display:flex;
  gap:15px;
  margin:6px 0
}

.enemy-stats span {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  color:#a1ab93
}

.enemy-stats .icon {
  width:12px;
  height:12px
}

.enemy-hp {
  height:3px;
  max-width:260px
}

.enemy-hp>span {
  background:#b57c6c
}

.attack-btn {
  background:#3a3324;
  border-color:#75604070;
  color:#d2ba90
}

.attack-btn:not(:disabled):hover {
  background:#50402b;
  border-color:#92794d
}

.mini-badge {
  font-family:var(--sans);
  font-size:8px;
  color:var(--gold);
  margin-left:8px
}

.quick-panel {
  padding:13px 15px
}

.quick-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  letter-spacing:1.4px;
  font-size:8px;
  color:#a5ad96;
  margin-bottom:11px
}

.quick-label>span {
  letter-spacing:0;
  color:#738069
}

.quickslots {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px
}

.quickslot {
  min-height:54px;
  padding:5px;
  position:relative;
  background:#141b14;
  border:1px dashed #465039;
  border-radius:4px;
  color:#596c4b;
  text-align:center
}

.quickslot:hover {
  border-color:#ab9d64;
  color:var(--gold);
  background:#252d1c
}

.quickslot kbd {
  position:absolute;
  left:5px;
  top:3px;
  font:8px var(--sans);
  color:#879478
}

.quick-plus {
  font-size:21px;
  font-weight:200;
  line-height:42px
}

.quickslot.filled {
  border-style:solid;
  background:#273020;
  border-color:#53623f;
  padding:12px 4px 9px
}

.quickslot.filled>span {
  font-size:9px;
  line-height:1.3;
  display:block;
  color:#c0cbaa;
  max-width:100%;
  overflow-wrap:anywhere
}

.quickslot.filled>b {
  position:absolute;
  bottom:1px;
  right:4px;
  font-size:8px;
  color:var(--gold)
}

.count-pill {
  font-size:9px;
  color:#a2af92;
  background:#7d8b631a;
  padding:1px 6px;
  border:1px solid #71845b25;
  border-radius:3px
}

.people-body {
  padding:12px 18px
}

.people-body>.small {
  font-size:10px
}

.person {
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 0
}

.person>div {
  flex:1
}

.person strong {
  font-size:11px;
  display:block
}

.person span:not(.avatar-small) {
  font-size:9px;
  color:var(--muted)
}

.icon-btn {
  background:none;
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

.icon-btn:hover {
  background:#334129;
  color:var(--gold)
}

.party {
  margin-top:10px;
  border-top:1px solid var(--border);
  padding-top:12px;
  font-size:11px
}

.party p {
  font-size:10px;
  margin:7px 0
}

.party .btn {
  font-size:10px;
  padding:5px 8px;
  margin-right:5px
}

.journal {
  margin-top:21px
}

.journal-tabs {
  display:flex;
  border-bottom:1px solid var(--border-soft);
  padding:0 18px;
  gap:24px
}

.journal-tabs>button {
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:14px 0;
  color:#85967a;
  font-size:11px
}

.journal-tabs>button.active {
  color:var(--gold);
  border-bottom-color:#c2aa68
}

.journal-tabs .icon {
  width:14px;
  height:14px
}

.journal-tabs>span {
  margin-left:auto
}

.journal-entries {
  height:110px;
  overflow-y:auto;
  padding:10px 18px;
  scrollbar-width:thin;
  scrollbar-color:#465239 transparent
}

.journal-entry {
  display:flex;
  gap:16px;
  font-size:11px;
  padding:4px 0;
  line-height:1.65
}

.journal-entry time {
  color:#64755a;
  font-size:10px;
  flex-shrink:0;
  padding-top:1px
}

.journal-entry>span {
  color:#a4b198;
  overflow-wrap:anywhere
}

.journal-entry.loot>span {
  color:#c3bd91
}

.journal-entry.quest>span,.journal-entry.level>span {
  color:#d7bc7c
}

.journal-entry.combat>span {
  color:#bda08e
}

.journal-entry.heal>span {
  color:#9fbe91
}

.journal-entry b {
  color:#d7d6b9
}

.journal-empty {
  font-size:11px;
  color:#819275;
  padding:12px 0
}

.channel-label {
  font-size:8px;
  color:#718967;
  border:1px solid #3d4c33;
  padding:1px 4px;
  margin:0 6px;
  border-radius:3px
}

.chat-form {
  display:flex;
  padding:8px 12px;
  border-top:1px solid var(--border-soft);
  gap:8px
}

.chat-form[hidden] {
  display:none
}

.chat-form input {
  flex:1;
  font-size:11px;
  padding:8px
}

.chat-form select {
  font-size:10px;
  padding:7px
}

.chat-form .icon-btn {
  width:33px;
  color:var(--gold)
}

.footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 0 22px;
  font-size:8px;
  color:#63725a
}

.footer>span:first-child {
  display:flex;
  gap:6px;
  align-items:center
}

.footer>span:last-child {
  letter-spacing:1px
}

.footer b {
  color:#aa9866;
  font-weight:400;
  padding:0 3px
}

.footer i {
  height:4px;
  width:4px
}

.inventory-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 20px;
  border-bottom:1px solid var(--border);
  gap:12px
}

.filter-tabs {
  display:flex;
  gap:4px;
  flex-wrap:wrap
}

.filter-tabs button {
  background:none;
  border:1px solid transparent;
  padding:6px 9px;
  border-radius:4px;
  color:var(--muted);
  font-size:11px
}

.filter-tabs button.active {
  color:var(--gold);
  background:#bfa86e0b;
  border-color:#bfa86e30
}

#inventory-search {
  font-size:11px;
  max-width:220px
}

.item-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 22px;
  border-bottom:1px solid var(--border-soft)
}

.item-row:last-child {
  border:0
}

.item-symbol {
  width:40px;
  height:40px;
  background:#263021;
  border:1px solid #3e4a32;
  border-radius:5px;
  display:grid;
  place-items:center;
  color:#a8b390;
  flex-shrink:0
}

.item-description {
  flex:1;
  min-width:0
}

.item-description strong {
  font-size:12px
}

.item-description p {
  font-size:11px;
  margin-top:4px
}

.quantity {
  color:#7f916e;
  font-size:10px;
  font-weight:400;
  margin-left:4px
}

.item-value {
  font-size:11px;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:6px
}

.item-value .icon {
  width:14px
}

.rarity-common {
  --item-color:#eceeef;
  color:var(--item-color)
}

.rarity-uncommon {
  --item-color:#92ce81;
  color:var(--item-color)
}

.rarity-rare {
  --item-color:#79b8ff;
  color:var(--item-color)
}

.rarity-epic {
  --item-color:#c29af0;
  color:var(--item-color)
}

.rarity-legendary {
  --item-color:#efb45d;
  color:var(--item-color)
}

.empty-state {
  padding:65px 20px;
  text-align:center
}

.empty-state>.icon {
  width:40px;
  height:40px;
  color:#687e55;
  margin-bottom:18px
}

.empty-state h3 {
  font-size:22px
}

.empty-state p {
  font-size:12px;
  margin-top:10px
}

.character-overview {
  display:flex;
  align-items:center;
  gap:24px;
  padding:28px;
  margin-bottom:24px
}

.character-overview h2 {
  font-size:28px;
  margin:4px 0
}

.character-overview p {
  font-size:11px
}

.character-seal {
  height:85px;
  width:72px;
  position:relative;
  display:grid;
  place-items:center;
  color:var(--gold)
}

.character-seal>.icon {
  width:72px;
  height:85px;
  stroke-width:.7
}

.character-seal>span {
  position:absolute;
  top:24px;
  font-size:26px;
  font-family:var(--serif)
}

.character-numbers {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-left:auto
}

.character-numbers>div {
  text-align:center
}

.event-party-link { display:inline; margin:0 0 0 5px; padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.event-party-link:hover { color:#c2efff; }
.event-party-link:focus-visible { outline:1px solid currentColor; outline-offset:3px; }
.event-invite-inactive { opacity:.7; font-size:.9em; }

.character-numbers strong {
  font-family:var(--serif);
  font-size:27px;
  color:var(--gold);
  display:block;
  font-weight:400
}

.character-numbers span {
  font-size:10px;
  color:var(--muted)
}

.equipment-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px
}

.equipment-slot {
  display:flex;
  gap:10px;
  align-items:center;
  padding:13px 18px;
  border-bottom:1px solid var(--border-soft);
  font-size:11px
}

.equipment-slot:last-child {
  border:0
}

.equipment-slot>span {
  min-width:85px;
  color:#87967a;
  font-size:10px
}

.equipment-slot strong {
  font-weight:400;
  color:var(--item-color,#c2cbb4)
}

.equipment-slot .text-btn {
  margin-left:auto
}

.skill-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.skill-card {
  padding:26px;
  position:relative
}

.skill-card-icon {
  width:47px;
  height:47px;
  border:1px solid #71845b50;
  background:#71845b15;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--gold);
  margin-bottom:25px
}

.skill-card-icon>.icon {
  width:25px;
  height:25px
}

.skill-card h2 {
  font-size:25px;
  margin:7px 0 12px
}

.skill-card p {
  font-size:12px;
  line-height:1.9;
  min-height:88px
}

.skill-xp {
  display:flex;
  flex-direction:column;
  font-size:10px;
  color:#86967b;
  gap:6px;
  margin:22px 0 9px
}

.skill-xp strong {
  color:#c3bea1
}

.quest-cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px
}

.quest-card {
  padding:24px;
  display:flex;
  flex-direction:column
}

.quest-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px
}

.quest-card-top>.icon {
  width:25px;
  height:25px;
  color:var(--gold)
}

.quest-card h2 {
  font-size:23px;
  margin-bottom:12px
}

.quest-card>p {
  font-size:12px;
  line-height:1.9;
  margin-bottom:14px
}

.quest-footer {
  border-top:1px solid var(--border-soft);
  padding-top:15px;
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:10px;
  color:#a1ae92
}

.quest-footer>span {
  display:flex;
  align-items:center;
  gap:5px
}

.quest-footer .icon {
  height:12px;
  width:12px
}

.quest-steps {
  margin-bottom:20px
}

.quest-steps p {
  font-size:11px;
  display:flex;
  gap:9px;
  margin-top:9px;
  line-height:1.6
}

.quest-steps span {
  font-size:9px;
  color:var(--gold);
  border:1px solid #706c4640;
  border-radius:50%;
  height:17px;
  min-width:17px;
  text-align:center;
  line-height:15px
}

.collection-intro {
  display:flex;
  gap:22px;
  align-items:center;
  padding:25px;
  margin-bottom:24px
}

.collection-intro>.icon {
  width:36px;
  height:36px;
  color:var(--gold)
}

.collection-intro p {
  font-size:11px;
  margin-top:6px
}

.collection-intro>strong {
  margin-left:auto;
  font-size:23px;
  font-family:var(--serif);
  color:var(--gold);
  white-space:nowrap
}

.collection-intro>strong>span {
  font-size:16px;
  color:var(--muted)
}

.collection-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px
}

.collection-card {
  border:1px solid var(--border);
  border-radius:5px;
  background:linear-gradient(135deg,#1b231b,#131a14);
  padding:15px 12px 20px;
  min-height:205px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative
}

.collection-card.unlocked {
  border-color:#bba56680;
  background:linear-gradient(135deg,#3b4027,#1a261a)
}

.card-number {
  align-self:flex-start;
  font-size:9px;
  color:#65735b
}

.card-seal {
  height:83px;
  width:65px;
  display:grid;
  place-items:center;
  color:#46563e
}

.card-seal>.icon {
  width:45px;
  height:45px;
  stroke-width:1
}

.unlocked .card-seal {
  color:var(--gold)
}

.collection-card h3 {
  font-size:15px;
  color:#91a083;
  text-align:center
}

.collection-card>span:last-child {
  font-size:8px;
  color:#5d7053;
  margin-top:10px
}

.unlocked h3,.unlocked>span:last-child {
  color:#d1bd8d
}

.loot-regions { display:grid; gap:12px; }
.collection-accordions { display:grid; gap:14px; }
.collection-category { padding:0; overflow:hidden; }
.collection-category > summary {
  display:grid; grid-template-columns:auto minmax(180px,1fr) minmax(210px,300px); align-items:center;
  gap:16px; padding:22px 24px; color:var(--text); cursor:pointer; list-style:none;
}
.collection-category > summary::-webkit-details-marker { display:none; }
.collection-category > summary > .icon { width:18px; height:18px; color:var(--gold); transition:transform .15s ease; }
.collection-category[open] > summary > .icon { transform:rotate(90deg); }
.collection-category > summary:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }
.collection-category-name { font:400 24px var(--serif); }
.collection-category-progress { display:grid; gap:7px; }
.collection-category-progress > span { display:flex; justify-content:center; align-items:baseline; gap:7px; }
.collection-category-progress strong { color:var(--gold); font-size:17px; }
.collection-category-progress small { color:var(--muted); font-size:11px; }
.collection-category-progress .progress { height:5px; margin:0; }
.collection-category-body { padding:20px 24px 24px; border-top:1px solid var(--border-soft); }
.collection-category-description { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }
.collection-category-body > .collection-empty { padding:4px 0; }
.collection-category-body .loot-region { background:#ffffff03; }
.loot-region { padding:0; overflow:hidden; }
.loot-region > summary {
  display:grid; grid-template-columns:auto minmax(150px,1fr) minmax(190px,270px); align-items:center;
  gap:14px; padding:17px 20px; color:var(--text); cursor:pointer; list-style:none;
}
.loot-region > summary::-webkit-details-marker { display:none; }
.loot-region > summary > .icon { width:16px; height:16px; color:var(--gold); transition:transform .15s ease; }
.loot-region[open] > summary > .icon { transform:rotate(90deg); }
.loot-region > summary:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }
.loot-region-name { font:400 20px var(--serif); }
.loot-region-progress { display:grid; gap:6px; }
.loot-region-progress > span { display:flex; justify-content:center; align-items:baseline; gap:7px; }
.loot-region-progress strong { color:var(--gold); font-size:15px; }
.loot-region-progress small { color:var(--muted); font-size:11px; }
.loot-region-progress .progress { height:5px; margin:0; }
.loot-region-body { padding:4px 20px 20px; border-top:1px solid var(--border-soft); }
.loot-region-body .collection-grid { padding-top:16px; }
.loot-region-empty { margin:16px 0 0; color:var(--muted); font-size:13px; }
.coin-region-bonus { margin:15px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.coin-region-bonus + .collection-grid { padding-top:12px; }
.coin-list {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:12px 0 0; padding:0; list-style:none;
}
.coin-list-entry {
  display:grid; grid-template-columns:24px 18px minmax(0,1fr); align-items:center; gap:8px; min-height:48px;
  padding:7px 9px; border:1px solid var(--border-soft); border-radius:5px; background:#ffffff03;
}
.coin-list-number { color:#817866; font-size:9px; font-variant-numeric:tabular-nums; }
.coin-list-mark { display:grid; place-items:center; color:#817866; font-size:15px; }
.coin-list-mark .icon { width:14px; height:14px; }
.coin-list-copy { display:grid; gap:2px; min-width:0; }
.coin-list-copy strong { color:#d7ccb0; font-size:12px; font-weight:500; line-height:1.3; }
.coin-list-copy small { color:#918875; font-size:9px; }
.coin-list-entry.missing { opacity:.52; }
.coin-list-entry.missing .coin-list-copy strong { color:#aaa18d; }
.coin-list-entry.found { border-color:#9f8e5b55; background:#a7955a0b; }
.coin-list-entry.found .coin-list-mark { color:#c8b474; }
.coin-tier-lists { display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:10px; margin-top:12px; }
.coin-tier { min-width:0; padding:10px; border:1px solid var(--border-soft); border-radius:6px; background:#ffffff02; }
.coin-tier > header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:2px 2px 8px; }
.coin-tier > header h4 { margin:0; color:#c9bda2; font:500 13px var(--sans); }
.coin-tier > header span { color:#918875; font-size:10px; font-variant-numeric:tabular-nums; }
.coin-tier .coin-list { grid-template-columns:minmax(0,1fr); margin-top:0; }
.coin-tier-bronze > header h4 { color:#c29168; }
.coin-tier-silver > header h4 { color:#c1c5c2; }
.coin-tier-gold > header h4 { color:#d1b45e; }
.coin-tier-platinum > header h4 { color:#bdd4cf; }
.collection-empty { padding:24px; color:var(--muted); font-size:13px; }
.collection-empty p { margin:0; }
@media (max-width:1350px) {
  .coin-tier-lists { display:block; columns:2; column-gap:10px; }
  .coin-tier { display:inline-block; width:100%; margin:0 0 10px; box-sizing:border-box; break-inside:avoid; }
}
@media (max-width:700px) {
  .collection-category > summary { grid-template-columns:auto minmax(0,1fr); }
  .collection-category-progress { grid-column:2; }
  .collection-category-body { padding:16px; }
  .loot-region > summary { grid-template-columns:auto minmax(0,1fr); }
  .loot-region-progress { grid-column:2; }
  .loot-region-body .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coin-list { grid-template-columns:minmax(0,1fr); }
  .coin-tier-lists { columns:1; }
}

.table-scroll {
  overflow-x:auto
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}

th {
  font-size:9px;
  font-weight:500;
  letter-spacing:1px;
  color:#7e906f;
  padding:13px 22px;
  border-bottom:1px solid var(--border);
  text-transform:uppercase
}

td {
  padding:18px 22px;
  border-bottom:1px solid var(--border-soft);
  font-size:12px
}

td:first-child {
  width:65px
}

.rank-number {
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  color:#899778
}

.top-rank {
  color:var(--gold)
}

.your-rank {
  background:#9ca66c0a
}

.ranking-name {
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap
}

.ranking-name .online-dot { flex:0 0 6px; width:6px; height:6px; background:#5fd36d; box-shadow:none; }
.ranking-name .guild-tag { color:#b7aa80; font-size:inherit; font-weight:400; }

.ranking-name small {
  font-size:8px;
  border:1px solid #7c885633;
  padding:1px 5px;
  color:var(--gold);
  border-radius:3px
}







.settings-panel {
  padding:30px;
  max-width:720px
}

.settings-panel h2 {
  font-size:25px;
  margin-bottom:25px
}

.settings-row {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border-soft);
  padding:15px 0;
  font-size:12px;
  gap:16px
}

.settings-row>span {
  color:var(--muted)
}

.settings-panel>.btn {
  margin-top:25px
}

.settings-intro { max-width:58ch; margin:-12px 0 20px; line-height:1.6; }
.font-settings { display:grid; gap:9px; }
.font-setting { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:18px; margin:0; padding:13px 16px; border:1px solid var(--border-soft); border-radius:8px; background:#ffffff06; color:var(--text); }
.font-setting > span { display:grid; gap:2px; min-width:0; }
.font-setting strong { font-size:13px; font-weight:600; }
.font-setting small { color:var(--muted); font-size:12px; }
.font-preview { color:var(--text); font-style:normal; line-height:1.45; }
.font-setting select { width:135px; flex:none; padding:8px 10px; font-size:13px; }
.settings-account-title { margin-top:36px; }
.settings-updates { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0 26px; margin-bottom:24px; border-bottom:1px solid var(--border-soft); }
.settings-updates h2 { margin:0 0 5px; }
.settings-updates p { margin:0; font-size:13px; color:var(--muted); }
.settings-updates .btn { flex:none; }
.game-dialog.patch-notes-dialog { width:700px; height:min(720px,87dvh); max-height:87dvh; display:flex; flex-direction:column; overflow:hidden; }
.game-dialog.patch-notes-dialog:not([open]) { display:none; }
.patch-notes-dialog .modal-heading { position:static; flex:none; background:var(--panel); padding:24px 28px; }
.patch-heading { display:flex; align-items:center; gap:16px; }
.patch-emblem { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--border); border-radius:12px; background:#ffffff05; color:#d4ba7b; }
.patch-emblem .icon { width:25px; height:25px; }
.patch-notes-dialog .eyebrow { font-size:10px; }
.patch-notes-dialog h2 { font-size:28px; }
.patch-history { flex:1; overflow-y:auto; min-height:0; padding:25px 30px; overscroll-behavior:contain; scrollbar-gutter:stable; }
.patch-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.patch-version { padding:5px 10px; border:1px solid #a3ad7040; background:#a3ad7012; border-radius:6px; color:#c8cf9a; font-variant-numeric:tabular-nums; }
.patch-release h3 { font-size:26px; margin:18px 0; }
.patch-notes-dialog .patch-warning { margin:0 0 24px; padding:18px 20px; border:1px solid #ba5e5577; border-left:3px solid #d06b60; border-radius:8px; background:linear-gradient(135deg,#6b2e2a66,#48232366); color:#efbdb6; }
.patch-warning-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.patch-warning-heading > span { display:grid; place-items:center; flex:none; width:25px; height:25px; border:1px solid #e68c7a99; border-radius:50%; color:#ffc0b3; font-size:17px; font-weight:700; }
.patch-warning-heading h4 { margin:0; color:#ffb9ab; font-size:17px; font-weight:600; line-height:1.4; }
.patch-warning ul { display:grid; gap:8px; margin:0; padding-left:18px; font-size:13px; line-height:1.55; }
.patch-warning li::marker { color:#e99081; }
.patch-section + .patch-section { margin-top:26px; padding-top:20px; border-top:1px solid var(--border-soft); }
.patch-section h4 { margin:0 0 14px; color:var(--text); font-size:16px; font-weight:600; }
.patch-changes { list-style:none; display:grid; gap:17px; padding:0; margin:0; }
.patch-changes li { position:relative; padding-left:18px; display:grid; gap:3px; font-size:14px; line-height:1.55; }
.patch-changes li::before { content:''; width:5px; height:5px; border-radius:50%; background:#b6a675; position:absolute; top:9px; left:0; }
.patch-changes strong { font-weight:600; color:var(--text); }
.patch-changes li > span { color:var(--muted); }
.patch-footer { flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:14px; border-top:1px solid var(--border-soft); padding:18px 28px; }
.patch-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; }
.patch-pagination .btn { font-size:13px; padding:9px 12px; }
.patch-page-number { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.patch-release h3:focus { outline:none; }
@media (max-width:600px) { .settings-updates { align-items:flex-start; flex-direction:column; } .patch-history { padding:20px; } .patch-notes-dialog .modal-heading { padding:20px; } }
.guest-account-form { margin:22px 0; padding:22px; border:1px solid var(--border-soft); border-radius:10px; background:#ffffff04; }
.guest-account-form h3 { margin:0 0 10px; font-size:21px; }
.guest-account-form > p { color:var(--muted); font-size:14px; line-height:1.6; }
.guest-account-form fieldset { border:0; padding:0; margin:20px 0 0; min-width:0; }
.guest-account-form label { color:var(--text); font-size:14px; margin:0; }
.guest-account-form input { width:100%; box-sizing:border-box; font-size:14px; }
.guest-account-form small { display:block; margin:7px 0 20px; color:var(--muted); font-size:12px; line-height:1.5; }
.guest-account-passwords { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:20px; }
.guest-account-form > .form-error { color:#d09986; margin:12px 0 0; }
.guest-account-form > .form-error:empty { display:none; }
.guest-account-form > .guest-account-note { margin:14px 0 0; font-size:12px; }
@media (max-width:600px) { .guest-account-passwords { grid-template-columns:1fr; } }
.settings-panel .font-reset { margin-top:16px; }
[data-font-preview="hud"] { font-size:var(--ui-font-hud); }
[data-font-preview="journal"] { font-size:var(--ui-font-journal); }
[data-font-preview="field"] { font-size:var(--ui-font-field); }
[data-font-preview="encounter"] { font-size:var(--ui-font-encounter); }
[data-font-preview="inventory"] { font-size:var(--ui-font-inventory); }
[data-font-preview="navigation"] { font-size:var(--ui-font-navigation); }
@media (max-width:560px) { .font-setting { align-items:stretch; flex-direction:column; } .font-setting select { width:100%; } }

.notice {
  margin:20px 0;
  border-left:2px solid #9f8c57;
  background:#9f8c570a;
  padding:13px 17px;
  font-size:12px;
  line-height:1.8
}

.boot {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:30px;
  text-align:center
}

.boot h1 {
  font-size:28px
}

.boot p {
  font-size:13px
}

.landing {
  height:100vh;
  min-height:720px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 60% 50%,#34432b44,transparent 55%),#111910
}

.landing-nav {
  display:flex;
  align-items:center;
  gap:37px;
  position:absolute;
  left:6%;
  top:30px;
  z-index:1
}

.landing-nav>span:last-child {
  font-size:8px;
  letter-spacing:2px;
  color:#7b8c6c;
  border-left:1px solid #465336;
  padding-left:30px
}

.landing-content {
  position:absolute;
  left:8%;
  top:27%;
  z-index:1
}

.landing-content h1 {
  font-size:64px;
  line-height:1.12;
  margin:24px 0;
  font-weight:400;
  letter-spacing:-1.8px;
  color:#e4e6d4
}

.landing-content h1 em {
  font-style:italic;
  color:#cdb87e
}

.landing-content>p {
  font-size:12px;
  line-height:2.1;
  color:#89997c
}

.landing-features {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:30px;
  color:#a5b391;
  font-size:11px
}

.landing-features>span {
  display:flex;
  align-items:center;
  gap:9px
}

.landing-features .icon {
  width:15px;
  height:15px;
  color:#c2af75
}

.landing-map {
  display:grid;
  grid-template-columns:repeat(5,140px);
  grid-template-rows:repeat(5,140px);
  gap:5px;
  position:absolute;
  top:40px;
  right:-55px;
  transform:rotate(-12deg);
  opacity:.21;
  mask-image:linear-gradient(90deg,transparent,black 30%);
  filter:saturate(.3)
}

.landing-map img {
  width:140px;
  height:140px;
  object-fit:cover
}

.landing-footer {
  position:absolute;
  bottom:30px;
  left:6%;
  right:6%;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:2px;
  color:#59694c
}

.landing-footer>span {
  font-size:9px;
  letter-spacing:0
}

.login-dialog {
  margin:auto 9% auto auto;
  width:390px;
  max-width:90vw;
  padding:30px;
  border:1px solid #64754765;
  border-radius:10px;
  background:linear-gradient(145deg,#232d21fa,#171f16fa);
  color:var(--text);
  box-shadow:0 25px 100px #0009;
  text-align:center
}

.login-dialog::backdrop {
  background:#0b100822;
  backdrop-filter:blur(.5px)
}

.login-emblem {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  margin:0 auto 17px;
  border:1px solid #c4b17a70;
  color:var(--gold);
  transform:rotate(45deg);
  border-radius:4px;
  background:#ada35b0d
}

.login-emblem .icon {
  transform:rotate(-45deg);
  width:27px;
  height:27px;
  stroke-width:1
}

.login-dialog .eyebrow {
  font-size:8px;
  letter-spacing:2px
}

.login-dialog h2 {
  font-size:29px;
  margin:12px 0 9px
}

.login-dialog>.muted {
  font-size:11px
}

.auth-tabs {
  display:flex;
  gap:0;
  border-bottom:1px solid #435035;
  margin:25px 0 20px
}

.auth-tabs button {
  flex:1;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:#8f9f7e;
  font-size:11px;
  padding:12px 5px
}

.auth-tabs button.active {
  border-bottom-color:var(--gold);
  color:var(--gold)
}

label {
  display:flex;
  flex-direction:column;
  gap:7px;
  text-align:left;
  font-size:10px;
  color:#a5b393;
  margin-bottom:16px
}

label input {
  font-size:11px;
  padding:11px 12px
}

label select {
  font-size:11px
}

.form-error {
  color:#d09986;
  font-size:11px;
  min-height:18px;
  line-height:1.7;
  text-align:left;
  margin-bottom:10px
}

.login-dialog .btn {
  height:40px;
  font-size:11px
}

.or {
  position:relative;
  margin:23px 0 20px;
  border-top:1px solid #3c482f;
  height:1px
}

.or span {
  background:#1c261a;
  font-size:9px;
  color:#7e8f6e;
  position:relative;
  top:-10px;
  padding:0 12px
}

.login-note {
  font-size:9px;
  line-height:1.9;
  margin-top:20px;
  color:#728265
}

.game-dialog {
  width:680px;
  max-width:92vw;
  max-height:87vh;
  background:#181f19;
  color:var(--text);
  border:1px solid #6b755050;
  border-radius:9px;
  padding:0;
  box-shadow:0 25px 100px #0009
}

.game-dialog::backdrop {
  background:#090e0bd9;
  backdrop-filter:blur(5px)
}

.modal-heading {
  padding:23px 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:3;
  background:#1d251d
}

.modal-heading .eyebrow {
  font-size:8px;
  letter-spacing:1.7px
}

.modal-heading h2 {
  font-size:25px;
  margin-top:6px
}

.modal-heading .icon-btn {
  border:0;
  color:var(--muted)
}

.modal-body {
  padding:23px 25px
}

.modal-intro {
  font-size:12px;
  line-height:1.9;
  margin-bottom:22px
}

.wallet {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:11px;
  color:#98aa86;
  background:#252f211f;
  margin-bottom:22px
}

.wallet strong {
  color:var(--gold);
  display:flex;
  gap:7px;
  align-items:center
}

.wallet .icon {
  width:16px;
  height:16px
}

.section-label {
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:1.6px;
  color:#899d76;
  margin:24px 0 12px
}

.trade-row {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 0;
  border-bottom:1px solid var(--border-soft)
}

.trade-row:last-child {
  border:0
}

.trade-row>div:first-child,.trade-row>strong:first-child {
  flex:1;
  min-width:0
}

.trade-row strong {
  font-size:12px
}

.trade-row p {
  font-size:10px;
  margin-top:5px;
  line-height:1.7
}

.trade-row .btn {
  font-size:10px;
  padding:7px 10px;
  flex-shrink:0
}

.bank-balances {
  display:flex;
  gap:20px;
  margin-bottom:20px
}

.bank-balances>div {
  flex:1;
  border:1px solid var(--border);
  background:#212a1e;
  padding:18px;
  border-radius:5px
}

.bank-balances span {
  font-size:10px;
  color:#9bab88;
  display:block
}

.bank-balances strong {
  display:block;
  font:23px var(--serif);
  color:var(--gold);
  margin-top:7px
}

.inline-form {
  display:flex;
  gap:10px;
  margin-bottom:25px
}

.inline-form input {
  width:100px
}

.inline-form .btn {
  flex:1
}

.recipe-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--border-soft)
}

.recipe-row:last-child {
  border:0
}

.recipe-icon {
  width:39px;
  height:39px;
  border-radius:5px;
  border:1px solid #5f744341;
  background:#60704314;
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--gold)
}

.recipe-row>div:nth-child(2) {
  flex:1
}

.recipe-row strong {
  font-size:13px
}

.recipe-row p {
  font-size:10px;
  margin:7px 0;
  line-height:1.8;
  color:#bb8878
}

.recipe-row .enough {
  color:#9baa85
}

.recipe-row small {
  font-size:9px;
  color:#7f936a
}

.recipe-row .btn {
  font-size:10px;
  padding:8px 10px
}

.game-dialog.cooking-dialog {
  --cook-accent:#e2b17b;
  --cook-muted:#b9aa93;
  --cook-border:#5b4b3877;
  --cook-list-height:clamp(360px,48vh,420px);
  width:990px;
  background:#27231e;
  border:1px solid #786143;
  border-radius:14px;
  color:#eee3ce;
  box-shadow:0 28px 100px #000a,0 1px 0 #e5bc761f inset
}
.cooking-dialog .modal-heading {
  padding:25px 28px;
  background:radial-gradient(ellipse at 0 0,#98613630,transparent 65%),#30281f;
  border-bottom:1px solid var(--cook-border)
}
.cooking-heading { display:flex; align-items:center; gap:18px; }
.cooking-emblem { width:58px; height:66px; display:grid; place-items:center; flex-shrink:0; border:1px solid #bc8b4f66; border-radius:15px 15px 24px 24px; background:linear-gradient(145deg,#9e643126,#deac6810); box-shadow:0 0 30px #b3692412; color:var(--cook-accent); }
.cooking-emblem .icon { width:31px; height:31px; }
.cooking-heading .eyebrow { color:#c69a68; font-size:10px; letter-spacing:2.6px; }
.cooking-dialog .modal-heading h2 { margin:2px 0 4px; font:400 32px/1.15 var(--serif); color:#f2e4c8; }
.cooking-heading p { color:var(--cook-muted); font-size:13px; }
.cooking-dialog .modal-heading .icon-btn { align-self:flex-start; border:1px solid #80654444; border-radius:50%; width:32px; height:32px; color:var(--cook-muted); }
.cooking-dialog .modal-heading .icon-btn:hover { background:#b0834822; color:#fff1d8; }
.cooking-dialog .modal-body { padding:24px 28px 22px; }
.cooking-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:24px; align-items:start; }
.cooking-recipes,.cooking-sidebar { min-width:0; }
.cooking-section-heading { height:45px; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.cooking-section-heading h3 { font:400 19px var(--serif); color:#e8d9bc; }
.cooking-section-heading h3 > span { display:inline-grid; place-items:center; min-width:21px; height:21px; margin-left:6px; padding:0 4px; border:1px solid var(--cook-border); border-radius:5px; font:12px var(--sans); color:var(--cook-muted); }
.cooking-section-heading p { font-size:11px; color:var(--cook-muted); }
.cooking-recipe-list { height:var(--cook-list-height); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#7a6548 transparent; padding-right:7px; }
.cooking-recipe { padding:17px 18px; margin-bottom:12px; background:linear-gradient(120deg,#3b3227,#302b23); border:1px solid #75604465; border-radius:9px; box-shadow:0 2px 8px #0001; }
.cooking-recipe:last-child { margin-bottom:0; }
.cooking-recipe-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cooking-recipe-title h3 { font:400 20px/1.25 var(--serif); color:#f0dfbd; overflow-wrap:anywhere; }
.cooking-heal { display:inline-flex; align-items:center; gap:4px; color:#bdc89b; white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; }
.cooking-heal .icon { width:13px; height:13px; }
.cooking-heal > span { font-size:10px; }
.cooking-ingredients { display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:14px 0; padding:0; }
.cooking-ingredient { display:flex; align-items:center; gap:12px; padding:5px 9px; background:#17171240; border:1px solid #7b775333; border-radius:4px; font-size:12px; color:#c3bba6; }
.cooking-ingredient > strong { color:#c0cca0; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cooking-ingredient > strong > span { font-weight:400; color:var(--cook-muted); }
.cooking-ingredient.missing { border-color:#ac705244; }
.cooking-ingredient.missing > strong { color:#e2a284; }
.cooking-recipe-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; border-top:1px solid var(--cook-border); }
.cooking-mastery { display:grid; gap:3px; min-width:0; }
.cooking-mastery > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--cook-muted); }
.cooking-mastery .mastery-stars { color:#74654e; font-size:15px; letter-spacing:1px; line-height:1; }
.cooking-mastery .mastery-stars > span { color:#e3b86c; }
.cooking-burn { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--cook-muted); }
.cooking-burn .icon { width:12px; height:12px; color:#c99361; }
.cooking-dialog .btn.cooking-prepare { flex-shrink:0; gap:7px; padding:10px 13px; border:1px solid #b98e55; border-radius:6px; background:linear-gradient(#b28b55,#9d7745); color:#1f1b14; font-size:13px; font-weight:650; box-shadow:0 1px 0 #f7d69a44 inset; }
.cooking-dialog .btn.cooking-prepare:not(:disabled):hover { background:linear-gradient(#caa269,#b99058); border-color:#dfb975; box-shadow:0 2px 10px #b78a4120; }
.cooking-dialog .cooking-prepare .icon { width:15px; height:15px; }
.cooking-tip { display:flex; align-items:flex-start; gap:7px; margin:13px 0 0; font-size:11px; line-height:1.6; color:var(--cook-muted); }
.cooking-tip .icon { width:13px; height:13px; flex-shrink:0; margin-top:2px; }
.cooking-skill { padding:0 0 19px; }
.cooking-skill > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; font-size:12px; color:var(--cook-muted); }
.cooking-skill strong { color:#eddbb8; font-weight:500; margin-left:6px; }
.cooking-skill small { font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cooking-skill .progress { height:4px; background:#5d4b334d; }
.cooking-skill .progress > span { background:linear-gradient(90deg,#9a7345,#d0ad72); }
.cooking-log { height:calc(var(--cook-list-height) - 4px); display:flex; flex-direction:column; overflow:hidden; background:#201e19; border:1px solid var(--cook-border); border-radius:9px; box-shadow:0 2px 12px #0001 inset; }
.cooking-log-heading { display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1px solid var(--cook-border); color:#d0b78f; flex-shrink:0; }
.cooking-log-heading .icon { width:15px; height:15px; color:#b5976b; }
.cooking-log-heading h3 { margin:0; font-size:12px; font-weight:500; letter-spacing:1.1px; text-transform:uppercase; }
.cooking-log-entries { flex:1; min-height:0; padding:8px 12px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-gutter:stable; scrollbar-color:#7a6548 transparent; }
.cooking-log-entry { display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; padding:10px 3px; border-bottom:1px solid #5d4c322b; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.cooking-log-entry:last-child { border-bottom:0; }
.cooking-log-symbol { padding-top:18px; color:#a8ba87; }
.cooking-log-symbol .icon { width:14px; height:14px; }
.cooking-log-entry time { color:#a09179; font-size:10px; font-variant-numeric:tabular-nums; }
.cooking-log-entry.success p { color:#c1c8ab; }
.cooking-log-entry.failed p,.cooking-log-entry.failed .cooking-log-symbol { color:#d2a18c; }
.cooking-log-entry.highlight { padding:10px 8px; margin:6px 0; border:1px solid #ba944b66; border-radius:5px; background:linear-gradient(100deg,#b99b5520,#b99b5508); }
.cooking-log-entry.highlight p,.cooking-log-entry.highlight .cooking-log-symbol { color:#efcf80; font-weight:600; }
.cooking-log-empty { height:100%; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 12px; color:var(--cook-muted); }
.cooking-log-empty > .icon { width:32px; height:32px; color:#9e794b; margin-bottom:17px; }
.cooking-log-empty strong { color:#cdbb9c; font:400 20px var(--serif); }
.cooking-log-empty p { max-width:215px; margin-top:9px; font-size:12px; line-height:1.75; }
.cooking-recipes-empty { padding:24px 18px; border:1px dashed var(--cook-border); border-radius:9px; font-size:13px; color:var(--cook-muted); }
.cooking-session-note { margin-top:13px; font-size:11px; color:var(--cook-muted); }
.cooking-dialog :is(.cooking-recipe-list,.cooking-log-entries):focus-visible { outline:1px solid #d0ad72; outline-offset:2px; }
@media (max-width:780px) {
  .cooking-dialog .modal-heading { padding:20px; }
  .cooking-dialog .modal-body { padding:20px; }
  .cooking-dialog .cooking-layout { grid-template-columns:1fr; gap:24px; }
  .cooking-dialog .cooking-recipe-list { height:auto; max-height:420px; }
  .cooking-dialog .cooking-log { height:300px; }
  .cooking-heading p { max-width:300px; }
}
@media (max-width:480px) {
  .cooking-heading { gap:12px; }
  .cooking-emblem { width:40px; height:50px; }
  .cooking-emblem .icon { width:24px; height:24px; }
  .cooking-dialog .modal-heading h2 { font-size:26px; }
  .cooking-heading p { font-size:12px; }
  .cooking-section-heading { height:auto; padding-bottom:14px; }
  .cooking-recipe { padding:14px; }
  .cooking-recipe-title { flex-wrap:wrap; gap:5px; }
  .cooking-recipe-title h3 { font-size:19px; }
  .cooking-recipe-footer { flex-wrap:wrap; }
}

.market-form {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:10px;
  padding:15px;
  background:#212a1b33;
  border:1px solid var(--border);
  border-radius:5px
}

.market-form label {
  margin:0
}

.market-form>.btn {
  grid-column:1 / -1
}

.map-dialog {
  width:1050px
}

.overview-scroll {
  overflow-x:auto;
  padding:2px
}

.overview-map {
  display:grid;
  gap:2px;
  background:#0d140e;
  padding:3px;
  min-width:600px
}

.overview-tile {
  aspect-ratio:1;
  background:#1b271b;
  position:relative;
  overflow:hidden
}

.overview-tile img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.4)
}

.overview-tile.walkable img {
  filter:brightness(.85)
}

.overview-tile b {
  position:absolute;
  inset:0;
  border:2px solid var(--gold);
  display:grid;
  place-items:center;
  text-shadow:0 0 3px #000;
  color:#fff3bd;
  background:#7e78483d;
  font-size:12px
}

.overview-tile i {
  position:absolute;
  width:5px;
  height:5px;
  bottom:3px;
  right:3px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 5px #000
}

.map-pois {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:20px
}

.map-pois>span {
  font-size:9px;
  color:#a4b391;
  display:flex;
  gap:5px;
  align-items:center
}

.map-pois .icon {
  width:11px;
  height:11px;
  color:var(--gold)
}

.map-pois b {
  font-size:8px;
  color:#6c805c;
  font-weight:400;
  margin-left:auto
}

#connection-banner {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;
  background:#6f562a;
  color:#fff0c7;
  text-align:center;
  padding:8px;
  font-size:12px
}

.arriving {
  animation:arrive .25s ease
}

@keyframes arrive {
  from {
    opacity:.7
  }
  to {
    opacity:1
  }
}


::-webkit-scrollbar {
  width:7px;
  height:7px
}

::-webkit-scrollbar-thumb {
  background:#405035;
  border-radius:5px
}

::-webkit-scrollbar-track {
  background:transparent
}

@media(min-width:1500px) {
  .map-stage {
    padding:27px 60px 48px
  }
  .tile-grid {
    max-width:470px
  }
  .map-legend {
    display:flex
  }
  .world-layout {
    grid-template-columns:minmax(0,1fr) 335px
  }
  .location-image {
    height:119px
  }
  .location-body {
    padding:18px 21px
  }
  .location-body>p {
    font-size:12px
  }
  .world-main,.world-aside {
    gap:22px
  }
  .panel-heading {
    padding:18px 20px
  }
  .skill-mini {
    padding:7px 0
  }
  .people-body {
    padding:17px 20px
  }
  .tracker-body {
    padding:20px
  }
}

@media(max-width:1200px) {
  .sidebar {
    width:184px
  }
  .main {
    margin-left:184px
  }
  .brand {
    margin-left:22px
  }
  .brand-word {
    font-size:32px
  }
  .brand-sub {
    font-size:6px
  }
  .sidebar nav {
    padding:0 8px
  }
  .nav-item {
    padding:11px 12px;
    gap:10px
  }
  .nav-item>span {
    font-size:11px
  }
  .content {
    padding:26px 24px 0
  }
  .topbar {
    padding:0 24px
  }
  .hud {
    gap:14px;
    padding:16px 15px
  }
  .hud-identity {
    min-width:137px;
    gap:9px;
    padding-right:12px
  }
  .hud-identity strong {
    font-size:14px;
    max-width:120px
  }
  .hud-identity>div>span {
    font-size:8px
  }
  .hud-bar {
    min-width:85px
  }
  .hud-stat {
    column-gap:3px
  }
  .hud-gold {
    min-width:90px;
    padding-left:12px;
    gap:7px
  }
  .hud-gold strong {
    font-size:18px
  }
  .world-layout {
    grid-template-columns:minmax(0,1fr) 273px;
    gap:17px
  }
  .map-stage {
    padding:20px 28px 40px
  }
  .map-north {
    left:8px;
    font-size:10px
  }
  .map-bottom>span {
    font-size:8px;
    max-width:70%
  }
  .map-bottom {
    padding:11px 12px
  }
  .world-main,.world-aside {
    gap:15px
  }
  .panel-heading {
    padding:14px
  }
  .location-body {
    padding:12px 15px
  }
  .location-title h2 {
    font-size:20px
  }
  .location-image {
    height:85px
  }
  .skill-cards {
    grid-template-columns:repeat(2,1fr)
  }
  .collection-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .landing-content h1 {
    font-size:56px
  }
  .login-dialog {
    margin-right:7%;
    width:360px
  }
  .character-numbers {
    gap:18px
  }
  .character-numbers strong {
    font-size:24px
  }
  .character-numbers span {
    font-size:9px
  }
  .inventory-toolbar {
    flex-wrap:wrap
  }
}

@media(max-width:1000px) {
  .sidebar {
    width:72px
  }
  .main {
    margin-left:72px
  }
  .brand {
    margin:26px 0;
    text-align:center
  }
  .brand-word {
    font-size:20px;
    letter-spacing:0
  }
  .brand-word>span {
    display:none
  }
  .brand-sub,.nav-label,.nav-item>span,.nav-badge,.journey-note,.server-status>span,.sidebar-divider {
    display:none
  }
  .sidebar nav {
    padding:0 10px
  }
  .nav-item {
    justify-content:center;
    padding:13px 10px
  }
  .nav-item .icon {
    width:21px;
    height:21px
  }
  .sidebar-bottom {
    padding:12px 10px 0
  }
  .server-status {
    padding:20px;
    justify-content:center
  }
  .world-layout {
    grid-template-columns:minmax(0,1fr) 275px
  }
  .hud-identity>div:last-child {
    display:none
  }
  .hud-identity {
    min-width:auto;
    padding-right:12px
  }
  .hud {
    gap:18px
  }
  .hud-bar {
    min-width:90px
  }
  .hud-gold {
    min-width:90px
  }
  .hud-stat {
    gap:4px
  }
  .content {
    padding:26px 23px 0
  }
  .world-time {
    display:none
  }
  .map-stage {
    padding:20px 27px 40px
  }
  .collection-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .landing-content {
    left:6%
  }
  .landing-content h1 {
    font-size:49px
  }
  .login-dialog {
    margin-right:5%;
    width:340px;
    padding:25px
  }
  .landing-content>p {
    font-size:11px
  }
  .character-overview {
    flex-wrap:wrap
  }
  .character-numbers {
    width:100%;
    justify-content:space-around;
    margin:0
  }
  .equipment-grid {
    grid-template-columns:1fr
  }
  .quest-cards {
    gap:16px
  }
  .quest-card {
    padding:20px
  }
  .quest-card h2 {
    font-size:21px
  }
}

@media(max-width:780px) {
  h1 {
    font-size:30px
  }
  .content {
    padding:23px 18px 0
  }
  .topbar {
    padding:0 18px;
    height:59px
  }
  .breadcrumb {
    font-size:9px
  }
  .breadcrumb span {
    margin:0 8px
  }
  .profile-chip {
    padding-left:12px
  }
  .profile-chip #profile-name {
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .world-layout {
    grid-template-columns:1fr
  }
  .world-aside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
  }
  .location-panel {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:130px 1fr
  }
  .location-image {
    height:100%;
    min-height:155px
  }
  .location-overline {
    font-size:7px;
    left:11px
  }
  .location-symbol {
    left:11px;
    bottom:12px
  }
  .location-body {
    padding:17px
  }
  .location-title {
    justify-content:flex-start;
    gap:14px
  }
  .field-actions {
    margin-top:12px
  }
  .location-body .btn {
    font-size:10px;
    padding:7px 10px
  }
  .people-panel {
    grid-column:1 / -1
  }
  .hud {
    gap:13px;
    flex-wrap:wrap;
    padding:15px
  }
  .hud-bar {
    flex:1
  }
  .hud-stat {
    min-width:45px
  }
  .hud-gold {
    min-width:88px
  }
  .hud-identity {
    border:0;
    padding-right:0
  }
  .map-stage {
    padding:22px 35px 42px
  }
  .tile-grid {
    max-width:445px
  }
  .map-north {
    left:13px
  }
  .map-bottom>span {
    font-size:9px
  }
  .heading-extra {
    display:none
  }
  .skill-cards,.quest-cards {
    grid-template-columns:1fr
  }
  .skill-card p {
    min-height:auto
  }
  .collection-intro {
    padding:20px;
    gap:15px
  }
  .collection-intro h2 {
    font-size:19px
  }
  .collection-intro>strong {
    font-size:20px
  }
  .collection-grid {
    grid-template-columns:repeat(3,1fr);
    gap:10px
  }
  .collection-card {
    padding:12px 9px;
    min-height:180px
  }
  .collection-card h3 {
    font-size:13px
  }
  .collection-card>span:last-child {
    font-size:7px
  }
  .landing-content {
    top:18%;
    left:7%
  }
  .landing-content h1 {
    font-size:40px
  }
  .landing-content>p,.landing-features {
    display:none
  }
  .login-dialog {
    width:330px;
    margin:auto 4% auto auto;
    padding:23px
  }
  .landing-content {
    max-width:220px
  }
  .landing-nav>span:last-child {
    display:none
  }
  .landing-map {
    right:-330px
  }
  .game-dialog {
    max-width:94vw
  }
  .map-pois {
    grid-template-columns:repeat(2,1fr)
  }
  .modal-heading {
    padding:20px
  }
  .modal-body {
    padding:20px
  }
  .journal-entry {
    font-size:10px
  }
  .footer {
    font-size:7px;
    gap:10px
  }
  .equipment-slot {
    font-size:10px
  }
  .trade-row {
    gap:8px
  }
  .trade-row strong {
    font-size:11px
  }
  .trade-row .btn {
    font-size:9px
  }
}

@media(max-width:560px) {
  .sidebar {
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:auto;
    height:62px;
    display:block;
    background:#151d15f7;
    backdrop-filter:blur(12px);
    border-top:1px solid #425435;
    border-right:0
  }
  .brand,.sidebar-bottom {
    display:none
  }
  .sidebar nav {
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:0 5px;
    height:100%
  }
  .nav-item {
    padding:9px 6px;
    width:auto;
    flex:1;
    margin:0;
    flex-direction:column;
    gap:3px;
    border:0;
    border-radius:0
  }
  .nav-item>span:not(.nav-badge) {
    display:block;
    font-size:7px
  }
  .nav-item .icon {
    width:18px;
    height:18px
  }
  .nav-item.active {
    box-shadow:none;
    background:none;
    color:var(--gold)
  }
  .nav-item[data-page=collection],.nav-item[data-page=skills] {
    display:none
  }
  .main {
    margin-left:0;
    padding-bottom:62px
  }
  .topbar {
    height:53px;
    padding:0 15px
  }
  .breadcrumb {
    font-size:9px
  }
  .breadcrumb>strong {
    font-weight:500
  }
  .profile-chip {
    font-size:9px;
    border:0
  }
  .profile-chip .avatar-small {
    width:25px;
    height:25px;
    font-size:12px
  }
  .content {
    padding:22px 13px 0
  }
  .page-heading {
    margin-bottom:18px
  }
  .page-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:8px
  }
  h1 {
    font-size:28px;
    letter-spacing:-.4px
  }
  .page-heading p {
    font-size:10px;
    margin-top:8px
  }
  .hud {
    padding:12px;
    gap:13px 12px;
    margin-bottom:17px;
    display:grid;
    grid-template-columns:36px 1fr 1fr
  }
  .hud-identity {
    grid-row:1 / 3;
    padding-right:0
  }
  .level-medallion {
    width:32px;
    height:39px;
    font-size:21px
  }
  .hud-bar {
    max-width:none;
    min-width:0
  }
  .hud-bar>div:first-child {
    font-size:8px;
    margin-bottom:7px
  }
  .hud-bar strong,.hud-bar small {
    font-size:8px
  }
  .hud-bar .icon {
    height:10px;
    width:10px
  }
  .hud-stat {
    display:flex;
    gap:5px;
    justify-content:flex-start;
    min-width:0
  }
  .hud-stat strong {
    font-size:12px
  }
  .hud-stat>span {
    font-size:8px;
    margin:0
  }
  .hud-stat .icon {
    width:12px;
    height:12px
  }
  .hud-gold {
    position:absolute;
    right:29px;
    margin-top:53px;
    border:0;
    padding:0;
    min-width:0;
    gap:5px
  }
  .hud-gold span {
    display:none
  }
  .hud-gold strong {
    font-family:var(--sans);
    font-size:12px
  }
  .hud-gold>.icon {
    width:13px;
    height:13px
  }
  .hud-stat:nth-last-child(2) {
    padding-right:65px
  }
  .map-stage {
    padding:20px 26px 39px
  }
  .map-north {
    left:7px;
    top:14px;
    font-size:8px
  }
  .map-north span {
    font-size:20px
  }
  .tile-grid {
    gap:2px;
    padding:2px
  }
  .panel-heading {
    min-height:47px;
    padding:12px 14px
  }
  .panel-heading h2 {
    font-size:14px
  }
  .panel-heading>.subtle {
    font-size:9px
  }
  .coordinates {
    font-size:9px
  }
  .map-bottom {
    padding:11px;
    gap:10px
  }
  .map-bottom>span {
    font-size:8px;
    line-height:1.7
  }
  .map-bottom>span>.icon {
    display:none
  }
  .map-bottom>.text-btn {
    font-size:9px
  }
  .world-main,.world-aside {
    gap:13px
  }
  .world-aside {
    grid-template-columns:1fr
  }
  .tracker-panel,.professions-panel,.people-panel {
    grid-column:auto
  }
  .location-panel {
    grid-template-columns:90px 1fr
  }
  .location-overline {
    font-size:6px;
    letter-spacing:1px;
    left:8px
  }
  .location-body {
    padding:13px
  }
  .location-title {
    gap:7px;
    flex-wrap:wrap
  }
  .location-title h2 {
    font-size:22px
  }
  .location-body>p {
    font-size:10px
  }
  .action-status {
    font-size:7px
  }
  .peaceful p {
    font-size:9px
  }
  .quickslots {
    gap:6px
  }
  .quickslot {
    min-height:46px
  }
  .quick-plus {
    line-height:34px
  }
  .enemy {
    gap:10px
  }
  .enemy-info>strong {
    font-size:14px
  }
  .enemy-stats {
    gap:9px
  }
  .attack-btn {
    padding:8px 10px;
    font-size:10px
  }
  .journal {
    margin-top:15px
  }
  .journal-tabs {
    padding:0 13px
  }
  .journal-tabs>button {
    padding:12px 0;
    font-size:10px
  }
  .journal-entries {
    padding:9px 13px;
    height:130px
  }
  .journal-entry {
    gap:10px;
    font-size:10px
  }
  .footer {
    padding:18px 0;
    flex-wrap:wrap;
    row-gap:7px
  }
  .item-row {
    padding:15px 13px;
    gap:10px
  }
  .item-symbol {
    width:31px;
    height:31px
  }
  .item-symbol>.icon {
    width:17px
  }
  .item-description strong {
    font-size:11px
  }
  .item-description p {
    font-size:9px
  }
  .item-actions .btn {
    font-size:9px;
    padding:6px 7px
  }
  .item-value {
    font-size:10px
  }
  .inventory-toolbar {
    padding:13px;
    gap:13px
  }
  .filter-tabs button {
    font-size:9px;
    padding:5px 7px
  }
  #inventory-search {
    max-width:none;
    width:100%
  }
  .collection-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .collection-intro {
    flex-wrap:wrap;
    gap:10px
  }
  .collection-intro>div {
    flex:1
  }
  .collection-intro>strong {
    width:100%;
    text-align:right
  }
  .character-overview {
    padding:20px;
    gap:15px
  }
  .character-overview h2 {
    font-size:22px
  }
  .character-seal {
    width:50px;
    height:64px
  }
  .character-seal .icon {
    width:50px;
    height:64px
  }
  .character-seal>span {
    top:18px;
    font-size:21px
  }
  .character-numbers {
    gap:13px
  }
  .character-numbers span {
    font-size:8px
  }
  .character-numbers strong {
    font-size:24px
  }
  .equipment-slot {
    padding:13px;
    font-size:9px
  }
  .equipment-slot>span {
    min-width:68px;
    font-size:9px
  }
  .equipment-slot .text-btn {
    font-size:9px
  }
  .quest-card {
    padding:21px
  }
  .quest-card h2 {
    font-size:23px
  }
  .quest-card>p {
    font-size:11px
  }
  .settings-panel {
    padding:22px
  }
  .settings-row {
    font-size:11px
  }
  .settings-row strong {
    overflow-wrap:anywhere;
    text-align:right
  }
  .ranking-panel .panel-heading {
    flex-wrap:wrap
  }
  th,td {
    padding:14px 12px;
    font-size:10px
  }
  th {
    font-size:8px
  }
  .rank-number {
    width:20px
  }
  .landing {
    min-height:760px
  }
  .landing-nav {
    top:22px;
    left:22px
  }
  .landing-nav .brand-word {
    font-size:29px;
    letter-spacing:4px
  }
  .landing-content {
    display:none
  }
  .landing-footer {
    font-size:6px;
    left:22px;
    right:22px;
    bottom:20px
  }
  .landing-footer>span {
    font-size:7px
  }
  .landing-map {
    top:80px;
    right:-200px;
    opacity:.15
  }
  .login-dialog {
    margin:auto;
    width:calc(100% - 36px);
    max-width:365px;
    padding:27px 25px
  }
  .login-dialog h2 {
    font-size:29px
  }
  .login-dialog::backdrop {
    background:#0a140b22
  }
  .game-dialog {
    max-width:calc(100vw - 20px);
    max-height:90vh
  }
  .modal-heading {
    padding:17px
  }
  .modal-heading h2 {
    font-size:23px
  }
  .modal-body {
    padding:17px
  }
  .recipe-row {
    gap:10px
  }
  .recipe-icon {
    display:none
  }
  .recipe-row strong {
    font-size:12px
  }
  .recipe-row p {
    font-size:9px
  }
  .recipe-row .btn {
    font-size:9px;
    padding:7px 9px
  }
  .bank-balances {
    gap:10px
  }
  .bank-balances>div {
    padding:13px
  }
  .bank-balances strong {
    font-size:19px
  }
  .inline-form {
    gap:7px
  }
  .inline-form input {
    width:78px;
    padding:8px
  }
  .inline-form .btn {
    font-size:10px;
    padding:8px
  }
  .market-form {
    grid-template-columns:1fr 1fr
  }
  .market-form>label:first-child {
    grid-column:1 / -1
  }
  .map-pois {
    grid-template-columns:1fr
  }
  .trade-row {
    flex-wrap:wrap
  }
  .trade-row>div:first-child {
    min-width:50%
  }
  .trade-row>.btn {
    margin-left:auto
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}



/* Game screen: a quiet frame around the world, with one persistent status bar. */
:root {
  --bg:#0b1116;
  --sidebar:#10171e;
  --panel:#141e26;
  --panel-soft:#1a2731;
  --border:#2b3b46;
  --border-soft:#21303b;
  --text:#e8f0f3;
  --muted:#a1b2bf;
  --dim:#788e9f;
  --gold:#e1be7f;
  --green:#69cbb7;
  --red:#ef8d8a;
  --accent:#79dcc5;
}
body { background:radial-gradient(ellipse at 45% 0%,#142731 0,transparent 62%),var(--bg); }
h2,h3 { font-family:var(--sans); font-weight:600; }
button,input,select { border-radius:8px; }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input,select { background:#0f1921; border-color:var(--border); }
input::placeholder { color:#8295a4; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #79dcc518; }
.panel { border-radius:12px; background:var(--panel); border-color:var(--border); box-shadow:0 8px 28px #00000012; }
.panel-heading { background:#ffffff02; }
.panel-heading h2 { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.1px; }
.panel-heading > div > .icon { color:var(--muted); }
.btn { background:#1d303b; color:var(--text); border-color:#3b5261; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#102b26; box-shadow:0 2px 6px #0002; }
.btn.primary:not(:disabled):hover { background:#a0efdc; box-shadow:0 3px 12px #79dcc51a; }
.btn.secondary { background:#1d2b35; border-color:#354a58; color:#cfdae2; }
.btn:not(:disabled):hover { background:#2a404c; border-color:#557382; }
.text-btn { color:#b1c6d2; }
.text-btn:hover { color:var(--accent); }
.icon-btn:hover { background:#29413f; color:var(--accent); }
.progress { background:#0a141c; border:0; height:4px; }
.progress > span { background:var(--accent); }
.progress.hp > span { background:linear-gradient(90deg,#d97177,#f3a399); }
.progress.xp > span { background:linear-gradient(90deg,#56b59f,#92e3c8); }
.count-pill { border:0; background:#ffffff0b; color:#bbd0dc; border-radius:5px; padding:1px 6px; }
.brand-sub,.journey-note,.nav-label,.sidebar-divider,.footer { display:none; }
.sidebar { background:var(--sidebar); border-color:var(--border-soft); }
.nav-item { color:#9eafbc; }
.nav-item .icon { color:inherit; }
.nav-item.active { background:#79dcc512; border-color:#79dcc528; color:var(--accent); box-shadow:none; }
.nav-item.active .icon { color:var(--accent); }
.nav-item:hover { background:#ffffff08; color:var(--text); }
.nav-badge { background:#79dcc51a; border-color:#79dcc533; color:var(--accent); }
.server-status i,.online-dot,.chat-live i { background:var(--accent); box-shadow:0 0 8px #79dcc533; }
.server-status { border-color:var(--border-soft); }

/* Character, vitals, combat and professions share the same surface. */
.hud {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  align-items:center; gap:16px; padding:16px; margin:0 0 14px;
  height:auto; min-height:0; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(120deg,#1c2b35,#141f28 72%); box-shadow:0 8px 30px #0002;
}
.hud-identity {
  grid-row:auto; display:flex; gap:10px; padding:0; min-width:0; border:0; background:none;
  text-align:left; color:var(--text); border-radius:8px;
}
.hud-identity:hover { color:var(--accent); }
.hud-identity .level-medallion {
  width:42px; height:48px; background:#79dcc50b; border:1px solid #79dcc538;
  border-radius:10px; clip-path:none; color:var(--accent); font:600 23px var(--sans);
}
.level-medallion > span { font-size:8px; color:#9bc4bc; letter-spacing:1px; }
.hud-identity .hud-name { display:block; min-width:0; }
.hud-identity strong { font-family:var(--sans); font-size:13px; font-weight:600; max-width:none; white-space:nowrap; }
.hud-name > span { display:flex; align-items:center; gap:2px; margin-top:4px; color:var(--muted); font-size:10px; }
.hud-name .icon { width:12px; height:12px; }
.hud-vitals { display:grid; gap:10px; min-width:0; }
.hud .hud-bar { min-width:0; max-width:none; }
.hud .hud-bar > div:first-child { margin-bottom:5px; font-size:10px; color:#bac9d2; }
.hud-bar strong { font-size:11px; color:var(--text); font-variant-numeric:tabular-nums; }
.hud-bar small { color:#8d9fac; font-size:10px; }
.hud-bar .icon { height:12px; width:12px; }
.hud-bar:has(.hp) .icon { color:var(--red); }
.hud-bar:has(.xp) .icon { color:var(--accent); }
.hud-resources { display:flex; gap:14px; grid-column:1 / -1; align-items:center; }
.hud .hud-stat { display:flex; min-width:0; gap:5px; padding:0; }
.hud-stat > .icon { width:14px; height:14px; color:#9eb3c2; }
.hud .hud-stat strong { font:600 12px var(--sans); }
.hud .hud-stat > span { font-size:9px; color:var(--muted); margin:0; }
.hud .hud-gold { position:static; margin:0 0 0 auto; min-width:0; padding:0; border:0; gap:5px; }
.hud-gold > .icon { width:16px; height:16px; color:var(--gold); }
.hud .hud-gold strong { font:600 14px var(--sans); color:var(--gold); }
.hud .hud-gold > span { display:block; color:var(--muted); font-size:10px; }
.hud-professions { grid-column:1 / -1; min-width:0; padding-top:10px; border-top:1px solid var(--border); }
.hud-professions-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.hud-professions-heading > span { font-size:8px; letter-spacing:1.5px; color:var(--muted); font-weight:600; }
.hud-professions-heading .text-btn { font-size:9px; }
.hud-skill-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.hud-skill { display:flex; flex-direction:column; padding:0 5px; gap:3px; min-width:0; text-align:left; background:none; border:0; border-radius:5px; }
.hud-skill:hover { background:#79dcc510; }
.hud-skill-level { display:flex; align-items:center; gap:6px; }
.hud-skill-level .icon { width:15px; height:15px; color:#85bcaf; }
.hud-skill-level strong { font-size:12px; }
.hud-skill-name { font-size:10px; color:#b6c5d0; white-space:nowrap; }
.hud-skill-xp { color:#aaa988; font-size:var(--ui-font-hud); line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hud-skill .progress { width:100%; height:3px; margin-top:2px; }

/* Four adjoining areas inside one frame. */
.scene-layout { display:contents; }
.gameplay-frame > .journal { grid-column:1 / -1; margin:0; }
.gameplay-frame { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.7fr); grid-template-areas:"map field" "enemies people"; }
.gameplay-frame > .scene-layout > section { min-width:0; min-height:0; }
.gameplay-frame > .scene-layout > .map-panel { grid-area:map; }
.gameplay-frame > .scene-layout > .location-panel { grid-area:field; border-left:1px solid var(--border); }
.gameplay-frame > .scene-layout > .enemies-panel { grid-area:enemies; border-top:1px solid var(--border); }
.gameplay-frame > .scene-layout > .people-panel { grid-area:people; border-left:1px solid var(--border); border-top:1px solid var(--border); }
.map-stage { background:radial-gradient(ellipse at center,#27443955,transparent 70%),#0d181e; }
.tile-grid { border-color:#61736a; border-radius:8px; background:#071017; padding:4px; box-shadow:0 14px 40px #0005; }
.tile { border-radius:3px; }
.tile img { filter:brightness(.98) saturate(.94); }
.tile.adjacent:not(:disabled):hover { border-color:#d2ffe8; box-shadow:0 0 15px #79dcc540; }
.map-north { color:#86a99a; }
.map-location { color:#acc6be; font-family:var(--sans); font-size:11px; }
.map-location .icon { color:var(--accent); }
.map-bottom { background:#14212a; border-color:var(--border-soft); }
.map-bottom > span { color:#9aafbd; }
.coordinates { letter-spacing:.5px; font-variant-numeric:tabular-nums; color:#a7c5ce; background:#ffffff05; border:1px solid var(--border-soft); border-radius:5px; padding:2px 7px; }
.coordinates > span { color:var(--dim); }
.cooldown-track { background:#101c24; }
.cooldown-track > span { background:var(--accent); }
.location-image:after { background:linear-gradient(0deg,var(--panel),#0a111940 80%); }
.location-overline { color:#e7f3ed; font-size:9px; font-weight:600; letter-spacing:1.6px; }
.location-symbol { background:#101f23c9; border-color:#92c5b755; color:var(--accent); }
.location-title { align-items:center; flex-wrap:wrap; gap:8px; }
.location-title h2 { font-family:var(--serif); font-size:29px; line-height:1.15; color:#eef2e8; }
.location-body > p { color:#b1c1ca; font-size:12px; line-height:1.65; }
.area-badge { border-color:#79dcc52b; background:#79dcc50c; color:#99d8c8; border-radius:5px; }
.area-badge.danger { color:#e9a8a2; background:#ef8d8a0a; border-color:#ef8d8a33; }
.field-actions { gap:8px; }
.field-actions .btn { padding:9px 11px; font-size:12px; white-space:normal; }
.button-caption { color:#bac5c6; }
.action-status { color:#8fa8b7; font-size:10px; }
.status-dot { background:var(--accent); }
.enemy-info > strong { font-family:var(--sans); font-size:13px; }
.enemy-stats { gap:10px; }
.enemy-stats span { color:#9fb2bf; font-size:10px; }
.enemy-hp { background:#0c1820; }
.enemy-hp > span { background:var(--red); }
.attack-btn { background:#ed92921a; border-color:#ed929245; color:#ffc0b9; }
.attack-btn:not(:disabled):hover { background:#ed92922b; border-color:#ed929285; color:#ffded8; }
.peaceful { justify-content:flex-start; }
.peaceful strong { color:#c8d6d5; font-family:var(--sans); font-size:13px; }
.peaceful > .icon { color:#71ab95; }
.people-body > .small { font-size:11px; line-height:1.6; }
.person > div { min-width:0; }
.person strong { overflow-wrap:anywhere; }
.avatar-small { background:#243f40; border-color:#3b6461; color:#a9ead5; }
.people-panel > .party { margin:0 14px 12px; flex-shrink:0; }
.party { border-color:var(--border); }
.party p { color:#9fafbd; overflow-wrap:anywhere; }

/* Inventory stays narrow; quick slots remain reachable at its foot. */
.world-storage { min-width:0; display:flex; flex-direction:column; gap:12px; }
.pack-panel { display:flex; flex-direction:column; }
#pack-search { margin:12px 12px 0; padding:8px 9px; font-size:11px; }
.pack-list { padding:6px 12px; max-height:300px; overflow:auto; scrollbar-width:thin; }
.pack-item { display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.pack-item:last-child { border-bottom:0; }
.pack-list > .pack-item-clipped { visibility:hidden; }
.pack-item > div { flex:1; min-width:0; }
.pack-item strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.pack-item span { color:var(--muted); font-size:10px; }
.pack-use { padding:5px 7px; font-size:10px; }
.pack-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:30px 8px; color:var(--dim); }
.pack-empty > .icon { width:30px; height:30px; }
.pack-empty p { font-size:12px; }
.quick-panel { padding:12px; }
.quick-label { color:#9eb3c3; font-size:9px; letter-spacing:1px; margin-bottom:10px; }
.quick-label > span { font-size:8px; color:var(--dim); }
.quickslots { gap:6px; }
.quickslot { background:#0e1a23; border-color:#3b505e; color:#8299a9; border-radius:6px; }
.quickslot:hover { background:#1c3934; border-color:var(--accent); color:var(--accent); }
.quickslot kbd { color:#b1c6ce; }
.quickslot.filled { background:#1b302c; border-color:#49746a; }
.quickslot.filled > span { color:#c7e4da; }

.world-layout > .journal { grid-column:1 / -1; margin:0; }
.journal { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.activity-pane,.chat-pane { min-width:0; min-height:0; display:flex; flex-direction:column; }
.chat-pane { border-left:1px solid var(--border); }
.journal .journal-entries { height:130px; padding:8px 12px; scrollbar-width:thin; overscroll-behavior:contain; }
.journal-entry { font-size:11px; padding:3px 0; gap:9px; color:#b8c7d0; }
.journal-entry time { color:#8195a5; font-size:10px; }
.journal-entry.reward,.journal-entry.quest { color:#d2c18e; }
.journal-empty { color:#8ea4b5; font-size:11px; padding:5px 0; }
.chat-live { display:flex; align-items:center; gap:6px; color:#9ac7bc; font-size:10px; }
.chat-live i { width:5px; height:5px; border-radius:50%; }
.chat-form { flex-shrink:0; background:#111e27; border-color:var(--border-soft); padding:8px; gap:6px; }
.chat-form input,.chat-form select { font-size:11px; padding:7px 8px; }
.chat-form select { max-width:90px; }
.chat-form .icon-btn { width:32px; border-color:#79dcc533; color:var(--accent); background:#79dcc50b; }
.game-dialog { background:var(--panel); border-radius:14px; border-color:var(--border); }
.modal-header { background:#111e27; border-color:var(--border); }

@media (min-width:561px) {
  .sidebar { width:84px; }
  .brand { display:block; margin:24px 0 22px; text-align:center; }
  .brand-word { font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:1px; color:#e5f2f0; }
  .brand-word > span { display:inline; font-size:10px; top:-5px; color:var(--accent); margin-left:1px; }
  .sidebar nav { padding:0 7px; }
  .sidebar .nav-item { display:flex; flex-direction:column; justify-content:center; gap:5px; padding:9px 3px; margin-bottom:5px; border-radius:9px; position:relative; }
  .sidebar .nav-item > span:not(.nav-badge) { display:block; font-size:9px; line-height:1.2; }
  .sidebar .nav-item .icon { width:19px; height:19px; }
  .sidebar .nav-badge { position:absolute; right:4px; top:3px; font-size:8px; padding:0 3px; display:block; }
  .sidebar .nav-badge:empty { display:none; }
  .sidebar-bottom { display:block; padding:8px 7px 0; }
  .server-status { justify-content:center; padding:13px 0; margin:5px 0 0; gap:5px; }
  .server-status > span { display:none; }
  .server-status > #online-count { display:block; font-size:8px; margin:0; color:#93a9b7; }
  .main { margin-left:84px; }
  .content { max-width:none; padding:16px; }
}

@media (min-width:1024px) {
  body:has(.sidebar) { height:100dvh; overflow:hidden; }
  #app:has(.sidebar) { height:100dvh; }
  .main { height:100dvh; display:flex; flex-direction:column; padding-bottom:0; }
  .content { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; width:100%; }
  .page-heading { margin:0; flex-shrink:0; }
  .page-heading .eyebrow,.page-heading p { display:none; }
  .page-heading h1 { font-size:26px; }
  .hud { grid-template-columns:minmax(130px,.85fr) minmax(165px,1.2fr) 116px minmax(295px,1.75fr); flex-shrink:0; gap:18px; height:94px; margin:0; padding:12px 16px; }
  .hud-resources { grid-column:auto; display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; padding-left:12px; border-left:1px solid var(--border); }
  .hud .hud-stat { flex-wrap:wrap; gap:2px 5px; }
  .hud .hud-stat > span { width:100%; }
  .hud .hud-gold { grid-column:1 / -1; margin:0; }
  .hud-professions { grid-column:auto; padding:0 0 0 18px; border-top:0; border-left:1px solid var(--border); }
  #page-content { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; }
  #app[data-page="world"] #page-content { overflow:visible; }
  .world-layout { height:100%; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(200px,16vw,240px); grid-template-rows:minmax(0,1fr) clamp(116px,17dvh,160px); grid-template-areas:"gameplay storage" "journal storage"; gap:12px; }
  .world-main,.world-storage { min-width:0; min-height:0; display:flex; flex-direction:column; gap:12px; }
  .world-main { grid-area:gameplay; }
  .world-storage { grid-area:storage; }
  .world-layout > .journal { grid-area:journal; }
  .gameplay-frame { flex:1; min-height:0; grid-template-columns:minmax(0,1fr) clamp(285px,26vw,370px); grid-template-rows:minmax(0,1fr) clamp(144px,20dvh,180px); }
  .world-layout .panel-heading { min-height:38px; height:38px; padding:8px 14px; flex-shrink:0; }
  .world-layout .panel-heading > div { gap:8px; }
  .world-layout .panel-heading .icon { height:15px; width:15px; }
  .map-panel { min-height:0; display:grid; grid-template-rows:38px minmax(0,1fr) 30px 2px; }
  .map-stage { min-height:0; padding:0; container-type:size; }
  .tile-grid { width:min(calc(100cqw - 38px),calc(100cqh - 28px)); max-width:none; grid-template-rows:repeat(5,minmax(0,1fr)); transform:translateY(-7px); gap:3px; }
  .map-north { left:12px; top:12px; font-size:9px; }
  .map-north span { font-size:21px; }
  .map-location { bottom:6px; font-size:10px; }
  .map-bottom { padding:5px 12px; }
  .map-bottom > span { font-size:9px; }
  .map-bottom .text-btn { font-size:10px; }
  .location-panel { display:flex; flex-direction:column; }
  .location-image { height:clamp(60px,11dvh,110px); min-height:60px; flex-shrink:0; }
  .location-overline { left:16px; top:15px; }
  .location-symbol { width:30px; height:30px; left:auto; right:16px; bottom:10px; border-radius:8px; }
  .location-symbol .icon { width:16px; height:16px; }
  .location-body { padding:4px 16px 14px; min-height:0; overflow:auto; scrollbar-width:thin; }
  .location-title { margin-bottom:9px; }
  .field-actions { margin-top:14px; }
  .action-status { margin-top:12px; }
  .enemies-panel,.people-panel { display:flex; flex-direction:column; }
  .enemy-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); align-content:start; gap:8px; padding:10px 12px; min-height:0; overflow:auto; scrollbar-width:thin; }
  .enemy { padding:8px 10px; gap:8px; border:1px solid #ef8d8a20; border-radius:8px; background:#ef8d8a05; }
  .enemy:last-child { border-bottom:1px solid #ef8d8a20; }
  .enemy-stats { gap:7px; margin:4px 0 6px; }
  .enemy-info > strong { font-size:12px; line-height:1.3; }
  .enemy-stats span { font-size:9px; }
  .attack-btn { font-size:10px; padding:7px 8px; }
  .attack-btn > .icon { display:none; }
  .peaceful { flex:1; min-height:0; padding:16px; }
  .peaceful p { font-size:11px; }
  .people-body { flex:1; min-height:0; overflow:auto; padding:10px 14px; scrollbar-width:thin; }
  .person { padding:3px 0; }
  .person .avatar-small { height:26px; width:26px; font-size:13px; }
  .party { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; padding-top:7px; }
  .party > strong,.party > p { grid-column:1; }
  .party > [data-action="partyLeave"] { grid-column:2; grid-row:1 / span 2; align-self:center; max-width:70px; white-space:normal; text-align:right; font-size:10px; }
  .party p { margin:3px 0; font-size:10px; }
  .party-invite { display:flex; flex-wrap:wrap; }
  .party-invite > p { width:100%; }
  .pack-panel { flex:1; min-height:100px; }
  .pack-list { flex:1; min-height:0; max-height:none; }
  #pack-search { flex-shrink:0; }
  .pack-item { padding:10px 0; }
  .pack-item strong { font-size:11px; }
  .quick-panel { flex-shrink:0; padding:12px 10px; }
  .quickslot { min-height:42px; height:42px; }
  .quick-plus { font-size:20px; line-height:30px; }
  .quickslot.filled { padding:12px 2px 6px; }
  .quickslot.filled > span { font-size:8px; line-height:1.2; }
  .journal { min-height:0; }
  .journal .journal-entries { flex:1; min-height:0; height:auto; padding:5px 12px; }
  .journal-entry { font-size:10px; padding:2px 0; line-height:1.5; }
  .journal-entry time { font-size:9px; }
  .chat-form { padding:6px 8px; }
  .chat-form input,.chat-form select { font-size:10px; padding:5px 7px; }
  .chat-form .icon-btn { width:28px; }
  .map-dialog { max-height:94dvh; }
}

@media (min-width:1024px) and (max-width:1199px) {
  .content { padding:12px; gap:10px; }
  .hud { grid-template-columns:minmax(115px,.8fr) minmax(155px,1fr) 100px minmax(285px,1.7fr); gap:12px; padding:12px; }
  .hud-identity { gap:8px; }
  .hud-identity .level-medallion { width:34px; height:42px; font-size:21px; }
  .hud-identity strong { font-size:11px; }
  .hud-name > span { font-size:9px; }
  .hud-professions { padding-left:12px; }
  .hud-skill-list { gap:4px; }
  .hud-skill { padding:0 2px; }
  .gameplay-frame { grid-template-columns:minmax(0,1fr) 270px; }
  .world-layout { grid-template-columns:minmax(0,1fr) 200px; gap:10px; }
  .location-title h2 { font-size:25px; }
  .enemy-list { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); padding:8px; }
  .enemy { padding:8px; }
  .enemy-stats { flex-wrap:wrap; }
}
@media (min-width:1024px) and (max-height:740px) {
  .content { padding-top:10px; padding-bottom:10px; gap:10px; }
  .hud { height:88px; padding-top:9px; padding-bottom:9px; }
  .world-layout { grid-template-rows:minmax(0,1fr) 106px; gap:10px; }
  .gameplay-frame { grid-template-rows:minmax(0,1fr) 140px; }
  .location-image { height:55px; min-height:55px; }
  .location-overline { top:12px; }
  .location-body { padding:2px 12px 10px; }
  .location-title h2 { font-size:24px; }
  .location-body > p { font-size:11px; }
  .location-title { margin-bottom:7px; }
  .field-actions { margin-top:10px; gap:6px; }
  .field-actions .btn { padding:7px 9px; font-size:11px; }
  .action-status { margin-top:9px; font-size:9px; }
  .world-layout .journal .panel-heading { height:30px; min-height:30px; padding:5px 12px; }
  .enemy-list { padding-top:7px; padding-bottom:7px; gap:6px; }
  .enemy { padding:6px 8px; }
  .enemy-info > strong { font-size:11px; }
  .enemy-stats { margin:3px 0 5px; }
  .sidebar .nav-item { padding-top:7px; padding-bottom:7px; }
  .brand { margin-top:19px; margin-bottom:17px; }
}
@media (min-width:1024px) {
  .gameplay-frame:has(.enemy:nth-child(3)) { grid-template-rows:minmax(0,1fr) 180px; }
  .enemy-list:has(.enemy:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .enemy-list:has(.enemy:nth-child(3)) .enemy { display:flex; flex-direction:column; align-items:stretch; gap:7px; }
  .enemy-list:has(.enemy:nth-child(3)) .enemy-stats { flex-wrap:wrap; }
  .enemy-list:has(.enemy:nth-child(3)) .attack-btn { padding:5px 7px; }
}
@media (min-width:781px) and (max-width:1023px) {
  .world-layout { grid-template-columns:minmax(0,1fr) 210px; gap:12px; }
  .world-main { grid-column:1 / -1; }
  .world-storage { grid-column:2; grid-row:2; }
  .world-layout > .journal { grid-column:1; grid-row:2; grid-template-columns:1fr; }
  .journal .chat-pane { border-left:0; border-top:1px solid var(--border); }
  .hud { grid-template-columns:minmax(130px,1fr) minmax(180px,1.5fr) auto; }
  .hud-resources { grid-column:auto; flex-direction:column; align-items:flex-start; gap:6px; }
  .hud .hud-gold { margin:0; }
  .hud-professions { grid-column:1 / -1; }
  .map-stage { padding:20px 22px 40px; }
  .location-title h2 { font-size:25px; }
}
@media (max-width:780px) {
  .world-layout { display:flex; flex-direction:column; gap:14px; }
  .gameplay-frame { grid-template-columns:minmax(0,1fr); grid-template-areas:"map" "enemies" "field" "people"; }
  .gameplay-frame > .scene-layout > .location-panel,.gameplay-frame > .scene-layout > .people-panel { border-left:0; border-top:1px solid var(--border); }
  .world-storage { gap:14px; }
  .world-layout .pack-panel { display:none; }
  .journal { grid-template-columns:1fr; }
  .chat-pane { border-left:0; border-top:1px solid var(--border); }
  .chat-form { flex-wrap:wrap; }
  .chat-form input { min-width:90px; }
}
@media (max-width:560px) {
  .content { padding:12px 12px 0; }
  .hud { padding:12px; gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .hud-identity strong { font-size:11px; }
  .hud-identity .level-medallion { width:32px; height:40px; font-size:20px; }
  .hud-name > span { font-size:8px; }
  .hud .hud-bar > div:first-child { font-size:9px; }
  .hud-bar strong,.hud-bar small { font-size:9px; }
  .hud-skill-name { font-size:8px; }
  .hud-skill-list { gap:4px; }
  .hud-skill { padding:0 2px; }
  .hud-professions { padding-top:9px; }
  .sidebar { background:#101b24f5; border-color:var(--border); }
  .sidebar .nav-item { border-radius:0; }
  .sidebar .nav-item.active { color:var(--accent); }
  .panel-heading h2 { font-size:13px; }
  .location-title h2 { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Desktop adventure canvas: one continuous play surface with the map at its centre. */
@media (min-width:1024px) {
  :root {
    color-scheme:dark;
    --bg:#24211c; --sidebar:#1e211b; --panel:#302c24; --panel-soft:#373229;
    --border:#4b4437; --border-soft:#413b30; --text:#e4dcc9; --muted:#b5aa92;
    --dim:#988e78; --gold:#c8ac75; --green:#9da77c; --red:#c58b70; --accent:#c0b181;
  }
  body { background:var(--bg); }
  .content { padding:12px 16px 14px 8px; gap:10px; }
  .panel { color:var(--text); box-shadow:none; }
  .panel-heading { background:none; }
  input,select { color:var(--text); background:#28251f; border-color:#504738; border-radius:5px; }
  input::placeholder { color:#9d927b; }
  input:focus,select:focus { border-color:#a89d70; box-shadow:0 0 0 2px #a89d7018; }
  .btn { color:#d0c6ad; background:#38372a; border-color:#57553e; border-radius:5px; }
  .btn:not(:disabled):hover { background:#464733; border-color:#858960; }
  .btn.primary { color:#fff7e5; background:#64764c; border-color:#64764c; box-shadow:none; }
  .btn.primary:not(:disabled):hover { background:#4e6238; border-color:#4e6238; box-shadow:none; }
  .btn.secondary { color:#c5bea6; background:#353128; border-color:#57503e; }
  .btn:disabled { opacity:.57; }
  .text-btn { color:#b7b08b; }
  .text-btn:hover { color:#e1d7ac; }
  .icon-btn { border-color:#56583f; color:#b0b98a; }
  .icon-btn:hover { background:#42462f; color:#d4dfab; }
  .progress { background:#454033; border-radius:2px; }
  .progress.hp > span { background:#ae715d; }
  .progress.xp > span { background:#7c8b58; }
  .count-pill { color:#bcc09b; background:#b4b67d12; }
  .button-caption { color:#afa187; }

  .sidebar { width:104px; color:#deded0; background:#1e211b; border-right:0; }
  .main { margin-left:104px; }
  .sidebar nav { padding-inline:5px; }
  .sidebar .brand-word { font-family:var(--serif); color:#eee9d6; font-size:18px; letter-spacing:.5px; }
  .sidebar .brand-word > span { color:#c5b87a; }
  .sidebar .nav-item { color:#b6baa6; border-radius:5px; padding-inline:2px; }
  .sidebar .nav-item:hover { color:#f4efd9; background:#f1e7c208; }
  .sidebar .nav-item.active { background:#e7dec317; color:#f0e5bf; border-color:#c9ba8230; }
  .sidebar .nav-item.active .icon { color:#dccb8c; }
  .sidebar .nav-item > span:not(.nav-badge) { font-size:10px; }
  .sidebar .nav-badge { color:#e9d5a2; background:#c4ac7124; border:0; }
  .sidebar .server-status { border-color:#ffffff0b; }
  .server-status i { background:#a0b07f; box-shadow:none; }
  .server-status > #online-count { color:#b9bda8; }

  .hud { height:80px; padding:4px 4px 12px; background:none; border:0; border-bottom:1px solid #423c2f; border-radius:0; box-shadow:none; }
  .hud-identity .level-medallion { background:#3f402e; border:1px solid #626646; color:#c5cb9c; border-radius:50%; width:43px; height:43px; font-family:var(--serif); }
  .level-medallion > span { color:#a8ae83; font-size:7px; }
  .hud-identity strong { font-size:13px; }
  .hud-name > span { color:#b7ae91; }
  .hud .hud-bar > div:first-child { color:#bcb99a; font-size:11px; }
  .hud-bar strong { color:#ddd7bf; font-size:12px; }
  .hud-bar small { color:#a39b84; font-size:11px; }
  .hud-bar:has(.hp) .icon { color:#c4927e; }
  .hud-bar:has(.xp) .icon { color:#a5b57b; }
  .hud-resources,.hud-professions { border-color:#464032; }
  .hud-stat > .icon { color:#aeae8b; }
  .hud .hud-gold strong,.hud-gold > .icon { color:#d2b17b; }
  .hud-professions-heading > span { color:#aaa988; }
  .hud-skill:hover { background:#bac4850b; }
  .hud-skill-level .icon { color:#b2b789; }
  .hud-skill-level strong { color:#d6d9bc; }
  .hud-skill-name { color:#bcb99a; }
  .hud-skill .progress > span { background:#929a68; }
  .hud .hud-stat > span,.hud .hud-gold > span { font-size:10px; }
  .hud-professions-heading > span { font-size:9px; }
  .hud-skill-level strong { font-size:13px; }
  .hud-skill-name { font-size:11px; }

  .world-layout { grid-template-columns:minmax(0,1fr) clamp(225px,18vw,255px); grid-template-rows:minmax(0,1fr); grid-template-areas:"gameplay storage"; gap:0; border:1px solid #4a4232; border-radius:9px; background:radial-gradient(ellipse at 25% 20%,#403c2f 0,transparent 75%),#2d2a23; box-shadow:0 4px 18px #00000018; }
  .world-main,.world-storage { gap:10px; }
  .world-main { container-type:size; }
  .gameplay-frame,.gameplay-frame:has(.enemy:nth-child(3)) {
    --encounter-height:calc(180px + var(--encounter-font-extra));
    --field-width:clamp(220px,19vw,290px);
    --journal-width:clamp(180px,calc(100cqw - 100cqh - 42px + var(--encounter-height) - var(--field-width)),440px);
    --journal-gap:8px;
    container-type:size;
    display:grid;
    grid-template-columns:var(--journal-width) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"journal scene";
    padding:12px 16px 14px; gap:var(--journal-gap);
    border:0; border-radius:0;
    background:none;
    box-shadow:none;
  }
  .scene-layout {
    grid-area:scene;
    display:grid; width:100%; height:100%; min-height:0;
    grid-template-columns:minmax(0,min(calc(100cqh - var(--encounter-height)),calc(100% - var(--field-width) - 28px))) minmax(var(--field-width),1fr);
    grid-template-rows:minmax(0,1fr) var(--encounter-height);
    grid-template-areas:"map field" "enemies people";
    justify-content:start; column-gap:28px;
  }
  .gameplay-frame > .scene-layout > .map-panel,.gameplay-frame > .scene-layout > .location-panel,
  .gameplay-frame > .scene-layout > .enemies-panel,.gameplay-frame > .scene-layout > .people-panel {
    border:0; border-radius:0; background:none; box-shadow:none;
  }
  .map-panel { display:grid; grid-template-rows:minmax(0,1fr) 2px; padding:0; }
  .map-stage { background:none; padding:0; min-height:0; overflow:visible; }
  .map-north { display:none; }
  .tile-grid {
    width:min(calc(100cqw - 14px),calc(100cqh - 12px)); max-width:none;
    transform:none; gap:1px; padding:0;
    border:4px solid #4b4538; outline:1px solid #736950; border-radius:2px;
    background:#000; box-shadow:0 9px 22px #00000040;
  }
  .tile { border:0; border-radius:0; background:#000; }
  .tile img { filter:brightness(1.12) saturate(.85); }
  .tile.blocked { background:#000; }
  .tile.blocked img { filter:none; opacity:1; mix-blend-mode:normal; }
  .tile.blocked:after { display:none; }
  .tile.unmapped { background:#000; }
  .tile.adjacent:not(:disabled):hover { outline:2px solid #ead39a; outline-offset:-2px; box-shadow:inset 0 0 20px #ffe6a666; }
  .cooldown-track { background:none; margin:0 7px; }
  .cooldown-track > span { background:#8e9568; }

  .location-panel { display:flex; flex-direction:column; justify-content:flex-start; padding:10px 0 20px; }
  .location-image { background-image:none!important; background-color:transparent; min-height:0; height:auto; overflow:visible; margin-bottom:12px; }
  .location-image:after,.location-symbol { display:none; }
  .location-overline { position:static; color:#aa9e7e; font-size:11px; letter-spacing:2px; font-weight:600; text-shadow:none; }
  .location-body { padding:0; overflow:auto; }
  .location-title { flex-direction:column; align-items:flex-start; gap:9px; margin-bottom:16px; }
  .location-title h2 { color:#e6d8b9; font-family:var(--serif); font-weight:400; font-size:clamp(29px,3.2vw,44px); letter-spacing:-1px; line-height:1.06; }
  .location-title .field-coordinates { font-size:11px; letter-spacing:.3px; color:#a8b585; }
  .location-body > p { color:#bdb29a; font-size:14px; line-height:1.65; }
  .field-actions { margin-top:23px; gap:8px; }
  .field-actions .btn { padding:10px 12px; font-size:13px; }
  .field-actions .button-caption { color:#b9a581; font-size:11px; }
  .action-status { color:#a6ab82; font-size:11px; margin-top:16px; }
  .status-dot { background:#939d6d; }

  .enemies-panel { width:calc(100% - 14px); justify-self:center; padding:9px 0 0; }
  .people-panel { padding:9px 0 0; }
  .world-layout .gameplay-frame .panel-heading {
    height:20px; min-height:20px; padding:0; border:0; background:none;
  }
  .world-layout .gameplay-frame .panel-heading h2 { color:#b9aa87; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; }
  .world-layout .gameplay-frame .panel-heading .icon { display:none; }
  .world-layout .gameplay-frame .panel-heading .subtle { font-size:10px; color:#a99b7d; }
  .world-layout .gameplay-frame .count-pill { font-size:10px; padding:0; background:none; color:#b0af8c; }
  .enemy-list { display:flex; flex-direction:column; padding:8px 0 0; gap:8px; }
  .enemy,.enemy:last-child { flex-shrink:0; border:0; border-radius:0; background:none; padding:0; gap:12px; }
  .enemy-info > strong { color:#dccdb0; font-family:var(--sans); font-weight:600; font-size:13px; }
  .enemy-stats { gap:9px; margin:4px 0; }
  .enemy-info > small { display:block; font-size:10px; line-height:14px; }
  .enemy-stats span { color:#b2a184; font-size:11px; }
  .enemy-hp { height:3px; background:#504131; }
  .enemy-hp > span { background:#bb8e73; }
  .attack-btn { background:#9d7453; border:1px solid #9d7453; border-radius:4px; color:#fff9e9; padding:7px 10px; font-size:11px; }
  .attack-btn:not(:disabled):hover { background:#81583b; border-color:#81583b; color:#fffbed; }
  .peaceful { padding:8px 0 0; gap:10px; align-items:flex-start; }
  .peaceful > .icon { width:20px; height:20px; color:#939b71; }
  .peaceful strong { color:#b4bc94; font-size:12px; }
  .peaceful p { color:#a49b82; font-size:11px; margin-top:3px; }
  .people-body { flex:0 1 auto; padding:8px 0 0; min-height:18px; }
  .people-body > .small { color:#b6aa8e; font-size:12px; }
  .person { padding:0 0 4px; gap:8px; }
  .person strong { font-size:12px; color:#c2c39e; }
  .person span:not(.avatar-small) { color:#a8a083; }
  .person .avatar-small { background:#3d412d; border:1px solid #62694a; color:#bdc997; height:25px; width:25px; }
  .person .icon-btn { padding:3px 7px; }
  .people-panel > .party { margin:7px 0 0; padding:0; border:0; column-gap:8px; }
  .party > strong { color:#a69e80; font-size:10px; font-weight:500; }
  .party p { color:#b7b193; font-size:11px; margin:1px 0 0; }
  .party > [data-action="partyLeave"] { background:none; border:0; padding:0; color:#b4a689; font-size:10px; }

  .world-storage { border-left:1px solid #62574380; padding:12px 10px 14px 12px; }
  .world-storage .panel { border:0; border-radius:0; background:none; box-shadow:none; }
  .world-storage .panel-heading { padding:10px; border:0; }
  .world-storage .panel-heading h2 { font-family:var(--serif); font-size:17px; font-weight:400; color:#d2c2a0; }
  .world-storage .panel-heading .icon { color:#b4ad86; }
  .world-storage .panel-heading .text-btn { font-size:10px; }
  #pack-search { margin:7px 8px 0; font-size:11px; padding:8px; background:#2b271f; border-color:#4c4434; }
  .pack-list { padding:7px 10px; }
  .pack-item { padding:7px 0; border-color:#4c433280; }
  .pack-item strong { color:#c8b995; font-size:12px; }
  .pack-item span { color:#a99b7d; font-size:11px; }
  .pack-use { padding:4px 6px; }
  .pack-empty { color:#b1a382; }
  .pack-empty p { color:#b1a58a; font-size:11px; }
  .quick-panel { padding:12px 8px 0; }
  .quick-label { color:#ac9e80; font-size:9px; letter-spacing:1px; }
  .quick-label > span { color:#94876b; }
  .quickslots { gap:4px; }
  .quickslot { background:#332f24; border:1px solid #554d38; color:#aaa781; border-radius:4px; }
  .quickslot kbd { color:#a79a7b; }
  .quickslot:hover { color:#d0d5a4; background:#454830; border-color:#899568; }
  .quickslot.filled { background:#42482d; border-color:#737d51; }
  .quickslot.filled > span { color:#c8d6a1; }

  .gameplay-frame > .journal { grid-area:journal; grid-template-columns:minmax(0,1fr); grid-template-rows:clamp(170px,36%,240px) minmax(0,1fr); background:none; border:0; border-radius:0; box-shadow:none; gap:14px; padding-top:6px; }
  .journal .activity-pane { grid-row:1; border:0; padding-top:0; }
  .journal .chat-pane { grid-row:2; border:0; border-top:1px solid var(--border-soft); padding-top:12px; }
  .world-layout .journal .panel-heading { height:24px; min-height:24px; padding:0 2px; border:0; }
  .world-layout .journal .panel-heading h2 { color:#ada084; font-size:11px; font-weight:500; }
  .world-layout .journal .panel-heading .icon { width:12px; height:12px; color:#a99d7f; }
  .journal .journal-entries { padding:3px 0; scrollbar-width:none; }
  .journal .journal-entries::-webkit-scrollbar { display:none; }
  #journal-entries { display:flex; flex-direction:column; justify-content:space-between; gap:5px; }
  .journal-entry,.journal-entry > span { color:#b5a58a; font-size:12px; overflow-wrap:anywhere; }
  .journal-entry > span { min-width:0; }
  .journal-entry time { color:#97886f; font-size:10px; }
  .journal-entry.loot > span { color:#cfb88a; }
  .journal-entry.quest > span,.journal-entry.level > span { color:#c6b281; }
  .journal-entry.combat > span { color:#bf9b7b; }
  .journal-entry.heal > span { color:#aeba85; }
  .journal-entry b { color:#c1c595; }
  .journal-empty { color:#a6987b; font-size:11px; }
  .chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; background:none; border:0; padding:4px 0 0; gap:5px; }
  .chat-form input,.chat-form select { background:#302a20; border-color:#544a36; padding:6px 8px; }
  .chat-form input,.chat-form select { font-size:12px; }
  .channel-label { font-size:9px; }
  .chat-form select { grid-column:1 / -1; justify-self:start; }
  .chat-form .icon-btn { background:#717f51; color:#fffce8; border:0; }
  .channel-label { color:#b0bc8e; border-color:#646c4a; }
  .game-dialog { background:#302b21; border-color:#65563e; color:var(--text); }
  .modal-header { background:#383022; border-color:#5c4d35; }
}
@media (min-width:1024px) and (max-width:1199px) {
  .content { padding:10px 12px; }
  .hud { gap:12px; padding:3px 2px 11px; }
  .hud-identity .level-medallion { width:34px; height:38px; }
  .hud-identity strong { font-size:11px; }
  .world-layout { grid-template-columns:minmax(0,1fr) 210px; }
  .gameplay-frame,.gameplay-frame:has(.enemy:nth-child(3)) { --field-width:220px; --journal-width:clamp(180px,calc(100cqw - 100cqh - 38px + var(--encounter-height) - var(--field-width)),440px); --journal-gap:8px; padding:10px 12px 12px; }
  .location-title h2 { font-size:30px; }
  .location-body > p { font-size:13px; }
}
@media (min-width:1024px) and (max-height:740px) {
  .world-layout { grid-template-rows:minmax(0,1fr); }
  .hud { height:76px; }
  .location-panel { padding-top:8px; padding-bottom:8px; }
  .location-image { height:auto; min-height:0; margin-bottom:9px; }
  .location-title { margin-bottom:12px; }
  .location-title h2 { font-size:30px; }
  .location-body > p { font-size:13px; line-height:1.55; }
  .field-actions { margin-top:16px; }
  .field-actions .btn { padding:8px 10px; font-size:12px; }
  .action-status { margin-top:12px; }
  .world-layout .journal .panel-heading { height:22px; min-height:22px; }
}
@media (min-width:1024px) {
  .gameplay-frame:has(.enemy:nth-child(3)) { --encounter-height:calc(210px + var(--encounter-font-extra)); }
  .enemy-list:has(.enemy:nth-child(3)) { display:flex; flex-direction:column; gap:8px; }
  .enemy-list:has(.enemy:nth-child(3)) .enemy { flex-direction:row; align-items:center; gap:12px; }
  .enemy-list:has(.enemy:nth-child(3)) .enemy-info > strong { font-size:12px; }
  .enemy-list:has(.enemy:nth-child(3)) .attack-btn { padding:5px 7px; }
}

@media (min-width:1024px) {
  .sidebar .nav-item > span:not(.nav-badge) { font-size:var(--ui-font-navigation); }
  .hud .hud-bar > div:first-child,.hud-bar small,.hud-skill-name { font-size:var(--ui-font-hud); }
  .hud-bar strong,.hud .hud-stat strong,.hud-skill-level strong { font-size:calc(var(--ui-font-hud) + 1px); }
  .hud .hud-stat > span,.hud .hud-gold > span { font-size:calc(var(--ui-font-hud) - 1px); }
  .hud-professions-heading > span { font-size:calc(var(--ui-font-hud) - 2px); }
  .hud-identity strong { font-size:calc(var(--ui-font-hud) + 2px); }
  .world-layout .journal .panel-heading h2,.journal-empty { font-size:calc(var(--ui-font-journal) - 1px); }
  .journal-entry,.journal-entry > span,.chat-form input,.chat-form select { font-size:var(--ui-font-journal); }
  .journal-entry time,.chat-live { font-size:calc(var(--ui-font-journal) - 2px); }
  .channel-label { font-size:calc(var(--ui-font-journal) - 3px); }
  .location-body > p { font-size:var(--ui-font-field); }
  .location-overline,.location-title .field-coordinates,.field-actions .button-caption,.action-status { font-size:calc(var(--ui-font-field) - 3px); }
  .field-actions .btn { font-size:calc(var(--ui-font-field) - 1px); }
  .world-layout .gameplay-frame .enemies-panel .panel-heading h2,.world-layout .gameplay-frame .people-panel .panel-heading h2 { font-size:calc(var(--ui-font-encounter) - 1px); }
  .enemy-info > strong,.enemy-list:has(.enemy:nth-child(3)) .enemy-info > strong { font-size:calc(var(--ui-font-encounter) + 1px); }
  .enemy-stats span,.attack-btn,.enemy-info > small,.party p,.peaceful p { font-size:calc(var(--ui-font-encounter) - 1px); }
  .peaceful strong,.people-body > .small,.person strong { font-size:var(--ui-font-encounter); }
  .party > strong,.people-panel > .party > [data-action="partyLeave"] { font-size:calc(var(--ui-font-encounter) - 2px); }
  .world-storage .panel-heading h2 { font-size:calc(var(--ui-font-inventory) + 5px); }
  #pack-search,.pack-item span { font-size:calc(var(--ui-font-inventory) - 1px); }
  .pack-item strong { font-size:var(--ui-font-inventory); }
  .quick-label,.quickslot.filled > span { font-size:calc(var(--ui-font-inventory) - 3px); }
}

/* Progression, inventory actions and language controls. */
.language-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; font-size:14px; }
.login-dialog .language-setting { margin-top:18px; margin-bottom:8px; }
.recovery-login { margin-top:12px; font-size:12px; color:var(--muted); }
.recovery-login form { display:grid; gap:10px; margin-top:12px; }
.mastery-stars { white-space:nowrap; color:#817555; letter-spacing:3px; font-size:17px; }
.mastery-stars > span { color:#d4b471; }
.field-mastery { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:12px; }
.field-mastery > span:last-child { font-size:12px; color:var(--muted); }
.field-progress { display:grid; grid-template-columns:1fr auto; gap:8px; font-size:13px; padding:0 0 8px; }
.field-progress .progress { grid-column:1/-1; }
.hunter-summary { display:flex; align-items:center; width:100%; gap:10px; color:var(--text); background:#a8956520; border:1px solid #a8956540; border-radius:5px; padding:10px; margin-top:14px; text-align:left; }
.hunter-summary > span { flex:1; min-width:0; }
.hunter-summary strong,.hunter-summary small { display:block; overflow-wrap:anywhere; }
.hunter-summary small { color:var(--muted); margin-top:4px; }
.hunt-marker { position:absolute; top:5px; left:5px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff0c0; background:#8b5834; border:1px solid #e2b977; z-index:3; }
.hunt-marker .icon { width:15px; height:15px; }
.overview-tile .hunt-marker { width:14px; height:14px; top:0; left:0; font-size:10px; }
.pack-item-details { background:none; border:0; padding:0; text-align:left; min-width:0; flex:1; color:inherit; cursor:pointer; }
.pack-item-details strong,.pack-item-details > span { display:block; overflow-wrap:anywhere; }
.pack-item-details:hover strong { text-decoration:underline; text-underline-offset:3px; }
.pack-panel > [data-inventory-sort] { align-self:flex-end; max-width:130px; margin:6px 8px 0; padding:4px 8px; font-size:12px; }
.inventory-toolbar { flex-wrap:wrap; gap:12px; }
.inventory-toolbar select { max-width:170px; }
.item-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.item-detail h3 { font-family:var(--serif); font-size:26px; margin:0 0 10px; }
.item-detail p { line-height:1.6; }
.item-transfer { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; border-top:1px solid var(--border); margin-top:24px; padding-top:20px; }
.item-transfer label { display:flex; flex-direction:column; gap:8px; font-size:13px; min-width:0; }
.item-transfer select { width:100%; }
.item-transfer > button { grid-column:1/-1; justify-self:start; }
.discard-item { grid-column:1/-1; border-top:1px solid var(--border); padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.discard-item label { flex-direction:row; align-items:center; }
.discard-item input { width:auto; }
.danger-btn { color:#edbea3; border:1px solid #a06849; background:#783c2b30; }
.upgrade-options { border-top:1px solid var(--border); margin-top:20px; padding-top:14px; }
.collection-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.collection-card small { display:block; color:var(--muted); margin-top:12px; }
.skill-mastery { border-top:1px solid var(--border); margin-top:24px; padding-top:10px; }
.skill-mastery h3 { font-size:14px; }
.skill-mastery > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:8px 0; font-size:13px; }
.skill-mastery small,.skill-bonus { color:var(--muted); font-size:12px; line-height:1.6; }
.recipe-mastery { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; font-size:12px; color:var(--muted); }
.task-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:24px; }
.task-card { padding:24px; }
.task-card h2 { font-family:var(--serif); font-weight:400; margin:12px 0; }
.task-card p { line-height:1.6; color:var(--muted); }
.task-card small { display:block; margin:12px 0; color:var(--muted); }
.quest-steps .completed-step { color:#97a975; }
.quests-page { display:grid; gap:28px; }
.quest-section-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.quest-section-heading h2 { margin:0; font:400 25px var(--serif); color:var(--text); }
.quest-card h3 { margin:0 0 12px; font:400 23px var(--serif); color:var(--text); }
.quest-empty { padding:24px; }
.quest-empty p { margin:0 0 8px; }
.quest-empty > span { color:var(--muted); }
.completed-quests { padding:0; }
.completed-quests > summary { display:flex; align-items:center; gap:12px; padding:20px 24px; cursor:pointer; list-style:none; color:var(--text); }
.completed-quests > summary::-webkit-details-marker { display:none; }
.completed-quests > summary > .icon { width:17px; height:17px; color:var(--gold); }
.completed-quests[open] > summary > .icon { transform:rotate(90deg); }
.completed-quests > summary:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; border-radius:8px; }
.quest-summary-progress { display:grid; grid-template-columns:minmax(190px,260px); gap:7px; margin-left:18px; color:var(--muted); }
.quest-summary-copy { display:flex; align-items:baseline; justify-content:center; gap:8px; width:100%; text-align:center; }
.quest-summary-copy strong { color:var(--gold); font:400 19px var(--serif); white-space:nowrap; }
.quest-summary-copy > span { font-size:12px; white-space:nowrap; }
.quest-summary-bar { width:100%; height:5px; margin:0; }
.completed-quests-body { padding:0 24px 24px; }
@media (max-width:560px) {
  .completed-quests > summary { flex-wrap:wrap; }
  .quest-summary-progress { flex-basis:100%; grid-template-columns:minmax(0,1fr); gap:8px; margin-left:29px; }
  .quest-summary-bar { width:100%; }
}
.tile-quest { z-index:2; color:#ffe098; text-shadow:0 1px 3px #000,0 0 5px #000; pointer-events:none; }
#tile-grid .tile-quest { top:3px; right:5px; width:26px; height:34px; font-size:32px; line-height:1; text-shadow:0 2px 3px #000,0 0 5px #000,1px 0 1px #000,-1px 0 1px #000; }
.atlas-tile .tile-quest { right:1px; top:0; width:12px; height:16px; font-size:16px; line-height:1; }
@media (min-width:1024px) {
  .sidebar .nav-item[data-page="adventure"] > span {
    max-width:100%; white-space:nowrap; hyphens:none; overflow-wrap:normal;
  }
}
@media (min-width:561px) { .sidebar nav { min-height:0; overflow-y:auto; scrollbar-width:thin; flex-shrink:1; } }
@media (min-width:561px) and (max-height:800px) {
  .sidebar nav .nav-item { padding-block:6px; margin-bottom:2px; gap:4px; }
}
.quest-steps .current-step { color:#e6d6a4; background:#baa26018; border-left:2px solid #b9a365; padding:8px; }
.field-actions .quest-btn small { display:block; margin-top:5px; font-size:.8em; color:var(--muted); }
@media (min-width:1024px) {
  .location-panel,.location-body,.location-title { min-width:0; max-width:100%; }
  .location-body { width:100%; scrollbar-gutter:stable; padding-right:6px; }
  .location-title h2 { max-width:100%; overflow-wrap:anywhere; hyphens:auto; }
  .location-panel .field-actions .btn { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  .scene-layout { min-width:0; }
  .pack-panel { min-height:0; }
}

/* Keep three encounter rows in place as enemies appear and respawn. */
@media (min-width:1024px) {
  .gameplay-frame { --encounter-height:calc(210px + var(--encounter-font-extra)); }
  .enemy-list,.enemy-list:has(.enemy:nth-child(3)) {
    display:grid;
    flex:1;
    min-height:0;
    overflow:hidden;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:0;
    padding:4px 0 0;
  }
  .enemy-list .enemy,.enemy-list:has(.enemy:nth-child(3)) .enemy {
    min-height:0;
    overflow:auto;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:4px 0;
    border:0;
    scrollbar-width:thin;
  }
  .enemy-list .enemy-info > strong { font-size:calc(var(--ui-font-encounter) + 1px); }
}
.person-line { display:flex; align-items:baseline; flex:1; min-width:0; gap:7px; white-space:nowrap; }
.person .person-line strong { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ui-font-encounter); }
.person .person-line strong > span { font-size:inherit; }
.person .person-line .person-xp { flex-shrink:0; white-space:nowrap; font-size:var(--ui-font-encounter); }
.enemy-empty { border:0; }
.enemy-empty-message,.people-empty-message { margin:0; color:#b6aa8e; font-size:var(--ui-font-encounter); line-height:1.4; }
.field-coordinates { display:block; color:#a8b585; font-size:12px; }
/* Open encounter rows share the map surface and reserve three stable targets. */
#enemy-panel { container-type:inline-size; }
#enemy-panel .enemy-list {
  gap:6px; padding:6px 10px 0 0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-gutter:stable;
}
#enemy-panel .enemy {
  display:flex; flex-direction:row; align-items:center; gap:18px; min-width:0;
  padding:5px 0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;
}
#enemy-panel .enemy-info { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:5px 14px; flex:0 1 260px; min-width:0; }
#enemy-panel .enemy-name-row { grid-area:1 / 1; display:flex; align-items:center; gap:6px; min-width:0; }
#enemy-panel .enemy-name { font:600 calc(var(--ui-font-encounter) + 1px)/1.25 var(--sans); color:var(--text); overflow-wrap:anywhere; }
#enemy-panel .enemy-party { display:inline-flex; color:var(--muted); flex-shrink:0; }
#enemy-panel .enemy-party .icon { width:13px; height:13px; }
#enemy-panel .enemy-readout { display:contents; font-size:calc(var(--ui-font-encounter) - 1px); line-height:1.2; font-variant-numeric:tabular-nums; }
#enemy-panel .enemy-health { grid-area:2 / 1; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; color:var(--text); }
#enemy-panel .enemy-health strong { font-weight:500; }
#enemy-panel .enemy-health .icon { width:11px; height:11px; color:#b58c7b; }
#enemy-panel .enemy-health-max { color:var(--muted); }
#enemy-panel .enemy-combat-values { grid-column:2; grid-row:1 / 3; align-self:center; display:grid; gap:3px; }
#enemy-panel .enemy-value { display:grid; grid-template-columns:3ch minmax(3ch,auto); gap:5px; align-items:baseline; white-space:nowrap; }
#enemy-panel .enemy-value abbr { text-decoration:none; color:var(--muted); font-size:.9em; letter-spacing:.025em; cursor:default; }
#enemy-panel .enemy-value strong { color:var(--text); font-weight:500; text-align:right; }
#enemy-panel .enemy-health-track { grid-area:3 / 1 / 4 / 3; width:100%; height:3px; overflow:hidden; border-radius:2px; background:#b6aa8e20; box-shadow:none; }
#enemy-panel .enemy-health-track > span { display:block; height:100%; border-radius:inherit; background:#a77c6b; }
#enemy-panel .enemy-action { position:relative; display:flex; align-items:center; width:7em; margin-left:auto; flex:none; font-size:calc(var(--ui-font-encounter) - 1px); }
#enemy-panel .attack-btn {
  width:100%; min-width:0; min-height:30px; padding:4px 9px;
  border:1px solid #81745180; border-radius:4px; background:#a895650a; color:var(--text);
  font-size:inherit; font-weight:500; box-shadow:none;
}
#enemy-panel .attack-btn:not(:disabled):hover { background:#a8956526; border-color:#a99a71; color:#ece0c8; }
#enemy-panel .attack-btn:focus-visible { outline:2px solid #c5b783; outline-offset:2px; }
#enemy-panel .attack-btn:disabled { opacity:.45; cursor:default; }
#enemy-panel .enemy-engaged { position:absolute; top:calc(100% + 2px); left:0; width:100%; text-align:center; color:var(--muted); font-size:.82em; line-height:11px; white-space:nowrap; }
#enemy-panel .enemy-empty { padding:0; min-height:0; align-items:flex-start; }
#enemy-panel .enemy-empty-message { padding-top:2px; }
@media (min-width:1024px) {
  #enemy-panel .enemy-list { flex:1; grid-template-rows:repeat(3,minmax(min-content,1fr)); }
  #enemy-panel .enemy:not(.enemy-empty) { min-height:54px; }
}
@container (max-width:300px) {
  #enemy-panel .enemy:not(.enemy-empty) { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 8px; padding-block:2px; }
  #enemy-panel .enemy-info { display:contents; }
  #enemy-panel .enemy-name-row { grid-column:1 / -1; }
  #enemy-panel .enemy-health { gap:3px; align-self:end; }
  #enemy-panel .enemy-health .icon { display:none; }
  #enemy-panel .enemy-combat-values { grid-column:2; grid-row:2; gap:2px; line-height:1; }
  #enemy-panel .enemy-health-track { grid-area:3 / 1 / 4 / 3; align-self:start; }
  #enemy-panel .enemy-action { grid-column:3; grid-row:2 / 4; width:6.4em; }
}
@media (min-width:1024px) {
  .enemy-list .enemy-empty,.enemy-list:has(.enemy:nth-child(3)) .enemy-empty { align-items:flex-start; }
}

/* Field mastery beside the place name and readable vertical quick access. */
.location-title h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.field-title-name { min-width:0; overflow-wrap:anywhere; }
.field-title-stars { display:inline-flex; align-items:baseline; white-space:nowrap; }
.field-title-stars .mastery-stars { font-family:var(--sans); font-size:clamp(13px,1.3vw,16px); letter-spacing:1px; }
.quickslots { grid-template-columns:minmax(0,1fr); gap:4px; }
.quickslots .quickslot,.quickslots .quickslot.filled {
  display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center;
  gap:8px; width:100%; min-height:27px; height:auto; padding:3px 8px; text-align:left;
}
.quickslots .quickslot kbd { position:static; min-width:18px; font-size:11px; text-align:center; white-space:nowrap; }
.quickslots .quickslot.filled > span { font-size:var(--ui-font-inventory); line-height:1.25; overflow-wrap:anywhere; }
.quickslots .quickslot.filled > b { position:static; font-size:11px; }
.quickslots .quick-empty-label { grid-column:2 / -1; color:#b3a789; font-size:var(--ui-font-inventory); }
.quickslots .quickslot.filled { grid-template-columns:max-content minmax(0,1fr); }
.quickslots .quick-item-qty { white-space:nowrap; }

/* Keep assigned consumables visible when empty, including on mobile. */
#quickslots .quickslot.filled.depleted {
  background: #482e2b;
  border-color: #a45f56;
}
#quickslots .quickslot.filled.depleted:hover {
  background: #58352f;
  border-color: #c57c6f;
}
#quickslots .quickslot.filled.depleted .quick-item-qty,
#quickslots .quickslot.filled.depleted kbd { color: #efb0a2; }
.pack-item .pack-item-qty { color:inherit; font-size:inherit; white-space:nowrap; }
.pack-item .item-name { color:var(--item-color); font-size:inherit; }
.inventory-balance { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; border-bottom:1px solid var(--border-soft); }
.inventory-balance > span { font:400 22px var(--serif); color:var(--text); }
.inventory-gold { display:flex; align-items:center; gap:7px; border:0; background:none; padding:4px 0; color:#dbc291; font:500 13px/1.5 var(--sans); cursor:pointer; text-align:left; }
.inventory-gold small { font:inherit; color:#b4a783; }
.inventory-gold .icon { width:15px; height:15px; }
.inventory-gold:hover { color:#f6e0af; }
.inventory-gold:focus-visible { outline:1px solid #cbb27c; outline-offset:3px; }
.pack-heading { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:8px 8px 5px; flex:none; }
.world-storage .pack-heading .panel-heading { flex:1 0 auto; padding:0; }
.pack-heading .inventory-gold { flex:none; font-size:var(--ui-font-inventory); }
.item-description .quantity { font-size:inherit; color:inherit; margin-left:0; }

/* Item information follows the pointer like a compact RPG inspection card. */
.item-tooltip {
  position:fixed; z-index:1000; width:min(320px,calc(100vw - 20px)); max-height:calc(100vh - 20px);
  overflow:auto; padding:14px 15px 13px; color:#d8ceb5;
  background:linear-gradient(145deg,#211d16 0%,#15130f 72%);
  border:1px solid #77694d; border-top-width:2px; border-radius:5px;
  box-shadow:0 18px 46px #000c,0 0 0 1px #0b0906cc inset;
  font-size:13px; line-height:1.45; pointer-events:none; opacity:0;
  transform:translateY(4px); transition:opacity .1s ease,transform .1s ease;
}
.item-tooltip.visible { opacity:1; transform:translateY(0); }
.item-tooltip[popover] { margin:0; inset:auto; overflow:visible; }
.item-tooltip::backdrop { background:transparent; pointer-events:none; }
.item-tooltip[data-rarity="uncommon"] { border-top-color:#829e5d; }
.item-tooltip[data-rarity="rare"] { border-top-color:#6f8fbd; }
.item-tooltip[data-rarity="epic"] { border-top-color:#9c74c9; }
.item-tooltip[data-rarity="legendary"] { border-top-color:#d79d48; }
.item-tooltip-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:5px; }
.item-tooltip-rarity { color:#a99d82; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.item-tooltip-quantity { color:#8f856f; font-size:11px; white-space:nowrap; }
.item-tooltip h3 { margin:0; font:500 20px/1.2 var(--serif); overflow-wrap:anywhere; }
.item-tooltip-meta { margin:4px 0 0; color:#aaa087; font-size:11px; }
.item-tooltip-stats { display:grid; gap:3px; margin:12px -3px 0; padding:9px 10px; color:#baca91; background:#87995d12; border-left:2px solid #8da06a; }
.item-tooltip-stats strong { font-weight:500; }
.item-tooltip-description { margin:12px 0 0; color:#c5baa1; }
.item-tooltip-recipe { display:grid; gap:7px; margin-top:12px; padding-top:10px; border-top:1px solid #6b60482e; }
.item-tooltip-recipe > span { display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; align-items:baseline; }
.item-tooltip-recipe small { color:#8f856f; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.item-tooltip-recipe strong { color:#c9bd9f; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.item-tooltip-equipped { margin:11px 0 0; color:#b9ad92; font-size:12px; }
.item-tooltip-equipped span { color:#8f856f; }
.item-tooltip-footer { display:grid; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid #6b60485c; color:#baa974; font-size:11px; }
.item-tooltip-footer > span { display:flex; align-items:center; gap:5px; }
.item-tooltip-footer .icon { width:13px; height:13px; }
.item-tooltip-footer small { color:#817867; font-size:10px; }
[data-item-tooltip]:focus-visible { outline:1px solid #d5c083; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .item-tooltip { transition:none; } }

/* Desktop layout editor: handles sit on the existing boundaries. */
@media (min-width:1024px) {
  .world-storage .quick-panel { min-height:0; }
  .layout-edit .world-layout,.layout-edit .journal,.layout-edit .chat-pane,
  .layout-edit .scene-layout,.layout-edit .map-panel,.layout-edit .world-storage,
  .layout-edit .quick-panel { position:relative; }
  .layout-edit .world-layout button:not(.layout-handle),
  .layout-edit .world-layout input,
  .layout-edit .world-layout select { pointer-events:none; }
  .layout-handle {
    position:absolute; z-index:30; display:flex; align-items:center; justify-content:center;
    padding:0; color:#efe0b6; background:#746744; border:1px solid #c5b384;
    border-radius:999px; box-shadow:0 2px 10px #0008; touch-action:none;
    font:700 17px/1 var(--sans); user-select:none;
  }
  .layout-handle:hover,.layout-handle:focus-visible { background:#a28a52; color:#fff9e9; outline:2px solid #e2c989; outline-offset:2px; }
  .layout-handle[data-axis="x"] { width:14px; min-height:88px; cursor:ew-resize; }
  .layout-handle[data-axis="y"] { height:14px; min-width:88px; cursor:ns-resize; }
  .layout-handle-hudHeight { top:-12px; left:37%; width:26%; }
  .layout-handle-inventoryWidth { left:-8px; top:32%; height:36%; }
  .layout-handle-journalWidth { right:-17px; top:32%; height:36%; }
  .layout-handle-mapWidth { right:-20px; top:24%; height:48%; }
  .layout-handle-encounterHeight { bottom:calc(var(--layout-encounter-height, var(--encounter-height)) - 6px); left:26%; width:48%; }
  .layout-handle-logHeight { top:-9px; left:20%; width:60%; }
  .layout-handle-quickHeight { top:-9px; left:17%; width:66%; }
  .layout-dragging,.layout-dragging * { cursor:grabbing!important; user-select:none!important; }
}
.layout-toolbar {
  position:fixed; z-index:90; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 24px); padding:10px 12px;
  color:#e5d9bd; background:#26241eed; border:1px solid #8b7a54; border-radius:10px;
  box-shadow:0 12px 34px #000a; backdrop-filter:blur(10px); white-space:nowrap;
}
.layout-toolbar > span { font-size:13px; margin-right:8px; }
.layout-toolbar .btn { white-space:nowrap; }

/* Guild names read as part of a character's identity, without extra controls. */
.hud-name > .guild-tag,.person .person-line .guild-tag {
  display:block; margin-top:3px; color:#b7aa80; font-size:calc(var(--ui-font-hud) + 2px);
  font-weight:400; line-height:1.2; letter-spacing:.2px;
}
.person .person-line .guild-tag { display:inline; margin:0 0 0 3px; font-size:var(--ui-font-encounter); }
.person .person-line strong { overflow:visible; text-overflow:clip; width:max-content; }
.person .person-line strong > span,.person .person-line strong .person-level-number { font-size:inherit; }
.person .person-line .person-level { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.person .person-line .person-level-number { display:inline-block; min-width:6ch; text-align:left; font-variant-numeric:tabular-nums; }
.people-body { overflow-x:auto; scrollbar-width:thin; }

@media (min-width:1024px) {
  .hud { border-bottom:0; }
  .journal .chat-pane { border-top:0; }
  .world-storage .quick-panel { max-height:calc(100% - 115px); display:flex; flex-direction:column; }
  .world-storage .quickslots { min-height:0; overflow-y:auto; scrollbar-width:thin; }
}

.hud-party { min-width:0; min-height:81px; overflow:hidden; }
.hud-party-heading-row { display:flex; align-items:center; justify-content:space-between; height:13px; min-width:0; }
.hud-party-heading { display:block; padding:0; border:0; background:none; color:#aaa988; font-size:var(--ui-font-hud); font-weight:600; letter-spacing:1.1px; line-height:13px; text-align:left; cursor:pointer; }
.hud-party-heading:hover,.hud-party-heading:focus-visible { color:#eee1b8; }
.hud-party-leave { padding:0; border:0; background:none; color:#aaa080; font-size:calc(var(--ui-font-hud) - 1px); line-height:13px; cursor:pointer; }
.hud-party-leave:hover,.hud-party-leave:focus-visible { color:#eee1b8; text-decoration:underline; }
.hud-party-roster { display:grid; grid-auto-rows:16px; gap:1px; min-width:0; margin-top:1px; }
.hud-party-member { display:grid; grid-template-columns:max-content max-content max-content; justify-content:start; align-items:baseline; gap:4px; min-width:0; color:#d8cfb5; font-size:calc(var(--ui-font-hud) + 1px); line-height:16px; }
.hud-party-member.offline { opacity:.55; }
.hud-party-level { display:inline-flex; gap:3px; color:#adad8e; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hud-party-level-number { display:inline-block; min-width:6ch; text-align:left; }
.hud-party-name { white-space:nowrap; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.hud-party-name:hover { color:#eee1b8; }
.hud-party-name:focus-visible { outline:1px solid currentColor; outline-offset:2px; border-radius:2px; }
.hud-party-hp { color:#b9c798; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hud-party-empty { color:#9c947f; font-size:var(--ui-font-hud); }
@media (min-width:1024px) {
  .hud { grid-template-columns:minmax(145px,175px) max-content minmax(130px,.65fr) minmax(255px,max-content) minmax(255px,1.35fr); gap:10px; height:clamp(90px,calc(var(--ui-font-hud) + var(--ui-font-hud) + var(--ui-font-hud) + var(--ui-font-hud) + 46px),100px); }
  .hud-identity .hud-name strong { display:block; max-width:15ch; overflow:hidden; text-overflow:ellipsis; }
  .hud-identity { grid-column:1; grid-row:1; }
  .hud-vitals { grid-column:3; grid-row:1; gap:4px; }
  .hud .hud-bar > div:first-child { display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-bottom:2px; }
  .hud-bar strong,.hud-bar small { white-space:nowrap; font-variant-numeric:tabular-nums; }
  .hud-resources { grid-column:2; grid-row:1; grid-template-columns:max-content; gap:0; align-content:center; padding-left:5px; }
  .hud .hud-stat,.hud .hud-gold { display:grid; grid-template-columns:14px max-content; grid-template-rows:12px 13px; column-gap:3px; align-items:center; white-space:nowrap; }
  .hud .hud-stat > .icon,.hud .hud-gold > .icon { grid-column:1; grid-row:1; width:12px; height:12px; }
  .hud .hud-stat > span,.hud .hud-gold > span { grid-column:2; grid-row:1; width:auto; margin:0; }
  .hud .hud-stat strong,.hud .hud-gold strong { grid-column:1 / -1; grid-row:2; font-size:calc(var(--ui-font-hud) + 1px); line-height:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .hud .hud-gold { grid-column:1; }
  .hud-party { grid-column:4; grid-row:1; margin-left:8px; }
  .hud-professions { grid-column:5; grid-row:1; padding-left:8px; }
}
@media (min-width:1200px) {
  .hud .hud-stat,.hud .hud-gold { grid-template-columns:14px 40px max-content; grid-template-rows:20px; }
  .hud .hud-stat > span,.hud .hud-gold > span { grid-column:2; }
  .hud .hud-stat strong,.hud .hud-gold strong { grid-column:3; grid-row:1; }
}
@media (min-width:1024px) and (max-width:1199px) {
  .hud { grid-template-columns:minmax(135px,175px) minmax(65px,max-content) minmax(120px,.65fr) minmax(255px,max-content) minmax(245px,1.35fr); gap:8px; }
  .hud-party { margin-left:4px; }
  .hud-identity strong { font-size:min(calc(var(--ui-font-hud) + 2px),14px); }
  .hud-skill-list { gap:2px; }
  .hud-skill { padding:0; }
  .hud-skill-name { font-size:min(calc(var(--ui-font-hud) - 1px),10px); }
  .hud-skill-xp { font-size:min(var(--ui-font-hud),10px); }
}
.hud .hud-gold strong { color:var(--text); }

/* Character, professions, then party, separated by quiet inset rules. */
.hud.hud-adventure {
  --hud-line:calc(var(--ui-font-hud) + 8px);
  --hud-space:32px;
  --hud-inner-gap:24px;
  --hud-divider:#c6b28335;
  --hud-character-width:390px;
  display:flex; flex-wrap:wrap;
  align-items:start; align-content:start; gap:14px 0; height:auto; min-height:calc(5 * var(--ui-font-hud) + 72px);
  padding:8px 12px; margin:0; border:0; border-radius:8px;
  background:#26241d; color:#e1d7b9; box-shadow:none; flex-shrink:0;
}
.hud-adventure .hud-character {
  display:flex; flex:0 1 var(--hud-character-width); flex-direction:column; gap:4px; min-width:min-content; padding-right:var(--hud-space);
}
.hud-adventure .hud-character-heading {
  display:flex; align-items:center; justify-content:center; gap:var(--hud-inner-gap); width:100%; min-width:0;
}
.hud-fullscreen.icon-btn {
  display:flex; align-items:center; justify-content:center; width:32px; min-height:44px;
  flex:0 0 32px; padding:6px; border:0; border-radius:5px; background:#ffffff05;
}
.hud-fullscreen .icon { width:19px; height:19px; }
.hud-fullscreen.icon-btn:hover,.hud-fullscreen.icon-btn[aria-pressed="true"] { color:#eee1b6; background:#c5b87a19; }
.hud-fullscreen.icon-btn:focus-visible { outline:2px solid #c5b87a; outline-offset:2px; }
.hud-adventure .hud-identity {
  grid-column:1; grid-row:1; display:flex; flex:0 0 auto; gap:11px; padding:0; min-width:max-content;
  border:0; background:none; color:#e1d7b9;
}
.hud-adventure .hud-identity .hud-name { min-width:max-content; }
.hud-adventure .hud-identity .hud-name strong {
  font:600 calc(var(--ui-font-hud) + 2px)/1.35 var(--sans);
  display:block; max-width:none; overflow:visible; text-overflow:clip; white-space:nowrap;
}
.hud-adventure .hud-name > .guild-tag {
  display:block; font-size:calc(var(--ui-font-hud) + 2px); color:#bdc394;
  margin-top:2px; line-height:1.35; letter-spacing:0; white-space:nowrap;
}
.hud-adventure .hud-resources {
  display:grid; grid-template-columns:14px max-content max-content;
  flex:0 0 auto; align-content:center; gap:5px 5px; padding:0; border:0;
}
.hud.hud-adventure .hud-stat,.hud.hud-adventure .hud-gold {
  display:grid; grid-column:1 / -1; grid-template-columns:subgrid; grid-template-rows:auto;
  align-items:center; gap:0 5px; padding:0; margin:0; border:0; min-width:0;
  line-height:1.4; white-space:nowrap;
}
.hud.hud-adventure .hud-stat > .icon,.hud.hud-adventure .hud-gold > .icon {
  grid-column:1; grid-row:1; width:13px; height:13px; color:#aeb184;
}
.hud.hud-adventure .hud-stat > span,.hud.hud-adventure .hud-gold > span {
  display:block; grid-column:2; grid-row:1; width:auto; margin:0; text-align:left;
  font-size:var(--ui-font-hud); line-height:1.4; color:#c0b796;
}
.hud.hud-adventure .hud-stat strong,.hud.hud-adventure .hud-gold strong {
  grid-column:3; grid-row:1; margin-left:5px; text-align:right;
  font:600 calc(var(--ui-font-hud) + 1px)/1.4 var(--sans); color:#e1d7b9;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.hud-adventure .hud-vitals {
  grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; width:100%; min-width:0;
}
.hud.hud-adventure .hud-bar { display:block; min-width:0; max-width:none; }
.hud.hud-adventure .hud-bar > div:first-child {
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap;
  gap:2px 8px; margin-bottom:1px; font-size:var(--ui-font-hud); color:#c7bea1;
}
.hud-adventure .hud-bar strong { font-size:var(--ui-font-hud); color:#e1d7b9; }
.hud-adventure .hud-bar small { font-size:inherit; color:#b5ae96; }
.hud-adventure .progress { height:5px; border:0; border-radius:3px; background:#454236; }
.hud-adventure .progress.hp > span { background:#b57862; }
.hud-adventure .progress.xp > span,.hud-adventure .hud-skill .progress > span { background:#9aa86b; }
.hud-adventure .hud-party {
  grid-column:3; grid-row:1; flex:0 0 auto; padding:0 var(--hud-space); margin:0;
  min-width:0; min-height:0; overflow:visible; font-size:calc(var(--ui-font-hud) + 1px);
}
.hud-adventure .hud-party-heading-row { height:auto; min-height:1.4em; gap:12px; font-size:var(--ui-font-hud); }
.hud-adventure .hud-party-heading {
  color:#bcb68e; font-size:var(--ui-font-hud); line-height:1.4; letter-spacing:1.5px; font-weight:500;
}
.hud-adventure .hud-party-leave { font-size:var(--ui-font-hud); line-height:1.4; }
.hud-adventure .hud-party-roster {
  display:grid; grid-template-columns:calc(6ch + 2.4em) minmax(20ch,max-content) minmax(11ch,max-content);
  grid-template-rows:repeat(4,var(--hud-line)); grid-auto-rows:var(--hud-line);
  justify-content:start; width:max-content; gap:1px 8px; margin-top:6px;
}
.hud-adventure .hud-party-member {
  grid-column:1 / -1; grid-template-columns:subgrid; justify-content:normal;
  align-items:center; column-gap:8px; font-size:inherit; line-height:1.3;
}
.hud-adventure .hud-party-level { gap:4px; }
.hud-adventure .hud-party-level-number { width:6ch; min-width:6ch; }
.hud-adventure .hud-party-hp { text-align:left; color:#cad1a4; }
.hud-adventure .hud-party-empty { grid-column:1 / -1; align-self:center; font-size:inherit; }
.hud-adventure .hud-professions {
  grid-column:2; grid-row:1; flex:1 1 calc(280px + 2 * var(--hud-space)); padding:0 var(--hud-space); border:0; min-width:min-content;
}
.hud-adventure .hud-professions-heading { min-height:1.4em; margin:0 0 6px; font-size:var(--ui-font-hud); }
.hud-adventure .hud-professions-heading > span {
  font-size:var(--ui-font-hud); font-weight:500; letter-spacing:1.5px; color:#bcb68e;
}
.hud-adventure .hud-skill-list { --hud-skill-gap:clamp(8px,1vw,16px); grid-template-columns:repeat(5,minmax(max-content,1fr)); gap:var(--hud-skill-gap); }
.hud-adventure .hud-skill { display:grid; grid-template-rows:repeat(3,var(--hud-line)) 5px; gap:3px; padding:0; }
.hud-adventure .hud-skill-level { gap:7px; }
.hud-adventure .hud-skill-level strong { font-size:calc(var(--ui-font-hud) + 2px); color:#d7d9b6; }
.hud-adventure .hud-skill-level .icon { width:15px; height:15px; color:#b5b88e; }
.hud-adventure .hud-skill-name { font-size:var(--ui-font-hud); color:#d3c9a8; }
.hud-adventure .hud-skill-xp { font-size:var(--ui-font-hud); line-height:1.4; color:#e1d7b9; }
.hud-adventure .hud-skill-xp > span { color:#b5ae96; }
.hud-adventure .hud-skill .progress { height:5px; margin:0; }
.hud-adventure .hud-professions,.hud-adventure .hud-party { position:relative; align-self:stretch; }
.hud-adventure .hud-professions::before,.hud-adventure .hud-party::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--hud-divider); pointer-events:none;
}
.hud-adventure .hud-resources,.hud-adventure .hud-bar,.hud-adventure .hud-skill { position:relative; }
.hud-adventure .hud-resources::before,.hud-adventure .hud-bar + .hud-bar::before,.hud-adventure .hud-skill + .hud-skill::before {
  content:""; position:absolute; top:3px; bottom:3px; width:1px; background:var(--hud-divider); pointer-events:none;
}
.hud-adventure .hud-resources::before { left:calc(var(--hud-inner-gap) / -2); }
.hud-adventure .hud-bar + .hud-bar::before { left:-7px; }
.hud-adventure .hud-skill + .hud-skill::before { left:calc(var(--hud-skill-gap) / -2); }

/* A fixed-size frame changes at milestones; the actual level remains visible. */
.hud-adventure .hud-level-badge {
  --level-metal:#b9b49f; --level-low:#656458; --level-high:#e0deca; --level-inlay:#292a24;
  position:relative; isolation:isolate; width:72px; height:62px; flex:0 0 72px; text-align:center;
}
.hud-adventure .hud-level-badge::before,.hud-adventure .hud-level-badge::after {
  content:""; position:absolute;
  clip-path:polygon(12% 0,88% 0,100% 14%,100% 82%,84% 100%,16% 100%,0 82%,0 14%);
}
.hud-adventure .hud-level-badge::before {
  inset:1px 2px; background:linear-gradient(135deg,var(--level-low),var(--level-high) 30%,var(--level-metal) 50%,var(--level-low) 75%,var(--level-metal));
}
.hud-adventure .hud-level-badge::after { inset:3px 4px; background:linear-gradient(145deg,var(--level-inlay),#211f1a); }
.hud-adventure .hud-identity .hud-level-number {
  position:absolute; z-index:1; top:23px; left:0; width:100%; max-width:none; overflow:visible;
  font:400 22px/24px var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-.4px; color:#ede3c9;
}
.hud-adventure .hud-level-label {
  position:absolute; z-index:1; top:9px; left:0; width:100%;
  font:400 9px/1.35 var(--sans); letter-spacing:1.6px; color:var(--level-high);
}
.hud-adventure .hud-level-marks { position:absolute; z-index:1; left:0; right:0; bottom:8px; display:flex; align-items:center; justify-content:center; gap:5px; }
.hud-adventure .hud-level-marks i { display:block; width:3px; height:3px; background:var(--level-metal); transform:rotate(45deg); }
.hud-adventure .hud-level-crown { display:none; position:absolute; z-index:1; top:7px; left:28px; width:16px; height:14px; color:var(--level-high); }
.hud-adventure .hud-level-badge[data-tier="iron"] { --level-metal:#8e9184; --level-low:#50564b; --level-high:#b6b9a8; }
.hud-adventure .hud-level-badge[data-tier="iron"]::after { inset:2px 3px; }
.hud-adventure .hud-level-badge[data-tier="iron"] .hud-level-marks { display:none; }
.hud-adventure .hud-level-badge[data-tier="bronze"] { --level-metal:#b78e5f; --level-low:#6c4c30; --level-high:#dcba88; --level-inlay:#352b22; }
.hud-adventure .hud-level-badge[data-tier="bronze"] .hud-level-marks i:nth-child(n+2),
.hud-adventure .hud-level-badge[data-tier="silver"] .hud-level-marks i:nth-child(3) { display:none; }
.hud-adventure .hud-level-badge[data-tier="silver"]::after { box-shadow:inset 0 0 0 1px var(--level-low),inset 0 0 0 3px #24251f; }
.hud-adventure .hud-level-badge[data-tier="gold"] { --level-metal:#c5aa60; --level-low:#78612f; --level-high:#eddda0; --level-inlay:#393221; }
.hud-adventure .hud-level-badge[data-tier="gold"]::after,.hud-adventure .hud-level-badge[data-tier="royal"]::after {
  inset:4px 5px; box-shadow:inset 0 0 0 1px var(--level-low),inset 0 0 0 3px #24221a;
}
.hud-adventure .hud-level-badge[data-tier="gold"] .hud-level-number { font-size:20px; }
.hud-adventure .hud-level-badge[data-tier="royal"] { --level-metal:#d2b86c; --level-low:#88713c; --level-high:#f4e6b3; --level-inlay:#472c27; }
.hud-adventure .hud-level-badge[data-tier="royal"] .hud-level-number { font-size:18px; }
.hud-adventure .hud-level-badge[data-tier="royal"] .hud-level-label { display:none; }
.hud-adventure .hud-level-badge[data-tier="royal"] .hud-level-crown { display:block; }
@media (min-width:1024px) and (max-width:1399px) {
  .hud.hud-adventure { --hud-space:20px; --hud-inner-gap:14px; --hud-character-width:340px; padding-inline:8px; }
  .hud-adventure .hud-professions { flex-basis:calc(260px + 2 * var(--hud-space)); }
}
@media (max-width:1199px) {
  .hud.hud-adventure { min-height:calc(8 * var(--ui-font-hud) + 116px); }
  .hud-adventure .hud-character { flex-grow:1; }
  .hud-adventure .hud-party { grid-column:1 / -1; grid-row:2; flex-basis:100%; padding:14px 0 0; }
  .hud-adventure .hud-party::before { width:100%; height:1px; bottom:auto; }
}
@media (max-width:780px) {
  .hud.hud-adventure { --hud-inner-gap:14px; display:grid; grid-template-columns:minmax(0,1fr); min-height:0; height:auto; padding:14px; margin-bottom:14px; gap:20px; }
  .hud-adventure .hud-character { min-width:0; padding-right:0; }
  .hud-adventure .hud-character-heading { flex-wrap:wrap; }
  .hud-adventure .hud-identity { flex:0 1 auto; min-width:0; }
  .hud-adventure .hud-identity .hud-name { min-width:0; }
  .hud-adventure .hud-identity .hud-name strong,.hud-adventure .hud-name > .guild-tag { white-space:normal; overflow-wrap:anywhere; }
  .hud-adventure .hud-professions { grid-column:1; grid-row:2; min-width:0; padding:14px 0 0; }
  .hud-adventure .hud-professions::before { width:100%; height:1px; bottom:auto; }
  .hud-adventure .hud-party { grid-column:1; grid-row:3; }
  .hud-adventure .hud-party-roster { width:100%; grid-template-columns:calc(6ch + 2.4em) minmax(0,1fr) max-content; }
  .hud-adventure .hud-party-name { white-space:normal; overflow-wrap:anywhere; }
}
@media (max-width:430px) {
  .hud-adventure .hud-skill-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .hud-adventure .hud-party-roster { grid-template-rows:repeat(4,minmax(var(--hud-line),auto)); }
  .hud-adventure .hud-skill:nth-child(4)::before { display:none; }
}
.journal-entries > .journal-entry-clipped { visibility:hidden; }

/* Compact messages share one timeline; color identifies the event category. */
#journal-entries { justify-content:flex-start; }
#journal-entries .journal-entry { flex-shrink:0; }
#journal-entries .journal-entry > span { color:#c6bba6; min-width:0; overflow-wrap:anywhere; }
#journal-entries .journal-entry.highlight > span { color:#e5cb78; }
#journal-entries .journal-entry.rare > span { color:#e5cb78; }
#journal-entries .journal-entry.world > span { color:#97c6cc; }
#journal-entries .journal-entry.level > span,
#journal-entries .journal-entry.quest > span { color:#a8d2eb; }
#journal-entries .journal-entry.loot > span,
#journal-entries .journal-entry.heal > span { color:#b7caa0; }
#journal-entries .journal-entry.combat > span,
#journal-entries .journal-entry.profession > span { color:#999a96; }
#journal-entries .journal-entry.error > span { color:#e2a190; }
#journal-entries .journal-entry.success > span { color:#b7caa0; }
#journal-entries .journal-entry.group > span { color:#58c7e8; }
#journal-entries .journal-entry.system > span { color:#c6c8c7; }
#journal-entries .journal-entry strong { color:inherit; font-weight:600; }
#journal-entries .journal-entry .event-item { color:var(--item-color,inherit); font-weight:700; }
#journal-entries .journal-entry button.event-item { display:inline; margin:0; padding:0; border:0; border-radius:2px; background:none; box-shadow:none; font:inherit; font-weight:700; line-height:inherit; text-align:inherit; vertical-align:baseline; white-space:normal; cursor:pointer; }
#journal-entries .journal-entry button.event-item:hover { filter:brightness(1.15); }
#journal-entries .journal-entry button.event-item:focus-visible { outline:1px solid currentColor; outline-offset:2px; }

/* Use the same channel color for received messages and the current composer. */
[data-channel="world"] { --chat-color:#F2B84B; }
[data-channel="party"] { --chat-color:#58C7E8; }
[data-channel="field"] { --chat-color:#D7DCE2; }
[data-channel="guild"] { --chat-color:#5FD36D; }
#chat-entries .journal-entry > span,
#chat-entries .journal-entry b,
#chat-entries .channel-label { color:var(--chat-color); }
#chat-entries .channel-label { border-color:color-mix(in srgb, var(--chat-color) 45%, transparent); }
#chat-form select,#chat-form input,#chat-form option { color:var(--chat-color); }
#chat-form select { border-color:color-mix(in srgb, var(--chat-color) 55%, transparent); }
#chat-form .icon-btn { color:var(--chat-color); background:color-mix(in srgb, var(--chat-color) 12%, #302a20); border:1px solid color-mix(in srgb, var(--chat-color) 45%, transparent); }

.atlas-page { height:100%; min-height:0; }
.atlas-panel { display:flex; flex-direction:column; gap:8px; height:100%; min-height:0; padding:12px 14px; background:#302c24; border:1px solid #554b39; }
.atlas-header,.atlas-detail { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.atlas-header-controls { display:flex; align-items:center; gap:12px; }
.atlas-zoom { min-width:44px; color:#b8ad91; font-size:11px; text-align:right; white-space:nowrap; }
.atlas-header .eyebrow { color:#a99b78; font-size:9px; letter-spacing:1.5px; }
.atlas-header h2 { margin:3px 0 0; color:#e2d4b6; font:normal 25px var(--serif); }
.atlas-region-switch { display:flex; gap:4px; padding:3px; border:1px solid #625742; border-radius:6px; background:#29261f; }
.atlas-region-switch button { border:0; border-radius:4px; padding:7px 13px; background:transparent; color:#bdb092; cursor:pointer; font-size:12px; }
.atlas-region-switch button.active { background:#686f4c; color:#fff8e8; }
.atlas-region-switch button:not(.active):hover { background:#454031; }
.atlas-scroll { flex:1; min-height:0; overflow:auto; display:flex; align-items:safe center; justify-content:safe center; padding:4px; background:#171610; border:1px solid #514834; border-radius:5px; scrollbar-width:thin; container-type:size; contain-intrinsic-height:420px; }
.atlas-scroll.is-pannable { cursor:grab; }
.atlas-scroll.is-dragging { cursor:grabbing; user-select:none; }
.atlas-grid { --atlas-base-size:clamp(10px,min(calc((100cqw - 16px) / var(--atlas-columns,32) - 1px),calc((100cqh - 16px) / var(--atlas-rows,14) - 1px)),31px); --atlas-size:calc(var(--atlas-base-size) * var(--atlas-zoom,1)); display:grid; gap:1px; width:max-content; margin:auto; padding:3px; background:#000; box-shadow:0 10px 28px #0007; }
.atlas-cave .atlas-grid { --atlas-base-size:clamp(50px,5vw,72px); }
.atlas-tile { position:relative; display:block; width:var(--atlas-size); height:var(--atlas-size); overflow:hidden; padding:0; border:0; border-radius:0; background:#000; cursor:pointer; }
.atlas-tile.atlas-void,.atlas-tile.atlas-blocked { cursor:default; }
.atlas-tile img { display:block; width:100%; height:100%; object-fit:cover; filter:none; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.atlas-tile.selected { outline:2px solid #ead398; outline-offset:-2px; z-index:2; }
.atlas-tile.walkable:hover { outline:2px solid #fff1b8; outline-offset:-2px; z-index:3; }
.atlas-tile:focus-visible { outline:2px solid #fff1b8; outline-offset:-2px; z-index:3; }
.atlas-player { position:absolute; inset:23%; display:grid; place-items:center; border:1px solid #775f32; border-radius:50%; background:#f3e7bf; color:#30402b; font:700 12px var(--serif); box-shadow:0 0 0 2px #fff4c65c; }
.atlas-hunt { position:absolute; right:1px; top:0; color:#ffeaa4; font-weight:800; text-shadow:0 1px 3px #000; }
.atlas-detail { min-height:57px; padding-top:10px; border-top:1px solid #514936; }
.atlas-detail > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; min-width:0; }
.atlas-detail > div > span { color:#a99c7c; font-size:11px; }
.atlas-detail strong { color:#e1d1ae; font-size:15px; }
.atlas-detail small { flex-basis:100%; color:#b8ad96; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.atlas-location { display:flex; align-items:center; gap:5px; flex-shrink:0; color:#b8bb92; font-size:12px; white-space:nowrap; }
.atlas-location .icon { width:14px; height:14px; }
@media (max-width:780px) { .atlas-header,.atlas-detail { align-items:flex-start; flex-direction:column; } .atlas-scroll { justify-content:flex-start; } .atlas-detail small { white-space:normal; } }

/* Containers keep their contents and actions visible in compact inventories. */
.pack-container-actions { display:flex; justify-content:flex-end; gap:6px; flex:none; }
.container-summary,.pack-item .container-summary { color:#b3bf95; font-size:inherit; white-space:nowrap; }
.container-summary.is-empty,.pack-item .container-summary.is-empty { color:#efb0a2; }
.container-contents { margin-top:12px; padding-top:10px; border-top:1px solid #6b604850; }
.container-content-title { display:block; margin-bottom:7px; color:#a99d82; font:500 10px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.container-contents ul { display:grid; gap:5px; padding:0; margin:0; list-style:none; }
.container-contents li { display:flex; align-items:baseline; gap:7px; font:400 12px/1.5 var(--sans); }
.container-content-quantity { color:#b1a991; white-space:nowrap; flex:none; }
.container-contents li > span:last-child { min-width:0; overflow-wrap:anywhere; }
.container-contents > p { margin:0; color:#b1a991; font-size:12px; }