:root {
  color-scheme: dark;
  --app-height: 100vh;
  --game-tile-size: 48px;
  --skill-button-size: 58px;
  --joystick-radius: clamp(31px, calc(var(--game-tile-size) * 0.75), 43px);
  --joystick-size: clamp(62px, calc(var(--game-tile-size) * 1.5), 86px);
  --mobile-chat-height: calc(118px + env(safe-area-inset-bottom, 0px));
  --landscape-chat-height: 42px;
  --ink: #f8f5e8;
  --muted: #c9c0a7;
  --panel: rgba(18, 22, 29, 0.78);
  --panel-strong: rgba(18, 22, 29, 0.9);
  --line: rgba(255, 255, 255, 0.18);
  --gold: #f1bc52;
  --green: #65c073;
  --blue: #6aa8e8;
  --rose: #e06d84;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #151a1f;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

input,
textarea,
select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  font-size: max(16px, 1rem);
}

button,
canvas,
img,
svg,
.hud,
.skill-bar,
.touch-controls {
  -webkit-user-drag: none;
}

body.onboarding-active::before {
  position: fixed;
  z-index: 75;
  inset: 0;
  content: "";
  background: #000;
}

body.is-ios-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-height);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.is-ios-fullscreen .game-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-height);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

button {
  font: inherit;
}

button,
input {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  font-weight: 800;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  padding: 10px 12px;
}

.game-screen {
  position: relative;
  width: 100vw;
  height: var(--app-height);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(101, 192, 115, 0.16), transparent 32%),
    linear-gradient(180deg, #242f36, #14191f);
}

@supports (height: 100dvh) {
  .game-screen {
    height: min(var(--app-height), 100dvh);
  }
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
}

.hud {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.hud-top {
  top: 12px;
  right: 12px;
  z-index: 8;
  width: 104px;
  display: grid;
  align-items: start;
  justify-items: stretch;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hud-top > div:first-child {
  display: none;
}

.game-status-overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: grid;
  width: 166px;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(12, 15, 20, 0.58);
  color: rgba(248, 245, 232, 0.88);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.2;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

.health-status {
  display: block;
  min-width: 0;
}

#day,
#age,
#location,
#objective {
  display: none;
}

#player-summary {
  min-width: 0;
  overflow: hidden;
  color: #fff4b8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-name-row {
  order: 0;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.users-status-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.users-toggle {
  min-width: 0;
  min-height: 22px;
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(141, 208, 255, 0.44);
  border-radius: 5px;
  background: rgba(25, 66, 91, 0.72);
  color: #dff4ff;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  pointer-events: auto;
  text-shadow: none;
}

.online-count {
  min-width: 0;
  overflow: hidden;
  color: rgba(190, 224, 245, 0.88);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-toggle:hover,
.users-toggle:focus-visible,
.users-toggle[aria-expanded="true"] {
  border-color: rgba(141, 208, 255, 0.88);
  background: rgba(39, 105, 140, 0.9);
}

#level {
  order: 1;
}

.level-help-row {
  order: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.help-toggle {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid rgba(255, 244, 184, 0.38);
  border-radius: 50%;
  background: rgba(12, 15, 20, 0.62);
  color: #fff4b8;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: auto;
  text-shadow: none;
}

.help-toggle:hover,
.help-toggle:focus-visible {
  border-color: rgba(255, 244, 184, 0.78);
  background: rgba(255, 244, 184, 0.16);
}

.help-panel {
  position: absolute;
  top: 64px;
  left: 18px;
  z-index: 12;
  display: grid;
  width: min(260px, calc(100vw - 36px));
  max-height: min(240px, calc(100vh - 140px));
  gap: 10px;
  padding: 12px;
  overflow: auto;
  background: rgba(10, 13, 18, 0.94);
  color: rgba(248, 245, 232, 0.92);
  pointer-events: auto;
}

.help-panel[hidden] {
  display: none;
}

.help-panel-body {
  display: grid;
  gap: 6px;
}

.help-panel p {
  margin: 0;
  font-size: 0.83rem;
  font-weight: 800;
  line-height: 1.35;
}

.help-panel button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 950;
}

.users-panel {
  position: absolute;
  top: 18px;
  left: 204px;
  z-index: 14;
  display: grid;
  width: min(370px, calc(100vw - 332px));
  max-height: min(68vh, 520px);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  overflow: hidden;
  border-color: rgba(141, 208, 255, 0.34);
  background: rgba(9, 13, 18, 0.95);
  pointer-events: auto;
}

.users-panel[hidden] {
  display: none;
}

.users-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.users-panel-header h2 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.users-panel-header .label {
  margin: 0 0 2px;
  color: #8dd0ff;
}

.users-panel-header button {
  display: inline-grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  font-size: 1.15rem;
  line-height: 1;
}

.users-summary {
  margin: 0;
  color: rgba(248, 245, 232, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
}

.users-list {
  display: grid;
  min-height: 0;
  gap: 5px;
  margin: 0;
  padding: 0 3px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  list-style: none;
}

.users-list > li {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.users-list > li.is-me {
  border-color: rgba(255, 225, 134, 0.3);
  background: rgba(255, 225, 134, 0.08);
}

.users-rank {
  color: rgba(248, 245, 232, 0.52);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: right;
}

.users-color {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.users-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.users-name-line {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.users-name-line strong {
  min-width: 0;
  overflow: hidden;
  color: #f8f5e8;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-stats {
  flex: 0 0 auto;
  color: #bdebb3;
  font-size: 0.62rem;
  font-weight: 850;
  white-space: nowrap;
}

.users-location {
  min-width: 0;
  overflow: hidden;
  color: rgba(190, 224, 245, 0.78);
  font-size: 0.66rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-me-badge {
  margin-left: 4px;
  color: #ffe186;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 950;
}

.users-list-empty {
  grid-template-columns: 1fr !important;
  justify-items: center;
  padding: 18px 10px !important;
  color: rgba(248, 245, 232, 0.64);
  font-size: 0.74rem;
  text-align: center;
}

#lifespan {
  order: 2;
}

#health {
  order: 3;
}

.money-row {
  order: 4;
  display: grid;
  min-width: 0;
  gap: 2px;
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

#money,
#saving-money {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#money {
  color: #fff4b8;
}

#saving-money {
  color: #bdebb3;
}

.currency-amount {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.currency-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
}

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

.hud-currency-amount .currency-icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

.game-status-overlay .health-track {
  display: none;
}

.health-track {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(6, 9, 12, 0.62);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.34);
}

#health-bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38b95d, #8df06d);
  box-shadow: 0 0 10px rgba(101, 192, 115, 0.45);
  transition: width 180ms ease;
}

#objective {
  flex-basis: 100%;
  color: rgba(241, 188, 82, 0.9);
}

.building-notice {
  position: absolute;
  top: 86px;
  left: 50%;
  z-index: 7;
  display: grid;
  width: min(520px, calc(100vw - 36px));
  gap: 4px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 223, 142, 0.22);
  border-radius: 8px;
  background: rgba(13, 17, 22, 0.78);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.building-notice[hidden] {
  display: none;
}

.building-notice strong {
  color: #fff4b8;
  font-size: 0.98rem;
}

.building-notice span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.label {
  margin: 0 0 3px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: 0;
}

.auth-status {
  margin: 3px 0 0;
  max-width: min(420px, 52vw);
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.language-control {
  display: grid;
  min-width: 0;
}

.language-control select,
.google-login,
.inventory-toggle,
.characters-toggle,
.zoom-toggle,
.fullscreen-toggle,
.privacy-link {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}

.language-control select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  padding: 6px 8px;
  font-family: inherit;
  text-transform: none;
}

.google-login-slot {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
}

.google-login {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 9px;
  background: var(--panel-strong);
  color: var(--ink);
  border-color: var(--line);
}

.google-login.is-disconnect {
  background: #9f2f2f;
  border-color: #d86a5d;
  color: #fff7f2;
}

.google-login.is-disconnect:hover {
  background: #b63834;
}

.apple-login {
  background: #f5f7fb;
  border-color: #f5f7fb;
  color: #11141a;
}

.apple-login.is-disconnect {
  background: #9f2f2f;
  border-color: #d86a5d;
  color: #fff7f2;
}

.inventory-toggle,
.characters-toggle {
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
}

.zoom-toggle,
.fullscreen-toggle {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
}

.zoom-toggle::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 5px 5px 0 -3px currentColor;
}

.fullscreen-toggle::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(18, 22, 29, 0.82);
}

.privacy-link {
  display: inline-grid;
  width: 100%;
  min-height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 22, 29, 0.72);
  color: var(--muted);
  padding: 5px 9px;
  text-decoration: none;
}

.privacy-link:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.3);
}

.hud-bottom {
  display: none;
  left: 50%;
  bottom: 12px;
  width: min(560px, calc(100vw - 36px));
  max-height: 58px;
  overflow: hidden;
  transform: translateX(-50%);
  padding: 8px 11px;
  font-size: 0.82rem;
  text-align: center;
  pointer-events: none;
}

.nickname-panel {
  left: 50%;
  top: 50%;
  width: min(360px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  padding: 16px;
}

.nickname-panel[hidden] {
  display: none;
}

.nickname-panel h2 {
  margin: 0 0 12px;
  letter-spacing: 0;
}

#nickname-form {
  display: grid;
  gap: 10px;
}

.nickname-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.idea-panel {
  left: 50%;
  top: 50%;
  z-index: 54;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(var(--app-height) - 28px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 18px;
  border-color: rgba(120, 223, 184, 0.38);
  background: rgba(10, 17, 18, 0.96);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.56),
    0 0 34px rgba(94, 214, 171, 0.1);
}

.idea-panel[hidden] {
  display: none;
}

.idea-panel form {
  display: grid;
  gap: 12px;
}

.idea-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.idea-panel h2 {
  color: #eafff5;
  font-size: 1.16rem;
}

.idea-panel textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(4, 8, 10, 0.82);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.35;
  outline: none;
}

.idea-panel textarea:focus {
  border-color: rgba(120, 223, 184, 0.72);
  box-shadow: 0 0 0 3px rgba(120, 223, 184, 0.14);
}

.idea-image-picker {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px dashed rgba(120, 223, 184, 0.34);
  border-radius: 8px;
  color: #eafff5;
  background: rgba(4, 8, 10, 0.58);
  font-weight: 800;
}

.idea-image-choose {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(120, 223, 184, 0.46);
  color: #edfff7;
  background: linear-gradient(135deg, rgba(38, 126, 94, 0.88), rgba(24, 84, 72, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.idea-image-choose:hover,
.idea-image-choose:focus-visible {
  border-color: rgba(157, 246, 211, 0.78);
  background: linear-gradient(135deg, rgba(47, 151, 112, 0.94), rgba(29, 102, 85, 0.98));
}

.idea-image-choose-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(225, 255, 243, 0.38);
  border-radius: 50%;
  background: rgba(4, 20, 16, 0.3);
  font-size: 1.15rem;
  line-height: 1;
}

.idea-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.idea-image-picker small,
.idea-image-status,
.idea-image-meta {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.4;
}

.idea-image-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.idea-image-preview[hidden] {
  display: none;
}

.idea-image-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  object-fit: contain;
}

.idea-image-preview > div {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.idea-image-status {
  min-height: 1.1em;
  margin: -4px 0 0;
}

#idea-image-remove {
  min-height: 34px;
  padding: 5px 9px;
  color: #eef1f4;
  background: rgba(38, 43, 49, 0.9);
}

.idea-panel button {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 900;
}

#idea-close {
  width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 1.2rem;
}

#idea-submit {
  border-color: rgba(120, 223, 184, 0.54);
  color: #edfff7;
  background: rgba(38, 126, 94, 0.72);
}

.idea-panel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#idea-cancel {
  color: #eef1f4;
  background: rgba(38, 43, 49, 0.9);
}

.profile-switch-panel,
.auth-choice-panel {
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  padding: 16px;
}

.profile-switch-panel[hidden],
.auth-choice-panel[hidden] {
  display: none;
}

.profile-switch-panel h2,
.auth-choice-panel h2 {
  margin: 0 0 10px;
  letter-spacing: 0;
}

.inventory-panel {
  top: 110px;
  right: 18px;
  z-index: 9;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(440px, calc(100vw - 36px));
  max-height: calc(var(--app-height) - 132px);
  overflow: hidden;
  padding: 12px;
}

.inventory-panel[hidden] {
  display: none;
}

.guide-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid rgba(231, 205, 132, 0.55);
  border-radius: 999px;
  color: #f3d98e;
  background: rgba(17, 23, 28, 0.72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.guide-shortcut:hover,
.guide-shortcut:focus-visible {
  color: #fff3c8;
  border-color: #f3d98e;
  background: rgba(70, 55, 25, 0.82);
}

.characters-panel {
  left: 50%;
  top: 50%;
  z-index: 54;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(520px, calc(100vw - 28px));
  max-height: min(620px, calc(var(--app-height) - 28px));
  overflow: hidden;
  gap: 10px;
  padding: 14px;
  transform: translate(-50%, -50%);
}

.characters-panel[hidden] {
  display: none;
}

.characters-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.characters-panel-header h2 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: 0;
}

#characters-close {
  width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 1.2rem;
}

.characters-list {
  display: grid;
  min-height: 0;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.characters-list::-webkit-scrollbar {
  width: 8px;
}

.characters-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.characters-summary,
.characters-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.character-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.character-row.is-selected {
  border-color: rgba(141, 240, 109, 0.58);
  background: rgba(141, 240, 109, 0.1);
  box-shadow: inset 0 0 18px rgba(141, 240, 109, 0.08);
}

.character-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.character-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.character-row strong,
.character-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-row strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.character-row span {
  color: var(--muted);
  font-size: 0.76rem;
}

.character-row button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 900;
}

.character-row .character-delete-button {
  border-color: rgba(255, 116, 116, 0.58);
  background: rgba(104, 24, 31, 0.72);
  color: #ffe2e2;
}

.characters-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.characters-form input,
.characters-form button {
  min-height: 40px;
  border-radius: 8px;
  font-family: inherit;
}

.characters-form input {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(7, 11, 16, 0.72);
  color: var(--ink);
  padding: 8px 10px;
}

.characters-form button {
  padding: 7px 12px;
  font-weight: 900;
}

.skills-panel {
  top: 110px;
  right: 18px;
  z-index: 9;
  width: min(430px, calc(100vw - 36px));
  max-height: calc(100vh - 132px);
  overflow: hidden;
  padding: 12px;
}

.skills-panel[hidden] {
  display: none;
}

.skills-list {
  display: grid;
  max-height: calc(100vh - 198px);
  overflow-y: auto;
  padding-right: 4px;
  gap: 10px;
  scrollbar-width: thin;
}

.inventory-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inventory-header h2 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: 0;
}

.inventory-header button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.76rem;
}

.inventory-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inventory-header .inventory-medal-toggle,
.inventory-header .inventory-stats-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-color: rgba(242, 199, 88, 0.48);
  color: #ffe9a1;
  background: rgba(79, 54, 22, 0.72);
}

.inventory-header .inventory-medal-toggle:hover,
.inventory-header .inventory-medal-toggle:focus-visible,
.inventory-header .inventory-medal-toggle.is-active,
.inventory-header .inventory-stats-toggle:hover,
.inventory-header .inventory-stats-toggle:focus-visible {
  border-color: rgba(255, 225, 128, 0.88);
  background: rgba(117, 79, 27, 0.88);
  box-shadow: 0 0 12px rgba(241, 188, 82, 0.2);
}

.inventory-medal-toggle-icon,
.inventory-stats-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

.player-stats-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 10px 0 2px;
}

.player-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(114, 214, 255, 0.24);
  border-radius: 9px;
  background: rgba(23, 42, 58, 0.72);
}

.player-stats-row strong {
  color: #aee8ff;
}

.inventory-list {
  display: grid;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 4px;
  gap: 8px;
  scrollbar-width: thin;
}

.inventory-list::-webkit-scrollbar {
  width: 8px;
}

.inventory-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.inventory-section {
  display: grid;
  gap: 8px;
}

.inventory-body-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(210px, 1.2fr);
  gap: 12px;
  align-items: start;
}

.inventory-section h3 {
  margin: 2px 0 0;
  color: #fff4b8;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inventory-money,
.inventory-detail {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 8px;
}

.inventory-money span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.inventory-money strong {
  display: block;
  margin-top: 2px;
}

.equipment-cross {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-areas:
    ". helmet ."
    "weapon armor offhand"
    ". shoes ring"
    ". vehicle .";
  justify-content: center;
  gap: 6px;
}

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

.inventory-cell,
.inventory-slot {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.inventory-cell {
  min-height: 54px;
}

.inventory-slot {
  width: 44px;
  height: 44px;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-cell:hover:not(:disabled),
.inventory-slot:hover:not(:disabled) {
  border-color: rgba(141, 240, 109, 0.52);
  background: rgba(141, 240, 109, 0.08);
}

.inventory-cell.is-selected,
.inventory-slot.is-selected {
  border-color: #74e36a;
  box-shadow: 0 0 0 2px rgba(116, 227, 106, 0.28), inset 0 0 18px rgba(116, 227, 106, 0.12);
}

.inventory-cell.is-empty,
.inventory-slot.is-empty {
  cursor: default;
  opacity: 0.52;
}

.item-icon {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff4b8;
  font-weight: 950;
  overflow: hidden;
}

.item-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.04);
  image-rendering: auto;
}

.item-quantity {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 3;
  min-width: 22px;
  max-width: calc(100% - 4px);
  padding: 1px 5px;
  border: 1px solid rgba(255, 244, 184, 0.62);
  border-radius: 999px;
  background: rgba(8, 11, 16, 0.96);
  color: #fff4b8;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.inventory-cell.is-enhanced,
.inventory-slot.is-enhanced {
  border-color: rgba(255, 203, 82, 0.92);
  background: radial-gradient(circle at 50% 42%, rgba(255, 215, 101, 0.2), rgba(255, 132, 35, 0.045) 70%);
  box-shadow: 0 0 8px rgba(255, 181, 54, 0.68), inset 0 0 12px rgba(255, 220, 110, 0.18);
  animation: enhanced-item-glow 1.65s ease-in-out infinite alternate;
}

.inventory-cell.is-enhanced-max,
.inventory-slot.is-enhanced-max {
  border-color: rgba(237, 218, 255, 0.98);
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), rgba(159, 86, 255, 0.1) 72%);
  box-shadow: 0 0 11px rgba(219, 171, 255, 0.88), inset 0 0 15px rgba(255, 255, 255, 0.22);
  animation-name: enhanced-item-max-glow;
}

.item-icon.is-enhanced img {
  filter: drop-shadow(0 0 4px rgba(255, 211, 91, 0.9));
}

.item-icon.is-enhanced-max img {
  filter: drop-shadow(0 0 5px rgba(236, 214, 255, 1)) drop-shadow(0 0 8px rgba(167, 92, 255, 0.78));
}

