/* ═══════════════════════════════════════════════════════════════
   style.css — 8-bit arcade theme for American Mahjong
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   :root — MANIFEST DEFAULT VALUES  (Classic Sand / Sandstorm)
   ─────────────────────────────────────────────────────────────
   Every value here corresponds 1-to-1 with a manifest schema key
   (see manifests/schema.py VAR_MAP).  ThemeManager.loadGlobalManifest()
   overrides these by injecting a <style id="tm-global"> rule on :root.
   The DR injects a scoped <style id="tm-local"> on #screen-dr only.
   These defaults ensure the game is always renderable even before
   a manifest is loaded from the server.

   RULES:
   • Never put a hardcoded hex/value in any rule below :root for anything
     covered by VAR_MAP — always reference the var.
   • Non-manifest derived vars (wall gradients, tile sizing, chat chrome)
     stay here as computed values.
   • Font-base size constants (--font-base-sm/md/lg/xl) are immutable —
     they define the scale ladder and are never overridden by manifests.
══════════════════════════════════════════════════════════════ */
:root {

  /* ── Font system ───────────────────────────────────────────── */
  /* Size ladder — immutable constants, never overridden by manifests */
  --font-base-sm: 12px;
  --font-base-md: 14px;
  --font-base-lg: 16px;
  --font-base-xl: 20px;
  /* Active base tier — manifest typography.fontBase sets this   */
  --font-base:  var(--font-base-md);
  /* Scale multiplier — manifest typography.fontScale sets this  */
  --font-scale: 1;
  /* Family — manifest typography.font sets this                 */
  --font: 'Press Start 2P', monospace;

  /* ── Backgrounds  (manifest: colors.bg / bgCard / pageBg) ──── */
  --bg:        #F0EBE0;
  --bg-card:   #E8DDD0;
  --page-bg:   #E8DECA;

  /* ── Neutrals  (manifest: colors.dark / mid / light) ────────── */
  --dark:      #1a1a1a;
  --mid:       #5a5a5a;
  --light:     #FEFAF5;

  /* ── Mat  (manifest: colors.mat / matBorder) ─────────────────── */
  --mat:        #D4C9B4;
  --mat-border: #A09080;

  /* ── Tiles  (manifest: colors.tileFace / tileBorder) ─────────── */
  --tile-face:       #FEFAF5;
  --tile-bg:         #FEFAF5;   /* alias — kept for legacy tile-style CSS */
  --tile-border-clr: #333;
  --tile-border:     #333;      /* alias — kept for legacy tile-style CSS */

  /* ── Accents  (manifest: colors.gold / goldHi) ───────────────── */
  --gold:    #C68B00;
  --gold-lt: #FFD700;

  /* ── Semantic colors  (manifest: colors.red / error) ─────────── */
  --red:   #8B1A1A;
  --error: #CC2200;

  /* ── Tile suits  (manifest: colors.bam/dot/crack/wind/joker/blank/flower) */
  --bam:    #1B6B35;
  --dot:    #A02020;
  --crack:  #1A3F6B;
  --wind:   #5B1B8B;
  --joker:  #B8860B;
  --blank:  #506070;
  --flower: #9B1B5B;

  /* ── Border radii  (manifest: shape.*) ───────────────────────── */
  --radius-btn:   0px;
  --radius-tile:  2px;
  --radius-card:  0px;
  --radius-panel: 4px;
  --radius-modal: 0px;
  --radius-input: 0px;

  /* ── Font vars  (manifest: typography.font / fontBase / fontScale) */
  /* --font, --font-base, --font-scale already declared above        */

  /* ── Mat pattern  (manifest: mat.pattern / mat.patternColor) ──── */
  /* data-mat-pattern attr on #mat-wrapper drives CSS pattern rules  */
  --mat-pattern-clr: transparent;   /* null manifest value = no pattern overlay */

  /* ── Tile texture  (manifest: tile.textureColor) ─────────────── */
  --tile-texture-clr: transparent;

  /* ════════════════════════════════════════════════════════════
     DERIVED / COMPUTED VARS
     These are NOT in VAR_MAP — they are calculated from the
     manifest vars above and are never injected by ThemeManager.
     Wall gradients, tile sizing, UI chrome all live here.
     ════════════════════════════════════════════════════════════ */

  /* ── Page texture — derived from manifest colors so it adapts to any theme ── */
  --page-pattern:
    radial-gradient(circle, color-mix(in srgb, var(--dark) 40%, transparent)   1px,   transparent 1px),
    radial-gradient(circle, color-mix(in srgb, var(--mid)  30%, transparent)    1.4px, transparent 1.4px),
    radial-gradient(circle, color-mix(in srgb, var(--mat)  22%, transparent)    1.8px, transparent 1.8px),
    radial-gradient(circle, color-mix(in srgb, var(--dark) 18%, transparent)    0.7px, transparent 0.7px),
    radial-gradient(circle, color-mix(in srgb, var(--mid)  12%, transparent)    1px,   transparent 1px);
  --page-pattern-size: 8px 10px, 14px 12px, 20px 18px, 5px 6px, 27px 22px;
  --page-pattern-pos:  0 0, 4px 5px, 8px 2px, 2px 3px, 13px 9px;

  --page-bg-calm: color-mix(in srgb, var(--page-bg) 95%, var(--bg));
  --page-pattern-calm:
    radial-gradient(circle, color-mix(in srgb, var(--dark) 8%, transparent)  1px,   transparent 1px),
    radial-gradient(circle, color-mix(in srgb, var(--mid)  6%, transparent)   1.5px, transparent 1.5px),
    radial-gradient(circle, color-mix(in srgb, var(--mat)  5%, transparent)   0.8px, transparent 0.8px),
    radial-gradient(circle, color-mix(in srgb, var(--dark) 4%, transparent)   1.2px, transparent 1.2px);
  --page-pattern-calm-size: 51px 47px, 89px 73px, 31px 41px, 67px 59px;
  --page-pattern-calm-pos:  0 0, 27px 34px, 14px 9px, 43px 21px;

  /* ── Tile back (face-down) — derived from manifest mat/dark vars ─ */
  --tile-shadow-clr:  color-mix(in srgb, var(--mid)  60%, var(--bg));
  --tile-back-a:      color-mix(in srgb, var(--mat)   55%, var(--dark));
  --tile-back-b:      color-mix(in srgb, var(--mat)   35%, var(--dark));
  --tile-back-border: var(--mat-border);
  --tile-back-shadow: color-mix(in srgb, var(--dark)  80%, black);

  /* ── Mat & wall derived (computed from manifest base vars) ─────── */
  --shadow:                 color-mix(in srgb, var(--dark) 60%, var(--mid));
  --wall-strip-bg:          color-mix(in srgb, var(--mat) 55%, var(--bg));
  --wall-seg-grad:          linear-gradient(150deg, color-mix(in srgb, var(--mat) 30%, var(--dark)), color-mix(in srgb, var(--mat) 45%, var(--dark)));
  --wall-seg-border-clr:    color-mix(in srgb, var(--dark) 45%, var(--mat));
  --wall-seg-active-grad:   linear-gradient(150deg, color-mix(in srgb, var(--gold) 20%, var(--light)), color-mix(in srgb, var(--gold) 20%, var(--dark)));
  --wall-seg-active-border: color-mix(in srgb, var(--gold) 35%, var(--dark));
  --wall-count-clr:         color-mix(in srgb, var(--mid) 20%, var(--bg));
  --wall-roll-bg:           color-mix(in srgb, var(--dark) 60%, var(--bg));
  --mat-inner-shadow:       color-mix(in srgb, var(--dark) 80%, var(--bg));
  --mat-deck-clr:           var(--mat);

  /* ── UI chrome — derived from manifest vars ──────────────────── */
  --autocall-bg:       color-mix(in srgb, var(--bg) 85%, black);
  --tray-seg-bg:       rgba(0,0,0,.10);
  --hand-up-bg:        rgba(255,255,255,.25);
  --hand-up-border:    rgba(0,0,0,.10);
  --home-btn-border:   rgba(255,255,255,.30);
  --chat-input-bg:     color-mix(in srgb, var(--bg) 60%, black);
  --chat-input-border: color-mix(in srgb, var(--mid) 50%, var(--bg));
  --chat-msg-clr:      var(--light);
  --chat-bg:           var(--dark);

  /* ── Semantic tokens (derived from manifest vars) ─────────────── */
  --tx:          var(--dark);
  --tx-sub:      var(--mid);
  --tx-dim:      color-mix(in srgb, var(--mid) 55%, var(--bg));
  --tx-on-dark:  var(--light);
  --tx-head:     var(--gold);
  --tx-head-hi:  var(--gold-lt);
  --tx-err:      var(--error);

  --surf:        var(--bg);
  --surf-card:   var(--bg-card);
  --surf-modal:  var(--bg);
  --surf-panel:  var(--mat);
  --surf-input:  var(--light);

  --bd:          var(--dark);
  --bd-sub:      var(--mid);

  /* ── Tile sizing (layout, not theme) ─────────────────────────── */
  --tile-w:         clamp(22px, min(2.5vw, 5.2vh), 42px);
  --tile-h:         calc(var(--tile-w) * 1.42);
  --tile-band-h:    calc(var(--tile-w) * 0.28);
  --tile-font:      calc(var(--tile-w) * 0.29);

  --tile-sm-w:      calc(var(--tile-w) * 0.72);
  --tile-sm-h:      calc(var(--tile-h) * 0.72);
  --tile-sm-band-h: calc(var(--tile-sm-w) * 0.28);
  --tile-sm-font:   calc(var(--tile-sm-w) * 0.29);
  /* Reference width for icon sizing — overridden on tile-sm and tile-md */
  --tile-size-ref:  var(--tile-w);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  isolation: isolate;       /* stacking context → z:-1 bg canvas sits behind all content */
  font-family: var(--font);
  background: var(--surf);
  color: var(--tx);
  min-height: 100vh;
  overflow-x: hidden;
  scrollbar-gutter: stable; /* reserve scrollbar space always so layout never shifts */
}

/* ── Screen switching ──────────────────────────────────────────── */
.screen           { display: none; }
.screen.active    { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════
   PAGE LOADER — full-screen overlay, shown until initApp() settles
════════════════════════════════════════════════════════════════ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--page-bg, #E8DECA);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}
#page-loader.loader-done {
  opacity: 0;
  pointer-events: none;
}

.loader-tile-wrap {
  /* Change --loader-gap to tune space between tile edges and ring */
  --loader-tile-w: 52px;
  --loader-tile-h: 70px;
  --loader-gap: 24px;
  --loader-ring-size: calc(var(--loader-tile-w) + var(--loader-gap) * 2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--loader-ring-size);
  height: var(--loader-ring-size);
}

/* Spinning gold ring (circular — classic, clean) */
.loader-ring {
  position: absolute;
  width: var(--loader-ring-size);
  height: var(--loader-ring-size);
  border-radius: 50%;
  border: 3px solid var(--mat, #D4C9B4);
  border-top-color:  var(--gold, #C68B00);
  border-right-color: var(--gold, #C68B00);
  animation: loader-spin 1.1s linear infinite;
  box-sizing: border-box;
}

/* Tile silhouette — mirrors real .tile structure */
.loader-tile {
  width: var(--loader-tile-w);
  height: var(--loader-tile-h);
  background: var(--tile-face, #FEFAF5);
  border: 2px solid var(--tile-border-clr, #333);
  border-radius: var(--radius-tile, 4px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: loader-pulse 1.1s ease-in-out infinite;
}

.loader-tile-band {
  height: 14px;
  background: var(--gold, #C68B00);
  flex-shrink: 0;
}

.loader-tile-face {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  font-family: serif;
  color: var(--dark, #1a1a1a);
}

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

@keyframes loader-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(0.91); opacity: 0.80; }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN SCREEN
════════════════════════════════════════════════════════════════ */
#screen-main {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
  width: 100%;
  gap: 14px;
  position: relative;
  background-color: var(--page-bg);
  background-image: var(--page-pattern);
  background-size: var(--page-pattern-size);
  background-position: var(--page-pattern-pos);
}

/* Ambient engine: lift main-menu & settings UI above the back canvas (z:8)
   so back-tier sprites appear behind buttons/cards visually.           */
#screen-main  .menu-panel,
#screen-main  .title,
#screen-main  .subtitle,
#screen-main  .auth-welcome,
#screen-main  .settings-card,
#screen-settings .btn-menu,
#screen-settings .settings-card,
#screen-settings .screen-title {
  position: relative;
  z-index: 10;
}

/* Calm / muted background variant — fewer, sporadic dots */
#screen-main.bg-calm {
  background-color: var(--page-bg-calm);
  background-image: var(--page-pattern-calm);
  background-size: var(--page-pattern-calm-size);
  background-position: var(--page-pattern-calm-pos);
}

/* Admin: texture disabled globally */
body.no-bg-texture #screen-main {
  background-image: none !important;
}

/* Ambient background canvas active — clear screen's own background
   so the pixel-art backdrop on the z:-1 canvas shows through.     */
body.ambient-bg-active #screen-main,
body.ambient-bg-active #screen-settings,
body.ambient-bg-active #screen-design-room,
body.ambient-bg-active #screen-admin,
body.ambient-bg-active #screen-auth {
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Admin-selected home texture overrides ───────────────────── */
/* Applied via home-tex-{name} class on #screen-main              */
#screen-main.home-tex-none {
  background-image: none !important;
}
#screen-main.home-tex-calm {
  background-image: var(--page-pattern-calm) !important;
  background-size:  var(--page-pattern-calm-size) !important;
  background-position: var(--page-pattern-calm-pos) !important;
}
#screen-main.home-tex-dots_dense {
  background-image: radial-gradient(circle, rgba(0,0,0,.22) 1px, transparent 1px) !important;
  background-size: 7px 7px !important;
}
#screen-main.home-tex-grid {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 22px) !important;
  background-size: 22px 22px !important;
}
#screen-main.home-tex-diagonal {
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.09) 0 1px, transparent 1px 14px) !important;
  background-size: 20px 20px !important;
}
#screen-main.home-tex-felt {
  background-image:
    radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(0,0,0,.07) 1px, transparent 1px) !important;
  background-size: 4px 4px, 8px 8px !important;
  background-position: 0 0, 2px 2px !important;
}
#screen-main.home-tex-tile {
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.04) 0 32px, transparent 32px 33px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 32px, transparent 32px 33px) !important;
  background-size: 8px 8px, 8px 8px, 33px 33px, 33px 33px !important;
}

/* ── Admin texture picker ─────────────────────────────────────── */
.admin-ms-tex-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.admin-ms-tex-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Live mini-preview panel */
.admin-ms-tex-preview {
  flex: 1;
  height: 160px;
  border: 1px solid var(--mat-border);
  border-radius: 4px;
  overflow: hidden;
}
.admin-ms-tex-preview-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--page-bg);
  /* background-image applied via inline style by JS */
}
.admin-ms-preview-title {
  font-family: var(--font);
  font-size: calc(10px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold);
  pointer-events: none;
}
.admin-ms-preview-sub {
  font-family: var(--font);
  font-size: calc(5px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: 1px;
  pointer-events: none;
}
.admin-ms-preview-btn {
  width: 60px;
  height: 10px;
  background: var(--mid);
  border: 1px solid var(--mat-border);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Main-screen announcement banner ──────────────────────────── */
.main-announcement {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-card, 4px);
  font-size: calc(8px * var(--ts));
  line-height: 1.8;
  margin-bottom: 4px;
  border: 1px solid;
  position: relative;
  box-sizing: border-box;
}
/* Width variants */
.main-announcement.ann-natural {
  width: auto;
  align-self: flex-start;
}
/* Alignment — the host container (screen-main) is already flex-column */
.main-announcement.ann-align-left   { align-self: flex-start; }
.main-announcement.ann-align-center { align-self: center; }
.main-announcement.ann-align-right  { align-self: flex-end; }
.main-announcement.hidden,
.main-announcement.dismissed { display: none !important; }
.main-announcement span { flex: 1; }
.main-ann-close {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
}
.main-ann-close:hover { opacity: 1; }
/* Style variants */
.main-announcement.ann-info    { background: #0a1a2a; color: #66bbff; border-color: #1a4a7a; }
.main-announcement.ann-promo   { background: #1a1205; color: var(--gold, #C68B00); border-color: #5a3a00; }
.main-announcement.ann-event   { background: #180a2a; color: #cc88ff; border-color: #5a1a9a; }
.main-announcement.ann-warning { background: #2a0a0a; color: #ff7766; border-color: #7a1a0a; }

/* ── Banner B (below status bar, above board) ────────────────── */
#game-ann-b {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 12px;
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  line-height: 1.6;
  letter-spacing: 1px;
  border-bottom: 1px solid;
  box-sizing: border-box;
  flex-shrink: 0;
}
#game-ann-b.hidden,
#game-ann-b.dismissed { display: none !important; }
#game-ann-b span { flex: 1; }
#game-ann-b .main-ann-close { font-size: calc(9px * var(--ts)); }
/* Width variants */
#game-ann-b.ann-natural  { width: auto; align-self: flex-start; }
/* Alignment — #area-bottom is flex-column + align-items:center */
#game-ann-b.ann-align-left   { align-self: flex-start; }
#game-ann-b.ann-align-center { align-self: center; }
#game-ann-b.ann-align-right  { align-self: flex-end; }
/* Style variants (shared colour tokens) */
#game-ann-b.ann-info    { background: #0a1a2a; color: #66bbff; border-color: #1a4a7a; }
#game-ann-b.ann-promo   { background: #1a1205; color: var(--gold, #C68B00); border-color: #5a3a00; }
#game-ann-b.ann-event   { background: #180a2a; color: #cc88ff; border-color: #5a1a9a; }
#game-ann-b.ann-warning { background: #2a0a0a; color: #ff7766; border-color: #7a1a0a; }

/* ── Banner admin subtabs ────────────────────────────────────── */
.ann-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.ann-subtab {
  font-family: inherit;
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  padding: 5px 14px;
  background: color-mix(in srgb, var(--mid) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
  color: var(--light);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ann-subtab-hint {
  font-size: calc(6px * var(--ts));
  opacity: .55;
  letter-spacing: 0;
}
.ann-subtab.ann-subtab-active {
  background: var(--gold);
  color: #1a1206;
  border-color: var(--gold);
}
.ann-subtab.ann-subtab-active .ann-subtab-hint { opacity: .6; }
.ann-subpanel.hidden { display: none; }
.ann-btn-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.admin-ms-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.admin-ms-label {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  white-space: nowrap;
  min-width: 72px;
}
.admin-ms-hint {
  font-size: calc(7px * var(--ts));
  color: var(--light);
  opacity: 0.7;
  margin: -6px 0 8px;
  line-height: 1.8;
}
.admin-ms-preview {
  font-size: calc(8px * var(--ts));
  padding: 8px 10px;
  background: var(--mid);
  border: 1px solid var(--mat-border);
  border-radius: 3px;
  margin-top: 4px;
  margin-bottom: 6px;
}

/* Background toggle button — bottom-right corner of main screen */
#btn-bg-toggle {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: transparent;
  border: 1px solid rgba(60,50,35,.25);
  color: rgba(80,65,45,.55);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  padding: 3px 7px;
  cursor: pointer;
  line-height: 1;
}
#btn-bg-toggle:hover {
  border-color: rgba(60,50,35,.50);
  color: rgba(80,65,45,.90);
}

.title {
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: 6px;
  color: var(--tx-on-dark);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--dark) 80%, transparent),
    3px 3px 0 var(--dark),
    6px 6px 0 color-mix(in srgb, var(--dark) 50%, transparent);
}

.subtitle {
  font-size: calc(9px * var(--ts));
  color: var(--tx-on-dark);
  letter-spacing: 3px;
  margin-top: -16px;
  text-shadow: 1px 1px 4px var(--dark), 0 0 8px color-mix(in srgb, var(--dark) 60%, transparent);
}

.menu-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  background: color-mix(in srgb, var(--surf-card) 88%, transparent);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 var(--shadow);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Main game buttons: nearly invisible backing, just enough to separate from BG */
.menu-panel-main {
  background: color-mix(in srgb, var(--dark) 18%, transparent);
  border-color: color-mix(in srgb, var(--bd) 30%, transparent);
  box-shadow: none;
  padding: 16px 16px;
  width: fit-content;
  max-width: calc((680px + 56px) * 1.2);
}
.menu-panel-main .main-menu {
  max-width: unset;
}

/* Minor panel: more transparent, smaller shadow — recedes visually */
.menu-panel-minor {
  background: color-mix(in srgb, var(--surf-card) 68%, transparent);
  box-shadow: 3px 3px 0 var(--shadow);
}

.main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 680px;
}

/* Forces secondary buttons onto their own row, separated from primary group */
.menu-row-break {
  flex-basis: 100%;
  height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED BUTTON STYLES
════════════════════════════════════════════════════════════════ */
.btn-menu {
  font-family: var(--font);
  font-size: calc(13px * var(--ts));
  padding: 14px 36px;
  background: var(--dark);
  color: var(--tx-on-dark);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .06s, box-shadow .06s;
  min-width: 200px;
}
.btn-menu:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); }
.btn-menu:active { transform: translate(2px, 2px);  box-shadow: 2px 2px 0 var(--shadow); }

.btn-menu.btn-secondary { background: var(--mid); }
.btn-menu.btn-sm        { font-size: calc(8px * var(--ts)); padding: 8px 18px; min-width: 0; }

/* Admin button — distinct amber/warning border so it's easy to spot */
#btn-admin {
  background: transparent;
  border-color: var(--error, #c0392b);
  color: var(--error, #c0392b);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--error, #c0392b) 30%, transparent);
}
#btn-admin:hover {
  background: var(--error, #c0392b);
  color: var(--bg, #1a1206);
  border-color: var(--error, #c0392b);
}

/* Creative tier: between major and minor — accent border, medium size */
.btn-menu.btn-creative {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  font-size: calc(10px * var(--ts));
  padding: 10px 24px;
  min-width: 0;
  box-shadow: 3px 3px 0 var(--shadow);
}
.btn-menu.btn-creative:hover  { background: color-mix(in srgb, var(--gold) 12%, transparent); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--shadow); }
.btn-menu.btn-creative:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS SCREEN
════════════════════════════════════════════════════════════════ */
#screen-settings {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
  gap: 28px;
}

.screen-title {
  font-size: calc(16px * var(--ts));
  letter-spacing: 5px;
  text-align: center;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surf-card);
  padding: 30px 40px;
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 var(--shadow);
}

.settings-2col {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}
.settings-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.settings-col-divider {
  width: 1px;
  background: var(--bd-sub);
  align-self: stretch;
  margin: 0 28px;
  flex-shrink: 0;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.setting-label {
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  min-width: 80px;
}

.setting-select {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  padding: 6px 8px;
  background: var(--surf-input);
  border: 2px solid var(--bd);
  color: var(--tx);
  width: 140px;
  cursor: pointer;
}

.settings-card input[type=text] {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  padding: 7px 10px;
  background: var(--surf-input);
  border: 2px solid var(--bd);
  color: var(--tx);
  width: 140px;
}

.spinner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spin-btn {
  font-family: var(--font);
  font-size: calc(13px * var(--ts));
  width: 30px;
  height: 30px;
  background: var(--dark);
  color: var(--light);
  border: none;
  cursor: pointer;
  line-height: 1;
}
.spin-btn:hover  { background: var(--mid); }
.spin-btn:active { background: var(--gold); color: var(--dark); }

.settings-card input[type=number] {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  width: 50px;
  text-align: center;
  padding: 5px;
  background: var(--surf-input);
  border: 2px solid var(--bd);
  color: var(--tx);
  -moz-appearance: textfield;
}
.settings-card input[type=number]::-webkit-inner-spin-button { display: none; }

/* Sound / music rows — toggle + slider side by side */
.sound-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 6px;
  background: var(--mid);
  outline: none;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--dark);
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 20px;
  background: var(--gold);
  cursor: pointer;
  border: none;
}
.vol-slider::-moz-range-thumb {
  width: 14px;
  height: 20px;
  background: var(--gold);
  cursor: pointer;
  border: none;
  border-radius: 0;
}
.vol-slider:focus { outline: 1px solid var(--gold-lt); }

