: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;
  }
}


/* ===== Stable result banner (v34: portrait is no longer blocked) ===== */
.pong-rotate-gate{display:none;}
.pong-landscape-center{grid-area:score;justify-self:center;display:grid;place-items:center;min-width:0;max-width:min(64vw,520px);}
.pong-landscape-center > *{grid-area:1/1;}
.pong-landscape-message{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  max-width:min(64vw,520px);
  padding:7px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font-weight:700;
  font-size:clamp(.78rem,2vw,1rem);
  line-height:1.15;
  text-align:center;
  white-space:normal;
  box-shadow:0 7px 20px rgba(0,0,0,.14);
}
.pong-landscape-message[hidden],.pong-landscape-score[hidden]{display:none !important;}

@media (max-width:760px), (pointer:coarse){
  /* Portrait fallback result text can wrap instead of being clipped. */
  body[data-view="pong"] .pong-header-message{
    white-space:normal !important;
    text-overflow:clip !important;
    overflow:visible !important;
    line-height:1.08 !important;
    max-width:100% !important;
    font-size:clamp(.66rem,2.7vw,.82rem) !important;
  }
}

body.pong-landscape-active .pong-rotate-gate{display:none !important;}
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;
}


/* v36: compact setup-only choices and an independent full-width action row.
   The header and Start button are centered against the entire overlay, never
   against the choices column. Desktop, portrait and the playing HUD are unchanged. */
