/* =========================================================
   VARIABLES & THEME
========================================================= */

:root {
  --green: #34d399;
  --purple: #8b5cf6;
  --purple-light: #a78bfa;
  --bg: #050807;
  --surface: #0b1210;
  --surface2: #101916;
  --border: rgba(52,211,153,.18);
  --text: #eafff7;
  --muted: rgba(234,255,247,.68);
  --font: Inter, system-ui, sans-serif;
  --radius-sm: 4px;
  --content-w: 800px;
}


/* =========================================================
   GLOBAL RESET & BASE
========================================================= */

*{
  box-sizing:border-box;
}

html{
  margin:0;
  padding:0;
  background:#060b0f;
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  position:relative;
  background:#080e13;
  color:var(--text);
  font-family:var(--font);
  overflow-x:clip;
}

body.bk-page{
  min-width:0;
  background:#080e13;
}

/* Purple glow (same as all pages) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background:
        radial-gradient(ellipse 45% 30% at 50% 50%,
            rgba(52,211,153,.12),
            rgba(139,92,246,.08) 60%,
            transparent 100%);
}

/* =========================================================
   THREE-COLUMN PAGE LAYOUT
========================================================= */

.page-wrapper{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  max-width:1700px;
  min-width:0;
  margin:0 auto;
  padding:0 clamp(8px,1.5vw,16px);
  overflow:visible;
}

#central-column{
  flex:1 1 var(--content-w);
  width:100%;
  max-width:var(--content-w);
  min-width:0;
  margin:0 auto;
  overflow:visible;
}

.game-content{
  width:100%;
  max-width:var(--content-w);
  min-width:0;
  margin:0 auto;
  overflow:visible;
}

#left-side,
#right-side{
  min-width:0;
}


/* =========================================================
   TITLE
========================================================= */