.settings-footer {
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════════════════════════════ */
#screen-game {
  height: 100vh;
  overflow: hidden;
  gap: 0;
}

/* ── Status bar ─────────────────────────────────────────────── */
#status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px 8px;
  background: var(--dark);
  color: var(--light);
  font-size: calc(9px * var(--ts));
  min-height: 32px;
  flex-shrink: 0;
  letter-spacing: 1px;
}
.status-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
#btn-home {
  background: transparent;
  border: 1px solid var(--home-btn-border);
  color: var(--tx-on-dark);
  font-family: var(--font);
  font-size: calc(13px * var(--ts));
  padding: 1px 6px;
  cursor: pointer;
  border-radius: var(--radius-btn);
  line-height: 1;
  flex-shrink: 0;
  touch-action: manipulation;
}
#btn-home:hover { border-color: var(--gold); color: var(--gold-lt); }

/* ── Board ──────────────────────────────────────────────────── */
#board {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2px 4px;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* ── Upper row (flex row: left | center | right) ───────────── */
#area-upper {
  display: flex;
  flex: 1;
  gap: 4px;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

/* ── Side wrappers: visual footprint is --comp-short wide × --comp-long tall ── */
#area-left, #area-right {
  position: relative;
  flex-shrink: 0;
  width:  var(--comp-short, 80px);
  height: var(--mat-h, 300px);  /* same height as mat so centering aligns */
  align-self: flex-end;          /* sit at bottom of area-upper, level with mat */
  overflow: hidden;
}

/* ── Center column ──────────────────────────────────────────── */
#area-center {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: var(--mat-w, 400px);
  align-items: center;
  min-width: 0;
  min-height: 0;
  gap: 3px;
}

/* ── Top opponent row ───────────────────────────────────────── */
#area-top {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Center-bottom: mat centering wrapper ───────────────────── */
#area-center-bottom {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

/* ── Opponent component (same rectangle for all 3) ─────────── */
.opp-comp {
  /* JS sets --comp-long and --comp-short on #area-upper */
  width:  var(--comp-long,  300px);
  height: var(--comp-short, 80px);
  display: flex;
  flex-direction: column; /* label stacked above hand */
  align-items: stretch;
  gap: 2px;
  padding: 4px 6px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Side components: absolutely centered then rotated */
#area-left  .opp-comp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
#area-right .opp-comp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ── Component internals ────────────────────────────────────── */
.opp-label {
  /* Component rotation handles reading direction — no writing-mode needed.
     rotate(90deg):  horizontal text reads bottom→top (left side)  ✔
     rotate(-90deg): horizontal text reads top→bottom (right side) ✔
     no rotation:    horizontal text reads left→right (top)         ✔ */
  writing-mode: horizontal-tb;
  flex-shrink: 0;
  align-self: center;
  font-size: calc(6px * var(--ts));
  letter-spacing: 0;
  white-space: nowrap;
}
/* No override needed for top — all labels are horizontal-tb */

.opp-hand {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  /* JS sets --opp-hand-h so wrap triggers at the right row boundary */
  max-height: var(--opp-hand-h, 9999px);
  align-items: flex-start;
}

.opp-tray {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  align-content: flex-start;
  flex-shrink: 0;
}

/* Tile size inside components — JS sets --comp-tile-w on #area-upper */
.opp-comp .tile-back {
  width:  var(--comp-tile-w, var(--tile-w));
  height: calc(var(--comp-tile-w, var(--tile-w)) * 1.42);
  flex-shrink: 0;
}

/* ── Mat wrapper (mat + 4 wall strips) ───────────────────────── */
#mat-wrapper {
  display: flex;
  flex-direction: column;
  height: var(--mat-h, 300px);
  aspect-ratio: 15 / 9;
  max-width: 100%;
  min-width: 180px;
  min-height: 0;
  outline: 2px solid var(--mat-border);
  outline-offset: -1px;
}

#mat-row {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ── Wall strips ─────────────────────────────────────────────── */
.wall-strip {
  background: var(--wall-strip-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.wall-strip-h {
  flex-direction: row;
  padding: 3px 5px;
  min-height: 24px;
  gap: 2px;
}

.wall-strip-v {
  flex-direction: column;
  padding: 5px 3px;
  width: 26px;
  flex-shrink: 0;
  gap: 2px;
}

/* Individual pair-brick inside a wall strip */
.wall-seg {
  width: 10px;
  height: 14px;
  background: var(--wall-seg-grad);
  border: 1px solid var(--wall-seg-border-clr);
  border-radius: 2px;
  flex-shrink: 0;
}

.wall-strip-v .wall-seg {
  width: 14px;
  height: 10px;
}

/* Active wall — golden bricks */
.wall-strip-active .wall-seg {
  background: var(--wall-seg-active-grad);
  border-color: var(--wall-seg-active-border);
}

.wall-count-num {
  font-size: calc(7px * var(--ts));
  color: var(--wall-count-clr);
  font-family: monospace;
  line-height: 1;
  flex-shrink: 0;
}

.wall-count-active {
  color: var(--gold-lt);
  font-weight: bold;
}

/* Dealer roll badge */
.wall-roll-info {
  font-size: calc(6px * var(--ts));
  font-family: monospace;
  color: var(--gold-lt);
  background: var(--wall-roll-bg);
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Mat ─────────────────────────────────────────────────────── */
#mat {
  flex: 1;
  background: var(--mat);
  border: 3px solid var(--mat-border);
  box-shadow: inset 0 0 16px var(--mat-inner-shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#mat-deck {
  font-size: calc(7px * var(--ts));
  color: var(--mat-deck-clr);
  text-align: center;
  letter-spacing: 2px;
  flex-shrink: 0;
}

#field-area {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

#field {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  align-content: flex-start;
  overflow: visible;
  /* JS sets all tile sizing vars directly in px so nothing depends on cascading */
}

/* ── Bottom (P0) ─────────────────────────────────────────────── */
#area-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px max(16px, env(safe-area-inset-bottom, 16px));
}

/* ── Controls ───────────────────────────────────────────────── */
#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  padding: 2px 0;
}

.btn-action {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  padding: 7px 12px;
  background: var(--dark);
  color: var(--tx-on-dark);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .05s, box-shadow .05s;
  white-space: nowrap;
}
.btn-action:hover:not(:disabled)  { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow); }
.btn-action:active:not(:disabled) { transform: translate(1px, 1px);  box-shadow: 1px 1px 0 var(--shadow); }
.btn-action:disabled               { background: var(--tx-dim); color: var(--bd-sub); cursor: not-allowed; box-shadow: none; }

.btn-action.btn-gold      { background: var(--gold);  color: var(--dark); }
.btn-action.btn-secondary { background: var(--mid); }
.btn-action.btn-secondary:disabled { background: var(--mid); color: var(--tx-on-dark); opacity: 0.45; }
.btn-action.btn-danger    { background: var(--red); }
.btn-action.btn-sm        { font-size: calc(7px * var(--ts)); padding: 5px 8px; }
/* Sort button active state: gold when lock is on or one-shot flash */
.btn-action.btn-sort-on   { border: 1px solid var(--gold-lt); color: var(--gold-lt); }

/* Sort + Lock pill group */
.btn-sort-group {
  display: inline-flex;
  gap: 0;
}
.btn-sort-group #btn-sort {
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  border-right: 1px solid var(--bd);
}
.btn-sort-group .btn-sort-lock-btn {
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  padding: 5px 7px;
  font-size: calc(12px * var(--ts));
  line-height: 1;
  min-width: 0;
}
.btn-sort-group.hidden,
.btn-sort-group.hidden > * { display: none; }

/* Ghost tile for touch drag */
#tile-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -60%) scale(1.15);
  opacity: 0.85;
  box-shadow: 4px 6px 12px rgba(0,0,0,0.45);
  border-radius: 4px;
  transition: none;
}
/* Dim the original tile slot while its ghost is floating */
.tile.tile-touch-sort-src {
  opacity: 0.25 !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER LABELS
════════════════════════════════════════════════════════════════ */
.player-tag {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: 2px;
}
.player-tag-v { writing-mode: vertical-rl; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE GAME PANEL  (others / field popup overlay)
════════════════════════════════════════════════════════════════ */
/* View buttons are hidden on desktop — only shown on mobile via media query */
.btn-mobile-only { display: none; }

#mobile-game-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--surf);
  overflow: hidden;
}
#mobile-game-panel.hidden { display: none; }

#mobile-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--dark);
  color: var(--tx-on-dark);
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  flex-shrink: 0;
}
#btn-close-mobile-panel {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  padding: 5px 10px;
  background: var(--mid);
  color: var(--tx-on-dark);
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
}
#mobile-panel-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 10px;
}

/* ── Panel player-col / band: label always on top, centered ── */
.mm-player-col,
.mm-player-band {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mm-player-col  { flex-direction: column; }
.mm-player-band { flex-direction: row; }

/* Normalize all player labels inside the panel */
#mobile-panel-body .player-tag {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  text-align: center;
  writing-mode: horizontal-tb !important;
  white-space: nowrap;
}
/* In vMM (column layout) label sits above the hand */
.mm-player-col  > .player-tag { order: -1; }
/* In hMM (row layout)   label sits to the left of the hand */
.mm-player-band > .player-tag { order: -1; }

/* ═══════════════════════════════════════════════════════════════
   HANDS  (containers for tiles)
════════════════════════════════════════════════════════════════ */
.hand {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.hand-h { flex-direction: row; }
.hand-v { flex-direction: column; }

/* Player 0's hand: visible distinction */
.hand-up {
  background: var(--hand-up-bg);
  padding: 4px 6px;
  border: 1px solid var(--hand-up-border);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   TRAYS  (called tile groups)
════════════════════════════════════════════════════════════════ */
.tray {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 12px;
}
.tray-h { flex-direction: row; }
.tray-v { flex-direction: column; }

/* ── Bot difficulty label in opponent hand areas ─────────────── */
.bot-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--clr-text-muted, #888);
  text-align: center;
  width: 100%;
  margin-bottom: 2px;
}

/* one called segment */
.tray-seg {
  display: flex;
  flex-direction: row;
  gap: 1px;
  background: var(--tray-seg-bg);
  padding: 2px 3px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   TILES
════════════════════════════════════════════════════════════════ */

/* ── face-up tile ────────────────────────────────────────────── */
.tile {
  display: inline-flex;
  flex-direction: column;
  width: var(--tile-w);
  height: var(--tile-h);
  border: 2px solid var(--tile-border-clr);
  border-radius: var(--radius-tile);
  background: var(--tile-face);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
  box-shadow: 2px 2px 0 var(--tile-shadow-clr);
  transition: transform .08s, border-color .08s, box-shadow .08s;
}

.tile .tile-band {
  height: var(--tile-band-h);
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Suit letter inside band — only visible in colorblind mode */
.tile-suit-label {
  display: none;
  font-family: monospace;
  font-size: calc(var(--tile-w) * 0.23);
  color: rgba(255,255,255,.92);
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}
.tile.tile-sm .tile-suit-label { font-size: calc(var(--tile-sm-w) * 0.23); }

.colorblind .tile-suit-label { display: block; }
.colorblind .tile-B .tile-band { background: #607858 !important; }
.colorblind .tile-D .tile-band { background: #785858 !important; }
.colorblind .tile-C .tile-band { background: #585878 !important; }
/* Colorblind text: all tile and UI text forced black for contrast */
.colorblind .tile-label,
.colorblind .tile-suit-label { color: #000 !important; }

.tile .tile-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--tile-font);
  color: var(--tx);
  line-height: 1;
}

/* suit band colors */
.tile-B .tile-band { background: var(--bam);   }
.tile-D .tile-band { background: var(--dot);   }
.tile-C .tile-band { background: var(--crack); }
.tile-N .tile-band,
.tile-E .tile-band,
.tile-S .tile-band,
.tile-W .tile-band { background: var(--wind);  }
.tile-J .tile-band { background: var(--joker); }
.tile-Z .tile-band { background: var(--blank); }
.tile-F .tile-band { background: var(--flower);}

/* ── tile sizes ──────────────────────────────────────────────── */
.tile.tile-sm {
  width: var(--tile-sm-w);
  height: var(--tile-sm-h);
  --tile-size-ref: var(--tile-sm-w);
}
.tile.tile-sm .tile-band  { height: var(--tile-sm-band-h); }
.tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }

/* medium — field tiles: bigger than sm, smaller than full */
.tile.tile-md {
  width:  calc(var(--tile-w) * 0.86);
  height: calc(var(--tile-h) * 0.86);
  --tile-size-ref: calc(var(--tile-w) * 0.86);
}
.tile.tile-md .tile-band  { height: calc(var(--tile-w) * 0.86 * 0.28); }
.tile.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.29); }

/* ── tile states ─────────────────────────────────────────────── */
.tile.selected {
  transform: translateY(calc(var(--tile-h) * -0.18));
  border-color: var(--gold-lt);
  box-shadow: 2px 2px 0 var(--gold);
}
/* Colorblind selected: solid white border, no colour-coded glow */
.colorblind .tile.selected {
  border: 3px solid #fff;
  box-shadow: none;
}

.tile.swap-target {
  border-color: var(--bam);
  box-shadow: 0 0 0 2px var(--bam);
}

.tile.blank-target {
  border-color: var(--blank);
  box-shadow: 0 0 0 2px var(--blank);
}

.tile.tile-pass-blocked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

/* ── designed tile style ─────────────────────────────────────── */
/* .tile-graphic is always in the DOM; hidden in simple mode      */
.tile-graphic {
  display: none;
}

/* Taller tile in designed mode so icons + number aren't squashed */
.tiles-designed .tile {
  height: calc(var(--tile-w) * 1.72);
}
.tiles-designed .tile.tile-sm {
  height: calc(var(--tile-sm-w) * 1.72);
}

/* Graphic area: flex-wrap so N icons flow naturally */
.tiles-designed .tile .tile-graphic {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 3px;
  overflow: hidden;
}

/* Number label: stays visible for B/D/C, smaller font */
.tiles-designed .tile .tile-label {
  flex: 0 0 auto;
  font-size: calc(var(--tile-w) * 0.21);
  padding-bottom: 2px;
}

/* Non-numeric suits: no label — graphic fills the whole body */
.tiles-designed .tile-J .tile-label,
.tiles-designed .tile-F .tile-label,
.tiles-designed .tile-Z .tile-label { display: none; }

/* Small tiles: show graphic but restore normal label */
.tiles-designed .tile.tile-sm .tile-label { flex: 0 0 auto; font-size: calc(var(--tile-sm-w) * 0.21); padding-bottom: 1px; }

/* Non-numeric small tiles: same label-hide rules, graphic fills body */
.tiles-designed .tile-J.tile-sm .tile-label,
.tiles-designed .tile-F.tile-sm .tile-label,
.tiles-designed .tile-Z.tile-sm .tile-label { display: none; }

/* Small graphic area */
.tiles-designed .tile.tile-sm .tile-graphic {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 1px 2px;
  overflow: hidden;
}

/* Small bamboo bars */
/* Small bam/dot/crack: now inherit from full-size rules via --tile-size-ref = tile-sm-w */

/* Small wind / joker / flower icons */

/* Small wind / joker / flower icons */
.tiles-designed .tile-N.tile-sm .ti,
.tiles-designed .tile-E.tile-sm .ti,
.tiles-designed .tile-S.tile-sm .ti,
.tiles-designed .tile-W.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-designed .tile-J.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-designed .tile-F.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.50); }

/* ── .ti base (shared by all suit icons) ────────────────────── */
.tiles-designed .ti { display: inline-block; flex-shrink: 0; line-height: 1; }

/* ── Custom pixel-art icon canvas ─────────────────────────────
   Must strip ALL default .ti appearance so the canvas shows clean.
   Placed here (before per-style rules) so !important wins.
──────────────────────────────────────────────────────────────── */
.ti.ti-custom {
  image-rendering: pixelated !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  /* strip every property the per-style rules might set */
  background:       none    !important;
  background-image: none    !important;
  border-radius:    0       !important;
  border:           none    !important;
  box-shadow:       none    !important;
  transform:        none    !important;
  clip-path:        none    !important;
  filter:           none    !important;
  color:            transparent !important;
  font-size:        0       !important;
  text-shadow:      none    !important;
  line-height:      0       !important;
  /* canvas pseudo-elements are no-ops but suppress just in case */
  content:          none    !important;
}
/* Non-suit tiles: fill most of the graphic area */
.tile-N .ti.ti-custom, .tile-E .ti.ti-custom,
.tile-S .ti.ti-custom, .tile-W .ti.ti-custom,
.tile-J .ti.ti-custom, .tile-F .ti.ti-custom,
.tile-Z .ti.ti-custom {
  width:  calc(var(--tile-w, 40px) * 0.60) !important;
  height: calc(var(--tile-w, 40px) * 0.60) !important;
}
.tile-N.tile-sm .ti.ti-custom, .tile-E.tile-sm .ti.ti-custom,
.tile-S.tile-sm .ti.ti-custom, .tile-W.tile-sm .ti.ti-custom,
.tile-J.tile-sm .ti.ti-custom, .tile-F.tile-sm .ti.ti-custom,
.tile-Z.tile-sm .ti.ti-custom {
  width:  calc(var(--tile-sm-w, 22px) * 0.60) !important;
  height: calc(var(--tile-sm-w, 22px) * 0.60) !important;
}
/* Suit tiles (B/D/C): scale by count just like the default bars/circles */
.tile-B .ti.ti-custom, .tile-D .ti.ti-custom, .tile-C .ti.ti-custom { width: 11px !important; height: 11px !important; }
.tile-B[data-tile-count="1"] .ti.ti-custom,
.tile-D[data-tile-count="1"] .ti.ti-custom,
.tile-C[data-tile-count="1"] .ti.ti-custom { width: 18px !important; height: 18px !important; }
.tile-B[data-tile-count="2"] .ti.ti-custom, .tile-B[data-tile-count="3"] .ti.ti-custom,
.tile-D[data-tile-count="2"] .ti.ti-custom, .tile-D[data-tile-count="3"] .ti.ti-custom,
.tile-C[data-tile-count="2"] .ti.ti-custom, .tile-C[data-tile-count="3"] .ti.ti-custom { width: 14px !important; height: 14px !important; }
.tile-B[data-tile-count="7"] .ti.ti-custom, .tile-B[data-tile-count="8"] .ti.ti-custom, .tile-B[data-tile-count="9"] .ti.ti-custom,
.tile-D[data-tile-count="7"] .ti.ti-custom, .tile-D[data-tile-count="8"] .ti.ti-custom, .tile-D[data-tile-count="9"] .ti.ti-custom,
.tile-C[data-tile-count="7"] .ti.ti-custom, .tile-C[data-tile-count="8"] .ti.ti-custom, .tile-C[data-tile-count="9"] .ti.ti-custom { width: 7px !important; height: 7px !important; }
.tile-B.tile-sm .ti.ti-custom, .tile-D.tile-sm .ti.ti-custom, .tile-C.tile-sm .ti.ti-custom { width: 5px !important; height: 5px !important; }


.tiles-designed .tile-B .ti {
  width: 3px;
  height: 13px;
  background: var(--bam);
  border-radius: 1px;
}
.tiles-designed .tile-B[data-tile-count="1"] .ti,
.tiles-designed .tile-B[data-tile-count="2"] .ti,
.tiles-designed .tile-B[data-tile-count="3"] .ti { width: 4px; height: 17px; }

/* ── Dot: filled circles ────────────────────────────────────── */
.tiles-designed .tile-D .ti {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
  border: 1px solid rgba(0,0,0,.20);
}
.tiles-designed .tile-D[data-tile-count="1"] .ti                                { width: 14px; height: 14px; }
.tiles-designed .tile-D[data-tile-count="2"] .ti,
.tiles-designed .tile-D[data-tile-count="3"] .ti                                { width: 10px; height: 10px; }
.tiles-designed .tile-D[data-tile-count="7"] .ti,
.tiles-designed .tile-D[data-tile-count="8"] .ti,
.tiles-designed .tile-D[data-tile-count="9"] .ti                                { width: 5px;  height: 5px; }

/* ── Crack: rotated diamonds ────────────────────────────────── */
.tiles-designed .tile-C .ti {
  width: 6px;
  height: 6px;
  background: var(--crack);
  transform: rotate(45deg);
  border: 1px solid rgba(255,255,255,.20);
}
.tiles-designed .tile-C[data-tile-count="1"] .ti                                { width: 12px; height: 12px; }
.tiles-designed .tile-C[data-tile-count="2"] .ti,
.tiles-designed .tile-C[data-tile-count="3"] .ti                                { width: 8px;  height: 8px; }
.tiles-designed .tile-C[data-tile-count="7"] .ti,
.tiles-designed .tile-C[data-tile-count="8"] .ti,
.tiles-designed .tile-C[data-tile-count="9"] .ti                                { width: 5px;  height: 5px; }

/* ── Wind arrows ────────────────────────────────────────────── */
.tiles-designed .tile-N .ti,
.tiles-designed .tile-E .ti,
.tiles-designed .tile-S .ti,
.tiles-designed .tile-W .ti {
  font-size: calc(var(--tile-w) * 0.58);
  color: var(--wind);
  font-family: sans-serif;
}

/* ── Joker star ─────────────────────────────────────────────── */
.tiles-designed .tile-J .ti {
  font-size: calc(var(--tile-w) * 0.55);
  color: var(--joker);
  font-family: serif;
}

/* ── Flower blossom ─────────────────────────────────────────── */
.tiles-designed .tile-F .ti {
  font-size: calc(var(--tile-w) * 0.55);
  color: var(--flower);
  font-family: serif;
}
/* Z blank: label already hidden, graphic stays empty */

/* ── face-down tiles ─────────────────────────────────────────── */
.tile-back {
  display: inline-block;
  flex-shrink: 0;
  width: var(--tile-w);
  height: var(--tile-h);
  border: 2px solid var(--tile-back-border);
  border-radius: var(--radius-tile);
  background: repeating-linear-gradient(
    45deg,
    var(--tile-back-a) 0px,  var(--tile-back-a) 3px,
    var(--tile-back-b) 3px,  var(--tile-back-b) 6px
  );
  box-shadow: 2px 2px 0 var(--tile-back-shadow);
}

/* rotated (landscape) face-down for side players */
.tile-back-v {
  width: var(--tile-h);
  height: var(--tile-w);
}

