/* ========================================================================== */
/* JACKAROO PRODUCT THEMES                                                     */
/* Classic remains the authored default. Tactile Pop is an intentionally      */
/* physical 2026 skin: printed stock, molded pieces, rubber, ink, and offset   */
/* contact shadows. Nothing here changes gameplay geometry or hit targets.      */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Settings / Change Theme — shared structure in both themes                  */
/* -------------------------------------------------------------------------- */
#pane-settings .settings-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  padding: 5px;
  border: 1px solid rgba(255, 245, 210, .12);
  border-radius: 17px;
  background: rgba(0, 0, 0, .28);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .35);
}

#pane-settings .settings-tab {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 244, 218, .58);
  background: transparent;
  font: 900 14px/1.1 'Baloo 2', var(--font-ui);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}

#pane-settings .settings-tab.active {
  color: #2c1908;
  background: linear-gradient(180deg, #ffe2a0, #dca84d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 3px 9px rgba(0, 0, 0, .28);
}

#pane-settings .settings-tab:active { transform: translateY(1px) scale(.99); }
#pane-settings [data-settings-panel].hidden { display: none !important; }

#pane-settings .settings-theme-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#pane-settings .theme-intro {
  padding: 17px 17px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 245, 210, .11);
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% -10%, rgba(232, 184, 99, .18), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 28px rgba(0, 0, 0, .2);
}

#pane-settings .theme-intro-kicker {
  display: block;
  margin-bottom: 5px;
  color: #e8b863;
  font: 900 10px/1 var(--font-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
}

#pane-settings .theme-intro h3 {
  margin: 0;
  color: #fff2cf;
  font: 900 clamp(20px, 5vw, 25px)/1.06 'Baloo 2', var(--font-ui);
}

#pane-settings .theme-intro p {
  margin: 8px 0 0;
  color: rgba(255, 244, 218, .63);
  font: 650 12px/1.45 var(--font-ui);
}

#pane-settings .theme-choice-grid { display: grid; gap: 10px; }

#pane-settings .theme-choice {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 13px;
  width: 100%;
  min-height: 124px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 245, 210, .11);
  border-radius: 20px;
  color: #fff2cf;
  text-align: start;
  background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 22px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: transform .16s var(--ease-out), border-color .16s ease, box-shadow .16s ease;
}

#pane-settings .theme-choice:hover { transform: translateY(-2px); }
#pane-settings .theme-choice:active { transform: translateY(1px) scale(.99); }
#pane-settings .theme-choice.selected {
  border-color: rgba(255, 211, 111, .72);
  box-shadow: 0 0 0 2px rgba(232, 184, 99, .16), inset 0 1px 0 rgba(255, 255, 255, .1), 0 13px 28px rgba(0, 0, 0, .27);
}

#pane-settings .theme-preview {
  position: relative;
  display: block;
  min-height: 102px;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
}

#pane-settings .theme-preview-classic {
  border: 1px solid rgba(232, 184, 99, .25);
  background:
    radial-gradient(circle at 50% 48%, rgba(232, 184, 99, .13), transparent 48%),
    linear-gradient(145deg, #181019, #09070b 70%);
}

#pane-settings .theme-preview-pop {
  border: 2px solid #282139;
  background:
    radial-gradient(circle at 12px 12px, rgba(41, 33, 57, .08) 0 1.4px, transparent 1.7px) 0 0 / 15px 15px,
    #f5dfac;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .42);
}

#pane-settings .theme-preview-board {
  position: absolute;
  left: 12px;
  top: 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  transform: rotate(-8deg);
}

#pane-settings .theme-preview-classic .theme-preview-board {
  border: 5px solid #38210e;
  background: repeating-conic-gradient(from 22.5deg, #724725 0 45deg, #533117 45deg 90deg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, .42), inset 0 0 0 2px #b78443;
}

#pane-settings .theme-preview-pop .theme-preview-board {
  border: 4px solid #282139;
  background: conic-gradient(from 22.5deg, #ff6f61 0 25%, #ffd447 0 50%, #5fd1c8 0 75%, #6d7ff2 0);
  box-shadow: 5px 6px 0 #282139;
}

#pane-settings .theme-preview-board::after {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 6px;
}

#pane-settings .theme-preview-classic .theme-preview-board::after {
  border: 2px solid #d5aa5b;
  background: #140a03;
}

#pane-settings .theme-preview-pop .theme-preview-board::after {
  border: 3px solid #282139;
  background: #fff8e8;
}

#pane-settings .theme-preview-board i {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .38);
  background: #ff6f61;
}

#pane-settings .theme-preview-board i:nth-child(1) { left: 31px; top: 4px; background: #ffd447; }
#pane-settings .theme-preview-board i:nth-child(2) { right: 4px; top: 31px; background: #5fd1c8; }
#pane-settings .theme-preview-board i:nth-child(3) { left: 31px; bottom: 4px; background: #ff6f61; }
#pane-settings .theme-preview-board i:nth-child(4) { left: 4px; top: 31px; background: #6d7ff2; }

#pane-settings .theme-preview-card {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 12px;
  width: 30px;
  height: 42px;
  border-radius: 5px;
  transform: rotate(10deg);
}

#pane-settings .theme-preview-classic .theme-preview-card {
  border: 1px solid #e4bb6b;
  background: linear-gradient(145deg, #372438, #140d1c);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}

#pane-settings .theme-preview-pop .theme-preview-card {
  border: 2px solid #282139;
  background: #fff8e8;
  box-shadow: 3px 4px 0 #282139;
}

#pane-settings .theme-preview-piece {
  position: absolute;
  z-index: 4;
  right: 31px;
  top: 12px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ff6f61;
}

#pane-settings .theme-preview-classic .theme-preview-piece {
  border: 1px solid #ffb5a8;
  box-shadow: inset -4px -5px 5px rgba(80, 0, 0, .45), inset 4px 3px 5px rgba(255, 255, 255, .55), 0 3px 7px rgba(0, 0, 0, .5);
}

