:root {

  --bg: #151515;
  --panel: #1f1f1f;
  --panel-edge: #3a3a3a;
  --header: linear-gradient(#2e2e2e, #1b1b1b);
  --accent: #d4d4d4;
  --accent-dim: #6e6e6e;
  --text: #d6d6d6;
  --muted: #8c8c8c;

}* {
 box-sizing: border-box; 
}/* Android Chrome's font boosting (text autosizing) inflates text in wide
   blocks, which stretched the header buttons into tall pills on a real phone.
   Turning it off makes Android render at the same sizes as everywhere else. */
html {
 -webkit-text-size-adjust: 100%; text-size-adjust: 100%; 
}body {

  display: flex; flex-direction: column; min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', "Motiva Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; font-feature-settings: "tnum" 0, "cv05" 1;

}header {

  display: flex; align-items: center; gap: 24px;
  background: var(--header);
  border-bottom: 1px solid var(--panel-edge);
  padding: 8px 16px;

}.logo {
 font-weight: bold; letter-spacing: 2px; color: var(--accent); 
}.logo::before {
 content: "🎰 "; font-size: 14px; 
}nav a {
 color: var(--muted); text-decoration: none; margin-right: 16px; padding: 4px 8px; 
}nav a.active, nav a:hover {
 color: #fff; background: rgba(255,255,255,.10); border-radius: 3px; 
}.status {
 margin-left: auto; color: var(--accent); 
}main {
 max-width: 1100px; margin: 0 auto; padding: 16px; flex: 1 0 auto; width: 100%; box-sizing: border-box; text-align: center; 
}main .vertical, main form, main ul, main li {
 text-align: left; 
}.hero {
 text-align:center; padding: 24px 0; 
}.hero h1 {
 margin: 0 0 6px; color: var(--accent); letter-spacing: 1px; 
}.hero p {
 margin: 0; color: var(--muted); 
}.card {
 background: var(--panel); background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 14px 14px; border: 1px solid var(--panel-edge); border-radius: 8px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.5); 
}.card h3 {
 margin: 0 0 6px; color: var(--accent); 
}.card p {
 margin: 0; color: var(--muted); 
}.card .tag {
 display:inline-block; margin-top:10px; 
}.balance {
 font-size: 24px; color: var(--accent); font-weight: bold; 
}.msg {
 color: var(--accent); min-height: 18px; 
}.hint {
 color: var(--muted); font-size: 12px; 
}form.vertical {
 max-width: 420px; 
}li {
 margin-bottom: 6px; 
}ul {
 padding-left: 18px; color: var(--muted); 
}.panel {

  background: var(--panel);
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);

}h2 {
 margin: 0 0 12px; font-size: 14px; letter-spacing: 1px; color: var(--accent); 
}canvas {
 width: 100%; background: #101010; border: 1px solid var(--panel-edge); border-radius: 4px; 
}input, select, textarea {

  background: #121212; border: 1px solid var(--panel-edge); color: var(--text);
  padding: 5px 8px; border-radius: 3px; font-family: inherit; font-size: inherit;

}/* Long-form fields (ticket Details) must read like the single-line ones above:
   without the explicit colour the textarea falls back to a white background
   with dark text that clashes with the panel. */
textarea {
 background: #121212; color: var(--text); line-height: 1.5; resize: vertical; width: 100%; box-sizing: border-box; 
}input::placeholder, textarea::placeholder {
 color: #6a6a6a; 
}input:focus, select:focus, button:focus, textarea:focus {
 outline: 2px solid var(--accent-dim); outline-offset: 1px; 
}label {
 display: flex; flex-direction: column; gap: 4px; color: var(--muted); 
}button {

  background: linear-gradient(#8a8a8a, #4f4f4f); border: 1px solid #5c5c5c; color: #fff; color: #fff;
  padding: 6px 18px; font-weight: bold; border-radius: 3px; cursor: pointer; letter-spacing: 1px;

}button:hover {
 filter: brightness(1.08); 
}button:hover {
 filter: brightness(1.1); 
}.tab {
 background: #262626; border-color: var(--panel-edge); margin-right: 6px; 
}.tab.active, .gtab.active {
 background: linear-gradient(#8a8a8a, #4f4f4f); border-color: #5c5c5c; 
}.auth-tabs {
 margin-bottom: 12px; 
}.result {
 min-height: 18px; color: var(--accent); font-weight: bold; margin-top: 8px; 
}.pot {
 font-size: 20px; color: #ffd700; 
}.chat-log {
 flex: 1; min-height: 220px; max-height: 320px; overflow-y: auto; background: #101010; border: 1px solid var(--panel-edge); border-radius: 3px; padding: 8px; margin-bottom: 8px; 
}.chat-log div {
 margin-bottom: 4px; 
}.hidden {
 display: none; 
}footer {

  margin-top: auto; text-align: center; color: var(--muted); padding: 16px;
  border-top: 1px solid var(--panel-edge);
  font-family: 'Inter', "Segoe UI", Roboto, system-ui, sans-serif;
  font-stretch: normal; letter-spacing: normal; line-height: 1.6; line-break: normal;

}footer .foot-sep {
 color: var(--accent-dim); margin: 0 8px; 
}footer .foot-note {
 font-size: 12px; letter-spacing: normal; 
}/* One continuous line of text that wraps - a lone separator line between the
   two sentences looked broken on a phone. */
@media (max-width: 700px) {
/* Explicitly full width and centred: as a flex item of body the footer was
     sizing to its own content, so the notice ran off the right edge instead of
     wrapping. */
  footer {

    font-size: 11px; padding: 12px 10px; width: 100%; max-width: 100%;
    box-sizing: border-box; text-align: center; overflow-wrap: anywhere;
  
}footer .foot-note {
 font-size: 11px; display: inline; 
}footer .foot-sep {
 margin: 0 5px; 
}
}.modal {
 position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:50; 
}.modal[hidden] {
 display:none; 
}.modal-box {
 background:var(--panel); border:1px solid var(--panel-edge); border-radius:6px; padding:22px; width:min(420px,92vw); max-height:85vh; overflow:auto; position:relative; 
}.close {
 position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0; border-radius:4px; background:none; border:0; color:var(--muted); font-size:18px; line-height:26px; text-align:center; cursor:pointer; 
}.close:hover {
 color:#fff; 
}a {
 color:var(--accent); 
}:focus-visible {
 outline:2px solid var(--accent); outline-offset:2px; 
}@media (prefers-reduced-motion: reduce){
* {
 transition:none !important; 
}.jp-ent.win {
 animation: none !important; 
}
}.auth-tabs {
 display:flex; gap:8px; margin-bottom:14px; 
}.auth-tabs button {
 flex:1; background:#262626; color:var(--muted); border:1px solid var(--panel-edge); 
}.auth-tabs button[aria-selected="true"] {
 background: linear-gradient(#8a8a8a, #4f4f4f); color:#fff; border-color:#5c5c5c; 
}@media (max-width: 640px){
header {
 flex-wrap: wrap; gap: 10px; padding: 10px 12px; 
}nav {
 order: 3; width: 100%; 
}main {
 padding: 10px; 
}.hero h1 {
 font-size: 20px; 
}.balance {
 font-size: 20px; 
}.modal-box {
 width: 94vw; padding: 16px; 
}form.vertical {
 max-width: 100%; 
}
}.chatbox[hidden] {
 display: none !important; 
}.chat-head {
 background: linear-gradient(#2e2e2e,#1b1b1b); color: var(--accent); font-weight: bold; letter-spacing: 1px; padding: 5px 8px; display: flex; align-items: center; gap: 6px; 
}.chat-head #boxTitle {
 flex: 0 0 auto; 
}.chat-head #onlineCount {
 flex: 1; text-align: right; font-weight: normal; letter-spacing: 0; 
}.chat-min {
 flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; 
}.chat-min:hover {
 color: #fff; 
}.chat-log {
 flex: 1; overflow-y: auto; padding: 6px 10px; color: #d6d6d6; min-height: 0; text-align: left; 
}.chat-log div {
 margin-bottom: 4px; word-wrap: break-word; text-align: left; 
}.chat-log {
 max-height: none; min-height: 0; 
}#chatForm {
 border-top: 1px solid var(--panel-edge); background: #101010; padding: 6px; display: flex; align-items: stretch; gap: 5px; 
}/* The input box wraps the field and controls. */
.chat-input-wrap {
 position: relative; flex: 1; min-width: 0; display: flex; align-items: center; background: #101010; border: 1px solid #2c2c2c; border-radius: 4px; 
}.chat-input-wrap input#chatInput {
 flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); padding: 8px 10px 8px 10px; font-family: inherit; box-sizing: border-box; 
}.chat-input-wrap input#chatInput:focus {
 outline: none; 
}.chat-counter {
 flex: 0 0 auto; font-size: 10px; color: #6a6a6a; padding: 0 7px 0 2px; font-variant-numeric: tabular-nums; 
}.chat-counter.near {
 color: #d98b8b; 
}.chat-send {
 flex: 0 0 auto; border: 1px solid #5c5c5c; background: linear-gradient(#8a8a8a,#4f4f4f); color: #fff; border-radius: 4px; cursor: pointer; padding: 0 9px; 
}.chat-send:hover {
 filter: brightness(1.1); 
}#chatForm button[type="submit"] {
 background: linear-gradient(#8a8a8a,#4f4f4f); color: #fff; border-color: #5c5c5c; 
}/* Mines board sizes are driven by --cols so any grid works. */

/* Admin console */
.tbl-scroll {
 overflow-x: auto; margin: 10px 0; 
}.tbl {
 width: 100%; border-collapse: collapse; font-size: 12px; 
}.tbl th, .tbl td {
 border-bottom: 1px solid #2c2c2c; padding: 7px 8px; text-align: left; vertical-align: top; 
}.tbl th {
 color: var(--accent); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; 
}.tbl td.mono, .tbl code {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; 
}.tbl .rowacts {
 display: flex; flex-direction: column; gap: 5px; align-items: flex-start; 
}.tbl .rowacts form {
 margin: 0; display: flex; gap: 5px; align-items: center; 
}.tbl .rowacts input {
 min-width: 0; 
}.bdg {
 display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #3a3a3a; 
}.bdg.ok {
 color: #7fd08a; border-color: #2f5b34; background: #16211a; 
}.bdg.warn {
 color: #e0c060; border-color: #5b4f2f; background: #211d14; 
}.bdg.bad {
 color: #e08080; border-color: #5b2f2f; background: #211616; 
}.bdg.dim {
 color: var(--muted); 
}.kpis {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; 
}.kpi {
 background: #1a1a1a; border: 1px solid #2c2c2c; border-radius: 4px; padding: 10px 12px; 
}.kpi span {
 display: block; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; 
}.kpi b {
 font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; 
}.steps {
 text-align: left; color: var(--muted); line-height: 1.6; padding-left: 20px; 
}.steps li {
 margin-bottom: 8px; 
}.steps code, p code {
 background: #101010; border: 1px solid #2c2c2c; border-radius: 3px; padding: 1px 4px; font-size: 12px; 
}.ledger {
 list-style: none; padding: 0; margin: 10px 0 0; 
}.ledger li {
 border-bottom: 1px solid #262626; padding: 6px 0; font-size: 12px; 
}.admin header .logo em {
 font-style: normal; color: var(--muted); font-size: 11px; letter-spacing: 2px; 
}body {
 padding-left: 0; 
}@media (max-width: 640px){
body {
 padding-left: 0; 
}header {
padding-left:12px;
}
}.cf-coin {
 width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#3a4a40,#1c2620); border:4px solid var(--accent-dim); color:var(--accent); font-size:56px; display:flex; align-items:center; justify-content:center; font-weight:bold; 
}@keyframes shake{
0% {
transform:translateX(-2px)
}50% {
transform:translateX(2px)
}100% {
transform:translateX(-2px)
}
}.faq-item {
 border: 1px solid var(--panel-edge); border-radius: 4px; margin-bottom: 8px; padding: 10px 14px; background: #1a1a1a; 
}.faq-item summary {
 cursor: pointer; font-weight: bold; color: var(--text); 
}.faq-item p {
 color: var(--muted); margin: 8px 0 0; 
}.user-menu {
 position: relative; margin-left: auto; 
}.user-menu button.avatar-btn {
 display: flex; align-items: center; gap: 8px; border-radius: 24px; padding: 4px 12px 4px 4px; background: #262626; border: 1px solid #3a3a3a; color: var(--text); font-weight: normal; 
}/* Global button:hover lifts the button and adds a shadow/filter; the nav links
   do not, so the account button hovered as a visibly larger box. Reset it here
   (outside the phone media query) so it matches the links at every width. */
