/* Okey Mobile Game CSS Stylesheet */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('lib/fonts/outfit-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('lib/fonts/outfit-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('lib/fonts/zilla-slab-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('lib/fonts/zilla-slab-600-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('lib/fonts/zilla-slab-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('lib/fonts/zilla-slab-700-latin-ext.woff2') format('woff2');
}

:root {
  /* Colors */
  --felt-green: radial-gradient(circle at center, #1b733d 0%, #0d3b1e 100%);
  --rack-width: min(100vw - 24px, 500px);
  --rack-row-height: 13.5vh;
  --table-border: #d4af37; /* gold */
  
  --tile-bg: linear-gradient(135deg, #fdfaf2 0%, #f4eee1 100%);
  --tile-border: #e6dfd0;
  --tile-shadow: 0 4px 6px rgba(0, 0, 0, 0.35), inset 0 -3px 0 #d9cfbb;
  --tile-selected-shadow: 0 8px 16px rgba(212, 175, 55, 0.6), inset 0 -3px 0 #d9cfbb;
  
  --red-num: #e74c3c;
  --yellow-num: #f39c12;
  --blue-num: #2980b9;
  --black-num: #2c3e50;
  
  --hud-bg: rgba(15, 23, 42, 0.65);
  --hud-border: rgba(255, 255, 255, 0.1);
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --gold: #f1c40f;
  
  --rack-bg: #2a1b0c; /* mahogany wood */
  --rack-border: #1a0f07;
  --cell-bg: rgba(0, 0, 0, 0.45);
  --cell-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
  
  --transition-speed: 0.25s;
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset & Base Rules */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  html,
  body,
  .game-container,
  .title-screen,
  .loading-screen,
  .home-screen-content,
  .mode-selection-content,
  .battle-map-content {
    height: 100dvh;
    min-height: 100dvh;
  }
}

body {
  font-family: var(--font-family);
  background-color: #050f08;
  color: var(--text-primary);
  overflow: hidden;
  touch-action: manipulation;
}

html.dragging-tile-active,
body.dragging-tile-active {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Main Widescreen Landscape Wrapper */
.game-container {
  width: 100%;
  height: 100%;
  background: var(--felt-green);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Header CSS */
.game-header {
  height: 56px;
  background: var(--hud-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hud-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 10;
  flex-shrink: 0;
}

.logo {
  font-family: 'Zilla Slab', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.round-badge {
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  vertical-align: middle;
}

.score-board {
  display: flex;
  gap: 12px;
}

.score-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 12px;
  border-radius: 8px;
  min-width: 80px;
  transition: all 0.2s ease;
}

.score-item.active-p {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.p-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.p-score {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lang-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 36px;
}

/* Portrait Grid Layout for Table */
.game-table {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  grid-template-rows: auto 1fr;
  padding: 10px 8px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}

/* Opponent Panel Layouts */
.player-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 6px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  z-index: 5;
  width: auto;
  min-width: 68px;
  transition: all 0.3s ease;
}

.player-panel.active-turn {
  box-shadow: 0 0 15px var(--gold);
  border-color: var(--gold);
}

.avatar-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  background: #334155;
  transition: border-color 0.3s;
}

.player-panel.active-turn .avatar-ring {
  border-color: var(--gold);
  animation: pulse-border 1.5s infinite alternate;
}

.avatar {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.player-name {
  font-size: 0.75rem;
  font-weight: 600;
}

.hand-indicator {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* Positioning Players on CSS Grid */
.left-ai {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
}

.right-ai {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  align-self: center;
}

.top-ai {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  flex-direction: row;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 16px;
  min-width: 0;
}

.top-ai .player-info {
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.top-ai .avatar-ring {
  margin-bottom: 0;
}

/* Discard Zones placement - Symmetrical Center Table */
.discard-zone {
  height: 70px;
  aspect-ratio: 5 / 7;
  width: auto;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.discard-label-top {
  position: absolute;
  top: -22px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.discard-label-bottom {
  position: absolute;
  bottom: -22px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-left-discard {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}

.top-right-discard {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
}

.left-discard {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
}

.right-discard {
  grid-column: 3;
  grid-row: 3;
  justify-self: center;
}

.discard-zone.drag-hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: var(--gold);
  transform: scale(1.05);
}

/* Portrait Center Board styles */
.table-center {
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  align-self: center;
  display: grid;
  grid-template-columns: 66px 1fr 66px;
  grid-template-rows: auto auto auto;
  gap: 16px 12px;
  width: 100%;
  /* Allow the column to honour the parent grid's 1fr instead of expanding
     to the intrinsic min-content width (which pushed the right AI off-screen). */
  min-width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 10px;
  border-radius: 16px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6);
  align-items: center;
}

.center-pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.center-stacks {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.center-row-piles {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.draw-pile-container {
  /* centered automatically by flex container */
}

.indicator-container {
  /* centered automatically by flex container */
}

.okey-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: none;
  padding-left: 0;
}

.tile-deck-stack {
  height: 70px;
  aspect-ratio: 5 / 7;
  width: auto;
  background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
  border-radius: 8px;
  border: 1px solid #5c2d0c;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 0 #5c2d0c, 0 8px 12px rgba(0,0,0,0.5);
  transform: translateY(-4px);
  transition: transform 0.1s;
}

.tile-deck-stack:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 #5c2d0c, 0 3px 6px rgba(0,0,0,0.5);
}

.deck-face-down {
  font-size: 1.8rem;
  color: #fff;
  opacity: 0.85;
}

.deck-count {
  font-size: 0.9rem;
  font-weight: 700;
}

.deck-label, .indicator-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.indicator-tile-spot {
  height: 70px;
  aspect-ratio: 5 / 7;
  width: auto;
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.okey-info-title {
  font-size: 0.7rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 700;
}

.okey-tile-display {
  height: 70px;
  aspect-ratio: 5 / 7;
  width: auto;
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bottom Interface css */
.player-area {
  background: var(--hud-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hud-border);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  z-index: 8;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

html.dragging-tile-active .player-area,
body.dragging-tile-active .player-area {
  background: linear-gradient(180deg, rgba(149, 29, 48, 0.96) 0%, rgba(88, 11, 27, 0.98) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.status-bar {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.4);
  padding: 6px;
  border-radius: 6px;
  font-weight: 600;
  width: var(--rack-width);
  margin: 0 auto;
}

.rack-main-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.rack-controls.vertical-controls {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: var(--rack-width);
  margin: 0 auto;
  max-width: none;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.rack-controls.vertical-controls .action-btn {
  flex: 1;
  flex-direction: row;
  font-size: 0.72rem;
  padding: 8px 4px;
  gap: 4px;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.rack-controls.vertical-controls .action-btn svg {
  margin-bottom: 0;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.action-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.declare-win-btn {
  background: linear-gradient(135deg, #d4af37 0%, #aa8513 100%);
  border-color: #8a6809;
  color: #000;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.declare-win-btn:hover {
  background: linear-gradient(135deg, #e6c24a 0%, #b89218 100%);
}

.discard-selected-btn {
  color: #fff;
  background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);
  border-color: rgba(255, 217, 74, 0.9);
}

.discard-selected-btn:hover {
  background: linear-gradient(180deg, #6ee7a1 0%, #16a34a 100%);
}

.action-btn:disabled,
.action-btn.is-disabled {
  background: linear-gradient(180deg, #6b6b6b 0%, #4a4a4a 100%);
  border-color: #3a3a3a;
  color: #b5b5b5;
  text-shadow: none;
  cursor: not-allowed;
  opacity: 0.62;
}

.action-btn:disabled:hover,
.action-btn.is-disabled:hover {
  background: linear-gradient(180deg, #6b6b6b 0%, #4a4a4a 100%);
}

/* Greyed-out when no win is reachable (guided declare-win). */
.declare-win-btn:disabled,
.declare-win-btn.is-disabled {
  background: linear-gradient(135deg, #6b6b6b 0%, #4a4a4a 100%);
  border-color: #3a3a3a;
  color: #999;
  text-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.declare-win-btn:disabled:hover,
.declare-win-btn.is-disabled:hover {
  background: linear-gradient(135deg, #6b6b6b 0%, #4a4a4a 100%);
}

/* Rack tray container */
.rack-container {
  width: var(--rack-width);
  max-width: 100%;
  margin: 0 auto;
  background: var(--rack-bg);
  border: 4px solid var(--rack-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  box-sizing: border-box;
  contain: layout;
  overflow: visible;
  position: relative;
  z-index: 4;
  transform: translateZ(0);
}

.rack-board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  /* --rack-rows: 2 | 3 (set by JS based on settings). Defaults to 2. */
  grid-template-rows: repeat(var(--rack-rows, 2), var(--rack-row-height));
  gap: 0;
  width: 100%;
  overflow: visible;
  transform: translateZ(0);
}

/* Vertical-bar divider that lives in a rack cell. Reuses the same
   --active-idx / --col-index spacing math as a tile so insert-between
   previews treat it just like a tile during drag. */
.rack-cell .rack-divider {
  position: absolute;
  left: calc(100% * (
    var(--segment-start, 0) +
    var(--segment-span, 15) * var(--active-idx, 0) / var(--active-count-minus-1, 1)
    - var(--col-index, 0)
  ));
  top: 0;
  height: 100%;
  /* Narrow lane — about 1/3 of a tile width so it reads as a separator
     rather than a card. */
  width: calc(100% * 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  --trans-x: calc(-100% * var(--active-idx, 0) / var(--active-count-minus-1, 1));
  transform: translateX(var(--trans-x));
  transform-origin: bottom center;
  transition: transform 0.15s ease, left 0.15s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: grab;
  touch-action: none;
}
/* Unscoped so the bar keeps its gold gradient + dimensions even after the
   parent .rack-divider has been re-parented to <body> for dragging. */
.rack-divider-bar {
  display: block;
  width: 8px;
  height: 86%;
  border-radius: 4px;
  background: linear-gradient(180deg, #d4af37 0%, #aa8513 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.rack-cell .rack-divider:active { cursor: grabbing; }
/* Unscoped: keeps the dragged divider styled once it's been moved to
   document.body (the `.rack-cell` ancestor is gone). Mirrors .tile.dragging. */
.rack-divider.dragging {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1500;
  cursor: grabbing;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  opacity: 0.95;
  pointer-events: none;            /* let pointermove bubble to document */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  will-change: transform;
  contain: layout style paint;
}
/* Make the bar visually obvious in the dragging state — fill the cursor-
   sized container instead of being a thin 8px line. */
.rack-divider.dragging .rack-divider-bar {
  width: 60%;
  height: 90%;
  border-radius: 5px;
}

/* "+隔板" control button in the vertical rack-controls column. */
.add-divider-btn {
  background: rgba(212, 175, 55, 0.18) !important;
  border-color: rgba(212, 175, 55, 0.55) !important;
  color: #f5d27b !important;
}
.add-divider-btn:hover {
  background: rgba(212, 175, 55, 0.32) !important;
}

.rack-cell {
  background: var(--cell-bg);
  border-radius: 4px;
  box-shadow: var(--cell-inset-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible; /* allow tiles to overflow and overlap */
  touch-action: none;
}

.rack-cell.drag-hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Overlapping Card layout for Player's Rack.
   --segment-start and --segment-span (0-15 col units) describe the
   sub-segment this tile belongs to — when a divider splits a row, tiles
   only spread within their own segment so they never overlap the divider. */
.rack-cell .tile {
  position: absolute;
  left: calc(100% * (
    var(--segment-start, 0) +
    var(--segment-span, 15) * var(--active-idx, 0) / var(--active-count-minus-1, 1)
    - var(--col-index, 0)
  ));
  top: 0;
  height: 100%;
  aspect-ratio: 5 / 7;
  width: auto;
  max-width: none;
  max-height: none;
  z-index: 2;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.45), var(--tile-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  pointer-events: auto; /* Allow pointer events on card faces for accurate selection */

  /* Flat rack layout — no rotation, no curve. Each tile is offset along X by
     a fraction of its own width so the row stays nicely overlapped. */
  --trans-x: calc(-100% * var(--active-idx, 0) / var(--active-count-minus-1, 1));
  transform: translateX(var(--trans-x));
  transform-origin: bottom center;
  transition: top 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, left 0.15s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Adjust selected float on rack — keep tile size stable so neighbours do not
   appear to grow or shift when one tile is selected. */
.rack-cell .tile.selected {
  top: -28px;
  transform: translateX(var(--trans-x, 0px));
  z-index: 80;
  box-shadow: 0 12px 24px rgba(212, 175, 55, 0.8), var(--tile-shadow);
}

.rack-cell .tile.selected-primary {
  z-index: 90;
}

/* New Original Designer Card Layout */
.tile {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 7;
  max-width: 100%;
  max-height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f5f6fa 100%); /* Ivory paper gradient */
  border: 1.5px solid #d2d2d2;
  border-radius: 8px;
  box-shadow: var(--tile-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  box-sizing: border-box;
  container-type: size;
}

/* Thin inner border matching the card theme color */
.tile::after {
  content: '';
  position: absolute;
  top: 5cqh;
  bottom: 5cqh;
  left: 5cqw;
  right: 5cqw;
  border: 1px solid var(--tile-color, #7f8c8d);
  opacity: 0.35;
  border-radius: 5px;
  pointer-events: none;
  box-sizing: border-box;
}

.tile:active {
  cursor: grabbing;
}

/* Corner Index Badge Top-Left */
.tile .tile-top {
  position: absolute;
  top: 8cqh;
  left: 8cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  background-color: transparent !important;
  padding: 0;
  box-sizing: border-box;
  color: var(--tile-color, #7f8c8d) !important;
  z-index: 5;
}

.tile .tile-number {
  font-size: 18cqh; /* Uniform font size for all single and double digits */
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap; /* Prevent two-digit wrapping in index */
}

/* Small matching colored indicator dot below top index (Deactivated) */
.tile .tile-index-dot {
  display: none;
}

/* Large Center Number + Background Circle Frame */
.tile .tile-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Custom dashed circle behind center number */
.tile .tile-center-frame {
  position: absolute;
  width: 52cqw;
  height: 52cqw;
  border: 1px dashed var(--tile-color, #7f8c8d);
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
}

.tile .tile-number-large {
  font-size: 54cqh;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--tile-color, #7f8c8d);
  z-index: 3;
  white-space: nowrap; /* Prevent center digit wrapping */
}

/* Custom vector emblem styled in the card center */
.tile .tile-center-emblem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44cqw;
  height: 44cqw;
  color: var(--tile-color, #7f8c8d);
  opacity: 0.95;
  z-index: 3;
}

.tile .tile-center-emblem svg {
  width: 100%;
  height: 100%;
}

/* Double-digit adjustments (values 10, 11, 12, 13) to fit narrow card faces */
.tile.tile-double-digit .tile-number {
  font-size: 18cqh;
  letter-spacing: -0.05em;
}

.tile.tile-double-digit .tile-number-large {
  font-size: 42cqh;
  letter-spacing: -0.06em;
}

/* Corner Index Badge Bottom-Right (rotated) */
.tile .tile-bottom {
  position: absolute;
  bottom: 8cqh;
  right: 8cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  background-color: transparent !important;
  padding: 0;
  box-sizing: border-box;
  color: var(--tile-color, #7f8c8d) !important;
  transform: rotate(180deg);
  z-index: 5;
}


/* Color codes */
.tile-red {
  --tile-color: var(--red-num);
  color: var(--red-num);
}

.tile-yellow {
  --tile-color: var(--yellow-num);
  color: var(--yellow-num);
}

.tile-blue {
  --tile-color: var(--blue-num);
  color: var(--blue-num);
}

.tile-black {
  --tile-color: var(--black-num);
  color: var(--black-num);
}

/* Guided declare-win: a tile that wins the round if discarded. Green ring +
   gentle pulse, distinct from .selected (lift) and .tile-locked (grey). */
.tile.win-discard {
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.95), 0 0 14px 3px rgba(46, 204, 113, 0.6);
  animation: win-discard-pulse 1s ease-in-out infinite;
}
@keyframes win-discard-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46,204,113,0.95), 0 0 12px 2px rgba(46,204,113,0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(46,204,113,1),    0 0 20px 5px rgba(46,204,113,0.85); }
}

.tile.action-tip-recommended {
  box-shadow: 0 0 0 3px rgba(255, 231, 122, 0.98), 0 0 16px 4px rgba(255, 231, 122, 0.68);
  animation: action-tip-recommended-pulse 1.25s ease-in-out infinite;
}

@keyframes action-tip-recommended-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,231,122,0.98), 0 0 13px 3px rgba(255,231,122,0.58); }
  50%      { box-shadow: 0 0 0 4px rgba(255,244,165,1),    0 0 22px 6px rgba(255,231,122,0.88); }
}

/* Special wildcard indicator or joker star icon */
.tile.tile-joker {
  --tile-color: #aa8513; /* gold wildcard color */
}


/* Okey Wildcard Glowing Border */
.tile.okey-wildcard {
  border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8), var(--tile-shadow);
}

.tile.selected {
  transform: translateY(-8px);
  box-shadow: var(--tile-selected-shadow);
}

.drag-source-hidden {
  visibility: hidden !important;
}

/* Dragging state styled absolutely */
.tile.dragging {
  position: fixed;
  left: 0;
  top: 0;
  cursor: grabbing;
  z-index: 1000;
  opacity: 0.9;
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  pointer-events: none; /* Bubbles pointermove up to doc */
  will-change: transform;
  contain: layout style paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: top left;
  -webkit-transform-origin: top left;
}

html.dragging-tile-active #player-rack .tile,
html.dragging-tile-active #player-rack .rack-divider,
body.dragging-tile-active #player-rack .tile,
body.dragging-tile-active #player-rack .rack-divider {
  transition:
    left 0.14s cubic-bezier(0.2, 0.9, 0.24, 1),
    transform 0.14s cubic-bezier(0.2, 0.9, 0.24, 1),
    box-shadow 0.12s ease;
  will-change: transform, left;
}

@media (pointer: coarse) {
  .tile.dragging {
    opacity: 0.96;
    box-shadow: 0 8px 14px rgba(0,0,0,0.38);
  }

  .rack-divider.dragging {
    opacity: 0.96;
    filter: none;
  }
}

/* Pile representations */
.pile-tiles {
  width: 100%;
  height: 100%;
  position: relative;
}

.pile-tiles .tile {
  position: absolute;
  top: 0;
  left: 0;
}

/* Modals overlays & Glassmorphism */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 85%;
  max-width: 400px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--hud-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.visible .modal-card {
  transform: scale(1);
}

.modal-card h2 {
  font-family: 'Zilla Slab', serif;
  color: var(--gold);
  border-bottom: 1px solid var(--hud-border);
  padding-bottom: 8px;
  font-size: 1.5rem;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.toggle-switch {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-secondary);
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-switch.active {
  background: var(--gold);
  border-color: #aa8513;
  color: #000;
}

.settings-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hud-border);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 0.85rem;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.modal-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-family);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.modal-btn:active {
  opacity: 0.8;
}

.close-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.reset-btn {
  background: #c0392b;
  color: #fff;
}

.back-title-btn {
  background: #2980b9;
  color: #fff;
}

.save-transfer-btn {
  background: #8e44ad;
  color: #fff;
}

.save-transfer-card {
  max-width: 520px;
}

.save-transfer-help {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.save-transfer-textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: 1px solid var(--hud-border);
  border-radius: 10px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

.save-transfer-error {
  color: #ff7b7b;
  min-height: 1.2em;
  font-size: 0.9rem;
}

.save-transfer-summary {
  display: grid;
  gap: 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Rules content formatting */
.rules-card {
  max-width: 420px;
}

.rules-body {
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 8px;
}

.rules-body h3 {
  color: var(--gold);
  margin-top: 8px;
  font-size: 0.95rem;
}

.rules-body ul {
  padding-left: 16px;
}

/* Round over card formatting */
.round-winner-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gold);
  text-align: center;
}

.win-announcement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.win-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.round-scores-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: 8px;
}

.round-score-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 4px 0;
  font-size: 0.9rem;
}
.round-score-row .rs-name { text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-score-row .rs-delta { text-align: right; min-width: 3.2em; font-variant-numeric: tabular-nums; }
.round-score-row .rs-total { text-align: right; min-width: 2.4em; font-variant-numeric: tabular-nums; }

.round-reward-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 215, 88, 0.18), rgba(255, 190, 64, 0.08));
  border: 1px solid rgba(255, 221, 113, 0.28);
}

.round-reward-summary[hidden] {
  display: none;
}

.round-reward-summary span {
  color: #fff2c6;
  font-size: 0.84rem;
  font-weight: 900;
}

.round-reward-summary b,
.round-reward-summary strong {
  color: #ffd34d;
  font-size: 0.82rem;
  font-weight: 900;
}

/* Column header row: dimmer, smaller. */
.round-score-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 6px;
}

/* This-round delta colours. */
.rs-delta.loss { color: var(--red-num); }
.rs-delta.win { color: var(--gold); }

.score-row-win {
  color: var(--gold);
}

.score-dead {
  color: var(--red-num);
  text-decoration: line-through;
}

.next-round-btn {
  background: linear-gradient(135deg, #d4af37 0%, #aa8513 100%);
  color: #000;
}

/* Game over styles */
.game-over-card {
  align-items: center;
}

.trophy-cup {
  font-size: 4rem;
  animation: bounce 2s infinite;
}

.restart-match-btn {
  background: var(--gold);
  color: #000;
  font-weight: 700;
  width: 100%;
}

/* Banner Alert styles */
.banner-alert {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translate(-50%, -20px);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.banner-alert.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.banner-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.banner-alert.manual-close {
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner-close-btn {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(255, 245, 207, 0.48);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff5cf;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.banner-close-btn[hidden] {
  display: none;
}

.alert-error {
  border-color: var(--red-num);
  box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

.alert-error .banner-text {
  color: #ffcdd2;
}

/* Interactive Toast styles */
.interactive-toast {
  position: absolute;
  bottom: 240px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 90%;
  max-width: 450px;
  background: rgba(30, 41, 59, 0.95);
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 90;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.interactive-toast.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.toast-content {
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 60%;
}

.toast-actions {
  display: flex;
  gap: 8px;
}

.toast-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.yes-btn {
  background: var(--gold);
  color: #000;
}

.no-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Shaking animation for invalid actions */
.rack-board.shake {
  animation: shake-anim 0.5s;
}

/* Animations declarations */
@keyframes pulse-border {
  from {
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
  }
  to {
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.9);
  }
}

@keyframes shake-anim {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Compact Layout for Mobile Landscape (Short viewports under 650px) */
@media (max-height: 650px) and (orientation: landscape) {
  :root {
    --rack-row-height: 65px;
  }

  .game-header {
    height: 40px;
    padding: 0 16px;
  }
  
  .logo {
    font-size: 1.1rem;
  }
  
  .round-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    margin-left: 6px;
  }
  
  .score-board {
    gap: 8px;
  }
  
  .score-item {
    padding: 2px 8px;
    min-width: 65px;
    gap: 4px;
  }
  
  .p-name {
    font-size: 0.7rem;
  }
  
  .p-score {
    font-size: 0.85rem;
  }
  
  .header-right {
    gap: 8px;
  }
  
  .icon-btn {
    width: 28px;
    height: 28px;
  }
  
  .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .lang-toggle-btn {
    font-size: 0.7rem;
    padding: 2px 6px;
    min-width: 28px;
  }

  .game-table {
    grid-template-columns: 80px 1fr 80px;
    grid-template-rows: 32px 1fr;
    padding: 4px 10px;
    gap: 6px;
  }
  
  .player-panel {
    padding: 4px;
    border-radius: 8px;
  }
  
  .left-ai {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    min-width: 64px;
  }
  
  .right-ai {
    grid-column: 3;
    grid-row: 2;
    width: auto;
    min-width: 64px;
  }
  
  .top-ai {
    grid-column: 2;
    grid-row: 1;
    padding: 2px 8px;
    gap: 6px;
  }
  
  .avatar-ring {
    width: 26px;
    height: 26px;
    margin-bottom: 0;
  }
  
  .top-ai .avatar-ring {
    margin-bottom: 0;
  }
  
  .avatar {
    font-size: 0.75rem;
  }
  
  .player-name {
    font-size: 0.7rem;
  }
  
  .hand-indicator {
    font-size: 0.6rem;
  }

  .table-center {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 48px 1fr 48px;
    grid-template-rows: auto auto auto;
    padding: 10px 8px;
    gap: 14px 10px;
    border-radius: 12px;
  }
  
  .discard-zone {
    height: 52px;
    width: auto;
    border-radius: 6px;
  }
  
  .discard-label-top {
    top: -16px;
    font-size: 0.55rem;
  }

  .discard-label-bottom {
    bottom: -16px;
    font-size: 0.55rem;
  }
  
  .tile-deck-stack {
    height: 52px;
    width: auto;
    border-radius: 6px;
    box-shadow: 0 2px 0 #5c2d0c, 0 4px 6px rgba(0,0,0,0.5);
    transform: translateY(-2px);
  }
  
  .deck-face-down {
    font-size: 1.3rem;
  }
  
  .deck-count {
    font-size: 0.75rem;
  }
  
  .deck-label, .indicator-label {
    font-size: 0.65rem;
  }
  
  .indicator-tile-spot {
    height: 52px;
    width: auto;
    border-radius: 6px;
  }
  
  .indicator-container {
    /* margins removed */
  }
  
  .okey-info-card {
    /* margins removed */
  }
  
  .okey-info-title {
    font-size: 0.6rem;
    margin-bottom: 4px;
  }
  
  .okey-tile-display {
    height: 52px;
    width: auto;
    border-radius: 6px;
  }

  .player-area {
    padding: 6px 16px 8px 16px;
    gap: 6px;
  }
  
  .status-bar {
    font-size: 0.75rem;
    padding: 4px;
  }
  
  .rack-controls.vertical-controls {
    gap: 6px;
    width: 80px;
  }
  
  .rack-controls.vertical-controls .action-btn {
    font-size: 0.68rem;
    padding: 2px;
    border-radius: 6px;
  }
  
  .rack-controls.vertical-controls .action-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .rack-container {
    border-width: 2px;
    padding: 4px;
    border-radius: 6px;
  }
  
  .rack-cell {
    border-radius: 3px;
  }
  
  .tile {
    border-radius: 4px;
    padding: 2px 2px;
    width: 100%;
    height: 100%;
  }
  

  
  .tile-joker .tile-number {
    font-size: 0.75rem;
  }
  
  .tile.selected {
    transform: translateY(-4px);
  }
}

/* Ultra-compact Layout for extremely short mobile screens (e.g. viewports under 420px height) */
@media (max-height: 420px) and (orientation: landscape) {
  :root {
    --rack-row-height: 56px;
  }

  .game-header {
    height: 35px;
    padding: 0 10px;
  }
  
  .logo {
    font-size: 0.95rem;
  }
  
  .round-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
  
  .score-item {
    padding: 1px 6px;
    min-width: 55px;
  }
  
  .game-table {
    grid-template-columns: 70px 1fr 70px;
    grid-template-rows: 30px 1fr;
    padding: 2px 8px;
    gap: 4px;
  }
  
  .avatar-ring {
    width: 22px;
    height: 22px;
  }
  
  .player-panel {
    padding: 4px;
  }
  
  .player-name {
    font-size: 0.7rem;
  }
  
  .hand-indicator {
    font-size: 0.6rem;
  }
  
  .left-ai {
    grid-column: 1;
    grid-row: 2;
    min-width: 56px;
  }
  
  .right-ai {
    grid-column: 3;
    grid-row: 2;
    min-width: 56px;
  }
  
  .top-ai {
    grid-column: 2;
    grid-row: 1;
  }
  
  .table-center {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 42px 1fr 42px;
    grid-template-rows: auto auto auto;
    padding: 6px 8px;
    gap: 12px 6px;
  }
  
  .discard-zone, .tile-deck-stack, .indicator-tile-spot, .okey-tile-display {
    height: 44px;
    width: auto;
  }
  
  .discard-label-top {
    top: -13px;
    font-size: 0.5rem;
  }

  .discard-label-bottom {
    bottom: -13px;
    font-size: 0.5rem;
  }
  
  .indicator-container {
    /* margins removed */
  }
  
  .okey-info-card {
    /* margins removed */
  }
  
  .deck-face-down {
    font-size: 1.1rem;
  }
  
  .player-area {
    padding: 4px 10px 4px 10px;
    gap: 4px;
  }
  
  .status-bar {
    font-size: 0.7rem;
    padding: 2px;
  }
  
  .rack-controls.vertical-controls {
    gap: 4px;
    width: 72px;
  }
  
  .rack-controls.vertical-controls .action-btn {
    font-size: 0.62rem;
    padding: 1px;
  }

  .rack-controls.vertical-controls .action-btn svg {
    width: 12px;
    height: 12px;
  }
  

  
  .tile {
    padding: 1px 1px;
    width: 100%;
    height: 100%;
  }
}

/* Custom Dropdown Selection Styles in Settings */
.custom-select-container {
  position: relative;
  min-width: 140px;
}

.custom-select-trigger {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  padding: 8px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-select-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.custom-select-container.open .custom-select-trigger {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.custom-select-trigger .trigger-arrow {
  font-size: 0.7rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.custom-select-container.open .trigger-arrow {
  transform: rotate(180deg);
  color: var(--gold);
}

.custom-options-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: rgba(18, 18, 18, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1100;
  
  /* Smooth fade & scale animation */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.95);
  transform-origin: top center;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-options-list.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.custom-options-list button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}

.custom-options-list button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.custom-options-list button:active {
  background: rgba(212, 175, 55, 0.25);
  color: #fff;
}

.custom-options-list button.active-option {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
}

/* Title Screen Style */
.title-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #0f2d1e 0%, #05120a 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 80;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.title-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05);
}

.title-content {
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.title-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.title-logo {
  font-family: 'Zilla Slab', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 5px 15px rgba(0, 0, 0, 0.8);
  letter-spacing: 2px;
  animation: logo-glow 3s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  0% {
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.3), 0 4px 10px rgba(0, 0, 0, 0.8);
  }
  100% {
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6), 0 4px 10px rgba(0, 0, 0, 0.8);
  }
}

.title-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  color: var(--text-secondary);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 5px;
  opacity: 0.85;
}

/* Decorative tile graphics floating behind the title screen */
.decor-tiles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.12;
  z-index: 1;
}

.decor-tile {
  position: absolute;
  width: 70px;
  height: 95px;
  background: #fdfbf7;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  border: 1px solid #e2e2e2;
  user-select: none;
}

.decor-tile span {
  font-size: 1.8rem;
  line-height: 1.1;
}

/* Floating animation or random positioning for decor tiles */
.decor-tile-1 {
  top: 15%;
  left: 12%;
  transform: rotate(-15deg);
  color: #111; /* Black 8 */
}
.decor-tile-2 {
  bottom: 20%;
  left: 15%;
  transform: rotate(20deg);
  color: #d12e2e; /* Red 11 */
}
.decor-tile-3 {
  top: 22%;
  right: 12%;
  transform: rotate(12deg);
  color: #3b5998; /* Blue 13 */
}
.decor-tile-4 {
  bottom: 18%;
  right: 18%;
  transform: rotate(-25deg);
  color: #e5a93b; /* Yellow 7 */
}

/* Menu Buttons */
.menu-btn-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px;
}

.menu-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.menu-btn svg {
  transition: transform 0.2s ease;
}

.menu-btn.start-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #aa8513 100%);
  color: #000;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
}

.menu-btn.start-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55);
}

.menu-btn.start-btn:hover svg {
  transform: scale(1.15) translateX(2px);
}

.menu-btn.start-btn:active {
  transform: translateY(1px) scale(0.99);
}

.menu-btn.settings-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.menu-btn.settings-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px) scale(1.03);
}

.menu-btn.settings-btn:hover svg {
  transform: rotate(45deg);
}

.menu-btn.settings-btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Loading Screen Style */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #0a1e13 0%, #030a06 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.loading-screen.visible {
  opacity: 1;
  pointer-events: auto;
  transition: none; /* Show instantly to prevent play board flashing */
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 320px;
}

.loading-logo {
  font-family: 'Zilla Slab', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.loading-bar-container {
  width: 240px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, #aa8513 100%);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--gold);
}

.loading-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: var(--text-secondary);
  letter-spacing: 1px;
  opacity: 0.85;
}

/* Mode Selector on Title Screen */
.mode-selector-container {
  width: 240px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px;
  border-radius: 20px;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.mode-selector {
  display: flex;
  width: 100%;
}

.mode-option {
  flex: 1;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.25s ease;
  user-select: none;
}

.mode-option:hover {
  color: #fff;
}

.mode-option.active {
  background: linear-gradient(135deg, var(--gold) 0%, #aa8513 100%);
  color: #000;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.25);
}

/* ==========================================
   Rogue Mode Styles
   ========================================== */

/* HUD Bar */
.rogue-hud-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  padding: 8px 16px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  z-index: 10;
  box-sizing: border-box;
}

.rogue-hud-bar .hud-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rogue-hud-bar .hud-item .label {
  color: var(--text-secondary);
  font-weight: 600;
}

.rogue-hud-bar .hud-item .val {
  font-weight: 700;
  min-width: 0;
}

.rogue-hud-bar .relics-list {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
}

.rogue-hud-bar .relic-hud-icon {
  font-size: 1.1rem;
  cursor: help;
  transition: transform 0.2s;
}

.rogue-hud-bar .relic-hud-icon:hover {
  transform: scale(1.2);
}

.rogue-hud-bar .relic-hud-empty {
  color: rgba(255, 241, 189, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.rogue-hud-bar .hud-target-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
  background: rgba(212, 175, 55, 0.15);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.rogue-hud-bar .hud-objective {
  font-weight: 700;
  color: #ffe06b;
}

.rogue-hud-bar .hud-stage,
.rogue-hud-bar .hud-objective {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On a phone the HUD wraps; let the run-progress pill take its own full row so
   the Act/stage + objective read horizontally instead of being crushed into a
   narrow column in the corner (issue #118). */
@media (max-width: 520px) {
  .rogue-hud-bar {
    gap: 6px 12px;
    padding: 6px 10px;
    font-size: 0.82rem;
  }
  .rogue-hud-bar .hud-target-container {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .rogue-hud-bar .hud-target-container .val,
  .rogue-hud-bar #rogue-hud-target {
    display: flex;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .rogue-hud-bar .hud-stage,
  .rogue-hud-bar .hud-objective {
    max-width: 50%;
  }
}

/* Rogue Active Skill Button */
.rogue-skill-btn {
  background: linear-gradient(135deg, #8e44ad 0%, #2c3e50 100%) !important;
  color: #fff !important;
  border: 1px solid #9b59b6 !important;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.4) !important;
}

.rogue-skill-btn:not(.disabled-skill):hover {
  box-shadow: 0 0 15px rgba(155, 89, 182, 0.8) !important;
  transform: translateY(-2px);
}

.disabled-skill {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #333 !important;
  border-color: #555 !important;
  box-shadow: none !important;
}

/* Modals styling extensions */
.char-select-modal-card {
  max-width: 600px !important;
  width: 90% !important;
  max-height: 95vh !important;
  background: radial-gradient(circle at top, #1e0f0f 0%, #0d0606 100%) !important;
  border: 2px solid #8b0000 !important;
  box-shadow: 0 0 30px rgba(139, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
}

.char-select-scroll-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.char-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.char-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.char-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.char-card.active {
  border-color: #d12e2e;
  background: rgba(209, 46, 46, 0.12);
  box-shadow: 0 0 15px rgba(209, 46, 46, 0.35);
}

.char-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
}

.char-name {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.char-title {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.char-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  text-align: left;
  width: 100%;
}

.char-desc p {
  margin: 3px 0;
}

.ascension-selector-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.ascension-selector-container label {
  font-size: 0.85rem;
  font-weight: 600;
}

.ascension-effects-box {
  background: rgba(139, 0, 0, 0.08);
  border: 1px solid rgba(139, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
  max-height: 120px;
  overflow-y: auto;
}

.effects-title {
  font-size: 0.8rem;
  color: #ff6b6b;
  font-weight: 700;
  margin-bottom: 6px;
}

.effects-list {
  padding-left: 16px;
  margin: 0;
  font-size: 0.75rem;
  color: #ffcccc;
  line-height: 1.4;
}

.character-select-card {
  width: min(420px, calc(100vw - 28px)) !important;
  max-width: 420px !important;
}

.character-carousel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
}

.character-arrow {
  width: 42px;
  height: 58px;
  border: 1px solid rgba(241, 196, 15, 0.45);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.28);
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.character-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.character-portrait {
  --portrait-accent: var(--gold);
  width: min(190px, 46vw);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 2px solid rgba(241, 196, 15, 0.65);
  border-radius: 8px;
  color: var(--portrait-accent);
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--portrait-accent) 22%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.character-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom;
}

.character-name {
  color: var(--gold);
  font-family: 'Zilla Slab', serif;
  font-size: 1.35rem;
  font-weight: 900;
}

.character-title {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}

.character-desc-panel {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.character-desc-panel p {
  margin: 0;
}

.character-desc-panel p + p {
  margin-top: 6px;
}

.exploration-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(241, 196, 15, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.exploration-row strong {
  display: block;
  color: var(--gold);
  margin-bottom: 4px;
}

.exploration-row p {
  margin: 0;
  font-size: 0.82rem;
}

.exploration-picker-card {
  width: min(460px, calc(100vw - 28px));
  max-width: 460px;
}

.exploration-list {
  max-height: min(520px, 62vh);
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.exploration-option {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  text-align: left;
  cursor: pointer;
}

.exploration-option.active,
.exploration-option:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(241, 196, 15, 0.16);
}

.exploration-option:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.exploration-option-head {
  color: var(--gold);
  font-weight: 900;
}

.exploration-option-detail {
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.35;
}

.start-challenge-btn {
  min-height: 44px;
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0;
  overflow: visible;
  text-shadow:
    0 2px 0 rgba(72, 27, 8, 0.72),
    0 0 8px rgba(52, 16, 8, 0.28);
}

.start-challenge-btn.is-launching {
  animation: rogue-start-launch 0.18s cubic-bezier(0.18, 0.92, 0.28, 1) both;
  pointer-events: none;
  filter: brightness(0.98) saturate(1.12);
}

@keyframes rogue-start-launch {
  0% {
    transform: translateY(0) scale(1);
  }
  58%,
  100% {
    transform: translateY(calc(var(--button-depth, 4px) - var(--button-press-depth, 1px))) scale(0.985);
  }
}

body[data-rogue-combat="solo"] #score-p1,
body[data-rogue-combat="solo"] #score-p2,
body[data-rogue-combat="solo"] #score-p3,
body[data-rogue-combat="solo"] #panel-player-1,
body[data-rogue-combat="solo"] #panel-player-2,
body[data-rogue-combat="solo"] #panel-player-3,
body[data-rogue-combat="solo"] #discard-top-left,
body[data-rogue-combat="solo"] #discard-top-right,
body[data-rogue-combat="solo"] #discard-left {
  display: none !important;
}

body[data-rogue-combat="solo"] .score-board {
  justify-content: center;
}

body[data-rogue-combat="solo"] .score-item {
  min-width: 112px;
}

body[data-rogue-combat="solo"] .game-table {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding-inline: 14px;
}

body[data-rogue-combat="solo"] .table-center {
  grid-column: 1;
  grid-row: 1;
  width: min(420px, 82vw);
  justify-self: center;
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr);
  grid-template-rows: auto;
  gap: 18px;
  padding: 18px;
}

body[data-rogue-combat="solo"] .center-stacks {
  grid-column: 1;
  grid-row: 1;
}

body[data-rogue-combat="solo"] .right-discard {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

body[data-rogue-combat="solo"] .game-info-corner {
  top: 8px;
  left: 10px;
}

@media (max-width: 780px) {
  .character-select-card {
    max-height: calc(100% - 20px);
  }

  .character-carousel {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .character-arrow {
    width: 36px;
    height: 50px;
  }

  .character-portrait {
    width: min(168px, 48vw);
  }

  body[data-rogue-combat="solo"] .table-center {
    width: min(320px, 88vw);
    gap: 14px;
    padding: 14px;
  }
}

/* Shop Modal */
.shop-modal-card {
  max-width: 550px !important;
  width: 90% !important;
  background: radial-gradient(circle at top, #1c2833 0%, #0e171e 100%) !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.35) !important;
}

.shop-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}

.shop-header-row h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.shop-player-gold {
  font-size: 1rem;
}

.shop-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: -6px;
}

.shop-items-shelf {
  display: flex;
  gap: 12px;
  margin: 8px 0;
}

.shop-shelf-item {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.shop-shelf-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
}

.shop-item-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.shop-item-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 4px;
}

.shop-item-desc {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-bottom: 8px;
  flex-grow: 1;
}

.shop-item-cost {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
}

.sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--red-num);
  font-weight: 700;
  font-size: 1.1rem;
  transform: rotate(-15deg);
  pointer-events: none;
}

.shop-shelf-item.sold-out {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Relic Reward Modal */
.relic-reward-modal-card {
  max-width: 500px !important;
  width: 90% !important;
  background: radial-gradient(circle at top, #112233 0%, #08111a 100%) !important;
  border: 2px solid var(--gold) !important;
  text-align: center;
}

.relic-reward-row {
  display: flex;
  gap: 12px;
  margin: 12px 0;
}

.relic-reward-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.relic-reward-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

.relic-reward-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
}

.relic-reward-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 4px;
}

.relic-reward-desc {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Relic rarity label — shared by reward cards and the shop shelf */
.relic-rarity {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rarity-common { color: #b8c0cc; }
.rarity-uncommon { color: #4fb286; }
.rarity-rare { color: #c084fc; }
/* Tint the HUD relic chip border by rarity so owned relics read at a glance */
.relic-hud-icon.rarity-common { box-shadow: inset 0 0 0 1px rgba(184, 192, 204, 0.5); }
.relic-hud-icon.rarity-uncommon { box-shadow: inset 0 0 0 1px rgba(79, 178, 134, 0.7); }
.relic-hud-icon.rarity-rare { box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.8); }

/* Score Bill / Summary Modal */
.summary-card {
  max-width: 450px !important;
  background: radial-gradient(circle at top, #0f231c 0%, #07110e 100%) !important;
  border: 1.5px solid #10b981 !important;
}

.score-bill-container {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
}

.summary-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 4px 0;
}

.summary-item-row .val {
  font-weight: 700;
  color: var(--gold);
}

.total-row {
  font-size: 1rem;
  font-weight: 700;
}

/* Cursed Lock cell & lock overlay visual effects */
.cell-locked {
  background: rgba(139, 0, 0, 0.2) !important;
  border: 1px dashed rgba(139, 0, 0, 0.6) !important;
  position: relative;
  overflow: hidden;
}

.cell-locked .lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
}

.cell-locked .lock-icon {
  width: 18px;
  height: 18px;
  color: #e74c3c;
  animation: lock-wobble 3s infinite alternate;
}

@keyframes lock-wobble {
  0% { transform: scale(1) rotate(0); }
  85% { transform: scale(1) rotate(0); }
  90% { transform: scale(1.1) rotate(-8deg); }
  95% { transform: scale(1.1) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.tile-locked {
  filter: grayscale(0.8) contrast(0.8) brightness(0.7);
  position: relative;
}

.tile-locked::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(139, 0, 0, 0.08);
  border-radius: inherit;
  pointer-events: none;
}

.lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  background: rgba(0, 0, 0, 0.25);
  border-radius: inherit;
  pointer-events: none;
}

.lock-icon {
  width: 16px;
  height: 16px;
  color: #ff3b30;
}

.vertical-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.vertical-actions .modal-btn {
  width: 100%;
  flex: none;
}

@media (max-width: 600px) {
  .char-cards-container {
    grid-template-columns: 1fr;
    max-height: 200px;
    overflow-y: auto;
  }
  .shop-items-shelf, .relic-reward-row {
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
    gap: 8px;
  }
  .shop-shelf-item, .relic-reward-card {
    flex-direction: row;
    text-align: left;
    align-items: center;
    padding: 8px 12px;
  }
  .shop-item-icon, .relic-reward-icon {
    font-size: 1.6rem;
    margin-bottom: 0;
    margin-right: 10px;
  }
  .shop-item-desc, .relic-reward-desc {
    display: none; /* Hide descriptions on narrow screens to fit height */
  }
  .shop-item-name, .relic-reward-name {
    margin-bottom: 0;
    flex-grow: 1;
  }
  .shop-item-cost {
    margin-left: 10px;
  }
}

/* --- Redesigned Home and Mode Selection Screens --- */

.home-screen-content,
.mode-selection-content {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: none;
  transition: opacity 0.24s ease;
  box-sizing: border-box;
}

.home-screen-content.active,
.mode-selection-content.active {
  display: flex;
  opacity: 1;
  transform: none;
}

/* ============================================================
   Lobby home screen (top bar + side rail + character + bottom nav)
   ============================================================ */
.home-screen-content.lobby {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background-image: url("./assets/lobby-main-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0b4f6a;
  isolation: isolate;
}

@media (pointer: coarse) {
  .home-screen-content.lobby {
    background-image: url("./assets/lobby-main-bg-mobile.jpg");
  }
}

.home-screen-content.lobby::before,
.home-screen-content.lobby::after {
  display: none;
}

.home-screen-content.lobby.use-css-art-fallback {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 31%),
    radial-gradient(ellipse at 55% 12%, rgba(44,174,208,0.64) 0%, rgba(44,174,208,0.06) 34%, rgba(44,174,208,0) 58%),
    radial-gradient(ellipse at 50% 72%, rgba(9,77,45,0.88) 0%, rgba(4,42,26,0.94) 45%, rgba(3,22,14,0.98) 100%),
    linear-gradient(180deg, #25a9c9 0%, #0f7f9b 22%, #0f4f4a 52%, #041f15 100%);
}

.home-screen-content.lobby::before,
.home-screen-content.lobby::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-screen-content.lobby::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 17% 28%, rgba(244,214,149,0.44) 0 8%, transparent 13%),
    radial-gradient(ellipse at 77% 31%, rgba(237,236,222,0.34) 0 7%, transparent 13%),
    radial-gradient(ellipse at 38% 74%, rgba(208,172,92,0.28) 0 10%, transparent 17%),
    linear-gradient(112deg, transparent 0 10%, rgba(255,255,255,0.22) 10.5% 13%, transparent 13.5% 100%);
  opacity: 0.8;
  filter: blur(0.5px);
}

.home-screen-content.lobby::after {
  left: 50%;
  top: 41%;
  width: min(78vw, 330px);
  aspect-ratio: 1.35;
  transform: translate(-50%, -50%) rotate(-2deg);
  border-radius: 45% 45% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(246,228,156,0.28) 0%, rgba(246,228,156,0.12) 33%, transparent 60%),
    linear-gradient(145deg, rgba(130,77,38,0.34), rgba(31,98,67,0.4));
  border: 1px solid rgba(255,220,125,0.16);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.home-screen-content.lobby .lobby-topbar,
.home-screen-content.lobby #page-journey .lobby-side-rail,
.home-screen-content.lobby #page-journey .lobby-stage,
.home-screen-content.lobby .lobby-bottomnav {
  opacity: 0;
}

/* --- Top bar --- */
.lobby-topbar {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  z-index: 12;
  box-sizing: border-box;
  min-width: 0;
}
.lobby-avatar-block {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(174,35,66,0.96), rgba(111,14,39,0.98));
  border: 2px solid rgba(255,197,70,0.78);
  border-radius: 40px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, background 0.18s ease;
  flex: 1 1 160px;
  min-width: 0;
  max-width: 210px;
}
.lobby-avatar-block:active { transform: scale(0.96); }
.lobby-avatar {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fb1ff, #2a6fd6);
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.24);
}
.lobby-avatar-face { font-size: 1.4rem; line-height: 1; }
.lobby-avatar-lvl {
  position: absolute;
  bottom: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: #000;
  font-size: 0.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #1a1a1a;
}
.lobby-avatar-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lobby-pname {
  font-size: 0.8rem; font-weight: 700; color: #fff;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lobby-xpbar {
  width: 80px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.18); overflow: hidden;
}
.lobby-xpfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7fe3a0, #38c172);
  border-radius: 3px; transition: width 0.5s ease;
}

.lobby-xptext {
  color: rgba(255, 241, 189, 0.78);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-resources {
  display: flex; gap: 6px; margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.res-pill {
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #fff7d8 0%, #f2d29b 100%);
  border: 2px solid rgba(143,31,55,0.78);
  border-radius: 30px;
  padding: 4px 4px 4px 10px;
  color: #57162a;
  min-width: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.72);
}
.res-ico { font-size: 0.95rem; }
.res-val { font-size: 0.85rem; font-weight: 700; min-width: 16px; text-align: right; }
.res-plus {
  width: 20px; height: 20px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #4ad07d, #2faa5e);
  color: #fff; font-size: 0.95rem; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.res-plus:active { transform: scale(0.9); }
.lobby-gear {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd769, #e27b18 72%);
  border: 2px solid rgba(117,23,39,0.78);
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.62);
}
.lobby-gear:active { transform: scale(0.92); }
.lobby-gear:hover svg { transform: rotate(90deg); }
.lobby-gear svg { transition: transform 0.4s ease; }

/* --- Left activity rail --- */
.lobby-side-rail {
  position: absolute;
  left: 10px;
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 11;
}
.rail-icon {
  position: relative;
  width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.rail-icon[hidden],
.nav-tab[hidden],
.lobby-side-rail[hidden] {
  display: none !important;
}
.rail-emoji {
  width: 50px; height: 50px; border-radius: 16px;
  background: linear-gradient(180deg, #fff4cf 0%, #d9993f 100%);
  border: 2px solid rgba(125,25,46,0.78);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 5px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.68);
  transition: transform 0.18s ease, background 0.18s ease;
}
.rail-icon:active .rail-emoji { transform: scale(0.9); }
.rail-icon:hover .rail-emoji { background: rgba(212,175,55,0.22); }
.rail-label { font-size: 0.65rem; color: #e8e8e8; font-weight: 600; }

.rail-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff0ad;
  background: #ff334f;
  box-shadow: 0 0 0 2px rgba(93, 15, 31, 0.75), 0 0 10px rgba(255, 68, 90, 0.8);
}

.rail-icon.has-reward .rail-emoji {
  box-shadow: 0 5px 12px rgba(0,0,0,0.38), 0 0 16px rgba(255, 218, 77, 0.72), inset 0 1px 0 rgba(255,255,255,0.68);
}

/* --- Center stage --- */
.lobby-stage {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 0 70px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.lobby-logo {
  font-family: 'Zilla Slab', serif;
  font-size: 3.4rem; font-weight: 700; margin: 0;
  color: var(--gold);
  text-shadow: 0 0 25px rgba(212,175,55,0.55), 0 5px 15px rgba(0,0,0,0.9);
  letter-spacing: 3px;
  animation: logo-glow 3s ease-in-out infinite alternate;
}
.lobby-character {
  position: relative;
  width: 180px; height: 210px;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  -webkit-tap-highlight-color: transparent;
}
.char-podium {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 40px; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--felt-green, #2e8b57) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.7;
  filter: blur(2px);
}
.char-figure {
  font-size: 7rem; line-height: 1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
  animation: lobby-char-bob 3.2s ease-in-out infinite;
  z-index: 1;
}
@keyframes lobby-char-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.char-hint {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; color: #cfcfcf;
  background: rgba(0,0,0,0.4); padding: 2px 10px; border-radius: 12px;
  white-space: nowrap;
}
.lobby-play {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 4px;
}
.lobby-play-btn {
  --button-depth: 8px;
  --button-press-depth: 1px;
  --button-base-color: rgba(94,32,31,0.92);
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem; font-weight: 800;
  padding: 15px 56px; border-radius: 40px; border: 3px solid rgba(115,24,38,0.72); cursor: pointer;
  background: linear-gradient(180deg, #b9ff34 0%, #6ed700 62%, #3fa000 100%);
  color: #fff;
  text-shadow: 0 2px 0 rgba(37,84,0,0.55);
  box-shadow: 0 8px 0 rgba(94,32,31,0.78), 0 6px 26px rgba(162,255,45,0.45), inset 0 2px 0 rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(0) scale(1);
  transform-origin: center bottom;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition:
    transform 0.18s cubic-bezier(0.2,0.9,0.24,1),
    box-shadow 0.18s ease,
    filter 0.18s ease;
  animation: lobby-play-pulse 2.4s ease-in-out infinite;
}
.lobby-play-btn::before,
.lobby-play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lobby-play-btn::before {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.28), rgba(255,255,255,0) 52%);
  opacity: 0.82;
}
.lobby-play-btn::after {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.28)),
    var(--button-base-color);
  box-shadow: 0 8px 14px rgba(42,13,16,0.38);
  transform: translateY(var(--button-depth));
  transition:
    transform 0.18s cubic-bezier(0.2,0.9,0.24,1),
    box-shadow 0.18s ease;
}
@keyframes lobby-play-pulse {
  0%,100% { box-shadow: 0 8px 0 rgba(94,32,31,0.78), 0 6px 26px rgba(162,255,45,0.45), inset 0 2px 0 rgba(255,255,255,0.55); }
  50% { box-shadow: 0 8px 0 rgba(94,32,31,0.78), 0 6px 36px rgba(162,255,45,0.72), inset 0 2px 0 rgba(255,255,255,0.55); }
}
.lobby-play-btn:hover {
  transform: translateY(-3px) scale(1.04);
  filter: saturate(1.08) brightness(1.04);
}
.lobby-play-btn:active {
  animation-play-state: paused;
  transform: translateY(calc(var(--button-depth) - var(--button-press-depth))) scale(0.985);
  filter: brightness(0.96) saturate(1.08);
  box-shadow:
    0 2px 12px rgba(162,255,45,0.28),
    inset 0 4px 7px rgba(37,84,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.28);
}
.lobby-play-btn:active::after {
  transform: translateY(var(--button-press-depth));
  box-shadow: 0 2px 5px rgba(42,13,16,0.24);
}
.lobby-play-btn.is-launching {
  animation: lobby-start-launch 0.24s cubic-bezier(0.18, 0.92, 0.28, 1) both;
  filter: brightness(0.98) saturate(1.18);
}
.lobby-play-btn.is-launching::after {
  animation: lobby-start-base-launch 0.24s cubic-bezier(0.18, 0.92, 0.28, 1) both;
}
@keyframes lobby-start-launch {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 0 rgba(94,32,31,0.78), 0 6px 26px rgba(162,255,45,0.45), inset 0 2px 0 rgba(255,255,255,0.55);
  }
  58% {
    transform: translateY(7px) scale(0.97);
    box-shadow: 0 2px 8px rgba(162,255,45,0.22), inset 0 5px 9px rgba(37,84,0,0.34), inset 0 1px 0 rgba(255,255,255,0.24);
  }
  100% {
    transform: translateY(5px) scale(0.99);
    box-shadow: 0 3px 12px rgba(162,255,45,0.28), inset 0 3px 6px rgba(37,84,0,0.24), inset 0 1px 0 rgba(255,255,255,0.28);
  }
}
@keyframes lobby-start-base-launch {
  0% {
    transform: translateY(var(--button-depth));
    box-shadow: 0 8px 14px rgba(42,13,16,0.38);
  }
  58%, 100% {
    transform: translateY(var(--button-press-depth));
    box-shadow: 0 2px 5px rgba(42,13,16,0.24);
  }
}
.lobby-continue-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  padding: 9px 26px; border-radius: 26px; cursor: pointer;
  border: 1px solid rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.1); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.lobby-continue-btn:hover { background: rgba(212,175,55,0.22); transform: translateY(-2px); }

/* --- Bottom navigation --- */
.lobby-bottomnav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: linear-gradient(180deg, #b62247 0%, #76132e 62%, #4c0c1f 100%);
  border-top: 3px solid rgba(255,199,61,0.82);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 8px;
  z-index: 12;
  box-shadow: 0 -8px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
}
.nav-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: #ffe6b8; padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, transform 0.18s ease;
  min-width: 0;
}
.nav-tab .nav-emoji { font-size: 1.35rem; line-height: 1; }
.nav-tab .nav-label { font-size: 0.66rem; font-weight: 600; }
.nav-tab:active { transform: scale(0.9); }
.nav-tab.active { color: var(--gold); }
.nav-tab.active .nav-emoji { transform: translateY(-2px); filter: drop-shadow(0 2px 6px rgba(212,175,55,0.6)); }
.nav-tab:not(.active):hover { color: #fff; }
.nav-tab[data-page="friends"] { order: 1; }
.nav-tab[data-page="achievements"] { order: 2; }
.nav-tab[data-page="journey"] { order: 3; }
.nav-tab[data-page="inventory"] { order: 4; }
.nav-tab[data-page="store"] { order: 5; }
.nav-tab[data-page="journey"] {
  flex: 1.05;
  min-height: 62px;
  margin: -14px 2px 0;
  padding: 7px 0 6px;
  border-radius: 20px 20px 10px 10px;
  background: linear-gradient(180deg, #d73765 0%, #9d183d 68%, #6a0f2a 100%);
  border: 2px solid rgba(255,207,69,0.9);
  color: #fff3ba;
  box-shadow: 0 -3px 0 rgba(255,217,76,0.28), 0 5px 10px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
}
.nav-tab[data-page="journey"] .nav-emoji {
  font-size: 1.62rem;
}
.nav-tab[data-page="journey"] .nav-label {
  font-size: 0.72rem;
  font-weight: 800;
}

/* Tint the character podium/glow to match the equipped felt theme */
body[data-felt="felt_sakura"] .char-podium { background: radial-gradient(ellipse at center, #e98bb0 0%, rgba(0,0,0,0) 70%); }
body[data-felt="felt_ocean"]  .char-podium { background: radial-gradient(ellipse at center, #2aa6c4 0%, rgba(0,0,0,0) 70%); }
body[data-felt="felt_night"]  .char-podium { background: radial-gradient(ellipse at center, #6b5bd6 0%, rgba(0,0,0,0) 70%); }

/* --- Page container: independent full pages between top bar & bottom nav --- */
.lobby-pages {
  position: absolute;
  top: calc(62px + env(safe-area-inset-top));
  left: 0; right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.lobby-page {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.lobby-page.active {
  display: flex;
  opacity: 1;
}
/* Journey page centers the stage; rail is absolute within it. */
#page-journey {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#page-journey .lobby-side-rail {
  top: 50%;
  transform: translateY(-50%);
}
#page-journey .lobby-stage { padding: 0 70px; }
/* Scrollable content pages (store / placeholders). */
.lobby-page-scroll {
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page-title {
  font-family: 'Zilla Slab', serif;
  color: var(--gold);
  font-size: 1.5rem; text-align: center; margin: 16px 0 4px;
}
.page-store-inner { padding: 0 16px 24px; }
/* Placeholder pages (coming soon) */
.page-placeholder {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #cfd6d0; text-align: center; padding: 24px;
}
.page-ph-emoji {
  font-size: 4.5rem;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  animation: lobby-char-bob 3.2s ease-in-out infinite;
}
.page-ph-title { font-family: 'Zilla Slab', serif; color: var(--gold); margin: 0; font-size: 1.6rem; }
.page-ph-text {
  margin: 0; font-size: 0.9rem; color: #9fb0a4;
  background: rgba(255,255,255,0.06); padding: 6px 16px; border-radius: 20px;
}

@media (max-width: 360px) {
  .lobby-logo { font-size: 2.6rem; }
  .char-figure { font-size: 5.5rem; }
  .lobby-character { width: 150px; height: 175px; }
  .lobby-play-btn { padding: 13px 44px; font-size: 1.1rem; }
}

@media (max-width: 430px) {
  .lobby-topbar {
    gap: 6px;
    padding-left: 8px;
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .lobby-avatar-block {
    flex-basis: 132px;
    max-width: 168px;
    gap: 6px;
    padding-right: 8px;
  }

  .lobby-avatar {
    width: 38px;
    height: 38px;
  }

  .lobby-pname {
    max-width: 74px;
    font-size: 0.74rem;
  }

  .lobby-xpbar {
    width: 70px;
  }

  .lobby-resources {
    gap: 4px;
  }

  .res-pill {
    gap: 3px;
    padding: 3px 3px 3px 7px;
  }

  .res-ico {
    font-size: 0.82rem;
  }

  .res-val {
    font-size: 0.76rem;
    min-width: 10px;
  }

  .res-plus {
    width: 18px;
    height: 18px;
    font-size: 0.85rem;
  }

  .lobby-gear {
    width: 38px;
    height: 38px;
  }

  .lobby-gear svg {
    width: 20px;
    height: 20px;
  }
}

/* Home Screen (Screen 1) */
.title-logo-big {
  font-family: 'Zilla Slab', serif;
  font-size: 5rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.55), 0 5px 15px rgba(0, 0, 0, 0.9);
  letter-spacing: 4px;
  animation: logo-glow 3s ease-in-out infinite alternate;
  margin: 0 0 10px 0;
}

.home-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}

.start-btn-big {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 14px 48px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold) 0%, #aa8513 100%);
  color: #000;
  box-shadow: 0 5px 25px rgba(212, 175, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.start-btn-big:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.65);
}

.start-btn-big:active {
  transform: translateY(1px) scale(0.99);
}

/* "Continue Match" button shown when localStorage has a saved match. */
.continue-btn {
  margin-top: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 28px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  cursor: pointer;
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.continue-btn:hover {
  background: rgba(212, 175, 55, 0.22);
  transform: translateY(-2px);
}
.continue-btn:active {
  transform: translateY(0);
}

.circle-settings-btn {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 32px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.circle-settings-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--gold);
  transform: scale(1.08);
}

.circle-settings-btn:hover svg {
  transform: rotate(90deg);
}

.circle-settings-btn svg {
  transition: transform 0.4s ease;
}

/* Mode Selection Screen (Screen 2) */
.mode-selection-title {
  font-family: 'Zilla Slab', serif;
  color: var(--gold);
  font-size: 2rem;
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Vertical Layout for Mode Grid in Portrait */
.mode-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 90%;
  max-width: 420px;
  margin-bottom: 24px;
}

.grid-mode-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  box-sizing: border-box;
}

.grid-mode-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.08);
}

/* Custom glowing styles for each mode card */
.grid-mode-card.mode-quick:hover {
  border-color: #f1c40f;
  box-shadow: 0 0 15px rgba(241, 196, 15, 0.3);
}
.grid-mode-card.mode-classic:hover {
  border-color: #3498db;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
}
.grid-mode-card.mode-rogue:hover {
  border-color: #9b59b6;
  box-shadow: 0 0 15px rgba(155, 89, 182, 0.3);
}
.grid-mode-card.mode-tutorial:hover {
  border-color: #2ecc71;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

.card-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 2.2rem;
  margin-bottom: 0;
  justify-self: center;
}

.card-title {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: #fff;
  margin-bottom: 0;
  text-align: left;
}

.card-desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.3;
  padding: 0;
  text-align: left;
}

/* Footer Navigation inside Mode Selection */
.mode-selection-footer {
  width: 90%;
  max-width: 420px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-btn svg {
  transition: transform 0.2s ease;
}

.footer-btn.back-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.footer-btn.back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.footer-btn.back-btn:hover svg {
  transform: translateX(-3px);
}

.footer-btn.settings-btn {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
  color: var(--gold);
}

.footer-btn.settings-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.65);
  transform: translateY(-2px);
}

.footer-btn.settings-btn:hover svg {
  transform: rotate(45deg);
}

/* --- Tutorial Modal Styles --- */

.tutorial-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
}

.tutorial-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-modal-card {
  width: 92%;
  max-width: 420px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--hud-border);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  height: 84%;
  max-height: 540px;
  box-sizing: border-box;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tutorial-modal-overlay.visible .tutorial-modal-card {
  transform: scale(1);
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.tutorial-header h2 {
  font-family: 'Zilla Slab', serif;
  color: var(--gold);
  margin: 0;
  font-size: 1.4rem;
}

.tutorial-close-btn {
  background: none;
  border: none;
  color: #a0aec0;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.tutorial-close-btn:hover {
  color: #fff;
}

.tutorial-slides-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}

.tutorial-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.tutorial-slide.active {
  display: flex;
  opacity: 1;
}

.slide-text {
  flex: 0 0 auto;
  width: 100%;
}

.slide-graphics {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
  max-height: 180px;
  min-height: 110px;
  box-sizing: border-box;
}

.demo-graphics-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.win-trophy-graphics {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trophy-icon {
  font-size: 3rem;
  animation: float 2s ease-in-out infinite alternate;
}

@keyframes float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

.tutorial-slide h3 {
  font-family: 'Outfit', sans-serif;
  color: #fff;
  margin: 0 0 8px 0;
  font-size: 1.08rem;
  text-align: center;
}

.tutorial-slide p {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0 0 8px 0;
}

.tutorial-slide ul {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0 0 8px 0;
  padding-left: 20px;
}

.tutorial-slide li {
  margin-bottom: 4px;
}

.tile-color-red { color: #ff5252; font-weight: bold; }
.tile-color-yellow { color: #ffd740; font-weight: bold; }
.tile-color-blue { color: #448aff; font-weight: bold; }
.tile-color-black { color: #e0e0e0; font-weight: bold; }

/* Demo Graphics inside Tutorial */
.tutorial-graphics {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.demo-tiles-row {
  display: flex;
  gap: 8px;
}

.demo-tile {
  width: 44px;
  height: 60px;
  background: #f5f2eb;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 1.4rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 0 rgba(0,0,0,0.15);
  position: relative;
  user-select: none;
}

.demo-tile.red { color: #cc1111; }
.demo-tile.yellow { color: #d4a017; }
.demo-tile.blue { color: #1155cc; }
.demo-tile.black { color: #111111; }

.demo-tile.false-okey {
  color: #9c27b0;
  background: #f0e6f7;
  font-size: 1.1rem;
}

.demo-tile.wildcard-tile {
  border: 2px solid var(--gold);
  box-shadow: 0 0 12px var(--gold), 0 3px 6px rgba(0,0,0,0.3);
}

.tutorial-graphics-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 10px 0;
}

.demo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.demo-block span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.demo-arrow {
  font-size: 1.8rem;
  color: var(--gold);
  font-weight: bold;
}

/* Footer & Actions */
.tutorial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  margin-top: auto;
}

.slide-indicators {
  display: flex;
  gap: 6px;
}

.slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.slide-dot.active {
  background: var(--gold);
  transform: scale(1.2);
}

.tutorial-actions {
  display: flex;
  gap: 10px;
}

.tutorial-nav-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s;
}

.tutorial-nav-btn.prev-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.tutorial-nav-btn.prev-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.tutorial-nav-btn.next-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #aa8513 100%);
  color: #000;
  border: none;
}

.tutorial-nav-btn.next-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.tutorial-nav-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* ============================
   AI Difficulty Modal
   ============================ */
.ai-difficulty-card {
  max-width: 420px;
}
.ai-difficulty-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
}
.ai-difficulty-btn {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  text-align: left;
}
.ai-difficulty-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.ai-difficulty-btn.easy:hover { border-color: #34d399; background: rgba(52, 211, 153, 0.12); }
.ai-difficulty-btn.normal:hover { border-color: var(--gold); }
.ai-difficulty-btn.hard:hover { border-color: #f87171; background: rgba(248, 113, 113, 0.12); }
.ai-difficulty-icon {
  font-size: 1.6rem;
  grid-row: 1 / span 2;
  text-align: center;
}
.ai-difficulty-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.ai-difficulty-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.back-btn {
  align-self: center;
  background: transparent;
  border: 1px solid var(--hud-border);
  color: var(--text-secondary);
  padding: 8px 24px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* ============================
   Tighter game-header for narrow viewports (fit score-board + settings)
   ============================ */
@media (max-width: 480px) {
  .game-header { padding: 0 8px; }
  .header-left { flex-shrink: 0; }
  .header-right { flex-shrink: 0; }
  .header-center { min-width: 0; flex: 1; }
  .score-board {
    gap: 4px;
    overflow: hidden;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .score-item {
    padding: 2px 5px;
    min-width: 0;
    gap: 3px;
  }
  .p-name { font-size: 0.65rem; }
  .p-score { font-size: 0.8rem; }
  .round-badge { margin-left: 4px; padding: 1px 5px; font-size: 0.65rem; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 18px; height: 18px; }
}

/* Top-left info corner: legacy indicator/wildcard display, anchored under the
   round badge. Compact tiles + labels so it doesn't crowd the table. */
.game-info-corner {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 4;
  display: flex;
  flex-direction: row;
  gap: 8px;
  pointer-events: none;
}
.game-info-corner .info-pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
}
.game-info-corner .info-label {
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.game-info-corner .indicator-tile-spot,
.game-info-corner .okey-tile-display {
  height: 44px;
  aspect-ratio: 5 / 7;
  width: auto;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
/* Quick mode hides them via display:none from existing JS — keep that working. */
.game-info-corner .indicator-container[style*="display: none"],
.game-info-corner .okey-info-card[style*="display: none"] { display: none; }

/* Narrow portrait phones (~320–420 CSS px wide): scale the gameplay layout
   down proportionally so AI panels + green table + 4 discard zones all fit
   symmetrically without the right discards spilling under the right AI. */
@media (orientation: portrait) and (max-width: 420px) {
  .game-table {
    grid-template-columns: minmax(54px, 76px) 1fr minmax(54px, 76px);
    padding: 8px 6px;
    gap: 8px;
  }
  .player-panel {
    min-width: 50px;
    padding: 5px 4px;
  }
  .player-panel .avatar-ring { width: 26px; height: 26px; }
  .player-panel .player-name { font-size: 0.65rem; }
  .player-panel .hand-indicator { font-size: 0.6rem; }
  .top-ai { padding: 3px 8px; gap: 5px; }
  .table-center {
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: auto auto auto;
    padding: 10px 6px;
    gap: 12px 6px;
  }
  .discard-zone,
  .tile-deck-stack,
  .indicator-tile-spot,
  .okey-tile-display {
    height: 54px;
  }
  .discard-label-top { top: -14px; font-size: 0.55rem; }
  .discard-label-bottom { bottom: -14px; font-size: 0.55rem; }
  .deck-face-down { font-size: 1.3rem; }
  .indicator-container, .okey-info-card {
    margin: 0;
  }
}

/* ==========================================
   Tutorial Mode — Spotlight + Tooltip ("coach mark")
   ========================================== */
.tutorial-guide-banner {
  /* Legacy banner — hidden now that we use a spotlight + tooltip. */
  display: none !important;
}

/* Full-viewport SVG overlay: dim background with cut-outs over each highlighted
   target, plus an optional curved arrow between source and destination.
   pointer-events: none so clicks pass through to the highlighted controls. */
.tutorial-svg-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9000;
}
.tutorial-glow-border {
  filter: drop-shadow(0 0 6px rgba(255, 215, 102, 0.65));
  animation: tutorial-border-pulse 1.6s ease-in-out infinite;
}
@keyframes tutorial-border-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.tutorial-arrow {
  filter: drop-shadow(0 0 4px rgba(255, 215, 102, 0.6));
  animation: tutorial-arrow-dash 1.2s linear infinite;
}
@keyframes tutorial-arrow-dash {
  to { stroke-dashoffset: -26; }
}

/* Tutorial intro modal (goal explanation, shown before Step 1) */
.tutorial-intro-card {
  max-width: 460px;
}
.tutorial-intro-card h2 {
  font-size: 1.4rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 10px;
  color: var(--gold);
}
.tutorial-intro-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  min-height: 140px;
}
.tutorial-intro-body p {
  margin: 0 0 10px 0;
}
.tutorial-intro-body p:last-child {
  margin-bottom: 0;
}
.tutorial-intro-body .intro-example {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f5d27b;
  font-size: 12.5px;
}

/* Mini tile graphics used inside intro slide bodies. */
.intro-tile-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 4px 8px 8px 0;
  vertical-align: middle;
}
.intro-tile-row-centered {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px auto 12px;
}
.intro-tile-row-spotlight {
  margin: 12px auto 6px;
}
.intro-hand-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.intro-hand-line .intro-tile-row {
  margin: 0;
}
.intro-tile-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 36px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(140deg, #ffffff 0%, #ececec 100%);
  color: #333;
  border: 1px solid #aaa;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  user-select: none;
}
.intro-tile-mini { position: relative; }
.intro-tile-mini.intro-tile-red    { color: #d12e2e; }
.intro-tile-mini.intro-tile-yellow { color: #c98512; }
/* Bright vivid blue (vs near-black) so the two read at a glance without extra markers. */
.intro-tile-mini.intro-tile-blue   { color: #1e88e5; }
.intro-tile-mini.intro-tile-black  { color: #000000; }
.intro-tile-mini.intro-tile-faded {
  background: linear-gradient(140deg, #2a3140 0%, #1a1f29 100%);
  color: rgba(255,255,255,0.45);
  border-style: dashed;
}
.intro-tile-mini.intro-tile-wild {
  background: linear-gradient(140deg, #fff5cc 0%, #ffd95c 100%);
  border: 2px solid #d4af37;
  position: relative;
}
.intro-tile-mini.intro-tile-wild::after {
  content: '★';
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 11px;
  color: #d4af37;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.intro-tile-mini.intro-tile-isolated {
  transform: scale(1.4);
  margin: 6px 4px;
  box-shadow: 0 0 0 3px rgba(255, 215, 102, 0.6), 0 4px 14px rgba(0,0,0,0.5);
  animation: intro-isolated-pulse 1.4s ease-in-out infinite;
}
@keyframes intro-isolated-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,215,102,0.55), 0 4px 14px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,215,102,0.25), 0 4px 18px rgba(0,0,0,0.55); }
}
.intro-tile-mini-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 26px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 11px;
  background: linear-gradient(140deg, #ffffff 0%, #ececec 100%);
  border: 1px solid #aaa;
  margin: 0 2px;
  vertical-align: middle;
}
.intro-tile-mini-inline.intro-tile-yellow { color: #c98512; }
.intro-tile-arrow {
  color: #d4af37;
  font-weight: 700;
  font-size: 18px;
  margin: 0 4px;
}
.intro-tile-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.intro-tile-label.intro-label-ok {
  color: #34d399;
}
.intro-tile-label.intro-label-need {
  color: #fbbf24;
}
.intro-isolated-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 10px;
}
.intro-isolated-list li {
  padding: 4px 0 4px 18px;
  position: relative;
  font-size: 13px;
}
.intro-isolated-list li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: #f87171;
  font-weight: 700;
}
.tutorial-intro-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0;
}
.tutorial-intro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
.tutorial-intro-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}
.tutorial-intro-card {
  position: relative; /* anchor for the corner skip "×" */
}
.tutorial-intro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.tutorial-intro-back-btn {
  flex: 0 0 auto;
  min-width: 88px;
}
.tutorial-intro-next-btn {
  flex: 1 1 auto;
  min-width: 120px;
}
.tutorial-intro-skip-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.tutorial-intro-skip-x:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fff;
  transform: rotate(90deg);
}

/* When asking the player to look at their actual hand (slides 4 & 5),
   move the modal to the top, drop the backdrop blur, and fade the
   backdrop to transparent over the rack so the player's hand reads
   bright and clear. */
.modal-overlay.show-hand-below {
  align-items: flex-start;
  padding-top: 16px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.10) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-overlay.show-hand-below .modal-card {
  margin-bottom: auto;
  max-height: 62vh;
  overflow-y: auto;
}

/* Tooltip with action hint, positioned near the spotlight. */
.tutorial-tooltip {
  position: fixed;
  background: linear-gradient(140deg, #fffbe6 0%, #fff5cc 100%);
  color: #2a2a2a;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 260px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  z-index: 9001;
  pointer-events: none;
  border: 1px solid rgba(212, 175, 55, 0.6);
  animation: tutorial-tooltip-in 0.22s ease-out;
}
@keyframes tutorial-tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tutorial-tooltip::before {
  display: none !important;
}
.tutorial-tooltip.above::before {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
}
.tutorial-tooltip.below::before {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  transform: rotate(45deg);
  border-bottom: none;
  border-right: none;
}

/* Balatro-style Tutorial Layout */
.tutorial-layout-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 620px;
  width: 92%;
  animation: balatro-float 4.2s ease-in-out infinite;
  z-index: 9999;
}

/* Floating animation for the layout */
@keyframes balatro-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.coach-card {
  width: 105px;
  height: 155px;
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65), 0 0 15px rgba(212, 175, 55, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}

.coach-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.22) 0%, transparent 75%);
}

.coach-card-rank {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 15px;
  font-weight: bold;
  color: var(--gold);
  font-family: 'Zilla Slab', serif;
}

.coach-card-suit {
  position: absolute;
  top: 24px;
  left: 8px;
  font-size: 11px;
}

.coach-card-suit-big {
  font-size: 44px;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  animation: coach-suit-tilt 2.2s ease-in-out infinite alternate;
}

@keyframes coach-suit-tilt {
  from { transform: rotate(-6deg) scale(0.98); }
  to { transform: rotate(6deg) scale(1.04); }
}

.coach-card-label {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: rgba(212, 175, 55, 0.22);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 1px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Speech bubble pointer */
.modal-card.tutorial-intro-card.speech-bubble {
  position: relative;
  flex-grow: 1;
}

.modal-card.tutorial-intro-card.speech-bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid rgba(15, 23, 42, 0.98); /* matches modal-card bg */
  filter: drop-shadow(-2px 0 0 var(--hud-border));
  z-index: 10;
}

/* Media query for mobile / narrow screen responsiveness */
@media (max-width: 540px) {
  .tutorial-layout-wrapper {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .coach-card {
    width: 80px;
    height: 115px;
  }
  .coach-card-suit-big {
    font-size: 32px;
  }
  .coach-card-label {
    font-size: 8.5px;
  }
  .modal-card.tutorial-intro-card.speech-bubble::before {
    left: 50%;
    top: -10px;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* Chat Dialog Styles for Tutorial */
.tutorial-chat-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 88%;
}
.chat-msg.coach {
  align-self: flex-start;
}
.chat-msg.player {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-avatar {
  font-size: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.chat-msg.coach .chat-bubble {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0.04) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--text-primary);
  border-top-left-radius: 2px;
}
.chat-msg.player .chat-bubble {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-secondary);
  border-top-right-radius: 2px;
}
.chat-bubble strong {
  color: #fbbf24;
}
.chat-bubble ul {
  margin: 6px 0 0 16px;
  padding: 0;
}
.chat-bubble li {
  margin-top: 4px;
}

/* Compact coach-dialog content used by the playable tutorial. The structure is
   intentionally close to a card-game tutor prompt: one concept, one visible task. */
.modal-overlay.tutorial-coach-dialog {
  padding-left: 10px;
  padding-right: 10px;
}

.tutorial-coach-dialog .tutorial-layout-wrapper {
  max-width: min(720px, 96vw);
  align-items: flex-start;
}

.tutorial-coach-dialog .coach-card {
  transform: rotate(-3deg);
}

.tutorial-coach-dialog .modal-card.tutorial-intro-card {
  max-width: 540px;
  padding: 16px;
  border-color: rgba(255, 215, 102, 0.34);
  background:
    linear-gradient(135deg, rgba(20, 33, 44, 0.98) 0%, rgba(45, 16, 36, 0.96) 100%),
    rgba(15, 23, 42, 0.98);
}

.tutorial-coach-dialog .tutorial-intro-card h2 {
  font-size: 1.1rem;
  line-height: 1.2;
  padding-right: 8px;
  margin-bottom: 8px;
}

.tutorial-dialog-body {
  min-height: auto;
  line-height: 1.45;
}

.balatro-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lesson-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 215, 102, 0.42);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 215, 102, 0.18), rgba(45, 212, 191, 0.10));
  color: #ffe58a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 3px 9px;
}

.lesson-lead {
  margin: 0;
  color: #fff5cf;
  font-size: 14px;
}

.lesson-lead em {
  color: #ffe58a;
  font-style: normal;
  font-weight: 800;
}

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

.tutorial-lesson-list {
  display: grid;
  gap: 7px;
}

.tutorial-lesson-list div {
  display: grid;
  grid-template-columns: 26px minmax(54px, auto) 1fr;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.tutorial-lesson-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.16);
  border: 1px solid rgba(45, 212, 191, 0.46);
  color: #8ff5e7;
  font-size: 12px;
  font-weight: 900;
}

.tutorial-lesson-list strong {
  color: #fff7d5;
  font-size: 13px;
}

.tutorial-lesson-list em {
  color: #dfcf9c;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.3;
}

.lesson-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(255, 215, 102, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px;
  color: #f8eec7;
  font-size: 12px;
}

.lesson-card-good {
  border-color: rgba(45, 212, 191, 0.32);
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.72);
}

.lesson-card .intro-tile-row {
  display: flex;
  margin: 0;
}

.lesson-card-title {
  color: #ffe58a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-task {
  border: 2px solid rgba(255, 215, 102, 0.55);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 215, 102, 0.24), rgba(45, 212, 191, 0.10)),
    rgba(65, 20, 42, 0.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 18px rgba(0,0,0,0.22);
  padding: 10px 12px;
}

.lesson-task span {
  display: block;
  color: #ffd966;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-task strong {
  display: block;
  margin-top: 2px;
  color: #fff7d5;
  font-size: 14.5px;
  line-height: 1.35;
}

.lesson-note {
  margin: 0;
  color: #dfcf9c;
  font-size: 12.5px;
}

.lesson-note-strong {
  padding: 9px 11px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #f8eec7;
}

.tile-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 30px;
  margin: 0 1px;
  border-radius: 4px;
  background: linear-gradient(140deg, #fffdf4 0%, #eee7d8 100%);
  border: 1px solid rgba(80, 54, 28, 0.42);
  box-shadow: 0 2px 3px rgba(0,0,0,0.28);
  font-weight: 900;
  vertical-align: middle;
}

.tile-chip-red { color: #d12e2e; }
.tile-chip-yellow { color: #c98512; }
.tile-chip-blue { color: #1e88e5; }
.tile-chip-black { color: #111827; }
.tile-chip-wild {
  color: #b45309;
  background: linear-gradient(140deg, #fff6c7 0%, #ffd45f 100%);
  border-color: #d4af37;
}

.tutorial-tooltip {
  max-width: min(320px, calc(100vw - 18px));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.coach-mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 2px solid rgba(255, 215, 102, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 235, 148, 0.18), rgba(45, 212, 191, 0.05) 42%),
    linear-gradient(180deg, #4a1833 0%, #14212c 100%);
  box-shadow: 0 6px 0 rgba(68, 27, 24, 0.72), 0 18px 28px rgba(0,0,0,0.42);
  color: #fff5cf;
}

.coach-mark-kicker {
  color: #ffd966;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-mark strong {
  color: #fffbe6;
  font-size: 14px;
  line-height: 1.2;
}

.coach-mark span:last-child {
  color: #eadba7;
  font-size: 12.5px;
  line-height: 1.35;
}

@media (max-width: 540px) {
  .tutorial-coach-dialog .tutorial-layout-wrapper {
    gap: 8px;
    width: 94vw;
  }

  .tutorial-coach-dialog .coach-card {
    width: 72px;
    height: 104px;
  }

  .lesson-rule-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-lesson-list div {
    grid-template-columns: 24px minmax(48px, auto) 1fr;
    gap: 7px;
    padding: 7px 8px;
  }

  .tutorial-coach-dialog .modal-card.tutorial-intro-card {
    width: 100%;
    padding: 13px;
  }

  .lesson-lead,
  .lesson-task strong {
    font-size: 13px;
  }
}






/* ============================================================
   Player profile / wallet HUD on the title screen (F2P Phase 1)
   ============================================================ */
.profile-hud {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 6;
  white-space: nowrap;
}
.profile-hud-level {
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-hud-lvl-badge {
  font-weight: 800;
  font-size: 0.8rem;
  color: #0c1322;
  background: linear-gradient(135deg, #ffe066 0%, #f5b041 100%);
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.profile-hud-xpbar {
  width: 54px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.profile-hud-xpfill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #aee0ff 0%, #c9b8ff 100%);
  transition: width 0.4s ease;
}
.profile-hud-wallet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}
.profile-hud-coin, .profile-hud-gem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-hud-ico { font-size: 0.95rem; }

/* ============================================================
   Cute / anime-style visual FX (feat/cute-visual-fx)
   Soft pastel ambience, floating sparkles, pastel glows, bouncy motion.
   ============================================================ */

/* Dreamy pastel aurora drifting behind the felt. Sits under everything. */
.game-container::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 18% 18%, rgba(255, 179, 217, 0.22) 0%, transparent 60%),
    radial-gradient(45% 40% at 82% 22%, rgba(174, 224, 255, 0.20) 0%, transparent 60%),
    radial-gradient(50% 45% at 50% 88%, rgba(201, 184, 255, 0.20) 0%, transparent 60%),
    radial-gradient(40% 40% at 78% 80%, rgba(174, 246, 214, 0.16) 0%, transparent 60%);
  filter: blur(4px);
  animation: fx-aurora 16s ease-in-out infinite alternate;
}
@keyframes fx-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50%  { transform: translate3d(1.5%, -1.5%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); opacity: 0.9; }
}

/* A soft moving light sweep across the green table felt. */
.game-table::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 47%,
    rgba(255, 245, 200, 0.10) 50%,
    rgba(255, 255, 255, 0.06) 53%,
    transparent 70%);
  background-size: 280% 280%;
  animation: fx-sweep 7s linear infinite;
  border-radius: inherit;
  mix-blend-mode: screen;
}
@keyframes fx-sweep {
  0%   { background-position: 130% 0%; }
  100% { background-position: -30% 0%; }
}

/* Keep gameplay elements above the ambient layers. */
.game-header, .game-table > *, .player-area, .game-info-corner { position: relative; z-index: 1; }

/* Floating sparkle field — a fixed layer of twinkling dots behind the table. */
.fx-sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fx-sparkle-field .fx-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.2) 60%, transparent 70%);
  opacity: 0.0;
  animation: fx-twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes fx-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }
  50%      { opacity: var(--peak, 0.7); transform: scale(1) translateY(-6px); }
}

/* Pastel pulsing glow on the active player's panel. */
.player-panel.active-turn {
  animation: fx-active-pulse 1.5s ease-in-out infinite;
}
@keyframes fx-active-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 224, 102, 0.55), 0 0 0 1px rgba(255,224,102,0.6); }
  50%      { box-shadow: 0 0 22px rgba(255, 158, 196, 0.85), 0 0 0 2px rgba(255,158,196,0.8); }
}

/* Gentle "tap me" pastel pulse on the live interaction targets during the
   human's turn. JS toggles .fx-hint on whichever control is actionable. */
.fx-hint {
  animation: fx-hint-pulse 1.4s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes fx-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(174, 224, 255, 0.0); }
  50%      { box-shadow: 0 0 16px 3px rgba(174, 224, 255, 0.75); }
}

/* ------------------------------------------------------------------
   Mobile flicker guard.
   On touch devices (Capacitor webview / phones) the always-on ambient
   layers — the animated mix-blend-mode "sweep" over the felt, the blurred
   drifting aurora, and the twinkling sparkle field — force the GPU to
   re-composite the whole table (including the tiles) every frame, which
   shows up as constant tile flicker. Desktop GPUs absorb it; phones don't.
   Disable those continuous layers on coarse-pointer devices; the gameplay
   art and one-shot burst effects (draw/discard/win) are unaffected.
   ------------------------------------------------------------------ */
@media (pointer: coarse) {
  .game-table::after { display: none; }          /* blended light sweep */
  .game-container::before { animation: none; }    /* keep static aurora, stop drift */
  .fx-sparkle-field { display: none; }            /* twinkling dots */

  body:not(.in-match) .game-container {
    visibility: hidden;
    content-visibility: hidden;
  }

  body.in-match .title-screen.hidden {
    display: none !important;
  }

  body.in-match .home-screen-content,
  body.in-match .mode-selection-content {
    display: none !important;
    background-image: none !important;
  }
}

/* Android WebView can tear rectangular regions on the mode selector when
   animated transforms, filtered emoji, and negative-z pseudo button layers
   are composited together. Keep the mobile version visually rich, but paint it
   as a stable 2D surface. */
@media (pointer: coarse) {
  .mode-selection-content {
    overflow: hidden;
    contain: layout paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .mode-selection-content::before {
    display: none;
  }

  .mode-selection-content .mode-selection-title,
  .mode-selection-content .mode-grid,
  .mode-selection-content .mode-selection-footer,
  .mode-selection-content.active .mode-selection-title,
  .mode-selection-content.active .mode-grid,
  .mode-selection-content.active .mode-selection-footer {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }

  .mode-selection-content .grid-mode-card,
  .mode-selection-content .footer-btn {
    isolation: auto;
    overflow: hidden;
    transform: none;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
    will-change: auto;
  }

  .mode-selection-content .grid-mode-card::before,
  .mode-selection-content .grid-mode-card::after,
  .mode-selection-content .footer-btn::before,
  .mode-selection-content .footer-btn::after {
    display: none;
  }

  .mode-selection-content .grid-mode-card:hover,
  .mode-selection-content .grid-mode-card:active,
  .mode-selection-content .footer-btn:hover:not(:disabled),
  .mode-selection-content .footer-btn:active:not(:disabled) {
    transform: none;
    filter: none;
  }

  .mode-selection-content .card-icon {
    filter: none;
  }
}

/* Bouncy pop used when a tile lands / a modal appears. */
@keyframes fx-pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.fx-pop { animation: fx-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Trophy bounce for the win modal. */
@keyframes fx-trophy-bounce {
  0%   { transform: scale(0.2) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  72%  { transform: scale(0.92) rotate(-4deg); }
  86%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.trophy-cup.fx-trophy, .trophy-icon.fx-trophy {
  animation: fx-trophy-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  display: inline-block;
}

/* ============================================================
   Cosmetic themes (F2P Phase 2) — felt/table + tile-face skins.
   Driven by body[data-felt] / body[data-tileskin], set by applyCosmetics().
   Each block overrides the relevant :root CSS variables so the existing
   render path (which reads those vars) recolors with no JS changes.
   ============================================================ */

/* ---- Table / felt themes ---- */
body[data-felt="felt_sakura"] {
  --felt-green: radial-gradient(circle at center, #e98ab8 0%, #7d3f5c 100%);
  --rack-bg: #5c2a3f;
  --rack-border: #3d1a2a;
}
body[data-felt="felt_ocean"] {
  --felt-green: radial-gradient(circle at center, #1f8bbd 0%, #0d3550 100%);
  --rack-bg: #123047;
  --rack-border: #0a1d2c;
}
body[data-felt="felt_night"] {
  --felt-green: radial-gradient(circle at center, #6c5ce7 0%, #241b4d 100%);
  --rack-bg: #2a2150;
  --rack-border: #181030;
}

/* ---- Tile-face skins ---- */
/* Pastel macaron: soft tile paper + candy number colors */
body[data-tileskin="tileskin_pastel"] {
  --tile-bg: linear-gradient(135deg, #fff0f6 0%, #e7f0ff 100%);
  --tile-border: #f3c9dd;
  --red-num: #ff6f91;
  --yellow-num: #f7a440;
  --blue-num: #5aa7e6;
  --black-num: #7d6f9c;
}
/* Minimal mono: greyscale faces, all numbers near-black */
body[data-tileskin="tileskin_mono"] {
  --tile-bg: linear-gradient(135deg, #fafafa 0%, #dcdcdc 100%);
  --tile-border: #c2c2c2;
  --red-num: #444;
  --yellow-num: #777;
  --blue-num: #222;
  --black-num: #000;
}
/* Neon: dark tile faces with glowing bright numbers */
body[data-tileskin="tileskin_neon"] {
  --tile-bg: linear-gradient(135deg, #1a1a3a 0%, #241b4d 100%);
  --tile-border: #4b3fa0;
  --red-num: #ff4d8d;
  --yellow-num: #ffe14d;
  --blue-num: #4dd2ff;
  --black-num: #b07bff;
}
body[data-tileskin="tileskin_neon"] .tile {
  box-shadow: 0 0 10px rgba(120, 90, 255, 0.45), var(--tile-shadow);
}
body[data-tileskin="tileskin_neon"] .tile .tile-number {
  text-shadow: 0 0 6px currentColor;
}

/* ============================================================
   Generated match art pass (Issue #55)
   Uses the approved in-game concept as the scene base, while keeping
   real tiles and controls interactive above it.
   ============================================================ */
.game-container {
  --felt-green: radial-gradient(circle at 50% 45%, #bd1f24 0%, #8f131b 55%, #5a0912 100%);
  --rack-bg: linear-gradient(180deg, #a96425 0%, #6b330f 100%);
  --rack-border: #f0bc42;
  --cell-bg: rgba(61, 23, 7, 0.22);
  --cell-inset-shadow: inset 0 2px 5px rgba(66, 26, 4, 0.35);
  --tile-bg: linear-gradient(145deg, #fff8df 0%, #f5e4b9 55%, #dfbd7a 100%);
  --tile-border: #9b6b28;
  --tile-shadow:
    0 5px 0 rgba(118, 73, 28, 0.7),
    0 8px 14px rgba(0, 0, 0, 0.36),
    inset 0 2px 0 rgba(255, 255, 255, 0.82),
    inset 0 -3px 0 rgba(163, 112, 47, 0.55);
  --tile-selected-shadow:
    0 0 0 3px rgba(255, 220, 58, 0.85),
    0 0 20px rgba(255, 210, 30, 0.95),
    var(--tile-shadow);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(70,10,18,0.22)),
    url("./assets/match-screen-art-portrait.png") center / cover no-repeat,
    #0b76a5;
}

@media (pointer: coarse) {
  .game-container {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(70,10,18,0.22)),
      url("./assets/match-screen-art-portrait.png") center / cover no-repeat,
      #8f151b;
  }

  .game-header,
  .modal-overlay,
  .tutorial-modal-overlay,
  .profile-hud {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .tile {
    box-shadow:
      0 3px 0 rgba(118, 73, 28, 0.55),
      0 5px 8px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  .tile::before,
  .tile::after {
    display: none;
  }

  .pile-tiles .tile,
  .rack-cell .tile.selected,
  .tile.selected,
  .card-icon,
  .char-figure {
    filter: none !important;
  }

  .player-panel.active-turn,
  .fx-hint,
  .lobby-logo,
  .title-logo,
  .char-figure,
  .lobby-play-btn {
    animation: none !important;
  }
}

body:not(.in-match) .game-container {
  background: var(--felt-green);
}

.game-container::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 218, 74, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(0, 105, 160, 0.12), rgba(73, 13, 20, 0.45));
  filter: none;
  animation: none;
}

.game-header {
  height: 74px;
  padding: calc(8px + env(safe-area-inset-top)) 18px 8px;
  background: linear-gradient(180deg, rgba(180, 34, 62, 0.96) 0%, rgba(105, 13, 35, 0.94) 100%);
  border-bottom: 3px solid rgba(245, 195, 65, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255,255,255,0.24);
}

.logo {
  font-size: clamp(1.35rem, 6vw, 2rem);
  color: #ffe19a;
  text-shadow: 0 3px 0 #6d2a09, 0 6px 12px rgba(0,0,0,0.45);
}

.round-badge {
  background: linear-gradient(180deg, #fff2c5 0%, #d79a33 100%);
  border: 2px solid #7a2030;
  color: #66182a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 3px 8px rgba(0,0,0,0.28);
}

.score-item,
.player-panel,
.status-bar {
  background: linear-gradient(180deg, rgba(63, 34, 12, 0.92) 0%, rgba(22, 24, 22, 0.96) 100%);
  border: 2px solid rgba(237, 183, 64, 0.86);
  border-radius: 14px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}

.score-item.active-p,
.player-panel.active-turn {
  border-color: #ffdf55;
  box-shadow: 0 0 0 2px rgba(255, 231, 83, 0.25), 0 0 24px rgba(255, 205, 39, 0.8);
}

.avatar-ring {
  width: 48px;
  height: 48px;
  border: 3px solid #f4c248;
  background: radial-gradient(circle at 35% 30%, #5bc3ff, #1352aa 80%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), 0 4px 8px rgba(0,0,0,0.35);
}

.avatar {
  font-size: 1rem;
  color: #fff4b6;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}

.game-table {
  grid-template-columns: 84px 1fr 84px;
  grid-template-rows: minmax(50px, auto) 1fr;
  padding: 10px 10px 4px;
  gap: 10px;
}

.table-center {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 91, 79, 0.14), transparent 30%),
    radial-gradient(circle at 50% 50%, #b71e22 0%, #8f151b 64%, #5a0a11 100%);
  border: 6px solid #f1bd45;
  border-radius: 36px;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.36),
    inset 0 0 0 4px rgba(126, 58, 12, 0.72),
    inset 0 3px 0 rgba(255,255,255,0.18);
}

.discard-zone,
.indicator-tile-spot,
.okey-tile-display {
  background: rgba(68, 13, 18, 0.45);
  border: 2px solid rgba(248, 199, 72, 0.62);
  border-radius: 12px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.34), 0 3px 8px rgba(0,0,0,0.24);
}

.discard-zone.drag-hover {
  background: rgba(255, 220, 70, 0.24);
  border-color: #ffe15c;
  box-shadow: 0 0 22px rgba(255, 218, 53, 0.75);
}

.discard-label-top,
.discard-label-bottom,
.deck-label,
.indicator-label,
.info-label {
  color: #ffe3a4;
  text-shadow: 0 2px 3px rgba(0,0,0,0.75);
}

.tile-deck-stack {
  background:
    linear-gradient(145deg, #3aa7e9 0%, #1167bc 72%),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.18) 6px 9px);
  border: 3px solid #f0c34e;
  border-radius: 12px;
  box-shadow:
    0 5px 0 #7b4210,
    0 10px 16px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.35);
}

.deck-face-down {
  font-size: 0;
}

.deck-face-down::before {
  content: "";
  width: 62%;
  height: 62%;
  border-radius: 8px;
  display: block;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 8px);
  border: 1px solid rgba(255,255,255,0.28);
}

.player-area {
  background: linear-gradient(180deg, rgba(149, 29, 48, 0.96) 0%, rgba(88, 11, 27, 0.98) 100%);
  border-top: 4px solid rgba(246, 198, 65, 0.92);
  box-shadow: 0 -10px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.16);
}

.rack-container {
  background:
    linear-gradient(180deg, rgba(255, 211, 97, 0.35), transparent 18%),
    linear-gradient(180deg, #a76224 0%, #6c330f 100%);
  border: 4px solid #efbd45;
  border-radius: 18px;
  padding: 10px;
  box-shadow:
    0 8px 0 #6e2f0d,
    0 16px 24px rgba(0,0,0,0.38),
    inset 0 2px 0 rgba(255,255,255,0.28);
}

.rack-cell {
  background: rgba(55, 22, 7, 0.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}

.tile {
  background: var(--tile-bg);
  border: 2px solid var(--tile-border);
  border-radius: 10px;
  box-shadow: var(--tile-shadow);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0) 36%);
  pointer-events: none;
  z-index: 1;
}

.tile::after {
  border: 1px solid rgba(139, 91, 32, 0.32);
  opacity: 0.9;
}

.tile .tile-top,
.tile .tile-bottom,
.tile .tile-center {
  z-index: 2;
}

.tile .tile-number,
.tile .tile-number-large {
  text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 2px 3px rgba(88, 50, 15, 0.18);
}

.tile .tile-center-frame,
.tile .tile-center-emblem {
  opacity: 0;
}

.tile-red { --tile-color: #c72420; }
.tile-yellow { --tile-color: #c98912; }
.tile-blue { --tile-color: #146eb8; }
.tile-black { --tile-color: #1d1b19; }

.rack-cell .tile.selected,
.tile.selected {
  box-shadow: var(--tile-selected-shadow);
}

/* Final rack-selection transform rule. Kept after theme overrides so tapped
   rack tiles lift without changing size or nudging neighbouring tiles. */
.rack-cell .tile.selected {
  top: -28px;
  transform: translateX(var(--trans-x, 0px));
}

.pile-tiles .tile {
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.34));
}

.rack-controls.vertical-controls {
  gap: 10px;
}

.action-btn {
  min-height: 48px;
  border: 3px solid rgba(255, 214, 80, 0.82);
  border-radius: 16px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.38);
  background: linear-gradient(180deg, #1769aa 0%, #0a457b 100%);
  box-shadow: 0 5px 0 rgba(74, 30, 18, 0.85), 0 8px 14px rgba(0,0,0,0.28), inset 0 2px 0 rgba(255,255,255,0.35);
}

.action-btn:hover {
  background: linear-gradient(180deg, #1d76bd 0%, #0d518f 100%);
}

#btn-sort-number,
#btn-summon {
  background: linear-gradient(180deg, #237a35 0%, #145625 100%);
}

.declare-win-btn,
#btn-declare-win {
  color: #fff;
  background: linear-gradient(180deg, #b42332 0%, #750f20 100%);
  border-color: rgba(255, 217, 74, 0.9);
}

.discard-selected-btn,
#btn-discard-selected {
  color: #fff;
  background: linear-gradient(180deg, #237a45 0%, #11532d 100%);
  border-color: rgba(255, 217, 74, 0.9);
}

body:not([data-mode="rogue"]):not([data-mode="battle"]) #btn-discard-selected {
  display: none !important;
}

.action-btn:disabled,
.action-btn.is-disabled,
#btn-declare-win:disabled,
#btn-declare-win.is-disabled,
#btn-discard-selected:disabled,
#btn-discard-selected.is-disabled {
  color: #f3f4f6;
  background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  border-color: #9ca3af;
  text-shadow: 0 1px 0 rgba(0,0,0,0.72);
  cursor: not-allowed;
  opacity: 1;
}

.status-bar {
  color: #ffdf62 !important;
  padding: 8px 12px;
}

@media (max-width: 520px) and (orientation: portrait) {
  :root {
    --rack-width: min(100vw - 14px, 500px);
    --rack-row-height: clamp(58px, 8.6vh, 78px);
  }

  .game-header {
    height: 70px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .score-board {
    gap: 5px;
  }

  .score-item {
    min-width: 48px;
    padding: 3px 6px;
  }

  .p-name {
    font-size: 0.66rem;
  }

  .game-table {
    grid-template-columns: 72px 1fr 72px;
    padding: 6px 6px 2px;
    gap: 6px;
  }

  .table-center {
    grid-template-columns: 50px 1fr 50px;
    gap: 14px 8px;
    padding: 12px 8px;
    border-width: 4px;
    border-radius: 28px;
  }

  .discard-zone,
  .tile-deck-stack,
  .indicator-tile-spot,
  .okey-tile-display {
    height: 58px;
  }

  .player-area {
    padding: 8px 7px calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  .rack-controls.vertical-controls {
    gap: 8px;
  }

  .rack-controls.vertical-controls .action-btn {
    font-size: 0.72rem;
    padding: 6px 3px;
  }

  .action-btn svg {
    display: none;
  }
}

/* ============================================================
   Store modal (F2P Phase 2)
   ============================================================ */
.store-card { max-width: 460px; }
.store-section-title {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 700;
  margin: 10px 0 6px;
  text-align: left;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.store-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border);
}
.store-item.equipped { border-color: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,0.4); }
.store-swatch {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
}
.store-item-name { font-size: 0.8rem; font-weight: 600; color: #fff; text-align: center; }
.store-buy-btn {
  width: 100%;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold) 0%, #aa8513 100%);
  color: #000;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.store-buy-btn.gem { background: linear-gradient(135deg, #74b9ff 0%, #4a6fd6 100%); color: #fff; }
.store-buy-btn.owned { background: rgba(255,255,255,0.12); color: var(--text-secondary); cursor: default; }
.store-buy-btn.equipped-btn { background: rgba(46,204,113,0.25); color: #b8f5cf; border: 1px solid rgba(46,204,113,0.5); cursor: default; }
.store-buy-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.store-wallet-line {
  display: flex; justify-content: center; gap: 18px;
  font-weight: 700; font-size: 0.9rem; margin-bottom: 4px;
}
/* Title-screen store entry button (circle, left of settings) */
.circle-store-btn {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--hud-border);
  color: var(--gold);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.circle-store-btn:hover { background: rgba(212,175,55,0.2); }

/* ============================================================
   召唤对决模式 (Battle Mode) 样式定义
   ============================================================ */
#battle-arena {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(49, 67, 58, 0.94), rgba(25, 39, 34, 0.96));
  border: 1px solid rgba(255, 232, 154, 0.32);
  border-radius: 12px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.48), 0 10px 24px rgba(0,0,0,0.28);
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 4;
  box-sizing: border-box;
  overflow: hidden;
  min-height: min(44vh, 430px);
  padding: 8px;
  animation: battle-arena-in 0.4s ease both;
}
@keyframes battle-arena-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#battle-arena.hidden {
  display: none !important;
}

#battle-canvas {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  display: block;
}

.lane-battle-board {
  position: relative;
  width: min(100%, 440px);
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  margin: 0 auto;
}

/* 2x-speed toggle: small square button, top-right just below the AI castle bar.
   Scoped under .lane-battle-board so it beats the auto-applied .okey-button
   styles (which force position:relative). */
.lane-battle-board .battle-speed-toggle {
  position: absolute;
  top: 58px;
  right: 8px;
  z-index: 6;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  /* Solid dark fill so the white label always has high contrast. */
  background: rgba(10, 10, 14, 0.85);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Disable the auto-applied .okey-button shine/base pseudo layers on this button
   so they cannot tint the fill and wreck the label contrast. */
.lane-battle-board .battle-speed-toggle::before,
.lane-battle-board .battle-speed-toggle::after {
  display: none !important;
}

/* Active (2x): solid bright amber fill with PURE BLACK bold text — maximum
   contrast. Never pair a light fill with light text. */
.lane-battle-board .battle-speed-toggle.active {
  background: #ffc107;
  border-color: #ffffff;
  color: #000000;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
}

.lane-battle-board .battle-test-clear-btn {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 6;
  min-width: 72px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 232, 154, 0.72);
  border-radius: 8px;
  background: rgba(92, 26, 42, 0.92);
  color: #fff4c8;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  transform: translateX(-50%);
}

.lane-battle-board .battle-test-clear-btn:active {
  transform: translate(-50%, 1px);
}

.lane-battle-board .battle-run-items-rail {
  position: absolute;
  top: 58px;
  left: 8px;
  z-index: 7;
  display: grid;
  gap: 7px;
  width: 38px;
  justify-items: center;
}

.lane-battle-board .battle-run-item-icon,
.lane-battle-board .battle-run-item-empty {
  width: 36px;
  min-height: 40px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 2px solid rgba(255, 236, 164, 0.86);
  background: linear-gradient(180deg, #713819, #35170d);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  box-shadow: 0 3px 0 rgba(54, 20, 8, 0.9), 0 0 10px rgba(255, 213, 88, 0.22);
}

.lane-battle-board .battle-run-item-icon span,
.lane-battle-board .battle-run-item-empty span {
  display: block;
  line-height: 1;
}

.lane-battle-board .battle-run-item-icon b,
.lane-battle-board .battle-run-item-empty b {
  display: block;
  width: 100%;
  max-width: 32px;
  overflow: hidden;
  color: #fff7d6;
  font-size: 0.46rem;
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  white-space: nowrap;
}

.lane-battle-board .battle-run-item-icon {
  cursor: pointer;
  padding: 0;
}

.lane-battle-board .battle-run-item-icon::before,
.lane-battle-board .battle-run-item-icon::after {
  display: none !important;
}

.lane-battle-board .battle-run-item-class {
  background: linear-gradient(180deg, #2b7d61, #104434);
}

.lane-battle-board .battle-run-item-empty {
  opacity: 0.5;
  filter: grayscale(0.2);
}

.lane-battle-board .battle-tech-active-rail {
  position: absolute;
  top: 58px;
  right: 8px;
  z-index: 7;
  display: grid;
  gap: 7px;
  width: 42px;
  justify-items: center;
}

.lane-battle-board .battle-tech-active-btn {
  width: 40px;
  min-height: 44px;
  border: 2px solid rgba(188, 232, 255, 0.92);
  border-radius: 9px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 2px;
  background: linear-gradient(180deg, #1a6786, #113146);
  color: #ffffff;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  box-shadow: 0 3px 0 rgba(8, 30, 44, 0.95), 0 0 12px rgba(80, 200, 255, 0.25);
}

.lane-battle-board .battle-tech-active-btn::before,
.lane-battle-board .battle-tech-active-btn::after {
  display: none !important;
}

.battle-tech-active-btn span {
  font-size: 1rem;
  line-height: 1;
}

.battle-tech-active-btn b,
.battle-tech-active-btn em {
  max-width: 36px;
  overflow: hidden;
  color: #e6fbff;
  font-size: 0.48rem;
  font-style: normal;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-tech-active-btn:disabled {
  background: #3f4548;
  border-color: #8d979b;
  box-shadow: none;
  opacity: 0.72;
}

.lane-battle-board .battle-meld-legend-wrap {
  position: absolute;
  top: 104px;
  right: 8px;
  z-index: 6;
  width: auto;
  max-width: min(252px, calc(100% - 70px));
  display: grid;
  justify-items: end;
  gap: 6px;
  pointer-events: none;
}

.lane-battle-board .battle-meld-legend-toggle {
  width: 54px;
  min-width: 54px;
  height: 38px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 18px;
  align-items: center;
  gap: 2px;
  border: 2px solid rgba(255, 236, 164, 0.86);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #713819, #35170d);
  color: #fff7d6;
  box-shadow: 0 3px 0 rgba(54, 20, 8, 0.9), 0 0 10px rgba(255, 213, 88, 0.22);
  cursor: pointer;
  pointer-events: auto;
}

.lane-battle-board .battle-meld-legend-toggle::before,
.lane-battle-board .battle-meld-legend-toggle::after {
  display: none !important;
}

.battle-meld-legend-toggle span {
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.88);
  white-space: nowrap;
}

.battle-meld-legend-toggle b {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 244, 184, 0.18);
  color: #ffeaa8;
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
}

.lane-battle-board .battle-meld-legend {
  width: min(252px, calc(100vw - 86px));
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255, 236, 164, 0.55);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(44, 25, 16, 0.9), rgba(12, 31, 35, 0.86));
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  pointer-events: auto;
}

.battle-meld-legend-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(48px, 0.55fr) minmax(86px, 1fr);
  gap: 6px;
  align-items: center;
}

.battle-meld-legend-icon {
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255, 244, 184, 0.14);
  color: #ffeaa8;
  font-size: 0.58rem;
  font-weight: 1000;
}

.battle-meld-legend-copy,
.battle-meld-legend-units {
  min-width: 0;
}

.battle-meld-legend-copy b,
.battle-meld-legend-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-meld-legend-copy b {
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 1000;
  line-height: 1.05;
}

.battle-meld-legend-copy small {
  color: #f7d98a;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.15;
}

.battle-meld-legend-units {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.battle-meld-legend-unit-chip {
  min-width: 30px;
  max-width: 46px;
  display: grid;
  justify-items: center;
  gap: 1px;
}

.battle-meld-legend-unit-art {
  position: relative;
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.battle-meld-legend-unit-art .lane-unit-sprite {
  width: 34px;
}

.battle-meld-legend-unit-art .lane-unit-icon {
  font-size: 0.78rem;
}

.battle-meld-legend-unit-chip b {
  width: 100%;
  overflow: hidden;
  color: #ecfeff;
  font-size: 0.46rem;
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  white-space: nowrap;
}

.modal-card.battle-intro-card {
  position: relative;
  width: min(92%, 430px);
  max-width: 430px;
  padding: 18px 18px 16px;
  gap: 12px;
  border: 2px solid rgba(255, 226, 119, 0.72);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(48, 65, 73, 0.98), rgba(23, 32, 38, 0.99));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 18px 36px rgba(0,0,0,0.5);
}

.battle-intro-card h2 {
  margin: 0;
  padding: 0 34px 8px 0;
  border-bottom: 1px solid rgba(255, 226, 119, 0.34);
  color: #ffe39b;
  font-size: 1.28rem;
  line-height: 1.18;
}

.battle-intro-kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 9px;
  border: 1px solid rgba(255, 226, 119, 0.36);
  border-radius: 999px;
  background: rgba(255, 226, 119, 0.14);
  color: #fff2bd;
  font-size: 0.72rem;
  font-weight: 1000;
}

.battle-intro-body {
  color: #f8fafc;
  font-size: 0.92rem;
  line-height: 1.55;
}

.battle-intro-copy {
  display: grid;
  gap: 10px;
}

.battle-intro-copy p {
  margin: 0;
}

.battle-intro-chip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.battle-intro-chip-row span {
  min-width: 0;
  padding: 9px 6px;
  border: 1px solid rgba(255, 226, 119, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff6d8;
  font-size: 0.82rem;
  font-weight: 1000;
  text-align: center;
}

.battle-intro-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.battle-intro-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
}

.battle-intro-dot.active {
  width: 18px;
  background: #ffd966;
}

.battle-intro-actions {
  margin-top: 0;
}

.battle-intro-close {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 238, 167, 0.95);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #3b1608;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(89, 39, 12, 0.8);
}

.lane-battle-board .battle-run-item-detail {
  position: absolute;
  top: var(--detail-top, 58px);
  left: var(--detail-left, 52px);
  z-index: 10;
  width: min(230px, calc(100% - 96px));
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 236, 164, 0.9);
  background: linear-gradient(180deg, rgba(59, 32, 18, 0.98), rgba(22, 36, 31, 0.98));
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.38);
}

.battle-run-item-detail-type {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 222, 119, 0.22);
  color: #ffe69a;
  font-size: 0.68rem;
  font-weight: 1000;
}

.battle-run-item-detail b {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 0.98rem;
}

.battle-run-item-detail p {
  margin: 0;
  color: #fff7e4;
  font-size: 0.78rem;
  line-height: 1.4;
}

.battle-run-item-detail-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.38);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 1000;
  line-height: 1;
  padding: 0;
}

.battle-run-item-detail-close::before,
.battle-run-item-detail-close::after {
  display: none !important;
}

.lane-battle-board .battle-strike-btn {
  position: absolute;
  top: 98px;
  right: 8px;
  z-index: 6;
  width: 42px;
  height: 42px;
  padding: 2px;
  display: grid;
  place-items: center;
  border: 2px solid #fff2a8;
  border-radius: 8px;
  background: linear-gradient(180deg, #a61b2b, #65101d);
  color: #ffffff;
  box-shadow: 0 3px 0 #5f1010, 0 0 14px rgba(239, 68, 68, 0.46);
}

.lane-battle-board .battle-strike-btn::before,
.lane-battle-board .battle-strike-btn::after {
  display: none !important;
}

.battle-strike-btn span { font-size: 1.05rem; line-height: 1; }
.battle-strike-btn b { font-size: 0.62rem; line-height: 1; color: #fff; }
.battle-strike-btn:disabled {
  background: #3f4548;
  border-color: #8d979b;
  color: #e5e7eb;
  box-shadow: none;
  opacity: 0.78;
}

.lane-battle-board .battle-item-btn {
  position: absolute;
  right: 8px;
  z-index: 6;
  width: 42px;
  height: 42px;
  padding: 2px;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 8px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.lane-battle-board .battle-item-btn::before,
.lane-battle-board .battle-item-btn::after {
  display: none !important;
}

.battle-item-btn span { font-size: 1.05rem; line-height: 1; }
.battle-item-btn b { font-size: 0.62rem; line-height: 1; }

.battle-freeze-btn {
  top: 148px;
  background: linear-gradient(180deg, #1687c5, #075985);
  box-shadow: 0 3px 0 #083c5d, 0 0 14px rgba(56, 189, 248, 0.5);
}

.battle-burn-btn {
  top: 198px;
  background: linear-gradient(180deg, #dc4b19, #8f1d0d);
  box-shadow: 0 3px 0 #68170b, 0 0 14px rgba(249, 115, 22, 0.5);
}

.battle-item-btn:disabled {
  background: #3f4548;
  border-color: #8d979b;
  box-shadow: none;
  opacity: 0.78;
}

.lane-castle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.72rem;
  font-weight: 800;
}

.lane-castle-ai {
  color: #ffd0d0;
}

.lane-castle-player {
  color: #d3f9d8;
}

.castle-label,
.castle-hp {
  white-space: nowrap;
}

.castle-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}

.castle-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #facc15, #22c55e);
}

.lane-grid {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
}

.lane-grid::before,
.lane-grid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  pointer-events: none;
}

.lane-grid::before {
  width: clamp(118px, 36vw, 178px);
  background:
    linear-gradient(180deg, rgba(251, 113, 133, 0.12), rgba(45, 212, 191, 0.12)),
    rgba(27, 65, 51, 0.42);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.08), 0 0 18px rgba(0,0,0,0.28);
}

.lane-grid::after {
  width: 10px;
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.82), rgba(250, 204, 21, 0.52), rgba(45, 212, 191, 0.82));
  box-shadow: 0 0 10px rgba(250,204,21,0.24);
}

.lane-units-layer {
  position: absolute;
  /* Inset top/bottom so a unit at a spawn point (top:0% / 100%) stays fully
     inside the clipped lane instead of being half-hidden behind the adjacent
     castle HP bar. */
  inset: 30px 0;
  pointer-events: none;
  z-index: 2;
}

.battle-control-point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(116px, 34vw, 168px);
  min-height: 74px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 2px solid rgba(255, 240, 167, 0.72);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 238, 163, 0.22), rgba(35, 22, 14, 0.28) 62%, rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 0 18px rgba(255, 250, 190, 0.22), 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

.bcp-ring {
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(255, 255, 255, 0.52);
  border-radius: inherit;
}

.battle-control-point.is-player {
  border-color: rgba(107, 255, 163, 0.9);
  box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.28), 0 0 18px rgba(34, 197, 94, 0.24);
}

.battle-control-point.is-ai {
  border-color: rgba(255, 125, 125, 0.9);
  box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.28), 0 0 18px rgba(239, 68, 68, 0.24);
}

.battle-control-point.is-contested {
  border-color: rgba(255, 211, 76, 0.96);
  box-shadow: inset 0 0 20px rgba(250, 204, 21, 0.28), 0 0 18px rgba(250, 204, 21, 0.24);
}

.bcp-label,
.bcp-score {
  position: relative;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(43, 13, 7, 0.78);
}

.bcp-bars {
  position: relative;
  width: min(112px, 78%);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42);
}

.bcp-bars i {
  position: absolute;
  top: 0;
  height: 100%;
  transition: width 120ms linear;
}

.bcp-player {
  left: 0;
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.bcp-ai {
  right: 0;
  background: linear-gradient(90deg, #fca5a5, #ef4444);
}

.lane-cell {
  display: none;
}

.lane-cell.selected-lane {
  box-shadow: none;
}

.lane-unit {
  width: clamp(30px, 9.5vw, 44px);
  height: clamp(30px, 9.5vw, 44px);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  display: grid;
  place-items: center;
  position: absolute;
  left: calc(50% + var(--unit-x, 0px));
  top: var(--unit-y, 100%);
  transform: translate(-50%, -50%) scale(var(--unit-scale, 1));
  transition: top 18ms linear;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
}

.lane-unit-player {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lane-unit-ai {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lane-unit.is-boss {
  z-index: 8;
}

.lane-unit.is-boss .lane-unit-sprite {
  filter:
    saturate(1.18)
    contrast(1.08)
    drop-shadow(0 7px 7px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 9px rgba(255, 202, 92, 0.5));
}

.lane-unit.is-boss .lane-unit-hp {
  min-width: 22px;
  border: 1px solid rgba(255, 220, 126, 0.9);
  background: linear-gradient(180deg, rgba(92, 16, 39, 0.94), rgba(24, 10, 12, 0.92));
  color: #fff2b8;
}

.lane-unit-type-soldier {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lane-unit.is-frozen .lane-unit-sprite {
  filter:
    sepia(0.15)
    hue-rotate(155deg)
    saturate(1.8)
    brightness(1.22)
    drop-shadow(0 0 7px rgba(125, 211, 252, 0.95));
}

.lane-unit.is-slowed .lane-unit-sprite {
  filter:
    hue-rotate(155deg)
    saturate(1.25)
    drop-shadow(0 0 5px rgba(56, 189, 248, 0.72));
}

.lane-unit.is-burning .lane-unit-sprite {
  filter:
    saturate(1.35)
    drop-shadow(0 0 7px rgba(249, 115, 22, 0.95));
}

.lane-unit.is-frozen::after,
.lane-unit.is-burning::after {
  position: absolute;
  left: 50%;
  top: -24px;
  z-index: 4;
  transform: translateX(-50%);
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

.lane-unit.is-frozen::after { content: "❄️"; }
.lane-unit.is-burning::after { content: "🔥"; }

.lane-unit-icon {
  font-size: 1.18rem;
  line-height: 1;
}

.lane-unit-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(76px, 19vw, 86px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background-image: var(--unit-sprite);
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-position: 0 0;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.38));
  animation: lane-unit-walk 0.72s steps(1, end) infinite;
}

.lane-unit-sprite .lane-unit-icon {
  display: none;
}

.lane-unit-ai .lane-unit-sprite {
  transform: translate(-50%, -50%);
}

.lane-unit.is-attacking .lane-unit-sprite {
  animation: lane-unit-attack 0.36s steps(1, end) 1;
}

@keyframes lane-unit-walk {
  0%, 49% { background-position: 0 0; }
  50%, 100% { background-position: 33.333% 0; }
}

@keyframes lane-unit-attack {
  0%, 44% { background-position: 66.666% 0; }
  45%, 100% { background-position: 100% 0; }
}

/* ---- Battle roguelike: outcome modal ---- */
.battle-outcome-card {
  max-width: 360px;
  width: 88%;
  text-align: center;
}

.battle-outcome-card.is-evolution-choice {
  width: min(94vw, 820px);
  max-width: 820px;
}

.battle-outcome-card.bo-evolution-shock {
  animation: bo-evolution-shock 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.battle-outcome-body {
  margin: 6px 0 14px;
  color: var(--text-secondary, #e9d9b6);
}

.battle-outcome-body .bo-line {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.battle-outcome-body .bo-coins {
  font-size: 0.92rem;
  color: #ffd34d;
  font-weight: 800;
}

.bo-clear-line {
  color: #fff2c6;
  font-size: 1.05rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(66, 20, 8, 0.62);
}

.bo-star-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 6px;
  color: rgba(255, 230, 157, 0.32);
  font-size: 2.05rem;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(61, 17, 8, 0.7);
}

.bo-star-showcase i {
  font-style: normal;
}

.bo-star-showcase i.on {
  color: #ffd34d;
}

.bo-star-showcase span {
  margin-left: 8px;
  color: #fff0bb;
  font-size: 1rem;
  font-weight: 1000;
}

.bo-subline,
.bo-unlock-note {
  color: #ecd2a6;
  font-size: 0.88rem;
  font-weight: 800;
}

.bo-star-rules {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}

.bo-star-rule {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 224, 128, 0.22);
  border-radius: 8px;
  background: rgba(255, 246, 196, 0.08);
  color: #f0d5a6;
  text-align: left;
}

.bo-star-rule b {
  color: #ffd34d;
  font-size: 0.95rem;
  text-shadow: 0 2px 0 rgba(57, 17, 7, 0.72);
}

.bo-star-rule span {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.18;
}

.bo-star-rule i {
  color: rgba(255, 235, 178, 0.58);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.bo-star-rule.met {
  background: rgba(255, 210, 78, 0.18);
  color: #fff2c6;
}

.bo-star-rule.met i {
  color: #9df2a3;
}

.bo-reward-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 215, 88, 0.22), rgba(255, 190, 64, 0.1));
  border: 1px solid rgba(255, 221, 113, 0.32);
}

.bo-reward-row span {
  color: #fff2c6;
  font-size: 0.88rem;
  font-weight: 1000;
  text-align: left;
}

.bo-reward-row b {
  color: #ffd34d;
  font-size: 0.86rem;
}

.bo-stats-panel {
  display: grid;
  gap: 9px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 224, 128, 0.24);
}

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

.bo-stat-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bo-stat-summary div,
.bo-stat-unit,
.bo-stat-empty {
  border: 1px solid rgba(255, 224, 128, 0.22);
  border-radius: 8px;
  background: rgba(255, 246, 196, 0.08);
}

.bo-stat-summary div {
  display: grid;
  gap: 3px;
  padding: 8px;
}

.bo-stat-summary span {
  color: #efd5a4;
  font-size: 0.74rem;
  font-weight: 850;
}

.bo-stat-summary b {
  color: #fff2c6;
  font-size: 1rem;
}

.bo-stat-list {
  display: grid;
  gap: 7px;
}

.bo-stat-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  color: #fff0bb;
}

.bo-stat-unit span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.bo-stat-unit b {
  color: #ffd34d;
}

.bo-stat-empty {
  padding: 10px;
  color: #efd5a4;
  font-size: 0.82rem;
  font-weight: 850;
}

.battle-stats-toggle-btn {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(111, 65, 38, 0.96), rgba(70, 33, 24, 0.96)) !important;
  border-color: rgba(255, 230, 150, 0.72) !important;
}


/* Cannon projectile that flies from the cannon to its target. */
.lane-projectile {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff7d6 0 18%, #facc15 32%, #f97316 62%, #7c2d12 100%);
  box-shadow: 0 0 14px 4px rgba(249, 115, 22, 0.9), 0 0 3px 1px rgba(255,255,255,0.8) inset;
  z-index: 9999;
  pointer-events: none;
}

.lane-projectile-ballista {
  width: 6px;
  height: 28px;
  margin: -14px 0 0 -3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fafc, #d6a85f 72%, #713f12);
  box-shadow: 0 0 7px rgba(255,255,255,0.75);
}

.lane-projectile-catapult {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: radial-gradient(circle at 35% 30%, #d6d3d1, #57534e 60%, #1c1917);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.58);
}

.lane-projectile-stone_slinger {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 0;
  background: url("assets/battle-projectiles/stone-projectile.png") center / contain no-repeat;
  box-shadow: 0 3px 7px rgba(36, 24, 14, 0.38);
}

.lane-projectile-hunter_archer {
  width: 8px;
  height: 30px;
  margin: -15px 0 0 -4px;
  border-radius: 0;
  background: url("assets/battle-skills/arrow-rain-arrow.png") center / contain no-repeat;
  box-shadow: none;
}

.lane-projectile-javelin_hunter {
  width: 8px;
  height: 36px;
  margin: -18px 0 0 -4px;
  border-radius: 0;
  background: url("assets/battle-skills/arrow-rain-arrow.png") center / contain no-repeat;
  filter: sepia(0.72) saturate(0.78) brightness(0.72);
  box-shadow: none;
}

.lane-projectile-bone_archer,
.lane-projectile-tribal_sharpshooter {
  width: 8px;
  height: 30px;
  margin: -15px 0 0 -4px;
  border-radius: 0;
  background: url("assets/battle-skills/arrow-rain-arrow.png") center / contain no-repeat;
  box-shadow: none;
}

.lane-projectile-tribal_sharpshooter {
  filter: drop-shadow(0 0 4px rgba(255, 224, 138, 0.72));
}

.lane-projectile-mortar {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: radial-gradient(circle at 35% 30%, #f5f5f4, #57534e 58%, #1c1917);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.78);
}

.lane-orbital-strike {
  position: fixed;
  top: -26px;
  width: 120px;
  margin-left: -60px;
  pointer-events: none;
  z-index: 10002;
  contain: layout paint style;
  --orbital-delay: 220ms;
}

.lane-orbital-column {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 38px;
  border-radius: 999px;
  transform-origin: top center;
  will-change: transform, opacity, filter;
}

.lane-orbital-column-glow {
  width: 44px;
  margin-left: -22px;
  background:
    linear-gradient(180deg, rgba(103, 232, 249, 0), rgba(103, 232, 249, 0.42) 14%, rgba(34, 211, 238, 0.82) 64%, rgba(14, 165, 233, 0.08)),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72), rgba(56, 189, 248, 0.28) 42%, rgba(14, 165, 233, 0) 72%);
  filter: blur(4px) saturate(1.35);
  animation: lane-orbital-beam-glow 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lane-orbital-column-core {
  width: 10px;
  margin-left: -5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ecfeff 10%, #67e8f9 55%, #0ea5e9 100%);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 28px rgba(34, 211, 238, 0.95),
    0 0 54px rgba(14, 165, 233, 0.72);
  animation: lane-orbital-beam-core 540ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lane-orbital-scan {
  position: absolute;
  left: 50%;
  width: 58px;
  height: 2px;
  margin-left: -29px;
  border-radius: 999px;
  background: rgba(236, 254, 255, 0.88);
  box-shadow: 0 0 16px rgba(103, 232, 249, 0.86);
  opacity: 0;
  will-change: transform, opacity;
}

.lane-orbital-scan-a {
  animation: lane-orbital-scan 440ms linear 40ms forwards;
}

.lane-orbital-scan-b {
  animation: lane-orbital-scan 420ms linear 135ms forwards reverse;
}

.lane-orbital-impact {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 12%, rgba(103, 232, 249, 0.82) 23%, rgba(14, 165, 233, 0.34) 52%, rgba(14, 165, 233, 0) 70%);
  opacity: 0;
  transform: translateZ(0) scale(0.26);
  filter: saturate(1.4);
  animation: lane-orbital-impact 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--orbital-delay) forwards;
  will-change: transform, opacity, filter;
}

.lane-orbital-impact-ring {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  background: none;
  border: 2px solid rgba(186, 230, 253, 0.88);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.72), inset 0 0 18px rgba(103, 232, 249, 0.38);
  animation-duration: 500ms;
}

@keyframes lane-orbital-beam-core {
  0% { opacity: 0; transform: scaleY(0.02) scaleX(0.38); filter: brightness(1.8); }
  14% { opacity: 1; transform: scaleY(1) scaleX(1.45); filter: brightness(2.25); }
  42% { opacity: 0.95; transform: scaleY(1) scaleX(0.92); filter: brightness(1.6); }
  100% { opacity: 0; transform: scaleY(1) scaleX(0.24); filter: brightness(0.8); }
}

@keyframes lane-orbital-beam-glow {
  0% { opacity: 0; transform: scaleY(0.04) scaleX(0.55); }
  16% { opacity: 0.96; transform: scaleY(1) scaleX(1.08); }
  64% { opacity: 0.62; transform: scaleY(1) scaleX(0.82); }
  100% { opacity: 0; transform: scaleY(1) scaleX(0.36); }
}

@keyframes lane-orbital-scan {
  0% { opacity: 0; transform: translate3d(0, 6px, 0) scaleX(0.35); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(0, 70vh, 0) scaleX(1.2); }
}

@keyframes lane-orbital-impact {
  0% { opacity: 0; transform: translateZ(0) scale(0.18); filter: brightness(1.8) saturate(1.6); }
  22% { opacity: 1; transform: translateZ(0) scale(0.74); }
  100% { opacity: 0; transform: translateZ(0) scale(1.72); filter: brightness(0.9) saturate(1.05); }
}

.battle-arena-shake {
  animation: battle-arena-shake 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes battle-arena-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  18% { transform: translate3d(var(--battle-shake, 5px), calc(var(--battle-shake, 5px) * -0.35), 0); }
  36% { transform: translate3d(calc(var(--battle-shake, 5px) * -0.75), calc(var(--battle-shake, 5px) * 0.28), 0); }
  58% { transform: translate3d(calc(var(--battle-shake, 5px) * 0.42), calc(var(--battle-shake, 5px) * -0.22), 0); }
  76% { transform: translate3d(calc(var(--battle-shake, 5px) * -0.22), calc(var(--battle-shake, 5px) * 0.16), 0); }
}

.battle-skill-cast,
.battle-skill-impact {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10003;
  pointer-events: none;
  contain: layout paint style;
}

.battle-skill-cast {
  width: calc(var(--skill-radius, 68px) * 2);
  height: calc(var(--skill-radius, 68px) * 2);
  margin: calc(var(--skill-radius, 68px) * -1) 0 0 calc(var(--skill-radius, 68px) * -1);
  border-radius: 50%;
  opacity: 0;
  animation: battle-skill-cast-warn 0.56s ease-out forwards;
}

.battle-skill-cast span,
.battle-skill-cast i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.battle-skill-cast span {
  border: 2px solid rgba(255, 239, 153, 0.9);
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.58), inset 0 0 18px rgba(255, 247, 214, 0.28);
}

