/* ---------------------------------------------------------------------------------------------------------
   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;

  /* --- Connection status (system indicator — not skin/manifest driven) --- */
  --conn-online:  #2ecc71;
  --conn-warn:    #e6b800;
  --conn-offline: #e74c3c;

  /* --- 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-factor:    1;
  --tile-factor-dt: 1;
  --tile-factor-mm: 1.3;
  --tile-font-ratio-hd: 0.36;
  --tile-w:         calc(clamp(22px, min(2.5vw, 5.2vh), 42px) * var(--tile-factor));
  --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-width: none; /* hide scrollbar globally */
}
body::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

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

/* ---------------------------------------------------------------------------------------------------------
   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);
}

/* MM: much tighter padding/gap so the tile grid has room. hMM especially —
   landscape phones have very little vertical space to spare. */
body.vmm #screen-main {
  padding: 16px 10px;
  gap: 6px;
}
body.hmm #screen-main {
  padding: 6px 10px;
  gap: 2px;
}

/* 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 .btn-menu {
  background: color-mix(in srgb, var(--mat) 82%, transparent);
}
body.ambient-bg-active #btn-multiplayer,
body.ambient-bg-active #btn-do-login,
body.ambient-bg-active #mm-sheet-play-btn {
  background: var(--dark);
}
body.ambient-bg-active #mm-nav-drawer {
  background: var(--light);
}
body.ambient-bg-active .screen {
  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;
  overflow: hidden;
}
/* 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; }

/* ---; Ticker / scroll animation -------------------------------------------------------------------------; */
/* Keep the close button visible over the scrolling text */
.main-announcement[class*="ann-scroll-"] .main-ann-close,
#game-ann-b[class*="ann-scroll-"] .main-ann-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: inherit;
  padding: 0 4px;
}
.main-announcement[class*="ann-scroll-"],
#game-ann-b[class*="ann-scroll-"] {
  padding-right: 28px; /* room for the absolute close button */
}

@keyframes ann-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.main-announcement.ann-scroll-snail  span,
.main-announcement.ann-scroll-slow   span,
.main-announcement.ann-scroll-medium span,
.main-announcement.ann-scroll-fast   span,
.main-announcement.ann-scroll-rapid  span,
#game-ann-b.ann-scroll-snail  span,
#game-ann-b.ann-scroll-slow   span,
#game-ann-b.ann-scroll-medium span,
#game-ann-b.ann-scroll-fast   span,
#game-ann-b.ann-scroll-rapid  span {
  display: inline-block;
  white-space: nowrap;
  animation: ann-ticker linear infinite;
  will-change: transform;
}
.main-announcement.ann-scroll-snail  span,
#game-ann-b.ann-scroll-snail  span { animation-duration: 60s; }
.main-announcement.ann-scroll-slow   span,
#game-ann-b.ann-scroll-slow   span { animation-duration: 30s; }
.main-announcement.ann-scroll-medium span,
#game-ann-b.ann-scroll-medium span { animation-duration: 16s; }
.main-announcement.ann-scroll-fast   span,
#game-ann-b.ann-scroll-fast   span { animation-duration: 8s; }
.main-announcement.ann-scroll-rapid  span,
#game-ann-b.ann-scroll-rapid  span { animation-duration: 4s; }

/* --- 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;
  overflow: hidden;
}
#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(--light);
  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;
}
#ms-bg-controls.admin-ms-disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.6);
}
.admin-inner-bubble {
  background: var(--mid);
  border: 1px solid var(--mat-border);
  border-radius: var(--radius-panel);
  padding: 12px 14px;
  margin-bottom: 14px;
}
body.vmm .admin-inner-bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--mat-border);
}

/* 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);
}

.brand { color: var(--accent); }

.title {
  font-size: clamp(28px, 5.5vw, 48px);
  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);
}

/* MM home header: much smaller than BM's clamp(28px,5.5vw,48px) — the tile
   grid needs the vertical/horizontal room. hMM additionally tightens the
   vertical footprint since landscape phones have very little height. */
body.vmm #screen-main .title {
  font-size: calc(16px * var(--ts));
  letter-spacing: 2px;
}
body.vmm #screen-main .subtitle {
  font-size: calc(6px * var(--ts));
  letter-spacing: 1px;
  margin-top: -6px;
}
body.hmm #screen-main .title {
  font-size: calc(13px * var(--ts));
  letter-spacing: 2px;
  line-height: 1;
}
body.hmm #screen-main .subtitle {
  font-size: calc(5.5px * var(--ts));
  letter-spacing: 1px;
  margin-top: 4px;
  line-height: 1;
}

.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: calc(14px * var(--ts)) calc(36px * var(--ts));
  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: min(calc(200px * var(--ts)), 90vw);
}
.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:disabled {
  background: var(--tx-dim);
  color: var(--bd-sub);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

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

/* Multiplayer join button: smaller than main buttons, but still wide enough to read */
#btn-mp-join { min-width: max(150px, 50%); }
#btn-mp-create { min-width: max(150px, 50%); }
#mp-join-code {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 1.1rem;
  flex: 1;
}

/* 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: calc(10px * var(--ts)) calc(24px * var(--ts));
  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); }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------;
   CREATIVE DRAWER (BM home page)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------; */
@keyframes creative-toggle-shake {
  0%,  55%, 100% { transform: rotate(0deg); }
  60%  { transform: rotate(-12deg); }
  68%  { transform: rotate(12deg); }
  76%  { transform: rotate(-8deg); }
  84%  { transform: rotate(8deg); }
  92%  { transform: rotate(-3deg); }
}
@keyframes creative-toggle-pulse {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--gold) 45%, transparent),
                          2px 2px 0 var(--shadow); }
  50%       { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 0%,  transparent),
                          2px 2px 0 var(--shadow); }
}

/* Wrap: single row, toggle on right, panel grows left */
#creative-drawer-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;   /* panel + toggle share the same height */
  gap: 0;
  justify-content: flex-end;
  margin-top: 18px;
}

/* Toggle ------; fully rounded when closed, right-handle when open */
#creative-drawer-toggle {
  font-size: calc(10px * var(--ts));
  line-height: 1;
  background: color-mix(in srgb, var(--gold) 8%, rgba(128,128,128,0.18));
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--radius-btn, 6px);
  color: var(--gold);
  padding: 0 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--shadow);
  animation:
    creative-toggle-shake 3.6s ease-in-out 1.8s infinite,
    creative-toggle-pulse 2.4s ease-in-out infinite;
  transition: background .15s, border-color .15s, border-radius .15s, box-shadow .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#creative-drawer-toggle:hover {
  background: color-mix(in srgb, var(--gold) 16%, rgba(128,128,128,0.22));
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  animation: none;
}
/* When open: square off left side to connect flush with panel */
#creative-drawer-toggle[aria-expanded="true"] {
  border-left-color: transparent;
  border-radius: 0 var(--radius-btn, 6px) var(--radius-btn, 6px) 0;
  box-shadow: 0px 2px 0 var(--shadow);
  animation: none;
}

/* Drawer panel ------; slides out to the left */
.creative-drawer {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  background: color-mix(in srgb, gray 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-right: none;
  border-radius: var(--radius-btn, 6px) 0 0 var(--radius-btn, 6px);
  box-shadow: 2px 2px 0 var(--shadow);
  transition: max-width .3s ease, opacity .2s ease;
  display: flex;
  align-items: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.creative-drawer.open {
  max-width: 480px;
  opacity: 1;
  box-shadow: 0px 2px 0 var(--shadow);
}

.creative-drawer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  padding: calc(6px * var(--ts)) calc(10px * var(--ts));
  white-space: nowrap;
}

/* Compact square-ish creative buttons */
.btn-creative-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: color-mix(in srgb, var(--gold) 6%, rgba(0,0,0,0.35));
  color: var(--gold);
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius-btn, 6px);
  padding: calc(2px * var(--ts)) calc(12px * var(--ts));
  min-width: 64px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: background .1s, border-color .1s, transform .06s, box-shadow .06s;
  font-family: var(--font);
}
.btn-creative-compact:hover {
  background: color-mix(in srgb, var(--gold) 18%, rgba(0,0,0,0.35));
  border-color: var(--gold);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}
.btn-creative-compact:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.bcc-icon {
  font-size: calc(12px * var(--ts));
  line-height: 1;
  display: block;
}
.bcc-label {
  font-size: calc(6px * var(--ts));
  letter-spacing: 0.08em;
  line-height: 1;
  display: block;
  white-space: nowrap;
}

/* BM: main play buttons ------; natural (content) width */
body:not(.vmm):not(.hmm) #btn-play,
body:not(.vmm):not(.hmm) #btn-multiplayer,
body:not(.vmm):not(.hmm) #btn-resume {
  min-width: 0;
  width: auto;
}

/* ---------------------------------------------------------------------------------------------------------
   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;
}

/* -- Settings dashboard (BM) -- */
.settings-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right" "footer footer";
  gap: 0 24px;
  width: 100%;
  max-width: 760px;
}
.settings-left-col  { grid-area: left;   display: flex; flex-direction: column; }
.settings-right-col { grid-area: right;  display: flex; flex-direction: column; }
.settings-dash-footer {
  grid-area: footer;
  display: flex;
  gap: 14px;
  justify-content: center;
  padding-top: 16px;
}

/* -- Settings accordion headers: hidden in BM -- */
.set-acc-hdr     { display: none; }
.set-acc-chevron { display: none; }
.set-acc-panel   {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
  max-height: none;
}

.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;
}
body.hmm .sound-ctrl,
body.vmm .sound-ctrl {
  flex-wrap: wrap-reverse;
  gap: 12px;
}

.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;
  padding-top: 16px;
}

/* ---------------------------------------------------------------------------------------------------------
   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(10px * 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); }

/* --- MP connection status dot + popup ------------------------------------- */
.mp-conn-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--conn-online);
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}
.mp-conn-dot.mp-conn-warn    { background: var(--conn-warn); }
.mp-conn-dot.mp-conn-offline { background: var(--conn-offline); }

.mp-conn-popup {
  position: fixed;
  top: 36px;
  right: 10px;
  z-index: 500;
  background: var(--dark);
  color: var(--light);
  border: 1px solid var(--gold);
  border-radius: var(--radius-btn);
  padding: 8px 10px;
  min-width: 160px;
  font-size: calc(9px * var(--ts));
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.mp-conn-popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gold-lt);
  font-size: calc(8px * var(--ts));
  margin-bottom: 6px;
  gap: 8px;
}
.mp-conn-popup-close {
  background: transparent;
  border: none;
  color: var(--tx-on-dark);
  cursor: pointer;
  font-size: calc(10px * var(--ts));
  line-height: 1;
  padding: 0 2px;
}
.mp-conn-popup-close:hover { color: var(--gold-lt); }
.mp-conn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.mp-conn-row .mp-conn-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--conn-online);
}
.mp-conn-row.mp-conn-row-offline .mp-conn-row-dot { background: var(--conn-offline); }
.mp-conn-row.mp-conn-row-bot     .mp-conn-row-dot { background: var(--mid); }


/* --- 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;
  position: relative;
  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-zoom-reset {
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: var(--dark);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 50%;
  width: calc(18px * var(--ts));
  height: calc(18px * var(--ts));
  padding: 0;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity .15s;
}
.field-zoom-reset svg {
  width: calc(11px * var(--ts));
  height: calc(11px * var(--ts));
  display: block;
}
.field-zoom-reset:hover { opacity: 0.85; }
body.hmm .field-zoom-reset { display: none; }

#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;
}

/* ---; Inline SVG icons inside buttons: scale with font, align to text ---; */
.btn-action svg, .btn-menu svg, .btn-creative-compact svg,
.mm-drawer-item svg, .mm-topbar-btn svg,
#creative-drawer-toggle svg, .admin-tab svg {
  width: 1em; height: 1em;
  vertical-align: middle;
  position: relative; top: -0.08em;
  flex-shrink: 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); }
.btn-action.btn-ac-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; }

/* Autocall button group (mirrors sort group) */
.btn-ac-group {
  display: inline-flex;
  gap: 0;
}
.btn-ac-group #btn-autocall {
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  border-right: 1px solid var(--bd);
}
.btn-ac-group #btn-autocall-reject {
  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;
}

/* 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 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: 2px;
}
.player-tag-v { writing-mode: vertical-rl; }

/* Dealer badge -- small pixel-style "D" tag, appended after a player-tag's
   name (or shown standalone near own tray for P0). */
.dealer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
  line-height: 1;
  background: var(--gold-lt);
  color: var(--dark);
  font-family: var(--font);
  font-size: 0.85em;
  border-radius: var(--radius-tile);
  opacity: 0.85;
}
.status-nick-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
#status-dealer-badge.dealer-badge {
  width: 1.1em;
  height: 1.1em;
}

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

#mobile-game-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background-color: var(--mat);
  background-image: var(--page-pattern-calm);
  background-size: var(--page-pattern-size);
  background-position: var(--page-pattern-pos);
  overflow: hidden;
}
#mobile-game-panel.hidden { display: none; }