/* Opponent areas scale tiles via --comp-tile-w (set by JS _scaleOppHands) */
#area-left .tile-back,
#area-right .tile-back,
#area-top .tile-back {
  width: var(--comp-tile-w, var(--tile-w));
  height: calc(var(--comp-tile-w, var(--tile-w)) * 1.42);
}
#area-left .tile-back-v,
#area-right .tile-back-v {
  width: calc(var(--comp-tile-w, var(--tile-w)) * 1.42);
  height: var(--comp-tile-w, var(--tile-w));
}

/* extra-small face-down for wall indicators */
/* ══════════════════════════════════════════════════════════════
   MINIMAL tile style
   Band remains, graphic hidden, label bold + larger
══════════════════════════════════════════════════════════════ */
.tiles-minimal .tile {
  border-width: 1px;
  box-shadow: none;
}
.tiles-minimal .tile .tile-band {
  height: 3px;
  flex-shrink: 0;
}
.tiles-minimal .tile .tile-graphic { display: none; }
.tiles-minimal .tile .tile-label {
  font-size: calc(var(--tile-w) * 0.38);
  font-weight: bold;
  letter-spacing: 0;
}
.tiles-minimal .tile.tile-sm .tile-label {
  font-size: calc(var(--tile-sm-w) * 0.38);
  font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════
   NEON tile style
   Dark face, glowing band + border, graphic-based like designed
══════════════════════════════════════════════════════════════ */
.tiles-neon .tile {
  background: #0a0a0a;
  border-width: 1px;
  box-shadow: none;
  height: calc(var(--tile-w) * 1.72);
}
.tiles-neon .tile.tile-sm {
  height: calc(var(--tile-sm-w) * 1.72);
}
.tiles-neon .tile .tile-band {
  height: var(--tile-band-h);
  filter: brightness(1.6) saturate(1.8);
  box-shadow: 0 0 6px currentColor;
}
.tiles-neon .tile .tile-graphic {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1px;
  padding: 2px;
  overflow: hidden;
}
.tiles-neon .tile .tile-label {
  font-size: var(--tile-font);
  color: #e0e0e0;
  text-shadow: 0 0 6px currentColor;
  padding-bottom: 1px;
}
.tiles-neon .tile-B .tile-label { color: var(--bam);    text-shadow: 0 0 6px var(--bam); }
.tiles-neon .tile-D .tile-label { color: var(--dot);    text-shadow: 0 0 6px var(--dot); }
.tiles-neon .tile-C .tile-label { color: var(--crack);  text-shadow: 0 0 6px var(--crack); }
.tiles-neon .tile-N .tile-label,
.tiles-neon .tile-E .tile-label,
.tiles-neon .tile-S .tile-label,
.tiles-neon .tile-W .tile-label  { color: var(--wind);   text-shadow: 0 0 6px var(--wind); }
.tiles-neon .tile-J .tile-label  { color: var(--joker);  text-shadow: 0 0 6px var(--joker); }
.tiles-neon .tile-F .tile-label  { color: var(--flower); text-shadow: 0 0 6px var(--flower); }
.tiles-neon .tile-J .tile-label,
.tiles-neon .tile-F .tile-label,
.tiles-neon .tile-Z .tile-label  { display: none; }
/* Icons */
.tiles-neon .ti { display: inline-block; flex-shrink: 0; line-height: 1; }
.tiles-neon .tile-B .ti {
  width: 3px; height: 13px;
  background: var(--bam);
  border-radius: 1px;
  box-shadow: 0 0 4px var(--bam);
}
.tiles-neon .tile-D .ti {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 4px var(--dot);
}
.tiles-neon .tile-C .ti {
  width: 6px; height: 6px;
  background: var(--crack);
  transform: rotate(45deg);
  box-shadow: 0 0 4px var(--crack);
}
.tiles-neon .tile-N .ti, .tiles-neon .tile-E .ti,
.tiles-neon .tile-S .ti, .tiles-neon .tile-W .ti {
  font-size: calc(var(--tile-w) * 0.55);
  color: var(--wind);
  text-shadow: 0 0 6px var(--wind);
}
.tiles-neon .tile-J .ti { font-size: calc(var(--tile-w) * 0.55); color: var(--joker);  text-shadow: 0 0 6px var(--joker); }
.tiles-neon .tile-F .ti { font-size: calc(var(--tile-w) * 0.55); color: var(--flower); text-shadow: 0 0 6px var(--flower); }
/* Sm */
.tiles-neon .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
.tiles-neon .tile-N.tile-sm .ti, .tiles-neon .tile-E.tile-sm .ti,
.tiles-neon .tile-S.tile-sm .ti, .tiles-neon .tile-W.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-neon .tile-J.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-neon .tile-F.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.50); }

/* ══════════════════════════════════════════════════════════════
   HAND DRAWN tile style
   Rough border (border-radius varies), handwritten feel, no band
══════════════════════════════════════════════════════════════ */
.tiles-handdrawn .tile {
  border-radius: 3px 5px 4px 6px / 5px 3px 6px 4px;
  border-style: solid;
  border-width: 2px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.2);
  background: var(--tile-face);
  height: calc(var(--tile-w) * 1.72);
}
.tiles-handdrawn .tile.tile-sm {
  height: calc(var(--tile-sm-w) * 1.72);
  border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
}
.tiles-handdrawn .tile .tile-band {
  height: var(--tile-band-h);
  opacity: 0.75;
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}
.tiles-handdrawn .tile .tile-graphic {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1px;
  padding: 2px;
  overflow: hidden;
}
.tiles-handdrawn .tile .tile-label {
  font-size: var(--tile-font);
  padding-bottom: 1px;
  font-style: italic;
}
.tiles-handdrawn .tile-J .tile-label,
.tiles-handdrawn .tile-F .tile-label,
.tiles-handdrawn .tile-Z .tile-label { display: none; }
/* Icons shared from designed */
.tiles-handdrawn .ti { display: inline-block; flex-shrink: 0; line-height: 1; }
.tiles-handdrawn .tile-B .ti {
  width: 3px; height: 13px; background: var(--bam); border-radius: 1px 3px 2px 1px;
}
.tiles-handdrawn .tile-D .ti {
  width: 7px; height: 7px; border-radius: 45% 55% 50% 60%; background: var(--dot);
}
.tiles-handdrawn .tile-C .ti {
  width: 6px; height: 6px; background: var(--crack);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tiles-handdrawn .tile-N .ti, .tiles-handdrawn .tile-E .ti,
.tiles-handdrawn .tile-S .ti, .tiles-handdrawn .tile-W .ti {
  font-size: calc(var(--tile-w) * 0.52); color: var(--wind); font-style: italic;
}
.tiles-handdrawn .tile-J .ti { font-size: calc(var(--tile-w) * 0.50); color: var(--joker); }
.tiles-handdrawn .tile-F .ti { font-size: calc(var(--tile-w) * 0.50); color: var(--flower); }
.tiles-handdrawn .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
.tiles-handdrawn .tile-N.tile-sm .ti, .tiles-handdrawn .tile-E.tile-sm .ti,
.tiles-handdrawn .tile-S.tile-sm .ti, .tiles-handdrawn .tile-W.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.52); font-style: italic; }
.tiles-handdrawn .tile-J.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-handdrawn .tile-F.tile-sm .ti { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-handdrawn .tile-B[data-tile-count="1"] .ti,
.tiles-handdrawn .tile-B[data-tile-count="2"] .ti,
.tiles-handdrawn .tile-B[data-tile-count="3"] .ti { width: 4px; height: 17px; }
.tiles-handdrawn .tile-D[data-tile-count="1"] .ti { width: 14px; height: 14px; border-radius: 48% 52% 50% 55%; }

/* ══════════════════════════════════════════════════════════════
   PREMIUM tile style
   Hollow geometric icons with suit-color glow — very rare / ultra rare
══════════════════════════════════════════════════════════════ */
.tiles-premium .tile {
  border-radius: var(--radius-tile, 4px);
  border: 1px solid var(--tile-border-clr, #c0a060);
  background: var(--tile-face, #fffff8);
  height: calc(var(--tile-w) * 1.72);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.tiles-premium .tile.tile-sm {
  height: calc(var(--tile-sm-w) * 1.72);
}
.tiles-premium .tile .tile-band {
  height: var(--tile-band-h);
  opacity: 0.65;
}
.tiles-premium .tile .tile-graphic {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px 2px;
  overflow: hidden;
}
.tiles-premium .tile .tile-label {
  font-size: var(--tile-font);
  padding-bottom: 1px;
  letter-spacing: 1px;
}
.tiles-premium .tile-J .tile-label,
.tiles-premium .tile-F .tile-label,
.tiles-premium .tile-Z .tile-label { display: none; }
.tiles-premium .ti { display: inline-block; flex-shrink: 0; line-height: 1; }

/* Bam — hollow outlined bar */
.tiles-premium .tile-B .ti {
  width: 4px;
  height: 13px;
  background: transparent;
  border: 1px solid var(--bam);
  border-radius: 2px;
  box-shadow: 0 0 4px var(--bam);
}
/* Dot — hollow ring */
.tiles-premium .tile-D .ti {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--dot);
  box-shadow: 0 0 4px var(--dot);
}
/* Crack — hollow rotated diamond */
.tiles-premium .tile-C .ti {
  width: 6px;
  height: 6px;
  background: transparent;
  border: 2px solid var(--crack);
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 4px var(--crack);
}
/* Winds — bold directional arrows */
.tiles-premium .tile-N .ti,
.tiles-premium .tile-E .ti,
.tiles-premium .tile-S .ti,
.tiles-premium .tile-W .ti {
  font-size: 0;
  color: transparent;
  position: relative;
  width: calc(var(--tile-w) * 0.52);
  height: calc(var(--tile-w) * 0.52);
}
.tiles-premium .tile-N .ti::before { content: "â–²"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); text-shadow: 0 0 5px var(--wind); }
.tiles-premium .tile-E .ti::before { content: "â–¶"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); text-shadow: 0 0 5px var(--wind); }
.tiles-premium .tile-S .ti::before { content: "â–¼"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); text-shadow: 0 0 5px var(--wind); }
.tiles-premium .tile-W .ti::before { content: "â—€"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); text-shadow: 0 0 5px var(--wind); }
/* Joker — four-pointed star */
.tiles-premium .tile-J .ti {
  font-size: 0;
  color: transparent;
  position: relative;
  width: calc(var(--tile-w) * 0.60);
  height: calc(var(--tile-w) * 0.60);
}
.tiles-premium .tile-J .ti::before {
  content: "✦";
  font-size: calc(var(--tile-w) * 0.58);
  color: var(--joker);
  text-shadow: 0 0 6px var(--joker);
}
/* Flower — ornate eight-petal */
.tiles-premium .tile-F .ti {
  font-size: 0;
  color: transparent;
  position: relative;
  width: calc(var(--tile-w) * 0.60);
  height: calc(var(--tile-w) * 0.60);
}
.tiles-premium .tile-F .ti::before {
  content: "✾";
  font-size: calc(var(--tile-w) * 0.56);
  color: var(--flower);
  text-shadow: 0 0 6px var(--flower);
}
/* Count-based size overrides */
.tiles-premium .tile-B[data-tile-count="1"] .ti { width: 5px; height: 17px; }
.tiles-premium .tile-D[data-tile-count="1"] .ti { width: 14px; height: 14px; }
.tiles-premium .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
/* Small-tile icon overrides for premium */
.tiles-premium .tile-B.tile-sm .ti { width: 2px; height: 8px; box-shadow: 0 0 3px var(--bam); }
.tiles-premium .tile-D.tile-sm .ti { width: 6px; height: 6px; border-width: 1px; }
.tiles-premium .tile-C.tile-sm .ti { width: 4px; height: 4px; border-width: 1px; }
.tiles-premium .tile-N.tile-sm .ti, .tiles-premium .tile-E.tile-sm .ti,
.tiles-premium .tile-S.tile-sm .ti, .tiles-premium .tile-W.tile-sm .ti {
  width: calc(var(--tile-sm-w) * 0.52);
  height: calc(var(--tile-sm-w) * 0.52);
}
.tiles-premium .tile-N.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-premium .tile-E.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-premium .tile-S.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-premium .tile-W.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-premium .tile-J.tile-sm .ti, .tiles-premium .tile-F.tile-sm .ti {
  width: calc(var(--tile-sm-w) * 0.58);
  height: calc(var(--tile-sm-w) * 0.58);
}
.tiles-premium .tile-J.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.56); }
.tiles-premium .tile-F.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.54); }

/* ────────────────────────────────────────────────────────────── */
.tile-back-xs {
  display: inline-block;
  width: 8px;
  height: 12px;
  border: 1px solid var(--tile-back-border);
  border-radius: 1px;
  background: repeating-linear-gradient(
    45deg,
    var(--tile-back-a) 0px, var(--tile-back-a) 2px,
    var(--tile-back-b) 2px, var(--tile-back-b) 4px
  );
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING BANNERS  (charleston direction, call window)
════════════════════════════════════════════════════════════════ */
.banner {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(9px * var(--ts));
  padding: 8px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
  box-shadow: 3px 3px 0 var(--shadow);
  letter-spacing: 1px;
}

.banner-gold {
  background: var(--dark);
  color: var(--gold-lt);
}

/* Call banner — centered, pulsing */
.banner-red {
  background: var(--red);
  color: var(--light);
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(11px * var(--ts));
  padding: 14px 28px;
  box-shadow: 6px 6px 0 #222;
  animation: call-pulse .45s ease-in-out infinite alternate;
  white-space: nowrap;
}

@keyframes call-pulse {
  from { box-shadow: 6px 6px 0 #222; background: var(--red); }
  to   { box-shadow: 12px 12px 0 #444; background: var(--error); }
}

.banner-icon { font-size: calc(16px * var(--ts)); }
.banner-tile { color: var(--gold-lt); }

/* Home-confirm mini dialog */
.home-confirm {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--dark);
  border: 2px solid var(--gold);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  color: var(--light);
  box-shadow: 4px 4px 0 var(--shadow);
  white-space: nowrap;
}

/* Themed confirm dialog */
.game-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.60);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.game-confirm-overlay.hidden { display: none; }
.game-confirm-box {
  background: var(--surf-modal);
  border: 2px solid var(--gold);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 22px 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 320px;
  width: 90vw;
}
.game-confirm-msg {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  color: var(--tx);
  text-align: center;
  line-height: 1.8;
  margin: 0;
}
.game-confirm-actions {
  display: flex;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   WINNER OVERLAY
════════════════════════════════════════════════════════════════ */
#winner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#winner-box {
  background: var(--surf-modal);
  border: 4px solid var(--bd);
  border-radius: var(--radius-modal);
  box-shadow: 8px 8px 0 var(--shadow);
  padding: 44px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

#winner-title {
  font-size: clamp(22px, 5vw, 36px);
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--dark);
  animation: winner-pulse .55s infinite alternate;
}

@keyframes winner-pulse {
  from { opacity: 1;    transform: scale(1);    }
  to   { opacity: .88; transform: scale(1.04); }
}

#winner-msg { font-size: calc(10px * var(--ts)); color: var(--tx-sub); }

/* ═══════════════════════════════════════════════════════════════
   TILE ANIMATIONS
════════════════════════════════════════════════════════════════ */

@keyframes tile-enter {
  from { opacity: 0; transform: scale(.65) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes tile-discard-out {
  0%   { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(28px) scale(.7); }
}

.tile-entering {
  animation: tile-enter .18s ease-out both;
}

.tile-discarding {
  animation: tile-discard-out .13s ease-in both;
  pointer-events: none !important;
}

/* New-tile highlight: red border only, no shadow override */
.tile-new {
  outline: 2px solid var(--red);
  outline-offset: -1px;
}
/* Colorblind new-tile: dashed white outline instead of red */
.colorblind .tile-new {
  outline: 2px dashed #fff;
  outline-offset: -1px;
}
/* C11: keep new-tile outline visible even when dimmed by hand-nomatch */
.tile.tile-new.hand-nomatch {
  opacity: 0.8;
  filter: none;
}

/* Drag-and-drop tile reorder (C7) */
.tile.tile-dragging { opacity: 0.45; }
.tile.drag-over     { outline: 2px solid var(--gold-lt); outline-offset: -1px; }

/* ═══════════════════════════════════════════════════════════════
   AUTO-CALL PANEL
════════════════════════════════════════════════════════════════ */
#autocall-panel {
  position: absolute;
  bottom: calc(100% + 6px);   /* floats just above the controls bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--autocall-bg);
  border: 2px solid var(--gold);
  border-radius: var(--radius-panel);
  padding: 8px 10px;
  width: max-content;
  max-width: min(90vw, 520px);
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  color: var(--tx-on-dark);
  box-shadow: 0 -4px 12px rgba(0,0,0,.6);
}

.ac-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 6px;
}
.ac-title {
  flex: 1;
  color: var(--gold-lt);
  letter-spacing: .05em;
}
.ac-mode-row {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ac-mode-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.ac-mode-row input[type="checkbox"] {
  accent-color: var(--gold);
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.btn-ac-ctrl {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--light);
  font-family: var(--font);
  font-size: calc(6px * var(--ts));
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 2px;
}
.btn-ac-ctrl:hover { border-color: var(--gold); color: var(--gold-lt); }

.ac-groups {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 4px 6px;
  margin-bottom: 8px;
}
.ac-groups label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.ac-groups input[type="checkbox"] {
  accent-color: var(--gold);
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.ac-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ac-custom span { white-space: nowrap; color: rgba(255,255,255,.6); }
#ac-specific {
  flex: 1;
  background: var(--surf-input);
  border: 1px solid var(--bd-sub);
  color: var(--tx);
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  padding: 3px 5px;
  border-radius: 2px;
}
#ac-specific:focus { outline: 1px solid var(--gold); }

.ac-hint {
  font-size: calc(6px * var(--ts));
  color: rgba(255,255,255,.35);
  text-align: center;
}

/* Make the controls div position:relative so the panel can anchor to it */
#controls { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   HANDBOOK OVERLAY
════════════════════════════════════════════════════════════════ */
/* Dark screen cover — separate from the overlay shell so it can be
   hidden independently in panel mode without cascade fights */
#handbook-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.80);
  z-index: 200;
}
#handbook-backdrop.hidden { display: none !important; }

/* Overlay shell — positioning only, no background */
#handbook-overlay {
  position: fixed;
  display: flex;
  z-index: 201;
}
#handbook-overlay.hidden { display: none !important; }

/* Modal mode: centered over full screen */
#handbook-overlay.hb-modal {
  inset: 0;
  align-items: center;
  justify-content: center;
}

#handbook-modal {
  background: var(--surf-modal);
  border: 3px solid var(--bd);
  border-radius: var(--radius-modal);
  box-shadow: 8px 8px 0 var(--shadow);
  width: min(97vw, 1000px);
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* NOTE: no container-type here — would break hb-panel side-drawer layout */
}

/* Wrapper inside header carries the container context so label-hiding
   works without interfering with fixed/flex positioning of the modal */
#handbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--dark);
  color: var(--light);
  font-size: calc(9px * var(--ts));
  letter-spacing: 3px;
  flex-shrink: 0;
  min-width: 0;
  gap: 8px;
  container-type: inline-size;
  container-name: hb-header;
}

/* Button group: never wrap or push outside header */
#handbook-header > div {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

/* ── Container query: hide label text when header is too narrow ── */
@container hb-header (max-width: 420px) {
  .hb-btn-label { display: none; }
}

#btn-handbook-close,
.btn-handbook-ctrl {
  background: none;
  border: 1px solid var(--mid);
  color: var(--light);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  letter-spacing: 1px;
}
#btn-handbook-close:hover,
.btn-handbook-ctrl:hover { background: var(--mid); }

#handbook-body {
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px 14px;
}

.hb-category {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 480px;
}

.hb-cat-title {
  font-size: clamp(8px, 1.2vw, 12px);
  color: var(--gold-lt);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--mat-border);
  padding-bottom: 2px;
  text-transform: uppercase;
}

.hb-hand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}

.hb-hand-row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hb-hand-key {
  font-family: monospace;
  font-size: clamp(9px, 1.35vw, 13px);
  color: var(--tx);
  flex: 1;
  word-break: break-word;
}

.hb-token { /* inline suit token */ }
.hb-token-g { color: var(--bam); }
.hb-token-r { color: var(--dot); }
.hb-token-b { color: var(--crack); }

.hb-hand-desc {
  font-size: clamp(7px, 1.05vw, 10px);
  color: var(--tx-sub);
  padding-left: 2px;
}

.hb-hand-val {
  font-size: clamp(8px, 1.2vw, 11px);
  color: var(--gold-lt);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Colorblind: all card tokens display in default text color */
.colorblind .hb-token-g,
.colorblind .hb-token-r,
.colorblind .hb-token-b { color: inherit; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN
════════════════════════════════════════════════════════════════ */
#screen-auth {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
  gap: 20px;
  background-color: var(--page-bg);
  background-image: var(--page-pattern);
  background-size: var(--page-pattern-size);
  background-position: var(--page-pattern-pos);
}

.auth-tabs {
  display: flex;
  gap: 0;
}

.auth-tab {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  padding: 9px 20px;
  background: var(--mid);
  color: var(--light);
  border: 2px solid var(--dark);
  border-bottom: none;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .1s;
}
.auth-tab:first-child { border-right: 1px solid var(--dark); }
.auth-tab:last-child  { border-left:  1px solid var(--dark); }
.auth-tab-active      { background: var(--dark); }
.auth-tab:hover:not(.auth-tab-active) { background: var(--mid); }

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surf-card);
  padding: 28px 36px;
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 var(--shadow);
  min-width: 340px;
  max-width: 420px;
  width: 90vw;
}

.auth-card input[type=text],
.auth-card input[type=password],
.auth-card input[type=email],
.auth-card input[type=tel] {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  padding: 7px 10px;
  background: var(--surf-input);
  border: 2px solid var(--bd);
  color: var(--tx);
  width: 160px;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--gold);
}

.auth-error {
  font-size: calc(7px * var(--ts));
  color: var(--red);
  letter-spacing: 1px;
  line-height: 1.6;
  border: 1px solid var(--red);
  padding: 6px 8px;
  background: rgba(139,26,26,.07);
}

.auth-info {
  font-size: calc(7px * var(--ts));
  color: var(--bam);
  letter-spacing: 1px;
  line-height: 1.6;
  border: 1px solid var(--bam);
  padding: 6px 8px;
  background: rgba(27,107,53,.07);
  word-break: break-all;
}

.auth-divider {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: 1px;
  text-align: center;
  border-top: 1px solid var(--mat-border);
  padding-top: 10px;
  margin-top: 4px;
}

.auth-hint {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: 1px;
  line-height: 1.8;
}

.auth-welcome {
  font-size: calc(8px * var(--ts));
  color: var(--gold);
  letter-spacing: 2px;
  margin-top: -12px;
}

.auth-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  line-height: 1.6;
  margin-top: 2px;
}

.auth-check-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--gold);
}

.auth-check-row a {
  color: var(--gold);
}

.site-legal-links {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
}

.site-legal-links a {
  color: var(--gold);
  text-decoration: none;
}

.site-legal-links a:hover {
  text-decoration: underline;
}

.site-legal-main {
  margin-bottom: 6px;
}

/* ── Legal overlay (Terms / Privacy) ───────────────────────── */
#legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
#legal-overlay.hidden { display: none !important; }

