/* Originals: Lucky Scratch ticket, Limbo, Tower and Coin Flip */

/* ---------- Lucky Scratch ---------- */
.sx-ticket{position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:24px;background:radial-gradient(120% 80% at 0% 0%,rgba(250,204,21,.18),transparent 55%),linear-gradient(165deg,#2a1d4f 0%,#171233 55%,#0f0c22 100%);box-shadow:inset 0 0 0 1.5px rgba(250,204,21,.45),0 18px 40px -20px rgba(0,0,0,.9)}
.sx-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);pointer-events:none}
.sx-hd{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px}
.sx-hd small{display:block;color:#fde68a;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sx-hd b{display:block;margin-top:1px;font:900 26px/1 ui-rounded,-apple-system,system-ui,sans-serif;letter-spacing:-.02em;background:linear-gradient(180deg,#fff7d6,#facc15);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-top{flex:none;padding:6px 10px;border-radius:999px;background:rgba(250,204,21,.14);color:#fde68a;font-size:12px;font-weight:700}
.sx-top b{font-size:12px;background:none;color:#fff;-webkit-text-fill-color:#fff}
.sx-play{position:relative;border-radius:16px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.sx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:linear-gradient(180deg,#fffaf0,#fdf0d5)}
.sx-c{aspect-ratio:1.15;display:grid;place-items:center;box-shadow:inset -1px -1px 0 rgba(120,90,30,.14)}
.sx-c span{width:56%;height:56%;display:grid;place-items:center}
.sx-c svg{width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.sx-c.open span{animation:sxpop .32s cubic-bezier(.2,1.4,.4,1)}
.sx-c.win{background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%)}
.sx-c.win span{animation:sxwin 1s ease-in-out infinite alternate}
@keyframes sxpop{from{transform:scale(.6);opacity:.3}to{transform:none;opacity:1}}
@keyframes sxwin{from{transform:scale(1)}to{transform:scale(1.12)}}
.sx-foil{position:absolute;left:0;top:0;cursor:grab;touch-action:none}
.sx-hint{position:absolute;inset:auto 0 12px;display:flex;justify-content:center;pointer-events:none;transition:opacity .3s}
.sx-hint span{padding:7px 12px;border-radius:999px;background:rgba(15,12,34,.82);color:#fff;font-size:12.5px;font-weight:700}
.sx-hint.gone{opacity:0}
.sx-perf{margin:14px -16px 12px;border-top:2px dashed rgba(250,204,21,.28)}
.sx-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sx-pay span{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.06)}
.sx-pay svg{width:22px;height:22px;flex:none}
.sx-pay b{color:#fff;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.sx-ticket.won{box-shadow:inset 0 0 0 2px #4ade80,0 0 40px -6px rgba(74,222,128,.5)}

/* ---------- shared stage for the new games ---------- */
.og-stage{position:relative;overflow:hidden;padding:16px;border-radius:24px;border:1px solid rgba(255,255,255,.08)}
.og-hist{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:24px;margin-top:12px}
.og-hist span{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.og-hist span.w{background:rgba(74,222,128,.14);color:#4ade80}
.og-info{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.og-info div{padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.og-info small{display:block;color:var(--m);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.og-info b{display:block;margin-top:2px;color:#fff;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Limbo ---------- */
.lb-stage{background:radial-gradient(90% 70% at 50% 100%,rgba(56,189,248,.18),transparent 60%),linear-gradient(180deg,#0d1730,#070b17)}
.lb-num{margin:18px 0 6px;text-align:center;font:900 64px/1 ui-rounded,-apple-system,system-ui,sans-serif;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;transition:color .2s,text-shadow .2s}
.lb-num.win{color:#4ade80;text-shadow:0 0 30px rgba(74,222,128,.45)}
.lb-num.lose{color:#f87171}
.lb-sub{text-align:center;color:var(--m);font-size:13.5px}
.lb-target{display:flex;align-items:center;gap:8px;height:54px;padding:0 6px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.lb-target button{width:42px;height:42px;border-radius:12px;font-size:20px;font-weight:700;color:#fff;background:rgba(255,255,255,.06)}
.lb-target div{flex:1;text-align:center}
.lb-target small{display:block;color:var(--m);font-size:10px;font-weight:700;letter-spacing:.08em}
.lb-target b{font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- Tower ---------- */
.tw-stage{background:radial-gradient(90% 60% at 50% 0%,rgba(168,85,247,.2),transparent 60%),linear-gradient(180deg,#1a1030,#0b0816)}
.tw-tower{display:flex;flex-direction:column-reverse;gap:6px}
.tw-row{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center;opacity:.45;transition:opacity .2s}
.tw-row.cur,.tw-row.done{opacity:1}
.tw-m{text-align:right;color:var(--m);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.tw-row.cur .tw-m{color:#e9d5ff}.tw-row.done .tw-m{color:#4ade80}
.tw-tiles{display:grid;gap:6px}
.tw-t{height:36px;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:grid;place-items:center;transition:background .15s,transform .1s}
.tw-row.cur .tw-t{background:linear-gradient(180deg,#7c3aed,#5b21b6);box-shadow:0 6px 16px -8px rgba(124,58,237,.9),inset 0 1px 0 rgba(255,255,255,.2);cursor:pointer}
.tw-row.cur .tw-t:active{transform:scale(.96)}
.tw-t svg{width:22px;height:22px}
.tw-t.safe{background:rgba(74,222,128,.18)}
.tw-t.trap{background:rgba(248,113,113,.22)}
.tw-t.ghost{opacity:.55}

/* ---------- Coin Flip ---------- */
.cf-stage{background:radial-gradient(70% 60% at 50% 40%,rgba(250,204,21,.16),transparent 65%),linear-gradient(180deg,#191304,#0b0904)}
.cf-coin-wrap{height:190px;display:grid;place-items:center;perspective:700px}
.cf-coin{position:relative;width:150px;height:150px;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
.cf-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 7px rgba(0,0,0,.12),inset 0 -10px 22px rgba(0,0,0,.25),0 14px 34px -12px rgba(0,0,0,.9)}
.cf-face.h{background:radial-gradient(circle at 35% 30%,#fff2b3,#facc15 45%,#b7791f)}
.cf-face.t{background:radial-gradient(circle at 35% 30%,#e9e5ff,#a78bfa 45%,#5b21b6);transform:rotateY(180deg)}
.cf-face b{font:900 44px/1 ui-rounded,-apple-system,system-ui,sans-serif;color:rgba(0,0,0,.45)}
.cf-face small{position:absolute;bottom:26px;font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(0,0,0,.4)}
.cf-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-pick button{height:46px;border-radius:14px;font-size:15px;font-weight:750;color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.cf-pick button.on.h{background:linear-gradient(180deg,#fde047,#ca8a04);color:#2a1c02;border-color:transparent}
.cf-pick button.on.t{background:linear-gradient(180deg,#c4b5fd,#7c3aed);color:#fff;border-color:transparent}
.cf-streak{display:flex;justify-content:center;gap:5px;margin-top:6px}
.cf-streak i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.cf-streak i.on{background:#facc15;box-shadow:0 0 8px rgba(250,204,21,.7)}

/* ---------- lobby tiles ---------- */
.t-lim{background:radial-gradient(circle at 50% 30%,#123156,#060d1c)}
.t-tw{background:radial-gradient(circle at 50% 30%,#3b1a63,#110820)}
.t-cf{background:radial-gradient(circle at 50% 30%,#4a3608,#140e02)}
.sx-top{white-space:nowrap}
.cf-pick button{display:grid;place-items:center;text-align:center}
.og-mp{display:inline-flex;align-items:center;gap:5px}.og-mp .mp-i{width:16px;height:16px}
.sx-top b{display:inline;margin:0;font:800 12px/1 -apple-system,system-ui,sans-serif;letter-spacing:0}
.sx-foil{transition:opacity .45s ease}.sx-foil.fade{opacity:0}
/* coin toss: flips end over end (rotateX), lands on a floor with a shadow */
.cf-coin-wrap{position:relative;height:250px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;perspective:900px}
.cf-coin{width:120px;height:120px;transition:none;transform:rotateX(0deg);will-change:transform}
.cf-face.t{transform:rotateX(180deg)}
.cf-face b{font-size:38px}.cf-face small{bottom:20px;font-size:10px}
.cf-shadow{position:absolute;left:50%;bottom:18px;width:110px;height:16px;margin-left:-55px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);opacity:.55}
.cf-coin-wrap::after{content:"";position:absolute;left:12%;right:12%;bottom:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(250,204,21,.25),transparent)}
.cf-stage .og-info{position:relative;z-index:2}