/* =============================================================================
   EMBERWOOD: THE BLACKBARK OATH — BitLife-Layout + Original Dark Palette
   -----------------------------------------------------------------------------
   BitLife-inspired layout: colorful action buttons, slide-up modals, clean
   typography, 3-column action grid — all on the original dark fantasy palette.
   ============================================================================= */

/* =============================================================================
   1) THEME TOKENS
   ============================================================================= */

:root{
  /* --- Original dark fantasy core palette --------------------------------- */
  --bg:#05070f;
  --bg-alt:#0d1220;
  --text:#f5f7ff;
  --muted:#adb5d0;
  --border:#232846;

  --accent:#4fc3f7;
  --accent-soft:rgba(79,195,247,0.20);

  --danger:#ff5252;
  --danger-soft:rgba(255,82,82,0.24);

  --gold:#f6d365;

  --success:#6fe28a;
  --success-soft:rgba(111,226,138,0.22);

  /* --- Quest / special accent -------------------------------------------- */
  --quest-gold:#ffe082;
  --quest-gold-soft:rgba(255,224,130,0.90);
  --quest-gold-dim:rgba(255,224,130,0.65);
  --quest-border:rgba(252,211,77,0.45);

  /* --- Radii -------------------------------------------------------------- */
  --radius:14px;
  --radius-tight:10px;
  --pill:999px;

  /* --- Spacing ------------------------------------------------------------ */
  --app-pad:10px;
  --screen-gap:8px;
  --panel-gap:4px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);

  /* --- Typography --------------------------------------------------------- */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;

  /* --- Shadows ------------------------------------------------------------ */
  --shadow-card:0 14px 35px rgba(0,0,0,0.65);
  --shadow-pop:0 18px 42px rgba(0,0,0,0.70);
  --shadow-hover:0 6px 14px rgba(0,0,0,0.50);
  --shadow-inset:0 2px 6px rgba(0,0,0,0.45) inset;

  /* --- Motion ------------------------------------------------------------- */
  --t-fast:0.10s;
  --t-med:0.18s;
  --t-slow:0.26s;
  --t-panel:0.42s;
  --t-panel-close:0.34s;
  --ease: cubic-bezier(0.25,0.1,0.25,1);
  --ease-decel: cubic-bezier(0.0,0.0,0.2,1);
  --ease-spring: cubic-bezier(0.22,1,0.36,1);
  --ease-close: cubic-bezier(0.4,0,1,1);

  /* --- Focus ring --------------------------------------------------------- */
  --focus:2px solid var(--accent);
  --focus-offset:2px;

  /* --- Surface presets ---------------------------------------------------- */
  --surface-0: var(--bg);
  --surface-1:#050816;
  --surface-2:#060815;
  --surface-3: radial-gradient(circle at top, #151b33 0, #05070f 70%);
  --surface-4: radial-gradient(circle at top, #11172b 0, #05070f 70%);
  --surface-card: radial-gradient(circle at top, #141a32 0, #05070f 60%, #05070f 100%);

  /* --- App backgrounds ---------------------------------------------------- */
  --body-bg: radial-gradient(circle at top, #151a33 0, #05070f 55%, #000 100%);
  --app-bg: linear-gradient(180deg, #05070f 0, #05070f 40%, #090d18 100%);

  /* --- Button gradients --------------------------------------------------- */
  --btn-bg: linear-gradient(135deg, #101424, #060817);
  --btn-accent-end: #7c4dff;
  --btn-bg-primary: linear-gradient(135deg, var(--accent), var(--btn-accent-end));
  --btn-bg-danger: linear-gradient(135deg, var(--danger), #ff8a65);

  /* --- Common state surfaces -------------------------------------------- */
  --surface-focus: radial-gradient(circle at top, #1f2b45 0, #060815 70%);
  --surface-selected: radial-gradient(circle at top, #18243c 0, #060815 70%);
  --surface-selected-soft: radial-gradient(circle at top, var(--accent-soft), var(--surface-1));
  --surface-hover: radial-gradient(circle at top, rgba(79,195,247,0.10), rgba(0,0,0,0.08));
  --surface-hover-soft: radial-gradient(circle at top, var(--accent-soft), rgba(0,0,0,0.10));

  /* --- Rarity text colors ------------------------------------------------ */
  --rarity-common:#cfd6e6;
  --rarity-uncommon:#6fe28a;
  --rarity-rare:#6aa9ff;
  --rarity-epic:#c78bff;
  --rarity-legendary:#ffcc66;
  --rarity-mythic:#ff66cc;

  /* --- Class meter accents (combat HUD) ---------------------------------- */
  --cls-rogue:#57e3c7;
  --cls-ranger:#7dff7a;
  --cls-shaman:#63d7ff;
  --cls-necromancer:#b18bff;
  --cls-mage:#6aa9ff;
  --cls-warrior:#ffb86b;
  --cls-blood:#ff5c6b;
  --cls-paladin:#ffcc66;
  --cls-cleric:#bfe9ff;
  --cls-berserker:#ff7a2f;
  --cls-vampire:#ff7fd1;

  --theme-name:"default";

  /* Accessibility hooks (applied by the ew.a11yBridge plugin) */
  --ew-text-scale: 1;
}

/* Theme overrides: only touch variables */
.theme-arcane{
  --bg:#0d1028; --bg-alt:#161b3a; --border:#2e3a7f;
  --text:#dbe4ff; --muted:#8894c7;
  --accent:#8fb1ff; --accent-soft:rgba(143,177,255,0.22);
  --danger:#ff6b81; --danger-soft:rgba(255,107,129,0.25);
  --gold:#c8b8ff;
  --success:#8de8c8; --success-soft:rgba(141,232,200,0.22);
  --btn-accent-end:#a855f7;
  --surface-1:#0e1230; --surface-2:#111535;
  --surface-3:radial-gradient(circle at top, #1a2050 0, #0d1028 70%);
  --surface-4:radial-gradient(circle at top, #161b3a 0, #0d1028 70%);
  --surface-card:radial-gradient(circle at top, #181e42 0, #0d1028 60%);
  --body-bg:radial-gradient(circle at top, #1a2050 0, #0d1028 55%, #000 100%);
  --app-bg:linear-gradient(180deg, #0d1028 0, #0d1028 40%, #0a0e22 100%);
  --btn-bg:linear-gradient(135deg, #151b42, #0a0e24);
  --quest-gold:#d8cdff; --quest-gold-soft:rgba(216,205,255,0.90); --quest-gold-dim:rgba(216,205,255,0.65); --quest-border:rgba(200,184,255,0.45);
}
.theme-inferno{
  --bg:#1a0600; --bg-alt:#300b00; --border:#802000;
  --text:#ffe8d9; --muted:#c78f73;
  --accent:#ff7a2f; --accent-soft:rgba(255,122,47,0.25);
  --danger:#ff3b2f; --danger-soft:rgba(255,59,47,0.25);
  --gold:#ffb347;
  --success:#a8e86a; --success-soft:rgba(168,232,106,0.22);
  --btn-accent-end:#c0392b;
  --surface-1:#200800; --surface-2:#2a0e00;
  --surface-3:radial-gradient(circle at top, #3a1400 0, #1a0600 70%);
  --surface-4:radial-gradient(circle at top, #2a0e00 0, #1a0600 70%);
  --surface-card:radial-gradient(circle at top, #2e1000 0, #1a0600 60%);
  --body-bg:radial-gradient(circle at top, #2e1000 0, #1a0600 55%, #000 100%);
  --app-bg:linear-gradient(180deg, #1a0600 0, #1a0600 40%, #1e0800 100%);
  --btn-bg:linear-gradient(135deg, #2a0e00, #1a0600);
  --quest-gold:#ffd08a; --quest-gold-soft:rgba(255,208,138,0.90); --quest-gold-dim:rgba(255,208,138,0.65); --quest-border:rgba(255,179,71,0.45);
}
.theme-forest{
  --bg:#07140c; --bg-alt:#0e2317; --border:#1f4d32;
  --text:#e1ffe6; --muted:#94c7a5;
  --accent:#4dff85; --accent-soft:rgba(77,255,133,0.22);
  --danger:#ff7070; --danger-soft:rgba(255,112,112,0.25);
  --gold:#d2ff96;
  --success:#4dff85; --success-soft:rgba(77,255,133,0.22);
  --btn-accent-end:#0ea058;
  --surface-1:#0a1a10; --surface-2:#0d2015;
  --surface-3:radial-gradient(circle at top, #152d1e 0, #07140c 70%);
  --surface-4:radial-gradient(circle at top, #0e2317 0, #07140c 70%);
  --surface-card:radial-gradient(circle at top, #122518 0, #07140c 60%);
  --body-bg:radial-gradient(circle at top, #152d1e 0, #07140c 55%, #000 100%);
  --app-bg:linear-gradient(180deg, #07140c 0, #07140c 40%, #091710 100%);
  --btn-bg:linear-gradient(135deg, #0e2317, #07140c);
  --quest-gold:#d2ffa0; --quest-gold-soft:rgba(210,255,160,0.90); --quest-gold-dim:rgba(210,255,160,0.65); --quest-border:rgba(210,255,150,0.45);
}
.theme-holy{
  --bg:#f7f3e8; --bg-alt:#ece5d6; --border:#d7caaa;
  --text:#3a2f1c; --muted:#857a68;
  --accent:#ffe585; --accent-soft:rgba(255,229,133,0.35);
  --danger:#d9534f; --danger-soft:rgba(217,83,79,0.22);
  --gold:#e4c96b;
  --success:#3a8c4a; --success-soft:rgba(58,140,74,0.22);
  --btn-accent-end:#e4a000;
  --surface-1:#f2ecdd; --surface-2:#efe6d5;
  --surface-3:radial-gradient(circle at top, rgba(255,255,255,0.6) 0, var(--bg) 70%);
  --surface-4:radial-gradient(circle at top, rgba(255,255,255,0.45) 0, var(--bg) 70%);
  --surface-card:radial-gradient(circle at top, rgba(255,255,255,0.85) 0, var(--bg) 75%);
  --body-bg:radial-gradient(circle at top, #ffffff 0, var(--bg) 55%, #ddd 100%);
  --app-bg:linear-gradient(180deg, var(--bg) 0, var(--bg) 60%, #e9e2d1 100%);
  --btn-bg:linear-gradient(135deg, #f0e8d5, #ece0c5);
  --quest-gold:#b87f28; --quest-gold-soft:rgba(184,127,40,0.90); --quest-gold-dim:rgba(184,127,40,0.65); --quest-border:rgba(184,127,40,0.45);
}
.theme-shadow{
  --bg:#05050a; --bg-alt:#0a0a13; --border:#2b2348;
  --text:#dcd2f9; --muted:#948bb5;
  --accent:#a16bff; --accent-soft:rgba(161,107,255,0.30);
  --danger:#ff2e63; --danger-soft:rgba(255,46,99,0.25);
  --gold:#b48dfd;
  --success:#7de8a8; --success-soft:rgba(125,232,168,0.22);
  --btn-accent-end:#6d28d9;
  --surface-1:#0a0a14; --surface-2:#0e0e1c;
  --surface-3:radial-gradient(circle at top, #161428 0, #05050a 70%);
  --surface-4:radial-gradient(circle at top, #100f22 0, #05050a 70%);
  --surface-card:radial-gradient(circle at top, #131125 0, #05050a 60%);
  --body-bg:radial-gradient(circle at top, #161428 0, #05050a 55%, #000 100%);
  --app-bg:linear-gradient(180deg, #05050a 0, #05050a 40%, #080716 100%);
  --btn-bg:linear-gradient(135deg, #0e0c1e, #05050a);
  --quest-gold:#c9a8ff; --quest-gold-soft:rgba(201,168,255,0.90); --quest-gold-dim:rgba(201,168,255,0.65); --quest-border:rgba(180,141,253,0.45);
}

/* =============================================================================
   A11Y OVERRIDES
   ============================================================================= */

body.high-contrast{
  /* Make muted text more legible and borders more visible */
  --muted:#cfd6e6;
  --border:#5560a3;
  --shadow-card:0 10px 28px rgba(0,0,0,0.72);
}

/* =============================================================================
   2) GLOBAL RESET + LAYOUT
   ============================================================================= */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  margin:0;
  padding:0;
  font-family:var(--font);
  background:var(--body-bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:stretch;
  min-height:100vh;
  /* Mobile-safe viewport height (prevents address bar cutoffs on iOS/Android) */
  min-height:100dvh;
  touch-action:manipulation;
  overflow:hidden;
}

#app{
  width:100%;
  max-width:480px;
  height:100vh;
  /* Mobile-safe viewport height */
  height:100dvh;
  background:var(--app-bg);
  display:flex;
  flex-direction:column;
  padding:
    calc(var(--app-pad) + var(--safe-top))
    calc(var(--app-pad) + var(--safe-right))
    calc(var(--app-pad) + var(--safe-bottom))
    calc(var(--app-pad) + var(--safe-left));
  gap:var(--screen-gap);
}

.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  animation:screenFadeIn var(--t-slow) var(--ease-decel);
}

@media (max-width: 480px){
  .btn{ min-height:48px; }
  .btn.small{ min-height:40px; }
  .icon-btn{
    width:34px;
    height:34px;
    font-size:1rem;
  }
  .log-chip{
    min-height:28px;
    padding:6px 10px;
  }
  .modal-actions .btn{
    flex:1 1 100%;
    min-width:0;
  }
}

/* Keep your existing .hidden API, plus a utility alias */
.hidden,
.u-hidden{
  display:none !important;
  pointer-events:none !important;
  opacity:0 !important;
}

/* =============================================================================
   3) TYPOGRAPHY HELPERS
   ============================================================================= */

h1,h2,h3{
  margin:0;
  font-weight:700;
  letter-spacing:0.01em;
}
h1{ font-size:1.35rem; }
h2{ font-size:1.1rem; }
h3{ font-size:0.95rem; }

.center{ text-align:center; }

.hint{
  font-size:0.82rem;
  color:var(--muted);
  margin-top:6px;
  text-align:center;
}

.section-title{
  font-size:0.74rem;
  font-weight:600;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:0.12em;
  margin-bottom:6px;
}

/* =============================================================================
   4) SHARED PATTERNS (SURFACES + INTERACTIVE CONTROLS)
   ============================================================================= */

/* ---- Surfaces (panels/cards/modals) ------------------------------------- */
:where(.card,#hud,#scene,#logBox,#actions,.enemy-panel,#modalPanel,#enemyModalPanel){
  border:1px solid var(--border);
  animation:panelDropIn var(--t-slow) var(--ease-decel);
}

.card{
  background:var(--surface-card);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow-card);
}
.card + .card{ margin-top:8px; }

/* ---- Scrollbars hidden (keep scrolling) --------------------------------- */
:where(#classScrollContainer,#modalBody,#enemyModalBody,.companion-actions,.log-filter-row,.char-tabs,#gameMain,#sceneText,#questDesc,#log,#actions,.inventory-slide-body){
  scrollbar-width:none;                 /* Firefox */
  -webkit-overflow-scrolling:touch;
}
:where(#classScrollContainer,#modalBody,#enemyModalBody,.companion-actions,.log-filter-row,.char-tabs,#gameMain,#sceneText,#questDesc,#log,#actions,.inventory-slide-body)::-webkit-scrollbar{
  display:none;                         /* Chromium/WebKit */
}

/* ---- Shared focus ring --------------------------------------------------- */
:where(button,[role="button"],.btn,.icon-btn,.pill-option,.log-chip,.char-tab,.inv-tab,.settings-select):focus-visible{
  outline:var(--focus);
  outline-offset:var(--focus-offset);
}

/* ---- Shared press feedback ---------------------------------------------- */
/* Subtle scale + dim so every tap has clear physical feedback. */
:where(.btn,.icon-btn,.log-chip,.char-tab,.inv-tab):active{
  transform:scale(0.96);
  filter:brightness(0.82);
  transition-duration:0.05s !important;
}
/* Action-bar buttons get a tighter scale so the grid doesn't shift */
#actions .btn.small:active{
  transform:scale(0.94);
  filter:brightness(0.80);
  transition-duration:0.05s !important;
}

/* =============================================================================
   5) BUTTON SYSTEM — BitLife-style flat, colorful, rounded
   ============================================================================= */

.btn{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:none;

  background:var(--btn-bg);
  color:var(--text);
  padding:14px 16px;
  width:100%;
  font-size:1rem;
  font-weight:600;
  margin-top:10px;

  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  letter-spacing:0.01em;

  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease),
    background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

/* Press flash overlay — gives a quick white shimmer on tap */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(255,255,255,0);
  border-radius:inherit;
  pointer-events:none;
  transition:background 0.05s;
}
/* Ensure button text/icons stay above the shimmer */
.btn > *,
.btn > span,
.btn > svg{
  position:relative;
  z-index:1;
}
.btn:active::before{
  background:rgba(255,255,255,0.10);
}

@media (hover:hover) and (pointer:fine){
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-hover);
    filter:brightness(1.05);
  }
}

.btn.primary{
  background:var(--btn-bg-primary);
  color:#fff;
  border:none;
}

.btn.danger{
  background:var(--btn-bg-danger);
  color:#fff;
  border:none;
}

.btn.outline{
  background:var(--surface-card);
  border:1.5px solid var(--border);
  color:var(--accent);
  font-weight:600;
}

.btn.small{
  padding:11px 14px;
  background:var(--surface-card);
  font-size:0.9rem;
  color:var(--text);
  border:1px solid var(--border);
  font-weight:600;
  border-radius:var(--radius);
}

.btn.glow,
.btn.primary.glow{ animation:btnGlow 1.6s ease-in-out infinite; }

#actions .btn.small{
  width:100%;
  margin-top:0;
  padding:calc(9px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  min-height:calc(42px * var(--ui-scale, 1));
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.03em;
  border-radius:var(--radius-tight);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Primary/danger hierarchy inside the action bar */
#actions .btn.small.primary{
  background:var(--btn-bg-primary);
  color:var(--bg);
  border-color:rgba(255,255,255,0.18);
}
#actions .btn.small.danger{
  background:transparent;
  color:var(--danger);
  border-color:var(--danger);
}
@media (hover:hover) and (pointer:fine){
  #actions .btn.small.danger:hover{
    background:var(--danger-soft);
  }
}

/* =============================================================================
   6) ICON BUTTONS (MENU TOGGLE, MODAL CLOSE, SMALL ROUND CONTROLS)
   ============================================================================= */

.icon-btn{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--muted);

  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:1rem;
  cursor:pointer;

  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
}

/* Tap highlight (pills only): no movement, just a quick glow/flash */
.icon-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(125,92,255,0.55), rgba(125,92,255,0.0) 60%);
}

@keyframes pillTapFlash{
  0%   { opacity:0; }
  18%  { opacity:0.75; }
  100% { opacity:0; }
}

@keyframes pillTapGlow{
  0%   { box-shadow:none; border-color:var(--border); }
  18%  { box-shadow:0 0 0 2px rgba(125,92,255,0.22), 0 0 18px rgba(125,92,255,0.28); border-color:var(--accent); }
  100% { box-shadow:none; border-color:var(--border); }
}

.icon-btn.pill-tap-anim{
  animation:pillTapGlow var(--t-slow) var(--ease) 1;
}
.icon-btn.pill-tap-anim::after{
  animation:pillTapFlash var(--t-slow) var(--ease) 1;
}

@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-hover);
    border-color:var(--accent);
    background:var(--surface-2);
  }
}

/* =============================================================================
   7) FORMS (CHARACTER CREATION / FEEDBACK)
   ============================================================================= */

.field{ margin-top:6px; }

.field label{
  display:block;
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.10em;
  color:var(--muted);
  margin-bottom:5px;
}

/* Inputs share a surface */
:where(.field input[type="text"], .field textarea, .field select, #feedbackType, #feedbackText, .inv-search, .inv-sort){
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
}

.field input[type="text"]{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  font-size:0.95rem;
}
.field input[type="text"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  background:var(--surface-focus);
}

.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  font-size:0.9rem;
  resize:vertical;
  min-height:90px;
}
.field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

.field select{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  font-size:0.9rem;
  appearance:none;
  background-image:none;
}
.field select:focus-visible{
  outline:2px solid var(--accent);
}

/* Name row */
.name-input-row{ display:flex; align-items:center; gap:8px; }
.name-input-row input[type="text"]{ flex:1 1 auto; }
.name-random-btn{ flex:0 0 auto; padding:0; width:36px; height:36px; font-size:1.1rem; }

/* =============================================================================
   8) PILL OPTIONS (DIFFICULTY + DEV CHEATS + TAVERN GAMES)
   ============================================================================= */

.option-row{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  margin-top:8px;
  width:100%;
  overflow:hidden;
}

.pill-option{
  flex:1 1 0;
  min-width:0;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  padding:10px 8px;
  background:var(--surface-card);

  font-size:clamp(0.6rem, 1.6vw, 0.85rem);
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;

  color:var(--muted);
  cursor:pointer;
  text-align:center;

  transition:
    transform var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    color var(--t-med) var(--ease);
}

.pill-option.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  color:var(--accent);
  background:var(--surface-selected);
  font-weight:700;
}

/* Dev cheats pill internals */
.dev-cheats-pill{ cursor:pointer; }
.dev-cheats-pill .dev-cheats-label{ display:flex; align-items:center; gap:0.5rem; }
.dev-cheats-pill input[type="checkbox"]{ display:none; }
.dev-cheats-pill .dev-cheats-title{ font-weight:600; font-size:clamp(0.7rem, 1.6vw, 0.85rem); }
.dev-cheats-pill .dev-cheats-subtitle{
  margin-top:0.25rem;
  font-size:clamp(0.65rem, 1.4vw, 0.78rem);
  opacity:0.8;
  line-height:1.25;
}

/* Tavern game pills */
.tavern-game-row{ flex-wrap:wrap; justify-content:space-between; }

.tavern-game-pill{
  width:auto;
  flex:1 1 calc(50% - 6px);
  min-width:0;
  max-width:100%;

  border-radius:var(--pill);
  border:1px solid var(--border);
  padding:6px 8px;

  font-size:clamp(0.6rem, 1.8vw, 0.8rem);
  line-height:1.2;
  text-align:center;
  white-space:normal;
  word-break:break-word;
}

.tavern-game-pill.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(79,195,247,0.30);
  background:var(--surface-selected-soft);
  color:var(--text);
}

/* Tavern footer */
.tavern-footer-actions{
  margin-top:4px;
  padding-top:0;
  position:sticky;
  bottom:0;
  padding-bottom:4px;
  z-index:1;

  flex:0 0 auto;
  display:flex;
  gap:6px;
}
.tavern-footer-actions .btn{ flex:1 1 0; }

/* Tiny meters used in Tavern Games (Luck / Heat) */
.mini-meter-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin-top:4px;
}
.mini-meter-block{ flex:1 1 0; }
.mini-meter-label{
  font-size:0.75rem;
  opacity:0.75;
  margin-bottom:2px;
}
.mini-meter{
  height:8px;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background:var(--bg-alt);
}
.mini-meter-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  opacity:0.7;
}

/* =============================================================================
   9) CHEAT / CHANGELOG MODALS
   ============================================================================= */

.changelog-modal,
.cheat-modal{ font-size:0.8rem; line-height:1.35; }

.changelog-modal{
  max-width:100%;
  overflow-x:hidden;
  touch-action:pan-y;
  overscroll-behavior-x:none;
}

/* Prevent long, unbroken changelog strings (paths, IDs) from forcing horizontal panning */
.changelog-modal :is(p, summary, li, h4, ul){
  overflow-wrap:anywhere;
  word-break:break-word;
}

.changelog-modal details{
  max-width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:6px 8px;
  margin-bottom:6px;
  background:var(--surface-2);
}

.changelog-modal summary{
  cursor:pointer;
  list-style:none;
  font-size:0.8rem;
}
.changelog-modal summary::-webkit-details-marker{ display:none; }

.changelog-modal summary::before{
  content:"▸";
  display:inline-block;
  margin-right:4px;
  transform:translateY(-0.5px);
}
.changelog-modal details[open] summary::before{ content:"▾"; }

.changelog-modal h4{
  margin:4px 0 2px;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
}
.changelog-modal ul{ margin:0 0 4px 1.1rem; padding-left:0; }
.changelog-modal li{ margin-bottom:2px; }


/* Cheat toolbar + status (keeps the changelog/cheat aesthetic) */
.cheat-toolbar{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
  margin:4px 0 6px;
}
.cheat-search-wrap{ flex:1 1 220px; min-width:180px; }

.cheat-statusbar{
  /* These variables are tuned by JS to keep pills within 2 rows on mobile */
  --cheat-stat-font: 11.5px;
  --cheat-stat-padY: 3px;
  --cheat-stat-padX: 8px;
  --cheat-stat-gap: 4px;

  display:flex;
  flex-wrap:wrap;
  gap:var(--cheat-stat-gap);
  margin:0 0 6px;
}
.cheat-stat{
  font-size:var(--cheat-stat-font);
  line-height:1.1;
  white-space:nowrap;
  color:var(--muted);
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:var(--cheat-stat-padY) var(--cheat-stat-padX);
  background:var(--surface-card);
}

/* Wider combined pills (e.g., Location/Difficulty, Flags) */
.cheat-stat-wide{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Hard cap: never scroll the cheat status bar.
   If we still exceed 2 rows at minimum scale, clamp wide pills so everything wraps into 2 rows. */
.cheat-statusbar.two-row-clamp .cheat-stat-wide{
  max-width:calc((100% - var(--cheat-stat-gap)) / 2);
}

/* Compact mode: invoked only if the bar still wants a 3rd row at minimum scale.
   Keeps the aesthetic but tightens the layout a touch more. */
.cheat-statusbar.two-row-compact{
  --cheat-stat-gap:3px;
}
.cheat-statusbar.two-row-compact .cheat-stat{
  letter-spacing:0;
}

/* Tighten spacing inside cheat modal (keeps aesthetic, reduces vertical bloat) */
.cheat-modal .btn{
  margin-top:0;
  padding:10px 12px;
}
.cheat-modal .btn.small{ padding:6px 10px; }

/* Inputs inside cheat menu (teleport, ids, metrics, etc.) */
.cheat-modal :is(input.input, select.input){
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  padding:10px 12px;
  border-radius:var(--radius-tight);
  outline:none;

  transition:
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease);
}
.cheat-modal :is(input.input, select.input)::placeholder{ color:var(--muted); opacity:0.85; }
.cheat-modal :is(input.input, select.input):focus,
.cheat-modal :is(input.input, select.input):focus-visible{
  outline:2px solid var(--accent);
  border-color:var(--accent);
}



/* Cheat menu action rows: keep controls aligned on mobile (2-up layout that wraps cleanly) */
.cheat-modal .item-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.cheat-modal .item-actions > *{
  flex:1 1 calc(50% - 8px);
  min-width:160px;
}
.cheat-modal .item-actions .btn,
.cheat-modal .item-actions button{
  width:100%;
  justify-content:center;
}
.cheat-modal .item-actions :is(input.input, select.input){
  width:100%;
}

/* Composite field (e.g., item id + qty) used to preserve alignment */
.cheat-inline{
  display:flex;
  gap:4px;
  width:100%;
  align-items:stretch;
}
.cheat-inline > :first-child{ flex:1 1 auto; }
.cheat-inline > :last-child{ flex:0 0 96px; }

@media (max-width:420px){
  .cheat-modal .item-actions > *{ flex-basis:100%; min-width:0; }
  .cheat-inline{ flex-wrap:wrap; }
  .cheat-inline > :last-child{ flex:1 1 100%; }
}
/* Cheat sections */
.cheat-section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:6px;
  background:var(--surface-2);
  color:var(--muted);
  padding:4px 6px;
  overflow:hidden;
}
.cheat-section-header{
  width:100%;
  padding:0;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:0.8rem;
  font-weight:600;
  border:none;
  outline:none;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
}
.cheat-section-chevron{
  display:inline-block;
  min-width:1rem;
  text-align:center;
  font-size:0.8rem;
  opacity:0.85;
  transform:translateY(-0.5px);
  color:inherit;
}
.cheat-section-title{
  flex:1;
  text-align:left;
  font-size:0.74rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:inherit;
}
.cheat-section-body{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* =============================================================================
   10) CLASS SELECTION SCROLLER
   ============================================================================= */

#classScrollContainer{
  max-height:40vh;
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:6px;
  padding-right:0;
}
#classOptions{ display:flex; flex-direction:column; gap:4px; }

.class-card{
  width:100%;
  padding:14px;
  border-radius:var(--radius);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  margin-bottom:2px;
  cursor:pointer;

  display:flex;
  gap:12px;
  align-items:center;
  transition:var(--t-med) var(--ease);
  position:relative;
}
.class-card:hover{ background:var(--surface-selected); border-color:var(--accent); }
.class-card.selected{
  background:var(--surface-selected);
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.class-card-icon{
  width:52px;
  height:72px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(0,0,0,0.35);
  padding:4px;
  overflow:hidden;
}
.class-card-icon svg{
  width:100%;
  height:100%;
  display:block;
}
.class-modal-sprite{
  width:80px;
  height:110px;
  flex-shrink:0;
  border-radius:10px;
  background:rgba(0,0,0,0.35);
  padding:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.class-modal-sprite svg{
  width:100%;
  height:100%;
  display:block;
}
.class-card-content{ display:flex; flex-direction:column; gap:4px; }
.class-card-name{ font-size:1rem; font-weight:600; letter-spacing:0.04em; }
.class-card-desc{ color:var(--muted); font-size:0.8rem; line-height:1.2; }

/* Info button on class cards */
.class-info-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--accent);
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--t-med) var(--ease);
  z-index:2;
}
.class-info-btn:hover{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
  transform:scale(1.1);
}

/* =============================================================================
   10b) CHARACTER CREATION — viewport-fit layout
   Make the card a flex column that fills the screen height so every element
   (including the "Begin Adventure" and "Back" buttons) is always visible
   without any page-level scrolling. The class list grows/shrinks to fill
   whatever vertical space remains.
   ============================================================================= */

#characterScreen {
  overflow: hidden;
}
#characterScreen > .card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Slightly tighter padding to reclaim vertical space */
  padding: 10px 12px 8px;
}
#characterScreen > .card > h2 {
  flex-shrink: 0;
  margin-bottom: 4px;
}
/* All direct .field children shrink to their natural size … */
#characterScreen > .card > .field {
  flex-shrink: 0;
  margin-top: 2px;
}
/* … except the class field, which grows to fill remaining space */
#charClassField {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}
#charClassField > label {
  flex-shrink: 0;
}
#charClassField > #classScrollContainer {
  flex: 1 1 0;
  min-height: 50px;
  max-height: none;  /* remove the 40vh cap — flex controls the size */
}
/* Bottom action buttons — no extra top margin, sit snugly */
#characterScreen > .card > #btnStartGame,
#characterScreen > .card > #btnBackToMenu {
  flex-shrink: 0;
  margin-top: 6px;
  padding: 10px 12px;
}

/* =============================================================================
   11) IN-GAME HUD + PANELS — BitLife header style
   ============================================================================= */

#hud{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 14px;
  border-radius:var(--radius);
  background:var(--surface-card);
}
#hud-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  font-size:0.85rem;
}

/* HUD entity sprite — sits to the left of the name block, same height as the 2-line text */
.hud-sprite{
  flex:0 0 auto;
  width:26px;
  height:36px;
  overflow:hidden;
}
.hud-sprite:empty{ display:none; }
.hud-sprite svg{ width:100%; height:100%; display:block; }

/* HUD top-right mini buttons */
.hud-top-buttons{
  display:flex;
  align-items:center;
  gap:6px;
}

.hud-pill{
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  padding:5px 10px;
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.02em;
  cursor:pointer;
  line-height:1;
}

.hud-pill:hover{ background:var(--surface-selected); border-color:var(--accent); }
#hud-name{ font-weight:700; font-size:0.92rem; }
#hud-class-diff{ color:var(--muted); font-size:0.78rem; font-weight:500; }
#hud-bars{ display:flex; flex-direction:column; gap:5px; }

/* Class mechanics meter (combat only) */
.hud-class-meter{
  /* default accent if class mapping missing */
  --meter-accent: var(--accent);
  --meter-accent-soft: var(--accent-soft);
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0 2px;
  font-size:0.62rem;
  color:var(--muted);
}

/* Per-class tinting for the combat meter icons/fill */
.hud-class-meter[data-meter-class="rogue"]{ --meter-accent:var(--cls-rogue); --meter-accent-soft:rgba(87,227,199,0.22); }
.hud-class-meter[data-meter-class="ranger"]{ --meter-accent:var(--cls-ranger); --meter-accent-soft:rgba(125,255,122,0.20); }
.hud-class-meter[data-meter-class="shaman"]{ --meter-accent:var(--cls-shaman); --meter-accent-soft:rgba(99,215,255,0.20); }
.hud-class-meter[data-meter-class="necromancer"]{ --meter-accent:var(--cls-necromancer); --meter-accent-soft:rgba(177,139,255,0.22); }
.hud-class-meter[data-meter-class="mage"]{ --meter-accent:var(--cls-mage); --meter-accent-soft:rgba(106,169,255,0.20); }
.hud-class-meter[data-meter-class="warrior"]{ --meter-accent:var(--cls-warrior); --meter-accent-soft:rgba(255,184,107,0.20); }
.hud-class-meter[data-meter-class="blood"]{ --meter-accent:var(--cls-blood); --meter-accent-soft:rgba(255,92,107,0.22); }
.hud-class-meter[data-meter-class="paladin"]{ --meter-accent:var(--cls-paladin); --meter-accent-soft:rgba(255,204,102,0.20); }
.hud-class-meter[data-meter-class="cleric"]{ --meter-accent:var(--cls-cleric); --meter-accent-soft:rgba(191,233,255,0.20); }
.hud-class-meter[data-meter-class="berserker"]{ --meter-accent:var(--cls-berserker); --meter-accent-soft:rgba(255,122,47,0.22); }
.hud-class-meter[data-meter-class="vampire"]{ --meter-accent:var(--cls-vampire); --meter-accent-soft:rgba(255,127,209,0.22); }
.hud-class-meter .meter-label{
  color:var(--text);
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:0.58rem;
}
.hud-class-meter .meter-dots{ display:inline-flex; gap:4px; align-items:center; }
.hud-class-meter .meter-dot{
  width:14px;
  height:14px;
  border:1.5px solid var(--border);
  background:var(--surface-2);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  opacity:0.5;
  user-select:none;
  color:var(--muted);
}
.hud-class-meter .meter-dot.filled{
  opacity:1;
  color:var(--meter-accent);
  border-color:var(--meter-accent);
  background:rgba(255,255,255,0.00);
  box-shadow:
    0 0 10px var(--meter-accent-soft);
}

/* "Ready" cue: once all ticks are active, pulse the meter area so it reads as charged/usable */
.hud-class-meter .meter-dots{
  position:relative;
}
.hud-class-meter.is-ready .meter-dots::after{
  content:"";
  position:absolute;
  left:-4px;
  right:-4px;
  top:-4px;
  bottom:-4px;
  border-radius:var(--radius);
  pointer-events:none;
  /* "Ready" cue: pulse (no side-to-side travel) so it reads as charged/usable */
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.12) 0%,
    var(--meter-accent-soft) 36%,
    rgba(255,255,255,0.00) 72%);
  opacity:0.55;
  mix-blend-mode:screen;
  box-shadow:
    0 0 10px var(--meter-accent-soft),
    0 0 18px rgba(255,255,255,0.12);
  filter:hue-rotate(0deg) saturate(1.55) brightness(1.10);
  animation: meter-ready-pulse 0.92s ease-in-out infinite;
}
@keyframes meter-ready-pulse{
  0%{
    opacity:0.42;
    filter:hue-rotate(0deg) saturate(1.45) brightness(1.00);
    box-shadow:
      0 0 8px var(--meter-accent-soft),
      0 0 12px rgba(255,255,255,0.06);
  }
  50%{
    opacity:0.98;
    filter:hue-rotate(26deg) saturate(2.05) brightness(1.28);
    box-shadow:
      0 0 18px var(--meter-accent-soft),
      0 0 30px rgba(255,255,255,0.12);
  }
  100%{
    opacity:0.42;
    filter:hue-rotate(0deg) saturate(1.45) brightness(1.00);
    box-shadow:
      0 0 8px var(--meter-accent-soft),
      0 0 12px rgba(255,255,255,0.06);
  }
}
.hud-class-meter .meter-icon{
  width:13px;
  height:13px;
  display:block;
}
.hud-class-meter .meter-icon-fill{ display:none; }
.hud-class-meter .meter-icon-stroke{
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0.9;
}
.hud-class-meter .meter-dot:not(.filled) .meter-icon-stroke{ opacity:0.75; }
.hud-class-meter .meter-turns{ opacity:0.85; }
.hud-class-meter .meter-chip{
  padding:2px 8px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-weight:600;
  font-size:0.62rem;
}

/* =============================================================================
   COMBAT STATUS TAGS (shared by player HUD and enemy panel)
   ============================================================================= */

.hud-player-status{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:4px 0 2px;
  font-size:0.62rem;
}

.hud-player-status .status-tag,
.enemy-status-line .status-tag{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px 6px;
  border-radius:var(--pill);
  font-weight:600;
  font-size:0.58rem;
  line-height:1.2;
  white-space:nowrap;
}

.hud-player-status .status-tag.buff,
.enemy-status-line .status-tag.buff{
  border:1.5px solid var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
}

.hud-player-status .status-tag.debuff,
.enemy-status-line .status-tag.debuff{
  border:1.5px solid var(--danger-soft);
  background:var(--danger-soft);
  color:var(--danger);
}

.hud-player-status .status-tag.neutral,
.enemy-status-line .status-tag.neutral{
  border:1.5px solid rgba(255,149,0,0.20);
  background:rgba(255,149,0,0.10);
  color:var(--gold);
}

.bar{
  height:12px;
  border-radius:var(--pill);
  border:none;
  background:var(--border);
  overflow:hidden;
  position:relative;
  font-size:0.65rem;
}
.bar-fill{ height:100%; width:0; transition:width var(--t-slow) var(--ease-decel); position:relative; overflow:hidden; }
.bar-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color:#fff;
  font-weight:700;
  font-size:0.62rem;
  text-shadow:0 1px 2px rgba(0,0,0,0.40);
}

