/* ===== v3: Poki-grade game look (canvas games, covers) ===== */
/* gallery covers */
.tpl{padding:0;gap:0;overflow:hidden;min-height:0;border-width:2px}
.tpl .cov{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-bottom:2px solid rgba(27,20,64,.5)}
.tpl .cov svg{display:block;width:100%;height:100%;transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.tpl:hover .cov svg,.tpl[aria-pressed="true"] .cov svg{transform:scale(1.08) rotate(-1deg)}
.cov-play{position:absolute;left:6px;top:6px;font-size:10px;font-weight:800;color:#052e16;background:#4ade80;border:2px solid #1b1440;border-radius:999px;padding:1px 7px;box-shadow:0 2px 0 #1b1440}
.tpl .tx{padding:7px 9px 9px}
.tpl:hover{transform:translateY(-3px) scale(1.02)}
.tpls{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pv-cover{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/8.5}
.pv-cover svg{position:absolute;inset:0;width:100%;height:100%}
.pv-cover .scene-q{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(12,10,40,.86);color:#fff;border-radius:12px;padding:8px 10px;font-size:13px;border:2px solid rgba(255,255,255,.8)}
/* game frame */
.game-bg.v3{background:rgba(4,6,20,.88);backdrop-filter:none}
.game-modal.g3{position:relative;width:calc(100vw - 20px);height:calc(100vh - 20px);max-width:none;max-height:none;padding:0;border-radius:24px;overflow:hidden;display:block;background:#0b0f2a;border:3px solid transparent;
 background:linear-gradient(#0b0f2a,#0b0f2a) padding-box,linear-gradient(120deg,#22d3ee,#7c3aed,#ec4899) border-box;box-shadow:0 0 40px -6px rgba(124,58,237,.7);animation:modalIn .35s cubic-bezier(.2,1.2,.4,1)}
#g3c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.g3 *{font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.g3-hud{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:5;pointer-events:none}
.g3-hud>*{pointer-events:auto}
.g3-ib{width:46px;height:46px;border-radius:50%;border:3px solid #1b1440;background:#fff;color:#1b1440;display:grid;place-items:center;font-size:20px;box-shadow:0 4px 0 #1b1440;transition:transform .1s}
.g3-ib:hover{transform:translateY(-2px)}.g3-ib:active{transform:translateY(3px);box-shadow:0 1px 0 #1b1440}
.g3-ib svg.ic{width:22px;height:22px;stroke-width:3}
.g3-title{display:flex;align-items:center;gap:8px;background:#fff;color:#1b1440;font-weight:800;font-size:16px;border:3px solid #1b1440;border-radius:999px;padding:3px 14px 3px 4px;box-shadow:0 4px 0 #1b1440}
.g3-title .ti{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.g3-title .ti svg{width:26px;height:26px}
.g3-dots{display:flex;gap:6px;margin:0 auto;background:rgba(12,10,40,.6);padding:7px 10px;border-radius:999px;border:2px solid rgba(255,255,255,.4)}
.g3-dots i{width:26px;height:10px;border-radius:999px;background:rgba(255,255,255,.3)}
.g3-dots i.on{background:#fde047;box-shadow:0 0 10px #fde047}.g3-dots i.ok{background:#4ade80}.g3-dots i.ko{background:#fb7185}
.g3-score{display:flex;flex-direction:column;align-items:center;line-height:1;background:#fff;color:#1b1440;border:3px solid #1b1440;border-radius:16px;padding:5px 16px;box-shadow:0 4px 0 #1b1440;min-width:96px}
.g3-score small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#5b21b6}
.g3-score b{font-size:28px;font-weight:800}
.g3-score b.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.45);color:#db2777}}
.g3-streak{display:none;font-weight:800;color:#fff;background:linear-gradient(120deg,#f97316,#db2777);border:3px solid #1b1440;border-radius:999px;padding:6px 12px;box-shadow:0 4px 0 #1b1440;font-size:16px}
.g3-streak.on{display:block;animation:bump .5s}
.g3-q{position:absolute;top:72px;left:50%;transform:translateX(-50%);width:min(780px,calc(100% - 40px));z-index:4;background:rgba(12,10,40,.9);color:#fff;border:3px solid rgba(255,255,255,.92);border-radius:22px;padding:12px 18px 14px;box-shadow:0 6px 0 rgba(27,20,64,.8),0 0 30px rgba(124,58,237,.35);animation:qIn .4s cubic-bezier(.2,1.3,.4,1)}
@keyframes qIn{from{transform:translateX(-50%) translateY(-16px) scale(.96);opacity:0}}
.g3-qtop{display:flex;gap:6px;margin-bottom:5px}
.g3-chip{font-size:11.5px;font-weight:800;background:#fde047;color:#1b1440;border-radius:999px;padding:2px 10px}
.g3-chip.dim{background:rgba(255,255,255,.16);color:#fff}
.g3-qt{font-size:22px;font-weight:800;line-height:1.3}
.g3-fb{display:flex;flex-direction:column;gap:4px}
.g3-fbh{font-size:20px;font-weight:800;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.g3-fbh span{font-size:14px;font-weight:600;color:#e2e8f0}.g3-fbh b{color:#fde047}
.g3-fb.ok .g3-fbh{color:#86efac}.g3-fb.ko .g3-fbh{color:#c4b5fd}
.g3-exp{font-size:15px;line-height:1.4;color:#f1f5f9}
.g3-next{position:absolute;right:-8px;bottom:-24px;font-weight:800;font-size:18px;color:#1b1440;background:linear-gradient(#fde047,#f59e0b);border:3px solid #1b1440;border-radius:999px;padding:9px 22px;box-shadow:0 5px 0 #1b1440;animation:pulseB 1.2s ease-in-out infinite}
.g3-next:active{transform:translateY(3px)}
@keyframes pulseB{50%{transform:scale(1.06)}}
.g3-pads{position:absolute;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:minmax(0,340px) 1fr minmax(0,340px);gap:10px;z-index:4;pointer-events:none}
.g3-pad{pointer-events:auto;position:relative;display:flex;align-items:center;gap:12px;min-height:66px;padding:9px 14px 9px 10px;border-radius:20px;border:3px solid #fff;background:var(--c);color:#fff;font-size:18px;font-weight:800;text-align:left;box-shadow:0 6px 0 #1b1440,0 0 0 3px #1b1440;transition:transform .1s,box-shadow .1s,opacity .2s}
.g3-pad.p0{grid-column:1;grid-row:1}.g3-pad.p1{grid-column:3;grid-row:1}.g3-pad.p2{grid-column:1;grid-row:2}.g3-pad.p3{grid-column:3;grid-row:2}
.g3-pad:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.1)}
.g3-pad:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #1b1440,0 0 0 3px #1b1440}
.g3-pad:disabled{cursor:default}
.g3-pad.dim{opacity:.5}
.g3-pad.right{box-shadow:0 6px 0 #1b1440,0 0 0 3px #1b1440,0 0 0 8px #4ade80,0 0 30px #4ade80;animation:bump .5s}
.g3-pad.wrong{animation:wob .45s;box-shadow:0 6px 0 #1b1440,0 0 0 3px #1b1440,0 0 0 7px #c4b5fd}
@keyframes wob{25%{transform:translateX(-7px) rotate(-1deg)}75%{transform:translateX(7px) rotate(1deg)}}
.g3-sh{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.6)}
.g3-sh i{position:absolute;right:-7px;bottom:-7px;font-style:normal;font-size:12px;font-weight:800;background:#fff;color:#1b1440;border:2px solid #1b1440;border-radius:8px;padding:0 5px;line-height:16px}
.g3-at{flex:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.g3-pad kbd{font:800 11px/1 "Plus Jakarta Sans",sans-serif;background:rgba(0,0,0,.25);border-radius:6px;padding:3px 6px;opacity:.85}
/* start screen */
.g3-start,.g3-end{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;background:radial-gradient(ellipse at 50% 45%,rgba(12,10,40,.25),rgba(12,10,40,.7) 75%);padding-right:12%}
.g3-end{padding-right:0;background:rgba(12,10,40,.6)}
.g3-logo{display:flex;flex-direction:column;align-items:center;gap:6px;animation:logoIn .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes logoIn{from{transform:scale(.6) rotate(-4deg);opacity:0}}
.g3-badge{font-weight:800;font-size:14px;color:#1b1440;background:#4ade80;border:3px solid #1b1440;border-radius:999px;padding:3px 14px;box-shadow:0 3px 0 #1b1440;transform:rotate(-3deg)}
.g3-h1{position:relative;margin:0;font-size:84px;line-height:.95;font-weight:800;letter-spacing:-.01em;max-width:900px;color:#1b1440;-webkit-text-stroke:16px #1b1440;paint-order:stroke fill;text-shadow:0 10px 0 #1b1440,0 0 40px rgba(124,58,237,.8);transform:rotate(-2deg)}
.g3-h1::after{content:attr(data-text);position:absolute;inset:0;-webkit-text-stroke:0;text-shadow:none;background:linear-gradient(180deg,#fff 0%,#fff 46%,#fde68a 54%,#fb923c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.g3-h1.sm{font-size:56px}
.g3-sub{margin:4px 0 0;font-size:20px;font-weight:800;color:#fff;background:rgba(12,10,40,.75);border-radius:999px;padding:6px 18px;border:2px solid rgba(255,255,255,.5)}
.g3-play{font-size:38px;font-weight:800;color:#fff;letter-spacing:.04em;padding:14px 60px;border-radius:999px;border:4px solid #fff;background:linear-gradient(180deg,#4ade80,#16a34a);box-shadow:0 8px 0 #14532d,0 0 0 4px #1b1440,0 0 40px rgba(74,222,128,.6);text-shadow:0 3px 0 #14532d;display:flex;align-items:center;gap:14px;animation:pulseB 1.4s ease-in-out infinite}
.g3-play span{font-size:30px}
.g3-play:active{transform:translateY(5px)}
.g3-play.sm{font-size:24px;padding:10px 30px;animation:none}
.g3-ghost{font-size:18px;font-weight:800;color:#1b1440;background:#fff;border:3px solid #1b1440;border-radius:999px;padding:10px 24px;box-shadow:0 5px 0 #1b1440}
.g3-how{display:flex;gap:12px}
.g3-step{position:relative;display:flex;align-items:center;gap:8px;background:#fff;color:#1b1440;font-weight:800;font-size:15px;border:3px solid #1b1440;border-radius:16px;padding:8px 14px;box-shadow:0 4px 0 #1b1440}
.g3-step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#0e7490,#6d28d9);font-size:13px}
.g3-minipad{display:inline-flex;align-items:center;gap:4px;background:var(--c);color:#fff;border-radius:9px;padding:3px 8px;font-size:12px;border:2px solid #1b1440}
.g3-hand{position:absolute;right:-6px;bottom:-22px;font-size:30px;animation:tap 1.1s ease-in-out infinite;filter:drop-shadow(0 3px 0 #1b1440)}
@keyframes tap{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-12px) scale(.9)}}
.g3-meta{display:flex;gap:10px;font-size:13px;font-weight:700;color:#fff}
.g3-meta span{background:rgba(12,10,40,.7);border-radius:999px;padding:4px 12px}
.g3-endc{display:flex;flex-direction:column;align-items:center;gap:14px;background:rgba(12,10,40,.85);border:3px solid #fff;border-radius:28px;padding:26px 40px;box-shadow:0 8px 0 #1b1440;animation:logoIn .6s cubic-bezier(.2,1.4,.4,1)}
.g3-trophy{font-size:84px;line-height:1;filter:drop-shadow(0 0 24px rgba(253,224,71,.8));animation:bump 1s .3s}
.g3-stats{display:flex;gap:12px}
.g3-stats div{background:#fff;color:#1b1440;border:3px solid #1b1440;border-radius:16px;padding:8px 18px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 0 #1b1440}
.g3-stats small{font-size:11px;font-weight:800;text-transform:uppercase;color:#5b21b6}
.g3-stats b{font-size:26px}
.g3-endb{display:flex;gap:10px}
@media (prefers-reduced-motion: reduce){.g3-play,.g3-next,.g3-hand{animation:none}}
.g3-q .g3-fb{white-space:normal;padding-right:8px;padding-bottom:22px}
.g3-exp{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.g3-pad.right{opacity:1!important}