/* Block Breaker — MADAR Labs. Desktop: game + side panels. Phones (portrait): tall field, panels under the game. */
@font-face { font-family: "Madar Arabic"; src: url("fonts/IBMPlexSansArabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Madar Arabic"; src: url("fonts/IBMPlexSansArabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
:root { --bg:#050506; --card:#111114; --line:rgba(215,220,230,.14); --text:#f1f2f4; --muted:#9b9ea6; --gold:#ffc857; --good:#34d399; --bad:#f87171; --fire:#fb923c;
  --font:"Madar Arabic","Segoe UI",system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
/* the page always scrolls (header, panels, and the whole page when the game is paused, not started or over); no double-tap zoom.
   Only while a round runs, a finger on the field or on the drag strip steers the paddle and does not scroll or zoom. */
html { touch-action:manipulation; }
html.playing .stage, html.playing canvas, html.playing .strip { touch-action:none; }
html.playing body { overscroll-behavior-y:none; }
.hidden { display:none !important; }
.wrap { max-width:1240px; margin:0 auto; padding:14px 16px 24px; }
.top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; text-decoration:none; padding:8px 10px 8px 4px; min-height:40px; border-radius:10px; }
.back:hover { color:var(--text); }
.back .arr { font-size:22px; line-height:1; }
[dir=rtl] .back .arr { transform:scaleX(-1); }
.logo { font-weight:800; font-size:20px; letter-spacing:.5px; background:linear-gradient(180deg,#f7f8fa,#a9adb6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.node { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); border:1px solid rgba(255,200,87,.35); background:rgba(255,200,87,.06); padding:6px 12px; border-radius:999px; }
.node i { width:9px; height:9px; border-radius:50%; background:var(--gold); }
.tools { margin-inline-start:auto; display:flex; gap:8px; }
.tool { font:inherit; font-size:14px; color:var(--text); background:var(--card); border:1px solid rgba(215,220,230,.24); border-radius:10px; padding:0 14px; min-height:44px; min-width:44px; cursor:pointer; }
.tool:hover { border-color:var(--gold); }
.tool.icon { padding:0; display:grid; place-items:center; }
.tool svg, .pause svg, .rank svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.main { display:grid; grid-template-columns:minmax(0,760px) minmax(0,1fr); gap:18px; align-items:start; }
.field { position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#08080a; }
.stage { position:relative; display:flex; justify-content:center; background:#08080a; }
canvas { display:block; width:100%; height:auto; cursor:none; user-select:none; -webkit-user-select:none; }
.hud { display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; padding:12px 14px; border-bottom:1px solid var(--line); }
.chip { background:rgba(5,5,6,.75); border:1px solid rgba(215,220,230,.18); border-radius:12px; padding:6px 12px; font-size:12px; color:var(--muted); min-width:0; }
.chip b { display:block; font-size:20px; color:var(--text); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip.gold b { color:var(--gold); }
.c-fx b { font-size:15px; line-height:1.55; color:var(--good); }
.pause { margin-inline-start:auto; font:inherit; color:var(--text); background:var(--card); border:1px solid rgba(215,220,230,.24); border-radius:12px; min-width:48px; min-height:48px; display:grid; place-items:center; cursor:pointer; }
.pause:hover { border-color:var(--gold); }
/* «Ranking»: pauses and brings the ranking panel into view (only where the panels sit under the game) */
.rank { margin-inline-start:auto; font:inherit; font-size:13px; font-weight:700; color:var(--gold); background:var(--card); border:1px solid rgba(255,200,87,.35); border-radius:12px; min-height:48px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
.rank + .pause { margin-inline-start:0; }
.rank:hover { border-color:var(--gold); }
.rank svg { width:18px; height:18px; }
@media (min-width:981px) { .rank, .backgame { display:none !important; } }
:fullscreen .rank { display:none; }
/* finger devices: a drag strip under the field, so the finger sits below the paddle and never hides it */
.strip { display:none; direction:ltr; align-items:center; justify-content:center; gap:14px; height:clamp(64px, 11vh, 88px); border-top:1px solid rgba(255,200,87,.22); background:linear-gradient(180deg,rgba(255,200,87,.07),rgba(255,200,87,.015)); color:rgba(241,242,244,.38); font-size:13px; user-select:none; -webkit-user-select:none; }
html.touch .strip { display:flex; }
.strip .sarr { font-size:18px; color:rgba(255,200,87,.45); direction:ltr; }
/* player name (kept on this device only) */
.nameform { margin-top:10px; }
.nl { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.nrow { display:flex; gap:8px; }
.nin { flex:1; min-width:0; font:inherit; font-size:16px; color:var(--text); background:#0b0b0e; border:1px solid rgba(215,220,230,.24); border-radius:10px; padding:0 12px; min-height:44px; unicode-bidi:plaintext; }
.nin:focus { outline:none; border-color:var(--gold); }
.nin[aria-invalid=true] { border-color:var(--bad); }
.nsave { font:inherit; font-size:14px; font-weight:700; color:#1a1405; background:linear-gradient(180deg,#ffe7a8,#ffc857 50%,#e9a23b); border:0; border-radius:10px; padding:0 16px; min-height:44px; cursor:pointer; }
.nmsg { font-size:13px; min-height:1.5em; margin-top:6px; line-height:1.5; color:var(--good); }
.nmsg.err { color:var(--bad); }
.nmsg:empty { min-height:0; margin-top:0; }
.row .n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.backgame { margin-top:12px; width:100%; }
.over .ovname { width:100%; max-width:300px; margin:0; text-align:start; }
.over .ovname .nl { text-align:center; }
.over { position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(5,5,6,.84); text-align:center; padding:20px; }
.over h2 { margin:0; font-size:34px; background:linear-gradient(180deg,#f7f8fa,#a9adb6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.over p { margin:0; color:var(--muted); max-width:420px; line-height:1.55; white-space:pre-line; }
.btn { font:inherit; border:0; cursor:pointer; font-weight:800; font-size:18px; color:#1a1405; background:linear-gradient(180deg,#ffe7a8,#ffc857 50%,#e9a23b); border-radius:14px; padding:14px 34px; min-height:52px; min-width:160px; }
.side { display:flex; flex-direction:column; gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.card h3 { margin:0 0 10px; font-size:15px; display:flex; justify-content:space-between; gap:10px; }
.card h3 .sub { color:var(--muted); font-weight:500; font-size:12px; }
.row { display:flex; gap:10px; padding:6px 0; font-size:14px; }
.row .r { width:22px; color:var(--muted); font-weight:700; } .row .n { flex:1; } .row .p { font-weight:700; }
.row.me .n, .row.me .p { color:var(--gold); }
/* the shared Top 10 (from the server; names written by players are plain text in <bdi>) */
.top10 { list-style:none; margin:0 0 4px; padding:0; }
.top10 .row { border-bottom:1px solid rgba(215,220,230,.07); overflow:hidden; }
.top10 .row .r { width:26px; }
.top10 .row .p { font-variant-numeric:tabular-nums; }
.top10 .row.mine { background:rgba(255,200,87,.08); border-radius:8px; padding-inline:6px; margin-inline:-6px; }
.top10 .row.mine .n, .top10 .row.mine .p { color:var(--gold); }
.topnote:empty, #meNote:empty { display:none; }
.topnote.err { color:var(--bad); }
.ovname .small { margin-top:4px; text-align:center; text-wrap:balance; }
.bar { height:9px; border-radius:5px; background:#1c1c21; overflow:hidden; margin-top:8px; }
.bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#ffe7a8,#e9a23b); transition:width .2s; }
[dir=rtl] .bar i { background:linear-gradient(270deg,#ffe7a8,#e9a23b); }
.small { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5; }
.bon { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13.5px; color:var(--muted); }
.bon b { display:inline-block; min-width:62px; font-size:12.5px; letter-spacing:.3px; }
.good { color:var(--good); } .fire { color:var(--fire); } .bad { color:var(--bad); }

/* full screen: the whole page is the game */
:fullscreen .wrap { max-width:none; height:100vh; display:flex; flex-direction:column; padding-top:10px; padding-bottom:10px; }
:fullscreen .main { flex:1; grid-template-columns:1fr; }
:fullscreen .side { display:none; }
:fullscreen .field { justify-self:center; width:fit-content; max-width:100%; }

@media (max-width:980px) { .main { grid-template-columns:1fr; } .field { justify-self:center; width:fit-content; max-width:100%; } }
/* phones: a compact header and a two-row HUD that never changes height */
@media (max-width:640px) {
  .wrap { padding:8px 16px 20px; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .top { gap:8px; margin-bottom:8px; flex-wrap:nowrap; }
  .back span:not(.arr) { display:none; }
  .back { padding:8px 6px; }
  .logo { font-size:17px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .node { display:none; }
  .tool { padding:0 12px; }
  .field { width:100%; }
  .hud { display:grid; grid-template-columns:1.35fr 1.2fr 1fr 1fr 1fr; gap:6px; padding:8px; }
  .chip { padding:4px 7px; font-size:11px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chip b { font-size:16px; }
  .c-fx { grid-column:1 / span 3; display:flex; align-items:center; gap:8px; }
  .rank { grid-column:4; margin:0; min-height:44px; min-width:0; padding:0 2px; flex-direction:column; justify-content:center; gap:1px; font-size:10.5px; line-height:1.2; }
  .rank svg { width:16px; height:16px; }
  .c-fx b { font-size:14px; line-height:1.2; }
  .pause { grid-column:5; margin:0; min-height:44px; min-width:0; }
  .over h2 { font-size:30px; }
  .side { margin-top:4px; }
}
/* short landscape phones: the field gets the height */
@media (max-height:520px) and (orientation:landscape) {
  .wrap { padding-top:6px; }
  .top { margin-bottom:6px; }
  .node { display:none; }
  .hud { padding:6px 10px; gap:6px; }
  .chip { padding:3px 8px; } .chip b { font-size:15px; }
  .pause { min-height:40px; min-width:40px; }
  .rank { min-height:40px; }
  .strip { height:56px; }
}
@media (prefers-reduced-motion: reduce) { .bar i { transition:none; } }
.btn2 { font:inherit; font-size:15px; font-weight:700; color:var(--text); background:transparent; border:1px solid rgba(215,220,230,.3); border-radius:12px; padding:10px 20px; min-height:46px; cursor:pointer; }
.btn2:hover { border-color:var(--gold); }
[dir=rtl] .dnum { direction:ltr; text-align:right; }
.card:focus { outline:none; }
[data-g="pub_note"] { text-wrap:balance; }