:root {
  --ad-bg: #050607;
  --ad-panel: rgba(13, 14, 16, .94);
  --ad-panel-soft: rgba(17, 18, 20, .9);
  --ad-gold: #c99842;
  --ad-gold-light: #e3c477;
  --ad-line: rgba(201, 152, 66, .34);
  --ad-line-soft: rgba(201, 152, 66, .16);
  --ad-text: #eee6d7;
  --ad-muted: #aaa090;
  --ad-danger: #e77d7d;
  --ad-success: #77c99e;
  --ad-derived: #79b9c9;
  --ad-derived-light: #b8e5ed;
}

body.adventurer-page {
  min-height: 100vh;
  color: var(--ad-text);
  background:
    radial-gradient(circle at 50% -10%, rgba(116, 77, 27, .18), transparent 34%),
    linear-gradient(rgba(4, 5, 6, .88), rgba(4, 5, 6, .97)),
    url('/assets/landing/dungeons.webp') center top / cover fixed,
    #050607;
  font-family: Inter, system-ui, sans-serif;
}

body.adventurer-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.68), transparent 24%, transparent 76%, rgba(0,0,0,.68)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 1px, transparent 1px 4px);
  z-index: 0;
}

.adventurer-page .site-header,
.adventurer-shell,
.adventurer-footer {
  position: relative;
  z-index: 2;
}

.adventurer-header {
  background: transparent;
  backdrop-filter: none;
}

.adventure-fog {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(150px);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

.adventure-fog-one { background: #b5792f; top: -230px; left: -190px; }
.adventure-fog-two { background: #423c77; right: -190px; bottom: -250px; }

.adventurer-shell {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  min-height: calc(100vh - 170px);
  padding: 44px 0 76px;
}

.adventurer-loading {
  padding: 64px 24px;
  text-align: center;
  border: 1px solid var(--ad-line);
  background: rgba(10, 11, 13, .86);
  color: var(--ad-muted);
  font-family: Cinzel, Georgia, serif;
  letter-spacing: .04em;
}

.adventurer-alert {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid rgba(231, 125, 125, .45);
  background: rgba(94, 28, 28, .36);
  color: #ffd0d0;
}

.adventurer-alert.success {
  border-color: rgba(119, 201, 158, .4);
  background: rgba(28, 81, 60, .32);
  color: #bdebd2;
}

.adventure-kicker {
  margin: 0 0 9px;
  color: var(--ad-gold);
  font: 700 11px/1 Cinzel, Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.creator-heading {
  max-width: 820px;
  margin-bottom: 28px;
}

.creator-heading h1,
.adventurer-banner h1 {
  margin: 0;
  font: 700 clamp(38px, 5vw, 62px)/1.03 Cinzel, Georgia, serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.creator-heading > p:last-child {
  max-width: 760px;
  margin: 15px 0 0;
  color: #ccc4b8;
  font: 500 18px/1.62 "Crimson Pro", Georgia, serif;
}

.creator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 28px;
  align-items: start;
}

.creator-form {
  display: grid;
  gap: 18px;
}

.creator-panel,
.equipment-board,
.character-stats,
.inventory-section {
  border: 1px solid var(--ad-line);
  background:
    linear-gradient(180deg, rgba(18,19,21,.96), rgba(8,9,11,.97));
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 24px 70px rgba(0,0,0,.24);
}

.creator-panel { padding: 24px; }

.panel-title,
.interface-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ad-line-soft);
}

.panel-title > span,
.interface-title > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ad-line);
  border-radius: 50%;
  color: var(--ad-gold-light);
  font-family: Cinzel, Georgia, serif;
}

.panel-title h2,
.interface-title h2 {
  margin: 0;
  font: 700 22px/1 Cinzel, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.interface-title small {
  margin-left: auto;
  color: var(--ad-muted);
}

.fantasy-field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.fantasy-field > span,
.fantasy-fieldset legend {
  color: #eee5d6;
  font: 700 13px/1 Cinzel, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.fantasy-field input,
.fantasy-field select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(201,152,66,.3);
  border-radius: 2px;
  background: rgba(4,5,7,.72);
  color: #f3ecdf;
  outline: none;
}

.fantasy-field input:focus,
.fantasy-field select:focus {
  border-color: var(--ad-gold);
  box-shadow: 0 0 0 3px rgba(201,152,66,.1);
}

.fantasy-field small,
.panel-copy {
  color: var(--ad-muted);
  line-height: 1.5;
}

.fantasy-fieldset {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.fantasy-fieldset legend { margin-bottom: 12px; }

.choice-grid {
  display: grid;
  gap: 10px;
}

.gender-grid { grid-template-columns: repeat(4, 1fr); }

.choice-card {
  min-height: 76px;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
  color: var(--ad-text);
  cursor: pointer;
  text-align: left;
  transition: border-color .17s, background .17s, transform .17s;
}

.choice-card:hover,
.choice-card.selected {
  transform: translateY(-2px);
  border-color: var(--ad-gold);
  background: rgba(201,152,66,.09);
}

.choice-card strong,
.choice-card small { display: block; }
.choice-card strong { font-family: Cinzel, Georgia, serif; }
.choice-card small { margin-top: 5px; color: var(--ad-muted); font-size: 10px; }

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

.portrait-choice {
  position: relative;
  min-height: 180px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #08090b;
  color: var(--ad-text);
  cursor: pointer;
}

.portrait-choice img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center 22%;
  filter: brightness(.66) saturate(.75);
  transition: filter .18s, transform .2s;
}

.portrait-choice span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  font-family: Cinzel, Georgia, serif;
  text-transform: uppercase;
}

