/* Complete 2D Game Shell & Screen Styles (1600 × 900 stage) */
#overlay.fullscreen {
  background: transparent;
  backdrop-filter: none;
}

#overlay.fullscreen #modal {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  text-align: left;
}

#overlay.fullscreen #modal:before {
  display: none;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 15%, #fff6df 0%, #f3d7ad 70%, #e2bc8a 100%);
  color: var(--ink);
}

.screen button {
  transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
}

.screen button:hover:enabled {
  transform: translateY(-2px);
}

.screen button:active:enabled {
  transform: translateY(2px);
}

.screen button:focus-visible,
#loading button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ffe066, 0 5px 0 var(--outline);
}

.screen h1, .screen h2, .screen h3, .screen p {
  margin: 0;
}

.screen button, .screen select {
  font: inherit;
}

.screen .primary, .screen .secondary {
  font-weight: 900;
}

.screen-kicker {
  display: inline-block;
  background: var(--outline);
  color: #ffe07d;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 900;
}

/* ==================== TOP BAR & FOOTER ==================== */
.screen-header {
  height: 92px;
  margin: 0 48px;
  padding: 0 12px;
  border-bottom: 3px solid rgba(61, 33, 26, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

.screen-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.screen-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.screen-heading b {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.85);
}

.screen-heading small {
  font-size: 12.5px;
  color: #6e4636;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.round-button {
  width: 52px;
  height: 52px;
  border: 3px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf7 0%, #f5d8ab 100%);
  box-shadow: 0 5px 0 var(--outline), inset 0 3px 0 #ffffff;
  color: var(--ink);
  font-size: 34px !important;
  font-weight: 900;
  line-height: 1;
}

.round-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ffe6bf 100%);
}

.brand-cookie {
  width: 52px;
  height: 52px;
  background: linear-gradient(180deg, #ffe268 0%, #ff9d2e 100%);
  border: 3px solid var(--outline);
  box-shadow: 0 4px 0 var(--outline), inset 0 3px 0 #fff7c4;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 0 var(--outline);
}

.screen-nav {
  display: flex;
  gap: 12px;
}

.screen-nav button {
  border: 3px solid var(--outline);
  border-radius: 15px;
  background: linear-gradient(180deg, #fffdf7 0%, #f5d9ad 100%);
  box-shadow: 0 5px 0 var(--outline), inset 0 2px 0 #ffffff;
  padding: 11px 18px;
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
}

.screen-nav button:hover:enabled {
  background: linear-gradient(180deg, #ffffff 0%, #ffe8c2 100%);
}

.screen-nav span {
  font-size: 14px;
  margin-left: 6px;
}

.screen-nav button:disabled {
  opacity: 0.55;
  box-shadow: 0 2px 0 var(--outline);
}

.screen-footer {
  position: absolute;
  bottom: 0;
  left: 48px;
  right: 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2.5px solid rgba(61, 33, 26, 0.18);
  color: #633e31;
  font-weight: 800;
  font-size: 12.5px;
  z-index: 3;
}

.screen-footer button {
  border: 2.5px solid var(--outline);
  border-radius: 99px;
  background: linear-gradient(180deg, #f5e6ff 0%, #d8b8ff 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 2px 0 #fff;
  padding: 6px 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  background: #4cd964;
  border: 1.5px solid var(--outline);
  box-shadow: 0 0 8px #4cd964;
  margin-right: 8px;
}

/* ==================== GAME PANELS & STATS ==================== */
.paper-panel {
  background: linear-gradient(180deg, #fffdf7 0%, #f7e3be 100%);
  border: 3.5px solid var(--outline);
  border-radius: 26px;
  box-shadow:
    0 8px 0 var(--outline),
    0 16px 32px rgba(45, 22, 15, 0.25),
    inset 0 3px 0 #ffffff;
}

.paper-label {
  display: inline-block;
  padding: 5px 14px;
  border: 2.5px solid var(--outline);
  border-radius: 99px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: #ffe382;
  background: var(--outline);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.screen-stats {
  display: flex;
  gap: 10px;
  padding: 6px 0;
}

.screen-stats > div {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 2.5px solid var(--outline);
  border-radius: 16px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(61, 33, 26, 0.2);
}

.screen-stats small {
  display: block;
  font-size: 11.5px;
  font-weight: 900;
  color: #784f3e;
  margin-bottom: 6px;
}

.screen-stats strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  text-shadow: 0 1.5px 0 #fff;
}

.screen-stats em {
  font-size: 14px;
  font-style: normal;
  color: #8c624c;
}

.screen-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 16px 26px;
  font-size: 24px !important;
  border-radius: 18px !important;
}

.screen-primary span {
  font-size: 24px;
}

/* ==================== TITLE SCREEN ==================== */
.menu-screen:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 246, 220, 0.12) 0%, rgba(255, 242, 210, 0.55) 58%, rgba(248, 224, 182, 0.92) 100%),
    var(--scene-image);
  background-size: cover;
  background-position: center;
  opacity: 0.96;
}

.menu-scene {
  position: absolute;
  left: 52px;
  top: 115px;
  width: 920px;
  height: 685px;
}

.scene-note {
  position: absolute;
  left: 24px;
  top: 12px;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink);
  transform: rotate(-3deg);
  padding: 8px 16px;
  background: linear-gradient(180deg, #fff59e, #ffd24c);
  border: 2.5px solid var(--outline);
  border-radius: 99px;
  box-shadow: 0 4px 0 var(--outline);
}

.sun-sticker {
  position: absolute;
  right: 58px;
  top: 16px;
  color: #ffbe3b;
  font-size: 96px;
  transform: rotate(10deg);
  filter: drop-shadow(0 5px 0 var(--outline));
}

.title-lockup {
  position: absolute;
  top: 38px;
  left: 60px;
  right: 60px;
  text-align: center;
}

.title-lockup > span {
  display: inline-block;
  background: var(--outline);
  color: #ffe380;
  padding: 5px 18px;
  border-radius: 99px;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

.title-lockup h1 {
  font-size: 74px;
  line-height: 1.05;
  color: #ff8552;
  letter-spacing: 6px;
  margin: 14px 0 0;
  font-weight: 900;
  -webkit-text-stroke: 3.5px var(--outline);
  text-shadow:
    0 6px 0 var(--outline),
    0 12px 24px rgba(45, 22, 15, 0.35);
}

.title-lockup h1 span {
  display: block;
  font-size: 116px;
  color: #ffd447;
  letter-spacing: 12px;
  line-height: 1.02;
  -webkit-text-stroke: 4.5px var(--outline);
  text-shadow:
    0 8px 0 var(--outline),
    0 16px 30px rgba(45, 22, 15, 0.45);
}

.title-lockup p {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 20px;
  background: rgba(255, 252, 240, 0.9);
  border: 2.5px solid var(--outline);
  border-radius: 99px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--outline);
}

.title-friends {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  height: 325px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

.title-friends > div {
  width: 290px;
  position: relative;
  animation: friend-float 3s ease-in-out infinite;
}

.title-friends > div:before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14%;
  width: 72%;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ffe89e 0%, #e0b46a 75%);
  border: 3px solid var(--outline);
  box-shadow: 0 5px 0 var(--outline);
}

.title-friends > div:nth-child(2) {
  width: 345px;
  z-index: 2;
  animation-delay: -0.8s;
}

.title-friends > div:nth-child(3) {
  animation-delay: -1.6s;
}

.title-friends canvas {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(45, 22, 15, 0.28));
}

.scene-caption {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--outline);
  color: #ffe89e;
  padding: 5px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* Right Adventure Quest Board */
.menu-postcard {
  position: absolute;
  right: 58px;
  top: 112px;
  width: 484px;
  padding: 22px 26px 24px;
  border: 4px solid var(--outline);
  border-radius: 28px;
  background: linear-gradient(180deg, #fffdf7 0%, #f6dfc8 45%, #f2d5ae 100%);
  box-shadow:
    0 12px 0 var(--outline),
    0 24px 48px rgba(38, 18, 12, 0.35),
    inset 0 4px 0 #ffffff;
}

.menu-postcard:before {
  display: none !important;
  content: none !important;
}

.stage-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.stage-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 2.5px solid var(--outline);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--outline), inset 0 2px 0 #fff;
  text-align: left;
}

.stage-tab .ui-svg-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.stage-tab span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.stage-tab b {
  font-size: 12px;
  font-weight: 900;
  color: var(--ink);
}

.stage-tab small {
  font-size: 9.5px;
  font-weight: 900;
  color: #7c523e;
}

.stage-tab.active {
  background: linear-gradient(180deg, #fffef6 0%, #ffe699 100%);
  box-shadow: 0 0 0 2.5px var(--tab-color, #ffbe3b), 0 4px 0 var(--outline);
  transform: translateY(-2px);
}

.stage-tab.active small {
  color: #b83d14;
}

.postcard-title {
  margin: 12px 0 10px;
}

.postcard-title > small {
  letter-spacing: 1.5px;
  font-weight: 900;
  font-size: 11px;
  color: #c75326;
}

.postcard-title h2 {
  font-size: 32px !important;
  color: var(--ink) !important;
  font-weight: 900;
  margin: 2px 0 4px !important;
  text-shadow: 0 2px 0 #fff;
}

.postcard-title p {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  color: #5c3a2d;
}

.stage-env-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2.5px solid var(--outline);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(61, 33, 26, 0.16);
  margin-bottom: 10px;
}

.stage-env-pill .ui-svg-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.stage-env-pill b {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink);
}

.stage-env-pill small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #704938;
  margin-top: 1px;
}

.chapter-route {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: rgba(61, 33, 26, 0.08);
  border: 2px solid rgba(61, 33, 26, 0.2);
  border-radius: 18px;
}

.chapter-route:before {
  content: '';
  position: absolute;
  top: 29px;
  left: 34px;
  right: 34px;
  border-top: 3px dashed #8c6244;
}

.chapter-route > span {
  position: relative;
  text-align: center;
  z-index: 1;
}

.chapter-route i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #fffdf6, #e6caa3);
  border: 3px solid var(--outline);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--outline);
  font-style: normal;
  font-size: 18px;
  color: var(--ink);
  font-weight: 900;
}