#mobile-panel-bar {
  position: relative;
  z-index: 1;
  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);
}
#btn-panel-zoom-reset {
  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);
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-panel-zoom-reset svg { width: 20px; height: 20px; }
#btn-panel-zoom-reset:hover { opacity: 1; }
#mobile-panel-body {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 14px 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: absolute-position container for pip icons */
.tiles-designed .tile .tile-graphic,
.tiles-designed .tile.tile-sm .tile-graphic {
  display: block;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* .ti base ------; fill the grid cell so icons scale with the auto-rows layout */
.tiles-designed .tile .tile-graphic .ti {
  position: absolute;
  transform: translate(-50%, -50%);
  left: var(--px, 50%);
  top:  var(--py, 50%);
  min-width: 0; min-height: 0;
}

/* ---; Dot / Crack pip sizes (square pips, sized by count) ----- */
.tiles-designed .tile-D .ti,
.tiles-designed .tile-C .ti { width: 33cqmin; height: 33cqmin; }
.tiles-designed .tile-D[data-tile-count="1"] .ti,
.tiles-designed .tile-C[data-tile-count="1"] .ti { width: 62cqmin; height: 62cqmin; }
.tiles-designed .tile-D[data-tile-count="2"] .ti,
.tiles-designed .tile-D[data-tile-count="3"] .ti,
.tiles-designed .tile-C[data-tile-count="2"] .ti,
.tiles-designed .tile-C[data-tile-count="3"] .ti { width: 46cqmin; height: 46cqmin; }
.tiles-designed .tile-D[data-tile-count="4"] .ti,
.tiles-designed .tile-D[data-tile-count="5"] .ti,
.tiles-designed .tile-C[data-tile-count="4"] .ti,
.tiles-designed .tile-C[data-tile-count="5"] .ti { width: 40cqmin; height: 40cqmin; }
.tiles-designed .tile-D[data-tile-count="6"] .ti,
.tiles-designed .tile-D[data-tile-count="7"] .ti,
.tiles-designed .tile-C[data-tile-count="6"] .ti,
.tiles-designed .tile-C[data-tile-count="7"] .ti { width: 33cqmin; height: 33cqmin; }
.tiles-designed .tile-D[data-tile-count="8"] .ti,
.tiles-designed .tile-D[data-tile-count="9"] .ti,
.tiles-designed .tile-C[data-tile-count="8"] .ti,
.tiles-designed .tile-C[data-tile-count="9"] .ti { width: 27cqmin; height: 27cqmin; }

/* ---; Bam pip sizes (portrait bars, width ---; height) ------------------; */
.tiles-designed .tile-B .ti { width: 38cqw; height: 30cqh; }
.tiles-designed .tile-B[data-tile-count="1"] .ti { width: 64cqw; height: 84cqh; }
.tiles-designed .tile-B[data-tile-count="2"] .ti { width: 54cqw; height: 84cqh; }
.tiles-designed .tile-B[data-tile-count="3"] .ti { width: 38cqw; height: 84cqh; }
.tiles-designed .tile-B[data-tile-count="4"] .ti,
.tiles-designed .tile-B[data-tile-count="5"] .ti,
.tiles-designed .tile-B[data-tile-count="6"] .ti { width: 54cqw; height: 44cqh; }
.tiles-designed .tile-B[data-tile-count="7"] .ti,
.tiles-designed .tile-B[data-tile-count="8"] .ti,
.tiles-designed .tile-B[data-tile-count="9"] .ti { width: 38cqw; height: 29cqh; }

/* 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 bamboo bars */
/* Small bam/dot/crack: now inherit from full-size rules via --tile-size-ref = tile-sm-w */

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

/* ---; SVG color assignments via currentColor ------------------------------
   Each .ti inherits 'color' from the suit/tile class so all SVG
   fill="currentColor" shapes pick up the right palette automatically.
-------------------------------------------------------------------------------------------------------------- */
.tile-B .ti { color: var(--bam); }
.tile-D .ti { color: var(--dot); }
.tile-C .ti { color: var(--crack); }
.tile-N .ti { color: var(--wind); }
.tile-E .ti { color: var(--wind); }
.tile-S .ti { color: var(--wind); }
.tile-W .ti { color: var(--wind); }
.tile-J .ti { color: var(--joker); }
.tile-F .ti { color: var(--flower); }

/* ---; SVG element inside .ti: fill the wrapper exactly -------------; */
.ti > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---; 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;
  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; }


/* ---; Dragon tile: label hide --------------------------------------------------------- */
.tiles-designed .tile-B[data-tile-count="0"] .tile-label,
.tiles-designed .tile-D[data-tile-count="0"] .tile-label,
.tiles-designed .tile-C[data-tile-count="0"] .tile-label { display: none; }

/* ---; SVG icon sizing: designed style ------------------------------------------
   Complex tiles (wind/joker/flower/dragon) use a large centered icon.
-------------------------------------------------------------------------------------------------------------- */

/* Complex tiles: centered, fills most of graphic area */
.tiles-designed .tile-N .ti,
.tiles-designed .tile-E .ti,
.tiles-designed .tile-S .ti,
.tiles-designed .tile-W .ti { width: 74cqmin; height: 74cqmin; }
.tiles-designed .tile-J .ti { width: 74cqmin; height: 74cqmin; }
.tiles-designed .tile-F .ti { width: 74cqmin; height: 74cqmin; }
.tiles-designed .tile-B[data-tile-count="0"] .ti,
.tiles-designed .tile-D[data-tile-count="0"] .ti,
.tiles-designed .tile-C[data-tile-count="0"] .ti { width: 74cqmin; height: 74cqmin; }

/* ---; Neon: apply glow filter to the SVG wrapper --------------------------- */
.tiles-neon .tile-J .ti { color: var(--joker); }
/* 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;
  /* label is 0.29---;tile-w vs designed's 0.21---- +0.08 ---- ------ 1.72+0.08=1.80 */
  height: calc(var(--tile-w) * 1.80);
}
.tiles-neon .tile.tile-sm {
  height: calc(var(--tile-sm-w) * 1.80);
}
.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: block;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.tiles-neon .tile .tile-label {
  font-size: var(--tile-font);
  color: #e0e0e0;
  text-shadow: 0 0 6px currentColor;
  padding-bottom: 1px;
  flex: 0 0 auto;
}
.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 ------; absolute pip positioning (shared logic with designed) */
.tiles-neon .ti {
  display: block;
  line-height: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  left: var(--px, 50%);
  top:  var(--py, 50%);
}
/* Dragon label hide */
.tiles-neon .tile-B[data-tile-count="0"] .tile-label,
.tiles-neon .tile-D[data-tile-count="0"] .tile-label,
.tiles-neon .tile-C[data-tile-count="0"] .tile-label  { display: none; }

/* Neon D/C pip sizes */
.tiles-neon .tile-D .ti,
.tiles-neon .tile-C .ti { width: 33cqmin; height: 33cqmin; }
.tiles-neon .tile-D[data-tile-count="1"] .ti,
.tiles-neon .tile-C[data-tile-count="1"] .ti { width: 62cqmin; height: 62cqmin; }
.tiles-neon .tile-D[data-tile-count="2"] .ti,
.tiles-neon .tile-D[data-tile-count="3"] .ti,
.tiles-neon .tile-C[data-tile-count="2"] .ti,
.tiles-neon .tile-C[data-tile-count="3"] .ti { width: 46cqmin; height: 46cqmin; }
.tiles-neon .tile-D[data-tile-count="4"] .ti,
.tiles-neon .tile-D[data-tile-count="5"] .ti,
.tiles-neon .tile-C[data-tile-count="4"] .ti,
.tiles-neon .tile-C[data-tile-count="5"] .ti { width: 40cqmin; height: 40cqmin; }
.tiles-neon .tile-D[data-tile-count="6"] .ti,
.tiles-neon .tile-D[data-tile-count="7"] .ti,
.tiles-neon .tile-C[data-tile-count="6"] .ti,
.tiles-neon .tile-C[data-tile-count="7"] .ti { width: 33cqmin; height: 33cqmin; }
.tiles-neon .tile-D[data-tile-count="8"] .ti,
.tiles-neon .tile-D[data-tile-count="9"] .ti,
.tiles-neon .tile-C[data-tile-count="8"] .ti,
.tiles-neon .tile-C[data-tile-count="9"] .ti { width: 27cqmin; height: 27cqmin; }
/* Neon B pip sizes */
.tiles-neon .tile-B .ti { width: 38cqw; height: 30cqh; }
.tiles-neon .tile-B[data-tile-count="1"] .ti { width: 64cqw; height: 84cqh; }
.tiles-neon .tile-B[data-tile-count="2"] .ti { width: 54cqw; height: 84cqh; }
.tiles-neon .tile-B[data-tile-count="3"] .ti { width: 38cqw; height: 84cqh; }
.tiles-neon .tile-B[data-tile-count="4"] .ti,
.tiles-neon .tile-B[data-tile-count="5"] .ti,
.tiles-neon .tile-B[data-tile-count="6"] .ti { width: 54cqw; height: 44cqh; }
.tiles-neon .tile-B[data-tile-count="7"] .ti,
.tiles-neon .tile-B[data-tile-count="8"] .ti,
.tiles-neon .tile-B[data-tile-count="9"] .ti { width: 38cqw; height: 29cqh; }
/* Neon complex tiles */
.tiles-neon .tile-N .ti, .tiles-neon .tile-E .ti,
.tiles-neon .tile-S .ti, .tiles-neon .tile-W .ti { width: 74cqmin; height: 74cqmin; }
.tiles-neon .tile-J .ti                          { width: 74cqmin; height: 74cqmin; }
.tiles-neon .tile-F .ti                          { width: 74cqmin; height: 74cqmin; }
.tiles-neon .tile-B[data-tile-count="0"] .ti,
.tiles-neon .tile-D[data-tile-count="0"] .ti,
.tiles-neon .tile-C[data-tile-count="0"] .ti    { width: 74cqmin; height: 74cqmin; }

/* Neon glow filter on SVGs */
.tiles-neon .tile-B .ti > svg { filter: drop-shadow(0 0 3px var(--bam)); }
.tiles-neon .tile-D .ti > svg { filter: drop-shadow(0 0 3px var(--dot)); }
.tiles-neon .tile-C .ti > svg { filter: drop-shadow(0 0 3px var(--crack)); }
.tiles-neon .tile-N .ti > svg,
.tiles-neon .tile-E .ti > svg,
.tiles-neon .tile-S .ti > svg,
.tiles-neon .tile-W .ti > svg { filter: drop-shadow(0 0 4px var(--wind)); }
.tiles-neon .tile-J .ti > svg { filter: drop-shadow(0 0 4px var(--joker)); }
.tiles-neon .tile-F .ti > svg { filter: drop-shadow(0 0 4px var(--flower)); }
.tiles-neon .tile-B[data-tile-count="0"] .ti > svg { filter: drop-shadow(0 0 4px var(--bam)); }
.tiles-neon .tile-D[data-tile-count="0"] .ti > svg { filter: drop-shadow(0 0 4px var(--dot)); }
.tiles-neon .tile-C[data-tile-count="0"] .ti > svg { filter: drop-shadow(0 0 4px var(--crack)); }

/* Sm */
.tiles-neon .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); flex: 0 0 auto; }

/* -------------------------------------------------------------------------------------------------------;
   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);
  /* label is 0.36---;tile-w vs designed's 0.21---- +0.15 ---- ------ 1.72+0.15=1.87 */
  height: calc(var(--tile-w) * 1.87);
}
.tiles-handdrawn .tile.tile-sm {
  height: calc(var(--tile-sm-w) * 1.87);
  border-radius: 2px 4px 3px 5px / 4px 2px 5px 3px;
}
/* Face-down tiles use the same wobbly radius as face tiles in handdrawn mode */
.tiles-handdrawn .tile-back {
  border-radius: 3px 5px 4px 6px / 5px 3px 6px 4px;
}
.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: block;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.tiles-handdrawn .tile .tile-label {
  font-size: calc(var(--tile-w) * var(--tile-font-ratio-hd, 0.36));
  padding-bottom: 1px;
  font-style: italic;
  flex: 0 0 auto;
}
.tiles-handdrawn .tile.tile-sm .tile-label {
  font-size: calc(var(--tile-sm-w) * var(--tile-font-ratio-hd, 0.36));
  flex: 0 0 auto;
}
.tiles-handdrawn .tile-J .tile-label,
.tiles-handdrawn .tile-F .tile-label,
.tiles-handdrawn .tile-Z .tile-label { display: none; }
/* Icons ------; absolute pip positioning */
.tiles-handdrawn .ti {
  display: block;
  line-height: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  left: var(--px, 50%);
  top:  var(--py, 50%);
}
/* Dragon label hide */
.tiles-handdrawn .tile-B[data-tile-count="0"] .tile-label,
.tiles-handdrawn .tile-D[data-tile-count="0"] .tile-label,
.tiles-handdrawn .tile-C[data-tile-count="0"] .tile-label  { display: none; }

