:root{
  --bg-deep:#0a0e24;
  --bg-mid:#161c47;
  --bg-panel:rgba(255,255,255,0.055);
  --bg-panel-strong:rgba(255,255,255,0.09);
  --border-soft:rgba(255,255,255,0.10);
  --gold:#FFD34D;
  --gold-dim:#c9a53c;
  --gold-surface:#FFD34D;
  --gold-muted:rgba(255,211,77,.25);
  --gold-wash:rgba(255,211,77,.08);
  --ink:#FFFFFF;
  --ink-dim:#c3caf0;
  --red-1:#FF2E63;
  --red-2:#FF6B6B;
  --red-glow:#ff4d7a;
  --blue-1:#3B82F6;
  --blue-2:#60A5FA;
  --blue-glow:#50A7FF;
  --teal-1:#00C2A8;
  --teal-2:#4DE8D1;
  --teal-glow:#26e0c2;
  --danger:#ff5470;
  --team-red-bg:rgba(255,46,99,.28);
  --team-blue-bg:rgba(59,130,246,.28);
  --field-bg:rgba(0,0,0,.42);
  --key-bg:rgba(255,255,255,.10);
  --key-hover-bg:rgba(255,255,255,.18);
  --banner-bg:rgba(8,10,30,.88);
  --blue-action-text:#071a3a;
  --team-red-border:rgba(255,46,99,.55);
  --team-blue-border:rgba(59,130,246,.65);
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --font-display:ui-rounded,'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  --font-body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg-deep:#e7ebf6;
  --bg-mid:#f8f9fd;
  --bg-panel:rgba(255,255,255,.78);
  --bg-panel-strong:rgba(255,255,255,.96);
  --border-soft:rgba(24,34,72,.20);
  --gold:#8d6500;
  --gold-dim:#a47700;
  --gold-surface:#f4c542;
  --gold-muted:rgba(141,101,0,.34);
  --gold-wash:rgba(141,101,0,.10);
  --ink:#18213f;
  --ink-dim:#45516f;
  --red-1:#d90e4b;
  --red-2:#b82856;
  --blue-1:#1c5fc1;
  --blue-2:#1659b2;
  --teal-1:#007d70;
  --teal-2:#00695c;
  --teal-glow:#008f7d;
  --danger:#b51e40;
  --team-red-bg:#d4114d;
  --team-blue-bg:#1d5eb9;
  --field-bg:#ffffff;
  --key-bg:#ffffff;
  --key-hover-bg:#eef2fb;
  --banner-bg:rgba(255,255,255,.98);
  --blue-action-text:#ffffff;
  --team-red-border:rgba(217,14,75,.65);
  --team-blue-border:rgba(28,95,193,.65);
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg-deep:#e7ebf6;
    --bg-mid:#f8f9fd;
    --bg-panel:rgba(255,255,255,.78);
    --bg-panel-strong:rgba(255,255,255,.96);
    --border-soft:rgba(24,34,72,.20);
    --gold:#8d6500;
    --gold-dim:#a47700;
    --gold-surface:#f4c542;
    --gold-muted:rgba(141,101,0,.34);
    --gold-wash:rgba(141,101,0,.10);
    --ink:#18213f;
    --ink-dim:#45516f;
    --red-1:#d90e4b;
    --red-2:#b82856;
    --blue-1:#1c5fc1;
    --blue-2:#1659b2;
    --teal-1:#007d70;
    --teal-2:#00695c;
    --teal-glow:#008f7d;
    --danger:#b51e40;
    --team-red-bg:#d4114d;
    --team-blue-bg:#1d5eb9;
    --field-bg:#ffffff;
    --key-bg:#ffffff;
    --key-hover-bg:#eef2fb;
    --banner-bg:rgba(255,255,255,.98);
    --blue-action-text:#ffffff;
    --team-red-border:rgba(217,14,75,.65);
    --team-blue-border:rgba(28,95,193,.65);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-x:hidden;}