.item-enhancement-level {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 4;
  padding: 1px 4px;
  border: 1px solid rgba(255, 239, 177, 0.8);
  border-radius: 999px;
  background: rgba(28, 18, 8, 0.9);
  color: #ffe99e;
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1.2;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.item-icon.is-enhanced-max .item-enhancement-level {
  border-color: rgba(241, 221, 255, 0.95);
  background: rgba(41, 18, 67, 0.94);
  color: #fff;
}

@keyframes enhanced-item-glow {
  from {
    box-shadow: 0 0 6px rgba(255, 181, 54, 0.5), inset 0 0 10px rgba(255, 220, 110, 0.14);
  }
  to {
    box-shadow: 0 0 13px rgba(255, 190, 64, 0.9), inset 0 0 16px rgba(255, 230, 139, 0.25);
  }
}

@keyframes enhanced-item-max-glow {
  from {
    box-shadow: 0 0 8px rgba(209, 155, 255, 0.65), inset 0 0 12px rgba(255, 255, 255, 0.18);
  }
  to {
    box-shadow: 0 0 16px rgba(231, 195, 255, 1), 0 0 24px rgba(138, 75, 255, 0.45), inset 0 0 18px rgba(255, 255, 255, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inventory-cell.is-enhanced,
  .inventory-slot.is-enhanced {
    animation: none;
  }
}

.inventory-money-drop {
  min-height: 30px;
  margin-top: 6px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 900;
}

.item-icon-weapon {
  color: #fff4b8;
}

.item-icon-armor {
  color: #9dd7ff;
}

.item-icon-accessory {
  color: #d8b4ff;
}

.item-icon-vehicle {
  color: #f1bc52;
}

.inventory-detail {
  min-height: 112px;
}

.inventory-detail h3 {
  margin: 0;
  color: #fff4b8;
  font-size: 0.94rem;
  text-transform: none;
}

.dimension-medal-drawer {
  padding: 9px;
  border: 1px solid rgba(241, 188, 82, 0.28);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(66, 45, 20, 0.5), rgba(13, 18, 25, 0.78));
  box-shadow: inset 0 0 18px rgba(241, 188, 82, 0.05);
}

.dimension-medal-drawer-header {
  display: grid;
  gap: 4px;
}

.dimension-medal-drawer-header p,
.dimension-medal-empty {
  margin: 0;
  color: #c7c2b2;
  font-size: 0.7rem;
  line-height: 1.4;
}

.dimension-medal-groups,
.dimension-medal-group {
  display: grid;
  gap: 7px;
}

.dimension-medal-group + .dimension-medal-group {
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.dimension-medal-group h4 {
  margin: 0;
  color: #ffe8a0;
  font-size: 0.72rem;
  font-weight: 900;
}

.dimension-medal-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(7, 11, 16, 0.62);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.dimension-medal-row.is-active {
  border-color: rgba(248, 204, 85, 0.65);
  background: rgba(91, 62, 22, 0.42);
  box-shadow: inset 0 0 14px rgba(245, 193, 68, 0.08);
}

.dimension-medal-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 228, 148, 0.22);
  border-radius: 9px;
  background: radial-gradient(circle at 50% 38%, rgba(247, 209, 105, 0.2), rgba(16, 21, 28, 0.72));
}

.dimension-medal-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dimension-medal-copy strong {
  color: #f8f3e5;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dimension-medal-copy .dimension-medal-bonus {
  color: #ffd66f;
  font-size: 0.72rem;
  font-weight: 900;
}

.dimension-medal-copy p {
  margin: 2px 0 0;
  color: #aaa99f;
  font-size: 0.66rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dimension-medal-state {
  min-width: 62px;
  min-height: 38px;
  padding: 5px 8px;
  border-color: rgba(255, 255, 255, 0.18);
  color: #b8bdc4;
  background: rgba(21, 27, 35, 0.92);
  font-size: 0.68rem;
  font-weight: 950;
}

.dimension-medal-state.is-active {
  border-color: rgba(129, 225, 100, 0.62);
  color: #e8ffe2;
  background: rgba(42, 103, 42, 0.78);
}

.admin-announcement {
  position: absolute;
  z-index: 43;
  top: max(72px, calc(env(safe-area-inset-top, 0px) + 54px));
  left: 50%;
  width: min(720px, calc(100% - 180px));
  transform: translateX(-50%);
  padding: 10px 16px;
  border: 1px solid rgba(255, 220, 120, 0.54);
  border-radius: 7px;
  color: #fff4bd;
  background: rgba(12, 15, 20, 0.72);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.admin-announcement[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .admin-announcement {
    top: max(66px, calc(env(safe-area-inset-top, 0px) + 48px));
    width: calc(100% - 28px);
    padding: 8px 12px;
    font-size: 0.92rem;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .admin-announcement {
    top: max(146px, calc(env(safe-area-inset-top, 0px) + 128px));
  }
}

.inventory-detail-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.inventory-detail-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 244, 184, 0.22);
  border-radius: 8px;
  background: rgba(3, 8, 14, 0.42);
}

.equipment-quick-facts {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(3, 8, 14, 0.38);
}

.equipment-fact-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: baseline;
}

.equipment-fact-row span,
.equipment-stat-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.equipment-fact-row strong {
  color: #f6f1de;
  font-size: 0.74rem;
  line-height: 1.3;
}

.equipment-fact-row strong.is-class-value {
  color: #9cf184;
}

.equipment-stat-block {
  display: grid;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.equipment-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.equipment-stat-chips strong {
  padding: 3px 6px;
  border: 1px solid rgba(240, 190, 72, 0.32);
  border-radius: 999px;
  background: rgba(240, 190, 72, 0.1);
  color: #ffe59a;
  font-size: 0.68rem;
  line-height: 1.2;
}

.inventory-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.inventory-detail .inventory-item-description,
.shop-detail .inventory-item-description {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.item-buttons {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.item-slot-buttons {
  display: contents;
}

.item-slot-buttons span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.item-buttons button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 0.72rem;
}

.item-buttons .item-drop-button {
  border-color: rgba(237, 126, 119, 0.52);
  color: #ffd5d1;
}

.item-buttons .item-drop-button:not(:disabled):hover {
  background: rgba(150, 53, 48, 0.34);
}

.skill-bar {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: var(--skill-button-size, 58px);
  gap: 8px;
  transform: translateY(-50%);
}

.skill-bar-left {
  left: 14px;
}

.skill-bar-right {
  right: 14px;
}

.emote-button > span {
  font-size: 1.45em;
  line-height: 1;
}

.emote-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(48px, 1fr));
  gap: 8px;
}

.emote-picker-option {
  min-width: 48px;
  min-height: 48px;
  padding: 4px;
  font-size: 1.65rem;
}

.skill-bar button {
  position: relative;
  display: grid;
  width: var(--skill-button-size, 58px);
  height: var(--skill-button-size, 58px);
  place-items: center;
  padding: 3px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(12, 15, 20, 0.66);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.skill-bar button.is-empty {
  opacity: 0.58;
}

.skill-bar .interaction-button {
  border-color: rgba(112, 255, 143, 0.24);
  background: rgba(12, 15, 20, 0.78);
}

.skill-bar .interaction-button.has-interaction {
  border-color: rgba(106, 227, 132, 0.78);
  background: rgba(24, 86, 47, 0.86);
  box-shadow: inset 0 0 20px rgba(114, 255, 146, 0.16), 0 8px 22px rgba(0, 0, 0, 0.28);
}

.interaction-button-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}

.interaction-button-icon::before,
.interaction-button-icon::after {
  position: absolute;
  content: "";
}

.interaction-button-icon::before {
  inset: 5px;
  border: 4px solid #dfffe3;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(223, 255, 227, 0.16);
}

.interaction-button-icon::after {
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfffe3;
  box-shadow:
    -14px 0 0 rgba(223, 255, 227, 0.86),
    14px 0 0 rgba(223, 255, 227, 0.86),
    0 -14px 0 rgba(223, 255, 227, 0.86),
    0 14px 0 rgba(223, 255, 227, 0.86);
  transform: translate(-50%, -50%);
}

.skill-button-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: #fff4b8;
  font-size: 0.72rem;
  font-weight: 950;
}

.skill-button-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.skill-keycap,
.skill-quantity {
  position: absolute;
  display: grid;
  min-width: 17px;
  min-height: 17px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 244, 184, 0.92);
  color: #10141a;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
}

.skill-keycap {
  left: 3px;
  top: 3px;
}

.skill-quantity {
  right: 3px;
  bottom: 3px;
}

.skill-caption {
  display: -webkit-box;
  max-width: calc(var(--skill-button-size, 58px) - 8px);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(0.48rem, 0.56rem, 0.62rem);
  line-height: 1.02;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.skill-bar button.is-empty .skill-caption {
  font-size: 0.5rem;
}

.shop-confirm-quantity-panel {
  display: grid;
  gap: 9px;
}

.shop-confirm-quantity-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}
  max-width: 48px;
  overflow: hidden;
  color: rgba(248, 245, 232, 0.9);
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-config-section {
  gap: 8px;
}

.skill-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.skill-config-header h3 {
  margin: 0;
}

.skill-slots-overview-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 12px;
}

.skill-slot-current {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.skill-slot-current .skill-button-icon {
  flex: 0 0 auto;
}

.skill-slot-current span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.skill-config-list,
.skill-available-list {
  display: grid;
  gap: 7px;
}

.skill-generation-list {
  display: grid;
  gap: 10px;
}

.skill-generation-group {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.skill-generation-label {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 7px 4px;
  border: 1px solid rgba(255, 224, 130, 0.28);
  border-radius: 8px;
  color: #fff0a6;
  background: linear-gradient(180deg, rgba(118, 86, 32, 0.42), rgba(46, 35, 20, 0.58));
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.skill-generation-empty {
  display: grid;
  place-items: center;
  min-height: 48px;
  margin: 0;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.34);
}

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

.skill-available-list {
  grid-template-columns: minmax(0, 1fr);
}

.skill-config-row,
.skill-available-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.skill-config-row > div,
.skill-available-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.skill-config-row strong,
.skill-available-row strong {
  overflow: hidden;
  color: #fff4b8;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-config-row span,
.skill-available-row span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.skill-row-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(44px, 1fr);
  gap: 5px;
}

.skill-row-actions .skill-toggle-button {
  min-width: 44px;
  min-height: 26px;
  padding: 3px 7px;
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(248, 245, 232, 0.72);
  background: rgba(255, 255, 255, 0.06);
}

.skill-row-actions .skill-toggle-button.is-enabled {
  border-color: rgba(105, 231, 149, 0.68);
  color: #eaffef;
  background: rgba(55, 153, 91, 0.34);
}

.skill-slot-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.skill-slot-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  min-width: 0;
}

.skill-slot-picker-row .skill-slot-assign {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-slot-picker-row .skill-slot-clear {
  border-color: rgba(255, 128, 128, 0.34);
  color: #ffd0d0;
  background: rgba(96, 30, 35, 0.52);
}

.skill-slot-picker-row .skill-slot-clear:disabled {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.04);
}

.skill-slot-popover,
.skill-detail-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 224, 130, 0.22);
  border-radius: 8px;
  background: rgba(9, 12, 20, 0.84);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.skill-slot-popover-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.skill-slot-popover-header strong {
  overflow: hidden;
  color: #fff4b8;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-detail-panel p {
  margin: 0;
  color: rgba(248, 245, 232, 0.9);
  font-size: 0.72rem;
  line-height: 1.35;
}

.skill-detail-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.7rem;
}

.skill-detail-panel strong {
  color: #fff4b8;
  font-size: 0.74rem;
}

.first-advancement-offer {
  display: grid;
  gap: 10px;
}

.first-advancement-offer > p {
  margin: 0;
  color: rgba(248, 245, 232, 0.94);
  line-height: 1.55;
  white-space: pre-line;
}

.first-advancement-offer > section {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 224, 130, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.first-advancement-offer > section strong {
  color: #ffe68d;
  font-size: 0.72rem;
}

.first-advancement-offer > section span {
  color: rgba(248, 245, 232, 0.86);
  font-size: 0.76rem;
  line-height: 1.4;
}

.skill-slot-picker button,
.skill-config-row > button,
.skill-row-actions button,
.skill-slot-popover-header button {
  min-height: 30px;
  padding: 4px 6px;
  font-size: 0.66rem;
}

.title-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.title-row,
.title-list > button {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  text-align: left;
}

.title-row.is-selected {
  border-color: rgba(116, 227, 106, 0.72);
  background: rgba(116, 227, 106, 0.12);
  color: #efffe9;
}

.title-row:disabled {
  opacity: 0.58;
}

.sacrifice-aura-control {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sacrifice-aura-control.is-size {
  margin-top: 5px;
}

.sacrifice-aura-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #f7f2f7;
  font-size: 0.78rem;
  font-weight: 800;
}

.sacrifice-aura-header output {
  min-width: 3.2em;
  color: #f5d57a;
  text-align: right;
}

.sacrifice-aura-control input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #ff5275;
}

.trade-panel {
  display: grid;
  gap: 7px;
}

.trade-targets,
.trade-inputs,
.trade-offer-row {
  display: grid;
  gap: 5px;
}

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

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

.trade-inputs input:last-child {
  grid-column: 1 / -1;
}

.trade-target,
.trade-panel button,
.trade-inputs input {
  min-height: 30px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.trade-inputs input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(11, 14, 20, 0.76);
  color: var(--ink);
  padding: 5px 8px;
}

.trade-target.is-selected {
  border-color: rgba(116, 227, 106, 0.72);
  background: rgba(116, 227, 106, 0.12);
}

.trade-offer-row {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.trade-offer-row span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.trade-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 35;
  width: min(860px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 28px));
  transform: translate(-50%, -50%);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(10, 13, 18, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
}

.trade-modal h2,
.trade-modal h3,
.trade-modal p {
  margin: 0;
}

.trade-modal h2 {
  color: #fff4b8;
  font-size: 1rem;
}

.trade-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.trade-status-pill {
  display: inline-grid;
  min-height: 26px;
  place-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.68rem;
  font-weight: 950;
}

.trade-status-pill.is-checked {
  border-color: rgba(116, 227, 106, 0.58);
  color: #d8ffd4;
  background: rgba(116, 227, 106, 0.18);
  box-shadow: inset 0 0 16px rgba(116, 227, 106, 0.12);
}

.trade-status-pill.is-recheck {
  border-color: rgba(255, 244, 184, 0.58);
  color: #fff4b8;
  background: rgba(255, 244, 184, 0.12);
}

.trade-quantity-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(230px, 0.8fr) minmax(150px, 0.5fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(241, 188, 82, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(241, 188, 82, 0.12), rgba(116, 227, 106, 0.06)),
    rgba(13, 17, 23, 0.96);
  box-shadow: inset 0 0 22px rgba(241, 188, 82, 0.05);
}

.trade-quantity-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.trade-quantity-heading .item-icon {
  width: 38px;
  height: 38px;
}

.trade-quantity-heading strong {
  display: block;
  color: #fff4b8;
  font-size: 0.78rem;
}

.trade-quantity-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.trade-quantity-controls {
  display: grid;
  grid-template-columns: 36px minmax(62px, 1fr) 36px minmax(54px, auto);
  gap: 5px;
}

.trade-quantity-controls button,
.trade-quantity-controls input,
.trade-quantity-actions button {
  min-width: 0;
  min-height: 36px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.trade-quantity-controls input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 8, 12, 0.88);
  color: var(--ink);
  padding: 5px 7px;
  text-align: center;
}

.trade-quantity-step {
  padding: 0;
  font-size: 1rem !important;
}

.trade-quantity-all {
  padding: 5px 8px;
  color: #fff4b8;
}