.user-menu button.avatar-btn:hover {
 transform: none; box-shadow: none; filter: none; 
}.user-menu button.avatar-btn img {
 border-radius: 50%; flex: 0 0 auto; 
}/* Always icon-only in the header: the name squeezed into an unreadable sliver
   on a phone. It is still shown in the dropdown and in Stats & History. */
.user-menu button.avatar-btn span {
 display: none; 
}.user-menu button.avatar-btn .nav-user-label {
 display: none; 
}.user-dropdown {
 position: absolute; top: 46px; right: 0; min-width: 240px; max-width: min(320px, calc(100vw - 16px)); background: #1f1f1f; border: 1px solid #3a3a3a; border-radius: 4px; z-index: 70; text-align: left; 
}.user-dropdown a, .user-dropdown button.link {
 display: block; width: 100%; text-align: left; padding: 10px 14px; color: var(--text); text-decoration: none; background: none; border: 0; border-bottom: 1px solid #2c2c2c; cursor: pointer; font: inherit; 
}.user-dropdown a:hover, .user-dropdown button.link:hover {
 background: #2c2c2c; 
}.user-dropdown .dd-head {
 display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--muted); border-bottom: 1px solid #2c2c2c; 
}.user-dropdown .dd-head img {
 border-radius: 50%; 
}.faq-item, .faq-item p {
 text-align: left; 
}.faq-item p {
 line-height: 1.55; 
}.faq-item summary {
 font-size: 15px; 
}.grid .faq-item {
 margin-bottom: 0; 
}.lobby-info .bet {
 color:var(--accent); font-weight:bold; 
}.notfound {
 text-align:center; padding:40px 20px; 
}.notfound .nf-code {
 font-size:96px; font-weight:800; letter-spacing:6px; color:var(--accent); line-height:1; text-shadow:0 2px 0 #000; 
}.notfound h2 {
 margin:8px 0 4px; 
}.notfound p {
 color:var(--muted); 
}.notfound .nf-actions {
 display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; 
}.notfound .nf-actions a {
 text-decoration:none; 
}button.ghost {
 background:transparent; border:1px solid var(--panel-edge); color:var(--muted); 
}button.ghost:hover {
 color:var(--text); border-color:var(--accent); 
}p.msg.flash {
 margin:0 0 14px; padding:10px 14px; border:1px solid var(--panel-edge); border-left:3px solid var(--accent); border-radius:3px; background:#171717; 
}/* ---- chatbox: chat/support tabs and history paging ---- */
.chat-tabs {
 flex: 0 0 auto; display: flex; gap: 6px; padding: 10px 8px 9px; margin-bottom: 7px; border-bottom: 1px solid var(--panel-edge); background: #141414; 
}.chat-tabs button {
 flex: 1; font-size: 11px; letter-spacing: 1px; padding: 5px 6px; background: #232323; border: 1px solid #2c2c2c; color: var(--muted); border-radius: 4px; cursor: pointer; 
}.chat-tabs button[aria-selected="true"] {
 background: #333; color: var(--text); border-color: #4a4a4a; 
}.chat-older {
 flex: 0 0 auto; width: 100%; margin-bottom: 6px; font-size: 10px; letter-spacing: 1px; padding: 5px; background: #232323; border: 1px solid #2c2c2c; color: var(--muted); border-radius: 4px; cursor: pointer; 
}.chat-older:hover {
 color: var(--accent); border-color: #4a4a4a; 
}.chat-support {
 padding: 12px; display: flex; flex-direction: column; gap: 10px; 
}.chat-support form {
 margin: 0; 
}.chat-support .vertical {
 gap: 8px; 
}.chat-support textarea {
 width: 100%; box-sizing: border-box; 
}/* The removed colour picker leaves no gap in the input row. */
.chatbox form#chatForm {
 gap: 6px; 
}/* ---- policy pages: one list style for rules, terms and privacy ---- */
.rules-list {
 margin: 0; padding-left: 20px; color: var(--text); 
}.rules-list li {
 margin-bottom: 10px; line-height: 1.55; 
}.rules-list li:last-child {
 margin-bottom: 0; 
}.policy-body h2 {
 color: var(--accent); 
}.policy-body p, .policy-body li {
 line-height: 1.6; 
}/* ---- chatbox: bottom composer + closable shell ---- */
#chatPanel {
 display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; 
}#chatPanel[hidden] {
 display: none !important; 
}.chat-guest {
 padding: 12px; display: flex; flex-direction: column; gap: 10px; 
}#chatPanel .chat-log {
 flex: 1 1 auto; margin: 0; border: 0; border-top: 1px solid transparent; 
}#chatPanel #chatForm {
 margin-top: auto; 
}.chat-log .chat-me {
 color: var(--accent); 
}/* ---- jackpot: entrants, chance bars {
 display: flex; flex-direction: column; gap: 5px; margin: 10px 0 4px; 
}.jp-ent {
 display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 8px; padding: 4px 8px; background: #191919; border: 1px solid var(--panel-edge); border-radius: 4px; 
}.jp-ent-bar {
 height: 8px; background: #101010; border-radius: 4px; overflow: hidden; 
}.jp-ent-bar i {
 display: block; height: 100%; background: linear-gradient(90deg, #6e6e6e, #d4d4d4); width: 0; transition: width .8s ease; 
}.jp-ent.win {
 border-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,.25); animation: jpwin 1s ease-in-out infinite alternate; 
}.jp-ent.win .jp-ent-bar i {
 background: linear-gradient(90deg, #b8860b, #ffd700); 
}@keyframes jpwin{
from {
 transform: scale(1); 
}to {
 transform: scale(1.015); 
}
}.jp-result {
 margin-top: 12px; padding: 12px; border: 1px solid #4a4a4a; border-radius: 6px; background: #151515; 
}.jp-result.show {
 animation: jpreveal .5s ease-out; 
}.game-view .jp-entrants, .game-view .jp-result, .game-view #cfEnd {
 max-width: 680px; margin-left: auto; margin-right: auto; 
}@keyframes jpreveal{
from {
 opacity: 0; transform: translateY(10px) scale(.98); 
}to {
 opacity: 1; transform: none; 
}
}/* ---- responsive pass: tablet and small desktop ---- */
@media (max-width: 980px) {
header {
 flex-wrap: wrap; gap: 10px; 
}nav {
 order: 3; width: 100%; 
}.jp-ent {
 grid-template-columns: 72px 1fr 42px; 
}.tbl-scroll table.tbl {
 min-width: 560px; 
}
}@media (max-width: 640px){
main {
 padding: 10px; 
}.jp-ent {
 grid-template-columns: 64px 1fr 38px; font-size: 11px; 
}.modal-box {
 width: 94vw; padding: 16px; 
}
}/* ---- visual polish pass (v39) ---- */
body {
 transition: padding-left .28s ease; 
}header {

  position: sticky; top: 0; z-index: 35;
  background: linear-gradient(rgba(46,46,46,.92), rgba(27,27,27,.94));
  box-shadow: 0 1px 16px rgba(0,0,0,.45);

}/* The blur moved here on purpose: on the site header it made the header the
   containing block for position:fixed, so every modal rendered inside the
   topbar instead of centred on the screen. */
