/* Home page header bar */
.home-header {
  /* width will use the CSS variable defined on :root */
  width: var(--page-content-width);
  background:
    /* slightly darker, richer blue glass effect */
    radial-gradient(ellipse at 18% 30%, rgba(12,110,220,0.36) 0%, rgba(12,110,220,0.14) 18%, transparent 42%),
    radial-gradient(ellipse at 75% 68%, rgba(6,78,170,0.28) 0%, rgba(6,78,170,0.10) 22%, transparent 50%),
    linear-gradient(120deg, rgba(6,18,40,0.94) 0%, rgba(12,30,60,0.90) 100%);
  background-repeat: no-repeat;
  background-size: 120% 120%, 140% 140%, cover;
  background-position: center;
  background-blend-mode: screen, overlay, normal;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 2px solid #fff;
  height: 64px;
  box-sizing: border-box;
  margin: 0 auto;
  /* make the header fixed at the top and span the full viewport width */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  transform: none;
  /* ensure header sits above modals/overlays (gtpOverlay uses z-index: 99999+) */
  z-index: 210000;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When a page includes the fixed header, push its main wrap down so content isn't hidden */
body.with-fixed-header .wrap {
  padding-top: calc(var(--spacing-unit) * 10); /* ~80px (header height + breathing room) */
}

/* Add space below header for main content */
/* Move content up closer to header */
.with-header {
  margin-top: 16px !important;
}

/* Homepage: ensure the centered main content sits below the fixed header
   with adequate breathing room so boxes never underlap the header */
.index-bg .centered.with-header {
  padding-top: 92px; /* header (64px) + extra 28px gap */
}

/* Generic: ensure pages that use .with-fixed-header have content pushed below the fixed header */
body.with-fixed-header .content-wrapper,
body.with-fixed-header main,
body.with-fixed-header .centered,
body.with-fixed-header .scoreline-area,
body.with-fixed-header .wrap { padding-top: 92px; }

/* Centered logo in the header */
.header-logo {
  display: block;
  /* Make the logo 3x bigger relative to previous 20px height => 60px */
  /* scale 1.7x from the current 60px => 102px */
  max-height: 102px !important;
  height: 102px !important;
  width: auto !important;
  max-width: 174px !important;
  margin: 0 auto;
  object-fit: contain;
  pointer-events: auto; /* allow clicks when wrapped in a link */
  transition: transform .18s ease;
  /* nudge the logo down slightly without affecting layout */
  transform: translateY(6px);
}

/* Make the logo itself a clickable home link with a subtle hover scale */
.header-home-link{display:block;margin:0 auto}
.header-home-link:focus{outline: none}
.header-home-link .header-logo{
  /* preserve the baseline translateY while allowing scale on hover */
  transform: translateY(6px);
}
.header-home-link:hover .header-logo,
.header-home-link:focus .header-logo{
  transform: translateY(6px) scale(1.06);
}

/* Right-side clickable banner image in header */
.banner-home-link{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  z-index: 2; /* above header background but below ad columns */
}
.banner-home-img{
  display:block;
  max-height: 40px;
  width: auto;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
  pointer-events: auto;
}
.banner-home-link:hover .banner-home-img,
.banner-home-link:focus .banner-home-img{
  /* subtle grow on hover only (no glow) */
  transform: scale(1.06);
}

@media(max-width:980px){
  .banner-home-img{ max-height: 32px }
  .banner-home-link{ right: 10px }
}

/* (Old .site-footer block removed — superseded by the tenaball-style
   .site-footer rules further down. Kept here as an anchor comment so
   future edits know that the footer styling lives further down.) */
:root{
  --bg: #0f172a;
  --card: #0b1220;
  --accent: #e11d48;
  --lime: #a3e635;
  --text: #f8fafc;
  --top-banner-height: 88px;
  /* Responsive centered content width used by header/footer and layout */
    /* make the centered banner a bit wider on large viewports so the side
      black panels take up less width; increase max so banner can extend
      further on very wide screens */
    /* reduce the centered content width so side black panels grow slightly wider */
    --page-content-width: clamp(480px, calc(100vw - 320px), 1600px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:linear-gradient(180deg,var(--bg),#071029);color:var(--text);-webkit-font-smoothing:antialiased}

/* Top banner shown only when `has-banner` class is present on body */
body.has-banner::before{
  content: "You Know Ball?";
  position:fixed;
  left:0;right:0;top:0;height:var(--top-banner-height);
  background:#071029; /* dark to match theme */
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  font-weight:700;letter-spacing:0.6px;z-index:9999;font-size:20px;box-sizing:border-box;
  border-bottom:4px solid #ffd66b;
}

/* Banner overlays content; do not add padding so pages keep original height */
/* If needed, individual pages can add top spacing via a page-specific class */

/* index2-style page header: small logo at top + subtle divider below.
   Used on game pages so each one has consistent branding without the heavy
   fixed top bar that used to span the viewport. */
.page-header {
  /* Absolute (not fixed) so it sits at the top of the page and scrolls
     out of view with the rest of the content. Body has position: relative
     so the header anchors to the document, not the viewport. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 0;
  z-index: 200;
  pointer-events: none;
}
.page-header > * { pointer-events: auto; }

/* Reserve space at the top so the absolutely-positioned page-header doesn't
   overlap the centred content beneath it. Values must be >= rendered header
   height (logo + 12px top padding + 12+2+14 divider stack). */
body:has(> .page-header) {
  position: relative;
  padding-top: 144px;
  /* When body uses flex centering and content is taller than the available
     area, `safe center` prevents items from overflowing above into the header.
     Apply to both axes so flex-column game pages also stay below the header. */
  align-items: safe center;
  justify-content: safe center;
}
@media (max-width: 720px) {
  body:has(> .page-header) {
    padding-top: 120px;
  }
}
@media (max-width: 480px) {
  body:has(> .page-header) {
    padding-top: 104px;
  }
}
.page-header a.page-home-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
.page-header .page-logo {
  display: block;
  height: clamp(56px, 9vw, 88px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 30px rgba(10, 132, 255, 0.15))
          drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
  cursor: pointer;
}
.page-header .page-logo:hover { transform: scale(1.06); }
.page-divider {
  width: clamp(40px, 6vw, 60px);
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  margin: 12px auto 14px;
}
@media (max-width: 480px) {
  .page-header { padding: 10px 12px 0; }
  .page-header .page-logo { height: 56px; }
  .page-divider { margin: 10px auto 12px; }
}

/* Index page background image. Place your image at `images/background1.jpg` (or .png).
  Add the `index-bg` class to the body on the index page to enable. */
.index-bg{background:var(--bg);min-height:100vh}
.centered{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
/* Apply the same dynamic left/right padding to the common `.wrap` container
  so pages using `.wrap` (e.g. guess-the-player) get the same side-panel
  behavior as the index page. The +16px is the breathing room used on index. */
.wrap{padding-left: calc((100vw - var(--page-content-width)) / 2 + 16px); padding-right: calc((100vw - var(--page-content-width)) / 2 + 16px)}
.title{font-size:32px;margin:0 0 20px;text-align:center;letter-spacing:0.5px}
.title.small{font-size:20px;margin-bottom:12px}
.game-card{display:inline-block;text-decoration:none;color:inherit}
.game-card{position:relative}
.game-card-inner{width:140px;height:180px;background:rgba(255,255,255,0.03);border-radius:12px;display:flex;flex-direction:column;align-items:center;padding:12px 6px;box-shadow:0 8px 22px rgba(2,6,23,.6);transition:box-shadow .18s ease,border-color .18s ease,background-color .12s ease,transform .18s ease;border:2px solid rgba(255,255,255,0.12)}
.game-card-inner:hover,.game-card-inner:focus{
  /* subtle white glow, slight lift and scale on hover; use only a white shadow (no border change) */
  box-shadow: 0 22px 48px rgba(2,6,23,0.72), 0 12px 36px rgba(255,255,255,0.08);
  outline: none;
  background-color: #000;
  transform: translateY(-3px) scale(1.06);
}
.game-label{font-weight:700;font-size:12px;text-align:center;padding:6px 8px;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

.game-icon-img{width:64px;height:auto;display:block;margin:auto 0 6px;opacity:0.9;transition:transform .12s ease,opacity .12s ease}

/* Use provided connect4 background and make it cover the full card */
#connect4Card .game-card-inner{
  background-image: url('../images/connect4back2.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .18s ease, box-shadow .18s ease, background-color .12s ease;
  transform-origin: center center;
  will-change: transform;
}

/* Use provided You know ball. background and make it cover the full card */
#gameCard .game-card-inner{
  background-image: url('../images/501back.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* connect4 uses the global hover style; no separate hover transform needed */

/* Larger icon for Archery card */
#archeryCard .game-icon-img{width:96px;height:auto}

/* Make the Connect 4 (connectfutbol) image slightly smaller than before */
#connect4Card .game-icon-img{width:112px;height:auto;margin:auto 0 6px;transition:transform .18s ease}

/* Jump animation for the connectfutbol image when hovering the full card */
@keyframes connect-jump{
  0%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
  50%{transform:translateY(-4px)}
  70%{transform:translateY(-1px)}
  100%{transform:translateY(0)}
}

/* Trigger the jump when the user hovers the connect4 card area (more subtle) */
#connect4Card .game-card-inner:hover .game-icon-img{
  animation:connect-jump .32s cubic-bezier(.2,.8,.2,1);
}

/* Use provided archery board background and make it cover the full card */
#archeryCard .game-card-inner{
  background-image: url('../images/archeryback.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided scoreline background and make it cover the full card */
#coming4 .game-card-inner{
  background-image: url('../images/scorelineback.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided Higher Or Lower background and make it cover the full card */
#coming1 .game-card-inner{
  background-image: url('../images/horl.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided imposter background and make it cover the full card */
#imposterCard .game-card-inner{
  background-image: url('../images/imposter.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided guess-the-player background and make it cover the full card */
/* legacy guessCard image (kept for other placements) */
#guessCard .game-card-inner{
  background-image: url('../images/guesstheplayer.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

/* Add guessback background to the Guess the Player homepage card (id=coming6) */
#coming6 .game-card-inner{
  background-image: url('../images/guessback.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided panic background and make it cover the full card */
#coming3 .game-card-inner{
  background-image: url('../images/panicback.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided Tenaball background and make it cover the full card */
#tenaballCard .game-card-inner{
  background-image: url('../images/tenaball.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Use provided ladder background and make it cover the full card */
#coming2 .game-card-inner{
  background-image: url('../images/ladderback.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

#coming2 .game-card-inner:hover{
  background-image: url('../images/soonback.png');
}

/* Use provided blackjack background and make it cover the full card */
#coming5 .game-card-inner{
  background-image: url('../images/blackjackback.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

#coming5 .game-card-inner:hover{
  background-image: url('../images/soonback.png');
}

.games-row{display:grid;grid-template-columns:repeat(4,140px);column-gap:8px;row-gap:12px;justify-content:center;align-items:start}
@media(max-width:720px){.games-row{grid-template-columns:repeat(2,140px);column-gap:8px;row-gap:10px}}



/* Left and right ad columns - removed (user requested full-width header) */
.ad-left,.ad-right{display:none !important}
@media(max-width:980px){.ad-left,.ad-right{display:none}}

/* Add padding so main content doesn't overlap the ads */
.index-bg .centered{padding-left: calc((100vw - var(--page-content-width)) / 2 + 16px); padding-right: calc((100vw - var(--page-content-width)) / 2 + 16px)}
@media(max-width:980px){.index-bg .centered{padding-left:24px;padding-right:24px}}

/* Flippable panels for Football Imposter */
.imposter-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:16px;max-width:720px;margin:28px auto;padding:8px}
/* Ensure the grid stays hidden when the `hidden` attribute is used. Author styles
  can override the browser's default [hidden] UA rule, so explicitly hide here. */
.imposter-grid[hidden]{display:none}

/* Single-card step-through container */
.imposter-single{max-width:620px;margin:18px auto;display:flex;align-items:center;justify-content:center;padding:8px}
.imposter-single[hidden]{display:none}
.imposter-single .flip-card{width:100%;max-width:560px;height:360px}
.imposter-single .flip-inner{padding-top:0;min-height:0;height:100%}
.imposter-single .flip-card{border:6px solid rgba(255,255,255,0.28);box-shadow:0 36px 90px rgba(0,0,0,0.72);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.1));z-index:60}
.imposter-single .flip-front,.imposter-single .flip-back{font-size:32px;font-weight:800}
.imposter-single .flip-front{background:#ffffff;color:#071029}
.imposter-single .flip-back{background:#f3f4f6;color:#071029}
.imposter-single .flip-front{letter-spacing:1px}
.imposter-single .flip-card{box-shadow:0 18px 40px rgba(0,0,0,0.6);border-color:rgba(255,255,255,0.18)}
@media(min-width:900px){
  .imposter-grid.cols-3{grid-template-columns:repeat(3,minmax(140px,1fr))}
}
.flip-card{perspective:1000px;cursor:pointer;display:block;border:3px solid rgba(255,255,255,0.12);border-radius:10px;overflow:hidden}
.flip-inner{position:relative;width:100%;padding-top:100%;transition:transform .6s;transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:10px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;background:var(--card);box-shadow:none;color:var(--text);padding:12px;font-weight:700;font-size:15px}
.flip-front{background:rgba(255,255,255,0.02)}
.flip-back{transform:rotateY(180deg);background:rgba(255,255,255,0.04)}
.flip-card:hover,
.flip-card:focus{border-color:rgba(255,255,255,0.22)}
.flip-card:focus{outline:2px solid rgba(163,230,53,0.12)}
.primary{background:var(--accent);color:white;border:0;padding:14px 20px;border-radius:12px;font-size:18px;cursor:pointer;box-shadow:0 6px 18px rgba(225,29,72,.14);width:100%;max-width:360px}
.primary:active{transform:translateY(1px)}
.text-input{width:100%;max-width:360px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);font-size:16px}
.link{display:inline-block;margin-top:14px;color:rgba(255,255,255,0.6);text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Setup page styles */
.setup-page{padding:40px}
.setup-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:14px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04);display:flex;flex-direction:column;gap:18px;align-items:center}
.setup-card .title{margin:0;font-size:26px}
.setup-card .lead{color:rgba(255,255,255,0.7);text-align:center;margin:0 0 6px}
.form-row{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center}
.label{font-weight:700;color:rgba(255,255,255,0.85)}
.select{width:120px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,#03132a,#071930);color:#ffffff;font-size:16px;font-weight:400;appearance:none;-webkit-appearance:none;-moz-appearance:none}
/* Browser option styling is limited; many native dropdowns ignore option backgrounds.
  We set option colors and provide focus/active styles as a best-effort to keep
  the control dark-blue when opened. For full control, replace with a custom
  dropdown component. */
.select option{color:#ffffff;background:linear-gradient(180deg,#03132a,#071930);font-weight:400}
.select:focus{background:linear-gradient(180deg,#03132a,#071930);color:#ffffff;outline:2px solid rgba(255,255,255,0.04)}
.select::-ms-expand{display:none}

/* Custom select component (replaces native select for consistent styling) */
.custom-select{position:relative;width:120px}
.custom-select-toggle{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,#03132a,#071930);color:#ffffff;font-size:16px;font-weight:400;text-align:left;cursor:pointer}
.custom-select-toggle:focus{outline:2px solid rgba(255,255,255,0.04)}
.custom-select-list{position:absolute;left:0;right:0;top:calc(100% + 8px);background:linear-gradient(180deg,#03132a,#071930);border-radius:10px;padding:8px 0;box-shadow:0 10px 30px rgba(2,6,23,0.6);max-height:220px;overflow:auto;display:none;z-index:80}
.custom-select-list[aria-hidden="false"],.custom-select.open .custom-select-list{display:block}
.custom-select-list li{list-style:none;padding:10px 12px;color:#ffffff;cursor:pointer;font-weight:400}
.custom-select-list li[aria-selected="true"]{background:rgba(255,255,255,0.03);font-weight:700}
.custom-select-list li:hover{background:rgba(255,255,255,0.04)}
.play-btn{width:100%;padding:12px 18px;border-radius:12px;background:linear-gradient(180deg,#ffb86b,#ff9800);color:#071029;font-weight:800;border:0;box-shadow:0 10px 30px rgba(255,152,0,0.12)}
.play-btn:active{transform:translateY(1px)}
.search-wrapper{position:relative;width:100%;max-width:360px}
.results{list-style:none;margin:6px 0 0;padding:0;position:absolute;left:0;right:0;background:var(--card);border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,.6);max-height:260px;overflow:auto;z-index:40}
/* Archery dropdown specific styling */
#archeryResults{background:#03132a;border-radius:10px;padding:6px;box-shadow:0 6px 20px rgba(2,6,23,.6)}
#archeryResults .item{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;border-radius:6px;margin:6px 4px;text-align:center;color:var(--text);font-weight:600}
#archeryResults .item:hover{background:#000000;border:2px solid #ffffff}
#archeryResults .item.focused{background:#000000;border:2px solid #ffffff}
#archeryResults .item.hovered{background:#000000;border:2px solid #ffffff}
.selected-list{margin-top:16px;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;max-width:360px}
.selected-item{background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:8px;width:100%;text-align:center}
.player-points{float:right;color:rgba(255,255,255,0.6);font-weight:600}
.search-status{margin-top:8px;color:rgba(255,255,255,0.6);font-size:14px;min-height:18px}
.game-status{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.score-panel,.attempts-panel{background:rgba(255,255,255,0.02);padding:10px 14px;border-radius:10px;text-align:center;min-width:90px}
.score-panel div:first-child,.attempts-panel div:first-child{font-size:12px;color:rgba(255,255,255,0.6)}
.score-value{font-size:22px;font-weight:700}
.score-value.win{color:#a3e635}
@media(min-width:720px){
  .centered{padding:40px}
  .title{font-size:40px}
  .primary{font-size:20px}
}

/* Small inline spinner for loading states */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.15);border-top-color:var(--text);border-radius:50%;display:inline-block;vertical-align:middle;margin-right:8px;animation:spin 1s linear infinite}
/* Popup images for win/loss boxes */
.popup-img {
  width: 88px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.9;
  padding-bottom: 12px;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Higher Or Lower flashes */
.correct{box-shadow:0 0 0 4px rgba(163,230,53,0.28);outline:2px solid rgba(163,230,53,0.6);transition:box-shadow .18s ease,outline .18s ease}
.wrong{box-shadow:0 0 0 4px rgba(225,29,72,0.18);outline:2px solid rgba(225,29,72,0.6);transition:box-shadow .18s ease,outline .18s ease}

/* Stronger, inward (inset) flash specifically for the player boxes (.hol-small) */
.hol-small{transition:box-shadow .18s ease,border-color .12s ease,transform .08s ease}
.hol-small.correct{animation:hol-correct-flash .6s ease forwards}
.hol-small.wrong{animation:hol-wrong-flash .6s ease forwards}

/* Small shake animation used for 'coming soon' cards when clicked */
@keyframes shake {
  0% { transform: translateX(0) rotate(0deg); }
  12% { transform: translateX(-3px) rotate(-0.5deg); }
  28% { transform: translateX(3px) rotate(0.5deg); }
  44% { transform: translateX(-2px) rotate(-0.25deg); }
  60% { transform: translateX(2px) rotate(0.25deg); }
  80% { transform: translateX(-1px) rotate(-0.15deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.game-card-inner.shake{
  animation: shake 0.5s cubic-bezier(.2,.8,.2,1);
}

@keyframes hol-correct-flash{
  0%{
    box-shadow:0 8px 30px rgba(2,6,23,0.6), inset 0 0 0 0 rgba(163,230,53,0);
    border-color:rgba(255,255,255,0.95);
  }
  30%{
    box-shadow:0 10px 36px rgba(2,6,23,0.7), inset 0 0 0 10px rgba(163,230,53,0.95);
    border-color:rgba(163,230,53,0.95);
    transform:scale(1.01);
  }
  100%{
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
    border-color:rgba(255,255,255,0.95);
    transform:scale(1);
  }
}

@keyframes hol-wrong-flash{
  0%{
    box-shadow:0 8px 30px rgba(2,6,23,0.6), inset 0 0 0 0 rgba(225,29,72,0);
    border-color:rgba(255,255,255,0.95);
  }
  30%{
    box-shadow:0 10px 36px rgba(2,6,23,0.7), inset 0 0 0 10px rgba(225,29,72,0.95);
    border-color:rgba(225,29,72,0.95);
    transform:scale(1.01);
  }
  100%{
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
    border-color:rgba(255,255,255,0.95);
    transform:scale(1);
  }
}
.btn-loading{opacity:0.9}

/* Centered placeholder box for imposter page */
.center-box{width:320px;max-width:90vw;height:220px;background:#ffffff;color:#071029;display:flex;align-items:center;justify-content:center;border-radius:12px;box-shadow:0 20px 60px rgba(2,6,23,0.6);font-weight:700;font-size:22px}

/* Center flip card overrides */
#centerBox{width:420px;max-width:90vw;aspect-ratio:1/1;border-radius:12px;overflow:hidden}
#centerBox .flip-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
#centerBox.flipped .flip-inner{transform:rotateY(180deg)}
#centerBox .flip-front,#centerBox .flip-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;font-size:28px;font-weight:800}
#centerBox .flip-front{background:#0b1220;color:#f8fafc}
#centerBox .flip-back{background:#071029;color:#f8fafc;transform:rotateY(180deg)}

/* Finish state */
.center-finish{font-size:28px;color:#f8fafc;background:#071029;padding:20px;border-radius:10px}
/* Imposter label style */
.imposter-label{color:#ff6b6b;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.done-btn{margin-top:18px;background:#facc15;color:#071029;border:0;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,0.25)}

/* Prevent card from shifting when action appears */
.card-wrap{display:flex;flex-direction:column;align-items:center}
.action-area{height:56px;margin-top:16px;display:flex;align-items:center;justify-content:center}
.action-area .done-btn{margin-top:0}

/* Strong overrides for the single-card flow to avoid inheritance conflicts */
.imposter-single .flip-inner{height:100% !important;width:100% !important;padding-top:0 !important;position:relative !important}
.imposter-single .flip-front,.imposter-single .flip-back{position:absolute !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:12px !important;border-radius:10px !important;backface-visibility:hidden !important}
.imposter-single .flip-front{background:#ffffff !important;color:#071029 !important;font-size:32px !important}
.imposter-single .flip-back{background:#f3f4f6 !important;color:#071029 !important;font-size:28px !important;transform:rotateY(180deg) !important}
.imposter-single .flip-card.flipped .flip-inner{transform:rotateY(180deg) !important}

/* ============================================================
   Shared site footer (used on home + game pages)
   Absolute-positioned at the bottom of the body so it doesn't
   participate in flex-centred layouts. Hosts ambient glow,
   gradient brand mark, three social pills and copyright.
   ============================================================ */
/* Site footer was removed app-wide. The previous body:has(> .site-footer)
   rules used to reserve a tall padding-bottom for the footer here; deleted
   since no page has a footer anymore. */

.site-footer {
  position: absolute;
  /* explicit `top: auto` so the footer height is content-driven even when
     the body is a flex column (otherwise some browsers compute a hypothetical
     `top` from flex placement and stretch the absolute element vertically). */
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px 20px;
  pointer-events: auto;
  z-index: 0;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(680px, 92%);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 80%,
    rgba(10, 132, 255, 0.10) 0%,
    rgba(10, 132, 255, 0.04) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.site-footer-divider {
  width: min(540px, 86%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(10, 132, 255, 0.20) 25%,
    rgba(10, 132, 255, 0.55) 50%,
    rgba(10, 132, 255, 0.20) 75%,
    transparent 100%);
  box-shadow: 0 0 18px rgba(10, 132, 255, 0.22);
  margin-bottom: 18px;
}
.site-footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
}
.site-footer-mark {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.60) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 28px rgba(10, 132, 255, 0.22);
  line-height: 1.1;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
}
.site-footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-footer-social:hover,
.site-footer-social:focus-visible {
  color: #fff;
  background: linear-gradient(180deg,
    rgba(10, 132, 255, 0.28) 0%,
    rgba(10, 132, 255, 0.12) 100%);
  border-color: rgba(10, 132, 255, 0.65);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 132, 255, 0.35),
              0 0 0 4px rgba(10, 132, 255, 0.10);
  outline: none;
}
.site-footer-social[aria-disabled="true"] {
  cursor: default;
  opacity: 0.45;
}
.site-footer-social[aria-disabled="true"]:hover,
.site-footer-social[aria-disabled="true"]:focus-visible {
  transform: none;
  color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.site-footer-social svg {
  width: 15px;
  height: 15px;
  display: block;
}
.site-footer-meta {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
@media (max-width: 720px) {
  .site-footer { padding: 0 14px 16px; }
  .site-footer-divider { margin-bottom: 14px; }
  .site-footer-content { gap: 10px; }
  .site-footer-mark { font-size: 14px; }
  .site-footer-social { width: 30px; height: 30px; }
  .site-footer-social svg { width: 13px; height: 13px; }
  .site-footer-meta { font-size: 8px; letter-spacing: 0.9px; }
}