/* SJO UI v10 — shared modern theme (loaded after each page's own styles) */
:root{--a:#6366f1;--b:#8b5cf6;--c:#06b6d4;--ink:#0f172a;--bg1:#eef2ff;--bg2:#f5f3ff;--bg3:#ecfeff;
--card:rgba(255,255,255,.82);--cardb:rgba(255,255,255,.9);--line:#e3e7f3;--soft:#f1f4fb;--txt:#0f172a;--mut:#64708a;
--glow:0 10px 26px rgba(99,102,241,.38);--sh:0 1px 2px rgba(15,23,42,.04),0 14px 40px rgba(67,56,202,.10)}
html[data-sjo-theme=dark]{--ink:#e8ecff;--bg1:#0a0f1f;--bg2:#0e1330;--bg3:#07121c;--card:rgba(20,27,50,.82);--cardb:rgba(120,135,200,.18);
--line:#27304f;--soft:#182040;--txt:#e8ecff;--mut:#97a3c4;--sh:0 1px 2px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.35)}
html{-webkit-tap-highlight-color:transparent}
body:not(.tp){background:radial-gradient(900px 500px at 8% -8%,var(--bg2),transparent 60%),radial-gradient(800px 480px at 100% 0,var(--bg3),transparent 55%),var(--bg1)!important;background-attachment:fixed;color:var(--txt)}
body{font-family:Inter,"SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.app{animation:sjoIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes sjoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* top nav */
#sjoNav{background:rgba(15,23,42,.72)!important;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-radius:0 0 18px 18px!important;border-bottom:1px solid rgba(255,255,255,.08);letter-spacing:.2px}
#sjoNav a{background:linear-gradient(135deg,var(--a),var(--b))!important;border:0!important;padding:7px 14px!important;border-radius:999px!important;box-shadow:0 4px 14px rgba(99,102,241,.45);transition:transform .15s}
#sjoNav a:active{transform:scale(.95)}

/* header */
.logo{background:linear-gradient(135deg,var(--a),var(--b))!important;color:#fff!important;border-radius:15px!important;box-shadow:var(--glow)}
.tp .logo{background:linear-gradient(135deg,#f6d365,#d8a62a)!important;box-shadow:0 8px 22px rgba(216,166,42,.4)}
h1{letter-spacing:-.4px;color:var(--txt)}.tp h1{color:#fff}.sub{color:var(--mut)!important}
.icon,.iconbtn{background:var(--card)!important;border:1px solid var(--cardb)!important;color:var(--txt);box-shadow:var(--sh)!important;border-radius:14px!important;transition:transform .2s,box-shadow .2s;cursor:pointer}
.icon:hover,.iconbtn:hover{transform:rotate(90deg)}.icon:active,.iconbtn:active{transform:scale(.92)}
.tp .icon{background:#102c27!important;border:1px solid #31534b!important}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#1e1b4b 0,#312e81 55%,#4f46e5 120%)!important;border-radius:26px!important;box-shadow:0 18px 40px rgba(49,46,129,.35)!important}
.hero::before{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.55),transparent 70%)}
.hero::after{content:"";position:absolute;width:180px;height:180px;left:-60px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%)}
.hero>*{position:relative;z-index:1}
.hero h2{letter-spacing:-.4px}.eyebrow{opacity:.7!important;color:#c7d2fe}
.hero .stat{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px!important}
.score .stat{background:var(--soft)!important;border-radius:16px!important}.hero .stat b,.stats .stat b{font-size:20px!important;font-variant-numeric:tabular-nums}
.hero .turn,.difficulty{background:rgba(255,255,255,.95)!important;color:#1e1b4b!important;border-radius:12px!important;font-weight:800}
.difficulty{color:#fff!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.25)!important}
.difficulty option{color:#111}

/* cards */
body:not(.tp) .card{background:var(--card)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--cardb)!important;border-radius:26px!important;box-shadow:var(--sh)!important;color:var(--txt)}
.message,.help,.rules{color:var(--mut)!important}
.message{font-weight:600}

/* buttons */
button{font-family:inherit;transition:transform .12s,box-shadow .2s,filter .2s;cursor:pointer}
button:active:not(:disabled){transform:scale(.96)}
.reset,.mode button.active,.actions .new,.controls .new,.check,.roll,.modal button{background:linear-gradient(135deg,var(--a),var(--b))!important;color:#fff!important;box-shadow:var(--glow);border:0!important}
.reset:hover,.actions .new:hover,.controls .new:hover,.check:hover,.modal button:hover{filter:brightness(1.08)}
.mode button,.tabs button,.modes button,.actions button,.controls button,.bottom button{border-radius:13px}
.tabs,.modes,.mode{background:var(--soft)!important;border-radius:16px!important}
.tabs button.active,.modes button.active{background:var(--cardb)!important;color:var(--txt)!important;box-shadow:0 3px 10px rgba(99,102,241,.18)!important}
.mode button:not(.active),.actions button:not(.new):not(.check),.controls button:not(.new){background:var(--soft);color:var(--txt)}
.tp .controls button{background:linear-gradient(180deg,#f2c94c,#d8a62a)!important;color:#10241f!important;box-shadow:0 6px 16px rgba(216,166,42,.35)}
.tp .controls button.secondary{background:#14352f!important;color:#fff!important;box-shadow:none}

/* modal */
.overlay{background:rgba(8,10,28,.62)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:center!important;justify-content:center!important;z-index:10000}
.modal{border-radius:28px!important;background:var(--cardb)!important;background:linear-gradient(180deg,#fff,#f5f3ff)!important;color:#111827!important;box-shadow:0 30px 80px rgba(0,0,0,.4)!important;animation:sjoPop .38s cubic-bezier(.2,1.3,.4,1) both}
html[data-sjo-theme=dark] .modal{background:linear-gradient(180deg,#1a2244,#131a36)!important;color:#e8ecff!important}
html[data-sjo-theme=dark] .modal p{color:#a8b3d3!important}
.tp .modal{background:linear-gradient(180deg,#fff,#fff8e1)!important}
.modal .emoji,.modal .trophy{font-size:56px;animation:sjoBounce 1s ease-in-out infinite alternate}
@keyframes sjoPop{from{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:none}}
@keyframes sjoBounce{to{transform:translateY(-7px) scale(1.06)}}

/* ---- Tic-Tac-Toe ---- */
#ttt{gap:10px!important}
.square{background:linear-gradient(145deg,var(--card),var(--soft))!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:0 6px 14px rgba(67,56,202,.08),inset 0 -3px 0 rgba(99,102,241,.08)!important;transition:transform .15s,background .2s;cursor:pointer}
.square:not(:disabled):hover{transform:translateY(-3px);background:linear-gradient(145deg,#eef0ff,#e0e7ff)!important}
.square.x{color:#4f46e5!important;text-shadow:0 4px 14px rgba(79,70,229,.4)}.square.o{color:#ec4899!important;text-shadow:0 4px 14px rgba(236,72,153,.4)}
.square.x,.square.o{animation:sjoMark .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes sjoMark{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.square.winline{background:linear-gradient(135deg,#bbf7d0,#6ee7b7)!important;box-shadow:0 0 0 3px #10b981,0 10px 24px rgba(16,185,129,.45)!important;animation:sjoPulse .7s ease-in-out infinite alternate}
@keyframes sjoPulse{to{transform:scale(1.06)}}

/* ---- Sudoku ---- */
#board{border-radius:18px;box-shadow:0 10px 30px rgba(67,56,202,.15)}
.cell.selected{background:#dbe4ff!important;box-shadow:inset 0 0 0 2px var(--a)}
.cell.same{background:#e0e7ff!important}.cell.related{background:#f3f5ff!important}.cell.given{background:#eef1f8!important;color:#1e1b4b}
.cell{transition:background .12s}
.keypad button{border-radius:14px!important;background:var(--card)!important;color:var(--txt)!important;border:1px solid var(--line)!important;box-shadow:0 3px 8px rgba(67,56,202,.07)}
.keypad button:hover{background:#eef0ff!important}.keypad .erase{background:#fff0f3!important;color:#e11d48!important}
.hint{background:linear-gradient(135deg,#e0e7ff,#ede9fe)!important;color:#4338ca!important}
.bottom button{background:var(--card)!important;color:var(--mut)!important;border:1px solid var(--line)!important}

/* ---- Art Block ---- */
.tile{border-radius:7px!important;transition:background .15s,transform .15s}
.tile.filled{background:linear-gradient(135deg,#818cf8,#6366f1 60%,#4f46e5)!important;box-shadow:0 2px 6px rgba(79,70,229,.45)}
#board[style],#board{background:var(--soft)}
.pieceSlot{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:16px!important;transition:transform .15s,box-shadow .2s}
.pieceSlot:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(99,102,241,.2)}
.p{border-radius:5px!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}

/* ---- Bubble Shooter ---- */
#wrap{border-radius:22px!important;box-shadow:inset 0 0 0 1px rgba(99,102,241,.2),0 10px 28px rgba(67,56,202,.15);background:linear-gradient(#c7d2fe,#e0e7ff 55%,#f5f3ff)!important}

/* ---- Ludo / Snake ---- */
.dice{background:linear-gradient(135deg,#1e1b4b,#4338ca)!important;color:#fff!important;border-radius:20px!important;box-shadow:0 10px 24px rgba(67,56,202,.4)!important}
.snake-dice,.bar .dice{background:#fff!important;color:#111827!important}
.token{border-width:3px!important;box-shadow:0 5px 12px rgba(15,23,42,.35),inset 0 -3px 0 rgba(0,0,0,.15)!important}

/* ---- Teen Patti ---- */
.tp .table{border-color:#d8a62a!important;box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 0 60px rgba(0,0,0,.35)!important}
.tp .card{border-radius:12px!important;box-shadow:0 8px 18px rgba(0,0,0,.45)!important;animation:sjoDeal .45s cubic-bezier(.2,.9,.3,1.2) both}
.tp .card:nth-child(2){animation-delay:.08s}.tp .card:nth-child(3){animation-delay:.16s}
@keyframes sjoDeal{from{opacity:0;transform:translateY(-30px) rotate(-8deg) scale(.8)}to{opacity:1;transform:none}}
.tp .pot{background:rgba(7,27,23,.7)!important;border-color:rgba(255,217,93,.35)!important}

/* dark-mode surfaces for light games */
html[data-sjo-theme=dark] .message{color:#9aa6c7!important}
html[data-sjo-theme=dark] .stat span,html[data-sjo-theme=dark] .sub{color:#9aa6c7}
html[data-sjo-theme=dark] .cell:not(.goal){background-color:#141c38}
html[data-sjo-theme=dark] body:not(.ludo-page) .cell.given{background:#1a2347!important;color:#c7d2fe}
html[data-sjo-theme=dark] .cell.selected{background:#2e3a78!important}
html[data-sjo-theme=dark] .cell.same{background:#26306a!important;color:#a5b4fc}
html[data-sjo-theme=dark] .cell.related{background:#182044!important}
html[data-sjo-theme=dark] .cell.error{background:#4a1d2b!important;color:#fb7185}
html[data-sjo-theme=dark] .keypad button:hover,html[data-sjo-theme=dark] .square:not(:disabled):hover{background:#222c5a!important}
html[data-sjo-theme=dark] .square.x{color:#818cf8!important}
html[data-sjo-theme=dark] .tile:not(.filled){background:#141c38}html[data-sjo-theme=dark] .target{background:#182044!important}
html[data-sjo-theme=dark] .hint{background:#1e2650!important;color:#a5b4fc!important}
html[data-sjo-theme=dark] .keypad .erase{background:#3a1a28!important}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
canvas.sjo-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10001}

/* keep boards inside their cards on narrow screens */
.card #board{width:min(100%,500px)!important}
.card #wrap{width:min(100%,500px)!important}
html[data-sjo-theme=dark] .turn{color:var(--mut)}