:root{
  --ink:#1d2140;
  --ink-soft:#5a607d;
  --violet:#6f65e8;
  --violet-2:#8f83ff;
  --cyan:#3ec8d6;
  --pink:#f58cc8;
  --gold:#f4c34f;
  --mint:#69d8a8;
  --danger:#ef6b6b;
  --paper:rgba(255,255,255,.88);
  --paper-strong:#fff;
  --line:rgba(92,83,193,.14);
  --shadow:0 24px 80px rgba(49,44,109,.16);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial, "Segoe UI", system-ui, sans-serif;color:var(--ink)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 10%,rgba(245,140,200,.28),transparent 27rem),
    radial-gradient(circle at 88% 10%,rgba(62,200,214,.28),transparent 24rem),
    linear-gradient(160deg,#fff7fc 0%,#f4fbff 48%,#f8f5ff 100%);
  overflow-x:hidden;
}
button{font:inherit}
button:focus-visible{outline:4px solid rgba(111,101,232,.25);outline-offset:3px}
.aurora{position:fixed;filter:blur(48px);opacity:.32;pointer-events:none;border-radius:999px;z-index:-1}
.aurora-a{width:32rem;height:32rem;background:linear-gradient(135deg,var(--pink),var(--violet));left:-11rem;top:18rem}
.aurora-b{width:28rem;height:28rem;background:linear-gradient(135deg,var(--cyan),#8df0cc);right:-10rem;top:5rem}

.site-header{
  width:min(1120px,calc(100% - 28px));margin:18px auto 0;display:flex;align-items:center;justify-content:space-between;
}
.brand{
  border:0;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);display:flex;align-items:center;gap:10px;
  border-radius:18px;padding:7px 12px;color:var(--ink);font-weight:700;box-shadow:0 10px 30px rgba(73,66,141,.09);cursor:pointer
}
.brand img{height:50px;width:auto;display:block}
.header-actions{display:flex;gap:8px}
.ghost-pill{border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--ink);border-radius:999px;padding:9px 15px;font-weight:700;cursor:pointer}

