:root {
  --ashen-ink: #080a09;
  --ashen-soot: #151816;
  --ashen-charcoal: #242824;
  --ashen-stone: #4b5048;
  --ashen-bone: #b8b9a8;
  --ashen-paper: #d8d7be;
  --ashen-rust: #7f382e;
  --ashen-frost: #aebeb9;
  --panel-bg: rgba(12, 15, 13, .9);
  --panel-border: #6f7469;
  --text-main: #d8d7be;
  --text-muted: #8e9388;
  --accent: #c9c7a9;
}

html,
body {
  background: #080a09;
  color: var(--ashen-paper);
  font-family: Georgia, "Times New Roman", serif;
}

body.ashen-client {
  background:
    radial-gradient(circle at 50% 18%, rgba(193, 194, 168, .08), transparent 32rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    #080a09;
}

body.ashen-client::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 19% 23%, rgba(239,239,211,.5) 0 .55px, transparent .8px),
    radial-gradient(circle at 73% 61%, rgba(239,239,211,.35) 0 .45px, transparent .75px);
  background-size: 9px 11px, 13px 15px;
}

body.ashen-client::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  box-shadow: inset 0 0 10vw 3vw rgba(0,0,0,.78);
}

.topbar,
.iron-bar,
.iron-window,
.panel,
.dialog-card,
.modal-card,
.command-rail,
.hud-dock,
.world-panel,
.auth-card,
.menu-card {
  color: var(--ashen-paper) !important;
  background:
    linear-gradient(145deg, rgba(37, 41, 37, .9), rgba(8, 10, 9, .94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px) !important;
  border-color: rgba(168, 171, 151, .44) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 1px rgba(220,220,194,.12) !important;
  backdrop-filter: blur(8px) grayscale(1);
}

.topbar {
  min-height: 58px;
  border-bottom: 1px solid rgba(192,194,172,.34) !important;
}

.brand strong,
.auth-card h1,
.menu-card h1,
dialog h2,
dialog h3,
.panel h2,
.panel h3 {
  color: #e2e1c6 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px #000;
}

.brand small,
.muted,
small,
.hint {
  color: #92978b !important;
}

.brand-mark {
  color: #101310 !important;
  background: #c7c7ad !important;
  border: 1px solid #f0efd3 !important;
  box-shadow: 0 0 0 3px #252925, 0 0 18px rgba(214,214,186,.2) !important;
  font-family: "Courier New", monospace;
  font-weight: 900;
}

.client-switch {
  color: #d3d2b7;
  border: 1px solid rgba(199,199,173,.4);
  border-radius: 3px;
  padding: .42rem .65rem;
  text-decoration: none;
  background: rgba(5,7,6,.65);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .16s ease, color .16s ease;
}

.client-switch:hover,
.client-switch:focus-visible {
  color: #0b0d0b;
  background: #d1d0b5;
  outline: none;
}

button,
select,
input,
textarea,
.button {
  color: #d7d6bc !important;
  background: linear-gradient(#292d29, #111411) !important;
  border-color: #686e65 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px rgba(229,229,205,.1), 0 2px 5px rgba(0,0,0,.36) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

button:hover,
button:focus-visible,
.button:hover {
  color: #111310 !important;
  background: #cfceb4 !important;
  border-color: #ecebd0 !important;
  outline: none;
}

button.danger,
.danger {
  color: #c99386 !important;
  border-color: #703b34 !important;
}

.command-rail button > span {
  filter: grayscale(1) contrast(1.5);
}

.status-gem,
.season-chip,
.tag,
.chip,
.badge {
  color: #d9d8bd !important;
  background: #252925 !important;
  border-color: #71766c !important;
  box-shadow: none !important;
}

.status-gem {
  background: #c8cab3 !important;
  box-shadow: 0 0 9px rgba(213,214,190,.5) !important;
}

#gameCanvas,
canvas.game-canvas,
.game-canvas canvas {
  background: #0b0d0b !important;
  image-rendering: pixelated;
  filter: contrast(1.04);
}

.canvas-wrap,
.game-stage,
.world-stage {
  background: #090b09 !important;
  border-color: #454a44 !important;
  box-shadow: inset 0 0 38px rgba(0,0,0,.75) !important;
}

.log-entry,
.journal-entry,
.inventory-item,
.spell-card,
.quest-card,
.character-card {
  background: rgba(23,26,23,.86) !important;
  border-color: rgba(122,127,117,.34) !important;
}

.inventory-item img,
.item-icon,
.avatar,
.portrait,
.spell-icon {
  filter: grayscale(1) contrast(1.28) sepia(.08);
}

.health-fill,
.danger-fill,
.damage-fill {
  background: #7b362e !important;
}

.mana-fill,
.focus-fill,
.xp-fill,
.progress-fill {
  background: #9da8a1 !important;
}

.tooltip,
[role="tooltip"] {
  color: #dfdec3 !important;
  background: rgba(7,9,8,.96) !important;
  border-color: #777c72 !important;
}

dialog::backdrop {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px) grayscale(1);
}

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

::-webkit-scrollbar-track {
  background: #0b0d0b;
}

::-webkit-scrollbar-thumb {
  background: #4f554e;
  border: 2px solid #0b0d0b;
}

@media (max-width: 980px) {
  .client-switch {
    padding: .34rem .44rem;
    font-size: .63rem;
  }
  .brand small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ashen-client::before {
    opacity: .1;
  }
}

/* Ashen R2 — pseudo-isometric pixel miniature pass */
:root {
  --ashen-brass: #a58353;
  --ashen-brass-soft: #6e5a3d;
  --ashen-moss: #52583c;
  --ashen-ember: #9a5135;
}

body.ashen-client::before {
  opacity: .115;
  background-image:
    radial-gradient(circle at 19% 23%, rgba(239,225,183,.52) 0 .55px, transparent .9px),
    radial-gradient(circle at 73% 61%, rgba(194,202,166,.34) 0 .5px, transparent .85px),
    repeating-conic-gradient(from 45deg, rgba(255,255,255,.025) 0 25%, transparent 0 50%);
  background-size: 9px 11px, 13px 15px, 4px 4px;
}

.topbar,
.iron-bar,
.iron-window,
.panel,
.dialog-card,
.modal-card,
.command-rail,
.hud-dock,
.world-panel,
.auth-card,
.menu-card {
  border-color: rgba(165,131,83,.52) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.58),
    inset 0 1px rgba(231,204,154,.12),
    inset 0 0 0 1px rgba(72,57,39,.32) !important;
}

#gameCanvas,
canvas.game-canvas,
.game-canvas canvas,
.world-stage canvas,
.canvas-wrap canvas {
  image-rendering: pixelated !important;
  image-rendering: crisp-edges;
  filter: contrast(1.075) saturate(.88) brightness(.96);
}

.canvas-wrap,
.game-stage,
.world-stage {
  position: relative;
  overflow: hidden;
  border-color: rgba(138,108,69,.58) !important;
  box-shadow:
    inset 0 0 44px rgba(0,0,0,.72),
    0 9px 26px rgba(0,0,0,.42) !important;
}

/* Tiny edge highlights make the stage feel like a physical miniature board. */
.canvas-wrap::after,
.game-stage::after,
.world-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    inset 0 1px rgba(224,194,139,.16),
    inset 1px 0 rgba(224,194,139,.08),
    inset 0 -18px 28px rgba(0,0,0,.18);
}

