/* ════════════════════════════════════════════════════════════════════
   THE SYSTEM  ·  Shared Styles  (v2)
   --------------------------------------------------------------------
   Dungeon-OS terminal. Cyan is the system spine; semantic colour is
   layered on top with purpose:
     · HP        green → amber → red as vitality drops
     · DANGER    blood red — dying, death, destructive actions
     · GOLD      warm brass — currency, luck, treasure
     · MAGIC     violet — spells & the arcane
     · ACTIVE    green — whose turn it is
   Preserved: dark base, cyan glow, bracket-corner panels,
   Orbitron / Share Tech Mono pairing.
═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Share+Tech+Mono&display=swap');

:root {
  /* ── System spine (cyan) ── */
  --cyan:        #6fe3ff;
  --cyan-bright: #cdf4ff;
  --cyan-deep:   #4bafdd;
  --cyan-dim:    rgba(102,214,255,.42);
  --cyan-faint:  rgba(102,214,255,.14);
  --line:        rgba(120,222,255,.6);

  /* ── Ink & ground ── */
  --ink:    #04141d;
  --bg0:    #05080f;
  --bg1:    #070d18;
  --type:   #eaf8ff;

  /* ── Surfaces / panels ── */
  --panel-fill:   linear-gradient(168deg, rgba(46,128,178,.13), rgba(10,34,56,.05));
  --panel-border: rgba(96,196,238,.34);
  --field-bg:     rgba(13,38,60,.55);
  --field-border: rgba(70,166,206,.26);

  /* ── HP vitality ramp ── */
  --hp-high: #43d178;
  --hp-mid:  #f0a838;
  --hp-low:  #ec4747;

  /* ── Danger / blood ── */
  --danger:      #ff5252;
  --blood:       #e22e2e;
  --blood-deep:  #4c0e12;
  --blood-glow:  rgba(255,70,60,.5);

  /* ── Gold / currency / luck ── */
  --gold:        #ecbb52;
  --gold-bright: #ffd87a;
  --gold-deep:   #8a6420;
  --gold-glow:   rgba(236,187,82,.4);

  /* ── Magic / spells ── */
  --magic:       #b483f0;
  --magic-bright:#d8bcff;
  --magic-deep:  rgba(132,90,210,.4);
  --magic-fill:  rgba(40,18,72,.5);

  /* ── Active turn (green) ── */
  --active:      #4cd97b;
  --active-glow: rgba(70,210,120,.45);

  /* ── Dead / dim (kept for fallbacks) ── */
  --dead-border: rgba(150,70,72,.4);
  --dead-dim:    rgba(190,110,110,.5);

  /* ── Skin tokens — surface / border / text ─────────────────────────
     Override these in any html[data-theme] block for a full skin.
     Combined with the cyan/panel/field tokens above, they cover every
     interactive element in the default terminal palette.             */
  --surf-tint:    rgba(13,38,60,.45);    /* interactive element bg */
  --surf-raised:  rgba(20,60,100,.6);    /* elevated / primary-action bg */
  --surf-hover:   rgba(32,84,116,.6);    /* hover state */
  --surf-select:  rgba(40,110,160,.6);   /* selected / pressed */
  --surf-deep:    rgba(8,20,36,.5);      /* deep surface (log entries) */
  --surf-notif:   rgba(18,60,88,.4);     /* notification / callout bg */
  --border-faint: rgba(70,160,200,.15);  /* barely-visible dividers */
  --border-ui:    rgba(70,160,200,.3);   /* standard UI element borders */
  --border-focus: rgba(104,204,244,.55); /* focus / hover highlight */
  --text-muted:   rgba(120,176,206,.72); /* secondary text in tinted elements */
  --text-ghost:   rgba(80,140,170,.38);  /* placeholders, very dim labels */

  /* ── Type scale ── */
  --f-head: 'Orbitron', sans-serif;
  --f-mono: 'Share Tech Mono', ui-monospace, monospace;

  /* ── U1 additions (tokens-as-law): the exact values the screens were
     hardcoding, promoted so skins can re-ink them. Numbered glow steps
     are honest refactor tokens — U3 re-rationalizes names if needed. ── */
  --shadow:       rgba(0,0,0,.5);        /* standard drop shadow */
  --shadow-deep:  rgba(0,0,0,.6);        /* modal / overlay shadow */
  --danger-text:  rgba(245,160,140,.95); /* readable danger copy */
  --danger-soft:  rgba(255,100,80,.9);   /* fumble / fail accents */
  --glow-2:  rgba(110,227,255,.2);       /* cyan glow steps (crit, focus) */
  --glow-4:  rgba(110,227,255,.4);
  --glow-5:  rgba(110,227,255,.5);
  --glow-6:  rgba(110,227,255,.6);
  --warn:        #ffd98a;                /* attention amber: dirty SAVE, */
  --warn-border: rgba(255,200,90,.5);    /* low-confidence rows, overwrite */
  --warn-fill:   rgba(70,50,10,.5);      /* mode chips                    */

  /* ── U3 re-set: rhythm, motion, radius ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --dur-fast: .12s;
  --dur:      .2s;
  --ease:     cubic-bezier(.2, .7, .3, 1);
  --r-1: 3px;
  --r-2: 6px;
}

/* the OS accessibility setting always wins — motion is a garnish here */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