body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
  --pong-setup-control-height:36px;
  --pong-setup-start-height:36px;
  --pong-setup-section-gap:22px;
  --pong-setup-row-gap:12px;
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  align-content:center;
  justify-items:center;
  gap:var(--pong-setup-section-gap) !important;
  padding:14px 18px !important;
  overflow:auto;
}
body.pong-landscape-active .pong-setup-header{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  align-items:center;
  column-gap:12px;
  width:100%;
}
body.pong-landscape-active .pong-setup-title{
  grid-column:2;
  grid-row:1;
  min-width:0;
  margin:0;
  text-align:center;
  font-size:clamp(1.15rem,3.7vw,1.6rem);
  font-weight:700;
  line-height:1.2;
  color:#fff;
}
body.pong-landscape-active .pong-setup-logo{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  display:block;
  width:54px;
  height:54px;
  padding:3px;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.94);
}
body.pong-landscape-active .pong-setup-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,3.4vw,32px);
  width:100%;
  min-width:0;
}
body.pong-landscape-active .pong-setup-body .pong-landscape-art{
  flex:0 1 auto;
  min-width:48px;
}
body.pong-landscape-active .pong-setup-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
body.pong-landscape-active .pong-landscape-setup-controls{
  display:grid !important;
  grid-template-columns:max-content max-content !important;
  column-gap:16px !important;
  row-gap:var(--pong-setup-row-gap) !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  flex:none !important;
}
body.pong-landscape-active .pong-landscape-control-row:not(.pong-landscape-start){
  display:contents !important;
}
body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons{
  display:grid !important;
  grid-template-columns:repeat(3,max-content) !important;
  gap:6px !important;
  width:max-content !important;
}
body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons button{
  height:var(--pong-setup-control-height);
  min-height:var(--pong-setup-control-height) !important;
  min-width:0;
  padding:4px 11px;
  line-height:1.15;
  font-size:.82rem;
  margin:0;
}
body.pong-landscape-active .pong-landscape-setup-controls .pong-setup-label,
body.pong-landscape-active .pong-landscape-setup-controls .pong-target-label,
body.pong-landscape-active .pong-landscape-difficulty > span{
  font-size:.88rem;
  font-weight:700;
  line-height:1.25;
  margin:0 !important;
  white-space:nowrap;
  text-align:start;
  color:#fff;
}
body.pong-landscape-active .pong-landscape-setup-controls .pong-target-select,
body.pong-landscape-active .pong-landscape-start{
  width:100% !important;
  min-width:0 !important;
  height:var(--pong-setup-control-height);
  min-height:var(--pong-setup-control-height) !important;
  box-sizing:border-box;
}
body.pong-landscape-active .pong-landscape-setup-controls .pong-target-select{
  padding-block:3px;
  line-height:1.15;
}
body.pong-landscape-active .pong-setup-actions .pong-landscape-start{
  width:min(228px,100%) !important;
  flex:none;
  height:var(--pong-setup-start-height);
  min-height:var(--pong-setup-start-height) !important;
  font-size:.88rem;
  line-height:1.2;
  padding:5px 12px !important;
}
.pong-madness-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  width:100%;
}
.pong-madness-options button{
  min-height:40px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(#faf8ff,#faf8ff) padding-box,linear-gradient(100deg,#ff76b6,#ffc769,#8b79ff) border-box;
  color:var(--ink);
  font:inherit;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
}
body.pong-landscape-active .pong-landscape-setup-controls .pong-madness-options button{
  height:var(--pong-setup-control-height);
  min-height:var(--pong-setup-control-height);
  padding-block:3px;
  line-height:1.15;
}
.pong-madness-options button.active{
  background:linear-gradient(135deg,var(--violet),var(--violet-2)) padding-box,linear-gradient(100deg,#ff76b6,#ffc769,#8b79ff) border-box;
  color:#fff;
  box-shadow:inset 0 2px 5px rgba(25,18,78,.28);
}
.pong-setup-nav{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  z-index:11;
}
.pong-setup-nav .back-btn{
  width:42px;
  height:42px;
  margin:0;
  background:rgba(255,255,255,.94);
}
.back-btn.pong-exit-btn{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:4px !important;
}
.back-btn.pong-exit-btn img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}
.pong-orientation-hint{
  position:fixed;
  inset-inline:16px;
  inset-block-end:max(20px,env(safe-area-inset-bottom));
  z-index:1000;
  width:fit-content;
  max-width:calc(100vw - 32px);
  margin-inline:auto;
  border-radius:18px;
  padding:12px 18px;
  background:rgba(31,27,62,.95);
  color:#fff;
  font-size:.9rem;
  line-height:1.5;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  pointer-events:none;
}
.pong-exit-panel{
  text-align:center;
  margin:20px auto;
  max-width:560px;
}
.pong-exit-panel > img{width:min(200px,50vw);height:auto;}
.pong-exit-panel p{margin:16px 0 24px;line-height:1.6;}
/* Only the body adapts to narrow windows. The top-row logo, title and
   back/X keep their existing size, order and styling. No text is ellipsized. */
@media (max-width:540px){
  body.pong-landscape-active .pong-setup-body{gap:12px;}
  body.pong-landscape-active .pong-setup-body .pong-landscape-art{
    width:clamp(48px,14vw,76px) !important;
    min-width:40px;
  }
  body.pong-landscape-active .pong-landscape-setup-controls{column-gap:12px !important;}
  body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons button{
    padding-inline:7px;
  }
}
@media (max-width:460px){
  body.pong-landscape-active .pong-setup-body{gap:8px;}
  body.pong-landscape-active .pong-setup-body .pong-landscape-art{
    width:40px !important;
    min-width:40px;
  }
  body.pong-landscape-active .pong-landscape-setup-controls{
    grid-template-columns:fit-content(110px) max-content !important;
    column-gap:8px !important;
  }
  body.pong-landscape-active .pong-landscape-setup-controls .pong-setup-label,
  body.pong-landscape-active .pong-landscape-setup-controls .pong-target-label,
  body.pong-landscape-active .pong-landscape-difficulty > span{
    white-space:normal;
    line-height:1.15;
  }
  body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons button{
    padding-inline:4px;
  }
}
@media (max-width:400px){
  body.pong-landscape-active .pong-setup-body{gap:6px;}
  body.pong-landscape-active .pong-setup-body .pong-landscape-art{
    width:32px !important;
    min-width:32px;
  }
  body.pong-landscape-active .pong-landscape-setup-controls{
    grid-template-columns:fit-content(96px) max-content !important;
    column-gap:6px !important;
  }
  body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons button{
    padding-inline:2px;
  }
}
@media (max-width:350px){
  body.pong-landscape-active .pong-setup-body{gap:4px;}
  body.pong-landscape-active .pong-setup-body .pong-landscape-art{
    width:28px !important;
    min-width:28px;
  }
  body.pong-landscape-active .pong-landscape-setup-controls{
    grid-template-columns:fit-content(72px) max-content !important;
    column-gap:4px !important;
  }
  body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons{gap:4px !important;}
  body.pong-landscape-active .pong-landscape-setup-controls .pong-difficulty-buttons button{
    padding-inline:1px;
  }
}
@media (max-height:310px){
  body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
    --pong-setup-control-height:32px;
    --pong-setup-start-height:34px;
    --pong-setup-section-gap:16px;
    --pong-setup-row-gap:10px;
    inset:4px;
    padding:6px 12px !important;
  }
  /* Header sizes are identical to v35. Only controls below it become slimmer. */
  body.pong-landscape-active .pong-setup-header{grid-template-columns:48px minmax(0,1fr) 48px;}
  body.pong-landscape-active .pong-setup-logo{width:44px;height:44px;}
  body.pong-landscape-active .pong-setup-title{font-size:1.2rem;}
  body.pong-landscape-active .pong-landscape-art{max-height:38vh !important;}
}
@media (max-height:245px){
  body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
    --pong-setup-control-height:30px;
    --pong-setup-start-height:32px;
    --pong-setup-section-gap:12px;
    --pong-setup-row-gap:6px;
    padding-block:4px !important;
  }
}
@media (max-height:225px){
  body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
    --pong-setup-start-height:30px;
    --pong-setup-section-gap:8px;
    --pong-setup-row-gap:4px;
    align-content:start;
  }
}
/* Emergency fallback for exceptionally small windows or enlarged text:
   scroll inside setup rather than crop a choice or the centered Start action. */