#legal-modal {
  background: var(--surf-modal, var(--bg-card, #1e1a0e));
  border: 3px solid var(--bd, var(--gold, #c68b00));
  border-radius: var(--radius-modal, 4px);
  box-shadow: 8px 8px 0 var(--shadow, rgba(0,0,0,.6));
  width: min(96vw, 680px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 2px solid var(--bd, var(--gold, #c68b00));
  font-family: var(--font-base, monospace);
  font-size: calc(13px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold, #ffd700);
  flex-shrink: 0;
}

#legal-close-btn {
  background: none;
  border: 1px solid var(--bd, #c68b00);
  color: var(--gold, #ffd700);
  font-size: calc(12px * var(--ts));
  padding: 2px 8px;
  cursor: pointer;
  border-radius: var(--radius-btn, 2px);
  font-family: inherit;
  letter-spacing: 1px;
}
#legal-close-btn:hover { background: var(--gold, #c68b00); color: var(--bg, #1a1206); }

#legal-modal-body {
  overflow-y: auto;
  padding: 16px 18px 20px;
  font-family: var(--font-base, monospace);
  font-size: calc(12px * var(--ts));
  line-height: 1.85;
  color: var(--tx, var(--light, #e8deca));
}

#legal-version-line {
  font-size: calc(10px * var(--ts));
  opacity: .6;
  margin: 0 0 14px;
  letter-spacing: 1px;
}

#legal-sections h2 {
  font-size: calc(11px * var(--ts));
  letter-spacing: 1px;
  color: var(--gold, #ffd700);
  margin: 16px 0 4px;
}

#legal-sections p {
  margin: 0 0 8px;
}

/* ── Account screen ──────────────────────────────────────────── */
#screen-account {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
  gap: 28px;
}

/* ── Stats table (account + leaderboard) ─────────────────────── */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
}
.stats-table th {
  text-align: left;
  color: var(--tx-sub);
  padding: 4px 8px;
  border-bottom: 1px solid var(--mat-border);
  font-weight: normal;
}
.stats-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--mat);
}
.stats-table td:last-child { text-align: right; font-weight: bold; }
.stats-table tr:last-child td { border-bottom: none; }

/* ── Guide overlay (How To Play) ─────────────────────────────── */
#guide-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  z-index: 210;
}
#guide-overlay.hidden { display: none !important; }

#guide-modal {
  background: var(--surf-modal);
  border: 3px solid var(--bd);
  border-radius: var(--radius-modal);
  box-shadow: 8px 8px 0 var(--shadow);
  width: min(96vw, 560px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--dark);
  color: var(--light);
  font-size: calc(9px * var(--ts));
  letter-spacing: 3px;
  flex-shrink: 0;
}

#btn-guide-close {
  background: none;
  border: 1px solid var(--mid);
  color: var(--light);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
#btn-guide-close:hover { background: var(--mid); }

#guide-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--mat);
  flex-shrink: 0;
}
#guide-step-label {
  font-size: calc(7px * var(--ts));
  color: var(--mid);
  white-space: nowrap;
  letter-spacing: 1px;
}
#guide-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bd);
  border-radius: 2px;
  overflow: hidden;
}
#guide-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width .3s ease;
}

#guide-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 16px;
  color: var(--tx);
}

.guide-step-icon {
  font-size: calc(32px * var(--ts));
  margin-bottom: 10px;
  display: block;
  text-align: center;
}
.guide-step-title {
  font-size: calc(10px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 10px;
  text-align: center;
}
.guide-step-desc {
  font-size: calc(7.5px * var(--ts));
  line-height: 1.8;
  color: var(--tx);
  margin-bottom: 10px;
}
.guide-step-desc + .guide-step-desc {
  margin-top: 6px;
}
.guide-tip {
  background: var(--mat);
  border-left: 3px solid var(--gold);
  padding: 8px 10px;
  font-size: calc(7px * var(--ts));
  line-height: 1.7;
  color: var(--tx-sub);
  margin-top: 10px;
  letter-spacing: .5px;
}

#deal-intro-overlay,
#second-charleston-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .58);
  z-index: 230;
  transition: opacity .18s ease;
}

#deal-intro-overlay.hidden,
#second-charleston-overlay.hidden {
  display: none !important;
}

#deal-intro-overlay.visible,
#second-charleston-overlay.visible {
  display: flex;
}

.deal-intro-card {
  width: min(88vw, 360px);
  padding: 16px 18px 14px;
  background: var(--surf-modal);
  border: 3px solid var(--bd);
  box-shadow: 8px 8px 0 var(--shadow);
  text-align: center;
}

.deal-intro-dice {
  font-size: calc(28px * var(--ts));
  margin-bottom: 10px;
}

.deal-intro-title {
  font-size: calc(11px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-head);
  margin-bottom: 8px;
}

.deal-intro-sub,
.deal-intro-note {
  font-size: calc(7px * var(--ts));
  line-height: 1.8;
  color: var(--tx);
}

.deal-intro-note {
  margin-top: 8px;
  color: var(--tx-sub);
}

.second-charleston-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.second-charleston-card {
  max-width: 420px;
}

.tile.tile-touch-sort-src {
  outline: 2px solid var(--gold-lt);
  outline-offset: -1px;
  opacity: .7;
}

.tile.tile-touch-sort-target {
  outline: 2px dashed var(--gold);
  outline-offset: -1px;
}

#guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--mat);
  flex-shrink: 0;
  border-top: 2px solid var(--bd);
}

#btn-guide-next { background: var(--gold); color: var(--dark); border-color: var(--gold); }
#btn-guide-next:hover { filter: brightness(1.1); }
#btn-guide-prev { color: var(--mid); }

/* ── Leaderboard overlay ─────────────────────────────────────── */
#leaderboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.80);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
#leaderboard-overlay.hidden { display: none !important; }

#leaderboard-modal {
  background: var(--surf-modal);
  border: 3px solid var(--bd);
  border-radius: var(--radius-modal);
  box-shadow: 8px 8px 0 var(--shadow);
  width: min(90vw, 520px);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#leaderboard-modal #handbook-header {
  position: sticky;
  top: 0;
}
#leaderboard-body {
  padding: 20px 24px;
}
.lb-rank {
  font-size: calc(9px * var(--ts));
  color: var(--gold);
  min-width: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 6px;
}
.lb-no-data {
  font-size: calc(8px * var(--ts));
  color: var(--tx-sub);
  text-align: center;
  padding: 20px;
  letter-spacing: 1px;
}

/* ── Leaderboard tabs ─────────────────────────────────────────── */
.lb-tabs {
  display: flex;
  border-bottom: 2px solid var(--dark);
}
.lb-tab {
  flex: 1;
  background: var(--mat);
  border: none;
  border-right: 2px solid var(--dark);
  padding: 8px 0;
  font-family: inherit;
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--tx-sub);
}
.lb-tab:last-child { border-right: none; }
.lb-tab-active {
  background: var(--surf);
  color: var(--tx);
}

/* ── Friends list in account screen ─────────────────────────────── */
.friend-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--mat);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
}
.friend-request-row:last-child { border-bottom: none; }
.friend-request-row .fr-name { flex: 1; }
.fr-btn {
  font-family: inherit;
  font-size: calc(6px * var(--ts));
  letter-spacing: 1px;
  padding: 3px 7px;
  border: 2px solid var(--bd);
  background: var(--surf-panel);
  cursor: pointer;
  color: var(--tx);
}
.fr-btn:hover { background: var(--surf); }


/* ═══════════════════════════════════════════════════════════════
   MULTIPLAYER BUTTON (main menu)
════════════════════════════════════════════════════════════════ */
.btn-mp {
  background: var(--dark);
  color: var(--gold-lt);
  border-color: var(--gold);
}
.btn-mp:hover { background: var(--mid); }


/* ═══════════════════════════════════════════════════════════════
   MULTIPLAYER SCREEN  (#screen-mp)
════════════════════════════════════════════════════════════════ */
#screen-mp, #screen-lobby {
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  overflow-y: auto;
  padding: 28px 0 40px;
}

/* Inner content wrapper — constrains width on large screens */
.screen-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
}
.screen-inner > * { width: 100%; }

.mp-section-title {
  font-size: calc(7px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-sub);
  margin-bottom: 8px;
  text-align: center;
}

.mp-divider {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  text-align: center;
  padding: 10px 0 4px;
}

.mp-hint {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: 1px;
  line-height: 1.8;
}

/* Quick-join list */
.mp-quick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 32px;
}

.mp-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--surf);
  border: 2px solid var(--mat-border);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
}

.mp-quick-host  { flex: 1; font-size: calc(8px * var(--ts)); }
.mp-quick-seats { color: var(--tx-sub); font-size: calc(6px * var(--ts)); }


/* ═══════════════════════════════════════════════════════════════
   LOBBY SCREEN  (#screen-lobby)
════════════════════════════════════════════════════════════════ */
.lobby-code-display {
  text-align: center;
  margin-bottom: 12px;
}

.lobby-code-label {
  font-size: clamp(18px, 5vw, 28px);
  letter-spacing: 10px;
  color: var(--gold);
  background: var(--dark);
  padding: 10px 16px;
  display: inline-block;
  border: 3px solid var(--gold);
  font-family: var(--font);
}

.lobby-seats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.lobby-seat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: var(--surf-card);
  border: 2px solid var(--mat-border);
  font-size: calc(8px * var(--ts));
}

.lobby-seat-num {
  font-size: calc(6px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-sub);
  width: 52px;
}

.lobby-seat-name  { flex: 1; letter-spacing: 1px; }
.lobby-seat-empty { color: var(--tx-sub); font-size: calc(7px * var(--ts)); }

/* In-lobby chat */
.lobby-chat-log {
  max-height: 110px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.lobby-chat-msg {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  line-height: 1.6;
  word-break: break-word;
}

.lobby-chat-msg .chat-user {
  color: var(--gold);
  margin-right: 4px;
}

/* Danger button variant */
.btn-danger {
  background: var(--red);
  color: var(--light);
  border-color: var(--red);
}
.btn-danger:hover { opacity: .85; }


/* ═══════════════════════════════════════════════════════════════
   IN-GAME CHAT PANEL  (#chat-panel)
════════════════════════════════════════════════════════════════ */
#chat-panel {
  position: fixed;
  right: 0;
  bottom: 52px;           /* sit above the controls bar */
  width: 270px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  border: 2px solid var(--gold);
  border-right: none;
  border-radius: var(--radius-panel) 0 0 var(--radius-panel);
  z-index: 400;
  font-family: var(--font);
  box-shadow: -4px 0 16px rgba(0,0,0,.5);
  /* slide-in animation */
  animation: slideInChat .15s ease-out;
}

@keyframes slideInChat {
  from { transform: translateX(280px); }
  to   { transform: translateX(0); }
}

#chat-panel.hidden { display: none; }

#chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--gold);
  color: var(--dark);
  font-size: calc(8px * var(--ts));
  letter-spacing: 2px;
}

#btn-chat-close {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  background: none;
  border: none;
  color: var(--dark);
  cursor: pointer;
  padding: 2px 4px;
}

#chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
}

.chat-msg {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  line-height: 1.7;
  color: var(--chat-msg-clr);
  word-break: break-word;
  display: flex;
  gap: 5px;
  align-items: baseline;
  flex-wrap: wrap;
}

.chat-user {
  color: var(--gold-lt);
  white-space: nowrap;
}

.chat-text { flex: 1; }

.chat-ts {
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  white-space: nowrap;
  align-self: flex-end;
}

#chat-input-row {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--bd-sub);
}

#chat-input {
  flex: 1;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  padding: 4px 6px;
  background: var(--chat-input-bg);
  border: 1px solid var(--chat-input-border);
  color: var(--chat-msg-clr);
  outline: none;
}
#chat-input::placeholder { color: var(--tx-dim); }

#btn-chat-send {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  padding: 4px 8px;
  background: var(--gold);
  border: none;
  color: var(--dark);
  cursor: pointer;
  letter-spacing: 1px;
}
#btn-chat-send:hover { background: var(--gold-lt); }

/* Unread badge on 💬 button */
#chat-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: calc(6px * var(--ts));
  border-radius: 50%;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  padding: 0 2px;
  margin-left: 3px;
  vertical-align: middle;
}
#chat-badge.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
   STEP 9 — ACCESSIBILITY
════════════════════════════════════════════════════════════════ */

/* ── Visually-hidden utility (screen-reader only) ───────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Focus rings (WCAG 2.4.7) ───────────────────────────────── */
*:focus-visible {
  outline: 3px solid var(--gold-lt);
  outline-offset: 2px;
}
.tile:focus-visible {
  outline: 3px solid var(--gold-lt);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--gold-lt), 2px 2px 0 var(--shadow);
}
input:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold-lt);
  outline-offset: 2px;
}

/* ── Colorblind palettes ─────────────────────────────────────── */
.cb-deut .tile-suit-label,
.cb-prot .tile-suit-label,
.cb-achro .tile-suit-label,
.cb-mono .tile-suit-label { display: block; }