.app-shell{width:min(1040px,calc(100% - 28px));margin:28px auto 42px}
.hero{
  position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:38px;padding:36px;min-height:420px;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:28px
}
.hero-copy h1{font-size:clamp(2.6rem,7vw,5.1rem);line-height:.95;margin:0 0 18px;letter-spacing:-.055em}
.hero-copy p{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.6;color:var(--ink-soft);max-width:38rem;margin:0 0 26px}
.hero-art{display:grid;place-items:center;min-height:300px}
.hero-art img{width:min(100%,390px);filter:drop-shadow(0 26px 30px rgba(77,66,150,.16));animation:floaty 3.2s ease-in-out infinite}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.primary,.secondary,.answer,.number-card,.mode-card{
  border:0;border-radius:22px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease
}
.primary:hover,.secondary:hover,.answer:hover,.number-card:hover,.mode-card:hover{transform:translateY(-2px)}
.primary{
  color:white;background:linear-gradient(135deg,var(--violet),#8377ff);font-weight:700;padding:15px 22px;box-shadow:0 12px 28px rgba(111,101,232,.24)
}
.secondary{
  color:var(--ink);background:white;border:1px solid var(--line);font-weight:700;padding:15px 22px
}

.section-title{text-align:center;margin:10px 0 26px}
.section-title h2{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 8px;letter-spacing:-.04em}
.section-title p{color:var(--ink-soft);margin:0;font-size:1.05rem}

.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.game-card{
  border-radius:30px;padding:26px;min-height:280px;border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 50px rgba(53,47,115,.12);
  background:rgba(255,255,255,.86);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative
}
.game-card.math{background:linear-gradient(150deg,#fff,rgba(230,226,255,.92))}
.game-card.pong{background:linear-gradient(150deg,#fff,rgba(218,250,255,.92))}
.game-card h3{font-size:1.6rem;margin:0 0 8px}.game-card p{margin:0;color:var(--ink-soft);line-height:1.55}
.menu-illustration{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.menu-illustration img{width:122px;max-width:40%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(91,81,185,.13))}
.menu-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--line);font-weight:700}

.panel{
  background:var(--paper);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);border-radius:34px;padding:26px;
}
.back-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.back-btn{border:0;background:#fff;border-radius:999px;width:46px;height:46px;font-size:1.35rem;box-shadow:0 8px 24px rgba(60,55,125,.11);cursor:pointer;color:var(--ink)}
.progress-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink-soft);font-weight:700}

.number-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:720px;margin:0 auto}
.number-card{
  min-height:150px;background:linear-gradient(145deg,#7067e7,#8d82ff);color:white;font-size:2.2rem;font-weight:700;
  box-shadow:0 15px 26px rgba(101,91,220,.2)
}

.learn-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px;align-items:stretch}
.table-card{
  background:#211f35;color:white;border-radius:28px;padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.table-card h3{margin:0 0 16px;text-align:center}
.table-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.table-row{padding:8px 11px;background:rgba(255,255,255,.06);border-radius:12px;text-align:center;font-weight:700;font-size:1.08rem;direction:ltr}
.mode-stack{display:flex;flex-direction:column;gap:14px;justify-content:center}
.mode-card{
  min-height:116px;padding:20px;text-align:start;background:#fff;border:1px solid var(--line);box-shadow:0 12px 35px rgba(56,50,120,.09);display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center
}
.mode-card img{width:100px;justify-self:end;filter:drop-shadow(0 12px 15px rgba(91,81,185,.12))}
.mode-card strong{display:block;font-size:1.4rem;margin-bottom:6px}.mode-card span{color:var(--ink-soft)}
.mode-card.multiply{border-inline-start:8px solid var(--violet)}
.mode-card.divide{border-inline-start:8px solid var(--cyan)}

.quiz-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;max-width:580px;margin:0 auto 30px}
.counter{text-align:center;padding:14px 12px;background:#fff;border-radius:18px;border:1px solid var(--line)}
.counter strong{display:block;font-size:2rem}.counter.good strong{color:#2caf72}.counter.bad strong{color:var(--danger)}
.quiz-question{
  text-align:center;font-size:clamp(2.8rem,10vw,5.8rem);font-weight:700;margin:44px 0 30px;letter-spacing:-.04em
}
.quiz-equation{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}
.quiz-mascot{
  width:min(100%,150px);display:block;margin:0 auto 6px;filter:drop-shadow(0 12px 18px rgba(91,81,185,.12))
}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px;margin:0 auto}
.answer{
  min-height:118px;font-size:2rem;font-weight:700;color:white;background:linear-gradient(145deg,#5c55cc,#7269e8);box-shadow:0 14px 30px rgba(80,70,190,.18)
}
.answer.correct{background:linear-gradient(145deg,#2fb87a,#6ed7a3)}
.answer.wrong{background:linear-gradient(145deg,#e35c67,#ff8585)}
.answer.dimmed{filter:saturate(.45);opacity:.65}
.answer:disabled{cursor:default;transform:none}

.result-card{text-align:center;padding:38px 20px}
.result-mascot{width:170px;margin:0 auto 10px;display:block}
.result-score{font-size:clamp(4rem,12vw,7.5rem);font-weight:700;letter-spacing:-.06em;margin:0;color:var(--violet)}
.result-card h2{font-size:2rem;margin:0 0 8px}.result-card p{color:var(--ink-soft);margin:0 auto 26px;max-width:34rem}

.pong-wrap{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.canvas-card{background:#171728;border-radius:30px;padding:14px;box-shadow:var(--shadow)}
#pongCanvas{display:block;width:100%;aspect-ratio:16/10;border-radius:20px;background:radial-gradient(circle at 50% 50%,#29284d,#11111f);touch-action:none}
.pong-side{display:flex;flex-direction:column;gap:12px}
.pong-side .scorebox{background:#fff;border-radius:24px;padding:20px;text-align:center;border:1px solid var(--line)}
.scoreline{display:flex;justify-content:center;gap:22px;font-size:2rem;font-weight:700}
.help{color:var(--ink-soft);font-size:.95rem;line-height:1.5}
.pong-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#fff;padding:8px 12px;border:1px solid var(--line);font-weight:700}
.pong-art{width:100%;max-height:170px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(73,66,141,.15))}
.small-note{font-size:.88rem;color:var(--ink-soft)}

.feedback-layer{
  position:fixed;inset:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;z-index:20
}
.feedback-layer img{
  position:absolute;bottom:-220px;opacity:0;will-change:transform,opacity
}
.feedback-layer.show-success img{
  width:min(34vw,240px);
  animation:successArc 1.75s cubic-bezier(.24,.73,.26,1) forwards;
}
.feedback-layer.show-fail img{
  width:min(30vw,190px);
  animation:failPop 2s ease forwards;
}
.feedback-bubble{
  position:absolute;bottom:30px;background:rgba(29,33,64,.88);color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;opacity:0
}
.feedback-layer.show-fail .feedback-bubble{animation:bubbleIn 2s ease forwards}
.feedback-layer.show-success .feedback-bubble{animation:bubbleIn 1.75s ease forwards}

.site-footer{width:min(1040px,calc(100% - 28px));margin:0 auto 26px;color:var(--ink-soft);display:flex;justify-content:center;gap:9px;font-size:.9rem}

@keyframes floaty{
  0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}
}
@keyframes successArc{
  0%{transform:translateY(0) translateX(0) rotate(-4deg) scale(.82);opacity:0}
  10%{opacity:1}
  40%{transform:translateY(-58dvh) translateX(-22px) rotate(-5deg) scale(1)}
  55%{transform:translateY(-62dvh) translateX(18px) rotate(2deg) scale(1.05)}
  70%{transform:translateY(-53dvh) translateX(24px) rotate(6deg) scale(.98)}
  100%{transform:translateY(0) translateX(34px) rotate(10deg) scale(.88);opacity:0}
}
@keyframes failPop{
  0%{transform:translateY(0) scale(.84);opacity:0}
  12%{opacity:1}
  22%{transform:translateY(-28px) scale(1)}
  34%{transform:translateY(-22px) translateX(-4px) rotate(-1deg)}
  46%{transform:translateY(-22px) translateX(5px) rotate(1deg)}
  58%{transform:translateY(-22px) translateX(-4px) rotate(-1deg)}
  70%{transform:translateY(-20px) translateX(4px) rotate(1deg)}
  100%{transform:translateY(0) scale(.92);opacity:0}
}
@keyframes bubbleIn{
  0%,100%{opacity:0;transform:translateY(10px)}
  16%,80%{opacity:1;transform:translateY(0)}
}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:24px;border-radius:28px}.hero-art{order:-1;min-height:200px}.hero-art img{width:220px}
  .game-grid{grid-template-columns:1fr}
  .learn-layout{grid-template-columns:1fr}.table-list{grid-template-columns:1fr 1fr}
  .number-card{min-height:110px}.number-grid{gap:10px}
  .pong-wrap{grid-template-columns:1fr}
  .quiz-question{margin:30px 0 22px}
}
@media (max-width:480px){
  .app-shell{width:min(100% - 18px,1040px);margin-top:18px}.site-header{width:calc(100% - 18px);margin-top:9px}
  .panel{padding:18px;border-radius:26px}.number-card{min-height:92px;font-size:1.8rem}
  .answer{min-height:96px;font-size:1.7rem}.table-list{grid-template-columns:1fr 1fr;font-size:.9rem}
  .mode-card{grid-template-columns:1fr 82px}.mode-card img{width:78px}
  .menu-illustration img{width:94px}
}


/* ===== Mobile polish: Android + iPhone ===== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:#f8f5ff;
}
body{
  min-height:100dvh;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
button{
  min-height:44px;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
.site-header{
  padding-top:max(0px,env(safe-area-inset-top));
}
.site-footer{
  padding-bottom:max(4px,env(safe-area-inset-bottom));
}
.app-shell{
  min-height:calc(100dvh - 150px);
}
.panel,.hero{
  overflow:hidden;
}
.quiz-equation,.table-row{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}
.answer,.number-card,.mode-card,.primary,.secondary{
  -webkit-tap-highlight-color:transparent;
}
.feedback-layer{
  padding-bottom:env(safe-area-inset-bottom);
}

/* Phone portrait */
@media (max-width:600px){
  .site-header{
    margin-top:6px;
  }
  .brand{
    border-radius:15px;
    padding:5px 9px;
  }
  .brand img{
    height:42px;
  }
  .ghost-pill{
    min-width:48px;
    padding:8px 12px;
  }

  .app-shell{
    width:calc(100% - 14px);
    margin:12px auto 24px;
    min-height:calc(100dvh - 122px);
  }
  .hero,.panel{
    border-radius:24px;
    padding:16px;
  }
  .hero{
    min-height:auto;
    gap:10px;
  }
  .hero-copy h1{
    font-size:clamp(2.2rem,13vw,3.6rem);
    line-height:1;
  }
  .hero-copy p{
    font-size:1rem;
    line-height:1.45;
  }
  .hero-art{
    min-height:145px;
  }
  .hero-art img{
    width:min(50vw,190px);
  }

  .section-title{
    margin:2px 0 16px;
  }
  .section-title h2{
    font-size:clamp(1.7rem,8vw,2.35rem);
  }
  .section-title p{
    font-size:.95rem;
  }

  .number-grid{
    gap:8px;
  }
  .number-card{
    min-height:82px;
    border-radius:18px;
    font-size:1.55rem;
  }

  .back-row{
    margin-bottom:12px;
  }
  .back-btn{
    width:44px;
    height:44px;
  }
  .progress-chip{
    font-size:.82rem;
    padding:7px 10px;
  }

  .learn-layout{
    gap:14px;
  }
  .table-card{
    padding:15px;
    border-radius:20px;
  }
  .table-list{
    gap:6px 8px;
  }
  .table-row{
    padding:7px 5px;
    font-size:.93rem;
  }
  .mode-stack{
    gap:10px;
  }
  .mode-card{
    min-height:88px;
    border-radius:18px;
    padding:13px;
    grid-template-columns:1fr 68px;
  }
  .mode-card img{
    width:64px;
  }
  .mode-card strong{
    font-size:1.08rem;
  }
  .mode-card span{
    font-size:.88rem;
  }

  .quiz-top{
    margin-bottom:12px;
    gap:6px;
  }
  .counter{
    padding:9px 7px;
    border-radius:14px;
    font-size:.82rem;
  }
  .counter strong{
    font-size:1.45rem;
  }
  .quiz-mascot{
    width:92px;
    margin-bottom:0;
  }
  .quiz-question{
    margin:18px 0 18px;
    font-size:clamp(2.5rem,15vw,4.4rem);
    line-height:1;
  }
  .answers{
    gap:10px;
  }
  .answer{
    min-height:86px;
    border-radius:18px;
    font-size:1.55rem;
  }

  .result-card{
    padding:24px 14px;
  }
  .result-mascot{
    width:130px;
  }
  .result-score{
    font-size:clamp(4rem,22vw,6rem);
  }
  .result-card .actions{
    flex-direction:column;
    align-items:stretch;
  }
  .result-card .actions button{
    width:100%;
  }

  .game-card{
    min-height:225px;
    border-radius:22px;
    padding:18px;
  }
  .menu-illustration{
    margin-bottom:10px;
  }
  .menu-illustration img{
    width:88px;
  }

  .pong-wrap{
    gap:12px;
  }
  .canvas-card{
    padding:8px;
    border-radius:20px;
  }
  #pongCanvas{
    aspect-ratio:4/3;
    border-radius:15px;
    max-height:52dvh;
  }
  .pong-side{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .pong-side .scorebox{
    padding:12px;
    border-radius:16px;
  }
  .pong-side .help{
    grid-column:1/-1;
  }
  .pong-side .primary{
    grid-column:1/-1;
  }
  .pong-art{
    max-height:92px;
  }
  .scoreline{
    font-size:1.55rem;
    gap:12px;
  }

  .site-footer{
    margin-bottom:8px;
    font-size:.78rem;
  }

  .feedback-layer.show-success img{
    width:min(58vw,220px);
  }
  .feedback-layer.show-fail img{
    width:min(48vw,170px);
  }
}

/* Very small phones */
@media (max-width:380px){
  .number-card{
    min-height:72px;
    font-size:1.4rem;
  }
  .answers{
    gap:8px;
  }
  .answer{
    min-height:78px;
  }
  .quiz-question{
    font-size:2.7rem;
  }
  .table-row{
    font-size:.84rem;
  }
}

/* Phone landscape: keep useful content above browser chrome */
@media (max-height:520px) and (orientation:landscape){
  .site-header{
    margin-top:4px;
  }
  .brand img{
    height:34px;
  }
  .app-shell{
    margin-top:6px;
  }
  .hero{
    grid-template-columns:1.1fr .9fr;
    padding:14px 18px;
  }
  .hero-art{
    order:initial;
    min-height:120px;
  }
  .hero-art img{
    width:135px;
  }
  .quiz-mascot{
    display:none;
  }
  .quiz-question{
    margin:8px 0 12px;
    font-size:2.8rem;
  }
  .answer{
    min-height:62px;
  }
  .quiz-top{
    margin-bottom:4px;
  }
  .panel{
    padding:12px 16px;
  }
}

/* Desktop/tablet hover only — avoids sticky hover on touch devices */
@media (hover:none){
  .primary:hover,.secondary:hover,.answer:hover,.number-card:hover,.mode-card:hover{
    transform:none;
  }
}


/* ===== Persistent locale-aware header ===== */
.site-header{
  position:fixed;
  z-index:50;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1120px,calc(100% - 28px));
  padding-top:max(10px,env(safe-area-inset-top));
  margin:0 auto;
  pointer-events:none;
}
.site-header .brand,
.site-header .header-actions{
  pointer-events:auto;
}

/* dir=rtl naturally puts the first flex item (logo) on the right;
   dir=ltr puts it on the left. */
html[dir="rtl"] .site-header{direction:rtl}
html[dir="ltr"] .site-header{direction:ltr}

.app-shell{
  margin-top:104px;
}

/* Arithmetic is always LTR, independently of interface language. */
.quiz-equation,
.table-row,
.number-card,
.answer,
.result-score,
.scoreline{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}

@media (max-width:600px){
  .site-header{
    width:calc(100% - 14px);
    padding-top:max(6px,env(safe-area-inset-top));
  }
  .app-shell{
    margin-top:86px;
  }
}

@media (max-height:520px) and (orientation:landscape){
  .site-header{
    padding-top:max(2px,env(safe-area-inset-top));
  }
  .app-shell{
    margin-top:66px;
  }
}


/* ===== v5 polish: explicit failure flow, better success arcs, ping-pong art ===== */
.game-card .actions{
  margin-top:22px;
}

.next-wrap{
  display:flex;
  justify-content:center;
  min-height:64px;
  margin-top:18px;
}
.next-btn{
  border:0;
  min-width:170px;
  min-height:50px;
  padding:12px 28px;
  border-radius:999px;
  background:linear-gradient(135deg,#49b8ff,#6688f5);
  color:white;
  font-weight:700;
  font-size:1.05rem;
  box-shadow:0 12px 28px rgba(73,150,236,.26);
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.next-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.next-btn[hidden]{display:none}

.feedback-layer.show-success img{
  opacity:0;
  bottom:-240px;
  animation-duration:1.85s;
  animation-timing-function:cubic-bezier(.2,.68,.25,1);
  animation-fill-mode:forwards;
}
.feedback-layer.show-success.success-left img{
  animation-name:successArcLeft;
}
.feedback-layer.show-success.success-right img{
  animation-name:successArcRight;
}
.feedback-layer.show-success.success-vertical img{
  animation-name:successVertical;
}
.feedback-layer.show-success .feedback-bubble{
  animation:bubbleIn 1.85s ease forwards;
}

@keyframes successArcLeft{
  0%{transform:translate(-34vw,0) rotate(-10deg) scale(.82);opacity:0}
  8%{opacity:1}
  46%{transform:translate(-8vw,-67dvh) rotate(-4deg) scale(1.04);opacity:1}
  62%{transform:translate(4vw,-61dvh) rotate(3deg) scale(1.03);opacity:1}
  82%{transform:translate(18vw,-26dvh) rotate(8deg) scale(.98);opacity:1}
  94%{transform:translate(28vw,-7dvh) rotate(12deg) scale(.92);opacity:.98}
  100%{transform:translate(34vw,0) rotate(14deg) scale(.88);opacity:0}
}
@keyframes successArcRight{
  0%{transform:translate(34vw,0) scaleX(-1) rotate(-10deg) scale(.82);opacity:0}
  8%{opacity:1}
  46%{transform:translate(8vw,-67dvh) scaleX(-1) rotate(-4deg) scale(1.04);opacity:1}
  62%{transform:translate(-4vw,-61dvh) scaleX(-1) rotate(3deg) scale(1.03);opacity:1}
  82%{transform:translate(-18vw,-26dvh) scaleX(-1) rotate(8deg) scale(.98);opacity:1}
  94%{transform:translate(-28vw,-7dvh) scaleX(-1) rotate(12deg) scale(.92);opacity:.98}
  100%{transform:translate(-34vw,0) scaleX(-1) rotate(14deg) scale(.88);opacity:0}
}
@keyframes successVertical{
  0%{transform:translateY(0) scale(.82);opacity:0}
  8%{opacity:1}
  46%{transform:translateY(-68dvh) scale(1.05);opacity:1}
  62%{transform:translateY(-61dvh) scale(1.04);opacity:1}
  82%{transform:translateY(-27dvh) scale(.99);opacity:1}
  94%{transform:translateY(-7dvh) scale(.93);opacity:.98}
  100%{transform:translateY(0) scale(.88);opacity:0}
}

/* The failure response is now an in-place mascot animation, not a second mascot rising from below. */
.feedback-layer.show-fail{display:none}

/* Ping-pong-specific artwork */
.game-card.pong .menu-illustration img{
  width:150px;
  max-width:46%;
}
.pong-art{
  max-height:205px;
}

/* Fit the main experience inside a normal desktop viewport without vertical scrolling. */
@media (min-width:901px) and (min-height:720px){
  html,body{
    height:100%;
    overflow-y:hidden;
  }
  body{
    display:flex;
    flex-direction:column;
  }
  .site-header{
    flex:0 0 auto;
  }
  .app-shell{
    flex:1 1 auto;
    width:min(1040px,calc(100% - 28px));
    margin-top:92px;
    margin-bottom:8px;
    min-height:0;
    overflow:hidden;
  }
  .site-footer{
    flex:0 0 auto;
    margin-bottom:8px;
  }
  .hero{
    min-height:290px;
    padding:26px 32px;
  }
  .hero-art{
    min-height:220px;
  }
  .hero-art img{
    width:min(100%,300px);
  }
  .game-grid{
    margin-top:14px;
    gap:14px;
  }
  .game-card{
    min-height:190px;
    padding:20px 22px;
  }
  .game-card .menu-illustration{
    margin-bottom:8px;
  }
  .game-card .menu-illustration img{
    width:92px;
    max-height:92px;
  }
  .game-card.pong .menu-illustration img{
    width:112px;
    max-height:100px;
  }
  .game-card .actions{
    margin-top:16px;
  }

  .panel{
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:20px 26px;
  }
  .quiz-top{
    margin-bottom:10px;
  }
  .quiz-mascot{
    width:112px;
  }
  .quiz-question{
    margin:16px 0 16px;
    font-size:clamp(3.2rem,7vh,5.1rem);
  }
  .answers{
    gap:10px;
    max-width:680px;
  }
  .answer{
    min-height:82px;
  }
  .next-wrap{
    min-height:54px;
    margin-top:10px;
  }
  .learn-layout{
    height:calc(100% - 64px);
  }
  .table-card,.mode-stack{
    min-height:0;
  }
  .number-grid{
    max-height:calc(100% - 110px);
  }
  .number-card{
    min-height:88px;
  }
  .pong-wrap{
    height:calc(100% - 64px);
    align-items:stretch;
  }
  .canvas-card{
    min-height:0;
  }
  #pongCanvas{
    height:100%;
    width:100%;
    aspect-ratio:auto;
  }
}

@media (max-width:600px){
  .next-wrap{min-height:58px;margin-top:12px}
  .next-btn{min-width:150px;min-height:48px}
  .game-card .actions{margin-top:18px}
  .game-card.pong .menu-illustration img{width:104px;max-width:42%}
}


/* ===== v6: preserve Ping Pong geometry ===== */
/* Never stretch the canvas independently on X/Y: the drawing buffer is 900×560. */
.canvas-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
#pongCanvas{
  width:100%;
  height:auto !important;
  aspect-ratio:900 / 560 !important;
  max-width:100%;
  object-fit:contain;
}

/* The desktop no-scroll layout may constrain the card, but never the canvas ratio. */
@media (min-width:901px) and (min-height:720px){
  .pong-wrap{
    height:calc(100% - 64px);
    min-height:0;
  }
  .canvas-card{
    min-height:0;
    overflow:hidden;
  }
  #pongCanvas{
    width:min(100%, calc((100vh - 235px) * 900 / 560));
    height:auto !important;
    aspect-ratio:900 / 560 !important;
    margin:auto;
  }
}

/* Phones keep the same 900:560 geometry too. */
@media (max-width:600px){
  #pongCanvas{
    width:100%;
    height:auto !important;
    aspect-ratio:900 / 560 !important;
    max-height:none;
  }
}


/* ===== v7 requested refinements ===== */

/* Number selection is mathematical ordering, always left-to-right. */
.number-grid{
  direction:ltr !important;
}
.number-card{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  font-size:2.45rem;
}

/* More breathing room above Next. */
.next-wrap{
  margin-top:30px;
}
@media (min-width:901px) and (min-height:720px){
  .next-wrap{
    margin-top:24px;
  }
}
@media (max-width:600px){
  .next-wrap{
    margin-top:22px;
  }
}

/* Failure feedback stays in-place and reads as a gentle "no", not a turn-away. */
.quiz-mascot{
  transform-origin:50% 32%;
}
.quiz-mascot.mascot-no{
  animation:mascotNo 1.02s ease-in-out;
}
@keyframes mascotNo{
  0%,100%{transform:translateX(0) rotate(0deg) scale(1)}
  14%{transform:translateX(-2px) rotate(-3deg) scale(1.01)}
  28%{transform:translateX(2px) rotate(3deg) scale(1.01)}
  42%{transform:translateX(-2px) rotate(-3deg) scale(1.01)}
  56%{transform:translateX(2px) rotate(3deg) scale(1.01)}
  72%{transform:translateX(-1px) rotate(-2deg) scale(1)}
  86%{transform:translateX(1px) rotate(1.5deg) scale(1)}
}

/* Success motion is driven smoothly by requestAnimationFrame. */
.feedback-layer.show-success img{
  animation:none !important;
  will-change:transform,opacity;
}
.feedback-layer.show-success .feedback-bubble{
  animation:bubbleIn 1.9s ease forwards;
}

/* Two compact mode choices on the home math card. */
.math-mode-actions{
  gap:12px;
}
.math-mode-actions .primary,
.math-mode-actions .secondary{
  flex:1 1 150px;
  text-align:center;
}

@media (max-width:600px){
  .number-card{
    font-size:1.9rem;
  }
  .math-mode-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .math-mode-actions .primary,
  .math-mode-actions .secondary{
    width:100%;
    min-width:0;
  }
}


/* ===== v8: focused Pong + mode-title fixes ===== */

/* Pong has no dark "table" surface; only paddles, ball and center line remain. */
.canvas-card{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
#pongCanvas{
  background:transparent !important;
  border-radius:0 !important;
}

/* Score ownership is fixed physically: You on the left, Minik on the right, in every locale. */
.pong-score-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  direction:ltr !important;
  margin-top:8px;
}
.pong-score-player{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.pong-score-player strong{
  font-size:2rem;
  line-height:1;
  color:var(--ink);
}
.pong-score-player span{
  font-size:.92rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.pong-score-separator{
  font-size:1.65rem;
  font-weight:700;
  color:var(--ink-soft);
}

/* A clear, shiny mode label distinguishes multiplication from division. */
.mode-title-gold{
  width:max-content;
  max-width:100%;
  margin:0 auto 10px;
  padding:7px 18px;
  border-radius:999px;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#6e4a00;
  background:
    linear-gradient(110deg,#fff3a6 0%,#f3c84f 28%,#fff7c8 48%,#dca62a 72%,#ffe88a 100%);
  border:1px solid rgba(177,125,16,.34);
  box-shadow:
    0 7px 18px rgba(218,168,44,.22),
    inset 0 1px 0 rgba(255,255,255,.85);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.quiz-mode-title{
  margin-bottom:10px;
}

@media (max-width:600px){
  .mode-title-gold{
    font-size:1rem;
    padding:6px 15px;
    margin-bottom:8px;
  }
  .pong-score-player strong{font-size:1.55rem}
  .pong-score-player span{font-size:.82rem}
}


/* ===== Integrated-site requested polish ===== */
.back-row{ position:relative; min-height:46px; }
.mode-title-gold{ display:none !important; }
.mode-title-inline{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#a86f05;
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
  margin:0;
  font-size:1.5rem;
  line-height:1;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,244,194,.85), 0 2px 8px rgba(173,112,0,.18);
  pointer-events:none;
  white-space:nowrap;
}

/* About 15% more breathing room above Next. */
.next-wrap{ margin-top:35px; }
@media (min-width:901px) and (min-height:720px){ .next-wrap{ margin-top:28px; } }
@media (max-width:600px){ .next-wrap{ margin-top:25px; } .mode-title-inline{ font-size:1.28rem; } }

/* Restore the original dark Pong play area across the full rectangle,
   while preserving the fixed 900:560 aspect ratio and the center dotted line. */
.canvas-card{
  background:#171728 !important;
  border-radius:30px !important;
  padding:14px !important;
  box-shadow:var(--shadow) !important;
}
#pongCanvas{
  background:radial-gradient(circle at 50% 50%,#29284d,#11111f) !important;
  border-radius:20px !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:900 / 560 !important;
  max-width:100%;
}

/* Footer belongs to the Minik Math page and links back to the main site. */
.site-footer a{
  color:var(--violet);
  font-weight:700;
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }


/* ===== v9: full-arena Pong + difficulty ===== */
.pong-panel{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
body:has(.pong-panel){
  overflow-y:auto !important;
}
.app-shell:has(.pong-panel){
  height:auto !important;
  overflow:visible !important;
}

.canvas-card{
  padding:0 !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 50% 50%,#29284d,#11111f) !important;
  border-radius:30px !important;
  box-shadow:var(--shadow) !important;
}
#pongCanvas{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:900 / 560 !important;
  margin:0 !important;
  max-width:none !important;
  max-height:none !important;
  background:transparent !important;
  border-radius:30px !important;
}

.pong-difficulty{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
}
.pong-difficulty-label{
  display:block;
  text-align:center;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.pong-difficulty-buttons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  direction:ltr;
}
.pong-difficulty-buttons button{
  border:1px solid var(--line);
  background:#f7f7ff;
  color:var(--ink-soft);
  border-radius:999px;
  min-height:40px;
  padding:7px 8px;
  font-weight:700;
  cursor:pointer;
}
.pong-difficulty-buttons button.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));
  box-shadow:0 7px 16px rgba(111,101,232,.22);
}
@media (max-width:600px){
  .pong-difficulty{padding:11px}
  .pong-difficulty-buttons{gap:5px}
  .pong-difficulty-buttons button{
    min-height:38px;
    font-size:.78rem;
  }
}


/* ===== v10 focused fixes ===== */

/* The dark rectangle IS the playfield. Do not stretch the grid card beyond the 900×560 canvas. */
.pong-panel .pong-wrap{
  height:auto !important;
  align-items:start !important;
}
.pong-panel .canvas-card{
  width:100% !important;
  height:auto !important;
  aspect-ratio:900 / 560 !important;
  align-self:start !important;
  padding:0 !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 50% 50%,#29284d,#11111f) !important;
  border-radius:30px !important;
  box-shadow:var(--shadow) !important;
}
.pong-panel #pongCanvas{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:900 / 560 !important;
  margin:0 !important;
  background:transparent !important;
  border-radius:30px !important;
}