body{
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%,rgba(255,45,99,0.12),transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 0%,rgba(0,194,168,0.10),transparent 60%),
    linear-gradient(160deg,var(--bg-deep),var(--bg-mid) 60%,var(--bg-deep));
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  left:50%;top:8%;
  width:min(70vw,620px);height:520px;
  transform:translateX(-50%);
  background:var(--ink);
  opacity:0.035;
  pointer-events:none;
  z-index:0;
  clip-path:polygon(50% 0%,62% 10%,58% 10%,58% 16%,70% 24%,30% 24%,42% 16%,42% 10%,38% 10%);
}

button{font:inherit;}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.screen{
  display:none;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  position:relative;
  z-index:1;
  padding:max(22px,env(safe-area-inset-top))
    max(clamp(16px,4vw,56px),env(safe-area-inset-left))
    max(34px,env(safe-area-inset-bottom))
    max(clamp(16px,4vw,56px),env(safe-area-inset-right));
}
.screen.active{display:flex;flex-direction:column;}

.topbar{
  display:flex;justify-content:flex-end;gap:10px;
  position:absolute;top:max(18px,env(safe-area-inset-top));right:max(clamp(14px,3vw,40px),env(safe-area-inset-right));
  z-index:5;
}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:2px solid var(--gold-dim);
  background:var(--bg-panel-strong);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 18px rgba(0,0,0,.2);}
.icon-btn:active{transform:translateY(0) scale(.94);}
.icon-btn[aria-pressed="true"]{opacity:1;}
.icon-glyph{display:flex;width:19px;height:19px;align-items:center;justify-content:center;}
.icon-glyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.back-btn{
  position:absolute;top:max(18px,env(safe-area-inset-top));left:max(clamp(14px,3vw,40px),env(safe-area-inset-left));
  width:42px;height:42px;border-radius:50%;
  border:2px solid var(--gold-dim);
  background:var(--bg-panel-strong);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:0;line-height:1;
  cursor:pointer;z-index:5;touch-action:manipulation;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  transition:transform .15s ease,box-shadow .15s ease;
}
.back-btn::before{
  content:"";
  display:block;
  width:18px;height:14px;
  background:currentColor;
  clip-path:polygon(0 50%,9px 0,9px 5px,18px 5px,18px 9px,9px 9px,9px 14px);
}
.back-btn:hover{transform:translateX(-3px);box-shadow:0 6px 16px rgba(0,0,0,.2);}