.hp-fill{
  background:var(--danger);
}
.resource-fill.mana{
  background:var(--accent);
}
.resource-fill.fury{ background:#ff6b00; }
.resource-fill.blood{ background:#ff375f; }
.resource-fill.essence{ background:#bf5af2; }
/* Companion resource types */
.resource-fill.energy{ background:#34c759; }
.resource-fill.focus{ background:#5ac8fa; }
.resource-fill.nature{ background:#30d158; }
.resource-fill.shadow{ background:#8944ab; }
.resource-fill.arcane{ background:#5856d6; }
.resource-fill.dark-energy{ background:#636366; }
/* Live bar motion: layered drifting texture + sheen (transform-based for smooth iOS/Safari rendering).
   The animation is intentionally subtle but clearly "moving" so HP/Mana feel alive. */
.hp-fill::before,
.resource-fill.mana::before,
.resource-fill.fury::before,
.resource-fill.blood::before,
.resource-fill.essence::before,
.resource-fill.energy::before,
.resource-fill.focus::before,
.resource-fill.nature::before,
.resource-fill.shadow::before,
.resource-fill.arcane::before,
.resource-fill.dark-energy::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-140%;
  width:280%;
  pointer-events:none;
  background:repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.00) 0,
    rgba(255,255,255,0.00) 10px,
    rgba(255,255,255,0.12) 14px,
    rgba(255,255,255,0.00) 18px
  );
  opacity:0.14;
  mix-blend-mode:overlay;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:bar-drift 1.90s linear infinite;
}

.hp-fill::after,
.resource-fill.mana::after,
.resource-fill.fury::after,
.resource-fill.blood::after,
.resource-fill.essence::after,
.resource-fill.energy::after,
.resource-fill.focus::after,
.resource-fill.nature::after,
.resource-fill.shadow::after,
.resource-fill.arcane::after,
.resource-fill.dark-energy::after{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  left:-160%;
  width:160%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.26) 42%,
    rgba(255,255,255,0.00) 72%);
  opacity:0.40;
  mix-blend-mode:screen;
  will-change:transform;
  transform:translate3d(0,0,0) skewX(-16deg);
  animation:bar-sheen 2.25s ease-in-out infinite;
}

/* Keep HP + all class resources on the exact same motion timing/opacity so they read as one unified system. */

@keyframes bar-drift{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(50%,0,0); }
}

@keyframes bar-sheen{
  0%{ transform:translate3d(0,0,0) skewX(-16deg); opacity:0.16; }
  45%{ opacity:0.58; }
  100%{ transform:translate3d(260%,0,0) skewX(-16deg); opacity:0.16; }
}

@media (prefers-reduced-motion: reduce){
  .hp-fill::before,
  .hp-fill::after,
  .resource-fill.mana::before,
  .resource-fill.mana::after,
  .resource-fill.fury::before,
  .resource-fill.fury::after,
  .resource-fill.blood::before,
  .resource-fill.blood::after,
  .resource-fill.essence::before,
  .resource-fill.essence::after,
  .resource-fill.energy::before,
  .resource-fill.energy::after,
  .resource-fill.focus::before,
  .resource-fill.focus::after,
  .resource-fill.nature::before,
  .resource-fill.nature::after,
  .resource-fill.shadow::before,
  .resource-fill.shadow::after,
  .resource-fill.arcane::before,
  .resource-fill.arcane::after,
  .resource-fill.dark-energy::before,
  .resource-fill.dark-energy::after,
  .hud-class-meter.is-ready .meter-dots::after,
  .screen,
  .modal-overlay{
    animation:none !important;
  }

  /* Also hide the ready overlay entirely.
     Without this, some browsers (notably iOS/WebKit) can freeze the pseudo-element mid-keyframe,
     which reads as "paused flashing" instead of disabled motion. */
  .hud-class-meter.is-ready .meter-dots::after{
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
  }

  /* Spell Book: disable the empowered pulse outline (remove it rather than freezing it). */
  .spell-card.meter-buffed::after{
    animation:none !important;
    opacity:0 !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  /* Spell select list: remove hover movement/transition. */
  .spell-row{ transition:none !important; }
  .spell-row:hover{ transform:none !important; }
}

/* In-game setting: Reduce motion (also honors OS setting above). */
body.no-motion .hp-fill::before,
body.no-motion .hp-fill::after,
body.no-motion .resource-fill.mana::before,
body.no-motion .resource-fill.mana::after,
body.no-motion .resource-fill.fury::before,
body.no-motion .resource-fill.fury::after,
body.no-motion .resource-fill.blood::before,
body.no-motion .resource-fill.blood::after,
body.no-motion .resource-fill.essence::before,
body.no-motion .resource-fill.essence::after,
body.no-motion .resource-fill.energy::before,
body.no-motion .resource-fill.energy::after,
body.no-motion .resource-fill.focus::before,
body.no-motion .resource-fill.focus::after,
body.no-motion .resource-fill.nature::before,
body.no-motion .resource-fill.nature::after,
body.no-motion .resource-fill.shadow::before,
body.no-motion .resource-fill.shadow::after,
body.no-motion .resource-fill.arcane::before,
body.no-motion .resource-fill.arcane::after,
body.no-motion .resource-fill.dark-energy::before,
body.no-motion .resource-fill.dark-energy::after,
body.no-motion .hud-class-meter.is-ready .meter-dots::after{
  animation:none !important;
}

/* Reduce motion should fully disable flashing/pulsing cues (not freeze them mid-animation). */
body.no-motion .hud-class-meter.is-ready .meter-dots::after{
  opacity:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Spell Book / spell select: remove the empowered pulse outline and hover motion. */
body.no-motion .spell-card.meter-buffed::after{
  animation:none !important;
  opacity:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
body.no-motion .spell-row{ transition:none !important; }
body.no-motion .spell-row:hover{ transform:none !important; }

#hud-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.72rem;
  color:var(--muted);
  gap:8px;
  padding-top:2px;
}
#hud-bottom span{ display:inline-flex; align-items:center; gap:4px; }
#timeLabel.hud-time{ flex:1; justify-content:center; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud-bottom .gold{ color:var(--gold); font-weight:700; }

/* Enemy panel */
.enemy-panel{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px 14px;
  border-radius:var(--radius);
  background:var(--surface-card);
  cursor:pointer;
}
.enemy-panel:focus{
  outline:none;
}
.enemy-panel:focus-visible{
  outline:2px solid var(--danger);
  outline-offset:2px;
}


.enemy-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px;
  font-size:0.85rem;
}
.enemy-name{ font-weight:700; font-size:0.9rem; }
.enemy-tags{ color:var(--muted); font-size:0.78rem; }

.enemy-target-hint{ color:var(--muted); font-size:0.72rem; opacity:0.9; margin-top:2px; }
/* Match HUD bar height so enemy HP reads consistently */
.enemy-hp-bar{ margin-bottom:2px; }
.enemy-status-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:4px 0 2px;
  min-height:0.85rem;
  font-size:0.62rem;
}

/* Game layout */
#gameScreen{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:var(--panel-gap);
  min-height:0;
  overflow:hidden;
}
#gameMain{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:var(--panel-gap);
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.10em;
  color:var(--muted);
  padding-bottom:4px;
  margin-bottom:4px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.panel-chevron{
  font-size:0.8rem;
  opacity:0.8;
  transition:transform var(--t-med) var(--ease);
}
#questBox.collapsed .panel-chevron,
#logBox.collapsed .panel-chevron{ transform:rotate(-90deg); }

/* Scene */
#scene{
  flex-shrink:0;
  margin-top:0;
  padding:12px 14px;
  border-radius:var(--radius);
  background:var(--surface-card);
  display:flex;
  flex-direction:column;
  min-height:0;
}
#sceneTitle{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
#sceneText{ font-size:0.89rem; color:var(--text); white-space:pre-line; max-height:clamp(90px, 18vh, 200px); overflow-y:auto; padding-right:6px; line-height:1.6; }

/* Quest box */
#questBox{
  flex-shrink:0;
  padding:8px 14px;
  border-radius:var(--radius);
  border:1.5px solid var(--quest-border);
  background:rgba(255,149,0,0.05);
  font-size:0.85rem;
  color:var(--quest-gold);
  margin:0;
  transition:max-height var(--t-med) var(--ease), padding var(--t-med) var(--ease);
  overflow:hidden;
  min-height:0;

  /* Keep it "stationed" and scrollable so long quest text doesn't push the HUD off-screen */
  max-height:28vh;
  display:flex;
  flex-direction:column;
}
#questBox.collapsed{
  max-height:26px;
  min-height:26px;
  flex:0 0 auto;
  padding-bottom:2px;
}