.trade-quantity-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trade-quantity-actions .is-primary {
  border-color: rgba(116, 227, 106, 0.66);
  color: #061008;
  background: linear-gradient(180deg, #8df06d, #58c94f);
}

.trade-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.trade-column {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.trade-column h3 {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.trade-column input {
  min-height: 34px;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(11, 14, 20, 0.82);
  color: var(--ink);
  padding: 6px 8px;
}

.trade-money-controls {
  display: grid;
  gap: 6px;
}

.trade-money-quick-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trade-money-quick-row button {
  min-height: 30px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 900;
}

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

.trade-grid .inventory-cell {
  min-height: 42px;
}

.trade-grid .inventory-cell.is-trade-clickable {
  cursor: pointer;
}

.trade-grid .inventory-cell.is-trade-clickable:hover:not(:disabled) {
  border-color: rgba(255, 244, 184, 0.6);
  background: rgba(255, 244, 184, 0.09);
}

.trade-grid .inventory-cell.is-trade-locked,
.trade-column input:disabled,
.trade-money-quick-row button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.trade-modal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.trade-modal-actions button {
  min-height: 36px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.trade-modal-actions .trade-check-button.is-checked {
  border-color: rgba(116, 227, 106, 0.62);
  color: #d8ffd4;
  background: rgba(116, 227, 106, 0.2);
}

.trade-modal-actions .trade-confirm-button {
  border-color: rgba(116, 227, 106, 0.26);
  color: rgba(216, 255, 212, 0.82);
}

.trade-modal-actions .trade-confirm-button.is-ready {
  border-color: rgba(116, 227, 106, 0.72);
  color: #061008;
  background: linear-gradient(180deg, #8df06d, #58c94f);
  box-shadow: 0 0 18px rgba(116, 227, 106, 0.24);
}

.death-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 42;
  display: grid;
  width: min(360px, calc(100vw - 28px));
  gap: 10px;
  transform: translate(-50%, -50%);
  padding: 18px;
  border: 1px solid rgba(255, 244, 184, 0.22);
  border-radius: 8px;
  background: rgba(10, 13, 18, 0.95);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  pointer-events: auto;
  text-align: center;
}

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

.death-modal h2,
.death-modal p {
  margin: 0;
}

.death-modal h2 {
  color: #fff4b8;
  font-size: 1.15rem;
}

.death-modal p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.38;
}

.death-modal button {
  min-height: 40px;
  margin-top: 4px;
  border-radius: 8px;
  font-weight: 900;
}

.satan-choice-modal {
  z-index: 46;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  gap: 14px;
  padding: 22px;
  border-color: rgba(255, 65, 101, 0.42);
  background: rgba(12, 7, 14, 0.97);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.62),
    0 0 44px rgba(255, 49, 88, 0.12);
}

.satan-choice-modal h2 {
  color: #ffe39b;
  font-size: 1.32rem;
}

.satan-choice-modal .satan-choice-story {
  color: #eee4ef;
  font-size: 0.94rem;
  line-height: 1.5;
}

.satan-choice-modal .satan-choice-contribution {
  color: #ff8ca3;
  font-weight: 800;
}

.satan-choice-modal .satan-refuse-record {
  padding: 9px 10px;
  border-left: 3px solid #f5d57a;
  color: #f6e8b2;
  background: rgba(245, 213, 122, 0.08);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.4;
}

.satan-choice-modal h3 {
  color: #fff0b0;
  font-size: 0.94rem;
}

.satan-result-choice {
  color: #f7f2f7;
  font-size: 1rem;
  font-weight: 850;
}

.satan-result-rewards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.satan-result-rewards li {
  padding: 10px 12px;
  border-left: 3px solid #75d99a;
  color: #e9fff0;
  background: rgba(74, 196, 119, 0.1);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.42;
}

.satan-result-consequence,
.satan-result-warning,
.satan-result-return {
  font-size: 0.87rem;
  line-height: 1.45;
}

.satan-result-consequence {
  color: #d7ced8;
}

.satan-result-warning {
  color: #ffd18c;
}

.satan-result-return {
  color: #b9e6ff;
  font-weight: 800;
}

.satan-result-close {
  width: 100%;
}

.satan-choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.satan-choice-button {
  display: grid;
  min-height: 132px;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #f7f2f7;
  background: #21151f;
  text-align: left;
}

.satan-choice-button strong {
  color: #fff0b0;
  font-size: 1rem;
}

.satan-choice-button span {
  color: #cfc1d0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.42;
}

.satan-choice-button.is-sacrifice {
  border-color: rgba(255, 49, 88, 0.52);
  background: #29101b;
}

.satan-choice-button.is-refuse {
  border-color: rgba(245, 213, 122, 0.45);
  background: #242018;
}

.job-choice-modal {
  z-index: 47;
  width: min(680px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  gap: 14px;
  padding: 20px;
  border-color: rgba(255, 244, 184, 0.3);
  background: rgba(10, 13, 18, 0.96);
  text-align: left;
}

.job-choice-modal h2 {
  text-align: center;
}

.dialogue-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialogue-modal-header h2 {
  flex: 1;
  margin: 0;
}

.dialogue-close-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 7px;
  color: #f2f2f2;
  background: rgba(255, 255, 255, 0.07);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.ardin-dialogue-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 78;
  display: grid;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  gap: 16px;
  transform: translate(-50%, -50%);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(215, 189, 114, 0.52);
  border-radius: 8px;
  background: rgba(12, 18, 28, 0.97);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 32px rgba(125, 164, 222, 0.12);
  pointer-events: auto;
}

.ardin-dialogue-modal > .dialogue-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

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

.ardin-dialogue-content {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.ardin-portrait-frame {
  display: grid;
  gap: 7px;
  margin: 0;
}

.ardin-portrait-canvas {
  display: block;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(215, 189, 114, 0.4);
  border-radius: 6px;
  background: #243856;
  image-rendering: auto;
}

.ardin-portrait-frame figcaption {
  color: #aebdd0;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.ardin-dialogue-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding-right: 34px;
}

.ardin-dialogue-copy h2,
.ardin-dialogue-copy p {
  margin: 0;
}

.ardin-dialogue-copy h2 {
  color: #f5dfa0;
  font-size: 1.18rem;
  text-align: left;
}

.avelia-dialogue-modal {
  border-color: rgba(156, 232, 255, 0.5);
  background: rgba(10, 23, 35, 0.97);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 36px rgba(93, 181, 224, 0.18);
}

.avelia-portrait-canvas {
  border-color: rgba(156, 232, 255, 0.5);
  background: #28475f;
}

.avelia-dialogue-quest {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(156, 232, 255, 0.24);
  border-radius: 6px;
  background: rgba(85, 143, 170, 0.13);
}

.avelia-dialogue-quest h3,
.avelia-dialogue-quest p {
  margin: 0;
}

.avelia-dialogue-quest h3 {
  color: #c7efff;
  font-size: 0.92rem;
}

.avelia-dialogue-quest strong {
  color: #f4d984;
  font-size: 0.82rem;
}

.ardin-dialogue-copy p {
  color: #f0eee8;
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.58;
  white-space: pre-wrap;
}

.ardin-dialogue-copy .ardin-dialogue-error {
  color: #ff9a9a;
  font-size: 0.82rem;
}

.ardin-dialogue-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-left: 198px;
}

.ardin-dialogue-actions button {
  min-height: 42px;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 900;
}

.ardin-dialogue-actions button:only-child {
  grid-column: 1 / -1;
}

.ardin-dialogue-actions button.primary {
  border-color: rgba(126, 190, 120, 0.62);
  color: #eefce9;
  background: #27482d;
}

.job-choice-list {
  display: grid;
  gap: 9px;
}

.job-choice-option,
.job-choice-summary {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--job-color, #9aa1aa) 55%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--job-color, #9aa1aa) 18%, transparent), transparent),
    rgba(255, 255, 255, 0.055);
  color: #f7f8fa;
  text-align: left;
}

.job-choice-option strong,
.job-choice-summary strong {
  color: #fff4b8;
  font-size: 1rem;
}

.job-choice-option span,
.job-choice-summary span,
.job-choice-summary li {
  color: rgba(239, 242, 246, 0.86);
  font-size: 0.84rem;
  line-height: 1.36;
}

.job-choice-option.is-selected {
  border-color: rgba(255, 74, 74, 0.95);
  background:
    linear-gradient(90deg, rgba(184, 28, 37, 0.56), rgba(88, 10, 17, 0.28)),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 124, 124, 0.28);
}

.job-choice-option.is-selected strong {
  color: #fff;
}

.job-setup-result {
  border-color: rgba(115, 210, 137, 0.62);
  background:
    linear-gradient(90deg, rgba(39, 109, 61, 0.34), rgba(18, 52, 31, 0.12)),
    rgba(255, 255, 255, 0.055);
}

.job-setup-result li::marker {
  color: #7fe39a;
}

.job-choice-summary ul {
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
  padding-left: 18px;
}

.job-choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.job-choice-select-actions {
  grid-template-columns: 1fr;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .satan-choice-modal,
  .job-choice-modal {
    padding: 16px;
  }

  .satan-choice-actions,
  .job-choice-actions {
    grid-template-columns: 1fr;
  }

  .satan-choice-button {
    min-height: 104px;
  }

  .ardin-dialogue-modal {
    width: min(430px, calc(100vw - 20px));
    padding: 14px;
  }

  .ardin-dialogue-content {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 12px;
  }

  .ardin-portrait-canvas {
    width: 116px;
    height: 116px;
  }

  .ardin-dialogue-copy {
    gap: 7px;
    padding-right: 30px;
  }

  .ardin-dialogue-copy h2 {
    font-size: 1rem;
  }

  .ardin-dialogue-copy p {
    font-size: 0.84rem;
    line-height: 1.45;
  }

  .ardin-dialogue-actions {
    margin-left: 0;
  }
}

.dimension-story-modal {
  position: fixed;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(2, 5, 10, 0.84);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

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

.dimension-story-card {
  display: grid;
  width: min(720px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  gap: 13px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgba(227, 210, 157, 0.4);
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(20, 29, 43, 0.98), rgba(8, 12, 20, 0.99));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.68), 0 0 34px rgba(137, 193, 255, 0.1);
}

.dimension-story-illustration {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(196, 222, 255, 0.42);
  border-radius: 8px;
  color: rgba(233, 242, 255, 0.78);
  background:
    radial-gradient(circle at 50% 44%, rgba(146, 205, 255, 0.18), transparent 38%),
    linear-gradient(145deg, #263851, #121a29 55%, #263047);
  font-size: clamp(0.82rem, 2.2vw, 1.05rem);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dimension-story-illustration::before,
.dimension-story-illustration::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.dimension-story-illustration::before {
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transform: rotate(-2deg);
}

.dimension-story-illustration::after {
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 244, 255, 0.38), transparent);
}

.dimension-story-card h2,
.dimension-story-card p {
  margin: 0;
}

.dimension-story-card h2 {
  color: #fff0bb;
  font-size: clamp(1.08rem, 3vw, 1.42rem);
  line-height: 1.25;
  text-align: center;
}

.dimension-story-card p {
  color: #edf0f4;
  font-size: clamp(0.82rem, 2vw, 0.98rem);
  font-weight: 620;
  line-height: 1.65;
  text-align: center;
  white-space: pre-line;
}

.dimension-story-card > button {
  justify-self: center;
  min-width: min(240px, 100%);
  min-height: 44px;
  padding: 9px 20px;
  border-color: rgba(137, 224, 112, 0.58);
  color: #0b180c;
  background: #82de6f;
  font-weight: 950;
}

.dimension-story-card > button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.dimension-story-modal.is-cinematic {
  place-items: stretch;
  overflow: hidden;
  padding: 0;
  background: #000;
  backdrop-filter: none;
}

.dimension-story-modal.is-cinematic .dimension-story-card {
  display: none;
}

.dimension-story-modal.is-summary .dimension-story-illustration {
  display: none;
}

.dimension-story-cinematic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.dimension-story-cinematic[hidden] {
  display: none;
}

.dimension-union-cinematic {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: max(58px, calc(env(safe-area-inset-top) + 48px))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  color: #f8f4e8;
  background:
    radial-gradient(circle at 50% 22%, rgba(96, 152, 211, 0.18), transparent 45%),
    #030507;
  isolation: isolate;
}

.dimension-union-cinematic[hidden],
.dimension-union-video[hidden],
.dimension-union-image[hidden] {
  display: none;
}

.dimension-union-media {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(225, 217, 173, 0.22);
  border-radius: 10px 10px 0 0;
  background: #000;
}

.dimension-union-video,
.dimension-union-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-area: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.dimension-union-copy {
  display: grid;
  gap: 7px;
  padding: 12px 13px max(13px, env(safe-area-inset-bottom));
  border: 1px solid rgba(225, 217, 173, 0.22);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(165deg, rgba(18, 27, 39, 0.99), rgba(5, 8, 13, 0.99));
}

.dimension-union-progress-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #ffe8a3;
  font-size: 0.78rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dimension-union-progress-row progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  accent-color: #e6c75f;
}

.dimension-union-progress-row progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.dimension-union-progress-row progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #69aee3, #f0d36c);
}

.dimension-union-copy h2,
.dimension-union-copy p {
  margin: 0;
}

.dimension-union-copy h2 {
  color: #fff0b5;
  font-size: clamp(1.05rem, 5.1vw, 1.55rem);
  line-height: 1.2;
}

.dimension-union-copy p {
  max-height: 6.4em;
  overflow-y: auto;
  color: #eef4fb;
  font-size: clamp(0.78rem, 3.25vw, 0.98rem);
  font-weight: 650;
  line-height: 1.48;
  white-space: pre-line;
}

.dimension-union-control {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  z-index: 2;
  width: auto;
  min-width: 92px;
  min-height: 40px;
  padding: 8px 14px;
  border-color: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 7, 11, 0.82);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(7px);
  font-weight: 900;
}

.dimension-union-play {
  right: max(12px, env(safe-area-inset-right));
}

.dimension-union-skip {
  left: max(12px, env(safe-area-inset-left));
}

.dimension-union-control:hover,
.dimension-union-control:focus-visible {
  border-color: rgba(255, 232, 163, 0.88);
  background: rgba(29, 37, 50, 0.94);
}

.dimension-union-control:disabled {
  cursor: wait;
  opacity: 0.68;
}

.dimension-union-cinematic.is-entering .dimension-union-media,
.dimension-union-cinematic.is-entering .dimension-union-copy {
  animation: dimension-union-scene-enter 180ms ease-out both;
}

@keyframes dimension-union-scene-enter {
  from {
    opacity: 0.28;
  }
  to {
    opacity: 1;
  }
}

@media (min-width: 720px) and (orientation: landscape) {
  .dimension-union-cinematic {
    display: block;
    padding: 0;
  }

  .dimension-union-media {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
  }

  .dimension-union-copy {
    position: absolute;
    left: max(24px, env(safe-area-inset-left));
    right: max(24px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 18px 22px;
    border: 1px solid rgba(225, 217, 173, 0.26);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(4, 7, 12, 0.72), rgba(4, 7, 12, 0.96));
    backdrop-filter: blur(7px);
  }

  .dimension-union-copy h2 {
    font-size: clamp(1.2rem, 2.7vw, 2rem);
  }

  .dimension-union-copy p {
    font-size: clamp(0.84rem, 1.6vw, 1.1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dimension-union-cinematic.is-entering .dimension-union-media,
  .dimension-union-cinematic.is-entering .dimension-union-copy {
    animation: none;
  }
}

@media (max-width: 560px), (max-height: 540px) {
  .dimension-story-modal {
    place-items: start center;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .dimension-story-card {
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    gap: 10px;
    padding: 10px;
  }
}

.new-player-guide-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 76;
  display: grid;
  width: min(460px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  gap: 14px;
  transform: translate(-50%, -50%);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 244, 184, 0.3);
  border-radius: 8px;
  background: rgba(10, 13, 18, 0.97);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56);
  pointer-events: auto;
}

.new-player-guide-modal[hidden] {
  display: none;
}

.new-player-guide-modal h2 {
  margin: 0;
  color: #fff4b8;
  font-size: 1.15rem;
  text-align: center;
}

.new-player-language-select {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 244, 184, 0.3);
  border-radius: 8px;
  background: #171d25;
  color: #f7f8fa;
  font: inherit;
  font-size: 1rem;
}

.new-player-language-select:focus-visible {
  outline: 2px solid #7bdd69;
  outline-offset: 2px;
}

.new-player-guide-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 24px;
  color: #eef1f5;
  font-size: 0.88rem;
  line-height: 1.45;
}

.new-player-guide-steps li {
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.new-player-guide-steps li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.new-player-guide-modal p {
  margin: 0;
  color: #eef1f5;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}

.keyboard-guide-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(205, 224, 245, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(83, 111, 139, 0.28), transparent 58%),
    linear-gradient(145deg, #151b24, #090d13);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.4);
}

.keyboard-guide-main {
  display: grid;
  gap: 6px;
}

.keyboard-guide-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(22px, 1fr));
  gap: 5px;
}

.keyboard-guide-row.is-home {
  padding-left: 2.5%;
}

.keyboard-guide-row.is-bottom {
  padding-left: 5%;
}

.keyboard-guide-key,
.keyboard-guide-space {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 32px;
  border: 1px solid #4b5664;
  border-bottom-width: 3px;
  border-radius: 6px;
  background: linear-gradient(#2f3945, #1d252f);
  color: #f7fbff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.4;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
}

.keyboard-guide-key.is-movement {
  border-color: #66d6ff;
  background: linear-gradient(#187fac, #0f4e70);
  color: #e9fbff;
  opacity: 1;
  text-shadow: 0 0 9px rgba(116, 225, 255, 0.9);
}

.keyboard-guide-key.is-skill {
  border-color: #ffca55;
  background: linear-gradient(#9b5c18, #56300d);
  color: #fff3c8;
  opacity: 1;
  text-shadow: 0 0 8px rgba(255, 194, 65, 0.8);
}

.keyboard-guide-key.is-movement.is-skill {
  background: linear-gradient(135deg, #187fac 0 50%, #9b5c18 50% 100%);
}

.keyboard-guide-key[data-movement-symbol]::before,
.keyboard-guide-key[data-skill-slot]::after {
  position: absolute;
  top: 2px;
  display: grid;
  min-width: 12px;
  height: 12px;
  place-items: center;
  border-radius: 999px;
  font-size: 0.55rem;
  line-height: 1;
}

.keyboard-guide-key[data-movement-symbol]::before {
  left: 2px;
  content: attr(data-movement-symbol);
  background: rgba(4, 37, 53, 0.82);
}

.keyboard-guide-key[data-skill-slot]::after {
  right: 2px;
  content: attr(data-skill-slot);
  background: rgba(61, 31, 4, 0.84);
}

.keyboard-guide-space {
  justify-self: center;
  width: 58%;
  min-height: 30px;
  border-color: #b887ff;
  background: linear-gradient(#6c46a3, #392457);
  color: #f1deff;
  font-size: 0.68rem;
  opacity: 1;
  text-shadow: 0 0 10px rgba(200, 147, 255, 0.9);
}

.keyboard-guide-arrows {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(2, 34px);
  gap: 5px;
  justify-self: end;
}

.keyboard-guide-arrows .keyboard-guide-key {
  min-height: 34px;
}

.keyboard-guide-arrows .keyboard-guide-key:first-child {
  grid-column: 2;
}

.keyboard-guide-arrows .keyboard-guide-key:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.keyboard-guide-arrows .keyboard-guide-key:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.keyboard-guide-arrows .keyboard-guide-key:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.new-player-guide-helper {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.new-player-guide-portrait {
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 244, 184, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 118, 148, 0.45), rgba(13, 20, 29, 0.95));
}

.new-player-guide-speech {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(156, 232, 255, 0.25);
  border-radius: 8px;
  background: rgba(23, 32, 43, 0.92);
}

.new-player-guide-modal .new-player-guide-speech p {
  text-align: left;
}

.new-player-guide-modal .new-player-guide-controls {
  color: #bcecff;
  font-size: 0.82rem;
}

@media (max-width: 480px) {
  .new-player-guide-helper {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .new-player-guide-portrait {
    width: 82px;
    height: 82px;
  }
}

.new-player-guide-modal.character-intro-modal {
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  transform: none;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.character-creation-intro-summary-image {
  display: block;
  width: min(100%, 640px);
  max-height: min(32vh, 260px);
  margin: 2px auto 4px;
  border: 1px solid rgba(255, 225, 137, 0.46);
  border-radius: 12px;
  object-fit: contain;
  background: #05070b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
}

.character-creation-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
}

.character-creation-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: #000;
}

.new-player-guide-modal .character-creation-intro-caption,
.dimension-story-cinematic .character-creation-intro-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  min-height: clamp(68px, 15%, 110px);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 20px clamp(18px, 7vw, 90px) 16px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
  font-size: clamp(0.82rem, 2vw, 1.25rem);
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 2px 4px #000, 0 0 12px #000;
  white-space: pre-line;
}

.dimension-story-cinematic .character-creation-intro-caption[hidden] {
  display: none;
}

.dimension-story-cinematic .character-creation-intro-caption.is-location-title {
  color: #fff0bb;
  font-size: clamp(1.05rem, 2.8vw, 1.7rem);
  letter-spacing: 0.045em;
  text-shadow: 0 2px 5px #000, 0 0 18px rgba(102, 199, 255, 0.42);
}

@media (max-aspect-ratio: 16 / 9) {
  .new-player-guide-modal .character-creation-intro-caption,
  .dimension-story-cinematic .character-creation-intro-caption {
    top: min(56.25vw, calc(100dvh - 72px));
    bottom: 0;
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: #000;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  .character-creation-intro-video {
    object-position: center center;
  }

  .new-player-guide-modal .character-creation-intro-caption,
  .dimension-story-cinematic .character-creation-intro-caption {
    top: calc(50% + 28.125vw);
    top: calc(50% + 28.125dvw);
    bottom: 0;
    min-height: 0;
    padding: 14px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
    background: #000;
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .new-player-guide-modal .character-creation-intro-caption,
  .dimension-story-cinematic .character-creation-intro-caption {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92));
  }
}

.character-creation-intro-playback,
.character-creation-intro-skip {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  z-index: 4;
  width: auto;
  min-width: 92px;
  min-height: 36px;
  padding: 7px 14px;
  border-color: rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 7, 11, 0.72);
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

.character-creation-intro-playback {
  right: max(12px, env(safe-area-inset-right));
}

.character-creation-intro-skip {
  left: max(12px, env(safe-area-inset-left));
}

.character-creation-intro-playback.is-paused {
  left: 50%;
  top: 50%;
  right: auto;
  min-width: 120px;
  min-height: 44px;
  padding: 9px 20px;
  transform: translate(-50%, -50%);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(5, 7, 11, 0.82);
  box-shadow: 0 5px 24px rgba(0, 0, 0, 0.5);
  font-weight: 900;
}

.character-creation-intro-playback[hidden] {
  display: none;
}

.character-creation-intro-playback:hover,
.character-creation-intro-playback:focus-visible,
.character-creation-intro-skip:hover,
.character-creation-intro-skip:focus-visible {
  border-color: rgba(255, 244, 184, 0.78);
  background: rgba(25, 29, 36, 0.9);
}

.character-creation-intro-playback:disabled,
.character-creation-intro-skip:disabled {
  cursor: wait;
  opacity: 0.7;
}

.character-gender-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.character-gender-choice {
  display: grid;
  gap: 10px;
  place-items: center;
  min-height: 154px;
  padding: 12px 10px 10px;
}

.character-gender-preview {
  display: grid;
  width: 78px;
  height: 96px;
  place-items: center;
  border: 1px solid rgba(239, 210, 126, 0.48);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 28%, rgba(151, 207, 255, 0.24), rgba(20, 35, 48, 0.82) 70%);
  box-shadow: inset 0 0 18px rgba(108, 189, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.24);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.character-gender-avatar {
  width: 70px;
  height: 88px;
  overflow: visible;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}

.character-gender-choice:hover .character-gender-preview,
.character-gender-choice:focus-visible .character-gender-preview {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(255, 232, 151, 0.88);
  box-shadow: inset 0 0 22px rgba(108, 189, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.32);
}

.new-player-guide-modal button {
  min-height: 42px;
  border-color: rgba(116, 227, 106, 0.45);
  border-radius: 8px;
  color: #071208;
  background: #7bdd69;
  font-weight: 900;
}

.fallen-seal-confirm-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 43;
  display: grid;
  width: min(380px, calc(100vw - 28px));
  gap: 12px;
  transform: translate(-50%, -50%);
  padding: 18px;
  border: 1px solid rgba(232, 111, 60, 0.34);
  border-radius: 8px;
  background: rgba(8, 7, 12, 0.96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5), inset 0 0 32px rgba(232, 111, 60, 0.08);
  pointer-events: auto;
  text-align: center;
}

.fallen-seal-confirm-modal[hidden] {
  display: none;
}

.fallen-seal-confirm-modal h2,
.fallen-seal-confirm-modal p {
  margin: 0;
}

.fallen-seal-confirm-modal h2 {
  color: #fff4b8;
  font-size: 1.08rem;
}

.fallen-seal-confirm-modal p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.fallen-seal-confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fallen-seal-confirm-actions button {
  min-height: 40px;
  border-radius: 8px;
  font-weight: 950;
}

.fallen-seal-confirm-yes {
  border-color: rgba(116, 227, 106, 0.64);
  color: #061008;
  background: linear-gradient(180deg, #8df06d, #58c94f);
}

.fallen-seal-confirm-no {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

.character-delete-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 76;
  width: min(390px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
  padding: 18px;
  border: 1px solid rgba(255, 116, 116, 0.36);
  border-radius: 8px;
  background: rgba(10, 10, 15, 0.97);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54), inset 0 0 30px rgba(255, 70, 70, 0.08);
  pointer-events: auto;
}

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

.character-delete-form {
  display: grid;
  gap: 12px;
  text-align: center;
}

.character-delete-form h2,
.character-delete-form p {
  margin: 0;
}

.character-delete-form h2 {
  color: #ffe2e2;
  font-size: 1.08rem;
}

.character-delete-form p {
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.4;
}

.character-delete-code {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-align: left;
}

.character-delete-code input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(7, 11, 16, 0.82);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.character-delete-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.character-delete-actions button {
  min-height: 40px;
  border-radius: 8px;
  font-weight: 950;
}

.character-delete-confirm {
  border-color: rgba(255, 116, 116, 0.62);
  color: #fff0f0;
  background: linear-gradient(180deg, rgba(150, 37, 45, 0.92), rgba(96, 22, 31, 0.92));
}

.shop-catalog {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  width: min(560px, 100%);
}

.shop-catalog-maple {
  grid-template-columns: minmax(150px, 0.82fr) minmax(190px, 1fr);
  align-items: stretch;
}

.shop-catalog-header {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(12, 15, 20, 0.72);
}

.shop-catalog-header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.shop-catalog-header small,
.shop-catalog-header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-catalog-header small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.shop-catalog-header strong {
  color: #fff4b8;
  font-size: 0.88rem;
}

.shop-catalog-close {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 950;
}

.shop-mode-choice {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(12, 15, 20, 0.6);
}

.shop-mode-choice p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.shop-mode-choice button {
  min-height: 42px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 950;
}

.shop-class-filter {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(140px, 220px);
  align-items: center;
  justify-content: end;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.shop-class-filter select {
  min-height: 34px;
  padding: 4px 28px 4px 8px;
  border: 1px solid rgba(255, 224, 130, 0.28);
  border-radius: 7px;
  background: #121821;
  color: #fff4b8;
  font: inherit;
}

.shop-list {
  display: grid;
  align-content: start;
  max-height: min(44vh, 360px);
  overflow: auto;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(7, 10, 15, 0.64);
}

.shop-list-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shop-list-item.is-selected {
  border-color: #74e36a;
  box-shadow: 0 0 0 2px rgba(116, 227, 106, 0.25), inset 0 0 18px rgba(116, 227, 106, 0.1);
}

.shop-list-item.is-owned {
  border-color: rgba(241, 188, 82, 0.42);
}

.shop-list-icon {
  width: 34px;
  height: 34px;
}

.shop-list-info {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.shop-list-info strong,
.shop-list-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-list-info strong {
  color: #fff4b8;
  font-size: 0.76rem;
}

.shop-list-info small {
  color: var(--muted);
  font-size: 0.68rem;
}

.shop-currency-amount .currency-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.shop-confirm-currency {
  justify-self: center;
  padding: 7px 12px;
  border: 1px solid rgba(255, 216, 107, 0.28);
  border-radius: 999px;
  background: rgba(255, 216, 107, 0.08);
  color: #fff4b8;
  font-weight: 900;
}

.vault-move-quantity-modal {
  display: grid;
  gap: 10px;
}

.vault-move-quantity-modal p {
  margin: 0;
  color: var(--muted);
}

.shop-detail {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(12, 15, 20, 0.6);
}

.shop-detail h3,
.shop-detail p {
  margin: 0;
}

.shop-detail h3,
.shop-detail strong {
  color: #fff4b8;
}

.shop-detail p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.shop-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 2px;
}

.shop-detail-actions button {
  min-height: 36px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 900;
}

.shop-confirm-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 76;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(10, 13, 18, 0.95);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
}

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

.world-map-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 43;
  display: grid;
  gap: 10px;
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  transform: translate(-50%, -50%);
  padding: 12px;
  border: 1px solid rgba(255, 232, 160, 0.26);
  border-radius: 8px;
  background: rgba(9, 12, 17, 0.94);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52);
  pointer-events: auto;
}

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