body.admin > header {
 backdrop-filter: blur(8px); 
}.logo {
 color: #ffffff; 
}nav a {
 border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; 
}nav a:hover {
 border-color: #4a4a4a; 
}.panel, .card {
 border-radius: 8px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; 
}.panel {
 box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 26px rgba(0,0,0,.28); 
}.panel:hover {
 border-color: #474747; 
}button {
 transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; 
}button:hover {
 transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.35); 
}button:active {
 transform: translateY(0); 
}input:focus, select:focus, textarea:focus {
 border-color: #6e6e6e; box-shadow: 0 0 0 2px rgba(255,255,255,.07); 
}.tbl tbody tr:nth-child(even) {
 background: rgba(255,255,255,.02); 
}.tbl tbody tr:hover {
 background: rgba(255,255,255,.05); 
}.balance {
 text-shadow: 0 0 22px rgba(212,212,212,.15); 
}* {
 scrollbar-width: thin; scrollbar-color: #3a3a3a #151515; 
}*::-webkit-scrollbar {
 width: 9px; height: 9px; 
}*::-webkit-scrollbar-track {
 background: #151515; 
}*::-webkit-scrollbar-thumb {
 background: #3a3a3a; border-radius: 5px; border: 2px solid #151515; 
}*::-webkit-scrollbar-thumb:hover {
 background: #4d4d4d; 
}/* ---- game reveal visuals: jackpot / coinflip slider + mines flips ---- */
.jp-slider {
 position: relative; overflow: hidden; height: 96px; margin: 14px 0 8px; border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,.6)), #101010; 
}.jp-slider-marker {
 position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2;
  background: linear-gradient(rgba(255,215,0,.1), #ffd700, rgba(255,215,0,.1)); box-shadow: 0 0 14px rgba(255,215,0,.55); 
}.jp-slider-marker::before, .jp-slider-marker::after {
 content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; 
}.jp-slider-marker::before {
 top: 0; border-top: 8px solid #ffd700; 
}.jp-slider-marker::after {
 bottom: 0; border-bottom: 8px solid #ffd700; 
}.jp-slider-track {
 display: flex; gap: 6px; padding: 12px; align-items: center; will-change: transform; 
}.jp-tile {
 flex: 0 0 auto; width: 74px; height: 70px; display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; font-size: 11px; line-height: 1.2; background: #1d1d1d; border: 1px solid #4a4a4a; border-radius: 6px; color: var(--text); 
}.jp-tile.win {
 border-color: #ffd700; color: #fff; box-shadow: inset 0 0 14px rgba(255,215,0,.28); 
}body.admin {
 padding-left: 0; 
}body.admin main {
 max-width: none; width: 100%; padding: 16px 24px; 
}@media (min-width: 1500px){
main {
 max-width: 1320px; 
}
}/* Fluid type scales between phone and wide desktop instead of fixed jumps. */
.logo {
 font-size: clamp(15px, 1.4vw + 10px, 20px); 
}h2 {
 font-size: clamp(13px, 0.5vw + 11px, 16px); 
}/* ---- a11y skip link ---- */
.skip {
 position: absolute; left: -9999px; top: auto; z-index: 60; 
}.skip:focus {
 left: 8px; top: 8px; background: #1f1f1f; color: #fff; padding: 8px 12px; border: 1px solid #5a5a5a; border-radius: 4px; text-decoration: none; 
}/* ---- admin 7-day activity bars (v44) ---- */
.bar-row {
 display: grid; grid-template-columns: 64px repeat(3, 1fr) 150px; gap: 6px; align-items: center; margin: 5px 0; font-size: 11px; 
}.bar {
 height: 10px; background: #101010; border: 1px solid #2c2c2c; border-radius: 5px; overflow: hidden; 
}.bar i {
 display: block; height: 100%; background: linear-gradient(90deg, #6e6e6e, #d4d4d4); 
}.bar i.alt {
 background: linear-gradient(90deg, #4f4f4f, #8a8a8a); 
}.bar i.alt2 {
 background: linear-gradient(90deg, #3a3a3a, #6e6e6e); 
}.bar-label {
 color: var(--muted); 
}.bar-value {
 color: var(--muted); text-align: right; 
}@media (max-width: 700px){
.bar-row {
 grid-template-columns: 56px 1fr 1fr 1fr; 
}.bar-value {
 grid-column: 1 / -1; text-align: left; 
}
}/* ---- modal form spacing: keep the submit button clear of the last input ---- */
.modal-box form.vertical {
 display: flex; flex-direction: column; 
}.modal-box form.vertical > label {
 margin-bottom: 10px; 
}.modal-box form.vertical > button {
 margin-top: 8px; 
}/* ---- admin header layout (v46) ---- */
.admin header {
 justify-content: space-between; gap: 12px; 
}.admin header .logo {
 flex: 0 0 auto; 
}.admin header nav {
 margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; 
}.admin header nav a {
 margin-right: 0; padding: 6px 11px; border: 1px solid transparent; border-radius: 4px; 
}.admin header nav a:hover {
 border-color: #4a4a4a; background: rgba(255,255,255,.06); 
}.admin header nav a[aria-current="page"] {
 color: #fff; border-color: #4a4a4a; background: rgba(255,255,255,.05); 
}.admin header nav form {
 display: inline-flex; margin: 0 0 0 6px; padding-left: 12px; border-left: 1px solid var(--panel-edge); 
}.admin header nav .link {
 padding: 6px 11px; 
}@media (max-width: 640px){
.admin header {
 flex-wrap: wrap; 
}.admin header nav {
 width: 100%; margin-left: 0; order: 3; padding-top: 6px; border-top: 1px solid var(--panel-edge); 
}
}/* ---- FAQ: clean single-column collapsible list (v47) ---- */
.faq-list {
 display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 16px; 
}.faq-item {
 border: 1px solid var(--panel-edge); border-radius: 6px; background: #191919; overflow: hidden; 
}.faq-item summary {
 list-style: none; cursor: pointer; padding: 11px 12px; font-weight: bold; color: var(--accent); display: flex; align-items: center; justify-content: space-between; gap: 10px; 
}.faq-item summary::-webkit-details-marker {
 display: none; 
}.faq-item summary::after {
 content: '+'; color: var(--muted); font-weight: normal; flex: 0 0 auto; 
}.faq-item[open] summary::after {
 content: '-'; 
}.faq-item[open] summary {
 border-bottom: 1px solid #2c2c2c; 
}.faq-item p {
 margin: 0; padding: 11px 12px; color: var(--text); line-height: 1.55; 
}.faq-item p.hint {
 padding-top: 0; 
}/* ---- coin side picker + flip animation (v48) ---- */
.side-pick {
 display: flex; gap: 8px; margin: 2px 0 10px; 
}.side-btn {
 flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; background: #232323; border: 1px solid #333; color: var(--muted); border-radius: 6px; cursor: pointer; letter-spacing: 0; 
}.side-btn:hover {
 color: #fff; border-color: #5a5a5a; 
}.side-btn.active {
 background: #2e2e2e; border-color: #6e6e6e; color: #fff; box-shadow: inset 0 0 12px rgba(255,255,255,.06); 
}.coin-glyph {
 width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #5a5a5a; background: #141414; font-size: 12px; font-weight: bold; 
}.side-btn.active .coin-glyph {
 border-color: #d4d4d4; color: #fff; 
}.coin-stage {
 display: flex; justify-content: center; margin: 14px 0 4px; perspective: 700px; 
}.coin {
 width: 88px; height: 88px; position: relative; transform-style: preserve-3d; will-change: transform; 
}.coin-face {
 position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #5a5a5a; background: linear-gradient(145deg, #2c2c2c, #141414); color: #e8e8e8; font-size: 30px; font-weight: bold; backface-visibility: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.45); transform: translateZ(1px); 
}.coin-face.tail {
 transform: rotateY(180deg) translateZ(1px); 
}@keyframes coinspin{
0% {
 transform: rotateY(0deg); 
}100% {
 transform: rotateY(1440deg); 
}
}@keyframes cointailspin{
0% {
 transform: rotateY(0deg); 
}100% {
 transform: rotateY(1620deg); 
}
}/* No focus border on click; keyboard users still get a subtle ring. */
input:focus, select:focus, textarea:focus {
 outline: none !important; box-shadow: none !important; border-color: var(--panel-edge) !important; 
}input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--accent-dim) !important; outline-offset: 1px; 
}/* ---- header balance + centered game view (v50) ---- */
.user-menu {
 display: flex; align-items: center; gap: 10px; 
}.user-tomes {
 color: var(--accent); font-weight: bold; font-size: 13px; margin-right: 10px; white-space: nowrap; 
}.user-deposit {
 display: none; font-weight: bold; color: #fff; background: #2a2a2a; border: 1px solid #3a3a3a; padding: 5px 11px; border-radius: 20px; white-space: nowrap; text-decoration: none; font-size: 13px; 
}.user-deposit:hover {
 color: var(--accent); border-color: var(--accent); 
}.game-view .panel {
 max-width: 820px; margin: 0 auto; padding: 20px 18px; text-align: center; 
}.game-view .panel > form.vertical {
 margin-left: auto; margin-right: auto; 
}.game-view .lobby-head, .game-view .lobby-row, .game-view .prev-row, .game-view .panel > .hint {
 max-width: 640px; margin-left: auto; margin-right: auto; 
}.game-view h2 {
 font-size: 16px; letter-spacing: 3px; 
}.game-view .side-pick {
 max-width: 420px; margin: 2px auto 10px; 
}.stats-grid > .hint {
 grid-column: 1 / -1; text-align: center; 
}.jp-hero {
 max-width: 680px; margin: 0 auto 14px; padding: 16px; border: 1px solid var(--panel-edge); border-radius: 12px; background: radial-gradient(120% 120% at 50% 0%, #2a2a2a, #121212); background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px), radial-gradient(120% 120% at 50% 0%, #2a2a2a, #121212); background-size: 12px 12px, auto; box-shadow: 0 12px 30px rgba(0,0,0,.35); 
}.jp-hero-label {
 display: block; text-align: center; color: var(--muted); font-size: 11px; letter-spacing: 3px; 
}/* Stage flanks: label over value, so the ball keeps the middle and the three
   parts sit on one line like the reference. */
.jp-hero-side {
 display: flex; flex-direction: column; gap: 4px; min-width: 0; 
}.jp-hero-side .jp-hero-label {
 text-align: inherit; letter-spacing: 2px; 
}.jp-hero-left {
 grid-column: 1; grid-row: 1; text-align: left; 
}.jp-hero-right {
 grid-column: 3; grid-row: 1; text-align: right; 
}.jp-hero-value {
 font-size: 24px; font-weight: bold; color: #fff; 
}.jp-hero-timer-text {
 display: block; text-align: center; color: var(--accent); font-size: 12px; margin: 10px 0 6px; 
}.jp-progress {
 height: 8px; background: #101010; border: 1px solid #2c2c2c; border-radius: 5px; overflow: hidden; 
}.jp-progress i {
 display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6e6e6e, #d4d4d4); transition: width .3s linear; 
}.jp-ent {
 grid-template-columns: 26px 100px 1fr 44px; 
}/* ---- site header matches the admin console styling (v53) ---- */
header nav {
 margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; 
}header nav a {
 margin-right: 0; padding: 6px 11px; border: 1px solid transparent; border-radius: 4px; 
}header nav a:hover {
 border-color: #4a4a4a; background: rgba(255,255,255,.06); color: #fff; 
}.user-menu {
 margin-left: 8px; 
}/* no selection/click border anywhere */
*:focus, *:focus-visible {
 outline: none !important; box-shadow: none !important; 
}/* ---- game creation form card + primary button (v54) ---- */
.game-view form.vertical {

  background: #191919;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 16px 16px 18px;
  max-width: 420px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);

}.game-view form.vertical > label {
 color: var(--text); font-size: 12px; letter-spacing: .5px; 
}.game-view form.vertical > label input, .game-view form.vertical > label select {
 margin-top: 4px; 
}.create-btn {

  width: 100%;
  margin-top: 10px;
  padding: 12px 18px;
  font-size: 13px;
  letter-spacing: 2px;
  border-radius: 6px;
  background: linear-gradient(#8a8a8a, #4f4f4f);
  border: 1px solid #5c5c5c;
  color: #fff;

}.create-btn:hover {
 filter: brightness(1.12); 
}/* ---- money inputs: no spinners, cleaner box (v55) ---- */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
 -webkit-appearance: none; margin: 0; 
}input[type="number"] {
 -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; 
}/* ---- mobile pass: Pixel-class phones (~412px) (v56) ---- */
body {
 min-height: 100dvh; 
}@supports (padding: max(0px)){
header {
 padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); 
}
}@media (max-width: 430px){
header {
 gap: 8px; padding: 8px 12px; 
}.logo {
 font-size: 15px; letter-spacing: 1px; 
}header nav {
 gap: 4px; 
}header nav a {
 padding: 5px 8px; font-size: 12px; 
}.user-menu {
 gap: 6px; 
}main {
 padding: 10px 8px; 
}.game-view .panel {
 padding: 14px 10px; border-radius: 8px; 
}.game-view form.vertical {
 padding: 12px 10px 14px; 
}.jp-hero {
 padding: 12px; 
}.jp-ent {
 grid-template-columns: 22px 84px 1fr 38px; font-size: 11px; 
}.coin {
 width: 72px; height: 72px; 
}.coin-face {
 font-size: 24px; 
}.modal-box {
 width: 96vw; 
}.panel h2 {
 letter-spacing: 2px; 
}
}.balance-row .balance {
 font-size: clamp(18px, 2.4vw, 26px); 
}header nav {
 margin-left: 16px; 
}.user-menu {
 margin-left: auto; 
}/* ---- no grey focus glow/border on any input box (v58) ---- */
input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible {
 border-color: var(--panel-edge) !important; box-shadow: none !important; outline: none !important; 
}input:focus::placeholder, textarea:focus::placeholder {
 color: #6a6a6a; 
}/* ---- broader mobile compatibility pass (v60) ---- */
body {
 overflow-x: hidden; 
}button, a, label, summary, input, select, textarea {
 touch-action: manipulation; 
}@media (max-width: 640px){
/* The header is not draggable: the nav wraps onto as many lines as it needs
     instead of becoming a touch-scroller, and pan-y stops a sideways drag on
     the header from moving anything while still letting the page scroll. */
  header {
 flex-wrap: wrap; row-gap: 6px; touch-action: pan-y; 
}header nav {

    order: 3; width: 100%; margin-left: 0;
    flex-wrap: wrap; overflow-x: visible; touch-action: pan-y;
    padding-bottom: 2px;
  
}header nav a {
 flex: 0 0 auto; white-space: nowrap; 
}.user-menu {
 margin-left: auto; 
}main {

    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  
}.modal-box {
 max-height: 88dvh; 
}input, select, textarea {
 font-size: 16px; 
}button, .side-btn, .btn, .create-btn {
 min-height: 42px; 
}.tbl-scroll {
 -webkit-overflow-scrolling: touch; 
}.jp-hero {
 margin-bottom: 12px; 
}footer {
 padding: 12px; 
}
}@media (max-width: 380px){
.logo {
 font-size: 14px; 
}header nav a {
 padding: 5px 7px; font-size: 11px; 
}
}/* jackpot join inside the hero box (v61) */
/* Fairness fields sit on one line on a desktop, one per line on a phone so the
   long fingerprints do not run together into one unreadable blob. */
.fair-line .fl {
 display: inline; 
}.fair-line .sep {
 font-style: normal; 
}@media (max-width: 720px){
.fair-line {
 font-size: 15px; line-height: 1.5; 
}.fair-line .fl {
 display: block; margin: 0 0 6px; 
}.fair-line .fl:last-child {
 margin-bottom: 0; 
}.fair-line .sep {
 display: none; 
}/* break-all kept so the hash fits the screen, but at a readable size and
     allowed to wrap on character pairs rather than one letter per line. */
  .fair-line code {
 word-break: break-all; font-size: 14px; overflow-wrap: anywhere; 
}
}/* The account control moved inside the brand bar, so it is a grid child now and
   the auto margins that used to push it to the header edge are meaningless. */
.cas-topbar > .user-menu {
 margin-left: 0; align-self: center; 
}body:not(.admin) > header .cas-topbar > .user-menu {
 margin-left: 0; 
}.cas-topbar > .user-menu .user-tomes {
 margin-right: 0; 
}.jp-join {
 display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; 
}/* Let a hint sit under the full-width button instead of beside it. */
.jp-join > .hint {
 flex: 0 0 100%; margin: 2px 0 0; 
}.jp-join form {
 display: flex; align-items: center; gap: 6px; margin: 0; 
}.jp-join form[hidden] {
 display: none; 
}.jp-result code {
 overflow-wrap: anywhere; word-break: break-all; 
}.panel code {
 overflow-wrap: anywhere; 
}.dd-head span {
 overflow-wrap: anywhere; min-width: 0; 
}.east-notice {
 margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--accent); border-radius: 4px; background: #161616;
  color: var(--text); font-size: 13px; line-height: 1.5; text-align: left; 
}.east-notice b {
 color: var(--accent); 
}/* ---- chatbox in page flow on all resolutions (v76) ---- */
/* flex column so #chatPanel -> .chat-log can shrink and scroll instead of
   growing past the fixed height and pushing the input out of the box. */
