@layer interface, preferences;

@layer interface {
  :root {
    color-scheme: dark;
    --ink: #090806;
    --panel: #0d0e0c;
    --panel-2: #15130f;
    --gold: #d89425;
    --gold-hot: #ffc15a;
    --line: #704216;
    --paper: #d6b57b;
    --paper-dark: #8a6533;
    --red: #ea4459;
    --mint: #55dec0;
    --blue: #568fff;
    --display: Georgia, "Times New Roman", serif;
    --ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body.live-loading .app-shell {
    visibility:hidden;
  }

  body.title-open .app-shell {
    visibility:hidden;
  }

  .title-screen {
    position:fixed;
    inset:0;
    z-index:40;
    display:grid;
    place-items:center;
    padding:24px;
    background:linear-gradient(#070807a8,#070807ed),url('assets/rooms/collapsed-great-hall.png') center/cover;
  }

  .title-screen[hidden] {
    display:none;
  }

  .title-card {
    width:min(650px,100%);
    padding:44px;
    text-align:center;
    background:#0c0e0de0;
    border:1px solid #b07727;
    outline:3px double #7b511e;
    outline-offset:5px;
    box-shadow:0 12px 80px #000;
  }

  .title-card h1 {
    color:#f2d18b;
    font:clamp(24px,4vw,48px) var(--display);
    letter-spacing:.1em;
  }

  .title-card p {
    color:#b4a07c;
    line-height:1.6;
  }

  .title-ornament {
    color:#cb983d;
    font-size:28px;
  }

  .title-actions {
    display:grid;
    gap:12px;
    width:min(340px,100%);
    margin:28px auto;
  }

  .title-actions button {
    width:100%;
    min-height:48px;
  }

  .character-creator {
    display:grid;
    grid-template-columns:minmax(160px,230px) 1fr;
    gap:24px;
  }

  .creation-portrait img {
    width:100%;
    border:1px solid #c1903d;
  }

  .creation-fields label {
    display:grid;
    gap:6px;
    color:#ddcaa2;
  }

  .creation-fields input,.creation-fields select,#npcQuestion input {
    background:#0e100d;
    color:#f2deab;
    border:1px solid #705022;
    padding:10px;
    min-width:0;
    width:100%;
  }

  .creation-selects {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:14px 0;
  }

  .starting-techniques {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .starting-techniques label {
    padding:10px;
    border:1px solid #594022;
    position:relative;
    cursor:pointer;
  }

  .starting-techniques label:has(input:checked) {
    border-color:#e0b65e;
    background:#3e2e15;
  }

  .starting-techniques img {
    width:45px;
    height:45px;
    object-fit:contain;
  }

  .starting-techniques input {
    position:absolute;
    top:10px;
    right:10px;
    width:auto;
  }

  .starting-techniques small {
    color:#b4a17d;
    line-height:1.4;
  }

  .allocation-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }

  .creation-fields h3 {
    margin:18px 0 10px;
  }

  .creation-fields h3 span {
    color:#b8a078;
    font:12px var(--body);
  }

  .creation-footer {
    display:flex;
    gap:10px;
    margin-top:20px;
  }

  .trade-tabs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 18px;
  }

  .trade-tabs button[aria-pressed=true] {
    border-color:#e8bb64;
    background:#493213;
  }

  .trade-stock,.technique-branches {
    display:grid;
    gap:10px;
  }

  .masthead-tools-right [data-open-flow="settings"] {
    display:none;
  }

  .trade-stock small {
    display:block;
    color:#a8997b;
    line-height:1.5;
  }

  .technique-branches .technique-card {
    display:grid;
    grid-template-columns:54px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px;
  }

  .technique-branches .technique-card img {
    width:54px;
    height:54px;
    object-fit:contain;
  }

  .entity-detail > img {
    width:100px;
    height:100px;
    object-fit:contain;
    display:block;
    margin:0 auto 18px;
  }

  #npcQuestion {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:10px;
    margin-top:16px;
  }

  #npcQuestion label {
    display:grid;
    gap:7px;
  }

  .ending-copy p {
    white-space:pre-line;
    line-height:1.7;
  }

  @media(max-width:760px) {
    .character-creator {
      grid-template-columns:1fr;
    }

    .creation-portrait {
      max-width:150px;
      margin:auto;
    }

    .starting-techniques {
      grid-template-columns:1fr;
    }

    .allocation-grid {
      grid-template-columns:1fr 1fr;
    }

    .title-card {
      padding:25px;
    }

    .technique-branches .technique-card {
      grid-template-columns:42px 1fr;
    }

    .technique-card>.flow-button {
      grid-column:1/-1;
    }
  }

  * {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    margin: 0;
    background: #050504;
    color: #eee5d5;
    font-family: var(--ui);
    overflow: hidden;
  }

  button, input {
    font: inherit;
  }

  button {
    color: inherit;
  }

  button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #ffd177;
    outline-offset: 2px;
  }

  .app-shell {
    min-height: 100%;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: radial-gradient(circle at 50% 0, #292013 0, #090806 45%);
  }

  .masthead {
    position: relative;
    display: grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    min-height:63px;
    padding:8px 14px;
    gap:12px;
    place-items: center;
    margin: 3px 7px 0;
    border: 2px solid #15120d;
    outline: 1px solid #4b2b0e;
    background:
    radial-gradient(circle at 6px 6px, #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 11px 6px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 6px 11px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 6px, #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 11px) 6px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 11px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 6px), #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 11px calc(100% - 6px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 11px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 6px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 11px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    linear-gradient(180deg, #15150f, #080907);
    box-shadow: 0 0 0 2px #020201, 0 0 0 3px #2f1b0a, 0 4px 16px #000, inset 0 0 0 1px #a96620, inset 0 0 0 4px #050504, inset 0 0 0 5px #4d2d0f;
    z-index: 20;
  }

  .masthead::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-top: 1px solid #4c2d10;
    border-bottom: 1px solid #bd7522;
    pointer-events: none;
  }

  .masthead::after, .action-dock::before, .sidebar::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(216,148,37,.42);
    pointer-events: none;
  }

  .masthead h1 {
    margin: 0;
    min-width:0;
    text-align:center;
    overflow-wrap:anywhere;
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.4vw, 2.35rem);
    letter-spacing: .08em;
    font-weight: 500;
    color: #f4d18c;
    text-shadow: 0 0 18px #c06b18aa, 1px 2px #000;
  }

  .eyebrow {
    position: absolute;
    left: 25px;
    bottom: 12px;
    margin: 0;
    color: #a67b3d;
    font-size: .53rem;
    letter-spacing: .2em;
  }

  .combat-column,