#screen-home{align-items:center;justify-content:center;text-align:center;}
.home-inner{width:100%;max-width:760px;margin:0 auto;}
.brand-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  color:var(--gold);letter-spacing:.5px;
  text-shadow:0 0 20px rgba(255,211,77,.25),0 2px 0 rgba(0,0,0,.16);
  margin:0 0 6px;line-height:1.05;text-wrap:balance;
}
.brand-sub{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,2.6vw,1.55rem);
  color:var(--red-2);margin:0 0 44px;
}
.home-visual{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 30px;}
.math-tile,.math-target{
  display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
  font-family:var(--font-display);font-weight:800;font-size:1.75rem;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.math-tile-red{background:linear-gradient(145deg,var(--red-1),var(--red-2));color:#fff;transform:rotate(-5deg);}
.math-tile-gold{background:linear-gradient(145deg,#f7bd38,var(--gold-surface));color:#302400;transform:rotate(5deg);}
.math-target{width:72px;background:rgba(255,255,255,.08);border:2px solid var(--gold);color:var(--gold);}
.math-operator{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:var(--ink-dim);}
.home-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.big-btn{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.4rem);
  color:#fff;border:2px solid transparent;border-radius:var(--radius-lg);
  padding:21px 34px;min-width:230px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
  box-shadow:0 10px 0 rgba(0,0,0,.22),0 14px 30px rgba(0,0,0,.35);
  transition:transform .12s ease,box-shadow .12s ease;
  touch-action:manipulation;
}
.big-btn span{font-size:inherit;line-height:1.1;}
.big-btn small{font-family:var(--font-body);font-size:.76rem;font-weight:600;opacity:.78;}
.big-btn.secondary small{opacity:1;}
.big-btn:hover{transform:translateY(-3px);}
.big-btn:active{transform:translateY(3px);box-shadow:0 6px 0 rgba(0,0,0,.22),0 8px 18px rgba(0,0,0,.3);}
.big-btn.primary{background:linear-gradient(135deg,#087f5b,#0b9f6f);}
.big-btn.secondary{background:var(--bg-panel-strong);border-color:var(--teal-1);color:var(--teal-2);}

.footer-badge{
  margin-top:56px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border:1.5px solid var(--gold-dim);
  border-radius:999px;background:var(--bg-panel);max-width:100%;
  justify-content:center;flex-wrap:wrap;text-align:center;
  font-size:clamp(.95rem,2vw,1.08rem);color:var(--ink-dim);
}
.footer-badge a{color:var(--gold);font-weight:700;}
.footer-credit{margin-top:14px;font-size:clamp(.9rem,1.8vw,1rem);color:var(--ink-dim);}
.footer-credit b{color:var(--ink);}
.heart-icon{
  display:inline-block;
  color:#800000;
  font-size:1.15em;
  line-height:1;
  transform-origin:center;
  animation:heart-beat 1.25s ease-in-out infinite;
}
@keyframes heart-beat{
  0%,100%{transform:scale(1);}
  14%{transform:scale(1.25);}
  28%{transform:scale(1);}
  42%{transform:scale(1.15);}
  56%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .heart-icon{animation:none;}
}

#screen-instructions{align-items:center;}
.instr-wrap{max-width:760px;margin:64px auto 0;width:100%;display:flex;flex-direction:column;gap:22px;}
.instr-title,.diff-title{
  font-family:var(--font-display);font-weight:800;color:var(--gold);
  text-align:center;
}
.instr-title{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 4px;}
.instr-card{
  background:var(--bg-panel);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:20px 22px;
}
.instr-card h3{
  font-family:var(--font-display);margin:0 0 8px;font-size:1.15rem;
  color:var(--teal-2);display:flex;align-items:center;gap:8px;
}
.instr-card p,.instr-card li{color:var(--ink-dim);line-height:1.6;font-size:.96rem;margin:0 0 6px;}
.instr-card ul{margin:8px 0 0;padding-left:20px;}
.instr-card .example{
  margin-top:10px;padding:10px 14px;border-radius:var(--radius-sm);
  background:rgba(255,211,77,.07);border:1px dashed var(--gold-dim);
  color:var(--ink);font-size:.9rem;
}

#screen-difficulty{align-items:center;}
.diff-title{font-size:clamp(1.7rem,4vw,2.4rem);margin:64px 0 40px;}
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:22px;max-width:980px;width:100%;margin:0 auto;}
.diff-card{
  appearance:none;width:100%;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);padding:34px 24px;text-align:center;
  color:var(--ink);cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
  min-width:0;touch-action:manipulation;
}
.diff-card:hover,.diff-card:focus-visible{transform:translateY(-6px);border-color:var(--gold-dim);background:var(--bg-panel-strong);}
.diff-stars{font-size:1.6rem;letter-spacing:4px;margin-bottom:14px;color:var(--gold);}
.star-empty{color:var(--gold-muted);}
.diff-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin:0 0 2px;}
.diff-level{color:var(--teal-2);font-weight:600;margin-bottom:14px;font-size:.95rem;}
.diff-desc{color:var(--ink-dim);font-size:.85rem;line-height:1.6;white-space:pre-line;}
.diff-chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:18px;}
.diff-chips span{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--gold-wash);border:1px solid var(--gold-muted);color:var(--ink-dim);font-size:.72rem;font-weight:700;}

