/* ============================================================
   MAIN.CSS — extracted from index.html
   ============================================================ */

/* ============================================================
   BASE RESET & VARIABLES
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --Y:#FFE600; --R:#FF2D2D; --G:#00FF87; --B:#00C2FF; --P:#FF6BD6; --V:#8B5CF6;
  --W:#ffffff; --BK:#0a0a0a;
  --card:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.1);
  --panel:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  --panel-bd:rgba(255,255,255,.1);
}
html,body{
  font-family:'Rajdhani',-apple-system,sans-serif;
  background:var(--BK); min-height:100vh;
  /* App is a single-viewport SPA — every panel scrolls internally via
     .lobby-panel (see layout.css), so the outer document should never
     need to scroll. If it ever does (content taller than expected,
     missing per-panel overflow rule, etc.), overflow:hidden here stops
     the browser from falling back to its native/unstyled scrollbar,
     which looked like a big ugly white bar docked at the window edge
     instead of matching the game's dark theme. */
  overflow:hidden; scrollbar-width:none; user-select:none; color:var(--W);
}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none;}
#app{overflow:hidden;}
body::before{
  content:'';position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 15% 50%,rgba(255,230,0,.12) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 15%,rgba(255,45,45,.12) 0%,transparent 55%),
    radial-gradient(ellipse at 55% 85%,rgba(0,194,255,.09) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.05) 0%,transparent 70%);
  background-size:140% 140%;
  animation:bg-drift 18s ease-in-out infinite alternate;
}
body::after{
  content:'';position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.06),transparent 45%),
             radial-gradient(ellipse at 50% 110%,rgba(0,0,0,.55),transparent 45%);
}
@keyframes bg-drift{
  0%{background-position:0% 0%}
  50%{background-position:3% 5%}
  100%{background-position:-3% 3%}
}
#app{min-height:100vh;position:relative;z-index:1;will-change:transform;}
#app.shake,#app.camera-zoom{will-change:transform;}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.t-mega{
  font-family:'Luckiest Guy',sans-serif;
  font-size:clamp(2.8rem,13vw,4.8rem);
  color:var(--Y);text-shadow:4px 4px 0 var(--R),8px 8px 0 rgba(255,45,45,.2);
  letter-spacing:2px;line-height:1;
  animation:title-pulse 2s ease-in-out infinite;
}
@keyframes title-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