.chatbox {

    display: flex;
    flex-direction: column;
    background: rgba(16,16,16,.97);
    position: static; left: auto; top: auto; bottom: auto;
    width: 90%; max-width: 820px; height: 360px;
    margin: 12px auto 0; transform: none;
    border: 1px solid var(--panel-edge); border-radius: 8px;
    font-size: 13px; z-index: auto;
  
}.chatbox.min {
 transform: none; cursor: default; 
}.chatbox.min .chat-tabs, .chatbox.min #chatPanel, .chatbox.min #supportPanel {
 visibility: visible; 
}.chatbox.min #boxTitle, .chatbox.min #onlineCount {
 display: inline; 
}.chatbox.min .chat-head {
 justify-content: space-between; 
}#chatMin {
 display: none; 
}.chatbox .chat-input-wrap input {
 font-size: 16px; 
}.chatbox .ticket-msgs {
 max-height: 180px; 
}@media (max-width: 380px){
.chatbox {
 height: 320px; font-size: 12px; 
}
}/* ---- casino table layout (non-color) ---- */
body.game-view main {

  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 340px;
  gap: 16px;
  align-items: start;

}body.game-view main > section.panel {
 grid-column: 1; 
}body.game-view main > aside.chatbox {

  grid-column: 2;
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  margin: 0;
  width: 100%;
  max-width: none;

}@media (max-width: 900px){
body.game-view main {

    display: block;
  
}body.game-view main > aside.chatbox {

    position: static;
    height: 360px;
    max-height: none;
    margin: 12px auto 0;
    width: 90%;
    max-width: 820px;
  
}
}.cas-col {
 min-width: 0; display: flex; flex-direction: column; gap: 16px; 
}.cas-p {
 padding: 0; overflow: hidden; 
}.cas-p > .cas-h {
 margin: 0; padding: 8px 10px; text-align: center; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: linear-gradient(#333, #232323); border-bottom: 1px solid var(--panel-edge); 
}.cas-list {
 padding: 8px; display: flex; flex-direction: column; gap: 6px; 
}.cas-row {
 display: flex; align-items: flex-start; gap: 8px; padding: 8px; text-decoration: none; color: var(--text); background: #1a1a1a; border: 1px solid var(--panel-edge); border-radius: 6px; 
}.cas-row:hover {
 border-color: var(--accent-dim); background: #202020; 
}.cas-av, .cas-big-av {
 flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; color: var(--accent); background: #262626; border: 1px solid var(--panel-edge); 
}.cas-txt {
 font-size: 12px; line-height: 1.35; color: var(--muted); min-width: 0; overflow-wrap: anywhere; 
}.cas-txt b {
 color: var(--text); 
}.cas-big {
 display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; text-align: center; color: var(--muted); 
}.cas-big b {
 color: var(--accent); 
}.cas-big-av {
 width: 64px; height: 64px; font-size: 22px; 
}.cas-topbar {
 display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; background: var(--header); border: 1px solid var(--panel-edge); border-radius: 8px; 
}.cas-tb-item {
 text-align: center; text-decoration: none; color: var(--accent); font-size: 12px; letter-spacing: 1px; line-height: 1.3; 
}.cas-tb-item span {
 display: block; font-size: 15px; font-weight: bold; color: var(--muted); 
}.cas-tb-item:hover {
 color: #fff; 
}.cas-logo {
 font-size: 26px; font-weight: bold; letter-spacing: 3px; color: #fff; text-shadow: 0 0 18px rgba(212,212,212,.25); 
}.cas-jp {
 padding: 14px; 
}.cas-jp .jp-hero {
 max-width: none; margin: 0 0 12px; 
}/* Pull the two flanks in towards the ball instead of pinning them to the edges.
   Flex, not grid: a centred grid overflowed and clipped the outer numbers. */
.cas-jp .jp-hero {
 display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px clamp(10px, 7vw, 110px); 
}.cas-jp .jp-hero .cas-timer, .cas-jp .jp-hero .jp-progress {
 flex: 1 0 100%; 
}.cas-jp .jp-hero .cas-timer {
 text-align: center; 
}.cas-jp .jp-hero-value {
 white-space: nowrap; 
}/* max-width is the guarantee: a flank can never grow past its share of the
   stage, so the outer numbers can never be clipped by the panel. */
.cas-jp .jp-hero .jp-hero-side {
 flex: 0 1 auto; min-width: 0; max-width: 46%; 
}/* The ball carried `margin: 0 auto` from the old grid layout. Auto margins are
   resolved BEFORE justify-content in a flex row, so they swallowed all the free
   space and pinned the flanks to the edges - the centring never had a chance. */
.cas-jp .jp-hero .cas-ball {
 margin-inline: 0; flex: 0 0 auto; 
}.cas-jp .jp-hero .jp-hero-label {
 letter-spacing: 1px; 
}.cas-jp .jp-hero-side {
 text-align: center; 
}.cas-jp .jp-join {
 display: flex; justify-content: center; 
}.cas-jp .jp-join form {
 display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; 
}.cas-jp .jp-join select {
 max-width: 320px; 
}.cas-tiles {
 display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; 
}.cas-tile {
 display: inline-flex; flex-direction: column; align-items: center; width: 62px; padding: 4px; background: #232323; border: 1px solid var(--panel-edge); border-radius: 6px; 
}.cas-tile img {
 width: 44px; height: 44px; object-fit: contain; 
}.cas-tile em {
 font-style: normal; font-size: 11px; color: var(--muted); 
}@media (max-width: 1100px){
.cas-logo {
 font-size: 22px; 
}
}@media (max-width: 560px){
.cas-topbar {
 padding: 8px; 
}.cas-tb-item span {
 font-size: 13px; 
}
}/* ---- RustyPot 1:1 blocks (existing palette only) ---- */
.cas-topbar {
 grid-template-columns: 1fr auto 1fr; background: transparent; border: 0; padding: 4px 0 10px; 
}.cas-tb-item {
 display: flex; flex-direction: column; align-items: center; font-size: 12px; letter-spacing: 1px; color: var(--accent); line-height: 1.15; 
}.cas-tb-item span {
 font-size: 16px; font-weight: bold; color: var(--accent-dim); 
}.cas-logo {
 font-size: 34px; letter-spacing: 4px; line-height: 1; 
}.cas-stage {
 display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 14px; padding: 16px 12px; background: #1a1a1a; border: 1px solid var(--panel-edge); border-radius: 8px; position: relative; 
}.cas-ball {
 grid-column: 2; grid-row: 1; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: bold; color: #fff; background: radial-gradient(circle at 50% 35%, #3a3a3a, #161616 70%); border: 3px solid var(--accent-dim); box-shadow: 0 0 24px rgba(0,0,0,.6); 
}.cas-stage .jp-progress {
 grid-column: 1 / -1; grid-row: 3; margin-top: 8px; 
}.cas-deposit {
 margin: 0 0 14px; padding: 0; 
}.cas-deposit > button {
 display: block; width: 100%; padding: 14px; font-size: 17px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #151515; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; 
}.cas-deposit > button:hover {
 background: #fff; 
}.cas-deposit form {
 display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; 
}.cas-deposit select {
 max-width: 320px; 
}.cas-items {
 padding: 10px; display: flex; flex-direction: column; gap: 10px; 
}.cas-ent {
 padding: 8px; border-radius: 6px; 
}.cas-ent .jp-ent-bar {
 display: block; height: 5px; margin-top: 6px; 
}.cas-ent.win {
 box-shadow: 0 0 0 1px var(--accent-dim); 
}.cas-tiles {
 display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; 
}.cas-tile {
 display: inline-flex; flex-direction: column; align-items: center; width: 60px; padding: 4px 2px; background: #232323; border: 1px solid var(--panel-edge); border-radius: 6px; 
}.cas-tile img {
 width: 42px; height: 42px; object-fit: contain; 
}.cas-tile em {
 font-style: normal; font-size: 11px; color: var(--muted); 
}.cas-p {
 padding: 0; 
}.cas-p > .cas-h {
 margin: 0; padding: 8px 10px; text-align: center; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #151515; background: var(--accent); font-weight: bold; 
}.cas-list {
 padding: 8px; display: flex; flex-direction: column; gap: 6px; 
}.cas-row {
 display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--text); background: #1a1a1a; border: 1px solid var(--accent-dim); border-radius: 6px; text-decoration: none; 
}.cas-row:hover {
 background: #222; 
}.cas-av {
 width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; background: #2c2c2c; border: 1px solid var(--accent-dim); flex: 0 0 auto; 
}.cas-txt {
 font-size: 12px; color: var(--muted); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; 
}.cas-txt b {
 color: var(--accent); 
}.cas-big {
 display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; text-align: center; color: var(--muted); 
}.cas-big-av {
 width: 70px; height: 70px; font-size: 24px; 
}.cas-big b {
 color: var(--accent); 
}.cas-home {
 display: grid; grid-template-columns: 320px minmax(0, 1fr) 330px; gap: 18px; align-items: start; text-align: center; 
}body.game-view main.cas-home > section.panel {
 grid-column: auto; 
}body.game-view main.cas-home > aside.chatbox {
 grid-column: auto; position: static; height: auto; max-height: none; margin: 0; width: auto; max-width: none; 
}@media (max-width: 1250px){
body.game-view main.cas-home {
 grid-template-columns: minmax(0, 1fr); 
}.cas-ball {
 width: 90px; height: 90px; font-size: 26px; 
}
}/* ---- RustyPot style site header: links left, jackpot|logo|coinflip right ---- */
body.game-view > header {
 display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: #101010; border-bottom: 2px solid var(--accent-dim); padding: 10px 20px; 
}body.game-view > header nav {
 display: flex; flex-wrap: wrap; gap: 4px; 
}body.game-view > header nav a {
 margin: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; padding: 6px 10px; 
}body.game-view > header .cas-topbar {
 margin-left: auto; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 22px; background: transparent; border: 0; padding: 0; 
}body.game-view > header .cas-tb-item {
 font-size: 13px; font-weight: bold; letter-spacing: 1px; line-height: 1.2; color: var(--text); text-align: center; 
}body.game-view > header .cas-tb-item span {
 display: block; font-size: 16px; font-weight: bold; color: var(--accent); 
}body.game-view > header .cas-logo {
 font-size: 40px; font-weight: bold; letter-spacing: 4px; line-height: 1; color: #fff; text-shadow: 0 0 20px rgba(212,212,212,.28); 
}body.game-view > header .user-menu {
 margin-left: 14px; 
}@media (max-width: 720px){
body.game-view > header {
 justify-content: center; gap: 10px; 
}body.game-view > header .cas-topbar {
 margin: 0; gap: 12px; order: -1; width: 100%; justify-content: center; 
}body.game-view > header .cas-logo {
 font-size: 26px; 
}body.game-view > header .cas-tb-item {
 font-size: 11px; 
}body.game-view > header .cas-tb-item span {
 font-size: 13px; 
}
}/* ---- header: centred jackpot | logo | coinflip cluster ---- */
body.game-view > header {
 position: relative; justify-content: space-between; 
}body.game-view > header nav {
 order: 1; 
}body.game-view > header .cas-topbar {
 order: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; gap: 28px; 
}body.game-view > header .user-menu {
 order: 3; margin-left: auto; 
}@media (max-width: 720px){
body.game-view > header {
 justify-content: center; padding-top: 62px; 
}body.game-view > header .cas-topbar {
 top: 8px; transform: translateX(-50%); 
}
}/* ---- polish: sticky header, focus rings, panel hover ---- */
body.game-view > header {
 position: sticky; top: 0; z-index: 60; 
}body.game-view a:focus-visible, body.game-view button:focus-visible, body.game-view select:focus-visible, body.game-view input:focus-visible {
 outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; 
}.cas-row:hover b {
 color: #fff; 
}.cas-tile:hover {
 border-color: var(--accent-dim); 
}body.game-view .cas-p {
 box-shadow: 0 6px 18px rgba(0,0,0,.35); 
}/* ---- profile modal: stats + bet history ---- */
.stats-box {
 width: min(900px, 96vw); padding: 0; overflow: hidden; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-edge); 
}.stats-head {
 display: flex; align-items: center; justify-content: center; position: relative; padding: 12px 16px; background: var(--accent); color: #151515; font-weight: bold; letter-spacing: 1px; 
}.stats-head .close {
 position: absolute; right: 10px; background: none; border: 0; color: #151515; font-size: 22px; line-height: 1; cursor: pointer; 
}.stats-body {
 padding: 16px; 
}.stats-top {
 display: flex; gap: 18px; align-items: center; flex-wrap: wrap; 
}.stats-top h3, .stats-sub {
 margin: 0 0 8px; color: var(--accent); font-size: 16px; font-weight: normal; 
}.stats-cells {
 display: flex; gap: 12px; flex-wrap: wrap; 
}.stats-cell {
 min-width: 130px; padding: 12px; text-align: center; background: #e8e8e8; color: #111; border-radius: 4px; 
}.stats-cell b {
 display: block; font-size: 20px; 
}.stats-cell span {
 font-size: 13px; 
}.pos {
 color: #1f9d3a; 
}.neg {
 color: #c62828; 
}.stats-cell .pos, .stats-cell .neg {
 color: inherit; 
}.stats-sub {
 margin-top: 18px; 
}.stats-actions {
 display: flex; gap: 8px; flex-wrap: wrap; 
}.stats-box .tbl-scroll {
 margin-top: 14px; max-height: 260px; overflow: auto; 
}.stats-box .tbl th {
 position: sticky; top: 0; 
}.stats-box .tbl td, .stats-box .tbl th {
 text-align: center; 
}.stats-empty {
 margin: 16px 0 0; text-align: center; color: var(--muted); 
}.stats-foot {
 display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--panel-edge); 
}.stats-close {
 padding: 8px 18px; border-radius: 5px; border: 0; font-weight: bold; cursor: pointer; background: var(--accent); color: #151515; 
}.stats-close:hover {
 background: #fff; 
}/* ---- sticky side columns, jackpot lock cue ---- */
body.game-view main.cas-home > .cas-right {
 position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; 
}body.game-view main.cas-home > .cas-left {
 position: sticky; top: 84px; align-self: start; 
}.cas-timer.locked {
 color: #d24b4b; font-weight: bold; 
}.cas-timer.rolling {
 color: var(--accent); font-weight: bold; 
}.cas-h a {
 color: inherit; 
}@media (max-width: 1250px){
body.game-view main.cas-home > .cas-right, body.game-view main.cas-home > .cas-left {
 position: static; max-height: none; overflow: visible; 
}
}/* ---- content pages (faq, rules, fair, terms...) share one centred column ---- */
body:not(.game-view):not(.admin) main, body.admin main {
 max-width: 880px; 
}body:not(.game-view):not(.admin) main > .panel, body.admin main > .panel {
 display: block; width: 100%; max-width: 860px; margin: 0 auto 16px; 
}body:not(.game-view):not(.admin) main > .panel > h2:first-child {
 margin-top: 0; 
}body:not(.game-view):not(.admin) main .steps, body:not(.game-view):not(.admin) main .faq-list {
 max-width: 780px; margin-left: auto; margin-right: auto; 
}/* ---- coinflip chat: fixed chat height, not a full-page column ---- */
body.game-view main > aside.chatbox {
 height: 460px; max-height: 460px; top: 84px; 
}@media (max-width: 900px){
body.game-view main > aside.chatbox {
 height: 360px; max-height: 360px; top: 0; 
}
}/* ---- coinflip: rustypot-style lobby ---- */
body.game-view main.cf-home {
 max-width: 1400px; 
}body.game-view main.cf-home > section.panel {
 max-width: none; text-align: left; 
}.cf-panel {
 padding: 0; 
}.cf-panel > .cas-h {
 display: flex; align-items: center; justify-content: center; position: relative; 
}
/* 1fr auto 1fr puts CREATE A GAME in the middle column, so it is centred on
   the bar itself rather than merely pushed right of the stats. */
