/* Layout (v7): the casino-style shell. Desktop: sticky left sidebar (240 px, collapsible to a 64 px icon rail) next to
   the page. Phones: bottom tab bar + the same sidebar markup as a games sheet. Loaded after social.css so it owns the
   offsets of the chat button, toasts and the share card above the tab bar. Colours: green = play / win, amber = bonus,
   blue = info; everything else stays the brand violet / pink. */
:root {
  --side-w: 240px;
  --side-w-min: 64px;
  --tabbar-h: 62px;
  --top-h: 64px;
  --go: #1fe08a;
  --go-deep: #0b9d5e;
  --amber: #ffb300;
  --info: #3aa6e6;
  --sa-b: env(safe-area-inset-bottom, 0px);
}

/* ---- top bar ---- */
.top { gap: 16px; padding: 10px var(--gutter); min-height: var(--top-h); background: rgba(10, 9, 24, 0.86); }
.top-right { gap: 8px; }
.balance { height: 44px; padding: 0 16px 0 10px; gap: 8px; }
.balance .coin { width: 24px; height: 24px; }
.balance .label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 201, 64, 0.7); }
.balance strong { font-size: 1.15rem; }
.bonus { height: 44px; padding: 0 16px; }
.online { height: 44px; }
.account { display: flex; align-items: center; gap: 8px; }
.btn-auth { min-height: 44px; padding: 0 16px; }
.btn-go {
  color: #04170d; background: linear-gradient(180deg, #4cfbae, #12c477);
  box-shadow: 0 8px 22px -8px rgba(31, 224, 138, 0.9), 0 -2px 0 rgba(0, 0, 0, 0.18) inset;
}
.btn-go:hover:not(:disabled) { filter: brightness(1.08); }
.top-tools { gap: 8px; padding-left: 8px; border-left: 1px solid var(--line); }
.icon-btn { width: 44px; height: 44px; }
.install-btn { height: 44px; }
.langs button { height: 38px; }
.menu summary { height: 44px; }
.menu-body .star { font-size: 0.85em; }

/* ---- shell grid: sidebar + page ---- */
.shell {
  --sw: var(--side-w); max-width: 1600px; grid-template-columns: var(--sw) minmax(0, 1fr); align-items: start;
  /* the sidebar column keeps its tint for the whole page height, not only where the sticky nav is */
  background:
    linear-gradient(90deg, transparent calc(var(--sw) - 1px), var(--line) calc(var(--sw) - 1px), var(--line) var(--sw), transparent var(--sw)),
    linear-gradient(90deg, rgba(13, 11, 32, 0.55) var(--sw), transparent var(--sw));
}
.shell.is-collapsed { --sw: var(--side-w-min); }
.side-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(5, 4, 14, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ---- sidebar (desktop) ---- */
.side {
  position: sticky; top: var(--top-h); align-self: start; max-height: calc(100vh - var(--top-h)); overflow-y: auto; scrollbar-width: thin;
  display: grid; align-content: start; gap: 8px; padding: 10px 10px 16px;
}
.side-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 2px 0 10px; }
.side-title { font: 800 0.7rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.side-toggle {
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--card-2); color: var(--mute); box-shadow: 0 0 0 1px var(--line) inset; transition: color var(--fast), transform 80ms ease;
}
.side-toggle:hover { color: var(--ink); }
.side-toggle:active { transform: scale(0.94); }
.side-toggle .ico { transition: transform 240ms var(--ease); }
.side-close { display: none; }
.side-games, .side-more { display: grid; gap: 1px; }
.side-more { padding-top: 8px; border-top: 1px solid var(--line); }
.gm-item, .sd-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px;
  background: none; color: var(--mute); font: 700 0.9rem/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color var(--fast), background var(--fast);
}
.gm-item .gi { width: 26px; height: 26px; transition: transform 240ms var(--ease); }
.sd-item .ico { width: 22px; height: 22px; color: var(--violet-2); }
.gm-item:hover, .sd-item:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.gm-item:hover .gi { transform: translateY(-1px) rotate(-6deg); }
.gm-item:active, .sd-item:active { transform: scale(0.98); }
.gm-item[aria-current="page"], .sd-item[aria-current="page"] {
  color: #fff; background: linear-gradient(90deg, rgba(139, 92, 255, 0.34), rgba(139, 92, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(139, 92, 255, 0.45) inset;
}
.gm-item[aria-current="page"]::before, .sd-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 25%; bottom: 25%; width: 3px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 10px var(--gold);
}
.gm-item[data-game="lobby"] { margin-bottom: 6px; }
.gm-item.is-off { opacity: 0.45; }
.gm-item.is-off::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--lose); }
.sd-contest .ico, .sd-shop .ico { color: var(--gold); }
.sd-bonus .ico { color: var(--amber); }
.sd-item[href="/verify"] .ico { color: var(--win); }
.sd-item[href="/tournaments"] .ico { color: var(--info); }
.sd-docs summary { list-style: none; }
.sd-docs summary::-webkit-details-marker { display: none; }
.sd-docs summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg) translateY(-2px); }
.sd-docs[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sd-docs-body { display: grid; padding: 2px 0 4px 34px; }
.sd-docs-body a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--mute); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.sd-docs-body a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