/* Smooth collapse/expand: keep the quest body in the flow and animate its height/opacity.
   (Avoid display:none; it snaps instead of animating.) */
#questDesc{
  opacity:1;
  transition:max-height var(--t-med) var(--ease), opacity var(--t-med) var(--ease), margin-top var(--t-med) var(--ease);
}
#questBox.collapsed #questDesc{
  max-height:0;
  opacity:0;
  margin-top:0;
  overflow:hidden;
  pointer-events:none;
}
#questBox .panel-header{
  color:var(--quest-border);
  border-bottom-color:rgba(252, 211, 77, 0.22);
}
#questBox .panel-chevron{
  color:var(--quest-border);
  opacity:1;
}
#questTitle{
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:0.12em;
  font-size:0.72rem;
}
#questDesc{
  margin-top:2px;
  white-space:pre-line;
  overflow-y:auto;
  max-height:22vh;
  padding-right:6px;
}

/* Patch 1.2.42: Quest Journal (modal content) */
.qj-meta{
  font-size:0.72rem;
  color:var(--muted);
  margin:0 0 8px;
}

.qj-section-title{
  margin:10px 0 6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--border);
  font-size:0.74rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--quest-gold);
}

.qj-details{
  margin:6px 0;
  border:1.5px solid var(--quest-border);
  border-radius:var(--radius-tight);
  background:rgba(255,149,0,0.04);
  overflow:hidden;
}