/* Handdrawn D/C pip sizes */
.tiles-handdrawn .tile-D .ti,
.tiles-handdrawn .tile-C .ti { width: 33cqmin; height: 33cqmin; }
.tiles-handdrawn .tile-D[data-tile-count="1"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="1"] .ti { width: 62cqmin; height: 62cqmin; }
.tiles-handdrawn .tile-D[data-tile-count="2"] .ti,
.tiles-handdrawn .tile-D[data-tile-count="3"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="2"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="3"] .ti { width: 46cqmin; height: 46cqmin; }
.tiles-handdrawn .tile-D[data-tile-count="4"] .ti,
.tiles-handdrawn .tile-D[data-tile-count="5"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="4"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="5"] .ti { width: 40cqmin; height: 40cqmin; }
.tiles-handdrawn .tile-D[data-tile-count="6"] .ti,
.tiles-handdrawn .tile-D[data-tile-count="7"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="6"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="7"] .ti { width: 33cqmin; height: 33cqmin; }
.tiles-handdrawn .tile-D[data-tile-count="8"] .ti,
.tiles-handdrawn .tile-D[data-tile-count="9"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="8"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="9"] .ti { width: 27cqmin; height: 27cqmin; }
/* Handdrawn B pip sizes */
.tiles-handdrawn .tile-B .ti { width: 38cqw; height: 30cqh; }
.tiles-handdrawn .tile-B[data-tile-count="1"] .ti { width: 64cqw; height: 84cqh; }
.tiles-handdrawn .tile-B[data-tile-count="2"] .ti { width: 54cqw; height: 84cqh; }
.tiles-handdrawn .tile-B[data-tile-count="3"] .ti { width: 38cqw; height: 84cqh; }
.tiles-handdrawn .tile-B[data-tile-count="4"] .ti,
.tiles-handdrawn .tile-B[data-tile-count="5"] .ti,
.tiles-handdrawn .tile-B[data-tile-count="6"] .ti { width: 54cqw; height: 44cqh; }
.tiles-handdrawn .tile-B[data-tile-count="7"] .ti,
.tiles-handdrawn .tile-B[data-tile-count="8"] .ti,
.tiles-handdrawn .tile-B[data-tile-count="9"] .ti { width: 38cqw; height: 29cqh; }
/* Handdrawn complex tiles */
.tiles-handdrawn .tile-N .ti, .tiles-handdrawn .tile-E .ti,
.tiles-handdrawn .tile-S .ti, .tiles-handdrawn .tile-W .ti { width: 74cqmin; height: 74cqmin; }
.tiles-handdrawn .tile-J .ti                               { width: 74cqmin; height: 74cqmin; }
.tiles-handdrawn .tile-F .ti                               { width: 74cqmin; height: 74cqmin; }
.tiles-handdrawn .tile-B[data-tile-count="0"] .ti,
.tiles-handdrawn .tile-D[data-tile-count="0"] .ti,
.tiles-handdrawn .tile-C[data-tile-count="0"] .ti         { width: 74cqmin; height: 74cqmin; }

/* Handdrawn SVG: slightly rougher opacity on the tile-style-specific tweaks */
.tiles-handdrawn .ti > svg { opacity: 0.92; }

/* -------------------------------------------------------------------------------------------------------;
   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; }

/* D/C count 2,3: stacked */
.tiles-premium .tile-D[data-tile-count="2"] .tile-graphic,
.tiles-premium .tile-D[data-tile-count="3"] .tile-graphic,
.tiles-premium .tile-C[data-tile-count="2"] .tile-graphic,
.tiles-premium .tile-C[data-tile-count="3"] .tile-graphic { flex-direction: column; }

/* Bam - hollow outlined bar */
.tiles-premium .tile-B .ti {
  flex: 0 0 calc(var(--tile-size-ref) / 3 - 4px);
  width: calc(var(--tile-size-ref) * 0.10);
  height: calc(var(--tile-size-ref) * 0.28);
  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 {
  flex: 0 0 calc(var(--tile-size-ref) / 3 - 4px);
  width: calc(var(--tile-size-ref) / 3 - 4px);
  height: calc(var(--tile-size-ref) / 3 - 4px);
  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 {
  flex: 0 0 calc(var(--tile-size-ref) / 3 - 4px);
  width: calc(var(--tile-size-ref) / 3 - 4px);
  height: calc(var(--tile-size-ref) / 3 - 4px);
  background: transparent;
  border: 2px solid var(--crack);
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 4px var(--crack);
}
/* Count overrides */
.tiles-premium .tile-B[data-tile-count="1"] .ti { flex: 0 0 auto; height: calc(var(--tile-size-ref) * 0.60); }
.tiles-premium .tile-B[data-tile-count="2"] .ti { flex: 0 0 calc(var(--tile-size-ref) / 2 - 5px); height: calc(var(--tile-size-ref) * 0.48); }
.tiles-premium .tile-B[data-tile-count="3"] .ti { height: calc(var(--tile-size-ref) * 0.42); }
.tiles-premium .tile-B[data-tile-count="4"] .ti { flex: 0 0 calc(var(--tile-size-ref) / 2 - 5px); height: calc(var(--tile-size-ref) * 0.38); }
.tiles-premium .tile-B[data-tile-count="5"] .ti,
.tiles-premium .tile-B[data-tile-count="6"] .ti { height: calc(var(--tile-size-ref) * 0.35); }
.tiles-premium .tile-D[data-tile-count="1"] .ti { flex: 0 0 auto; width: calc(var(--tile-size-ref) * 0.50); height: calc(var(--tile-size-ref) * 0.50); }
.tiles-premium .tile-D[data-tile-count="2"] .ti,
.tiles-premium .tile-D[data-tile-count="3"] .ti { flex: 0 0 auto; width: calc(var(--tile-size-ref) * 0.38); height: calc(var(--tile-size-ref) * 0.38); }
.tiles-premium .tile-D[data-tile-count="4"] .ti { flex: 0 0 calc(var(--tile-size-ref) / 2 - 5px); width: calc(var(--tile-size-ref) / 2 - 6px); height: calc(var(--tile-size-ref) / 2 - 6px); }
.tiles-premium .tile-C[data-tile-count="1"] .ti { flex: 0 0 auto; width: calc(var(--tile-size-ref) * 0.44); height: calc(var(--tile-size-ref) * 0.44); }
.tiles-premium .tile-C[data-tile-count="2"] .ti,
.tiles-premium .tile-C[data-tile-count="3"] .ti { flex: 0 0 auto; width: calc(var(--tile-size-ref) * 0.34); height: calc(var(--tile-size-ref) * 0.34); }
.tiles-premium .tile-C[data-tile-count="4"] .ti { flex: 0 0 calc(var(--tile-size-ref) / 2 - 5px); width: calc(var(--tile-size-ref) / 2 - 6px); height: calc(var(--tile-size-ref) / 2 - 6px); }
.tiles-premium .tile.tile-sm .tile-label { font-size: var(--tile-sm-font); }
/* Small-tile icon overrides for premium ------; size auto-scales via --tile-size-ref; keep only visual tweaks */
.tiles-premium .tile-B.tile-sm .ti { box-shadow: 0 0 3px var(--bam); }
.tiles-premium .tile-D.tile-sm .ti { border-width: 1px; }
.tiles-premium .tile-C.tile-sm .ti { 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; }

/* Tap feedback (ambient tile-tap animation, DR-configurable) */
@keyframes tile-tap-wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(var(--tile-tap-deg, 6deg)); }
  50%  { transform: rotate(calc(var(--tile-tap-deg, 6deg) * -1)); }
  75%  { transform: rotate(calc(var(--tile-tap-deg, 6deg) * 0.5)); }
  100% { transform: rotate(0deg); }
}
@keyframes tile-tap-jump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(var(--tile-tap-lift, -6px)); }
  100% { transform: translateY(0); }
}
.tile-tap-wiggle { animation: tile-tap-wiggle .28s ease-in-out; }
.tile-tap-jump   { animation: tile-tap-jump .28s ease-out; }
.tile-tap-slight  { --tile-tap-deg: 3deg;  --tile-tap-lift: -3px; }
.tile-tap-normal  { --tile-tap-deg: 6deg;  --tile-tap-lift: -6px; }
.tile-tap-intense { --tile-tap-deg: 11deg; --tile-tap-lift: -10px; }

/* ---------------------------------------------------------------------------------------------------------
   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(calc(9px * var(--ts)), 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(calc(9px * var(--ts)), 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(calc(8px * var(--ts)), 1.05vw, 10px);
  color: var(--tx-sub);
  padding-left: 2px;
}

.hb-hand-val {
  font-size: clamp(calc(8px * var(--ts)), 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;
  width: 90vw;
  max-width: 420px;
}

.auth-tab {
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  padding: 9px 20px;
  flex: 1;
  min-width: 0;   /* allow the flex item to shrink below its content width */
  box-sizing: border-box;   /* padding must count toward the flex-allocated width, not add to it */
  background: var(--mid);
  color: var(--light);
  border: 2px solid var(--dark);
  border-bottom: none;
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s;
}
.auth-tab:first-child { border-right: 1px solid var(--dark); border-radius: var(--radius-card) 0 0 0; }
.auth-tab:last-child  { border-left:  1px solid var(--dark); border-radius: 0 var(--radius-card) 0 0; }
.auth-tab-active      { background: var(--dark); }
.auth-tab:hover:not(.auth-tab-active) { background: var(--mid); }

/* Pull card flush under tabs (cancels screen-auth gap) */
.auth-card { margin-top: -20px; }
/* Standalone verify card ------; no tabs above, so full border-radius + no negative margin */
.auth-card-standalone { margin-top: 0; border-radius: var(--radius-card); }

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

.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 action buttons: full width to match card */
.auth-card .btn-menu {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.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;
}
body.vmm .auth-divider { padding-bottom: 8px; }

.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);
}
body.hmm .site-legal-links {
  font-size: calc(4px * var(--ts));
}

.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;
}

/* MM: lower basis px so calc(Xpx * var(--ts)) renders at readable size */
body.vmm #legal-modal-body,
body.hmm #legal-modal-body { font-size: calc(7px * var(--ts)); line-height: 1.7; }
body.vmm #legal-modal-header,
body.hmm #legal-modal-header { font-size: calc(6.5px * var(--ts)); }
body.vmm #legal-sections h2,
body.hmm #legal-sections h2 { font-size: calc(6px * var(--ts)); }
body.vmm #legal-version-line,
body.hmm #legal-version-line { font-size: calc(5px * var(--ts)); }
body.vmm #legal-close-btn,
body.hmm #legal-close-btn { font-size: calc(6px * var(--ts)); }

/* --- Account screen ----------------------------------------------------------- */
#screen-account {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 20px 20px;
  box-sizing: border-box;
  gap: 8px;
}
#screen-account .acct-tabs,
#screen-account .settings-card {
  width: min(600px, calc(100vw - 16px));
  box-sizing: border-box;
}

/* --- 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,
#courtesy-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,
#courtesy-overlay.hidden {
  display: none !important;
}

#deal-intro-overlay.visible,
#second-charleston-overlay.visible,
#courtesy-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;
}

/* --- MP poll status (second Charleston vote / courtesy poll) --------------- */
.mp-poll-status {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
  text-align: left;
}

.mp-poll-row {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
  padding: 3px 0;
  letter-spacing: .3px;
}

.mp-poll-row.mp-poll-voted {
  color: var(--tx-head);
}

/* --- Charleston-phase status ring (top status bar) -------------------------- */
#mp-poll-ring {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  cursor: pointer;
}

#mp-poll-ring.hidden {
  display: none !important;
}

.mp-poll-seg {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--tx-sub);
  background: transparent;
  transition: background .2s ease;
}

.mp-poll-seg-done {
  background: #fff;
  border-color: #fff;
}

.mp-poll-popup {
  top: 36px;
  right: 40px;
  min-width: 190px;
}

.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)); }

/* Live-games list (reuses .mp-quick-* row styling) */
.mp-live-item {
  flex-wrap: wrap;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
.mp-live-item.mp-live-grayed {
  opacity: .5;
}
.mp-live-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mp-live-players {
  font-size: calc(8px * var(--ts));
  color: var(--tx);
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}
.mp-live-meta {
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: .5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  line-height: 1.6;
}
.mp-live-conn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mp-live-conn .mp-conn-dot {
  width: 7px;
  height: 7px;
  cursor: default;
  box-shadow: none;
}
.mp-live-conn-full    .mp-conn-dot { background: var(--conn-online); }
.mp-live-conn-partial .mp-conn-dot { background: var(--conn-warn); }
.mp-live-conn-none    .mp-conn-dot { background: var(--conn-offline); }
.mp-live-age-fresh { color: var(--conn-online); }
.mp-live-age-mid   { color: var(--conn-warn); }
.mp-live-age-old   { color: var(--conn-offline); }
.mp-live-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mp-live-actions .mp-live-rejoin {
  font-size: calc(6px * var(--ts));
  padding: 4px 10px;
  min-height: 0;
}
.mp-live-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--conn-offline);
  border-radius: 50%;
  background: transparent;
  color: var(--conn-offline);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}
.mp-live-delete:hover {
  background: var(--conn-offline);
  color: var(--dark);
}
.mp-live-hint {
  margin: 8px 0 0;
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  letter-spacing: .5px;
  line-height: 1.5;
}

