/* BEE LINE. One field colour, clover pink; its deep shades for dark surfaces. Green means "you can act". */
@font-face { font-family: "Space Grotesk"; src: url(/fonts/sg-500.woff2) format("woff2"); font-weight: 400 600; font-display: swap }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/sg-700.woff2) format("woff2"); font-weight: 700 900; font-display: swap }
:root {
  --field: #ff4f8b; --deep: #a3134f; --deeper: #5c0730; --ink: #3a0620; --cream: #fff4f8;
  --act: #81b64c; --act-d: #4f7d25; --warn: #d9a13b;
  --u: min(1vw, 1.8vh);
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--field); color: #fff; font-family: "Space Grotesk", system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent }
button { font: inherit }
[hidden] { display: none !important }

/* buttons: chunky, level, squish on press */
.btn { appearance: none; border: 0; border-radius: 18px; padding: 0.7em 1.4em; font-weight: 800; font-size: 1.15rem; cursor: pointer;
  background: var(--act); color: #10240a; box-shadow: 0 6px 0 var(--act-d), 0 10px 18px rgba(60, 0, 30, 0.25); transition: transform 0.08s, box-shadow 0.08s; min-height: 48px }
.btn:active { transform: translateY(5px) scale(0.98); box-shadow: 0 1px 0 var(--act-d), 0 4px 8px rgba(60, 0, 30, 0.2) }
.btn.ghost { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: 0 6px 0 rgba(60, 0, 20, 0.35) }
.btn.white { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #e6b8cc, 0 10px 18px rgba(60, 0, 30, 0.25) }

canvas.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none }

/* ---------------------------------------------------------------- TV ---- */
body.tv { --hud: 8.5vh }
.tv .hud { position: fixed; left: 0; right: 0; top: 0; height: var(--hud); display: flex; align-items: center; gap: 1.2vw; padding: 0 1.2vw; z-index: 3 }
.tv .lvl { font-weight: 900; font-size: 3.6vh; white-space: nowrap; text-shadow: 0 3px 0 var(--deep) }
.tv .prog { flex: 1; display: flex; align-items: center; gap: 1vw; min-width: 20vw }
.tv .prog .bar { position: relative; flex: 1; height: 2.6vh; border-radius: 99px; background: rgba(92, 7, 48, 0.45); overflow: hidden; border: 3px solid #fff }
.tv .prog .bar i { position: absolute; top: 0; bottom: 0; transition: width 0.3s }
.tv .prog .home { left: 0; background: #ffd23d }
.tv .prog .met .home, .tv .prog.met .home { background: var(--act) }
.tv .prog .lost { right: 0; background: repeating-linear-gradient(135deg, rgba(40, 0, 20, 0.7) 0 6px, rgba(40, 0, 20, 0.35) 6px 12px) }
.tv .prog .goal { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 2px var(--deeper) }
.tv #progtext { font-weight: 800; font-size: 2.6vh; white-space: nowrap; min-width: 13ch }
.tv .chips { display: flex; gap: 0.6vw }
.tv .chip { white-space: nowrap; display: flex; align-items: center; gap: 0.4vw; padding: 0.4vh 0.8vw 0.4vh 0.3vw; border-radius: 99px; background: rgba(92, 7, 48, 0.4); border: 3px solid var(--c); font-weight: 800; font-size: 2.1vh }
.tv .chip img { height: 4.6vh }
.tv .pips { display: flex; gap: 5px; margin-left: 0.4vw }
.tv .pips b { width: 2vh; height: 2vh; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.55); background: rgba(60, 0, 30, 0.35) }
.tv .pips b.hit { background: #ff2d2d; border-color: #fff }
.tv .cornerqr .join { display: flex; align-items: center; gap: 0.5vw; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.8vh }
.tv .cornerqr .qr { height: calc(var(--hud) - 1.4vh); width: auto; border-radius: 6px }
.tv .cornerqr .addr { font-size: 0; white-space: nowrap }
.tv .cornerqr .addr b { font-weight: 900; font-size: 2.6vh }

.tv .lobby { position: fixed; inset: 0; z-index: 4; display: flex; gap: 4vw; align-items: center; justify-content: center; padding: 4vh 5vw;
  background: linear-gradient(90deg, rgba(163, 19, 79, 0.9) 0%, rgba(255, 79, 139, 0.72) 55%, rgba(255, 79, 139, 0.35) 100%) }
.tv .lobby .left { flex: 1.2; max-width: 60vw }
.tv .mark { display: flex; align-items: center; gap: 2vw; margin: 0 0 3vh; font-size: 13vh; line-height: 0.86; font-weight: 900; letter-spacing: -0.02em; text-shadow: 0 1vh 0 var(--deeper) }
.tv .mark img { height: 26vh; filter: drop-shadow(0 1vh 0 rgba(60, 0, 30, 0.35)); animation: hover 1.6s ease-in-out infinite }
@keyframes hover { 50% { transform: translateY(-2vh) rotate(-4deg) } }
.tv .how { margin: 0 0 3vh; padding-left: 1.2em; font-size: 3vh; font-weight: 600; line-height: 1.35 }
.tv .how b { font-weight: 900 }
.tv .seats { display: flex; gap: 1.2vw; margin-bottom: 2.5vh }
.tv .seats .s { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; padding: 1.4vh 0.6vw; border-radius: 2vh; background: rgba(60, 0, 30, 0.35); border: 4px solid var(--c); font-weight: 800; font-size: 2.3vh; text-align: center }
.tv .seats .s img { height: 9vh }
.tv .seats .s.empty { border-style: dashed; opacity: 0.55 }
.tv .seats .s.empty img { filter: grayscale(1) brightness(1.4); opacity: 0.6 }
.tv .wait { font-size: 3vh; font-weight: 800 }
.tv .lobby .right { flex: 0.8; display: flex; justify-content: center }
.tv #bigjoin .join { display: flex; flex-direction: column; align-items: center; gap: 2vh; color: #fff; text-decoration: none; font-size: 4vh; font-weight: 700 }
.tv #bigjoin .qr { width: min(36vw, 62vh); height: auto; border-radius: 2vh; box-shadow: 0 1.4vh 0 var(--deeper) }
.tv #bigjoin .addr b { font-weight: 900 }

.tv .banner { position: fixed; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 5; text-align: center; padding: 4vh 5vw; border-radius: 4vh;
  background: rgba(92, 7, 48, 0.88); border: 6px solid #fff; box-shadow: 0 2vh 0 rgba(60, 0, 30, 0.4); animation: pop 0.4s cubic-bezier(.2, 1.6, .4, 1) }
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0 } }
.tv .banner h2 { margin: 0; font-size: 10vh; font-weight: 900; line-height: 1 }
.tv .banner .name { font-size: 4.4vh; font-weight: 800; margin-top: 1vh }
.tv .banner p { margin: 1.6vh 0 0; font-size: 3.4vh; font-weight: 600 }
.tv .banner .tags { display: flex; gap: 1vw; justify-content: center; margin-top: 2vh }
.tv .banner .tags span { padding: 0.6vh 1.2vw; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 800; font-size: 2.6vh }

.tv .over { position: fixed; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(255, 79, 139, 0.9) }
.tv .over .card { min-width: 50vw; padding: 4vh 4vw; border-radius: 4vh; background: var(--deeper); border: 6px solid #fff; text-align: center; animation: pop2 0.4s cubic-bezier(.2, 1.6, .4, 1) }
@keyframes pop2 { from { transform: scale(0.7); opacity: 0 } }
.tv .over .big { font-size: 18vh; font-weight: 900; line-height: 0.9; color: #ffd23d; text-shadow: 0 1vh 0 rgba(0, 0, 0, 0.25) }
.tv .over .sub { font-size: 3.6vh; font-weight: 800 }
.tv .over .why { font-size: 2.6vh; font-weight: 600; opacity: 0.85; margin: 0.6vh 0 2.4vh }
.tv .over .rows { display: flex; flex-direction: column; gap: 1vh; text-align: left }
.tv .over .row { display: flex; align-items: center; gap: 1.4vw; padding: 0.8vh 1.4vw; border-radius: 2vh; background: rgba(255, 255, 255, 0.08); border-left: 1vh solid var(--c); font-size: 3vh }
.tv .over .row img { height: 6vh }
.tv .over .row b { flex: 1; font-weight: 900 }
.tv .over .row .cr { opacity: 0.8; min-width: 9ch; text-align: right }
.tv .over .row em { font-style: normal; font-weight: 900; color: var(--ink); background: #ffd23d; padding: 0.3vh 1vw; border-radius: 99px; animation: pulse 0.9s ease-in-out infinite }
@keyframes pulse { 50% { transform: scale(1.08) } }
.tv .over .again { margin-top: 2.4vh; font-size: 2.6vh; font-weight: 700 }
.tv .sound { position: fixed; right: 2vw; bottom: 3vh; z-index: 7 }
.tv .sound.mini { display: none }
.netmark { position: fixed; left: 50%; bottom: 1.5vh; transform: translateX(-50%); z-index: 9; padding: 0.4em 1em; border-radius: 99px; background: rgba(60, 0, 30, 0.8); font-weight: 700; font-size: 14px }

/* ------------------------------------------------------------- phone ---- */
body.phone { position: fixed; inset: 0 }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); z-index: 4 }
.door { justify-content: flex-start; gap: 14px; background: linear-gradient(rgba(255, 79, 139, 0.55), rgba(163, 19, 79, 0.78)) }
.door .mark { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6vh 0 0; font-size: clamp(56px, 17vw, 120px); line-height: 0.85; font-weight: 900; letter-spacing: -0.02em; text-shadow: 0 7px 0 var(--deeper) }
.door .mark img { height: 1.9em; animation: hover 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(60, 0, 30, 0.35)) }
.door .lede { margin: 6px 0 4px; font-size: 19px; font-weight: 700; text-align: center; text-shadow: 0 2px 0 var(--deep) }
.door .day { font-weight: 700; opacity: 0.9 }
.door .btns { display: flex; flex-direction: column; gap: 16px; width: min(360px, 100%); margin-top: 10px }
.door .btns .btn { font-size: 22px; padding: 18px }
.door .small { display: flex; gap: 18px; margin-top: 6px }
.door .small a { color: #fff; font-weight: 700; font-size: 15px }
.door .shelf { width: 100%; max-width: 900px; margin-top: auto; padding-top: 24px }
.portrait-turn { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--deep); font-weight: 800; font-size: 22px; text-align: center; padding: 30px }
.portrait-turn img { height: 120px; animation: turn 1.8s ease-in-out infinite }
@keyframes turn { 40%, 60% { transform: rotate(-90deg) } }
@media (orientation: portrait) { body.playing .portrait-turn { display: flex } body.playing .phud, body.playing .mute { display: none } }

/* the play HUD on a phone: columns beside the meadow */
.phud { position: fixed; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 800; text-align: center; pointer-events: none }
.phud.left { left: 0; top: 0; bottom: 0; padding: max(10px, env(safe-area-inset-top)) 6px 10px max(8px, env(safe-area-inset-left)); justify-content: center }
.phud.right { right: 0; top: 0; bottom: 0; padding: 10px max(8px, env(safe-area-inset-right)) 10px 6px; justify-content: center }
.phud .lv { font-size: 15px; opacity: 0.9 }
.phud .num { font-size: 30px; line-height: 1 }
.phud .of { font-size: 13px; opacity: 0.85 }
.phud .vbar { position: relative; width: 16px; flex: 0 1 46vh; min-height: 60px; border-radius: 99px; background: rgba(92, 7, 48, 0.45); border: 2px solid #fff; overflow: hidden }
.phud .vbar i { position: absolute; left: 0; right: 0; bottom: 0; background: #ffd23d; transition: height 0.3s }
.phud .vbar.met i { background: var(--act) }
.phud .vbar b { position: absolute; left: -2px; right: -2px; height: 3px; background: #fff }
.phud .pips { display: flex; flex-direction: column; gap: 5px }
.phud .pips b { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff }
.phud .pips b.hit { background: #ff2d2d; border-color: #ff2d2d }
.phud img.me { height: 40px }
.coach { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); padding: 8px 16px; border-radius: 99px; background: rgba(60, 0, 30, 0.85); font-weight: 800; font-size: 15px; pointer-events: none; white-space: nowrap }
.toast { position: fixed; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 14px 26px; border-radius: 22px; background: rgba(92, 7, 48, 0.92); border: 4px solid #fff; font-weight: 900; font-size: 28px; text-align: center; pointer-events: none; animation: pop 0.35s cubic-bezier(.2, 1.6, .4, 1) }
.toast small { display: block; font-size: 16px; font-weight: 700; opacity: 0.9; margin-top: 4px }
.mute { position: fixed; z-index: 7; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(60, 0, 30, 0.5); color: #fff; font-size: 18px; pointer-events: auto }

/* results (daily) and the room screens */
.panel { width: min(520px, 100%); margin: auto; padding: 22px; border-radius: 26px; background: var(--deeper); border: 4px solid #fff; text-align: center; animation: pop2 0.35s cubic-bezier(.2, 1.6, .4, 1) }
.panel .big { font-size: 84px; font-weight: 900; line-height: 0.95; color: #ffd23d }
.panel .sub { font-size: 20px; font-weight: 800 }
.panel .why { font-size: 15px; font-weight: 600; opacity: 0.85; margin: 4px 0 12px }
.panel .best { display: inline-block; margin: 6px 0 10px; padding: 4px 14px; border-radius: 99px; background: #ffd23d; color: var(--ink); font-weight: 900; animation: pulse 0.9s ease-in-out infinite }
.panel .board { margin: 10px 0 14px; text-align: left; font-size: 15px }
.panel .board div { display: flex; gap: 10px; padding: 5px 10px; border-radius: 10px }
.panel .board div.me { background: rgba(255, 255, 255, 0.16); font-weight: 800 }
.panel .board div span:nth-child(2) { flex: 1 }
.panel .acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px }
.screen > .end { width: min(900px, 100%); margin-top: 18px }
.panel.daily { display: grid; gap: 6px 22px; align-items: center }
.panel.daily .big { font-size: 64px }
@media (orientation: landscape) and (max-height: 600px) { .panel.daily { grid-template-columns: 1fr 1fr; width: min(760px, 100%); padding: 14px 18px } .panel.daily .big { font-size: 56px } .screen { padding-top: 10px } }
@media (orientation: portrait) { .coach { display: none } }
.coach { max-width: calc(100vw - 24px); white-space: normal; text-align: center }
.screen.room { justify-content: center; gap: 14px; background: linear-gradient(var(--field), var(--deep)) }
.room .you { display: flex; flex-direction: column; align-items: center; gap: 6px }
.room .you img { height: 130px; animation: hover 1.6s ease-in-out infinite }
.room .you .who { font-size: 26px; font-weight: 900 }
.room .you .hat { font-size: 16px; font-weight: 600; opacity: 0.9 }
.room form { display: flex; flex-direction: column; gap: 12px; width: min(360px, 100%) }
.room input.name { font: inherit; font-size: 22px; font-weight: 700; padding: 14px 16px; border-radius: 16px; border: 3px solid #fff; background: rgba(60, 0, 30, 0.35); color: #fff; text-align: center }
.room input.name::placeholder { color: rgba(255, 255, 255, 0.6) }
.room .note { font-size: 16px; font-weight: 600; text-align: center; opacity: 0.92; max-width: 30em }
.room .others { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center }
.room .others span { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(60, 0, 30, 0.35); border: 3px solid var(--c); font-weight: 800 }
.room .others img { height: 30px }

.tweaks { position: fixed; left: 8px; bottom: 8px; z-index: 30; font: 600 13px "Space Grotesk", sans-serif }
.tweaks .pill { border: 0; border-radius: 99px; padding: 6px 12px; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer }
.tweaks .panel { position: absolute; bottom: 36px; left: 0; width: auto; margin: 0; padding: 10px; border-radius: 12px; background: rgba(20, 0, 10, 0.92); border: 0; text-align: left; animation: none }
.tweaks .r { display: flex; gap: 6px; align-items: center; margin: 4px 0; white-space: nowrap }
.tweaks .r span { width: 70px; opacity: 0.8 }
.tweaks .r button { border: 0; border-radius: 8px; padding: 5px 9px; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer }
.tweaks .r button.on { background: var(--act); color: #10240a }

/* crashes on a phone: the frame flashes red and the right column says BONK */
body.bonk::after { content: ""; position: fixed; inset: 0; z-index: 8; pointer-events: none; box-shadow: inset 0 0 0 10px #ff2d2d; animation: bonk 0.9s ease-out forwards }
@keyframes bonk { to { opacity: 0 } }
.bonkmsg { font-size: 20px; font-weight: 900; color: #fff; background: #ff2d2d; border-radius: 12px; padding: 4px 8px; animation: pop2 0.3s cubic-bezier(.2, 1.6, .4, 1) }
.bonkmsg small { display: block; font-size: 12px; font-weight: 700 }
.phud .lv { font-size: 16px; font-weight: 900 }
/* the door: wordmark beside the buttons on a landscape phone */
.door .top { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100% }
.door .head, .door .side { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100% }
@media (orientation: landscape) and (max-height: 600px) {
  .door .top { flex-direction: row; justify-content: center; gap: 28px; margin-top: 4px }
  .door .head { width: auto; flex: 1; max-width: 420px }
  .door .side { width: auto; flex: 1; max-width: 360px }
  .door .mark { margin-top: 0; font-size: min(18vh, 72px) }
  .door .lede { font-size: 16px }
}

/* score, chains and fast forward */
.tv .score { font-weight: 900; font-size: 3.6vh; color: #ffd23d; text-shadow: 0 3px 0 var(--deep); min-width: 5ch }
.tv .ffchip { padding: 0.4vh 1vw; border-radius: 99px; background: rgba(60, 0, 30, 0.45); font-weight: 800; font-size: 2.2vh; white-space: nowrap }
.tv .ffchip.go { background: var(--act); color: #10240a }
.tv .chip.hot { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--c) }
.tv .chip .x { font-weight: 900; color: #ffd23d; font-size: 2.4vh }
.phud .chain { min-height: 26px; font-size: 22px; font-weight: 900; color: #ffd23d }
.phud .chain.on { animation: pulse 0.6s ease-in-out infinite }
.phud .ff { pointer-events: auto; margin-top: 6px; min-width: 58px; min-height: 44px; border: 3px solid #fff; border-radius: 14px; background: rgba(60, 0, 30, 0.4); color: #fff; font-weight: 900; font-size: 15px }
.phud .ff.on { background: #ffd23d; color: var(--ink); border-color: #ffd23d }
.phud .ff.on.go { background: var(--act); border-color: var(--act); color: #10240a }
.phud .ffnote { font-size: 11px; max-width: 80px; min-height: 13px }

/* bot teammates in the lobby (host only) */
.room .botrow { display: flex; align-items: center; justify-content: center; gap: 10px }
.room .btn.small { min-width: 48px; padding: 0.3em 0.6em; font-size: 24px }
.room .botn { min-width: 6ch; text-align: center; font-weight: 900; font-size: 20px }
.room .chipbtn { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 3px solid #fff; background: rgba(60, 0, 30, 0.35); color: #fff; font-weight: 800; font-size: 16px }
.room .chipbtn.on { background: #fff; color: var(--ink) }
.tv .chips.tight .chip > span:not(.pips) { display: none }
.tv .chips.tight .chip { padding-right: 0.6vw }