/* Extracted from the original index.html. Rule order is preserved. */

  :root {
    --gold: #f7d27a;
    --gold2: #b9822d;
    --bg: #09090f;
    --panel: #13131e;
    --muted: #9c9caf;
    --line: #ffffff12;
    --pink: #ff4fa3;
    --cyan: #55e6dc;
  }
  * {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    background: radial-gradient(ellipse at 50% -20%,#3d2057 0,#15101f 34%,#09090f 70%);
    color: #fff;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
    overflow-x: hidden;
  }
  body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .24;
    background-image: radial-gradient(#fff 0.6px,transparent .8px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom,#000,transparent 75%);
  }
  header {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(18px,5vw,72px);
    border-bottom: 1px solid var(--line);
    background: #09090fc9;
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 950;
    letter-spacing: 2px;
    font-size: 19px;
  }
  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#fff0b0,#b7781e);
    color: #291509;
    box-shadow: 0 0 28px #f7c65c44;
    font-size: 23px;
  }
  .brand span {
    color: var(--gold);
  }
  nav {
    display: flex;
    gap: 26px;
    align-items: center;
  }
  nav a {
    color: #c7c4d4;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .2s;
  }
  nav a:hover,nav a.active {
    color: var(--gold);
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .balance {
    border: 1px solid #f7d27a44;
    background: #f7d27a0c;
    border-radius: 12px;
    padding: 10px 13px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 800;
  }
  .btn {
    border: 0;
    border-radius: 11px;
    padding: 11px 16px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .2s,filter .2s;
  }
  .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }
  .btn-gold {
    color: #241607;
    background: linear-gradient(135deg,#fff0b0,#e6ad45 55%,#a76a1c);
    box-shadow: 0 6px 22px #d59a3330;
  }
  .btn-ghost {
    background: #ffffff0a;
    color: #fff;
    border: 1px solid #ffffff1a;
  }
  main {
    max-width: 1440px;
    margin: auto;
    padding: 28px clamp(16px,4vw,58px) 60px;
  }
  .hero {
    position: relative;
    min-height: 345px;
    border: 1px solid #f4d17c38;
    border-radius: 25px;
    overflow: hidden;
    background: linear-gradient(100deg,#21152f 0%,#301b43 43%,#151020 100%);
    box-shadow: 0 24px 90px #0007;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    isolation: isolate;
  }
  .hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 78% 45%,#b84dce45,transparent 33%),linear-gradient(90deg,#0b0910aa,transparent 80%);
    z-index: -1;
  }
  .hero-copy {
    padding: clamp(28px,5vw,62px);
    align-self: center;
    z-index: 2;
  }
  .eyebrow {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow:before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gold);
  }
  h1 {
    font-size: clamp(35px,5vw,64px);
    line-height: .98;
    letter-spacing: -2px;
    margin: 18px 0 16px;
    max-width: 600px;
  }
  h1 em {
    font-style: normal;
    background: linear-gradient(100deg,#fff6c8,#f5c65d 45%,#fff1a7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 5px 40px #f0bd5b2b;
  }
  .hero p {
    color: #c7bdcf;
    line-height: 1.65;
    max-width: 430px;
    font-size: 14px;
  }
  .hero-cta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
  }
  .hero-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
    perspective: 800px;
  }
  .halo {
    position: absolute;
    width: min(34vw,370px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,#f4c45a30,transparent 66%);
    border: 1px solid #f7d27a24;
    box-shadow: 0 0 90px #d58b3d18,inset 0 0 50px #e9ad5420;
  }
  .coin {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#fff0a9,#c78624 60%,#71420d);
    border: 5px double #ffe5a0;
    color: #58350a;
    font-size: 38px;
    box-shadow: 0 15px 35px #0007;
    animation: float 4s ease-in-out infinite;
  }
  .coin.c1 {
    top: 13%;
    left: 18%;
    transform: rotate(-18deg) scale(.72);
    animation-delay: -1s;
  }
  .coin.c2 {
    bottom: 10%;
    right: 12%;
    transform: rotate(15deg) scale(.9);
    animation-delay: -2s;
  }
  .coin.c3 {
    top: 16%;
    right: 13%;
    transform: scale(.55);
    animation-delay: -3s;
  }
  .slot-machine {
    position: relative;
    z-index: 2;
    width: min(78%,310px);
    padding: 13px;
    border-radius: 24px;
    background: linear-gradient(145deg,#ffefae,#9d5b19 13%,#2d1534 22%,#130d20 70%,#f2c75f 100%);
    box-shadow: 0 25px 50px #000a,0 0 45px #f2bc5340;
    transform: rotateY(-9deg) rotateX(4deg);
    animation: machine 6s ease-in-out infinite;
  }
  .slot-top {
    text-align: center;
    font-weight: 1000;
    letter-spacing: 4px;
    color: #ffe9a0;
    text-shadow: 0 2px #6e3d12;
    font-size: 12px;
    padding: 3px 0 10px;
  }
  .reels {
    display: flex;
    gap: 7px;
    padding: 10px;
    background: #07050d;
    border: 2px solid #c38c3d;
    border-radius: 12px;
    box-shadow: inset 0 0 18px #000;
  }
  .reel {
    flex: 1;
    height: 105px;
    border-radius: 7px;
    background: linear-gradient(#fff7d5,#d4c8a4 48%,#fff3c8);
    display: grid;
    place-items: center;
    font-size: 43px;
    box-shadow: inset 0 0 10px #7a5a25;
    overflow: hidden;
  }
  .machine-bottom {
    text-align: center;
    font-size: 10px;
    letter-spacing: 3px;
    color: #ffda7a;
    font-weight: 900;
    padding: 11px 0 3px;
  }
  .hero-spin-row {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: 9px;
  }
  .hero-spin-btn {
    flex: 1;
    border: 1px solid #ffe4a0;
    border-radius: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg,#ffe9a0,#d99b36);
    color: #281707;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 5px 15px #0005;
    transition: transform .18s,filter .18s;
  }
  .hero-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
  }
  .hero-spin-btn:disabled {
    opacity: .7;
    cursor: wait;
  }
  .hero-spin-result {
    min-height: 15px;
    text-align: center;
    color: #ffe6a0;
    font-size: 10px;
    font-weight: 800;
    margin-top: 7px;
    letter-spacing: .3px;
  }
  .slot-machine.is-spinning .reel {
    animation: heroReelSpin .18s linear infinite;
    filter: blur(1px);
  }
  .slot-machine.is-winning {
    box-shadow: 0 25px 50px #000a,0 0 38px #f2bc5377,0 0 0 2px #ffe9a0;
  }
  @keyframes heroReelSpin {
    0% {
      transform: translateY(-9px);
    }
    50% {
      transform: translateY(8px);
    }
    100% {
      transform: translateY(-9px);
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .slot-machine.is-spinning .reel {
      animation-duration: .01ms;
    }
  }
  .light {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff4a6;
    border-radius: 50%;
    box-shadow: 0 0 12px #ffd86c;
    animation: blink 1.5s infinite alternate;
  }
  .light.l1 {
    top: 13%;
    left: 10%;
  }
  .light.l2 {
    top: 33%;
    right: 9%;
    animation-delay: .6s;
  }
  .light.l3 {
    bottom: 17%;
    left: 14%;
    animation-delay: .9s;
  }
  @keyframes float {
    0%,100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -13px;
    }
  }
  @keyframes machine {
    0%,100% {
      transform: rotateY(-9deg) rotateX(4deg) translateY(0);
    }
    50% {
      transform: rotateY(-4deg) rotateX(1deg) translateY(-8px);
    }
  }
  @keyframes blink {
    from {
      opacity: .3;
    }
    to {
      opacity: 1;
    }
  }
  .stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 22px 0 32px;
  }
  .stat {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: linear-gradient(130deg,#ffffff08,#ffffff02);
    padding: 15px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
  }
  .stat-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    background: #f5c75d14;
    border: 1px solid #f5c75d28;
    border-radius: 12px;
    font-size: 20px;
  }
  .stat small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 4px;
  }
  .stat strong {
    font-size: 16px;
  }
  .section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 16px;
  }
  .section-head h2 {
    margin: 0;
    font-size: 23px;
    letter-spacing: -.5px;
  }
  .section-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
  }
  .view-all {
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }
  .filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .filter {
    background: #ffffff08;
    border: 1px solid #ffffff14;
    color: #aaa8ba;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  .filter.active {
    color: #211507;
    background: linear-gradient(135deg,#ffe7a0,#d69a35);
    border-color: transparent;
  }
  .games {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 17px;
  }
  .game {
    min-width: 0;
    position: relative;
    border: 1px solid #ffffff13;
    border-radius: 17px;
    overflow: hidden;
    background: #14131e;
    transition: transform .25s,border-color .25s,box-shadow .25s;
    cursor: pointer;
    transform-style: preserve-3d;
  }
  .game:hover {
    transform: none;
    border-color: #f7d27a75;
    box-shadow: 0 12px 28px #0007;
  }
  .game-art {
    height: 170px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%,var(--glow),transparent 56%),linear-gradient(145deg,var(--c1),var(--c2));
  }
  .game-art:before {
    content: "";
    position: absolute;
    inset: -40%;
    background: repeating-conic-gradient(from 0deg at 50% 50%,#ffffff08 0deg 7deg,transparent 7deg 14deg);
    animation: spin 35s linear infinite;
  }
  .game-art:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 55%,#0d0b15b8);
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .game-symbol {
    width: min(78%,240px);
    height: 72%;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 9px 10px #0008);
    z-index: 1;
    transition: transform .3s;
  }
  .game:hover .game-symbol {
    transform: scale(1.06) translateY(-4px);
  }
  .game-badge {
    position: absolute;
    z-index: 2;
    top: 11px;
    left: 11px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f7d27a;
    color: #241707;
  }
  .heart {
    position: absolute;
    right: 10px;
    top: 9px;
    z-index: 3;
    border: 1px solid #ffffff30;
    background: #08071080;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 15px;
  }
  .heart.saved {
    color: #ff5d9d;
    background: #40182d;
  }
  .game-info {
    padding: 13px 14px 14px;
  }
  .game-title {
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .game-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a6a2b6;
    font-size: 10px;
    margin-top: 7px;
  }
  .game-meta strong {
    color: var(--gold);
    font-size: 11px;
  }
  .play {
    width: 100%;
    margin-top: 12px;
    padding: 9px;
    border-radius: 9px;
    background: #ffffff0a;
    border: 1px solid #ffffff16;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
  }
  .game:hover .play {
    background: linear-gradient(100deg,#f8dc8c,#c78b2d);
    color: #211507;
    border-color: transparent;
  }
  .promo {
    margin-top: 30px;
    border: 1px solid #ff4fa344;
    border-radius: 18px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: radial-gradient(ellipse at 80% 50%,#ff4fa31b,transparent 45%),linear-gradient(100deg,#26132a,#15101d);
  }
  .promo h3 {
    margin: 0 0 6px;
    font-size: 19px;
  }
  .promo p {
    margin: 0;
    color: #bcb0c5;
    font-size: 12px;
  }
  .promo .spark {
    font-size: 36px;
    margin-right: 14px;
  }
  .promo-left {
    display: flex;
    align-items: center;
  }
  footer {
    border-top: 1px solid var(--line);
    padding: 24px clamp(18px,5vw,72px);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #79778a;
    font-size: 11px;
  }
  footer strong {
    color: #c8bd9e;
  }
  .toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translate(-50%,20px);
    opacity: 0;
    pointer-events: none;
    z-index: 99;
    background: #21192c;
    border: 1px solid #f7d27a66;
    color: #fff;
    padding: 13px 42px 13px 18px;
    border-radius: 12px;
    box-shadow: 0 12px 40px #0009;
    font-size: 13px;
    transition: opacity .25s,transform .25s;
    max-width: min(92vw,680px);
    text-align: center;
  }
  .toast.show {
    opacity: 1;
    transform: translate(-50%,0);
    pointer-events: auto;
  }
  .toast-close {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid #ffffff30;
    border-radius: 8px;
    background: #ffffff12;
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
  }
  .toast-close:hover {
    background: #ffffff28;
  }
  .toast.win-toast {
    border-color: #ffe27c;
    box-shadow: 0 0 0 2px #ffd65d38,0 0 30px #ffc83d55,0 12px 40px #000b;
    color: #fff4c4;
    font-weight: 850;
  }
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #05040be8;
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    transition: opacity .22s;
  }
  .modal-backdrop.open {
    display: flex;
    opacity: 1;
  }
  .game-modal {
    position: relative;
    width: min(680px,100%);
    max-height: min(90vh,760px);
    overflow: auto;
    border: 1px solid #f7d27a55;
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0%,#47235c 0,#171321 48%,#0d0b14 100%);
    box-shadow: 0 30px 100px #000c;
    transform: translateY(14px) scale(.98);
    transition: transform .22s;
  }
  .modal-backdrop.open .game-modal {
    transform: translateY(0) scale(1);
  }
  .modal-close {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #ffffff30;
    background: #090711b8;
    color: white;
    font-size: 23px;
    cursor: pointer;
  }
  .modal-hero {
    position: relative;
    min-height: 245px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%,var(--glow,#f6c85d55),transparent 42%),linear-gradient(135deg,var(--c1,#39204b),var(--c2,#100d1c));
  }
  .modal-hero:before {
    content: "";
    position: absolute;
    inset: -40%;
    background: repeating-conic-gradient(from 0deg at 50% 50%,#ffffff09 0deg 6deg,transparent 6deg 13deg);
    animation: spin 38s linear infinite;
  }
  .modal-symbol {
    position: relative;
    z-index: 1;
    font-size: 112px;
    filter: drop-shadow(0 15px 18px #0009);
    animation: modalFloat 3.2s ease-in-out infinite;
  }
  .modal-thumbnail {
    position: relative;
    z-index: 1;
    display: block;
    width: min(76%,300px);
    height: 170px;
    object-fit: contain;
    filter: drop-shadow(0 15px 18px #0009);
    animation: modalFloat 3.2s ease-in-out infinite;
    border-radius: 10px;
  }
  #gameWorkspace .modal-thumbnail {
    width: min(78%,340px);
    height: 150px;
  }
  @media(max-width:700px) {
    #gameWorkspace .modal-thumbnail {
      height: 120px;
    }
  }
  @keyframes modalFloat {
    0%,100% {
      transform: translateY(0) rotate(-3deg);
    }
    50% {
      transform: translateY(-10px) rotate(3deg);
    }
  }
  .modal-copy {
    padding: 25px clamp(20px,5vw,38px) 32px;
  }
  .modal-kicker {
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 2.5px;
    color: var(--gold);
    text-transform: uppercase;
  }
  .modal-copy h2 {
    font-size: clamp(25px,4vw,35px);
    margin: 9px 0 8px;
    letter-spacing: -1px;
  }
  .modal-copy p {
    color: #bcb5c9;
    line-height: 1.65;
    font-size: 13px;
    margin: 0;
    max-width: 540px;
  }
  .modal-details {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
  }
  .modal-chip {
    border: 1px solid #ffffff18;
    background: #ffffff08;
    border-radius: 9px;
    padding: 9px 11px;
    color: #d8d2e2;
    font-size: 11px;
  }
  .modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .modal-actions .btn {
    min-width: 135px;
  }
  .demo-stage {
    display: none;
    margin-top: 18px;
    border: 1px solid #f7d27a30;
    border-radius: 14px;
    padding: 17px;
    background: #08070dbb;
    text-align: center;
  }
  .demo-stage.visible {
    display: block;
  }
  .demo-reels {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
  }
  .demo-reel {
    width: 68px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(#fff4cb,#d4b96f);
    color: #241707;
    font-size: 32px;
    box-shadow: inset 0 0 10px #7a5a25;
  }
  .demo-note {
    font-size: 11px;
    color: #aaa1b9;
  }
  .workspace-toolbar {
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 13px;
    border: 1px solid #f7d27a55;
    border-radius: 12px;
    background: #100d1beF;
    box-shadow: 0 10px 35px #0008;
    pointer-events: auto;
    color: #e9d7a4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
  }
  .workspace-toolbar .btn {
    font-size: 11px;
    padding: 9px 12px;
  }
  @media(max-width:700px) {
    .workspace-toolbar {
      position: sticky;
      top: 0;
      right: auto;
      align-self: flex-end;
      margin: 0 0 10px;
      flex-shrink: 0;
    }
  }
  /* Reel-spin transition between catalog pages */
  .games.page-spinning {
    pointer-events: none;
  }
  .games.page-spinning .game {
    animation: catalogReelSpin .72s cubic-bezier(.18,.72,.22,1) both;
    animation-delay: calc(var(--spin-index,0)*28ms);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
  }
  .games.page-spinning .game .game-art {
    animation: reelArtBlur .72s ease-in-out both;
    animation-delay: calc(var(--spin-index,0)*28ms);
  }
  @keyframes catalogReelSpin {
    0% {
      transform: perspective(900px) rotateX(0) rotateY(0) translateY(0) scale(1);
      filter: blur(0);
      opacity: 1;
    }
    35% {
      transform: perspective(900px) rotateX(55deg) rotateY(8deg) translateY(-18px) scale(.94);
      filter: blur(3px);
      opacity: .65;
    }
    65% {
      transform: perspective(900px) rotateX(-48deg) rotateY(-6deg) translateY(18px) scale(.94);
      filter: blur(3px);
      opacity: .65;
    }
    100% {
      transform: perspective(900px) rotateX(0) rotateY(0) translateY(0) scale(1);
      filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes reelArtBlur {
    0%,100% {
      filter: blur(0);
    }
    40%,60% {
      filter: blur(5px) brightness(1.35);
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .games.page-spinning .game,.games.page-spinning .game .game-art {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
    }
  }
  /* Whole-column 3D reel rotation on page changes */
  .games {
    transform-style: preserve-3d;
    perspective: 1500px;
  }
  .games .game {
    --col-index: 0;
    --row-index: 0;
  }
  .games.page-spinning .game {
    animation: columnReelRotate .92s cubic-bezier(.22,.75,.25,1) both;
    animation-delay: calc(var(--col-index)*100ms + var(--row-index)*35ms);
    backface-visibility: hidden;
  }
  .games.page-spinning .game .game-symbol {
    animation: columnSymbolRoll .92s ease-in-out both;
  }
  @keyframes columnReelRotate {
    0% {
      opacity: 1;
      transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(0) scale(1);
      filter: blur(0);
    }
    22% {
      opacity: .95;
      transform: perspective(1200px) rotateY(calc((var(--col-index) - 1)*-34deg)) rotateX(38deg) translateZ(30px) scale(.97);
      filter: blur(1px);
    }
    48% {
      opacity: .22;
      transform: perspective(1200px) rotateY(calc((var(--col-index) - 1)*-82deg)) rotateX(90deg) translateZ(-45px) scale(.86);
      filter: blur(4px);
    }
    68% {
      opacity: .18;
      transform: perspective(1200px) rotateY(calc((var(--col-index) - 1)*76deg)) rotateX(-68deg) translateZ(-20px) scale(.9);
      filter: blur(3px);
    }
    100% {
      opacity: 1;
      transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(0) scale(1);
      filter: blur(0);
    }
  }
  @keyframes columnSymbolRoll {
    0% {
      transform: translateZ(24px) rotateY(0) rotateX(0) scale(1);
    }
    35% {
      transform: translateZ(24px) rotateY(150deg) rotateX(200deg) scale(.7);
    }
    70% {
      transform: translateZ(24px) rotateY(360deg) rotateX(410deg) scale(.8);
    }
    100% {
      transform: translateZ(24px) rotateY(360deg) rotateX(720deg) scale(1);
    }
  }
  @media(max-width:700px) {
    .games.page-spinning .game {
      animation-name: mobileColumnReel;
      animation-duration: .78s;
    }
    @keyframes mobileColumnReel {
      0% {
        opacity: 1;
        transform: rotateX(0deg) translateY(0) scale(1);
        filter: blur(0);
      }
      35% {
        opacity: .5;
        transform: rotateX(75deg) translateY(-18px) scale(.94);
        filter: blur(3px);
      }
      68% {
        opacity: .25;
        transform: rotateX(-70deg) translateY(14px) scale(.91);
        filter: blur(3px);
      }
      100% {
        opacity: 1;
        transform: rotateX(0deg) translateY(0) scale(1);
        filter: blur(0);
      }
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .games.page-spinning .game,.games.page-spinning .game .game-symbol {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
    }
  }
  /* Full-card slot reels: each entire game card rolls vertically */
  .games {
    perspective: 1400px;
    transform-style: preserve-3d;
  }
  .games.page-spinning .game-column {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    animation: reelColumnMove .9s cubic-bezier(.2,.65,.2,1) both;
    animation-delay: calc(var(--column-index,0)*120ms);
    backface-visibility: hidden;
  }
  .games.page-spinning .game-column:before,.games.page-spinning .game-column:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 10;
    pointer-events: none;
  }
  .games.page-spinning .game-column:before {
    top: 0;
    background: linear-gradient(#0b0914,transparent);
  }
  .games.page-spinning .game-column:after {
    bottom: 0;
    background: linear-gradient(transparent,#0b0914);
  }
  /* Animate the complete card element — art, title, details, and play button together. */
  .games.page-spinning .game-column .game {
    animation: wholeCardReel .9s cubic-bezier(.2,.65,.2,1) both !important;
    animation-delay: calc(var(--column-index,0)*120ms) !important;
    will-change: transform,opacity,filter;
    transform-origin: center center;
  }
  @keyframes reelColumnMove {
    0% {
      transform: translateY(-22px);
      filter: blur(0);
    }
    25% {
      transform: translateY(18px);
      filter: blur(1px);
    }
    55% {
      transform: translateY(-32px);
      filter: blur(4px);
    }
    78% {
      transform: translateY(8px);
      filter: blur(1px);
    }
    100% {
      transform: translateY(0);
      filter: blur(0);
    }
  }
  @keyframes wholeCardReel {
    0% {
      transform: translateY(-115%) rotateX(-12deg) scale(.96);
      opacity: 0;
      filter: blur(5px);
    }
    18% {
      transform: translateY(-45%) rotateX(-6deg) scale(.98);
      opacity: .45;
      filter: blur(3px);
    }
    42% {
      transform: translateY(24%) rotateX(5deg) scale(1);
      opacity: 1;
      filter: blur(1px);
    }
    64% {
      transform: translateY(-13%) rotateX(-3deg) scale(1);
      opacity: 1;
      filter: blur(0);
    }
    82% {
      transform: translateY(5%) rotateX(1deg) scale(1);
      opacity: 1;
      filter: blur(0);
    }
    100% {
      transform: translateY(0) rotateX(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .games.page-spinning .game-column,.games.page-spinning .game-column .game {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
    }
  }
  .random-page-btn {
    margin-left: auto;
    border-color: #f7d27a55;
    color: var(--gold);
    background: linear-gradient(135deg,#f7d27a12,#b9822d12);
    white-space: nowrap;
  }
  .random-page-btn:hover {
    background: linear-gradient(135deg,#ffe7a0,#d69a35);
    color: #241707;
  }
  .random-page-btn {
    width: 116px;
    height: 116px;
    min-width: 116px;
    aspect-ratio: 1/1;
    padding: 0;
    margin-left: auto;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 116px;
    border: 1px solid #354765;
    color: #fff;
    background: radial-gradient(circle at 45% 35%,#1b2b45 0%,#111e33 68%,#0a1222 100%);
    box-shadow: 0 0 0 8px #050b16e8,0 0 0 9px #24344d66,0 8px 22px #0008,inset 0 1px 1px #ffffff12;
    font-size: 0;
    position: relative;
    flex-shrink: 0;
    transition: transform .2s ease,box-shadow .2s ease;
  }
  .random-page-btn .spin-icon {
    width: 58px;
    height: 58px;
    display: block;
    margin-left: 9px;
    overflow: visible;
    filter: drop-shadow(0 1px 1px #0005);
  }
  .random-page-btn .spin-icon path {
    fill: #f5f7fb;
    stroke: #f5f7fb;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .random-page-btn:hover {
    transform: scale(1.045);
    background: radial-gradient(circle at 45% 35%,#223550 0%,#14223a 68%,#0a1222 100%);
    box-shadow: 0 0 0 8px #050b16e8,0 0 0 10px #34486488,0 10px 26px #0009,inset 0 1px 1px #ffffff18;
  }
  .random-page-btn.active {
    background: radial-gradient(circle at 45% 35%,#263955 0%,#17253d 68%,#0a1222 100%);
    box-shadow: 0 0 0 8px #050b16e8,0 0 0 10px #405577aa,0 0 24px #7e9ac433,inset 0 1px 1px #ffffff18;
  }
  .random-page-btn:active {
    transform: scale(.98);
  }
  .random-page-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }
  @media(max-width:700px) {
    .random-page-btn {
      margin-left: 0;
      width: 96px;
      height: 96px;
      min-width: 96px;
      flex-basis: 96px;
    }
    .random-page-btn .spin-icon {
      width: 49px;
      height: 49px;
      margin-left: 7px;
    }
  }
  /* 3x3 game catalog pagination */
  .games {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 22px 0 4px;
  }
  .page-btn {
    min-width: 39px;
    height: 39px;
    padding: 0 12px;
    border: 1px solid #ffffff1c;
    border-radius: 10px;
    background: #ffffff08;
    color: #c8c2d5;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: .2s;
  }
  .page-btn:hover:not(:disabled) {
    border-color: #f7d27a88;
    color: #ffe7a0;
    transform: translateY(-2px);
  }
  .page-btn.active {
    background: linear-gradient(135deg,#fff0b0,#d69a35);
    border-color: transparent;
    color: #241707;
    box-shadow: 0 5px 18px #d69a3533;
  }
  .page-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
  }
  .page-status {
    color: #aaa3b8;
    font-size: 11px;
    margin: 0 8px;
    min-width: 105px;
    text-align: center;
  }
  .win-message-inline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1 1 360px;
    min-width: 240px;
    max-width: 520px;
    margin-left: 14px;
    min-height: 58px;
    padding: 10px 38px 10px 16px;
    border: 1px solid #ffe27c;
    border-radius: 13px;
    background: radial-gradient(ellipse at 50% 0%,#ffe58a35,transparent 75%),linear-gradient(135deg,#34220b,#20132a 75%);
    color: #fff4bc;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 0 12px #ffc83d99;
    box-shadow: 0 0 0 2px #ffd65d35,0 0 24px #ffc83d77,inset 0 0 18px #ffc83d17;
    animation: winInlinePulse 1.7s ease-in-out infinite alternate;
  }
  .win-message-inline[hidden] {
    display: none;
  }
  .win-message-inline button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    border: 1px solid #fff3a755;
    border-radius: 8px;
    background: #ffffff12;
    color: #fff4bc;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .win-message-inline button:hover {
    background: #ffffff2b;
    box-shadow: 0 0 12px #ffc83d77;
  }
  @keyframes winInlinePulse {
    from {
      box-shadow: 0 0 0 2px #ffd65d30,0 0 18px #ffc83d55,inset 0 0 12px #ffc83d12;
    }
    to {
      box-shadow: 0 0 0 3px #ffd65d66,0 0 32px #ffc83dcc,inset 0 0 22px #ffc83d25;
    }
  }
  @media(max-width:850px) {
    .win-message-inline {
      flex-basis: 280px;
      min-width: 190px;
      max-width: 100%;
      margin-left: 12px;
      font-size: 11px;
      padding-left: 10px;
      padding-right: 34px;
    }
  }
  @media(max-width:700px) {
    .games {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .win-message-inline {
      margin-left: 0;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media(max-width:390px) {
    .games {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }
  /* Interactive 3D game cards */
  .games {
    perspective: 1200px;
    perspective-origin: 50% 45%;
  }
  .game {
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
  }
  .game .game-art {
    transform: translateZ(12px);
    transform-style: preserve-3d;
  }
  .game .game-symbol {
    transform: translateZ(24px);
    text-shadow: 0 10px 18px #0009;
  }
  .game .game-badge,.game .heart {
    transform: translateZ(28px);
  }
  .game .game-info {
    position: relative;
    transform: translateZ(8px);
    background: linear-gradient(150deg,#191724,#100e18);
  }
  .game:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid #ffffff12;
    box-shadow: inset 0 1px #ffffff18;
    opacity: .8;
    transition: opacity .2s;
  }
  .game.is-tilting:after {
    opacity: 1;
    box-shadow: inset 0 1px #ffffff40,inset 0 0 28px #f7d27a12;
  }
  .game {
    transition: transform .16s ease-out,border-color .25s,box-shadow .25s;
  }
  .game .game-art:before {
    transform: translateZ(1px);
  }
  @media(hover:none),(max-width:700px) {
    .game,.game:hover {
      transform: none !important;
    }
    .game .game-art,.game .game-symbol,.game .game-info {
      transform: none;
    }
  }
  /* Multi-game desktop workspace */
  #gameWorkspace {
    display: none;
    opacity: 1;
    pointer-events: none;
    background: #05040b80;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
  }
  #gameWorkspace.open {
    display: block;
  }
  #gameWorkspace .game-modal {
    position: absolute;
    pointer-events: auto;
    width: min(520px,calc(100vw - 28px));
    max-height: min(680px,calc(100vh - 28px));
    margin: 0;
    overflow: auto;
    resize: both;
    min-width: 290px;
    min-height: 300px;
    transition: box-shadow .18s;
    transform: none;
  }
  #gameWorkspace .game-modal.focused {
    box-shadow: 0 35px 110px #000e,0 0 0 1px #f7d27a88;
  }
  #gameWorkspace .modal-hero {
    min-height: 180px;
  }
  #gameWorkspace .modal-symbol {
    font-size: 82px;
  }
  #gameWorkspace .modal-copy {
    padding: 19px 22px 24px;
  }
  #gameWorkspace .modal-copy h2 {
    font-size: 25px;
  }
  #gameWorkspace .modal-copy p {
    font-size: 12px;
  }
  .window-bar {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: #080710d9;
    border-bottom: 1px solid #f7d27a33;
    color: #e9d7a4;
    font-size: 10px;
    letter-spacing: 1.2px;
    font-weight: 900;
    cursor: move;
    touch-action: none;
  }
  .window-bar .window-count {
    color: #a9a0b8;
    font-weight: 600;
    letter-spacing: 0;
  }
  .window-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    padding: 0 4px;
  }
  #gameWorkspace .game-modal .modal-close {
    display: none;
  }
  #gameWorkspace .game-modal .modal-hero {
    clear: both;
  }
  @media(max-width:700px) {
    #gameWorkspace {
      overflow-y: auto;
      padding: 10px;
      align-items: flex-start;
    }
    #gameWorkspace .game-modal {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      width: 100%;
      max-width: none;
      max-height: none;
      min-width: 0;
      min-height: 0;
      resize: none;
      margin: 0 0 12px;
    }
    #gameWorkspace.open {
      display: flex;
      flex-direction: column;
    }
    #gameWorkspace .modal-hero {
      min-height: 145px;
    }
    #gameWorkspace .modal-symbol {
      font-size: 65px;
    }
  }
  @media(max-width:950px) {
    nav {
      gap: 13px;
    }
    .games {
      grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .hero {
      grid-template-columns: 1fr .8fr;
    }
    .hero-copy {
      padding: 32px;
    }
    .hero-art {
      min-width: 240px;
    }
  }
  @media(max-width:700px) {
    header {
      height: 65px;
    }
    .brand {
      font-size: 15px;
    }
    .brand-mark {
      width: 33px;
      height: 33px;
    }
    .nav-links {
      display: none;
    }
    .balance {
      display: none;
    }
    main {
      padding-top: 17px;
    }
    .hero {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .hero-copy {
      padding: 31px 25px 10px;
    }
    .hero-art {
      min-height: 240px;
    }
    .slot-machine {
      width: 230px;
    }
    .reel {
      height: 75px;
      font-size: 34px;
    }
    .coin {
      width: 60px;
      height: 60px;
      font-size: 28px;
    }
    .stats {
      gap: 8px;
    }
    .stat {
      padding: 12px 9px;
      gap: 8px;
    }
    .stat-icon {
      width: 31px;
      height: 31px;
      font-size: 16px;
    }
    .stat strong {
      font-size: 12px;
    }
    .stat small {
      font-size: 9px;
    }
    .games {
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 11px;
    }
    .game-art {
      height: 140px;
    }
    .game-symbol {
      font-size: 62px;
    }
    .section-head h2 {
      font-size: 20px;
    }
    .promo {
      padding: 18px;
      align-items: flex-start;
    }
    .promo h3 {
      font-size: 16px;
    }
    .promo .btn {
      padding: 10px;
      font-size: 11px;
    }
    footer {
      flex-direction: column;
    }
  }
  @media(max-width:390px) {
    .actions .btn {
      padding: 9px 10px;
      font-size: 11px;
    }
    .games {
      gap: 8px;
    }
    .game-art {
      height: 120px;
    }
    .game-info {
      padding: 11px;
    }
    .hero-cta {
      flex-wrap: wrap;
    }
  }
  /* Competition statistics panel */
  .competition {
    margin: 30px 0 0;
    padding: clamp(18px,3vw,30px);
    border: 1px solid #f7d27a2e;
    border-radius: 22px;
    background: radial-gradient(ellipse at 92% 0%,#8b5bd21c,transparent 42%),linear-gradient(135deg,#171321,#100e18 70%);
    box-shadow: 0 18px 50px #0003;
    position: relative;
    overflow: hidden;
  }
  .competition:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(#ffe8a0,#b67a27,transparent);
  }
  .competition-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
  }
  .competition-kicker {
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 2.4px;
    color: var(--gold);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .competition-kicker:before {
    content: "";
    width: 17px;
    height: 1px;
    background: var(--gold);
  }
  .competition-head h2 {
    font-size: clamp(21px,2.5vw,27px);
    margin: 8px 0 5px;
    letter-spacing: -.6px;
  }
  .competition-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }
  .competition-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: 1px solid #65dca544;
    background: #65dca50d;
    color: #8bf0bf;
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 850;
  }
  .competition-badge:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #76e9ac;
    box-shadow: 0 0 10px #76e9ac;
  }
  .competition-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 11px;
    margin-bottom: 20px;
  }
  .competition-metric {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid #ffffff12;
    border-radius: 14px;
    background: linear-gradient(145deg,#ffffff08,#ffffff02);
  }
  .competition-metric .metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: #aaa3b9;
    font-size: 10px;
    margin-bottom: 11px;
  }
  .competition-metric .metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #f7d27a12;
    border: 1px solid #f7d27a22;
    color: var(--gold);
    font-size: 15px;
  }
  .competition-metric strong {
    display: block;
    font-size: clamp(17px,2vw,24px);
    letter-spacing: -.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .competition-metric small {
    display: block;
    margin-top: 5px;
    color: #817b92;
    font-size: 10px;
  }
  .competition-lower {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr);
    gap: 14px;
  }
  .competition-board,.competition-activity {
    border: 1px solid #ffffff12;
    border-radius: 15px;
    background: #09081170;
    min-width: 0;
    overflow: hidden;
  }
  .competition-subhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 15px 17px;
    border-bottom: 1px solid #ffffff10;
  }
  .competition-subhead h3 {
    margin: 0;
    font-size: 13px;
  }
  .competition-subhead span {
    font-size: 10px;
    color: #8e879e;
  }
  .leaderboard {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 11px;
  }
  .leaderboard th {
    font-size: 9px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #817b92;
    font-weight: 800;
    padding: 11px 15px;
  }
  .leaderboard td {
    padding: 12px 15px;
    border-top: 1px solid #ffffff09;
    color: #d8d3e1;
  }
  .leaderboard tbody tr:first-child td {
    border-top: 0;
  }
  .leaderboard .rank {
    width: 40px;
    color: #9c94ac;
    font-weight: 900;
  }
  .leaderboard .rank.gold {
    color: #ffe19a;
  }
  .leader-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 750;
    white-space: nowrap;
  }
  .leader-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(145deg,#46304e,#21172d);
    border: 1px solid #f7d27a25;
    font-size: 14px;
  }
  .leader-score {
    color: var(--gold) !important;
    font-weight: 900;
    white-space: nowrap;
    text-align: right;
  }
  .competition-activity {
    padding-bottom: 14px;
  }
  .competition-activity-list {
    padding: 4px 16px 0;
  }
  .competition-activity-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #ffffff0c;
  }
  .competition-activity-item:last-child {
    border-bottom: 0;
  }
  .activity-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f7d27a12;
    color: var(--gold);
    font-size: 17px;
  }
  .activity-copy {
    min-width: 0;
    flex: 1;
  }
  .activity-copy strong {
    display: block;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .activity-copy small {
    display: block;
    color: #8e879e;
    font-size: 10px;
    margin-top: 4px;
  }
  .activity-value {
    font-size: 11px;
    font-weight: 900;
    color: #ffe6a0;
    white-space: nowrap;
  }
  .competition-note {
    margin: 13px 0 0;
    color: #817b92;
    font-size: 10px;
    line-height: 1.5;
  }
  @media(max-width:850px) {
    .competition-metrics {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .competition-lower {
      grid-template-columns: 1fr;
    }
  }
  @media(max-width:520px) {
    .competition {
      padding: 17px 13px;
    }
    .competition-head {
      align-items: flex-start;
      flex-direction: column;
    }
    .competition-badge {
      align-self: flex-start;
    }
    .competition-metric {
      padding: 12px;
    }
    .competition-metric .metric-top {
      align-items: flex-start;
    }
    .leaderboard th,.leaderboard td {
      padding: 10px 8px;
    }
    .leaderboard th:last-child,.leaderboard td:last-child {
      padding-right: 10px;
    }
    .leader-avatar {
      width: 25px;
      height: 25px;
      flex-basis: 25px;
    }
    .leader-name {
      gap: 6px;
      font-size: 10px;
    }
  }
  /* Sidebar activity tabs and transaction entries */
  .history-tabs {
    display: flex;
    gap: 7px;
    padding: 16px;
    border-bottom: 1px solid #ffffff12;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .history-tab {
    flex: 1;
    min-width: 0;
    border: 1px solid #ffffff16;
    border-radius: 10px;
    background: #ffffff05;
    color: #aaa4b9;
    padding: 10px 8px;
    font: 600 11px/1.2 inherit;
    cursor: pointer;
    transition: background .18s,border-color .18s,color .18s;
  }
  .history-tab.active {
    color: #ffe3a0;
    border-color: #d6a84d77;
    background: linear-gradient(135deg,#d6a84d20,#d6a84d08);
  }
  .history-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ffffff12;
    font-size: 10px;
  }
  .history-tab-view {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .history-tab-view[hidden] {
    display: none;
  }
  .transaction-entry {
    padding: 12px;
    margin-bottom: 9px;
    border: 1px solid #ffffff12;
    border-radius: 13px;
    background: linear-gradient(135deg,#ffffff07,#ffffff02);
  }
  .transaction-entry-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .transaction-title {
    font-size: 12px;
    font-weight: 700;
    color: #f0e9f5;
    overflow-wrap: anywhere;
  }
  .transaction-time {
    font-size: 10px;
    color: #938da3;
    white-space: nowrap;
  }
  .transaction-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #aaa4b9;
    font-size: 10px;
  }
  .transaction-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 99px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #ffffff0c;
    color: #bcb5ca;
  }
  .transaction-status.completed {
    color: #72e0ad;
    background: #42d99a17;
  }
  .transaction-status.pending {
    color: #ffd17c;
    background: #ffc45e18;
  }
  .transaction-status.rejected {
    color: #ff8b9d;
    background: #ff527718;
  }
  .transaction-amount {
    margin-top: 9px;
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .transaction-amount.positive {
    color: #72e0ad;
  }
  .transaction-amount.negative {
    color: #ff879b;
  }
  .transaction-wallet {
    color: #8e879e;
    font-size: 10px;
  }


 /* Original style block: theme-system */
  :root {
    color-scheme: dark;
    --theme-accent: #f7d27a;
    --theme-accent-2: #b9822d;
    --theme-page: #09090f;
    --theme-panel: #13131e;
    --theme-text: #fff;
    --theme-muted: #9c9caf;
    --theme-line: #ffffff18;
    --theme-header: #09090fc9;
    --theme-hero: #21152f;
  }
  .theme-picker-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    height: 38px;
    border: 1px solid var(--theme-line);
    border-radius: 11px;
    background: var(--theme-panel);
    color: var(--theme-accent);
    font-size: 16px;
  }
  .theme-picker-wrap select {
    appearance: none;
    max-width: 104px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--theme-text);
    font: 700 12px/1 inherit;
    cursor: pointer;
    padding: 9px 1px;
  }
  .theme-picker-wrap select option {
    background: #171321;
    color: #fff;
  }
  body[data-theme="light"] {
    color-scheme: light;
    --theme-accent: #97651c;
    --theme-accent-2: #d29a39;
    --theme-page: #f4f1ea;
    --theme-panel: #fffdf8;
    --theme-text: #24212a;
    --theme-muted: #716c79;
    --theme-line: #4b3c291e;
    --theme-header: #fffdf2e8;
    --theme-hero: #eee3f4;
    background: radial-gradient(ellipse at 50% -20%,#e7d6ef 0,#f7f2e9 48%,#eeeae2 100%);
    color: #24212a;
  }
  body[data-theme="neon"] {
    --theme-accent: #55f7ff;
    --theme-accent-2: #ff3df2;
    --theme-page: #080512;
    --theme-panel: #130d25;
    --theme-text: #f7f2ff;
    --theme-muted: #b2a5d1;
    --theme-line: #55f7ff38;
    --theme-header: #0b0619e8;
    --theme-hero: #1b0b31;
    background: radial-gradient(ellipse at 50% -15%,#3b1260 0,#10071f 44%,#05040b 100%);
    color: #f7f2ff;
  }
  body[data-theme="clear"] {
    --theme-accent: #b8fff2;
    --theme-accent-2: #65cdbf;
    --theme-page: #0c2025;
    --theme-panel: #d8f8f51b;
    --theme-text: #efffff;
    --theme-muted: #b4d6d8;
    --theme-line: #b8fff244;
    --theme-header: #0b252bd1;
    --theme-hero: #14353bd9;
    background: linear-gradient(135deg,#0b242c,#1b4b51 48%,#132b3d);
    color: #efffff;
  }
  body[data-theme="granite"] {
    --theme-accent: #e2e5e8;
    --theme-accent-2: #8b959f;
    --theme-page: #17191c;
    --theme-panel: #262a2f;
    --theme-text: #f0f1f2;
    --theme-muted: #b0b5bc;
    --theme-line: #e0e5eb22;
    --theme-header: #191c20e8;
    --theme-hero: #34383e;
    background: radial-gradient(ellipse at 50% -20%,#51565e 0,#25292e 40%,#141619 100%);
    color: #f0f1f2;
  }
  body[data-theme="sunset"] {
    --theme-accent: #ffc078;
    --theme-accent-2: #ff6b6b;
    --theme-page: #21101d;
    --theme-panel: #301728;
    --theme-text: #fff5ec;
    --theme-muted: #d9b3bd;
    --theme-line: #ffb18d30;
    --theme-header: #21101de8;
    --theme-hero: #592440;
    background: radial-gradient(ellipse at 50% -20%,#a9445d 0,#3b1835 42%,#1a101e 100%);
    color: #fff5ec;
  }
  body[data-theme="waterfall"] {
    --theme-accent: #8ee8ff;
    --theme-accent-2: #45b9d6;
    --theme-page: #071a29;
    --theme-panel: #0f2a3b;
    --theme-text: #effaff;
    --theme-muted: #a9cbd8;
    --theme-line: #8ee8ff2b;
    --theme-header: #071a29e8;
    --theme-hero: #10364b;
    background: radial-gradient(ellipse at 50% -20%,#1d6d83 0,#103246 40%,#071723 100%);
    color: #effaff;
  }
  body[data-theme="light"] header,body[data-theme="neon"] header,body[data-theme="clear"] header,body[data-theme="granite"] header,body[data-theme="sunset"] header,body[data-theme="waterfall"] header {
    background: var(--theme-header);
    border-color: var(--theme-line);
  }
  body[data-theme="light"] .brand,body[data-theme="light"] nav a,body[data-theme="light"] .balance,body[data-theme="light"] .btn-ghost {
    color: var(--theme-text);
  }
  body[data-theme="light"] nav a:hover,body[data-theme="light"] nav a.active {
    color: var(--theme-accent);
  }
  body[data-theme="light"] .hero {
    background: linear-gradient(110deg,#f4e9f7,#f9f2e5 60%,#e7e4f1);
    border-color: #b58b4a55;
    box-shadow: 0 24px 70px #594b3617;
  }
  body[data-theme="light"] .hero:before {
    background: radial-gradient(ellipse at 78% 45%,#c58bdc38,transparent 33%),linear-gradient(90deg,#ffffff88,transparent 80%);
  }
  body[data-theme="light"] .hero p,body[data-theme="light"] .section-head p,body[data-theme="light"] .stat small,body[data-theme="light"] .game-meta,body[data-theme="light"] .modal-copy p {
    color: #655d6d;
  }
  body[data-theme="light"] h1 em {
    background: linear-gradient(100deg,#6e4389,#a36d22 65%,#c18a3b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
  body[data-theme="light"] .stat,body[data-theme="light"] .game,body[data-theme="light"] .promo,body[data-theme="light"] .competition-panel {
    background: #fffdf8;
    border-color: #66532d20;
    color: #292330;
    box-shadow: 0 8px 24px #3c2d1b0b;
  }
  body[data-theme="light"] .game-title,body[data-theme="light"] .section-head h2,body[data-theme="light"] footer,body[data-theme="light"] .modal-copy h2 {
    color: #292330;
  }
  body[data-theme="light"] .filter,body[data-theme="light"] .play,body[data-theme="light"] .btn-ghost {
    background: #fff9ed;
    color: #4c4053;
    border-color: #5d4d3826;
  }
  body[data-theme="light"] .modal-backdrop {
    background: #21172c99;
  }
  body[data-theme="light"] .game-modal {
    background: linear-gradient(145deg,#fffdf8,#eee7f3);
    border-color: #b88a3b;
    color: #292330;
  }
  body[data-theme="light"] .modal-chip {
    background: #fff9ed;
    color: #554b5e;
    border-color: #6b5a3a26;
  }
  body[data-theme="light"] .demo-stage {
    background: #f3ecdf;
    color: #292330;
  }
  body[data-theme="light"] .workspace-toolbar {
    background: #fffdf2;
    color: #5b421e;
    border-color: #b88a3b;
  }
  body[data-theme="light"] .theme-picker-wrap select option {
    background: #fffdf8;
    color: #292330;
  }
  body[data-theme="clear"] .stat,body[data-theme="clear"] .game,body[data-theme="clear"] .promo,body[data-theme="clear"] .competition-panel {
    background: linear-gradient(135deg,#ffffff1d,#ffffff08);
    backdrop-filter: blur(18px);
    border-color: #b8fff244;
  }
  body[data-theme="clear"] .hero {
    background: linear-gradient(110deg,#c9fff21b,#ffffff0c);
    backdrop-filter: blur(16px);
    border-color: #b8fff266;
  }
  body[data-theme="clear"] .game-modal {
    background: linear-gradient(145deg,#123941f2,#10252fee);
    border-color: #b8fff288;
  }
  body[data-theme="clear"] .workspace-toolbar {
    background: #10353beF;
    border-color: #b8fff266;
  }
  body[data-theme="neon"] .hero {
    background: linear-gradient(110deg,#1b0b31,#21104a 55%,#0b1028);
    border-color: #ff3df277;
    box-shadow: 0 0 36px #ff3df222,0 24px 90px #0008;
  }
  body[data-theme="neon"] .stat,body[data-theme="neon"] .game,body[data-theme="neon"] .promo,body[data-theme="neon"] .competition-panel {
    border-color: #55f7ff3d;
    box-shadow: 0 0 18px #55f7ff0b;
  }
  body[data-theme="neon"] .btn-gold,body[data-theme="neon"] .filter.active {
    background: linear-gradient(120deg,#55f7ff,#d84bff);
    color: #10051d;
    box-shadow: 0 0 20px #55f7ff30;
  }
  body[data-theme="neon"] .workspace-toolbar {
    background: #120722f2;
    border-color: #ff3df277;
    color: #bdfcff;
  }
  body[data-theme="granite"] .hero {
    background: linear-gradient(110deg,#292d32,#41464d 55%,#202328);
    border-color: #d5dbe044;
  }
  body[data-theme="granite"] .stat,body[data-theme="granite"] .game,body[data-theme="granite"] .promo,body[data-theme="granite"] .competition-panel {
    background: linear-gradient(145deg,#2d3136,#202327);
    border-color: #d5dbe02b;
  }
  body[data-theme="granite"] .btn-gold,body[data-theme="granite"] .filter.active {
    background: linear-gradient(120deg,#edf0f3,#8e99a5);
    color: #22272d;
  }
  body[data-theme="sunset"] .hero {
    background: linear-gradient(110deg,#42192e,#733047 50%,#34203c);
    border-color: #ffb18d55;
  }
  body[data-theme="sunset"] .stat,body[data-theme="sunset"] .game,body[data-theme="sunset"] .promo,body[data-theme="sunset"] .competition-panel {
    border-color: #ffb18d30;
  }
  body[data-theme="sunset"] .btn-gold,body[data-theme="sunset"] .filter.active {
    background: linear-gradient(120deg,#ffd18b,#ff7c72);
    color: #391524;
  }
  body[data-theme="waterfall"] .hero {
    background: linear-gradient(110deg,#0e2b40,#14566a 53%,#10263b);
    border-color: #8ee8ff55;
  }
  body[data-theme="waterfall"] .stat,body[data-theme="waterfall"] .game,body[data-theme="waterfall"] .promo,body[data-theme="waterfall"] .competition-panel {
    border-color: #8ee8ff2d;
  }
  body[data-theme="waterfall"] .btn-gold,body[data-theme="waterfall"] .filter.active {
    background: linear-gradient(120deg,#b3f3ff,#48b9d5);
    color: #062331;
  }
  body[data-theme="neon"] .theme-picker-wrap,body[data-theme="clear"] .theme-picker-wrap,body[data-theme="granite"] .theme-picker-wrap,body[data-theme="sunset"] .theme-picker-wrap,body[data-theme="waterfall"] .theme-picker-wrap {
    border-color: var(--theme-line);
    background: var(--theme-panel);
  }
  @media(max-width:700px) {
    .theme-picker-wrap {
      height: 34px;
      padding: 0 7px;
      gap: 4px;
    }
    .theme-picker-wrap select {
      max-width: 80px;
      font-size: 11px;
    }
    .actions {
      gap: 6px;
    }
  }


 /* Original style block: theme-game-card-overrides */
  /* Carry the selected page theme all the way into each catalog card. */
  body[data-theme] .game {
    background: var(--theme-panel);
    color: var(--theme-text);
    border-color: var(--theme-line);
    box-shadow: 0 8px 24px #0002;
  }
  body[data-theme] .game-title {
    color: var(--theme-text);
  }
  body[data-theme] .game-meta {
    color: var(--theme-muted);
  }
  body[data-theme] .game-meta strong {
    color: var(--theme-accent);
  }
  body[data-theme] .game .play {
    background: color-mix(in srgb,var(--theme-panel) 82%,var(--theme-accent) 18%);
    border-color: var(--theme-line);
    color: var(--theme-text);
  }
  body[data-theme] .game:hover {
    border-color: var(--theme-accent);
    box-shadow: 0 13px 32px #0003,0 0 0 1px color-mix(in srgb,var(--theme-accent) 28%,transparent);
  }
  body[data-theme] .game:hover .play {
    background: linear-gradient(110deg,var(--theme-accent),var(--theme-accent-2));
    border-color: transparent;
    color: #17111d;
  }
  body[data-theme] .game-badge {
    background: var(--theme-accent);
    color: var(--theme-page);
    box-shadow: 0 3px 12px #0002;
  }
  body[data-theme] .heart {
    border-color: var(--theme-line);
    background: color-mix(in srgb,var(--theme-page) 72%,transparent);
    color: var(--theme-text);
  }
  body[data-theme] .heart.saved {
    color: #ff5d9d;
    background: #40182d;
    border-color: #ff5d9d66;
  }
  body[data-theme="dark"] .game {
    background: linear-gradient(155deg,#191725,#111019);
    border-color: #ffffff13;
  }
  body[data-theme="dark"] .game:hover {
    border-color: #f7d27a75;
    box-shadow: 0 12px 28px #0007;
  }
  body[data-theme="light"] .game {
    background: linear-gradient(155deg,#fffefa,#f2ede4);
    border-color: #8d754b30;
    box-shadow: 0 8px 24px #3c2d1b0b;
  }
  body[data-theme="light"] .game:hover {
    box-shadow: 0 14px 32px #6d51221b,0 0 0 1px #b88a3b35;
  }
  body[data-theme="light"] .game .play {
    background: #f7f0e4;
    color: #55462e;
    border-color: #9a7b4930;
  }
  body[data-theme="neon"] .game {
    background: linear-gradient(150deg,#1b1030,#0d0a1a);
    border-color: #55f7ff35;
    box-shadow: 0 8px 26px #0006,0 0 16px #55f7ff08;
  }
  body[data-theme="neon"] .game:hover {
    border-color: #ff3df2;
    box-shadow: 0 0 0 1px #ff3df266,0 0 26px #55f7ff22,0 16px 34px #0008;
  }
  body[data-theme="neon"] .game .play {
    background: linear-gradient(120deg,#211333,#171025);
    border-color: #55f7ff3b;
    color: #d9fbff;
  }
  body[data-theme="neon"] .game:hover .play {
    background: linear-gradient(100deg,#55f7ff,#ff3df2);
    color: #10051d;
    box-shadow: 0 0 18px #55f7ff35;
  }
  body[data-theme="clear"] .game {
    background: linear-gradient(145deg,#ffffff20,#d9ffff09);
    backdrop-filter: blur(18px);
    border-color: #b8fff244;
    box-shadow: inset 0 1px 0 #ffffff18,0 12px 28px #00161b35;
  }
  body[data-theme="clear"] .game:hover {
    background: linear-gradient(145deg,#ffffff2b,#b8fff21a);
    border-color: #b8fff2aa;
    box-shadow: inset 0 1px 0 #ffffff2a,0 0 24px #8fffea20;
  }
  body[data-theme="clear"] .game .play {
    background: #d5fff20e;
    border-color: #b8fff244;
    color: #efffff;
  }
  body[data-theme="granite"] .game {
    background: linear-gradient(145deg,#30353b,#202328);
    border-color: #d5dbe02b;
    box-shadow: 0 10px 26px #0004,inset 0 1px 0 #ffffff08;
  }
  body[data-theme="granite"] .game:hover {
    border-color: #c5cbd2;
    box-shadow: 0 12px 30px #0006,0 0 0 1px #d5dbe022;
  }
  body[data-theme="granite"] .game .play {
    background: linear-gradient(145deg,#343940,#25292e);
    border-color: #d5dbe02c;
    color: #f0f1f2;
  }
  body[data-theme="sunset"] .game {
    background: linear-gradient(150deg,#3a1d32,#241323);
    border-color: #ffb18d30;
    box-shadow: 0 10px 26px #13061055;
  }
  body[data-theme="sunset"] .game:hover {
    border-color: #ffc078aa;
    box-shadow: 0 0 0 1px #ffb18d33,0 14px 32px #13061066;
  }
  body[data-theme="sunset"] .game .play {
    background: linear-gradient(120deg,#452039,#301729);
    border-color: #ffb18d33;
    color: #fff5ec;
  }
  body[data-theme="sunset"] .game:hover .play {
    background: linear-gradient(110deg,#ffc078,#ff6b6b);
    color: #391524;
  }
  body[data-theme="waterfall"] .game {
    background: linear-gradient(150deg,#12384a,#0b2232);
    border-color: #8ee8ff2d;
    box-shadow: 0 10px 26px #00121e66;
  }
  body[data-theme="waterfall"] .game:hover {
    border-color: #8ee8ff99;
    box-shadow: 0 0 0 1px #8ee8ff2c,0 14px 32px #00121e88;
  }
  body[data-theme="waterfall"] .game .play {
    background: linear-gradient(120deg,#153d50,#102c3e);
    border-color: #8ee8ff35;
    color: #effaff;
  }
  body[data-theme="waterfall"] .game:hover .play {
    background: linear-gradient(110deg,#b3f3ff,#48b9d5);
    color: #062331;
  }


 /* Original style block: game-color-match-rails */
  .game {
    position: relative;
  }
  .game .game-color-rail {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background: var(--marker-color);
    box-shadow: 2px 0 10px color-mix(in srgb,var(--marker-color) 36%,transparent);
    pointer-events: none;
  }
  .game .game-color-rail:after {
    content: "";
    position: absolute;
    inset: 0 2px 0 0;
    background: linear-gradient(90deg,#ffffff55,transparent 70%);
    opacity: .5;
  }
  .game.color-match {
    z-index: 6;
    border-color: var(--marker-color) !important;
    box-shadow: 0 0 0 3px var(--marker-color),0 0 0 7px color-mix(in srgb,var(--marker-color) 30%,transparent),0 0 32px 10px color-mix(in srgb,var(--marker-color) 75%,transparent),inset 0 0 22px color-mix(in srgb,var(--marker-color) 22%,transparent) !important;
    animation: colorMatchBounce 1.15s ease-in-out 3;
    filter: brightness(1.12);
  }
  .game.color-match .game-color-rail {
    width: 12px;
    box-shadow: 0 0 18px var(--marker-color);
  }
  @keyframes colorMatchPulse {
    0%,100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.35);
    }
  }
  .game.color-match .game-color-rail {
    animation: colorMatchPulse .55s ease-in-out infinite;
    box-shadow: 0 0 25px 5px var(--marker-color);
  }
  @keyframes colorMatchBounce {
    0%,100% {
      transform: translateY(0) scale(1);
    }
    22% {
      transform: translateY(-7px) scale(1.025);
    }
    42% {
      transform: translateY(0) scale(1);
    }
    62% {
      transform: translateY(-3px) scale(1.01);
    }
    80% {
      transform: translateY(0) scale(1);
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .game.color-match,.game.color-match .game-color-rail {
      animation: none;
    }
  }


 /* Original style block: game-comparison-styles */
  .game-art .compare-pin {
    position: absolute;
    z-index: 4;
    right: 47px;
    top: 9px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ffffff30;
    background: #08071080;
    color: #fff;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 15px;
    cursor: pointer;
    transition: transform .18s,background .18s,border-color .18s,box-shadow .18s;
  }
  .game-art .compare-pin:hover {
    transform: translateY(-2px) scale(1.08);
    border-color: var(--theme-accent,#f7d27a);
    box-shadow: 0 0 12px color-mix(in srgb,var(--theme-accent,#f7d27a) 40%,transparent);
  }
  .game-art .compare-pin.selected {
    color: #17111d;
    background: var(--theme-accent,#f7d27a);
    border-color: var(--theme-accent,#f7d27a);
    box-shadow: 0 0 0 2px color-mix(in srgb,var(--theme-accent,#f7d27a) 28%,transparent),0 0 16px color-mix(in srgb,var(--theme-accent,#f7d27a) 42%,transparent);
  }
  body[data-theme] .game-art .compare-pin {
    color: var(--theme-text);
    background: color-mix(in srgb,var(--theme-page) 72%,transparent);
    border-color: var(--theme-line);
  }
  body[data-theme] .game-art .compare-pin.selected {
    color: var(--theme-page);
    background: var(--theme-accent);
    border-color: var(--theme-accent);
  }
  .game-comparison {
    margin: 22px 0 8px;
    padding: 20px;
    border: 1px solid var(--theme-line,#ffffff20);
    border-radius: 18px;
    background: radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--theme-accent,#f7d27a) 11%,transparent),transparent 42%),linear-gradient(145deg,var(--theme-panel,#191624),var(--theme-page,#0e0c15));
    color: var(--theme-text,#f7f2ff);
    box-shadow: 0 16px 40px #0002;
    scroll-margin-top: 90px;
  }
  .game-comparison[hidden] {
    display: none;
  }
  .compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .compare-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .compare-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb,var(--theme-accent,#f7d27a) 14%,transparent);
    border: 1px solid var(--theme-line,#ffffff20);
    font-size: 20px;
    color: var(--theme-accent,#f7d27a);
  }
  .compare-title-wrap h3 {
    margin: 0;
    font-size: 18px;
  }
  .compare-title-wrap p {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--theme-muted,#aaa3b8);
  }
  .compare-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .compare-count {
    font-size: 11px;
    font-weight: 850;
    color: var(--theme-accent,#f7d27a);
    white-space: nowrap;
  }
  .compare-action {
    border: 1px solid var(--theme-line,#ffffff22);
    border-radius: 9px;
    background: color-mix(in srgb,var(--theme-panel,#191624) 80%,transparent);
    color: var(--theme-text,#fff);
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
  }
  .compare-action:hover {
    border-color: var(--theme-accent,#f7d27a);
  }
  .compare-restore {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 12px;
    box-shadow: 0 5px 18px #0002;
  }
  .compare-restore[hidden] {
    display: none;
  }
  .compare-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--theme-line,#ffffff1c);
    border-radius: 12px;
  }
  .compare-table {
    width: 100%;
    min-width: 540px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
  }
  .compare-table th,.compare-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--theme-line,#ffffff12);
    border-right: 1px solid var(--theme-line,#ffffff12);
  }
  .compare-table tr:last-child th,.compare-table tr:last-child td {
    border-bottom: 0;
  }
  .compare-table th:last-child,.compare-table td:last-child {
    border-right: 0;
  }
  .compare-table thead th {
    background: color-mix(in srgb,var(--theme-accent,#f7d27a) 8%,var(--theme-panel,#191624));
    color: var(--theme-text,#fff);
    min-width: 145px;
  }
  .compare-table thead th:first-child {
    min-width: 110px;
    color: var(--theme-muted,#aaa3b8);
  }
  .compare-table tbody th {
    width: 115px;
    color: var(--theme-muted,#aaa3b8);
    font-weight: 800;
    background: color-mix(in srgb,var(--theme-panel,#191624) 88%,transparent);
  }
  .compare-game-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .compare-game-symbol {
    font-size: 23px;
    flex: none;
  }
  .compare-game-name {
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .compare-remove {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    flex: none;
    border: 1px solid var(--theme-line,#ffffff22);
    border-radius: 7px;
    background: transparent;
    color: var(--theme-muted,#aaa3b8);
    cursor: pointer;
  }
  .compare-remove:hover {
    color: #ff6f8f;
    border-color: #ff6f8f;
  }
  .compare-stars {
    color: var(--theme-accent,#f7d27a);
    letter-spacing: 1px;
    white-space: nowrap;
  }
  .compare-tag {
    display: inline-block;
    margin: 2px 3px 2px 0;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--theme-line,#ffffff20);
    font-size: 10px;
    color: var(--theme-text,#fff);
    background: color-mix(in srgb,var(--theme-accent,#f7d27a) 8%,transparent);
  }
  .compare-color {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .compare-color-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px currentColor;
  }
  .compare-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .compare-favorite {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--theme-line,#ffffff28);
    border-radius: 10px;
    background: color-mix(in srgb,var(--theme-panel,#191624) 86%,transparent);
    color: var(--theme-muted,#aaa3b8);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .12s ease,color .12s ease,background .12s ease,box-shadow .12s ease;
  }
  .compare-favorite:hover {
    color: #ff5d9d;
    border-color: #ff5d9d;
    background: #ff5d9d14;
  }
  .compare-favorite:active {
    transform: scale(.94);
  }
  .compare-favorite.saved {
    color: #ff5d9d;
    border-color: #ff5d9d;
    background: #ff5d9d18;
    box-shadow: 0 0 0 2px #ff5d9d33,0 0 14px #ff5d9d55;
  }
  .compare-favorite:focus-visible {
    outline: 3px solid var(--theme-accent,#f7d27a);
    outline-offset: 3px;
  }
  .compare-open-game {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb,var(--theme-accent,#f7d27a) 55%,var(--theme-line,#ffffff22));
    border-radius: 9px;
    background: color-mix(in srgb,var(--theme-accent,#f7d27a) 12%,var(--theme-panel,#191624));
    color: var(--theme-text,#fff);
    font: inherit;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .12s ease,background .12s ease,box-shadow .12s ease;
  }
  .compare-open-game:hover {
    background: color-mix(in srgb,var(--theme-accent,#f7d27a) 23%,var(--theme-panel,#191624));
    box-shadow: 0 0 12px color-mix(in srgb,var(--theme-accent,#f7d27a) 22%,transparent);
  }
  .compare-open-game:active {
    transform: scale(.96);
  }
  .compare-open-game:focus-visible {
    outline: 3px solid var(--theme-accent,#f7d27a);
    outline-offset: 3px;
  }
  @media(max-width:600px) {
    .compare-open-game {
      min-height: 44px;
      padding: 9px 11px;
    }
  }
  .favorites-open-all {
    min-height: 42px;
    padding: 9px 13px;
    white-space: nowrap;
    touch-action: manipulation;
  }
  .favorites-open-all[hidden] {
    display: none;
  }
  @media(max-width:600px) {
    .favorites-open-all {
      width: 100%;
      min-height: 46px;
      justify-content: center;
    }
  }
  .compare-empty {
    padding: 20px;
    text-align: center;
    color: var(--theme-muted,#aaa3b8);
    font-size: 12px;
  }
  @media(max-width:600px) {
    .game-comparison {
      padding: 13px;
    }
    .compare-title-wrap h3 {
      font-size: 16px;
    }
    .compare-head-actions {
      width: 100%;
      justify-content: space-between;
    }
  }


 /* Original style block: separate-win-prize-styles */
  .win-message-inline {
    gap: 12px;
    flex-wrap: wrap;
  }
  .win-message-inline .win-description {
    flex: 1 1 220px;
    min-width: 0;
  }
  .win-message-inline .win-prize {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 94px;
    padding: 9px 13px;
    border: 1px solid #ffe58c;
    border-radius: 10px;
    background: linear-gradient(145deg,#fff2a8,#e6aa36 58%,#9c5b12);
    color: #2b1904;
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: .35px;
    text-shadow: none;
    box-shadow: inset 0 1px #fff9d6,0 0 18px #ffc83d55;
  }
  .win-message-inline .win-prize:empty {
    display: none;
  }
  /* Keep the win-message close control square, matching the prize badge height. */
  .win-message-inline #winMessageInlineClose {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-left: 0;
    box-sizing: border-box;
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffe58c;
    border-radius: 10px;
    background: linear-gradient(145deg,#fff2a8,#e6aa36 58%,#9c5b12);
    color: #2b1904;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
    box-shadow: inset 0 1px #fff9d6,0 0 18px #ffc83d55;
  }
  .win-message-inline #winMessageInlineClose:hover {
    background: linear-gradient(145deg,#fff8c8,#f4bd4a 58%,#b8731c);
    box-shadow: inset 0 1px #fff9d6,0 0 22px #ffc83daa;
  }
  @media(max-width:850px) {
    .win-message-inline #winMessageInlineClose {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: 39px;
      min-width: 39px;
      height: 39px;
      flex-basis: 39px;
    }
  }
  @media(max-width:700px) {
    .win-message-inline .win-description {
      flex-basis: 100%;
    }
    .win-message-inline .win-prize {
      margin: 0 auto;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .win-message-inline {
      animation: none;
    }
  }


 /* Original style block: win-message-no-overlap-fix */
  /* Keep the description flexible while reserving dedicated space for prize and square close control. */
  .win-message-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    box-sizing: border-box;
    padding-right: 12px;
    min-width: 0;
  }
  .win-message-inline .win-description {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .win-message-inline .win-prize {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
  }
  .win-message-inline #winMessageInlineClose {
    position: relative;
    z-index: 2;
    inset: auto;
    transform: none;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    aspect-ratio: 1/1;
    margin: 0;
  }
  @media(max-width:850px) {
    .win-message-inline #winMessageInlineClose {
      flex-basis: 39px;
      width: 39px;
      min-width: 39px;
      height: 39px;
    }
  }
  @media(max-width:700px) {
    .win-message-inline {
      flex-wrap: wrap;
    }
    .win-message-inline .win-description {
      flex: 1 0 100%;
      text-align: center;
    }
    .win-message-inline .win-prize {
      margin-left: auto;
    }
    .win-message-inline #winMessageInlineClose {
      flex: 0 0 39px;
      width: 39px;
      min-width: 39px;
      height: 39px;
    }
  }


  /* Demo launch smoothly grows the floating window around its newly revealed content. */
  #gameWorkspace .game-modal {
    box-sizing: border-box;
    overflow: hidden;
    transition: width .42s cubic-bezier(.2,.8,.2,1),height .42s cubic-bezier(.2,.8,.2,1),box-shadow .18s;
  }
  /* Position must follow the pointer immediately; animating left/top on every pointermove makes dragging feel heavy. */
  #gameWorkspace .game-modal.dragging {
    transition: none !important;
    will-change: left,top;
  }
  #gameWorkspace .game-modal:not(.dragging) {
    will-change: auto;
  }
  #gameWorkspace .game-modal .modal-copy {
    box-sizing: border-box;
    min-width: 0;
    padding-bottom: 28px;
  }
  #gameWorkspace .game-modal .demo-stage {
    scroll-margin: 0 0 12px;
  }
  #gameWorkspace .game-modal.demo-expanded .modal-copy {
    padding-bottom: 30px;
  }
  #gameWorkspace .game-modal.demo-compact .modal-copy {
    padding: 14px 18px 18px;
  }
  #gameWorkspace .game-modal.demo-compact .modal-hero {
    min-height: 125px;
  }
  #gameWorkspace .game-modal.demo-compact .modal-symbol {
    font-size: 58px;
  }
  #gameWorkspace .game-modal.demo-compact .modal-details {
    margin: 12px 0 14px;
  }
  #gameWorkspace .game-modal.demo-compact .demo-stage {
    margin-top: 12px;
    padding: 12px;
  }
  #gameWorkspace .game-modal .modal-actions {
    align-items: center;
  }
  #gameWorkspace .game-modal .modal-actions .btn {
    max-width: 100%;
    white-space: normal;
  }
  @media(max-width:700px) {
    #gameWorkspace .game-modal.demo-expanded {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100%;
      height: auto !important;
      max-height: none;
    }
    #gameWorkspace .game-modal.demo-expanded .modal-copy {
      padding-bottom: 28px;
    }
  }


  /* Spin history drawer */
  .history-toggle {
    position: fixed;
    right: 0;
    top: 42%;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 11px 13px 13px;
    border: 1px solid #f7d27a55;
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(145deg,#21172b,#0d0b14);
    color: #f8e7b4;
    font: 800 11px/1 system-ui,sans-serif;
    letter-spacing: .2px;
    box-shadow: 0 10px 30px #0008;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: translateX(0);
    transition: background .2s,border-color .2s;
  }
  .history-toggle:hover,.history-toggle.active {
    background: linear-gradient(145deg,#4a2b43,#17111f);
    border-color: #f7d27a99;
  }
  .history-toggle-icon {
    font-size: 19px;
    line-height: 1;
    writing-mode: horizontal-tb;
    color: var(--gold);
  }
  .history-count {
    min-width: 19px;
    height: 19px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#ffe7a0,#c58b2e);
    color: #241707;
    font-size: 10px;
    writing-mode: horizontal-tb;
  }
  .spin-history-panel {
    position: fixed;
    z-index: 81;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(370px,calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg,#1c1527 0%,#100e18 40%,#0b0a11 100%);
    border-left: 1px solid #f7d27a45;
    box-shadow: -24px 0 70px #0008;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;
    overflow: hidden;
  }
  .spin-history-panel.open {
    transform: translateX(0);
    visibility: visible;
  }
  .history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 22px 19px;
    border-bottom: 1px solid #ffffff10;
    background: radial-gradient(ellipse at 20% 0%,#e7b85d16,transparent 65%);
  }
  .history-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 900;
    color: var(--gold);
  }
  .history-header h2 {
    font-size: 24px;
    letter-spacing: -.6px;
    margin: 7px 0 4px;
  }
  .history-header p {
    margin: 0;
    color: #9e98ad;
    font-size: 12px;
  }
  .history-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    border: 1px solid #ffffff1b;
    background: #ffffff08;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
  .history-close:hover {
    border-color: #f7d27a66;
    color: var(--gold);
  }
  .history-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 18px 12px;
    padding: 14px;
    border: 1px solid #f7d27a24;
    border-radius: 14px;
    background: linear-gradient(120deg,#f7d27a0e,#ffffff03);
  }
  .history-summary-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f7d27a16;
    color: var(--gold);
    font-size: 23px;
  }
  .history-summary strong {
    display: block;
    font-size: 15px;
  }
  .history-summary small {
    display: block;
    margin-top: 4px;
    color: #9e98ad;
    font-size: 10px;
  }
  .history-notice {
    margin: 0 18px 12px;
    padding: 10px 11px;
    border: 1px solid #8c9cce22;
    border-radius: 10px;
    background: #8295d10a;
    color: #aaaec7;
    font-size: 10px;
    line-height: 1.5;
  }
  .history-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 14px 14px;
    overscroll-behavior: contain;
  }
  .history-empty {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: #a6a0b4;
  }
  .history-empty>span {
    font-size: 34px;
    filter: grayscale(.25);
    margin-bottom: 12px;
  }
  .history-empty strong {
    font-size: 13px;
    color: #e9e2f0;
  }
  .history-empty p {
    max-width: 220px;
    font-size: 11px;
    line-height: 1.6;
    margin: 7px 0 0;
    color: #938da3;
  }
  .history-entry {
    padding: 13px 12px;
    margin-bottom: 9px;
    border: 1px solid #ffffff12;
    border-radius: 13px;
    background: linear-gradient(135deg,#ffffff06,#ffffff02);
  }
  .history-entry-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .history-entry-game {
    font-size: 12px;
    font-weight: 850;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .history-entry time {
    font-size: 10px;
    color: #8d879c;
    flex-shrink: 0;
  }
  .history-result {
    display: flex;
    gap: 7px;
    margin: 11px 0;
  }
  .history-result span {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 8px 2px;
    border-radius: 8px;
    background: linear-gradient(180deg,#fff0be,#d3b66b);
    color: #241707;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px #7d5b2422;
  }
  .history-entry-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9b95a9;
    font-size: 10px;
  }
  .history-demo-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #79d9a3;
  }
  .history-demo-label {
    margin-left: auto;
    color: #777185;
    font-size: 9px;
  }
  .history-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px calc(13px + env(safe-area-inset-bottom));
    border-top: 1px solid #ffffff12;
    color: #777185;
    font-size: 10px;
    background: #0c0a12;
  }
  .history-footer button {
    border: 1px solid #ffffff18;
    border-radius: 8px;
    background: #ffffff06;
    color: #c9c1d4;
    padding: 7px 10px;
    font-size: 10px;
    cursor: pointer;
  }
  .history-footer button:hover {
    border-color: #ff7b8c55;
    color: #ff9ca8;
  }
  @media(max-width:700px) {
    .history-toggle {
      top: auto;
      bottom: 24%;
      padding: 12px 9px 12px 11px;
      border-radius: 12px 0 0 12px;
    }
    .spin-history-panel {
      width: min(360px,calc(100vw - 18px));
    }
    .history-header {
      padding-top: 22px;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .spin-history-panel {
      transition: none;
    }
  }


 /* Original style block: random-spin-ready-pop-styles */
  @keyframes spinReadyPop {
    0% {
      transform: scale(1);
      filter: brightness(1);
    }
    30% {
      transform: scale(1.38);
      filter: brightness(1.65);
    }
    58% {
      transform: scale(.94);
      filter: brightness(1.2);
    }
    80% {
      transform: scale(1.07);
      filter: brightness(1.08);
    }
    100% {
      transform: scale(1);
      filter: brightness(1);
    }
  }
  #randomGames.spin-ready-pop {
    animation: spinReadyPop 620ms cubic-bezier(.2,.85,.25,1) both !important;
    transform-origin: center;
  }
  @media (prefers-reduced-motion: reduce) {
    #randomGames.spin-ready-pop {
      animation: none !important;
    }
  }


  /* Keep the spin control truly circular in every layout. */
  #randomGames.random-page-btn {
    box-sizing: border-box !important;
    width: 116px !important;
    height: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    flex: 0 0 116px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: visible;
  }
  @media(max-width:700px) {
    #randomGames.random-page-btn {
      width: 96px !important;
      height: 96px !important;
      min-width: 96px !important;
      max-width: 96px !important;
      min-height: 96px !important;
      max-height: 96px !important;
      flex-basis: 96px !important;
    }
  }


  #randomGames.random-page-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  #randomGames.random-page-btn::before,
#randomGames.random-page-btn::after {
    content: none !important;
    display: none !important;
  }
  #randomGames.random-page-btn .spin-icon {
    font-size: 0 !important;
    line-height: 0 !important;
  }


  #randomGames.random-page-btn,
#randomGames.random-page-btn:hover,
#randomGames.random-page-btn:focus,
#randomGames.random-page-btn:focus-visible,
#randomGames.random-page-btn:active {
    outline: none !important;
  }
  #randomGames.random-page-btn.active,
#randomGames.random-page-btn:not(.active) {
    border-color: #354765 !important;
  }
  #randomGames.random-page-btn:not(.active) {
    box-shadow: 0 0 0 8px #050b16e8,0 0 0 9px #24344d66,0 8px 22px #0008,inset 0 1px 1px #ffffff12 !important;
  }
  #randomGames.random-page-btn:not(.active):hover {
    box-shadow: 0 0 0 8px #050b16e8,0 0 0 9px #24344d66,0 10px 26px #0009,inset 0 1px 1px #ffffff18 !important;
  }


 /* Original style block: touch-friendly-card-actions */
  /* Comfortable 44px touch targets with clear spacing and accessible feedback. */
  .game .game-art .heart,
.game .game-art .compare-pin {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 21px;
    line-height: 1;
    border-radius: 50%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    z-index: 20;
    box-shadow: 0 2px 9px #0008, inset 0 1px 0 #ffffff22;
  }
  .game .game-art .heart {
    top: 8px !important;
    right: 8px !important;
  }
  .game .game-art .compare-pin {
    top: 8px !important;
    right: 60px !important;
    font-size: 19px;
  }
  .game .game-art .heart:active,.game .game-art .compare-pin:active {
    transform: scale(.94);
    filter: brightness(1.18);
  }
  .game .game-art .heart:focus-visible,.game .game-art .compare-pin:focus-visible {
    outline: 3px solid var(--theme-accent,#f7d27a);
    outline-offset: 2px;
  }
  .game .game-art .heart.saved {
    box-shadow: 0 0 0 2px #ff5d9d55,0 0 16px #ff5d9d66;
  }
  .game .game-art .compare-pin.selected {
    box-shadow: 0 0 0 2px color-mix(in srgb,var(--theme-accent,#f7d27a) 35%,transparent),0 0 16px color-mix(in srgb,var(--theme-accent,#f7d27a) 55%,transparent);
  }
  @media(max-width:600px) {
    .game .game-art .heart,.game .game-art .compare-pin {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px;
      min-height: 46px;
      font-size: 22px;
    }
    .game .game-art .compare-pin {
      right: 62px !important;
    }
  }


  /* Stable hover: card geometry never changes beneath the pointer. */
  .game,.game:hover {
    transform: none !important;
    transition: border-color .18s ease,box-shadow .18s ease !important;
  }
  .game .game-art .heart {
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }
  .game .game-info,.game .game-art {
    position: relative;
  }
  .game .game-art:before,.game .game-art:after {
    pointer-events: none;
  }
  .game .game .heart {
    touch-action: manipulation;
  }
  .game .play {
    position: relative;
    z-index: 5;
  }


  /* Consistent luxury-dark scrollbars across the page and nested scrollable panels. */
  :root {
    scrollbar-color: #8b7445 #0b0a12;
    scrollbar-width: thin;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: #8b7445 #0b0a12;
  }
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-track {
    background: #0b0a12;
    border: 1px solid #191626;
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,#c7a765 0%,#80663a 48%,#4b3a25 100%);
    border: 2px solid #0b0a12;
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,#f0d28a 0%,#b18b49 52%,#806038 100%);
  }
  *::-webkit-scrollbar-corner {
    background: #0b0a12;
  }
  *::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
  }
  /* Sleek rounded game windows */
  #gameWorkspace .game-modal {
    border: 1px solid rgba(246,202,100,.42);
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(255,255,255,.035),transparent 32%),
    radial-gradient(ellipse at 50% 0%,#382047 0%,#171321 46%,#0b0a12 100%);
    box-shadow: 0 24px 65px rgba(0,0,0,.72),
    0 8px 20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.075);
    overflow: hidden;
    isolation: isolate;
  }
  #gameWorkspace .game-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(135deg,rgba(255,226,157,.55),rgba(247,210,122,.08) 34%,rgba(174,115,221,.18) 70%,rgba(255,226,157,.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 5;
  }
  #gameWorkspace .game-modal.focused {
    border-color: rgba(255,218,128,.82);
    box-shadow: 0 30px 78px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,218,128,.18),
    0 0 28px rgba(247,196,86,.12),
    inset 0 1px 0 rgba(255,255,255,.09);
  }
  #gameWorkspace .window-bar {
    height: 38px;
    padding: 0 13px;
    background: linear-gradient(180deg,rgba(7,6,14,.98),rgba(13,10,20,.94));
    border-bottom: 1px solid rgba(247,210,122,.25);
    border-radius: 19px 19px 0 0;
    user-select: none;
  }
  #gameWorkspace .window-close {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    color: #e8dfef;
    transition: background .18s,border-color .18s,color .18s,transform .18s;
  }
  #gameWorkspace .window-close:hover {
    background: rgba(225,75,94,.18);
    border-color: rgba(255,125,140,.6);
    color: #ffb9c1;
    transform: scale(1.06);
  }
  #gameWorkspace .modal-hero {
    border-bottom: 1px solid rgba(255,255,255,.055);
  }
  @media(max-width:700px) {
    #gameWorkspace .game-modal {
      border-radius: 17px;
      box-shadow: 0 18px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);
    }
    #gameWorkspace .window-bar {
      border-radius: 16px 16px 0 0;
    }
  }
  /* Premium, unmistakable game-window close control */
  #gameWorkspace .window-close {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025));
    color: #e9e2f1;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.22);
    transition: background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  #gameWorkspace .window-close::before,
#gameWorkspace .window-close::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1.7px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
    transition: background .18s ease,transform .18s ease;
  }
  #gameWorkspace .window-close::after {
    transform: rotate(-45deg);
  }
  #gameWorkspace .window-close:hover {
    background: linear-gradient(145deg,#c74455,#8e2438);
    border-color: rgba(255,150,160,.8);
    color: #fff;
    box-shadow: 0 4px 14px rgba(196,48,70,.28),inset 0 1px 0 rgba(255,255,255,.2);
    transform: translateY(-1px);
  }
  #gameWorkspace .window-close:hover::before {
    transform: rotate(135deg);
  }
  #gameWorkspace .window-close:hover::after {
    transform: rotate(45deg);
  }
  #gameWorkspace .window-close:active {
    transform: translateY(0) scale(.94);
  }
  #gameWorkspace .window-close:focus-visible {
    outline: 2px solid #f7d27a;
    outline-offset: 3px;
  }
  @media(max-width:700px) {
    #gameWorkspace .window-close {
      flex-basis: 32px;
      width: 32px;
      height: 32px;
    }
  }
  /* Alignment fix: keep the X perfectly centered in the close control */
  #gameWorkspace .window-bar .window-close {
    box-sizing: border-box;
    align-self: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    vertical-align: middle;
    transform: none;
  }
  #gameWorkspace .window-bar .window-close::before,
#gameWorkspace .window-bar .window-close::after {
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.7px;
    margin: 0;
    transform: translate(-50%,-50%) rotate(45deg);
    transform-origin: center;
  }
  #gameWorkspace .window-bar .window-close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
  #gameWorkspace .window-bar .window-close:hover {
    transform: none;
  }
  #gameWorkspace .window-bar .window-close:hover::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
  #gameWorkspace .window-bar .window-close:hover::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
  #gameWorkspace .window-bar .window-close:active {
    transform: scale(.96);
  }
  /* Position the whole close button closer to the title bar's right edge */
  #gameWorkspace .window-bar {
    padding-right: 6px;
  }
  #gameWorkspace .window-bar .window-close {
    margin-right: 0;
  }
  /* Modal windows remain steady while being dragged. */


  /* Embedded game launch view: keep the existing window bar and replace the preview with the JSON launch URL. */
  #gameWorkspace .game-modal.launching-game {
    display: flex;
    flex-direction: column;
    width: min(1000px,calc(100vw - 36px));
    height: min(720px,calc(100vh - 100px));
    max-height: none;
    min-width: 290px;
    min-height: 240px;
    overflow: auto;
    resize: both;
    box-sizing: border-box;
  }
  #gameWorkspace .game-modal.launching-game .modal-hero,
#gameWorkspace .game-modal.launching-game .modal-copy {
    display: none;
  }
  #gameWorkspace .game-modal .window-bar {
    flex: 0 0 auto;
  }
  #gameWorkspace .game-launch-frame {
    display: none;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  #gameWorkspace .game-modal.launching-game .game-launch-frame {
    display: block;
  }
  #gameWorkspace .game-launch-frame iframe {
    display: block;
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    transform: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
  }
  /* Keep the preloaded game alive and loading without showing it before countdown ends. */
  #gameWorkspace .game-launch-frame iframe.rr-game-preload {
    position: absolute;
    inset: 0;
    right: 0;
    bottom: 0;
    transform: none;
    min-height: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  #gameWorkspace .game-launch-error {
    padding: 18px;
    color: #f7d27a;
    font-size: 13px;
  }
  #gameWorkspace .game-modal.launching-game.modal-fullscreen {
    height: auto;
  }
  @media(max-width:700px) {
    #gameWorkspace .game-modal.launching-game {
      width: 100%;
      height: min(78vh,720px);
      resize: both;
    }
  }
  /* Fullscreen controls for each floating game modal. */
  #gameWorkspace .window-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
  }
  #gameWorkspace .window-fullscreen {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid #f7d27a45;
    border-radius: 9px;
    background: linear-gradient(145deg,#30223b,#17111f);
    color: #f7d27a;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s,border-color .16s,transform .16s;
  }
  #gameWorkspace .window-fullscreen:hover {
    background: linear-gradient(145deg,#59406a,#2a1c35);
    border-color: #f7d27a;
    transform: translateY(-1px);
  }
  #gameWorkspace .window-fullscreen:active {
    transform: scale(.95);
  }
  #gameWorkspace .window-fullscreen:focus-visible {
    outline: 2px solid #f7d27a;
    outline-offset: 2px;
  }
  #gameWorkspace .game-modal.modal-fullscreen {
    position: fixed !important;
    top: var(--fullscreen-top,72px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    resize: none !important;
    overflow: auto !important;
    z-index: 9999 !important;
    border-radius: 20px;
    box-shadow: 0 30px 100px #000e,0 0 0 1px #f7d27a80;
  }
  #gameWorkspace .game-modal.modal-fullscreen .modal-hero {
    min-height: clamp(145px,27vh,280px);
  }
  #gameWorkspace .game-modal.modal-fullscreen .modal-symbol {
    font-size: clamp(65px,10vh,112px);
  }
  @media(max-width:700px) {
    #gameWorkspace .window-fullscreen {
      width: 32px;
      height: 32px;
      min-width: 32px;
    }
    #gameWorkspace .game-modal.modal-fullscreen {
      top: var(--fullscreen-top,72px) !important;
      left: 7px !important;
      right: 7px !important;
      bottom: 7px !important;
      width: calc(100vw - 14px) !important;
      height: auto !important;
      border-radius: 16px;
    }
  }


  #gameWorkspace .game-modal.auto-arranged {
    box-sizing: border-box;
    overflow: auto !important;
    border-radius: 18px;
  }
  #gameWorkspace .game-modal.auto-arranged .modal-hero {
    min-height: clamp(95px,16vh,180px);
  }
  #gameWorkspace .game-modal.auto-arranged .modal-symbol {
    font-size: clamp(42px,5vw,72px);
  }
  #gameWorkspace .game-modal.auto-arranged .modal-copy {
    padding: 14px 16px 20px;
  }
  #gameWorkspace .game-modal.auto-arranged .modal-copy h2 {
    font-size: clamp(17px,1.6vw,23px);
  }
  #gameWorkspace .game-modal.auto-arranged .modal-copy p {
    font-size: 12px;
  }
  #workspaceToolbar {
    z-index: 100000;
  }
  @media(max-width:700px) {
    #gameWorkspace .game-modal.auto-arranged {
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
      margin-bottom: 12px;
    }
    #workspaceToolbar {
      position: sticky;
      top: 0;
    }
  }


  #workspaceToolbar .arrange-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #493452;
    background: linear-gradient(145deg,#21162b,#160f20);
    color: #e9dfef;
    border-radius: 999px;
    padding: 7px 12px 7px 9px;
    min-height: 38px;
    font: 600 12px/1 inherit;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #ffffff0b,0 4px 14px #0003;
    transition: border-color .2s,background .2s,box-shadow .2s,color .2s;
  }
  #workspaceToolbar .arrange-switch:hover {
    border-color: #987443;
    background: linear-gradient(145deg,#30203a,#1d1328);
  }
  #workspaceToolbar .arrange-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 19px;
    padding: 3px;
    border-radius: 999px;
    background: #514358;
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px #0008;
    transition: background .22s,box-shadow .22s;
    flex: none;
  }
  #workspaceToolbar .arrange-switch-thumb {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: linear-gradient(145deg,#fff,#cfc5d7);
    box-shadow: 0 1px 3px #0008;
    transform: translateX(0);
    transition: transform .22s cubic-bezier(.2,.8,.2,1),background .22s;
  }
  #workspaceToolbar .arrange-switch.is-on {
    color: #ffe7a4;
    border-color: #c49a49;
    background: linear-gradient(145deg,#382a27,#211827);
    box-shadow: 0 0 0 1px #d5ad5530,inset 0 1px 0 #ffffff12,0 4px 16px #0004;
  }
  #workspaceToolbar .arrange-switch.is-on .arrange-switch-track {
    background: linear-gradient(90deg,#a66b27,#f0ca6c);
    box-shadow: inset 0 1px 3px #5c351c,0 0 10px #f0c45a35;
  }
  #workspaceToolbar .arrange-switch.is-on .arrange-switch-thumb {
    transform: translateX(15px);
    background: linear-gradient(145deg,#fff9df,#fff);
  }
  #workspaceToolbar .arrange-switch:focus-visible {
    outline: 2px solid #f7d27a;
    outline-offset: 3px;
  }
  @media(max-width:520px) {
    #workspaceToolbar .arrange-switch {
      gap: 6px;
      padding: 6px 9px;
      font-size: 11px;
    }
    .arrange-switch-label {
      white-space: nowrap;
    }
  }


 /* Original style block: theme-panel-coverage */
  /* Theme coverage for competition statistics, spin-history drawer and game modals */
  body[data-theme] .competition {
    color: var(--theme-text);
    border-color: var(--theme-line);
    background: radial-gradient(ellipse at 92% 0%,color-mix(in srgb,var(--theme-accent) 13%,transparent),transparent 42%),linear-gradient(135deg,var(--theme-panel),color-mix(in srgb,var(--theme-page) 80%,var(--theme-panel)));
    box-shadow: 0 18px 50px #0002;
  }
  body[data-theme] .competition:before {
    background: linear-gradient(var(--theme-accent),var(--theme-accent-2),transparent);
  }
  body[data-theme] .competition-kicker,body[data-theme] .competition-kicker:before {
    color: var(--theme-accent);
  }
  body[data-theme] .competition-kicker:before {
    background: var(--theme-accent);
  }
  body[data-theme] .competition-head p,body[data-theme] .competition-metric .metric-top,body[data-theme] .competition-metric small,body[data-theme] .competition-subhead span,body[data-theme] .leaderboard th,body[data-theme] .competition-note,body[data-theme] .activity-copy small {
    color: var(--theme-muted);
  }
  body[data-theme] .competition-metric,body[data-theme] .competition-board,body[data-theme] .competition-activity {
    background: color-mix(in srgb,var(--theme-panel) 82%,transparent);
    border-color: var(--theme-line);
  }
  body[data-theme] .competition-metric .metric-icon,body[data-theme] .activity-icon {
    background: color-mix(in srgb,var(--theme-accent) 12%,transparent);
    border-color: var(--theme-line);
    color: var(--theme-accent);
  }
  body[data-theme] .leaderboard td {
    color: var(--theme-text);
    border-color: var(--theme-line);
  }
  body[data-theme] .leaderboard .rank.gold,body[data-theme] .leader-score,body[data-theme] .activity-value {
    color: var(--theme-accent) !important;
  }
  body[data-theme] .leader-avatar {
    background: color-mix(in srgb,var(--theme-accent) 13%,var(--theme-panel));
    border-color: var(--theme-line);
  }
  body[data-theme] .competition-badge {
    border-color: color-mix(in srgb,var(--theme-accent) 35%,transparent);
    background: color-mix(in srgb,var(--theme-accent) 9%,transparent);
    color: var(--theme-accent);
  }
  body[data-theme] .competition-badge:before {
    background: var(--theme-accent);
    box-shadow: 0 0 10px color-mix(in srgb,var(--theme-accent) 65%,transparent);
  }
  body[data-theme] .spin-history-panel {
    color: var(--theme-text);
    background: linear-gradient(160deg,var(--theme-panel),var(--theme-page));
    border-color: var(--theme-line);
  }
  body[data-theme] .history-header {
    border-color: var(--theme-line);
    background: radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--theme-accent) 14%,transparent),transparent 65%);
  }
  body[data-theme] .history-eyebrow,body[data-theme] .history-count {
    color: var(--theme-accent);
  }
  body[data-theme] .history-header p,body[data-theme] .history-empty,body[data-theme] .history-footer {
    color: var(--theme-muted);
  }
  body[data-theme] .history-close,body[data-theme] .history-clear,body[data-theme] .history-footer button {
    color: var(--theme-text);
    background: var(--theme-panel);
    border-color: var(--theme-line);
  }
  body[data-theme] .history-entry {
    background: color-mix(in srgb,var(--theme-panel) 82%,transparent);
    border-color: var(--theme-line);
    color: var(--theme-text);
  }
  body[data-theme] .history-entry-top time,body[data-theme] .history-entry-bottom {
    color: var(--theme-muted);
  }
  body[data-theme] .history-result span {
    background: color-mix(in srgb,var(--theme-accent) 12%,var(--theme-panel));
    border-color: var(--theme-line);
    color: var(--theme-text);
  }
  body[data-theme] .history-toggle {
    color: var(--theme-text);
    background: linear-gradient(145deg,var(--theme-panel),var(--theme-page));
    border-color: var(--theme-line);
    box-shadow: 0 8px 24px #0003;
  }
  body[data-theme] .history-toggle-icon {
    color: var(--theme-accent);
  }
  body[data-theme] #gameWorkspace .game-modal {
    color: var(--theme-text);
    border-color: var(--theme-line);
    background: radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--theme-accent) 12%,transparent),transparent 45%),linear-gradient(145deg,var(--theme-panel),var(--theme-page));
    box-shadow: 0 30px 100px #0008;
  }
  body[data-theme] .modal-copy h2,body[data-theme] .modal-copy .modal-kicker {
    color: var(--theme-accent);
  }
  body[data-theme] .modal-copy p {
    color: var(--theme-muted);
  }
  body[data-theme] .modal-chip {
    color: var(--theme-text);
    background: color-mix(in srgb,var(--theme-panel) 75%,transparent);
    border-color: var(--theme-line);
  }
  body[data-theme] .modal-actions .btn-ghost {
    color: var(--theme-text);
    background: color-mix(in srgb,var(--theme-panel) 90%,transparent);
    border-color: var(--theme-line);
  }
  body[data-theme] .demo-stage {
    color: var(--theme-text);
    background: color-mix(in srgb,var(--theme-page) 78%,var(--theme-panel));
    border-color: var(--theme-line);
  }
  body[data-theme] .demo-stage h3,body[data-theme] .demo-stage strong {
    color: var(--theme-accent);
  }
  body[data-theme] .demo-reel {
    border-color: var(--theme-line);
  }
  body[data-theme] .modal-close,body[data-theme] .modal-fullscreen {
    color: var(--theme-text);
    background: color-mix(in srgb,var(--theme-panel) 88%,transparent);
    border-color: var(--theme-line);
  }
  body[data-theme="light"] .competition,body[data-theme="light"] .spin-history-panel,body[data-theme="light"] #gameWorkspace .game-modal {
    box-shadow: 0 18px 48px #43331b14;
  }
  body[data-theme="light"] .competition-board,body[data-theme="light"] .competition-activity,body[data-theme="light"] .competition-metric,body[data-theme="light"] .history-entry {
    background: #ffffffb8;
  }
  body[data-theme="light"] .leaderboard td {
    color: #39313d;
  }
  body[data-theme="light"] .history-close,body[data-theme="light"] .history-clear,body[data-theme="light"] .history-footer button,body[data-theme="light"] .history-toggle {
    color: #332b38;
  }
  body[data-theme="clear"] .competition,body[data-theme="clear"] .competition-board,body[data-theme="clear"] .competition-activity,body[data-theme="clear"] .competition-metric,body[data-theme="clear"] .spin-history-panel,body[data-theme="clear"] .history-entry,body[data-theme="clear"] #gameWorkspace .game-modal {
    backdrop-filter: blur(18px);
    background: linear-gradient(145deg,#dfffff20,#ffffff08);
    border-color: #b8fff266;
  }
  body[data-theme="neon"] .competition,body[data-theme="neon"] .spin-history-panel,body[data-theme="neon"] #gameWorkspace .game-modal {
    box-shadow: 0 0 28px #55f7ff12,0 22px 70px #0007;
  }
  body[data-theme="neon"] .competition,body[data-theme="neon"] .competition-board,body[data-theme="neon"] .competition-activity,body[data-theme="neon"] .competition-metric,body[data-theme="neon"] .history-entry,body[data-theme="neon"] .history-toggle,body[data-theme="neon"] #gameWorkspace .game-modal {
    border-color: #55f7ff35;
  }
  body[data-theme="granite"] .competition,body[data-theme="granite"] .competition-board,body[data-theme="granite"] .competition-activity,body[data-theme="granite"] .competition-metric,body[data-theme="granite"] .history-entry {
    background: linear-gradient(145deg,#34383d,#24272b);
  }
  body[data-theme="sunset"] .competition,body[data-theme="sunset"] .competition-board,body[data-theme="sunset"] .competition-activity,body[data-theme="sunset"] .competition-metric,body[data-theme="sunset"] .history-entry {
    background: linear-gradient(145deg,#482137,#2c172b);
  }
  body[data-theme="waterfall"] .competition,body[data-theme="waterfall"] .competition-board,body[data-theme="waterfall"] .competition-activity,body[data-theme="waterfall"] .competition-metric,body[data-theme="waterfall"] .history-entry {
    background: linear-gradient(145deg,#164257,#0b2638);
  }


  #randomGames.win-countdown-active,
#randomGames.win-countdown-active:hover,
#randomGames.win-countdown-active:focus,
#randomGames.win-countdown-active:active {
    cursor: wait !important;
    opacity: 1 !important;
    border-color: #ffd66b !important;
    box-shadow: 0 0 0 8px #050b16e8,0 0 0 10px #ffc45e99,0 0 34px #ffc45eaa,inset 0 0 24px #ffc45e33 !important;
  }
  #randomGames .win-countdown-number {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 900;
    letter-spacing: -2px;
    color: #ffe7a0;
    text-shadow: 0 0 12px #ffc45e,0 0 28px #ff9f43;
    font-variant-numeric: tabular-nums;
  }
  #randomGames.win-countdown-active:disabled {
    pointer-events: none !important;
  }
  @media(max-width:700px) {
    #randomGames .win-countdown-number {
      font-size: 40px !important;
    }
  }


 /* Original style block: line-prize-table-styles */
  .line-prizes {
    margin: 28px 0 34px;
    padding: 22px;
    border: 1px solid var(--theme-line,#ffffff1b);
    border-radius: 18px;
    background: radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--theme-accent,#f7d27a) 12%,transparent),transparent 45%),linear-gradient(145deg,var(--theme-panel,#191522),var(--theme-page,#100e18));
    color: var(--theme-text,#f7f3ff);
    box-shadow: 0 14px 40px #0002;
  }
  .line-prizes-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 17px;
  }
  .line-prizes-kicker {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--theme-accent,#f7d27a);
    margin-bottom: 6px;
  }
  .line-prizes-head h3 {
    font-size: 21px;
    margin: 0 0 6px;
  }
  .line-prizes-head p {
    margin: 0;
    color: var(--theme-muted,#aaa3b8);
    font-size: 12px;
    line-height: 1.6;
    max-width: 700px;
  }
  .line-prizes-chip {
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb,var(--theme-accent,#f7d27a) 35%,transparent);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--theme-accent,#f7d27a);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1px;
  }
  .line-prize-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 11px;
  }
  .line-prize-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--theme-line,#ffffff17);
    border-radius: 13px;
    background: color-mix(in srgb,var(--theme-page,#100e18) 70%,transparent);
  }
  .line-prize-symbol {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb,var(--prize-color,var(--theme-accent,#f7d27a)) 16%,transparent);
    color: var(--prize-color,var(--theme-accent,#f7d27a));
    font-size: 25px;
    text-shadow: 0 0 12px var(--prize-color,var(--theme-accent,#f7d27a));
  }
  .line-prize-colors .line-prize-card {
    border-color: color-mix(in srgb,var(--prize-color,var(--theme-line,#ffffff17)) 30%,var(--theme-line,#ffffff17));
  }
  .line-prize-card div {
    min-width: 0;
    flex: 1;
  }
  .line-prize-card strong {
    display: block;
    font-size: 12px;
  }
  .line-prize-card small {
    display: block;
    color: var(--theme-muted,#aaa3b8);
    font-size: 10px;
    line-height: 1.4;
    margin-top: 4px;
  }
  .line-prize-card>b {
    white-space: nowrap;
    color: var(--theme-accent,#f7d27a);
    font-size: 13px;
    font-weight: 950;
  }
  .line-prizes-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--theme-line,#ffffff17);
    font-size: 10px;
    color: var(--theme-muted,#aaa3b8);
  }
  .line-prizes-foot strong {
    color: var(--theme-accent,#f7d27a);
  }
  @media(max-width:850px) {
    .line-prize-grid {
      grid-template-columns: 1fr;
    }
    .line-prize-card {
      padding: 12px;
    }
    .line-prizes {
      padding: 17px;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .line-prizes,.line-prize-card {
      transition: none;
    }
  }


 /* Original style block: random-button-visible-glow-fix */
  /* Strong always-visible halo: use an inset rim and multiple outer shadows so it remains visible on dark themes. */
  #randomGames.random-page-btn:not(:disabled) {
    border: 2px solid #ffe4a0 !important;
    box-shadow: 0 0 0 3px #f7d27a33,0 0 14px 5px #f7d27a99,0 0 30px 10px #d99b365c,0 8px 22px #0009,inset 0 0 12px #ffe7a044 !important;
    animation: randomButtonGlow 2s ease-in-out infinite !important;
  }
  #randomGames.random-page-btn:not(:disabled):hover,
#randomGames.random-page-btn:not(:disabled):focus-visible {
    box-shadow: 0 0 0 4px #ffe7a055,0 0 20px 8px #ffe7a0cc,0 0 40px 14px #d99b3680,0 10px 26px #0009,inset 0 0 16px #ffe7a077 !important;
  }
  #randomGames.random-page-btn:disabled {
    animation: none !important;
  }
  @keyframes randomButtonGlow {
    0%,100% {
      box-shadow: 0 0 0 2px #f7d27a22,0 0 12px 4px #f7d27a77,0 0 24px 8px #d99b3644,0 8px 22px #0009,inset 0 0 10px #ffe7a033;
    }
    50% {
      box-shadow: 0 0 0 4px #ffe7a044,0 0 20px 8px #ffe7a0bb,0 0 38px 13px #d99b3680,0 8px 22px #0009,inset 0 0 15px #ffe7a066;
    }
  }
  /* Run the pop and the glow together; the glow rule otherwise overrides animation shorthand. */
  #randomGames.random-page-btn.spin-ready-pop:not(:disabled) {
    animation: spinReadyPop 760ms cubic-bezier(.2,.85,.25,1) both, randomButtonGlow 2s ease-in-out infinite !important;
    transform-origin: center !important;
    z-index: 2;
  }
  @media(prefers-reduced-motion:reduce) {
    #randomGames.random-page-btn.spin-ready-pop:not(:disabled) {
      animation: none !important;
      box-shadow: 0 0 0 3px #f7d27a55,0 0 18px 7px #f7d27aaa,0 0 30px 10px #d99b3666 !important;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    #randomGames.random-page-btn:not(:disabled) {
      animation: none !important;
      box-shadow: 0 0 0 3px #f7d27a55,0 0 18px 7px #f7d27aaa,0 0 30px 10px #d99b3666 !important;
    }
  }


/* Theme selector: polished, compact control matching the active theme. */
.theme-picker-wrap {
  position: relative;
  gap: 9px;
  height: 40px;
  padding: 0 30px 0 11px;
  border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-line));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-panel) 94%, var(--theme-accent) 6%), var(--theme-panel));
  box-shadow: inset 0 1px 0 #ffffff0b, 0 3px 10px #00000012;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  cursor: pointer;
}
.theme-picker-wrap > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 42%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  color: var(--theme-accent);
  font-size: 15px;
  line-height: 1;
}
.theme-picker-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--theme-muted);
  border-bottom: 1.5px solid var(--theme-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.theme-picker-wrap:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 68%, var(--theme-line));
  box-shadow: inset 0 1px 0 #ffffff10, 0 4px 15px #0000001c, 0 0 0 1px color-mix(in srgb, var(--theme-accent) 9%, transparent);
}
.theme-picker-wrap:focus-within {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 22%, transparent), 0 4px 15px #00000018;
}
.theme-picker-wrap:focus-within::after {
  border-color: var(--theme-accent);
}
.theme-picker-wrap select {
  width: 92px;
  max-width: 92px;
  min-width: 0;
  padding: 8px 0;
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
.theme-picker-wrap select option {
  background: var(--theme-panel);
  color: var(--theme-text);
}
@media (max-width: 720px) {
  .theme-picker-wrap {
    height: 36px;
    padding-left: 8px;
    padding-right: 26px;
    gap: 6px;
  }
  .theme-picker-wrap > span {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .theme-picker-wrap select {
    width: 78px;
    max-width: 78px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-picker-wrap,
  .theme-picker-wrap::after {
    transition: none;
  }
}

/* Fully custom theme dropdown; avoids the browser's native select popup. */
.theme-picker-wrap {
  position: relative;
  overflow: visible;
}
.theme-picker-wrap.is-open {
  z-index: 1000;
}
.theme-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 92px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.theme-picker-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid var(--theme-muted);
  border-bottom: 1.5px solid var(--theme-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease, border-color 160ms ease;
}
.theme-picker-wrap.is-open .theme-picker-chevron {
  transform: translateY(2px) rotate(225deg);
  border-color: var(--theme-accent);
}
.theme-picker-trigger:focus-visible,
.theme-picker-option:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 3px;
}
.theme-picker-menu {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 10px);
  right: -8px;
  width: 190px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 38%, var(--theme-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--theme-panel) 96%, #000 4%);
  box-shadow: 0 14px 36px #00000045, inset 0 1px 0 #ffffff0a;
  backdrop-filter: blur(16px);
  transform-origin: top right;
  animation: theme-menu-in 130ms ease-out;
}
.theme-picker-menu[hidden] {
  display: none !important;
}
.theme-picker-option {
  display: grid;
  grid-template-columns: 13px 1fr 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 37px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.theme-picker-option:hover,
.theme-picker-option:focus-visible {
  background: color-mix(in srgb, var(--theme-accent) 11%, transparent);
}
.theme-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--theme-accent) 23%, transparent);
  background: color-mix(in srgb, var(--theme-accent) 13%, transparent);
  color: var(--theme-accent);
}
.theme-option-swatch {
  width: 11px;
  height: 11px;
  border: 1px solid #ffffff42;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff0a;
}
.theme-swatch-dark { background: linear-gradient(135deg, #161622 0 50%, #f7d27a 50%); }
.theme-swatch-light { background: linear-gradient(135deg, #fffdf8 0 50%, #97651c 50%); }
.theme-swatch-neon { background: linear-gradient(135deg, #15152b 0 50%, #00f5d4 50%); }
.theme-swatch-clear { background: linear-gradient(135deg, #1d2938 0 50%, #9de7ff 50%); }
.theme-swatch-granite { background: linear-gradient(135deg, #42434a 0 50%, #c2c5cc 50%); }
.theme-swatch-sunset { background: linear-gradient(135deg, #4a203b 0 50%, #ff9568 50%); }
.theme-swatch-waterfall { background: linear-gradient(135deg, #102f3c 0 50%, #55d6c2 50%); }
.theme-option-check {
  color: var(--theme-accent);
  opacity: 0;
  text-align: center;
}
.theme-picker-option.is-selected .theme-option-check { opacity: 1; }
@keyframes theme-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 720px) {
  .theme-picker-trigger { min-width: 78px; gap: 9px; font-size: 11px; }
  .theme-picker-menu { right: -5px; width: 176px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-picker-menu { animation: none; }
  .theme-picker-chevron,
  .theme-picker-option { transition: none; }
}

/* Current-page game list in the multi-game workspace. */
#gameWorkspace .workspace-sidebar {
  position: absolute;
  z-index: 998;
  left: 12px;
  top: 64px;
  bottom: 12px;
  width: 232px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 10px;
  overflow: hidden;
  border: 1px solid #f7d27a40;
  border-radius: 16px;
  background: linear-gradient(160deg, #171321f5, #0c0a12f5);
  box-shadow: 0 18px 50px #0007;
  pointer-events: auto;
  color: #f5edd9;
  backdrop-filter: blur(18px);
}
#gameWorkspace .workspace-sidebar-heading {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5px;
  padding: 2px 5px 11px;
  border-bottom: 1px solid #ffffff16;
}
#gameWorkspace .workspace-sidebar-heading span {
  color: #c7a65b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}
#gameWorkspace .workspace-sidebar-heading strong {
  overflow: hidden;
  color: #fff4d6;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gameWorkspace .workspace-game-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #8d7446 #171321;
}
#gameWorkspace .workspace-game-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 7px;
  border: 1px solid #ffffff12;
  border-radius: 10px;
  background: #ffffff06;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
#gameWorkspace .workspace-game-item:hover,
#gameWorkspace .workspace-game-item:focus-visible {
  border-color: #f7d27a88;
  background: #f7d27a12;
  outline: none;
}
#gameWorkspace .workspace-game-item:active {
  transform: scale(.985);
}
#gameWorkspace .workspace-game-item img {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid #f7d27a30;
  border-radius: 8px;
  background: #0a0910;
}
#gameWorkspace .workspace-game-item span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
}
#gameWorkspace .workspace-sidebar-empty {
  margin: 4px 5px;
  color: #a8a0b5;
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  #gameWorkspace .workspace-sidebar {
    position: relative;
    inset: auto;
    order: 0;
    width: auto;
    max-height: 190px;
    flex: 0 0 auto;
    margin: 0 0 12px;
  }
  #gameWorkspace .workspace-game-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
  #gameWorkspace .workspace-game-item img {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
}

/* Pagination and Random controls inside the game workspace sidebar. */
#gameWorkspace .workspace-sidebar-controls {
  display: flex !important;
  flex: 0 0 auto;
  visibility: visible;
  opacity: 1;
  flex-direction: column;
  gap: 9px;
  padding: 0 2px 10px;
  border-bottom: 1px solid #ffffff16;
}
#gameWorkspace .workspace-random-btn {
  width: 100%;
  min-height: 34px;
  border: 1px solid #f7d27a55;
  border-radius: 9px;
  background: linear-gradient(135deg, #f7d27a1f, #b9822d12);
  color: #f7d27a;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
#gameWorkspace .workspace-random-btn:hover,
#gameWorkspace .workspace-random-btn:focus-visible,
#gameWorkspace .workspace-random-btn.active {
  border-color: #f7d27a;
  background: linear-gradient(135deg, #ffe7a0, #d69a35);
  color: #241707;
  outline: none;
}
#gameWorkspace .workspace-random-btn:active {
  transform: translateY(1px);
}
#gameWorkspace .workspace-page-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
#gameWorkspace .workspace-page-arrow,
#gameWorkspace .workspace-page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 27px;
  padding: 0 5px;
  border: 1px solid #ffffff1a;
  border-radius: 7px;
  background: #ffffff08;
  color: #e9dfc8;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#gameWorkspace .workspace-page-arrow {
  font-size: 19px;
  line-height: 1;
}
#gameWorkspace .workspace-page-numbers {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
#gameWorkspace .workspace-page-arrow:hover:not(:disabled),
#gameWorkspace .workspace-page-number:hover,
#gameWorkspace .workspace-page-arrow:focus-visible,
#gameWorkspace .workspace-page-number:focus-visible {
  border-color: #f7d27a88;
  background: #f7d27a18;
  outline: none;
}
#gameWorkspace .workspace-page-number.active {
  border-color: #f7d27a;
  background: linear-gradient(135deg, #ffe7a0, #d69a35);
  color: #241707;
}
#gameWorkspace .workspace-page-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  #gameWorkspace .workspace-random-btn,
  #gameWorkspace .workspace-page-arrow,
  #gameWorkspace .workspace-page-number {
    transition: none;
  }
}

/* JSON-configured links that open inside workspace modal windows. */
#gameWorkspace .workspace-custom-links {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  max-height: 126px;
  min-height: 0;
  overflow: auto;
  padding: 0 2px 9px;
  border-bottom: 1px solid #ffffff16;
  scrollbar-width: thin;
  scrollbar-color: #8d7446 #171321;
}
#gameWorkspace .workspace-custom-links-heading {
  padding: 0 3px 2px;
  color: #c7a65b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
#gameWorkspace .workspace-custom-link-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#gameWorkspace .workspace-custom-link {
  width: 100%;
  min-height: 30px;
  padding: 7px 9px;
  border: 1px solid #f7d27a24;
  border-radius: 8px;
  background: #f7d27a0a;
  color: #f5edd9;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
#gameWorkspace .workspace-custom-link:hover,
#gameWorkspace .workspace-custom-link:focus-visible {
  border-color: #f7d27a88;
  background: #f7d27a18;
  outline: none;
}
#gameWorkspace .custom-link-modal .game-launch-frame {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: transparent;
}
#gameWorkspace .custom-link-modal .game-launch-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