details > summary.qj-summary{
  list-style:none;
}
details > summary.qj-summary::-webkit-details-marker{
  display:none;
}

.qj-summary{
  padding:10px 10px;
  font-weight:700;
  font-size:0.85rem;
  color:var(--quest-gold);
  background:rgba(255,149,0,0.06);
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
}

.qj-summary .qj-summary-right{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.72rem;
  color:var(--quest-gold-dim);
  font-weight:600;
}

.qj-summary::before{
  content:'▸';
  display:inline-block;
  transform:rotate(0deg);
  transition:transform var(--t-fast) var(--ease);
  opacity:0.9;
  margin-right:8px;
}
details[open] > summary.qj-summary::before{
  transform:rotate(90deg);
}

.qj-body{
  padding:10px 10px;
  font-size:0.82rem;
  color:var(--quest-gold-soft);
  line-height:1.35;
  white-space:pre-line;
}

.qj-objs{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--quest-gold);
}
.qj-objs li{ margin:3px 0; }

.qj-pinned{
  font-size:0.72rem;
  color:var(--quest-gold-dim);
  margin:-4px 0 10px;
}

.qj-items{
  margin:10px 10px 0;
  padding:8px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-tight);
  background:var(--surface-2);
}
.qj-items-title{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--quest-gold-dim);
  margin:0 0 6px;
}
.qj-items-list{
  margin:0;
  padding-left:18px;
  color:var(--quest-gold);
}
.qj-items-list li{ margin:3px 0; }