.world-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.world-map-header h2 {
  margin: 0;
  color: #fff4b8;
  font-size: 1rem;
}

.world-map-header button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  font-weight: 900;
}

.world-map-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 64 / 51;
  width: min(100%, calc((100vh - 116px) * 64 / 51));
  max-height: calc(100vh - 116px);
  justify-self: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #121820;
}

.world-map-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 10px;
  min-height: 0;
}

.world-map-frame img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.world-map-hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255, 244, 184, 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #fff4b8 0 24%, rgba(255, 224, 120, 0.9) 26% 46%, rgba(12, 18, 24, 0.82) 48%);
  color: #fff4b8;
  font-size: 0;
  transform: translate(-50%, -50%);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.world-map-hotspot.is-dragon {
  border-color: rgba(255, 124, 96, 0.9);
  background:
    radial-gradient(circle at 50% 50%, #ffd7c7 0 24%, rgba(255, 124, 96, 0.9) 26% 48%, rgba(40, 10, 12, 0.84) 50%);
}

.world-map-hotspot.is-job {
  border-color: rgba(115, 211, 255, 0.92);
  background:
    radial-gradient(circle at 50% 50%, #e4f8ff 0 24%, rgba(77, 177, 224, 0.92) 26% 48%, rgba(10, 31, 44, 0.86) 50%);
}

.world-map-hotspot.is-selected {
  z-index: 2;
  border-color: #fff;
  background: radial-gradient(circle at 50% 50%, #fff 0 18%, #ff3b30 22% 58%, #7d0909 62%);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3), 0 0 14px rgba(255, 59, 48, 0.9);
  transform: translate(-50%, -50%) scale(1.22);
}

.world-map-sidebar {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

@keyframes world-map-tutorial-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--cue-bob-distance, 4px)); }
}

.world-map-tutorial-scroll-cue {
  position: absolute;
  right: 8px;
  bottom: 50px;
  left: 8px;
  z-index: 4;
  padding: 7px 10px;
  border: 1px solid rgba(255, 103, 103, 0.9);
  border-radius: 8px;
  background: rgba(54, 10, 13, 0.94);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.48);
  color: #fff4e6;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.3;
  pointer-events: none;
  text-align: center;
  animation: world-map-tutorial-cue-bob 0.85s ease-in-out infinite;
}

.world-map-tutorial-scroll-cue::before {
  content: "↓ ";
}

.world-map-tutorial-scroll-cue[data-direction="up"] {
  --cue-bob-distance: -4px;
  top: 4px;
  bottom: auto;
}

.world-map-tutorial-scroll-cue[data-direction="up"]::before {
  content: "↑ ";
}

.world-map-tutorial-scroll-cue[hidden] {
  display: none !important;
}

.world-map-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.world-map-list-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 244, 184, 0.24);
  border-radius: 8px;
  background: rgba(24, 31, 38, 0.88);
  color: #f7efd0;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
}

.world-map-list-label {
  min-width: 0;
}

.world-map-list-button.is-recommended {
  border-color: rgba(69, 201, 171, 0.64);
  background: rgba(18, 55, 66, 0.92);
}

.world-map-recommended-badge {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid rgba(115, 211, 255, 0.58);
  border-radius: 5px;
  background: rgba(36, 121, 111, 0.58);
  color: #dcfff5;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.world-map-list-button.is-dragon {
  border-color: rgba(255, 124, 96, 0.42);
  color: #ffd7c7;
}

.world-map-list-button.is-job {
  border-color: rgba(115, 211, 255, 0.42);
  color: #d8f5ff;
}

.world-map-list-button.is-selected {
  border-color: rgba(255, 76, 64, 0.9);
  background: rgba(116, 20, 22, 0.94);
  color: #fff;
  box-shadow: inset 3px 0 #ff4c40;
}

.world-map-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.world-map-travel-button {
  min-width: 112px;
  min-height: 38px;
  font-weight: 900;
}

.world-map-travel-button:disabled {
  opacity: 0.42;
  cursor: default;
}

@media (min-width: 761px) and (min-height: 521px) {
  .world-map-body {
    align-items: stretch;
  }

  .world-map-sidebar {
    contain: size;
    overflow: hidden;
  }

  .world-map-list {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 760px), (max-height: 520px) {
  .world-map-modal {
    width: min(520px, calc(100vw - 18px));
    max-height: calc(100vh - 18px);
    padding: 10px;
  }

  .world-map-body {
    grid-template-columns: 1fr;
  }

  .world-map-frame {
    width: min(100%, calc(32vh * 64 / 51));
    max-height: 32vh;
  }

  .world-map-list {
    max-height: min(48vh, 330px);
  }

  .world-map-sidebar {
    max-height: min(48vh, 330px);
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .world-map-frame {
    display: block;
    width: 100%;
    max-height: 28vh;
  }

  .world-map-list {
    max-height: min(42vh, 360px);
  }

  .world-map-sidebar {
    max-height: min(48vh, 410px);
  }

  .world-map-actions,
  .world-map-travel-button {
    width: 100%;
  }
}

.shop-confirm-modal h2,
.shop-confirm-modal p {
  margin: 0;
}

.shop-sell-eligible-warning {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 103, 103, 0.62);
  border-radius: 6px;
  background: rgba(104, 24, 24, 0.34);
}

.shop-sell-eligible-warning strong {
  color: #ffb1a8;
  line-height: 1.45;
}

.shop-sell-eligible-warning p {
  color: #f4eee8;
  line-height: 1.45;
}

.shop-sell-review-list {
  display: grid;
  max-height: min(42vh, 360px);
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shop-sell-review-item {
  display: grid;
  min-height: 48px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(8, 11, 16, 0.78);
  color: #f4eee8;
  text-align: left;
}

.shop-sell-review-item.is-included {
  border-color: rgba(241, 188, 82, 0.55);
}

.shop-sell-review-item.is-excluded {
  opacity: 0.5;
}

.shop-sell-review-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
}

.shop-sell-review-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-sell-review-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shop-sell-review-state {
  color: #ffe194;
  font-size: 0.68rem;
  font-weight: 900;
}

.shop-confirm-modal h2,
.shop-confirm-heading strong {
  color: #fff4b8;
}

.shop-confirm-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.shop-confirm-icon {
  width: 42px;
  height: 42px;
}

.shop-confirm-quantity {
  display: grid;
  grid-template-columns: 38px minmax(70px, 1fr) 38px 58px;
  gap: 6px;
}

.shop-confirm-quantity input,
.shop-confirm-quantity button,
.shop-confirm-actions button {
  min-height: 38px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 900;
}

.shop-confirm-quantity input {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 8, 12, 0.88);
  color: var(--ink);
  text-align: center;
}

.shop-confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-confirm-actions .primary {
  border-color: rgba(116, 227, 106, 0.58);
  color: #d8ffd4;
  background: rgba(38, 111, 45, 0.72);
}

.shop-sell-eligible {
  grid-column: 1 / -1;
  min-height: 42px;
  border-color: rgba(241, 188, 82, 0.5);
  color: #fff3c5;
  background: rgba(105, 70, 24, 0.78);
}

.shop-confirm-modal.information-board-modal {
  width: min(380px, calc(100vw - 28px));
}

.shop-confirm-modal.street-stall-modal {
  width: min(720px, calc(100vw - 28px));
  max-height: min(86vh, 760px);
  border-color: rgba(241, 188, 82, 0.34);
}

.shop-confirm-modal.ranking-board-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86vh, 780px);
  border-color: rgba(255, 220, 125, 0.45);
}

.ranking-board-table-view {
  display: grid;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.ranking-board-table-view section {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ranking-board-table-view .ranking-self-section {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  border: 1px solid rgba(111, 213, 255, 0.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(24, 79, 108, 0.98), rgba(8, 19, 30, 0.98));
  box-shadow: 0 8px 18px rgba(3, 9, 15, 0.32);
}

.ranking-board-table-view h3 {
  margin: 0;
  color: #ffe39a;
  font-size: 0.9rem;
}

.ranking-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 146, 0.24);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 9px;
  background: rgba(7, 11, 17, 0.76);
  font-variant-numeric: tabular-nums;
}

.ranking-table th,
.ranking-table td {
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ranking-table-current .ranking-col-rank {
  width: 9%;
}

.ranking-table-current .ranking-col-character {
  width: 28%;
}

.ranking-table-current .ranking-col-job {
  width: 23%;
}

.ranking-table-current .ranking-col-advancement {
  width: 23%;
}

.ranking-table-current .ranking-col-level {
  width: 17%;
}

.ranking-table-legacy .ranking-col-rank {
  width: 14%;
}

.ranking-table-legacy .ranking-col-character {
  width: 42%;
}

.ranking-table-legacy .ranking-col-record {
  width: 44%;
}

.ranking-heading-compact {
  display: none;
}

.ranking-table th {
  background: linear-gradient(180deg, rgba(145, 102, 34, 0.62), rgba(80, 55, 20, 0.72));
  color: #fff1bf;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ranking-table td {
  color: #e9edf4;
  font-size: 0.78rem;
}

.ranking-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.028);
}

.ranking-table tbody tr.is-current-player td {
  background: rgba(71, 164, 213, 0.2);
  color: #c9f4ff;
  font-weight: 850;
}

.ranking-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 520px) {
  .shop-confirm-modal.ranking-board-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 10px 7px;
  }

  .ranking-board-table-view {
    gap: 12px;
    padding-right: 0;
  }

  .ranking-heading-full {
    display: none;
  }

  .ranking-heading-compact {
    display: inline;
  }

  .ranking-table th,
  .ranking-table td {
    padding: 6px 3px;
    font-size: clamp(0.58rem, 2.65vw, 0.68rem);
    letter-spacing: 0;
  }

  .ranking-table .ranking-cell-rank,
  .ranking-table .ranking-cell-level {
    text-align: center;
    white-space: nowrap;
  }

  .ranking-table .ranking-cell-advancement {
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.street-stall-body,
.street-stall-section,
.street-stall-list,
.street-stall-intro {
  display: grid;
  gap: 8px;
}

.street-stall-section h3 {
  margin: 2px 0 0;
  color: #fff4b8;
  font-size: 0.84rem;
}

.street-stall-summary,
.street-stall-recap-summary,
.street-stall-note,
.street-stall-pending,
.street-stall-empty {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: #e8e2d3;
  font-size: 0.78rem;
  line-height: 1.45;
}

.street-stall-pending {
  border-color: rgba(255, 178, 75, 0.46);
  background: rgba(100, 60, 18, 0.38);
  color: #ffe1a3;
}

.street-stall-list {
  max-height: min(32vh, 260px);
  overflow: auto;
  overscroll-behavior: contain;
}

.street-stall-row,
.street-stall-inventory-row,
.street-stall-sale-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(7, 10, 14, 0.7);
}