/* Give the success label breathing room above the bottom edge. */
.feedback-layer.show-success .feedback-bubble{
  bottom:96px !important;
}

/* More room is available here; make Multiply / Divide clearer on the quiz screen. */
.quiz-mode-title-inline{
  font-size:1.75rem !important;
}

@media (max-width:600px){
  .feedback-layer.show-success .feedback-bubble{
    bottom:max(68px, calc(env(safe-area-inset-bottom) + 52px)) !important;
  }
  .quiz-mode-title-inline{
    font-size:1.42rem !important;
  }
}


/* ===== v11 Pong full-height arena ===== */
@media (min-width:761px){
  .pong-panel .pong-wrap{
    align-items:stretch !important;
  }
  .pong-panel .canvas-card{
    align-self:stretch !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
  }
  .pong-panel #pongCanvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    max-height:none !important;
  }
}

/* Mobile keeps the wider playfield shape that already worked well. */
@media (max-width:760px){
  .pong-panel .canvas-card{
    aspect-ratio:900 / 560 !important;
  }
  .pong-panel #pongCanvas{
    width:100% !important;
    height:auto !important;
    aspect-ratio:900 / 560 !important;
  }
}

/* In RTL the mascot is on the left, so mirror it to point toward the text.
   In LTR it stays in the original orientation and points toward the text on the left. */
