/* Grok Pong: one screen, no page scroll. The playfield width (--bw) is set by game.js from the window size. */
html, body.cz-body { height: 100%; overflow: hidden; }
body.cz-body { min-height: 0; height: 100vh; height: 100dvh; }
body.pg-body { background-image: radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 70% 14%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 42% 74%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.7), transparent), radial-gradient(900px 500px at 50% -10%, rgba(25,193,85,.20), transparent 60%), linear-gradient(180deg, #07140d, #0d2a1b 60%, #0a1f14); }
.pg-body .cz-title, .pg-body .cz-back { color: #e9fff0; } .pg-body .cz-title span { color: #7dffa8; }
.pg-body main, .cz-main { max-width: none; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
.cz-app.game-wrap { width: 100%; max-width: 1500px; height: 100%; margin: 0 auto; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.cz-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; flex: 0 0 auto; position: relative; z-index: 30; }
.cz-back { font-weight: 600; text-decoration: none; white-space: nowrap; }
.cz-title { margin: 0; font-family: Chango, Georgia, serif; font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.1; white-space: nowrap; }
.cz-links { margin-left: auto; }
.cz-links .ggs-btn { min-height: 34px; }
.gg-links.ggs-made { display: none; }
/* Choices: a drop-down that stays open until closed */
.cz-choices-wrap { position: relative; }
.cz-choices-btn { font: inherit; font-weight: 600; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--brand); background: #fff; color: var(--brand-deep); }
.cz-choices-btn[aria-expanded=true] { background: #d9f7e3; }
.cz-choices { position: absolute; top: calc(100% + 8px); left: 0; width: 250px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(7,42,27,.25); display: flex; flex-direction: column; gap: 4px; max-height: calc(100dvh - 80px); overflow: auto; }
.cz-choices[hidden] { display: none; }
.cz-ch-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 6px; font-family: Chango, Georgia, serif; }
.cz-x { font: inherit; font-size: 1.3rem; line-height: 1; border: 0; background: transparent; cursor: pointer; color: var(--ink); }
.cz-ch-item { font: inherit; font-weight: 600; text-align: left; padding: 7px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--ink); }
.cz-ch-item:hover, .cz-ch-item:focus-visible { background: rgba(25,193,85,.12); border-color: rgba(25,193,85,.4); outline: none; }
.cz-ch-label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--brand-deep); margin: 6px 4px 2px; }
.cz-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cz-theme { font: inherit; font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 2px; padding: 5px 7px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); }
.cz-theme i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.cz-theme i:last-of-type { margin-right: 5px; }
.cz-theme.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(25,193,85,.35); }
.cz-theme[data-theme=classic] i:first-child { background: #000; } .cz-theme[data-theme=classic] i:nth-child(2) { background: #fff; border: 1px solid #999; }
.cz-theme[data-theme=neon] i:first-child { background: #3dc8ff; } .cz-theme[data-theme=neon] i:nth-child(2) { background: #ff4fd8; }
.cz-modes { display: inline-flex; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.cz-mode { font: inherit; font-weight: 600; border: 0; background: transparent; color: var(--ink); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.cz-mode.on { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-deep); }
.cz-seg { display: flex; gap: 4px; }
.cz-seg button { flex: 1; font: inherit; font-size: .85rem; font-weight: 600; padding: 5px 4px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); white-space: nowrap; }
.cz-seg button.on { border-color: var(--brand); background: rgba(25,193,85,.14); }
/* layout */
.cz-main { flex: 1 1 auto; min-height: 0; display: grid; gap: 12px; justify-content: center;
  grid-template-columns: 240px var(--bw, 480px) 300px; grid-template-areas: "left center right"; }
.cz-main.mid { grid-template-columns: 210px auto; grid-template-rows: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "left center" "right center"; gap: 8px 12px; }
.cz-main.narrow { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "center center" "left right"; gap: 8px; }
.cz-left { grid-area: left; } .cz-center { grid-area: center; } .cz-right { grid-area: right; }
.cz-left.panel, .cz-right.panel { min-height: 0; overflow: auto; padding: 12px; border-radius: 16px; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; }
.cz-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; justify-self: center; }
.cz-bar { width: var(--bw, 480px); height: 34px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 12px;
  background: rgba(255,255,255,.85); border: 1px solid var(--line); font-weight: 600; overflow: hidden; }
.pg-hud { justify-content: space-between; white-space: nowrap; }
.pg-hud > span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pg-n2 { text-align: right; }
.pg-hud b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.1rem; color: var(--brand-deep); padding: 0 8px; }
.pg-n1::before, .pg-n2::after { content: ''; display: inline-block; width: 6px; height: 14px; border-radius: 2px; background: #3dc8ff; margin: 0 6px; vertical-align: -2px; }
.pg-n2::after { background: #ff4fd8; }
/* court */
.pg-wrap { position: relative; width: var(--bw, 480px); height: var(--bh, 300px); flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(7,42,27,.30), 0 0 0 5px #0e3a24; touch-action: none; user-select: none; -webkit-user-select: none; background: #000; }
#cv { display: block; width: 100%; height: 100%; }
.pg-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; cursor: pointer; background: rgba(0, 0, 0, .55); color: #e9fff0; }
.pg-over[hidden] { display: none; }
.pg-over h2 { margin: 0 0 6px; font-family: Chango, Georgia, serif; font-weight: 400; font-size: clamp(1.1rem, calc(var(--bw, 480px) / 14), 2.4rem); color: #7dffa8; text-shadow: 0 0 12px rgba(61,255,138,.6); }
.pg-over p { margin: 0; font-weight: 600; font-size: clamp(.8rem, calc(var(--bw, 480px) / 34), 1.1rem); }
/* on-screen buttons */
.pg-pad { width: var(--bw, 480px); flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pg-grp { display: flex; gap: 8px; } .pg-grp[hidden] { display: none; }
.pg-k { font: inherit; width: calc(var(--pk, 56px) * 1.5); height: var(--pk, 56px); font-size: calc(var(--pk, 56px) * .42); line-height: 1; border-radius: 14px; border: 1px solid #0b3d55; cursor: pointer; color: #eafaff;
  background: linear-gradient(180deg, #2bb3e6, #136f96); box-shadow: 0 4px 0 #0b3d55; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pg-k.p2 { border-color: #55104a; background: linear-gradient(180deg, #e64fc8, #96136f); box-shadow: 0 4px 0 #55104a; }
.pg-k:active, .pg-k.on { transform: translateY(3px); box-shadow: 0 1px 0 #0b3d55; filter: brightness(1.15); }
.pg-k.pg-p { width: var(--pk, 56px); font-size: calc(var(--pk, 56px) * .28); background: linear-gradient(180deg, #3d5a4a, #22382c); border-color: #142219; box-shadow: 0 4px 0 #142219; }
/* left panel */
.cz-status { font-family: Chango, Georgia, serif; font-size: 1.02rem; line-height: 1.25; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(25,193,85,.16), rgba(25,193,85,.04)); border: 1px solid rgba(25,193,85,.35); }
.cz-status.over { background: linear-gradient(135deg, #0e3a24, #19c155); color: #fff; }
.cz-left .msg { margin: 6px 2px; font-size: .92rem; min-height: 0; }
.cz-left label.field { margin: 8px 0 2px; font-size: .72rem; }
.cz-left input[type=text] { padding: 6px 10px; border-radius: 10px; min-width: 0; flex: 1 1 auto; }
.cz-lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--brand-deep); margin: 8px 0 4px; }
.cz-levels { display: flex; flex-direction: column; gap: 4px; }
.cz-lv { font: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); font-weight: 600; }
.cz-lv small { font-weight: 400; color: rgba(20,73,54,.65); font-size: .78rem; }
.cz-lv.on { border-color: var(--brand); background: rgba(25,193,85,.14); }
.pg-row { display: flex; gap: 6px; } .pg-row .btn { padding: 6px 12px; }
.pg-me { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #0b2418; color: #d8ffe6; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-me b { color: #7dffa8; }
.pg-me[hidden], #regBox[hidden], #cpuSetup[hidden], #twoHelp[hidden] { display: none; }
.cz-mini { font: inherit; font-size: .82rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--brand); background: #fff; color: var(--brand-deep); cursor: pointer; white-space: nowrap; }
.cz-start { width: 100%; margin-top: 10px; }
.cz-small { font-size: .8rem; margin: 6px 2px; }
/* right panel */
.cz-pane { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
#scoreTabs { margin-bottom: 8px; flex: 0 0 auto; }
.cz-scoreboard table.board { font-size: .9rem; } .cz-scoreboard table.board td, .cz-scoreboard table.board th { padding: 4px 6px; }
#gg-chat.ggc-popup { position: fixed; z-index: 40; }
/* compact panels */
.cz-main.mid .cz-left.panel, .cz-main.mid .cz-right.panel, .cz-main.narrow .cz-left.panel, .cz-main.narrow .cz-right.panel { padding: 8px; }
.cz-main.mid .cz-status, .cz-main.narrow .cz-status { font-size: .85rem; padding: 6px 8px; }
.cz-main.mid .cz-small, .cz-main.narrow .cz-small { display: none; }
.cz-main.mid .cz-start, .cz-main.narrow .cz-start { margin-top: 6px; padding: 7px 10px; }
.cz-main.narrow .cz-left .msg:empty, .cz-main.mid .cz-left .msg:empty { display: none; }
.cz-main.narrow .cz-lv small, .cz-main.mid .cz-lv small { display: none; }
@media (max-width: 640px) {
  .cz-title { font-size: 1.1rem; } .cz-links { display: none; } .cz-choices-btn { padding: 5px 10px; font-size: .9rem; } .cz-mode { padding: 5px 9px; font-size: .85rem; }
  .cz-app.game-wrap { padding: 6px; gap: 6px; } .cz-bar { height: 28px; font-size: .85rem; padding: 0 8px; }
}
@media (max-width: 480px) {
  .cz-top { gap: 6px; } .cz-title { font-size: 1rem; } .cz-back { font-size: .9rem; }
  .cz-choices-btn { padding: 4px 9px; font-size: .85rem; white-space: nowrap; }
  .cz-choices { left: auto; right: 0; }
}