@font-face {
  font-family: "Limgul 12";
  src: url("./assets/fonts/Limgul12.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Limgul 12";
  src: url("./assets/fonts/Limgul12.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Limgul 12";
  src: url("./assets/fonts/Limgul12.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night-950: #0a2220;
  --night-900: #102d2b;
  --night-800: #173b36;
  --night-700: #205044;
  --moss: #326348;
  --leaf: #8fc86d;
  --leaf-pale: #c7dfa2;
  --parchment: #f1e5c3;
  --parchment-deep: #dfcb98;
  --parchment-shadow: #b89e6a;
  --ink: #20342f;
  --ink-soft: #4d6257;
  --ink-muted: #40564b;
  --mist: #dce8ca;
  --coral: #d86f5a;
  --coral-dark: #9e463a;
  --coral-pale: #f3b4a6;
  --line-dark: rgb(199 223 162 / 0.22);
  --line-ink: rgb(32 52 47 / 0.2);
  --radius: 14px;
  --shadow-panel: 0 18px 50px rgb(4 25 23 / 0.34);
  --shadow-button: 0 5px 0 var(--coral-dark);
  font-family: "Limgul 12", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--night-950);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  font-weight: 400;
  overflow-x: hidden;
  color: var(--mist);
  background:
    radial-gradient(circle at 12% 18%, rgb(143 200 109 / 0.11) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 26%, rgb(241 229 195 / 0.1) 0 1px, transparent 2px),
    linear-gradient(145deg, var(--night-900), var(--night-950) 68%);
  background-size: 86px 86px, 113px 113px, auto;
  -webkit-tap-highlight-color: transparent;
}

button,
summary {
  font: inherit;
}

button {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
}

button:focus-visible,
summary:focus-visible,
#touch-stick:focus-visible {
  outline: 3px solid var(--coral-pale);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.55);
  opacity: 0.5;
}

button:not(:disabled):active {
  transform: translateY(2px) scale(0.985);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  letter-spacing: -0.025em;
}

h1,
h2,
h3 {
  font-weight: 700;
}

strong {
  font-weight: 800;
}

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

#app-shell,
#game-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

#app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

#game-stage {
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
  overflow-x: hidden;
}

#game-stage::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgb(143 200 109 / 0.035) 50%, transparent 50.3%),
    linear-gradient(transparent 0 49.7%, rgb(143 200 109 / 0.035) 50%, transparent 50.3%);
  background-size: 32px 32px;
}

#game-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  background: var(--night-950);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  touch-action: none;
}

#game-stage:has(.run-screen) #game-canvas {
  opacity: 1;
}

#game-stage:has(.run-screen) {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

body:has(.run-screen) {
  overflow: hidden;
  overscroll-behavior: none;
}

#app-root {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
}

#app-root:has(.run-screen) {
  z-index: 9;
  pointer-events: none;
}

.screen {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

#game-canvas,
#touch-controls,
.screen:not(.admin-workshop-screen) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.screen:not(.admin-workshop-screen) :is(input, textarea, [contenteditable="true"]) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  min-width: 136px;
  align-items: center;
  justify-content: center;
  padding: 0.78rem 1.3rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.primary-action {
  color: #fff5e6;
  background: var(--coral);
  box-shadow: var(--shadow-button);
}

.primary-action:not(:disabled):hover {
  background: #e07a65;
  box-shadow: 0 7px 0 var(--coral-dark);
  transform: translateY(-2px);
}

.primary-action:not(:disabled):active {
  box-shadow: 0 2px 0 var(--coral-dark);
}

.secondary-action {
  color: var(--ink);
  border: 2px solid rgb(32 52 47 / 0.28);
  background: rgb(255 249 225 / 0.52);
}

.secondary-action:not(:disabled):hover {
  border-color: var(--coral);
  color: var(--coral-dark);
  background: rgb(255 249 225 / 0.82);
}

/* Title screen */

.title-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 42%, rgb(5 25 24 / 0.18) 57%, rgb(5 25 24 / 0.78) 100%),
    url("./assets/art/title-forest-a.png") center / cover no-repeat,
    var(--night-950);
  image-rendering: pixelated;
}

.title-screen::after {
  position: absolute;
  right: -8vw;
  bottom: -9rem;
  left: -8vw;
  height: 18rem;
  z-index: 0;
  content: "";
  background:
    radial-gradient(ellipse at 12% 20%, var(--night-700) 0 21%, transparent 22%),
    radial-gradient(ellipse at 42% 30%, #173e36 0 23%, transparent 24%),
    radial-gradient(ellipse at 72% 15%, var(--night-700) 0 26%, transparent 27%),
    radial-gradient(ellipse at 92% 30%, #173e36 0 21%, transparent 22%),
    linear-gradient(transparent 0 42%, #0c2926 43%);
  image-rendering: pixelated;
  pointer-events: none;
}

.title-art,
.title-copy {
  position: relative;
  z-index: 1;
}

.title-art {
  min-height: 100dvh;
  overflow: hidden;
}

.art-title-ready .title-art {
  visibility: hidden;
}

.art-title-ready .title-screen::after {
  opacity: 0;
}

.title-art::before,
.title-art::after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--leaf-pale);
  box-shadow:
    54px 32px 0 rgb(199 223 162 / 0.55),
    136px -18px 0 rgb(241 229 195 / 0.45),
    248px 58px 0 rgb(143 200 109 / 0.48),
    318px -44px 0 rgb(241 229 195 / 0.3),
    390px 38px 0 rgb(199 223 162 / 0.45);
}

.title-art::before {
  top: 22%;
  left: 9%;
}

.title-art::after {
  top: 51%;
  left: 2%;
  opacity: 0.58;
  transform: scale(0.72);
}

.moon-disc {
  position: absolute;
  top: 12%;
  left: 50%;
  width: clamp(152px, 22vw, 250px);
  aspect-ratio: 1;
  border: 10px solid rgb(223 203 152 / 0.22);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 62%, rgb(184 158 106 / 0.23) 63% 70%, transparent 71%),
    linear-gradient(0deg, var(--parchment) 0 27%, #f6edcf 28% 100%);
  box-shadow:
    0 0 0 12px rgb(241 229 195 / 0.06),
    inset -18px -8px 0 rgb(223 203 152 / 0.42);
  transform: translateX(-50%);
}

.canopy {
  position: absolute;
  z-index: 2;
  width: 190px;
  height: 94px;
  border-radius: 46% 54% 42% 40%;
  background: var(--moss);
  box-shadow:
    52px -26px 0 var(--night-700),
    104px 12px 0 #285a42,
    18px 42px 0 #1f4c3c;
}

.canopy-left {
  top: -34px;
  left: -72px;
  transform: rotate(9deg);
}

.canopy-right {
  top: 4%;
  right: -102px;
  transform: scale(1.15) rotate(-10deg);
}

.title-rabbit,
.title-fox {
  --sprite-scale: 1;
  position: absolute;
  bottom: 15%;
  z-index: 3;
  width: 76px;
  height: 90px;
  border-radius: 44% 44% 38% 38%;
  box-shadow: 0 10px 0 rgb(4 25 23 / 0.32);
  image-rendering: pixelated;
}

.title-rabbit {
  left: 29%;
  color: #ded3bd;
  background:
    linear-gradient(90deg, transparent 0 22%, var(--coral) 23% 76%, transparent 77%) 0 52% / 100% 19% no-repeat,
    #ded3bd;
}

.title-rabbit::before {
  position: absolute;
  top: -50px;
  left: 8px;
  width: 20px;
  height: 58px;
  border: 6px solid #ded3bd;
  border-radius: 50% 50% 24% 24%;
  content: "";
  background: var(--coral-pale);
  box-shadow: 38px 1px 0 -6px var(--coral-pale), 38px 1px 0 0 #ded3bd;
}

.title-rabbit::after {
  position: absolute;
  top: 27px;
  left: 18px;
  width: 9px;
  height: 9px;
  content: "";
  background: var(--ink);
  box-shadow: 34px 0 0 var(--ink), 17px 16px 0 -2px var(--coral-dark);
}

.title-fox {
  right: 15%;
  color: #c8774e;
  background:
    linear-gradient(90deg, transparent 0 21%, var(--leaf) 22% 78%, transparent 79%) 0 54% / 100% 19% no-repeat,
    #c8774e;
}

.title-fox::before {
  position: absolute;
  top: -38px;
  left: 3px;
  width: 0;
  height: 0;
  border-right: 22px solid transparent;
  border-bottom: 48px solid #c8774e;
  border-left: 22px solid transparent;
  content: "";
  filter: drop-shadow(41px 0 0 #c8774e);
}

.title-fox::after {
  position: absolute;
  top: 27px;
  left: 18px;
  width: 9px;
  height: 9px;
  content: "";
  background: var(--ink);
  box-shadow: 34px 0 0 var(--ink), 17px 16px 0 -2px #f5d7b9;
}

.title-copy {
  display: flex;
  max-width: 680px;
  min-height: 100dvh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem) clamp(2rem, 5vw, 5.5rem);
}

.title-mark {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.45rem;
  color: var(--leaf-pale);
  border-bottom: 4px solid var(--coral);
  font-size: clamp(0.88rem, 1.4vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.title-copy h1 {
  max-width: 9ch;
  margin-bottom: 1rem;
  color: var(--parchment);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 800;
  line-height: 0.98;
  text-shadow: 0 7px 0 rgb(4 25 23 / 0.44);
}

.title-copy p {
  max-width: 32rem;
  margin-bottom: 1.8rem;
  color: var(--mist);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.72;
}

/* Hub */

.hub-screen {
  padding: max(0.75rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3.5rem) max(2rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 88% 12%, rgb(143 200 109 / 0.14), transparent 26%),
    linear-gradient(180deg, rgb(16 45 43 / 0.48), rgb(10 34 32 / 0.92));
}

.hub-header,
.leaf-tabs,
.hub-section {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  color: var(--parchment);
  background: transparent;
  font-size: clamp(1rem, 2vw, 1.24rem);
  font-weight: 700;
}

.brand-button:hover {
  color: var(--coral-pale);
}

.brand-leaf {
  display: block;
  width: 25px;
  height: 30px;
  border-radius: 82% 12% 76% 16%;
  background: var(--leaf);
  box-shadow: inset -5px -4px 0 var(--moss);
  transform: rotate(-28deg);
}

.dew-counter {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--parchment);
  background: var(--night-800);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.dew-counter span {
  color: var(--coral-pale);
  font-size: 1.3rem;
}

.art-ui-ready .dew-counter span {
  width: 28px;
  height: 28px;
  overflow: hidden;
  color: transparent;
  background-image: url("./assets/art/ui-ornaments-a.png");
  background-position: 33.333% 50%;
  background-size: 400% 300%;
  font-size: 0;
  image-rendering: pixelated;
}

.hub-tools {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.settings-menu {
  position: relative;
}

.settings-trigger {
  display: grid;
  min-width: 64px;
  min-height: 48px;
  place-items: center;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--parchment);
  background: var(--night-800);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.settings-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 12;
  display: grid;
  width: min(290px, calc(100vw - 1.5rem));
  gap: 0.65rem;
  padding: 0.85rem;
  border: 3px solid var(--parchment-shadow);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--parchment);
  box-shadow: var(--shadow-panel);
}

.settings-panel label {
  display: grid;
  grid-template-columns: 1fr minmax(110px, 1.4fr);
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.settings-panel input {
  width: 100%;
  min-height: 44px;
  accent-color: var(--coral);
}

.settings-panel button {
  color: var(--ink);
  border: 2px solid var(--moss);
  background: #fff3d5;
  font-size: 0.86rem;
  font-weight: 700;
}

.settings-panel button[aria-pressed="true"] {
  color: #fff8e8;
  border-color: var(--coral-dark);
  background: var(--coral);
}

.leaf-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.55rem;
  padding: 0.45rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgb(9 33 31 / 0.82);
}

.leaf-tabs button {
  position: relative;
  min-width: 0;
  padding: 0.72rem 0.75rem;
  color: var(--leaf-pale);
  background: transparent;
  font-weight: 700;
}

.leaf-tabs button::after {
  position: absolute;
  right: 22%;
  bottom: 5px;
  left: 22%;
  height: 3px;
  border-radius: 3px;
  content: "";
  background: transparent;
}

.leaf-tabs button:hover {
  color: var(--parchment);
  background: rgb(143 200 109 / 0.09);
}

.leaf-tabs button.is-active {
  color: #fff5e6;
  background: var(--coral);
}

.leaf-tabs button.is-active::after {
  background: #fff5e6;
}

.hub-section {
  position: relative;
  margin-top: 1rem;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  overflow: hidden;
  border: 4px solid var(--parchment-shadow);
  border-radius: var(--radius);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgb(184 158 106 / 0.08) 1px, transparent 1px),
    linear-gradient(rgb(184 158 106 / 0.08) 1px, transparent 1px),
    var(--parchment);
  background-size: 18px 18px;
  box-shadow: var(--shadow-panel), inset 0 0 0 2px rgb(255 249 225 / 0.5);
}

.hub-section h2 {
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.hub-section h3 {
  color: var(--ink);
}

.hub-section p {
  max-width: 48ch;
  color: var(--ink-soft);
  line-height: 1.65;
}

.expedition-layout {
  display: grid;
  min-height: min(620px, calc(100dvh - 174px));
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  align-items: center;
  gap: clamp(1.4rem, 5vw, 4.5rem);
}

.expedition-copy {
  position: relative;
  z-index: 2;
}

.character-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.35rem 0 1.55rem;
}

.character-choice {
  display: grid;
  min-height: 82px;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  background: rgb(255 249 225 / 0.5);
  text-align: left;
}

.character-choice:hover,
.character-choice.is-selected {
  border-color: var(--coral);
  background: #fff3d5;
}

.character-choice.is-selected {
  box-shadow: inset 0 -5px 0 rgb(216 111 90 / 0.24);
}

.character-choice strong,
.character-choice small {
  display: block;
}

.character-choice strong {
  margin-bottom: 0.18rem;
  font-size: 1rem;
}

.character-choice small {
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.3;
}

.character-kit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: -0.75rem 0 1.35rem;
  padding: 0.8rem;
  border: 2px solid var(--line-ink);
  border-radius: var(--radius);
  background: rgb(255 249 225 / 0.62);
}

.character-kit > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border-left: 4px solid var(--leaf);
  background: rgb(232 219 184 / 0.42);
}

.character-kit .character-skill {
  grid-column: 1 / -1;
  border-left-color: var(--coral);
}

.character-kit span {
  color: var(--moss);
  font-size: 0.7rem;
  font-weight: 700;
}

.character-kit strong {
  font-size: 0.8rem;
  line-height: 1.5;
}

.character-starting-stats {
  grid-column: 1 / -1;
}

.character-starting-stats dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.42rem;
  margin: 0.4rem 0 0;
}

.character-starting-stats dl > div {
  display: grid;
  min-width: 0;
  min-height: 56px;
  align-content: center;
  gap: 0.18rem;
  padding: 0.48rem 0.58rem;
  border: 1px solid rgb(58 73 57 / 0.14);
  border-radius: 7px;
  background: rgb(255 249 225 / 0.56);
}

.character-starting-stats dt,
.character-starting-stats dd {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.3;
  white-space: nowrap;
}

.character-starting-stats dt {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  text-overflow: ellipsis;
}

.character-starting-stats dd {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.character-token {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #dccdb7;
  box-shadow: inset -8px -7px 0 rgb(32 52 47 / 0.14);
}

.character-token::before,
.character-token::after {
  position: absolute;
  content: "";
}

.character-token::before {
  top: -15px;
  left: 5px;
  width: 12px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #dccdb7;
  box-shadow: 22px 0 0 -3px #dccdb7, 22px 0 0 0 var(--ink);
}

.character-token::after {
  top: 17px;
  left: 11px;
  width: 5px;
  height: 5px;
  background: var(--ink);
  box-shadow: 18px 0 0 var(--ink), 9px 10px 0 -1px var(--coral-dark);
}

.character-token[data-character="nari"] {
  background: #bd704c;
}

.character-token[data-character="nari"]::before {
  top: -13px;
  left: -1px;
  width: 0;
  height: 0;
  border: 13px solid transparent;
  border-bottom: 24px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(22px 0 0 var(--ink));
}

.forest-map-preview {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 6px solid var(--ink);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgb(4 25 23 / 0.08), rgb(4 25 23 / 0.72)),
    url("./assets/art/title-forest-a.png") 34% center / cover no-repeat,
    var(--night-900);
  box-shadow: 10px 10px 0 var(--parchment-shadow);
  image-rendering: pixelated;
}

.forest-map-preview::before {
  position: absolute;
  right: -15%;
  bottom: -30%;
  left: -15%;
  height: 72%;
  content: "";
  background: linear-gradient(transparent, rgb(6 28 27 / 0.52));
}

.forest-map-preview::after {
  position: absolute;
  bottom: 0.25rem;
  left: 0.5rem;
  z-index: 2;
  width: clamp(88px, 30%, 132px);
  aspect-ratio: 1;
  content: "";
  border: 5px solid var(--ink);
  border-radius: 50% 50% 45% 55%;
  background:
    radial-gradient(circle at 36% 34%, var(--leaf-pale) 0 8%, transparent 9%),
    radial-gradient(circle at 60% 58%, var(--leaf) 0 18%, transparent 19%),
    linear-gradient(145deg, var(--moss), var(--night-800));
  box-shadow: inset -14px -12px 0 rgb(5 25 24 / 0.35);
  pointer-events: none;
}

.map-moon,
.map-tree {
  display: none;
}

.forest-map-preview > span,
.forest-map-preview > small {
  position: absolute;
  right: 1.1rem;
  bottom: 1.15rem;
  left: 1.1rem;
  z-index: 3;
  color: var(--parchment);
}

.forest-map-preview > span {
  bottom: 2.5rem;
  font-size: 1.25rem;
  font-weight: 800;
}

.forest-map-preview > small {
  color: var(--leaf-pale);
}

.map-moon {
  position: absolute;
  top: 11%;
  right: 13%;
  width: 94px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: inset -14px -8px 0 var(--parchment-deep);
}

.map-tree {
  position: absolute;
  bottom: 22%;
  z-index: 2;
  width: 34px;
  height: 132px;
  background: #755536;
  box-shadow: inset -9px 0 0 #563d29;
}

.map-tree::before {
  position: absolute;
  top: -58px;
  left: -54px;
  width: 142px;
  height: 84px;
  border-radius: 48%;
  content: "";
  background: #3d6e4d;
  box-shadow: inset -22px -17px 0 #285642;
}

.map-tree-a {
  left: 15%;
}

.map-tree-b {
  right: 21%;
  bottom: 13%;
  transform: scale(0.78);
}

/* Customization */

.customize-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(1.2rem, 4vw, 3.4rem);
}

.avatar-preview {
  padding: 1rem;
  border-radius: var(--radius);
  color: var(--mist);
  background: var(--night-800);
  box-shadow: 8px 8px 0 var(--parchment-shadow);
}

.avatar-preview canvas {
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin: 0 auto 1rem;
  border: 3px solid var(--leaf-pale);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgb(143 200 109 / 0.08) 25%, transparent 25% 75%, rgb(143 200 109 / 0.08) 75%),
    var(--night-900);
  background-size: 16px 16px;
  image-rendering: pixelated;
}

.avatar-preview h2,
.avatar-preview p {
  color: var(--parchment);
}

.avatar-preview p {
  font-size: 0.9rem;
}

.preset-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.preset-slot {
  display: grid;
  grid-template-columns: minmax(66px, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-dark);
}

.preset-slot button {
  min-width: 58px;
  padding: 0.45rem 0.55rem;
  color: var(--mist);
  border: 1px solid var(--line-dark);
  background: var(--night-700);
  font-size: 0.78rem;
  font-weight: 700;
}

.preset-slot button:hover:not(:disabled) {
  border-color: var(--coral);
  background: var(--coral);
}

.cosmetic-browser {
  min-width: 0;
}

.cosmetic-group {
  padding: 0.4rem 0 1.2rem;
  border-bottom: 2px solid var(--line-ink);
}

.cosmetic-group + .cosmetic-group {
  padding-top: 1.2rem;
}

.cosmetic-group:last-child {
  border-bottom: 0;
}

.cosmetic-group h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.55rem;
}

.cosmetic-swatch {
  display: grid;
  min-height: 62px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  background: rgb(255 249 225 / 0.5);
  text-align: left;
}

.cosmetic-swatch:hover:not(:disabled),
.cosmetic-swatch.is-selected {
  border-color: var(--coral);
  background: #fff3d5;
}

.cosmetic-swatch small {
  grid-column: 2;
  color: var(--coral-dark);
  font-size: 0.72rem;
}

.appearance-studio {
  grid-template-columns: minmax(290px, 0.68fr) minmax(0, 1.32fr);
}

.studio-kicker {
  display: inline-block;
  margin-bottom: 0.4rem;
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.studio-kicker::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.4rem;
  vertical-align: -5px;
  content: "✦";
  color: var(--coral-dark);
  font-size: 0.8rem;
}

.art-ui-ready .studio-kicker::before {
  content: "";
  color: transparent;
  background-image: url("./assets/art/ui-ornaments-a.png");
  background-position: 33.333% 100%;
  background-size: 400% 300%;
  image-rendering: pixelated;
}

.avatar-preview .studio-kicker,
.admin-workshop-screen .studio-kicker,
.run-screen .studio-kicker {
  color: var(--leaf-pale);
}

.avatar-preview .studio-kicker::before,
.admin-workshop-screen .studio-kicker::before,
.run-screen .studio-kicker::before {
  color: var(--leaf);
}

.hub-section .muted-copy {
  color: var(--ink-muted);
}

.appearance-studio .avatar-preview {
  position: sticky;
  top: 1rem;
}

.preview-toggles button,
.studio-actions button,
.appearance-code button {
  min-height: 42px;
  padding: 0.45rem;
  color: var(--mist);
  border: 1px solid var(--line-dark);
  background: var(--night-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.preview-toggles button[aria-pressed="true"],
.preview-toggles button:hover,
.studio-actions button:hover:not(:disabled),
.appearance-code button:hover {
  color: #fff8dd;
  border-color: var(--coral);
  background: var(--coral-dark);
}

.preview-toggles,
.studio-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.studio-status,
.studio-error {
  margin-top: 0.75rem;
  padding: 0.55rem;
  color: var(--leaf-pale) !important;
  border-left: 3px solid var(--leaf);
  background: rgb(6 28 27 / 0.32);
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
}

.studio-status.is-warning,
.studio-error {
  color: #ffd2bd !important;
  border-left-color: var(--coral);
}

.studio-apply {
  width: 100%;
  margin-top: 0.65rem;
}

.appearance-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-dark);
}

.appearance-code h3 {
  margin: 0;
  color: var(--parchment);
  font-size: 0.92rem;
}

.appearance-code label {
  color: var(--leaf-pale);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
}

.appearance-code textarea {
  min-width: 0;
  width: 100%;
  min-height: 112px;
  max-height: 220px;
  padding: 0.45rem 0.55rem;
  resize: vertical;
  overflow: auto;
  color: var(--mist);
  -webkit-text-fill-color: var(--mist);
  border: 1px solid var(--line-dark);
  background: var(--night-900);
  font: 600 0.68rem/1.45 "Limgul 12", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
}

.appearance-code-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.appearance-code-imported {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid rgb(164 221 151 / 0.45);
  border-radius: 8px;
  background: rgb(143 200 109 / 0.08);
}

.appearance-code-imported .primary-action {
  width: 100%;
}

.studio-browser {
  min-width: 0;
}

.cosmetic-reward-history {
  margin-top: 1.25rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgb(58 73 57 / 0.34);
  border-radius: 12px;
  color: var(--ink);
  background: rgb(255 249 225 / 0.74);
}

.cosmetic-reward-history > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  list-style: none;
  background: rgb(255 249 225 / 0.62);
}

.cosmetic-reward-history > summary::-webkit-details-marker {
  display: none;
}

.cosmetic-reward-history > summary:hover,
.cosmetic-reward-history > summary:focus-visible {
  background: #fff3d5;
}

.cosmetic-reward-history > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.cosmetic-reward-history > summary .studio-kicker {
  margin: 0;
  font-size: 0.65rem;
}

.cosmetic-reward-history > summary strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.cosmetic-reward-history-count {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  color: var(--coral-dark) !important;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.cosmetic-reward-history-count i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgb(58 73 57 / 0.26);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.54);
  font-style: normal;
}

.cosmetic-reward-history-count i::before {
  content: "+";
  color: var(--moss);
  font-size: 1rem;
  line-height: 1;
}

.cosmetic-reward-history[open] .cosmetic-reward-history-count i::before {
  content: "−";
}

.cosmetic-reward-history-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid rgb(58 73 57 / 0.2);
}

.cosmetic-reward-history article {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
  padding: 0.55rem;
  border-left: 4px solid var(--leaf);
  background: rgb(232 219 184 / 0.62);
}

.cosmetic-reward-history article b,
.cosmetic-reward-history article span,
.cosmetic-reward-history article small {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.cosmetic-reward-history article b {
  color: var(--moss);
  font-size: 0.7rem;
}

.cosmetic-reward-history article span {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.cosmetic-reward-history article small {
  color: var(--ink-muted);
  font-size: 0.68rem;
}

.palette-editor {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--line-ink);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.palette-channel {
  min-width: 0;
  padding: 0.7rem;
  border: 2px solid rgb(58 73 57 / 0.22);
  border-radius: 12px;
  background: rgb(255 249 225 / 0.42);
}

.palette-channel label {
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.color-inputs {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.4rem;
}

.color-inputs input[type="color"] {
  width: 46px;
  height: 40px;
  padding: 2px;
  border: 2px solid var(--ink);
  background: #fff3d5;
}

.color-inputs input[type="text"] {
  min-width: 0;
  height: 40px;
  padding: 0.45rem;
  color: var(--ink);
  border: 2px solid rgb(58 73 57 / 0.3);
  background: #fff9e1;
  font: 800 0.78rem/1 "Limgul 12", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  text-transform: uppercase;
}

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(18px, 1fr));
  gap: 3px;
  margin-top: 0.5rem;
}

.palette-swatches button {
  min-width: 0;
  min-height: 22px;
  padding: 0;
  border: 1px solid rgb(37 42 45 / 0.42);
  border-radius: 4px;
  background: var(--swatch);
}

.palette-swatches button:hover {
  z-index: 1;
  border-color: #fff;
  outline: 2px solid var(--coral-dark);
  transform: scale(1.18);
}

.cosmetic-swatch.is-locked {
  opacity: 0.72;
  border-style: dashed;
}

.swatch-color {
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset -6px -5px 0 rgb(32 52 47 / 0.2);
}

/* Slot-based pixel cosmetic editor */

.custom-slot-browser,
.pixel-editor,
.pixel-editor-empty {
  min-width: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--line-ink);
}

.custom-slot-browser > header,
.pixel-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.custom-slot-browser > header p,
.pixel-editor-heading span {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.cosmetic-ticket-count {
  flex: 0 0 auto;
  padding: 0.45rem 0.6rem;
  color: var(--ink) !important;
  border: 2px solid var(--line-ink);
  border-radius: 8px;
  background: rgb(255 249 225 / 0.64);
  font-size: 0.76rem !important;
  font-weight: 800;
  white-space: nowrap;
}

.custom-slot-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.9rem 0 0.7rem;
}

.custom-slot-tabs button {
  min-height: 44px;
  padding: 0.5rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  background: rgb(255 249 225 / 0.48);
}

.custom-slot-tabs button[aria-selected="true"] {
  color: #fff8dd;
  border-color: var(--coral-dark);
  background: var(--coral-dark);
}

.custom-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.custom-slot-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
}

.custom-slot-button,
.custom-slot-equip {
  min-width: 0;
  padding: 0.45rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  background: rgb(255 249 225 / 0.5);
  font-size: 0.7rem;
}

.custom-slot-button {
  display: grid;
  min-height: 58px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem;
  text-align: left;
}

.custom-slot-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--mist);
  border-radius: 5px;
  background: var(--night-700);
}

.custom-slot-card.is-selected .custom-slot-button,
.custom-slot-button:hover {
  border-color: var(--coral);
  background: #fff3d5;
}