.chapter-route .final-boss i {
  background: linear-gradient(180deg, #ffe37d, #ff9d2e);
}

.chapter-route b {
  font-size: 10.5px;
  font-weight: 900;
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.chapter-route .visited i {
  background: linear-gradient(180deg, #98f086, #46bf55);
  border-color: var(--outline);
  color: #fff;
  text-shadow: 0 1.5px 0 var(--outline);
}

.menu-postcard .screen-stats {
  margin-bottom: 12px;
  padding: 2px 0;
}

.menu-postcard .screen-stats > div {
  padding: 9px 8px;
}

.menu-postcard .screen-stats strong {
  font-size: 25px;
}

.postcard-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.postcard-links button {
  padding: 10px 10px;
  font-size: 14.5px;
  font-weight: 900;
}

/* ==================== PREPARATION / LOADOUT SCREEN ==================== */
.prep-layout {
  display: grid;
  grid-template-columns: 1fr 410px;
  gap: 24px;
  margin: 14px 48px;
  align-items: start;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section-title > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--outline);
  color: #ffe27a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.section-title h2 {
  font-size: 20px !important;
  font-weight: 900;
  margin: 0 !important;
  color: var(--ink) !important;
  text-shadow: 0 1.5px 0 #fff;
}

.section-title > small {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #7d5440;
}

.stage-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.stage-select-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 3px solid var(--outline);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8 0%, #f5dfb9 100%);
  box-shadow: 0 4px 0 var(--outline), inset 0 2px 0 #fff;
  text-align: left;
  color: var(--ink);
}

.stage-select-card.chosen {
  background: linear-gradient(180deg, #fffef6 0%, #ffeaad 100%);
  box-shadow:
    0 0 0 3.5px var(--stage-color, #ffbe3b),
    0 5px 0 var(--outline),
    inset 0 2px 0 #fff;
  transform: translateY(-2px);
}

.stage-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid var(--outline);
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stage-icon-badge .ui-svg-icon {
  width: 24px;
  height: 24px;
}

.stage-card-top small {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #7d523d;
}

.stage-card-top b {
  display: block;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
}

.stage-stars {
  margin-left: auto;
  font-size: 10.5px;
  color: #ff9d1a;
  text-shadow: 0 1px 0 var(--outline);
  align-self: flex-start;
}

.stage-card-env {
  font-size: 11px;
  font-weight: 800;
  color: #4f3125;
  background: rgba(255, 255, 255, 0.66);
  border: 1.5px solid rgba(61, 33, 26, 0.2);
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 900;
}

.stage-card-foot em {
  font-style: normal;
  color: #6b4536;
}

.stage-card-foot i {
  font-style: normal;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1.5px solid var(--outline);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

.stage-select-card.chosen .stage-card-foot i {
  background: #42b549;
  color: #fff;
}

/* Stage Briefing & 15-Wave Blueprint Box */
.stage-briefing-box {
  padding: 10px 14px;
  border: 3px solid var(--outline);
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdf8 0%, #f4dfc0 100%);
  box-shadow: 0 5px 0 var(--outline), inset 0 2px 0 #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 7px;
  border-bottom: 2px dashed rgba(61, 33, 26, 0.18);
}

.stage-rule-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stage-rule-main .ui-svg-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.stage-rule-main b {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}

.stage-rule-main b small {
  font-size: 10.5px;
  color: #b8451a;
  margin-left: 4px;
}

.stage-rule-main span {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: #5c3a2d;
  margin-top: 2px;
}

.stage-rule-rec {
  flex-shrink: 0;
  text-align: right;
  padding: 4px 11px;
  border-radius: 11px;
  border: 2px solid var(--outline);
  background: linear-gradient(180deg, #fff6cf, #ffd966);
}

.stage-rule-rec small {
  display: block;
  font-size: 9.5px;
  font-weight: 900;
  color: #6e4427;
}

.stage-rule-rec b {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--ink);
}

.wave-blueprint-strip {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
}

.wave-chip {
  padding: 4px 2px;
  border: 2px solid var(--outline);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  box-shadow: 0 2px 0 var(--outline);
}

.wave-chip b {
  font-size: 10px;
  font-weight: 900;
}

.wave-chip small {
  font-size: 8.5px;
  font-weight: 900;
  color: #6b4536;
  margin-top: 1px;
}

.wave-chip.vanguard-chip {
  background: linear-gradient(180deg, #fff7d6, #ffd978);
}

.wave-chip.vanguard-chip small {
  color: #a83c10;
}

.wave-chip.boss-chip {
  background: linear-gradient(180deg, #ffe0dc, #ff9994);
}

.wave-chip.boss-chip small {
  color: #7d151d;
}

.wave-chip.active {
  background: var(--outline);
  color: #ffe27a;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #ffcf40, 0 3px 0 var(--outline);
}

.wave-chip.active small {
  color: #fff;
}

.wave-intel-detail {
  padding: 7px 11px;
  border-radius: 12px;
  background: rgba(61, 33, 26, 0.08);
  border: 1.5px solid rgba(61, 33, 26, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.intel-wave-badge {
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--outline);
  color: #ffe27a;
  font-size: 11px;
  font-weight: 900;
}

.intel-wave-badge.vanguard {
  background: #9e3b14;
  color: #ffe899;
}

.intel-wave-badge.boss {
  background: #9e1b2b;
  color: #ffd9de;
}

.intel-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.intel-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid var(--outline);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink);
}

.intel-tag .ui-svg-icon {
  width: 14px;
  height: 14px;
}

.intel-tag.vanguard-tag {
  background: #ffe388;
  font-weight: 900;
}

.intel-tag.boss-tag {
  background: #ffc4c4;
  font-weight: 900;
}

.intel-hint {
  font-size: 11.5px;
  font-weight: 800;
  color: #4f3023;
}

.squad-title {
  margin-top: 12px;
  margin-bottom: 8px;
}

.prep-bottom-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.mode-card {
  position: relative;
  min-height: 184px;
  text-align: left;
  background: linear-gradient(180deg, #fffdf8 0%, #f5dfb9 100%);
  border: 3px solid var(--outline);
  border-radius: 18px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  box-shadow:
    0 5px 0 var(--outline),
    inset 0 2px 0 #ffffff;
}

.mode-card[data-mode="boss"] {
  background: linear-gradient(180deg, #f5fcff 0%, #d4eefc 100%);
}

.mode-card[data-mode="legend"] {
  background: linear-gradient(180deg, #fbf5ff 0%, #e5d1ff 100%);
}

.mode-card.chosen {
  border: 3px solid var(--outline);
  box-shadow:
    0 0 0 3.5px #ffcf40,
    0 6px 0 var(--outline),
    inset 0 2px 0 #ffffff;
  transform: translateY(-2px);
}

.mode-art {
  height: 70px;
  width: 100%;
  text-align: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, transparent 70%);
  border-radius: 12px;
  margin-bottom: 3px;
}

.mode-art canvas {
  height: 72px;
  width: 72px;
  filter: drop-shadow(0 4px 0 rgba(45, 22, 15, 0.22));
}

.mode-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.mode-copy > small {
  display: inline-block;
  align-self: flex-start;
  background: rgba(61, 33, 26, 0.12);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 8.5px;
  letter-spacing: 0.6px;
  color: var(--ink);
  font-weight: 900;
}

.mode-copy > b {
  font-size: 15px;
  font-weight: 900;
  margin: 3px 0;
  color: var(--ink);
}

.mode-copy > span {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #5c3a2d;
  margin-bottom: 6px;
}

.mode-copy > i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 900;
  margin-top: auto;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
}

.mode-card.chosen .mode-copy > i {
  background: linear-gradient(180deg, #86e677, #3cb043);
  color: #fff;
  text-shadow: 0 1px 0 var(--outline);
  box-shadow: 0 2px 0 var(--outline);
}

.prep-squad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.friend-ticket {
  position: relative;
  background: linear-gradient(180deg, #fffef9 0%, #f7e1b8 100%);
  border: 3px solid var(--outline);
  border-radius: 16px;
  padding: 8px 4px 10px;
  text-align: center;
  box-shadow: 0 5px 0 var(--outline), inset 0 2px 0 #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.friend-ticket.fusion-ticket {
  background: linear-gradient(180deg, #faf2ff 0%, #dfc4ff 100%);
}

.ticket-stars {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 9.5px;
  color: #ffad1f;
  text-shadow: 0 1px 0 var(--outline);
}

.friend-ticket > div {
  height: 96px;
  display: grid;
  place-items: center;
}

.friend-ticket canvas {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 4px 0 rgba(45, 22, 15, 0.2));
}

.friend-ticket > b {
  font-size: 12px;
  font-weight: 900;
  display: block;
  color: var(--ink);
  white-space: nowrap;
}

.friend-ticket > small {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: var(--outline);
  padding: 2px 6px;
  border-radius: 99px;
  margin-top: 4px;
}

/* Right Backpack Loadout Panel */
.prep-side {
  padding: 18px 22px;
}

.prep-side .section-title {
  gap: 10px;
  margin-bottom: 8px;
}

.prep-side > p {
  font-size: 12.5px;
  font-weight: 800;
  color: #5c3a2d;
  margin-bottom: 14px;
}

.prep-side > p > b {
  float: right;
  background: var(--outline);
  color: #ffe27a;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
}

.prep-gear-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prep-gear {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2.5px solid var(--outline);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8 0%, #f5dfb8 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 2px 0 #ffffff;
  text-align: left;
  padding: 9px 12px;
  color: var(--ink);
}

.prep-gear.chosen {
  background: linear-gradient(180deg, #eaffde 0%, #bde89e 100%);
  box-shadow: 0 0 0 2px #4cc456, 0 3px 0 var(--outline);
}

.prep-gear svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.prep-gear span {
  flex: 1;
}

.prep-gear b {
  font-size: 14px;
  font-weight: 900;
  display: block;
}

.prep-gear small {
  font-size: 11px;
  font-weight: 700;
  color: #5c3a2d;
  display: block;
  margin-top: 2px;
}

.prep-gear i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--outline);
  background: rgba(255, 255, 255, 0.8);
  font-style: normal;
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
}

.prep-gear.chosen i {
  background: #3eb54a;
  color: #fff;
}

.departure-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 16px 0;
  padding: 12px 14px;
  background: rgba(61, 33, 26, 0.08);
  border: 2px solid rgba(61, 33, 26, 0.2);
  border-radius: 14px;
}

.departure-info span {
  font-size: 12px;
  font-weight: 800;
  color: #5c3a2d;
  display: flex;
  justify-content: space-between;
}

.departure-info b {
  color: var(--ink);
  font-weight: 900;
}

.practice-note {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #704938;
  margin-top: 12px;
}

/* ==================== SETTINGS SCREEN ==================== */
.settings-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 36px;
  max-width: 1320px;
  margin: 22px auto;
}

.settings-companion {
  padding: 28px 20px;
  text-align: center;
}

.settings-companion > div:first-of-type {
  height: 265px;
  margin: 14px auto 0;
}

.settings-companion canvas {
  height: 260px;
  width: 260px;
  filter: drop-shadow(0 6px 0 rgba(45, 22, 15, 0.22));
}

.settings-companion h2 {
  font-size: 30px !important;
  font-weight: 900;
  margin: 14px 0 10px !important;
}

.settings-companion p {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.75;
  color: #5c3a2d;
}

.settings-context {
  display: inline-block;
  background: linear-gradient(180deg, #fff59e, #ffd24c);
  padding: 9px 20px;
  border: 2.5px solid var(--outline);
  border-radius: 99px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 900;
  margin-top: 18px;
  box-shadow: 0 3px 0 var(--outline);
}

.settings-card {
  padding: 14px 28px 20px;
  max-height: 705px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #8c5c3e #fff6e6;
}

.settings-section-title {
  font-size: 12px;
  letter-spacing: 1px;
  color: #c24e22;
  font-weight: 900;
  padding: 10px 0 6px;
  border-bottom: 2px solid rgba(61, 33, 26, 0.16);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  gap: 16px;
}

.setting-row b {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--ink);
}

.setting-row p {
  font-size: 11px;
  font-weight: 700;
  color: #6b4539;
  margin-top: 2px;
  line-height: 1.4;
}

.setting-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 98px;
  height: 38px;
  padding: 4px 11px 4px 5px;
  flex-shrink: 0;
  background: #dec5a4;
  border: 2.5px solid var(--outline);
  border-radius: 99px;
  color: #5c3a2d;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.6);
}

.setting-switch i {
  display: block;
  width: 24px;
  height: 24px;
  background: #fffdf7;
  border: 2px solid var(--outline);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--outline);
}

.setting-switch[aria-checked="true"] {
  flex-direction: row-reverse;
  padding: 4px 5px 4px 11px;
  background: linear-gradient(180deg, #86e677, #42b549);
  border-color: var(--outline);
  color: #fff;
  text-shadow: 0 1px 0 var(--outline);
}

.setting-switch[aria-checked="true"] i {
  background: #fff;
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  height: 40px;
}

.volume-row > span {
  min-width: 96px;
}

.volume-row input {
  flex: 1;
  accent-color: #e87e25;
  height: 8px;
  cursor: pointer;
}

.volume-row output {
  width: 48px;
  text-align: right;
  font-weight: 900;
}

.volume-row button {
  width: 36px;
  height: 32px;
  border-radius: 10px;
  border: 2.5px solid var(--outline);
  background: linear-gradient(180deg, #fffdf6, #f5d6a3);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 3px 0 var(--outline);
}

.setting-row select {
  width: 98px;
  border: 2.5px solid var(--outline);
  background: linear-gradient(180deg, #fffdf6, #f5d8ab);
  color: var(--ink);
  border-radius: 12px;
  padding: 7px 12px;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--outline);
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid rgba(61, 33, 26, 0.16);
  margin-top: 10px;
  padding-top: 14px;
}

.settings-actions .primary {
  min-width: 220px;
  font-size: 18px;
  padding: 12px 24px;
}

.settings-actions .secondary {
  font-size: 13px;
}

/* ==================== PLAY GUIDE SCREEN ==================== */
.guide-lead {
  text-align: center;
  margin: 24px auto 22px;
}

.guide-lead h1 {
  font-size: 38px;
  font-weight: 900;
  margin: 12px 0 8px;
  color: var(--ink);
  text-shadow: 0 2px 0 #fff;
}

.guide-lead p {
  font-size: 14.5px;
  font-weight: 800;
  color: #5c3a2d;
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 80px;
}

.guide-card {
  position: relative;
  padding: 22px 24px 26px;
  text-align: center;
}

.step-number {
  position: absolute;
  top: 16px;
  left: 18px;
  font-size: 12px;
  background: var(--outline);
  color: #ffe27a;
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 900;
}

.guide-card > div {
  height: 175px;
}

.guide-card canvas {
  height: 175px;
  width: 175px;
  filter: drop-shadow(0 5px 0 rgba(45, 22, 15, 0.22));
}

.guide-card h2 {
  font-size: 24px !important;
  font-weight: 900;
  margin: 12px 0 12px !important;
  color: var(--ink);
}

.guide-card p {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.75;
  color: #5c3a2d;
}

.guide-card kbd {
  display: inline-block;
  min-width: 26px;
  border: 2px solid var(--outline);
  border-radius: 6px;
  padding: 1px 6px;
  background: #ffe275;
  color: var(--ink);
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 2px 0 var(--outline);
}

.guide-bottom {
  margin: 24px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  border: 3px solid var(--outline);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf6 0%, #f5dbb0 100%);
  box-shadow: 0 6px 0 var(--outline), inset 0 2px 0 #fff;
}

.guide-bottom b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: #c74b20;
  margin-bottom: 5px;
}

.guide-bottom > div > span {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.guide-bottom .primary {
  font-size: 18px;
  min-width: 210px;
  padding: 13px 24px;
}

/* ==================== RECORDS / HALL OF FAME SCREEN ==================== */
.records-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 32px;
  margin: 32px 72px;
}

.record-overview {
  padding: 22px 24px;
  text-align: center;
}

.record-overview > div:first-of-type {
  height: 185px;
  margin-top: 4px;
}

.record-overview canvas {
  height: 185px;
  width: 185px;
  filter: drop-shadow(0 5px 0 rgba(45, 22, 15, 0.22));
}

.record-overview h2 {
  font-size: 24px !important;
  font-weight: 900;
  margin: 10px 0 12px !important;
}

.record-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.record-totals strong {
  font-size: 26px;
}

.stage-best-Badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.stage-best-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 10px;
  border: 2px solid var(--outline);
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
}

.stage-best-pill .ui-svg-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.stage-best-pill b {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-best-pill em {
  font-style: normal;
  color: #b83d14;
}

.record-overview > small {
  font-size: 11px;
  font-weight: 800;
  color: #6b4539;
  display: block;
  margin-top: 12px;
}

.recent-runs {
  padding: 28px;
  min-height: 610px;
  display: flex;
  flex-direction: column;
}

.run-table-head,
.run-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.7fr 1fr;
  align-items: center;
  gap: 15px;
}

.run-table-head {
  font-size: 12px;
  font-weight: 900;
  color: #6b4539;
  padding: 12px 15px;
  border-bottom: 3px solid var(--outline);
}

.run-row {
  padding: 15px;
  border-bottom: 1.5px dashed rgba(61, 33, 26, 0.22);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.run-row b {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  display: inline-block;
  text-align: center;
  max-width: 120px;
}

.run-row .won {
  background: #86e677;
  color: var(--ink);
}

.run-row .lost {
  background: #ffd4c4;
  color: #7d2f23;
}

.recent-runs > .secondary {
  margin-top: auto;
  align-self: flex-end;
}

.empty-journal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6b4539;
}

.empty-journal > span {
  font-size: 72px;
}

.empty-journal h3 {
  font-size: 22px;
  font-weight: 900;
  margin: 18px 0 10px;
  color: var(--ink);
}

.empty-journal p {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

/* ==================== PAUSE & LEAVE DIALOGS ==================== */
#overlay[data-mode="pause"] #modal {
  width: 650px;
  padding: 26px 44px 30px;
}

#overlay[data-mode="leave"] #modal {
  width: 650px;
}

.pause-art {
  height: 135px;
}

.pause-art canvas {
  width: 135px;
  height: 135px;
  filter: drop-shadow(0 5px 0 rgba(45, 22, 15, 0.22));
}

.pause-layout .screen-kicker {
  margin-top: 8px;
}

.pause-layout h2 {
  font-size: 34px !important;
  margin: 10px 0 !important;
}

.pause-layout .modal-desc {
  margin: 6px 0 18px;
  font-size: 13.5px;
}

.pause-layout .screen-stats {
  margin: 0 0 20px;
}

.pause-layout .screen-stats strong {
  font-size: 26px;
}

.pause-layout .screen-primary {
  font-size: 22px !important;
  justify-content: center;
}

.pause-links {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}

.pause-links button {
  flex: 1;
  padding: 11px 6px;
  font-size: 13.5px;
}

.pause-bottom {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.pause-bottom button {
  border: 2px solid var(--outline);
  border-radius: 10px;
  background: rgba(61, 33, 26, 0.08);
  color: var(--ink);
  font-weight: 900;
  font-size: 12.5px;
  padding: 7px 16px;
}

.pause-bottom button:hover {
  background: rgba(61, 33, 26, 0.16);
}

.pause-layout > small {
  display: block;
  color: #6b4539;
  font-weight: 800;
  font-size: 11px;
  margin-top: 12px;
}

/* ==================== VICTORY / DEFEAT RESULT SCREEN ==================== */
.result-screen {
  background: radial-gradient(ellipse at 50% 8%, #fff6c9 0%, #f5dfb4 62%, #e6be86 100%);
}

.result-screen.result-loss {
  background: radial-gradient(ellipse at 50% 8%, #f7e4f2 0%, #f2d9bf 65%, #dfc09e 100%);
}

.result-header {
  margin: 0 64px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid rgba(61, 33, 26, 0.2);
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
}

.result-header b {
  background: var(--outline);
  color: #ffe27a;
  padding: 5px 14px;
  border-radius: 99px;
  letter-spacing: 1.5px;
  font-size: 11px;
}

.result-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  height: 270px;
  padding: 12px 80px;
}

.result-mascot {
  width: 245px;
  height: 240px;
  flex-shrink: 0;
}

.result-mascot canvas {
  width: 240px;
  height: 240px;
  filter: drop-shadow(0 8px 0 rgba(45, 22, 15, 0.25));
  animation: friend-float 3s ease-in-out infinite;
}

.result-loss .result-mascot canvas {
  transform: rotate(-7deg);
  animation: none;
}

.result-ribbon {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(180deg, #98f086, #42b549);
  color: #fff;
  text-shadow: 0 1.5px 0 var(--outline);
  font-size: 12px;
  letter-spacing: 2px;
  border-radius: 99px;
  border: 2.5px solid var(--outline);
  box-shadow: 0 3px 0 var(--outline);
  font-weight: 900;
}

.result-loss .result-ribbon {
  background: linear-gradient(180deg, #ff99a8, #d9384a);
}

.result-hero h1 {
  font-size: 44px;
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 2px 0 #fff;
  margin: 10px 0;
}

.result-hero p {
  font-size: 15px;
  font-weight: 800;
  color: #5c3a2d;
  line-height: 1.7;
}

.result-tip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--outline);
  padding: 5px 14px;
  border-radius: 99px;
  margin-top: 10px;
}

.result-report {
  margin: 0 72px;
  padding: 16px 28px 22px;
  position: relative;
}

.result-report .screen-stats strong {
  font-size: 32px;
}

.result-secondary-stats {
  display: flex;
  justify-content: center;
  gap: 36px;
  padding: 12px 0;
  border-top: 2px dashed rgba(61, 33, 26, 0.2);
  border-bottom: 2px dashed rgba(61, 33, 26, 0.2);
  font-size: 13px;
  font-weight: 800;
  color: #5c3a2d;
  margin: 10px 0 16px;
}

.result-secondary-stats b {
  margin-left: 8px;
  color: var(--ink);
  font-weight: 900;
}

.result-team-title {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 12px;
}

.result-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100px;
}

.result-friend {
  display: flex;
  align-items: center;
  flex: 1;
  border: 2.5px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf8 0%, #f5dfb8 100%);
  box-shadow: 0 4px 0 var(--outline), inset 0 2px 0 #fff;
  padding: 4px 10px;
  min-width: 0;
}

.result-friend > div {
  width: 88px;
  height: 94px;
  flex-shrink: 0;
}

.result-friend canvas {
  width: 88px;
  height: 88px;
  margin-top: 3px;
}

.result-friend b {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  display: block;
}

.result-friend small {
  font-size: 11px;
  font-weight: 800;
  color: #8c583a;
  display: block;
  margin-top: 4px;
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 22px 0;
}

.result-actions .primary {
  min-width: 310px;
  font-size: 22px;
}

.result-actions .secondary {
  min-width: 170px;
  font-size: 16px;
  padding: 15px 20px;
}

.result-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.result-confetti i {
  position: absolute;
  left: calc(var(--i) * 4.2%);
  top: -20px;
  width: 11px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid var(--outline);
  background: #ff7e6b;
  animation: confetti-fall calc(5.5s + var(--i) * 0.12s) linear infinite;
  animation-delay: calc(var(--i) * -0.35s);
}

.result-confetti i:nth-child(3n) {
  background: #7be876;
}

.result-confetti i:nth-child(3n+1) {
  background: #ffd54a;
}

.result-loss .result-confetti {
  display: none;
}

/* ==================== LOADING SCREEN ==================== */
#loading {
  background: radial-gradient(ellipse at 50% 30%, #fff8e2 0%, #edd0a1 75%, #d6ad75 100%);
  gap: 0;
  overflow: hidden;
}

#loading:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--scene-image);
  background-size: cover;
  opacity: 0.25;
  pointer-events: none;
}

.boot-stamp {
  position: absolute;
  top: 38px;
  left: 52px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 #fff;
}

.boot-stamp span {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  color: #6b4539;
  margin-top: 5px;
}

.boot-card {
  position: relative;
  width: 640px;
  padding: 36px 52px 34px;
  border: 4px solid var(--outline);
  border-radius: 32px;
  background: linear-gradient(180deg, #fffdf8 0%, #f7e3be 100%);
  box-shadow:
    0 12px 0 var(--outline),
    0 28px 60px rgba(45, 22, 15, 0.35),
    inset 0 4px 0 #ffffff;
  text-align: center;
}

.boot-card h1 {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.3;
  margin: 18px 0 0;
  color: var(--ink);
  text-shadow: 0 2px 0 #fff;
}

.boot-card h1 em {
  font-style: normal;
  color: #d95b26;
}

.boot-card p {
  font-size: 14px !important;
  font-weight: 800;
  color: #5c3a2d !important;
  margin: 14px 0;
}

#loading-friends {
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin: 10px 0;
}

#loading-friends canvas {
  width: 155px;
  height: 155px;
  filter: drop-shadow(0 6px 0 rgba(45, 22, 15, 0.22));
  animation: friend-float 2s ease-in-out infinite;
}

#loading-friends canvas:nth-child(2) {
  animation-delay: -0.5s;
}

