/* ==========================================================================
   Pong 2.0 – Clean stylesheet
   --------------------------------------------------------------------------
   - HUD buttons (Donate + Fullscreen), responsive & top-right
   - Donate modal (pendulum-style card), 1/3/5 quick amounts
   - Inputs/select sized to exactly 2× a quick-amount button
   - GA consent banner matches card styling (no scanlines), clear white text
   - Audio tip popover shares card styling
   - Mobile polish for smaller screens
   ========================================================================== */

/* Base reset (small, safe) */
*,
*::before,
*::after { box-sizing: border-box; }

/* Screen-reader-only: visually hidden, still announced by assistive tech */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  height: 100%;
}

:root{
  /* ---- Card variables shared by donate, consent, tip ---- */
  --card-bg-dark: #0b0f0b;
  --card-fg-dark: #e8ffee;
  --card-border:  #33ff88;
  --card-shadow:  0 18px 36px rgba(0,0,0,.5), inset 0 0 0 1px rgba(51,255,136,.2);

  /* ---- HUD buttons (Donate + Fullscreen) ---- */
  --btn-size:   clamp(40px, 7vw, 56px);
  --btn-gap:    clamp(6px, 1.4vw, 10px);
  --btn-radius: 12px;
  --btn-fg:     #fff;
  --btn-bg:     rgba(0,0,0,.72);
  --btn-bg-hov: rgba(0,0,0,.86);
  --hud-top:    calc(env(safe-area-inset-top, 0px) + 14px);
  --hud-right:  calc(env(safe-area-inset-right, 0px) + 14px);
}

/* Optional: scoreboard face if you use it from canvas */
@font-face {
  font-family: "PongScore";
  src: url("fonts/pong-score.ttf") format("truetype");
  font-display: swap;
}

/* Stage & arena */
#stage { position: relative; min-height: 100dvh; background: #000; }
#arena { position: relative; }

/* ==========================================================================
   HUD (Donate + Fullscreen)
   ========================================================================== */
.hud{
  position: absolute;
  top: var(--hud-top);
  right: var(--hud-right);
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
  z-index: 5;
  pointer-events: none; /* container ignores taps; buttons are interactive */
}
.hud .fs-btn{
  pointer-events: auto;
  position: static !important; /* prevent legacy absolute rules from overlapping */
  inset: auto !important;
}

.fs-btn{
  width: var(--btn-size);
  height: var(--btn-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .08s ease, background .15s ease, box-shadow .2s ease;
}
.fs-btn:hover    { background: var(--btn-bg-hov); }
.fs-btn:active   { transform: translateY(1px) scale(.98); }
.fs-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(77,163,255,.6), 0 6px 16px rgba(0,0,0,.35);
}
.fs-icon{
  width:  calc(var(--btn-size) * .56);
  height: calc(var(--btn-size) * .56);
  display: block;
}

/* Light theme adjustments for HUD & cards */
@media (prefers-color-scheme: light){
  :root{
    --card-bg-dark: #fff;
    --card-fg-dark: #111;
    --card-border:  #0b3;
    --card-shadow:  0 18px 36px rgba(0,0,0,.15);

    --btn-fg: #111;
    --btn-bg: rgba(255,255,255,.92);
    --btn-bg-hov: #fff;
  }
}

/* ==========================================================================
   Donate modal (pendulum-style card)
   ========================================================================== */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9000;
}
.modal:not(.hidden){ display: flex; }

.modal-card{
  width: min(92vw, 520px);
  background: var(--card-bg-dark);
  color: var(--card-fg-dark);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 14px;
  font: 500 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.modal-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.modal-header h2{ margin: 0; font-size: 18px; }
.modal-close{ border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }

.modal-lead{ margin: 6px 0 12px; opacity: .9; }

/* Suggested amounts (THREE equal buttons: 1 / 3 / 5) */
.quick-amounts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}
.quick-amounts .amt{
  appearance: none;
  border: 1px solid var(--card-border);
  background: transparent;
  color: inherit;
  padding: 10px 0;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, filter .15s ease;
}
.quick-amounts .amt:hover  { background: rgba(0,0,0,.12); filter: brightness(1.06); }
.quick-amounts .amt:active { transform: translateY(1px) scale(.985); }