.battle-skill-cast i {
  inset: 18%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(250, 204, 21, 0.2) 42%, transparent 70%);
  transform: scale(0.32);
}

.battle-skill-cast-skill_arrow_rain span {
  border-color: rgba(186, 230, 253, 0.94);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.62), inset 0 0 16px rgba(186, 230, 253, 0.34);
}

.battle-skill-cast-skill_meteor_rain span {
  border-color: rgba(253, 186, 116, 0.96);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.72), inset 0 0 18px rgba(254, 215, 170, 0.34);
}

@keyframes battle-skill-cast-warn {
  0% { opacity: 0; transform: translateZ(0) scale(0.42); filter: brightness(1.6); }
  24% { opacity: 0.98; }
  100% { opacity: 0; transform: translateZ(0) scale(1.08); filter: brightness(0.9); }
}

.battle-skill-impact {
  width: calc(var(--skill-radius, 72px) * 2.2);
  height: calc(var(--skill-radius, 72px) * 2.2);
  margin: calc(var(--skill-radius, 72px) * -1.1) 0 0 calc(var(--skill-radius, 72px) * -1.1);
}

.battle-skill-impact-meteor {
  width: calc(var(--skill-radius, 72px) * 4.2);
  height: calc(var(--skill-radius, 72px) * 4.2);
  margin: calc(var(--skill-radius, 72px) * -2.1) 0 0 calc(var(--skill-radius, 72px) * -2.1);
}

