/* ============================================================
   Emberfall Idle - core stylesheet
   Palette: deep navy / charcoal panels, bronze borders,
   gold headings, cream body copy, emerald selection.
   ============================================================ */

:root{
  /* Surfaces */
  --bg-void:      #070b12;
  --bg-deep:      #0b1120;
  --bg-panel:     #111a2b;
  --bg-panel-2:   #162034;
  --bg-inset:     #0c1322;
  --bg-slot:      #131d2f;
  --bg-slot-hi:   #1b2740;

  /* Bronze structure */
  --bronze-dim:   #4a3b24;
  --bronze:       #6d5533;
  --bronze-lit:   #8f7141;
  --bronze-glow:  #b18f52;

  /* Type */
  --gold:         #e8c37a;
  --gold-bright:  #f6dfa6;
  --gold-deep:    #c39a54;
  --cream:        #e7e0d0;
  --cream-dim:    #b3ab9a;
  --cream-faint:  #7d7768;

  /* Accents */
  --focus:        #8fd4ff;
  --emerald:      #3ddc84;
  --emerald-deep: #1f8f52;
  --emerald-wash: rgba(61,220,132,.13);
  --blood:        #d8402f;
  --blood-deep:   #8e2318;
  --azure:        #4aa3d8;
  --violet:       #a55bd8;
  --amber:        #e0a33e;

  /* Rarity */
  --r-common:     #8d97a3;
  --r-uncommon:   #4caf7d;
  --r-rare:       #4a90d9;
  --r-epic:       #a55bd8;
  --r-legendary:  #e0a33e;

  /* Metrics */
  --topbar-h:     56px;
  --statusbar-h:  32px;
  --rad:          4px;
  --rad-lg:       6px;

  --font-head: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  --shadow-panel: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.035);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #14203a 0%, transparent 60%),
    var(--bg-void);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; margin:0; color:var(--gold); letter-spacing:.02em; }

button{ font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; cursor:pointer; }
button:disabled{ cursor:not-allowed; }

/* ============================================================
   KEYBOARD
   ------------------------------------------------------------
   One ring, in a colour used for nothing else. The palette
   already spends emerald on "this is selected" and gold on
   "this is a heading", so a focus ring in either would be a
   third meaning for a colour that has two - azure is the one
   surface colour in the game that never means anything else.

   :focus-visible rather than :focus, so a click leaves no ring
   behind and a Tab always does. The offset puts it outside the
   bronze borders instead of on top of them, which on a 1px
   border at this contrast is the difference between a ring and
   a slightly different border.
   ============================================================ */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
/* Tiles are packed two pixels apart, so an outside ring on one
   is drawn under its neighbours. These wear it on the inside. */
.inv-slot:focus-visible,
.slot:focus-visible,
.pick:focus-visible,
.nav-item:focus-visible{ outline-offset:-2px; }

/* Present for a screen reader, absent for everyone else. Not
   display:none, which removes it from both. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* Off the top of the screen until it is tabbed to, which is the
   only time it is any use. */