.qj-pin-btn{
  margin:10px 10px 10px;
  width:calc(100% - 20px);
}

@media (max-width: 720px){
  #questBox{ max-height:24vh; }
  #questDesc{ max-height:18vh; }
}

/* Log filter */
#logFilterPanel{ flex-shrink:0; }
.log-filter-row{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
}
.log-chip{
  flex:0 0 auto;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--muted);

  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.04em;

  padding:4px 10px;
  min-height:24px;
  line-height:1;

  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;

  transition:
    background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.log-chip-active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  color:var(--accent);
  background:var(--surface-selected);
  font-weight:700;
}
.log-chip.log-chip-active:hover,
.log-chip.log-chip-active:active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  color:var(--accent);
  background:var(--surface-selected);
}
#logClearBtn{
  flex:0 0 auto;
  margin-left:auto;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:transparent;
  color:var(--muted);
  font-size:0.68rem;
  padding:3px 9px;
  min-height:24px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:color var(--t-med) var(--ease),border-color var(--t-med) var(--ease);
}
#logClearBtn:hover{ color:var(--danger); border-color:var(--danger); }
.log-count{ font-size:0.72em; opacity:0.45; margin-left:4px; font-weight:normal; }

/* Log */
#logBox{
  flex:1 1 auto;
  /* Allow flex to shrink for smooth collapse */
  min-height:0;
  padding:8px 12px;
  border-radius:var(--radius);
  background:var(--surface-card);
  font-size:0.85rem;
  color:var(--text);
  overflow:hidden;
  margin:0;
  display:flex;
  flex-direction:column;
  transition:height var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}

/* Only enforce the 60px minimum when expanded */
#logBox:not(.collapsed){
  min-height:60px;
}

#logBox.collapsed{
  flex:0 0 auto;
  height:26px;
  min-height:26px;
  padding-bottom:2px;
}

/* Smooth collapse/expand: keep the log body in the flow and animate its height/opacity.
   (Avoid display:none; it snaps instead of animating.) */
#log{
  flex:1 1 auto;
  min-height:0;
  background:transparent;
  padding:0;
  overflow-y:auto;
  opacity:1;
  transition:opacity var(--t-med) var(--ease), margin-top var(--t-med) var(--ease);
}
#logBox.collapsed #log{
  opacity:0;
  margin-top:0;
  overflow:hidden;
  pointer-events:none;
}
@keyframes logFadeIn{
  from{ opacity:0; transform:translateX(-4px); }
  to  { opacity:1; transform:translateX(0);    }
}
.log-line{
  margin:0;
  padding:4px 6px 4px 10px;
  border-left:3px solid transparent;
  border-radius:0 4px 4px 0;
  line-height:1.6;
  animation:logFadeIn var(--t-fast) var(--ease-decel) both;
  font-size:0.86rem;
}
.log-line.system{ color:var(--accent); border-left-color:var(--accent-soft); }
.log-line.danger{ color:var(--danger); border-left-color:var(--danger-soft); }
.log-line.good  { color:var(--success); border-left-color:var(--success-soft); }
/* Actor-aware border overrides for combat entries */
.log-line.meta-enemy{ border-left-color:rgba(255,59,48,0.30); }
.log-line.meta-player{ border-left-color:rgba(0,122,255,0.30); }
.log-line.divider{
  color:var(--muted);
  border-left:none;
  padding:0 4px;
  margin:5px 0 2px;
  opacity:0.45;
  font-size:0.72em;
  letter-spacing:0.07em;
  text-align:center;
  animation:none;
}
.log-repeat{ font-size:0.78em; opacity:0.60; margin-left:4px; color:var(--muted); font-style:italic; }
.log-sub{ font-size:0.82em; opacity:0.80; display:block; padding-left:4px; }
.log-empty{ margin:8px 4px; font-size:0.82em; opacity:0.50; font-style:italic; text-align:center; color:var(--muted); }

/* Actions grid — BitLife-style large colorful buttons */
#actions{
  flex:0 0 auto;
  margin-top:0;
  padding:calc(8px * var(--ui-scale, 1));

  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:calc(8px * var(--ui-scale, 1));

  border-radius:var(--radius);
  background:var(--bg);
  border-top:1px solid var(--border);
}

/* =============================================================================
   12) MODAL SYSTEM — BitLife-style slide-up sheet
   ============================================================================= */

#modal,
#enemyModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.48);
  animation:modalFadeIn var(--t-slow) var(--ease-decel);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  z-index:20;
  padding-bottom:0;
}

/* Enemy Sheet sits just under the main modal so dev confirms (Smoke Tests) can stack above it. */
#enemyModal{ z-index:19; }

#modalPanel,
#enemyModalPanel{
  width:100%;
  max-width:480px;
  max-height:88vh;
  max-height:88dvh;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--surface-card);
  padding:12px 14px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:var(--shadow-pop);
  will-change:transform;
  animation:panelSlideUp var(--t-panel) var(--ease-spring);
}

@keyframes panelSlideUp{
  from{ transform:translateY(100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

@keyframes panelSlideDown{
  from{ transform:translateY(0); opacity:1; }
  to{ transform:translateY(100%); opacity:0; }
}

/* Closing state — plays slide-down on the sheet and fades the backdrop */
#modal.modal-closing,
#enemyModal.modal-closing{
  animation:modalFadeOut var(--t-panel-close) var(--ease-close) forwards;
  pointer-events:none;
}
#modal.modal-closing #modalPanel,
#enemyModal.modal-closing #enemyModalPanel{
  animation:panelSlideDown var(--t-panel-close) var(--ease-close) forwards;
}

@keyframes modalFadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}

#modalHeader,
#enemyModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

#modalBody,
#enemyModalBody{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  padding:4px 2px;
  font-size:0.92rem;
  line-height:1.55;
}

.modal-actions{
  --modal-action-gap:6px;
  display:flex;
  flex-wrap:wrap;
  gap:var(--modal-action-gap);
  margin-top:var(--modal-action-gap);
}
.modal-actions .btn{
  flex:1 1 0;
  min-width:140px;
  margin-top:0;
}

.modal-subtitle{
  font-size:0.74rem;
  color:var(--muted);
  margin:2px 0 6px;
}

/* --- QA modal (Smoke Tests + Bug Report) ---------------------------------- */
.qa-details{
  margin:10px 0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
  overflow:hidden;
}

.qa-subdetails{
  margin:8px 0 0;
  border:1px solid var(--border);
  border-radius:var(--radius-tight);
  background:var(--surface-card);
  overflow:hidden;
}

.qa-summary{
  padding:10px 10px;
  font-weight:700;
  font-size:0.85rem;
  color:var(--text);
  background:var(--surface-2);
  user-select:none;
}

details > summary.qa-summary{
  list-style:none;
}
details > summary.qa-summary::-webkit-details-marker{
  display:none;
}