.health-fill,
.danger-fill,
.damage-fill {
  background: #8f3f31 !important;
}

.mana-fill,
.focus-fill,
.xp-fill,
.progress-fill {
  background: #9b9d76 !important;
}

button,
select,
input,
textarea,
.button {
  border-color: #705b3f !important;
}

button:hover,
button:focus-visible,
.button:hover {
  border-color: #c4a66d !important;
}

/* Ashen R3: clearer battlefield, coarse-pixel actors and a larger play area. */
body.ashen-client::before {
  opacity: .035;
  background-size: 15px 17px, 21px 23px;
}

body.ashen-client::after {
  box-shadow: inset 0 0 7vw 1.8vw rgba(0,0,0,.62);
}

body.ashen-client #gameCanvas,
body.ashen-client canvas.game-canvas,
body.ashen-client .game-canvas canvas,
body.ashen-client .world-stage canvas,
body.ashen-client .canvas-wrap canvas {
  filter: contrast(1.095) saturate(.93) brightness(1.015);
  image-rendering: pixelated !important;
}

@media (min-width: 1101px) {
  body.ashen-client .topbar {
    min-height: 48px !important;
    height: 48px !important;
    padding: 3px 8px !important;
  }

  body.ashen-client .brand-mark {
    width: 36px !important;
    height: 36px !important;
  }

  body.ashen-client .layout {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 6px 6px !important;
    gap: 6px !important;
    grid-template-columns: 52px minmax(760px, 1fr) 258px !important;
  }

  body.ashen-client .command-rail {
    padding: 4px !important;
  }

  body.ashen-client .command-rail button {
    min-width: 0 !important;
    height: 48px !important;
  }

  body.ashen-client .sidebar {
    padding: 4px !important;
    gap: 4px !important;
  }

  body.ashen-client .sidebar .card {
    padding: .42rem !important;
  }

  body.ashen-client .game-panel {
    min-width: 0;
    height: calc(100vh - 59px);
  }

  body.ashen-client .location-strip {
    height: 39px !important;
    min-height: 39px !important;
    padding: .25rem .6rem !important;
  }

  body.ashen-client .canvas-shell {
    width: 100%;
    min-height: 0 !important;
    height: calc(100vh - 104px) !important;
    max-height: calc(100vh - 104px) !important;
    aspect-ratio: auto !important;
  }

  body.ashen-client #gameCanvas {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: fill !important;
    aspect-ratio: auto !important;
  }

  /* The command deck floats over the board instead of reserving a full row. */
  body.ashen-client .command-deck {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    min-height: 58px !important;
    max-height: 118px !important;
    transform-origin: bottom center;
  }
}