.skip-link{
  position:fixed; top:0; left:50%; transform:translate(-50%,-120%);
  z-index:300;
  padding:9px 18px;
  background:var(--bg-panel-2); color:var(--gold-bright);
  border:1px solid var(--bronze-lit); border-top:none;
  border-radius:0 0 var(--rad) var(--rad);
  font-family:var(--font-head); font-size:13px; text-decoration:none;
  transition:transform .14s ease;
}
.skip-link:focus{ transform:translate(-50%,0); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--bg-void); }
::-webkit-scrollbar-thumb{ background:#2b3550; border:2px solid var(--bg-void); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--bronze); }

/* Pixel-art crispness for every generated sprite */
.px, .ui-icon img, .sprite img, canvas.px-canvas{
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ============================================================
   APP GRID
   ============================================================ */
.app{
  display:grid;
  grid-template-columns: minmax(190px, 18%) minmax(0, 54%) minmax(300px, 28%);
  grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
  grid-template-areas:
    "top top top"
    "side work rail"
    "status status status";
  height:100vh;
  height:100dvh;
  gap:0;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  grid-area:top;
  display:flex; align-items:center; gap:12px;
  padding:0 14px;
  background:
    linear-gradient(180deg, #16233c 0%, #0d1526 100%);
  border-bottom:1px solid var(--bronze);
  box-shadow:0 2px 12px rgba(0,0,0,.6);
  position:relative; z-index:40;
  min-width:0;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(177,143,82,.35), transparent);
  pointer-events:none;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-crest{ width:30px; height:30px; }
.brand-title{
  font-size:22px; line-height:1;
  background:linear-gradient(180deg,#f7e3b4 0%, #d9ae62 55%, #a9793a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  white-space:nowrap;
}
.topbar-spacer{ flex:1 1 auto; }

.currency-group{ display:flex; gap:8px; }
.currency{
  display:flex; align-items:center; gap:7px;
  padding:5px 12px 5px 8px;
  background:linear-gradient(180deg, #1b2740, #121b2d);
  border:1px solid var(--bronze); border-radius:999px;
  cursor:default;
}
.currency-val{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--gold-bright); font-size:14px; }
#currGems .currency-val{ color:#9fd8ff; }

.icon-btn{
  width:40px; height:34px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, #1b2740, #121b2d);
  border:1px solid var(--bronze); border-radius:var(--rad);
  position:relative; transition:border-color .12s, background .12s;
}
.icon-btn:hover{ border-color:var(--bronze-glow); background:linear-gradient(180deg,#22314f,#151f34); }
.icon-btn.is-locked{ opacity:.62; }
.icon-btn.is-locked::after{
  content:""; position:absolute; right:3px; bottom:3px;
  width:6px; height:6px; border-radius:50%;
  background:var(--bronze-lit); box-shadow:0 0 0 1px rgba(0,0,0,.6);
}

.avatar-btn{ position:relative; width:38px; height:38px; padding:0; }
.avatar-frame{
  display:block; width:38px; height:38px;
  border:1px solid var(--bronze-lit); border-radius:var(--rad);
  background:var(--bg-inset); overflow:hidden;
}
.avatar-frame img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.online-pip{
  position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--emerald); border:2px solid #0d1526;
}

.nav-toggle{ display:none; width:34px; height:30px; flex-direction:column; justify-content:center; gap:4px; padding:0 6px; }
.nav-toggle span{ display:block; height:2px; background:var(--gold); border-radius:1px; }

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.sidebar{
  grid-area:side;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #101a2c 0%, #0b1320 100%);
  border-right:1px solid var(--bronze);
  min-height:0;
}
.player-card{
  display:flex; gap:10px; padding:10px;
  border-bottom:1px solid var(--bronze-dim);
  background:linear-gradient(180deg, rgba(35,50,80,.5), transparent);
  cursor:pointer;
}
.player-card:hover{ background:linear-gradient(180deg, rgba(45,64,102,.6), transparent); }
.player-card:hover .player-portrait{ border-color:var(--gold-deep); }
.player-portrait{
  width:64px; height:64px; flex:0 0 64px;
  border:2px solid var(--bronze-lit); border-radius:var(--rad);
  background:var(--bg-inset); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.5);
}
.player-portrait img{ width:100%; height:100%; image-rendering:pixelated; }
.player-meta{ min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.player-name{ font-family:var(--font-head); font-size:16px; color:var(--gold); line-height:1.1; }
.player-sub{ font-size:11px; color:var(--cream-dim); }
.dot-sep{ color:var(--bronze-lit); }
.player-xp{ font-size:10px; color:var(--cream-faint); font-variant-numeric:tabular-nums; }

.nav-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 8px 16px; min-height:0; }
.nav-group + .nav-group{ margin-top:12px; }
.nav-heading{
  font-family:var(--font-head); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-glow); padding:4px 6px 6px;
}
.nav-items{ display:flex; flex-direction:column; gap:2px; }

.nav-item{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:6px 8px; text-align:left;
  border:1px solid transparent; border-radius:var(--rad);
  color:var(--cream); font-size:13px;
  transition:background .12s, border-color .12s, color .12s;
}
.nav-item:hover{ background:rgba(255,255,255,.045); border-color:var(--bronze-dim); }
.nav-item.is-active{
  background:var(--emerald-wash);
  border-color:var(--emerald);
  color:#eafff2;
  box-shadow:inset 0 0 12px rgba(61,220,132,.09);
}
.nav-item .ui-icon{ flex:0 0 22px; }
.nav-item .nav-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item .nav-lvl{ font-size:11px; color:var(--cream-dim); font-variant-numeric:tabular-nums; }
.nav-item.is-active .nav-lvl{ color:#bff0d4; }
.nav-item.is-locked{ opacity:.5; }
.nav-item.is-locked .nav-lvl{ color:var(--bronze-lit); }
.nav-item.is-busy .nav-label::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%;
  background:var(--emerald); box-shadow:0 0 6px var(--emerald);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* ============================================================
   WORKSPACE
   ============================================================ */
.workspace{
  grid-area:work;
  min-width:0;
  overflow-y:auto; overflow-x:hidden;
  padding:12px 14px 20px;
  min-height:0;
  background:
    radial-gradient(900px 500px at 30% 0%, rgba(30,48,84,.35), transparent 70%);
}
/* A click in the page focuses the column, and a ring round the
   whole of it every time somebody clicks a row is noise - hence
   the `none`. But the skip link lands here, and a landing with
   nothing to show for it is a skip link that appears to have
   done nothing. A programmatic focus on a tabindex="-1"
   container is not :focus-visible in any browser, so the one
   case that wants the ring asks for it by name. */
.workspace:focus{ outline:none; }
.workspace.is-landed:focus{ outline:2px solid var(--focus); outline-offset:-3px; }

.view-head{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.view-head .ui-icon{ flex:0 0 30px; }
.view-title{ font-size:24px; line-height:1; }
.breadcrumb{ font-size:12px; color:var(--cream-faint); padding-top:5px; }
.breadcrumb b{ color:var(--cream-dim); font-weight:500; }
.view-head-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Tabs */
.tabs{ display:flex; gap:6px; margin-bottom:11px; }
.tab{
  padding:8px 22px;
  background:linear-gradient(180deg,#182338,#111a2b);
  border:1px solid var(--bronze); border-bottom-color:var(--bronze-dim);
  border-radius:var(--rad) var(--rad) 0 0;
  color:var(--cream-dim); font-size:13px; font-weight:500;
  transition:.12s;
}
.tab:hover{ color:var(--cream); border-color:var(--bronze-lit); }
.tab.is-active{
  background:var(--emerald-wash);
  border-color:var(--emerald);
  color:#eafff2;
  box-shadow:inset 0 -2px 0 var(--emerald-deep);
}

/* ============================================================
   RIGHT RAIL
   ============================================================ */
.rail{
  grid-area:rail;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #101a2c 0%, #0b1320 100%);
  border-left:1px solid var(--bronze);
  min-height:0;
}
.rail-tabs{
  display:none; gap:5px;
  padding:7px 8px 0;
  border-bottom:1px solid var(--bronze-dim);
}
.rail-tab{
  flex:1; padding:6px 8px;
  background:linear-gradient(180deg,#182338,#111a2b);
  border:1px solid var(--bronze); border-bottom:none;
  border-radius:var(--rad) var(--rad) 0 0;
  color:var(--cream-dim); font-size:12px;
}
.rail-tab.is-active{ background:var(--emerald-wash); border-color:var(--emerald); color:#eafff2; }
.rail-scroll{
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:8px 8px 16px;
}
.rail-panel{ margin-top:0; }
.rail-panel + .rail-panel{ margin-top:10px; }

/* The contextual panel is a bare wrapper holding whatever the
   open view handed over - usually two or three real panels -
   so it spaces its children rather than being spaced itself. */
#railFight > .panel + .panel{ margin-top:10px; }

/* The rail is a narrow column, and the panels a view hands it
   were written for a wider one. */
.rail .loot-grid{ grid-template-columns:repeat(auto-fill, minmax(66px,1fr)); gap:5px; }
.rail .loot-name{ font-size:10px; }
.rail .log{ max-height:220px; }
.rail .pick-sub{ font-size:10.5px; }
.rail .panel-body{ padding:9px 10px; }

/* ============================================================
   PANELS
   ============================================================ */
.panel{
  background:linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  border:1px solid var(--bronze);
  border-radius:var(--rad-lg);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}
.panel + .panel{ margin-top:10px; }
.panel-head{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  background:linear-gradient(180deg, rgba(45,63,100,.5), rgba(20,30,50,.25));
  border-bottom:1px solid var(--bronze-dim);
}
.panel-head h2{ font-size:14px; letter-spacing:.03em; white-space:nowrap; }
.panel-head{ min-width:0; }
.panel-head .panel-count{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-head h3{ font-size:13px; }
.panel-count{ font-size:11px; color:var(--cream-faint); font-variant-numeric:tabular-nums; }
.panel-body{ padding:10px; }
.panel-body.tight{ padding:7px; }
.link-btn{
  margin-left:auto; font-size:11px; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:4px;
}
.link-btn:hover{ color:var(--gold-bright); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.grid-2.uneven{ grid-template-columns:minmax(0,4fr) minmax(0,5fr); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px;
  background:linear-gradient(180deg, #23304c, #16203a);
  border:1px solid var(--bronze); border-radius:var(--rad);
  color:var(--cream); font-weight:600; font-size:13px;
  transition:.12s; white-space:nowrap;
}
.btn:hover:not(:disabled){ border-color:var(--bronze-glow); background:linear-gradient(180deg,#2b3a5c,#1b2745); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.42; }
.btn-gold{
  background:linear-gradient(180deg, #7a5f2f, #4e3a18);
  border-color:var(--bronze-glow); color:var(--gold-bright);
}
.btn-gold:hover:not(:disabled){ background:linear-gradient(180deg, #94743a, #5e4720); }
.btn-emerald{
  background:linear-gradient(180deg, #1e6f45, #124a2d);
  border-color:var(--emerald-deep); color:#d6ffe8;
}
.btn-emerald:hover:not(:disabled){ background:linear-gradient(180deg, #268a55, #16603a); }
.btn-danger{ background:linear-gradient(180deg,#7a2a20,#4a170f); border-color:#a03a2a; color:#ffd9d2; }
.btn-sm{ padding:5px 11px; font-size:12px; font-weight:500; }
.btn-block{ width:100%; }

.seg{ display:inline-flex; border:1px solid var(--bronze); border-radius:var(--rad); overflow:hidden; }
.seg button{
  padding:5px 12px; font-size:12px; color:var(--cream-dim);
  background:linear-gradient(180deg,#182338,#111a2b);
}
.seg button + button{ border-left:1px solid var(--bronze-dim); }
.seg button.is-active{ background:var(--emerald-wash); color:#eafff2; }
.seg button:hover:not(.is-active){ background:rgba(255,255,255,.05); color:var(--cream); }

/* Toggle switch */
.toggle{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.toggle-track{
  width:42px; height:22px; border-radius:999px;
  background:#262f42;
  border:1px solid var(--bronze-dim); position:relative; transition:.16s;
}
.toggle-knob{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#8a94a6; transition:.16s;
}
.toggle.is-on .toggle-track{ background:rgba(31,143,82,.55); border-color:var(--emerald-deep); }
.toggle.is-on .toggle-knob{ left:22px; background:var(--emerald); box-shadow:0 0 8px rgba(61,220,132,.7); }
.toggle-label{ font-size:12px; font-weight:600; color:var(--cream-dim); }
.toggle.is-on .toggle-label{ color:#bff0d4; }

/* ============================================================
   BARS
   ============================================================ */
.bar{
  position:relative; height:9px; width:100%;
  background:var(--bg-inset);
  border:1px solid var(--bronze-dim); border-radius:2px;
  overflow:hidden;
}
.bar-fill{
  height:100%; width:0%;
  background:linear-gradient(180deg, #55e79a, #24a862);
  box-shadow:0 0 8px rgba(61,220,132,.35);
  transition:width .12s linear;
}
.bar-xp .bar-fill{ background:linear-gradient(180deg,#6fd08f,#2f9a5c); }
.bar-hp .bar-fill{ background:linear-gradient(180deg,#e8584a,#a32418); box-shadow:0 0 8px rgba(216,64,47,.4); }
.bar-hp.low .bar-fill{ animation:hpwarn .9s ease-in-out infinite; }
.bar-mast .bar-fill{ background:linear-gradient(180deg,#f0d089,#b8842f); box-shadow:0 0 8px rgba(214,168,80,.35); }
@keyframes hpwarn{ 0%,100%{filter:none} 50%{filter:brightness(1.5)} }
.bar-lg{ height:14px; border-radius:3px; }
.bar-label{
  position:absolute; inset:0; display:grid; place-items:center;
  /* Centring aligns the *line box*, and the lower half of that
     box is descender space no digit ever occupies - so numerals
     read low, and in an 11px health plate they sit on the
     bottom border. Trimming the box to cap height and baseline
     centres what is actually drawn; the padding is the same
     correction by hand for engines without the trim. */
  line-height:1; padding-bottom:.15em;
  font-size:10px; font-weight:700; font-variant-numeric:tabular-nums;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9); letter-spacing:.02em;
}
@supports (text-box: trim-both cap alphabetic){
  .bar-label{ text-box: trim-both cap alphabetic; padding-bottom:0; }
}

/* ============================================================
   COMBAT SCENE
   ============================================================ */
.scene-panel{ padding:0; position:relative; }
.scene{
  position:relative; width:100%;
  aspect-ratio: 16 / 8.2;
  min-height:200px;
  overflow:hidden;
  background:#0a1018;
  border-bottom:1px solid var(--bronze-dim);
}
.scene canvas{
  position:absolute; inset:0; width:100%; height:100%;
  image-rendering:pixelated;
}
.scene-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(4,8,14,.55) 100%);
}

.actor{
  position:absolute; bottom:14%;
  transform-origin:bottom center;
  will-change:transform;
}
.actor img{ display:block; image-rendering:pixelated; }
.actor-player{ left:9%; }
.actor-enemy{ right:9%; }
.actor-enemy img{ transform:scaleX(-1); }

.actor-player.anim-attack{ animation:lunge .42s cubic-bezier(.3,1.4,.5,1); }
@keyframes lunge{
  0%{ transform:translateX(0) }
  35%{ transform:translateX(26px) skewX(-5deg) }
  100%{ transform:translateX(0) }
}
.actor-enemy.anim-attack{ animation:lungeL .42s cubic-bezier(.3,1.4,.5,1); }
@keyframes lungeL{
  0%{ transform:translateX(0) }
  35%{ transform:translateX(-24px) }
  100%{ transform:translateX(0) }
}
.actor.anim-hurt img{ animation:hurt .28s steps(2) 2; }
@keyframes hurt{ 0%{ filter:none } 50%{ filter:brightness(2.4) saturate(.2) } 100%{ filter:none } }
.actor.anim-die{ animation:die .55s ease-in forwards; }
@keyframes die{ to{ transform:translateY(10px) rotate(14deg); opacity:0 } }
.actor.anim-spawn{ animation:spawn .35s ease-out; }
@keyframes spawn{ from{ opacity:0; transform:translateY(-8px) } }
.actor-idle{ animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }

.nameplate{
  position:absolute; bottom:4px; width:31%;
  text-align:center;
}
.nameplate.left{ left:4%; }
.nameplate.right{ right:4%; }
.nameplate-name{
  font-family:var(--font-head); font-size:13px; color:var(--gold-bright);
  text-shadow:0 2px 3px rgba(0,0,0,.95); margin-bottom:3px;
}
.nameplate .bar{ height:13px; border-color:#000; background:#1a0a08; }

.dmg{
  position:absolute; font-family:var(--font-head); font-weight:700; font-size:22px;
  text-shadow:0 2px 0 rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  pointer-events:none; animation:floatUp 1.05s ease-out forwards;
  z-index:5;
}
.dmg.dmg-enemy{ color:#ff6a58; }
.dmg.dmg-player{ color:#ffd166; }
.dmg.dmg-heal{ color:#6ff0a2; font-size:18px; }
.dmg.dmg-miss{ color:#9fb0c6; font-size:16px; }
/* A critical is the one number in a fight worth looking up for. */
.dmg.dmg-crit{
  color:#ffe6a8; font-size:30px;
  text-shadow:0 2px 0 rgba(0,0,0,.9), 0 0 14px rgba(255,190,90,.85);
  animation:floatUp 1.25s ease-out forwards, critPop .22s ease-out;
}
@keyframes critPop{ from{ transform:scale(.55) } to{ transform:scale(1) } }
@keyframes floatUp{
  0%{ opacity:0; transform:translateY(6px) scale(.7) }
  18%{ opacity:1; transform:translateY(-2px) scale(1.12) }
  40%{ transform:translateY(-12px) scale(1) }
  100%{ opacity:0; transform:translateY(-42px) scale(.95) }
}

/* Active-activity panel */
.active-strip{ display:flex; align-items:center; gap:14px; padding:10px 12px; flex-wrap:wrap; }
.active-info{ flex:1 1 260px; min-width:220px; }
.active-title{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:16px; color:var(--gold); margin-bottom:7px;
}
.active-title em{ color:var(--cream); font-style:normal; }
.active-bar-row{ display:flex; align-items:center; gap:10px; }
.active-bar-row .bar{ flex:1; height:12px; }
.next-tick{ font-size:12px; color:var(--cream-dim); white-space:nowrap; }
.next-tick b{ color:var(--emerald); font-variant-numeric:tabular-nums; }
.active-controls{ display:flex; align-items:center; gap:10px; margin-left:auto; }

/* Rate stats */
.rate-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.rate-card{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:linear-gradient(180deg,#16203a,#0e1626);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.rate-card .ui-icon{ flex:0 0 26px; }
.rate-label{ font-size:11px; color:var(--cream-faint); line-height:1.2; }
.rate-val{ font-size:17px; font-weight:700; color:var(--gold-bright); font-variant-numeric:tabular-nums; line-height:1.15; }

/* ============================================================
   SELECT LISTS (enemies / resources / recipes)
   ============================================================ */
.pick-list{ display:flex; flex-direction:column; gap:5px; max-height:340px; overflow-y:auto; padding-right:2px; }
.pick{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:7px 9px; text-align:left;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  transition:.12s;
}
.pick:hover:not(.is-locked){ border-color:var(--bronze-glow); background:linear-gradient(180deg,#1d2a48,#141f36); }
.pick.is-active{ border-color:var(--emerald); background:var(--emerald-wash); box-shadow:inset 0 0 14px rgba(61,220,132,.1); }
.pick.is-locked{ opacity:.5; cursor:not-allowed; }
.pick-art{
  flex:0 0 40px; height:40px; display:grid; place-items:center;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
  overflow:hidden;
}
.pick-art img{ image-rendering:pixelated; }
.pick-main{ flex:1; min-width:0; display:block; }
.pick-name{ display:block; font-family:var(--font-head); font-size:14px; color:var(--cream); line-height:1.2; }
.pick.is-active .pick-name{ color:#eafff2; }
.pick-sub{ display:block; font-size:11px; color:var(--cream-faint); }
.pick-sub .lvl{ color:var(--cream-dim); }
/* Mastery strip: a hairline under each row, so the list itself
   shows where the hours have gone without another column. */
.pick-mast{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.pick-mast-bar{
  flex:1; height:3px; border-radius:2px; overflow:hidden;
  background:var(--bg-inset); border:1px solid var(--bronze-dim);
}
.pick-mast-bar i{ display:block; height:100%; background:linear-gradient(90deg,#8a6520,#e6c076); }
.pick-mast-rank{ flex:none; font-size:9.5px; letter-spacing:.04em; color:var(--cream-faint); font-variant-numeric:tabular-nums; }
.pick-mast.is-max .pick-mast-bar i{ background:linear-gradient(90deg,#e6c076,#fff0c4); }
.pick-mast.is-max .pick-mast-rank{ color:var(--gold-bright); }
.pick-right{ display:block; flex:none; text-align:right; font-size:11px; color:var(--cream-dim); white-space:nowrap; }
.pick-right .big{ display:block; font-size:13px; font-weight:600; color:var(--gold); }
.req-bad{ color:#e08070; }

/* Loot preview */
.loot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:7px; }
.loot-card{
  padding:8px 5px 6px; text-align:center;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.loot-card .sprite{ display:grid; place-items:center; height:34px; }
.loot-name{ font-size:10.5px; color:var(--cream-dim); margin-top:3px; line-height:1.25; }
.loot-qty{ font-size:11px; font-weight:700; color:var(--gold); }
.loot-chance{ font-size:9.5px; color:var(--cream-faint); }

/* Combat log */
.log{
  height:118px; overflow-y:auto;
  background:var(--bg-inset);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  padding:6px 8px; font-size:11.5px; line-height:1.65;
}
.log-line{ color:var(--cream-dim); }
.log-time{ color:var(--cream-faint); margin-right:6px; font-variant-numeric:tabular-nums; }
.log-line.good{ color:var(--emerald); }
.log-line.bad{ color:#e88070; }
.log-line.loot{ color:var(--gold); }
.log-line.info{ color:var(--azure); }

/* ============================================================
   PAPER DOLL + STATS
   ============================================================ */
.doll{
  display:grid;
  grid-template-columns: 46px 1fr 46px;
  /* The stage stretches to whatever the slot columns come to,
     so the hero stays centred beside them however many slots
     the game grows. */
  gap:8px; align-items:stretch;
}
.doll-col{ display:flex; flex-direction:column; gap:7px; }
.doll-stage{
  position:relative;
  min-height:150px;
  display:grid; place-items:center;
  background:
    radial-gradient(70% 60% at 50% 65%, rgba(70,100,160,.22), transparent 70%),
    linear-gradient(180deg,#0e1728,#0a1120);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.doll-stage img{ image-rendering:pixelated; filter:drop-shadow(0 6px 8px rgba(0,0,0,.6)); }

.slot{
  position:relative; width:46px; height:46px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,var(--bg-slot-hi),var(--bg-slot));
  border:1px solid var(--bronze); border-radius:var(--rad);
  transition:.12s;
}
.slot:hover{ border-color:var(--bronze-glow); }
.slot.is-filled{ border-color:var(--bronze-lit); }
.slot img{ image-rendering:pixelated; }
.slot .slot-ghost{ opacity:.16; }
.slot.rarity-uncommon{ border-color:var(--r-uncommon); }
.slot.rarity-rare{ border-color:var(--r-rare); }
.slot.rarity-epic{ border-color:var(--r-epic); box-shadow:0 0 10px rgba(165,91,216,.28); }
.slot.rarity-legendary{ border-color:var(--r-legendary); box-shadow:0 0 10px rgba(224,163,62,.3); }

.stat-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 10px 10px; }
/* On a page rather than in a rail panel, so it carries its own
   spacing instead of the panel's. */
.char-tiles{ padding:0; margin-top:10px; }
.stat-tile{
  display:flex; align-items:center; gap:7px; padding:6px 8px;
  background:linear-gradient(180deg,#16203a,#0e1626);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.stat-tile .ui-icon{ flex:0 0 22px; }
.stat-label{ font-size:10px; color:var(--cream-faint); line-height:1.1; }
.stat-val{ font-size:16px; font-weight:700; color:var(--cream); font-variant-numeric:tabular-nums; line-height:1.15; }

.stat-list{ display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.stat-row{ display:flex; justify-content:space-between; font-size:12px; padding:3px 0; border-bottom:1px dotted rgba(109,85,51,.35); }
.stat-row span:first-child{ color:var(--cream-dim); }
.stat-row span:last-child{ color:var(--cream); font-weight:600; font-variant-numeric:tabular-nums; }
.stat-row .plus{ color:var(--emerald); }

/* Levels won while the tab was shut, and what each of them
   opened. One row per level rather than the two-column stat
   grid, because a skill that opened nothing would shunt every
   row after it into the wrong column. */
.level-list{ display:flex; flex-direction:column; gap:2px; }
.level-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  font-size:12px; padding:4px 0; border-bottom:1px dotted rgba(109,85,51,.35);
}
.level-skill{ color:var(--cream-dim); }
.level-span{ color:var(--emerald); font-weight:600; font-variant-numeric:tabular-nums; }
.level-opens{ margin-left:auto; color:var(--cream-dim); font-size:11.5px; }

/* ============================================================
   INVENTORY
   ============================================================ */
.inv-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.inv-grid.bank{ grid-template-columns:repeat(auto-fill, minmax(52px,1fr)); }

/* The rail pack shows every slot rather than the first fifteen,
   so it scrolls in place instead of pushing the quest panel off
   the bottom of the rail. */
.inv-scroll{ max-height:250px; overflow-y:auto; overscroll-behavior:contain; }
.inv-scroll::-webkit-scrollbar{ width:8px; }
.inv-scroll::-webkit-scrollbar-thumb{ background:var(--bronze-dim); border-radius:4px; }

/* A count that has run out is the reason an activity stopped,
   so it stops being quiet chrome. */
.panel-count.is-full{ color:var(--blood); font-weight:700; }

/* Pack and vault sit side by side and each scrolls its own
   grid, so a full vault cannot push the pack off screen. */
.bank-grid .panel-body .inv-grid{ max-height:340px; overflow-y:auto; }

/* The two are adjacent siblings, so the stacked-panel margin
   would drop the vault ten pixels below the pack. The grid's
   own gap already spaces them, at both widths. */
.bank-grid > .panel + .panel{ margin-top:0; }
.inv-slot{
  position:relative; aspect-ratio:1; width:100%;
  display:grid; place-items:center;
  background:linear-gradient(180deg,var(--bg-slot-hi),var(--bg-slot));
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  transition:.1s;
}
.inv-slot.has-item{ border-color:var(--r-common); cursor:pointer; }
.inv-slot.has-item:hover{ background:linear-gradient(180deg,#253354,#1a2540); transform:translateY(-1px); }
.inv-slot.rarity-uncommon{ border-color:var(--r-uncommon); }
.inv-slot.rarity-rare{ border-color:var(--r-rare); }
.inv-slot.rarity-epic{ border-color:var(--r-epic); box-shadow:0 0 8px rgba(165,91,216,.25); }
.inv-slot.rarity-legendary{ border-color:var(--r-legendary); box-shadow:0 0 8px rgba(224,163,62,.28); }
.inv-slot.is-equipped{ box-shadow:inset 0 0 0 1px var(--emerald), 0 0 8px rgba(61,220,132,.25); }
.inv-slot img{ image-rendering:pixelated; }
.inv-qty{
  position:absolute; right:2px; bottom:1px;
  font-size:10px; font-weight:700; color:#fff;
  text-shadow:0 1px 2px #000, 0 0 3px #000;
  font-variant-numeric:tabular-nums;
}
.inv-empty-msg{ color:var(--cream-faint); font-size:12px; padding:14px; text-align:center; }

/* ============================================================
   QUESTS
   ============================================================ */
.quest-card{
  display:flex; gap:9px; padding:8px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.quest-card + .quest-card{ margin-top:7px; }
.quest-card.is-complete{ border-color:var(--emerald-deep); background:linear-gradient(180deg,#13301f,#0e1c16); }
.quest-art{
  flex:0 0 38px; height:38px; display:grid; place-items:center;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
}
.quest-main{ flex:1; min-width:0; }
.quest-name{ font-family:var(--font-head); font-size:13px; color:var(--gold); line-height:1.2; }
.quest-obj{ font-size:11px; color:var(--cream-faint); margin-bottom:5px; }
.quest-prog-row{ display:flex; align-items:center; gap:8px; }
.quest-prog-row .bar{ flex:1; height:8px; }
.quest-count{ font-size:11px; color:var(--cream-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.quest-reward{ font-size:10.5px; color:var(--gold-deep); margin-top:4px; }

/* ============================================================
   SKILL / CRAFT PAGES
   ============================================================ */
.skill-banner{
  position:relative; height:132px; overflow:hidden;
  border-bottom:1px solid var(--bronze-dim);
}
.skill-banner canvas{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.skill-banner-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,13,22,.88) 0%, rgba(8,13,22,.35) 55%, transparent 100%);
  display:flex; flex-direction:column; justify-content:center; padding:0 16px; gap:6px;
}
.skill-banner-title{ font-family:var(--font-head); font-size:20px; color:var(--gold-bright); }
.skill-banner-sub{ font-size:12px; color:var(--cream-dim); max-width:52%; }
.skill-level-chip{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:4px 12px; background:rgba(8,13,22,.8);
  border:1px solid var(--bronze); border-radius:999px; font-size:12px;
}
.skill-level-chip b{ color:var(--gold); }
.skill-xpbar{ width:min(320px, 60%); }

.tool-slot-row{ display:flex; align-items:center; gap:10px; }
.tool-desc{ font-size:11.5px; color:var(--cream-faint); }
.tool-desc b{ color:var(--emerald); }

.ing-list{ display:flex; flex-direction:column; gap:5px; }
.ing{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px; background:var(--bg-inset);
  border:1px solid var(--bronze-dim); border-radius:3px; font-size:12px;
}
.ing-name{ flex:1; color:var(--cream-dim); }
.ing-have{ font-variant-numeric:tabular-nums; font-weight:600; }
.ing.ok .ing-have{ color:var(--emerald); }
.ing.bad .ing-have{ color:#e08070; }
/* ============================================================
   DEVELOPER TOOLS
   ------------------------------------------------------------
   Deliberately plainer than the rest of the game: this is a
   workbench, and it should never be mistaken for a screen the
   game meant you to have.
   ============================================================ */
.dev-warn{ border-left:3px solid var(--gold); }
.dev-warn p{ margin:0 0 6px; font-size:12px; color:var(--cream-dim); }
.dev-warn p:last-child{ margin-bottom:0; }
.dev-row{
  display:flex; align-items:center; gap:7px;
  padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.dev-row:last-child{ border-bottom:none; }
.dev-label{ flex:1; min-width:0; font-size:12px; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-val{ flex:none; font-size:11px; color:var(--cream-dim); font-variant-numeric:tabular-nums; }
.dev-input{
  flex:none; width:64px; padding:3px 6px;
  background:var(--bg-inset); color:var(--cream);
  border:1px solid var(--bronze-dim); border-radius:3px;
  font-family:var(--font-body); font-size:12px; font-variant-numeric:tabular-nums;
}
.dev-input.wide{ width:104px; }
.dev-input.full{ width:100%; }
.dev-input:focus{ border-color:var(--gold); }
.dev-list{ max-height:320px; overflow-y:auto; }
.nav-pip.warn{ background:var(--gold); color:#1a1206; }

/* ============================================================
   PRESENTATION
   ------------------------------------------------------------
   The three moments the game had no answer for: reaching a
   level, taking something off a corpse, and being put down.
   ============================================================ */
.flourish{
  position:fixed; top:64px; left:50%; transform:translateX(-50%);
  z-index:60; pointer-events:none;
}
.flourish-card{
  display:flex; align-items:center; gap:12px;
  padding:10px 18px 10px 14px;
  background:linear-gradient(180deg, rgba(34,26,12,.97), rgba(20,15,8,.97));
  border:1px solid var(--gold); border-radius:var(--rad);
  box-shadow:0 8px 30px rgba(0,0,0,.6), inset 0 0 22px rgba(217,164,65,.16);
}
.flourish-skill{
  font-family:var(--font-head); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-dim);
}
.flourish-level{ font-family:var(--font-head); font-size:22px; color:var(--gold-bright); line-height:1.1; }
/* What the level actually bought. Capped in width so a level
   that opens a rack of armour cannot stretch the banner across
   the page. */
.flourish-opens{
  margin-top:3px; font-size:11.5px; color:var(--cream-dim);
  max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.flourish.is-in .flourish-card{ animation:flourishIn 1.9s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes flourishIn{
  0%{ opacity:0; transform:translateY(-14px) scale(.86) }
  12%{ opacity:1; transform:translateY(0) scale(1) }
  78%{ opacity:1; transform:translateY(0) scale(1) }
  100%{ opacity:0; transform:translateY(-8px) scale(.98) }
}

/* Loot, floated where the damage floats. */
.loot-pop{
  position:absolute; display:flex; align-items:center; gap:6px;
  padding:3px 8px 3px 4px;
  background:rgba(12,16,26,.88); border:1px solid var(--bronze-dim); border-radius:999px;
  font-size:11.5px; color:var(--cream); white-space:nowrap;
  pointer-events:none; animation:lootUp 1.9s ease-out forwards; z-index:5;
}
.loot-pop.rarity-uncommon{ border-color:#4a9a5c; }
.loot-pop.rarity-rare{ border-color:#4a80c8; }
.loot-pop.rarity-epic{ border-color:#a55bd8; }
.loot-pop.rarity-legendary{ border-color:var(--gold); box-shadow:0 0 14px rgba(217,164,65,.4); }
@keyframes lootUp{
  0%{ opacity:0; transform:translateY(6px) scale(.9) }
  14%{ opacity:1; transform:translateY(0) scale(1) }
  70%{ opacity:1; transform:translateY(-14px) }
  100%{ opacity:0; transform:translateY(-26px) }
}

/* Going down. */
.actor.anim-fall{ animation:heroFall .9s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes heroFall{
  0%{ transform:none; opacity:1 }
  30%{ transform:translateY(2px) rotate(-6deg) }
  100%{ transform:translateY(16px) rotate(-72deg); opacity:.25 }
}
.scene.scene-struck::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 60%, rgba(190,40,30,.5), transparent 70%);
  animation:struck .9s ease-out forwards;
}
@keyframes struck{ 0%{ opacity:0 } 18%{ opacity:1 } 100%{ opacity:0 } }

/* ============================================================
   PETS
   ============================================================ */
.actor-pet{ left:2%; bottom:11%; animation:bob 3.1s ease-in-out infinite .4s; }
.doll-pet{ position:absolute; left:8px; bottom:6px; }
.pet-card{
  display:flex; gap:10px; align-items:flex-start;
  padding:9px; border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
}
.pet-card + .pet-card{ margin-top:7px; }
.pet-card.is-here{ border-color:var(--gold); box-shadow:inset 0 0 14px rgba(217,164,65,.09); }
.pet-card.is-locked{ opacity:.55; }
.pet-card.is-locked .pet-art{ filter:grayscale(1) brightness(.5); }
.pet-art{
  flex:0 0 52px; height:52px; display:grid; place-items:center;
  background:var(--bg-void); border:1px solid var(--bronze-dim); border-radius:3px;
}
.pet-main{ flex:1; min-width:0; }
.pet-blurb{ font-size:11.5px; color:var(--cream-faint); margin:3px 0 4px; }
.pet-here{ font-size:11px; color:var(--gold-bright); }
.pet-find{
  display:flex; gap:14px; align-items:center;
  padding:12px; margin-bottom:12px;
  border:1px solid var(--gold); border-radius:var(--rad);
  background:linear-gradient(180deg, rgba(217,164,65,.14), transparent);
}
.pet-find-art{ flex:none; display:grid; place-items:center; }
.pet-find-name{ font-family:var(--font-head); font-size:18px; color:var(--gold-bright); }
.pet-find-text{ font-size:12px; color:var(--cream-dim); margin-top:4px; }
.pet-find-quip{ font-size:11.5px; color:var(--cream-faint); font-style:italic; margin-top:6px; }
.tab-count{ font-size:10px; color:var(--cream-faint); margin-left:5px; font-variant-numeric:tabular-nums; }

/* ============================================================
   THE WEEK'S CONDITIONS
   ============================================================ */
.week-row{
  display:grid; grid-template-columns:auto auto 1fr; gap:8px; align-items:baseline;
  padding:7px 9px; border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
}
.week-row + .week-row{ margin-top:6px; }
.week-row.boon{ border-color:var(--emerald-deep); }
.week-row.bane{ border-color:#7a3128; }
.week-tag{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; border-radius:999px; color:#0d1018;
}
.week-row.boon .week-tag{ background:var(--emerald); }
.week-row.bane .week-tag{ background:#e08070; }
.week-name{ font-family:var(--font-head); font-size:14px; color:var(--gold); }
.week-eff{ font-size:11.5px; color:var(--cream-dim); text-align:right; }
.week-text{ grid-column:1 / -1; font-size:11.5px; color:var(--cream-faint); font-style:italic; }

/* ============================================================
   SET BONUSES
   ============================================================ */
.set-pieces{ display:flex; gap:4px; margin:6px 0 8px; }
.set-piece{
  display:grid; place-items:center; width:28px; height:28px;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
  opacity:.35; filter:grayscale(1);
}
.set-piece.is-on{ opacity:1; filter:none; border-color:var(--gold); }
.set-line{
  display:flex; align-items:baseline; gap:7px;
  font-size:11.5px; color:var(--cream-faint); padding:2px 0;
}
.set-line.is-on{ color:var(--cream); }
.set-need{
  flex:none; min-width:34px; font-size:10px; font-weight:700; letter-spacing:.04em;
  color:var(--cream-dim); font-variant-numeric:tabular-nums;
}
.set-line.is-on .set-need{ color:var(--gold-bright); }
.set-name{ flex:none; font-family:var(--font-head); font-size:12px; color:var(--cream-dim); }
.set-line.is-on .set-name{ color:var(--gold); }
.set-eff{ flex:1; min-width:0; }

.tt-set{ margin-top:7px; padding-top:6px; border-top:1px solid var(--bronze-dim); }
.tt-set-head{ font-family:var(--font-head); font-size:12px; color:var(--gold); margin-bottom:3px; }
.tt-set-piece{ font-size:11px; color:var(--cream-faint); padding-left:8px; }
.tt-set-piece.is-on{ color:#bff0d4; }
.tt-set-line{ font-size:11px; color:var(--cream-faint); margin-top:3px; }
.tt-set-line.is-on{ color:var(--cream); }
.tt-set-line.is-on b{ color:var(--gold-bright); }

.arrow-down{ text-align:center; color:var(--bronze-lit); font-size:15px; line-height:1; margin:2px 0; }

.reward-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--cream-dim); }
.reward-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; background:var(--bg-inset);
  border:1px solid var(--bronze-dim); border-radius:999px;
}
.reward-chip b{ color:var(--gold); }
.reward-chip.is-off{ opacity:.45; }
.reward-chip.is-off b{ color:var(--cream-dim); }

.empty-state{
  padding:34px 20px; text-align:center; color:var(--cream-faint); font-size:13px;
}
.empty-state .ui-icon{ margin:0 auto 12px; opacity:.5; }
.empty-state h3{ margin-bottom:6px; font-size:16px; }

/* Locked / coming soon */
.locked-hero{
  position:relative; padding:38px 24px; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(109,85,51,.05) 0 10px, transparent 10px 20px),
    linear-gradient(180deg,var(--bg-panel),var(--bg-deep));
}
.locked-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; margin-bottom:14px;
  background:rgba(224,163,62,.1);
  border:1px solid var(--bronze-lit); border-radius:999px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.locked-hero h2{ font-size:22px; margin-bottom:8px; }
.locked-hero p{ color:var(--cream-dim); max-width:520px; margin:0 auto 6px; font-size:13px; }
.feature-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; margin-top:20px; text-align:left; }
.feature-item{
  padding:10px 12px; background:var(--bg-inset);
  border:1px solid var(--bronze-dim); border-radius:var(--rad); opacity:.75;
}
.feature-item b{ display:block; color:var(--gold-deep); font-family:var(--font-head); font-size:13px; margin-bottom:3px; }
.feature-item span{ font-size:11.5px; color:var(--cream-faint); }

/* Overview dashboard */
.ov-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.ov-skill{
  display:flex; align-items:center; gap:9px; padding:8px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  width:100%; text-align:left;
}
.ov-skill:hover{ border-color:var(--bronze-glow); }
.ov-skill-main{ flex:1; min-width:0; display:block; }
.ov-skill-name{ font-size:12.5px; color:var(--cream); display:flex; justify-content:space-between; gap:6px; }
.ov-skill-name b{ color:var(--gold); font-variant-numeric:tabular-nums; }
.ov-skill .bar{ height:6px; margin-top:4px; }

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar{
  grid-area:status;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  background:linear-gradient(180deg,#0e1626,#080d16);
  border-top:1px solid var(--bronze);
  font-size:11.5px; color:var(--cream-dim);
}
.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--cream-faint); flex:0 0 8px;
}
.status-dot.on{ background:var(--emerald); box-shadow:0 0 8px var(--emerald); animation:pulse 2s ease-in-out infinite; }
.status-dot.paused{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.status-activity{ color:var(--cream); font-weight:600; }
.status-sep{ width:1px; height:14px; background:var(--bronze-dim); }
.status-spacer{ flex:1; }
.status-offline strong{ color:var(--cream); font-weight:600; }
.status-loc,.status-clock{ display:inline-flex; align-items:center; gap:6px; }
.status-clock{ font-variant-numeric:tabular-nums; }

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip{
  position:fixed; z-index:200; max-width:270px;
  padding:9px 11px;
  background:linear-gradient(180deg,#141e33,#0a1120);
  border:1px solid var(--bronze-lit); border-radius:var(--rad);
  box-shadow:0 10px 30px rgba(0,0,0,.75);
  pointer-events:none; font-size:12px; line-height:1.5;
}
.tt-name{ font-family:var(--font-head); font-size:14px; margin-bottom:1px; }
.tt-type{ font-size:10.5px; color:var(--cream-faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.tt-desc{ color:var(--cream-dim); font-style:italic; margin-bottom:6px; }
.tt-stats{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.tt-stat{ display:flex; justify-content:space-between; gap:14px; }
.tt-stat span:first-child{ color:var(--cream-dim); }
.tt-stat span:last-child{ color:var(--emerald); font-weight:600; font-variant-numeric:tabular-nums; }
.tt-stat.neg span:last-child{ color:#e08070; }
/* The parts of a defence number, set under the number they add
   up to: quieter and indented, so the eye reads one stat with a
   breakdown rather than five stats of equal weight. */
.tt-stat.tt-sub span{ font-size:10.5px; }
.tt-stat.tt-sub span:first-child{ padding-left:10px; color:var(--cream-faint); }
.tt-stat.tt-sub span:last-child{ color:var(--cream-dim); font-weight:500; }
.tt-foot{ display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--cream-faint); border-top:1px dotted rgba(109,85,51,.5); padding-top:5px; margin-top:5px; }
.tt-foot b{ color:var(--gold); }
.tt-hint{ font-size:10.5px; color:var(--emerald); margin-top:5px; }
.tt-warn{ font-size:11px; color:#e08070; margin-top:4px; }
.rarity-common{ color:var(--r-common); }
.rarity-uncommon{ color:var(--r-uncommon); }
.rarity-rare{ color:var(--r-rare); }
.rarity-epic{ color:var(--r-epic); }
.rarity-legendary{ color:var(--r-legendary); }

/* ============================================================
   MODALS + TOASTS
   ============================================================ */
.modal-root[hidden]{ display:none !important; }
.scrim[hidden]{ display:none !important; }
.modal-root{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:rgba(4,7,13,.78); backdrop-filter:blur(3px);
  padding:20px;
}
.modal{
  width:min(600px, 100%); max-height:86vh; overflow-y:auto;
  background:linear-gradient(180deg,#14203a,#0a1120);
  border:1px solid var(--bronze-lit); border-radius:var(--rad-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.8);
  animation:modalIn .18s ease-out;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(10px) scale(.985) } }
.modal-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--bronze);
  background:linear-gradient(180deg, rgba(45,63,100,.5), transparent);
}
.modal-head h2{ font-size:18px; }
.modal-close{ margin-left:auto; font-size:20px; color:var(--cream-dim); line-height:1; padding:0 4px; }
.modal-close:hover{ color:var(--gold); }
.modal-body{ padding:16px; }
.modal-foot{ padding:12px 16px; border-top:1px solid var(--bronze-dim); display:flex; gap:9px; justify-content:flex-end; }

.offline-summary{ text-align:center; }
.offline-time{ font-family:var(--font-head); font-size:26px; color:var(--gold-bright); margin:4px 0 2px; }
.offline-sub{ color:var(--cream-dim); margin-bottom:16px; font-size:12.5px; }
.offline-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:10px; }

.settings-row{
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px dotted rgba(109,85,51,.4);
}
.settings-row:last-child{ border-bottom:none; }
.settings-label{ flex:1; }
.settings-label b{ display:block; color:var(--cream); font-weight:600; }
.settings-label span{ font-size:11.5px; color:var(--cream-faint); }

.toast-stack{
  position:fixed; right:16px; bottom:46px; z-index:250;
  display:flex; flex-direction:column; gap:7px; align-items:flex-end;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px;
  padding:8px 13px;
  background:linear-gradient(180deg,#17233c,#0d1526);
  border:1px solid var(--bronze-lit); border-left:3px solid var(--gold);
  border-radius:var(--rad); font-size:12.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  animation:toastIn .22s ease-out, toastOut .3s ease-in forwards;
  animation-delay:0s, 3.1s;
  max-width:330px;
}
.toast.good{ border-left-color:var(--emerald); }
.toast.bad{ border-left-color:var(--blood); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(24px) } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(24px) } }

/* Shared helpers */
.muted{ color:var(--cream-faint); }
.gold-text{ color:var(--gold); }
.emerald-text{ color:var(--emerald); }
.center{ text-align:center; }
.mt6{ margin-top:6px; } .mt10{ margin-top:10px; } .mt14{ margin-top:14px; }
.row{ display:flex; align-items:center; gap:8px; }
.row.wrap{ flex-wrap:wrap; }
.spread{ justify-content:space-between; }
.scrim{
  position:fixed; inset:0; background:rgba(4,7,13,.6); z-index:35;
}
.mobilebar{ display:none; }
.ui-icon{ display:inline-grid; place-items:center; width:24px; height:24px; flex:none; }
.ui-icon.xs{ width:14px; height:14px; }
.ui-icon.sm{ width:18px; height:18px; }
.ui-icon.lg{ width:36px; height:36px; }
.ui-icon.xl{ width:48px; height:48px; }
.ui-icon img{ image-rendering:pixelated; display:block; }

/* ============================================================
   Draughts, dungeons, market, guild and achievements
   ------------------------------------------------------------
   Added with the systems they belong to. Everything here reuses
   the panel, pick and loot-card vocabulary above, so the new
   pages sit in the same visual language as the old ones.
   ============================================================ */

/* ---------------- Active draughts ---------------- */
/* Pinned at the top of the rail rather than inside a panel,
   so a draught burning down is visible whichever panel is
   open. Hidden entirely when nothing is running, so it costs
   no space in the common case. */
.buff-bar{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:8px 9px;
  border-bottom:1px solid var(--bronze-dim);
  background:rgba(0,0,0,.18);
}
.buff{
  display:flex; align-items:center; gap:5px;
  padding:3px 7px 3px 4px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--buff-tint,var(--bronze));
  border-radius:999px;
}
.buff-art{ display:grid; place-items:center; width:18px; height:18px; }
.buff-time{
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:var(--buff-tint,var(--cream));
  font-variant-numeric:tabular-nums;
}

/* ---------------- Navigation pip ---------------- */
.nav-pip{
  display:inline-grid; place-items:center;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:999px;
  background:var(--emerald-deep); color:#eafff2;
  font-size:10.5px; font-weight:700; line-height:1;
}

/* ---------------- Dungeons ---------------- */
.dungeon-card.is-locked{ opacity:.62; }

.mini-floors{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.mini-floor{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px 3px 4px;
  background:var(--bg-inset);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  font-size:11px; color:var(--cream-dim);
}
.mini-floor.is-boss{ border-color:var(--r-epic); color:var(--r-epic); }
.mini-floor b{ font-weight:700; }
.mini-sep{ color:var(--cream-faint); font-size:13px; }

.floor-track{ display:flex; flex-direction:column; gap:4px; }
.floor-row{
  display:flex; align-items:center; gap:9px;
  padding:6px 9px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.floor-row.done{ opacity:.55; border-color:var(--emerald-deep); }
.floor-row.here{
  border-color:var(--emerald);
  background:var(--emerald-wash);
  box-shadow:inset 0 0 14px rgba(61,220,132,.1);
}
.floor-mark{
  flex:0 0 20px; height:20px; display:grid; place-items:center;
  border-radius:50%; background:var(--bg-inset);
  border:1px solid var(--bronze-dim);
  font-size:10.5px; font-weight:700; color:var(--cream-dim);
}
.floor-row.done .floor-mark{ color:var(--emerald); border-color:var(--emerald-deep); }
.floor-art{ flex:0 0 26px; display:grid; place-items:center; }
.floor-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.floor-main b{ font-size:12.5px; color:var(--cream); }
.floor-main .muted{ font-size:11px; }
.floor-count{
  font-size:11.5px; font-weight:700; color:var(--gold);
  font-variant-numeric:tabular-nums;
}

.first-clear{
  padding:9px 10px;
  border:1px dashed var(--r-epic); border-radius:var(--rad);
  background:rgba(165,91,216,.07);
}
.first-clear b{ font-size:12px; color:var(--r-epic); }

/* ---------------- Market ---------------- */
.scene.short{ aspect-ratio:16 / 4.4; min-height:120px; }
.scene-caption{
  position:absolute; left:12px; bottom:10px;
  display:flex; flex-direction:column;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.scene-caption b{ font-family:var(--font-head); font-size:15px; color:var(--gold); }
.scene-caption span{ font-size:11.5px; color:var(--cream-dim); }

.shop-list{ display:flex; flex-direction:column; gap:5px; }
.shop-row{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.shop-row.is-out{ opacity:.5; }
.shop-art{
  flex:0 0 38px; height:38px; display:grid; place-items:center;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
}
.shop-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.shop-name{ font-size:12.5px; font-weight:600; }
.shop-sub{ font-size:11px; color:var(--cream-dim); }
.shop-price{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.shop-buy{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }

.trend{ font-size:9px; line-height:1; }
.trend.up{ color:var(--emerald); }
.trend.down{ color:var(--blood); }
.trend.flat{ color:var(--cream-faint); }

/* ---------------- Upgrades ---------------- */
.upgrade-card{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 10px; margin-bottom:6px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.upgrade-card.is-maxed{ border-color:var(--emerald-deep); opacity:.8; }
.upgrade-art{
  flex:0 0 38px; height:38px; display:grid; place-items:center;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
}
.upgrade-main{ flex:1; min-width:0; }
.upgrade-main b{ font-size:13px; color:var(--cream); }
.upgrade-rank{ font-size:11px; color:var(--gold); white-space:nowrap; }
.upgrade-effect{ font-size:11.5px; margin-top:3px; }
.upgrade-buy{ flex:0 0 auto; display:grid; place-items:center; align-self:center; }

.pips{ display:flex; gap:3px; margin:5px 0 2px; }
.pip{
  width:14px; height:5px; border-radius:2px;
  background:var(--bg-inset); border:1px solid var(--bronze-dim);
}
.pip.on{ background:var(--gold-deep); border-color:var(--gold); }
.pip.ready{ background:var(--emerald-deep); border-color:var(--emerald); }

/* ---------------- Guild ---------------- */
.rank-ladder{ display:flex; flex-direction:column; gap:3px; }
.rank-row{
  display:flex; align-items:center; gap:9px;
  padding:5px 9px;
  border:1px solid transparent; border-radius:var(--rad);
  opacity:.55;
}
.rank-row.done{ opacity:.85; }
.rank-row.here{
  opacity:1;
  border-color:var(--gold-deep);
  background:rgba(232,195,122,.08);
}
.rank-mark{
  flex:0 0 19px; height:19px; display:grid; place-items:center;
  border-radius:50%; background:var(--bg-inset);
  border:1px solid var(--bronze-dim);
  font-size:10px; font-weight:700; color:var(--cream-dim);
}
.rank-row.done .rank-mark,
.rank-row.here .rank-mark{ color:var(--gold); border-color:var(--gold-deep); }
.rank-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.rank-main b{ font-size:12.5px; color:var(--cream); }
.rank-main .muted{ font-size:11px; }
.rank-rep{ font-size:11px; color:var(--cream-faint); font-variant-numeric:tabular-nums; }

.bounty-card{
  display:flex; gap:10px;
  padding:9px 10px; margin-bottom:7px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim);
  border-left:3px solid var(--bronze);
  border-radius:var(--rad);
}
.bounty-card.band-standard{ border-left-color:var(--r-uncommon); }
.bounty-card.band-heavy{ border-left-color:var(--r-rare); }
.bounty-card.band-grand{ border-left-color:var(--r-epic); }
.bounty-card.is-complete{
  border-color:var(--emerald);
  background:var(--emerald-wash);
}
.bounty-art{
  flex:0 0 40px; height:40px; display:grid; place-items:center;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
}
.bounty-main{ flex:1; min-width:0; }
.bounty-name{ font-size:13px; font-weight:600; color:var(--cream); }
.bounty-band{
  font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--cream-faint);
}
.bounty-text{
  margin:2px 0 6px; font-size:11.5px; font-style:italic; color:var(--cream-dim);
}

/* ---------------- Achievements ---------------- */
.track-card{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 10px; margin-bottom:6px;
  background:linear-gradient(180deg,#16203a,#101a2c);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
}
.track-card.is-ready{
  border-color:var(--gold);
  background:rgba(232,195,122,.08);
}
.track-card.is-done{ border-color:var(--emerald-deep); }
.track-art{
  flex:0 0 38px; height:38px; display:grid; place-items:center;
  background:var(--bg-inset); border:1px solid var(--bronze-dim); border-radius:3px;
}
.track-main{ flex:1; min-width:0; }
.track-main b{ font-size:13px; color:var(--cream); }
.track-tier{ font-size:11px; color:var(--gold); white-space:nowrap; }
.track-effect{ font-size:11.5px; margin-top:4px; }
.track-claim{ flex:0 0 auto; align-self:center; }

/* ============================================================
   Accounts and the connection to the server
   ============================================================ */

/* ---------------- forms ---------------- */
.form-grid{ display:flex; flex-direction:column; gap:12px; max-width:420px; }

.field{ display:flex; flex-direction:column; gap:5px; }
.field > span{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cream-dim);
}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"]{
  width:100%; padding:9px 11px;
  background:var(--bg-inset);
  border:1px solid var(--bronze); border-radius:var(--rad);
  color:var(--cream); font-size:13px; font-family:var(--font-body);
}
.field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(232,195,122,.16);
}
/* One focus vocabulary: a field reached by keyboard wears the
   same ring as everything else, over its own gold glow. */
.field input:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.field.row-field{
  flex-direction:row; align-items:center; gap:9px;
}
.field.row-field > span{
  text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--cream);
}
.field input[type="checkbox"]{
  width:15px; height:15px; accent-color:var(--emerald); flex:0 0 auto;
}

/* ---------------- inline notices ---------------- */
.note-line{
  padding:9px 11px; margin-bottom:12px;
  border-radius:var(--rad); font-size:12.5px;
  border:1px solid var(--bronze-dim);
  background:var(--bg-inset); color:var(--cream-dim);
}
.note-line.good{
  border-color:var(--emerald-deep);
  background:var(--emerald-wash);
  color:#cdf5de;
}
.note-line.bad{
  border-color:var(--blood-deep);
  background:rgba(216,64,47,.10);
  color:#f0c3bd;
}

/* ---------------- connection pill ---------------- */
.net-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--cream-faint);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
  vertical-align:middle;
}
.net-dot.idle{ background:var(--emerald); }
.net-dot.syncing,
.net-dot.pushing{ background:var(--gold); animation:netPulse 1.1s ease-in-out infinite; }
/* An act is waiting to be confirmed. Faster than a save, because
   it is the one the player is actually standing over. */
.net-dot.acting{ background:var(--gold); animation:netPulse .6s ease-in-out infinite; }
.net-dot.conflict{ background:var(--amber); }
.net-dot.offline{ background:var(--blood); }

@keyframes netPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

/* ============================================================
   BADGES AND TITLES
   ============================================================ */
.badge-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
}
.badge-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; padding:10px 8px;
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
}
.badge-tile.is-locked{ opacity:.5; }
.badge-tile.is-locked .badge-art{ filter:grayscale(1) brightness(.45); }
.badge-tile.is-new{ border-color:var(--gold); box-shadow:inset 0 0 14px rgba(217,164,65,.12); }
.badge-tile.is-secret .badge-art{
  font-family:var(--font-head); font-size:26px; color:var(--cream-faint); filter:none;
}
.badge-art{
  height:36px; display:grid; place-items:center;
}
.badge-name{ font-size:12.5px; font-weight:700; color:var(--cream); }
.badge-sub{ font-size:11px; color:var(--cream-faint); line-height:1.35; }
.badge-date{ font-size:10.5px; color:var(--gold-deep); font-variant-numeric:tabular-nums; }
.badge-title{ font-size:10.5px; color:var(--emerald); }
.badge-pip{
  position:absolute; top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-bright); box-shadow:0 0 6px var(--gold);
}

.title-row{
  display:flex; gap:10px; align-items:center;
  padding:8px 10px; border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
}
.title-row + .title-row{ margin-top:6px; }
.title-row.is-worn{ border-color:var(--gold); box-shadow:inset 0 0 14px rgba(217,164,65,.09); }
.title-row.is-locked{ opacity:.55; }
.title-main{ flex:1; min-width:0; }
.title-text{ font-family:var(--font-head); font-size:14px; color:var(--gold); }

/* ============================================================
   THE ACCLAIM BANNER
   ------------------------------------------------------------
   Rises from the bottom of the screen when something is earned,
   holds, and drops back out the way it came. The container is
   clipped so the card is genuinely off-screen between showings
   rather than merely transparent, which is what makes the slide
   read as coming from somewhere.
   ============================================================ */
.acclaim{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--statusbar-h) + 10px);
  z-index:240;
  width:min(420px, calc(100vw - 24px));
  overflow:hidden;
  padding-top:14px;          /* room for the card's own shadow */
  pointer-events:none;
}
.acclaim-card{
  display:flex; align-items:center; gap:13px;
  padding:11px 18px 11px 13px;
  background:linear-gradient(180deg, rgba(34,26,12,.98), rgba(18,14,8,.98));
  border:1px solid var(--gold); border-radius:var(--rad-lg);
  box-shadow:0 10px 34px rgba(0,0,0,.66), inset 0 0 26px rgba(217,164,65,.15);
  cursor:pointer; pointer-events:auto;
  /* Parked below the fold; .is-up brings it home. */
  transform:translateY(calc(100% + 20px));
  opacity:0;
  transition:transform .52s cubic-bezier(.16,1.1,.3,1), opacity .3s ease-out;
}
.acclaim-card.is-up{ transform:translateY(0); opacity:1; }
.acclaim-card:hover{ border-color:var(--gold-bright); }

.acclaim-art{
  flex:0 0 46px; height:46px; display:grid; place-items:center;
  background:rgba(0,0,0,.35);
  border:1px solid var(--bronze-lit); border-radius:var(--rad);
}
.acclaim-main{ min-width:0; }
.acclaim-kind{
  font-family:var(--font-head); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold-deep);
}
.acclaim-name{
  font-family:var(--font-head); font-size:18px; color:var(--gold-bright);
  line-height:1.2;
}
.acclaim-sub{
  font-size:11.5px; color:var(--cream-dim); font-style:italic;
  line-height:1.35; margin-top:1px;
}
.acclaim-extra{ font-size:11.5px; color:var(--emerald); margin-top:2px; }

/* ============================================================
   COMPANIES AND THE HALL
   ------------------------------------------------------------
   Three list shapes that are nearly the same list: a roster
   row, a ranking row and a line of chat. They are kept apart
   because the columns differ, but they share the same rhythm
   so the page does not read as three designs.
   ============================================================ */

/* A heading inside a panel body, between groups of rows. */
.roster-head{
  font-family:var(--font-head); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-faint);
  margin:14px 0 7px;
}
.roster-head:first-child{ margin-top:0; }

.roster-row{
  display:grid;
  grid-template-columns:76px minmax(0,1.4fr) minmax(0,2fr) 62px auto;
  align-items:center; gap:9px;
  padding:7px 9px;
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
  margin-bottom:5px;
}
.roster-role{
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 0; text-align:center; border-radius:999px;
  border:1px solid var(--bronze-dim); color:var(--cream-faint);
}
.roster-role.role-founder{ color:#0d1018; background:var(--gold); border-color:var(--gold-deep); }
.roster-role.role-officer{ color:#cdf5de; background:var(--emerald-wash); border-color:var(--emerald-deep); }
.roster-role.role-applicant{ color:var(--cream-dim); background:transparent; border-style:dashed; }

/* The name is a button because it opens the card; it must not
   look like one. .link-btn carries a margin-left:auto that
   would push it off the grid, so it is undone here. */
.roster-who,
.hall-who,
.chat-who{ margin-left:0; }

.roster-who{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  min-width:0; text-align:left; font-size:12px;
}
.roster-who b{ color:var(--gold); font-size:13px; }
.roster-who .muted{ font-size:11px; font-style:italic; }
.roster-who b,
.roster-who .muted{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.roster-nums{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.roster-seen{ font-size:11px; text-align:right; }
.roster-acts{ display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }

/* ---------------- the Hall ---------------- */
.hall-list{ display:flex; flex-direction:column; gap:4px; }
.hall-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 96px;
  align-items:center; gap:9px;
  padding:7px 9px;
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
}
.hall-row:nth-child(1) .hall-rank{ color:var(--gold); }
.hall-row:nth-child(2) .hall-rank,
.hall-row:nth-child(3) .hall-rank{ color:var(--bronze-glow); }
.hall-rank{
  font-family:var(--font-head); font-size:14px; font-weight:700;
  color:var(--cream-faint); text-align:center; font-variant-numeric:tabular-nums;
}
.hall-who{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  min-width:0; text-align:left; font-size:12px;
}
.hall-who b{ color:var(--gold); font-size:13px; }
.hall-who .muted{ font-size:11px; font-style:italic; }
.hall-who b,
.hall-who .muted{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hall-marks{ display:flex; gap:4px; }
.hall-val{
  font-size:14px; font-weight:700; color:var(--cream);
  text-align:right; font-variant-numeric:tabular-nums;
}

/* .week-tag is drawn for the weekly modifier rows, where the
   row itself supplies the background. Used anywhere else it is
   near-black text on a dark panel, which is no text at all. */
.roster-row .week-tag,
.hall-marks .week-tag,
.shop-name .week-tag{ background:var(--bronze); color:#f3e6cd; }

/* ---------------- the room ---------------- */
.chat-log{
  height:240px; overflow-y:auto; overscroll-behavior:contain;
  padding:9px 11px;
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
  display:flex; flex-direction:column; gap:3px;
}
.chat-line{
  display:flex; gap:7px; align-items:baseline;
  font-size:12.5px; color:var(--cream-dim); line-height:1.45;
}
.chat-time{
  font-size:10px; color:var(--cream-faint);
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.chat-who{
  flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--gold-deep);
  /* .link-btn sets a gap, which would sit between the name and
     the colon glued to it below. */
  gap:0;
}
.chat-who::after{ content:':'; color:var(--cream-faint); }
.chat-body{ min-width:0; overflow-wrap:anywhere; }
.chat-system{
  display:block; font-style:italic; font-size:11.5px;
  color:var(--cream-faint); padding:2px 0;
}

/* ---------------- the card behind a name ---------------- */
.prof-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:12px;
}
.prof-title{ font-family:var(--font-head); font-size:16px; color:var(--gold); }
.prof-gear{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:5px;
  max-width:280px;
}
.prof-skills{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:5px;
}
.prof-skill{
  display:flex; align-items:center; gap:6px;
  padding:5px 8px; font-size:12px; color:var(--cream-dim);
  border:1px solid var(--bronze-dim); border-radius:var(--rad);
  background:var(--bg-inset);
}
.prof-skill span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prof-skill b{ margin-left:auto; color:var(--cream); font-variant-numeric:tabular-nums; }
.prof-badges{ display:flex; flex-wrap:wrap; gap:5px; }
.prof-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; font-size:11.5px; color:var(--cream-dim);
  border:1px solid var(--bronze-dim); border-radius:999px;
  background:var(--bg-inset);
}

/* ============================================================
   RANGE SLIDER
   ------------------------------------------------------------
   One control, one place. A browser default here is bright blue
   against a page that has no blue in it anywhere.
   ============================================================ */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  height:22px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(180deg,#0a1120,#141d2f);
  border:1px solid var(--bronze-dim);
}
input[type=range]::-moz-range-track{
  height:6px; border-radius:999px;
  background:linear-gradient(180deg,#0a1120,#141d2f);
  border:1px solid var(--bronze-dim);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  border:1px solid var(--bronze-lit);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  border:1px solid var(--bronze-lit);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
input[type=range]:disabled{ opacity:.4; cursor:default; }
input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--focus); }

/* ============================================================
   FIRST-TIME HINTS
   ------------------------------------------------------------
   Deliberately not a toast and not a modal. A toast is gone
   before it is read and a modal has to be dismissed before the
   page can be looked at; a hint sits beside the thing it is
   about and waits.
   ============================================================ */
.hint-note{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 13px; margin-bottom:12px;
  border:1px solid var(--bronze); border-left:3px solid var(--gold-deep);
  border-radius:var(--rad);
  background:linear-gradient(180deg, rgba(232,195,122,.07), rgba(232,195,122,.02));
}
.hint-note .ui-icon{ flex:0 0 auto; margin-top:1px; opacity:.85; }
.hint-note p{
  margin:0; flex:1; min-width:0;
  font-size:12.5px; line-height:1.55; color:var(--cream-dim);
}
.hint-note .hint-dismiss{ flex:0 0 auto; align-self:center; }

/* ---------------- the welcome's one instruction ------------- */
.welcome-next{
  display:flex; align-items:center; gap:12px;
  margin-top:14px; padding:12px 14px;
  border:1px solid var(--bronze); border-radius:var(--rad);
  background:var(--bg-inset);
}
.welcome-next > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.welcome-next b{ font-family:var(--font-head); font-size:15px; color:var(--gold); }
.welcome-next span{ font-size:12.5px; color:var(--cream-dim); }