.portrait-choice:hover img,
.portrait-choice.selected img { filter: brightness(.9) saturate(.92); transform: scale(1.025); }
.portrait-choice.selected { border-color: var(--ad-gold); }

.point-purse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--ad-line);
  background: rgba(201,152,66,.07);
}

.point-purse span {
  font-family: Cinzel, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.point-purse strong {
  font: 700 30px/1 Cinzel, Georgia, serif;
  color: var(--ad-gold-light);
}

.stat-allocation {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.stat-allocation-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 38px 44px 38px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.018);
}

.stat-allocation-row > span:first-child {
  font-family: Cinzel, Georgia, serif;
  color: #ded5c7;
}

.stat-allocation-row strong {
  text-align: center;
  font: 700 21px/1 Cinzel, Georgia, serif;
  color: var(--ad-gold-light);
}

.stat-point-button {
  width: 38px;
  height: 34px;
  border: 1px solid var(--ad-line);
  background: rgba(201,152,66,.07);
  color: var(--ad-gold-light);
  cursor: pointer;
}

.stat-point-button:disabled { opacity: .25; cursor: not-allowed; }


.derived-preview-panel {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(121, 185, 201, .34);
  background:
    linear-gradient(135deg, rgba(28, 60, 68, .22), rgba(8, 13, 16, .74));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.derived-preview-heading span,
.derived-preview-heading strong,
.derived-preview-heading small { display: block; }
.derived-preview-heading span {
  color: var(--ad-derived);
  font: 700 9px/1 Cinzel, Georgia, serif;
  letter-spacing: .16em;
}
.derived-preview-heading strong {
  margin: 7px 0 6px;
  color: var(--ad-derived-light);
  font: 700 17px/1.15 Cinzel, Georgia, serif;
  text-transform: uppercase;
}
.derived-preview-heading small {
  color: #9bb3b7;
  line-height: 1.5;
}

.creator-derived-stats {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.derived-stat-preview-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid rgba(121, 185, 201, .17);
  background: rgba(4, 10, 12, .38);
}

.derived-stat-preview-row span,
.derived-stat-preview-row strong,
.derived-stat-preview-row small { display: block; }
.derived-stat-preview-row strong {
  color: #d8e6e6;
  font: 600 12px/1.2 Cinzel, Georgia, serif;
}
.derived-stat-preview-row small {
  margin-top: 4px;
  color: #789096;
  font-size: 9px;
}
.derived-stat-preview-row b {
  color: var(--ad-derived-light);
  font: 700 21px/1 Cinzel, Georgia, serif;
}

.create-adventurer-button {
  min-height: 56px;
  border: 1px solid rgba(233,198,118,.65);
  background: linear-gradient(180deg, #dfbd70, #a9732d);
  color: #171008;
  font: 800 15px/1 Cinzel, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 14px 35px rgba(0,0,0,.25);
}

.create-adventurer-button:disabled {
  filter: grayscale(.75);
  opacity: .42;
  cursor: not-allowed;
}

.creator-preview {
  position: sticky;
  top: 20px;
}

.preview-frame {
  position: relative;
  height: 720px;
  overflow: hidden;
  border: 1px solid var(--ad-line);
  background: #08090a;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}

.preview-frame::before,
.preview-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 50px;
  height: 50px;
  border-color: var(--ad-gold);
  opacity: .7;
}

.preview-frame::before { top: 13px; left: 13px; border-top: 1px solid; border-left: 1px solid; }
.preview-frame::after { bottom: 13px; right: 13px; border-bottom: 1px solid; border-right: 1px solid; }

.preview-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: brightness(.76) saturate(.82);
}

.preview-shadow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15) 55%, rgba(0,0,0,.88)),
    linear-gradient(90deg, rgba(0,0,0,.42), transparent 22%, transparent 78%, rgba(0,0,0,.42));
}

.preview-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 38px;
  z-index: 2;
  text-align: center;
}