.custom-slot-equip {
  min-width: 44px;
  min-height: 44px;
  color: var(--mist);
  border-color: var(--night-700);
  background: var(--night-700);
}

.pixel-editor-empty {
  padding: 0.9rem;
  border: 2px dashed rgb(58 73 57 / 0.32);
  border-radius: 12px;
  background: rgb(255 249 225 / 0.32);
}

.pixel-editor-empty p {
  margin-bottom: 0;
}

.pixel-editor-heading {
  margin-bottom: 0.8rem;
}

.pixel-editor-heading h2 {
  margin: 0.1rem 0 0;
}

.pixel-close-actions {
  position: relative;
  display: grid;
  justify-items: end;
}

.pixel-close-trigger,
.pixel-close-confirm button {
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  color: var(--mist);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--night-700);
  font-size: 0.78rem;
}

.pixel-close-confirm {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 4;
  width: min(280px, calc(100vw - 2rem));
  padding: 0.75rem;
  color: var(--ink);
  border: 2px solid var(--parchment-shadow);
  border-radius: 10px;
  background: var(--parchment);
  box-shadow: var(--shadow-panel);
  font-size: 0.78rem;
}

.pixel-close-confirm strong {
  display: block;
  color: var(--coral-dark);
  font-size: 0.9rem;
}

.pixel-close-confirm p {
  margin: 0.4rem 0 0.65rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.pixel-close-confirm > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.pixel-close-confirm button {
  color: var(--ink);
  border-color: var(--line-ink);
  background: #fff3d5;
}

.pixel-close-confirm button:last-child {
  color: #fff5e6;
  border-color: var(--coral-dark);
  background: var(--coral);
}

.pixel-editor-workspace {
  display: grid;
  min-width: 0;
  grid-template-columns: 256px minmax(190px, 1fr);
  align-items: start;
  gap: 0.9rem;
}

.pixel-canvas-column,
.pixel-editor-controls {
  min-width: 0;
}

.pixel-canvas-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border: 4px solid var(--ink);
  background-color: #fff9e1;
  background-image:
    linear-gradient(45deg, rgb(32 52 47 / 0.14) 25%, transparent 25% 75%, rgb(32 52 47 / 0.14) 75%),
    linear-gradient(45deg, rgb(32 52 47 / 0.14) 25%, transparent 25% 75%, rgb(32 52 47 / 0.14) 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  box-shadow: 5px 5px 0 var(--parchment-shadow);
}

.pixel-editor-canvas {
  display: block;
  width: 256px;
  height: 256px;
  max-width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.pixel-editor-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(16, minmax(0, 1fr));
  pointer-events: none;
}

.pixel-editor-grid [role="row"] {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
}

.pixel-editor-grid [data-pixel-index] {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

.pixel-editor-grid [data-pixel-index]:focus-visible {
  z-index: 1;
  outline: 2px solid var(--coral);
  outline-offset: -2px;
  background: rgb(243 180 166 / 0.22);
}

.pixel-keyboard-help {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.5;
}

.pixel-editor-controls {
  display: grid;
  gap: 0.7rem;
}

.pixel-editor-controls fieldset {
  min-width: 0;
  margin: 0;
  padding: 0.6rem;
  border: 2px solid var(--line-ink);
  border-radius: 10px;
}

.pixel-editor-controls legend,
.pixel-name-field,
.pixel-color-picker {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
}

.pixel-name-field {
  display: grid;
  gap: 0.35rem;
}

.pixel-name-field input {
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem;
  color: var(--ink);
  border: 2px solid rgb(58 73 57 / 0.34);
  border-radius: 8px;
  background: #fff9e1;
  font: 700 0.8rem/1 "Limgul 12", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.pixel-tools,
.pixel-history-actions,
.pixel-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pixel-tool {
  min-width: 44px;
  min-height: 44px;
  flex: 1 1 72px;
  padding: 0.45rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  background: rgb(255 249 225 / 0.55);
}

.pixel-tool[aria-pressed="true"] {
  color: #fff8dd;
  border-color: var(--coral-dark);
  background: var(--coral-dark);
}

.pixel-color-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pixel-color-picker input {
  width: 52px;
  min-width: 52px;
  height: 44px;
  padding: 2px;
  border: 2px solid var(--ink);
  background: #fff9e1;
}

.pixel-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.pixel-color-swatch {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--pixel-color);
}

.pixel-color-swatch[aria-pressed="true"] {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.pixel-history-actions button,
.pixel-delete-confirm button {
  min-height: 44px;
  flex: 1 1 92px;
  padding: 0.45rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  background: rgb(255 249 225 / 0.58);
  font-size: 0.72rem;
}

.pixel-ticket-warning,
.pixel-ticket-note,
.pixel-editor-error,
.pixel-delete-confirm p {
  margin: 0;
  padding: 0.5rem;
  border-left: 3px solid var(--leaf);
  background: rgb(255 249 225 / 0.42);
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.45;
}

.pixel-ticket-warning,
.pixel-editor-error,
.pixel-delete-confirm p {
  border-left-color: var(--coral-dark);
  color: var(--coral-dark);
}

.pixel-save-actions .primary-action {
  width: 100%;
}

.pixel-delete-confirm summary {
  min-height: 44px;
  padding: 0.55rem;
  color: var(--coral-dark);
  border: 2px solid rgb(158 70 58 / 0.34);
  border-radius: 8px;
  background: rgb(255 249 225 / 0.48);
  font-size: 0.72rem;
  font-weight: 800;
}

.pixel-delete-confirm p {
  margin-top: 0.45rem;
}

.pixel-delete-confirm button {
  width: 100%;
  margin-top: 0.4rem;
}

/* Guardian tree */

.tree-layout > header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tree-layout > header p {
  margin-bottom: 0;
}

.tree-layout > header .tree-refund-note {
  margin-top: 0.2rem;
  color: var(--coral-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.tree-trunk {
  width: 34px;
  height: 76px;
  margin: 0.2rem auto -0.25rem;
  border: 6px solid var(--ink);
  border-bottom: 0;
  border-radius: 46% 46% 0 0;
  background: #7a5733;
  box-shadow: inset -9px 0 0 #583b27;
}

.branches-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.branches-grid::before {
  position: absolute;
  top: -18px;
  right: 24%;
  left: 24%;
  height: 22px;
  border-top: 6px solid var(--moss);
  border-right: 6px solid var(--moss);
  border-left: 6px solid var(--moss);
  border-radius: var(--radius) var(--radius) 0 0;
  content: "";
}

.tree-branch {
  position: relative;
  padding: 1rem;
  border: 2px solid var(--line-ink);
  border-radius: var(--radius);
  background: rgb(255 249 225 / 0.45);
}

.tree-branch h3 {
  margin: 0 0 0.8rem;
  color: var(--moss);
  font-size: 1rem;
}

.tree-nodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.tree-node {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.5rem;
  padding: 0.8rem;
  color: var(--ink);
  border: 2px solid var(--moss);
  border-radius: calc(var(--radius) - 4px);
  background: rgb(232 219 184 / 0.72);
  text-align: left;
}

.tree-node.is-complete {
  border-color: var(--coral);
  background: #fff3d5;
}

.tree-node-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.tree-node-head strong {
  font-size: 0.88rem;
  line-height: 1.35;
}

.tree-node-head span {
  flex: 0 0 auto;
  color: var(--coral-dark);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.tree-node .tree-description,
.tree-node .tree-impact {
  max-width: none;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
}

.tree-effects {
  display: grid;
  gap: 0.22rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgb(46 67 56 / 0.28);
  border-radius: 8px;
  background: rgb(255 249 225 / 0.62);
}

.tree-effects span,
.tree-effects strong,
.tree-effects small {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.tree-effects span {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.tree-effects strong {
  color: var(--coral-dark);
  font-size: 0.76rem;
}

.tree-effects small {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.tree-node .tree-impact b {
  margin-right: 0.25rem;
  color: var(--moss);
}

.tree-purchase {
  width: 100%;
  min-height: 42px;
  margin-top: 0.15rem;
  padding: 0.55rem 0.65rem;
  border-color: var(--line-ink);
  color: var(--parchment);
  background: var(--moss);
  font-size: 0.74rem;
}

.tree-purchase:hover:not(:disabled) {
  background: var(--coral-dark);
}

.tree-purchase:disabled {
  color: var(--ink-soft);
  background: #d9cfb1;
  opacity: 1;
}

/* Codex */

.codex-layout > header {
  margin-bottom: 1.25rem;
}

.codex-layout > header h2,
.codex-layout > header p {
  margin-bottom: 0;
}

.codex-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.codex-section {
  overflow: hidden;
  border: 2px solid var(--line-ink);
  border-radius: var(--radius);
  background: rgb(255 249 225 / 0.48);
}

.codex-section-toggle {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--ink);
  border-radius: 0;
  background: transparent;
  font-weight: 700;
  text-align: left;
}

.codex-section-toggle:hover,
.codex-section-toggle:focus-visible {
  background: rgb(255 249 225 / 0.72);
}

.codex-section-count {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.codex-section-toggle b {
  color: var(--coral-dark);
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.codex-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
}

.codex-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  padding: 0.7rem;
  border-top: 1px solid var(--line-ink);
  background: rgb(255 249 225 / 0.36);
}

.codex-card > div {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.codex-card strong {
  font-size: 0.84rem;
  line-height: 1.35;
}

.codex-card p {
  max-width: none;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.codex-card small {
  color: var(--coral-dark);
  font-size: 0.68rem;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.codex-icon,
.choice-icon {
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: inset -5px -4px 0 var(--moss);
}

.codex-unknown-icon {
  display: grid;
  place-items: center;
  color: #f7f0d3;
  background: #77766d;
  box-shadow: inset -5px -4px 0 #4d504d;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.codex-discovery-note {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed rgb(110 75 49 / 0.36);
  color: #6e4b31;
  background: rgb(240 210 140 / 0.2);
  font-size: 0.7rem;
  line-height: 1.45;
}

.codex-enemy-group {
  display: grid;
  gap: 0.45rem;
}

.codex-enemy-group + .codex-enemy-group {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 2px solid rgb(32 52 47 / 0.16);
}

.codex-enemy-group > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0.35rem 0.55rem;
  color: var(--ink);
  border-left: 5px solid var(--leaf);
  background: rgb(255 249 225 / 0.58);
  font-size: 0.82rem;
}

.codex-enemy-group.is-elite > h3 {
  border-left-color: var(--coral);
}

.codex-enemy-group.is-boss > h3 {
  border-left-color: #8f76b8;
}

.codex-enemy-group > h3 span {
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.codex-enemy-group > div {
  display: grid;
  gap: 0.5rem;
}

.codex-kind-badge {
  display: inline-flex;
  width: max-content;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  color: #fff8e8;
  background: var(--moss);
  font-size: 0.62rem;
  font-weight: 800;
}

.codex-kind-badge.is-elite {
  background: var(--coral-dark);
}

.codex-kind-badge.is-boss {
  background: #5d477c;
}

.codex-card.is-elite {
  border-left: 3px solid var(--coral);
}

.codex-card.is-boss {
  border: 2px solid #7a63a0;
  background: rgb(229 218 246 / 0.44);
}

/* Run overlays */

.run-screen {
  position: fixed;
  inset: 0;
  z-index: 4;
  min-height: 100vh;
  min-height: 100dvh;
  pointer-events: none;
}

.rotate-hint {
  display: none;
}

#run-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
}

.choice-overlay,
.pause-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  pointer-events: auto;
  background: rgb(4 25 23 / 0.78);
}

.choice-overlay > section,
.pause-overlay > section {
  width: min(100%, 760px);
  max-height: min(88dvh, 620px);
  padding: clamp(1.1rem, 3vw, 2rem);
  overflow-y: auto;
  border: 4px solid var(--parchment-shadow);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--parchment);
  box-shadow: var(--shadow-panel), inset 0 0 0 2px rgb(255 249 225 / 0.5);
  overscroll-behavior: contain;
}

.choice-overlay h2,
.pause-overlay h2 {
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: clamp(1.55rem, 4vw, 2.2rem);
}

.choice-overlay p {
  color: var(--ink-soft);
}

.checkpoint-overlay > section {
  width: min(100%, 520px);
  text-align: center;
}

.checkpoint-overlay p {
  color: var(--ink-soft);
}

.checkpoint-recovery-backdrop {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.checkpoint-recovery-dialog {
  width: min(100%, 32rem);
  max-height: min(calc(100dvh - 2rem), 46rem);
  min-width: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.checkpoint-failure-details {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
  margin-top: 1rem;
  text-align: left;
}

.checkpoint-failure-details dl {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
  margin: 0;
}

.checkpoint-failure-details dl > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
}

.checkpoint-failure-details :is(dt, dd) {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.checkpoint-failure-details dt {
  font-weight: 900;
}

.checkpoint-failure-details label {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
  font-weight: 800;
}

.checkpoint-failure-copy {
  width: 100%;
  min-height: 7rem;
  box-sizing: border-box;
  padding: 0.75rem;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 2px solid rgb(27 58 52 / 0.28);
  border-radius: 10px;
  color: var(--ink);
  background: rgb(255 255 255 / 0.72);
  font: 700 0.82rem/1.45 "Limgul 12", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.checkpoint-recovery-dialog .checkpoint-failure-details {
  color: #f5f1dd;
}

.checkpoint-recovery-dialog .checkpoint-failure-copy {
  border-color: rgb(216 185 111 / 0.65);
  color: #173b35;
  background: #fff8dd;
}

.checkpoint-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

:is(.checkpoint-overlay, .checkpoint-recovery-dialog) button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: break-word;
  touch-action: manipulation;
}

.checkpoint-copy-action {
  width: 100%;
}

.checkpoint-spinner {
  width: 42px;
  height: 42px;
  margin: 1.25rem auto 0;
  border: 5px solid rgb(27 58 52 / 0.2);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: checkpoint-spin 0.8s linear infinite;
}

@keyframes checkpoint-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .checkpoint-spinner { animation-duration: 1.8s; }
}

@media (max-width: 430px) {
  .checkpoint-recovery-backdrop {
    place-items: start stretch;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.6rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-left));
  }

  .checkpoint-recovery-dialog {
    width: 100%;
    max-height: calc(100dvh - max(1.5rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }

  .checkpoint-actions {
    grid-template-columns: 1fr;
  }

  .checkpoint-failure-details dl > div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.choice-grid:has(.choice-card:only-child) {
  grid-template-columns: minmax(0, 250px);
  justify-content: center;
}

.choice-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.4rem;
}

.choice-grid .choice-select {
  display: grid;
  width: 100%;
  min-height: 260px;
  place-items: center;
  align-content: start;
  gap: 0.42rem;
  padding: 1rem 0.75rem;
  color: var(--ink);
  border: 3px solid var(--moss);
  background: #fff3d5;
  text-align: center;
}

.choice-grid .choice-select:hover {
  border-color: var(--coral);
  box-shadow: inset 0 -7px 0 rgb(216 111 90 / 0.18);
  transform: translateY(-2px);
}

.choice-grid .banish-choice {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem;
  color: var(--coral-dark);
  border: 2px solid rgb(158 70 58 / 0.34);
  background: rgb(255 243 213 / 0.76);
  font-size: 0.8rem;
  font-weight: 700;
}

.reroll-choice {
  display: flex;
  margin: 0.9rem auto 0;
}

.choice-grid strong,
.choice-grid small {
  display: block;
}

.choice-type {
  display: inline-flex;
  padding: 0.2rem 0.45rem;
  color: #fff8dd;
  border-radius: 999px;
  background: var(--moss);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.choice-description,
.choice-recipe {
  display: block;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.choice-recipe {
  padding: 0.35rem 0.45rem;
  color: #6e4b31;
  border: 1px dashed rgb(110 75 49 / 0.42);
  background: rgb(240 210 140 / 0.24);
}

.choice-changes {
  display: grid;
  width: 100%;
  gap: 0.2rem;
  margin: 0.15rem 0 0;
  padding: 0;
  color: var(--ink);
  list-style: none;
  font-size: 0.72rem;
  line-height: 1.35;
}

.choice-changes li {
  padding-top: 0.2rem;
  border-top: 1px solid rgb(58 73 57 / 0.14);
}

.choice-grid small {
  color: var(--coral-dark);
}

.pause-overlay > section {
  width: min(100%, 380px);
  text-align: center;
}

.pause-overlay .primary-action,
.pause-overlay .secondary-action {
  width: 100%;
  margin-top: 0.7rem;
}

/* Glossary */

.glossary-layout > header {
  margin-bottom: 1rem;
}

.glossary-layout > header h2 {
  margin: 0.2rem 0 0.45rem;
}

.glossary-layout > header p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.glossary-sections {
  display: grid;
  gap: 1rem;
}

.glossary-section {
  padding: 0.85rem;
  border: 2px solid var(--line-ink);
  border-radius: var(--radius);
  background: rgb(255 249 225 / 0.42);
}

.glossary-section h3 {
  margin-bottom: 0.65rem;
  color: var(--coral-dark);
  font-size: 1rem;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.glossary-card {
  min-width: 0;
  padding: 0.8rem;
  border-left: 4px solid var(--leaf);
  background: rgb(255 249 225 / 0.72);
}

.glossary-card h4 {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-size: 0.92rem;
}

.glossary-card strong {
  display: block;
  color: var(--moss);
  font-size: 0.8rem;
  line-height: 1.45;
}

.glossary-card p {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Results */

.results-screen {
  display: grid;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  justify-items: center;
  align-items: start;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 50% 26%, rgb(241 229 195 / 0.16), transparent 28%),
    linear-gradient(150deg, var(--night-800), var(--night-950));
}

.results-screen > section {
  width: min(100%, 610px);
  margin-block: auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 4px solid var(--parchment-shadow);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--parchment);
  box-shadow: var(--shadow-panel), inset 0 0 0 2px rgb(255 249 225 / 0.5);
  text-align: center;
}

.result-scroll-content {
  padding-bottom: calc(4rem + env(safe-area-inset-bottom));
}

.result-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 0.75rem 0 max(0.25rem, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--parchment) 28%);
}

.result-actions .primary-action {
  width: 100%;
}

.results-screen > section,
.result-stats > div,
.result-reward-list article {
  min-width: 0;
}

.result-emblem {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 50%;
  color: #fff5e6;
  background: var(--coral);
  font-size: 1.65rem;
  box-shadow: 6px 6px 0 var(--parchment-shadow);
}

.results-screen h1 {
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-size: clamp(1.9rem, 5vw, 3rem);
}

.results-screen p {
  color: var(--ink-soft);
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem 0;
  border-block: 2px solid var(--line-ink);
}

.result-stats > div {
  padding: 1rem 0.55rem;
}

.result-stats > div + div {
  border-left: 2px solid var(--line-ink);
}

.result-stats strong,
.result-stats span {
  display: block;
}

.result-stats strong {
  color: var(--coral-dark);
  font-size: clamp(1.55rem, 5vw, 2.5rem);
  font-variant-numeric: tabular-nums;
}

.result-stats > div:first-child strong {
  font-size: clamp(0.9rem, 3.2vw, 1.45rem);
  white-space: nowrap;
}

.result-stats span {
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.result-unlocks {
  display: grid;
  gap: 0.3rem;
  margin: -0.45rem 0 1.25rem;
  padding: 0.75rem;
  border: 2px solid rgb(216 111 90 / 0.35);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: rgb(255 243 213 / 0.72);
  font-size: 0.88rem;
}

.result-unlocks > header {
  display: grid;
  gap: 0.2rem;
}

.result-unlocks > header span {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.result-reward-list {
  display: grid;
  gap: 0.45rem;
}

.result-reward-list article {
  display: grid;
  gap: 0.16rem;
  padding: 0.55rem;
  border: 1px solid rgb(216 111 90 / 0.28);
  border-radius: 8px;
  background: rgb(255 249 225 / 0.6);
}

.result-reward-list b {
  color: var(--moss);
  font-size: 0.72rem;
}

.result-reward-list span {
  color: var(--coral-dark);
  font-weight: 800;
}

.result-reward-list small {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.result-unlocks .secondary-action {
  width: 100%;
  margin-top: 0.25rem;
}

.result-unlocks strong {
  color: var(--coral-dark);
}

.result-codex-unlocks {
  display: grid;
  width: min(100%, 560px);
  margin: 0.75rem auto;
  padding: 0.75rem;
  gap: 0.55rem;
  border: 2px solid rgb(79 119 73 / 0.34);
  border-radius: var(--radius);
  background: rgb(236 246 211 / 0.76);
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.result-codex-unlocks > header {
  display: grid;
  gap: 0.18rem;
}

.result-codex-unlocks > header span {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.result-codex-unlocks > div {
  display: grid;
  gap: 0.4rem;
}

.result-codex-unlocks article {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgb(79 119 73 / 0.25);
  border-radius: 9px;
  background: rgb(255 252 230 / 0.74);
  text-align: left;
}

.result-codex-unlocks article .content-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.result-codex-unlocks article strong {
  min-width: 0;
  color: var(--moss);
}

.result-story {
  width: min(100%, 560px);
  margin: 0.75rem auto;
  padding: 0.85rem;
  border: 2px solid rgb(173 139 75 / 0.32);
  border-radius: var(--radius);
  background: rgb(255 249 225 / 0.84);
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.result-story > strong {
  color: var(--coral-dark);
}

.result-story p {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
  white-space: pre-line;
}

/* Touch controls */

#touch-controls {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 8;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

#touch-stick,
.touch-actions,
#touch-skill {
  touch-action: none;
}

#touch-stick {
  position: relative;
  width: 112px;
  height: 112px;
  border: 4px solid rgb(241 229 195 / 0.58);
  border-radius: 50%;
  pointer-events: auto;
  background: rgb(9 33 31 / 0.62);
  box-shadow: inset 0 0 0 5px rgb(143 200 109 / 0.12), 0 8px 20px rgb(4 25 23 / 0.3);
}

.touch-stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  border: 4px solid var(--parchment);
  border-radius: 50%;
  background: var(--moss);
  box-shadow: inset -7px -6px 0 var(--night-800);
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
}

.touch-actions {
  display: flex;
  margin-left: auto;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: auto;
}

#touch-skill {
  position: relative;
  opacity: 0.72;
  display: grid;
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
  place-items: center;
  align-content: center;
  gap: 0.08rem;
  padding: 0;
  color: #fff5e6;
  border: 3px solid var(--parchment);
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 6px 0 var(--coral-dark), 0 9px 18px rgb(4 25 23 / 0.32);
}


#touch-skill span {
  font-size: 1.12rem;
  line-height: 1;
}

#touch-stick.is-floating-mode {
  position: fixed;
  top: var(--joystick-top, 50%);
  left: var(--joystick-left, 50%);
  z-index: 0;
  transform: translate(-50%, -50%);
}

#touch-stick.is-floating-mode:not(.is-floating-active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#touch-stick.is-floating-mode.is-floating-active {
  visibility: visible;
  opacity: 1;
}

#touch-skill small {
  position: absolute;
  right: 0;
  bottom: -0.85rem;
  left: 0;
  color: #fff8dd;
  font-size: 0.66rem;
  font-weight: 700;
  text-shadow: 0 2px 0 var(--night-950);
}

.noscript-message {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 20;
  margin: 0;
  padding: 1rem;
  border: 2px solid var(--coral);
  border-radius: var(--radius);
  color: var(--parchment);
  background: var(--night-800);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  button,
  summary,
  .character-choice,
  .cosmetic-swatch,
  .tree-node,
  #game-canvas {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 180ms ease, transform 150ms ease;
  }

  .title-rabbit {
    animation: title-bob 2.8s steps(2, end) infinite;
  }

  .title-fox {
    animation: title-bob 2.8s 0.35s steps(2, end) infinite;
  }

  .title-art::before {
    animation: firefly-blink 2.4s steps(2, end) infinite;
  }

  .title-art::after {
    animation: firefly-blink 3.1s 0.6s steps(2, end) infinite reverse;
  }

  @keyframes title-bob {
    0%,
    100% { transform: translateY(0) scale(var(--sprite-scale)); }
    50% { transform: translateY(-8px) scale(var(--sprite-scale)); }
  }

  @keyframes firefly-blink {
    0%,
    100% { opacity: 0.42; }
    50% { opacity: 1; }
  }
}

.touch-capable #game-stage:has(.run-screen) #touch-controls {
  display: flex;
}

#game-stage:has(.choice-overlay) #touch-controls,
#game-stage:has(.pause-overlay) #touch-controls {
  pointer-events: none;
}

#game-stage:has(.choice-overlay) #touch-controls > *,
#game-stage:has(.pause-overlay) #touch-controls > * {
  pointer-events: none;
}

.touch-capable :is(.run-hud-pause, .run-equipment-button, .equipment-inbox-claim, .equipment-inbox-claim-all) {
  min-width: 44px;
  min-height: 44px;
}

.touch-capable .run-hud-bars,
.touch-capable .run-hud-summary {
  backdrop-filter: none;
  background: rgb(9 33 31 / 0.94);
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 540px) {
  .appearance-studio {
    grid-template-columns: minmax(190px, 0.48fr) minmax(0, 1.52fr);
    gap: 0.8rem;
  }

  .appearance-studio .avatar-preview {
    top: 0.45rem;
    padding: 0.7rem;
  }

  .appearance-studio .avatar-preview canvas {
    width: min(100%, 132px);
  }

  .pixel-editor-workspace {
    grid-template-columns: 224px minmax(170px, 1fr);
    gap: 0.65rem;
  }

  .pixel-editor-canvas {
    width: 224px;
    height: 224px;
  }

  .pixel-editor-controls {
    max-height: calc(100dvh - 4rem);
    padding-right: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .custom-slot-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .title-screen {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 43dvh) minmax(0, 57dvh);
  }

  .title-art {
    min-height: 0;
  }

  .moon-disc {
    top: 10%;
    width: min(39vw, 164px);
  }

  .title-rabbit,
  .title-fox {
    --sprite-scale: 0.78;
    bottom: 10%;
    transform: scale(var(--sprite-scale));
  }

  .title-rabbit {
    left: 25%;
  }

  .title-fox {
    right: 19%;
  }

  .canopy-right {
    top: -14%;
  }

  .title-copy {
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(1.25rem, 5vw, 2rem) max(1.2rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));
  }

  .title-mark {
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
  }

  .title-copy h1 {
    max-width: 100%;
    margin-bottom: 0.65rem;
    font-size: clamp(2.4rem, 12vw, 3.35rem);
    line-height: 1;
  }

  .title-copy p {
    max-width: 22rem;
    margin-bottom: 1.15rem;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .hub-screen {
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-left: max(0.75rem, env(safe-area-inset-left));
  }

  .hub-header {
    min-height: 58px;
  }

  .brand-button {
    gap: 0.5rem;
    padding-inline: 0.25rem;
  }

  .brand-leaf {
    width: 20px;
    height: 24px;
  }

  .dew-counter {
    min-height: 44px;
    padding-inline: 0.72rem;
  }

  .leaf-tabs {
    gap: 0.25rem;
    padding: 0.3rem;
  }

  .leaf-tabs button {
    min-height: 48px;
    padding-inline: 0.35rem;
    font-size: 0.88rem;
  }

  .hub-section {
    margin-top: 0.75rem;
    padding: 1rem;
    border-width: 3px;
  }

  .expedition-layout,
  .customize-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .expedition-layout {
    gap: 1.25rem;
  }

  .character-list {
    gap: 0.55rem;
  }

  .character-choice {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.45rem;
    min-height: 76px;
    padding: 0.55rem;
  }

  .character-token {
    transform: scale(0.82);
    transform-origin: left center;
  }


  .forest-map-preview {
    min-height: 260px;
    box-shadow: 6px 6px 0 var(--parchment-shadow);
  }

  .customize-layout {
    gap: 1.4rem;
  }

  .appearance-studio .avatar-preview {
    position: static;
  }

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

  .avatar-preview canvas {
    width: min(100%, 170px);
  }

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

  .custom-slot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pixel-editor-workspace {
    grid-template-columns: 1fr;
  }

  .pixel-canvas-column {
    display: grid;
    justify-items: center;
  }

  .pixel-keyboard-help {
    max-width: 38rem;
    text-align: center;
  }

  .tree-layout > header {
    display: grid;
  }

  .tree-layout > header .secondary-action {
    width: 100%;
  }

  .tree-trunk,
  .branches-grid::before {
    display: none;
  }

  .branches-grid,
  .codex-columns,
  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .tree-nodes {
    grid-template-columns: 1fr;
  }

  .codex-items {
    grid-template-columns: 1fr;
  }

  .choice-overlay,
  .pause-overlay {
    align-items: end;
    padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  }

  .choice-overlay > section,
  .pause-overlay > section {
    max-height: 84dvh;
    padding: 1rem;
  }

  .choice-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .choice-grid .choice-select {
    min-height: 150px;
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    text-align: left;
  }

  .choice-grid .choice-icon {
    grid-row: 1 / span 3;
  }

  .choice-grid small,
  .choice-description,
  .choice-recipe,
  .choice-changes {
    grid-column: 2;
  }

  .result-stats > div {
    padding-inline: 0.25rem;
  }
}

@media (max-width: 430px) and (orientation: portrait) {

  .results-screen {
    align-items: start;
  }

  .custom-slot-browser > header,
  .pixel-editor-heading {
    display: grid;
  }

  .cosmetic-ticket-count {
    justify-self: start;
  }

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

  .pixel-editor-canvas {
    width: min(256px, calc(100vw - 48px));
    height: min(256px, calc(100vw - 48px));
  }

  .pixel-palette {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }


  #touch-controls {
    bottom: max(1.35rem, env(safe-area-inset-bottom));
  }


  #touch-stick {
    width: 106px;
    height: 106px;
  }

  .touch-actions {
    gap: 0.55rem;
  }

  .results-screen > section {
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 360px) {
  .result-stats strong {
    font-size: clamp(1.05rem, 7vw, 1.45rem);
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .result-stats > div:first-child strong {
    white-space: normal;
  }

  .result-reward-list,
  .result-equipment-drops {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .results-screen > section {
    padding-inline: 0.75rem;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  .title-screen {
    grid-template-columns: minmax(300px, 0.92fr) minmax(340px, 1.08fr);
    grid-template-rows: 1fr;
  }

  .title-art,
  .title-copy {
    min-height: 100dvh;
  }

  .title-copy {
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 2.2rem;
  }

  .title-copy h1 {
    max-width: 10ch;
    font-size: clamp(2.4rem, 8vw, 4.2rem);
  }

  .title-copy p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  .moon-disc {
    width: min(22vw, 140px);
  }

  .title-rabbit,
  .title-fox {
    --sprite-scale: 0.7;
    bottom: 10%;
    transform: scale(var(--sprite-scale));
  }

  .hub-screen {
    padding-top: max(0.35rem, env(safe-area-inset-top));
  }

  .hub-header {
    min-height: 48px;
  }

  .leaf-tabs {
    margin-top: 0.25rem;
  }

  .leaf-tabs button {
    min-height: 48px;
    padding-block: 0.45rem;
  }

  .expedition-layout {
    min-height: 0;
  }

  .results-screen {
    align-items: start;
    padding: max(0.4rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    overflow-y: auto;
  }

  .results-screen > section {
    width: min(100%, 680px);
    padding: 0.65rem 1rem;
  }

  .result-emblem {
    width: 40px;
    height: 40px;
    margin-bottom: 0.35rem;
    border-width: 3px;
    font-size: 1rem;
    box-shadow: 3px 3px 0 var(--parchment-shadow);
  }

  .results-screen h1 {
    margin-bottom: 0.2rem;
    font-size: 1.55rem;
  }

  .results-screen p {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
  }

  .result-stats {
    margin: 0.45rem 0;
  }

  .result-stats > div {
    padding-block: 0.4rem;
  }

  .result-stats strong {
    font-size: 1.45rem;
  }

  .result-unlocks {
    margin: 0 0 0.45rem;
    padding: 0.4rem;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  #touch-controls {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.55rem, env(safe-area-inset-bottom));
    left: max(0.75rem, env(safe-area-inset-left));
  }

  #touch-stick {
    width: 92px;
    height: 92px;
  }

  .touch-stick-knob {
    width: 44px;
    height: 44px;
  }

  #touch-skill {
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
  }


  .choice-overlay > section {
    max-width: 700px;
    max-height: 94dvh;
    padding: 0.8rem 1rem;
  }

  .choice-overlay h2 {
    margin-bottom: 0.2rem;
    font-size: 1.35rem;
  }

  .choice-overlay p {
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
  }

  .choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.6rem;
  }

  .choice-grid .choice-select {
    min-height: 168px;
    padding: 0.55rem;
  }

  .choice-description,
  .choice-recipe,
  .choice-changes {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-editor {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line-dark: rgb(241 229 195 / 0.62);
    --line-ink: rgb(32 52 47 / 0.56);
  }

  button:focus-visible,
  summary:focus-visible {
    outline-width: 4px;
  }
}

/* Interactive combat HUD */
.run-hud {
  position: fixed;
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.55rem, env(safe-area-inset-right));
  left: max(0.55rem, env(safe-area-inset-left));
  z-index: 7;
  display: grid;
  gap: 0.45rem;
  pointer-events: none;
}

.run-hud[hidden],
.equipment-tooltip[hidden] {
  display: none;
}

.run-hud-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
}

.run-hud-bars {
  display: grid;
  width: min(100%, 340px);
  gap: 0.28rem;
  padding: 0.52rem 0.6rem;
  border: 2px solid rgb(241 229 195 / 0.5);
  border-radius: 10px;
  background: rgb(9 33 31 / 0.84);
  box-shadow: 0 4px 14px rgb(4 25 23 / 0.32);
  backdrop-filter: blur(4px);
}

.run-meter {
  display: grid;
  grid-template-columns: minmax(105px, auto) minmax(72px, 1fr);
  gap: 0.48rem;
  align-items: center;
}

.run-meter-label {
  color: #fff8dd;
  font-size: 0.78rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 var(--night-950);
  white-space: nowrap;
}

.run-meter-track {
  position: relative;
  display: block;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgb(241 229 195 / 0.38);
  border-radius: 999px;
  background: #332e3a;
}

.run-meter-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(var(--hp-ratio, 1));
  transform-origin: left center;
  background: #e7776f;
}

.run-meter.is-experience .run-meter-fill {
  transform: scaleX(var(--xp-ratio, 0));
  background: #9bd675;
}

.run-hud-summary {
  display: grid;
  grid-template-columns: minmax(128px, auto) auto auto auto 40px;
  gap: 0.32rem;
  align-items: center;
  padding: 0.42rem;
  border: 2px solid rgb(241 229 195 / 0.5);
  border-radius: 10px;
  color: #fff8dd;
  background: rgb(9 33 31 / 0.84);
  box-shadow: 0 4px 14px rgb(4 25 23 / 0.32);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 var(--night-950);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.run-hud-summary time {
  min-width: 4.4ch;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.run-skill-status {
  display: grid;
  min-width: 128px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 0.38rem;
  padding-right: 0.36rem;
  border-right: 1px solid rgb(241 229 195 / 0.28);
  text-shadow: none;
}

.run-skill-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgb(241 229 195 / 0.58);
  border-radius: 9px;
  background: rgb(8 27 26 / 0.88);
}

.run-skill-icon::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(to top, transparent calc(var(--skill-ratio, 1) * 100%), rgb(3 14 14 / 0.72) 0);
}

.run-skill-status .content-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.run-skill-status[data-ready="false"] .content-icon {
  filter: brightness(0.42) saturate(0.55);
  opacity: 0.72;
}

.run-skill-status[data-ready="true"] .run-skill-icon {
  border-color: #fff1a8;
  box-shadow: 0 0 0 2px rgb(255 232 116 / 0.24), 0 0 14px rgb(255 221 101 / 0.74);
}

.run-skill-status[data-ready="true"] .content-icon {
  filter: brightness(1.14) saturate(1.12);
}

.run-skill-copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.run-skill-copy small,
.run-skill-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-skill-copy small {
  color: var(--leaf-pale);
  font-size: 0.62rem;
}

.run-skill-copy strong {
  color: #fff8dd;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

#touch-skill.is-cooling {
  filter: brightness(0.46) saturate(0.58);
}

#touch-skill.is-ready {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px rgb(255 239 154 / 0.24), 0 0 18px rgb(255 221 101 / 0.58), 0 6px 0 var(--coral-dark);
}