.street-stall-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.street-stall-row-details {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.street-stall-row .street-stall-detail-trigger {
  min-height: 0;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.street-stall-row .street-stall-detail-trigger:hover,
.street-stall-row .street-stall-detail-trigger:focus-visible {
  border-color: rgba(241, 188, 82, 0.42);
  background: rgba(241, 188, 82, 0.08);
  outline: none;
}

.street-stall-item-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.street-stall-item-icon,
.street-stall-confirm-icon {
  width: 38px;
  height: 38px;
}

.street-stall-row-details strong,
.street-stall-inventory-row strong {
  color: #fff7d2;
  overflow-wrap: anywhere;
}

.street-stall-row-details span,
.street-stall-inventory-row span {
  color: #bfc5cf;
  font-size: 0.7rem;
}

.street-stall-row-controls {
  display: grid;
  grid-template-columns: 68px 74px;
  gap: 6px;
}

.street-stall-inventory-row {
  grid-template-columns: 42px minmax(130px, 1fr) 80px 72px minmax(100px, 120px) 66px;
}

.street-stall-purchase-confirm {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.street-stall-purchase-confirm p {
  margin: 0;
  line-height: 1.5;
}

.street-stall-item-detail {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: min(62vh, 540px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(7, 10, 14, 0.7);
}

.street-stall-item-detail .street-stall-item-sale {
  color: #ffe39a;
  font-weight: 850;
}

.street-stall-row button,
.street-stall-row input,
.street-stall-inventory-row button,
.street-stall-inventory-row input {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 800;
}

.street-stall-row input,
.street-stall-inventory-row input {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(3, 5, 8, 0.9);
  color: #fff;
}

.street-stall-sale-row {
  color: #e8e2d3;
  font-size: 0.76rem;
}

@media (max-width: 620px) {
  .street-stall-inventory-row {
    grid-template-columns: 42px minmax(0, 1fr) 72px 72px;
  }

  .street-stall-inventory-row strong,
  .street-stall-inventory-row span {
    grid-column: span 1;
  }

  .street-stall-inventory-row input[aria-label*="Gold"],
  .street-stall-inventory-row input[aria-label*="골드"] {
    grid-column: 2 / 4;
  }
}

.utility-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.utility-modal-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.18);
  background: #0b0e13;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
}

.shop-confirm-modal.dimension-rift-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  border-color: rgba(129, 205, 255, 0.38);
  background:
    radial-gradient(circle at 50% -20%, rgba(76, 144, 190, 0.28), transparent 52%),
    rgba(7, 12, 20, 0.98);
}

.dimension-rift-selection {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.dimension-rift-intro,
.dimension-rift-reason {
  margin: 0;
  color: rgba(232, 241, 250, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
}

.dimension-rift-viewport {
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  outline: none;
}

.dimension-rift-viewport:focus-visible {
  box-shadow: 0 0 0 3px rgba(129, 205, 255, 0.38);
}

.dimension-rift-track {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.dimension-rift-track::-webkit-scrollbar {
  display: none;
}

.dimension-rift-card {
  display: grid;
  flex: 0 0 100%;
  min-width: 0;
  max-height: min(62dvh, 560px);
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(128, 181, 218, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(26, 42, 57, 0.92), rgba(11, 19, 29, 0.96));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.dimension-rift-card.is-available,
.dimension-rift-card.is-open,
.dimension-rift-card.is-ready {
  border-color: rgba(107, 220, 153, 0.52);
  box-shadow: inset 0 0 28px rgba(59, 163, 117, 0.08);
}

.dimension-rift-media {
  display: block;
  width: 100%;
  height: 112px;
  border: 0;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(4, 9, 16, 0.8);
}

.dimension-rift-media.is-unknown {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(142, 211, 255, 0.52);
  background:
    linear-gradient(124deg, transparent 34%, rgba(122, 194, 238, 0.18) 35%, transparent 36%),
    linear-gradient(68deg, transparent 54%, rgba(166, 118, 230, 0.14) 55%, transparent 56%),
    radial-gradient(circle, rgba(64, 128, 171, 0.18), rgba(4, 9, 16, 0.94) 68%);
  font-size: 1.5rem;
}

.dimension-rift-presentation {
  display: grid;
  width: min(34rem, 100%);
  place-items: center;
}

.dimension-rift-presentation-media {
  display: block;
  width: 100%;
  max-height: min(62vh, 32rem);
  border-radius: 0.85rem;
  object-fit: contain;
  background: rgba(6, 12, 20, 0.88);
}

.dimension-rift-presentation-media.is-unknown {
  display: grid;
  min-height: 14rem;
  place-items: center;
  color: rgba(155, 228, 255, 0.78);
  background: radial-gradient(circle, rgba(69, 95, 130, 0.9), rgba(6, 12, 20, 0.96) 72%);
  font-size: 3rem;
}

.dimension-rift-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
}

.dimension-rift-ordinal {
  color: rgba(141, 207, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.dimension-rift-card header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dimension-rift-card header strong {
  overflow-wrap: anywhere;
  color: #f7fbff;
  font-size: 0.94rem;
  line-height: 1.25;
}

.dimension-rift-card header small {
  color: rgba(222, 234, 244, 0.7);
  font-size: 0.68rem;
}

.dimension-rift-status {
  max-width: 116px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #dbe7ef;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.dimension-rift-card.is-available .dimension-rift-status,
.dimension-rift-card.is-open .dimension-rift-status,
.dimension-rift-card.is-ready .dimension-rift-status {
  color: #caffdf;
  background: rgba(49, 145, 95, 0.32);
}

.dimension-rift-members {
  display: grid;
  gap: 5px;
}

.dimension-rift-member {
  display: grid;
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.7rem;
  line-height: 1.35;
}

.dimension-rift-member strong,
.dimension-rift-member span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dimension-rift-member.is-ready span {
  color: #93eab4;
}

.dimension-rift-member.is-blocked span,
.dimension-rift-reason {
  color: #ffc0b9;
}

.dimension-rift-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
}

.dimension-rift-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
  font-weight: 900;
}

.dimension-rift-navigation {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
}

.dimension-rift-arrow {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-color: rgba(129, 205, 255, 0.34);
  color: #e8f7ff;
  background: rgba(19, 50, 72, 0.88);
  font-size: 1.2rem;
  font-weight: 950;
}

.dimension-rift-arrow:disabled {
  opacity: 0.36;
}

.dimension-rift-position {
  color: rgba(221, 239, 251, 0.78);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .dimension-rift-track {
    scroll-behavior: auto;
  }
}

@media (max-width: 620px), (max-height: 520px) and (pointer: coarse) {
  .shop-confirm-modal.dimension-rift-modal {
    width: min(560px, calc(100vw - 18px));
    max-height: calc(100dvh - 18px);
    padding: 10px;
  }

  .dimension-rift-card {
    max-height: min(64dvh, 470px);
    padding: 10px;
  }

  .dimension-rift-media {
    height: 96px;
  }

  .dimension-rift-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.information-board-modal .shop-confirm-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.information-board-modal .shop-confirm-actions button {
  border-color: rgba(255, 255, 255, 0.18);
  background: #0b0e13;
  color: #ffffff;
}

.blacksmith-quest-dialogue {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.blacksmith-quest-portrait-frame {
  display: grid;
  gap: 6px;
  margin: 0;
}

.blacksmith-quest-portrait {
  display: block;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(231, 142, 68, 0.58);
  border-radius: 8px;
  background: #3d211b;
  box-shadow: 0 0 22px rgba(225, 94, 36, 0.18);
}

.blacksmith-quest-portrait-frame figcaption {
  color: #d5a779;
  font-size: 0.7rem;
  font-weight: 850;
  text-align: center;
}

.blacksmith-quest-copy {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.blacksmith-quest-copy strong {
  color: #ffd28a;
  font-size: 1.08rem;
}

.blacksmith-quest-copy p {
  color: #f4eee8;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.55;
}

.blacksmith-quest-copy span {
  color: #91e895;
  font-size: 0.78rem;
  font-weight: 900;
}

@media (max-width: 460px) {
  .blacksmith-quest-dialogue {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .blacksmith-quest-portrait {
    width: 92px;
    height: 92px;
  }
}

.forge-panel {
  display: grid;
  gap: 9px;
}

.forge-intro,
.forge-empty,
.forge-result {
  font-size: 0.78rem;
  line-height: 1.4;
}

.forge-weapon-list {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
}

.forge-weapon-option {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(240, 138, 60, 0.28);
  border-radius: 8px;
  background: rgba(45, 35, 30, 0.88);
  color: #f5dfc8;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}

.forge-weapon-option.is-selected {
  border-color: #f08a3c;
  background: rgba(113, 57, 26, 0.92);
  box-shadow: inset 3px 0 #ffb065;
}

.forge-detail {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 176, 101, 0.34);
  border-radius: 8px;
  background: rgba(20, 15, 13, 0.72);
  color: #f5dfc8;
  font-size: 0.78rem;
}

.forge-detail strong {
  color: #ffbe7c;
  font-size: 0.95rem;
}

.forge-result {
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 900;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.forge-result.is-success {
  background: rgba(38, 111, 45, 0.52);
  color: #d8ffd4;
  animation: forge-success-pop 560ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.forge-result.is-failure {
  background: rgba(132, 40, 34, 0.58);
  color: #ffd4cf;
  animation: forge-failure-shake 480ms ease-out;
}

.forge-result::before,
.forge-result::after {
  content: "";
  position: absolute;
  inset: -75%;
  z-index: -1;
  pointer-events: none;
}

.forge-result.is-success::before {
  background: conic-gradient(from 30deg, transparent 0 8%, rgba(255, 232, 126, 0.88) 9% 11%, transparent 12% 24%);
  animation: forge-success-rays 720ms ease-out both;
}

.forge-result.is-success::after {
  background: radial-gradient(circle, rgba(255, 255, 220, 0.95) 0 4%, transparent 5% 100%);
  background-size: 22px 22px;
  animation: forge-success-sparkles 620ms ease-out both;
}

.forge-result.is-failure::before {
  background: linear-gradient(118deg, transparent 45%, rgba(255, 132, 112, 0.9) 47% 49%, transparent 51%);
  animation: forge-failure-crack 440ms ease-out both;
}

@keyframes forge-success-pop {
  0% { transform: scale(0.86); filter: brightness(1.8); }
  65% { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes forge-success-rays {
  from { transform: scale(0.2) rotate(-20deg); opacity: 1; }
  to { transform: scale(1) rotate(18deg); opacity: 0; }
}

@keyframes forge-success-sparkles {
  from { transform: scale(0.35); opacity: 1; }
  to { transform: scale(1.25); opacity: 0; }
}

@keyframes forge-failure-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes forge-failure-crack {
  from { transform: scaleX(0); opacity: 1; }
  to { transform: scaleX(1); opacity: 0; }
}

.dragon-raid-lobby {
  display: grid;
  gap: 10px;
  min-width: min(420px, 78vw);
}

.shop-confirm-modal.dragon-raid-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.shop-confirm-modal.guide-quest-modal {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  gap: 14px;
  padding: 20px;
}

.guide-quest-modal h2 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.guide-quest-modal .beginner-guide-step {
  gap: 12px;
}

.guide-quest-modal .beginner-guide-step strong {
  font-size: 0.9rem;
}

.guide-quest-modal .beginner-guide-step p {
  font-size: 1.03rem;
}

.dragon-raid-modal .dragon-raid-lobby {
  min-width: 0;
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dragon-raid-modal .shop-confirm-actions {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 2px;
  background: rgba(10, 13, 18, 0.98);
}

.dragon-raid-victory {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dragon-raid-victory p,
.dragon-raid-victory h3 {
  margin: 0;
}

.dragon-raid-victory h3 {
  color: #f3c969;
  font-size: 0.9rem;
}

.dragon-raid-victory-message {
  color: #fff2c2;
  font-weight: 800;
}

.dragon-raid-result-party {
  display: grid;
  gap: 6px;
}

.dragon-raid-result-member {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(240, 188, 82, 0.38);
  border-radius: 8px;
  background: rgba(71, 29, 24, 0.48);
  font-size: 0.8rem;
}

.dragon-raid-result-member strong {
  color: #fff0b0;
}

.dragon-raid-result-personal-items {
  color: #cfe9cf;
}

.dragon-raid-result-items {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  color: #f1f1e8;
  font-size: 0.8rem;
}

.dragon-raid-result-exit {
  color: #c7d9ee;
  font-size: 0.76rem;
}

.dragon-raid-lobby p {
  margin: 0;
}

.dragon-raid-rules {
  color: #ffca72;
  font-weight: 800;
}

.dragon-raid-member-list {
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
}

.dragon-raid-member {
  padding: 9px 11px;
  border: 1px solid rgba(255, 111, 78, 0.38);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(98, 20, 27, 0.72), rgba(24, 14, 25, 0.88));
}

.dragon-raid-notice {
  color: #ff7f76;
  font-weight: 800;
}

@media (max-width: 520px), (max-height: 520px) {
  .shop-confirm-modal.dragon-raid-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    gap: 7px;
    padding: 10px;
  }

  .dragon-raid-modal h2 {
    font-size: 1rem;
  }

  .dragon-raid-modal .dragon-raid-lobby {
    gap: 7px;
    font-size: 0.78rem;
  }

  .dragon-raid-modal .dragon-raid-member-list {
    max-height: none;
  }

  .game-shell-v2 .shop-confirm-modal.guide-quest-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    gap: 10px;
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .shop-catalog-maple {
    grid-template-columns: 1fr;
  }

  .shop-list {
    max-height: 190px;
  }
}

.rune-exchange-heading {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.rune-exchange-catalog {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  width: 100%;
  max-height: min(56vh, 430px);
  overflow: hidden;
}

.rune-exchange-heading h3 {
  min-width: 0;
}

.rune-exchange-summary {
  color: #c6b0ff;
  font-size: 0.78rem;
  white-space: nowrap;
}

.rune-exchange-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rune-exchange-rate {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 2px 7px;
  align-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(28, 18, 34, 0.74);
  opacity: 0.62;
}

.rune-exchange-rate.is-owned {
  border-color: rgba(170, 145, 255, 0.52);
  box-shadow: inset 0 0 16px rgba(145, 109, 255, 0.12);
  opacity: 1;
}

.rune-exchange-rate.is-selected {
  border-color: #d3bcff;
  background: rgba(57, 36, 72, 0.88);
  box-shadow: inset 0 0 18px rgba(166, 128, 255, 0.2);
}

.rune-exchange-rate img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.rune-exchange-info {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.rune-exchange-info strong,
.rune-exchange-info span {
  min-width: 0;
}

.rune-exchange-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rune-exchange-info strong {
  color: #f4eaff;
  overflow-wrap: anywhere;
  font-size: 0.76rem;
  line-height: 1.15;
  white-space: normal;
}

.rune-exchange-info span {
  color: #b9a4d0;
  font-size: 0.68rem;
}

.rune-exchange-picker {
  display: grid;
  grid-template-columns: 30px 46px 30px 42px;
  gap: 4px;
  align-items: center;
}

.context-actions .rune-exchange-stepper {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
}

.context-actions .rune-exchange-all {
  width: 42px;
  min-width: 42px;
  min-height: 30px;
  padding: 0 4px;
  border-color: rgba(194, 163, 255, 0.56);
  border-radius: 6px;
  background: rgba(80, 47, 105, 0.88);
  color: #fff6ca;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.rune-exchange-quantity {
  width: 46px;
  min-width: 0;
  height: 30px;
  padding: 0 3px;
  border: 1px solid rgba(206, 180, 255, 0.35);
  border-radius: 6px;
  background: rgba(6, 8, 13, 0.86);
  color: #ffffff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.rune-exchange-quantity:focus {
  border-color: #d3bcff;
  outline: 2px solid rgba(211, 188, 255, 0.2);
}

.context-actions .rune-exchange-submit {
  grid-column: 1 / -1;
  min-height: 38px;
  border-color: rgba(194, 163, 255, 0.65);
  background: rgba(80, 47, 105, 0.92);
  color: #fff6ca;
}

.inventory-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.inventory-meta {
  display: block;
  margin-top: 6px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.profile-switch-panel p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.35;
}

.profile-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-compare div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 10px;
}

.profile-compare span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.profile-switch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-choice-actions {
  display: grid;
  gap: 8px;
}

.auth-choice-cancel {
  width: 100%;
  margin-top: 8px;
}

.hud-bottom p {
  margin: 0;
}

#prompt {
  color: var(--ink);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dialogue {
  min-height: 18px;
  margin-top: 3px;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}

.context-actions {
  position: absolute;
  left: 18px;
  top: 108px;
  bottom: auto;
  z-index: 3;
  display: flex;
  max-width: min(520px, calc(100vw - 36px));
  flex-wrap: wrap;
  gap: 8px;
}

.context-actions.has-rune-exchange {
  display: grid;
  width: min(760px, calc(100vw - 36px));
  max-width: min(760px, calc(100vw - 36px));
  grid-template-columns: minmax(0, 1fr);
  max-height: calc(var(--app-height) - 24px);
  overflow: hidden;
}

.context-actions.has-shop-catalog {
  z-index: 44;
  display: grid;
  width: min(560px, calc(100vw - 36px));
  max-width: min(560px, calc(100vw - 36px));
  grid-template-columns: minmax(0, 1fr);
  max-height: calc(var(--app-height) - 132px);
  overflow: auto;
}

.context-actions.has-shop-catalog .shop-catalog {
  width: 100%;
}

.context-actions:empty {
  display: none;
}

.context-actions button {
  min-height: 40px;
  padding: 0 12px;
  background: rgba(12, 15, 20, 0.62);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}

.context-actions button.is-selected {
  border-color: rgba(255, 223, 142, 0.72);
  background: rgba(92, 69, 30, 0.86);
  color: #fff4b8;
}

.context-actions .context-trade,
.context-actions .context-party {
  border-color: rgba(116, 227, 106, 0.52);
  background: rgba(28, 57, 39, 0.78);
  color: #d8ffd4;
  font-weight: 950;
}

.context-actions .context-trade-request,
.context-actions .context-party-request {
  border-color: rgba(126, 240, 150, 0.8);
  background: rgba(25, 92, 45, 0.88);
}

.context-actions .context-trade-waiting,
.context-actions .context-party-waiting {
  border-color: rgba(255, 223, 142, 0.4);
  background: rgba(58, 49, 35, 0.78);
  color: #ffe5a6;
}

.context-actions .context-trade-cancel,
.context-actions .context-party-cancel {
  border-color: rgba(238, 107, 99, 0.5);
  background: rgba(76, 32, 38, 0.8);
  color: #ffd2d0;
}

.player-action-menu {
  position: absolute;
  z-index: 52;
  display: grid;
  min-width: 136px;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(11, 14, 20, 0.78);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  color: #f7f3dd;
  backdrop-filter: blur(10px);
  transform: translate(-50%, -100%);
}

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

.player-action-menu strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-action-menu button {
  min-height: 34px;
  padding: 0 10px;
  border-color: rgba(116, 227, 106, 0.52);
  background: rgba(28, 57, 39, 0.82);
  color: #d8ffd4;
}

.player-action-menu button.is-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(30, 35, 45, 0.74);
  color: #dfe6ee;
}

.context-amount {
  display: grid;
  min-width: 132px;
  gap: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-align: left;
  text-transform: uppercase;
}

.context-amount input {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border-color: rgba(255, 223, 142, 0.34);
  background: rgba(12, 15, 20, 0.74);
  font-weight: 850;
}

.context-text {
  min-width: min(280px, calc(100vw - 36px));
}

.context-text input {
  text-transform: none;
}

.context-amount-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr);
  gap: 5px;
  align-items: center;
}

.amount-quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 5px;
}

.context-actions button.amount-quick {
  min-height: 40px;
  padding: 0 9px;
  border-color: rgba(123, 205, 140, 0.36);
  background: rgba(28, 57, 39, 0.72);
  color: #d8ffd9;
  font-size: 0.72rem;
}

.context-actions.closedVenue-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  width: min(440px, calc(100vw - 36px));
}

.context-actions.closedVenue-actions .context-amount {
  grid-column: 1 / -1;
}

.context-actions.closedVenue-actions button {
  min-height: 44px;
  border-color: rgba(255, 223, 142, 0.42);
  background: rgba(20, 16, 28, 0.84);
}

.hud-chat {
  right: 12px;
  top: 202px;
  z-index: 3;
  display: grid;
  grid-template-rows: minmax(0, 96px) auto;
  gap: 8px;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.82);
}

.hud-chat ol {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  height: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin;
}

.hud-chat li {
  display: flex;
  min-width: 0;
  gap: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.hud-chat li strong {
  flex: 0 0 auto;
  font-size: inherit;
  white-space: nowrap;
}

.hud-chat li span {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.hud-chat li.chat-system-message {
  color: rgba(190, 195, 202, 0.62);
  font-style: italic;
}

.hud-chat li.chat-system-message span {
  color: inherit;
}

.chat-toggle {
  display: none;
}

#chat-form {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(64px, auto);
  gap: 8px;
  pointer-events: auto;
}

#chat-form input,
#chat-form button {
  min-height: 34px;
  pointer-events: auto;
  touch-action: manipulation;
}

#chat-form button {
  padding: 0 12px;
}

.touch-controls {
  position: absolute;
  right: 18px;
  bottom: 96px;
  z-index: 3;
  display: none;
  touch-action: none;
  user-select: none;
}

@media (max-width: 760px) {
  .game-screen {
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--mobile-chat-height);
  }

  #game-canvas {
    grid-row: 1;
    min-height: 0;
  }

  .hud-top {
    top: 10px;
    right: 10px;
    width: 204px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hud-top > div:first-child {
    display: none;
  }

  .auth-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
  }

  .language-control {
    min-width: 0;
  }

  .language-control select,
  .inventory-toggle,
  .characters-toggle,
  .zoom-toggle,
  .fullscreen-toggle,
  .privacy-link,
  .google-login {
    width: 100%;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
  }

  .privacy-link {
    display: inline-grid;
  }

  .game-status-overlay {
    top: 10px;
    left: 10px;
    width: min(166px, calc(100vw - 226px));
    max-width: min(166px, calc(100vw - 226px));
    max-height: none;
    overflow: hidden;
    gap: 5px;
    padding: 6px 8px;
    font-size: 0.72rem;
    transform: none;
  }

  .game-status-overlay > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #player-summary {
    white-space: normal;
  }

  .health-status {
    min-width: 0;
  }

  .health-track {
    height: 7px;
  }

  .building-notice {
    top: 58px;
    left: 10px;
    width: auto;
    max-width: min(190px, calc(100vw - 132px));
    gap: 0;
    padding: 6px 8px;
    background: rgba(13, 17, 22, 0.42);
    text-align: left;
    transform: none;
    backdrop-filter: none;
  }

  .building-notice strong {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .building-notice span {
    display: none;
  }

  .google-login-slot {
    grid-column: 1 / -1;
    min-width: 92px;
    justify-self: stretch;
  }

  .google-login {
    min-width: 92px;
    min-height: 34px;
    padding: 7px 9px;
    white-space: nowrap;
  }

  .inventory-toggle,
  .characters-toggle {
    min-width: 0;
    min-height: 32px;
    padding: 6px 7px;
  }

  .zoom-toggle,
  .fullscreen-toggle {
    min-width: 0;
    min-height: 32px;
    padding: 6px 7px;
  }

  .privacy-link {
    min-height: 34px;
    padding: 7px 9px;
  }

  .inventory-panel {
    top: 64px;
    right: 10px;
    width: min(340px, calc(100vw - 20px));
    max-height: calc(var(--app-height) - var(--mobile-chat-height) - 92px);
  }

  .characters-panel {
    width: min(360px, calc(100vw - 20px));
    max-height: calc(var(--app-height) - 28px);
  }

  .inventory-body-grid {
    grid-template-columns: 1fr;
  }

  .equipment-cross,
  .item-grid {
    gap: 6px;
  }

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

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

  .trade-modal {
    top: 12px;
    transform: translateX(-50%);
    max-height: calc(100vh - var(--mobile-chat-height) - 28px);
  }

  .trade-modal-grid {
    grid-template-columns: 1fr;
  }

  .trade-quantity-panel {
    grid-template-columns: 1fr;
  }

  .trade-modal-actions {
    grid-template-columns: 1fr;
  }

  .inventory-cell {
    min-height: 48px;
  }

  .hud-chat {
    position: relative;
    grid-row: 2;
    align-self: stretch;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 9;
    width: 100%;
    max-width: none;
    gap: 6px;
    padding: 7px 8px max(10px, env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: #10161d;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
    text-shadow: none;
  }

  .hud-chat ol {
    display: flex;
    min-height: 54px;
    height: 54px;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 3px;
    scrollbar-width: thin;
  }

  .hud-chat li {
    font-size: 0.72rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .hud-chat li strong {
    font-size: inherit;
  }

  #chat-form input,
  #chat-form button {
    min-height: 38px;
  }

  #chat-send {
    min-width: 72px;
  }

  .hud-bottom {
    left: 10px;
    right: 10px;
    bottom: calc(var(--mobile-chat-height) + 48px);
    width: auto;
    max-height: 42px;
    transform: none;
    padding: 6px 8px;
    font-size: 0.72rem;
    text-align: left;
  }

  #prompt,
  #dialogue {
    line-height: 1.2;
  }

  #dialogue {
    min-height: 14px;
    margin-top: 2px;
    white-space: nowrap;
  }

  body.has-context-amount .hud-bottom {
    display: none;
  }

  .context-actions {
    left: 10px;
    right: 10px;
    bottom: calc(var(--mobile-chat-height) + 8px);
    max-width: none;
  }

  .context-actions.has-rune-exchange {
    width: auto;
    max-width: none;
  }

  body.has-context-amount .context-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(10, 13, 18, 0.72);
  }

  .context-actions .context-act {
    display: none;
  }

  .context-actions .context-trade {
    display: inline-grid;
    min-width: min(168px, 100%);
    place-items: center;
  }

  .context-actions.closedVenue-actions {
    left: 10px;
    right: 10px;
    bottom: calc(var(--mobile-chat-height) + 74px);
    z-index: 6;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    border: 1px solid rgba(255, 223, 142, 0.2);
    border-radius: 8px;
    background: rgba(10, 13, 18, 0.82);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
  }

  .context-amount {
    min-width: 0;
    grid-column: 1 / -1;
  }

  .context-amount input {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 0.78rem;
  }

  .context-amount-row {
    grid-template-columns: minmax(84px, 1fr);
    gap: 4px;
  }

  .amount-quick-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .context-actions button.amount-quick {
    min-height: 36px;
    padding: 0 7px;
    font-size: 0.68rem;
  }

  .context-actions button {
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.74rem;
    box-shadow: none;
    backdrop-filter: none;
  }

  .context-actions.closedVenue-actions button {
    min-height: 42px;
    padding: 0 8px;
    font-size: 0.76rem;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .game-screen {
    grid-template-rows: 40px minmax(0, 1fr) var(--mobile-chat-height);
  }

  #game-canvas {
    grid-row: 2;
  }

  .hud-chat {
    grid-row: 3;
  }
}

@media (max-width: 520px) {
  .rune-exchange-catalog {
    max-height: min(64vh, calc(var(--app-height) - 16px));
  }

  .rune-exchange-grid {
    grid-template-columns: 1fr;
  }

  .context-actions.has-rune-exchange {
    width: auto;
    max-width: none;
  }

  .game-status-overlay {
    top: 6px;
    display: grid;
    width: min(154px, calc(100vw - 226px));
    max-width: min(154px, calc(100vw - 226px));
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 6px 8px;
    overflow: hidden;
    font-size: 0.68rem;
  }

  .game-status-overlay > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-status-overlay .health-status {
    min-width: 0;
  }

  .game-status-overlay #objective {
    grid-column: 1 / -1;
  }

  .hud-top {
    top: 10px;
    right: 10px;
    width: min(196px, calc(100vw - 20px));
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hud-top > div:first-child {
    display: none;
  }

  .hud-bottom {
    left: 8px;
    right: 8px;
    width: auto;
  }

  .hud-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-status {
    max-width: calc(100vw - 132px);
  }

  h1 {
    font-size: 1.12rem;
  }

  .label {
    font-size: 0.68rem;
  }

  .context-actions {
    right: 10px;
  }

  .context-actions.closedVenue-actions {
    right: 10px;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .hud-top {
    width: min(320px, calc(100vw - 24px));
    padding: 7px 9px;
  }

  .hud-chat {
    top: 238px;
    grid-template-rows: minmax(0, 72px) auto;
    width: 280px;
  }

  .hud-chat ol {
    height: 72px;
  }

  .hud-bottom {
    width: min(460px, calc(100vw - 36px));
    max-height: 44px;
    padding: 6px 9px;
    font-size: 0.76rem;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --mobile-chat-height: 0px;
  }

  .rune-exchange-grid {
    grid-template-columns: 1fr;
  }

  .game-screen {
    display: block;
  }

  #game-canvas {
    width: 100%;
    height: 100%;
  }

  .hud-top {
    top: 4px;
    right: 4px;
    width: 64px;
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hud-top > div:first-child {
    display: none;
  }

  .auth-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .language-control {
    min-width: 0;
  }

  .language-control select,
  .inventory-toggle,
  .zoom-toggle,
  .fullscreen-toggle,
  .privacy-link,
  .google-login {
    width: 64px;
    min-width: 0;
    min-height: 32px;
    padding: 4px 5px;
    font-size: 0.62rem;
    line-height: 1;
    white-space: nowrap;
  }

  .privacy-link {
    display: inline-grid;
  }

  .google-login-slot {
    min-width: 0;
    min-height: 32px;
  }

  .game-status-overlay {
    top: 4px;
    left: 4px;
    width: 116px;
    max-width: 116px;
    min-height: 132px;
    gap: 4px;
    padding: 6px 7px;
    font-size: 0.66rem;
    transform: none;
  }

  .game-status-overlay > span {
    white-space: normal;
  }

  #player-summary {
    white-space: normal;
  }

  .game-status-overlay #level {
    white-space: pre-line;
  }

  .game-status-overlay .money-row {
    margin-top: 1px;
    padding-top: 5px;
  }

  .building-notice {
    display: none;
  }

  .hud-chat {
    position: absolute;
    left: auto;
    right: 6px;
    top: auto;
    bottom: 6px;
    width: min(232px, calc(100vw - 128px));
    max-width: none;
    display: grid;
    grid-template-rows: minmax(0, 78px) auto auto;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    text-shadow: none;
    backdrop-filter: none;
  }

  .hud-chat ol {
    display: flex;
    height: auto;
    max-height: min(34vh, 138px);
    justify-content: flex-end;
    gap: 2px;
    padding: 5px 6px;
    border-radius: 8px;
    background: rgba(10, 13, 18, 0.28);
    overflow: visible;
    pointer-events: none;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.82);
  }

  .hud-chat ol:empty {
    visibility: hidden;
  }

  .hud-chat li {
    font-size: 0.76rem;
    line-height: 1.12;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .chat-toggle {
    display: inline-grid;
    grid-row: 3;
    width: 64px;
    min-height: 32px;
    justify-self: end;
    place-items: center;
    padding: 0 8px;
    pointer-events: auto;
    font-size: 0.66rem;
    touch-action: manipulation;
  }

  #chat-form {
    display: none;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(52px, auto);
    gap: 4px;
    pointer-events: auto;
  }

  .hud-chat.is-open #chat-form {
    display: grid;
  }

  .hud-chat.is-open .chat-toggle {
    border-color: rgba(255, 223, 142, 0.42);
    color: #fff4b8;
  }

  #chat-form input,
  #chat-form button {
    min-height: 32px;
    font-size: 0.72rem;
    padding: 4px 6px;
  }

  #chat-send {
    min-width: 52px;
  }

  .hud-bottom {
    left: 4px;
    right: auto;
    top: auto;
    bottom: 6px;
    width: min(214px, calc(100vw - 90px));
    max-height: 34px;
    transform: none;
    padding: 4px 7px;
    font-size: 0.66rem;
    text-align: left;
  }

  #prompt {
    display: none;
  }

  #dialogue {
    min-height: 16px;
    margin: 0;
    white-space: nowrap;
  }

  body.has-ranking-message .hud-bottom {
    left: 118px;
    right: 74px;
    top: 36px;
    bottom: auto;
    max-height: min(190px, calc(100vh - 82px));
    padding: 8px 10px;
    border-color: rgba(255, 223, 142, 0.34);
    background: rgba(10, 13, 18, 0.9);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    overflow: auto;
    text-align: left;
    pointer-events: auto;
  }

  body.has-ranking-message #dialogue {
    min-height: 0;
    color: var(--ink);
    font-size: 0.7rem;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
    white-space: pre-line;
  }

  .context-actions {
    left: 116px;
    right: 72px;
    bottom: 8px;
    max-width: none;
    gap: 5px;
  }

  .context-actions.has-rune-exchange {
    width: auto;
    max-width: none;
  }

  .context-actions button {
    min-height: 30px;
    padding: 0 7px;
    font-size: 0.66rem;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
  :root {
    --mobile-chat-height: 0px;
  }

  .game-screen {
    display: block;
  }

  #game-canvas {
    width: 100%;
    height: 100%;
  }

  .hud-top {
    top: 6px;
    right: 6px;
    width: 76px;
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hud-top > div:first-child {
    display: none;
  }

  .auth-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .language-control {
    min-width: 0;
  }

  .language-control select,
  .inventory-toggle,
  .zoom-toggle,
  .fullscreen-toggle,
  .privacy-link,
  .google-login {
    width: 76px;
    min-width: 0;
    min-height: 34px;
    padding: 5px 6px;
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
  }

  .privacy-link {
    display: inline-grid;
  }

  .google-login-slot {
    min-width: 0;
    min-height: 34px;
  }

  .game-status-overlay {
    top: 6px;
    left: 6px;
    width: 120px;
    max-width: 120px;
    min-height: 138px;
    gap: 4px;
    padding: 7px 8px;
    font-size: 0.7rem;
    transform: none;
  }

  .game-status-overlay > span,
  #player-summary {
    white-space: normal;
  }

  .game-status-overlay #level {
    white-space: pre-line;
  }

  .building-notice {
    display: none;
  }

  .hud-chat {
    position: absolute;
    left: auto;
    right: 6px;
    bottom: 6px;
    top: auto;
    width: min(252px, calc(100vw - 146px));
    max-width: none;
    display: grid;
    grid-template-rows: minmax(0, 90px) auto auto;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    text-shadow: none;
    backdrop-filter: none;
  }

  .hud-chat ol {
    display: flex;
    height: auto;
    max-height: min(34vh, 152px);
    justify-content: flex-end;
    gap: 2px;
    padding: 6px 7px;
    border-radius: 8px;
    background: rgba(10, 13, 18, 0.28);
    overflow: visible;
    pointer-events: none;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.82);
  }

  .hud-chat ol:empty {
    visibility: hidden;
  }

  .hud-chat li {
    font-size: 0.78rem;
    line-height: 1.14;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .chat-toggle {
    display: inline-grid;
    grid-row: 3;
    width: 72px;
    min-height: 34px;
    justify-self: end;
    place-items: center;
    padding: 0 8px;
    pointer-events: auto;
    font-size: 0.7rem;
    touch-action: manipulation;
  }

  #chat-form {
    display: none;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
    gap: 6px;
    pointer-events: auto;
  }

  .hud-chat.is-open #chat-form {
    display: grid;
  }

  .hud-chat.is-open .chat-toggle {
    border-color: rgba(255, 223, 142, 0.42);
    color: #fff4b8;
  }

  #chat-form input,
  #chat-form button {
    min-height: 34px;
    font-size: 0.76rem;
  }

  #chat-send {
    min-width: 58px;
  }

  .hud-bottom {
    left: 128px;
    right: 86px;
    top: 6px;
    bottom: auto;
    width: auto;
    max-height: 32px;
    transform: none;
    padding: 5px 8px;
    font-size: 0.7rem;
    text-align: center;
  }

  #prompt {
    display: none;
  }

  #dialogue {
    min-height: 16px;
    margin: 0;
    white-space: nowrap;
  }

  .context-actions {
    left: 128px;
    right: 86px;
    bottom: 52px;
    max-width: none;
    gap: 6px;
  }

  .context-actions.has-rune-exchange {
    width: auto;
    max-width: none;
  }
}