/* Homepage links use the same JSON configuration and modal-opening behavior as the workspace sidebar. */
.homepage-custom-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid #f7d27a24;
  border-radius: 14px;
  background: linear-gradient(115deg, #f7d27a0b, #ffffff03);
}
.homepage-custom-links-heading {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
}
.homepage-custom-links-heading span {
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.homepage-custom-links-heading strong {
  color: #f5edd9;
  font-size: 14px;
}
.homepage-custom-link-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.homepage-custom-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #f7d27a35;
  border-radius: 9px;
  background: #f7d27a0c;
  color: #f5edd9;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.homepage-custom-link::after {
  content: "↗";
  color: var(--gold);
  font-size: 13px;
}
.homepage-custom-link:hover,
.homepage-custom-link:focus-visible {
  transform: translateY(-1px);
  border-color: #f7d27a99;
  background: #f7d27a1c;
  outline: none;
}
.homepage-custom-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 640px) {
  .homepage-custom-links {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-custom-link {
    transition: none;
  }
}


/* Custom language selector styled to match the theme selector. */
.language-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 30px 0 11px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 34%, var(--theme-line));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-panel) 94%, var(--theme-accent) 6%), var(--theme-panel));
  box-shadow: inset 0 1px 0 #ffffff0b, 0 3px 10px #00000012;
  color: var(--theme-muted);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.language-picker-wrap:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 68%, var(--theme-line));
  box-shadow: inset 0 1px 0 #ffffff10, 0 4px 15px #0000001c, 0 0 0 1px color-mix(in srgb, var(--theme-accent) 9%, transparent);
}
.language-picker-wrap:focus-within {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 22%, transparent), 0 4px 15px #00000018;
}
.language-picker-wrap.is-open { z-index: 1000; }
.language-picker-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 42%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  color: var(--theme-accent);
  font-size: 14px;
  line-height: 1;
}
.language-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 78px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.language-picker-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid var(--theme-muted);
  border-bottom: 1.5px solid var(--theme-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease, border-color 160ms ease;
}
.language-picker-wrap.is-open .language-picker-chevron {
  transform: translateY(2px) rotate(225deg);
  border-color: var(--theme-accent);
}
.language-picker-trigger:focus-visible,
.language-picker-option:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.language-picker-menu {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 10px);
  right: -8px;
  width: 174px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 38%, var(--theme-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--theme-panel) 96%, #000 4%);
  box-shadow: 0 14px 36px #00000045, inset 0 1px 0 #ffffff0a;
  backdrop-filter: blur(16px);
  transform-origin: top right;
  animation: theme-menu-in 130ms ease-out;
}
.language-picker-menu[hidden] { display: none !important; }
.language-picker-option {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 37px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.language-picker-option:hover,
.language-picker-option:focus-visible { background: color-mix(in srgb, var(--theme-accent) 11%, transparent); }
.language-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--theme-accent) 23%, transparent);
  background: color-mix(in srgb, var(--theme-accent) 13%, transparent);
  color: var(--theme-accent);
}
.language-option-flag {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  padding: 4px 2px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.language-option-check { color: var(--theme-accent); opacity: 0; text-align: center; }
.language-picker-option.is-selected .language-option-check { opacity: 1; }
@media (max-width: 720px) {
  .language-picker-wrap { height: 36px; padding-left: 8px; padding-right: 25px; gap: 6px; }
  .language-picker-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .language-picker-trigger { min-width: 70px; gap: 8px; font-size: 11px; }
  .language-picker-menu { right: -5px; width: 166px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-picker-wrap, .language-picker-chevron, .language-picker-option { transition: none; }
  .language-picker-menu { animation: none; }
}

/* Launched game windows remain resizable in Auto Arrange; scroll only when needed. */
#gameWorkspace .game-modal.auto-arranged.launching-game {
  overflow: auto !important;
  resize: both !important;
  overscroll-behavior: contain;
  scrollbar-width: auto;
}
#gameWorkspace .game-modal.auto-arranged.launching-game::-webkit-scrollbar {
  display: initial;
}

