body { margin: 0; background: #000; } canvas { display: block; margin: auto; background: skyblue; } .controls { margin-bottom: 10px; } /* ---- Pro, minimal UI for the main menu ---- */ :root{ --bg:#0b0e14; --card:#121826; --card-2:#0f1523; --text:#e6e9ef; --muted:#a4b1c3; --accent:#6ee7b7; /* mint */ --accent-2:#60a5fa; /* blue */ --radius:14px; --gap:14px; --shadow:0 6px 26px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2); } body{ background:var(--bg); color:var(--text); font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; } /* Center menu, hide when in match (you already toggle this via JS) */ #mainMenu{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; } /* The card */ .menu-card{ width:min(980px, 100%); background:linear-gradient(180deg, var(--card), var(--card-2)); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; } /* Header row */ .menu-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap); margin-bottom:18px; } .menu-title{ font-size:20px; font-weight:700; letter-spacing:.2px; } .menu-sub{ color:var(--muted); font-size:13px; } /* Two-column grid that collapses on small screens */ .menu-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; } @media (max-width: 900px){ .menu-grid{ grid-template-columns: 1fr; } } /* Panels */ .panel{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px; } .panel h3{ margin:0 0 10px; font-size:14px; letter-spacing:.35px; color:#cbd5e1; text-transform:uppercase; } /* Form fields */ .field{ margin-bottom:12px; } .field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; } .field input[type="text"], .field input[type="number"], .field select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:#0c1220; color:var(--text); outline:none; } .field input[type="range"]{ width:100%; } .field-inline{ display:flex; align-items:center; gap:10px; } .field-inline .value{ min-width:52px; text-align:right; font-variant-numeric: tabular-nums; color:#c7d2fe; } /* Button row */ .button-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; } .btn{ border:1px solid transparent; background:#0c1220; color:#e2e8f0; padding:10px 14px; border-radius:10px; cursor:pointer; transition: transform .04s ease, border-color .2s ease, background .2s ease; } .btn:hover{ border-color: rgba(255,255,255,0.14); } .btn:active{ transform: translateY(1px); } .btn.primary{ background: linear-gradient(180deg, var(--accent), #34d399); color:#0a0f14; font-weight:700; border:none; } .btn.blue{ background: linear-gradient(180deg, var(--accent-2), #3b82f6); color:#0a0f14; font-weight:700; border:none; } /* Connection info */ .kv{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; background:#0c1220; border:1px solid rgba(255,255,255,.06); font-size:13px; color:#aab4c3; } .kv code{ color:#e5e7eb; } /* Subtle helper text */ .help{ color:#93a3b8; font-size:12px; margin-top:6px; } /* Make in-match UI hide the menu (you already toggle .in-match on ) */ body.in-match #mainMenu{ display:none !important; } #chatPanel.chat--minimal #chatLog { overflow: auto; overscroll-behavior: contain; contain: content; /* don't invalidate outside */ backface-visibility: hidden; } /* If you animate the chat, only animate opacity/transform */ #chatPanel.chat--minimal.anim-enter, #chatPanel.chat--minimal.anim-leave { transition: opacity .15s ease, transform .15s ease !important; } /* Respect users who prefer less transparency (auto-minify styles) */ @media (prefers-reduced-transparency: reduce) { #chatPanel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #0c1220 !important; box-shadow: none !important; } } /* Chat log itself: smooth scrolling without jank */ #chatLog { overflow: auto; overscroll-behavior: contain; contain: content; backface-visibility: hidden; } html.low-power #chatPanel { box-shadow: none !important; background: #0c1220 !important; } /* --- H2H stats panel (simple & cheap) --- */ #statsPanel{ /* width:320px; matches your chat width; adjust as you like */ margin-top:8px; padding:8px; border:1px solid #1f2937; border-radius:6px; background:#0d1117; color:#e6edf3; font: 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } #statsPanel .stats-title{ font-weight:600; opacity:.85; margin-bottom:6px; } #statsPanel .stats-row{ display:flex; justify-content:space-between; padding:2px 0; } /* keep it hidden until shown */ .touch-prompt[hidden]{display:none!important} /* top-centered sheet (stays visible) */ .touch-prompt{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 8px); /* 👈 at the top */ left:50%; transform:translateX(-50%); max-width:420px; width:calc(100% - 24px); padding:10px; z-index:1000; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:8px; background:#0d1117; color:#e6edf3; border:1px solid #1f2937; border-radius:8px; } /* ≥16px prevents iOS zoom-on-focus */ #tpLabel{grid-column:1/-1; font-size:14px; opacity:.85} #tpNumber{grid-column:1/2; font-size:16px; padding:8px; border:1px solid #1f2937; border-radius:6px; background:#0b1220; color:inherit} #tpOk {grid-column:2/3; font-size:16px; padding:8px 12px; border:1px solid #1f2937; border-radius:6px; background:#0b1220; color:inherit; cursor:pointer} /* (optional) avoid accidental double-tap zoom */ html{-webkit-text-size-adjust:100%} #tpLabel { grid-column: 1 / -1; font-size: 14px; opacity: .85; } #tpNumber { grid-column: 1 / 2; font-size: 16px; /* ≥16px prevents iOS auto-zoom */ padding: 8px; border: 1px solid #1f2937; border-radius: 6px; background: #0b1220; color: inherit; } #tpOk { grid-column: 2 / 3; font-size: 16px; padding: 8px 12px; border: 1px solid #1f2937; border-radius: 6px; background: #0b1220; color: inherit; } /* Make the slider span the prompt width nicely */ #tpDial{ grid-column: 1 / -1; width: 100%; touch-action: none; /* lets our vertical scrub work without scrolling */ } #tpReadout{ grid-column: 1 / 2; font-size: 16px; margin-top: 2px; } /* keep OK in the right column (your grid is 1fr auto) */ #tpOk{ grid-column: 2 / 3; } /* Bigger mobile dial — iPad/phones only */ @media (pointer: coarse) { /* Make the prompt itself wider on tablets (yours is 420px now) */ .touch-prompt{ max-width: 560px; /* was 420px */ } /* Big slider hit-area */ #tpDial{ -webkit-appearance: none; appearance: none; width: 100%; height: 56px; /* tall hit area */ padding: 18px 0; /* extra finger room above/below the track */ background: transparent; touch-action: none; /* keeps our vertical scrub smooth */ } /* Track */ #tpDial::-webkit-slider-runnable-track{ height: 18px; border-radius: 999px; background: #1f2937; border: 1px solid #334155; } #tpDial::-moz-range-track{ height: 18px; border-radius: 999px; background: #1f2937; border: 1px solid #334155; } /* Thumb (the handle) */ #tpDial::-webkit-slider-thumb{ -webkit-appearance: none; width: 34px; height: 34px; /* nice big handle */ border-radius: 50%; background: #6ee7b7; border: 2px solid #065f46; box-shadow: 0 1px 2px rgba(0,0,0,.5); margin-top: calc((18px - 34px)/2); /* centers on the 18px track */ } #tpDial::-moz-range-thumb{ width: 34px; height: 34px; border-radius: 50%; background: #6ee7b7; border: 2px solid #065f46; box-shadow: 0 1px 2px rgba(0,0,0,.5); } /* Make readout + OK button chunkier too */ #tpReadout{ font-size: 18px; } #tpOk{ font-size: 18px; padding: 10px 14px; } } /* Leaderboard overlay */ #leaderboardWrap { position: fixed; inset: 0; display: none; z-index: 9999; } #leaderboardWrap .lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); } #leaderboardWrap .lb-modal { position: relative; max-width: 520px; margin: 8vh auto; background: #111; border: 1px solid #333; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 12px 12px 16px; color: #ddd; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } #leaderboardWrap .lb-header { display:flex; align-items:center; gap:8px; } #leaderboardWrap .lb-title { font-weight: 700; font-size: 18px; flex: 1; } #leaderboardWrap .lb-tabs { display:flex; gap:8px; } #leaderboardWrap .lb-tab { background:#222; color:#ddd; border:1px solid #333; border-radius:8px; padding:6px 10px; cursor:pointer; } #leaderboardWrap .lb-tab:hover { background:#2a2a2a; } #leaderboardWrap .lb-close { background:#222; color:#ddd; border:1px solid #333; border-radius:8px; padding:6px 10px; cursor:pointer; } #leaderboardWrap .lb-body { margin-top: 10px; } #leaderboardPanel { /* inner content table */ width: 100%; } #leaderboardPanel .lb-row { display:flex; align-items:center; justify-content:space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed #333; } #leaderboardPanel .lb-row.lb-head { font-weight: 700; opacity: .85; border-bottom-color: #444; } #leaderboardPanel .lb-row span:nth-child(1) { width: 2.5ch; text-align: right; } #leaderboardPanel .lb-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #leaderboardPanel .lb-row span:nth-child(3) { width: 7ch; text-align: right; }