#loading-friends canvas:nth-child(3) {
  animation-delay: -1s;
}

.boot-cookie {
  font-size: 70px;
  color: #ffad33;
  padding: 20px;
  animation: friend-float 1.2s ease-in-out infinite;
}

#loading-progress {
  height: 18px;
  border-radius: 99px;
  border: 3px solid var(--outline);
  background: #3b201b;
  padding: 2px;
  overflow: hidden;
}

#loading-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: repeating-linear-gradient(120deg, #74e368 0 18px, #ffd54a 18px 36px);
  transition: width 0.25s;
}

.boot-progress-copy {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 900;
  color: #5c3a2d;
  margin: 10px 0 22px;
}

.boot-progress-copy b {
  color: #2f8f46;
  font-size: 14px;
}

#loading-enter {
  width: 100%;
  font-size: 22px;
  min-width: 0;
}

#loading-enter:disabled {
  background: #d9c3a5;
  box-shadow: 0 3px 0 var(--outline);
  border-color: var(--outline);
  color: #6e5241;
  text-shadow: none;
}

.boot-tip {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--outline);
  color: #ffe27a;
  padding: 7px 22px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

.boot-tip span {
  color: #fff6dc;
  font-weight: 800;
  margin-left: 10px;
}

/* ==================== SCREEN CUSTOM SVG ICON OVERRIDES ==================== */
.round-button {
  display: grid;
  place-items: center;
  padding: 0;
}