.integration-state-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}


/* Modal favorite/compare controls mirror the homepage game-card actions. */
#gameWorkspace .game-modal .modal-hero { position: relative; }
#gameWorkspace .game-modal .modal-game-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
}
#gameWorkspace .game-modal .modal-game-actions .heart,
#gameWorkspace .game-modal .modal-game-actions .compare-pin {
  position: static !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  border-radius: 50%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  box-shadow: 0 2px 9px #0008, inset 0 1px 0 #ffffff22;
}
#gameWorkspace .game-modal .modal-game-actions .compare-pin {
  font-size: 19px;
  color: #fff;
  background: #08071080;
  border: 1px solid #ffffff30;
  box-shadow: 0 2px 9px #0008, inset 0 1px 0 #ffffff22;
}
#gameWorkspace .game-modal .modal-game-actions .compare-pin.selected {
  color: #17111d;
  background: var(--theme-accent,#f7d27a);
  border-color: var(--theme-accent,#f7d27a);
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--theme-accent,#f7d27a) 28%,transparent),0 0 16px color-mix(in srgb,var(--theme-accent,#f7d27a) 42%,transparent);
}
body[data-theme] #gameWorkspace .game-modal .modal-game-actions .compare-pin {
  color: var(--theme-text);
  background: color-mix(in srgb,var(--theme-page) 72%,transparent);
  border-color: var(--theme-line);
}
body[data-theme] #gameWorkspace .game-modal .modal-game-actions .compare-pin.selected {
  color: var(--theme-page);
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}
#gameWorkspace .game-modal .modal-game-actions .heart:active,
#gameWorkspace .game-modal .modal-game-actions .compare-pin:active {
  transform: scale(.94);
  filter: brightness(1.18);
}
#gameWorkspace .game-modal .modal-game-actions .heart:focus-visible,
#gameWorkspace .game-modal .modal-game-actions .compare-pin:focus-visible {
  outline: 3px solid var(--theme-accent,#f7d27a);
  outline-offset: 2px;
}
@media(max-width:600px) {
  #gameWorkspace .game-modal .modal-game-actions .heart,
  #gameWorkspace .game-modal .modal-game-actions .compare-pin {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    min-height: 46px;
  }
}