.cf-top {
 display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 14px 4px; 
}
.cf-stats {
 display: flex; gap: 20px; align-items: flex-start; min-width: 0; 
}
.cf-stat {
 text-align: left; white-space: nowrap; 
}.cf-stat b {
 display: block; font-size: 17px; color: #fff; 
}/* > span only: the money span inside <b> must keep the <b>'s own size and
   colour, or the number jumps when the poll replaces it with plain text. */
.cf-stat > span {
 font-size: 12px; color: var(--muted); 
}.cf-newgame button {
 padding: 12px 22px; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #151515; background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; 
}.cf-newgame button:hover {
 background: #fff; 
}.cf-prev {
 display: flex; align-items: center; gap: 8px; padding: 4px 14px 8px; color: var(--muted); font-size: 12px; 
}.cf-coins {
 display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; 
}.cf-coin:last-child {
 margin-right: auto; 
}.cf-coin {
 flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #4a4a4a; background: #1c1c1c; color: #e8e8e8; font-size: 9px; font-weight: bold; display: flex; align-items: center; justify-content: center; line-height: 1; 
}.cf-coin:hover {
 border-color: var(--accent-dim); 
}.cf-createwrap {
 padding: 0 14px 10px; 
}.cf-createwrap form {
 max-width: 560px; margin: 0 auto; 
}.cf-list {
 display: flex; flex-direction: column; gap: 5px; padding: 0 14px 12px; 
}.cf-div {
 padding: 9px 2px 3px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--panel-edge); margin-top: 6px; 
}.cf-done {
 opacity: .72; 
}.cf-row {
 display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #0f0f0f; border: 1px solid var(--accent-dim); border-radius: 4px; 
}.cf-who {
 display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; 
}.cf-who .cas-av {
 width: 30px; height: 30px; font-size: 14px; background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; 
}.cf-names {
 min-width: 0; line-height: 1.35; 
}.cf-names b {
 color: var(--text); 
}.cf-amt {
 color: #46b95a; 
}.cf-names i {
 color: #d9534f; font-style: normal; 
}.cf-call {
 width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #9a9a9a; background: #e8e8e8; color: #151515; font-size: 20px; font-weight: bold; display: flex; align-items: center; justify-content: center; line-height: 1; 
}.cf-items {
 display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; 
}.cf-items img {
 width: 30px; height: 30px; object-fit: contain; 
}.cf-items em {
 font-style: normal; font-size: 11px; color: var(--muted); 
}.cf-noitems {
 font-size: 11px; color: var(--accent-dim); 
}.cf-status {
 flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; 
}.cf-btns {
 display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; 
}.cf-joinbtn, .cf-viewbtn {
 padding: 7px 16px; font-size: 12px; border-radius: 4px; text-decoration: none; color: #151515; background: #fff; border: 1px solid #fff; 
}.cf-joinbtn:hover, .cf-viewbtn:hover {
 background: #dcdcdc; 
}.cf-mbox {
 width: min(760px, 94vw); padding: 0; background: #171717; 
}#cfModal {
 background: rgba(0,0,0,.85); 
}.cf-mhead {
 position: relative; padding: 12px; text-align: center; background: #fff; color: #151515; font-size: 15px; 
}.cf-mclose {
 position: absolute; top: 8px; right: 12px; color: #151515; text-decoration: none; font-size: 20px; line-height: 1; opacity: .8; 
}.cf-mclose:hover {
 opacity: 1; 
}.cf-mbody {
 padding: 20px 22px 22px; 
}.cf-sides {
 display: grid; grid-template-columns: 1fr 1fr; gap: 18px; 
}.cf-mplayer {
 display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; 
}.cf-mav {
 width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: bold; color: #151515; background: #fff; border: 3px solid #bdbdbd; 
}.cf-mav-empty {
 background: #2b2b2b; border-color: #3a3a3a; color: #cfcfcf; 
}.cf-mav-coin {
 font-size: 44px; 
}.cf-mplayer b {
 color: var(--text); font-size: 14px; 
}.cf-mbar {
 display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; background: #fff; border-radius: 4px; color: #151515; font-size: 13px; 
}.cf-mstat {
 color: #151515; font-size: 13px; 
}.game-view .jp-entrants, .game-view .jp-result, .game-view #cfEnd {
 max-width: none; 
}.cf-mbody .jp-result, .cf-mbody #cfEnd {
 max-width: none; margin: 0 0 18px; text-align: center; 
}.cf-mbody .jp-result h3 {
 color: var(--text); letter-spacing: 2px; 
}.cf-mmeta {
 margin: 18px 0 0; font-size: 11px; color: var(--muted); text-align: center; word-break: break-all; 
}.cf-mreq {
 margin: 18px 0 0; font-size: 14px; color: var(--text); text-align: center; 
}.cf-mactions {
 display: flex; gap: 8px; justify-content: center; margin-top: 14px; 
}.cf-mclose2 {
 padding: 7px 18px; font-size: 12px; border-radius: 4px; text-decoration: none; color: var(--text); background: #2b2b2b; border: 1px solid var(--panel-edge); 
}.cf-mclose2:hover {
 border-color: var(--accent-dim); color: #fff; 
}@media (max-width: 900px){
.cf-row {
 flex-wrap: wrap; row-gap: 6px; 
}.cf-items {
 flex-basis: 100%; order: 3; 
}.cf-status {
 order: 4; 
}.cf-sides {
 grid-template-columns: 1fr; 
}.cf-top {
 grid-template-columns: 1fr; gap: 10px; 
}.cf-newgame {
 justify-self: center; 
}
}/* ==========================================================================
   RustyPot proportions: 360px rail | fluid stage | 380px chat
   ========================================================================== */

