:root {
  --bg: #090b1c;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-solid: #151938;
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.16);
  --text: #eef0ff;
  --muted: #959cc8;
  --accent: #7c5cff;
  --accent2: #ff5ca8;
  --good: #3ddc84;
  --bad: #ff5470;
  --warn: #ffc93c;
  --tile: #1c2048;
  --tile-hi: #262b66;
  --radius: 18px;
  --grad: linear-gradient(135deg, #8b6bff, #ff5ca8);
  --board-a: #1a1f4d;
  --board-b: #0e1132;
  --tile-a: #222760;
  --corner-a: #262c6c;
  --corner-b: #1a1e4a;
  --glow1: rgba(124, 92, 255, 0.22);
  --glow2: rgba(255, 92, 168, 0.12);
  --tile-text: var(--text);
  --tile-muted: var(--muted);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(124, 92, 255, 0.24), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(255, 92, 168, 0.16), transparent 60%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
img { display: block; }
h1, h2, h3, h4 { margin: 0; }
h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; }
kbd { font: 600 11px 'Outfit', sans-serif; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1; }
.empty { color: var(--muted); font-size: 13px; padding: 10px 2px; display: flex; align-items: center; gap: 8px; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; }

/* ---------- 3D icons ---------- */
.ic { display: inline-block; width: 22px; height: 22px; object-fit: contain; vertical-align: middle; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.ic.xs { width: 16px; height: 16px; }
.ic.sm { width: 20px; height: 20px; }
.ic.md { width: 28px; height: 28px; }
.ic.btn-ic { width: 20px; height: 20px; margin: -3px 8px -3px -2px; }
.ic.huge-ic { width: max(3cqi, 26px); height: max(3cqi, 26px); margin: -6px 10px -6px -4px; }
.ic.badge-ic { width: 15px; height: 15px; vertical-align: -2px; }
.ic.feat { width: 44px; height: 44px; }
.ic.set-ic { width: 26px; height: 26px; }
.ic.rule-ic { width: 26px; height: 26px; }
.ic.row-ic { width: 14px; height: 14px; margin-left: 1px; vertical-align: -2px; }
.ic.bld-ic { width: 16px; height: 16px; margin-left: -3px; }
.ic.logo-ic { width: 34px; height: 34px; filter: drop-shadow(0 6px 12px rgba(255, 92, 168, 0.45)); animation: wobble 6s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }

/* ---------- buttons & inputs ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s, opacity 0.15s, filter 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(124, 92, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.btn.primary:hover:not(:disabled) { box-shadow: 0 12px 30px -8px rgba(255, 92, 168, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); background: var(--grad); filter: brightness(1.08); }
.btn.danger { background: rgba(255, 84, 112, 0.14); border-color: rgba(255, 84, 112, 0.45); color: #ffb3c0; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 9px; }
.btn.sm .btn-ic { width: 16px; height: 16px; margin-right: 6px; }
.btn.big { padding: 12px 20px; font-size: 15px; }
.btn.huge { padding: max(1.3cqi, 12px) max(3cqi, 24px); font-size: max(1.9cqi, 15px); border-radius: 16px; }
.btn.chip { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; }
.icon-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  width: 38px;
  height: 38px;
  border-radius: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.icon-btn.sm { width: 28px; height: 28px; font-size: 12px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.link-btn { appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.link-btn:hover { color: var(--text); }
.chip-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--line2);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}
input:not([type='checkbox']):not([type='range']), select {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line2);
  border-radius: 11px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25); }
select option { background: var(--panel-solid); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input { color: var(--text); font-size: 15px; }

.switch { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); position: relative; cursor: pointer; flex: none; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.switch:checked { background: var(--grad); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: 0.55; cursor: default; }

.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 6px; background: rgba(124, 92, 255, 0.25); color: #cfc4ff; vertical-align: middle; }
.tag.off { background: rgba(255, 255, 255, 0.1); color: var(--muted); }
.tag.good { background: rgba(61, 220, 132, 0.2); color: var(--good); }
.tag.warn { background: rgba(255, 201, 60, 0.18); color: var(--warn); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent2); font-size: 11px; font-weight: 700; }
.badge[hidden] { display: none; }

/* avatars: 3D animal on a glossy coloured disc */
.av {
  --c: #888;
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, color-mix(in srgb, var(--c) 45%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: inline-grid;
  place-items: center;
  box-shadow: 0 5px 14px -4px var(--c), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}
.av img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.av.xs { width: 20px; height: 20px; border-width: 1px; vertical-align: middle; }
.av.sm { width: 28px; height: 28px; border-width: 1.5px; }
.av.xl { width: 72px; height: 72px; border-width: 3px; }
.av.ghost { background: rgba(255, 255, 255, 0.06); border: 2px dashed var(--line2); box-shadow: none; color: var(--muted); font-weight: 700; }
.nm { font-weight: 700; }
.flag-xs { display: inline-block; width: 18px; height: 12px; object-fit: cover; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.tile-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 6px; border-radius: 8px; font-weight: 700; background: color-mix(in srgb, var(--g) 22%, transparent); border: 1px solid color-mix(in srgb, var(--g) 55%, transparent); }

.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 23px; letter-spacing: -0.01em; }
.logo.sm { font-size: 17px; gap: 7px; }
.logo.sm .logo-ic { width: 26px; height: 26px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; position: relative; z-index: 2; }
.top-actions { display: flex; gap: 10px; align-items: center; }

.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 1; } }

/* ---------- home ---------- */
.home { min-height: 100vh; position: relative; overflow: hidden; }
.home-glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 760px;
  height: 760px;
  background: conic-gradient(from 90deg, rgba(124, 92, 255, 0.35), rgba(255, 92, 168, 0.3), rgba(34, 211, 197, 0.25), rgba(124, 92, 255, 0.35));
  filter: blur(130px);
  opacity: 0.6;
  pointer-events: none;
}
.home-main { position: relative; max-width: 1160px; margin: 0 auto; padding: 24px 24px 60px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.hero { position: relative; }
.hero-art { position: absolute; inset: -40px -30px; pointer-events: none; z-index: -1; }
.fl { position: absolute; width: 64px; opacity: 0.9; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); animation: float 7s ease-in-out infinite; }
.fl0 { top: -2%; right: 6%; width: 86px; }
.fl1 { top: 22%; right: -4%; animation-delay: -1s; }
.fl2 { bottom: 8%; right: 2%; width: 56px; animation-delay: -2s; }
.fl3 { top: -6%; left: 42%; width: 54px; animation-delay: -3s; transform: rotate(-12deg); }
.fl4 { bottom: -4%; left: 38%; width: 52px; animation-delay: -4s; }
.fl5, .fl6, .fl7, .fl8, .fl9, .fl10, .fl11 { display: none; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -14px; rotate: 5deg; } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line2); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 900; max-width: 600px; }
.hero p { color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 520px; margin: 20px 0 26px; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); }
.feature-list b { display: block; font-size: 15px; }
.feature-list span { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.home-card { padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75); }
.home-buttons { display: grid; gap: 10px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700; text-align: center; }
.rooms-h { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.rooms-list { display: grid; gap: 8px; max-height: 210px; overflow: auto; }
.room-item { appearance: none; display: flex; align-items: center; gap: 10px; justify-content: space-between; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; }
.room-item:hover { border-color: var(--accent); }
.room-item .go { color: var(--accent2); font-weight: 700; }
.invite { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(124, 92, 255, 0.15); border: 1px solid rgba(124, 92, 255, 0.45); }

/* ---------- lobby ---------- */
.lobby { min-height: 100vh; display: flex; flex-direction: column; }
.lobby-grid { flex: 1; width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; }
.lobby-room { grid-row: span 2; }
.lobby-chat { grid-column: span 2; min-height: 240px; }
.room-code-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.room-code-row .label { margin: 0 0 4px; }
.room-code { font-size: 40px; font-weight: 900; letter-spacing: 0.18em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lobby-players { display: grid; gap: 8px; }
.lp { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid transparent; }
.lp.me { border-color: rgba(124, 92, 255, 0.5); background: rgba(124, 92, 255, 0.1); }
.lp.empty { opacity: 0.55; }
.lp-name { flex: 1; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.look-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 50%, #fff), var(--c)); border: 3px solid transparent; cursor: pointer; transition: transform 0.12s; }
.sw:hover:not(:disabled) { transform: scale(1.1); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.sw:disabled { opacity: 0.18; cursor: not-allowed; }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.avb { appearance: none; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; display: grid; place-items: center; padding: 6px; transition: transform 0.12s; }
.avb img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); }
.avb:hover { transform: translateY(-2px); }
.avb.on { border-color: var(--accent); background: rgba(124, 92, 255, 0.25); box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.35); }
.lobby-settings h3 { margin-bottom: 10px; }
#lobbySettings { display: grid; gap: 2px; max-height: 480px; overflow: auto; padding-right: 4px; }
.editions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.ed-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.ed-card:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(124, 92, 255, 0.6); }
.ed-card:disabled { cursor: default; }
.ed-card.on { border-color: var(--accent); background: linear-gradient(180deg, rgba(124, 92, 255, 0.3), rgba(255, 92, 168, 0.12)); box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.35), 0 10px 24px -12px rgba(124, 92, 255, 0.8); }
.ed-card b { font-size: 14px; }
.ed-card small { font-size: 10.5px; color: var(--muted); line-height: 1.25; min-height: 26px; }
.ed-pic { height: 34px; display: grid; place-items: center; }
.ed-flag { width: 44px; height: 30px; object-fit: cover; }
.ic.ed-globe { width: 34px; height: 34px; }
.ed-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 2px; }
.ar { font-family: 'Noto Kufi Arabic', 'Segoe UI', sans-serif; font-size: 15px; font-weight: 600; opacity: 0.9; margin-top: 2px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.set-row:last-child { border-bottom: 0; }
.set-label { display: flex; align-items: center; gap: 10px; }
.set-row small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.set-row select { width: auto; min-width: 140px; padding: 6px 10px; }
.lobby-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: linear-gradient(transparent, rgba(9, 11, 28, 0.96) 30%); }
.waiting-host { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }

/* ---------- chat ---------- */
.chat-panel { display: flex; flex-direction: column; min-height: 0; }
.chat-panel h3 { margin-bottom: 10px; }
.chat-list { flex: 1; overflow-y: auto; min-height: 80px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.4; padding-right: 4px; }
.chat-list .msg { display: flex; gap: 8px; align-items: flex-start; word-wrap: break-word; }
.chat-list .msg > div { min-width: 0; }
.chat-list .log-line { color: #c9cdee; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { padding: 8px 12px; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.22); padding: 4px; border-radius: 12px; }
.tab { flex: 1; appearance: none; border: 0; background: transparent; padding: 7px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; justify-content: center; align-items: center; }
.tab.on { background: rgba(255, 255, 255, 0.1); color: var(--text); }

/* ---------- game layout ---------- */
.game { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 268px minmax(0, 1fr) 296px; grid-template-areas: 'left board right'; gap: 10px; padding: 10px; }
.col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.col-left { grid-area: left; }
.col-right { grid-area: right; }
.board-wrap { grid-area: board; container-type: size; min-height: 0; min-width: 0; position: relative; }
.board-scroll { width: 100%; height: 100%; display: grid; place-items: center; }
.zoom-btn { display: none; }
.room-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.room-bar-actions { display: flex; gap: 6px; align-items: center; }
.round-pill { font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.players-panel { flex: none; }
.trades-panel { flex: 1; min-height: 120px; overflow: auto; }
.mine-panel { flex: 1 1 50%; min-height: 0; display: flex; flex-direction: column; }
.mine { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.col-right .chat-panel { flex: 1 1 50%; }

.pl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; position: relative; }
.pl + .pl { margin-top: 4px; }
.pl.clickable { cursor: pointer; }
.pl.clickable:hover { background: rgba(255, 255, 255, 0.05); }
.pl.cur { background: linear-gradient(90deg, rgba(124, 92, 255, 0.24), rgba(124, 92, 255, 0.06)); border-color: rgba(124, 92, 255, 0.55); }
.pl.cur::before { content: ''; position: absolute; left: -6px; top: 50%; width: 4px; height: 60%; transform: translateY(-50%); border-radius: 4px; background: var(--grad); }
.pl.out { opacity: 0.4; filter: grayscale(0.7); }
.pl-info { flex: 1; min-width: 0; }
.pl-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.pl-sub { font-size: 11.5px; color: var(--muted); }
.pl-cash { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: #c9ffe0; }

.trade-row { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; font-size: 13px; margin-bottom: 6px; }
.trade-row.inc { border-color: rgba(255, 92, 168, 0.55); background: rgba(255, 92, 168, 0.1); animation: glow 1.8s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px rgba(255, 92, 168, 0.18); } }
.chev { color: var(--muted); font-size: 18px; }

.cash-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; padding: 3px 10px 3px 6px; border-radius: 99px; background: rgba(61, 220, 132, 0.15); color: var(--good); font-variant-numeric: tabular-nums; }
.pf-group { border-left: 3px solid var(--g); padding-left: 10px; }
.pf-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.pf-items { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-item { appearance: none; display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--g) 14%, transparent); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.pf-item:hover { border-color: var(--g); }
.pf-item.mort { opacity: 0.55; text-decoration: line-through; }
.pf-b { display: inline-flex; align-items: center; padding-left: 3px; }
.pf-cards { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ---------- board ---------- */
.board {
  --gap: 0.32cqi;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr repeat(9, 1fr) 1.55fr;
  grid-template-rows: 1.55fr repeat(9, 1fr) 1.55fr;
  gap: var(--gap);
  padding: 0.8cqi;
  background: linear-gradient(145deg, var(--board-a), var(--board-b));
  border-radius: 2.2cqi;
  border: 1px solid var(--line2);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 0 0.5cqi rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  user-select: none;
}
.tile {
  position: relative;
  display: flex;
  background: linear-gradient(160deg, var(--tile-a), var(--tile) 60%);
  color: var(--tile-text);
  border-radius: 0.7cqi;
  overflow: hidden;
  cursor: default;
  min-width: 0;
  min-height: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0.3cqi 0.6cqi rgba(0, 0, 0, 0.25);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.tile.t-property, .tile.t-airport, .tile.t-utility { cursor: pointer; }
.tile.t-property:hover, .tile.t-airport:hover, .tile.t-utility:hover { transform: scale(1.06); z-index: 3; box-shadow: 0 1.2cqi 2.4cqi rgba(0, 0, 0, 0.55); }
.tile.bottom { flex-direction: column; }
.tile.top { flex-direction: column-reverse; }
.tile.left { flex-direction: row-reverse; }
.tile.right { flex-direction: row; }
.band {
  flex: 0 0 23%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 75%, #fff), var(--g) 45%, color-mix(in srgb, var(--g) 75%, #000));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.tile.left .band, .tile.right .band { background: linear-gradient(90deg, color-mix(in srgb, var(--g) 75%, #000), var(--g) 55%, color-mix(in srgb, var(--g) 75%, #fff)); }
.tile-bg { display: none; } /* only the flat theme paints it (blurred country flag) */
.houses { display: flex; align-items: center; justify-content: center; }
.tile.left .houses, .tile.right .houses { flex-direction: column; }
.ic.bld { width: 1.75cqi; height: 1.75cqi; margin: 0 -0.15cqi; filter: drop-shadow(0 0.2cqi 0.2cqi rgba(0, 0, 0, 0.5)); }
.tile.left .ic.bld, .tile.right .ic.bld { margin: -0.2cqi 0; }
.ic.bld.hotel { width: 2.4cqi; height: 2.4cqi; }
.body { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25cqi; padding: 0.25cqi; text-align: center; }
.landmark { position: absolute; right: -0.4cqi; bottom: -0.4cqi; width: 3.6cqi; height: 3.6cqi; opacity: 0.16; pointer-events: none; }
.tile.left .landmark, .tile.right .landmark { width: 3.2cqi; height: 3.2cqi; }
.flag-wrap { position: relative; display: block; border-radius: 0.35cqi; overflow: hidden; box-shadow: 0 0.25cqi 0.6cqi rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3); }
.flag-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.45), transparent 40%, rgba(0, 0, 0, 0.12) 75%, rgba(255, 255, 255, 0.15)); }
.flag { width: 2.4cqi; height: 1.6cqi; object-fit: cover; }
.name { position: relative; font-weight: 800; font-size: max(1.45cqi, 7px); line-height: 1.02; letter-spacing: -0.015em; text-shadow: 0 0.12cqi 0.3cqi rgba(0, 0, 0, 0.55); overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.price { position: relative; font-size: max(1.08cqi, 6.5px); color: var(--tile-muted); font-weight: 700; white-space: nowrap; }
.ic.tile-ic { width: 2.6cqi; height: 2.6cqi; filter: drop-shadow(0 0.3cqi 0.4cqi rgba(0, 0, 0, 0.45)); }
.ic.tile-ic.big { width: 3.2cqi; height: 3.2cqi; }
.ic.tile-ic.grp { width: 2.3cqi; height: 2.3cqi; }
.edition-tag { display: flex; align-items: center; gap: 0.8cqi; margin-top: -1.2cqi; font-size: max(1.1cqi, 10px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.t-surprise { background: linear-gradient(160deg, color-mix(in srgb, var(--accent2) 26%, var(--tile)), var(--tile)); }
.t-treasure { background: linear-gradient(160deg, color-mix(in srgb, #ffc93c 20%, var(--tile)), var(--tile)); }
.t-tax { background: linear-gradient(160deg, color-mix(in srgb, #3ddc84 12%, var(--tile)), var(--tile)); }

.tile.owned .body { background: linear-gradient(180deg, color-mix(in srgb, var(--owner) 28%, transparent), color-mix(in srgb, var(--owner) 12%, transparent)); }
.tile.owned::after { content: ''; position: absolute; inset: 0; border: 0.28cqi solid var(--owner); border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 1.2cqi color-mix(in srgb, var(--owner) 45%, transparent); }
.tile.owned .price { color: #fff; }
.tile.mortgaged .body { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 0.5cqi, transparent 0.5cqi 1cqi); }
.tile.mortgaged .body > * { opacity: 0.45; }
.tile.mortgaged .price { opacity: 1; color: var(--warn); }
.tile.pending { animation: pending 1s ease-in-out infinite; z-index: 2; }
@keyframes pending { 50% { box-shadow: 0 0 0 0.4cqi #fff, 0 0 2.5cqi rgba(255, 255, 255, 0.6); } }
.tile.flash { animation: flash 0.9s ease-out; }
@keyframes flash { 0% { transform: scale(1.2); box-shadow: 0 0 3cqi var(--owner, #fff); } 100% { transform: scale(1); } }

.tile.corner { background: linear-gradient(150deg, var(--corner-a), var(--corner-b)); color: var(--text); }
.corner-in { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3cqi; text-align: center; padding: 0.6cqi; }
.corner-in .big { font-weight: 900; font-size: 1.55cqi; letter-spacing: 0.02em; }
.ic.corner-ic { width: 5.4cqi; height: 5.4cqi; filter: drop-shadow(0 0.5cqi 0.6cqi rgba(0, 0, 0, 0.5)); }
.start-in { background: linear-gradient(135deg, rgba(139, 107, 255, 0.7), rgba(255, 92, 168, 0.55)); }
.start-in .big { font-size: 2.2cqi; text-shadow: 0 0.3cqi 0.8cqi rgba(0, 0, 0, 0.35); }
.start-in .small { font-size: 0.95cqi; opacity: 0.9; font-weight: 700; }
.start-in .arrow { font-size: 2.6cqi; line-height: 0.6; color: #fff; }
.jail-in { justify-content: flex-end; align-items: flex-start; padding: 0.5cqi; }
.jail-in .cell {
  position: absolute;
  top: 0;
  right: 0;
  width: 66%;
  height: 66%;
  background: repeating-linear-gradient(90deg, rgba(220, 225, 255, 0.55) 0 0.3cqi, transparent 0.3cqi 1.3cqi), linear-gradient(160deg, #ff9f43aa, #c2410c88);
  border-left: 0.3cqi solid rgba(255, 255, 255, 0.5);
  border-bottom: 0.3cqi solid rgba(255, 255, 255, 0.5);
  border-bottom-left-radius: 0.7cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.5cqi 0 0.4cqi;
}
.ic.cell-ic { width: 2.6cqi; height: 2.6cqi; }
.jail-in .cell span { font-size: 0.95cqi; font-weight: 900; background: rgba(0, 0, 0, 0.6); padding: 0.1cqi 0.6cqi; border-radius: 0.4cqi; letter-spacing: 0.1em; }
.jail-in .visit { font-size: 0.85cqi; color: var(--muted); font-weight: 600; }
.vac-in { background: linear-gradient(160deg, rgba(34, 211, 197, 0.35), transparent); }
.vac-in .pot { font-weight: 900; color: var(--good); font-size: 1.5cqi; }
.gtj-in { background: linear-gradient(160deg, rgba(255, 84, 112, 0.35), transparent); }

/* center stage */
.center {
  grid-area: 2 / 2 / 11 / 11;
  position: relative;
  border-radius: 1.4cqi;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 40%, var(--glow1), transparent 70%),
    radial-gradient(40% 40% at 70% 85%, var(--glow2), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 30, 0.25), rgba(8, 10, 30, 0.55));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqi;
  padding: 2cqi;
  font-size: max(1.45cqi, 11px);
  min-width: 0;
  min-height: 0;
  box-shadow: inset 0 0 4cqi rgba(0, 0, 0, 0.35);
}
.center-map { position: absolute; width: 62%; left: 19%; top: 12%; opacity: 0.07; pointer-events: none; filter: saturate(0.6); }
.center > *:not(.center-map):not(.card-pop):not(.taunt):not(.react-wrap) { position: relative; }
.brand { font-weight: 900; font-size: max(2.8cqi, 16px); letter-spacing: -0.02em; display: flex; gap: 1cqi; align-items: center; }
.brand span { background: linear-gradient(180deg, #fff, #c8c2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ic.brand-ic { width: max(3.4cqi, 20px); height: max(3.4cqi, 20px); }

/* real 3D dice */
.dice { display: flex; gap: 5cqi; perspective: 80cqi; padding: 1.5cqi 0 2cqi; filter: drop-shadow(0 1.2cqi 0.9cqi rgba(0, 0, 0, 0.5)); }
.die3d { --s: max(9cqi, 46px); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(28deg); }
.die3d:nth-child(2) { transform: rotateX(-20deg) rotateY(-24deg); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--roll, 1s) cubic-bezier(0.2, 0.9, 0.25, 1.05); }
.face {
  position: absolute;
  inset: 0;
  border-radius: 18%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #eceefa 55%, #cfd3ea);
  box-shadow: inset 0 0 calc(var(--s) * 0.12) rgba(40, 44, 90, 0.22);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 15%;
  backface-visibility: hidden;
}
.face i { place-self: center; width: 74%; height: 74%; border-radius: 50%; }
.face i.pip { background: radial-gradient(circle at 38% 35%, #4b4f7a, #12142e 70%); box-shadow: inset 0 calc(var(--s) * 0.015) calc(var(--s) * 0.02) rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.8); }
.face.f1 i.pip { width: 92%; height: 92%; background: radial-gradient(circle at 38% 35%, #ff6b7f, #b3122e 70%); }
.f1 { transform: translateZ(calc(var(--s) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.dice.rolling .die3d { animation: toss var(--roll, 1s) cubic-bezier(0.3, 0.7, 0.4, 1); }
.dice.rolling .die3d:nth-child(2) { animation-delay: 0.05s; }
@keyframes toss { 0% { translate: 0 0; } 30% { translate: 0 -3.5cqi; } 60% { translate: 0 0; } 75% { translate: 0 -0.9cqi; } 100% { translate: 0 0; } }

.actions { display: flex; flex-direction: column; align-items: center; gap: 1cqi; min-height: 9cqi; width: 100%; max-width: 64cqi; }
.act-note { color: var(--muted); font-weight: 600; text-align: center; display: flex; align-items: center; gap: 8px; }
.act-note.subtle { opacity: 0.6; }
.kbd-hint { font-size: max(1.05cqi, 10px); color: var(--muted); }
.box { width: 100%; background: linear-gradient(180deg, rgba(26, 30, 72, 0.92), rgba(14, 16, 44, 0.92)); border: 1px solid var(--line2); border-radius: 1.6cqi; padding: 1.6cqi; display: flex; flex-direction: column; gap: 1cqi; align-items: center; text-align: center; box-shadow: 0 1.5cqi 4cqi rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.box-title { font-weight: 800; font-size: 1.15em; display: flex; flex-wrap: wrap; gap: 0.6cqi; justify-content: center; align-items: center; }
.row { display: flex; gap: 0.8cqi; flex-wrap: wrap; justify-content: center; }
.debt-box { border-color: rgba(255, 84, 112, 0.6); }
.auction-box { border-color: rgba(255, 201, 60, 0.55); }
.auc-bid { font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.big-num { font-size: 1.5em; font-weight: 900; font-variant-numeric: tabular-nums; }
.bar { width: 100%; height: 0.7cqi; min-height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--good), var(--warn)); transition: width 0.2s linear; }
.bar i.hot { background: var(--bad); }
.waiting { display: flex; align-items: center; gap: 1cqi; color: var(--muted); padding: 0.8cqi 1.8cqi 0.8cqi 0.8cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.afk-note { display: flex; gap: 1cqi; align-items: center; padding: 0.8cqi 1.4cqi; border-radius: 1cqi; background: rgba(255, 201, 60, 0.12); color: var(--warn); font-weight: 600; }
.turn-timer { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.turn-timer.hot { color: var(--bad); animation: blink 0.6s infinite; }
.feed { width: 100%; max-width: 64cqi; display: flex; flex-direction: column; gap: 0.4cqi; font-size: max(1.12cqi, 10px); color: #c9cdee; text-align: center; }
.feed-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-pop { position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; background: rgba(5, 6, 20, 0.5); }
.card-pop[hidden] { display: none; }
.cp { width: min(72%, 48cqi); border-radius: 1.8cqi; background: linear-gradient(180deg, #fff, #f1f2fb); color: #1a1d3f; padding: 0 0 2cqi; overflow: hidden; text-align: center; box-shadow: 0 3cqi 6cqi rgba(0, 0, 0, 0.6); animation: cardIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.cp-h { display: flex; align-items: center; justify-content: center; gap: 1cqi; padding: 1.4cqi; font-weight: 900; font-size: 1.35em; color: #fff; background: linear-gradient(135deg, #ff5ca8, #8b6bff); }
.ic.cp-ic { width: max(4.4cqi, 28px); height: max(4.4cqi, 28px); }
.cp.treasure .cp-h { background: linear-gradient(135deg, #ffb340, #ff6b3d); }
.cp-text { padding: 2.4cqi 2.4cqi 1.4cqi; font-size: 1.2em; font-weight: 600; line-height: 1.35; }
.cp-who { font-size: 0.9em; color: #6b6f99; display: flex; align-items: center; justify-content: center; gap: 6px; }
@keyframes cardIn { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* taunt speech bubble (top of the center stage) */
.taunt {
  position: absolute;
  top: 3%;
  left: 50%;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 1cqi;
  max-width: 88%;
  padding: 1.1cqi 2cqi 1.1cqi 1.1cqi;
  border-radius: 2cqi;
  background: #fff;
  color: #1a1d3f;
  font-weight: 900;
  font-size: max(2cqi, 14px);
  box-shadow: 0 1.5cqi 4cqi rgba(0, 0, 0, 0.55), 0 0 0 0.35cqi #ff5ca8;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.taunt::after { content: ''; position: absolute; left: 3.2cqi; bottom: -1.2cqi; border: 0.8cqi solid transparent; border-top: 1.2cqi solid #fff; border-bottom: 0; }
.taunt.good { box-shadow: 0 1.5cqi 4cqi rgba(0, 0, 0, 0.55), 0 0 0 0.35cqi #3ddc84; }
.taunt.show { animation: tauntIn 2.8s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
@keyframes tauntIn {
  0% { transform: translateX(-50%) scale(0) rotate(-8deg); opacity: 0; }
  12% { transform: translateX(-50%) scale(1.08) rotate(2deg); opacity: 1; }
  20%, 85% { transform: translateX(-50%) scale(1) rotate(-1deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.85); opacity: 0; }
}

/* reactions */
.react-wrap { position: absolute; right: 1.6cqi; bottom: 1.6cqi; z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 0.8cqi; }
.react-btn { appearance: none; width: max(5cqi, 38px); height: max(5cqi, 38px); border-radius: 50%; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.1); font-size: max(2.6cqi, 19px); cursor: pointer; box-shadow: 0 0.8cqi 2cqi rgba(0, 0, 0, 0.4); transition: transform 0.12s; }
.react-btn:hover { transform: scale(1.1) rotate(-8deg); }
.react-pop { width: min(42cqi, 260px); padding: 10px; border-radius: 16px; background: rgba(20, 23, 60, 0.97); border: 1px solid var(--line2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); animation: pop 0.15s; }
.react-pop[hidden] { display: none; }
.react-emojis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.re { appearance: none; border: 0; background: rgba(255, 255, 255, 0.06); border-radius: 10px; font-size: 22px; padding: 4px 0; cursor: pointer; transition: transform 0.1s; }
.re:hover { transform: scale(1.2); background: rgba(255, 255, 255, 0.14); }
.react-phrases { display: flex; flex-wrap: wrap; gap: 5px; }
.rp { appearance: none; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.rp:hover { border-color: var(--accent); }
.react-float { position: absolute; z-index: 9; font-size: max(5cqi, 30px); transform: translate(-50%, -50%); animation: reactUp 2.2s ease-out forwards; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
@keyframes reactUp {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15% { transform: translate(-50%, -120%) scale(1.3); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), -420%) scale(1); opacity: 0; }
}
.say-bubble { position: absolute; z-index: 9; transform: translate(-50%, calc(-100% - 3cqi)); background: #fff; color: #1a1d3f; padding: 0.7cqi 1.4cqi; border-radius: 1.4cqi; font-weight: 800; font-size: max(1.5cqi, 12px); white-space: nowrap; box-shadow: 0 0.8cqi 2cqi rgba(0, 0, 0, 0.5), 0 0 0 0.25cqi var(--c); animation: sayIn 3.2s ease-out forwards; }
.say-bubble b { display: block; font-size: 0.75em; color: var(--c); filter: brightness(0.75); }
@keyframes sayIn { 0% { opacity: 0; scale: 0.5; } 8%, 85% { opacity: 1; scale: 1; } 100% { opacity: 0; } }

/* tokens: glossy game pieces with a 3D animal */
.tokens { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.token {
  --c: #888;
  position: absolute;
  width: max(4.4cqi, 20px);
  height: max(4.4cqi, 20px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition: left 0.14s ease-out, top 0.14s ease-out;
}
.token .base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, color-mix(in srgb, var(--c) 40%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  border: max(0.25cqi, 1.5px) solid #fff;
  box-shadow: 0 0.7cqi 1.2cqi rgba(0, 0, 0, 0.6), inset 0 -0.4cqi 0.6cqi rgba(0, 0, 0, 0.3);
}
.token img { position: relative; width: 88%; height: 88%; object-fit: contain; margin-top: -18%; filter: drop-shadow(0 0.3cqi 0.3cqi rgba(0, 0, 0, 0.5)); }
.token.current { z-index: 2; animation: bob 1.6s ease-in-out infinite; }
.token.current .base { box-shadow: 0 0 0 0.4cqi rgba(255, 255, 255, 0.35), 0 0.7cqi 1.4cqi rgba(0, 0, 0, 0.6); }
.token.hop { animation: hop 0.14s ease-out; }
@keyframes hop { 50% { transform: translate(-50%, -85%) scale(1.1); } }
@keyframes bob { 50% { transform: translate(-50%, -64%); } }
.float-money { position: absolute; transform: translate(-50%, -150%); font-weight: 900; font-size: max(1.7cqi, 12px); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); animation: floatUp 1.5s ease-out forwards; white-space: nowrap; }
.float-money.up { color: var(--good); }
.float-money.down { color: var(--bad); }
@keyframes floatUp { from { opacity: 0; transform: translate(-50%, -100%); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -330%); } }

/* ---------- modals ---------- */
#modal-root { position: relative; z-index: 50; }
.modal-back { position: fixed; inset: 0; background: rgba(4, 5, 16, 0.65); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 16px; animation: fade 0.15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(430px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: linear-gradient(180deg, #1c2050, #13163a); border: 1px solid var(--line2); border-radius: 22px; padding: 20px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.85); animation: pop 0.2s cubic-bezier(0.2, 1.3, 0.4, 1); }
.modal.wide { width: min(780px, 100%); }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.modal-h h3 { font-size: 19px; gap: 10px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.x { appearance: none; border: 0; background: rgba(255, 255, 255, 0.08); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; }
.x:hover { background: rgba(255, 255, 255, 0.16); }
.menu-list { display: grid; gap: 8px; }
.menu-list .btn { justify-content: flex-start; }
.rules ul { list-style: none; padding: 0; display: grid; gap: 10px; color: #d4d7f2; line-height: 1.45; }
.rules li { display: flex; gap: 12px; align-items: center; }

.modal:has(.deed) { padding: 0; overflow: hidden; }
.deed-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--g) 90%, #fff), var(--g) 40%, color-mix(in srgb, var(--g) 50%, #000)); overflow: hidden; }
.deed-head small { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; opacity: 0.9; font-size: 11px; }
.deed-head h3 { font-size: 26px; font-weight: 900; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.deed-head > div { flex: 1; position: relative; }
.deed-head .x { position: relative; background: rgba(0, 0, 0, 0.25); }
.ic.deed-land { position: absolute; right: 44px; bottom: -14px; width: 96px; height: 96px; opacity: 0.9; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4)); }
.flag-wrap.lg { border-radius: 6px; }
.deed-flag { width: 50px; height: 34px; object-fit: cover; }
.ic.deed-icon { width: 48px; height: 48px; }
.deed-body { padding: 16px 20px 20px; }
.rents { width: 100%; border-collapse: collapse; font-size: 14px; }
.rents td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.rents td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.rents tr.on td { background: rgba(124, 92, 255, 0.22); }
.rents tr.on td:first-child { border-radius: 8px 0 0 8px; }
.rents tr.on td:last-child { border-radius: 0 8px 8px 0; }
.deed-meta { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.deed-meta b { color: var(--text); }
.deed-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.deed-actions { display: grid; gap: 8px; margin-top: 14px; }

/* trades */
.trade-with { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.who { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-weight: 600; font-size: 13px; }
.who.on { border-color: var(--accent); background: rgba(124, 92, 255, 0.22); }
.trade-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.tcol { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tcol-h { display: flex; align-items: center; gap: 8px; font-weight: 700; flex-wrap: wrap; }
.tcol-h .muted { margin-left: auto; font-weight: 500; }
.tswap { align-self: center; font-size: 22px; color: var(--muted); }
.money-in { display: flex; align-items: center; gap: 8px; }
.money-in input { font-weight: 800; }
input[type='range'] { width: 100%; accent-color: var(--accent); }
.tprops { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; }
.tchip { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.03); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.tchip.on { background: color-mix(in srgb, var(--g) 30%, transparent); border-color: var(--g); box-shadow: 0 0 0 1px var(--g); }
.tchip:disabled { opacity: 0.35; cursor: not-allowed; }
.cards-in { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cards-in input { width: 70px !important; padding: 5px 8px !important; }
.ts-item { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 13.5px; }
.ts-item.money { color: var(--good); font-weight: 800; }

/* toasts */
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { pointer-events: auto; background: rgba(23, 27, 66, 0.97); border: 1px solid var(--line2); padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7); display: flex; gap: 10px; align-items: center; animation: toastIn 0.25s cubic-bezier(0.2, 1.3, 0.4, 1); transition: opacity 0.35s, transform 0.35s; }
.toast.bad { border-color: rgba(255, 84, 112, 0.6); }
.toast.good { border-color: rgba(61, 220, 132, 0.6); }
.toast.info { border-color: rgba(255, 92, 168, 0.6); }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } }

/* end screen */
.end-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(4, 5, 16, 0.78); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; overflow: auto; }
.end-overlay[hidden] { display: none; }
.end-card { width: min(640px, 100%); background: linear-gradient(180deg, #1e2254, #13163a); border: 1px solid var(--line2); border-radius: 26px; padding: 28px; text-align: center; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9); animation: pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }
.trophy-wrap { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; }
.ic.trophy { width: 110px; height: 110px; filter: drop-shadow(0 14px 28px rgba(255, 201, 60, 0.45)); animation: bob2 2.4s ease-in-out infinite; }
.av.winner { position: absolute; left: -36px; bottom: 0; z-index: 1; }
@keyframes bob2 { 50% { transform: translateY(-8px) rotate(-4deg); } }
.end-card h2 { font-size: 32px; font-weight: 900; margin: 8px 0 4px; }
.ranking { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 6px; text-align: left; }
.ranking li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); font-weight: 600; }
.ranking li:first-child { background: rgba(255, 201, 60, 0.14); border: 1px solid rgba(255, 201, 60, 0.4); }
.rk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: rgba(255, 255, 255, 0.1); }
.rk0 { background: radial-gradient(circle at 30% 30%, #fff3b0, #f5b301); color: #5b3b00; }
.rk1 { background: radial-gradient(circle at 30% 30%, #ffffff, #a9b0c6); color: #2d3348; }
.rk2 { background: radial-gradient(circle at 30% 30%, #ffd7b0, #c06a2b); color: #3d1e05; }
.chart-wrap { text-align: left; }
.chart-wrap .label { margin-top: 0; }
.chart { width: 100%; height: auto; background: rgba(0, 0, 0, 0.22); border-radius: 14px; }
.chart text { fill: var(--muted); font-size: 11px; font-family: 'Outfit', sans-serif; }
.chart .axis { stroke: rgba(255, 255, 255, 0.2); }
.chart .grid { stroke: rgba(255, 255, 255, 0.07); stroke-dasharray: 4 4; }
.end-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* ---------- responsive ---------- */
@container (max-width: 440px) {
  .tile .name { display: none; }
}
@container (max-width: 560px) {
  .brand, .edition-tag, .feed, .start-in .small, .jail-in .visit, .landmark { display: none; }
  .ic.tile-ic { width: 3.8cqi; height: 3.8cqi; }
}

@media (max-width: 1220px) {
  .game { grid-template-columns: 236px minmax(0, 1fr) 266px; gap: 8px; padding: 8px; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .game { grid-template-columns: 214px minmax(0, 1fr) 240px; }
  .col-left { overflow: auto; }
  .room-bar .logo span { display: none; }
  .pl { gap: 7px; padding: 7px 8px; }
  .tab { font-size: 12px; gap: 4px; padding: 6px 4px; }
}

@media (max-width: 900px) {
  .home-main { grid-template-columns: 1fr; gap: 28px; padding-top: 10px; }
  .feature-list { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .lobby-grid { grid-template-columns: minmax(0, 1fr); padding: 0 12px 16px; }
  .room-code { font-size: 32px; }
  .ed-card small { display: none; }
  .set-row select { min-width: 0; width: 118px; }
  .room-code-row .btn { width: 100%; }
  .lobby-room, .lobby-chat { grid-row: auto; grid-column: auto; }
  .topbar { padding: 14px 16px; }
  .game { height: auto; min-height: 100dvh; grid-template-columns: 1fr; grid-template-areas: 'board' 'left' 'right'; grid-template-rows: none; padding: 6px; gap: 10px; }
  .board-wrap { container-type: inline-size; }
  .board { width: 100cqw; }
  .board-scroll { height: auto; }
  .zoom-btn { display: grid; place-items: center; position: absolute; top: 6px; left: 6px; z-index: 20; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(12, 14, 40, 0.85); font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
  .board-wrap.zoomed .board-scroll { overflow: auto; max-height: 82vh; display: block; border-radius: 14px; -webkit-overflow-scrolling: touch; }
  .board-wrap.zoomed .board { width: 240cqw; }
  .col-left .trades-panel, .col-right .mine-panel, .col-right .chat-panel { flex: none; }
  .mine { max-height: 320px; }
  .chat-list { max-height: 260px; }
  .trade-cols { grid-template-columns: 1fr; }
  .tswap { transform: rotate(90deg); justify-self: center; }
  #players { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .pl + .pl { margin-top: 0; }
  .pl { padding: 6px; gap: 7px; }
  .pl .av { width: 30px; height: 30px; }
  .pl-sub { display: none; }
  .pl-cash { font-size: 13px; }
  .pl-name { font-size: 12.5px; }
}

@media (max-width: 900px) {
  #players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  #players { grid-template-columns: minmax(0, 1fr); }
  .room-bar .logo span { display: none; }
  .editions { gap: 6px; }
  .ed-card { padding: 10px 4px 8px; }
  .ed-icons { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.react-wrap[hidden] { display: none; }
.home-eds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.home-ed { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.04); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.home-ed .flag-xs.sm { width: 22px; height: 15px; }
.home-ed.on { border-color: var(--accent); background: linear-gradient(180deg, rgba(124, 92, 255, 0.3), rgba(255, 92, 168, 0.12)); box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.3); }

/* ---------- bot levels ---------- */
.lvl { appearance: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 2px 9px 2px 5px; border-radius: 99px; border: 1px solid; cursor: pointer; }
.lvl:disabled { cursor: default; }
.lvl-easy { background: rgba(61, 220, 132, 0.16); color: #8ff0b8; border-color: rgba(61, 220, 132, 0.45); }
.lvl-normal { background: rgba(63, 167, 255, 0.16); color: #9fd2ff; border-color: rgba(63, 167, 255, 0.45); }
.lvl-hard { background: rgba(255, 84, 112, 0.18); color: #ffb3c0; border-color: rgba(255, 84, 112, 0.5); }
.tag.lvl-easy, .tag.lvl-hard { border: 0; }

/* ---------- events ---------- */
.event-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.5cqi 1.4cqi; border-radius: 99px; background: linear-gradient(135deg, rgba(255, 147, 48, 0.3), rgba(255, 92, 168, 0.3)); border: 1px solid rgba(255, 170, 80, 0.6); font-size: max(1.15cqi, 10px); font-weight: 600; animation: glow 2s infinite; }
.event-pill[hidden] { display: none; }
.cp.event-card .cp-h { background: linear-gradient(135deg, #ff9330, #ff5ca8); }
.tile.t-event { background: linear-gradient(160deg, color-mix(in srgb, #ff9330 28%, var(--tile)), var(--tile)); }

/* ---------- awards ---------- */
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-bottom: 18px; }
.award { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); text-align: center; animation: pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.award:nth-child(2) { animation-delay: 0.08s; }
.award:nth-child(3) { animation-delay: 0.16s; }
.award:nth-child(4) { animation-delay: 0.24s; }
.ic.award-ic { width: 34px; height: 34px; }
.aw-t { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn); min-height: 28px; display: grid; place-items: center; }
.aw-n { font-weight: 800; font-size: 14px; }
.aw-v { font-size: 11.5px; color: var(--muted); }

/* ---------- appearance menu ---------- */
.look-sec .label { margin: 10px 0 6px; }
.music-row { display: flex; align-items: center; gap: 10px; }
.music-row .btn { min-width: 56px; }
.skin-row { display: flex; flex-wrap: wrap; gap: 6px; }
.skin-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-weight: 600; font-size: 13px; }
.skin-chip.on { border-color: var(--accent); background: rgba(124, 92, 255, 0.22); }
.mini-die { width: 18px; height: 18px; border-radius: 4px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: #f1f2fb; }
.mini-die i { width: 4px; height: 4px; border-radius: 50%; background: #1d2050; }
.mini-die i:nth-child(1) { align-self: start; justify-self: start; }
.mini-die i:nth-child(2) { align-self: end; justify-self: end; }
.md-gold { background: linear-gradient(135deg, #fff1a8, #d9a520); }
.md-gold i { background: #3b2500; }
.md-onyx { background: linear-gradient(135deg, #4a4f63, #0b0c14); }
.md-onyx i { background: #fff; }
.md-ruby { background: linear-gradient(135deg, #ff8a9a, #a8122c); }
.md-ruby i { background: #fff; }

/* ---------- dice skins ---------- */
body[data-dice='gold'] .face { background: radial-gradient(circle at 30% 25%, #fff6c8, #f2c23e 50%, #a8740a); box-shadow: inset 0 0 calc(var(--s) * 0.12) rgba(90, 55, 0, 0.45); }
body[data-dice='gold'] .face i.pip { background: radial-gradient(circle at 38% 35%, #6b4a10, #2b1a00 70%); }
body[data-dice='onyx'] .face { background: radial-gradient(circle at 30% 25%, #5a6078, #22263a 55%, #08090f); box-shadow: inset 0 0 calc(var(--s) * 0.12) rgba(0, 0, 0, 0.6); }
body[data-dice='onyx'] .face i.pip { background: radial-gradient(circle at 38% 35%, #ffffff, #c9cde0 70%); box-shadow: none; }
body[data-dice='onyx'] .face.f1 i.pip { background: radial-gradient(circle at 38% 35%, #ffe08a, #d9a520 70%); }
body[data-dice='ruby'] .face { background: radial-gradient(circle at 30% 25%, #ff9aaa, #d6213f 55%, #7a0c1f); box-shadow: inset 0 0 calc(var(--s) * 0.12) rgba(60, 0, 10, 0.5); }
body[data-dice='ruby'] .face i.pip,
body[data-dice='ruby'] .face.f1 i.pip { background: radial-gradient(circle at 38% 35%, #ffffff, #f0d6db 70%); box-shadow: none; }

/* ---------- board themes ---------- */

body[data-theme='ramadan'] {
  --bg: #041114; --board-a: #0f3540; --board-b: #051a1f; --tile-a: #144552; --tile: #0d2f38; --tile-hi: #17505c;
  --corner-a: #1b5560; --corner-b: #0e3039; --glow1: rgba(255, 196, 80, 0.2); --glow2: rgba(255, 160, 60, 0.12);
  --accent: #e0a526; --accent2: #f5d06f; --grad: linear-gradient(135deg, #d4911a, #f5d06f);
}
body[data-theme='ramadan'] .board { border-color: rgba(224, 165, 38, 0.65); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 0 0.5cqi rgba(224, 165, 38, 0.15); }
body[data-theme='ramadan'] .center {
  background-image: repeating-conic-gradient(from 22.5deg at 50% 50%, rgba(245, 208, 111, 0.06) 0 45deg, transparent 45deg 90deg),
    radial-gradient(60% 50% at 50% 40%, var(--glow1), transparent 70%), linear-gradient(180deg, #082128, #041114);
  background-size: 6cqi 6cqi, auto, auto;
}
body[data-theme='ramadan'] .center-map { content: url('/icons/crescent.png'); width: 22%; left: 72%; top: 4%; opacity: 0.6; filter: drop-shadow(0 0 2cqi rgba(255, 210, 100, 0.6)); }
body[data-theme='ramadan'] .brand span { background: linear-gradient(180deg, #fff3c4, #e0a526); -webkit-background-clip: text; background-clip: text; }


/* keep the results card inside narrow screens (the chart SVG has a 300px intrinsic width) */
.end-overlay { grid-template-columns: minmax(0, 1fr); }
.end-card { justify-self: center; min-width: 0; }
.chart { min-width: 0; max-width: 100%; }

.voice-hint { font-size: 12.5px; line-height: 1.45; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: rgba(255, 201, 60, 0.08); border: 1px solid rgba(255, 201, 60, 0.25); }
.music-row select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }
.taunt-ar { display: block; font-family: 'Noto Kufi Arabic', 'Segoe UI', sans-serif; font-size: 0.72em; font-weight: 700; color: #6b4cd6; margin-top: 2px; text-align: right; }


/* ---------- land colours: 'same' = one colour for every free land, owner's colour once bought ---------- */
body[data-lands='same'] { --land-band: linear-gradient(180deg, #a3abd6, #6b74a8 45%, #444b7a); }
body[data-lands='same'][data-theme='ramadan'] { --land-band: linear-gradient(180deg, #8fb0b6, #5d7f86 45%, #3b575d); }
body[data-lands='same'] .band { background: var(--land-band) !important; }
body[data-lands='same'] .tile.owned .band { background: linear-gradient(180deg, color-mix(in srgb, var(--owner) 65%, #fff), var(--owner) 45%, color-mix(in srgb, var(--owner) 65%, #000)) !important; }
.land-sw { display: inline-flex; width: 22px; height: 12px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.land-sw i { flex: 1; }
.sw-country i:nth-child(1) { background: #ef4444; }
.sw-country i:nth-child(2) { background: #facc15; }
.sw-country i:nth-child(3) { background: #4f6bff; }
.sw-same i { background: #6b74a8; }

/* ---------- action bar (phones): Roll / Buy / End turn always within thumb reach ---------- */
.action-bar { display: none; }
@media (max-width: 900px) {
  .center .actions { display: none; }
  .action-bar:not(:empty) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 30;
    padding: 10px;
    border-radius: 18px;
    background: rgba(16, 19, 52, 0.94);
    border: 1px solid var(--line2);
    backdrop-filter: blur(12px);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.55);
    font-size: 14px;
    max-height: 55vh;
    overflow-y: auto;
  }
  .game { padding-bottom: 150px; }
  .action-bar .btn.huge { width: 100%; padding: 14px 18px; font-size: 17px; }
  .action-bar .ic.huge-ic { width: 26px; height: 26px; }
  .action-bar .box { padding: 10px; border-radius: 14px; gap: 8px; box-shadow: none; background: transparent; border: 0; }
  .action-bar .row { gap: 8px; }
  .action-bar .row .btn { flex: 1; }
  .action-bar .waiting { justify-content: center; padding: 6px 10px; gap: 8px; }
  .action-bar .waiting .av { width: 30px; height: 30px; }
  .action-bar .bar { height: 6px; }
  .action-bar .act-note { justify-content: center; }
}
@media (hover: none), (max-width: 900px) {
  .kbd-hint { display: none; }
}

/* music toggle: dimmed with a slash when off */
.icon-btn.off { position: relative; opacity: 0.55; }
.icon-btn.off::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: var(--bad); transform: rotate(-40deg); border-radius: 2px; }
@media (max-width: 440px) { .room-bar-actions { gap: 4px; } .room-bar .icon-btn { width: 34px; height: 34px; } }

/* room bar: icon-only logo so code + sound/music/menu buttons always fit */
.room-bar-actions { flex-wrap: nowrap; min-width: 0; }

/* room bar: logo + code on top, a full-width row of tool buttons below */
.room-bar { flex-direction: column; align-items: stretch; gap: 10px; }
.room-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.room-tools { display: flex; gap: 6px; }
.room-tools .icon-btn { flex: 1; width: auto; height: 36px; font-size: 17px; }
.room-tools .icon-btn[hidden] { display: none; }
.icon-btn.danger-ic { border-color: rgba(255, 84, 112, 0.4); background: rgba(255, 84, 112, 0.1); }
.icon-btn.danger-ic:hover { background: rgba(255, 84, 112, 0.22); }

/* ---------- auction: bid pop, going once/twice, SOLD! stamp ---------- */
.auc-bid .big-num { display: inline-block; animation: bump 0.4s ease-out; }
@keyframes bump { 0% { transform: scale(1.6); color: var(--warn); } 100% { transform: scale(1); } }
.going { min-height: 1.2em; font-weight: 900; color: var(--warn); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9em; }
.going.pop { animation: bump 0.45s ease-out; }
.sold-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2cqi; }
.stamp {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: max(6.5cqi, 34px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: #ff3b5c;
  padding: 0.6cqi 2.6cqi;
  border: 0.7cqi solid #ff3b5c;
  border-radius: 1.4cqi;
  background: rgba(30, 0, 10, 0.55);
  box-shadow: inset 0 0 0 0.3cqi rgba(255, 59, 92, 0.35), 0 0 4cqi rgba(255, 59, 92, 0.45);
  text-shadow: 0 0 2cqi rgba(255, 59, 92, 0.6);
  transform: rotate(-12deg);
  animation: stampIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.stamp.unsold { color: #b9bfdc; border-color: #b9bfdc; box-shadow: none; text-shadow: none; background: rgba(10, 12, 30, 0.6); }
@keyframes stampIn {
  0% { transform: rotate(-12deg) scale(3.2); opacity: 0; }
  55% { transform: rotate(-12deg) scale(0.9); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); }
}
.sold-info { display: flex; flex-direction: column; align-items: center; gap: 0.9cqi; padding: 1.2cqi 2.2cqi; border-radius: 1.6cqi; background: rgba(12, 14, 40, 0.92); border: 1px solid var(--line2); font-size: max(1.5cqi, 12px); animation: fade 0.3s 0.35s both; }
.sold-who { display: flex; align-items: center; gap: 0.8cqi; }
.sold-price { color: var(--good); font-size: 1.2em; }
.coin-burst { position: absolute; left: 50%; top: 30%; z-index: 1; }
.coin-burst img { position: absolute; width: max(2.8cqi, 16px); height: max(2.8cqi, 16px); left: calc(max(2.8cqi, 16px) / -2); top: calc(max(2.8cqi, 16px) / -2); opacity: 0; animation: coinOut 1.2s ease-out calc(0.3s + var(--d)) both; }
@keyframes coinOut {
  0% { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-16cqi) scale(1.1) rotate(200deg); opacity: 0; }
}
.board.shake { animation: boardShake 0.35s ease-in-out; }
@keyframes boardShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-0.5cqi, 0.3cqi); }
  40% { transform: translate(0.5cqi, -0.3cqi); }
  60% { transform: translate(-0.3cqi, 0.2cqi); }
  80% { transform: translate(0.2cqi, -0.1cqi); }
}

/* tokens: no per-step transition while gliding (the Web Animation drives the motion) */
.token.gliding { transition: none; z-index: 4; }

/* keep the reaction button clear of the token track along the inner edge */
.react-wrap { right: 7.5cqi; bottom: 7.5cqi; }

/* ---------- round flags: circular badges with a white ring + gloss, like the player avatars ---------- */
.flag-wrap { width: max(3.1cqi, 14px); height: max(3.1cqi, 14px); border-radius: 50%; border: max(0.22cqi, 1.5px) solid rgba(255, 255, 255, 0.92); box-shadow: 0 0.3cqi 0.7cqi rgba(0, 0, 0, 0.5); flex: none; }
.flag-wrap .flag { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.flag-wrap::after { border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55), transparent 45%), radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.25), transparent 60%); }
.flag-wrap.lg { width: 54px; height: 54px; border-width: 3px; }
.deed-flag { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.flag-xs { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(0, 0, 0, 0.4); vertical-align: -4px; }
.home-ed .flag-xs.sm { width: 22px; height: 22px; }
.ed-flag { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.ed-pic .flag-wrap { width: 46px; height: 46px; border-width: 2.5px; }
/* national editions: region landmark in a round badge tinted with the region colour */
.ic.tile-ic.grp { width: max(3.3cqi, 15px); height: max(3.3cqi, 15px); padding: 0.45cqi; border-radius: 50%; background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--g) 45%, #fff), var(--g) 55%, color-mix(in srgb, var(--g) 60%, #000)); border: max(0.22cqi, 1.5px) solid rgba(255, 255, 255, 0.92); box-shadow: 0 0.3cqi 0.7cqi rgba(0, 0, 0, 0.45); }

/* phone zoom button: inside the board, clear of the corner tile and the token track */
@media (max-width: 900px) { .zoom-btn { top: 19cqw; left: 19cqw; } }

/* ---------- players inside the tile, round flag outside ---------- */
/* Tiles let the badge overflow; the band and body carry the rounded corners themselves. */
.tile { overflow: visible; z-index: 2; }
.tile.t-property:hover, .tile.t-airport:hover, .tile.t-utility:hover { z-index: 4; }
.center { z-index: 1; }
.tile.bottom .band { border-radius: 0.7cqi 0.7cqi 0 0; align-items: flex-end; padding-bottom: 0.15cqi; }
.tile.top .band { border-radius: 0 0 0.7cqi 0.7cqi; align-items: flex-start; padding-top: 0.15cqi; }
.tile.left .band { border-radius: 0 0.7cqi 0.7cqi 0; justify-content: flex-start; padding-left: 0.15cqi; }
.tile.right .band { border-radius: 0.7cqi 0 0 0.7cqi; justify-content: flex-end; padding-right: 0.15cqi; }
.tile.bottom .body { border-radius: 0 0 0.7cqi 0.7cqi; }
.tile.top .body { border-radius: 0.7cqi 0.7cqi 0 0; }
.tile.left .body { border-radius: 0.7cqi 0 0 0.7cqi; }
.tile.right .body { border-radius: 0 0.7cqi 0.7cqi 0; }
.tile.bottom .body { justify-content: flex-end; padding-bottom: 0.6cqi; }
.tile.top .body { justify-content: flex-start; padding-top: 0.6cqi; }
.tile.left .body { align-items: flex-start; text-align: left; padding-left: 0.6cqi; }
.tile.right .body { align-items: flex-end; text-align: right; padding-right: 0.6cqi; }
.tile.left .body > *:not(.landmark), .tile.right .body > *:not(.landmark) { max-width: 62%; }
.landmark { right: 0.3cqi; bottom: 0.3cqi; }
.tile.left .landmark { right: auto; left: 0.3cqi; }

/* the badge straddles the inner edge, mostly outside the tile */
.tile-badge { position: absolute; z-index: 3; pointer-events: none; }
.flag-wrap.tile-badge { width: max(3.4cqi, 14px); height: max(3.4cqi, 14px); }
.ic.tile-ic.grp.tile-badge { width: max(3.6cqi, 15px); height: max(3.6cqi, 15px); }
.tile.bottom .tile-badge { top: 0; left: 50%; transform: translate(-50%, -72%); }
.tile.top .tile-badge { bottom: 0; left: 50%; transform: translate(-50%, 72%); }
.tile.left .tile-badge { right: 0; top: 50%; transform: translate(72%, -50%); }
.tile.right .tile-badge { left: 0; top: 50%; transform: translate(-72%, -50%); }

/* corners: content moves to the outer corner so players can stand on the inner part */
.ic.corner-ic { width: 4.4cqi; height: 4.4cqi; }
.t-start .corner-in { justify-content: flex-end; align-items: flex-end; text-align: right; padding: 0.8cqi; }
.t-vacation .corner-in { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 0.8cqi; }
.t-gotojail .corner-in { justify-content: flex-start; align-items: flex-end; text-align: right; padding: 0.8cqi; }

/* ---------- v2: players on the colour band, flag fully outside, houses under the price ---------- */
.tile.bottom .band, .tile.top .band, .tile.left .band, .tile.right .band { padding: 0; }
.tile.bottom .body, .tile.top .body { justify-content: center; }
.tile.left .body, .tile.right .body { align-items: center; text-align: center; }
.tile.left .body > *:not(.landmark), .tile.right .body > *:not(.landmark) { max-width: 100%; }
/* keep content clear of the token, which overhangs the band a little */
.tile.bottom .body { padding: 0.9cqi 0.3cqi 0.4cqi; }
.tile.top .body { padding: 0.4cqi 0.3cqi 0.9cqi; }
.tile.left .body { padding: 0.3cqi 0.9cqi 0.3cqi 0.4cqi; }
.tile.right .body { padding: 0.3cqi 0.4cqi 0.3cqi 0.9cqi; }
/* tiles without a band (airports, utilities, taxes, cards) reserve the same strip for players */
.tile.bottom:not(.t-property) .body { padding-top: 3.7cqi; }
.tile.top:not(.t-property) .body { padding-bottom: 3.7cqi; }
.tile.left:not(.t-property) .body { padding-right: 3.7cqi; }
.tile.right:not(.t-property) .body { padding-left: 3.7cqi; }
/* flag badge fully outside the tile, just past the band */
.tile.bottom .tile-badge { transform: translate(-50%, calc(-100% - 0.9cqi)); }
.tile.top .tile-badge { transform: translate(-50%, calc(100% + 0.9cqi)); }
.tile.left .tile-badge { transform: translate(calc(100% + 0.9cqi), -50%); }
.tile.right .tile-badge { transform: translate(calc(-100% - 0.9cqi), -50%); }
/* houses: a small row under the price */
.body .houses { display: flex; flex-direction: row !important; justify-content: center; min-height: 0; }
.body .houses:empty { display: none; }
.body .ic.bld { width: 1.6cqi; height: 1.6cqi; margin: 0 -0.12cqi; }
.body .ic.bld.hotel { width: 2.1cqi; height: 2.1cqi; }
.token { width: max(4cqi, 18px); height: max(4cqi, 18px); }

/* top/bottom rows are narrow: a touch smaller so names like Hammamet fit without breaking mid-word */
.tile.top .name, .tile.bottom .name { font-size: max(1.3cqi, 7px); letter-spacing: -0.025em; }

/* ---------- v3: flag 60% inside the tile (straddling the inner edge), player just past it ---------- */
.tile.bottom .tile-badge { transform: translate(-50%, -40%); }
.tile.top .tile-badge { transform: translate(-50%, 40%); }
.tile.left .tile-badge { transform: translate(40%, -50%); }
.tile.right .tile-badge { transform: translate(-40%, -50%); }

/* top/bottom property tiles: player in the middle, name/price/houses on the outer part */
.tile.bottom.t-property .body { justify-content: flex-end; padding: 0.3cqi 0.3cqi 0.5cqi; }
.tile.top.t-property .body { justify-content: flex-start; padding: 0.5cqi 0.3cqi 0.3cqi; }

/* side-column property tiles: name on one line across the top, price + houses on the outer side */
.tile.left.t-property .body, .tile.right.t-property .body { justify-content: space-between; padding: 0.35cqi 0.5cqi; gap: 0; }
.tile.left.t-property .name, .tile.right.t-property .name { white-space: nowrap; font-size: max(1.2cqi, 7px); align-self: stretch; text-align: center; max-width: none; }
.tile.left.t-property .price, .tile.left.t-property .houses { align-self: flex-start; }
.tile.right.t-property .price, .tile.right.t-property .houses { align-self: flex-end; }
.tile.left.t-property .body > *:not(.landmark), .tile.right.t-property .body > *:not(.landmark) { max-width: none; }
.tile.left .body .ic.bld, .tile.right .body .ic.bld { width: 1.3cqi; height: 1.3cqi; }

/* tiles without a flag: the player stands at the inner edge, content fills the outer part */
.tile.bottom:not(.t-property) .body { padding-top: 4.6cqi; }
.tile.top:not(.t-property) .body { padding-bottom: 4.6cqi; }
.tile.left:not(.t-property) .body { padding-right: 4.6cqi; }
.tile.right:not(.t-property) .body { padding-left: 4.6cqi; }

/* region blocked */
.blocked { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.blocked-card { max-width: 420px; text-align: center; padding: 32px 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ic.blocked-ic { width: 72px; height: 72px; }

/* ---------- v4: names + airport/utility text centered again, houses back on the colour strip ---------- */
.tile .body { justify-content: center !important; align-items: center !important; text-align: center !important; padding: 0.3cqi !important; gap: 0.25cqi; }
.tile .body > *:not(.landmark) { max-width: 100% !important; align-self: auto !important; }
.tile.left.t-property .name, .tile.right.t-property .name { white-space: normal; font-size: max(1.45cqi, 7px); text-align: center; }
/* houses on the strip, on its body side, in front of the flag's base */
.tile.bottom .band { align-items: flex-end; justify-content: center; }
.tile.top .band { align-items: flex-start; justify-content: center; }
.tile.left .band { justify-content: flex-start; align-items: center; }
.tile.right .band { justify-content: flex-end; align-items: center; }
.band .houses { position: relative; z-index: 4; }
.band .ic.bld { width: 1.5cqi; height: 1.5cqi; margin: 0 -0.1cqi; }
.tile.left .band .ic.bld, .tile.right .band .ic.bld { margin: -0.15cqi 0; }
.band .ic.bld.hotel { width: 2cqi; height: 2cqi; }

/* ---------- game modes ---------- */
.team-chip { appearance: none; display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: color-mix(in srgb, var(--t) 70%, #000); border: 1px solid var(--t); cursor: pointer; }
.team-chip:disabled { cursor: default; opacity: 0.9; }
.team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); margin-right: 6px; flex: none; }
.team-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.team-sum:empty { display: none; }
.team-tot { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--t) 22%, transparent); border: 1px solid color-mix(in srgb, var(--t) 60%, transparent); }
.team-tot.out { opacity: 0.45; text-decoration: line-through; }
.team-winners { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; margin-top: 4px; }
.warn-text { color: var(--warn) !important; }
.mode-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 70cqi; }
.mode-pills:empty { display: none; }
.mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.4cqi 1.3cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line2); font-size: max(1.1cqi, 10px); }
/* shrinking board: closed lands get hazard stripes and go grey */
.tile.closed .body { background: repeating-linear-gradient(-45deg, rgba(255, 201, 60, 0.22) 0 0.7cqi, rgba(0, 0, 0, 0.3) 0.7cqi 1.4cqi) !important; }
.tile.closed .band, .tile.closed .tile-badge, .tile.closed .name, .tile.closed .landmark { filter: grayscale(1) brightness(0.7); }
.tile.closed .price { color: var(--warn) !important; font-weight: 900; }
.mate-note { padding: 8px 12px; border-radius: 12px; background: rgba(61, 220, 132, 0.12); border: 1px solid rgba(61, 220, 132, 0.4); font-size: 13px; margin-bottom: 12px; }

/* ---------- simple richup-style landing ---------- */
.home-simple { display: flex; flex-direction: column; }
.home-corner { position: absolute; top: 16px; right: 16px; z-index: 3; }
.home-center { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.home-logo { display: flex; align-items: center; gap: 12px; font-size: clamp(38px, 9vw, 56px); font-weight: 900; letter-spacing: -0.03em; }
.ic.home-logo-ic { width: 1.1em; height: 1.1em; filter: drop-shadow(0 8px 18px rgba(255, 92, 168, 0.5)); animation: wobble 6s ease-in-out infinite; }
.home-tag { margin: -6px 0 6px; font-size: 18px; font-weight: 700; color: var(--muted); }
.play-card { width: 100%; padding: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.av-pick { display: flex; align-items: center; justify-content: center; gap: 18px; }
.av-big { width: 96px; height: 96px; border-width: 4px; animation: pop 0.25s cubic-bezier(0.2, 1.4, 0.4, 1); }
.av-arrow { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.av-arrow:hover { background: rgba(255, 255, 255, 0.14); }
.name-input { text-align: center; font-size: 18px !important; font-weight: 700; padding: 13px 14px !important; }
.play-btn { width: 100%; padding: 16px; font-size: 22px; font-weight: 900; letter-spacing: 0.08em; border-radius: 16px; }
.play-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.play-card .join-row input { padding: 9px 12px; }
.rooms-box { width: 100%; }
.rooms-box .rooms-h { margin-bottom: 8px; }
.home-foot { margin-top: auto; text-align: center; padding-top: 18px; }
.home-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hb { position: absolute; width: 64px; opacity: 0.18; filter: blur(0.5px); animation: float 9s ease-in-out infinite; }
.hb0 { top: 12%; left: 10%; } .hb1 { top: 20%; right: 9%; animation-delay: -2s; } .hb2 { bottom: 18%; left: 14%; animation-delay: -4s; }
.hb3 { bottom: 12%; right: 12%; animation-delay: -6s; } .hb4 { top: 52%; left: 4%; width: 48px; animation-delay: -3s; } .hb5 { top: 58%; right: 5%; width: 52px; animation-delay: -5s; }
@media (max-width: 700px) { .hb { display: none; } .home-center { padding-top: 36px; } }

/* bankruptcy: a full-width text button between Players and Trades */
.bankrupt-btn { width: 100%; flex: none; padding: 10px 14px; }
.bankrupt-btn[hidden] { display: none; }

/* country (or region) name above each city name */
.tile .country { position: relative; font-size: max(0.8cqi, 6px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.05; color: var(--tile-muted); overflow-wrap: break-word; max-width: 100%; }
@container (max-width: 440px) { .tile .country { display: none; } }

/* ========== board centre: turn banner, dice tray, feed card, turn order ========== */
.center .brand { display: none; }
.center::before { content: ''; position: absolute; inset: 1.1cqi; border-radius: 1cqi; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: none; z-index: 0; }
body[data-theme='ramadan'] .center::before { border-color: rgba(224, 165, 38, 0.45); box-shadow: inset 0 0 0 0.35cqi rgba(224, 165, 38, 0.08); }
.turn-banner { display: flex; align-items: center; gap: 1cqi; flex-wrap: wrap; justify-content: center; }
.tb-main { display: inline-flex; align-items: center; gap: 1cqi; padding: 0.5cqi 1.8cqi 0.5cqi 0.6cqi; border-radius: 99px; background: rgba(5, 7, 24, 0.55); border: 1px solid color-mix(in srgb, var(--c, #fff) 55%, transparent); box-shadow: 0 0.6cqi 2cqi rgba(0, 0, 0, 0.35); font-size: max(1.5cqi, 12px); }
.tb-main b { color: var(--c, var(--text)); font-weight: 900; }
.tb-sub { color: var(--muted); font-size: 0.9em; }
.tb-main.you { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #000), rgba(5, 7, 24, 0.6)); animation: myTurn 1.6s ease-in-out infinite; }
.tb-main.you b { color: #fff; }
@keyframes myTurn { 50% { box-shadow: 0 0 0 0.35cqi color-mix(in srgb, var(--c) 45%, transparent), 0 0 3cqi color-mix(in srgb, var(--c) 55%, transparent); } }
.tb-round { font-size: max(1.1cqi, 10px); font-weight: 800; color: var(--muted); padding: 0.35cqi 1.1cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.dice-tray { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.4cqi 5cqi 1.2cqi; border-radius: 50% / 46%;
  background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.32) 72%);
  box-shadow: inset 0 0.7cqi 2.4cqi rgba(0, 0, 0, 0.55), inset 0 -0.3cqi 1cqi rgba(255, 255, 255, 0.05), 0 0 0 0.35cqi rgba(255, 255, 255, 0.05), 0 1.2cqi 3cqi rgba(0, 0, 0, 0.3); }
.roll-total { min-height: max(2.2cqi, 16px); margin-top: -0.6cqi; }
.roll-total span { display: inline-block; padding: 0.2cqi 1.3cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.1); font-weight: 900; font-size: max(1.4cqi, 11px); animation: pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
.roll-total span.dbl { background: var(--grad); color: #fff; }
.feed { padding: 0.8cqi 1.4cqi; border-radius: 1.2cqi; background: rgba(5, 7, 24, 0.42); border: 1px solid rgba(255, 255, 255, 0.06); }
.feed:empty { display: none; }
.turn-order { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6cqi; }
.to-chip { display: inline-flex; align-items: center; gap: 0.6cqi; padding: 0.3cqi 1cqi 0.3cqi 0.3cqi; border-radius: 99px; background: rgba(5, 7, 24, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); font-size: max(1.05cqi, 10px); font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.75; }
.to-chip.now { opacity: 1; border-color: var(--c); box-shadow: 0 0 1.4cqi color-mix(in srgb, var(--c) 50%, transparent); transform: scale(1.08); }
.to-chip.me span { color: var(--good); }
.to-sep { font-style: normal; color: var(--muted); font-size: max(1cqi, 9px); opacity: 0.6; }
@container (max-width: 560px) {
  .turn-order .to-chip > span:not(.av) { display: none; }
  .turn-order .to-chip { padding: 0.3cqi; }
  .feed .feed-line:not(:last-child) { display: none; }
  .feed { display: block !important; }
}

/* ========== prison effects ========== */
.board.siren { animation: siren 0.45s linear 4; }
@keyframes siren {
  0%, 100% { box-shadow: 0 0 0 0.6cqi rgba(255, 40, 70, 0.85), 0 0 7cqi rgba(255, 40, 70, 0.55); }
  50% { box-shadow: 0 0 0 0.6cqi rgba(40, 120, 255, 0.85), 0 0 7cqi rgba(40, 120, 255, 0.55); }
}
.busted { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2cqi; padding: 2.4cqi 4cqi; border-radius: 2cqi; background: linear-gradient(180deg, #2a1220, #12061a); border: 0.3cqi solid #ff3b5c; box-shadow: 0 2cqi 5cqi rgba(0, 0, 0, 0.6); overflow: hidden; animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.busted .av.xl { width: max(10cqi, 60px); height: max(10cqi, 60px); }
.busted .bars { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(90deg, transparent 0 2.6cqi, #b8bfd6 2.6cqi 3.2cqi, #6c7390 3.2cqi 3.6cqi), linear-gradient(180deg, #c9cfe3 0 1cqi, transparent 1cqi calc(100% - 1cqi), #c9cfe3 calc(100% - 1cqi)); animation: barsDrop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes barsDrop { 0% { transform: translateY(-110%); } 70% { transform: translateY(3%); } 100% { transform: translateY(0); } }
.busted-txt { position: relative; z-index: 3; font-weight: 900; font-size: max(4.5cqi, 26px); color: #ff3b5c; letter-spacing: 0.06em; text-shadow: 0 0.3cqi 0 #000, 0 0 2cqi rgba(255, 59, 92, 0.7); transform: rotate(-8deg); animation: stampIn 0.45s 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.busted-sub { position: relative; z-index: 3; font-weight: 700; font-size: max(1.4cqi, 11px); background: rgba(0, 0, 0, 0.6); padding: 0.3cqi 1.2cqi; border-radius: 99px; }
.tile.t-jail.jail-hit { animation: jailHit 0.6s ease-in-out 2; z-index: 5; }
@keyframes jailHit { 0%, 100% { transform: none; } 20% { transform: translate(-0.5cqi, 0.2cqi) rotate(-1deg); } 40% { transform: translate(0.5cqi, -0.2cqi) rotate(1deg); box-shadow: 0 0 3cqi rgba(255, 40, 70, 0.8); } 60% { transform: translate(-0.3cqi, 0.1cqi); } }
.tile.t-jail.rattle .cell { animation: rattle 0.12s linear 6; }
@keyframes rattle { 50% { transform: translateX(0.4cqi); } }
.tile.t-jail.occupied .cell { animation: policeLight 1.6s ease-in-out infinite; }
@keyframes policeLight { 0%, 100% { box-shadow: inset 0 0 1.6cqi rgba(255, 40, 70, 0.65); } 50% { box-shadow: inset 0 0 1.6cqi rgba(40, 120, 255, 0.65); } }
.tile.t-jail.cell-open .cell { animation: cellOpen 1.1s ease-in-out; }
@keyframes cellOpen { 0% { clip-path: inset(0 0 0 0); } 40% { clip-path: inset(0 0 100% 0); } 70% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
.float-money.free { color: #8ff0b8; font-size: max(2.2cqi, 15px); }

/* ========== demolition ========== */
.tile.quake { animation: jailHit 0.35s ease-in-out 2; z-index: 5; }
.demolish { position: absolute; z-index: 9; width: 0; height: 0; pointer-events: none; }
.demolish .ruin { position: absolute; width: max(4.5cqi, 24px); left: calc(max(4.5cqi, 24px) / -2); top: calc(max(4.5cqi, 24px) / -2); animation: collapse 0.9s ease-in forwards; }
@keyframes collapse { 0% { transform: translateY(-1cqi) rotate(0); opacity: 1; } 35% { transform: translateY(-1.6cqi) rotate(-14deg); } 100% { transform: translateY(1.8cqi) rotate(38deg) scale(0.4); opacity: 0; filter: grayscale(1) brightness(0.6); } }
.demolish .dust { position: absolute; width: 9cqi; height: 9cqi; left: -4.5cqi; top: -4.5cqi; border-radius: 50%; background: radial-gradient(circle, rgba(200, 190, 170, 0.75), rgba(160, 150, 130, 0.35) 45%, transparent 70%); animation: dust 1.2s ease-out forwards; }
@keyframes dust { 0% { transform: scale(0.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.demolish i { position: absolute; width: 0.7cqi; height: 0.7cqi; min-width: 4px; min-height: 4px; background: #9a7b5c; border-radius: 0.15cqi; animation: debris 0.9s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
.demolish i:nth-child(odd) { background: #c94c3c; }
@keyframes debris { 0% { transform: rotate(var(--a)) translateY(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(220deg); opacity: 0; } }


/* ========== Night: midnight city — full moon, twinkling stars, shooting star, lit skyline ========== */
body[data-theme='night'] {
  --bg: #04050f; --board-a: #151a45; --board-b: #06071c; --tile-a: #1b2152; --tile: #0e1236; --tile-hi: #252c6a;
  --corner-a: #20275e; --corner-b: #0b0e2c; --glow1: rgba(120, 140, 255, 0.2); --glow2: rgba(190, 110, 255, 0.14);
  --accent: #7c8cff; --accent2: #c06cff; --grad: linear-gradient(135deg, #5b6cff, #b16cff);
  --tile-muted: #a9b3ec;
}
body[data-theme='night'] .board { border-color: rgba(170, 185, 255, 0.55); box-shadow: 0 40px 100px -40px #000, 0 0 0 0.5cqi rgba(124, 140, 255, 0.14), 0 0 5cqi rgba(91, 108, 255, 0.3); }
body[data-theme='night'] .tile { background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 35%), linear-gradient(160deg, var(--tile-a), var(--tile) 60%); box-shadow: inset 0 0 0 1px rgba(140, 155, 255, 0.26), 0 0.3cqi 0.8cqi rgba(0, 0, 0, 0.45); }
body[data-theme='night'] .tile.corner { background: radial-gradient(circle at 30% 25%, rgba(140, 155, 255, 0.22), transparent 60%), linear-gradient(150deg, var(--corner-a), var(--corner-b)); }
body[data-theme='night'] .band { box-shadow: 0 0 1.4cqi var(--neon, color-mix(in srgb, var(--g) 70%, transparent)), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
body[data-theme='night'][data-lands='same'] .band { --neon: rgba(125, 150, 255, 0.5); }
body[data-theme='night'] .tile.owned .band { --neon: color-mix(in srgb, var(--owner) 75%, transparent); }
body[data-lands='same'][data-theme='night'] { --land-band: linear-gradient(180deg, #a6b4ff, #5566d6 45%, #2d3790); }
body[data-theme='night'] .center { background: radial-gradient(70% 55% at 50% 42%, rgba(110, 120, 255, 0.14), transparent 70%), linear-gradient(180deg, #070a2a 0%, #10154a 50%, #22195a 80%, #341d5e 100%) !important; }
body[data-theme='night'] .center-map { content: url('/themes/night.svg'); left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
body[data-theme='night'] .center::before { z-index: 1; border-color: rgba(170, 185, 255, 0.28); box-shadow: inset 0 0 2cqi rgba(124, 140, 255, 0.12); }
body[data-theme='night'] .dice-tray { background: radial-gradient(ellipse at 50% 38%, rgba(140, 155, 255, 0.2), rgba(3, 4, 20, 0.6) 72%); }
body[data-theme='night'] .feed, body[data-theme='night'] .tb-main:not(.you), body[data-theme='night'] .to-chip { background: rgba(6, 8, 30, 0.72); }
body[data-theme='night'] .start-in { background: linear-gradient(135deg, rgba(91, 108, 255, 0.75), rgba(177, 108, 255, 0.6)); }

/* ========== Sidi Bou Saïd: blue glazed tiles in whitewash, ceramic centre, studded-door arch, bougainvillea ========== */
body[data-theme='sidibou'] {
  --bg: #04142e; --board-a: #fbfaf5; --board-b: #dde6f2; --tile-a: #2a7fe6; --tile: #0f4fae; --tile-hi: #3a8cf0;
  --corner-a: #1d6fd6; --corner-b: #0b3f8f; --glow1: rgba(255, 255, 255, 0.16); --glow2: rgba(240, 70, 143, 0.14);
  --accent: #2f7de1; --accent2: #f0468f; --grad: linear-gradient(135deg, #1f6fd6, #f0468f);
  --tile-text: #ffffff; --tile-muted: #c4dcff;
}
body[data-theme='sidibou'] .board { --gap: 0.55cqi; padding: 1.1cqi; border: 1px solid #fff; box-shadow: 0 40px 100px -40px #000, 0 0 0 0.5cqi rgba(47, 125, 225, 0.45), 0 0 0 0.9cqi rgba(255, 255, 255, 0.12); }
body[data-theme='sidibou'] .tile { background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 38%), linear-gradient(160deg, var(--tile-a), var(--tile) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -0.3cqi 0.6cqi rgba(0, 20, 60, 0.3), 0 0.15cqi 0.25cqi rgba(10, 40, 90, 0.25); }
body[data-theme='sidibou'] .tile.corner { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 40%), url('/themes/sidibou.svg') center / 220% auto, linear-gradient(150deg, var(--corner-a), var(--corner-b)); }
body[data-theme='sidibou'] .name { text-shadow: 0 0.12cqi 0.3cqi rgba(0, 25, 70, 0.6); }
body[data-theme='sidibou'] .tile .country { color: #bfe0ff; }
body[data-theme='sidibou'] .landmark { opacity: 0.22; }
body[data-lands='same'][data-theme='sidibou'] { --land-band: linear-gradient(180deg, #ffffff, #e9eef6 50%, #c5d3e6); }
body[data-theme='sidibou'] .t-surprise { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 38%), linear-gradient(160deg, #e2559a, #a8246a 75%); }
body[data-theme='sidibou'] .t-treasure { background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 38%), linear-gradient(160deg, #f2b83b, #c47f0c 75%); }
body[data-theme='sidibou'] .t-tax { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 38%), linear-gradient(160deg, #2fb37a, #13744a 75%); }
body[data-theme='sidibou'] .tile.t-event { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 38%), linear-gradient(160deg, #f07b3a, #b8460f 75%); }
body[data-theme='sidibou'] .start-in { background: linear-gradient(135deg, rgba(31, 111, 214, 0.85), rgba(240, 70, 143, 0.75)); }
body[data-theme='sidibou'] .center { background: linear-gradient(180deg, #0f52b4, #0a3b86) !important; }
body[data-theme='sidibou'] .center-map { content: url('/themes/sidibou.svg'); left: 0; top: 0; bottom: auto; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
/* whitewashed Moorish arch with a row of door studs */
body[data-theme='sidibou'] .center::before { z-index: 1; inset: 0.9cqi; border: 0.8cqi solid #fbfaf5; border-radius: 46% 46% 1.6cqi 1.6cqi / 16% 16% 1.6cqi 1.6cqi; box-shadow: inset 0 0 0 0.3cqi #0b3f8f, 0 0.4cqi 1.4cqi rgba(0, 0, 0, 0.25); outline: 0.45cqi dotted rgba(6, 22, 52, 0.75); outline-offset: -2cqi; }
/* bougainvillea in two corners */
body[data-theme='sidibou'] .center::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    url('/icons/hibiscus.png') right 1.5% top 1.5% / 9% no-repeat, url('/icons/hibiscus.png') right 10% top 0.5% / 6.5% no-repeat,
    url('/icons/hibiscus.png') right 0.5% top 10% / 6% no-repeat, url('/icons/hibiscus.png') right 9% top 8% / 4.5% no-repeat,
    url('/icons/hibiscus.png') left 1.5% bottom 1.5% / 9% no-repeat, url('/icons/hibiscus.png') left 10% bottom 0.5% / 6.5% no-repeat,
    url('/icons/hibiscus.png') left 0.5% bottom 10% / 6% no-repeat, url('/icons/hibiscus.png') left 9% bottom 8% / 4.5% no-repeat;
  filter: drop-shadow(0 0.5cqi 0.8cqi rgba(0, 0, 0, 0.35));
}
body[data-theme='sidibou'] .dice-tray { background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.2), rgba(4, 22, 60, 0.6) 72%); box-shadow: inset 0 0.7cqi 2.4cqi rgba(0, 10, 40, 0.55), 0 0 0 0.35cqi rgba(255, 255, 255, 0.55), 0 1.2cqi 3cqi rgba(0, 0, 0, 0.3); }
body[data-theme='sidibou'] .feed, body[data-theme='sidibou'] .tb-main:not(.you), body[data-theme='sidibou'] .to-chip { background: rgba(4, 22, 60, 0.72); border-color: rgba(255, 255, 255, 0.22); }
body[data-theme='sidibou'] .tb-round { color: #fff; background: rgba(4, 22, 60, 0.6); }
body[data-theme='sidibou'] .roll-total span:not(.dbl) { background: rgba(4, 22, 60, 0.65); color: #fff; }

/* ========== buildings: a white chip joined to the flag badge (house icon + count, or a hotel) ========== */
.bld-chip { --fs: max(3.4cqi, 14px); position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 0.1cqi; height: var(--fs); padding: 0 max(0.55cqi, 3px) 0 max(0.2cqi, 1px); border-radius: 99px;
  background: linear-gradient(180deg, #ffffff, #e6eaf7); color: #141838; border: max(0.25cqi, 1.5px) solid var(--owner, #fff);
  box-shadow: 0 0.3cqi 0.9cqi rgba(0, 0, 0, 0.55), inset 0 -0.2cqi 0 rgba(20, 24, 56, 0.12); font-weight: 900; font-size: max(1.6cqi, 8px); line-height: 1; pointer-events: none; white-space: nowrap; }
.bld-chip[hidden] { display: none; }
.bld-chip .ic.bld { width: max(2.5cqi, 11px); height: max(2.5cqi, 11px); margin: 0; filter: drop-shadow(0 0.15cqi 0.15cqi rgba(0, 0, 0, 0.35)); }
.bld-chip.hotel { padding: 0 max(0.3cqi, 2px); background: linear-gradient(180deg, #fff1f4, #ffc2d0); }
.bld-chip.hotel .ic.bld { width: max(2.8cqi, 12px); height: max(2.8cqi, 12px); }
.bld-chip.bump { animation: bldBump 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes bldBump { 0% { scale: 0.3; } 60% { scale: 1.35; } 100% { scale: 1; } }
/* top & bottom rows: flag moves a little left, chip on its right; side columns: flag up, chip below */
.tile.built.bottom .tile-badge, .tile.built.top .tile-badge { left: calc(50% - 1.6cqi); }
.tile.bottom .bld-chip { top: 0; left: calc(50% - 0.5cqi); transform: translateY(-40%); }
.tile.top .bld-chip { bottom: 0; left: calc(50% - 0.5cqi); transform: translateY(40%); }
.tile.built.left .tile-badge, .tile.built.right .tile-badge { top: calc(50% - 1.6cqi); }
.tile.left .bld-chip { right: 0; top: calc(50% - 0.5cqi); transform: translate(calc(50% - 0.34cqi), 0); }
.tile.right .bld-chip { left: 0; top: calc(50% - 0.5cqi); transform: translate(calc(-50% + 0.34cqi), 0); }
@container (max-width: 520px) {
  .bld-chip { gap: 0; padding: 0 2px 0 0; }
  .bld-chip .ic.bld { width: 10px; height: 10px; }
}

/* ========== right column: one panel with Chat | Game log | Portfolio tabs ========== */
.col-right .side-tabs { flex: 1 1 auto; }
.side-tabs[data-tab='mine'] .chat-list, .side-tabs[data-tab='mine'] .chat-form { display: none; }
.side-tabs:not([data-tab='mine']) .mine-pane { display: none; }
.mine-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.mine-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.side-tabs .tab { white-space: nowrap; min-width: 0; }

/* ========== idle knock: a fist knocks three times on the screen ========== */
.knock { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5)); animation: knockFade 2.4s ease forwards; }
@keyframes knockFade { 0% { opacity: 0; } 5% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
.knock-hit { position: relative; width: min(40vmin, 240px); aspect-ratio: 1; display: grid; place-items: center; }
.knock-fist { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.6)); animation: knockFist 0.62s ease-out both; }
@keyframes knockFist {
  0%, 32%, 64% { transform: scale(1.2) rotate(-6deg); }
  14%, 46% { transform: scale(0.86) rotate(-14deg) translateY(-6%); }
  80% { transform: scale(0.94) rotate(-10deg); }
  100% { transform: scale(1) rotate(-8deg); }
}
.knock-ring { position: absolute; inset: 18%; border-radius: 50%; border: 0.5vmin solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 3vmin rgba(255, 255, 255, 0.5); opacity: 0; animation: knockRing 0.55s ease-out both; }
.knock-ring.r2 { animation-delay: 0.2s; }
.knock-ring.r3 { animation-delay: 0.4s; }
@keyframes knockRing { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.knock-txt { font-weight: 900; font-size: clamp(20px, 4.4vmin, 38px); padding: 10px 24px; border-radius: 99px; background: var(--grad); color: #fff; text-align: center; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); animation: pop 0.45s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.board-scroll.knocked { animation: knockShake 0.62s linear; }
@keyframes knockShake {
  0%, 10%, 33%, 43%, 66%, 76%, 100% { transform: none; }
  3% { transform: translate(-4px, 3px); } 36% { transform: translate(4px, -3px); } 69% { transform: translate(-4px, 2px); }
}

/* ========== Sahara: sunset dunes, camel caravan, palm oasis ========== */
body[data-theme='sahara'] {
  --bg: #120a14; --board-a: #e9b06a; --board-b: #a9632c; --tile-a: #6e3c22; --tile: #4a2415; --tile-hi: #80492a;
  --corner-a: #7d4121; --corner-b: #46200f; --glow1: rgba(255, 196, 110, 0.2); --glow2: rgba(240, 120, 80, 0.14);
  --accent: #f0a04b; --accent2: #e8566c; --grad: linear-gradient(135deg, #f08a42, #d9486a);
  --tile-text: #fff4e2; --tile-muted: #f3c995;
}
body[data-theme='sahara'] .board { border-color: rgba(255, 214, 150, 0.75); box-shadow: 0 40px 100px -40px #000, 0 0 0 0.5cqi rgba(240, 160, 75, 0.2), 0 0 5cqi rgba(255, 150, 70, 0.18); }
body[data-theme='sahara'] .tile { background: linear-gradient(165deg, rgba(255, 220, 170, 0.14), transparent 40%), linear-gradient(160deg, var(--tile-a), var(--tile) 65%); box-shadow: inset 0 0 0 1px rgba(255, 200, 140, 0.24), 0 0.3cqi 0.7cqi rgba(60, 20, 5, 0.45); }
body[data-theme='sahara'] .tile.corner { background: radial-gradient(circle at 70% 20%, rgba(255, 200, 110, 0.3), transparent 55%), linear-gradient(150deg, var(--corner-a), var(--corner-b)); }
body[data-lands='same'][data-theme='sahara'] { --land-band: linear-gradient(180deg, #ffe2ab, #e3a55c 45%, #b0702f); }
body[data-theme='sahara'] .center { background: linear-gradient(180deg, #1d1442, #c2496a 50%, #a5532a) !important; }
body[data-theme='sahara'] .center-map { content: url('/themes/sahara.svg'); left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
body[data-theme='sahara'] .center::before { z-index: 1; border-color: rgba(255, 214, 150, 0.5); }
body[data-theme='sahara'] .dice-tray { background: radial-gradient(ellipse at 50% 38%, rgba(255, 220, 160, 0.22), rgba(40, 14, 6, 0.55) 72%); }
body[data-theme='sahara'] .feed, body[data-theme='sahara'] .tb-main:not(.you), body[data-theme='sahara'] .to-chip, body[data-theme='sahara'] .tb-round { background: rgba(40, 16, 10, 0.72); color: var(--text); }
body[data-theme='sahara'] .start-in { background: linear-gradient(135deg, rgba(240, 138, 66, 0.85), rgba(217, 72, 106, 0.75)); }

/* ========== Marrakech: green zellige, terracotta walls, glowing lanterns ========== */
body[data-theme='marrakech'] {
  --bg: #07130f; --board-a: #cc5b3e; --board-b: #7e2c1a; --tile-a: #146a52; --tile: #0b4536; --tile-hi: #1a7a5e;
  --corner-a: #bf5236; --corner-b: #7a2a18; --glow1: rgba(255, 200, 110, 0.18); --glow2: rgba(217, 96, 59, 0.14);
  --accent: #e7b04a; --accent2: #d9603b; --grad: linear-gradient(135deg, #d9603b, #e7b04a);
  --tile-text: #fbf1dc; --tile-muted: #ecd6a8;
}
body[data-theme='marrakech'] .board { border-color: rgba(231, 176, 74, 0.8); box-shadow: 0 40px 100px -40px #000, 0 0 0 0.5cqi rgba(231, 176, 74, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
body[data-theme='marrakech'] .tile { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 38%), linear-gradient(160deg, var(--tile-a), var(--tile) 70%); box-shadow: inset 0 0 0 1px rgba(241, 226, 194, 0.22), inset 0 -0.3cqi 0.6cqi rgba(0, 30, 20, 0.35), 0 0.2cqi 0.5cqi rgba(60, 15, 5, 0.4); }
body[data-theme='marrakech'] .tile.corner { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 40%), url('/themes/marrakech.svg') center / 260% auto, linear-gradient(150deg, var(--corner-a), var(--corner-b)); }
body[data-lands='same'][data-theme='marrakech'] { --land-band: linear-gradient(180deg, #fbf1dc, #ead3a3 50%, #c9a464); }
body[data-theme='marrakech'] .center { background: linear-gradient(180deg, #0d5a46, #083a2d) !important; }
body[data-theme='marrakech'] .center-map { content: url('/themes/marrakech.svg'); left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
body[data-theme='marrakech'] .center::before { z-index: 1; inset: 0.7cqi; border: 0.6cqi solid #c4553a; box-shadow: inset 0 0 0 0.3cqi #e7b04a, 0 0.3cqi 1cqi rgba(0, 0, 0, 0.3); border-radius: 1.4cqi; }
body[data-theme='marrakech'] .dice-tray { background: radial-gradient(ellipse at 50% 38%, rgba(255, 220, 150, 0.16), rgba(3, 25, 18, 0.62) 72%); box-shadow: inset 0 0.7cqi 2.4cqi rgba(0, 0, 0, 0.55), 0 0 0 0.35cqi rgba(231, 176, 74, 0.45), 0 1.2cqi 3cqi rgba(0, 0, 0, 0.3); }
body[data-theme='marrakech'] .feed, body[data-theme='marrakech'] .tb-main:not(.you), body[data-theme='marrakech'] .to-chip, body[data-theme='marrakech'] .tb-round { background: rgba(4, 30, 22, 0.75); color: var(--text); }
body[data-theme='marrakech'] .start-in { background: linear-gradient(135deg, rgba(217, 96, 59, 0.85), rgba(231, 176, 74, 0.7)); }

/* ========== Stadium: floodlit pitch in the middle, the crowd in the stands around the board ========== */
body[data-theme='stadium'] {
  --bg: #060a14; --board-a: #1a2236; --board-b: #0b101e; --tile-a: #1d2c48; --tile: #111b2f; --tile-hi: #24385e;
  --corner-a: #1f6a35; --corner-b: #0f3d1e; --glow1: rgba(255, 255, 255, 0.12); --glow2: rgba(80, 200, 120, 0.12);
  --accent: #35ad50; --accent2: #ffd23f; --grad: linear-gradient(135deg, #2c9a45, #8fcf1c);
  --tile-muted: #aabdd9;
}
body[data-theme='stadium'] .board { --gap: 0.4cqi; padding: 1.7cqi; border-color: rgba(255, 255, 255, 0.4);
  background:
    radial-gradient(circle, #ff4d6d 0.2cqi, transparent 0.28cqi) 0 0 / 1.2cqi 1.2cqi,
    radial-gradient(circle, #ffd23f 0.2cqi, transparent 0.28cqi) 0.6cqi 0.35cqi / 1.5cqi 1.5cqi,
    radial-gradient(circle, #4dabf7 0.2cqi, transparent 0.28cqi) 0.3cqi 0.8cqi / 1.7cqi 1.7cqi,
    radial-gradient(circle, #ffffff 0.18cqi, transparent 0.26cqi) 0.9cqi 0.2cqi / 1.3cqi 1.3cqi,
    radial-gradient(circle, #3ddc84 0.2cqi, transparent 0.28cqi) 0.15cqi 0.5cqi / 1.9cqi 1.9cqi,
    linear-gradient(145deg, #232d47, #0b101e);
  box-shadow: 0 40px 100px -40px #000, 0 0 6cqi rgba(255, 255, 255, 0.12); }
body[data-theme='stadium'] .tile { background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 40%), linear-gradient(160deg, var(--tile-a), var(--tile) 65%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0.3cqi 0.8cqi rgba(0, 0, 0, 0.5); }
body[data-theme='stadium'] .tile.corner { background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 45%), repeating-linear-gradient(90deg, #2c9a45 0 1.4cqi, #35ad50 1.4cqi 2.8cqi); }
body[data-lands='same'][data-theme='stadium'] { --land-band: linear-gradient(180deg, #6fe08a, #2fa64c 50%, #1b6e2f); }
body[data-theme='stadium'] .center { background: #2c9a45 !important; }
body[data-theme='stadium'] .center-map { content: url('/themes/stadium.svg'); left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
body[data-theme='stadium'] .center::before { display: none; }
body[data-theme='stadium'] .dice-tray { background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.16), rgba(4, 30, 12, 0.55) 72%); }
body[data-theme='stadium'] .feed, body[data-theme='stadium'] .tb-main:not(.you), body[data-theme='stadium'] .to-chip, body[data-theme='stadium'] .tb-round { background: rgba(5, 22, 12, 0.75); color: var(--text); }
body[data-theme='stadium'] .start-in { background: linear-gradient(135deg, rgba(44, 154, 69, 0.85), rgba(143, 207, 28, 0.7)); }

/* ========== screen smash: one fist punches through, the glass cracks and stays cracked until you tap ========== */
.smash { position: fixed; inset: 0; z-index: 310; pointer-events: none; transition: opacity 0.5s; }
.smash.gone { opacity: 0; }
.smash-crack { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: circle(0 at var(--cx) var(--cy)); animation: crackOpen 0.3s 0.33s ease-out forwards; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); }
@keyframes crackOpen { to { clip-path: circle(150% at var(--cx) var(--cy)); } }
.smash-crack .ck { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.7; stroke-linejoin: round; }
.smash-crack .ck-shadow { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 3.4; transform: translate(1.5px, 1.5px); }
.smash-crack .ck-dent { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; }
.smash-flash { position: absolute; inset: 0; background: radial-gradient(circle at var(--cx) var(--cy), #fff, rgba(255, 255, 255, 0.6) 25%, transparent 60%); opacity: 0; animation: smashFlash 0.45s 0.33s ease-out; }
@keyframes smashFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.smash-fist { position: absolute; width: min(46vmin, 300px); transform: translate(-50%, -50%) scale(0.15); opacity: 0; filter: blur(3px) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7)); animation: smashFist 1.3s cubic-bezier(0.55, 0, 0.6, 1) forwards; }
@keyframes smashFist {
  0% { transform: translate(-50%, -50%) scale(0.15) rotate(-20deg); opacity: 0; filter: blur(4px) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7)); }
  25% { transform: translate(-50%, -50%) scale(1.7) rotate(-6deg); opacity: 1; filter: blur(0) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7)); }
  40% { transform: translate(-50%, -50%) scale(1.45) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2) rotate(-10deg); opacity: 0; }
}
.shard { position: absolute; display: block; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(190, 215, 255, 0.35)); clip-path: polygon(50% 0, 100% 70%, 20% 100%); opacity: 0; animation: shardFall var(--d) calc(0.34s + var(--k) * 0.02s) cubic-bezier(0.3, 0, 0.8, 1) forwards; }
@keyframes shardFall {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + 60vh)) rotate(var(--rot)); }
}
.smash-txt { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); font-weight: 900; font-size: clamp(20px, 4.6vmin, 40px); padding: 10px 26px; border-radius: 99px; background: linear-gradient(135deg, #ff3b5c, #ff8a3d); color: #fff; white-space: nowrap; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); animation: pop 0.45s 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.board-scroll.atk-quake { animation: atkQuake 0.9s linear; }
@keyframes atkQuake {
  0%, 100% { transform: none; }
  8% { transform: translate(-9px, 6px) rotate(-0.6deg); } 18% { transform: translate(8px, -7px) rotate(0.5deg); }
  30% { transform: translate(-6px, 4px); } 45% { transform: translate(5px, -3px); } 62% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); }
}
.board-scroll.atk-shake { animation: knockShake 0.6s linear; }

/* ========== attacks (animation only) ========== */
.atk-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.atk-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.atk-h .muted { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; margin-left: auto; }
/* two free attacks per match, then paid */
.atk-left { margin-left: auto; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; text-transform: none; letter-spacing: 0; background: rgba(61, 220, 132, 0.15); color: var(--good); }
.atk-left.paid { background: rgba(255, 201, 60, 0.15); color: var(--warn); }
.atk-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.atk-k { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.atk-k.on { border-color: #ff6a3d; background: rgba(255, 106, 61, 0.18); box-shadow: 0 0 0 1px #ff6a3d; }
.ic.atk-ic { width: 26px; height: 26px; }
.atk-targets { display: flex; flex-wrap: wrap; gap: 5px; }
.atk-t { appearance: none; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 3px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.atk-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
.atk-t.all { padding: 3px 12px; }
.atk-t.on { border-color: var(--c, #ff6a3d); background: color-mix(in srgb, var(--c, #ff6a3d) 30%, transparent); }
.atk-go { width: 100%; justify-content: center; background: linear-gradient(135deg, #ff3b5c, #ff8a3d); }

.atk-proj { position: absolute; z-index: 30; height: auto; pointer-events: none; filter: drop-shadow(0 0.6cqi 0.8cqi rgba(0, 0, 0, 0.5)); }
.atk-proj.jet { filter: grayscale(0.85) brightness(0.85) drop-shadow(0 1.4cqi 1cqi rgba(0, 0, 0, 0.45)); }
.atk-smoke { position: absolute; z-index: 29; width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: radial-gradient(circle, rgba(235, 235, 245, 0.85), rgba(160, 160, 175, 0.4) 60%, transparent 70%); transform: translate(-50%, -50%); animation: smoke 0.9s ease-out forwards; pointer-events: none; }
@keyframes smoke { to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

.atk-boom { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.atk-boom img { position: absolute; width: 11cqi; left: -5.5cqi; top: -5.5cqi; animation: boomPop 1.1s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes boomPop { 0% { transform: scale(0.1); } 30% { transform: scale(1.15); } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.atk-boom .fire { position: absolute; width: 14cqi; height: 14cqi; left: -7cqi; top: -7cqi; border-radius: 50%; background: radial-gradient(circle, #fff6c2, #ffb52e 35%, #ff4d1f 60%, transparent 70%); animation: fireBall 0.8s ease-out forwards; }
@keyframes fireBall { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.atk-boom .ring, .atk-nuke .ring { position: absolute; width: 10cqi; height: 10cqi; left: -5cqi; top: -5cqi; border-radius: 50%; border: 0.6cqi solid rgba(255, 240, 200, 0.9); animation: shock 0.7s ease-out forwards; }
@keyframes shock { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

.atk-flash { position: absolute; inset: 0; left: 0 !important; top: 0 !important; z-index: 32; border-radius: 2cqi; background: #fff; pointer-events: none; animation: nukeFlash 0.8s ease-out forwards; }
@keyframes nukeFlash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.atk-nuke { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.atk-nuke .ring { width: 16cqi; height: 16cqi; left: -8cqi; top: -8cqi; animation-duration: 1.1s; }
.atk-nuke .ring.r2 { animation-delay: 0.25s; }
.atk-nuke .fireball { position: absolute; width: 18cqi; height: 18cqi; left: -9cqi; top: -9cqi; border-radius: 50%; background: radial-gradient(circle, #fffbe0, #ffd23f 30%, #ff6a1f 55%, rgba(120, 30, 10, 0.6) 68%, transparent 72%); animation: fireBall 1.2s ease-out forwards; }
.atk-nuke .stem { position: absolute; width: 4.5cqi; height: 14cqi; left: -2.25cqi; bottom: -1cqi; border-radius: 2cqi 2cqi 1cqi 1cqi; background: linear-gradient(180deg, #ffb35c, #c8641f 40%, rgba(90, 70, 70, 0.8)); transform-origin: bottom; animation: stem 3s ease-out forwards; }
@keyframes stem { 0% { transform: scaleY(0); opacity: 0; } 15% { opacity: 1; } 45% { transform: scaleY(1); } 80% { opacity: 0.9; } 100% { transform: scaleY(1.1); opacity: 0; } }
.atk-nuke .cap { position: absolute; width: 18cqi; height: 10cqi; left: -9cqi; top: -22cqi; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 70%, #ffcf6b, #ff7a2a 35%, #8a4a3a 65%, rgba(80, 70, 80, 0.9) 80%); box-shadow: 0 0 4cqi rgba(255, 140, 50, 0.6); animation: cap 3s ease-out forwards; }
@keyframes cap { 0% { transform: translateY(14cqi) scale(0.2); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateY(0) scale(1); } 80% { opacity: 0.9; } 100% { transform: translateY(-2cqi) scale(1.15); opacity: 0; } }
.atk-nuke .rad { position: absolute; width: 7cqi; left: -3.5cqi; top: -20.5cqi; animation: radPop 3s ease-out forwards; }
@keyframes radPop { 0%, 35% { transform: scale(0) rotate(-90deg); opacity: 0; } 50% { transform: scale(1.2) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.atk-splat { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; animation: splatFade 3.2s ease-in forwards; }
@keyframes splatFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.atk-splat .blob { position: absolute; width: 7cqi; height: 6cqi; left: -3.5cqi; top: -3cqi; border-radius: 45% 55% 50% 40% / 50% 40% 60% 50%; background: radial-gradient(circle at 40% 35%, #ff8a7a, #e8231b 45%, #a8120c); box-shadow: 0 0.3cqi 0.6cqi rgba(0, 0, 0, 0.4); animation: blobIn 0.25s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes blobIn { from { transform: scale(0.2, 0.1); } }
.atk-splat i { position: absolute; width: 1.4cqi; height: 1.4cqi; left: -0.7cqi; top: -0.7cqi; border-radius: 50%; background: #d81e16; animation: drop 0.35s ease-out forwards; }
@keyframes drop { from { transform: rotate(var(--a)) translateY(0) scale(1.4); } to { transform: rotate(var(--a)) translateY(var(--d)) scale(0.8); } }

/* the target's whole screen takes the hit */
.atk-screen { position: fixed; inset: 0; z-index: 305; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16vh; animation: atkScreen 2.6s ease forwards; }
@keyframes atkScreen { 0% { opacity: 0; } 6% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.atk-screen.nuke { background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 210, 120, 0.7) 50%, rgba(255, 90, 30, 0.45)); animation: atkScreenNuke 2.6s ease forwards; }
@keyframes atkScreenNuke { 0% { opacity: 1; } 30% { opacity: 0.6; } 80% { opacity: 0.5; } 100% { opacity: 0; } }
.atk-screen.jet, .atk-screen.bomb { background: radial-gradient(circle, transparent 40%, rgba(255, 60, 40, 0.45)); }
.atk-screen.tomato { animation-duration: 3.6s; }
.atk-screen .big-splat { position: absolute; left: 50%; top: 42%; width: min(60vmin, 420px); aspect-ratio: 1.1; transform: translate(-50%, -50%); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: radial-gradient(circle at 40% 35%, rgba(255, 140, 120, 0.95), rgba(232, 35, 27, 0.95) 45%, rgba(160, 15, 10, 0.95)); box-shadow: 0 1vmin 3vmin rgba(0, 0, 0, 0.35); animation: blobIn 0.3s cubic-bezier(0.2, 1.6, 0.4, 1), splatSlide 3.6s ease-in forwards; }
@keyframes splatSlide { 0%, 30% { translate: 0 0; } 100% { translate: 0 8vh; } }
.atk-screen-txt { position: relative; font-weight: 900; font-size: clamp(18px, 4vmin, 34px); padding: 10px 24px; border-radius: 99px; background: rgba(10, 12, 30, 0.85); color: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); animation: pop 0.4s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.react-pop { max-height: min(86cqi, 72vh); overflow-y: auto; overscroll-behavior: contain; }

/* ========== more weapons: shoe / chlaka (BONK, dizzy stars), water balloon, love ========== */
.atk-proj.water-balloon { filter: hue-rotate(195deg) saturate(1.3) drop-shadow(0 0.6cqi 0.8cqi rgba(0, 0, 0, 0.5)); }
.atk-bonk { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.bonk-txt { position: absolute; left: 0; top: -6cqi; transform: translate(-50%, -50%) rotate(-10deg); font-weight: 900; font-size: max(3.2cqi, 16px); color: #fff; letter-spacing: 0.04em; white-space: nowrap;
  -webkit-text-stroke: 0.35cqi #1a1440; paint-order: stroke fill; text-shadow: 0 0.4cqi 0 #ff3b5c; animation: bonkTxt 1.4s cubic-bezier(0.2, 1.7, 0.4, 1) forwards; }
@keyframes bonkTxt { 0% { transform: translate(-50%, -50%) rotate(-10deg) scale(0.2); } 25% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.15); } 75% { opacity: 1; } 100% { transform: translate(-50%, -80%) rotate(-10deg) scale(1); opacity: 0; } }
.atk-bonk .dizzy { position: absolute; width: 5cqi; left: -2.5cqi; top: -5cqi; animation: dizzy 2.1s linear forwards; }
@keyframes dizzy { 0% { transform: rotate(0) scale(0.4); opacity: 0; } 15% { opacity: 1; transform: rotate(120deg) scale(1); } 85% { opacity: 1; } 100% { transform: rotate(900deg) scale(1); opacity: 0; } }
.atk-splat.water .blob { background: radial-gradient(circle at 40% 35%, #d8f4ff, #4fb6ff 45%, #1a6fd6); border-radius: 50% 40% 55% 45% / 45% 55% 40% 50%; opacity: 0.85; }
.atk-splat.water i { background: #4fb6ff; }
.atk-love { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.atk-love .ring { position: absolute; width: 9cqi; height: 9cqi; left: -4.5cqi; top: -4.5cqi; border-radius: 50%; border: 0.5cqi solid rgba(255, 120, 170, 0.9); animation: shock 0.8s ease-out forwards; }
.atk-love img { position: absolute; width: 2.6cqi; left: -1.3cqi; top: -1.3cqi; animation: heartUp var(--t) ease-out forwards; }
@keyframes heartUp { 0% { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); opacity: 0; } }
.atk-label { position: absolute; z-index: 33; transform: translate(-50%, -260%); font-weight: 900; font-size: max(1.8cqi, 10px); padding: 0.3cqi 1cqi; border-radius: 99px; background: #ff3b5c; color: #fff; white-space: nowrap; pointer-events: none; animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
.atk-screen.love { background: radial-gradient(circle, transparent 35%, rgba(255, 90, 150, 0.45)); }
.atk-screen.water { background: radial-gradient(circle, transparent 40%, rgba(60, 160, 255, 0.4)); }
.atk-screen.shoe, .atk-screen.chlaka { background: radial-gradient(circle, transparent 45%, rgba(255, 200, 60, 0.35)); }
.atk-screen .big-splat.water { background: radial-gradient(circle at 40% 35%, rgba(220, 245, 255, 0.92), rgba(79, 182, 255, 0.85) 45%, rgba(26, 111, 214, 0.85)); }

/* revenge: 5 seconds to hit back */
.revenge { position: fixed; z-index: 320; left: 50%; bottom: max(18vh, 120px); transform: translateX(-50%); appearance: none; border: 0; cursor: pointer; overflow: hidden;
  padding: 14px 26px 16px; border-radius: 99px; font: inherit; font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(135deg, #ff3b5c, #ff8a3d);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.25); animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1), revengePulse 0.8s 0.35s ease-in-out infinite; }
.revenge.love { background: linear-gradient(135deg, #ff5c9a, #ff9ac2); }
.revenge i { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(255, 255, 255, 0.85); transform-origin: left; animation: revengeTime 5s linear forwards; }
@keyframes revengeTime { to { transform: scaleX(0); } }
@keyframes revengePulse { 50% { transform: translateX(-50%) scale(1.06); } }

/* sound board */
.snd-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.snd-row { display: flex; flex-wrap: wrap; gap: 5px; }
.snd { appearance: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.snd.big { padding: 4px 11px 4px 5px; background: linear-gradient(135deg, rgba(255, 138, 61, 0.25), rgba(255, 92, 168, 0.2)); }
.ic.snd-ic { width: 22px; height: 22px; }
.snd:hover { background: rgba(255, 255, 255, 0.1); }
.snd-bubble small { display: block; font-family: 'Noto Kufi Arabic', 'Segoe UI', sans-serif; font-size: 0.9em; opacity: 0.9; }

/* ========== coffin dance on bankruptcy ========== */
.coffin-dance { position: absolute !important; inset: 0; z-index: 25; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)); animation: cdFade 5.5s ease forwards; }
@keyframes cdFade { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.cd-walk { position: absolute; left: 0; top: 46%; width: 100%; animation: cdWalk 5.4s linear forwards; }
@keyframes cdWalk { 0% { transform: translate(-75%, -50%); } 30% { transform: translate(0, -50%); } 70% { transform: translate(0, -50%); } 100% { transform: translate(85%, -50%); } }
.cd-crew { position: relative; width: 62cqi; margin: 0 auto; height: 30cqi; display: flex; align-items: flex-end; justify-content: space-between; }
.cd-man { width: 12cqi; flex: none; animation: cdBob 0.34s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.cd-man.m2, .cd-man.m4 { animation-delay: -0.17s; }
.cd-man.m3, .cd-man.m4 { transform: scaleX(-1); }
@keyframes cdBob { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -1.6cqi; rotate: 6deg; } }
.cd-coffin { position: absolute; left: 50%; top: 4cqi; width: 40cqi; height: 16cqi; z-index: 1; transform: translateX(-50%); animation: cdCoffin 0.68s ease-in-out infinite; }
.cd-coffin img { position: absolute; left: 50%; top: 50%; width: 27cqi; transform: translate(-50%, -50%) rotate(-52deg); transform-origin: center; filter: drop-shadow(0 1cqi 1cqi rgba(0, 0, 0, 0.5)); }
.cd-coffin .av { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); width: 6cqi; height: 6cqi; box-shadow: 0 0 0 0.4cqi rgba(255, 255, 255, 0.7); }
@keyframes cdCoffin { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); } 50% { transform: translateX(-50%) translateY(-1.4cqi) rotate(3deg); } }
.cd-txt { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-weight: 900; font-size: max(2.2cqi, 13px); padding: 0.6cqi 1.8cqi; border-radius: 99px; background: rgba(0, 0, 0, 0.7); color: #fff; white-space: nowrap; animation: pop 0.4s 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both; }

/* ========== money rain on big rent ========== */
.bill-rain { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.bill-rain img { position: absolute; width: 4cqi; left: -2cqi; top: -16cqi; opacity: 0; animation: billFall 1.3s var(--dl) ease-in forwards; }
@keyframes billFall { 0% { transform: translate(var(--x), 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--x) * 0.6), 15cqi) rotate(var(--r)); opacity: 0; } }
.cry-wallet { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.cry-wallet .cry-face { position: absolute; width: 4.2cqi; left: -2.1cqi; top: -9cqi; animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1), cryShake 0.25s 0.35s ease-in-out 6, fadeLate 2.2s forwards; }
@keyframes cryShake { 50% { translate: 0.4cqi 0; } }
@keyframes fadeLate { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.cry-wallet .wing { position: absolute; width: 3.6cqi; left: -1.8cqi; top: -1.8cqi; animation: wingAway 1.6s ease-out forwards; }
.cry-wallet .w2 { animation-delay: 0.25s; opacity: 0; }
@keyframes wingAway { 0% { transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { transform: translate(8cqi, -14cqi) scale(1.1) rotate(15deg); opacity: 0; } }
.money-screen { position: fixed; inset: 0; z-index: 304; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; animation: atkScreen 3.2s ease forwards; }
.money-screen.loss { background: radial-gradient(circle, transparent 45%, rgba(255, 50, 70, 0.35)); }
.money-screen img { position: absolute; top: -12vh; width: clamp(48px, 9vmin, 90px); animation: billScreen var(--t) var(--dl) ease-in forwards; }
@keyframes billScreen { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(125vh) rotate(var(--r)); } }
.money-txt { position: relative; font-weight: 900; font-size: clamp(26px, 6vmin, 54px); padding: 10px 28px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #1fbf6a, #8be04a); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); animation: pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); }
.money-screen.loss .money-txt { background: linear-gradient(135deg, #ff3b5c, #ff8a3d); }
/* splats: droplets around the blob; water is see-through */
.atk-screen .big-splat { box-shadow: -26vmin -14vmin 0 -14vmin rgba(200, 25, 20, 0.95), 27vmin -6vmin 0 -15vmin rgba(200, 25, 20, 0.95), -20vmin 19vmin 0 -16vmin rgba(200, 25, 20, 0.95), 22vmin 21vmin 0 -15.5vmin rgba(200, 25, 20, 0.95), 0 1vmin 3vmin rgba(0, 0, 0, 0.3); }
.atk-screen .big-splat.water { opacity: 0.62; border-radius: 58% 42% 50% 50% / 46% 58% 42% 54%; background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.95) 0 6%, rgba(160, 220, 255, 0.85) 18%, rgba(60, 160, 255, 0.75) 55%, rgba(20, 100, 210, 0.7));
  box-shadow: -27vmin -12vmin 0 -14vmin rgba(80, 170, 255, 0.85), 26vmin -9vmin 0 -15vmin rgba(80, 170, 255, 0.85), -18vmin 21vmin 0 -15.5vmin rgba(80, 170, 255, 0.85), 24vmin 18vmin 0 -16vmin rgba(80, 170, 255, 0.85), inset 0 -3vmin 6vmin rgba(0, 60, 160, 0.35); }
.atk-screen { padding-bottom: 27vh; }
.revenge { top: max(9vh, 56px); bottom: auto; max-width: calc(100vw - 32px); }
/* 4 boards on the home page: 2 × 2 instead of 3 + 1 */
.home-eds:has(> .home-ed:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ========== layout: one column on the right (players & trades on top, chat at the bottom) ========== */
body[data-layout='right'] .game { grid-template-columns: minmax(0, 1fr) 330px; grid-template-areas: 'board left' 'board right'; grid-template-rows: auto minmax(220px, 1fr); }
body[data-layout='right'] .col-left { overflow: auto; max-height: 60vh; }
body[data-layout='right'] .trades-panel { flex: none; }
@media (max-width: 1220px) {
  body[data-layout='right'] .game { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  body[data-layout='right'] .game { grid-template-columns: 1fr; grid-template-areas: 'board' 'left' 'right'; grid-template-rows: none; }
  body[data-layout='right'] .col-left { max-height: none; overflow: visible; }
}
/* the layout choice only matters on wide screens */
@media (max-width: 900px) { .layout-sec { display: none; } }

/* one-column layout: the board uses the free width (up to 35% wider than tall) instead of staying square */
@media (min-width: 901px) {
  body[data-layout='right'] .game { padding: 6px; gap: 8px; grid-template-rows: auto minmax(220px, 1fr); }
  body[data-layout='right'] .board { aspect-ratio: auto; width: min(100cqw, calc(100cqh * 1.35)); height: min(100cqh, 100cqw); }
}
@media (min-width: 901px) {
  body[data-layout='right'] .ic.corner-ic { width: 3.8cqi; height: 3.8cqi; }
}

/* ========== speeding past houses/hotels: dust, speed glow, VROOM! ========== */
.token.speeding { filter: drop-shadow(0 0 0.9cqi rgba(255, 190, 60, 0.95)) drop-shadow(0 0 2cqi rgba(255, 120, 40, 0.6)); }
.speed-puff { position: absolute; z-index: 1; width: 2.2cqi; height: 2.2cqi; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 236, 200, 0.9), rgba(210, 180, 140, 0.5) 55%, transparent 72%); animation: speedPuff 0.7s ease-out forwards; }
@keyframes speedPuff { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
.vroom-txt { position: absolute; z-index: 33; pointer-events: none; white-space: nowrap; font-weight: 900; font-style: italic; font-size: max(2.2cqi, 12px); letter-spacing: 0.02em; color: #ffd23f;
  -webkit-text-stroke: 0.3cqi #2a0f00; paint-order: stroke fill; text-shadow: 0.4cqi 0.3cqi 0 #ff3b1f; transform: translate(-50%, -50%) skewX(-12deg); animation: vroomTxt 1.1s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes vroomTxt { 0% { transform: translate(-50%, -50%) skewX(-12deg) scale(0.3); opacity: 0; } 20% { transform: translate(-50%, -90%) skewX(-12deg) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -150%) skewX(-12deg) scale(1); opacity: 0; } }
.tile.danger-pass { animation: dangerPass 0.6s ease-out; z-index: 4; }
@keyframes dangerPass { 0% { box-shadow: 0 0 0 0.4cqi rgba(255, 70, 40, 0.95), 0 0 3cqi rgba(255, 90, 40, 0.8); transform: scale(1.06); } 100% { box-shadow: none; transform: none; } }

/* ========== nuclear countdown & air-raid alert ========== */
.nuke-count, .jet-alert { position: absolute; z-index: 32; width: 0; height: 0; pointer-events: none; }
.nc-reticle { position: absolute; width: 12cqi; height: 12cqi; left: -6cqi; top: -6cqi; border-radius: 50%; border: 0.35cqi solid #ff2d3d;
  background: radial-gradient(circle, transparent 46%, rgba(255, 45, 61, 0.18) 47%, transparent 60%),
    linear-gradient(#ff2d3d, #ff2d3d) center / 0.3cqi 100% no-repeat, linear-gradient(#ff2d3d, #ff2d3d) center / 100% 0.3cqi no-repeat;
  box-shadow: 0 0 2cqi rgba(255, 45, 61, 0.7); animation: reticle 1s ease-in-out infinite; }
@keyframes reticle { 0% { transform: scale(1.6) rotate(0); opacity: 0.4; } 50% { transform: scale(0.9) rotate(45deg); opacity: 1; } 100% { transform: scale(1) rotate(90deg); opacity: 0.85; } }
.nc-ring { position: absolute; width: 20cqi; height: 20cqi; left: -10cqi; top: -10cqi; border-radius: 50%; border: 0.4cqi solid rgba(255, 45, 61, 0.7); animation: ncRing 1s ease-out infinite; }
@keyframes ncRing { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.nc-num { position: absolute; left: 0; top: -11cqi; transform: translate(-50%, -50%); font-weight: 900; font-size: max(7cqi, 28px); color: #fff; -webkit-text-stroke: 0.4cqi #b0001a; paint-order: stroke fill; text-shadow: 0 0 2cqi rgba(255, 40, 60, 0.9); }
.nc-num.tick, .na-num.tick { animation: tick 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tick { 0% { transform: translate(-50%, -50%) scale(2); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.nc-rad { position: absolute; width: 4.5cqi; left: 3.5cqi; top: -15cqi; animation: radBlink 0.5s steps(2) infinite; }
@keyframes radBlink { 50% { opacity: 0.2; } }
.jet-alert span { position: absolute; left: 0; top: -9cqi; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 900; font-size: max(2cqi, 11px); letter-spacing: 0.08em; padding: 0.3cqi 1.2cqi; border-radius: 0.6cqi; background: #ffd23f; color: #1a1000; border: 0.25cqi solid #1a1000; animation: radBlink 0.4s steps(2) infinite; }
.nuke-alert { position: fixed; inset: 0; z-index: 306; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; background: radial-gradient(circle, transparent 35%, rgba(255, 0, 30, 0.45)); animation: redAlert 0.5s ease-in-out infinite alternate; }
@keyframes redAlert { from { background-color: rgba(255, 0, 30, 0); } to { background-color: rgba(255, 0, 30, 0.12); } }
.na-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 26px; border-radius: 18px; background: rgba(20, 0, 4, 0.85); border: 3px solid #ff2d3d; box-shadow: 0 0 40px rgba(255, 45, 61, 0.6); color: #fff; }
.na-box img { width: 54px; animation: radBlink 0.5s steps(2) infinite; }
.na-box b { font-size: clamp(14px, 3vmin, 22px); letter-spacing: 0.12em; color: #ff5c6c; }
.na-num { display: block; font-weight: 900; font-size: clamp(48px, 12vmin, 96px); line-height: 1; }
.na-num.tick { animation: tickBig 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tickBig { 0% { transform: scale(2); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } }

/* ========== arrest: a police officer cuffs the player and shoves them into the cell ========== */
.cop { position: absolute; z-index: 6; width: max(6.5cqi, 30px); height: max(6.5cqi, 30px); pointer-events: none; }
.cop-man { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(var(--face, 1)); filter: drop-shadow(0 0.6cqi 0.8cqi rgba(0, 0, 0, 0.55)); }
.cop-siren { position: absolute; width: 55%; left: 22%; top: -48%; animation: copSiren 0.25s steps(2) infinite; }
@keyframes copSiren { 0% { filter: drop-shadow(0 0 1.2cqi rgba(255, 40, 60, 1)); } 100% { filter: drop-shadow(0 0 1.2cqi rgba(40, 120, 255, 1)); } }
.cop-say { position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: max(1.5cqi, 10px); padding: 0.35cqi 1cqi; border-radius: 99px; background: #fff; color: #1a1f4d; box-shadow: 0 0.4cqi 1cqi rgba(0, 0, 0, 0.45); animation: pop 0.3s 0.2s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.cop-say::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 0.6cqi solid transparent; border-top-color: #fff; }
.token.arrested .base { box-shadow: 0 0 0 0.35cqi rgba(255, 40, 60, 0.9), 0 0 2cqi rgba(255, 40, 60, 0.7); animation: copFlash 0.25s steps(2) infinite; }
@keyframes copFlash { 0% { box-shadow: 0 0 0 0.35cqi rgba(255, 40, 60, 0.9), 0 0 2cqi rgba(255, 40, 60, 0.7); } 100% { box-shadow: 0 0 0 0.35cqi rgba(40, 120, 255, 0.9), 0 0 2cqi rgba(40, 120, 255, 0.7); } }
.token img.cuffs { position: absolute; width: 70%; height: auto; margin: 0; left: 15%; bottom: -30%; z-index: 2; filter: drop-shadow(0 0.3cqi 0.3cqi rgba(0, 0, 0, 0.6)); animation: pop 0.3s 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }

/* corners: players stand in the middle, so the icon goes to the top and the name to the bottom */
.t-start .corner-in, .t-vacation .corner-in, .t-gotojail .corner-in { justify-content: flex-start; align-items: center; text-align: center; padding: 0.5cqi 0.4cqi 0.6cqi; gap: 0.1cqi; }
.t-start .ic.corner-ic, .t-vacation .ic.corner-ic, .t-gotojail .ic.corner-ic { width: 3.3cqi; height: 3.3cqi; }
.t-start .corner-in .big, .t-vacation .corner-in .big, .t-gotojail .corner-in .big { margin-top: auto; line-height: 1.05; }
.start-in .big { font-size: 1.9cqi; }
.start-in .small { font-size: 0.85cqi; }
.start-in .arrow { display: none; }
.vac-in .pot { font-size: 1.3cqi; line-height: 1; }

/* ========== Paper: clean and light — white tiles, light centre, dark text, no pictures ========== */
body[data-theme='paper'] {
  --board-a: #dfe4ee; --board-b: #d3d9e6; --tile-a: #ffffff; --tile: #ffffff; --tile-hi: #ffffff;
  --corner-a: #ffffff; --corner-b: #f4f6fb; --glow1: transparent; --glow2: transparent;
  --tile-text: #1b1f3b; --tile-muted: #646d8c;
}
body[data-theme='paper'] .board { border: 1px solid #c9d0de; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85); }
body[data-theme='paper'] .tile { background: #ffffff; box-shadow: 0 0 0 1px #e1e5ee, 0 1px 2px rgba(20, 30, 60, 0.08); }
body[data-theme='paper'] .tile.corner { background: #ffffff; color: var(--tile-text); }
body[data-theme='paper'] .name { text-shadow: none; }
body[data-theme='paper'] .tile.owned .price { color: var(--tile-text); }
body[data-theme='paper'] .tile.mortgaged .price { color: #b26a00; }
body[data-theme='paper'] .landmark { opacity: 0.12; }
body[data-theme='paper'] .t-surprise { background: #fdeef6; }
body[data-theme='paper'] .t-treasure { background: #fff7e0; }
body[data-theme='paper'] .t-tax { background: #e9f8ef; }
body[data-theme='paper'] .tile.t-event { background: #fff0e3; }
body[data-theme='paper'] .start-in { background: linear-gradient(135deg, #6c63ff, #e8559b); color: #fff; }
body[data-theme='paper'] .vac-in { background: #e3f7f4; }
body[data-theme='paper'] .gtj-in { background: #fde8ec; }
body[data-theme='paper'] .jail-in .visit { color: var(--tile-muted); }
body[data-lands='same'][data-theme='paper'] { --land-band: linear-gradient(180deg, #d5dbe6, #c3cad8); }
body[data-theme='paper'] .center { background: #f3f5fa !important; box-shadow: inset 0 0 0 1px #e1e5ee; }
body[data-theme='paper'] .center-map { display: none; }
body[data-theme='paper'] .center::before { border-color: transparent; }
body[data-theme='paper'] .tb-main:not(.you), body[data-theme='paper'] .feed, body[data-theme='paper'] .to-chip, body[data-theme='paper'] .tb-round,
body[data-theme='paper'] .roll-total span:not(.dbl), body[data-theme='paper'] .waiting, body[data-theme='paper'] .mode-pill {
  background: #ffffff; color: #1b1f3b; border: 1px solid #dfe3ee; box-shadow: 0 1px 3px rgba(20, 30, 60, 0.08);
}
body[data-theme='paper'] .tb-sub, body[data-theme='paper'] .edition-tag, body[data-theme='paper'] .center .act-note,
body[data-theme='paper'] .center .kbd-hint, body[data-theme='paper'] .center .turn-timer { color: #5b6585; }
body[data-theme='paper'] .event-pill { color: #7a3b00; background: #fff1e0; }
body[data-theme='paper'] .dice-tray { background: radial-gradient(ellipse at 50% 38%, #ffffff, #e6eaf2 72%); box-shadow: inset 0 0.5cqi 1.6cqi rgba(20, 30, 60, 0.12), 0 0 0 1px #dfe3ee; }

/* ========== Slate: clean and flat dark — solid colours, no glow, no pictures ========== */
body[data-theme='slate'] {
  --board-a: #191c22; --board-b: #191c22; --tile-a: #2a2e37; --tile: #2a2e37; --tile-hi: #323743;
  --corner-a: #30353f; --corner-b: #30353f; --glow1: transparent; --glow2: transparent;
  --tile-text: #f2f4f8; --tile-muted: #a7afc0;
}
body[data-theme='slate'] .board { border: 1px solid #343944; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
body[data-theme='slate'] .tile { background: var(--tile); box-shadow: 0 0 0 1px #363b46; }
body[data-theme='slate'] .tile.corner { background: var(--corner-a); }
body[data-theme='slate'] .band { background: var(--g); box-shadow: none; }
body[data-lands='same'][data-theme='slate'] { --land-band: #596173; }
body[data-theme='slate'] .name { text-shadow: none; }
body[data-theme='slate'] .landmark { opacity: 0.1; }
body[data-theme='slate'] .t-surprise { background: #3a2b38; }
body[data-theme='slate'] .t-treasure { background: #3a3426; }
body[data-theme='slate'] .t-tax { background: #263a30; }
body[data-theme='slate'] .tile.t-event { background: #3b2e24; }
body[data-theme='slate'] .start-in { background: #4f6bff; }
body[data-theme='slate'] .vac-in { background: #23423f; }
body[data-theme='slate'] .gtj-in { background: #47262d; }
body[data-theme='slate'] .center { background: #22252c !important; box-shadow: none; }
body[data-theme='slate'] .center-map { display: none; }
body[data-theme='slate'] .center::before { border-color: transparent; }
body[data-theme='slate'] .dice-tray { background: #1b1e24; box-shadow: 0 0 0 1px #343944; }
body[data-theme='slate'] .tb-main:not(.you), body[data-theme='slate'] .feed, body[data-theme='slate'] .to-chip, body[data-theme='slate'] .tb-round { background: #2c3039; border-color: #3a3f4b; box-shadow: none; }

/* ========== Rollionaire emblem: a faint watermark in the middle of the board ========== */
.center > .center-logo { position: absolute !important; left: 50%; top: 50%; height: 92%; width: auto; aspect-ratio: 1; max-width: 92%; transform: translate(-50%, -50%);
  color: var(--logo-c, #ffffff); opacity: var(--logo-op, 0.09); pointer-events: none; font-family: 'Outfit', system-ui, sans-serif; overflow: visible; }
.center-logo .lg-dash { transform-box: fill-box; transform-origin: center; animation: logoSpin 90s linear infinite; }
@keyframes logoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .center-logo .lg-dash { animation: none; } }
body[data-theme='ramadan'] { --logo-c: #f5d06f; --logo-op: 0.16; }
body[data-theme='night'] { --logo-c: #cfd8ff; --logo-op: 0.12; }
body[data-theme='sidibou'] { --logo-c: #ffffff; --logo-op: 0.17; }
body[data-theme='sahara'] { --logo-c: #fff4e2; --logo-op: 0.15; }
body[data-theme='marrakech'] { --logo-c: #f1e2c2; --logo-op: 0.17; }
body[data-theme='stadium'] { --logo-c: #ffffff; --logo-op: 0.16; }
body[data-theme='paper'] { --logo-c: #1b1f3b; --logo-op: 0.075; }
body[data-theme='slate'] { --logo-c: #ffffff; --logo-op: 0.07; }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }

/* ========== anime attacks: energy wave, spiral orb, shuriken, thunder ========== */
/* power-up at the attacker */
.anime-charge { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.anime-charge .aura { position: absolute; width: 13cqi; height: 13cqi; left: -6.5cqi; top: -6.5cqi; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(80, 200, 255, 0.85), transparent 25%, rgba(140, 230, 255, 0.9) 40%, transparent 55%, rgba(80, 200, 255, 0.85) 75%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 70%); mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 70%);
  filter: blur(0.15cqi) drop-shadow(0 0 1.5cqi rgba(80, 200, 255, 0.9)); animation: auraSpin 0.35s linear infinite, auraGrow 1.2s ease-in forwards; }
@keyframes auraSpin { to { rotate: 360deg; } }
@keyframes auraGrow { from { transform: scale(0.4); opacity: 0.4; } to { transform: scale(1.25); opacity: 1; } }
.anime-charge .core { position: absolute; width: 5cqi; height: 5cqi; left: -2.5cqi; top: -2.5cqi; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #8fe3ff 55%, rgba(40, 150, 255, 0) 72%); box-shadow: 0 0 3cqi 1cqi rgba(80, 200, 255, 0.8); animation: coreGrow 1.2s ease-in forwards; }
@keyframes coreGrow { from { transform: scale(0.2); } 85% { transform: scale(1.3); } to { transform: scale(1.1); } }
.anime-charge b { position: absolute; width: 0.7cqi; height: 0.7cqi; left: -0.35cqi; top: -0.35cqi; border-radius: 50%; background: #c8f2ff; box-shadow: 0 0 0.8cqi #6fd6ff; animation: sparkIn 0.6s var(--dl) ease-in infinite; }
@keyframes sparkIn { from { transform: rotate(var(--a)) translateY(-9cqi); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(var(--a)) translateY(0); opacity: 0; } }

/* the beam */
.anime-beam { position: absolute; z-index: 31; height: 4.2cqi; margin-top: -2.1cqi; transform-origin: 0 50%; pointer-events: none; }
.anime-beam i { position: absolute; inset: 0; border-radius: 99px; transform-origin: 0 50%;
  background: linear-gradient(180deg, rgba(60, 170, 255, 0) 0%, rgba(60, 170, 255, 0.9) 18%, #bdefff 38%, #ffffff 50%, #bdefff 62%, rgba(60, 170, 255, 0.9) 82%, rgba(60, 170, 255, 0) 100%);
  box-shadow: 0 0 2.5cqi 0.8cqi rgba(80, 190, 255, 0.85), 0 0 6cqi 2cqi rgba(60, 150, 255, 0.45); animation: beamFire var(--ms, 900ms) ease-out forwards; }
@keyframes beamFire { 0% { transform: scaleX(0) scaleY(0.6); opacity: 1; } 22% { transform: scaleX(1) scaleY(1.15); } 70% { transform: scaleX(1) scaleY(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(0); opacity: 0; } }

/* spinning orb */
.anime-orb { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.anime-orb i { position: absolute; width: 6cqi; height: 6cqi; left: -3cqi; top: -3cqi; border-radius: 50%; }
.anime-orb i:nth-child(1) { background: radial-gradient(circle, #ffffff 0 22%, #9fe6ff 45%, rgba(60, 160, 255, 0.85) 62%, rgba(60, 160, 255, 0) 72%); box-shadow: 0 0 3cqi rgba(80, 200, 255, 0.9); animation: orbPulse 0.18s ease-in-out infinite alternate, orbIn 0.8s ease-out; }
.anime-orb i:nth-child(2), .anime-orb i:nth-child(3) { width: 8cqi; height: 8cqi; left: -4cqi; top: -4cqi; background: conic-gradient(from 0deg, transparent 0 15%, rgba(200, 245, 255, 0.95) 22%, transparent 32% 65%, rgba(200, 245, 255, 0.95) 72%, transparent 82%);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 54%, #000 66%, transparent 70%); mask: radial-gradient(circle, transparent 50%, #000 54%, #000 66%, transparent 70%); animation: auraSpin 0.22s linear infinite; }
.anime-orb i:nth-child(3) { transform: rotateX(70deg); animation-duration: 0.3s; animation-direction: reverse; }
@keyframes orbPulse { to { transform: scale(1.12); } }
@keyframes orbIn { from { scale: 0.1; } }
.anime-spiral { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.anime-spiral i { position: absolute; width: 10cqi; height: 10cqi; left: -5cqi; top: -5cqi; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(160, 230, 255, 0.95) 20%, transparent 35%, rgba(160, 230, 255, 0.95) 55%, transparent 70%, rgba(160, 230, 255, 0.95) 85%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 60%, #000 70%, transparent 74%); mask: radial-gradient(circle, transparent 55%, #000 60%, #000 70%, transparent 74%); animation: spiralOut 0.9s ease-out forwards; }
.anime-spiral i:nth-child(2) { animation-delay: 0.12s; }
.anime-spiral i:nth-child(3) { animation-delay: 0.24s; }
@keyframes spiralOut { from { transform: scale(0.3) rotate(0); opacity: 1; } to { transform: scale(3) rotate(540deg); opacity: 0; } }

/* the manga hit: speed lines and a sound word */
.anime-impact { position: absolute; z-index: 32; width: 0; height: 0; pointer-events: none; }
.anime-impact .lines { position: absolute; width: 40cqi; height: 40cqi; left: -20cqi; top: -20cqi; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(10, 10, 20, 0.9) 0deg 1.6deg, transparent 1.6deg 7deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 34%, #000 62%, transparent 72%); mask: radial-gradient(circle, transparent 22%, #000 34%, #000 62%, transparent 72%); animation: linesIn 1.1s ease-out forwards; }
@keyframes linesIn { 0% { transform: scale(1.5) rotate(0); opacity: 0; } 12% { transform: scale(1) rotate(4deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(0.9) rotate(8deg); opacity: 0; } }
.anime-impact .sfx { position: absolute; left: 0; top: -9cqi; transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap; font-family: 'Outfit', 'Yu Gothic', 'Meiryo', 'Hiragino Sans', sans-serif; font-weight: 900; font-size: max(5cqi, 22px); color: #fff;
  -webkit-text-stroke: 0.5cqi #111; paint-order: stroke fill; text-shadow: 0.5cqi 0.5cqi 0 #ff3b3b; animation: sfxPop 1.1s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes sfxPop { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); opacity: 0; } 14% { transform: translate(-50%, -50%) rotate(-12deg) scale(0.95); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) rotate(-12deg) scale(1); opacity: 0; } }

/* ninja smoke */
.ninja-smoke { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.ninja-smoke i { position: absolute; width: 6cqi; height: 6cqi; left: -3cqi; top: -3cqi; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff, #c9cdd8 55%, rgba(150, 156, 172, 0) 72%); animation: smokePuff 1.1s ease-out forwards; }
.ninja-smoke i:nth-child(1) { --x: -4cqi; --y: -2cqi; } .ninja-smoke i:nth-child(2) { --x: 4cqi; --y: -2.5cqi; } .ninja-smoke i:nth-child(3) { --x: -2.5cqi; --y: 3cqi; }
.ninja-smoke i:nth-child(4) { --x: 3cqi; --y: 3cqi; } .ninja-smoke i:nth-child(5) { --x: 0; --y: -4.5cqi; } .ninja-smoke i:nth-child(6) { --x: 0; --y: 0; }
@keyframes smokePuff { 0% { transform: translate(0, 0) scale(0.3); opacity: 1; } 60% { opacity: 0.9; } 100% { transform: translate(var(--x), var(--y)) scale(1.8); opacity: 0; } }

/* thunder */
.storm-cloud { position: absolute; z-index: 33; width: 0; height: 0; pointer-events: none; }
.storm-cloud img { position: absolute; width: 11cqi; left: -5.5cqi; top: -5.5cqi; filter: brightness(0.75) drop-shadow(0 1cqi 1.5cqi rgba(0, 0, 0, 0.6)); animation: cloudIn 2s ease forwards; }
@keyframes cloudIn { 0% { transform: translateY(-3cqi) scale(0.5); opacity: 0; } 20% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.tokens .bolt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 34; pointer-events: none; overflow: visible; animation: boltFlick 0.32s steps(3) forwards; }
.bolt polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.bolt .glow { stroke: rgba(120, 200, 255, 0.85); stroke-width: 10px; filter: blur(2px); }
.bolt .core { stroke: #ffffff; stroke-width: 3px; }
@keyframes boltFlick { 0% { opacity: 1; } 50% { opacity: 0.4; } 75% { opacity: 1; } 100% { opacity: 0; } }
.zap-flash { position: absolute; inset: 0; left: 0 !important; top: 0 !important; z-index: 32; border-radius: 2cqi; background: radial-gradient(circle, rgba(140, 200, 255, 0.16), transparent 70%); pointer-events: none; animation: zapFlash 0.18s ease-out forwards; }
@keyframes zapFlash { to { opacity: 0; } }
.zap-spark { position: absolute; z-index: 33; width: 0; height: 0; pointer-events: none; }
.zap-spark i { position: absolute; width: 9cqi; height: 9cqi; left: -4.5cqi; top: -4.5cqi; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, rgba(140, 220, 255, 0.8) 35%, transparent 65%); animation: fireBall 0.45s ease-out forwards; }

/* the target's screen: manga speed lines all around */
.atk-screen .manga-lines { position: absolute; inset: -10%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(10, 10, 20, 0.85) 0deg 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(ellipse at 50% 45%, transparent 30%, #000 55%); mask: radial-gradient(ellipse at 50% 45%, transparent 30%, #000 55%); animation: linesIn 2.6s ease-out forwards; }
.atk-screen.wave, .atk-screen.orb { background: radial-gradient(circle, rgba(200, 240, 255, 0.35), rgba(40, 140, 255, 0.25)); }
.atk-screen.thunder { background: radial-gradient(circle, rgba(220, 240, 255, 0.4), rgba(20, 30, 80, 0.35)); }

/* ========== ninjas: afterimages, a landing pose and crossed sword slashes ========== */
.tokens .atk-ghost { position: absolute; z-index: 29; pointer-events: none; opacity: 0.45; filter: brightness(0.4) saturate(0.5) blur(0.3px); animation: ghostFade 0.38s linear forwards; }
@keyframes ghostFade { to { opacity: 0; } }
.ninja-pose { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.ninja-pose img { position: absolute; width: 4.4cqi; left: -2.2cqi; top: -2.6cqi; filter: drop-shadow(0 0.6cqi 0.8cqi rgba(0, 0, 0, 0.5)); animation: ninjaLand 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes ninjaLand { from { transform: translateY(-1.5cqi) scale(1.15); } }
.ninja-slash { position: absolute; z-index: 33; width: 0; height: 0; pointer-events: none; }
.ninja-slash i { position: absolute; width: 10cqi; height: 1cqi; left: -5cqi; top: -0.5cqi; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #ffffff 30%, #d8f3ff 50%, #ffffff 70%, transparent); box-shadow: 0 0 1.4cqi rgba(160, 220, 255, 0.9); transform-origin: center; animation: slashCut 0.45s ease-out forwards; }
.ninja-slash i:nth-child(1) { --r: 35deg; }
.ninja-slash i:nth-child(2) { --r: -35deg; animation-delay: 0.08s; }
@keyframes slashCut { 0% { transform: rotate(var(--r)) scaleX(0); opacity: 1; } 35% { transform: rotate(var(--r)) scaleX(1.1); opacity: 1; } 100% { transform: rotate(var(--r)) scaleX(1.2) scaleY(0.2); opacity: 0; } }
.ninja-smoke.small i { width: 3.6cqi; height: 3.6cqi; left: -1.8cqi; top: -1.8cqi; }

/* ========== the full ninja move ========== */
.ninja-actor { position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.ninja-actor img { position: absolute; width: 5.2cqi; left: -2.6cqi; top: -3.4cqi; transform: scaleX(var(--face, 1)); transform-origin: 50% 90%; filter: drop-shadow(0 0.6cqi 0.8cqi rgba(0, 0, 0, 0.55)); }
.ninja-actor.crouch img { animation: ninjaPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes ninjaPop { 0% { transform: scaleX(var(--face, 1)) scale(0.2, 0.2); } 60% { transform: scaleX(var(--face, 1)) scale(1.1, 0.8); } 100% { transform: scaleX(var(--face, 1)); } }
.ninja-actor.running img { animation: ninjaRun 0.14s ease-in-out infinite alternate; }
@keyframes ninjaRun { from { transform: scaleX(var(--face, 1)) translateY(0) rotate(calc(var(--face, 1) * 8deg)); } to { transform: scaleX(var(--face, 1)) translateY(-0.9cqi) rotate(calc(var(--face, 1) * 14deg)); } }
.ninja-actor.flip img { animation: ninjaFlip 0.7s ease-in-out; transform-origin: 50% 55%; }
@keyframes ninjaFlip { from { transform: scaleX(var(--face, 1)) rotate(0); } to { transform: scaleX(var(--face, 1)) rotate(360deg); } }
.ninja-actor.clone img { filter: brightness(0.55) saturate(0.6) drop-shadow(0 0 0.8cqi rgba(120, 90, 200, 0.8)); opacity: 0.9; }
.ninja-actor.strike img { animation: ninjaStrike 0.3s ease-out; }
@keyframes ninjaStrike { 0% { transform: scaleX(var(--face, 1)) translateX(0); } 40% { transform: scaleX(var(--face, 1)) translateX(1.6cqi) rotate(12deg); } 100% { transform: scaleX(var(--face, 1)) translateX(0); } }
.ninja-actor.ghost { z-index: 30; }
.ninja-actor.ghost img { opacity: 0.4; filter: brightness(0.3) saturate(0.4) blur(0.4px); animation: ghostFade 0.36s linear forwards; }
.ninja-bigslash { position: absolute; z-index: 33; width: 0; height: 0; pointer-events: none; }
.ninja-bigslash i { position: absolute; width: 26cqi; height: 1.4cqi; left: -13cqi; top: -0.7cqi; border-radius: 50%; transform: rotate(-28deg) scaleX(0);
  background: linear-gradient(90deg, transparent, #ffffff 20%, #fff7d6 50%, #ffffff 80%, transparent); box-shadow: 0 0 2cqi 0.4cqi rgba(255, 240, 180, 0.9), 0 0 5cqi rgba(255, 90, 90, 0.6); animation: bigSlash 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes bigSlash { 0% { transform: rotate(-28deg) scaleX(0); opacity: 1; } 25% { transform: rotate(-28deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-28deg) scaleX(1.1) scaleY(0.1); opacity: 0; } }
/* the target's screen: one katana slash across the whole screen */
.atk-screen .screen-slash { position: absolute; left: -10%; top: 48%; width: 120%; height: 6px; transform: rotate(-24deg) scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent); box-shadow: 0 0 18px 4px rgba(255, 240, 200, 0.9), 0 0 60px 10px rgba(255, 80, 80, 0.45); animation: screenSlash 1.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes screenSlash { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 18% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1) scaleY(0.2); opacity: 0; } }
.anime-impact.below .sfx { top: 9cqi; }
.ninja-actor img { width: 6cqi; left: -3cqi; top: -4cqi; }

/* ========== smoothness: cheaper effects that look the same ========== */
/* 1. no live blur behind panels and the phone action bar (they are nearly opaque anyway) */
.panel { backdrop-filter: none; background: linear-gradient(180deg, rgba(28, 32, 64, 0.72), rgba(18, 21, 46, 0.72)); }
.action-bar { backdrop-filter: none !important; background: rgba(16, 19, 52, 0.97) !important; }
@media (max-width: 900px), (pointer: coarse) {
  .modal-back, .end-overlay { backdrop-filter: none; background: rgba(4, 5, 16, 0.82); }
}
/* 2. always-on glows: fade a pre-drawn glow layer (opacity runs on the GPU) instead of repainting box-shadows */
@keyframes glowPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.tb-main { position: relative; }
.tb-main.you { animation: none; }
.tb-main.you::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity;
  box-shadow: 0 0 0 0.35cqi color-mix(in srgb, var(--c) 45%, transparent), 0 0 3cqi color-mix(in srgb, var(--c) 55%, transparent); animation: glowPulse 1.6s ease-in-out infinite; }
.tile.pending { animation: none; }
.tile.pending::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity;
  box-shadow: 0 0 0 0.4cqi #fff, 0 0 2.5cqi rgba(255, 255, 255, 0.6); animation: glowPulse 1s ease-in-out infinite; }
.tile.t-jail.occupied .cell { animation: none; box-shadow: inset 0 0 1.6cqi rgba(40, 120, 255, 0.65); }
.tile.t-jail.occupied .cell::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; will-change: opacity;
  box-shadow: inset 0 0 1.6cqi rgba(255, 40, 70, 0.75); animation: glowPulse 1.6s ease-in-out infinite; }
.event-pill { animation: none; }
.event-pill::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity;
  box-shadow: 0 0 0 3px rgba(255, 147, 48, 0.25), 0 0 14px rgba(255, 147, 48, 0.45); animation: glowPulse 2s ease-in-out infinite; }
.trade-row.inc { position: relative; animation: none; }
.trade-row.inc::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px rgba(255, 92, 168, 0.18); animation: glowPulse 1.8s infinite; }
/* 3. moving pieces get their own GPU layer; tiles keep their layout work to themselves */
.token { will-change: transform; }
.tile { contain: layout style; }

/* ========== Smooth mode (⚙ menu, or offered automatically on slow devices) ========== */
body.smooth .center-map, body.smooth .center::after { display: none !important; }
body.smooth .center-logo .lg-dash, body.smooth .token.current, body.smooth .dice-tray, body.smooth .tile.t-jail.occupied .cell::after,
body.smooth .cd-man, body.smooth .cd-coffin { animation: none !important; }
body.smooth .tile .ic, body.smooth .token img, body.smooth .landmark, body.smooth .atk-proj, body.smooth .ic.corner-ic { filter: none !important; }
body.smooth .speed-puff, body.smooth .atk-smoke, body.smooth .atk-ghost, body.smooth .ninja-actor.ghost { display: none !important; }
body.smooth .tile { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .token.current, .center-logo .lg-dash, .tb-main.you::after, .tile.pending::before { animation: none !important; }
}
.smooth-hint { display: flex; gap: 8px; align-items: center; }

/* ========== live auction card ========== */
.auction-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 12px; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, rgba(40, 32, 12, 0.96), rgba(20, 17, 36, 0.97)); border: 1px solid rgba(255, 201, 60, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 230, 160, 0.15); font-size: 14px; }
.auction-card.winning { border-color: rgba(61, 220, 132, 0.75); }
.auc-head { display: flex; align-items: center; justify-content: space-between; }
.auc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; color: #ff8a8a; }
.auc-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: livePulse 1s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.25; } }
.auc-secs { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--warn); padding: 2px 9px; border-radius: 99px; background: rgba(255, 201, 60, 0.12); }
.auction-card.hot .auc-secs { color: #fff; background: #ff3b5c; animation: livePulse 0.5s ease-in-out infinite; }
.auc-deed { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; padding: 8px 10px 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border-left: 5px solid var(--g); }
.auc-pic .flag-xs, .auc-pic .ic { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.auc-name { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.auc-name small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.auc-name b { font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-list { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; line-height: 1.1; }
.auc-list small { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.auc-blurb { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.auc-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.auc-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #3ddc84, #ffc93c); box-shadow: 0 0 10px rgba(255, 201, 60, 0.6); transition: width 0.2s linear; }
.auc-bar i.hot { background: linear-gradient(90deg, #ff3b5c, #ff8a3d); box-shadow: 0 0 10px rgba(255, 59, 92, 0.8); }
.auc-lead { display: flex; align-items: center; gap: 10px; }
.auc-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.auc-who small { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.auction-card.winning .auc-who small { color: var(--good); }
.auc-amount { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; color: #ffd76a; text-shadow: 0 0 18px rgba(255, 200, 60, 0.35); }
.auc-amount.bump { animation: aucBump 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes aucBump { 0% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }
.auction-card .going { margin: -4px 0 -2px; text-align: center; min-height: 1.1em; }
.auc-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.auc-chip { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px 6px; border-radius: 12px; cursor: pointer; color: var(--text); font: inherit;
  border: 1px solid rgba(255, 201, 60, 0.45); background: linear-gradient(180deg, rgba(255, 201, 60, 0.18), rgba(255, 201, 60, 0.06)); transition: transform 0.1s, background 0.15s; }
.auc-chip b { font-size: 15px; font-weight: 900; }
.auc-chip small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.auc-chip:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 201, 60, 0.32), rgba(255, 201, 60, 0.12)); transform: translateY(-1px); }
.auc-chip:active:not(:disabled) { transform: scale(0.96); }
.auc-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.auc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.auc-cash { display: inline-flex; align-items: center; gap: 5px; }
.auc-cash b { color: var(--good); }
.auc-hist { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.auc-hist i { font-style: normal; opacity: 0.5; }
.action-bar .auction-card { max-width: none; }