#pane-settings .theme-preview-pop .theme-preview-piece {
  border: 2px solid #282139;
  box-shadow: 3px 3px 0 #282139, inset 3px 2px 0 rgba(255, 255, 255, .48);
}

#pane-settings .theme-choice-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

#pane-settings .theme-choice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#pane-settings .theme-choice-top strong { font: 950 18px/1 'Baloo 2', var(--font-ui); }
#pane-settings .theme-choice-top em {
  padding: 5px 8px;
  border: 1px solid rgba(255, 245, 210, .12);
  border-radius: 999px;
  color: rgba(255, 244, 218, .56);
  background: rgba(0, 0, 0, .2);
  font: normal 850 9px/1 var(--font-ui);
  text-transform: uppercase;
}

#pane-settings .theme-choice.selected .theme-choice-top em {
  color: #2c1908;
  border-color: transparent;
  background: #e8b863;
}

#pane-settings .theme-choice-copy small {
  margin-top: 5px;
  color: #e8b863;
  font: 900 9px/1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}

#pane-settings .theme-choice-copy > span:last-child {
  margin-top: 8px;
  color: rgba(255, 244, 218, .6);
  font: 650 11px/1.38 var(--font-ui);
}

#pane-settings .theme-detail-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

#pane-settings .theme-detail-strip > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 62px;
  padding: 8px 5px;
  border: 1px solid rgba(255, 245, 210, .09);
  border-radius: 14px;
  color: rgba(255, 244, 218, .54);
  background: rgba(255, 255, 255, .035);
  font: 750 9px/1.15 var(--font-ui);
  text-align: center;
}

#pane-settings .theme-detail-strip b { color: #e8b863; font-size: 15px; }

@media (max-width: 360px) {
  #pane-settings .theme-choice { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; min-height: 114px; }
  #pane-settings .theme-preview { min-height: 92px; }
  #pane-settings .theme-preview-board { left: 8px; top: 13px; transform: rotate(-8deg) scale(.9); }
}