body.has-ranking-message .hud-bottom {
  z-index: 18;
  display: block;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: min(520px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: min(66vh, 390px);
  transform: translate(-50%, -50%);
  padding: 10px 12px;
  border-color: rgba(255, 223, 142, 0.42);
  background: rgba(10, 13, 18, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  overflow: auto;
  text-align: left;
  pointer-events: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ranking-close-button {
  display: none;
}

body.has-ranking-message .ranking-close-button:not([hidden]) {
  position: sticky;
  z-index: 2;
  top: 0;
  right: 0;
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0 0 4px auto;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 223, 142, 0.38);
  border-radius: 6px;
  background: rgba(20, 24, 30, 0.94);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
}

body.has-ranking-message.has-context-amount .hud-bottom {
  display: block;
}

body.has-ranking-message #prompt {
  display: none;
}

body.has-ranking-message #dialogue {
  min-height: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 760px) {
  body.has-ranking-message .hud-bottom {
    width: min(460px, calc(100vw - 20px));
    max-height: min(62vh, calc(var(--app-height) - 96px));
    padding: 9px 10px;
  }

  body.has-ranking-message #dialogue {
    font-size: 0.76rem;
    line-height: 1.3;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body.has-ranking-message .hud-bottom {
    left: 116px;
    right: 72px;
    top: 34px;
    bottom: auto;
    width: auto;
    max-height: calc(var(--app-height) - 78px);
    transform: none;
    padding: 8px 10px;
  }

  body.has-ranking-message #dialogue {
    font-size: 0.7rem;
    line-height: 1.25;
  }
}

@media (max-width: 760px) {
  .users-panel {
    top: 144px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: min(56vh, 390px);
    padding: 10px;
  }

  .users-name-line {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }

  .status-name-row #player-summary {
    white-space: nowrap;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .users-panel {
    top: 4px;
    left: 118px;
    right: auto;
    width: min(340px, calc(100vw - 200px));
    max-height: calc(var(--app-height) - 8px);
    padding: 8px;
  }

  .users-panel-header h2 {
    font-size: 0.92rem;
  }

  .users-panel-header button {
    width: 26px;
    height: 26px;
    min-height: 26px;
    flex-basis: 26px;
  }

  .users-list > li {
    padding: 5px 7px;
  }

  .users-name-line {
    align-items: baseline;
    flex-direction: row;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
  .users-panel {
    top: 6px;
    left: 136px;
    width: min(360px, calc(100vw - 230px));
    max-height: calc(var(--app-height) - 12px);
  }
}

/* Full-screen game shell */
.game-shell-v2 {
  --mobile-chat-height: 0px;
}

.game-shell-v2 .game-screen {
  display: block !important;
  width: 100vw;
  height: var(--app-height);
  min-height: 0;
  padding: 0 !important;
  background: #111820;
}

.game-shell-v2 #game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.game-shell-v2 .game-screen > .game-status-overlay,
.game-shell-v2 .game-screen > .hud-top {
  visibility: hidden;
}

.combat-hud {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 41;
  display: grid;
  width: clamp(140px, calc(var(--game-tile-size) * 4), 300px);
  max-width: calc(100vw - 82px);
  gap: 3px;
  padding: 4px;
  border: 2px solid rgba(4, 7, 10, 0.94);
  border-radius: 4px;
  background: rgba(8, 12, 16, 0.8);
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  image-rendering: pixelated;
}

.dimension-quest-tracker {
  position: absolute;
  top: max(68px, calc(env(safe-area-inset-top, 0px) + 58px));
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 40;
  display: grid;
  width: min(340px, calc(100vw - 84px));
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(174, 228, 246, 0.5);
  border-left: 4px solid #8fe4ff;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(29, 65, 91, 0.94), rgba(13, 28, 49, 0.92)),
    rgba(8, 17, 31, 0.92);
  box-shadow:
    0 8px 22px rgba(1, 8, 17, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #eefbff;
  pointer-events: none;
}

.dimension-quest-tracker[hidden] {
  display: none;
}

.dimension-quest-tracker[data-status="available"] {
  border-left-color: #f2cf70;
}

.dimension-quest-tracker-header {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.dimension-quest-tracker-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(214, 244, 255, 0.54);
  border-radius: 50%;
  background: rgba(128, 211, 239, 0.18);
  color: #d9f8ff;
  font-size: 17px;
  text-shadow: 0 0 8px rgba(143, 228, 255, 0.8);
}

.dimension-quest-tracker-header > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.dimension-quest-tracker-label {
  color: #a8dff0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dimension-quest-tracker-title {
  overflow: hidden;
  color: #fff9df;
  font-size: 12px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dimension-quest-tracker-status {
  padding: 3px 5px;
  border: 1px solid rgba(143, 228, 255, 0.46);
  border-radius: 999px;
  background: rgba(91, 185, 216, 0.2);
  color: #c9f4ff;
  font-size: 8px;
  font-weight: 950;
  white-space: nowrap;
}

.dimension-quest-tracker[data-status="available"] .dimension-quest-tracker-status {
  border-color: rgba(242, 207, 112, 0.54);
  background: rgba(184, 128, 34, 0.2);
  color: #ffe59c;
}

.dimension-quest-tracker-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #d4eaf0;
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dimension-quest-tracker-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(169, 226, 244, 0.2);
  color: #f2f8f8;
  font-size: 9px;
  font-weight: 850;
}

.dimension-quest-tracker-reward {
  color: #ffe084;
  text-align: right;
}

.dimension-quest-tracker.is-dimension-union {
  border-color: rgba(238, 207, 105, 0.62);
  border-left-color: #e7c75f;
  background:
    linear-gradient(135deg, rgba(37, 55, 80, 0.96), rgba(17, 22, 39, 0.94)),
    rgba(8, 12, 23, 0.94);
}

.dimension-quest-tracker.is-dimension-union .dimension-quest-tracker-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

#dimension-quest-tracker-objective {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.dimension-union-quest-objective {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #eaf3f7;
  line-height: 1.25;
}

.dimension-union-quest-objective > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dimension-union-quest-objective.is-complete {
  color: #a9e69a;
}

.dimension-quest-tracker-replay {
  min-height: 30px;
  padding: 5px 9px;
  border-color: rgba(238, 207, 105, 0.6);
  border-radius: 999px;
  color: #fff2b9;
  background: rgba(105, 82, 24, 0.58);
  font-size: 9px;
  font-weight: 900;
  pointer-events: auto;
}

.dimension-quest-tracker-replay[hidden] {
  display: none;
}

.combat-buffs {
  position: absolute;
  top: 21px;
  left: calc(100% + 6px);
  display: flex;
  max-width: min(144px, calc(100vw - 100% - 20px));
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

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

.combat-buff-icon {
  display: grid;
  grid-template-rows: 1fr auto;
  width: 30px;
  height: 28px;
  place-items: center;
  padding: 2px 1px 1px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.28)),
    var(--buff-color, #f2d35f),
    rgba(8, 12, 16, 0.4);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fffbe8;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 950;
  line-height: 0.95;
  opacity: 0.72;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.88),
    -1px 0 0 rgba(0, 0, 0, 0.72);
}

