/* ============================================================
   game.css — CYBER INVADERS section, canvas, overlay,
   question box, mobile controls
   (Preserved from original SIELSIC identity)
   ============================================================ */
.section-game{padding:80px 6%;text-align:center;border-top:1px solid rgba(76,201,255,.08);}
.game-wrapper{max-width:680px;margin:0 auto;position:relative;}
.game-hud{width:100%;display:flex;justify-content:space-between;align-items:center;padding:5px 12px;background:#000;border:1px solid #0a2a3a;border-bottom:none;font-size:11px;letter-spacing:.1em;font-family:var(--font-mono);color:#4cc9ff;}
.game-hud .gval{color:#00ff9d;font-weight:bold;}
#gameCanvas{display:block !important;background:#000;border:1px solid #0a2a3a;width:100% !important;height:auto !important;image-rendering:pixelated;position:relative !important;z-index:1 !important;opacity:1 !important;pointer-events:auto !important;top:auto !important;left:auto !important;}
#gPreview{display:block !important;position:static !important;z-index:auto !important;opacity:1 !important;pointer-events:none;width:200px !important;height:55px !important;top:auto !important;left:auto !important;}
#gOverlay{position:absolute;top:26px;left:0;width:100%;height:calc(100% - 26px);background:rgba(0,0,0,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;z-index:10;}
#gOverlay h2{font-size:clamp(16px,4vw,24px);letter-spacing:.2em;color:#4cc9ff;margin-bottom:6px;text-transform:uppercase;font-family:var(--font-mono);}
#gOverlay .gsub{font-size:10px;letter-spacing:.3em;color:#005577;margin-bottom:14px;}
.gbtn2{background:transparent;border:1px solid #4cc9ff;color:#4cc9ff;padding:9px 28px;font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;transition:all .2s;margin-top:8px;}
.gbtn2:hover{background:#4cc9ff;color:#000;}
#gQbox{position:absolute;top:26px;left:0;width:100%;height:calc(100% - 26px);background:rgba(0,5,15,.98);display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;z-index:20;overflow-y:auto;}
#gQbox .gqlevel{font-size:9px;letter-spacing:.3em;color:#005577;margin-bottom:10px;}
#gQbox .gqtitle{font-size:clamp(12px,2.5vw,15px);color:#4cc9ff;text-align:center;line-height:1.5;margin-bottom:16px;max-width:520px;}
#gQbox .gqopts{display:flex;flex-direction:column;gap:7px;width:100%;max-width:520px;}
#gQbox .gqopt{background:transparent;border:1px solid #0a3a55;color:#aaa;padding:9px 12px;font-family:var(--font-mono);font-size:clamp(10px,2vw,12px);cursor:pointer;text-align:left;transition:all .2s;line-height:1.4;}
#gQbox .gqopt:hover:not(:disabled){border-color:#4cc9ff;color:#4cc9ff;background:rgba(76,201,255,.05);}
#gQbox .gqopt.gcorrect{border-color:#00ff9d;color:#00ff9d;background:rgba(0,255,157,.06);}
#gQbox .gqopt.gwrong{border-color:#ff4466;color:#ff4466;background:rgba(255,68,102,.06);}
#gQbox .gqopt:disabled{cursor:default;}
#gQbox .gqfeed{font-size:clamp(10px,1.8vw,12px);line-height:1.6;color:#888;max-width:520px;margin-top:12px;border-left:2px solid #4cc9ff;padding-left:12px;display:none;}
#gQbox .gqfeed.show{display:block;}
#gQbox .gqfeed.bad{border-color:#ff4466;}
#gQbox .gqfeed.ok{border-color:#00ff9d;}
#gQbox .gqnext{display:none;margin-top:12px;}
#gQbox .gqnext.show{display:block;}
#gQbox .gchance{font-size:9px;letter-spacing:.2em;color:#ff9944;margin-top:8px;display:none;}
#gQbox .gchance.show{display:block;}
#gMobileControls{touch-action:none;}
#gMobileControls button:active{filter:brightness(1.4);}