/* Deuteranopia */
.cb-deut .tile-B .tile-band  { background: #1558A0 !important; }
.cb-deut .tile-D .tile-band  { background: #CC6600 !important; }
.cb-deut .tile-C .tile-band  { background: #2A3F7A !important; }
.cb-deut .tile-suit-label    { color: #fff !important; }
.cb-deut .tile.selected      { border: 3px solid #FF8C00; box-shadow: none; }

/* Protanopia */
.cb-prot .tile-B .tile-band  { background: #1A7A60 !important; }
.cb-prot .tile-D .tile-band  { background: #7744BB !important; }
.cb-prot .tile-C .tile-band  { background: #224499 !important; }
.cb-prot .tile-suit-label    { color: #fff !important; }
.cb-prot .tile.selected      { border: 3px solid #AA66FF; box-shadow: none; }

/* Achromatopsia */
.cb-achro .tile-B  .tile-band { background: #282828 !important; }
.cb-achro .tile-D  .tile-band { background: #787878 !important; }
.cb-achro .tile-C  .tile-band { background: #484848 !important; }
.cb-achro .tile-N  .tile-band,
.cb-achro .tile-E  .tile-band,
.cb-achro .tile-S  .tile-band,
.cb-achro .tile-W  .tile-band { background: #5A5A5A !important; }
.cb-achro .tile-J  .tile-band { background: #989898 !important; }
.cb-achro .tile-Z  .tile-band { background: #383838 !important; }
.cb-achro .tile-F  .tile-band { background: #686868 !important; }
.cb-achro .tile-suit-label    { color: #fff !important; }
.cb-achro .tile.selected      { border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }

/* Legacy alias → deuteranopia */
.colorblind .tile-B .tile-band  { background: #1558A0 !important; }
.colorblind .tile-D .tile-band  { background: #CC6600 !important; }
.colorblind .tile-C .tile-band  { background: #2A3F7A !important; }
.colorblind .tile-suit-label     { color: #fff !important; }
.colorblind .tile.selected       { border: 3px solid #FF8C00; box-shadow: none; }

/* Monochrome (B&W / gray) — full site desaturated ─────────── */
/* Overrides suit + accent palette vars to graduated grays.     */
body.cb-mono {
  --bam:     #0a0a0a;   /* near-black */
  --dot:     #c0c0c0;   /* light gray */
  --crack:   #505050;   /* dark-mid gray */
  --wind:    #808080;   /* mid gray */
  --joker:   #b0b0b0;   /* light-mid gray */
  --blank:   #383838;   /* dark gray */
  --flower:  #989898;   /* mid-light gray */
  --gold:    #767676;   /* accent → gray */
  --gold-lt: #999999;
  --red:     #484848;
  --shadow:  #aaaaaa;
}
.cb-mono .tile-B  .tile-band { background: #0a0a0a !important; }
.cb-mono .tile-D  .tile-band { background: #c0c0c0 !important; }
.cb-mono .tile-C  .tile-band { background: #505050 !important; }
.cb-mono .tile-N  .tile-band,
.cb-mono .tile-E  .tile-band,
.cb-mono .tile-S  .tile-band,
.cb-mono .tile-W  .tile-band { background: #808080 !important; }
.cb-mono .tile-J  .tile-band { background: #b0b0b0 !important; }
.cb-mono .tile-Z  .tile-band { background: #383838 !important; }
.cb-mono .tile-F  .tile-band { background: #989898 !important; }
/* Suit letter: white on dark bands, dark on light (dot/joker/flower) bands */
.cb-mono .tile-suit-label    { color: #ffffff !important; }
.cb-mono .tile-D .tile-suit-label,
.cb-mono .tile-J .tile-suit-label,
.cb-mono .tile-F .tile-suit-label { color: #1a1a1a !important; }
.cb-mono .tile.selected      { border: 3px solid #555; box-shadow: 0 0 0 2px #aaa; }

/* In any CB mode: handbook category titles and point values use dark text (not gold)
   (mono is excluded — --gold is already gray so contrast is fine) */
.cb-deut .hb-cat-title,
.cb-prot .hb-cat-title,
.cb-achro .hb-cat-title,
.colorblind .hb-cat-title { color: var(--dark) !important; }
.cb-deut .hb-hand-val,
.cb-prot .hb-hand-val,
.cb-achro .hb-hand-val,
.colorblind .hb-hand-val  { color: var(--dark) !important; }

/* In HC + CB combined: both classes on <body>, so NO space between them */
body.high-contrast.cb-deut .hb-cat-title,
body.high-contrast.cb-prot .hb-cat-title,
body.high-contrast.cb-achro .hb-cat-title,
body.high-contrast.colorblind .hb-cat-title { color: #ffffff !important; }
body.high-contrast.cb-deut .hb-hand-val,
body.high-contrast.cb-prot .hb-hand-val,
body.high-contrast.cb-achro .hb-hand-val,
body.high-contrast.colorblind .hb-hand-val  { color: #ffffff !important; }
body.high-contrast.cb-deut .hb-hand-key,
body.high-contrast.cb-prot .hb-hand-key,
body.high-contrast.cb-achro .hb-hand-key,
body.high-contrast.cb-mono .hb-hand-key,
body.high-contrast.colorblind .hb-hand-key  { color: #ffffff; }

/* Handbook suit tokens: palette-specific colours (match tile band palette) */
/* Normal mode colours are defined at .hb-token-g/r/b in the handbook block */
.cb-deut .hb-token-g  { color: #1558A0; }
.cb-deut .hb-token-r  { color: #CC6600; }
.cb-deut .hb-token-b  { color: #2A3F7A; }

.cb-prot .hb-token-g  { color: #1A7A60; }
.cb-prot .hb-token-r  { color: #7744BB; }
.cb-prot .hb-token-b  { color: #224499; }

.cb-achro .hb-token-g { color: #404040; }   /* dark gray  */
.cb-achro .hb-token-r { color: #888888; }   /* mid gray   */
.cb-achro .hb-token-b { color: #606060; }   /* dark-mid   */

.cb-mono .hb-token-g  { color: #222222; }   /* near-black */
.cb-mono .hb-token-r  { color: #888888; }   /* mid gray   */
.cb-mono .hb-token-b  { color: #505050; }   /* dark gray  */

/* HC + achro/mono: invert grays so tokens stay readable on dark handbook bg */
body.high-contrast.cb-achro .hb-token-g { color: #aaaaaa !important; }
body.high-contrast.cb-achro .hb-token-r { color: #dddddd !important; }
body.high-contrast.cb-achro .hb-token-b { color: #cccccc !important; }
body.high-contrast.cb-mono  .hb-token-g { color: #cccccc !important; }
body.high-contrast.cb-mono  .hb-token-r { color: #aaaaaa !important; }
body.high-contrast.cb-mono  .hb-token-b { color: #bbbbbb !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — overscroll + safe-area base rules (always applied)
════════════════════════════════════════════════════════════════ */

/* Kill pull-to-refresh / scroll bounce during game */
body { overscroll-behavior: none; }

/* Safe-area padding for notched phones (iOS notch, Android punch-hole) */
#status-bar {
  padding-top:    max(env(safe-area-inset-top),    6px);
  padding-bottom: max(env(safe-area-inset-bottom),  8px);
  padding-left:   max(env(safe-area-inset-left),  12px);
  padding-right:  max(env(safe-area-inset-right), 12px);
}
#controls {
  padding-bottom: max(env(safe-area-inset-bottom), 2px);
  padding-left:   max(env(safe-area-inset-left),   0px);
  padding-right:  max(env(safe-area-inset-right),  0px);
}

/* touch-action: manipulation eliminates the 300 ms tap delay on all
   interactive elements without disabling pinch-zoom on overlays */
.tile, .btn-action, .btn-menu, .btn-ts, .auth-tab, .lb-tab {
  touch-action: manipulation;
}

/* ── Tile long-press tooltip (touch) ────────────────────────── */
#tile-tooltip {
  position: fixed;
  background: var(--dark);
  color: var(--light);
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  padding: 4px 8px;
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow);
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transition: opacity .12s;
}
#tile-tooltip.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — portrait phone  (≤ 480 px wide, vMM)
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Tile sizing ── */
  :root {
    --tile-w: clamp(16px, 5.5vw, 24px);
  }

  /* ── vMM panel rules ─────────────────────────────────────── */
  /* Opponent areas hidden — accessed via OTHERS popup. */
  #area-top, #area-left, #area-right { display: none; }
  #btn-view-field { display: none !important; }   /* field is inline in portrait */

  /* Restore areas when moved into the popup panel */
  #mobile-panel-body #area-top {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  #mobile-panel-body #area-left,
  #mobile-panel-body #area-right { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  /* Restore hands hidden by base mobile rules */
  #mobile-panel-body #hand-1,
  #mobile-panel-body #hand-2,
  #mobile-panel-body #hand-3 { display: flex; }
  /* vMM: opponents shown as parallel vertical bars in the popup */
  #mobile-panel-body .mm-others-row {
    display: flex; flex-direction: row; justify-content: center;
    gap: 12px; width: 100%; flex-wrap: wrap;
  }
  #mobile-panel-body .mm-player-col {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  #mobile-panel-body .player-tag-v { writing-mode: horizontal-tb; }

  /* View toggle buttons: only OTHERS shown in portrait */
  .btn-mobile-only { display: inline-flex !important; }

  /* Handbook header: larger touch targets on mobile */
  #btn-handbook-close,
  .btn-handbook-ctrl,
  #btn-hb-rank,
  #btn-hb-marked,
  #btn-hb-assist { font-size: calc(12px * var(--ts)); padding: 5px 8px; min-width: 32px; text-align: center; }

  /* Side player areas (not in panel): collapse strips */
  #area-left-bottom, #area-right-bottom { flex-shrink: 0; }
  #hand-1, #hand-3 { display: none; }
  #tray-1, #tray-3 { flex-direction: column; gap: 1px; }
  #area-left .player-tag, #area-right .player-tag {
    writing-mode: horizontal-tb; font-size: calc(5px * var(--ts)); letter-spacing: 0;
  }

  /* Wall strips: slimmer */
  .wall-strip-v { width: 8px; }
  .wall-seg     { width: 6px; height: 8px; }
  .wall-strip-v .wall-seg { width: 8px; height: 6px; }
  .wall-count-num, .wall-roll-info { display: none; }

  /* Controls: larger tap targets */
  #controls { gap: 3px; padding: 3px 2px; }
  .btn-action { min-height: 44px; font-size: calc(7px * var(--ts)); padding: 6px 8px; }

  /* Status bar: compact */
  #status-bar { font-size: calc(6px * var(--ts)); height: auto; min-height: 28px; }

  /* Menus: touch-friendly tap targets */
  .btn-menu { min-height: 44px; box-sizing: border-box; }
  .btn-menu.btn-sm { width: auto; min-height: 36px; font-size: calc(7px * var(--ts)); padding: 8px 16px; }

  /* Settings / auth cards: full width */
  .settings-card { width: 100%; max-width: 100%; box-sizing: border-box; }
  .auth-card     { width: 100%; max-width: 100%; }

  /* Setting rows: stacked + centered */
  .setting-row { flex-direction: column; align-items: center; gap: 4px; }
  .setting-row input,
  .setting-row .btn-action,
  .setting-row .sound-ctrl { width: 100%; }
  .settings-2col { flex-direction: column; align-items: center; }
  .settings-col  { align-items: center; }
  .settings-col-divider { width: 100%; height: 1px; margin: 8px 0; }

  /* Auth tabs: full-width */
  .auth-tabs { width: 100%; }
  .auth-tab  { flex: 1; min-height: 40px; }

  /* Overlays: full-screen on small devices */
  #handbook-modal    { width: 100vw; max-width: 100vw; max-height: 95vh; margin: 0; border-radius: 0; }
  #leaderboard-modal { width: 100vw; max-width: 100vw; }
  #kb-help-modal     { width: 94vw; }
  #winner-box        { width: 88vw; }

  /* MP screens */
  .mp-card, .lobby-code-display { width: 100%; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — landscape phone  (height ≤ 500 px, orientation: landscape, lMM)
   Covers all phones held horizontally regardless of pixel width.
════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

  /* ── Tile sizing ── */
  :root {
    --tile-w: clamp(16px, 3.5vh, 26px);
  }

  /* ── lMM panel rules ─────────────────────────────────────── */
  /* Hide opponent areas. */
  #area-top, #area-left, #area-right { display: none; }
  .btn-mobile-only { display: inline-flex !important; }

  /* Restore areas when moved into the popup panel */
  #mobile-panel-body #area-top   { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  #mobile-panel-body #area-left,
  #mobile-panel-body #area-right { display: flex; flex-direction: row; align-items: center; gap: 6px; }
  #mobile-panel-body #hand-1,
  #mobile-panel-body #hand-2,
  #mobile-panel-body #hand-3   { display: flex; }
  #mobile-panel-body #field-area { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }
  /* lMM wrappers: horizontal bands stacked vertically */
  #mobile-panel-body .mm-others-row  { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  #mobile-panel-body .mm-player-band { flex-direction: row; align-items: center; gap: 8px; width: 100%; }
  #mobile-panel-body .mm-player-col  { flex-direction: column; align-items: center; gap: 4px; }

  /* Tight layout: kill flex-grow on board so hand/controls hug center */
  #screen-game.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
  }
  #board { flex: 0 0 auto; }
  /* Tighten area-bottom: no extra padding, only what's needed */
  #area-bottom {
    gap: 2px;
    padding: 2px 0;
    justify-content: center;
  }
  #tray-0 { display: none; }   /* hide own tray in hMM — saves vertical space */
  #controls { flex-wrap: wrap; padding: 2px 4px; gap: 3px; }

  /* Handbook header: larger touch targets */
  #btn-handbook-close,
  .btn-handbook-ctrl,
  #btn-hb-rank,
  #btn-hb-marked,
  #btn-hb-assist { font-size: calc(12px * var(--ts)); padding: 5px 8px; min-width: 32px; text-align: center; }

  /* Board: compact for short viewport */
  #board { padding: 1px 3px; gap: 2px; }
  #area-middle { gap: 2px; }
  #area-left, #area-right { gap: 3px; }

  /* Status bar: shorter */
  #status-bar { height: 26px; font-size: calc(6px * var(--ts)); }

  /* Wall strips: slimmer */
  .wall-strip-v { width: 14px; }
  .wall-count-num, .wall-roll-info { display: none; }

  /* Controls: tap-friendly */
  #controls { gap: 3px; padding: 3px 4px; }
  .btn-action { min-height: 40px; font-size: calc(7px * var(--ts)); padding: 5px 8px; }

  /* Menus: natural width */
  .btn-menu { min-height: 44px; box-sizing: border-box; }
  .btn-menu.btn-sm { width: auto; min-height: 36px; font-size: calc(7px * var(--ts)); padding: 8px 16px; }

  /* Settings / auth: full width */
  .settings-card { width: 100%; max-width: 100%; box-sizing: border-box; }
  .auth-card     { width: 100%; max-width: 100%; }

  /* Setting rows: centered when stacked */
  .setting-row { flex-direction: column; align-items: center; gap: 4px; }
  .setting-row input,
  .setting-row .btn-action,
  .setting-row .sound-ctrl { width: 100%; }
  .settings-2col { flex-direction: column; align-items: center; }
  .settings-col  { align-items: center; }
  .settings-col-divider { width: 100%; height: 1px; margin: 8px 0; }

  /* Overlays: full-screen */
  #handbook-modal    { width: 100vw; max-width: 100vw; max-height: 95vh; margin: 0; border-radius: 0; }
  #leaderboard-modal { width: 100vw; max-width: 100vw; }
  #kb-help-modal     { width: 94vw; }
  #winner-box        { width: 88vw; }

  /* MP screens */
  .mp-card, .lobby-code-display { width: 100%; max-width: 100%; }
}

/* ── High contrast ───────────────────────────────────────────── */
/* Strategy: override semantic theme tokens only — no more
   whack-a-mole per-element overrides.  Every element that uses
   var(--tx), var(--tx-sub), var(--surf-*), etc. automatically
   picks up the HC palette. */
body.high-contrast {
  /* ── Raw palette ─── */
  --bg:         #000000;
  --bg-card:    #0d0d0d;
  --mat:        #111111;
  --mat-border: #ffffff;
  --mid:        #999999;
  --gold:       #FFD700;
  --gold-lt:    #FFE040;
  --red:        #FF4444;
  --shadow:     #aaaaaa;
  --bam:        #00CC66;
  --dot:        #FF6600;
  --crack:      #4499FF;
  --wind:       #CC44FF;
  --joker:      #FFDD00;
  --blank:      #888888;
  --flower:     #FF44AA;

  /* ── Semantic token overrides ───────────────────────────────
     Change a theme: override only this block.
  ─────────────────────────────────────────────────────────── */
  --tx:          #ffffff;   /* primary text → white */
  --tx-sub:      #cccccc;   /* secondary text */
  --tx-dim:      #999999;   /* muted / hint */
  --tx-on-dark:  #ffffff;
  --tx-head:     #FFD700;   /* section headers */
  --tx-head-hi:  #FFE040;   /* bright headers */
  --tx-err:      #FF4444;

  --surf:        #000000;
  --surf-card:   #0d0d0d;
  --surf-panel:  #111111;
  --surf-modal:  #111111;
  --surf-input:  #1a1a1a;

  --bd:          #aaaaaa;   /* visible borders on dark bg */
  --bd-sub:      #555555;
}
/* Body text colour driven by --tx (above); keep this as explicit fallback */
body.high-contrast { color: var(--tx); }
/* Tile label sits on the light tile face → stay dark */
body.high-contrast .tile .tile-label     { color: var(--dark) !important; }
/* Thicker tile border + selection ring */
body.high-contrast .tile                 { border-width: 3px; }
body.high-contrast .tile.selected        { outline: 4px solid var(--gold-lt); outline-offset: 0; }
/* Card borders need explicit override since they use var(--dark) structurally */
body.high-contrast .settings-card,
body.high-contrast .auth-card            { border-color: var(--bd); }
/* Auth tab / divider */
body.high-contrast .auth-divider         { color: var(--tx-sub); border-color: var(--bd-sub); }
/* Input fields — safety net for any inputs not yet using --surf-input/--tx */
body.high-contrast input[type=text],
body.high-contrast input[type=password],
body.high-contrast input[type=email],
body.high-contrast input[type=number]    { background: var(--surf-input) !important; color: var(--tx) !important; border-color: var(--bd-sub) !important; }
/* Leaderboard active tab needs distinct background (not just --surf black) */
body.high-contrast .lb-tab-active        { background: #2a2a2a; }
/* Handbook suit tokens use hard-coded normal-mode colours → remap to HC suit palette */
body.high-contrast .hb-token-g           { color: var(--bam);   }
body.high-contrast .hb-token-r           { color: var(--red);   }
body.high-contrast .hb-token-b           { color: var(--crack); }
/* Focus ring */
body.high-contrast *:focus-visible       { outline: 4px solid #FFE040; outline-offset: 3px; }

/* ── Text scale ──────────────────────────────────────────────── */
/* Overriding --tile-w cascades ALL tile dimensions automatically:
   --tile-h, --tile-band-h, --tile-font, --tile-sm-* all derive from it. */
:root       { --ts: 1; }

body.text-sm {
  --ts:     0.80;
  --tile-w: clamp(18px, min(2.05vw, 4.25vh), 34px);
  --tile-font: calc(clamp(18px, min(2.05vw, 4.25vh), 34px) * 0.29);
}
body.text-sm .btn-menu         { padding: 12px 30px; }
body.text-sm .btn-menu.btn-creative {  padding: 9px 20px; }
body.text-sm .btn-menu.btn-sm  {  padding: 7px 16px; }
body.text-sm .setting-select,
body.text-sm .settings-card input,
body.text-sm #btn-handbook-close,
body.text-sm .btn-handbook-ctrl,
body.text-sm #btn-hb-rank,
body.text-sm #btn-hb-marked,

/* text-md is the default — no overrides needed */

body.text-lg {
  --ts:     1.50;
  --tile-w: clamp(30px, min(3.4vw, 7.0vh), 60px);
  --tile-font: calc(clamp(30px, min(3.4vw, 7.0vh), 60px) * 0.29);
}
body.text-lg .btn-menu         { padding: 18px 46px; }
body.text-lg .btn-menu.btn-creative { padding: 13px 34px; }
body.text-lg .btn-menu.btn-sm  { padding: 11px 24px; }
body.text-lg .setting-select,
body.text-lg .settings-card input,
body.text-lg #btn-handbook-close,
body.text-lg .btn-handbook-ctrl,
body.text-lg #btn-hb-rank,
body.text-lg #btn-hb-marked,
body.text-lg #btn-hb-assist    { padding: 4px 10px; }

body.text-xl {
  --ts:     2.10;
  --tile-w: clamp(36px, min(4.1vw, 8.5vh), 74px);
  --tile-font: calc(clamp(36px, min(4.1vw, 8.5vh), 74px) * 0.29);
}
body.text-xl .btn-menu         { padding: 22px 58px; }
body.text-xl .btn-menu.btn-creative { padding: 18px 46px; }
body.text-xl .btn-menu.btn-sm  { padding: 14px 32px; }
body.text-xl .setting-select,
body.text-xl .settings-card input,

/* Guide readability guardrails: keep text high-contrast across all themes */
#screen-guide,
.guide-overlay,
.guide-modal,
.guide-panel,
.guide-content,
.guide-step,
.guide-popover,
.guide-text,
.guide-body,
.guide-list {
  color: var(--tx);
}

#screen-guide .settings-card,
.guide-panel,
.guide-modal,
.guide-popover {
  background: var(--surf-modal);
  border-color: var(--bd);
}

.guide-muted,
.guide-help,
.guide-caption,
.guide-subtext {
  color: var(--tx-sub);
}
body.text-xl #btn-handbook-close,
body.text-xl .btn-handbook-ctrl,
body.text-xl #btn-hb-rank,
body.text-xl #btn-hb-marked,
body.text-xl #btn-hb-assist    { padding: 5px 12px; }

/* C5: autocall panel scales with text size */

/* ── Text size button group in settings ─────────────────────── */
/* ── Controls separator ─────────────────────────────────────── */
.controls-sep {
  display: inline-block;
  width: 0;
  height: 26px;
  border-left: 3px solid var(--bd-sub);
  margin: 0 4px;
  vertical-align: middle;
  opacity: 0.5;
}

/* ── Phase action banner (above hand, pulsing) ──────────────── */
#phase-banner {
  width: 100%;
  text-align: center;
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  letter-spacing: 3px;
  padding: 7px 12px;
  color: var(--dark);
  background: var(--gold);
  box-sizing: border-box;
  animation: phase-pulse 1.1s ease-in-out infinite alternate;
  flex-shrink: 0;
}
#phase-banner.hidden { display: none; }

/* Dimmed state during bot / opponent turns — no pulse */
#phase-banner.phase-banner-bot {
  opacity: 0.45;
  animation: none;
}

@keyframes phase-pulse {
  from { opacity: 0.80; box-shadow: none; }
  to   { opacity: 1.00; box-shadow: 0 0 10px var(--gold); }
}

/* ── Adaptors drawer (expands inline, shifts content) ───────── */
#adaptors-drawer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  width: 100%;
  flex-basis: 100%;
  border-top: 1px solid var(--bd-sub);
  padding-top: 5px;
  margin-top: 1px;
}
#adaptors-drawer.hidden { display: none; }

/* Active state when drawer is open */
#btn-adaptors-toggle.btn-active {
  background: var(--mid);
  border: 1px solid var(--gold-lt);
  color: var(--gold-lt);
}

/* ── Settings dropup ────────────────────────────────────────── */
#settings-dropup {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--dark);
  border: 1px solid var(--bd);
  border-radius: var(--radius-btn);
  box-shadow: -4px -4px 0 var(--shadow);
  z-index: 30;
  min-width: 110px;
}
#settings-dropup.hidden { display: none; }
#settings-dropup .btn-action { width: 100%; text-align: left; }

#btn-settings-menu.btn-active {
  background: var(--mid);
  border: 1px solid var(--gold-lt);
  color: var(--gold-lt);
}

.ts-group {
  display: flex;
  gap: 4px;
}
.btn-ts {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  padding: 6px 10px;
  background: var(--mid);
  color: var(--tx-on-dark);
  border: 2px solid var(--bd);
  border-radius: var(--radius-btn);
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .1s;
}
.btn-ts.btn-ts-active {
  background: var(--dark);
  color: var(--gold-lt);
}
.btn-ts:hover:not(.btn-ts-active) { background: var(--mid); filter: brightness(1.2); }

/* ── Announce toast ─────────────────────────────────────────── */
#announce-toast {
  position: fixed;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,.90);
  color: var(--gold-lt);
  border: 1px solid var(--gold);
  padding: 7px 18px;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
  text-align: center;
  max-width: 80vw;
  z-index: 8000;
  pointer-events: none;
  transition: opacity 0.42s;
}
#announce-toast.toast-fade { opacity: 0; }
#announce-toast.hidden { display: none !important; }

/* ── Keyboard-controls help overlay ─────────────────────────── */
#kb-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#kb-help-overlay.hidden { display: none !important; }
#kb-help-modal {
  background: var(--surf-card);
  border: 2px solid var(--gold);
  border-radius: var(--radius-modal);
  padding: 16px 20px;
  max-width: 360px;
  width: 90%;
  font-family: var(--font);
  color: var(--tx);
}
#kb-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--mat-border);
  padding-bottom: 6px;
}
#kb-help-title {
  font-size: calc(10px * var(--ts));
  color: var(--gold-lt);
  letter-spacing: 2px;
}
#btn-kb-help-close {
  font-family: var(--font);
  font-size: calc(10px * var(--ts));
  background: transparent;
  border: 1px solid var(--bd-sub);
  color: var(--tx);
  cursor: pointer;
  padding: 2px 6px;
}
#btn-kb-help-close:hover { border-color: var(--light); }
.kb-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  align-items: baseline;
}
.kb-list dt {
  font-size: calc(9px * var(--ts));
  color: var(--gold);
  white-space: nowrap;
  text-align: right;
}
.kb-list dd {
  font-size: calc(8px * var(--ts));
  color: var(--light);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RULES OVERLAY
════════════════════════════════════════════════════════════════ */
#rules-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.80);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
#rules-overlay.hidden { display: none !important; }

#rules-modal {
  background: var(--surf-modal);
  border: 3px solid var(--bd);
  border-radius: var(--radius-modal);
  box-shadow: 8px 8px 0 var(--shadow);
  width: min(97vw, 720px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--dark);
  color: var(--light);
  font-size: calc(9px * var(--ts));
  letter-spacing: 3px;
  flex-shrink: 0;
}

#btn-rules-close {
  background: none;
  border: 1px solid var(--mid);
  color: var(--light);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  letter-spacing: 1px;
}
#btn-rules-close:hover { background: var(--mid); }

#rules-body {
  padding: 14px 18px;
  overflow-y: auto;
  font-size: calc(8px * var(--ts));
  line-height: 1.9;
  color: var(--tx);
}

.rules-section {
  border-bottom: 1px solid var(--mat-border);
  margin-bottom: 4px;
}
.rules-section > summary {
  font-size: calc(8px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold);
  cursor: pointer;
  padding: 7px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.rules-section > summary::before {
  content: '\25b6';
  font-size: calc(6px * var(--ts));
  transition: transform .15s;
  flex-shrink: 0;
}
.rules-section[open] > summary::before { transform: rotate(90deg); }
.rules-section p,
.rules-section ul { margin: 4px 0 10px 0; }
.rules-section ul  { padding-left: 18px; }
.rules-section li  { margin-bottom: 5px; }
.rules-section strong { color: var(--tx); }
.rules-section em     { color: var(--tx-sub); }

/* suit colour tokens inside rules */
.suit-b { color: var(--bam);   font-weight: bold; }
.suit-d { color: var(--dot);   font-weight: bold; }
.suit-c { color: var(--crack); font-weight: bold; }
.suit-w { color: var(--wind);  font-weight: bold; }
.suit-j { color: var(--joker); font-weight: bold; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT OVERLAY
════════════════════════════════════════════════════════════════ */
#about-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
#about-overlay.hidden { display: none !important; }

#about-modal {
  background: var(--surf-modal, var(--bg-card, #1e1a0e));
  border: 3px solid var(--bd, var(--gold, #c68b00));
  border-radius: var(--radius-modal, 4px);
  box-shadow: 8px 8px 0 var(--shadow, rgba(0,0,0,.6));
  width: min(96vw, 520px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#about-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 2px solid var(--bd, var(--gold, #c68b00));
  font-family: var(--font-base, monospace);
  font-size: calc(13px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold, #ffd700);
  flex-shrink: 0;
}

#btn-about-close {
  background: none;
  border: 1px solid var(--bd, #c68b00);
  color: var(--gold, #ffd700);
  font-size: calc(12px * var(--ts));
  padding: 2px 8px;
  cursor: pointer;
  border-radius: var(--radius-btn, 2px);
  font-family: inherit;
  letter-spacing: 1px;
}
#btn-about-close:hover { background: var(--gold, #c68b00); color: var(--bg, #1a1206); }

#about-modal-body {
  overflow-y: auto;
  padding: 16px 18px 20px;
  font-family: var(--font-base, monospace);
  font-size: calc(12px * var(--ts));
  line-height: 1.8;
  color: var(--tx, var(--light, #e8deca));
}

.about-desc {
  font-size: calc(7px * var(--ts));
  line-height: 2.2;
  color: var(--tx-sub);
  margin: 0 0 12px 0;
  text-align: center;
}
.about-credit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(7px * var(--ts));
  padding: 4px 0;
  border-bottom: 1px solid var(--mat-border);
  gap: 8px;
}
.about-version-str {
  font-size: calc(8px * var(--ts));
  color: var(--gold);
  letter-spacing: 2px;
  margin: 6px 0;
  text-align: center;
}
.about-legal {
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  line-height: 1.8;
  margin: 12px 0;
  text-align: center;
}
.about-link {
  color: var(--gold-lt);
  text-decoration: underline;
}
.about-roadmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.about-roadmap-row {
  font-size: calc(7px * var(--ts));
  line-height: 2;
  padding: 2px 6px;
  border-radius: 4px;
}
.about-roadmap-row.done {
  color: var(--tx-sub);
  opacity: 0.75;
}
.about-roadmap-row.next {
  color: var(--gold-lt);
}
.about-roadmap-row.future {
  color: var(--tx-sub);
  opacity: 0.6;
  font-style: italic;
}

/* ── Badges overlay ──────────────────────────────────────────────── */
#badges-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 4900;
  display: flex;
  align-items: center;
  justify-content: center;
}
#badges-overlay.hidden { display: none; }
#badges-modal {
  background: var(--surf-modal, var(--bg-card));
  border: 3px solid var(--bd);
  border-radius: var(--radius-modal, 4px);
  box-shadow: 8px 8px 0 var(--shadow);
  width: min(94vw, 480px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#badges-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 2px solid var(--bd);
  font-size: calc(10px * var(--ts));
  color: var(--gold-lt);
  letter-spacing: 2px;
  flex-shrink: 0;
}
#badges-header button {
  background: none;
  border: none;
  color: var(--tx-sub);
  font-size: calc(14px * var(--ts));
  cursor: pointer;
  line-height: 1;
}
#badges-header button:hover { color: var(--tx); }
#badges-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
#badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surf-card, var(--bg-card));
  border: 2px solid var(--bd);
  border-radius: var(--radius-card, 4px);
  padding: 14px 12px;
  transition: border-color .2s;
}
.badge-item:hover { border-color: var(--gold); }
.badge-item-icon { font-size: calc(26px * var(--ts)); flex-shrink: 0; }
.badge-item-label {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--gold-lt);
  display: block;
  margin-bottom: 5px;
  line-height: 1.5;
}
.badge-item-desc {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  line-height: 1.6;
}
#badges-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}
.badges-onboard-link {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  text-decoration: none;
  letter-spacing: 0.5px;
}
.badges-onboard-link:hover { color: var(--gold-lt); }
@media (max-width: 380px) {
  #badges-grid { grid-template-columns: 1fr; }
}

/* ── Bug report overlay ──────────────────────────────────────────── */
#bug-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#bug-report-overlay.hidden { display: none; }
#bug-report-modal {
  background: var(--surf-modal, var(--bg-card, #1e1a0e));
  border: 3px solid var(--bd, var(--gold, #c68b00));
  border-radius: var(--radius-modal, 4px);
  box-shadow: 8px 8px 0 var(--shadow, rgba(0,0,0,.6));
  width: min(92vw, 440px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#bug-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(11px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bd, var(--gold, #c68b00));
}
#bug-report-header button {
  background: none;
  border: 1px solid var(--bd, #c68b00);
  color: var(--gold, #ffd700);
  font-size: calc(12px * var(--ts));
  cursor: pointer;
  line-height: 1;
  padding: 2px 8px;
  border-radius: var(--radius-btn, 2px);
  font-family: inherit;
}
#bug-report-header button:hover { background: var(--gold, #c68b00); color: var(--bg, #1a1206); }
#bug-report-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
/* type-tab row */
#bug-report-title-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#bug-report-title {
  font-size: calc(9px * var(--ts));
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: 700;
}
#bug-report-tagline {
  font-size: calc(6.5px * var(--ts));
  letter-spacing: 0.5px;
  color: var(--tx-sub);
  font-style: italic;
}
#bug-report-type-tabs {
  display: flex;
  gap: 6px;
}
/* inactive tab clearly dimmed */
#bug-report-type-tabs .admin-tab:not(.admin-tab-active) {
  opacity: 0.4;
}
#bug-report-type-tabs .admin-tab:not(.admin-tab-active):hover {
  opacity: 0.75;
}
/* fields */
.br-field { display: flex; flex-direction: column; gap: 5px; }
.br-label { font-size: calc(7px * var(--ts)); letter-spacing: 1px; color: var(--tx-sub); }
.br-optional { font-size: calc(6px * var(--ts)); opacity: 0.6; }
#br-what-happened, #br-what-expected {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card, #2e2810);
  border: 1px solid var(--mat-border, #5a4a1a);
  border-radius: var(--radius-input, 4px);
  color: var(--tx, #e8d48a);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.8;
}
/* screenshot drop zone */
.br-screenshot-zone {
  position: relative;
  border: 1px dashed var(--mat-border, #5a4a1a);
  border-radius: var(--radius-input, 4px);
  background: var(--bg-card, #2e2810);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.br-screenshot-zone:hover { border-color: var(--gold, #c68b00); }
#br-screenshot-hint {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  pointer-events: none;
}
#br-screenshot-preview {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}
.br-clear-ss {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--error, #c0392b);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: calc(9px * var(--ts));
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
/* status line */
.br-status {
  font-size: calc(7px * var(--ts));
  color: var(--gold, #ffd700);
  text-align: center;
}
/* invite code expand rows */
.inv-row:hover td { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.inv-expand-row td.inv-expand-cell { padding: 0; border: none; }
.inv-expand-inner { padding: 10px 16px 14px; }
.inv-user-table { width: 100%; font-size: calc(6.5px * var(--ts)); }
.inv-expand-arrow { font-size: calc(8px * var(--ts)); margin-right: 6px; color: var(--tx-sub); }
.inv-maxuses-input { width: 52px; padding: 3px 6px; font-size: calc(7px * var(--ts)); text-align: center; }
.inv-code-label { font-size: calc(6.5px * var(--ts)); }
.bug-report-context {
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  background: var(--bg-card, #2e2810);
  border: 1px solid var(--mat-border, #5a4a1a);
  border-radius: var(--radius-input, 4px);
  padding: 8px 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
}
.bug-report-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 2px;
}


/* ── Share prompt overlay ───────────────────────────────────────────────────── */
#share-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 4900;
  display: flex;
  align-items: center;
  justify-content: center;
}
#share-prompt-overlay.hidden { display: none; }
#share-prompt-modal {
  background: var(--surf-modal, var(--bg-card, #1e1a0e));
  border: 3px solid var(--bd, var(--gold, #c68b00));
  border-radius: var(--radius-modal, 4px);
  box-shadow: 8px 8px 0 var(--shadow, rgba(0,0,0,.6));
  width: min(90vw, 380px);
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#share-prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bd, var(--gold));
}
#share-prompt-title {
  font-size: calc(9px * var(--ts));
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: 700;
}
#share-prompt-header button {
  background: none;
  border: 1px solid var(--bd, #c68b00);
  color: var(--gold);
  font-size: calc(12px * var(--ts));
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-btn, 2px);
  font-family: inherit;
}
#share-prompt-header button:hover { background: var(--gold); color: var(--bg); }
.share-prompt-tagline {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  line-height: 1.8;
  margin: 0;
  font-style: italic;
}
.share-prompt-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#share-prompt-link {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--mat-border);
  border-radius: var(--radius-input, 4px);
  color: var(--tx);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  padding: 7px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#btn-share-copy { white-space: nowrap; }
.share-prompt-actions {
  display: flex;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   SKIN STORE
════════════════════════════════════════════════════════════════ */

/* Screen wrapper — centers content with a max-width */
#screen-store {
  overflow-y: auto;
  align-items: center;
  padding: 0;
}

/* Bounded inner container */
.store-container {
  width: 100%;
  max-width: 960px;
  padding: 16px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
}

/* Header row: title + back button */
.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.store-header .screen-title {
  margin: 0;
}

/* Two-column layout: sidebar + main */
.store-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Sidebar: filters + sort stacked vertically */
.store-sidebar {
  flex: 0 0 130px;
  background: var(--bg-card);
  border: 1px solid var(--mat-border);
  border-radius: 6px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
}
.store-sidebar-label {
  font-size: calc(6px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-sub);
  margin: 8px 0 4px;
  text-transform: uppercase;
}
.store-sidebar-label:first-child { margin-top: 0; }

.store-filter-btn {
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--tx-sub);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.store-filter-btn:hover {
  background: var(--mat);
  color: var(--tx);
  border-color: var(--mat-border);
}
.store-filter-btn.store-filter-active {
  background: var(--gold);
  color: #1a1206;
  border-color: var(--gold);
}

.store-sort-select {
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  background: var(--bg-card);
  border: 1px solid var(--mat-border);
  color: var(--tx);
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}

/* Rarity legend in sidebar */
.store-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.store-legend-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
}
.store-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Main catalog area */
.store-main {
  flex: 1;
  min-width: 0;
}

/* Catalog grid */
.store-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.store-loading {
  font-size: calc(8px * var(--ts));
  color: var(--tx-sub);
  text-align: center;
  padding: 24px;
  grid-column: 1 / -1;
}

/* Store card */
.store-card {
  background: var(--bg-card);
  border: 1px solid var(--mat-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.store-card:hover   { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.store-card:focus   { outline: 2px solid var(--gold); outline-offset: 2px; }
.store-card-owned   { border-color: var(--gold); }
.store-card-preview {
  background: var(--mat);
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  overflow: hidden;
}
.store-preview-wrapper {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  /* Fix tile sizing vars to a predictable small-ish absolute size
     so previews are consistent regardless of viewport.
     All derived vars must be listed since they're computed at :root. */
  --tile-w:         28px;
  --tile-h:         39.8px;
  --tile-band-h:    7.8px;
  --tile-font:      8.1px;
  --tile-sm-w:      20px;
  --tile-sm-h:      28.7px;
  --tile-sm-band-h: 5.6px;
  --tile-sm-font:   5.8px;
}
.store-card-info {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
}
.store-card-name {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-card-creator {
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-card-creator-link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.store-card-creator-link:hover { color: var(--gold); }
.store-card-tier   { font-size: calc(6px * var(--ts)); letter-spacing: 0.5px; }
.store-card-price  { font-size: calc(8px * var(--ts)); color: var(--gold); letter-spacing: 1px; }
.store-card-owned-badge {
  font-size: calc(6px * var(--ts));
  color: var(--gold);
  letter-spacing: 0.5px;
}
.store-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.store-card-new-badge { font-size: calc(7px * var(--ts)); background: var(--gold); color: #1a1206; padding: 1px 5px; letter-spacing: 1px; border-radius: 2px; }
.store-card-featured-badge { font-size: calc(7px * var(--ts)); color: var(--gold); letter-spacing: 0.5px; }
.store-card-install-count { font-size: calc(7px * var(--ts)); color: var(--tx-dim); letter-spacing: 0; }

/* Detail modal */
#store-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#store-detail-overlay.hidden { display: none; }
#store-detail-modal {
  background: var(--bg-card);
  border: 1px solid var(--mat-border);
  border-radius: var(--radius-modal, 6px);
  width: min(96vw, 440px);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
#store-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 0;
  font-size: calc(10px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold);
}
#store-detail-header button {
  background: none;
  border: none;
  color: var(--tx-sub);
  font-size: calc(14px * var(--ts));
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
#store-detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 18px;
}
.store-detail-preview {
  background: var(--mat);
  border: 1px solid var(--mat-border);
  border-radius: 4px;
  min-height: 88px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
#store-detail-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font);
}
.store-detail-name {
  font-size: calc(14px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  margin-bottom: 4px;
  line-height: 1.3;
}
.store-detail-tier-badge {
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.store-detail-creator  { font-size: calc(7px * var(--ts)); color: var(--tx-sub); margin-bottom: 12px; }
.store-detail-creator-link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.store-detail-creator-link:hover { color: var(--gold); }

/* ── Creator public profile screen ──────────────────────────── */
.creator-public-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0 8px;
}
.creator-public-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.creator-public-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--mid);
  color: var(--gold);
  font-size: calc(28px * var(--ts));
  flex-shrink: 0;
}
.creator-public-meta    { flex: 1; min-width: 0; }
.creator-public-name    { font-size: calc(13px * var(--ts)); letter-spacing: 2px; color: var(--cpp-accent, var(--tx)); margin-bottom: 6px; }
.creator-badges-row     { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.creator-badge {
  font-size: calc(7px * var(--ts)); letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  display: inline-flex; align-items: center; gap: 4px;
}
.creator-public-bio     { font-size: calc(11px * var(--ts)); color: var(--cpp-text, var(--tx-sub)); line-height: 1.7; margin: 0 0 8px; }
.creator-public-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-public-social  {
  font-size: calc(7px * var(--ts)); color: var(--gold); text-decoration: none;
  border: 1px solid var(--gold); padding: 3px 8px;
}
.creator-public-social:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
/* Notifications bell */
.creator-notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--error); color: #fff;
  font-size: calc(7px * var(--ts)); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.creator-notif-badge.hidden { display: none; }
.creator-notif-panel {
  background: var(--mid); border: 1px solid var(--mat-border);
  border-radius: 4px; padding: 8px; margin-bottom: 8px;
  max-height: 220px; overflow-y: auto;
}
.creator-notif-panel.hidden { display: none; }
.creator-notif-item { padding: 6px 0; border-bottom: 1px solid var(--mat-border); }
.creator-notif-item:last-child { border-bottom: none; }
.creator-notif-unread .creator-notif-msg { color: var(--gold); }
.creator-notif-msg { font-size: calc(10px * var(--ts)); }
.creator-notif-ts  { font-size: calc(7px * var(--ts)); color: var(--tx-dim); margin-top: 2px; }

.creator-public-stats-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--mat-border);
  border-bottom: 1px solid var(--mat-border);
  margin: 8px 0 4px;
}
.creator-public-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.creator-public-stat-val   { font-size: calc(13px * var(--ts)); color: var(--cpp-accent, var(--gold)); letter-spacing: 1px; }
.creator-public-stat-label { font-size: calc(7px * var(--ts));  color: var(--tx-dim); letter-spacing: 1px; }

#screen-creator-public #btn-cpp-follow {
  border-color: var(--cpp-btn, var(--gold));
  color: var(--cpp-btn, var(--gold));
}
#screen-creator-public #btn-cpp-follow.admin-tab-active {
  background: var(--cpp-btn, var(--gold));
  color: var(--cpp-bg, #000);
}

/* CPP background texture overlays */
#screen-creator-public { position: relative; }
#screen-creator-public::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12; z-index: 0;
}
#screen-creator-public > * { position: relative; z-index: 1; }
#screen-creator-public.cpp-tex-felt::before {
  background-image: repeating-linear-gradient(45deg, var(--cpp-accent,#B8860B) 0, var(--cpp-accent,#B8860B) 1px, transparent 0, transparent 50%);
  background-size: 4px 4px;
}
#screen-creator-public.cpp-tex-grid::before {
  background-image: linear-gradient(var(--cpp-accent,#B8860B) 1px, transparent 1px),
                    linear-gradient(90deg, var(--cpp-accent,#B8860B) 1px, transparent 1px);
  background-size: 20px 20px;
}
#screen-creator-public.cpp-tex-dots::before {
  background-image: radial-gradient(circle, var(--cpp-accent,#B8860B) 1px, transparent 1px);
  background-size: 14px 14px;
}
#screen-creator-public.cpp-tex-diagonal::before {
  background-image: repeating-linear-gradient(45deg, var(--cpp-accent,#B8860B) 0, var(--cpp-accent,#B8860B) 1px, transparent 0, transparent 10px);
  background-size: 10px 10px;
}
#screen-creator-public.cpp-tex-noise::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px; opacity: 0.08;
}
.creator-public-designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.creator-public-design-card {
  background: var(--cpp-card-bg, var(--mid));
  border-radius: var(--cpp-card-radius, 0px);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s;
  overflow: hidden;
  position: relative;
}
.creator-public-design-card:hover { border-color: var(--cpp-accent, var(--gold)); }
.cpp-pin-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: calc(10px * var(--ts));
  z-index: 1;
  line-height: 1;
  pointer-events: none;
}
.creator-public-design-preview {
  height: 72px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: var(--cpp-card-radius, 0px) var(--cpp-card-radius, 0px) 0 0;
}
.creator-public-design-info {
  padding: 5px 6px 6px;
  display: flex; flex-direction: column; gap: 2px;
}

.store-detail-desc {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  line-height: 1.9;
  margin-bottom: 14px;
}
.store-detail-price {
  font-size: calc(22px * var(--ts));
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.store-detail-actions  { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.store-owned-msg       { font-size: calc(7px * var(--ts)); color: var(--gold); margin: 8px 0 0; }
.store-detail-installs { font-size: calc(8px * var(--ts)); color: var(--tx-dim); letter-spacing: 0.5px; margin: 6px 0 10px; padding: 4px 8px; background: rgba(255,255,255,0.05); border-radius: 4px; display: inline-block; }

/* Detail modal — expand preview area */
.store-detail-preview {
  min-height: 120px;
  border-radius: 6px;
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Full preview button */
.store-bigpreview-btn {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--mat-border);
  color: var(--tx-sub);
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.store-bigpreview-btn:hover {
  background: var(--gold);
  color: #1a1206;
  border-color: var(--gold);
}

/* Board preview scope (scoped CSS vars container) */
.board-preview-scope {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.board-preview-wall {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
  opacity: 0.75;
}
.board-preview-wall-seg {
  flex: 1;
  min-width: 0;
  height: 12px;
  border-radius: 2px;
  background: rgba(0,0,0,0.25);
}
.board-preview-discards {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 0;
  opacity: 0.8;
}
.board-preview-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 6px;
}
.board-preview-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 6px;
  opacity: 0.95;
}

/* Full-screen big preview overlay */
#store-bigpreview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#store-bigpreview-overlay.hidden { display: none; }
#store-bigpreview-inner {
  width: min(98vw, 700px);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
#store-bigpreview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--dark);
  font-family: var(--font);
  font-size: calc(10px * var(--ts));
  letter-spacing: 2px;
  color: var(--gold);
  flex-shrink: 0;
}
#store-bigpreview-header button {
  background: none;
  border: none;
  color: var(--tx-sub);
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  cursor: pointer;
  padding: 4px 8px;
}
#store-bigpreview-header button:hover { color: var(--gold); }
.store-bigpreview-board {
  flex: 1;
  min-height: 280px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.store-bigpreview-board .board-preview-scope {
  gap: 12px;
}
.store-bigpreview-board .board-preview-wall-seg {
  height: 20px;
}
.store-bigpreview-board .board-preview-discards,
.store-bigpreview-board .board-preview-hand {
  gap: 5px;
}

/* In-game store toast notification */
#store-toast {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  background: var(--dark);
  color: var(--light);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  padding: 8px 16px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: opacity 0.4s;
}
#store-toast.store-toast-err { border-color: var(--red); color: #ffaaaa; }
#store-toast.store-toast-fade { opacity: 0; }
#store-toast.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL
════════════════════════════════════════════════════════════════ */

#screen-admin {
  overflow-y: auto;
  align-items: center;
  padding: 24px 0 40px;
  min-height: 100vh;
  box-sizing: border-box;
}
.admin-container {
  width: min(800px, calc(100vw - 32px));
  padding: 24px 28px 32px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--dark) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--shadow) 60%, transparent);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
.admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 14px;
  align-items: center;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
/* Back arrow inside tab row */
.creator-back-tab {
  font-family: inherit;
  font-size: calc(12px * var(--ts));
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--mat-border);
  color: var(--tx-sub);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.creator-back-tab:hover { color: var(--gold); border-color: var(--gold); }
.admin-tab {
  font-family: inherit;
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  padding: 5px 14px;
  background: color-mix(in srgb, var(--mid) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
  color: var(--light);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-tab.admin-tab-active,
.admin-tab:hover,
.admin-tab.dr-style-active {
  background: var(--gold);
  color: #1a1206;
  border-color: var(--gold);
}
.admin-panel.hidden { display: none; }

/* Force readable text inside the dark admin panel for any nested elements
   that use theme-relative color tokens (tx-dim, tx-sub, tx) */
#screen-admin .admin-control-box p,
#screen-admin .admin-control-box span,
#screen-admin .admin-toggle-row,
#screen-admin .admin-toggle-row span {
  color: var(--light);
  opacity: 0.85;
}

/* Table containers — scroll horizontally instead of breaking layout */
.admin-users-list {
  overflow-x: auto;
  width: 100%;
}
.admin-section-label {
  font-size: calc(8px * var(--ts));
  letter-spacing: 2px;
  color: var(--light);
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.admin-loading {
  font-size: calc(7px * var(--ts));
  color: var(--light);
  opacity: 0.6;
  padding: 12px 0;
  text-align: center;
}

/* ── Admin analytics tab ───────────────────────────────────────────────── */
.analytics-sc-summary {
  font-size: calc(9px * var(--ts)); font-family: var(--font); font-weight: bold;
  padding: 6px 10px; border-radius: 4px; margin-bottom: 10px;
  text-align: center; letter-spacing: .04em;
}
.sc-win      {
  background: color-mix(in srgb, var(--gold) 15%, var(--dark));
  color: var(--gold-lt);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--dark));
}
.sc-progress {
  background: color-mix(in srgb, var(--error) 12%, var(--dark));
  color: color-mix(in srgb, var(--error) 60%, var(--light));
  border: 1px solid color-mix(in srgb, var(--error) 40%, var(--dark));
}
.analytics-sc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; margin-bottom: 4px;
}
.analytics-sc-card {
  border-radius: 5px; padding: 7px 9px;
  font-family: var(--font); font-size: calc(7px * var(--ts));
  display: flex; flex-direction: column; gap: 3px;
}
.sc-card-hit {
  background: color-mix(in srgb, var(--gold) 12%, var(--dark));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--dark));
  color: var(--gold-lt);
}
.sc-card-miss {
  background: color-mix(in srgb, var(--dark) 80%, var(--bg));
  border: 1px solid var(--mat-border);
  color: var(--tx-sub);
}
.sc-card-icon  { font-size: calc(10px * var(--ts)); }
.sc-card-label { font-size: calc(7px * var(--ts)); opacity: .8; }
.sc-card-val   { font-size: calc(10px * var(--ts)); font-weight: bold; color: var(--tx); }
.analytics-bar-bg {
  height: 4px;
  background: color-mix(in srgb, var(--mat-border) 30%, transparent);
  border-radius: 2px; overflow: hidden;
}
.analytics-bar-fill { height: 100%; border-radius: 2px; }
.bar-hit  { background: var(--gold); }
.bar-miss { background: color-mix(in srgb, var(--error) 60%, var(--mat-border)); }

.analytics-kpi-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.analytics-kpi-card {
  background: var(--bg-card); border: 1px solid var(--mat-border);
  border-radius: 5px; padding: 8px 12px; min-width: 80px;
  font-family: var(--font); text-align: center;
}
.analytics-kpi-val {
  font-size: calc(14px * var(--ts)); font-weight: bold; color: var(--tx-head);
}
.analytics-kpi-lbl {
  font-size: calc(7px * var(--ts)); color: var(--tx-sub); margin-top: 2px;
}

.analytics-sparkline { overflow-x: auto; padding-bottom: 4px; }
.analytics-spark-row {
  display: flex; align-items: flex-end; gap: 3px;
  height: 64px; padding: 4px 0;
}
.spark-bar-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; cursor: default;
}
.spark-bar {
  width: 14px; background: var(--gold); border-radius: 2px 2px 0 0;
  min-height: 4px;
}
.spark-bar:hover { background: var(--gold-lt); }
.spark-bar-lbl {
  font-size: calc(6px * var(--ts)); color: var(--tx-sub); font-family: var(--font);
}
.admin-design-card {
  background: var(--bg-card);
  border: 1px solid var(--mat-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.admin-design-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin-design-name    { font-size: calc(9px * var(--ts)); color: var(--tx); }
.admin-design-tier    { font-size: calc(7px * var(--ts)); }
.admin-design-price   { font-size: calc(7px * var(--ts)); color: var(--gold); }
.admin-design-creator { font-size: calc(7px * var(--ts)); color: var(--tx-sub); margin-left: auto; }
.admin-design-desc    { font-size: calc(7px * var(--ts)); color: var(--tx-sub); line-height: 1.8; margin-bottom: 8px; }
.admin-design-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.creator-rejection-note {
  font-size: calc(7px * var(--ts));
  color: var(--error);
  background: rgba(229,57,53,0.1);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
  line-height: 1.6;
}
.creator-edit-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--mat-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.creator-edit-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.creator-edit-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-review-note {
  flex: 1;
  min-width: 120px;
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  background: var(--surf-input);
  border: 1px solid var(--mat-border);
  border-radius: 4px;
  color: var(--tx);
  padding: 4px 8px;
}
#screen-admin .screen-title {
  color: var(--light);
}

.admin-users-table {
  width: 100%;
  font-size: calc(7px * var(--ts));
  border-collapse: collapse;
}
.admin-users-table th,
.admin-users-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--light) 15%, transparent);
  color: var(--light);
}
.admin-users-table th { color: color-mix(in srgb, var(--light) 60%, transparent); }
.admin-reset-btn {
  font-family: inherit;
  font-size: calc(6px * var(--ts));
  padding: 3px 8px;
  background: color-mix(in srgb, var(--light) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--light) 25%, transparent);
  color: var(--light);
  border-radius: 3px;
  cursor: pointer;
}
.admin-reset-btn:hover { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.admin-save-btn {
  font-family: inherit;
  font-size: calc(6px * var(--ts));
  padding: 3px 8px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #1a1206;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}
.admin-save-btn:hover { background: var(--gold-lt); border-color: var(--gold-lt); }

/* Responsive */
@media (max-width: 640px) {
  .store-layout { flex-direction: column; }
  .store-sidebar { flex: none; width: 100%; position: static;
    flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .store-sidebar-label { display: none; }
  .store-filter-btn { width: auto; flex: 0 0 auto; padding: 4px 10px; }
  .store-sort-select { width: auto; margin-top: 0; }
}
@media (max-width: 480px) {
  .store-catalog { grid-template-columns: repeat(2, 1fr); }
  #store-detail-modal { width: 100vw; max-width: 100vw; max-height: 95vh; border-radius: 10px 10px 0 0; align-self: flex-end; }
}

@media (max-width: 480px) {
  #rules-modal { width: 100vw; max-width: 100vw; max-height: 95vh; }
}

/* ═══════════════════════════════════════════════════════════════
   HANDBOOK — SIDE PANEL + HAND MATCH HIGHLIGHTING
════════════════════════════════════════════════════════════════ */

/* In-game: handbook opens as a right-side drawer so hand/tray stay visible.
   Uses explicit top/right/bottom/left — no inset shorthand so there is
   nothing to override and no cascade issue on Railway. */
#handbook-overlay.hb-panel {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(47vw, 520px);
  align-items: stretch;
  justify-content: flex-end;
}
/* Shift entire board left so tiles are not hidden under the panel */
body.hb-panel-open #board {
  padding-right: min(47vw, 520px);
  box-sizing: border-box;
}
#handbook-overlay.hb-panel #handbook-modal {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-right: none;
  border-left: 3px solid var(--dark);
  box-shadow: -6px 0 0 rgba(0, 0, 0, 0.3);
  margin: 0;
}
@media (max-width: 680px) {
  #handbook-overlay.hb-panel {
    left: 0;
    width: 100%;
  }
  #handbook-overlay.hb-panel #handbook-modal {
    width: min(97vw, 1000px);
    height: auto; max-height: 95vh;
    border: 3px solid var(--dark);
    border-radius: 0;
  }
  /* On small screens the panel is full-width — no shift needed */
  body.hb-panel-open #board { padding-right: 0; }
}

/* Tile highlighting when a hand row is selected */
.tile.hand-match {
  outline: 3px solid var(--gold-lt);
  outline-offset: 1px;
  box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.55);
  z-index: 2;
  position: relative;
}
.tile.hand-nomatch {
  opacity: 0.30;
  filter: saturate(0.12);
}

/* Match count badge on each hand row */
.hb-match-badge {
  display: inline-block;
  background: var(--dark);
  color: var(--gold-lt);
  font-family: inherit;
  font-size: calc(6px * var(--ts));
  padding: 1px 5px;
  letter-spacing: 1px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 4px;
  line-height: 1.4;
  cursor: default;
}
.hb-match-badge.badge-full { background: var(--gold);  color: var(--dark); font-weight: 700; }
.hb-match-badge.badge-good { background: var(--bam);   color: #fff; }
.hb-match-badge.badge-none { opacity: 0.35; }

/* Mark button */
.hb-mark-btn {
  background: none; border: none; cursor: pointer; font-size: .8rem;
  color: var(--tx-sub); padding: 0 3px; line-height: 1;
  transition: color .15s; flex-shrink: 0;
}
.hb-mark-btn:hover { color: var(--gold-lt, #f5c842); }
.hb-hand.hb-marked .hb-mark-btn { color: var(--gold-lt, #f5c842); }
.hb-hand.hb-marked {
  border-left: 3px solid var(--gold-lt, #f5c842);
  background: rgba(245,200,66,.07);
}

/* Hand row: pointer cursor + hover / selected states */
.hb-hand {
  cursor: pointer;
  padding: 3px 4px;
  outline: none;
}
.hb-hand:hover { background: rgba(198, 139, 0, 0.08); }
.hb-hand:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 1px; }
.hb-hand.hb-selected {
  background: rgba(198, 139, 0, 0.18);
  border-left: 3px solid var(--gold);
  padding-left: 5px;
  margin-left: -8px;
}

/* Rank-sort toggle button in handbook header */
#btn-hb-rank,
#btn-hb-marked {
  background: none;
  border: 1px solid var(--mid);
  color: var(--light);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  cursor: pointer;
  padding: 2px 7px;
  line-height: 1.2;
  letter-spacing: 1px;
}
#btn-hb-rank:hover,
#btn-hb-marked:hover    { background: rgba(198,139,0,.15); }
#btn-hb-rank.hb-rank-on   { background: var(--gold); color: var(--dark); border-color: var(--gold); }
#btn-hb-marked.hb-marked-on { background: var(--gold); color: var(--dark); border-color: var(--gold); }

#btn-hb-assist {
  background: none;
  border: 1px solid var(--mid);
  color: var(--light);
  font-family: inherit;
  font-size: calc(7px * var(--ts));
  cursor: pointer;
  padding: 2px 7px;
  line-height: 1.2;
  letter-spacing: 1px;
}
#btn-hb-assist:hover         { background: rgba(198,139,0,.15); }
#btn-hb-assist.hb-assist-on  { background: var(--gold); color: var(--dark); border-color: var(--gold); }


/* ══════════════════════════════════════════════════════════════
   DESIGN ROOM
══════════════════════════════════════════════════════════════ */

/* ── Screen layout ─────────────────────────────────────────── */
#screen-design-room {
  --dr-width: min(78vw, 720px);
  align-items: center;
  padding: 8px 0 0;
  min-height: 100vh;
  overflow-y: auto;
  /* Background driven by scoped --page-bg so live-preview updates immediately */
  background-color: var(--page-bg);
}
#screen-design-room .screen-title {
  margin-bottom: 8px;
}

/* ── Tab strip ─────────────────────────────────────────────── */
.dr-tabs {
  display: flex;
  gap: 2px;
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 6px 2px;
  margin: 0 8px 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(var(--dr-width), calc(100vw - 16px));
}
.dr-tab {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-card) - 2px);
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  min-height: 30px;
}
.dr-tab:hover   { background: var(--mat); color: var(--tx); }
.dr-tab-active  { background: var(--gold) !important; color: var(--dark) !important; }

/* ── Panel container ───────────────────────────────────────── */
.dr-panel {
  width: min(var(--dr-width), calc(100vw - 16px));
  padding: 16px 20px;
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 var(--shadow);
  box-sizing: border-box;
}
.dr-section-label {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-dim);
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mat-border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dr-section-label:first-child { margin-top: 4px; }

/* ── Section hint tooltips ─────────────────────────────────── */
.dr-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  font-size: calc(7px * var(--ts));
  font-family: var(--font);
  color: var(--tx-dim);
  border: 1px solid var(--bd-sub);
  border-radius: 50%;
  cursor: help;
  position: relative;
  letter-spacing: 0;
  line-height: 1;
}
.dr-hint::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--dark);
  color: var(--tx-on-dark);
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 0.5px;
  line-height: 1.6;
  white-space: normal;
  width: 200px;
  padding: 8px 10px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--bd);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  text-align: left;
}
.dr-hint:hover::after,
.dr-hint:focus::after  { opacity: 1; }

/* ── Ambience tab (inside DR) ──────────────────────────────── */
.dr-amb-tabs {
  display: flex;
  gap: 3px;
  margin: 0 0 12px;
}
.dr-amb-tab {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  background: transparent;
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-btn);
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dr-amb-tab:hover       { background: var(--mat); color: var(--tx); }
.dr-amb-tab-active      { background: var(--gold) !important; color: var(--dark) !important; border-color: var(--gold) !important; }
.dr-amb-select          { width: 100%; margin-bottom: 4px; }
.dr-amb-intensity-row   { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.dr-amb-intensity-row .dr-style-btn { flex: 1; min-width: 52px; }
.dr-amb-parallax-row    { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.dr-amb-parallax-row .dr-style-btn { flex: 0 0 auto; }

/* ── Preset swatch grid ────────────────────────────────────── */
.dr-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.dr-preset-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  transition: border-color .15s, transform .1s;
}
.dr-preset-swatch:hover  { border-color: var(--bd-sub); transform: scale(1.03); }
.dr-preset-swatch.active { border-color: var(--gold); }
.dr-swatch-dot-row {
  display: flex;
  gap: 2px;
}
.dr-swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.12);
}
.dr-swatch-name {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 0.5px;
  color: var(--tx-sub);
  text-align: center;
  line-height: 1.3;
}

/* ── Custom palette toggle button ─────────────────────────── */
.dr-palette-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--surf-card);
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-card);
  padding: 8px 12px;
  margin: 8px 0 0;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, color .15s;
}
.dr-palette-toggle-btn:hover { border-color: var(--gold); color: var(--tx); }
.dr-palette-toggle-btn.open  { border-color: var(--gold); color: var(--tx); }

/* ── Custom color table ────────────────────────────────────── */
.dr-color-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.dr-palette-group-label {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-dim);
  padding: 4px 0 3px;
  border-bottom: 1px solid var(--mat-border);
  margin-bottom: 4px;
}
.dr-palette-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.dr-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dr-color-label {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  white-space: nowrap;
}
.dr-color-pick {
  width: 28px;
  height: 24px;
  padding: 1px;
  border: 1px solid var(--bd-sub);
  border-radius: 3px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.dr-hex-input {
  font-family: monospace;
  font-size: calc(12px * var(--ts));
  width: 72px;
  padding: 3px 5px;
  background: var(--surf-input);
  color: var(--tx);
  border: 1px solid var(--bd-sub);
  border-radius: 2px;
}
.dr-color-full-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Font selector ─────────────────────────────────────────── */
.dr-font-select {
  width: 100%;
  max-width: 300px;
  font-size: calc(8px * var(--ts));
  margin-bottom: 8px;
}
.dr-font-preview {
  font-size: calc(11px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx);
  background: var(--surf-card);
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-card);
  padding: 8px 12px;
  margin-bottom: 4px;
  transition: font-family .2s;
}

/* ── Radius sliders ─────────────────────────────────────────── */
.dr-radius-table { display: flex; flex-direction: column; gap: 10px; }
.dr-radius-row   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-radius-label {
  font-family: var(--font); font-size: calc(9px * var(--ts)); letter-spacing: 1px;
  color: var(--tx-sub); min-width: 64px; flex-shrink: 0;
}

/* ── Mat pattern grid ──────────────────────────────────────── */
.dr-mat-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.dr-pattern-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  transition: border-color .15s;
}
.dr-pattern-card:hover  { border-color: var(--bd-sub); }
.dr-pattern-card.active { border-color: var(--gold); }
.dr-pattern-thumb {
  width: 52px;
  height: 36px;
  border: 1px solid var(--bd-sub);
  border-radius: 2px;
}
.dr-pattern-name {
  font-family: var(--font); font-size: calc(7px * var(--ts)); letter-spacing: 0.5px;
  color: var(--tx-sub); text-align: center;
}

/* ── Upload row ────────────────────────────────────────────── */
.dr-upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dr-upload-label { cursor: pointer; position: relative; }
.dr-file-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.dr-img-preview { margin-top: 4px; }
.dr-img-preview img {
  max-width: 120px; max-height: 80px;
  border: 1px solid var(--bd-sub); border-radius: 3px;
  object-fit: cover;
}

/* ── Global tile style buttons ─────────────────────────────── */
.dr-tile-style-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.dr-style-btn {
  font-family: var(--font); font-size: calc(9px * var(--ts)); letter-spacing: 1px;
  padding: 6px 10px; border: 2px solid var(--bd-sub);
  border-radius: var(--radius-btn); background: transparent;
  color: var(--tx-sub); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dr-style-btn:hover  { border-color: var(--gold); color: var(--tx); }
.dr-style-btn.dr-style-active { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.dr-style-btn.dr-style-dimmed { opacity: .3; cursor: not-allowed; pointer-events: none; }
.dr-style-btn.dr-style-dimmed:hover { border-color: var(--bd-sub); color: var(--tx-sub); }

/* ── Live tile preview strip (sticky above tabs) ───────────── */
.dr-tile-live-preview {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px 12px;
  background: var(--mat);
  border-radius: var(--radius-card);
  border: 1px solid var(--mat-border);
  margin: 0 8px 10px;
  min-height: calc(var(--tile-w) * 1.72 + 20px);
  align-items: flex-end;
  justify-content: center;
  width: fit-content;
  max-width: calc(100vw - 32px);
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 10;
}
.dr-tile-live-preview .tile {
  cursor: default;
  pointer-events: none;
}

/* ── Overrides toggle row ──────────────────────────────────── */
.dr-overrides-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
  gap: 8px;
}
.dr-overrides-toggle-btn {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  padding: 4px 10px;
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--tx-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.dr-overrides-toggle-btn:hover { border-color: var(--gold); color: var(--tx); }
.dr-overrides-toggle-btn.unlocked { background: var(--gold); color: var(--dark); border-color: var(--gold); }

/* ── Per-tile override cards ───────────────────────────────── */
.dr-tile-overrides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.dr-tile-card {
  background: var(--surf-card);
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-card);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dr-tile-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dr-tile-badge {
  width: 24px; height: 34px;
  border-radius: var(--radius-tile);
  border: 1px solid var(--bd-sub);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: calc(7px * var(--ts));
  background: var(--tile-face); color: var(--dark);
  flex-shrink: 0;
}
.dr-tile-type-label {
  font-family: var(--font); font-size: calc(9px * var(--ts)); letter-spacing: 1px;
  color: var(--tx-sub); flex: 1;
}
.dr-tile-row { display: flex; align-items: center; gap: 4px; }
.dr-tile-row .dr-color-pick { width: 22px; height: 20px; }
.dr-tile-row .dr-hex-input  { width: 54px; font-size: calc(9px * var(--ts)); }
.dr-tile-row label { font-family: var(--font); font-size: calc(6px * var(--ts)); color: var(--tx-dim); cursor: pointer; }
.dr-tile-presets { display: flex; gap: 2px; flex-wrap: wrap; }
.dr-tile-preset-btn {
  font-family: var(--font); font-size: calc(7px * var(--ts)); padding: 3px 5px;
  border: 1px solid var(--bd-sub); border-radius: 2px;
  background: transparent; color: var(--tx-sub); cursor: pointer;
}
.dr-tile-preset-btn:hover  { border-color: var(--gold); color: var(--tx); }
.dr-tile-preset-btn.active { background: var(--gold); color: var(--dark); border-color: var(--gold); }
/* Locked state */
.dr-tile-overrides.overrides-locked .dr-tile-card {
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

/* ── Icon slot cards ───────────────────────────────────────── */
.dr-icon-slots-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 4px;
}
.dr-icon-slot-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surf-card);
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-card);
  padding: 6px 10px;
}
.dr-icon-slot-label {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  min-width: 60px;
}
.dr-icon-slot-thumb {
  width: 28px;
  height: 28px;
  border: 1px solid var(--bd-sub);
  border-radius: 3px;
  image-rendering: pixelated;
  background: var(--tile-face, #fefaf5);
}
.dr-icon-slot-thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14px * var(--ts));
  color: var(--bd-sub);
}
.dr-icon-slot-actions { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.dr-icon-slot-actions .admin-tab {
  font-size: calc(12px * var(--ts));
  padding: 4px 8px;
  line-height: 1;
}
.dr-icon-slot-active-toggle {
  font-size: calc(10px * var(--ts));
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border: 1px solid var(--bd-sub);
  border-radius: 3px;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--tx-sub);
  font-family: var(--font);
}
.dr-icon-slot-active-toggle.is-on {
  background: var(--gold);
  color: #1a1206;
  border-color: var(--gold);
}

/* ── Pixel draw modal ──────────────────────────────────────── */
.dr-icon-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dr-icon-modal.hidden { display: none; }
.dr-icon-modal-inner {
  background: var(--surf-modal, var(--bg));
  border: 2px solid var(--gold);
  border-radius: var(--radius-modal);
  padding: 18px 16px 14px;
  width: min(96vw, 420px);
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dr-icon-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dr-icon-modal-title {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-head);
}
.dr-icon-modal-close {
  background: none;
  border: none;
  color: var(--tx-sub);
  cursor: pointer;
  font-size: calc(14px * var(--ts));
  line-height: 1;
  padding: 0 4px;
}
.dr-icon-modal-tabs { display: flex; gap: 6px; }
.dr-icon-modal-sublabel {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
}

/* Draw area */
.dr-icon-draw-area {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.dr-icon-canvas {
  image-rendering: pixelated;
  cursor: crosshair;
  border: 2px solid var(--bd-sub);
  border-radius: 3px;
  touch-action: none;
  width:  min(100%, 320px);
  height: min(100%, 320px);
}

/* Palette */
.dr-icon-palette-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dr-icon-palette-label {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  margin-right: 2px;
}
.dr-icon-pal-btn {
  width: 28px;
  height: 28px;
  border: 3px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .1s, transform .1s;
}
.dr-icon-pal-btn.active { border-color: var(--gold); transform: scale(1.15); }
.dr-pal-eraser {
  background: var(--surf-card);
  color: var(--tx-sub);
  font-size: calc(12px * var(--ts));
  display: flex; align-items: center; justify-content: center;
}

/* Accent picker rows (theme color swatches) */
.dr-icon-accent-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 0;
}
.dr-icon-accent-swatch {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .1s, transform .1s;
  flex-shrink: 0;
}
.dr-icon-accent-swatch:hover { transform: scale(1.15); }
.dr-icon-accent-swatch.active { border-color: var(--gold); transform: scale(1.15); }
.dr-icon-accent-swatch.dr-pal-eraser-swatch {
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0/8px 8px;
  font-size: 0;
}

.dr-icon-tool-row  { display: flex; gap: 4px; flex-wrap: wrap; }
.dr-icon-draw-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* Save row */
.dr-icon-save-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dr-icon-save-row input { flex: 1; min-width: 0; }

/* Preset grid */
.dr-icon-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.dr-icon-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color .1s;
}
.dr-icon-preset-card:hover { border-color: var(--gold); }
.dr-icon-preset-card.active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 15%, transparent); }
.dr-icon-preset-thumb {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  border: 1px solid var(--bd-sub);
  border-radius: 2px;
}
.dr-icon-preset-name {
  font-family: var(--font);
  font-size: calc(6px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  text-align: center;
}

/* Tile preview inside modal */
.dr-icon-slot-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.dr-packs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.dr-pack-card {
  background: var(--surf-card);
  border: 1px solid var(--bd-sub);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dr-pack-card.dr-pack-active { border-color: var(--gold); }
.dr-pack-swatches { display: flex; gap: 2px; flex-shrink: 0; }
.dr-pack-swatch-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}
.dr-pack-meta { flex: 1; min-width: 0; }
.dr-pack-name {
  font-family: var(--font); font-size: calc(9px * var(--ts)); letter-spacing: 1px;
  color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-pack-date { font-family: var(--font); font-size: calc(7px * var(--ts)); color: var(--tx-dim); margin-top: 2px; }
.dr-pack-actions { display: flex; gap: 4px; flex-shrink: 0; }
.dr-pack-actions button {
  font-family: var(--font); font-size: calc(8px * var(--ts)); letter-spacing: .5px;
  padding: 4px 7px; border: 1px solid var(--bd-sub);
  border-radius: var(--radius-btn); background: transparent; color: var(--tx-sub); cursor: pointer;
}
.dr-pack-actions button:hover { border-color: var(--gold); color: var(--tx); }
.dr-empty-msg  { font-family: var(--font); font-size: calc(9px * var(--ts)); color: var(--tx-dim); text-align: center; padding: 20px 0; }
.dr-limit-msg  { font-family: var(--font); font-size: calc(8px * var(--ts)); color: var(--tx-err); text-align: center; margin-top: 4px; }

/* ── Name bar (above tabs) ──────────────────────────────────── */
.dr-name-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(580px, calc(100vw - 16px));
  margin: 0 8px 10px;
  padding: 0 4px;
}

/* ── Edit-mode banner ───────────────────────────────────────── */
.dr-edit-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(580px, calc(100vw - 16px));
  margin: -4px 8px 10px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
}
.dr-edit-banner.hidden { display: none; }
.dr-edit-banner-label  { color: var(--tx-sub); white-space: nowrap; }
.dr-edit-banner-skinname { color: var(--gold); flex: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-edit-cancel-btn {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--tx-sub);
  color: var(--tx-sub);
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
}
.dr-edit-cancel-btn:hover { border-color: var(--tx-err); color: var(--tx-err); }
.dr-pack-name-input {
  flex: 1;
  font-family: var(--font);
  font-size: calc(10px * var(--ts));
  padding: 7px 10px;
  background: var(--surf-input);
  color: var(--tx);
  border: 2px solid var(--bd-sub);
  border-radius: var(--radius-card);
}
.dr-pack-name-input:focus { border-color: var(--gold); outline: none; }

/* ── Footer ─────────────────────────────────────────────────── */
.dr-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 28px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Preview overlay ───────────────────────────────────────── */
#dr-preview-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.70);
  display: flex; align-items: center; justify-content: center;
  z-index: 1200;
  padding: 12px;
}
#dr-preview-overlay.hidden { display: none !important; }
#dr-preview-modal {
  background: var(--surf);
  border: 2px solid var(--gold);
  border-radius: var(--radius-modal);
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  display: flex; flex-direction: column;
  font-family: var(--font);
}
#dr-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mat-border);
  font-size: calc(8px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx-head);
  gap: 8px;
  flex-wrap: wrap;
}
#btn-dr-preview-close {
  font-family: var(--font); font-size: calc(9px * var(--ts)); background: none; border: none;
  color: var(--tx-sub); cursor: pointer; padding: 2px 6px; flex-shrink: 0;
}
#btn-dr-preview-close:hover { color: var(--tx-err); }

/* Swatchbook */
#dr-preview-swatchbook {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--mat-border);
  display: flex; flex-direction: column; gap: 8px;
}
.dr-swatch-section { display: flex; flex-direction: column; gap: 4px; }
.dr-swatch-label   { font-size: calc(6px * var(--ts)); letter-spacing: 1.5px; color: var(--tx-dim); }
.dr-swatch-row     { display: flex; gap: 4px; flex-wrap: wrap; }
.dr-swatch-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: default;
}
.dr-swatch-chip-color {
  width: 32px; height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
}
.dr-swatch-chip-name { font-size: calc(4px * var(--ts)); color: var(--tx-dim); letter-spacing: .5px; }

/* Board mock */
#dr-preview-board {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.dr-preview-mat {
  border-radius: 4px;
  min-height: 80px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  position: relative;
}
.dr-preview-tiles { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.dr-preview-hand  { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; padding: 4px 0; }
.dr-prev-tile {
  border-radius: var(--radius-tile);
  border: 1px solid var(--tile-border-clr);
  box-shadow: 1px 1px 0 var(--tile-shadow-clr);
  background: var(--tile-face);
  display: flex; flex-direction: column; overflow: hidden;
  width: 24px; height: 34px; flex-shrink: 0; align-items: center;
}
.dr-prev-tile-band { width: 100%; height: 7px; flex-shrink: 0; }
.dr-prev-tile-num  {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: calc(9px * var(--ts)); color: var(--dark); font-weight: bold;
}

/* ── Mat CSS-variable override ──────────────────────────────── */
/* Applied via JS to #mat and .dr-preview-mat when mat settings change */
.mj-mat-pattern-solid      { }   /* no background-image */
.mj-mat-pattern-felt       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(0,0,0,.07)'/%3E%3C/svg%3E"); }
.mj-mat-pattern-grid       { background-image: repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 20px); }
.mj-mat-pattern-crosshatch { background-image: repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 10px),repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 10px); }
.mj-mat-pattern-diagonal   { background-image: repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 12px); }
.mj-mat-pattern-dots       { background-image: radial-gradient(circle,rgba(0,0,0,.10) 1px,transparent 1px); background-size: 8px 8px; }



/* ═══════════════════════════════════════════════════════════════
   CREATOR DASHBOARD
════════════════════════════════════════════════════════════════ */
.creator-form-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.creator-form-label {
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
}
.creator-form-input {
  background: var(--surf-input, var(--bg2));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 8px;
  font-family: var(--font);
  font-size: calc(11px * var(--ts));
  width: 100%;
  box-sizing: border-box;
}
.creator-form-input:focus {
  outline: none;
  border-color: var(--gold);
}
.creator-form-textarea {
  resize: vertical;
  min-height: 64px;
}
select.creator-form-input {
  cursor: pointer;
}
.creator-form-note {
  font-size: calc(9px * var(--ts));
  opacity: 0.6;
  margin: 0;
  line-height: 1.5;
}
.creator-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  margin-top: 6px;
  background: var(--bg);
}
.creator-page-theme-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 4px;
  transition: background .2s, color .2s;
}
.creator-submit-form {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg2);
}
.creator-earnings-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.creator-earnings-row {
  display: flex;
  justify-content: space-between;
  font-size: calc(11px * var(--ts));
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.creator-terms-content {
  font-size: calc(11px * var(--ts));
  line-height: 1.7;
  padding: 4px 0;
}
.creator-terms-content ul {
  padding-left: 18px;
  margin: 8px 0;
}
.creator-terms-content li {
  margin-bottom: 6px;
}

/* ── Creator guide tab ────────────────────────────────────────── */
.creator-guide-rule {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--mat-border);
}
.creator-guide-rule:last-child { border-bottom: none; }
.creator-guide-rule-icon {
  font-size: calc(18px * var(--ts));
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  margin-top: 1px;
}
.creator-guide-rule-title {
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 5px;
}
.creator-guide-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--mat-border);
}
.creator-guide-step:last-of-type { border-bottom: none; }
.creator-guide-step-num {
  font-size: calc(16px * var(--ts));
  color: var(--gold-lt, var(--gold));
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  line-height: 1.2;
  padding-top: 1px;
}
.creator-guide-code {
  background: var(--mid);
  border: 1px solid var(--mat-border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: calc(8px * var(--ts));
  color: var(--gold);
  font-family: var(--font);
}
.creator-guide-tip {
  background: var(--mid);
  border: 1px solid var(--mat-border);
  border-radius: var(--radius-card, 4px);
  padding: 12px 14px;
  margin-top: 12px;
}
.creator-guide-roadmap-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--mat-border);
}
.creator-guide-roadmap-row:last-child { border-bottom: none; }
.creator-guide-tag {
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.cg-tag-now    { background: #0a2a18; color: #44bb77; border: 1px solid #2A7A4A; }
.cg-tag-soon   { background: #1a1020; color: #8866cc; border: 1px solid #5533aa; }
.cg-tag-future { background: #151205; color: #aa8833; border: 1px solid #554400; }
.creator-faq-item {
  border-bottom: 1px solid var(--mat-border);
}
.creator-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  color: var(--tx);
  text-align: left;
  padding: 12px 0;
  cursor: pointer;
  gap: 10px;
  line-height: 1.6;
}
.creator-faq-q:hover { color: var(--gold); }
.creator-faq-arrow { color: var(--tx-sub); flex-shrink: 0; transition: transform .2s; }
.creator-faq-item.cg-open .creator-faq-arrow { transform: rotate(90deg); }
.creator-faq-a {
  font-size: calc(8px * var(--ts));
  color: var(--tx-sub);
  line-height: 2;
  padding-bottom: 12px;
  display: none;
}
.creator-faq-item.cg-open .creator-faq-a { display: block; }

/* ── Creator profile setup overlay ───────────────────────────── */
#creator-setup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
#creator-setup-overlay.hidden { display: none; }
#creator-setup-modal {
  background: var(--bg);
  border: 2px solid var(--gold);
  border-radius: 6px;
  padding: 24px;
  width: min(420px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   CREATOR TILE STYLES — calligraphy, crystal, sketch
════════════════════════════════════════════════════════════════ */

/* ── tiles-calligraphy ──────────────────────────────────────── */
.tiles-calligraphy .tile {
  border: 2px solid var(--tile-border);
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  font-family: 'Noto Serif', 'Georgia', serif;
}
.tiles-calligraphy .tile.tile-sm { border-width: 1px; }
.tiles-calligraphy .tile .tile-band { display: none; }
.tiles-calligraphy .tile .tile-graphic { display: flex; flex: 1; min-height: 0; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 2px; padding: 2px; overflow: hidden; }
.tiles-calligraphy .tile .tile-label {
  flex: 0 0 auto;
  font-size: calc(var(--tile-w) * 0.20);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-family: 'Noto Serif', 'Georgia', serif;
}
/* Suited number tiles: hide tile-graphic, fill tile with centered colored number */
.tiles-calligraphy .tile-B .tile-graphic,
.tiles-calligraphy .tile-D .tile-graphic,
.tiles-calligraphy .tile-C .tile-graphic { display: none; }
.tiles-calligraphy .tile-B .tile-label { flex: 1; color: var(--bam);   font-size: calc(var(--tile-w) * 0.50); }
.tiles-calligraphy .tile-D .tile-label { flex: 1; color: var(--dot);   font-size: calc(var(--tile-w) * 0.50); }
.tiles-calligraphy .tile-C .tile-label { flex: 1; color: var(--crack); font-size: calc(var(--tile-w) * 0.50); }
.tiles-calligraphy .tile-N .tile-label,
.tiles-calligraphy .tile-E .tile-label,
.tiles-calligraphy .tile-S .tile-label,
.tiles-calligraphy .tile-W .tile-label { display: none; }
.tiles-calligraphy .ti { display: inline-block; flex-shrink: 0; line-height: 1; width: auto; height: auto; background: none; border-radius: 0; transform: none; font-size: 0; }
.tiles-calligraphy .tile-N .ti::before { content: "北"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-E .ti::before { content: "東"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-S .ti::before { content: "南"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-W .ti::before { content: "西"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-J .ti::before { content: "中"; font-size: calc(var(--tile-w) * 0.54); color: var(--joker); }
.tiles-calligraphy .tile-F .ti::before { content: "花"; font-size: calc(var(--tile-w) * 0.54); color: var(--flower); }
.tiles-calligraphy .tile-J .tile-label,
.tiles-calligraphy .tile-F .tile-label,
.tiles-calligraphy .tile-Z .tile-label { display: none; }
.tiles-calligraphy .tile-Z .ti::before { content: "空"; font-size: calc(var(--tile-w) * 0.52); color: var(--mid); }
/* small-tile overrides */
.tiles-calligraphy .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
.tiles-calligraphy .tile-B.tile-sm .tile-label { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-calligraphy .tile-D.tile-sm .tile-label,
.tiles-calligraphy .tile-C.tile-sm .tile-label { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-calligraphy .tile-N.tile-sm .ti::before,
.tiles-calligraphy .tile-E.tile-sm .ti::before,
.tiles-calligraphy .tile-S.tile-sm .ti::before,
.tiles-calligraphy .tile-W.tile-sm .ti::before,
.tiles-calligraphy .tile-J.tile-sm .ti::before,
.tiles-calligraphy .tile-F.tile-sm .ti::before,
.tiles-calligraphy .tile-Z.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
/* medium-tile overrides */
.tiles-calligraphy .tile-B.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.50); }
.tiles-calligraphy .tile-D.tile-md .tile-label,
.tiles-calligraphy .tile-C.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.50); }
.tiles-calligraphy .tile-N.tile-md .ti::before,
.tiles-calligraphy .tile-E.tile-md .ti::before,
.tiles-calligraphy .tile-S.tile-md .ti::before,
.tiles-calligraphy .tile-W.tile-md .ti::before,
.tiles-calligraphy .tile-J.tile-md .ti::before,
.tiles-calligraphy .tile-F.tile-md .ti::before,
.tiles-calligraphy .tile-Z.tile-md .ti::before { font-size: calc(var(--tile-w) * 0.86 * 0.52); }

/* ── tiles-crystal ──────────────────────────────────────────── */
.tiles-crystal .tile {
  border: 1.5px solid var(--tile-border);
  border-radius: 4px;
  background: linear-gradient(135deg, var(--tile-bg) 60%, color-mix(in srgb, var(--tile-bg) 70%, white)) !important;
  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.18), 2px 2px 5px rgba(0,0,0,0.45);
}
.tiles-crystal .tile.tile-sm { border-width: 1px; }
.tiles-crystal .tile .tile-band { display: none; }
.tiles-crystal .tile .tile-graphic { display: flex; flex: 1; min-height: 0; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 2px; padding: 2px; overflow: hidden; }
.tiles-crystal .tile .tile-label {
  flex: 0 0 auto;
  font-size: calc(var(--tile-w) * 0.20);
  font-weight: 600;
  letter-spacing: 0;
}
/* Suited number tiles: hide tile-graphic, fill tile with centered colored number */
.tiles-crystal .tile-B .tile-graphic,
.tiles-crystal .tile-D .tile-graphic,
.tiles-crystal .tile-C .tile-graphic { display: none; }
.tiles-crystal .tile-B .tile-label { flex: 1; color: var(--bam);   font-size: calc(var(--tile-w) * 0.50); }
.tiles-crystal .tile-D .tile-label { flex: 1; color: var(--dot);   font-size: calc(var(--tile-w) * 0.50); }
.tiles-crystal .tile-C .tile-label { flex: 1; color: var(--crack); font-size: calc(var(--tile-w) * 0.50); }
.tiles-crystal .tile-N .tile-label,
.tiles-crystal .tile-E .tile-label,
.tiles-crystal .tile-S .tile-label,
.tiles-crystal .tile-W .tile-label { display: none; }
.tiles-crystal .ti { display: inline-block; flex-shrink: 0; line-height: 1; width: auto; height: auto; background: none; border-radius: 0; transform: none; font-size: 0; }
/* Faceted geometric shapes for winds/joker/flower only */
.tiles-crystal .tile-N .ti::before { content: "â–³"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); filter: drop-shadow(0 0 3px var(--wind)); }
.tiles-crystal .tile-E .ti::before { content: "â–·"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); filter: drop-shadow(0 0 3px var(--wind)); }
.tiles-crystal .tile-S .ti::before { content: "â–½"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); filter: drop-shadow(0 0 3px var(--wind)); }
.tiles-crystal .tile-W .ti::before { content: "◁"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); filter: drop-shadow(0 0 3px var(--wind)); }
.tiles-crystal .tile-J .ti::before { content: "✧"; font-size: calc(var(--tile-w) * 0.54); color: var(--joker); filter: drop-shadow(0 0 4px var(--joker)); }
.tiles-crystal .tile-F .ti::before { content: "✿"; font-size: calc(var(--tile-w) * 0.52); color: var(--flower); filter: drop-shadow(0 0 4px var(--flower)); }
.tiles-crystal .tile-J .tile-label,
.tiles-crystal .tile-F .tile-label,
.tiles-crystal .tile-Z .tile-label { display: none; }
.tiles-crystal .tile-Z .ti::before { content: "â—»"; font-size: calc(var(--tile-w) * 0.54); color: var(--mid); opacity: 0.6; filter: drop-shadow(0 0 2px var(--mid)); }
/* small-tile overrides */
.tiles-crystal .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
.tiles-crystal .tile-B.tile-sm .tile-label { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-crystal .tile-D.tile-sm .tile-label,
.tiles-crystal .tile-C.tile-sm .tile-label { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-crystal .tile-Z.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-crystal .tile-N.tile-sm .ti::before,
.tiles-crystal .tile-E.tile-sm .ti::before,
.tiles-crystal .tile-S.tile-sm .ti::before,
.tiles-crystal .tile-W.tile-sm .ti::before,
.tiles-crystal .tile-J.tile-sm .ti::before,
.tiles-crystal .tile-F.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
/* medium-tile overrides */
.tiles-crystal .tile-B.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.50); }
.tiles-crystal .tile-D.tile-md .tile-label,
.tiles-crystal .tile-C.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.50); }
.tiles-crystal .tile-N.tile-md .ti::before,
.tiles-crystal .tile-E.tile-md .ti::before,
.tiles-crystal .tile-S.tile-md .ti::before,
.tiles-crystal .tile-W.tile-md .ti::before,
.tiles-crystal .tile-J.tile-md .ti::before,
.tiles-crystal .tile-F.tile-md .ti::before,
.tiles-crystal .tile-Z.tile-md .ti::before { font-size: calc(var(--tile-w) * 0.86 * 0.52); }