#screen-game{padding-top:14px;}
.game-top{display:flex;align-items:center;gap:16px;max-width:1100px;width:100%;margin:56px auto 0;}
.pipe-wrap{
  flex:1;position:relative;height:34px;min-width:80px;
  border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);
  border:2px solid var(--border-soft);box-shadow:inset 0 2px 10px rgba(0,0,0,.4);
}
.pipe-fill-red{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--red-1),var(--red-glow));width:50%;transition:width .5s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 18px rgba(255,77,122,.55) inset;}
.pipe-fill-blue{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(270deg,var(--blue-1),var(--blue-glow));width:50%;transition:width .5s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 18px rgba(80,167,255,.55) inset;}
.pipe-mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:3px;background:var(--gold);box-shadow:0 0 8px var(--gold);z-index:2;}
.team-score{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  padding:12px 20px;border-radius:var(--radius-sm);white-space:nowrap;
  min-width:160px;text-align:center;border:2px solid;letter-spacing:.3px;display:flex;align-items:baseline;justify-content:center;gap:5px;
}
.team-score-label{font-size:.78rem;letter-spacing:.7px;opacity:.86;}
.score-value{font-size:1.2em;}
.score-cap{font-size:.74rem;color:inherit;font-weight:700;opacity:.88;}
.team-score.red{color:#fff;border-color:var(--red-1);background:var(--team-red-bg);}
.team-score.blue{color:#fff;border-color:var(--blue-1);background:var(--team-blue-bg);}

.game-meta{display:flex;justify-content:center;align-items:center;gap:26px;margin:20px 0 8px;flex-wrap:wrap;}
.target-box{text-align:center;border:3px solid var(--gold);border-radius:var(--radius-md);padding:10px 34px;background:var(--bg-panel-strong);}
.target-label{font-size:.78rem;letter-spacing:2px;color:var(--ink-dim);font-weight:700;}
.target-value{font-family:var(--font-display);font-weight:800;font-size:2.8rem;color:var(--gold);line-height:1.1;text-shadow:0 0 18px rgba(255,211,77,.4);}
.target-hint{margin-top:4px;color:var(--ink-dim);font-size:.7rem;font-weight:600;}
.timer-box{text-align:center;border:3px solid var(--border-soft);border-radius:var(--radius-md);padding:10px 30px;background:var(--bg-panel-strong);min-width:110px;}
.timer-value{font-family:var(--font-display);font-weight:800;font-size:2.8rem;line-height:1.1;color:var(--ink);}
.timer-value.low{color:var(--danger);text-shadow:0 0 16px rgba(255,84,112,.5);}
.round-status{text-align:center;color:var(--ink-dim);font-size:.82rem;font-weight:700;letter-spacing:.2px;min-height:20px;margin:0 auto;}
.round-status[data-tone="success"]{color:var(--teal-2);}
.round-status[data-tone="warning"]{color:var(--danger);}
.round-status[data-tone="waiting"]{color:var(--gold);}

.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1100px;width:100%;margin:22px auto 0;flex:1;}
.team-panel{
  border-radius:var(--radius-lg);padding:18px;background:var(--bg-panel);
  border:1.5px solid var(--border-soft);display:flex;flex-direction:column;gap:12px;
  position:relative;min-width:0;transition:border-color .2s ease,opacity .2s ease;
}
.team-panel.locked{opacity:.55;}
.team-panel.red{border-color:var(--team-red-border);border-width:2px;}
.team-panel.blue{border-color:var(--team-blue-border);border-width:2px;}
.team-head{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:1.3rem;}
.team-head.red{color:var(--red-2);}.team-head.blue{color:var(--blue-2);}
.team-icon{width:13px;height:13px;border-radius:4px;display:inline-block;flex:0 0 auto;}
.team-head.red .team-icon{background:var(--red-1);box-shadow:0 0 12px rgba(255,46,99,.55);}
.team-head.blue .team-icon{background:var(--blue-1);box-shadow:0 0 12px rgba(59,130,246,.55);}
.team-role{margin-left:auto;color:var(--ink-dim);font-family:var(--font-body);font-size:.68rem;letter-spacing:.7px;text-transform:uppercase;}
.lock-message{padding:7px 10px;border-radius:8px;background:rgba(255,84,112,.10);color:var(--danger);font-size:.75rem;font-weight:700;text-align:center;}
.expr-display{
  background:var(--field-bg);border:2px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:16px 18px;font-family:var(--font-display);font-size:1.85rem;font-weight:700;
  min-height:34px;min-width:0;letter-spacing:1px;color:var(--ink);overflow-x:auto;white-space:nowrap;
}
.expr-display.placeholder{color:var(--ink-dim);font-weight:500;font-size:1.2rem;}
.expr-feedback{min-height:22px;font-size:.98rem;font-weight:700;text-align:center;}
.expr-feedback.err{color:var(--danger);}.expr-feedback.ok{color:var(--teal-2);}

.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.key{
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:18px 0;cursor:pointer;color:var(--ink);background:var(--key-bg);
  transition:transform .08s ease,background .12s ease;touch-action:manipulation;
}
.key:hover{background:var(--key-hover-bg);}.key:active{transform:scale(.93);}
.key.op{color:var(--gold);}.key.clear{background:var(--key-bg);color:var(--ink-dim);}
.key.go{font-weight:800;border-color:transparent;box-shadow:0 5px 12px rgba(0,0,0,.18);}.team-panel.red .key.go{background:linear-gradient(135deg,var(--red-1),var(--red-2));color:#fff;}.team-panel.blue .key.go{background:linear-gradient(135deg,var(--blue-1),var(--blue-2));color:var(--blue-action-text);}
.key:disabled{opacity:.55;cursor:not-allowed;transform:none;}.key.unavailable{opacity:.48;}

@keyframes shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(4px);}30%,50%,70%{transform:translateX(-8px);}40%,60%{transform:translateX(8px);}}
.shake{animation:shake .5s;}
.floatpop{position:absolute;left:50%;top:-6px;transform:translate(-50%,0);font-family:var(--font-display);font-weight:800;font-size:1.3rem;pointer-events:none;opacity:0;z-index:6;}
.floatpop.show{animation:popfly 1s ease forwards;}
@keyframes popfly{0%{opacity:0;transform:translate(-50%,10px) scale(.8);}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1);}100%{opacity:0;transform:translate(-50%,-46px) scale(1);}}

