:root{
  --bg-900: #0b1220;
  --bg-800: #0f1724;
  --card: #0f1728;
  --muted: #9aa6b2;
  --text: #e6eef8;
  /* subtle shadow used to slightly outline light/white text for better legibility */
  --text-stroke: 0 1px 1px rgba(0,0,0,0.48);
  /* Softer accent tones for less harsh UI (better for prolonged viewing on desktop & mobile) */
  --accent: #2f6a7f; /* professional muted blue */
  --accent-2: #6fb0c2; /* soft cyan */
  --success: #34d399;
  --danger: #fb7185;
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background-color:var(--bg-900);-webkit-font-smoothing:antialiased;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}

/* Soft layered background: subtle radial highlights + vertical gradient vignette for a modern, professional dark theme.
   Includes a very subtle SVG noise layer to avoid color banding on large gradients and improve perceived depth.
   Use fixed attachment on pointer: fine (desktop) for nicer parallax; on touch devices use scroll for performance. */
body{
  background-image:
    radial-gradient(circle at 10% 10%, rgba(125,211,252,0.04), transparent 8%),
    radial-gradient(circle at 90% 85%, rgba(47,106,127,0.03), transparent 12%),
    linear-gradient(180deg, rgba(11,17,32,1) 0%, rgba(15,23,36,1) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence baseFrequency='0.02' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02' /></svg>");
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, 128px 128px;
  background-blend-mode: overlay, overlay, normal, normal;
  background-attachment: scroll;
}

@media (pointer: fine) {
  /* On devices with fine pointers (desktop), keep a fixed background for a subtle parallax */
  body{ background-attachment: fixed, fixed, fixed, scroll; }
}


.container{max-width:1100px;margin:0 auto;padding:1rem}
.container{box-sizing:border-box}
.card{background:var(--card);border-radius:12px;padding:1.25rem;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.6)}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;color:var(--text)}
.logo{font-weight:700;letter-spacing:0.6px;font-size:1.25rem}
.streaks{display:flex;align-items:center;gap:0.5rem}

/* Topbar and button/field polish (layout & accessibility) - do not change colors */
.topbar{position:relative;z-index:1200}
.topbar-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.topbar-center{ display:flex; align-items:center; justify-content:center; gap:1rem; flex:1 }
.streaks{ display:flex; align-items:center; gap:0.6rem; font-weight:600 }
.streaks .muted{ font-weight:400 }
.nav{display:flex;align-items:center;gap:0.75rem;margin-left:0}
.nav .nav-link{margin-right:0.5rem}

/* Primary action sizing consistency */
.action-btn{min-height:48px;min-width:48px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0.6rem 0.95rem;border-radius:8px}
.auth-button{min-height:48px;min-width:48px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0.6rem 0.9rem;border-radius:6px;font-weight:700;cursor:pointer}

/* Slightly larger form controls for touch friendliness */
.form-input, .form-textarea, input.auth-input, select{min-height:44px;padding:0.7rem 0.9rem}

/* Modal content: ensure it fits and scrolls on small viewports */
.auth-modal-content, .auth-box{max-height:calc(100vh - 48px);overflow:auto}

/* Ensure media like images and svgs never overflow the viewport */
img, svg, video, iframe { max-width:100%; height:auto; }

/* Accessible focus state refinement (softer, less saturated accent) */
.action-btn:focus, .auth-button:focus, .form-input:focus{ outline: none; box-shadow: 0 0 0 4px rgba(47,106,127,0.10) }
/* Use focus-visible for keyboard focus rings (accessible and not noisy on mouse clicks) */
.action-btn:focus-visible, .auth-button:focus-visible, .form-input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(47,106,127,0.14); }

/* Pulsing animation for streak changes */
.streak-pulse{ display:inline-block; animation: streakPulse 0.7s cubic-bezier(.2,.8,.2,1); }
@keyframes streakPulse{
  0%{ transform: scale(1); color: var(--accent); }
  40%{ transform: scale(1.18); color: var(--accent-2); }
  100%{ transform: scale(1); color: var(--text); }
}