/* ---- left rail: history rows ---- */
.cas-p > .cas-h {
 padding: 10px 12px; font-size: 13px; 
}.cas-list {
 padding: 10px; gap: 8px; 
}.cas-row {
 gap: 12px; padding: 10px; min-height: 74px; 
}.cas-row .cas-av {
 width: 48px; height: 48px; font-size: 19px; 
}.cas-txt {
 font-size: 13px; line-height: 1.45; 
}.cas-txt b {
 font-size: 15px; display: inline-block; margin-bottom: 2px; 
}.cas-big {
 padding: 22px 14px; gap: 8px; font-size: 14px; 
}.cas-big-av {
 width: 110px; height: 110px; font-size: 34px; 
}.cas-big b {
 font-size: 16px; 
}/* ---- centre: pot bar + ball ---- */
.cas-stage {
 padding: 0; min-height: 104px; border-radius: 10px; display: grid; grid-template-columns: 1fr 170px 1fr; align-items: center; gap: 14px; background: #141414; border: 1px solid var(--panel-edge); 
}.cas-ball {
 width: 128px; height: 128px; font-size: 40px; margin: 0 auto; border-width: 4px; 
}.cas-stage .jp-progress {
 margin: 0 26px 12px; height: 6px; 
}.cas-jp {
 padding: 16px; background: transparent; border: 0; 
}.cas-jp .cas-stage {
 margin-bottom: 16px; 
}.cas-deposit > button {
 padding: 18px; font-size: 20px; letter-spacing: 2px; border-radius: 8px; 
}.cas-deposit {
 margin-bottom: 18px; 
}.cas-deposit select {
 max-width: 420px; padding: 10px; 
}.cas-deposit input[type="number"] {
 padding: 10px; width: 90px; 
}/* ---- centre: current items ---- */
.cas-items {
 padding: 14px; gap: 16px; 
}.cas-tiles {
 gap: 8px; 
}.cas-tile {
 width: 68px; padding: 6px 3px; 
}.cas-tile img {
 width: 52px; height: 52px; 
}.cas-tile em {
 font-size: 12px; 
}/* ---- right rail ---- */
.cas-right .chatbox {
 width: 100%; max-width: none; margin: 0; 
}@media (max-width: 1400px){
.cas-ball {
 width: 104px; height: 104px; font-size: 32px; 
}
}/* ==========================================================================
   Content pages (privacy, terms, rules, faq, support, fair):
   one 1000px centred column, uniform panels, game-page proportions
   ========================================================================== */
body:not(.game-view):not(.admin) main {
 max-width: 1060px !important; padding: 20px 16px 40px; 
}body:not(.game-view):not(.admin) main > .panel {

  display: block; box-sizing: border-box;
  width: 100%; max-width: 1000px; margin: 0 auto 18px;
  padding: 24px 28px; border-radius: 10px;

}body:not(.game-view):not(.admin) main > .panel:first-child {

  padding: 0; overflow: hidden; text-align: center;

}body:not(.game-view):not(.admin) main > .panel:first-child h2 {

  margin: 0; padding: 12px 16px; font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  color: #151515; background: var(--accent);

}body:not(.game-view):not(.admin) main > .panel:first-child p {
 margin: 0; padding: 16px 24px 20px; font-size: 13px; 
}body:not(.game-view):not(.admin) main > .panel > h2 {
 font-size: 17px; letter-spacing: 2px; text-align: center; margin: 0 0 14px; 
}body:not(.game-view):not(.admin) main > .panel > ol, body:not(.game-view):not(.admin) main > .panel > ul {
 max-width: 860px; margin: 0 auto; text-align: left; 
}body:not(.game-view):not(.admin) main > .panel > p {
 max-width: 860px; margin: 0 auto 10px; 
}body:not(.game-view):not(.admin) main > .panel > .hint {
 text-align: center; 
}/* .panel:first-child p zeroes the margin, which pushed centred hints to the left. */
body:not(.game-view):not(.admin) main > .panel:first-child > .hint {
 margin-left: auto; margin-right: auto; 
}body:not(.game-view):not(.admin) main > .panel li {
 margin-bottom: 8px; font-size: 14px; 
}body:not(.game-view):not(.admin) main > .panel h3 {
 font-size: 15px; letter-spacing: 1px; text-align: center; margin: 20px 0 10px; 
}body:not(.game-view):not(.admin) main form {
 max-width: 860px; margin-left: auto; margin-right: auto; 
}body:not(.game-view):not(.admin) main form.vertical {
 max-width: 420px; 
}body:not(.game-view):not(.admin) main .faq-list {
 max-width: 860px; margin: 0 auto; 
}body:not(.game-view):not(.admin) main .faq-item {
 padding: 12px 16px; 
}body:not(.game-view):not(.admin) main .faq-item summary {
 font-size: 15px; 
}body:not(.game-view):not(.admin) main .faq-item p {
 font-size: 14px; line-height: 1.6; 
}@media (max-width: 720px){
body:not(.game-view):not(.admin) main > .panel {
 padding: 16px 14px; 
}
}/* ==========================================================================
   Coinflip: centred stage + fixed chat rail (same rails as the jackpot page)
   ========================================================================== */
body.game-view main.cf-home {

  max-width: 1700px !important; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px; align-items: start;

}body.game-view main.cf-home > section.panel {

  max-width: none !important; width: 100% !important; margin: 0 !important;

}body.game-view main.cf-home > aside.chatbox {
 grid-column: 2; height: 460px; max-height: 460px; 
}@media (max-width: 900px){
body.game-view main.cf-home {
 display: block; 
}body.game-view main.cf-home > aside.chatbox {
 margin-top: 16px; 
}
}/* ==========================================================================
   Site header: one layout for every page (nav left, brand centre, account right)
   ========================================================================== */
body:not(.admin) > header {

  position: sticky; top: 0; z-index: 60;
  /* Wrap is required: below 1240px the brand bar drops to its own full-width
     row (see the media query further down). Do not set nowrap here. */
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #101010; border-bottom: 2px solid var(--accent-dim); padding: 10px 20px;

}body:not(.admin) > header nav {
 order: 1; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; 
}body:not(.admin) > header nav::-webkit-scrollbar {
 display: none; 
}body:not(.admin) > header nav a, body:not(.admin) > header .user-menu button.avatar-btn {
 margin: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; padding: 6px 10px; 
}/* The account button has to read as a nav link: it takes the link colour and
   font, and drops the global button's bold, gradient, filter, lift and shadow. */
body:not(.admin) > header .user-menu button.avatar-btn {

  color: var(--muted); font-family: inherit; font-weight: normal; line-height: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 4px;

}body:not(.admin) > header .user-menu button.avatar-btn:hover {

  filter: none; transform: none; box-shadow: none;
  border-color: #4a4a4a; background: rgba(255,255,255,.06); color: #fff;

}body:not(.admin) > header .cas-topbar {

  order: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 28px;
  margin: 0; padding: 0; background: transparent; border: 0;

}/* Four children now (jackpot, logo, coinflip, account): keep them on one row.
   Must come after the rules above, which are the same specificity. */