.round-button .ui-svg-icon {
  width: 28px;
  height: 28px;
  vertical-align: 0;
}

.brand-cookie .ui-svg-icon {
  width: 36px;
  height: 36px;
  vertical-align: 0;
}

.screen-nav button,
.screen-footer button,
.postcard-links button,
.pause-links button,
.pause-bottom button,
.result-actions button,
#loading-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.screen-nav button .ui-svg-icon,
.postcard-links button .ui-svg-icon,
.pause-links button .ui-svg-icon,
.pause-bottom button .ui-svg-icon,
.result-actions button .ui-svg-icon {
  width: 20px;
  height: 20px;
  vertical-align: 0;
}

.screen-footer button .ui-svg-icon {
  width: 17px;
  height: 17px;
  vertical-align: 0;
}

.sun-sticker {
  width: 96px;
  height: 96px;
}

.sun-sticker .ui-svg-icon {
  width: 96px;
  height: 96px;
  vertical-align: 0;
}

.chapter-route i .ui-svg-icon {
  width: 26px;
  height: 26px;
  vertical-align: 0;
}

.screen-primary span {
  display: inline-flex;
  align-items: center;
}

.screen-primary .ui-svg-icon,
#loading-enter .ui-svg-icon {
  width: 25px;
  height: 25px;
  vertical-align: 0;
  filter: drop-shadow(0 2px 0 var(--outline));
}

.prep-gear i .ui-svg-icon {
  width: 18px;
  height: 18px;
  vertical-align: 0;
}

.empty-journal > span .ui-svg-icon {
  width: 78px;
  height: 78px;
  vertical-align: 0;
}

.boot-cookie .ui-svg-icon {
  width: 72px;
  height: 72px;
  vertical-align: 0;
}

/* ==================== SANCTUARY & REWARD SYSTEM STYLES ==================== */
.nav-candy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 3px solid var(--outline);
  border-radius: 99px;
  background: linear-gradient(180deg, #fff9db 0%, #ffd966 100%);
  box-shadow: 0 4px 0 var(--outline), inset 0 2px 0 #fff;
  color: var(--ink);
  font-weight: 900;
}

.nav-candy-pill .ui-svg-icon {
  width: 22px;
  height: 22px;
}

.nav-candy-pill b {
  font-size: 16px;
  font-weight: 900;
  color: #8f320a;
}

.nav-candy-pill small {
  font-size: 11px;
  font-weight: 900;
  color: #5c3a2d;
}

.nav-sanctuary-btn,
.sanctuary-link-btn {
  background: linear-gradient(180deg, #f8ecff 0%, #dab6ff 100%) !important;
  color: var(--ink) !important;
}

.postcard-links.three-cols {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.postcard-links.three-cols button {
  padding: 10px 6px;
  font-size: 13px;
}

.footer-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-lane-buff {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1.5px solid var(--outline);
  background: var(--lane-color, #ffe066);
  color: var(--ink);
  font-size: 8.5px;
  font-weight: 900;
  margin-bottom: 2px;
  z-index: 2;
}

.friend-ticket .ticket-stars {
  top: 26px;
  right: 7px;
}

.compact-gear-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.compact-gear-grid .prep-gear {
  padding: 6px 8px;
  gap: 8px;
  border-radius: 12px;
}

.compact-gear-grid .prep-gear svg {
  width: 28px;
  height: 28px;
}

.compact-gear-grid .prep-gear b {
  font-size: 12px;
}

.compact-gear-grid .prep-gear small {
  font-size: 9.5px;
  line-height: 1.2;
}

.compact-gear-grid .prep-gear i {
  width: 22px;
  height: 22px;
}

.prep-gear.locked-gear {
  background: linear-gradient(180deg, #f3e9fb 0%, #dcc5f2 100%);
  opacity: 0.92;
}

.prep-gear.locked-gear small {
  color: #7928a1;
  font-weight: 900;
}

/* Sanctuary Fullscreen Layout */
.sanctuary-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 20px;
  margin: 12px 48px;
  align-items: start;
}

.sanctuary-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sanctuary-wallet-card {
  padding: 12px 18px;
  background: linear-gradient(180deg, #fffdf4 0%, #ffe69e 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wallet-main > .ui-svg-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 0 rgba(61, 33, 26, 0.25));
}

.wallet-main small {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #9e4116;
}

.wallet-main h2 {
  font-size: 24px !important;
  font-weight: 900;
  color: var(--ink);
}

.wallet-main h2 b {
  color: #c94414;
  font-size: 28px;
}

.wallet-main p {
  font-size: 11.5px;
  font-weight: 800;
  color: #5c3a2d;
}

.wallet-bonuses {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding-top: 7px;
  border-top: 2px dashed rgba(61, 33, 26, 0.2);
}

.wallet-bonuses span {
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid var(--outline);
  border-radius: 8px;
  padding: 3px 4px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  color: #5c3a2d;
}

.wallet-bonuses b {
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink);
}

.sanctuary-panel {
  padding: 12px 16px;
}

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

.recruit-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2.5px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffef8 0%, #f5dfb8 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 2px 0 #fff;
}

.recruit-card.owned {
  background: linear-gradient(180deg, #f3ffec 0%, #d4f2c2 100%);
}

.recruit-art {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, transparent 72%);
  border-radius: 12px;
}

.recruit-art canvas {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 3px 0 rgba(45, 22, 15, 0.2));
}

.recruit-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recruit-head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.role-pill {
  padding: 1.5px 6px;
  border-radius: 99px;
  background: var(--outline);
  color: #ffe27a;
  font-size: 9.5px;
  font-weight: 900;
}

.recruit-head b {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}

.recruit-info p {
  font-size: 10.5px;
  font-weight: 800;
  color: #5c3a2d;
  line-height: 1.3;
}

.owned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  background: #42b549;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  text-shadow: 0 1px 0 var(--outline);
}

.owned-badge .ui-svg-icon {
  width: 13px;
  height: 13px;
}

.recruit-btn,
.royal-buy-btn,
.sanc-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  border-radius: 10px !important;
  min-width: 0 !important;
}

.recruit-btn .ui-svg-icon,
.royal-buy-btn .ui-svg-icon,
.sanc-buy-btn .ui-svg-icon {
  width: 15px;
  height: 15px;
}

.royal-gear-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.royal-gear-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 9px 8px;
  border: 2.5px solid var(--outline);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8 0%, #f5dfb8 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 2px 0 #fff;
}

.royal-gear-card.owned {
  background: linear-gradient(180deg, #f3ffec 0%, #d4f2c2 100%);
}

.royal-gear-card svg {
  width: 34px;
  height: 34px;
}

.royal-gear-copy b {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink);
}

.royal-gear-copy small {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: #5c3a2d;
  margin-top: 2px;
}

.sanctuary-right {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sanctuary-upgrades-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.sanctuary-upgrade-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border: 2.5px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffef9 0%, #f6e0b8 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 2px 0 #fff;
}

.sanctuary-upgrade-card.maxed {
  background: linear-gradient(180deg, #fff8d9 0%, #ffe082 100%);
}

.sanc-up-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sanc-up-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 2px solid var(--outline);
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sanc-up-icon .ui-svg-icon {
  width: 24px;
  height: 24px;
}

.sanc-up-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sanc-up-title b {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ink);
}

.sanc-lv-badge {
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--outline);
  color: #ffe27a;
  font-size: 9.5px;
  font-weight: 900;
}

.sanc-up-top p {
  font-size: 10.5px;
  font-weight: 800;
  color: #5c3a2d;
  margin-top: 2px;
}

.sanc-pips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.sanc-pips i {
  height: 7px;
  border-radius: 99px;
  border: 1.5px solid var(--outline);
  background: rgba(61, 33, 26, 0.14);
}

.sanc-pips i.filled {
  background: linear-gradient(90deg, #ffcf40, #ff8826);
}

.sanc-up-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sanc-stat-now {
  font-size: 10.5px;
  font-weight: 900;
  color: #8f320a;
}

.synergy-guide-box {
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(61, 33, 26, 0.08);
  border: 2px solid rgba(61, 33, 26, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.synergy-guide-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
}

.synergy-guide-head .ui-svg-icon {
  width: 18px;
  height: 18px;
}

.synergy-guide-head small {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  color: #6b4536;
}

.synergy-guide-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.synergy-guide-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid var(--outline);
  font-size: 10px;
}

.synergy-guide-item b {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--syn-color, #ffd447);
  border: 1px solid var(--outline);
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
}

.synergy-guide-item span {
  font-weight: 800;
  color: #4f3125;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Result Screen Reward Card */
.result-reward-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fffdf0 0%, #ffe285 100%);
  max-width: 360px;
  flex-shrink: 0;
}

.result-reward-card > .ui-svg-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 0 rgba(61, 33, 26, 0.25));
}

.reward-card-copy small {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  color: #8f320a;
}

.reward-card-copy strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 1.5px 0 #fff;
  margin: 2px 0 5px;
}

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

.reward-chips span {
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--outline);
  font-size: 10px;
  font-weight: 900;
  color: var(--ink);
}

.reward-chips .clear-chip {
  background: #86e677;
}

/* ==================== 2D ADVENTURE WORLD MAP & WINDING TRAIL ==================== */
/* Title Screen Mini World Map */
.mini-world-map {
  position: relative;
  height: 112px;
  margin-top: 10px;
  border: 3px solid var(--outline);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--outline), inset 0 2px 0 #fff;
  background: #62c6e3;
  overflow: hidden;
}

.mini-world-map .world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mini-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.mini-map-pin:hover:enabled {
  transform: translate(-50%, -54%) scale(1.06);
}

.mini-pin-disc {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid var(--outline);
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffe699 70%, #f0b23a 100%);
  box-shadow: 0 3px 0 var(--outline);
  display: grid;
  place-items: center;
}

.mini-pin-disc .ui-svg-icon {
  width: 21px;
  height: 21px;
}

.mini-map-pin.active .mini-pin-disc {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff0a8 55%, var(--pin-color, #ffbe3b) 100%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--outline), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.mini-pin-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  background: rgba(255, 253, 245, 0.95);
  box-shadow: 0 2px 0 var(--outline);
  line-height: 1.1;
}

.mini-pin-label b {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--ink);
}