.sidebar {
    --frame-gold: #8f5519;
    --frame-bright: #d58a25;
    --frame-shadow: #020201;
    position: relative;
    border: 2px solid #15120d;
    outline: 1px solid #4b2b0e;
    background:
    radial-gradient(circle at 6px 6px, #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 11px 6px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 6px 11px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 6px, #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 11px) 6px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 11px, #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 6px), #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 11px calc(100% - 6px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 11px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #e0a044 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 6px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 11px), #c98329 0 1px, #3b230d 1.5px, transparent 2px),
    radial-gradient(circle, #cb7c21 0 1px, #1d1107 2px, transparent 3px) left 5px top 20px / 7px 28px repeat-y,
    radial-gradient(circle, #cb7c21 0 1px, #1d1107 2px, transparent 3px) right 5px top 20px / 7px 28px repeat-y,
    linear-gradient(90deg, #050504, #17110a 3px, #070604 7px, #050504);
    box-shadow:
    0 0 0 2px #020201,
    0 0 0 3px #2f1b0a,
    0 9px 22px #000,
    inset 0 0 0 1px #a96620,
    inset 0 0 0 4px #050504,
    inset 0 0 0 5px #4d2d0f;
  }

  .combat-column::before {
    content: "";
    position: absolute;
    z-index: 25;
    pointer-events: none;
  }

  .combat-column::before {
    inset: 4px;
    border: 1px solid #b16c20;
    box-shadow: inset 0 0 0 2px #030302, inset 0 0 0 3px #3b240e;
  }



  .scene {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #754514;
    background: #17130d var(--scene-image, none) center / contain no-repeat;
    box-shadow: inset 0 0 0 3px #080706, inset 0 0 0 4px #3b2a14;
    isolation: isolate;
  }

  .pixi-stage {
    position:absolute;
    z-index:0;
    inset:0;
    overflow:hidden;
    pointer-events:none;
  }

  .pixi-stage canvas {
    display:block;
    width:100%;
    height:100%;
  }

  .scene.pixi-ready {
    background:#17130d;
    background-image:none;
  }

  .scene.pixi-ready .mob img,.scene.pixi-ready .contact-shadow {
    opacity:0;
  }

  .scene.pixi-ready .mob::after {
    opacity:0;
  }

  .scene.pixi-ready .pixi-stage {
    pointer-events:auto;
  }

  .scene.pixi-ready .mob {
    pointer-events:none;
  }

  .scene.pixi-ready .mob-label {
    pointer-events:auto;
  }

  .scene.pixi-ready .mob img {
    pointer-events:none;
  }

  .scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.06) 50%, rgba(0,0,0,.32) 100%);
  }

  .scene-vignette {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 80px 12px #000b;
  }

  .scene-exits {
    position:absolute;
    z-index:8;
    inset:0;
    pointer-events:none;
  }

  .scene-exits[hidden] { display:none; }

  .scene-exit {
    position:absolute;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:4px;
    border:1px solid #d3b16b45;
    border-radius:3px;
    background:linear-gradient(transparent 75%,#0807058c);
    color:#f4e4bb;
    font:600 clamp(.48rem,.7vw,.65rem)/1.2 var(--ui);
    text-align:center;
    text-shadow:0 1px 3px #000;
    cursor:pointer;
    pointer-events:auto;
    opacity:.68;
  }

  .scene-exit:hover,.scene-exit:focus-visible {
    opacity:1;
    border-color:#f4d999;
    outline:2px solid #e8bd64;
    outline-offset:2px;
    background:linear-gradient(#e8bd6412,#080705a3);
  }

  .scene-exit:disabled {
    opacity:.28;
    cursor:default;
    border-style:dashed;
    pointer-events:none;
  }

  .mob {
    --scale: 1;
    position: absolute;
    z-index: 4;
    width: 23%;
    aspect-ratio: 1.5;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 12px 8px #000c);
    transition: filter .18s ease, transform .18s ease;
    transform: translate(-50%, -50%) scale(var(--scale));
    transform-origin: 50% 78%;
  }

  .mob:hover {
    --scale: 1.035;
    filter: drop-shadow(0 12px 8px #000e) brightness(1.08);
  }

  .mob img {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .mob-label {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 92%;
    transform: translateX(-50%);
    min-width: 114px;
    padding: 6px 8px 7px;
    border: 1px solid #98601b;
    background: linear-gradient(#191713ee, #090908ee);
    box-shadow: 0 5px 13px #000c, inset 0 0 0 2px #000;
    font-family: var(--display);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }

  .mob-label strong, .mob-label small {
    display: block;
    line-height: 1.05;
  }

  .mob-label strong {
    font-size: .76rem;
    font-weight: 500;
  }

  .mob-label small {
    margin-top: 3px;
    color: #c7bda9;
    font-size: .62rem;
  }

  .hp-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
  }

  .hp-line::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 60px;
    height: 7px;
    border-radius: 8px;
    background: #2d2925;
    box-shadow: inset 0 0 0 1px #49433d;
  }

  .hp-line i {
    grid-column: 1;
    grid-row: 1;
    width: var(--hp);
    max-width: 60px;
    height: 7px;
    border-radius: 8px;
    background: linear-gradient(90deg, #d83348, #ff5163);
    box-shadow: 0 0 5px #d6344b88;
  }

  .hp-line b {
    font-family: var(--ui);
    font-size: .6rem;
    font-weight: 600;
    color: #e9e1d5;
  }

  .contact-shadow {
    position: absolute;
    z-index: 1;
    left: 15%;
    right: 10%;
    bottom: 9%;
    height: 16%;
    border-radius: 50%;
    background: #000a;
    filter: blur(7px);
    pointer-events: none;
  }

  .mob::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 10%;
    right: 8%;
    bottom: 4%;
    height: 31%;
    border: 3px solid transparent;
    border-radius: 50%;
    transform: perspective(180px) rotateX(68deg);
    transition: border-color .18s, box-shadow .18s;
  }

  .mob.is-selected {
    --scale: 1.04;
    z-index: 6;
    filter: drop-shadow(0 0 8px #ff9b2d) drop-shadow(0 10px 8px #000);
  }

  .mob.is-selected::after {
    border-color: #ffad32;
    box-shadow: 0 0 8px #ff9a1e, inset 0 0 10px #ff9a1e;
  }

  .mob.is-selected .mob-label {
    border-color: #ffc15a;
    box-shadow: 0 0 13px #e6811b88, inset 0 0 0 2px #000;
  }

  .action-dock {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) 43px;
    border: 1px solid #704216;
    border-top: 0;
    background: #090a08;
    box-shadow: inset 0 2px 0 #050403;
    overflow: hidden;
  }

  .scroll-control {
    z-index: 2;
    border: 0;
    border-right: 1px solid #704216;
    background: linear-gradient(#161711, #080907);
    color: var(--gold-hot);
    font: 2.2rem var(--display);
    cursor: pointer;
  }

  .scroll-control:last-child {
    border: 0;
    border-left: 1px solid #704216;
  }

  .scroll-control:hover {
    background: #272015;
    color: #ffe2a0;
  }

  .action-scroll {
    display: flex;
    gap: 5px;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #8b581e #0e0e0c;
  }

  .action-item {
    position: relative;
    flex: 0 0 82px;
    min-width: 0;
    display: grid;
    place-items: center;
    grid-template-rows: 1fr auto;
    gap: 2px;
    padding: 5px 4px;
    border: 1px solid #583815;
    background: radial-gradient(circle at 50% 30%, #27231b, #10110f 70%);
    color: #cdbd9e;
    cursor: pointer;
    font-family: var(--display);
    font-size: .66rem;
  }

  .action-item:hover, .action-item.is-selected {
    border-color: #e0982c;
    background: radial-gradient(circle at 50% 30%, #44321c, #15130f 72%);
    color: #fff1cc;
  }

  .action-icon {
    display: grid;
    place-items: center;
    height: 41px;
    font-size: 1.7rem;
    color: #e5b04d;
    text-shadow: 0 0 10px #ec8c1c55;
  }

  .action-icon img {
    width:40px;
    height:40px;
    border:1px solid #6d471d;
    object-fit:cover;
    box-shadow:inset 0 0 5px #000,0 0 8px #b66d1728;
  }

  .potion {
    font-size: 1.45rem;
    transform: rotate(45deg);
  }

  .potion.red {
    color: #e54352;
  }

  .potion.blue {
    color: #5b91ff;
  }

  .potion.green {
    color: #5cd991;
  }

  .action-item kbd, .qty {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid #7d5422;
    border-radius: 3px;
    background: #080907dd;
    color: #dbc58d;
    font: 600 .58rem var(--ui);
  }

  .action-item[disabled] {
    opacity: .35;
    cursor: not-allowed;
  }

  .action-divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 3px 10px;
    background: linear-gradient(transparent,#b3863f 20%,#b3863f 80%,transparent);
  }

  .action-item .consumable-quantity {
    position: absolute;
    left: 4px;
    top: 3px;
    font: 600 .65rem var(--ui);
    color: #f4dfaa;
    text-shadow: 0 1px 3px #000;
    pointer-events: none;
  }

  .consumable-action[disabled] {
    opacity: .55;
  }

  .action-item[data-cooldown]:not([data-cooldown=""])::after {
    content:attr(data-cooldown);
    position:absolute;
    left:4px;
    top:4px;
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    padding:0 4px;
    border:1px solid #8c5421;
    border-radius:3px;
    background:#090806e8;
    color:#e4b65e;
    font:700 .5rem var(--ui);
  }

  .sidebar::before {
    content: "";
    position: absolute;
    z-index: 25;
    inset: 4px;
    border: 1px solid #b16c20;
    box-shadow: inset 0 0 0 2px #030302, inset 0 0 0 3px #3b240e;
    pointer-events: none;
  }

  .character-card {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(112px, 34%) 1fr;
    gap: 9px;
    padding: 6px;
    border-bottom: 1px solid #704216;
    background: linear-gradient(135deg, #171712, #080907);
  }

  .portrait {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #9c631f;
    background: radial-gradient(circle at 50% 28%, #7a5132 0 8%, #271d18 9% 23%, #101411 24% 46%, #060706 47%);
    box-shadow: inset 0 0 30px #000, 0 0 13px #000;
  }

  .portrait::after {
    content: "";
    position: absolute;
    width: 74%;
    height: 64%;
    bottom: -19%;
    border-radius: 48% 48% 0 0;
    background: linear-gradient(90deg, #0a0a09, #2f251c, #0a0a09);
    box-shadow: 0 -8px 22px #000;
  }

  .portrait span {
    z-index: 2;
    margin-top: -12px;
    font: 2.4rem var(--display);
    color: #eed7ab;
    text-shadow: 0 2px 8px #000;
  }

  .character-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #3f2b15;
    margin-bottom: 4px;
  }

  .character-heading small, .story-heading small {
    font-size: .55rem;
    letter-spacing: .18em;
    color: #9e7d49;
  }

  .character-heading h2 {
    margin: 0;
    font: 2rem var(--display);
    line-height: 1;
    color: #f2e5ce;
  }

  .level-badge {
    padding: 5px 7px;
    border: 1px solid #69451c;
    color: #d8a548;
    font: .64rem var(--ui);
  }

  .stat {
    margin-top: 5px;
  }

  .stat > span {
    display: flex;
    justify-content: space-between;
    font: .72rem var(--display);
    color: #d8cfbf;
  }

  .stat b {
    font: 600 .66rem var(--ui);
  }

  .meter {
    height: 9px;
    margin-top: 2px;
    overflow: hidden;
    border: 1px solid #464641;
    border-radius: 7px;
    background: #222622;
  }

  .meter i {
    display: block;
    width: var(--value);
    height: 100%;
    transition: width .35s ease;
  }

  .meter.health i {
    background: linear-gradient(90deg, #34c99f, #6cf1d0);
  }

  .meter.focus i {
    background: linear-gradient(90deg, #3e6fec, #65a6ff);
  }

  .meter.xp i {
    background: #b4863d;
  }

  .character-nav button {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    border: 1px solid #5f3d19;
    background: linear-gradient(#141510, #090a08);
    color: #cfbea0;
    font: .65rem var(--display);
    cursor: pointer;
  }

  .character-nav button span {
    font: 1.65rem var(--display);
    color: #e8b752;
  }

  .character-nav button:hover, .character-nav button[aria-expanded="true"] {
    border-color: #d38c25;
    background: #211a11;
    color: #fff2d3;
  }

  .exploration-tabs button {
    border: 1px solid #563817;
    background: #11120f;
    color: #a99b83;
    font: .72rem var(--display);
    cursor: pointer;
  }

  .exploration-tabs button:hover, .exploration-tabs button[aria-selected="true"] {
    border-color: #bc7724;
    background: #211a11;
    color: #f0d396;
  }



  .room-contents {
    display: grid;
    gap: 6px;
    margin-top: 16px;
  }

  .room-contents > small {
    margin-bottom: 2px;
    color: #a8864c;
    font-size: .55rem;
    letter-spacing: .18em;
  }

  .room-entity {
    display: grid;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 6px 8px;
    border: 1px solid #5b3b18;
    background: linear-gradient(90deg, #171712, #0d0e0c);
    color: #d7c8ad;
    text-align: left;
    cursor: pointer;
  }

  .room-entity:hover {
    border-color: #c57e27;
    background: #211a11;
  }

  .room-entity > span:nth-child(2) {
    min-width: 0;
  }

  .room-entity strong, .room-entity em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-entity strong {
    color: #edd19a;
    font: .86rem var(--display);
  }

  .room-entity em {
    margin-top: 2px;
    color: #8f836e;
    font: normal .62rem var(--ui);
  }

  .room-entity > b {
    color: #d99a3a;
    font-size: 1rem;
    text-align: center;
  }

  .entity-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #6f481c;
    border-radius: 50%;
    background: radial-gradient(circle, #43301f, #11120f 70%);
    color: #efcf91;
    font: .67rem var(--display);
  }

  .room-entity.loot .entity-icon {
    font-size: 1.15rem;
  }

  .exploration-actions {
    display: grid;
    gap: 7px;
    margin: 0;
  }

  .exploration-actions button {
    display: flex;
    justify-content: center;
    gap: 24px;
    align-items: center;
    min-height: 42px;
    border: 1px solid #523619;
    background: linear-gradient(90deg, #151611, #0d0e0c);
    color: #d7c5a4;
    text-align: left;
    cursor: pointer;
  }

  .exploration-actions button:first-letter {
    color: #e7b14b;
  }

  .exploration-actions button:hover {
    border-color: #bc7724;
    background: #211a11;
    color: #fff0cb;
  }

  .map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 9px;
    border-bottom: 1px solid #4e3215;
  }



  .map-floor-control {
    display:inline-flex;
    margin-left:8px;
    vertical-align:middle;
  }

  .map-floor-control[hidden] { display:none; }

  .map-floor-control select {
    max-width:120px;
    padding:1px 3px;
    border:1px solid #68451d;
    border-radius:2px;
    background:#11120f;
    color:#e8ca8c;
    font:.6rem var(--ui);
  }

  .map-floor-control select:focus-visible { outline:2px solid #e8bd64; }

  .map-controls {
    display: grid;
    grid-template-columns: 28px auto 28px;
    gap: 3px;
  }

  .map-controls button {
    min-height: 28px;
    border: 1px solid #68451d;
    background: #11120f;
    color: #d2bd92;
    cursor: pointer;
    font-size: .65rem;
  }

  .map-controls button:hover {
    border-color: #c57e27;
    color: #fff0cc;
  }

  .map-viewport {
    min-height: 0;
    overflow: hidden;
    position: relative;
    cursor:grab;
    touch-action:none;
    user-select:none;
    overscroll-behavior:contain;
  }

  .map-viewport.is-panning,.map-viewport.is-panning * {
    cursor:grabbing;
  }

  .map-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 26px #000;
  }

  .map-canvas {
    position: absolute;
    inset: 0;
    transform: translate(0px,0px) scale(1);
    transform-origin: 0 0;
  }

  .map-canvas.zoom-in {
    transform: scale(1.28);
  }

  .map-canvas.zoom-out {
    transform: scale(.82);
  }

  .map-canvas svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .map-canvas path {
    fill: none;
    stroke: #82715a;
    stroke-width: 1.35;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .map-canvas path.unknown-route {
    stroke: #685b48;
    stroke-dasharray: 2 1.5;
  }

  .map-canvas path.stair-route {
    stroke:#b7aa80;
    stroke-dasharray:3 2;
  }

  .map-unavailable {
    margin:40px 15px;
    color:#b6a98b;
    text-align:center;
    font-size:.75rem;
  }

  .map-nav-arrow {
    position: absolute;
    z-index: 3;
    left: var(--x);
    top: var(--y);
    border: 0;
    background: transparent;
    color: #e4b550;
    font: 700 1.35rem/1 var(--ui);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
  }

  .map-nav-arrow:hover {
    color: #fff0a8;
    transform: translate(-50%, -50%) scale(1.28);
  }

  .map-nav-arrow[hidden] {
    display: none;
  }

  .map-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 96px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d6c9b2;
    cursor: inherit;
    text-align: center;
  }

  .map-node i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 4px;
    border: 2px solid #8b6f42;
    border-radius: 50%;
    background: #14140f;
    color: #cba458;
    font-style: normal;
    box-shadow: 0 0 0 3px #080907, 0 0 10px #000;
  }

  .map-node span, .map-node small {
    display: block;
    text-shadow: 0 2px 3px #000;
  }

  .map-node span {
    font: .7rem var(--display);
  }

  .map-node small {
    margin-top: 1px;
    color: #887d69;
    font-size: .5rem;
    text-transform: uppercase;
    letter-spacing: .07em;
  }

  .map-node:hover i {
    border-color: #e1a33e;
    color: #ffe0a0;
    box-shadow: 0 0 0 3px #080907, 0 0 13px #c47b2588;
  }

  .map-node.current i {
    border-color: #f0b64a;
    background: #4a3518;
    color: #fff0bb;
  }

  .map-node.current small {
    color: #e6b95f;
  }

  .map-node.unknown i {
    border-style: dashed;
    color: #706650;
  }

  .map-node.stair-stub i {
    border-radius:7px;
    border-color:#b7aa80;
    color:#e5d9b5;
  }

  .map-node.stair-stub small { color:#c9b98e; }

  .map-node {
    transform:translate(-50%,-17px);
  }

  .map-node span {
    width:74px;
    margin:0 auto;
    white-space:normal;
    line-height:1.15;
  }

  .map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #4e3215;
    color: #8d816d;
    font-size: .54rem;
  }

  .map-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .map-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8b6f42;
  }

  .map-legend .current-dot {
    background: #efb54a;
  }

  .map-legend .unknown-dot {
    background: transparent;
    border: 1px dashed #88734e;
  }

  .parchment {
    overflow-anchor: none;
    scroll-behavior: auto;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px;
    border: 1px solid #81501d;
    color: #24170d;
    background-color: var(--paper);
    background-image: radial-gradient(circle at 10% 20%, #fff3c755 0 1px, transparent 2px), radial-gradient(circle at 80% 65%, #6b431411 0 1px, transparent 2px), linear-gradient(100deg, #bb8d51, #e2c693 12%, #dab982 86%, #a97c45);
    background-size: 17px 17px, 23px 23px, auto;
    box-shadow: inset 0 0 28px #6c431e99;
    font-family: var(--display);
    scrollbar-color: #8b5a28 #c9a66e;
  }

  .story-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #85643a;
  }

  .story-heading small {
    color: #715127;
  }

  .story-heading h2 {
    margin: 0;
    font-size: 1.55rem;
  }

  .story-mark {
    font-size: 1.65rem;
  }

  .story-log {
    font-size: .95rem;
    line-height: 1.32;
  }

  .story-log.is-scrolling {
    transform: translate3d(0, var(--chronicle-scroll-offset, 0px), 0);
    will-change: transform;
  }

  .story-log p {
    margin: 12px 0;
  }

  .story-log .player-line {
    padding-left: 10px;
    border-left: 3px solid #8b5a26;
    font-style: italic;
  }

  .story-log .system-line {
    font-weight: 700;
  }

  .composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 7px;
  }

  .composer input {
    min-width: 0;
    border: 1px solid #5a5b58;
    background: #101413;
    color: #eee7db;
    padding: 0 12px;
    font-family: var(--display);
  }

  .composer button {
    border: 1px solid #d48d25;
    background: linear-gradient(#603917, #27170b);
    color: #fff0ce;
    font: 1rem var(--display);
    box-shadow: inset 0 0 0 2px #24160c;
    cursor: pointer;
  }

  .composer button:hover {
    background: linear-gradient(#86521f, #35200e);
  }

  .panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .panel-card {
    padding: 10px;
    border: 1px solid #4d351a;
    background: #11120f;
    color: #d1c5af;
  }

  .panel-card strong {
    display: block;
    color: #edcf91;
    font-family: var(--display);
  }

  .panel-card small {
    color: #8f816b;
  }

  .toast {
    position: fixed;
    z-index: 50;
    left: 50%;
    bottom: 115px;
    transform: translate(-50%, 14px);
    padding: 9px 14px;
    border: 1px solid #9d6724;
    background: #10110ff2;
    color: #f3d28f;
    box-shadow: 0 8px 24px #000;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
  }

  .toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 1100px) {
    body {
      overflow: auto;
    }

    .app-shell {
      height: auto;
      min-height: 100dvh;
    }
  }

  @media (max-width: 680px) {
    .app-shell {
      grid-template-rows: auto auto;
    }

    .masthead h1 {
      font-size: 1.25rem;
    }

    .eyebrow{
      display: none;
    }

    .scene {
      background-position: 50% center;
    }

    .mob-label {
      min-width: 82px;
      padding: 4px;
      transform: translateX(-50%) scale(.8);
      transform-origin: bottom center;
    }

    .action-dock {
      grid-template-columns: 34px minmax(0,1fr) 34px;
    }

    .action-item {
      flex-basis: 74px;
    }

    .character-card {
      grid-template-columns: 95px 1fr;
    }
  }

  .masthead-tools {
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
  }

  .masthead-tools-left {
    justify-self:start;
  }

  .masthead-tools-right {
    justify-self:end;
  }

  .masthead-tools button {
    min-height:30px;
    border:1px solid #553819;
    background:#10110e;
    color:#cdb98f;
    cursor:pointer;
  }

  .masthead-tools button:hover {
    border-color:#b27024;
    color:#ffe2a2;
    background:#1a1710;
  }

  .masthead-tools-left button {
    display:flex;
    align-items:center;
    gap:7px;
    padding:5px 9px;
    font-size:.62rem;
    letter-spacing:.08em;
  }

  .masthead-tools-left span {
    color:#e7b24d;
    font-size:1rem;
  }

  .masthead-tools-left b {
    font-weight:500;
  }

  .masthead-tools-right > button:last-child {
    width:auto;
    min-width:70px;
    padding:7px 12px;
    font-size:.8rem;
  }

  .combat-state {
    position:absolute;
    z-index:9;
    top:12px;
    right:12px;
    min-width:80px;
    display:grid;
    padding:7px 10px;
    border:1px solid #754b1c;
    background:#090a08e8;
    box-shadow:0 5px 15px #000;
    text-align:center;
    color:#f0d598;
    font:.8rem var(--display);
    pointer-events:none;
  }




  .portrait {
    padding:0;
    color:inherit;
    cursor:pointer;
  }

  .portrait:hover {
    border-color:#df942e;
  }

  .effect-indicators { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0; }
  .effect-indicators:empty { display:none; }
  .effect-indicator { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #9f8960; border-radius:4px; background:#191a14; color:#e7dbbc; font:18px var(--ui); }
  .effect-beneficial { color:#9ee2b0; border-color:#598567; }
  .effect-harmful { color:#ffaaa3; border-color:#ad625b; }
  .effect-indicator:focus-visible { outline:2px solid #f3cc75; outline-offset:2px; }
  .effect-indicator small { position:absolute; right:1px; bottom:0; padding:0 2px; background:#161712; font:10px var(--ui); }
  .current-effects article { display:flex; gap:12px; margin:12px 0; }
  .current-effects .effect-indicator { flex:none; }
  .current-effects small { display:block; color:#cbbb9a; margin-top:4px; }
  .current-effects p { margin:6px 0; }

  .room-entity.portal .entity-icon {
    color:#72a6ff;
    box-shadow:0 0 12px #3c76cc55;
  }

  .story-log .danger-line {
    color:#7b101d;
    font-weight:700;
  }

  .modal-backdrop[hidden] {
    display:none;
  }

  .modal-backdrop {
    position:fixed;
    z-index:100;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:#020201cc;
    backdrop-filter:blur(5px);
  }

  .flow-modal {
    width:min(880px,96vw);
    max-height:min(820px,92vh);
    display:grid;
    border:1px solid #c17b24;
    outline:3px solid #070604;
    background:linear-gradient(145deg,#1b1913,#090a08 55%);
    box-shadow:0 24px 90px #000, inset 0 0 0 4px #050504, inset 0 0 0 5px #4b2e11;
  }

  .flow-modal > header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:18px 21px 14px;
    border-bottom:1px solid #674019;
  }

  .flow-modal header small {
    color:#a78045;
    font-size:.58rem;
    letter-spacing:.18em;
  }

  .flow-modal header h2 {
    margin:3px 0 0;
    color:#f0d69e;
    font:1.75rem var(--display);
  }

  .flow-modal header > button {
    width:34px;
    height:34px;
    border:1px solid #6e471d;
    background:#10110f;
    color:#ddb96f;
    cursor:pointer;
    font-size:1.35rem;
  }

  .flow-body {
    min-height:0;
    overflow:auto;
    padding:20px;
    scrollbar-color:#8b581e #0e0e0c;
  }

  .flow-footer {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    min-height:64px;
    padding:12px 20px;
    border-top:1px solid #5b3917;
    background:#090a08;
  }

  .flow-button {
    min-width:116px;
    padding:9px 14px;
    border:1px solid #6b481f;
    background:#171711;
    color:#d8c6a6;
    cursor:pointer;
  }

  .flow-button:hover {
    border-color:#cf8628;
    color:#fff0cb;
  }

  .flow-button.primary {
    border-color:#cc8529;
    background:linear-gradient(#65401d,#2c1b0d);
    color:#fff0cf;
  }

  .flow-button.danger {
    border-color:#a84232;
    background:#3c1512;
  }

  .flow-button.disabled {
    opacity:.45;
    cursor:not-allowed;
  }

  .character-flow {
    display:grid;
    grid-template-columns:230px 1fr;
    gap:22px;
  }

  .large-portrait {
    min-height:330px;
    display:grid;
    place-items:center;
    align-content:center;
    border:1px solid #8f5c20;
    background:radial-gradient(circle at 50% 25%,#795034 0 8%,#2c211a 9% 22%,#101411 23% 46%,#060706 47%);
    box-shadow:inset 0 0 45px #000;
  }

  .large-portrait span {
    color:#f0d9ae;
    font:4.2rem var(--display);
  }

  .large-portrait button {
    padding:7px 10px;
    border:1px solid #65431c;
    background:#10110e;
    color:#d5bd8e;
    cursor:pointer;
  }

  .character-sheet h3,.prepare-flow h3 {
    margin:18px 0 8px;
    color:#d9bd83;
    font:1rem var(--display);
  }

  .resource-row {
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px;
    margin-bottom:10px;
  }

  .resource-row span,.resource-row b {
    font-size:.72rem;
  }

  .resource-row i {
    grid-column:1/-1;
    height:9px;
    border:1px solid #4c514a;
    border-radius:7px;
    background:linear-gradient(90deg,#50ddbb var(--fill),#262a26 var(--fill));
  }

  .resource-row.focus-row i {
    background:linear-gradient(90deg,#578ff7 var(--fill),#242932 var(--fill));
  }

  .effect-list {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .effect-list span {
    padding:7px 9px;
    border:1px solid #665126;
    background:#17150f;
    color:#d8c28d;
    font-size:.68rem;
  }

  .effect-list b {
    margin-left:8px;
    color:#a2957f;
    font-weight:400;
  }

  .creator-flow {
    display:grid;
    gap:16px;
  }

  .creator-flow > label {
    display:grid;
    gap:5px;
    color:#d8c18d;
    font:1rem var(--display);
  }

  .creator-flow input[type=text],.creator-flow > label input {
    padding:10px;
    border:1px solid #64431c;
    background:#0b0c0a;
    color:#eee2cc;
  }

  .creator-flow fieldset {
    margin:0;
    padding:12px;
    border:1px solid #513718;
  }

  .creator-flow legend {
    color:#e0c38b;
    font:1rem var(--display);
  }

  .creator-flow legend small {
    color:#8e806b;
    font:.62rem var(--ui);
  }

  .choice-row,.technique-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }

  .choice-row label,.technique-grid label {
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px;
    border:1px solid #47331b;
    background:#11120f;
    cursor:pointer;
  }

  .technique-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .technique-grid label {
    display:grid;
    grid-template-columns:auto 1fr;
  }

  .technique-grid small {
    grid-column:2;
    color:#8f826d;
  }

  .attribute-builder {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px 14px;
  }

  .attribute-builder > div {
    display:grid;
    grid-template-columns:1fr 28px 28px 28px;
    align-items:center;
    gap:4px;
    padding:6px;
    background:#10110e;
  }

  .attribute-builder span b,.attribute-builder span small {
    display:block;
  }

  .attribute-builder span small {
    color:#817561;
    font-size:.55rem;
  }

  .attribute-builder button {
    height:28px;
    border:1px solid #5a3d1c;
    background:#191711;
    color:#e2bd72;
  }

  .history-list {
    display:grid;
    gap:0;
  }

  .history-list article {
    display:grid;
    grid-template-columns:80px 1fr;
    gap:15px;
    padding:14px 4px;
    border-bottom:1px solid #3f2d18;
  }

  .history-list time {
    color:#a17d45;
    font-size:.64rem;
  }

  .history-list b {
    color:#e7cc96;
    font:1rem var(--display);
  }

  .history-list p {
    margin:4px 0 0;
    color:#a89b84;
    font:.75rem/1.45 var(--display);
  }

  .settings-flow {
    display:grid;
    gap:8px;
  }

  .toggle-row,.range-row {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:15px;
    min-height:54px;
    padding:10px 12px;
    border:1px solid #44321b;
    background:#10110e;
  }

  .toggle-row span b,.toggle-row span small {
    display:block;
  }

  .toggle-row span b {
    color:#e2c890;
  }

  .toggle-row span small {
    margin-top:2px;
    color:#8e826f;
    font-size:.62rem;
  }

  .toggle-row input {
    width:20px;
    height:20px;
    accent-color:#c17b24;
  }

  .range-row {
    grid-template-columns:140px 1fr 45px;
    color:#c9b896;
  }

  .range-row input {
    accent-color:#c17b24;
  }

  .range-row output {
    color:#e5c57f;
    font-size:.68rem;
    text-align:right;
  }

  .objective-flow {
    max-width:650px;
    margin:auto;
  }

  .objective-flow > p {
    color:#d1c4ae;
    font:1.05rem/1.5 var(--display);
  }

  .objective-flow ol {
    list-style:none;
    padding:0;
    counter-reset:steps;
  }

  .objective-flow li {
    counter-increment:steps;
    position:relative;
    margin:5px 0;
    padding:10px 12px 10px 42px;
    border:1px solid #46331c;
    background:#11120f;
    color:#a99d88;
  }

  .objective-flow li::before {
    content:counter(steps);
    position:absolute;
    left:12px;
    color:#b78943;
  }

  .objective-flow li.complete {
    color:#d8c9ab;
  }

  .objective-flow li.complete::before {
    content:'✓';
    color:#70c79a;
  }

  .evidence-card {
    display:grid;
    gap:5px;
    margin-top:16px;
    padding:14px;
    border-left:3px solid #c4832e;
    background:#18150f;
  }

  .evidence-card small {
    color:#a87e3e;
    letter-spacing:.15em;
  }

  .evidence-card b {
    color:#e3c991;
    font-family:var(--display);
  }

  .npc-flow {
    display:grid;
    grid-template-columns:180px 1fr;
    gap:20px;
  }

  .npc-portrait {
    min-height:260px;
    display:grid;
    place-items:center;
    border:1px solid #6c522f;
    background:radial-gradient(circle,#3d5657,#101717 65%);
    color:#bce0dd;
    font:3rem var(--display);
    box-shadow:inset 0 0 35px #000;
  }

  .dialogue-copy > p {
    margin-top:0;
    color:#e0d0b5;
    font:1.15rem/1.55 var(--display);
  }

  .relationship {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:8px;
    color:#9f9078;
    font-size:.62rem;
  }

  .relationship i {
    height:6px;
    border-radius:5px;
    background:#292821;
  }

  .relationship i b {
    display:block;
    height:100%;
    background:#b8873c;
  }

  .dialogue-choices {
    display:grid;
    gap:6px;
    margin-top:18px;
  }

  .dialogue-choices button {
    padding:10px 12px;
    border:1px solid #51381c;
    background:#11120f;
    color:#d5c4a5;
    text-align:left;
    cursor:pointer;
  }

  .dialogue-choices button:hover {
    border-color:#bc7724;
  }

  .dialogue-choices small {
    display:block;
    margin-top:2px;
    color:#9c7c46;
  }

  .flow-tabs,.journal-tabs {
    display:flex;
    gap:4px;
    border-bottom:1px solid #58401f;
  }

  .flow-tabs button,.journal-tabs button {
    padding:8px 14px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:#9c8f7a;
    cursor:pointer;
  }

  .flow-tabs button.active,.journal-tabs button.active {
    border-color:#d18a2a;
    color:#efd091;
  }

  .trade-list {
    display:grid;
    gap:6px;
    margin-top:12px;
  }

  .trade-list > button {
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:1px solid #44321b;
    background:#10110e;
    color:#d0bea0;
    text-align:left;
    cursor:pointer;
  }

  .trade-list > button.selected,.trade-list > button:hover {
    border-color:#c17b24;
    background:#1d1810;
  }

  .trade-list > button > span:first-child {
    font-size:1.5rem;
    color:#e0a646;
    text-align:center;
  }

  .trade-list b,.trade-list small {
    display:block;
  }

  .trade-list small {
    color:#817661;
  }

  .trade-list strong {
    color:#dfbd78;
  }

  .trade-detail {
    margin-top:12px;
    padding:10px;
    border:1px solid #49341b;
    background:#15130f;
    color:#a99d88;
  }

  .loot-flow > p,.dungeon-flow > p {
    margin-top:0;
    color:#b9ab94;
    font-family:var(--display);
  }

  .loot-flow > label {
    display:grid;
    grid-template-columns:auto 40px 1fr auto;
    align-items:center;
    gap:10px;
    padding:10px;
    border-bottom:1px solid #3c2c18;
    cursor:pointer;
  }

  .loot-flow > label > span:nth-of-type(1) {
    color:#e2ad52;
    font-size:1.3rem;
  }

  .loot-flow b,.loot-flow small {
    display:block;
  }

  .loot-flow small {
    color:#877b69;
  }

  .capacity-meter {
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px;
    margin-top:14px;
    color:#9e9079;
    font-size:.65rem;
  }

  .capacity-meter i {
    grid-column:1/-1;
    height:7px;
    background:#282822;
  }

  .capacity-meter em {
    display:block;
    height:100%;
    background:#bd8537;
  }

  .depth-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  .depth-grid button {
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:14px;
    border:1px solid #4e381b;
    background:#11120f;
    color:#c9b99b;
    text-align:left;
    cursor:pointer;
  }

  .depth-grid button.selected {
    border-color:#dd922d;
    background:radial-gradient(circle at 50% 0,#3d2c17,#12120f 70%);
  }

  .depth-grid button.locked {
    opacity:.45;
    cursor:not-allowed;
  }

  .depth-grid span {
    color:#ad7d3b;
    font-size:.56rem;
    letter-spacing:.15em;
  }

  .depth-grid b {
    margin:8px 0;
    color:#e7c989;
    font:1.1rem var(--display);
  }

  .depth-grid small {
    color:#aaa08d;
  }

  .depth-grid em {
    margin-top:auto;
    color:#8e806a;
    font-size:.6rem;
  }

  .depth-summary {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:14px;
    border:1px solid #45321b;
  }

  .depth-summary span {
    padding:9px;
    color:#8e826f;
    font-size:.58rem;
    text-align:center;
  }

  .depth-summary b {
    display:block;
    color:#e3c181;
    font-size:.8rem;
  }

  .prepare-flow {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:10px 18px;
  }

  .prepare-flow section:first-child {
    grid-row:span 2;
  }

  .prepare-flow h3 {
    display:flex;
    justify-content:space-between;
  }

  .prepare-flow h3 small {
    color:#8c806d;
    font:.58rem var(--ui);
  }

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

  .supply-grid label {
    display:grid;
    grid-template-columns:auto 35px 1fr auto;
    align-items:center;
    gap:4px;
    padding:8px;
    border:1px solid #44321a;
    background:#10110e;
    cursor:pointer;
  }

  .supply-grid label.selected {
    border-color:#9b6929;
  }

  .supply-grid label > span {
    color:#e0a446;
    font-size:1.2rem;
  }

  .supply-grid small {
    color:#8e826f;
  }

  .boon-card {
    display:grid;
    grid-template-columns:auto 34px 1fr;
    align-items:center;
    gap:8px;
    margin:5px 0;
    padding:9px;
    border:1px solid #49351c;
    background:#11120f;
    cursor:pointer;
  }

  .boon-card > span:first-of-type {
    color:#e1a748;
    font-size:1.2rem;
  }

  .boon-card b,.boon-card small {
    display:block;
  }

  .boon-card small {
    color:#8d806d;
  }

  .boon-card.fixed {
    grid-template-columns:34px 1fr;
    cursor:default;
  }

  .sanctuary-flow,.outcome-flow,.confirm-flow,.map-room-detail {
    max-width:600px;
    margin:auto;
    text-align:center;
  }

  .sanctuary-mark,.outcome-mark,.warning-mark,.map-room-mark {
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    margin:0 auto 14px;
    border:1px solid #ad792f;
    border-radius:50%;
    color:#edbd5b;
    font:2.2rem var(--display);
    box-shadow:0 0 25px #bd782833;
  }

  .sanctuary-flow p,.outcome-flow p,.confirm-flow p,.map-room-detail p {
    color:#d6c7ac;
    font:1.05rem/1.55 var(--display);
  }

  .before-after,.reward-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin-top:18px;
  }

  .before-after {
    grid-template-columns:1fr 1fr;
  }

  .before-after span,.reward-grid span {
    padding:10px;
    border:1px solid #46331b;
    background:#10110e;
  }

  .before-after b,.reward-grid b,.reward-grid small {
    display:block;
  }

  .reward-grid small {
    color:#8f8068;
    font-size:.55rem;
  }

  .reward-grid b {
    margin-top:3px;
    color:#e3c27f;
  }

  .loot-preview {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:10px;
  }

  .loot-preview span {
    padding:7px 10px;
    border:1px solid #4b371c;
    color:#bbaa8d;
  }

  .defeat .outcome-mark,.warning-mark {
    border-color:#9c4437;
    color:#e07263;
  }

  .map-room-detail dl {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .map-room-detail dl div {
    padding:8px;
    border:1px solid #43321c;
  }

  .map-room-detail dt {
    color:#897c68;
    font-size:.58rem;
  }

  .map-room-detail dd {
    margin:3px 0;
    color:#dbc18d;
  }

  .inventory-summary {
    display:flex;
    gap:8px;
    margin:10px 0;
  }

  .inventory-summary span {
    flex:1;
    padding:8px;
    border:1px solid #41301a;
    background:#0d0e0c;
    color:#8f826f;
    text-align:center;
    font-size:.58rem;
  }

  .inventory-summary b {
    display:block;
    color:#e0be7c;
    font-size:.82rem;
  }

  .management-layout,.equipment-layout {
    display:grid;
    grid-template-columns:minmax(250px,1fr) minmax(220px,.8fr);
    gap:12px;
  }

  .management-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
  }

  .management-item {
    display:grid;
    grid-template-columns:35px 1fr auto;
    align-items:center;
    gap:7px;
    min-height:52px;
    padding:6px;
    border:1px solid #3f2f1a;
    background:#0e0f0d;
    color:#cbb99a;
    text-align:left;
    cursor:pointer;
  }

  .management-item.selected,.management-item:hover {
    border-color:#b87828;
    background:#1b1710;
  }

  .management-item > span:first-child {
    color:#e1a84b;
    font-size:1.25rem;
    text-align:center;
  }

  .management-item b,.management-item small {
    display:block;
  }

  .management-item small {
    color:#7f7463;
  }

  .management-item em {
    color:#b59862;
    font-size:.65rem;
  }

  .item-detail,.equipment-compare {
    padding:16px;
    border:1px solid #49351d;
    background:#10110e;
  }

  .detail-icon {
    color:#e4ad4d;
    font-size:2.5rem;
  }

  .item-detail > small,.equipment-compare > small {
    color:#9c7540;
    letter-spacing:.13em;
  }

  .item-detail h3,.equipment-compare h3 {
    margin:3px 0 8px;
    color:#ebce94;
    font:1.3rem var(--display);
  }

  .item-detail p,.equipment-compare p {
    color:#9f927c;
    font:.78rem/1.5 var(--display);
  }

  .detail-actions {
    display:flex;
    gap:6px;
    margin-top:16px;
  }

  .equipment-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .equipment-slot {
    min-height:90px;
    grid-template-columns:1fr;
    place-items:center;
    color:#d0bb95;
    cursor:pointer;
  }

  .equipment-slot:hover {
    border-color:#ba7727;
  }

  .equipment-slot small {
    color:#8f6e3d;
  }

  .equipment-slot span {
    margin:4px;
    color:#e0a84b;
    font-size:1.5rem;
  }

  .equipment-slot em {
    color:#817562;
    font-size:.58rem;
  }

  .equipment-slot.empty {
    opacity:.6;
  }

  .equipment-compare dl {
    display:grid;
    gap:4px;
  }

  .equipment-compare dl div {
    display:flex;
    justify-content:space-between;
    padding:5px;
    border-bottom:1px solid #342817;
  }

  .equipment-compare dt {
    color:#8c806c;
  }

  .equipment-compare dd {
    color:#d6bc87;
  }

  .compare-card {
    display:grid;
    gap:3px;
    margin:12px 0;
    padding:8px;
    border-left:3px solid #78aa78;
    background:#14150f;
  }

  .compare-card b {
    color:#86b887;
    font-size:.6rem;
  }

  .ability-header {
    display:flex;
    gap:8px;
    align-items:center;
    padding:10px 0;
  }

  .ability-header > div {
    padding:7px 12px;
    border:1px solid #43321b;
    background:#10110e;
  }

  .ability-header b,.ability-header small {
    display:block;
  }

  .ability-header b {
    color:#e2c17d;
  }

  .ability-header small {
    color:#817561;
  }

  .ability-header > button {
    margin-left:auto;
    padding:7px;
    border:1px solid #4f381c;
    background:#10110e;
    color:#baa986;
    cursor:pointer;
  }

  .ability-list {
    display:grid;
    gap:6px;
  }

  .ability-row {
    display:grid;
    grid-template-columns:45px 1fr auto;
    align-items:center;
    gap:10px;
    padding:9px;
    border:1px solid #44321b;
    background:#10110e;
  }

  .ability-row > span {
    color:#e1a84b;
    font-size:1.5rem;
    text-align:center;
  }

  .ability-row h3,.ability-row p {
    margin:0;
  }

  .ability-row h3 {
    color:#dec28b;
    font:1rem var(--display);
  }

  .ability-row p,.ability-row small {
    color:#897d69;
    font-size:.64rem;
  }

  .ability-row button {
    min-width:82px;
    padding:8px;
    border:1px solid #76501f;
    background:#1b1710;
    color:#ddbc79;
    cursor:pointer;
  }

  .ability-row.locked {
    opacity:.62;
  }

  .technique-intro {
    margin:0 0 9px;
    padding:9px 11px;
    border-left:2px solid #9a6425;
    background:#11110e;
    color:#968a76;
    font:.7rem/1.45 var(--display);
  }

  .technique-intro b {
    color:#d8b66f;
  }

  .technique-title {
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:2px;
  }

  .technique-type {
    padding:2px 5px;
    border:1px solid currentColor;
    color:#a8946e;
    font:.48rem var(--body);
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:.1em;
  }

  .technique-type.is-near {
    color:#d8a146;
  }

  .technique-type.is-far {
    color:#739cda;
  }

  .technique-type.is-formation {
    color:#b68ad8;
  }

  .technique-type.is-defense {
    color:#75bfa1;
  }

  .technique-row p {
    line-height:1.4;
  }

  .technique-empty {
    padding:24px;
    border:1px dashed #49371f;
    color:#897b66;
    text-align:center;
  }

  .technique-summary {
    position:sticky;
    top:-15px;
    z-index:4;
    margin:-4px 0 8px;
    padding:8px 0;
    background:#11120ff2;
    backdrop-filter:blur(5px);
  }

  .technique-loadout {
    padding:9px;
    border:1px solid #5b3e1d;
    background:linear-gradient(90deg,#0c0d0b,#15130e,#0c0d0b);
  }

  .technique-loadout header {
    display:flex;
    justify-content:space-between;
    padding:0 2px 7px;
    border:0;
    color:#b98c4e;
    font:.57rem var(--body);
    letter-spacing:.14em;
  }

  .technique-loadout header small {
    letter-spacing:.05em;
    color:#7e725f;
  }

  .technique-loadout > div {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px;
  }

  .technique-loadout button,.empty-slot {
    position:relative;
    display:grid;
    place-items:center;
    align-content:center;
    min-width:0;
    min-height:68px;
    padding:5px;
    border:1px solid #5b3b19;
    background:#11120f;
    color:#d3bb8b;
    text-align:center;
  }

  .technique-loadout button {
    cursor:pointer;
  }

  .technique-loadout button:hover {
    border-color:#d18a28;
    background:#1c1710;
  }

  .technique-loadout button > span {
    color:#e8b34f;
    font-size:1.15rem;
  }

  .technique-loadout button b {
    width:100%;
    overflow:hidden;
    color:#ddc693;
    font:.58rem var(--display);
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .technique-loadout button small {
    font-size:.46rem;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .technique-loadout button em {
    position:absolute;
    top:2px;
    right:5px;
    color:#806647;
    font-style:normal;
  }

  .empty-slot {
    border-style:dashed;
    color:#625643;
  }

  .empty-slot i {
    font:1.1rem var(--body);
    font-style:normal;
  }

  .empty-slot small {
    color:#625643;
  }

  .technique-loadout button > span {
    display:block;
    width:30px;
    height:30px;
    border:1px solid #62421e;
    overflow:hidden;
  }

  .technique-loadout button > span img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .technique-branches {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    margin:8px 0;
  }

  .technique-branches button {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:6px;
    min-width:0;
    padding:7px;
    border:1px solid #44321b;
    background:#0e0f0d;
    color:#8e806a;
    text-align:left;
    cursor:pointer;
  }

  .technique-branches button > span {
    grid-row:1/3;
    color:#b47d31;
    font-size:1.2rem;
  }

  .technique-branches b,.technique-branches small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .technique-branches b {
    color:#cdb88c;
    font:.72rem var(--display);
  }

  .technique-branches small {
    font-size:.47rem;
    letter-spacing:0;
  }

  .technique-branches button:hover,.technique-branches button.active {
    border-color:#bc7923;
    background:#1b170f;
  }

  .technique-branches button.active b {
    color:#f1d392;
  }

  .branch-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:15px;
    padding:8px 3px 10px;
  }

  .branch-heading small {
    text-transform:uppercase;
  }

  .branch-heading h3 {
    margin:1px 0 0;
    color:#efd093;
    font:1.2rem var(--display);
  }

  .branch-heading p {
    max-width:55%;
    margin:0;
    color:#897d69;
    font:.62rem/1.4 var(--display);
    text-align:right;
  }

  .technique-path {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .technique-tier {
    position:relative;
    display:grid;
    align-content:start;
    gap:6px;
  }

  .technique-tier > header {
    display:flex;
    align-items:center;
    gap:6px;
    padding:3px 0;
    border:0;
    color:#9f7640;
    font:.53rem var(--body);
    letter-spacing:.14em;
  }

  .technique-tier > header i {
    flex:1;
    height:1px;
    background:#4f361b;
  }

  .technique-card {
    display:grid;
    gap:6px;
    min-height:176px;
    padding:9px;
    border:1px solid #423019;
    background:linear-gradient(145deg,#13140f,#0c0d0b);
    box-shadow:inset 0 0 18px #0003;
  }

  .technique-card.equipped {
    border-color:#cb8527;
    box-shadow:inset 0 0 18px #b66d1718,0 0 8px #b66d1722;
  }

  .technique-card.locked {
    background:#0b0c0a;
  }

  .technique-card.locked .technique-card-top,.technique-card.locked > p,.technique-card.locked > strong {
    opacity:.62;
  }

  .technique-card-top {
    display:grid;
    grid-template-columns:30px 1fr auto;
    align-items:center;
    gap:6px;
  }

  .technique-card-top > span {
    color:#e1a445;
    font-size:1.25rem;
    text-align:center;
  }

  .technique-card-top h4,.technique-card-top small {
    margin:0;
  }

  .technique-card-top h4 {
    color:#ddc28c;
    font:.84rem var(--display);
  }

  .technique-card-top small {
    color:#a77738;
    font-size:.48rem;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .technique-card-top em {
    color:#75a8dc;
    font:.52rem var(--body);
    font-style:normal;
    white-space:nowrap;
  }

  .technique-card > p {
    margin:0;
    color:#b3a38b;
    font:.62rem/1.35 var(--display);
  }

  .technique-card > strong {
    color:#827764;
    font:.56rem/1.4 var(--body);
    font-weight:400;
  }

  .technique-card footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    margin-top:auto;
    padding-top:6px;
    border-top:1px solid #342719;
  }

  .technique-card footer small {
    color:#786b59;
    font-size:.48rem;
    letter-spacing:0;
  }

  .technique-card footer button {
    max-width:105px;
    padding:6px 7px;
    border:1px solid #6e481d;
    background:#19150f;
    color:#d7b570;
    font:.55rem var(--body);
    cursor:pointer;
  }

  .technique-card footer button:disabled {
    border-color:#332b20;
    color:#5f574b;
    cursor:not-allowed;
  }

  .technique-card.equipped footer button {
    background:#9b651f;
    color:#130e08;
    font-weight:700;
  }

  .technique-card-top > span {
    display:block;
    width:30px;
    height:30px;
    overflow:hidden;
    border:1px solid #5d3e1c;
  }

  .technique-card-top > span img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .branch-hunt .technique-card.equipped {
    border-color:#668fc7;
  }

  .branch-hunt .technique-card-top > span {
    color:#78a8df;
  }

  .branch-footwork .technique-card.equipped {
    border-color:#9670ba;
  }

  .branch-footwork .technique-card-top > span {
    color:#b58adc;
  }

  .branch-resolve .technique-card.equipped {
    border-color:#62a887;
  }

  .branch-resolve .technique-card-top > span {
    color:#76b99a;
  }

  .effects-guide {
    display:grid;
    gap:8px;
  }

  .effect-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .effect-card {
    display:grid;
    grid-template-columns:30px 1fr;
    gap:7px;
    padding:10px;
    border:1px solid #44321c;
    background:#10110e;
  }

  .effect-card > span {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border:1px solid currentColor;
    border-radius:50%;
  }

  .effect-card.harmful > span {
    color:#c36d55;
  }

  .effect-card.helpful > span {
    color:#65ab89;
  }

  .effect-card h4 {
    margin:0 0 2px;
    color:#d9bf8b;
    font:.82rem var(--display);
  }

  .effect-card p {
    margin:0;
    color:#877b68;
    font:.58rem/1.4 var(--body);
  }

  .balance-rules {
    padding:12px;
    border:1px solid #5a3e1f;
    background:#17140e;
  }

  .balance-rules h4 {
    margin:0 0 6px;
    color:#ddb96f;
    font:1rem var(--display);
  }

  .balance-rules ul {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px 18px;
    margin:0;
    padding-left:17px;
    color:#92846e;
    font:.61rem/1.4 var(--body);
  }

  .asset-library {
    display:grid;
    gap:14px;
  }

  .asset-preview {
    position:sticky;
    top:-20px;
    z-index:3;
    padding:0 0 10px;
    background:#0d0d0bf2;
    backdrop-filter:blur(6px);
  }

  .asset-stage {
    position:relative;
    aspect-ratio:16/7;
    overflow:hidden;
    border:1px solid #a16a25;
    background:#070706;
    box-shadow:inset 0 0 30px #000;
  }

  .asset-stage > img {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .asset-stage::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(transparent 55%,#0008),radial-gradient(circle at 50% 45%,transparent 45%,#0008 100%);
  }

  .asset-stage > span {
    position:absolute;
    z-index:3;
    left:12px;
    bottom:9px;
    padding:4px 8px;
    border:1px solid #a16a25;
    background:#090a08dd;
    color:#efd393;
    font:.72rem var(--display);
  }

  .asset-stage-mobs {
    position:absolute;
    z-index:2;
    inset:0;
  }

  .asset-stage-mob {
    position:absolute;
    bottom:4%;
    width:24%;
    height:72%;
    transform-origin:50% 100%;
  }

  .asset-stage-mob img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 10px 7px #000c);
  }

  .asset-preview > p {
    margin:7px 2px 0;
    color:#887b68;
    font:.6rem/1.4 var(--body);
  }

  .asset-transform-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    margin-top:6px;
  }

  .asset-transform-row {
    display:grid;
    grid-template-columns:minmax(72px,1fr) repeat(3,32px) 48px;
    align-items:center;
    gap:3px;
    padding:4px;
    border:1px solid #49341b;
    background:#10110e;
  }

  .asset-transform-row b {
    overflow:hidden;
    color:#cdb789;
    font:.55rem var(--display);
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .asset-transform-row button {
    height:28px;
    padding:0;
    border:1px solid #6a471f;
    background:#1b1710;
    color:#e2b75d;
    cursor:pointer;
  }

  .asset-transform-row button:hover {
    border-color:#dc942f;
    background:#2a2114;
  }

  .asset-transform-row output {
    color:#9c8d73;
    font:.52rem var(--ui);
    text-align:center;
  }

  .engine-status {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 10px;
    border:1px solid #4b351b;
    background:#10110e;
  }

  .engine-status span b,.engine-status span small {
    display:block;
  }

  .engine-status span b {
    color:#dbc18d;
    font:.72rem var(--display);
  }

  .engine-status span small {
    margin-top:2px;
    color:#817562;
    font:.52rem var(--ui);
  }

  .engine-status strong {
    color:#64c99f;
    font:.55rem var(--ui);
    letter-spacing:.08em;
  }

  .asset-picker > header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:6px;
    padding-bottom:5px;
    border-bottom:1px solid #4d351b;
  }

  .asset-picker h3 {
    margin:0;
    color:#e2c17e;
    font:1.05rem var(--display);
  }

  .asset-picker header small {
    color:#8f7e65;
    letter-spacing:.04em;
  }

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

  .asset-grid button {
    position:relative;
    display:grid;
    grid-template-rows:76px auto;
    min-width:0;
    padding:4px;
    border:1px solid #3f2f1b;
    background:#0d0e0c;
    color:#a89778;
    cursor:pointer;
  }

  .asset-grid button:hover,.asset-grid button.selected {
    border-color:#c57f27;
    background:#1a160f;
    color:#f0cd86;
  }

  .asset-grid button.selected::after {
    content:"✓";
    position:absolute;
    top:5px;
    right:5px;
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border:1px solid #d99534;
    background:#0b0b09dd;
    color:#f4c96f;
  }

  .asset-grid img {
    width:100%;
    height:76px;
    object-fit:cover;
    background:#080806;
  }

  .asset-grid span {
    overflow:hidden;
    padding:5px 2px 2px;
    font:.58rem var(--display);
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mob-assets {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .mob-assets button {
    grid-template-rows:92px auto;
  }

  .mob-assets img {
    height:92px;
    object-fit:contain;
  }

  .journal-section,.hypothesis-list,.people-grid {
    padding-top:12px;
  }

  .journal-section h3 {
    color:#d8bb82;
    font:1rem var(--display);
  }

  .journal-section ul {
    list-style:none;
    padding:0;
  }

  .journal-section li {
    display:grid;
    gap:3px;
    padding:9px;
    border-bottom:1px solid #3c2c18;
  }

  .journal-section li b {
    color:#ddc08a;
  }

  .journal-section li span {
    color:#958873;
  }

  .journal-section blockquote {
    margin:8px 0;
    padding:12px;
    border-left:3px solid #a36d28;
    background:#12120f;
    color:#d0c0a4;
    font-family:var(--display);
  }

  .journal-section cite {
    display:block;
    margin-top:5px;
    color:#8e806a;
  }

  .hypothesis-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hypothesis-list article {
    padding:12px;
    border:1px solid #45331b;
    background:#10110e;
  }

  .hypothesis-list h3 {
    color:#dec28b;
    font:1rem var(--display);
  }

  .hypothesis-list p {
    color:#958873;
    font-size:.7rem;
  }

  .hypothesis-list .state {
    padding:3px 6px;
    border:1px solid #79602e;
    color:#cfac65;
    font-size:.52rem;
    text-transform:uppercase;
  }

  .hypothesis-list i {
    display:block;
    height:6px;
    background:#282821;
  }

  .hypothesis-list i b {
    display:block;
    height:100%;
    background:#b8833a;
  }

  .hypothesis-list small {
    color:#817562;
  }

  .people-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }

  .people-grid button {
    min-height:120px;
    display:grid;
    place-items:center;
    align-content:center;
    border:1px solid #45331b;
    background:#10110e;
    color:#d2bb8e;
    cursor:pointer;
  }

  .people-grid span {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    margin-bottom:5px;
    border:1px solid #775124;
    border-radius:50%;
    color:#dfb766;
  }

  .people-grid b,.people-grid small {
    display:block;
  }

  .people-grid small {
    color:#817562;
  }

  .people-grid .unknown {
    opacity:.55;
  }

  .storage-flow {
    display:grid;
    grid-template-columns:1fr 90px 1fr;
    gap:12px;
    align-items:start;
  }

  .storage-flow section {
    border:1px solid #47331b;
    background:#0d0e0c;
  }

  .storage-flow section header {
    display:flex;
    justify-content:space-between;
    padding:10px;
    border-bottom:1px solid #47331b;
  }

  .storage-flow h3 {
    margin:0;
    color:#dfc38b;
    font:1rem var(--display);
  }

  .storage-flow header small {
    color:#877a66;
  }

  .storage-flow section > button {
    width:100%;
    display:grid;
    grid-template-columns:35px 1fr auto;
    align-items:center;
    gap:7px;
    padding:9px;
    border:0;
    border-bottom:1px solid #302516;
    background:transparent;
    color:#cdbb9b;
    text-align:left;
    cursor:pointer;
  }

  .storage-flow section > button:hover {
    background:#1b1710;
  }

  .storage-flow section > button > span:first-child {
    color:#e0a74a;
    font-size:1.2rem;
    text-align:center;
  }

  .storage-flow section b,.storage-flow section small {
    display:block;
  }

  .storage-flow section small {
    color:#817562;
  }

  .storage-flow em {
    color:#c68b3a;
    font-size:.62rem;
  }

  .storage-divider {
    display:grid;
    place-items:center;
    align-content:center;
    min-height:210px;
    color:#8d7f69;
    text-align:center;
  }

  .storage-divider span {
    color:#e0a74a;
    font-size:1.7rem;
  }

  .storage-divider small {
    margin-top:7px;
    font-size:.55rem;
  }

  .mob-label small em {
    display:inline-block;
    margin-left:4px;
    padding:1px 4px;
    border:1px solid #735027;
    color:#e0b35d;
    font:normal 600 .48rem var(--ui);
    letter-spacing:.08em;
  }

  .mob[data-range="far"] .mob-label small em {
    border-color:#426773;
    color:#8fc9d8;
  }

  .mob[data-range="far"].is-selected {
    filter:drop-shadow(0 0 8px #56bcd8) drop-shadow(0 10px 8px #000);
  }

  .mob[data-range="far"].is-selected::after {
    border-color:#64c5df;
    box-shadow:0 0 8px #52b5d1,inset 0 0 10px #52b5d1;
  }

  .mob[data-range="far"].is-selected .mob-label {
    border-color:#68bfd4;
    box-shadow:0 0 13px #3fa7c188,inset 0 0 0 2px #000;
  }

  .range-rule {
    color:#89775a;
    font:600 .46rem var(--ui);
    letter-spacing:.08em;
  }

  .action-item[data-range="far"] .range-rule {
    color:#79adbb;
  }

  .action-item[data-range="near"] .range-rule {
    color:#c99a50;
  }

  .action-item.range-blocked {
    opacity:.34;
    filter:grayscale(.65);
    border-color:#3a3023;
  }

  .action-item.range-blocked::before {
    content:'';
    position:absolute;
    left:5px;
    top:5px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#bd594f;
    box-shadow:0 0 5px #bd594f;
  }

  .action-item.range-blocked:hover {
    border-color:#8d493e;
    background:#17110f;
  }

  .action-item.turn-locked {
    opacity:.32;
    pointer-events:none;
  }

  @media (max-width:760px) {
    .masthead-tools-left {
      display:none;
    }

    .masthead-tools-right {
      right:8px;
    }

    .modal-backdrop {
      padding:6px;
    }

    .flow-modal {
      max-height:97vh;
    }

    .flow-body {
      padding:13px;
    }

    .character-flow,.npc-flow,.prepare-flow,.management-layout,.equipment-layout {
      grid-template-columns:1fr;
    }

    .large-portrait {
      min-height:180px;
    }

    .large-portrait button {
      margin-top:30px;
    }

    .depth-grid {
      grid-template-columns:1fr;
    }

    .depth-grid button {
      min-height:100px;
    }

    .choice-row,.attribute-builder,.technique-grid,.hypothesis-list {
      grid-template-columns:1fr;
    }

    .management-list,.equipment-grid {
      grid-template-columns:1fr 1fr;
    }

    .people-grid {
      grid-template-columns:1fr 1fr;
    }

    .flow-footer {
      padding:9px;
    }

    .flow-button {
      min-width:0;
      flex:1;
    }

    .combat-state {
      display:none;
    }
  }

  @media (max-width:760px) {
    .storage-flow {
      grid-template-columns:1fr;
    }

    .storage-divider {
      min-height:55px;
    }
  }

  @media (max-width:760px) {
    .technique-summary {
      top:-15px;
    }

    .technique-loadout>div {
      grid-template-columns:repeat(3,1fr);
    }

    .technique-loadout button,.empty-slot {
      min-height:56px;
    }

    .technique-branches {
      grid-template-columns:repeat(2,1fr);
    }

    .technique-branches button:last-child {
      grid-column:1/-1;
    }

    .technique-path {
      grid-template-columns:1fr;
    }

    .technique-card {
      min-height:0;
    }

    .branch-heading {
      align-items:start;
    }

    .branch-heading p {
      max-width:58%;
    }

    .effect-grid,.balance-rules ul {
      grid-template-columns:1fr;
    }
  }

  @media (max-width:760px) {
    .asset-stage {
      aspect-ratio:16/9;
    }

    .asset-grid {
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mob-assets {
      grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .asset-grid button {
      grid-template-rows:66px auto;
    }

    .asset-grid img {
      height:66px;
    }

    .mob-assets button {
      grid-template-rows:78px auto;
    }

    .mob-assets img {
      height:78px;
    }
  }

  .scene .mob-label small em {
    display: none;
  }

  .scene.pixi-ready .mob {
    width: 0;
    height: 0;
    aspect-ratio: auto;
    transform: none;
  }

  .scene.pixi-ready .mob-label {
    bottom: auto;
    top: var(--label-top);
    transform: translate(-50%, -100%);
  }

  .action-item .range-rule {
    display: none;
  }

  .game-art-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .portrait {
    min-width:0;
    min-height:0;
    align-self:stretch;
  }

  .character-card {
    grid-template-rows:auto;
  }

  .character-details {
    min-width:0;
  }

  .portrait > span {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }

  .portrait > span img {
    object-fit:contain;
    object-position:center;
  }

  .portrait::before, .portrait::after {
    display:none;
  }

  .character-nav button > span {
    display:block;
    margin:auto;
  }

  .character-nav .game-art-icon {
    filter:none;
  }

  .room-entity .game-art-icon,
.management-item .game-art-icon,
.action-icon .game-art-icon {
    filter:none;
  }

  .character-nav button > span {
    width:52px;
    height:52px;
    overflow:hidden;
  }

  .character-nav [data-panel="backpack"] img {
    transform:scale(1.40);
    transform-origin:52% 58%;
    filter:brightness(1.85) contrast(1.05);
  }

  .character-nav [data-panel="journal"] img {
    transform:scale(1.45);
    transform-origin:48% 43%;
    filter:brightness(1.65) contrast(1.05);
  }

  .character-nav [data-panel="weapons"] img {
    transform:scale(1.18);
    filter:brightness(1.35);
  }

  .character-nav [data-panel="abilities"] img {
    transform:scale(1.12);
    filter:brightness(1.20);
  }

  .game-art-icon[src$="iron-key.webp"],
.game-art-icon[src$="torn-cloth.webp"],
.game-art-icon[src$="rope.webp"],
.game-art-icon[src$="bane-ring.webp"] {
    filter:brightness(1.45);
  }

  .action-icon img[src$="press-the-opening.png"],
.action-icon img[src$="covering-retreat.png"],
.technique-card img[src$="press-the-opening.png"],
.technique-card img[src$="covering-retreat.png"] {
    filter:brightness(1.35) contrast(1.06);
  }

  .action-icon.potion[data-game-art] {
    transform:none;
  }

  .portrait > span {
    margin-top:0;
  }

  .action-icon[data-game-art] {
    background:none;
    border:0;
    box-shadow:none;
  }

  .action-icon[data-game-art]::before,.action-icon[data-game-art]::after {
    display:none;
  }

  .large-portrait > span {
    width:100%;
  }

  .large-portrait button {
    margin-top:10px;
  }

  .management-item > span:first-child, .storage-flow button > span:first-child {
    width:44px;
    height:44px;
  }

  .equipment-slot > span {
    display:block;
  }

  .detail-icon > img {
    width:96px;
    height:96px;
    margin:auto;
  }

  .large-portrait > span {
    display:block;
    height:280px;
  }

  .npc-portrait img {
    object-fit:cover;
  }

  .action-item kbd {
    display:none;
  }

  .room-entity {
    grid-template-columns:48px minmax(0,1fr);
  }

  .room-entity strong {
    font-size:.85rem;
  }

  .room-entity:focus-visible {
    outline:2px solid #e4ac50;
    outline-offset:2px;
  }

  @media(max-width:760px) {
    .masthead {
      grid-template-columns:minmax(0,1fr);
      gap:6px;
      padding:12px;
    }

    .masthead h1 {
      grid-column:1;
      grid-row:1;
    }

    .masthead-tools-right {
      grid-column:1;
      grid-row:2;
      justify-self:center;
      right:auto;
      flex-wrap:wrap;
      justify-content:center;
    }
  }

  .action-item > span:not(.action-icon) {
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .map-nav-arrow {
    width:32px;
    height:32px;
    padding:0;
    text-shadow:none;
    display:grid;
    place-items:center;
  }

  .map-nav-arrow::before {
    content:'';
    display:block;
    width:10px;
    height:10px;
    border-top:3px solid currentColor;
    border-right:3px solid currentColor;
    transform:rotate(calc(var(--direction,0deg) + 45deg));
    filter:drop-shadow(0 1px 2px #000);
  }

  .single-loot {
    text-align:center;
  }

  .single-loot-image {
    width:120px;
    height:120px;
    margin:0 auto 16px;
  }

  .flow-button:focus-visible {
    outline:2px solid #ffdb87;
    outline-offset:3px;
  }

  .shop-row {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto 40px;
    gap:12px;
    align-items:center;
    padding:10px;
    border:1px solid #44321b;
    background:#10110e;
    color:#d0bea0;
  }

  .shop-row > span:first-child {
    width:44px;
    height:44px;
  }

  .trade-icon {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;}

  .buy-icon {
    width:36px;
    height:36px;
    padding:7px;
    border:1px solid #a16b27;
    background:#332410;
    color:#f2c777;
    cursor:pointer;
  }

  .buy-icon .trade-icon {
    width:100%;
    height:100%;
  }

  .buy-icon:hover {
    background:#5a3a17;
    border-color:#f2c777;
  }

  .buy-icon:disabled {
    opacity:.35;
    cursor:not-allowed;
  }

  .buy-icon:focus-visible {
    outline:2px solid #ffdb87;
    outline-offset:2px;
  }

  @media(max-width:500px) {
    .shop-row {
      gap:7px;
      grid-template-columns:36px minmax(0,1fr) auto 36px;
    }

    .shop-row strong {
      font-size:.7rem;
    }
  }

  .game-menu {
    position:fixed;
    z-index:120;
    width:200px;
    padding:6px;
    border:1px solid #a87530;
    background:#11110e;
    box-shadow:0 8px 24px #000a;
  }

  .masthead-tools-right > [data-ui="menu"] {
    width:auto;
    padding:8px 12px;
    font-size:.8rem;
  }

  .masthead-tools-right > #pauseGame {
    width:auto;
    min-width:70px;
    padding:8px 12px;
    font-size:.8rem;
  }

  .game-menu[hidden] {
    display:none;
  }

  .game-menu button {
    display:block;
    width:100%;
    padding:11px 14px;
    border:0;
    background:transparent;
    color:#ead4a2;
    text-align:left;
    cursor:pointer;
  }

  .game-menu button:hover,.game-menu button:focus-visible {
    background:#382913;
    outline:1px solid #a87530;
  }

  .game-menu button:disabled {
    opacity:.4;
    cursor:not-allowed;
  }

  .game-menu hr {
    border:0;
    border-top:1px solid #60431d;
  }

  .npc-default-action[aria-haspopup="menu"] {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
  }

  .npc-action-chevron {
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
  }

  .npc-action-menu {
    max-height:calc(100vh - 16px);
    overflow:auto;
  }

  .save-slots {
    display:grid;
    gap:12px;
  }

  .save-slots button {
    display:grid;
    gap:8px;
    text-align:left;
  }

  .save-slots small {
    line-height:1.6;
  }

  .nearby-title {
    margin:0 0 12px;
    padding:0 4px 10px;
    border-bottom:1px solid #704216;
    color:#e7ca8e;
    font:1.15rem var(--display);
    text-align:center;
  }

  .live-map-list {
    padding:24px;
    display:grid;
    gap:12px;
  }

  .exploration-actions .flow-button {
    display:block;
    width:100%;
    padding:10px;
    text-align:left;
  }

  .exploration-actions .flow-button span {
    white-space:normal;
  }

  .story-log p {
    white-space:pre-line;
  }

  .story-log .chronicle-narration {
    color:#24170d;
  }

  .story-log .chronicle-player {
    color:#183b57;
    font-style:italic;
    padding-left:10px;
    border-left:3px solid #183b57;
  }

  .story-log .chronicle-dialogue {
    color:#472552;
  }

  .story-log .chronicle-npc {
    color:#472552;
  }

  .chronicle-speed-setting {
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    color:#ead4a2;
  }

  .chronicle-speed-setting input {
    grid-column:1 / -1;
    width:100%;
    accent-color:#c69548;
  }

  .chronicle-speed-setting output {
    font-variant-numeric:tabular-nums;
  }

  .story-log .chronicle-combat {
    color:#781b21;
    font-weight:700;
  }

  .story-log .chronicle-reward {
    color:#244529;
    font-weight:700;
  }

  .story-log .chronicle-navigation {
    color:#17516a;
    font-weight:700;
  }

  .story-log .chronicle-system {
    color:#514535;
    font-size:.92em;
  }

  .nearby-npcs,.nearby-loot {
    display:grid;
    gap:6px;
  }

  .nearby-npcs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }

  .nearby-npcs .nearby-entry {
    min-width:0;
    grid-template-rows:minmax(0,1fr) auto;
  }

  .nearby-npcs .npc-card .npc-portrait {
    width:min(100%,100px);
    max-width:100%;
  }

  .npc-default-action {
    width:100%;
    margin-top:0;
    padding:7px 6px;
    border:1px solid #98703a;
    border-top:0;
    background:linear-gradient(#49351c,#271d12);
    color:#f6dda5;
    font:inherit;
    cursor:pointer;
  }

  .npc-actions {
    display:flex;
    min-width:0;
  }

  .npc-actions .npc-default-action {
    flex:1;
    min-width:0;
  }

  .npc-actions .npc-default-action + .npc-default-action {
    border-left:0;
  }

  .map-node.entrance > i {
    font-size:1.45rem;
  }

  .map-node.entrance small {
    display:block;
    color:inherit;
    font-size:.75rem;
    line-height:1.3;
  }

  .npc-default-action:hover:not(:disabled) {
    background:#594020;
    color:#fff3cd;
  }

  .npc-default-action:disabled {
    opacity:.45;
    cursor:not-allowed;
  }

  .nearby-loot {
    margin-top:auto;
  }

  .nearby-entry {
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }

  .nearby-entry.has-quick-take {
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px;
  }

  .nearby-entry .room-entity {
    width:100%;
    min-width:0;
  }

  .nearby-entry .npc-card {
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    padding:8px;
    min-height:0;
    align-content:start;
    text-align:center;
    background:linear-gradient(125deg,#282017,#11120f);
    border-color:#98703a;
  }

  .nearby-entry .npc-card > span:nth-child(2) {
    order:-1;
  }

  .nearby-entry .npc-card strong {
    white-space:normal;
    font-size:.95rem;
    line-height:1.2;
  }

  .nearby-entry .npc-portrait {
    display:grid;
    place-items:center;
    width:100px;
    height:80px;
    margin:0 auto;
    min-height:0;
    max-height:80px;
    overflow:hidden;
    border:1px solid #a17b46;
    background:radial-gradient(ellipse at top,#504633,#151711);
  }

  .nearby-entry .npc-portrait img {
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:contain;
    object-position:center;
  }

  .nearby-npcs .npc-card {
    grid-template-rows:auto 80px;
  }

  .nearby-entry .npc-silhouette {
    height:76px;
    max-height:100%;
  }

  .npc-detail-portrait {
    width:150px;
    height:200px;
    margin:0 auto 18px;
    border:1px solid #a17b46;
    background:#242018;
    display:grid;
    place-items:center;
    overflow:hidden;
  }

  .npc-detail-portrait img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }

  .masthead-tools-right > [data-ui="journal"] {
    padding:8px 12px;
    font-size:.8rem;
  }

  .npc-journal {
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:24px;
  }

  .journal-npc-list {
    display:grid;
    align-content:start;
    gap:6px;
  }

  .journal-npc-list button {
    padding:10px;
    text-align:left;
    border:1px solid #70502a;
    background:#17150f;
    color:#dac399;
    cursor:pointer;
  }

  .journal-npc-list button[aria-pressed="true"] {
    background:#3e2d17;
    border-color:#c49548;
  }

  .journal-npc-entry h2 {
    color:#ecd09a;
  }

  .journal-npc-entry section {
    border-top:1px solid #604321;
    padding-top:10px;
  }

  .journal-npc-entry h4 {
    margin-bottom:6px;
    color:#d8b977;
  }

  @media(max-width:600px) {
    .npc-journal {
      grid-template-columns:1fr;
    }

    .journal-npc-list {
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }

  .npc-silhouette {
    position:relative;
    width:62px;
    height:90px;
  }

  .npc-silhouette::before {
    content:'';
    position:absolute;
    width:30px;
    height:34px;
    border-radius:50%;
    top:8px;
    left:16px;
    background:#b6a078;
  }

  .npc-silhouette::after {
    content:'';
    position:absolute;
    width:58px;
    height:46px;
    border-radius:50% 50% 8px 8px;
    bottom:0;
    left:2px;
    background:linear-gradient(#9d8764,#655139);
  }

  .quick-take {
    align-self:stretch;
    padding:6px 10px;
    border:1px solid #a87530;
    background:#302414;
    color:#f0d396;
    font: .78rem var(--display);
    cursor:pointer;
  }

  .quick-take:hover {
    background:#4c3518;
    border-color:#e7b556;
  }

  .quick-take:focus-visible {
    outline:2px solid #f0d396;
    outline-offset:2px;
  }

  .quick-take:disabled {
    opacity:.4;
    cursor:not-allowed;
  }

  .nearby-npcs:empty,.nearby-loot:empty {
    display:none;
  }

  .flow-modal:has(.equipment-body-layout) {
    width:min(1120px,97vw);
    height:96vh;
    max-height:96vh;
  }

  .equipment-body-layout {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,220px));
    grid-template-areas:". helmet ." "rangedWeapon amulet ." "weapon chest offHand" "ring1 pants ring2" ". boots .";
    justify-content:center;
    align-items:start;
    gap:12px 40px;
    max-width:940px;
    margin:auto;
    padding:4px;
  }

  .equipment-slot {
    display:grid;
    justify-items:center;
    align-content:start;
    gap:5px;
    min-width:0;
    padding:8px;
    border:1px solid #8d6736;
    background:linear-gradient(140deg,#302719dd,#12140eee);
    text-align:center;
  }

  .equipment-body-layout .equipment-slot {
    min-height:0;
    gap:4px;
    padding:10px;
  }

  .equipment-slot img {
    width:96px;
    height:96px;
    object-fit:contain;
  }

  .equipment-slot > span {
    height:auto;
    margin:0;
    color:#e4bc73;
    font-size:.95rem;
  }

  .equipment-slot strong {
    font-size:.9rem;
    line-height:1.15;
    overflow-wrap:anywhere;
  }

  .equipment-body-layout .equipment-slot button {
    padding:5px 16px;
    font-size:.85rem;
  }

  .equipment-slot > button:not(.equipment-inspect) {
    color:#f5ddb1;
    border:1px solid #906732;
    background:#322515;
    padding:5px 9px;
    cursor:pointer;
  }

  .equipment-slot button:disabled {
    opacity:.45;
    cursor:not-allowed;
  }

  .equipment-slot.is-empty img {
    opacity:.8;
  }

  .slot-helmet {
    grid-area:helmet;
  }

  .slot-amulet {
    grid-area:amulet;
  }

  .slot-chest {
    grid-area:chest;
  }

  .slot-weapon {
    grid-area:weapon;
  }

  .slot-rangedWeapon {
    grid-area:rangedWeapon;
  }

  .slot-offHand {
    grid-area:offHand;
  }

  .slot-ring1 {
    grid-area:ring1;
  }

  .slot-ring2 {
    grid-area:ring2;
  }

  .slot-pants {
    grid-area:pants;
  }

  .slot-boots {
    grid-area:boots;
  }

  @media(max-width:760px) {
    .equipment-body-layout {
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }

    .equipment-body-layout .equipment-slot {
      padding:6px;
    }

    .equipment-slot img {
      width:72px;
      height:72px;
      max-width:100%;
    }
  }

  #startCharacter {
    display:grid;
    gap:18px;
  }

  #startCharacter label {
    display:grid;
    gap:7px;
  }

  #startCharacter input,#startCharacter select {
    padding:10px;
    background:#12120d;
    color:#ead4a2;
    border:1px solid #946425;
  }

  .mob.is-defeated .mob-label {
    display:none;
  }

  .scene {container-type:inline-size;}

  .combat-outcome {
    position:absolute;
    z-index:8;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#f8dfa7;
    text-shadow:0 3px 12px #000,0 0 35px #c7954370;
    font:clamp(2rem,7cqw,6rem) var(--display);
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    pointer-events:none;
    animation:combat-outcome-splash 1.2s ease-out both;
  }

  .combat-outcome.is-defeat {
    color:#f7b8aa;
    text-shadow:0 3px 12px #000,0 0 35px #b1534570;
  }

  @keyframes combat-outcome-splash {
    0% {opacity:0;}
    12%,60% {opacity:1;}
    100% {opacity:0;}
  }

  .combat-outcome[hidden] {
    display:none;
  }

  .combat-state[hidden] {
    display:none;
  }

  .scene.scene-preparing .mob,
.scene:not(.pixi-ready):not(.pixi-unavailable) .mob {
    visibility:hidden;
  }

  .combat-resources {
    height:71px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    row-gap:0;
    grid-template-rows:24px 18px 8px 14px;
    align-items:stretch;
    padding:5px 16px 0;
    background:linear-gradient(90deg,#19170f,#10110d);
    border-top:1px solid #9e722f;
    border-bottom:1px solid #785523;
  }

  .combat-resource {
    display:contents;
  }

  .combat-resource-health { --resource-column:1; }
  .combat-resource-focus { --resource-column:2; }
  .combat-resource > div { min-width:0; grid-column:var(--resource-column); }

  .combat-resource > div:first-child {
    grid-row:2;
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:0;
    font: .95rem var(--display);
    color:#efdbb4;
  }

  .combat-resource .effect-indicators { grid-row:1; }

  .combat-resource b {
    font: .9rem var(--ui);
    font-variant-numeric:tabular-nums;
  }

  .combat-meter {
    grid-row:3;
    height:8px;
    overflow:hidden;
    border:1px solid #75613e;
    background:#27271f;
    box-shadow:inset 0 1px 4px #000;
    border-radius:3px;
  }

  .combat-meter i {
    display:block;
    height:100%;
    width:var(--value,0%);
    transition:width 180ms ease;
    background:linear-gradient(90deg,#b92d39,#f25b61);
  }

  .combat-meter.focus i {
    background:linear-gradient(90deg,#3d63ce,#80b0ff);
  }

  .low-health .combat-meter {
    outline:1px solid #ed5b5b;
    outline-offset:5px;
    box-shadow:0 0 15px #ce303045;
  }

  .low-health > div:first-child {
    color:#ffb0a5;
  }

  .combat-fx {
    pointer-events:none;
    position:absolute;
    inset:0;
    z-index:25;
    opacity:0;
  }

  .combat-fx.enemy-impact {
    background:radial-gradient(ellipse at center,transparent 40%,#a90f2680 100%);
    box-shadow:inset 0 -30px 70px #a90f2660;
  }

  .attack-mark {
    position:absolute;
    left:var(--impact-x);
    top:var(--impact-y);
    width:90px;
    height:4px;
    transform:translate(-50%,-50%) rotate(-38deg);
    background:#fff2ce;
    box-shadow:0 0 12px 5px #efab52a0;
  }

  .attack-mark::after {
    content:'';
    position:absolute;
    inset:12px 15px -12px;
    background:#ffd999;
    box-shadow:0 0 8px #ffd999;
  }

  .magic .attack-mark {
    width:48px;
    height:48px;
    border-radius:50%;
    background:radial-gradient(#fff,#76b9ff8c,transparent);
    box-shadow:0 0 24px #87bfff;
  }

  .ranged .attack-mark {
    width:24px;
    height:24px;
    transform:translate(-50%,-50%) rotate(45deg);
  }

  .damage-number {
    position:absolute;
    left:var(--impact-x);
    top:calc(var(--impact-y) - 45px);
    transform:translateX(-50%);
    color:#fff0ce;
    font:bold 1.8rem var(--display);
    text-shadow:0 2px 3px #000,0 0 7px #000;
    white-space:nowrap;
  }

  .enemy-impact .damage-number {
    color:#ffb7ae;
  }

  .attack-miss + .damage-number,.attack-block + .damage-number {
    font-size:1.15rem;
    color:#d5deee;
  }

  .attack-projectile {
    position:absolute;
    left:0;
    top:0;
    width:22px;
    height:5px;
    background:#ffe4ac;
    box-shadow:0 0 8px 3px #df9837;
  }

  .magic .attack-projectile {
    width:12px;
    height:12px;
    border-radius:50%;
    background:#bbdcff;
    box-shadow:0 0 16px 6px #619eed;
  }

  .combat-layout-veil {
    position:fixed;
    inset:0;
    z-index:210;
    background:radial-gradient(ellipse at center,#241b13,#0b0a08 75%);
    box-shadow:inset 0 0 120px #a36a2c44;
  }

  .combat-layout-veil[data-direction="travel"] {
    background:#090806;
    box-shadow:none;
  }

  @media(max-width:760px) {

    .combat-resources {
      column-gap:14px;
      padding:5px 12px 0;
    }
  }

  @media(prefers-reduced-motion:reduce) {
    .combat-meter i {
      transition:none;
    }
  }

  .reduced-motion .combat-meter i {
    transition:none;
  }

  .reward-contents {
    display:grid;
    gap:12px;
  }

  .reward-row {
    grid-template-columns:64px minmax(0,1fr) auto;
  }

  .reward-row strong,.reward-row small {
    display:block;
  }

  .reward-row small {
    margin-top:5px;
    line-height:1.45;
    color:#b9a88e;
  }

  .reward-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .reward-error {
    padding:12px;
    border:1px solid #ae623e;
    color:#ffd3b2;
    background:#50271955;
  }

  .audio-settings {
    border:1px solid #84632f;
    margin:22px 0 0;
    padding:16px;
    min-width:0;
  }

  .audio-settings legend {
    padding:0 8px;
    color:#e9c881;
    font:20px Georgia,serif;
  }

  .audio-settings .chronicle-speed-setting {
    margin-top:16px;
  }

  .audio-settings p {
    color:#b9a88e;
    line-height:1.5;
  }

  .audio-settings details {
    margin-top:16px;
  }

  .audio-settings summary {
    cursor:pointer;
    color:#e9c881;
  }

  .audio-settings a {
    color:#e9c881;
    text-decoration:underline;
  }

  @media(max-width:600px) {
    .reward-row {
      grid-template-columns:48px minmax(0,1fr);
    }

    .reward-actions {
      grid-column:1/-1;
    }
  }

  .scene .movement-echo {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center;
    will-change: opacity, transform, filter;
  }

  .portal-transition {
    position:fixed;
    inset:0;
    z-index:200;
    display:grid;
    place-items:center;
    overflow:hidden;
    pointer-events:auto;
    opacity:0;
    background:#03070d;
    --portal-rgb:75,155,255;
  }

  .portal-transition[data-kind="rift"] {
    --portal-rgb:240,65,85;
    background:#0c0306;
  }

  body.modal-open {
    overflow:hidden;
  }

  .flow-modal {
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }

  .flow-modal > header {
    grid-row:1;
  }

  .flow-modal > .popup-feedback {
    grid-row:2;
  }

  .flow-modal > .flow-body {
    grid-row:3;
  }

  .flow-modal > .flow-footer {
    grid-row:4;
  }

  .flow-footer:empty {
    display:none;
  }

  .popup-feedback {
    margin:12px 22px 0;
    padding:13px 16px;
    border:1px solid #7e9769;
    background:#263728;
    color:#e4efd7;
    font:1rem/1.5 var(--ui);
    white-space:pre-line;
    max-height:150px;
    overflow:auto;
  }

  .popup-feedback.is-error {
    border-color:#cc866a;
    background:#412b22;
    color:#ffe1cc;
  }

  .popup-feedback[hidden] {
    display:none;
  }

  .flow-modal[data-view="backpack"],.flow-modal[data-view="equipment"],.flow-modal[data-view="techniques"],.flow-modal[data-view="journal"] {
    width:min(1140px,calc(100vw - 32px));
    height:min(870px,92vh);
    max-height:92vh;
    box-shadow:0 20px 100px #000c,inset 0 0 0 4px #18140b;
  }

  .flow-modal[data-view] .flow-body {
    padding:0 24px 24px;
    scrollbar-color:#9b773f #151510;
  }

  .flow-modal[data-view=""] .flow-body {
    padding:20px;
  }

  .flow-modal button:focus-visible {
    outline:2px solid #ffe4a6;
    outline-offset:3px;
  }

  .flow-modal button:not(:disabled):hover {
    border-color:#e1bb73;
  }

  .timed-icon {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:fit-content;
    max-width:100%;
    line-height:0;
    flex-shrink:0;
  }

  .instant-indicator {
    position:absolute;
    right:-5px;
    top:-5px;
    display:inline-flex;
    width:22px;
    height:22px;
    color:#ffdc78;
    filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px #e9b34166);
    pointer-events:none;
  }

  .instant-indicator svg {
    width:100%;
    height:100%;
    fill:currentColor;
    stroke:#211606;
    stroke-width:1.5;
    stroke-linejoin:round;
  }

  .action-item .action-icon {
    position:relative;
    width:41px;
    margin-inline:auto;
  }

  .flow-button > .instant-indicator {
    position:static;
    width:17px;
    height:17px;
    vertical-align:-3px;
    margin-right:6px;
  }

  .bag-item-detail .turn-usage {
    color:#edcf96;
    font:.9rem/1.5 var(--ui);
    margin:0 0 16px;
  }

  .flow-modal .management-error {
    padding:12px 16px;
    color:#ffe1cc;
    background:#412b22;
    border:1px solid #cc866a;
  }

  .loadout-board {
    padding:20px;
    border:1px solid #a57f36;
    background:radial-gradient(ellipse at top,#3b301b80,transparent),#161710;
  }

  .loadout-board > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .loadout-board h3,.technique-library-heading h3,.bag-item-detail h3,.discovery-hero h3 {
    margin:0;
    color:#f6dcaa;
    font:1.45rem var(--display);
  }

  .loadout-board header p {
    margin:7px 0 18px;
    color:#c9bea6;
    font: .95rem var(--ui);
  }

  .loadout-board header > strong {
    align-self:flex-start;
    color:#f6dcaa;
    font:1.3rem var(--display);
    white-space:nowrap;
  }

  .loadout-slots {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
  }

  .loadout-slot {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    padding:12px 8px;
    border:1px solid #a17d3b;
    background:linear-gradient(#302819,#14150f);
    min-width:0;
  }

  .loadout-slot img {
    width:76px;
    height:76px;
    object-fit:contain;
    filter:brightness(1.25);
  }

  .loadout-slot strong {
    color:#f4dfb7;
    min-height:2.5em;
    font: .95rem/1.25 var(--display);
  }

  .loadout-slot .flow-button {
    margin-top:auto;
    font-size:.85rem;
    padding:7px 12px;
    min-height:34px;
  }

  .loadout-slot--empty {
    border-style:dashed;
    border-color:#665739;
    justify-content:center;
    min-height:185px;
    color:#c2b493;
    background:#14150f;
  }

  .loadout-slot--empty span:first-child {
    font:2.6rem var(--display);
    color:#82734f;
  }

  .loadout-help {
    margin:16px 0 0;
    color:#eed09a;
    font: .95rem/1.5 var(--ui);
  }

  .technique-library-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:26px 0 16px;
  }

  .technique-library-heading p {
    color:#cfbf9f;
    font:.95rem var(--ui);
  }

  .popup-view-switch {
    display:flex;
    gap:0;
    margin-bottom:14px;
  }

  .popup-view-switch button,.popup-branches button {
    padding:9px 15px;
    border:1px solid #625230;
    background:#191a13;
    color:#d2c2a0;
    font:.95rem var(--ui);
  }

  .popup-view-switch button[aria-pressed="true"],.popup-branches button[aria-pressed="true"] {
    color:#ffe3a2;
    background:#3e321e;
    border-color:#c99c4c;
  }

  .popup-view-switch span {
    margin-left:8px;
    color:#bdae91;
  }

  .popup-branches {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
  }

  .technique-option-heading {
    display:flex;
    align-items:center;
    gap:12px;
  }

  .technique-option-heading img {
    width:58px;
    height:58px;
    object-fit:contain;
    filter:brightness(1.3);
  }

  .popup-empty {
    padding:30px;
    text-align:center;
    color:#ccbea3;
    border:1px dashed #655633;
    grid-column:1/-1;
  }

  .popup-empty h4,.popup-empty h3 {
    color:#efd7a6;
    font:1.2rem var(--display);
  }

  .backpack-summary {
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
    padding:15px 20px;
    border:1px solid #6a542c;
    background:#242116;
  }

  .backpack-summary p {
    margin:0;
    color:#cbbc9c;
    font:1rem var(--ui);
  }

  .backpack-summary strong {
    color:#ffe0a0;
    font:1.2rem var(--display);
  }

  .backpack-browser {
    display:grid;
    grid-template-columns:var(--inventory-columns,minmax(0,1fr) 310px);
    gap:24px;
    align-items:start;
  }

  .backpack-grid {
    display:grid;
    grid-template-columns:var(--inventory-grid-columns,repeat(3,minmax(0,1fr)));
    gap:12px;
  }

  .enchantment-browser { --inventory-columns:240px minmax(0,1fr); }
  .enchantment-picker { --inventory-grid-columns:1fr; }
  .enchantment-option { border:1px solid #65522e; padding:16px; margin-top:12px; text-align:left; }
  .enchantment-option h4 { margin:0 0 8px; }
  .enchantment-option p { margin:8px 0; }

  .bag-item {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    min-width:0;
    min-height:166px;
    padding:18px 12px;
    background:linear-gradient(#252217,#14150f);
    border:1px solid #65522e;
    color:#dfcda7;
  }

  .bag-item.is-selected {
    border-color:#e0b55b;
    box-shadow:inset 0 0 0 1px #d0a449;
    background:linear-gradient(#44361f,#201e13);
  }

  .bag-item img.game-art-icon {
    width:88px;
    height:88px;
    object-fit:contain;
  }

  .bag-item strong {
    font:1rem/1.3 var(--display);
  }

  .bag-item > span {
    position:absolute;
    right:8px;
    top:8px;
    color:#ffe6ac;
    font:.85rem var(--ui);
  }

  .bag-item-detail {
    position:sticky;
    top:86px;
    text-align:center;
    padding:24px;
    border:1px solid #a57d37;
    background:radial-gradient(ellipse at top,#49381d80,transparent),#191a12;
  }

  .bag-item-detail .timed-icon img.game-art-icon {
    width:136px;
    height:136px;
    object-fit:contain;
  }

  .bag-item-detail > .timed-icon {
    margin-bottom:18px;
  }

  .bag-item-detail p {
    color:#d4c8af;
    font:1rem/1.6 var(--ui);
  }

  .bag-item-detail small {
    color:#bdae92;
    font:.85rem/1.5 var(--ui);
    display:block;
  }

  .bag-detail-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin:22px 0 16px;
  }

  .bag-detail-actions .flow-button {
    padding:10px 18px;
  }

  .discovery-journal {
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:28px;
    align-items:start;
  }

  .discovery-index {
    display:grid;
    gap:10px;
  }

  .discovery-index button {
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    padding:12px;
    border:1px solid #67542f;
    background:#1d1e15;
    color:#ddc99f;
  }

  .discovery-index button[aria-pressed="true"] {
    border-color:#d4a856;
    background:linear-gradient(135deg,#40331d,#201e14);
  }

  .discovery-index img,.journal-placeholder {
    width:56px;
    height:68px;
    object-fit:contain;
    flex-shrink:0;
  }

  .journal-placeholder {
    display:grid;
    place-items:center;
    background:#242519;
    font-size:2rem;
  }

  .discovery-index strong {
    display:block;
    font:1.05rem/1.3 var(--display);
  }

  .discovery-index small {
    display:block;
    margin-top:7px;
    color:#baac8e;
    font:.8rem var(--ui);
  }

  .discovery-entry {
    min-width:0;
  }

  .discovery-hero {
    display:flex;
    align-items:center;
    gap:24px;
    padding:24px;
    background:linear-gradient(135deg,#30281a,#171811);
    border:1px solid #8d6e34;
  }

  .discovery-hero > img {
    width:150px;
    height:210px;
    object-fit:contain;
    flex-shrink:0;
  }

  .discovery-hero p,.discovery-clues p {
    color:#d7cbb3;
    font:1rem/1.65 var(--ui);
  }

  .discovery-clues {
    margin-top:24px;
  }

  .discovery-clues h4 {
    font:1.2rem var(--display);
    color:#edcf99;
  }

  .discovery-clues article {
    padding:18px 22px;
    margin:12px 0;
    border-left:2px solid #ac8540;
    background:#232217;
    border-top:1px solid #584729;
  }

  .discovery-clues h5 {
    margin:0;
    font:1.05rem var(--display);
    color:#f0d3a0;
  }

  .discovery-clues article p {
    margin-bottom:0;
  }

  .flow-modal[data-view="equipment"] .equipment-body-layout {
    grid-template-columns:repeat(3,minmax(0,210px));
    gap:16px 36px;
  }

  .flow-modal[data-view="equipment"] .equipment-slot {
    background:linear-gradient(#2a2519,#151610);
    border:1px solid #806432;
    min-height:170px;
    padding:14px 12px;
  }

  .flow-modal[data-view="equipment"] .equipment-slot img {
    width:108px;
    height:108px;
    object-fit:contain;
  }

  .flow-modal[data-view="equipment"] .equipment-slot.is-equipped {
    border-color:#ce9f4c;
  }

  .equipment-choice .game-art-icon {
    width:90px;
    height:90px;
  }

  @media(max-height:800px) {
    .bag-item-detail {
      padding:18px;
    }

    .bag-item-detail .timed-icon img.game-art-icon {
      width:96px;
      height:96px;
    }

    .bag-item-detail>.timed-icon {
      margin-bottom:10px;
    }

    .bag-item-detail h3 {
      font-size:1.25rem;
    }

    .bag-item-detail p {
      font-size:.95rem;
      line-height:1.45;
      margin:12px 0;
    }

    .bag-detail-actions {
      margin:14px 0 12px;
    }

    .bag-detail-actions .flow-button {
      padding:8px 14px;
    }
  }

  @media(max-width:900px) {

    .backpack-browser {
      grid-template-columns:minmax(0,1fr) 260px;
    }

    .backpack-grid {
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .discovery-journal {
      grid-template-columns:210px minmax(0,1fr);
    }

    .discovery-hero {
      flex-direction:column;
      align-items:flex-start;
    }

    .discovery-hero>img {
      align-self:center;
      height:170px;
    }

    .loadout-slots {
      grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .loadout-slot--empty {
      min-height:170px;
    }
  }

  @media(max-width:620px) {
    .flow-modal[data-view] {
      width:calc(100vw - 16px);
      height:94vh;
      max-height:94vh;
    }

    .flow-modal[data-view] .flow-body {
      padding:0 12px 16px;
    }

    .loadout-board {
      padding:12px;
    }

    .loadout-slots {
      gap:7px;
    }

    .loadout-slot {
      padding:10px 5px;
    }

    .loadout-slot img {
      width:56px;
      height:56px;
    }

    .technique-library-heading {
      align-items:flex-start;
      flex-direction:column;
      gap:0;
    }

    .popup-branches {
      gap:6px;
    }

    .popup-branches button {
      padding:8px 10px;
      font-size:.85rem;
    }

    .backpack-browser {
      grid-template-columns:1fr;
    }

    .backpack-grid {
      grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .bag-item {
      padding:12px 5px;
      min-height:135px;
    }

    .bag-item img.game-art-icon {
      width:64px;
      height:64px;
    }

    .bag-item strong {
      font-size:.85rem;
    }

    .bag-item-detail {
      position:static;
    }

    .discovery-journal {
      grid-template-columns:1fr;
    }

    .discovery-index {
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .discovery-index button {
      gap:8px;
      padding:8px;
    }

    .discovery-index img {
      width:40px;
      height:50px;
    }

    .discovery-index strong {
      font-size:.9rem;
    }

    .discovery-index small {
      font-size:.75rem;
    }

    .discovery-hero {
      flex-direction:row;
      padding:16px;
      gap:16px;
    }

    .discovery-hero>img {
      width:100px;
      height:150px;
    }

    .flow-modal[data-view="equipment"] .equipment-body-layout {
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:9px;
    }

    .flow-modal[data-view="equipment"] .equipment-slot {
      padding:9px 5px;
      min-height:145px;
    }

    .flow-modal[data-view="equipment"] .equipment-slot img {
      width:78px;
      height:78px;
    }

    .popup-feedback {
      margin:10px 12px 0;
      max-height:110px;
    }
  }

  .portal-transition-ring {
    width:min(65vw,65vh);
    aspect-ratio:1;
    border-radius:50%;
    opacity:.4;
    background:radial-gradient(circle,#03070d 30%,rgba(var(--portal-rgb),.08) 38%,rgba(var(--portal-rgb),.8) 47%,#d9eeff 50%,rgba(var(--portal-rgb),.55) 55%,transparent 68%),conic-gradient(from 35deg,transparent,rgba(var(--portal-rgb),.6),transparent 24%,rgba(var(--portal-rgb),.8) 43%,transparent 57%,rgba(var(--portal-rgb),.5) 76%,transparent);
    filter:blur(2px);
    box-shadow:0 0 100px 35px rgba(var(--portal-rgb),.22),inset 0 0 75px rgba(var(--portal-rgb),.5);
  }


  .exploration-details .room-contents > small,
  .exploration-details .room-entity em,
  .exploration-details .room-entity > b,
  .exploration-details .exploration-actions {
    display: none;
  }
}

@layer preferences {
  [hidden] {
    display: none;
  }

  .large-narrative .story-log {
    font-size: 1.18rem;
  }

  .reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none;
      transition: none;
      scroll-behavior: auto;
    }
  }
}

.sale-control { display: flex; align-items: end; gap: .6rem; }
.sale-control label { display: grid; gap: .3rem; font-size: .8rem; }
.sale-select { position: relative; display: block; }
.sale-select select { appearance: none; background: #16130e; color: #e7dcc3; border: 1px solid #655238; border-radius: 4px; padding: .5rem 1.8rem .5rem .6rem; }
.sale-select > span { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sale-control .flow-button { margin: 0; }
.shop-row > .sale-control { grid-column: 3 / -1; }

.draggable-ability { display: inline-flex; flex-shrink: 0; cursor: grab; }
.draggable-ability > .action-item { height: 100%; }
.draggable-ability[data-drop-position="before"] { box-shadow: -3px 0 #c7a361; }
.draggable-ability[data-drop-position="after"] { box-shadow: 3px 0 #c7a361; }
/* Remaining cooldown overlays the action artwork. */
.action-icon {position:relative;}
.action-icon .action-cooldown {position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 1.65rem system-ui;text-shadow:0 1px 3px #000,0 0 6px #000;background:#0006;pointer-events:none;}
.journal-tabs {display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.journal-tabs button[aria-pressed="true"] {outline:2px solid #c7a361;outline-offset:2px;}
.investigation-journal {max-width:850px;margin:auto;line-height:1.55;}
.investigation-entry {padding:18px 0;border-bottom:1px solid #8c7048;}
.investigation-entry h3 {margin:0 0 8px;}
.investigation-entry ul {padding-left:24px;}
.investigation-lead {margin:16px 0;padding:16px;border:1px solid #8c7048;background:rgba(90,62,23,.08);}
.investigation-lead h4 {margin:0 0 8px;}
.investigation-lead small {display:block;margin-top:8px;}
.investigations-completed {margin:20px 0;}

.investigation-hints {margin-top:14px;border-left:3px solid #8c7048;padding-left:14px;}

.flee-mark {position:absolute;left:var(--impact-x);top:var(--impact-y);width:22px;height:22px;border-top:2px solid #e3bb80;border-left:2px solid #e3bb80;transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 0 4px #e3bb80);}

  .item-facts dl { display:grid; gap:5px; margin:12px 0; }
  .item-facts dl > div { display:flex; justify-content:space-between; gap:16px; }
  .item-facts dd { margin:0; font-variant-numeric:tabular-nums; }
  .item-facts dt { text-transform:capitalize; }

.item-artwork { position:relative; display:inline-flex; align-items:center; justify-content:center; max-width:100%; line-height:0; }
.item-level-badge { position:absolute; right:1px; bottom:1px; min-width:1.4em; padding:2px 3px; border:1px solid #a88949; background:#17130ee8; color:#ffe3a0; font:700 .78rem/1 var(--display); text-align:center; pointer-events:none; }
.trade-group { margin:12px 0 0; padding:8px 0; border-bottom:1px solid #806432; color:#efd49c; font:1.15rem var(--display); }

@layer interface {
 .move-trigger{width:100%;min-height:44px;text-align:center;font:1.15rem var(--display);cursor:pointer;}
 .move-arrow{position:static;flex:none;line-height:1;}
 .move-options{position:fixed;z-index:1200;overflow:auto;padding:8px;background:#17150f;border:1px solid #b08a48;box-shadow:0 -8px 28px #000b;}
 .move-options .flow-button{display:block;width:100%;padding:12px;text-align:left;white-space:normal;margin:0 0 5px;}
 .move-options button:focus-visible,.skill-node:focus-visible,.equipment-inspect:focus-visible{outline:2px solid #ffe4a6;outline-offset:3px;}
 .equipment-inspect{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer;width:100%;}
 .equipment-inspect:hover img{filter:brightness(1.15);}
 .skill-legend{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0;font-size:.8rem;}
 .skill-legend span{padding:4px 10px;border:1px solid #645c49;border-radius:3px;}
 .skill-legend .is-equipped{border-color:#e9c367;color:#ffe3a0;}
 .skill-legend .is-learned{border-color:#74a38b;color:#a6d1b5;}
 .skill-legend .is-available{border-color:#acbbd1;color:#d2e3fc;}
 .skill-legend .is-locked{color:#a8a18f;}
 .skill-tree-scroll{max-height:440px;overflow:auto;overscroll-behavior:contain;border:1px solid #5a4b31;background:radial-gradient(ellipse at top,#302719,#10120e 70%);margin:0;}
 .skill-tree{position:relative;isolation:isolate;}
 .skill-connections{position:absolute;inset:0;pointer-events:none;}
 .skill-connections path{fill:none;stroke:#6a6454;stroke-width:2;}
 .skill-connections path.is-learned{stroke:#cdaa58;stroke-width:3;}
 .skill-branch{position:absolute;top:15px;margin:0;text-align:center;color:#e4c98a;font:1.1rem var(--display);}
 .skill-node{position:absolute;width:106px;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px;border:1px solid #6d6756;border-radius:8px;background:#211f18;color:#bcb6a9;cursor:pointer;}
 .skill-node .timed-icon{width:35px;height:35px;flex:none;}
 .skill-node img{width:35px;height:35px;object-fit:contain;}
 .skill-node strong{font-size:.71rem;line-height:1.1;max-width:100%;min-height:24px;}
 .skill-node span,.skill-node small{font-size:.6rem;line-height:1.1;}
 .skill-node.is-equipped{border:2px solid #e7bb50;background:#4c381d;color:#ffe7ad;}
 .skill-node.is-learned{border-color:#8cba9f;background:#24382b;color:#d5e7d7;}
 .skill-node.is-available{border-color:#adc8ee;background:#253448;color:#dfedff;}
 .skill-node[aria-pressed="true"]{outline:2px solid #fff1c9;outline-offset:4px;}
 .skill-detail{position:sticky;top:0;align-self:start;min-width:0;z-index:3;padding:16px 20px;background:#1c2018;border:1px solid #9f8245;box-shadow:0 -8px 25px #0008;}
 .skill-detail p{font-size:.86rem;line-height:1.45;margin:8px 0;}
 .skill-detail h4{margin:0;font:1.2rem var(--display);}
 .skill-detail .timed-icon{width:44px;height:44px;}
 .skill-detail img{width:44px;height:44px;object-fit:contain;}
}

@layer interface { .skill-workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;margin-top:14px;} }

@layer interface { [data-exploration-tab].needs-attention{border-color:#f2cc72;box-shadow:inset 0 -3px #f2cc72;} [data-exploration-tab].needs-attention::after{content:" •";color:#ffe5a0;} .reset-controls{margin:12px 0;} .reset-controls p{font-size:.85rem;color:#cabc9e;} }

@layer interface {
 .exploration-direct-actions{display:grid;gap:7px;max-height:160px;overflow:auto;padding:2px;}
 .exploration-direct-actions .flow-button{padding:9px 14px;min-height:40px;white-space:normal;}
}