* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--ink: #2b3a67;
--ink-light: #3f5390;
--red: #d64545;
--red-light: #ef6a6a;
--text: #22283b;
--muted: #6b7280;
--bg: #f5f6fb;
--card: #ffffff;
--border: #e5e7ef;
--footer-bg: #1c2440;
--footer-text: #aab0c8;
--radius: 14px;
--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
}

html, body {
height: 100%;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text);
background: linear-gradient(120deg, #eef1fb, #f6eef4, #eaf7f2, #f5f6fb);
background-size: 300% 300%;
animation: bgDrift 20s ease infinite;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.app {
flex: 1;
width: 100%;
}

/* ------- Header (full-bleed color band, distinct from body) ------- */
.site-header-band {
background: linear-gradient(120deg, var(--ink) 0%, var(--ink-light) 100%);
box-shadow: 0 2px 18px rgba(16, 24, 40, .2);
}
.site-header {
  flex-wrap: wrap;
  row-gap: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
max-width: 1320px;
margin: 0 auto;
color: #fff;
}
.brand {
  flex-shrink: 0;
  min-width: 0;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.brand-logo { width: 36px; height: 36px; flex-shrink: 0; }
.brand-name {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
}
.brand-name span { color: var(--red-light); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions button { white-space: nowrap; }
.header-actions button.ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.header-actions button.ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }

.points-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff7e6;
color: #92610a;
border: 1px solid #f4dfab;
border-radius: 999px;
padding: 6px 14px;
font-weight: 700;
font-size: 0.92rem;
}

.avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: #fff;
color: var(--ink);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.95rem;
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

/* ------- Footer (full-bleed color band, distinct from body) ------- */
.site-footer-band {
background: var(--footer-bg);
margin-top: 48px;
}
.site-footer {
max-width: 1320px;
margin: 0 auto;
padding: 26px 20px;
color: var(--footer-text);
font-size: 0.88rem;
text-align: center;
line-height: 1.7;
}
.site-footer a { color: #fff; text-decoration: none; margin: 0 8px; }
.site-footer a:hover { text-decoration: underline; }

/* ------- Buttons / inputs ------- */
button, select, input {
font-family: inherit;
font-size: 0.95rem;
color: var(--text);
}
button {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 9px 18px;
cursor: pointer;
font-weight: 600;
transition: all .15s ease;
}
button:hover { border-color: var(--ink); transform: translateY(-1px); }
button.primary {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
button.primary:hover { background: var(--ink-light); }
button.danger { color: var(--red); border-color: #f3c9c9; }
button.ghost { background: transparent; border-color: transparent; }
button.small { padding: 6px 12px; font-size: 0.85rem; }
button:disabled { opacity: .5; cursor: default; transform: none; }

.mode-btn.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.online-btn { border-style: dashed; }
.letter-btn.selected { background: var(--ink); border-color: var(--ink); color: #fff; }

select, input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
background: var(--card);
}
select:focus, input:focus { outline: 2px solid var(--ink-light); outline-offset: 1px; }

/* ------- Layout screens ------- */
.screen {
display: none;
max-width: 1320px;
margin: 0 auto;
width: 100%;
padding: 24px 20px 60px;
box-sizing: border-box;
}
.screen.active { display: block; }
@media (min-width: 760px) {
.screen { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1100px) {
.screen { padding-left: 64px; padding-right: 64px; }
}

.card-panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
}

h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.subtitle { color: var(--muted); font-size: 1.05rem; margin-bottom: 24px; }
.center { text-align: center; margin-top: 18px; }
.hint { text-align: center; color: var(--muted); font-size: 0.95rem; margin-top: 8px; }

/* ------- Landing hero ------- */
.hero {
text-align: center;
padding: 56px 20px 46px;
margin-bottom: 8px;
border-radius: 22px;
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(900px 380px at 12% -25%, rgba(214,69,69,.38), transparent 60%),
radial-gradient(700px 380px at 100% 0%, rgba(34,195,166,.22), transparent 55%),
linear-gradient(160deg, #1a1440 0%, var(--ink) 55%, var(--ink-light) 100%);
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.28);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 16px;
position: relative;
z-index: 2;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #6fe6cf; display: inline-block; }
.hero h1 { font-size: clamp(1.6rem, 5.4vw, 2.6rem); margin-bottom: 10px; color: #fff; line-height: 1.15; overflow-wrap: break-word; position: relative; z-index: 2; }
.hero .subtitle { font-size: clamp(0.92rem, 2.6vw, 1.15rem); max-width: 520px; margin: 0 auto 28px; color: rgba(255,255,255,.82); overflow-wrap: break-word; position: relative; z-index: 2; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.hero-actions button.primary { background: linear-gradient(135deg,#ffcf7a,#f0a83a); border-color: transparent; color: #4a2e02; }
.hero-actions button.primary:hover { background: linear-gradient(135deg,#ffe0a3,#f5b754); }
.hero-actions button:not(.primary) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }
.hero-actions button:not(.primary):hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* ------- Game menu cards ------- */
.menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-top: 28px;
}
.card {
min-width: 0; /* fix: allow card to shrink below its content size inside the 2-col mobile grid, was overflowing the viewport */
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 16px;
text-align: center;
background: var(--card);
box-shadow: var(--shadow);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
font-size: 1.05rem;
font-weight: 600;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,24,40,.1); }
.card:active { transform: scale(.96); }
.card .icon {
font-size: 1.9rem;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin: 0 auto 12px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(214,69,69,.14), rgba(214,69,69,.28));
}
.card:nth-child(4n+2) .icon { background: linear-gradient(135deg, rgba(63,83,144,.14), rgba(63,83,144,.28)); }
.card:nth-child(4n+3) .icon { background: linear-gradient(135deg, rgba(34,195,166,.14), rgba(34,195,166,.28)); }
.card:nth-child(4n+4) .icon { background: linear-gradient(135deg, rgba(240,168,58,.14), rgba(240,168,58,.28)); }
.card.soon { opacity: .5; cursor: default; }
.card.soon:hover { transform: none; box-shadow: var(--shadow); }
.card .tag {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
font-size: 0.78rem;
font-weight: 600;
color: var(--red);
background: #fdeeee;
border-radius: 999px;
padding: 2px 10px;
margin-top: 8px;
}
.card { min-height: 132px; }

.settings {
display: flex;
gap: 12px 18px;
justify-content: center;
align-items: center;
margin: 16px 0;
flex-wrap: wrap;
font-size: 1rem;
}
.settings label { color: var(--muted); }

/* ------- Board ------- */
.board-wrap {
width: min(440px, 88vw);
height: min(440px, 88vw);
margin: 20px auto;
position: relative;
}
.board { width: 100%; height: 100%; display: grid; background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay line { stroke-linecap: round; opacity: .8; animation: draw .35s ease; }
@keyframes draw { 0% { opacity: 0; } 100% { opacity: .8; } }
.cell {
display: flex; align-items: center; justify-content: center;
font-family: 'Caveat', cursive; font-weight: 700;
cursor: pointer; user-select: none;
}
.cell.bR { border-right: 1px solid var(--border); }
.cell.bB { border-bottom: 1px solid var(--border); }
.cell.x { color: var(--ink); }
.cell.o { color: var(--red); }
.cell.win { background: #fff6d6; }
.cell.locked { background: #f0f1f6; opacity: .78; }
.cell.last { background: #eef2ff; }
.cell span { animation: pop .22s ease; display: block; }
@keyframes pop { 0% { transform: scale(0) rotate(-15deg); } 100% { transform: scale(1) rotate(0); } }

.status { text-align: center; font-size: 1.25rem; font-weight: 600; line-height: 32px; min-height: 32px; }
.score-row { display: flex; justify-content: center; gap: 28px; font-size: 1.05rem; margin-top: 10px; color: var(--muted); font-weight: 600; }

/* ------- SOS ------- */
.cell.neutral { color: var(--muted); }

/* ------- Dots & Boxes ------- */
.dab-wrap { width: min(420px, 88vw); height: min(420px, 88vw); margin: 20px auto; }
.dab-grid { width: 100%; height: 100%; display: grid; }
.dab-dot { width: 8px; height: 8px; background: var(--text); border-radius: 50%; align-self: center; justify-self: center; }
.hedge, .vedge {
background: #e8eaf3; border-radius: 5px; cursor: pointer;
transition: background .12s; align-self: center; justify-self: stretch;
}
.hedge { height: 8px; width: 100%; }
.vedge { width: 8px; height: 100%; justify-self: center; align-self: stretch; }
.hedge:hover, .vedge:hover { background: #c9cee3; }
.hedge.taken, .vedge.taken { cursor: default; }
.hedge.p1, .vedge.p1 { background: var(--ink) !important; }
.hedge.p2, .vedge.p2 { background: var(--red) !important; }
.dab-box { display: flex; align-items: center; justify-content: center; font-family: 'Caveat', cursive; font-weight: 700; border-radius: 8px; }
.dab-box.p1 { color: var(--ink); background: #eef1fb; }
.dab-box.p2 { color: var(--red); background: #fdeeee; }
.dab-box span { animation: pop .22s ease; }

/* ------- Online screen ------- */
#online .status { margin-top: 10px; }
.online-note { text-align: center; color: var(--red); font-size: 0.95rem; margin-top: 6px; }

/* ------- Color Clash ------- */
/* The whole board sits on a deep indigo "arena" so the deck, the last-played
card, and every hand read as pieces on a shared playing surface. */
.cc-table {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: 10px;
  background: radial-gradient(ellipse at 50% 40%, #364274 0%, #2a3357 65%, #202844 100%);
  border: 6px solid #161c33;
  border-radius: 26px;
  padding: 26px 16px 30px;
  box-shadow: inset 0 0 44px rgba(0,0,0,.35), 0 10px 26px rgba(16,24,40,.28);
}
.cc-opponent { text-align: center; }
.cc-opp-label {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cc-my-label { color: #e7ebfb; font-size: 0.95rem; font-weight: 700; margin-top: 4px; }

.cc-hand-panel {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 16px 16px 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cc-hand-panel .cc-my-label { margin-top: 0; }

.cc-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }

/* Original RivalPit card face: solid suit color with a rotated-diamond badge
behind the value (deliberately unlike any oval-based commercial deck). */
.cc-card {
  position: relative;
  width: 68px; height: 100px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.45rem; color: #fff;
  box-shadow: 0 3px 8px rgba(16,24,40,.22);
  border: 2px solid rgba(255,255,255,.6);
  user-select: none; flex-shrink: 0;
  transition: transform .12s ease;
  overflow: hidden;
}
.cc-card::before {
  content: '';
  position: absolute;
  width: 58%; height: 58%;
  background: rgba(255,255,255,.24);
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 8px;
  transform: rotate(45deg);
}
.cc-card span { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cc-card.ruby { background: #c92a4e; }
.cc-card.amber { background: #e8871e; }
.cc-card.teal { background: #12897b; }
.cc-card.violet { background: #6c4bd8; }
.cc-card.wild { background: conic-gradient(from 45deg, #c92a4e 0 25%, #e8871e 25% 50%, #12897b 50% 75%, #6c4bd8 75% 100%); }

.cc-card-back {
  background: repeating-linear-gradient(135deg, #232a4a, #232a4a 6px, #38406b 6px, #38406b 12px);
  color: transparent;
}
.cc-card-back::before { display: none; }
.cc-card-back::after {
  content: '⚡';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: rgba(255,255,255,.55);
}
.cc-hand-back .cc-card-back { width: 52px; height: 76px; }

.cc-card.playable { cursor: pointer; }
.cc-card.playable:hover { transform: translateY(-8px) scale(1.03); }

.cc-middle { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: 4px 0; }
.cc-pile {
  display: flex; align-items: flex-end; justify-content: center; gap: 30px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  padding: 22px 36px;
  width: min(440px, 94%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.2);
}
.cc-pile-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cc-pile-label { color: #e7ebfb; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
#cc-discard .cc-card, #cc-cpu-discard .cc-card {
  width: 96px; height: 140px; font-size: 2rem; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  border: 3px solid rgba(255,255,255,.8);
}
.cc-deck { font-size: 0.95rem; }
.cc-deck::after { content: none; }
.cc-deck span { font-family: 'Inter', sans-serif; position: relative; z-index: 1; color: #fff; }
.cc-color-indicator {
  display: inline-block;
  font-weight: 700; font-size: 0.95rem; color: #fff;
  background: rgba(255,255,255,.12);
  padding: 7px 16px;
  border-radius: 999px;
}
.cc-color-word.ruby { color: #ff93ac; }
.cc-color-word.amber { color: #ffc07d; }
.cc-color-word.teal { color: #6fe3d2; }
.cc-color-word.violet { color: #bda6ff; }

.cc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 4px 0; }

.cc-wild-picker {
  margin-top: 16px; text-align: center; background: #fff7e6; border: 1px solid #f4dfab;
  border-radius: 10px; padding: 14px 16px;
}
.cc-color-choices { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.cc-color-btn { color: #fff; border: none; font-weight: 700; padding: 10px 18px; }
.cc-color-btn.ruby { background: #c92a4e; }
.cc-color-btn.amber { background: #e8871e; }
.cc-color-btn.teal { background: #12897b; }
.cc-color-btn.violet { background: #6c4bd8; }

.cc-opponents-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cc-cpu-panel { padding: 8px 10px; border-radius: 10px; transition: background .15s; }
.cc-cpu-panel.active { background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
/* Whoever's turn it is gets the brand-red badge instead of navy, so the
active player is obvious at a glance. */
.cc-cpu-panel.active .cc-opp-label { background: var(--red); }

/* The card a CPU (or, in online play, the opponent) most recently played
shows face up in miniature under their badge -- their hand stays hidden as
card-backs, but this one card makes it obvious who played what. */
.cc-just-played {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 8px;
}
.cc-just-played-label {
  color: #ffd873; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.cc-just-played-card .cc-card {
  width: 46px; height: 66px; font-size: 1.05rem; border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  border-color: #ffd873;
}

/* ------- Auth forms ------- */
.auth-wrap { max-width: 400px; margin: 20px auto; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; justify-content: center; }
.form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.form-field input, .form-field select { width: 100%; }
.form-row { display: flex; gap: 10px; }
.form-row .form-field { flex: 1; }
.checkbox-field { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; font-size: 0.88rem; color: var(--muted); }
.checkbox-field input { margin-top: 3px; }
.form-error { color: var(--red); font-size: 0.88rem; margin: 8px 0; min-height: 18px; }
.form-success { color: #1a8a4a; font-size: 0.88rem; margin: 8px 0; }

/* ------- Dashboard ------- */


.dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-light) 55%, var(--red) 130%);
  background-size: 200% 200%;
  animation: dashHeroShift 10s ease infinite;
  box-shadow: var(--shadow);
}
.dash-hero-content { position: relative; z-index: 2; }
.dash-hero h1 { color: #fff; margin: 0 0 8px; }
.dash-hero .subtitle { color: rgba(255,255,255,.85); margin: 0; }
.dash-hero-orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  filter: blur(2px);
  animation: dashOrbFloat 8s ease-in-out infinite;
  pointer-events: none;
}
.dash-hero-orb-1 { width: 140px; height: 140px; top: -50px; right: 40px; animation-delay: 0s; }
.dash-hero-orb-2 { width: 90px; height: 90px; bottom: -30px; right: 160px; background: rgba(214,69,69,.3); animation-delay: 1.5s; }
.dash-hero-orb-3 { width: 60px; height: 60px; top: 20px; left: 55%; background: rgba(255,255,255,.08); animation-delay: 3s; }
.dash-hero-icon {
  position: absolute;
  font-size: 34px;
  opacity: .22;
  z-index: 1;
  pointer-events: none;
  animation: dashIconSpin 9s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.dash-hero-icon-1 { top: 10%; right: 8%; font-size: 40px; animation-duration: 8s; animation-delay: 0s; }
.dash-hero-icon-2 { bottom: 12%; right: 24%; font-size: 26px; animation-duration: 10s; animation-delay: 1.2s; }
.dash-hero-icon-3 { top: 55%; right: 4%; font-size: 30px; animation-duration: 7s; animation-delay: 2.4s; }
.dash-hero-icon-4 { top: 8%; left: 62%; font-size: 24px; animation-duration: 11s; animation-delay: .6s; }
.dash-hero-icon-5 { bottom: 8%; left: 72%; font-size: 28px; animation-duration: 9s; animation-delay: 3.2s; }
@keyframes dashIconSpin {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(20deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@media (max-width: 480px) {
.dash-hero-icon { display: none; }
}

@keyframes dashHeroShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes dashOrbFloat { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-14px) translateX(8px); } }
@media (max-width: 480px) {
.dash-hero { padding: 24px 20px; }
.dash-hero-orb-3 { display: none; }
}

.dash-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
@media (min-width: 760px) {
.dash-grid { grid-template-columns: 300px 1fr; align-items: start; grid-auto-flow: row dense; }
.dash-grid > *:nth-child(1) { grid-column: 2; order: 2; }
.dash-grid > *:nth-child(2) { grid-column: 1; order: 1; }
.dash-grid > *:nth-child(3) { grid-column: 1; order: 1; }
}
.profile-card-header { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem;
}
.profile-name { font-weight: 700; font-size: 1.1rem; }
.profile-points { color: var(--muted); font-size: 0.9rem; }

/* ------- Dashboard profile redesign: flag + boxed info chips ------- */
.profile-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-flag { font-size: 1.35rem; line-height: 1; }
.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
.info-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(43, 58, 103, 0.07);
}
.info-chip.chip-red { background: rgba(239, 106, 106, 0.14); }
.info-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
}
.info-chip.chip-red .info-chip-icon { background: var(--red-light); }
.info-chip-text { display: flex; flex-direction: column; min-width: 0; }
.info-chip-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.info-chip-value { font-size: 0.92rem; font-weight: 700; color: var(--text); overflow-wrap: break-word; }

.section-title { font-weight: 700; margin: 22px 0 10px; font-size: 1.05rem; }
.friend-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid var(--border);
}
.friend-row:last-child { border-bottom: none; }
.friend-name { font-weight: 600; }
.friend-actions { display: flex; gap: 6px; }
.empty-state { color: var(--muted); font-size: 0.9rem; padding: 10px 0; }

.add-friend-row { display: flex; gap: 8px; margin-top: 12px; }
.add-friend-row input { flex: 1; }

.room-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.room-form .settings { justify-content: flex-start; margin: 0; }

/* ------- Game panel (keeps board area visually separate from the page) ------- */
.game-panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 22px 20px 28px;
margin-top: 14px;
}
.game-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ------- Google sign-in ------- */
.google-btn-slot { display: flex; justify-content: center; margin: 6px 0 4px; min-height: 40px; }
.or-divider {
display: flex; align-items: center; gap: 12px;
color: var(--muted); font-size: 0.85rem; margin: 16px 0;
}
.or-divider::before, .or-divider::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ------- Modal (used for Game Rules) ------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(20, 24, 40, .55);
display: flex; align-items: center; justify-content: center;
padding: 20px; z-index: 100;
}
.modal-box {
max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
position: relative; padding: 32px 28px 28px;
}
.modal-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; padding: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
}

/* ------- Game Rules content (big, clear, kid-friendly) ------- */
.rules-icon { display: block; margin: 0 auto 14px; width: 92px; height: 92px; }
.rules-title { font-size: 1.7rem; font-weight: 800; text-align: center; margin-bottom: 4px; }
.rules-subtitle { text-align: center; color: var(--muted); font-size: 1.05rem; margin-bottom: 22px; }
.rules-steps { display: flex; flex-direction: column; gap: 16px; }
.rules-step { display: flex; gap: 14px; align-items: flex-start; }
.rules-step-num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--ink); color: #fff; font-weight: 800; font-size: 1.05rem;
display: flex; align-items: center; justify-content: center;
}
.rules-step p { font-size: 1.12rem; line-height: 1.55; }
.rules-tip {
margin-top: 20px; background: #fff7e6; border: 1px solid #f4dfab;
border-radius: 10px; padding: 14px 16px; font-size: 1.05rem; line-height: 1.5;
}

/* ------- Chess ------- */
.chess-settings { margin-bottom: 4px; }
.chess-main { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin-top: 12px; }
.chess-board-wrap { position: relative; width: min(480px, 92vw); aspect-ratio: 1 / 1; flex-shrink: 0; }
.chess-board { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(16,24,40,.18); border: 4px solid var(--ink); }
.chess-squares { position: absolute; inset: 0; }
.chess-square { position: absolute; width: 12.5%; height: 12.5%; cursor: pointer; box-sizing: border-box; }
.chess-square.light { background: #f0d9b5; }
.chess-square.dark { background: #946f51; }
.chess-square.sel { box-shadow: inset 0 0 0 3px #f4c95d; }
.chess-square.last-from, .chess-square.last-to { background-color: rgba(246,221,101,.65); }
.chess-square.in-check { animation: chPulseCheck .9s ease-in-out infinite; }
.chess-square.move-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; background: rgba(43,58,103,.45); border-radius: 50%; transform: translate(-50%,-50%); }
.chess-square.move-capture::after { content: ''; position: absolute; inset: 7%; border: 4px solid rgba(214,69,69,.65); border-radius: 50%; box-sizing: border-box; }
.chess-coords { position: absolute; inset: 0; pointer-events: none; }
.chess-file-label, .chess-rank-label { position: absolute; font-size: 0.6rem; font-weight: 700; color: rgba(0,0,0,.35); }
.chess-file-label { bottom: 1px; width: 12.5%; padding-left: 3px; }
.chess-rank-label { right: 2px; padding-top: 1px; }
.chess-pieces { position: absolute; inset: 0; pointer-events: none; }
.chess-piece { position: absolute; width: 12.5%; height: 12.5%; display: flex; align-items: center; justify-content: center; font-size: min(9vw, 42px); user-select: none; transition: left .22s cubic-bezier(.4,0,.2,1), top .22s cubic-bezier(.4,0,.2,1), opacity .22s ease, transform .22s ease; }
.chess-piece.piece-w { color: #fdfdfd; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 1px #000; }
.chess-piece.piece-b { color: #111; text-shadow: 0 1px 1px rgba(255,255,255,.25); }
.chess-piece.chess-captured-fade { opacity: 0; transform: scale(.4); }
.chess-piece.chess-promo-pop { animation: chPromoPop .26s ease; }
@keyframes chPromoPop { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes chPulseCheck { 0%, 100% { background-color: rgba(214,69,69,.35); } 50% { background-color: rgba(214,69,69,.6); } }
.chess-side { width: 220px; max-width: 80vw; display: flex; flex-direction: column; gap: 10px; }
.chess-clock-row { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 2px; }
.chess-clock { flex: 1; text-align: center; font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border); color: var(--text); transition: background .2s, color .2s, border-color .2s; }
.chess-clock:empty { display: none; }
.chess-clock.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chess-clock.low { background: var(--red); color: #fff; border-color: var(--red); animation: chessClockLowPulse 1s infinite; }
@keyframes chessClockLowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,.5); } 50% { box-shadow: 0 0 0 4px rgba(214,69,69,0); } }

.chess-captured { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 1.15rem; min-height: 20px; line-height: 1.3; }
.chess-captured-label { display: block; font-size: 0.68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.chess-movelist { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; max-height: 220px; overflow-y: auto; font-size: 0.85rem; }
.chess-move-row { display: flex; gap: 8px; padding: 2px 0; }
.chess-move-num { color: var(--muted); width: 24px; flex-shrink: 0; }
.chess-move-white, .chess-move-black { flex: 1; font-weight: 600; }
.chess-promo-overlay { position: absolute; inset: 0; background: rgba(20,24,40,.55); display: none; align-items: center; justify-content: center; z-index: 5; border-radius: 10px; }
.chess-promo-overlay.show { display: flex; }
.chess-promo-box { background: #fff; border-radius: 12px; padding: 14px; display: flex; gap: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.chess-promo-btn { width: 56px; height: 56px; font-size: 2rem; border-radius: 10px; border: 1px solid var(--border); background: #f5f6fb; cursor: pointer; padding: 0; }
.chess-promo-btn:hover { background: #eef0fb; border-color: var(--ink); }
.chess-gameover { display: none; margin-top: 14px; text-align: center; font-weight: 700; font-size: 1.05rem; background: #fff7e6; border: 1px solid #f4dfab; border-radius: 10px; padding: 14px; }
.chess-gameover.show { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chess-sound-toggle { font-weight: 600; color: var(--muted); }

/* ------- Friends box fix: input no longer overflows the card on narrow
screens (flex items default to min-width:auto, which let the input's
intrinsic width push past the card edge). ------- */
.add-friend-row { flex-wrap: wrap; }
.add-friend-row input { min-width: 120px; }

/* ------- Game rules hint text: more breathing room + a subtle divider
instead of sitting right under the board. ------- */
.hint { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); line-height: 1.6; }

/* ------- Profile stats + avatar picker (dashboard) ------- */
.profile-avatar { font-size: 1.6rem; cursor: pointer; }
.profile-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.profile-stat { text-align: center; }
.profile-stat-num { font-weight: 800; font-size: 1.15rem; color: var(--ink); display: block; }
.profile-stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.avatar-picker-trigger { font-size: 0.82rem; color: var(--ink-light); font-weight: 600; cursor: pointer; margin-top: 4px; background: none; border: none; padding: 0; }
.avatar-picker-trigger:hover { text-decoration: underline; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.avatar-choice {
width: 54px; height: 54px; border-radius: 50%; font-size: 1.6rem;
display: flex; align-items: center; justify-content: center;
background: var(--bg); border: 2px solid var(--border); cursor: pointer;
transition: transform .12s ease, border-color .12s ease;
}
.avatar-choice:hover { transform: translateY(-2px); border-color: var(--ink-light); }
.avatar-choice.selected { border-color: var(--ink); background: #eef1fb; }

/* ------- Per-game stats accordion (dashboard) ------- */
.accordion-item {
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 8px;
overflow: hidden;
}
.accordion-item:last-child { margin-bottom: 0; }
.accordion-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--card);
border: none;
border-radius: 0;
padding: 12px 14px;
font-weight: 700;
cursor: pointer;
}
.accordion-header:hover { transform: none; background: #f5f6fb; }
.accordion-summary { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.accordion-body {
display: none;
padding: 4px 14px 16px;
gap: 18px;
flex-wrap: wrap;
}
.accordion-item.open .accordion-body { display: flex; }
.accordion-item.open .accordion-header { border-bottom: 1px solid var(--border); }

/* ------- Friends online indicator + "show me as active" toggle ------- */
.online-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
background: #2e8b57;
margin-right: 7px;
box-shadow: 0 0 0 2px #e4f5ea;
}
.activity-toggle-row { margin-top: 10px; }
#activity-toggle-btn.active { background: #2e8b57; border-color: #2e8b57; color: #fff; }

/* ------- Dashboard redesign: brand-color top accent on every dashboard
card, distinct color-coded stat cards, and a friendlier custom-room panel. ------- */
.dash-panel { border-top: 4px solid var(--ink); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }

.profile-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
button.btn-outline { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
button.btn-outline:hover { background: #eef1fb; }

.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; margin-top: 16px; }
.stat-card {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 12px 6px; border-radius: 10px;
transition: transform .15s ease;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card-icon { font-size: 1.2rem; line-height: 1; }
.stat-card-num { font-weight: 800; font-size: 1.1rem; }
.stat-card-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.stat-wins { background: #eafaf1; }
.stat-wins .stat-card-num { color: #1a8a4a; }
.stat-losses { background: #fdeeee; }
.stat-losses .stat-card-num { color: var(--red); }
.stat-draws { background: #eef1fb; }
.stat-draws .stat-card-num { color: var(--ink-light); }
.stat-played { background: #f0f1f6; }
.stat-played .stat-card-num { color: var(--ink); }
.stat-rank { background: #fff7e6; }
.stat-rank .stat-card-num { color: #92610a; }

.room-panel-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.room-panel-icon {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
background: var(--ink); color: #fff; font-size: 1.3rem;
display: flex; align-items: center; justify-content: center;
}
.room-panel-header h2 { margin-bottom: 4px; }
.room-panel-header .hint { text-align: left; margin: 0; padding: 0; border: none; }
.room-panel .room-form .form-field label { color: var(--muted); }

/* ------- Notification bell (friend requests) ------- */
.bell-btn {
position: relative;
background: rgba(255,255,255,.06);
border: 1.5px solid rgba(255,255,255,.45);
color: #fff;
border-radius: 10px;
padding: 8px 11px;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.bell-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.bell-badge {
position: absolute;
top: -6px; right: -6px;
background: var(--red);
color: #fff;
font-size: 0.68rem;
font-weight: 800;
min-width: 18px;
height: 18px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
box-shadow: 0 0 0 2px var(--ink);
}

/* ------- Toast notifications (friend requests, "username copied") ------- */
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 12px);
background: var(--ink);
color: #fff;
font-weight: 600;
font-size: 0.92rem;
padding: 12px 20px;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(16,24,40,.25);
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
z-index: 200;
max-width: 90vw;
text-align: center;
pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------- Your username (share this to be added as a friend) ------- */
.username-share-row {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.username-share-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.username-share-box {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: #f5f6fb; border: 1px solid var(--border); border-radius: 10px;
padding: 8px 12px; flex-wrap: wrap;
}
.username-share-box span { font-weight: 700; color: var(--ink); word-break: break-word; overflow-wrap: break-word; min-width: 0; flex: 1 1 auto; }

/* ------- Friends panel: incoming requests get a subtle highlight so they
stand out from the plain friends list underneath, and the "how to add a
friend" hint sits left-aligned without the page's usual centered divider
treatment. ------- */
.friend-row-incoming { background: #fff7e6; border-radius: 10px; padding: 10px 12px; border-bottom: none; margin-bottom: 6px; flex-direction: column; align-items: flex-start; gap: 8px; }
.friend-row-incoming .friend-actions { align-self: flex-end; }
.friends-hint { text-align: left; margin-top: 8px; padding-top: 0; border-top: none; font-size: 0.85rem; }

/* ------- Ludo ------- */
.ludo-top-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; flex-wrap: wrap; }
.ludo-dice {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 12px; background: #fff;
border: 2px solid var(--ink); font-size: 1.6rem; font-weight: 800; color: var(--ink);
box-shadow: var(--shadow);
}
.ludo-board-wrap { width: min(480px, 92vw); margin: 6px auto 16px; }
.ludo-board {
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
width: 100%;
aspect-ratio: 1 / 1;
background: #fff;
border: 3px solid var(--ink);
border-radius: 10px;
position: relative;
box-shadow: var(--shadow);
}
.ludo-cell { border: 0.5px solid #e5e7ef; position: relative; }
.ludo-path { background: #fafbff; }
.ludo-safe::after {
content: '★'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 55%; color: #c8ccdb; pointer-events: none;
}
.ludo-entry-red { background: #f6c9c9; }
.ludo-entry-green { background: #c6e6d3; }
.ludo-entry-yellow { background: #f6e3b8; }
.ludo-entry-blue { background: #c6cfe9; }
.ludo-home-red { background: #d64545; }
.ludo-home-green { background: #2e8b57; }
.ludo-home-yellow { background: #e0a72b; }
.ludo-home-blue { background: #2b3a67; }
.ludo-center {
background: conic-gradient(#d64545 0deg 90deg, #2b3a67 90deg 180deg, #e0a72b 180deg 270deg, #2e8b57 270deg 360deg);
}
.ludo-yard { border-radius: 12px; padding: 8%; box-sizing: border-box; }
.ludo-yard-red { background: #fbdede; }
.ludo-yard-green { background: #dcf0e4; }
.ludo-yard-yellow { background: #fbedcf; }
.ludo-yard-blue { background: #dde1f2; }
.ludo-yard-slots {
position: relative;
width: 100%; height: 100%;
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8%;
background: #fff; border-radius: 8px; padding: 8%; box-sizing: border-box;
}
.ludo-yard-slot { position: relative; border-radius: 50%; background: rgba(0,0,0,.04); }
.ludo-token {
position: absolute; inset: 8%;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(255,255,255,.8);
z-index: 2;
transform: translate(
calc((var(--stack-i, 0) - (var(--stack-n, 1) - 1) / 2) * 22%),
calc((var(--stack-i, 0) - (var(--stack-n, 1) - 1) / 2) * 22%)
);
}
.ludo-token-red { background: #d64545; }
.ludo-token-green { background: #2e8b57; }
.ludo-token-yellow { background: #e0a72b; }
.ludo-token-blue { background: #2b3a67; }
.ludo-token-mine { cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink), 0 2px 6px rgba(0,0,0,.4); }
.ludo-token-mine:hover { transform: scale(1.14); }
.ludo-players-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.ludo-player-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
background: #f0f1f6; font-weight: 700; font-size: 0.85rem; border: 2px solid transparent;
}
.ludo-player-chip.active { border-color: var(--red); background: #fff; }
.ludo-player-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* ------- Premium (header button + upgrade preview modal) ------- */
.premium-btn {
background: linear-gradient(135deg, #fff3d6, #ffe6a8);
border: 1.5px solid #e0a72b;
color: #7a4e05;
font-weight: 700;
}
.premium-btn:hover { background: linear-gradient(135deg, #ffe9b8, #ffdd8e); border-color: #c98a12; }
.premium-btn-active { background: linear-gradient(135deg, #e0a72b, #c98a12); color: #fff; border-color: #a8720d; }
.premium-feature-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 20px; }
.premium-feature { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; }

.ludo-yard-slots .ludo-token { inset: 30%; }


/* ---- Dice roll animation + sound toggle ---- */
.ludo-dice.rolling {
  animation: ludo-dice-spin 0.5s ease-in-out;
}
@keyframes ludo-dice-spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-18deg) scale(1.12); }
  50% { transform: rotate(14deg) scale(1.18); }
  75% { transform: rotate(-10deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}
.ludo-sound-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.ludo-sound-toggle:hover { border-color: var(--ink); }

/* ------- Friend actions modal + chat (game invite / direct chat from
the friends list) ------- */
.friend-name-clickable { cursor: pointer; transition: color .12s ease; }
.friend-name-clickable:hover { color: var(--ink-light); text-decoration: underline; }

.chat-modal-box { display: flex; flex-direction: column; max-height: 70vh; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 220px;
  max-height: 46vh;
}
.chat-message {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-message.mine {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-message.theirs {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input { flex: 1; }

/* ------- Actionable toast variant (game invites, chat messages) --
adds a Join/click affordance next to the plain auto-dismiss .toast used
for friend-request notifications. ------- */
.toast.toast-action {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.toast.toast-action button {
  pointer-events: auto;
  flex-shrink: 0;
}
.toast.toast-clickable { cursor: pointer; pointer-events: auto; }
.toast.show { pointer-events: auto; }


/* ------- Friend picker in the online challenge lobby (reuses .friend-row /
button.small.primary from the dashboard friends list, just tightens the
spacing so it reads as part of the lobby card rather than a separate box). ------- */
#online-lobby-friends { margin-bottom: 4px; }
#online-lobby-friends-list { margin-top: 4px; }
#online-lobby-friends .friend-row { padding: 8px 0; }


/* ------- Gomoku stones (reuses .board/.cell/.bR/.bB/.win/.last from the
   shared board styles above; stones are drawn as circles rather than
   text glyphs, so cells just center a colored dot). ------- */
/* Wooden goban look so BOTH stone colors pop (papergames-style): warm
timber field, darker grid lines, and glossy 3D stones with a specular
highlight and drop shadow. Applies to the offline board (#gmk-board) and
the online one (#online-gmk-board). */
#gmk-board, #online-gmk-board {
  background: linear-gradient(135deg, #eec98b 0%, #e3b56e 55%, #d9a75d 100%);
  border: 3px solid #b9884a;
}
#gmk-board .cell.bR, #online-gmk-board .cell.bR { border-right-color: rgba(122, 82, 32, .5); }
#gmk-board .cell.bB, #online-gmk-board .cell.bB { border-bottom-color: rgba(122, 82, 32, .5); }
#gmk-board .cell.win, #online-gmk-board .cell.win { background: rgba(255, 246, 190, .85); }
#gmk-board .cell.last, #online-gmk-board .cell.last { background: rgba(255, 255, 255, .38); }
.gmk-cell { cursor: pointer; }
.gmk-cell:hover { background: rgba(255, 255, 255, .28); }
.gmk-stone {
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  animation: pop .22s ease;
  position: relative;
}
/* specular highlight that sells the 3D ball */
.gmk-stone::after {
  content: '';
  position: absolute;
  left: 16%;
  top: 10%;
  width: 38%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%);
}
.gmk-stone.gmk-black {
  background: radial-gradient(circle at 32% 28%, #707689 0%, #23262f 48%, #04050a 100%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), inset 0 -4px 7px rgba(0, 0, 0, .55), inset 0 2px 3px rgba(255, 255, 255, .22);
}
.gmk-stone.gmk-black::after {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
}
.gmk-stone.gmk-white {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f0f1f5 45%, #b9bfd2 100%);
  box-shadow: 0 3px 7px rgba(70, 45, 12, .55), inset 0 -4px 7px rgba(0, 0, 0, .16), inset 0 2px 3px rgba(255, 255, 255, .95);
}


/* ================= Hangman ================= */
.hm-panel { text-align: center; }
.hm-categories { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 6px; }
.hm-cat-chip {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--bg);
  border: 1.5px solid var(--border);
  cursor: pointer;
}
.hm-cat-chip.selected { background: var(--ink); border-color: var(--ink); color: #fff; }

.hm-sound-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--muted); margin-left: 10px; cursor: pointer; }
.hm-sound-toggle input { cursor: pointer; }

.hm-stage { position: relative; display: flex; flex-direction: column; align-items: center; margin: 16px auto 8px; }
.hm-mascot { position: relative; width: clamp(120px, 32vw, 180px); height: clamp(120px, 32vw, 180px); display: flex; align-items: center; justify-content: center; }
.hm-blob {
  width: 100%; height: 100%;
  border-radius: 58% 42% 55% 45% / 55% 45% 60% 40%;
  background: linear-gradient(160deg, #b6a6ff, #8f7bff);
  box-shadow: 0 10px 24px rgba(111, 90, 220, .28);
  display: flex; align-items: center; justify-content: center;
  animation: hmFloat 3s ease-in-out infinite;
  transition: background .3s ease;
}
.hm-blob-sad { background: linear-gradient(160deg, #cfd3e8, #a9adc7); animation: none; }
.hm-blob-face { font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1; user-select: none; }
@keyframes hmFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.hm-shake { animation: hmShakeKf .4s ease; }
@keyframes hmShakeKf {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-3deg); }
  40% { transform: translateX(7px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  80% { transform: translateX(4px) rotate(2deg); }
}

.hm-lives { display: flex; gap: 4px; margin-top: 10px; font-size: 1.1rem; }
.hm-heart { transition: transform .2s ease; }
.hm-heart.spent { transform: scale(0.85); opacity: .5; }

.hm-category-label { text-align: center; color: var(--muted); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 12px; }

.hm-word { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; margin: 12px auto 8px; max-width: 480px; }
.hm-letter-box {
  width: clamp(24px, 7.5vw, 38px);
  height: clamp(32px, 9.5vw, 46px);
  border-bottom: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
}
.hm-letter-box.missed { color: var(--red); border-color: var(--red); opacity: .75; }
.hm-letter-box.hm-pop { animation: hmPopKf .26s ease; }
@keyframes hmPopKf { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }

.hm-gameover {
  text-align: center; font-weight: 700; font-size: 1.05rem;
  margin: 4px auto 14px; padding: 0; max-width: 480px;
  border-radius: 12px; background: var(--bg);
  display: none;
}
.hm-gameover.show { display: block; padding: 12px 16px; animation: hmPopKf .3s ease; }

.hm-confetti-bit { position: absolute; top: 0; font-size: 1.4rem; animation: hmConfettiFall 1.2s ease-out forwards; pointer-events: none; }
@keyframes hmConfettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(90px) rotate(200deg); opacity: 0; } }

.hm-keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 10px auto 0; max-width: 480px; width: 100%; }
.hm-kb-row { display: flex; gap: 5px; justify-content: center; width: 100%; }
.hm-key {
  flex: 1;
  min-width: 0;
  max-width: 40px;
  height: 42px;
  padding: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.hm-key.correct { background: #2ecc84; border-color: #2ecc84; color: #fff; }
.hm-key.wrong { background: #f3c9c9; border-color: #f3c9c9; color: #a24; opacity: .7; }
.hm-key:disabled { cursor: default; transform: none; }

@media (max-width: 480px) {
  .hm-key { height: 38px; font-size: 0.85rem; max-width: 34px; }
  .hm-letter-box { width: 22px; height: 30px; }
  .hm-cat-chip { font-size: 0.76rem; padding: 6px 10px; }
  .hm-sound-toggle { display: block; margin: 8px auto 0; }
}


/* ================= Rock Paper Scissors ================= */
.rps-panel { text-align: center; }
.rps-mode-select { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 20px 0; }
.rps-mode-select .mode-btn { min-width: 160px; padding: 22px 18px; font-size: 1.1rem; font-weight: 800; border-radius: 16px; line-height: 1.6; }

.rps-scoreboard { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 18px; flex-wrap: wrap; }
.rps-score-name { font-weight: 700; color: var(--muted); font-size: 0.95rem; }
.rps-score-num { font-weight: 800; font-size: 1.6rem; color: var(--ink); min-width: 28px; }
.rps-score-sep { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; background: var(--bg); border-radius: 999px; }

.rps-stage { position: relative; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.rps-prompt { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }

.rps-choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }
.rps-choice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: clamp(90px, 26vw, 120px);
  padding: 18px 10px;
  border-radius: 18px;
  background: var(--card);
  border: 2px solid var(--border);
  transition: transform .15s ease, border-color .15s ease;
}
.rps-choice-btn:hover { transform: translateY(-3px) scale(1.03); border-color: var(--ink); }
.rps-choice-btn:active { transform: scale(0.96); }
.rps-choice-emoji { font-size: clamp(2rem, 8vw, 2.6rem); }
.rps-choice-label { font-weight: 700; font-size: 0.9rem; color: var(--muted); }

.rps-pass-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; }
.rps-pass-icon { font-size: 3rem; animation: hmFloat 3s ease-in-out infinite; }

.rps-reveal { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 6vw, 40px); margin: 10px 0; }
.rps-reveal-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 16px; transition: background .3s ease; }
.rps-reveal-side.win { background: rgba(46, 204, 132, .15); }
.rps-reveal-side.lose { opacity: .55; }
.rps-reveal-emoji { font-size: clamp(2.8rem, 12vw, 4rem); animation: hmPopKf .35s ease; }
.rps-reveal-label { font-weight: 700; color: var(--muted); font-size: 0.9rem; }
.rps-vs { font-weight: 800; font-size: 1.1rem; color: var(--red); }

.rps-result-text { font-weight: 800; font-size: 1.2rem; margin-top: 8px; }
.rps-gameover { font-weight: 800; font-size: 1.3rem; margin-top: 10px; color: var(--ink); }

.rps-sound-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--muted); margin-left: 10px; cursor: pointer; }
.rps-sound-toggle input { cursor: pointer; }

.rps-confetti-bit { position: absolute; top: 0; font-size: 1.4rem; animation: hmConfettiFall 1.2s ease-out forwards; pointer-events: none; }

@media (max-width: 480px) {
  .rps-choice-btn { width: 88px; padding: 14px 8px; }
  .rps-score-num { font-size: 1.3rem; }
  .rps-sound-toggle { display: block; margin: 8px auto 0; }
}


/* ===== SNAKES & LADDERS ===== */
.snl-panel { display: flex; flex-direction: column; gap: 16px; }

.snl-mode-select { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.snl-players { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.snl-player-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--border); background: var(--card);
  font-weight: 600; color: var(--muted);
  transition: all .2s ease;
}
.snl-player-card.active {
  border-color: var(--red); color: var(--ink);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .12);
  animation: hmFloat 1.6s ease-in-out infinite;
}
.snl-player-card.won { border-color: #22c55e; color: var(--ink); background: rgba(34, 197, 94, .08); }
.snl-player-token { font-size: 20px; }
.snl-player-name { font-size: 14px; }
.snl-player-pos { font-size: 12px; color: var(--muted); background: var(--bg); padding: 2px 8px; border-radius: 999px; }

.snl-board-wrap { display: flex; justify-content: center; position: relative; }
.snl-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  border: 3px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.snl-cell {
  position: relative;
  border: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: flex-start;
  background: var(--card);
}
.snl-cell:nth-child(odd) { background: #f6f7fc; }
.snl-cell.snl-ladder-start { background: rgba(34, 197, 94, .16); }
.snl-cell.snl-snake-start { background: rgba(214, 69, 69, .14); }
.snl-cell.snl-goal { background: rgba(255, 202, 58, .35); }
.snl-num { font-size: clamp(7px, 1.6vw, 11px); color: var(--muted); padding: 2px; font-weight: 700; }
.snl-marker { position: absolute; right: 1px; bottom: 0; font-size: clamp(9px, 2.4vw, 15px); line-height: 1; }
.snl-token-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; pointer-events: none; }
.snl-token { font-size: clamp(10px, 3vw, 18px); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); transition: all .3s ease; }

.snl-controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.snl-dice {
  font-size: 42px; line-height: 1;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow);
}
.snl-dice-spin { animation: snlDiceSpin .65s linear; }

.snl-log {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 160px; overflow-y: auto;
  padding: 8px 12px; background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.snl-log-line { font-size: 13px; color: var(--text); }
.snl-log-line:first-child { font-weight: 700; color: var(--ink); }

.snl-gameover {
  text-align: center; font-size: 18px; font-weight: 800; color: var(--ink);
  padding: 12px; border-radius: 10px; background: rgba(255, 202, 58, .2);
  animation: hmPopKf .4s ease;
}
.snl-gameover-actions { margin-top: 10px; }

.snl-bottom-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.snl-sound-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; }

.snl-confetti-bit {
  position: absolute; top: -10%; font-size: 20px;
  animation: hmConfettiFall 1.3s ease-in forwards;
  pointer-events: none;
}

@keyframes snlDiceSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

@media (max-width: 480px) {
  .snl-board { width: 100%; }
  .snl-dice { width: 52px; height: 52px; font-size: 34px; }
  .snl-player-card { padding: 6px 10px; font-size: 13px; }
  .snl-player-token { font-size: 16px; }
  .snl-log { max-height: 120px; }
}

/* ------- Snakes & Ladders connector overlay: real snake bodies (head on
the bite square, tail tip on the destination) and wooden ladders drawn on
an SVG layer between the squares and the player tokens. ------- */
.snl-board { position: relative; }
.snl-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.snl-cell .snl-token-wrap { z-index: 3; }
.snl-cell .snl-num { position: relative; z-index: 1; }

/* ------- Mobile header: on small screens the points chip, premium button,
bell and logout collapse into a hamburger dropdown; only the avatar and the
☰ button stay visible. ------- */
.header-actions { position: relative; }
.header-full { display: flex; align-items: center; gap: 10px; }
.hamburger-btn {
  display: none;
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.45);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.hamburger-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.header-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,24,40,.22);
  padding: 8px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.header-menu button {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 11px 12px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text);
}
.header-menu button:hover { background: var(--bg); transform: none; }
.header-menu-static {
  padding: 11px 12px;
  font-weight: 700;
  color: #92610a;
  background: #fff7e6;
  border-radius: 8px;
}
@media (max-width: 759px) {
  .hamburger-btn { display: inline-flex; align-items: center; }
}

/* ------- Dashboard accordion: on phones each dashboard section collapses
behind its heading so the page isn't one giant scroll; on desktop everything
stays permanently open and the caret is hidden. ------- */
.dash-acc { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; user-select: none; padding: 8px 12px; margin: -8px -12px 0; border-radius: 12px; background: linear-gradient(120deg, rgba(43,58,103,.06), rgba(214,69,69,.06)); }
.dash-acc:hover { background: linear-gradient(120deg, rgba(43,58,103,.1), rgba(214,69,69,.1)); }
.dash-caret { color: var(--muted); font-size: .85rem; transition: transform .18s ease; }
.dash-panel:not(.dash-open) .dash-acc-body { display: none; }
.dash-panel:not(.dash-open) .dash-caret { transform: rotate(-90deg); }
.dash-acc { margin-bottom: 0; }
.dash-panel.dash-open .dash-acc { margin-bottom: 10px; }

/* ------- Play-a-game panel: 4 cards visible on mobile, rest behind a toggle ------- */
@media (max-width: 759px) {
  .dash-game-menu .card.dg-extra { display: none; }
  .dash-game-menu { grid-template-columns: repeat(2, 1fr); }
  .dash-game-menu.games-expanded .card.dg-extra { display: block; }
  .more-games-btn { display: block; width: 100%; margin-top: 14px; }
}
@media (min-width: 760px) {
  .more-games-btn { display: none; }
}


/* ------- World-class redesign: mobile-first safety + polish ------- */
body { overflow-x: hidden; }
h1, h2, h3, p, .card, .info-chip, .hero, .dash-panel, .profile-name, .brand-name { overflow-wrap: break-word; word-break: break-word; }
/* the eyebrow badge (number + short label) should wrap at word
   boundaries only, never split a word/number mid-character */
.hero-eyebrow, .hero-eyebrow * { overflow-wrap: normal; word-break: normal; }
@media (max-width: 759px) {
.menu { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card { padding: 18px 10px; font-size: 0.95rem; }
.hero { padding: 40px 16px 34px; border-radius: 18px; }
.hero-eyebrow { font-size: 0.72rem; padding: 5px 12px; }
}


@keyframes bgDrift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
body { animation: none; }
}


/* ------- Carrom (canvas board + skin picker) ------- */
#crm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  touch-action: none;
}
.crm-skin-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.crm-skin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.crm-skin-chip {
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(0deg, rgba(255,255,255,.65), rgba(255,255,255,.65)), var(--crm-chip-color, #fff);
  color: #22283b;
}
.crm-skin-chip.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(43,58,103,.22);
}
.crm-skin-chip.locked {
  opacity: .6;
  border-color: #f0a83a;
}
.mode-btn.small {
  padding: 8px 12px;
  font-size: 0.85rem;
}


/* ------- Ambient gaming background decoration ------- */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-icon {
  position: absolute;
  display: block;
  font-size: 3.2rem;
  opacity: 0.09;
  line-height: 1;
  animation: bgFloat 20s ease-in-out infinite;
  will-change: transform;
}
.bg-icon-1 { top: 8%;  left: 6%;  font-size: 3.6rem; animation-duration: 18s; animation-delay: 0s; }
.bg-icon-2 { top: 66%; left: 4%;  font-size: 3rem;   animation-duration: 22s; animation-delay: -4s; }
.bg-icon-3 { top: 18%; left: 88%; font-size: 3.4rem; animation-duration: 20s; animation-delay: -8s; }
.bg-icon-4 { top: 78%; left: 90%; font-size: 3.2rem; animation-duration: 24s; animation-delay: -2s; }
.bg-icon-5 { top: 45%; left: 50%; font-size: 4rem;   animation-duration: 26s; animation-delay: -12s; }
.bg-icon-6 { top: 90%; left: 42%; font-size: 3rem;   animation-duration: 19s; animation-delay: -6s; }
.bg-icon-7 { top: 5%;  left: 46%; font-size: 2.6rem; animation-duration: 21s; animation-delay: -10s; }
.bg-icon-8 { top: 35%; left: 10%; font-size: 2.8rem; animation-duration: 23s; animation-delay: -14s; }
.bg-icon-9 { top: 55%; left: 82%; font-size: 2.6rem; animation-duration: 17s; animation-delay: -3s; }
.bg-icon-10{ top: 12%; left: 70%; font-size: 3rem;   animation-duration: 25s; animation-delay: -9s; }

@keyframes bgFloat {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(14px, -18px) rotate(6deg); }
  50%  { transform: translate(-10px, 10px) rotate(-5deg); }
  75%  { transform: translate(10px, 16px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 600px) {
  .bg-icon { font-size: 2.1rem !important; opacity: 0.07; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-icon { animation: none; }
}


/* ------- Game category filter tabs ------- */
.game-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.filter-tab {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.filter-tab:hover { border-color: var(--ink-light); }
.filter-tab:active { transform: scale(.95); }
.filter-tab.active {
  background: linear-gradient(120deg, var(--ink), var(--ink-light));
  color: #fff;
  border-color: transparent;
}
@media (max-width: 600px) {
  .filter-tab { font-size: 0.8rem; padding: 6px 12px; }
}

/* ------- Dice Dash (endless flyer) ------- */
.flyer-wrap {
  position: relative;
  width: min(420px, 92vw);
  height: min(620px, 64vh);
  min-height: 380px;
  margin: 14px auto 6px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  touch-action: none;
  background: #cfe8f5;
}
.flyer-wrap canvas { display: block; width: 100%; height: 100%; }
.flyer-score {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 2px rgba(0,0,0,.4);
  pointer-events: none;
}
.flyer-score.pop { animation: flyerPop .28s ease; }
@keyframes flyerPop {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1); }
}
.flyer-best-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.85);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.flyer-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 30, 55, .45);
}
.flyer-overlay-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 22px;
  width: min(280px, 84%);
  text-align: center;
}
.flyer-overlay-title { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.flyer-overlay-score { font-size: 1.05rem; font-weight: 700; margin-top: 4px; }
.flyer-overlay-best { font-size: 0.92rem; color: var(--muted); margin-bottom: 16px; }
.flyer-overlay-card button { width: 100%; margin-top: 10px; }
.flyer-continue-btn {
  background: linear-gradient(135deg, #fff3d6, #ffe6a8) !important;
  border: 1.5px solid #e0a72b !important;
  color: #7a4e05 !important;
}
.flyer-continue-btn:hover { background: linear-gradient(135deg, #ffe9b8, #ffdd8e) !important; }
.flyer-login-hint { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }

@media (max-width: 480px) {
  .flyer-wrap { height: min(560px, 62vh); min-height: 340px; }
  .flyer-score { font-size: 1.6rem; top: 10px; }
  .flyer-overlay-card { padding: 18px 16px; }
}


/* ------- Checkers Duel board ------- */
.ckr-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ckr-cell { display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.ckr-light { background: #f0d9b5; }
.ckr-dark { background: var(--ink); }
.ckr-cell.ckr-selected { outline: 3px solid var(--red); outline-offset: -3px; }
.ckr-cell.ckr-hint::after { content: ''; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: rgba(34,195,166,.65); }
.ckr-piece { width: 76%; height: 76%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .15s ease; }
.ckr-piece.ckr-king::after { content: '\2655'; font-size: 1.1em; color: #ffd54a; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ckr-piece.ckr-red { background: linear-gradient(145deg, var(--red-light), var(--red)); color: #fff; }
.ckr-piece.ckr-blue { background: linear-gradient(145deg, var(--ink-light), var(--ink)); color: #ffd75e; }
.ckr-piece.ckr-king { color: #ffd75e; }
.ckr-cell:active .ckr-piece { transform: scale(.92); }
@media (max-width: 480px) {
  .ckr-board { max-width: 340px; }
  .ckr-piece { font-size: .85rem; }
}

.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); width: 100%; max-width: 420px; aspect-ratio: 7 / 6; margin: 0 auto; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, var(--ink), var(--ink-light)); box-shadow: var(--shadow); gap: 4%; }
.c4-cell { display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,.08); border-radius: 50%; position: relative; }
.c4-cell:hover { background: rgba(255,255,255,.16); }
.c4-disc { width: 82%; height: 82%; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.35) inset, 0 2px 4px rgba(0,0,0,.3); animation: c4-drop .25s ease; }
.c4-disc.c4-red { background: linear-gradient(145deg, var(--red-light), var(--red)); }
.c4-disc.c4-yellow { background: linear-gradient(145deg, #ffe27a, #ffc93c); }
@keyframes c4-drop { from { transform: translateY(-40%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 480px) { .c4-board { max-width: 340px; padding: 6px; gap: 3%; } }

.sud-board { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin: 0 auto; background: var(--card); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.sud-cell { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; cursor: pointer; border: 1px solid var(--border); color: var(--text); background: var(--card); user-select: none; }
.sud-cell.sud-border-left { border-left: 2px solid var(--ink); }
.sud-cell.sud-border-top { border-top: 2px solid var(--ink); }
.sud-cell.sud-border-right { border-right: 2px solid var(--ink); }
.sud-cell.sud-border-bottom { border-bottom: 2px solid var(--ink); }
.sud-cell.sud-fixed { color: var(--ink); background: var(--bg); font-weight: 800; cursor: default; }
.sud-cell.sud-selected { background: rgba(43, 58, 103, .16); outline: 2px solid var(--ink-light); outline-offset: -2px; }
.sud-cell.sud-conflict { color: var(--red); background: rgba(214, 69, 69, .12); }
.sud-cell:hover:not(.sud-fixed) { background: rgba(0, 0, 0, .05); }
.sud-numpad { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; margin: 16px auto 0; }
.sud-numpad button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow); }
.sud-numpad button:hover { background: var(--ink); color: #fff; }
.sud-numpad button.sud-erase { width: 60px; font-size: 1.2rem; }
@media (max-width: 480px) { .sud-board { max-width: 340px; } .sud-cell { font-size: .9rem; } .sud-numpad button { width: 36px; height: 36px; } .sud-numpad button.sud-erase { width: 52px; } }

.ws-meta { display: flex; justify-content: space-between; max-width: 420px; margin: 0 auto 10px; font-weight: 700; color: var(--ink); }
.ws-board { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin: 0 auto; background: var(--card); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); user-select: none; }
.ws-cell { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; cursor: pointer; border: 1px solid var(--border); color: var(--text); background: var(--card); }
.ws-cell:hover { background: rgba(0, 0, 0, .05); }
.ws-cell.ws-anchor { background: rgba(43, 58, 103, .18); outline: 2px solid var(--ink-light); outline-offset: -2px; }
.ws-cell.ws-found { background: rgba(34, 195, 166, .28); color: var(--ink); }
.ws-wordlist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; margin: 16px auto 0; }
.ws-word { padding: 6px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-weight: 700; font-size: .9rem; }
.ws-word-found { background: rgba(34, 195, 166, .18); text-decoration: line-through; color: var(--muted); }
@media (max-width: 480px) { .ws-board { max-width: 340px; } .ws-cell { font-size: .68rem; } }

.ana-scrambled { font-size: 2.2rem; font-weight: 800; letter-spacing: .15em; text-align: center; color: var(--ink); margin: 20px 0; }
.ana-input-row { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 12px; }
.ana-input { flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: 1rem; text-transform: uppercase; }
.ana-input-row button { padding: 10px 18px; border-radius: 10px; border: none; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }
@media (max-width: 480px) { .ana-scrambled { font-size: 1.4rem; } }

.cw-board { display: grid; width: 100%; max-width: 420px; margin: 0 auto; gap: 2px; background: var(--border); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; }
.cw-cell { display: flex; align-items: center; justify-content: center; background: var(--card); font-weight: 700; font-size: .95rem; color: var(--text); }
.cw-cell.cw-blank { background: transparent; }
.cw-cell.cw-filled { background: rgba(34, 195, 166, .22); color: var(--ink); }
.cw-clue-active { text-align: center; font-weight: 700; color: var(--ink); max-width: 420px; margin: 14px auto 8px; min-height: 1.4em; }
.cw-cluelist { max-width: 420px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 6px; }
.cw-clue-item { padding: 8px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-size: .9rem; cursor: pointer; }
.cw-clue-item.cw-clue-active { background: rgba(43, 58, 103, .12); border-color: var(--ink-light); font-weight: 700; }
.cw-clue-item.cw-clue-done { background: rgba(34, 195, 166, .15); color: var(--muted); text-decoration: line-through; }
@media (max-width: 480px) { .cw-cell { font-size: .68rem; } }

.dwd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; max-width: 340px; margin: 0 auto; }
.dwd-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; border: 2px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.dwd-cell.dwd-filled { border-color: var(--ink-light); }
.dwd-cell.dwd-correct { background: #4caf6d; border-color: #4caf6d; color: #fff; }
.dwd-cell.dwd-present { background: #e0b64a; border-color: #e0b64a; color: #fff; }
.dwd-cell.dwd-absent { background: var(--muted); border-color: var(--muted); color: #fff; }
.dwd-keyboard { display: flex; flex-direction: column; gap: 6px; max-width: 480px; margin: 14px auto 0; }
.dwd-key-row { display: flex; justify-content: center; gap: 5px; }
.dwd-key { flex: 1; max-width: 40px; padding: 10px 0; border-radius: 6px; border: none; background: var(--bg); color: var(--text); font-weight: 700; cursor: pointer; }
.dwd-key.dwd-key-wide { max-width: 64px; flex: 1.6; font-size: .8rem; }
.dwd-key.dwd-correct { background: #4caf6d; color: #fff; }
.dwd-key.dwd-present { background: #e0b64a; color: #fff; }
.dwd-key.dwd-absent { background: #8a8f98; color: #fff; }
@media (max-width: 480px) {
  .dwd-cell { font-size: 1.1rem; }
  .dwd-key { padding: 8px 0; font-size: .75rem; }
  .dwd-key.dwd-key-wide { font-size: .6rem; }
}

.tri-cat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; }
.tri-question { text-align: center; font-weight: 700; font-size: 1.15rem; color: var(--ink); max-width: 480px; margin: 16px auto; min-height: 2.4em; }
.tri-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 480px; margin: 0 auto; }
.tri-choice { padding: 14px 10px; border-radius: 10px; border: 2px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; font-size: .95rem; }
.tri-choice.tri-correct { background: #4caf6d; border-color: #4caf6d; color: #fff; }
.tri-choice.tri-wrong { background: var(--red); border-color: var(--red); color: #fff; }
.tri-score-row { display: flex; justify-content: center; gap: 20px; margin: 16px auto 0; font-weight: 700; color: var(--ink); }
@media (max-width: 480px) {
  .tri-choices { grid-template-columns: 1fr; }
  .tri-question { font-size: 1rem; }
  .tri-cat-row .mode-btn { font-size: .8rem; padding: 8px 10px; }
}

.fm-flag-wrap { max-width: 280px; margin: 16px auto; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.fm-flag-wrap svg { display: block; width: 100%; height: auto; }
.fm-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 480px; margin: 0 auto; }
.fm-choice { padding: 14px 10px; border-radius: 10px; border: 2px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; font-size: .95rem; }
.fm-choice.fm-correct { background: #4caf6d; border-color: #4caf6d; color: #fff; }
.fm-choice.fm-wrong { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 480px) {
  .fm-choices { grid-template-columns: 1fr; }
  .fm-flag-wrap { max-width: 220px; }
}

.cc-cat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; }
.cc-found { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; margin: 14px auto; justify-content: center; min-height: 1.6em; }
.cc-found-word { padding: 6px 12px; border-radius: 999px; background: rgba(34, 195, 166, .18); color: var(--ink); font-weight: 700; font-size: .85rem; text-transform: capitalize; }
@media (max-width: 480px) {
  .cc-cat-row .mode-btn { font-size: .8rem; padding: 8px 10px; }
}

.epg-emoji { text-align: center; font-size: 4rem; line-height: 1.3; margin: 20px auto; letter-spacing: .1em; }
#epg-score { text-align: center; font-weight: 700; color: var(--ink); margin-top: 8px; }
@media (max-width: 480px) {
  .epg-emoji { font-size: 2.8rem; }
}


/* ------- Challenge a Friend (async link) ------- */
.challenge-box { max-width: 440px; }
.challenge-heading { font-size: 1.3rem; font-weight: 800; text-align: center; margin-bottom: 10px; }
#challenge-modal-label, .challenge-modal-note { text-align: center; color: var(--muted); font-size: .92rem; }
.challenge-modal-note { margin-top: 12px; }
#challenge-link-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 10px 0;
  border: 1px solid var(--border); border-radius: 10px; font-size: .85rem;
  background: #f7f8fc;
}
.challenge-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.challenge-modal-actions button {
  flex: 1 1 auto; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--ink); color: #fff; font-weight: 700; cursor: pointer;
}
.challenge-compare-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.challenge-verdict { text-align: center; font-weight: 700; margin: 14px 0; }
.challenge-rematch {
  display: block; width: 100%; padding: 10px 14px; border-radius: 10px; border: none;
  background: var(--ink); color: #fff; font-weight: 700; cursor: pointer;
}
@media (max-width: 480px) {
  .challenge-modal-actions { flex-direction: column; }
}

/* Snake Arena */
.sn-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sn-stats { font-weight: 700; font-size: 1.05rem; }
.sn-canvas-wrap { display: flex; justify-content: center; }
.sn-canvas-wrap canvas { border-radius: 10px; border: 2px solid var(--ink, #2b3a67); max-width: 100%; }
.sn-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.92); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; border-radius: 10px;
  font-size: 1.1rem; gap: 6px;
}
.sn-overlay button, .sn-start-btn {
  margin-top: 8px; padding: 10px 20px; border-radius: 10px; border: none;
  background: var(--ink, #2b3a67); color: #fff; font-weight: 700; cursor: pointer;
}
.sn-dpad { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sn-dpad-row { display: flex; gap: 4px; }
.sn-dpad button {
  width: 52px; height: 52px; border-radius: 10px; border: 1px solid #ccc;
  background: #fff; font-size: 1.2rem; cursor: pointer;
}
.sn-hint { text-align: center; max-width: 420px; color: #666; font-size: 0.9rem; }

/* Flappy Flight */
.ff-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ff-stats { font-weight: 700; font-size: 1.05rem; }
.ff-canvas-wrap { position: relative; cursor: pointer; }
.ff-canvas-wrap canvas { border-radius: 10px; border: 2px solid var(--ink, #2b3a67); max-width: 100%; display: block; }
.ff-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.9); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; border-radius: 10px;
  font-size: 1.1rem; gap: 6px; pointer-events: none;
}
.ff-overlay button {
  pointer-events: auto; margin-top: 8px; padding: 10px 20px; border-radius: 10px; border: none;
  background: var(--ink, #2b3a67); color: #fff; font-weight: 700; cursor: pointer;
}
.ff-hint { text-align: center; max-width: 420px; color: #666; font-size: 0.9rem; }


.bb-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bb-stats { font-weight: 600; font-size: 15px; }
.bb-canvas-wrap { border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); }
.bb-canvas-wrap canvas { display: block; touch-action: none; cursor: pointer; }
.bb-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(16,20,38,0.78); color: #fff; text-align: center; gap: 8px;
  pointer-events: none;
}
.bb-overlay button { pointer-events: auto; margin-top: 8px; padding: 8px 18px; border-radius: 8px; border: none; background: #f6c744; font-weight: 700; cursor: pointer; }
.bb-controls { display: flex; gap: 16px; }
.bb-controls button {
  width: 56px; height: 44px; border-radius: 10px; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 18px; cursor: pointer;
}
.bb-hint { font-size: 13px; opacity: 0.75; text-align: center; max-width: 320px; }


.wm-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wm-stats { display: flex; gap: 18px; font-weight: 600; font-size: 15px; }
.wm-board-wrap { position: relative; }
.wm-board {
  display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px);
  gap: 10px; background: #6b4423; padding: 14px; border-radius: 14px;
}
.wm-hole {
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(ellipse at center, #2b1a10 0%, #4a2f1a 70%, #6b4423 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; cursor: pointer; box-shadow: inset 0 4px 8px rgba(0,0,0,0.5);
  user-select: none;
}
.wm-hole.wm-up .wm-mole { animation: wm-pop 0.15s ease-out; }
.wm-hole.wm-hit { background: radial-gradient(ellipse at center, #7a4a1a 0%, #4a2f1a 70%, #6b4423 100%); }
@keyframes wm-pop {
  from { transform: scale(0.3) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.wm-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(16,20,38,0.82); color: #fff; text-align: center; gap: 8px;
  border-radius: 14px; pointer-events: none;
}
.wm-overlay button { pointer-events: auto; margin-top: 8px; padding: 8px 18px; border-radius: 8px; border: none; background: #f6c744; font-weight: 700; cursor: pointer; }
.wm-hint { font-size: 13px; opacity: 0.75; text-align: center; max-width: 320px; }


.rt-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rt-stats { font-weight: 600; font-size: 15px; }
.rt-box {
  width: 320px; max-width: 90vw; height: 220px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-weight: 700; font-size: 20px; cursor: pointer; padding: 20px; user-select: none;
  transition: background-color 0.1s ease;
}
.rt-box.rt-idle { background: #3f5390; }
.rt-box.rt-waiting { background: #d64545; }
.rt-box.rt-ready { background: #2ecc71; }
.rt-box.rt-toosoon { background: #e67e22; }
.rt-box.rt-result { background: #2b3a67; }
.rt-summary { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rt-avg-big { font-size: 22px; font-weight: 800; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rt-chip { background: rgba(0,0,0,0.06); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 600; }
.rt-hint { font-size: 13px; opacity: 0.75; text-align: center; max-width: 340px; }

.si-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.si-stats { font-weight: 600; color: #f6c744; font-size: 14px; }
.si-canvas-wrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.si-canvas-wrap canvas { display: block; background: #0a0e1f; }
.si-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10,14,31,0.85); color: #fff; text-align: center; padding: 16px; }
.si-overlay strong { font-size: 20px; }
.si-overlay button { padding: 10px 18px; border-radius: 6px; border: none; background: #4fd1c5; color: #0a0e1f; font-weight: 700; cursor: pointer; }
.si-controls { display: flex; gap: 12px; align-items: center; }
.si-controls button { width: 56px; height: 44px; border-radius: 8px; border: none; background: #3f5390; color: #fff; font-size: 18px; cursor: pointer; }
.si-controls button:active { background: #2b3a67; }
.si-hint { font-size: 12px; color: #9aa4c0; text-align: center; max-width: 340px; }

.fs-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.fs-stats { font-weight: 600; color: #f6c744; font-size: 14px; }
.fs-canvas-wrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.35); touch-action: none; }
.fs-canvas-wrap canvas { display: block; background: #0f1330; cursor: crosshair; }
.fs-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(15,19,48,0.85); color: #fff; text-align: center; padding: 16px; }
.fs-overlay strong { font-size: 20px; }
.fs-overlay button { padding: 10px 18px; border-radius: 6px; border: none; background: #4fd1c5; color: #0a0e1f; font-weight: 700; cursor: pointer; }
.fs-hint { font-size: 12px; color: #9aa4c0; text-align: center; max-width: 340px; }

.er-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.er-stats { font-weight: 600; color: #f6c744; font-size: 14px; }
.er-canvas-wrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.er-canvas-wrap canvas { display: block; cursor: pointer; }
.er-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(15,19,48,0.75); color: #fff; text-align: center; padding: 16px; }
.er-overlay strong { font-size: 20px; }
.er-overlay button { padding: 10px 18px; border-radius: 6px; border: none; background: #4fd1c5; color: #0a0e1f; font-weight: 700; cursor: pointer; }
.er-controls { display: flex; gap: 12px; align-items: center; }
.er-controls button { padding: 10px 16px; border-radius: 8px; border: none; background: #3f5390; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.er-controls button:active { background: #2b3a67; }
.er-hint { font-size: 12px; color: #9aa4c0; text-align: center; max-width: 340px; }

.pj-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pj-stats { font-weight: 700; color: #1c2440; }
.pj-canvas-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.pj-canvas-wrap canvas { display: block; touch-action: none; }
.pj-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,19,48,0.72); color: #fff; text-align: center; padding: 20px; box-sizing: border-box; }
.pj-overlay strong { font-size: 20px; margin-bottom: 8px; }
.pj-overlay button { margin-top: 14px; padding: 10px 20px; border: none; border-radius: 8px; background: #8e44ad; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.pj-controls { display: flex; gap: 12px; }
.pj-controls button { padding: 10px 22px; border: none; border-radius: 8px; background: #3d2f8a; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.pj-controls button:active { background: #2b2367; }
.pj-hint { font-size: 12px; color: #9aa4c0; text-align: center; max-width: 340px; }

.at-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.at-stats { font-weight: 700; color: #1c2440; }
.at-canvas-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.18); cursor: crosshair; }
.at-canvas-wrap canvas { display: block; touch-action: none; }
.at-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,19,48,0.72); color: #fff; text-align: center; padding: 20px; box-sizing: border-box; }
.at-overlay strong { font-size: 20px; margin-bottom: 8px; }
.at-overlay button { margin-top: 14px; padding: 10px 20px; border: none; border-radius: 8px; background: #e74c3c; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.at-hint { font-size: 12px; color: #9aa4c0; text-align: center; max-width: 340px; }

.bks-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.bks-stats { font-weight:600; }
.bks-canvas-wrap { position:relative; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.bks-canvas-wrap canvas { display:block; cursor:pointer; }
.bks-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(10,15,30,0.72); color:#fff; padding:16px; gap:8px; }
.bks-overlay button { margin-top:8px; padding:10px 18px; border:none; border-radius:8px; background:#e8681c; color:#fff; font-weight:700; cursor:pointer; }
.bks-hint { max-width:320px; text-align:center; font-size:13px; color:var(--muted, #888); }

.pks-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pks-stats { font-weight:600; }
.pks-canvas-wrap { position:relative; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.pks-canvas-wrap canvas { display:block; cursor:pointer; }
.pks-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(10,15,30,0.72); color:#fff; padding:16px; gap:8px; }
.pks-overlay button { margin-top:8px; padding:10px 18px; border:none; border-radius:8px; background:#1f7a3f; color:#fff; font-weight:700; cursor:pointer; }
.pks-hint { max-width:320px; text-align:center; font-size:13px; color:var(--muted, #888); }

.mgol-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mgol-stats { font-weight: 700; color: #fff; }
.mgol-canvas-wrap { position: relative; }
.mgol-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #1b6e2c; }
.mgol-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: #fff; background: rgba(0,0,0,0.55); border-radius: 10px; padding: 16px; }
.mgol-overlay button { padding: 10px 18px; border-radius: 8px; border: none; background: #4cafef; color: #06210e; font-weight: 700; cursor: pointer; }
.mgol-hint { max-width: 340px; text-align: center; color: rgba(255,255,255,0.75); font-size: 13px; }

.bwla-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bwla-stats { font-weight: 700; color: #fff; }
.bwla-canvas-wrap { position: relative; }
.bwla-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #3a2210; }
.bwla-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: #fff; background: rgba(0,0,0,0.55); border-radius: 10px; padding: 16px; }
.bwla-overlay button { padding: 10px 18px; border-radius: 8px; border: none; background: #f4d160; color: #3a2210; font-weight: 700; cursor: pointer; }
.bwla-hint { max-width: 340px; text-align: center; color: rgba(255,255,255,0.75); font-size: 13px; }
.arch-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.arch-stats { font-weight: 700; color: #fff; }
.arch-canvas-wrap { position: relative; }
.arch-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #2f6b3a; }
.arch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.55); color: #fff; border-radius: 10px; padding: 12px; gap: 8px; }
.arch-overlay button { margin-top: 6px; padding: 8px 16px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.arch-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.drt-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.drt-stats { font-weight: 700; color: #fff; }
.drt-canvas-wrap { position: relative; }
.drt-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #1c1c1c; }
.drt-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.55); color: #fff; border-radius: 10px; padding: 12px; gap: 8px; }
.drt-overlay button { margin-top: 6px; padding: 8px 16px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.drt-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.ttr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ttr-stats { font-weight: 700; color: #fff; }
.ttr-canvas-wrap { position: relative; }
.ttr-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #0d3b24; cursor: pointer; }
.ttr-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.55); color: #fff; border-radius: 10px; padding: 12px; gap: 8px; }
.ttr-overlay button { margin-top: 6px; padding: 8px 16px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.ttr-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.fg-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fg-stats { font-weight: 700; color: #fff; }
.fg-canvas-wrap { position: relative; }
.fg-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #2e7d32; cursor: pointer; }
.fg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.55); color: #fff; border-radius: 10px; padding: 12px; gap: 8px; }
.fg-overlay button { margin-top: 6px; padding: 8px 16px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.fg-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.sj-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sj-stats { font-weight: 700; color: #fff; }
.sj-canvas-wrap { position: relative; }
.sj-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #1b6e3c; cursor: pointer; }
.sj-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.55); color: #fff; border-radius: 10px; padding: 12px; gap: 8px; }
.sj-overlay button { margin-top: 6px; padding: 8px 16px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.sj-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.skb-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.skb-stats { font-weight: 700; color: #fff; }
.skb-canvas-wrap { position: relative; }
.skb-canvas-wrap canvas { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #5c3a21; cursor: pointer; }
.skb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.55); color: #fff; border-radius: 10px; padding: 12px; gap: 8px; }
.skb-overlay button { margin-top: 6px; padding: 8px 16px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.skb-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.btl-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.btl-stats { font-size: 14px; color: #ccc; }
.btl-boards { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.btl-board-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btl-label { font-size: 13px; color: #aaa; margin: 0; }
.btl-grid { display: grid; grid-template-columns: repeat(8, 32px); grid-template-rows: repeat(8, 32px); gap: 2px; background: #0d1b2a; padding: 6px; border-radius: 8px; }
.btl-grid-mini { grid-template-columns: repeat(8, 20px); grid-template-rows: repeat(8, 20px); }
.btl-cell { width: 100%; height: 100%; background: #1b3a5c; border-radius: 3px; cursor: pointer; transition: background 0.15s; }
.btl-grid-mini .btl-cell { cursor: default; }
.btl-cell:hover { background: #254a6e; }
.btl-hit { background: #e63946 !important; }
.btl-miss { background: #457b9d !important; }
.btl-ship { background: #6c757d !important; }
.btl-canvas-wrap { display: inline-block; }
.btl-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; border-radius: 8px; padding: 16px; }
.btl-overlay button { margin-top: 8px; padding: 10px 20px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.btl-message { font-size: 14px; color: #eee; margin: 4px 0; }
.btl-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.npat-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.npat-stats { font-size: 14px; color: #ccc; text-align: center; }
.npat-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.npat-letter-badge { width: 56px; height: 56px; border-radius: 50%; background: #f4d160; color: #2b1a00; font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.npat-timer { font-size: 20px; font-weight: 700; color: #7ee787; }
.npat-timer-low { color: #e63946; }
.npat-fields { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.npat-field { display: flex; flex-direction: column; gap: 4px; }
.npat-field-label { font-size: 13px; color: #aaa; }
.npat-input { padding: 10px 12px; border-radius: 8px; border: 1px solid #444; background: #1b1f27; color: #fff; font-size: 15px; }
.npat-input.npat-valid { border-color: #7ee787; }
.npat-input.npat-invalid { border-color: #e63946; }
.npat-submit-btn { margin-top: 6px; padding: 10px 20px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.npat-round-result { text-align: center; font-size: 16px; color: #eee; }
.npat-round-result button { margin-top: 8px; padding: 10px 20px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.npat-overlay { position: static; background: rgba(0,0,0,0.85); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; border-radius: 8px; padding: 20px; }
.npat-overlay button { margin-top: 8px; padding: 10px 20px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.npat-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.dice-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dice-stats { font-size: 13px; color: #ccc; text-align: center; }
.dice-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.dice-row { display: flex; gap: 8px; justify-content: center; }
.dice-die { width: 44px; height: 44px; border-radius: 8px; background: #fff; color: #222; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid #444; }
.dice-die.dice-held { border-color: #7ee787; background: #dff8e2; }
.dice-controls { display: flex; justify-content: center; }
.dice-roll-btn { padding: 10px 24px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.dice-roll-btn:disabled { opacity: 0.5; cursor: default; }
.dice-scorecard { width: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.dice-score-row { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 6px; background: #1b1f27; cursor: pointer; }
.dice-score-row.dice-score-filled { cursor: default; opacity: 0.6; }
.dice-score-label { color: #ccc; font-size: 13px; }
.dice-score-value { color: #fff; font-weight: 700; font-size: 13px; }
.dice-overlay { position: static; background: rgba(0,0,0,0.85); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; border-radius: 8px; padding: 20px; }
.dice-overlay button { margin-top: 8px; padding: 10px 20px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.dice-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.oth-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.oth-stats { font-size: 14px; color: #ccc; text-align: center; }
.oth-canvas-wrap { display: inline-block; position: relative; }
.oth-grid { display: grid; grid-template-columns: repeat(8, 34px); grid-template-rows: repeat(8, 34px); gap: 2px; background: #0b5e28; padding: 6px; border-radius: 8px; }
.oth-cell { width: 100%; height: 100%; background: #14803a; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: default; }
.oth-cell-valid { background: #1a9a48; cursor: pointer; }
.oth-disc { width: 26px; height: 26px; border-radius: 50%; }
.oth-black { background: #1a1a1a; }
.oth-white { background: #f5f5f5; }
.oth-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.oth-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; border-radius: 8px; padding: 16px; }
.oth-overlay button { margin-top: 8px; padding: 10px 20px; border-radius: 8px; border: none; background: #f4d160; color: #2b1a00; font-weight: 700; cursor: pointer; }
.oth-message { font-size: 14px; color: #eee; margin: 4px 0; }
.oth-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }

.bg-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bg-stats { font-size: 14px; font-weight: 600; color: #fff; }
.bg-dice { font-size: 15px; font-weight: 600; color: #ffd966; }
.bg-off { font-size: 13px; color: #ddd; }
.bg-bar { font-size: 13px; color: #ddd; }
.bg-canvas-wrap { position: relative; width: 100%; max-width: 560px; }
.bg-board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: #5a3825; padding: 8px; border-radius: 8px; }
.bg-point { position: relative; min-height: 70px; background: rgba(255,255,255,0.06); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px 2px; cursor: pointer; }
.bg-point-selected { outline: 2px solid #ffd966; }
.bg-point-label { font-size: 9px; color: #bbb; margin-top: auto; }
.bg-checker { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.bg-checker-player { background: #e8e4d8; color: #222; }
.bg-checker-cpu { background: #3a2a1e; color: #f0e6d2; border: 1px solid #7a5a3e; }
.bg-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.82); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; border-radius: 8px; padding: 16px; }
.bg-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 6px; border: none; background: #ffd966; color: #222; font-weight: 700; cursor: pointer; }
.bg-bearoff-btn { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; }
.bg-message { font-size: 14px; color: #eee; text-align: center; min-height: 20px; }
.bg-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }

.dom-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dom-stats { font-size: 14px; font-weight: 600; color: #fff; }
.dom-canvas-wrap { position: relative; width: 100%; max-width: 560px; min-height: 80px; }
.dom-chain { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; padding: 12px; background: rgba(255,255,255,0.06); border-radius: 8px; min-height: 56px; }
.dom-chain-tile { display: inline-block; padding: 6px 10px; background: #2c2c3a; color: #fff; border-radius: 4px; font-weight: 600; font-size: 13px; border: 1px solid #4a4a5e; }
.dom-chain-empty { color: #999; font-size: 13px; }
.dom-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dom-play-btn { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; }
.dom-hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px; }
.dom-tile { padding: 8px 12px; background: #3a3a4a; color: #fff; border-radius: 4px; font-weight: 600; font-size: 14px; cursor: pointer; border: 2px solid transparent; }
.dom-tile-playable { border-color: #6fd98f; }
.dom-tile-selected { border-color: #ffd966; background: #4a4a60; }
.dom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.82); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; border-radius: 8px; padding: 16px; }
.dom-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 6px; border: none; background: #ffd966; color: #222; font-weight: 700; cursor: pointer; }
.dom-message { font-size: 14px; color: #eee; text-align: center; min-height: 20px; }
.dom-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }

.man-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.man-overlay button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }
.man-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.man-stats { font-size: 14px; font-weight: 600; color: #fff; }
.man-canvas-wrap { position: relative; width: 100%; max-width: 560px; }
.man-board { display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 14px; }
.man-row { display: flex; gap: 8px; justify-content: center; }
.man-row-cpu { flex-direction: row-reverse; }
.man-pit { width: 44px; height: 44px; border-radius: 50%; background: #3a3a4a; border: 1px solid #55556a; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; }
.man-pit-cpu { background: #4f3f2f; }
.man-pit-player { background: #2f4f3f; cursor: default; }
.man-pit-playable { cursor: pointer; border-color: #4caf7d; box-shadow: 0 0 0 2px rgba(76,175,125,0.4); }
.man-pit-playable:hover { transform: scale(1.08); }
.man-stores { font-size: 14px; font-weight: 600; color: #fff; text-align: center; }
.man-message { font-size: 14px; color: #eee; text-align: center; min-height: 20px; }
.man-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }

.nim-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.nim-overlay button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }
.nim-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nim-stats { font-size: 14px; font-weight: 600; color: #fff; }
.nim-canvas-wrap { position: relative; width: 100%; max-width: 560px; }
.nim-board { display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 18px; }
.nim-pile-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 34px; align-items: center; }
.nim-stick { display: inline-block; width: 8px; height: 34px; line-height: 34px; text-align: center; background: #caa472; border-radius: 3px; color: transparent; }
.nim-stick-clickable { cursor: pointer; background: #e0b988; }
.nim-stick-clickable:hover { background: #4caf7d; }
.nim-pile-empty { font-size: 13px; color: #999; }
.nim-message { font-size: 14px; color: #eee; text-align: center; min-height: 20px; }
.nim-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }

.bingo-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.bingo-overlay button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }
.bingo-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bingo-stats { font-size: 14px; font-weight: 600; color: #fff; }
.bingo-call { font-size: 18px; font-weight: 700; color: #ffd166; }
.bingo-canvas-wrap { position: relative; width: 100%; max-width: 560px; }
.bingo-boards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.bingo-board-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bingo-board-label { font-size: 13px; font-weight: 600; color: #ccc; }
.bingo-card { display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px; }
.bingo-header-row { display: flex; gap: 3px; }
.bingo-header-cell { width: 34px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #ffd166; font-size: 13px; }
.bingo-row { display: flex; gap: 3px; }
.bingo-cell { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #2c2c3a; border: 1px solid #4a4a5e; border-radius: 4px; font-size: 12px; color: #fff; }
.bingo-cell[onclick] { cursor: pointer; }
.bingo-cell[onclick]:hover { background: #4caf7d; }
.bingo-cell-marked { background: #4caf7d; color: #fff; font-weight: 700; }
.bingo-cell-free { background: #55556a; font-size: 10px; font-weight: 700; }
.bingo-message { font-size: 14px; color: #eee; text-align: center; min-height: 20px; }
.bingo-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }

.war-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.war-overlay button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }
.war-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.war-stats { font-size: 14px; font-weight: 600; color: #fff; }
.war-canvas-wrap { position: relative; width: 100%; max-width: 560px; }
.war-board { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 16px; }
.war-pile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 70px; }
.war-pile-count { width: 48px; height: 64px; border-radius: 6px; background: #2c2c3a; border: 1px solid #4a4a5e; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; }
.war-pile-label { font-size: 12px; color: #ccc; }
.war-middle { flex: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.war-log { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.war-log-row { font-size: 13px; color: #eee; }
.war-log-card { display: inline-block; padding: 3px 7px; background: #3a3a4a; border-radius: 4px; font-weight: 700; color: #fff; }
.war-your-cards { display: flex; justify-content: center; }
.war-visible-row { display: flex; gap: 8px; }
.war-card { width: 46px; height: 62px; border-radius: 6px; background: #fff; color: #222; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border: 1px solid #ccc; }
.war-card[onclick] { cursor: pointer; }
.war-card[onclick]:hover { background: #4caf7d; color: #fff; }
.war-message { font-size: 14px; color: #eee; text-align: center; min-height: 20px; }
.war-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.bj-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.bj-overlay button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }
.bj-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bj-stats { font-size: 14px; font-weight: 600; color: #fff; }
.bj-canvas-wrap { position: relative; width: 100%; max-width: 560px; }
.bj-board { display: flex; flex-direction: column; align-items: center; gap: 16px; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 16px; }
.bj-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.bj-seat-label { font-size: 13px; font-weight: 600; color: #cfd3dc; }
.bj-hand { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bj-card { width: 44px; height: 62px; border-radius: 6px; background: #fff; color: #222; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; border: 1px solid #ccc; }
.bj-card-red { color: #d32f2f; }
.bj-card-back { background: repeating-linear-gradient(45deg, #2c3e91, #2c3e91 6px, #3a4db8 6px, #3a4db8 12px); color: transparent; }
.bj-message { font-size: 14px; color: #fff; min-height: 20px; }
.bj-actions { display: flex; gap: 10px; }
.bj-actions button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; }
.bj-hint { font-size: 13px; color: #ccc; text-align: center; max-width: 320px; }
.sol-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.sol-overlay button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }
.sol-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sol-stats { font-size: 14px; font-weight: 600; color: #fff; }
.sol-canvas-wrap { position: relative; width: 100%; overflow-x: auto; }
.sol-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px; background: rgba(255,255,255,0.06); border-radius: 12px 12px 0 0; min-width: 480px; }
.sol-stock-waste { display: flex; gap: 8px; }
.sol-foundations { display: flex; gap: 8px; }
.sol-tableau { display: flex; gap: 8px; padding: 14px 10px; background: rgba(255,255,255,0.03); border-radius: 0 0 12px 12px; min-width: 480px; min-height: 160px; }
.sol-column { display: flex; flex-direction: column; width: 60px; }
.sol-column > .sol-card { margin-top: -40px; }
.sol-column > .sol-card:first-child { margin-top: 0; }
.sol-card { width: 52px; height: 72px; border-radius: 6px; background: #fff; color: #222; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; border: 1px solid #ccc; cursor: pointer; user-select: none; }
.sol-card-red { color: #d32f2f; }
.sol-card-back { background: repeating-linear-gradient(45deg, #2c3e91, #2c3e91 6px, #3a4db8 6px, #3a4db8 12px); color: transparent; }
.sol-empty { background: rgba(255,255,255,0.05); border: 1px dashed #666; color: #888; cursor: default; }
.sol-foundation { border: 1px solid #4caf7d; }
.sol-selected { outline: 3px solid #ffd54f; outline-offset: -2px; }
.sol-message { font-size: 14px; color: #fff; min-height: 20px; text-align: center; }
.sol-actions { display: flex; gap: 10px; }
.sol-actions button { padding: 8px 16px; border-radius: 6px; border: none; background: #4caf7d; color: #fff; font-weight: 600; cursor: pointer; }

.rm-wrap { display: flex; flex-direction: column; gap: 10px; }
.rm-stats { font-weight: 600; }
.rm-piles { display: flex; gap: 10px; margin-bottom: 8px; }
.rm-melds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.rm-melds-label { font-size: 0.85em; opacity: 0.75; margin-right: 6px; }
.rm-meld { display: flex; gap: 2px; margin-right: 10px; padding: 3px; border: 1px dashed rgba(255,255,255,0.25); border-radius: 6px; }
.rm-hand { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; padding: 8px; background: rgba(255,255,255,0.04); border-radius: 8px; min-height: 70px; }
.rm-card { width: 46px; height: 64px; border-radius: 6px; background: #fff; color: #222; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95em; cursor: pointer; border: 2px solid transparent; user-select: none; }
.rm-card-red { color: #d1263b; }
.rm-card-back { background: repeating-linear-gradient(45deg, #4a5568, #4a5568 4px, #2d3748 4px, #2d3748 8px); color: #fff; font-size: 0.8em; }
.rm-empty { background: rgba(255,255,255,0.08); }
.rm-selected { border-color: #ffd166; transform: translateY(-6px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.rm-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rm-message { margin-top: 8px; font-size: 0.9em; opacity: 0.85; min-height: 1.2em; }
.rm-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(20,20,30,0.92); border-radius: 12px; text-align: center; padding: 20px; z-index: 5; }

.pk-wrap { display: flex; flex-direction: column; gap: 10px; }
.pk-stats { font-weight: 600; }
.pk-street { font-size: 0.85em; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.05em; }
.pk-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.pk-seat-label { font-size: 0.85em; opacity: 0.8; }
.pk-hand { display: flex; gap: 4px; }
.pk-community { display: flex; gap: 4px; justify-content: center; min-height: 68px; align-items: center; }
.pk-card { width: 46px; height: 64px; border-radius: 6px; background: #fff; color: #222; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95em; user-select: none; }
.pk-card-red { color: #d1263b; }
.pk-card-back { background: repeating-linear-gradient(45deg, #4a5568, #4a5568 4px, #2d3748 4px, #2d3748 8px); color: #fff; font-size: 0.8em; }
.pk-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.pk-message { margin-top: 8px; font-size: 0.9em; opacity: 0.85; min-height: 1.2em; text-align: center; }
.pk-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(20,20,30,0.92); border-radius: 12px; text-align: center; padding: 20px; z-index: 5; }

.c8-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 10px; }
.c8-stats { font-weight: 600; color: #e5e7eb; }
.c8-cpu-info { color: #9ca3af; font-size: 14px; }
.c8-canvas-wrap { min-height: 90px; display: flex; align-items: center; justify-content: center; }
.c8-piles { display: flex; gap: 16px; align-items: center; justify-content: center; }
.c8-card { width: 54px; height: 76px; border-radius: 8px; background: #fff; color: #111827; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; user-select: none; border: 1px solid #d1d5db; }
.c8-card-red { color: #dc2626; }
.c8-card-back { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-size: 14px; cursor: default; }
.c8-disabled { opacity: 0.45; cursor: not-allowed; }
.c8-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; }
.c8-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.c8-actions button { padding: 8px 16px; border-radius: 8px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; }
.c8-actions button:hover { background: #4338ca; }
.c8-message { color: #d1d5db; font-size: 14px; text-align: center; min-height: 20px; }
.c8-overlay { position: absolute; inset: 0; background: rgba(17,24,39,0.92); border-radius: 12px; text-align: center; padding: 20px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #e5e7eb; }

.sp-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 10px; }
.sp-stats { font-weight: 600; color: #e5e7eb; }
.sp-cpu-info { color: #9ca3af; font-size: 14px; }
.sp-canvas-wrap { min-height: 90px; display: flex; align-items: center; justify-content: center; }
.sp-centers { display: flex; gap: 24px; align-items: center; justify-content: center; }
.sp-drawpiles { display: flex; gap: 8px; }
.sp-card { width: 54px; height: 76px; border-radius: 8px; background: #fff; color: #111827; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; user-select: none; border: 1px solid #d1d5db; }
.sp-card-red { color: #dc2626; }
.sp-card-back { background: linear-gradient(135deg, #059669, #0d9488); color: #fff; font-size: 14px; cursor: default; }
.sp-disabled { opacity: 0.45; cursor: not-allowed; }
.sp-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; }
.sp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sp-actions button { padding: 8px 16px; border-radius: 8px; border: none; background: #059669; color: #fff; font-weight: 600; cursor: pointer; }
.sp-actions button:hover { background: #047857; }
.sp-message { color: #d1d5db; font-size: 14px; text-align: center; min-height: 20px; }
.sp-overlay { position: absolute; inset: 0; background: rgba(17,24,39,0.92); border-radius: 12px; text-align: center; padding: 20px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #e5e7eb; }

.gf-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 10px; }
.gf-stats { font-weight: 600; color: #e5e7eb; text-align: center; }
.gf-pond { color: #9ca3af; font-size: 14px; }
.gf-canvas-wrap { min-height: 20px; display: flex; align-items: center; justify-content: center; }
.gf-card { width: 54px; height: 76px; border-radius: 8px; background: #fff; color: #111827; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); user-select: none; border: 1px solid #d1d5db; }
.gf-card-red { color: #dc2626; }
.gf-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; }
.gf-ranks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; }
.gf-ranks button, .gf-actions button { padding: 8px 16px; border-radius: 8px; border: none; background: #0891b2; color: #fff; font-weight: 600; cursor: pointer; }
.gf-ranks button:hover, .gf-actions button:hover { background: #0e7490; }
.gf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gf-message { color: #d1d5db; font-size: 14px; text-align: center; min-height: 20px; }
.gf-overlay { position: relative; background: rgba(17,24,39,0.92); border-radius: 12px; text-align: center; padding: 20px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #e5e7eb; width: 100%; }

.ratscrew-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px; }
.ratscrew-stats { font-size:14px; color:#aab; text-align:center; }
.ratscrew-canvas-wrap { display:flex; align-items:center; justify-content:center; min-height:170px; }
.ratscrew-pile { display:flex; align-items:center; justify-content:center; }
.ratscrew-card { width:100px; height:140px; border-radius:10px; background:#fff; color:#222; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,0.35); border:2px solid #ddd; }
.ratscrew-card-red { color:#d92b2b; }
.ratscrew-card-empty { background:rgba(255,255,255,0.08); border:2px dashed rgba(255,255,255,0.25); box-shadow:none; }
.ratscrew-message { font-size:15px; text-align:center; min-height:22px; color:#e6e6f0; }
.ratscrew-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ratscrew-actions button { padding:10px 22px; border-radius:8px; border:none; font-size:15px; font-weight:600; cursor:pointer; background:#5b6fe6; color:#fff; }
.ratscrew-actions button:hover { background:#4757c9; }
.ratscrew-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:rgba(10,10,20,0.85); border-radius:12px; padding:20px; z-index:2; }
.ratscrew-overlay button { margin-top:10px; padding:10px 22px; border-radius:8px; border:none; font-size:15px; font-weight:600; cursor:pointer; background:#5b6fe6; color:#fff; }

.hr-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px; }
.hr-stats { font-size:14px; color:#aab; text-align:center; }
.hr-scores { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hr-score-chip { background:rgba(255,255,255,0.08); border-radius:8px; padding:4px 10px; font-size:13px; color:#dcdcf0; }
.hr-table-wrap { display:flex; align-items:center; justify-content:center; min-height:150px; width:100%; }
.hr-trick { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }
.hr-trick-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hr-trick-seat { font-size:12px; color:#9a9ac0; }
.hr-trick-empty { font-size:14px; color:#888; font-style:italic; }
.hr-message { font-size:15px; text-align:center; min-height:22px; color:#e6e6f0; }
.hr-hand { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:600px; }
.hr-card { width:70px; height:98px; border-radius:8px; background:#fff; color:#222; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; box-shadow:0 3px 10px rgba(0,0,0,0.3); border:2px solid #ddd; }
.hr-card-red { color:#d92b2b; }
.hr-card-playable { cursor:pointer; box-shadow:0 0 0 3px #5b6fe6, 0 3px 10px rgba(0,0,0,0.3); }
.hr-card-playable:hover { transform:translateY(-4px); }
.hr-card-disabled { opacity:0.45; }
.hr-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:rgba(10,10,20,0.85); border-radius:12px; padding:20px; z-index:2; }
.hr-overlay button { margin-top:10px; padding:10px 22px; border-radius:8px; border:none; font-size:15px; font-weight:600; cursor:pointer; background:#5b6fe6; color:#fff; }

.sd-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px; }
.sd-stats { font-size:14px; color:#aab; text-align:center; }
.sd-bids { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.sd-bid-chip { background:rgba(255,255,255,0.08); border-radius:8px; padding:4px 10px; font-size:13px; color:#dcdcf0; }
.sd-table-wrap { display:flex; align-items:center; justify-content:center; min-height:150px; width:100%; }
.sd-trick { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }
.sd-trick-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sd-trick-seat { font-size:12px; color:#9a9ac0; }
.sd-trick-empty { font-size:14px; color:#888; font-style:italic; }
.sd-message { font-size:15px; text-align:center; min-height:22px; color:#e6e6f0; }
.sd-hand { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:600px; }
.sd-card { width:70px; height:98px; border-radius:8px; background:#fff; color:#222; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; box-shadow:0 3px 10px rgba(0,0,0,0.3); border:2px solid #ddd; }
.sd-card-red { color:#d92b2b; }
.sd-card-playable { cursor:pointer; box-shadow:0 0 0 3px #2d9d5a, 0 3px 10px rgba(0,0,0,0.3); }
.sd-card-playable:hover { transform:translateY(-4px); }
.sd-card-disabled { opacity:0.45; }
.sd-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:rgba(10,10,20,0.85); border-radius:12px; padding:20px; z-index:2; }
.sd-overlay button { margin-top:10px; padding:10px 22px; border-radius:8px; border:none; font-size:15px; font-weight:600; cursor:pointer; background:#2d9d5a; color:#fff; }

.mm-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px; }
.mm-stats { font-size: 0.9rem; color: #cfd3ea; text-align: center; }
.mm-board-wrap { width: min(420px, 90vw); position: relative; }
.mm-board-svg { width: 100%; height: auto; display: block; background: rgba(20,20,40,0.35); border-radius: 12px; }
.mm-message { font-size: 0.95rem; color: #e8e8f5; text-align: center; min-height: 24px; }
.mm-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10,10,25,0.85); border-radius: 12px; text-align: center; padding: 16px; color: #fff; z-index: 5; }
.mm-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 8px; border: none; background: #5b6fe6; color: #fff; font-weight: 600; cursor: pointer; }
.mm-overlay button:hover { background: #4457c9; }

.db-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px; }
.db-stats { font-size: 0.9rem; color: #cfd3ea; text-align: center; }
.db-board-wrap { width: min(420px, 90vw); position: relative; }
.db-board-svg { width: 100%; height: auto; display: block; background: rgba(20,20,40,0.35); border-radius: 12px; }
.db-message { font-size: 0.95rem; color: #e8e8f5; text-align: center; min-height: 24px; }
.db-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10,10,25,0.85); border-radius: 12px; text-align: center; padding: 16px; color: #fff; z-index: 5; }
.db-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 8px; border: none; background: #5b6fe6; color: #fff; font-weight: 600; cursor: pointer; }
.db-overlay button:hover { background: #4457c9; }

.hx-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px; }
.hx-stats { font-size: 0.9rem; color: #cfd3ea; text-align: center; }
.hx-board-wrap { width: min(460px, 92vw); position: relative; }
.hx-board-svg { width: 100%; height: auto; display: block; background: rgba(20,20,40,0.35); border-radius: 12px; }
.hx-message { font-size: 0.95rem; color: #e8e8f5; text-align: center; min-height: 24px; }
.hx-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10,10,25,0.85); border-radius: 12px; text-align: center; padding: 16px; color: #fff; z-index: 5; }
.hx-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 8px; border: none; background: #5b6fe6; color: #fff; font-weight: 600; cursor: pointer; }
.hx-overlay button:hover { background: #4457c9; }

.pg-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pg-stats { font-size: 14px; opacity: 0.85; text-align: center; }
.pg-board-wrap { width: 100%; max-width: 360px; }
.pg-board-svg { width: 100%; height: auto; display: block; }
.pg-rotate-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; }
.pg-rotate-group { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 6px 10px; }
.pg-rotate-group span { font-size: 13px; opacity: 0.85; }
.pg-rotate-group button { background: #5b6fe6; border: none; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 16px; cursor: pointer; margin-left: 4px; }
.pg-rotate-group button:hover { background: #4457c9; }
.pg-message { font-size: 14px; opacity: 0.8; text-align: center; max-width: 360px; }
.pg-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10,10,20,0.85); border-radius: 12px; padding: 16px; gap: 8px; }
.pg-overlay button { margin-top: 8px; background: #5b6fe6; border: none; color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 15px; cursor: pointer; }
.pg-overlay button:hover { background: #4457c9; }

.qt-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qt-stats { font-size: 14px; opacity: 0.85; text-align: center; }
.qt-board-wrap { width: 100%; max-width: 340px; }
.qt-board-svg { width: 100%; height: auto; display: block; background: rgba(255,255,255,0.03); border-radius: 8px; }
.qt-pending { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.85; }
.qt-pending-svg { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 6px; }
.qt-palette { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 340px; }
.qt-palette-label { font-size: 13px; opacity: 0.8; }
.qt-palette-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 100%; }
.qt-palette-item { background: rgba(255,255,255,0.06); border-radius: 6px; padding: 2px; cursor: pointer; }
.qt-palette-item:hover { background: rgba(255,255,255,0.14); }
.qt-palette-item svg { width: 100%; height: 100%; display: block; }
.qt-message { font-size: 14px; opacity: 0.8; text-align: center; max-width: 340px; }
.qt-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10,10,20,0.85); border-radius: 12px; padding: 16px; gap: 8px; }
.qt-overlay button { margin-top: 8px; background: #5b6fe6; border: none; color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 15px; cursor: pointer; }
.qt-overlay button:hover { background: #4457c9; }

.fn-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fn-stats { font-size: 13px; opacity: 0.85; text-align: center; }
.fn-board-wrap { width: 100%; max-width: 400px; }
.fn-board-svg { width: 100%; height: auto; display: block; background: rgba(255,255,255,0.03); border-radius: 8px; }
.fn-message { font-size: 14px; opacity: 0.8; text-align: center; max-width: 400px; }
.fn-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10,10,20,0.85); border-radius: 12px; padding: 16px; gap: 8px; }
.fn-overlay button { margin-top: 8px; background: #5b6fe6; border: none; color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 15px; cursor: pointer; }
.fn-overlay button:hover { background: #4457c9; }

.ts-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ts-stats { font-size: 0.85rem; opacity: 0.85; text-align: center; }
.ts-board-wrap { width: 100%; max-width: 420px; }
.ts-board-svg { width: 100%; height: auto; display: block; background: rgba(255,255,255,0.03); border-radius: 8px; }
.ts-hand { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.ts-hand-item { width: 64px; height: 64px; }
.ts-tile-icon { width: 100%; height: 100%; }
.ts-message { font-size: 0.85rem; opacity: 0.75; text-align: center; }
.ts-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10,10,20,0.85); border-radius: 8px; padding: 16px; gap: 8px; }

.sm-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sm-stats { font-size: 0.85rem; opacity: 0.85; text-align: center; }
.sm-board-wrap { width: 100%; max-width: 360px; }
.sm-board-svg { width: 100%; height: auto; display: block; background: rgba(255,255,255,0.03); border-radius: 8px; }
.sm-message { font-size: 0.85rem; opacity: 0.75; text-align: center; }
.sm-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10,10,20,0.85); border-radius: 8px; padding: 16px; gap: 8px; }

.hx-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px; }
.hx-stats { font-size:0.95rem; color:#e6e6f0; opacity:0.85; }
.hx-board-wrap { width:100%; max-width:360px; }
.hx-board-svg { width:100%; display:block; background:rgba(255,255,255,0.03); border-radius:12px; }
.hx-message { font-size:0.9rem; color:#c9c9e0; text-align:center; min-height:1.2em; }
.hx-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(10,10,20,0.82); border-radius:12px; padding:16px; z-index:5; }
.hx-overlay button { margin-top:8px; padding:8px 18px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.hx-overlay button:hover { background:#4a5cd6; }

.ut-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px; }
.ut-stats { font-size:0.9rem; color:#e6e6f0; opacity:0.85; }
.ut-board-wrap { width:100%; max-width:420px; position:relative; }
.ut-meta-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:rgba(255,255,255,0.06); padding:6px; border-radius:12px; }
.ut-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,0.03); border-radius:6px; padding:3px; transition:background 0.2s; }
.ut-mini-active { background:rgba(91,111,230,0.28); box-shadow:0 0 0 2px #5b6fe6 inset; }
.ut-mini-tied { opacity:0.4; }
.ut-cell { aspect-ratio:1/1; background:rgba(255,255,255,0.05); border-radius:3px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; color:#fff; }
.ut-cell-clickable { cursor:pointer; background:rgba(255,255,255,0.1); }
.ut-cell-clickable:hover { background:rgba(255,255,255,0.18); }
.ut-cell-x::before { content:'X'; color:#5b6fe6; }
.ut-cell-o::before { content:'O'; color:#d92b2b; }
.ut-mini-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:800; background:rgba(10,10,20,0.55); border-radius:6px; }
.ut-mini-won-x .ut-mini-overlay { color:#5b6fe6; }
.ut-mini-won-o .ut-mini-overlay { color:#d92b2b; }
.ut-mini-overlay-tie { color:#999; font-size:1.8rem; }
.ut-message { font-size:0.85rem; color:#c9c9e0; text-align:center; min-height:1.2em; }
.ut-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(10,10,20,0.82); border-radius:12px; padding:16px; z-index:5; }
.ut-overlay button { margin-top:8px; padding:8px 18px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.ut-overlay button:hover { background:#4a5cd6; }

.pl-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; }
.pl-stats { font-size:0.9rem; color:#e6e6f0; opacity:0.85; }
.pl-table-wrap { width:100%; max-width:420px; position:relative; }
.pl-table-svg { width:100%; display:block; border-radius:8px; }
.pl-message { font-size:0.85rem; color:#c9c9e0; text-align:center; min-height:1.2em; }
.pl-meter-wrap { display:flex; align-items:center; gap:10px; width:100%; max-width:420px; }
.pl-meter-bar { flex:1; height:14px; background:rgba(255,255,255,0.08); border-radius:7px; overflow:hidden; }
.pl-meter-fill { height:100%; background:linear-gradient(90deg,#5b6fe6,#d92b2b); border-radius:7px; }
.pl-meter-wrap button { padding:8px 16px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; white-space:nowrap; }
.pl-meter-wrap button:hover { background:#4a5cd6; }
.pl-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(10,10,20,0.82); border-radius:8px; padding:16px; z-index:5; }
.pl-overlay button { margin-top:8px; padding:8px 18px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.pl-overlay button:hover { background:#4a5cd6; }
.ah-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; }
.ah-stats { font-size:0.9rem; color:#e6e6f0; opacity:0.85; }
.ah-rink-wrap { width:100%; max-width:420px; }
.ah-rink-svg { width:100%; height:auto; border-radius:6px; }
.ah-message { font-size:0.85rem; color:#c9c9d8; min-height:1.2em; }
.ah-meter-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:260px; }
.ah-meter-bar { width:100%; height:14px; background:#22223a; border-radius:7px; overflow:hidden; border:1px solid #3a3a5a; }
.ah-meter-fill { height:100%; background:linear-gradient(90deg,#2f9e44,#ffd166,#d92b2b); transition:width 0.04s linear; }
.ah-meter-wrap button { padding:8px 20px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.ah-meter-wrap button:hover { background:#4a5cd6; }
.ah-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(10,10,20,0.82); color:#fff; padding:16px; border-radius:6px; gap:8px; }
.ah-overlay button { padding:8px 20px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; margin-top:6px; }
.ah-overlay button:hover { background:#4a5cd6; }
.fb-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; }
.fb-stats { font-size:0.9rem; color:#e6e6f0; opacity:0.85; }
.fb-table-wrap { width:100%; max-width:420px; }
.fb-table-svg { width:100%; height:auto; border-radius:6px; }
.fb-message { font-size:0.85rem; color:#c9c9d8; min-height:1.2em; }
.fb-meter-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:260px; }
.fb-meter-bar { width:100%; height:14px; background:#22223a; border-radius:7px; overflow:hidden; border:1px solid #3a3a5a; }
.fb-meter-fill { height:100%; background:linear-gradient(90deg,#2f9e44,#ffd166,#d92b2b); transition:width 0.04s linear; }
.fb-meter-wrap button { padding:8px 20px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.fb-meter-wrap button:hover { background:#4a5cd6; }
.fb-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(10,10,20,0.82); color:#fff; padding:16px; border-radius:6px; gap:8px; }
.fb-overlay button { padding:8px 20px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; margin-top:6px; }
.fb-overlay button:hover { background:#4a5cd6; }
.cu-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; }
.cu-stats { font-size:0.9rem; color:#e6e6f0; opacity:0.85; }
.cu-house-wrap { width:100%; max-width:340px; }
.cu-house-svg { width:100%; height:auto; border-radius:6px; }
.cu-message { font-size:0.85rem; color:#c9c9d8; min-height:1.2em; }
.cu-meter-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:260px; }
.cu-meter-bar { width:100%; height:14px; background:#22223a; border-radius:7px; overflow:hidden; border:1px solid #3a3a5a; }
.cu-meter-fill { height:100%; background:linear-gradient(90deg,#2f9e44,#ffd166,#d92b2b); transition:width 0.04s linear; }
.cu-meter-wrap button { padding:8px 20px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.cu-meter-wrap button:hover { background:#4a5cd6; }
.cu-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(10,10,20,0.82); color:#fff; padding:16px; border-radius:6px; gap:8px; }
.cu-overlay button { padding:8px 20px; border-radius:8px; border:none; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; margin-top:6px; }
.cu-overlay button:hover { background:#4a5cd6; }
.bx-wrap { display:flex; flex-direction:column; gap:10px; align-items:center; }
.bx-stats { font-size:14px; color:#444; text-align:center; }
.bx-bars { width:100%; max-width:320px; display:flex; flex-direction:column; gap:6px; }
.bx-bar-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.bx-bar-row span { width:36px; font-weight:600; }
.bx-hp-bar { flex:1; height:14px; background:#e2e2e2; border-radius:7px; overflow:hidden; }
.bx-hp-fill { height:100%; background:linear-gradient(90deg,#2f9e44,#69db7c); transition:width 0.3s; }
.bx-ring-wrap { width:100%; max-width:320px; }
.bx-ring-svg { width:100%; height:auto; display:block; }
.bx-meter-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:280px; }
.bx-meter-bar { width:100%; height:16px; background:#e2e2e2; border-radius:8px; overflow:hidden; }
.bx-meter-fill { height:100%; background:linear-gradient(90deg,#ffd166,#d92b2b); }
.bx-meter-wrap button { padding:8px 20px; border:none; border-radius:8px; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.bx-meter-wrap button:hover { background:#4a5cd6; }
.bx-message { font-size:13px; color:#666; text-align:center; min-height:18px; }
.bx-overlay { position:absolute; inset:0; background:rgba(20,20,20,0.85); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; border-radius:4px; padding:10px; }
.bx-overlay button { padding:8px 20px; border:none; border-radius:8px; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; margin-top:6px; }
.bx-overlay button:hover { background:#4a5cd6; }
.qd-wrap { display:flex; flex-direction:column; gap:10px; align-items:center; }
.qd-stats { font-size:14px; color:#444; text-align:center; }
.qd-scoreboard { width:100%; max-width:320px; display:flex; flex-direction:column; gap:6px; }
.qd-score-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.qd-score-row span:first-child { width:36px; font-weight:600; }
.qd-score-row span:last-child { width:24px; text-align:right; }
.qd-score-bar { flex:1; height:14px; background:#e2e2e2; border-radius:7px; overflow:hidden; }
.qd-score-fill { height:100%; background:linear-gradient(90deg,#f2994a,#f2c94c); transition:width 0.3s; }
.qd-scene-wrap { width:100%; max-width:320px; }
.qd-scene-svg { width:100%; height:auto; display:block; }
.qd-meter-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:280px; }
.qd-meter-bar { width:100%; height:16px; background:#e2e2e2; border-radius:8px; overflow:hidden; }
.qd-meter-fill { height:100%; background:linear-gradient(90deg,#f2c94c,#eb5757); }
.qd-meter-wrap button { padding:8px 20px; border:none; border-radius:8px; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; }
.qd-meter-wrap button:hover { background:#4a5cd6; }
.qd-message { font-size:13px; color:#666; text-align:center; min-height:18px; }
.qd-overlay { position:absolute; inset:0; background:rgba(20,20,20,0.85); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; border-radius:4px; padding:10px; }
.qd-overlay button { padding:8px 20px; border:none; border-radius:8px; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; margin-top:6px; }
.qd-overlay button:hover { background:#4a5cd6; }
.sq-wrap { display:flex; flex-direction:column; gap:10px; align-items:center; }
.sq-stats { font-size:14px; color:#444; text-align:center; }
.sq-progress { font-size:13px; color:#666; text-align:center; }
.sq-pad-wrap { width:100%; max-width:260px; position:relative; }
.sq-pad { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sq-pad-btn { font-size:32px; padding:24px 0; border:none; border-radius:12px; cursor:pointer; background:#eee; transition:transform 0.1s, filter 0.15s; }
.sq-pad-btn:hover { filter:brightness(1.08); }
.sq-pad-red { background:#ffd6d6; }
.sq-pad-blue { background:#d6e4ff; }
.sq-pad-green { background:#d6ffe0; }
.sq-pad-yellow { background:#fff6d6; }
.sq-pad-flash { filter:brightness(1.4); transform:scale(1.05); box-shadow:0 0 0 4px rgba(255,209,102,0.7); }
.sq-message { font-size:13px; color:#666; text-align:center; min-height:18px; }
.sq-overlay { position:absolute; inset:0; background:rgba(20,20,20,0.85); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; border-radius:4px; padding:10px; }
.sq-overlay button { padding:8px 20px; border:none; border-radius:8px; background:#5b6fe6; color:#fff; font-weight:600; cursor:pointer; margin-top:6px; }
.sq-overlay button:hover { background:#4a5cd6; }

.pz-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pz-stats { font-size: 14px; color: #444; text-align: center; }
.pz-grid-wrap { position: relative; }
.pz-grid { display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(3, 72px); gap: 6px; background: #2b2b3a; padding: 8px; border-radius: 10px; }
.pz-tile { display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6c63ff, #4b42d6); border-radius: 8px; user-select: none; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.pz-tile-blank { background: transparent; box-shadow: none; }
.pz-tile-clickable { cursor: pointer; box-shadow: 0 0 0 2px #ffd54f, 0 2px 4px rgba(0,0,0,0.3); }
.pz-tile-clickable:hover { transform: scale(1.04); }
.pz-message { font-size: 13px; color: #666; text-align: center; min-height: 18px; }
.pz-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(20,20,30,0.92); color: #fff; text-align: center; border-radius: 10px; padding: 16px; z-index: 5; }
.pz-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 6px; border: none; background: #ffd54f; color: #2b2b3a; font-weight: 700; cursor: pointer; }

.ts-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; }
.ts-stats { font-size: 14px; color: #444; }
.ts-towers { display: flex; gap: 24px; justify-content: center; align-items: flex-end; width: 100%; }
.ts-tower-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.ts-tower-label { font-size: 12px; color: #666; }
.ts-tower-block { height: 28px; max-width: 140px; background: linear-gradient(135deg, #6c63ff, #4b42d6); border-radius: 6px; transition: width 0.2s ease; }
.ts-tower-block-cpu { background: linear-gradient(135deg, #ff6b6b, #d63c3c); }
.ts-play-area { width: 100%; min-height: 40px; }
.ts-meter { width: 100%; padding: 8px 0; }
.ts-meter-track { position: relative; width: 100%; height: 14px; background: #e0e0e0; border-radius: 7px; overflow: visible; }
.ts-meter-target { position: absolute; left: 46%; width: 8%; height: 100%; background: #ffd54f; border-radius: 4px; }
.ts-meter-marker { position: absolute; top: -4px; width: 6px; height: 22px; background: #2b2b3a; border-radius: 3px; transform: translateX(-50%); }
.ts-lock-btn { padding: 10px 24px; border-radius: 8px; border: none; background: #6c63ff; color: #fff; font-weight: 700; cursor: pointer; font-size: 15px; }
.ts-lock-btn:hover { background: #574fd6; }
.ts-message { font-size: 13px; color: #666; text-align: center; min-height: 18px; }
.ts-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(20,20,30,0.92); color: #fff; text-align: center; border-radius: 10px; padding: 16px; z-index: 5; }
.ts-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 6px; border: none; background: #ffd54f; color: #2b2b3a; font-weight: 700; cursor: pointer; }

.mz-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.mz-stats { font-size: 13px; color: #444; text-align: center; }
.mz-play-area { display: flex; justify-content: center; }
.mz-grid { display: grid; gap: 0; background: #2b2b3a; padding: 4px; border-radius: 6px; }
.mz-cell { width: 32px; height: 32px; box-sizing: border-box; background: #f4f4fa; border: 1px solid transparent; }
.mz-cell-player { background: #6c63ff; border-radius: 50%; box-shadow: inset 0 0 0 6px #f4f4fa; }
.mz-cell-goal { background: #4caf50; }
.mz-cell-player.mz-cell-goal { background: radial-gradient(circle, #6c63ff 40%, #4caf50 41%); }
.mz-wall-n { border-top: 2px solid #2b2b3a; }
.mz-wall-s { border-bottom: 2px solid #2b2b3a; }
.mz-wall-e { border-right: 2px solid #2b2b3a; }
.mz-wall-w { border-left: 2px solid #2b2b3a; }
.mz-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mz-controls-row { display: flex; gap: 6px; }
.mz-btn { width: 44px; height: 44px; border-radius: 8px; border: none; background: #6c63ff; color: #fff; font-size: 18px; cursor: pointer; }
.mz-btn:hover { background: #574fd6; }
.mz-message { font-size: 13px; color: #666; text-align: center; min-height: 18px; }
.mz-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(20,20,30,0.92); color: #fff; text-align: center; border-radius: 10px; padding: 16px; z-index: 5; }
.mz-overlay button { margin-top: 8px; padding: 8px 18px; border-radius: 6px; border: none; background: #ffd54f; color: #2b2b3a; font-weight: 700; cursor: pointer; }










.tw-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.tw-stats { font-weight: 600; color: #333; }
.tw-rope-track { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; }
.tw-rope-you, .tw-rope-cpu { font-weight: 700; font-size: 12px; color: #555; width: 32px; text-align: center; }
.tw-rope-bar { flex: 1; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #4caf50, #eee 50%, #f44336); position: relative; border: 1px solid #ccc; }
.tw-rope-marker { position: absolute; top: -6px; width: 6px; height: 26px; background: #6d4c26; border-radius: 3px; transform: translateX(-50%); box-shadow: 0 0 4px rgba(0,0,0,0.4); }
.tw-play-area { width: 100%; max-width: 420px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.tw-meter { width: 100%; }
.tw-meter-track { position: relative; width: 100%; height: 20px; background: #eee; border-radius: 10px; border: 1px solid #ccc; overflow: visible; }
.tw-meter-target { position: absolute; left: 42%; width: 16%; height: 100%; background: rgba(76,175,80,0.4); border-radius: 6px; }
.tw-meter-marker { position: absolute; top: -4px; width: 6px; height: 28px; background: #c62828; border-radius: 3px; transform: translateX(-50%); }
.tw-pull-btn { padding: 10px 28px; font-size: 16px; font-weight: 700; border-radius: 8px; border: none; background: #6d4c26; color: #fff; cursor: pointer; }
.tw-pull-btn:active { transform: scale(0.96); }
.tw-message { font-size: 14px; color: #555; min-height: 20px; text-align: center; }
.tw-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; background: rgba(20,20,20,0.92); color: #fff; border-radius: 10px; padding: 16px; z-index: 5; }

.fk-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.fk-stats { font-weight: 600; color: #333; }
.fk-turn-score { font-size: 15px; color: #555; }
.fk-play-area { width: 100%; max-width: 420px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.fk-dice-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fk-die { font-size: 42px; line-height: 1; color: #2b2b2b; }
.fk-controls { display: flex; gap: 12px; }
.fk-roll-btn, .fk-bank-btn { padding: 10px 24px; font-size: 16px; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; color: #fff; }
.fk-roll-btn { background: #1565c0; }
.fk-bank-btn { background: #2e7d32; }
.fk-roll-btn:active, .fk-bank-btn:active { transform: scale(0.96); }
.fk-message { font-size: 14px; color: #555; min-height: 20px; text-align: center; }
.fk-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; background: rgba(20,20,20,0.92); color: #fff; border-radius: 10px; padding: 16px; z-index: 5; }

.bp-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.bp-stats { font-weight: 600; color: #333; }
.bp-play-area { display: flex; align-items: center; justify-content: center; }
.bp-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2px; width: 264px; height: 264px; background: #ddd; border-radius: 8px; padding: 4px; }
.bp-cell { background: #f4f4f4; border-radius: 3px; cursor: pointer; }
.bp-cell-filled { background: #5c6bc0; }
.bp-tray { display: flex; gap: 16px; justify-content: center; align-items: center; min-height: 60px; }
.bp-piece-slot { padding: 8px; border-radius: 8px; background: #f0f0f0; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 50px; min-height: 50px; }
.bp-piece-slot.bp-piece-selected { background: #c5cae9; box-shadow: 0 0 0 2px #5c6bc0; }
.bp-piece-slot.bp-piece-used { opacity: 0.25; pointer-events: none; }
.bp-piece-grid { display: grid; gap: 2px; }
.bp-piece-cell { width: 12px; height: 12px; background: transparent; }
.bp-piece-cell-filled { background: #5c6bc0; border-radius: 2px; }
.bp-message { font-size: 14px; color: #555; min-height: 20px; text-align: center; }
.bp-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; background: rgba(20,20,20,0.92); color: #fff; border-radius: 10px; padding: 16px; z-index: 5; }