::selection { background: var(--cyan-dim); color: var(--type); }

/* thin terminal scrollbars — the default chrome bars break the CRT frame */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surf-raised);
  border: 2px solid transparent; background-clip: padding-box;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--surf-select); background-clip: padding-box; }

/* keyboard focus is visible everywhere, mouse focus stays quiet */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

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

body {
  margin: 0;
  background:
    radial-gradient(1300px 760px at 50% -12%, rgba(46,156,214,.16), transparent 62%),
    radial-gradient(1000px 640px at 50% 122%, rgba(28,104,160,.10), transparent 60%),
    var(--bg0);
  color: var(--cyan-bright);
  font-family: var(--f-mono);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ── Scanline overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(140,225,255,.025) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────
   PANELS — bracket-corner motif
─────────────────────────────────────────────────────────────────── */
.panel {
  position: relative;
  background: var(--panel-fill);
  border: 1px solid var(--panel-border);
  box-shadow:
    0 6px 22px var(--shadow),
    0 0 16px rgba(50,170,225,.10),
    inset 0 0 26px rgba(50,160,215,.05);
}
/* faint top sheen — gives panels a screen-lit feel */
.panel::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(140,225,255,.05), transparent 42%);
}
.panel > * { position: relative; z-index: 1; }

.panel::before {
  content: '';
  position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  --b: 2px; --l: 16px; --c: var(--cyan);
  background:
    linear-gradient(var(--c),var(--c)) 0    0   /var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    0   /var(--b) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0   /var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0   /var(--b) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    100%/var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    100%/var(--b) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--b) var(--l) no-repeat;
  filter: drop-shadow(0 0 3px rgba(110,227,255,.75));
}

/* Dead-state panel variant — blood red, not cold grey */
.panel.deceased {
  border-color: var(--dead-border);
  background: linear-gradient(168deg, rgba(70,16,18,.3), rgba(28,8,10,.12));
  box-shadow: 0 0 16px rgba(180,40,40,.12), inset 0 0 26px rgba(160,40,40,.05);
}
.panel.deceased::before {
  --c: rgba(220,80,76,.7);
  filter: drop-shadow(0 0 4px rgba(220,70,66,.45));
}
.panel.deceased::after { background: linear-gradient(180deg, rgba(255,120,110,.05), transparent 42%); }

/* ──────────────────────────────────────────────────────────────────
   HEADER BLOCK (cyan chip)
─────────────────────────────────────────────────────────────────── */
.hdr {
  display: inline-block;
  padding: 4px 16px 4px 12px;
  font-family: var(--f-head);
  font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #d6f5ff 0%, #79d4f5 55%, #4fb9e0 100%);
  box-shadow: 0 0 12px rgba(110,227,255,.6), inset 0 0 7px rgba(255,255,255,.45);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.hdr.sm { font-size: 10px; padding: 3px 12px 3px 9px; }

/* Section heading with trailing rule — shared by DM & shop */
.sec-head {
  font-size: 11px; letter-spacing: .32em; color: var(--cyan-deep);
  text-transform: uppercase; display: flex; align-items: center; gap: var(--sp-3);
}
.sec-head::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(75,175,221,.45), transparent);
}

/* ──────────────────────────────────────────────────────────────────
   BUTTONS
─────────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .1em; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid var(--border-ui); background: var(--surf-tint); color: var(--cyan-bright);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
a.btn { text-decoration: none; display: inline-block; }
.btn:hover {
  background: var(--surf-hover); border-color: var(--border-focus);
  box-shadow: 0 0 10px var(--glow-2);
}
.btn:active { background: var(--surf-deep); transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--cyan-bright), var(--cyan)); color: var(--ink);
  border-color: var(--cyan-bright); font-weight: 700;
  box-shadow: 0 0 14px var(--cyan-dim), 0 3px 10px var(--shadow);
}
.btn-primary:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }

.btn-danger { border-color: #b13636; background: #1c0809; color: #ff8c8c; }
.btn-danger:hover { background: #2e1011; border-color: #e25151; color: #ffb0b0; }

.btn-warn { border-color: #b06a22; background: #1c1004; color: #ffb463; }
.btn-warn:hover { background: #2c1a08; border-color: #d9893a; }

.btn-gold { border-color: var(--gold-deep); background: #1c1404; color: var(--gold-bright); }
.btn-gold:hover { background: #2a1e08; border-color: var(--gold); }

.btn-sm { font-size: 11px; padding: 4px 10px; }


/* ── Toast (shared by the standalone pages; shown via JS display toggle) ── */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg1); border: 1px solid var(--cyan-dim);
  border-radius: 3px; padding: 10px 20px; font-size: 11px; letter-spacing: .18em;
  color: var(--cyan-bright); display: none; z-index: 300; white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────
   NOTIFICATION BANNERS