/* Comparison workflow feedback */
.compare-action.compare-ready {
  border-color: var(--theme-accent,#f7d27a);
  background: color-mix(in srgb,var(--theme-accent,#f7d27a) 18%,var(--theme-panel,#191624));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--theme-accent,#f7d27a) 22%,transparent), 0 0 20px color-mix(in srgb,var(--theme-accent,#f7d27a) 22%,transparent);
}
#gameWorkspace .workspace-game-item.in-comparison {
  border-color: #f7d27a88;
  background: #f7d27a12;
}
#gameWorkspace .workspace-compare-indicator {
  flex: 0 0 auto;
  margin-left: auto;
  color: #f7d27a;
  font-size: 13px;
  filter: drop-shadow(0 0 5px #f7d27a66);
}
#gameWorkspace .workspace-compare-indicator[hidden] { display:none; }

/* Delicate modal comparison feedback */
.modal-window{position:relative}
.modal-compare-popup{position:absolute;right:18px;top:56px;z-index:40;padding:9px 13px;border-radius:999px;background:rgba(12,16,25,.94);border:1px solid rgba(255,215,130,.35);box-shadow:0 10px 28px rgba(0,0,0,.28);font-size:12px;opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.modal-compare-popup.visible{opacity:1;transform:translateY(0)}
.modal-compare-dialog{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(4,7,12,.38);backdrop-filter:blur(2px)}
.modal-compare-dialog-card{width:min(300px,calc(100% - 36px));padding:20px;border-radius:16px;text-align:center;background:rgba(17,22,34,.98);border:1px solid rgba(255,215,130,.28);box-shadow:0 20px 55px rgba(0,0,0,.42)}
.modal-compare-dialog-icon{font-size:26px;margin-bottom:8px}.modal-compare-dialog-card strong{display:block;font-size:15px}.modal-compare-dialog-card p{margin:8px 0 16px;font-size:13px;color:var(--muted,#aeb7c5)}