.combat-buff-glyph {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 15px;
  place-items: center;
  font-size: 9px;
}

.combat-buff-glyph img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.18));
}

.combat-buff-time {
  min-width: 100%;
  padding-top: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 8px;
  text-align: center;
}

.combat-buff-icon.is-expiring {
  animation: combat-buff-expiring 0.58s steps(2, jump-none) infinite;
}

@keyframes combat-buff-expiring {
  0%,
  100% {
    opacity: 0.9;
    filter: saturate(1.2);
  }

  50% {
    opacity: 0.28;
    filter: saturate(0.78);
  }
}

.combat-meter {
  display: grid;
  min-width: 0;
  height: 16px;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: stretch;
  gap: 3px;
}

.combat-top-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(54px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.combat-hud-line {
  min-width: 0;
  overflow: hidden;
  color: #f8f5e8;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  text-align: left;
  text-overflow: ellipsis;
  white-space: pre-line;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000;
}

.combat-users-row {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.combat-users-row .users-toggle {
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
}

.combat-users-row .online-count {
  color: #d9f4ff;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000;
}

.combat-hud-money {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #ffe070;
}

.combat-currency-amount {
  min-height: 13px;
}

.combat-currency-amount .currency-icon {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
}

.combat-legacy-lifespan {
  order: 0;
  justify-self: end;
  min-height: 12px;
  color: #d9f4ff;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

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

.combat-legacy-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: end;
  gap: 5px;
}

.combat-legacy-row .help-toggle {
  align-self: end;
  justify-self: end;
  margin-bottom: 1px;
}

.combat-legacy-row .help-toggle[hidden] {
  display: none;
}

.combat-meter-label {
  display: grid;
  align-items: center;
  justify-items: start;
  color: #f8f5e8;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000;
}

.combat-meter-track {
  position: relative;
  display: block;
  justify-self: end;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.92);
  border-radius: 2px;
  background: rgba(15, 18, 21, 0.92);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.76),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.combat-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  transition: width 160ms ease-out;
}

.combat-meter-hp .combat-meter-fill {
  background: linear-gradient(180deg, #f75b58 0%, #c9252c 58%, #871820 100%);
  box-shadow: inset 0 1px 0 rgba(255, 211, 196, 0.48);
}

.combat-meter-mp .combat-meter-fill {
  background: linear-gradient(180deg, #58c8ff 0%, #247fd5 58%, #174783 100%);
  box-shadow: inset 0 1px 0 rgba(213, 245, 255, 0.46);
}

.combat-meter-exp .combat-meter-fill {
  width: 0;
  background: linear-gradient(180deg, #ffe070 0%, #d6a62c 58%, #8d6817 100%);
  box-shadow: inset 0 1px 0 rgba(255, 249, 203, 0.5);
}

.combat-meter-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.96),
    -1px 0 0 rgba(0, 0, 0, 0.82);
}

.game-menu-toggle {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 42;
  display: inline-grid;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 7px;
  background: rgba(15, 22, 29, 0.82);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
  color: #f8f5e8;
  font-size: 1.62rem;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  touch-action: manipulation;
}

.game-menu-toggle:hover,
.game-menu-toggle:focus-visible,
.game-menu-toggle[aria-expanded="true"] {
  border-color: rgba(255, 224, 143, 0.78);
  background: rgba(42, 52, 62, 0.94);
  color: #ffe08f;
}

.game-menu-open .game-menu-toggle {
  opacity: 0;
  pointer-events: none;
}

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

.game-menu {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  width: min(360px, calc(100vw - 20px));
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(9, 14, 19, 0.68);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38);
  color: var(--ink);
  backdrop-filter: blur(6px) saturate(115%);
}

.quick-login {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: calc(max(10px, env(safe-area-inset-right, 0px)) + 54px);
  z-index: 42;
  display: inline-flex;
  min-width: 92px;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(119, 211, 255, 0.62);
  border-radius: 7px;
  background: rgba(15, 31, 43, 0.88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
  color: #eaf8ff;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(8px);
  touch-action: manipulation;
}

.quick-login[hidden] {
  display: none;
}

.quick-login:hover,
.quick-login:focus-visible {
  border-color: #bcecff;
  background: rgba(27, 57, 76, 0.96);
}

.quick-login-icon {
  font-size: 1.18rem;
}

.game-menu-open .quick-login {
  opacity: 0;
  pointer-events: none;
}

.game-menu-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(9, 14, 19, 0.24);
}

.game-menu-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 3px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 245, 232, 0.78);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.game-menu-tabs button.is-active {
  border-color: rgba(255, 224, 143, 0.72);
  background: rgba(241, 188, 82, 0.18);
  color: #fff2b8;
}

.game-menu-header {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.game-menu-header strong {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-menu-header button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  font-size: 1.3rem;
  line-height: 1;
}

.game-menu-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 14px;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.game-menu-scroll > * {
  flex: 0 0 auto;
}

.menu-settings-panel {
  display: grid;
  min-height: 0;
  gap: 14px;
}

.party-panel {
  display: grid;
  gap: 12px;
}

.party-panel[hidden] {
  display: none !important;
}

.changelog-panel {
  display: grid;
  min-height: 0;
  gap: 10px;
}

.changelog-panel[hidden] {
  display: none !important;
}

.changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.changelog-title {
  margin: 0;
  color: #fff3c4;
  font-size: 1rem;
}

.changelog-wiki-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  border-color: rgba(242, 210, 112, 0.58);
  border-radius: 999px;
  color: #fff0b2;
  background: rgba(117, 83, 24, 0.38);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.changelog-wiki-button:hover,
.changelog-wiki-button:focus-visible {
  border-color: #f2d270;
  color: #fff8db;
  background: rgba(170, 118, 29, 0.5);
}

.changelog-status {
  margin: 0;
  padding: 12px 4px;
  color: rgba(248, 245, 232, 0.72);
  font-size: 0.82rem;
}

.changelog-status.is-error {
  color: #ffaaa0;
}

.changelog-list {
  display: grid;
  gap: 9px;
}

.changelog-entry {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.changelog-entry-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: rgba(248, 245, 232, 0.72);
  font-size: 0.7rem;
}

.changelog-entry-meta time {
  min-width: 0;
  overflow-wrap: anywhere;
}

.changelog-entry-meta code {
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(218, 229, 238, 0.78);
  font-size: 0.65rem;
}

.changelog-latest {
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid rgba(242, 210, 112, 0.48);
  border-radius: 4px;
  color: #ffe59a;
  font-size: 0.64rem;
  font-weight: 900;
}

.changelog-entry ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: rgba(248, 245, 232, 0.9);
  font-size: 0.78rem;
  line-height: 1.42;
}

.party-card,
.party-member-row,
.party-invite-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.skill-available-row.is-passive {
  border-color: rgba(114, 214, 255, 0.34);
  background: linear-gradient(90deg, rgba(57, 126, 160, 0.16), rgba(255, 255, 255, 0.045));
}

.skill-available-row.is-locked {
  opacity: 0.56;
  filter: saturate(0.45);
}

.party-member-row,
.party-invite-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.party-member-row span,
.party-invite-row span,
.party-card p {
  color: rgba(248, 245, 232, 0.76);
  font-size: 0.82rem;
  line-height: 1.3;
}

.party-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.party-member-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.party-actions button,
.party-member-row button,
.party-invite-row button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.74rem;
}

.game-shell-v2 .game-menu .game-status-overlay {
  position: static;
  display: grid;
  width: auto;
  max-width: none;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px 10px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.2;
  pointer-events: auto;
  text-shadow: none;
  transform: none;
}

.game-shell-v2 .game-menu .status-name-row,
.game-shell-v2 .game-menu .money-row,
.game-shell-v2 .game-menu .level-help-row,
.game-shell-v2 .game-menu .health-status,
.game-shell-v2 .game-menu #lifespan {
  grid-column: 1 / -1;
}

.game-shell-v2 .game-menu .status-name-row {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
}

.game-shell-v2 .game-menu #player-summary {
  white-space: nowrap;
}

.game-shell-v2 .game-menu .users-status-row {
  flex: 0 0 auto;
}

.game-shell-v2 .game-menu .money-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.game-shell-v2 .game-menu .money-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-shell-v2 .game-menu .hud-top {
  position: static;
  display: grid;
  width: auto;
  gap: 10px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.game-shell-v2 .game-menu .hud-top > div:first-child {
  display: none;
}

.game-shell-v2 .game-menu .auth-status {
  max-width: 100%;
}

.game-shell-v2 .game-menu .game-status-overlay #level {
  white-space: normal;
}

.game-shell-v2 .game-menu .auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.game-shell-v2 .game-menu .auth-actions > .inventory-toggle,
.game-shell-v2 .game-menu .auth-actions > .skills-toggle {
  display: none;
}

.game-shell-v2 .game-menu .language-control,
.game-shell-v2 .game-menu .google-login-slot {
  min-width: 0;
}

.game-shell-v2 .game-menu .joystick-setting {
  display: none;
}

.game-shell-v2 .game-menu .google-login-slot {
  grid-column: 1 / -1;
}

.game-shell-v2 .game-menu .language-control select,
.game-shell-v2 .game-menu .inventory-toggle,
.game-shell-v2 .game-menu .characters-toggle,
.game-shell-v2 .game-menu .skills-toggle,
.game-shell-v2 .game-menu .zoom-toggle,
.game-shell-v2 .game-menu .fullscreen-toggle,
.game-shell-v2 .game-menu .joystick-setting,
.game-shell-v2 .game-menu .privacy-link,
.game-shell-v2 .game-menu .google-login {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  font-size: 0.74rem;
  line-height: 1.1;
}

.game-shell-v2 .game-screen > .hud-chat {
  position: absolute;
  top: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 32;
  display: grid;
  width: min(360px, calc(100vw - 24px));
  max-width: none;
  grid-template-rows: auto auto auto;
  justify-items: end;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.92);
  backdrop-filter: none;
}

.game-shell-v2 .game-screen > .hud-chat ol {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: min(34vh, 14.5em);
  justify-content: flex-end;
  gap: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: rgba(7, 11, 16, 0.24);
  overflow: hidden;
  pointer-events: none;
  font-size: 0.82rem;
  line-height: 1.2;
  scrollbar-width: none;
}

.game-shell-v2 .game-screen > .hud-chat.is-open ol {
  max-height: min(48vh, 18rem);
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin;
}

.game-shell-v2 .game-screen > .hud-chat[data-display-mode="auto"]:not(.is-open):not(.has-recent-message) ol {
  display: none;
}

.game-shell-v2 .game-screen > .hud-chat[data-display-mode="hidden"] {
  display: none;
}

.game-shell-v2 .game-screen > .hud-chat ol:empty {
  visibility: hidden;
}

.game-shell-v2 .game-screen > .hud-chat li {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 1.2em;
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: none;
}

.game-shell-v2 .game-screen > .hud-chat .chat-toggle {
  display: inline-grid;
  grid-row: 3;
  width: 72px;
  min-height: 36px;
  place-items: center;
  padding: 0 10px;
  pointer-events: auto;
  touch-action: manipulation;
}

.game-shell-v2 .game-screen > .hud-chat #chat-form {
  display: none;
  grid-row: 2;
  width: 100%;
  pointer-events: auto;
}

.game-shell-v2 .game-screen > .hud-chat.is-open #chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
  gap: 6px;
}

.game-shell-v2 .game-screen > .hud-chat #chat-form input,
.game-shell-v2 .game-screen > .hud-chat #chat-form button {
  min-height: 38px;
  font-size: 0.74rem;
  pointer-events: auto;
}

.game-shell-v2 .context-actions {
  left: max(12px, env(safe-area-inset-left, 0px));
  right: auto;
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 120px);
  bottom: auto;
  width: auto;
  max-width: min(720px, calc(100vw - 24px));
  justify-content: flex-start;
  transform: none;
}

.game-shell-v2 .context-actions.has-shop-catalog {
  left: max(12px, env(safe-area-inset-left, 0px));
  right: auto;
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 76px);
  bottom: auto;
  width: min(560px, calc(100vw - 96px));
  max-width: min(560px, calc(100vw - 96px));
  max-height: calc(var(--app-height) - 96px);
  overflow: auto;
}

.game-shell-v2 .context-actions.has-rune-exchange,
.game-shell-v2 .context-actions.closedVenue-actions {
  left: max(12px, env(safe-area-inset-left, 0px));
  right: auto;
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 120px);
  bottom: auto;
  width: min(720px, calc(100vw - 24px));
  max-width: min(720px, calc(100vw - 24px));
  transform: none;
}

.game-shell-v2 .game-menu .inventory-panel,
.game-shell-v2 .game-menu .skills-panel {
  position: static;
  z-index: auto;
  display: grid;
  width: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.game-shell-v2 .game-menu .inventory-panel[hidden],
.game-shell-v2 .game-menu .skills-panel[hidden],
.game-shell-v2 .game-menu .menu-settings-panel[hidden],
.game-shell-v2 .game-menu .changelog-panel[hidden] {
  display: none;
}

.game-shell-v2 .game-menu .inventory-header {
  min-width: 0;
  margin-bottom: 8px;
}

.game-shell-v2 .game-menu .inventory-header > div,
.game-shell-v2 .game-menu .inventory-header-actions,
.game-shell-v2 .game-menu .inventory-header-actions button {
  min-width: 0;
}

.game-shell-v2 .game-menu .inventory-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.game-shell-v2 .game-menu #inventory-close,
.game-shell-v2 .game-menu #skills-close {
  display: none;
}

.game-shell-v2 .game-menu .inventory-list,
.game-shell-v2 .game-menu .skills-list {
  max-height: none;
  overflow: visible;
  overflow-x: clip;
  padding-right: 0;
}

.game-shell-v2 .game-menu .inventory-section,
.game-shell-v2 .game-menu .inventory-detail,
.game-shell-v2 .game-menu .inventory-body-grid {
  max-width: 100%;
  min-width: 0;
}

