@import url('./ui-icons.css');
@import url('./game-fonts.css');
:root {
  color-scheme: dark;
  --ink: #eee4cc;
  --muted: #b6b59e;
  --gold: #d4b475;
  --stone: #736347;
  --olive: #283128;
  --panel: #19201d;
  --panel-raised: #242d24;
  --danger: #efa99a;
  --ok: #c5d9ab;
  --warn: #efd4a1;
  --fail: #de9582;
  font: 16px/1.55 "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
}

#runProgress,
#executionCounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid #67745a;
  background: #1a251e;
  color: #ced9cb;
  max-width: 100%;
  white-space: normal;
  font-size: 12px;
}

.vitals #executionCounts { grid-column: 1 / -1; grid-row: 4; justify-self: end; color: #d4b475; }

#threatText .text-line {
  display: block;
  white-space: normal;
  line-height: 1.5;
  margin: 2px 0;
}

#threatText .text-line--sub {
  color: #b5b19a;
  padding-left: 14px;
  position: relative;
}

#threatText .text-line--sub::before {
  content: ''; width: 4px; height: 4px; background: currentColor; top: .6em; transform: rotate(45deg);
  position: absolute;
  left: 0;
  color: #d4b475;
}

#threatText .text-line--empty {
  color: #8f886f;
  font-style: italic;
}

