/* GamingBroject Arcade v3.4 (s131, 2026-10-22): full-screen stage for Space Defenders and Neon Snake.
   Pairs with gb-arcade-v3.js, which adds .gb3-on to #arcadeOverlay / #snakeOverlay and hides the old 480px shell. */
#arcadeOverlay.gb3-on,#snakeOverlay.gb3-on{padding:0!important;display:block;background:#020007;overflow:hidden;backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior:contain;touch-action:none}
#arcadeOverlay.gb3-on.hidden,#snakeOverlay.gb3-on.hidden{display:none!important}
#arcadeOverlay.gb3-on>.arcade-shell,#snakeOverlay.gb3-on>.arcade-shell{display:none!important}
.gb3{--acc:#ff304f;--pc:#ff304f;position:absolute;inset:0;overflow:hidden;color:#f4f1ff;font:700 13px/1.25 "Courier New",ui-monospace,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;animation:gb3In .32s cubic-bezier(.2,.8,.2,1) both}
.gb3[data-game="snake"]{--acc:#9dff54}
@keyframes gb3In{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
.gb3-cv{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
.gb3[data-game="shooter"] .gb3-cv,.gb3[data-game="shooter"] .gb3-glcv{cursor:crosshair}
/* 3.4 graphics pass: the WebGL canvas shows the finished frame; the 2D canvas underneath keeps drawing it. */
.gb3-glcv{position:absolute;inset:0;width:100%;height:100%;display:none;outline:none;touch-action:none}
.gb3.gb3-glon .gb3-glcv{display:block}
.gb3.gb3-glon .gb3-cv{visibility:hidden}
.gb3-fps{position:absolute;z-index:3;left:max(14px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 42px);padding:2px 6px;border:1px solid rgba(157,255,84,.45);border-radius:5px;background:rgba(2,10,4,.62);color:#9dff54;font-size:10px;letter-spacing:.12em;pointer-events:none;font-variant-numeric:tabular-nums}
.gb3-fps[hidden]{display:none}
.gb3::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5) 100%)}
.gb3 button{font:inherit;letter-spacing:inherit;text-transform:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.gb3 button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* HUD */
.gb3-hud{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));background:linear-gradient(to bottom,rgba(2,0,8,.88),rgba(2,0,8,0));pointer-events:none}
.gb3-hud button{pointer-events:auto}
.gb3-hl,.gb3-hr{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}
.gb3-hr{justify-content:flex-end}
.gb3-hc{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.gb3-lvl{color:var(--acc);font-size:13px;white-space:nowrap;text-shadow:0 0 10px var(--acc)}
.gb3-name{font-size:12px;color:rgba(255,255,255,.86);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24vw;text-transform:none}
.gb3-score{font-size:clamp(20px,3vw,30px);line-height:1;color:#fff;text-shadow:0 0 16px var(--acc);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.gb3-top{font-size:10px;color:rgba(255,255,255,.58);margin-top:4px;white-space:nowrap;letter-spacing:.1em}
.gb3-ib{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(10,4,20,.62);color:#fff;padding:0;cursor:pointer;transition:border-color .15s,background .15s}
.gb3-ib:hover{border-color:var(--acc);background:rgba(30,8,40,.75)}
.gb3-ib svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:0}
.gb3-b-sound .gb3-wave{fill:none;stroke-width:2;stroke-linecap:round}
.gb3-b-sound .gb3-x{display:none;fill:none;stroke-width:2.2;stroke-linecap:round}
.gb3-b-sound.off{color:rgba(255,255,255,.5)}
.gb3-b-sound.off .gb3-wave{display:none}
.gb3-b-sound.off .gb3-x{display:inline}
.gb3-b-full svg{fill:none;stroke-width:2.2;stroke-linecap:round}
/* Control cluster (3.2): one glass pill in the top-right corner, sound first so it is never pushed off a phone. */
.gb3-ctl{display:flex;align-items:center;gap:2px;padding:3px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(8,3,18,.72);box-shadow:0 8px 24px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);pointer-events:auto}
.gb3-ctl .gb3-ib{width:36px;height:36px;border:0;border-radius:11px;background:transparent}
.gb3-ctl .gb3-ib:hover{background:rgba(255,255,255,.1)}
.gb3-b-music svg{fill:none;stroke-width:2;stroke-linejoin:round}
.gb3-b-music circle{fill:currentColor;stroke:none}
.gb3-b-music.off{color:rgba(255,255,255,.45)}
.gb3-b-music.off .gb3-x{display:inline}
.gb3-exit{height:36px;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;margin-left:3px;padding:0 12px 0 9px;border-radius:11px;border:1px solid var(--acc);background:rgba(255,48,79,.14);color:#fff;cursor:pointer;letter-spacing:.14em!important;box-shadow:0 0 14px -5px var(--acc)}
.gb3-exit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.gb3-exit:hover{background:rgba(255,48,79,.3)}
/* Weapons pill (shooter): main gun, side weapon and clones, bottom centre. */
.gb3-arms{position:absolute;z-index:3;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(6,2,14,.72);pointer-events:none;max-width:calc(100% - 190px)}
.gb3-arms:empty{display:none}
.gb3-arms i{font-style:normal;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:8px;border:1px solid var(--c);color:#fff;font-size:13px;letter-spacing:.06em;white-space:nowrap;box-shadow:0 0 12px -4px var(--c);background:rgba(255,255,255,.03)}
.gb3-arms i span{font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.82)}
.gb3-arms i em{font-style:normal;font-size:10px;color:var(--c)}
.gb3-arms i.off{opacity:.45;box-shadow:none;border-style:dashed}
.gb3-life small{font-size:11px;color:#72f1ff}
.gb3-sub{position:absolute;z-index:3;top:calc(max(10px,env(safe-area-inset-top)) + 44px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:0 14px;pointer-events:none;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.gb3-pattern{text-align:center}
.gb3-chips{display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:center}
.gb3-chips:empty{display:none}
.gb3-chips i{font-style:normal;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border:1px solid var(--c);border-radius:6px;color:#fff;font-size:12px;letter-spacing:0;background:rgba(6,2,14,.7);box-shadow:0 0 10px -3px var(--c)}
.gb3-chips i em{font-style:normal;font-size:9px;color:var(--c)}
.gb3-life{position:absolute;z-index:3;left:max(14px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:6px;align-items:center;pointer-events:none}
.gb3-ship{display:block;width:17px;height:18px;background:var(--c);filter:drop-shadow(0 0 5px var(--c));clip-path:polygon(50% 0,61% 38%,100% 68%,100% 84%,58% 78%,50% 100%,42% 78%,0 84%,0 68%,39% 38%)}
.gb3-armor{display:block;width:15px;height:14px;background:#72f1ff;filter:drop-shadow(0 0 5px #72f1ff);clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.gb3-sh{background:#21eaff}
.gb3-len{font-size:11px;letter-spacing:.14em;color:#9dff54;padding:3px 8px;border:1px solid rgba(157,255,84,.5);border-radius:6px;background:rgba(2,12,6,.7)}

/* Bomb button (shooter) */
.gb3-bomb{position:absolute;z-index:4;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:62px;height:62px;border-radius:50%;border:2px solid #ff4568;background:radial-gradient(circle,rgba(255,69,104,.38),rgba(12,2,12,.78));color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 0 24px -2px rgba(255,69,104,.6)}
.gb3-bomb b{font-size:22px;line-height:1}
.gb3-bomb-n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#ff4568;color:#fff;font-size:12px;display:grid;place-items:center}
.gb3-bomb.empty{opacity:.35;box-shadow:none}
.gb3:not(.gb3-touch) .gb3-bomb{width:52px;height:52px}
.gb3:not(.gb3-touch) .gb3-bomb::after{content:"SPACE";position:absolute;bottom:-17px;font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.55)}

/* Toast and level banner */
.gb3-toast{position:absolute;z-index:4;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 74px);max-width:calc(100% - 28px);transform:translate(-50%,-6px);opacity:0;padding:7px 14px;border-radius:999px;border:1px solid var(--tc,#ffd35a);background:rgba(6,2,14,.84);color:#fff;font-size:12px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 0 22px -6px var(--tc,#ffd35a);transition:opacity .2s,transform .2s}
.gb3-toast.on{opacity:1;transform:translate(-50%,0)}
.gb3-banner{position:absolute;z-index:4;left:0;right:0;top:36%;padding:0 16px;text-align:center;pointer-events:none;opacity:0}
.gb3-banner small{display:block;font-size:12px;letter-spacing:.32em;color:var(--bc,#21eaff);text-shadow:0 0 12px var(--bc,#21eaff)}
.gb3-banner strong{display:block;margin-top:8px;font-size:clamp(26px,5.6vw,58px);line-height:1.05;letter-spacing:.07em;color:#fff;text-shadow:0 0 26px var(--bc,#21eaff),0 0 3px #fff}
.gb3-banner.on{animation:gb3Banner 1.9s cubic-bezier(.2,.8,.2,1) both}
@keyframes gb3Banner{0%{opacity:0;transform:scale(.9);letter-spacing:.3em}12%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}

/* Panels: level clear, game over, pause */
.gb3-panel{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(2,0,8,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gb3-panel[hidden]{display:none}
.gb3-card{position:relative;width:min(460px,100%);max-height:100%;overflow:auto;padding:22px 22px 18px;border-radius:18px;border:1px solid var(--pc);background:linear-gradient(180deg,rgba(20,7,32,.95),rgba(6,2,12,.97));box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px -10px var(--pc);text-align:center;animation:gb3Pop .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes gb3Pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
/* 3.3: grade badge, personal best line, stats that slide in one by one */
.gb3-grade{position:absolute;top:14px;right:14px;width:54px;height:54px;display:grid;place-items:center;border-radius:14px;border:2px solid var(--gc,#9dff54);color:var(--gc,#9dff54);font-size:32px;line-height:1;text-shadow:0 0 14px var(--gc,#9dff54);box-shadow:0 0 22px -6px var(--gc,#9dff54),inset 0 0 18px -8px var(--gc,#9dff54);background:rgba(4,2,10,.6);animation:gb3Stamp .5s .25s cubic-bezier(.2,1.6,.4,1) both}
.gb3-grade[hidden]{display:none}
.gb3-card:has(.gb3-grade:not([hidden])) .gb3-kick,.gb3-card:has(.gb3-grade:not([hidden])) .gb3-title{padding:0 58px}
.gb3-grade[data-g="S"]{--gc:#ffd35a}.gb3-grade[data-g="A"]{--gc:#5bffb0}.gb3-grade[data-g="B"]{--gc:#21eaff}.gb3-grade[data-g="C"]{--gc:#d278ff}.gb3-grade[data-g="D"]{--gc:#ff6b88}
@keyframes gb3Stamp{from{opacity:0;transform:scale(2.2) rotate(-12deg)}to{opacity:1;transform:none}}
.gb3-best{margin:8px 0 0;font-size:11px;letter-spacing:.16em;color:#ffd35a}
.gb3-best[hidden]{display:none}
.gb3-stats div{animation:gb3Row .34s calc(.08s * var(--i,0) + .12s) cubic-bezier(.2,.8,.2,1) both}
@keyframes gb3Row{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gb3-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:gb3Sheen 3.2s 1s ease-in-out infinite}
@keyframes gb3Sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.gb3-hud,.gb3-sub,.gb3-life,.gb3-arms{contain:layout style}
.gb3-kick{margin:0;font-size:11px;letter-spacing:.24em;color:var(--pc)}
.gb3-title{margin:8px 0 0;font:inherit;font-size:clamp(24px,4.4vw,34px);line-height:1.1;letter-spacing:.06em;color:#fff;text-shadow:0 0 22px var(--pc)}
.gb3-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 10px}
.gb3-stats div:last-child:nth-child(odd){grid-column:1/-1}
.gb3-stats div{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-align:left}
.gb3-stats span{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.gb3-stats b{font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.gb3-rank{margin:2px 0 10px;min-height:14px;font-size:11px;letter-spacing:.1em;color:#ffd35a}
.gb3-rank[hidden]{display:none}
.gb3-rank>*{margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;background:none!important;border:0!important}
.gb3-extra:empty{display:none}
.gb3-toggles{display:flex;gap:8px;justify-content:center;margin:2px 0 12px}
.gb3-tg{height:32px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);font-size:11px;cursor:pointer}
.gb3-tg[aria-pressed="true"]{border-color:var(--acc);color:#fff;box-shadow:0 0 12px -4px var(--acc)}
.gb3-actions{display:flex;gap:10px;justify-content:center;margin-top:6px}
.gb3-actions button{min-height:46px;padding:0 20px;border-radius:12px;cursor:pointer;font-size:14px;letter-spacing:.14em}
.gb3-primary{flex:1 1 auto;border:0;background:var(--pc);color:#08020c;box-shadow:0 0 24px -6px var(--pc)}
.gb3-primary:hover{filter:brightness(1.1)}
.gb3-secondary{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff}
.gb3-actions button[hidden]{display:none}
.gb3-hint{display:block;margin-top:12px;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.5)}
.gb3-hint:empty{display:none}
.gb3[data-panel] .gb3-bomb{visibility:hidden}

@media (max-width:620px){
  .gb3-hud{gap:8px}
  .gb3-hl{flex:0 0 auto}
  .gb3-hc{flex:1 1 auto;align-items:flex-start;min-width:0}
  .gb3-hr{flex:0 0 auto}
  .gb3-score{font-size:21px}
  .gb3-top{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .gb3-name{display:none}
  .gb3-lvl{font-size:12px}
  .gb3-top{font-size:9px}
  .gb3-ctl .gb3-ib{width:32px;height:32px}
  .gb3-exit{height:32px;padding:0 8px}
  .gb3-exit span{display:none}
  .gb3-hr{gap:6px}
  .gb3-arms{left:max(14px,env(safe-area-inset-left));transform:none;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 26px);max-width:calc(100% - 110px)}
  .gb3-arms i{height:24px;padding:0 6px;gap:3px}
  .gb3-arms i span{display:none}
  .gb3-sub{top:calc(max(10px,env(safe-area-inset-top)) + 40px);font-size:9px}
  .gb3-toast{top:calc(max(10px,env(safe-area-inset-top)) + 84px);font-size:11px}
  .gb3-stats b{font-size:14px}
  .gb3-grade{top:10px;right:10px;width:44px;height:44px;font-size:26px;border-radius:12px}
  .gb3-card:has(.gb3-grade:not([hidden])) .gb3-kick,.gb3-card:has(.gb3-grade:not([hidden])) .gb3-title{padding:0 46px}
}
@media (max-width:400px){.gb3-b-full{display:none}.gb3-ctl .gb3-ib{width:30px}}
@media (max-width:350px){.gb3-b-music{display:none}}
@media (prefers-reduced-motion:reduce){
  .gb3,.gb3-card,.gb3-grade,.gb3-stats div,.gb3-card::before{animation:none}
  .gb3-banner.on{animation:gb3Fade 1.9s linear both}
  .gb3-toast{transition:opacity .2s}
}
@keyframes gb3Fade{0%,100%{opacity:0}10%,80%{opacity:1}}