body:not(.admin) > header .cas-topbar, body.game-view > header .cas-topbar {
 grid-template-columns: auto auto auto auto; 
}body:not(.admin) > header .cas-tb-item {
 font-size: 13px; font-weight: bold; letter-spacing: 1px; line-height: 1.2; color: var(--text); text-align: center; text-decoration: none; 
}body:not(.admin) > header .cas-tb-item span {
 display: block; font-size: 16px; font-weight: bold; color: var(--accent); 
}body:not(.admin) > header .cas-logo {
 font-size: 40px; font-weight: bold; letter-spacing: 4px; line-height: 1; color: #fff; text-shadow: 0 0 20px rgba(212,212,212,.28); 
}body:not(.admin) > header .user-menu {
 order: 3; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; 
}@media (max-width: 720px){
body:not(.admin) > header {
 justify-content: center; padding-top: 62px; gap: 10px; 
}body:not(.admin) > header .cas-topbar {
 top: 8px; transform: translateX(-50%); gap: 12px; 
}body:not(.admin) > header .cas-logo {
 font-size: 26px; 
}body:not(.admin) > header .cas-tb-item {
 font-size: 11px; 
}body:not(.admin) > header .cas-tb-item span {
 font-size: 13px; 
}
}/* The bar is one horizontal line at every width: labels must never stack
   letter-by-letter when the three columns get squeezed. */
body:not(.admin) > header .cas-topbar {
 flex-wrap: nowrap; 
}body:not(.admin) > header .cas-tb-item {
 white-space: nowrap; 
}@media (max-width: 460px){
body:not(.admin) > header .cas-topbar {
 gap: 5px; 
}body:not(.admin) > header .cas-tb-item {
 font-size: 7px; letter-spacing: 0; 
}body:not(.admin) > header .cas-tb-item span {
 font-size: 9px; 
}body:not(.admin) > header .cas-logo {
 font-size: 14px; letter-spacing: 1px; 
}
}/* Portrait phone: the same single row as the desktop header - nav left, brand
   centred over it, account right. Everything shrinks so it still fits. */
@media (max-width: 720px) {
/* Grid, not an absolutely centred brand: on a phone the floating brand sat on
     top of the nav links. nav | brand | account, all on the one row. */
  /* Two clean rows: nav across the top, brand and account underneath. Squeezing
     the nav into a narrow column left it one link per line, jammed against the
     brand. */
  body:not(.admin) > header nav a, body:not(.admin) > header .user-menu button.avatar-btn {
 font-size: 10px; letter-spacing: 0; padding: 4px 5px; 
}
}/* Shrink the account cluster so it fits beside the nav on a narrow phone. */
@media (max-width: 560px) {
.jp-hero-label {
 font-size: 9px; letter-spacing: 0; 
}.jp-hero-value {
 font-size: 20px; 
}.cas-ball {
 width: 84px; height: 84px; font-size: 24px; 
}.cas-jp .jp-hero .jp-hero-side {
 max-width: 44%; 
}/* Kept deliberately tight: the account cluster is the widest thing in the
     header and has to fit beside the brand bar on one line. */
  body:not(.admin) > header .user-menu {
 gap: 5px; 
}body:not(.admin) > header .user-tomes {
 font-size: 10px; 
}
}/* Rails are flex columns: an auto margin on a panel kills cross-axis stretch, so panels were shrink-wrapping their text instead of filling the rail. */
body.game-view main.cas-home .cas-col > .panel, body.game-view main.cas-home .cas-col > #jpResult {

  align-self: stretch; width: 100%; max-width: none;
  margin-left: 0; margin-right: 0; margin-bottom: 0;

}body.game-view main.cas-home .cas-col > .panel > * {
 max-width: 100%; 
}/* Lock the content-page column so nothing can shrink or offset it again. */
body:not(.game-view):not(.admin) main {

  max-width: 1060px !important; width: 100%; margin-left: auto !important; margin-right: auto !important;
  padding-left: 16px; padding-right: 16px;

}body:not(.game-view):not(.admin) main > .panel {

  display: block !important; align-self: stretch;
  width: 100% !important; max-width: 1000px !important;
  margin-left: auto !important; margin-right: auto !important;

}/* The header balance pill is gone; nothing to reserve. */
.user-menu {
 gap: 8px; 
}/* ---- deposit page: trade builder + escrow tables ---- */
.dep-msg {
 max-width: 860px; margin: 0 auto 12px; padding: 10px 14px; background: #1b1b1b; border: 1px solid var(--panel-edge); border-radius: 6px; 
}.dep-msg.err {
 border-color: #7a3b3b; color: #ffb4b4; 
}.esc-tbl {
 padding: 8px; 
}.esc-row {
 display: grid; grid-template-columns: minmax(0,2.4fr) 120px 100px 60px 110px; gap: 8px; align-items: center; padding: 8px 10px; font-size: 13px; 
}.esc-row + .esc-row {
 border-top: 1px solid var(--panel-edge); 
}.esc-head {
 font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); 
}.esc-item {
 display: flex; align-items: center; gap: 8px; min-width: 0; 
}.esc-item img {
 width: 28px; height: 28px; object-fit: contain; 
}@media (max-width: 720px){
.esc-row {
 grid-template-columns: minmax(0,2fr) 80px 60px; 
}.esc-row > span:nth-child(3), .esc-row > span:nth-child(4) {
 display: none; 
}
}.esc-qty {
 display: inline-flex; align-items: center; gap: 6px; font-size: 12px; 
}.esc-qty input {
 width: 80px; 
}/* ---- deposit page: wider working area ---- */
/* these beat body:not(.game-view):not(.admin) main / form.vertical, which are !important */
body:not(.game-view):not(.admin) main.dep-page {
 max-width: 820px !important; 
}body:not(.game-view):not(.admin) main.dep-page > .panel {
 max-width: 1300px !important; 
}body:not(.game-view):not(.admin) main.dep-page form.vertical {
 max-width: none !important; 
}.dep-page .dep-grid {
 grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 620px; 
}.dep-page .dep-picker {
 padding: 14px; 
}.dep-page .dep-chiprow {
 margin-top: 10px; align-items: center; 
}.dep-page .dep-chiplabel {
 flex: 0 0 70px; 
}.dep-page .dep-card img {
 width: 56px; height: 56px; 
}.dep-page .dep-card span {
 font-size: 12px; 
}.dep-page .esc-row, .dep-page .dep-lines-head, .dep-page .dep-line {
 max-width: 1100px; margin-left: auto; margin-right: auto; 
}@media (max-width: 900px){
main.dep-page {
 max-width: 100% !important; 
}
}/* the create button is the whole bottom bar of the trade builder */
body:not(.game-view):not(.admin) main.dep-page #depSubmit {
 width: 100%; margin-top: 14px; padding: 13px 16px; font-size: 15px; letter-spacing: 1px; 
}/* Display face for the brand bar and item values: Big Shoulders Display (OFL, self-hosted, latin subset). font-display:block so the fallback never flashes
   first - the tall face is what paints, immediately. */
/* Text face: Inter (OFL, self-hosted, latin subset, variable 400-800). */
@font-face {

  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;

}@font-face{

  font-family: 'Crash Display';
  src: url('/fonts/crash-display-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;

}/* The lobby totals deliberately stay on the body font: the display webfont
   arrives late on some connections and every number re-rendered seconds in. */
.cas-logo, .cas-tb-item span {
 font-family: 'Crash Display', 'Inter', sans-serif; 
}.cf-stat b {
 font-family: 'Inter', "Segoe UI", Roboto, system-ui, sans-serif; 
}.cas-tb-item span {
 font-weight: 600; letter-spacing: .5px; 
}.cf-stat b {
 font-weight: 600; letter-spacing: .3px; 
}/* typography pass: prose wants room, monospace stays mono */
body:not(.game-view):not(.admin) main > .panel > p, body:not(.game-view):not(.admin) main .faq-item p {
 line-height: 1.65; 
}body:not(.game-view):not(.admin) main > .panel > h2 {
 letter-spacing: 3px; font-weight: 700; 
}.tbl th, .tbl td {
 font-variant-numeric: tabular-nums; 
}/* The brand bar is absolutely centred over the header, which collides with the
   nav once the type got bigger: below 1240px it takes its own full-width row. */
@media (max-width: 1240px) {
body:not(.game-view):not(.admin) > header {
 row-gap: 6px; 
}body:not(.game-view):not(.admin) > header .cas-topbar {

    position: static; transform: none; order: 4; flex: 1 0 100%;
    justify-content: center; row-gap: 2px;
  
}
}/* Deposit form: plain stacked labels, same shape as the Withdraw panel. */
.dep-page .panel.cas-p {
 display: block; 
}.dep-page #depPanel form.vertical {
 max-width: none; 
}.dep-page #depSubmit {
 display: block; width: 100%; margin-top: 12px; 
}.dep-page #depPanel .hint {
 text-align: left; 
}.dep-page #depPanel .hint img {
 margin-right: 4px; 
}/* ---- deposit chat ---- */
.dc-thread {
 display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 10px; background: #141414; border: 1px solid var(--panel-edge); border-radius: 6px; 
}.dc-empty {
 color: var(--muted); font-size: 13px; margin: 0; 
}.dc-msg {
 font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 6px; background: #1f1f1f; border: 1px solid var(--panel-edge); 
}.dc-msg b {
 color: #fff; 
}.dc-msg span {
 display: block; font-size: 10px; color: var(--muted); margin-top: 3px; 
}.dc-form {
 display: flex; gap: 8px; margin-top: 10px; 
}.dc-form input {
 flex: 1; 
}/* Centre block, but cap the measure so the text wraps evenly instead of
   leaving one short orphaned line, and keep the two notes close together. */
/* Centred by filling the panel and centring the lines: an auto-margin box can
   end up off-centre when a higher-specificity rule sets its width. */
/* The panel's own p rule wins on specificity and was leaving these hard against
   the left edge, so the margins are pinned here explicitly. */
body:not(.game-view):not(.admin) main > .panel > p.faq-note {

  max-width: 860px; text-align: center;
  margin-left: auto !important; margin-right: auto !important;

}.faq-note + .faq-note {
 margin-top: 10px; 
}/* Entrant rows lost their avatar/name column: tile left, chance bar fills the rest. */
.cas-ent.jp-ent {
 display: flex; align-items: center; gap: 14px; 
}.cas-ent.jp-ent .cas-tiles {
 flex: 0 0 auto; margin-top: 0; justify-content: flex-start; 
}.cas-ent.jp-ent .jp-ent-bar {
 flex: 1 1 auto; margin-top: 0; 
}/* The hero ball carries the pot total, so it needs a smaller face for long sums. */
.cas-ball {
 font-size: 26px; letter-spacing: -0.5px; 
}/* The security modal is tall; keep it inside the window instead of running off-screen. */
#secModal .modal-box {
 max-height: 88vh; overflow-y: auto; 
}/* ==========================================================================
   Game page layout - the single authority. Jackpot keeps three rails, coinflip
   two (no left rail). Every earlier duplicate of these grids has been deleted:
   they were the reason a phone kept a 320/0/330 grid and the chat sat on top
   of the stage.
   ========================================================================== */