.round-banner{
  position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(.85);
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--gold);text-align:center;background:var(--banner-bg);
  border:2px solid var(--gold-dim);padding:22px 40px;border-radius:var(--radius-lg);
  width:max-content;max-width:calc(100vw - 32px);overflow-wrap:anywhere;
  opacity:0;pointer-events:none;z-index:20;box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.round-banner.show{animation:bannerpop 1.05s ease forwards;}
@keyframes bannerpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.8);}18%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}82%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);}}

#screen-over{align-items:center;justify-content:center;text-align:center;}
#screen-over > div{width:min(100%,760px);}
.over-badge{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);margin:0 0 8px;}
.over-badge.red{color:var(--red-2);}.over-badge.blue{color:var(--blue-2);}
.over-badge::before{content:'✓';display:inline-grid;place-items:center;width:1.1em;height:1.1em;margin-right:10px;border-radius:50%;font-size:.62em;vertical-align:12%;color:var(--bg-deep);background:var(--red-2);}
.over-badge.blue::before{content:'★';background:var(--blue-2);}
.over-sub{color:var(--ink-dim);margin-bottom:34px;font-size:1.05rem;}.over-scores{display:flex;gap:20px;justify-content:center;margin-bottom:40px;flex-wrap:wrap;}.over-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

::selection{background:rgba(255,211,77,.35);}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;}

@media (min-width:721px) and (max-width:1024px){
  .screen{padding-inline:clamp(20px,4vw,36px);}
  .game-top,.panels{max-width:920px;}
  .team-panel{padding:16px;gap:10px;}
  .expr-display{font-size:clamp(1.35rem,2.8vw,1.85rem);padding:14px;}
  .keypad{gap:8px;}
  .key{font-size:1.35rem;padding:14px 0;}
}