.battle-skill-impact .skill-impact-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--skill-radius, 72px) * 1.4);
  height: calc(var(--skill-radius, 72px) * 1.4);
  margin: calc(var(--skill-radius, 72px) * -0.7) 0 0 calc(var(--skill-radius, 72px) * -0.7);
  border-radius: 50%;
  border: 2px solid rgba(255, 244, 184, 0.82);
  opacity: 0;
  animation: skill-impact-ring 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.battle-skill-impact b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 18px;
  margin: -9px 0 0 -2.5px;
  border-radius: 999px;
  transform: rotate(var(--a)) translateY(0);
  opacity: 0;
}

.battle-skill-impact-arrow .skill-arrow-burst {
  position: absolute;
  inset: 12%;
  background:
    radial-gradient(circle, rgba(240, 249, 255, 0.78), rgba(56, 189, 248, 0.28) 38%, transparent 64%);
  border-radius: 50%;
  opacity: 0;
  animation: skill-arrow-flash 0.52s ease-out forwards;
}

.battle-skill-impact-arrow b {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  background: url("assets/battle-skills/arrow-rain-arrow.png") center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.95)) drop-shadow(0 0 20px rgba(56, 189, 248, 0.24));
  transform: translate3d(calc((var(--i) - 9) * 11px - 120px), -220px, 0) scale(0.7);
  animation: skill-arrow-fall 0.82s cubic-bezier(0.1, 0.76, 0.18, 1) calc(var(--i) * 18ms) forwards;
}