* { box-sizing: border-box; overflow-wrap: anywhere; }
body { margin: 0; min-width: 320px; background: #0c1213; color: var(--ink); }
button, input, textarea, select { font: inherit; }
button, input, textarea, select, summary { min-height: 44px; }
button { border: 1px solid var(--stone); border-radius: 3px; padding: 8px 14px; color: var(--ink); background: var(--olive); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); background: #343b2e; }
button:disabled { color: #a7a999; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #ffe0a1; outline-offset: 3px; }
button.primary { border-color: #e2c28a; background: #b89a61; color: #171c17; font-weight: 700; }
button.primary:hover:not(:disabled) { background: #c9ac71; }
.icon-button { width: 44px; padding: 4px; font-size: 22px; }
.text-button { border-color: transparent; background: transparent; color: var(--muted); }
.danger-button { border-color: #bb8370; color: var(--danger); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; z-index: 10; top: -100px; left: 16px; padding: 10px; background: var(--gold); color: #201c12; }
.skip:focus { top: 12px; }

.game {
  width: min(100%, 1440px);
  min-height: 100dvh;
  margin-inline: auto;
  padding: 16px clamp(16px, 3vw, 40px) 28px;
  display: grid;
  align-content: center;
  gap: 14px;
  background: #0c1213;
}

.game-header, .scene-heading, .game-controls { width: min(100%, 960px); margin-inline: auto; }
.game-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.game-brand { display: flex; align-items: center; gap: 10px; }
.game-brand > span { color: var(--gold); font-size: 30px; }
.game-brand b { display: block; font: 700 20px Georgia, serif; letter-spacing: .12em; }
.game-brand small { display: block; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.scene-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.location { min-width: 0; }
.location p { margin: 0; }
.location { min-width: 0; }
.location #locationCopy { color: var(--muted); font-size: 14px; }
.room-followup { margin-top: 8px; max-width: 720px; font-size: 13px; }
.room-followup p { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.room-followup span { min-width: 0; }
.room-followup button { flex: none; padding: 5px 2px; font-size: 12px; }
#roomMemoryText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--gold); }
.room-connection { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { .room-followup p { flex-wrap: wrap; gap: 0 8px; }.room-followup button { min-height: 40px; } }
.location p:first-child { color: var(--gold); font-size: 12px; letter-spacing: .12em; }
.location h1 { margin: 2px 0 4px; font-size: clamp(26px, 4vw, 38px); line-height: 1.2; }
.location p:last-child { color: var(--muted); font-size: 14px; }
.vitals { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: min(360px, 48%); padding: 8px 12px; border: 1px solid var(--stone); border-left: 3px solid var(--gold); background: var(--panel); }
.vitals > b { font-size: 14px; }
.vitals > div { grid-column: 1 / -1; display: grid; grid-template-columns: 25px minmax(70px, 1fr) 58px; align-items: center; gap: 7px; font-size: 13px; }
.vitals > div > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vitals small { grid-column: 1 / -1; align-self: center; color: var(--muted); font-size: 12px; }
.vitals #runProgress { grid-row: 4; }
.vitals #characterXp { grid-row: 5; color: #d4bd8c; font-variant-numeric: tabular-nums; }
.vitals #executionCounts { grid-row: 6; justify-self: start; }
.vitals::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid #303a32;
  border-left: 0;
  pointer-events: none;
}

.vitals #runProgress,
.vitals #executionCounts { justify-content: flex-start; }
meter { width: 100%; height: 12px; appearance: none; background: #343d32; }
meter::-webkit-meter-bar { border: 0; border-radius: 0; background: #343d32; }
meter::-webkit-meter-optimum-value { background: #b76550; }
#mpMeter::-webkit-meter-optimum-value { background: #6ca9bb; }

.scene-area {
  position: relative;
  width: min(100%, 960px, calc(58dvh * 16 / 9));
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--stone);
  background: #121914;
  aspect-ratio: 16 / 9;
}
body[data-scene="dungeon"] .scene-area { width: min(100%, 620px); aspect-ratio: 11 / 9; background: radial-gradient(ellipse at 50% 45%, #30301f, #0a1010 78%); box-shadow: 0 12px 42px #0008, 0 0 0 4px #18201a; }
body[data-phase="route"] .scene-area, body[data-phase="camp"] .scene-area, body[data-phase="reward"] .scene-area { width: min(100%, 480px); aspect-ratio: 11 / 3; }
#world { display: block; position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.mission-bar { position: absolute; z-index: 1; top: 8px; left: 8px; display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; width: min(300px, calc(100% - 16px)); padding: 6px 8px; border: 1px solid #d0a34e; border-left: 3px solid #f0c45b; background: #17170fe8; color: #f2e2b8; font-size: 12px; line-height: 1.35; pointer-events: none; }
.mission-bar b { color: #ffe0a1; }.mission-bar span { color: #f3c56e; font-variant-numeric: tabular-nums; text-align: right; }.mission-bar small { grid-column: 1 / -1; color: #d4c9ab; font-size: 11px; }
.adventure-info { grid-column: 2; grid-row: 1 / span 3; width: 180px; align-self: start; border: 1px solid var(--stone); background: #101914ee; font-size: 14px; }
.adventure-info summary { display: flex; align-items: center; padding: 0 10px; color: var(--gold); cursor: pointer; }
.adventure-info p { margin: 0; padding: 0 12px 12px; white-space: pre-line; line-height: 1.55; }
.dev-badge { position: absolute; right: 10px; bottom: 10px; padding: 4px 9px; background: #513a1e; color: #ffe1a1; font-size: 12px; }
.thinking-badge { position: absolute; left: 12px; bottom: 12px; display: grid; grid-template-columns: 16px 1fr; gap: 1px 6px; padding: 7px 10px; background: #101b17e8; border: 1px solid #727855; pointer-events: none; }.thinking-badge i { grid-row: span 2; align-self: center; width: 8px; height: 8px; border: 1px solid #d4c386; transform: rotate(45deg); animation: thinking-light 1.8s ease-in-out infinite; }.thinking-badge b { font-size: 11px; color: #dfd4b4; }.thinking-badge span { font-size: 10px; color: #aab6a3; }
@keyframes thinking-light { 50% { background: #c8b984; box-shadow: 0 0 9px #c8b984; } }
.asset-credit { display: block; width: fit-content; margin: 7px 0 0 auto; color: #a0aa91; font-size: 11px; text-underline-offset: 3px; }

.decision { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; width: min(960px, 100%); margin-inline: auto; padding: 8px 14px; border-left: 3px solid var(--gold); background: var(--panel); }
.decision { position: relative; border: 1px solid var(--stone); border-radius: 4px; box-shadow: 0 10px 30px #0006; background: linear-gradient(180deg, #1f2620, #151c18 40%, #101814); }
.decision::before { content: ''; position: absolute; inset: 0; border: 1px solid #6c6c53; pointer-events: none; }
.decision > span { grid-column: 1; color: var(--gold); font-size: 12px; letter-spacing: .08em; }
.decision > p { grid-column: 1; margin: 2px 0; font-size: 15px; line-height: 1.6; }
.decision > small { grid-column: 1; color: var(--muted); font-size: 13px; }
.decision[data-state='deciding'] > span { color: var(--warn); }
.decision[data-state='paused'] > span { color: #d8ddcf; }
.decision[data-state='victory'] > span { color: var(--ok); }
.decision[data-state='defeat'] > span { color: var(--fail); }
.decision[data-state='error'] > span { color: #ffba9c; }
.decision[data-state='interrupted'] > span { color: var(--gold); }

#decisionSource { display: flex; flex-wrap: wrap; }
#decisionSource .status-pill { margin-bottom: 4px; }
#choiceResult, #tacticalGoal { display: block; margin-top: 4px; }
.choice-panel { grid-column: 1; margin-top: 7px; padding: 8px 10px; border: 1px solid #776545; border-left: 3px solid var(--gold); background: #111813; }
.choice-panel b { color: var(--gold); font-size: 13px; }.choice-panel p, .choice-panel small { display: block; margin: 3px 0 0; font-size: 13px; }.choice-panel small { color: var(--muted); }
.route-map { margin-bottom: 18px; padding: 16px 8px; background: radial-gradient(ellipse at center, #38402b, #171e18); border: 1px solid #676247; }
.route-map h3 { margin: 0 0 18px; text-align: center; color: #dfcd9d; font-size: 15px; }
.route-trail { display: flex; list-style: none; padding: 0; margin: 0; }
.route-trail li { position: relative; flex: 1; min-width: 0; text-align: center; padding: 0 3px; }
.route-trail li + li::before { content: ''; position: absolute; top: 16px; right: calc(50% + 17px); width: calc(100% - 34px); border-top: 2px dashed #777556; }
.route-trail span { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 7px; border: 1px solid #787458; background: #20291e; border-radius: 50%; color: #cac7a9; }
.route-trail b, .route-trail small { display: block; overflow-wrap: anywhere; font-size: 11px; }
.route-trail .current span { color: #191f17; background: #e0c688; outline: 3px solid #e0c68833; }.route-trail .visited span { border-color: #9aaf88; color: #bbd8a8; }.route-trail .unvisited { opacity: .65; }
.route-fork { display: flex; gap: 18px; width: min(440px, 90%); margin: 22px auto 0; border-top: 2px solid #aa996c; }
.route-path { flex: 1; padding: 13px 4px; text-align: center; border-bottom: 2px solid #9eaf87; position: relative; }.route-path::before { content: ''; position: absolute; top: 0; left: 50%; height: 9px; border-left: 2px solid #aa996c; }.route-path.risky { border-color: #c59071; }.route-path.risky b { color: #e0ad8e; }
.route-map > p { text-align: center; color: #dac99e; }
#choiceCandidates { white-space: pre-line; line-height: 1.7; }
#choiceCandidates.choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-block: 10px; white-space: normal; }.choice-panel { grid-column: 1 / -1; }
.reward-option { padding: 13px; border: 1px solid #73764e; border-top: 2px solid var(--gold); background: #253023; }.reward-option > small { color: #c6bd91; font-size: 11px; }.reward-option h4 { margin: 5px 0 8px; color: #f1dfaf; font-size: 17px; }.reward-option p { color: #c8cfbb; line-height: 1.7; }
.skill-art { --art-glow: #a8b9b2; --art-bg: #203138; position: relative; isolation: isolate; display: grid; place-items: center; height: 124px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, var(--art-bg), #0b1313 80%); border-bottom: 1px solid #807558; }
.skill-art::before { content: ''; position: absolute; width: 98px; height: 98px; border: 1px solid var(--art-glow); border-radius: 50%; opacity: .22; box-shadow: 0 0 0 8px #ffffff06, 0 0 0 17px #ffffff03; transform: rotate(-20deg); }
.skill-art::after { content: ''; position: absolute; inset: 7px; border: 1px solid #d7c08a24; clip-path: polygon(0 0, 13% 0, 13% 2%, 2% 2%, 2% 22%, 0 22%, 0 0, 100% 0, 100% 22%, 98% 22%, 98% 2%, 87% 2%, 87% 0); }
.skill-art img { position: relative; width: 86px; height: 86px; opacity: .93; filter: drop-shadow(0 0 10px var(--art-glow)); object-fit: contain; }
[data-skill="flame_bolt"] { --art-glow: #f39154; --art-bg: #633020; }[data-skill="frost_nova"] { --art-glow: #7ed8ee; --art-bg: #22435b; }[data-skill="guard"] { --art-glow: #c0d5b6; --art-bg: #344437; }[data-skill="force_push"] { --art-glow: #c6a3e6; --art-bg: #382949; }[data-skill="mend"] { --art-glow: #a6d59b; --art-bg: #24452e; }[data-skill="chain_lightning"] { --art-glow: #ffe898; --art-bg: #5a4821; }[data-skill="holy_smite"] { --art-glow: #ffe0a1; --art-bg: #51452b; }[data-skill="dash"] { --art-glow: #9babdb; --art-bg: #263654; }
[data-skill="cleave"] { --art-glow: #f6d88d; --art-bg: #563f22; }[data-skill="venom_dart"] { --art-glow: #a7e86d; --art-bg: #29482b; }[data-skill="parry"] { --art-glow: #b7e9ff; --art-bg: #214354; }[data-skill="smoke_veil"] { --art-glow: #b5c6de; --art-bg: #293447; }[data-skill="regrowth"] { --art-glow: #c8ff9b; --art-bg: #264b2b; }[data-skill="siphon"] { --art-glow: #d293f5; --art-bg: #43265b; }[data-skill="disarm"] { --art-glow: #9fe2e8; --art-bg: #244b4b; }[data-skill="remote_touch"] { --art-glow: #a9f1dc; --art-bg: #254a3c; }
.reward-option { padding: 12px; border: 1px solid #b09967; border-top-width: 3px; background: linear-gradient(#263027, #161f19); box-shadow: 0 5px 15px #0004; }.reward-option > .skill-art { margin: -12px -12px 13px; height: 145px; }.reward-option > .skill-art img { width: 104px; height: 104px; }.reward-option h4 { font-size: 19px; letter-spacing: -.025em; }.reward-option > small { text-transform: uppercase; letter-spacing: .09em; font-size: 11px; }
.preparation-skill > .skill-art { margin: -13px -12px 13px; flex-shrink: 0; }.skill-thumb { display: inline-grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0; background: radial-gradient(var(--art-bg, #354a3f), #111a17); border: 1px solid #68745a; }.skill-thumb img { display: block; width: 23px; height: 23px; object-fit: contain; }
.power-record > .skill-thumb { grid-row: span 2; }
.recent-choice { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; white-space: normal; }.recent-choice .skill-thumb { width: 44px; height: 44px; }.recent-choice .skill-thumb img { width: 34px; height: 34px; }.recent-choice strong { font-size: 15px; color: #ead9ae; }#choiceCandidates details summary { font-size: 12px; color: var(--muted); }#choiceCandidates details p { font-size: 12px; white-space: normal; }
.credits { max-width: 800px; margin: 40px auto; padding: 24px; }.credits a { color: var(--gold); }.credits table { width: 100%; border-collapse: collapse; }.credits th, .credits td { padding: 10px; border-bottom: 1px solid var(--stone); text-align: left; }.credits p { color: var(--muted); }
.error-notice { width: min(960px, 100%); margin-inline: auto; padding: 12px; border: 1px solid #d3947e; background: #39281f; }
.record-scene { display: block; width: 100%; margin: 10px 0; border: 1px solid var(--stone); background: #090d0b; image-rendering: pixelated; }
.error-notice p { margin: 0 0 8px; }

.game-controls { display: grid; gap: 10px; }
.camp-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--stone); background: var(--panel); }
.camp-controls > div { min-width: 0; }.camp-controls p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.bestiary { display: inline-flex; gap: 10px; align-items: center; color: #e4cc95; border: 1px solid #8a7150; background: linear-gradient(110deg, #352a20, #211d18); box-shadow: inset 4px 0 #8a7150; }.bestiary > img { width: 24px; height: 24px; }
#bestiaryDialog { width: min(940px, calc(100% - 24px)); padding: 22px; background: #30241b; border: 3px solid #775438; border-radius: 7px; box-shadow: 0 25px 90px #000c, inset 0 0 0 3px #1b1510; }
#bestiaryDialog .dialog-header { border-color: #70583d; }
#bestiaryDialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: min(760px, calc(100dvh - 24px)); }
#bestiaryDialog .book-spread { min-height: 0; overflow-y: auto; }
.book-tabs { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; padding: 5px 0 9px; }
.book-tabs button { min-width: 0; height: 53px; padding: 2px; border-radius: 3px; color: #d5c29c; border-color: #8c734f; background: #dac599; font-size: 12px; overflow: hidden; }
.book-tabs button[aria-pressed="true"] { background: #dac599; color: #302719; border-bottom-color: #dac599; }
.book-spread { display: grid; grid-template-columns: 1fr 1fr; color: #382f21; background: #dac599; border: 1px solid #9d8355; box-shadow: 0 4px #a18d65, 0 7px #d3bf96, 0 10px #866d46; min-height: 400px; }
.book-portrait, .book-notes { padding: 24px 30px; background: radial-gradient(ellipse at center, #f4e6be88, transparent), repeating-linear-gradient(0deg, #75512604 0 1px, transparent 1px 4px); }
.book-portrait { text-align: center; box-shadow: inset -18px 0 22px -16px #62481e; border-right: 1px solid #937a50; }
.bestiary-illustration { display: block; mix-blend-mode: multiply; }
.book-portrait > .bestiary-illustration { width: min(100%, 260px); height: auto; margin: 8px auto 14px; }
.monster-identity { display: flex; align-items: center; justify-content: center; gap: 6px; }
.monster-identity canvas { width: 44px; height: 44px; flex-shrink: 0; image-rendering: pixelated; }
.book-tabs .bestiary-illustration { width: 100%; height: 100%; aspect-ratio: auto; }.book-tabs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #f4e1b4; }
.bestiary-seal { display: grid; place-items: center; height: 100%; font-family: Georgia, serif; color: #a18b63; background: url('/assets/bestiary/book.svg') center / 65% no-repeat; }
.book-tabs button:has(.bestiary-seal) { background: #51432d; }.book-tabs .bestiary-seal { padding-top: 20px; background-position: center 2px; background-size: 23px; font-size: 11px; }
.book-portrait > .bestiary-seal { height: 270px; width: 190px; margin: 10px auto; font-size: 32px; opacity: .5; }
.book-portrait h3 { font-size: 27px; margin: 8px 0; font-family: Georgia, 'Batang', serif; }
.book-portrait p { font-size: 13px; line-height: 1.6; }.book-portrait small { color: #655234; letter-spacing: .06em; }
.book-portrait meter { display: block; width: 130px; height: 12px; margin: 9px auto; accent-color: #687647; }
.book-notes { box-shadow: inset 18px 0 22px -16px #62481e; }
.book-notes h4 { margin: 20px 0 8px; color: #675035; font-size: 12px; letter-spacing: .1em; }
.book-notes p { font-size: 14px; line-height: 1.7; margin: 6px 0 16px; word-break: keep-all; }
.book-affinity span { display: inline-block; padding: 5px 8px; margin: 0 4px 4px 0; border: 1px solid #a68b55; background: #f0dfb1; font-size: 13px; }.book-affinity.weaknesses span { color: #803e26; }.book-affinity.resistances span { color: #36514d; }
.book-affinity .affinity-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; background: #e6d2a1; }.affinity-badge img { width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(26%) sepia(24%) saturate(1626%) hue-rotate(339deg); }.resistances .affinity-badge img { filter: brightness(0) saturate(100%) invert(28%) sepia(15%) saturate(743%) hue-rotate(116deg); }.affinity-badge b { font-size: 13px; font-weight: 600; }
.book-notes .book-warning { padding: 9px; border: 1px solid #a36340; color: #7a321e; font-size: 12px; }
.book-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; color: #d4bd8f; font-size: 13px; }
.book-empty { display: grid; place-items: center; height: 245px; color: #988259; font: 120px Georgia, serif; }
.skill-card-detail summary { font-size: 12px; }.skill-card-detail .skill-card-description { display: block; margin-top: 8px; }
#controlHint, .thinking-badge > span { display: none; }
@media (max-width: 600px) {
  #bestiaryDialog { padding: 12px; }.book-spread { grid-template-columns: 1fr; }.book-portrait, .book-notes { padding: 18px; box-shadow: none; }.book-portrait { border-right: 0; border-bottom: 1px solid #ac9464; }.book-portrait > .bestiary-illustration { width: 220px; }.book-portrait h3 { font-size: 23px; }.book-notes h4 { margin-top: 10px; }.camp-controls { flex-wrap: wrap; }.camp-controls > div { flex-basis: 100%; }.book-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }.book-tabs button { height: 40px; }
}
#nextGoal { color: var(--gold); font-size: 14px; }.control-hint { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.battle-controls { display: grid; gap: 8px; }
.skill-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.playback { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.skill-bar button { min-width: 0; padding: 6px 9px; text-align: left; background: var(--panel); }
.skill-bar button small { display: block; color: var(--muted); font-size: 12px; }
.skill-bar button[data-cooldown="true"] { border-color: #585e50; color: var(--muted); }
.skill-bar .skill-token { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 2px 8px; font-size: 14px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.skill-bar .skill-token > .skill-thumb { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.skill-bar .skill-token > b { grid-column: 2; min-width: 0; font-size: inherit; }
.skill-bar .skill-token > small { grid-column: 2; font-size: 11px; word-break: keep-all; overflow-wrap: normal; }
.playback button { min-width: 0; padding-inline: 8px; font-size: 14px; }

dialog { width: min(880px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px; color: var(--ink); border: 2px solid #a18b60; background: #1b241d; box-shadow: 0 20px 70px #000b; }
dialog::backdrop { background: #030b09c9; }.small-dialog { max-width: 520px; }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--stone); }
.dialog-header p { margin: 0 0 3px; color: var(--gold); font-size: 12px; letter-spacing: .08em; }.dialog-header h2 { margin: 0; font-size: 24px; }
.dialog-intro { color: var(--muted); }.dialog-actions { position: sticky; z-index: 2; bottom: -22px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 18px -22px -22px; padding: 12px 22px; border-top: 1px solid var(--stone); background: var(--panel-raised); }
label { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; } input, textarea, select { width: 100%; padding: 9px 10px; color: var(--ink); border: 1px solid #899079; border-radius: 3px; background: #111b17; } textarea { resize: vertical; }
summary { display: flex; align-items: center; color: var(--gold); cursor: pointer; }.field-hint { color: var(--muted); font-size: 13px; }.experience-note { padding: 8px 10px; border-left: 2px solid #98ad7f; background: #202b21; }
summary::before { content: '›'; margin-right: 8px; font-size: 20px; } details[open] > summary::before { transform: rotate(90deg); }

#prepareDialog { width: min(1180px, calc(100% - 24px)); padding: 0; border: 1px solid #a18b60; background: #151d19; box-shadow: 0 0 0 4px #101712, 0 20px 80px #000c; }
#prepareDialog::backdrop { background: radial-gradient(circle at 18% 35%, #29352b 0, #08100ee8 42%, #020606f5 100%); }
#prepareDialog .dialog-header { margin: 0; padding: 20px 24px; background: #20291f; border-bottom-color: #625d43; }
#prepareDialog .dialog-header h2 { font-size: 27px; letter-spacing: -.04em; }
#prepareDialog .dialog-header p { font-size: 11px; color: #b8a579; }
.prepare-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.prepare-header-actions button:not(.icon-button) { min-height: 38px; padding: 6px 10px; font-size: 12px; }
.prepare-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); }
.prepare-adventurer { padding: 20px 18px; border-right: 1px solid #424a38; background: radial-gradient(circle at 72% 9%, #344337, transparent 30%), #101a16; }
.gamer-desk { position: relative; min-height: 205px; overflow: hidden; border: 1px solid #4b523e; background: linear-gradient(#17251f 66%, #3a3022 66% 72%, #181b17 72%); box-shadow: inset 0 0 35px #0008; }
.gamer-desk::after { content: ''; position: absolute; left: 8%; right: 6%; bottom: 25%; height: 6px; background: #6a5233; box-shadow: 0 7px #171714; }
.gamer-monitor { position: absolute; z-index: 1; top: 16px; right: 8px; width: 74%; padding: 7px 7px 21px; border: 2px solid #596355; background: #090f0d; box-shadow: 0 9px 20px #000a, inset 0 0 0 1px #26342d; }
.gamer-monitor::after { content: ''; position: absolute; left: 44%; top: 100%; width: 18%; height: 22px; border-inline: 4px solid #333a34; background: #111815; }
#preparePortrait { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.gamer-monitor > span { position: absolute; right: 8px; bottom: 2px; color: #8ea498; font-size: 9px; letter-spacing: .08em; }
.gamer-avatar { position: relative; z-index: 2; display: block; width: 148px; aspect-ratio: 1199 / 1312; flex-shrink: 0; background: url('/assets/gamer/haru-v1.png') center bottom / contain no-repeat; filter: drop-shadow(0 7px 8px #0009); }
.gamer-desk > .gamer-avatar { position: absolute; left: -8px; bottom: -8px; }
.gamer-avatar::before, .gamer-avatar::after, .gamer-avatar i { display: none; }
.prepare-identity { padding: 15px 0 18px; }.prepare-identity p { margin: 0; color: var(--muted); font-size: 12px; }.prepare-identity h3 { margin: 3px 0 7px; font-size: 26px; letter-spacing: -.04em; }
.gamer-prep-line { white-space: pre-line; line-height: 1.65; color: #d8cfb1 !important; }
.game-character-card { display: grid; gap: 2px; padding: 13px 0; border-block: 1px solid #424a38; }
.game-character-card > span { color: #a7af9a; font-size: 10px; letter-spacing: .11em; }
.game-character-card > b { color: var(--gold); font-size: 18px; }
.game-character-card > p { margin: 0; color: var(--muted); font-size: 11px; }
.prepare-destination { padding: 17px 0; border-block: 1px solid #424a38; }.prepare-destination span { display: block; color: #abac91; font-size: 11px; }.prepare-destination b { display: block; margin-top: 4px; color: var(--gold); font-size: 17px; }.prepare-destination p, .prepare-growth { color: var(--muted); font-size: 12px; line-height: 1.65; }.prepare-destination p { margin: 5px 0 0; }.prepare-growth { margin: 16px 0 0; }
.prepare-equipment { min-width: 0; padding: 21px 24px 16px; }
.prepare-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.prepare-section-heading h3 { margin: 0; font-size: 16px; }.prepare-section-heading > span { color: var(--gold); font-size: 12px; }
.prepare-library > .field-hint { margin: 5px 0 13px; font-size: 12px; }
.skill-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.preparation-skill { min-width: 0; margin: 0; padding: 13px 12px 10px; display: flex; flex-direction: column; align-items: stretch; text-align: left; border: 1px solid #535b45; border-top: 2px solid #999568; border-radius: 2px; background: linear-gradient(150deg, #293225, #1a241c); }
.preparation-skill[aria-pressed="true"] { border-color: #d4b475; background: #303724; }
.locked-skill { opacity: .62; }.locked-skill .skill-card-footer b { color: #b6a07a; }
.skill-card-heading { display: grid; grid-template-columns: 1fr; align-items: center; gap: 0 5px; }.skill-card-heading b { font-size: 14px; word-break: keep-all; }.skill-card-heading > small { color: #b7c5b6; font-size: 11px; }
.skill-card-description { display: block; margin: 12px 0 8px; color: #e0dfc8; font-size: 13px; line-height: 1.55; word-break: keep-all; }
.skill-card-numbers { margin-top: auto; color: #aeb69f; font-size: 11px; line-height: 1.5; }
.preparation-skill meter { width: 100%; height: 5px; margin: 13px 0 7px; accent-color: #c8b078; }
.preparation-skill meter::-webkit-meter-bar { border: 0; border-radius: 0; background: #3e4936; }.preparation-skill meter::-webkit-meter-optimum-value { background: #b8ab70; }
.skill-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 7px; font-size: 10px; }.skill-card-footer b { color: #d4bd8c; font-weight: 500; }.skill-card-footer small { color: #aeb69f; font-size: 10px; }
.discovery-note { padding-left: 10px; border-left: 2px solid #8a9064; margin: 13px 0 0; color: #b9bea6; font-size: 12px; }
.prepare-loadout { margin-bottom: 18px; }.selected-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }.selected-skills[data-slots="2"] { grid-template-columns: 1fr 1fr; }
.loadout-slot { display: grid; grid-template-columns: 32px 1fr; gap: 0 7px; padding: 9px 12px; text-align: left; background: #202b20; }.loadout-slot[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }.loadout-icon { grid-row: span 3; align-self: center; color: var(--gold); font-size: 26px; }.loadout-slot small { color: var(--muted); font-size: 10px; }.loadout-slot b { font-size: 14px; }
#prepareDialog .custom-setup { margin: 0; padding: 0; border: 0; }#prepareDialog summary { font-size: 12px; }#prepareDialog .custom-setup label { margin-top: 8px; }
.prepare-equipment { display: flex; flex-direction: column; gap: 14px; }
#regionSection { order: -6; }
.region-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.region-choice { display: grid; gap: 5px; min-width: 0; padding: 8px; text-align: left; background: #17211c; }
.region-choice canvas { width: 100%; height: auto; image-rendering: pixelated; }
.region-choice b { font-size: 14px; }
.region-choice small { color: var(--muted); font-size: 11px; }
.region-choice[aria-pressed="true"] { border-color: #e5c27d; box-shadow: inset 0 0 0 1px #e5c27d; }
.region-choice[aria-pressed="true"] b::after { content: ' ✓'; color: #e5c27d; }
.region-choice:disabled { opacity: .65; }
.region-choice:disabled canvas { filter: grayscale(.8) brightness(.65); }
.region-detail { display: grid; gap: 4px; margin-top: 9px; padding: 10px 12px; border: 1px solid #6d6045; border-left: 3px solid #d0ad6d; background: #202a20; }
.region-detail b { color: #eed49d; font-size: 14px; }
.region-detail small { color: #c0c8b4; font-size: 12px; line-height: 1.45; }
.region-reward-preview { display: block !important; margin-top: 3px; color: #5d351e !important; font-size: 12px !important; font-weight: 700; line-height: 1.35; }
.companion-card { display: grid; width: 100%; grid-template-columns: 76px 1fr; gap: 6px 12px; text-align: left; margin: 10px 0; align-items: center; }
.companion-card canvas { width: 76px; height: 76px; grid-row: span 2; image-rendering: pixelated; }
.companion-card small { color: var(--muted); }
#difficultyHint { margin: 0; }
#difficultyLabel { margin: 0 0 10px; font-size: 15px; }
.difficulty-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 9px; }
.difficulty-choice { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 12px 6px; border: 1px solid #71664b; background: linear-gradient(#2b3025, #161e18); }
.difficulty-sigil { color: #cdb47d; font: 25px Georgia, serif; }
.difficulty-choice b { font-size: 15px; }
.difficulty-choice small { color: #babba7; font-size: 11px; }
.difficulty-choice[aria-pressed="true"] { border-color: #ecc87e; box-shadow: inset 0 0 0 1px #ecc87e; background: linear-gradient(#45402a, #25291d); }
.difficulty-choice[aria-pressed="true"] small { color: #ffe2a2; }
.difficulty-choice:disabled { opacity: 1; border: 1px dashed #555b52; background: #141a17; cursor: not-allowed; }
.difficulty-choice:disabled :is(b, small, .difficulty-sigil) { color: #8f968c; }
.character-trait { margin: 0 0 16px; padding: 12px 0; border-top: 1px solid #424a38; }
.character-trait b { color: var(--gold); font-size: 14px; }
.character-trait p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 5px 0 0; }
.vitals #heroTrait { grid-column: 1 / -1; grid-row: 5; padding: 5px 7px; border-left: 2px solid #747761; background: #151e19; color: #b4bcaa; }
.vitals #heroTrait[data-ready="true"] { border-color: #efc773; background: #3c3420; color: #ffe4a0; }
.companion-card .character-trait-copy { grid-column: 2; color: #d5bd88; }
#difficultyRow { order: -5; margin: 0; }
#equipmentSection { order: -2; }
#equipmentSection h3 { margin: 0 0 10px; font-size: 16px; }
.prepare-library, .power-memory, #prepareBestiary { order: 2; }
.skill-entry { min-width: 0; }.skill-entry .preparation-skill { width: 100%; }
.mastery-stages { padding: 10px; border: 1px solid #424a38; border-top: 0; }.mastery-stages b, .mastery-stages small { display: block; margin-top: 8px; }.mastery-stages small { color: var(--muted); line-height: 1.6; }
.unknown-art { display: grid; place-items: center; min-height: 150px; font: 64px Georgia, serif; color: #9c9781; background: radial-gradient(ellipse, #293028, #131d18); }
.locked-skill { min-height: 240px; justify-content: start; opacity: .75; }.locked-skill > b, .locked-skill > small { padding: 8px 12px; }
#relicChoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
#relicChoices > :first-child { grid-column: 1 / -1; display: block; }
.lost-relic > span:not(.relic-art) { display: grid; place-items: center; aspect-ratio: 1; font: 64px Georgia, serif; }
.relic-choice { display: grid; gap: 6px; padding: 8px; text-align: center; align-content: start; }.relic-choice small { color: var(--muted); font-size: 11px; }.relic-art { display: block; width: 100%; aspect-ratio: 1; background-image: url('/assets/relics/relic-atlas-v14.png'); background-size: 400% 200%; background-repeat: no-repeat; }.lost-relic { opacity: .5; filter: grayscale(1); border: 1px solid #424a38; }
.departure-risk { order: 3; color: #e1b98c; padding: 10px 12px; border: 1px solid #75614d; font-size: 12px; line-height: 1.65; }#resultSummary { white-space: pre-line; line-height: 1.7; }
.character-level-result { display: grid; gap: 4px; margin: 8px 0 10px; padding: 9px; border-left: 3px solid var(--gold); background: #3a3420; color: #ead7a7; font-variant-numeric: tabular-nums; }
.character-level-result > b { color: #fff0bf; font-size: 14px; }.character-level-result > strong { color: #ffd674; font-size: 18px; }.character-level-result small { color: #d9cfb1; }.character-level-result progress { width: 100%; height: 6px; accent-color: #e1b85e; }
#prepareDialog[data-loadout="true"] .prepare-library { order: 2; }
.prepare-library > summary { gap: 8px; }
.prepare-library > summary #learnedCount { margin-left: auto; }
.growth-help { margin-top: 14px; }
#prepareVitals { color: #d8bc79; font-size: 17px; white-space: pre; }
.power-memory, .run-options { margin-top: 13px; border-top: 1px solid #424a38; }.power-memory summary { justify-content: flex-start; gap: 4px; }#powerCount { margin-left: auto; color: var(--muted); }
.discovered-powers { display: flex; flex-wrap: wrap; gap: 7px; }.power-record { display: grid; grid-template-columns: 25px 1fr; gap: 1px 6px; text-align: left; }.power-record > span { grid-row: span 2; color: var(--gold); font-size: 24px; }.power-record > b { font-size: 12px; }.power-record > small { color: var(--muted); font-size: 11px; }
.equipment-section, #difficultyRow { margin-top: 15px; padding-top: 12px; border-top: 1px solid #424a38; }.equipment-section h3 { margin: 0 0 8px; font-size: 15px; }.relic-choices { display: flex; flex-wrap: wrap; gap: 7px; }.relic-choice[aria-pressed="true"] { border-color: var(--gold); background: #333527; }.relic-choice[aria-pressed="true"]::after { content: ' ✓'; }
#prepareDialog #difficultyRow, #prepareDialog #equipmentSection { margin: 0; padding: 0; border: 0; }
#prepareDialog #relicHint:empty { display: none; }
#prepareDialog #equipmentSection > details { margin-top: 6px; }
#prepareDialog #prepareBestiary { align-self: flex-start; padding: 7px 12px; font-size: 13px; }
#prepareDialog .dialog-actions { bottom: 0; margin: 0; padding: 13px 24px; align-items: center; background: #222c21; border-top-color: #6d684a; }#prepareDialog .dialog-actions > p { flex: 1; margin: 0 auto 0 0; font-size: 11px; }#prepareDialog .dialog-actions button { flex-shrink: 0; }#prepareDialog .dialog-actions .primary { min-width: 152px; }
.camp-recap { order: 4; margin-top: 4px; border-top: 1px solid #424a38; }
.camp-recap > summary { font-size: 12px; }
.camp-recap .expedition-recap { margin-top: 10px; padding: 12px; }
.review-choices { display: grid; gap: 10px; }.review-choice { display: grid; gap: 5px; text-align: left; }.review-choice small { color: var(--muted); font-size: 14px; }
.record-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.record-score > div { padding: 12px; border: 1px solid var(--stone); background: linear-gradient(135deg, #344034, #19201d); }
.record-score strong, .record-score small { display: block; }.record-score strong { color: var(--gold); font-size: 19px; }
.record-moments { display: grid; gap: 18px; margin-top: 14px; }
.record-ending { padding: 12px; margin-block: 12px; border-left: 3px solid var(--gold); background: var(--panel); }
.record-ending h4 { margin: 0 0 6px; color: var(--gold); }.record-ending p { margin: 6px 0; }
.record-promises, .record-timing { margin-block: 10px; padding: 8px 10px; border: 1px solid var(--stone); overflow-wrap: anywhere; }
.record-promises p, .record-timing p { margin-block: 6px; }
#runProgress[data-urgent="true"] .status-pill:first-child { color: #ffe0c1; border-color: #b37646; background: #5c3426; }
.talk-attachment > small { display: block; padding: 6px; color: var(--muted); }
.talk-attachment .record-promises { margin: 4px; font-size: 12px; }
.record-moment { padding: 16px; border: 1px solid #756d50; background: linear-gradient(145deg, #293329, #151e19); }
.record-moment h4 { margin: 5px 0 14px; font-size: 21px; color: #efd4a1; }.record-moment p { margin: 8px 0; }
.record-moment > small { display: block; }.record-preview { margin: 0 0 14px; }
.record-preview .record-scene { width: min(100%, 440px); margin: 0 auto; }
.record-scene-tabs, .record-actions, .review-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.record-scene-tabs { margin-bottom: 8px; }.record-scene-tabs button { flex: 1; padding: 7px; font-size: 12px; }
.record-scene-tabs [aria-pressed="true"], .review-presets [aria-pressed="true"] { border-color: var(--gold); background: #424733; }
.record-actions { margin-top: 14px; }.record-actions .primary { flex: 1; }.record-history { margin: 18px 0; border-top: 1px solid var(--stone); padding-top: 12px; }
.review-presets button { flex: 1 1 120px; font-size: 12px; padding: 9px; }.review-editor { border-top: 1px solid var(--stone); padding-top: 14px; }.review-editor label { color: var(--gold); }.review-editor small { display: block; margin-bottom: 12px; color: var(--muted); }.review-editor > button { width: 100%; }
@media (max-width: 600px) { .record-moment { padding: 11px; }.record-score > div { padding: 8px; }.record-score strong { font-size: 15px; }.record-actions button { width: 100%; } }
#runList button { display: grid; gap: 6px; text-align: left; }
#runList button[aria-current="true"] { border-color: var(--gold); background: #343e30; }
.skill-token { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-color: #8d815e; background: #202a21; }.skill-token span { color: var(--gold); font-size: 20px; }.skill-token small { color: var(--muted); }
.packet-preview { max-height: 260px; overflow: auto; padding: 10px; background: #111b17; font: 13px/1.55 ui-monospace, monospace; white-space: pre-wrap; }

.gamer-sidebar { width: min(960px, 100%); margin-inline: auto; min-width: 0; }
.gamer-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 5px 12px; padding: 13px; border: 1px solid #55706a; border-top: 3px solid #6aa5a0; background: radial-gradient(circle at 20% 0, #2b4543, transparent 42%), #111b18; box-shadow: 0 8px 24px #0006; }
.gamer-avatar--small { grid-row: span 2; width: 64px; }
.gamer-card > div > span { color: #8fbdb5; font-size: 11px; letter-spacing: .07em; }
.gamer-card h2 { margin: 1px 0 0; font-size: 20px; }
.gamer-moment { grid-column: 1 / -1; margin-top: 7px; padding: 10px 11px; border-left: 3px solid #6aa5a0; background: #0d1715cc; }
.gamer-moment small { display: block; color: #8fbdb5; }
.gamer-moment p { margin: 3px 0 0; color: #eee4cc; line-height: 1.6; }
.gamer-card > details { grid-column: 1 / -1; border-top: 1px solid #42534d; }
.gamer-card > details summary { padding-top: 7px; font-size: 12px; }
.gamer-card > details p { margin: 5px 0; color: #bcc8b9; font-size: 12px; }
.gamer-card .gamer-avatar--small { width: 76px; grid-row: auto; }
.gamer-card { grid-template-columns: 76px minmax(0, 1fr); align-items: center; }
.gamer-moment { position: relative; border: 1px solid #496d61; border-radius: 3px 12px 12px; margin-top: 0; }
.gamer-moment::before { content: ''; position: absolute; top: -7px; left: 25px; width: 12px; height: 12px; background: #14221d; border-top: 1px solid #496d61; border-left: 1px solid #496d61; transform: rotate(45deg); }
.gamer-moment p { max-height: 9.6em; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-line; }
.battle-command { grid-column: 1 / -1; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; margin-top: 9px; padding: 11px; border: 1px solid #887348; background: linear-gradient(125deg, #403a22, #1a2119 75%); }
.command-art { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #a18b5b; background: radial-gradient(#58634b, #171e18); color: #f8e3a8; font-size: 34px; }
.command-art img { width: 82%; height: 82%; object-fit: contain; }
.command-copy { min-width: 0; }.command-copy strong, .command-copy small { display: block; overflow-wrap: anywhere; }
.command-copy strong { font-size: 16px; line-height: 1.45; color: #fff0c9; }.command-copy small { color: #c4bc9f; font-size: 11px; }
.command-target { width: 42px; height: 54px; }.command-target > * { display: block; width: 100%; height: 100%; object-fit: contain; }
.command-target .bestiary-illustration { mix-blend-mode: normal; image-rendering: pixelated; }
.decision-context { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }.decision-context .status-pill { padding: 2px 6px; font-size: 10px; background: #101b16; border-color: #59634c; }
.decision-history { grid-column: 1 / -1; width: 100%; min-width: 0; margin-top: 9px; }.decision-history:has(> [hidden]) { display: none; }
.decision-history > span { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; color: #d2c9ae; font-size: 12px; }.decision-history > span small { color: #9cae9e; font-size: 10px; }
#decisionHistory { display: flex; gap: 6px; margin-top: 6px; }.decision-step { position: relative; flex: 1; min-width: 0; min-height: 48px; padding: 3px; border-color: #465647; }
.decision-step .command-art { width: 100%; height: 35px; border: 0; background: none; font-size: 25px; }.decision-step .command-art img { width: 28px; height: 28px; }.decision-step small { display: block; color: #c0bda5; font-size: 10px; }
.decision-step[aria-current="step"] { border-color: #dab771; background: #384534; box-shadow: inset 0 -2px #dab771; }
.skill-token[data-commanded="true"] { border-color: #dab771; box-shadow: inset 0 2px #dab771; }
#reviewChoices > .record-preview { grid-column: 1 / -1; min-width: 0; }
#battleInfo { grid-column: 1 / -1; min-width: 0; }#battleInfo > summary { cursor: pointer; font-size: 12px; color: #c8bd9c; }#battleInfo > span { display: flex; flex-wrap: wrap; margin-top: 12px; }#battleInfo > p { font-size: 13px; line-height: 1.6; }#battleInfo > small { display: block; }
.gamer-sidebar .decision { width: 100%; margin: 10px 0 0; }
body[data-scene="dungeon"] .scene-area { animation: dive-into-game .32s ease-out both; }
@keyframes dive-into-game { from { opacity: .25; transform: scale(.97); filter: brightness(.55); } to { opacity: 1; transform: scale(1); filter: none; } }

.loadout-slot { grid-template-columns: 48px minmax(0, 1fr); position: relative; border-top: 2px solid #8e865f; background: linear-gradient(120deg, #30392a, #18241f); }
.loadout-slot[aria-pressed="true"] { background: linear-gradient(120deg, #4c452c, #242e21); border-color: #e0c481; }
.loadout-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #7a8060; background: radial-gradient(var(--art-bg, #354a3f), #101915); }
.loadout-icon img { width: 36px; height: 36px; filter: drop-shadow(0 0 5px var(--art-glow, #adbd94)); }
.collection-secrets { margin-top: 12px; padding: 4px 12px 8px; border: 1px dashed #62654d; background: repeating-linear-gradient(135deg, #ffffff02 0 1px, transparent 1px 9px), #121c17; }
.collection-secrets > summary { color: #c2baa0; font-size: 12px; }
.sealed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 7px; padding-block: 8px; }
.sealed-slot { display: grid; place-items: center; min-height: 48px; border: 1px solid #505a47; color: #9da68b; background: radial-gradient(#344033, #1b261e); font: 24px Georgia, serif; }
#missingRelicChoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); margin-top: 8px; }
#missingRelicChoices .lost-relic > span:not(.relic-art) { min-height: 70px; aspect-ratio: auto; font-size: 36px; }
#missingRelicChoices .relic-art { width: min(100%, 80px); justify-self: center; }
#relicChoices > :first-child { padding: 16px 12px; border-style: dashed; color: #c6c5a9; background: #162119; }
#skillPortrait .skill-art { height: 170px; border: 1px solid #807558; }
#skillPortrait .skill-art img { width: 112px; height: 112px; }
.skill-facts { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 14px; border-top: 1px solid #576047; }
.skill-facts .status-pill { border-radius: 3px; padding: 7px 10px; font-size: 13px; }
#skillDescription { color: #d9dfcb; line-height: 1.75; }

.journal-layout { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 18px; }.journal-layout nav { padding-right: 12px; border-right: 1px solid var(--stone); }.journal-layout nav button { display: block; width: 100%; margin-bottom: 7px; text-align: left; }.journal-layout nav small, #runDetail small { color: var(--muted); }.event, #versionList article { padding: 11px 0; border-top: 1px solid var(--stone); }.event p, #versionList article p { margin: 4px 0; color: var(--muted); }.comparison-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }.comparison-controls label { flex: 1 1 180px; }

@media (max-width: 820px) {
  .game { padding: 14px 16px 24px; }.scene-area { width: 100%; }
  .prepare-layout { grid-template-columns: 176px minmax(0, 1fr); }.prepare-equipment { padding: 18px; }
}


@media (max-width: 820px) {
  .talk-dialog { overflow: auto; }
  .talk-layout { grid-template-columns: 1fr; max-height: none; }
  .talk-character { display: grid; grid-template-columns: 100px minmax(0, 1fr); justify-content: initial; padding: 12px; border-right: 0; border-bottom: 1px solid #5c543c; background-position: left center; }
  .talk-character .gamer-avatar { grid-row: span 2; width: 100px; margin: 0; }
  .talk-character > button { grid-column: 2; }
  .talk-evidence { grid-template-columns: 1fr; }
  .talk-focus-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talk-rule-list > article { grid-template-columns: 30px minmax(0, 1fr); }
  .talk-rule-flow, .talk-rule-list > article > em { grid-column: 2; }
}

@media (max-width: 560px) {
  .game { gap: 11px; }.game-brand b { font-size: 16px; }.game-brand > span { font-size: 25px; }.header-actions button:first-child { padding-inline: 9px; font-size: 13px; }
  .scene-heading { align-items: start; }.location h1 { font-size: 27px; }.location p:last-child { font-size: 13px; }.vitals { width: 150px; padding: 8px; }.vitals > b { font-size: 13px; }.vitals > div { grid-template-columns: 20px minmax(40px, 1fr) 40px; gap: 4px; font-size: 12px; }
  .scene-area { aspect-ratio: 16 / 9; } body[data-scene="dungeon"] .scene-area { aspect-ratio: 11 / 9; } body[data-phase="route"] .scene-area, body[data-phase="camp"] .scene-area, body[data-phase="reward"] .scene-area { width: 100%; aspect-ratio: 11 / 3; }.mission-bar { top: 5px; left: 5px; width: calc(100% - 10px); padding: 4px 6px; font-size: 11px; }.mission-bar small { font-size: 10px; }.decision { grid-template-columns: 1fr; }.adventure-info { grid-column: 1; grid-row: auto; width: 100%; margin-top: 8px; }.vitals { display: block; }.vitals small { display: block; }.dev-badge { right: 7px; bottom: 7px; }
  .battle-controls { gap: 8px; }.skill-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }.playback { grid-template-columns: repeat(5, minmax(0, 1fr)); }.playback button { padding-inline: 4px; font-size: 12px; }.camp-controls { align-items: stretch; flex-direction: column; }.camp-controls .primary { width: 100%; }
  dialog { padding: 16px; }.dialog-header h2 { font-size: 20px; }.dialog-actions { bottom: -16px; margin: 16px -16px -16px; padding: 10px 16px; }.dialog-actions button { flex: 1; }
  .journal-layout { grid-template-columns: 1fr; }.journal-layout nav { max-height: 180px; overflow: auto; padding: 0; border-right: 0; }
}

@media (max-width: 560px) {
  #prepareDialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }#prepareDialog .dialog-header { padding: 14px 16px; }#prepareDialog .dialog-header h2 { font-size: 22px; }
  .selected-skills, .selected-skills[data-slots="2"] { grid-template-columns: 1fr; }
  .loadout-slot { grid-template-columns: 48px minmax(0, 1fr); }
  #choiceCandidates.choice-cards { grid-template-columns: 1fr; }
  .reward-option > .skill-art { height: 120px; }.reward-option > .skill-art img { width: 88px; height: 88px; }.preparation-skill > .skill-art { height: 100px; }.preparation-skill > .skill-art img { width: 76px; height: 76px; }
  .thinking-badge { left: 7px; bottom: 7px; padding: 5px 7px; }.thinking-badge span { display: none; }
  .prepare-layout { grid-template-columns: 1fr; }.prepare-adventurer { display: grid; grid-template-columns: 105px 1fr; gap: 10px 14px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid #424a38; align-items: center; }.prepare-identity { padding: 0; }.prepare-identity h3 { font-size: 22px; margin: 0 0 2px; }.prepare-identity p { font-size: 11px; }
  .gamer-desk { grid-column: 1 / -1; min-height: 170px; }.gamer-desk > .gamer-avatar { width: 92px; }.game-character-card { grid-column: 1 / -1; }
  .prepare-destination { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 0 0; border-bottom: 0; }.prepare-destination b { margin: 0; font-size: 13px; }.prepare-destination p { display: none; }.prepare-growth { grid-column: 1 / -1; margin: 0; font-size: 11px; }
  .prepare-equipment { padding: 16px; }.skill-choices { grid-template-columns: 1fr; }.preparation-skill { padding: 12px; }.skill-card-heading { grid-template-columns: 1fr auto; }.skill-card-description { margin: 7px 0; }.skill-card-heading b { font-size: 15px; }
  .preparation-skill meter { margin-top: 9px; }.skill-card-footer { font-size: 11px; }.skill-card-footer small { font-size: 11px; }
  #prepareDialog .dialog-actions { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }#prepareDialog .dialog-actions > p { flex-basis: 100%; }#prepareDialog .dialog-actions button { flex: 1; }#prepareDialog .dialog-actions .primary { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.decision-details { grid-column: 1 / -1; margin-top: 8px; color: #adb5a0; font-size: 12px; }
.decision-details summary { cursor: pointer; padding: 6px 0; }
.decision-details p { line-height: 1.6; white-space: pre-line; }
.tactical-goal { color: #dfcd90; }
#decisionText,
#reasonText,
#choiceResult,
#resultSummary {
  white-space: pre-line;
  line-height: 1.55;
}
#resultSummary:empty, #tacticalGoal:empty { display: none; }

/* Let content shrink within grids, while controls and labels remain readable. */
.game > *, .prepare-layout > *, .prepare-adventurer > *, .journal-layout > *, .book-spread > *, .dialog-header > div { min-width: 0; }
.dialog-header .icon-button { flex-shrink: 0; }
.loadout-slot, .skill-card-heading, .companion-card { min-width: 0; }
input, textarea, select { min-width: 0; }
.book-portrait > .bestiary-illustration, .book-portrait > .bestiary-seal { max-width: 100%; }
.book-pagination { gap: 8px; }
.combat-details { border-top: 1px solid var(--stone); }
.combat-details > :is(small, p) { display: block; margin: 6px 10px; font-size: 12px; }
.combat-details #executionCounts { display: flex; margin-bottom: 10px; }
.hero-trait[data-ready="true"] { color: #ffe4a0; }
.skill-thumb { position: relative; }
.cooldown-count { position: absolute; inset: 0; display: grid; place-items: center; background: #10202be6; color: #ffe6b0; font: bold 18px Georgia, serif; }
.skill-bar button[data-mana="low"] { border-style: dashed; border-color: #729bb4; }
.skill-bar button[data-mana="low"] > small { color: #a8d9f5; }
.reward-option[data-route="safe"] { border-color: #8fbfa0; background: linear-gradient(#2b4033, #14231d); }
.reward-option[data-route="risky"] { border-color: #d89971; background: linear-gradient(#4b3227, #261b19); }
.reward-option[data-route] > strong { display: block; margin-top: 12px; padding: 8px; border-top: 1px solid currentColor; color: #b8dfbe; font-size: 12px; }
.reward-option[data-route="risky"] > strong { color: #ffd1a9; }
.choice-panel:has(.route-map:not([hidden])) #choiceCandidates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-map { margin-bottom: 0; border-bottom: 0; }
.recent-choice { padding: 9px; border-left: 3px solid var(--gold); background: #273326; }
.expedition-recap { grid-column: 1 / -1; width: min(960px, 100%); margin-inline: auto; padding: 18px; border: 1px solid #9b8860; background: radial-gradient(ellipse at top, #42432b55, transparent), #18221d; }
.expedition-recap > header { border-bottom: 1px solid #62674b; padding-bottom: 12px; margin-bottom: 12px; }
.expedition-recap h2 { margin: 4px 0; font-size: 26px; color: #eddb9f; }
.expedition-recap > header > small { color: #b4bea1; letter-spacing: .12em; }
.expedition-recap > header > p { margin: 0; color: var(--muted); }
.expedition-recap[data-outcome="game_failure"] h2 { color: #edb099; }
.recap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.recap-cards > article { padding: 12px; border: 1px solid #56684f; border-top: 3px solid #89b397; background: #101b17; min-width: 0; }
.recap-cards > [data-kind="secured"] { border-top-color: #e1c278; }
.recap-cards > [data-kind="loss"] { border-top-color: #bd8570; }
.recap-cards h3 { margin: 0 0 12px; font-size: 15px; }
.recap-cards p { font-size: 13px; color: #c6cfba; }
.recap-item { display: flex; align-items: center; gap: 8px; }
.recap-item .relic-art { width: 32px; flex-shrink: 0; }
.book-pagination button { flex-shrink: 0; padding-inline: 10px; }
#prepareVitals { white-space: pre-wrap; }
body[data-scene="dungeon"] .scene-area { display: flex; flex-direction: column; aspect-ratio: auto; }
body[data-scene="dungeon"] #world { position: static; height: auto; aspect-ratio: 11 / 9; }
body:is([data-phase="route"], [data-phase="camp"], [data-phase="reward"]) #world { aspect-ratio: 11 / 3; }
.mission-bar { position: static; order: -1; width: 100%; border: 0; border-bottom: 1px solid #736347; }

@media (max-width: 820px) {
  .prepare-layout { grid-template-columns: minmax(0, 1fr); }
  .prepare-adventurer { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 14px 16px; border-right: 0; border-bottom: 1px solid #424a38; }
  .prepare-identity { padding: 0; }
  .prepare-adventurer > :is(.gamer-desk, .game-character-card, .character-trait, .prepare-destination, .growth-help) { grid-column: 1 / -1; margin: 0; }
  .character-trait { padding: 10px 0 0; }
  .skill-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp-controls { flex-wrap: wrap; }
  .camp-controls > div { flex-basis: 100%; }
}

@media (max-width: 560px) {
  .game { align-content: start; padding: 12px 12px max(20px, env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .game-brand { flex-shrink: 0; }
  .camp-controls { flex-wrap: nowrap; }
  .camp-controls > div { flex-basis: auto; }
  .game-brand b, .header-actions button, .header-actions summary { white-space: nowrap; }
  .header-actions { margin-left: auto; }
  .scene-heading { flex-direction: column; gap: 10px; }
  .vitals { width: 100%; display: grid; gap: 5px 8px; }
  .vitals > b { grid-column: 1 / -1; }
  .vitals > div { grid-template-columns: 22px minmax(0, 1fr) 48px; }
  .status-pill { padding: 2px 7px; }
  .skill-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-bar .skill-token { overflow-wrap: anywhere; }
  .skill-bar .skill-token > small { overflow-wrap: anywhere; }
  .playback { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skill-choices { grid-template-columns: minmax(0, 1fr); }
  .region-choices { grid-template-columns: minmax(0, 1fr); }
  .region-choice { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .region-choice canvas { grid-row: span 2; }
  .region-choice b, .region-choice small { grid-column: 2; }
  #relicChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-card-heading { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .prepare-section-heading { flex-wrap: wrap; }
  #prepareDialog .dialog-actions { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .dialog-actions button { flex: 1 1 110px; }
  input, textarea, select { font-size: 16px; }
  .book-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .book-pagination { margin-top: 14px; }
  .recap-cards { grid-template-columns: minmax(0, 1fr); }
  .prepare-header-actions { gap: 4px; }.prepare-header-actions button:not(.icon-button) { padding-inline: 7px; }
  .gamer-card { grid-template-columns: 48px minmax(0, 1fr); padding: 10px; }.gamer-avatar--small { width: 48px; }.gamer-card h2 { font-size: 17px; }.gamer-moment { padding: 8px; }.gamer-moment p { font-size: 13px; }
  body[data-scene="dungeon"] .game { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  body[data-scene="dungeon"] .game-brand > span, body[data-scene="dungeon"] .game-brand small { display: none; }
  body[data-scene="dungeon"] .game-brand b { font-size: 13px; letter-spacing: .04em; }
  body[data-scene="dungeon"] .game-header { gap: 5px; }
  body[data-scene="dungeon"] .header-actions { gap: 4px; }
  body[data-scene="dungeon"] .header-actions button:first-child { font-size: 12px; padding-inline: 6px; }
  body[data-scene="dungeon"] .location h1 { font-size: 22px; }
  body[data-scene="dungeon"] .scene-heading { gap: 6px; }
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitals > div { grid-column: auto; grid-row: 2; grid-template-columns: 18px minmax(20px, 1fr) 40px; }
  .vitals #runProgress { grid-row: 3; }
  body[data-scene="dungeon"] .playback { position: fixed; z-index: 15; bottom: 0; left: 0; right: 0; gap: 5px; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 10px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--gold); background: #16221bf5; box-shadow: 0 -5px 20px #0006; }
  body[data-scene="dungeon"] .playback:has(#retryRun:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .playback button { font-size: 11px; padding: 5px 2px; }
  .choice-panel:has(.route-map:not([hidden])) #choiceCandidates { grid-template-columns: minmax(0, 1fr); }
}

/* The room is the home screen. Preparation opens separately as a functional whiteboard. */
body[data-scene="camp"] .scene-area {
  width: min(100%, 1180px, calc(64dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  border-color: #66766f;
  background: url('/assets/gamer/haru-room-v2.png') center / cover no-repeat;
  box-shadow: 0 18px 60px #000a;
}
body[data-scene="camp"] #world { opacity: 0; }
.room-hotspots { position: absolute; z-index: 2; inset: 0; }
.room-art, .room-departure { display: contents; }
#roomPreparation { display: none; }
#settingsDialog .audio-controls { margin-top: 16px; }
#settingsDialog .audio-controls summary { min-height: 44px; }
#settingsDialog .audio-panel { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
.room-hotspot { position: absolute; min-width: 0; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; }
.room-hotspot:hover:not(:disabled), .room-hotspot:focus-visible { border-color: transparent; outline: 0; background: transparent; box-shadow: none; }
.room-hotspot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border: 2px solid #d8c891; border-radius: 50%; background: #0b1916cc; box-shadow: 0 0 9px #ecd48399; }
.room-hotspot::after { content: attr(data-label); position: absolute; left: 50%; bottom: 7px; width: max-content; max-width: calc(100% - 8px); padding: 4px 8px; transform: translateX(-50%) translateY(4px); border: 1px solid #79a096; background: #06120ff2; color: #f5ead2; font-size: 11px; line-height: 1.25; opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.room-hotspot:hover:not(:disabled)::before, .room-hotspot:focus-visible::before { background: #dac77c; box-shadow: 0 0 0 4px #e4ce7c2b, 0 0 16px #ecd483cc; }
.room-hotspot:hover:not(:disabled)::after, .room-hotspot:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.room-hotspot--haru { left: 4%; top: 12%; width: 34%; height: 78%; }
.room-hotspot--monitor { left: 39%; top: 22%; width: 29%; height: 43%; }
.room-hotspot--whiteboard { left: 72%; top: 3%; width: 23%; height: 45%; }
.room-hotspot--bestiary { left: 84%; top: 70%; width: 15%; height: 26%; }
.room-hotspot--companions { left: 72%; top: 67%; width: 11%; height: 26%; color: #f0e7d0; font-size: 11px; }
.room-start { position: absolute; z-index: 3; left: 52%; top: 67%; width: 16%; min-width: 118px; min-height: 44px; transform: translateX(-50%); border-color: #f0ce80; background: #c6a667ed; color: #161b16; font-weight: 800; box-shadow: 0 7px 22px #0009; }
.room-start:hover:not(:disabled), .room-start:focus-visible { background: #dfbf79; }

.talk-dialog { width: min(1180px, calc(100% - 24px)); max-width: none; padding: 0; overflow: hidden; border-color: #896f3f; background: #111915; box-shadow: 0 24px 90px #000e; }
.talk-dialog[open], #prepareDialog[open] { animation: room-focus-in 220ms ease-out both; }
@keyframes room-focus-in { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
.talk-dialog::backdrop { background: radial-gradient(circle at 24% 45%, #20352dcc, #030707f2 68%); }
.talk-dialog .dialog-header { margin: 0; padding: 17px 22px; border-bottom-color: #665b3e; background: linear-gradient(90deg, #202a21, #131b17); }
.talk-dialog .dialog-header h2 { font-size: 27px; }
.talk-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); min-height: 590px; max-height: calc(100dvh - 150px); }
.talk-character { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; padding: 24px 19px; border-right: 2px solid #5c543c; background: radial-gradient(circle at 50% 24%, #25463e99, transparent 32%), linear-gradient(#101a18aa, #07100eed), url('/assets/gamer/haru-room-v2.png') 9% center / auto 100%; }
.talk-character .gamer-avatar { width: min(235px, 92%); margin-top: auto; }
.talk-bubble { position: relative; width: 100%; margin: 0; padding: 13px 15px; border: 1px solid #8b7d59; border-radius: 14px 14px 14px 3px; background: #17251ff2; box-shadow: 0 10px 25px #0008; color: #f4ead1; font-size: 16px; line-height: 1.55; }
.talk-bubble::before { content: ''; position: absolute; left: 24px; bottom: 100%; border: 9px solid transparent; border-bottom-color: #8b7d59; }
.talk-character > button { width: 100%; }
.strategy-workbench { min-width: 0; overflow: auto; padding: 19px 22px 22px; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 29px), radial-gradient(circle at 80% 0, #2f3f3299, transparent 34%), #182019; box-shadow: inset 0 0 55px #0008; }
.talk-evidence { display: grid; grid-template-columns: minmax(160px, .9fr) minmax(240px, 1.1fr); align-items: center; gap: 16px; min-height: 150px; padding: 13px 15px; border: 1px solid #7a6d4b; background: #101713c7; }
.talk-evidence > div:first-child { display: grid; gap: 5px; }.talk-evidence span, .talk-section-heading span, .talk-playbook header span { color: #ba9d62; font-size: 10px; letter-spacing: .11em; }.talk-evidence b { color: #f0d49a; font-size: 20px; }.talk-evidence small { color: #aeb5a5; line-height: 1.5; }
.talk-replay:empty { min-height: 120px; border: 1px dashed #4c594c; background: radial-gradient(circle, #253429, #111914); }
.talk-replay .record-preview { margin: 0; }.talk-replay .record-scene-tabs { display: none; }.talk-replay .record-scene { display: block; width: 100%; height: 138px; object-fit: cover; border: 1px solid #6f6548; }
.talk-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 18px 0 9px; }.talk-section-heading h3, .talk-playbook h3 { margin: 3px 0 0; font-size: 18px; }.talk-section-heading > small { max-width: 260px; color: #a8b0a2; font-size: 11px; text-align: right; }
.talk-focus-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.talk-focus { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 2px 8px; min-width: 0; min-height: 68px; padding: 9px 10px; text-align: left; border-color: #526052; background: linear-gradient(145deg, #243127, #121a16); }
.talk-focus > span { grid-row: span 2; color: #d7b768; font-size: 27px; text-align: center; }.talk-focus > b { font-size: 13px; }.talk-focus > small { min-width: 0; overflow: hidden; color: #aeb6a7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.talk-focus[aria-pressed="true"] { border-color: #66c9be; background: linear-gradient(145deg, #24443c, #182821); box-shadow: inset 0 0 0 1px #66c9be, 0 0 18px #4dbdb13b; }.talk-focus[aria-pressed="true"] > span { color: #8fe8dd; }
.talk-playbook { margin-top: 18px; padding-top: 14px; border-top: 1px solid #5f5b42; }.talk-playbook > header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 9px; }.talk-playbook header b { color: #dbc17f; }
.talk-rule-list { display: grid; gap: 7px; }
.talk-rule-list > article { display: grid; grid-template-columns: 30px 128px minmax(0, 1fr) 100px; align-items: center; gap: 8px; min-height: 69px; padding: 8px 10px; border: 1px solid #6a6248; background: #e4dcc4; color: #282b24; box-shadow: 0 3px 0 #514a37; }
.talk-rule-list > article > strong { display: grid; place-items: center; width: 25px; height: 31px; background: #b39355; color: #171b17; font-size: 17px; }.talk-rule-list > article > b { font-size: 13px; }.talk-rule-list > article > em { color: #655c45; font-size: 10px; font-style: normal; text-align: right; }
.talk-rule-list > article[data-empty="true"] { min-height: 48px; border-style: dashed; background: #2a3028; color: #aeb3a5; box-shadow: none; }.talk-rule-list > article[data-empty="true"] > strong { background: #4c5146; color: #ccd0c4; }.talk-rule-list > article[data-empty="true"] > small { grid-column: 3 / -1; }
.talk-rule-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; min-width: 0; }.talk-rule-flow > span { position: relative; display: grid; gap: 2px; min-width: 0; }.talk-rule-flow > span:not(:last-child)::after { content: '→'; position: absolute; left: calc(100% + 4px); top: 12px; color: #7f7150; }.talk-rule-flow i { color: #77633c; font-size: 9px; font-style: normal; font-weight: 700; }.talk-rule-flow small { overflow: hidden; color: #30362f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.talk-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 13px 22px; border-top: 1px solid #645839; background: #0d1512; }.talk-actions .primary { min-width: 165px; }

@media (max-width: 900px) {
  .talk-dialog { overflow: auto; }
  .talk-layout { grid-template-columns: 1fr; min-height: 0; max-height: none; }
  .talk-character { display: grid; grid-template-columns: 110px minmax(0, 1fr); justify-content: initial; padding: 12px 16px; border-right: 0; border-bottom: 1px solid #5c543c; background-position: left center; }
  .talk-character .gamer-avatar { grid-row: span 2; width: 110px; margin: 0; }
  .talk-character > button { grid-column: 2; }
  .talk-focus-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body[data-scene="camp"] .scene-area { aspect-ratio: 16 / 9; background-position: center; }
  #prepareDialog { width: calc(100% - 12px); }
  .prepare-equipment { max-height: none; overflow: visible; padding: 18px 16px 80px; }
}

@media (max-width: 560px) {
  .room-hotspot::before { width: 7px; height: 7px; }.room-hotspot::after { padding: 3px 5px; font-size: 9px; }
  .room-start { left: 51%; top: 67%; width: 26%; min-width: 104px; min-height: 38px; padding: 5px 7px; font-size: 11px; }
  .talk-character { grid-template-columns: 78px minmax(0, 1fr); padding: 9px; }
  .talk-character .gamer-avatar { width: 78px; }
  .talk-bubble { padding: 8px 10px; font-size: 13px; }
  .strategy-workbench { padding: 13px 11px 16px; }
  .talk-focus-choices { grid-template-columns: 1fr; }
  .talk-section-heading > small { display: none; }
  .talk-rule-flow { grid-template-columns: 1fr; gap: 4px; }
  .talk-rule-flow > span:not(:last-child)::after { display: none; }
  #prepareDialog .dialog-actions { margin-top: -62px; }
  #prepareDialog .prepare-equipment { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  #prepareDialog :is(.prepare-library, #equipmentSection, #departureRisk, .power-memory) { grid-column: 1 / -1; }
  #prepareDialog .selected-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #prepareDialog .loadout-slot { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 7px 3px; text-align: center; }
  #prepareDialog .loadout-icon { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .talk-dialog[open], #prepareDialog[open] { animation: none; }
}

/* Final game-screen alignment: the room, board, replay and bestiary share one world. */
.talk-conversation { margin-top: 14px; }
.talk-coach-bubble { width: fit-content; max-width: 78%; margin: 0 0 10px auto; padding: 10px 13px; border: 1px solid #a9874e; border-radius: 12px 12px 3px 12px; background: #3a2d1d; color: #f4e6c8; }
.talk-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 12px; border: 1px solid #6d6549; background: #0f1713; }
.talk-compose label { grid-column: 1 / -1; margin: 0; color: #d4bd82; font-size: 12px; }
.talk-compose textarea { min-height: 72px; margin: 0; border-color: #697461; background: #17221c; font-size: 14px; line-height: 1.55; }
.talk-compose button { height: 42px; }
.talk-advanced { margin-top: 14px; border-top: 1px solid #5f5b42; }
.talk-advanced > summary { padding: 12px 2px; color: #d8c48e; font-size: 13px; }
.talk-advanced > summary span { margin-left: auto; color: #aeb6a7; }
.talk-advanced .talk-section-heading { margin-top: 4px; }

/* A live scrapbook: only the paper is an image; every scene and note is recorded data. */
#journalDialog {
  --ink: #382d24; --muted: #6c5945; --gold: #745024; --stone: #ac9570; --panel: #ead7b2;
  color-scheme: light; color: var(--ink); word-break: keep-all; width: min(1240px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  height: min(940px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden;
  border: 7px solid #49392b; border-radius: 12px; background: #eee0c4 url('/assets/journal/parchment-v1.png') center / cover;
  box-shadow: 0 0 0 2px #ab8b50, 0 5px 0 #a69575, 0 9px 0 #49392b, 0 24px 70px #0009;
}
#journalDialog[open] { display: flex; flex-direction: column; }
#journalDialog::backdrop { background: #100e0cca; backdrop-filter: blur(5px); }
#journalDialog .dialog-header { flex-shrink: 0; margin: 0; padding: 14px 24px; border-bottom: 1px solid #a38a6266; background: #ac8a4920; }
#journalDialog .dialog-header p { margin: 0 0 2px; color: #725d3d; font-size: 12px; letter-spacing: .14em; }
#journalDialog .dialog-header h2 { color: #382d24; font-family: "Nanum Myeongjo", "AppleMyungjo", Georgia, serif; font-size: 26px; }
#journalDialog button { color: #443324; border-color: #a99067; background: #f5e8cc; box-shadow: 0 2px 0 #ae956d66; }
#journalDialog button:hover { background: #ead3a6; }
#journalDialog button:focus-visible, #journalDialog summary:focus-visible { outline: 3px solid #276c70; outline-offset: 3px; }
#journalDialog .primary { background: #234f4c; color: #fff0ca; border: 2px solid #a98b52; }
#journalDialog .primary:hover { background: #316662; }
#journalDialog > #versionsOpen { display: none; }
#journalDialog .journal-layout { display: grid; grid-template-columns: 116px minmax(0, 1fr); flex: 1; min-height: 0; gap: 0; }
#journalDialog #runList { display: flex; flex-direction: column; gap: 10px; max-height: none; padding: 14px 6px 20px 8px; overflow: auto; border-right: 1px solid #a9906777; background: #544837; }
#journalDialog #runList button { flex: 0 0 auto; display: grid; gap: 3px; margin: 0; width: 100%; padding: 5px 5px 10px; text-align: center; color: #f8e8c7; background: #263e40; border: 1px solid #8b8b70; border-radius: 3px 3px 10px 3px; box-shadow: 1px 3px 4px #0005; }
#journalDialog #runList canvas { display: block; width: 100%; height: 47px; object-fit: cover; image-rendering: pixelated; border: 1px solid #b3a06b; }
#journalDialog #runList b { font-size: 14px; }
#journalDialog #runList small { color: #d0c1a3; font-size: 11px; }
#journalDialog #runList span { color: #f6d39b; font-size: 11px; overflow-wrap: anywhere; }
#journalDialog #runList button[aria-current="true"] { color: #352619; border-color: #ffe0a0; background: #b99450; outline: 2px solid #f7d68b; outline-offset: -3px; }
#journalDialog #runList button[aria-current="true"] :is(small, span) { color: #382715; }
#journalDialog #runDetail { min-width: 0; min-height: 0; padding: 0 24px 24px; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
#journalDialog .record-spread { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
#journalDialog .record-overview { min-width: 0; padding: 22px 25px 24px 0; border-right: 1px solid #91744c66; box-shadow: 8px 0 12px -12px #55381c; }
#journalDialog .record-scene-page { min-width: 0; padding: 22px 0 24px 28px; }
#journalDialog :is(.record-overview, .record-scene-page) > h3 { margin: 3px 0 17px; font: bold 25px/1.4 "AppleMyungjo", Georgia, serif; color: #433222; }
#journalDialog .record-route { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0 18px; padding: 0; list-style: none; }
#journalDialog .record-route li { position: relative; flex: 1; text-align: center; padding: 5px 0 2px; border: 1px dashed #a18b66; color: #9a8565; font-size: 22px; background: #8261370b; }
#journalDialog .record-route li[data-reached="true"] { border: 1px solid #8e7950; color: #47614c; background: #59664619; }
#journalDialog .record-route li + li::before { content: '›'; position: absolute; left: -10px; top: 12px; color: #735a35; font-size: 16px; }
#journalDialog .record-route small { display: block; font-size: 11px; }
#journalDialog .record-stamp { display: table; margin: 10px auto 22px; padding: 5px 13px; border: 3px double #9b5a44; color: #92482e; font-size: 16px; transform: rotate(-3deg); }
#journalDialog .record-stamp[data-outcome="victory"] { color: #356248; border-color: #47764f; }
#journalDialog .record-photo { position: relative; margin: 0 0 20px; padding: 7px 7px 10px; background: #f8eed8; box-shadow: 1px 3px 6px #62462144; transform: rotate(-1.5deg); }
#journalDialog .record-photo::before { content: ''; position: absolute; z-index: 1; left: -9px; top: -4px; width: 50px; height: 17px; background: #c5a67090; transform: rotate(-28deg); }
#journalDialog .record-photo canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
#journalDialog .record-photo figcaption { padding-top: 9px; text-align: center; color: #624e39; font-size: 13px; }
#journalDialog .record-overview > h4 { margin: 14px 0 8px; font-size: 13px; color: #6c5945; }
#journalDialog .record-keepsakes { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
#journalDialog .record-keepsakes figure { display: grid; justify-items: center; align-content: start; flex: 1 1 55px; gap: 5px; margin: 0; padding: 7px 4px; border: 1px solid #ac957077; background: #f6e6c375; }
#journalDialog .record-keepsakes :is(.skill-thumb, .relic-art) { width: 42px; height: 42px; }
#journalDialog .record-keepsakes img { width: 100%; height: 100%; object-fit: contain; }
#journalDialog .record-keepsakes figcaption { font-size: 11px; text-align: center; }
#journalDialog .record-moment-tabs { display: flex; gap: 7px; margin: 0 0 14px; padding: 0; border: 0; }
#journalDialog .record-moment-tabs button { width: auto; min-height: 40px; margin: 0; padding: 5px 13px; text-align: center; font-size: 13px; border-radius: 2px 8px 0 0; }
#journalDialog :is(.record-moment-tabs, .record-scene-tabs) button[aria-pressed="true"] { color: #fff0ca; background: #49635b; border-color: #49635b; }
#journalDialog .record-moments { display: block; margin: 0; overflow: visible; }
#journalDialog .record-moment { padding: 0; border: 0; background: none; }
#journalDialog .record-moment[hidden] { display: none; }
#journalDialog .record-moment h4 { margin: 3px 0 12px; color: #513b26; font-size: 20px; }
#journalDialog .record-moment .record-scene { width: 100%; max-width: 540px; margin: 8px auto; height: auto; border: 6px solid #f7eed7; outline: 1px solid #b5a181; box-shadow: 1px 3px 7px #62462144; }
#journalDialog .record-moment > strong { display: block; color: #674528; font-size: 13px; }
#journalDialog .record-moment > details { margin-top: 10px; font-size: 13px; }
#journalDialog .record-moment > details p { color: var(--muted); font-size: 13px; }
#journalDialog .record-question { margin: 18px 0; padding: 12px 15px; border-left: 3px solid #ad8b4f; background: #e5c78345; transform: rotate(-.5deg); }
#journalDialog .record-question small { display: block; margin-bottom: 3px; font-size: 11px; }
#journalDialog .record-question span { color: #514129; font-size: 15px; }
#journalDialog .record-actions { gap: 8px; margin-top: 14px; }
#journalDialog .record-actions button { min-height: 44px; padding: 8px 12px; font-size: 13px; }
#journalDialog .record-actions .primary { flex-basis: 100%; order: -1; }
#journalDialog .record-actions .text-button { flex: 1 1 130px; background: transparent; box-shadow: none; }
#journalDialog .record-ending { margin: 18px 0 10px; padding: 10px 0; border: 0; border-block: 1px solid #b8a07877; background: none; font-size: 13px; }
#journalDialog :is(.record-promises, .record-timing) { padding: 9px 0; border: 0; font-size: 13px; }
#journalDialog .record-history, #journalDialog .record-result-info { margin-top: 13px; padding-top: 12px; border-top: 1px solid #a58c6466; font-size: 13px; }
#journalDialog .record-empty { display: grid; min-height: 50vh; align-content: center; justify-items: center; text-align: center; }
#journalDialog .record-empty h3 { font: bold 25px/1.4 "AppleMyungjo", Georgia, serif; }
#reviewDialog:has(#reviewChoices > .record-scene) { --ink: #382d24; --muted: #6c5945; --gold: #745024; --stone: #ac9570; color: var(--ink); word-break: keep-all; padding: 16px; border: 4px solid #705638; border-radius: 6px; background: #eee0c4 url('/assets/journal/parchment-v1.png') center / cover; }
#reviewDialog:has(#reviewChoices > .record-scene) > .dialog-header { position: sticky; top: -16px; z-index: 2; margin: -16px -16px 12px; padding: 12px 16px; background: #eee0c4 url('/assets/journal/parchment-v1.png') center / cover; }
#reviewDialog:has(#reviewChoices > .record-scene) button { color: #443324; border-color: #a99067; background: #f5e8cc; }
#reviewChoices > .record-scene { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 220px); margin-inline: auto; object-fit: contain; }
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  #journalDialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); border-width: 4px; border-radius: 6px; }
  #journalDialog .dialog-header { padding: 9px 12px; }
  #journalDialog .dialog-header p { font-size: 10px; }
  #journalDialog .dialog-header h2 { font-size: 20px; }
  #journalDialog .journal-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #journalDialog #runList { flex-direction: row; padding: 7px 10px; gap: 8px; border: 0; }
  #journalDialog #runList button { flex-basis: 136px; min-height: 58px; grid-template-columns: 38px 1fr; gap: 0 6px; padding: 5px 7px; text-align: left; }
  #journalDialog #runList canvas { width: 38px; height: 44px; grid-row: 1 / 4; }
  #journalDialog #runList b { font-size: 12px; }
  #journalDialog #runList :is(small, span) { font-size: 10px; }
  #journalDialog #runDetail { padding: 0 13px 18px; }
  #journalDialog .record-spread { display: flex; flex-direction: column; }
  #journalDialog .record-scene-page { order: -1; padding: 16px 0 22px; }
  #journalDialog .record-overview { padding: 20px 0 0; border: 0; border-top: 1px solid #b8a078; box-shadow: none; }
  #journalDialog :is(.record-overview, .record-scene-page) > h3 { font-size: 22px; margin-bottom: 10px; }
  #journalDialog .record-moment h4 { font-size: 18px; }
  #journalDialog .record-moment-tabs { gap: 6px; margin-bottom: 11px; }
  #journalDialog .record-moment-tabs button { flex: 1; min-height: 44px; padding: 5px; font-size: 12px; }
  #journalDialog .record-scene-tabs { gap: 5px; }
  #journalDialog .record-scene-tabs button { min-height: 44px; padding: 5px; font-size: 12px; }
  #journalDialog .record-actions button { width: auto; }
}

.bestiary-sprite { image-rendering: pixelated; mix-blend-mode: normal; background: radial-gradient(circle, #4d4a38 0 25%, #24271f 58%, transparent 72%); }
.book-portrait > .bestiary-sprite { width: min(100%, 310px); margin: 8px auto 12px; }
.book-tabs .bestiary-sprite { width: 100%; height: 100%; background: #2b2e25; }
.monster-identity { margin-top: 4px; }


@media (max-width: 600px) {
  .talk-compose { grid-template-columns: minmax(0, 1fr); }
  .talk-compose button { width: 100%; }
}

/* Conversation is a room fixture: a notebook beside a real, scrollable chat. */
#talkDialog { width: min(1220px, calc(100% - 24px)); height: min(880px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
#talkDialog[open] { display: flex; flex-direction: column; }
#talkDialog > .dialog-header, #talkDialog > .talk-actions { flex-shrink: 0; }
.talk-layout { flex: 1; display: grid; grid-template-columns: 225px minmax(0, 1fr); height: auto; min-height: 0; max-height: none; overflow: hidden; }
.talk-character { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; overflow: auto; gap: 12px; padding: 18px; border-right: 1px solid #5c543c; border-bottom: 0; background-position: 13% center; }
.talk-character .gamer-avatar { width: min(150px, 72%); margin: 0 auto; }
.talk-bubble { font-size: 14px; }
.memory-book { margin-top: auto; border: 1px solid #9e8250; border-radius: 5px; background: linear-gradient(145deg, #29372b, #111a16); box-shadow: 0 8px 22px #0008, inset 0 0 0 2px #d2b56a22; }
.memory-book > summary { position: relative; display: grid; gap: 2px; padding: 12px; cursor: pointer; list-style: none; }.memory-book > summary::-webkit-details-marker { display: none; }
.memory-book > summary::after { content: '⌄'; position: absolute; right: 14px; color: #dfc375; }.memory-book:not([open]) > summary::after { transform: rotate(-90deg); }
.memory-book summary span { color: #c8ab66; font-size: 10px; letter-spacing: .09em; }.memory-book summary b { color: #f5dfaa; font-size: 17px; }
.memory-list { display: grid; gap: 7px; max-height: 205px; overflow: auto; padding: 0 10px 10px; }.memory-list > p { margin: 0; color: #b6baaa; font-size: 12px; line-height: 1.5; }
.memory-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 8px; border: 1px solid #646047; background: #17211d; }.memory-card > small { width: fit-content; padding: 2px 5px; border: 1px solid #7f6b41; border-radius: 999px; color: #e0c77e; font-size: 10px; }.memory-card > p { grid-column: 1 / -1; margin: 0; color: #edf0e5; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }.memory-card textarea { grid-column: 1 / -1; min-height: 42px; margin: 0; resize: vertical; font-size: 12px; }.memory-card select { width: 110px; padding: 4px; font-size: 10px; }.memory-card button { min-height: 28px; padding: 4px 7px; font-size: 11px; }.memory-card-actions { display: flex; justify-content: flex-end; gap: 5px; }.memory-card--editing > small { grid-column: 1 / -1; }.memory-card--editing .memory-card-actions { grid-column: 1 / -1; }
.memory-hint { margin: 0; padding: 0 10px 10px; color: #aab1a2; font-size: 11px; }
.strategy-workbench { display: flex; flex-direction: column; min-height: 0; gap: 9px; overflow: hidden; padding: 16px 18px; }
#talkDialog summary::before { display: none; }
#talkDialog .talk-evidence { flex-shrink: 0; max-height: 42%; overflow: auto; }
#talkDialog .talk-evidence:not([open]) #talkSceneMeta { display: none; }
#talkDialog .talk-transcript { flex: 1; min-height: 0; }
#talkDialog .talk-compose, #talkDialog .strategy-workbench > button { flex-shrink: 0; }
#talkStatus { flex-shrink: 0; margin: 0; font-size: 11px; }
#talkStatus:empty { display: none; }
.talk-evidence { display: block; min-height: 0; padding: 0; }.talk-evidence > summary { position: relative; display: grid; gap: 3px; padding: 10px 12px; cursor: pointer; list-style: none; }.talk-evidence > summary::-webkit-details-marker { display: none; }.talk-evidence > summary::after { content: '장면 보기 ›'; position: absolute; right: 14px; top: 16px; color: #dfc57f; font-size: 12px; }.talk-evidence[open] > summary::after { content: '접기 ⌃'; }.talk-evidence b { font-size: 15px; }.talk-evidence #talkSceneAttachment { color: #abb7a9; font-size: 10px; }.talk-replay:empty { display: none; }.talk-replay { padding: 0 12px 12px; }.talk-replay .record-scene { height: min(180px, 25dvh); }.talk-scene-attach { display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; color: #d8dccc; font-size: 12px; }.talk-scene-attach input { width: 16px; height: 16px; padding: 0; accent-color: #d5ae57; }
.talk-transcript { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 5px 8px 10px 2px; scroll-behavior: smooth; }.talk-transcript:empty::before { content: '아직 나눈 이야기가 없습니다. 첫 말을 건네 보세요.'; align-self: center; color: #acb3a4; font-size: 13px; }
.chat-message { display: grid; gap: 4px; width: fit-content; max-width: min(82%, 650px); padding: 10px 12px; border: 1px solid #52675b; border-radius: 13px 13px 13px 3px; background: #153029; color: #edf2e6; box-shadow: 0 4px 12px #0005; }.chat-message--user { align-self: flex-end; border-color: #bd9850; border-radius: 13px 13px 3px 13px; background: #4a3921; }.chat-message > b { color: #72d5ca; font-size: 11px; }.chat-message--user > b { color: #efd084; text-align: right; }.chat-message p { margin: 0; white-space: pre-wrap; line-height: 1.55; }.chat-message > small { color: #c8b074; font-size: 11px; }.chat-message time { color: #8a9889; font-size: 10px; }.chat-message--user time { text-align: right; }
.memory-proposal { display: grid; gap: 4px; margin-top: 4px; padding: 8px; border: 1px solid #a98747; background: #1c2922; }.memory-proposal p { font-size: 12px; }.memory-proposal small { color: #edce79; font-size: 10px; }.memory-proposal button { justify-self: start; min-height: 29px; padding: 4px 8px; font-size: 11px; }
.talk-compose { position: sticky; bottom: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 10px; box-shadow: 0 -8px 22px #111915; }.talk-compose textarea { min-height: 62px; max-height: 150px; }.talk-compose-actions { display: flex; align-items: end; gap: 6px; }.talk-compose-actions button { white-space: nowrap; }.talk-status { min-height: 18px; }

@media (max-width: 699px) {
  #talkDialog { width: calc(100% - 10px); height: calc(100dvh - 10px); max-height: calc(100dvh - 10px); }
  .talk-layout { display: flex; flex-direction: column; }
  .talk-character { flex-shrink: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); max-height: 42%; gap: 7px 10px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid #5c543c; }
  .talk-character .gamer-avatar { grid-row: auto; width: 58px; margin: 0; }
  .talk-bubble { align-self: center; min-height: 0; padding: 8px 10px; font-size: 12px; }
  .memory-book { grid-column: 1 / -1; margin-top: 0; }
  .memory-book > summary { padding: 8px 11px; }
  .memory-book summary span { display: none; }
  .memory-book summary b { font-size: 14px; }
  .memory-list { max-height: 160px; }
  .strategy-workbench { flex: 1; min-height: 0; padding: 10px; gap: 7px; }
  .talk-actions { padding: 7px 10px; }
}
@media (max-width: 560px) {
  .talk-dialog .dialog-header { padding: 10px 12px; }.talk-dialog .dialog-header h2 { font-size: 21px; }
  .chat-message { max-width: 94%; padding: 8px 10px; font-size: 14px; }
  .talk-compose { grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }.talk-compose textarea { font-size: 16px; min-height: 58px; height: 64px; }
  .talk-compose-actions { flex-direction: column; }.talk-compose-actions button { padding: 7px 9px; }
  .talk-evidence > summary { padding: 8px 10px; }.talk-evidence > summary::after { right: 10px; top: 12px; }
}