/* ── tiles-sketch ───────────────────────────────────────────── */
.tiles-sketch .tile {
  border: 1px solid var(--tile-border);
  border-radius: 3px;
  box-shadow: 1px 1px 0 var(--tile-border), 3px 3px 0 rgba(0,0,0,0.3);
  background: var(--tile-bg) !important;
}
.tiles-sketch .tile.tile-sm { border-width: 1px; }
.tiles-sketch .tile .tile-band { display: none; }
.tiles-sketch .tile .tile-graphic { display: flex; flex: 1; min-height: 0; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 2px; padding: 2px; overflow: hidden; }
.tiles-sketch .tile .tile-label {
  flex: 0 0 auto;
  font-size: calc(var(--tile-w) * 0.20);
  font-style: italic;
  letter-spacing: 0;
}
/* Suited number tiles: hide tile-graphic, fill tile with centered colored italic number */
.tiles-sketch .tile-B .tile-graphic,
.tiles-sketch .tile-D .tile-graphic,
.tiles-sketch .tile-C .tile-graphic { display: none; }
.tiles-sketch .tile-B .tile-label { flex: 1; color: var(--bam);   font-size: calc(var(--tile-w) * 0.50); }
.tiles-sketch .tile-D .tile-label { flex: 1; color: var(--dot);   font-size: calc(var(--tile-w) * 0.50); }
.tiles-sketch .tile-C .tile-label { flex: 1; color: var(--crack); font-size: calc(var(--tile-w) * 0.50); }
.tiles-sketch .tile-N .tile-label,
.tiles-sketch .tile-E .tile-label,
.tiles-sketch .tile-S .tile-label,
.tiles-sketch .tile-W .tile-label { display: none; }
.tiles-sketch .ti { display: inline-block; flex-shrink: 0; line-height: 1; width: auto; height: auto; background: none; border-radius: 0; transform: none; font-size: 0; }
/* Rough pen-sketch icons for winds/joker/flower only */
.tiles-sketch .tile-N .ti::before { content: "↑"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-E .ti::before { content: "→"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-S .ti::before { content: "↓"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-W .ti::before { content: "←"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-J .ti::before { content: "✕"; font-size: calc(var(--tile-w) * 0.52); color: var(--joker); }
.tiles-sketch .tile-F .ti::before { content: "✲"; font-size: calc(var(--tile-w) * 0.52); color: var(--flower); }
.tiles-sketch .tile-J .tile-label,
.tiles-sketch .tile-F .tile-label,
.tiles-sketch .tile-Z .tile-label { display: none; }
.tiles-sketch .tile-Z .ti::before { content: "â–¡"; font-size: calc(var(--tile-w) * 0.54); color: var(--mid); opacity: 0.6; }
/* small-tile overrides */
.tiles-sketch .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
.tiles-sketch .tile-B.tile-sm .tile-label { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-sketch .tile-D.tile-sm .tile-label,
.tiles-sketch .tile-C.tile-sm .tile-label { font-size: calc(var(--tile-sm-w) * 0.50); }
.tiles-sketch .tile-N.tile-sm .ti::before,
.tiles-sketch .tile-E.tile-sm .ti::before,
.tiles-sketch .tile-S.tile-sm .ti::before,
.tiles-sketch .tile-W.tile-sm .ti::before,
.tiles-sketch .tile-J.tile-sm .ti::before,
.tiles-sketch .tile-F.tile-sm .ti::before,
.tiles-sketch .tile-Z.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
.tiles-sketch .tile-B.tile-sm .ti::before,
.tiles-sketch .tile-D.tile-sm .ti::before,
.tiles-sketch .tile-C.tile-sm .ti::before,
.tiles-sketch .tile-N.tile-sm .ti::before,
.tiles-sketch .tile-E.tile-sm .ti::before,
.tiles-sketch .tile-S.tile-sm .ti::before,
.tiles-sketch .tile-W.tile-sm .ti::before,
.tiles-sketch .tile-J.tile-sm .ti::before,
.tiles-sketch .tile-F.tile-sm .ti::before,
.tiles-sketch .tile-Z.tile-sm .ti::before { font-size: calc(var(--tile-sm-w) * 0.52); }
/* medium-tile overrides */
.tiles-sketch .tile-B.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.50); }
.tiles-sketch .tile-D.tile-md .tile-label,
.tiles-sketch .tile-C.tile-md .tile-label { font-size: calc(var(--tile-w) * 0.86 * 0.50); }
.tiles-sketch .tile-N.tile-md .ti::before,
.tiles-sketch .tile-E.tile-md .ti::before,
.tiles-sketch .tile-S.tile-md .ti::before,
.tiles-sketch .tile-W.tile-md .ti::before,
.tiles-sketch .tile-J.tile-md .ti::before,
.tiles-sketch .tile-F.tile-md .ti::before,
.tiles-sketch .tile-Z.tile-md .ti::before { font-size: calc(var(--tile-w) * 0.86 * 0.52); }

/* ── DR creator tile style buttons (shown only to creators) ─── */
.dr-style-btn.creator-only-style { border-style: dashed; border-color: var(--gold); }

/* ── Tile textures ───────────────────────────────────────────── */
/* All textures use a ::after overlay on .tile with pointer-events:none */
.tile { position: relative; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
}

/* matte: subtle noise-like stipple via repeating gradient */
.tile-texture-matte .tile::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' fill-opacity='.06'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' fill-opacity='.06'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}

/* smooth: very subtle gloss gradient from top */
.tile-texture-smooth .tile::after {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.06) 100%);
}