/* -------------------------------------------------------------------------- */
/* Tactile Pop tokens                                                         */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] {
  color-scheme: light;
  --bg: #f3dfb7;
  --bg-deep: #dbc18d;
  --surface: #fff8e8;
  --surface-2: #f7e8c8;
  --surface-inset: #e9d3a7;
  --surface-raised: #fffdf4;
  --wood-grain: rgba(42, 33, 57, .055);
  --brass: #ffd447;
  --brass-hi: #fff1a8;
  --brass-mid: #ffd447;
  --brass-lo: #e8aa2f;
  --brass-deep: #bd7627;
  --brass-grad: linear-gradient(180deg, #fff1a8 0%, #ffd447 54%, #e8aa2f 100%);
  --cta-grad: linear-gradient(180deg, #ff887d 0%, #ff6f61 62%, #e64c52 100%);
  --cta-ink: #282139;
  --wood-grad: linear-gradient(180deg, #fff8e8, #ead2a1);
  --text: #282139;
  --text-soft: #4b405f;
  --muted: #756a7e;
  --muted-2: #8a7d91;
  --line: rgba(40, 33, 57, .26);
  --line-soft: rgba(40, 33, 57, .14);
  --marble-r: #ff655f;
  --marble-b: #6378ee;
  --marble-y: #ffd23f;
  --marble-g: #4fc5ad;
  --marble-r-sphere: radial-gradient(circle at 34% 26%, #ffb1a5, #ff655f 58%, #d83e4a 100%);
  --marble-b-sphere: radial-gradient(circle at 34% 26%, #b5c0ff, #6378ee 58%, #3f49a9 100%);
  --marble-y-sphere: radial-gradient(circle at 34% 26%, #fff5a8, #ffd23f 58%, #e09c26 100%);
  --marble-g-sphere: radial-gradient(circle at 34% 26%, #adf1e1, #4fc5ad 58%, #2f8d7d 100%);
  --coin-glyph: radial-gradient(circle at 34% 26%, #fff5a8, #ffd447 58%, #e1a028);
  --lamp: none;
  --ok: #2d9c83;
  --warn: #bc781d;
  --danger: #d94752;
  --shadow-panel: 5px 6px 0 #282139;
  --shadow-panel-lg: 8px 9px 0 #282139;
  --shadow-contact: 3px 4px 0 rgba(40, 33, 57, .92);
  --lip-wood: 4px 5px 0 #282139, inset 0 2px 0 rgba(255, 255, 255, .62);
  --lip-brass: 4px 5px 0 #282139, inset 0 2px 0 rgba(255, 255, 255, .62);
  --inset-well: inset 3px 3px 0 rgba(40, 33, 57, .18), inset 0 0 0 2px #282139;
  --bevel-top: inset 0 2px 0 rgba(255, 255, 255, .7);
  --bevel-bottom: inset 0 -2px 0 rgba(40, 33, 57, .14);
  --font-display: 'Fraunces', 'Baloo 2', Georgia, serif;
  --font-ui: 'Rubik', 'Inter', system-ui, sans-serif;
}

html[data-ui-theme='tactile-pop'],
html[data-ui-theme='tactile-pop'] body {
  background: #c3a6e8;
}

html[data-ui-theme='tactile-pop'] body {
  color: #282139;
  font-family: var(--font-ui);
}

html[data-ui-theme='tactile-pop'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(0deg, rgba(40, 33, 57, .035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 7px);
}

html[data-ui-theme='tactile-pop'] :focus-visible {
  outline: 3px solid #282139 !important;
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Boot and account gate                                                      */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #boot-splash {
  color: #282139;
  background:
    radial-gradient(circle at 18% 20%, #ff8b7f 0 10%, transparent 10.4%),
    radial-gradient(circle at 84% 78%, #5fd1c8 0 14%, transparent 14.4%),
    radial-gradient(circle at 80% 13%, #ffd447 0 8%, transparent 8.4%),
    radial-gradient(circle at 1px 1px, rgba(40, 33, 57, .1) 0 1.2px, transparent 1.5px) 0 0 / 17px 17px,
    #f5dfac !important;
}

html[data-ui-theme='tactile-pop'] .boot-board {
  border: 5px solid #282139 !important;
  background: conic-gradient(from 22.5deg, #ff6f61 0 25%, #ffd447 0 50%, #5fd1c8 0 75%, #6d7ff2 0) !important;
  box-shadow: 8px 9px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] .boot-board::before,
html[data-ui-theme='tactile-pop'] .boot-board::after {
  border-color: #282139 !important;
  background: #fff8e8 !important;
  box-shadow: none !important;
}

html[data-ui-theme='tactile-pop'] .boot-marble,
html[data-ui-theme='tactile-pop'] .boot-home {
  border: 2px solid #282139 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] .boot-title {
  color: #282139 !important;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, .72) !important;
}

html[data-ui-theme='tactile-pop'] .boot-splash-state { color: #5a4e67 !important; }

html[data-ui-theme='tactile-pop'] #auth-gate {
  background: rgba(195, 166, 232, .82) !important;
  backdrop-filter: blur(8px) saturate(.9) !important;
}

html[data-ui-theme='tactile-pop'] .auth-gate-panel {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 12px 12px, rgba(40, 33, 57, .06) 0 1px, transparent 1.4px) 0 0 / 16px 16px,
    #fff8e8 !important;
  box-shadow: 8px 9px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] .auth-gate-panel h1,
html[data-ui-theme='tactile-pop'] .auth-gate-panel p { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] .auth-gate-warn,
html[data-ui-theme='tactile-pop'] #auth-gate-state { color: #756a7e !important; }
html[data-ui-theme='tactile-pop'] .auth-gate-mark {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ffd447 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] .auth-gate-btn {
  min-height: 48px;
  border: 2px solid #282139 !important;
  color: #282139 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] .auth-gate-btn.primary { background: #ff766b !important; }
html[data-ui-theme='tactile-pop'] .auth-gate-btn.secondary { background: #fffdf4 !important; }
html[data-ui-theme='tactile-pop'] .auth-gate-btn:active { transform: translate(2px, 3px) !important; box-shadow: 1px 1px 0 #282139 !important; }

/* -------------------------------------------------------------------------- */
/* Game table, HUD, hand, cards, and player plates                            */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #app {
  border-inline: 3px solid #282139;
  background:
    radial-gradient(circle at 11px 11px, rgba(40, 33, 57, .075) 0 1.2px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(160deg, rgba(255, 255, 255, .34), transparent 48%),
    #f3dfb7 !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .24);
}

html[data-ui-theme='tactile-pop'] #board-wrap {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, .62), transparent 58%),
    transparent !important;
}

html[data-ui-theme='tactile-pop'] #board-wrap::before {
  opacity: .18 !important;
  background: radial-gradient(ellipse at 50% 46%, transparent 58%, rgba(40, 33, 57, .15) 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .42) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .42) 88%, transparent 100%);
}

html[data-ui-theme='tactile-pop'] #board-wrap::after {
  opacity: .24 !important;
  animation: none !important;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 54%, rgba(40, 33, 57, .14) 100%),
    repeating-linear-gradient(118deg, transparent 0 17px, rgba(40, 33, 57, .028) 18px 19px) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .42) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .42) 88%, transparent 100%);
}

html[data-ui-theme='tactile-pop'] #board { filter: none !important; }

html[data-ui-theme='tactile-pop'] .ibtn,
html[data-ui-theme='tactile-pop'] #btn-speed,
html[data-ui-theme='tactile-pop'] #btn-sound,
html[data-ui-theme='tactile-pop'] #btn-menu {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 3px 4px 0 #282139 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='tactile-pop'] .ibtn:active,
html[data-ui-theme='tactile-pop'] #btn-speed:active,
html[data-ui-theme='tactile-pop'] #btn-sound:active,
html[data-ui-theme='tactile-pop'] #btn-menu:active {
  transform: translate(2px, 3px) !important;
  box-shadow: 1px 1px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] .plate { opacity: 1 !important; filter: none !important; }
html[data-ui-theme='tactile-pop'] .plate.active { opacity: 1; }
html[data-ui-theme='tactile-pop'] .plate .av {
  border: 3px solid #282139 !important;
  box-shadow: 4px 5px 0 #282139, inset 0 0 0 3px rgba(255, 253, 244, .22) !important;
  filter: none !important;
}
html[data-ui-theme='tactile-pop'] #plate-0 .av { background: #ff655f !important; }
html[data-ui-theme='tactile-pop'] #plate-1 .av { background: #6378ee !important; }
html[data-ui-theme='tactile-pop'] #plate-2 .av { background: #ffd23f !important; }
html[data-ui-theme='tactile-pop'] #plate-3 .av { background: #4fc5ad !important; }
html[data-ui-theme='tactile-pop'] .plate.active .av { animation: none !important; transform: translateY(-2px); }
html[data-ui-theme='tactile-pop'] .plate .nm-pill {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 2px 3px 0 #282139 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] .plate.active .nm-pill { background: #fff0a6 !important; }
html[data-ui-theme='tactile-pop'] .plate .nm { color: #282139 !important; font-size: 12px; font-weight: 900 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] .plate .seat-title { display: none !important; }
html[data-ui-theme='tactile-pop'] .plate .mcs {
  top: -10px;
  right: -20px;
}
html[data-ui-theme='tactile-pop'] #plate-3 .mcs {
  right: auto;
  left: -20px;
}
html[data-ui-theme='tactile-pop'] .plate .mc {
  width: 12px;
  height: 18px;
  margin-right: -5px;
  background: linear-gradient(145deg, rgba(164, 145, 234, .58), rgba(91, 69, 151, .46)), var(--card-back-bg) !important;
  background-blend-mode: screen, normal;
  border: 1.5px solid #fff1cf !important;
  box-shadow: 2px 2px 0 rgba(40, 33, 57, .88), inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}

html[data-ui-theme='tactile-pop'] #turnbar {
  color: #282139 !important;
  border: 2px solid #282139;
  background: #ffd447 !important;
  box-shadow: 4px 5px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #turnbar.show.mine { animation: none !important; }
html[data-ui-theme='tactile-pop'] #turnbar:not(.mine) { color: #282139 !important; background: #d7c0f1 !important; }

html[data-ui-theme='tactile-pop'] #burn-cta {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  background: #ff6f61 !important;
  box-shadow: 5px 6px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #burn-cta::before { background: #fff8e8 !important; box-shadow: none !important; }
html[data-ui-theme='tactile-pop'] #burn-cta.show { animation: none !important; }
html[data-ui-theme='tactile-pop'] #burn-cta:active { transform: translate(3px, 4px) !important; box-shadow: 2px 2px 0 #282139 !important; }

html[data-ui-theme='tactile-pop'] #hand .card,
html[data-ui-theme='tactile-pop'] .card.fly {
  border: 2px solid #282139 !important;
  background-color: #fffdf4 !important;
  box-shadow: 4px 5px 0 #282139 !important;
  filter: saturate(1.08) contrast(.98);
}
html[data-ui-theme='tactile-pop'] #hand .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(0deg, rgba(40, 33, 57, .06) 0 1px, transparent 1px 4px);
}
html[data-ui-theme='tactile-pop'] #hand .card.sel,
html[data-ui-theme='tactile-pop'] #hand .card.peek {
  animation: none !important;
  border-color: #282139 !important;
  transform: translateY(-12px) rotate(-1deg) !important;
  box-shadow: 7px 9px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #hand .card.toss { animation: none !important; outline: 4px solid #ff6f61 !important; }
html[data-ui-theme='tactile-pop'] body #hand.wait {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}
html[data-ui-theme='tactile-pop'] body #hand .card.dead {
  opacity: 1 !important;
  filter: none !important;
}
html[data-ui-theme='tactile-pop'] body #hand .card.toss {
  opacity: 1 !important;
  filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* Menu shell and repeated UI primitives                                      */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #menu {
  color: #282139 !important;
  background:
    linear-gradient(133deg, transparent 0 72%, rgba(95, 209, 200, .22) 72% 83%, transparent 83%),
    radial-gradient(circle at 90% 8%, #ffd447 0 8%, transparent 8.3%),
    radial-gradient(circle at 8% 78%, #ff867b 0 10%, transparent 10.3%),
    radial-gradient(circle at 12px 12px, rgba(40, 33, 57, .07) 0 1.2px, transparent 1.5px) 0 0 / 18px 18px,
    #f3dfb7 !important;
}

html[data-ui-theme='tactile-pop'] #menu::before {
  opacity: .24 !important;
  background: repeating-linear-gradient(112deg, transparent 0 19px, rgba(40, 33, 57, .06) 20px 21px) !important;
}

html[data-ui-theme='tactile-pop'] #menu-fx { opacity: .24 !important; filter: saturate(.72) contrast(1.15); }

html[data-ui-theme='tactile-pop'] #m-top {
  border-bottom: 3px solid #282139 !important;
  background: rgba(255, 248, 232, .94) !important;
  box-shadow: 0 5px 0 #282139 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='tactile-pop'] #m-top .icon-btn,
html[data-ui-theme='tactile-pop'] #top-profile,
html[data-ui-theme='tactile-pop'] #top-settings,
html[data-ui-theme='tactile-pop'] #top-friends,
html[data-ui-theme='tactile-pop'] #coin-plus,
html[data-ui-theme='tactile-pop'] #top-trophies {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ffd447 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] body #menu #top-profile .nm { color: #282139 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #menu #top-profile .rk { color: #d94752 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #menu #top-profile .ttl { color: #4b405f !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] #m-top .coin-pill {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff3bd !important;
  box-shadow: 2px 3px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #m-top #m-coins { color: #282139 !important; text-shadow: none !important; }

html[data-ui-theme='tactile-pop'] body #menu #pane-home #m-teamup,
html[data-ui-theme='tactile-pop'] body #menu #pane-home #m-teamup * {
  color: #282139 !important;
  -webkit-text-fill-color: #282139 !important;
  text-shadow: none !important;
}
html[data-ui-theme='tactile-pop'] body #menu #pane-home #m-teamup #hbt-sub { color: #4b405f !important; }
html[data-ui-theme='tactile-pop'] body #menu #pane-home #m-whoami,
html[data-ui-theme='tactile-pop'] body #menu #pane-home #m-whoami b { color: #282139 !important; text-shadow: none !important; }

/* Scale only the physical board on the home screen. Scaling the whole wrapper
   would shrink its paper background into a dark-looking square. */
html[data-ui-theme='tactile-pop'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #board-wrap {
  transform: none !important;
}
html[data-ui-theme='tactile-pop'] body:has(#menu:not(.hidden)):has(#pane-home:not(.hidden)) #stage {
  transform: none;
  scale: .78;
  translate: 0 -3%;
}

html[data-ui-theme='tactile-pop'] #menu .pane-title,
html[data-ui-theme='tactile-pop'] #menu h1,
html[data-ui-theme='tactile-pop'] #menu h2,
html[data-ui-theme='tactile-pop'] #menu h3,
html[data-ui-theme='tactile-pop'] #menu .sec-label { color: #282139 !important; text-shadow: none !important; }

html[data-ui-theme='tactile-pop'] #menu .wood-panel,
html[data-ui-theme='tactile-pop'] #menu .settings-card,
html[data-ui-theme='tactile-pop'] #menu .profile-card,
html[data-ui-theme='tactile-pop'] #menu .fr-card,
html[data-ui-theme='tactile-pop'] #menu .qrow,
html[data-ui-theme='tactile-pop'] #menu .home-card,
html[data-ui-theme='tactile-pop'] #menu .arena-card {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background:
    repeating-linear-gradient(0deg, rgba(40, 33, 57, .025) 0 1px, transparent 1px 5px),
    #fff8e8 !important;
  box-shadow: 4px 5px 0 #282139 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='tactile-pop'] #menu .m-dim,
html[data-ui-theme='tactile-pop'] #menu .muted,
html[data-ui-theme='tactile-pop'] #menu .sub,
html[data-ui-theme='tactile-pop'] #menu small { color: #756a7e !important; }

html[data-ui-theme='tactile-pop'] #menu .m-btn,
html[data-ui-theme='tactile-pop'] #menu .m-mini,
html[data-ui-theme='tactile-pop'] #menu button.primary,
html[data-ui-theme='tactile-pop'] #menu .primary-cta {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ff766b !important;
  box-shadow: 3px 4px 0 #282139 !important;
  text-shadow: none !important;
}

html[data-ui-theme='tactile-pop'] #menu .m-btn:active,
html[data-ui-theme='tactile-pop'] #menu .m-mini:active,
html[data-ui-theme='tactile-pop'] #menu button.primary:active,
html[data-ui-theme='tactile-pop'] #menu .primary-cta:active {
  transform: translate(2px, 3px) !important;
  box-shadow: 1px 1px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] #menu-nav {
  border-top: 3px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 0 -5px 0 rgba(40, 33, 57, .1) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='tactile-pop'] #menu-nav .nav-btn { color: #756a7e !important; }