.main-title{
  text-align:center;
  font-family:var(--font);
  font-size:clamp(2.9rem,5vw,4rem);
  font-weight:900;
  margin:4px 0;
  line-height:1.12;
  letter-spacing:-.045em;
  background:linear-gradient(135deg,#fff 0%,#eafff7 38%,var(--green) 70%,var(--purple) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* =========================================================
   SUBTITLE
========================================================= */

.subtitle{
  text-align:center;
  margin:0 0 28px;
  color:var(--muted);
  font-size:1.25rem;
  font-weight:300;
  line-height:1.5;
}


/* =========================================================
   STAGES
========================================================= */

.stage{
  display:none;
  width:100%;
  min-width:0;
}

.stage.active{
  display:block;
}


/* =========================================================
   LEVEL TABS
========================================================= */

.level-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  width:min(650px,100%);
  margin:0 auto 24px;
}

.level-tab{
  min-width:0;
  padding:9px 4px;
  border:1px solid rgba(52,211,153,.22);
  border-radius:8px;
  background:rgba(11,31,23,.72);
  color:rgba(234,255,247,.62);
  font:500 1rem var(--font);
  cursor:pointer;
  white-space:nowrap;
}

.level-tab.active{
  color:var(--green);
  border-color:var(--green);
  background:rgba(11,31,23,.9);
  box-shadow:0 0 16px rgba(52,211,153,.12);
}

.level-tab.locked{
  opacity:.9;
  cursor:not-allowed;
}

.level-lock{
  display:inline-block;
  margin-right:4px;
  font-size:1em;
}


/* =========================================================
   AUDIO TOGGLE
========================================================= */

.audio-toggle-btn{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(52,211,153,.24);
  border-radius:50%;
  background:#0b1f17;
  color:var(--green);
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 14px rgba(52,211,153,.1);
  z-index:3;
}

.audio-toggle-btn:hover{
  border-color:var(--green);
  box-shadow:0 0 18px rgba(52,211,153,.2);
}


/* =========================================================
   INTRO / INSTRUCTIONS
========================================================= */

.intro-section{
  text-align:left;
  margin:0 0 18px;
}

.intro{
  width:100%;
  max-width:var(--content-w);
  margin:0 0 18px;
  text-align:center;
  color:rgba(234,255,247,.84);
  font-size:.95rem;
  line-height:1.6;
  font-weight:300;
}

.game-instruction-row{
  position:relative;
  width:min(650px,100%);
  margin:10px auto 50px;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.game-note{
  margin:3px auto 0;
  text-align:center;
  color:rgba(234,255,247,.72);
  font-size:.84rem;
}


/* =========================================================
   CTA
========================================================= */

.cta-section{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 36px;
  min-width:190px;
  margin-top:25px;
  font:500 1rem var(--font);
  letter-spacing:.03em;
  color:var(--green);
  background:#0b1f17;
  border:1.5px solid var(--green);
  border-radius:9px;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(45,212,191,.18);
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.cta-button:hover{
  transform:translateY(-2px);
  background:#102a20;
  box-shadow:0 7px 25px rgba(45,212,191,.28);
}

.cta-button:active{
  transform:translateY(0);
}


/* =========================================================
   GAME STATS
========================================================= */

.recall-stats{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  width:min(650px,100%);
  margin:0 auto 18px;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(11,18,16,.88);
}

.recall-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.recall-stat:last-child{
  text-align:right;
}

.recall-label{
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(234,255,247,.46);
}

.recall-number{
  font-size:2rem;
  font-weight:700;
  line-height:1;
}

.score-number{
  color:var(--green);
}

.level-name-pill{
  padding:7px 11px;
  border:1px solid rgba(52,211,153,.28);
  border-radius:999px;
  color:var(--green);
  font-size:.9rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}


/* =========================================================
   RESULT CARD
========================================================= */

.result-card{
  width:min(var(--content-w),100%);
  margin:0 auto;
  padding:32px;
  border:1px solid rgba(52,211,153,.28);
  border-radius:20px;
  background:linear-gradient(
    145deg,
    rgba(14,25,21,.98),
    rgba(7,13,11,.98)
  );
}

.result-card-top{
  text-align:center;
}

.accuracy-heading{
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:.09em;
  color:var(--green);
}

.accuracy-heading.not-perfect{
  color:var(--purple-light);
}

.accuracy-number{
  margin:10px 0 0;
  font-size:clamp(5.5rem,13vw,8rem);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.065em;
  color:var(--green);
}

.accuracy-number.not-perfect{
  color:var(--purple-light);
}

.result-spacer{
  height:58px;
}


/* =========================================================
   COMPARISON
========================================================= */

.compare-heading{
  text-align:center;
  margin:0;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  letter-spacing:.075em;
  line-height:1.15;
}

.compare-subtitle{
  text-align:center;
  margin:9px 0 25px;
  color:var(--muted);
  font-size:1rem;
}

.comparison-bars{
  width:100%;
  max-width:650px;
  margin:0 auto;
}

.comparison-row{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 55px;
  align-items:center;
  gap:12px;
  margin:16px 0;
}

.comparison-label{
  text-align:right;
  color:rgba(234,255,247,.72);
  font-size:.84rem;
  font-weight:600;
}

.comparison-value{
  color:var(--text);
  font-size:.84rem;
  font-weight:700;
}

.comparison-track{
  height:25px;
  border-radius:999px;
  background:rgba(255,255,255,.065);
  overflow:hidden;
}

.comparison-fill{
  height:100%;
  width:0;
  border-radius:999px;
  transition:width 1s cubic-bezier(.22,1,.36,1);
}

.you-fill{
  background:linear-gradient(90deg,#087f55,#34d399,#a7f3d0);
}

.average-fill{
  background:linear-gradient(90deg,#4c1d95,#8b5cf6,#c4b5fd);
}

.result-bottom{
  margin-top:36px;
  text-align:center;
}


/* =========================================================
   LEGEND MEDAL
========================================================= */

.legend-medal{
  display:none;
  position:relative;
  z-index:100;
  text-align:center;
  margin:20px auto;
}

.legend-medal.show{
  display:block;
}

.legend-medal-icon{
  font-size:100px;
  line-height:1;
}

.legend-medal-text{
  margin-top:12px;
  font-size:17px;
  font-weight:500;
  letter-spacing:2px;
}


/* =========================================================
   WHY BOX
========================================================= */

.why-box{
  width:100%;
  max-width:100%;
  margin-top:36px;
  padding:22px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--green);
  border-radius:12px;
  overflow-wrap:anywhere;
}

.why-box h3{
  margin:0 0 12px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
}

.why-box p{
  margin:0;
  font-size:.95rem;
  font-weight:200;
  line-height:1.72;
  color:var(--text);
}


/* =========================================================
   INFO CARDS (2-COLUMN)
========================================================= */

.info-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:20px;
  width:100%;
}

.info-card{
  padding:22px 22px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}

.info-card h3{
  margin:0 0 14px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
}

.info-card ul{
  list-style:none;
  padding-left:0;
  margin:0;
}

.info-card li{
  font-size:.90rem;
  font-weight:200;
  line-height:1.5;
  color:var(--muted);
  position:relative;
  padding-left:12px;
}

.info-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
}


/* =========================================================
   P.S. NOTE
========================================================= */

.ps-note{
  width:100%;
  margin-top:24px;
  padding:18px 22px;
  background:rgba(139,92,246,.08);
  border-left:3px solid var(--purple);
  border-radius:6px;
  font-size:.92rem;
  font-weight:200;
  line-height:1.6;
  color:var(--text);
}

.ps-note strong{
  color:var(--text);
  font-weight:700;
}


/* =========================================================
   RESPONSIVE — SHARED RULES
========================================================= */

.game-content,
.stage,
.level-tabs,
.recall-stats,
.result-card,
.why-box,
.ps-note{
  min-width:0;
  max-width:100%;
}

button,
input,
textarea,
select{
  max-width:100%;
}

img,
svg,
video{
  max-width:100%;
  height:auto;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(max-width:1400px){
  .page-wrapper{
    padding-left:12px;
    padding-right:12px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){
  .page-wrapper{
    padding-left:10px;
    padding-right:10px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

  .page-wrapper{
    padding-left:12px;
    padding-right:12px;
  }

  .main-title{
    font-size:clamp(2.25rem,10vw,3rem);
  }

  .subtitle{
    font-size:1.05rem;
    margin-bottom:22px;
  }

  .level-tabs{
    gap:4px;
    margin-bottom:19px;
  }

  .level-tab{
    font-size:.59rem;
    padding:8px 2px;
  }

  .intro{
    font-size:.9rem;
  }

  .cta-button{
    margin-top:20px;
    padding:15px 30px;
    min-width:185px;
  }

  .audio-toggle-btn{
    width:34px;
    height:34px;
    font-size:.9rem;
  }
}


/* =========================================================
   SMALL PHONE — 400px
========================================================= */

@media(max-width:400px){

  .page-wrapper{
    padding-left:9px;
    padding-right:9px;
  }

  .main-title{
    font-size:2.1rem;
  }

  .subtitle{
    font-size:.92rem;
    margin-bottom:18px;
  }

  .level-tabs{
    gap:3px;
  }

  .level-tab{
    font-size:.52rem;
    padding:7px 1px;
  }

  .intro{
    font-size:.87rem;
  }

  .cta-button{
    padding:14px 24px;
    min-width:170px;
    font-size:.92rem;
  }

  .audio-toggle-btn{
    width:32px;
    height:32px;
  }
}


/* =========================================================
   EXTRA SMALL PHONE — 360px
========================================================= */

@media(max-width:360px){

  .page-wrapper{
    padding-left:7px;
    padding-right:7px;
  }

  .main-title{
    font-size:1.9rem;
  }

  .subtitle{
    font-size:.86rem;
  }

  .level-tab{
    font-size:.48rem;
  }
}


/* =========================================================
   AD VARIABLES — DEFAULT = WIDE DESKTOP (1500px AND UP)
   Two 300x600 side ads
========================================================= */

:root {
    --ad-gap: 32px;
    --side-w: 300px;
    --side-h: 600px;
}


/* =========================================================
   AD COLUMNS — LEFT AND RIGHT SIDEBARS
   Gap between content and ads is controlled by --ad-gap
========================================================= */

.page-wrapper {
    gap: var(--ad-gap);
}

#left-side,
#right-side {
    flex: 0 0 var(--side-w);
    width: var(--side-w);
    align-self: stretch;
}


/* =========================================================
   .ad-container — STICKY SIDE AD BOX
   Min-height reserves space so the box never collapses.
========================================================= */

.ad-container {
    position: sticky;
    top: 24px;
    width: var(--side-w);
    min-height: var(--side-h);
}

.ad-container ins.adsbygoogle {
    display: block;
    width: var(--side-w);
    min-height: var(--side-h);
    overflow: hidden;
}


/* =========================================================
   .mobile-ad — INLINE AD BOX
   Hidden on desktop. Reserves height so the page
   does not jump when the ad loads.
========================================================= */

.mobile-ad {
    display: none;
    min-height: 250px;
    margin: 28px auto;
    text-align: center;
    overflow: hidden;
}

.mobile-ad ins.adsbygoogle {
    display: block;
}


/* =========================================================
   AD BOX LOOK — SHOWS EVEN WHEN THERE IS NO AD YET
   Thin crisp line + soft shadow. The line is drawn with
   box-shadow, so it adds no width and never squeezes the ad.
========================================================= */

.ad-container,
.mobile-ad {
    background: rgba(10, 17, 22, .78);
    border-radius: var(--radius-sm);
    box-shadow:
        0 0 0 1px var(--border),
        0 10px 40px rgba(0, 0, 0, .40),
        inset 0 1px 0 rgba(234, 255, 247, .04);
}


/* =========================================================
   LAPTOP — 1200px TO 1499px
   Two 160x600 side ads, 24px gap
========================================================= */

@media (max-width: 1499px) {
    :root {
        --ad-gap: 24px;
        --side-w: 160px;
    }
}


/* =========================================================
   SMALL LAPTOP — 1080px TO 1199px
   Two 120x600 side ads, 16px gap
========================================================= */

@media (max-width: 1199px) {
    :root {
        --ad-gap: 16px;
        --side-w: 120px;
    }
}


/* =========================================================
   TABLET AND PHONES — UNDER 1080px
   Side ads hidden. Inline ad shown.
========================================================= */

@media (max-width: 1079px) {
    #left-side,
    #right-side {
        display: none;
    }

    .mobile-ad {
        display: block;
    }
}


/* =========================================================
   VERY SMALL PHONE — 380px AND BELOW
========================================================= */

@media (max-width: 380px) {
    .mobile-ad {
        min-height: 200px;
    }
}


/* =========================================================
   SHORT SCREENS — HEIGHT 720px OR LESS
   A 600px sticky ad would not fit, so it scrolls normally
========================================================= */

@media (max-height: 720px) {
    .ad-container {
        position: static;
    }
}