.preview-caption small,
.preview-caption strong,
.preview-caption span { display: block; }
.preview-caption small { color: var(--ad-gold); letter-spacing: .18em; }
.preview-caption strong { margin: 8px 0; font: 700 30px/1.05 Cinzel, Georgia, serif; }
.preview-caption span { color: #c7bfb2; }

/* Character management view */
.adventurer-banner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
  padding: 22px 28px;
  border: 1px solid var(--ad-line);
  background: linear-gradient(110deg, rgba(58,38,20,.58), rgba(12,13,16,.92) 56%);
}

.adventurer-banner p { margin: 8px 0 0; color: var(--ad-muted); }

.character-banner-badges {
  display: flex;
  align-items: stretch;
}

.character-level-badge,
.character-slot-badge {
  min-width: 160px;
  padding: 13px 16px;
  text-align: center;
  border-left: 1px solid var(--ad-line);
}

.character-level-badge {
  background: linear-gradient(135deg, rgba(121,185,201,.11), rgba(121,185,201,.025));
}

.character-level-badge small,
.character-level-badge strong,
.character-level-badge span,
.character-slot-badge small,
.character-slot-badge strong,
.character-slot-badge span { display: block; }
.character-level-badge small { color: var(--ad-derived); letter-spacing: .12em; }
.character-slot-badge small { color: var(--ad-gold); letter-spacing: .12em; }
.character-level-badge strong,
.character-slot-badge strong { margin: 5px 0; font: 700 25px/1 Cinzel, Georgia, serif; }
.character-level-badge strong { color: var(--ad-derived-light); }
.character-level-badge span,
.character-slot-badge span { color: var(--ad-muted); font-size: 10px; }

.character-interface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: stretch;
}

.equipment-board,
.character-stats,
.inventory-section { padding: 18px; }

.interface-title.compact { margin-bottom: 14px; }

.equipment-layout {
  display: grid;
  grid-template-columns: 170px minmax(280px, 1fr) 170px;
  gap: 14px;
  min-height: 670px;
}

.equipment-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.equipment-slot {
  position: relative;
  min-height: 106px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(201,152,66,.24);
  background: linear-gradient(145deg, rgba(21,21,22,.96), rgba(7,8,9,.96));
  cursor: default;
}

.equipment-slot.has-item { cursor: pointer; border-color: var(--ad-gold); }
.equipment-slot.has-item:hover { background: rgba(201,152,66,.1); }

.slot-icon-wrap {
  width: 50px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(circle, rgba(64,47,25,.2), rgba(2,3,4,.72));
}

.slot-icon-wrap img { width: 42px; height: 42px; object-fit: contain; opacity: .48; }
.equipment-slot.has-item .slot-icon-wrap img { opacity: 1; }

.slot-copy {
  min-width: 0;
}

.slot-copy strong,
.slot-copy small {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.slot-copy strong {
  font: 700 10.5px/1.22 Cinzel, Georgia, serif;
  text-transform: uppercase;
}

.slot-copy small {
  margin-top: 6px;
  color: #7f776b;
  font-size: 10px;
  line-height: 1.3;
}

.equipment-slot.has-item .slot-copy small { color: var(--ad-gold-light); }

.character-stage {
  position: relative;
  overflow: hidden;
  min-height: 670px;
  border: 1px solid rgba(201,152,66,.23);
  background:
    linear-gradient(180deg, rgba(5,6,7,.04), rgba(5,6,7,.82)),
    radial-gradient(circle at 50% 35%, rgba(172,123,48,.18), transparent 36%),
    url('/assets/landing/hero-castle.webp') center / cover;
}

.character-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 24%, transparent 76%, rgba(0,0,0,.55));
  z-index: 1;
}

.character-aura {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,166,79,.18), rgba(211,166,79,0) 65%);
  filter: blur(12px);
}

.character-stage > img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center 46%;
  filter: brightness(.83) saturate(.84) contrast(1.03);
}

.character-plinth {
  position: absolute;
  z-index: 3;
  left: 20px;
  right: 20px;
  bottom: 18px;
  padding: 17px 18px;
  text-align: center;
  border: 1px solid var(--ad-line);
  background: rgba(5,6,8,.84);
  backdrop-filter: blur(8px);
}

.character-plinth strong,
.character-plinth span { display: block; }
.character-plinth strong { font: 700 24px/1 Cinzel, Georgia, serif; }
.character-plinth span { margin-top: 6px; color: var(--ad-muted); }

.character-stats-list { display: grid; gap: 12px; }

.character-stat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
}

.character-stat-row > span:first-child {
  font: 600 13px/1 Cinzel, Georgia, serif;
  color: #ddd4c4;
}

.character-stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: Cinzel, Georgia, serif;
}

.character-stat-value strong { color: var(--ad-gold-light); font-size: 19px; }
.character-stat-value em { color: var(--ad-success); font-style: normal; font-size: 11px; }