/* 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;
  }
}

/* v37: during rotation the CSS media query can change before the JS class.
   Never expose the landscape setup through the older media-query-only rule. */
body[data-view="pong"]:not(.pong-landscape-active) .pong-landscape-setup{
  display:none !important;
}
/* Intrinsic-size guard even during a partially applied/transitioning layout. */
.pong-setup-logo{width:54px;height:54px;max-width:100%;object-fit:contain;}


/* ===== v38: viewport-sized DESKTOP Pong, independently scrolling controls =====
   The class uses the same device test as the game; a short laptop window is not
   the phone landscape UI. No Math, portrait or touch-landscape rule is changed.
   All grid ancestors need min-height:0 so the sidebar cannot enlarge the arena. */
html.pong-desktop-active[data-view="pong"]{
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}
body.pong-desktop-active[data-view="pong"]{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto;
  row-gap:10px;
  height:100vh !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  padding:10px 0 8px !important;
  overflow:hidden !important;
}
body.pong-desktop-active[data-view="pong"] .site-header{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  margin:0 auto !important;
  padding:0 !important;
}
body.pong-desktop-active[data-view="pong"] .app-shell{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  width:min(1040px,calc(100% - 28px)) !important;
  margin:0 auto !important;
  padding:0 !important;
  border-radius:34px;
  overflow:hidden !important;
}
body.pong-desktop-active[data-view="pong"] .pong-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  padding:16px !important;
  overflow:hidden !important;
}
body.pong-desktop-active[data-view="pong"] .pong-header-row{
  margin:0 !important;
}
body.pong-desktop-active[data-view="pong"] .pong-wrap{
  grid-template-columns:minmax(0,1fr) minmax(240px,300px) !important;
  grid-template-rows:minmax(0,1fr);
  gap:18px !important;
  height:100% !important;
  min-height:0 !important;
  align-items:stretch !important;
  overflow:hidden !important;
}
body.pong-desktop-active[data-view="pong"] .canvas-card,
body.pong-desktop-active[data-view="pong"] #pongCanvas{
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  align-self:stretch !important;
}
body.pong-desktop-active[data-view="pong"] .pong-side{
  display:flex !important;
  flex-direction:column !important;
  height:100%;
  max-height:100%;
  min-height:0 !important;
  min-width:0;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--violet) rgba(111,101,232,.12);
  padding:3px 6px 6px;
}
body.pong-desktop-active[data-view="pong"] .pong-side > *{
  flex:0 0 auto;
}
body.pong-desktop-active[data-view="pong"] .site-footer{
  margin:0 auto !important;
  padding:0 !important;
  min-height:0;
  line-height:1.4;
}

/* On unusually short desktop windows, recover space from gaps/padding only.
   Keep the logo, labels and controls at their existing readable sizes. */
@media (max-height:480px){
  body.pong-desktop-active[data-view="pong"]{
    row-gap:6px;
    padding-block:6px !important;
  }
  body.pong-desktop-active[data-view="pong"] .pong-panel{
    gap:8px;
    padding:10px !important;
  }
}