.run-hud-pause {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: #fff8dd;
  border: 2px solid rgb(241 229 195 / 0.55);
  border-radius: 9px;
  pointer-events: auto;
  background: var(--night-700);
  box-shadow: 0 3px 0 var(--night-950);
}

.run-equipment-list {
  display: flex;
  max-width: min(100%, 520px);
  gap: 0.34rem;
  overflow-x: auto;
  padding: 0.1rem 0.08rem 0.38rem;
  pointer-events: auto;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.run-equipment-button {
  position: relative;
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 4px;
  border: 2px solid rgb(241 229 195 / 0.6);
  border-radius: 9px;
  color: #fff8dd;
  background: rgb(9 33 31 / 0.86);
  box-shadow: 0 3px 0 rgb(4 25 23 / 0.65);
}

.run-equipment-button.is-spirit {
  border-color: rgb(117 202 232 / 0.82);
}

.run-equipment-button[aria-expanded="true"],
.run-equipment-button:focus-visible {
  border-color: var(--coral-pale);
  box-shadow: 0 0 0 2px rgb(216 111 90 / 0.36), 0 3px 0 rgb(4 25 23 / 0.65);
}

.run-equipment-button .content-icon {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  image-rendering: pixelated;
}

.run-equipment-button > span {
  position: absolute;
  right: 2px;
  bottom: 1px;
  display: grid;
  min-width: 14px;
  height: 14px;
  place-items: center;
  padding-inline: 2px;
  border-radius: 999px;
  color: #fff8dd;
  background: var(--coral-dark);
  font-size: 0.62rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.equipment-tooltip {
  position: fixed;
  z-index: 20;
  display: grid;
  width: min(280px, calc(100vw - 16px));
  max-height: min(70vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 0.22rem;
  padding: 0.62rem 0.7rem;
  border: 3px solid var(--parchment-shadow);
  border-radius: 10px;
  pointer-events: none;
  color: var(--ink);
  background: var(--parchment);
  box-shadow: 0 8px 24px rgb(4 25 23 / 0.42), inset 0 0 0 1px rgb(255 249 225 / 0.62);
  font-size: 0.75rem;
  line-height: 1.35;
}

.equipment-tooltip::after {
  position: absolute;
  left: var(--tooltip-arrow-x, 50%);
  width: 12px;
  height: 12px;
  content: "";
  border-right: 3px solid var(--parchment-shadow);
  border-bottom: 3px solid var(--parchment-shadow);
  background: var(--parchment);
  transform: translateX(-50%) rotate(45deg);
}

.equipment-tooltip[data-placement="above"]::after {
  bottom: -8px;
}

.equipment-tooltip[data-placement="below"]::after {
  top: -8px;
  transform: translateX(-50%) rotate(225deg);
}

.equipment-tooltip strong {
  color: var(--coral-dark);
  font-size: 0.9rem;
}

.equipment-tooltip > span {
  color: var(--moss);
  font-weight: 800;
}

.equipment-tooltip p {
  margin: 0;
}

.equipment-tooltip [data-hud-tooltip-details] {
  padding-top: 0.25rem;
  border-top: 1px solid rgb(32 52 47 / 0.18);
  font-size: 0.7rem;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) and (orientation: portrait) {
  .run-hud {
    gap: 0.36rem;
  }

  .run-hud-status {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
  }

  .run-hud-bars {
    padding: 0.4rem 0.45rem;
  }

  .run-meter {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .run-meter-label {
    font-size: 0.68rem;
  }

  .run-hud-summary {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 40px;
    grid-template-rows: auto auto;
    padding: 0.34rem;
  }

  .run-skill-status {
    min-width: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding-right: 0;
    border-right: 0;
  }

  .run-skill-icon {
    width: 36px;
    height: 36px;
  }

  .run-skill-copy small {
    display: none;
  }

  .run-skill-copy strong {
    font-size: 0.58rem;
    text-align: center;
  }

  .run-hud-summary > strong {
    font-size: 0.7rem;
    text-align: center;
  }

  .run-hud-summary > [data-hud-level] {
    grid-column: 2;
    grid-row: 1;
  }

  .run-hud-summary > [data-hud-wave] {
    grid-column: 3;
    grid-row: 1;
  }

  .run-hud-summary time {
    grid-column: 2 / span 2;
    grid-row: 2;
    font-size: 0.86rem;
  }

  .run-hud-pause {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .run-equipment-list {
    max-width: calc(100vw - max(1.1rem, env(safe-area-inset-left)) - max(1.1rem, env(safe-area-inset-right)));
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  .run-hud {
    top: max(0.3rem, env(safe-area-inset-top));
    right: max(0.4rem, env(safe-area-inset-right));
    left: max(0.4rem, env(safe-area-inset-left));
    gap: 0.22rem;
  }

  .run-hud-bars {
    width: min(100%, 300px);
    padding: 0.3rem 0.4rem;
  }

  .run-equipment-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
}

/* Collapsible custom cosmetic studio and detailed pixel color picker */
.custom-cosmetics-accordion {
  margin-bottom: 1.25rem;
  overflow: clip;
  border: 3px solid rgb(58 73 57 / 0.28);
  border-radius: 14px;
  background: rgb(255 249 225 / 0.38);
}

.custom-cosmetics-accordion > summary {
  display: grid;
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.82rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  background: rgb(255 249 225 / 0.68);
}

.custom-cosmetics-accordion > summary::-webkit-details-marker {
  display: none;
}

.custom-cosmetics-accordion > summary::before {
  width: 1.25rem;
  content: "▸";
  color: var(--coral-dark);
  font-size: 1rem;
  text-align: center;
  transition: transform 150ms ease;
}

.custom-cosmetics-accordion[open] > summary::before {
  transform: rotate(90deg);
}

.custom-cosmetics-accordion > summary > span:first-of-type {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.custom-cosmetics-accordion > summary strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.custom-cosmetics-accordion > summary small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.35;
}

.custom-cosmetics-body {
  padding: 0 0.82rem 0.82rem;
}

.custom-cosmetics-accordion .custom-slot-browser {
  margin-bottom: 0.9rem;
  padding: 0.1rem 0 0.9rem;
  border-bottom: 2px solid var(--line-ink);
}

.custom-cosmetics-accordion .pixel-editor,
.custom-cosmetics-accordion .pixel-editor-empty {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.pixel-color-trigger {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  color: var(--ink);
  border: 2px solid rgb(58 73 57 / 0.34);
  border-radius: 9px;
  background: #fff9e1;
  text-align: left;
}

.pixel-color-trigger::after {
  grid-column: 3;
  content: "▾";
  color: var(--coral-dark);
}

.pixel-color-trigger[aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

.pixel-color-trigger strong {
  grid-column: 3;
  grid-row: 1;
  margin-right: 1.2rem;
  color: var(--coral-dark);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.pixel-color-current,
.pixel-color-previews i {
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--pixel-color);
  box-shadow: inset -5px -4px 0 rgb(32 52 47 / 0.16);
}

.pixel-color-panel {
  color-scheme: light;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(150px, 0.85fr);
  gap: 0.7rem;
  margin-top: 0.55rem;
  padding: 0.65rem;
  border: 2px solid rgb(58 73 57 / 0.34);
  border-radius: 10px;
  background: #fff9e1;
}

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

.pixel-color-sv-wrap {
  position: relative;
  grid-row: 1 / span 3;
  min-width: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

.pixel-color-sv {
  display: block;
  width: 100%;
  height: auto;
  min-height: 160px;
  cursor: crosshair;
  touch-action: none;
}

.pixel-color-sv-marker {
  position: absolute;
  top: var(--sv-y, 50%);
  left: var(--sv-x, 50%);
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #16251f, 0 2px 5px rgb(0 0 0 / 0.45);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.pixel-hue-field,
.pixel-hex-field {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.pixel-hue-field input {
  width: 100%;
  height: 32px;
  margin: 0;
  accent-color: var(--coral);
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.pixel-color-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.pixel-color-previews > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.pixel-color-previews b {
  color: var(--ink);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
}

.pixel-hex-field input,
.pixel-rgb-fields input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  opacity: 1;
  border: 2px solid rgb(58 73 57 / 0.34);
  border-radius: 7px;
  background: #fffdf1;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.pixel-hex-field input {
  text-transform: uppercase;
}

.pixel-rgb-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.pixel-rgb-fields label {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.pixel-color-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.5rem;
  color: var(--coral-dark);
  border-left: 3px solid var(--coral);
  background: rgb(216 111 90 / 0.1);
  font-size: 0.7rem;
}

.pixel-color-library {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgb(58 73 57 / 0.18);
}

.pixel-color-library > div {
  min-width: 0;
}

.pixel-color-library > div > strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-size: 0.74rem;
}

.pixel-palette-empty {
  display: block;
  grid-column: 1 / -1;
  padding: 0.55rem;
  color: var(--ink-soft);
  border: 1px dashed rgb(58 73 57 / 0.28);
  border-radius: 7px;
  font-size: 0.68rem;
}

@media (max-width: 600px) {
  .pixel-color-panel {
    grid-template-columns: 1fr;
  }

  .pixel-color-sv-wrap {
    grid-row: auto;
  }

  .pixel-color-library {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .custom-cosmetics-accordion > summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .custom-cosmetics-accordion > summary .cosmetic-ticket-count {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }

  .pixel-color-panel {
    margin-inline: -0.15rem;
    padding: 0.5rem;
  }

  .pixel-color-sv {
    min-height: min(54vw, 210px);
  }

  .pixel-rgb-fields {
    gap: 0.25rem;
  }
}

/* 32×32 animated custom cosmetics */
.pixel-editor-grid {
  grid-template-rows: repeat(32, minmax(0, 1fr));
}

.pixel-editor-grid [role="row"] {
  grid-template-columns: repeat(32, minmax(0, 1fr));
}

.pixel-animation-bar {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  padding: 0.7rem;
  border: 2px solid var(--line-ink);
  border-radius: 11px;
  background: rgb(255 249 225 / 0.5);
}

.pixel-frame-strip {
  display: flex;
  min-width: 0;
  gap: 0.4rem;
  padding: 0.15rem 0.05rem 0.35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.pixel-frame-thumb {
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  overflow: hidden;
  color: var(--mist);
  border: 3px solid var(--night-700);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgb(32 52 47 / 0.12) 25%, transparent 25% 75%, rgb(32 52 47 / 0.12) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, rgb(32 52 47 / 0.12) 25%, transparent 25% 75%, rgb(32 52 47 / 0.12) 75%) 6px 6px / 12px 12px,
    #fff9e1;
  box-shadow: inset 0 0 0 8px var(--frame-color, transparent);
}

.pixel-frame-thumb span {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  padding: 0 3px;
  border-radius: 5px;
  background: rgb(10 34 32 / 0.9);
  font-size: 0.64rem;
  line-height: 1;
}

.pixel-frame-thumb.is-selected,
.pixel-frame-thumb[aria-pressed="true"] {
  border-color: var(--coral);
  box-shadow: inset 0 0 0 8px var(--frame-color, transparent), 0 0 0 2px rgb(216 111 90 / 0.24);
}

.pixel-frame-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.pixel-frame-actions button,
.pixel-playback-controls button,
.custom-slot-copy,
.official-cosmetic-copy {
  min-height: 44px;
  padding: 0.45rem 0.55rem;
  color: var(--ink);
  border: 2px solid var(--line-ink);
  border-radius: 9px;
  background: #fff3d5;
  font-size: 0.72rem;
}

.pixel-playback-controls {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.pixel-playback-controls label {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.pixel-playback-controls input {
  width: 100%;
  min-width: 80px;
  accent-color: var(--coral);
}

.pixel-playback-controls output,
.pixel-playback-controls > strong {
  color: var(--coral-dark);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pixel-opacity-field {
  display: grid;
  grid-column: 2;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.pixel-opacity-field input {
  width: 100%;
  accent-color: var(--coral);
}

.pixel-opacity-field output {
  min-width: 3.2em;
  color: var(--coral-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pixel-opacity-help {
  grid-column: 2;
  margin: -0.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.66rem;
  line-height: 1.4;
}

.pixel-editor.is-locked {
  opacity: 0.94;
}

.pixel-editor.is-locked .pixel-canvas-wrap {
  box-shadow: 5px 5px 0 var(--parchment-shadow), inset 0 0 0 999px rgb(32 52 47 / 0.06);
}

.custom-slot-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 0.25rem;
}

.custom-slot-copy {
  color: var(--coral-dark);
  background: rgb(255 243 213 / 0.78);
}

.custom-slot-state {
  grid-column: 2;
  justify-self: start;
  padding: 0.12rem 0.3rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
}

.custom-slot-state.is-draft {
  color: #6b5528;
  background: #ead38a;
}

.custom-slot-state.is-activated {
  color: #fff8dd;
  background: var(--moss);
}

.custom-slot-card.is-equipped .custom-slot-button {
  border-color: var(--leaf);
  box-shadow: inset 0 0 0 2px rgb(143 200 109 / 0.25);
}

.cosmetic-swatch-card {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}

.cosmetic-swatch-card .cosmetic-swatch {
  width: 100%;
}

.official-cosmetic-copy {
  width: 100%;
  color: var(--coral-dark);
}

/* Exclusion preparation - desktop B layout, mobile tabs */
.preparation-screen {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 10%, rgb(143 200 109 / 0.16), transparent 36%),
    linear-gradient(150deg, var(--night-800), var(--night-950));
}

.preparation-screen > section {
  width: min(100%, 980px);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 3vw, 1.8rem);
  overflow-y: auto;
  border: 4px solid var(--parchment-shadow);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--parchment);
  box-shadow: var(--shadow-panel), inset 0 0 0 2px rgb(255 249 225 / 0.5);
  overscroll-behavior: contain;
}

.preparation-screen h1 {
  margin: 0.3rem 0 0.5rem;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.preparation-screen > section > p {
  margin-bottom: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.preparation-mobile-tabs {
  display: none;
}

.preparation-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.preparation-category {
  min-width: 0;
  padding: 0.75rem;
  border: 2px solid rgb(58 73 57 / 0.25);
  border-radius: 12px;
  background: rgb(255 249 225 / 0.52);
}

.preparation-category > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--line-ink);
}

.preparation-category h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.preparation-category > header span {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.preparation-list {
  display: grid;
  gap: 0.45rem;
}

.preparation-choice {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 86px;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem;
  color: var(--ink);
  border: 2px solid rgb(58 73 57 / 0.28);
  border-radius: 10px;
  background: #fff9e1;
  text-align: left;
}

.preparation-choice .choice-icon {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.preparation-choice-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.preparation-choice-copy strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.preparation-effect {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.preparation-choice-copy small {
  color: var(--coral-dark);
  font-size: 0.65rem;
}

.preparation-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid rgb(58 73 57 / 0.28);
  border-radius: 50%;
  color: transparent;
}

.preparation-choice.is-selected {
  border-color: var(--coral);
  background: #fff0d0;
  box-shadow: inset 0 0 0 2px rgb(216 111 90 / 0.16);
}

.preparation-choice.is-selected .preparation-check {
  color: #fff8dd;
  border-color: var(--coral-dark);
  background: var(--coral-dark);
}

.preparation-choice:disabled {
  opacity: 0.58;
}

.preparation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .pixel-frame-actions {
    grid-template-columns: 1fr;
  }

  .pixel-playback-controls {
    grid-template-columns: 1fr;
  }

  .pixel-playback-controls label {
    grid-template-columns: auto minmax(80px, 1fr) auto;
  }

  .preparation-screen {
    place-items: stretch;
    padding: max(0.6rem, env(safe-area-inset-top)) max(0.6rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-left));
  }

  .preparation-screen > section {
    max-height: calc(100dvh - 1.2rem);
    padding: 0.9rem;
  }

  .preparation-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.7rem;
  }

  .preparation-mobile-tabs button {
    min-height: 48px;
    padding: 0.5rem;
    color: var(--ink);
    border: 2px solid var(--line-ink);
    background: rgb(255 249 225 / 0.55);
  }

  .preparation-mobile-tabs button[aria-selected="true"] {
    color: #fff8dd;
    border-color: var(--coral-dark);
    background: var(--coral-dark);
  }

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

  .preparation-category {
    display: none;
  }

  .preparation-category.is-active {
    display: block;
  }

  .preparation-category > header {
    display: none;
  }

  .preparation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 430px) {
  .pixel-opacity-field,
  .pixel-opacity-help {
    grid-column: 1;
  }

  .pixel-frame-thumb {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .preparation-choice {
    min-height: 82px;
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    gap: 0.45rem;
    padding: 0.5rem;
  }

  .preparation-choice .choice-icon {
    width: 36px;
    height: 36px;
  }
}

/* Final balance UI: locked heroes, equipment capacity, and multi-banish progress */
.character-choice.is-locked {
  cursor: not-allowed;
  border-color: rgb(67 75 68 / 0.48);
  color: rgb(45 57 49 / 0.68);
  background: rgb(70 82 72 / 0.12);
  filter: saturate(0.45);
  opacity: 0.82;
}

.character-choice.is-locked:hover {
  border-color: rgb(67 75 68 / 0.48);
  background: rgb(70 82 72 / 0.12);
}

.character-choice.is-locked .character-token {
  filter: grayscale(1) brightness(0.58);
}

.character-choice.is-locked small {
  color: #6f5b46;
  font-size: 0.7rem;
}

.run-equipment-heading {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 0.38rem;
  padding: 0.25rem 0.44rem;
  border: 1px solid rgb(241 229 195 / 0.46);
  border-radius: 8px;
  color: #fff8dd;
  background: rgb(9 33 31 / 0.78);
  box-shadow: 0 3px 10px rgb(4 25 23 / 0.26);
  font-size: 0.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #071918;
  white-space: nowrap;
  pointer-events: none;
}

.run-equipment-heading span + span {
  padding-left: 0.38rem;
  border-left: 1px solid rgb(241 229 195 / 0.3);
}

.preparation-selection-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0.8rem 0;
  padding: 0.62rem 0.78rem;
  border: 2px solid rgb(64 95 72 / 0.3);
  border-radius: 10px;
  color: var(--ink);
  background: rgb(143 200 109 / 0.14);
}

.preparation-selection-count strong {
  font-size: 0.92rem;
}

.preparation-selection-count span {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

@media (max-width: 680px) {
  .run-equipment-heading {
    font-size: 0.64rem;
  }

  .preparation-selection-count {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Online service panels */
.online-panel { display: grid; gap: 16px; }
.online-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border: 2px solid rgba(143,200,109,.55); border-radius: 14px; background: rgba(12,42,38,.82); }
.online-panel > header h2 { margin: 0 0 6px; font-size: 1.35rem; }
.online-panel > header :is(h2, strong, span, small) { color: #fff9dc; }
.online-panel > header p { margin: 0; color: #e3edda; line-height: 1.55; }
.online-subtabs, .ranking-actions, .admin-nav, .admin-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.online-subtabs button[aria-pressed="true"] { border-color: #f0dc55; box-shadow: 0 0 0 2px rgba(240,220,85,.18); }
.online-notice, .online-status, .ranking-rule, .online-success { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(117,202,232,.13); line-height: 1.5; }
.online-status.is-error { background: rgba(229,79,79,.18); color: #ffd5d5; }
.ranking-table-wrap { overflow-x: auto; border: 2px solid rgba(143,200,109,.35); border-radius: 12px; }
.ranking-table-wrap table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ranking-table-wrap th, .ranking-table-wrap td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; }
.shop-wallet { display: grid; text-align: right; gap: 2px; }
.shop-wallet strong { font-size: 1.45rem; color: #f0dc55; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.shop-product { display: grid; align-content: start; gap: 8px; min-height: 230px; padding: 14px; border: 2px solid rgba(143,200,109,.35); border-radius: 12px; background: rgba(18,54,47,.82); color: #f7f1d0; }
.shop-product.is-featured { border-color: #f0dc55; }
.shop-product h3, .shop-product p { margin: 0; }
.shop-product h3 { color: #fff9dc; }
.shop-product :is(p, small) { color: #d7e7cc; }
.shop-product > strong { margin-top: auto; color: #f0dc55; font-size: 1.12rem; }
.shop-product-kind, .account-badge { justify-self: start; padding: 4px 8px; border-radius: 999px; background: rgba(117,202,232,.16); font-size: .78rem; }
.account-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.account-summary > div { display: grid; gap: 6px; padding: 14px; border: 2px solid rgba(143,200,109,.3); border-radius: 10px; background: rgba(18,54,47,.7); color: #f7f1d0; }
.account-summary > div :is(span, small) { color: #d7e7cc; }
.account-summary > div strong { color: #fff9dc; }
.nickname-form, .admin-editor-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 14px; border: 2px solid rgba(143,200,109,.3); border-radius: 12px; }
.nickname-form label, .admin-editor-form label { display: grid; gap: 6px; }
.admin-editor-form :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], select, textarea) { min-height: 44px; }
.nickname-form small, .nickname-form button, .admin-editor-form textarea, .admin-form-actions { grid-column: 1 / -1; }
.admin-panel details { padding: 12px; border: 2px solid rgba(143,200,109,.28); border-radius: 12px; background: rgba(15,48,43,.72); }
.admin-workshop-controls { display: contents; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.admin-workshop-controls:disabled { cursor: wait; }
.admin-panel summary { cursor: pointer; font-weight: 700; }
.admin-product-list { display: grid; gap: 8px; }
.admin-product-row { display: grid; grid-template-columns: minmax(160px,1fr) auto minmax(260px,auto); align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-product-row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.result-verification { display: grid; gap: 4px; margin: 12px 0; padding: 12px; border-radius: 10px; background: rgba(117,202,232,.14); }

@media (max-width: 680px) {
  .online-panel > header { flex-direction: column; }
  .shop-wallet { text-align: left; }
  .account-summary { grid-template-columns: 1fr; }
  .nickname-form, .admin-editor-form { grid-template-columns: 1fr; }
  .nickname-form > *, .admin-editor-form > * { grid-column: 1; }
  .admin-product-row { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
}

.auth-choice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(8, 18, 24, 0.78);
  backdrop-filter: blur(5px);
}
.auth-choice-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - max(36px, env(safe-area-inset-top)) - max(36px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid rgba(164, 221, 151, 0.68);
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(180deg, #17342f 0%, #102720 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(255, 255, 255, 0.035);
  text-align: left;
}
.auth-choice-dialog.checkpoint-recovery-dialog {
  width: min(100%, 32rem);
  max-height: min(calc(100dvh - 2rem), 46rem);
}
.auth-choice-dialog h2 { margin: 8px 0 10px; font-size: clamp(24px, 5vw, 34px); line-height: 1.15; }
.auth-choice-dialog > p { margin: 0; color: #cfe1d5; line-height: 1.55; }
.auth-choice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 22px;
}
.auth-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 16px; }
.auth-choice-actions button { min-height: 54px; }
.run-resume-dialog > p + p { margin-top: 10px; }
.run-resume-dialog > small {
  display: block;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #efffcb;
  background: rgba(255, 255, 255, 0.055);
  line-height: 1.5;
}
.google-auth-action::before { content: 'G'; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: #fff; color: #234; font-family: sans-serif; font-weight: 800; }
.auth-choice-notes { display: grid; gap: 8px; }
.auth-choice-notes p { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.055); color: #c8ddd1; font-size: 14px; line-height: 1.5; }
.auth-choice-notes strong { color: #efffcb; }
@media (max-width: 520px) {
  .auth-choice-dialog { padding: 24px 18px 18px; border-radius: 20px; }
  .auth-choice-actions { grid-template-columns: 1fr; }
}


/* Character cards reuse the same procedural species art as gameplay. */
canvas.character-token {
  display: block;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  image-rendering: pixelated;
}


.practice-mode-banner { padding: .55rem .8rem; text-align: center; background: #7b3f00; color: #fff4d6; font-weight: 800; }
.ranking-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.ranking-mode-card { display: grid; gap: .65rem; padding: .75rem; border: 2px solid rgba(73, 112, 77, .35); border-radius: 14px; background: rgba(255,255,255,.78); }
.ranking-mode-card.is-selected { border-color: #2d7a46; box-shadow: 0 0 0 3px rgba(73, 157, 91, .2); background: #f3fff4; }
.ranking-card-select { display: grid; gap: .35rem; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.ranking-card-select strong { font-size: 1rem; }
.ranking-card-select span { font-size: .78rem; line-height: 1.45; }
.ranking-start-action:not(:disabled) { background: #2d7a46; color: #fff; }
.ranking-preparation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  overflow-y: auto;
  background: rgb(5 25 23 / 0.84);
  overscroll-behavior: contain;
}
.ranking-preparation-dialog {
  width: min(100%, 760px);
  max-height: calc(100dvh - max(2rem, env(safe-area-inset-top)) - max(2rem, env(safe-area-inset-bottom)));
  padding: clamp(1rem, 3vw, 1.5rem);
  overflow-y: auto;
  border: 4px solid var(--parchment-shadow);
  border-radius: 20px;
  color: var(--ink);
  background: var(--parchment);
  box-shadow: var(--shadow-panel), inset 0 0 0 2px rgb(255 249 225 / 0.5);
}
.ranking-preparation-dialog > header h2 { margin: .2rem 0 .35rem; }
.ranking-preparation-dialog > header p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.ranking-preparation-characters,
.ranking-preparation-equipment { display: grid; gap: .65rem; margin-top: 1rem; }
.ranking-preparation-characters h3,
.ranking-preparation-equipment h3 { margin: 0; }
.ranking-preparation-characters > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.ranking-character-option { display: flex; min-width: 0; align-items: center; gap: .55rem; padding: .55rem; border: 2px solid rgb(32 52 47 / .2); color: var(--ink); background: rgb(255 249 225 / .56); text-align: left; }
.ranking-character-option.is-selected { border-color: var(--moss); background: rgb(143 200 109 / .22); box-shadow: 0 0 0 2px rgb(50 99 72 / .12); }
.ranking-character-option span { display: grid; min-width: 0; }
.ranking-character-option small { color: var(--ink-soft); word-break: keep-all; overflow-wrap: break-word; }
.ranking-preparation-equipment > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ranking-preparation-equipment ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.ranking-preparation-equipment li { display: grid; min-width: 0; gap: .2rem; padding: .55rem; border-radius: 10px; background: rgb(255 249 225 / .62); word-break: keep-all; overflow-wrap: break-word; }
.ranking-preparation-equipment li > span,
.ranking-preparation-equipment li > small { color: var(--ink-soft); font-size: .72rem; }
.ranking-preparation-equipment li.is-empty,
.ranking-preparation-equipment li.is-locked { opacity: .72; }
.ranking-preparation-totals { display: flex; flex-wrap: wrap; gap: .4rem; }
.ranking-preparation-totals > span { padding: .35rem .55rem; border-radius: 999px; background: rgb(50 99 72 / .12); }
.ranking-preparation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1rem; }
.ranking-preparation-actions button { width: 100%; }
.ranking-equipment-return { position: sticky; top: .5rem; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 2px solid var(--leaf); border-radius: 14px; color: var(--ink); background: var(--parchment); box-shadow: 0 8px 20px rgb(4 25 23 / .2); }
.ranking-equipment-return span { display: grid; min-width: 0; }
.ranking-equipment-return small { color: var(--ink-soft); word-break: keep-all; overflow-wrap: break-word; }
:is(.ranking-character-option, .ranking-equipment-return button) { min-height: 44px; }
.guest-expiry-warning { margin: .8rem 0; padding: .75rem; border: 1px solid #c17c24; border-radius: 12px; background: #fff7e7; }
@media (max-width: 720px) { .ranking-mode-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ranking-preparation-equipment > header,
  .ranking-equipment-return { align-items: stretch; flex-direction: column; }
  .ranking-preparation-equipment ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-equipment-return button { width: 100%; }
}
@media (max-width: 430px) {
  .ranking-preparation-backdrop { place-items: end center; padding: .5rem max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); }
  .ranking-preparation-dialog { max-height: 92dvh; border-radius: 16px; }
  .ranking-preparation-characters > div,
  .ranking-preparation-actions { grid-template-columns: 1fr; }
}

.hub-brand-group{display:flex;align-items:center;gap:.55rem;min-width:0}.compact-profile{display:flex;align-items:center;gap:.45rem;max-width:15rem;padding:.22rem .52rem .22rem .25rem;border:1px solid rgba(78,119,91,.35);border-radius:999px;background:rgba(255,255,255,.78);color:inherit;box-shadow:0 2px 8px rgba(35,61,45,.08)}.compact-profile:hover,.compact-profile.is-open{border-color:#4f8f59;background:#fff}.compact-profile-art{position:relative;display:block;width:2.25rem;height:2.25rem;flex:none}.profile-image-layer,.compact-profile-art>.profile-solid{position:absolute;inset:.2rem;border-radius:50%;overflow:hidden;object-fit:cover;width:calc(100% - .4rem);height:calc(100% - .4rem);background:var(--profile-color,#4f8f59)}.profile-frame-layer{position:absolute;inset:-.18rem;width:calc(100% + .36rem);height:calc(100% + .36rem);object-fit:contain;pointer-events:none}.profile-badge-layer{position:absolute;right:-.12rem;bottom:-.12rem;width:.82rem;height:.82rem;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid rgba(45,73,53,.25);overflow:hidden}.profile-badge-layer>*{width:100%;height:100%;object-fit:cover}.compact-profile-copy{display:grid;min-width:0;text-align:left;line-height:1.05}.compact-profile-copy strong,.compact-profile-copy small,.compact-profile-copy em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-profile-copy strong{font-size:.82rem}.compact-profile-copy small,.compact-profile-copy em{font-size:.62rem;font-style:normal;color:#40564b}.profile-manager-panel{display:grid;gap:1rem}.profile-slot-section{display:grid;gap:.55rem}.profile-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.55rem}.profile-item-card{display:flex;align-items:center;gap:.55rem;min-height:3.4rem;padding:.45rem;border:1px solid rgba(72,105,79,.22);border-radius:.8rem;background:#fff;color:inherit;text-align:left}.profile-item-card.is-selected{border-color:#4f8f59;box-shadow:0 0 0 2px rgba(79,143,89,.18)}.profile-item-card>img,.profile-item-card>.profile-solid-swatch,.profile-item-card>.profile-item-glyph,.profile-item-card>.profile-empty-mark{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;display:grid;place-items:center;flex:none}.profile-solid-swatch{background:var(--profile-color,#4f8f59)}.profile-item-card span:last-child{display:grid}.profile-item-card small{color:#40564b}.profile-empty-mark{font-size:.7rem;background:#edf0ed}@media(max-width:620px){.compact-profile-copy small{display:none}.compact-profile{max-width:9rem}.hub-brand-group{gap:.25rem}.profile-item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Administrator profile asset studio */
.admin-profile-assets{display:grid;gap:.8rem}.profile-asset-form .admin-form-wide,.profile-pixel-editor,.profile-image-editor,.admin-profile-asset-list{grid-column:1/-1}.profile-pixel-editor,.profile-image-editor{display:grid;gap:.75rem;padding:.85rem;border:1px solid rgba(143,200,109,.35);border-radius:12px;background:rgba(255,255,255,.06)}.profile-pixel-editor[hidden],.profile-image-editor[hidden]{display:none}.profile-pixel-editor header,.profile-image-editor header{display:grid;gap:.2rem}.profile-pixel-editor header small,.profile-image-editor header small{color:#b9c9bd}.profile-pixel-tools,.profile-image-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.profile-pixel-tools label{display:flex;align-items:center;gap:.45rem}.profile-pixel-tools button.is-selected{box-shadow:0 0 0 2px #d7f5bf;background:#5f9f65;color:#fff}.profile-pixel-editor canvas{width:min(100%,320px);aspect-ratio:1;image-rendering:pixelated;touch-action:none;border:2px solid rgba(215,245,191,.7);border-radius:8px;background:linear-gradient(45deg,#dfe5df 25%,transparent 25%),linear-gradient(-45deg,#dfe5df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe5df 75%),linear-gradient(-45deg,transparent 75%,#dfe5df 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.profile-image-crop-stage{position:relative;width:min(100%,384px);aspect-ratio:1;overflow:hidden;margin-inline:auto;border-radius:12px;background:#172d28;touch-action:none}.profile-image-crop-stage canvas{display:block;width:100%;height:100%;touch-action:none}.profile-safe-circle{position:absolute;left:var(--safe-circle-x,0);top:var(--safe-circle-y,0);width:var(--safe-circle-size,100%);height:var(--safe-circle-size,100%);border:3px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.38);pointer-events:none}.profile-image-error{min-height:1.2em;color:#ffb6ad}.admin-profile-asset-list{display:grid;gap:.6rem;margin-top:.8rem}

/* Isolated administrator mode */
.admin-workshop-screen{min-height:100%;padding:clamp(.75rem,2vw,1.5rem);overflow:auto;background:linear-gradient(180deg,#102d28,#163d34);color:#f3f7f2}.admin-workshop-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;max-width:1180px;margin:0 auto 1rem;padding:1rem 1.2rem;border:1px solid rgba(215,245,191,.32);border-radius:16px;background:rgba(4,27,24,.72);box-shadow:0 12px 30px rgba(0,0,0,.18)}.admin-workshop-header h1{margin:.15rem 0}.admin-workshop-header p{margin:0;color:#c3d3c8}.admin-workshop-screen>.admin-panel{max-width:1180px;margin-inline:auto}.admin-mode-switch{border:1px solid #4f8f59;background:#eaf6e8;color:#285b32}.admin-panel button:not(:disabled){opacity:1;filter:none}.admin-panel button:disabled{background:#68736c!important;color:#d3d7d3!important;border-color:#68736c!important;cursor:not-allowed;opacity:.62}@media(max-width:620px){.admin-workshop-header{display:grid}.admin-workshop-header .primary-action{width:100%}}
.admin-data-section{display:grid;gap:.55rem;padding:.85rem;border:1px solid rgba(143,200,109,.28);border-radius:12px;background:rgba(15,48,43,.58)}.admin-data-row,.admin-review-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .75rem;border-radius:10px;background:rgba(255,255,255,.08)}.admin-data-row strong,.admin-data-row span,.admin-data-row small,.admin-review-row>div:first-child{min-width:0}.admin-data-row small{color:#bfd0c4}.admin-review-row>div{display:flex;flex-wrap:wrap;gap:.45rem}.admin-review-row>div:first-child{display:grid}.admin-review-row small{color:#bfd0c4}@media(max-width:620px){.admin-data-row,.admin-review-row{align-items:stretch;flex-direction:column}}
.admin-coupon-row strong{overflow-wrap:anywhere}

.admin-audit-detail{display:grid;min-width:0;gap:.8rem;padding:clamp(.75rem,2vw,1rem);border:2px solid rgba(240,220,85,.55);border-radius:12px;background:#173c35;box-shadow:0 12px 28px rgba(0,0,0,.22)}.admin-audit-detail>header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.admin-audit-detail h3,.admin-audit-detail dl,.admin-audit-detail dd{margin:0}.admin-audit-detail header small{color:#cbdccb}.admin-audit-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.admin-audit-detail dl>div{display:grid;min-width:0;gap:.15rem;padding:.55rem;border-radius:8px;background:rgba(255,255,255,.07)}.admin-audit-detail dt{color:#bfd0c4;font-size:.72rem}.admin-audit-detail dd{overflow-wrap:anywhere}.admin-audit-json-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;min-width:0}.admin-audit-json-grid details{min-width:0;padding:.55rem;border:1px solid rgba(143,200,109,.3);border-radius:9px;background:rgba(4,27,24,.45)}.admin-audit-json-grid summary{cursor:pointer;font-weight:700}.admin-audit-json-grid pre{max-width:100%;max-height:min(52vh,34rem);margin:.65rem 0 0;padding:.7rem;overflow:auto;border-radius:8px;background:#09231f;color:#edf6ec;font-family:"Limgul 12","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;font-size:.72rem;font-weight:600;line-height:1.55;white-space:pre;overscroll-behavior:contain}@media(max-width:620px){.admin-audit-detail>header,.admin-audit-detail dl,.admin-audit-json-grid{grid-template-columns:1fr}.admin-audit-detail>header{display:grid}.admin-audit-detail>header button{width:100%}}

.admin-local-preview{display:grid;gap:.65rem;padding:1rem;border:2px solid rgba(240,220,85,.55);border-radius:14px;background:rgba(32,63,48,.92)}.admin-local-preview header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.admin-local-preview h3,.admin-local-preview p{margin:0}.admin-local-preview small{color:#d9e7d8}.admin-preview-art{width:96px;height:96px;object-fit:contain;image-rendering:pixelated;border-radius:12px;background:rgba(255,255,255,.08)}.admin-form-error,.admin-upload-replace{grid-column:1/-1;margin:0;padding:.65rem .75rem;border-radius:9px}.admin-form-error{background:rgba(229,79,79,.2);color:#ffd5d5}.admin-upload-replace{background:rgba(240,220,85,.14);color:#fff4b0}.admin-price-schedule{display:flex!important;align-items:center;flex-wrap:wrap;gap:.45rem;margin-top:.35rem;padding:.4rem .5rem;border-radius:8px;background:rgba(255,255,255,.07);font-size:.78rem}.admin-price-schedule button{min-height:36px;padding:.3rem .55rem}.admin-confirm-dialog{border-color:#f0dc55}.admin-confirm-dialog .primary-action{background:#bd5547;color:#fff}

/* Compact expedition start and explicit sprout-choice confirmation */
.expedition-start-action {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.character-starting-stats {
  padding: 0.45rem 0.55rem;
  border-left-color: var(--gold, #c38b2a);
}

.character-starting-stats summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.character-starting-stats summary::-webkit-details-marker {
  display: none;
}

.character-starting-stats summary::after {
  content: '＋';
  flex: 0 0 auto;
  color: var(--moss);
  font-size: 1rem;
}

.character-starting-stats[open] summary::after {
  content: '－';
}

.character-starting-stats summary small {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
}

.choice-new-mechanic {
  color: #b92f2f;
  font-weight: 800;
}

.choice-mobile-layout {
  display: none;
}

@media (max-width: 620px) and (orientation: portrait) {
  .choice-desktop-grid {
    display: none;
  }

  .choice-mobile-layout {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.65rem;
  }

  .choice-mobile-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .choice-mobile-row {
    display: grid;
    min-width: 0;
    min-height: 64px;
    place-items: center;
    gap: 0.25rem;
    padding: 0.45rem 0.25rem;
    color: var(--ink);
    border: 2px solid rgb(58 73 57 / 0.28);
    background: #fff3d5;
    text-align: center;
  }

  .choice-mobile-row.is-selected {
    border-color: var(--coral);
    background: #ffe3bd;
    box-shadow: inset 0 -4px 0 rgb(216 111 90 / 0.2);
  }

  .choice-mobile-row .choice-icon {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
  }

  .choice-mobile-row span {
    width: 100%;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .choice-mobile-detail,
  .choice-mobile-placeholder {
    min-height: 150px;
    padding: 0.7rem;
    color: var(--ink);
    border: 2px solid var(--moss);
    border-radius: var(--radius);
    background: #fff8e6;
  }

  .choice-mobile-placeholder {
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    text-align: center;
  }

  .choice-mobile-detail header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .choice-mobile-detail header .choice-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    image-rendering: pixelated;
  }

  .choice-mobile-detail header div {
    display: grid;
    gap: 0.12rem;
  }

  .choice-mobile-detail header strong,
  .choice-mobile-detail header small {
    display: block;
  }

  .choice-mobile-detail .choice-description,
  .choice-mobile-detail .choice-recipe,
  .choice-mobile-detail .choice-changes {
    margin-top: 0.45rem;
    font-size: 0.72rem;
  }

  .choice-confirm-action {
    width: 100%;
    margin-top: 0.65rem;
  }
}


.joystick-mode-setting {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem;
  color: var(--ink);
  border: 1px solid rgb(32 52 47 / 0.2);
  border-radius: 10px;
}

.joystick-mode-setting legend {
  padding: 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.joystick-mode-setting > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.joystick-mode-setting button[aria-pressed="true"] {
  color: #fff8dd;
  border-color: var(--moss);
  background: var(--moss);
}

.joystick-mode-setting small {
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.4;
}

.online-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.online-status > span {
  flex: 1 1 260px;
}

.online-status > small {
  color: inherit;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.online-status > button {
  min-height: 38px;
  padding: 7px 12px;
  color: var(--ink);
  border: 2px solid var(--parchment-shadow);
  background: var(--parchment);
}

.pause-settings { display: grid; gap: .7rem; margin: 1rem 0; padding: .8rem; border-radius: 12px; background: rgb(32 52 47 / .1); text-align: left; }
.pause-settings label { display: grid; gap: .35rem; color: var(--ink); font-weight: 700; }
.pause-joystick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.pause-joystick-actions button[aria-pressed="true"] { color: #fff8dd; background: var(--moss); }
.run-skill-status[data-tooltip-id] { cursor: help; pointer-events: auto; }

.studio-selected-character { margin:.15rem 0 .55rem; color:var(--leaf-pale); font-size:.76rem; }
.studio-character-picker-dialog {
  position: fixed;
  inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  z-index: 96;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid rgba(164,221,151,.72);
  border-radius: 20px;
  color: #eff8ee;
  background: linear-gradient(180deg,#17342f 0%,#102720 100%);
  box-shadow: 0 0 0 100vmax rgba(8,18,24,.78),0 24px 70px rgba(0,0,0,.45);
}
.studio-character-picker-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.studio-character-picker-dialog h3,.studio-character-picker-dialog p { margin:0; }
.studio-character-picker-dialog header p { margin-top:4px; color:#cfe1d5; line-height:1.45; }
.studio-character-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.65rem; }
.studio-character-choice { display:grid; place-items:center; gap:.2rem; min-height:82px; padding:.45rem; color:var(--mist); background:var(--night-700); border:2px solid transparent; }
.studio-character-choice.is-selected { border-color:var(--leaf-pale); background:var(--moss); }
.studio-character-choice.is-locked { opacity:.75; }
.studio-character-choice small { color:#cfe1d5; font-size:.68rem; }
.appearance-code p { margin:0; color:var(--leaf-pale); font-size:.68rem; line-height:1.55; }
.appearance-code-message { padding:.45rem; border-left:3px solid var(--leaf); background:rgb(6 28 27 / .32); }
.appearance-code-help { opacity:.9; }
.admin-nav button:not(:disabled) { color:#fff8dd; background:var(--moss); border:1px solid var(--leaf); box-shadow:0 3px 0 var(--night-950); }
.admin-nav button:not(:disabled):hover,.admin-nav button.is-active { color:var(--ink); background:var(--leaf-pale); }
.admin-panel [id^="admin-"] { scroll-margin-top:1rem; }

/* Online record choice, weekly character chooser, and account controls */
.weekly-character-picker {
  position: fixed;
  inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  z-index: 92;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid rgba(164, 221, 151, 0.72);
  border-radius: 20px;
  color: #eff8ee;
  background: linear-gradient(180deg, #17342f 0%, #102720 100%);
  box-shadow: 0 0 0 100vmax rgba(8, 18, 24, 0.78), 0 24px 70px rgba(0, 0, 0, 0.45);
}
.weekly-character-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.weekly-character-picker h3, .weekly-character-picker p { margin: 0; }
.weekly-character-picker header p { margin-top: 4px; color: #cfe1d5; line-height: 1.45; }
.weekly-character-picker > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.weekly-character-picker > div > button { display: grid; gap: 4px; min-height: 72px; padding: 12px; text-align: left; }
.weekly-character-picker > div > button small { line-height: 1.4; }
.identity-record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 14px; }
.identity-record-actions button { min-height: 54px; }
.identity-conflict-dialog > small { display: block; color: #c8ddd1; line-height: 1.5; }
.settings-sign-out { width: 100%; margin-top: .75rem; border-color: #a24444; background: #7f3333; color: #fff5f1; }
@media (max-width: 520px) {
  .weekly-character-picker { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  .weekly-character-picker > header { display: grid; }
  .weekly-character-picker > header > button { justify-self: end; }
  .weekly-character-picker > div, .identity-record-actions { grid-template-columns: 1fr; }
  .studio-character-picker-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:16px; }
  .studio-character-picker-dialog > header { display:grid; }
  .studio-character-picker-dialog > header > button { justify-self:end; }
  .studio-character-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .appearance-code-actions { grid-template-columns:1fr; }
  .appearance-code textarea { min-height:136px; font-size:.72rem; }
}

/* Turnstile must float above the title/login dialog instead of extending the page. */
body.turnstile-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.turnstile-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(5, 15, 19, 0.82);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.turnstile-overlay > section {
  width: min(430px, 100%);
  max-height: calc(100dvh - max(36px, env(safe-area-inset-top)) - max(36px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 5vw, 30px);
  border: 2px solid rgba(164, 221, 151, 0.72);
  border-radius: 22px;
  color: #eef8ef;
  background: linear-gradient(180deg, #17342f 0%, #102720 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  text-align: center;
}

.turnstile-overlay > section h1 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
}

.turnstile-overlay > section p {
  margin: 0 0 18px;
  color: #cfe1d5;
  line-height: 1.5;
}

.turnstile-overlay [data-turnstile-container] {
  display: grid;
  min-height: 65px;
  place-items: center;
  overflow-x: auto;
}

/* Ranking identity is the exact profile/honor appearance captured with the score. */
.ranking-profile {
  display: flex;
  min-width: 10rem;
  align-items: center;
  gap: 0.55rem;
}

.ranking-profile .compact-profile-art {
  width: 2.6rem;
  height: 2.6rem;
}

.ranking-profile-copy {
  display: grid;
  min-width: 0;
  line-height: 1.08;
}

.ranking-profile-copy strong,
.ranking-profile-copy small,
.ranking-profile-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-profile-copy small {
  color: #bfe2c1;
  font-size: 0.68rem;
}

.ranking-profile-copy strong {
  color: #fff;
  font-size: 0.9rem;
}

.ranking-profile-copy em {
  color: #f0dc55;
  font-size: 0.68rem;
  font-style: normal;
}

.profile-pixel-visual {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Guest consent and profile manager are true centered overlays on mobile. */
.guest-consent-backdrop {
  z-index: 94;
}

.guest-consent-dialog {
  width: min(460px, 100%);
  text-align: center;
}

.guest-consent-dialog h3 {
  margin: 0 0 .7rem;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
}

.profile-manager-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(8, 18, 24, .8);
  backdrop-filter: blur(5px);
}

.profile-manager-dialog {
  width: min(760px, 100%);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid rgba(164, 221, 151, .72);
  border-radius: 20px;
  background: linear-gradient(180deg, #17342f 0%, #102720 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

.profile-manager-dialog > .profile-manager-panel {
  min-height: 0;
  margin: 0;
}

.studio-character-choice .character-token {
  width: 48px;
  height: 48px;
}

#game-stage:has(.run-screen) {
  touch-action: none;
  overscroll-behavior: none;
}

@media (max-width: 520px) {
  .profile-manager-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 16px;
  }

  .profile-manager-dialog .profile-item-grid {
    grid-template-columns: 1fr;
  }

  .profile-manager-dialog .online-panel > header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}


/* Keep solid profile swatches bounded inside their own cards on every viewport. */
.profile-item-card > .profile-solid {
  position: static;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--profile-color, #4f8f59);
}


.coupon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(57, 101, 72, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
}
.coupon-form label { display: grid; gap: 6px; min-width: 0; }
.coupon-form input { width: 100%; }
.coupon-form small { grid-column: 1 / -1; }
.coupon-success { margin-top: 8px; }
@media (max-width: 560px) {
  .coupon-form { grid-template-columns: 1fr; }
  .coupon-form button, .coupon-form small { grid-column: 1; }
}

/* Stage selector and expandable equipment bag */
.stage-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(108px, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
}
.stage-choice {
  min-height: 62px;
  padding: 9px 8px;
  border: 2px solid rgba(75, 112, 72, .28);
  border-radius: 14px;
  background: rgba(250, 247, 224, .72);
  color: var(--ink, #304034);
  display: grid;
  gap: 4px;
  text-align: left;
}
.stage-choice strong { font-size: .86rem; }
.stage-choice small { font-size: .66rem; opacity: .75; line-height: 1.25; }
.stage-choice.is-selected {
  border-color: #78a95b;
  background: linear-gradient(145deg, #edf6d8, #fff8d8);
  box-shadow: 0 0 0 3px rgba(120, 169, 91, .15);
}
.stage-choice.is-locked { filter: grayscale(.8); opacity: .58; }

.equipment-bag-layout { padding-bottom: 30px; }
.equipment-bag-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.equipment-bag-heading > strong {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(128, 91, 151, .35);
  border-radius: 999px;
  background: rgba(181, 107, 215, .09);
  color: #724886;
}
.equipment-bag-main {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(420px, 1.22fr);
  gap: 18px;
  align-items: start;
}
.equipment-loadout-panel,
.equipment-inventory-panel {
  border: 1px solid rgba(61, 83, 62, .18);
  border-radius: 22px;
  background: rgba(255, 252, 232, .72);
  box-shadow: 0 12px 32px rgba(36, 49, 38, .08);
}
.equipment-loadout-panel { padding: 18px; }
.equipment-inventory-panel { padding: 16px; min-height: 610px; }
.equipment-pentagon {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  border-radius: 45%;
  background:
    radial-gradient(circle, rgba(255,255,255,.86) 0 29%, transparent 30%),
    radial-gradient(circle, rgba(120,169,91,.09) 0 58%, transparent 59%);
}
.equipment-pentagon::before {
  content: '';
  position: absolute;
  inset: 18%;
  clip-path: polygon(50% 0%, 97% 35%, 79% 91%, 21% 91%, 3% 35%);
  border: 2px solid rgba(120, 169, 91, .28);
  background: rgba(255,255,255,.18);
}
.equipment-character-preview {
  position: absolute;
  width: 112px;
  height: 112px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  z-index: 2;
}
.equipment-slot {
  position: absolute;
  width: 86px;
  min-height: 76px;
  padding: 7px;
  border: 2px solid rgba(89, 109, 83, .35);
  border-radius: 18px;
  background: #fffceb;
  display: grid;
  place-items: center;
  gap: 2px;
  z-index: 3;
  box-shadow: 0 6px 14px rgba(41, 53, 43, .1);
}
.equipment-slot > span { font-size: 1.55rem; line-height: 1; }
.equipment-slot > strong { position: absolute; top: 5px; right: 7px; font-size: .7rem; }
.equipment-slot > small { font-size: .62rem; line-height: 1.15; }
.equipment-slot.slot-1 { top: 1%; left: 50%; transform: translateX(-50%); }
.equipment-slot.slot-2 { top: 30%; right: 0; }
.equipment-slot.slot-3 { bottom: 3%; right: 11%; }
.equipment-slot.slot-4 { bottom: 3%; left: 11%; }
.equipment-slot.slot-5 { top: 30%; left: 0; }
.equipment-slot.is-locked { border-style: dashed; opacity: .65; }
.equipment-slot.is-empty { background: rgba(255,255,255,.45); }
.equipment-slot.rarity-common,
.equipment-item-card.rarity-common,
.equipment-detail.rarity-common { --rarity-color: #9aa5a8; }
.equipment-slot.rarity-rare,
.equipment-item-card.rarity-rare,
.equipment-detail.rarity-rare { --rarity-color: #4e8bd7; }
.equipment-slot.rarity-unique,
.equipment-item-card.rarity-unique,
.equipment-detail.rarity-unique { --rarity-color: #b56bd7; }
.equipment-slot[class*="rarity-"] { border-color: var(--rarity-color); }
.equipment-total-stats {
  border-radius: 16px;
  background: rgba(75, 105, 67, .07);
  padding: 12px;
  margin: 10px 0;
}
.equipment-total-stats h3 { margin: 0 0 8px; font-size: .88rem; }
.equipment-total-stats span { display: flex; justify-content: space-between; gap: 12px; font-size: .76rem; padding: 3px 0; }
.equipment-slot-unlock { width: 100%; margin: 8px 0 14px; }
.equipment-slots-complete { text-align: center; font-size: .74rem; opacity: .72; }
.equipment-detail {
  border: 2px solid var(--rarity-color, rgba(75, 105, 67, .2));
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.62);
}
.equipment-detail header { display: flex; align-items: center; gap: 10px; }
.equipment-detail header h3 { margin: 2px 0 0; }
.equipment-detail-icon { font-size: 2rem; }
.equipment-detail ul { margin: 12px 0; padding: 0; list-style: none; }
.equipment-detail li { display: flex; justify-content: space-between; padding: 4px 0; font-size: .8rem; }
.equipment-detail-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; border-top: 1px solid rgba(50,60,50,.1); padding-top: 9px; }
.equipment-equip-slots,
.equipment-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.equipment-equip-slots button,
.equipment-detail-actions button { flex: 1 1 auto; min-width: 90px; }
.equipment-inventory-tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.equipment-inventory-tools label { display: grid; gap: 4px; font-size: .68rem; }
.equipment-inventory-tools select { width: 100%; min-width: 0; padding: 8px 6px; border-radius: 10px; }
.equipment-inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-content: start;
  max-height: 610px;
  overflow: auto;
  padding: 2px;
}
.equipment-item-card {
  position: relative;
  min-height: 100px;
  border: 2px solid color-mix(in srgb, var(--rarity-color) 65%, transparent);
  border-radius: 15px;
  padding: 11px 8px;
  background: rgba(255,255,255,.68);
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 7px;
  align-items: center;
  text-align: left;
}
.equipment-item-card.is-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rarity-color) 22%, transparent); border-color: var(--rarity-color); }
.equipment-item-card > b { position: absolute; top: 5px; right: 6px; font-size: .65rem; }
.equipment-item-card > em { position: absolute; right: 7px; bottom: 5px; font-size: .55rem; color: #4f7749; }
.equipment-item-icon { font-size: 1.45rem; text-align: center; }
.equipment-item-card strong { display: block; font-size: .75rem; }
.equipment-item-card small { display: block; margin-top: 3px; font-size: .58rem; line-height: 1.3; opacity: .75; }
.equipment-inventory-empty { grid-column: 1/-1; text-align: center; padding: 60px 10px; opacity: .65; }
.equipment-inbox-badge { display: inline-grid; min-width: 1.35rem; min-height: 1.35rem; margin-left: .35rem; padding: 0 .3rem; place-items: center; border-radius: 999px; color: #fff; background: var(--coral); font-size: .68rem; line-height: 1; }
.equipment-inbox { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px; border: 1px solid rgb(78 119 73 / .24); border-radius: 18px; color: var(--ink); background: rgb(255 255 255 / .66); }
.equipment-inbox > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.equipment-inbox h3 { margin: 2px 0 0; }
.equipment-inbox-full-guide { margin: 0; color: #8b3d32; font-weight: 700; }
.equipment-inbox-status { min-height: 1.2em; margin: 0; color: #38634b; font-size: .78rem; }
.equipment-inbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 320px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.equipment-inbox-card, .equipment-cleanup-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid rgb(50 60 50 / .14); border-radius: 13px; background: rgb(255 255 255 / .76); }
.equipment-inbox-card strong, .equipment-inbox-card small, .equipment-cleanup-card strong, .equipment-cleanup-card small { display: block; }
.equipment-inbox-card small, .equipment-cleanup-card small { margin-top: 3px; color: var(--ink-muted); font-size: .68rem; line-height: 1.35; }
.equipment-inbox-claim, .equipment-inbox-claim-all { min-height: 44px; }
.equipment-inbox-empty { grid-column: 1/-1; margin: 0; padding: 24px 8px; color: var(--ink-muted); text-align: center; }
.equipment-locked-cleanup { display: grid; gap: 16px; }
.equipment-locked-cleanup > header { text-align: center; }
.equipment-cleanup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; }

@media (max-width: 960px) {
  .stage-selector { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .equipment-bag-main { grid-template-columns: 1fr; }
  .equipment-inventory-panel { min-height: auto; }
  .equipment-inventory-grid { max-height: 540px; }
}
@media (max-width: 640px) {
  .stage-selector { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .stage-choice { min-width: 136px; }
  .equipment-bag-heading { display: grid; }
  .equipment-loadout-panel, .equipment-inventory-panel { padding: 11px; border-radius: 17px; }
  .equipment-pentagon { width: min(100%, 330px); }
  .equipment-slot { width: 72px; min-height: 66px; border-radius: 14px; }
  .equipment-character-preview { width: 92px; height: 92px; }
  .equipment-inventory-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .equipment-item-card { min-height: 92px; }
}
@media (max-width: 620px) {
  .equipment-inbox > header { align-items: stretch; flex-direction: column; }
  .equipment-inbox-list { grid-template-columns: 1fr; max-height: 52vh; }
  .equipment-inbox-card, .equipment-cleanup-card { grid-template-columns: 36px minmax(0, 1fr); }
  .equipment-inbox-card > button, .equipment-cleanup-card > button { grid-column: 1/-1; width: 100%; }
}

.result-stage-unlock,
.result-equipment-unlock,
.result-equipment-drops {
  width: min(100%, 560px);
  margin: 12px auto 0;
  padding: 12px;
  border: 2px solid rgba(70, 99, 67, 0.28);
  border-radius: 16px;
  background: rgba(255, 252, 230, 0.9);
  box-sizing: border-box;
}
.result-equipment-unlock { display: grid; gap: 4px; }
.result-equipment-drops header { display: grid; gap: 3px; margin-bottom: 9px; }
.result-equipment-drops > div { display: grid; gap: 7px; }
.result-equipment-drops article { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.78); }
.result-equipment-drops article > span { display: grid; gap: 2px; }
.result-equipment-storage-badge { padding: 4px 7px; border-radius: 999px; color: #fff; background: #4f7749; font-size: .66rem; font-style: normal; white-space: nowrap; }
.result-equipment-drops article.is-rare { box-shadow: inset 4px 0 #4e8bd7; }
.result-equipment-drops article.is-unique { box-shadow: inset 4px 0 #b56bd7; }
.ranking-balance-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ranking-balance-picker button { border: 1px solid rgba(57,88,61,.3); border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.72); }
.ranking-balance-picker button[aria-pressed="true"] { background: #385f43; color: #fff; }

/* World command center, mobile-first stage map, and locked equipment vault */
.expedition-command {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.85rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--world-accent) 46%, transparent);
  background:
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--world-glow) 24%, transparent), transparent 26%),
    linear-gradient(145deg, color-mix(in srgb, var(--world-deep) 96%, #071815), color-mix(in srgb, var(--world-base) 92%, #132c27));
  color: #fff9df;
  box-shadow: 0 20px 55px rgb(4 20 20 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.04);
}

.expedition-command::before,
.expedition-command::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.expedition-command::before {
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(30deg, transparent 48%, color-mix(in srgb, var(--world-accent) 40%, transparent) 49%, transparent 51%),
    linear-gradient(-30deg, transparent 48%, color-mix(in srgb, var(--world-glow) 22%, transparent) 49%, transparent 51%);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.expedition-command::after {
  width: min(38vw, 430px);
  aspect-ratio: 1;
  right: -12%;
  bottom: -35%;
  border: 1px solid color-mix(in srgb, var(--world-accent) 35%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 80px color-mix(in srgb, var(--world-accent) 24%, transparent), inset 0 0 70px color-mix(in srgb, var(--world-deep) 70%, transparent);
}

.expedition-world-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 18px;
  background: linear-gradient(110deg, rgb(4 20 20 / 0.64), color-mix(in srgb, var(--world-ground) 58%, transparent));
  box-shadow: inset 0 1px rgb(255 255 255 / 0.08);
}

.world-hero-copy { min-width: 0; }
.world-hero-copy h2 {
  margin: 0.15rem 0 0.25rem;
  color: var(--world-glow);
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  letter-spacing: -0.04em;
}
.world-hero-copy p {
  max-width: 72ch;
  margin: 0;
  color: rgb(255 249 225 / 0.78);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.world-hero-emblem {
  display: grid;
  width: clamp(66px, 9vw, 96px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--world-glow) 56%, transparent);
  border-radius: 50%;
  color: var(--world-deep);
  background: radial-gradient(circle at 35% 28%, #fff9dc, var(--world-glow) 38%, var(--world-accent) 72%);
  box-shadow: 0 0 38px color-mix(in srgb, var(--world-glow) 28%, transparent), inset 0 -7px 15px rgb(0 0 0 / 0.18);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  font-weight: 800;
}

.world-navigator {
  display: grid;
  grid-template-columns: repeat(5, minmax(142px, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
  overflow-x: auto;
  padding: 0.15rem 0.05rem 0.55rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.world-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 106px;
  gap: 0.15rem;
  align-content: end;
  padding: 0.7rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--world-accent) 42%, transparent);
  border-radius: 15px;
  text-align: left;
  color: #fff8df;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--world-glow) 30%, transparent), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--world-base) 86%, #091513), color-mix(in srgb, var(--world-base) 52%, #0c1717));
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.18), inset 0 1px rgb(255 255 255 / 0.05);
  scroll-snap-align: center;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.world-card:hover,
.world-card:focus-visible { transform: translateY(-2px); border-color: var(--world-glow); }
.world-card.is-selected {
  border-color: var(--world-glow);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--world-glow) 20%, transparent), 0 12px 28px color-mix(in srgb, var(--world-base) 60%, #000);
}
.world-card.is-locked { filter: saturate(0.58); opacity: 0.72; }
.world-card .world-number { color: var(--world-glow); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.12em; }
.world-card strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.world-card small { overflow: hidden; color: rgb(255 249 225 / 0.66); font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; }
.world-card em { position: absolute; top: 0.55rem; right: 0.55rem; padding: 0.17rem 0.38rem; border-radius: 999px; color: var(--world-deep); background: var(--world-glow); font-size: 0.63rem; font-style: normal; font-weight: 800; }

.expedition-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr);
  gap: 0.85rem;
  margin-top: 0.45rem;
}
.world-map-panel,
.expedition-loadout-panel {
  min-width: 0;
  padding: clamp(0.75rem, 1.6vw, 1rem);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 17px;
  background: rgb(3 18 18 / 0.58);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.05);
}
.world-map-panel > header,
.expedition-loadout-panel > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.world-map-panel > header h3,
.expedition-loadout-panel > header h3 { margin: 0.05rem 0 0; color: var(--world-glow); }
.world-map-panel > header span,
.expedition-loadout-panel > header span { color: rgb(255 249 225 / 0.58); font-size: 0.64rem; letter-spacing: 0.12em; }

.world-stage-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  min-width: 0;
}
.world-stage-route::before {
  position: absolute;
  z-index: 0;
  top: 28px;
  right: 7%;
  left: 7%;
  height: 3px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--world-accent) 45%, transparent), var(--world-glow), color-mix(in srgb, var(--world-danger) 48%, transparent));
  opacity: 0.5;
}
.stage-route-node {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 0.28rem;
  justify-items: center;
  padding: 0.25rem 0.25rem 0.65rem;
  border: 0;
  color: #fff9df;
  background: transparent;
  text-align: center;
}
.stage-route-node > span {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--world-accent) 65%, #fff);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--world-glow) 30%, #fff), var(--world-ground) 48%, var(--world-deep));
  box-shadow: 0 5px 14px rgb(0 0 0 / 0.32);
  font-size: 1rem;
  font-weight: 800;
}
.stage-route-node strong,
.stage-route-node small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-route-node strong { font-size: 0.78rem; }
.stage-route-node small { color: rgb(255 249 225 / 0.56); font-size: 0.61rem; }
.stage-route-node.is-selected > span { border-color: #fff8d3; box-shadow: 0 0 0 4px color-mix(in srgb, var(--world-glow) 24%, transparent), 0 7px 18px rgb(0 0 0 / 0.38); transform: translateY(-3px); }
.stage-route-node.is-locked { opacity: 0.43; }

.stage-briefing {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.8rem;
  padding: 0.8rem;
  border-left: 4px solid var(--world-accent);
  border-radius: 8px 14px 14px 8px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--world-ground) 62%, transparent), rgb(255 255 255 / 0.035));
}
.stage-briefing > span { color: var(--world-glow); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; }
.stage-briefing h3 { margin: 0; }
.stage-briefing p { margin: 0; color: rgb(255 249 225 / 0.75); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.stage-briefing > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.stage-briefing small { padding: 0.25rem 0.44rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 999px; color: rgb(255 249 225 / 0.72); background: rgb(0 0 0 / 0.16); }

.character-detail-toggle {
  flex: none;
  padding: 0.38rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--world-accent) 55%, transparent);
  border-radius: 999px;
  color: #fff8df;
  background: rgb(0 0 0 / 0.18);
}
.character-deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, 0.28fr);
  gap: 0.48rem;
  min-width: 0;
  overflow-x: auto;
  padding: 0.12rem 0 0.45rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.character-deck-card {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
  justify-items: center;
  padding: 0.45rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 12px;
  color: #fff9df;
  background: rgb(255 255 255 / 0.045);
  scroll-snap-align: center;
}
.character-deck-card canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.character-deck-card > span { display: grid; min-width: 0; width: 100%; gap: 0.06rem; text-align: center; }
.character-deck-card strong,
.character-deck-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-deck-card small { color: rgb(255 249 225 / 0.58); font-size: 0.64rem; }
.character-deck-card.is-selected { border-color: var(--world-glow); background: color-mix(in srgb, var(--world-accent) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--world-glow) 25%, transparent); }
.character-deck-card.is-locked { opacity: 0.52; filter: saturate(0.5); }

.selected-character-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  margin-top: 0.55rem;
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--world-accent) 35%, transparent);
  border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--world-ground) 52%, transparent), rgb(0 0 0 / 0.18));
}
.selected-character-card canvas { width: 78px; height: 78px; image-rendering: pixelated; }
.selected-character-card > div { min-width: 0; }
.selected-character-card span { color: var(--world-glow); font-size: 0.68rem; font-weight: 800; }
.selected-character-card h3 { margin: 0.05rem 0 0.16rem; }
.selected-character-card p,
.selected-character-card small { display: block; margin: 0; word-break: keep-all; overflow-wrap: break-word; line-height: 1.35; }
.selected-character-card p { color: rgb(255 249 225 / 0.78); font-size: 0.77rem; }
.selected-character-card small { margin-top: 0.2rem; color: rgb(255 249 225 / 0.54); }
.character-kit.compact { display: grid; gap: 0.36rem; margin-top: 0.5rem; }
.character-kit.compact > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0.45rem; min-width: 0; padding: 0.42rem 0.52rem; border-radius: 9px; background: rgb(255 255 255 / 0.035); }
.character-kit.compact span { color: rgb(255 249 225 / 0.56); font-size: 0.68rem; }
.character-kit.compact strong { min-width: 0; word-break: keep-all; overflow-wrap: break-word; color: #fff9df; font-size: 0.74rem; }
.character-details { min-width: 0; margin-top: 0.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 10px; overflow: hidden; }
.character-details > summary { padding: 0.6rem; color: var(--world-glow); cursor: pointer; font-size: 0.75rem; font-weight: 800; }
.character-detail-copy { display: grid; gap: 0.35rem; padding: 0 0.55rem 0.35rem; }
.character-detail-copy p { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.4rem; margin: 0; font-size: 0.72rem; }
.character-detail-copy span { color: rgb(255 249 225 / 0.56); }
.character-detail-copy strong { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.character-starting-stats { min-width: 0; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 10px; overflow: hidden; }
.character-starting-stats summary { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.55rem; cursor: pointer; }
.character-starting-stats dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgb(255 255 255 / 0.08); }
.character-starting-stats dl > div { display: flex; justify-content: space-between; gap: 0.4rem; min-width: 0; padding: 0.45rem; background: var(--world-deep); }
.character-starting-stats dt,
.character-starting-stats dd {
  min-width: 0;
  margin: 0;
  font-size: 0.67rem;
  word-break: keep-all;
  overflow-wrap: normal;
}

.character-starting-stats dd {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.expedition-sticky-action {
  position: sticky;
  z-index: 4;
  bottom: max(0.35rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--world-glow) 30%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--world-deep) 92%, transparent);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.38), inset 0 1px rgb(255 255 255 / 0.07);
  backdrop-filter: blur(12px);
}
.expedition-sticky-action > div { display: grid; min-width: 0; }
.expedition-sticky-action span,
.expedition-sticky-action strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expedition-sticky-action span { color: var(--world-glow); font-size: 0.67rem; }
.expedition-start-action { width: auto; max-width: none; min-width: 0; margin: 0; flex: none; }

.equipment-bag-locked,
.equipment-locked-vault {
  display: grid;
  max-width: 760px;
  min-height: 360px;
  place-items: center;
  margin-inline: auto;
  padding: clamp(1rem, 5vw, 2rem);
  border: 1px solid rgb(73 109 86 / 0.25);
  border-radius: 22px;
  text-align: center;
  background: radial-gradient(circle at 50% 20%, rgb(143 202 104 / 0.2), transparent 33%), linear-gradient(145deg, #eff0ce, #ded7ad);
  box-shadow: 0 16px 40px rgb(39 56 45 / 0.17), inset 0 0 0 2px rgb(255 255 255 / 0.4);
}
.equipment-bag-locked > div,
.equipment-locked-vault > div { display: grid; justify-items: center; gap: 0.62rem; }
.equipment-bag-locked .vault-lock,
.equipment-locked-vault .vault-lock { display: grid; width: 82px; aspect-ratio: 1; place-items: center; border-radius: 28px; color: #fff7d7; background: linear-gradient(145deg, #31513f, #173b35); box-shadow: 0 10px 20px rgb(23 59 53 / 0.25); font-size: 2rem; }

.run-hud-wave {
  color: #fff4c1;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.45), 0 0 12px rgb(255 224 122 / 0.45);
  letter-spacing: 0.06em;
}
.run-wave-announcement {
  position: fixed;
  z-index: 35;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: min(290px, calc(100vw - 32px));
  gap: 0.18rem;
  justify-items: center;
  padding: 0.72rem 1.25rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgb(255 242 176 / 0.55);
  border-radius: 14px;
  color: #fff7d4;
  background: linear-gradient(110deg, rgb(4 25 23 / 0.94), rgb(61 37 66 / 0.92));
  box-shadow: 0 14px 50px rgb(0 0 0 / 0.52), 0 0 35px rgb(218 172 96 / 0.24);
  pointer-events: none;
  animation: waveAnnouncement 1.25s ease both;
}
.run-wave-announcement strong { font-size: clamp(1.4rem, 5vw, 2.2rem); letter-spacing: 0.12em; }
.run-wave-announcement span { color: rgb(255 247 212 / 0.72); font-size: 0.76rem; }
@keyframes waveAnnouncement {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(0.9); }
  17%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.03); }
}

@media (max-width: 900px) {
  .expedition-command-grid { grid-template-columns: minmax(0, 1fr); }
  .world-navigator { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(155px, 56vw); }
  .character-deck { grid-auto-columns: minmax(82px, 24vw); }
}

@media (max-width: 600px) and (orientation: portrait) {
  .hub-screen { overflow-x: clip; }
  .hub-section.expedition-command { width: auto; max-width: none; margin-inline: 0.35rem; padding: 0.62rem; border-radius: 16px; }
  .expedition-world-hero { grid-template-columns: minmax(0, 1fr) 54px; gap: 0.5rem; padding: 0.68rem; border-radius: 14px; }
  .world-hero-copy .studio-kicker { font-size: 0.6rem; }
  .world-hero-copy h2 { font-size: 1.45rem; }
  .world-hero-copy p { display: -webkit-box; overflow: hidden; font-size: 0.72rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .world-hero-emblem { width: 52px; font-size: 1.25rem; }
  .world-navigator { grid-auto-columns: minmax(140px, 67vw); gap: 0.45rem; margin-top: 0.55rem; }
  .world-card { min-height: 91px; padding: 0.58rem; }
  .expedition-command-grid { gap: 0.55rem; }
  .world-map-panel,
  .expedition-loadout-panel { padding: 0.62rem; border-radius: 14px; }
  .world-stage-route { grid-template-columns: repeat(5, minmax(62px, 1fr)); gap: 0.25rem; overflow-x: auto; padding: 0.12rem 0.05rem 0.45rem; scroll-snap-type: x mandatory; }
  .world-stage-route::before { right: 30px; left: 30px; }
  .stage-route-node { min-width: 62px; scroll-snap-align: center; }
  .stage-route-node > span { width: 45px; }
  .stage-route-node strong { font-size: 0.66rem; }
  .stage-route-node small { display: none; }
  .stage-briefing { margin-top: 0.4rem; padding: 0.65rem; }
  .stage-briefing p { font-size: 0.73rem; }
  .stage-briefing > div { display: grid; grid-template-columns: 1fr; }
  .stage-briefing small { border-radius: 8px; }
  .character-deck { grid-auto-columns: 76px; gap: 0.38rem; }
  .character-deck-card { padding: 0.34rem; }
  .selected-character-card { grid-template-columns: 64px minmax(0, 1fr); padding: 0.56rem; }
  .selected-character-card canvas { width: 58px; height: 58px; }
  .selected-character-card p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .selected-character-card small { display: block; }
  .character-kit.compact > div { grid-template-columns: 70px minmax(0, 1fr); }
  .character-kit.compact .character-skill { display: grid; }
  .character-starting-stats dl { grid-template-columns: 1fr; max-height: 44vh; overflow-y: auto; }
  .expedition-sticky-action { bottom: max(0.25rem, env(safe-area-inset-bottom)); padding: 0.48rem; border-radius: 13px; }
  .expedition-sticky-action > div { max-width: 100%; }
  .expedition-sticky-action strong { font-size: 0.72rem; }
  .expedition-start-action { min-width: 0; max-width: 42vw; padding-inline: 0.65rem; }
  .leaf-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .leaf-tabs::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .world-card,
  .stage-route-node,
  .run-wave-announcement { animation: none; transition: none; }
}

.equipment-lock-vault {
  display: grid;
  max-width: 760px;
  min-height: 360px;
  place-items: center;
  gap: 0.65rem;
  margin-inline: auto;
  padding: clamp(1rem, 5vw, 2rem);
  border: 1px solid rgb(73 109 86 / 0.25);
  border-radius: 22px;
  text-align: center;
  background: radial-gradient(circle at 50% 18%, rgb(143 202 104 / 0.25), transparent 34%), linear-gradient(145deg, #eff0ce, #ded7ad);
  box-shadow: 0 16px 40px rgb(39 56 45 / 0.17), inset 0 0 0 2px rgb(255 255 255 / 0.4);
}
.equipment-lock-emblem { display: grid; width: 82px; aspect-ratio: 1; place-items: center; border-radius: 28px; color: #fff7d7; background: linear-gradient(145deg, #31513f, #173b35); box-shadow: 0 10px 20px rgb(23 59 53 / 0.25); font-size: 2rem; }
.equipment-lock-progress { display: grid; gap: 0.2rem; max-width: 560px; padding: 0.65rem 0.8rem; border-radius: 12px; color: #294536; background: rgb(255 255 255 / 0.42); }

.run-resume-status {
  display: grid;
  gap: 0.3rem;
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.run-resume-status.is-error { background: rgba(151, 47, 47, 0.18); }
.run-resume-status small { display: block; opacity: 0.78; }

/* Readable structured detail views */
.character-skill-details,
.codex-detail-sections {
  display: grid;
  min-width: 0;
  gap: 0.34rem;
  margin: 0;
}

.character-skill-details {
  display: grid;
  grid-column: 2;
}

.character-skill-details > div,
.codex-detail-sections > div {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.character-skill-details dt,
.character-skill-details dd,
.codex-detail-sections dt,
.codex-detail-sections dd {
  min-width: 0;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.character-skill-details dt,
.codex-detail-sections dt {
  color: rgb(255 249 225 / 0.58);
  font-size: 0.65rem;
  font-weight: 800;
}

.character-skill-details dd,
.codex-detail-sections dd {
  display: grid;
  gap: 0.14rem;
  color: #fff9df;
  font-size: 0.72rem;
  line-height: 1.48;
}

.character-skill-details dd span,
.codex-detail-sections dd span {
  min-width: 0;
}

.codex-detail-sections {
  display: grid;
  padding-top: 0.2rem;
  border-top: 1px solid rgb(32 52 47 / 0.13);
}

.codex-detail-sections > div {
  grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);
  column-gap: 0.5rem;
  padding: 0.18rem 0;
}

.codex-detail-sections dt {
  color: var(--coral-dark);
}

.codex-detail-sections dd {
  color: var(--ink-soft);
  font-size: 0.68rem;
}


@media (max-width: 430px) {
  .character-detail-copy p,
  .character-kit.compact > div {
    grid-template-columns: 1fr;
  }

  .character-detail-copy p,
  .character-kit.compact > div,
  .character-skill-details > div {
    gap: 0.2rem;
  }

  .character-skill-details {
    grid-column: 1;
  }

  .codex-detail-sections > div {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }
}

/* Expedition, ranking appearance, and horizontal customization redesign */
.expedition-redesign {
  --panel-ink: #f8f2d4;
  width: min(1180px, calc(100% - 1rem));
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--world-glow) 34%, transparent);
  border-radius: 24px;
  color: var(--panel-ink);
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--world-accent) 24%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--world-base) 94%, #10201e), var(--world-deep));
  box-shadow: 0 20px 55px rgb(9 24 22 / 0.34), inset 0 1px rgb(255 255 255 / 0.08);
}
.expedition-redesign-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(420px, 1.55fr);
  gap: clamp(0.8rem, 2vw, 1.25rem);
  align-items: stretch;
}
.expedition-selected-character,
.expedition-stage-board {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
  padding: clamp(0.8rem, 2vw, 1.15rem);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 20px;
  background: rgb(5 23 22 / 0.38);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.06);
}
.expedition-selected-character { align-content: start; text-align: center; }
.expedition-avatar-button {
  position: relative;
  display: grid;
  width: min(100%, 246px);
  justify-self: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--world-glow) 44%, transparent);
  border-radius: 20px;
  background: #efe2bf;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.24);
}
.expedition-avatar-button canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.expedition-avatar-button > span {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  color: #fffbea;
  background: rgb(18 52 46 / 0.9);
  font-size: 0.64rem;
  font-weight: 900;
}
.expedition-character-copy { display: grid; gap: 0.25rem; min-width: 0; }
.expedition-character-copy > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem; min-width: 0; }
.expedition-character-copy > div > span { color: var(--world-glow); font-size: 0.7rem; font-weight: 800; }
.expedition-character-role { display: inline-flex; padding: 0.18rem 0.42rem; border: 1px solid rgb(255 249 225 / 0.24); border-radius: 999px; color: #fff8d8; background: rgb(255 255 255 / 0.08); font-size: 0.62rem; line-height: 1; }
.expedition-character-copy h2 { margin: 0; color: #fff8d8; font-size: clamp(1.5rem, 3vw, 2.1rem); text-shadow: 0 2px 0 rgb(0 0 0 / 0.28); }
.expedition-character-copy p,
.expedition-stage-board > header p,
.expedition-stage-description p { margin: 0; line-height: 1.62; word-break: keep-all; overflow-wrap: break-word; }
.expedition-character-copy p { color: rgb(255 249 225 / 0.86); font-size: 0.76rem; }
.expedition-character-details-button { width: 100%; }
.expedition-selected-character .expedition-start-action { width: 100%; max-width: none; min-height: 52px; margin-top: auto; }
.expedition-stage-board > header { display: grid; gap: 0.32rem; min-width: 0; }
.expedition-stage-board > header h2 { margin: 0; color: #fff8d8; font-size: clamp(1.55rem, 3vw, 2.3rem); }
.expedition-stage-board > header p { color: rgb(255 249 225 / 0.82); }
.expedition-stage-carousel {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  gap: 0.6rem;
  align-items: stretch;
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
}
.stage-carousel-arrow {
  min-width: 44px;
  min-height: 92px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 16px;
  color: #fff5bf;
  background: rgb(255 255 255 / 0.08);
  font-size: 2.2rem;
}
.stage-carousel-arrow:disabled { opacity: 0.28; }
.expedition-current-stage {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  align-content: center;
  justify-items: center;
  padding: 0.9rem;
  border: 2px solid color-mix(in srgb, var(--world-glow) 58%, transparent);
  border-radius: 18px;
  color: #263d34;
  background: linear-gradient(145deg, #fff3ca, #e8d29d);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.22), inset 0 1px #fff;
}
.expedition-current-stage span { color: #7c4f32; font-size: 0.68rem; font-weight: 900; }
.expedition-current-stage strong { max-width: 100%; font-size: clamp(1.05rem, 2.5vw, 1.55rem); word-break: keep-all; }
.expedition-current-stage small { color: #4c6659; }
.expedition-stage-description {
  display: grid;
  min-width: 0;
  gap: 0.55rem;
  padding: 0.9rem;
  border-radius: 16px;
  color: #2a453b;
  background: rgb(255 247 215 / 0.94);
}
.expedition-stage-description h3 { margin: 0; color: #234136; }
.expedition-stage-description > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.expedition-stage-description small { min-width: 0; padding: 0.42rem; border-radius: 9px; color: #4d584a; background: rgb(66 98 76 / 0.09); text-align: center; word-break: keep-all; }
.expedition-dialog-backdrop,
.studio-dialog-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgb(4 17 16 / 0.76);
  backdrop-filter: blur(8px);
}
.expedition-character-picker-dialog,
.expedition-stage-picker-dialog,
.character-details-dialog,
.cosmetic-picker-dialog,
.custom-cosmetics-dialog,
.appearance-tool-dialog,
.studio-character-picker-dialog {
  display: grid;
  width: min(960px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  gap: 0.85rem;
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 2px solid rgb(143 202 109 / 0.45);
  border-radius: 22px;
  color: var(--ink);
  background: linear-gradient(150deg, #f5edcc, #ded3a8);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.46);
  overscroll-behavior: contain;
}
.expedition-character-picker-dialog > header,
.expedition-stage-picker-dialog > header,
.character-details-dialog > header,
.cosmetic-picker-dialog > header,
.custom-cosmetics-dialog > header,
.appearance-tool-dialog > header,
.studio-character-picker-dialog > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}
.expedition-character-picker-dialog > header h2,
.expedition-stage-picker-dialog > header h2,
.character-details-dialog > header h2,
.cosmetic-picker-dialog > header h2,
.custom-cosmetics-dialog > header h2,
.appearance-tool-dialog > header h2,
.studio-character-picker-dialog > header h2 { margin: 0.12rem 0; color: #244337; }
.expedition-character-picker-dialog > div,
.studio-character-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
}
.expedition-character-choice,
.studio-character-choice {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid rgb(42 69 57 / 0.18);
  border-radius: 14px;
  color: #29483c;
  background: rgb(255 255 255 / 0.42);
  text-align: left;
}
.expedition-character-choice canvas,
.studio-character-choice canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.expedition-character-choice span,
.studio-character-choice span { display: grid; min-width: 0; gap: 0.15rem; }
.expedition-character-choice.is-selected,
.studio-character-choice.is-selected { border-color: #4f8f5b; box-shadow: inset 0 0 0 2px rgb(79 143 91 / 0.22); }
.expedition-stage-picker-list { display: grid; gap: 0.8rem; }
.expedition-stage-world { display: grid; gap: 0.45rem; }
.expedition-stage-world > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.5rem; align-items: baseline; }
.expedition-stage-world > header h3 { margin: 0; color: #28483b; }
.expedition-stage-world > header small { grid-column: 1 / -1; color: #50675c; }
.expedition-stage-world > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.expedition-stage-choice { display: grid; min-width: 0; gap: 0.2rem; padding: 0.55rem; border-radius: 12px; color: #29483c; background: rgb(255 255 255 / 0.46); text-align: left; }
.expedition-stage-choice > span { color: #a45442; font-weight: 900; }
.expedition-stage-choice strong,
.expedition-stage-choice small { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.expedition-stage-choice small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.62rem; }
.expedition-stage-choice.is-selected { outline: 3px solid rgb(79 143 91 / 0.34); }
.character-details-dialog { width: min(720px, 100%); }
.character-details-dialog .character-detail-copy span { color: var(--ink-muted); }
.character-details-dialog .character-detail-copy strong { color: var(--ink); }
.character-details-dialog .character-kit.compact > div {
  border: 1px solid rgb(32 52 47 / 0.1);
  background: rgb(32 52 47 / 0.06);
}
.character-details-dialog .character-kit.compact span { color: #7c402f; }
.character-details-dialog .character-kit.compact strong { color: #29483c; }
.character-details-dialog .character-skill-details dt { color: #7c402f; }
.character-details-dialog .character-skill-details dd { color: #29483c; }
.character-details-dialog .character-starting-stats { border-color: rgb(32 52 47 / 0.18); }
.character-details-dialog .character-starting-stats summary {
  color: #29483c;
  background: rgb(255 255 255 / 0.26);
}
.character-details-dialog .character-starting-stats summary small { color: var(--ink-muted); }
.character-details-dialog .character-starting-stats dl { background: rgb(32 52 47 / 0.12); }
.character-details-dialog .character-starting-stats dl > div {
  color: #29483c;
  background: rgb(255 255 255 / 0.42);
}
.character-details-dialog .character-starting-stats dt { color: var(--ink-muted); }
.character-details-dialog .character-starting-stats dd { color: var(--ink); }

.ranking-run-look { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0.55rem; align-items: center; min-width: 0; }
.ranking-run-look canvas { display: block; width: 72px; height: 72px; border: 1px solid rgb(47 77 63 / 0.2); border-radius: 14px; image-rendering: pixelated; background: #efe2bf; }
.ranking-run-look > span { display: grid; min-width: 0; gap: 0.15rem; }
.ranking-run-look strong,
.ranking-run-look small { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.ranking-run-look.is-missing { grid-template-columns: 36px minmax(0, 1fr); color: var(--ink-soft); }
.ranking-run-look.is-missing > span:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgb(49 79 65 / 0.12); font-weight: 900; }

.customize-layout.studio-redesign {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 1.25rem);
  align-items: start;
  width: min(1240px, calc(100% - 1rem));
  margin-inline: auto;
}
.studio-preview-panel {
  position: sticky;
  top: 0.75rem;
  display: grid;
  min-width: 0;
  gap: 0.62rem;
  padding: 0.9rem;
  border-radius: 22px;
  background: linear-gradient(150deg, #243f37, #142d2b);
  box-shadow: 0 18px 42px rgb(17 39 34 / 0.26);
}
.studio-preview-panel h2 { margin: 0; color: #fff8d8; }
.studio-selected-character {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem;
  align-items: baseline;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  color: #fff8d8;
  background: rgb(255 255 255 / 0.08);
  text-align: left;
}
.studio-selected-character small { color: rgb(255 248 216 / 0.68); }
.studio-avatar-stage { position: relative; display: grid; place-items: center; }
.studio-avatar-stage canvas { display: block; width: min(100%, 224px); height: auto; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 18px; image-rendering: pixelated; }
.studio-facing-button {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.25rem;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.52rem;
  border-radius: 999px;
  color: #fff8d8;
  background: rgb(22 57 49 / 0.92);
}
.studio-preview-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
  min-width: 0;
  align-content: start;
}
.studio-dashboard-tile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  min-height: 118px;
  padding: 0.75rem;
  border: 1px solid rgb(47 77 63 / 0.2);
  border-radius: 18px;
  color: #29483c;
  background: linear-gradient(145deg, #fff5d6, #e8dcaf);
  box-shadow: 0 10px 25px rgb(39 61 50 / 0.14), inset 0 1px #fff;
  text-align: left;
}
.studio-dashboard-tile:hover { transform: translateY(-2px); }
.studio-dashboard-tile > span:last-child { display: grid; min-width: 0; gap: 0.16rem; }
.studio-dashboard-tile small { color: #8b5542; font-weight: 900; }
.studio-dashboard-tile strong,
.studio-dashboard-tile em { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.studio-dashboard-tile em { color: #557065; font-size: 0.64rem; font-style: normal; }
.appearance-tile-swatch,
.studio-tile-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(36 67 55 / 0.18);
  border-radius: 16px;
  color: #fff8d8;
  background: var(--swatch, linear-gradient(145deg, #4f8f5b, #264a3d));
  box-shadow: inset 0 1px rgb(255 255 255 / 0.36);
  font-weight: 900;
}
.studio-tile-icon { background: linear-gradient(145deg, #4f8f5b, #24473b); }
.custom-creation-tile { grid-column: span 2; }
.studio-dashboard-reward { grid-column: 1 / -1; }
.cosmetic-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem; }
.cosmetic-picker-dialog { width: min(980px, 100%); }
.custom-cosmetics-dialog { width: min(1180px, 100%); }
.custom-cosmetics-workspace { display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.55fr); gap: 0.75rem; min-width: 0; }
.appearance-tool-dialog { width: min(780px, 100%); }
.preset-dialog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.preset-dialog-list .preset-slot { display: grid; gap: 0.45rem; padding: 0.75rem; border-radius: 14px; background: rgb(255 255 255 / 0.4); }
.preset-dialog-list .preset-slot > div { display: grid; gap: 0.35rem; }

@media (max-width: 900px) {
  .expedition-redesign-grid { grid-template-columns: minmax(0, 1fr); }
  .expedition-selected-character { grid-template-columns: 120px minmax(0, 1fr); text-align: left; align-items: center; }
  .expedition-character-copy > div { justify-content: flex-start; }
  .expedition-avatar-button { grid-row: span 3; width: 120px; }
  .expedition-character-details-button,
  .expedition-selected-character .expedition-start-action { grid-column: 2; }
  .customize-layout.studio-redesign { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
  .studio-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-creation-tile { grid-column: span 2; }
}

@media (max-width: 760px) {
  .expedition-redesign { width: calc(100% - 0.5rem); padding: 0.55rem; border-radius: 16px; }
  .expedition-redesign-grid { gap: 0.55rem; }
  .expedition-selected-character { grid-template-columns: 92px minmax(0, 1fr); gap: 0.5rem; padding: 0.62rem; }
  .expedition-avatar-button { width: 92px; border-radius: 14px; }
  .expedition-avatar-button > span { display: none; }
  .expedition-character-copy h2 { font-size: 1.35rem; }
  .expedition-character-copy p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .expedition-character-details-button { font-size: 0.67rem; }
  .expedition-stage-board { padding: 0.62rem; }
  .expedition-stage-board > header p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.72rem; }
  .expedition-stage-carousel { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 0.35rem; }
  .stage-carousel-arrow { min-height: 78px; border-radius: 12px; }
  .expedition-current-stage { padding: 0.58rem; border-radius: 13px; }
  .expedition-stage-description { padding: 0.62rem; }
  .expedition-stage-description > div { grid-template-columns: 1fr; }
  .expedition-stage-description small { text-align: left; }
  .expedition-stage-world > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expedition-dialog-backdrop,
  .studio-dialog-backdrop { place-items: end stretch; padding: 0; }
  .expedition-character-picker-dialog,
  .expedition-stage-picker-dialog,
  .character-details-dialog,
  .cosmetic-picker-dialog,
  .appearance-tool-dialog,
  .studio-character-picker-dialog {
    width: 100%;
    max-height: min(88dvh, 820px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  }
  .custom-cosmetics-dialog {
    position: fixed;
    inset: 0;
    width: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: max(0.65rem, env(safe-area-inset-top)) max(0.55rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
  }
  .custom-cosmetics-workspace { grid-template-columns: minmax(0, 1fr); }
  .customize-layout.studio-redesign { grid-template-columns: minmax(0, 1fr); width: calc(100% - 0.5rem); gap: 0.55rem; }
  .studio-preview-panel { position: static; grid-template-columns: minmax(0, 1fr); padding: 0.65rem; }
  .studio-avatar-stage canvas { width: min(70vw, 224px); }
  .studio-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .studio-dashboard-tile { grid-template-columns: 42px minmax(0, 1fr); min-height: 90px; padding: 0.55rem; border-radius: 14px; }
  .appearance-tile-swatch,
  .studio-tile-icon { width: 40px; height: 40px; border-radius: 12px; }
  .custom-creation-tile,
  .appearance-tool-tile,
  .studio-dashboard-reward { grid-column: 1 / -1; }
  .preset-dialog-list { grid-template-columns: minmax(0, 1fr); }
  .ranking-run-look { grid-template-columns: 56px minmax(0, 1fr); }
  .ranking-run-look canvas { width: 56px; height: 56px; }
}

@media (max-width: 360px) {
  .studio-dashboard-tile { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .expedition-selected-character { grid-template-columns: 78px minmax(0, 1fr); }
  .expedition-avatar-button { width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-dashboard-tile { transition: none; transform: none; }
}


/* 2026-07-20 expedition readability and natural wrapping overrides */
.expedition-character-details-button {
  color: #173f35;
  background: linear-gradient(145deg, #f7edc8, #dbe8bd);
  border: 2px solid rgb(173 216 132 / 0.72);
  box-shadow: 0 5px 0 rgb(36 73 59 / 0.38), inset 0 1px #fff;
  opacity: 1;
  cursor: pointer;
}
.expedition-character-details-button:hover,
.expedition-character-details-button:focus-visible {
  background: linear-gradient(145deg, #fff6d7, #e7f2c8);
  transform: translateY(-1px);
}
.expedition-character-bonus {
  display: grid;
  min-height: 4.2rem;
  place-items: center;
  padding: 0.72rem 0.85rem;
  text-align: center;
}
:where(.hub-section, .modal-card, .online-panel, .equipment-bag-layout, .customize-layout) :is(p, li, dd, small, em) {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 2026-07-20 expedition, customization, equipment readability polish */
.expedition-avatar-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  color: #173b35;
  background: rgb(255 248 216 / 0.9);
  border-radius: 0 0 14px 14px;
}
.expedition-avatar-identity > span:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.35rem;
}
.expedition-avatar-identity canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.expedition-avatar-identity strong { min-width: 0; font-size: 1.08rem; color: #173b35; }
.expedition-avatar-identity > span:last-child { color: #fff8d8; background: #214d40; border-radius: 999px; padding: 0.34rem 0.55rem; white-space: nowrap; font-weight: 900; }
.expedition-character-bonus {
  display: grid;
  place-items: center;
  min-height: 5.1rem;
  margin: 0;
  padding: 0.75rem 0.8rem;
  text-align: center;
  color: #fff8d8;
  line-height: 1.65;
  word-break: normal;
  overflow-wrap: break-word;
}
.expedition-character-details-button {
  color: #173b35;
  background: linear-gradient(180deg, #fff1c8, #dfd19f);
  border: 2px solid #7cab65;
  box-shadow: 0 4px 0 #476b4f, inset 0 1px #fff;
  font-weight: 900;
  cursor: pointer;
}
.expedition-character-details-button:hover,
.expedition-character-details-button:focus-visible { background: #fff8d8; border-color: #b7dc7b; transform: translateY(-1px); }
.expedition-world-selector { cursor: pointer; }
.expedition-stage-board > header,
.expedition-stage-description,
.expedition-current-stage { min-width: 0; }
.expedition-stage-board > header p,
.expedition-stage-description p,
.expedition-stage-choice small,
.expedition-world-choice small {
  max-width: none;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.expedition-current-stage { cursor: pointer; }
.expedition-stage-local-number {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #fff8d8;
  background: #6f4d3e;
  font-weight: 900;
}
.expedition-world-picker-dialog { width: min(840px, 100%); }
.expedition-world-picker-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.65rem; }
.expedition-world-choice { display: grid; min-width: 0; gap: 0.25rem; padding: 0.8rem; text-align: left; border: 1px solid rgb(35 74 61 / 0.22); border-radius: 15px; color: #29483c; background: #fff3cf; }
.expedition-world-choice.is-selected { border-color: #6ca95b; box-shadow: inset 0 0 0 2px #9ed477; }
.expedition-world-choice.is-locked { opacity: 0.7; }

:where(.hub-section, .expedition-dialog-backdrop, .studio-dialog-backdrop, .equipment-dialog-backdrop) :is(p, li, dd, small, em) {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.character-details-dialog,
.character-details-dialog :is(p, strong, span, dt, dd, small),
.character-detail-copy,
.character-kit.compact,
.character-skill-details,
.character-starting-stats { color: #29483c; }
.character-details-dialog .studio-kicker { color: #356744; }
.character-detail-copy > p,
.character-kit.compact > div,
.character-starting-stats { background: rgb(255 255 255 / 0.36); }
.character-detail-copy > p > span,
.character-kit.compact > div > span,
.character-skill-details dt,
.character-starting-stats dt { color: #7b4537; }
.character-skill-details dd,
.character-starting-stats dd { color: #29483c; }

.studio-preview-primary-actions {
  position: absolute;
  z-index: 2;
  inset: auto 0.55rem 0.55rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  width: auto;
  margin: 0;
}
.studio-preview-primary-actions > button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  color: #fff8d8;
  background: rgb(31 76 64 / 0.96);
  border-radius: 12px;
  font-weight: 900;
}
.studio-avatar-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-content: start;
  min-width: 0;
  padding: 0.55rem;
  padding-bottom: 3.9rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 18px;
  background: #173b35;
}
.studio-avatar-stage[data-preview-background="light"] { background: #efe2bf; }
.studio-avatar-stage canvas {
  width: min(100%, 224px);
  margin: 0;
  border: 0;
  border-radius: 13px;
}

.equipment-bag-layout,
.equipment-bag-layout :is(h2, h3, p, strong, small, span, label, em),
.equipment-inbox,
.equipment-inbox :is(h2, h3, p, strong, small, span),
.equipment-loadout-panel,
.equipment-inventory-panel,
.equipment-detail,
.equipment-item-card,
.equipment-slot { color: #29483c; }
.equipment-item-card > span:nth-child(2) { display: grid; min-width: 0; gap: 0.16rem; text-align: left; }
.equipment-item-card small,
.equipment-detail small,
.equipment-bag-heading p,
.equipment-inbox p,
.equipment-total-stats { color: #526d62; }
.equipment-item-card em { color: #6c382f; background: #f5d9ae; }
.equipment-inventory-tools label { color: #29483c; font-weight: 900; }
.equipment-inventory-tools select { color: #fff8d8; background: #343434; }
.equipment-detail-meta span,
.equipment-total-stats span { color: #29483c; }
.equipment-detail-meta strong,
.equipment-total-stats strong { color: #173b35; }
.equipment-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(4 25 22 / 0.74);
  backdrop-filter: blur(6px);
}
.equipment-slot-confirm-dialog {
  display: grid;
  width: min(440px, 100%);
  gap: 0.65rem;
  padding: 1.1rem;
  border: 2px solid #9ac973;
  border-radius: 20px;
  color: #29483c;
  background: #fff0c6;
  box-shadow: 0 22px 60px rgb(0 0 0 / 0.35);
}
.equipment-slot-confirm-dialog h2,
.equipment-slot-confirm-dialog p { margin: 0; color: #29483c; }
.equipment-slot-confirm-dialog > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

@media (max-width: 760px) {
  .expedition-avatar-identity { padding: 0.3rem; }
  .expedition-avatar-identity canvas { width: 24px; height: 24px; }
  .expedition-avatar-identity strong { font-size: 0.82rem; }
  .expedition-avatar-identity > span:last-child { font-size: 0.62rem; padding: 0.28rem 0.4rem; }
  .expedition-character-bonus { min-height: 3.7rem; padding: 0.55rem; font-size: 0.72rem; }
  .expedition-world-picker-dialog { width: 100%; }
  .expedition-world-picker-list { grid-template-columns: minmax(0, 1fr); }
  .studio-preview-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-slot-confirm-dialog { align-self: end; border-radius: 20px 20px 0 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* 2026-07-20 expedition, equipment, and readable prose polish */
.expedition-avatar-button > .expedition-avatar-identity {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: .42rem .5rem;
  border-radius: 0;
  color: #173a31;
  background: linear-gradient(90deg, rgb(255 249 225 / .97), rgb(247 235 196 / .93));
  font-size: .72rem;
  box-shadow: 0 -1px rgb(31 64 52 / .12);
}
.expedition-avatar-identity > span:first-child {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .35rem;
  align-items: center;
  min-width: 0;
  text-align: left;
}
.expedition-avatar-identity canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.expedition-avatar-identity strong { min-width: 0; color: #173a31; font-size: .9rem; overflow-wrap: break-word; }
.expedition-avatar-identity > span:last-child {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  padding: .26rem .48rem;
  border-radius: 999px;
  color: #fff8d8;
  background: #234f43;
  white-space: nowrap;
  font-size: .64rem;
  font-weight: 900;
}
.expedition-character-bonus {
  display: grid;
  min-height: 4.4rem;
  place-items: center;
  padding: .72rem .76rem;
  border: 1px solid rgb(255 249 225 / .12);
  border-radius: 13px;
  color: #fff8d8;
  background: rgb(255 255 255 / .055);
  text-align: center;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
}
.expedition-character-details-button {
  width: 100%;
  min-height: 48px;
  border: 2px solid color-mix(in srgb, var(--world-glow) 56%, #fff 8%);
  color: #173a31;
  background: linear-gradient(145deg, #f6edc7, #d8e1b0);
  box-shadow: 0 7px 0 rgb(5 23 22 / .28), inset 0 1px #fff;
  font-weight: 900;
}
.expedition-character-details-button:hover,
.expedition-character-details-button:focus-visible { background: linear-gradient(145deg, #fff7d8, #e7efbf); }
.expedition-stage-board > header { gap: .62rem; }
.expedition-world-selector {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: .62rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: .55rem .68rem;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 15px;
  color: #fff8d8;
  background: rgb(255 255 255 / .075);
  text-align: left;
}
.expedition-world-number {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--world-glow) 65%, transparent);
  border-radius: 50%;
  color: #173a31;
  background: var(--world-glow);
  font-size: 1.15rem;
  font-weight: 1000;
}
.expedition-world-selector-copy { display: grid; min-width: 0; gap: .08rem; }
.expedition-world-selector-copy small { color: rgb(255 249 225 / .72); font-size: .61rem; }
.expedition-world-selector-copy strong { min-width: 0; color: #fff8d8; font-size: clamp(1.2rem, 2.6vw, 1.8rem); overflow-wrap: break-word; }
.expedition-world-selector > em { color: var(--world-glow); font-size: .63rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.expedition-stage-board > header > p,
.expedition-stage-description p,
.expedition-stage-choice small,
.expedition-world-choice small {
  max-width: none;
  width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.expedition-current-stage { cursor: pointer; }
.expedition-current-stage:focus-visible { outline: 3px solid var(--world-glow); outline-offset: 3px; }
.expedition-stage-local-number {
  display: grid;
  min-width: 1.7rem;
  min-height: 1.7rem;
  place-items: center;
  border-radius: 999px;
  background: rgb(124 79 50 / .1);
}
.character-details-dialog,
.character-details-dialog :is(p, span, strong, small, dt, dd, summary) { opacity: 1; }
.character-details-dialog .character-detail-copy,
.character-details-dialog .character-kit.compact { color: #29483c; }
.character-details-dialog .character-detail-copy p,
.character-details-dialog .character-kit.compact > div,
.character-details-dialog .character-skill-details > div { background: rgb(255 255 255 / .46); }
.character-details-dialog .character-detail-copy span,
.character-details-dialog .character-kit.compact span,
.character-details-dialog .character-skill-details dt { color: #7b4132; }
.character-details-dialog .character-detail-copy strong,
.character-details-dialog .character-kit.compact strong,
.character-details-dialog .character-skill-details dd,
.character-details-dialog .character-starting-stats dd { color: #203f35; }

:where(.hub-section, .online-panel, .equipment-dialog-backdrop, .expedition-dialog-backdrop, .studio-dialog-backdrop) :is(p, li, dd, small, em) {
  min-width: 0;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.equipment-bag-layout,
.equipment-bag-layout :is(h2, h3, p, label, strong, small, span, li, em) { color: #273f35; }
.equipment-bag-heading p,
.equipment-inbox-status,
.equipment-inbox-card small,
.equipment-total-stats,
.equipment-detail-meta,
.equipment-item-card small,
.equipment-inventory-empty { color: #4c6459; opacity: 1; }
.equipment-item-card {
  color: #273f35;
  background: #fffdf0;
}
.equipment-item-card strong { color: #203c32; }
.equipment-item-card small { color: #51675d; }
.equipment-inventory-tools label { color: #314c40; font-weight: 900; }
.equipment-slot { color: #273f35; }
.equipment-slot.is-locked { opacity: 1; color: #5f665f; background: #f4f0dc; }
.equipment-dialog-backdrop {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgb(4 17 16 / .78);
  backdrop-filter: blur(8px);
}
.equipment-slot-confirm-dialog {
  display: grid;
  width: min(460px, 100%);
  gap: .72rem;
  padding: 1rem;
  border: 2px solid rgb(143 202 109 / .5);
  border-radius: 20px;
  color: #263f35;
  background: linear-gradient(145deg, #fff7d9, #ded3aa);
  box-shadow: 0 22px 60px rgb(0 0 0 / .42);
}
.equipment-slot-confirm-dialog h2,
.equipment-slot-confirm-dialog p { margin: 0; color: #263f35; }
.equipment-slot-confirm-cost { color: #7b4132; font-size: 1rem; }
.equipment-slot-confirm-dialog > small { color: #4b6257; }
.equipment-slot-confirm-dialog > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }

@media (max-width: 760px) {
  .expedition-selected-character {
    --mobile-expedition-avatar-size: clamp(156px, 46vw, 184px);
    grid-template-columns: var(--mobile-expedition-avatar-size) minmax(0, 1fr);
    align-items: stretch;
  }
  .expedition-avatar-button {
    grid-row: auto;
    width: var(--mobile-expedition-avatar-size);
    min-height: var(--mobile-expedition-avatar-size);
    align-self: start;
  }
  .expedition-character-copy { align-content: center; }
  .expedition-character-details-button,
  .expedition-selected-character .expedition-start-action {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .expedition-avatar-button > .expedition-avatar-identity { display: grid; padding: .3rem; }
  .expedition-avatar-identity > span:first-child { grid-template-columns: 24px minmax(0, 1fr); gap: .22rem; }
  .expedition-avatar-identity canvas { width: 24px; height: 24px; }
  .expedition-avatar-identity strong { font-size: .74rem; }
  .expedition-avatar-identity > span:last-child { min-height: 30px; padding: .22rem .34rem; font-size: .54rem; }
  .expedition-character-bonus { min-height: 3.7rem; padding: .55rem; }
  .expedition-world-selector { grid-template-columns: 40px minmax(0, 1fr) auto; padding: .45rem; }
  .expedition-world-number { width: 38px; height: 38px; }
  .studio-avatar-stage { width: min(100%, 320px); justify-self: center; }
  .studio-preview-primary-actions { inset: auto 0.4rem 0.4rem; gap: 0.35rem; }
  .equipment-dialog-backdrop { place-items: end stretch; padding: 0; }
  .equipment-slot-confirm-dialog { width: auto; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* 2026-07-20 server-verified math bonus and event equipment */
.bonus-panel {
  align-content: start;
  color: #fff8d8;
}
.bonus-panel > header > span {
  flex: 0 0 auto;
  padding: .4rem .58rem;
  border: 1px solid rgb(143 200 109 / .38);
  border-radius: 999px;
  color: #dff0c7;
  background: rgb(143 200 109 / .09);
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}
.bonus-unlimited-note {
  margin: 0;
  padding: .7rem .8rem;
  border-left: 4px solid var(--leaf);
  border-radius: 9px;
  color: #e9f3dc;
  background: rgb(255 255 255 / .065);
  line-height: 1.55;
}
.bonus-difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.bonus-difficulty-card {
  display: grid;
  min-width: 0;
  min-height: 132px;
  align-content: start;
  gap: .28rem;
  padding: .78rem;
  border: 2px solid rgb(143 200 109 / .32);
  color: #29483c;
  background: linear-gradient(145deg, #fff8d8, #e1d7b0);
  box-shadow: 0 5px 0 rgb(4 22 20 / .28);
  text-align: left;
}
.bonus-difficulty-card > span {
  color: #7b4132;
  font-size: .66rem;
  font-weight: 900;
}
.bonus-difficulty-card > strong {
  min-width: 0;
  color: #203f35;
  font-size: .82rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.bonus-difficulty-card > small {
  color: #455f54;
  line-height: 1.4;
}
.bonus-difficulty-card > em {
  margin-top: auto;
  color: #6b3b31;
  font-size: .67rem;
  font-style: normal;
  font-weight: 900;
}
.bonus-difficulty-card.is-selected {
  border-color: var(--leaf);
  outline: 3px solid rgb(143 200 109 / .2);
  background: linear-gradient(145deg, #fffbe6, #d9e7af);
}
.bonus-challenge {
  display: grid;
  gap: .72rem;
  padding: 1rem;
  border: 2px solid rgb(143 200 109 / .48);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff5cf, #ddd1a6);
  color: #29483c;
  box-shadow: 0 12px 30px rgb(3 18 16 / .22);
}
.bonus-challenge > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.bonus-challenge > header > span {
  color: #6f3b31;
  font-weight: 900;
}
.bonus-challenge > h3 {
  margin: 0;
  color: #173b35;
  font-size: clamp(1.65rem, 5vw, 3rem);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
}
.bonus-answer-form {
  display: grid;
  gap: .65rem;
}
.bonus-answer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
.bonus-answer-fields.is-division {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bonus-answer-fields label {
  display: grid;
  min-width: 0;
  gap: .32rem;
  color: #29483c;
  font-weight: 900;
}
.bonus-answer-fields input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: .62rem .7rem;
  border: 2px solid rgb(41 72 60 / .35);
  border-radius: 11px;
  color: #173b35;
  background: #fffdf0;
  font: 900 1.15rem/1 "Limgul 12", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  text-align: center;
}
.bonus-answer-result {
  margin: 0;
  padding: .68rem .75rem;
  border-radius: 10px;
  color: #29483c;
  background: rgb(255 255 255 / .5);
  line-height: 1.5;
  font-weight: 800;
}
.bonus-answer-result.is-correct { border-left: 4px solid #4f8f59; }
.bonus-answer-result.is-wrong { border-left: 4px solid #c75f4d; color: #783a31; }
.bonus-empty-copy {
  margin: 0;
  padding: 1rem;
  border: 2px dashed rgb(143 200 109 / .35);
  border-radius: 14px;
  color: #dfead7;
  text-align: center;
}
.bonus-event-set-info {
  display: grid;
  gap: .36rem;
  padding: .86rem;
  border: 1px solid rgb(255 248 216 / .18);
  border-radius: 14px;
  background: rgb(255 255 255 / .055);
}
.bonus-event-set-info h3,
.bonus-event-set-info p { margin: 0; }
.bonus-event-set-info h3 { color: #fff2c6; }
.bonus-event-set-info p { color: #d9e8d1; line-height: 1.55; }
.admin-bonus-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .7rem;
  align-items: center;
}
.admin-bonus-control h3,
.admin-bonus-control p { margin: 0; }
.admin-bonus-control p { color: #cbdccf; line-height: 1.45; }
.admin-bonus-control > strong {
  color: #f5edc8;
  white-space: nowrap;
}
.admin-bonus-control > button {
  min-width: 112px;
  padding: .55rem .72rem;
  color: #183a32;
  background: #cfe6a8;
}
.admin-bonus-control > small { color: #cbdccf; }

@media (max-width: 760px) {
  .bonus-panel > header { flex-direction: column; }
  .bonus-panel > header > span { align-self: flex-start; }
  .bonus-difficulty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus-difficulty-card { min-height: 126px; padding: .7rem; }
  .bonus-challenge { padding: .82rem; }
  .admin-bonus-control { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-bonus-control > button,
  .admin-bonus-control > small { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 430px) {
  .bonus-difficulty-grid { grid-template-columns: minmax(0, 1fr); }
  .bonus-difficulty-card { min-height: 0; }
  .bonus-answer-fields.is-division { grid-template-columns: minmax(0, 1fr); }
  .bonus-challenge > header { align-items: stretch; flex-direction: column; }
  .bonus-challenge > header .secondary-action { width: 100%; }
}

.equipment-event-set-status {
  display: grid;
  gap: .45rem;
  padding: .72rem;
  border: 2px solid #bb9852;
  border-radius: 14px;
  color: #2d473b;
  background: linear-gradient(145deg, #fff6cc, #eed6a0);
  box-shadow: inset 0 1px rgb(255 255 255 / .72);
}
.equipment-event-set-status > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .55rem;
}
.equipment-event-set-status h3,
.equipment-event-set-status p { margin: 0; }
.equipment-event-set-status h3 { color: #5f3d28; }
.equipment-event-set-status strong { color: #7d3f2f; white-space: nowrap; }
.equipment-event-set-status p { color: #4d6257; font-size: .7rem; line-height: 1.5; }
.equipment-event-set-status.is-active {
  border-color: #6da359;
  background: linear-gradient(145deg, #fffbd9, #dbe8ad);
}
.equipment-selected-set-label {
  margin: 0;
  padding: .45rem .55rem;
  border-left: 4px solid #bb9852;
  border-radius: 7px;
  color: #5f3d28;
  background: rgb(238 214 160 / .52);
  font-size: .7rem;
  font-weight: 900;
}
@media (max-width: 520px) {
  .equipment-event-set-status > div { align-items: flex-start; flex-direction: column; }
}

/* 2026-07-21 final expedition card simplification */
.expedition-selected-character {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
}
.expedition-selected-character .expedition-avatar-button {
  grid-column: 1 / -1;
  width: min(100%, 286px);
}
.expedition-selected-character .expedition-character-details-button,
.expedition-selected-character .expedition-start-action {
  grid-column: auto;
  min-height: 54px;
  margin: 0;
}
.character-detail-summary {
  display: grid;
  gap: .35rem;
  padding: .8rem;
  border: 1px solid rgb(39 71 58 / .18);
  border-radius: 14px;
  color: #29483c;
  background: rgb(255 255 255 / .36);
}
.character-detail-summary > span { color: #76503d; font-size: .68rem; font-weight: 900; }
.character-detail-summary > strong { color: #173b35; font-size: 1rem; }
.character-detail-summary > p { margin: 0; color: #36564a; line-height: 1.55; }

@media (max-width: 900px) {
  .expedition-selected-character {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    text-align: center;
    align-items: stretch;
  }
  .expedition-selected-character .expedition-avatar-button {
    grid-row: auto;
    grid-column: 1 / -1;
    width: min(100%, 286px);
  }
  .expedition-selected-character .expedition-character-details-button,
  .expedition-selected-character .expedition-start-action { grid-column: auto; }
}

@media (max-width: 760px) {
  .expedition-selected-character {
    --mobile-expedition-avatar-size: clamp(156px, 46vw, 184px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .expedition-selected-character .expedition-avatar-button {
    width: var(--mobile-expedition-avatar-size);
    min-height: var(--mobile-expedition-avatar-size);
    justify-self: center;
  }
  .expedition-selected-character .expedition-character-details-button,
  .expedition-selected-character .expedition-start-action {
    grid-column: auto;
    min-height: 50px;
  }
}

/* Final 2026-07-21 customization control rhythm. */
.studio-auxiliary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.65rem;
}
.studio-auxiliary-actions > button { min-width: 0; min-height: 44px; width: 100%; }

/* Equipment pixel art and grade-specific item-name colors. */
.equipment-pixel-icon { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.equipment-item-icon .equipment-pixel-icon,
.equipment-detail-icon .equipment-pixel-icon,
.equipment-slot .equipment-pixel-icon { margin: auto; }
.equipment-item-card > b .equipment-pixel-icon { width: 16px; height: 16px; }
.rarity-common { --equipment-name-color: #111111; }
.rarity-rare { --equipment-name-color: #1769d2; }
.rarity-unique { --equipment-name-color: #ff2aa8; }
.rarity-event { --equipment-name-color: #20a94f; }
.rarity-legendary { --equipment-name-color: #f08a24; }
.rarity-mythic { --equipment-name-color: #d51f25; }
.equipment-bag-layout .equipment-item-card strong { color: var(--equipment-name-color, #111111); }
.equipment-bag-layout .equipment-inbox-card strong,
.equipment-bag-layout .equipment-cleanup-card strong,
.equipment-bag-layout .equipment-detail h3 { color: var(--equipment-name-color, #111111); }

/* Bonus panels use readable ink on parchment and bright copy on the dark hero panel. */
.bonus-panel :is(.bonus-unlimited-note, .bonus-difficulty-card, .bonus-challenge, .bonus-event-set-info, .bonus-empty-copy) {
  color: #29483c;
}
.bonus-panel > header,
.bonus-panel > header :is(h2, p, span, small, strong) { color: #fff4d2; }
.bonus-difficulty-card :is(span, strong, small, em),
.bonus-event-set-info :is(h3, p),
.bonus-challenge :is(h3, label, small),
.bonus-empty-copy :is(strong, span) { color: inherit; }
.bonus-empty-copy.is-error { display: grid; gap: 0.65rem; justify-items: start; }
.admin-universal-cosmetic-note { color: #29483c; font-weight: 800; }

/* Final UI completion: shared framed avatars, reliable disclosures, bonus modal, compact bag, and ranking redesign. */
.expedition-selected-character {
  align-content: start;
}
.expedition-avatar-frame {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(143 202 109 / .42);
  border-radius: 20px;
  background: #efe2bf;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45), 0 10px 24px rgb(0 0 0 / .16);
}
.expedition-selected-character .expedition-avatar-button {
  display: grid;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.expedition-selected-character .expedition-avatar-button canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  image-rendering: pixelated;
}
.expedition-avatar-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .42rem .55rem;
  border: 0;
  border-top: 1px solid rgb(42 69 57 / .14);
  border-radius: 0;
  color: #173b35;
  background: rgb(255 255 255 / .34);
  text-align: left;
  box-shadow: none;
}
.expedition-avatar-identity > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.expedition-avatar-identity canvas {
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(42 69 57 / .18);
  border-radius: 7px;
  image-rendering: pixelated;
}
.expedition-avatar-identity strong {
  min-width: 0;
  color: #173b35;
  font-size: 1rem;
  overflow-wrap: break-word;
}
.expedition-avatar-identity em {
  padding: .3rem .5rem;
  border-radius: 999px;
  color: #fff8d8;
  background: #214d40;
  font-size: .68rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.character-starting-stats summary[data-action="toggle-character-starting-stats"] {
  user-select: none;
  touch-action: manipulation;
}
.character-starting-stats:not(.is-open) dl { display: none; }
.character-starting-stats.is-open dl { display: grid; }

.bonus-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(.6rem, 3vw, 1.4rem);
  background: rgb(4 26 23 / .76);
  backdrop-filter: blur(4px);
}
.bonus-question-dialog {
  display: grid;
  width: min(620px, 100%);
  max-height: min(88dvh, 760px);
  gap: .9rem;
  padding: clamp(.85rem, 3vw, 1.3rem);
  overflow: auto;
  border: 2px solid rgb(143 202 109 / .62);
  border-radius: 22px;
  color: #29483c;
  background: linear-gradient(150deg, #f6edcb, #ded3a8);
  box-shadow: 0 24px 70px rgb(0 0 0 / .48);
  overscroll-behavior: contain;
}
.bonus-question-dialog > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
}
.bonus-question-dialog > header h2 { margin: .1rem 0 0; color: #244337; }
.bonus-question-dialog > header button { min-width: 64px; }
.bonus-question-dialog .bonus-challenge,
.bonus-question-dialog .bonus-empty-copy,
.bonus-question-dialog .bonus-answer-result {
  margin: 0;
  color: #29483c;
  background: rgb(255 255 255 / .48);
}

.equipment-item-card {
  min-height: 80px;
  padding: 8px 7px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.equipment-item-card .equipment-item-icon { align-self: center; }
.equipment-item-card .equipment-pixel-icon { width: 28px; height: 28px; }
.equipment-item-copy { display: grid; min-width: 0; gap: .12rem; }
.equipment-card-options {
  display: grid;
  min-width: 0;
  gap: .08rem;
  margin: .16rem 0 0;
  padding: 0;
  list-style: none;
}
.equipment-card-options li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem;
  min-width: 0;
  color: #405c50;
  font-size: .56rem;
  line-height: 1.25;
}
.equipment-card-options li span,
.equipment-card-options li strong {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  overflow-wrap: break-word;
}
.equipment-card-options li strong { color: #173b35; white-space: nowrap; }
.equipment-affix-quality { font-weight: 900; }
.equipment-affix-quality.is-low { color: #53645c; }
.equipment-affix-quality.is-middle { color: #1f6c50; }
.equipment-affix-quality.is-high { color: #845000; }
.equipment-affix-quality.is-extreme { color: #9a2458; }
.equipment-item-card > em { bottom: 3px; }

.ranking-redesign-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.ranking-current-character {
  display: grid;
  min-width: 0;
  gap: .65rem;
  padding: .75rem;
  border: 1px solid rgb(143 202 109 / .35);
  border-radius: 20px;
  color: #29483c;
  background: #efe2bf;
  box-shadow: 0 12px 28px rgb(0 0 0 / .14);
}
.ranking-current-character canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  image-rendering: pixelated;
  background: #efe2bf;
}
.ranking-current-character > div {
  display: grid;
  gap: .12rem;
  padding: .15rem .2rem;
}
.ranking-current-character strong { color: #173b35; font-size: 1.05rem; }
.ranking-current-character small { color: #526d62; }
.ranking-board-panel { display: grid; min-width: 0; gap: .75rem; }
.ranking-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.ranking-mode-choice {
  display: grid;
  min-width: 0;
  gap: .2rem;
  min-height: 72px;
  padding: .55rem;
  border: 1px solid rgb(143 202 109 / .28);
  border-radius: 13px;
  color: #eaf3d6;
  background: #21483e;
  text-align: left;
}
.ranking-mode-choice small {
  min-width: 0;
  color: #bfd1c4;
  font-size: .62rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.ranking-mode-choice.is-selected {
  border-color: #d7e58f;
  color: #fff5ca;
  background: #35664f;
  box-shadow: inset 0 0 0 2px rgb(215 229 143 / .2);
}
.ranking-selected-mode {
  display: grid;
  gap: .15rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  color: #29483c;
  background: rgb(255 255 255 / .62);
}
.ranking-selected-mode h3,
.ranking-selected-mode p { margin: 0; }
.ranking-selected-mode span { color: #7b4132; font-size: .65rem; font-weight: 900; }
.ranking-selected-mode p { color: #526d62; }
.ranking-board-panel .ranking-table-wrap { margin: 0; }

@media (max-width: 760px) {
  .expedition-selected-character {
    --mobile-expedition-avatar-size: clamp(156px, 46vw, 184px);
    grid-template-columns: var(--mobile-expedition-avatar-size) minmax(0, 1fr);
  }
  .expedition-avatar-frame {
    grid-row: span 2;
    width: var(--mobile-expedition-avatar-size);
    justify-self: center;
  }
  .expedition-selected-character .expedition-avatar-button {
    width: 100%;
    min-height: 0;
  }
  .expedition-avatar-identity { min-height: 42px; padding: .32rem .4rem; gap: .3rem; }
  .expedition-avatar-identity > span { grid-template-columns: 24px minmax(0, 1fr); gap: .25rem; }
  .expedition-avatar-identity canvas { width: 24px; height: 24px; }
  .expedition-avatar-identity strong { font-size: .78rem; }
  .expedition-avatar-identity em { padding: .24rem .35rem; font-size: .56rem; }
  .ranking-redesign-layout { grid-template-columns: 1fr; }
  .ranking-current-character { width: min(100%, 330px); justify-self: center; }
  .ranking-mode-selector { grid-template-columns: 1fr; }
  .ranking-mode-choice { min-height: 58px; }
  .equipment-item-card { min-height: 76px; }
}

@media (max-width: 430px) {
  .bonus-dialog-backdrop { place-items: end stretch; padding: 0; }
  .bonus-question-dialog {
    width: auto;
    max-height: 92dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .equipment-card-options li { font-size: .53rem; }
}

/* 2026-07-21 final dominant expedition avatar layout */
.expedition-selected-character {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
}
.expedition-avatar-frame {
  width: min(100%, 380px);
  justify-self: center;
}
.expedition-selected-character :is(.expedition-character-details-button, .expedition-start-action) {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 56px;
  margin: 0;
  font-size: .92rem;
}
.expedition-selected-character .expedition-character-details-button { order: 2; }
.expedition-selected-character .expedition-start-action { order: 3; }

/* The bonus modal owns the full available line width; Korean copy wraps only at the real panel edge. */
.bonus-question-dialog :is(.bonus-empty-copy, .bonus-answer-result, .bonus-challenge) {
  width: 100%;
  max-width: none;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.bonus-question-dialog .bonus-empty-copy {
  display: grid;
  justify-items: stretch;
  gap: .6rem;
  text-align: center;
}
.bonus-question-dialog .bonus-empty-copy > :is(strong, span) {
  width: 100%;
  max-width: none;
  line-height: 1.65;
}
.bonus-question-dialog .bonus-empty-copy > button {
  width: 100%;
  max-width: 280px;
  justify-self: center;
}

/* Compact equipment cards and unambiguous top-right state badges. */
.equipment-item-card {
  min-height: 68px;
  padding: 6px 7px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 5px;
}
.equipment-item-card .equipment-pixel-icon { width: 24px; height: 24px; }
.equipment-item-copy { padding-right: 3.7rem; }
.equipment-item-card small { margin-top: 0; }
.equipment-card-options { gap: .03rem; margin-top: .08rem; }
.equipment-card-options li { font-size: .54rem; line-height: 1.18; }
.equipment-equipped-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  pointer-events: none;
  padding: 3px 6px;
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: 999px;
  color: #fffbe2;
  background: #356c4d;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
  font-size: .52rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.equipment-lock-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  background: rgb(245 239 211 / .9);
}
.equipment-lock-badge .equipment-pixel-icon { width: 14px; height: 14px; }

.equipment-bulk-sale {
  display: grid;
  gap: .65rem;
  margin-top: .75rem;
  padding: .75rem;
  border: 1px solid rgb(42 69 57 / .22);
  border-radius: 15px;
  color: #29483c;
  background: rgb(255 255 255 / .48);
}
.equipment-bulk-sale > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .7rem;
}
.equipment-bulk-sale h3,
.equipment-bulk-sale p { margin: 0; }
.equipment-bulk-sale p { color: #52675e; font-size: .64rem; line-height: 1.45; }
.equipment-bulk-sale > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: .45rem;
}
.equipment-bulk-sale-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .12rem .35rem;
  min-width: 0;
  min-height: 54px;
  padding: .48rem .58rem;
  border: 1px solid color-mix(in srgb, var(--equipment-name-color, #29483c) 45%, #c6c4ad);
  color: #29483c;
  background: #fffcef;
  text-align: left;
}
.equipment-bulk-sale-button strong { color: var(--equipment-name-color, #111); }
.equipment-bulk-sale-button span { font-size: .63rem; font-weight: 900; }
.equipment-bulk-sale-button small { grid-column: 1 / -1; color: #52675e; font-size: .58rem; }
.equipment-bulk-sell-dialog {
  display: grid;
  width: min(520px, 100%);
  gap: .65rem;
  padding: 1rem;
  border: 2px solid rgb(143 202 109 / .62);
  border-radius: 20px;
  color: #29483c;
  background: linear-gradient(150deg, #f6edcb, #ded3a8);
  box-shadow: 0 24px 70px rgb(0 0 0 / .46);
}
.equipment-bulk-sell-dialog :is(h2, p, strong, small) { margin: 0; color: inherit; }
.equipment-bulk-sell-dialog p { line-height: 1.6; }
.equipment-bulk-sell-dialog > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

@media (max-width: 760px) {
  .expedition-selected-character {
    --mobile-expedition-avatar-size: clamp(220px, 78vw, 340px);
    grid-template-columns: minmax(0, 1fr);
  }
  .expedition-avatar-frame {
    grid-row: auto;
    width: var(--mobile-expedition-avatar-size);
    max-width: 100%;
  }
  .expedition-selected-character :is(.expedition-character-details-button, .expedition-start-action) {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 56px;
  }
  .equipment-bulk-sale > header { align-items: stretch; flex-direction: column; }
  .equipment-bulk-sale > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .equipment-item-card { min-height: 64px; padding: 5px 6px; }
  .equipment-item-copy { padding-right: 3.35rem; }
  .equipment-card-options li { font-size: .51rem; }
  .equipment-bulk-sale > div { grid-template-columns: minmax(0, 1fr); }
  .equipment-bulk-sell-dialog {
    width: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}


/* 2026-07-21 handoff completion: mobile expedition, natural wrapping, equipment badges and cleanup. */
.equipment-item-card.is-equipped::after {
  content: none;
  display: none;
}
.equipment-bag-layout :is(h1, h2, h3, p, li, dd, small, span, label, em, strong, button) {
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.bonus-question-dialog :is(h1, h2, h3, p, li, dd, small, span, label, em, strong, button) {
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width: 760px) {
  .expedition-selected-character {
    grid-template-columns: minmax(0, 1fr);
  }
  .expedition-avatar-frame {
    grid-column: 1 / -1;
    width: min(100%, 360px);
    justify-self: center;
  }
  .expedition-selected-character :is(.expedition-character-details-button, .expedition-start-action) {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 56px;
  }
}

/* Badge elements are anchored directly to the card's empty top-right corner. */
.equipment-card-badges { position: static; display: contents; }
.equipment-equipped-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: auto;
}
.equipment-lock-badge {
  position: absolute;
  top: 5px;
  right: 58px;
}

/* 2026-07-21 requested expedition, bonus reward, and ranking layout refinements. */
.bonus-answer-result.is-correct {
  display: grid;
  gap: .28rem;
}
.bonus-answer-result.is-correct > strong { color: #29483c; }
.bonus-equipment-reward { color: #29483c; }
.bonus-event-equipment-name {
  color: #20a94f;
  font-weight: 950;
}

.ranking-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(150px, 210px);
  align-items: stretch;
  gap: .65rem;
  padding: .7rem;
  border: 1px solid rgb(143 202 109 / .32);
  border-radius: 18px;
  background: rgb(255 255 255 / .08);
}
.ranking-mode-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: .15rem .5rem;
  min-width: 0;
  padding: .62rem .72rem;
  border: 2px solid rgb(215 229 143 / .55);
  border-radius: 14px;
  color: #f6f1ce;
  background: #2f5a49;
  text-align: left;
}
.ranking-mode-trigger span {
  grid-column: 1 / -1;
  color: #c4d7c8;
  font-size: .62rem;
  font-weight: 900;
}
.ranking-mode-trigger strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-mode-trigger em {
  align-self: center;
  color: #f2dc7a;
  font-size: .65rem;
  font-style: normal;
}
.ranking-mode-summary {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: .18rem;
  padding: .45rem .2rem;
}
.ranking-mode-summary span {
  color: #c8d8ce;
  font-size: .62rem;
  font-weight: 900;
}
.ranking-mode-summary p {
  min-width: 0;
  margin: 0;
  color: #eef4e5;
  line-height: 1.42;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ranking-challenge-button { min-height: 100%; }
.ranking-results-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  min-width: 0;
  gap: .75rem;
  align-items: stretch;
}
.ranking-podium,
.ranking-record-list {
  min-width: 0;
  border: 1px solid rgb(143 202 109 / .28);
  border-radius: 22px;
  background: #efe2bf;
  box-shadow: 0 12px 28px rgb(0 0 0 / .14);
}
.ranking-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: .45rem;
  min-height: 410px;
  padding: .8rem;
}
.ranking-podium-place {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  justify-items: center;
  gap: .42rem;
  padding: .7rem .45rem .8rem;
  border: 1px solid rgb(47 77 63 / .2);
  border-radius: 20px 20px 8px 8px;
  color: #29483c;
  background: linear-gradient(180deg, rgb(255 255 255 / .72), rgb(201 185 131 / .44));
  text-align: center;
  overflow: hidden;
}
.ranking-podium-place.is-rank-1 { min-height: 350px; }
.ranking-podium-place.is-rank-2 { min-height: 285px; }
.ranking-podium-place.is-rank-3 { min-height: 245px; }
.ranking-podium-rank {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #173b35;
  background: #f2dc7a;
  box-shadow: 0 3px 0 rgb(105 82 40 / .28);
  font-weight: 950;
}
.ranking-podium-place.is-rank-2 .ranking-podium-rank { background: #d7dce1; }
.ranking-podium-place.is-rank-3 .ranking-podium-rank { background: #d9a76f; }
.ranking-podium-place .ranking-run-look {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .28rem;
  width: 100%;
}
.ranking-podium-place .ranking-run-look canvas {
  width: min(96px, 100%);
  height: auto;
  aspect-ratio: 1;
}
.ranking-podium-place .ranking-run-look > span { justify-items: center; }
.ranking-podium-place .ranking-run-look small {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #526d62;
  font-size: .58rem;
}
.ranking-podium-place .ranking-profile {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: .35rem;
  text-align: left;
}
.ranking-podium-place .ranking-profile .compact-profile-art { width: 2rem; height: 2rem; }
.ranking-podium-place .ranking-profile-copy strong { color: #173b35; }
.ranking-podium-place .ranking-profile-copy small { color: #7b4132; }
.ranking-podium-place .ranking-profile-copy em { color: #7f6420; }
.ranking-podium-result {
  color: #29483c;
  font-size: .7rem;
}
.ranking-podium-empty {
  display: grid;
  min-height: 6rem;
  place-items: center;
  color: #68786f;
}
.ranking-record-list {
  display: grid;
  min-height: 410px;
  align-content: start;
  gap: .55rem;
  padding: .75rem;
  color: #29483c;
}
.ranking-record-list > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .5rem;
}
.ranking-record-list > header h3 { margin: 0; color: #173b35; }
.ranking-record-list > header small { color: #6a766f; }
.ranking-record-list .ranking-table-wrap {
  max-height: 520px;
  overflow: auto;
  border-color: rgb(47 77 63 / .2);
}
.ranking-record-list .ranking-table-wrap th,
.ranking-record-list .ranking-table-wrap td {
  color: #29483c;
  border-bottom-color: rgb(47 77 63 / .14);
  vertical-align: middle;
}
.ranking-record-list .ranking-profile-copy strong { color: #173b35; }
.ranking-record-list .ranking-profile-copy small { color: #7b4132; }
.ranking-record-list .ranking-profile-copy em { color: #7f6420; }
.ranking-mode-picker-backdrop {
  position: fixed;
  z-index: 96;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(7 16 14 / .72);
  backdrop-filter: blur(5px);
}
.ranking-mode-picker-dialog {
  display: grid;
  width: min(640px, 100%);
  max-height: min(88dvh, 720px);
  gap: .8rem;
  padding: 1rem;
  overflow: auto;
  border: 2px solid rgb(143 202 109 / .62);
  border-radius: 22px;
  color: #29483c;
  background: linear-gradient(150deg, #f6edcb, #ded3a8);
  box-shadow: 0 24px 70px rgb(0 0 0 / .48);
}
.ranking-mode-picker-dialog > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .7rem;
}
.ranking-mode-picker-dialog h2 { margin: .08rem 0 0; color: #173b35; }
.ranking-mode-picker-options { display: grid; gap: .55rem; }
.ranking-mode-picker-option {
  display: grid;
  min-width: 0;
  gap: .22rem;
  padding: .72rem;
  border: 2px solid rgb(47 77 63 / .2);
  border-radius: 14px;
  color: #29483c;
  background: rgb(255 255 255 / .5);
  text-align: left;
}
.ranking-mode-picker-option small {
  color: #526d62;
  line-height: 1.42;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ranking-mode-picker-option.is-selected {
  border-color: #4f8f59;
  background: #eef3cf;
  box-shadow: inset 0 0 0 2px rgb(79 143 89 / .15);
}

@media (max-width: 1100px) {
  .ranking-toolbar { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); }
  .ranking-challenge-button { grid-column: 1 / -1; min-height: 48px; }
  .ranking-results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ranking-toolbar { grid-template-columns: 1fr; }
  .ranking-challenge-button { grid-column: auto; }
  .ranking-podium { min-height: 340px; padding: .55rem; gap: .3rem; }
  .ranking-podium-place { padding-inline: .28rem; }
  .ranking-podium-place.is-rank-1 { min-height: 300px; }
  .ranking-podium-place.is-rank-2 { min-height: 245px; }
  .ranking-podium-place.is-rank-3 { min-height: 215px; }
  .ranking-podium-place .ranking-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ranking-podium-place .ranking-profile-copy { justify-items: center; }
  .ranking-podium-place .ranking-profile-copy :is(strong, small, em) { max-width: 100%; }
  .ranking-record-list { min-height: 0; }
}
@media (max-width: 430px) {
  .ranking-podium { grid-template-columns: 1fr; align-items: stretch; min-height: 0; }
  .ranking-podium-place,
  .ranking-podium-place.is-rank-1,
  .ranking-podium-place.is-rank-2,
  .ranking-podium-place.is-rank-3 { min-height: 0; border-radius: 16px; }
  .ranking-podium-place .ranking-run-look { grid-template-columns: 64px minmax(0, 1fr); justify-items: stretch; text-align: left; }
  .ranking-podium-place .ranking-run-look canvas { width: 64px; }
  .ranking-mode-picker-backdrop { place-items: end stretch; padding: 0; }
  .ranking-mode-picker-dialog { width: auto; max-height: 92dvh; border-radius: 22px 22px 0 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* 2026-07-22 responsive hub, equipment, glossary, guardian tree and compact ranking overhaul. */
.hub-section :is(p, li, dd, dt, h1, h2, h3, h4, small, label, em, .studio-kicker, .online-notice, .online-success) {
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hub-section :is(header, section, article, aside, div, span, button, strong) { min-width: 0; }
.run-resume-progress-copy { display: inline; margin-inline-start: .35rem; }
.world-hero-copy p,
.stage-briefing p,
.bonus-panel p,
.glossary-layout p,
.tree-layout p,
.equipment-bag-layout p,
.ranking-panel p {
  max-width: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hub-section :is(
  .preparation-effect,
  .world-hero-copy p,
  .selected-character-card p,
  .expedition-stage-choice small,
  .expedition-character-copy p,
  .expedition-stage-board > header p,
  .world-card strong,
  .world-card small,
  .stage-route-node small,
  .character-deck-card small,
  .expedition-sticky-action strong,
  .ranking-mode-trigger strong,
  .ranking-profile-copy strong,
  .ranking-profile-copy small,
  .ranking-profile-copy em,
  .ranking-podium-place .ranking-run-look small,
  .character-starting-stats dt,
  .character-starting-stats dd
) {
  display: block;
  min-height: 0;
  max-height: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
}

/* Equipment cards: status stays in a compact top cell and options use the full width. */
.equipment-inventory-grid {
  max-height: min(62vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  align-content: start;
  padding-inline-end: .2rem;
}
.equipment-item-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  gap: .42rem .38rem;
  min-width: 0;
  padding: .6rem;
  text-align: left;
}
.equipment-item-main {
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: .48rem;
  min-width: 0;
}
.equipment-item-icon {
  display: grid;
  width: 34px;
  min-width: 34px;
  min-height: 40px;
  place-items: center;
  align-self: center;
}
.equipment-item-card .equipment-item-copy {
  display: grid !important;
  min-width: 0;
  gap: .1rem;
  padding: 0 !important;
}
.equipment-item-card .equipment-item-copy strong,
.equipment-item-card .equipment-item-copy small {
  min-width: 0;
  margin: 0;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.equipment-item-card .equipment-item-copy strong { font-size: .8rem; line-height: 1.25; }
.equipment-item-card .equipment-item-copy small { font-size: .62rem; line-height: 1.35; }
.equipment-item-status {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  max-width: 4.8rem;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .2rem;
  align-self: start;
  justify-self: end;
  padding: 0;
  line-height: 1;
}
.equipment-item-status .equipment-equipped-badge,
.equipment-item-status .equipment-lock-badge {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: none;
}
.equipment-equipped-badge {
  display: inline-grid;
  min-height: 1.35rem;
  place-items: center;
  padding: .16rem .35rem;
  border: 1px solid rgb(40 95 65 / .35);
  border-radius: 999px;
  color: #174a32;
  background: #bfe1bb;
  box-shadow: 0 2px 5px rgb(29 61 44 / .18);
  font-size: .54rem;
  font-weight: 950;
  white-space: nowrap;
}
.equipment-lock-badge {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
}
.equipment-lock-badge .equipment-pixel-icon { width: 16px !important; height: 16px !important; }
.equipment-card-options {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: .2rem .45rem;
  margin: 0;
  padding: .35rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--rarity-color, #6c7c75) 24%, transparent);
  list-style: none;
}
.equipment-card-options li {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem;
  color: #4f665c;
  font-size: .6rem;
  line-height: 1.35;
}
.equipment-card-options li span {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.equipment-card-options li strong { flex: none; color: #215e8c; white-space: nowrap; }
.equipment-mobile-bulk-sale-trigger { display: none; }
.equipment-bag-storage-footer {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  align-items: stretch;
  gap: .75rem;
  margin-top: .85rem;
}
.equipment-pity-status {
  display: grid;
  align-content: center;
  gap: .3rem;
  padding: .85rem;
  border: 2px solid rgb(181 107 215 / .3);
  border-radius: 18px;
  color: #29483c;
  background: linear-gradient(145deg, #f7efd5, #eadcbc);
  box-shadow: 0 5px 0 rgb(104 80 59 / .12);
}
.equipment-pity-status strong { font-size: 1rem; }
.equipment-pity-status small { color: #65736b; line-height: 1.45; }
.equipment-bulk-sale-menu-backdrop { place-items: center; }
.equipment-bulk-sale-menu {
  display: grid;
  width: min(520px, calc(100% - 1.5rem));
  max-height: min(84dvh, 680px);
  gap: .75rem;
  padding: 1rem;
  overflow: auto;
  border: 2px solid #79a85f;
  border-radius: 22px;
  color: #29483c;
  background: linear-gradient(145deg, #fbf5dd, #e6d8b4);
  box-shadow: 0 22px 60px rgb(0 0 0 / .4);
}
.equipment-bulk-sale-menu > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .65rem;
}
.equipment-bulk-sale-menu h2 { margin: .08rem 0 0; }
.equipment-bulk-sale-menu > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }

/* Bonus cards are highlighted only during the actual press. */
.bonus-difficulty-card,
.bonus-difficulty-card.is-selected {
  border-color: rgb(73 99 81 / .28);
  background: #f3e8c3;
  box-shadow: 0 5px 0 rgb(84 91 61 / .22);
  transform: none;
}
.bonus-difficulty-card:active:not(:disabled) {
  border-color: #70b85c;
  background: #e3f1bd;
  box-shadow: 0 2px 0 rgb(52 105 55 / .28);
  transform: translateY(3px);
}
.bonus-difficulty-card:focus-visible { outline: 3px solid #3c7658; outline-offset: 3px; }
.bonus-difficulty-card :is(span, strong, small, em) {
  max-width: none;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Guardian tree: compact pixel-skill buttons with one detailed investment dialog. */
.tree-layout { position: relative; isolation: isolate; }
.tree-layout > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .8rem;
}
.tree-layout > header h2 { margin: 0 0 .25rem; }
.tree-layout > header p { margin: .18rem 0; }
.tree-trunk { height: 8px; margin: .7rem auto; border-radius: 0; background: repeating-linear-gradient(90deg, #765032 0 8px, #987044 8px 16px); image-rendering: pixelated; }
.branches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.tree-skill-branch {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: .5rem;
  padding: .7rem;
  border: 2px solid rgb(73 103 77 / .25);
  border-radius: 18px;
  background: rgb(255 249 225 / .62);
  box-shadow: 0 5px 0 rgb(77 91 62 / .14);
}
.tree-skill-branch h3 { margin: 0; color: #29483c; font-size: .88rem; }
.tree-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: .45rem;
}
.tree-skill-card {
  display: grid;
  min-width: 0;
  min-height: 96px;
  align-content: center;
  justify-items: center;
  gap: .35rem;
  padding: .48rem .35rem;
  border: 2px solid rgb(51 82 63 / .24);
  border-radius: 14px;
  color: #29483c;
  background: linear-gradient(180deg, #fff9e4, #e9ddb9);
  box-shadow: 0 4px 0 rgb(78 84 58 / .2);
  text-align: center;
}
.tree-skill-card:hover,
.tree-skill-card:focus-visible { border-color: #5d9b5d; background: #eff2cf; }
.tree-skill-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgb(78 84 58 / .2); }
.tree-skill-card.is-complete { border-color: #b49b43; background: #f3e8ad; }
.tree-skill-art {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid #29483c;
  border-radius: 7px;
  background: #cfe29a;
  box-shadow: inset -4px -4px 0 rgb(41 72 60 / .18);
  image-rendering: pixelated;
}
.tree-skill-art.is-large { width: 64px; height: 64px; }
.tree-skill-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.tree-skill-icon rect { fill: #2d6d55; }
.tree-skill-icon .tree-skill-icon-highlight { fill: #f2d764; }
.tree-skill-icon.branch-combat rect { fill: #a94d49; }
.tree-skill-icon.branch-abundance rect { fill: #8c722a; }
.tree-skill-icon.branch-fortune rect { fill: #79569a; }
.tree-skill-icon.branch-combat .tree-skill-icon-highlight,
.tree-skill-icon.branch-abundance .tree-skill-icon-highlight,
.tree-skill-icon.branch-fortune .tree-skill-icon-highlight { fill: #fff0a2; }
.tree-skill-copy { display: grid; min-width: 0; gap: .08rem; }
.tree-skill-copy strong { color: #29483c; font-size: .7rem; line-height: 1.25; word-break: keep-all; overflow-wrap: break-word; }
.tree-skill-copy small { color: #6b756d; font-size: .6rem; }
.tree-upgrade-backdrop {
  position: fixed;
  z-index: 98;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(7 18 14 / .74);
  backdrop-filter: blur(5px);
}
.tree-upgrade-dialog {
  display: grid;
  width: min(620px, 100%);
  max-height: min(88dvh, 760px);
  gap: .8rem;
  padding: 1rem;
  overflow: auto;
  border: 3px solid #78a75d;
  border-radius: 22px;
  color: #29483c;
  background: linear-gradient(145deg, #fbf4d8, #dfd1a8);
  box-shadow: 0 24px 70px rgb(0 0 0 / .5);
}
.tree-upgrade-dialog > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .7rem;
}
.tree-upgrade-title-group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; }
.tree-upgrade-title-group h2 { margin: .08rem 0; }
.tree-upgrade-description { margin: 0; padding: .65rem; border-left: 4px solid #72a85c; background: rgb(255 255 255 / .38); }
.tree-upgrade-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.tree-upgrade-effects > div { display: grid; gap: .18rem; padding: .55rem; border-radius: 12px; background: rgb(255 255 255 / .45); }
.tree-upgrade-effects dt { color: #6b756d; font-size: .62rem; font-weight: 900; }
.tree-upgrade-effects dd { margin: 0; color: #29483c; line-height: 1.42; word-break: keep-all; overflow-wrap: break-word; }
.tree-upgrade-invest {
  position: sticky;
  z-index: 1;
  bottom: 0;
  min-height: 48px;
  box-shadow: 0 -8px 18px rgb(223 209 168 / .92);
}

/* Glossary accordion. */
.glossary-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.glossary-section { display: grid; min-width: 0; align-content: start; gap: .45rem; }
.glossary-section h3 { margin: 0; padding-inline: .2rem; }
.glossary-list { display: grid; gap: .4rem; }
.glossary-term {
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgb(55 82 66 / .22);
  border-radius: 14px;
  background: #f5ebca;
  box-shadow: 0 3px 0 rgb(88 83 54 / .12);
}
.glossary-term.is-open { border-color: #6d9d5b; background: #eef1ca; }
.glossary-term-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  padding: .68rem;
  border: 0;
  color: #29483c;
  background: transparent;
  text-align: left;
}
.glossary-term-toggle > span { display: grid; gap: .12rem; }
.glossary-term-toggle strong { font-size: .8rem; }
.glossary-term-toggle small { color: #596d62; line-height: 1.42; }
.glossary-term-toggle b { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; color: #fff8dd; background: #3d6b53; }
.glossary-term-detail { padding: 0 .68rem .7rem; border-top: 1px solid rgb(55 82 66 / .16); }
.glossary-term-detail ul { display: grid; gap: .35rem; margin: .55rem 0 0; padding-inline-start: 1.15rem; }
.glossary-term-detail li { color: #344f43; line-height: 1.5; }

/* Expedition: same structure, world-specific single-pixel palette and patterns. */
.expedition-redesign {
  --expedition-pixel-a: #517d4c;
  --expedition-pixel-b: #294f3f;
  --expedition-paper: #f5e8bd;
  --expedition-button: #6f9d58;
  --expedition-button-dark: #31553f;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--expedition-paper);
  background-image:
    linear-gradient(90deg, rgb(255 255 255 / .12) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / .12) 1px, transparent 1px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--expedition-pixel-a) 16%, transparent) 0 6px, transparent 6px 14px);
  background-size: 8px 8px, 8px 8px, 28px 28px;
  image-rendering: pixelated;
}
.expedition-redesign::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .28;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 76%, var(--expedition-pixel-a) 76% 82%, transparent 82%) 0 0 / 32px 32px,
    linear-gradient(transparent 0 76%, var(--expedition-pixel-b) 76% 82%, transparent 82%) 0 0 / 32px 32px;
  image-rendering: pixelated;
}
.expedition-redesign[data-world="world_1"] { --expedition-pixel-a:#7eaa5b; --expedition-pixel-b:#315d45; --expedition-paper:#eee7b8; --expedition-button:#649253; --expedition-button-dark:#2d5841; }
.expedition-redesign[data-world="world_2"] { --expedition-pixel-a:#d87842; --expedition-pixel-b:#733f32; --expedition-paper:#f0d7a5; --expedition-button:#c5653f; --expedition-button-dark:#6d382e; }
.expedition-redesign[data-world="world_3"] { --expedition-pixel-a:#5caebb; --expedition-pixel-b:#434c7a; --expedition-paper:#d7e2c2; --expedition-button:#418f9d; --expedition-button-dark:#344f70; }
.expedition-redesign[data-world="world_4"] { --expedition-pixel-a:#a85d60; --expedition-pixel-b:#3e414c; --expedition-paper:#dfd1ae; --expedition-button:#815458; --expedition-button-dark:#373b44; }
.expedition-redesign[data-world="world_5"] { --expedition-pixel-a:#c14561; --expedition-pixel-b:#50264e; --expedition-paper:#e0c1ae; --expedition-button:#a43d5b; --expedition-button-dark:#4c294b; }
.expedition-redesign :is(.world-selector-trigger, .stage-carousel-card, .primary-action, .secondary-action, .expedition-avatar-identity) { image-rendering: pixelated; }
.expedition-redesign .world-selector-trigger,
.expedition-redesign .primary-action { border-color: color-mix(in srgb, var(--expedition-button-dark) 70%, #fff); background: var(--expedition-button); }
.expedition-redesign .world-selector-trigger,
.expedition-redesign .primary-action,
.expedition-redesign .world-selector-trigger :is(strong, small, span) { color: #fff8de; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.expedition-redesign .stage-carousel-card.is-selected { border-color: var(--expedition-button-dark); background: color-mix(in srgb, var(--expedition-paper) 82%, #fff); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--expedition-pixel-a) 30%, transparent), 0 5px 0 color-mix(in srgb, var(--expedition-button-dark) 30%, transparent); }

/* Ranking: fixed description space, two-line universal challenge button, compact three-column records. */
.ranking-panel > header {
  border: 1px solid rgb(200 226 185 / .42);
  color: #fff9dc;
  background: linear-gradient(100deg, #294f42, #355f4e);
}
.ranking-panel > header :is(h2, p, strong) { color: #fff9dc !important; opacity: 1; }
.ranking-panel > header p { color: #e3edda !important; }
.ranking-toolbar {
  grid-template-columns: minmax(185px, 245px) minmax(0, 1fr) 82px;
  min-height: 102px;
}
.ranking-mode-summary {
  block-size: 86px;
  min-height: 86px;
  max-height: 86px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  align-content: center;
  padding: .55rem .7rem;
  border: 1px solid rgb(210 229 184 / .28);
  border-radius: 14px;
  color: #fff9dc;
  background: #315b49;
}
.ranking-mode-summary span { color: #d7e7d7 !important; opacity: 1; }
.ranking-mode-summary p { color: #fff9dc !important; opacity: 1; line-height: 1.45; }
.ranking-challenge-button {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-width: 82px;
  min-height: 86px;
  place-items: center;
  align-self: center;
  gap: 0;
  padding: .55rem .35rem;
  line-height: 1.05;
}
.ranking-challenge-button span { display: block; color: inherit; font-size: .88rem; font-weight: 950; white-space: nowrap; }
.ranking-podium {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  min-height: 330px;
}
.ranking-podium-place { gap: .32rem; padding: .62rem .32rem .72rem; }
.ranking-podium-place.is-rank-1 { min-height: 280px; }
.ranking-podium-place.is-rank-2 { min-height: 235px; }
.ranking-podium-place.is-rank-3 { min-height: 205px; }
.ranking-character-only {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: .24rem;
  width: 100%;
  text-align: center;
}
.ranking-character-only canvas { display: block; width: min(78px, 100%); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.ranking-character-only strong { color: #173b35; font-size: .68rem; line-height: 1.25; word-break: keep-all; overflow-wrap: break-word; }
.ranking-character-only.is-missing > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 12px; background: #d8ceb0; }
.ranking-podium-result { color: #29483c; font-size: .66rem; line-height: 1.25; }
.ranking-podium-user { color: #5c5144; font-size: .62rem; font-weight: 900; line-height: 1.25; word-break: keep-all; overflow-wrap: break-word; }
.ranking-record-list .ranking-table-wrap { overflow-x: hidden; }
.ranking-record-list .ranking-table-wrap table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
.ranking-record-list .ranking-table-wrap th:first-child,
.ranking-record-list .ranking-table-wrap td:first-child { width: 48px; text-align: center; }
.ranking-record-list .ranking-table-wrap th:nth-child(3),
.ranking-record-list .ranking-table-wrap td:nth-child(3) { width: 112px; }
.ranking-record-list .ranking-table-wrap th,
.ranking-record-list .ranking-table-wrap td { padding: .55rem .45rem; }
.ranking-record-list .ranking-table-wrap th {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ranking-record-copy { display: grid; min-width: 0; gap: .22rem; }
.ranking-record-copy strong { color: #173b35; font-size: .74rem; line-height: 1.25; }
.ranking-record-copy small { color: #6a5144; font-size: .65rem; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; }
.ranking-record-list .ranking-character-only { grid-template-columns: 46px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; }
.ranking-record-list .ranking-character-only canvas { width: 46px; }
.ranking-record-list .ranking-character-only strong { text-align: left; }

@media (max-width: 760px) {
  .hub-section :is(p, li, dd, dt, h1, h2, h3, h4, small, label, em, .studio-kicker, .online-notice, .online-success) { hyphens: none; }
  .run-resume-progress-copy { display: block; margin: .15rem 0 0; }
  .equipment-bag-storage-footer { grid-template-columns: 1fr; }
  .equipment-inventory-grid { max-height: min(58vh, 560px); }
  .equipment-inventory-tools { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: end; }
  .equipment-order-filter { grid-column: 1; }
  .equipment-mobile-bulk-sale-trigger {
    display: grid;
    grid-column: 2;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 0;
    padding: .3rem;
    border: 2px solid #89523f;
    border-radius: 10px;
    color: #fff8dd;
    background: #b95f4c;
    box-shadow: 0 4px 0 #7a3f35;
    line-height: 1.05;
  }
  .equipment-mobile-bulk-sale-trigger :is(span, strong) { color: inherit; font-size: .72rem; }
  .equipment-bulk-sale { display: none; }
  .equipment-bulk-sale-menu-backdrop { place-items: end stretch; padding: 0; }
  .equipment-bulk-sale-menu { width: auto; max-height: 86dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .branches-grid { grid-template-columns: 1fr; }
  .tree-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glossary-sections { grid-template-columns: 1fr; }
  .ranking-toolbar { grid-template-columns: minmax(0, 1fr) 76px; min-height: 0; }
  .ranking-mode-trigger { grid-column: 1; grid-row: 1; }
  .ranking-challenge-button { grid-column: 2; grid-row: 1; min-width: 76px; min-height: 76px; }
  .ranking-mode-summary { grid-column: 1 / -1; grid-row: 2; block-size: 88px; min-height: 88px; max-height: 88px; }
  .ranking-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 275px; }
  .ranking-podium-place.is-rank-1 { min-height: 240px; }
  .ranking-podium-place.is-rank-2 { min-height: 205px; }
  .ranking-podium-place.is-rank-3 { min-height: 180px; }
  .hub-section :is(
    .preparation-effect,
    .world-hero-copy p,
    .selected-character-card p,
    .expedition-stage-choice small,
    .expedition-character-copy p,
    .expedition-stage-board > header p
  ) {
    display: block;
    min-height: 0;
    max-height: none;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
  }
  .world-hero-copy p { display: block; overflow: visible; -webkit-line-clamp: initial; -webkit-box-orient: initial; }
}

@media (max-width: 520px) {
  .equipment-inventory-grid { grid-template-columns: 1fr !important; max-height: min(56vh, 520px); }
  .equipment-card-options { grid-template-columns: 1fr; }
  .equipment-item-card { min-height: 0; }
  .equipment-bulk-sale-menu > div { grid-template-columns: 1fr; }
  .tree-layout > header { grid-template-columns: 1fr; }
  .tree-layout > header > button { width: 100%; }
  .tree-upgrade-effects { grid-template-columns: 1fr; }
  .ranking-results-grid { grid-template-columns: 1fr; }
  .ranking-record-list { padding: .55rem; }
  .ranking-record-list .ranking-table-wrap th,
  .ranking-record-list .ranking-table-wrap td { padding: .45rem .3rem; }
  .ranking-record-list .ranking-table-wrap th { padding-inline: .18rem; font-size: .66rem; }
  .ranking-record-list .ranking-table-wrap th:first-child,
  .ranking-record-list .ranking-table-wrap td:first-child { width: 36px; }
  .ranking-record-list .ranking-table-wrap th:nth-child(3),
  .ranking-record-list .ranking-table-wrap td:nth-child(3) { width: 88px; }
  .ranking-record-list .ranking-character-only { grid-template-columns: 38px minmax(0, 1fr); gap: .24rem; }
  .ranking-record-list .ranking-character-only canvas { width: 38px; }
}

@media (max-width: 430px) {
  .ranking-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: .22rem;
    min-height: 238px;
    padding: .45rem .3rem;
  }
  .ranking-podium-place,
  .ranking-podium-place.is-rank-1,
  .ranking-podium-place.is-rank-2,
  .ranking-podium-place.is-rank-3 { border-radius: 14px 14px 6px 6px; }
  .ranking-podium-place.is-rank-1 { min-height: 208px; }
  .ranking-podium-place.is-rank-2 { min-height: 178px; }
  .ranking-podium-place.is-rank-3 { min-height: 158px; }
  .ranking-podium-rank { width: 1.65rem; height: 1.65rem; font-size: .7rem; }
  .ranking-podium-place .ranking-character-only { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ranking-podium-place .ranking-character-only canvas { width: min(52px, 100%); }
  .ranking-podium-place .ranking-character-only strong,
  .ranking-podium-result,
  .ranking-podium-user { font-size: .6rem; }
  .ranking-podium-empty { min-height: 4rem; font-size: .56rem; }
}

@media (max-width: 360px) {
  .tree-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-toolbar { grid-template-columns: minmax(0, 1fr) 68px; }
  .ranking-challenge-button { min-width: 68px; }
  .ranking-mode-trigger { padding-inline: .5rem; }
  .ranking-mode-trigger strong { font-size: .72rem; }
  .ranking-mode-summary { block-size: 96px; min-height: 96px; max-height: 96px; }
}

.runtime-update-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(1rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  background: rgba(7, 24, 25, .88);
}

.runtime-update-dialog {
  display: grid;
  width: min(100%, 28rem);
  min-width: 0;
  box-sizing: border-box;
  gap: .85rem;
  padding: clamp(1rem, 6vw, 1.5rem);
  border: 2px solid #d8b96f;
  border-radius: 18px;
  color: #173b35;
  background: #fff8dd;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  text-align: center;
}

.runtime-update-dialog :is(h2, p) { margin: 0; overflow-wrap: break-word; word-break: keep-all; }
.runtime-update-dialog h2 { font-size: clamp(1.2rem, 6vw, 1.7rem); }
.runtime-update-dialog p { line-height: 1.55; }
.runtime-update-dialog button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  white-space: normal;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}