html[data-ui-theme='tactile-pop'] #menu-nav .nav-btn .ni {
  border: 2px solid transparent;
  color: #4b405f !important;
  filter: none !important;
}
html[data-ui-theme='tactile-pop'] #menu-nav .nav-btn.active { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] #menu-nav .nav-btn.active .ni {
  border-color: #282139;
  background: #ffd447 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}

/* Home / profile / friends / daily details */
html[data-ui-theme='tactile-pop'] #pane-home .home-logo,
html[data-ui-theme='tactile-pop'] #pane-home .hero-title { color: #282139 !important; text-shadow: 3px 3px 0 #fff8e8 !important; }
html[data-ui-theme='tactile-pop'] #pane-home .home-play,
html[data-ui-theme='tactile-pop'] #pane-home #btn-play,
html[data-ui-theme='tactile-pop'] #pane-home #btn-practice,
html[data-ui-theme='tactile-pop'] #pane-home #m-teamup {
  border: 3px solid #282139 !important;
  color: #282139 !important;
  background: #ff766b !important;
  box-shadow: 5px 6px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #pane-home #btn-practice { background: #5fd1c8 !important; }

html[data-ui-theme='tactile-pop'] #pane-profile .prof-id-card,
html[data-ui-theme='tactile-pop'] #pane-profile .profile-stat,
html[data-ui-theme='tactile-pop'] #pane-friends .fr-player-row,
html[data-ui-theme='tactile-pop'] #pane-quests .qrow {
  border: 2px solid #282139 !important;
  color: #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] .prof-avatar,
