From 3139f1211f932d770624b801c093351d70d5f309 Mon Sep 17 00:00:00 2001 From: Isorg Date: Fri, 16 Oct 2026 20:41:33 +0000 Subject: [PATCH 1/2] Manage Game console: names on every control, phone card chevron, unsaved-changes guards, confirms, contrast Every control on the check-in console has an accessible name and the row controls name the player; column headers carry scope; the Setup, payout, chip and blinds fields are labelled; the modals are labelled dialogs. Phone cards gain a chevron button to open them and the bulk bar is hidden on phones. Setup gets beforeunload, a confirm on the back arrow and on Load preset, and the payout total is refused before anything is saved. Bulk Eliminate, un-ticking a buy-in, clearing a cash-out, taking a player off a table, switching off a reward chip with values and Deny all ask, naming the player. The toast and pending banner are live regions. Contrast and target sizes fixed; the segmented-control thumb takes the active button's row so a wrapped strip no longer lights two tabs. Co-Authored-By: Claude Fable 5.1 --- CHANGELOG.md | 12 + www/checkin.php | 713 ++++++++++++++++++++++++++------------------ www/event_blinds.js | 20 +- www/event_setup.css | 2 +- www/pk-dialogs.js | 2 + www/pk-seg.js | 8 + 6 files changed, 458 insertions(+), 299 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73f4a79..eb0cd49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,18 @@ lands and that heading is renamed when a release is cut. ## [Unreleased] +### Changed + +- **Every control on the Manage Game console now says what it is and whom it is for.** Screen readers and the browser's own tools had almost nothing to go on: the Setup fields, the payout rows, the chip rows, the blinds grid, the walk-in box and every per-player control in the roster were unnamed, and a row's buttons read as six identical "Eliminate"s. Now each control names the player ("Buy in for Ava", "RSVP for Ben", "Remove Finn", "Money history for Cleo", "Move Dev"), the Setup labels are tied to their fields, payout inputs are named by place ("1st place: cash %"), chip rows by their value, blind cells by round and column ("Round 3 small blind"), every column header carries its scope, the header's icon buttons keep their names when their labels collapse on a phone, the "?" tips read their text, and the add-on count (which removes the last add-on) is a real button. The modals are labelled dialogs and the Help modal's group labels are headings. In `www/checkin.php` (the builders and the server-rendered modals) and `www/event_blinds.js`. +- **A player card on a phone opens from a ▾ button as well as a tap.** The card's summary row was the only way in and nothing on it was focusable, so a keyboard or switch user could not reach rebuys, cash, table, RSVP, Eliminate, Notes or Remove on a phone, and nothing hinted that the row opened at all. Each card now carries a chevron (`.pk-mobile-more`, `aria-expanded`, 44px on touch) beside the status badge; the row still opens on a tap. The bulk-action bar is hidden on phones: the checkboxes it acts on live in the desktop table, so on a phone it could only ever say "0 selected". +- **Setup guards unsaved work.** Leaving the page with unsaved Setup changes gets the browser's own prompt, the back arrow asks first, and **Load preset asks before dropping unsaved edits** (it rebuilds every pane from the server). **A payout total over 100% is now refused before anything is saved**: it used to be caught only after the game settings had already been written, which left the game half-updated behind the error. After Save game the amber unsaved dot goes out and "Saved ✓" shows for a moment; the dot used to stay lit after a successful save. +- **More actions ask first, and name the player.** Bulk Eliminate ("Eliminate 3 selected players?"), un-ticking a buy-in (it also frees the seat; a slip there once cost a real game two buy-ins), putting a cashed-out player back in play, taking a player off a table through Move, and switching off a reward chip that holds amounts (the chip wipes them). Deny says who. A declined confirm leaves the control exactly as it was. The console's passing notices (a walk-in arriving, a bulk action done, the game finished) are announced through a live region now, as is the saving progress card. + +### Fixed + +- **Contrast on the Manage Game console.** The light grey (`#94a3b8`, 2.6:1) on section titles, seat info, log and ledger times, chip placeholders, the "$" prefix, hints and the Help modal's group headings is `#64748b` now; "Playing", the prize pool totals, payout amounts and profit (`#22c55e`, 2.3:1) are `#15803d`; Eliminate, Approve, Finish, Add Table and the reward chips (white on `#16a34a`, 3.3:1) take the same `#15803d` Save & Send took in 1.8.11; the warning ambers (`#d97706`, 3.2:1) are `#b45309`; the winner's "1st" and the "?" tips (white on `#cbd5e1`, 1.5:1) are readable. Input borders are unchanged (decorative). The small row controls (the ledger, bust, add-on, Move, ledger Edit / Clear, payout and jackpot × buttons, the "?" tips) are at least 24px, and finger-sized on a touch screen through a `pointer: coarse` block. +- **Setup's tab strip lit two tabs on a phone.** With five or six tabs the strip wraps onto a second row, and the sliding thumb spanned both rows, so Game and Timer both looked selected. The thumb now takes the active button's row as well as its width (`www/pk-seg.js`), which every segmented control on the site inherits. + --- ## [v1.8.11] - 2026-10-16 diff --git a/www/checkin.php b/www/checkin.php index 588a5eb..b0a132e 100644 --- a/www/checkin.php +++ b/www/checkin.php @@ -194,8 +194,9 @@ .pk-help-btn{flex:0 0 auto;padding:.4rem .8rem;border-radius:6px;border:1.5px solid #2563eb;background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:.8rem;cursor:pointer;line-height:1;min-height:auto} .pk-help-btn:hover{background:#dbeafe} .pk-help-content{text-align:left;max-height:70vh;overflow-y:auto} - .pk-help-content h4{margin:.9rem 0 .25rem;font-size:.9rem;color:#0f172a} - .pk-help-content h4:first-child{margin-top:0} + .pk-help-content h4.pk-cfg-title{margin:.9rem 0 .2rem} + .pk-help-content h5{margin:.9rem 0 .25rem;font-size:.9rem;color:#0f172a} + .pk-help-content h5:first-child{margin-top:0} .pk-help-content p{margin:0;font-size:.85rem;color:#475569;line-height:1.45} /* .pk-seg / .pk-seg-thumb / the slide-in keyframes now live in style.css, with the behaviour in pk-seg.js — see CLAUDE.md "UI Conventions". Only @@ -229,27 +230,27 @@ .pk-counter span{min-width:24px;text-align:center;font-weight:600;font-size:.85rem;padding:0 2px} .pk-tbl-input{width:42px;padding:.2rem .3rem;border:1.5px solid var(--border,#e2e8f0);border-radius:4px;text-align:center;font-size:.85rem} .pk-cash-input,.pk-co-input{width:70px;padding:.2rem .3rem;border:1.5px solid var(--border,#e2e8f0);border-radius:4px;text-align:center;font-size:.85rem;-moz-appearance:textfield;appearance:textfield} - .pk-bust-btn{border:1px solid #fecaca;background:#fff;border-radius:4px;font-size:.9rem;line-height:1;padding:.15rem .3rem;cursor:pointer;margin-left:.2rem;flex:0 0 auto} + .pk-bust-btn{border:1px solid #fecaca;background:#fff;border-radius:4px;font-size:.9rem;line-height:1;padding:.15rem .3rem;cursor:pointer;margin-left:.2rem;flex:0 0 auto;min-width:24px;min-height:24px} .pk-bust-btn:hover{background:#fee2e2} .pk-cash-input::-webkit-outer-spin-button,.pk-cash-input::-webkit-inner-spin-button,.pk-co-input::-webkit-outer-spin-button,.pk-co-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .pk-act-btn{background:#f1f5f9;border:1px solid #e2e8f0;cursor:pointer;font-size:.75rem;font-weight:600;padding:.25rem .55rem;margin:.1rem .15rem .1rem 0;border-radius:5px;color:#475569;white-space:nowrap} .pk-act-btn:hover{background:#e2e8f0;color:#0f172a} - .pk-act-btn.primary{background:#16a34a;border-color:#16a34a;color:#fff} - .pk-act-btn.primary:hover{background:#15803d;color:#fff} + .pk-act-btn.primary{background:#15803d;border-color:#15803d;color:#fff} + .pk-act-btn.primary:hover{background:#166534;color:#fff} .pk-act-btn.danger{background:#dc2626;border-color:#dc2626;color:#fff} .pk-act-btn.danger:hover{background:#b91c1c;color:#fff} .pk-cashout-cell{background:transparent;border:none;border-bottom:1px dashed #94a3b8;cursor:pointer;font-size:.85rem;font-weight:600;color:#0f172a;padding:.1rem .15rem} .pk-cashout-cell:hover{color:#2563eb;border-bottom-color:#2563eb} - .pk-profit-pos{color:#22c55e;font-weight:600} - .pk-profit-neg{color:#ef4444;font-weight:600} + .pk-profit-pos{color:#15803d;font-weight:600} + .pk-profit-neg{color:#dc2626;font-weight:600} .pk-profit-zero{color:#64748b;font-weight:600} .pk-sidebar{display:flex;flex-direction:column;gap:.75rem;min-width:0} .pk-card{background:var(--surface,#fff);border:1.5px solid var(--border,#e2e8f0);border-radius:8px;padding:.75rem;min-width:0;box-sizing:border-box;word-break:break-word} .pk-card h3{margin:0 0 .6rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b} .pk-pool-row{display:flex;justify-content:space-between;padding:.2rem 0;font-size:.8rem;gap:.25rem} - .pk-pool-row.total{font-weight:700;font-size:.95rem;border-top:2px solid var(--border,#e2e8f0);margin-top:.3rem;padding-top:.4rem;color:#22c55e} + .pk-pool-row.total{font-weight:700;font-size:.95rem;border-top:2px solid var(--border,#e2e8f0);margin-top:.3rem;padding-top:.4rem;color:#15803d} .pk-payout-row{display:flex;justify-content:space-between;padding:.15rem 0;font-size:.8rem;gap:.25rem} .pk-payout-place{font-weight:600} @@ -274,9 +275,9 @@ background:#fffbeb;border:1.5px solid #f59e0b;border-left-width:5px;border-radius:8px} .pk-setup-cta-txt{flex:1 1 240px;min-width:0;font-size:.82rem;color:#92400e;line-height:1.4} .pk-setup-cta-txt b{display:block;font-size:.9rem;color:#b45309} - .pk-setup-cta button{flex:0 0 auto;border:none;background:#d97706;color:#fff;border-radius:6px; + .pk-setup-cta button{flex:0 0 auto;border:none;background:#b45309;color:#fff;border-radius:6px; padding:.45rem 1rem;font-size:.82rem;font-weight:700;cursor:pointer} - .pk-setup-cta button:hover{background:#b45309} + .pk-setup-cta button:hover{background:#92400e} /* View/pane transitions live in style.css — see pk-seg.js. */ .pk-pv-sub{font-size:.8rem;color:#64748b;margin:0 0 .6rem} @@ -284,7 +285,7 @@ the position they hold on every other view. */ #viewContent > .pk-card + .pk-card{margin-top:.75rem} .pk-pv-table{width:100%;font-size:.82rem} - .pk-pv-table th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;padding:.3rem .4rem;border-bottom:1px solid var(--border,#e2e8f0)} + .pk-pv-table th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:#64748b;padding:.3rem .4rem;border-bottom:1px solid var(--border,#e2e8f0)} .pk-pv-table td{padding:.35rem .4rem;border-bottom:1px solid #f1f5f9} .pk-pv-foot{margin-top:.75rem;text-align:center} /* Five segments don't fit a phone with labels. Collapse to icons at the @@ -361,9 +362,9 @@ /* Provenance line: what this game was set up from, and whether it still matches. Amber for MODIFIED because amber means "warning" house-wide. */ .pk-preset-from{display:flex;align-items:center;gap:.4rem;font-size:.8rem;margin:0 0 .4rem;min-height:1.2rem} - .pk-preset-lbl{color:#94a3b8;font-weight:600} + .pk-preset-lbl{color:#64748b;font-weight:600} .pk-preset-name{color:#0f172a;font-weight:700} - .pk-preset-none{color:#94a3b8;font-style:italic} + .pk-preset-none{color:#64748b;font-style:italic} .pk-preset-mod{background:#fffbeb;color:#92400e;border:1px solid #f59e0b;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.04em;padding:.05rem .45rem} .pk-preset-update{border-color:#f59e0b !important;color:#92400e !important;background:#fffbeb !important} .pk-preset-update:hover{background:#fef3c7 !important} @@ -392,24 +393,24 @@ .pk-chip-row{display:flex;align-items:center;gap:.25rem;border:1.5px solid var(--border,#e2e8f0);border-radius:8px;padding:.2rem .3rem;background:#fff} .pk-chip-colour{width:30px;height:30px;padding:0;border:1px solid #cbd5e1;border-radius:50%;background:none;cursor:pointer} .pk-chip-val{width:78px;padding:.3rem .35rem;border:1.5px solid var(--border,#e2e8f0);border-radius:6px;font-size:.85rem;text-align:right} - .pk-chip-none{font-size:.78rem;color:#94a3b8;font-style:italic} + .pk-chip-none{font-size:.78rem;color:#64748b;font-style:italic} /* Chip image: the button IS the preview, so a set with photos reads as the tray it represents rather than as a list of filenames. */ .pk-chip-img{width:30px;height:30px;padding:0;border:1px dashed #cbd5e1;border-radius:50%;background:#f8fafc no-repeat center/cover; - cursor:pointer;font-size:.62rem;color:#94a3b8;line-height:1;display:flex;align-items:center;justify-content:center} + cursor:pointer;font-size:.62rem;color:#64748b;line-height:1;display:flex;align-items:center;justify-content:center} .pk-chip-img.has-img{border-style:solid;border-color:#94a3b8;color:transparent} .pk-chip-img:hover{border-color:#2563eb} .pk-chip-actions{display:flex;gap:.4rem;flex-wrap:wrap} .pk-preset-bar button{padding:.4rem .8rem;border:1.5px solid var(--border,#e2e8f0);border-radius:6px;background:#fff;font-size:.8rem;font-weight:600;color:#334155;cursor:pointer} .pk-preset-bar button:hover{background:#f1f5f9} - .pk-cfg-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin:0 0 .5rem} + .pk-cfg-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin:0 0 .5rem} .pk-reward-chips{display:flex;gap:.5rem;flex-wrap:wrap} .pk-reward-chip{padding:.4rem .8rem;border-radius:999px;border:1.5px solid var(--border,#e2e8f0);background:transparent;font-size:.8rem;font-weight:600;color:#64748b;cursor:pointer} /* On means this reward is switched on for the game, so it reads green like every other "this is active" control here (.pk-btn-green, the mobile .primary action). Blue was the information colour and made an armed bounty or points scheme look like a hint about one. */ - .pk-reward-chip.on{background:#16a34a;border-color:#16a34a;color:#fff} + .pk-reward-chip.on{background:#15803d;border-color:#15803d;color:#fff} .pk-reward-body{display:none;margin-top:.75rem} .pk-reward-body.on{display:block} .pk-bounty-hint{font-size:.75rem;color:#0e7490;margin-top:.35rem} @@ -429,7 +430,7 @@ /* $ prefix inside dollar inputs — typing "1" when you meant "$20" is the kind of slip a visible unit prevents. */ .pk-money-wrap{position:relative;display:block} - .pk-money-wrap::before{content:'$';position:absolute;left:.55rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.85rem;font-weight:700;pointer-events:none} + .pk-money-wrap::before{content:'$';position:absolute;left:.55rem;top:50%;transform:translateY(-50%);color:#64748b;font-size:.85rem;font-weight:700;pointer-events:none} .pk-money-wrap input{padding-left:1.35rem;width:100%;box-sizing:border-box} /* Payout editor reward columns hide until their feature chip is on @@ -443,8 +444,8 @@ .pk-btn-view-toggle{background:transparent;color:var(--accent,#2563eb);border:1.5px solid var(--border,#e2e8f0);padding:.4rem .8rem;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer} .pk-btn-view-toggle:hover{background:#f1f5f9} - .pk-btn-green{background:#16a34a;color:#fff;border:1.5px solid #16a34a;padding:.4rem .8rem;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer} - .pk-btn-green:hover{background:#15803d} + .pk-btn-green{background:#15803d;color:#fff;border:1.5px solid #15803d;padding:.4rem .8rem;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer} + .pk-btn-green:hover{background:#166534} .pk-table-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem} .pk-table-card{background:var(--surface,#fff);border:1.5px solid var(--border,#e2e8f0);border-radius:8px;overflow:hidden} .pk-table-card-unassigned{border-color:#fbbf24} @@ -457,14 +458,14 @@ .pk-tv-player.elim{opacity:.4;text-decoration:line-through} .pk-tv-name{font-weight:600;font-size:.85rem} .pk-tv-actions{display:flex;align-items:center;gap:.3rem} - .pk-tv-move{font-size:.75rem;padding:.2rem .4rem;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer} + .pk-tv-move{font-size:.75rem;padding:.2rem .4rem;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;min-height:24px} /* Compact stats bar (mobile only) */ .pk-stats-compact{display:none;padding:.4rem .75rem;background:var(--surface,#fff);border-bottom:1.5px solid var(--border,#e2e8f0);font-size:.78rem;color:#475569;gap:.3rem;flex-wrap:wrap;align-items:center} .pk-stats-compact span{white-space:nowrap} .pk-stats-compact .sep{color:#cbd5e1} .pk-stats-compact b{color:var(--accent,#2563eb);font-weight:700} - .pk-stats-compact .pool-val{color:#22c55e;font-weight:700} + .pk-stats-compact .pool-val{color:#15803d;font-weight:700} /* Mobile player cards */ .pk-mobile-card{background:var(--surface,#fff);border:1.5px solid var(--border,#e2e8f0);border-radius:8px;margin-bottom:.5rem;overflow:hidden} @@ -473,8 +474,15 @@ .pk-mobile-card.rsvp-no{opacity:.45} .pk-mobile-summary{display:flex;justify-content:space-between;align-items:center;padding:.65rem .8rem;cursor:pointer;-webkit-tap-highlight-color:transparent} .pk-mobile-summary:active{background:#f1f5f9} + .pk-mobile-card .pk-check{width:22px;height:22px} .pk-mobile-name{font-weight:600;font-size:.9rem} .pk-mobile-status{font-size:.7rem;font-weight:600;padding:.15rem .4rem;border-radius:4px;min-width:4.5rem;text-align:center;flex-shrink:0} + /* The chevron is the keyboard's way into a card and the first visible hint + that the row opens at all: a tap anywhere on the row still works. */ + .pk-mobile-more{flex:0 0 auto;width:32px;height:32px;margin-left:.4rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#475569;font-size:.8rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} + .pk-mobile-more:active{background:#e2e8f0} + .pk-addon-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;min-height:24px;height:1.3rem;padding:0 .4rem;border:none;border-radius:10px;background:#7c3aed;color:#fff;font-size:.75rem;font-weight:700;cursor:pointer;flex-shrink:0} + .pk-addon-count:hover{background:#6d28d9} .pk-mobile-expand{display:none;padding:.5rem .8rem;border-top:1px solid #f1f5f9;background:#f8fafc} .pk-mobile-expand.open{display:block} .pk-mobile-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;gap:.5rem;flex-wrap:wrap} @@ -482,7 +490,7 @@ .pk-mobile-actions{display:flex;gap:.4rem;flex-wrap:wrap;padding-top:.4rem;border-top:1px solid #e2e8f0;margin-top:.3rem} .pk-mobile-actions button{padding:.35rem .7rem;border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border,#e2e8f0);background:#fff} .pk-mobile-actions button:active{background:#e2e8f0} - .pk-mobile-actions .primary{background:#16a34a;border-color:#16a34a;color:#fff} + .pk-mobile-actions .primary{background:#15803d;border-color:#15803d;color:#fff} .pk-mobile-actions .danger{background:#dc2626;border-color:#dc2626;color:#fff} .pk-bulk-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;margin-bottom:.5rem;flex-wrap:wrap;transition:background .15s,border-color .15s} .pk-bulk-bar.active{background:#eff6ff;border-color:#bfdbfe} @@ -490,17 +498,18 @@ .pk-bulk-bar .pk-bulk-count{font-size:.82rem;font-weight:700;color:#2563eb;min-width:5rem} .pk-bulk-bar button{font-size:.75rem;padding:.3rem .65rem;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;font-weight:600;cursor:pointer} .pk-bulk-bar button:hover{background:#f1f5f9} - .pk-bulk-bar .danger{color:#ef4444;border-color:#fca5a5} + .pk-bulk-bar .danger{color:#dc2626;border-color:#fca5a5} .pk-bulk-bar .primary{color:#fff;background:#2563eb;border-color:#2563eb} - .pk-row-select{width:18px;height:18px;cursor:pointer;accent-color:#2563eb} + .pk-row-select{width:20px;height:20px;cursor:pointer;accent-color:#2563eb} .walkin-autocomplete{position:relative} .walkin-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e2e8f0;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:100;max-height:200px;overflow-y:auto;display:none} .walkin-dropdown.open{display:block} .walkin-dropdown-item{padding:.5rem .75rem;cursor:pointer;font-size:.85rem;color:#334155} .walkin-dropdown-item:hover,.walkin-dropdown-item.active{background:#eff6ff;color:#2563eb} - .walkin-dropdown-item .walkin-hint{font-size:.7rem;color:#94a3b8;margin-left:.3rem} + .walkin-dropdown-item .walkin-hint{font-size:.7rem;color:#64748b;margin-left:.3rem} @media(max-width:768px){ .pk-table-wrap{display:none} + .pk-bulk-bar{display:none} .pk-mobile-list{display:block;max-height:calc(100dvh - 210px);overflow-y:auto;-webkit-overflow-scrolling:touch} .pk-header{padding:.4rem .5rem;gap:.35rem} .pk-header h1{font-size:.85rem} @@ -551,14 +560,14 @@ /* ── Activity log (in-view panel) ── */ .pk-log-sub{font-size:.8rem;color:#64748b;margin:0 0 .6rem} .pk-log-list{border:1px solid var(--border,#e2e8f0);border-radius:8px;background:var(--surface,#fff);max-height:65vh;overflow:auto} - .pk-log-empty{padding:1.25rem;text-align:center;color:#94a3b8;font-size:.9rem} + .pk-log-empty{padding:1.25rem;text-align:center;color:#64748b;font-size:.9rem} .pk-log-row{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .75rem;border-bottom:1px solid #f1f5f9;font-size:.85rem} .pk-log-row:last-child{border-bottom:none} - .pk-log-time{flex:0 0 auto;color:#94a3b8;font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:62px} + .pk-log-time{flex:0 0 auto;color:#64748b;font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:62px} .pk-log-tag{flex:0 0 auto;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.12rem .4rem;border-radius:4px;white-space:nowrap} .pk-log-text{flex:1 1 auto;color:#334155;line-height:1.35} .pk-log-text b{color:#0f172a} - .pk-log-by{color:#94a3b8;font-size:.72rem;white-space:nowrap} + .pk-log-by{color:#64748b;font-size:.72rem;white-space:nowrap} .pk-log-tag.t-buyin,.pk-log-tag.t-cashin{background:#dcfce7;color:#166534} .pk-log-tag.t-rebuy,.pk-log-tag.t-addon{background:#dbeafe;color:#1e40af} .pk-log-tag.t-cashout{background:#fef9c3;color:#854d0e} @@ -580,28 +589,31 @@ .pk-log-actions{flex:0 0 auto;display:flex;gap:.3rem;align-self:center} /* ── Per-player ledger ── */ - .pk-ledger-btn{flex:0 0 auto;border:none;background:transparent;cursor:pointer;font-size:1rem;line-height:1;padding:.1rem .25rem;border-radius:4px;color:#64748b} + .pk-ledger-btn{flex:0 0 auto;border:none;background:transparent;cursor:pointer;font-size:1rem;line-height:1;padding:.1rem .25rem;border-radius:4px;color:#64748b;min-width:24px;min-height:24px} .pk-ledger-btn:hover{background:#e2e8f0;color:#334155} .pk-ledger-list{max-height:60vh;overflow:auto;border:1px solid var(--border,#e2e8f0);border-radius:8px;margin-top:.25rem} - .pk-ledger-empty{padding:1.1rem;text-align:center;color:#94a3b8;font-size:.88rem} + .pk-ledger-empty{padding:1.1rem;text-align:center;color:#64748b;font-size:.88rem} .pk-ledger-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-bottom:1px solid #f1f5f9;font-size:.85rem} .pk-ledger-row:last-child{border-bottom:none} .pk-ledger-row.voided{opacity:.6} .pk-ledger-row.voided .pk-ledger-detail{text-decoration:line-through} - .pk-ledger-time{flex:0 0 auto;color:#94a3b8;font-size:.72rem;min-width:62px;font-variant-numeric:tabular-nums} + .pk-ledger-time{flex:0 0 auto;color:#64748b;font-size:.72rem;min-width:62px;font-variant-numeric:tabular-nums} .pk-ledger-amt{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums} .pk-ledger-amt.pos{color:#166534}.pk-ledger-amt.neg{color:#b91c1c} .pk-ledger-detail{flex:1 1 auto;color:#334155} - .pk-ledger-detail small{color:#94a3b8;font-weight:400} - .pk-ledger-edit{flex:0 0 auto;border:1px solid #93c5fd;background:#fff;color:#2563eb;border-radius:5px;font-size:.72rem;font-weight:600;padding:.2rem .5rem;cursor:pointer} + .pk-ledger-detail small{color:#64748b;font-weight:400} + .pk-ledger-edit{flex:0 0 auto;border:1px solid #93c5fd;background:#fff;color:#2563eb;border-radius:5px;font-size:.72rem;font-weight:600;padding:.2rem .5rem;cursor:pointer;min-height:24px} .pk-ledger-edit:hover{background:#eff6ff} - .pk-ledger-clear{flex:0 0 auto;border:1px solid #fca5a5;background:#fff;color:#dc2626;border-radius:5px;font-size:.72rem;font-weight:600;padding:.2rem .5rem;cursor:pointer} + .pk-ledger-clear{flex:0 0 auto;border:1px solid #fca5a5;background:#fff;color:#dc2626;border-radius:5px;font-size:.72rem;font-weight:600;padding:.2rem .5rem;cursor:pointer;min-height:24px} .pk-ledger-clear:hover{background:#fee2e2} .pk-ledger-void-tag{flex:0 0 auto;font-size:.66rem;font-weight:700;text-transform:uppercase;color:#991b1b;background:#fee2e2;border-radius:4px;padding:.1rem .4rem} /* ── Tap-friendly help bubble (? marker, hover OR focus/tap) ── */ - .pk-tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#cbd5e1;color:#fff;font-size:.62rem;font-weight:700;cursor:help;margin-left:.25rem;position:relative;vertical-align:middle;flex:0 0 auto} + .pk-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#64748b;color:#fff;font-size:.68rem;font-weight:700;cursor:help;margin-left:.25rem;position:relative;vertical-align:middle;flex:0 0 auto} + /* The disc stays 18px; an invisible ring around it makes the target 24px. */ + .pk-tip::before{content:'';position:absolute;inset:-3px;border-radius:50%} .pk-tip:hover,.pk-tip:focus{background:#2563eb;outline:none} + .pk-tip:focus-visible{outline:2px solid #2563eb;outline-offset:2px} .pk-tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;font-size:.72rem;font-weight:400;line-height:1.35;letter-spacing:0;text-transform:none;white-space:normal;width:200px;max-width:46vw;padding:.5rem .65rem;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .12s;z-index:250;pointer-events:none} .pk-tip:hover::after,.pk-tip:focus::after{opacity:1;visibility:visible} @@ -618,7 +630,7 @@ .pk-cb-sub{color:#64748b} .pk-cb-total{border-top:2px solid #e2e8f0;border-bottom:none;margin-top:.15rem;padding-top:.6rem;font-size:1rem} .pk-cb-os{font-weight:700} - .pk-cb-os.even{color:#16a34a} + .pk-cb-os.even{color:#15803d} .pk-cb-os.over{color:#b45309} .pk-cb-os.short{color:#dc2626} .pk-cb-tipbtn{margin-top:.6rem;width:100%;background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:6px;padding:.45rem;font-size:.82rem;font-weight:600;cursor:pointer} @@ -626,6 +638,18 @@ .pk-inline-summary{display:none} + /* Finger-sized row controls on a touch screen, whatever the viewport. */ + @media (pointer: coarse) { + .pk-tip{width:24px;height:24px;font-size:.78rem} + .pk-ledger-btn,.pk-bust-btn,.pk-addon-btn,.pk-addon-count,.pk-tv-move,.pk-ledger-edit,.pk-ledger-clear, + .pk-payout-editor .row button,.jp-recip-row button,.pk-help-btn,.pk-preset-morebtn{min-width:36px;min-height:36px} + .pk-row-select,.pk-check,.pk-mobile-card .pk-check{width:28px;height:28px} + .pk-counter button{width:36px;height:36px} + .pk-mobile-more{width:44px;height:44px} + .pk-chip-colour,.pk-chip-img{width:36px;height:36px} + .pk-chip-row .es-mini{min-width:36px;min-height:36px} + } + /* ── Mobile/tablet touch optimization ── */ @media (max-width: 1024px) { .pk-sidebar{display:none} @@ -687,13 +711,13 @@ all — it leaves the account unanswered and only quietens the ask in this browser for a while. */ ?>
-
-

⏱ Try the Tournament Timer

+