/* ============================================================
   EMBERFALL — design system
   "Illuminated manuscript meets modern game client":
   candlelit near-black glass, hairline gold, engraved smallcaps,
   ornamental corner brackets, restrained motion.
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* surfaces */
  --bg0: #0b0908;
  --glass: rgba(17, 14, 10, 0.82);
  --glass-2: rgba(26, 21, 15, 0.88);
  --raise: #201a12;
  --well: #0e0b08;
  /* hairlines & gold */
  --line: rgba(201, 164, 92, 0.22);
  --line-strong: rgba(201, 164, 92, 0.45);
  --gold-dim: #8a6f3e;
  --gold: #c9a45c;
  --gold-hot: #efd9a4;
  /* ink */
  --ink: #eadfc6;
  --ink-dim: #a3937299;
  --ink-mute: #a39372;
  /* accents */
  --ember: #cf7a36;
  --ember-hot: #f0a050;
  --blood: #b0432f;
  --leaf: #7fa653;
  --arcane: #8b9bd8;
  /* type */
  --display: 'Cochin', 'Baskerville', 'Palatino', 'Iowan Old Style', 'Georgia', serif;
  --ui: 'Optima', 'Candara', 'Gill Sans', 'Segoe UI', 'Avenir Next', sans-serif;
  --caps: 600 11px/1 var(--ui);
}

html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--display);
  background: var(--bg0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* faint parchment grain over everything */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* ---------- icons ---------- */
.ic { width: 17px; height: 17px; flex: none; vertical-align: -3px; }
button { gap: 7px; }
button .ic { margin: 0; }

/* ---------- controls ---------- */
button {
  font: 500 13px/1.2 var(--ui);
  letter-spacing: .07em;
  color: var(--ink);
  background: linear-gradient(180deg, #262017, #17130d);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .18s, color .18s, box-shadow .18s, transform .05s;
  display: inline-flex; align-items: center; justify-content: center;
}
button::after { /* sheen sweep */
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(239, 217, 164, .10), transparent);
  transform: skewX(-18deg); transition: left .45s ease;
}
button:hover { border-color: var(--line-strong); color: var(--gold-hot); box-shadow: 0 0 0 1px rgba(201,164,92,.08), 0 4px 14px rgba(0,0,0,.4); }
button:hover::after { left: 130%; }
button:active { transform: translateY(1px); }
button.primary {
  background: linear-gradient(180deg, #7c4a1e, #53300f);
  border-color: rgba(239, 199, 122, .55);
  color: #ffe9c2;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
button.primary:hover { color: #fff5df; box-shadow: 0 0 18px rgba(207, 122, 54, .35); }
button.danger { border-color: rgba(176, 67, 47, .5); color: #d98d77; }
button.danger:hover { background: linear-gradient(180deg, #3c1d15, #29120c); color: #f2ab95; box-shadow: 0 0 12px rgba(176,67,47,.25); }
button.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, #35291a, #221a10);
  color: var(--gold-hot);
  box-shadow: inset 0 1px 6px rgba(0,0,0,.5), 0 0 10px rgba(201,164,92,.15);
}
button:disabled { opacity: .35; cursor: default; }
button:disabled::after { display: none; }

input, select, textarea {
  font: 400 14px/1.4 var(--ui);
  background: var(--well);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, .10);
}
select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a45c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; }

/* custom range sliders */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; border: none; padding: 0; box-shadow: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-dim), rgba(201,164,92,.25));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px;
  background: radial-gradient(circle at 35% 30%, var(--gold-hot), var(--gold) 55%, #7a5f30);
  border: 1px solid #3a2c14; border-radius: 50%;
  box-shadow: 0 0 6px rgba(201,164,92,.5), 0 2px 4px rgba(0,0,0,.6);
  transition: transform .15s;
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.25); }

h1, h2, h3 { font-weight: 500; letter-spacing: .04em; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #3a2f1e; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #57431f; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(201, 164, 92, .3); }

/* smallcaps section label */
.caps, .panel h3, .dm-tools h3, .modal h2 small {
  font: var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}

/* ---------- ornate panel (corner brackets) ---------- */
.panel, .card, .modal, .charbox, .actionbar, .combatbar, .dm-tools, .dm-side, .selPanel {
  position: relative;
}
.corner::before, .corner::after,
.card::before, .card::after,
.modal::before, .modal::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--line-strong); border-style: solid; opacity: .9;
}
.corner::before, .card::before, .modal::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.corner::after, .card::after, .modal::after { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }

/* ============================================================
   LANDING
   ============================================================ */
.landing {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: auto; padding: 24px; position: relative;
  background:
    radial-gradient(1000px 550px at 50% 18%, rgba(207, 122, 54, .13), transparent 65%),
    radial-gradient(700px 900px at 12% 95%, rgba(139, 155, 216, .05), transparent 60%),
    linear-gradient(180deg, #120e0a 0%, #0b0908 55%, #080605 100%);
}
/* drifting embers */
.landing i.ember {
  position: absolute; bottom: -8px; border-radius: 50%; pointer-events: none;
  width: 3px; height: 3px;
  background: radial-gradient(circle, #ffd9a0, #cf7a36 60%, transparent);
  animation: emberRise linear infinite;
  opacity: 0;
}
@keyframes emberRise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  8% { opacity: .8; }
  60% { opacity: .5; }
  100% { transform: translate(var(--dx, 30px), -92vh) scale(.3); opacity: 0; }
}
.landing h1 {
  font-family: var(--display);
  font-size: clamp(52px, 9vw, 88px);
  font-weight: 400;
  letter-spacing: .16em;
  background: linear-gradient(180deg, #f6e5b8 15%, #c9a45c 55%, #7d5f2c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 34px rgba(207, 122, 54, .3));
  animation: fadeDown .9s ease both;
  margin-bottom: 38px;
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.cards { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.card {
  width: 350px;
  background: linear-gradient(165deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(239,217,164,.06);
  animation: fadeUp .8s .3s ease both;
}
.card:nth-child(2) { animation-delay: .45s; }
.card h2 {
  font-size: 21px; color: var(--gold-hot); margin-bottom: 4px; display: flex; align-items: center; gap: 10px;
}
.card h2 .ic { width: 20px; height: 20px; color: var(--gold); }
.card .sub { font: 400 12px/1.5 var(--ui); color: var(--ink-mute); margin-bottom: 18px; }
.card .row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.card label { font: var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.card input, .card select { width: 100%; }
.card button { width: 100%; margin-top: 8px; padding: 12px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.err { color: #d98d77; font: 400 13px/1.4 var(--ui); min-height: 18px; margin-top: 8px; }
.classpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.classpick button { padding: 8px 2px; font-size: 11.5px; letter-spacing: .04em; }
.dmnote {
  margin-top: 30px; color: var(--ink-mute); font: 400 13px/1.6 var(--ui); max-width: 560px; text-align: center;
  animation: fadeUp .8s .6s ease both;
}
.dmnote a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.dmnote code { color: var(--gold-hot); font-family: var(--display); }

/* ============================================================
   GAME CHROME
   ============================================================ */
.game { position: relative; height: 100%; background: var(--bg0); }
canvas#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#floatLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float {
  position: absolute; transform: translate(-50%, -100%);
  font: 600 19px/1 var(--ui); color: #fff;
  text-shadow: 0 2px 6px #000, 0 0 12px rgba(0,0,0,.8); white-space: nowrap;
}
.float.dmg { color: #ff9a7a; font-size: 23px; }
.float.crit { color: #ffd884; font-size: 29px; letter-spacing: .04em; }
.float.heal { color: #a5e88a; }
.float.xp { color: #c9b0ff; font-size: 15px; }
.float.miss { color: #b8ac92; font-size: 15px; }

.hud { position: absolute; pointer-events: none; inset: 0; }
.hud > * { pointer-events: auto; }

/* character plaque */
.charbox {
  position: absolute; top: 16px; left: 16px; width: 264px;
  background: linear-gradient(170deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px 16px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(239,217,164,.05);
}
.charbox .nm { font-size: 19px; color: var(--gold-hot); letter-spacing: .03em; }
.charbox .sub { font: 400 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin: 2px 0 10px; }
.bar { height: 13px; background: var(--well); border: 1px solid rgba(0,0,0,.8); border-radius: 3px; overflow: hidden; position: relative; margin-bottom: 5px; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.bar > i { display: block; height: 100%; transition: width .35s cubic-bezier(.2,.8,.3,1); position: relative; }
.bar > i::after { content: ''; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent); }
.bar.hp > i { background: linear-gradient(180deg, #79b354, #3f7328); }
.bar.hp.low > i { background: linear-gradient(180deg, #d05a3a, #8c2c1c); animation: pulseLow 1.2s ease-in-out infinite; }
@keyframes pulseLow { 50% { filter: brightness(1.35); } }
.bar.mp > i { background: linear-gradient(180deg, #7186d6, #3c4d96); }
.bar.xp > i { background: linear-gradient(180deg, #a68ad0, #64489c); }
.bar b { position: absolute; inset: 0; font: 600 9.5px/13px var(--ui); letter-spacing: .08em; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.goldrow { display: flex; justify-content: space-between; align-items: center; font: 500 13px/1 var(--ui); color: var(--gold); margin-top: 7px; }
.goldrow .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.goldrow .clock { color: var(--ink-mute); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }

.downed-banner {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  font-size: 32px; color: #d05a4a; letter-spacing: .1em;
  background: linear-gradient(180deg, rgba(20, 8, 5, .92), rgba(10, 4, 2, .95));
  border: 1px solid rgba(176, 67, 47, .4); border-radius: 10px;
  padding: 22px 48px; text-align: center; display: none;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(176,67,47,.15);
}
.downed-banner small { display: block; font: 400 13px/1.5 var(--ui); color: var(--ink-mute); margin-top: 8px; letter-spacing: .02em; }

/* action dock */
.actionbar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: flex-end;
  background: linear-gradient(170deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(239,217,164,.05);
}
.actionbar .slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.actionbar .slot small { font: 500 9px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); max-width: 74px; text-align: center; }
.actionbar button { min-width: 46px; padding: 10px; }
.actionbar button .ic { width: 18px; height: 18px; margin: 0; }
.actionbar .divider { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--line), transparent); margin: 0 2px; }
.actionbar button.spell { border-color: rgba(139, 155, 216, .35); }
.actionbar button.spell:hover { border-color: var(--arcane); color: #b9c6f2; box-shadow: 0 0 12px rgba(139,155,216,.25); }
.dicebtns { display: flex; gap: 4px; }
.dicebtns button { min-width: 38px; padding: 8px 5px; font-size: 11.5px; font-family: var(--display); letter-spacing: 0; }

/* right column */
.side {
  position: absolute; top: 16px; right: 16px; width: 296px; max-height: calc(100% - 32px);
  display: flex; flex-direction: column; gap: 12px;
}
.panel {
  background: linear-gradient(170deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(239,217,164,.05);
}
.panel h3 { margin-bottom: 9px; }
.party .p { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font: 400 13.5px/1.3 var(--ui); cursor: pointer; border-radius: 5px; transition: background .15s; }
.party .p:hover { background: rgba(239, 217, 164, .05); }
.party .dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4237; flex: none; box-shadow: 0 0 4px rgba(0,0,0,.6); }
.party .dot.on { background: var(--leaf); box-shadow: 0 0 6px rgba(127, 166, 83, .7); }
.party .php { margin-left: auto; color: var(--ink-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.party .downed { color: #d05a4a; }
#log { flex: 1; min-height: 130px; overflow-y: auto; font: 400 12.8px/1.5 var(--ui); }
#log > div { padding: 1.5px 0; border-bottom: 1px solid rgba(201,164,92,.05); }
#log .chat { color: #ddd3ba; font-family: var(--display); font-size: 13.5px; }
#log .combat { color: #dfa27f; }
#log .dice { color: #a9b8e4; }
#log .loot, #log .trade { color: var(--gold); }
#log .death { color: #e06a5a; }
#log .level, #log .victory { color: #c4a9f2; }
#log .dm { color: #86cdb9; }
#log .npc { color: #e8c987; font-family: var(--display); font-size: 13.5px; }
#log .quest { color: #a8cc80; }
#log .join, #log .time, #log .info { color: var(--ink-mute); }
.chatrow { display: flex; gap: 6px; margin-top: 9px; }
.chatrow input { flex: 1; font-size: 13px; padding: 7px 10px; }
.chatrow button { padding: 7px 12px; }

/* combat tracker */
.combatbar {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(31, 13, 8, .94), rgba(20, 8, 5, .92));
  border: 1px solid rgba(176, 67, 47, .35); border-radius: 10px;
  padding: 9px 18px; display: none; text-align: center;
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 40px rgba(176,67,47,.1);
}
.combatbar .rnd { font: var(--caps); letter-spacing: .3em; text-transform: uppercase; color: #cf8a6d; }
.combatbar .order { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.combatbar .cb {
  padding: 4px 12px; font: 500 12px/1.3 var(--ui); border-radius: 20px;
  border: 1px solid var(--line); color: var(--ink-mute);
  transition: all .25s;
}
.combatbar .cb.now {
  border-color: var(--ember-hot); color: var(--ember-hot);
  background: rgba(207, 122, 54, .12);
  box-shadow: 0 0 12px rgba(207, 122, 54, .3);
}
.combatbar .cb.mon { color: #d98d77; }
.turnping {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  color: var(--ember-hot); font: 500 17px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(207, 122, 54, .6); display: none;
  animation: turnPulse 1.6s ease-in-out infinite;
}
@keyframes turnPulse { 50% { opacity: .55; } }

#diceTray {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  width: 380px; height: 260px; pointer-events: none; opacity: 0; transition: opacity .3s;
}
#diceTray.rolling { opacity: 1; }

/* ---------- modals ---------- */
.modal-wrap {
  position: absolute; inset: 0; background: rgba(5, 3, 2, .66);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 30;
}
.modal-wrap.open { display: flex; }
.modal {
  width: min(680px, 94vw); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(165deg, #1d1710, #120e09);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 28px;
  box-shadow: 0 40px 120px rgba(0,0,0,.8), inset 0 1px 0 rgba(239,217,164,.06);
  animation: modalIn .28s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h2 {
  font-size: 20px; color: var(--gold-hot); margin-bottom: 6px;
  padding-bottom: 12px; position: relative;
}
.modal h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent 70%);
}
.modal .close { float: right; padding: 5px 10px; margin-left: 10px; position: relative; z-index: 2; }
.invrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid rgba(201,164,92,.08); font: 400 14px/1.3 var(--ui); }
.invrow .nm { flex: 1; font-family: var(--display); font-size: 15px; }
.invrow .meta { color: var(--ink-mute); font-size: 12px; }
.invrow .gold { color: var(--gold); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.invrow button { padding: 5px 12px; font-size: 11.5px; }
.equiprow { color: var(--ink-mute); font: 400 13.5px/1.8 var(--ui); margin-bottom: 12px; }
.equiprow b { color: var(--ink); font-weight: 500; }
.statgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 16px; }
.statgrid .st {
  background: linear-gradient(180deg, var(--raise), #171209);
  border: 1px solid var(--line); border-radius: 7px; text-align: center; padding: 9px 2px 7px;
  box-shadow: inset 0 1px 0 rgba(239,217,164,.05);
}
.statgrid .st b { display: block; font: 400 19px/1.2 var(--display); color: var(--gold-hot); }
.statgrid .st small { font: var(--caps); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }

/* trade */
.tradegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tradecol { background: var(--well); border: 1px solid var(--line); border-radius: 9px; padding: 13px; transition: border-color .25s, box-shadow .25s; }
.tradecol h3 { font: var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.tradecol.confirmed { border-color: rgba(127, 166, 83, .6); box-shadow: 0 0 14px rgba(127, 166, 83, .12); }
.tradecol .goldin { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font: 400 13px/1.3 var(--ui); }
.tradecol .goldin input { width: 84px; padding: 5px 8px; }
.tradebtns { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }

/* quests */
.quest { border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; margin-bottom: 11px; background: linear-gradient(170deg, var(--raise), #14100a); }
.quest h4 { color: var(--gold); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.quest h4 .ic { color: var(--gold-hot); }
.quest p { color: var(--ink-mute); font: 400 13px/1.55 var(--ui); margin: 6px 0; }
.obj { display: flex; gap: 8px; align-items: center; font: 400 13.5px/1.4 var(--ui); padding: 3px 0; }
.obj.done { color: #8ac878; text-decoration: line-through; text-decoration-color: rgba(138,200,120,.5); }
.obj .prog { color: var(--ink-mute); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* victory / overlays */
.bigoverlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; z-index: 40; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(48, 34, 10, .9), rgba(8, 5, 2, .97) 75%);
}
.bigoverlay.open { display: flex; }
.bigoverlay::before {
  content: ''; position: absolute; width: 160vmax; height: 160vmax;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 164, 92, .05) 12deg, transparent 24deg,
    transparent 40deg, rgba(201, 164, 92, .05) 55deg, transparent 70deg,
    transparent 100deg, rgba(201, 164, 92, .05) 115deg, transparent 130deg,
    transparent 170deg, rgba(201, 164, 92, .05) 185deg, transparent 200deg,
    transparent 240deg, rgba(201, 164, 92, .05) 255deg, transparent 270deg,
    transparent 300deg, rgba(201, 164, 92, .05) 315deg, transparent 330deg);
  animation: rays 40s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
.bigoverlay h1 {
  position: relative; font-size: 64px; letter-spacing: .22em; font-weight: 400;
  background: linear-gradient(180deg, #f8ecc4, #c9a45c 60%, #8a6f3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 50px rgba(216, 178, 90, .4));
}
.bigoverlay p { position: relative; color: var(--ink-mute); font: 400 16px/1.6 var(--ui); margin-top: 14px; letter-spacing: .06em; }

.toast {
  position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: linear-gradient(180deg, rgba(43, 24, 12, .96), rgba(30, 15, 8, .96));
  color: var(--ink); border: 1px solid rgba(201, 164, 92, .35);
  border-radius: 7px; padding: 10px 20px; font: 400 13.5px/1.4 var(--ui);
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; z-index: 50;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.conn { position: absolute; bottom: 10px; left: 14px; font: 400 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(163, 147, 116, .5); }
.conn.off { color: #d98d77; }

/* ============================================================
   DM CONSOLE
   ============================================================ */
.dm-layout { display: flex; height: 100%; background: var(--bg0); }
.dm-tools {
  width: 236px; flex: none;
  background: linear-gradient(170deg, #161009, #0f0b07);
  border-right: 1px solid var(--line);
  padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
}
.dm-tools h3 { margin-bottom: 7px; }
.toolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.toolgrid button { font-size: 11px; padding: 8px 4px; letter-spacing: .04em; }
.toolgrid button .ic { width: 14px; height: 14px; margin-right: 4px; }
.toolgrid button.wide { grid-column: span 2; }
.dm-tools label { font: var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); display: block; margin: 7px 0 4px; }
.dm-tools select, .dm-tools input[type=number], .dm-tools input[type=text] { width: 100%; font-size: 13px; padding: 6px 8px; }
.dm-tools input[type=range] { width: 100%; }
.dm-center { flex: 1; position: relative; min-width: 0; }
.dm-side {
  width: 356px; flex: none;
  background: linear-gradient(170deg, #161009, #0f0b07);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.dm-tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.dm-tabs button {
  flex: 1; border: none; border-radius: 0; background: transparent; padding: 13px 4px;
  font: 500 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 2px solid transparent;
}
.dm-tabs button::after { display: none; }
.dm-tabs button:hover { color: var(--ink); box-shadow: none; }
.dm-tabs button.active { color: var(--gold-hot); border-bottom-color: var(--gold); background: rgba(201, 164, 92, .04); }
.dm-tabbody { flex: 1; overflow-y: auto; padding: 14px; min-height: 0; }
.pcard { border: 1px solid var(--line); border-radius: 9px; padding: 12px; margin-bottom: 11px; background: linear-gradient(170deg, var(--raise), #14100a); }
.pcard .top { display: flex; justify-content: space-between; align-items: baseline; }
.pcard .top b { font-weight: 400; color: var(--gold-hot); font-size: 16px; font-family: var(--display); }
.pcard .top small { color: var(--ink-mute); font: 400 11px/1.3 var(--ui); letter-spacing: .06em; }
.pcard .bars { margin: 8px 0 6px; }
.pcard .grants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 7px; }
.pcard .grants button { font-size: 10.5px; padding: 6px 2px; letter-spacing: .02em; }
.pcard .grantrow { display: flex; gap: 4px; margin-top: 5px; }
.pcard .grantrow input { flex: 1; width: 40px; font-size: 12px; padding: 4px 6px; }
.pcard .grantrow select { flex: 2; font-size: 12px; padding: 4px; }
.qed { border: 1px solid var(--line); border-radius: 9px; padding: 12px; margin-bottom: 11px; background: linear-gradient(170deg, var(--raise), #14100a); }
.qed input[type=text], .qed textarea { width: 100%; margin-bottom: 6px; font-size: 13px; }
.qed .objrow { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.qed .objrow input[type=text] { flex: 1; margin: 0; }
.qed .objrow select { font-size: 11px; padding: 4px 2px; width: 76px; }
.qed .objrow input.num { width: 44px; margin: 0; }
.qed .vic { font: 400 12.5px/1.4 var(--ui); color: var(--gold); display: flex; gap: 6px; align-items: center; margin: 7px 0; }
.airesult {
  background: var(--well); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px; font: 400 13px/1.6 var(--ui); margin-top: 10px; white-space: pre-wrap;
  max-height: 420px; overflow-y: auto;
}
.airesult h4 { color: var(--gold); margin: 12px 0 5px; font-family: var(--display); font-size: 15px; }
.airesult .scene { border-left: 2px solid var(--gold-dim); padding-left: 11px; margin: 11px 0; }
.airesult .scene .mood-tag { font: var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.airesult button { font-size: 11px; padding: 5px 9px; margin: 5px 5px 0 0; }
.aibtns { display: flex; gap: 6px; margin-top: 8px; }
.aibtns button { flex: 1; font-size: 11.5px; }
.moodbtns { display: flex; gap: 4px; }
.moodbtns button { flex: 1; font-size: 10.5px; padding: 7px 2px; letter-spacing: .04em; }
.timeslider { width: 100%; }
.invitebox { background: var(--well); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 12px; font: 400 12.5px/1.7 var(--ui); word-break: break-all; }
.invitebox b { color: var(--gold); font-weight: 500; }
kbd {
  background: var(--raise); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 7px; font: 500 11px/1.5 var(--ui);
}
.hint { font: 400 11.5px/1.55 var(--ui); color: var(--ink-mute); }

/* ============================================================
   CHARACTER CREATION SHEET
   ============================================================ */
.cc-chip {
  background: linear-gradient(180deg, var(--raise), #14100a);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(239,217,164,.05);
}
.cc-chip b { font: 400 22px/1.1 var(--display); color: var(--gold-hot); font-weight: 400; display: block; }
.cc-chip small { font: 500 10px/1.3 var(--ui); letter-spacing: .1em; color: var(--ink-mute); }
.cc-chip small s { opacity: .45; }
.cc-row { display: flex; align-items: center; gap: 9px; }
.cc-row label { width: 44px; font: var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.cc-row select { flex: 1; }
.cc-row .bonus { font: 500 12px/1 var(--ui); color: var(--leaf); min-width: 28px; }
.cc-row .final { font: 400 19px/1 var(--display); color: var(--gold-hot); min-width: 32px; text-align: right; }

/* gallery chrome */
.gtitle h1 {
  background: linear-gradient(180deg, #f6e5b8 15%, #c9a45c 60%, #7d5f2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(207, 122, 54, .3));
  letter-spacing: .2em;
}
.gtitle p { font: 400 12px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; }