/* icon rail */
.shell.is-collapsed .side { padding-left: 8px; padding-right: 8px; }
.shell.is-collapsed .side-title, .shell.is-collapsed .gm-item span, .shell.is-collapsed .sd-item > span, .shell.is-collapsed .sd-docs-body,
.shell.is-collapsed .sd-docs summary::after { display: none; }
.shell.is-collapsed .side-top { justify-content: center; padding: 0; }
.shell.is-collapsed .side-toggle .ico { transform: rotate(180deg); }
.shell.is-collapsed .gm-item, .shell.is-collapsed .sd-item { justify-content: center; width: 48px; padding: 0; margin: 0 auto; }
.shell.is-collapsed .gm-item[aria-current="page"]::before, .shell.is-collapsed .sd-item[aria-current="page"]::before { left: -8px; }

/* ---- bottom tab bar (phones only) ---- */
.tabbar { display: none; }

/* ---- the page: the same gutter on every side, dense rhythm ---- */
.page { padding-top: 16px; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  body { padding-bottom: calc(var(--tabbar-h) + var(--sa-b)); }
  /* top bar: brand · balance · bonus · account on one row, the tools on a second row */
  .top { flex-wrap: wrap; gap: 8px; padding: 8px 12px; min-height: 0; }
  .brand { margin-right: auto; }
  .top-right { display: contents; }
  .balance { order: 2; height: 42px; padding: 0 12px 0 8px; }
  .balance .label { display: none; }
  .balance strong { font-size: 1.05rem; }
  .bonus { order: 3; height: 42px; padding: 0 12px; }
  .bonus .b-full { display: none; }
  .bonus .b-short { display: inline; }
  .online { display: none; }
  .account { order: 4; }
  .btn-auth { min-height: 44px; padding: 0 14px; }
  .menu summary { height: 42px; padding: 0 10px 0 5px; }
  .menu summary .name { display: none; }
  .top-tools { order: 6; flex-basis: 100%; justify-content: flex-end; padding-left: 0; border-left: 0; }
  .icon-btn { width: 44px; height: 44px; }
  .install-btn { height: 44px; }
  .langs { padding: 0; margin-right: auto; }
  .langs button { height: 44px; min-width: 44px; padding: 0 8px; }
  /* account menu opens as a sheet above the tab bar */
  /* (the header's backdrop-filter is a containing block for fixed children, so the menu stays a dropdown under it) */
  #account-user .menu-body { width: min(320px, calc(100vw - 24px)); padding: 8px; }
  #account-user .menu-body button, #account-user .menu-body a { min-height: 44px; display: flex; align-items: center; }

  /* games sheet */
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45; max-height: min(82vh, 680px); margin: 0;
    padding: 8px 12px calc(16px + var(--sa-b)); border-right: 0; border-radius: 22px 22px 0 0;
    background: rgba(16, 13, 38, 0.98); box-shadow: 0 -1px 0 var(--line-2), 0 -24px 60px rgba(0, 0, 0, 0.65);
    transform: translateY(104%); visibility: hidden; transition: transform 260ms var(--ease), visibility 0s 260ms;
  }
  .side.is-open { transform: none; visibility: visible; transition: transform 260ms var(--ease); }
  .side-top { padding: 0 0 0 6px; min-height: 48px; }
  .side-title { font-size: 0.8rem; }
  .side-toggle { display: none; }
  .side-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, 0.06); color: var(--mute); font-size: 24px; line-height: 1; }
  .side-games, .side-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .gm-item[data-game="lobby"] { grid-column: 1 / -1; margin-bottom: 2px; }
  .gm-item, .sd-item { min-height: 48px; background: rgba(255, 255, 255, 0.035); }
  .gm-item[aria-current="page"]::before, .sd-item[aria-current="page"]::before { display: none; }
  .sd-docs { grid-column: 1 / -1; }
  .sd-docs-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px 0 0; }
  .sd-docs-body a { min-height: 44px; padding: 0 8px; font-size: 0.75rem; white-space: normal; line-height: 1.15; }

  /* tab bar */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    padding: 5px 6px calc(5px + var(--sa-b)); background: rgba(10, 9, 24, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--line-2), 0 -14px 30px rgba(0, 0, 0, 0.5);
  }
  .tab {
    display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 12px;
    background: none; color: var(--mute); font: 800 0.66rem/1 var(--font); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
    transition: color var(--fast), background var(--fast), transform 80ms ease;
  }
  .tab:active { transform: scale(0.94); }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab .ico, .tab .gi { width: 24px; height: 24px; color: currentColor; }
  .tab-bonus .ico { color: var(--amber); }
  .tab-games[aria-expanded="true"],
  body[data-page="lobby"] .tab-home, body[data-page="contest"] .tab-contest, body[data-page="tournaments"] .tab-contest, body[data-page="profile"] .tab-profile,
  body[data-page="dice"] .tab-games, body[data-page="mines"] .tab-games, body[data-page="crash"] .tab-games, body[data-page="plinko"] .tab-games,
  body[data-page="wheel"] .tab-games, body[data-page="limbo"] .tab-games, body[data-page="coinflip"] .tab-games, body[data-page="keno"] .tab-games,
  body[data-page="hilo"] .tab-games, body[data-page="tower"] .tab-games { color: #fff; background: rgba(139, 92, 255, 0.22); box-shadow: 0 0 0 1px rgba(139, 92, 255, 0.4) inset; }
  body[data-page="lobby"] .tab-home .gi { color: #fff; }

  /* things that float above the page clear the tab bar; on game pages the chat button also clears the sticky play button */
  .chat { bottom: calc(var(--tabbar-h) + 12px + var(--sa-b)); }
  body[data-page="dice"] .chat, body[data-page="mines"] .chat, body[data-page="crash"] .chat, body[data-page="plinko"] .chat, body[data-page="wheel"] .chat,
  body[data-page="limbo"] .chat, body[data-page="coinflip"] .chat, body[data-page="keno"] .chat, body[data-page="hilo"] .chat, body[data-page="tower"] .chat {
    bottom: calc(var(--tabbar-h) + 104px + var(--sa-b));
  }
  .toast { bottom: calc(var(--tabbar-h) + 16px + var(--sa-b)); }
  .sh-card { bottom: calc(var(--tabbar-h) + 24px + var(--sa-b)); }
  .page { padding-top: 12px; }
}
@media (max-width: 640px) {
  .chat { bottom: 0; padding-bottom: calc(var(--tabbar-h) + 12px + var(--sa-b)); }
  body[data-page="dice"] .chat, body[data-page="mines"] .chat, body[data-page="crash"] .chat, body[data-page="plinko"] .chat, body[data-page="wheel"] .chat,
  body[data-page="limbo"] .chat, body[data-page="coinflip"] .chat, body[data-page="keno"] .chat, body[data-page="hilo"] .chat, body[data-page="tower"] .chat {
    bottom: 0; padding-bottom: calc(var(--tabbar-h) + 104px + var(--sa-b));
  }
  .chat:has(.chat-panel:not([hidden])) { padding: 0; bottom: 0; z-index: 47; }
  .chat:has(.chat-panel:not([hidden])) .chat-panel { height: min(76vh, 600px); }
}
@media (max-width: 420px) {
  .brand span { display: none; }
  .btn-auth { padding: 0 12px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .side-toggle .ico { transition: none; }
}

/* ---- contest page: "your place" hero under "My status" (pages/contest.js rankHero; contest.css is owned elsewhere) ---- */
.c-rank-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "label label" "n gap" "n next"; gap: 2px 16px; align-items: center;
  margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(255, 201, 64, 0.14), rgba(139, 92, 255, 0.1)); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.3) inset;
}
.c-rank-hero .label { grid-area: label; }
.c-rank-hero .c-rank-n { grid-area: n; font: 800 clamp(2.4rem, 6vw, 3.2rem)/1 var(--display); color: var(--gold); letter-spacing: -0.02em; }
.c-rank-hero .c-rank-gap { grid-area: gap; margin: 0; font-weight: 800; color: var(--ink); }
.c-rank-hero .c-rank-next { grid-area: next; margin: 0; font-size: 0.85rem; }
.c-rank-hero.is-top { background: linear-gradient(135deg, rgba(31, 224, 138, 0.16), rgba(255, 201, 64, 0.12)); box-shadow: 0 0 0 1px rgba(31, 224, 138, 0.35) inset; }
.c-rank-hero.is-top .c-rank-gap { color: var(--go); }
.c-rank-hero.is-unranked .c-rank-n { color: var(--dim); }
.c-standings tr.is-gap td { border-top: 2px dashed var(--line-2); }
.c-standings tr.is-gap td:first-child .rank { background: rgba(255, 201, 64, 0.16); color: var(--gold); }