/* -- MP launch accordion headers & panels (all modes) -- */
.mp-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 0 0 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}
.mp-acc-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: calc(14px * var(--ts));
}
.mp-acc-hdr-open {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.mp-acc-hdr-open .mp-acc-chevron { transform: rotate(180deg); }
.mp-acc-panel {
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 2px 0 2px !important;
  border-radius: 0 !important;
  margin: 0 0 8px;
  width: 100%;
  box-sizing: border-box;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.mp-acc-panel.mp-acc-open {
  max-height: 2000px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
}

/* -- MP launch dashboard (BM) -- */
#screen-mp .screen-inner { max-width: 860px; }
.mp-dashboard {
  display: grid;
  grid-template-columns: min(450px, 45vw) min(450px, 45vw);
  grid-template-areas: "left right" "back back";
  gap: 0 16px;
  width: 100%;
  justify-content: center;
}
.mp-left-col  { grid-area: left;  display: flex; flex-direction: column; gap: 0; }
.mp-right-col { grid-area: right; display: flex; flex-direction: column; gap: 0; }
.mp-dash-back {
  grid-area: back;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* -- Settings: hMM (1-col accordion, nav-rail aware) -- */
body.hmm #screen-settings { padding: 24px; }
body.hmm .settings-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  width: 100%;
  padding: 0 8px 0 24px;
}
/* .set-col children: no min-width blowout */
body.hmm .set-acc-panel.set-acc-open > * { min-width: 0; }

/* .set-col: transparent by default, flex col in hMM */
.set-col { display: contents; }
body.hmm .set-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  min-width: 0;
}

.setting-row input {
    font-family: var(--font);
    font-size: calc(8px * var(--ts));
    background: var(--surf-input);
    border: 2px solid var(--bd);
    color: var(--tx);
}

/* hMM: setting rows inline, centered within each col */
body.hmm .setting-row {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
body.hmm .setting-row .setting-label { flex-shrink: 0; }
body.hmm .setting-row .setting-select { width: auto; max-width: 100%; }
body.hmm .setting-row input { width: auto !important; max-width: 100%; min-width: 0; flex: 1 1 auto; }
body.hmm .setting-row .btn-action { width: auto !important; white-space: nowrap; }
body.hmm .setting-row .sound-ctrl { width: auto !important; }
body.hmm .set-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 0 0 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}
body.hmm .set-acc-chevron { display: inline-block; transition: transform 0.25s ease; font-size: calc(14px * var(--ts)); }
body.hmm .set-acc-hdr-open {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
body.hmm .set-acc-hdr-open .set-acc-chevron { transform: rotate(180deg); }
body.hmm .set-acc-panel {
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 2px 0 2px !important;
  border-radius: 0 !important;
  margin: 0 0 8px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
body.hmm .set-acc-panel.set-acc-open {
  display: flex;
  gap: 24px;
  align-items: stretch;
  max-height: 2000px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
}

/* -- Settings: vMM (single-col accordion) -- */
body.vmm #screen-settings { padding: 12px 14px; }
body.vmm .settings-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  width: 100%;
}
body.vmm .set-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 0 0 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}
body.vmm .set-acc-chevron { display: inline-block; transition: transform 0.25s ease; font-size: calc(14px * var(--ts)); }
body.vmm .set-acc-hdr-open {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
body.vmm .set-acc-hdr-open .set-acc-chevron { transform: rotate(180deg); }
body.vmm .set-acc-panel {
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 2px 0 2px !important;
  border-radius: 0 !important;
  margin: 0 0 8px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
body.vmm .set-acc-panel.set-acc-open {
  max-height: 2000px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
}
body.vmm .settings-dash-footer { padding-top: 8px; }

/* vMM: keep setting rows inline */
body.vmm .setting-row {
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 10px;
}
body.vmm .setting-row .setting-label { flex-shrink: 0; }
body.vmm .setting-row .setting-select { width: stretch; }
/* body.vmm .setting-row input[type=text] { width: auto !important; min-width: 80px; } */
body.vmm .setting-row input { width: auto !important; min-width: 80px; }
body.vmm .setting-row .btn-action { width: auto !important; white-space: nowrap; }
body.vmm .setting-row .sound-ctrl { width: auto !important; }

/* -- MP launch: hMM overrides -- */
body.hmm #screen-mp { padding: 12px 0; }
body.hmm #screen-mp .screen-inner { max-width: none; padding-right: 8px; }

/* -- MP launch: vMM accordion -- */
body.vmm #screen-mp { padding: 12px 8px; }
body.vmm .mp-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
body.vmm .mp-left-col,
body.vmm .mp-right-col { display: contents; }
body.vmm .mp-dash-back { padding-top: 8px; }

/* -- MP inline leaderboard -- */
.mp-lb-body {
  max-height: 340px;
  overflow-y: auto;
  margin-top: 8px;
}


/* ---------------------------------------------------------------------------------------------------------
   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; }

/* When ambient canvas is active, let it paint safe-zone gaps instead of body bg */
body.ambient-bg-active { background: transparent; }

/* 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 (vMM), width <= 480px
   Convention: media query = pre-JS global chrome only. body.vmm = everything
   else (game board + all post-load screens/overlays). See docs/guide/modes.md.
----------------------------------------------------------------------------------------------------------- */
/* Global chrome (main menu / auth / settings) sized by viewport width only —
   visible before ui_init.js runs, kept as a media query to avoid a FOUC flash.
   Game-board-specific rules live under body.vmm below (only relevant once
   #screen-game is active, well after JS has set the mode class). */
@media (max-width: 480px) {

  :root {
    --font-base-sm: 16px;
    --font-base-md: 20px;
    --font-base-lg: 24px;
    --font-base-xl: 28px;
  }

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

  .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 { width: 100%; }
  .auth-tab  { flex: 1; min-height: 40px; padding: calc(9px * var(--ts)) calc(6px * var(--ts)); }

  .btn-menu { min-height: 36px; box-sizing: border-box; font-size: calc(8px * var(--ts)); padding: calc(8px * var(--ts)) calc(18px * var(--ts)); min-width: 0; }
  .btn-menu.btn-sm { width: auto; min-height: 36px; font-size: calc(7px * var(--ts)); padding: 8px 16px; }
  .btn-menu.btn-creative { font-size: calc(8px * var(--ts)); padding: calc(8px * var(--ts)) calc(18px * var(--ts)); }
  #mm-nav-bubble-btn, #btn-support-bubble { padding: calc(8px * var(--ts)); min-height: 0; font-size: 0; letter-spacing: 0; }
}

/* --- vMM (Vertical Mobile Mode) — game-board + post-load screens --------- */
/* All rules here only matter once #screen-game (or another post-load screen/
   overlay) is visible, so no FOUC risk from body.vmm being set by JS. */

body.vmm {
  --tile-w: calc(clamp(16px, 5.5vw, 24px) * var(--tile-factor));
}

/* Opponent areas hidden -- accessed via OTHERS popup. */
body.vmm #area-top, body.vmm #area-left, body.vmm #area-right { display: none; }
body.vmm #btn-view-field { display: none !important; }   /* field is inline in portrait */
/* Mat must not exceed viewport width in portrait */
body.vmm #area-center { width: 100% !important; max-width: 100vw !important; }
body.vmm #mat-wrapper { aspect-ratio: unset; width: 100%; max-width: 100vw; height: 100%; }
/* Remove wall strip visuals — not enough space in portrait; mat border remains */
body.vmm .wall-strip { display: none !important; }
/* Hide deck count — no space in portrait */
body.vmm #mat-deck { display: none !important; }
/* vMM reset button: smaller */
body.vmm .field-zoom-reset { width: calc(14px * var(--ts)); height: calc(14px * var(--ts)); }
body.vmm .field-zoom-reset svg { width: calc(9px * var(--ts)); height: calc(9px * var(--ts)); }

/* area-bottom sizes to content; area-upper takes what's left */
body.vmm #board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.vmm #area-upper { flex: 1; min-height: 0; display: flex; align-items: stretch; overflow: hidden; }
body.vmm #area-bottom { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: visible; gap: 2px; padding: 2px 0; }
/* Fallback: if layout breaks and content overflows the screen, allow scroll without a visible bar */
body.vmm #screen-game.active { overflow-y: auto; scrollbar-width: none; }
body.vmm #screen-game.active::-webkit-scrollbar { display: none; }
/* Restore areas when moved into the popup panel ------; kill board-layout sizing/positioning */
body.vmm #mobile-panel-body #area-top,
body.vmm #mobile-panel-body #area-left,
body.vmm #mobile-panel-body #area-right {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  flex-shrink: 1 !important;
  align-self: auto !important;
}
/* Kill opp-comp rotation and fixed sizing inside the panel */
body.vmm #mobile-panel-body #opp-comp-top,
body.vmm #mobile-panel-body #opp-comp-left,
body.vmm #mobile-panel-body #opp-comp-right {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0 !important;
}
/* Restore hands hidden by base mobile rules */
body.vmm #mobile-panel-body #hand-1,
body.vmm #mobile-panel-body #hand-2,
body.vmm #mobile-panel-body #hand-3 { display: flex !important; width: 100% !important; max-height: none !important; flex-wrap: wrap !important; }
/* Trays: always horizontal */
body.vmm #mobile-panel-body #tray-1,
body.vmm #mobile-panel-body #tray-2,
body.vmm #mobile-panel-body #tray-3 { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; }
/* Panel wrappers */
body.vmm #mobile-panel-body .mm-others-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
body.vmm #mobile-panel-body .mm-player-col { display: flex; flex-direction: column; width: 100%; gap: 4px; }

/* View toggle buttons: only OTHERS shown in portrait */
body.vmm .btn-mobile-only { display: inline-flex !important; align-items: center; justify-content: center; }

/* Handbook header: larger touch targets on mobile */
body.vmm #btn-handbook-close,
body.vmm .btn-handbook-ctrl,
body.vmm #btn-hb-rank,
body.vmm #btn-hb-marked,
body.vmm #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 */
body.vmm #area-left-bottom, body.vmm #area-right-bottom { flex-shrink: 0; }
body.vmm #hand-1, body.vmm #hand-3 { display: none; }
body.vmm #tray-1, body.vmm #tray-3 { flex-direction: column; gap: 1px; }
body.vmm #area-left .player-tag, body.vmm #area-right .player-tag {
  writing-mode: horizontal-tb;
  /*font-size: calc(5px * var(--ts));*/
  letter-spacing: 0;
}

/* Wall strips: slimmer */
body.vmm .wall-strip-v { width: 8px; }
body.vmm .wall-seg     { width: 6px; height: 8px; }
body.vmm .wall-strip-v .wall-seg { width: 8px; height: 6px; }

/* Hand + tray: 2-row column-flow, scroll horizontally beyond that */
body.vmm #hand-0 {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: calc(var(--tile-h) * 2 + 6px);
  overflow-x: auto;
  overflow-y: hidden;
  align-content: safe center;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  margin: 0 12px 4px;
  scrollbar-width: none;
}
body.vmm #hand-0:has(.selected) { padding-top: calc(var(--tile-h) * 0.20); }
body.vmm #hand-0::-webkit-scrollbar { display: none; }
body.vmm #tray-0 {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: calc(var(--tile-h) * 2 + 6px);
  overflow-x: auto;
  overflow-y: hidden;
  align-content: safe center;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  margin: 0 12px;
  scrollbar-width: none;
}
body.vmm #tray-0::-webkit-scrollbar { display: none; }

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

/* Status bar: [nick -------; · deck -------; · HOME] row 1, phase row 2 */
body.vmm #status-bar { font-size: calc(6px * var(--ts)); display: flex; flex-direction: row; flex-wrap: wrap; height: auto; min-height: auto; padding: 4px 8px 5px; gap: 2px 6px; align-items: center; }
body.vmm #status-nick { order: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
body.vmm #status-phase { order: 3; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-dim); }
body.vmm .status-right { order: 2; margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.vmm #btn-home { font-size: calc(8px * var(--ts)); padding: 3px 10px; width: auto; }

/* Overlays: full-screen on small devices */
/* handbook-modal sizing handled by body.vmm/hmm rules ------; see MM section */
body.vmm #leaderboard-modal { width: 100vw; max-width: 100vw; }
body.vmm #kb-help-modal     { width: 94vw; }
body.vmm #winner-box        { width: 88vw; }

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

/* DR name bar: input full width, buttons wrap to next row */
body.vmm .dr-name-bar { flex-wrap: wrap; }
body.vmm .dr-pack-name-input { flex: 1 1 100%; }
body.vmm .dr-reset-confirm { flex-wrap: wrap; }
body.vmm .dr-reset-confirm-msg { white-space: normal; }

/* ---; DR accordion rules moved to body.vmm selectors below ---; */

/* ---------------------------------------------------------------------------------------------------------
   MOBILE -- landscape phone (hMM), height <= 500px, any orientation: landscape.
   Covers all phones held horizontally regardless of pixel width.
   Convention: media query = pre-JS global chrome only. body.hmm = everything
   else (game board + all post-load screens/overlays). See docs/guide/modes.md.
----------------------------------------------------------------------------------------------------------- */
/* Global chrome (main menu / auth / settings) sized by viewport height only —
   visible before ui_init.js runs, kept as a media query to avoid a FOUC flash.
   Game-board rules live under body.hmm below. */
@media (max-height: 500px) and (orientation: landscape) {

  :root {
    --font-base-sm: 16px;
    --font-base-md: 20px;
    --font-base-lg: 24px;
    --font-base-xl: 28px;
  }

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

  .setting-row { flex-direction: column; align-items: center; gap: 4px; }
  .setting-row input,
  .setting-row .btn-action,
  .setting-row .sound-ctrl { width: 100%; }
  .settings-col  { align-items: center; }

  .btn-menu { min-height: 36px; box-sizing: border-box; font-size: calc(8px * var(--ts)); padding: calc(8px * var(--ts)) calc(18px * var(--ts)); min-width: 0; }
  .btn-menu.btn-sm { width: auto; min-height: 36px; font-size: calc(7px * var(--ts)); padding: 8px 16px; }
  .btn-menu.btn-creative { font-size: calc(8px * var(--ts)); padding: calc(8px * var(--ts)) calc(18px * var(--ts)); }
  #mm-nav-bubble-btn, #btn-support-bubble { padding: calc(8px * var(--ts)); min-height: 0; font-size: 0; letter-spacing: 0; }
}

/* --- hMM (Horizontal Mobile Mode) — game-board + post-load screens ------- */
body.hmm {
  --tile-w: clamp(16px, 3.5vh, 26px);
}

body.hmm #area-upper { display: none; }
body.hmm #area-top, body.hmm #area-left, body.hmm #area-right, body.hmm #area-center { display: none; }
/* Wall strips are blank in hMM (mat is in popup) -- hide them. */
body.hmm #wall-top, body.hmm #wall-bottom { display: none; }
body.hmm .btn-mobile-only { display: inline-flex !important; align-items: center; justify-content: center; }

/* Restore areas ------; same overrides as vMM */
body.hmm #mobile-panel-body #area-top,
body.hmm #mobile-panel-body #area-left,
body.hmm #mobile-panel-body #area-right {
  position: static !important; width: 100% !important; height: auto !important;
  overflow: visible !important; display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 4px !important;
  flex-shrink: 1 !important; align-self: auto !important;
}
body.hmm #mobile-panel-body #opp-comp-top,
body.hmm #mobile-panel-body #opp-comp-left,
body.hmm #mobile-panel-body #opp-comp-right {
  position: static !important; transform: none !important;
  width: 100% !important; height: auto !important; overflow: visible !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; padding: 0 !important;
}
body.hmm #mobile-panel-body #hand-1,
body.hmm #mobile-panel-body #hand-2,
body.hmm #mobile-panel-body #hand-3 { display: flex !important; width: 100% !important; max-height: none !important; flex-wrap: wrap !important; }
body.hmm #mobile-panel-body #tray-1,
body.hmm #mobile-panel-body #tray-2,
body.hmm #mobile-panel-body #tray-3 { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; }
body.hmm #mobile-panel-body #field-area { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }
body.hmm #mobile-panel-body .mm-others-row  { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
body.hmm #mobile-panel-body .mm-player-col  { display: flex; flex-direction: column; width: 100%; gap: 4px; }