@media (min-width: 1450px) {
  body.ashen-client .layout {
    grid-template-columns: 54px minmax(900px, 1fr) 275px !important;
  }
}


/* Ashen R4 — native colours, aspect-correct large viewport, actor-only coarse pixels. */
body.ashen-client,
body.ashen-client .app {
  color-scheme: dark;
}

body.ashen-client::before { opacity: .018 !important; }
body.ashen-client::after { box-shadow: inset 0 0 4vw 1vw rgba(0,0,0,.42) !important; }

body.ashen-client .topbar,
body.ashen-client .iron-bar,
body.ashen-client .iron-window,
body.ashen-client .panel,
body.ashen-client .dialog-card,
body.ashen-client .modal-card,
body.ashen-client .command-rail,
body.ashen-client .hud-dock,
body.ashen-client .world-panel,
body.ashen-client .auth-card,
body.ashen-client .menu-card {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

body.ashen-client .command-rail button > span,
body.ashen-client .inventory-item img,
body.ashen-client .item-icon,
body.ashen-client .avatar,
body.ashen-client .portrait,
body.ashen-client .spell-icon {
  filter: none !important;
}

body.ashen-client #gameCanvas,
body.ashen-client canvas.game-canvas,
body.ashen-client .game-canvas canvas,
body.ashen-client .world-stage canvas,
body.ashen-client .canvas-wrap canvas {
  filter: none !important;
  image-rendering: auto !important;
}

@media (min-width: 1101px) {
  body.ashen-client .topbar { min-height: 44px !important; height: 44px !important; }
  body.ashen-client .layout {
    grid-template-columns: 48px minmax(0, 1fr) 222px !important;
    gap: 4px !important;
    padding: 4px !important;
    max-width: none !important;
  }
  body.ashen-client .game-panel { height: calc(100vh - 52px) !important; min-width: 0 !important; }
  body.ashen-client .location-strip { height: 34px !important; min-height: 34px !important; padding: .18rem .55rem !important; }
  body.ashen-client .canvas-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  body.ashen-client #gameCanvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 18 / 11 !important;
    object-fit: contain !important;
  }
  body.ashen-client .command-deck {
    left: 6px !important; right: 6px !important; bottom: 6px !important;
    min-height: 54px !important; max-height: 108px !important;
  }
}

@media (min-width: 1500px) {
  body.ashen-client .layout { grid-template-columns: 48px minmax(0, 1fr) 238px !important; }
}


/* Ashen R5 — unified native-colour pixel world + low-cost strong miniature depth. */
body.ashen-client::before { display: none !important; }
body.ashen-client::after {
  box-shadow: inset 0 0 5.2vw 1.35vw rgba(0,0,0,.52) !important;
}

/* Backdrop blur was a major GPU cost on large screens. R5 keeps opaque pixel panels instead. */
body.ashen-client .topbar,
body.ashen-client .iron-bar,
body.ashen-client .iron-window,
body.ashen-client .panel,
body.ashen-client .dialog-card,
body.ashen-client .modal-card,
body.ashen-client .command-rail,
body.ashen-client .hud-dock,
body.ashen-client .world-panel,
body.ashen-client .auth-card,
body.ashen-client .menu-card,
body.ashen-client dialog::backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ashen-client .topbar,
body.ashen-client .iron-bar,
body.ashen-client .iron-window,
body.ashen-client .panel,
body.ashen-client .dialog-card,
body.ashen-client .modal-card,
body.ashen-client .command-rail,
body.ashen-client .hud-dock,
body.ashen-client .world-panel,
body.ashen-client .auth-card,
body.ashen-client .menu-card {
  background:
    linear-gradient(180deg, rgba(30,31,29,.965), rgba(12,13,12,.975)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px) !important;
  border-radius: 0 !important;
}

body.ashen-client button,
body.ashen-client select,
body.ashen-client input,
body.ashen-client textarea,
body.ashen-client .button,
body.ashen-client .chip,
body.ashen-client .tag,
body.ashen-client .badge {
  border-radius: 0 !important;
}

/* Everything drawn inside the game canvas is now pixelated as one frame, with native RGB retained. */
body.ashen-client #gameCanvas,
body.ashen-client canvas.game-canvas,
body.ashen-client .game-canvas canvas,
body.ashen-client .world-stage canvas,
body.ashen-client .canvas-wrap canvas {
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  filter: none !important;
}

body.ashen-client .inventory-item img,
body.ashen-client .item-icon,
body.ashen-client .avatar,
body.ashen-client .portrait,
body.ashen-client .spell-icon,
body.ashen-client .command-rail button > span {
  image-rendering: pixelated !important;
  filter: none !important;
}

body.ashen-client .canvas-shell,
body.ashen-client .canvas-wrap,
body.ashen-client .game-stage,
body.ashen-client .world-stage {
  contain: layout paint;
  background: #090b09 !important;
}