/* theme.css - the house style, loaded last so it wins over the older sheets.
   Same fonts and gold-on-black palette as always; solid panels instead of glass, hard shadows,
   square-ish corners that vary by role, slider menus. */


:root {
  --ink: #0e0c0a;          /* lacquered wood, almost black */
  --ink-2: #17130f;
  --ink-3: #221c16;
  --felt: #2a2218;
  --felt-2: #d4af37;
  --brass: #d4af37;
  --brass-2: #f3d77a;
  --ivory: #f2ede0;
  --suit-red: #e84a5a;
  --line: rgba(241, 233, 216, .14);
  --line-2: rgba(241, 233, 216, .28);
  --gold: var(--brass);
  --gold-2: var(--brass-2);
  --text: var(--ivory);
  --muted: #a69f8e;
  --panel: rgba(18, 15, 12, .96);
  --panel-border: rgba(201, 162, 74, .32);
  --display: Georgia, 'Times New Roman', serif;
  --label: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

body { background: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--brass); color: var(--ink); }

/* fine grain over every solid surface, so nothing looks like a flat UI kit fill */
.panel, .dm-tile:not(.primary), #loading, .toast, #info, .tb-btn, .plate, #action-panel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- buttons */
.btn {
  border-radius: 6px; border: 1px solid var(--line-2); background-color: var(--ink-3); box-shadow: 0 2px 0 rgba(0,0,0,.6);
  font-weight: 600; letter-spacing: .02em; transition: transform .18s var(--ease-out), background-color .18s, border-color .18s, color .18s;
}
.btn::after { display: none; }
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--brass); box-shadow: 0 3px 0 rgba(0,0,0,.6); background-color: #2b241c; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.btn.primary { background: var(--brass); color: var(--ink); border-color: var(--brass-2); box-shadow: 0 2px 0 #7a5d1f; }
.btn.primary:hover:not(:disabled) { background: var(--brass-2); box-shadow: 0 3px 0 #7a5d1f; filter: none; }
.btn small { letter-spacing: 0; }

/* ---------------------------------------------------------------- panels and forms */
.panel {
  background-color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.7); position: relative;
}
.panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--felt-2), var(--brass) 50%, var(--felt-2)); pointer-events: none; }
.panel h2 { font: 700 28px/1.1 var(--display); color: var(--gold-2); }
.panel h3 { font: 700 13px var(--label); letter-spacing: .08em; color: var(--brass); }
.panel label { font-size: 14px; }
.panel input[type=number], .panel input[type=text], .panel select, .pname, .panel input:not([type]) {
  border-radius: 4px; background: #0a0907; border: 1px solid var(--line-2); padding: 9px 10px; transition: border-color .15s, box-shadow .15s;
}
.panel input:focus, .panel select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(201,162,74,.18); }

/* sliders: a felt groove with a brass chip as the thumb */
input[type=range] { -webkit-appearance: none; appearance: none; height: 26px; background: transparent; cursor: pointer; accent-color: var(--brass); }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--brass) var(--fill, 50%), #0a0907 var(--fill, 50%)); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px var(--line); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #0a0907; box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px var(--line); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brass); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 0;
  background: radial-gradient(circle, var(--ivory) 0 32%, var(--suit-red) 33% 58%, var(--ivory) 59% 66%, var(--suit-red) 67%);
  box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 2px var(--ink); transition: transform .15s var(--ease-spring);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: radial-gradient(circle, var(--ivory) 0 32%, var(--suit-red) 33% 58%, var(--ivory) 59% 66%, var(--suit-red) 67%);
  box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 2px var(--ink);
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type=checkbox] { accent-color: var(--felt-2); }

.mode-card { border-radius: 4px !important; border: 1px solid var(--line) !important; background: var(--ink-3) !important; transition: transform .2s var(--ease-out), border-color .2s !important; }
.mode-card:hover { transform: translateY(-2px); border-color: var(--line-2) !important; }
.mode-card.sel { border-color: var(--brass) !important; background: linear-gradient(180deg, rgba(201,162,74,.16), rgba(201,162,74,.04)) var(--ink-3) !important; box-shadow: inset 0 0 0 1px var(--brass) !important; }
.mode-card b { font-family: var(--display); font-weight: 600; }