/* ===== v39: persistent score/outcome + independent Balloon Madness =====
   The two controls form one centered group. Only the score slot changes at
   match end, so result text never hides Madness or resizes the desktop arena. */
body[data-view="pong"] .pong-header-center,
body.pong-landscape-active .pong-landscape-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:0;
  max-width:100%;
}
body[data-view="pong"] .pong-status-slot{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:42px;
  flex:0 1 196px;
  width:196px;
  min-width:0;
  align-items:stretch;
}
body[data-view="pong"] .pong-status-slot > *{
  grid-area:1 / 1;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  margin:0 !important;
}
body[data-view="pong"] .pong-live-score{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:3px 12px;
  border:1px solid rgba(105,91,220,.18);
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  box-shadow:0 7px 16px rgba(73,66,141,.10);
  direction:ltr;
  unicode-bidi:isolate;
}
.pong-live-player{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:34px;
}
.pong-live-player strong{font-size:18px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;}
.pong-live-player small{font-size:11px;line-height:1.1;font-weight:700;color:var(--ink-soft);}
.pong-live-separator{font-size:18px;line-height:1;font-weight:700;}
body[data-view="pong"] .pong-status-slot .pong-header-message,
body[data-view="pong"] .pong-status-slot .pong-landscape-message{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:4px 10px;
  font-size:.84rem !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:center;
}
body[data-view="pong"] .pong-status-slot > [hidden]{display:none !important;}
.pong-live-player strong.pong-point-flash{animation:pongScorePointFlash 650ms ease-in-out;transform-origin:center;}
body[data-view="pong"] .pong-header-center > [data-pong-madness-toggle],
body.pong-landscape-active .pong-landscape-center > [data-pong-madness-toggle]{
  grid-area:auto;
  flex:0 0 auto;
  /* Preserve the colorful 2px outline's geometry when the active fill changes. */
  border-width:2px;
  min-height:40px;
  max-width:100%;
  margin:0 !important;
  white-space:nowrap;
  text-overflow:clip;
  overflow:visible;
}

/* Equal outer tracks center the combined group across the whole desktop row,
   regardless of which side contains the Back/X or the longer game title. */
body.pong-desktop-active[data-view="pong"] .pong-header-row{
  grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr) !important;
  grid-template-areas:"back center title" !important;
  direction:ltr !important;
  gap:12px !important;
}
html[lang="he"] body.pong-desktop-active[data-view="pong"] .pong-header-row{
  grid-template-areas:"title center back" !important;
}
body.pong-desktop-active[data-view="pong"] .pong-header-row > .back-btn{grid-area:back;justify-self:start;}
html[lang="he"] body.pong-desktop-active[data-view="pong"] .pong-header-row > .back-btn{justify-self:end;}
body.pong-desktop-active[data-view="pong"] .pong-header-center{grid-area:center;width:auto !important;}
body.pong-desktop-active[data-view="pong"] .pong-badge{
  grid-area:title;
  min-width:0;
  max-width:100%;
  text-align:center;
  justify-self:end;
}
html[lang="he"] body.pong-desktop-active[data-view="pong"] .pong-badge{justify-self:start;direction:rtl;}
/* The primary scoreboard moved into the fixed header, out of the scroll area. */
body.pong-desktop-active[data-view="pong"] .pong-side .pong-score-grid{display:none;}
@media (max-width:1000px){
  body.pong-desktop-active[data-view="pong"] .pong-badge{font-size:.82rem;line-height:1.15;padding:6px 8px;}
  body.pong-desktop-active[data-view="pong"] .pong-header-center{gap:8px;}
  body.pong-desktop-active[data-view="pong"] .pong-status-slot{width:180px;flex-basis:180px;}
  body.pong-desktop-active[data-view="pong"] .pong-madness-toggle{padding-inline:10px;}
}

/* Portrait has room vertically: keep the existing Back/New row and add the
   centered group below it. This small toolbar stays visible while scrolling;
   it never covers content initially or changes the size of the playfield. */