/* confetti: tiny colored speck pattern using CSS var */
.tile-texture-confetti .tile::after {
  opacity: 1;
  background-image:
    radial-gradient(circle, var(--tx-color, #ff6688) 1px, transparent 1px),
    radial-gradient(circle, var(--tx-color, #ff6688) 1px, transparent 1px);
  background-size: 8px 8px, 12px 12px;
  background-position: 0 0, 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* linen: crosshatch grain */
.tile-texture-linen .tile::after {
  opacity: 1;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px),
    repeating-linear-gradient(90deg,  transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px);
}

/* marble: swirled gradient tinted by --tx-color */
.tile-texture-marble .tile::after {
  opacity: 0.28;
  background: repeating-linear-gradient(
    125deg,
    transparent 0px,
    var(--tx-color, #aaccff) 1px,
    transparent 2px,
    transparent 14px,
    var(--tx-color, #aaccff) 15px,
    transparent 16px,
    transparent 26px
  );
}

/* ── DR texture color row ─────────────────────────────────────── */
.dr-texture-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.dr-texture-color-row.hidden { display: none; }
.dr-texture-color-row input[type="color"] {
  width: 36px; height: 22px; padding: 0; border: 1px solid var(--mat-border);
  background: none; cursor: pointer; border-radius: 2px;
}

/* ── Store creator filter bar ───────────────────────────────── */
.store-creator-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
}
.store-creator-name {
  color: var(--gold);
  font-weight: 700;
}
.store-creator-bio {
  opacity: 0.65;
  font-size: calc(9px * var(--ts));
}
.store-creator-clear {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.6;
  background: none;
  border: none;
  color: var(--text);
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
  padding: 2px 6px;
}
.store-creator-clear:hover { opacity: 1; }

/* ── NPS prompt overlay ────────────────────────────────────────────────────── */
#nps-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 5100;
  display: flex; align-items: center; justify-content: center;
}
#nps-overlay.hidden { display: none; }
#nps-modal {
  background: var(--surf-modal, var(--bg-card));
  border: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.55);
  width: min(92vw, 420px);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative;
}
#nps-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 1px solid var(--mat-border);
  color: var(--tx-sub); font-family: inherit; font-size: calc(10px * var(--ts));
  cursor: pointer; padding: 2px 7px; border-radius: 2px; line-height: 1;
}
#nps-close:hover { background: var(--mat-border); }
#nps-title {
  font-family: var(--font); font-size: calc(9px * var(--ts));
  color: var(--tx-head); text-align: center; letter-spacing: .04em;
}
.nps-hint {
  font-size: calc(7px * var(--ts)); color: var(--tx-sub); margin: 0; text-align: center;
}
#nps-scale {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
}
.nps-btn {
  font-family: var(--font); font-size: calc(9px * var(--ts));
  width: 32px; height: 32px;
  background: var(--bg-card); border: 2px solid var(--mat-border);
  color: var(--tx); border-radius: 3px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.nps-btn:hover {
  background: var(--gold); border-color: var(--gold);
  color: var(--dark);
}
.nps-skip {
  background: none; border: none;
  font-family: var(--font); font-size: calc(7px * var(--ts));
  color: var(--tx-sub); cursor: pointer; text-decoration: underline;
  padding: 0;
}
.nps-skip:hover { color: var(--tx); }

/* ══════════════════════════════════════════════════════════════
   MAGNIFIER / MONOCLE
   #mag-hud-btn  — toggle button, bottom-left corner (in-game only)
   #mag-lens     — full-viewport layer clipped to lens shape
   #mag-inner    — zoomed clone of page content (inside #mag-lens)
   #mag-border   — decorative ring drawn on top of the lens
   #mag-popup    — settings popup (opens above the button)
═══════════════════════════════════════════════════════════════ */

/* HUD button ------------------------------------------------- */
#mag-hud-btn {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 3200;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--accent, #00ccaa);
  background: var(--tile-bg, #f5f0e8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.30);
  transition: transform .12s, box-shadow .12s, background .12s;
  -webkit-user-select: none;
  user-select: none;
}

#mag-hud-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.40);
}