.battle-skill-impact-meteor .skill-meteor-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--skill-radius, 72px) * 2.55);
  height: calc(var(--skill-radius, 72px) * 2.55);
  margin: calc(var(--skill-radius, 72px) * -1.275) 0 0 calc(var(--skill-radius, 72px) * -1.275);
  background: url("assets/battle-skills/meteor-rain-meteor.png") center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(254, 215, 170, 0.95)) drop-shadow(0 0 54px rgba(239, 68, 68, 0.58));
  transform: translate3d(-190px, -260px, 0) scale(0.42);
  opacity: 0;
  animation: skill-meteor-fall 0.76s cubic-bezier(0.08, 0.82, 0.14, 1) forwards;
}

.battle-skill-impact-meteor .skill-meteor-impact-flash,
.battle-skill-impact-meteor .skill-meteor-impact-burst,
.battle-skill-impact-meteor .skill-meteor-impact-ground {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--skill-radius, 72px) * 3.65);
  height: calc(var(--skill-radius, 72px) * 3.65);
  margin: calc(var(--skill-radius, 72px) * -1.825) 0 0 calc(var(--skill-radius, 72px) * -1.825);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: translateZ(0) scale(0.6);
  filter: drop-shadow(0 0 18px rgba(254, 215, 170, 0.9)) drop-shadow(0 0 48px rgba(249, 115, 22, 0.45));
}

.battle-skill-impact-meteor .skill-meteor-impact-flash {
  z-index: 3;
  background-image: url("assets/battle-skills/meteor-impact-flash.png");
  animation: skill-meteor-impact-flash 0.28s ease-out 0.64s forwards;
}

.battle-skill-impact-meteor .skill-meteor-impact-burst {
  z-index: 2;
  width: calc(var(--skill-radius, 72px) * 4.15);
  height: calc(var(--skill-radius, 72px) * 4.15);
  margin: calc(var(--skill-radius, 72px) * -2.075) 0 0 calc(var(--skill-radius, 72px) * -2.075);
  background-image: url("assets/battle-skills/meteor-impact-burst.png");
  animation: skill-meteor-impact-burst 0.72s cubic-bezier(0.14, 0.9, 0.18, 1) 0.64s forwards;
}

.battle-skill-impact-meteor .skill-meteor-impact-ground {
  z-index: 1;
  top: 58%;
  width: calc(var(--skill-radius, 72px) * 4.5);
  height: calc(var(--skill-radius, 72px) * 4.5);
  margin: calc(var(--skill-radius, 72px) * -2.25) 0 0 calc(var(--skill-radius, 72px) * -2.25);
  background-image: url("assets/battle-skills/meteor-impact-ring.png");
  filter: drop-shadow(0 0 16px rgba(249, 115, 22, 0.82));
  animation: skill-meteor-impact-ground 0.86s cubic-bezier(0.16, 1, 0.3, 1) 0.64s forwards;
}

.battle-skill-impact-meteor b {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7ed, #f97316 58%, #7c2d12);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.8);
  animation: skill-meteor-spark 0.62s ease-out calc(var(--i) * 10ms) forwards;
}

.battle-skill-impact-meteor .skill-impact-ring {
  border-color: rgba(253, 186, 116, 0.95);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.72), inset 0 0 22px rgba(254, 215, 170, 0.38);
  animation-delay: 0.64s;
}

@keyframes skill-impact-ring {
  0% { opacity: 0; transform: scale(0.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.58); }
}

@keyframes skill-arrow-flash {
  0% { opacity: 0; transform: scale(0.28); }
  18% { opacity: 0.95; }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes skill-arrow-fall {
  0% { opacity: 0; transform: translate3d(calc((var(--i) - 9) * 11px - 120px), -240px, 0) scale(0.62); }
  12% { opacity: 1; }
  68% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc((var(--i) - 9) * 2px + 34px), 40px, 0) scale(1.04); }
}

@keyframes skill-meteor-fall {
  0% { opacity: 0; transform: translate3d(-210px, -285px, 0) scale(0.42); filter: brightness(1.8) saturate(1.12); }
  12% { opacity: 1; }
  84% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.08); filter: brightness(1.3) saturate(1.18); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.42); filter: brightness(2.3) saturate(1.4); }
}

@keyframes skill-meteor-impact-flash {
  0% { opacity: 0; transform: translateZ(0) scale(0.34); filter: brightness(2.8) saturate(1.4); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateZ(0) scale(1.22); filter: brightness(1.25) saturate(1.05); }
}

@keyframes skill-meteor-impact-burst {
  0% { opacity: 0; transform: translateZ(0) scale(0.24); filter: brightness(2.2) saturate(1.35); }
  10% { opacity: 1; }
  58% { opacity: 0.96; transform: translateZ(0) scale(1.08); }
  100% { opacity: 0; transform: translateZ(0) scale(1.42); filter: brightness(0.82) saturate(1.02); }
}

@keyframes skill-meteor-impact-ground {
  0% { opacity: 0; transform: translateZ(0) scale(0.22) scaleY(0.46); filter: brightness(1.8) saturate(1.25); }
  12% { opacity: 0.96; }
  100% { opacity: 0; transform: translateZ(0) scale(1.32) scaleY(0.56); filter: brightness(0.78) saturate(1.02); }
}

@keyframes skill-meteor-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.35); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--skill-radius, 72px) * -0.9)) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-arena-shake {
    animation-duration: 0.12s;
  }

  .battle-skill-impact b:nth-of-type(n+8) {
    display: none;
  }

  .battle-skill-impact-meteor .skill-meteor-core {
    animation-duration: 0.34s;
  }
}

.battle-strike-flash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: rgba(255, 245, 157, 0.88);
  animation: battle-strike-flash 0.65s ease-out forwards;
}

.battle-status-flash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  animation: battle-strike-flash 0.62s ease-out forwards;
}

.battle-status-flash-freeze {
  background: rgba(186, 230, 253, 0.58);
}

.battle-status-flash-burn {
  background: rgba(251, 146, 60, 0.48);
}

@keyframes battle-strike-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

.lane-sword-slash {
  position: fixed;
  left: 0;
  top: 0;
  width: 46px;
  height: 28px;
  transform: translate(-50%, -50%) rotate(var(--slash-rot, -35deg)) scale(0.35);
  transform-origin: 50% 50%;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  animation: lane-sword-swing 0.28s ease-out forwards;
}

.lane-sword-slash::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  border-radius: 999px 999px 2px 999px;
  border-top: 4px solid rgba(255,255,255,0.95);
  border-right: 3px solid rgba(250,204,21,0.85);
  box-shadow: 0 0 10px rgba(250,204,21,0.75);
}

@keyframes lane-sword-swing {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--slash-rot, -35deg) - 42deg)) scale(0.35); }
  25%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--slash-rot, -35deg) + 24deg)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--slash-rot, -35deg) + 36deg)) scale(1.08); }
}

/* Floating damage number that pops above a hit target and fades upward. */
.lane-damage {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 10001;
  pointer-events: none;
  font-weight: 900;
  font-size: 1.25rem;
  color: #ffe14d;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 2px 3px rgba(0,0,0,0.8);
  animation: lane-damage-float 0.85s ease-out forwards;
}

@keyframes lane-damage-float {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -75%) scale(1.18); }
  40%  { transform: translate(-50%, -95%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -165%) scale(0.95); }
}

/* Brief flash on a unit/castle when it gets hit. */
.lane-hit {
  animation: lane-hit-flash 0.22s ease;
}

@keyframes lane-hit-flash {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(2.1) saturate(1.4); }
  100% { filter: brightness(1); }
}

.lane-unit-hp {
  position: absolute;
  right: -4px;
  bottom: -5px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.76);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
}

