/* ─── PickBits arcade presentation, adapted from index.html ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --arcade-ink: #050607;
    --arcade-panel: rgba(7, 10, 12, .88);
    --arcade-cyan: #2bd6ff;
    --arcade-amber: #ffb24a;
    --arcade-gold: #e6bd72;
    --arcade-cream: #f4dfb9;
    --arcade-red: #bd2f27;
    --arcade-green: #0e706e;
}
html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: #030405; color: var(--arcade-cream); font-family: "Arial Narrow", "Aptos Narrow", "Segoe UI", sans-serif; overscroll-behavior: none; user-select: none; }
canvas { display: block; touch-action: none; }
#course-canvas { width: 100%; height: 100%; outline: none; }
[hidden] { display: none !important; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select, a { touch-action: manipulation; }
button, select { cursor: pointer; font: inherit; }
button, a { transition: border-color .18s, background .18s, color .18s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 3px; }
a { color: var(--arcade-cream); }
button:disabled { opacity: .45; cursor: default; }
.arcade-frame { position: fixed; inset: 10px; pointer-events: none; z-index: 4; border: 1px solid rgba(43,214,255,.42); border-radius: 20px; box-shadow: inset 0 0 0 3px #0005, inset 0 0 25px #2bd6ff0b; }
.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 25px; background: radial-gradient(circle at 50% 48%, #0b111333, #000b 85%); backdrop-filter: blur(3px); }
#title-overlay { justify-content: flex-start; padding-left: clamp(28px, 7vw, 120px); background: linear-gradient(90deg, #02090ccc, #02090c22 70%); backdrop-filter: none; }
#title-overlay.has-key-art { justify-content: flex-end; padding: 25px 2vw; background-image: var(--title-key-art); background-size: cover; background-position: center; }
#title-overlay.has-key-art .title-box { width: min(460px, 31vw); padding-inline: clamp(14px, 2vw, 32px); }
#title-overlay.has-key-art .park-caption { position: absolute; left: 4vw; bottom: 30px; margin: 0; }
#title-overlay.missing-key-art { background: linear-gradient(90deg, #ff00ff88, #ff00ff44); }
#asset-badge { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; padding: 7px 10px; border: 1px solid #ff7979; border-radius: 4px; background: #710f1ef2; color: #fff; font: bold 12px/1.3 monospace; pointer-events: none; }
.title-box, .scorecard-box {
    position: relative; border: 1px solid rgba(230,189,114,.65); border-radius: 8px; color: var(--arcade-cream);
    background: linear-gradient(145deg, rgba(24,20,15,.97), rgba(5,8,10,.98) 62%), #080a0b;
    box-shadow: 0 28px 90px #0009, 0 0 0 5px #0006, 0 0 0 6px #2bd6ff38, inset 0 0 42px #e69a3d0f;
}
.title-box::before, .scorecard-box::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid #2bd6ff20; }
.title-box { width: min(460px, calc(100vw - 40px)); flex-shrink: 0; padding: 22px 32px; text-align: center; }
.title-back { display: block; position: relative; text-align: left; font-size: 12px; text-decoration: none; color: #b0c6c5; margin-bottom: 16px; }
.title-back:hover { color: var(--arcade-cyan); }
.brand-kicker { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; color: #73ddf8; font-size: 10px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; }
.brand-kicker::before, .brand-kicker::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); box-shadow: 0 0 6px currentColor; }
.brand-kicker::after { transform: scaleX(-1); }
.title-box h1 { display: grid; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(50px, 5.4vw, 70px); font-weight: 900; font-style: italic; line-height: .82; letter-spacing: -.055em; text-align: center; filter: drop-shadow(0 7px 0 #25170d); transform: skewX(-3deg); text-transform: uppercase; }
.title-box h1 span { color: #bd352b; -webkit-text-stroke: 1.5px #f0d098; text-shadow: 3px 3px 0 #6d2c17, 5px 5px 0 #120d09; }
.title-box h1 span:last-child { margin-top: 13px; color: #157b78; text-shadow: 3px 3px 0 #164b45, 5px 5px 0 #120d09; }
.subtitle { margin: 21px 0 12px; color: #d9c29a; font-size: 13px; font-weight: 700; letter-spacing: .07em; }
.feature-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 17px; color: #a49b8b; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-row span { width: 3px; height: 3px; border-radius: 50%; background: var(--arcade-amber); box-shadow: 0 0 7px var(--arcade-amber); }
.mode-label { color: #9b9486; text-transform: uppercase; font-size: 9px; letter-spacing: .2em; text-align: left; margin-bottom: 8px; }
.mode-buttons { display: flex; flex-direction: column; gap: 6px; }
.mode-button { display: grid; grid-template-columns: 32px 1fr 18px; gap: 10px; align-items: center; min-height: 51px; padding: 8px 12px; border: 1px solid #e6bd7247; border-radius: 4px; color: #f8e8c8; background: linear-gradient(90deg, #3e2313c2, #121312e6); text-align: left; }
.mode-button:hover, .mode-button.selected { border-color: #ffbe55; background: linear-gradient(90deg, #155f57b3, #131919f5); box-shadow: 0 0 18px #ffa84412; }
.mode-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #ffce7e7a; border-radius: 50%; color: #ffbd55; font-size: 17px; }
.mode-copy { display: grid; gap: 3px; }
.mode-copy strong { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.mode-copy small { color: #a79f92; font-size: 10px; }
.mode-arrow { color: var(--arcade-cyan); font-size: 20px; }
.setup-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 8px; text-align: left; font-size: 12px; }
input, select { color: var(--arcade-cream); background: #111b1c; border: 1px solid #e6bd7247; border-radius: 4px; min-height: 34px; padding: 5px 9px; }
select { max-width: 60%; }
.player-row { display: grid; grid-template-columns: 22px 1fr 42px; gap: 8px; align-items: center; margin: 5px 0; font-size: 12px; text-align: left; }
.player-row input[type="text"] { min-width: 0; width: 100%; }
.player-row input[type="color"] { padding: 3px; width: 42px; cursor: pointer; }
.primary-button { min-height: 46px; border: 1px solid #e6bd7299; border-radius: 4px; background: linear-gradient(100deg, #106663, #134b48); color: #fff0d0; font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 12px 22px; }
.primary-button:hover { background: #1c7871; border-color: #ffce7e; }
#start-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
#start-btn span { color: var(--arcade-cyan); font-size: 20px; }
.best-round { font-size: 10px; color: var(--arcade-gold); margin-top: 12px; }
.title-controls { color: #9f9c92; font-size: 10px; line-height: 1.6; margin-top: 9px; }
.skin-preview { float: right; width: 18px; height: 18px; border-radius: 50%; margin-top: -34px; margin-right: 150px; pointer-events: none; box-shadow: inset -3px -3px 5px #0008, 0 0 7px #bce9eb55; }
.skin-preview.classic, .skin-preview.dimpled { background: radial-gradient(circle at 30% 30%, white, #cdd8d7); }
.skin-preview.rainbow { background: conic-gradient(#ff5757, #ffd35c, #43e59c, #4cb6ff, #d584ff, #ff5757); }
.skin-preview.disco { background: repeating-conic-gradient(#d2dbe3 0 25%, #80959a 0 50%) 0/7px 7px; }
.skin-preview.lava { background: repeating-linear-gradient(45deg, #251727, #ff893e 3px, #251727 5px); }
.skin-preview.ice { background: linear-gradient(30deg, #77cdeb, white, #78cbeb); }
.skin-preview.eyeball { background: radial-gradient(circle, #111 20%, #528fac 23% 45%, #f5eee3 48%); }
.skin-preview.soccer { background: repeating-conic-gradient(#eee 0 25%, #171d22 0 50%) 0/9px 9px; }
.skin-preview.galaxy { background: radial-gradient(circle at 35% 35%, #dcbbff, #665490 15%, #241a43 65%); }
.skin-preview { background-size: cover; background-position: center; }
.skin-preview.missing-skin { background: #ff00ff; }
.park-caption { align-self: flex-end; margin: 0 0 48px 65px; text-shadow: 0 3px 14px #000; }
.park-caption span, .park-caption small { display: block; color: #a5e0e2; font-size: 10px; letter-spacing: .24em; }
.park-caption strong { display: block; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.2; margin: 14px 0 24px; }
/* ─── HUD, gesture feedback and hole introductions ─────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud button, #hud a { pointer-events: auto; }
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 20px 23px 0; }
.small-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 13px; border: 1px solid #e6bd7247; border-radius: 5px; color: #d9cebb; background: linear-gradient(180deg, #26211aeb, #090b0cf0); box-shadow: 0 6px 20px #0005; font-size: 12px; text-decoration: none; }
.small-button:hover { color: #fff0d0; border-color: #ffb24ab8; }
.game-info { display: flex; gap: 0; min-width: 300px; padding: 10px 0; border: 1px solid #e6bd7261; border-radius: 7px; background: linear-gradient(180deg, #18140ff0, #040709f0); box-shadow: 0 8px 30px #0006; backdrop-filter: blur(12px); }
.info-item { padding: 0 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.info-item + .info-item { border-left: 1px solid #e6bd7238; }
.hole-info { align-items: flex-start; flex: 1; }
.info-label { color: #aa9b83; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.info-value { font-family: "Arial Black", Impact, sans-serif; font-size: 21px; line-height: 1; color: #ffbe55; text-shadow: 0 0 12px currentColor; }
#hole-name { font-size: 15px; letter-spacing: .03em; }
.player-strip { display: flex; align-items: center; justify-content: center; gap: 13px; width: max-content; max-width: calc(100% - 42px); margin: 9px auto 0; padding: 8px 13px; border: 1px solid #2bd6ff44; border-radius: 4px; background: #071116e8; font-size: 11px; }
.player-strip > span { color: #b0b3aa; font-size: 9px; white-space: nowrap; }
.player-strip b { color: var(--arcade-amber); margin-left: 5px; font-size: 14px; }
#player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
#player-dot { width: 11px; height: 11px; border-radius: 50%; background: white; flex-shrink: 0; }
.hud-actions { display: flex; gap: 6px; position: absolute; right: 24px; top: 92px; }
.shot-controls { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(430px, 80vw); text-align: center; text-shadow: 0 2px 5px #000; }
#power-label { font-size: 12px; font-weight: 700; color: #f2d49b; margin-bottom: 8px; letter-spacing: .05em; }
#power-meter { width: 230px; height: 12px; padding: 2px; margin: auto; border: 1px solid #e6bd7261; border-radius: 3px; background: #020405d1; }
#power-fill { height: 100%; width: 0; background: linear-gradient(90deg, #17b8c8, #f7d06d 62%, #d8452f); border-radius: 1px; box-shadow: 0 0 12px #ffb24a55; }
.control-hint { margin-top: 9px; font-size: 10px; color: #cad9d8; }
.camera-reset { position: absolute; bottom: 26px; right: 24px; }
#hole-intro { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); width: min(550px, 88vw); text-align: center; padding: 24px; background: linear-gradient(90deg, #04090b00, #04090bdd 20% 80%, #04090b00); }
#intro-kicker { font-size: 11px; color: var(--arcade-cyan); letter-spacing: .26em; }
#intro-name { display: block; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(26px, 4vw, 44px); margin: 9px 0; }
#intro-hint { font-size: 13px; line-height: 1.6; }
#skip-intro-btn { margin-top: 16px; padding: 10px 18px; color: var(--arcade-gold); background: #102026; border: 1px solid #e6bd7277; border-radius: 3px; }
#message { position: absolute; top: 160px; left: 50%; transform: translateX(-50%); max-width: 88vw; background: #071116ed; border: 1px solid #e6bd7255; padding: 9px 15px; font-size: 12px; text-align: center; border-radius: 4px; opacity: 0; transition: opacity .2s; }
#message.visible { opacity: 1; }
#shot-banner { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, 86vw); text-align: center; background: #071012ed; border-top: 1px solid var(--arcade-gold); border-bottom: 1px solid var(--arcade-gold); padding: 22px; }
#banner-player, #banner-detail { font-size: 12px; color: #c9d5cf; }
#banner-title { font-family: "Arial Black", Impact, sans-serif; color: var(--arcade-amber); font-size: 40px; text-transform: uppercase; text-shadow: 0 0 20px #ffb24a44; }
/* ─── Pause and all-player scorecards ────────────────────────── */
.pause-box { display: grid; gap: 15px; }
.pause-box h2 { font-size: 24px; }
.pause-box p { font-size: 13px; color: #b1afa3; }
.pause-box .brand-kicker { margin-top: 12px; margin-bottom: 0; }
.pause-box .title-back { text-align: center; margin: 6px 0; }
.scorecard-box { width: min(740px, 94vw); padding: 26px; text-align: center; max-height: 94dvh; overflow: auto; }
.scorecard-box h2 { font-family: "Arial Black", Impact, sans-serif; font-size: 25px; text-transform: uppercase; color: var(--arcade-gold); margin-bottom: 8px; }
#scorecard-subtitle { font-size: 12px; color: #a9bcb7; }
.table-scroll { overflow-x: auto; margin: 14px 0; }
.scorecard-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scorecard-table th { color: #b6ada0; text-transform: uppercase; font-size: 10px; letter-spacing: .07em; padding: 9px 5px; border-bottom: 1px solid #ffffff26; max-width: 110px; overflow-wrap: anywhere; }
.scorecard-table td { padding: 6px 5px; border-bottom: 1px solid #ffffff0f; }
.scorecard-table td:first-child, .scorecard-table th:first-child { text-align: left; }
.scorecard-table .birdie { color: #68d3a5; font-weight: bold; }
.scorecard-table .bogey { color: #f58e78; }
.scorecard-table .eagle { color: #ffdf85; font-weight: bold; }
.scorecard-table .par-score { color: #c4c6c0; }
.scorecard-table tfoot td { font-weight: bold; padding: 12px 5px; color: #ffc56d; border-top: 1px solid #e6bd72; }
.scorecard-box button { margin: 5px 3px; }
#scorecard-record { color: var(--arcade-cyan); font-size: 12px; margin: 10px 0; }
#loading, .fatal-error { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 12px; background: #071116; color: var(--arcade-gold); font-size: 12px; z-index: 30; text-align: center; }
/* ─── Narrow phones and short landscape screens ─────────────── */
@media (max-width: 750px) {
    #title-overlay { justify-content: center; padding: 20px; }
    #title-overlay.has-key-art { justify-content: center; background-position: 25% center; }
    #title-overlay.has-key-art .title-box { width: min(460px, calc(100vw - 40px)); padding: 20px 25px; }
    .park-caption { display: none; }
    .title-box { padding: 20px 25px; }
    .hud-top { margin: 15px 14px 0; gap: 6px; flex-wrap: wrap; }
    .back-link { order: 0; }
    #mute-btn { order: 1; margin-left: auto; }
    .game-info { order: 2; width: 100%; min-width: 0; padding: 8px 0; }
    .info-item { padding: 0 13px; }
    .small-button { font-size: 11px; min-height: 40px; padding: 7px 10px; }
    .player-strip { margin-top: 7px; font-size: 11px; gap: 10px; }
    .hud-actions { top: 15px; right: 77px; gap: 4px; }
    #restart-btn { font-size: 0; width: 38px; padding: 0; }
    #restart-btn::after { content: '↻'; font-size: 20px; }
    #card-btn { font-size: 0; width: 38px; padding: 0; }
    #card-btn::after { content: '▤'; font-size: 20px; }
    #menu-btn { width: 58px; }
    #message { top: 165px; }
    .camera-reset { bottom: 111px; right: 15px; }
    .shot-controls { bottom: max(23px, env(safe-area-inset-bottom)); width: 92vw; }
    #hole-intro { top: 29%; padding: 15px; }
    .scorecard-box { padding: 20px 14px; }
    .scorecard-table { font-size: 11px; }
    .scorecard-table .hole-title { display: none; }
}
@media (max-height: 780px) {
    #title-overlay { align-items: flex-start; }
    .title-box h1 { font-size: 51px; }
    .title-back { margin-bottom: 11px; }
    .subtitle { margin-top: 18px; }
    .title-controls { margin-top: 6px; }
    .mode-button { min-height: 46px; }
}
@media (max-height: 480px) and (min-width: 751px) {
    .game-info { padding: 6px 0; }
    .player-strip { position: absolute; left: 24px; top: 63px; }
    .hud-actions { top: 74px; }
    #hole-intro { top: 30%; padding: 8px; }
    #intro-name { font-size: 26px; }
    .shot-controls { bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Desktop chrome and shared Steam / local achievement presentation. */
.desktop a[href="./index.html"] { display: none; }
[data-fullscreen] { width: 42px; accent-color: var(--arcade-cyan); cursor: pointer; }
#achievement-toast { position: fixed; right: 26px; bottom: 28px; z-index: 60; width: min(360px, calc(100vw - 40px)); padding: 18px 22px; border: 1px solid var(--arcade-cyan); border-left: 5px solid var(--arcade-amber); border-radius: 7px; background: #081a1af5; box-shadow: 0 12px 40px #0008; pointer-events: none; }
#achievement-toast > span { display: block; color: var(--arcade-cyan); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#achievement-name { display: block; margin: 8px 0; font-size: 19px; color: var(--arcade-amber); }
#achievement-desc { font-size: 12px; line-height: 1.5; }
#global-leaderboard, .history-panel { margin: 18px 0; padding: 14px 0; border-top: 1px solid #e6bd7247; }
#global-leaderboard h3, .history-panel h3 { color: var(--arcade-cyan); font-size: 14px; }
#global-course, #global-status, #round-history-empty { margin: 8px 0; font-size: 12px; color: #a9bcb7; }
#round-history { text-align: left; padding-left: 20px; margin-top: 10px; font-size: 12px; line-height: 1.6; }
#round-history li { margin: 6px 0; overflow-wrap: anywhere; }