html[data-ui-theme='tactile-pop'] .fr-avatar {
  border: 3px solid #282139 !important;
  background: #d7c0f1 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}

/* -------------------------------------------------------------------------- */
/* Settings in Tactile Pop                                                    */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #menu #pane-settings {
  border: 0 !important;
  color: #282139 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme='tactile-pop'] #pane-settings .settings-tabs {
  border: 2px solid #282139;
  background: #d7c0f1;
  box-shadow: 3px 4px 0 #282139;
}

html[data-ui-theme='tactile-pop'] #pane-settings .settings-tab { color: #4b405f; }
html[data-ui-theme='tactile-pop'] #pane-settings .settings-tab.active {
  color: #282139;
  background: #ffd447;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 2px 3px 0 #282139;
}

html[data-ui-theme='tactile-pop'] #menu #pane-settings .settings-card,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-intro,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-detail-strip > span {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}

html[data-ui-theme='tactile-pop'] #pane-settings .theme-intro {
  background:
    radial-gradient(circle at 92% 4%, #5fd1c8 0 14%, transparent 14.4%),
    radial-gradient(circle at 77% 22%, #ffd447 0 7%, transparent 7.4%),
    #fff8e8 !important;
}
html[data-ui-theme='tactile-pop'] #pane-settings .theme-intro-kicker,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice-copy small,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-detail-strip b { color: #d94752 !important; }
html[data-ui-theme='tactile-pop'] #pane-settings .theme-intro h3,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice-top strong { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] #pane-settings .theme-intro p,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice-copy > span:last-child,
html[data-ui-theme='tactile-pop'] #pane-settings .theme-detail-strip > span { color: #756a7e !important; }

html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice.selected {
  background: #fff3bd !important;
  box-shadow: 5px 6px 0 #282139 !important;
  transform: translate(-1px, -1px);
}
html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice-top em {
  color: #756a7e;
  border: 2px solid #282139;
  background: #fff8e8;
}
html[data-ui-theme='tactile-pop'] #pane-settings .theme-choice.selected .theme-choice-top em {
  color: #282139;
  background: #ffd447;
}