/* Status bar stays top; board fills remaining space and centers content */
body.hmm #screen-game.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
  overflow: hidden;
}
body.hmm #board { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* Tighten area-bottom in vMM ------; remove excess bottom safe-area padding (nav covers that) */
body.hmm #area-bottom { gap: 2px; padding: 2px 0 2px; }
body.hmm #tray-0 { display: none; }   /* hide own tray in hMM -- saves vertical space */
body.hmm #controls { flex-wrap: wrap; padding: 2px 4px; gap: 3px; }

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

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

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

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

/* Hand: single row, scroll horizontally if tiles overflow */
body.hmm #hand-0 {
  flex-wrap: nowrap;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  margin: 0 12px;
  scrollbar-width: none;
}
body.hmm #hand-0:has(.selected) { padding-top: calc(var(--tile-h) * 0.20); }
body.hmm #hand-0::-webkit-scrollbar { display: none; }

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

/* Overlays: full-screen */
/* handbook-modal sizing handled by body.vmm/hmm rules ------; see MM section */
body.hmm #leaderboard-modal { width: 100vw; max-width: 100vw; }
body.hmm #kb-help-modal     { width: 94vw; }
body.hmm #winner-box        { width: 88vw; }

/* MP screens */
body.hmm .mp-card, body.hmm .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: calc(clamp(18px, min(2.05vw, 4.25vh), 34px) * var(--tile-factor));
}
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,
body.text-sm #btn-hb-assist    { padding: 4px 6px; }

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

body.text-lg {
  --ts:     1.50;
  --tile-w: calc(clamp(30px, min(3.4vw, 7.0vh), 60px) * var(--tile-factor));
}
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: calc(clamp(36px, min(4.1vw, 8.5vh), 74px) * var(--tile-factor));
}
body.text-xl .setting-select,
body.text-xl .settings-card input,
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: 4px 10px; }

/* 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);
}
/* text-size mobile (vmm/hmm) --ts overrides are injected by applyAdminTsOverrides() in store.js */


#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;
  margin: 0 8px;
}
#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; }

body.vmm #settings-dropup {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(2px * var(--ts)) calc(4px * var(--ts)) calc(6px * var(--ts));
}

/* hMM: full-screen slide-in panel from right, over everything */
body.hmm #settings-dropup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: max-content;
  max-width: min(90vw, 500px);
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) 16px;
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--gold);
  background: var(--dark);
  color: var(--tx-on-dark);
  box-shadow: -8px 0 24px color-mix(in srgb, var(--dark) 60%, transparent);
  z-index: 500;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  box-sizing: border-box;
}
/* ts-row and danger button span both columns */
body.hmm #settings-dropup .dropup-ts-row,
body.hmm #settings-dropup .btn-danger {
  grid-column: 1 / -1;
}
/* Shown state ------; JS removes .hidden, we use :not(.hidden) to animate in */
body.hmm #settings-dropup:not(.hidden) {
  transform: translateX(0);
}
body.hmm #settings-dropup.hidden {
  display: flex !important;   /* keep in DOM for transition; hidden via transform */
  transform: translateX(100%);
  pointer-events: none;
}
/* Backdrop */
body.hmm #settings-dropup:not(.hidden)::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: -1;
  pointer-events: none;
}
body.hmm #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); }

/* ---; In-game settings dropup: text-size row ------------------------------------------ */
.dropup-ts-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 2px;
}
.dropup-ts-label {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  margin-right: 2px;
  white-space: nowrap;
}

/* --- Announce toast ---------------------------------------------------------; */
#announce-toast {
  align-self: center;
  background: rgba(10,10,10,.90);
  color: var(--gold-lt);
  border: 1px solid var(--gold);
  padding: 5px 16px;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 1px;
  text-align: center;
  max-width: 80vw;
  pointer-events: none;
  transition: opacity 0.42s;
}
#announce-toast.toast-fade { opacity: 0; }
#announce-toast.hidden { display: none !important; }
/* When announcements are ON, reserve the space even when empty */
#announce-toast.announce-on.hidden { display: block !important; visibility: hidden; }

/* --- 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; }
}
/* Store/rules overlays are never visible pre-JS (only reached after nav) --
   migrated to body.vmm per the vMM/hMM convention (see modes.md). */
body.vmm .store-catalog { grid-template-columns: repeat(2, 1fr); }
body.vmm #store-detail-modal { width: 100vw; max-width: 100vw; max-height: 95vh; border-radius: 10px 10px 0 0; align-self: flex-end; }
body.vmm #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: 0px 8px 16px;
  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; }

/* ---; Accordion headers (hidden on desktop/hMM; vMM only) ------------ */
.dr-acc-hdr { display: none; }
.acct-acc-hdr { display: none; }

/* ---; Account tab strip (BM / hMM) ------------------------------------------------; */
.acct-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: fit-content;
  max-width: calc(100vw - 16px);
}
.acct-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;
}
.acct-tab:hover  { background: var(--mat); color: var(--tx); }
.acct-tab-active { background: var(--gold) !important; color: var(--dark) !important; }

/* ---; Account accordion (body.vmm only) ---------------------------------------- */
body.vmm .acct-tabs { display: none; }
body.vmm #screen-account { gap: 0; }
body.vmm #screen-account .acct-acc-hdr { margin-top: 2px; }
body.vmm #screen-account .acct-acc-hdr:first-of-type { margin-top: 0; }
body.vmm #screen-account .settings-card { width: 100% !important; box-shadow: none; }
body.vmm #btn-account-back { display: none; }
body.hmm #btn-account-back { display: none; }
body.vmm #btn-store-back { display: none; }
body.hmm #btn-store-back { display: none; }
body.hmm #screen-account .settings-card { max-width: calc(100vw - var(--mm-nav-w, 0px) - 32px); }
body.vmm #acct-username { padding-bottom: 8px; }
body.vmm #btn-acct-change-pw { margin-top: 12px; }
body.vmm .acct-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 2px 0 0;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}
body.vmm .acct-acc-hdr-open {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
body.vmm .acct-acc-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: calc(14px * var(--ts));
}
body.vmm .acct-acc-hdr-open .acct-acc-chevron { transform: rotate(180deg); }
body.vmm .acct-panel.hidden { display: block !important; }
body.vmm .acct-panel {
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 2px 0 2px !important;
  border-radius: 0 !important;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
body.vmm .acct-panel:last-of-type {
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
  margin-bottom: 8px;
}
body.vmm .acct-panel.acct-acc-open {
  max-height: 4000px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !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; }

/* Inline mute toggles inside ambient section labels */
.dr-amb-mute-btn {
  margin-left: auto;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-dim);
  background: transparent;
  border: 1px solid var(--bd-sub);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 1.4;
  transition: color .15s, border-color .15s, background .15s;
}
.dr-amb-mute-btn:hover { color: var(--tx); border-color: var(--bd); }
.dr-amb-mute-btn.dr-muted { color: var(--warn, #c55); border-color: var(--warn, #c55); }

/* --- Section hint tooltips ----------------------------------------------- */
.dr-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(7px * var(--ts) + 0.5em);
  height: calc(7px * var(--ts) + 0.5em);
  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) ------------------------------------------- */
/* BM/hMM: split ambience content into two distinct grouped "bubbles"       */
.dr-amb-bubble {
  background: var(--bg);
  border: 1px solid var(--mat-border);
  border-radius: var(--radius-panel);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.dr-amb-bubble-tabs { padding-top: 10px; }
/* vMM: bubbles read as heavy nested cards inside the accordion — flatten to
   a plain block plus a clear divider/heading instead of a boxed bubble. */
body.vmm .dr-amb-bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
body.vmm .dr-amb-bubble-global {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--mat-border);
}
.dr-amb-tabs-hdr {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1.5px;
  color: var(--tx-sub);
  margin: 4px 0 4px;
}
.dr-amb-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--mat);
  border: 1px solid var(--mat-border);
  border-radius: var(--radius-panel);
}
.dr-amb-tab {
  flex: 1;
  font-family: var(--font);
  font-size: calc(8.5px * var(--ts));
  letter-spacing: 1px;
  color: var(--tx-sub);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dr-amb-tab:hover       { background: var(--bg); color: var(--tx); }
.dr-amb-tab-active      { background: var(--gold) !important; color: var(--dark) !important; border-color: var(--gold) !important; font-weight: bold; }
.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; }

/* Sprite-pop lock state: greys out whichever control (global vs local) isn't
   the one currently governing playback, per drAmbChange/_drSyncGlobalPopButton. */
.dr-style-btn.dr-pop-locked {
  opacity: .5;
  cursor: not-allowed;
  font-style: italic;
}
.dr-style-btn.dr-pop-locked:hover { background: transparent; }

/* --- Preset swatch grid --------------------------------------------------- */
.dr-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 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;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
}

/* --- 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;
}
body.vmm .dr-palette-group-grid,
body.hmm .dr-palette-group-grid {
  grid-template-columns: 1fr;
}
body.hmm .dr-palette-group-grid {
  grid-template-columns: repeat(2, max-content);
  gap: 4px 16px;
}
body.hmm .dr-color-full-row .dr-hex-input { width: 9ch; min-width: 9ch; }
body.vmm .dr-color-full-row,
body.hmm .dr-color-full-row {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 2px 6px;
  width: auto;
}
body.vmm .dr-color-full-row .dr-color-label,
body.hmm .dr-color-full-row .dr-color-label {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.vmm .dr-color-full-row .dr-color-pick,
body.hmm .dr-color-full-row .dr-color-pick  { grid-column: 1; grid-row: 2; }
body.vmm .dr-color-full-row .dr-hex-input,
body.hmm .dr-color-full-row .dr-hex-input   { grid-column: 2; grid-row: 2; width: 9ch; min-width: 9ch; }
.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;
  width: max-content;
}

/* --- 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(96px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
/* Dim pattern grid when mat ambience is active (trade-off) */
.dr-grid-muted {
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 0.2s;
}
.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;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
}

/* --- 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: center;
  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;
}

/* vMM: preview can overflow ------; make it scrollable, hide the bar, fade edges */
body.vmm .dr-tile-live-preview {
  width: calc(100vw - 32px);
  overflow-x: auto;
  overflow-y: visible;
  justify-content: flex-start;
  scrollbar-width: none;
}
body.vmm .dr-tile-live-preview::-webkit-scrollbar { display: none; }
body.vmm .dr-tile-live-preview .tile { flex-shrink: 0; }

/* --- 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;
}

/* Inline reset confirmation bar */
.dr-reset-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(580px, calc(100vw - 16px));
  margin: -6px 8px 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--red, #8B1A1A) 12%, transparent);
  border: 1px solid var(--red, #8B1A1A);
  border-radius: 4px;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  letter-spacing: 1px;
}
.dr-reset-confirm.hidden { display: none; }
.dr-reset-confirm-msg { color: var(--tx-sub); white-space: nowrap; flex: 1; }
.dr-reset-snooze {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: calc(6px * var(--ts));
  color: var(--tx-sub);
  white-space: nowrap;
  cursor: pointer;
}

/* --- 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 1 min(200px, 80vw);
  min-width: min(200px, 80vw);
  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);
  box-sizing: border-box;
}
.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: "N"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-E .ti::before { content: "E"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-S .ti::before { content: "S"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-W .ti::before { content: "W"; font-size: calc(var(--tile-w) * 0.52); color: var(--wind); }
.tiles-calligraphy .tile-J .ti::before { content: "J"; font-size: calc(var(--tile-w) * 0.54); color: var(--joker); }
.tiles-calligraphy .tile-F .ti::before { content: "F"; 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: "Z"; 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: "N"; 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: "E"; 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: "S"; 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: "W"; 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: "J"; 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: "F"; 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: "Z"; 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: "N"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-E .ti::before { content: "E"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-S .ti::before { content: "S"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-W .ti::before { content: "W"; font-size: calc(var(--tile-w) * 0.54); color: var(--wind); }
.tiles-sketch .tile-J .ti::before { content: "J"; font-size: calc(var(--tile-w) * 0.52); color: var(--joker); }
.tiles-sketch .tile-F .ti::before { content: "F"; 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: "Z"; 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); }
.dr-style-btn.creator-only-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* --- 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)
--------------------------------------------------------------------------------------------------------- */