.character-stat-bar {
  grid-column: 1 / -1;
  height: 5px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.character-stat-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9f6b2b, #e3c477);
}

.stat-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid var(--ad-line-soft);
  color: var(--ad-muted);
  font-size: 10px;
}


.derived-stats-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(121,185,201,.24);
}

.derived-stats-heading span,
.derived-stats-heading strong,
.derived-stats-heading small { display: block; }
.derived-stats-heading span {
  color: var(--ad-derived);
  font: 700 9px/1 Cinzel, Georgia, serif;
  letter-spacing: .15em;
}
.derived-stats-heading strong {
  margin: 7px 0 6px;
  color: var(--ad-derived-light);
  font: 700 17px/1.15 Cinzel, Georgia, serif;
  text-transform: uppercase;
}
.derived-stats-heading small {
  color: #839a9f;
  line-height: 1.45;
}

.character-derived-stats-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.character-derived-stat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(121,185,201,.18);
  background: linear-gradient(135deg, rgba(27,56,63,.18), rgba(6,10,12,.45));
}

.character-derived-stat-row span,
.character-derived-stat-row strong,
.character-derived-stat-row small { display: block; }
.character-derived-stat-row strong {
  color: #dbe9e9;
  font: 600 11px/1.2 Cinzel, Georgia, serif;
}
.character-derived-stat-row small {
  margin-top: 4px;
  color: #71878c;
  font-size: 8px;
  line-height: 1.35;
}
.character-derived-stat-row b {
  color: var(--ad-derived-light);
  font: 700 22px/1 Cinzel, Georgia, serif;
}

.future-panel {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--ad-line-soft);
  background: rgba(201,152,66,.045);
}

.future-panel small,
.future-panel strong { display: block; }
.future-panel small { color: var(--ad-gold); letter-spacing: .12em; }
.future-panel strong { margin: 8px 0; font-family: Cinzel, Georgia, serif; }
.future-panel p { margin: 0; color: var(--ad-muted); font-size: 11px; line-height: 1.55; }

.inventory-section { margin-top: 18px; }
.inventory-title { margin-bottom: 14px; }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(58px, 1fr));
  gap: 8px;
}

.inventory-slot {
  position: relative;
  aspect-ratio: 1;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,152,66,.18);
  background:
    radial-gradient(circle, rgba(62,45,24,.15), rgba(5,6,8,.88));
  cursor: default;
}

.inventory-slot::after {
  content: attr(data-index);
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: rgba(255,255,255,.18);
  font-size: 8px;
}

.inventory-slot img { width: 56%; height: 56%; object-fit: contain; opacity: .23; }
.inventory-slot.has-item { cursor: pointer; border-color: rgba(201,152,66,.55); }
.inventory-slot.has-item img { width: 76%; height: 76%; opacity: 1; }
.inventory-slot.has-item:hover { background: rgba(201,152,66,.1); }

.item-quantity {
  position: absolute;
  right: 5px;
  top: 4px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #17191d;
  color: var(--ad-gold-light);
  font-size: 9px;
}

.adventurer-footer {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
}

@media (max-width: 1120px) {
  .creator-layout,
  .character-interface { grid-template-columns: 1fr; }
  .creator-preview { position: static; }
  .preview-frame { height: 600px; }
  .character-stats { order: 2; }
  .inventory-grid { grid-template-columns: repeat(6, minmax(60px, 1fr)); }
}

@media (max-width: 820px) {
  .gender-grid { grid-template-columns: repeat(2, 1fr); }
  .equipment-layout {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .character-stage {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 600px;
  }
  .equipment-column { justify-content: start; }
  .interface-title { align-items: flex-start; flex-wrap: wrap; }
  .interface-title small { width: 100%; margin-left: 46px; }
}

@media (max-width: 620px) {
  .adventurer-shell,
  .adventurer-footer { width: calc(100% - 24px); }
  .creator-panel,
  .equipment-board,
  .character-stats,
  .inventory-section { padding: 14px; }
  .creator-heading h1,
  .adventurer-banner h1 { font-size: 34px; }
  .adventurer-banner { display: block; padding: 18px; }
  .character-banner-badges { margin-top: 18px; width: 100%; }
  .character-level-badge,
  .character-slot-badge { flex: 1; min-width: 0; border-top: 1px solid var(--ad-line); }
  .character-level-badge { border-left: 0; }
  .equipment-layout { grid-template-columns: 1fr; }
  .character-stage { grid-column: 1; min-height: 520px; }
  .equipment-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-slot { min-height: 94px; grid-template-columns: 48px 1fr; }
  .slot-icon-wrap { width: 46px; height: 60px; }
  .inventory-grid { grid-template-columns: repeat(5, 1fr); }
  .preview-frame { height: 540px; }
}