.mini-pin-label small {
  font-size: 8.5px;
  font-weight: 900;
  color: #b83d14;
}

.mini-here-flag {
  position: absolute;
  bottom: calc(100% + 2px);
  padding: 1.5px 6px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  background: #ff5964;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--outline);
  animation: friend-float 1.6s ease-in-out infinite;
}

/* Campaign / Preparation Full Adventure World Map Board */
.world-map-board {
  border: 3.5px solid var(--outline);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf8 0%, #f4dfc0 100%);
  box-shadow: 0 6px 0 var(--outline), inset 0 2px 0 #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.world-map-viewport {
  position: relative;
  width: 100%;
  height: 205px;
  border-bottom: 3px solid var(--outline);
  background: #62c6e3;
  overflow: hidden;
}

.world-map-viewport .world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.world-map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-map-node:hover:enabled {
  transform: translate(-50%, -53%) scale(1.05);
  z-index: 4;
}

.world-map-node.chosen {
  z-index: 5;
}

.map-node-ring {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.75);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.world-map-node.chosen .map-node-ring {
  opacity: 1;
  border-color: #fff8b8;
  background: radial-gradient(circle, rgba(255, 230, 102, 0.45) 0%, transparent 72%);
  box-shadow: 0 0 18px var(--stage-color, #ffbe3b);
  transform: scale(1.12);
}

.map-node-medallion {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3.5px solid var(--outline);
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #ffe89e 68%, #e8a22e 100%);
  box-shadow: 0 5px 0 var(--outline), inset 0 2px 0 #fff;
  display: grid;
  place-items: center;
}

.world-map-node.chosen .map-node-medallion {
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #fff2b2 52%, var(--stage-color, #ffbe3b) 100%);
  box-shadow: 0 0 0 3px #fff, 0 6px 0 var(--outline);
}

.map-node-medallion .ui-svg-icon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 0 rgba(61, 33, 26, 0.25));
}

.node-step-num {
  position: absolute;
  top: -7px;
  left: -6px;
  padding: 1px 6px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  background: var(--outline);
  color: #ffe27a;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.1;
}

.world-map-node.chosen .node-step-num {
  background: #ff5252;
  color: #fff;
}

.node-diff-stars {
  position: absolute;
  bottom: -7px;
  padding: 0 5px;
  border-radius: 99px;
  border: 1.5px solid var(--outline);
  background: #fff9db;
  color: #ff9914;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1.2;
}