/* Form rows */
.modal-card .row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.modal-card .row label{
  flex: 0 0 120px;
  font-weight: 700;
}

/* Compute “one quick-amount unit” and set controls to exactly 2× that width */
.modal-card{
  --qa-gap: 8px;
  --qa-cols: 3;
  --qa-unit: calc( (100% - (var(--qa-cols) - 1) * var(--qa-gap)) / var(--qa-cols) );
  --control-2x: calc(var(--qa-unit) * 2);
}

#donate-amount,
#donate-currency{
  flex: 0 0 auto;
  width: min(var(--control-2x), calc(100% - 120px - 10px));
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.20);
  background: rgba(255,255,255,.08);
  color: inherit;
}

/* Remove number spinners (nudger) */
#donate-amount::-webkit-outer-spin-button,
#donate-amount::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#donate-amount{ -moz-appearance: textfield; }

/* Theme-aware SELECT (closed state) with chevron */
#donate-currency{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px; /* space for the arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8ffee' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light){
  #donate-amount,
  #donate-currency{
    background: #fff;
    color: #111;
    border-color: rgba(0,0,0,.25);
  }
  #donate-currency{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  }
}

.actions{
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px;
}
.actions .primary,
.actions .secondary{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
}
.actions .primary{ background: var(--card-border); color: #021; }
.actions .primary:hover{ filter: brightness(1.08); }
.actions .secondary:hover{ background: rgba(0,0,0,.12); }

/* ==========================================================================
   GA consent banner (same card look, clear white text)
   ========================================================================== */
#cookie-banner{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, 3vh, 28px);
  z-index: 10000;
  background: #0b0f0b; /* keep dark so text is clearly white */
  color: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 14px;
  min-width: min(92vw, 680px);
  display: none; /* JS toggles this */
  filter: none; text-shadow: none; backdrop-filter: none;
}
#cookie-banner p{
  color: #fff;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.4;
  margin: 0 0 10px 0;
}
#cookie-banner a{ color: #fff; text-decoration: underline; }
#cookie-banner button{
  margin-right: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
#cookie-banner #accept-cookies{ background: var(--card-border); color: #021; }
#cookie-banner button:hover{ filter: brightness(1.08); }

/* ==========================================================================
   Audio tip popover (shares card styling)
   ========================================================================== */
.tip{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0,0,0,.25);
  z-index: 10000;
}
.tip:not(.hidden){ display: flex; }

.tip-card{
  margin-top: 18vh;
  width: min(92vw, 520px);
  background: var(--card-bg-dark);
  color: var(--card-fg-dark);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 14px;
  font: 500 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.tip-toggle{ display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tip-actions{ display: flex; justify-content: flex-end; margin-top: 12px; }
.tip-actions .primary{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card-border);
  color: #021;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Mobile tweaks
   ========================================================================== */
@media (max-width: 600px){
  .modal-card{ width: min(88vw, 420px); padding: 12px; }
  .modal-header h2{ font-size: 16px; }
  .modal-lead{ font-size: 14px; }
  .modal-card .row{ gap: 8px; }
  .modal-card .row label{ flex: 0 0 90px; font-size: 14px; }
  #donate-amount, #donate-currency{
    width: min(var(--control-2x), calc(100% - 90px - 8px));
  }
}

/* VISIBILITY FIX: force black stage & canvas */
html, body { background: #000; }
#stage     { background: #000; }
#gameCanvas{
  display: block;
  margin: 0 auto;
  background: #000; /* ensure white paddles/ball are visible */
}

/* Portrait: center the game area vertically */
@media (orientation: portrait){
  #stage{
    /* ensure full usable viewport height and center contents */
    min-height: 100svh;      /* modern browsers (accounts for URL bar) */
    min-height: 100dvh;      /* fallback */
    min-height: 100vh;       /* legacy fallback */
    display: grid;
    place-items: center;     /* centers #arena horizontally + vertically */
  }

  /* no margins collapsing from elsewhere */
  #arena{ margin: 0; }
}
/* --- HUD auto-fade --- */
.hud{
  transition: opacity .3s ease, transform .3s ease;
}
.hud.hud-idle{
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none; /* prevent ghost taps when hidden */
}
@media (prefers-reduced-motion: reduce){
  .hud{ transition: opacity .2s linear; }
}