body[data-view="pong"]:not(.pong-desktop-active):not(.pong-landscape-active) .pong-header-row{
  position:sticky;
  top:max(4px,env(safe-area-inset-top));
  z-index:12;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  grid-template-areas:"back . new" "center center center" !important;
  gap:10px !important;
  direction:ltr !important;
  padding:6px 4px 8px;
  border-radius:22px;
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 18px rgba(73,66,141,.06);
}
html[lang="he"] body[data-view="pong"]:not(.pong-desktop-active):not(.pong-landscape-active) .pong-header-row{
  grid-template-areas:"new . back" "center center center" !important;
}
body[data-view="pong"]:not(.pong-desktop-active):not(.pong-landscape-active) .pong-header-center{
  grid-area:center;
  width:100% !important;
  gap:8px;
}
body[data-view="pong"]:not(.pong-desktop-active):not(.pong-landscape-active) .pong-status-slot{flex-basis:170px;width:170px;}
body[data-view="pong"]:not(.pong-desktop-active):not(.pong-landscape-active) .pong-madness-toggle{
  font-size:.8rem;
  padding-inline:10px;
}
body[data-view="pong"]:not(.pong-desktop-active):not(.pong-landscape-active) .pong-badge{display:none !important;}

/* The in-game landscape HUD uses the same state, independently of its hidden
   portrait counterpart. The setup overlay and canvas geometry are unchanged. */
body.pong-landscape-active .pong-landscape-center{
  grid-area:score;
  width:max-content;
  max-width:100%;
  gap:10px;
  justify-self:center;
}
body.pong-landscape-active .pong-landscape-center > .pong-status-slot{grid-area:auto;flex-basis:176px;width:176px;}
body.pong-landscape-active .pong-landscape-center > [data-pong-madness-toggle]{
  pointer-events:auto;
  padding-inline:12px;
}
body.pong-landscape-active .pong-landscape-center .pong-live-score{justify-self:stretch;min-height:0;}
@media (max-width:600px){
  body.pong-landscape-active .pong-landscape-center{width:min(100%,310px);gap:8px;}
  body.pong-landscape-active .pong-landscape-center > .pong-status-slot{flex:1 1 144px;width:144px;}
  body.pong-landscape-active .pong-landscape-center > [data-pong-madness-toggle]{
    font-size:.76rem;
    padding:5px 8px;
    white-space:normal;
    line-height:1.1;
  }
}
@media (max-width:480px){
  body.pong-landscape-active[data-view="pong"] .pong-landscape-hud{
    grid-template-columns:68px minmax(0,1fr) 68px;
    column-gap:4px;
  }
  body.pong-landscape-active .pong-landscape-center{gap:6px;}
  body.pong-landscape-active .pong-landscape-center > [data-pong-madness-toggle]{flex:0 1 98px;min-width:70px;padding-inline:5px;}
  body.pong-landscape-active .pong-live-score{gap:5px;padding-inline:4px;}
  body.pong-landscape-active .pong-live-player{min-width:24px;}
  body.pong-landscape-active .pong-live-player small{font-size:10px;}
  body.pong-landscape-active .pong-status-slot .pong-landscape-message{font-size:.72rem !important;padding:3px 4px;}
}
@media (max-width:380px){
  body.pong-landscape-active .pong-landscape-center > [data-pong-madness-toggle]{flex-basis:74px;font-size:.68rem;}
  body.pong-landscape-active .pong-status-slot .pong-landscape-message{font-size:.66rem !important;padding:2px;}
  body.pong-landscape-active .pong-live-score{gap:3px;padding-inline:2px;}
  body.pong-landscape-active .pong-live-player{min-width:20px;}
  body.pong-landscape-active .pong-live-player strong{font-size:16px;}
}

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


