/* SLINGSHOT CHALLENGE — game screen (own styles, nothing shared). Colors come from the admin as CSS variables. */
:root {
    --hud: #141a26; --score: #ffffff; --accent: #ffd21a; --btn: #e3262e; --border: #ffffff; --msg: #ffffff;
    --p1: #e3262e; --p2: #1e6bff; --hud-k: 1; --res-color: #ffffff; --res-accent: #ffd21a;
    --font: "Impact", "Haettenschweiler", "Arial Black", "Arial Narrow Bold", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1420; font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; }
#stage, #stage canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; color: #fff; font-size: 4vh; letter-spacing: 0.1em; background: #0d1420; z-index: 50; }
#fps { position: fixed; right: 8px; bottom: 8px; color: #0f0; font: 14px monospace; z-index: 60; }
#branding { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#branding .logo, #branding .ad { position: absolute; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }

/* split line (2 players) */
body.split #stage::after { content: ""; position: fixed; left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%);
    background: linear-gradient(180deg, #8fd0ff, #ffffff 40%, #8fd0ff); box-shadow: 0 0 18px #6cc4ff, 0 0 4px #fff; z-index: 3; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
body:not([data-state="play"]) #hud { display: none; }
.phud { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
body.split .phud.p1 { right: 50%; }
body.split .phud.p2 { left: 50%; }

/* brush-stroke cards */
.score-card, .round-card { position: absolute; top: calc(1.6vh * var(--hud-k)); color: var(--score); text-align: center; line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transform-origin: 0 0; }
.score-card { left: 2vw; padding: 1.4vh 3.4vw 1.6vh 2.6vw; min-width: 17vw; transform: scale(var(--hud-k)) skewX(-4deg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--p1) 85%, #fff 15%), var(--p1) 45%, color-mix(in srgb, var(--p1) 70%, #000 30%));
    clip-path: polygon(3% 8%, 12% 2%, 30% 6%, 47% 0%, 66% 5%, 84% 1%, 100% 9%, 96% 30%, 100% 52%, 95% 74%, 99% 94%, 80% 98%, 62% 94%, 44% 100%, 26% 95%, 8% 99%, 0% 84%, 4% 62%, 0% 40%, 4% 22%); }
.phud.p2 .score-card { background: linear-gradient(180deg, color-mix(in srgb, var(--p2) 85%, #fff 15%), var(--p2) 45%, color-mix(in srgb, var(--p2) 70%, #000 30%)); }
body.split .phud.p2 .score-card { left: auto; right: 2vw; transform-origin: 100% 0; }
.sc-name { font-size: 3.2vh; letter-spacing: 0.04em; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.sc-name:empty { display: none; }
.sc-label { font-size: 3vh; letter-spacing: 0.06em; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.sc-val { font-size: 7.4vh; font-style: italic; text-shadow: 0 4px 0 rgba(0,0,0,.4); margin-top: .4vh; }
body.split .sc-val { font-size: 6vh; }
.round-card { left: 50%; transform: translateX(-50%) scale(var(--hud-k)); transform-origin: 50% 0; padding: 1.2vh 3.4vw 1.4vh; min-width: 16vw; background: var(--hud);
    clip-path: polygon(2% 12%, 15% 4%, 34% 9%, 52% 1%, 70% 7%, 88% 2%, 99% 14%, 96% 40%, 100% 66%, 95% 92%, 76% 97%, 55% 92%, 35% 99%, 16% 93%, 1% 97%, 4% 70%, 0% 44%); }
.rc-round { font-size: 4vh; font-style: italic; letter-spacing: .03em; }
.round-card i { display: block; height: 3px; margin: .7vh 0; background: linear-gradient(90deg, var(--p1), #fff 50%, var(--p2)); }
.phud.p1 .round-card i { background: linear-gradient(90deg, transparent, var(--p1), transparent); }
.phud.p2 .round-card i { background: linear-gradient(90deg, transparent, var(--p2), transparent); }
body:not(.split) .round-card i { background: linear-gradient(90deg, transparent, var(--p1) 30%, var(--p2) 70%, transparent); }
.rc-shots { font-size: 2.8vh; letter-spacing: .06em; opacity: .95; }
.phud.warn .rc-round { color: #ff5a4a; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.phud.done { opacity: .65; }

/* ball picker */
.ball-pick { position: absolute; left: 50%; bottom: 1.6vh; transform: translateX(-50%); display: flex; gap: 1vw; pointer-events: auto; }
.bp { width: 7.2vh; height: 7.2vh; border-radius: 50%; border: 3px solid rgba(255,255,255,.75); background: rgba(10,14,24,.65); color: #fff; font-family: var(--font);
    display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; transition: transform .1s; }
.bp span { font-size: 3vh; line-height: 1; } .bp small { font-size: 1.1vh; letter-spacing: .04em; }
.bp.on { border-color: var(--accent); background: rgba(255,210,26,.25); transform: scale(1.12); box-shadow: 0 0 14px var(--accent); }
.phud.aiming .ball-pick { opacity: .25; }
body.split .bp { width: 6vh; height: 6vh; }

.pull-hint { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); color: #fff; font-size: 2.6vh; letter-spacing: .1em; opacity: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,.6); transition: opacity .3s; }

/* messages */
.pmsg { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.6); color: var(--msg); font-size: 7vh; font-style: italic; letter-spacing: .03em;
    text-shadow: 0 5px 0 rgba(0,0,0,.45), 0 0 26px rgba(0,0,0,.4); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.6,1); white-space: nowrap; }
.pmsg.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pmsg.big { font-size: 12vh; }
.pmsg.go { color: var(--accent); }

/* floating points */
#popups { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.popup { position: absolute; left: 0; top: 0; color: #fff; font-size: 4.4vh; font-style: italic; white-space: nowrap;
    text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.4); -webkit-text-stroke: 1px rgba(0,0,0,.4); }
.popup.target, .popup.tower, .popup.tnt { color: var(--accent); font-size: 5.4vh; }
.popup.combo { color: #7dffb0; }
.popup.knock { font-size: 3vh; opacity: .9; }
.popup.miss { color: #ff6060; }

/* ---------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; display: none; z-index: 10; }
.screen.on { display: grid; place-items: center; }
#scr-start { background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.05), rgba(0,0,0,.55)); }
.st-box { text-align: center; color: #fff; }
#st-title { margin: 0; font-size: 12vh; font-style: italic; letter-spacing: .02em; line-height: .95; color: #fff;
    text-shadow: 0 .8vh 0 #b8141c, 0 1.4vh 0 #5e0a0e, 0 0 4vh rgba(0,0,0,.5); -webkit-text-stroke: .25vh #3a0507; }
#st-sub { margin: 1.4vh 0 3.4vh; font-size: 3.4vh; letter-spacing: .3em; color: var(--accent); text-shadow: 0 .3vh 0 rgba(0,0,0,.6); }
.st-pick { font-size: 2.4vh; letter-spacing: .3em; margin-bottom: 1.6vh; text-shadow: 0 .3vh 0 rgba(0,0,0,.6); }
.st-modes { display: flex; gap: 2vw; justify-content: center; flex-wrap: wrap; }
.mode-card { width: 19vw; min-height: 22vh; border: .5vh solid var(--border); border-radius: 2.4vh; color: #fff; font-family: var(--font); cursor: pointer;
    display: grid; place-items: center; align-content: center; gap: .6vh; padding: 2vh 1vw; transition: transform .12s;
    background: linear-gradient(180deg, color-mix(in srgb, var(--btn) 80%, #fff 20%), var(--btn) 50%, color-mix(in srgb, var(--btn) 60%, #000 40%));
    box-shadow: 0 1vh 0 rgba(0,0,0,.35), 0 2vh 3vh rgba(0,0,0,.35); }
.mode-card.m-tower { --btn: #8a5a2b; } .mode-card.m-time { --btn: #f08a00; } .mode-card.m-versus { --btn: #1e6bff; }
.mode-card:active { transform: scale(.96); }
.mc-ico { font-size: 6vh; line-height: 1; filter: drop-shadow(0 .4vh .4vh rgba(0,0,0,.4)); }
.mc-name { font-size: 3.4vh; letter-spacing: .03em; text-shadow: 0 .3vh 0 rgba(0,0,0,.4); }
.mc-desc { font-family: Arial, sans-serif; font-weight: 700; font-size: 1.8vh; opacity: .92; }
.st-tap { margin-top: 3vh; font-size: 3vh; letter-spacing: .2em; animation: blink 1.2s infinite; text-shadow: 0 .3vh 0 rgba(0,0,0,.6); }
@keyframes blink { 50% { opacity: .35; } }
.st-modes:has(.mode-card:nth-child(2)) + .st-tap { display: none; }

#scr-results { background: rgba(6, 10, 20, .72) center / cover no-repeat; }
.res-box { text-align: center; color: var(--res-color); min-width: 50vw; }
#res-logo { max-height: 12vh; max-width: 30vw; object-fit: contain; margin-bottom: 1vh; }
#res-title { margin: 0 0 3vh; font-size: 10vh; font-style: italic; color: var(--res-accent); text-shadow: 0 .8vh 0 rgba(0,0,0,.5); letter-spacing: .03em; }
.res-card { display: inline-block; min-width: 30vw; padding: 2.4vh 3vw; border-radius: 2.4vh; background: rgba(255,255,255,.08); border: .4vh solid rgba(255,255,255,.25); }
.res-card.p1 { border-color: var(--p1); } .res-card.p2 { border-color: var(--p2); }
.res-card.win { box-shadow: 0 0 5vh color-mix(in srgb, var(--w, var(--accent)) 70%, transparent); transform: scale(1.05); }
.rc-name { font-size: 4.4vh; letter-spacing: .03em; }
.res-card.p1 .rc-name { color: var(--p1); } .res-card.p2 .rc-name { color: var(--p2); }
.rc-score { font-size: 12vh; font-style: italic; text-shadow: 0 .8vh 0 rgba(0,0,0,.45); }
.rc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1vh 3vw; margin-top: 1.6vh; text-align: left; font-family: Arial, sans-serif; font-weight: 800; }
.rc-stats span { display: block; font-size: 1.6vh; letter-spacing: .14em; opacity: .75; }
.rc-stats b { font-family: var(--font); font-weight: 400; font-size: 4vh; }
.res-duo { display: flex; gap: 2vw; align-items: center; justify-content: center; }
.res-vs { font-size: 7vh; font-style: italic; color: var(--res-accent); }
.res-winner { margin-top: 3vh; font-size: 8vh; font-style: italic; color: var(--w, var(--res-accent)); text-shadow: 0 .7vh 0 rgba(0,0,0,.5); }
.res-bar { width: 40vw; height: .8vh; margin: 4vh auto 0; border-radius: 1vh; background: rgba(255,255,255,.2); overflow: hidden; }
.res-bar i { display: block; height: 100%; width: 0; background: var(--res-accent); }
/* 2 players: score card at the outer side, round card next to it (as in the reference) */
body.split .phud.p1 .round-card { left: 66%; }
body.split .phud.p2 .round-card { left: 34%; }
body.split .score-card { min-width: 13vw; padding: 1.1vh 2.4vw 1.3vh 2vw; }
body.split .round-card { min-width: 12vw; padding: 1vh 2.2vw 1.2vh; }
body.split .rc-round { font-size: 3.4vh; }

/* HD brush-stroke cards (assets/brush-*.webp) */
.score-card, .round-card { clip-path: none !important; background: center / 100% 100% no-repeat !important; }
.score-card { background-image: var(--brush-red, url("../assets/brush-red.webp")) !important; padding: 1.6vh 4.4vw 2vh 3.6vw; }
.phud.p2 .score-card { background-image: var(--brush-blue, url("../assets/brush-blue.webp")) !important; }
.round-card { background-image: var(--brush-navy, url("../assets/brush-navy.webp")) !important; padding: 1.6vh 4.6vw 2vh; }
body.split .score-card { padding: 1.4vh 3.4vw 1.7vh 3vw; }
body.split .round-card { padding: 1.3vh 3.4vw 1.6vh; }

/* "throw the ball" hint at the start of each round (real ball mode) */
.phud.fresh .pull-hint { opacity: 1; animation: blink 1.2s infinite; font-size: 3.4vh; bottom: 30vh; }
body.split .phud.fresh .pull-hint { font-size: 2.4vh; }

/* custom colors from the admin: the same brush shape (mask), painted with that color */
body.c-hud .round-card, body.c-p1 .phud.p1 .score-card, body.c-p2 .phud.p2 .score-card {
    -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body.c-hud .round-card { --brush: var(--brush-navy, url("../assets/brush-navy.webp")); background: linear-gradient(180deg, color-mix(in srgb, var(--hud) 80%, #fff 20%), var(--hud)) !important; }
body.c-p1 .phud.p1 .score-card { --brush: var(--brush-red, url("../assets/brush-red.webp")); background: linear-gradient(180deg, color-mix(in srgb, var(--p1) 80%, #fff 20%), var(--p1) 55%, color-mix(in srgb, var(--p1) 75%, #000 25%)) !important; }
body.c-p2 .phud.p2 .score-card { --brush: var(--brush-blue, url("../assets/brush-blue.webp")); background: linear-gradient(180deg, color-mix(in srgb, var(--p2) 80%, #fff 20%), var(--p2) 55%, color-mix(in srgb, var(--p2) 75%, #000 25%)) !important; }