/* Custom disclosure arrow (we hide native markers above) */
details > summary.qa-summary{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
details > summary.qa-summary::before{
  content:'▸';
  display:inline-block;
  transform:rotate(0deg);
  transition:transform var(--t-fast) var(--ease);
  opacity:0.9;
}
details[open] > summary.qa-summary::before{
  transform:rotate(90deg);
}

.qa-pre{
  margin:0;
  padding:10px 10px;
  border-top:1px solid var(--border);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.35;
  color:var(--text);
}

/* Item rows in modals */
.item-row{
  border-radius:var(--radius-tight);
  border:1px solid var(--border);
  padding:8px 10px;
  margin-bottom:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--surface-card);
  transition:transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.item-row[data-clickable]:active,
.item-row[onclick]:active{
  transform:scale(0.98);
  filter:brightness(0.88);
  transition-duration:0.05s;
}
.item-row-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.8rem;
}
.item-name{ font-weight:600; }
.item-meta{ font-size:0.74rem; color:var(--muted); }
.item-actions{ margin-top:4px; display:flex; gap:6px; }

/* --- QA / Smoke Tests: keep pill button hitboxes stable ------------------- */
/* Patch 1.2.53: the Smoke Tests modal has a dense row of pill buttons.
   - The pills themselves should NOT be scaled (tap targets stay consistent).
   - Only the LABEL text scales (via --qa-pill-font) when we need to tighten.
   - Rows should be edge-to-edge.
   - If a row has only 2 actions, it should become a true 2-column row
     (no "phantom" 3rd column / trailing gap). */
.qa-pill-actions{
  /* Override .item-actions (flex) so we can deterministically fill the row. */
  display:grid;
  width:100%;

  /* Auto-adapt columns:
     - With 3+ actions, this will typically land as 3 columns on phone.
     - With 2 actions, empty tracks collapse so it becomes 2 columns.
     - On very narrow widths, it will gracefully fall back to 1 column. */
  grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr));
  gap:10px;
  padding:0;
  margin-top:4px;

  --qa-pill-font:0.8rem;
}

/* Text-only scaling hook (JS updates --qa-pill-font; hitbox remains stable). */
.qa-pill-actions .btn.small,
.qa-pill-actions button{
  font-size:var(--qa-pill-font);
}

/* Make each pill fill its grid cell (edge-to-edge rows), without changing the
   button's internal padding/radius so the "pill" look stays the same. */
.qa-pill-actions .btn,
.qa-pill-actions button{
  width:100%;
  margin-top:0;
  white-space:nowrap;
  justify-content:center;
}

/* Companion actions strip */
.companion-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:6px;
  margin-top:6px;
  padding:4px 0 4px 2px;

  overflow-x:auto;
  overflow-y:hidden;
}
.companion-actions > *{ flex:0 0 auto; }
.companion-actions .btn,
.companion-actions button,
.companion-actions .companion-pill{
  width:auto;
  padding:6px 10px;
  border-radius:var(--pill);
  font-size:0.78rem;
  white-space:nowrap;
  text-align:center;
}

/* Version picker */
.version-modal-list{ display:flex; flex-direction:column; gap:10px; }
.version-modal-list .btn{ margin-top:0; }

/* =============================================================================
   13) TAGS / BADGES
   ============================================================================= */

.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:var(--pill);
  border:1.5px solid var(--border);
  font-size:0.72rem;
  font-weight:600;
  color:var(--muted);
  background:var(--surface-2);
}
.tag.gold{ color:var(--gold); border-color:rgba(255,149,0,0.40); background:rgba(255,149,0,0.08); }
.tag.boss{ border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }

/* =============================================================================
   14) SETTINGS (MENU + IN-GAME)
   ============================================================================= */

/* --- Main Settings screen -------------------------------------------------- */
.settings-card{
  max-width:560px;
  margin:0 auto;
}
.settings-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.settings-header h2{ margin:0; }

.settings-sections{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.settings-section{
  padding:8px 0;
}
.settings-section + .settings-section{
  border-top:1px solid var(--border);
}

.settings-section-title{
  font-size:0.74rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
  margin:0 0 8px;
}

/* Collapsible settings sections (used for Settings → Saves) */
.settings-section.is-collapsible .settings-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.settings-section.is-collapsible .settings-section-title::after{
  content:'▾';
  opacity:0.7;
  transform:rotate(0deg);
  transition:transform var(--t-fast) var(--ease);
}
.settings-section.is-collapsible.is-collapsed .settings-section-title::after{
  transform:rotate(-90deg);
}
.settings-section.is-collapsible.is-collapsed .settings-section-title{
  margin-bottom:0;
}
.settings-section.is-collapsible.is-collapsed .settings-section-content{
  display:none;
}

.settings-row{
  display:grid;
  grid-template-columns:1fr minmax(160px, 240px);
  gap:12px;
  align-items:center;
  padding:10px 0;
}
.settings-section .settings-row + .settings-row{
  border-top:1px solid var(--border);
}

.settings-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.settings-label{
  color:var(--text);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:none;
}
.settings-desc{
  color:var(--muted);
  font-size:0.78rem;
  line-height:1.2;
}

.settings-control{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

.settings-select{
  width:100%;
  padding:8px 12px;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  font-size:0.88rem;
  appearance:none;
}

/* Toggle switch — iOS-style */
.switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  cursor:pointer;
}
.switch input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.switch-track{
  width:51px;
  height:31px;
  border-radius:999px;
  border:none;
  background:#e5e5ea;
  position:relative;
  transition:background var(--t-med) var(--ease);
}
.switch-track::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 2px 6px rgba(0,0,0,0.25), 0 0.5px 1px rgba(0,0,0,0.12);
  transform:translateX(0);
  transition:transform var(--t-med) var(--ease);
}
.switch input:checked + .switch-track{
  background:var(--success);
}
.switch input:checked + .switch-track::after{
  transform:translateX(20px);
}
.switch input:focus-visible + .switch-track{
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Range inputs (used in Settings + in-game Settings modal) */
.settings-control input[type="range"]{
  width:100%;
  max-width:240px;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  height:22px;
  cursor:pointer;
}
.settings-control input[type="range"]::-webkit-slider-runnable-track{
  height:5px;
  border-radius:999px;
  background:var(--border);
}
.settings-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  margin-top:-9px;
  background:#ffffff;
  border:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.20), 0 0.5px 1px rgba(0,0,0,0.10);
}
.settings-control input[type="range"]:focus-visible{ outline:none; }
.settings-control input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--accent-soft), 0 2px 6px rgba(0,0,0,0.20);
}

.settings-footer{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

/* --- Compact settings layout (requested): reduces vertical space while keeping readability. --- */
.settings-card.settings-compact{ max-width:520px; }
.settings-compact .settings-header{ margin-bottom:6px; }
.settings-compact .settings-header .hint{ margin:0; font-size:0.72rem; line-height:1.15; }

.settings-compact .settings-sections{ gap:6px; }
.settings-compact .settings-section{ padding:6px 0; }
.settings-compact .settings-section-title{ margin:0 0 6px; font-size:0.66rem; letter-spacing:0.16em; }

.settings-compact .settings-row{
  padding:6px 0;
  gap:10px;
  grid-template-columns:1fr minmax(140px, 220px);
}
.settings-compact .settings-left{ gap:0; }
.settings-compact .settings-label{ font-size:0.88rem; }

/* Descriptions are kept, but clamped to a single line to keep the menu tight. */
.settings-compact .settings-desc{
  font-size:0.72rem;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.settings-compact .settings-select{ padding:6px 10px; font-size:0.80rem; }

/* Slightly smaller switches for tighter rows. */
.settings-compact .switch-track{ width:40px; height:22px; }
.settings-compact .switch-track::after{ top:3px; left:3px; width:16px; height:16px; }
.settings-compact .switch input:checked + .switch-track::after{ transform:translateX(18px); }

.settings-compact .settings-control input[type="range"]{ height:20px; }

/* In-game settings modal */
.settings-modal-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* In-game settings: compact pass to match the main menu settings density. */
.settings-modal-body.settings-compact{ gap:8px; }
.settings-modal-body.settings-compact .settings-row{
  padding:8px 0;
  gap:10px;
  grid-template-columns:1fr minmax(130px, 200px) 6ch;
}
.settings-modal-body.settings-compact .settings-control input[type="range"]{ max-width:200px; }
.settings-modal-body.settings-compact .settings-select{ max-width:200px; }
.settings-modal-body .settings-row{
  grid-template-columns:1fr minmax(140px, 220px) 6ch;
  gap:12px;
  padding:10px 0;
}
.settings-modal-body .settings-value{
  width:6ch;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* In-game settings modal keeps the same controls but slightly tighter widths */
.settings-modal-body .settings-control input[type="range"]{ max-width:220px; }
.settings-modal-body .settings-select{ max-width:220px; }

/* =============================================================================
   15) CHARACTER SHEET (TABS + PANELS)
   ============================================================================= */

.char-tabs-wrapper{ width:100%; }

/* Sheet header (Character / Enemy) */
.sheet-header{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  margin:2px 0 10px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
}

.sheet-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sheet-title{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.02em;
}

.sheet-subtitle{
  font-size:0.78rem;
  color:var(--muted);
  font-weight:600;
}

/* Sheet entity sprite — compact portrait in the title row right side */
.sheet-sprite{
  flex:0 0 auto;
  width:30px;
  height:41px;
  overflow:hidden;
  border-radius:4px;
  background:var(--surface-card);
  padding:2px;
}
.sheet-sprite svg{ width:100%; height:100%; display:block; }

.sheet-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.sheet-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--surface-2);
  font-size:0.78rem;
  color:var(--text);
}
.sheet-badge .k{ color:var(--muted); font-weight:600; }
.sheet-badge .v{ font-weight:700; }

.sheet-mini-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}

@media (min-width: 520px){
  .sheet-mini-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

.sheet-line{
  font-size:0.78rem;
  color:var(--muted);
  line-height:1.25;
}

.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:0.78rem;
  font-weight:600;
}

.char-tabs{
  display:flex;
  flex-direction:row;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  padding:6px 2px;
  margin-bottom:8px;
  border-bottom:1px solid var(--border);
}

.char-tab{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:var(--pill);
  border:1.5px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);

  font-size:0.78rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;

  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.char-tab:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  box-shadow:var(--shadow-hover);
}
.char-tab.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}

.char-tab-panel{ display:none; }
.char-tab-panel.active{ display:block; }

.char-divider-top{
  border-top:1px solid var(--border);
  margin-top:10px;
  padding-top:8px;
}
.char-section{ margin-bottom:10px; }
.char-section-title{
  font-size:0.74rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
  margin-bottom:6px;
}

/* Patch 1.2.1: Collapsible sheet sections (reduces clutter) */
.char-section-title.section-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
  padding:8px 10px;
  border-radius:var(--radius-tight);
  background:var(--surface-2);
  border:1px solid var(--border);
  margin-bottom:8px;
}
.char-section-title.section-toggle:hover{
  border-color:var(--accent);
  background:var(--surface-selected);
}
.char-section-title.section-toggle::after{
  content:"▾";
  font-size:0.9rem;
  opacity:0.7;
  transform:rotate(0deg);
  transition:transform var(--t-fast) var(--ease);
}
.char-section.collapsed .char-section-title.section-toggle::after{
  transform:rotate(-90deg);
}

.char-section-body{ margin-top:2px; }
.char-section.collapsed .char-section-body{ display:none; }