/* ---- one-hand mode on game pages (<= 760 px). game.css (<= 900 px) already stacks the screen above the form and makes
   the play button sticky above the tab bar; here the form's auto-placed children are re-ordered so the amount field
   (with its ½ ×2 Min Maks row) sits directly above that sticky button. Same grid, no second sticky rule. ---- */
@media (max-width: 760px) {
  /* .play raises specificity over game.css (linked after this file), which still says order: -3 for the bet field */
  .play .controls .field-bet { order: 10; }
  .play .controls .form-msg { order: 11; }
  .play .controls .play-login { order: 12; }
  .play .controls .action-btn, .play .controls .dir {
    bottom: calc(var(--tabbar-h) + 8px + var(--sa-b)); margin-top: 2px;
    /* above the chat bubble (z 40): when the form is short enough to sit in normal flow the bubble may meet the button's
       corner, and then the play button must win; the open chat panel (z 47) and the games sheet (z 45) still cover it */
    z-index: 41;
    /* a dark pad under the button so form content never shows through while it floats */
    filter: drop-shadow(0 -10px 14px rgba(10, 9, 24, 0.95)) drop-shadow(0 6px 10px rgba(10, 9, 24, 0.9));
  }
  .controls .field-bet .bet-input { box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.35) inset; }
}