:root {
  --bg-color: #0b2b11; --table-bg: #154d20; --card-bg: #ffffff;
  --border-color: #ffce00; --panel-bg: rgba(0, 0, 0, 0.4);
  --card-red: #d32f2f; --card-black: #111; --text: #ffffff;
  --text-dim: #8eb395; --text-accent: #a3d9ad; --positive: #8ef98e; --negative: #ff8e8e;
  --btn-primary: #ffce00; --btn-primary-text: #111; --btn-secondary: #3a6b43;
  --btn-secondary-text: #fff; --btn-danger: #d32f2f; --btn-danger-text: #fff;
  --card-back-bg: linear-gradient(#065f46, #047857);
  --cb-bg: #065f46;
  --cb-accent: #fbbf24;
}

body.theme-wood { --bg-color: #2c1810; --table-bg: #4a2818; --card-bg: #fffbf0; --border-color: #e6b800; --panel-bg: rgba(44, 24, 16, 0.6); --btn-secondary: #5c3a21; }
body.theme-ocean { --bg-color: #0f172a; --table-bg: #0e4b6b; --card-bg: #f0f9ff; --border-color: #22d3ee; --panel-bg: rgba(15, 23, 42, 0.6); --btn-secondary: #1e40af; }
body.theme-crimson { --bg-color: #2a0a0a; --table-bg: #4a1010; --card-bg: #fff0f0; --border-color: #f43f5e; --panel-bg: rgba(42, 10, 10, 0.6); --btn-secondary: #881337; }
body.theme-royal { --bg-color: #1a0d2e; --table-bg: #3d1a5c; --card-bg: #faf5ff; --border-color: #eab308; --panel-bg: rgba(26, 13, 46, 0.65); --btn-secondary: #5b21b6; }
body.theme-slate { --bg-color: #1e293b; --table-bg: #334155; --card-bg: #f1f5f9; --border-color: #94a3b8; --panel-bg: rgba(30, 41, 59, 0.7); --btn-secondary: #475569; }
body.theme-sunset { --bg-color: #2b1006; --table-bg: #5c2410; --card-bg: #fff7ed; --border-color: #f97316; --panel-bg: rgba(43, 16, 6, 0.7); --btn-secondary: #9a3412; }

.card-back.cb-bg-emerald { --cb-bg: #065f46; }
.card-back.cb-bg-royal   { --cb-bg: #4c1d95; }
.card-back.cb-bg-navy    { --cb-bg: #1e3a8a; }
.card-back.cb-bg-ruby    { --cb-bg: #7f1d1d; }
.card-back.cb-bg-carbon  { --cb-bg: #0f172a; }
.card-back.cb-bg-teal    { --cb-bg: #0f766e; }
.card-back.cb-bg-amber   { --cb-bg: #b45309; }
.card-back.cb-bg-ink     { --cb-bg: #111827; }
.card-back.cb-bg-ivory   { --cb-bg: #fef9e7; }
.card-back.cb-bg-forest  { --cb-bg: #14532d; }

.card-back.cb-line-gold     { --cb-accent: #fbbf24; }
.card-back.cb-line-silver   { --cb-accent: #cbd5e1; }
.card-back.cb-line-rose     { --cb-accent: #fb7185; }
.card-back.cb-line-electric { --cb-accent: #60a5fa; }
.card-back.cb-line-lime     { --cb-accent: #a3e635; }
.card-back.cb-line-crimson  { --cb-accent: #dc2626; }
.card-back.cb-line-white    { --cb-accent: #ffffff; }
.card-back.cb-line-copper   { --cb-accent: #f97316; }
.card-back.cb-line-violet   { --cb-accent: #a78bfa; }
.card-back.cb-line-black    { --cb-accent: #000000; }

.card-back.cb-pat-diagonal {
  --card-back-bg: repeating-linear-gradient(45deg, var(--cb-bg) 0 10px, var(--cb-accent) 10px 20px);
}
.card-back.cb-pat-pinstripe {
  --card-back-bg: repeating-linear-gradient(90deg, var(--cb-bg) 0 14px, var(--cb-accent) 14px 16px);
}
.card-back.cb-pat-dots {
  --card-back-bg:
    radial-gradient(circle at 0px 0px, var(--cb-accent) 2px, transparent 3px),
    radial-gradient(circle at 8px 8px, var(--cb-accent) 2px, transparent 3px),
    var(--cb-bg);
  background-size: 16px 16px, 16px 16px, auto !important;
}
.card-back.cb-pat-dotgrid {
  --card-back-bg:
    radial-gradient(circle, var(--cb-accent) 3px, transparent 4px),
    var(--cb-bg);
  background-size: 30px 30px, auto !important;
}
.card-back.cb-pat-lattice {
  --card-back-bg:
    repeating-linear-gradient(45deg, transparent 0 8px, var(--cb-accent) 8px 9px, transparent 9px 18px),
    repeating-linear-gradient(-45deg, transparent 0 8px, var(--cb-accent) 8px 9px, transparent 9px 18px),
    var(--cb-bg);
}
.card-back.cb-pat-rings {
  --card-back-bg:
    radial-gradient(circle at center,
      transparent 0 30%,
      var(--cb-accent) 30% 38%,
      transparent 38% 65%,
      var(--cb-accent) 65% 73%,
      transparent 73%),
    var(--cb-bg);
}
.card-back.cb-pat-weave {
  --card-back-bg:
    repeating-linear-gradient(0deg, transparent 0 8px, var(--cb-accent) 8px 9px, transparent 9px 16px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--cb-accent) 8px 9px, transparent 9px 16px),
    var(--cb-bg);
}
.card-back.cb-pat-grid {
  --card-back-bg:
    repeating-linear-gradient(0deg, transparent 0 20px, var(--cb-accent) 20px 21px, transparent 21px 40px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--cb-accent) 20px 21px, transparent 21px 40px),
    var(--cb-bg);
}
.card-back.cb-pat-chevron {
  --card-back-bg:
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--cb-accent) 6px 9px, transparent 9px 15px),
    repeating-linear-gradient(45deg, var(--cb-bg) 0 6px, var(--cb-accent) 6px 9px, var(--cb-bg) 9px 15px);
}
.card-back.cb-pat-quilt {
  --card-back-bg:
    repeating-linear-gradient(45deg, transparent 0 20px, var(--cb-accent) 20px 23px, transparent 23px 40px),
    repeating-linear-gradient(-45deg, transparent 0 20px, var(--cb-accent) 20px 23px, transparent 23px 40px),
    var(--cb-bg);
}
.card-back.cb-pat-checker {
  --card-back-bg:
    linear-gradient(45deg, var(--cb-accent) 25%, transparent 25% 75%, var(--cb-accent) 75%),
    linear-gradient(45deg, var(--cb-accent) 25%, transparent 25% 75%, var(--cb-accent) 75%),
    var(--cb-bg);
  background-size: 20px 20px, 20px 20px, auto !important;
  background-position: 0 0, 10px 10px, 0 0 !important;
}
.card-back.cb-pat-scale {
  --card-back-bg:
    radial-gradient(circle at 50% 100%, transparent 10px, var(--cb-accent) 11px 12px, transparent 13px),
    var(--cb-bg);
  background-size: 24px 12px, auto !important;
}
.card-back.cb-pat-bloom {
  --card-back-bg:
    radial-gradient(circle at 50% 0%, var(--cb-accent) 2px, transparent 3px),
    radial-gradient(circle at 50% 100%, var(--cb-accent) 2px, transparent 3px),
    radial-gradient(circle at 0% 50%, var(--cb-accent) 2px, transparent 3px),
    radial-gradient(circle at 100% 50%, var(--cb-accent) 2px, transparent 3px),
    var(--cb-bg);
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, auto !important;
}
.card-back.cb-pat-sunburst {
  --card-back-bg:
    repeating-conic-gradient(from 0deg at 50% 50%, var(--cb-accent) 0deg 15deg, transparent 15deg 30deg),
    var(--cb-bg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-color); }
body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
  color: var(--text); text-align: center; 
  height: 100vh; width: 100vw; overflow: hidden; 
  display: flex; justify-content: center; align-items: center; 
}
.hidden { display: none !important; }

#game-stage { 
  position: relative;
  width: 1920px; height: 1080px;
  background: var(--bg-color); 
  flex-shrink: 0;
}

.ui-btn, .ui-select { 
  padding: 8px 16px; font-size: 16px; margin: 5px; border-radius: 6px; 
  border: none; outline: none; cursor: pointer; font-weight: bold; white-space: nowrap; 
  height: 42px; display: flex; align-items: center; justify-content: center;
}
button.ui-btn { background: var(--btn-primary); color: var(--btn-primary-text); }
button.ui-btn:hover { filter: brightness(1.1); }
button.secondary { background: var(--btn-secondary); color: var(--btn-secondary-text); }
button.danger { background: var(--btn-danger); color: var(--btn-danger-text); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.ui-select { 
  background: rgba(0,0,0,0.3); 
  color: var(--text); 
  border: 1px solid rgba(255,255,255,0.2); 
  appearance: none; 
  text-align: center; 
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.ui-select:hover { border-color: rgba(255,255,255,0.4); }

.auth-input, .swish-receiver-input, .swish-input {
  padding: 10px 16px; font-size: 16px; border-radius: 6px; 
  border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); 
  color: var(--text); text-align: center; margin-bottom: 10px; width: 100%;
}

.swish-receiver-wrap { position: relative; width: 100%; }
.swish-results {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  z-index: 20;
  text-align: left;
}
.swish-result-item { padding: 10px 16px; cursor: pointer; font-size: 15px; color: var(--text); }
.swish-result-item:hover { background: rgba(255,255,255,0.1); }
.swish-results-empty { padding: 10px 16px; color: #aaa; font-size: 14px; text-align: center; }
.swish-modal-content { overflow: visible; }

.mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; }
.full-width { width: 100%; }
.text-center { text-align: center; }
.highlight-text { color: var(--border-color); }
.text-dim { color: var(--text-dim); }

.click-dust {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}