.game-shell-v2 .game-menu .inventory-list,
.game-shell-v2 .game-menu .inventory-equipment,
.game-shell-v2 .game-menu .inventory-bag,
.game-shell-v2 .game-menu .item-grid,
.game-shell-v2 .game-menu .item-buttons {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.game-shell-v2 .game-menu .inventory-detail h3,
.game-shell-v2 .game-menu .inventory-detail p,
.game-shell-v2 .game-menu .equipment-fact-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.game-shell-v2 .game-menu .inventory-body-grid {
  grid-template-columns: minmax(0, 1fr);
}

.game-shell-v2 .game-menu .item-buttons button,
.game-shell-v2 .game-menu .skill-slot-popover button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-shell-v2 .characters-panel,
.game-shell-v2 .users-panel,
.game-shell-v2 .help-panel {
  z-index: 48;
}

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  :root {
    --skill-button-size: 52px;
  }

  .game-shell-v2 .game-menu .skill-generation-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .game-shell-v2 .game-menu .skill-generation-label {
    width: auto;
    min-height: 0;
    justify-self: start;
    padding: 3px 8px;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .game-shell-v2 .game-menu .skill-available-row {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .game-shell-v2 .game-menu .skill-row-copy > span {
    display: block;
    min-width: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .game-shell-v2 .game-menu .skill-row-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    align-self: stretch;
  }

  .game-shell-v2 .game-menu .skill-row-actions button {
    min-width: 0;
    min-height: 38px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .combat-hud {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    max-width: calc(100vw - 72px);
    gap: 2px;
    padding: 3px;
  }

  .dimension-quest-tracker {
    top: max(62px, calc(env(safe-area-inset-top, 0px) + 54px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: min(310px, calc(100vw - 80px));
    gap: 5px;
    padding: 7px 8px;
  }

  .dimension-quest-tracker-description {
    font-size: 9px;
  }

  .dimension-quest-tracker-details {
    gap: 5px;
    font-size: 8px;
  }

  .combat-buffs {
    top: 19px;
    left: calc(100% + 4px);
    max-width: 66px;
    gap: 3px;
  }

  .combat-buff-icon {
    width: 30px;
    height: 27px;
  }

  .combat-buff-glyph {
    font-size: 8px;
  }

  .combat-buff-time {
    font-size: 7px;
  }

  .combat-meter {
    height: 15px;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 2px;
  }

  .combat-meter-label {
    font-size: 9px;
  }

  .combat-meter-text {
    font-size: 8px;
  }

  .game-menu-toggle {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
  }

  .game-menu {
    top: max(6px, env(safe-area-inset-top, 0px));
    right: max(6px, env(safe-area-inset-right, 0px));
    bottom: max(6px, env(safe-area-inset-bottom, 0px));
    width: min(344px, calc(100vw - 12px));
  }

  .game-menu-scroll {
    gap: 11px;
    padding: 10px;
  }

  .game-shell-v2 .game-menu .game-status-overlay {
    width: auto;
    max-width: none;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 8px;
    padding: 0 0 11px;
    overflow: visible;
    font-size: 0.72rem;
  }

  .game-shell-v2 .game-menu .game-status-overlay > span,
  .game-shell-v2 .game-menu #player-summary {
    white-space: nowrap;
  }

  .game-shell-v2 .game-menu .hud-top {
    width: auto;
    padding: 0 0 11px;
  }

  .game-shell-v2 .game-menu .auth-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-shell-v2 .game-menu .language-control select,
  .game-shell-v2 .game-menu .inventory-toggle,
  .game-shell-v2 .game-menu .characters-toggle,
  .game-shell-v2 .game-menu .skills-toggle,
  .game-shell-v2 .game-menu .zoom-toggle,
  .game-shell-v2 .game-menu .fullscreen-toggle,
  .game-shell-v2 .game-menu .joystick-setting,
  .game-shell-v2 .game-menu .bgm-setting,
  .game-shell-v2 .game-menu .privacy-link,
  .game-shell-v2 .game-menu .google-login {
    width: 100%;
    min-height: 40px;
    font-size: 0.72rem;
  }

  .game-shell-v2 .game-screen > .hud-chat {
    left: calc(env(safe-area-inset-left, 0px) + var(--skill-button-size, 52px) + 18px);
    right: calc(env(safe-area-inset-right, 0px) + var(--skill-button-size, 52px) + 18px);
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
  }

  .game-shell-v2 .game-screen > .hud-chat ol {
    height: auto;
    max-height: min(34vh, 14.5em);
    padding: 4px 6px;
    font-size: 0.76rem;
  }

  .game-shell-v2 .game-screen > .hud-chat .chat-toggle {
    width: 68px;
    min-height: 34px;
  }

  .game-shell-v2 .game-screen > .hud-chat #chat-form input,
  .game-shell-v2 .game-screen > .hud-chat #chat-form button {
    min-height: 36px;
    font-size: 0.72rem;
  }

  .game-shell-v2 .context-actions,
  .game-shell-v2 .context-actions.has-rune-exchange,
  .game-shell-v2 .context-actions.closedVenue-actions {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: auto;
    top: calc(max(8px, env(safe-area-inset-top, 0px)) + 100px);
    bottom: auto;
    width: min(680px, calc(100vw - 16px));
    max-width: min(680px, calc(100vw - 16px));
    transform: none;
  }

  .game-shell-v2 .context-actions.has-shop-catalog {
    left: calc(env(safe-area-inset-left, 0px) + var(--skill-button-size, 52px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + var(--skill-button-size, 52px) + 12px);
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: min(70vh, calc(var(--app-height) - 92px));
    overflow: auto;
  }

  .game-shell-v2 .context-actions.has-rune-exchange {
    top: calc(max(8px, env(safe-area-inset-top, 0px)) + 100px);
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    max-height: none;
    align-content: end;
    overflow: hidden;
  }

  .game-shell-v2 .context-actions.has-rune-exchange .rune-exchange-catalog {
    max-height: 100%;
  }

  .game-shell-v2 .context-actions button {
    min-height: 38px;
  }

  .game-shell-v2 .skill-bar {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--game-tile-size, 44px) + 12px);
    width: var(--skill-button-size, 52px);
    gap: 6px;
    transform: none;
  }

  .game-shell-v2 .skill-bar-left {
    left: max(6px, env(safe-area-inset-left, 0px));
  }

  .game-shell-v2 .skill-bar-right {
    right: max(6px, env(safe-area-inset-right, 0px));
  }

  .game-shell-v2 .skill-bar button {
    width: var(--skill-button-size, 52px);
    height: var(--skill-button-size, 52px);
  }
}

@media (pointer: coarse) and (max-width: 1180px) {
  .game-shell-v2 .context-actions.has-shop-catalog {
    left: calc(env(safe-area-inset-left, 0px) + var(--skill-button-size, 52px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + var(--skill-button-size, 52px) + 12px);
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: min(70vh, calc(var(--app-height) - 92px));
    overflow: auto;
  }
}

@media (pointer: fine) and (min-width: 761px) {
  .game-shell-v2 .context-actions.has-shop-catalog {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100vw - 48px));
    max-width: min(560px, calc(100vw - 48px));
    max-height: min(calc(var(--app-height) - 48px), 760px);
    transform: translate(-50%, -50%);
  }
}

@media (orientation: landscape) and (min-width: 460px) and (max-height: 520px) and (pointer: coarse) {
  .game-shell-v2 .game-menu {
    left: max(6px, env(safe-area-inset-left, 0px), calc((100vw - 560px) / 2));
    right: max(6px, env(safe-area-inset-right, 0px), calc((100vw - 560px) / 2));
    width: auto;
  }

  .game-shell-v2 .game-menu .inventory-body-grid {
    grid-template-columns: minmax(150px, 0.8fr) minmax(210px, 1.2fr);
    gap: 10px;
  }
}

@media (orientation: portrait) and (max-width: 760px) {
  .game-shell-v2 .game-menu {
    left: max(6px, env(safe-area-inset-left, 0px), calc((100vw - 420px) / 2));
    right: max(6px, env(safe-area-inset-right, 0px), calc((100vw - 420px) / 2));
    width: auto;
  }

  .game-shell-v2[data-menu-tab="skills"] .game-menu-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .game-shell-v2[data-menu-tab="skills"] .game-menu-tabs button {
    grid-column: span 2;
    font-size: 0.62rem;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .game-shell-v2[data-menu-tab="skills"] .game-menu-tabs button:nth-child(n + 4) {
    grid-column: span 3;
  }

  .game-shell-v2[data-menu-tab="skills"] .skill-config-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
  }

  .game-shell-v2[data-menu-tab="skills"] .skill-slots-overview-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .game-shell-v2 .game-menu .inventory-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .game-shell-v2 .game-menu .inventory-header-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 6px;
  }

  .game-shell-v2 .game-menu .inventory-header-actions button {
    width: 100%;
    min-height: 40px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .game-shell-v2 .game-menu .inventory-body-grid {
    gap: 10px;
  }

  .game-shell-v2 .context-actions.has-shop-catalog {
    top: calc(max(8px, env(safe-area-inset-top, 0px)) + 76px);
    bottom: auto;
    max-height: min(64vh, calc(var(--app-height) - 118px));
  }

  .game-shell-v2 .context-actions.has-shop-catalog .shop-catalog-maple {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-shell-v2 .context-actions.has-shop-catalog .shop-detail {
    order: 1;
  }

  .game-shell-v2 .context-actions.has-shop-catalog .shop-list {
    order: 2;
    max-height: min(30vh, 210px);
  }

  .game-shell-v2 .shop-confirm-modal {
    top: 50%;
    width: min(360px, calc(100vw - 24px));
  }
}

/* Optional mobile movement pad */
.joystick-setting {
  min-width: 0;
}

.game-shell-v2 .game-menu .collision-debug-setting,
.game-shell-v2 .game-menu .settings-toggle-setting {
  display: grid;
  min-height: 40px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto minmax(58px, auto);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(20, 29, 37, 0.64);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
}

@media (orientation: portrait) and (max-width: 760px) {
  .dimension-quest-tracker {
    top: max(100px, calc(env(safe-area-inset-top, 0px) + 92px));
    width: min(340px, calc(100vw - 16px));
  }
}

.game-shell-v2 .game-menu .graphics-quality-setting {
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(108px, 0.72fr);
  align-items: center;
  gap: 6px 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(20, 29, 37, 0.64);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
}

.game-shell-v2 .game-menu .graphics-quality-setting select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px 28px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(5, 10, 15, 0.82);
  color: var(--ink);
  font: inherit;
}

.game-shell-v2 .game-menu .graphics-quality-setting output {
  grid-column: 1 / -1;
  color: rgba(238, 241, 232, 0.68);
  font-size: 0.62rem;
}

.game-shell-v2 .game-menu .key-binding-setting {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(20, 29, 37, 0.64);
}

.control-binding-setting {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 7px;
}

.control-binding-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.control-binding-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(5, 10, 15, 0.7);
  color: rgba(248, 245, 232, 0.74);
  font-size: 0.72rem;
  font-weight: 900;
}

.control-binding-tabs button.is-active {
  border-color: rgba(255, 224, 143, 0.78);
  background: rgba(120, 76, 18, 0.58);
  color: #fff3c4;
}

.control-binding-setting > .key-binding-setting[hidden] {
  display: none !important;
}

.gamepad-binding-status {
  min-height: 1.35em;
  color: #a9dcff !important;
  font-weight: 800;
}

.gamepad-enabled-setting,
.gamepad-dead-zone-setting {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
}

.gamepad-enabled-setting {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.gamepad-enabled-setting input {
  width: 20px;
  height: 20px;
  accent-color: #e6c75d;
}

.gamepad-dead-zone-setting {
  grid-template-columns: minmax(90px, auto) minmax(80px, 1fr) 38px;
}

.gamepad-dead-zone-setting input {
  width: 100%;
  min-width: 0;
  accent-color: #e6c75d;
}

.gamepad-dead-zone-setting output {
  text-align: right;
  color: #fff3c4;
  font-variant-numeric: tabular-nums;
}

.key-binding-heading,
.key-binding-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, auto);
  align-items: center;
  gap: 10px;
}

.key-binding-heading strong {
  font-size: 0.78rem;
}

.key-binding-heading button,
.key-binding-row button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(5, 10, 15, 0.82);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.key-binding-setting > p {
  margin: 0;
  color: rgba(238, 241, 232, 0.68);
  font-size: 0.64rem;
  line-height: 1.35;
}

.key-binding-list {
  display: grid;
  gap: 5px;
}

.key-binding-row {
  min-height: 34px;
  font-size: 0.7rem;
}

.key-binding-row button.is-capturing {
  border-color: #f1bc52;
  background: rgba(120, 76, 18, 0.72);
  color: #fff3c4;
}

.bgm-setting {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(20, 29, 37, 0.64);
}

.bgm-toggle-row,
.bgm-volume-row {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
}

.bgm-toggle-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(58px, auto);
  cursor: pointer;
}

.bgm-volume-row {
  grid-template-columns: minmax(90px, auto) minmax(84px, 1fr) 38px;
}

.bgm-toggle-row input {
  appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  background: rgba(4, 8, 12, 0.66);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.bgm-toggle-row input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d9e1e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: transform 140ms ease, background 140ms ease;
}

.bgm-toggle-row input:checked {
  border-color: rgba(255, 224, 143, 0.82);
  background: #477d42;
}

.bgm-toggle-row input:checked::after {
  background: #fff3bd;
  transform: translateX(18px);
}

.bgm-toggle-row input:focus-visible,
.bgm-volume-row input:focus-visible {
  outline: 2px solid #ffe08f;
  outline-offset: 2px;
}

.bgm-volume-row input {
  width: 100%;
  min-width: 0;
  accent-color: #e6c75d;
  cursor: pointer;
}

.bgm-volume-row input:disabled {
  cursor: default;
  opacity: 0.4;
}

.bgm-volume-row output,
.bgm-toggle-row #bgm-state,
.bgm-toggle-row #sfx-state {
  color: #ffe08f;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bgm-track {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.joystick-setting input {
  appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  background: rgba(4, 8, 12, 0.66);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.joystick-setting input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d9e1e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: transform 140ms ease, background 140ms ease;
}

.joystick-setting input:checked {
  border-color: rgba(255, 224, 143, 0.82);
  background: #477d42;
}

.joystick-setting input:checked::after {
  background: #fff3bd;
  transform: translateX(18px);
}

.joystick-setting input:focus-visible {
  outline: 2px solid #ffe08f;
  outline-offset: 2px;
}

.game-shell-v2 .touch-controls {
  right: auto;
  bottom: auto;
  left: calc(env(safe-area-inset-left, 0px) + var(--game-tile-size, 48px) * 0.75);
  z-index: 34;
  width: var(--joystick-size);
  height: var(--joystick-size);
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.42));
  --joystick-x: 0px;
  --joystick-y: 0px;
}

.game-shell-v2 .touch-controls .joystick-base {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(236, 246, 251, 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 143, 0.18) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(18, 29, 37, 0.34) 0 43%, rgba(8, 13, 18, 0.72) 44% 100%);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.08),
    inset 0 -10px 22px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(5px);
}

.game-shell-v2 .touch-controls .joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(28px, calc(var(--joystick-size) * 0.42));
  height: max(28px, calc(var(--joystick-size) * 0.42));
  border: 2px solid rgba(255, 239, 179, 0.74);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.34) 0 16%, transparent 17%),
    linear-gradient(145deg, rgba(99, 137, 89, 0.96), rgba(27, 58, 48, 0.98));
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.16),
    inset 0 -7px 12px rgba(0, 0, 0, 0.34),
    0 7px 14px rgba(0, 0, 0, 0.44);
  transform: translate(calc(-50% + var(--joystick-x)), calc(-50% + var(--joystick-y)));
  transition: transform 120ms ease;
}

.game-shell-v2 .touch-controls.is-dragging .joystick-knob {
  border-color: rgba(255, 224, 143, 0.96);
  transition: none;
}

@media (max-width: 760px), (max-height: 520px), (pointer: coarse) {
  .game-shell-v2 .game-menu .joystick-setting {
    display: grid;
    min-height: 40px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto minmax(58px, auto);
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background: rgba(20, 29, 37, 0.64);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
  }

  .game-shell-v2 .game-menu .joystick-setting #joystick-state {
    color: #ffe08f;
    text-align: right;
  }

  .game-shell-v2.joystick-enabled .touch-controls {
    display: block;
    bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--game-tile-size, 44px) +
      12px +
      var(--skill-button-size, 52px) * 3 +
      12px +
      var(--game-tile-size, 44px) * 0.75
    );
    pointer-events: auto;
  }

  .game-shell-v2.joystick-enabled .game-screen > .hud-chat {
    width: auto;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .game-shell-v2 .game-screen > .hud-chat {
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + var(--skill-button-size, 52px) + 14px);
    width: min(34vw, 320px);
  }

  .game-shell-v2.joystick-enabled .touch-controls {
    left: calc(
      env(safe-area-inset-left, 0px) +
      var(--skill-button-size, 52px) +
      var(--game-tile-size, 44px) * 0.75
    );
    bottom: calc(env(safe-area-inset-bottom, 0px) + 98px - var(--joystick-radius));
  }
}

/* Permanent home vault */
.vault-panel {
  top: 50%;
  left: 50%;
  z-index: 72;
  display: grid;
  width: min(1080px, calc(100vw - 28px));
  max-height: min(880px, calc(var(--app-height) - 28px));
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  padding: 14px;
  border-color: rgba(241, 188, 82, 0.42);
  background: rgba(19, 24, 29, 0.96);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 238, 174, 0.12);
  transform: translate(-50%, -50%);
}

.vault-panel[hidden] {
  display: none;
}

.vault-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 12px;
}

.vault-header .label {
  margin: 0 0 2px;
  color: #f1bc52;
}

.vault-header h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.vault-header > strong {
  color: #fff1b5;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.vault-header button {
  display: grid;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 1.25rem;
  line-height: 1;
}

.vault-protection-note {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #d7a83e;
  background: rgba(241, 188, 82, 0.08);
  color: #f8e8b4;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.3;
}

.vault-content {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}

.vault-panes {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
}

.vault-pane {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
}

.vault-pane-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.vault-pane-header h3 {
  margin: 0;
  color: #fff4b8;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.vault-pane-header span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.vault-pane-header .vault-store-all {
  min-height: 30px;
  margin-left: auto;
  padding: 4px 8px;
  border-color: rgba(241, 188, 82, 0.48);
  background: rgba(94, 65, 29, 0.78);
  color: #fff4c9;
  font-size: 0.66rem;
  font-weight: 900;
}

.vault-grid {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 5px 2px 2px;
  scrollbar-width: thin;
}

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

.vault-storage-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.vault-grid::-webkit-scrollbar {
  width: 7px;
}

.vault-grid::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background: rgba(241, 188, 82, 0.34);
}

.vault-cell {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 44px;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(45, 35, 28, 0.48);
  color: var(--muted);
  cursor: pointer;
}

.vault-cell:hover:not(:disabled) {
  border-color: rgba(241, 188, 82, 0.66);
  background: rgba(241, 188, 82, 0.1);
}

.vault-cell.is-selected {
  border-color: #ffd96a;
  box-shadow:
    0 0 0 2px rgba(255, 217, 106, 0.24),
    inset 0 0 18px rgba(241, 188, 82, 0.13);
}

.vault-cell.is-empty {
  cursor: default;
  opacity: 0.34;
}

.vault-cell.is-empty:not(:disabled) {
  cursor: pointer;
  opacity: 0.62;
  border-color: rgba(241, 188, 82, 0.3);
}

.vault-detail {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(241, 188, 82, 0.24);
}

.vault-detail > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.vault-detail > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.vault-detail strong {
  overflow-wrap: anywhere;
  color: #fff4c9;
}

.vault-detail span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.vault-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.vault-actions button,
.vault-quantity input {
  min-height: 38px;
  padding: 7px 10px;
  border-color: rgba(241, 188, 82, 0.42);
  background: rgba(94, 65, 29, 0.72);
  color: #fff4c9;
  font-size: 0.75rem;
}

.vault-quantity {
  display: grid;
  gap: 5px;
  color: #fff4c9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

.vault-quantity-controls {
  display: grid;
  grid-template-columns: 38px minmax(64px, 1fr) 38px 52px;
  gap: 5px;
}

.vault-quantity input {
  width: 100%;
  min-width: 0;
  text-align: center;
  border-radius: 7px;
  outline: none;
}

@media (max-width: 700px) and (orientation: portrait) {
  .vault-panel {
    width: calc(100vw - 16px);
    max-height: calc(var(--app-height) - 16px);
    padding: 10px;
  }

  .vault-panes {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
  }

  .vault-backpack-grid {
    max-height: 122px;
  }

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

  .vault-cell {
    min-height: 46px;
  }

  .vault-detail {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 8px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .vault-panel {
    width: calc(100vw - 16px);
    max-height: calc(var(--app-height) - 12px);
    gap: 6px;
    padding: 8px 10px;
  }

  .vault-header {
    grid-template-columns: minmax(0, 1fr) auto 34px;
  }

  .vault-header button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .vault-protection-note {
    padding: 5px 8px;
    font-size: 0.68rem;
  }

  .vault-panes {
    grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
    gap: 10px;
  }

  .vault-storage-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .vault-cell {
    min-height: 36px;
  }

  .vault-detail {
    min-height: 48px;
    padding-top: 6px;
  }

  .vault-detail span {
    display: none;
  }

  .vault-actions button {
    min-height: 34px;
    padding: 5px 8px;
  }
}

.game-shell-v2 input,
.game-shell-v2 textarea,
.game-shell-v2 select {
  font-size: max(16px, 0.9rem);
}

.game-shell-v2 .game-screen > .hud-chat #chat-form input,
.game-shell-v2 .game-screen > .hud-chat #chat-form button {
  font-size: max(16px, 0.9rem);
}

.game-shell-v2 button,
.game-shell-v2 .hud,
.game-shell-v2 .game-menu,
.game-shell-v2 .context-actions,
.game-shell-v2 .skill-bar,
.game-shell-v2 .touch-controls {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.is-performance-mode .hud,
body.is-performance-mode .game-menu,
body.is-performance-mode .context-actions,
body.is-performance-mode .hud-chat,
body.is-performance-mode .combat-hud,
body.is-performance-mode .player-action-menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.is-performance-mode .is-tutorial-target,
body.is-performance-mode .tutorial-control-callout,
body.is-performance-mode .world-map-tutorial-scroll-cue {
  animation: none;
}

@keyframes beginner-tutorial-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px #ff3b3b, 0 0 10px rgba(255, 59, 59, 0.72);
  }
  50% {
    box-shadow: 0 0 0 4px #ff7777, 0 0 20px rgba(255, 59, 59, 0.95);
  }
}

@keyframes tutorial-control-callout-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}

.tutorial-control-callout {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top, 0px)) + 58px);
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 51;
  width: min(280px, calc(100vw - 28px));
  padding: 9px 12px;
  border: 2px solid #ff6767;
  border-radius: 9px;
  background: rgba(54, 10, 13, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.52), 0 0 18px rgba(255, 75, 75, 0.7);
  color: #fff4e6;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.4;
  pointer-events: none;
  text-align: center;
  text-wrap: balance;
  animation: tutorial-control-callout-bob 0.9s ease-in-out infinite;
}

.tutorial-control-callout[hidden] {
  display: none !important;
}

.tutorial-control-callout::before {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 100%;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #ff6767;
  border-left: 10px solid transparent;
}

.tutorial-control-callout[data-target="party"] {
  top: calc(max(10px, env(safe-area-inset-top, 0px)) + 106px);
  right: calc(max(10px, env(safe-area-inset-right, 0px)) + 52px);
}

.tutorial-control-callout[data-target="party"]::before {
  right: 42%;
}

.tutorial-control-callout[data-target="skill"] {
  top: auto;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 82px);
}

.tutorial-control-callout[data-target="skill"]::before {
  top: 100%;
  bottom: auto;
  border-top: 12px solid #ff6767;
  border-bottom: 0;
}

.is-tutorial-target {
  z-index: 3;
  border-color: #ff5a5a !important;
  outline: 2px solid rgba(255, 68, 68, 0.95) !important;
  outline-offset: 2px;
  animation: beginner-tutorial-pulse 1s ease-in-out infinite;
}

.job-setup-advice {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--job-color, #f1bc52);
  background: rgba(241, 188, 82, 0.1);
  line-height: 1.45;
}

.beginner-tutorial-dialogue ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.beginner-tutorial-dialogue li + li {
  margin-top: 6px;
}

.beginner-guide-step {
  display: grid;
  gap: 10px;
  padding: 4px 2px;
}

.beginner-guide-step strong {
  color: #ffd28a;
  font-size: 0.82rem;
}

.beginner-guide-step p {
  margin: 0;
  color: #f4eee8;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.55;
}

.beginner-guide-step .beginner-guide-step-hint {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 210, 138, 0.2);
  color: #ff8f8f;
  font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
  .is-tutorial-target,
  .tutorial-control-callout,
  .world-map-tutorial-scroll-cue {
    animation: none;
  }
}