/* Mag button ------; now lives in the adaptors drawer -------------- */
#mag-hud-btn.mag-btn-on {
  background: var(--accent, #00ccaa) !important;
  border-color: var(--accent, #00ccaa) !important;
  color: var(--bg, #1a1a2e);
}

/* Hide the OS cursor while the magnifier lens is active ------ */
body.mag-active,
body.mag-active * { cursor: none !important; }

/* 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;

}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   MM TOP BAR ------; #mm-topbar
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

:root {
  --mm-topbar-h: 48px;
}

#mm-topbar {
  display: none;  /* hidden until BM or MM class activates it */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 140;
  flex-direction: row;
  align-items: center;
  background: var(--dark);
  border-bottom: 2px solid var(--gold);
  height: calc(var(--mm-topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: max(env(safe-area-inset-left), 8px);
  padding-right: max(env(safe-area-inset-right), 8px);
  box-sizing: border-box;
}

/* BM: show topbar, add body padding, hide the minor-button panel */
body:not(.vmm):not(.hmm) #mm-topbar { display: flex; }
body:not(.vmm):not(.hmm) { padding-top: calc(var(--mm-topbar-h) + env(safe-area-inset-top)); }
body:not(.vmm):not(.hmm) .menu-panel-minor { display: none !important; }

/* BM topbar buttons: hide in MM (those slots are in the drawer) */
body.vmm #main-welcome,
body.hmm #main-welcome { display: none !important; }

body.vmm #mm-topbar,
body.hmm #mm-topbar {
  display: flex;
}

/* Hide topbar on screens where nav is hidden (game, auth, etc.) */
body:not(.vmm):not(.hmm) #mm-topbar.mm-nav-hidden,
body.vmm #mm-topbar.mm-nav-hidden,
body.hmm #mm-topbar.mm-nav-hidden {
  display: none !important;
}
/* BM: remove ghost body padding when topbar is hidden */
body:not(.vmm):not(.hmm):has(#mm-topbar.mm-nav-hidden) { padding-top: 0; }

.mm-topbar-btn {
  background: none;
  border: none;
  color: var(--light);
  font-size: calc(8px * var(--ts));
  padding: 6px 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-topbar-btn:active { color: var(--gold); }

.mm-topbar-title {
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.05em;
  pointer-events: auto;
}
body.vmm .mm-topbar-title {
  left: clamp(36%, calc(50% - (var(--ts) - 2.35) * 15%), 50%);
}
/* BM: larger title ------; MM keeps its compact size above */
body:not(.vmm):not(.hmm) .mm-topbar-title {
  /* font-size: clamp(14px, 2.2vw, 22px); */
  font-size: calc(8px * var(--ts));
  letter-spacing: 0.12em;
}

.mm-topbar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Push screen content below topbar in MM */
body.vmm .screen.active {
  padding-top: calc(var(--mm-topbar-h) + env(safe-area-inset-top)) !important;
  box-sizing: border-box;
}
body.hmm .screen.active {
  padding-top: calc(var(--mm-topbar-h) + env(safe-area-inset-top) + 8px) !important;
  box-sizing: border-box;
}

/* Game screen manages its own top spacing */
body.vmm #screen-game,
body.hmm #screen-game {
  padding-top: 0 !important;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   MM DRAWER ------; #mm-drawer
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

#mm-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 970;
  pointer-events: none;
}

body.vmm #mm-drawer,
body.hmm #mm-drawer,
body:not(.vmm):not(.hmm) #mm-drawer {
  display: block;
}

#mm-drawer.mm-drawer-open {
  pointer-events: auto;
}

#mm-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}

#mm-drawer.mm-drawer-open #mm-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

#mm-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 80vw);
  background: var(--bg-card);
  border-right: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  box-sizing: border-box;
  overflow-y: auto;
}

#mm-drawer.mm-drawer-open #mm-drawer-panel {
  transform: translateX(0);
}

.mm-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--mid) 30%, var(--bg-card));
  flex-shrink: 0;
}

.mm-drawer-title {
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  color: var(--gold);
}

.mm-drawer-body {
  display: flex;
  flex-direction: column;
  padding: 8px 0 calc(20px + env(safe-area-inset-bottom));
}

.mm-drawer-item {
  background: none;
  border: none;
  color: var(--tx);
  font-family: var(--font);
  font-size: calc(6.5px * var(--ts));
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, color 0.1s;
  min-height: 44px;
}

.mm-drawer-item:active {
  background: color-mix(in srgb, var(--gold) 15%, var(--bg-card));
  color: var(--gold);
}

.mm-drawer-item.hidden { display: none; }

.mm-drawer-item-sm {
  font-size: calc(5.5px * var(--ts));
  color: var(--tx-sub);
  padding: 8px 20px;
  min-height: 36px;
}

.mm-drawer-divider {
  height: 1px;
  background: color-mix(in srgb, var(--mid) 25%, var(--bg-card));
  margin: 6px 16px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   MM BOTTOM NAV ------; #mm-nav
   Hidden by default; shown when body.vmm or body.hmm is set.
   Screens in MM_NAV_HIDDEN_SCREENS (JS) add .mm-nav-hidden.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

:root {
  --mm-nav-h: 64px;   /* base tab-bar height (before safe-area) */
  --mm-nav-w: 60px;   /* hMM vertical rail width */
}

/* ----- Persistent bubble (bottom-left, both MM modes) ----- */
#mm-nav {
  display: none;
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 16px);
  left: max(env(safe-area-inset-left), 16px);
  z-index: 152;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

body.vmm #mm-nav,
body.hmm #mm-nav { display: flex; }

#mm-nav-bubble-btn {
  border-radius: 50%;
  min-width: 0;
  width: auto;
  padding: calc(4px * var(--ts));
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  box-shadow: 0 4px 0 var(--shadow), 0 2px 12px color-mix(in srgb, var(--dark) 40%, transparent);
}
#mm-nav-bubble-btn svg {
  width: calc(16px * var(--ts));
  height: calc(16px * var(--ts));
  display: block;
  flex-shrink: 0;
}

/* ----- Backdrop ----- */
#mm-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgba(0,0,0,0.45);
}
#mm-nav-backdrop.open { display: block; }

/* ----- Drawer panel ----- */
#mm-nav-drawer {
  display: none;
  position: fixed;
  z-index: 151;
  background: var(--dark);
  border: 2px solid var(--gold);
  border-radius: 26px;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 0 var(--shadow), 0 2px 12px color-mix(in srgb, var(--dark) 40%, transparent);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
  padding: 10px 0;
  box-sizing: border-box;
  max-width: min(350px, 66vw);
  transform-origin: bottom left;
}

body.vmm #mm-nav-drawer {
  display: flex;
  bottom: max(env(safe-area-inset-bottom), 16px);
  left: max(env(safe-area-inset-left), 16px);
  transform: scale(0.05);
  opacity: 0;
  pointer-events: none;
}
body.vmm #mm-nav-drawer.open { transform: scale(1); opacity: 1; pointer-events: auto; }

body.hmm #mm-nav-drawer {
  display: flex;
  bottom: max(env(safe-area-inset-bottom), 16px);
  left: max(env(safe-area-inset-left), 16px);
  transform: scale(0.05);
  opacity: 0;
  pointer-events: none;
}
body.hmm #mm-nav-drawer.open { transform: scale(1); opacity: 1; pointer-events: auto; }

/* Tabs inside drawer: horizontal rows */
#mm-nav-drawer .mm-nav-tab {
  flex: none;
  flex-direction: row;
  justify-content: flex-start;
  gap: calc(8px * var(--ts));
  padding: calc(7px * var(--ts)) calc(14px * var(--ts)) calc(7px * var(--ts)) calc(10px * var(--ts));
  width: 100%;
  font-size: calc(8px * var(--ts));
}
#mm-nav-drawer .mm-nav-label { font-size: calc(8px * var(--ts)); }
#mm-nav-drawer .mm-nav-icon svg {
  width: calc(16px * var(--ts));
  height: calc(16px * var(--ts));
  display: block;
}
/* Active indicator in drawer: left edge bar */
#mm-nav-drawer .mm-nav-tab-active::before {
  top: 15%; bottom: 15%;
  left: 0; right: auto;
  width: 2px; height: auto;
  border-radius: 0 2px 2px 0;
}
body.hmm #mm-nav-drawer .mm-nav-tab {
  padding: calc(3px * var(--ts)) calc(14px * var(--ts)) calc(3px * var(--ts)) calc(10px * var(--ts));
}

/* ---; vMM: restore notch-aware padding-top on status-bar
   (the body.vmm #status-bar rule above sets a flat padding; this override wins by source order) ---; */
body.vmm #status-bar {
  padding-top: max(env(safe-area-inset-top), 6px);
}

/* ---; hMM: allow status-bar to grow to fit safe-area-inset-top
   (the body.hmm #status-bar rule above pins height:26px, trimming it in PWA standalone) ---; */
body.hmm #status-bar {
  height: auto;
  min-height: 26px;
  padding-top: max(env(safe-area-inset-top), 6px);
  padding-bottom: 4px;
}

/* ---; hMM reverse landscape: notch is on the RIGHT, no left inset needed ---; */
body.hmm.hmm-rl #mm-nav {
  left: 16px;
}

/* vMM bubble: bottom-left (already set in base rule, no override needed) */

/* hMM reverse landscape: notch on right — keep standard left offset */
body.hmm.hmm-rl #mm-nav,
body.hmm.hmm-rl #mm-nav-drawer { left: 16px; }

#mm-nav.mm-nav-hidden { display: none !important; }
#mm-nav.mm-nav-drawer-open { display: none !important; }

.mm-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: color-mix(in srgb, var(--light) 55%, var(--dark));
  font-family: var(--font);
  font-size: calc(5px * var(--ts));
  cursor: pointer;
  padding: 4px 10px;
  box-sizing: border-box;
  transition: color 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mm-nav-tab.hidden { display: none; }

.mm-nav-tab:active {
  color: var(--gold-lt);
}

.mm-nav-tab-active {
  color: var(--gold);
}

.mm-nav-icon {
  font-size: calc(14px * var(--ts));
  line-height: 1;
  display: block;
}
.mm-nav-icon svg,
.mm-topbar-btn svg { display: block; pointer-events: none; }

.mm-nav-label {
  font-family: var(--font);
  font-size: calc(4.5px * var(--ts));
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Active tab accent bar */
.mm-nav-tab-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
}

/* hMM: accent on right edge instead of top */
body.hmm .mm-nav-tab-active::before {
  top: 15%;
  bottom: 15%;
  right: 0;
  left: auto;
  width: 2px;
  height: auto;
  border-radius: 2px 0 0 2px;
}

.mm-nav-tab { position: relative; }

/* 2-column row for paired quick-settings in the play sheet */
.mm-sheet-row-2col {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}
/* Each pair (Jokers, Blanks) renders label+spinner tight and inline —
   NOT space-between (which pushes them apart to the half-column's edges)
   and NOT wrapped onto two lines. Prefixed with #mm-play-sheet-panel so
   this reliably outranks the generic "#mm-play-sheet-panel .setting-row"
   rule below (an id+class selector always wins over a plain 2-class
   selector regardless of source order). */
#mm-play-sheet-panel .mm-sheet-row-2col .setting-row {
  flex: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* body.hmm .setting-row sets flex-wrap:wrap !important (for the main
   Settings screen columns) which otherwise beats the nowrap rule above
   regardless of selector specificity ------; re-assert nowrap for the play
   sheet's Jokers/Blanks pair so they stay inline instead of stacking. */
body.hmm #mm-play-sheet-panel .mm-sheet-row-2col .setting-row {
  flex-wrap: nowrap !important;
}
.mm-sheet-row-2col .setting-label {
  font-size: calc(5px * var(--ts));
  white-space: nowrap;
}
/* Play sheet: compact setting rows ------; inline label+control, tighter gap */
#mm-play-sheet-panel .setting-row {
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
}
#mm-play-sheet-panel .setting-label {
  font-size: calc(6px * var(--ts));
  letter-spacing: 1px;
  min-width: 0;
  white-space: nowrap;
}
#mm-play-sheet-panel .setting-select {
  font-family: var(--font);
  font-size: calc(6px * var(--ts));
  padding: 5px 6px;
  background: var(--surf-input, var(--bg));
  border: 2px solid var(--bd, var(--mid));
  color: var(--tx);
  border-radius: var(--radius-input);
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* Resume / More Settings / Play buttons stretch to the panel's full width
   (flex column default align-items:stretch) — force icon+text to render as
   a centered inline-flex row so they don't end up hugging the left edge.
   Also override .btn-menu's screen-scale padding/min-width (36px*ts side
   padding, min-width 200px*ts) which is sized for full BM screen buttons
   and overflows this compact popup at larger text-scale settings. */
#mm-play-sheet-panel .btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: calc(10px * var(--ts)) calc(14px * var(--ts));
}

/* Spinner inside play sheet ------; match main settings style */
#mm-play-sheet-panel .spinner {
  display: flex;
  align-items: center;
  gap: 2px;
}
#mm-play-sheet-panel .spinner input[type="number"] {
  width: 36px;
  text-align: center;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  background: var(--bg);
  color: var(--tx);
  border: 1px solid var(--mid);
  border-radius: var(--radius-input);
  padding: 4px 2px;
  -moz-appearance: textfield;
}
#mm-play-sheet-panel .spinner input[type="number"]::-webkit-outer-spin-button,
#mm-play-sheet-panel .spinner input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#mm-play-sheet-panel .spin-btn {
  font-family: var(--font);
  font-size: calc(8px * var(--ts));
  padding: 4px 8px;
  background: var(--dark);
  color: var(--light);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  touch-action: manipulation;
  min-height: 32px;
  min-width: 28px;
}