.map-node-sign {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 132px;
  padding: 4px 9px;
  border-radius: 12px;
  border: 2.5px solid var(--outline);
  background: linear-gradient(180deg, #fffef9 0%, #f5dfb8 100%);
  box-shadow: 0 4px 0 var(--outline), inset 0 1.5px 0 #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  pointer-events: none;
}

.world-map-node.sign-above .map-node-sign {
  bottom: calc(100% + 9px);
}

.world-map-node.sign-below .map-node-sign {
  top: calc(100% + 9px);
}

.world-map-node.chosen .map-node-sign {
  background: linear-gradient(180deg, #fffef4 0%, #ffe694 100%);
  box-shadow: 0 0 0 2.5px var(--stage-color, #ffbe3b), 0 4px 0 var(--outline);
}

.map-node-sign b {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
}

.map-node-sign small {
  font-size: 9.5px;
  font-weight: 800;
  color: #5c3a2d;
  white-space: nowrap;
}

.map-node-sign i {
  align-self: center;
  margin-top: 1px;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1.5px solid var(--outline);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
}

.world-map-node.chosen .map-node-sign i {
  background: #3eb54a;
  color: #fff;
}

/* Bouncing 2D Hero Avatar on Active Map Node */
.map-hero-token {
  position: absolute;
  left: calc(100% + 4px);
  top: -22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 6;
  animation: friend-float 1.8s ease-in-out infinite;
}

.world-map-node[data-prep-stage="4"] .map-hero-token {
  left: auto;
  right: calc(100% + 4px);
}

.hero-here-bubble {
  padding: 2px 7px;
  border-radius: 99px;
  border: 2px solid var(--outline);
  background: #ff5252;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--outline);
  margin-bottom: -4px;
  z-index: 2;
}

#map-hero-canvas canvas {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 4px 0 rgba(45, 22, 15, 0.35));
}

/* Expedition Drawer & 15-Wave Stepping Stone Road */
.world-map-expedition {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wave-road-trail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
  padding: 4px 2px;
  align-items: center;
}

.wave-road-trail:before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 22px;
  border-top: 4px dashed #9e734e;
  z-index: 0;
}

.wave-stone {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  color: var(--ink);
}

.wave-stone:nth-child(even) {
  transform: translateY(-3px);
}

.wave-stone:nth-child(odd) {
  transform: translateY(3px);
}

.wave-stone:hover:enabled {
  transform: translateY(-5px) scale(1.06);
}

.stone-node {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--outline);
  background: linear-gradient(180deg, #fffdf7 0%, #e8cfa6 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 1.5px 0 #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink);
}

.stone-node .ui-svg-icon {
  width: 19px;
  height: 19px;
}

.wave-stone.vanguard-stone .stone-node {
  background: linear-gradient(180deg, #fff6cf 0%, #ffbe3b 100%);
  color: #8f2d0a;
}

.wave-stone.boss-stone .stone-node {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffe0dc 0%, #ff7b74 100%);
}

.wave-stone.cleared-stone .stone-node {
  background: linear-gradient(180deg, #b8f7a6 0%, #4cc456 100%);
  color: #fff;
}

.wave-stone.active .stone-node {
  background: var(--outline);
  color: #ffe27a;
  box-shadow: 0 0 0 3px #ffcf40, 0 4px 0 var(--outline);
  transform: scale(1.1);
}

.wave-stone b {
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.05;
}

.wave-stone small {
  font-size: 8px;
  font-weight: 900;
  color: #6b4536;
  line-height: 1;
}

.wave-stone.active b {
  color: #b83d14;
}

/* ==================== COMBAT POWER, HERO MASTERY & TROPHIES ==================== */
.nav-power-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 2.5px solid var(--outline);
  background: linear-gradient(180deg, #fffdf4 0%, #ffd982 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 1.5px 0 #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.nav-power-pill b {
  font-size: 14px;
  color: #8f2d0a;
}

.nav-power-pill small {
  font-size: 10px;
  color: #6b4536;
  font-weight: 800;
}

.power-ok {
  color: #218c38 !important;
  font-style: normal;
  font-weight: 900;
}

.power-warn {
  color: #d63c1b !important;
  font-style: normal;
  font-weight: 900;
}

.stage-counter-line {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 900;
  color: #9e2d0c;
  background: rgba(255, 224, 130, 0.55);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1.5px solid rgba(61, 33, 26, 0.2);
}

.friend-ticket.awakened-ticket {
  box-shadow: 0 0 0 2px #ffcf40, 0 5px 0 var(--outline), inset 0 2px 0 #ffffff;
}

.ticket-stars em {
  font-style: normal;
  background: #ff5252;
  color: #fff;
  padding: 0 4px;
  border-radius: 99px;
  font-size: 8px;
}

/* Sanctuary 10-Hero Mastery & Awakening Grid */
.sanctuary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: 12px;
  padding: 0 32px;
  align-items: start;
}

.sanctuary-left,
.sanctuary-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sanctuary-wallet-card {
  padding: 8px 14px;
}

.sanctuary-wallet-card .wallet-main h2 {
  font-size: 20px !important;
}

.sanctuary-wallet-card .wallet-main h2 b {
  font-size: 22px;
}

.sanctuary-wallet-card .wallet-main p {
  font-size: 10.5px;
}

.sanctuary-panel {
  padding: 9px 12px 11px;
  min-width: 0;
}

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

.hero-mastery-card {
  min-width: 0;
  border: 2.5px solid var(--outline);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf8 0%, #f5e2c2 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 1.5px 0 #fff;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-mastery-card.awakened {
  background: linear-gradient(180deg, #fffef2 0%, #ffe89e 100%);
  box-shadow: 0 0 0 2px #ffbe3b, 0 3px 0 var(--outline);
}

.hero-mastery-card.locked {
  background: linear-gradient(180deg, #f3ece2 0%, #ded0bd 100%);
  opacity: 0.92;
}

.hm-top {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.hm-art {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 2px solid var(--outline);
  background: radial-gradient(circle, #ffffff 0%, var(--hero-color, #ffd56b) 100%);
  display: grid;
  place-items: center;
}

.hm-art canvas {
  width: 42px;
  height: 42px;
}

.hm-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hm-badges {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.hm-lv-pill {
  padding: 1px 4px;
  border-radius: 99px;
  background: var(--outline);
  color: #ffe27a;
  font-size: 8px;
  font-weight: 900;
}

.hm-awk-pill {
  padding: 1px 4px;
  border-radius: 99px;
  background: #ff4757;
  color: #fff;
  font-size: 7.5px;
  font-weight: 900;
}

.hm-meta b {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-meta small {
  font-size: 8px;
  font-weight: 800;
  color: #5c3a2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-awk-box {
  padding: 3px 5px;
  border-radius: 7px;
  border: 1.5px dashed rgba(61, 33, 26, 0.35);
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hm-awk-box.unlocked {
  border: 1.5px solid #d47a00;
  background: linear-gradient(180deg, #fff9d6 0%, #ffe082 100%);
}

.hm-awk-box b {
  font-size: 8.5px;
  font-weight: 900;
  color: #8f2d0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-awk-box span {
  font-size: 8px;
  font-weight: 800;
  color: #4a2c20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-screen .section-title h2 {
  font-size: 15.5px;
  white-space: nowrap;
}

.sanctuary-screen .section-title small {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-btn {
  width: 100%;
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.hm-btn .ui-svg-icon {
  width: 12px;
  height: 12px;
}

.hm-btn.awk-ready-btn:enabled {
  background: linear-gradient(180deg, #ff9248 0%, #e03c1f 100%) !important;
  color: #fff !important;
}

/* Stage Conquest Trophies Grid */
.sanctuary-right {
  padding: 10px 14px;
  gap: 6px;
}

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

.trophy-card {
  min-width: 0;
  border: 2.5px solid var(--outline);
  border-radius: 11px;
  background: linear-gradient(180deg, #fffdf8 0%, #f2dec0 100%);
  box-shadow: 0 3px 0 var(--outline), inset 0 1.5px 0 #fff;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trophy-card.owned {
  background: linear-gradient(180deg, #f1ffeb 0%, #c8f2b8 100%);
  box-shadow: 0 0 0 2px #4cc456, 0 3px 0 var(--outline);
}

.tr-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 2px solid var(--outline);
  background: radial-gradient(circle, #fff 0%, var(--tr-color, #ffbe3b) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tr-icon .ui-svg-icon {
  width: 20px;
  height: 20px;
}

.tr-copy {
  flex: 1;
  min-width: 0;
}

.tr-head {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tr-head b {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--ink);
}

.tr-stage-tag {
  padding: 1px 4px;
  border-radius: 99px;
  background: var(--outline);
  color: #ffe27a;
  font-size: 7.5px;
  font-weight: 900;
}

.tr-copy p {
  font-size: 9px;
  font-weight: 900;
  color: #9e2d0c;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-copy small {
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: #5c3a2d;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tr-buy-btn {
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 2px 7px !important;
  font-size: 9.5px !important;
  border-radius: 8px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tr-buy-btn .ui-svg-icon {
  width: 12px;
  height: 12px;
}

.compact-sanc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.compact-sanc-grid .sanctuary-upgrade-card {
  min-width: 0;
  padding: 5px 7px !important;
  gap: 3px !important;
}

.compact-sanc-grid .sanc-up-icon {
  width: 26px !important;
  height: 26px !important;
}

.compact-sanc-grid .sanc-up-title b {
  font-size: 10.5px !important;
}

.compact-sanc-grid .sanc-up-top p {
  font-size: 9px !important;
}

.compact-sanc-grid .sanc-buy-btn {
  min-height: 22px !important;
  padding: 2px 6px !important;
  font-size: 9.5px !important;
}

.sanctuary-right .royal-gear-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sanctuary-right .royal-gear-card {
  min-width: 0;
  flex-direction: row;
  text-align: left;
  padding: 5px 7px;
  gap: 6px;
}

.sanctuary-right .royal-gear-card svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.sanctuary-right .royal-gear-copy {
  flex: 1;
  min-width: 0;
}

.sanctuary-right .royal-gear-copy b {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-right .royal-gear-copy small {
  font-size: 8.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== GLOBAL GAME UI REDESIGN & MOBILE RESPONSIVE ==================== */
#viewport {
  width: 100dvw;
  height: 100dvh;
}

#battle {
  width: 100%;
  height: 680px;
}

#hud {
  height: auto;
  min-height: 70px;
}

/* 0. True Game Top HUD Bar (No Webpage Navbar Border, Locked Row/Height Alignment) */
.screen-header.game-hud-bar {
  height: 74px;
  margin: 0 32px;
  padding: 8px 0 4px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.screen-header.game-hud-bar .screen-heading,
.screen-header.game-hud-bar .screen-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-header.game-hud-bar .round-button,
.screen-header.game-hud-bar .brand-cookie {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

.hud-title-chip {
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 13px;
  border: 3px solid var(--outline);
  background: linear-gradient(180deg, #4b2a1f 0%, #2d1610 100%);
  box-shadow: 0 4px 0 rgba(28, 12, 8, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.22);
  box-sizing: border-box;
}

.hud-title-chip b {
  font-size: 19px !important;
  line-height: 1 !important;
  color: #ffe27a !important;
  text-shadow: 0 2px 0 #1e0d08 !important;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.hud-title-chip small {
  display: none !important;
}

.screen-header.game-hud-bar .nav-power-pill,
.screen-header.game-hud-bar .nav-candy-pill,
.screen-header.game-hud-bar .screen-nav .icon-hud-btn,
.screen-header.game-hud-bar .screen-nav .nav-sanctuary-btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  border: 3px solid var(--outline) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
  box-shadow: 0 4px 0 var(--outline), inset 0 1.5px 0 rgba(255, 255, 255, 0.65) !important;
}

.screen-header.game-hud-bar .nav-power-pill b,
.screen-header.game-hud-bar .nav-candy-pill b,
.screen-header.game-hud-bar .screen-nav button span {
  line-height: 1 !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* 1. Title Screen Game Stage Dock (Strict Row & Column Alignment) */
.menu-postcard.game-stage-dock {
  top: 94px;
  right: 52px;
  width: 560px;
  padding: 20px 24px 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fffdf7 0%, #f5deb5 100%);
  border: 4px solid var(--outline);
  box-shadow: 0 12px 0 var(--outline), 0 20px 35px rgba(32, 14, 8, 0.35), inset 0 3px 0 #fff;
}

.menu-postcard.game-stage-dock:before {
  display: none !important;
  content: none !important;
}

.dock-stage-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.dock-stage-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.stage-code-pill {
  height: 36px;
  padding: 0 12px;
  border-radius: 11px;
  border: 2.5px solid var(--outline);
  background: var(--badge-color, #ffbe3b);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 var(--outline), inset 0 1.5px 0 rgba(255, 255, 255, 0.65);
  box-sizing: border-box;
  flex-shrink: 0;
}

.stage-code-pill .ui-svg-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dock-stage-name {
  margin: 0 !important;
  font-family: var(--display-font);
  font-size: 26px !important;
  line-height: 1 !important;
  color: var(--ink);
  text-shadow: 0 2px 0 #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.power-match-pill {
  height: 36px;
  padding: 0 12px;
  border-radius: 11px;
  border: 2.5px solid var(--outline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 var(--outline), inset 0 1.5px 0 rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  flex-shrink: 0;
}

.power-match-pill i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}

.power-match-pill b {
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1;
}

.power-match-pill small {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.88;
}

.power-match-pill.ok {
  background: linear-gradient(180deg, #b8f597 0%, #58c952 100%);
  color: #1d3b1a;
}

.power-match-pill.warn {
  background: linear-gradient(180deg, #ffe596 0%, #ffad42 100%);
  color: #4a200d;
}

.dock-tier-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.tier-pill-btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border-radius: 9px !important;
  border: 2px solid var(--outline) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--ink) !important;
  box-shadow: 0 2.5px 0 rgba(61, 33, 26, 0.2), inset 0 1px 0 #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}

.tier-pill-btn i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(61, 33, 26, 0.12);
  color: #5c3a2d;
  line-height: 1;
}

.tier-pill-btn b {
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
}

.tier-pill-btn small {
  font-size: 10px;
  font-weight: 900;
  opacity: 0.85;
  line-height: 1;
}

.tier-pill-btn.active {
  background: linear-gradient(180deg, #2b150e 0%, #190b06 100%) !important;
  border-color: #120704 !important;
  color: var(--tier-color, #ffe27a) !important;
  box-shadow: 0 3px 0 #120704, inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.tier-pill-btn.active i {
  background: var(--tier-color, #ffe27a);
  color: #1e0d08;
}

.tier-pill-btn.active small {
  color: #fff6df;
  opacity: 1;
}

.dock-gimmick-bar {
  height: 28px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid rgba(61, 33, 26, 0.24);
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  color: #5c3a2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.game-stage-dock .mini-world-map {
  height: 154px;
  margin: 6px 0 8px;
}

.game-stage-dock .chapter-route {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.game-stage-dock .chapter-route span {
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.lobby-badge-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.lobby-chip {
  height: 36px;
  padding: 0 11px;
  border-radius: 12px;
  border: 2.5px solid var(--outline);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 3px 0 rgba(61, 33, 26, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  color: #5c3a2d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.lobby-chip b {
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink);
}

.menu-launch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px;
  align-items: stretch;
}

.prep-open-btn {
  min-height: 58px !important;
  height: 58px !important;
  padding: 0 10px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#merge-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 30px 0 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#merge-all .ui-svg-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

#merge-all.craft-ready-btn {
  background: linear-gradient(180deg, #ff9d2e 0%, #e05219 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  border-color: #1e0d08 !important;
  box-shadow: 0 5px 0 #1e0d08, 0 0 16px rgba(255, 180, 45, 0.75), inset 0 2px 0 #ffe89e !important;
}

.big-arcade-btn {
  min-height: 58px !important;
  height: 58px !important;
  font-size: 20px !important;
  border-radius: 18px !important;
  letter-spacing: 0.2px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 0 var(--outline), 0 10px 20px rgba(232, 110, 25, 0.35), inset 0 2.5px 0 #fff7c2 !important;
}

.game-nav-dock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.game-nav-dock button {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* 2. World Map Expedition Screen (No 01/02/03 Document Headers, Locked Grid Alignment) */
.prep-screen,
.sanctuary-screen,
.help-screen,
.records-screen,
.settings-screen {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 179, 0.38) 0%, rgba(46, 24, 16, 0.55) 100%),
    linear-gradient(180deg, #f7deb6 0%, #d4a36a 100%);
}

.prep-screen:before,
.sanctuary-screen:before,
.help-screen:before,
.records-screen:before,
.settings-screen:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--scene-image);
  background-size: cover;
  background-position: center;
  opacity: 0.34;
  pointer-events: none;
}

.prep-layout {
  position: relative;
  z-index: 2;
  margin: 6px 32px 0;
  gap: 18px;
  height: 792px;
  align-items: stretch;
}

.prep-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  min-width: 0;
}

.world-map-board {
  background: linear-gradient(180deg, #432419 0%, #2a150e 100%) !important;
  border: 4px solid #1e0d08 !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 0 #1e0d08, 0 18px 32px rgba(20, 8, 4, 0.42), inset 0 2px 0 rgba(255, 224, 150, 0.3) !important;
  padding: 10px 12px 12px !important;
  min-width: 0;
  overflow: hidden;
}

.map-floating-banner {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px 10px;
  color: #fff8e8;
  box-sizing: border-box;
  min-width: 0;
}

.map-stage-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.map-stage-pill .ui-svg-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}

.map-stage-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.map-stage-pill b {
  display: block;
  font-size: 16.5px;
  font-weight: 900;
  line-height: 1.1;
  color: #ffe27a;
  text-shadow: 0 2px 0 #1b0c07;
  white-space: nowrap;
}

.map-stage-pill span {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.1;
  color: #f5dec3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-Banner-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.map-tier-selector {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.map-tier-selector .tier-pill-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
}

#game.portrait-mode .map-stage-pill span {
  max-width: 170px;
}

#game.portrait-mode .map-tier-selector .tier-pill-btn {
  padding: 0 6px !important;
}

#game.portrait-mode .map-tier-selector .tier-pill-btn small {
  display: none;
}

.counter-trophy-pill,
.map-Banner-right .power-match-pill {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2.5px solid #1e0d08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 #1e0d08;
  box-sizing: border-box;
}

.counter-trophy-pill.ready {
  background: linear-gradient(180deg, #a8f596 0%, #52c44c 100%);
  color: #163012;
}

.counter-trophy-pill.missing {
  background: linear-gradient(180deg, #ffe494 0%, #ffad3b 100%);
  color: #4a1e08;
}

.prep-screen .world-map-viewport {
  height: 332px;
  border-radius: 18px;
  border: 3px solid #1e0d08;
}

.prep-screen .world-map-expedition {
  padding: 10px 4px 2px;
  gap: 8px;
  background: transparent;
  border: none;
}

.prep-screen .wave-stone {
  padding: 5px 2px;
  font-variant-numeric: tabular-nums;
}

.prep-screen .wave-intel-detail {
  min-height: 40px;
  padding: 6px 12px;
  background: rgba(255, 248, 232, 0.95);
  border-radius: 12px;
  border: 2.5px solid #1e0d08;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.prep-screen .wave-intel-detail .intel-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.prep-screen .intel-wave-badge,
.prep-screen .intel-tag {
  height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}

.prep-bottom-row {
  flex: 1;
  display: grid;
  grid-template-columns: 0.88fr 1.72fr;
  gap: 12px;
  align-items: stretch;
  background: linear-gradient(180deg, #432419 0%, #2a150e 100%);
  border: 4px solid #1e0d08;
  border-radius: 24px;
  padding: 12px 14px;
  box-shadow: 0 9px 0 #1e0d08, 0 16px 28px rgba(20, 8, 4, 0.38), inset 0 2px 0 rgba(255, 224, 150, 0.28);
}

.prep-bottom-row .mode-options,
.prep-bottom-row .prep-squad {
  height: 100%;
  align-items: stretch;
}

/* Unified 4-Row Vertical Rhythm for Mode Cards & Squad Tickets */
.prep-bottom-row .mode-card,
.prep-bottom-row .friend-ticket {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 22px 1fr 20px 20px;
  align-items: center;
  justify-items: center;
  row-gap: 4px;
  padding: 8px 5px !important;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}

.prep-bottom-row .mode-tag-pill,
.prep-bottom-row .ticket-lane-buff {
  height: 22px;
  width: 100%;
  padding: 0 3px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px !important;
  font-weight: 900;
  letter-spacing: -0.35px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  margin: 0 !important;
}

.prep-bottom-row .mode-tag-pill {
  background: rgba(61, 33, 26, 0.12);
  border: 1.5px solid rgba(61, 33, 26, 0.28);
  color: #4b2a1f;
}

.prep-bottom-row .mode-card.chosen .mode-tag-pill {
  background: #2b150e;
  border-color: #1e0d08;
  color: #ffe27a;
}

.prep-bottom-row .mode-art,
.prep-bottom-row .ticket-art-box {
  position: relative;
  width: 100%;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.prep-bottom-row .mode-art canvas,
.prep-bottom-row .ticket-art-box canvas {
  width: 78px !important;
  height: 78px !important;
  display: block;
}

.prep-bottom-row .ticket-art-box .ticket-stars {
  position: absolute;
  top: 0;
  right: 2px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(43, 21, 14, 0.88);
  color: #ffe27a;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1;
  margin: 0 !important;
}

.prep-bottom-row .mode-title,
.prep-bottom-row .friend-ticket > b {
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}

.prep-bottom-row .mode-desc,
.prep-bottom-row .friend-ticket > small {
  height: 20px;
  width: 100%;
  padding: 0 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px !important;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
  box-sizing: border-box;
}

.prep-bottom-row .mode-desc {
  color: #6b4536;
  background: rgba(61, 33, 26, 0.08);
}

.prep-side {
  background: linear-gradient(180deg, #432419 0%, #2a150e 100%) !important;
  border: 4px solid #1e0d08 !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 0 #1e0d08, 0 18px 32px rgba(20, 8, 4, 0.42), inset 0 2px 0 rgba(255, 224, 150, 0.3) !important;
  padding: 16px 18px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

.prep-gear-head {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2b150e 0%, #1c0d08 100%);
  border: 2.5px solid rgba(255, 218, 130, 0.35);
  color: #ffe27a;
  box-sizing: border-box;
}

.prep-gear-head b {
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1;
}

.gear-cnt-pill {
  height: 24px;
  padding: 0 10px;
  border-radius: 99px;
  background: #ffe27a;
  color: #2b150e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.prep-side .compact-gear-grid .prep-gear {
  height: 56px;
  padding: 0 10px !important;
  border-radius: 14px;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.prep-side .compact-gear-grid .prep-gear span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.prep-side .compact-gear-grid .prep-gear span b,
.prep-side .compact-gear-grid .prep-gear span small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.prep-side .departure-info {
  background: rgba(255, 248, 232, 0.95);
  border: 2.5px solid #1e0d08;
  border-radius: 16px;
  padding: 10px 14px;
  margin: 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prep-side .departure-info > span {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.prep-side .departure-info > span small {
  font-size: 12px;
  font-weight: 900;
  color: #5c3a2d;
}

.prep-side .departure-info > span b {
  font-size: 13px;
  font-weight: 900;
}

.prep-quick-dock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.prep-quick-dock button {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-sizing: border-box !important;
}

/* 3. Star Candy Sanctuary Game Cards & Ribbons (Strict Grid & Baseline Lock) */
.sanctuary-layout {
  position: relative;
  z-index: 2;
  margin: 6px 32px 0 !important;
  height: 792px;
  align-items: stretch !important;
  gap: 18px !important;
}

.sanctuary-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.sanctuary-wallet-card {
  padding: 10px 12px !important;
  background: linear-gradient(180deg, #432419 0%, #2b160f 100%) !important;
  border: 3.5px solid #1e0d08 !important;
  border-radius: 20px !important;
  box-shadow: 0 7px 0 #1e0d08, inset 0 2px 0 rgba(255, 224, 150, 0.3) !important;
}

.sanctuary-wallet-card .wallet-bonuses {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sanctuary-wallet-card .wallet-bonuses > span {
  height: 36px;
  padding: 0 10px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.sanctuary-wallet-card .wallet-bonuses > span small {
  font-size: 11px;
  font-weight: 900;
  color: #6b4536;
}

.sanctuary-wallet-card .wallet-bonuses > span b {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}

.sanctuary-panel,
.sanctuary-right {
  background: linear-gradient(180deg, #432419 0%, #2a150e 100%) !important;
  border: 4px solid #1e0d08 !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 0 #1e0d08, 0 18px 32px rgba(20, 8, 4, 0.42), inset 0 2px 0 rgba(255, 224, 150, 0.3) !important;
  padding: 14px 16px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.sanctuary-panel {
  flex: 1;
}

.sanctuary-right {
  height: 100%;
  justify-content: flex-start !important;
  gap: 9px;
}

.sanctuary-panel .hero-mastery-grid {
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* 4-Row Locked Grid for Hero Mastery Cards (Zero Wrapping or Truncation) */
.sanctuary-panel .hero-mastery-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 22px 1fr 46px 34px;
  align-items: center;
  gap: 6px;
  padding: 10px 9px !important;
  border-radius: 16px;
  border: 3px solid #1e0d08;
  background: linear-gradient(180deg, #fffdf7 0%, #f5dfb8 100%);
  box-shadow: 0 5px 0 #1e0d08, inset 0 2px 0 #fff;
  box-sizing: border-box;
}

.sanctuary-panel .hm-badges {
  height: 22px;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

.sanctuary-panel .role-pill,
.sanctuary-panel .hm-lv-pill,
.sanctuary-panel .hm-awk-pill {
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.sanctuary-panel .hm-top {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  margin: 0 !important;
}

.sanctuary-panel .hm-art {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sanctuary-panel .hm-art canvas {
  width: 56px !important;
  height: 56px !important;
}

.sanctuary-panel .hm-meta {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.sanctuary-panel .hm-meta b {
  display: block;
  width: 100%;
  font-size: 13px !important;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-panel .hm-meta small {
  display: block;
  width: 100%;
  font-size: 10.5px !important;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sanctuary-panel .hm-awk-box {
  height: 46px;
  min-height: 46px;
  padding: 5px 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  margin: 0 !important;
}

.sanctuary-panel .hm-awk-box b {
  font-size: 10px !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-panel .hm-awk-box span {
  font-size: 9px !important;
  letter-spacing: -0.3px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-panel .hm-btn,
.sanctuary-panel .hero-mastery-card > .owned-badge {
  height: 34px !important;
  min-height: 34px !important;
  width: 100%;
  padding: 0 8px !important;
  font-size: 12px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Locked 3-Column Trophy Cards */
.sanctuary-right .trophy-grid {
  flex: 0.95;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sanctuary-right .trophy-card {
  height: 100%;
  min-height: 76px;
  padding: 10px 10px !important;
  border-radius: 16px;
  border: 3px solid #1e0d08;
  box-shadow: 0 5px 0 #1e0d08, inset 0 2px 0 #fff;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.sanctuary-right .tr-icon {
  width: 34px;
  height: 34px;
}

.sanctuary-right .tr-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.sanctuary-right .tr-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap !important;
}

.sanctuary-right .tr-head b {
  font-size: 11px !important;
  letter-spacing: -0.4px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sanctuary-right .tr-stage-tag {
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px !important;
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.sanctuary-right .tr-copy p {
  font-size: 10px !important;
  letter-spacing: -0.25px;
  line-height: 1.25;
  margin: 0 !important;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sanctuary-right .tr-action {
  width: 60px;
  display: flex;
  justify-content: flex-end;
}

.sanctuary-right .tr-buy-btn,
.sanctuary-right .tr-action .owned-badge {
  width: 60px;
  min-width: 60px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}

/* Locked 3x2 HQ Blessings Grid */
.sanctuary-right .compact-sanc-grid {
  flex: 1.05;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.sanctuary-right .compact-sanc-grid .sanctuary-upgrade-card {
  height: 100%;
  min-height: 88px;
  padding: 10px 10px !important;
  border-radius: 15px !important;
  border: 3px solid #1e0d08 !important;
  box-shadow: 0 5px 0 #1e0d08, inset 0 2px 0 #fff !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.sanctuary-right .compact-sanc-grid .sanc-up-top {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.sanctuary-right .compact-sanc-grid .sanc-up-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap;
}

.sanctuary-right .compact-sanc-grid .sanc-up-title b {
  font-size: 12px !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-right .compact-sanc-grid .sanc-lv-badge {
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px !important;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sanctuary-right .compact-sanc-grid .sanc-up-top p {
  font-size: 10px !important;
  line-height: 1.15;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-right .compact-sanc-grid .sanc-up-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sanctuary-right .compact-sanc-grid .sanc-buy-btn,
.sanctuary-right .compact-sanc-grid .sanc-up-foot .owned-badge {
  min-width: 62px;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}

/* Locked 3x1 Royal Gear Cards (Matches 3-Column HQ Grid Above) */
.sanctuary-right .royal-gear-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.sanctuary-right .royal-gear-card {
  height: 68px;
  padding: 8px 9px !important;
  border-radius: 15px;
  border: 3px solid #1e0d08;
  box-shadow: 0 5px 0 #1e0d08, inset 0 2px 0 #fff;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 56px !important;
  align-items: center;
  gap: 6px !important;
  box-sizing: border-box;
}

.sanctuary-right .royal-gear-card .gear-art {
  width: 30px !important;
  height: 30px !important;
}

.sanctuary-right .royal-gear-copy b {
  display: block;
  font-size: 11.5px !important;
  letter-spacing: -0.35px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanctuary-right .royal-gear-copy small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 9.2px !important;
  letter-spacing: -0.3px;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
}

.sanctuary-right .royal-buy-btn,
.sanctuary-right .royal-gear-card .owned-badge {
  width: 56px !important;
  min-width: 56px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}

.game-panel-head {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-radius: 13px;
  background: linear-gradient(180deg, #2b150e 0%, #1c0d08 100%);
  border: 2.5px solid rgba(255, 218, 130, 0.35);
  color: #ffe27a;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.game-panel-head b {
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.game-panel-head > span {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  color: #f3d7b6;
  white-space: nowrap;
}

.compact-back-btn {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  box-sizing: border-box !important;
}

.compact-back-btn span {
  color: var(--ink) !important;
}

/* 4. Recipe, Gear, Battle & Turret Nameplate Alignment Polish */
.chapter-label,
#build-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.tower-tag .lane-buff-pill {
  max-width: 152px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.recipe-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(61, 33, 26, 0.08);
  border: 2px solid rgba(61, 33, 26, 0.18);
  margin: 8px 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

#overlay[data-mode="gear"] #modal {
  width: 780px;
  max-width: 94%;
  padding: 24px 28px;
}

#overlay[data-mode="gear"] .gear-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: none;
  overflow: visible;
  margin-top: 14px;
}

#overlay[data-mode="gear"] .gear-option em {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Native Mobile Portrait Mode (900x1600 Virtual Container) */
#game.portrait-mode {
  width: 900px;
  height: 1600px;
}

/* 1. Portrait Screen Header & Footer (Single Crisp Top Bar, Locked 40px Height) */
#game.portrait-mode .screen-header.game-hud-bar {
  height: 72px;
  margin: 0 24px;
  padding: 0 4px;
  gap: 8px;
  flex-wrap: nowrap;
}

#game.portrait-mode .screen-heading {
  gap: 8px;
  min-width: 0;
}

#game.portrait-mode .screen-header.game-hud-bar .round-button,
#game.portrait-mode .screen-header.game-hud-bar .brand-cookie {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
}

#game.portrait-mode .hud-title-chip {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
}

#game.portrait-mode .screen-heading b {
  display: block;
  font-size: 17px !important;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game.portrait-mode .screen-heading small {
  display: none;
}

#game.portrait-mode .screen-nav {
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

#game.portrait-mode .screen-header.game-hud-bar .nav-power-pill,
#game.portrait-mode .screen-header.game-hud-bar .nav-candy-pill,
#game.portrait-mode .screen-header.game-hud-bar .screen-nav .icon-hud-btn,
#game.portrait-mode .screen-header.game-hud-bar .screen-nav .nav-sanctuary-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 11px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

#game.portrait-mode .nav-power-pill b,
#game.portrait-mode .nav-candy-pill b {
  font-size: 12.5px;
}

/* 2. Portrait Loading Screen */
#game.portrait-mode .boot-card {
  width: 760px;
  padding: 36px 40px;
}

/* 3. Portrait Title / Menu Screen */
#game.portrait-mode .menu-scene {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 600px;
  padding: 0 28px;
}

#game.portrait-mode .scene-note {
  left: 32px;
  top: 12px;
}

#game.portrait-mode .sun-sticker {
  right: 42px;
  top: 10px;
  font-size: 78px;
}

#game.portrait-mode .title-lockup {
  top: 24px;
  left: 32px;
  right: 32px;
}

#game.portrait-mode .title-lockup h1 {
  font-size: 58px;
  margin-top: 12px;
}

#game.portrait-mode .title-lockup h1 span {
  font-size: 96px;
}

#game.portrait-mode .title-friends {
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 285px;
}

#game.portrait-mode .title-friends > div {
  width: 245px;
}

#game.portrait-mode .title-friends > div:nth-child(2) {
  width: 295px;
}

#game.portrait-mode .menu-postcard {
  position: relative;
  right: auto;
  top: auto;
  width: auto;
  margin: 24px 28px 0;
  padding: 24px 28px 26px;
}

#game.portrait-mode .menu-postcard:before {
  display: none !important;
  content: none !important;
}

#game.portrait-mode .mini-world-map {
  height: 225px;
}

/* 4. Portrait World Map & Preparation Screen */
#game.portrait-mode .prep-layout {
  grid-template-columns: 1fr;
  height: auto;
  gap: 14px;
  margin: 8px 24px 0;
  padding: 0;
  align-items: stretch;
}

#game.portrait-mode .prep-main {
  height: auto;
  gap: 12px;
}

#game.portrait-mode .world-map-viewport {
  height: 360px;
}

#game.portrait-mode .prep-bottom-row {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}

#game.portrait-mode .mode-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#game.portrait-mode .mode-card {
  padding: 10px 12px;
}

#game.portrait-mode .prep-squad {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#game.portrait-mode .prep-side {
  height: auto;
  padding: 16px 20px !important;
  gap: 10px;
}

#game.portrait-mode .prep-side .compact-gear-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#game.portrait-mode .prep-side .departure-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0;
  padding: 10px 12px;
}

#game.portrait-mode .prep-side .departure-info > span {
  height: auto;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(61, 33, 26, 0.06);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

#game.portrait-mode #prep-start {
  min-height: 64px;
  font-size: 24px;
}

/* 5. Portrait Sanctuary Screen */
#game.portrait-mode .sanctuary-layout {
  grid-template-columns: 1fr;
  height: auto !important;
  gap: 16px !important;
  margin: 10px 24px 0 !important;
  padding: 0;
}

#game.portrait-mode .sanctuary-left,
#game.portrait-mode .sanctuary-right {
  height: auto;
  gap: 12px;
}

#game.portrait-mode .hero-mastery-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#game.portrait-mode .hero-mastery-card {
  padding: 12px 10px;
  gap: 8px;
}

#game.portrait-mode .trophy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#game.portrait-mode .trophy-card {
  padding: 14px 12px;
}

#game.portrait-mode .compact-sanc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* 6. Portrait Help / Guide Screen */
#game.portrait-mode .guide-lead {
  margin: 18px 28px 16px;
}

#game.portrait-mode .guide-cards {
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 28px;
  padding: 0;
}

#game.portrait-mode .guide-card {
  display: grid;
  grid-template-columns: 165px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
  text-align: left;
  padding: 18px 24px;
}

#game.portrait-mode .guide-card > div {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 155px;
  display: grid;
  place-items: center;
}

#game.portrait-mode .guide-card h2 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 6px !important;
}

#game.portrait-mode .guide-card p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
}

#game.portrait-mode .guide-bottom {
  margin: 18px 28px 0;
}

/* 7. Portrait Records & Settings Screens */
#game.portrait-mode .records-layout,
#game.portrait-mode .settings-layout {
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 12px 28px 0;
  padding: 0;
}

#game.portrait-mode .record-overview {
  padding: 18px 24px;
}

#game.portrait-mode .settings-companion {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  text-align: left;
  padding: 14px 24px;
  column-gap: 16px;
  row-gap: 4px;
}

#game.portrait-mode .settings-companion .paper-label {
  display: none;
}

#game.portrait-mode .settings-companion > div:first-of-type {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 115px;
  margin: 0;
  display: grid;
  place-items: center;
}

#game.portrait-mode #settings-friend canvas {
  width: 115px !important;
  height: 115px !important;
}

#game.portrait-mode .settings-companion h2 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 24px !important;
  margin: 0 !important;
}

#game.portrait-mode .settings-companion p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
}

#game.portrait-mode .settings-companion .settings-context {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

/* 8. Portrait Result Screen */
#game.portrait-mode .result-header {
  margin: 0 28px;
}

#game.portrait-mode .result-hero {
  height: auto;
  flex-wrap: wrap;
  padding: 18px 28px;
  gap: 18px;
}

#game.portrait-mode .result-reward-card {
  max-width: 100%;
  width: 100%;
}

#game.portrait-mode .result-report {
  margin: 0 28px;
  padding: 18px 22px;
}

#game.portrait-mode .result-report .screen-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#game.portrait-mode .result-secondary-stats {
  flex-wrap: wrap;
  gap: 16px;
}