/* small spinner used on verify page */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Game container */
.game-container{max-width:800px;margin:1.25rem auto;padding:1.5rem;border-radius:12px;position:relative}
.quote-box{padding:2rem;border-radius:2px;background-color:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.03);margin-bottom:1rem}
.quote-text{font-family:'Merriweather', Georgia, serif;font-size:1.45rem;line-height:1.8;color:var(--text);font-weight:400;margin:0}
/* Prevent selection of the quote text to preserve game UX */
.quote-text, .quote-box { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Reveal animation for quote text */
.quote-text.hidden{ opacity:0; transform: translateY(6px); }
.quote-text.reveal-animate{ animation: quoteReveal 420ms cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes quoteReveal{
  0%{ opacity:0; transform: translateY(6px) scale(0.99); }
  60%{ opacity:1; transform: translateY(-4px) scale(1.01); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

.guess-container{display:flex;gap:1rem;justify-content:center;margin-top:1.25rem}
.guess-btn{flex:1;max-width:220px;padding:0.95rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);font-weight:600;cursor:pointer;min-height:48px}

/* Google-style sign-in button matching the site theme but visually consistent
   with Google's brand: white background, G icon on left, dark text. */
.btn-google{ background:#fff; color:#202124; border:1px solid rgba(0,0,0,0.08); display:inline-flex; align-items:center; gap:0.6rem; padding:0.55rem 0.9rem; border-radius:8px; font-weight:600; box-shadow:0 6px 18px rgba(2,6,23,0.06) }
.btn-google .g-icon{ display:inline-block; width:18px; height:18px; flex:0 0 18px }
.btn-google:hover{ box-shadow: 0 12px 30px rgba(2,6,23,0.08); transform: translateY(-1px) }
.btn-google:active{ transform: translateY(0) }
.btn-google span{ line-height:1 }

/* Make Google buttons full-width on small viewports for a clean stacked layout,
   but on wider screens show them inline next to the primary submit button. */
.auth-form .btn-google { display:block; width:100%; margin-top:0.6rem }
@media (min-width:720px) {
  .auth-form .btn-google { display:inline-flex; width:auto; margin-top:0.8rem; margin-left:0.6rem }
}
.guess-btn.correct{background-color:var(--success);color:#04211b}
.guess-btn.incorrect{opacity:0.5}

.timer-bar-container{height:10px;background:rgba(255,255,255,0.02);border-radius:999px;overflow:visible;margin-bottom:0.9rem; position:relative}
.timer-bar{display:block;height:100%;background-color:var(--accent);width:100%;transition:width 1s linear;min-height:6px;box-sizing:border-box}
/* Use rAF updating; avoid CSS transition to keep timer tightly in sync with JS */
.timer-bar{ transition: none; will-change: width; position:relative; overflow:hidden }

/* Sheen overlay for a modern metallic/gloss look */
.timer-bar::after{
  /* Narrower, softer sheen that is clipped to the bar's rounded corners.
     Use translate+skew for smoother motion and avoid a large rectangular
     highlight that can look like a "cylinder" behind the bar. */
  content: '';
  position: absolute; top:0; left:0; height:100%; width:28%;
  background-color: rgba(255,255,255,0.12);
  transform: translateX(-220%) skewX(-12deg);
  transition: none; pointer-events:none; opacity:0.9;
  border-radius: inherit; /* ensure it respects the bar's rounded corners */
  will-change: transform;
  animation: sheen 1600ms linear infinite;
}
@keyframes sheen{ from { transform: translateX(-220%) skewX(-12deg); } to { transform: translateX(220%) skewX(-12deg); } }

/* Danger state: subtle pulsing and color shift */
.timer-bar.timer-danger{ background-color: var(--danger); box-shadow: 0 6px 18px rgba(251,113,133,0.12); }
.timer-bar.timer-danger::after{ background-color: rgba(255,255,255,0.02); }
.timer-bar.timer-danger{ animation: dangerPulse 900ms ease-in-out infinite; }
@keyframes dangerPulse{ 0%{ transform: scaleX(1); } 50%{ transform: scaleX(1.02); } 100%{ transform: scaleX(1); } }

/* Numeric timer text tick animation */
.timer-text{ position:absolute; left:50%; top:-1.2rem; transform:translateX(-50%); font-weight:700; background:transparent; z-index:3; opacity:1; pointer-events:auto; }
.timer-text.tick{ animation: tickPop 260ms cubic-bezier(.2,.9,.2,1); }
@keyframes tickPop{ 0%{ transform:translateX(-50%) scale(1); color:var(--text); } 40%{ transform:translateX(-50%) scale(1.12); color:var(--accent-2); } 100%{ transform:translateX(-50%) scale(1); color:var(--text); } }

@media (prefers-reduced-motion: reduce){
  .timer-bar::after, .timer-bar.timer-danger, .timer-text.tick{ animation: none !important; }
}

/* Respect reduced-motion for additional animations used site-wide */
@media (prefers-reduced-motion: reduce){
  .start-overlay, .next-hint-bottom, .streak-pulse, .update-banner, .timer-bar::after { animation: none !important; transition: none !important; }
}

/* Ensure footer respects safe-area inset and remains visible above home indicators on mobile */
.site-footer{ padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 6px); }

/* Toast */
.site-toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(12px); bottom:calc(env(safe-area-inset-bottom,8px) + 80px); background:rgba(0,0,0,0.8); color:#fff; padding:0.5rem 0.9rem; border-radius:8px; z-index:9000; opacity:0; transition: opacity 220ms ease, transform 220ms ease; pointer-events:none }
.site-toast.visible{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Warning state: subtle amber gradient */
.timer-bar.timer-warning{ background-color: #f59e0b; box-shadow: 0 6px 18px rgba(249,115,22,0.08); }
.timer-bar.timer-warning::after{ opacity:0.6 }
.timer-text.timer-danger{ color: #ffb1bb }
.timer-text.timer-warning{ color: #ffd8a8 }
/* timer-text font-size is set near its primary declaration to avoid accidental overrides */

/* Leaderboard */
.leaderboard-container{max-width:900px;margin:1.25rem auto}
.leaderboard-header{padding:1rem;border-radius:2px 10px 0 0;background-color:var(--accent);color:#052027}
.leaderboard-row{display:grid;grid-template-columns:56px 1fr 90px 90px 90px;padding:0.85rem 1rem;border-bottom:1px solid rgba(255,255,255,0.04);align-items:center}
.leaderboard-row.header-row{font-weight:700;color:var(--muted);background:transparent}

/* Responsive leaderboard: on small screens, show each row as a compact card */
@media (max-width:720px){
  .leaderboard-row{ display:block; padding:0.9rem; border-bottom: none; border-radius:2px; margin-bottom:0.9rem; background-color: rgba(255,255,255,0.01); }
  .leaderboard-row .rank, .leaderboard-row .username, .leaderboard-row .stat{ display:block; width:100%; margin:0.2rem 0 }
  .leaderboard-header{ padding:1rem 0.75rem }
  .leaderboard-container{ padding:0 }
}

/* Start overlay: a centered Start button shown before the round begins. The
   overlay sits above the game content and is removed/hidden when the round
   starts. */
.start-overlay{ position:absolute; left:50%; top:46%; transform:translate(-50%,-54%); z-index:60; display:flex; align-items:center; justify-content:center; pointer-events:auto;
  /* start hidden and animate in for a smooth global entrance on all viewports */
  opacity:0; transition: opacity 320ms cubic-bezier(.2,.9,.2,1), transform 320ms cubic-bezier(.2,.9,.2,1);
}
.start-overlay.visible{ opacity:1; transform:translate(-50%,-50%); }
.start-overlay .action-btn{ padding:1rem 1.25rem; font-size:1.12rem; border-radius:4px; box-shadow: 0 12px 30px rgba(2,6,23,0.18); }
.start-overlay.hide{ opacity:0; transform:translate(-50%,-46%); transition: opacity 280ms ease, transform 280ms ease; pointer-events:none }

/* Subtle attention animation for Start button to draw the eye without being distracting */
@keyframes startPulse{
  0%{ transform: scale(1); box-shadow: 0 12px 30px rgba(2,6,23,0.12); }
  50%{ transform: scale(1.03); box-shadow: 0 18px 40px rgba(2,6,23,0.18); }
  100%{ transform: scale(1); box-shadow: 0 12px 30px rgba(2,6,23,0.12); }
}
.start-overlay .start-btn{ animation: startPulse 2200ms ease-in-out infinite; }
.start-overlay .start-btn:focus{ outline: none; box-shadow: 0 0 0 6px rgba(47,106,127,0.10); }

/* Guess buttons start hidden and animate into view when the round is revealed. */
.guess-container.guess-hidden{ opacity:0; pointer-events:none; transform:translateY(8px); transition: opacity 320ms ease, transform 320ms ease; }
.guess-container.guess-visible{ opacity:1; pointer-events:auto; transform:translateY(0); transition: opacity 320ms ease, transform 320ms ease; }


/* Tighter spacing and clearer columns on medium screens */
@media (max-width:1024px) and (min-width:721px){
  .leaderboard-row{ grid-template-columns:48px 1fr 90px 90px 90px }
}

.leaderboard-container{ padding:1rem; }
/* Leaderboard-specific styles (merged) */
.leaderboard-hero{ display:flex;align-items:center;gap:1rem;padding:1rem 0 }
.leaderboard-hero h1{ margin:0;font-size:1.4rem }
.leaderboard-hero p{ margin:0;color:var(--muted) }
.controls-row{ display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin:1rem 0 }
.player-card{ display:flex;gap:0.75rem;align-items:center;padding:0.85rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03);margin-bottom:0.5rem;background-color: rgba(255,255,255,0.005) }
.player-avatar{ width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background-color:var(--accent);color:#042027 }
.player-meta{ flex:1 }
.player-meta .name{ font-weight:700 }
.stat-number{ font-weight:700 }
.leaderboard-table{ margin-top:0.5rem }
@media(min-width:900px){
  .player-card{ display:grid;grid-template-columns:72px 1fr 70px 90px 90px;align-items:center }
  .player-avatar{ width:72px;height:72px;border-radius:12px }
}
.leaderboard-row .rank{ font-weight:700; }
.leaderboard-row .username{ font-weight:600 }
.leaderboard-row .stat-number{ font-weight:700 }
.leaderboard-row.current-user{ box-shadow: 0 6px 20px rgba(47,106,127,0.05); border:1px solid rgba(47,106,127,0.07); }
.leaderboard-row .username-main{ font-weight:700 }
.stat-label{ font-size:0.75rem; color:var(--muted) }

/* Leaderboard hover and transition polish */
.leaderboard-row{ transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.leaderboard-row:hover{ transform: none; box-shadow: 0 8px 20px rgba(2,6,23,0.12); background: rgba(255,255,255,0.01); }

/* Rank modal reuse of auth-modal styles */
/* rank modal sizing */
.rankModal .auth-modal-content{ max-width:640px; }

/* Forms and small helpers */
.form-input, .form-textarea, input.auth-input, select{width:100%;padding:0.78rem 0.9rem;border-radius:2px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:var(--text);font-size:1rem;line-height:1.4;font-family:Inter,system-ui,Arial;min-height:42px}
select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right:40px}
.form-input:focus, select:focus, .form-textarea:focus{ outline: none; box-shadow: 0 0 0 4px rgba(47,106,127,0.06); border-color: rgba(47,106,127,0.95)}
.action-btn{background-color:var(--accent);color:#052027;padding:0.6rem 1rem;border-radius:8px;border:none;cursor:pointer}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}

.muted{color:var(--muted)}
.mb-1{margin-bottom:1rem}
.mt-1{margin-top:1rem}
.ml-1{margin-left:1rem}
.center-text{text-align:center}
.small-text{font-size:0.85rem}
.input-max-320{max-width:320px}
.dns-row{display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem}
.action-row{display:flex;gap:1rem;margin-top:1.5rem}
.meta-id{font-size:0.8rem}
.link-accent{color:var(--accent)}

/* Ensure generic links use the UI accent rather than default browser blue */
a, a:visited{
  color: var(--accent-2);
}
a:hover{ color: var(--accent); }

/* Nav links remain light text */
.nav-link{ color: var(--text); text-decoration:none }
.nav-link:hover{ color: var(--accent-2); }

@media (max-width:768px){
  .guess-container{flex-direction:column}
  .leaderboard-row{grid-template-columns:1fr 80px 80px}
  .quote-text{font-size:1.12rem}
}

/* Mobile-friendly button styles */
@media (max-width:600px){
  .action-btn{ width:100%; padding:0.9rem 1rem; font-size:1rem; border-radius:2px; display:block }
  .action-btn.btn-secondary{ margin-top:0.5rem }
  .header{ flex-direction:column; align-items:flex-start }
  .header .logo{ margin-bottom:0.4rem }
  .nav { width:100% }
  /* ensure profile header buttons stack cleanly */
  header .header > div:last-child{ width:100%; display:flex; gap:0.5rem; flex-wrap:wrap }
}

/* Simplify header on small screens to keep UI minimal */
@media (max-width:720px){
  .topbar-center{ display:none }
  .nav .nav-link{ display:none }
  .auth-button{ padding:0.6rem 0.8rem }
}

/* Ensure primary action buttons use dark readable text even if generic anchor color set later */
a.action-btn.btn-primary, button.action-btn.btn-primary { color: #042027 !important; }

/* Auth modal primary buttons should use light text for contrast on dark cards */
.auth-modal-content .action-btn.btn-primary, .auth-box .action-btn.btn-primary { color: var(--text) !important; }

/* Ensure buttons inside auth modal have strong contrast: primary buttons and Google button
   use accent background with white text for maximum readability on dark modal backgrounds. */
.auth-modal-content .action-btn.btn-primary, .auth-modal-content .btn-google, .auth-box .action-btn.btn-primary, .auth-box .btn-google {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(47,106,127,0.06);
}
.auth-modal-content .btn-google .g-icon, .auth-box .btn-google .g-icon { filter: none; }

/* Slight black stroke around Google G icon to make it stand out slightly (subtle, not heavy).
   Applies to sign-in / sign-up buttons and anywhere .btn-google is used. */
.btn-google .g-icon { display:inline-block; }

/* Extra mobile readability tweaks */
@media (max-width:480px){
  html, body { font-size: 16px; }
  .card { padding: 1rem; }
  header .logo { font-size: 1.15rem; }
  header h1 { font-size: 1.05rem; }
  .action-btn { font-size: 1.05rem; padding: 0.95rem 1rem; }
  .muted.small-text { font-size: 0.9rem; }
}

/* Cookie banner and modal styles */
.cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:3000; max-width:1100px; margin:0 auto; padding:0.6rem 0.9rem; }
.cookie-banner .cookie-body{ display:flex; align-items:center; gap:0.75rem; justify-content:space-between; flex-wrap:wrap }
.cookie-banner .cookie-desc{ flex:1; min-width:180px }
.cookie-banner .cookie-title{ font-weight:700 }
.cookie-banner .cookie-actions{ display:flex; gap:0.5rem; align-items:center }
.cookie-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:4000; visibility:hidden; opacity:0; transition:opacity 160ms ease; }
.cookie-modal.show{ visibility:visible; opacity:1; }
.cookie-modal .cookie-modal-content{ width:100%; max-width:520px; padding:1rem 1.25rem; border-radius:10px }
.cookie-modal-close{ position:absolute; right:14px; top:8px; background:transparent; border:none; color:var(--text); font-size:1.2rem; cursor:pointer }

.cookie-close{ position:absolute; right:10px; top:8px; background:transparent; border:none; color:var(--text); font-size:1.1rem; cursor:pointer; padding:6px; }
.cookie-close:hover{ background: rgba(255,255,255,0.02); border-radius:6px }

@media (max-width:600px){
  .cookie-banner{ left:8px; right:8px; bottom:8px; padding:0.6rem }
  .cookie-banner .cookie-actions{ width:100%; display:flex; gap:0.5rem; justify-content:stretch; }
  .cookie-banner .cookie-actions .action-btn{ flex:1 }
  .cookie-banner .cookie-desc{ margin-bottom:0.4rem }
}

/* Ensure timer text sits above the bar on small screens */
@media (max-width:720px){
  /* Keep timer text positioned above the bar and preserve spacing so the
     bar remains visible in portrait layouts. Restoring the small top
     padding prevents the bar from being visually clipped by surrounding
     elements on narrow screens. */
  .timer-text { left:50%; top:-1.0rem; transform:translateX(-50%); font-size:1.04rem; }
  .timer-bar-container { padding-top:1.4rem; height:14px }
  .timer-bar{ height:100% }
  /* ensure the bar is visible above overlays */
  /* Raise above local card elements so the bar remains visible in narrow
     viewports. Put it above the header so it can't be visually clipped by
     wrapping topbar content on small screens. Keep it below global banners. */
  .timer-bar-container, .timer-bar { z-index: 1300; }
  /* Ensure numeric timer sits above the bar and nearby elements */
  .timer-text { z-index: 1350; }

  /* On narrow portrait viewports make the timer a fixed, unobtrusive
     overlay below the header so it cannot be clipped by wrapping content.
     Keep it pointer-events:none so it doesn't intercept taps. */
  .timer-bar-container.fixed-top {
    position:fixed !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    /* top is computed at runtime to match header height */
    width: calc(100% - 32px) !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    padding-top:0.6rem !important;
    pointer-events: none !important;
    z-index: 1400 !important;
  }
  .timer-bar-container.fixed-top .timer-bar { pointer-events: none !important; }
}

/* Pill-style compact banner to reduce intrusion while remaining accessible */
.cookie-banner.pill{ max-width:760px; padding:0.5rem 0.6rem; border-radius:999px; box-shadow:0 8px 30px rgba(2,6,23,0.6); display:flex; align-items:center }
.cookie-banner.pill .cookie-desc{ padding-left:0.6rem; padding-right:0.6rem }
.cookie-banner.pill .cookie-title{ font-weight:600; font-size:0.95rem }
.cookie-banner.pill .cookie-actions{ display:flex; gap:0.4rem; align-items:center }
.cookie-banner.pill .action-btn{ min-width:56px; padding:0.45rem 0.6rem; font-size:0.92rem }

@media (max-width:420px){
  .cookie-banner.pill{ left:10px; right:10px; padding:0.6rem; border-radius:12px }
  .cookie-banner.pill .cookie-actions{ width:100%; display:flex; gap:0.5rem }
  .cookie-banner.pill .cookie-actions .action-btn{ flex:1 }
}

/* Ensure the main game area has breathing room so bottom UI (cookie banner / overlays)
   do not obscure key buttons on mobile. This adds safe bottom padding on small screens. */
@media (max-width:720px){
  .game-container{ padding-bottom:120px; }
}

/* Update available banner */
.update-banner{ position:fixed; left:12px; right:12px; top:12px; z-index:4000; max-width:900px; margin:0 auto; padding:0.6rem 0.9rem; border-radius:10px }
.update-banner .update-body{ display:flex; gap:0.6rem; align-items:center; justify-content:space-between }
.update-banner .update-text{ font-weight:700 }
.update-banner .update-actions{ display:flex; gap:0.5rem }
.update-banner .action-btn{ min-width:84px }

@media (max-width:480px){
  .update-banner{ left:8px; right:8px; top:8px }
  .update-banner .update-body{ flex-direction:column; align-items:stretch }
  .update-banner .update-actions{ width:100%; display:flex }
  .update-banner .action-btn{ flex:1 }
}

/* Additional mobile optimizations to reduce clutter and improve tap targets */
@media (max-width:720px){
  .container{ padding-left:0.6rem; padding-right:0.6rem; max-width:100%; }
  .topbar-inner{ flex-wrap:wrap; gap:0.5rem }
  .card{ padding:0.9rem; }
  .quote-text{ font-size:1.12rem; line-height:1.5 }
  .action-btn{ min-height:48px; padding:0.9rem; border-radius:4px }
  .form-input{ padding:0.7rem }
  .guess-btn{ font-size:1rem; padding:0.85rem }
  /* auth modal buttons: full width for clearer mobile tap targets */
  .auth-modal-content .action-btn { width: 100%; display: block; }
}

/* Prefetch indicator styling */
.prefetch-indicator{ font-size:0.85rem; color:var(--muted); margin-left:0.5rem; padding:0.25rem 0.5rem; border-radius:2px; background:rgba(255,255,255,0.02); opacity:0.9 }

/* Password checklist styles */
.pw-checklist{ margin-top:0.5rem; display:flex; flex-direction:column; gap:0.25rem; font-size:0.9rem }
.pw-check-item{ color:var(--muted); display:flex; align-items:center; gap:0.5rem }
.pw-check-item.ok{ color:var(--success); }
.pw-check-mark{ width:18px; display:inline-block; font-weight:700 }

/* admin summary bar */
.admin-summary-bar{ height:100%; background-color:var(--accent); border-radius:2px; }

/* start hint removed: keep UI clean */


/* Password strength meter */
.pw-meter{ display:block; }
.pw-meter-bar{ width:100%; height:8px; background:rgba(255,255,255,0.04); border-radius:2px; overflow:hidden; }
.pw-meter-fill{ height:100%; width:0%; background-color:var(--accent); transition:width 180ms ease, background 180ms ease; }
.pw-meter-text{ margin-top:0.35rem; color: var(--muted); }

.auth-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.7);z-index:1200;padding:2vh 1rem;box-sizing:border-box;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 220ms ease, visibility 220ms ease}
.auth-modal.show{visibility:visible;opacity:1;pointer-events:auto}

body.modal-open{ overflow: hidden; }
.auth-modal-content,.auth-box{width:min(92%,720px);max-width:720px;max-height:calc(100vh - 8vh);background:var(--card);border-radius:12px;padding:calc(1rem + 1vh);box-shadow:0 10px 30px rgba(0,0,0,0.6);box-sizing:border-box;overflow:auto;transform:translateY(0) scale(1);transition:transform 220ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease}
.auth-modal:not(.show) .auth-modal-content{ transform: translateY(-6px) scale(0.992); opacity:0.98 }

/* Small inline spinner used for admin row actions */
.inline-spinner{ display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.12); border-top-color: transparent; box-sizing:border-box; vertical-align:middle; margin-right:0.45rem; animation: spin 720ms linear infinite }
/* Ensure modal content text is readable on the dark card background */
.auth-modal-content, .auth-modal-content * { color: var(--text); }

/* Subtle text stroke/shadow for elements using the primary light text color.
   This improves legibility of light text on dark backgrounds without changing
   typographic weight. The selector targets common elements that use var(--text)
   so it applies consistently across the site (modals, headers, cards, buttons).
   Keep this shadow small so colored text remains visually correct. */
.auth-modal-content, html, body, .header, .quote-text, .guess-btn, .form-input, .btn-secondary, .nav-link, .cookie-modal-close, .cookie-close, .auth-close, .auth-close-btn, .settings-button, #userProfile, .proof-copy, .next-btn, .countdown-number, select, .form-textarea, select option {
  text-shadow: var(--text-stroke);
}
.auth-modal-content .muted { color: var(--muted); }
/* How-to modal tweaks */
#howToPlayModal .auth-modal-content{ max-width:720px }
#howToPlayModal .card{ padding:1rem; background:transparent; border:none }
#howToPlayModal a{ color:var(--accent-2) }
/* Proof modal: ensure long URLs and links wrap and stay inside the modal box
   on narrow viewports. Use overflow-wrap/word-break helpers and constrain
   link width to avoid the anchor overflowing the container. */
#proofModal .auth-modal-content, #proofModal .auth-modal-content * { overflow-wrap: anywhere; word-break: break-word; }
#proofModal .auth-modal-content .source-link a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; color: var(--accent-2); }

@media (max-height:520px) {
  .auth-modal{ align-items:flex-start; padding-top:4vh; }
  .auth-modal-content,.auth-box{ max-height:calc(100vh - 10vh); }
}

footer div{ opacity:0.75 }
footer div:hover{ opacity:1 }

/* User row and quote item styling for admin */
.user-row.card{ background-color: rgba(255,255,255,0.005); border-radius:2px; border:1px solid rgba(255,255,255,0.03); padding:0.6rem; }
.user-row .action-btn{ padding:0.45rem 0.6rem }
.user-row .muted{ color: var(--muted); }

.quote-item{ display:flex; justify-content:space-between; gap:0.75rem; align-items:flex-start; padding:0.85rem; border-radius:2px; background-color: rgba(255,255,255,0.005); border:1px solid rgba(255,255,255,0.03); margin-bottom:0.6rem }
.quote-item .quote-text{ font-size:1rem; line-height:1.45 }
.quote-meta{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap }
.quote-badge{ font-size:0.9rem }
.auth-tabs{display:flex;gap:0.5rem;margin-bottom:1rem}
.auth-tab{flex:1;padding:0.5rem;border-radius:2px;background:transparent;border:1px solid rgba(255,255,255,0.03);cursor:pointer;color: #ffffff;font-weight:600;transition: all 160ms ease}
.auth-tab:hover{ color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2,6,23,0.12) }
.auth-tab.active{background-color:var(--accent);color:#042027;font-weight:700;border-color:transparent;box-shadow:0 12px 34px rgba(32,64,120,0.12);transform: translateY(-2px);border-bottom:3px solid var(--accent-2)}
.auth-button{ /* make header auth button match primary actions */
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color: #042027;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: none;
  font-weight:700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(32,64,120,0.12);
}
.auth-button:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(32,64,120,0.16); }
.auth-form{display:none}
.auth-form.active{display:block}
.auth-submit{margin-top:0.75rem}
.auth-close,.auth-close-btn{position:absolute;right:1rem;top:1rem;background:transparent;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}
.auth-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:2000}
.auth-box{background:var(--card);border:1px solid var(--card-border);padding:2rem;border-radius:12px;max-width:520px}
.auth-error{color:var(--danger);margin-top:0.5rem;display:none}
.auth-error.show{display:block}
/* Success state for auth messages */
.auth-error.auth-success{ color: var(--success) !important; }

/* Settings button */
.settings-button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:0.5rem 0.7rem;border-radius:2px;margin-right:0.5rem;cursor:pointer}
.settings-button:hover{background:rgba(255,255,255,0.02)}
.settings-button.mode-active{ background-color: var(--accent); color:#052027; border:none }

/* Move the settings cog to the far right of the nav by making it absorb remaining space */
#settingsButton{ margin-left: auto }
.action-btn.small{ padding:0.4rem 0.6rem; font-size:0.9rem }

.settings-row{ display:flex; align-items:center; gap:0.5rem }

/* user profile in header */
/* user profile helpers */
#userProfile.hidden{ display:none }
#userProfile{ color:var(--text); }
#usernameDisplay{ font-weight:600 }
#presenceDisplay{ margin-left:0.75rem }

.source-btn{ padding:0.35rem 0.6rem; font-size:0.95rem }

/* Proof modal specific styles */
.proof-title{ font-size:1rem; margin-bottom:0.5rem }
.source-title{ font-weight:700; font-size:1rem; margin-bottom:0.25rem }
.source-link{ margin-bottom:0.5rem }
.source-excerpt{ font-style:italic; color:var(--muted); margin-bottom:0.5rem }
.source-tags{ font-size:0.85rem; color:var(--muted); margin-top:0.5rem }
.source-raw{ color:var(--muted) }
.proof-actions{ display:flex; gap:0.5rem; margin-top:0.75rem }
.proof-copy{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:0.5rem 0.75rem; border-radius:2px; color:var(--text); cursor:pointer }
.proof-open{ background-color:var(--accent); color:#052027; padding:0.5rem 0.75rem; border-radius:2px; border:none; cursor:pointer }
.source-publisher{ font-weight:600; margin-top:0.4rem }
.source-date{ font-size:0.9rem }

/* Result display */
.result-display{margin-top:1rem;display:none;align-items:center;gap:0.75rem}
.result-display.show{display:flex}
.result-icon{font-size:1.5rem}
.result-text{font-weight:700}
.result-explanation{color:var(--muted)}

/* small utilities */
.hidden{display:none !important}
.admin-locked #adminPanel{display:none !important}
.admin-locked .auth-overlay{display:flex !important}
.full-width{width:100%}

/* Enhanced button styles and click-to-next hint */
.guess-btn{
  background-color: var(--accent);
  color: #052027;
  border: none;
  box-shadow: 0 6px 18px rgba(32,64,120,0.15);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.guess-btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(32,64,120,0.18); }
.guess-btn[disabled]{ opacity:0.6; transform:none; box-shadow:none; cursor:default }

.next-hint{ margin-top:0.5rem; opacity:0.9 }

/* When result is shown, make the page indicate clicking will continue */
.next-ready .game-container{ cursor: pointer }
.next-ready .next-btn{ display:none }

/* make next button more obvious on small screens */
.next-btn{ display:none; margin-top:1rem; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:0.8rem 1rem; border-radius:2px }
.next-btn.show{ display:inline-block }

/* Ensure body uses Inter by default and fallbacks */
body{ font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial }

/* Overlay that appears when result is shown */
/* Make proof modal appear above the click-to-continue overlay */
/* Ensure proof modal sits above the next-overlay and most UI elements */
#proofModal.auth-modal{ z-index:4000 !important; }
#proofModal .auth-modal-content{ z-index:4001 !important; }

.next-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-end; /* default: push the overlay towards the bottom (tap-to-continue) */
  justify-content:center;
  pointer-events:none;
  /* raise above most UI so mobile players always see it */
  z-index:5000;
}

/* Countdown overlay: a centered full-screen modal used for the 3..2..1 Go countdown.
   This sits centered and above other overlays so it's clearly visible. */
.countdown-overlay{ position:fixed; inset:0; display:flex !important; align-items:center !important; justify-content:center !important; z-index:4000; pointer-events:none; }
.countdown-number{
  pointer-events:auto;
  background-color: rgba(2,6,23,0.9);
  color: var(--text);
  font-size: 4.8rem;
  font-weight: 800;
  padding: 1.2rem 1.6rem;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.04);
  z-index: 4000;
  text-align: center;
}

@media (max-width:720px){
  .countdown-number{ font-size: 3.6rem; padding: 0.9rem 1.1rem; border-radius: 12px; }
}

/* Screen-reader only utility (no inline styles required) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Confetti position/size/delay classes for CSP-safe particles */
.subtle-confetti{ position:absolute; border-radius:2px; opacity:0.95; pointer-events:none; transform:translateY(0) rotate(0deg); animation: confettiFloat 900ms cubic-bezier(.2,.8,.2,1) forwards; }
.conf-pos-0{ left:10%; top:15%; }
.conf-pos-1{ left:22%; top:18%; }
.conf-pos-2{ left:35%; top:12%; }
.conf-pos-3{ left:48%; top:16%; }
.conf-pos-4{ left:60%; top:14%; }
.conf-pos-5{ left:72%; top:20%; }
.conf-pos-6{ left:25%; top:22%; }
.conf-pos-7{ left:40%; top:20%; }
.conf-pos-8{ left:55%; top:18%; }
.conf-pos-9{ left:68%; top:12%; }
.conf-pos-10{ left:50%; top:10%; }
.conf-pos-11{ left:30%; top:10%; }
.conf-size-s{ width:6px; height:6px; }
.conf-size-m{ width:10px; height:10px; }
.conf-size-l{ width:14px; height:14px; }
.conf-delay-0{ animation-delay:0s }
.conf-delay-1{ animation-delay:0.06s }
.conf-delay-2{ animation-delay:0.12s }
.conf-delay-3{ animation-delay:0.18s }
.conf-delay-4{ animation-delay:0.24s }
.conf-delay-5{ animation-delay:0.3s }

.conf-color-0{ background:var(--accent) }
.conf-color-1{ background:var(--accent-2) }
.conf-color-2{ background:#34d399 }
.conf-color-3{ background:#fbbf24 }
.next-overlay-central{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  background-color:var(--accent);
  color:#042027; padding:1rem 1.4rem; border-radius:14px; font-weight:800; z-index:5100;
  box-shadow:0 18px 50px rgba(2,6,23,0.6); pointer-events:auto; text-align:center; font-size:1.2rem;
}


.next-overlay-central.visible{ opacity:1; transform:translate(-50%,-56%); transition: transform 200ms ease, opacity 160ms ease }

/* Subtle radial attention ripple behind the central CTA (respects reduced-motion) */
.next-overlay-central::after{
  content: '';
  position: absolute;
  left:50%; top:50%; transform: translate(-50%,-50%);
  width: 40px; height:40px; border-radius:50%; background-color: rgba(125,211,252,0.08);
  opacity: 0; z-index: -1; pointer-events:none;
  animation: ripple 1600ms ease-in-out infinite;
}
@keyframes ripple{
  0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.45; }
  60% { transform: translate(-50%,-50%) scale(1.6); opacity: 0.12; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .next-overlay-central::after { animation: none !important; }
}


@keyframes nextPulse{
  0% { transform: translateY(0) scale(1); opacity: 0.98 }
  50% { transform: translateY(-6px) scale(1.02); opacity: 1 }
  100% { transform: translateY(0) scale(1); opacity: 0.98 }
}

@media (prefers-reduced-motion: reduce) {
  .next-overlay-text { animation: none !important; }
  .confetti, .subtle-confetti { animation: none !important; }
}

/* Simple fade-in animation for the overlay text (KISS) */
.next-overlay-text{ opacity:0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.next-overlay-text.visible{ opacity:1; transform: translateY(0); }

.next-overlay-text .action-btn{ margin-top:0.4rem; padding:0.6rem 1rem; font-size:1rem; }

@media (max-width:720px){
  .next-overlay-text .action-btn{ width:100%; max-width:420px; display:block; }

  .next-overlay-text{
    /* compact padding on mobile */
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
    margin-bottom: 0; /* handled by fixed bottom positioning */
  }

  /* Make the main game area scrollable so long quotes don't get smushed */
  .game-container{ max-height: calc(100vh - 120px); overflow:auto; padding-bottom:3rem; display:flex; flex-direction:column; align-items:center; justify-content:center }

  /* Center guess buttons, stack vertically, and make them sleeker */
  .guess-container{ justify-content:center; flex-direction:column; align-items:center; gap:0.5rem }
  .guess-btn{ width:92%; max-width:420px; margin:0; padding:0.76rem 1rem; font-size:1rem; border-radius:2px; box-shadow: 0 6px 18px rgba(2,6,23,0.12); }
  .guess-btn.correct, .guess-btn.incorrect{ box-shadow:none }
}

/* Mobile polish: ensure primary gameplay buttons are centered and tap-to-continue sits flush at the bottom */
@media (max-width:720px){
  /* Keep guess buttons centered, stacked, and large enough for fingers */
  .guess-container{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; width:100%; max-width:520px; margin:0 auto; padding-left:8px; padding-right:8px }
  .guess-container .guess-btn{ width:100% !important; max-width:100%; margin:0.25rem 0; padding:0.95rem 1rem; border-radius:8px; font-size:1rem; flex: none }

  /* Ensure button text is centered and large enough for accessibility */
  .guess-btn{ display:block; text-align:center; font-weight:700 }

  /* Add bottom padding to game container so bottom overlay doesn't obscure buttons */
  .game-container{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }

  /* Ensure quote box fits nicely on small screens and is centered */
  .quote-box{ width:100%; max-width:720px }

  /* Make start/inline continue full width on mobile and centered */
  #startRoundBtn, #inlineContinueBtn { width:100% !important; max-width:420px; display:block; margin: 1rem auto 0 auto }
  /* Ensure start button is centered on larger screens as well (no inline width needed) */
  #startRoundBtn { display:block; margin: 1rem auto 0 auto }

  /* Make the next-overlay text sit fixed at the bottom and centered above safe-area */
  .next-overlay{ position:fixed; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; z-index:2500; }
  .next-overlay-text{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 8px));
    margin:0;
    pointer-events:auto;
    max-width:94%;
    width:auto;
    box-shadow:0 12px 44px rgba(2,6,23,0.6);
    border-radius:14px;
    padding: 0.9rem 1rem;
  }
  .next-overlay-text.visible{ opacity:1; transform:translateX(-50%) translateY(0) }

  /* Ensure auth/modals stay above the tap overlay */
  .auth-modal{ z-index:4000 !important }
  .auth-modal-content{ max-width:720px; width:100%; border-radius:12px 12px 6px 6px }
}

/* Promote the player's score/streak to a persistent mobile overlay in portrait
   This ensures mobile users always see their current and best streaks while
   playing regardless of scrolling or layout. We carefully position it using
   safe-area-inset-top and keep it small and low-contrast to avoid obscuring
   content on tiny devices. */
@media (max-width:900px) and (orientation: portrait) {
  .streaks {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(env(safe-area-inset-top, 8px) + 8px);
    z-index: 6000;
    background: rgba(2,6,23,0.55);
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 30px rgba(2,6,23,0.5);
    font-weight: 700;
    gap: 0.55rem;
    pointer-events: none; /* do not intercept taps */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    min-width: 120px;
    justify-content: center;
  }
  .streaks .stat-label { display:none; }
  .streaks .stat-number { font-weight:800; font-size:1rem }

  /* Make room so the fixed streaks do not obscure the main game area */
  .game-container { padding-top: calc(env(safe-area-inset-top, 8px) + 56px); }
}

/* Highlight the quote when result is shown so the user keeps focus */
.quote-highlight{ box-shadow: 0 14px 40px rgba(47,106,127,0.06), 0 6px 18px rgba(2,6,23,0.6); border-radius:8px; transform: translateZ(0); border:1px solid rgba(47,106,127,0.10); }

/* Footer: keep the footer message single-line and compact on mobile portrait */
.site-footer{ display:flex; gap:0.32rem; justify-content:center; align-items:center; padding:0.45rem 0; font-size:clamp(0.68rem, 3.6vw, 0.95rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-wrap:nowrap }
.site-footer a{ color:var(--muted); text-decoration:underline; white-space:nowrap }
@media (max-width:420px){ .site-footer{ gap:0.12rem; font-size:0.64rem; letter-spacing:-0.28px; padding:0.2rem 4px } }
@media (max-width:360px){ .site-footer{ font-size:0.58rem } }

/* Bottom tap hint styling (small, high-contrast and pulsing) */
.next-hint-bottom{
  position:fixed; left:50%; transform:translateX(-50%);
  /* moved up 25px to avoid overlapping small footers/controls on some phones */
  bottom: calc(env(safe-area-inset-bottom, 8px) + 31px);
  z-index:5200; display:inline-flex; align-items:center; gap:0.5rem;
  background-color: rgba(6,10,16,0.9);
  color:var(--text); padding:0.45rem 0.7rem; border-radius:10px; border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 10px 30px rgba(2,6,23,0.6); font-weight:700; font-size:0.95rem;
  pointer-events:auto; opacity:0; transform:translateX(-50%) translateY(8px);
}
.next-hint-bottom.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
@keyframes hintPulse{ 0%{ transform:translateX(-50%) translateY(0) scale(1); opacity:0.96 } 50%{ transform:translateX(-50%) translateY(-2px) scale(1.03); opacity:1 } 100%{ transform:translateX(-50%) translateY(0) scale(1); opacity:0.96 } }
.next-hint-bottom{ animation: hintPulse 1400ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .next-hint-bottom{ animation:none } }


/* Ensure the streaks pill remains readable across densities and never wraps.
   Keep numbers prominent and labels hidden to limit width, but expose via aria-label. */
@media (max-width:900px) and (orientation: portrait) {
  .streaks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .streaks span { display: inline-block; vertical-align: middle; }
  .streaks strong { font-weight: 800; font-size: 1rem; margin: 0 0.4rem; }
  .streaks .muted { display: none; }
}


/* Extremely small screens adjustments (narrow phones) */
@media (max-width:380px) and (orientation:portrait) {
  .streaks { padding: 0.2rem 0.45rem; font-size: 0.92rem; min-width: 100px }
  .streaks .stat-number { font-size:0.98rem }
  .game-container { padding-top: calc(env(safe-area-inset-top, 6px) + 64px); }
}

/* Tweak for narrower phones (e.g., Samsung Note 10 ~412px width) */
@media (max-width:420px){
  .guess-container{ max-width:420px }
  .guess-btn{ width:100% !important; max-width:420px; padding:1rem 1.1rem; font-size:1.06rem }
  .game-container{ padding-left:0.9rem; padding-right:0.9rem }
}

/* Admin panels: hide panels with .hidden class (used by tab UI) */
.panel.hidden { display: none !important; }

/* Ensure moderation controls are only visible when moderation panel is active */
#moderation-panel .moderation-controls{ display:none; }
#moderation-panel:not(.hidden) .moderation-controls{ display:flex; }

/* Make the Start button slightly greener than the default blue, but keep good contrast
   This targets the specific start button so primary actions elsewhere remain the blue accent */
#startRoundBtn.action-btn.btn-primary {
  background-color: #3dd07a; /* green accent */
  color: #052027 !important;
  box-shadow: 0 8px 28px rgba(29, 161, 117, 0.08);
}
#startRoundBtn.action-btn.btn-primary:hover {
  filter: brightness(0.96);
}

/* Additional small visual refinements for mobile to feel more modern */
@media (max-width:720px){
  .quote-box{ padding:1.1rem; border-radius:2px; }
  .quote-text{ font-size:1.12rem; line-height:1.6; }
  .card{ padding:0.9rem }
  .logo{ font-size:1.05rem }
  .action-btn{ border-radius:2px }
}

/* Countdown overlay styling */
.countdown-number{ font-size:5rem; font-weight:800; color:var(--text); padding:1rem 2rem; border-radius:12px; background:rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.04)}
@keyframes countdownPop {
  0% { transform: scale(0.6); opacity: 0; }
  40% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.countdown-number.cd-anim{ animation: countdownPop 760ms cubic-bezier(.2,.9,.2,1); }

/* subtle pulsing focus style for Start button when presented */
.action-btn.btn-primary:focus{ outline: none; box-shadow: 0 6px 30px rgba(47,106,127,0.12); transform: translateY(-1px); }

/* Global button style tweaks: remove background gradients and use flat colors
   with a subtle text-shadow to improve legibility on colored buttons. This
   overrides previous gradient-based accents while keeping other visual
   treatments (shadows, sizes) intact. */
.action-btn{ background-image:none !important; background-repeat:no-repeat !important; text-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.action-btn.btn-primary{ background-color: #34d399 !important; color: #042027 !important; border: none !important; box-shadow: 0 8px 28px rgba(52,211,153,0.10); }
.action-btn.btn-primary:hover{ filter: brightness(0.98); }
.action-btn.btn-secondary{ background-color: rgba(255,255,255,0.04) !important; color: var(--text) !important; border: none !important; box-shadow: none; }
.action-btn.btn-google{ background-color: #4285f4 !important; color: #fff !important; text-shadow: 0 1px 0 rgba(0,0,0,0.2); }

/* Ensure the prominent Start button is a solid green (no gradient) */
#startRoundBtn.action-btn.btn-primary{ background-image:none !important; background-color:#16a34a !important; color:#ffffff !important; box-shadow: 0 12px 30px rgba(22,163,74,0.12); }
#startRoundBtn.action-btn.btn-primary:hover{ filter: brightness(0.98); }


/* Ensure select dropdowns and options are legible on dark theme */
select, .form-input, .form-textarea { color: var(--text); }
select, .form-input { background: rgba(255,255,255,0.02); }
select option { color: var(--text); background: var(--card); }

/* Improve dropdown legibility across browsers */
select { -webkit-text-fill-color: var(--text); }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--text); }

/* Correct animation: subtle glow/pulse */
.quote-box.correct-animate{
  animation: correctPulse 1.1s ease;
  box-shadow: 0 20px 60px rgba(56,189,248,0.08), inset 0 0 40px rgba(52,211,153,0.06);
}
@keyframes correctPulse{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}

/* Incorrect animation: small horizontal shake */
.quote-box.incorrect-animate{ animation: shakeX .6s ease; }
@keyframes shakeX{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* Subtle confetti particle styles */
.subtle-confetti{
  position: absolute;
  border-radius: 2px;
  opacity: 0.95;
  pointer-events: none;
  transform: translateY(0) rotate(0deg);
  animation: confettiFloat 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* Quote source visibility control */
.quote-source.hidden{ display:none !important }
@keyframes confettiFloat{
  0%{ opacity:1; transform: translateY(0) rotate(0deg) scale(1); }
  60%{ opacity:0.9; transform: translateY(-22px) rotate(45deg) scale(1.05); }
  100%{ opacity:0; transform: translateY(-54px) rotate(120deg) scale(0.9); }
}

/* Enforce squarer buttons globally to match requested UI */
.action-btn, .guess-btn, .auth-button, button.action-btn, .action-btn.btn-primary, .action-btn.btn-secondary, .proof-open, .proof-copy, .settings-button, .next-btn {
  border-radius: 2px !important;
}

/* Small persistent brand badge to show site ownership (desktop & mobile) */
/* brand-badge removed per owner request; branding remains in footer only */

/* Site footer (ownership & contact) */
.site-footer{ display:flex; gap:0.4rem; justify-content:center; align-items:center; padding:8px 8px; color:var(--muted); font-size:0.88rem; white-space:nowrap; flex-wrap:nowrap }
.site-footer a{ color:var(--muted); text-decoration:underline; white-space:nowrap }

/* Cookie banner style to match site theme (small, subtle) */
.cookie-banner{ box-shadow: 0 10px 30px rgba(2,6,23,0.6); padding:0.6rem; background-color: rgba(255,255,255,0.02); transition: transform 220ms ease, opacity 220ms ease; }
.cookie-banner.card{ border-radius:8px; }