/* v47: paddle progression, compact gear actions, and cleaner mobile landscape setup */
.pong-settings-gear{
  display:inline-grid;place-items:center;
  width:36px;height:36px;min-width:36px;min-height:36px;
  padding:0;border-radius:50%;border:1px solid #e4d7ff;
  background:rgba(255,255,255,.94);color:#352e6f;font-size:20px;font-weight:700;
  box-shadow:0 6px 18px rgba(38,30,95,.18);
}
.pong-settings-gear span{line-height:1;transform:translateY(-.5px);}
.pong-settings-entry .pong-settings-gear{width:40px;height:40px;}
body.pong-landscape-active[data-view="pong"] .app-shell,
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{background:#171728 !important;}
body.pong-landscape-active[data-view="pong"] .pong-panel{border-radius:22px !important;overflow:hidden !important;}
body.pong-landscape-active[data-view="pong"] .pong-landscape-hud{grid-template-columns:42px minmax(0,1fr) 58px 36px !important;grid-template-areas:"back score madness new" !important;column-gap:8px !important;align-items:start !important;}
html[lang="he"] body.pong-landscape-active[data-view="pong"] .pong-landscape-hud{grid-template-areas:"new madness score back" !important;}
body.pong-landscape-active .pong-landscape-score{min-width:0 !important;width:100%;justify-self:stretch !important;}
body.pong-landscape-active .pong-landscape-center{display:grid !important;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;}
body.pong-landscape-active .pong-landscape-center > [data-pong-madness-toggle]{grid-area:madness;pointer-events:auto;}
body.pong-landscape-active .pong-landscape-help{display:inline-grid !important;grid-area:new;pointer-events:auto;justify-self:end;}
body.pong-landscape-active .pong-landscape-new{grid-area:back;pointer-events:auto;justify-self:start;min-width:58px !important;}
html[lang="he"] body.pong-landscape-active .pong-landscape-new{justify-self:start;}
html[lang="he"] body.pong-landscape-active .pong-landscape-help{justify-self:end;}
body.pong-landscape-active[data-view="pong"] .pong-wrap{padding:0 !important;}
body.pong-landscape-active[data-view="pong"] .pong-playfield,
body.pong-landscape-active[data-view="pong"] #pongCanvas{border-radius:18px !important;}
body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
  --pong-setup-control-height:38px;
  --pong-setup-start-height:38px;
  --pong-setup-section-gap:24px;
  --pong-setup-row-gap:16px;
  padding:18px 18px 34px !important;
  overflow:hidden !important;
}
body.pong-landscape-active .pong-setup-header{margin-top:8px;}
body.pong-landscape-active .pong-setup-nav{margin-top:6px;}
body.pong-landscape-active .pong-setup-logo{margin-top:6px;}
body.pong-landscape-active .pong-setup-actions{margin-bottom:18px;}
body.pong-landscape-active .pong-landscape-setup-controls{row-gap:16px !important;}
body.pong-landscape-active .pong-landscape-art{width:clamp(74px,18vw,132px) !important;max-height:40vh !important;}
@media (max-width:540px){
  body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{padding-bottom:24px !important;}
  body.pong-landscape-active .pong-landscape-setup-controls{row-gap:12px !important;}
}
@media (max-width:420px), (max-height:300px){
  body.pong-landscape-active[data-view="pong"].pong-waiting .pong-landscape-setup{
    --pong-setup-control-height:34px;
    --pong-setup-start-height:34px;
    --pong-setup-section-gap:14px;
    --pong-setup-row-gap:10px;
    padding:10px 12px 18px !important;
  }
  body.pong-landscape-active .pong-landscape-art{width:clamp(56px,14vw,90px) !important;}
}


/* v49: desktop side panel fills the court height; mobile keeps compact gear. */
body.pong-desktop-active[data-view="pong"] .pong-side{height:100% !important;align-self:stretch !important;}
body.pong-desktop-active[data-view="pong"] .pong-side>.primary{margin-top:auto !important;}
body.pong-desktop-active[data-view="pong"] .pong-settings-entry{display:flex;width:100%;}
body.pong-desktop-active[data-view="pong"] .pong-settings-text{width:100%;min-height:42px;border:1px solid #ddd5ff;border-radius:14px;background:#f5f1ff;color:#342d6d;font-weight:700;}
html[lang="en"] body.pong-desktop-active[data-view="pong"] .pong-art{transform:scaleX(-1);}

.app-page-pill{display:inline-flex;align-items:center;text-decoration:none;border:1px solid rgba(230,185,255,.38);background:linear-gradient(135deg,rgba(230,185,255,.18),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}}

html body:not(.pong-landscape-active) header.site-header .screen-title{min-width:0;max-width:100%;white-space:normal !important;line-height:1.15}
@media(max-width:640px){html body:not(.pong-landscape-active) header.site-header .screen-title{font-size:12px !important}}
.pong-setup-app-link{grid-column:2;grid-row:2;justify-self:center;display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.2;text-decoration:none;padding:5px 12px;border-radius:999px;background:#f0ebff;color:#4c3c88;font-weight:700}