html[dir="rtl"] .hero-art{
  transform:scaleX(-1);
}
html[dir="ltr"] .hero-art{
  transform:none;
}


/* ===== v14 mobile interaction refinements ===== */

/* Back arrow: thicker and optically centered, while preserving the existing button size. */
.back-btn{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
}
.back-arrow-icon{
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Only a Hebrew-origin session may switch languages. JS hides this for all other origins. */
.ghost-pill[hidden]{
  display:none !important;
}

/* Mobile Pong quick-restart button sits physically in the middle of the header. */
.pong-header-row{
  position:relative;
}
.pong-mobile-new{
  display:none;
  border:0;
  border-radius:999px;
  padding:7px 15px;
  min-height:38px;
  background:linear-gradient(135deg,#49b8ff,#6688f5);
  color:white;
  font-weight:700;
  box-shadow:0 8px 18px rgba(73,150,236,.22);
}

/* Height control is mobile-only. */
.pong-score-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.pong-height-control{
  display:none;
}

/* Prevent browser-chrome changes from producing a delayed footer jump on mobile. */
@media (max-width:760px){
  .app-shell{
    min-height:0 !important;
    margin-bottom:8px !important;
  }
  .site-footer{
    margin-top:4px !important;
    margin-bottom:max(8px,env(safe-area-inset-bottom)) !important;
  }

  /* Quiz fills a stable small viewport; Next is centered in the free white area. */
  .quiz-panel{
    min-height:calc(100svh - 124px);
    display:flex;
    flex-direction:column;
  }
  .quiz-panel .answers{
    width:100%;
  }
  .quiz-panel .next-wrap{
    flex:1 1 96px;
    min-height:96px;
    margin-top:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .pong-mobile-new{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2;
  }

  /* The score/mascot block spans the mobile side panel, leaving room for the height control. */
  .pong-panel .pong-side > .pong-scorebox{
    grid-column:1/-1;
  }
  .pong-height-control{
    display:flex;
    width:34px;
    height:126px;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
  }
  .pong-height-control input[type="range"]{
    width:112px;
    height:28px;
    margin:0;
    transform:rotate(-90deg);
    accent-color:var(--violet);
    cursor:ns-resize;
    touch-action:none;
  }
  .pong-score-visual .pong-art{
    width:min(54vw,150px);
    max-height:150px;
  }

  /* The current 900:560 mobile arena remains the minimum.
     JS adds this class only after measuring that exact existing height. */
  .pong-panel .canvas-card.pong-height-adjusted,
  .pong-panel #pongCanvas.pong-height-adjusted{
    height:var(--pong-mobile-height) !important;
    aspect-ratio:auto !important;
    max-height:none !important;
  }

  .back-arrow-icon{
    width:23px;
    height:23px;
  }
}


/* ===== v16 Pong mobile header + stable table-size choices ===== */
.pong-table-size{
  display:none;
}

@media (max-width:760px){
  /* Keep title and back arrow at the two ends; New is the real middle flex item.
     This follows RTL/LTR automatically and cannot sit on top of the title. */
  .pong-header-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  .pong-header-row .back-btn{
    flex:0 0 44px;
  }
  .pong-header-row .pong-badge{
    min-width:0;
    flex:0 1 auto;
    white-space:nowrap;
  }
  .pong-mobile-new{
    display:block;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 auto;
    margin:0 !important;
    min-height:38px;
    padding:7px 13px;
  }

  /* Replace the continuous vertical slider with three deliberate size choices.
     Each tap causes only one layout change. */
  .pong-height-control{
    display:none !important;
  }
  .pong-table-size{
    display:block;
    margin-top:6px;
  }
  .pong-table-size-label{
    display:block;
    margin-bottom:7px;
    text-align:center;
    font-size:.84rem;
    font-weight:700;
    color:var(--ink-soft);
  }
  .pong-table-size-buttons{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    direction:ltr;
  }
  .pong-table-size-buttons button{
    min-height:36px;
    padding:6px 5px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#f7f7ff;
    color:var(--ink-soft);
    font-size:.78rem;
    font-weight:700;
    cursor:pointer;
  }
  .pong-table-size-buttons button.active{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--violet),var(--violet-2));
    box-shadow:0 7px 15px rgba(101,91,220,.2);
  }

  .pong-score-visual{
    display:flex;
    align-items:center;
    justify-content:center;
  }
}


/* ===== v17 mobile QA fixes ===== */
.screen-title{ display:none; }
.pong-mobile-message{ display:none; }