#game.portrait-mode .result-team {
  flex-wrap: wrap;
}

#game.portrait-mode .result-actions {
  flex-wrap: wrap;
  margin: 20px 28px;
  gap: 12px;
}

/* 9. Portrait Battle HUD, 5-Lane Battlefield, Tactical Deck & 4x2 Workbench */
#game.portrait-mode #hud {
  top: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#game.portrait-mode .health-panel {
  width: 226px;
  height: 60px;
  padding: 5px 10px;
  gap: 8px;
  flex-shrink: 0;
}

#game.portrait-mode .health-copy b {
  font-size: 14px;
}

#game.portrait-mode .health-copy strong {
  font-size: 16px;
}

#game.portrait-mode .wave-panel {
  position: static;
  transform: none;
  width: 230px;
  padding: 5px 10px 7px;
  flex-shrink: 0;
}

#game.portrait-mode .wave-text strong {
  font-size: 18px;
}

#game.portrait-mode .wave-text strong b {
  font-size: 20px;
}

#game.portrait-mode .hud-right {
  gap: 5px;
  flex-shrink: 0;
}

#game.portrait-mode .gold-panel {
  min-width: 96px;
  height: 48px;
  padding: 4px 10px;
  gap: 5px;
}

#game.portrait-mode .gold-panel strong {
  font-size: 20px;
}

