:root { --bg: #0d1117; --bg2: #121822; --card: #182030; --card2: #1f2a3d; --line: #2a3650; --text: #eef2f8; --muted: #93a0b8; --green: #22c55e; --green-d: #16a34a; --red: #ef4444; --red-d: #dc2626; --gold: #fbbf24; --blue: #3b82f6; --radius: 16px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* phone app feel: the page itself never scrolls, zooms or slides sideways; only the inner panels scroll */ html, body { overflow: hidden; overscroll-behavior: none; width: 100%; max-width: 100%; touch-action: pan-y; } body { position: fixed; inset: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } img, video, svg, canvas { -webkit-user-drag: none; -webkit-touch-callout: none; } #app, .screen { overflow-x: hidden; max-width: 100%; } .scroll, #screen-home, #game-mid, #lobby-body { overscroll-behavior: contain; } .keypad, .dartpad, .quick, .cpad, .entry-tabs, [role="button"], a, label { touch-action: manipulation; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; } button:disabled { opacity: .35; cursor: default; } input { font: inherit; } #app { max-width: 520px; margin: 0 auto; height: 100%; position: relative; } .screen { display: none; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } .screen.active { display: flex; } .scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .pad { padding: 16px; } .center { text-align: center; } .muted { color: var(--muted); } .small { font-size: 13px; } [hidden] { display: none !important; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; gap: 8px; padding: max(10px, var(--safe-t)) 10px 10px; min-height: calc(56px + var(--safe-t)); background: var(--bg2); border-bottom: 1px solid var(--line); flex: none; } .topbar h2 { margin: 0; font-size: 19px; flex: 1; text-align: center; } .topbar .spacer { width: 44px; } .icon-btn { width: 44px; height: 44px; border-radius: 12px; font-size: 30px; line-height: 1; display: grid; place-items: center; background: var(--card); } .icon-btn:active { background: var(--card2); } .icon-btn.undo { font-size: 24px; } /* ---------- home ---------- */ #screen-home { padding: 20px 18px calc(12px + var(--safe-b)); overflow-y: auto; overflow-x: hidden; background: radial-gradient(120% 55% at 50% 0%, #3a0d12 0%, #1a0b0e 35%, var(--bg) 65%); } .home-hero { text-align: center; margin-top: 4px; } .app-name { margin: 10px 0 6px; display: flex; flex-direction: column; align-items: center; line-height: 1; } .app-name .t-main { font-size: 50px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -1px; background: linear-gradient(180deg, #ff6b5b 0%, #e11d2e 55%, #9f1020 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transform: skew(-6deg); filter: drop-shadow(0 3px 0 #000) drop-shadow(0 8px 18px rgba(225,29,46,.45)); padding: 0 8px; } .app-name .t-sub { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 17px; font-weight: 800; letter-spacing: .55em; text-transform: uppercase; color: #f3f4f6; padding-left: .55em; } .app-name .t-sub::before, .app-name .t-sub::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #e11d2e); } .app-name .t-sub::after { transform: scaleX(-1); } .tagline { color: var(--muted); margin: 14px 0 0; font-weight: 600; letter-spacing: .02em; } .hello { display: block; margin: 22px auto 16px; padding: 10px 16px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 15px; } .hello b { color: var(--text); } .pencil { margin-left: 6px; } .home-actions { display: flex; flex-direction: column; gap: 12px; } .big-btn { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); min-height: 76px; } .big-btn:active { transform: scale(.985); } .big-btn .ico { font-size: 28px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.06); border-radius: 12px; flex: none; } .big-btn b { display: block; font-size: 18px; } .big-btn small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; } .big-btn.primary { background: linear-gradient(135deg, #15803d, #16a34a); border-color: #22c55e55; } .big-btn.accent { background: linear-gradient(135deg, #b91c1c, #dc2626); border-color: #ef444455; } .big-btn.primary small, .big-btn.accent small { color: rgba(255,255,255,.85); } .foot { text-align: center; color: #56627a; font-size: 12px; margin-top: auto; padding-top: 18px; } .foot p { margin: 0; } .credits { color: #ef5350; font-size: 12.5px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; padding: 0 12px 4px; text-wrap: balance; } .credits span { white-space: nowrap; } .credits i { font-style: normal; color: #b23a38; } .foot .ver { font-size: 10.5px; opacity: .8; } /* ---------- forms ---------- */ .field-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; } .field-label:first-child { margin-top: 4px; } .seg { display: flex; background: var(--card); border-radius: 14px; padding: 4px; gap: 4px; } .seg button { flex: 1; padding: 13px 6px; border-radius: 10px; font-weight: 600; font-size: 16px; color: var(--muted); } .seg button.on { background: var(--green-d); color: #fff; } .stepper { display: flex; align-items: center; background: var(--card); border-radius: 14px; padding: 6px; } .stepper button { width: 56px; height: 56px; border-radius: 12px; background: var(--card2); font-size: 28px; } .stepper div { flex: 1; text-align: center; } .stepper b { display: block; font-size: 26px; } .stepper small { color: var(--muted); } .player-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .player-row .num { width: 30px; height: 30px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; font-size: 14px; color: var(--muted); flex: none; } .player-row input, .text-input { flex: 1; min-width: 0; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 17px; } .player-row .rm { width: 44px; height: 48px; border-radius: 12px; background: var(--card); color: var(--muted); font-size: 22px; } .ghost-btn { padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-weight: 600; width: 100%; } .bottom-bar { padding: 12px 16px calc(12px + var(--safe-b)); background: var(--bg2); border-top: 1px solid var(--line); flex: none; } .cta { width: 100%; padding: 17px; border-radius: 14px; background: var(--green-d); color: #fff; font-size: 18px; font-weight: 700; } .cta:active { background: var(--green); } .cta.accent { background: var(--red-d); } .cta.secondary { background: var(--card2); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .card h3 { margin: 0 0 4px; font-size: 19px; } .card p { margin: 0 0 14px; } .or { text-align: center; color: var(--muted); margin: 14px 0; position: relative; } .or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); } .or span { background: var(--bg); padding: 0 12px; position: relative; } .code-input { width: 100%; text-align: center; font-size: 34px; letter-spacing: .35em; font-weight: 800; text-transform: uppercase; padding: 12px 0 12px .35em; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); margin-bottom: 12px; } .code-input:focus { outline: none; border-color: var(--red); } .conn-note { text-align: center; color: var(--muted); font-size: 13px; } /* ---------- room ---------- */ .room-code { font-size: 56px; font-weight: 900; letter-spacing: .18em; padding: 18px 0 18px .18em; margin: 10px 0; border-radius: 20px; background: var(--card); border: 2px solid var(--green-d); color: #fff; font-variant-numeric: tabular-nums; } .room-meta { color: var(--muted); margin-bottom: 14px; } .row-btns { display: flex; gap: 10px; } .row-btns .ghost-btn { border-style: solid; } .waiting { margin: 26px 0 16px; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 12px; } .dot-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--green); animation: pulse 1.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 100% { box-shadow: 0 0 0 14px rgba(34,197,94,0); } } .room-players { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 18px; } .room-players div { background: var(--card); padding: 12px; border-radius: 12px; display: flex; justify-content: space-between; } /* ---------- game ---------- */ .game-top { padding: 6px 10px; min-height: 52px; } .game-title { flex: 1; text-align: center; line-height: 1.15; min-width: 0; } .game-title b { font-size: 17px; display: block; } .game-title small { color: var(--muted); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #game-board { flex: none; padding: 10px 10px 0; } #game-info { flex: none; padding: 8px 10px 0; } /* game: score/board/video/camera scroll in the middle; the keypad is always on screen at the bottom */ #screen-game { overflow: hidden; } #game-mid { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } #game-input { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 10px calc(10px + var(--safe-b)); min-height: 0; } .players { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .players.n1 { grid-template-columns: 1fr; } .pcard { background: var(--card); border: 2px solid transparent; border-radius: var(--radius); padding: 10px 12px; position: relative; min-width: 0; } .pcard.active { border-color: var(--green); background: linear-gradient(180deg, #17301f, var(--card)); } .pcard .pname { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 36px; } .pcard .legs { position: absolute; top: 9px; right: 10px; background: var(--card2); border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 700; } .pcard .rem { font-size: 60px; font-weight: 800; line-height: 1.05; margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -1px; } .players.compact .rem { font-size: 36px; } .players.compact .pcard { padding: 8px 10px; } .players.compact .visits { display: none; } .pcard .visits { color: var(--muted); font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .pcard .visits s { color: var(--red); } .pcard .meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; gap: 6px; } .pcard .meta b { color: var(--text); font-weight: 600; } .pcard .you-tag, .cboard .you-tag { font-size: 11px; background: var(--blue); color: #fff; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; } .pcard .off, .cboard .cbadges .off { font-size: 11px; background: var(--red-d); color: #fff; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; } .checkout { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #3b2f0b, #2a2410); border: 1px solid #fbbf2466; color: var(--gold); border-radius: 12px; padding: 9px 12px; font-weight: 700; } .checkout .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; } .checkout .route { font-size: 20px; letter-spacing: .5px; color: #fde68a; } .checkout.none { background: var(--card); border-color: var(--line); color: var(--muted); font-weight: 500; } .turnline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 34px; } .turnline .who { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chips { display: flex; gap: 6px; } .chip { min-width: 46px; padding: 6px 8px; border-radius: 9px; background: var(--card); text-align: center; font-weight: 700; font-size: 14px; } .chip.empty { color: #4b5770; } .entry-tabs { display: flex; gap: 6px; margin-bottom: 8px; } .entry-tabs button { flex: 1; padding: 8px; border-radius: 10px; background: var(--card); color: var(--muted); font-weight: 600; font-size: 14px; } .entry-tabs button.on { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); } .display { display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); font-size: 38px; font-weight: 800; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .display.placeholder { font-size: 18px; color: var(--muted); font-weight: 500; } .display.err { border-color: var(--red); color: var(--red); } .quick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 8px; } .quick button { padding: 10px 0; border-radius: 10px; background: var(--card); font-weight: 700; font-size: 14px; min-width: 0; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* pads grow to fill spare height on tall phones and shrink on short ones */ #game-input .keypad, #game-input .dartpad { flex: 1 1 auto; grid-auto-rows: minmax(44px, 1fr); min-height: 0; } #game-input .keypad { max-height: 330px; } #game-input .dartpad { max-height: 340px; } #game-input .cpad { max-height: 300px; } .keypad button { min-height: 44px; border-radius: 14px; background: var(--card2); font-size: 26px; font-weight: 700; } .keypad button:active, .dartpad button:active, .quick button:active { filter: brightness(1.35); } .keypad .ok { background: var(--green-d); font-size: 20px; } .keypad .del { background: var(--card); font-size: 22px; } .mults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; } .mults button { padding: 11px 0; border-radius: 12px; background: var(--card); font-weight: 700; font-size: 16px; color: var(--muted); } .mults button.on[data-mult="1"] { background: #334155; color: #fff; } .mults button.on[data-mult="2"] { background: var(--green-d); color: #fff; } .mults button.on[data-mult="3"] { background: var(--red-d); color: #fff; } .dartpad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .dartpad button { min-height: 44px; border-radius: 12px; background: var(--card2); font-size: 20px; font-weight: 700; } .dartpad .sp { background: var(--card); font-size: 16px; } .dartpad .wide2 { grid-column: span 2; } .dartpad.m2 button.n { box-shadow: inset 0 -3px 0 var(--green); } .dartpad.m3 button.n { box-shadow: inset 0 -3px 0 var(--red); } .cpad { grid-template-columns: repeat(3, 1fr); } .cpad button { font-size: 22px; } .waitbox { background: var(--card); border-radius: var(--radius); padding: 22px 16px; text-align: center; color: var(--muted); font-size: 17px; } .waitbox b { color: var(--text); } .waitbox .dot-pulse { display: inline-block; margin-right: 8px; vertical-align: middle; } /* cricket board */ .cboard { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; } .cboard th { font-weight: 700; font-size: 14px; padding: 6px 4px; background: var(--card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cboard th:first-child { border-radius: 12px 0 0 12px; } .cboard th:last-child { border-radius: 0 12px 12px 0; } .cboard th.active { background: #17301f; box-shadow: inset 0 -3px 0 var(--green); } .cboard th .pts { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .cboard th .lg { font-size: 11px; color: var(--muted); font-weight: 600; } .cboard td { text-align: center; background: var(--card); height: 38px; font-size: 22px; font-weight: 800; } .cboard td:first-child { border-radius: 10px 0 0 10px; } .cboard td:last-child { border-radius: 0 10px 10px 0; } .cboard td.num { background: var(--card2); color: var(--text); font-size: 19px; } .cboard tr.dead td { opacity: .35; } .cboard .mk1 { color: #93c5fd; } .cboard .mk2 { color: #fcd34d; } .cboard .mk3 { color: var(--green); } /* stats */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .stat { background: var(--card); border-radius: 12px; padding: 10px 6px; text-align: center; min-width: 0; } .stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; } .stat small { color: var(--muted); font-size: 11.5px; } .section-h { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 8px; } .section-h h3 { margin: 0; font-size: 17px; } .linkish { color: var(--muted); font-size: 13px; text-decoration: underline; } .hist { background: var(--card); border-radius: 14px; margin-bottom: 8px; border: 1px solid var(--line); overflow: hidden; } .hist summary { list-style: none; padding: 12px 14px; cursor: pointer; } .hist summary::-webkit-details-marker { display: none; } .hist .h1 { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } .hist .h2 { font-size: 17px; font-weight: 700; margin-top: 4px; } .hist .h2 .w { color: var(--gold); } .st-table { width: 100%; border-collapse: collapse; font-size: 14px; } .st-table th, .st-table td { padding: 7px 8px; text-align: right; border-top: 1px solid var(--line); } .st-table th:first-child, .st-table td:first-child { text-align: left; color: var(--muted); font-weight: 500; } .st-table thead th { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .empty-note { text-align: center; color: var(--muted); padding: 30px 10px; } /* modal + toast */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: flex-end; justify-content: center; z-index: 50; padding: 12px; } .modal-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; padding: 20px 16px calc(16px + var(--safe-b)); width: 100%; max-width: 500px; max-height: 92vh; overflow-y: auto; } .modal-card h3 { margin: 0 0 6px; font-size: 22px; text-align: center; } .modal-card p { text-align: center; color: var(--muted); margin: 0 0 16px; } .modal-card .btns { display: flex; gap: 8px; margin-top: 12px; } /* keep the dialog's buttons visible when its content is taller than the screen */ .modal-card .btns { position: sticky; bottom: calc(-16px - var(--safe-b)); background: var(--bg2); padding: 10px 0 calc(16px + var(--safe-b)); margin-bottom: calc(-16px - var(--safe-b)); box-shadow: 0 -12px 16px -8px var(--bg2); } .modal-card .btns > * { flex: 1; } .darts-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .darts-choice button { height: 64px; border-radius: 14px; background: var(--card2); font-size: 26px; font-weight: 800; } .trophy { font-size: 54px; text-align: center; } .toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); background: rgba(10,14,20,.94); border: 1px solid var(--line); padding: 14px 22px; border-radius: 16px; font-size: 22px; font-weight: 800; z-index: 60; text-align: center; max-width: 90vw; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: pop .18s ease-out; } .toast.bust { color: var(--red); border-color: var(--red); } .toast.good { color: var(--green); border-color: var(--green); } .toast.gold { color: var(--gold); border-color: var(--gold); } .toast.info { font-size: 16px; font-weight: 600; } @keyframes pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } } /* ---------- teams (2 v 2) ---------- */ :root { --team-a: #3b82f6; --team-b: #f97316; } .tdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; } .tdot.ta { background: var(--team-a); } .tdot.tb { background: var(--team-b); } .player-row .num.team-a { background: var(--team-a); color: #fff; font-weight: 700; } .player-row .num.team-b { background: var(--team-b); color: #fff; font-weight: 700; } .members { display: flex; gap: 4px; flex-wrap: nowrap; margin: 2px 0 4px; min-width: 0; } .mem { font-size: 12.5px; padding: 2px 7px; border-radius: 7px; background: var(--card2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; } .mem.now { background: var(--green-d); color: #fff; font-weight: 700; flex: none; max-width: 70%; } .mem i, .lp i { font-style: normal; font-size: 10.5px; padding: 0 4px; border-radius: 4px; vertical-align: 1px; } i.me { background: var(--blue); color: #fff; } i.offl { background: var(--red-d); color: #fff; } .cboard th .members { justify-content: center; margin: 4px 2px 0; } .cboard th .mem { font-size: 11.5px; padding: 1px 5px; } .turnline .who .tdot { margin-right: 5px; } /* lobby */ .lobby-status { margin: 18px 0 10px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; } .teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; } .team-col { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .team-h { font-weight: 800; font-size: 15px; display: flex; align-items: center; padding: 2px 2px 2px; } .team-h small { margin-left: auto; color: var(--muted); font-weight: 600; } .lp { display: flex; align-items: center; gap: 4px; background: var(--card2); border-radius: 10px; padding: 6px 6px 6px 9px; min-height: 42px; min-width: 0; } .lp.offline { opacity: .6; } .lp.empty { background: transparent; border: 1px dashed var(--line); color: #56627a; font-size: 13.5px; justify-content: center; } .lpn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 14.5px; } .lpn .host { color: var(--gold); font-style: normal; margin-right: 4px; } .ctl { display: flex; gap: 4px; flex: none; } .mini { width: 32px; height: 32px; border-radius: 8px; background: var(--card); font-weight: 800; font-size: 15px; } .mini.kick { color: var(--red); font-size: 18px; } .join-team { padding: 10px; border-radius: 10px; font-weight: 700; font-size: 14.5px; color: #fff; } .join-team.ta { background: var(--team-a); } .join-team.tb { background: var(--team-b); } .unassigned { margin-top: 8px; background: var(--card); border: 1px dashed var(--line); border-radius: 14px; padding: 8px; text-align: left; display: flex; flex-direction: column; gap: 6px; } #room-body .cta { margin-top: 4px; } #room-body .small-wait { padding: 14px; font-size: 15px; margin-top: 4px; } .tbl-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 2px; text-align: left; } .modal-card p.winners { color: var(--text); font-weight: 600; margin: -2px 0 6px; } .st-table.compact { font-size: 13px; table-layout: fixed; } .st-table.compact th, .st-table.compact td { padding: 6px 4px; } .st-table.compact th:first-child, .st-table.compact td:first-child { width: 25%; } .st-table.compact thead th { font-size: 12.5px; } .st-table.compact .tdot { width: 7px; height: 7px; margin-right: 3px; } .hist .h3 { font-size: 13px; color: var(--muted); margin-top: 2px; } @media (max-height: 700px) { .pcard .rem { font-size: 44px; } .players.compact .rem { font-size: 32px; } .pcard .visits { display: none; } .entry-tabs { margin-bottom: 6px; } .entry-tabs button { padding: 6px; } .mults { margin-bottom: 6px; } .mults button { padding: 8px 0; } .turnline { margin-top: 4px; min-height: 30px; } .checkout { padding: 6px 10px; } .checkout .route { font-size: 18px; } .cboard th .pts { font-size: 24px; } .cboard { border-spacing: 0 3px; } #game-input .keypad, #game-input .dartpad { grid-auto-rows: minmax(42px, 1fr); } .display { height: 48px; font-size: 32px; } .cboard td { height: 27px; font-size: 18px; } .cboard th .pts { display: inline; } .cboard th .lg { display: inline; margin-left: 6px; } .cboard th .members { margin-top: 3px; } } /* ---------- home logo (user-supplied artwork: public/logo.webp) ---------- Three copies of the same image are stacked and masked (masks generated by scripts/build-logo.js): board = everything except darts + lettering, darts = the three darts, letters = the "NO MERCY" band. Once every layer has landed they line up pixel-for-pixel, so the final frame is the original artwork. Timeline (~2.4s, once, starts when the image has decoded — JS adds #screen-home.nm-play): board fades/zooms in (0–0.6s) → darts drop from above (0.5–0.92s) → thud + shake → lettering slams in from large (1.0–1.35s) → quake, neon-green glow + splatter burst → "DARTS" + tagline. JS adds .nm-done at 3s. */ .nm-logo { position: relative; width: min(100%, 330px); aspect-ratio: 920 / 980; margin: -8px auto 0; mix-blend-mode: lighten; } .nm-layer { position: absolute; inset: 0; display: block; } .nm-layer img { display: block; width: 100%; height: 100%; } .nm-l-darts, .nm-l-letters, .nm-splat { display: none; } .app-name .t-main { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the artwork carries "NO MERCY" */ .app-name { margin-top: 0; } #screen-home:not(.nm-play):not(.nm-done) .nm-logo, #screen-home:not(.nm-play):not(.nm-done) .app-name .t-sub, #screen-home:not(.nm-play):not(.nm-done) .home-hero .tagline { visibility: hidden; } #screen-home.nm-play:not(.nm-done) .nm-l-darts, #screen-home.nm-play:not(.nm-done) .nm-l-letters, #screen-home.nm-play:not(.nm-done) .nm-splat { display: block; } .nm-play .nm-l-board img { -webkit-mask: var(--nm-mask-board) 0 0 / 100% 100% no-repeat; mask: var(--nm-mask-board) 0 0 / 100% 100% no-repeat; } .nm-play .nm-l-darts img { -webkit-mask: var(--nm-mask-darts) 0 0 / 100% 100% no-repeat; mask: var(--nm-mask-darts) 0 0 / 100% 100% no-repeat; } .nm-play .nm-l-letters img { -webkit-mask: var(--nm-mask-letters) 0 0 / 100% 100% no-repeat; mask: var(--nm-mask-letters) 0 0 / 100% 100% no-repeat; } .nm-done .nm-l-board img { -webkit-mask: none; mask: none; } .nm-play .nm-l-board { animation: nm-board .6s cubic-bezier(.2,.8,.3,1) both, nm-hit .35s .92s ease-out; } .nm-play .nm-l-darts { animation: nm-drop .42s .5s cubic-bezier(.55,0,1,.55) both, nm-settle .28s .92s ease-out; } .nm-play .nm-logo { animation: nm-thud .3s .92s linear, nm-quake-big .45s 1.35s linear; } .nm-l-letters { z-index: 2; transform-origin: 51% 65%; } .nm-play .nm-l-letters { animation: nm-slam-in .5s 1s cubic-bezier(.55,0,.6,1) both, nm-glow-pulse 1.1s 1.33s ease-out; } .nm-splat { position: absolute; z-index: 1; left: 0; right: 0; top: 30%; height: 70%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(57,255,20,.75), rgba(30,200,10,.35) 45%, transparent 70%) 50% 50% / 60% 40% no-repeat, radial-gradient(circle, #39ff14 0 45%, transparent 55%) 8% 30% / 9% 9% no-repeat, radial-gradient(circle, #2fd612 0 45%, transparent 55%) 90% 22% / 7% 7% no-repeat, radial-gradient(circle, #5bff3d 0 45%, transparent 55%) 18% 82% / 6% 6% no-repeat, radial-gradient(circle, #28b810 0 45%, transparent 55%) 82% 78% / 8% 8% no-repeat, radial-gradient(circle, #39ff14 0 45%, transparent 55%) 50% 2% / 5% 5% no-repeat, radial-gradient(circle, #2fd612 0 45%, transparent 55%) 97% 55% / 5% 5% no-repeat, radial-gradient(circle, #2fd612 0 45%, transparent 55%) 2% 60% / 5% 5% no-repeat; } .nm-play .nm-splat { animation: nm-splat .75s 1.33s ease-out both; } .nm-play .app-name .t-sub { animation: nm-rise .45s 1.65s ease-out both; } .nm-play .home-hero .tagline { animation: nm-fade .5s 1.9s ease-out both; } @keyframes nm-board { from { opacity: 0; transform: scale(.78); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes nm-hit { 0% { filter: brightness(1.45); } 100% { filter: none; } } @keyframes nm-drop { 0% { opacity: 0; transform: translateY(-75%); } 18% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes nm-settle { 0% { transform: translateY(0) scaleY(.97); } 45% { transform: translateY(-1.4%); } 100% { transform: none; } } @keyframes nm-thud { 0%, 100% { transform: none; } 15% { transform: translateY(5px); } 35% { transform: translate(-3px, -2px); } 55% { transform: translate(3px, 1px); } 75% { transform: translate(-1px, 0); } } @keyframes nm-slam-in { 0% { opacity: 0; transform: scale(3.2) rotate(-5deg); } 25% { opacity: .7; } 66% { opacity: 1; transform: scale(.93) rotate(0); } 83% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } } @keyframes nm-glow-pulse { 0% { filter: drop-shadow(0 0 0 rgba(57,255,20,0)); } 18% { filter: drop-shadow(0 0 14px rgba(57,255,20,.95)) brightness(1.3); } 60% { filter: drop-shadow(0 0 8px rgba(57,255,20,.55)); } 100% { filter: drop-shadow(0 0 0 rgba(57,255,20,0)); } } @keyframes nm-quake-big { 0%, 100% { transform: none; } 12% { transform: translate(-7px, 4px) rotate(-.8deg); } 28% { transform: translate(6px, -4px) rotate(.7deg); } 45% { transform: translate(-4px, 2px) rotate(-.4deg); } 62% { transform: translate(3px, -1px); } 80% { transform: translate(-1px, 1px); } } @keyframes nm-splat { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: .85; } 100% { opacity: 0; transform: scale(1.25); } } @keyframes nm-rise { from { opacity: 0; transform: translateY(8px); letter-spacing: 1.1em; } to { opacity: 1; transform: none; } } @keyframes nm-fade { from { opacity: 0; } to { opacity: 1; } } /* plays once: after .nm-done (or with reduced motion) the home screen shows the plain, final artwork */ #screen-home.nm-done .home-hero, #screen-home.nm-done .home-hero * { animation: none !important; } @media (prefers-reduced-motion: reduce) { .home-hero, .home-hero * { animation: none !important; } .nm-l-darts, .nm-l-letters, .nm-splat { display: none !important; } .nm-l-board img { -webkit-mask: none !important; mask: none !important; } #screen-home .nm-logo, #screen-home .app-name .t-sub, #screen-home .home-hero .tagline { visibility: visible !important; } } @media (max-height: 700px) { .nm-logo { width: min(100%, 250px); } .hello { margin: 12px auto 12px; } } /* LOGO-MASKS:START (generated by scripts/build-logo.js — do not edit by hand) */ .nm-logo { --nm-mask-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 980' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0,0H920V980H0ZM178,160L200,108L238,78L282,74L308,98L330,150L342,200L331,213L466,438L452,470L424,462L289,237L248,229L204,206ZM372,100L388,40L424,8L482,12L534,38L550,82L534,132L486,192L480,440L458,466L437,440L436,190L384,162ZM560,196L585,116L622,78L676,70L720,94L746,148L734,195L682,219L632,238L491,459L468,472L449,446L576,218ZM22,815L72,650L116,508L186,446L288,502L375,490L425,496L525,508L650,496L750,490L860,426L916,446L878,588L828,700L842,752L700,772L450,760L188,772L112,828L48,842Z'/%3E%3C/svg%3E"); --nm-mask-darts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 980' preserveAspectRatio='none'%3E%3Cpolygon points='178,160 200,108 238,78 282,74 308,98 330,150 342,200 331,213 466,438 452,470 424,462 289,237 248,229 204,206'/%3E%3Cpolygon points='372,100 388,40 424,8 482,12 534,38 550,82 534,132 486,192 480,440 458,466 437,440 436,190 384,162'/%3E%3Cpolygon points='560,196 585,116 622,78 676,70 720,94 746,148 734,195 682,219 632,238 491,459 468,472 449,446 576,218'/%3E%3C/svg%3E"); --nm-mask-letters: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 980' preserveAspectRatio='none'%3E%3Cpolygon points='22,815 72,650 116,508 186,446 288,502 375,490 425,496 525,508 650,496 750,490 860,426 916,446 878,588 828,700 842,752 700,772 450,760 188,772 112,828 48,842'/%3E%3C/svg%3E"); } /* LOGO-MASKS:END */ /* ---------- voice scoring ---------- */ .icon-btn.mic { color: var(--muted); margin-right: 6px; position: relative; } .icon-btn.mic:disabled { opacity: .35; } .icon-btn.mic.on { color: #fff; background: var(--red-d); box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: mic-ring 1.4s infinite; } .icon-btn.mic.hf::after { content: "HF"; position: absolute; right: 2px; bottom: 2px; font-size: 8px; font-weight: 800; letter-spacing: .02em; color: var(--gold); } @keyframes mic-ring { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } .voice-strip { position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); max-width: 520px; margin: 0 auto; z-index: 45; background: rgba(16,21,31,.97); border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: 0 -6px 30px rgba(0,0,0,.55); animation: v-up .16s ease-out; } .voice-strip.confirm { border-color: var(--green); } .voice-strip.error { border-color: var(--red); } .voice-strip.listening { border-color: #7f1d1d; } @keyframes v-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } .v-row { display: flex; align-items: center; gap: 10px; } .v-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .v-main b { font-size: 17px; } .v-main small { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; } .v-main small.v-err, .v-result.err span { color: #fca5a5; } .v-main small.v-note { color: var(--gold); font-size: 12px; } .v-mic { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--red-d) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2.5' width='6' height='12' rx='3' fill='white'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .v-mic.live { animation: mic-ring 1.2s infinite; } .v-heard { color: var(--muted); font-size: 14px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v-heard q, .v-main q { color: var(--text); font-style: italic; } .v-result { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .v-result b { font-size: 30px; font-weight: 900; color: var(--green); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .v-result span { color: var(--text); font-size: 15px; } .v-result.err b { color: var(--red); font-size: 22px; } .v-result.info { display: block; } .v-result.info b { display: block; color: var(--text); font-size: 18px; margin-bottom: 4px; } .v-result.info span { color: var(--muted); font-size: 14.5px; line-height: 1.4; } .v-bar { height: 4px; border-radius: 2px; background: var(--card2); overflow: hidden; margin: -2px 0 10px; } .v-bar i { display: block; height: 100%; background: var(--green); transition: width .1s linear; } .v-btns { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; } .v-btns:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1.4fr; } .v-btn { padding: 12px 10px; border-radius: 12px; background: var(--card2); color: var(--text); font-weight: 700; font-size: 16px; white-space: nowrap; } .v-btn.ok { background: var(--green-d); color: #fff; } .v-btn.icon { width: 44px; padding: 10px 0; font-size: 19px; } .v-row .v-btn { flex: none; } .v-toggle { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; margin: 8px 0; border-radius: 12px; background: var(--card2); color: var(--text); } .v-toggle span { flex: 1; display: flex; flex-direction: column; gap: 3px; } .v-toggle small { color: var(--muted); font-size: 13px; line-height: 1.35; } .v-toggle .sw { flex: none; width: 46px; height: 28px; border-radius: 14px; background: #3a4458; position: relative; transition: background .15s; } .v-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; } .v-toggle .sw.on { background: var(--green-d); } .v-toggle .sw.on::after { transform: translateX(18px); } .v-warn { color: #fca5a5; line-height: 1.4; } .v-help { line-height: 1.4; font-size: 14.5px; } @media (prefers-reduced-motion: reduce) { .voice-strip, .icon-btn.mic.on, .v-mic.live { animation: none; } } .v-debug { font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7c889f; margin: -4px 0 10px; word-break: break-word; } .v-toggle:disabled { opacity: .55; } .v-diag { margin: 10px 0 4px; color: var(--muted); font-size: 13px; } .v-diag summary { cursor: pointer; padding: 6px 0; } .v-diag .v-debug { margin: 4px 0 6px; } .v-diag pre { margin: 0; max-height: 140px; overflow: auto; background: var(--bg2); border-radius: 8px; padding: 8px; font-size: 11px; line-height: 1.35; white-space: pre-wrap; color: #9fb0c8; } /* ---------- video chat (1 v 1 online) ---------- */ .vpanel { flex: none; margin: 8px 10px 0; } .vbar { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 12px; min-height: 44px; } .vdot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; } .vdot.live { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); } .vtxt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vtxt b { color: var(--text); } .vjoin, .vshow { background: var(--green); color: #04130a; font-weight: 700; font-size: 14px; border-radius: 10px; padding: 8px 12px; flex: none; } .vshow { background: var(--card2); color: var(--text); } .vstage { position: relative; height: 180px; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); } .vtiles { position: absolute; inset: 0; } .vtile { position: absolute; overflow: hidden; background: #05070b; } .vtile.main { inset: 0; z-index: 0; } .vtile.thumb { top: 8px; width: min(21%, 76px); aspect-ratio: 3 / 4; max-height: calc(100% - 58px); border-radius: 10px; border: 2px solid rgba(255, 255, 255, .55); z-index: 2; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); } .vremote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #05070b; } .vt-over { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 10.5px; color: var(--muted); background: rgba(5, 7, 11, .6); padding: 2px; } .vt-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; line-height: 1.3; padding: 2px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vtile.main .vt-name { display: none; } .vt-name .tdot, .vtag .tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; } .vtag .tdot:not(.ta):not(.tb) { display: none; } .vpin { color: var(--muted); font-weight: 500; } .vover { z-index: 1; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 0 20% 44px 16px; color: var(--muted); font-size: 14px; background: rgba(5, 7, 11, .55); } .vplay { background: var(--green); color: #04130a; font-weight: 700; border-radius: 10px; padding: 8px 14px; } .vtag { z-index: 3; cursor: pointer; position: absolute; left: 8px; top: 8px; background: rgba(0, 0, 0, .55); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpmic { color: var(--gold); font-weight: 500; } /* Short phones (e.g. 375x667): before anyone joins, the "Join video" bar sits under the keypad so the whole keypad stays on screen; after joining, the panel moves back under the scores. */ @media (max-height: 760px) { #video-panel:not(.joined) { order: 5; margin: 0 10px calc(10px + var(--safe-b)); } } /* 2v2 mesh: keep the big-tile label clear of the 3 thumbnails; status on its own line */ .mesh .vtag { max-width: calc(100% - 3 * (min(21%, 80px) + 6px) - 26px); white-space: normal; line-height: 1.25; } .mesh .vtag .vname { display: inline-block; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .mesh .vtag .vpmic:not(:empty), .mesh .vtag .vpin:not(:empty) { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vself { z-index: 2; position: absolute; right: 8px; top: 8px; width: 27%; max-width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .8); background: #111; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); } .vself.mirror { transform: scaleX(-1); } .vself.off { opacity: .25; } .vctl { z-index: 4; position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 8px; } .vround { width: 38px; height: 38px; border-radius: 50%; background: rgba(20, 26, 38, .78); border: 1px solid rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vround.off { background: #f3f4f6; color: #111; } .vround.ducked { color: var(--gold); } .vround.end { background: var(--red-d); border-color: transparent; } .vbar .vround { width: 34px; height: 34px; } .vgrip { display: block; width: 100%; height: 18px; padding: 0; touch-action: none; cursor: ns-resize; } .vgrip i { display: block; width: 44px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--line); } .vmsg { font-size: 12.5px; color: var(--muted); padding: 4px 4px 0; line-height: 1.35; } .vmsg.err { color: #fca5a5; } /* ---------- camera scoring ---------- */ .icon-btn.cam { color: var(--muted); margin-right: 6px; } .icon-btn.cam.on { color: #0b0f14; background: #39FF14; } .cpanel { flex: none; margin: 8px 10px 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .cam-stage { position: relative; height: 42vh; height: 42dvh; min-height: 150px; max-height: 460px; background: #000; touch-action: pan-y; } .cpanel.cal .cam-stage { touch-action: none; } /* dragging the calibration dots */ .vpanel:not([hidden]) ~ .cpanel .cam-stage { height: 30vh; min-height: 170px; } /* video + camera: keep both compact */ /* camera open: tighter manual-entry pad so the camera view gets the room (still all on screen) */ #screen-game.cam-open #game-input { padding-top: 6px; } #screen-game.cam-open #game-input .keypad, #screen-game.cam-open #game-input .dartpad { grid-auto-rows: 40px; flex: none; } #screen-game.cam-open #game-input .display { height: 44px; font-size: 30px; margin-bottom: 6px; } #screen-game.cam-open #game-input .quick { margin-bottom: 6px; } #screen-game.cam-open #game-input .quick button { padding: 7px 0; } .cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .cam-ov { position: absolute; inset: 0; width: 100%; height: 100%; } .cam-status { position: absolute; left: 8px; right: 8px; top: 8px; background: rgba(0,0,0,.62); border-radius: 8px; padding: 5px 9px; font-size: 13px; font-weight: 600; pointer-events: none; } .cam-loupe { position: absolute; bottom: 8px; width: 110px; height: 110px; border-radius: 50%; border: 2px solid #39FF14; background: #000; pointer-events: none; } .cam-chips { display: flex; gap: 8px; padding: 8px 10px 0; align-items: center; } .cam-chips[hidden] { display: none; } .cam-chip { flex: 1; min-width: 0; height: 52px; border-radius: 12px; background: var(--card2); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; white-space: nowrap; border: 2px solid transparent; } .cam-chip.guess { border-color: #facc15; color: #facc15; } .cam-chip.guess i { font-style: normal; opacity: .75; } .cam-chip.empty { background: transparent; border: 2px dashed var(--line); } .cam-chip.add { color: var(--muted); font-size: 26px; border: 2px dashed var(--line); background: transparent; } .cam-go { flex: none; height: 52px; padding: 0 14px; border-radius: 12px; background: var(--green, #16a34a); color: #fff; font-weight: 800; font-size: 16px; } .cam-ctl { display: flex; gap: 6px; padding: 8px 10px 10px; } .cam-btn { flex: 1; min-width: 0; height: 40px; border-radius: 10px; background: var(--card2); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; } .cam-btn[aria-label="Close camera scoring"], .cam-btn[aria-label="Cancel"] { flex: 0 0 40px; } .cam-btn.ok { background: #16a34a; color: #fff; flex: 1.6; } .cam-btn:disabled { opacity: .4; } .cam-msg { padding: 0 12px 10px; font-size: 13px; color: var(--muted); } .cam-msg.err { color: #fca5a5; } .cam-pick { position: absolute; inset: 6px; background: rgba(15,20,28,.96); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: auto; z-index: 3; } .cam-pick[hidden] { display: none; } .cp-head { display: flex; align-items: center; gap: 6px; } .cp-head b { flex: 1; font-size: 15px; } .cp-keep { background: #16a34a; color: #fff; border-radius: 9px; padding: 6px 10px; font-weight: 700; font-size: 13px; } .cp-x { width: 34px; height: 34px; border-radius: 9px; background: var(--card2); } .cp-mult { display: flex; gap: 6px; } .cp-mult button { flex: 1; height: 34px; border-radius: 9px; background: var(--card2); font-weight: 700; } .cp-mult button.on { background: #39FF14; color: #0b0f14; } .cp-nums { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .cp-nums button { height: 34px; border-radius: 8px; background: var(--card2); font-weight: 700; font-size: 14px; } .cp-del { height: 34px; border-radius: 9px; background: transparent; border: 1px solid var(--line); color: #fca5a5; font-size: 13px; } @media (max-height: 700px) { .cam-stage { height: 34vh; height: 34dvh; } } @media (max-height: 600px) { .cam-stage { height: 30vh; height: 30dvh; } } /* ---------- accounts + paywall ---------- */ .home-id { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 16px; flex-wrap: wrap; } .home-id .hello { margin: 0; } .acct-pill { padding: 10px 14px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 15px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-pill.pro { color: var(--gold, #facc15); } .auth-form { display: grid; gap: 10px; margin-top: 10px; } .auth-form .text-input { width: 100%; } .auth-err { color: #fca5a5; font-size: 14px; min-height: 1.2em; margin: 2px 0 0; } .auth-tabs { display: flex; gap: 6px; margin-bottom: 4px; } .auth-tabs button { flex: 1; padding: 10px; border-radius: 10px; background: var(--card2); font-weight: 700; color: var(--muted); } .auth-tabs button.on { background: var(--green-d); color: #fff; } .auth-small { font-size: 13.5px; color: var(--muted); text-align: center; margin: 6px 0 0; } .auth-small button { color: var(--text); text-decoration: underline; background: none; padding: 0; font-size: inherit; } .pw-list { margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; } .pw-list li { padding-left: 26px; position: relative; } .pw-list li::before { content: "✓"; position: absolute; left: 4px; color: var(--green); font-weight: 800; } .pw-price { font-size: 14px; color: var(--muted); text-align: center; margin: 8px 0 0; } .acct-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .acct-row:last-child { border-bottom: 0; } .acct-row span { color: var(--muted); } .acct-row b { text-align: right; min-width: 0; overflow-wrap: anywhere; } .acct-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--card2); } .acct-status.ok { background: #14532d; color: #86efac; } .acct-status.bad { background: #7f1d1d; color: #fecaca; } .acct-actions { display: grid; gap: 10px; margin-top: 14px; } .cam-btn.icon { flex: 0 0 40px; font-size: 17px; } .v-paused { margin: 6px 0 2px; font-size: 13.5px; font-weight: 700; color: #facc15; } .voice-strip.confirm .v-bar { height: 6px; } .cam-delay { display: flex; gap: 6px; margin: 12px 0; } .cam-delay button { flex: 1; padding: 12px 0; border-radius: 10px; background: var(--card2); font-weight: 800; font-size: 16px; } /* ---------- lobby ---------- */ .big-btn.lobby { border-color: #39ff1466; box-shadow: inset 0 0 0 1px #39ff1422, 0 0 18px -8px #39ff14; } .big-btn.lobby .ico { background: rgba(57,255,20,.1); } .lob-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: #39ff14; box-shadow: 0 0 8px #39ff14; } .lob-dot.looking { background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: lobglow 1.4s infinite; } @keyframes lobglow { 50% { opacity: .45; } } .lob-dot.busy { background: #64748b; box-shadow: none; } .big-btn.lobby .lob-dot { width: 16px; height: 16px; animation: lobglow 1.8s infinite; } .lob-me { display: flex; flex-direction: column; gap: 12px; } .lob-me-h { display: flex; align-items: center; gap: 10px; font-size: 18px; } .lob-me-h .muted { margin-left: auto; } .lob-switch { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--card2); font-size: 16px; font-weight: 600; min-height: 50px; } .lob-switch i { width: 50px; height: 30px; border-radius: 15px; background: #334155; position: relative; transition: background .15s; flex: none; } .lob-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; } .lob-switch[aria-checked="true"] i { background: #39ff14; } .lob-switch[aria-checked="true"] i::after { transform: translateX(20px); } .lob-quick { display: flex; align-items: center; justify-content: center; gap: 10px; background: #39ff14; color: #0b0f14; } .lob-quick:active { background: #6bff4f; } .lob-quick.searching { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 2px #39ff14; } .lob-note { margin: -4px 0 0 !important; } .lob-banner { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #1d2a1a; border: 1px solid #39ff1455; font-size: 15px; } .lob-banner .grow { flex: 1; min-width: 0; } #lobby-body { overflow-x: hidden; } .lob-seg2 { margin-top: 8px; } .lob-legs { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 6px 12px; background: var(--card); border-radius: 14px; color: var(--muted); } .lob-legs b { font-size: 22px; color: var(--text); min-width: 26px; text-align: center; } .lob-legs .mini, .lob-banner .mini { min-width: 44px; height: 44px; border-radius: 10px; background: var(--card2); font-size: 20px; } .lob-banner .mini { width: auto; flex: none; font-size: 14px; font-weight: 700; padding: 0 12px; } .lob-list { display: flex; flex-direction: column; gap: 8px; } .lob-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: left; } .lob-row:active { background: var(--card2); } .lob-row.me { border-color: #39ff1455; cursor: default; } .lob-row.busy { opacity: .6; } .lob-name { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lob-name i.me { font-style: normal; font-size: 12px; font-weight: 600; color: #0b0f14; background: #39ff14; border-radius: 6px; padding: 1px 6px; margin-left: 4px; } .lob-st { color: var(--muted); font-size: 13px; } .lob-go { color: #39ff14; font-weight: 700; font-size: 14px; white-space: nowrap; } @media (max-width: 380px) { .lob-row .lob-st { display: none; } } .ch-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .ch-teams label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } .ch-teams select { font: inherit; font-size: 16px; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 10px; min-height: 48px; } .ch-note { margin-top: 10px !important; } .ch-in { text-align: center; } .ch-ico { font-size: 44px; filter: drop-shadow(0 0 12px #39ff14aa); } .ch-in p b { color: var(--text); } .ch-in .ch-vs { color: var(--text); font-size: 17px; } .ch-in .ch-vs i { color: #39ff14; font-style: normal; font-weight: 800; margin: 0 6px; } .ch-meta { color: var(--text) !important; font-weight: 600; } .ch-bar { height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; margin: 4px 0 6px; } .ch-bar i { display: block; height: 100%; width: 100%; background: #39ff14; transition: width .25s linear; } /* ---------- settings ---------- */ .set-pill { padding-left: 12px; padding-right: 12px; font-size: 17px; } .set-note { text-align: left !important; margin: 10px 2px 4px !important; } .modal-card .lob-switch { margin-top: 6px; } /* cricket header: YOU / offline badges on their own line (were running into "Legs 0") */ .cboard th .cbadges { display: flex; justify-content: center; gap: 4px; margin: 2px 0 1px; line-height: 1.3; } .cboard th .cbadges .you-tag, .cboard th .cbadges .off { margin-left: 0; vertical-align: 0; font-weight: 700; } /* ---------- lobby chat + direct messages ---------- */ #screen-lobby { position: relative; } .badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; font-style: normal; } .dm-btn { position: relative; color: var(--text); } .dm-btn .badge { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--bg2); } .lchat { flex: none; background: var(--bg2); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); max-width: 100%; } .lchat-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; text-align: left; } .lchat-t { font-weight: 700; font-size: 15px; white-space: nowrap; } .lchat-last { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lchat .chev { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(-45deg); margin: 4px 4px 0 auto; flex: none; transition: transform .15s; } .lchat.open .chev { transform: rotate(135deg); margin-top: -4px; } .lchat-body { display: flex; flex-direction: column; height: 44vh; height: 44dvh; max-height: 440px; min-height: 200px; border-top: 1px solid var(--line); } .lchat-list, .dm-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 12px; } .lchat-form { display: flex; gap: 8px; padding: 8px 10px; flex: none; border-top: 1px solid var(--line); background: var(--bg2); } .lchat-form input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); } /* 16px: iPhone won't zoom on focus */ .lchat-form input:focus { outline: none; border-color: var(--blue); } .lchat-form input:disabled { opacity: .5; } .lchat-send { flex: none; width: auto; padding: 0 16px; min-height: 42px; font-size: 15px; margin: 0; } .cmsg { padding: 7px 0; border-bottom: 1px solid #ffffff0a; } .cmsg:last-child { border-bottom: 0; } .cmeta { display: flex; align-items: center; gap: 8px; min-width: 0; } .cname { padding: 0; font-weight: 700; font-size: 14px; color: #7dd3fc; min-width: 0; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .cname i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; } .cmsg.mine .cname { color: #86efac; } .ctime { color: var(--muted); font-size: 11.5px; white-space: nowrap; } .cmore { margin-left: auto; width: 32px; height: 26px; border-radius: 8px; color: var(--muted); font-size: 18px; line-height: 1; flex: none; } .cmore:active { background: var(--card); } .ctext { font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; margin-top: 2px; } .cempty { padding: 14px 4px; } .cnote { color: var(--gold); font-size: 13px; margin: 8px 0; } /* DM conversation: bubbles */ .cmsg.dm { border: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 4px 0; } .cmsg.dm .ctext { background: var(--card2); border-radius: 14px 14px 14px 4px; padding: 8px 12px; max-width: 85%; order: 1; } .cmsg.dm .cmeta { order: 2; padding: 0 4px; } .cmsg.dm.mine { align-items: flex-end; } .cmsg.dm.mine .ctext { background: #14532d; border-radius: 14px 14px 4px 14px; } .cmsg.dm .cmore { margin-left: 0; } .dm-sheet { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); padding-bottom: var(--safe-b); overflow: hidden; } .dm-sheet[hidden] { display: none; } .dm-row { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 12px 44px 12px 12px; margin: 6px 0; border-radius: 14px; background: var(--card); min-width: 0; } .dm-row.unread { box-shadow: inset 3px 0 0 var(--red); } .dm-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .dm-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dm-last { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dm-row .badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } /* player / message menus */ .pm-name { overflow-wrap: anywhere; } .pm-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .pm-btns .cta { margin: 0; } .pm-btns .danger { color: #fca5a5; } .pm-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; background: var(--bg2); } .pm-admin .mini { width: auto; padding: 0 10px; font-size: 13px; font-weight: 700; } .pm-quote { background: var(--bg2); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; } .rep-why { width: 100%; font-size: 16px; } /* keyboard open (iPhone): the lobby fits the visible area above it */ .kb-open #screen-lobby { height: var(--vvh, 100dvh); transform: translateY(var(--vvt, 0)); } .kb-open #screen-lobby .lchat-body { height: auto; flex: 1 1 auto; max-height: none; min-height: 120px; } .kb-open #screen-lobby.active .lchat.open { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .kb-open #screen-lobby.active .lchat.open ~ .dm-sheet, .kb-open #screen-lobby .dm-sheet { height: 100%; } .kb-open #screen-lobby.typing #lobby-body { display: none; } /* ---------- Scram cricket ---------- */ .scram-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; } .scram-head .scram-round { font-weight: 800; color: var(--gold); letter-spacing: .3px; } .players.scram .rem { font-size: 44px; } .players.scram .srole { font-size: 12px; font-weight: 700; display: inline-block; border-radius: 6px; padding: 1px 7px; margin-top: 2px; } .players.scram .srole.scorer { background: #3b2f0b; color: var(--gold); } .players.scram .srole.closer { background: #13253f; color: #93c5fd; } .scram-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 6px; } .scram-strip span { text-align: center; font-weight: 700; font-size: 13px; padding: 4px 0; border-radius: 8px; background: var(--card); color: var(--muted); } .scram-strip span.done { text-decoration: line-through; opacity: .5; } .scram-strip span.on { background: var(--green); color: #04130a; } .scram-active { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 8px 12px; } .scram-active .sa-num { font-size: 46px; font-weight: 900; line-height: 1; min-width: 78px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; } .scram-active .sa-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .scram-active .sa-side small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scram-active .sa-marks { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .scram-active .sa-marks i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); display: inline-block; } .scram-active .sa-marks i.on { background: #93c5fd; border-color: #93c5fd; } .dartpad.scrampad button.tgt { outline: 3px solid var(--gold); outline-offset: -3px; } @media (max-height: 700px) { .players.scram .rem { font-size: 34px; } .scram-active .sa-num { font-size: 36px; min-width: 60px; } .scram-strip { margin: 5px 0 4px; } } .scram-tie { font-size: 52px; text-align: center; line-height: 1.1; } /* ---------- Golf ---------- */ .golf-hole { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 8px; } .golf-hole .gh-num { font-size: 54px; font-weight: 900; line-height: 1; min-width: 72px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; } .golf-hole .gh-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .golf-hole .gh-side b { font-size: 16px; } .golf-hole .gh-side small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gcard { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .gcard th, .gcard td { text-align: center; font-size: 14px; padding: 4px 0; border-radius: 6px; background: var(--card); overflow: hidden; white-space: nowrap; } .gcard th { font-size: 12px; color: var(--muted); font-weight: 700; background: transparent; } .gcard th.now { background: var(--green); color: #04130a; } .gcard .gn { width: 24%; text-align: left; padding-left: 6px; text-overflow: ellipsis; font-weight: 700; font-size: 13px; } .gcard th.gn { padding-left: 2px; } .gcard .gt { width: 12%; font-weight: 800; background: var(--card2); } .gcard th.gt { background: transparent; } .gcard tr.me td.gn { color: var(--green); } .gcard td.cur { outline: 2px solid var(--green); outline-offset: -2px; color: var(--green); } .gcard td.bn { background: #14361f; color: #86efac; font-weight: 800; } .gcard td.bn sup { font-size: 9px; margin-left: 1px; color: #4ade80; } .gcard .po { background: #3b2f0b; color: var(--gold); } .gcard th.po { background: transparent; } .gcard th.po.now { background: var(--gold); color: #1a1405; } .gcard .ghalf { background: var(--card2); border-radius: 6px; font-size: 11px; font-weight: 700; padding: 2px 6px; color: var(--text); } .gbonus { color: #4ade80; font-weight: 700; } .chip.g1, .chip.g2 { color: #86efac; } .chip.g5 { color: var(--muted); } #game-input .golfpad { grid-template-columns: repeat(2, 1fr); max-height: 300px; } .golfpad button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 18px; line-height: 1.1; } .golfpad button small { font-size: 12px; color: var(--muted); font-weight: 600; } .golfpad button[data-gd="3"] small, .golfpad button[data-gd="2"] small { color: #86efac; } .golfpad .gstay { background: var(--green); color: #04130a; } .golfpad .gstay small { color: #0b3b1c; } .golfpad .gstay[disabled] { background: var(--card2); color: var(--muted); opacity: .6; } .modal .gcard th, .modal .gcard td { font-size: 12px; padding: 3px 0; } @media (max-height: 700px) { .golf-hole .gh-num { font-size: 40px; min-width: 56px; } .golf-hole { padding: 6px 10px; margin-bottom: 6px; } .gcard th, .gcard td { padding: 3px 0; font-size: 13px; } } /* ---------- 301 Over 40 ---------- */ .o40calc { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; background: var(--card); border-radius: 12px; padding: 6px 10px; margin-bottom: 6px; font-size: 15px; font-variant-numeric: tabular-nums; } .o40calc b { font-size: 22px; font-weight: 800; } .o40calc .m40 { color: var(--red); font-weight: 800; font-size: 18px; } .o40calc b.cnt { color: var(--green); } .o40calc span { color: var(--muted); font-size: 13px; } .o40calc.idle { padding: 4px 10px; } .o40calc.idle .m40 { font-size: 14px; } .checkout .o40need { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; } .pcard .visits .o40v.zero { color: var(--red); } /* ---------- Tactics (12 targets: header row + two columns of 6) ---------- */ .cboard.thead { border-spacing: 0; margin-bottom: 4px; } .tboard { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tboard .cboard td { height: 30px; font-size: 18px; } .tboard .cboard td.num { font-size: 15px; } .tboard .cboard td.num.dt { font-size: 12px; letter-spacing: -.2px; color: var(--gold); } .dartpad.tpad .n.lo { color: var(--muted); font-weight: 600; } .dartpad.tpad .n.tgt { color: var(--text); } @media (max-height: 700px) { .cboard.thead th .pts { font-size: 22px; } .cboard.thead th { padding: 4px; } .tboard .cboard { border-spacing: 0 2px; } .tboard .cboard td { height: 24px; font-size: 16px; } .tboard .cboard td.num { font-size: 13px; } #game-input .dartpad.tpad { grid-auto-rows: minmax(38px, 1fr); } } /* game pickers: 7 games -> two rows (4 + 3) so they fit 375px phones */ #set-mode, #lob-mode { flex-wrap: wrap; } #set-mode button, #lob-mode button { flex: 1 0 calc(25% - 4px); min-width: 0; padding-left: 2px; padding-right: 2px; white-space: nowrap; } /* ---------- home: realistic photo theme (Oct 2026) ---------- #screen-home.theme-real: full-bleed photo of a dart in the bullseye (public/img/hero-board*.webp|jpg, cropped from Michael's reference) under a dark gradient so the text and buttons stay readable. The cartoon logo stays in the markup (and as the PWA / home-screen icon) but is hidden here; remove .theme-real in index.html to restore it. */ #screen-home.theme-real { --real-orange: #ff8a1f; --real-orange-d: #e2620b; --real-teal: #19c3c0; --real-teal-d: #0c7f86; background-color: #061014; background-image: linear-gradient(180deg, rgba(4,10,13,.82) 0%, rgba(4,10,13,.38) 22%, rgba(4,10,13,.12) 38%, rgba(4,10,13,.45) 56%, rgba(4,10,13,.86) 76%, rgba(4,10,13,.94) 100%), url("/img/hero-board-sm.jpg"); background-image: linear-gradient(180deg, rgba(4,10,13,.82) 0%, rgba(4,10,13,.38) 22%, rgba(4,10,13,.12) 38%, rgba(4,10,13,.45) 56%, rgba(4,10,13,.86) 76%, rgba(4,10,13,.94) 100%), -webkit-image-set(url("/img/hero-board-sm.webp") 1x, url("/img/hero-board.webp") 2x); background-image: linear-gradient(180deg, rgba(4,10,13,.82) 0%, rgba(4,10,13,.38) 22%, rgba(4,10,13,.12) 38%, rgba(4,10,13,.45) 56%, rgba(4,10,13,.86) 76%, rgba(4,10,13,.94) 100%), image-set(url("/img/hero-board-sm.webp") type("image/webp") 1x, url("/img/hero-board.webp") type("image/webp") 2x, url("/img/hero-board.jpg") type("image/jpeg") 2x); background-size: cover; background-position: 58% 100%; background-repeat: no-repeat; } /* portrait phones: zoom the photo a touch and anchor it low so the dart + bullseye sit above the buttons */ @media (max-aspect-ratio: 3/5) { #screen-home.theme-real { background-size: auto 112%; } } .theme-real .nm-logo { display: none; } .theme-real .home-hero { padding-top: 6px; min-height: 31vh; min-height: 31dvh; } @media (min-height: 760px) { .theme-real .home-hero { min-height: 38vh; min-height: 38dvh; } } /* wordmark: the existing No Mercy / Darts type, re-coloured orange + teal to match the photo */ .theme-real .app-name { margin: 6px 0 0; } .theme-real .app-name .t-main { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 54px; letter-spacing: -1px; background: linear-gradient(180deg, #fff3e0 0%, #ffb35c 40%, var(--real-orange) 62%, #c9500a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 16px rgba(255,138,31,.55)); } .theme-real .app-name .t-sub { color: #e6fbfb; text-shadow: 0 0 12px rgba(25,195,192,.7), 0 1px 2px #000; } .theme-real .app-name .t-sub::before, .theme-real .app-name .t-sub::after { background: linear-gradient(90deg, transparent, var(--real-teal)); } .theme-real .tagline { color: #d7e3e6; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.8); } .theme-real .home-id { margin: 16px auto 14px; } /* glassy controls so the photo shows through */ .theme-real .hello, .theme-real .acct-pill { background: rgba(8,20,24,.62); border: 1px solid rgba(25,195,192,.28); color: #c9d6da; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .theme-real .big-btn { background: rgba(10,22,27,.72); border-color: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .theme-real .big-btn small { color: #a9b8bd; } .theme-real .big-btn.primary { background: linear-gradient(135deg, rgba(255,138,31,.95), rgba(214,84,6,.95)); border-color: rgba(255,186,110,.6); box-shadow: 0 0 22px -6px rgba(255,138,31,.75); } .theme-real .big-btn.accent { background: linear-gradient(135deg, rgba(14,140,146,.95), rgba(8,92,100,.95)); border-color: rgba(25,195,192,.6); box-shadow: 0 0 22px -8px rgba(25,195,192,.8); } .theme-real .big-btn.primary b, .theme-real .big-btn.accent b { text-shadow: 0 1px 2px rgba(0,0,0,.35); } .theme-real .big-btn.primary small, .theme-real .big-btn.accent small { color: rgba(255,255,255,.9); } .theme-real .big-btn.primary .ico, .theme-real .big-btn.accent .ico { background: rgba(0,0,0,.18); } .theme-real .foot { color: #7b8d93; } /* intro: photo eases in from slightly zoomed, then the wordmark rises (replaces the cartoon logo animation) */ #screen-home.theme-real.real-in:not(.nm-done) { animation: real-bg .9s ease-out both; } .theme-real.real-in:not(.nm-done) .app-name, .theme-real.real-in:not(.nm-done) .tagline { animation: real-rise .7s .35s ease-out both; } .theme-real.real-in:not(.nm-done) .tagline { animation-delay: .6s; } @keyframes real-bg { from { opacity: .35; } to { opacity: 1; } } @keyframes real-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* the cartoon logo rules hide the hero until .nm-play/.nm-done; the photo theme shows it at once */ #screen-home.theme-real .app-name .t-sub, #screen-home.theme-real .home-hero .tagline { visibility: visible !important; } @media (prefers-reduced-motion: reduce) { #screen-home.theme-real, .theme-real .app-name, .theme-real .tagline { animation: none !important; } } @media (max-height: 700px) { .theme-real .home-hero { min-height: 30vh; min-height: 30dvh; } .theme-real .app-name .t-main { font-size: 46px; } .theme-real .home-id { margin: 10px auto 10px; } } /* ===================================================================================================== MATCH SCREEN — DartsMind-style layout (Oct 2026) Michael: "keep it as simple as possible … this is how DartsMind is set up". Big view of the CURRENT THROWER's board (yours on your turn, theirs on theirs) with a small PIP of the other board, and a clean scoreboard: three darts on top, a column per player (big score, name, MPR / avg), the active column red, cricket marks. Portrait: board on top (~58% of the height), scoreboard below. Landscape: side by side. Everything that isn't scoring sits in the ⋮ menu. Manual keypad (camera scoring off) stays, compact. ===================================================================================================== */ #screen-game { --dm-bg: #141619; --dm-col: #2a2d32; --dm-row: #3a3d43; --dm-row2: #43464c; --dm-num: #2f3237; --dm-red: #c62828; background: var(--dm-bg); } #screen-game.active { display: grid; grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr); } #app.wide { max-width: none; } /* ---- top: the board view (or just a slim bar when there is nothing to show) ---- */ #game-stage { position: relative; grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; padding: max(4px, var(--safe-t)) 6px 4px; background: var(--bg2); border-bottom: 1px solid var(--line); } .gs-top { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; } .gs-top .icon-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; } .gs-top .icon-btn.cam { margin-right: 0; } .gs-top .game-title { text-align: left; padding-left: 4px; } .gs-top .game-title b { font-size: 15px; } .gs-top .game-title small { font-size: 11.5px; } #game-stage > .vpanel { width: 100%; margin: 4px 0 0; } #game-stage > .vpanel .vbar { min-height: 40px; padding: 4px 4px 4px 10px; } #game-stage > .cpanel { display: none; } /* stage on: video and/or camera fill it; the ⋮ and 📷 float top-left; nothing else on the picture */ #screen-game.stage-on #game-stage { display: block; padding: 0; height: 58vh; height: 58dvh; background: #000; border-bottom: 0; overflow: hidden; } #screen-game.stage-on.keys-on #game-stage { height: 38vh; height: 38dvh; } #screen-game.stage-on .gs-top { position: absolute; z-index: 30; top: 0; left: 0; width: auto; padding: max(6px, var(--safe-t)) 6px 6px 6px; gap: 6px; pointer-events: none; } #screen-game.stage-on .gs-top > * { pointer-events: auto; } #screen-game.stage-on .gs-top .game-title { display: none; } #screen-game.stage-on .gs-top .icon-btn { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; background: rgba(18, 22, 30, .72); color: #fff; border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #screen-game.stage-on .gs-top .icon-btn.cam.on { background: #39FF14; color: #0b0f14; } #screen-game.stage-on #video-panel.open { position: absolute; inset: 0; margin: 0; z-index: 2; width: auto; } #screen-game.stage-on #video-panel:not(.open) { display: none; } #video-panel.open .vstage { height: 100% !important; border: 0; border-radius: 0; } .vpanel .vctl, .vpanel .vgrip { display: none !important; } .vpanel.nomain .vstage { background: transparent; pointer-events: none; } .vpanel.nomain .vstage .vtile.thumb, .vpanel.nomain .vstage button { pointer-events: auto; } .vpanel.nomain .vover { display: none; } /* big tile + PIPs (bottom-left) */ .vtile.main .vremote, .vselfbox.main .vself { object-fit: contain; background: #000; } .vselfbox { position: absolute; overflow: hidden; background: #0b0d10; } .vselfbox[hidden] { display: none; } .vselfbox.main { inset: 0; z-index: 0; cursor: pointer; } .vselfbox .vself { position: absolute; inset: 0; top: 0; right: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; z-index: 0; } .vselfbox.thumb, .vpanel .vtile.thumb { top: auto; right: auto; bottom: 8px; aspect-ratio: 4 / 3; max-height: 40%; border-radius: 10px; border: 2px solid rgba(255,255,255,.7); z-index: 3; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.55); } .vselfbox.thumb .vself { object-fit: cover; } .vtag { top: auto; left: auto !important; right: 8px; bottom: 8px; max-width: 46%; font-size: 12px; padding: 3px 9px; background: rgba(0,0,0,.6); } .vover { padding: 0 16px; } .vmsg:not([hidden]):not(:empty) { position: absolute; z-index: 6; left: 50px; right: 8px; top: 8px; background: rgba(0,0,0,.66); border-radius: 8px; padding: 5px 9px; font-size: 12px; } #video-panel:not(.open) .vmsg { position: static; background: none; } /* camera scoring view in the stage */ #screen-game.cam-main #cam-panel { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 1; margin: 0; border: 0; border-radius: 0; background: #000; } #screen-game.cam-over #cam-panel { z-index: 20; background: var(--card); } #screen-game.cam-main #cam-panel .cam-stage { flex: 1 1 auto; height: auto !important; min-height: 120px; max-height: none; } #screen-game.cam-main #cam-panel .cam-top { flex: none; padding-left: 96px; padding-top: max(6px, var(--safe-t)); } #screen-game.cam-main #cam-panel .cam-ctl, #screen-game.cam-main #cam-panel .cam-zoom { flex: none; } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-top, #screen-game.cam-main #cam-panel[data-state="watching"] .cam-ctl { display: none; } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-status { left: 96px; right: 62px; top: max(8px, var(--safe-t)); } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-chips { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; padding: 6px; border-radius: 12px; background: rgba(8,10,14,.72); } #screen-game.cam-main.vid-live #cam-panel[data-state="watching"] .cam-chips { left: calc(var(--pip-w, 30%) + 16px); } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-chip, #screen-game.cam-main #cam-panel[data-state="watching"] .cam-go { height: 42px; font-size: 18px; } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-msg:not([hidden]) { position: absolute; z-index: 5; left: 8px; right: 8px; bottom: 64px; background: rgba(0,0,0,.7); border-radius: 8px; padding: 6px 10px; } /* opponent's turn in a call: your camera-scoring view shrinks to the PIP slot */ #screen-game.cam-pip #cam-panel { display: block; position: absolute; z-index: 6; left: 8px; bottom: 8px; width: var(--pip-w, 30%); aspect-ratio: 4 / 3; max-height: 40%; margin: 0; border: 2px solid rgba(255,255,255,.7); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.55); } #screen-game.cam-pip #cam-panel > :not(.cam-stage) { display: none !important; } #screen-game.cam-pip #cam-panel .cam-stage { height: 100% !important; min-height: 0; max-height: none; } #screen-game.cam-pip #cam-panel .cam-status, #screen-game.cam-pip #cam-panel .zbadge, #screen-game.cam-pip #cam-panel .cam-zfloat, #screen-game.cam-pip #cam-panel .cam-pick { display: none !important; } /* setting up the camera: the whole screen, with every exit and "Looks right" on screen */ #screen-game.cam-over #game-stage { grid-row: 1 / span 2; height: auto !important; } #screen-game.cam-over #game-side { display: none; } /* zoom: badge + slider */ .zbadge { position: absolute; z-index: 7; right: 8px; top: max(8px, var(--safe-t)); min-width: 44px; height: 30px; padding: 0 8px; border-radius: 15px; background: rgba(0,0,0,.62); color: #fff; font: 700 13px/30px system-ui, sans-serif; border: 1px solid rgba(255,255,255,.25); } .zbadge[hidden] { display: none; } .vselfbox.thumb .zbadge { top: auto; right: auto; left: 4px; bottom: 4px; min-width: 0; height: 20px; padding: 0 5px; font-size: 10.5px; line-height: 20px; border-radius: 10px; } .zbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; } .zbar .zlbl { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; } .zbar input[type="range"] { flex: 1; min-width: 60px; accent-color: #39FF14; height: 36px; margin: 0; } .zbar .zstep, .zbar .zdone { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--card2); color: #fff; font-size: 20px; font-weight: 800; } .zbar .zdone { background: var(--green-d); font-size: 16px; } .zbar .zval { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; } .vzoom, .cam-zfloat { position: absolute; z-index: 9; left: 8px; right: 8px; top: calc(max(8px, var(--safe-t)) + 40px); background: rgba(12,15,20,.92); border-radius: 12px; border: 1px solid rgba(255,255,255,.14); } .vzoom[hidden], .cam-zfloat[hidden], .cam-zoom[hidden] { display: none; } .vpanel.nomain .vzoom { pointer-events: auto; } .cam-zoom { border-top: 1px solid var(--line); } /* ---- bottom / right: scoreboard + keypad ---- */ #game-side { grid-column: 1; grid-row: 2; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--dm-bg); } #game-mid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 0; } #game-board { flex: 1 1 auto; min-height: 0; padding: 6px 6px 0; display: flex; flex-direction: column; } #game-info { flex: none; padding: 0 6px; } #game-info:empty { display: none; } #game-input { flex: none; padding: 6px 6px calc(6px + var(--safe-b)); justify-content: flex-start; } #game-input:empty { display: none; } .turnline.dm-hide { display: none; } .turnline { margin-top: 4px; min-height: 26px; } .turnline .who { font-size: 13.5px; } .checkout { margin-top: 5px; padding: 5px 10px; font-size: 14px; } /* the scoreboard card */ .dm-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--dm-col); border-radius: 12px; overflow: hidden; } .dm-darts { flex: none; display: flex; justify-content: center; align-items: center; gap: 14px; height: 26px; background: #e7e8ea; color: #2b2e33; } .dm-dart { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 18px; } .dm-dart svg { width: 52px; height: 14px; } .dm-dart.used { color: #b4b8be; } .dm-dart b { font-size: 13px; font-weight: 800; color: #b42318; letter-spacing: .02em; } /* x01 / scram: one column per player */ .dm-board .players { flex: 1 1 auto; min-height: 0; gap: 2px; background: #111316; align-items: stretch; } .dm-board .pcard { border: 0; border-radius: 0; background: var(--dm-col); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; } .dm-board .pcard.active { background: var(--dm-red); border: 0; } .dm-board .pcard .rem { font-size: clamp(38px, 10vh, 76px); margin: 0; line-height: 1; color: #fff; } .dm-board .players.compact .rem { font-size: clamp(28px, 7vh, 48px); } .dm-board .pcard .pname { padding: 0; margin-top: 4px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; max-width: 100%; } .dm-board .pcard .visits { display: none; } .dm-board .pcard .meta { justify-content: center; gap: 10px; margin-top: 3px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; } .dm-board .pcard .meta b { color: #fff; } .dm-board .pcard.active .meta { color: rgba(255,255,255,.9); } .dm-board .pcard .legs { top: 6px; right: 6px; background: rgba(0,0,0,.28); color: #fff; font-size: 12px; padding: 1px 7px; } .dm-board .pcard .members { justify-content: center; margin-top: 4px; } .dm-board .pcard.active .mem.now { background: rgba(0,0,0,.25); } /* cricket / tactics: numbers on the left, players across */ .dm-board .cboard { flex: 1 1 auto; height: 100%; border-spacing: 0; background: var(--dm-row); } .dm-board .cboard th { height: 1px; background: var(--dm-col); color: #fff; text-align: center; border-radius: 0 !important; padding: 6px 4px 5px; border-left: 2px solid #111316; vertical-align: middle; } .dm-board .cboard th.numh { border-left: 0; background: var(--dm-num); } .dm-board .cboard th.active { background: var(--dm-red); box-shadow: none; } .dm-board .cboard th .pts { display: block; font-size: clamp(26px, 6vh, 40px); line-height: 1; } .dm-board .cboard th .cname { text-align: center; color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .dm-board .cboard th .mpr { display: inline-block; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85); } .dm-board .cboard th .lg { display: inline-block; margin-left: 6px; font-size: 10.5px; color: rgba(255,255,255,.6); } .dm-board .cboard td { background: var(--dm-row); color: #fff; border-radius: 0 !important; height: auto; padding: 0; font-size: clamp(17px, 3.4vh, 28px); border-left: 2px solid #111316; border-top: 1px solid #2a2c30; line-height: 1.1; } .dm-board .cboard tr:nth-child(odd) td { background: var(--dm-row2); } .dm-board .cboard td.num { background: var(--dm-num) !important; color: #e8e9eb; font-size: clamp(14px, 2.6vh, 20px); font-weight: 700; border-left: 0; } .dm-board .cboard .mk1, .dm-board .cboard .mk2, .dm-board .cboard .mk3 { color: #fff; font-weight: 700; } .dm-board .cboard .mk3 { font-size: 1.15em; } .dm-board .cboard tr.dead td { opacity: .45; } .dm-board .cboard.thead { flex: none; height: auto; } .dm-board .tboard { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #111316; min-height: 0; } .dm-board .tboard .cboard { height: 100%; } .dm-board .tboard .cboard td { height: auto; font-size: clamp(15px, 2.8vh, 22px); } .dm-board .tboard .cboard td.num.dt { font-size: 11px; } .dm-board.golf, .dm-board.scram { background: transparent; } .dm-board.golf .dm-darts, .dm-board.scram .dm-darts { border-radius: 10px 10px 0 0; } .dm-board.golf .golf-hole { margin-top: 6px; } .dm-board.scram .players { flex: none; } /* compact keypad (manual scoring) */ #game-input .entry-tabs { margin-bottom: 5px; gap: 5px; } #game-input .entry-tabs button { padding: 5px; font-size: 13px; } #game-input .display { height: 44px; font-size: 30px; margin-bottom: 5px; border-radius: 12px; } #game-input .display.placeholder { font-size: 15px; } #game-input .quick { margin-bottom: 5px; gap: 4px; } #game-input .quick button { padding: 7px 0; font-size: 13.5px; } #game-input .keypad, #game-input .dartpad { flex: none; max-height: none; grid-auto-rows: 44px; gap: 6px; } #game-input .keypad button { font-size: 24px; border-radius: 12px; min-height: 0; } #game-input .dartpad button { font-size: 18px; border-radius: 10px; min-height: 0; } #game-input .mults { margin-bottom: 5px; } #game-input .mults button { padding: 7px 0; font-size: 15px; } #game-input .golfpad { grid-auto-rows: 50px; } .waitbox { padding: 9px 12px; font-size: 14px; border-radius: 12px; } /* camera scoring: no keypad (⋮ › Fix score shows it for the turn) */ #screen-game.cam-open:not(.cam-keys) #game-input > :not(.waitbox):not(.btns-col) { display: none !important; } #screen-game.cam-open:not(.cam-keys).vs-on #game-input { padding-bottom: calc(var(--vs-h, 0px) + 16px + var(--safe-b)); } /* the ⋮ menu */ .gmenu { position: fixed; z-index: 60; left: 6px; top: calc(max(6px, var(--safe-t)) + 44px); width: min(290px, calc(100vw - 12px)); max-height: calc(100dvh - 70px); overflow-y: auto; background: #1b2130; border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 2px; } .gmenu[hidden] { display: none; } .gmenu .gm { text-align: left; padding: 11px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text); background: transparent; } .gmenu .gm[hidden] { display: none; } .gmenu .gm.sub { padding-left: 26px; font-size: 14px; color: #c9d2e3; } .gmenu .gm:active, .gmenu .gm:hover { background: var(--card2); } .gmenu .gm:disabled { opacity: .4; } .gmenu .gm.danger { color: #fca5a5; border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 10px 10px; } .gmenu #game-mic.on { color: #fca5a5; } /* short phones */ @media (max-height: 700px) { #game-input .keypad, #game-input .dartpad { grid-auto-rows: 40px; gap: 5px; } #game-input .display { height: 38px; font-size: 26px; } #game-input .quick button, #game-input .mults button { padding: 5px 0; } .dm-darts { height: 22px; } } @media (max-height: 580px) { #game-input .keypad, #game-input .dartpad { grid-auto-rows: 34px; gap: 4px; } #game-input .entry-tabs button { padding: 3px; } } /* ---- landscape (tablet or phone sideways): board view left, scoreboard right ---- */ @media (orientation: landscape) and (min-width: 560px) { #screen-game.stage-on.active { grid-template-columns: 50% 50%; grid-template-rows: minmax(0, 1fr); } #screen-game.stage-on #game-stage, #screen-game.stage-on.keys-on #game-stage { grid-column: 1; grid-row: 1; height: 100%; } #screen-game.stage-on #game-side { grid-column: 2; grid-row: 1; } #screen-game.cam-over.active { grid-template-columns: 100%; } #screen-game.cam-over #game-stage { grid-row: 1; grid-column: 1; } /* no board view: scoreboard left, keypad right */ #screen-game:not(.stage-on).keys-on #game-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); } #screen-game:not(.stage-on).keys-on #game-input { overflow-y: auto; padding-top: 6px; } #screen-game.stage-on .voice-strip { left: calc(50% + 8px); right: 8px; max-width: none; margin: 0; } .gmenu { max-height: calc(100dvh - 60px); } #screen-game.stage-on #game-input .quick { display: none; } } @media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) { #game-input .keypad, #game-input .dartpad { grid-auto-rows: 30px; gap: 4px; } #game-input .display { height: 32px; font-size: 22px; margin-bottom: 4px; } #game-input .entry-tabs { margin-bottom: 4px; } #game-input .entry-tabs button { padding: 2px; font-size: 12px; } #game-input .mults { margin-bottom: 4px; } #game-input .mults button { padding: 3px 0; font-size: 13px; } #game-input .dartpad button { font-size: 15px; } #game-input .keypad button { font-size: 19px; } #game-input .golfpad { grid-auto-rows: 36px; } .dm-darts { height: 20px; } .dm-board .pcard .rem { font-size: clamp(30px, 14vh, 64px); } .dm-board .cboard th { padding: 3px 4px; } .dm-board .cboard th .pts { font-size: 24px; } .dm-board .cboard td { font-size: 16px; } .gs-top { min-height: 34px; } .gs-top .icon-btn { width: 34px; height: 34px; min-width: 34px; } #game-stage { padding-top: max(2px, var(--safe-t)); padding-bottom: 2px; } } /* camera setup bar: always-visible exit (kept from the Oct 2026 camera-exit fix) */ .cam-top { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; min-height: 48px; border-bottom: 1px solid var(--line); background: var(--card); } .cam-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cam-close-top { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--red-d); color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; touch-action: manipulation; } .cam-close-top:active { filter: brightness(.9); } @media (max-width: 400px) { .cam-top .cam-title { font-size: 0; } .cam-top .cam-title::before { content: "📷"; font-size: 18px; } .cam-close-top { padding: 0 12px; } } /* camera setup inside the match stage: the ⋮/📷 corner already says "camera", keep the row for Back to game */ #screen-game.cam-main #cam-panel .cam-top .cam-title { visibility: hidden; } /* Fix score pressed mid-setup: keypad wins the room, setup keeps just the picture + its buttons */ #screen-game.cam-main.keys-on #cam-panel:not([data-state="watching"]) .cam-zoom, #screen-game.cam-main.keys-on #cam-panel:not([data-state="watching"]) .cam-msg { display: none !important; } #screen-game.cam-main.keys-on #cam-panel .cam-stage { min-height: 60px; } /* board view on top (portrait): the cricket table packs tighter so 20..Bull always fit under the video */ @media (orientation: portrait), (max-height: 600px) { #screen-game.stage-on .dm-board .cboard th { padding: 3px 4px; } #screen-game.stage-on .dm-board .cboard th .pts { font-size: clamp(22px, 4.4vh, 36px); } #screen-game.stage-on .dm-board .cboard th .cnrow { display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; } #screen-game.stage-on .dm-board .cboard th .cname { font-size: 12px; min-width: 0; margin-top: 0; } #screen-game.stage-on .dm-board .cboard th .cbadges { flex: none; margin: 0; } #screen-game.stage-on .dm-board .cboard td { font-size: clamp(13px, 2.3vh, 24px); line-height: 1; } #screen-game.stage-on .dm-board .cboard td.num { font-size: clamp(12px, 2.1vh, 18px); } #screen-game.stage-on .dm-board .tboard .cboard td { font-size: clamp(12px, 2vh, 20px); } } .dm-board .pcard > * { flex-shrink: 0; } /* phone call / brief background: soft-pause banner (match + seat stay) */ .call-pause { position: fixed; left: 50%; top: max(10px, var(--safe-t)); transform: translateX(-50%); z-index: 55; max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 12px; text-align: center; background: rgba(12, 18, 28, .94); border: 1px solid #fbbf2455; color: #fde68a; font-size: 14px; font-weight: 700; box-shadow: 0 8px 28px rgba(0,0,0,.45); pointer-events: none; } .call-pause[hidden] { display: none; } .call-pause.reconnect { border-color: #39ff1455; color: #bbf7d0; } #screen-game.call-paused #game-stage { filter: brightness(.82); } /* ---- install / full-screen card (home) + settings block ---- */ .install-card { margin: 0 14px 12px; padding: 12px 12px 10px; border-radius: 14px; background: linear-gradient(160deg, #1a2740 0%, #121a28 100%); border: 1px solid #3b82f655; box-shadow: 0 6px 20px rgba(0,0,0,.28); } .install-card[hidden] { display: none; } .install-top { display: flex; align-items: flex-start; gap: 10px; } .install-ico { font-size: 22px; line-height: 1.2; flex: none; } .install-copy { flex: 1; min-width: 0; } .install-copy b { display: block; font-size: 15px; font-weight: 800; } .install-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; } .install-x { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--card2); color: var(--muted); font-size: 20px; line-height: 1; } .install-steps { margin: 10px 0 4px; padding-left: 18px; color: #d7deea; font-size: 13px; line-height: 1.45; } .install-steps li { margin: 4px 0; } .install-steps .share-glyph { display: inline-block; padding: 0 4px; font-weight: 800; color: var(--blue); } .install-steps.in-settings { margin: 6px 0 10px; } .install-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .install-btn { flex: 1 1 auto; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; } .install-btn.primary { background: var(--blue); color: #fff; } .install-btn.ghost { background: var(--card2); color: #e8eef8; } .install-settings { margin: 12px 0 4px; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); } .install-settings.on { border-color: #39ff1455; background: #1d2a1a; } .install-settings .btns.col { display: flex; flex-direction: column; gap: 8px; } .install-settings .cta.ghost { background: var(--card2); } /* standalone PWA: no browser chrome; keep content clear of the notch / home indicator */ html.pwa-standalone body, body.pwa-standalone { padding-top: 0; } #app { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* home / lobby etc. sit under the status bar in standalone; the match screen owns its own safe areas */ html.pwa-standalone #app.pad-safe, body.pwa-standalone #app.pad-safe { padding-top: var(--safe-t); padding-bottom: var(--safe-b); } /* 3 players: three columns side by side (no empty fourth box) */ .players.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .players.n3 .pcard { padding-left: 4px; padding-right: 4px; min-width: 0; } .players.n3 .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .players.n3 .meta { flex-wrap: wrap; justify-content: center; gap: 0 6px; font-size: 11px; } .dm-board .players.n3.compact .rem { font-size: clamp(26px, 6.5vh, 44px); } /* ===================================================================================================== Video match (1v1 / 2v2 / 3p with video open): the board video gets most of the screen so everyone can see the thrower's board; the scoreboard is about half its old size. Portrait: video ~78% of the height (shrinks only as far as the keypad needs on your turn). Landscape: video ~72% of the width. Local games / no video: unchanged. ===================================================================================================== */ #screen-game.big-vid #game-stage { height: 78vh; height: 78dvh; } #screen-game.big-vid.keys-on #game-stage { height: 78vh; height: 78dvh; } /* fitStage() trims it to fit the keypad */ #screen-game.big-vid .vselfbox.thumb, #screen-game.big-vid .vpanel .vtile.thumb { max-height: 32%; border-width: 1.5px; } #screen-game.big-vid.cam-pip #cam-panel { max-height: 32%; } /* compact scoreboard */ #screen-game.big-vid #game-board { padding: 3px 4px 0; } #screen-game.big-vid .dm-board { border-radius: 8px; } #screen-game.big-vid .dm-darts { height: 15px; gap: 10px; } #screen-game.big-vid .dm-darts svg, #screen-game.big-vid .dm-darts img { max-height: 11px; width: auto; } #screen-game.big-vid .dm-board .pcard { padding: 2px 4px 3px; } #screen-game.big-vid .dm-board .pcard .rem, #screen-game.big-vid .dm-board .players.compact .rem, #screen-game.big-vid .dm-board .players.n3.compact .rem { font-size: clamp(20px, 4.2vh, 34px); } #screen-game.big-vid .dm-board .pcard .pname { margin-top: 1px; font-size: 11px; line-height: 1.15; } #screen-game.big-vid .dm-board .pcard .meta { margin-top: 0; gap: 6px; font-size: 10px; line-height: 1.2; } #screen-game.big-vid .dm-board .pcard .legs { top: 2px; right: 3px; font-size: 10px; padding: 0 5px; } #screen-game.big-vid .dm-board .pcard .members { margin-top: 1px; gap: 3px; } #screen-game.big-vid .dm-board .pcard .mem { font-size: 9.5px; padding: 0 4px; } #screen-game.big-vid .dm-board .pcard .badges, #screen-game.big-vid .dm-board .pcard .you { font-size: 9px; } #screen-game.big-vid .dm-board .cboard th { padding: 1px 3px 2px; } #screen-game.big-vid .dm-board .cboard th .pts { font-size: clamp(15px, 2.9vh, 24px); } #screen-game.big-vid .dm-board .cboard th .cnrow { display: flex; justify-content: center; align-items: center; gap: 3px; min-width: 0; } #screen-game.big-vid .dm-board .cboard th .cname { font-size: 10px; margin-top: 0; min-width: 0; } #screen-game.big-vid .dm-board .cboard th .mpr { font-size: 9px; } #screen-game.big-vid .dm-board .cboard th .lg { font-size: 9px; margin-left: 3px; } #screen-game.big-vid .dm-board .cboard td { font-size: clamp(11px, 1.9vh, 18px); line-height: 1; } #screen-game.big-vid .dm-board .cboard td.num { font-size: clamp(10px, 1.7vh, 15px); } #screen-game.big-vid .dm-board .tboard .cboard td { font-size: clamp(10px, 1.7vh, 16px); } #screen-game.big-vid .checkout { margin-top: 2px; padding: 2px 8px; font-size: 12px; } #screen-game.big-vid .turnline { margin-top: 2px; min-height: 18px; } #screen-game.big-vid .turnline .who { font-size: 12px; } #screen-game.big-vid .waitbox { padding: 4px 8px; font-size: 12.5px; min-height: 0; } /* compact keypad on your turn: no quick-score row, shorter keys */ #screen-game.big-vid #game-input { padding: 4px 4px calc(4px + var(--safe-b)); } #screen-game.big-vid #game-input .entry-tabs { margin-bottom: 3px; } #screen-game.big-vid #game-input .entry-tabs button { padding: 3px; font-size: 12px; } #screen-game.big-vid #game-input .display { height: 34px; font-size: 24px; margin-bottom: 3px; border-radius: 10px; } #screen-game.big-vid #game-input .display.placeholder { font-size: 13px; } #screen-game.big-vid #game-input .quick { display: none; } #screen-game.big-vid #game-input .mults { margin-bottom: 3px; } #screen-game.big-vid #game-input .mults button { padding: 4px 0; font-size: 13px; } #screen-game.big-vid #game-input .keypad, #screen-game.big-vid #game-input .dartpad { grid-auto-rows: 40px; gap: 4px; } /* 40px: still an easy thumb target */ #screen-game.big-vid #game-input .keypad button { font-size: 21px; } #screen-game.big-vid #game-input .dartpad button { font-size: 16px; } @media (max-height: 700px) { #screen-game.big-vid #game-input .display { height: 30px; font-size: 21px; } } /* landscape: video ~72% wide, scoreboard ~28% (a little wider on your turn so the keypad stays usable) */ @media (orientation: landscape) and (min-width: 560px) { #screen-game.big-vid.stage-on.active { grid-template-columns: 72% 28%; } #screen-game.big-vid.stage-on.keys-on.active { grid-template-columns: 64% 36%; } #screen-game.big-vid #game-stage, #screen-game.big-vid.keys-on #game-stage { height: 100%; } #screen-game.big-vid.stage-on .voice-strip { left: calc(72% + 6px); right: 6px; } #screen-game.big-vid.stage-on.keys-on .voice-strip { left: calc(64% + 6px); } #screen-game.big-vid .dm-board .pcard .rem, #screen-game.big-vid .dm-board .players.compact .rem, #screen-game.big-vid .dm-board .players.n3.compact .rem { font-size: clamp(20px, 7vh, 40px); } #screen-game.big-vid .dm-board .cboard th .pts { font-size: clamp(15px, 4.5vh, 26px); } #screen-game.big-vid .dm-board .cboard td { font-size: clamp(11px, 3vh, 20px); } #screen-game.big-vid .dm-board .cboard td.num { font-size: clamp(10px, 2.6vh, 16px); } } @media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) { #screen-game.big-vid #game-input .keypad, #screen-game.big-vid #game-input .dartpad { grid-auto-rows: 30px; gap: 3px; } #screen-game.big-vid #game-input .display { height: 28px; font-size: 19px; } #screen-game.big-vid #game-input .entry-tabs button { padding: 1px; font-size: 11px; } } /* cricket in a video match (portrait): numbers in two columns under one header row */ #screen-game.big-vid .dm-board.split .tboard .cboard td { font-size: clamp(13px, 2.4vh, 22px); } #screen-game.big-vid .dm-board.split .tboard .cboard td.num { font-size: clamp(11px, 2vh, 17px); } #screen-game.big-vid .dm-board.split tr.blank td.num { background: var(--dm-num) !important; } #screen-game.big-vid .dm-board.split .tboard .cboard td { height: 20px; } @media (max-height: 700px) { #screen-game.big-vid .dm-board.split .tboard .cboard td { height: 18px; } } /* video match: one-line waiting note; cricket header = score + name on one line, MPR / legs under it */ #screen-game.big-vid .waitbox { padding: 2px 8px; font-size: 12px; line-height: 1.35; border-radius: 8px; } #screen-game.big-vid .waitbox .dot-pulse { transform: scale(.8); } #screen-game.big-vid .dm-board.split .cboard.thead { table-layout: fixed; width: 100%; } #screen-game.big-vid .dm-board.split .cboard th { padding: 2px 4px; } #screen-game.big-vid .dm-board.split .cboard th .hrow { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; } #screen-game.big-vid .dm-board.split .cboard th .pts { display: inline; flex: none; font-size: clamp(16px, 2.8vh, 24px); } #screen-game.big-vid .dm-board.split .cboard th .cname { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; } #screen-game.big-vid .dm-board.split .cboard th .cbadges { flex: none; display: inline-flex; } #screen-game.big-vid .dm-board.split .cboard th .cbadges > * { font-size: 8.5px; padding: 0 3px; } #screen-game.big-vid .dm-board.split .cboard th .hsub { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.8); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* thrower label on the big tile in 2v2 / 3p: never squeezed to "Y." */ .mesh .vtag .vname { max-width: 9em; } .mesh .vtag { min-width: 40px; } /* Scram in a video match: same pieces, tighter */ #screen-game.big-vid .scram-head { margin-bottom: 2px; font-size: 11px; } #screen-game.big-vid .scram-head > :not(.scram-round) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #screen-game.big-vid .scram-strip { margin: 3px 0; gap: 3px; } #screen-game.big-vid .scram-strip span { padding: 2px 0; font-size: 11px; border-radius: 6px; } #screen-game.big-vid .scram-active { padding: 3px 8px; gap: 8px; border-radius: 8px; } #screen-game.big-vid .scram-active .sa-num { font-size: 28px; min-width: 52px; } #screen-game.big-vid .scram-active .sa-side small { font-size: 10.5px; } #screen-game.big-vid .scram-active .sa-marks { font-size: 12px; } #screen-game.big-vid .scram-active .sa-marks i { width: 12px; height: 12px; } @media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) { #screen-game.big-vid .scram-head > :not(.scram-round) { display: none; } #screen-game.big-vid .players.scram .pcard { padding-top: 1px; padding-bottom: 2px; } } @media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) { #screen-game.big-vid .scram-active .sa-side small:first-child { display: none; } } /* Golf / Tactics in a video match */ #screen-game.big-vid #game-input .golfpad { grid-auto-rows: 44px; } #screen-game.big-vid .golfpad button { font-size: 15px; } #screen-game.big-vid .golfpad button small { font-size: 10.5px; } #screen-game.big-vid .dm-board.golf .golf-hole { margin: 3px 0 4px; padding: 3px 8px; gap: 8px; border-radius: 8px; } #screen-game.big-vid .golf-hole .gh-num { font-size: 30px; min-width: 44px; } #screen-game.big-vid .golf-hole .gh-side b { font-size: 13px; } #screen-game.big-vid .golf-hole .gh-side small { font-size: 10.5px; } @media (orientation: portrait) { #screen-game.big-vid .dm-board .tboard .cboard td { height: 15px; } } @media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) { #screen-game.big-vid #game-input .golfpad { grid-auto-rows: 34px; } #screen-game.big-vid .golf-hole .gh-side small:last-child { display: none; } } /* tablets in landscape (lots of height): the narrow scoreboard keeps normal-size labels */ @media (orientation: landscape) and (min-width: 560px) and (min-height: 600px) { #screen-game.big-vid .dm-darts { height: 22px; } #screen-game.big-vid .dm-board .cboard th { padding: 5px 4px; } #screen-game.big-vid .dm-board .cboard th .pts { font-size: 32px; } #screen-game.big-vid .dm-board .cboard th .cname { font-size: 13px; } #screen-game.big-vid .dm-board .cboard th .mpr, #screen-game.big-vid .dm-board .cboard th .lg { font-size: 11px; } #screen-game.big-vid .dm-board .pcard .pname { font-size: 14px; } #screen-game.big-vid .dm-board .pcard .meta { font-size: 12px; } #screen-game.big-vid .dm-board .pcard .legs { font-size: 12px; } #screen-game.big-vid .waitbox { font-size: 14px; padding: 6px 10px; } } /* ---- camera / microphone chooser ---- */ .dev-pick { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); } .dev-pick .field-label { margin-top: 6px; } .dev-select { width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 10px; background: var(--card2); color: var(--text, #fff); border: 1px solid var(--line); font-size: 14px; } .dev-names { width: 100%; margin-top: 8px; min-height: 38px; font-size: 13.5px; } .dev-prev-box { position: relative; margin-top: 8px; aspect-ratio: 16 / 9; max-height: 180px; border-radius: 10px; overflow: hidden; background: #000; } .dev-prev-box video { width: 100%; height: 100%; object-fit: contain; display: block; } #dev-prev-l { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #dev-prev-l:empty { display: none; } .dev-prev-go { position: absolute; inset: 0; margin: auto; width: 120px; height: 40px; border-radius: 20px; background: var(--card2); color: #fff; font-weight: 700; } .cam-dev { flex: 0 1 auto; min-width: 0; } .cam-dev[hidden] { display: none; } .cam-dev-l { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; } .cam-dev .dev-select { min-height: 34px; max-width: 220px; padding: 4px 8px; font-size: 13px; } /* camera scoring: whose darts the camera is reading (always on while watching) + "check this dart" quick fix */ .cam-turn { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); top: 8px; max-width: calc(100% - 16px); padding: 4px 11px; border-radius: 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; background: rgba(0,0,0,.66); color: #e5e7eb; border: 1.5px solid rgba(255,255,255,.25); } .cam-turn[hidden] { display: none; } .cam-turn.mine { color: #39FF14; border-color: rgba(57,255,20,.75); } .cam-turn.mine.hold { color: #facc15; border-color: rgba(250,204,21,.8); } .cam-turn.wait { color: #cbd5e1; } #cam-panel[data-state="watching"] .cam-status { top: 40px; } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-turn { top: max(8px, var(--safe-t)); max-width: calc(100% - 150px); font-size: 12px; padding: 4px 9px; } #screen-game.cam-main #cam-panel[data-state="watching"] .cam-status { top: calc(max(8px, var(--safe-t)) + 32px); } #screen-game.cam-pip #cam-panel .cam-turn { top: 3px; font-size: 9.5px; padding: 1px 6px; max-width: calc(100% - 6px); border-width: 1px; } .cam-chips { flex-wrap: wrap; } .cam-chip.low { border-color: #fb923c; color: #fb923c; animation: camLow 1.2s ease-in-out infinite; } @keyframes camLow { 50% { box-shadow: 0 0 0 3px rgba(251,146,60,.35); } } .cam-check { flex: 1 0 100%; display: flex; gap: 6px; align-items: center; } .cam-check span { font-size: 13px; font-weight: 700; color: #fb923c; white-space: nowrap; } .cam-check button { flex: 1; min-width: 0; height: 36px; border-radius: 10px; background: var(--card2); font-size: 16px; font-weight: 800; border: 1.5px solid var(--line); } .cam-check button.on { border-color: #fb923c; color: #fb923c; } .v-check { color: #fb923c; } /* ===== "tiny board" (Michael, Oct 2026): video match = the thrower's board video nearly full screen; the scoreboard is a thin strip about half the size of the big-video board. All games, 1v1 / 2v2 / 3p. ===== */ #screen-game.big-vid #game-stage { height: 90vh; height: 90dvh; } #screen-game.big-vid.keys-on #game-stage { height: 90vh; height: 90dvh; } /* fitStage() trims it to fit board + keypad */ #screen-game.big-vid #game-board { padding: 2px 3px 0; } #screen-game.big-vid .dm-board { border-radius: 6px; } #screen-game.big-vid .dm-darts { height: 11px; gap: 8px; } #screen-game.big-vid .dm-darts svg, #screen-game.big-vid .dm-darts img { max-height: 8px; } #screen-game.big-vid .dm-darts b { font-size: 9px; line-height: 11px; } /* X01 / Over 40 / Scram cards: score and name side by side, one small stats line */ #screen-game.big-vid .dm-board .pcard { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 5px; row-gap: 0; padding: 1px 3px 2px; } #screen-game.big-vid .dm-board .pcard .rem, #screen-game.big-vid .dm-board .players.compact .rem, #screen-game.big-vid .dm-board .players.n3.compact .rem { font-size: clamp(17px, 3vh, 26px); line-height: 1.05; } #screen-game.big-vid .dm-board .pcard .pname { margin: 0; font-size: 10.5px; line-height: 1.1; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #screen-game.big-vid .dm-board .pcard .visits { display: none; } #screen-game.big-vid .dm-board .pcard .meta { flex-basis: 100%; justify-content: center; margin: 0; font-size: 9px; line-height: 1.1; gap: 5px; } #screen-game.big-vid .dm-board .pcard .legs { top: 1px; right: 2px; font-size: 8.5px; padding: 0 4px; line-height: 12px; } #screen-game.big-vid .dm-board .pcard .members { flex-basis: 100%; justify-content: center; margin: 0; } #screen-game.big-vid .dm-board .pcard .mem { font-size: 8.5px; padding: 0 3px; line-height: 12px; } #screen-game.big-vid .dm-board .pcard .you-tag, #screen-game.big-vid .dm-board .pcard .off { font-size: 7.5px; padding: 0 3px; } #screen-game.big-vid .dm-board .pcard .srole { font-size: 9px; padding: 0 4px; margin: 0; } #screen-game.big-vid .checkout { margin-top: 1px; padding: 1px 6px; font-size: 11px; border-radius: 6px; } #screen-game.big-vid .o40calc { margin-top: 1px; padding: 0 6px; font-size: 10.5px; } #screen-game.big-vid #game-input { padding: 2px 3px calc(2px + var(--safe-b)); } #screen-game.big-vid .waitbox:not(.note) { display: none; } /* the video label + red highlight show who throws */ #screen-game.big-vid .waitbox.note { padding: 1px 6px; font-size: 10.5px; line-height: 1.25; } /* Cricket / Tactics strip: numbers across, one row per player */ #screen-game.big-vid .dm-board.strip { flex: none; } #screen-game.big-vid .cboard.cstrip { flex: none; height: auto; width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--dm-row); } #screen-game.big-vid .cboard.cstrip th, #screen-game.big-vid .cboard.cstrip td { border-left: 1px solid #111316; padding: 0; text-align: center; } #screen-game.big-vid .cboard.cstrip th.sn { height: 14px; background: var(--dm-num); color: #e8e9eb; font-size: 10.5px; font-weight: 800; line-height: 14px; } #screen-game.big-vid .cboard.cstrip th.sn.dead { color: #6b7280; text-decoration: line-through; } #screen-game.big-vid .cboard.cstrip .sp-n { width: 30%; background: var(--dm-col); border-left: 0; text-align: left; padding: 0 3px; } #screen-game.big-vid .dm-board.tac .cboard.cstrip .sp-n { width: 25%; } #screen-game.big-vid .cboard.cstrip td { height: 22px; font-size: 15px; line-height: 1; } #screen-game.big-vid .cboard.cstrip td.dead { opacity: .45; } #screen-game.big-vid .dm-board.tac .cboard.cstrip td { font-size: 12.5px; } #screen-game.big-vid .dm-board.tac .cboard.cstrip th.sn { font-size: 9.5px; } #screen-game.big-vid .cboard.cstrip tr.active td.sp-n { background: var(--dm-red); } #screen-game.big-vid .cboard.cstrip tr.active td:not(.sp-n) { box-shadow: inset 0 2px 0 var(--dm-red), inset 0 -2px 0 var(--dm-red); } #screen-game.big-vid .cboard.cstrip .hrow { display: flex; align-items: baseline; gap: 4px; min-width: 0; } #screen-game.big-vid .cboard.cstrip .pts { flex: none; font-size: 15px; font-weight: 800; color: #fff; } #screen-game.big-vid .cboard.cstrip .cname { flex: 0 1 auto; min-width: 0; font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #screen-game.big-vid .cboard.cstrip .cbadges { flex: none; display: inline-flex; } #screen-game.big-vid .cboard.cstrip .cbadges > * { font-size: 7.5px; padding: 0 2px; } #screen-game.big-vid .cboard.cstrip .hsub { font-size: 8px; line-height: 1.05; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #screen-game.big-vid .cboard.cstrip .members { display: flex; gap: 2px; margin: 0; overflow: hidden; } #screen-game.big-vid .cboard.cstrip .mem { font-size: 8px; padding: 0 2px; line-height: 10px; white-space: nowrap; } /* Golf: thin hole line + scorecard */ #screen-game.big-vid .golf-hole { padding: 1px 6px; gap: 6px; min-height: 0; } #screen-game.big-vid .golf-hole .gh-num { font-size: 18px; min-width: 26px; line-height: 1.1; } #screen-game.big-vid .golf-hole .gh-side b { font-size: 10.5px; } #screen-game.big-vid .golf-hole .gh-side small { font-size: 9px; line-height: 1.1; } #screen-game.big-vid .golf-hole .gh-side small + small { display: none; } #screen-game.big-vid .gcard th, #screen-game.big-vid .gcard td { padding: 0 2px; font-size: 10.5px; height: 16px; line-height: 16px; } #screen-game.big-vid .gcard .ghalf { font-size: 9.5px; padding: 0 4px; } /* Scram: no subtitle row, thin strip, compact active number */ #screen-game.big-vid .scram-head { display: none; } #screen-game.big-vid .scram-strip { margin: 1px 0; gap: 2px; } #screen-game.big-vid .scram-strip span { padding: 0; font-size: 9.5px; line-height: 14px; border-radius: 4px; } #screen-game.big-vid .scram-active { padding: 1px 6px; gap: 6px; } #screen-game.big-vid .scram-active .sa-num { font-size: 18px; min-width: 34px; } #screen-game.big-vid .scram-active .sa-side small { font-size: 9px; line-height: 1.1; } #screen-game.big-vid .scram-active .sa-side small:last-child { display: none; } #screen-game.big-vid .scram-active .sa-marks { font-size: 10px; } #screen-game.big-vid .scram-active .sa-marks i { width: 9px; height: 9px; } /* landscape / desktop: the board video takes ~85% of the width, the scoreboard a narrow column (players stacked) */ @media (orientation: landscape) and (min-width: 560px) { #screen-game.big-vid.stage-on.active { grid-template-columns: 85% 15%; } #screen-game.big-vid.stage-on.keys-on.active { grid-template-columns: 66% 34%; } #screen-game.big-vid.stage-on .voice-strip { left: calc(85% + 4px); right: 4px; } #screen-game.big-vid.stage-on.keys-on .voice-strip { left: calc(66% + 6px); } #screen-game.big-vid #game-stage, #screen-game.big-vid.keys-on #game-stage { height: 100%; } #screen-game.big-vid:not(.keys-on) .dm-board .players { flex-direction: column; grid-template-columns: 1fr !important; grid-auto-flow: row; } #screen-game.big-vid:not(.keys-on) .dm-board .pcard { flex: 1 1 0; } #screen-game.big-vid .dm-board .pcard .rem, #screen-game.big-vid .dm-board .players.compact .rem, #screen-game.big-vid .dm-board .players.n3.compact .rem { font-size: clamp(18px, 6vh, 30px); } #screen-game.big-vid:not(.keys-on) .dm-board .cboard th { padding: 1px 1px; } #screen-game.big-vid:not(.keys-on) .dm-board .cboard th .pts { font-size: clamp(13px, 4vh, 20px); } #screen-game.big-vid:not(.keys-on) .dm-board .cboard th .cname { font-size: 9px; } #screen-game.big-vid:not(.keys-on) .dm-board .cboard th .mpr, #screen-game.big-vid:not(.keys-on) .dm-board .cboard th .lg { display: none; } #screen-game.big-vid:not(.keys-on) .dm-board .cboard td { font-size: clamp(10px, 3vh, 17px); } #screen-game.big-vid:not(.keys-on) .dm-board .cboard td.num { font-size: clamp(9px, 2.6vh, 14px); } #screen-game.big-vid:not(.keys-on) .gcard th, #screen-game.big-vid:not(.keys-on) .gcard td { font-size: 9px; padding: 0 1px; } } #screen-game.big-vid:not(.my-turn) #game-info .turnline { display: none; } #screen-game.big-vid.my-turn #game-info .turnline { margin-top: 1px; min-height: 0; } #screen-game.big-vid.my-turn #game-info .turnline .who { font-size: 11px; } #screen-game.big-vid.my-turn #game-info .turnline .chip { height: 22px; min-width: 40px; font-size: 12px; line-height: 22px; padding: 0 4px; } #screen-game.big-vid .dm-board.scram .pcard .meta { display: none; } #screen-game.big-vid .dm-board.scram .pcard { padding: 1px 3px; } #screen-game.big-vid .dm-board .pcard { align-content: center; } #screen-game.big-vid .dm-board .pcard .meta { font-size: 9.5px; line-height: 11px; } #screen-game.big-vid .cboard.cstrip td { height: 21px; } #screen-game.big-vid .cboard.cstrip .hrow .hsub { flex: none; margin-left: auto; font-size: 8.5px; } #screen-game.big-vid .cboard.cstrip .hrow .hsub::before { content: 'MPR '; opacity: .7; } /* ---------- home: looping background highlight video (Oct 2026) ---------- Video is z-index 0 (not -1): Safari/WebKit often paints negative-z fixed children behind the stacking context's own background, so the theme-real hero photo hid the loop on Mac. Drop that photo while .has-video is on; the video (or its poster) is the background. Home content sits at z-index 1. [data-still] (reduced motion, Save-Data): poster only. #home-video-btn appears when autoplay is blocked. */ #screen-home.has-video { isolation: isolate; position: relative; background-image: none !important; background-color: #061014; } #screen-home.has-video > *:not(.home-video):not(.home-video-btn) { position: relative; z-index: 1; } .home-video { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #061014; } .home-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; } .home-video video::-webkit-media-controls, .home-video video::-webkit-media-controls-start-playback-button, .home-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; } .home-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,13,.72) 0%, rgba(4,10,13,.30) 20%, rgba(4,10,13,.10) 36%, rgba(4,10,13,.38) 54%, rgba(4,10,13,.80) 74%, rgba(4,10,13,.92) 100%), radial-gradient(130% 90% at 50% 40%, rgba(4,10,13,0) 50%, rgba(4,10,13,.45) 100%); } /* wide screens: the content is a 520px column, so the sides can show the footage brighter */ @media (min-width: 900px) and (min-aspect-ratio: 1/1) { .home-video::after { background: linear-gradient(90deg, rgba(4,10,13,.15) 0%, rgba(4,10,13,0) 22%, rgba(4,10,13,.42) 38%, rgba(4,10,13,.42) 62%, rgba(4,10,13,0) 78%, rgba(4,10,13,.15) 100%), linear-gradient(180deg, rgba(4,10,13,.55) 0%, rgba(4,10,13,.05) 30%, rgba(4,10,13,.20) 60%, rgba(4,10,13,.75) 100%); } } .home-video video[data-still] { display: none; } .home-video:has(video[data-still]) { background: #061014 url("/media/home-loop-720-poster.jpg?v=3") 50% 50% / cover no-repeat; } @media (max-aspect-ratio: 3/4) { .home-video:has(video[data-still]) { background-image: url("/media/home-loop-portrait-poster.jpg?v=3"); } } .home-video-btn { position: fixed; z-index: 5; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + var(--safe-b)); display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #e6fbfb; background: rgba(8,20,24,.78); border: 1px solid rgba(25,195,192,.55); box-shadow: 0 0 20px -4px rgba(25,195,192,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .home-video-btn[hidden] { display: none; } .home-video-btn span { color: var(--real-orange, #ff8a1f); } /* phones: keep it top-right, clear of the big buttons */ @media (max-width: 600px) { .home-video-btn { bottom: auto; top: calc(10px + var(--safe-t)); padding: 6px 10px; font-size: 12px; } } /* player / team colours on the cricket-family scoreboards (Cricket, Tactics, Scram; Oct 2026): P1 / Team A neon green, P2 / Team B orange, P3 cyan. Name, points and marks take the colour; the thrower's column gets a dark tint of it plus a coloured bar (instead of the plain red block) so the colour stays readable. */ .pc0 { --pc: #39ff14; --pcbg: rgba(57, 255, 20, .16); } .pc1 { --pc: #ff8c1a; --pcbg: rgba(255, 140, 26, .18); } .pc2 { --pc: #22d3ee; --pcbg: rgba(34, 211, 238, .18); } .cboard th[class*="pc"] .pts, .cboard th[class*="pc"] .cname, .cboard tr[class*="pc"] .pts, .cboard tr[class*="pc"] .cname { color: var(--pc); } .cboard th[class*="pc"] { box-shadow: inset 0 3px 0 var(--pc); } .dm-board .cboard td[class*="pc"] .mk1, .dm-board .cboard td[class*="pc"] .mk2, .dm-board .cboard td[class*="pc"] .mk3, .cboard td[class*="pc"] span, .cboard tr[class*="pc"] td span[class^="mk"] { color: var(--pc); } .dm-board .cboard th[class*="pc"].active, .cboard th[class*="pc"].active { background: var(--pcbg); box-shadow: inset 0 -3px 0 var(--pc), inset 0 3px 0 var(--pc); } #screen-game.big-vid .cboard.cstrip tr[class*="pc"] td.sp-n { box-shadow: inset 3px 0 0 var(--pc); } #screen-game.big-vid .cboard.cstrip tr[class*="pc"].active td.sp-n { background: var(--pcbg); box-shadow: inset 4px 0 0 var(--pc); } #screen-game.big-vid .cboard.cstrip tr[class*="pc"].active td:not(.sp-n) { box-shadow: inset 0 2px 0 var(--pc), inset 0 -2px 0 var(--pc); } .players.scram .pcard[class*="pc"] .pname, .players.scram .pcard[class*="pc"] .rem { color: var(--pc); } .players.scram .pcard[class*="pc"] { border-top: 3px solid var(--pc); } .players.scram .pcard[class*="pc"].active { background: var(--pcbg); } #screen-game.big-vid .cboard.cstrip tr[class*="pc"] .pts, #screen-game.big-vid .cboard.cstrip tr[class*="pc"] .cname { color: var(--pc); } #screen-game.big-vid .cboard.cstrip .cname { min-width: 3.2em; } /* vs the bot (Oct 2026) */ .big-btn.bot { background: linear-gradient(135deg, #c2410c, #ea580c); border-color: #fb923c66; } .big-btn.bot small { color: rgba(255,255,255,.85); } .waitbox.botbox { text-align: center; } .waitbox.botbox .botline { margin-top: 6px; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 14px; } .waitbox.botbox .baim { color: #39ff14; font-size: 16px; } .waitbox.botbox .bdart { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font-weight: 700; } .empty-note .lob-bot { display: block; margin: 12px auto 0; max-width: 280px; } /* ---------- player cards / level badges (Oct 2026) ---------- */ .lvl { display: inline-flex; align-items: center; flex: none; font-style: normal; font-weight: 800; font-size: 12px; line-height: 1; letter-spacing: .3px; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; vertical-align: middle; background: rgba(0,0,0,.25); } .lvl.sm { font-size: 10.5px; padding: 3px 7px; } .lvl.xs { font-size: 9px; padding: 2px 5px; border-width: 1px; margin-left: 4px; } .lvl.lg { font-size: 15px; padding: 6px 12px; } .lvl-rookie { color: #93a0b8; } .lvl-pub { color: #5ee36b; } .lvl-league { color: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,.35); } .lvl-ace { color: #ff9f1c; box-shadow: 0 0 8px rgba(255,159,28,.4); } .lvl-pro { color: #0b0f14; background: linear-gradient(135deg, #ff9f1c, #ff5e00); border-color: #ff9f1c; box-shadow: 0 0 12px rgba(255,120,0,.6); } .lvl-new { color: #7dd3fc; border-style: dashed; } .lvl-unrated { color: #6b7790; border-style: dotted; } .lvl-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; } .pcard-lv { background: linear-gradient(160deg, #1b2538, #121822); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 8px; text-align: left; } .pcard-lv.lv-league, .pcard-lv.lv-pub { border-color: rgba(57,255,20,.55); } .pcard-lv.lv-ace, .pcard-lv.lv-pro { border-color: rgba(255,159,28,.7); } .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pc-name { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pc-sub { margin: 6px 0 10px; } .pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pc-grid .stat { background: rgba(255,255,255,.04); } .pc-grid .stat b { font-size: 20px; } .pc-foot { margin: 10px 0 0; font-size: 11px; } .pm-card { margin: 6px 0 10px; } .card-modal { margin-bottom: 8px; } .lob-lvl { display: block; margin-top: 3px; line-height: 1; } .room-players .lvl, .lp .lvl { margin-left: 4px; } /* ---------- mld logo (Major League Darts, Oct 2026): clean lockup, simple fade/scale reveal ---------- */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } .mld-logo { display: block; width: min(78%, 300px); height: auto; margin: 10px auto 4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(0,0,0,.55)); } .real-in .mld-logo, .nm-done .mld-logo { animation: mld-in .9s cubic-bezier(.2,.8,.2,1) both; } @keyframes mld-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } @media (max-height: 700px) { .mld-logo { width: min(70%, 240px); } } @media (prefers-reduced-motion: reduce) { .mld-logo { animation: none !important; } }