.t-head{
  font-family:'Luckiest Guy',sans-serif;
  font-size:clamp(1.5rem,7vw,2.2rem);color:var(--W);
  text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  letter-spacing:1px;line-height:1.1;
}
.t-sub{font-size:.92rem;color:rgba(255,255,255,.6);max-width:280px;line-height:1.5;font-weight:800;}
.t-label{
  font-family:'Luckiest Guy',sans-serif;
  font-size:.72rem;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;
}
.tag{
  display:inline-block;font-family:'Luckiest Guy',sans-serif;
  font-size:.72rem;padding:3px 12px;border-radius:4px;letter-spacing:1px;
  background:var(--Y);color:var(--BK);border:2px solid var(--BK);
}
.tag.r{background:var(--R);color:var(--W);}
.tag.g{background:var(--G);color:var(--BK);}
.tag.b{background:var(--B);color:var(--BK);}
.tag.o{background:#FF8C00;color:var(--BK);}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;
  padding:14px 34px;border-radius:6px;border:3px solid var(--BK);
  cursor:pointer;letter-spacing:1px;position:relative;overflow:hidden;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),
             box-shadow .16s cubic-bezier(.34,1.56,.64,1),
             filter .16s ease;
  will-change:transform;
}
.btn::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);opacity:0;pointer-events:none;transition:opacity .15s;
}
.btn:not(:disabled):hover::after{animation:btn-sheen .7s ease forwards;}
@keyframes btn-sheen{
  0%{left:-60%;opacity:0}
  15%{opacity:1}
  100%{left:120%;opacity:0}
}
.btn:active{transform:translate(3px,3px) scale(.97)!important;box-shadow:none!important;filter:brightness(.92);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.y{background:var(--Y);color:var(--BK);box-shadow:4px 4px 0 #000;}
.btn.y:not(:disabled):hover{box-shadow:6px 6px 0 #000,0 0 22px rgba(255,230,0,.55);transform:translate(-2px,-2px);filter:brightness(1.06);}
.btn.r{background:var(--R);color:var(--W);box-shadow:4px 4px 0 #700;}
.btn.r:not(:disabled):hover{box-shadow:6px 6px 0 #700,0 0 22px rgba(255,45,45,.55);transform:translate(-2px,-2px);filter:brightness(1.06);}
.btn.b{background:var(--B);color:var(--BK);box-shadow:4px 4px 0 #006;}
.btn.b:not(:disabled):hover{box-shadow:6px 6px 0 #006,0 0 22px rgba(0,194,255,.55);transform:translate(-2px,-2px);filter:brightness(1.06);}
.btn.g{background:var(--G);color:var(--BK);box-shadow:4px 4px 0 #040;}
.btn.g:not(:disabled):hover{box-shadow:6px 6px 0 #040,0 0 22px rgba(0,255,135,.55);transform:translate(-2px,-2px);filter:brightness(1.06);}
.btn.ghost{background:transparent;color:rgba(255,255,255,.4);border-color:rgba(255,255,255,.15);box-shadow:none;font-size:.88rem;padding:10px 20px;}
.btn.ghost:not(:disabled):hover{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.35);transform:translate(-1px,-1px);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus states
   Only shown for keyboard/assistive-tech navigation (:focus-visible),
   so mouse/touch interaction keeps its existing look untouched.
   ============================================================ */
button:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
a:focus-visible,
input:focus-visible,
[onclick]:focus-visible{
  outline:3px solid var(--Y);
  outline-offset:2px;
  border-radius:6px;
}


/* ============================================================
   BACK BUTTON
   ============================================================ */
#global-back-btn{
  position:fixed;top:14px;left:14px;z-index:200;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);
  color:#fff;font-size:1.1rem;width:42px;height:42px;border-radius:6px;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  font-family:'Luckiest Guy',sans-serif;transition:background .15s;
}
#global-back-btn:active{background:rgba(255,255,255,.22);}


/* ============================================================
   CARD
   ============================================================ */
.card{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 24px;}


/* ============================================================
   INPUTS
   ============================================================ */
input.txt-input{
  font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;
  padding:13px 16px;border-radius:10px;
  border:2.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:var(--W);
  outline:none;width:100%;max-width:280px;letter-spacing:1px;
  transition:border-color .15s;
}
input.txt-input:focus{border-color:var(--Y);}
input.txt-input::placeholder{color:rgba(255,255,255,.25);}
input.code-input{
  font-family:'Luckiest Guy',sans-serif;font-size:2rem;
  text-align:center;letter-spacing:6px;padding:14px;border-radius:10px;
  border:3px solid var(--Y);background:rgba(255,255,255,.06);
  color:var(--Y);width:240px;text-transform:uppercase;outline:none;
}
input.code-input::placeholder{color:rgba(255,230,0,.25);}

.err-text{color:#ff8080;font-weight:800;min-height:18px;font-size:.86rem;max-width:280px;}
.ok-text{color:var(--G);font-weight:800;min-height:18px;font-size:.86rem;}


/* ============================================================
   MISC
   ============================================================ */
.mic-big{font-size:3.8rem;animation:mic-bounce 1.5s ease-in-out infinite;}
@keyframes mic-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.round-tip{font-size:.8rem;color:rgba(255,255,255,.32);max-width:255px;font-weight:800;}
#debug-level{font-size:.65rem;opacity:.28;color:#fff;font-weight:800;}

/* ============================================================
   BOOT LOADING OVERLAY
   Shown the instant the page paints, hidden once Firebase's
   anonymous auth ('fbReady') actually fires. Blocks all input to
   the auth screen underneath while the backend connection warms up,
   so there's no dead window where taps/typing silently do nothing.
   ============================================================ */
#boot-loading-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,230,0,.10) 0%,transparent 60%),var(--BK);
  transition:opacity .4s ease,visibility .4s ease;
}
#boot-loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.boot-loading-glow{
  position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,0,.35) 0%,transparent 70%);
  animation:boot-glow-pulse 1.8s ease-in-out infinite;
  filter:blur(4px);
}
@keyframes boot-glow-pulse{
  0%,100%{transform:scale(.85);opacity:.6}
  50%{transform:scale(1.15);opacity:1}
}
.boot-loading-mascot{
  position:relative;width:104px;height:104px;
  box-shadow:0 0 0 4px rgba(255,230,0,.25),0 12px 30px rgba(0,0,0,.5);
  animation:boot-bob 1.6s ease-in-out infinite;
}
@keyframes boot-bob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-14px) rotate(3deg)}
}
.boot-loading-title{
  position:relative;font-family:'Luckiest Guy',sans-serif;font-size:1.7rem;letter-spacing:2px;
  color:var(--Y);text-shadow:0 0 18px rgba(255,230,0,.45);
}
.boot-loading-bar{
  position:relative;width:200px;height:8px;border-radius:99px;
  background:rgba(255,255,255,.1);overflow:hidden;
}
.boot-loading-bar-fill{
  position:absolute;top:0;bottom:0;left:0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--R),var(--Y));
  box-shadow:0 0 10px rgba(255,230,0,.6);
  transition:width .35s ease-out;
}
.boot-loading-pct{
  position:relative;font-family:'Luckiest Guy',sans-serif;font-size:.95rem;
  color:var(--Y);letter-spacing:1px;
}
.boot-loading-text{position:relative;font-size:.85rem;font-weight:800;color:rgba(255,255,255,.45);}
.boot-loading-dots span{animation:boot-dot-fade 1.2s ease-in-out infinite;opacity:0;}
.boot-loading-dots span:nth-child(1){animation-delay:0s;}
.boot-loading-dots span:nth-child(2){animation-delay:.2s;}
.boot-loading-dots span:nth-child(3){animation-delay:.4s;}
@keyframes boot-dot-fade{
  0%,80%,100%{opacity:0}
  40%{opacity:1}
}

/* Respect the OS "reduce motion" setting everywhere (title pulse, ring spin, background drift, canvases). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}