html[data-ui-theme='tactile-pop'] #menu #pane-settings .set-row {
  border-bottom: 2px dashed rgba(40, 33, 57, .22) !important;
  background: transparent !important;
}
html[data-ui-theme='tactile-pop'] #menu #pane-settings .set-row:last-child { border-bottom: 0 !important; }
html[data-ui-theme='tactile-pop'] #menu #pane-settings .set-row .sl { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] #menu #pane-settings .set-ico {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #5fd1c8 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #pane-settings .toggle {
  border: 2px solid #282139 !important;
  background: #d9c9a7 !important;
  box-shadow: inset 2px 2px 0 rgba(40, 33, 57, .14) !important;
}
html[data-ui-theme='tactile-pop'] #pane-settings .toggle.on { background: #5fd1c8 !important; }
html[data-ui-theme='tactile-pop'] #pane-settings .toggle .knob {
  border: 2px solid #282139;
  background: #fff8e8 !important;
  box-shadow: 1px 2px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #pane-settings .seg {
  border: 2px solid #282139 !important;
  background: #e9d3a7 !important;
}
html[data-ui-theme='tactile-pop'] #pane-settings .seg button { color: #4b405f !important; }
html[data-ui-theme='tactile-pop'] #pane-settings .seg button.on {
  color: #282139 !important;
  background: #ffd447 !important;
  box-shadow: 1px 2px 0 #282139 !important;
}

