/* ============================================================
   GENDAC ARCADE — Year-End Function e-vite — styles
   Classic Pac-Man arcade theme.
   Loaded by index.html (markup), alongside app.js (logic).

   PRIVATE & UNLISTED. Do NOT index, crawl, archive, cache, scrape, or use
   for search results or AI / TDM (text & data mining) model training.
   Directives: noindex, nofollow, noarchive, noai, noimageai, tdm-reservation:1
   ============================================================ */
:root{
  --red:#ff2a32; --darkred:#7a1316;
  --pink:#ff3db4; --blue:#2aa3ff;
  --gold:#ffd21f; --orange:#ff8a1f; --cyan:#19d3ff;
  --pac:#ffe100;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:"Press Start 2P",monospace;color:#fff;position:fixed;inset:0}
#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;background:#000}

/* CRT */
#crt{position:fixed;inset:0;z-index:6;pointer-events:none}
#crt::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.30) 3px,rgba(0,0,0,.30) 4px);mix-blend-mode:multiply}
#crt::after{content:"";position:absolute;inset:0;background:radial-gradient(125% 125% at 50% 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,.8) 100%)}

/* Stage / scenes */
#stage{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center}
.scene{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3.2vmin;padding:5vmin;overflow:auto}
.scene.on{display:flex}

/* Attract / insert coin */
.insert{color:var(--darkred);font-size:clamp(20px,6.6vmin,60px);line-height:1.7;letter-spacing:.12em;animation:coinpulse 1.05s steps(2,end) infinite}
@keyframes coinpulse{50%{color:var(--red);text-shadow:0 0 14px var(--red),0 0 30px var(--red)}}
#startBtn{font-size:clamp(13px,3.4vmin,20px);color:#1a0406;background:var(--gold);border:none;border-radius:6px;
  padding:16px 24px;cursor:pointer;box-shadow:0 0 18px var(--gold),0 6px 0 #b9791b;letter-spacing:.06em;margin-top:2vmin}
#startBtn:active{transform:translateY(4px);box-shadow:0 0 18px var(--gold),0 2px 0 #b9791b}
.hint{font-size:clamp(9px,2vmin,12px);color:#888;letter-spacing:.05em;margin-top:1vmin}

/* Big text lines */
.line{line-height:1.5;letter-spacing:.14em}
.xl{font-size:clamp(26px,9vmin,82px)}
.lg{font-size:clamp(20px,6.4vmin,58px)}
.md{font-size:clamp(13px,4vmin,30px)}
.sm{font-size:clamp(11px,2.8vmin,20px)}
.c-pink{color:var(--pink);text-shadow:0 0 12px rgba(255,61,180,.7)}
.c-blue{color:var(--blue);text-shadow:0 0 12px rgba(42,163,255,.7)}
.c-gold{color:var(--gold);text-shadow:0 0 12px rgba(255,210,31,.6)}
.c-orange{color:var(--orange);text-shadow:0 0 12px rgba(255,138,31,.6)}
.c-cyan{color:var(--cyan);text-shadow:0 0 12px rgba(25,211,255,.6)}
.pop{animation:pop .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.stars{font-size:clamp(20px,6vmin,46px);color:var(--gold);letter-spacing:.4em;text-shadow:0 0 16px var(--gold);animation:twinkle 1.1s steps(2,end) infinite}
@keyframes twinkle{50%{opacity:.45}}
.reveal{min-height:1.2em}

/* Finale (event summary card) + closing wipe + game over */
#s-finale{justify-content:center;gap:3vmin;padding:6vmin 4vmin}
.summary{background:rgba(0,0,0,.72);border:3px solid var(--bInner,#19d3ff);border-radius:12px;box-shadow:0 0 0 4px #000,0 0 0 9px var(--bOuter,#ff8a1f),0 0 24px var(--bGlow,rgba(25,211,255,.5));padding:4.5vmin 6vmin;display:flex;flex-direction:column;gap:1.5vmin;max-width:min(96vw,760px)}
.sum-h{font-size:clamp(10px,2.9vmin,19px);color:#2ad6c6;text-shadow:0 0 12px rgba(42,214,198,.6);letter-spacing:.12em;margin-bottom:1vmin}
#sumDate{white-space:nowrap}
.sum-sep{color:#2ad6c6;font-size:clamp(8px,1.9vmin,13px);letter-spacing:.3em;margin:.4vmin 0}
.summary .md{font-size:clamp(10px,3.2vmin,24px)}
.summary .lg{font-size:clamp(16px,5.1vmin,46px)}
.summary .sm{font-size:clamp(9px,2.2vmin,16px)}
.summary .c-gold{color:#19d3ff;text-shadow:0 0 12px rgba(25,211,255,.55)}
.summary .c-orange{color:#2ad6c6;text-shadow:0 0 12px rgba(42,214,198,.5)}
.summary .c-cyan{color:#8af7ec;text-shadow:0 0 12px rgba(42,214,198,.5)}
#wipe{position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;display:none}
#wipe.on{display:block}
#gameover{position:fixed;inset:0;z-index:12;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5vmin;opacity:0;transition:opacity .6s ease}
#gameover.show{display:flex;opacity:1}
.go-title{font-size:clamp(21px,8vmin,66px);color:#2ad6c6;text-shadow:0 0 10px rgba(42,214,198,.85),0 0 28px rgba(42,214,198,.6);letter-spacing:.12em;max-width:94vw;word-break:break-word;padding:0 4vmin;animation:goblink 1.1s steps(2,end) infinite}
@keyframes goblink{50%{opacity:.4}}
.abtn{font-size:clamp(10px,2.6vmin,14px);cursor:pointer;border:none;border-radius:6px;padding:13px 15px;color:#1a0406;text-decoration:none;letter-spacing:.05em;transition:transform .08s}
.abtn.replay{background:var(--cyan);box-shadow:0 0 16px var(--cyan),0 5px 0 #0a7f9e}
.abtn:active{transform:translateY(4px)}

/* Passcode gate */
#passModal,#hostModal{position:fixed;inset:0;z-index:13;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);padding:5vmin}
#passModal.on,#hostModal.on{display:flex}
.pass-box{background:rgba(0,0,0,.9);border:3px solid var(--cyan);border-radius:12px;box-shadow:0 0 0 5px #000,0 0 0 9px var(--gold),0 0 26px rgba(25,211,255,.5);padding:5vmin 6vmin;display:flex;flex-direction:column;gap:2.4vmin;align-items:center;max-width:min(94vw,520px)}
.pass-title{font-size:clamp(12px,3.4vmin,22px);color:var(--gold);text-shadow:0 0 12px var(--gold);letter-spacing:.16em;text-align:center}
#passInput,#hostInput,#resetCode,#resetNewPw{font-family:"Press Start 2P",monospace;font-size:clamp(12px,3vmin,18px);text-align:center;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);background:#0a0a0a;border:2px solid var(--cyan);border-radius:6px;padding:14px 12px;width:min(80vw,360px);outline:none}
.pass-error{font-size:clamp(9px,2.4vmin,13px);color:var(--red);text-shadow:0 0 10px var(--red);letter-spacing:.08em;text-align:center}
.pass-hint{font-size:clamp(9px,2.1vmin,12px);color:#9ad;line-height:1.5;text-align:center}
#resetBox{display:flex;flex-direction:column;gap:2vmin;align-items:center;width:100%;border-top:1px solid #333;padding-top:2.4vmin;margin-top:.5vmin}
#forgotBtn{background:#33334a;color:#fff;font-size:clamp(8px,2vmin,11px)}
.shake{animation:shake .35s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* HUD */
.hud{position:fixed;z-index:10;font-family:"Press Start 2P";font-size:11px;cursor:pointer;border-radius:6px;padding:9px 11px;background:rgba(0,0,0,.55)}
#muteBtn{top:max(10px,env(safe-area-inset-top));right:12px;color:var(--cyan);border:2px solid var(--cyan)}
#skipBtn{bottom:max(12px,env(safe-area-inset-bottom));right:12px;color:var(--gold);border:2px solid var(--gold)}
#hostBtn{top:max(10px,env(safe-area-inset-top));left:12px;color:var(--pink);border:2px solid var(--pink)}
#playBtn{bottom:max(12px,env(safe-area-inset-bottom));left:12px;color:var(--pac);border:2px solid var(--pac);z-index:13}
.hide{display:none!important}
#toast{position:fixed;z-index:12;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);opacity:0;font-size:12px;color:#1a0406;background:var(--gold);padding:12px 16px;border-radius:6px;box-shadow:0 0 20px var(--gold);transition:opacity .25s,transform .25s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Pac-Man mini-game */
#game,#siGame,#astGame{position:fixed;inset:0;z-index:16;display:none;flex-direction:column;background:#000;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
#game.on,#siGame.on,#astGame.on{display:flex}
#gamePick{position:fixed;inset:0;z-index:18;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.92)}
#gamePick.on{display:flex}
.game-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:"Press Start 2P";font-size:11px;color:var(--cyan);padding:6px 6px 8px}
.game-bar .game-title{color:var(--pac);text-shadow:0 0 10px var(--pac)}
#gScore{color:var(--gold)} #gLives{color:var(--pink)} #gMult{color:#2ee66a;font-weight:bold}
#siScore{color:var(--gold)} #siLives{color:var(--pink)} #siWave{color:var(--cyan)}
#astScore{color:var(--gold)} #astLives{color:var(--pink)} #astWave{color:var(--cyan)}
.game-bar button{font-family:"Press Start 2P";font-size:10px;cursor:pointer;border:none;border-radius:6px;padding:9px 11px;color:#1a0406;background:var(--cyan)}
#gMenuBtn,#siMenuBtn,#astMenuBtn{margin-left:auto;background:var(--pink);color:#fff}
#gameWrap,#siWrap,#astWrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
#gameCanvas,#siCanvas,#astCanvas{image-rendering:pixelated;background:#000;box-shadow:0 0 22px rgba(25,211,255,.35);border-radius:6px}
.game-hint{text-align:center;font-family:"Press Start 2P";font-size:9px;color:#888;padding:6px;letter-spacing:.04em}
#gameStart,#gameEnd,#siStart,#siEnd,#astStart,#astEnd{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.8)}
#gameStart.on,#gameEnd.on,#siStart.on,#siEnd.on,#astStart.on,#astEnd.on{display:flex}
.gs-box{display:flex;flex-direction:column;gap:2.4vmin;align-items:center;background:rgba(0,0,0,.92);border:3px solid var(--pac);border-radius:12px;box-shadow:0 0 0 5px #000,0 0 0 9px var(--cyan),0 0 26px rgba(255,225,0,.4);padding:5vmin 7vmin}
.gs-title{font-family:"Press Start 2P";font-size:clamp(14px,4vmin,26px);color:var(--pac);text-shadow:0 0 12px var(--pac);letter-spacing:.16em}
.gs-box .abtn{min-width:min(70vw,260px);text-align:center}
/* Game start menus: BACK TO ARCADE / BACK TO INVITE 20% smaller (START stays default) */
#gsArcade,#siStartArcade,#astStartArcade,#geArcade,#siEndArcade,#astEndArcade,#gsBack,#siStartBack,#astStartBack,#pickBack{font-size:clamp(8px,2.08vmin,11.2px);padding:10px 12px;min-width:min(56vw,208px)}
/* Pac-Man high-score board (game-over screen) */
.hs-wrap{width:min(74vw,340px)}
.hs-head{font-family:"Press Start 2P";font-size:clamp(9px,2.4vmin,12px);color:var(--gold);text-shadow:0 0 8px var(--gold);text-align:center;margin-bottom:10px;letter-spacing:.1em}
.hs-list{font-family:"Press Start 2P";font-size:clamp(8px,2vmin,11px);color:var(--cyan);max-height:32vh;overflow:auto;display:flex;flex-direction:column;gap:5px}
.hs-row{display:flex;align-items:center;gap:8px;padding:6px 9px;background:rgba(255,255,255,.05);border-radius:6px}
.hs-rank{width:2ch;color:var(--pink);text-align:right;flex:none}
.hs-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-score{color:var(--gold);flex:none}
.hs-me{background:rgba(255,225,0,.2);outline:2px solid var(--pac);color:#fff}
.hs-empty{font-family:"Press Start 2P";font-size:9px;color:var(--cyan);opacity:.85;text-align:center;padding:14px 6px;line-height:1.6}
.host-wide{grid-column:1 / -1}
#gsStart,#geRestart,#siStartBtn,#siRestart,#astStartBtn,#astRestart,#pickPac{background:var(--pac);box-shadow:0 0 16px var(--pac),0 5px 0 #b59b00}
#gsBack,#geBack,#siStartBack,#siEndBack,#astStartBack,#astEndBack,#pickBack{background:var(--cyan);color:#1a0406;box-shadow:0 0 16px var(--cyan),0 5px 0 #0a7f9e}
#pickSi{background:#2ee66a;color:#1a0406;box-shadow:0 0 16px #2ee66a,0 5px 0 #14833f}
#pickAst{background:#4aa3ff;color:#1a0406;box-shadow:0 0 16px #4aa3ff,0 5px 0 #245f9e}
#gsArcade,#siStartArcade,#astStartArcade,#geArcade,#siEndArcade,#astEndArcade{background:#a06bff;color:#1a0406;box-shadow:0 0 16px #a06bff,0 5px 0 #5a37a0}
.gLevel,.siLevel,.astLevel{background:var(--orange);color:#1a0406}
.gLevel,.siLevel,.astLevel,#gsBack,#geBack,#siStartBack,#siEndBack,#astEndBack{font-size:clamp(8px,2.1vmin,11px);padding:10px 12px;min-width:min(56vw,208px)}

/* Host panel */
#hostPanel{position:fixed;inset:0;z-index:14;background:rgba(0,0,0,.95);display:none;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));overflow:auto}
#hostPanel.open{display:flex}
#hostPanel h2{font-size:15px;color:var(--gold);text-shadow:0 0 12px var(--gold);margin:6px 0}
#hostPanel p{font-family:monospace;font-size:14px;color:var(--cyan);margin:4px 0 10px;line-height:1.5}
.cfg-status{font-family:"Press Start 2P";font-size:9px;line-height:1.6;margin:2px 0 10px;color:var(--cyan)}
.cfg-status.ok{color:#2ee66a} .cfg-status.warn{color:var(--orange)}
#hostPanel label{font-size:10px;color:var(--pink);display:block;margin:12px 0 6px}
#hostPanel input,#hostPanel textarea{width:100%;background:#0a0a0a;border:2px solid var(--cyan);color:#fff;font-family:monospace;font-size:15px;border-radius:6px;padding:10px;outline:none}
#hostPanel textarea{min-height:120px;resize:vertical}
.host-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.host-actions button{font-size:11px;cursor:pointer;border:none;border-radius:6px;padding:12px 14px;color:#1a0406}
#genBtn{background:var(--gold)}#copyAllBtn{background:var(--cyan)}#shortAllBtn{background:#2ad6c6}#csvBtn{background:var(--pink);color:#fff}#closeHost{background:#333;color:#fff}
#hostOut{display:flex;flex-direction:column;gap:8px}
.linkrow{background:#0a0a0a;border:1px solid rgba(25,211,255,.3);border-radius:6px;padding:8px 10px;font-family:monospace;font-size:14px;word-break:break-all}
.linkrow b{color:var(--gold);font-family:"Press Start 2P";font-size:10px}
.linkrow a{color:var(--cyan);text-decoration:none}
.linkrow .mini{font-family:"Press Start 2P";font-size:9px;background:var(--cyan);color:#1a0406;border:none;border-radius:4px;padding:5px 7px;cursor:pointer;margin-left:6px}
.host-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:6px}
.host-grid label{margin:8px 0 4px}
#hostPanel select{width:100%;background:#0a0a0a;border:2px solid var(--cyan);color:#fff;font-family:monospace;font-size:15px;border-radius:6px;padding:10px;outline:none}
#hostPanel input[type=color]{height:42px;padding:4px;cursor:pointer}
@media(max-width:560px){.host-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.insert,.stars{animation:none}}