#game.portrait-mode .square-btn,
#game.portrait-mode #sound {
  width: 38px;
  height: 46px;
  border-radius: 11px;
  font-size: 17px;
}

#game.portrait-mode .chapter-label {
  top: 108px;
  left: 16px;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#game.portrait-mode #build-status {
  top: 108px;
  right: 16px;
  max-width: 340px;
  flex-wrap: wrap;
}

#game.portrait-mode #boss-hud {
  top: 142px;
  left: 16px;
  right: 16px;
  width: auto;
}

#game.portrait-mode #battle {
  top: 182px;
  left: -70px;
  width: 1040px;
  height: 595px;
  border-top: 3px solid var(--outline);
  border-bottom: 3px solid var(--outline);
}

#game.portrait-mode .vignette {
  top: 182px;
  left: 0;
  right: 0;
  height: 595px;
  bottom: auto;
}

#game.portrait-mode #tower-targets {
  position: absolute;
  top: 182px;
  left: -70px;
  width: 1600px;
  height: 680px;
  transform-origin: 0 0;
  transform: scale(0.65, 0.875);
  z-index: 4;
  pointer-events: none;
}

#game.portrait-mode #tower-targets .tower-target {
  pointer-events: auto;
}

#game.portrait-mode #wave-banner {
  top: 230px;
  max-width: 820px;
  white-space: nowrap;
}

#game.portrait-mode #aim-hint {
  top: 260px;
  width: 780px;
}

#game.portrait-mode #legend-announcement {
  top: 430px;
}

#game.portrait-mode #combo {
  top: 260px;
  right: 28px;
}

/* Portrait Tactical Command Deck (y = 785..945px) */
#game.portrait-mode #command-panel {
  top: 788px;
  left: 16px;
  width: 462px;
  height: 152px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 8px;
  row-gap: 4px;
  align-items: stretch;
}

#game.portrait-mode #command-panel .command-title,
#game.portrait-mode #command-panel .energy-meter {
  grid-column: 1 / -1;
  margin: 0;
}

#game.portrait-mode #command-panel button {
  margin-top: 0;
  padding: 8px 10px;
}

#game.portrait-mode #command-panel .energy-help {
  display: none;
}

#game.portrait-mode #bounty-panel {
  top: 788px;
  left: 490px;
  right: 128px;
  width: auto;
  height: 152px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#game.portrait-mode #bounty-copy {
  margin: 2px 0;
}

#game.portrait-mode #storm {
  top: 810px;
  right: 18px;
  width: 96px;
  height: 96px;
}

/* Portrait Workbench & 4x2 Thumb-Friendly Inventory (y = 950..1600px) */
#game.portrait-mode #workbench {
  height: 650px;
}

#game.portrait-mode .bench-top {
  height: 50px;
  padding: 0 18px;
  gap: 10px;
  justify-content: flex-start;
}

#game.portrait-mode .bench-brand,
#game.portrait-mode .bench-title {
  display: none;
}

#game.portrait-mode #recipes-open,
#game.portrait-mode #bag-pages,
#game.portrait-mode #auto-supply {
  position: static;
}

#game.portrait-mode .bench-guide {
  margin-left: auto;
}

#game.portrait-mode #inventory {
  left: 18px;
  right: 18px;
  top: 58px;
  height: 374px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#game.portrait-mode #inventory .inv-slot {
  width: 100%;
  height: 100%;
}

#game.portrait-mode #inventory .inv-slot canvas {
  width: 118px;
  height: 114px;
  top: 6px;
}

#game.portrait-mode .gear-panel {
  left: 18px;
  top: 446px;
  width: 300px;
  height: 154px;
  padding: 12px 14px;
}

#game.portrait-mode .gear-slot {
  width: 72px;
  height: 72px;
}

#game.portrait-mode .bench-actions {
  top: 446px;
  left: 332px;
  right: 18px;
  width: auto;
  height: 154px;
  flex-direction: row;
  gap: 12px;
}

#game.portrait-mode #buy {
  flex: 1.35;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#game.portrait-mode #merge-all {
  flex: 1;
  height: 100%;
  font-size: 21px;
}

#game.portrait-mode #toast {
  bottom: 668px;
  max-width: 820px;
}

/* 10. Portrait Modals (Recipes 3x5 Grid, Upgrade Cards, Gear, Pause) */
#game.portrait-mode #modal.recipe-modal {
  width: 860px !important;
  max-width: 96% !important;
  max-height: 1520px !important;
  padding: 18px 20px !important;
}

#game.portrait-mode #modal.recipe-modal .recipe-grid-15 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#game.portrait-mode #overlay[data-mode="upgrade"] #modal {
  width: 860px;
  max-width: 96%;
  padding: 24px 20px;
}

#game.portrait-mode #overlay[data-mode="upgrade"] .upgrade-list {
  gap: 10px;
}

@keyframes friend-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes confetti-fall {
  to { transform: translateY(930px) rotate(420deg); }
}

.reduced-motion *,
.reduced-motion *:before,
.reduced-motion *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .title-friends > div,
  .result-confetti i,
  .result-mascot canvas,
  #loading-friends canvas,
  .boot-cookie {
    animation: none;
  }
}