/* ---; vMM game screen overrides ---------------------------------------------------- */
body.vmm.mm-nav-showing .screen.active {
  padding-bottom: calc(var(--mm-nav-h) + max(env(safe-area-inset-bottom), 8px) + 8px) !important;
  box-sizing: border-box;
}
body.hmm.mm-nav-showing .screen.active {
  padding-left: calc(var(--mm-nav-w) + 4px) !important;
  padding-top: max(env(safe-area-inset-top), 8px) !important;
  box-sizing: border-box;
}

body.vmm #dr-bottom-nav,
body.hmm #dr-bottom-nav { display: none !important; }

body.hmm #btn-multiplayer { display: none !important; }

/* ---; screen-main: hide the old stacked-button layout everywhere ------------------;
   Play/DR/Store/Account/Resume/Support are now tiles in #mm-home-tile-grid,
   in BM as well as vMM/hMM. */
#screen-main #btn-play,
#screen-main #btn-multiplayer,
#screen-main #btn-resume,
#screen-main #creative-drawer-wrap,
#screen-main #btn-support-bubble {
  display: none !important;
}

/* These stay BM-only (menu-panel-minor / settings / bg-toggle have no MM
   tile equivalent — they still live in the MM nav drawer instead). */
body.vmm #screen-main .menu-panel-main,
body.hmm #screen-main .menu-panel-main,
body.vmm #screen-main .menu-panel-minor,
body.hmm #screen-main .menu-panel-minor,
body.vmm #screen-main #btn-settings,
body.hmm #screen-main #btn-settings,
body.vmm #screen-main #btn-bg-toggle,
body.hmm #screen-main #btn-bg-toggle {
  display: none !important;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   HOME TILE GRID ------; #mm-home-tile-grid (screen-main, ALL modes)
   Grid-template-areas computed at runtime by _mmHomeTilesApply() in ui_init.js.
   BM and hMM share a 6-row x 8-col layout; vMM uses 8-row x 6-col.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

.mm-tile-grid {
  display: grid;
  position: relative;
  z-index: 10;
  gap: calc(8px * var(--ts));
  justify-content: center;
  align-content: center;
}

/* BM: ~15% smaller than the original 48x36, same aspect ratio */
body:not(.vmm):not(.hmm) #mm-home-tile-grid {
  grid-template-columns: repeat(8, calc(2.2vw * var(--ts)));
  grid-template-rows:    repeat(6, calc(1.5vw * var(--ts)));
}
@media (max-width: 1450px) {
  body:not(.vmm):not(.hmm) #mm-home-tile-grid {
    grid-template-columns: repeat(8, calc(3vw * var(--ts)));
    grid-template-rows:    repeat(6, calc(2vw * var(--ts)));
  }
}
@media (max-width: 1250px) {
  body:not(.vmm):not(.hmm) #mm-home-tile-grid {
    grid-template-columns: repeat(8, calc(3.5vw * var(--ts)));
    grid-template-rows:    repeat(6, calc(2.5vw * var(--ts)));
  }
}
@media (max-width: 935px) {
  body:not(.vmm):not(.hmm) #mm-home-tile-grid {
    grid-template-columns: repeat(8, calc(4.5vw * var(--ts)));
    grid-template-rows:    repeat(6, calc(3.5vw * var(--ts)));
  }
}

/* vMM: smaller in both dimensions than BM's scale-down (more headroom for the tile grid) */
body.vmm #mm-home-tile-grid {
  grid-template-columns: repeat(6, calc(3.5vw * var(--ts)));
  grid-template-rows:    repeat(8, calc(4vw * var(--ts)));
  gap: calc(4px * var(--ts));
}

/* hMM: width similar to before, but height cut further — landscape phones
   have very little vertical room. Tiles switch to inline icon+label
   (row layout) below since a squashed column layout can't fit both. */
body.hmm #mm-home-tile-grid {
  grid-template-columns: repeat(8, calc(3vw * var(--ts)));
  grid-template-rows:    repeat(6, calc(0.8vw * var(--ts)));
  gap: calc(4px * var(--ts));
  padding-top: 8px;
}

.mm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ts));
  background: var(--bg-card);
  border: 2px solid var(--dark);
  border-radius: var(--radius-card);
  box-shadow: 3px 3px 0 var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .1s, box-shadow .1s;
  overflow: hidden;
  font-family: inherit;
  font-weight: bold;
  font-size: calc(8.5px * var(--ts));
  letter-spacing: 0.09em;
  text-align: center;
  line-height: 1.2;
  color: var(--tx);
  padding: 0;
}
body.vmm .mm-tile {
  gap: calc(3px * var(--ts));
  font-size: calc(4px * var(--ts));
}
/* hMM: icon + label side-by-side (row) instead of stacked — a stacked
   layout can't fit inside such a short cell. */
body.hmm .mm-tile {
  flex-direction: row;
  gap: calc(3px * var(--ts));
  font-size: calc(4px * var(--ts));
  padding: 0 calc(3px * var(--ts));
}
.mm-tile:active:not(#mm-tile-qp):not(#mm-tile-qb) { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow); }
/* qp/qb are two DOM buttons drawn as one merged L tile — ui_init.js keeps
   their press state in sync via a shared class so they animate together
   instead of only the one actually clicked/touched. */
.mm-tile.qp-pressed { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow); }
.mm-tile svg { width: calc(20px * var(--ts)); height: calc(20px * var(--ts)); flex-shrink: 0; color: var(--dark); }
body.vmm .mm-tile svg {
  width: calc(9px * var(--ts)); height: calc(9px * var(--ts));
}
body.hmm .mm-tile svg {
  width: calc(8px * var(--ts)); height: calc(8px * var(--ts));
}
.mm-tile.label-hidden .tile-label { display: none; }

.mm-tile.primary { background: var(--dark); border-color: var(--gold); box-shadow: 3px 3px 0 color-mix(in srgb, var(--gold) 55%, var(--shadow)); color: var(--gold-lt); }
.mm-tile.primary svg { color: var(--gold); }

/* L-shape: Quick Play (top) + its bottom-left continuation render as one
   continuous tile — no seam, no double border on the shared edge.
   --qp-seam-gap is the overlap amount (grid gap + 3px shadow offset) —
   shared by qb's margin/padding AND the fillet below so they always match. */
#mm-tile-qp {
  grid-area: qp;
  /* border-bottom: none; */  /* seam is hidden by qb's margin/padding */
  position: relative;
}
#mm-tile-qp:not(.full-rect) { border-bottom-left-radius: 0; }
#mm-tile-qb {
  grid-area: qb;
  --qp-seam-gap: calc(8px * var(--ts) + 3px);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
  overflow: visible;
  margin-top: calc(-1 * var(--qp-seam-gap));
  padding-top: var(--qp-seam-gap);
}
body.vmm #mm-tile-qb,
body.hmm #mm-tile-qb {
  --qp-seam-gap: calc(4px * var(--ts) + 3px);
}
#mm-tile-qp.full-rect { border-bottom: 2px solid var(--gold); }

/* Inner reflex corner of the L: qb is narrower than qp, so qb's top-right
   corner is where the shape steps inward. Bite a concave fillet there
   (instead of the default outward round) so the edge flows smoothly.
   qb is always .primary (dark bg + gold border) — match those colors.
   Two background layers: the arc sits flush on the visible seam (offset
   down by --qp-seam-gap), and a solid strip above it masks the sliver of
   qb's own right border that would otherwise poke out above the seam. */
#mm-tile-qb:not(.hidden)::before {
  content: "";
  position: absolute;
  top: calc(-0.9 * var(--qp-seam-gap) - 1px);  /* -16.5px at BM's 11px gap — scales with --qp-seam-gap per mode */
  right: calc(-1 * var(--radius-card) - 0px);
  width: calc(var(--radius-card) + 2px);
  height: calc(var(--qp-seam-gap) + var(--radius-card));
  background:
    radial-gradient(circle at bottom right,
      transparent calc(var(--radius-card) - 2px),
      var(--gold) calc(var(--radius-card) - 2px) var(--radius-card),
      var(--dark) var(--radius-card))
      bottom right / calc(var(--radius-card) + 2px) var(--radius-card) no-repeat,
    linear-gradient(var(--dark), var(--dark))
      top right / calc(var(--radius-card) + 2px) calc(var(--qp-seam-gap) + 1px) no-repeat;
  /* box-shadow: 3px 3px 0 color-mix(in srgb, var(--gold) 55%, var(--shadow)); */
  pointer-events: none;
}


#mm-tile-so { grid-area: so; }
#mm-tile-mp { grid-area: mp; }
#mm-tile-su { grid-area: su; }
#mm-tile-dr { grid-area: dr; }
#mm-tile-ac { grid-area: ac; }
#mm-tile-re { grid-area: re; }
#mm-tile-st { grid-area: st; }
#mm-tile-cs { grid-area: cs; }

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   QUICK PLAY POPUP ------; #mm-play-sheet
   BM: centered modal popup. vMM: bottom sheet slide-up. hMM: side sheet
   slide-in. Same markup/JS everywhere — only the container CSS differs.
   Hidden until .mm-play-sheet-open is added by JS (mmPlaySheetOpen()).
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

#mm-play-sheet {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;  /* container never blocks clicks */
}

body.vmm #mm-play-sheet,
body.hmm #mm-play-sheet {
  display: block;
}

#mm-play-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}

/* BM: centered popup modal (not a bottom/side sheet) */
#mm-play-sheet-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(420px, 92vw);
  background: var(--bg-card);
  border: 3px solid var(--gold);
  border-radius: var(--radius-modal);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 8px 8px 0 var(--shadow);
}

/* BM: no drag handle needed on a centered modal */
body:not(.vmm):not(.hmm) #mm-play-sheet-handle {
  display: none;
}

/* Open state */
#mm-play-sheet.mm-play-sheet-open {
  pointer-events: auto;  /* re-enable when open */
}

#mm-play-sheet.mm-play-sheet-open #mm-play-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* BM open state: scale + fade in (matches the closed-state transform above) */
body:not(.vmm):not(.hmm) #mm-play-sheet.mm-play-sheet-open #mm-play-sheet-panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* vMM: bottom sheet slide-up (overrides the BM centered-modal base above) */
body.vmm #mm-play-sheet-panel {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  opacity: 1;
  width: auto;
  max-width: none;
  border: none;
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 80vh;
  box-shadow: none;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
body.vmm #mm-play-sheet.mm-play-sheet-open #mm-play-sheet-panel {
  transform: translateY(0);
}

#mm-play-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--mid);
  border-radius: 2px;
  align-self: center;
  margin-bottom: 4px;
  flex-shrink: 0;
  opacity: 0.5;
}

.mm-sheet-divider {
  height: 1px;
  background: color-mix(in srgb, var(--mid) 30%, var(--bg-card));
  margin: 0;
}

.mm-sheet-mode-row {
  display: flex;
  gap: 8px;
}

.mm-sheet-mode-btn {
  flex: 1;
  font-family: var(--font);
  font-size: calc(7px * var(--ts));
  padding: 10px 4px;
  background: color-mix(in srgb, var(--dark) 8%, var(--bg-card));
  color: var(--tx-sub);
  border: 2px solid color-mix(in srgb, var(--mid) 30%, var(--bg-card));
  border-radius: var(--radius-btn);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.mm-sheet-mode-btn.active {
  background: var(--dark);
  color: var(--gold);
  border-color: var(--gold);
}

#mm-sheet-solo-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row holding More Settings + Play ------; stacked full-width in BM/vMM
   (matches previous behavior), side-by-side in hMM so Play is reachable
   without scrolling the side sheet. */
.mm-sheet-actions-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.hmm .mm-sheet-actions-row {
  flex-direction: row;
  align-items: stretch;
}
body.hmm .mm-sheet-actions-row .btn-menu {
  width: auto;
  min-width: 0;
}
body.hmm .mm-sheet-actions-row #mm-sheet-more-settings-btn {
  flex: 0 1 33%;
  font-size: calc(6px * var(--ts));
  padding-left: calc(6px * var(--ts));
  padding-right: calc(6px * var(--ts));
}
body.hmm .mm-sheet-actions-row #mm-sheet-play-btn {
  flex: 1 1 66%;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   hMM SAFE AREA ------; notch/dynamic island on landscape sides
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

body.hmm .screen.active {
  padding-left:  max(env(safe-area-inset-left),  12px);
  padding-right: max(env(safe-area-inset-right), 12px);
  box-sizing: border-box;
}

/* Keep game screen clear ------; game has its own safe-area handling */
body.hmm #screen-game {
  padding-left:  0;
  padding-right: 0;
}

body.hmm #btn-home { font-size: calc(10px * var(--ts)); padding: 4px 14px; width: auto; }

/* hMM: play sheet slides in from the right instead of up from the bottom */
body.hmm #mm-play-sheet-panel {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: max-content;
  max-width: 90vw;
  max-height: 100vh;
  border-top: none;
  border-left: 2px solid var(--gold);
  border-radius: 0;
  padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 20px) max(env(safe-area-inset-bottom), 16px) 20px;
  transform: translateX(100%);
  opacity: 1;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
}

body.hmm #mm-play-sheet.mm-play-sheet-open #mm-play-sheet-panel {
  transform: translateX(0);
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   MM HANDBOOK ------; topbar + nav awareness
------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* Handbook modal in MM: push down below topbar, extend full height to bottom */
body.vmm #handbook-overlay.hb-modal,
body.hmm #handbook-overlay.hb-modal {
  align-items: stretch;
  padding-top: calc(var(--mm-topbar-h) + env(safe-area-inset-top) + 4px);
  padding-bottom: 0;    /* no bottom padding ------; modal fills to screen edge */
  box-sizing: border-box;
}

body.vmm #handbook-modal,
body.hmm #handbook-modal {
  width: 100vw;
  max-width: 100vw;
  max-height: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Handbook body: scrollable; bottom padding keeps last item above the nav */