@media (max-width:720px){
  .screen{
    padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  .topbar{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));gap:6px;}
  .back-btn{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));}
  .brand-title{font-size:clamp(2rem,9vw,3.5rem);letter-spacing:0;}
  .home-visual{gap:clamp(6px,2.5vw,12px);margin:18px 0 26px;transform:scale(.9);}
  .home-actions{width:100%;gap:12px;}
  .big-btn{flex:1 1 100%;width:100%;min-width:0;max-width:320px;padding:18px 20px;}
  .footer-badge{width:100%;margin-top:40px;padding-inline:12px;border-radius:18px;}
  .instr-wrap{margin-top:64px;gap:14px;}
  .instr-card{padding:16px;}
  .instr-card h3{font-size:1rem;line-height:1.35;}
  .instr-card p,.instr-card li{font-size:.9rem;line-height:1.55;}
  .instr-card .example{font-size:.84rem;line-height:1.5;padding:10px 12px;}
  .diff-title{margin:64px 0 24px;font-size:clamp(1.5rem,6vw,2.4rem);}
  .diff-grid{gap:14px;}
  .diff-card{padding:24px 18px;}
  .game-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:56px;}
  .game-top .team-score{min-width:0;padding:10px 8px;font-size:.95rem;}
  .team-score-label{font-size:.68rem;}
  .score-cap{font-size:.65rem;}
  .game-top .pipe-wrap{grid-column:1 / -1;grid-row:2;width:100%;}
  .pipe-wrap{height:28px;}
  .game-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(82px,auto);gap:10px;width:100%;margin-top:14px;}
  .target-box{min-width:0;padding:8px 12px;border-width:2px;}
  .target-value,.timer-value{font-size:2.3rem;}
  .target-hint{font-size:.64rem;line-height:1.3;}
  .timer-box{min-width:0;padding:8px 10px;border-width:2px;}
  .round-status{max-width:100%;font-size:.75rem;line-height:1.35;}
  .panels{grid-template-columns:1fr;gap:14px;margin-top:16px;flex:none;align-content:start;}
  .team-panel{padding:14px;gap:9px;}
  .team-head{font-size:1.1rem;}
  .team-role{font-size:.61rem;}
  .expr-display{font-size:clamp(1.35rem,7vw,1.85rem);line-height:1.15;padding:12px 14px;min-height:56px;}
  .expr-display.placeholder{font-size:1rem;}
  .expr-feedback{font-size:.86rem;line-height:1.35;}
  .keypad{gap:6px;}
  .key{min-height:52px;padding:10px 0;font-size:1.35rem;}
  .round-banner{padding:16px 22px;}
  .over-badge{font-size:clamp(1.75rem,8vw,3.2rem);}
  .over-sub{font-size:.95rem;margin-bottom:26px;}
  .over-scores{gap:10px;margin-bottom:28px;}
  .over-scores .team-score{padding:10px 14px;font-size:.95rem;}
  .over-actions{gap:12px;}
}

@media (min-width:480px) and (max-width:720px) and (orientation:landscape){
  #screen-game{padding-top:10px;}
  .game-top{margin-top:50px;}
  .game-meta{margin-top:10px;}
  .panels{grid-template-columns:repeat(2,minmax(0,1fr));}
  .team-panel{padding:12px;gap:8px;}
  .team-head{font-size:1rem;}
  .expr-display{padding:10px 12px;min-height:48px;}
  .keypad{gap:5px;}
  .key{min-height:44px;padding:7px 0;font-size:1.15rem;}
}

@media (min-width:480px) and (max-width:720px){
  .home-actions .big-btn{flex-basis:240px;}
}

@media (max-height:640px){
  #screen-home{justify-content:flex-start;padding-top:86px;}
  .home-visual{margin-block:14px 22px;}
  .footer-badge{margin-top:30px;}
}

@media (max-width:360px){
  .icon-btn,.back-btn{width:40px;height:40px;}
  .topbar{gap:5px;}
  .game-top{gap:8px;}
  .game-top .team-score{padding-inline:5px;font-size:.88rem;}
  .team-score-label{font-size:.63rem;letter-spacing:.4px;}
  .score-cap{font-size:.6rem;}
  .target-hint{font-size:.59rem;}
  .key{min-height:48px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}