/* Habibi Casino: emerald felt, gold rails, ivory cards. Animations: transform / opacity only. */
body.casino { background: radial-gradient(70% 50% at 50% 0%, #0f3a2a66, transparent 70%), radial-gradient(60% 40% at 50% 100%, #1a130855, transparent 70%), var(--bg); }
main { padding-top: 96px; }
.cs-hero { text-align: center; padding: 26px 0 18px; }
.cs-hero .eyebrow { justify-content: center; }
.cs-hero h1 { font: 500 clamp(40px, 6.6vw, 84px)/1 var(--disp); letter-spacing: -.03em; margin: 16px auto 14px; max-width: 900px; text-wrap: balance; }
html[dir=rtl] .cs-hero h1 { font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.cs-hero .lede { color: var(--mut); max-width: 620px; margin: 0 auto; font-size: 17px; }

.gate-card { max-width: 560px; margin: 26px auto; padding: 32px 26px; text-align: center; border-radius: 26px; background: linear-gradient(160deg, #1b150c, #0d0a06); border: 1px solid var(--line2); display: grid; gap: 14px; justify-items: center; }
.gate-card img { width: 110px; height: 110px; border-radius: 50%; box-shadow: 0 0 60px -6px #f0c76699; }
.gate-card h2 { font: 600 34px/1.1 var(--disp); }
.gate-card p { color: var(--mut); }
.restore { width: 100%; text-align: start; margin-top: 6px; color: var(--mut); font-size: 14px; }
.restore { text-align: center; } .restore form { text-align: start; }
.linkish { color: var(--sand); text-decoration: underline; text-underline-offset: 4px; min-height: 40px; padding: 0 8px; }
.restore form { display: grid; gap: 10px; margin-top: 14px; }
.field { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: #050505; color: var(--ink); font: 600 16px/1.2 var(--text); outline: none; }
.field:focus { border-color: var(--gold); } .field.mono { font: 500 14px/1.2 var(--mono); }
.err { color: var(--red); font-size: 14px; min-height: 1.2em; }

/* chips bar */
.tables.demo .chipbar, .tables.demo [data-cashout] { opacity: .6; }
.bank { position: sticky; top: 66px; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin: 18px 0; padding: 16px 22px; border-radius: 22px;
  background: linear-gradient(160deg, #1d160bf2, #0d0a06f2); border: 1px solid var(--line2); box-shadow: 0 20px 50px -30px #000; }
.bank-chips { display: grid; } .bank-chips span { font: 700 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
html[dir=rtl] .bank-chips span { letter-spacing: 0; font-size: 13px; }
.bank-chips b { font: 600 40px/1.1 var(--disp); color: var(--gold); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.bank-chips b.up { animation: up .6s var(--spring); } .bank-chips b.down { animation: down .4s ease; }
@keyframes up { 40% { transform: scale(1.12); } } @keyframes down { 40% { transform: translateY(3px); opacity: .7; } }
.bank-chips small { color: var(--mut); font-size: 12px; }
.bank-meta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--mut); font-size: 14px; } .bank-meta b { color: var(--ink); margin-inline-start: 6px; }
[data-cashout].ready { animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { transform: scale(1.04); } }

/* tabs + chips */
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 99px; background: #ffffff08; border: 1px solid var(--line); width: max-content; margin: 8px auto 16px; }
.tabs button { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; font: 700 15px/1 var(--text); color: var(--mut); transition: transform .2s var(--spring); }
.tabs button i { font-style: normal; color: var(--gold2); }
.tabs button[aria-selected=true] { background: linear-gradient(180deg, #ffe7a6, #f0c766 45%, #c9952f); color: var(--accent-ink); }
.tabs button[aria-selected=true] i { color: var(--accent-ink); }
.chipbar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; color: var(--dim); font-size: 13px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chipb { width: 54px; height: 54px; border-radius: 50%; font: 800 13px/1 var(--text); color: #fff; position: relative; transition: transform .25s var(--spring);
  background: radial-gradient(circle, var(--cc) 52%, transparent 53%), repeating-conic-gradient(var(--cc) 0 30deg, #fff 30deg 45deg); box-shadow: 0 6px 14px -6px #000, inset 0 0 0 3px #00000033; }
.chipb::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px dashed #ffffff88; }
.chipb[aria-pressed=true] { transform: translateY(-6px) scale(1.08); box-shadow: 0 0 0 3px var(--gold), 0 10px 22px -8px #f0c766aa; }
.c1000 { --cc: #3a3f49; } .c5000 { --cc: #b3262b; } .c10000 { --cc: #1f5fbf; } .c25000 { --cc: #0f8a5f; } .c50000 { --cc: #6b2fa8; } .c100000 { --cc: #b8862f; }

.msg { text-align: center; min-height: 1.5em; color: var(--sand); font-weight: 700; }
.msg.big { font: 600 24px/1.3 var(--disp); }
.msg.good { color: #6fe6b9; } .msg.bad { color: var(--red); }

/* roulette */
.r-wrap { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 30px; align-items: center; }
.wheel-box { position: relative; aspect-ratio: 1; width: 100%; max-width: 400px; margin: 0 auto; }
.wheel-box::before { content: ''; position: absolute; inset: -5%; border-radius: 50%; background: radial-gradient(circle, #f0c76633, transparent 70%); }
.wheel { position: absolute; inset: 0; transition: transform 4.6s cubic-bezier(.12, .66, .12, 1); will-change: transform; }
.wheel svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 40px #000); }
.wheel .rim { fill: #1b130a; stroke: #d9a94a; stroke-width: 2; }
.wheel .sr { fill: #8e1b1f; } .wheel .sk { fill: #111; } .wheel .sg { fill: #0c7a52; }
.wheel path { stroke: #d9a94a; stroke-width: .7; }
.wheel .nums text { fill: #f7f1e6; font: 700 11px var(--text); text-anchor: middle; dominant-baseline: central; }
.wheel .inner { fill: #120d07; stroke: #d9a94a; stroke-width: 1.5; }
.pointer { position: absolute; left: 50%; top: -6px; width: 22px; height: 26px; margin-left: -11px; background: linear-gradient(#fff3c9, #c9952f); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 4px #000); }
.wheel-hub { position: absolute; inset: 36%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3a2a10, #0b0805); border: 2px solid var(--gold2); box-shadow: 0 0 30px #000 inset; }
.wheel-hub b { font: 600 42px/1 var(--disp); color: var(--gold); }
.wheel-hub b.nr { color: #ff6b6b; } .wheel-hub b.nk { color: #f7f1e6; } .wheel-hub b.ng { color: #3ee0a1; }
.r-hist { list-style: none; display: flex; gap: 6px; min-height: 32px; margin-bottom: 8px; flex-wrap: wrap; }
.r-hist li { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--text); border: 1px solid #ffffff22; }
.r-hist .nr { background: #8e1b1f; } .r-hist .nk { background: #151515; } .r-hist .ng { background: #0c7a52; }
.r-hist li.new { animation: pop .5s var(--spring); } @keyframes pop { from { transform: scale(0); } }
.r-board { display: grid; grid-template-columns: 1.2fr repeat(12, 1fr); grid-template-rows: repeat(3, 46px) 40px 40px; gap: 4px; margin: 10px 0 14px; padding: 10px; border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 0%, #11603f, #08341f); border: 2px solid #b8862f66; direction: ltr; }
.cell { position: relative; grid-column: var(--c) / span var(--cs); grid-row: var(--r) / span var(--rs); border-radius: 6px; font: 800 14px/1 var(--text); color: #fff; border: 1px solid #ffffff2b; transition: transform .15s; }
.cell:active { transform: scale(.94); }
.cell.r { background: #8e1b1f; } .cell.k { background: #141414; } .cell.g { background: #0c7a52; } .cell.o { background: #ffffff0d; font-size: 12px; }
.cell.out.r { background: #8e1b1f; } .cell.out.k { background: #141414; }
html[dir=rtl] .cell.o span { font-family: 'PlexAr', var(--text); }
.stack { position: absolute; top: -8px; right: -6px; z-index: 2; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; font: 800 10px/1 var(--text); font-style: normal; color: #1a1206;
  background: radial-gradient(circle, #ffe7a6, #c9952f); box-shadow: 0 3px 8px #000, inset 0 0 0 2px #fff6; animation: pop .3s var(--spring); }
.r-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.r-total { flex: 1; color: var(--mut); font-size: 14px; } .r-total b { color: var(--gold); font: 600 22px/1 var(--disp); margin-inline-start: 6px; }
.r-act .btn.big { min-width: 160px; }

/* felt tables */
.felt { position: relative; padding: 26px 18px; border-radius: 160px 160px 28px 28px / 90px 90px 28px 28px; background: radial-gradient(120% 90% at 50% 0%, #14724b, #08341f 70%); border: 3px solid #b8862f;
  box-shadow: inset 0 0 80px #0009, 0 30px 70px -30px #000; display: grid; gap: 14px; justify-items: center; min-height: 420px; overflow: hidden; }
.felt::before { content: ''; position: absolute; inset: 0; background: url(/media/lattice.svg) center / 120px; opacity: .05; pointer-events: none; }
.felt-rules { font: 700 11px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: #f0c766b3; text-align: center; }
html[dir=rtl] .felt-rules { letter-spacing: 0; font-size: 13px; }
.hand-row { display: grid; gap: 10px; justify-items: center; }
.who { color: #e9f5ee; font-weight: 700; font-size: 14px; } .who b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 99px; background: #0009; color: var(--gold); margin-inline-start: 6px; }
.who b:empty { display: none; }
.hand { display: flex; justify-content: center; gap: 0; min-height: 132px; direction: ltr; }
.hand .card { margin-inline: -14px; }
.card { position: relative; width: 92px; height: 132px; border-radius: 10px; background: linear-gradient(160deg, #fffdf6, #efe6d2); color: #141414; box-shadow: 0 10px 20px -8px #000, inset 0 0 0 1px #0002;
  animation: deal .45s calc(var(--i) * .12s) var(--spring) both; flex: none; }
@keyframes deal { from { opacity: 0; transform: translate(40px, -60px) rotate(12deg) scale(.8); } }
.card.red { color: #b3262b; }
.card b { position: absolute; top: 8px; left: 9px; font: 800 18px/1 var(--text); }
.card > i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 40px; }
.card span { position: absolute; right: 9px; bottom: 8px; font: 800 14px/1 var(--text); transform: rotate(180deg); display: grid; justify-items: center; }
.card span em { font-style: normal; font-size: 12px; }
.card.back { background: #0b1a12 url(/media/lattice.svg) center / 40px; border: 3px solid #f7f1e6; }
.card.back::after { content: ''; position: absolute; inset: 6px; border-radius: 6px; border: 1.5px solid #d9a94a; }

/* poker */
.paytable { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; padding: 10px 14px; border-radius: 12px; background: #0007; border: 1px solid #f0c76633; width: min(100%, 560px); font-size: 13px; }
.paytable li { display: flex; justify-content: space-between; gap: 8px; color: #d8e9df; } .paytable b { color: var(--gold); }
.paytable li.hit { color: #fff; } .paytable li.hit b { color: #fff; } .paytable li.hit { animation: hit 1s ease 2; }
@keyframes hit { 50% { opacity: .3; } }
.five { gap: 10px; flex-wrap: nowrap; }
.five .slot { position: relative; padding: 0; border-radius: 10px; transition: transform .25s var(--spring); }
.five .slot .card { margin: 0; }
.five .slot em { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font: 800 11px/1 var(--text); font-style: normal; letter-spacing: .14em; color: var(--gold); opacity: 0; text-transform: uppercase; }
.five .slot.held { transform: translateY(-14px); } .five .slot.held em { opacity: 1; }
.five .slot.held .card { box-shadow: 0 0 0 3px var(--gold), 0 14px 26px -8px #000; }
.g-act { display: flex; justify-content: center; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.g-act .btn { min-width: 140px; }

/* coins burst on a win */
.coins { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.coins i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c9, #f0c766 50%, #8f6a26); opacity: 0;
  animation: coin 1.4s var(--d) cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes coin { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 260px), calc(-50% + var(--y) * 260px + 120px)) scale(1) rotate(360deg); } }
.wheel-box, .modal-in { position: relative; }

/* history */
.hist { max-width: 760px; margin: 50px auto 0; }
.hist h2 { font: 600 30px/1 var(--disp); margin-bottom: 14px; }
.hist ol { list-style: none; display: grid; gap: 8px; }
.hist li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.hist li b { color: var(--gold); font: 600 20px/1 var(--disp); } .hist li span { color: var(--mut); flex: 1; }
.hist .st { font-style: normal; font: 700 12px/1 var(--text); padding: 6px 10px; border-radius: 99px; background: #ffffff10; color: var(--mut); }
.hist .st.sent { background: #19b37f2e; color: #6fe6b9; } .hist .st.share { color: var(--gold); }
.hist a { color: var(--gold); font-size: 13px; } .hist li.empty { color: var(--mut); justify-content: center; }

/* cash-out modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: #050505eb; animation: fade .3s both; }
@keyframes fade { from { opacity: 0; } }
.modal-in { width: min(560px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, #1d160b, #0d0a06); border: 1px solid var(--gold2); animation: cardup .5s var(--spring) both; max-height: calc(100vh - 32px); overflow: auto; }
@keyframes cardup { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.modal-in h2 { font: 600 44px/1 var(--disp); background: var(--goldg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-card { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line2); background: #111; aspect-ratio: 1200 / 630; }
.modal-in p { color: var(--sand); }
.modal-in .btn { width: 100%; }

@media (max-width: 900px) {
  .r-wrap { grid-template-columns: 1fr; }
  .wheel-box { max-width: 300px; }
  .bank { grid-template-columns: 1fr auto; top: 58px; padding: 12px 16px; gap: 10px; }
  .bank-meta { grid-column: 1 / -1; order: 3; gap: 14px; font-size: 13px; }
  .bank-chips b { font-size: 30px; }
  .bank .btn.big { min-height: 48px; font-size: 14px; padding: 0 16px; }
}
@media (max-width: 700px) {
  .r-board { grid-template-columns: repeat(3, 1fr) 1.1fr 1.1fr; grid-template-rows: 40px repeat(12, 34px); }
  .cell { grid-column: var(--vc) / span var(--vcs); grid-row: var(--vr) / span var(--vrs); }
  .tabs button { padding: 11px 14px; font-size: 14px; }
  .chipb { width: 46px; height: 46px; font-size: 12px; }
  .card { width: 64px; height: 92px; } .card b { font-size: 14px; top: 6px; left: 6px; } .card > i { font-size: 28px; } .card span { font-size: 11px; right: 6px; bottom: 6px; }
  .hand { min-height: 92px; } .hand .card { margin-inline: -8px; }
  .five { gap: 5px; } .five .card { width: calc((100vw - 90px) / 5); height: calc((100vw - 90px) / 5 * 1.43); }
  .felt { border-radius: 90px 90px 22px 22px / 50px 50px 22px 22px; padding: 22px 10px; min-height: 360px; }
  .paytable { grid-template-columns: 1fr 1fr; font-size: 12px; }
}