@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #100f0e;
  --panel: #181512;
  --panel-deep: #13110f;
  --line: #3c3026;
  --light: #f0e4d2;
  --muted: #b6a28e;
  --gold: #dfad72;
  --copper: #b67c50;
  --red: #d46c61;
  --green: #a7bd95;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Golos Text", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--light); background: var(--bg); font: 14px/1.5 var(--sans); }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: var(--serif); line-height: 1.05; }
.header { max-width: 1512px; padding: 0 5%; margin: auto; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 24px/.79 var(--serif); white-space: nowrap; letter-spacing: .015em; }
.sigil { display: grid; place-items: center; width: 37px; height: 39px; color: var(--gold); border: 1px solid #825d40; font: 24px/1 Georgia,serif; clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); background: #312219; }
.header nav { display: flex; align-self: stretch; gap: 19px; }
.header nav button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 9px; color: var(--muted); white-space: nowrap; }
.header nav button span { margin-right: 4px; color: var(--copper); }
.header nav button[aria-pressed=true] { color: var(--gold); border-bottom-color: var(--copper); }
.account { display: flex; gap: 15px; align-items: center; white-space: nowrap; }
.coins { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.coins > span:first-child { color: #f4c387; margin-right: 3px; }
.record { color: var(--muted); font-size: 12px; border-left: 1px solid var(--line); padding-left: 13px; }
#main { width: min(90%, 1300px); margin: 0 auto; min-height: calc(100vh - 145px); padding-block: 24px 36px; }
.footer { width: min(90%, 1300px); margin: auto; padding: 14px 0; border-top: 1px solid #302820; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.footer span:first-child { color: var(--gold); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 20px; align-items: start; }
.stack { display: grid; gap: 13px; }
.panel { border: 1px solid var(--line); background: linear-gradient(145deg,#1d1814,var(--panel-deep)); }
.panel-pad { padding: 17px; }
.panel h2 { font-size: 29px; }
.panel h3 { font-size: 23px; }
.caption { color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .19em; font-size: 10px; font-weight: 700; }
.eyebrow::before { content: '◆'; margin-right: 7px; font-size: 8px; }
.mode-area { position: relative; z-index: 3; padding: 15px clamp(14px,3vw,30px) clamp(14px,3vw,28px); }
.mode-area > h2 { margin-bottom: 12px; }
.mode-reward { margin-top: 9px; }
.modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.mode { min-width: 0; text-align: left; padding: 12px; color: var(--light); border: 1px solid #645042; background: #16110ee8; }
.mode[aria-pressed=true] { border-color: #ce9568; background: #3b281fef; box-shadow: inset 0 2px var(--copper); }
.mode-top { display: flex; justify-content: space-between; align-items: center; color: var(--gold); font-size: 12px; }
.mode strong { display: block; margin: 3px 0; font: 700 clamp(19px,2.1vw,32px)/1.05 var(--serif); overflow-wrap: anywhere; }
.mode small { color: #d5bea7; font-size: 11px; line-height: 1.2; display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button { border: 1px solid #67503d; background: #231b15; color: var(--light); padding: 9px 13px; min-height: 40px; }
.button:hover:not(:disabled) { border-color: var(--gold); }
.primary { background: linear-gradient(150deg,#a85639,#74341f); color: #fff1dc; border-color: #cf8b63; font-weight: 700; }
.primary:hover:not(:disabled) { background: #a9583d; }
.wide { width: 100%; }
.choices { display: grid; gap: 6px; margin-top: 10px; }
.choices button { min-width: 0; width: 100%; display: flex; justify-content: space-between; text-align: left; gap: 8px; border: 1px solid var(--line); background: #181410; padding: 7px 9px; }
.choices button[aria-pressed=true] { border-color: var(--copper); background: #322218; color: var(--gold); }
.choices small { color: var(--muted); font-size: 11px; }
.scout { margin-top: 9px; }
.scout summary { color: var(--gold); cursor: pointer; font-size: 12px; }
.history-hint { margin-top: 7px; }
.match-panel .primary { margin-top: 11px; }
.metrics { margin: 7px 0 10px; }
.metric { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid #34291f; padding: 4px 0; }
.metric span:first-child { color: var(--muted); font-size: 12px; }
.metric strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric strong.good { color: var(--green); }
.metric strong.bad { color: #e08b7d; }
.page-title { margin-bottom: 20px; }
.page-title h1 { font-size: clamp(47px,7vw,79px); }
.page-title p:last-child { margin-top: 6px; color: var(--muted); }
.build-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.portrait { min-height: 382px; display: grid; place-items: end center; overflow: hidden; position: relative; background: radial-gradient(ellipse at 45% 53%, #62442b66,transparent 68%), #19140f; }
.portrait img { display: block; width: 90%; height: 355px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 13px #000); }
.portrait .caption { padding: 6px 10px 11px; text-align: center; }
.stat-row { padding: 9px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid #34291f; }
.stat-row strong { display: block; }
.stat-row .caption { line-height: 1.35; display: block; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { min-width: 34px; min-height: 36px; padding: 0; }
.stepper b { min-width: 25px; text-align: center; font-variant-numeric: tabular-nums; }
.gear-row { display: grid; gap: 3px; margin: 8px 0; }
select { border: 1px solid #624a37; background: #15110f; width: 100%; min-height: 38px; padding: 6px 8px; }
.shop-filters { margin-bottom: 10px; }
.shop-filters button[aria-pressed=true] { border-color: var(--gold); color: var(--gold); background: #302117; }
.items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.item { background: radial-gradient(ellipse at 60% 0%,#3a291b,transparent 60%),var(--panel); padding: 14px; display: grid; align-content: start; min-height: 151px; gap: 6px; }
.item.is-preview { border-color: var(--copper); }
.item .slot-icon { color: #d8a771; font-size: 23px; line-height: 1; }
.item .caption { min-height: 2.4em; }
.item .price { color: var(--gold); font-size: 12px; }
.item .button { text-align: left; margin-top: 2px; }
.message { min-height: 1.5em; color: #e9b18a; margin-top: 6px; font-size: 12px; }
.combat-stage { min-height: 440px; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; background: #231a15 url('arena.webp') center 54%/cover; border: 1px solid #4b3829; }
.combat-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#100b08c9, transparent 35%, transparent 62%,#120c09eb); }
.combat-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; gap: 9px; }
.combat-top h1 { font-size: clamp(30px,5vw,63px); }
.combat-top .button { background: #1a120ed9; }
.sides { padding: 0 12px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4vw; align-self: end; width: 100%; }
.side { display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
.avatar { position: relative; width: 33%; text-align: center; align-self: end; min-width: 0; }
.sides.duel .avatar { width: 80%; }
.sprite { display: block; width: 100%; height: clamp(170px,27vw,332px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 11px 10px #000b); transform-origin: center 87%; }
.avatar.ally .sprite { transform: scaleX(-1); }
.avatar.ally.player .sprite { transform: none; }
.avatar.ally.player.mirrored .sprite { transform: scaleX(-1); }
.avatar.enemy.unmirrored .sprite { transform: scaleX(-1); }
.avatar.is-out .sprite { filter: grayscale(1); opacity: .23; }
.avatar.is-out .avatar-text { opacity: .45; }
.avatar-text { background: #150e0bdc; border: 1px solid #543c2c; padding: 4px 5px 6px; text-align: left; }
.avatar.is-target .avatar-text { border-color: var(--gold); }
.avatar-text b { display: block; overflow-wrap: anywhere; }
.avatar-text small { color: var(--muted); font-size: 10px; }
.avatar.ally .avatar-text b { color: #cce2b5; }
.avatar.enemy .avatar-text b { color: #f0a498; }
.bar { height: 4px; background: #473628; margin-top: 4px; }
.bar i { display: block; height: 100%; background: #9cab70; transition: width .25s; }
.avatar.enemy .bar i { background: #c56a56; }
.arena-foot { padding: 6px 12px 9px; color: var(--muted); font-size: 11px; }
.combat-actions { padding: 14px; }
.combat-actions .actions { margin: 8px 0; }
.combat-actions .actions button[aria-pressed=true] { border-color: var(--gold); color: var(--gold); background: #37251b; }
.fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.fields label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
.round-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.round-footer span { color: var(--gold); }
.log { max-height: 400px; overflow: auto; }
.log details { margin-top: 8px; }
.log summary { color: var(--gold); cursor: pointer; }
.log li { margin-bottom: 5px; }
.log ul { margin: 5px 0; padding-left: 17px; }
.log li small { display: block; }
.result { position: absolute; z-index: 5; inset: 0; display: grid; align-content: center; justify-items: center; gap: 9px; background: #130c08df; padding: 22px; text-align: center; }
.result h2 { font-size: clamp(56px,10vw,104px); color: var(--gold); }
.result .actions { justify-content: center; }
.avatar.hit .sprite { animation: hit .31s ease-out; }
.avatar.lunge .sprite { animation: lunge .31s ease-out; }
@keyframes hit { 40% { translate: 6px 2px; opacity: .56; } }
@keyframes lunge { 43% { translate: 10px -5px; } }
#notice { position: fixed; right: 18px; bottom: 18px; border: 1px solid #8c6345; background: #241914; color: var(--light); z-index: 10; padding: 9px 14px; max-width: calc(100% - 36px); box-shadow: 0 9px 30px #0009; }
#notice:empty { display: none; }
@media (max-width: 1020px) {
  .layout { grid-template-columns: minmax(0,1fr) 253px; gap: 13px; }
  .panel-pad { padding: 13px; }
}
@media (max-width: 770px) {
  .layout, .build-grid { grid-template-columns: 1fr; }
  .header { padding: 0 4%; gap: 10px; height: 63px; }
  .header nav { gap: 1px; }
  .header nav button { padding: 0 6px; }
  .header nav button span, .record { display: none; }
  #main { width: 94%; padding-top: 13px; }
  .footer { width: 94%; }
  .combat-stage { min-height: 339px; }
}
@media (max-width: 420px) {
  body { font-size: 13px; }
  .brand { font-size: 18px; gap: 4px; }
  .sigil { width: 25px; height: 30px; font-size: 17px; }
  .header nav button { font-size: 11px; padding-inline: 4px; }
  .account { font-size: 12px; }
  .mode { padding: 7px 5px; }
  .modes { gap: 4px; }
  .mode small { font-size: 10px; }
  .fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .combat-top { padding: 8px; }
  .sides { padding: 0 4px; gap: 8px; }
  .avatar-text { padding-inline: 2px; }
  .avatar-text b { font-size: 10px; }
  .avatar-text small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.header-level { color: var(--muted); font-size: 12px; white-space: nowrap; }
.brand { background: none; border: 0; padding: 0; text-align: left; }
.room-route { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.room-route button { border: 0; padding: 3px 0; background: transparent; color: var(--gold); }
.room-route button:hover { text-decoration: underline; }
.room-title { padding: clamp(17px,3vw,32px); width: 100%; }
.room-title h1 { font-size: clamp(43px,6vw,76px); }
.room-title p:not(.eyebrow) { color: #e5d4be; max-width: 34em; margin-top: 6px; }
.room-title .button { margin-top: 13px; }
.progression-label, .condition-status { margin-top: 6px; }
.xp-bar { height: 5px; margin: 7px 0 1px; }
.xp-bar i { background: var(--gold); }
.progress-action { margin-top: 12px; }
.equipment-grid { display: grid; gap: 0 10px; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 5px 0 8px; }
.level-earned { color: #f6c389; font-weight: 700; }
@media (max-width: 770px) {
}
@media (max-width: 490px) {
  .header-level { font-size: 10px; }
  .account { gap: 5px; }
}

.item-art { width: 100%; height: 150px; display: block; object-fit: contain; background: #171210; border: 1px solid #3b2b20; }
.gear-label { display: flex; align-items: center; gap: 7px; min-height: 32px; }
.gear-label .item-art { width: 33px; height: 33px; }
.armour-level { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); }
.armour-level select { width: auto; }
.model-panel { display: grid; place-items: center; gap: 8px; overflow: hidden; padding: 10px; background: radial-gradient(ellipse at 50% 58%,#4a33244f 0%,#18130f 61%,#100e0c); }
.model-panel canvas { display: block; width: min(100%,390px); height: auto; max-height: 360px; object-fit: contain; touch-action: pan-y; cursor: grab; }
.model-panel canvas:active { cursor: grabbing; }
.model-actions { display: flex; align-items: center; gap: 9px; }
.model-gear { text-align: center; }
.quick-zones { display: grid; gap: 7px; margin: 8px 0 12px; }
.strike-row,.guard-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.quick-zones strong { width: 105px; flex-shrink: 0; }
.zone-buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: 1; gap: 5px; }
.zone-buttons .button { padding-inline: 5px; }
.strike-row button[aria-pressed=true] { border-color: #f5a084; background: #712c22; color: #fff3e2; }
.guard-row button[aria-pressed=true] { border-color: #9aae83; background: #303925; color: #f1f6e5; }
#sale-form input { color: inherit; background: #15110f; width: 100%; min-height: 38px; border: 1px solid #624a37; padding: 5px 8px; }
@media (max-width: 760px) { .room-doors { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 490px) {
  .quick-zones strong { width: 100%; }
  .zone-buttons { min-width: 100%; }
  .item-art { height: 110px; }
}

.city-event h2 { margin: 5px 0 7px; }
.city-event .button { margin-top: 12px; }
.raid-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.raid-grid .item { min-height: 145px; }
.chronicle-line,.city-record { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.city-record .button { margin-top: 6px; }
.city-licenses { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
.city-inline { display:flex; flex-wrap: wrap; align-items:end; gap: 8px; margin: 11px 0; }
.city-inline label,.look-fields label { display:grid; gap: 3px; color: var(--muted); flex: 1; }
.city-inline input { border: 1px solid #624a37; background: #15110f; color: var(--light); min-width: 0; min-height: 39px; padding: 5px 8px; font: inherit; width: 100%; }
.arena-foot { display:flex; gap: 6px; justify-content:space-between; align-items:center; }
.arena-foot .button { font-size:11px; min-height: 32px; padding: 4px 8px; }
.appearance h2 { margin-bottom: 9px; }
.body-choices,.face-choices,.colour-choices,.look-fields { display:grid; gap: 7px; margin-block: 8px 12px; }
.body-choices,.look-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.face-choices,.colour-choices { grid-template-columns: repeat(4,minmax(0,1fr)); }
.body-choices button,.face-choices button { padding: 3px; display:grid; overflow:hidden; }
.body-choices button img { width:100%; height:118px; object-fit:cover; object-position:center 28%; }
.face-choices button img { width:100%; aspect-ratio:1; object-fit:cover; }
.appearance button[aria-pressed=true] { box-shadow: inset 0 0 0 1px var(--gold); border-color: var(--gold); }
button.swatch { background: var(--swatch); min-height:34px; }
@media(max-width:800px) { .novgorod-stage { min-height: 530px; } }
@media(max-width:520px) {
  .city-licenses { grid-template-columns: 1fr; }
  .look-fields { grid-template-columns: 1fr; }
}

.raid-combat { background-image: url(locations/watch.webp); }
.raid-combat .sides { gap: 1vw; }

.hero-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:7px; margin:0 0 15px; }
.hero-choices .button { display:grid; justify-items:center; align-content:end; padding:5px 2px; font-size:.78rem; }
.hero-choices img { display:block; width:100%; height:72px; object-fit:contain; object-position:center; }
.face-choices button img { object-fit:contain; }
.model-stage { display:grid; grid-template-columns:minmax(0,1fr); width:100%; min-width:0; align-items:center; justify-items:center; }
.model-panel [data-mannequin] { width:100%; }
.model-gear { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.model-gear span { width:42px; height:36px; display:grid; padding:2px; background:#17120e; border:1px solid #75573869; border-radius:5px; }
.model-gear .item-art { width:100%; height:100%; object-fit:contain; }
.build-grid .stack { align-content:start; min-width:0; }
.body-choices button { align-items:center; justify-content:start; grid-template-columns:32px 1fr; gap:8px; padding:3px 9px; text-align:left; }
.body-choices button img { height:40px; object-fit:contain; object-position:center; }

.item-spec { display:grid; gap:7px; font-size:.83rem; line-height:1.25; margin-block:4px; }
.item-spec dl { display:grid; gap:3px; margin:0; padding:6px 0; border-block-start:1px solid #433225; }
.item-spec dl div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.item-spec dt { color:#c5b7a6; }
.item-spec dd { text-align:right; color:#e1c59e; min-width:16px; margin:0; font-variant-numeric:tabular-nums; }
.item-spec .unmet dt,.item-spec .unmet dd { color:#ffad98; font-weight:600; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.equipment-slot { min-width:0; border-block-start:1px solid #433225; margin:0 0 12px; padding:7px 0 0; }
.equipment-slot h3 { margin:0 0 5px; font-size:1rem; }
.equipment-item { padding:6px 0 10px; }
.equipment-item + .equipment-item { border-block-start:1px dashed #514032; }
.equipment-title { display:grid; grid-template-columns:32px minmax(0,1fr); gap:6px; align-items:center; }
.equipment-title .item-art { width:32px; height:32px; }
.equipment-item .button { min-height:33px; }
.dock-summary { display:grid; grid-template-columns:1.2fr 1fr; gap:17px; padding:16px 0 8px; color:#c5b7a6; }
.dock-summary p { margin:0; }
.dock-summary strong { color:var(--gold); }
.dock-summary .button { margin:5px 0; }
.cargo-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.cargo-list .item { grid-template-rows:auto auto 1fr auto auto; }
.cargo-meta { display:flex; justify-content:space-between; gap:7px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.83rem; }
.cargo-meta del { color:#baa792; margin-right:6px; }
.cargo-list .sold-out .item-art { opacity:.64; }
@media(max-width:580px) {
  .dock-summary { grid-template-columns:1fr; }
  .item-spec dl div { gap:5px; }
}

.wardrobe { padding:14px; gap:11px; }
.wardrobe-title { width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:9px; flex-wrap:wrap; }
.wardrobe-title h2,.wardrobe-title p { margin:0; }
.wardrobe .model-stage { grid-template-columns:minmax(66px,1fr) minmax(115px,2fr) minmax(66px,1fr); align-items:stretch; position:relative; gap:7px; }
.wardrobe .model-stage [data-mannequin] { align-self:center; height:100%; max-height:365px; min-height:265px; }
.gear-column { display:grid; gap:6px; width:100%; min-width:0; }
.gear-cell { color:#e4d8c8; border:1px solid #584332; text-align:left; background:#1b1511; display:grid; min-width:0; width:100%; align-content:center; gap:4px; padding:5px; font:inherit; }
button.gear-cell { cursor:pointer; }
button.gear-cell:hover,button.gear-cell[aria-pressed="true"] { border-color:var(--kit); background:#2c2118; }
.gear-cell.filled { border-inline-start:2px solid var(--kit); }
.gear-cell .item-art,.gear-placeholder { width:100%; height:46px; border:0; object-fit:contain; }
.gear-placeholder { display:grid; place-items:center; color:#916c4b; background:#201712; }
.gear-name { display:grid; gap:3px; overflow-wrap:anywhere; }
.gear-name small { color:#c9a77e; font-size:.71rem; }
.gear-name strong { color:#e4d8c8; font-weight:500; font-size:.77rem; line-height:1.18; }
.inventory-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.inventory-title p { margin:0; }
.inventory-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr)); gap:7px; }
.inventory-items .equipment-item { padding:7px; border:1px solid #4b392c; min-width:0; }
.inventory-items .is-equipped { border-color:#a27a53; }
.inventory-items .item-spec { margin-top:5px; }
.kit-label { color:var(--kit); font-size:.78rem; margin:3px 0; line-height:1.25; }
.kit-label small { display:block; font-size:.77rem; color:#c2ac93; margin-top:3px; }
.shop-selects { display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; }
.shop-selects select { max-width:min(310px,57vw); }
.fighter-profile { max-height:90dvh; width:min(600px,94vw); color:#e4d8c8; border:1px solid #765737; padding:14px; background:#1c1511; overflow:auto; }
.fighter-profile::backdrop { background:#0d0907c9; }
.fighter-profile-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.fighter-profile-head h2 { color:#f2e1cd; margin:0; }
.fighter-profile-body { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:9px; }
.profile-silhouette { display:grid; place-items:center; background:radial-gradient(ellipse,#4b3427,#201712 75%); }
.profile-silhouette img { height:min(300px,50dvh); width:100%; object-fit:contain; }
.profile-gear { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.resident-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:space-between; border-block-start:1px solid #433225; padding:5px 0; }
.resident-row small { color:var(--muted); }
.inspect-fighter { color:inherit; font:inherit; cursor:pointer; padding:0; background:none; border:0; text-decoration:underline; text-underline-offset:3px; }
.cargo-list .item { grid-template-rows:auto auto auto 1fr auto auto; }
@media(max-width:435px) {
  .wardrobe .model-stage { grid-template-columns:minmax(63px,.85fr) minmax(96px,1.3fr) minmax(63px,.85fr); gap:5px; }
  .gear-cell { padding:4px; }
  .gear-cell .item-art,.gear-placeholder { height:39px; }
  .gear-name strong { font-size:.72rem; }
}
.model-figure { width:100%; align-self:center; }

.character-dialog { width:min(750px,96vw); max-height:90dvh; color:#e8dfd0; padding:16px; border:1px solid #765737; background:#1b1510; }
.character-dialog::backdrop { background:#100a08d9; }
.character-head,.character-tabs { display:flex; justify-content:space-between; align-items:center; gap:7px; }
.character-head h2 { margin:0; }
.character-tabs { justify-content:start; margin:12px 0; flex-wrap:wrap; }
.character-tabs[hidden],.is-registration .character-head form { display:none; }
.character-equipped { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:9px; align-items:start; }
.character-equipped .model-stage { min-height:280px; }
.character-equipped .model-stage [data-mannequin] { max-height:305px; }
.character-backpack .inventory-title h3 { margin:0; }
.character-backpack .inventory-title h3 small { color:#be9a72; }
.hero-settings { display:grid; gap:10px; margin-top:10px; }
.hero-settings label { display:grid; gap:4px; color:#dbc6ac; }
.hero-settings .hero-choices { margin:0; }
.hair-settings { display:grid; grid-template-columns:minmax(98px,158px) minmax(0,1fr); gap:14px; align-items:center; }
.hair-model { margin:0; border:1px solid #54402f; background:radial-gradient(ellipse,#58422f,#17110c 70%); }
.hair-model canvas { display:block; width:100%; height:auto; }
.hair-settings p { margin:8px 0 0; }
.character-message { margin:0; color:#e1b888; }
.character-message:empty { display:none; }
@media(max-width:620px) {
  .character-dialog { padding:10px; }
  .character-equipped { grid-template-columns:1fr; }
  .character-equipped .model-stage { min-height:0; }
  .character-dialog .model-actions .caption { display:none; }
  .header nav { gap:8px; }
}

.header nav { gap:clamp(0px,1vw,16px); }
.header nav button { padding-inline:6px; }
.character-dialog { width:min(1060px,96vw); }
.character-equipped { grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); }
.character-backpack { min-width:0; }
.character-backpack .inventory-items { align-items:start; }
.equipped-details { margin-top:9px; }
.ring-picker { display:grid; gap:3px; margin:5px 0; color:var(--muted); }
.local-quests { margin-block:12px; }
.local-quests h2 { margin-bottom:4px; }
.adventure-list { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); align-items:start; }
.adventure-card h3,.animal-card h3 { margin:4px 0; }
.adventure-card .button,.animal-card .button { margin:3px 4px 0 0; }
.animal-card img { display:block; width:100%; height:128px; object-fit:contain; margin-bottom:4px; background:radial-gradient(ellipse,#493227,transparent 68%); }
#adventure-status { color:#efc491; }
#adventure-status:empty { display:none; }
@media(max-width:760px) {
  .header { height:auto; min-height:74px; flex-wrap:wrap; gap:1px 7px; padding-block:6px 0; }
  .header nav { order:3; flex-basis:100%; justify-content:space-between; overflow-x:auto; }
  .header nav button { min-height:34px; padding-inline:4px; }
  .account { margin-left:auto; }
  .character-equipped { grid-template-columns:1fr; }
}
.avatar-pet { display:block; color:#d6aa76; font-size:.7rem; }
.character-dialog.is-settings { width:min(750px,96vw); }
.adventure-card label { display:grid; gap:5px; margin:7px 0; }

/* Common item proportions for the shop, trading and personal inventory. */
.items:has(> .gear-card),.inventory-items.bag-grid { grid-auto-rows:1fr; align-items:stretch; }
.shop-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.items > .gear-card,.bag-grid > .gear-card {
  display:grid; grid-template-rows:auto auto 1fr auto; gap:0;
  min-width:0; padding:10px; text-align:center;
  background:linear-gradient(160deg,#2b2018,#17120f 55%); border-color:#4a3628;
}
.gear-card.is-preview { border-color:#c29163; }
.gear-card-art {
  width:100%; height:126px; position:relative; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 48%,#3d2a1c,#171210 77%); border:1px solid #473325;
}
.gear-card-art .item-art { width:87%; height:104px; border:0; background:transparent; object-position:center; }
.gear-card-name { min-height:67px; padding:9px 0 1px; display:flex; flex-direction:column; align-items:center; }
.gear-card-name h3 { line-height:1.16; margin:0; }
.gear-card .item-spec { text-align:left; align-content:start; }
.gear-card-actions { display:grid; align-content:end; gap:4px; width:100%; }
.gear-card-actions .button { text-align:center; width:100%; margin:0; min-height:36px; }
.gear-card-actions .gear-preview { background:transparent; border-color:#584031; }
.gear-price { color:#e1bb86; min-height:17px; margin:0 0 3px; }
.gear-price small { display:block; color:#cbb9a4; white-space:normal; line-height:1.3; }
.item-count { position:absolute; right:7px; bottom:6px; color:#f5d6a6; background:#231810; padding:2px 7px; border:1px solid #805938; font-variant-numeric:tabular-nums; }
.bag-grid .gear-card-art { height:104px; }
.bag-grid .gear-card-art .item-art { height:84px; }
.wardrobe .model-stage > .gear-column { grid-template-rows:repeat(4,minmax(72px,1fr)); }
.wardrobe .gear-cell { grid-template-rows:40px minmax(35px,auto); justify-items:center; align-content:center; text-align:center; }
.wardrobe .gear-cell .item-art,.wardrobe .gear-placeholder { height:40px; width:100%; object-fit:contain; object-position:center; }
.wardrobe .gear-cell .gear-name { width:100%; align-items:center; grid-template-rows:auto 1fr; }
@media(max-width:480px) {
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .items > .gear-card,.bag-grid > .gear-card { padding:7px; }
  .gear-card-art { height:96px; }
  .gear-card-art .item-art { height:80px; }
  .gear-card-name { min-height:72px; }
  .gear-card-name h3 { font-size:1rem; }
  .gear-card-actions .button { font-size:.8rem; padding-inline:4px; }
}

.room-scene {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid #6d5037;
  border-radius: 7px;
  min-height: clamp(210px,27vw,332px);
  margin-bottom: 20px;
  background: #211711 var(--room-art) center 42% / cover;
}
.room-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#130d09df,transparent 82%),linear-gradient(0deg,#130d09dc,transparent 72%);
}
.room-scene .room-title { padding: clamp(18px,3.8vw,48px); }
.room-scene h1 { margin-top: 3px; font-size: clamp(42px,6.3vw,83px); text-wrap: balance; text-shadow: 0 2px 15px #0d0806; }
.room-scene .room-title p:not(.eyebrow) { color: #f1dfc9; }
.room-scene[data-room=raid] { background-position: 70% 29%; }
.city-directory > summary { color: var(--light); font: 700 1.5rem/1.1 var(--serif); cursor: pointer; }
.city-directory[open] > summary { margin-bottom: 10px; }
.room-doors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 10px; }
.room-door {
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-width: 0;
  min-height: 146px;
  padding: 10px 12px;
  border: 1px solid #795a40;
  border-radius: 5px;
  color: var(--light);
  text-align: left;
  align-items: end;
  background: linear-gradient(0deg,#130d09 1%,#17100bb8 38%,#17100b13 91%),var(--room-art) center / cover,#211813;
}
.room-door:hover { border-color: var(--gold); }
.room-door > strong { font: 700 clamp(21px,2.4vw,31px)/1 var(--serif); overflow-wrap: anywhere; }
.room-door-caption { color: #e1cab2; font-size: 12px; line-height: 1.3; margin-top: 5px; }
.room-door-time {
  align-self: start;
  justify-self: end;
  padding: 3px 6px;
  background: #17100bde;
  border: 1px solid #997650a8;
  border-radius: 3px;
  color: #f0cca1;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.infirmary-care p { max-width: 47ch; margin: 8px 0 14px; color: var(--muted); }

.experience-hud { width: min(90%,1300px); margin: 7px auto 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .79rem; }
.experience-hud[hidden] { display: none; }
.experience-hud .xp-bar { flex: 1; margin: 0; }
.experience-number,.experience-reward { white-space: nowrap; font-variant-numeric: tabular-nums; }
.experience-number strong { color: var(--light); }
.experience-reward strong { color: var(--gold); }
.xp-bar { position: relative; height: 6px; margin: 8px 0 7px; }
.xp-bar b { position: absolute; top: 0; bottom: 0; width: 2px; background: #17110b; }
.xp-bar b:nth-of-type(1) { left: 25%; }
.xp-bar b:nth-of-type(2) { left: 50%; }
.xp-bar b:nth-of-type(3) { left: 75%; }

.character-head .button { min-width: 42px; }
[data-character-section] { min-width: 0; scroll-margin-block-start: 60px; }
.character-equipped { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 12px; }
.character-equipped > .stack { min-width: 0; }
.character-backpack { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #19130f; }
.inventory-title { flex-wrap: wrap; }
.inventory-title label { display: flex; align-items: center; gap: 6px; }
.inventory-title select { max-width: 100%; }
.inventory-title h3 { font-size: 27px; }
.bag-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,200px),1fr)); }
.bag-availability { margin-bottom: 9px; }
.character-message:not(:empty) { margin-bottom: 9px; }

.stat-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: start; }
.stat-heading h2 { margin-bottom: 3px; }
.stat-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-block: 10px 5px; align-items: start; }
.stat-group { min-width: 0; border: 1px solid #463523; border-radius: 5px; background: #211911; padding: 8px; }
.stat-group h3 { font: 600 .82rem/1.3 var(--sans); color: #edc492; margin: 0 0 5px; }
.stat-group dl { margin: 0; }
.stat-group dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding: 4px 0; border-top: 1px solid #453525; }
.stat-group dt { color: #decebd; font-size: .78rem; line-height: 1.32; overflow-wrap: anywhere; }
.stat-group dd { margin: 0; color: #f4e6d7; flex-shrink: 0; text-align: right; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-group dd small { display: block; line-height: 1.2; font-size: .7rem; }
.stat-group .good { color: #bad895; }
.stat-group .bad { color: #f0a18e; }
.shop-layout aside .stat-groups { grid-template-columns: 1fr; }
.equipped-details { margin: 0; }
.equipped-details h2 { margin: 4px 0 6px; font-size: 25px; }
.equipped-details .button { margin-top: 6px; }
.item-spec .item-spec-group { border-top: 1px solid #433225; padding-top: 4px; }
.item-spec .item-spec-group h4 { margin: 0; color: #e1bb8d; font: 600 .7rem/1.3 var(--sans); }
.item-spec .item-spec-group dl { border: 0; padding: 3px 0 0; }
.hair-model canvas { touch-action: pan-y; }
.sigil img { width: 80%; height: 80%; object-fit: contain; }

.compact-combat { min-height: 0; }
.compact-combat .sprite { height: clamp(125px,18vw,245px); }
.combat-sidebar { min-width: 0; }
.combat-roster header,.combat-target { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.combat-roster header { margin-bottom: 8px; }
.combat-roster header h2 { font-size: 25px; }
.combat-roster header span,.combat-target span { color: var(--muted); font-size: .8rem; }
.combat-target { margin-top: 6px; }
.combat-target b { color: var(--light); }
.roster-list { margin: 0; padding: 0 3px 0 0; list-style: none; max-height: 156px; overflow-y: auto; }
.roster-list li > * { display: flex; justify-content: space-between; align-items: center; gap: 7px; width: 100%; min-height: 36px; padding: 4px 7px; text-align: left; border: 1px solid #473629; background: #1d1611; }
.roster-list li + li { margin-top: 3px; }
.roster-list li span { overflow-wrap: anywhere; }
.roster-list button:hover,.roster-list button[aria-pressed=true] { border-color: #be8e61; background: #3d281a; }
.roster-list small { color: #dfb889; white-space: nowrap; }
.roster-list .eliminated { color: var(--muted); }
.roster-list :focus-visible { outline-offset: -2px; }

@media(max-width: 790px) {
  .experience-hud { width: 94%; }
  .character-equipped { grid-template-columns: 1fr; }
  .shop-layout aside .stat-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 620px) {
  .raid-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .room-doors { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .room-door { min-height: 111px; }
  .room-scene { margin-bottom: 13px; }
  .room-scene .room-title { padding: 16px; }
  .character-backpack { padding: 9px; }
  .bag-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 355px) {
  .raid-grid { grid-template-columns: 1fr; }
  .stat-group { padding-inline: 5px; }
}

.battle-score { margin-bottom: 10px; }
.battle-score dl {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px;
  padding: 0; margin: 0;
}
.battle-score dl div {
  min-width: 0; display: flex; justify-content: space-between; align-items: center;
  gap: 5px; padding: 6px 9px; border: 1px solid #4b3524; background: #291d14;
}
.battle-score dt { color: #d9c6b0; font-size: .78rem; }
.battle-score dd { color: #f0c997; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.battle-score dl div:nth-child(2) dd { color: #c4d6a5; }
.battle-score dl div:last-child dd { color: #ecaa98; }
.battle-score > p { margin-top: 5px; }
.fighter-profile { width: min(970px,96vw); padding: 16px; }
.fighter-profile-head .button { min-width: 42px; }
.fighter-profile-body { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 14px; }
.fighter-gear,.fighter-overview { min-width: 0; }
.profile-gear-board { display: grid; grid-template-columns: minmax(59px,1fr) minmax(0,1.65fr) minmax(59px,1fr); gap: 4px; }
.profile-gear-column { display: grid; grid-template-rows: repeat(4,1fr); gap: 4px; }
.profile-silhouette { grid-template-rows: 1fr auto; min-width: 0; border: 1px solid #543b28; border-radius: 5px; }
.profile-silhouette img { min-height: 0; height: min(310px,40dvh); }
.fighter-presence { padding: 4px 3px; color: #d9bea2; text-align: center; font-size: .78rem; }
.fighter-presence::before { content: '●'; color: #b49e8b; margin-inline-end: 5px; }
.fighter-presence.is-online::before { color: #bbc991; }
.fighter-overview .battle-score dl div { display: grid; justify-content: stretch; justify-items: center; text-align: center; gap: 2px; padding-inline: 3px; }
.fighter-overview .battle-score dd { font-size: 1.15rem; }
.fighter-tabs { margin-block: 8px 11px; gap: 5px; }
.fighter-tabs .button { padding-inline: 8px; }
.fighter-tabs .button[aria-pressed=true] { background: #3c291b; border-color: #c39468; color: #f0ca99; }
.character-info { margin: 0; display: grid; gap: 4px; font-size: .88rem; }
.character-info > div { display: flex; gap: 8px; justify-content: space-between; border-bottom: 1px solid #473222; padding: 4px 0; }
.character-info dt { color: var(--muted); }
.character-info dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.fighter-about { border-left: 2px solid var(--copper); padding: 4px 8px; margin-top: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
#fighter-about-form { display: grid; gap: 5px; margin-top: 10px; }
#fighter-about-form label { display: grid; gap: 4px; }
#fighter-about-form textarea { width: 100%; resize: vertical; padding: 7px; border: 1px solid #664b36; color: var(--light); background: #18120e; font: inherit; }
#fighter-about-form button { justify-self: start; }
.fighter-status:empty { display: none; }
.fighter-link { display: inline-block; margin-top: 8px; color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.fighter-trophies { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.fighter-trophies li { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #573e2a; background: #241910; padding: 7px; }
.fighter-trophies li > span { display: grid; place-items: center; height: 31px; color: #f2c888; border: 1px solid #755237; background: #3c2919; }
.fighter-gear .gear-cell { text-align: center; align-content: center; padding: 3px; }
.fighter-gear .gear-cell :is(.item-art,.gear-placeholder) { height: 32px; }
.fighter-gear .gear-name { gap: 2px; }
.fighter-gear .gear-name small { font-size: .64rem; }
.fighter-gear .gear-name strong { font-size: .67rem; }
@media(max-width: 600px) {
  .battle-score dl div { display: grid; justify-content: stretch; justify-items: center; text-align: center; padding-inline: 3px; }
  .fighter-profile { padding: 10px; }
  .fighter-profile-body { grid-template-columns: minmax(0,1fr); }
  .fighter-overview { grid-row: 1; }
  .profile-silhouette { min-height: 100px; }
  .profile-silhouette img { height: min(180px,27dvh); }
  .fighter-tabs .button { min-height: 38px; font-size: .78rem; padding-inline: 6px; }
}

.setup-arena h2,.local-quests h2 { margin-bottom: 12px; }
.setup-arena form { display: grid; gap: 12px; margin-top: 14px; }
.setup-arena form > .button { justify-self: start; }
.arena-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.arena-fields label { display: grid; gap: 4px; color: var(--muted); font-size: .86rem; }
.arena-fields .arena-check { display: flex; align-items: center; gap: 8px; }
.arena-fields input:not([type=checkbox]) { min-width: 0; width: 100%; height: 38px; padding: 5px 8px; border: 1px solid #624a37; background: #15110f; color: var(--light); font: inherit; }
.arena-fields input[type=checkbox] { accent-color: #d2a172; width: 18px; height: 18px; }
#arena-requests { display: grid; gap: 7px; margin-top: 9px; }
.arena-request { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 8px; border: 1px solid #513a28; background: #251b13; border-radius: 4px; padding: 9px; }
.arena-request h3 { margin-bottom: 4px; }
.own-request { margin-top: 10px; }
.arena-request-actions { display: grid; gap: 4px; justify-items: end; }
.arena-clocks { margin-top: 5px; padding: 4px 8px; background: #18100bdc; border: 1px solid #62432c; color: #e0c6aa; font-size: .8rem; font-variant-numeric: tabular-nums; border-radius: 4px; }
.arena-clocks b { color: var(--gold); }
.damage-table { overflow-x: auto; }
.damage-table table { width: 100%; border-collapse: collapse; text-align: left; margin-top: 8px; }
.damage-table th,.damage-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: .82rem; }
.damage-table th { color: #d7b28a; }
.damage-table th:last-child,.damage-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.damage-table td:last-child { color: #edc398; font-weight: 700; }
.damage-summary > .caption { margin-top: 8px; }
.local-quests > h3 { margin: 13px 0 6px; }
.location-directory { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 6px; border-radius: 4px; background: #1a110de8; }
.location-directory span { display: inline-flex; }
.location-directory img { width: 27px; height: 27px; object-fit: cover; border: 1px solid #95734f; border-radius: 50%; }
.location-directory img + img { margin-left: -7px; }
.residents-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,147px),1fr)); gap: 8px; }
.resident-card { background: #211810; border: 1px solid #62472f; border-radius: 5px; text-align: left; overflow: hidden; padding: 0; min-width: 0; color: var(--light); display: grid; align-content: start; }
.resident-card:hover { border-color: var(--gold); }
.resident-card img { width: 100%; height: clamp(109px,15vw,155px); object-fit: cover; object-position: center 36%; display: block; background: #312116; }
.resident-card[data-resident-profile] img { object-fit: contain; object-position: center top; background: radial-gradient(ellipse,#5a3c27,#1f1710 75%); padding-top: 5px; }
.resident-card strong,.resident-card small,.resident-card span { padding-inline: 7px; overflow-wrap: anywhere; }
.resident-card strong { margin-top: 7px; font: 700 1.25rem/1.1 var(--serif); }
.resident-card small { color: var(--muted); margin: 4px 0 7px; }
.resident-card span { color: var(--gold); border-top: 1px solid #5a4230; padding-block: 5px; font-size: .8rem; }
.conversation { display: grid; grid-template-columns: minmax(104px,200px) minmax(0,1fr); gap: 12px; margin-top: 9px; align-items: start; }
.conversation img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #7f5a3b; border-radius: 5px; }
.resident-line { margin: 7px 0 10px; max-width: 52ch; }
.resident-topics { display: grid; gap: 5px; justify-items: start; }
.resident-topics button { text-align: left; }
.resident-topics button[aria-pressed=true] { color: var(--gold); border-color: #ba865b; }
.conversation-quests { font-size: 1.6rem; margin: 14px 0 8px; }
@media(max-width: 570px) {
  .arena-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .residents-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .conversation { grid-template-columns: minmax(74px,106px) minmax(0,1fr); gap: 8px; }
}