.battle-title-banner {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(212,175,55,0.18) 50%, rgba(0,0,0,0) 100%);
  border-bottom: 1px solid rgba(212,175,55,0.3);
  color: var(--gold);
  font-family: 'Zilla Slab', serif;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 14px 0;
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
}
.battle-title-banner .battle-vs {
  color: var(--gold);
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(212,175,55,0.6);
  animation: battle-vs-pulse 1.1s ease-in-out infinite;
}
@keyframes battle-vs-pulse {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.12); opacity: 1; }
}

/* Battle Preview Bar */
.battle-preview-bar {
  background: rgba(10, 20, 15, 0.85);
  border: 1px solid rgba(46, 204, 113, 0.35);
  box-shadow: inset 0 0 10px rgba(46, 204, 113, 0.15);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.battle-preview-bar.hidden {
  display: none !important;
}

/* Head row: title + army totals */
.preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.preview-title {
  color: #ffd700;
  font-weight: bold;
  font-size: 0.85rem;
  white-space: nowrap;
}

.preview-summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: #e8f5e9;
}
.preview-summary .ps-troops { font-weight: 700; color: #aef6d6; }
.preview-summary .ps-stat { color: #d9e6df; }
.preview-summary .preview-buff-badge {
  background: linear-gradient(135deg, #ffd700, #aa8513);
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

.preview-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.preview-empty {
  font-size: 0.82rem;
  color: #ff9e9e;
  font-weight: 600;
}

.preview-unit-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 3px 9px;
  font-size: 0.78rem;
  color: #ffffff;
  white-space: nowrap;
}
.preview-unit-item .pu-icon { font-size: 0.95rem; }
.preview-unit-item .pu-name { font-weight: 600; }
.preview-unit-item .pu-count { font-weight: 800; color: #ffd700; }
.preview-unit-item .pu-stat { font-size: 0.68rem; color: #9fb0a4; }

.preview-unit-item.buffed {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}

/* Summon zone: the last rack row in battle mode (drag a meld here + 生成). */
.rack-cell.summon-zone {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 215, 0, 0.06) 0, rgba(255, 215, 0, 0.06) 6px,
      rgba(255, 215, 0, 0.12) 6px, rgba(255, 215, 0, 0.12) 12px);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18);
}
#player-rack.has-summon-zone { position: relative; }

body[data-mode="battle"] {
  --rack-row-height: clamp(46px, 7.2vh, 62px);
  --rack-width: min(100vw - 16px, 500px);
}

body[data-mode="battle"] .table-center,
body[data-mode="battle"] #panel-player-2,
body[data-mode="battle"] #panel-player-3 {
  display: none;
}

body[data-mode="battle"] #panel-player-1 {
  display: none;
}

body[data-mode="battle"] .game-table {
  grid-template-columns: 10px 1fr 10px;
  grid-template-rows: 0px minmax(260px, 1fr);
  gap: 0;
  padding: 2px 8px 2px;
}

/* Battle uses the lane board as the whole arena; let it claim all of row 2
   instead of being pinned to a fixed 44vh floor that overflows the cell. */
body[data-mode="battle"] #battle-arena {
  min-height: 0;
  grid-row: 1 / 3;
}

/* #1: the indicator + Okey display is docked into the header next to the round
   badge (relocated by renderAll), so lay it out inline and shrink the tiles. */
body[data-mode="battle"] .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-mode="battle"] .game-info-corner {
  position: static;
  flex-direction: row;
  gap: 10px;
  pointer-events: auto;
}

body[data-mode="battle"] .game-info-corner .info-pile {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

body[data-mode="battle"] .game-info-corner .indicator-tile-spot,
body[data-mode="battle"] .game-info-corner .okey-tile-display {
  height: 34px;
}

body[data-mode="battle"] .game-info-corner .info-label {
  font-size: 0.56rem;
}

/* #2: battle summons via tap-select + 生成 — dividers aren't used. */
body[data-mode="battle"] #btn-add-divider,
body[data-mode="battle"] #btn-remove-dividers {
  display: none !important;
}

/* #5: the framed lane / preview box is removed in single-lane battle. */
body[data-mode="battle"] .battle-preview-bar {
  display: none !important;
}

body[data-mode="battle"] #score-p2,
body[data-mode="battle"] #score-p3 {
  display: none;
}

body[data-mode="battle"] .score-board {
  grid-template-columns: repeat(2, minmax(76px, 1fr));
}

body[data-mode="battle"] .player-area {
  gap: 4px;
  padding: 4px 8px calc(5px + env(safe-area-inset-bottom)) 8px;
}

body[data-mode="battle"] .status-bar {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-mode="battle"] .rack-main-area {
  /* A selected first-row tile lifts ~28px; keep the action-button row clear of
     it by leaving room above the rack (and keep the buttons on top). */
  gap: 30px;
}

body[data-mode="battle"] .rack-controls.vertical-controls {
  z-index: 6;
}

body[data-mode="battle"] .rack-controls.vertical-controls {
  gap: 4px;
}

body[data-mode="battle"] .rack-controls.vertical-controls .action-btn {
  min-height: 30px;
  padding: 5px 2px;
  font-size: 0.66rem;
}

body[data-mode="battle"] .rack-controls.vertical-controls .action-btn svg {
  width: 12px;
  height: 12px;
}

body[data-mode="battle"] .rack-container {
  border-width: 3px;
  padding: 5px;
  border-radius: 7px;
}

body[data-mode="battle"] #player-rack.has-summon-zone::after {
  content: "召唤区";
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 4;
  pointer-events: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 232, 154, 0.92);
  font-size: 0.62rem;
  font-weight: 800;
}

@media (max-width: 420px) {
  body[data-mode="battle"] {
    --rack-row-height: clamp(52px, 8.4vh, 68px);
  }

  body[data-mode="battle"] .rack-controls.vertical-controls .action-btn span {
    font-size: 0.6rem;
  }
}

/* Battle action buttons */
.action-btn.summon-btn {
  background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(170,133,19,0.22));
  border-color: rgba(255, 215, 0, 0.6);
  color: #ffe89a;
}
.action-btn.summon-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.34), rgba(170,133,19,0.34));
}
.action-btn.start-battle-btn {
  background: linear-gradient(135deg, rgba(231,76,60,0.28), rgba(150,30,30,0.28));
  border-color: rgba(231, 76, 60, 0.65);
  color: #ffb3a8;
  animation: start-battle-glow 1.8s ease-in-out infinite;
}
.action-btn.start-battle-btn:hover {
  background: linear-gradient(135deg, rgba(231,76,60,0.42), rgba(150,30,30,0.42));
}
.action-btn.start-battle-btn.is-disabled,
.action-btn.start-battle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  animation: none;
  filter: grayscale(0.35);
}
@keyframes start-battle-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.0); }
  50%     { box-shadow: 0 0 12px 2px rgba(231,76,60,0.5); }
}

/* ============================================================
   Unified red-gold mobile game skin
   Keeps every screen in the same visual language as the lobby art.
   ============================================================ */
:root {
  --ui-red-top: #bd2d4d;
  --ui-red-mid: #861a35;
  --ui-red-bot: #520d22;
  --ui-gold-hi: #fff1ad;
  --ui-gold: #f0bd42;
  --ui-gold-deep: #9b5c14;
  --ui-cream: #fff5d0;
  --ui-wood: #7a3514;
  --ui-panel:
    linear-gradient(180deg, rgba(191, 47, 78, 0.96) 0%, rgba(126, 24, 51, 0.98) 58%, rgba(80, 12, 33, 0.99) 100%);
  --ui-panel-dark:
    linear-gradient(180deg, rgba(76, 40, 16, 0.96) 0%, rgba(41, 24, 14, 0.98) 100%);
  --ui-gold-frame:
    0 0 0 1px rgba(255, 244, 180, 0.28),
    0 8px 0 rgba(84, 29, 15, 0.78),
    0 18px 34px rgba(0, 0, 0, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.loading-screen {
  background:
    linear-gradient(180deg, rgba(19, 93, 142, 0.06), rgba(91, 13, 31, 0.48)),
    #0b76a5;
}

.mode-selection-content {
  justify-content: flex-start;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 238, 160, 0.16), transparent 30%),
    linear-gradient(180deg, #103958 0%, #4b1124 68%, #240814 100%);
  /* Subtle, flicker-free open: fade the whole panel in as ONE opacity layer
     (no per-child transforms — those caused the original flicker). The home
     lobby is kept underneath during the fade (see showModeSelection) so the
     panel fades in over it, never exposing the bare title background. */
  opacity: 0;
  transition: opacity 0.26s ease;
}

.mode-selection-content.active {
  opacity: 1;
}

.mode-selection-content::before,
.loading-screen::before,
.modal-overlay::before,
.tutorial-modal-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 238, 160, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(19, 93, 142, 0.12), rgba(62, 8, 23, 0.62));
}

.mode-selection-title,
.page-title,
.modal-card h2,
.tutorial-header h2,
.loading-logo,
.round-over-title,
.points-title {
  color: var(--ui-gold-hi);
  text-shadow: 0 3px 0 rgba(91, 37, 10, 0.95), 0 8px 16px rgba(0,0,0,0.42);
  letter-spacing: 0;
}

.mode-selection-title {
  margin: 8px 0 16px;
  padding: 8px 18px;
  border-radius: 24px;
  background: var(--ui-panel);
  border: 3px solid var(--ui-gold);
  box-shadow: var(--ui-gold-frame);
  font-size: clamp(1.35rem, 6vw, 2rem);
  text-align: center;
}

/* The per-child transl/scale "pop" animation (formerly here) was the source
   of the open flicker on desktop: each title/grid/footer animated its own
   transform, repeatedly creating/destroying a compositor layer over the
   negative-z button pseudos + drop-shadow emoji. Keep the elements static so
   the whole panel shows in one stable paint with the home->mode swap. */
.mode-selection-content .mode-selection-title,
.mode-selection-content .mode-grid,
.mode-selection-content .mode-selection-footer {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes mode-panel-pop {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.9);
  }
  68% {
    opacity: 1;
    transform: translateY(-3px) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mode-grid {
  width: min(94vw, 440px);
  gap: 12px;
  margin-bottom: 16px;
}

.grid-mode-card,
.ai-difficulty-btn,
.store-item,
.page-placeholder,
.setting-item,
.round-scores-list,
.rules-body,
.slide-graphics {
  background:
    linear-gradient(180deg, rgba(255, 231, 147, 0.10), rgba(255,255,255,0) 28%),
    var(--ui-panel-dark);
  border: 2px solid rgba(240, 189, 66, 0.78);
  border-radius: 16px;
  box-shadow:
    0 5px 0 rgba(93, 42, 15, 0.75),
    0 10px 18px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.grid-mode-card {
  min-height: 78px;
  padding: 12px 16px;
  grid-template-columns: 56px 1fr;
  border-color: rgba(255, 211, 84, 0.86);
}

.grid-mode-card.mode-recommended {
  border-color: rgba(255, 238, 126, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 239, 149, 0.18), rgba(255,255,255,0) 32%),
    var(--ui-panel-dark);
  box-shadow:
    0 6px 0 rgba(93, 42, 15, 0.82),
    0 12px 22px rgba(0,0,0,0.34),
    0 0 18px rgba(255, 218, 91, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.grid-mode-card.mode-experimental {
  opacity: 0.86;
  border-color: rgba(212, 166, 64, 0.56);
  filter: saturate(0.86);
}

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

.card-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mode-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 223, 97, 0.72);
  background: rgba(255, 220, 91, 0.16);
  color: #fff4bc;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(62, 19, 8, 0.72);
  white-space: nowrap;
}

.mode-badge-primary {
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 100%);
  color: #5b1724;
  text-shadow: 0 1px 0 rgba(255,255,255,0.48);
}

.mode-badge-experimental {
  border-color: rgba(192, 154, 71, 0.56);
  background: rgba(139, 94, 45, 0.22);
  color: #e7d2a4;
}

.grid-mode-card:hover,
.grid-mode-card:active {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 231, 147, 0.16), rgba(255,255,255,0) 30%),
    var(--ui-panel-dark);
  border-color: var(--ui-gold-hi);
  box-shadow:
    0 6px 0 rgba(93, 42, 15, 0.75),
    0 12px 24px rgba(0,0,0,0.36),
    0 0 18px rgba(255, 211, 84, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.grid-mode-card.mode-quick:hover,
.grid-mode-card.mode-classic:hover,
.grid-mode-card.mode-rogue:hover,
.grid-mode-card.mode-tutorial:hover,
.grid-mode-card.mode-battle:hover {
  border-color: var(--ui-gold-hi);
  box-shadow:
    0 6px 0 rgba(93, 42, 15, 0.75),
    0 12px 24px rgba(0,0,0,0.36),
    0 0 18px rgba(255, 211, 84, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.card-icon,
.ai-difficulty-icon,
.page-ph-emoji {
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45));
}

.card-title,
.ai-difficulty-label,
.store-item-name,
.page-ph-title {
  color: var(--ui-cream);
  text-shadow: 0 2px 0 rgba(72, 26, 8, 0.78);
}

.card-desc,
.ai-difficulty-desc,
.page-ph-text,
.rules-body,
.tutorial-slide p,
.tutorial-slide ul,
.win-description {
  color: #f4dfad;
}

.mode-selection-footer {
  width: min(94vw, 440px);
  margin-top: auto;
  padding: 4px 0 0;
}

.battle-level-preview-card {
  width: min(88vw, 360px);
  max-height: min(72vh, 360px);
  gap: 14px;
  overflow: hidden;
  border: 2px solid rgba(247, 201, 80, 0.88);
  background:
    linear-gradient(180deg, rgba(112, 28, 22, 0.98) 0%, rgba(82, 20, 25, 0.98) 100%),
    #65181d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 242, 169, 0.28);
}

.battle-level-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.battle-level-preview-head h2 {
  margin: 2px 0 0;
  color: #fff1ba;
  font-size: 1.55rem;
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(70, 15, 8, 0.62);
}

.blp-kicker {
  display: block;
  color: #f8c84c;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.battle-level-preview-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.battle-level-preview-body:empty {
  display: none;
}

.battle-level-preview-actions {
  margin-top: 0;
}

.battle-map-content {
  --battle-theme-velvet: #451322;
  --battle-theme-wine: #711b31;
  --battle-theme-ink: #18131b;
  --battle-theme-gold: #f6d36e;
  --battle-theme-stone: #c7ad7a;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.24s ease;
  /* Bright conquest-map base: keep the shared gold chrome, but let the hub sit on meadow green. */
  background:
    radial-gradient(100% 44% at 50% -8%, rgba(246, 211, 110, 0.2), transparent 64%),
    radial-gradient(88% 40% at 14% 28%, rgba(154, 224, 98, 0.34), transparent 64%),
    radial-gradient(86% 34% at 88% 58%, rgba(72, 184, 132, 0.28), transparent 66%),
    linear-gradient(180deg, #7fca65 0%, #65b85f 38%, #4da060 68%, #2f7652 100%);
}

.battle-map-content.active {
  opacity: 1;
}

/* Soft meadow texture and light vignette so the map stays vivid without flattening. */
.battle-map-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0.035) 75%, transparent 75%) 0 0 / 18px 18px,
    radial-gradient(140% 80% at 50% 50%, transparent 60%, rgba(16, 56, 34, 0.2) 100%);
}

.battle-map-topbar {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 9px;
  background: linear-gradient(180deg, rgba(69, 19, 34, 0.98) 0%, rgba(42, 24, 29, 0.94) 64%, rgba(24, 19, 27, 0.7) 100%);
  border-bottom: 2px solid rgba(246, 211, 110, 0.5);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.bm-top-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  overflow: visible;
}

.battle-map-bottomnav {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.battle-map-icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 238, 167, 0.95);
  border-radius: 13px;
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #4a1410;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(89, 39, 12, 0.8), 0 6px 12px rgba(0,0,0,0.28);
}

.battle-map-back-btn {
  width: auto;
  min-width: 68px;
  padding: 0 10px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #3b1608;
  text-shadow: 0 1px 0 rgba(255,255,255,0.58);
}

.battle-map-settings-btn {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;
  border-radius: 50%;
  color: #3b1608;
  font-size: 1.12rem;
  line-height: 1;
  overflow: visible;
  text-shadow: 0 2px 0 rgba(61, 14, 8, 0.92), 0 3px 6px rgba(0,0,0,0.42);
}