body.game-view main.cas-home {

  display: grid; align-items: start; gap: 18px; width: 100%; max-width: 1700px !important;
  grid-template-columns: 360px minmax(0, 1fr) 380px !important;

}body.game-view main.cas-home > .cas-left {
 width: 360px; 
}body.game-view main.cas-home > .cas-center {
 width: auto; min-width: 0; 
}body.game-view main.cas-home > .cas-right {
 width: 380px; 
}body.game-view main.cf-home {
 display: grid; align-items: start; gap: 18px; text-align: left; 
}body.game-view main.cf-home {
 grid-template-columns: minmax(0, 1fr) 380px !important; 
}body.game-view main.cf-home > .cas-right {
 width: 380px; 
}@media (max-width: 1400px){
body.game-view main.cas-home {
 grid-template-columns: 320px minmax(0, 1fr) 330px !important; 
}body.game-view main.cas-home > .cas-left {
 width: 320px; 
}body.game-view main.cas-home > .cas-right {
 width: 330px; 
}body.game-view main.cf-home {
 grid-template-columns: minmax(0, 1fr) 330px !important; 
}body.game-view main.cf-home > .cas-right {
 width: 330px; 
}
}/* Below this the rails cannot fit at all: one column, nothing sticky, no clipping. */
@media (max-width: 1000px) {
body.game-view main.cas-home, body.game-view main.cf-home {
 grid-template-columns: minmax(0, 1fr) !important; 
}body.game-view main.cas-home > .cas-left, body.game-view main.cas-home > .cas-right, body.game-view main.cf-home > .cas-right {
 width: auto; max-width: none; 
}body.game-view main.cas-home > .cas-right {
 position: static; max-height: none; overflow: visible; 
}body.game-view main.cf-home {
 display: block; 
}body.game-view main.cf-home > aside.chatbox {
 grid-column: auto; margin-top: 16px; 
}
}/* A short window (landscape phone) must not hand half the screen to the chat. */
@media (max-height: 560px) {
body.game-view main > aside.chatbox, body.game-view main.cf-home > aside.chatbox {
 height: 240px; max-height: 240px; top: 0; 
}
}/* ==========================================================================
   Phone header - last word. It has to sit after the 1240px block, which also
   targets the brand bar and would otherwise force it onto its own full-width
   row and push the account cluster below it.
   Brand and account share a line when there is room and the account wraps to
   its own line when there is not, so they can never overlap at any width.
   ========================================================================== */
@media (max-width: 720px) {
body:not(.admin) > header {

    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; padding: 8px 10px; gap: 6px 8px;
  
}body:not(.admin) > header nav {

    order: 0; flex: 1 0 100%; min-width: 0; flex-wrap: wrap;
    justify-content: center; overflow-x: visible; gap: 1px 4px;
  
}/* Both selectors, not just body:not(.admin): the 1240px rule uses
     body:not(.game-view):not(.admin), which is more specific and would
     otherwise keep forcing the brand onto its own full-width row. */
  body:not(.game-view):not(.admin) > header .cas-topbar, body.game-view:not(.admin) > header .cas-topbar {

    position: static; transform: none; order: 0; flex: 0 1 auto;
    min-width: 0; gap: 10px;
    /* width:100% came from the game-view 720px block and made the brand as wide
       as the whole header (466px on a 500px screen), which is what pushed the
       account cluster onto its own row. */
    width: auto; margin: 0;
  
}body:not(.admin) > header .user-menu {

    order: 0; flex: 0 0 auto; margin-left: auto; align-self: center;
  
}/* Two rows on a phone: the avatar pins to the top-right corner with the nav
     wrapping beside it, and the brand bar takes the second row. Deposit moves
     into the dropdown so it stops pushing the avatar off the edge. Both brand
     selectors are needed - the .game-view one is more specific. */
  /* The nav takes only the width its links need, and the account button fills
     whatever is left in the top-right corner instead of leaving dead space. */
  /* width:auto matters: the 640px block still sets width:100% on the nav, which
     would grab the whole row and push the account button onto its own line. */
  /* The account button is just another nav link: same gap as the links between
     them (the header column gap matches the nav's), no auto margin, so it sits
     right after SUPPORT instead of being pushed to the far edge. */
  body:not(.game-view):not(.admin) > header, body.game-view:not(.admin) > header {
 column-gap: 4px; 
}body:not(.admin) > header nav {
 order: 1; flex: 0 1 auto; min-width: 0; width: auto; 
}body:not(.admin) > header .user-menu {

    order: 2; flex: 0 0 auto; margin-left: 0; align-items: center;
  
}/* No logo on a phone: the bar is the USER label, styled by the nav-link rule. */
  body:not(.admin) > header .user-menu button.avatar-btn {

    width: auto; justify-content: flex-end; gap: 5px;
    /* The global touch rule gives every button min-height:42px; the nav links
       are not buttons and stay 25px, which left USER a much taller box. */
    min-height: 0;
  
}body:not(.admin) > header .user-menu button.avatar-btn img {
 display: none; 
}/* The account control reads as the wordmark on a phone rather than a bare
     USER, with a caret so it is obviously the thing that opens the menu. */
  /* The generic rule above hides every <span> inside the button, so the
     wordmark needs its spans put back. */
  body:not(.admin) > header .user-menu button.avatar-btn .nav-user-label span {
 display: inline; 
}body:not(.admin) > header .user-menu button.avatar-btn .nav-user-label {

    display: inline-flex; align-items: center; gap: 5px; font-weight: normal;
    margin-left: 6px; white-space: nowrap;
  
}body:not(.admin) > header .user-menu button.avatar-btn .nav-user-label .um-logo {

    display: block; width: 22px; height: 22px; border-radius: 0;
  
}body:not(.admin) > header .user-menu button.avatar-btn .nav-user-label .um-caret {

    width: 0; height: 0; margin-left: 6px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--accent);
  
}body:not(.game-view):not(.admin) > header .cas-topbar, body.game-view:not(.admin) > header .cas-topbar {
 order: 3; flex: 1 0 100%; justify-content: center; 
}
}/* Phone brand sizes. The game-view rules (40px logo, 16px pot numbers) are far
   too wide for a phone - they left the bar 466px wide on a 500px screen. */
@media (max-width: 720px) {
body:not(.admin) > header .cas-topbar {
 gap: 9px; 
}body:not(.admin) > header .cas-logo, body.game-view > header .cas-logo {
 font-size: 17px; letter-spacing: 2px; 
}body:not(.admin) > header .cas-tb-item, body.game-view > header .cas-tb-item {
 font-size: 7px; letter-spacing: 0; 
}body:not(.admin) > header .cas-tb-item span, body.game-view > header .cas-tb-item span {
 font-size: 10px; letter-spacing: 0; 
}
}/* On a phone the header balance is the first thing to go: it crowded the brand
   bar on every page. The dropdown carries it instead (mobile only). */
.dd-tomes {
 display: none; 
}@media (max-width: 720px){
body:not(.admin) > header .user-tomes {
 display: none; 
}.dd-tomes {

    display: block; margin: 0 0 8px; padding: 8px 12px; font-weight: bold;
    color: var(--accent); background: #1c1c1c; border: 1px solid var(--panel-edge);
    border-radius: 6px; text-align: center;
  
}
}/* Deposit lives in the dropdown at every width - the header carries the avatar
   only. The combined selector beats the generic .user-dropdown a rule. */
.user-dropdown a.dd-deposit {

  display: block; margin: 0 0 8px; padding: 11px 14px; text-align: center;
  font-weight: bold; color: #151515; background: var(--accent);
  border-radius: 6px; text-decoration: none; text-transform: uppercase;
  letter-spacing: 1px;

}.user-dropdown a.dd-deposit:hover {
 background: #fff; color: #151515; 
}/* Auth modal messages are always something the visitor has to act on, so they
   get a marker of their own instead of reading like ordinary body text. */
#authModal .msg {
 margin:14px 0 0; padding:3px 0 3px 10px; border-left:2px solid var(--accent); color:var(--text); 
}/* Quantity on one line, Join pot under it rather than beside it. */
.cas-jp .jp-join form, .jp-join form {
 flex-direction: column; align-items: center; justify-content: center; 
}/* The account control stays merged into the brand bar in the DOM but belongs at
   the top-right of the header: on a phone that is the nav row beside SUPPORT, on a desktop the screen edge. The header is sticky at top:0, so on wide
   screens a fixed anchor lands on the same pixels as the header itself (the
   brand bar is absolutely centred and would otherwise trap an absolute child).
   Change the header height and these offsets need revisiting. */
body:not(.admin) > header .cas-topbar > .user-menu {

  position: absolute; top: 8px; right: 10px; margin-left: 0;

}/* Back to three brand columns now the account control is out of the flow. */
body:not(.admin) > header .cas-topbar, body.game-view > header .cas-topbar {
 grid-template-columns: auto auto auto; 
}@media (min-width: 721px){
/* position:fixed would be trapped by the brand bar's translate(-50%, -50%), which makes it the containing block for fixed children too. Stay absolute
     and step out of the centred bar by half the viewport minus half of it. */
  body:not(.admin) > header .cas-topbar > .user-menu {

    position: absolute; top: 2px; right: calc(50% - 50vw + 20px); z-index: 61;
  
}
}/* Entrant name above the Tome count on each pot tile. */
.cas-tile > b {
 font-size: 10px; font-weight: bold; color: var(--text); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}/* Pending coin: visible before the flip with a "?", gently pulsing until it
   lands. cfChoice stacks Double down with Return underneath it. */
.coin.coin-idle .coin-face {
 color: var(--muted); border-color: #4a4a4a; 
}.coin.coin-idle {
 animation: coinidle 1.6s ease-in-out infinite; 
}@keyframes coinidle{
0%, 100% {
 transform: scale(1); 
}50% {
 transform: scale(1.05); 
}
}#cfChoice {
 display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; 
}#cfChoice > .ghost {
 display: inline-block; min-width: 150px; text-align: center; text-decoration: none; 
}/* Deposit / Withdraw sit side by side: withdraw left, deposit right. */
.user-dropdown .dd-split {
 display: flex; margin: 0 0 8px; border-radius: 6px; overflow: hidden; 
}.user-dropdown .dd-half {

  flex: 1 1 50%; display: block; text-align: center; padding: 11px 8px;
  margin: 0; border-radius: 0;
  font-weight: bold; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 12px;

}.user-dropdown .dd-half:hover {
 background: #2c2c2c; color: #fff; 
}.user-dropdown .dd-deposit {
 background: var(--accent); color: #151515; border-right: 1px solid #151515; 
}.user-dropdown .dd-deposit:hover {
 background: #fff; 
}.user-dropdown .dd-withdraw {
 background: #2a2a2a; color: var(--text); 
}/* 2FA setup QR */
.qr-wrap {
 display: flex; justify-content: center; margin: 12px 0; 
}#qr2fa svg {
 width: 190px; height: 190px; background: #fff; border-radius: 6px; padding: 6px; display: block; 
}.qr-manual {
 margin: 8px 0 4px; text-align: center; 
}.qr-manual summary {
 cursor: pointer; color: var(--muted); font-size: 12px; 
}.qr-manual code {
 word-break: break-all; 
}/* Withdraw mirrors the deposit form, button included. */
.dep-page .dep-submit {
 display: block; width: 100%; margin-top: 14px; padding: 13px 16px; font-size: inherit; 
}/* Bot-call failure, shown inside the coinflip box. */
.cf-msgerr {
 color: #e05c5c; font-size: 13px; text-align: center; margin: 6px 0 0; 
}#cfBotBtn {
 margin-left: 8px; 
}