/* Patch 1.3.44: Talent tree branch layout */
.talent-branch{ margin-bottom:10px; }
.talent-branch-header{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  padding-bottom:4px;
  margin-bottom:6px;
}
.talent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 0;
  border-bottom:1px solid var(--border);
}
.talent-row:last-child{ border-bottom:none; }
.talent-row-owned .talent-name{ color:var(--accent, #a78bfa); }
.talent-row-maxed .talent-name{ color:var(--gold); }
.talent-rank-bar{ font-size:0.72rem; color:var(--accent, #a78bfa); letter-spacing:0.05em; margin:1px 0 2px; }
.talent-row-maxed .talent-rank-bar{ color:var(--gold); }
.talent-maxed{ opacity:0.6; cursor:default; }
.talent-main{ flex:1; min-width:0; }
.talent-name{ font-size:0.82rem; font-weight:600; }
.talent-desc{ font-size:0.76rem; margin-top:1px; }
.talent-act{ flex-shrink:0; }
.talent-list{ display:flex; flex-direction:column; }

.stat-list{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 10px;
  font-size:0.84rem;
}
.stat-label{ color:var(--muted); display:flex; align-items:center; gap:6px; }
.stat-value{ text-align:right; color:var(--text); font-weight:650; }
.stat-note{ font-size:0.68rem; color:var(--muted); display:block; }
.char-stat-icon{ display:none; }

.stat-value.stat-attack{ color:#ef5350 !important; font-weight:700; }
.stat-value.stat-magic{ color:#b39ddb !important; font-weight:700; }
.stat-value.stat-armor{ color:#64b5f6 !important; font-weight:700; }
.stat-value.stat-speed{ color:#4db6ac !important; font-weight:700; }

/* Scar System (Patch 1.3.20) */
.stat-value.scar-fire{ color:#ff7043 !important; font-weight:700; }
.stat-value.scar-resilience{ color:#66bb6a !important; font-weight:700; }
.stat-value.scar-frost{ color:#4fc3f7 !important; font-weight:700; }
.stat-value.scar-shadow{ color:#b39ddb !important; font-weight:700; }
.stat-value.scar-lightning{ color:#fff176 !important; font-weight:700; }
.stat-value.scar-bleed{ color:#ef9a9a !important; font-weight:700; }
.stat-value.scar-vengeance{ color:#f48fb1 !important; font-weight:700; }

/* Starting Scar Picker — character creation (Patch 1.3.22) */
/* Modal grid */
.starting-scar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    padding-bottom: 4px;
}

.scar-start-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-tight);
    background: var(--surface-card);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
    font-size: 0.82rem;
}
.scar-start-card:hover {
    border-color: var(--accent);
    background: var(--surface-selected);
}
.scar-start-card.selected {
    border-color: var(--accent);
    background: var(--surface-selected);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.scar-card-icon { font-size: 1.4rem; line-height: 1; }
.scar-card-name { font-weight: 700; color: var(--text); font-size: 0.8rem; }
.scar-card-effect { color: var(--muted); font-size: 0.72rem; line-height: 1.3; }

/* Choice row shown after first class is picked */
.scar-choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.scar-choice-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}
.scar-choice-label.active {
    color: var(--text);
    font-style: normal;
    font-weight: 600;
}
.scar-reopen-btn {
    flex-shrink: 0;
    padding: 4px 14px;
    font-size: 0.82rem;
}


.equip-row{
  font-size:0.8rem;
  margin-bottom:2px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.equip-empty{ color:var(--muted); font-style:italic; }

/* ---------------------------------------------------------------------
   RARITY TEXT COLORS (Inventory + Character Sheet)
   --------------------------------------------------------------------- */
.equip-name{ font-weight:650; }

.rarity-common{ color:var(--rarity-common); }
.rarity-uncommon{ color:var(--rarity-uncommon); }
.rarity-rare{ color:var(--rarity-rare); }
.rarity-epic{ color:var(--rarity-epic); }
.rarity-legendary{ color:var(--rarity-legendary); }
.rarity-mythic{ color:var(--rarity-mythic); }
.char-companion-desc{
  font-size:0.75rem;
  color:var(--muted);
  margin-top:6px;
  line-height:1.3;
}

/* =============================================================================
   16) FEEDBACK MODAL (SPECIFIC OVERRIDES)
   ============================================================================= */

#feedbackType{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  font-size:0.9rem;
}
#feedbackText{
  width:100%;
  min-height:90px;
  max-height:180px;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  font-size:0.9rem;
  resize:vertical;
}

/* =============================================================================
   17) INVENTORY MODAL (FRIENDLIER LAYOUT)
   ============================================================================= */

.inventory-modal{ display:flex; flex-direction:column; gap:4px; }

.inv-toolbar{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}

.inv-search-wrap{ flex:1 1 220px; min-width:180px; }

.inv-search{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  outline:none;
  font-size:0.9rem;

  transition:
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease);
}
.inv-search::placeholder{ color:var(--muted); opacity:0.85; }
.inv-search:focus,
.inv-search:focus-visible{
  outline:2px solid var(--accent);
  border-color:var(--accent);
}

.inv-sort{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:var(--radius-tight);
  border:1.5px solid var(--border);
  background:var(--surface-card);
  color:var(--text);
  cursor:pointer;
  font-size:0.9rem;

  appearance:none;

  transition:
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease);
}
.inv-sort:focus,
.inv-sort:focus-visible{
  outline:2px solid var(--accent);
  border-color:var(--accent);
}
.inv-sort:active{ transform:translateY(1px); }

.inv-tabs{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  width:100%;
}

.inv-tab{
  flex:1 1 0;
  min-width:0;
  padding:8px 10px;
  border-radius:var(--pill);
  border:1.5px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  font-size:0.72rem;
  font-weight:600;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.inv-tab.active,
.inv-tab.selected{
  outline:1px solid var(--accent);
  background:var(--surface-focus);
}

.inv-list{ display:flex; flex-direction:column; gap:4px; }

.inv-card{
  border-radius:var(--radius-tight);
  border:1px solid var(--border);
  background:var(--surface-card);
  padding:8px 10px;
}

/* Combat potion quick-use buttons */
.combat-potion-btn{
  display:block;
  width:100%;
  padding:14px 16px;
  margin-bottom:8px;
  border-radius:var(--radius);
  background:var(--surface-card);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:0.95rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.combat-potion-btn:hover,
.combat-potion-btn:active{
  background:var(--surface-selected);
  border-color:var(--accent);
}
.inv-card > summary{ list-style:none; }
.inv-card > summary::-webkit-details-marker{ display:none; }

.inv-card-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
}

.inv-left{ display:flex; flex-direction:column; gap:2px; }

.inv-name{ font-weight:650; font-size:0.9rem; }

.inv-sub{ font-size:0.72rem; color:var(--muted); }

.inv-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  min-width:56px;
}

.inv-score{ font-size:0.75rem; color:var(--muted); }

/* Power delta indicator (shown in header so it remains visible when collapsed) */
.inv-delta{ font-size:0.68rem; font-weight:750; letter-spacing:0.06em; }
.inv-delta.same{ color:var(--muted); }
.inv-delta.up{ color:var(--success); }
.inv-delta.down{ color:var(--danger); }

.inv-details{
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.inv-desc{
  font-size:0.82rem;
  line-height:1.3;
  color:var(--text);
  opacity:0.95;
}
.inv-compare{ font-size:0.74rem; color:var(--muted); }
.inv-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.inv-actions-tight{ display:flex; gap:4px; align-items:center; }

.inv-quest-badge{
  padding:2px 8px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  font-size:0.72rem;
  color:var(--muted);
  background:rgba(0,0,0,0.18);
  user-select:none;
}

/* Inventory-style action buttons should look like compact controls, not full-width CTAs. */
.inv-actions .btn.small{ width:auto; margin-top:0; }

/* =====================================================================
   SPELLBOOK / ABILITIES: inventory-style collapsible cards
   ===================================================================== */

.spell-card.in-combat .inv-card-header{ cursor:pointer; }

/* Combat meter cue: highlight empowered abilities in the Spell Book.
   The outline pulses in the same accent as the combat HUD class meter. */
.spell-card.meter-buffed{
  position:relative;
  --meter-accent: var(--accent);
  --meter-accent-soft: rgba(124,200,255,0.22);
}
/* Per-class tinting (mirrors .hud-class-meter[data-meter-class=...]) */
.spell-card.meter-buffed[data-meter-class="rogue"]{ --meter-accent:var(--cls-rogue); --meter-accent-soft:rgba(87,227,199,0.22); }
.spell-card.meter-buffed[data-meter-class="ranger"]{ --meter-accent:var(--cls-ranger); --meter-accent-soft:rgba(125,255,122,0.20); }
.spell-card.meter-buffed[data-meter-class="shaman"]{ --meter-accent:var(--cls-shaman); --meter-accent-soft:rgba(99,215,255,0.20); }
.spell-card.meter-buffed[data-meter-class="necromancer"]{ --meter-accent:var(--cls-necromancer); --meter-accent-soft:rgba(177,139,255,0.22); }
.spell-card.meter-buffed[data-meter-class="mage"]{ --meter-accent:var(--cls-mage); --meter-accent-soft:rgba(106,169,255,0.20); }
.spell-card.meter-buffed[data-meter-class="warrior"]{ --meter-accent:var(--cls-warrior); --meter-accent-soft:rgba(255,184,107,0.20); }
.spell-card.meter-buffed[data-meter-class="blood"]{ --meter-accent:var(--cls-blood); --meter-accent-soft:rgba(255,92,107,0.22); }
.spell-card.meter-buffed[data-meter-class="paladin"]{ --meter-accent:var(--cls-paladin); --meter-accent-soft:rgba(255,204,102,0.20); }
.spell-card.meter-buffed[data-meter-class="cleric"]{ --meter-accent:var(--cls-cleric); --meter-accent-soft:rgba(191,233,255,0.20); }
.spell-card.meter-buffed[data-meter-class="berserker"]{ --meter-accent:var(--cls-berserker); --meter-accent-soft:rgba(255,122,47,0.22); }
.spell-card.meter-buffed[data-meter-class="vampire"]{ --meter-accent:var(--cls-vampire); --meter-accent-soft:rgba(255,127,209,0.22); }

.spell-card.meter-buffed::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:var(--radius);
  pointer-events:none;
  border:1px solid var(--meter-accent);
  box-shadow:
    0 0 0 0 rgba(0,0,0,0),
    0 0 10px var(--meter-accent-soft);
  animation: spell-meter-pulse 0.92s ease-in-out infinite;
}

@keyframes spell-meter-pulse{
  0%{
    opacity:0.55;
    box-shadow:
      0 0 8px var(--meter-accent-soft),
      0 0 0 rgba(0,0,0,0);
  }
  50%{
    opacity:0.95;
    box-shadow:
      0 0 18px var(--meter-accent-soft),
      0 0 26px var(--meter-accent-soft);
  }
  100%{
    opacity:0.55;
    box-shadow:
      0 0 8px var(--meter-accent-soft),
      0 0 0 rgba(0,0,0,0);
  }
}

body.no-motion .spell-card.meter-buffed::after{
  /* Disable empowered spell pulsing entirely (avoid freezing the outline mid-animation). */
  animation:none !important;
  opacity:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* =============================================================================
   18) ANIMATIONS + RESPONSIVE WRAP
   ============================================================================= */

@keyframes btnGlow{
  0%{ box-shadow:0 0 0 rgba(0,122,255,0.0); filter:brightness(1); }
  50%{ box-shadow:0 0 18px rgba(0,122,255,0.40); filter:brightness(1.06); }
  100%{ box-shadow:0 0 0 rgba(0,122,255,0.0); filter:brightness(1); }
}

@keyframes panelDropIn{
  from{ opacity:0; transform:translateY(10px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes panelPopIn{
  from{ opacity:0; transform:translateY(10px) scale(0.96); }
  60%{ opacity:1; transform:translateY(0) scale(1.01); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes screenFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes modalFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (min-width:520px){
  #app{
    margin:10px auto;
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow-pop);
  }
}


/* (Quest panel scrolling rules live in the main "Quest box" section above.) */

/* =====================================================================
   NOTICE BOARD (Tavern): collapsible header + 2-panel layout (list + details)
   - Click the Notice Board header to collapse/expand (no separate button)
   - Accept button sits at the bottom of the details panel
   ===================================================================== */

.notice-board-card .item-row-header{
  cursor:pointer;
}

.notice-board-card .item-meta{
  display:flex;
  align-items:center;
  gap:8px;
}

.notice-count{
  color:var(--muted);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.10em;
}

.notice-chevron{
  color:var(--muted);
  font-size:0.9rem;
  opacity:0.9;
  transform:translateY(-0.5px);
}

.notice-board-card.collapsed .notice-chevron{
  transform:translateY(-0.5px);
}

/* Hide the body when collapsed */
.notice-board-card.collapsed .notice-board-content{
  display:none;
}

/* Layout: list + detail */
.notice-board-content{
  margin-top:6px;
  display:flex;
  gap:8px;
  align-items:stretch;
}

/* Left: list */
.notice-board-list{
  flex:0 0 44%;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  max-height:34vh;
  overflow-y:auto;
  padding-right:2px;
}

/* Right: details */
.notice-board-detail{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-tight);
  background:var(--surface-card);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:34vh;
  overflow:hidden;
}

/* Individual notice row */
.notice-row{
  border-radius:var(--radius-tight);
  border:1px solid var(--border);
  background:var(--surface-card);
  padding:10px;
  cursor:pointer;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
}

.notice-row:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-hover);
  border-color:var(--accent);
  background:var(--surface-hover);
}
.notice-row:active{
  transform:scale(0.98);
  filter:brightness(0.88);
  transition-duration:0.05s;
}

.notice-row.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  background:var(--surface-selected);
}

.notice-row-title{
  font-weight:650;
  font-size:0.85rem;
  color:var(--text);
  line-height:1.15;
  margin-bottom:2px;
}

.notice-row-sub{
  font-size:0.74rem;
  color:var(--muted);
  line-height:1.25;
}

/* Details panel content */
.notice-detail-title{
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
}

.notice-detail-desc{
  font-size:0.82rem;
  color:var(--text);
  opacity:0.95;
  line-height:1.35;
  white-space:pre-line;
  overflow-y:auto;
  padding-right:2px;
}

.notice-detail-hint{
  font-size:0.74rem;
  color:var(--muted);
  line-height:1.25;
  border-top:1px solid var(--border);
  padding-top:6px;
}

.notice-detail-spacer{
  flex:1 1 auto;
}

.notice-accept{
  width:100%;
  margin-top:6px;
}

/* Empty states */
.notice-detail-empty{
  color:var(--muted);
  font-size:0.78rem;
  line-height:1.35;
}

.mini-empty{
  padding:10px;
  border-radius:var(--radius);
  background:var(--surface-2);
  color:var(--muted);
  font-size:0.78rem;
  border:1.5px dashed var(--border);
  text-align:center;
}

/* Mobile: stack vertically */
@media (max-width: 480px){
  .notice-board-content{
    flex-direction:column;
  }
  .notice-board-list{
    flex:0 0 auto;
    max-height:22vh;
  }
  .notice-board-detail{
    max-height:26vh;
  }
}


/* =====================================================================
   SPELLBOOK / ABILITIES MODAL: two-panel layout (list + details)
   ===================================================================== */

.spellbook-content{
  margin-top:6px;
  display:flex;
  gap:8px;
  align-items:stretch;
}

.spellbook-list{
  flex:0 0 44%;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  max-height:40dvh;
  overflow-y:auto;
  padding-right:2px;
}

.spellbook-detail{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-tight);
  background:var(--surface-card);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:40dvh;
  overflow:hidden;
}

.spellbook-subhead{
  margin-top:6px;
  color:var(--muted);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
}

.spell-row{
  border-radius:var(--radius-tight);
  border:1px solid var(--border);
  background:var(--surface-card);
  padding:10px;
  cursor:pointer;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
}

.spell-row:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-hover);
  border-color:var(--accent);
  background:var(--surface-hover);
}
.spell-row:active{
  transform:scale(0.98);
  filter:brightness(0.88);
  transition-duration:0.05s;
}

.spell-row.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  background:var(--surface-selected);
}

.spell-row-title{
  font-weight:650;
  font-size:0.85rem;
  color:var(--text);
  line-height:1.15;
  margin-bottom:2px;
}

.spell-row-sub{
  font-size:0.74rem;
  color:var(--muted);
  line-height:1.25;
}

.spell-detail-title{
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
}

.spell-detail-desc{
  font-size:0.82rem;
  color:var(--text);
  opacity:0.95;
  line-height:1.35;
  white-space:pre-line;
  overflow-y:auto;
  padding-right:2px;
}

.spell-detail-meta{
  border-top:1px solid var(--border);
  padding-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.spell-detail-empty{
  color:var(--muted);
  font-size:0.78rem;
  line-height:1.35;
}

@media (max-width: 480px){
  .spellbook-content{ flex-direction:column; }
  .spellbook-list{ max-height:22dvh; }
  .spellbook-detail{ max-height:30dvh; }
}





/* --- Spell Book UX (Patch 1.2.0) ------------------------------------- */
.spells-help{ font-size:12px; opacity:.9; margin:6px 0 4px; }
.spells-legend{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.spell-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.badge{ display:inline-flex; align-items:center; font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.22); opacity:.9; }
.spell-card.in-combat summary{ cursor:pointer; }


/* --- Patch 1.2.0 UI: Make main-menu Settings screen fit viewport (mobile-safe) --- */
#settingsScreen{
  min-height:0;
}
#settingsScreen .settings-card{
  width:100%;
  max-width:560px;
  margin:0 auto;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
#settingsScreen .settings-sections{
  flex:1;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  /* Mobile: prevent slider/toggle "bubbles" (thumb + shadow) from being clipped by
     the scroll container edge, and hide the visible scrollbar/indicator. */
  /* Give the thumbs extra breathing room so iOS/WebKit doesn't clip the shadow/bubble. */
  padding-right:18px;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* Legacy Edge */
}

#settingsScreen .settings-sections::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;                  /* Chromium/WebKit */
}

/* ========================================================================== */
/* SPLASH SCREEN (Studio and Engine Logos) */
/* -------------------------------------------------------------------------- */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 999999; /* above everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0a0e1a 0%, #000000 100%);
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-screen.hidden {
  display: none;
}

.splash-content {
  text-align: center;
}

.splash-logo {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.splash-logo.show {
  opacity: 1;
  transform: scale(1);
}

.splash-logo.fade-out {
  opacity: 0;
  transform: scale(1.05);
}

/* Studio Logo */
.studio-logo .logo-icon {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 20px rgba(255, 200, 100, 0.6));
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 200, 100, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(255, 200, 100, 0.9));
  }
}