.battle-age-switch-btn {
  width: auto;
  min-width: 72px;
  height: 38px;
  padding: 0 10px;
  margin-left: auto;
  border-radius: 999px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.battle-age-switch-btn + .battle-map-settings-btn {
  margin-left: 0;
}

.battle-map-title-block {
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.battle-map-title-block .bm-shield { font-size: 1.2rem; }

.battle-map-title-block h2 {
  margin: 0;
  color: #fff6bb;
  font-size: 1.3rem;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(40, 14, 6, 0.85), 0 6px 12px rgba(0,0,0,0.3);
}

.battle-map-wallet {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  overflow: hidden;
}

.battle-settings-card {
  max-width: min(92vw, 420px);
}

.battle-settings-card .modal-actions {
  flex-direction: column;
}

.battle-settings-card .modal-btn {
  width: 100%;
  min-width: 0;
}

.battle-settings-note {
  margin: 0 0 14px;
  color: #f5e8c8;
  font-size: 0.9rem;
  line-height: 1.45;
}

.battle-age-card {
  max-width: min(92vw, 420px);
}

.battle-age-list {
  display: grid;
  gap: 9px;
  margin: 12px 0 4px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.battle-age-option {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 9px 10px;
  border: 2px solid rgba(255, 230, 154, 0.74);
  border-radius: 8px;
  background: linear-gradient(180deg, #174668, #0d2e48);
  color: #fff8d4;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 10px rgba(0,0,0,0.22);
}

.battle-age-option.active {
  border-color: #d6ffad;
  background: linear-gradient(180deg, #2f7d4b, #14532f);
}

.battle-age-option.locked {
  filter: grayscale(0.7);
  opacity: 0.62;
}

.bao-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.14);
  font-size: 1.25rem;
}

.bao-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bao-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.bao-main small,
.battle-age-option i {
  color: #ffeeb2;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.battle-level-editor {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  margin: 10px 0 14px;
  padding: 10px;
  border: 2px solid rgba(247, 201, 87, 0.76);
  border-radius: 14px;
  background: rgba(35, 13, 18, 0.52);
}

.battle-level-editor-screen {
  position: fixed;
  inset: 0;
  z-index: 2400;
  width: 100vw;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(74, 22, 36, 0.96), rgba(37, 13, 17, 0.98)),
    var(--ui-bg, #24130f);
  color: #fff8cf;
}

.battle-editor-page-topbar {
  display: grid;
  grid-template-columns: minmax(78px, auto) 1fr minmax(78px, auto);
  align-items: center;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  border-bottom: 3px solid rgba(247, 201, 87, 0.82);
  background: linear-gradient(180deg, #bc3851 0%, #86152f 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}

.battle-editor-title {
  min-width: 0;
  text-align: center;
}

.battle-editor-title h2 {
  margin: 0;
  color: #fff4b6;
  font-size: clamp(1.25rem, 5vw, 2rem);
  text-shadow: 0 2px 0 rgba(73, 24, 8, 0.9);
}

.battle-editor-title span {
  display: block;
  margin-top: 2px;
  color: #ffeeb2;
  font-size: 0.82rem;
  font-weight: 900;
}

.battle-editor-back-btn,
.battle-editor-apply-top {
  min-height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(255, 230, 154, 0.86);
  color: #fffbe8 !important;
  font-weight: 900;
}

.battle-editor-apply-top {
  background: linear-gradient(180deg, #176e3f 0%, #07381e 100%);
}

.battle-editor-page-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.battle-editor-level-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 12px;
  width: 100%;
  max-width: 1100px;
  padding: 10px;
  border: 2px solid rgba(247, 201, 87, 0.62);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.battle-editor-level-strip label {
  display: grid;
  gap: 6px;
  color: #fff6cf;
  font-weight: 900;
}

.battle-editor-level-picker {
  position: relative;
}

.battle-editor-native-level-select {
  display: none !important;
}

.battle-editor-level-trigger {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 10px;
  background: #fffdf4;
  color: #20120d;
  font-size: 1rem;
  font-weight: 1000;
  text-align: left;
}

.battle-editor-level-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-editor-level-trigger i {
  flex: 0 0 auto;
  color: #6b2a17;
  font-style: normal;
  font-size: 1.05rem;
}

.battle-editor-level-trigger[aria-expanded="true"] {
  border-color: rgba(211, 255, 224, 0.95);
  box-shadow: 0 0 0 3px rgba(211, 255, 224, 0.22);
}

.battle-editor-level-menu {
  position: absolute;
  z-index: 2600;
  top: calc(100% + 8px);
  left: 0;
  width: min(100%, 520px);
  max-height: min(64vh, 560px);
  overflow: auto;
  padding: 8px;
  border: 2px solid rgba(255, 230, 154, 0.86);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(96, 34, 46, 0.98), rgba(35, 16, 16, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255,255,255,0.12);
}

.battle-editor-level-menu[hidden] {
  display: none;
}

.battle-editor-level-option {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 220, 132, 0.3);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff7d2;
  text-align: left;
}

.battle-editor-level-option + .battle-editor-level-option {
  margin-top: 6px;
}

.battle-editor-level-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
  font-weight: 1000;
}

.battle-editor-level-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f8d884;
  font-size: 0.78rem;
  font-weight: 900;
}

.battle-editor-level-option.active {
  border-color: rgba(211, 255, 224, 0.86);
  background: linear-gradient(180deg, rgba(23, 110, 63, 0.56), rgba(7, 56, 30, 0.5));
}

.battle-editor-level-strip select {
  min-height: 42px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 10px;
  background: #fffdf4;
  color: #20120d;
  font-weight: 900;
}

.battle-editor-level-strip input {
  min-height: 42px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 10px;
  background: #fffdf4;
  color: #20120d;
  font-weight: 900;
}

.battle-editor-level-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1.2fr) minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 12px;
  border: 2px solid rgba(247, 201, 87, 0.66);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(111, 45, 32, 0.72), rgba(43, 20, 18, 0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.battle-editor-level-emblem {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px solid rgba(255, 230, 154, 0.76);
  background: rgba(0, 0, 0, 0.24);
  font-size: 2rem;
}

.battle-editor-level-copy,
.battle-editor-level-roster {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.battle-editor-level-copy span,
.battle-editor-level-roster span {
  color: #ffe9a8;
  font-size: 0.76rem;
  font-weight: 900;
}

.battle-editor-level-copy h3 {
  margin: 0;
  color: #fffdf2;
  font-size: clamp(1.15rem, 3vw, 1.75rem);
  letter-spacing: 0;
}

.battle-editor-level-copy p,
.battle-editor-level-roster b {
  margin: 0;
  color: #fff4cf;
  font-size: 0.9rem;
  line-height: 1.35;
}

.battle-editor-objective-strip {
  display: grid;
  grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1.45fr);
  gap: 10px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 10px;
  border: 2px solid rgba(247, 201, 87, 0.62);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.battle-editor-objective-strip label {
  display: grid;
  gap: 6px;
  color: #fff6cf;
  font-weight: 900;
}

.battle-editor-objective-strip select,
.battle-editor-objective-strip input {
  min-height: 42px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 10px;
  background: #fffdf4;
  color: #20120d;
  font-weight: 900;
}

.battle-unit-editor-side-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.battle-unit-side-tab {
  min-height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(255, 230, 154, 0.8);
  background: linear-gradient(180deg, #73432a 0%, #3b1b13 100%);
  color: #ffffff;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(45, 13, 8, 0.76);
}

.battle-unit-side-tab.active {
  background: linear-gradient(180deg, #176e3f 0%, #07381e 100%);
  border-color: rgba(211, 255, 224, 0.95);
}

.battle-level-editor-screen .battle-editor-grid {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.battle-editor-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 12px;
}

.battle-metric-card {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 2px solid rgba(247, 201, 87, 0.54);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.battle-metric-card.primary {
  background: linear-gradient(180deg, rgba(23, 110, 63, 0.55), rgba(7, 56, 30, 0.48));
  border-color: rgba(211, 255, 224, 0.78);
}

.battle-metric-card span,
.battle-metric-card small {
  color: #ffeeb2;
  font-size: 0.72rem;
  font-weight: 900;
}

.battle-metric-card strong {
  color: #fffdf2;
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  line-height: 1;
  letter-spacing: 0;
}

.battle-metric-card.text strong {
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  line-height: 1.12;
}

.battle-editor-rule-section {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 10px;
  border: 2px solid rgba(247, 201, 87, 0.54);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.battle-editor-rule-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.battle-editor-rule-section > header span,
.battle-editor-rule-candidates summary span {
  color: #ffe9a8;
  font-size: 0.78rem;
  font-weight: 900;
}

.battle-editor-rule-section h3 {
  margin: 0;
  color: #fffdf2;
  font-size: 1.08rem;
}

.battle-editor-reset-level {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 230, 154, 0.78);
  background: linear-gradient(180deg, #73432a 0%, #3b1b13 100%);
  color: #fffbe8;
  font-weight: 1000;
}

.battle-editor-rule-candidates summary {
  cursor: pointer;
  color: #fffdf2;
  font-weight: 1000;
  padding: 4px 2px 10px;
}

.battle-level-editor-screen .battle-editor-rule-row {
  grid-template-columns: minmax(170px, 1.35fr) minmax(120px, 0.95fr) minmax(136px, 1fr) repeat(5, minmax(82px, 0.75fr));
}

.battle-editor-rule-row.candidate {
  opacity: 0.86;
  background: rgba(255,255,255,0.05);
}

.battle-editor-unit-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
}

.battle-editor-unit-chip i {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  font-style: normal;
}

.battle-editor-unit-chip b,
.battle-editor-unit-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-editor-unit-chip b {
  color: #fff8d6;
  font-size: 0.88rem;
}

.battle-editor-unit-chip small {
  color: #f7d886;
  font-size: 0.68rem;
}

.battle-editor-stat-pair {
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px;
  border: 1px solid rgba(255, 220, 132, 0.32);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.battle-editor-stat-pair.strong {
  border-color: rgba(211, 255, 224, 0.52);
  background: rgba(23, 110, 63, 0.2);
}

.battle-editor-stat-pair span,
.battle-editor-stat-pair small {
  color: #ffeeb2;
  font-size: 0.68rem;
  font-weight: 900;
}

.battle-editor-stat-pair b {
  color: #fffdf2;
  font-size: 0.86rem;
}

.battle-editor-empty {
  padding: 16px;
  border: 1px dashed rgba(255, 220, 132, 0.5);
  border-radius: 10px;
  color: #ffeeb2;
  font-weight: 900;
  text-align: center;
}

.battle-level-editor-screen .battle-unit-editor-row {
  grid-template-columns: minmax(120px, 1.2fr) repeat(5, minmax(84px, 1fr));
}

.battle-unit-editor-row strong {
  align-self: center;
  color: #fff0a8;
  font-size: 0.95rem;
  text-shadow: 0 2px 0 rgba(55, 16, 7, 0.82);
}

.battle-unit-editor-summary {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.battle-unit-editor-summary span {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 9px 10px;
  border: 2px solid rgba(247, 201, 87, 0.5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.battle-unit-editor-summary b {
  color: #fffdf2;
  font-size: 1.18rem;
  line-height: 1;
}

.battle-unit-editor-summary small {
  color: #ffeeb2;
  font-size: 0.7rem;
  font-weight: 900;
}

.battle-unit-editor-filters {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(112px, 0.6fr) minmax(128px, 0.5fr) minmax(170px, 0.8fr) minmax(140px, 0.52fr);
  gap: 8px;
  align-items: stretch;
}

.battle-unit-editor-slot-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: center;
  padding: 8px;
  border: 2px solid rgba(247, 201, 87, 0.4);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.battle-unit-filter-chip,
.battle-unit-reset-visible,
.battle-unit-reset-unit {
  min-height: 34px;
  border: 2px solid rgba(255, 230, 154, 0.78);
  border-radius: 10px;
  background: linear-gradient(180deg, #73432a 0%, #3b1b13 100%);
  color: #fffbe8;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(45, 13, 8, 0.72);
}

.battle-unit-filter-chip {
  padding: 0 10px;
  font-size: 0.72rem;
}

.battle-unit-filter-chip.active {
  border-color: rgba(211, 255, 224, 0.95);
  background: linear-gradient(180deg, #176e3f 0%, #07381e 100%);
}

.battle-unit-editor-era-filter,
.battle-unit-editor-search,
.battle-unit-editor-changed-toggle {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 2px solid rgba(247, 201, 87, 0.4);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  color: #fff6cf;
  font-size: 0.72rem;
  font-weight: 900;
}

.battle-unit-editor-changed-toggle {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  align-content: center;
}

.battle-unit-editor-changed-toggle input {
  width: 20px;
  min-height: 20px;
}

.battle-unit-editor-era-filter select,
.battle-unit-editor-search input {
  min-width: 0;
  min-height: 34px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 8px;
  background: #fffdf4;
  color: #20120d;
  font-weight: 900;
}

.battle-unit-reset-visible {
  padding: 0 10px;
  background: linear-gradient(180deg, #245f9f 0%, #153d75 60%, #0b274d 100%);
  border-color: rgba(203, 232, 255, 0.96);
}

.battle-unit-editor-grid {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.battle-unit-editor-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 2px solid rgba(255, 220, 132, 0.36);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 30%),
    linear-gradient(180deg, rgba(58, 61, 52, 0.9), rgba(28, 37, 40, 0.96));
  box-shadow: 0 5px 0 rgba(31, 25, 30, 0.46), 0 10px 18px rgba(0,0,0,0.2);
}

.battle-unit-editor-card.changed {
  border-color: rgba(211, 255, 224, 0.75);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 30%),
    linear-gradient(180deg, rgba(30, 91, 61, 0.9), rgba(21, 50, 48, 0.96));
}

.battle-unit-editor-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.battle-unit-editor-art {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 238, 167, 0.55);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.battle-unit-editor-art .bb-unit-sprite {
  width: 66px;
  transform: translate(-50%, -50%) scale(0.84);
}

.battle-unit-editor-name {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.battle-unit-editor-name b {
  min-width: 0;
  overflow: hidden;
  color: #fff8d6;
  font-size: 0.98rem;
  font-weight: 1000;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-unit-editor-name small {
  min-width: 0;
  overflow: hidden;
  color: #f7d886;
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-unit-reset-unit {
  padding: 0 10px;
  white-space: nowrap;
}

.battle-unit-editor-tags,
.battle-unit-editor-readonly {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.battle-unit-editor-tags span,
.battle-unit-editor-readonly span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(255, 220, 132, 0.36);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  color: #ffeeb2;
  font-size: 0.66rem;
  font-weight: 900;
}

.battle-unit-editor-tags span {
  color: #fff6cf;
}

.battle-unit-editor-readonly b {
  margin-left: 4px;
  color: #fffdf2;
}

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

.battle-unit-stat-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(255, 220, 132, 0.32);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  color: #fff6cf;
  font-size: 0.7rem;
  font-weight: 900;
}

.battle-unit-stat-field.changed {
  border-color: rgba(211, 255, 224, 0.74);
  background: rgba(23, 110, 63, 0.22);
}

.battle-unit-stat-field span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.battle-unit-stat-field small {
  color: #f7d886;
  font-size: 0.58rem;
  line-height: 1.05;
}

.battle-unit-stat-field input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 8px;
  background: #fffdf4;
  color: #20120d;
  font-weight: 900;
}

.battle-level-editor[hidden] {
  display: none;
}

.battle-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.battle-editor-head label,
.battle-editor-row label {
  display: grid;
  gap: 4px;
  color: #fff6cf;
  font-size: 0.76rem;
  font-weight: 900;
}

.battle-editor-head select,
.battle-editor-row input {
  min-height: 34px;
  border: 2px solid rgba(255, 216, 123, 0.78);
  border-radius: 8px;
  background: #fffdf4;
  color: #20120d;
  font-weight: 900;
}

.battle-editor-head strong {
  color: #fff0a8;
  font-size: 0.85rem;
}

.battle-editor-grid {
  display: grid;
  gap: 8px;
}

.battle-editor-row {
  display: grid;
  grid-template-columns: minmax(82px, 1.2fr) repeat(5, minmax(58px, 1fr));
  gap: 6px;
  align-items: end;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 220, 132, 0.38);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
}

.battle-editor-enabled {
  align-self: center;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 6px !important;
}

.battle-editor-enabled input {
  width: 20px;
  min-height: 20px;
}

.battle-editor-apply-btn,
#modal-settings .battle-editor-btn,
#modal-settings .battle-unlock-all-btn {
  background: linear-gradient(180deg, #176e3f 0%, #0d4f2b 60%, #07381e 100%);
  color: #ffffff !important;
  border: 2px solid rgba(211, 255, 224, 0.96);
  text-shadow: 0 2px 0 rgba(0, 45, 18, 0.9), 0 3px 8px rgba(0,0,0,0.48);
}

#modal-settings .battle-unlock-all-btn {
  background: linear-gradient(180deg, #245f9f 0%, #153d75 60%, #0b274d 100%);
  border-color: rgba(203, 232, 255, 0.96);
}

.settings-battle-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid rgba(221, 168, 72, 0.55);
}

.settings-battle-section h3 {
  margin: 0 0 8px;
  color: #fff0b8;
  font-size: 1.08rem;
  text-shadow: 0 2px 0 rgba(43, 15, 8, 0.85);
}

.settings-battle-section .battle-quick-clear-setting {
  margin-bottom: 10px;
  padding: 8px 0 12px;
}

.settings-battle-actions {
  display: grid;
  gap: 10px;
}

@media (max-width: 560px) {
  .battle-level-editor-screen .battle-editor-page-topbar {
    grid-template-columns: 52px 1fr 76px;
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) 8px 10px;
  }

  .battle-level-editor-screen .battle-editor-title h2 {
    font-size: 1.35rem;
  }

  .battle-level-editor-screen .battle-editor-back-btn,
  .battle-level-editor-screen .battle-editor-apply-top {
    min-height: 40px;
    padding: 0 8px;
  }

  .battle-level-editor-screen .battle-editor-page-body {
    padding: 10px 8px 14px;
  }

  .battle-level-editor-screen .battle-editor-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .battle-level-editor-screen .battle-editor-enabled {
    grid-column: 1 / -1;
  }

  .battle-level-editor-screen .battle-editor-level-card,
  .battle-level-editor-screen .battle-editor-objective-strip {
    grid-template-columns: 1fr;
  }

  .battle-level-editor-screen .battle-editor-level-emblem {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
  }

  .battle-level-editor-screen .battle-editor-stat-pair {
    min-height: 46px;
  }

  .battle-level-editor-screen .battle-editor-rule-section > header {
    align-items: stretch;
    flex-direction: column;
  }

  .battle-level-editor-screen .battle-editor-row input,
  .battle-level-editor-screen .battle-editor-level-strip select,
  .battle-level-editor-screen .battle-editor-level-strip input {
    width: 100%;
    min-width: 0;
  }

  .battle-level-editor-screen .battle-editor-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-level-editor-screen .battle-editor-level-strip,
  .battle-unit-editor-side-tabs {
    grid-template-columns: 1fr;
  }

  .battle-unit-editor-summary,
  .battle-unit-editor-filters,
  .battle-unit-editor-grid {
    grid-template-columns: 1fr;
  }

  .battle-unit-editor-card-head {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .battle-unit-reset-unit {
    grid-column: 1 / -1;
  }

  .battle-unit-editor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.battle-reset-btn {
  background: linear-gradient(180deg, #7f1d1d 0%, #3f1111 100%);
  color: #fffbe8 !important;
  border: 2px solid rgba(255, 205, 165, 0.9);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.65);
}

.battle-map-wallet .bm-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
  height: 26px;
  padding: 0 4px 0 7px;
  border: 1.5px solid rgba(13, 40, 24, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #16314a, #0e2236);
  color: #fff8cf;
  font-size: 0.74rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

.battle-map-wallet .bm-pill b {
  min-width: 0;
  max-width: clamp(92px, 38vw, 220px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.battle-map-wallet .bm-coins {
  flex: 1 1 auto;
  max-width: 100%;
}

.battle-map-wallet .bm-coins b {
  flex: 1 1 auto;
}

/* Star progress row */
.bm-star-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bm-star-label {
  color: #eafaff;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(10, 38, 58, 0.85);
}

.bm-star-icon { font-size: 0.95rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }

.bm-star-bar {
  flex: 1 1 auto;
  height: 13px;
  border-radius: 999px;
  background: rgba(8, 26, 40, 0.62);
  border: 1px solid rgba(255,255,255,0.22);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

.bm-star-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #c4ff7a, #7cc92f 60%, #4f9a1d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  transition: width 0.4s ease;
}

.bm-star-count {
  color: #fff7c8;
  font-size: 0.72rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bm-star-chest { font-size: 1.1rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }

.battle-map-scroll {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}

.battle-map-scroll.dragging {
  cursor: grabbing;
}

.battle-map-path {
  position: relative;
  width: 560px;
  max-width: none;
  margin: 0 auto;
  --battle-map-zoom: 1;
}

.battle-map-world {
  position: relative;
  width: 560px;
  height: 1800px;
  transform: scale(var(--battle-map-zoom));
  transform-origin: 0 0;
}

.battle-conquest-scroll {
  padding: 0;
  touch-action: pan-y;
  background:
    linear-gradient(rgba(130, 204, 82, 0.08), rgba(48, 135, 70, 0.08)),
    url("assets/battle-map/terrain-meadow-vertical-loop.webp") center top / cover repeat-y,
    linear-gradient(180deg, #91d76c, #67bf62 58%, #388a56);
}

.battle-city-panel[hidden],
.battle-barracks-panel[hidden],
.battle-tech-panel[hidden],
.battle-codex-panel[hidden],
.battle-map-scroll[hidden] {
  display: none !important;
}

.battle-run-setup-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  background:
    linear-gradient(rgba(22, 41, 47, 0.76), rgba(22, 41, 47, 0.82)),
    radial-gradient(110% 80% at 50% 0%, rgba(217, 98, 107, 0.38), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(43, 152, 170, 0.32), transparent 58%);
}

.battle-run-card {
  position: relative;
  width: min(100%, 560px);
  margin: auto;
  padding: 16px 14px 14px;
  border: 3px solid color-mix(in srgb, var(--deck-color, #1da4e8) 42%, #d8f4ff);
  border-radius: 10px;
  background: rgba(42, 65, 68, 0.96);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.38);
}

.battle-run-card::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid #ff4b45;
}

.battle-run-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 0 auto 16px;
  width: min(100%, 360px);
}

.battle-run-mode {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff5a52, #e83d36);
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(26, 29, 31, 0.72);
}

.battle-run-mode.disabled {
  opacity: 0.33;
  filter: grayscale(0.55);
}

.battle-run-config {
  display: grid;
  grid-template-columns: 44px 96px minmax(0, 1fr) 18px 44px;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 8px;
  border-radius: 8px;
  background: rgba(20, 38, 42, 0.92);
  box-shadow: inset 0 0 0 2px rgba(9, 24, 27, 0.54);
}

.battle-run-arrow {
  width: 36px;
  height: 100%;
  min-height: 68px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff5951, #e83a34);
  color: #ffffff !important;
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(24, 18, 19, 0.55);
}

.battle-run-deck-card {
  position: relative;
  width: 86px;
  aspect-ratio: 0.7;
  border-radius: 8px;
  background: #f9fbff;
  padding: 7px;
  box-shadow: 0 5px 0 rgba(12, 18, 20, 0.72);
}

.battle-run-card-back {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 12%, #20a8e8 13% 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.92) 0 3px, transparent 3px 8px),
    linear-gradient(135deg, color-mix(in srgb, var(--deck-color, #1da4e8) 70%, #ffffff), var(--deck-color, #1da4e8));
  border: 3px solid color-mix(in srgb, var(--deck-color, #1da4e8) 84%, #000000);
}

.battle-run-card-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe8a6, #d59a4d);
  color: color-mix(in srgb, var(--deck-color, #1da4e8) 72%, #3b2108);
  font-weight: 900;
}

.battle-run-info-card {
  height: 136px;
  border-radius: 7px;
  overflow: hidden;
  background: #eef4f3;
  color: #28383b;
  box-shadow: inset 0 0 0 1px rgba(13, 24, 29, 0.14);
  display: grid;
  grid-template-rows: auto 1fr;
}

.battle-run-info-card h2,
.battle-run-info-card h3 {
  margin: 0;
  padding: 8px 12px;
  background: #263f40;
  color: #ffffff;
  text-align: center;
  font-size: 1.05rem;
}

.battle-run-info-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 7px 10px;
  text-align: center;
  font-weight: 800;
  gap: 4px;
  overflow: hidden;
}

.battle-run-info-body strong {
  display: block;
  max-width: 100%;
  font-size: 0.82rem;
  line-height: 1.14;
}

.battle-run-info-body span {
  display: block;
  max-width: 100%;
  color: #2875a4;
  font-weight: 900;
  font-size: 0.74rem;
  line-height: 1.16;
}

.battle-run-palette {
  display: grid;
  gap: 3px;
}

.battle-run-palette span {
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: var(--swatch);
  border: 1px solid rgba(255,255,255,0.45);
}

.battle-run-stake {
  grid-template-columns: 44px 62px minmax(0, 1fr) 44px;
}

.battle-run-stake .battle-run-arrow:last-child {
  grid-column: 4;
}

.battle-run-chip {
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(var(--stake-color, #c58a45) 0 12%, #fff4d1 12% 24%, color-mix(in srgb, var(--stake-color, #c58a45) 70%, #5a341a) 24% 36%, #fff4d1 36% 48%, var(--stake-color, #c58a45) 48% 62%, #fff4d1 62% 75%, color-mix(in srgb, var(--stake-color, #c58a45) 70%, #5a341a) 75% 88%, #fff4d1 88% 100%);
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--stake-color, #c58a45) 76%, #ffffff), 0 4px 0 rgba(12,18,20,0.55);
}

.battle-run-info-card.compact {
  height: 90px;
}

.battle-run-info-card.compact .battle-run-info-body {
  min-height: 0;
  gap: 3px;
}

.battle-run-info-card.compact .battle-run-info-body span {
  color: #6a787c;
  font-size: 0.78rem;
}

.battle-run-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px 52px;
  color: #dce9e7;
  font-size: 0.8rem;
  font-weight: 800;
}

.battle-run-toggle {
  width: 24px;
  height: 24px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(27,45,48,0.9);
}

.battle-run-start-btn,
.battle-run-return-btn {
  display: block;
  width: min(100%, 320px);
  min-height: 56px;
  margin: 0 auto 10px;
  border: 0;
  border-radius: 8px;
  color: #ffffff !important;
  font-size: 1.42rem;
  font-weight: 950;
  box-shadow: 0 5px 0 rgba(14, 24, 28, 0.74);
}

.battle-run-start-btn {
  background: linear-gradient(180deg, #1daeff, #0787df);
}

.battle-run-return-btn {
  width: 100%;
  min-height: 42px;
  margin-bottom: 0;
  background: linear-gradient(180deg, #ffad1c, #ec8b00);
  font-size: 1rem;
}

@media (max-width: 430px) {
  .battle-run-card {
    padding: 14px 10px 12px;
  }
  .battle-run-mode-row {
    gap: 8px;
  }
  .battle-run-config {
    grid-template-columns: 34px 76px minmax(0, 1fr) 14px 34px;
    gap: 7px;
  }
  .battle-run-arrow {
    width: 30px;
    min-height: 62px;
  }
  .battle-run-deck-card {
    width: 72px;
  }
  .battle-run-info-card h2,
  .battle-run-info-card h3 {
    font-size: 0.92rem;
  }
  .battle-run-info-body {
    padding: 7px 8px;
  }
  .battle-run-stake {
    grid-template-columns: 34px 46px minmax(0, 1fr) 34px;
  }
  .battle-run-chip {
    width: 42px;
  }
}

.battle-city-panel,
.battle-barracks-panel,
.battle-tech-panel,
.battle-codex-panel {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px 18px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.battle-codex-header {
  width: min(100%, 560px);
  margin: 0 auto 8px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid rgba(255, 226, 119, 0.7);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(36, 78, 75, 0.94), rgba(17, 38, 45, 0.97));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 4px 10px rgba(0,0,0,0.24);
}

.battle-codex-header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.battle-codex-kicker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 231, 147, 0.64);
  border-radius: 999px;
  background: rgba(24, 16, 18, 0.42);
  color: #fff0a8;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,0.55);
}

.battle-codex-header h2 {
  min-width: 0;
  margin: 0;
  color: #ffffff;
  font-size: 1.02rem;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(30, 16, 12, 0.72);
}

.battle-codex-count {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid rgba(255, 231, 147, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #176e3f 0%, #07381e 100%);
  color: #fff7c2;
  font-size: 0.68rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 0 rgba(12, 23, 18, 0.68);
}

.battle-codex-note {
  width: min(100%, 560px);
  min-height: 28px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(255, 231, 147, 0.45);
  border-radius: 8px;
  background: rgba(17, 38, 45, 0.8);
  color: #d9ecf5;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.battle-codex-tabs {
  width: min(100%, 560px);
  margin: 0 auto 8px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(255, 231, 147, 0.42);
  border-radius: 12px;
  background: rgba(14, 32, 39, 0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.2);
}

.battle-codex-tab {
  min-width: 0;
  min-height: 34px;
  padding: 0 6px;
  border: 2px solid rgba(255, 230, 154, 0.66);
  border-radius: 9px;
  background: linear-gradient(180deg, #73432a 0%, #3b1b13 100%);
  color: #fffbe8;
  font-weight: 900;
  font-size: 0.78rem;
  text-shadow: 0 2px 0 rgba(45, 13, 8, 0.76);
}

.battle-codex-tab.active {
  border-color: rgba(211, 255, 224, 0.95);
  background: linear-gradient(180deg, #176e3f 0%, #07381e 100%);
  color: #fff7c2;
}

.battle-codex-grid {
  width: min(100%, 560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 7px;
}

.battle-codex-card {
  position: relative;
  display: grid;
  grid-template-rows: 46px minmax(24px, auto);
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 84px;
  padding: 6px;
  border: 2px solid rgba(247, 201, 87, 0.78);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(37, 71, 67, 0.96), rgba(24, 30, 35, 0.98));
  color: #ffffff;
  box-shadow: 0 3px 0 rgba(37, 17, 10, 0.7), inset 0 -4px 0 rgba(0,0,0,0.16);
  text-align: center;
}

.battle-codex-card::before,
.battle-codex-card::after,
.battle-codex-tab::before,
.battle-codex-tab::after {
  display: none !important;
}

.battle-codex-card.boss {
  border-color: rgba(255, 231, 126, 0.95);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #5a3428, #251516);
}

.battle-codex-card.locked {
  border-color: rgba(176, 190, 196, 0.58);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #3a4649, #262d31);
  filter: grayscale(0.28);
  opacity: 0.82;
}

.battle-codex-icon {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 238, 167, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 246, 199, 0.82), rgba(209, 224, 198, 0.7) 48%, rgba(49, 83, 74, 0.78) 100%);
  overflow: hidden;
  font-size: 1.25rem;
  line-height: 1;
}

.battle-codex-icon .bb-unit-sprite {
  width: 66px;
  max-width: 116%;
}

.battle-codex-detail-art .bb-unit-sprite {
  width: min(44vw, 230px);
  max-width: none;
}

.bb-unit-portrait-shell {
  position: absolute;
  inset: 7px;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bb-unit-portrait {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,0.34));
}

.bb-unit-portrait-fallback {
  width: min(44vw, 230px);
  max-width: none;
}

.bb-unit-portrait-fallback[hidden] {
  display: none !important;
}

.battle-codex-card b {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #fff4c8;
  font-size: 0.64rem;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.72);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.battle-codex-class-card {
  grid-template-rows: 52px minmax(28px, auto) minmax(18px, auto);
  min-height: 118px;
}

.battle-codex-class-card small {
  min-width: 0;
  overflow: hidden;
  color: #c9e8dd;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-codex-boss-crown {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff2a7, #d99c35);
  color: #4a2108;
  border: 2px solid #fff6c7;
  box-shadow: 0 2px 0 rgba(69, 35, 0, 0.55);
  font-style: normal;
  font-weight: 900;
  font-size: 0.76rem;
}

.battle-codex-order {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  padding: 2px 4px;
  border: 1px solid rgba(255, 246, 191, 0.74);
  border-radius: 999px;
  background: rgba(22, 38, 35, 0.78);
  color: #fff4b8;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.battle-codex-detail-card {
  position: relative;
  width: min(94vw, 560px);
  max-width: 560px;
  max-height: min(88vh, 640px);
  padding: 16px;
  border: 2px solid rgba(255, 226, 119, 0.7);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(36, 78, 75, 0.98), rgba(14, 31, 38, 0.99));
  color: #ffffff;
  overflow: auto;
}

.battle-codex-detail-card.is-level-detail {
  width: min(96vw, 720px);
  max-width: 720px;
}

.battle-codex-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 238, 167, 0.95);
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #3b1608;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(89, 39, 12, 0.8);
}

.battle-codex-detail-layout {
  display: grid;
  grid-template-columns: minmax(108px, min(34vw, 180px)) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-right: 28px;
}

.battle-codex-detail-layout.is-level {
  grid-template-columns: minmax(116px, 180px) minmax(0, 1fr);
  gap: 14px;
}

.battle-codex-detail-hero {
  min-width: 0;
}

.battle-codex-detail-art {
  position: relative;
  width: min(34vw, 180px);
  min-width: 108px;
  height: min(25vh, 178px);
  min-height: 136px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 238, 167, 0.78);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 246, 199, 0.9), rgba(209, 224, 198, 0.74) 48%, rgba(49, 83, 74, 0.82) 100%);
  overflow: hidden;
  font-size: 3rem;
}

.battle-codex-level-island {
  display: block;
  width: 112%;
  height: 112%;
  object-fit: contain;
  filter: drop-shadow(0 9px 8px rgba(0, 20, 44, 0.36));
}

.battle-codex-detail-main {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.battle-codex-detail-title {
  min-width: 0;
}

.battle-codex-detail-title h3 {
  margin: 0;
  color: #fff4c8;
  font-size: clamp(1.06rem, 4.2vw, 1.35rem);
  line-height: 1.12;
  text-shadow: 0 2px 0 rgba(30, 16, 12, 0.72);
}

.battle-codex-detail-title p,
.battle-codex-detail-note,
.battle-codex-detail-locked p {
  color: #d9ecf5;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.42;
}

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

.battle-codex-detail-stats span {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid rgba(255, 231, 147, 0.38);
  border-radius: 8px;
  background: rgba(11, 24, 30, 0.62);
  color: #c9e8dd;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 900;
}

.battle-codex-detail-stats b {
  display: block;
  margin-top: 3px;
  color: #fff4c8;
  font-size: 0.78rem;
}

.battle-codex-level-spawns {
  display: grid;
  gap: 7px;
}

.battle-codex-stage-list {
  display: grid;
  gap: 7px;
}

.battle-codex-stage-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 231, 147, 0.34);
  border-radius: 8px;
  background: rgba(11, 24, 30, 0.56);
  color: #ffffff;
  text-align: left;
}

.battle-codex-stage-row.selected {
  border-color: rgba(211, 255, 224, 0.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 34%),
    rgba(24, 78, 58, 0.78);
  box-shadow: inset 0 0 0 1px rgba(211, 255, 224, 0.26);
}

.battle-codex-stage-row.locked {
  opacity: 0.72;
  filter: grayscale(0.25);
}

.battle-codex-stage-art {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 238, 167, 0.14);
  overflow: hidden;
}

.battle-codex-stage-art .bb-unit-sprite {
  width: 52px;
}

.battle-codex-stage-art .bb-unit-portrait-shell {
  inset: 3px;
}

.battle-codex-stage-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.battle-codex-stage-main b,
.battle-codex-stage-main small,
.battle-codex-stage-main i {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-codex-stage-main b {
  color: #fff4c8;
  font-size: 0.78rem;
}

.battle-codex-stage-main small {
  color: #c9e8dd;
  font-size: 0.66rem;
  font-weight: 850;
}

.battle-codex-stage-main i {
  color: #f4e7c8;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.battle-codex-preview-panel {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(211, 255, 224, 0.42);
  border-radius: 8px;
  background: rgba(9, 31, 34, 0.7);
}

.battle-codex-preview-panel b {
  min-width: 0;
  overflow: hidden;
  color: #fff4c8;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-codex-preview-panel span,
.battle-codex-preview-panel i,
.battle-codex-preview-panel em {
  color: #d9ecf5;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.3;
}

.battle-codex-preview-panel i,
.battle-codex-preview-panel em {
  color: #f4e7c8;
}

.battle-codex-level-spawns h4 {
  margin: 0;
  color: #fff4c8;
  font-size: 0.86rem;
  line-height: 1.15;
}

.battle-codex-level-empty,
.battle-codex-level-spawn {
  border: 1px solid rgba(255, 231, 147, 0.34);
  border-radius: 8px;
  background: rgba(11, 24, 30, 0.56);
}

.battle-codex-level-empty {
  padding: 10px;
  color: #d9ecf5;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
}

.battle-codex-level-spawn {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 58px;
  padding: 8px;
}

.battle-codex-level-spawn-art {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 238, 167, 0.14);
  overflow: hidden;
}

.battle-codex-level-spawn-art .bb-unit-sprite {
  width: 52px;
}

.battle-codex-level-spawn-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.battle-codex-level-spawn-main > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-codex-level-spawn-main b {
  color: #fff4c8;
  font-size: 0.78rem;
}

.battle-codex-level-spawn-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 5px;
}

.battle-codex-level-spawn-metrics small {
  min-width: 0;
  padding: 5px 6px;
  border-radius: 7px;
  background: rgba(255, 238, 167, 0.11);
  color: #d9ecf5;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.25;
}

.battle-codex-level-spawn-metrics b {
  display: block;
  margin-top: 2px;
  color: #fff0a8;
  font-size: 0.72rem;
}

.battle-codex-detail-locked {
  padding: 22px 8px 6px;
  text-align: center;
}

.battle-codex-detail-locked b {
  color: #fff4c8;
  font-size: 1.1rem;
}

@media (min-width: 460px) {
  .battle-codex-detail-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .battle-codex-detail-layout.is-level {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .battle-codex-detail-layout.is-level .battle-codex-detail-hero {
    justify-self: center;
  }

  .battle-codex-detail-layout.is-level .battle-codex-detail-art {
    width: min(64vw, 180px);
    min-height: 120px;
    height: min(22vh, 150px);
  }
}

@media (max-width: 360px) {
  .battle-codex-detail-layout {
    grid-template-columns: minmax(104px, 35vw) minmax(0, 1fr);
    gap: 9px;
  }

  .battle-codex-detail-art {
    width: 35vw;
    min-width: 104px;
    min-height: 130px;
  }

  .battle-codex-detail-stats {
    gap: 5px;
  }
}

@media (max-height: 520px) {
  .battle-codex-panel {
    padding-top: 6px;
  }

  .battle-codex-header,
  .battle-codex-note {
    display: none;
  }

  .battle-codex-tabs {
    margin-bottom: 6px;
  }

  .battle-codex-tab {
    min-height: 30px;
    font-size: 0.72rem;
  }

  .battle-codex-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
  }

  .battle-codex-card {
    grid-template-rows: 30px minmax(15px, auto);
    gap: 3px;
    min-height: 56px;
    padding: 4px;
  }

  .battle-codex-icon {
    height: 30px;
    font-size: 1rem;
  }

  .battle-codex-icon .bb-unit-sprite {
    width: 46px;
  }

  .battle-codex-card b {
    font-size: 0.56rem;
    line-height: 1.05;
  }

  .battle-codex-boss-crown {
    width: 17px;
    height: 17px;
    border-width: 1px;
    font-size: 0.64rem;
  }
}

.battle-tech-tree {
  width: min(100%, 560px);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.battle-tech-branch {
  padding: 10px;
  border: 1px solid rgba(255, 231, 147, 0.55);
  border-radius: 8px;
  background: rgba(16, 35, 43, 0.9);
}

.battle-tech-branch h3 {
  margin: 0 0 8px;
  color: #fff0a7;
  font-size: 0.92rem;
}

.battle-tech-nodes {
  display: grid;
  gap: 7px;
}

.battle-tech-node {
  width: 100%;
  min-height: 58px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(126, 196, 255, 0.7);
  border-radius: 8px;
  background: linear-gradient(180deg, #245d82, #153b59);
  color: #ffffff;
  text-align: left;
}

.battle-tech-node::before,
.battle-tech-node::after {
  display: none !important;
}

.battle-tech-node.unlocked {
  border-color: #ffe16b;
  background: linear-gradient(180deg, #356b39, #1d4725);
}

.battle-tech-node:disabled:not(.unlocked) {
  border-color: #59666c;
  background: #303a3f;
  color: #d1d5db;
  opacity: 0.76;
}

.tech-node-icon { font-size: 1.35rem; text-align: center; }
.tech-node-copy { min-width: 0; display: grid; gap: 3px; }
.tech-node-copy b { font-size: 0.82rem; }
.tech-node-copy small { font-size: 0.68rem; color: #d9ecf5; }
.tech-node-cost {
  color: #fff3a6;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.battle-tech-reset {
  display: block;
  width: min(240px, 72%);
  margin: 14px auto 4px;
  padding: 10px 14px;
  border: 2px solid #ffd6d6;
  border-radius: 8px;
  background: #7f1d1d;
  color: #ffffff;
  font-weight: 900;
}

.battle-tech-page-tabs {
  width: min(100%, 560px);
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.battle-tech-page-tab {
  min-height: 42px;
  border: 2px solid rgba(255, 230, 154, 0.86);
  border-radius: 12px;
  background: linear-gradient(180deg, #73432a 0%, #3b1b13 100%);
  color: #fffbe8;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(45, 13, 8, 0.76);
}

.battle-tech-page-tab.active {
  background: linear-gradient(180deg, #176e3f 0%, #07381e 100%);
  border-color: rgba(211, 255, 224, 0.95);
}

.battle-tech-page-board {
  display: block;
}

.battle-tech-page-board .battle-tech-branch {
  min-height: 430px;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 2px solid rgba(255, 231, 147, 0.62);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 238, 160, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(20, 44, 56, 0.92), rgba(12, 25, 32, 0.96));
}

.battle-tech-page-board .battle-tech-branch h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-bottom: 8px;
  color: #fff0a8;
  text-align: center;
}

.battle-tech-page-board .battle-tech-nodes {
  min-height: 0;
}

.battle-tech-tree-map {
  position: relative;
  width: min(100%, 500px);
  height: 500px;
  margin: 0 auto;
  padding: 0;
  border: 2px solid rgba(255, 231, 147, 0.45);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 84%, rgba(255, 232, 126, 0.18), transparent 18%),
    radial-gradient(circle at 28% 24%, rgba(107, 200, 255, 0.13), transparent 20%),
    radial-gradient(circle at 72% 24%, rgba(134, 255, 174, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(19, 45, 55, 0.94), rgba(9, 22, 30, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 -24px 38px rgba(0,0,0,0.22);
}

.battle-tech-tree-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.battle-tech-tree-link {
  fill: none;
  stroke: rgba(121, 151, 160, 0.82);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.36));
}

.battle-tech-tree-link.available {
  stroke: rgba(255, 223, 116, 0.92);
  stroke-width: 3.2;
}

.battle-tech-tree-link.unlocked {
  stroke: rgba(129, 255, 166, 0.96);
  stroke-width: 3.6;
  filter: drop-shadow(0 0 5px rgba(115, 255, 162, 0.45));
}

.battle-tech-page-board .battle-tech-node {
  position: relative;
  width: 68px;
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 2px;
  padding: 6px;
  border: 3px solid rgba(247, 201, 87, 0.86);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #5a3428, #251516);
  box-shadow: 0 4px 0 rgba(37, 17, 10, 0.82), inset 0 -5px 0 rgba(0,0,0,0.22);
  text-align: center;
}

.battle-tech-page-board .battle-tech-tree-node {
  position: absolute;
  left: var(--tech-x);
  top: var(--tech-y);
  z-index: 2;
  width: clamp(96px, 24%, 128px);
  min-height: 66px;
  --okey-button-depth: 2px;
  --okey-button-press-depth: 1px;
  --okey-button-hover-y: 0px;
  --okey-button-hover-scale: 1.01;
  --okey-button-press-scale: 0.99;
  transform: translate(-50%, -50%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.battle-tech-page-board .battle-tech-tree-node.okey-button:hover:not(:disabled):not(.is-disabled) {
  transform: translate(-50%, -50%) translateY(-1px) scale(1.01);
}

.battle-tech-page-board .battle-tech-tree-node.okey-button:active:not(:disabled):not(.is-disabled),
.battle-tech-page-board .battle-tech-tree-node.okey-button.is-pressing:not(:disabled):not(.is-disabled) {
  transform: translate(-50%, -50%) translateY(1px) scale(0.99);
}

.battle-tech-page-board .battle-tech-tree-node.branch-root {
  width: clamp(106px, 27%, 138px);
}

.battle-tech-page-board .battle-tech-tree-node.branch-trunk {
  width: clamp(112px, 28%, 144px);
}

.battle-tech-page-board .battle-tech-tree-node.branch-crown {
  width: clamp(112px, 28%, 144px);
}

.battle-tech-page-board .battle-tech-node.linked::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 6px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a8, #be8130);
  box-shadow: 0 0 8px rgba(255, 223, 112, 0.42);
}

.battle-tech-page-board .battle-tech-node.ready {
  border-color: rgba(211, 255, 224, 0.95);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #245d82, #153b59);
}

.battle-tech-page-board .battle-tech-node.unlocked {
  border-color: #ffe16b;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #356b39, #1d4725);
}

.battle-tech-page-board .battle-tech-node.not-implemented {
  filter: grayscale(0.85);
  opacity: 0.68;
}

.battle-tech-page-board .tech-node-icon {
  font-size: 1.65rem;
  line-height: 1;
}

.battle-tech-page-board .tech-node-title {
  max-width: 100%;
  overflow: hidden;
  color: #fffbe8;
  font-size: 0.64rem;
  font-weight: 1000;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-tech-page-board .tech-node-cost {
  min-width: 22px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(23, 9, 12, 0.66);
  color: #fff3a6;
  font-size: 0.7rem;
}

.battle-tech-detail-modal[hidden] {
  display: none !important;
}

.battle-tech-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(38, 7, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.battle-tech-detail-modal.visible {
  opacity: 1;
}

.battle-tech-detail-card {
  position: relative;
  width: min(100%, 420px);
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 4px solid var(--ui-gold, #f0c85a);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 232, 143, 0.14), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(180, 34, 62, 0.97) 0%, rgba(125, 24, 52, 0.98) 58%, rgba(70, 10, 31, 0.99) 100%);
  color: #fff7d5;
  box-shadow: var(--ui-gold-frame, 0 8px 0 rgba(75, 37, 12, 0.88), 0 24px 44px rgba(0,0,0,0.48));
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.battle-tech-detail-modal.visible .battle-tech-detail-card {
  transform: scale(1);
}

.battle-tech-detail-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 231, 147, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #8f4331 0%, #5d211c 58%, #351112 100%);
  color: #fff7d5;
  font-size: 1.25rem;
  font-weight: 900;
}

.battle-tech-detail-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-right: 30px;
}

.battle-tech-detail-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 3px solid #f7d46a;
  border-radius: 14px;
  background: linear-gradient(135deg, #75d8ff, #113453);
  font-size: 2rem;
  box-shadow: 0 0 0 2px rgba(39, 18, 7, 0.95), inset 0 -6px 0 rgba(0,0,0,0.22);
}

.battle-tech-detail-head span {
  color: #bff0ff;
  font-size: 0.72rem;
  font-weight: 900;
}

.battle-tech-detail-head h3 {
  margin: 2px 0 4px;
  color: #fff4b6;
  font-size: 1.25rem;
  text-shadow: 0 2px 0 rgba(38, 12, 12, 0.75);
}

.battle-tech-detail-head p {
  margin: 0;
  color: #f3e6cc;
  font-size: 0.84rem;
  line-height: 1.4;
}

.battle-tech-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.battle-tech-detail-meta span {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(18, 12, 28, 0.62);
  color: #f5ddb1;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.battle-tech-detail-meta b {
  display: block;
  margin-top: 3px;
  color: #fffdf2;
}

.battle-tech-buy-btn {
  min-height: 48px;
  border: 2px solid rgba(211, 255, 224, 0.96);
  border-radius: 10px;
  background: linear-gradient(180deg, #237a35, #145625);
  color: #ffffff;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0, 45, 18, 0.9);
}

.battle-tech-buy-btn:disabled {
  border-color: rgba(197, 199, 203, 0.7);
  background: linear-gradient(180deg, #58616b, #2a3037);
  color: #f3f4f6;
}

@media (max-width: 560px) {
  .battle-tech-page-board .battle-tech-branch {
    min-height: 380px;
  }

  .battle-tech-page-board .battle-tech-node {
    width: 62px;
    min-height: 62px;
  }

  .battle-tech-tree-map {
    height: 470px;
  }

  .battle-tech-page-board .battle-tech-tree-node {
    width: 92px;
    min-height: 62px;
  }

  .battle-tech-page-board .battle-tech-tree-node.branch-trunk,
  .battle-tech-page-board .battle-tech-tree-node.branch-root,
  .battle-tech-page-board .battle-tech-tree-node.branch-crown {
    width: 100px;
  }

  .battle-tech-page-board .tech-node-title {
    font-size: 0.62rem;
  }

  .battle-tech-detail-meta {
    grid-template-columns: 1fr;
  }
}

.bo-revive-note {
  margin-top: 7px;
  color: #ffe48a;
  font-weight: 800;
}

.battle-revive-btn {
  background: linear-gradient(180deg, #237a35, #145625) !important;
  color: #ffffff !important;
  border-color: #dcfce7 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}

.battle-outcome-back-btn {
  background: linear-gradient(180deg, #334155, #111827) !important;
  color: #ffffff !important;
  border: 2px solid #dbeafe !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.82);
}

.battle-outcome-back-btn::before,
.battle-outcome-back-btn::after {
  display: none !important;
}

.bb-summary {
  width: min(100%, 560px);
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bb-summary-item {
  min-width: 0;
  padding: 9px 7px;
  border: 2px solid rgba(255, 226, 119, 0.58);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(29, 58, 66, 0.86), rgba(21, 38, 45, 0.94));
  color: #fce9af;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 4px 10px rgba(0,0,0,0.22);
}

.bb-summary-item span,
.bb-summary-item b {
  display: block;
  line-height: 1.05;
}

.bb-summary-item span {
  margin-bottom: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #c9e8dd;
}

.bb-summary-item b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.bb-roster {
  width: min(100%, 560px);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.bb-army-overview {
  display: grid;
  gap: 10px;
}

.bb-army-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  color: #ffffff;
}

.bb-army-header span {
  display: block;
  margin-bottom: 2px;
  color: #9ee9ff;
  font-size: 0.68rem;
  font-weight: 900;
}

.bb-army-header h3 {
  margin: 0;
  color: #fff4c8;
  font-size: 1rem;
}

.bb-army-header b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255, 231, 147, 0.62);
  border-radius: 8px;
  background: rgba(16, 35, 43, 0.82);
  color: #fff4c8;
  font-size: 0.68rem;
}

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

.bb-class-grid {
  display: grid;
  gap: 9px;
}

.bb-class-card {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid rgba(255, 231, 147, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 32%),
    linear-gradient(180deg, rgba(34, 75, 75, 0.95), rgba(17, 38, 45, 0.98));
  color: #ffffff;
  box-shadow: 0 3px 0 rgba(37, 17, 10, 0.58), inset 0 -4px 0 rgba(0,0,0,0.14);
  text-align: left;
}

.bb-class-card:active {
  transform: translateY(1px);
}

.bb-class-card::before,
.bb-class-card::after {
  display: none !important;
}

.bb-class-card.is-skill {
  border-color: rgba(125, 211, 252, 0.76);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 230, 150, 0.15), transparent 38%),
    linear-gradient(180deg, rgba(30, 84, 91, 0.96), rgba(23, 39, 59, 0.98));
}

.bb-class-top {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.bb-class-top > b {
  padding: 4px 7px;
  border: 1px solid rgba(255, 231, 147, 0.52);
  border-radius: 999px;
  background: rgba(12, 27, 35, 0.64);
  color: #fff4c8;
  font-size: 0.62rem;
  font-weight: 1000;
  white-space: nowrap;
}

.bb-class-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.bb-class-title small {
  color: #9ee9ff;
  font-size: 0.62rem;
  font-weight: 900;
}

.bb-class-title h4 {
  margin: 0;
  color: #fff4c8;
  font-size: 0.94rem;
  line-height: 1.08;
}

.bb-class-title p,
.bb-class-current span,
.bb-class-current em {
  margin: 0;
  color: #c8dccf;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.28;
}

.bb-class-current {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(255, 231, 147, 0.34);
  border-radius: 8px;
  background: rgba(11, 24, 30, 0.48);
}

.bb-class-current strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-class-current em {
  color: #f4e7c8;
  font-style: normal;
}

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

.bb-class-rule-grid span {
  min-width: 0;
  padding: 6px;
  border-radius: 7px;
  background: rgba(255, 238, 167, 0.11);
  color: #c9e8dd;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.2;
}

.bb-class-rule-grid b {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: #fff4c8;
  font-size: 0.66rem;
}

.bb-slot-card {
  width: 100%;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px solid rgba(126, 196, 255, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(31, 73, 92, 0.92), rgba(17, 37, 48, 0.96));
  color: #ffffff;
  text-align: left;
}

.bb-slot-card.selected {
  border-color: rgba(211, 255, 224, 0.98);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(180deg, rgba(36, 118, 73, 0.96), rgba(17, 64, 39, 0.98));
}

.bb-slot-card.locked {
  border-color: rgba(166, 180, 188, 0.58);
  background: linear-gradient(180deg, rgba(56, 71, 80, 0.92), rgba(26, 35, 42, 0.96));
}

.bb-slot-icon,
.bb-army-art {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 238, 167, 0.82);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, #fff0a7 0%, #dba64a 54%, #704525 100%);
  overflow: hidden;
}

.bb-slot-icon .bb-unit-sprite,
.bb-army-art .bb-unit-sprite {
  width: 58px;
}

.bb-army-art .bb-unit-portrait-shell {
  inset: 3px;
}

.bb-skill-glyph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,0.95), rgba(255, 232, 126, 0.5) 34%, transparent 56%),
    linear-gradient(180deg, rgba(39, 114, 68, 0.92), rgba(19, 56, 76, 0.96));
  color: #fff7c2;
  font-size: 1.45rem;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(39, 16, 8, 0.72), 0 0 10px rgba(255, 230, 150, 0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -6px 12px rgba(0,0,0,0.18);
}

.bb-skill-card {
  border-color: rgba(125, 211, 252, 0.72);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(180deg, rgba(30, 84, 91, 0.96), rgba(23, 39, 59, 0.98));
}

.bb-skill-card.equipped {
  border-color: rgba(255, 238, 167, 0.96);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 230, 150, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(35, 112, 80, 0.96), rgba(15, 62, 48, 0.98));
}

.bb-slot-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.bb-slot-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.bb-slot-head b {
  color: #fff0a7;
  font-size: 0.78rem;
}

.bb-slot-head span,
.bb-slot-main small {
  color: #c8dccf;
  font-size: 0.62rem;
  font-weight: 800;
}

.bb-slot-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 0.84rem;
}

.bb-army-slot-section {
  display: grid;
  gap: 7px;
}

.bb-army-slot-section header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #fff0a7;
}

.bb-army-slot-section header b {
  font-size: 0.86rem;
}

.bb-army-slot-section header span {
  color: #c8dccf;
  font-size: 0.66rem;
  font-weight: 800;
}

.bb-army-grid,
.bb-legacy-upgrades {
  display: grid;
  gap: 8px;
}

.bb-army-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 2px solid rgba(255, 231, 147, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 30%),
    linear-gradient(180deg, rgba(53, 71, 58, 0.94), rgba(27, 36, 40, 0.98));
  color: #ffffff;
  text-align: left;
}

.bb-army-card.equipped {
  border-color: rgba(211, 255, 224, 0.96);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 30%),
    linear-gradient(180deg, rgba(39, 114, 68, 0.96), rgba(16, 60, 35, 0.98));
}

.bb-army-card.locked {
  border-color: rgba(161, 171, 177, 0.42);
  background: linear-gradient(180deg, rgba(70, 78, 83, 0.88), rgba(32, 38, 43, 0.96));
  opacity: 0.72;
}

.bb-army-card.locked .bb-army-art {
  background: linear-gradient(180deg, #d7b04b, #8a5b1d);
  color: #ffffff;
  font-size: 1.25rem;
}

.bb-army-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.bb-army-copy b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff6bf;
  font-size: 0.84rem;
}

.bb-unit-order {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 238, 167, 0.64);
  border-radius: 999px;
  background: rgba(12, 27, 35, 0.68);
  color: #9ee9ff;
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1;
  vertical-align: 0.08em;
  font-variant-numeric: tabular-nums;
}

.bb-army-copy small {
  color: #c8dccf;
  font-size: 0.66rem;
  font-weight: 900;
}

.bb-army-copy i {
  color: #f4e7c8;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.city-upgrade-card {
  min-height: 104px;
}

.bb-unit-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 9px;
  min-height: 112px;
  padding: 10px;
  border: 2px solid rgba(255, 231, 147, 0.7);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 28%),
    linear-gradient(180deg, rgba(57, 68, 59, 0.92), rgba(30, 37, 41, 0.96));
  color: #fff4c8;
  box-shadow: 0 5px 0 rgba(31, 25, 30, 0.62), 0 10px 18px rgba(0,0,0,0.26);
}

.bb-unit-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0a7 0%, #dba64a 62%, #935a25 100%);
  border: 2px solid rgba(255,255,255,0.72);
  font-size: 1.42rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 0 rgba(71, 44, 24, 0.82);
}

.bb-unit-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 56px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  background: var(--unit-sprite) 0 0 / 400% 100% no-repeat;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.36));
  animation: lane-unit-walk 0.9s steps(1, end) infinite;
}

.bb-unit-main {
  min-width: 0;
}

.bb-unit-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.bb-unit-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 1000;
  color: #fff6bf;
}

.bb-unit-level {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(12, 27, 35, 0.65);
  color: #9ee9ff;
  font-size: 0.68rem;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.bb-level-stepper {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: 24px auto 24px;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 999px;
  background: rgba(12, 27, 35, 0.72);
  color: #d9f6ff;
  font-size: 0.68rem;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.bb-level-stepper button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 238, 167, 0.78);
  border-radius: 50%;
  background: linear-gradient(180deg, #1f5d3a 0%, #12331f 100%);
  color: #fffbe8;
  font-size: 0.82rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.72);
}

.bb-level-stepper button:disabled {
  border-color: rgba(255,255,255,0.24);
  background: linear-gradient(180deg, #4b5563, #1f2937);
  color: #f3f4f6;
}

.bb-unit-source,
.bb-unit-next {
  margin-top: 5px;
  color: #c8dccf;
  font-size: 0.72rem;
  font-weight: 800;
}

.bb-unit-next {
  color: #ffe9a3;
}

.bb-unit-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}

.bb-unit-stats span {
  min-width: 0;
  padding: 5px 3px;
  border-radius: 8px;
  background: rgba(11, 24, 30, 0.54);
  color: #abc2bd;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 900;
}

.bb-unit-stats b {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
}

.bb-upgrade-btn {
  width: 96px;
  min-height: 44px;
  border: 2px solid rgba(255, 238, 167, 0.95);
  border-radius: 12px;
  background: linear-gradient(180deg, #1f5d3a 0%, #12331f 100%);
  color: #fffbe8 !important;
  font-size: 0.78rem;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.65);
  box-shadow: 0 3px 0 rgba(5, 28, 16, 0.85), 0 6px 12px rgba(0,0,0,0.24);
}

.bb-upgrade-btn:disabled {
  border-color: rgba(210, 220, 215, 0.36);
  background: linear-gradient(180deg, #6f7678, #343b3d);
  color: #f2f2f2 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

@media (max-width: 390px) {
  .battle-barracks-panel {
    padding-left: 8px;
    padding-right: 8px;
  }

  .bb-unit-card {
    grid-template-columns: 42px minmax(0, 1fr) 82px;
    gap: 7px;
    padding: 9px 7px;
  }

  .bb-unit-icon {
    width: 42px;
    height: 42px;
    font-size: 1.24rem;
  }

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

  .bb-upgrade-btn {
    width: 82px;
    font-size: 0.68rem;
  }
}

/* Terrain uses upright, overlapping tiles. Each following tile fades in across
   the overlap so illustrated buildings never appear upside down and joins stay
   soft. The gradient remains as a fallback when an asset is missing. */
.bm-terrain {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100vw, 100%);
  min-width: 560px;
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bm-terrain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 171, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(20, 72, 38, 0.08) 100%);
}

.bm-age-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)),
    var(--age-bg-image) center center / cover no-repeat,
    linear-gradient(180deg, #7bcf78, #247b78);
}

.bm-age-bg::before,
.bm-age-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 86px;
  z-index: 2;
  pointer-events: none;
}

.bm-age-bg::before {
  top: 0;
  background: linear-gradient(180deg, rgba(16, 55, 64, 0.3), transparent);
}

.bm-age-bg::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(16, 55, 64, 0.22), transparent);
}

.bm-age-bg-tile {
  position: relative;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  display: block;
  filter: saturate(1.12) contrast(1.03) brightness(1.03);
}

.bm-age-bg-tile + .bm-age-bg-tile {
  margin-top: -120px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 100%);
}

.bm-age-bg.missing-image .bm-age-bg-tile {
  display: none;
}

.bm-age-bg.age-1 { background-color: #46b98c; }
.bm-age-bg.age-2 { background-color: #367fa2; }
.bm-age-bg.age-3 { background-color: #6e5c49; }
.bm-age-bg.age-4 { background-color: #426c86; }
.bm-age-bg.age-5 { background-color: #123d78; }

.bm-terrain-tile {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(1.12) brightness(1.04);
}

/* Art-sprite decorations (trees, tents, castle, pond, scattered tiles …). */
.bm-sprite {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  width: var(--sz, 90px);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: sepia(0.35) saturate(0.78) brightness(0.82) drop-shadow(0 7px 7px rgba(0, 0, 0, 0.42));
}

/* Decorative landmarks + scattered Okey tiles (non-interactive). */
.bm-deco,
.bm-tile {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.bm-deco { font-size: 2.6rem; filter: sepia(0.28) saturate(0.78) brightness(0.88) drop-shadow(0 6px 6px rgba(0,0,0,0.42)); }
.bm-castle { font-size: 3.4rem; }
.bm-tower  { font-size: 3rem; }

.bm-tile {
  width: 30px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffdf4 0%, #efe4cb 100%);
  border: 1px solid rgba(120, 86, 40, 0.4);
  color: #d4143d;
  font-weight: 1000;
  font-size: 1.15rem;
  box-shadow: 0 4px 7px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.8);
  transform: translate(-50%, -50%) rotate(-9deg);
}

.bm-tile-b { color: #1f6fd6; transform: translate(-50%, -50%) rotate(11deg); }
.bm-tile-c { color: #1d8a3a; transform: translate(-50%, -50%) rotate(-4deg); }

.battle-level-node {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 50%;
  /* default = unlocked, not yet cleared: tan stepping stone */
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.85), transparent 40%),
    linear-gradient(180deg, #efe2c4 0%, #d8c191 70%, #b7995f 100%);
  color: #5a3d18;
  font-weight: 1000;
  cursor: pointer;
  box-shadow:
    0 5px 0 rgba(120, 92, 48, 0.85),
    0 11px 16px rgba(0,0,0,0.3);
}

.battle-level-node.tribe-node {
  width: 190px;
  height: 104px;
  border-radius: 12px;
  padding: 9px 10px 10px 68px;
  border-color: rgba(255, 238, 174, 0.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(180deg, #78303b 0%, #351821 100%);
  color: #fff8de;
  text-align: left;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  gap: 1px;
  box-shadow: 0 5px 0 rgba(45, 17, 21, 0.94), 0 12px 18px rgba(0,0,0,0.38);
}

.battle-level-node.tribe-node::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border-radius: 9px;
  border: 2px solid rgba(255, 234, 161, 0.78);
  background: linear-gradient(180deg, #f0d28a, #8c6034);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

.battle-level-node.tribe-node .bn-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 1.62rem;
}

.battle-level-node.tribe-node .bn-era {
  color: #f6d36e;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.battle-level-node.tribe-node .bn-name {
  color: #fff6cb;
  font-size: 1.05rem;
  font-weight: 1000;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-level-node.tribe-node .bn-state {
  color: #f3e5c3;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-level-node.tribe-node .bn-state {
  color: #ffdf75;
}

.battle-level-node.cleared {
  border-color: #fff;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,0.95), transparent 42%),
    linear-gradient(180deg, #8fe06a 0%, #4cb83f 62%, #2c8a2c 100%);
  color: #0c3d13;
  box-shadow: 0 5px 0 rgba(31, 96, 31, 0.9), 0 11px 16px rgba(0,0,0,0.3);
}

.battle-level-node.tribe-node.cleared {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, #356b62 0%, #173f3c 100%);
  color: #f2fff3;
  box-shadow: 0 5px 0 rgba(22, 79, 43, 0.9), 0 12px 18px rgba(0,0,0,0.28);
}

.battle-level-node.current {
  width: 70px;
  height: 70px;
  border-color: #fff;
  background:
    radial-gradient(circle at 36% 22%, rgba(255,255,255,0.95), transparent 44%),
    linear-gradient(180deg, #a72e49 0%, #7a1f38 60%, #48101f 100%);
  color: #ffffff;
  box-shadow:
    0 6px 0 rgba(60, 16, 30, 0.94),
    0 14px 22px rgba(0,0,0,0.36),
    0 0 0 7px rgba(255, 243, 150, 0.5),
    0 0 26px rgba(255, 224, 90, 0.85);
  animation: bm-current-pulse 1.6s ease-in-out infinite;
}

.battle-level-node.tribe-node.current {
  width: 218px;
  height: 122px;
  padding-left: 72px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(180deg, #a72e49 0%, #531527 100%);
}

@keyframes bm-current-pulse {
  0%, 100% { box-shadow: 0 6px 0 rgba(60,16,30,0.94), 0 14px 22px rgba(0,0,0,0.4), 0 0 0 7px rgba(246,211,110,0.48), 0 0 22px rgba(246,211,110,0.62); }
  50%      { box-shadow: 0 6px 0 rgba(60,16,30,0.94), 0 14px 22px rgba(0,0,0,0.4), 0 0 0 9px rgba(246,211,110,0.68), 0 0 34px rgba(246,211,110,0.92); }
}

.battle-level-node.locked {
  border-color: rgba(255,255,255,0.6);
  background: linear-gradient(180deg, #d5dbe1 0%, #b7c0c8 60%, #929da7 100%);
  color: #1f2937;
  cursor: default;
  box-shadow: 0 4px 0 rgba(60, 70, 78, 0.8), 0 9px 14px rgba(0,0,0,0.26);
  filter: saturate(0.7);
}

.battle-level-node.tribe-node.locked {
  background: linear-gradient(180deg, #7a7f84 0%, #454b52 100%);
  color: #e8edf2;
  opacity: 0.86;
}

.bn-num {
  display: block;
  font-size: 1.3rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.battle-level-node.current .bn-num,
.battle-level-node.current .bn-num { text-shadow: 0 2px 2px rgba(0,0,0,0.52); }
.battle-level-node.locked .bn-num { text-shadow: 0 1px 0 rgba(255,255,255,0.72); }

/* Lock glyph on locked nodes */
.bn-lock {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* Ocean-island MVP map: five generated age assets reused across all levels. */
.battle-conquest-scroll {
  background:
    linear-gradient(180deg, rgba(160, 218, 255, 0.18) 0%, rgba(37, 123, 189, 0.22) 18%, rgba(20, 101, 168, 0.28) 56%, rgba(8, 55, 104, 0.42) 100%),
    repeating-linear-gradient(172deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #5fb9ed 0%, #2385d2 36%, #1166b4 68%, #0d407e 100%);
}

.bm-ocean {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.16), transparent 12%, transparent 88%, rgba(255,255,255,0.16)),
    repeating-linear-gradient(178deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 42px),
    linear-gradient(180deg, rgba(124, 214, 255, 0.2), rgba(15, 82, 154, 0.42));
}

.bm-ocean::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 11%, transparent 84%, rgba(8, 28, 62, 0.34)),
    repeating-linear-gradient(96deg, transparent 0 58px, rgba(178,232,255,0.1) 58px 60px, transparent 60px 120px);
}

.bm-ocean-haze,
.bm-ocean-reef,
.bm-water-spark {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.bm-ocean-haze {
  width: 240px;
  height: 86px;
  border-radius: 999px;
  background: rgba(224, 244, 255, 0.28);
  filter: blur(12px);
}

.bm-ocean-haze.h1 { left: -92px; top: 260px; }
.bm-ocean-haze.h2 { right: -110px; top: 38%; opacity: 0.72; }
.bm-ocean-haze.h3 { left: -100px; bottom: 14%; opacity: 0.58; }

.bm-ocean-reef {
  width: 104px;
  height: 42px;
  border-radius: 45% 55% 48% 52%;
  background: linear-gradient(180deg, rgba(202, 234, 230, 0.45), rgba(42, 127, 150, 0.32));
  box-shadow: 0 0 34px rgba(149, 230, 236, 0.28);
}

.bm-ocean-reef.r1 { right: 24px; top: 980px; transform: rotate(-11deg); }
.bm-ocean-reef.r2 { left: 28px; top: 52%; transform: rotate(8deg) scale(0.78); }
.bm-ocean-reef.r3 { right: 42px; bottom: 680px; transform: rotate(16deg) scale(0.92); }

.bm-water-spark {
  left: var(--dx);
  top: var(--dy);
  z-index: 1;
  width: calc(var(--sz, 8px) * 2.4);
  height: var(--sz, 8px);
  border-radius: 999px;
  background: rgba(221, 250, 255, 0.58);
  transform: translate(-50%, -50%) rotate(-18deg);
  filter: blur(0.4px);
}

.bm-water-spark.s1 { opacity: 0.48; transform: translate(-50%, -50%) rotate(12deg) scale(0.74); }
.bm-water-spark.s2 { opacity: 0.36; transform: translate(-50%, -50%) rotate(-32deg) scale(0.62); }
.bm-water-spark.s3 { opacity: 0.52; transform: translate(-50%, -50%) rotate(24deg) scale(0.9); }

.battle-level-node.tribe-node,
.battle-level-node.tribe-node.cleared,
.battle-level-node.tribe-node.current,
.battle-level-node.tribe-node.locked {
  width: 300px;
  height: 294px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  display: block;
  text-align: center;
  overflow: visible;
  transform: translate(-50%, -50%) scale(var(--node-scale, 1));
  filter: none;
}

.battle-level-node.tribe-node::before {
  display: none;
}

.bn-island-glow {
  position: absolute;
  left: 50%;
  top: 67%;
  width: 238px;
  height: 88px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(91, 216, 255, 0.3);
  filter: blur(15px);
}

.bn-island-img {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 250px;
  height: 250px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 17px 13px rgba(0, 24, 60, 0.38));
}

.battle-level-node.tribe-node .bn-label {
  position: absolute;
  left: 50%;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: 260px;
  transform: translateX(-50%);
  padding: 3px 10px 4px 5px;
  border-radius: 999px;
  background: rgba(8, 30, 62, 0.62);
  color: #e9f7ff;
  font-weight: 1000;
  text-shadow: 0 2px 2px rgba(0,0,0,0.55);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 23, 54, 0.22);
}

.battle-level-node.tribe-node .bn-level {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 2px solid rgba(255,255,255,0.84);
  background: linear-gradient(180deg, #7f9ee8, #3154a8);
  color: #ffffff;
  font-size: 0.74rem;
  box-shadow: 0 2px 0 rgba(14, 36, 88, 0.82);
}

.battle-level-node.tribe-node .bn-name {
  display: block;
  min-width: 0;
  max-width: 202px;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 1000;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(8, 30, 62, 0.82), 0 0 8px rgba(8, 30, 62, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle-level-node.tribe-node .bn-state {
  position: absolute;
  left: 50%;
  bottom: 3px;
  max-width: 220px;
  transform: translateX(-50%);
  color: #d9f8ff;
  font-size: 0.68rem;
  font-weight: 950;
  text-shadow: 0 2px 2px rgba(0,0,0,0.62);
}

.battle-level-node.tribe-node .bn-icon {
  display: none;
}

.battle-level-node.tribe-node.current {
  z-index: 5;
  animation: bm-current-island-pulse 1.8s ease-in-out infinite;
}

.battle-level-node.tribe-node.current .bn-island-glow {
  background: rgba(93, 230, 255, 0.72);
  box-shadow: 0 0 36px rgba(114, 236, 255, 0.82);
}

.battle-level-node.tribe-node.current .bn-island-img {
  top: 65%;
  width: 280px;
  height: 280px;
}

@keyframes bm-current-island-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(calc(var(--node-scale, 1) * 1)); }
  50% { transform: translate(-50%, -50%) scale(calc(var(--node-scale, 1) * 1.045)); }
}

.battle-level-node.tribe-node.cleared .bn-island-img {
  filter: drop-shadow(0 17px 13px rgba(0, 24, 60, 0.34)) saturate(1.06) brightness(1.04);
}

.battle-level-node.tribe-node.locked {
  cursor: default;
  opacity: 0.82;
}

.battle-level-node.tribe-node.locked .bn-island-img {
  filter: grayscale(0.55) saturate(0.64) brightness(0.72) drop-shadow(0 17px 13px rgba(0, 24, 60, 0.36));
}

.battle-level-node.tribe-node.locked .bn-island-glow {
  background: rgba(45, 92, 135, 0.22);
}

.battle-level-node.tribe-node .bn-lock {
  left: 50%;
  top: 47%;
  bottom: auto;
  z-index: 3;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  color: #5e4321;
  font-size: 2rem;
  box-shadow: 0 4px 0 rgba(31, 45, 67, 0.4), 0 10px 20px rgba(0,0,0,0.28);
}

.bn-lock-text {
  position: absolute;
  left: 50%;
  top: 61%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 30, 62, 0.68);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 1000;
  text-shadow: 0 2px 2px rgba(0,0,0,0.52);
  white-space: nowrap;
}

.battle-map-cloud {
  position: absolute;
  z-index: 1;
  width: 86px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  filter: blur(0.2px);
}

.battle-map-cloud::before,
.battle-map-cloud::after {
  content: "";
  position: absolute;
  bottom: 8px;
  border-radius: 50%;
  background: inherit;
}

.battle-map-cloud::before {
  left: 12px;
  width: 34px;
  height: 34px;
}

.battle-map-cloud::after {
  right: 13px;
  width: 44px;
  height: 44px;
}

.cloud-a {
  left: 6%;
  top: 148px;
}

.cloud-b {
  right: 7%;
  top: 360px;
  transform: scale(0.78);
  opacity: 0.72;
}

.battle-map-bottomnav {
  justify-content: center;
  gap: 5px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(31, 48, 57, 0.34), rgba(31, 24, 36, 0.88));
  border-top: 1px solid rgba(255,255,255,0.18);
}

.battle-map-tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: 96px;
  width: auto;
  height: 54px;
  border: 2px solid rgba(255, 218, 91, 0.52);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(58, 38, 32, 0.82), rgba(35, 26, 38, 0.92));
  color: #f9e5ac;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 0 rgba(24, 19, 27, 0.58);
}

.battle-map-tab.active {
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #401b08;
  border-color: rgba(255, 238, 167, 0.95);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.battle-map-tab span,
.battle-map-tab b {
  display: block;
  line-height: 1;
}

.battle-map-tab span {
  font-size: 1.22rem;
  margin-bottom: 5px;
}

.battle-map-tab b {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-btn,
.modal-btn,
.tutorial-nav-btn,
.toast-btn,
.store-buy-btn,
.custom-select-trigger,
.toggle-switch,
.lobby-continue-btn {
  border: 2px solid rgba(255, 218, 91, 0.78);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #561729;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  box-shadow:
    0 4px 0 rgba(89, 39, 12, 0.82),
    0 8px 14px rgba(0,0,0,0.28),
    inset 0 2px 0 rgba(255,255,255,0.45);
}

.footer-btn.back-btn,
.modal-btn.close-btn,
.modal-btn.back-btn,
.tutorial-nav-btn.prev-btn,
.toast-btn.no-btn {
  background: linear-gradient(180deg, #991b3d 0%, #70152f 64%, #450b20 100%);
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.36);
}

.footer-btn.settings-btn,
.modal-btn.action-btn,
.next-round-btn,
.restart-match-btn,
.tutorial-nav-btn.next-btn,
.toast-btn.yes-btn,
.toggle-switch.active {
  background: linear-gradient(180deg, #237a35 0%, #19662d 60%, #0f4520 100%);
  border-color: rgba(255, 225, 89, 0.9);
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(26, 84, 10, 0.58);
}

.reset-btn {
  background: linear-gradient(180deg, #b42332 0%, #8f1928 60%, #5f0d1d 100%);
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.back-title-btn {
  background: linear-gradient(180deg, #1769aa 0%, #12558f 60%, #0a3966 100%);
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.modal-overlay,
.tutorial-modal-overlay {
  position: absolute;
  background: rgba(38, 7, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-card,
.tutorial-modal-card,
.loading-content {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 232, 143, 0.10), rgba(255,255,255,0) 24%),
    var(--ui-panel);
  border: 4px solid var(--ui-gold);
  border-radius: 22px;
  box-shadow: var(--ui-gold-frame);
  color: #fff7d5;
}

.modal-card {
  max-width: 430px;
  padding: 20px;
  gap: 14px;
}

.modal-card h2,
.tutorial-header {
  border-bottom: 2px solid rgba(255, 215, 89, 0.36);
}

.setting-item {
  min-height: 54px;
  padding: 10px 12px;
  color: #fff3c4;
}

.custom-select-container {
  min-width: 132px;
}

.custom-options-list {
  background: linear-gradient(180deg, #7d1834 0%, #4d0d22 100%);
  border: 2px solid var(--ui-gold);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.42);
  overflow: hidden;
}

.custom-options-list button {
  color: #fff4c8;
  border-bottom: 1px solid rgba(255, 215, 89, 0.18);
}

.custom-options-list button:hover,
.custom-options-list button.active {
  background: rgba(255, 215, 89, 0.18);
  color: var(--ui-gold-hi);
}

#modal-settings .setting-item > span {
  color: #fff7d5;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(45, 13, 8, 0.82);
}

#modal-settings .custom-select-trigger,
#modal-settings .text-tutorial-btn,
#modal-settings .play-tutorial-btn,
#modal-settings .save-transfer-btn {
  color: #3b1608;
  text-shadow: 0 1px 0 rgba(255,255,255,0.58);
}

#modal-settings .custom-select-trigger .trigger-text,
#modal-settings .custom-select-trigger .trigger-arrow {
  color: #3b1608;
}

#modal-settings .toggle-switch.active {
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(15, 72, 12, 0.72);
}

#modal-settings .reset-btn,
#modal-settings .back-title-btn,
#modal-settings .close-btn {
  color: #ffffff;
}

.settings-version {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(25, 12, 6, 0.38);
  border: 1px solid rgba(255, 225, 128, 0.22);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 2px 0 rgba(45, 13, 8, 0.7);
  word-break: break-word;
}

.daily-checkin-card {
  width: min(92vw, 420px);
  max-width: 420px;
  padding: 18px;
  gap: 12px;
  border: 3px solid rgba(255, 218, 77, 0.9);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 231, 121, 0.22), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #1e7565 0%, #0e3641 100%);
  color: #fff8d7;
  overflow: hidden;
}

.daily-checkin-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 238, 167, 0.95);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0a7 0%, #e5a93a 52%, #a96418 100%);
  color: #3b1608;
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(89, 39, 12, 0.8);
}

.daily-checkin-kicker {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(255, 232, 143, 0.64);
  border-radius: 999px;
  background: rgba(8, 34, 39, 0.62);
  color: #ffe88b;
  font-size: 0.7rem;
  font-weight: 900;
}

.daily-checkin-card h2 {
  margin: 0;
  padding: 0 36px 8px 0;
  border-bottom: 2px solid rgba(255, 215, 89, 0.36);
  color: #fff0a7;
  font-size: 1.5rem;
  line-height: 1.1;
}

.daily-checkin-subtitle,
.daily-checkin-hint {
  margin: 0;
  color: #d8edf0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.daily-checkin-streak {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 232, 143, 0.42);
  background: rgba(11, 38, 43, 0.64);
  color: #fff4c0;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

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

.daily-checkin-day {
  min-width: 0;
  min-height: 82px;
  padding: 7px 4px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 238, 167, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(52, 77, 65, 0.94), rgba(18, 42, 48, 0.95));
  text-align: center;
}

.daily-checkin-day.today {
  border-color: #fff0a7;
  background:
    linear-gradient(180deg, rgba(255, 236, 151, 0.2), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #8e2a3e, #561424);
  box-shadow: 0 0 0 2px rgba(255, 232, 143, 0.22), 0 8px 14px rgba(0,0,0,0.28);
}

.daily-checkin-day.claimed {
  filter: saturate(0.88);
  opacity: 0.86;
}

.daily-checkin-day.bonus {
  border-color: rgba(132, 218, 255, 0.86);
}

.daily-checkin-day-label {
  color: #ffe88b;
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1.05;
}

.daily-checkin-day b {
  color: #ffffff;
  font-size: 0.62rem;
  line-height: 1.16;
}

.daily-checkin-day small {
  min-height: 1em;
  color: #bdeef5;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
}

.daily-checkin-actions {
  display: grid;
  gap: 7px;
}

.daily-checkin-claim:disabled {
  cursor: default;
  filter: grayscale(0.2) brightness(0.82);
  opacity: 0.74;
}

@media (max-width: 420px) {
  .daily-checkin-card {
    width: min(94vw, 380px);
    padding: 16px;
  }

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

  .daily-checkin-day {
    min-height: 74px;
  }
}

.rules-body {
  padding: 12px;
  max-height: 300px;
}

.round-scores-list {
  padding: 12px;
}

.round-score-row {
  color: #fff1bd;
  border-bottom: 1px solid rgba(255, 218, 91, 0.14);
}

.round-score-row:last-child {
  border-bottom: none;
}

.winner-name-banner {
  color: var(--ui-gold-hi);
  text-shadow: 0 3px 0 rgba(94, 37, 9, 0.8), 0 8px 14px rgba(0,0,0,0.35);
}

.banner-alert,
.interactive-toast,
.tutorial-guide-banner .guide-content {
  background: var(--ui-panel);
  border: 3px solid var(--ui-gold);
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(84, 29, 15, 0.78), 0 16px 28px rgba(0,0,0,0.38);
  color: #fff5cf;
}

.banner-alert.alert-error {
  border-color: #ff8f62;
  background: linear-gradient(180deg, #d94b45 0%, #8b1729 100%);
}

.toast-content,
.banner-text {
  color: #fff5cf;
  text-shadow: 0 2px 0 rgba(0,0,0,0.32);
}

.loading-screen {
  background-color: #0b76a5;
}

.loading-content {
  width: min(82vw, 360px);
  padding: 24px;
}

.loading-bar-container {
  background: rgba(75, 22, 12, 0.62);
  border: 2px solid rgba(255, 218, 91, 0.55);
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.35);
}

.loading-bar {
  background: linear-gradient(90deg, #7fed37 0%, #ffe56d 100%);
  box-shadow: 0 0 14px rgba(255, 226, 87, 0.7);
}

.page-placeholder {
  min-width: min(82vw, 320px);
  padding: 28px 20px;
}

.page-ph-text {
  background: rgba(255, 215, 89, 0.12);
  border: 1px solid rgba(255, 215, 89, 0.24);
}

.page-store-inner {
  padding: 0 14px 28px;
}

.store-section-title {
  color: var(--ui-gold-hi);
  text-shadow: 0 2px 0 rgba(72, 26, 8, 0.68);
  padding-left: 4px;
}

.store-item {
  padding: 10px;
}

.store-swatch {
  border: 2px solid rgba(255, 232, 143, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 4px 8px rgba(0,0,0,0.24);
}

.store-buy-btn.owned,
.store-buy-btn.equipped-btn {
  background: linear-gradient(180deg, #b32c4a 0%, #7d1834 64%, #4d0d22 100%);
  color: #fff5cf;
}

.store-buy-btn.gem {
  background: linear-gradient(180deg, #1769aa 0%, #12558f 60%, #0a3966 100%);
  color: #ffffff;
}

.rogue-danger-btn {
  background: linear-gradient(180deg, #a61b2b, #65101d) !important;
  color: #ffffff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.62);
}

.rogue-neutral-btn {
  background: linear-gradient(180deg, #4b5563, #1f2937) !important;
  color: #ffffff !important;
  border-color: #d1d5db !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.62);
}

.ai-difficulty-btn {
  color: #fff3c4;
}

.ai-difficulty-btn:hover,
.ai-difficulty-btn.easy:hover,
.ai-difficulty-btn.normal:hover,
.ai-difficulty-btn.hard:hover {
  border-color: var(--ui-gold-hi);
  background:
    linear-gradient(180deg, rgba(255, 231, 147, 0.16), rgba(255,255,255,0) 30%),
    var(--ui-panel-dark);
}

.icon-btn,
.action-btn,
.rail-icon,
.lobby-avatar-block,
.lobby-character,
.lobby-gear,
.res-plus,
.nav-tab,
.mode-card,
.grid-mode-card,
.footer-btn,
.modal-btn,
.tutorial-nav-btn,
.toast-btn,
.store-buy-btn,
.custom-select-trigger,
.toggle-switch,
.custom-options-list button,
.ai-difficulty-btn,
.circle-settings-btn,
.circle-store-btn,
.tutorial-close-btn,
.tutorial-intro-skip-x,
.lobby-continue-btn {
  --button-depth: 4px;
  --button-press-depth: 1px;
  --button-base-color: rgba(57, 22, 9, 0.88);
  transform: translateY(0) scale(1);
  transform-origin: center bottom;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition:
    transform 0.16s cubic-bezier(0.2,0.9,0.24,1),
    box-shadow 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    opacity 0.16s ease;
  will-change: transform;
}

.icon-btn::before,
.action-btn::before,
.rail-icon::before,
.lobby-avatar-block::before,
.lobby-character::before,
.lobby-gear::before,
.res-plus::before,
.nav-tab::before,
.mode-card::before,
.grid-mode-card::before,
.footer-btn::before,
.modal-btn::before,
.tutorial-nav-btn::before,
.toast-btn::before,
.store-buy-btn::before,
.custom-select-trigger::before,
.toggle-switch::before,
.custom-options-list button::before,
.ai-difficulty-btn::before,
.circle-settings-btn::before,
.circle-store-btn::before,
.tutorial-close-btn::before,
.tutorial-intro-skip-x::before,
.lobby-continue-btn::before,
.icon-btn::after,
.action-btn::after,
.rail-icon::after,
.lobby-avatar-block::after,
.lobby-character::after,
.lobby-gear::after,
.res-plus::after,
.nav-tab::after,
.mode-card::after,
.grid-mode-card::after,
.footer-btn::after,
.modal-btn::after,
.tutorial-nav-btn::after,
.toast-btn::after,
.store-buy-btn::after,
.custom-select-trigger::after,
.toggle-switch::after,
.custom-options-list button::after,
.ai-difficulty-btn::after,
.circle-settings-btn::after,
.circle-store-btn::after,
.tutorial-close-btn::after,
.tutorial-intro-skip-x::after,
.lobby-continue-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.icon-btn::before,
.action-btn::before,
.rail-icon::before,
.lobby-avatar-block::before,
.lobby-character::before,
.lobby-gear::before,
.res-plus::before,
.nav-tab::before,
.mode-card::before,
.grid-mode-card::before,
.footer-btn::before,
.modal-btn::before,
.tutorial-nav-btn::before,
.toast-btn::before,
.store-buy-btn::before,
.custom-select-trigger::before,
.toggle-switch::before,
.custom-options-list button::before,
.ai-difficulty-btn::before,
.circle-settings-btn::before,
.circle-store-btn::before,
.tutorial-close-btn::before,
.tutorial-intro-skip-x::before,
.lobby-continue-btn::before {
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 48%);
  opacity: 0.72;
}

.icon-btn::after,
.action-btn::after,
.rail-icon::after,
.lobby-avatar-block::after,
.lobby-character::after,
.lobby-gear::after,
.res-plus::after,
.nav-tab::after,
.mode-card::after,
.grid-mode-card::after,
.footer-btn::after,
.modal-btn::after,
.tutorial-nav-btn::after,
.toast-btn::after,
.store-buy-btn::after,
.custom-select-trigger::after,
.toggle-switch::after,
.custom-options-list button::after,
.ai-difficulty-btn::after,
.circle-settings-btn::after,
.circle-store-btn::after,
.tutorial-close-btn::after,
.tutorial-intro-skip-x::after,
.lobby-continue-btn::after {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.18)),
    var(--button-base-color);
  box-shadow: 0 5px 9px rgba(0,0,0,0.26);
  transform: translateY(var(--button-depth));
  transition:
    transform 0.16s cubic-bezier(0.2,0.9,0.24,1),
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.icon-btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.rail-icon:hover:not(:disabled),
.lobby-avatar-block:hover:not(:disabled),
.lobby-character:hover:not(:disabled),
.lobby-gear:hover:not(:disabled),
.res-plus:hover:not(:disabled),
.nav-tab:hover:not(:disabled),
.mode-card:hover,
.grid-mode-card:hover,
.footer-btn:hover:not(:disabled),
.modal-btn:hover:not(:disabled),
.tutorial-nav-btn:hover:not(:disabled),
.toast-btn:hover:not(:disabled),
.store-buy-btn:hover:not(:disabled),
.custom-select-trigger:hover:not(:disabled),
.toggle-switch:hover:not(:disabled),
.custom-options-list button:hover:not(:disabled),
.ai-difficulty-btn:hover:not(:disabled),
.circle-settings-btn:hover:not(:disabled),
.circle-store-btn:hover:not(:disabled),
.tutorial-close-btn:hover:not(:disabled),
.tutorial-intro-skip-x:hover:not(:disabled),
.lobby-continue-btn:hover:not(:disabled) {
  filter: brightness(1.05) saturate(1.06);
}

.icon-btn:active:not(:disabled),
.action-btn:active:not(:disabled),
.rail-icon:active:not(:disabled),
.lobby-avatar-block:active:not(:disabled),
.lobby-character:active:not(:disabled),
.lobby-gear:active:not(:disabled),
.res-plus:active:not(:disabled),
.nav-tab:active:not(:disabled),
.mode-card:active,
.grid-mode-card:active,
.footer-btn:active:not(:disabled),
.modal-btn:active:not(:disabled),
.tutorial-nav-btn:active:not(:disabled),
.toast-btn:active:not(:disabled),
.store-buy-btn:active:not(:disabled),
.custom-select-trigger:active:not(:disabled),
.toggle-switch:active:not(:disabled),
.custom-options-list button:active:not(:disabled),
.ai-difficulty-btn:active:not(:disabled),
.circle-settings-btn:active:not(:disabled),
.circle-store-btn:active:not(:disabled),
.tutorial-close-btn:active:not(:disabled),
.tutorial-intro-skip-x:active:not(:disabled),
.lobby-continue-btn:active:not(:disabled) {
  transform: translateY(calc(var(--button-depth) - var(--button-press-depth))) scale(0.985);
  filter: brightness(0.96) saturate(1.02);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.icon-btn:active:not(:disabled)::after,
.action-btn:active:not(:disabled)::after,
.rail-icon:active:not(:disabled)::after,
.lobby-avatar-block:active:not(:disabled)::after,
.lobby-character:active:not(:disabled)::after,
.lobby-gear:active:not(:disabled)::after,
.res-plus:active:not(:disabled)::after,
.nav-tab:active:not(:disabled)::after,
.mode-card:active::after,
.grid-mode-card:active::after,
.footer-btn:active:not(:disabled)::after,
.modal-btn:active:not(:disabled)::after,
.tutorial-nav-btn:active:not(:disabled)::after,
.toast-btn:active:not(:disabled)::after,
.store-buy-btn:active:not(:disabled)::after,
.custom-select-trigger:active:not(:disabled)::after,
.toggle-switch:active:not(:disabled)::after,
.custom-options-list button:active:not(:disabled)::after,
.ai-difficulty-btn:active:not(:disabled)::after,
.circle-settings-btn:active:not(:disabled)::after,
.circle-store-btn:active:not(:disabled)::after,
.tutorial-close-btn:active:not(:disabled)::after,
.tutorial-intro-skip-x:active:not(:disabled)::after,
.lobby-continue-btn:active:not(:disabled)::after {
  transform: translateY(var(--button-press-depth));
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

.action-btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.nav-tab:active:not(:disabled),
.rail-icon:active:not(:disabled),
.lobby-gear:active:not(:disabled),
.res-plus:active:not(:disabled),
.circle-settings-btn:active:not(:disabled),
.circle-store-btn:active:not(:disabled),
.tutorial-close-btn:active:not(:disabled),
.tutorial-intro-skip-x:active:not(:disabled) {
  transform: translateY(calc(var(--button-depth) - var(--button-press-depth))) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .lobby-play-btn,
  .icon-btn,
  .action-btn,
  .rail-icon,
  .lobby-avatar-block,
  .lobby-character,
  .lobby-gear,
  .res-plus,
  .nav-tab,
  .mode-card,
  .grid-mode-card,
  .footer-btn,
  .modal-btn,
  .tutorial-nav-btn,
  .toast-btn,
  .store-buy-btn,
  .custom-select-trigger,
  .toggle-switch,
  .custom-options-list button,
  .ai-difficulty-btn,
  .circle-settings-btn,
  .circle-store-btn,
  .tutorial-close-btn,
  .tutorial-intro-skip-x,
  .lobby-continue-btn {
    transition-duration: 0.01ms;
  }
}

body[data-rogue-combat="solo"] .player-area {
  padding-top: 5px;
  gap: 6px;
  transform: translateY(-10px);
  margin-bottom: -10px;
}

body[data-rogue-combat="solo"] .rack-main-area {
  gap: 6px;
}

body[data-rogue-combat="solo"] .rack-controls.vertical-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(40px, auto);
  gap: 6px;
  width: var(--rack-width);
  max-width: min(var(--rack-width), 100%);
  justify-content: initial;
}

body[data-rogue-combat="solo"] .rack-controls.vertical-controls .action-btn {
  flex: none;
  min-width: 0;
  min-height: 40px;
  padding: 5px 3px;
  border-radius: 12px;
  font-size: 0.66rem;
  line-height: 1.05;
  gap: 3px;
}

body[data-rogue-combat="solo"] .rack-controls.vertical-controls .action-btn svg {
  width: 12px;
  height: 12px;
}

body[data-rogue-combat="solo"] .rack-controls.vertical-controls .battle-only {
  display: none !important;
}

/* Skills are passive now — the active skill button stays hidden. */
body[data-rogue-combat="solo"] #btn-rogue-skill {
  display: none !important;
}
body[data-rogue-combat="solo"] #btn-discard-selected,
body[data-rogue-combat="solo"] #btn-rogue-redraw {
  display: flex !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body[data-rogue-combat="solo"] .player-area {
    padding-top: 4px;
    gap: 5px;
    transform: translateY(-12px);
    margin-bottom: -12px;
  }

  body[data-rogue-combat="solo"] .rack-controls.vertical-controls {
    grid-auto-rows: minmax(36px, auto);
    gap: 5px;
  }

  body[data-rogue-combat="solo"] .rack-controls.vertical-controls .action-btn {
    min-height: 36px;
    padding: 4px 2px;
    border-width: 2px;
    border-radius: 10px;
    font-size: 0.62rem;
  }

  body[data-rogue-combat="solo"] .rack-controls.vertical-controls .action-btn svg {
    display: none;
  }
}

.okey-button {
  --okey-button-depth: 4px;
  --okey-button-press-depth: 1px;
  --okey-button-base: rgba(57, 22, 9, 0.88);
  --okey-button-shine: rgba(255, 255, 255, 0.34);
  --okey-button-ink: rgba(255, 245, 190, 0.42);
  --okey-button-hover-y: -2px;
  --okey-button-hover-scale: 1.02;
  --okey-button-press-scale: 0.985;
  --okey-button-text: currentColor;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(0) scale(1);
  transform-origin: center bottom;
  transition:
    transform 0.16s cubic-bezier(0.2, 0.9, 0.24, 1),
    box-shadow 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    opacity 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Project-wide button text contract:
   a button state owns its foreground through --okey-button-text. Direct label
   elements cannot silently override that state with a stale component color. */
.okey-button > b,
.okey-button > strong,
.okey-button > small,
.okey-button > .button-label,
.okey-button > .trigger-text,
.okey-button > .trigger-arrow {
  color: var(--okey-button-text) !important;
}

.okey-button::before,
.okey-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.okey-button::before {
  z-index: -1;
  background:
    linear-gradient(180deg, var(--okey-button-shine), rgba(255,255,255,0) 48%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%);
  opacity: 0.72;
}

.okey-button::after {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.22)),
    var(--okey-button-base);
  box-shadow: 0 5px 9px rgba(0,0,0,0.26);
  transform: translateY(var(--okey-button-depth));
  transition:
    transform 0.16s cubic-bezier(0.2, 0.9, 0.24, 1),
    box-shadow 0.16s ease;
}

.okey-button:hover:not(:disabled):not(.is-disabled) {
  transform: translateY(var(--okey-button-hover-y)) scale(var(--okey-button-hover-scale));
  filter: brightness(1.05) saturate(1.06);
}

.okey-button:active:not(:disabled):not(.is-disabled),
.okey-button.is-pressing:not(:disabled):not(.is-disabled) {
  transform: translateY(calc(var(--okey-button-depth) - var(--okey-button-press-depth))) scale(var(--okey-button-press-scale));
  filter: brightness(0.96) saturate(1.02);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.okey-button:active:not(:disabled):not(.is-disabled)::after,
.okey-button.is-pressing:not(:disabled):not(.is-disabled)::after {
  transform: translateY(var(--okey-button-press-depth));
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

.okey-button-ink {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--okey-button-ink) 0%, rgba(255,255,255,0) 68%);
  transform: scale(0);
  animation: okey-button-ink-pop 0.46s ease-out forwards;
}

.okey-button > *:not(.okey-button-ink) {
  position: relative;
  z-index: 2;
}

.okey-button[data-okey-button-variant="play"] {
  --okey-button-depth: 8px;
  --okey-button-base: rgba(94,32,31,0.94);
  --okey-button-shine: rgba(255,255,255,0.52);
  --okey-button-ink: rgba(224,255,135,0.46);
  --okey-button-hover-y: -3px;
  --okey-button-hover-scale: 1.04;
  --okey-button-press-scale: 0.985;
  overflow: visible;
}

.okey-button[data-okey-button-variant="play"]::after {
  box-shadow: 0 8px 14px rgba(42,13,16,0.38);
}

.okey-button[data-okey-button-variant="success"] {
  --okey-button-base: rgba(21, 87, 24, 0.92);
  --okey-button-ink: rgba(168,255,132,0.42);
}

.okey-button[data-okey-button-variant="danger"] {
  --okey-button-base: rgba(75, 12, 31, 0.94);
  --okey-button-ink: rgba(255,205,205,0.36);
}

.okey-button[data-okey-button-variant="blue"] {
  --okey-button-base: rgba(10, 61, 125, 0.92);
  --okey-button-ink: rgba(170,222,255,0.4);
}

.okey-button[data-okey-button-variant="nav"],
.okey-button[data-okey-button-variant="icon"] {
  --okey-button-depth: 3px;
  --okey-button-hover-y: -1px;
  --okey-button-hover-scale: 1.04;
  --okey-button-press-scale: 0.97;
}

.okey-button[data-okey-button-variant="card"] {
  --okey-button-depth: 5px;
  --okey-button-base: rgba(75, 31, 14, 0.92);
  --okey-button-ink: rgba(255,225,120,0.34);
}

.okey-button[data-okey-button-variant="shop"] {
  --okey-button-base: rgba(84, 40, 12, 0.9);
  --okey-button-ink: rgba(255,231,147,0.38);
}

.okey-button:disabled,
.okey-button.is-disabled,
.okey-button[aria-disabled="true"] {
  transform: none;
  filter: none;
}

.okey-button:disabled::after,
.okey-button.is-disabled::after,
.okey-button[aria-disabled="true"]::after {
  opacity: 0.35;
  transform: translateY(2px);
}

@keyframes okey-button-ink-pop {
  0% {
    opacity: 0.68;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .okey-button,
  .okey-button::after {
    transition-duration: 0.01ms;
  }

  .okey-button-ink {
    display: none;
  }
}

.tutorial-modal-card {
  height: min(84%, 560px);
  padding: 16px 18px;
}

.tutorial-header {
  margin-bottom: 12px;
}

.tutorial-close-btn,
.tutorial-intro-skip-x {
  color: #fff5cf;
  background: linear-gradient(180deg, #b32c4a 0%, #68152c 100%);
  border: 2px solid rgba(255, 218, 91, 0.62);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-dot {
  background: rgba(255, 244, 180, 0.36);
}

.slide-dot.active {
  background: var(--ui-gold-hi);
  box-shadow: 0 0 8px rgba(255, 226, 87, 0.7);
}

.battle-preview-bar,
.rogue-hud-bar {
  background: var(--ui-panel-dark);
  border: 2px solid rgba(240, 189, 66, 0.78);
  box-shadow: 0 5px 0 rgba(93, 42, 15, 0.75), 0 10px 18px rgba(0,0,0,0.32);
}

.preview-title,
.preview-summary,
.hud-item .val {
  color: #fff1bd;
}

@media (max-width: 520px) {
  .mode-selection-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .mode-grid,
  .mode-selection-footer {
    width: 100%;
  }

  .modal-card {
    width: min(92vw, 430px);
    padding: 16px;
    border-width: 3px;
  }

  .modal-actions {
    gap: 8px;
    flex-wrap: wrap;
  }

  .modal-btn {
    min-width: calc(50% - 4px);
  }

  .setting-item {
    gap: 10px;
  }

  .grid-mode-card {
    grid-template-columns: 48px 1fr;
    padding: 10px 12px;
    min-height: 76px;
  }

  .card-icon {
    font-size: 1.9rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .mode-badge {
    font-size: 0.58rem;
    padding: 2px 6px;
  }
}

/* Requested lobby art + tactile controls */
.home-screen-content.lobby {
  background-color: #129ee3;
  background-image: url("./assets/lobby-main-bg.jpg");
  background-position: center center;
  background-size: cover;
}

@media (pointer: coarse), (max-width: 520px) {
  .home-screen-content.lobby {
    background-image: url("./assets/lobby-main-bg-mobile.jpg");
  }
}

.home-screen-content.lobby .lobby-topbar,
.home-screen-content.lobby #page-journey .lobby-side-rail,
.home-screen-content.lobby #page-journey .lobby-stage,
.home-screen-content.lobby .lobby-bottomnav {
  opacity: 1;
}

.home-screen-content.lobby .lobby-logo,
.home-screen-content.lobby .lobby-character {
  display: none;
}

.home-screen-content.lobby .lobby-pages {
  top: calc(76px + env(safe-area-inset-top));
  bottom: calc(84px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.home-screen-content.lobby .lobby-page {
  pointer-events: auto;
}

.home-screen-content.lobby #page-journey {
  pointer-events: none;
}

.home-screen-content.lobby #page-journey .lobby-side-rail,
.home-screen-content.lobby #page-journey .lobby-play,
.home-screen-content.lobby #page-journey .lobby-play button {
  pointer-events: auto;
}

.home-screen-content.lobby #page-journey .lobby-side-rail {
  left: max(10px, env(safe-area-inset-left));
  top: 45%;
  gap: 12px;
}

.home-screen-content.lobby .lobby-stage {
  justify-content: flex-end;
  gap: 10px;
  padding: 0 72px clamp(142px, 18vh, 210px);
  pointer-events: none;
}

.home-screen-content.lobby .lobby-topbar {
  top: calc(10px + env(safe-area-inset-top));
  gap: 8px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

.home-screen-content.lobby .lobby-avatar-block,
.home-screen-content.lobby .res-pill,
.home-screen-content.lobby .lobby-gear,
.home-screen-content.lobby .rail-icon,
.home-screen-content.lobby .nav-tab,
.home-screen-content.lobby .lobby-continue-btn {
  --button-depth: 7px;
  --button-press-depth: 1px;
  --button-base-color: rgba(80, 28, 18, 0.96);
  border: 3px solid rgba(255, 216, 85, 0.9);
  color: #fff4c8;
  text-shadow: 0 2px 0 rgba(73, 20, 8, 0.58);
  box-shadow:
    0 var(--button-depth) 0 rgba(82, 31, 15, 0.86),
    0 12px 18px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.44),
    inset 0 -3px 0 rgba(77, 16, 9, 0.22);
}

.home-screen-content.lobby .lobby-avatar-block,
.home-screen-content.lobby .res-pill {
  background:
    linear-gradient(180deg, rgba(255, 235, 155, 0.22), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #b93247 0%, #831f34 58%, #521121 100%);
}

.home-screen-content.lobby .lobby-avatar-block {
  max-width: 184px;
  padding: 5px 12px 5px 5px;
}

.home-screen-content.lobby .lobby-avatar {
  background: radial-gradient(circle at 34% 28%, #7fd5ff, #226cda 70%);
  border-color: #ffe480;
}

.home-screen-content.lobby .res-pill {
  padding: 5px 5px 5px 11px;
  min-height: 42px;
}

.home-screen-content.lobby .res-plus,
.home-screen-content.lobby .lobby-gear {
  --button-base-color: rgba(45, 105, 35, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #237a35 0%, #19662d 66%, #0f4520 100%);
  border-color: rgba(255, 226, 101, 0.94);
  color: #fff9d2;
}

.home-screen-content.lobby .res-plus {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.home-screen-content.lobby .rail-icon {
  width: 60px;
  min-height: 68px;
  padding: 6px 4px 7px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 240, 171, 0.34), rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, #b52f45 0%, #7a1f31 62%, #48111e 100%);
}

.home-screen-content.lobby .rail-emoji {
  width: 42px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff5b8 0%, #e5a23b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    0 3px 6px rgba(56, 12, 8, 0.34);
}

.home-screen-content.lobby .rail-label,
.home-screen-content.lobby .nav-label {
  color: #fff1bd;
  font-weight: 800;
}

.home-screen-content.lobby .lobby-play-btn {
  --button-depth: 8px;
  --button-press-depth: 1px;
  min-width: min(250px, 62vw);
  min-height: 62px;
  border: 4px solid rgba(255, 231, 96, 0.98);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 241, 177, 0.28), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #8f4331 0%, #5d211c 58%, #351112 100%);
  box-shadow:
    0 var(--button-depth) 0 rgba(80, 37, 12, 0.94),
    0 16px 26px rgba(0, 0, 0, 0.3),
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 0 rgba(38, 13, 11, 0.46);
  animation: none;
}

.home-screen-content.lobby .lobby-play-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.home-screen-content.lobby .lobby-play-btn:active {
  transform: translateY(calc(var(--button-depth) - var(--button-press-depth))) scale(0.985);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.24),
    inset 0 5px 8px rgba(37, 12, 10, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.home-screen-content.lobby .lobby-continue-btn {
  background:
    linear-gradient(180deg, rgba(255, 241, 177, 0.24), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #8a3f2f 0%, #54201b 62%, #321111 100%);
}

.home-screen-content.lobby .lobby-bottomnav {
  gap: 7px;
  padding: 8px 9px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(115, 43, 27, 0.78), rgba(56, 20, 16, 0.88));
  border-top: 3px solid rgba(255, 221, 91, 0.88);
  box-shadow:
    0 -8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(4px);
}

.home-screen-content.lobby .nav-tab {
  min-height: 55px;
  padding: 5px 2px 6px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 241, 163, 0.26), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #a72b3d 0%, #711c2b 62%, #42101b 100%);
}

.home-screen-content.lobby .nav-tab[data-page="journey"] {
  min-height: 64px;
  margin: -14px 0 0;
  border-radius: 20px 20px 15px 15px;
  background:
    linear-gradient(180deg, rgba(255, 248, 183, 0.32), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #237a35 0%, #19662d 63%, #0f4520 100%);
}

.home-screen-content.lobby .nav-tab.active {
  color: #fff7c9;
  filter: brightness(1.08) saturate(1.06);
}

/* Bottom battle navigation is a segmented control. Keep the selected segment
   dark with a light label, including the component's generated depth layer,
   so WebView stacking differences cannot produce dark text on brown. */
.battle-map-tab.active {
  --okey-button-text: #fff7c2;
  --okey-button-base: #48101f;
  --okey-button-ink: rgba(255, 231, 126, 0.58);
  background: linear-gradient(180deg, #9f2941 0%, #711b31 58%, #48101f 100%);
  color: #fff7c2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
  border-color: #ffe77e;
}

.battle-map-tab.active > b {
  color: #fff7c2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.battle-map-tab:not(.active) {
  --okey-button-text: #fff4c8;
}

.battle-map-tab:not(.active) > b {
  color: #fff4c8 !important;
}

.home-screen-content.lobby .nav-emoji {
  filter: drop-shadow(0 2px 1px rgba(67, 17, 7, 0.42));
}

.home-screen-content.lobby .lobby-avatar-block:active,
.home-screen-content.lobby .lobby-gear:active,
.home-screen-content.lobby .rail-icon:active,
.home-screen-content.lobby .nav-tab:active,
.home-screen-content.lobby .lobby-continue-btn:active {
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 4px 8px rgba(55, 16, 7, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (max-width: 430px) {
  .home-screen-content.lobby .lobby-topbar {
    gap: 5px;
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }

  .home-screen-content.lobby .lobby-avatar-block {
    flex-basis: 116px;
    max-width: 138px;
  }

  .home-screen-content.lobby .lobby-pname,
  .home-screen-content.lobby .lobby-xpbar {
    max-width: 62px;
  }

  .home-screen-content.lobby .lobby-resources {
    gap: 4px;
  }

  .home-screen-content.lobby .res-pill {
    gap: 3px;
    min-height: 39px;
    padding-left: 8px;
  }

  .home-screen-content.lobby .res-val {
    font-size: 0.78rem;
  }

  .home-screen-content.lobby #page-journey .lobby-side-rail {
    left: max(6px, env(safe-area-inset-left));
    top: 46%;
  }

  .home-screen-content.lobby .rail-icon {
    width: 54px;
    min-height: 62px;
    border-radius: 16px;
  }

  .home-screen-content.lobby .rail-emoji {
    width: 38px;
    height: 34px;
    font-size: 1.28rem;
  }

  .home-screen-content.lobby .rail-label,
  .home-screen-content.lobby .nav-label {
    font-size: 0.6rem;
  }

  .home-screen-content.lobby .lobby-stage {
    padding: 0 64px clamp(128px, 17vh, 170px);
  }

  .home-screen-content.lobby .lobby-play-btn {
    min-width: min(218px, 58vw);
    min-height: 56px;
    padding: 12px 28px;
    font-size: 1.05rem;
  }

  .home-screen-content.lobby .lobby-bottomnav {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .home-screen-content.lobby .nav-tab {
    min-height: 52px;
  }
}

.dev-qa-card {
  max-width: min(92vw, 520px);
}

.bo-build-shop {
  margin: 14px 0 4px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(35, 20, 11, 0.58);
  border: 1px solid rgba(255, 212, 122, 0.24);
}

.bo-stage-map {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.bo-stage-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 4px 2px;
  color: #fff7d8;
}

.bo-stage-node::before {
  content: "";
  position: absolute;
  left: -50%;
  right: 50%;
  top: 18px;
  height: 4px;
  background: rgba(255, 220, 126, 0.35);
  z-index: 0;
}

.bo-stage-node:first-child::before {
  display: none;
}

.bo-stage-node b {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #5a3520, #24130c);
  border: 2px solid rgba(255, 220, 126, 0.58);
  box-shadow: 0 4px 10px rgba(0,0,0,0.28);
  font-size: 0.82rem;
}

.bo-stage-node small {
  font-size: 0.58rem;
  font-weight: 900;
  opacity: 0.82;
  white-space: nowrap;
}

.bo-stage-node.done b {
  background: linear-gradient(180deg, #2f8b4d, #14552c);
}

.bo-stage-node.current b {
  border-color: #fff4ac;
  box-shadow: 0 0 0 3px rgba(255, 244, 172, 0.22), 0 6px 14px rgba(0,0,0,0.28);
}

.bo-stage-node.boss b {
  background: linear-gradient(180deg, #bb3152, #5c1027);
}

.battle-run-card.difficulty-locked .battle-run-stake .battle-run-info-card {
  filter: grayscale(0.35);
  opacity: 0.78;
}

.bo-build-shop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #fff4d6;
  font-weight: 900;
  flex-wrap: wrap;
}

.bo-build-shop-head b {
  color: #ffd45f;
}

.bo-shop-refresh-btn {
  min-height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255, 238, 174, 0.82);
  background: linear-gradient(180deg, #2f8b4d, #14552c);
  color: #fff7d8 !important;
  font-weight: 1000;
  padding: 5px 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.24);
}

.bo-shop-refresh-btn:disabled,
.bo-shop-refresh-btn.is-disabled {
  background: linear-gradient(180deg, #6a6a6a, #343434);
  color: #fff2d0 !important;
  opacity: 0.72;
}

.bo-build-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bo-build-card {
  min-height: 138px;
  border-radius: 10px;
  padding: 10px;
  border: 2px solid rgba(255, 213, 92, 0.45);
  background: linear-gradient(180deg, #8a4b22, #4e2613);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 18px rgba(0,0,0,0.24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
}

.bo-build-card b {
  font-size: 0.98rem;
}

.bo-build-card small {
  color: #fff5dc !important;
  font-size: 0.76rem;
  line-height: 1.3;
}

.bo-build-card i {
  color: #ffe08a;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 900;
}

.bo-build-type {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 244, 214, 0.16);
  font-size: 0.68rem;
  font-weight: 900;
}

.bo-build-card.is-disabled {
  opacity: 0.55;
}

.bo-build-card.is-owned {
  background: linear-gradient(180deg, #41514a, #202a26);
  border-color: rgba(190, 242, 195, 0.5);
  opacity: 0.78;
}

.bo-free-choice {
  display: grid;
  gap: 12px;
}

.bo-free-choice .bo-build-card {
  min-height: 128px;
}

.bo-evolution-choice {
  display: grid;
  gap: 10px;
  text-align: center;
}

.bo-evolution-kicker,
.bo-evolution-reward {
  justify-self: center;
  padding: 4px 9px;
  border: 1px solid rgba(255, 231, 147, 0.48);
  border-radius: 999px;
  background: rgba(12, 27, 35, 0.62);
  color: #ffe8a3;
  font-size: 0.72rem;
  font-weight: 1000;
}

.bo-evolution-title {
  color: #fff4c8;
  font-size: 1.08rem;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(66, 20, 8, 0.62);
}

.bo-evolution-choice p {
  margin: 0;
  color: #ecd2a6;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
}

.bo-evolution-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bo-evolution-card {
  min-width: 0;
  min-height: 238px;
  display: grid;
  grid-template-rows: auto minmax(116px, 1fr) auto auto auto;
  gap: 6px;
  align-content: start;
  padding: 10px 9px 9px;
  border: 2px solid rgba(255, 231, 147, 0.62);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 238, 167, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(36, 78, 75, 0.98), rgba(16, 35, 43, 0.98));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px rgba(0,0,0,0.24);
  text-align: center;
}

.bo-evolution-card:active {
  transform: translateY(1px);
}

@media (hover: hover) {
  .bo-evolution-card:hover {
    border-color: #ffe68f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 9px 22px rgba(0,0,0,0.3);
    transform: translateY(-2px);
  }
}

.bo-evolution-route {
  justify-self: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 238, 167, 0.14);
  color: #9ee9ff;
  font-size: 0.66rem;
  font-weight: 1000;
}

.bo-evolution-art {
  position: relative;
  min-height: 116px;
  display: block;
}

.bo-evolution-art > span {
  position: absolute;
  border: 1px solid rgba(255, 238, 167, 0.54);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 246, 199, 0.82), rgba(49, 83, 74, 0.78));
  overflow: hidden;
}

.bo-evolution-next {
  inset: 0 0 0 15%;
}

.bo-evolution-current {
  z-index: 2;
  left: 0;
  bottom: 5px;
  width: 42%;
  aspect-ratio: 1;
  box-shadow: 0 3px 9px rgba(0,0,0,0.42);
  filter: saturate(0.72) brightness(0.76);
}

.bo-evolution-art i {
  position: absolute;
  z-index: 3;
  left: 34%;
  bottom: 17%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #ffe08a;
  color: #17363d;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.42);
}

.bo-evolution-card strong {
  min-width: 0;
  color: #fff4c8;
  font-size: 0.9rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.bo-evolution-name.old {
  min-width: 0;
  overflow: hidden;
  color: #c9e8dd;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-evolution-select {
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffe38b, #d69c2f);
  color: #3c1d0d;
  font-size: 0.7rem;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 rgba(81, 40, 10, 0.7);
}

.bo-evolution-complete {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.bo-evolution-stage {
  position: relative;
  width: min(72vw, 320px);
  height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bo-evolution-portrait {
  position: absolute;
  width: 118px;
  height: 118px;
  border: 2px solid rgba(255, 238, 167, 0.78);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 36%, rgba(255, 246, 199, 0.9), rgba(49, 83, 74, 0.82));
  overflow: hidden;
}

.bo-evolution-portrait.old {
  animation: bo-evolution-old 1.25s ease both;
}

.bo-evolution-portrait.new {
  animation: bo-evolution-new 1.25s ease both;
}

.bo-evolution-ring,
.bo-evolution-burst {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bo-evolution-ring {
  width: 118px;
  height: 118px;
  border: 3px solid rgba(125, 211, 252, 0.86);
  box-shadow: 0 0 22px rgba(125, 211, 252, 0.72), inset 0 0 18px rgba(255, 231, 147, 0.58);
  animation: bo-evolution-ring 1.25s ease-out both;
}

.bo-evolution-burst {
  width: 34px;
  height: 34px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.96), rgba(255, 231, 147, 0.9) 35%, rgba(125, 211, 252, 0.54) 62%, transparent 72%);
  animation: bo-evolution-burst 1.25s ease-out both;
}

.bo-evolution-complete-copy h3 {
  margin: 3px 0;
  color: #fff4c8;
  font-size: 1.25rem;
  text-shadow: 0 2px 0 rgba(66, 20, 8, 0.62);
}

.bo-evolution-complete-copy span,
.bo-evolution-complete-copy p {
  margin: 0;
  color: #c9e8dd;
  font-weight: 900;
}

@keyframes bo-evolution-old {
  0% { opacity: 1; transform: translateX(-70px) scale(0.92); filter: brightness(0.92); }
  48% { opacity: 1; transform: translateX(-8px) scale(1); filter: brightness(1.18); }
  100% { opacity: 0; transform: translateX(0) scale(0.6) rotate(-8deg); filter: brightness(1.8) blur(1px); }
}

@keyframes bo-evolution-new {
  0%, 48% { opacity: 0; transform: translateX(34px) scale(0.62); filter: brightness(1.8) blur(1px); }
  72% { opacity: 1; transform: translateX(8px) scale(1.12); filter: brightness(1.35); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}

@keyframes bo-evolution-ring {
  0% { opacity: 0; transform: scale(0.35) rotate(0deg); }
  42% { opacity: 1; transform: scale(0.92) rotate(130deg); }
  100% { opacity: 0; transform: scale(1.85) rotate(260deg); }
}

@keyframes bo-evolution-burst {
  0%, 44% { opacity: 0; transform: scale(0.2); }
  58% { opacity: 1; transform: scale(3.2); }
  100% { opacity: 0; transform: scale(5.2); }
}

@keyframes bo-evolution-shock {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  18% { transform: translate3d(5px, -3px, 0) scale(1.018); }
  34% { transform: translate3d(-4px, 2px, 0) scale(1.012); }
  52% { transform: translate3d(3px, 1px, 0) scale(1.006); }
  70% { transform: translate3d(-2px, -1px, 0) scale(1.002); }
}

@media (max-width: 560px) {
  .bo-build-options {
    grid-template-columns: 1fr;
  }

  .bo-free-choice .bo-build-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .bo-free-choice .bo-build-card {
    min-height: 178px;
    padding: 8px 7px;
    gap: 5px;
  }

  .bo-free-choice .bo-build-card b {
    font-size: 0.84rem;
    line-height: 1.12;
  }

  .bo-free-choice .bo-build-card small {
    font-size: 0.68rem;
    line-height: 1.22;
  }

  .bo-free-choice .bo-build-card i {
    font-size: 0.7rem;
  }

  .bo-free-choice .bo-build-type {
    font-size: 0.58rem;
    padding: 2px 5px;
  }

  .bo-build-card {
    min-height: 104px;
  }

  .bo-evolution-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .bo-evolution-card {
    min-height: 190px;
    grid-template-rows: auto minmax(84px, 1fr) auto auto auto;
    gap: 4px;
    padding: 7px 5px 6px;
  }

  .battle-outcome-card.is-evolution-choice {
    width: 96vw;
    padding: 12px 8px;
    gap: 8px;
  }

  .battle-outcome-card.is-evolution-choice > h2 {
    margin: 0;
    padding-bottom: 6px;
    font-size: 1.15rem;
  }

  .battle-outcome-card.is-evolution-choice .battle-outcome-body {
    margin: 2px 0 4px;
  }

  .bo-evolution-choice {
    gap: 7px;
  }

  .bo-evolution-choice p {
    font-size: 0.68rem;
  }

  .bo-evolution-art {
    min-height: 84px;
  }

  .bo-evolution-current {
    width: 44%;
  }

  .bo-evolution-art i {
    left: 31%;
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
  }

  .bo-evolution-route {
    font-size: 0.58rem;
  }

  .bo-evolution-card strong {
    min-height: 2.24em;
    display: grid;
    place-items: center;
    font-size: 0.73rem;
  }

  .bo-evolution-name.old {
    font-size: 0.58rem;
  }

  .bo-evolution-select {
    min-height: 25px;
    font-size: 0.62rem;
  }
}

.dev-qa-note {
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.45;
}

.dev-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.dev-qa-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #f7ead2;
  font-weight: 800;
  font-size: 0.86rem;
}

.dev-qa-grid input,
.dev-qa-grid select {
  min-height: 38px;
  border: 2px solid rgba(255, 220, 150, 0.45);
  border-radius: 8px;
  background: rgba(43, 25, 12, 0.78);
  color: #ffffff;
  font-weight: 800;
  padding: 0 10px;
}

.dev-qa-grid button {
  min-height: 44px;
}

@media (max-width: 520px) {
  .dev-qa-grid {
    grid-template-columns: 1fr;
  }
}

.modal-card.battle-codex-detail-card {
  width: min(94vw, 560px);
  max-width: 560px;
  max-height: min(88vh, 640px);
  padding: 16px;
  gap: 12px;
  border: 2px solid rgba(255, 226, 119, 0.72);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(36, 78, 75, 0.98), rgba(14, 31, 38, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 36px rgba(0,0,0,0.48);
  color: #ffffff;
  overflow: auto;
}

.modal-card.battle-codex-detail-card.is-level-detail {
  width: min(96vw, 720px);
  max-width: 720px;
}

.okey-game-modal-overlay {
  --okey-modal-enter-y: 12px;
  --okey-modal-enter-scale: 0.92;
  --okey-modal-enter-duration: 260ms;
  --okey-modal-enter-ease: cubic-bezier(0.18, 0.92, 0.2, 1.18);
}

.okey-game-modal-card {
  opacity: 0;
  transform: translateY(var(--okey-modal-enter-y)) scale(var(--okey-modal-enter-scale));
  transform-origin: center center;
  transition:
    opacity 180ms ease,
    transform var(--okey-modal-enter-duration) var(--okey-modal-enter-ease);
}

.okey-game-modal-overlay.visible .okey-game-modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.okey-game-modal-close {
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 110ms ease,
    filter 110ms ease,
    box-shadow 110ms ease;
}

.okey-game-modal-close:active {
  transform: translateY(2px) scale(0.92) !important;
  filter: brightness(0.92) saturate(1.02);
  box-shadow: 0 1px 0 rgba(44, 22, 12, 0.85), 0 3px 6px rgba(0,0,0,0.2) !important;
}

.battle-codex-detail-card > .battle-codex-detail-close,
.battle-tech-detail-card > .battle-tech-detail-close,
.battle-intro-card > .battle-intro-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 10px !important;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(0) scale(1);
}

.battle-codex-detail-card > .battle-codex-detail-close::before,
.battle-codex-detail-card > .battle-codex-detail-close::after,
.battle-tech-detail-card > .battle-tech-detail-close::before,
.battle-tech-detail-card > .battle-tech-detail-close::after,
.battle-intro-card > .battle-intro-close::before,
.battle-intro-card > .battle-intro-close::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .okey-game-modal-card,
  .okey-game-modal-close {
    transition: none !important;
  }
}

/* Project-wide button foreground standard.
   Every native button and every text-bearing descendant renders white in all
   states. Keep this rule last so feature and theme styles cannot lower label
   contrast by reintroducing dark or muted text. */
button:not(#okey-button-color-override#okey-button-color-override-2),
button:not(#okey-button-color-override#okey-button-color-override-2):active,
button:not(#okey-button-color-override#okey-button-color-override-2):hover,
button:not(#okey-button-color-override#okey-button-color-override-2):focus,
button:not(#okey-button-color-override#okey-button-color-override-2):disabled,
button:not(#okey-button-color-override#okey-button-color-override-2)[aria-disabled="true"] {
  --okey-button-text: #ffffff;
  color: #ffffff !important;
}

button:not(#okey-button-color-override#okey-button-color-override-2) > *,
button:not(#okey-button-color-override#okey-button-color-override-2) b,
button:not(#okey-button-color-override#okey-button-color-override-2) strong,
button:not(#okey-button-color-override#okey-button-color-override-2) small,
button:not(#okey-button-color-override#okey-button-color-override-2) span,
button:not(#okey-button-color-override#okey-button-color-override-2) .button-label,
button:not(#okey-button-color-override#okey-button-color-override-2) .trigger-text,
button:not(#okey-button-color-override#okey-button-color-override-2) .trigger-arrow {
  color: #ffffff !important;
}