@media (max-width:760px){
  /* Pong header scrolls normally on mobile instead of floating above moving content. */
  body[data-view="pong"] .site-header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:calc(100% - 14px) !important;
    margin:6px auto 0 !important;
    padding-top:max(6px,env(safe-area-inset-top)) !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    pointer-events:auto;
  }
  html[dir="rtl"] body[data-view="pong"] .site-header{
    grid-template-areas:"actions title brand";
    direction:ltr !important;
  }
  html[dir="ltr"] body[data-view="pong"] .site-header{
    grid-template-areas:"brand title actions";
    direction:ltr !important;
  }
  body[data-view="pong"] .site-header .brand{ grid-area:brand; justify-self:end; }
  body[data-view="pong"] .site-header .header-actions{ grid-area:actions; justify-self:start; }
  body[data-view="pong"] .screen-title{
    grid-area:title;
    display:block !important;
    min-width:0;
    text-align:center;
    font-weight:700;
    font-size:clamp(.92rem,4.4vw,1.15rem);
    line-height:1.15;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body[data-view="pong"] .screen-title[hidden]{ display:none !important; }
  body[data-view="pong"] .app-shell{
    margin-top:12px !important;
  }

  /* On mobile the title is in the real page header; the old title slot becomes result/status. */
  body[data-view="pong"] .pong-header-row{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center !important;
    gap:8px !important;
  }
  html[dir="rtl"] body[data-view="pong"] .pong-header-row{
    grid-template-areas:"new status back";
  }
  html[dir="ltr"] body[data-view="pong"] .pong-header-row{
    grid-template-areas:"back status new";
  }
  body[data-view="pong"] .pong-header-row .back-btn{ grid-area:back; }
  body[data-view="pong"] .pong-mobile-new{
    grid-area:new;
    display:block;
    position:static !important;
    transform:none !important;
    margin:0 !important;
  }
  body[data-view="pong"] .pong-badge{ display:none !important; }
  body[data-view="pong"] .pong-mobile-message{
    grid-area:status;
    display:block;
    min-width:0;
    text-align:center;
    font-weight:700;
    font-size:.84rem;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body[data-view="pong"] .pong-mobile-message[hidden]{
    visibility:hidden;
  }
  /* Desktop retains the original bottom outcome; on mobile it is shown in the header row instead. */
  body[data-view="pong"] #pongMessage{ display:none !important; }

  /* The original field was too short. Small/Medium/Large are now 1.5x/2x/2.5x baseline. */
  .pong-table-size-buttons button.active{
    color:#fff !important;
    -webkit-text-fill-color:#fff;
    background:linear-gradient(135deg,var(--violet),var(--violet-2)) !important;
    border-color:transparent !important;
    opacity:1 !important;
  }

  /* Difficulty owns the full row instead of collapsing into one half of the mobile side grid. */
  .pong-difficulty{
    grid-column:1/-1 !important;
    width:100% !important;
    justify-self:stretch;
  }
  .pong-difficulty-label{
    text-align:center !important;
  }

  /* Quiz should size to its real content; the previous viewport min-height created needless scrolling. */
  body[data-view="quiz"] .quiz-panel{
    min-height:0 !important;
  }
  body[data-view="quiz"] .app-shell,
  body[data-view="learn"] .app-shell,
  body[data-view="choose"] .app-shell{
    min-height:0 !important;
    margin-bottom:6px !important;
  }
  body[data-view="quiz"] .site-footer,
  body[data-view="learn"] .site-footer,
  body[data-view="choose"] .site-footer{
    margin-top:0 !important;
  }
}


/* ===== v18 Pong point feedback ===== */
@keyframes pongScorePointFlash{
  0%,100%{
    color:inherit;
    transform:scale(1);
    text-shadow:none;
  }
  24%,72%{
    color:var(--point-color);
    transform:scale(1.18);
    text-shadow:0 0 12px var(--point-color);
  }
  48%{
    color:inherit;
    transform:scale(1.05);
    text-shadow:none;
  }
}
.pong-score-player strong.pong-point-flash{
  display:inline-block;
  animation:pongScorePointFlash 650ms ease-in-out;
  transform-origin:center;
}


/* ===== v19/v21 Balloon Madness + stable Pong header ===== */
.pong-header-row{
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center !important;
  gap:12px;
}
.pong-header-row .back-btn{
  justify-self:start;
}
.pong-header-row .pong-badge{
  justify-self:end;
}
.pong-madness-toggle{
  justify-self:center;
  border:1px solid rgba(105,91,220,.20);
  border-radius:999px;
  padding:8px 15px;
  min-height:38px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,#ff77bd,#ffd75a,#66d9b4,#67a8ff) border-box;
  color:var(--ink);
  font-weight:700;
  font-size:.84rem;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 7px 16px rgba(73,66,141,.10);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.pong-madness-toggle.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#ff58a9,#7c68ff 48%,#38cdb6);
  transform:translateY(2px);
  box-shadow:
    inset 0 3px 7px rgba(29,24,87,.35),
    0 2px 6px rgba(73,66,141,.16);
  filter:saturate(1.08);
}

@media (max-width:760px){
  body[data-view="pong"] .pong-header-row{
    grid-template-columns:44px minmax(0,1fr) auto !important;
  }
  html[dir="rtl"] body[data-view="pong"] .pong-header-row{
    grid-template-areas:"new madness back" !important;
  }
  html[dir="ltr"] body[data-view="pong"] .pong-header-row{
    grid-template-areas:"back madness new" !important;
  }
  body[data-view="pong"] .pong-header-row .back-btn{ grid-area:back; }
  body[data-view="pong"] .pong-mobile-new{ grid-area:new; }
  body[data-view="pong"] .pong-madness-toggle{
    grid-area:madness;
    min-width:0;
    max-width:100%;
    padding:7px 10px;
    font-size:clamp(.70rem,3.1vw,.82rem);
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* ===== v20 Pong header outcome slot + layered Balloon Madness objects ===== */
.pong-header-row{
  grid-template-columns:46px minmax(0,1fr) auto auto;
}
.pong-header-center{
  justify-self:center;
  min-width:min(100%, 280px);
  display:grid;
  place-items:center;
}
.pong-header-center > *{
  grid-area:1 / 1;
}
.pong-header-message{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid rgba(105,91,220,.18);
  background:rgba(255,255,255,.96);
  color:var(--ink);
  font-weight:700;
  font-size:.84rem;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 7px 16px rgba(73,66,141,.10);
  max-width:100%;
  text-align:center;
}
.pong-header-message[hidden],
.pong-madness-toggle[hidden]{
  display:none !important;
}

@media (max-width:760px){
  body[data-view="pong"] .pong-header-row{
    grid-template-columns:44px minmax(0,1fr) auto !important;
  }
  html[dir="rtl"] body[data-view="pong"] .pong-header-row{
    grid-template-areas:"new center back" !important;
  }
  html[dir="ltr"] body[data-view="pong"] .pong-header-row{
    grid-template-areas:"back center new" !important;
  }
  body[data-view="pong"] .pong-header-row .back-btn{ grid-area:back; }
  body[data-view="pong"] .pong-mobile-new{ grid-area:new; }
  body[data-view="pong"] .pong-header-center{ grid-area:center; min-width:0; width:100%; }
  body[data-view="pong"] .pong-madness-toggle,
  body[data-view="pong"] .pong-header-message{
    min-width:0;
    max-width:100%;
    padding:7px 10px;
    font-size:clamp(.70rem,3.1vw,.82rem);
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* ===== v23 mobile footer, exact centering, Pong landscape experience ===== */
.site-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
}
.site-header .brand{justify-self:start;}
.site-header .screen-title{justify-self:center;grid-column:2;text-align:center;}
.site-header .header-actions{justify-self:end;}
html[dir="rtl"] .site-header .brand{justify-self:end;grid-column:3;}
html[dir="rtl"] .site-header .screen-title{grid-column:2;}
html[dir="rtl"] .site-header .header-actions{justify-self:start;grid-column:1;}
.back-btn,.back-arrow-icon{direction:ltr !important;}
.pong-madness-teaser{margin-top:7px !important;color:#6857d8 !important;font-weight:700;}
.pong-landscape-setup,.pong-landscape-countdown,.pong-landscape-hud{display:none;}

@media (max-width:760px), (pointer:coarse){
  body{min-height:100svh;display:flex;flex-direction:column;}
  .app-shell{flex:1 0 auto;}
  .site-footer{
    flex:0 0 auto;width:100% !important;max-width:none !important;margin-top:auto !important;
    margin-bottom:max(8px,env(safe-area-inset-bottom)) !important;padding:4px 16px 0 !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;
    justify-content:center !important;text-align:center !important;gap:2px !important;
  }
  .site-footer > *{width:auto !important;max-width:100%;margin-inline:auto !important;text-align:center !important;}
  .site-footer .dot{display:none !important;}
  body[data-view="choose"] .app-shell,body[data-view="quiz"] .app-shell,body[data-view="learn"] .app-shell,body[data-view="result"] .app-shell{margin-bottom:8px !important;}

  body[data-view="pong"] .pong-header-row{
    display:grid !important;grid-template-columns:96px minmax(0,1fr) 96px !important;
    align-items:center !important;gap:6px !important;
  }
  html[dir="ltr"] body[data-view="pong"] .pong-header-row{grid-template-areas:"back center new" !important;}
  html[dir="rtl"] body[data-view="pong"] .pong-header-row{grid-template-areas:"new center back" !important;}
  body[data-view="pong"] .pong-header-row .back-btn{grid-area:back;justify-self:start;}
  html[dir="rtl"] body[data-view="pong"] .pong-header-row .back-btn{justify-self:end;}
  body[data-view="pong"] .pong-header-center{grid-area:center;width:100%;min-width:0;justify-self:center;}
  body[data-view="pong"] .pong-mobile-new{
    grid-area:new;display:block !important;position:static !important;transform:none !important;
    width:104px !important;min-width:104px !important;padding:8px 15px !important;white-space:nowrap !important;
    overflow:visible !important;justify-self:end;
  }
  html[dir="rtl"] body[data-view="pong"] .pong-mobile-new{justify-self:start;}
  body[data-view="pong"] .pong-madness-toggle,body[data-view="pong"] .pong-header-message{
    max-width:100%;min-width:0;padding:7px 11px;text-align:center;overflow:hidden;text-overflow:ellipsis;
  }
  body[data-view="pong"] .pong-table-size-buttons button.active{color:#fff !important;-webkit-text-fill-color:#fff !important;}
}

@media (orientation:landscape) and (pointer:coarse) and (max-height:700px){
  html[data-view="pong"],body[data-view="pong"]{width:100%;height:100%;min-height:100%;overflow:hidden !important;}
  body[data-view="pong"]{padding:0 !important;}
  body[data-view="pong"] .site-header,body[data-view="pong"] .site-footer{display:none !important;}
  body[data-view="pong"] .app-shell{position:fixed !important;inset:0 !important;width:100% !important;height:100svh !important;min-height:0 !important;margin:0 !important;padding:6px !important;}
  body[data-view="pong"] .pong-panel{width:100% !important;height:100% !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:20px !important;box-shadow:none !important;background:transparent !important;overflow:hidden !important;}
  body[data-view="pong"] .pong-header-row{display:none !important;}
  body[data-view="pong"] .pong-wrap{display:block !important;width:100% !important;height:100% !important;margin:0 !important;}
  body[data-view="pong"] .canvas-card{position:relative !important;width:100% !important;height:100% !important;min-height:0 !important;padding:0 !important;border-radius:18px !important;overflow:hidden !important;background:#171728 !important;}
  body[data-view="pong"] #pongCanvas,body[data-view="pong"] #pongCanvas.pong-height-adjusted{display:block !important;width:100% !important;height:100% !important;max-height:none !important;aspect-ratio:auto !important;border-radius:18px !important;}
  body[data-view="pong"] .pong-side{display:none !important;}
  body[data-view="pong"].pong-waiting .pong-landscape-setup{position:absolute;inset:12px;z-index:8;display:flex !important;align-items:center;justify-content:center;gap:18px;padding:12px 18px;border-radius:18px;background:rgba(20,20,48,.80);backdrop-filter:blur(8px);color:#fff;}
  .pong-landscape-art{width:min(20vw,150px);max-height:34vh;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.20));}
  .pong-landscape-setup-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;max-width:72%;}
  .pong-landscape-difficulty{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;}
  .pong-landscape-difficulty > span{white-space:nowrap;}
  .pong-landscape-difficulty .pong-difficulty-buttons{display:flex;gap:6px;}
  .pong-landscape-difficulty .pong-difficulty-buttons button{min-height:38px;padding:7px 10px;font-size:.78rem;border-radius:999px;}
  .pong-landscape-setup .pong-madness-toggle{min-height:40px;padding:8px 13px;}
  .pong-landscape-start{min-height:40px !important;padding:8px 18px !important;white-space:nowrap;}
  body[data-view="pong"]:not(.pong-waiting) .pong-landscape-hud{position:absolute;z-index:9;top:8px;left:8px;right:8px;display:grid !important;grid-template-columns:64px 1fr 72px;align-items:center;pointer-events:none;}
  .pong-landscape-hud .back-btn,.pong-landscape-hud .pong-landscape-new{pointer-events:auto;}
  .pong-landscape-hud .back-btn{width:42px;height:42px;justify-self:start;background:rgba(255,255,255,.92);}
  .pong-landscape-score{justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;min-height:38px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.90);color:var(--ink);font-weight:700;font-size:1.05rem;box-shadow:0 6px 18px rgba(0,0,0,.12);}
  .pong-landscape-new{justify-self:end;min-width:72px;min-height:40px;border:0;border-radius:999px;padding:7px 12px;background:linear-gradient(135deg,#49b8ff,#6688f5);color:#fff;font-weight:700;}
  .pong-landscape-countdown{position:absolute;z-index:10;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff;font-size:clamp(4rem,15vw,8rem);font-weight:700;text-shadow:0 8px 28px rgba(0,0,0,.35);}
  .pong-landscape-countdown[hidden]{display:none !important;}
}

/* v23 final specificity fixes for the mobile Pong header and landscape HUD. */
@media (max-width:760px), (pointer:coarse){
  body[data-view="pong"] .site-header{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    grid-template-areas:none !important;
    direction:inherit !important;
  }
  html[dir="ltr"] body[data-view="pong"] .site-header .brand{
    grid-column:1 !important;grid-row:1 !important;justify-self:start !important;
  }
  html[dir="ltr"] body[data-view="pong"] .site-header .screen-title{
    grid-column:2 !important;grid-row:1 !important;justify-self:center !important;
  }
  html[dir="ltr"] body[data-view="pong"] .site-header .header-actions{
    grid-column:3 !important;grid-row:1 !important;justify-self:end !important;
  }
  html[dir="rtl"] body[data-view="pong"] .site-header .brand{
    grid-column:3 !important;grid-row:1 !important;justify-self:end !important;
  }
  html[dir="rtl"] body[data-view="pong"] .site-header .screen-title{
    grid-column:2 !important;grid-row:1 !important;justify-self:center !important;
  }
  html[dir="rtl"] body[data-view="pong"] .site-header .header-actions{
    grid-column:1 !important;grid-row:1 !important;justify-self:start !important;
  }
}

@media (orientation:landscape) and (pointer:coarse) and (max-height:700px){
  html[dir="ltr"] .pong-landscape-hud{grid-template-areas:"back score new";}
  html[dir="rtl"] .pong-landscape-hud{grid-template-areas:"new score back";}
  .pong-landscape-hud .back-btn{grid-area:back;}
  .pong-landscape-hud .pong-landscape-score{grid-area:score;}
  .pong-landscape-hud .pong-landscape-new{grid-area:new;}
}


/* ===== v24: mobile header placement, language-specific New width, reliable landscape ===== */
@media (max-width:760px), (pointer:coarse){
  /* Always keep the logo on the physical left and language button on the physical right. */
  body:not([data-view="pong"]) .site-header,
  body[data-view="pong"] .site-header{
    grid-template-columns:58px minmax(0,1fr) 58px !important;
    grid-template-areas:"brand title actions" !important;
    direction:ltr !important;
    align-items:center !important;
  }
  .site-header .brand{
    grid-area:brand !important;
    justify-self:start !important;
    align-self:center !important;
  }
  .site-header .screen-title{
    grid-area:title !important;
    justify-self:center !important;
    align-self:center !important;
    text-align:center !important;
  }
  .site-header .header-actions{
    grid-area:actions !important;
    justify-self:end !important;
    align-self:center !important;
  }
  .site-header .ghost-pill{
    margin:0 !important;
    align-self:center !important;
  }

  /* Portrait Pong: exact centered middle, with per-language side widths. */
  html[lang="en"] body[data-view="pong"] .pong-header-row{
    grid-template-columns:82px minmax(0,1fr) 82px !important;
    gap:10px !important;
  }
  html[lang="he"] body[data-view="pong"] .pong-header-row{
    grid-template-columns:104px minmax(0,1fr) 104px !important;
    gap:8px !important;
  }
  html[lang="en"] body[data-view="pong"] .pong-mobile-new{
    width:68px !important;
    min-width:68px !important;
    padding:8px 11px !important;
  }
  html[lang="he"] body[data-view="pong"] .pong-mobile-new{
    width:96px !important;
    min-width:96px !important;
    padding:8px 14px !important;
  }
  body[data-view="pong"] .pong-header-center{
    justify-self:center !important;
    width:auto !important;
    max-width:100% !important;
  }
  body[data-view="pong"] .pong-madness-toggle,
  body[data-view="pong"] .pong-header-message{
    margin-inline:auto !important;
  }
}

/* JS toggles this class from the real viewport dimensions, so it does not depend on unreliable media-query pointer/orientation reporting. */
body.pong-landscape-active[data-view="pong"]{
  overflow:hidden !important;
  padding:0 !important;
}
body.pong-landscape-active[data-view="pong"] .site-header,
body.pong-landscape-active[data-view="pong"] .site-footer{
  display:none !important;
}
body.pong-landscape-active[data-view="pong"] .app-shell{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;
}
body.pong-landscape-active[data-view="pong"] .pong-panel,
body.pong-landscape-active[data-view="pong"] .pong-wrap,
body.pong-landscape-active[data-view="pong"] .canvas-card{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
}
body.pong-landscape-active[data-view="pong"] .pong-panel{
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
body.pong-landscape-active[data-view="pong"] .pong-header-row,
body.pong-landscape-active[data-view="pong"] .pong-side{
  display:none !important;
}
body.pong-landscape-active[data-view="pong"] .canvas-card{
  position:relative !important;
  padding:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#171728 !important;
}
body.pong-landscape-active[data-view="pong"] #pongCanvas,
body.pong-landscape-active[data-view="pong"] #pongCanvas.pong-height-adjusted{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  border-radius:16px !important;
}
body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
  position:absolute;
  inset:10px;
  z-index:8;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:12px 18px;
  border-radius:16px;
  background:rgba(20,20,48,.82);
  backdrop-filter:blur(8px);
  color:#fff;
}
body.pong-landscape-active .pong-landscape-art{
  width:min(18vw,132px) !important;
  max-height:42vh !important;
  object-fit:contain;
}
body.pong-landscape-active .pong-landscape-setup-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  max-width:74%;
}
body.pong-landscape-active .pong-landscape-difficulty{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:700;
}
body.pong-landscape-active .pong-landscape-difficulty .pong-difficulty-buttons{
  display:flex;
  gap:6px;
}
body.pong-landscape-active[data-view="pong"]:not(.pong-waiting) .pong-landscape-hud{
  position:absolute;
  z-index:9;
  top:max(7px,env(safe-area-inset-top));
  left:max(7px,env(safe-area-inset-left));
  right:max(7px,env(safe-area-inset-right));
  display:grid !important;
  grid-template-columns:72px 1fr 72px;
  grid-template-areas:"back score new";
  align-items:center;
  pointer-events:none;
}
body.pong-landscape-active .pong-landscape-hud .back-btn{grid-area:back;pointer-events:auto;justify-self:start;width:42px;height:42px;background:rgba(255,255,255,.92);}
body.pong-landscape-active .pong-landscape-score{grid-area:score;justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.90);color:var(--ink);font-weight:700;}
body.pong-landscape-active .pong-landscape-new{grid-area:new;pointer-events:auto;justify-self:end;min-width:68px;min-height:40px;border:0;border-radius:999px;padding:7px 11px;background:linear-gradient(135deg,#49b8ff,#6688f5);color:#fff;font-weight:700;}
body.pong-landscape-active .pong-landscape-countdown{
  position:absolute;
  z-index:10;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#fff;
  font-size:clamp(4rem,15vw,8rem);
  font-weight:700;
  text-shadow:0 8px 28px rgba(0,0,0,.35);
}
body.pong-landscape-active .pong-landscape-countdown[hidden]{display:none !important;}


/* ===== v25 focused RTL/home-action/landscape reliability fixes ===== */
.game-card.pong .pong-card-actions{
  width:100%;
  justify-content:center !important;
  align-items:center;
}
.game-card.pong .pong-card-actions .primary{
  margin-inline:auto !important;
}

/* Do not mirror the SVG itself; JS supplies the correct LTR/RTL arrow path. */
.back-btn .back-arrow-icon{
  transform:none !important;
}

/* Direct CSS fallback: if the browser reports landscape, use the landscape shell even
   before JS has finished reacting to visualViewport/orientation events. */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
  body[data-view="pong"] .site-header,
  body[data-view="pong"] .site-footer,
  body[data-view="pong"] .pong-header-row,
  body[data-view="pong"] .pong-side{
    display:none !important;
  }
  body[data-view="pong"] .app-shell{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100svh !important;
    min-height:0 !important;
    margin:0 !important;
    padding:6px !important;
  }
  body[data-view="pong"] .pong-panel,
  body[data-view="pong"] .pong-wrap,
  body[data-view="pong"] .canvas-card{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
  }
  body[data-view="pong"] .canvas-card{
    position:relative !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
  }
  body[data-view="pong"] #pongCanvas,
  body[data-view="pong"] #pongCanvas.pong-height-adjusted{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }
}


/* ===== v26 final alignment + target score + landscape setup ===== */
@media (max-width:760px), (pointer:coarse){
  html[dir="ltr"] .site-header,
  html[dir="rtl"] .site-header,
  html[lang="he"] .site-header,
  html[lang="en"] .site-header{
    direction:ltr !important;
    grid-template-columns:58px minmax(0,1fr) 58px !important;
    grid-template-areas:"brand title actions" !important;
  }
  html[dir="ltr"] .site-header .brand,
  html[dir="rtl"] .site-header .brand{
    grid-area:brand !important;grid-column:1 !important;justify-self:start !important;
  }
  html[dir="ltr"] .site-header .screen-title,
  html[dir="rtl"] .site-header .screen-title{
    grid-area:title !important;grid-column:2 !important;justify-self:center !important;text-align:center !important;
  }
  html[dir="ltr"] .site-header .header-actions,
  html[dir="rtl"] .site-header .header-actions{
    grid-area:actions !important;grid-column:3 !important;justify-self:end !important;
  }
  body[data-view="pong"] .pong-header-row{direction:ltr !important;}
  html[lang="en"] body[data-view="pong"] .pong-header-row{grid-template-areas:"back center new" !important;}
  html[lang="he"] body[data-view="pong"] .pong-header-row{grid-template-areas:"new center back" !important;}
  html[lang="he"] body[data-view="pong"] .pong-header-center,
  html[lang="he"] body[data-view="pong"] .pong-mobile-new{direction:rtl !important;}
}
.pong-target-inline{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.pong-target-label{display:block;text-align:center;font-weight:700;color:var(--ink);margin-bottom:8px;}
.pong-target-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;direction:ltr;}
.pong-target-buttons button{border:1px solid var(--line);background:#f7f7ff;color:var(--ink-soft);border-radius:999px;min-height:36px;padding:6px 7px;font-weight:700;cursor:pointer;}
.pong-target-buttons button.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--violet),var(--violet-2));box-shadow:0 7px 16px rgba(111,101,232,.18);}
body.pong-landscape-active .pong-landscape-setup{flex-direction:row !important;}
body.pong-landscape-active .pong-landscape-setup-controls{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;justify-content:center !important;gap:8px !important;width:min(420px,68vw) !important;max-width:68vw !important;}
body.pong-landscape-active .pong-landscape-control-row{width:100% !important;min-height:40px;}
body.pong-landscape-active .pong-landscape-difficulty,
body.pong-landscape-active .pong-target-row{display:grid !important;grid-template-columns:minmax(92px,auto) minmax(0,1fr);align-items:center;gap:10px;}
body.pong-landscape-active .pong-landscape-difficulty > span,
body.pong-landscape-active .pong-target-label{margin:0 !important;text-align:start;color:#fff;white-space:nowrap;}
body.pong-landscape-active .pong-landscape-difficulty .pong-difficulty-buttons,
body.pong-landscape-active .pong-target-buttons{width:100%;}
body.pong-landscape-active .pong-landscape-setup .pong-madness-toggle,
body.pong-landscape-active .pong-landscape-start{justify-self:stretch !important;width:100% !important;margin:0 !important;}
html[lang="he"] body.pong-landscape-active .pong-landscape-setup-controls{direction:rtl;}
html[lang="en"] body.pong-landscape-active .pong-landscape-setup-controls{direction:ltr;}
body.pong-landscape-active .pong-landscape-hud{direction:ltr !important;}
html[lang="en"] body.pong-landscape-active .pong-landscape-hud{grid-template-areas:"back score new" !important;}
html[lang="he"] body.pong-landscape-active .pong-landscape-hud{grid-template-areas:"new score back" !important;}
html[lang="he"] body.pong-landscape-active .pong-landscape-new{direction:rtl;}


/* v26 score-to-win is a real select box, per request. */
.pong-target-select{
  width:100%;
  min-height:38px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f7f7ff;
  color:var(--ink);
  padding:6px 34px 6px 12px;
  font:inherit;
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.pong-target-inline .pong-target-select{
  max-width:170px;
  margin-inline:auto;
  display:block;
}
body.pong-landscape-active .pong-target-select{
  min-height:40px;
  background:rgba(255,255,255,.96);
  color:var(--ink);
}
html[dir="rtl"] .pong-target-select{
  padding:6px 12px 6px 34px;
}




/* ===== v28 desktop EN header + learn-title fixes ===== */
/* Existing RTL desktop placement was already correct. The desktop bug was that LTR
   never assigned the visible controls to columns 1 and 3 when the center title is hidden. */
@media (min-width:761px){
  html[dir="ltr"] .site-header .brand{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
  }
  html[dir="ltr"] .site-header .screen-title{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    text-align:center !important;
  }
  html[dir="ltr"] .site-header .header-actions{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
}

.learn-back-row{
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) 46px !important;
  align-items:center !important;
  gap:10px;
}
.learn-back-row .learn-title-chip{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:center !important;
  text-align:center !important;
  max-width:min(100%,360px);
}
.learn-back-row .learn-back-spacer{width:46px;height:1px;}
html[lang="en"] .learn-back-row{direction:ltr !important;}
html[lang="en"] .learn-back-row .back-btn{grid-column:1 !important;grid-row:1 !important;justify-self:start !important;}
html[lang="en"] .learn-back-row .learn-back-spacer{grid-column:3 !important;grid-row:1 !important;}
html[lang="he"] .learn-back-row{direction:ltr !important;}
html[lang="he"] .learn-back-row .back-btn{grid-column:3 !important;grid-row:1 !important;justify-self:end !important;}
html[lang="he"] .learn-back-row .learn-back-spacer{grid-column:1 !important;grid-row:1 !important;}
@media (max-width:760px), (pointer:coarse){
  .learn-back-row .learn-title-chip{max-width:100%;white-space:normal;line-height:1.25;}
}


/* ===== v29 arithmetic expansion + desktop polish ===== */
.game-card.addsub{background:linear-gradient(150deg,#fff,rgba(255,241,205,.94));}
.practice-level-section{display:flex;justify-content:center;margin:22px 0 4px;}
.math-difficulty{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.82);
  box-shadow:0 10px 28px rgba(73,66,141,.08);
}
.math-difficulty.compact{margin:0 auto 18px;width:max-content;max-width:100%;padding:8px 11px;}
.math-difficulty-label{font-weight:700;color:var(--ink);}
.math-difficulty-buttons{display:flex;gap:7px;direction:ltr;}
.math-difficulty-buttons button,
.pong-pc-orientation-buttons button{
  border:1px solid var(--line);background:#f7f7ff;color:var(--ink-soft);border-radius:999px;
  min-height:36px;padding:7px 12px;font-weight:700;cursor:pointer;
}
.math-difficulty-buttons button.active,
.pong-pc-orientation-buttons button.active{
  color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--violet),var(--violet-2));
  box-shadow:0 7px 15px rgba(111,101,232,.18);
}
.mode-card.addition{border-inline-end:8px solid #ffb84d;}
.mode-card.subtraction{border-inline-end:8px solid #f07fb6;}

/* Balloon Madness is deliberately vivid even while OFF. */
.pong-madness-toggle:not(.active){
  border:2px solid transparent !important;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(115deg,#ff58a9,#ffcf4c,#45d7c2,#5f91ff,#b666ff) border-box !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 7px 18px rgba(111,101,232,.14) !important;
}

.pong-pc-orientation{display:none;}
.pong-pc-orientation-label{display:block;text-align:center;font-weight:700;margin-bottom:8px;}
.pong-pc-orientation-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;}

@media (min-width:761px){
  /* Desktop-only readability requested by owner: same family as headings, +2px. */
  .game-card .actions .primary,.game-card .actions .secondary{
    font-family:Arial, "Segoe UI", system-ui, sans-serif !important;
    font-size:18px !important;font-weight:700 !important;line-height:1.1;
  }
  .game-card.pong{grid-column:1/-1;min-height:190px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;}
  .game-card.pong>div:first-child{display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:24px;align-items:center;}
  .game-card.pong .menu-illustration{grid-row:1/4;margin:0;justify-content:center;}
  .game-card.pong h3,.game-card.pong p{grid-column:2;margin-inline:0;}
  .game-card.pong .pong-card-actions{min-width:210px;}
  .pong-pc-orientation{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
}

@media (max-width:760px){
  .practice-level-section{margin:14px 0 0;}
  .math-difficulty{width:100%;gap:8px;padding:9px 10px;}
  .math-difficulty.compact{width:100%;}
  .math-difficulty-label{width:100%;text-align:center;}
  .math-difficulty-buttons{width:100%;display:grid;grid-template-columns:repeat(3,1fr);}
  .game-grid{grid-template-columns:1fr !important;}
  .game-card.pong{grid-column:auto;}
}

/* v29: the expanded three-card home is intentionally allowed to scroll on desktop. */
@media (min-width:901px) and (min-height:720px){
  body[data-view="home"]{
    display:block !important;
    height:auto !important;
    min-height:100vh !important;
    overflow-y:auto !important;
  }
  body[data-view="home"] .app-shell{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    margin-top:28px !important;
    margin-bottom:36px !important;
  }
  body[data-view="home"] .site-footer{
    margin-bottom:18px !important;
  }
}


/* ===== v31 desktop EN/HE header + guaranteed desktop scrolling ===== */

/* This was intended in v30 but its CSS block was malformed. */
.mode-label-order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.36em;
  white-space:nowrap;
}
html[lang="en"] .mode-label-order{flex-direction:row;direction:ltr;}
html[lang="he"] .mode-label-order{flex-direction:row;direction:rtl;}
.mode-label-symbol{display:inline-block;direction:ltr;unicode-bidi:isolate;}

@media (min-width:761px){
  /* Physical placement on desktop in BOTH languages:
     logo left, optional screen title centered, language switch right.
     Exclude the special full-screen Pong landscape shell. */
  body:not(.pong-landscape-active) .site-header{
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) 72px !important;
    grid-template-areas:"brand title actions" !important;
    align-items:center !important;
    direction:ltr !important;
    min-height:64px !important;
  }
  body:not(.pong-landscape-active) .site-header .brand{
    grid-area:brand !important;
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    align-self:center !important;
    margin:0 !important;
  }
  body:not(.pong-landscape-active) .site-header .screen-title{
    grid-area:title !important;
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    text-align:center !important;
  }
  body:not(.pong-landscape-active) .site-header .header-actions{
    grid-area:actions !important;
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
    margin:0 !important;
  }
  body:not(.pong-landscape-active) .site-header .ghost-pill{
    margin:0 !important;
    align-self:center !important;
  }

  /* Desktop pages are normal documents and always expose a vertical scrollbar.
     This does not apply to the mobile full-screen Pong landscape shell. */
  html{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:scroll !important;
  }
  body:not(.pong-landscape-active){
    display:block !important;
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }
  body:not(.pong-landscape-active) .app-shell{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body[data-view="home"]:not(.pong-landscape-active) .app-shell{
    min-height:0 !important;
    margin-bottom:36px !important;
  }
}


/* ===== v32 question variety + visible label spacing + desktop wheel fallback ===== */
.mode-label-order{
  gap:.62em !important;
}
.game-card .mode-label-order,
.mode-card .mode-label-order,
.quiz-mode-title-inline .mode-label-order{
  column-gap:.62em !important;
}

/* Keep desktop document genuinely scrollable; the JS wheel fallback only runs on Home. */
@media (min-width:761px){
  html,body{
    overscroll-behavior-y:auto !important;
  }
  body[data-view="home"]:not(.pong-landscape-active){
    touch-action:auto !important;
  }
}

/* v37: the Android host applies and consumes system-bar insets once.
   Do not reserve that native navigation area a second time in the web footer. */
@media (max-width:760px), (pointer:coarse){
  html.minik-android-inset-host body:not(.pong-landscape-active) .site-footer{
    margin-bottom:8px !important;
    padding-bottom:0 !important;
  }
}

/* Android Math home only: keep logo/language placement and the other screens intact. */
.site-header .native-math-exit{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:44px;height:44px;min-height:44px;
  padding:6px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);
  cursor:pointer;pointer-events:auto;
}
.site-header .native-math-exit img{width:32px;height:32px;object-fit:contain;display:block;}
.site-header .native-math-exit[hidden]{display:none !important;}

/* v40: one responsive header, no operation title on top of the question counter.
   The exit/language swap is native Math Home only. Website has no native X. */
html.math-v40 body:not(.pong-landscape-active) header.site-header{
  display:grid !important;grid-template-columns:64px minmax(0,1fr) 64px !important;
  grid-template-areas:"brand title actions" !important;direction:ltr !important;
  align-items:center !important;column-gap:10px !important;
}
html.math-v40[dir="rtl"] body:not(.pong-landscape-active) header.site-header{
  grid-template-areas:"actions title brand" !important;
}
html.math-v40 body:not(.pong-landscape-active) header.site-header .brand{
  grid-area:brand !important;justify-self:center !important;grid-column:auto !important;grid-row:1 !important;
}
html.math-v40 body:not(.pong-landscape-active) header.site-header .header-actions{
  grid-area:actions !important;justify-self:center !important;grid-column:auto !important;grid-row:1 !important;
}
html.math-v40 body:not(.pong-landscape-active) header.site-header .screen-title{
  display:block !important;grid-area:title !important;grid-column:2 !important;grid-row:1 !important;
  position:static !important;transform:none !important;margin:0 !important;padding:0 !important;
  min-width:0 !important;max-width:100% !important;text-align:center !important;
  font-size:clamp(18px,3.8vw,28px) !important;line-height:1.2 !important;font-weight:700 !important;
  color:#987000 !important;background:none !important;border:0 !important;
}
html.math-v40 body:not(.pong-landscape-active) header.site-header .screen-title[hidden]{display:none !important;}
html.math-v40 body.native-math-home:not(.pong-landscape-active) header.site-header{
  grid-template-areas:"brand actions exit" !important;
}
html.math-v40[dir="rtl"] body.native-math-home:not(.pong-landscape-active) header.site-header{
  grid-template-areas:"exit actions brand" !important;
}
html.math-v40 body.native-math-home:not(.pong-landscape-active) header.site-header .header-actions{
  grid-column:2 !important;
}
html.math-v40 body.native-math-home header.site-header .native-math-exit{
  position:static !important;transform:none !important;grid-area:exit !important;
  grid-row:1 !important;justify-self:center !important;pointer-events:auto;
}
html.math-v40 .quiz-panel > .back-row{
  display:flex !important;justify-content:space-between !important;gap:12px !important;
}
html.math-v40 .quiz-panel > .back-row .progress-chip{
  position:static !important;transform:none !important;min-width:0;white-space:normal;text-align:center;
}
html.math-v40 .practice-level-section{scroll-margin-top:100px;}
/* Mirror the bitmap, not its parent layout: avoids double transforms from old rules. */
html.math-v40[dir] .hero-art{transform:none !important;}
html.math-v40[dir="rtl"] .hero-art img{transform:scaleX(-1) !important;}
html.math-v40[dir="ltr"] .hero-art img{transform:none !important;}
@media(max-width:380px){
 html.math-v40 body:not(.pong-landscape-active) header.site-header{
  grid-template-columns:54px minmax(0,1fr) 54px !important;column-gap:6px !important;
 }
 html.math-v40 .screen-title .mode-label-order{gap:.3em !important;white-space:normal;}
}
html.math-v40 body:not(.pong-landscape-active) header.site-header .brand{grid-column:1 !important;}
html.math-v40 body:not(.pong-landscape-active) header.site-header .header-actions{grid-column:3 !important;}
html.math-v40[dir="rtl"] body:not(.pong-landscape-active) header.site-header .brand{grid-column:3 !important;}
html.math-v40[dir="rtl"] body:not(.pong-landscape-active) header.site-header .header-actions{grid-column:1 !important;}
html.math-v40 body.native-math-home:not(.pong-landscape-active) header.site-header .header-actions{grid-column:2 !important;}
html.math-v40 body.native-math-home:not(.pong-landscape-active) header.site-header .native-math-exit{grid-column:3 !important;}
html.math-v40[dir="rtl"] body.native-math-home:not(.pong-landscape-active) header.site-header .native-math-exit{grid-column:1 !important;}

/* v46: consistent interface typography; no downloaded font dependency. */
button,input,select,textarea{font-family:inherit;}

.app-page-pill{display:inline-flex;align-items:center;text-decoration:none;border:1px solid rgba(111,101,232,.28);background:linear-gradient(135deg,rgba(111,101,232,.14),rgba(255,255,255,.82));color:var(--ink);border-radius:999px;padding:9px 15px;font-weight:800;white-space:nowrap}.app-page-pill:hover{transform:translateY(-1px)}
@media(max-width:520px){.app-page-pill{font-size:12px;padding:8px 11px}}

/* App links must fit beside the language switch, including narrow RTL screens. */
html body:not(.pong-landscape-active) header.site-header:has(.app-page-pill){
 grid-template-columns:max-content minmax(0,1fr) max-content !important;
 column-gap:8px !important;
}
.app-page-pill{font-size:13px;max-width:100%;line-height:1.3;min-height:40px;justify-content:center}
.app-page-pill:focus-visible{outline:3px solid #6f65e8;outline-offset:3px}
@media(max-width:430px){.app-page-pill{font-size:11px;padding:8px 9px}.header-actions{gap:5px}}