.studio-logo .logo-text {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 8px;
  background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 50%, #ff9800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(255, 200, 100, 0.3);
  margin-bottom: 8px;
}

.studio-logo .logo-subtitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 6px;
  color: rgba(255, 235, 59, 0.8);
  text-transform: uppercase;
}

/* Engine Logo */
.engine-logo .logo-text-large {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 12px;
  background: linear-gradient(135deg, #4fc3f7 0%, #7c4dff 50%, #b388ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(79, 195, 247, 0.4);
  margin-bottom: 12px;
  position: relative;
}

.engine-logo .logo-text-large::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
  box-shadow: 0 0 10px rgba(79, 195, 247, 0.8);
}

.engine-logo .logo-subtitle {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 8px;
  color: rgba(79, 195, 247, 0.9);
  text-transform: uppercase;
}

/* ========================================================================== */
/* BOOT LOADER (Patch 1.2.72) */
/* -------------------------------------------------------------------------- */

.boot-loader{
  position:fixed;
  inset:0;
  z-index:999998; /* below the boot diagnostics overlay */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(4px);
}

.boot-loader.hidden{
  display:none;
}

.boot-loader-card{
  width:min(520px, 94vw);
  background:rgba(20,20,20,0.92);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius);
  padding:18px 16px;
  text-align:center;
}

.boot-loader-title{
  font-weight:800;
  letter-spacing:0.6px;
  font-size:16px;
  margin-bottom:10px;
}

.boot-loader-spinner{
  width:34px;
  height:34px;
  margin:0 auto 12px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.18);
  border-top-color:rgba(255,255,255,0.92);
  animation:bootspin 0.9s linear infinite;
}

@keyframes bootspin{
  to{ transform:rotate(360deg); }
}

.boot-loader-bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
  margin:0 auto 10px;
}

.boot-loader-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(255,255,255,0.86);
  transition:width var(--t-med) var(--ease);
}

.boot-loader-text{
  font-size:12px;
  opacity:0.88;
  line-height:1.25;
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

.toast-layer{
  position:fixed;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:9999;
  pointer-events:none;
}

.toast{
  max-width:92vw;
  padding:12px 16px;
  border-radius:var(--radius);
  background:var(--surface-card);
  border:1px solid var(--border);
  color:var(--text);
  font-size:14px;
  font-weight:500;
  line-height:1.25;
  box-shadow:var(--shadow-card);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  pointer-events:none;
}

/* =============================================================================
   BUSY OVERLAY
   ============================================================================= */

.busy-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(2px);
}

.busy-overlay.hidden{
  display:none;
}

.busy-card{
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--surface-card);
  border:1px solid var(--border);
  color:var(--text);
  font-size:14px;
  box-shadow:var(--shadow-pop);
  min-width:220px;
}

.busy-title{
  font-weight:600;
  margin-bottom:8px;
}

.busy-bar-wrap{
  margin-top:10px;
  height:8px;
  border-radius:var(--pill);
  overflow:hidden;
  background:rgba(255,255,255,0.18);
}

.busy-bar{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width var(--t-med) var(--ease);
}

/* =============================================================================
   INVENTORY SLIDE PANEL (swipe gesture)
   ============================================================================= */

/* Make gameScreen a positioning context for the slide panel */
#gameScreen{ position:relative; }

/* Transition game content out when inventory is open */
#gameScreen > *:not(.inventory-slide-panel){
  transition: transform var(--t-panel) var(--ease),
              opacity var(--t-med) var(--ease);
  will-change: transform, opacity;
}
#gameScreen.inventory-open > *:not(.inventory-slide-panel){
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* The slide panel itself */
.inventory-slide-panel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(-100%);
  transition: transform var(--t-panel) var(--ease);
  will-change: transform;
  z-index: 5;
  overflow: hidden;
}
#gameScreen.inventory-open .inventory-slide-panel{
  transform: translateX(0);
}

/* Disable transitions during active drag for responsive feel */
#gameScreen.swiping > *{
  transition: none !important;
}

/* Panel header */
.inventory-slide-header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-card);
}
.inventory-slide-title{
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Panel body (scrollable inventory content) */
.inventory-slide-body{
  flex: 1;
  overflow-y: auto;
  padding: 6px 4px;
  -webkit-overflow-scrolling: touch;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .inventory-slide-panel,
  #gameScreen > *:not(.inventory-slide-panel){
    transition-duration: 0.01ms !important;
  }
}