:root {
  --bg: #14112B; --bg2: #1E1A3D; --card: #262150; --card2: #2F2963; --line: #3A3370;
  --ink: #F4F2FF; --soft: #A9A3D6; --brand: #FF5C8A; --brand2: #FFB547; --ok: #2BD99B; --bad: #FF5470; --blue: #4DA3FF;
  --r: 18px; --shadow: 0 8px 24px rgba(0,0,0,.35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); min-height: 100%; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overscroll-behavior-y: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.boot { text-align: center; margin-top: 40vh; font-weight: 800; font-size: 28px; opacity: .6; }
#app { max-width: 720px; margin: 0 auto; padding: 12px 16px 40px; }

/* top bar */
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.top h1 { font-size: 22px; margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top h1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; background: var(--card); display: grid; place-items: center; font-size: 20px; flex: none; }
.pill { background: var(--card); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* home */
.hero { background: linear-gradient(135deg, #FF5C8A, #8B5CFF); border-radius: 24px; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: center; }
.hero b { font-size: 20px; display: block; }
.hero .go { margin-left: auto; background: #fff; color: #2A1B5C; font-weight: 800; padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
.sec { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 18px 4px 10px; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; background: var(--card); border-radius: var(--r); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 132px; box-shadow: var(--shadow); transition: transform .12s; overflow: hidden; }
.tile:active { transform: scale(.97); }
.tile .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; font-weight: 900; }
.tile b { font-size: 17px; }
.tile small { color: var(--soft); font-size: 13px; line-height: 1.3; }
.tile .best { position: absolute; top: 12px; right: 12px; font-size: 12px; color: var(--brand2); font-weight: 700; }
.tile .new { position: absolute; top: 12px; right: 12px; font-size: 11px; background: var(--brand); padding: 2px 8px; border-radius: 99px; font-weight: 800; }
.foot { margin-top: 28px; text-align: center; color: var(--soft); font-size: 13px; }
.foot a { color: var(--soft); }

/* game screen */
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stat { background: var(--card); border-radius: 14px; padding: 6px 14px; text-align: center; min-width: 78px; }
.stat small { display: block; font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 20px; }
.btn { background: var(--brand); color: #fff; font-weight: 800; padding: 12px 22px; border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.ghost { background: var(--card2); }
.btn.ok { background: var(--ok); color: #082A1E; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hint { color: var(--soft); font-size: 14px; text-align: center; }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip { background: var(--card); padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--blue); color: #fff; }
canvas.game { width: 100%; max-width: 480px; border-radius: 20px; background: var(--bg2); touch-action: none; display: block; }

/* modal */
#overlay:empty { display: none; }
#overlay { position: fixed; inset: 0; background: rgba(8,6,20,.72); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--bg2); border-radius: 26px; padding: 24px 20px; width: min(100%, 380px); text-align: center; box-shadow: var(--shadow); animation: pop .22s ease-out; }
.modal h2 { margin: 4px 0 6px; font-size: 26px; }
.modal .big { font-size: 46px; font-weight: 900; margin: 6px 0; }
.modal p { color: var(--soft); margin: 6px 0 14px; }
.modal .row { margin-top: 10px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-weight: 700; z-index: 60; animation: pop .18s; }

/* ad slots (empty until ads are switched on) */
.ad-slot { width: 100%; min-height: 0; }

/* 2048 */
.g2048 { --n: 4; width: min(100%, 420px); aspect-ratio: 1; background: #3A3370; border-radius: 16px; padding: 8px; position: relative; touch-action: none; }
.g2048 .cells, .g2048 .tiles { position: absolute; inset: 8px; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); gap: 8px; }
.g2048 .cells i { background: rgba(255,255,255,.06); border-radius: 10px; }
.g2048 .t { border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: clamp(18px, 7vw, 34px); transition: transform .1s; }
.g2048 .t.pop { animation: pop .15s; }
.g2048 .t.merge { animation: merge .18s; }
@keyframes merge { 50% { transform: scale(1.15); } }

/* word game */
.wboard { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(100%, 330px); }
.wrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wrow.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.wcell { aspect-ratio: 1; border: 2px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 28px; text-transform: uppercase; }
.wcell.filled { border-color: var(--soft); }
.wcell.g, .key.g { background: #2BB673; border-color: #2BB673; }
.wcell.y, .key.y { background: #E2A63B; border-color: #E2A63B; }
.wcell.x, .key.x { background: #3A3555; border-color: #3A3555; }
.wcell.flip { animation: flip .35s; }
@keyframes flip { 50% { transform: rotateX(90deg); } }
.keys { width: min(100%, 520px); display: flex; flex-direction: column; gap: 6px; }
.krow { display: flex; gap: 5px; justify-content: center; }
.key { flex: 1; max-width: 46px; height: 54px; background: #5A5390; border-radius: 8px; font-weight: 800; text-transform: uppercase; font-size: 15px; }
.key.wide { max-width: 72px; flex: 1.5; font-size: 12px; }

/* sudoku */
.sud { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 440px); aspect-ratio: 1; background: var(--line); gap: 1px; border: 3px solid #8E86D6; border-radius: 8px; overflow: hidden; }
.sud button { background: var(--bg2); font-size: clamp(16px, 5vw, 26px); font-weight: 700; display: grid; place-items: center; }
.sud button.given { color: var(--ink); font-weight: 900; }
.sud button.user { color: var(--blue); }
.sud button.bad { color: var(--bad); }
.sud button.peer { background: #241F49; }
.sud button.same { background: #3B3377; }
.sud button.sel { background: #514799; }
.sud button.c3 { border-right: 2px solid #8E86D6; }
.sud button.r3 { border-bottom: 2px solid #8E86D6; }
.sud button small { font-size: 9px; color: var(--soft); display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; line-height: 1; place-items: center; }
.pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(100%, 440px); }
.pad button { background: var(--card2); border-radius: 10px; height: 50px; font-size: 22px; font-weight: 800; }
.pad button.done { opacity: .3; }

/* ludo & chess */
.board-wrap { width: min(100%, 460px); }
.chess { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 3px solid #8E86D6; }
.chess button { min-width: 0; min-height: 0; overflow: visible; display: grid; place-items: center; font-size: clamp(22px, 8vw, 44px); line-height: 1; position: relative; }
.chess .l { background: #E9E3FF; } .chess .d { background: #8E7FD8; }
.chess .sel { box-shadow: inset 0 0 0 4px var(--brand2); }
.chess .last { box-shadow: inset 0 0 0 999px rgba(255,181,71,.35); }
.chess .chk { box-shadow: inset 0 0 0 999px rgba(255,84,112,.6); }
.chess .dot::after { content: ''; width: 28%; height: 28%; border-radius: 50%; background: rgba(20,17,43,.35); position: absolute; }
.chess .cap::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 4px solid rgba(20,17,43,.35); }
.pc { filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.pc.w { color: #fff; -webkit-text-stroke: 1.2px #1A1440; }
.pc.b { color: #1A1440; }

/* Country Wars */
.wars-banner { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: linear-gradient(135deg, #1F7A5A, #2BD99B); border-radius: 20px; padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); color: #fff; }
.wars-banner b { display: block; font-size: 17px; }
.wars-banner small { opacity: .92; }
.wars-banner .go { margin-left: auto; background: #fff; color: #145C43; font-weight: 900; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.wb-flag { font-size: 34px; line-height: 1; }
.wb-flag.big { font-size: 64px; }
.wars-me { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: 20px; padding: 14px; margin-bottom: 8px; }
.wars-me b { font-size: 22px; }
.wars-table { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.wt-row { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 12px; }
.wt-row.me { outline: 2px solid var(--ok); }
.wt-rank { width: 28px; text-align: center; font-weight: 800; }
.wt-flag { font-size: 26px; }
.wt-main { flex: 1; min-width: 0; }
.wt-name { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.wt-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.wt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--blue)); }
/* World Daily */
.daily-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.daily-chip { position: relative; flex: none; width: 82px; background: var(--card); border-radius: 16px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.daily-chip .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 22px; }
.daily-chip small { font-size: 12px; color: var(--soft); }
.daily-chip.done { opacity: .6; }
.daily-chip i { position: absolute; top: 4px; right: 8px; color: var(--ok); font-style: normal; font-weight: 900; }
.ch-banner { background: #2F2963; border: 1px dashed #8E86D6; border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; text-align: center; font-size: 14px; }
.ch-banner.daily { border-color: var(--ok); }
.live .pts { background: rgba(43,217,155,.15); color: var(--ok); border-radius: 12px; padding: 8px; font-weight: 800; margin: 6px 0; }
.live .pct { background: linear-gradient(135deg, #4DA3FF, #8B5CFF); border-radius: 14px; padding: 10px; margin: 6px 0; }
.live .pct b { display: block; font-size: 20px; }
.vs { font-weight: 800; }
.vs.won { color: var(--ok); } .vs.lost { color: var(--brand2); }
.feed { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.feed-row { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.feed-row b { margin-left: auto; font-size: 18px; }
.feed-row small { color: var(--soft); width: 64px; text-align: right; }
/* snakes & ladders */
.snl { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 3px solid #8E86D6; }
.snl-cell { position: absolute; width: 10%; height: 10%; font-size: 10px; color: rgba(255,255,255,.45); padding: 2px 3px; box-sizing: border-box; }
.snl-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.snl-tok { position: absolute; inset: 0; pointer-events: none; }
.snl-t { position: absolute; width: 5%; height: 5%; border-radius: 50%; border: 2px solid #14112B; box-shadow: 0 2px 4px rgba(0,0,0,.5); transition: left .13s, top .13s; }
/* word search */
.ws { display: grid; width: min(100%, 440px); aspect-ratio: 1; gap: 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ws span { display: grid; place-items: center; font-weight: 800; font-size: clamp(14px, 4.5vw, 22px); border-radius: 8px; background: var(--card); text-transform: uppercase; }
.ws span.sel { background: var(--blue); color: #fff; }
.ws span.found { background: var(--ok); color: #082A1E; }
.ws-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ws-words span { background: var(--card); border-radius: 99px; padding: 4px 10px; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.ws-words span.found { text-decoration: line-through; opacity: .5; }
/* block puzzle */
.bp { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: min(100%, 400px); aspect-ratio: 1; background: var(--line); padding: 4px; border-radius: 12px; touch-action: none; }
.bp i { border-radius: 4px; background: var(--bg2); }
.bp i.pv { background: rgba(255,255,255,.28); }
.bp i.pvbad { background: rgba(255,84,112,.35); }
.bp i.clr { animation: pop .3s reverse; }
.bp-tray { display: flex; justify-content: space-around; align-items: center; width: min(100%, 400px); min-height: 110px; touch-action: none; }
.bp-piece { display: grid; gap: 2px; padding: 6px; touch-action: none; cursor: grab; }
.bp-piece i { width: 18px; height: 18px; border-radius: 3px; }
.bp-piece.used { visibility: hidden; }
.bp-drag { position: fixed; z-index: 70; pointer-events: none; display: grid; gap: 3px; opacity: .9; }
/* solitaire */
.sol { width: min(100%, 560px); user-select: none; -webkit-user-select: none; }
.sol-top, .sol-tab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sol-tab { margin-top: 12px; align-items: start; }
.sol-col { position: relative; min-height: 120px; }
.card { aspect-ratio: 5 / 7; border-radius: 7px; background: #fff; color: #1A1440; position: relative; font-weight: 800; font-size: clamp(11px, 3.4vw, 17px); box-shadow: 0 1px 3px rgba(0,0,0,.4); display: block; width: 100%; padding: 2px 4px; text-align: left; line-height: 1.05; }
.card.red { color: #D3203F; }
.card .big { position: absolute; right: 4px; bottom: 2px; font-size: clamp(16px, 6vw, 30px); }
.card.back { background: repeating-linear-gradient(45deg, #7C4DFF 0 6px, #6A3BEE 6px 12px); border: 2px solid #fff; }
.card.slot { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); color: rgba(255,255,255,.35); display: grid; place-items: center; font-size: 22px; }
.card.hl { outline: 3px solid var(--brand2); }
.sol-col .card { position: absolute; left: 0; }
/* carrom */
.crm-wrap { width: min(100%, 460px); }
img.flg { width: 1.3em; height: auto; vertical-align: -0.15em; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.wb-flag img.flg { width: 40px; }
.wb-flag.big img.flg { width: 72px; }
.wt-flag img.flg { width: 30px; }

/* ===================== Pocketplay 2.0 look: polished 3D ===================== */
html { background: #100D24; }
body { background:
  radial-gradient(900px 520px at 85% -10%, rgba(139,92,255,.28), transparent 60%),
  radial-gradient(700px 480px at -10% 30%, rgba(255,92,138,.16), transparent 60%),
  radial-gradient(800px 600px at 50% 120%, rgba(77,163,255,.14), transparent 60%), #14112B; background-attachment: fixed; min-height: 100vh; }
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.top h1 { font-weight: 900; letter-spacing: -.3px; }
.logo { box-shadow: 0 4px 12px rgba(255,92,138,.35); }
.icon-btn { background: linear-gradient(180deg, #342D6B, #241F4D); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #120F28, 0 6px 14px rgba(0,0,0,.3); transition: transform .08s; }
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #120F28; }

/* glossy 3D buttons */
.btn { background: linear-gradient(180deg, #FF7AA2 0%, #FF5C8A 55%, #F04477 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.12), 0 4px 0 #B32656, 0 8px 18px rgba(255,92,138,.3); text-shadow: 0 1px 0 rgba(0,0,0,.18); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #B32656, 0 3px 8px rgba(255,92,138,.25); }
.btn.ghost { background: linear-gradient(180deg, #3D3580, #2C2663); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 0 #17143A, 0 8px 16px rgba(0,0,0,.25); }
.btn.ghost:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #17143A; }
.btn.ok { background: linear-gradient(180deg, #5BF0BA, #2BD99B 60%, #1FBF86); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 #148A60, 0 8px 18px rgba(43,217,155,.3); text-shadow: none; }
.btn:disabled { filter: grayscale(.5) brightness(.8); }
.chip { background: linear-gradient(180deg, #312A68, #262150); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 #15122F; transition: transform .08s; }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #6DB6FF, #3D8EF0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 #1E5DAE, 0 0 14px rgba(77,163,255,.4); }

/* home */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #FF5C8A, #8B5CFF 70%, #5B3CFF); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px rgba(139,92,255,.35); }
.hero::after, .wars-banner::after, .tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 60%); transform: translateX(-120%); animation: sheen 5s ease-in-out infinite; pointer-events: none; }
.tile::after { animation-duration: 7s; opacity: .7; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.wars-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, #17805C, #26C98E 60%, #3BE0A6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 26px rgba(43,217,155,.25); }
.tile { background: linear-gradient(160deg, #2F2864, #221D4A); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.05); transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 30px rgba(0,0,0,.45); }
.tile .ic, .daily-chip .ic { position: relative; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.35); }
.tile .ic::before, .daily-chip .ic::before { content: ''; position: absolute; left: 8%; right: 8%; top: 5%; height: 42%; border-radius: 10px 10px 40% 40%; background: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,0)); pointer-events: none; }
.daily-chip { background: linear-gradient(160deg, #2F2864, #221D4A); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.sec { color: #BDB6F0; }
.stat { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 14px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.stat b { font-variant-numeric: tabular-nums; }
.modal { background: linear-gradient(180deg, #2A2460, #1B173F); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,255,.2), 0 0 60px rgba(139,92,255,.25); }
.modal .big { background: linear-gradient(180deg, #FFE08A, #FFB547); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.modal > div:first-child { animation: bounceIn .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes bounceIn { from { transform: scale(.2) rotate(-20deg); } to { transform: none; } }
canvas.game { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.45); }

/* 3D dice */
.d3 { --ds: 64px; width: var(--ds); height: var(--ds); perspective: 420px; position: relative; cursor: pointer; flex: none; }
.d3-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.75,.3,1.08); }
.d3-face { position: absolute; inset: 0; border-radius: 18%; background: radial-gradient(circle at 30% 25%, #fff, var(--dc) 55%, color-mix(in srgb, var(--dc) 75%, #000)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -4px 8px rgba(0,0,0,.12); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%; backface-visibility: hidden; }
.d3-face i { margin: 12%; border-radius: 50%; }
.d3-face i.on { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--dp) 60%, #fff), var(--dp) 60%); box-shadow: inset 0 2px 2px rgba(0,0,0,.45); }
.d3-front { transform: translateZ(calc(var(--ds) / 2)); } .d3-back { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.d3-right { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); } .d3-left { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.d3-top { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); } .d3-bottom { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.d3-shadow { position: absolute; left: 10%; right: 10%; bottom: -14%; height: 16%; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.45), transparent 70%); z-index: -1; }
.d3.hop { animation: hop .7s cubic-bezier(.3,.6,.4,1); }
@keyframes hop { 0% { transform: none; } 30% { transform: translateY(-34%) scale(1.06); } 60% { transform: translateY(0) scale(.97); } 75% { transform: translateY(-8%); } 100% { transform: none; } }
.dice-bar { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 84px; }

/* 2048 & World 2048 */
.g2048 { background: linear-gradient(180deg, #3F377D, #2E2866); border-radius: 20px; box-shadow: inset 0 2px 0 rgba(255,255,255,.1), inset 0 -4px 0 rgba(0,0,0,.25), 0 18px 36px rgba(0,0,0,.45); }
.g2048 .cells i { background: rgba(10,8,30,.35); box-shadow: inset 0 3px 6px rgba(0,0,0,.35); border-radius: 12px; }
.g2048 .t { border-radius: 12px; position: relative; text-shadow: 0 2px 0 rgba(0,0,0,.18); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -5px 0 rgba(0,0,0,.18), 0 5px 10px rgba(0,0,0,.35); background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%) !important; }
.g2048 .t.hot { box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.18), 0 0 22px 4px rgba(255,200,80,.55); }
.g2048 .t.pop { animation: tileIn .2s cubic-bezier(.3,1.5,.5,1); }
.g2048 .t.merge { animation: merge .22s cubic-bezier(.3,1.6,.5,1); z-index: 2; }
@keyframes tileIn { from { transform: scale(0); } to { transform: none; } }
@keyframes merge { 50% { transform: scale(1.2); } }

/* word */
.wcell { border-radius: 10px; border-color: #463E86; background: rgba(255,255,255,.02); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); transition: transform .1s; }
.wcell.filled { border-color: #A79EEA; box-shadow: 0 4px 0 #1B173F; }
.wcell.typed { animation: tileIn .14s cubic-bezier(.3,1.6,.5,1); }
.wcell.g, .wcell.y, .wcell.x { box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 rgba(0,0,0,.3); text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.wcell.g, .key.g { background: linear-gradient(180deg, #3FD48B, #23A866); border-color: #23A866; }
.wcell.y, .key.y { background: linear-gradient(180deg, #F5C058, #DB9A2A); border-color: #DB9A2A; }
.wcell.x, .key.x { background: linear-gradient(180deg, #4A456B, #35304F); border-color: #35304F; }
.wcell.flip { animation: flip .45s ease-in-out; }
.wrow.win .wcell { animation: jump .5s cubic-bezier(.3,1.6,.5,1) backwards; }
.wrow.win .wcell:nth-child(2) { animation-delay: .08s; } .wrow.win .wcell:nth-child(3) { animation-delay: .16s; } .wrow.win .wcell:nth-child(4) { animation-delay: .24s; } .wrow.win .wcell:nth-child(5) { animation-delay: .32s; }
@keyframes jump { 40% { transform: translateY(-18px); } }
.key { background: linear-gradient(180deg, #6A62A8, #554D92); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #2E2865; transition: transform .06s; }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #2E2865; }
.key.g, .key.y, .key.x { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35); }

/* sudoku */
.sud { border: 3px solid #9D94E8; border-radius: 14px; background: #4A4290; box-shadow: 0 18px 36px rgba(0,0,0,.45), 0 0 0 4px rgba(157,148,232,.15); }
.sud button { background: linear-gradient(180deg, #221D48, #1D1940); transition: background .12s; }
.sud button.given { color: #F4F2FF; }
.sud button.user { color: #6DB6FF; text-shadow: 0 0 10px rgba(77,163,255,.5); }
.sud button.peer { background: #28225A; }
.sud button.same { background: #3E3585; }
.sud button.sel { background: linear-gradient(180deg, #6A5CD0, #5547B5); box-shadow: inset 0 0 0 2px #B8AEFF; }
.sud button.ok { animation: merge .3s; }
.pad button { background: linear-gradient(180deg, #3D3580, #2C2663); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 0 #17143A; transition: transform .06s; }
.pad button:active { transform: translateY(2px); box-shadow: 0 1px 0 #17143A; }

/* chess: polished wood */
.chess { border: 0; border-radius: 12px; padding: 0; box-shadow: 0 0 0 10px #5A3418, 0 0 0 12px #3B200C, 0 22px 40px rgba(0,0,0,.55); margin: 12px; width: calc(100% - 24px); }
.chess .l { background: linear-gradient(135deg, #F3DDB3, #E9CC98); }
.chess .d { background: linear-gradient(135deg, #B9804E, #A26B3C); }
.chess .sel { box-shadow: inset 0 0 0 999px rgba(255,214,90,.55); }
.chess .last { box-shadow: inset 0 0 0 999px rgba(255,214,90,.32); }
.chess .chk { box-shadow: inset 0 0 0 999px rgba(255,60,60,.25); background-image: radial-gradient(circle, rgba(255,40,40,.85), rgba(255,40,40,0) 70%) !important; }
.chess .dot::after { width: 30%; height: 30%; background: rgba(40,25,10,.32); box-shadow: inset 0 2px 3px rgba(0,0,0,.25); }
.chess .cap::after { border: 5px solid rgba(40,25,10,.35); }
.pc { font-family: "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif; font-size: 1.12em; line-height: 1; display: inline-block; position: relative; z-index: 1; transition: transform .1s; }
.pc.w { color: #FFFBF0; -webkit-text-stroke: 1.4px #3A2A1A; filter: drop-shadow(0 3px 1px rgba(0,0,0,.45)); text-shadow: 0 -1px 0 #fff; }
.pc.b { color: #2A2220; -webkit-text-stroke: 1px #000; filter: drop-shadow(0 3px 1px rgba(0,0,0,.5)); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.chess .sel .pc { transform: translateY(-8%) scale(1.08); }
.chess-cap { font-family: "DejaVu Sans", "Segoe UI Symbol", serif; }

/* ludo */
.ludo-board { box-shadow: 0 0 0 8px #2E2866, 0 0 0 10px #1B173F, 0 22px 40px rgba(0,0,0,.5); margin: 10px; width: calc(100% - 20px) !important; }
.ludo-yard { box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.25); }
.ludo-yard > div { box-shadow: inset 0 4px 10px rgba(0,0,0,.18); display: grid; grid-template-columns: 1fr 1fr; padding: 14%; gap: 14%; }
.ludo-yard > div i { border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.05), rgba(0,0,0,.18)); box-shadow: inset 0 3px 5px rgba(0,0,0,.25); }
.ludo-cell { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.08); }
.ltok { position: absolute; border: 0 !important; border-radius: 50% 50% 46% 46% !important; transition: left .16s cubic-bezier(.3,1.4,.5,1), top .16s cubic-bezier(.3,1.4,.5,1) !important; }
.ltok::before { content: ''; position: absolute; inset: 18% 22% 34% 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.95), rgba(255,255,255,.25) 60%, transparent 70%); }
.ltok::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -10%; height: 26%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(1px); z-index: -1; }

/* snakes & ladders */
.snl { border: 0; border-radius: 14px; box-shadow: 0 0 0 8px #2E2866, 0 0 0 10px #1B173F, 0 22px 40px rgba(0,0,0,.5); margin: 10px; width: calc(100% - 20px); }
.snl-cell { color: rgba(20,17,43,.55); font-weight: 800; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.snl-t { border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 5px rgba(0,0,0,.55), inset 0 -3px 4px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.6); transition: left .16s cubic-bezier(.3,1.4,.5,1), top .16s cubic-bezier(.3,1.4,.5,1); }
.snl-t.big { transition: left .5s ease-in-out, top .5s ease-in-out; }

/* word search */
.ws { gap: 3px; padding: 6px; background: linear-gradient(180deg, #3F377D, #2E2866); border-radius: 16px; box-shadow: 0 18px 36px rgba(0,0,0,.45); }
.ws span { background: linear-gradient(180deg, #2C2662, #241F52); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: background .1s, transform .1s; }
.ws span.sel { background: linear-gradient(180deg, #6DB6FF, #3D8EF0); transform: scale(1.06); box-shadow: 0 0 12px rgba(77,163,255,.6); }
.ws span.found { color: #fff; background: var(--fc, #2BD99B); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.ws-words span { background: linear-gradient(180deg, #312A68, #262150); }
.ws-words span.found { text-decoration: line-through; opacity: .45; }

/* block puzzle: gem blocks */
.bp { gap: 3px; padding: 6px; background: linear-gradient(180deg, #3F377D, #2E2866); border-radius: 16px; box-shadow: 0 18px 36px rgba(0,0,0,.45); }
.bp i { background: rgba(10,8,30,.4); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); border-radius: 6px; }
.bp i.gem, .bp-piece i.gem, .bp-drag i.gem { border-radius: 6px; background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%, rgba(0,0,0,.12)) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.35); }
.bp i.pv { background: rgba(255,255,255,.32); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.bp i.pvbad { background: rgba(255,84,112,.4); }
.bp i.flash { animation: clearFlash .35s ease-out; }
@keyframes clearFlash { 0% { background: #fff; transform: scale(1.1); } 100% { transform: scale(1); } }
.bp-drag { filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }

/* solitaire: felt table + real cards */
.sol { background: radial-gradient(ellipse at 50% 30%, #1E8A5E, #11603F 70%, #0B4A30); border-radius: 18px; padding: 10px 8px 14px; box-shadow: inset 0 0 40px rgba(0,0,0,.35), 0 0 0 6px #5A3418, 0 0 0 8px #3B200C, 0 20px 40px rgba(0,0,0,.5); }
.card { background: linear-gradient(160deg, #FFFFFF, #F3F0E8); border-radius: 8px; box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.35); font-family: Georgia, "Times New Roman", serif; transition: transform .1s; }
.card.red { color: #D3203F; }
.card .big { font-size: clamp(18px, 6.5vw, 32px); opacity: .95; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); }
.card.back { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #5B3CFF 0 5px, #7C5CFF 5px 10px), #6A4BFF; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.card.slot { background: rgba(0,0,0,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); color: rgba(255,255,255,.4); }
.card.hl { outline: 3px solid #FFD65A; box-shadow: 0 0 16px rgba(255,214,90,.7); }
.card.landed { animation: cardIn .25s cubic-bezier(.3,1.5,.5,1); }
@keyframes cardIn { from { transform: scale(1.15) translateY(-6px); } to { transform: none; } }

/* carrom wrap */
.crm-wrap canvas.game { border-radius: 14px; }

/* accounts & rankings */
.acct-btn { background: linear-gradient(180deg, #342D6B, #241F4D); border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 700; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #120F28; }
.seg { display: flex; background: rgba(0,0,0,.25); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; padding: 9px 10px; border-radius: 999px; font-weight: 800; color: var(--soft); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, #FF7AA2, #F04477); color: #fff; box-shadow: 0 3px 10px rgba(255,92,138,.35); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.champ { background: linear-gradient(160deg, #4A3A12, #2A2150); border: 1px solid rgba(255,214,90,.35); border-radius: 16px; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; box-shadow: 0 0 20px rgba(255,181,71,.12); }
.champ small { color: #FFD65A; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.champ div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ .cpts { color: var(--soft); font-size: 12px; }
.join-card { background: linear-gradient(160deg, #1F6E52, #2A2160); border-radius: 18px; padding: 14px; margin-bottom: 8px; }
.join-card p { color: #DDF7EC; font-size: 14px; margin: 6px 0 10px; }
.acct { display: flex; flex-direction: column; gap: 12px; }
.acct-form { display: flex; flex-direction: column; gap: 10px; }
.field { width: 100%; padding: 13px 14px; border-radius: 14px; border: 2px solid #3A3370; background: #14112B; color: #fff; font-size: 17px; outline: none; }
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(77,163,255,.2); }
.acct-err { color: var(--bad); font-weight: 700; min-height: 20px; margin: 0; }
.rcode { font: 900 26px ui-monospace, monospace; letter-spacing: 2px; background: #14112B; border: 2px dashed #FFB547; border-radius: 14px; padding: 12px; color: #FFE08A; user-select: all; }
.danger summary { color: var(--soft); cursor: pointer; margin-top: 14px; }
.live .pts.solo { background: rgba(77,163,255,.15); color: #8EC5FF; }