body.vmm #handbook-body,
body.hmm #handbook-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(var(--mm-nav-h) + max(env(safe-area-inset-bottom), 8px) + 20px);
}

/* ---; DR accordion (body.vmm only) ---------------------------------------------------- */
body.vmm .dr-name-bar { flex-wrap: wrap; justify-content: center; }
body.vmm .dr-pack-name-input { flex: 1 1 100%; }

/* Ambient slot subtabs ------; scroll horizontally instead of overflowing */
body.vmm .dr-amb-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  padding-bottom: 4px; /* room for scrollbar on some platforms */
}
body.vmm .dr-amb-tab {
  flex-shrink: 0;
}

/* vMM ambient button rows ---- ------ hide; show compact selects instead */
.dr-amb-vmm-sel { display: none; width: 100%; }
body.vmm #dr-amb-intensity-main, body.vmm #dr-amb-intensity-sp,  body.vmm #dr-amb-intensity-mp,
body.vmm #dr-amb-parallax-main,  body.vmm #dr-amb-parallax-sp,  body.vmm #dr-amb-parallax-mp,
body.vmm #dr-amb-scroll-main,    body.vmm #dr-amb-scroll-sp,    body.vmm #dr-amb-scroll-mp,
body.vmm #dr-asfx-row-main,      body.vmm #dr-asfx-row-sp,      body.vmm #dr-asfx-row-mp,
body.vmm #dr-tt-intensity-main,  body.vmm #dr-tt-intensity-sp,  body.vmm #dr-tt-intensity-mp
  { display: none; }
body.vmm .dr-amb-vmm-sel { display: block; }

/* vMM: the accordion card was hugging the sides more than needed — widen it
   (BM/hMM untouched since --dr-width is only overridden inside body.vmm). */
body.vmm #screen-design-room { --dr-width: min(94vw, 720px); }

body.vmm .dr-tabs { display: none; }
body.vmm .dr-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--dr-width), calc(100vw - 16px));
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 0 8px 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}
body.vmm .dr-acc-hdr-open {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
body.vmm .dr-acc-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: calc(14px * var(--ts));
}
body.vmm .dr-acc-hdr-open .dr-acc-chevron {
  transform: rotate(180deg);
}
/* All panels use max-height animation in vMM; must override display:none from .hidden */
body.vmm .dr-panel.hidden {
  display: block !important;
}
body.vmm .dr-panel {
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 2px 0 2px !important;
  border-radius: 0 !important;
  margin: 0 8px;
  width: min(var(--dr-width), calc(100vw - 16px));
  box-sizing: border-box;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
body.vmm .dr-panel:last-of-type {
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
  margin-bottom: 8px;
}
body.vmm .dr-panel.dr-acc-open {
  max-height: 4000px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
}

/* ---; DR layout: hMM ------; uses default BM layout, no overrides ---; */
.dr-hmm-preview { display: none; }
.dr-hmm-back    { display: none; align-items: center; justify-content: center; }
.dr-action-grid { display: contents; }
#dr-hmm-col1, #dr-hmm-col2, #dr-hmm-row2 { display: contents; }

body.hmm .dr-hmm-preview { display: inline-flex; }
body.hmm .dr-hmm-back    { display: inline-flex; }
body.hmm #dr-bottom-nav { display: none; }
body.hmm #dr-top-nav { display: none; }


/* -- Lobby accordion headers & panels (all modes) -- */
.lobby-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: calc(9px * var(--ts));
  letter-spacing: 2px;
  color: var(--tx);
  background: var(--surf-card);
  border: 2px solid var(--bd);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 0 0 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}
.lobby-acc-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: calc(14px * var(--ts));
}
.lobby-acc-hdr-open {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.lobby-acc-hdr-open .lobby-acc-chevron { transform: rotate(180deg); }
.lobby-acc-panel {
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 2px 0 2px !important;
  border-radius: 0 !important;
  margin: 0 0 8px;
  width: 100%;
  box-sizing: border-box;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.lobby-acc-panel.lobby-acc-open {
  max-height: 2000px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-bottom-width: 2px !important;
}

/* -- Lobby dashboard (BM) -- */
#screen-lobby .screen-inner { max-width: 860px; }
.lobby-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right" "leave leave";
  gap: 0 16px;
  width: 100%;
}
.lobby-left-col  { grid-area: left;  display: flex; flex-direction: column; gap: 0; }
.lobby-right-col { grid-area: right; display: flex; flex-direction: column; gap: 0; }
.lobby-dash-leave {
  grid-area: leave;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* auth-hmm-left/right: transparent in BM/vMM */
.auth-hmm-left  { display: contents; }
.auth-hmm-right { display: contents; }

/* -- Auth: hMM 2-col no-scroll layout -- */
body.hmm #screen-auth {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 8px 0;
  gap: 24px;
  overflow: hidden;
  min-height: 100vh;
  height: 100vh;
}
body.hmm #screen-auth .title,
body.hmm #screen-auth .subtitle,
body.hmm #screen-auth #btn-auth-guest { flex-shrink: 0; }
body.hmm #screen-auth .title    { font-size: calc(18px * var(--ts)); }
body.hmm #screen-auth .subtitle { font-size: calc(7px * var(--ts)); margin: 0; }
/* Left col: branding + back button */
body.hmm #screen-auth::before {
  display: none; /* no pseudo magic needed */
}
body.hmm .auth-hmm-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 160px;
}
/* Right col: tabs + card */
body.hmm .auth-hmm-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 1;
  max-width: 500px;
  overflow-y: auto;
  max-height: calc(100vh - 16px);
}
body.hmm .auth-card {
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 16px 24px 24px 20px;
  gap: 10px;
  margin-top: 0;
}
body.hmm .auth-card .setting-row { gap: 12px; }
body.hmm .auth-hmm-right {
  padding-right: 16px;
  padding-bottom: 24px;
}
/* Inline label+input rows in hMM auth */
body.hmm .auth-card .setting-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
body.hmm .auth-card .setting-row input {
  flex: 1;
  width: auto;
  min-width: 0;
}
body.hmm .auth-tabs { width: 100%; max-width: 100%; }
body.hmm .auth-tab  { flex: 1; }
body.hmm #screen-auth .site-legal-links { display: none; }
body.hmm #screen-lobby { padding: 12px 0; }
body.hmm #screen-lobby .screen-inner { max-width: none; padding-right: 8px; }

/* -- Lobby accordion (vMM, multi-open) -- */
body.vmm #screen-lobby { padding: 12px 8px; }
body.vmm .lobby-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
body.vmm .lobby-left-col,
body.vmm .lobby-right-col { display: contents; }
body.vmm .lobby-dash-leave { padding-top: 8px; }

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   LOGIN PROMPT TOAST
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#login-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 72px;
  pointer-events: none;
}
#login-prompt-overlay.hidden { display: none; }
#login-prompt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: all;
}
#login-prompt-card {
  position: relative;
  background: var(--bg-card, #1a1208);
  border: 1px solid var(--gold, #f0b429);
  border-radius: 10px;
  padding: 20px 20px 16px;
  max-width: min(380px, calc(100vw - 32px));
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: all;
  animation: loginPromptIn .28s cubic-bezier(.22,1,.36,1) both;
}
#login-prompt-overlay.login-prompt-leaving #login-prompt-card {
  animation: loginPromptOut .22s ease-in forwards;
}
@keyframes loginPromptIn {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginPromptOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-18px); }
}
.login-prompt-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: none;
  color: var(--tx-dim, #aaa);
  font-size: calc(12px * var(--ts));
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.login-prompt-close:hover { color: var(--tx, #fff); }
.login-prompt-title {
  font-family: var(--font, 'Press Start 2P'), monospace;
  font-size: calc(10px * var(--ts));
  color: var(--gold, #f0b429);
  margin: 0;
  letter-spacing: .5px;
  padding-right: 20px;
}
.login-prompt-body {
  font-size: calc(9px * var(--ts));
  color: var(--tx-sub, #c8b97a);
  margin: 0;
  line-height: 1.8;
}
.login-prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Hide "continue" button in MM (save screen real estate) */
body.vmm .login-prompt-continue,
body.hmm .login-prompt-continue { display: none !important; }

/* --- Multiplayer beta gate popup (shares login-prompt-card/title/body styling) --- */
#mp-soon-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#mp-soon-overlay.hidden { display: none; }
#mp-soon-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
}
#mp-soon-modal {
  position: relative;
  background: var(--bg-card, #1a1208);
  border: 1px solid var(--gold, #f0b429);
  border-radius: 10px;
  padding: 20px 20px 16px;
  max-width: min(380px, calc(100vw - 32px));
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Persistent "SOON" badge (home MP tile + QP MP tab) --- */
.mp-soon-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--font);
  font-size: calc(6px * var(--ts));
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--shadow);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.mm-tile { position: relative; }
.mm-sheet-mode-btn { position: relative; }
body.vmm .mp-soon-badge,
body.hmm .mp-soon-badge { font-size: calc(4.5px * var(--ts)); padding: 1px 4px; }

/* --- MP gate: gray out both MP buttons (home tile + QP tab) while disabled,
   so the gold "SOON" badge reads as an overlay on a visibly-disabled control
   instead of sitting on top of a still-high-contrast button. Recomputed from
   each button's own color vars via color-mix (not a blanket filter) so it
   still respects the active theme. --- */
#mm-tile-mp.mp-gate-off {
  background: color-mix(in srgb, var(--bg-card) 55%, var(--mid));
  border-color: color-mix(in srgb, var(--dark) 45%, var(--mid));
  color: color-mix(in srgb, var(--tx) 45%, var(--mid));
}
#mm-tile-mp.mp-gate-off svg { color: color-mix(in srgb, var(--dark) 45%, var(--mid)); }

#mm-sheet-mp.mp-gate-off {
  color: color-mix(in srgb, var(--tx-sub) 55%, var(--mid));
  border-color: color-mix(in srgb, var(--mid) 55%, var(--bg-card));
  background: color-mix(in srgb, var(--mid) 14%, var(--bg-card));
}
#mm-sheet-mp.mp-gate-off.active {
  background: color-mix(in srgb, var(--mid) 25%, var(--bg-card)) !important;
  color: color-mix(in srgb, var(--tx-sub) 70%, var(--mid)) !important;
  border-color: color-mix(in srgb, var(--mid) 60%, var(--bg-card)) !important;
}

body.hmm .login-prompt-body { font-size: calc(6px * var(--ts)); }

/* MM sheet MP guest label */
.mm-sheet-mp-guest-label {
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub, #c8b97a);
  text-align: center;
  line-height: 1.8;
  margin: 8px 0 4px;
}

/* vmm visibility utilities */
body.vmm .vmm-hidden { display: none !important; }
.vmm-only { display: none; }
body.vmm .vmm-only { display: inline !important; }

/* BM topbar login button */
.bm-topbar-login-btn {
  background: var(--gold, #f0b429);
  color: #1a1208;
  border: none;
  border-radius: 6px;
  font-family: var(--font, 'Press Start 2P'), monospace;
  font-size: calc(8px * var(--ts));
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .5px;
  line-height: 1;
}
.bm-topbar-login-btn:hover { filter: brightness(1.1); }
body.vmm .bm-topbar-login-btn { font-size: calc(6px * var(--ts));}
body.hmm .bm-topbar-login-btn { font-size: calc(4px * var(--ts));}

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

#support-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, 480px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.hmm #support-modal {
  width: min(96vw, 680px);
  max-height: 92vh;
}

body.hmm #support-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: start;
}

.support-col-left,
.support-col-right {
  display: flex;
  flex-direction: column;
}

.support-col-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--bd, var(--gold)) 30%, transparent);
  padding-top: 10px;
  margin-top: 18px;
}

body.hmm .support-col-footer {
  grid-column: 1 / -1;
  margin-top: 2px;
}

#support-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-support-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-support-close:hover { background: var(--gold, #c68b00); color: var(--bg, #1a1206); }

#support-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));
}

.support-impact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--gold) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius-btn, 2px);
  padding: 10px 14px;
  margin: 4px 0 16px;
  font-size: calc(7px * var(--ts));
  color: var(--tx-sub);
}
.support-impact-card strong { color: var(--gold-lt); }

.support-tip-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}

body.hmm .support-tip-btns {
  justify-content: flex-start;
}

.btn-support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  width: fit-content;
  flex-shrink: 0;
  background: none;
  border: 2px solid var(--bd, var(--gold, #c68b00));
  border-radius: var(--radius-btn, 2px);
  color: var(--gold, #ffd700);
  font-family: var(--font-base, monospace);
  font-size: calc(8px * var(--ts));
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-support-link:hover {
  background: var(--gold, #c68b00);
  color: var(--bg, #1a1206);
}

.support-recurring-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: calc(6.5px * var(--ts));
  color: var(--tx-sub);
  background: color-mix(in srgb, var(--mid) 12%, transparent);
  border-radius: var(--radius-btn, 2px);
  padding: 8px 12px;
  line-height: 1.7;
}

/* -- Home support bubble (bottom-right, inherits btn-menu sizing) -- */
#btn-support-bubble {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 16px);
  right: max(env(safe-area-inset-right), 16px);
  border-radius: 50%;
  min-width: 0;
  padding: calc(10px * var(--ts));
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--mid);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  color: var(--gold);
  opacity: 0.85;
  transition: opacity .2s, background .2s, box-shadow .2s, transform .06s;
  z-index: 140;
}
body.hmm #btn-support-bubble, 
body.vmm #btn-support-bubble {
  padding: calc(4px * var(--ts));
}
#btn-support-bubble:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--gold) 18%, var(--mid));
}