/* -------------------------------------------------------------------------- */
/* Quick match                                                                */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #pregame {
  color: #282139 !important;
  background:
    radial-gradient(circle at 12px 12px, rgba(40, 33, 57, .07) 0 1px, transparent 1.4px) 0 0 / 17px 17px,
    #f3dfb7 !important;
}
html[data-ui-theme='tactile-pop'] .pg-ambient {
  background:
    radial-gradient(circle at 8% 12%, #ff766b 0 8%, transparent 8.4%),
    radial-gradient(circle at 93% 82%, #5fd1c8 0 12%, transparent 12.4%) !important;
}
html[data-ui-theme='tactile-pop'] .pg-hdr,
html[data-ui-theme='tactile-pop'] .pg-footer {
  color: #282139 !important;
  border-color: #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 0 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] .pg-footer { box-shadow: 0 -4px 0 #282139 !important; }
html[data-ui-theme='tactile-pop'] .pg-hdr-title,
html[data-ui-theme='tactile-pop'] .pg-hdr-count,
html[data-ui-theme='tactile-pop'] .pg-status,
html[data-ui-theme='tactile-pop'] .pg-status * { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] .pg-back-btn,
html[data-ui-theme='tactile-pop'] .pg-midjoin-toggle,
html[data-ui-theme='tactile-pop'] .pg-leave-btn {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] .pg-table,
html[data-ui-theme='tactile-pop'] .pg-cinema {
  border: 3px solid #282139 !important;
  background:
    repeating-linear-gradient(0deg, rgba(40, 33, 57, .025) 0 1px, transparent 1px 5px),
    #f8e7c5 !important;
  box-shadow: 6px 7px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] .pg-seat {
  border: 2px solid #282139 !important;
  color: #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] .pg-seat.searching:nth-child(2) { background: #fff3bd !important; }
html[data-ui-theme='tactile-pop'] .pg-seat.searching:nth-child(3) { background: #d8f4ee !important; }
html[data-ui-theme='tactile-pop'] .pg-seat.searching:nth-child(4) { background: #e6d6f7 !important; }
html[data-ui-theme='tactile-pop'] .pg-seat-spinner { animation: none !important; border-color: #282139 transparent #282139 #282139 !important; }
html[data-ui-theme='tactile-pop'] .pg-start-btn {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  background: #ff766b !important;
  box-shadow: 4px 5px 0 #282139 !important;
}

/* Current quick-match DOM uses positional seat classes rather than .pg-seat.
   Keep these selectors deliberately explicit: this is the live lobby surface. */
html[data-ui-theme='tactile-pop'] body #pregame {
  color: #282139 !important;
  background:
    radial-gradient(circle at 12px 12px, rgba(40,33,57,.075) 0 1.2px, transparent 1.5px) 0 0 / 18px 18px,
    #f3dfb7 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-ambient {
  opacity: 1 !important;
  animation: none !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,118,107,.34) 0 9%, transparent 9.4%),
    radial-gradient(circle at 92% 76%, rgba(95,209,200,.32) 0 12%, transparent 12.4%) !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-hdr {
  color: #282139 !important;
  border-bottom: 3px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 0 5px 0 #282139 !important;
  backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-hdr-title,
html[data-ui-theme='tactile-pop'] body #pregame .pg-hdr-count,
html[data-ui-theme='tactile-pop'] body #pregame .pg-midjoin-lbl,
html[data-ui-theme='tactile-pop'] body #pregame .pg-status-txt { color: #282139 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-status-txt { color: #d94752 !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-hdr-count,
html[data-ui-theme='tactile-pop'] body #pregame .pg-back-btn {
  border: 2px solid #282139 !important;
  background: #ffd447 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-live-dot,
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-conn.good {
  border: 2px solid #282139 !important;
  background: #55cc8a !important;
  box-shadow: none !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-midjoin {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #d7c0f1 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-midjoin-cb {
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: inset 0 0 0 2px rgba(40,33,57,.08) !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-board-zone { background: transparent !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-cinema {
  border: 3px solid #282139 !important;
  border-radius: 30px !important;
  background:
    repeating-linear-gradient(0deg, rgba(40,33,57,.026) 0 1px, transparent 1px 6px),
    #f8e7c5 !important;
  box-shadow: 7px 8px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-cine-halo {
  opacity: .2 !important;
  filter: none !important;
  animation: none !important;
  background: repeating-conic-gradient(from 8deg, #ff766b 0 13deg, #ffd447 13deg 26deg, #5fd1c8 26deg 39deg, #bda2ee 39deg 52deg) !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-cine-rim {
  opacity: .52 !important;
  animation: none !important;
  filter: none !important;
  border: 3px dashed #282139 !important;
  box-shadow: none !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-cine-sweep,
html[data-ui-theme='tactile-pop'] body #pregame .pg-cine-orbit,
html[data-ui-theme='tactile-pop'] body #pregame .pg-cine-pulse,
html[data-ui-theme='tactile-pop'] body #pregame .pg-orbit-marble { display: none !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-cine-copy {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  background: #fff3bd !important;
  box-shadow: 4px 5px 0 #282139 !important;
  backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] body #pregame #pg-cine-title { color: #282139 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #pregame #pg-cine-sub { color: #756a7e !important; }

html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-1,
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-2,
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-3,
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-0 {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  box-shadow: 4px 5px 0 #282139 !important;
  backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-1 { background: #d8f4ee !important; }
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-2 { background: #e6d6f7 !important; }
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-3 { background: #fff3bd !important; }
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-0 { background: #fff8e8 !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-inner { color: #282139 !important; background: transparent !important; box-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-search-ring {
  animation: none !important;
  border: 3px solid #282139 !important;
  box-shadow: inset 3px 3px 0 rgba(40,33,57,.12) !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-search-lbl,
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-name { color: #282139 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-title,
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-searching::after { color: #756a7e !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-sc-av {
  border-width: 3px !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-0 .pg-sc-inner.pg-sc-player {
  color: #282139 !important;
  background: #fff8e8 !important;
  box-shadow: none !important;
}
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-0 .pg-sc-name { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-0 .pg-sc-title { color: #d94752 !important; }
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-1 .pg-sc-search-lbl,
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-2 .pg-sc-search-lbl,
html[data-ui-theme='tactile-pop'] body #pregame #pg-seat-3 .pg-sc-search-lbl { color: #282139 !important; opacity: 1 !important; }
html[data-ui-theme='tactile-pop'] body #pregame .pg-you-badge {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ffd447 !important;
  box-shadow: 1px 2px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame .pg-bottom {
  border-top: 3px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 0 -5px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame #pg-start {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  background: #ffd447 !important;
  box-shadow: 4px 5px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #pregame #pg-leave-btn {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ff9b91 !important;
  box-shadow: 2px 3px 0 #282139 !important;
}

/* -------------------------------------------------------------------------- */
/* Shop and collection surfaces                                               */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #shop {
  --shop-panel: #fff8e8;
  --shop-panel-strong: #fffdf4;
  --shop-line: rgba(40, 33, 57, .28);
  --shop-line-strong: #282139;
  --shop-text: #282139;
  --shop-muted: #756a7e;
  color: #282139 !important;
  background:
    radial-gradient(circle at 90% 9%, #ffd447 0 8%, transparent 8.4%),
    radial-gradient(circle at 8% 72%, #5fd1c8 0 10%, transparent 10.4%),
    radial-gradient(circle at 12px 12px, rgba(40, 33, 57, .07) 0 1px, transparent 1.4px) 0 0 / 18px 18px,
    #f3dfb7 !important;
}
html[data-ui-theme='tactile-pop'] #shop::before { opacity: .25 !important; filter: none !important; }
html[data-ui-theme='tactile-pop'] #shop::after { display: none !important; }
html[data-ui-theme='tactile-pop'] #sh-bar {
  border-bottom: 3px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 0 5px 0 #282139 !important;
  backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] #sh-back,
html[data-ui-theme='tactile-pop'] #sh-wallet,
html[data-ui-theme='tactile-pop'] .sh-cat,
html[data-ui-theme='tactile-pop'] .sh-item,
html[data-ui-theme='tactile-pop'] #sh-feature {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 3px 4px 0 #282139 !important;
  backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] .sh-cat.active { background: #ffd447 !important; }
html[data-ui-theme='tactile-pop'] .sh-item.equipped,
html[data-ui-theme='tactile-pop'] .sh-item.selected { background: #fff3bd !important; box-shadow: 5px 6px 0 #282139 !important; }
html[data-ui-theme='tactile-pop'] #sh-feature-name,
html[data-ui-theme='tactile-pop'] .sh-item-name { color: #282139 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] #sh-feature-desc,
html[data-ui-theme='tactile-pop'] .sh-item-desc,
html[data-ui-theme='tactile-pop'] .sh-meta { color: #756a7e !important; }
html[data-ui-theme='tactile-pop'] #sh-buy,
html[data-ui-theme='tactile-pop'] .sh-equip,
html[data-ui-theme='tactile-pop'] .sh-action {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ff766b !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] #shop canvas { filter: saturate(.82) contrast(1.1); }

/* -------------------------------------------------------------------------- */
/* Ranked / arena road                                                        */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #menu:not(.lobby-mode):has(#pane-arenas:not(.hidden)),
html[data-ui-theme='tactile-pop'] #menu:not(.lobby-mode):has(#pane-ranked:not(.hidden)) {
  background:
    radial-gradient(circle at 12px 12px, rgba(40, 33, 57, .07) 0 1px, transparent 1.4px) 0 0 / 18px 18px,
    #f3dfb7 !important;
}
html[data-ui-theme='tactile-pop'] .arenas-road {
  color: #282139 !important;
  background:
    linear-gradient(rgba(243, 223, 183, .84), rgba(243, 223, 183, .9)),
    url('../assets/ranked/backgrounds/ranked-arena-bg-grounded.webp') center top / cover no-repeat !important;
}
html[data-ui-theme='tactile-pop'] .arena-stop,
html[data-ui-theme='tactile-pop'] .ranked-card,
html[data-ui-theme='tactile-pop'] .ranked-leaderboard,
html[data-ui-theme='tactile-pop'] .ranked-season-card {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff8e8 !important;
  box-shadow: 4px 5px 0 #282139 !important;
  backdrop-filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* Dialogs, overlays, result, help, leave                                     */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] #popup,
html[data-ui-theme='tactile-pop'] #help,
html[data-ui-theme='tactile-pop'] #overlay,
html[data-ui-theme='tactile-pop'] #leave-modal,
html[data-ui-theme='tactile-pop'] .fi-modal {
  background: rgba(195, 166, 232, .72) !important;
  backdrop-filter: blur(7px) saturate(.9) !important;
}

html[data-ui-theme='tactile-pop'] #popup .box,
html[data-ui-theme='tactile-pop'] #help .box,
html[data-ui-theme='tactile-pop'] .ov-box,
html[data-ui-theme='tactile-pop'] #leave-modal-box,
html[data-ui-theme='tactile-pop'] .fi-sheet,
html[data-ui-theme='tactile-pop'] .jk-pick-box,
html[data-ui-theme='tactile-pop'] .preplay-card {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  background:
    repeating-linear-gradient(0deg, rgba(40, 33, 57, .025) 0 1px, transparent 1px 5px),
    #fff8e8 !important;
  box-shadow: 7px 8px 0 #282139 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='tactile-pop'] #popup h2,
html[data-ui-theme='tactile-pop'] #help h2,
html[data-ui-theme='tactile-pop'] .ov-box h2,
html[data-ui-theme='tactile-pop'] #leave-modal-box h3,
html[data-ui-theme='tactile-pop'] .fi-title { color: #282139 !important; text-shadow: none !important; }
html[data-ui-theme='tactile-pop'] #popup p,
html[data-ui-theme='tactile-pop'] #help p,
html[data-ui-theme='tactile-pop'] .ov-box p,
html[data-ui-theme='tactile-pop'] #leave-modal-box p { color: #756a7e !important; }

html[data-ui-theme='tactile-pop'] #leave-modal-stay,
html[data-ui-theme='tactile-pop'] #help-close,
html[data-ui-theme='tactile-pop'] .ov-btn,
html[data-ui-theme='tactile-pop'] .fi-main-btn {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ff766b !important;
  box-shadow: 3px 4px 0 #282139 !important;
}

/* The shared visual layer targets both modal IDs, so this theme needs the
   complete selector to prevent the Classic dark panel from winning. */
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-box {
  color: #282139 !important;
  border: 3px solid #282139 !important;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 212, 71, .24), transparent 32%),
    repeating-linear-gradient(0deg, rgba(40, 33, 57, .025) 0 1px, transparent 1px 5px),
    #fff8e8 !important;
  box-shadow: 8px 9px 0 #282139 !important;
  backdrop-filter: none !important;
}
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-box::before { display: none !important; }
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-icon {
  border: 2px solid #282139 !important;
  background: #ffd447 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-icon svg { stroke: #282139 !important; }
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-box h3 {
  color: #282139 !important;
  font: 950 24px/1 'Baloo 2', var(--font-ui) !important;
}
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-box p {
  color: #756a7e !important;
  font-weight: 750 !important;
}
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-forfeit-btn {
  color: #a83e46 !important;
  border: 2px solid #282139 !important;
  background: #ffe0da !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-timer {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #fff0a6 !important;
  box-shadow: 3px 4px 0 #282139 !important;
}
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-timer .lm-ring { stroke: rgba(40, 33, 57, .2) !important; }
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-timer .lm-arc { stroke: #ff6f61 !important; }
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-timer .lm-num { color: #282139 !important; }
html[data-ui-theme='tactile-pop'] body #leave-modal #leave-modal-go {
  color: #282139 !important;
  border: 2px solid #282139 !important;
  background: #ff766b !important;
}

/* Physical celebration pieces: paper, foam token, and die-cut petal. */
html[data-ui-theme='tactile-pop'] #victory-fx i,
html[data-ui-theme='tactile-pop'] #victory-fx div {
  border: 2px solid #282139;
  box-shadow: 2px 2px 0 rgba(40, 33, 57, .72) !important;
  filter: none !important;
}
html[data-ui-theme='tactile-pop'] .vfx-spark { border-radius: 3px !important; box-shadow: 2px 2px 0 #282139 !important; }
html[data-ui-theme='tactile-pop'] .vfx-lantern { border-radius: 40% 40% 48% 48% !important; }

/* -------------------------------------------------------------------------- */
/* Motion discipline                                                         */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='tactile-pop'] .plate.active .av,
html[data-ui-theme='tactile-pop'] #turnbar.show.mine,
html[data-ui-theme='tactile-pop'] #burn-cta.show,
html[data-ui-theme='tactile-pop'] .jk-chip.playable,
html[data-ui-theme='tactile-pop'] .card.sel,
html[data-ui-theme='tactile-pop'] .card.peek,
html[data-ui-theme='tactile-pop'] .card.toss,
html[data-ui-theme='tactile-pop'] #home-resume.visible,
html[data-ui-theme='tactile-pop'] .pg-seat-spinner,
html[data-ui-theme='tactile-pop'] .loading-spinner,
html[data-ui-theme='tactile-pop'] .thinking-dot,
html[data-ui-theme='tactile-pop'] .th i {
  animation: none !important;
}

html[data-ui-theme='tactile-pop'] .ripple,
html[data-ui-theme='tactile-pop'] .ui-ripple,
html[data-ui-theme='tactile-pop'] .m-btn::after { display: none !important; }

body.reduce-motion #victory-fx { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #victory-fx { display: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Responsive / RTL                                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  html[data-ui-theme='tactile-pop'] #menu #pane-settings { padding-inline: 11px !important; }
  #pane-settings .settings-tab { min-height: 40px; padding-inline: 7px; font-size: 12px; }
  #pane-settings .theme-detail-strip > span { min-height: 56px; font-size: 8px; }
}

@media (min-width: 560px) {
  #pane-settings .theme-choice-grid { grid-template-columns: 1fr 1fr; }
  #pane-settings .theme-choice { grid-template-columns: 1fr; }
  #pane-settings .theme-preview { min-height: 132px; }
  #pane-settings .theme-preview-board { left: 22px; top: 25px; transform: rotate(-8deg) scale(1.18); }
}

[dir='rtl'] #pane-settings .theme-choice { text-align: right; }
[dir='rtl'] #pane-settings .theme-preview-card { right: auto; left: 10px; transform: rotate(-10deg); }
[dir='rtl'] #pane-settings .theme-preview-piece { right: auto; left: 31px; }