/* Smart Game Studio — game players */
.gp{--a:#22d3ee;--b:#7c3aed;--c:#ec4899;position:relative;border-radius:24px;overflow:hidden;background:var(--bgx,#0b1026);border:1px solid rgba(255,255,255,.14);min-height:560px;display:flex;flex-direction:column;color:#fff;isolation:isolate;box-shadow:0 40px 100px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.gp:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 85% 110%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),radial-gradient(50% 40% at 0% 0%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%)}
.gp .stars-bg{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff6,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff5,transparent),radial-gradient(1px 1px at 85% 60%,#fff7,transparent),radial-gradient(1px 1px at 10% 70%,#fff5,transparent);background-size:300px 300px;animation:gpdrift 60s linear infinite;opacity:.7}
@keyframes gpdrift{to{background-position:300px 600px}}
.gp-hud{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);backdrop-filter:blur(6px)}
.gp-hud .t{font-weight:800;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-hud .t small{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb,var(--a) 80%,#fff);font-weight:800}
.gp-stat{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:5px 10px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.gp-stat b{font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums}.gp-stat span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#c7d2fe;font-weight:700}
.gp-bar{height:4px;background:rgba(255,255,255,.08)}.gp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b),var(--c));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.gp-body{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;gap:18px}
.gp-q{font-size:clamp(19px,2.3vw,27px);font-weight:800;text-align:center;line-height:1.25;letter-spacing:-.3px;max-width:820px;animation:gpin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes gpin{from{opacity:0;transform:translateY(12px) scale(.98)}}
.gp-ch{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:820px}
.gp-ch button{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));font-weight:700;font-size:15.5px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s;animation:gpin .45s cubic-bezier(.2,.8,.2,1) both}
.gp-ch button:nth-child(2){animation-delay:.05s}.gp-ch button:nth-child(3){animation-delay:.1s}.gp-ch button:nth-child(4){animation-delay:.15s}
.gp-ch button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--a) 70%,#fff)}
.gp-ch button .k{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:800;background:linear-gradient(135deg,var(--a),var(--b))}
.gp-ch button.ok{background:linear-gradient(180deg,rgba(52,211,153,.35),rgba(52,211,153,.15));border-color:#34d399;animation:gpok .5s}
.gp-ch button.no{background:linear-gradient(180deg,rgba(251,113,133,.35),rgba(251,113,133,.12));border-color:#fb7185;animation:gpno .4s}
.gp-ch button[disabled]{cursor:default}
@keyframes gpok{40%{transform:scale(1.04)}}@keyframes gpno{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.gp-why{max-width:820px;width:100%;padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);font-size:14px;color:#dbe3ff;animation:gpin .4s}
.gp-why b{color:#a7f3d0}
.gp-next{margin-top:2px}
.gp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:14px;border:0;font-weight:800;font-size:15px;cursor:pointer;color:#fff;background:linear-gradient(100deg,var(--a),var(--b) 55%,var(--c));box-shadow:0 12px 30px -10px color-mix(in srgb,var(--b) 80%,transparent);transition:transform .2s}
.gp-btn:hover{transform:translateY(-2px)}.gp-btn.l{background:rgba(255,255,255,.1);box-shadow:none;border:1px solid rgba(255,255,255,.18)}
.gp-float{position:absolute;pointer-events:none;font-weight:900;font-size:22px;color:#a7f3d0;text-shadow:0 4px 20px rgba(0,0,0,.5);animation:gpfl 1s forwards;z-index:5}
@keyframes gpfl{to{transform:translateY(-60px);opacity:0}}
/* end screen */
.gp-end{text-align:center;animation:gpin .6s cubic-bezier(.2,.8,.2,1)}
.gp-end .trophy{font-size:72px;filter:drop-shadow(0 12px 30px rgba(251,191,36,.45));animation:gpbob 2.4s ease-in-out infinite}
@keyframes gpbob{50%{transform:translateY(-8px) rotate(-3deg)}}
.gp-end h3{font-size:30px;font-weight:900;letter-spacing:-.8px;margin:6px 0}
.gp-end .st{font-size:34px;letter-spacing:6px;margin:6px 0}
.gp-end .st i{font-style:normal;color:rgba(255,255,255,.18)}.gp-end .st i.on{color:#fbbf24;text-shadow:0 0 20px rgba(251,191,36,.6)}
.gp-end .sc{display:flex;gap:12px;justify-content:center;margin:14px 0 20px;flex-wrap:wrap}
.gp-end .sc div{padding:10px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.gp-end .sc b{display:block;font-size:24px}.gp-end .sc span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#c7d2fe}
.gp-end .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* timer ring */
.gp-ring{width:64px;height:64px;position:relative}.gp-ring svg{transform:rotate(-90deg)}.gp-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:900}
.gp-ring circle{fill:none;stroke-width:6}.gp-ring .bg{stroke:rgba(255,255,255,.12)}.gp-ring .fg{stroke:url(#gpRingG);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.gp-ring.low b{color:#fb7185;animation:gpno .5s infinite}
.gp-streak{font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg,#f97316,#ec4899);box-shadow:0 8px 24px -8px #ec4899}
/* board */
.gp-board{display:grid;gap:10px;width:100%;max-width:980px}
.gp-board .cat{font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:1px;text-align:center;padding:12px 6px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--b) 70%,transparent),color-mix(in srgb,var(--c) 45%,transparent));display:grid;place-items:center;min-height:56px;line-height:1.2}
.gp-board button{height:74px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));font-size:24px;font-weight:900;cursor:pointer;color:#fde68a;text-shadow:0 2px 12px rgba(251,191,36,.45);transition:.2s}
.gp-board button:hover{transform:translateY(-3px) scale(1.03);border-color:#fde68a;box-shadow:0 14px 30px -12px rgba(251,191,36,.5)}
.gp-board button.done{opacity:.18;pointer-events:none;transform:none}
.gp-teams{display:flex;gap:10px}
.gp-team{padding:8px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:800;font-size:13px;transition:.3s}
.gp-team b{font-size:18px;margin-left:6px}.gp-team.on{background:linear-gradient(100deg,color-mix(in srgb,var(--a) 40%,transparent),color-mix(in srgb,var(--b) 50%,transparent));border-color:var(--a);transform:translateY(-2px)}
.gp-ov{position:absolute;inset:0;z-index:6;background:rgba(5,8,22,.86);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px;animation:fade .25s}
.gp-ov .pts{font-size:13px;font-weight:900;letter-spacing:2px;color:#fde68a}
/* wheel */
.gp-wheelwrap{position:relative;width:min(420px,78vw);aspect-ratio:1}
.gp-wheel{width:100%;height:100%;border-radius:50%;transition:transform 4.2s cubic-bezier(.12,.75,.12,1);filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.gp-pin{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #fff;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));z-index:2}
.gp-hub{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c7d2fe 40%,#6d28d9);display:grid;place-items:center;font-weight:900;font-size:15px;color:#1e1b4b;box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 -6px 14px rgba(0,0,0,.25);cursor:pointer;border:4px solid rgba(255,255,255,.7)}
/* racer */
.gp-track{width:100%;max-width:900px;display:grid;gap:10px}
.gp-lane{position:relative;height:58px;border-radius:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 40px,rgba(255,255,255,.02) 40px 80px);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.gp-lane:after{content:"";position:absolute;right:10px;top:0;bottom:0;width:18px;background:repeating-conic-gradient(#fff 0 25%,#111 0 50%) 0 0/9px 9px;opacity:.8;border-radius:3px}
.gp-car{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;transition:left .9s cubic-bezier(.2,.8,.2,1);font-weight:800;font-size:12.5px;white-space:nowrap}
.gp-car img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.gp-car .em{font-size:30px;transform:scaleX(-1);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.gp-lane.me{border-color:var(--a);box-shadow:0 0 0 1px var(--a) inset,0 0 30px -10px var(--a)}
/* memory */
.gp-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:760px;perspective:1000px}
.gp-card{position:relative;aspect-ratio:4/3;cursor:pointer;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.gp-card.up,.gp-card.done{transform:rotateY(180deg)}
.gp-card>div{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;padding:10px;text-align:center;font-weight:700;font-size:13.5px;line-height:1.25}
.gp-card .f{background:linear-gradient(135deg,color-mix(in srgb,var(--b) 85%,#000),color-mix(in srgb,var(--c) 70%,#000));border:1px solid rgba(255,255,255,.2);font-size:28px;box-shadow:inset 0 0 0 6px rgba(255,255,255,.04)}
.gp-card .f:after{content:"";position:absolute;inset:8px;border-radius:10px;border:1px dashed rgba(255,255,255,.25)}
.gp-card .bk{transform:rotateY(180deg);background:rgba(255,255,255,.95);color:#1e1b4b}
.gp-card .bk.term{background:linear-gradient(135deg,#ecfeff,#e0e7ff);font-size:16px;font-weight:900}
.gp-card.done .bk{background:linear-gradient(135deg,#a7f3d0,#6ee7b7);color:#064e3b;box-shadow:0 0 30px -6px #34d399}
/* connect */
.gp-con{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;width:100%;max-width:860px}
.gp-con .col{display:grid;gap:10px;align-content:start}
.gp-con button{padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);font-weight:700;text-align:left;cursor:pointer;transition:.25s;font-size:14.5px;line-height:1.3}
.gp-con button.term{font-weight:900;font-size:16px}
.gp-con button.sel{border-color:var(--a);background:color-mix(in srgb,var(--a) 22%,transparent);transform:scale(1.02)}
.gp-con button.ok{border-color:#34d399;background:rgba(52,211,153,.2);opacity:0;transform:scale(.9);transition:.5s .25s}
.gp-con button.no{animation:gpno .4s;border-color:#fb7185}
/* sort */
.gp-sort{width:100%;max-width:980px;display:flex;flex-direction:column;gap:16px}
.gp-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:56px;padding:12px;border-radius:16px;border:1px dashed rgba(255,255,255,.2)}
.gp-chip{padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,#fff,#e0e7ff);color:#1e1b4b;font-weight:800;font-size:14px;cursor:grab;user-select:none;touch-action:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.6);transition:transform .15s}
.gp-chip.sel{outline:3px solid var(--a);transform:scale(1.05)}
.gp-chip.drag{position:fixed;z-index:100;pointer-events:none;transform:rotate(-3deg) scale(1.06);box-shadow:0 20px 40px -10px rgba(0,0,0,.7)}
.gp-chip.ok{background:linear-gradient(180deg,#d1fae5,#a7f3d0);color:#064e3b}.gp-chip.no{background:linear-gradient(180deg,#ffe4e6,#fecdd3);color:#881337}
.gp-buckets{display:grid;gap:12px}
.gp-bucket{min-height:150px;border-radius:18px;padding:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:8px;transition:.2s}
.gp-bucket h4{font-size:13px;letter-spacing:1px;text-transform:uppercase;font-weight:900;color:color-mix(in srgb,var(--a) 70%,#fff);text-align:center;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.gp-bucket .in{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.gp-bucket.hov{border-color:var(--a);background:color-mix(in srgb,var(--a) 14%,transparent);transform:scale(1.02)}
/* scramble / rocket */
.gp-slots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.gp-slot{width:46px;height:54px;border-radius:12px;border:2px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:24px;font-weight:900;background:rgba(0,0,0,.2);transition:.2s}
.gp-slot.f{border-color:var(--a);background:color-mix(in srgb,var(--a) 15%,transparent);animation:gpok .3s}
.gp-tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:640px}
.gp-tile{width:50px;height:54px;border-radius:13px;border:0;font-size:23px;font-weight:900;cursor:pointer;color:#1e1b4b;background:linear-gradient(180deg,#fff,#c7d2fe);box-shadow:0 6px 0 #6d28d9,0 12px 24px -8px rgba(0,0,0,.6);transition:transform .12s}
.gp-tile:active{transform:translateY(4px);box-shadow:0 2px 0 #6d28d9}
.gp-tile.used{opacity:.2;pointer-events:none}
.gp-clue{max-width:640px;text-align:center;font-size:17px;color:#dbe3ff;padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.gp-clue b{color:#fff}
.gp-kb{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:620px}
.gp-kb button{width:42px;height:46px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);font-weight:900;font-size:17px;cursor:pointer;transition:.15s}
.gp-kb button:hover{background:rgba(255,255,255,.2)}
.gp-kb button.hit{background:rgba(52,211,153,.35);border-color:#34d399}.gp-kb button.miss{background:rgba(251,113,133,.2);border-color:#fb7185;opacity:.5}
.gp-rocket{position:relative;width:140px;height:170px}
.gp-rocket .r{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:84px;transition:transform 1.6s cubic-bezier(.5,0,.75,0);filter:drop-shadow(0 10px 30px rgba(34,211,238,.4))}
.gp-rocket.go .r{transform:translate(-50%,-700px) rotate(-8deg)}
.gp-rocket .r:before{content:"";position:absolute;left:28%;bottom:-6px;width:18px;height:30px;border-radius:50%;background:radial-gradient(#fde68a,#f97316 60%,transparent 70%);filter:blur(2px);animation:gpflame .15s infinite alternate;transform:rotate(45deg)}
@keyframes gpflame{to{transform:rotate(45deg) scale(1.3,1.5)}}
.gp-fuel{display:flex;gap:4px;justify-content:center}
.gp-fuel i{width:20px;height:10px;border-radius:4px;background:linear-gradient(90deg,#34d399,#22d3ee);transition:.3s}.gp-fuel i.off{background:rgba(255,255,255,.12)}
/* crossword */
.gp-cw{display:grid;grid-template-columns:auto minmax(220px,340px);gap:22px;width:100%;max-width:1040px;align-items:start}
.gp-grid{display:grid;gap:3px;justify-content:center}
.gp-grid .c{width:var(--cs,34px);height:var(--cs,34px);position:relative}
.gp-grid .c input{width:100%;height:100%;border:0;border-radius:7px;text-align:center;font-weight:900;font-size:calc(var(--cs,34px)*.5);text-transform:uppercase;background:#f8fafc;color:#1e1b4b;outline:none;caret-color:transparent;transition:.15s}
.gp-grid .c input:focus{background:#cffafe;box-shadow:0 0 0 3px var(--a)}
.gp-grid .c input.ok{background:#bbf7d0}.gp-grid .c input.no{background:#fecdd3}
.gp-grid .c i{position:absolute;left:3px;top:1px;font-size:9px;font-style:normal;font-weight:900;color:#6d28d9;z-index:1;pointer-events:none}
.gp-clues{font-size:13.5px;max-height:440px;overflow:auto;padding-right:6px}
.gp-clues h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb,var(--a) 70%,#fff);margin:10px 0 6px}
.gp-clues p{padding:6px 8px;border-radius:8px;color:#dbe3ff;cursor:pointer}.gp-clues p:hover,.gp-clues p.on{background:rgba(255,255,255,.08)}
.gp-clues p.solved{text-decoration:line-through;opacity:.5}
/* swipe */
.gp-swipe{position:relative;width:min(380px,86vw);height:300px}
.gp-sc{position:absolute;inset:0;border-radius:24px;padding:26px;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;background:linear-gradient(160deg,#ffffff,#e0e7ff);color:#1e1b4b;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);touch-action:none;cursor:grab;user-select:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.gp-sc .tm{font-size:24px;font-weight:900;letter-spacing:-.4px}
.gp-sc .df{font-size:16px;font-weight:600;color:#3730a3}
.gp-sc .lab{position:absolute;top:20px;padding:6px 12px;border-radius:10px;font-weight:900;font-size:15px;opacity:0;border:3px solid}
.gp-sc .lab.t{left:18px;color:#059669;border-color:#059669;transform:rotate(-12deg)}.gp-sc .lab.f{right:18px;color:#e11d48;border-color:#e11d48;transform:rotate(12deg)}
.gp-sc.back{transform:scale(.94) translateY(16px);opacity:.6;pointer-events:none}
.gp-sw-btns{display:flex;gap:18px}
.gp-sw-btns button{width:66px;height:66px;border-radius:50%;border:0;font-size:28px;cursor:pointer;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);transition:transform .15s}
.gp-sw-btns button:hover{transform:scale(1.08)}
.gp-sw-btns .f{background:linear-gradient(135deg,#fb7185,#e11d48)}.gp-sw-btns .t{background:linear-gradient(135deg,#34d399,#059669)}
/* flash */
.gp-flash{width:min(520px,88vw);aspect-ratio:3/2;perspective:1200px;cursor:pointer}
.gp-flash .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gp-flash.flip .in{transform:rotateY(180deg)}
.gp-flash .fc{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:8px}
.gp-flash .fr{background:linear-gradient(135deg,color-mix(in srgb,var(--b) 80%,#000),color-mix(in srgb,var(--c) 60%,#000));border:1px solid rgba(255,255,255,.2);font-size:30px;font-weight:900}
.gp-flash .bk{background:#fff;color:#1e1b4b;transform:rotateY(180deg);font-size:19px;font-weight:700}
.gp-flash small{font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.7;font-weight:800}
@media (max-width:760px){
 .gp{min-height:520px;border-radius:18px}
 .gp-hud{padding:10px 12px;gap:8px}.gp-stat{min-width:48px;padding:4px 7px}.gp-stat b{font-size:15px}
 .gp-body{padding:16px 12px}
 .gp-ch{grid-template-columns:1fr}
 .gp-ch button{padding:13px 14px;font-size:14.5px}
 .gp-board{gap:6px}.gp-board .cat{font-size:9.5px;padding:8px 3px;min-height:48px;letter-spacing:.3px}.gp-board button{height:54px;font-size:17px;border-radius:10px}
 .gp-mem{grid-template-columns:repeat(3,1fr);gap:8px}.gp-card>div{font-size:11.5px;padding:6px}.gp-card .bk.term{font-size:13px}
 .gp-con{grid-template-columns:1fr 1.3fr;gap:8px}.gp-con button{padding:10px;font-size:12.5px}.gp-con button.term{font-size:13.5px}
 .gp-cw{grid-template-columns:1fr}.gp-clues{max-height:none}
 .gp-slot{width:34px;height:42px;font-size:19px}.gp-tile{width:42px;height:46px;font-size:19px}
 .gp-kb button{width:31px;height:40px;font-size:15px}
 .gp-teams{display:none}
}