─────────────────────────────────────────────────────────────────── */
.notif-bar {
  padding: var(--sp-3) var(--sp-4); font-size: 12px; letter-spacing: .06em; line-height: 1.5;
  border-radius: 0 var(--r-1) var(--r-1) 0;
  border-left: 3px solid var(--cyan);
  background: var(--surf-notif);
  color: var(--cyan-bright);
}
.notif-bar.death {
  border-color: var(--danger);
  background: rgba(48,10,12,.6);
  color: rgba(255,170,165,.92);
}
.notif-bar.recovery {
  border-color: var(--active);
  background: rgba(10,42,26,.5);
  color: rgba(150,235,185,.9);
}

/* ──────────────────────────────────────────────────────────────────
   STAT CELL (generic)
─────────────────────────────────────────────────────────────────── */
.stat-cell { text-align: center; }
.stat-cell .stat-lbl { font-size: 10px; letter-spacing: .18em; color: var(--cyan-deep); display: block; margin-bottom: 2px; }
.stat-cell .stat-val { font-size: 20px; color: var(--type); text-shadow: 0 0 6px rgba(150,225,255,.35); display: block; line-height: 1; }
.stat-cell .stat-mod { font-size: 12px; color: var(--cyan-deep); display: block; margin-top: 1px; }

/* ──────────────────────────────────────────────────────────────────
   STATUS PILLS & BADGES
─────────────────────────────────────────────────────────────────── */
.ws-status {
  font-size: 11px; letter-spacing: .1em; padding: 3px 10px; border-radius: var(--r-1);
  display: inline-flex; align-items: center; gap: 6px;
}
.ws-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.ws-status.online  { color: #5fe3a0; border: 1px solid rgba(95,227,160,.4); }
.ws-status.offline { color: #ff8484; border: 1px solid rgba(255,132,132,.4); }
.ws-status.paused  { color: #f0c060; border: 1px solid rgba(240,192,96,.4); }

.badge-deceased {
  display: inline-flex; align-items: center;
  font-size: 10px; letter-spacing: .18em; padding: 3px 9px; border-radius: var(--r-1);
  border: 1px solid rgba(225,80,76,.5);
  color: rgba(255,140,135,.92);
  background: rgba(48,10,12,.6);
  vertical-align: middle;
}
.badge-dark {
  display: inline-flex; align-items: center;
  font-size: 10px; letter-spacing: .18em; padding: 3px 9px; border-radius: var(--r-1);
  border: 1px solid rgba(90,90,105,.5);
  color: rgba(150,150,165,.85);
  background: rgba(6,6,10,.6);
  vertical-align: middle;
}
.badge-active {
  display: inline-flex; align-items: center;
  font-size: 10px; letter-spacing: .18em; padding: 3px 9px; border-radius: var(--r-1);
  border: 1px solid rgba(76,217,123,.5);
  color: rgba(120,240,160,.95);
  background: rgba(8,40,18,.6);
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────
   CONDITION CHIPS
─────────────────────────────────────────────────────────────────── */
.condition-btn {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .1em;
  padding: 5px 10px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid var(--border-ui);
  background: var(--surf-tint); color: var(--text-muted);
  transition: border-color .15s, color .15s, background .15s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.condition-btn:hover { border-color: var(--border-focus); color: var(--cyan-bright); }
.condition-btn.active {
  border-color: rgba(236,170,70,.7);
  color: rgba(255,196,104,.98);
  background: rgba(54,30,6,.55);
  box-shadow: 0 0 9px rgba(236,170,70,.28), inset 0 0 10px rgba(236,170,70,.08);
}
.condition-tag {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: .1em; padding: 3px 8px; border-radius: var(--r-1);
  border: 1px solid rgba(236,170,70,.55);
  color: rgba(255,196,104,.95);
  background: rgba(54,30,6,.5);
}

/* ──────────────────────────────────────────────────────────────────
   HP +/- STEPPERS
─────────────────────────────────────────────────────────────────── */
.hp-adj {
  font-family: var(--f-mono); font-size: 18px; line-height: 1;
  padding: 4px 11px; border-radius: 3px; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border-ui); background: var(--surf-tint); color: var(--cyan-bright);
  transition: background .1s, border-color .1s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.hp-adj:hover  { background: var(--surf-hover); border-color: var(--border-focus); }
.hp-adj:active { background: var(--surf-select); }

/* ──────────────────────────────────────────────────────────────────
   DEATH FLASH — blood-red alarm pulse (alive → dead transition)
─────────────────────────────────────────────────────────────────── */
@keyframes death-flash {
  0%   { box-shadow: 0 0 0 transparent; }
  12%  { box-shadow: 0 0 70px rgba(255,60,50,.6), inset 0 0 50px rgba(255,70,60,.22); }
  34%  { box-shadow: 0 0 28px rgba(255,60,50,.28); }
  100% { box-shadow: 0 0 14px rgba(180,40,40,.12); }
}
.death-flash { animation: death-flash 1s ease-out forwards; }

/* Shared dying pulse — used wherever a death timer is live */
@keyframes alarm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .58; } }


/* Per-device REDUCED MOTION preference (player device settings) */
html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}