#mag-hud-btn.mag-btn-on {
  background: var(--accent, #00ccaa);
  border-color: var(--accent, #00ccaa);
}

/* Clipping layer (full viewport) ----------------------------- */
#mag-lens {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 2800;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg, #f5f0e8); /* opaque — only the cloned content shows inside the lens */
  /* clip-path is set dynamically by magnifier.js */
}

/* Zoomed page clone inside the lens -------------------------- */
#mag-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* transform set dynamically by magnifier.js */
}

/* Decorative border ring ------------------------------------- */
#mag-border {
  position: fixed;
  z-index: 2900;
  pointer-events: none;
  border: 3px solid var(--accent, #00ccaa);
  box-shadow:
    0 6px 28px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(0,0,0,0.08);
  /* position / size / border-radius set dynamically by magnifier.js */
}

/* Subtle crosshair at lens center (pseudo-elements on border) */
#mag-border::before,
#mag-border::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,204,170,0.45);
}
#mag-border::before { width: 1px;  height: 30%; }
#mag-border::after  { width: 30%; height: 1px;  }

/* Settings popup --------------------------------------------- */
#mag-popup {
  position: fixed;
  bottom: 62px;
  left: 12px;
  z-index: 3300;
  background: var(--tile-bg, #f5f0e8);
  border: 2px solid var(--accent, #00ccaa);
  border-radius: 8px;
  padding: calc(10px * var(--ts, 1)) calc(12px * var(--ts, 1)) calc(8px * var(--ts, 1));
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  min-width: calc(240px * var(--ts, 1));
  font-family: var(--font, 'Press Start 2P', monospace);
  font-size: calc(7px * var(--ts, 1));
}

#mag-popup.hidden { display: none !important; }

.mag-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ts, 1));
  margin-bottom: calc(10px * var(--ts, 1));
}

.mag-label {
  width: 48px;
  flex-shrink: 0;
  color: var(--accent, #00ccaa);
  font-size: calc(6px * var(--ts, 1));
  letter-spacing: .02em;
}

#mag-popup input[type="range"] {
  flex: 1;
  accent-color: var(--accent, #00ccaa);
  cursor: pointer;
  margin: 0;
}

.mag-val {
  width: 40px;
  text-align: right;
  flex-shrink: 0;
  font-size: calc(6px * var(--ts, 1));
}

/* ON / OFF toggle */
.mag-toggle {
  width: 80%;
  margin: 0 auto;
  padding: 4px 8px;
  display: block;
  text-align: center;
  font-size: calc(7px * var(--ts, 1));
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--accent, #00ccaa);
  transition: background .1s, color .1s;
}
.mag-toggle.mag-on  { background: var(--accent, #00ccaa); color: #fff; }
.mag-toggle.mag-off { background: transparent; color: var(--tx, #333); }

/* Shape buttons */
.mag-shape-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: calc(6px * var(--ts, 1));
  font-family: inherit;
  border: 1px solid var(--accent, #00ccaa);
  background: transparent;
  color: var(--tx, #333);
  border-radius: 4px;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.mag-shape-btn.mag-shape-active {
  background: var(--accent, #00ccaa);
  color: #fff;
}

.mag-hint {
  font-size: calc(5px * var(--ts, 1));
  color: var(--tx-sub, #888);
  line-height: 1.8;
  margin-top: 2px;
}