/* ---------------------------------------------------------------- HUD */
.tb-btn { border-radius: 6px; background-color: rgba(14,12,10,.88); border: 1px solid var(--line); backdrop-filter: none; transition: border-color .15s, transform .15s var(--ease-out); }
.tb-btn:hover { border-color: var(--brass); transform: translateY(-1px); }
#info { border-radius: 4px; background-color: rgba(14,12,10,.88); border: 1px solid var(--line); border-left: 0; box-shadow: inset 3px 0 0 var(--felt-2); backdrop-filter: none; }
.info-mode { font: 700 11px var(--label); letter-spacing: .1em; }
.info-main { font-family: var(--label); font-size: 16px; letter-spacing: .02em; }
.plate { border-radius: 6px 26px 26px 6px; background-color: rgba(14,12,10,.92); }
.plate-stack, .bet-label, .pot-label { font-family: var(--label); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.plate-stack { font-size: 16px; }
.pot-label { border-radius: 4px; }
.pot-label span { font-family: var(--label); }
.banner { font-family: var(--display); font-weight: 800; letter-spacing: .04em; text-transform: none; }
.toast { border-radius: 4px; background-color: var(--ink-2); border: 1px solid var(--line-2); backdrop-filter: none; box-shadow: 0 10px 30px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------- loading curtain */
#loading {
  gap: 14px; background-color: #0a0907;
  background: radial-gradient(ellipse at center, #1b1310 0%, #050404 70%);
  transition: opacity .45s ease, transform .6s var(--ease-out);
}
#loading.leaving { transform: scale(1.04); }
.load-deck { position: relative; width: 160px; height: 110px; margin-bottom: 6px; }
.load-deck i {
  position: absolute; left: 50%; bottom: 0; width: 56px; height: 80px; margin-left: -28px; border-radius: 5px;
  background: repeating-linear-gradient(45deg, #8e1f1b 0 4px, #a8302a 4px 8px); border: 3px solid var(--ivory); box-shadow: 0 6px 14px rgba(0,0,0,.6);
  transform-origin: 50% 120%; animation: deal 2.4s var(--ease-out) infinite;
}
.load-deck i:nth-child(1) { --r: -28deg; animation-delay: 0s; }
.load-deck i:nth-child(2) { --r: -14deg; animation-delay: .12s; }
.load-deck i:nth-child(3) { --r: 0deg; animation-delay: .24s; }
.load-deck i:nth-child(4) { --r: 14deg; animation-delay: .36s; }
.load-deck i:nth-child(5) { --r: 28deg; animation-delay: .48s; }
@keyframes deal {
  0% { transform: translateY(30px) rotate(0) scale(.9); opacity: 0; }
  18%, 70% { transform: translateY(0) rotate(var(--r)) scale(1); opacity: 1; }
  100% { transform: translateY(-6px) rotate(0) scale(.96); opacity: 0; }
}
.load-logo { display: flex; gap: 14px; font-size: 26px; letter-spacing: 0; }
.load-logo span, .dm-suits i, .logo .suits i {
  font-family: 'DejaVu Sans', 'Segoe UI Symbol', 'Arial Unicode MS', serif; font-style: normal; font-size: 1em; line-height: 1;
  color: var(--ivory); -webkit-text-stroke: 1.5px #fff; paint-order: stroke fill;
  text-shadow: 0 0 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 0 3px 8px rgba(0,0,0,.6);
}
.load-logo span { color: #111; }
.load-logo span.r, .dm-suits i.r, .logo .suits i.r { color: var(--suit-red); }
.load-title { font: 700 clamp(44px, 8vw, 64px)/1 var(--display); letter-spacing: 10px; }
.load-sub { font: 500 italic 20px var(--display); letter-spacing: .02em; text-transform: none; color: var(--brass-2); }
.load-meter { display: flex; align-items: center; gap: 12px; width: min(360px, 80vw); }
.load-bar { flex: 1; height: 4px; border-radius: 0; background: rgba(241,233,216,.1); }
.load-bar i { background: var(--brass); transition: none; }
.load-pct { font: 700 15px var(--label); color: var(--brass-2); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.load-text { font: 600 14px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 18px; }
.load-tip { max-width: min(460px, 86vw); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; color: #cfc6b4; font-size: 14px; line-height: 1.5; min-height: 40px; animation: tipIn .6s .3s var(--ease-out) both; }
#loading.done .load-tip { animation: none; }
@keyframes tipIn { from { opacity: 0; transform: translateY(8px); } }
#loading[data-kind="exit"] .load-deck i { animation-direction: reverse; }

/* ---------------------------------------------------------------- deck menu (slider) */
.screen.menu.deck { align-items: stretch; justify-content: stretch; padding: 0; background: linear-gradient(180deg, rgba(10,9,7,.15) 0%, rgba(10,9,7,0) 30%, rgba(10,9,7,.55) 62%, rgba(10,9,7,.92) 100%); }
.deck-menu { width: 100%; min-height: 100%; display: grid; grid-template-rows: 1fr auto auto; padding: max(24px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom)); }
.dm-head { align-self: start; padding: 0 clamp(18px, 5vw, 64px); }
.dm-head.sub { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: end; }
.dm-suits { display: flex; gap: 10px; font-size: 22px; margin-bottom: 4px; }
.dm-suits i { font-style: normal; color: #111; display: inline-block; animation: suitDrop .7s var(--ease-spring) backwards; }
.dm-suits i:nth-child(2) { animation-delay: .06s; } .dm-suits i:nth-child(3) { animation-delay: .12s; } .dm-suits i:nth-child(4) { animation-delay: .18s; }
@keyframes suitDrop { from { opacity: 0; transform: translateY(-14px) rotate(-20deg); } }
.dm-logo {
  margin: 0; font: 700 clamp(48px, 8.5vw, 104px)/.95 var(--display); letter-spacing: .08em;
  background: linear-gradient(180deg, #fff6d0 0%, #f3d77a 35%, #d4af37 60%, #7d5e17 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)); animation: logoIn .9s var(--ease-out) backwards;
}
@keyframes logoIn { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.dm-tag { margin-top: 10px; font: italic 20px var(--display); letter-spacing: 6px; text-transform: uppercase; color: var(--text); opacity: .85; text-shadow: 0 2px 6px #000; animation: fadeUp .8s .3s backwards; }
.dm-back { grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 9px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(14,12,10,.85); font: 700 14px var(--label); letter-spacing: .08em; text-transform: uppercase; transition: border-color .15s, transform .15s var(--ease-out); }
.dm-back:hover { border-color: var(--brass); transform: translateX(-2px); }
.dm-crumb { font: 600 12px var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.dm-head.sub h1 { margin: 0; font: 700 clamp(34px, 5vw, 52px)/1 var(--display); color: var(--gold-2); text-shadow: 0 3px 0 #000, 0 8px 30px rgba(0,0,0,.8); animation: fadeUp .6s var(--ease-out) backwards; }

.dm-rail {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 26px clamp(18px, 5vw, 64px) 18px; scroll-padding: 0 clamp(18px, 5vw, 64px); scrollbar-width: none; cursor: grab;
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 5vw, 64px), #000 calc(100% - clamp(18px, 5vw, 64px)), transparent 100%);
}
.dm-rail::-webkit-scrollbar { display: none; }
.dm-rail.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.dm-rail.dragging .dm-tile { pointer-events: none; }
.dm-tile {
  position: relative; flex: 0 0 clamp(200px, 22vw, 260px); height: clamp(200px, 32vh, 290px); scroll-snap-align: start; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 18px 20px; overflow: hidden;
  border-radius: 10px 10px 3px 3px; border: 1px solid var(--line); background-color: var(--ink-2); color: var(--ivory);
  box-shadow: 0 2px 0 rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.55);
  transition: transform .35s var(--ease-out), border-color .25s, background-color .25s, box-shadow .35s var(--ease-out);
  animation: tileIn .7s var(--ease-out) backwards; animation-delay: calc(.08s + var(--i) * .07s);
}
@keyframes tileIn { from { opacity: 0; transform: translateX(60px) rotate(2deg); } }
.dm-tile::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(241,233,216,.08); border-radius: 6px 6px 2px 2px; pointer-events: none; transition: border-color .25s; }
.dm-tile .dm-suit {
  position: absolute; top: -18px; right: -6px; font: 600 150px/1 var(--display); color: rgba(241,233,216,.05);
  transition: transform .5s var(--ease-out), color .3s;
}
.dm-tile.red .dm-suit { color: rgba(200,53,47,.08); }
.dm-txt { position: relative; display: flex; flex-direction: column; gap: 6px; }
.dm-txt b { font: 700 clamp(20px, 2vw, 26px)/1.1 var(--display); }
.dm-txt small { font-size: 14px; line-height: 1.35; color: #bfb5a2; }
.dm-go { position: absolute; right: 16px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ivory);
  opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .3s var(--ease-out), background-color .2s, color .2s; }
.dm-tile.cur, .dm-tile:focus-visible { border-color: var(--brass); background-color: #1d1812; transform: translateY(-8px); box-shadow: 0 2px 0 rgba(0,0,0,.7), 0 26px 50px rgba(0,0,0,.65); outline: none; }
.dm-tile.cur::before { border-color: rgba(201,162,74,.35); }
.dm-tile.cur .dm-suit { transform: rotate(-8deg) scale(1.06); color: rgba(201,162,74,.14); }
.dm-tile.red.cur .dm-suit { color: rgba(200,53,47,.22); }
.dm-tile.cur .dm-go { opacity: 1; transform: none; }
.dm-tile.primary { background: linear-gradient(180deg, #e9c869, #b8902c); color: #1d1404; border-color: #f3d77a; }
.dm-tile.primary.cur { background: linear-gradient(180deg, #f3d77a, #c9a23f); border-color: #fff3c4; }
.dm-tile.primary .dm-txt small { color: #3a2a08; }
.dm-tile.primary .dm-suit { color: rgba(29,20,4,.12) !important; }
.dm-tile.primary .dm-go { background: #1d1404; color: var(--gold-2); border-color: #1d1404; }
.dm-tile:disabled { opacity: .45; cursor: default; transform: none; }
.dm-tile:active:not(:disabled) { transform: translateY(-4px) scale(.985); }

.dm-nav { display: flex; align-items: center; gap: 14px; padding: 4px clamp(18px, 5vw, 64px) 0; animation: fadeUp .6s .4s backwards; }
.dm-nav.few .dm-arrow { opacity: .55; }
.dm-arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(14,12,10,.85); color: var(--ivory); cursor: pointer; transition: border-color .15s, transform .15s var(--ease-out); }
.dm-arrow:hover { border-color: var(--brass); transform: scale(1.06); }
.dm-progress { flex: 1; max-width: 240px; height: 2px; background: var(--line); }
.dm-progress i { display: block; height: 100%; background: var(--brass); transform-origin: left; transition: transform .45s var(--ease-out); }

/* old main-menu logo, still used by a few screens */
.logo h1 { font-family: var(--display); font-weight: 800; letter-spacing: 0; }
.logo .suits i { color: #111; }

@media (max-width: 700px), (max-height: 520px) {
  .dm-tile { flex-basis: 70vw; height: clamp(150px, 30vh, 220px); }
  .dm-tile .dm-suit { font-size: 110px; }
  .dm-nav .dm-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-tile, .dm-suits i, .dm-logo, .dm-tag, .dm-nav, .load-deck i, .load-tip { animation: none !important; }
}

/* story: white-out at the end of the dive into a city */
.warp-flash { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, #fff 0%, #fff6dc 35%, #ffe2a0 70%, #f6c968 100%); transition: opacity .24s ease-in; }
.warp-flash.on { opacity: 1; }
.warp-flash.off { opacity: 0; transition: opacity .65s ease-out; }

/* online table games: who is at the table */
#ts-panel { position: fixed; left: 12px; top: 64px; z-index: 12; width: 230px; background-color: rgba(14,12,10,.92); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 3px 0 0 var(--felt-2), 0 10px 30px rgba(0,0,0,.5); font-size: 13px; pointer-events: none; }
#ts-panel .ts-head { padding: 8px 12px 6px; font: 700 12px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); border-bottom: 1px solid var(--line); }
#ts-panel .ts-list { display: flex; flex-direction: column; padding: 4px 0; }
#ts-panel .ts-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 5px 12px; }
#ts-panel .ts-row.me { background: rgba(201,162,74,.08); }
#ts-panel .ts-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ts-panel .ts-chips { font: 700 15px var(--label); text-align: right; font-variant-numeric: tabular-nums; }
#ts-panel .ts-state { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
#ts-panel .st-ready .ts-state { color: #7fd39b; }
#ts-panel .st-out .ts-state, #ts-panel .st-sitout .ts-state { color: #e8848c; }
#ts-panel .st-out { opacity: .5; }
#ts-panel .ts-net { font-style: normal; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
#ts-panel .ts-net.up { color: #7fd39b; } #ts-panel .ts-net.down { color: #e8848c; }
#ts-panel .ts-status { padding: 0 12px; font-weight: 600; color: var(--brass-2); }
#ts-panel .ts-status:not(:empty) { padding: 7px 12px 9px; border-top: 1px solid var(--line); }
#ts-panel .ts-status.warn { color: #ffd9dc; background: #2a0d0f; }
.ts-final { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.ts-final th, .ts-final td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.ts-final td:last-child, .ts-final th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ts-final tr.me td { color: var(--brass-2); font-weight: 700; }
@media (max-width: 700px) { #ts-panel { top: auto; bottom: 8px; left: 8px; width: 180px; font-size: 12px; } }

/* ---------------------------------------------------------------- one material for every panel in the game
   (older sheets used glassy 14-18px rounded boxes with blur and glow everywhere) */
.modal-box, .st-panel, .bac-panel, .bj-panel, .cg-panel, .car-panel, .hb-panel, .ult-panel, .sbc-panel, .s21-panel, .tcp-panel, .war-panel,
.ol-card, .ol-room, .ship, .dice-board, .arc-bar, .arc-msg, #rlt-ui .rlt-msg, #history, #action-panel, .wizard .wiz-summary {
  border-radius: 4px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background-color: var(--ink-2) !important; border-color: var(--line) !important;
}
.bac-panel, .bj-panel, .cg-panel, .car-panel, .hb-panel, .ult-panel, .sbc-panel, .s21-panel, .tcp-panel, .war-panel, #action-panel {
  box-shadow: inset 0 3px 0 var(--felt-2), 0 18px 44px rgba(0,0,0,.6) !important;
}
.modal-box { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.7) !important; }
.modal-box h2, .modal-box h3, .st-panel h2, .st-slot-name, .st-who b { font-family: var(--display) !important; color: var(--ivory) !important; }
#modal { backdrop-filter: none; background: rgba(6,5,4,.66); }
.st-card, .st-slot, .st-daily, .st-m { border-radius: 4px !important; backdrop-filter: none !important; background-color: rgba(14,12,10,.92) !important; border-color: var(--line) !important; }
.st-daily { box-shadow: inset 3px 0 0 var(--brass) !important; }
.st-bar, .st-bar i { border-radius: 0 !important; box-shadow: none !important; }
.st-bar i { background: var(--brass) !important; }
.st-screen { backdrop-filter: none; background: rgba(6,5,4,.86); }
.ol-card.gold { border-color: var(--gold) !important; }
.ol-seg, .set-tabs, .act { border-radius: 4px !important; }
.act { font-family: var(--label) !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; font-size: 16px !important; }
#my-chips, #hand-strength { border-radius: 4px !important; backdrop-filter: none !important; }
#my-chips b { font-family: var(--label); font-variant-numeric: tabular-nums; }
.screen.dim { backdrop-filter: none; background: rgba(6,5,4,.7); }

/* ---------------------------------------------------------------- winning streak: real-time fire behind the photo (grows with --heat 0..1) */
.plate-avatar { position: relative; }
.plate.streak .plate-avatar, .tg-badge.streak .plate-avatar { z-index: 1; }
.plate-flame { position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: 260%; height: 260%; transform: translate(-50%, -50%); }
.plate.streak, .tg-badge.streak { border-color: #ff8a1e; box-shadow: 0 0 calc(10px + var(--heat, 0) * 26px) rgba(255, 120, 30, .5); }

#streak-banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; text-align: center; z-index: 6; }
#streak-banner small { display: block; font: 700 14px 'Segoe UI', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffd9a0; text-shadow: 0 2px 8px #000; }
#streak-banner b { display: block; font: 700 clamp(36px, 6vw, 64px)/1.05 Georgia, serif; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff4b0, #ffb02e 50%, #e8361b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(232, 54, 27, .6)) drop-shadow(0 2px 2px #000); }
#streak-banner.show { animation: streakIn 2.6s cubic-bezier(.34, 1.4, .64, 1) forwards; }
@keyframes streakIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); }
}

/* ---------------------------------------------------------------- short stack: red heartbeat on the photo */
.plate.low-chips .plate-avatar, .tg-badge.low-chips .plate-avatar { animation: heartbeat 1.1s ease-in-out infinite; }
.plate.low-chips .plate-stack, .tg-badge.low-chips .plate-stack { color: #ff8a8a; }
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px #e84a5a, 0 0 0 0 rgba(232, 54, 27, 0); }
  12% { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px #ff3b3b, 0 0 18px 6px rgba(232, 54, 27, .75); }
  24% { transform: scale(1); }
  32% { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px #ff3b3b, 0 0 12px 4px rgba(232, 54, 27, .55); }
}
@media (prefers-reduced-motion: reduce) { .plate.low-chips .plate-avatar, .tg-badge.low-chips .plate-avatar { animation: none; } }

/* chip leader by more than a third: a spinning 3D gold crown over the photo */
.plate-crown { position: absolute; right: -4px; top: -19px; width: 26px; height: 26px; transform: rotate(20deg) scale(0); transition: transform .45s cubic-bezier(.34, 1.6, .64, 1);
  filter: drop-shadow(0 0 4px rgba(255, 215, 90, .95)) drop-shadow(0 0 10px rgba(255, 190, 40, .6)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); z-index: 3; pointer-events: none; }
.plate-crown.show { transform: rotate(20deg) scale(1); animation: crownGlow 2.2s ease-in-out infinite; }
@keyframes crownGlow { 50% { filter: drop-shadow(0 0 7px rgba(255, 230, 120, 1)) drop-shadow(0 0 16px rgba(255, 200, 60, .85)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); } }

/* table games: the player's corner badge (same flame / crown / heartbeat as the poker plates) */
.tg-badge { position: fixed; left: 12px; top: 186px; z-index: 11; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; min-width: 150px;
  background-color: rgba(14,12,10,.92); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 6px 26px 26px 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; transition: border-color .3s, box-shadow .3s; }
.tg-badge .plate-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #2a2018; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px var(--gold); }
.tg-badge .plate-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tg-badge .plate-name { font-weight: 600; font-size: 13.5px; }
.tg-badge .plate-stack { font: 700 16px Georgia, serif; color: var(--gold-2); font-variant-numeric: tabular-nums; }
body.table-game #ts-panel { top: 256px; }

/* camera lock button: lit while the camera is fixed on your seat */
#btn-cam.on { border-color: var(--gold); color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold); }

/* WebGL turned off: the loading screen explains how to fix it */
#loading.nogl .load-tip { max-width: min(560px, 90vw); text-align: left; font-size: 15px; animation: none; }
#loading.nogl .load-tip p { margin: 0 0 10px; }
.nogl-steps { margin: 0 0 16px; padding-left: 20px; line-height: 1.6; }
#loading.nogl .btn { margin: 0 auto; display: flex; }

/* ---------------------------------------------------------------- trophies, ranks, profile */
.trophy-ico { display: inline-block; width: 30px; height: 30px; flex: none; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--tc, #c9803c); box-shadow: inset 0 -3px 0 #0004, 0 0 0 2px #0006; }
.trophy-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -55%);
  background: #0007; clip-path: polygon(0 0, 100% 0, 85% 55%, 60% 70%, 60% 85%, 80% 100%, 20% 100%, 40% 85%, 40% 70%, 15% 55%); }
.t-bronze { --tc: #c9803c; } .t-silver { --tc: #cfd6e0; } .t-gold { --tc: #ffd24a; } .t-platinum { --tc: #bfe6ff; }
.trophy-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; gap: 12px; align-items: center;
  padding: 10px 16px 10px 12px; border-radius: 14px; background: rgba(16,12,9,.96); border: 1px solid var(--tc); color: #f4ead0;
  box-shadow: 0 10px 30px #0008, 0 0 18px color-mix(in srgb, var(--tc) 40%, transparent); animation: tt-in .35s ease-out; max-width: calc(100vw - 32px); }
.trophy-toast > div { display: flex; flex-direction: column; } .trophy-toast small { opacity: .7; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.trophy-toast span { font-size: 12px; opacity: .8; } .trophy-toast.out { opacity: 0; transition: opacity .5s; }
@keyframes tt-in { from { opacity: 0; transform: translate(-50%, -12px); } }
.rank-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 700; color: #160f08; background: var(--rc, #c9803c); }
.r-bronze { --rc: #c9803c; } .r-silver { --rc: #cfd6e0; } .r-gold { --rc: #ffd24a; } .r-platinum { --rc: #9fe0e8; } .r-diamond { --rc: #8ec5ff; }
.r-master { --rc: #c99bff; } .r-legend { --rc: #ff8a5c; } .r-creator { --rc: linear-gradient(90deg, #ffd24a, #ff8a5c, #c99bff, #8ec5ff); background: var(--rc); }
.profile-panel { max-height: calc(100vh - 40px); overflow-y: auto; }
.pr-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pr-avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font: 700 30px Georgia, serif; background: #2a2016; border: 3px solid #6b5a40; }
.pr-avatar.plat, body.platinum .plate.me .plate-avatar, body.platinum .tg-badge .plate-avatar { border-color: #e9f6ff; box-shadow: 0 0 0 3px #ffd24a, 0 0 18px #bfe6ffaa; }
.pr-who { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pr-who h2 { margin: 0; } .pr-creator { color: #ffd24a; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.pr-stats { display: flex; gap: 18px; } .pr-stats div { display: flex; flex-direction: column; align-items: center; } .pr-stats b { font-size: 1.4em; }
.pr-stats small { opacity: .7; font-size: 11px; }
.pr-bar { height: 6px; border-radius: 3px; background: #ffffff1a; margin: 14px 0 6px; overflow: hidden; } .pr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9803c, #ffd24a, #bfe6ff); }
.pr-plat { color: #bfe6ff; font-weight: 700; text-align: center; margin: 4px 0; }
.pr-trophies h3 { margin: 16px 0 8px; } .pr-trophies h3 small { opacity: .6; font-weight: 400; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tr-tile { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: #ffffff0a; border: 1px solid #ffffff14; opacity: .45; filter: grayscale(1); }
.tr-tile.on { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--tc) 60%, transparent); }
.tr-tile b { font-size: 13px; } .tr-tile small { font-size: 11px; opacity: .75; }

/* ---------------------------------------------------------------- the creator: Clawd with golden wings */
:root { --cr-gold: linear-gradient(135deg, #fff1a8, #f4c235 40%, #b87908 75%, #ffd24a); }
.cr-wing { position: absolute; top: -40%; width: 110%; height: 110%; background: url(assets/creator/wing.png) center / contain no-repeat;
  pointer-events: none; z-index: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.cr-wing.r { right: -88%; transform: rotate(-6deg); }
.cr-wing.l { left: -88%; transform: scaleX(-1) rotate(-6deg); }
/* the photo circle: same gold as the wings, a thick ring, never squashed */
.creator .plate-avatar, .creator.tg-badge .plate-avatar, .pr-avatar.creator, .crew.creator .crew-av {
  position: relative; flex: none; aspect-ratio: 1; border-radius: 50%; border: none; overflow: visible;
  background: var(--cr-gold); padding: 5px; box-sizing: border-box; box-shadow: 0 0 14px #f4c23599; }
.creator .plate-avatar img, .creator.tg-badge .plate-avatar img, .pr-avatar.creator img, .crew.creator .crew-av img {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; display: block; }
img[src$="creator/clawd.png"] { object-fit: contain !important; padding: 14%; box-sizing: border-box; background: #2a2016; }
.creator .plate-avatar { width: 50px; height: 50px; }
.creator.tg-badge { padding-left: 38px; }
.creator.tg-badge .plate-avatar { width: 54px; height: 54px; }
.pr-avatar.creator { width: 96px; height: 96px; margin: 0 70px; }
.crew.creator { position: relative; overflow: visible; }
.crew-wings { position: absolute; left: 50%; top: 0; width: 86px; height: 86px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.crew.creator .crew-av { width: 86px; height: 86px; z-index: 3; }
.creator .plate-avatar, .creator.tg-badge .plate-avatar { margin: 0 34px 0 30px; }
.creator.tg-badge { padding-left: 6px; }
#toasts { position: fixed; z-index: 95; pointer-events: none; }

/* creator profile: room for the wings, a gold rank chip full of sparkles, the challenge button */
.profile-panel.is-creator .pr-head { padding-top: 46px; }
.rank-chip.r-creator { position: relative; overflow: visible; padding: 5px 18px; color: #3a2500; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff6c4 0%, #ffd24a 45%, #e0a020 70%, #b87908 100%);
  box-shadow: 0 0 0 1px #8a5a00, 0 0 14px #ffd24aaa, inset 0 1px 0 #fff8; }
.rank-chip.r-creator span { position: relative; z-index: 1; }
.spk { position: absolute; width: 9px; height: 9px; z-index: 2; pointer-events: none; background: #fffbe6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #fff3a0); animation: spk-twinkle 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s);
  left: calc(2% + var(--i) * 8.6%); top: -7px; }
.spk:nth-child(3n+2) { top: 7px; } .spk:nth-child(3n) { top: 20px; }
.spk:nth-child(3n) { width: 6px; height: 6px; } .spk:nth-child(4n) { width: 11px; height: 11px; }
@keyframes spk-twinkle { 0%, 100% { transform: scale(.45) rotate(0deg); opacity: .35; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.pr-challenge { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px 0 4px; }
.pr-challenge .btn { letter-spacing: .12em; font-weight: 800; background: linear-gradient(180deg, #ffe680, #f2b92e 60%, #b87908); color: #2b1a00; border-color: #8a5a00; }
.pr-challenge .btn[disabled] { filter: grayscale(.8); opacity: .6; }
.pr-challenge small { opacity: .75; text-align: center; }

/* player card (tap a plate at the table) */
.plate { pointer-events: auto; cursor: pointer; }
.plate.tagged .plate-avatar { box-shadow: 0 0 0 3px var(--tag), 0 0 10px var(--tag); border-radius: 50%; }
.pcard-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #0007; padding: 16px; }
.pcard { position: relative; width: min(380px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: rgba(18,14,10,.98);
  border: 1px solid #e8c87866; border-radius: 16px; padding: 16px; color: #f4ead0; box-shadow: 0 16px 40px #000a; }
.pcard-x { position: absolute; top: 8px; right: 10px; background: none; border: none; color: inherit; opacity: .7; cursor: pointer; font-size: 16px; min-height: 0; }
.pcard-head { display: flex; gap: 14px; align-items: center; }
.pcard-av { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2a2016;
  box-shadow: 0 0 0 3px var(--tag, transparent); font: 700 26px Georgia, serif; }
.pcard-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; }
.pcard-av.creator { margin: 14px 44px 0; background: var(--cr-gold); padding: 4px; box-sizing: border-box; }
.pcard-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcard-who b { font-size: 18px; overflow-wrap: anywhere; }
.pcard-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; opacity: .9; }
.pcard-sub .rank-chip { padding: 1px 9px; font-size: 12px; }
.pcard-plat { color: #bfe6ff; font-weight: 700; }
.pcard-meta { display: flex; gap: 10px; margin: 12px 0 0; }
.pcard-meta span { flex: 1; display: flex; flex-direction: column; background: #ffffff0a; border-radius: 10px; padding: 6px 10px; }
.pcard-meta small, .pcard-stats small { opacity: .65; font-size: 11px; }
.royal { color: #ffd24a; text-shadow: 0 0 10px #ffd24a88; }
.pcard-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0 4px; text-align: center; }
.pcard-stats div { display: flex; flex-direction: column; background: #ffffff0a; border-radius: 8px; padding: 6px 2px; }
.pcard-hint { font-size: 11px; opacity: .6; margin: 4px 0 10px; }
.pcard-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.pcard-col { width: 24px; height: 24px; min-height: 0; border-radius: 50%; border: 2px solid #ffffff33; background: var(--c); cursor: pointer; padding: 0; }
.pcard-col[data-col=""] { background: repeating-linear-gradient(45deg, #444 0 3px, #222 3px 6px); }
.pcard-col.sel { border-color: #fff; box-shadow: 0 0 0 2px #ffd24a; }
.pcard-note { width: 100%; min-height: 54px; resize: vertical; box-sizing: border-box; background: #0006; color: inherit; border: 1px solid #ffffff22; border-radius: 8px; padding: 8px; font: inherit; }
.pcard-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pcard-acts .bad { color: #ff9a8a; }
.pcard-ch { background: linear-gradient(180deg, #ffe680, #f2b92e 60%, #b87908); color: #2b1a00; font-weight: 800; letter-spacing: .08em; }
.pcard-stats { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
.tg-badge, #ts-panel .ts-row { cursor: pointer; pointer-events: auto; }
#ts-panel .ts-row:hover { background: rgba(255,255,255,.06); }

/* Interface scale (Settings → Graphics). Plates are scaled by their own transform (see hud.js). */
:root { --ui-scale: 1; }
#screen, #modal, #story-ui, #hud .topbar, #hud .bottom, #history, #toasts, #banner, #emote-pick, .tu-root { zoom: var(--ui-scale); }

/* Problem report */
.bug-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.bug-panel { width: min(480px, 100%); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 50px rgba(0,0,0,.7); }
.bug-panel h2 { margin: 0; font-family: Georgia, serif; color: var(--gold-2); }
.bug-panel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.bug-panel textarea { min-height: 96px; resize: vertical; border-radius: 8px; border: 1px solid var(--panel-border); background: rgba(0,0,0,.35); color: inherit; padding: 10px; font: inherit; user-select: text; }
.bug-panel details { font-size: 12px; color: var(--muted); }
.bug-panel pre { margin: 6px 0 0; max-height: 120px; overflow: auto; white-space: pre-wrap; font-size: 11px; user-select: text; }
.bug-msg { min-height: 1.3em; }
.bug-msg.ok { color: #6fdc8c !important; }
.bug-foot { display: flex; justify-content: flex-end; gap: 8px; }
.bug-toast { position: fixed; z-index: 80; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--gold); box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 14px; }
.bug-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }

/* Guided hand (Michael follows the game; the game stays clickable except the coach) */
.tu-root.tu-live { pointer-events: none; background: none; justify-content: flex-end; align-items: center; padding-bottom: 96px; }
.tu-root.tu-live.hidden { display: none; }
.tu-live .tu-coach { pointer-events: auto; width: min(520px, calc(100vw - 24px)); }
.tu-live.hint .tu-coach { width: min(420px, calc(100vw - 24px)); }
.tu-live .tu-text { min-height: 2.8em; }
.gd-offer { align-items: center; text-align: center; width: min(420px, 100%); }
.gd-offer .tu-face { flex: none; width: 84px; height: 84px; }
.gd-offer .bug-foot { justify-content: center; }