* { box-sizing: border-box; margin: 0; padding: 0; } html { width: 100%; height: 100%; /* CRITICAL for iOS Safari URL-bar hide: html needs to be tall enough to be SCROLLABLE so window.scrollTo(0, 1) can drop the URL bar. min-height 101% gives just enough scroll range. */ min-height: 101%; } html, body { width: 100%; height: 100%; /* DON'T use overflow:hidden + position:fixed on body — that blocks the scrollTo(0, 1) trick which is the ONLY reliable way to hide the iOS Safari URL bar without PWA install. The canvas + HUD are each position:fixed individually so the page itself can scroll a tiny amount without disturbing the game layout. */ background: #000; font-family: system-ui, -apple-system, sans-serif; color: #fff; } /* ⚠️ `touch-action: none` USED TO SIT ON AND BROKE THE LOBBY ON iOS. touch-action is resolved by intersecting the value of the touched element with every ancestor up to the scroll container — a descendant can NEVER re-enable a gesture an ancestor turned off. So `#lobby-card { touch-action: pan-y }` below was dead: with `none` on , WebKit refused to scroll the lobby card at all. On a landscape iPhone the card is taller than the screen, so PLAY NOW / CONTINUE / the name field simply could not be reached — which is exactly the "buttons don't work on iPhone, fine on Android" report (Blink is more forgiving here and re-resolves at the scroller). The gesture lock belongs on the GAME surfaces, which is where the pinch and double-tap-zoom actually need blocking. The canvas covers the screen during play, so nothing is lost. */ #game, #hud, #game canvas { touch-action: none; } /* Use 100dvh on the game container so it expands to fill the visible viewport AFTER the URL bar hides on mobile. Falls back to 100% on older browsers. */ #game, #hud { height: 100dvh; } #game { position: fixed; inset: 0; } canvas { display: block; } #hud { position: fixed; inset: 0; pointer-events: none; } /* ── TOPBAR (cartoon bamboo pills) ─────────────────────────────── Two chunky cream-and-green pills floating at the top: deliveries counter on the left, match timer on the right. Replaces the old dark glassy chips. */ #topbar { position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; pointer-events: none; } .top-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; background: linear-gradient(180deg, #fff6dc 0%, #ffe5a3 100%); border: 3px solid #5b3a1a; border-radius: 999px; box-shadow: 0 5px 0 #5b3a1a, 0 12px 24px rgba(0,0,0,0.30), inset 0 2px 0 rgba(255,255,255,0.85); font-family: var(--pt-display); font-weight: 900; font-size: 22px; letter-spacing: 0.04em; color: #5b3a1a; text-shadow: 0 1px 0 rgba(255,255,255,0.55); } .top-pill .top-icon { font-size: 22px; line-height: 1; } .top-pill.timer-pill { background: linear-gradient(180deg, #d8f4c6 0%, #7fdc6a 100%); color: #2d5a18; border-color: #2d5a18; box-shadow: 0 5px 0 #2d5a18, 0 12px 24px rgba(0,0,0,0.30), inset 0 2px 0 rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(255,255,255,0.45); } #timer { font-variant-numeric: tabular-nums; } #timer.warn { color: #c75a18; } #timer.crit { color: #c73a3a; animation: blink 0.6s infinite; } #parts-counter { font-variant-numeric: tabular-nums; } @keyframes blink { 50% { opacity: 0.4; } } /* Sky / time-of-day indicator — big glassy banner under the timer. Hidden by default; main.js adds .show + .phase-{morning|dusk|night} when the phase flips, then drops .show after ~6s. */ #sky-indicator { position: absolute; top: 64px; left: 50%; transform: translateX(-50%) translateY(-8px); display: flex; align-items: center; gap: 14px; min-width: 360px; max-width: 80vw; padding: 10px 20px; background: linear-gradient(135deg, rgba(20,12,40,0.78) 0%, rgba(8,8,18,0.85) 100%); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.10); opacity: 0; pointer-events: none; transition: opacity 700ms ease-out, transform 700ms ease-out; z-index: 6; } #sky-indicator.show { opacity: 1; transform: translateX(-50%) translateY(0); } .sky-icon { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); } .sky-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sky-label { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: #ffd166; text-transform: uppercase; } .sky-intro { font-size: 13px; color: #e5dffa; line-height: 1.35; font-style: italic; } /* Per-phase accent — paint the rim glow + label color so the eye knows we shifted between Morning / Dusk / Night without reading the label. */ #sky-indicator.phase-morning { border-color: rgba(255,209,102,0.55); box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 0 24px rgba(255,209,102,0.18), inset 0 1px 0 rgba(255,255,255,0.10); } #sky-indicator.phase-morning .sky-label { color: #ffd166; } #sky-indicator.phase-dusk { border-color: rgba(255,107,53,0.55); box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 0 24px rgba(255,107,53,0.20), inset 0 1px 0 rgba(255,255,255,0.10); } #sky-indicator.phase-dusk .sky-label { color: #ff8a3a; } #sky-indicator.phase-night { border-color: rgba(34,197,94,0.55); box-shadow: 0 12px 32px rgba(0,0,0,0.50), 0 0 24px rgba(34,197,94,0.30), inset 0 1px 0 rgba(255,255,255,0.10); } #sky-indicator.phase-night .sky-label { color: #bbf7d0; } /* #hp-bars-wrap, #checklist, .hp-* — REMOVED. The lives bar and the "find 10 machine parts" checklist were artifacts of the old build. Wolf Pandana doesn't have player HP or per-part tracking; the delivery counter in the topbar carries the only progress info. */ /* ── STATUS CHIPS (cartoon bamboo bubbles) ────────────────────── Bottom-centre row of chunky cream-cap pills with bamboo-green bottoms. Each chip has a thick brown stroke + 4px drop shadow, reading as a hand-drawn label instead of a dark glass widget. #heal-panel and #murder-cds were removed entirely. */ #status { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; } .cd { position: relative; background: linear-gradient(180deg, #fff6dc 0%, #ffe5a3 100%); border: 3px solid #5b3a1a; padding: 7px 16px; border-radius: 999px; font-family: var(--pt-display); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: #5b3a1a; box-shadow: 0 4px 0 #5b3a1a, 0 10px 18px rgba(0,0,0,0.30), inset 0 2px 0 rgba(255,255,255,0.70); text-shadow: 0 1px 0 rgba(255,255,255,0.55); transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 180ms; } .cd.ready { background: linear-gradient(180deg, #d8f4c6 0%, #7fdc6a 100%); border-color: #2d5a18; color: #1f3e10; box-shadow: 0 4px 0 #2d5a18, 0 0 14px rgba(127,220,106,0.45), inset 0 2px 0 rgba(255,255,255,0.55); } .cd.cooldown { background: linear-gradient(180deg, #e8e2cf 0%, #c8bda1 100%); border-color: #6a5a3a; color: #6a5a3a; box-shadow: 0 4px 0 #6a5a3a, 0 10px 18px rgba(0,0,0,0.20), inset 0 2px 0 rgba(255,255,255,0.40); opacity: 0.85; } .cd.active { background: linear-gradient(180deg, #ffe98a 0%, #ffc23a 100%); border-color: #a05f08; color: #4a2a05; transform: translateY(-2px); box-shadow: 0 6px 0 #a05f08, 0 0 20px rgba(255,194,58,0.55), inset 0 2px 0 rgba(255,255,255,0.65); } /* No more wolf-side chips — kept the .murder class as a defensive stub so anything that tries to add it doesn't NaN. */ .cd.murder { display: none; } /* ── CAPTURED INDICATOR (left panel) ───────────────────────────── One cute chip per panda. Cream pill with a brown stroke; panda face on the left, name in the middle, FREE/CAUGHT tag on the right. The "you" chip gets a yellow rim, "trapped" chips swap to a pink background + sad emoji + bouncing animation. */ #teammates { position: absolute; top: 90px; left: 16px; display: flex; flex-direction: column; gap: 8px; font-family: var(--pt-display); pointer-events: none; } .tm { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; min-width: 150px; background: linear-gradient(180deg, #fff6dc 0%, #ffe5a3 100%); border: 3px solid #5b3a1a; border-radius: 999px; box-shadow: 0 4px 0 #5b3a1a, 0 10px 18px rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.65); color: #5b3a1a; font-weight: 800; font-size: 12px; letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255,255,255,0.45); transition: transform 180ms, background 180ms, border-color 180ms; } .tm-face { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.20)); } .tm-name { flex: 1; } .tm-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; border: 2px solid #5b3a1a; box-shadow: 0 2px 0 #5b3a1a; } .tm-tag.tag-free { background: #b8e890; color: #2d5a18; border-color: #2d5a18; box-shadow: 0 2px 0 #2d5a18; } .tm-tag.tag-trapped { background: #ffb3c8; color: #4a1a30; border-color: #4a1a30; box-shadow: 0 2px 0 #4a1a30; } .tm.you { border-color: #a05f08; box-shadow: 0 4px 0 #a05f08, 0 10px 18px rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.65); } .tm.trapped { background: linear-gradient(180deg, #ffd9e6 0%, #ffb3c8 100%); border-color: #4a1a30; box-shadow: 0 4px 0 #4a1a30, 0 0 14px rgba(255,179,200,0.55), inset 0 2px 0 rgba(255,255,255,0.55); color: #4a1a30; animation: tm-shake 0.6s ease-in-out infinite; } @keyframes tm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } } #carry-indicator { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); background: rgba(255,209,102,0.18); border: 1px solid #ffd166; color: #ffd166; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.2s; } #carry-indicator.show { opacity: 1; } #prompt { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); padding: 10px 18px; border-radius: 6px; font-size: 16px; font-weight: 600; opacity: 0; transition: opacity 0.15s; } #prompt.show { opacity: 1; } #action-bar { position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%); width: 260px; height: 12px; background: rgba(0,0,0,0.6); border-radius: 4px; overflow: visible; opacity: 0; transition: opacity 0.15s; } #action-bar.show { opacity: 1; } #action-bar-fill { height: 100%; width: 0%; background: #ffd166; border-radius: 4px; transition: width 0.05s linear; } #action-bar.rescue #action-bar-fill { background: #ff5a9d; } #action-bar-label { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: rgba(35, 10, 28, 0.86); font-size: 11px; letter-spacing: 0.08em; color: #fff; white-space: nowrap; } #vignette { position: absolute; inset: 0; background: transparent; pointer-events: none; transition: background 0.2s; } #chase-flash { position: absolute; inset: 0; background: rgba(180,0,0,0); pointer-events: none; transition: opacity 0.1s; backdrop-filter: blur(0); } #chase-flash.active { background: rgba(180,0,0,0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } #jumpscare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,0,0,0.7) 30%, rgba(0,0,0,0.95) 100%); opacity: 0; } #jumpscare.active { opacity: 1; animation: jumpscare-shake 0.5s ease-out; } @keyframes jumpscare-shake { 0% { opacity: 0; transform: scale(1); } 10% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1); } } #fear-flash { position: absolute; inset: 0; background: rgba(180,0,0,0); pointer-events: none; transition: background 0.1s; } #fear-flash.active { background: rgba(180,0,0,0.35); animation: shake 0.4s; } @keyframes shake { 0%, 100% { transform: translate(0,0); } 20% { transform: translate(-6px,4px); } 40% { transform: translate(5px,-3px); } 60% { transform: translate(-4px,-2px); } 80% { transform: translate(3px,5px); } } #stun-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); border: 2px solid #ffd166; padding: 12px 28px; border-radius: 8px; color: #ffd166; font-size: 22px; font-weight: 800; letter-spacing: 0.1em; display: none; } #stun-overlay.show { display: block; } /* ── MOBILE CONTROL BUTTONS (cartoon bamboo) ───────────────────── 4 chunky cartoon buttons (Sprint / Hide / Lantern / Save) tucked into the bottom-right corner in a 2×2 grid. Each button is a colored bubble with a thick brown stroke + 4-6px drop shadow that reads as paper-cut sticker rather than glossy jewel. Pressed state compresses the shadow so it feels like physically pushing the button down. ATTACK / USE / TAUNT / HEAL / SKILL are gone — their DOM nodes were removed in index.html. */ #mobile-controls { position: fixed; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(2, auto); gap: 14px; pointer-events: none; z-index: 5; } .mobile-btn { width: 88px; height: 88px; border-radius: 50%; border: 4px solid #5b3a1a; font-family: var(--pt-display); font-size: 12px; font-weight: 900; letter-spacing: 0.04em; color: #5b3a1a; text-shadow: 0 1px 0 rgba(255,255,255,0.55); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; pointer-events: auto; background-color: #fff6dc; box-shadow: 0 6px 0 #5b3a1a, 0 14px 22px rgba(0,0,0,0.30), inset 0 4px 0 rgba(255,255,255,0.65); transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 90ms; } .mobile-btn:active, .mobile-btn.pressed { transform: translateY(4px); box-shadow: 0 2px 0 #5b3a1a, 0 6px 12px rgba(0,0,0,0.35), inset 0 4px 0 rgba(255,255,255,0.45); filter: brightness(1.05); } .mobile-btn.ready { box-shadow: 0 6px 0 #5b3a1a, 0 0 22px rgba(127,220,106,0.60), 0 14px 22px rgba(0,0,0,0.30), inset 0 4px 0 rgba(255,255,255,0.65); } .mobile-btn.cooldown { filter: grayscale(0.6) brightness(0.85); opacity: 0.7; } /* Per-skill bubble colors — bamboo green, sky blue, lantern amber, panda pink. All share the same brown-outlined cartoon framing. */ .sprint-btn { background-color: #b8e890; } /* spring green */ .hide-btn { background-color: #b3e8c4; } /* mint */ .torch-btn { background-color: #ffd166; } /* lantern amber */ .rescue-btn { background-color: #ffb3c8; color: #4a1a30; border-color: #4a1a30; } .rescue-btn { box-shadow: 0 6px 0 #4a1a30, 0 14px 22px rgba(0,0,0,0.30), inset 0 4px 0 rgba(255,255,255,0.55); } .rescue-btn:active, .rescue-btn.pressed { box-shadow: 0 2px 0 #4a1a30, 0 6px 12px rgba(0,0,0,0.35), inset 0 4px 0 rgba(255,255,255,0.40); } /* Old buttons that may still get added by stale JS — hide hard. */ .attack-btn, .taunt-btn, .skill-btn, .heal-btn, .action-btn { display: none !important; } /* Virtual joystick (touch only). Sits at fixed bottom-left mirroring BH's setup. Hidden on hover-capable desktops via the media query block further down. */ #joystick { position: fixed; left: 28px; bottom: 32px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); background: rgba(20, 14, 40, 0.45); pointer-events: auto; display: none; /* shown by mobile media query */ touch-action: none; z-index: 5; } #joystick-stick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(167, 139, 250, 0.85); /* PT violet */ border: 3px solid rgba(255,255,255,0.85); pointer-events: none; } @media (pointer: coarse), (max-width: 900px) { #joystick { display: block; } } /* Top-right ⛶ fullscreen toggle — visible on EVERY device (including desktop) per the user's "can't see the fullscreen button" complaint. */ #fs-btn { position: fixed; top: 12px; right: 12px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; pointer-events: auto; display: flex; align-items: center; justify-content: center; } #fs-btn:hover { background: rgba(0,0,0,0.75); } #fs-btn.fs-active { background: rgba(167,139,250,0.7); color: #1a0d30; } /* TOUCH DEVICES (any width) — mobile-specific tweaks. The desktop #status chips strip is suppressed (the 4 mobile buttons already communicate cooldown state), and the buttons shrink slightly for small viewports. The topbar pills stay visible (they're small + informative). */ @media (pointer: coarse), (max-width: 900px) { .mobile-btn { width: 72px; height: 72px; font-size: 10.5px; } #status { display: none !important; } /* Topbar pills shrink a notch on phones. */ .top-pill { font-size: 16px; padding: 7px 16px; border-width: 2.5px; } .top-pill .top-icon { font-size: 16px; } } @media (hover: hover) and (pointer: fine) { /* Hide touch-only HUD on hover-capable desktops. #fs-btn stays visible — fullscreen is useful on web too. */ #mobile-controls { display: none; } #joystick { display: none !important; } } #lobby { position: fixed; inset: 0; background: rgba(8,12,18,0.94); display: flex; align-items: center; justify-content: center; z-index: 20; } #lobby.hidden { display: none; } #lobby-card { position: relative; width: min(560px, 92vw); padding: 32px 28px; background: #15171d; border: 1px solid #2c3340; border-radius: 14px; text-align: center; } #back-home { position: absolute; top: 14px; left: 16px; font-size: 12px; color: #99a; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; transition: all 0.15s; text-decoration: none; pointer-events: auto; } #back-home:hover { color: #66d9ff; border-color: #66d9ff; background: rgba(102,217,255,0.06); } #lobby-card h1 { font-size: 30px; color: #ff5252; margin-bottom: 6px; letter-spacing: 0.02em; } .lobby-tagline { font-size: 13px; color: #4a3e2e; margin-bottom: 16px; font-style: italic; } #connect-status { font-size: 14px; color: #99a; margin-bottom: 16px; } #connect-status.ok { color: #6dd76d; } #connect-status.err { color: #ff6262; } .lobby-name-row { margin-bottom: 16px; } #my-name { width: 70%; padding: 10px 14px; border-radius: 6px; border: 1px solid #444; background: #0e1218; color: #fff; font-size: 14px; } #lobby-players { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; } .slot { background: #0e1218; border: 1px solid #2c3340; padding: 10px 6px; border-radius: 8px; font-size: 11px; color: #9aa; } .slot.taken { border-color: #5da; color: #c4f0c4; } .slot.you { background: #0d2230; border-color: #66d9ff; color: #c8eaff; } .slot.ai { color: #777; font-style: italic; } .slot .role { font-weight: 700; font-size: 10px; letter-spacing: 0.5px; opacity: 0.7; margin-bottom: 4px; } .slot .name { font-size: 12px; } #countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 18px; } #countdown-wrap.hidden { display: none; } #countdown-label { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #99a; font-weight: 600; } #countdown-clock { position: relative; width: 130px; height: 130px; } #countdown-svg { width: 100%; height: 100%; transform: scale(1); transition: transform 0.15s; } #countdown-arc { transition: stroke-dashoffset 1s linear, stroke 0.2s; } /* Legacy SVG-clock layout only — scoped to #countdown-clock so it doesn't bleed into the new .lobby-clock pill layout (where #countdown-num is just inline text). The old absolute-inset rule was sitting on top of the entire main-lobby card and intercepting every click — including READY UP. */ #countdown-clock #countdown-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 48px; font-weight: 800; color: #ffd166; font-variant-numeric: tabular-nums; } #countdown-wrap.warn #countdown-num { color: #ff8b3a; } #countdown-wrap.warn #countdown-arc { stroke: #ff8b3a; } #countdown-wrap.crit #countdown-num { color: #ff5252; animation: pulse 0.6s infinite; } #countdown-wrap.crit #countdown-arc { stroke: #ff5252; } #countdown-wrap.crit #countdown-svg { animation: cdshake 0.4s infinite; } #countdown-hint { font-size: 11px; color: #99a; margin-top: 4px; } @keyframes pulse { 50% { opacity: 0.4; } } @keyframes cdshake { 25% { transform: scale(1.04); } 75% { transform: scale(0.97); } } .lobby-roles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 0; } .lobby-action-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* PLAY NOW — primary one-click "start my match" button. */ .play-now-btn{ display:block; width:100%; margin:12px 0 10px; background:linear-gradient(180deg,#6dd76d 0%,#3b9e3b 100%); color:#0d2a0d; border:none; border-radius:999px; padding:16px 28px; font-weight:900; font-size:17px; letter-spacing:0.1em; cursor:pointer; box-shadow:0 8px 22px rgba(59,122,53,0.42); transition:filter 0.15s ease, transform 0.1s ease; } .play-now-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); } .play-now-btn:active{ transform:translateY(0); } .play-now-btn:disabled{ background:#2a2f3a; color:#667; cursor:not-allowed; box-shadow:none; } /* GUEST MODE — strip the lobby to just name + PLAY NOW. Signed-in accounts get the full lobby (seats, Survive Queue, roles, Loadout/Library tabs). */ /* #pt-auth used to be force-hidden for guests, which is why the sign-in option was invisible on arrival. It now lives inside #wp-login-card (the pre-name gate), which hides as a whole once a name is submitted — so the card shows exactly when it should and this override is gone. */ /* The guest strip-down simplifies the MAIN pane (no seats, queue, or ready timer — guests just press PLAY NOW). It must not remove navigation: hiding .lobby-tabs here meant guests could never reach Private Lobby, which is a guest-legal feature — you can play with friends by code without an account. Loadout and Library stay parked via [hidden] in the markup because those genuinely need an account. */ #lobby-body.wp-guest #main-section .section-head, #lobby-body.wp-guest #main-section .section-blurb, #lobby-body.wp-guest #countdown-wrap, #lobby-body.wp-guest #lobby-player-list, #lobby-body.wp-guest .lobby-action-row, #lobby-body.wp-guest #ready-timer-row, #lobby-body.wp-guest #sub-section, #lobby-body.wp-guest #main-section .role-note { display:none !important; } #lobby-body.wp-guest #main-section { border:none; background:none; padding:0; box-shadow:none; } #lobby-body.wp-guest .play-now-btn { margin:8px 0; font-size:19px; padding:18px; } #go-btn, .ready-btn { background: #ffd166; color: #1a1a1a; border: none; padding: 12px 28px; font-size: 15px; font-weight: 800; border-radius: 8px; cursor: pointer; letter-spacing: 1px; } #go-btn:hover, .ready-btn:hover { filter: brightness(1.1); } #go-btn:disabled { background: #2a2f3a; color: #666; cursor: not-allowed; } .ready-btn { background: #66d9ff; color: #0d2230; } .ready-btn.ready { background: #6dd76d; color: #0d2a0d; } .ready-btn.ready::after { content: ' ✓'; } .slot.taken.ready { border-color: #6dd76d; box-shadow: 0 0 0 1px #6dd76d inset; } #ready-timer-row { font-size: 12px; color: #ff8b3a; margin-top: 10px; min-height: 18px; letter-spacing: 0.05em; } #ready-timer-row.crit { color: #ff5252; font-weight: 700; } .lobby-hint { font-size: 12px; line-height: 1.7; color: #99a; margin-top: 18px; } #overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: auto; } #overlay.hidden { display: none; } #overlay-card { max-width: 540px; padding: 36px; background: #15171d; border: 1px solid #333; border-radius: 12px; text-align: center; } #overlay-card h1 { font-size: 32px; margin-bottom: 16px; color: #ff5252; } #overlay-card p { font-size: 15px; line-height: 1.6; color: #ccc; margin-bottom: 24px; } #overlay-btn { background: #ffd166; color: #1a1a1a; border: none; padding: 12px 32px; font-size: 16px; font-weight: 700; border-radius: 6px; cursor: pointer; } #overlay-btn:hover { background: #ffdb85; } /* ============================================================ LOBBY UI/UX RESTYLE — dark glassy purple aesthetic. Strict visual layer: no selector renames, no behavior change. ============================================================ */ :root{ /* Brand accent — deep forest green, matches the main lobby. Cyan/teal had bad contrast as text on cream/white. Variable names kept (--pt-purple) so existing selectors don't churn. */ --pt-purple:#166534; /* green-800 — buttons, borders, headings */ --pt-purple-mid:#16a34a; /* green-600 — hover, mid accents */ /* Lobby background gradient — deepened-teal tones so the dark glassy aesthetic still reads, just without the violet hue. */ --pt-bg-1:#0f2a35; --pt-bg-2:#071921; --pt-bg-3:#040c11; /* Dim text color — the lobby card uses the cream/sand bamboo theme (override block at the end of this file wins). Bright bg → text needs to be DARK, not light. Was washed-out purple-grey (#9994b3) → now a warm dark grey that contrasts strongly against cream and pairs with the brown body text. */ --pt-dim:#4a3e2e; --pt-hairline:rgba(255,255,255,0.08); --pt-hairline-2:rgba(255,255,255,0.16); --pt-display:'Bricolage Grotesque', system-ui, sans-serif; --pt-body:'Josefin Sans', system-ui, sans-serif; } #lobby{ background:radial-gradient(80% 60% at 50% 0%, var(--pt-bg-1) 0%, var(--pt-bg-2) 60%, var(--pt-bg-3) 100%); font-family:var(--pt-body); } #lobby-card{ /* NOTE: this rule is overridden by the WP bamboo-overlay block at the end of the file (cream/sand card). Kept for any legacy branch where the overlay theme isn't loaded. Original dark-glass aesthetic. */ background:rgba(6, 16, 22, 0.96); border:1px solid var(--pt-hairline); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset; } #lobby-card h1{ font-family:var(--pt-display); font-weight:700; color:#fff; letter-spacing:-0.01em; } .lobby-tagline{ color:var(--pt-dim); font-style:normal; font-size:13px; } /* Pin the back button to the VIEWPORT (not the lobby card) so it stays visible even when the card is taller than the screen. */ #back-home{ position:fixed !important; top:18px !important; left:18px !important; z-index:40; background:rgba(11,9,24,0.6); color:var(--pt-dim); border:1px solid var(--pt-hairline); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; backdrop-filter:blur(8px); text-decoration:none; transition:all 0.15s ease; } #back-home:hover{ color:#fff; border-color:var(--pt-hairline-2); background:rgba(11,9,24,0.85); } /* ID-scoped hide rule — `#role-picker.hidden { display:none }` beats the default `#role-picker { display:flex }` (same ID specificity, last one wins). */ #role-picker.hidden, #lobby-players.hidden{ display:none; } #connect-status{ display:inline-block; font-size:11px; letter-spacing:0.08em; color:var(--pt-dim); padding:5px 11px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--pt-hairline); margin-bottom:14px; } #connect-status.ok { color:#8be38b; background:rgba(139,227,139,0.06); border-color:rgba(139,227,139,0.3); } #connect-status.err{ color:#ff8a8a; background:rgba(255,138,138,0.06); border-color:rgba(255,138,138,0.3); } /* Name input */ #my-name{ width:80%; padding:11px 14px; border-radius:10px; background:rgba(0,0,0,0.35); color:#fff; border:1px solid var(--pt-hairline); font-size:14px; font-family:var(--pt-body); } #my-name:focus{ outline:none; border-color:var(--pt-purple-mid); } /* Player slot grid */ .slot{ background:rgba(0,0,0,0.25); border:1px solid var(--pt-hairline); border-radius:10px; color:var(--pt-dim); } .slot.taken{ background:rgba(34,197,94,0.10); border-color:rgba(34,197,94,0.45); color:#dcfce7; } .slot.you{ background:rgba(34,197,94,0.18); border-color:var(--pt-purple); color:#fff; box-shadow:0 0 0 1px rgba(34,197,94,0.5) inset; } .slot.ai{ color:var(--pt-dim); font-style:normal; } .slot.taken.ready{ border-color:#8be38b; box-shadow:0 0 0 1px rgba(139,227,139,0.45) inset; } .slot .role{ font-family:var(--pt-display); font-size:10px; letter-spacing:0.1em; font-weight:800; text-transform:uppercase; } /* Countdown */ #countdown-label{ color:var(--pt-dim); font-size:11px; letter-spacing:0.12em; font-weight:700; } #countdown-num{ font-family:var(--pt-display); color:#fff; font-variant-numeric:tabular-nums; } #countdown-arc{ stroke:var(--pt-purple-mid); } #countdown-wrap.warn #countdown-num{ color:#ffb84d; } #countdown-wrap.warn #countdown-arc { stroke:#ffb84d; } #countdown-wrap.crit #countdown-num{ color:#ff8a8a; } #countdown-wrap.crit #countdown-arc { stroke:#ff8a8a; } #countdown-hint{ color:var(--pt-dim); } /* Role picker */ .role-btn{ padding:8px 16px; background:rgba(255,255,255,0.04); border:1px solid var(--pt-hairline); border-radius:999px; color:#ddd; font-size:12px; font-weight:600; font-family:var(--pt-body); transition:all 0.15s ease; } .role-btn:hover{ background:rgba(34,197,94,0.18); border-color:var(--pt-purple-mid); color:#fff; } .role-btn.active{ background:var(--pt-purple); color:#fff; border-color:var(--pt-purple); } .role-btn:disabled{ opacity:0.35; cursor:not-allowed; } /* Ready / GO buttons */ #go-btn, .ready-btn{ background:var(--pt-purple); color:#fff; border:none; border-radius:999px; padding:13px 28px; font-family:var(--pt-display); font-weight:800; letter-spacing:0.08em; transition:all 0.15s ease; box-shadow:0 8px 22px rgba(34,197,94,0.35); } #go-btn:hover, .ready-btn:hover{ background:var(--pt-purple-mid); transform:translateY(-1px); filter:none; } #go-btn:disabled{ background:rgba(255,255,255,0.05); color:var(--pt-dim); box-shadow:none; cursor:not-allowed; } .ready-btn.ready{ background:#3b7a35; box-shadow:0 8px 22px rgba(59,122,53,0.35); } /* Ready timer */ #ready-timer-row{ color:#f5cd8d; } #ready-timer-row.crit{ color:#ff8a8a; } /* Lobby hint */ .lobby-hint{ color:var(--pt-dim); } .lobby-hint b{ color:#fff; } /* Overlay */ #overlay{ background:radial-gradient(80% 60% at 50% 0%, rgba(26,20,50,0.94) 0%, rgba(7,5,26,0.97) 100%); } #overlay-card{ background:rgba(20, 14, 40, 0.92); border:1px solid var(--pt-hairline); backdrop-filter:blur(18px); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,0.5); } #overlay-card h1{ font-family:var(--pt-display); font-weight:700; color:#fff; letter-spacing:-0.01em; } #overlay-card p{ color:var(--pt-dim); } #overlay-btn{ background:var(--pt-purple); color:#fff; border:none; border-radius:999px; padding:13px 30px; font-family:var(--pt-display); font-weight:800; letter-spacing:0.08em; box-shadow:0 8px 22px rgba(34,197,94,0.35); } #overlay-btn:hover{ background:var(--pt-purple-mid); } /* ============================================================ PT MAIN+SUB LOBBY LAYOUT — mirrors Bunny Harvest's structure. ============================================================ */ #lobby-card{ /* widen for the 3-col lobby-shell (nav | panes | queue rail) */ width:min(1200px, 96vw) !important; text-align:left !important; max-height: 96vh; overflow-y: auto; } #lobby-card h1{ text-align:center; } .lobby-tagline{ text-align:center; } /* #lobby-body wraps .lobby-shell which IS the 3-col grid. Was a stale 2-col 1fr/1.6fr grid that squeezed the entire shell into the left column. Reset to plain block. */ #lobby-body{ display:block; margin: 14px 0 18px; } .section-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } .section-head h3{ font-family:var(--pt-display); font-weight:700; font-size:1rem; flex:1; letter-spacing:0.02em; } .section-icon{ font-size:18px; } .section-count{ background:rgba(255,255,255,0.06); border:1px solid var(--pt-hairline); border-radius:999px; padding:2px 10px; font-family:var(--pt-display); font-weight:700; font-size:11px; color:var(--pt-dim); } .section-blurb{ font-size:11.5px; color:var(--pt-dim); line-height:1.45; margin-bottom:12px; } #sub-section{ background:rgba(217,119,6,0.06); border:1px solid rgba(217,119,6,0.30); border-radius:14px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:10px; } /* Title colour overridden in the cartoon-lobby pass below — left here as a no-op so the rule isn't pruned. The Wolf Pandana card uses bamboo-dark green for ALL section titles per readability. */ #sub-section .section-head h3{ color:var(--wp-bamboo-dk, #2d5a18); } #sub-queue-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:12px; max-height:160px; overflow-y:auto; } #sub-queue-list li{ background:rgba(0,0,0,0.25); border:1px solid var(--pt-hairline); border-left-width:3px; border-left-color:rgba(255,255,255,0.12); border-radius:8px; padding:6px 10px; color:#d8d3ec; display:flex; align-items:center; gap:8px; } #sub-queue-list li.queue-empty{ color:var(--pt-dim); font-style:italic; background:rgba(0,0,0,0.15); border-left-color:transparent; } #main-section{ background:rgba(34,197,94,0.06); border:1px solid rgba(34,197,94,0.30); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; } #main-section .section-head h3{ color:var(--wp-bamboo-dk, #2d5a18); } .lobby-player-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:12px; } .lobby-player-row{ background:rgba(0,0,0,0.25); border:1px solid var(--pt-hairline); border-left-width:3px; border-left-color:rgba(255,255,255,0.12); border-radius:8px; padding:7px 10px; display:flex; align-items:center; gap:10px; color:#d8d3ec; } .lobby-player-row .role-tag{ font-family:var(--pt-display); font-weight:800; font-size:10px; letter-spacing:0.1em; background:rgba(255,255,255,0.06); color:#cfc8ea; padding:2px 8px; border-radius:4px; flex-shrink:0; } .lobby-player-row .nm{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lobby-player-row .ready-tag{ color:#8be38b; font-size:10px; font-weight:800; letter-spacing:0.1em; } /* Supporter chip — inline next to a player's name in the lobby roster. Pure acknowledgement, no gameplay impact. Each tier gets a slightly bolder treatment. */ .wp-supporter-chip{ display:inline-flex; align-items:center; padding:2px 7px; font-size:11px; line-height:1; border-radius:999px; border:1.5px solid; margin-right:4px; cursor:help; } .wp-supporter-chip.t1{ background:rgba(132,204,22,0.22); color:#365314; border-color:#365314; } .wp-supporter-chip.t2{ background:rgba(34,197,94,0.25); color:#0f3a14; border-color:#166534; } .wp-supporter-chip.t3{ background:rgba(217,169,58,0.35); color:#7a4d10; border-color:#7a4d10; } .wp-supporter-chip.t4{ background:rgba(132,204,22,0.40); color:#1a2e05; border-color:#365314; } .wp-supporter-chip.t5{ background:linear-gradient(135deg, #facc15 0%, #f59e0b 100%); color:#3a2208; border-color:#a86d00; box-shadow:0 2px 0 #a86d00; } .lobby-player-row .waiting-tag{ color:var(--pt-dim); font-size:10px; } .lobby-player-row .empty-tag{ color:var(--pt-dim); font-size:10px; font-style:italic; } .lobby-player-row.empty{ background:rgba(0,0,0,0.12); border-left-color:transparent; opacity:0.7; } .lobby-player-row.taken{ border-left-color:#4ade80; color:#dcfce7; } .lobby-player-row.taken.ready{ border-left-color:#8be38b; } .lobby-player-row.you{ background:rgba(34,197,94,0.14); border-left-color:#4ade80; } .lobby-player-row.you .role-tag{ background:rgba(34,197,94,0.30); color:#fff; } .lobby-player-row.murder-seat{ border-left-color:#ff5252; background:rgba(255,82,82,0.07); } .lobby-player-row.murder-seat .role-tag{ background:rgba(255,82,82,0.20); color:#ffb0b0; } .lobby-clock{ display:flex; align-items:center; gap:8px; background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.40); border-radius:10px; padding:8px 12px; font-size:13px; color:#d8c8ff; flex-wrap:wrap; } .lobby-clock.hidden{ display:none; } .lobby-clock .clock-time{ margin-left:auto; font-family:var(--pt-display); font-weight:800; color:#b698ff; letter-spacing:1px; font-variant-numeric:tabular-nums; } .lobby-clock .countdown-bar{ flex-basis:100%; height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; } .lobby-clock .countdown-bar-fill{ height:100%; width:100%; background:linear-gradient(90deg, #4ade80 0%, #86efac 100%); transition:width 0.3s linear; } .role-picker-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 4px 0 6px; } .role-picker-label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--pt-dim); font-weight:700; } #role-picker{ display:flex; gap:6px; flex-wrap:wrap; } .role-btn{ padding:7px 14px; background:rgba(255,255,255,0.04); border:1px solid var(--pt-hairline); border-radius:999px; color:#ddd; font-size:12px; font-weight:600; font-family:var(--pt-body); transition:all 0.15s ease; } .role-btn:hover{ background:rgba(34,197,94,0.18); border-color:var(--pt-purple-mid); color:#fff; } .role-btn.active{ background:var(--pt-purple); border-color:var(--pt-purple); color:#fff; } .role-btn:disabled{ opacity:0.35; cursor:not-allowed; } .lobby-action-row{ display:flex; gap:10px; } #go-btn:disabled{ background:rgba(255,255,255,0.05); color:var(--pt-dim); box-shadow:none; cursor:not-allowed; } .queue-btn{ background:#d97706; color:#1a0500; border:none; border-radius:999px; padding:10px 18px; font-family:var(--pt-display); font-weight:800; letter-spacing:0.08em; box-shadow:0 6px 18px rgba(217,119,6,0.35); } .queue-btn:hover{ background:#f5a25d; } .queue-btn.queued{ background:#3b7a35; color:#fff; box-shadow:none; } .unqueue-btn{ background:rgba(255,255,255,0.06); color:#ff8a8a; border:1px solid rgba(255,138,138,0.3); border-radius:999px; padding:10px 16px; font-family:var(--pt-display); font-weight:700; } .unqueue-btn.hidden, .hidden{ display:none; } .sub-foot{ font-size:11px; color:var(--pt-dim); line-height:1.4; } .watch-live-btn{ background:var(--pt-purple); color:#fff; border:none; border-radius:999px; padding:10px 16px; font-family:var(--pt-display); font-weight:800; letter-spacing:0.1em; box-shadow:0 6px 18px rgba(34,197,94,0.32); } .watch-live-btn:hover{ background:var(--pt-purple-mid); } /* ===== Sub-lobby estimate clock + spectate CTA ===== */ #sub-match-clock{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.40); font-size:12.5px; color:#d8c8ff; font-weight:600; } #sub-match-clock.hidden{ display:none; } #sub-match-clock .clock-label{ color:var(--pt-dim); font-weight:500; } #sub-match-clock .clock-time{ margin-left:auto; font-family:var(--pt-display); font-weight:800; letter-spacing:1px; color:#b698ff; } #sub-spectate-cta{ display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:10px; background:rgba(34,197,94,0.07); border:1px solid rgba(34,197,94,0.32); margin-top:6px; } #sub-spectate-cta.hidden{ display:none; } #sub-spectate-cta .cta-text{ display:flex; gap:8px; align-items:flex-start; font-size:12px; color:#d8d3ec; line-height:1.4; } #sub-spectate-cta .cta-icon{ font-size:16px; flex-shrink:0; } #sub-spectate-cta .sub-foot{ font-size:11px; color:var(--pt-dim); line-height:1.4; } /* ===== Secret Panel (welcome + perks summary) ===== Mirrors BH's Secret Panel in PT's purple/gold palette. Sits above the marketplace strip. Cosmetic-only "you found it" reward block with the shared wallet credits + perk badges. */ .lobby-secret-panel{ margin-top:18px; padding:14px 16px; background:linear-gradient(135deg, rgba(255,209,102,0.12) 0%, rgba(34,197,94,0.14) 100%); border:1.5px solid rgba(255,209,102,0.45); border-radius:12px; display:flex; flex-direction:column; gap:10px; text-align:left; box-shadow:0 0 24px rgba(255,184,77,0.10); } .lobby-secret-panel.hidden{ display:none; } .lobby-secret-panel .lsp-head{ display:flex; align-items:center; gap:12px; } .lobby-secret-panel .lsp-head h2{ font-family:var(--pt-display); font-weight:800; font-size:18px; color:#7a4d10; flex:1; letter-spacing:0.4px; margin:0; /* Was #ffd166 light yellow — invisible on cream. Now deep amber. */ } .lobby-secret-panel .lsp-credits{ /* Yellow text on yellow tint on cream = unreadable. Bumped bg contrast + swapped text to dark amber for legibility. */ background:rgba(255,209,102,0.45); border:1.5px solid #a86d00; border-radius:999px; padding:4px 12px; font-size:13px; font-weight:800; color:#5b3206; } .lobby-secret-panel .lsp-blurb{ /* Was #d8c896 (dusty yellow on dark glass theme) — too low contrast on the cream lobby card which actually wins (bamboo overlay). Switched to a deep warm brown so the "everything is free" pitch is sharply readable against the cream/sand background. */ font-size:12.5px; line-height:1.55; color:#3a2e1e; margin:0; } .lobby-secret-panel .lsp-perks{ display:flex; flex-wrap:wrap; gap:6px; } .lobby-secret-panel .lsp-perks:empty{ display:none; } .lobby-secret-panel .lsp-perk{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:11.5px; font-weight:800; letter-spacing:0.4px; /* Yellow-on-cream was invisible. Bumped bg + amber text. */ background:rgba(255,209,102,0.35); border:1.5px solid #a86d00; color:#5b3206; border-radius:999px; } .lobby-secret-panel .lsp-perk-admin{ background:#ffd166; color:#1a1004; border-color:#ffe19a; } .lobby-secret-panel .lsp-perk-lifetime{ background:rgba(34,197,94,0.30); border-color:rgba(34,197,94,0.65); color:#bbf7d0; } .lobby-secret-panel .lsp-perk-priority{ /* Was light cyan text on cyan tint on cream — invisible. Now: green chip with green-dark text. */ background:rgba(34,197,94,0.20); border-color:#166534; color:#0f3a14; } .lobby-secret-panel .lsp-perk-cosmetic{ /* Was lavender text — invisible on cream. Now: warm-brown chip. */ background:rgba(91,58,26,0.10); border-color:#8b5a2b; color:#3a2e1e; } .lobby-secret-panel .lsp-perk-guest{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); color:#99a; } /* Bring-into-match loadout block (inside the Secret Panel) */ .lsp-loadout{ margin-top:6px; padding:12px; background:rgba(0,0,0,0.30); border:1px solid rgba(34,197,94,0.30); border-radius:10px; } .lsp-loadout-head{ font-size:13px; font-weight:800; letter-spacing:0.04em; color:#fff; margin-bottom:10px; } .lsp-loadout-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; } @media (max-width:640px){ .lsp-loadout-row{ grid-template-columns:1fr; } } .lsp-loadout-row label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--pt-dim); letter-spacing:0.4px; } .lsp-loadout-label{ font-weight:700; color:#e0d4ff; } .lsp-loadout-row select{ background:#15101e; color:#fff; border:1px solid rgba(34,197,94,0.40); border-radius:8px; padding:7px 10px; font-size:12.5px; font-weight:600; cursor:pointer; } .lsp-loadout-row select:hover{ border-color:rgba(34,197,94,0.70); } .lsp-loadout-row select:focus{ outline:none; border-color:#4ade80; box-shadow:0 0 0 2px rgba(167,139,250,0.25); } .lsp-loadout-foot{ margin-top:8px; font-size:11px; color:var(--pt-dim); line-height:1.5; } /* Tabs + dynamic grid for the new marketplace shape */ .lobby-market-tabbed .lm-tabs{ display:flex; gap:4px; margin:0 0 12px; border-bottom:1px solid rgba(255,255,255,0.08); } .lm-tab{ background:transparent; color:var(--pt-dim); border:0; padding:8px 12px; font-size:12px; font-weight:700; letter-spacing:0.3px; cursor:pointer; border-bottom:2px solid transparent; transition:color 0.12s, border-color 0.12s; } .lm-tab:hover{ color:#fff; } .lm-tab.active{ color:#fff; border-bottom-color:#4ade80; } /* Card buy/equip overlay state */ .lm-card-owned{ border-color:rgba(126,255,158,0.45); } .lm-card-equipped{ border-color:#4ade80; box-shadow:0 0 14px rgba(167,139,250,0.25); } .lm-card-cant{ opacity:0.55; } .lm-card-action{ margin-top:6px; display:inline-block; width:100%; padding:5px 0; font-size:11px; font-weight:800; letter-spacing:0.4px; border-radius:6px; border:1px solid transparent; cursor:pointer; } .lm-card-action.buy { background:#ffd166; color:#1a1004; border-color:#ffe19a; } .lm-card-action.buy:hover{ background:#ffe19a; } .lm-card-action.equip { background:rgba(34,197,94,0.30); color:#e0d4ff; border-color:rgba(34,197,94,0.55); } .lm-card-action.equip:hover{ background:rgba(34,197,94,0.50); color:#fff; } .lm-card-action.equipped{ background:#4ade80; color:#15101e; border-color:#bbf7d0; cursor:default; } .lm-card-action.locked{ background:rgba(255,255,255,0.06); color:#99a; border-color:rgba(255,255,255,0.10); cursor:not-allowed; } .lm-card-sub{ margin-top:4px; font-size:10.5px; color:var(--pt-dim); } /* ===== Marketplace strip ===== */ .lobby-market{ margin-top:18px; padding:16px; background:linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(0,0,0,0.18) 100%); border:1px solid rgba(34,197,94,0.30); border-radius:14px; } .lobby-market.hidden{ display:none; } .lm-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .lm-title{ font-family:var(--pt-display); font-weight:800; font-size:14px; letter-spacing:0.04em; /* Was #fff — invisible on cream lobby card. Deep brown for contrast. */ color:var(--wp-brown); flex:1; } .lm-credits{ font-family:var(--pt-display); font-weight:800; font-size:12px; /* Was yellow text on tint — invisible. Now: deep amber on bolder chip. */ background:rgba(255,209,102,0.45); color:#5b3206; padding:4px 12px; border-radius:999px; border:1.5px solid #a86d00; } .lm-credits b{ font-weight:800; } .lm-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; } @media (max-width:640px){ .lm-grid{ grid-template-columns:repeat(2, 1fr); } } .lm-card{ text-align:center; padding:12px 8px; background:rgba(0,0,0,0.30); border:1px solid var(--pt-hairline); border-radius:10px; transition:transform 0.15s ease, border-color 0.15s ease; cursor:pointer; } .lm-card:hover{ transform:translateY(-2px); border-color:var(--pt-purple-mid); } .lm-emoji{ font-size:30px; line-height:1; margin-bottom:6px; } .lm-name{ font-family:var(--pt-display); font-weight:700; font-size:11.5px; color:#fff; margin-bottom:4px; } .lm-price{ font-size:11px; color:var(--pt-dim); font-weight:600; } .lm-benefit{ font-size:10.5px; color:#9a8fb5; margin-top:5px; padding-top:5px; border-top:1px dashed rgba(255,255,255,0.10); line-height:1.35; } .lm-foot{ margin-top:10px; padding-top:10px; border-top:1px solid var(--pt-hairline); font-size:11px; color:var(--pt-dim); text-align:center; line-height:1.4; } .lm-foot a{ color:var(--pt-purple-mid); text-decoration:underline; } /* ═══════════════════════════════════════════════════════════════════════════ GLASSMORPHISM LOBBY OVERHAUL · PT ────────────────────────────────────────────────────────────────────────── Glossy / glass material across the whole lobby: • backdrop-filter blur on every card • semi-transparent dark fill so the painted background bleeds through • 1px hairline + inset highlight at the top edge for "lit glass" • soft drop shadow under each card for elevation PT keeps its purple/gold accents on top of the glass; BH uses the same ruleset with warm yellow accents for visual cohesion across both games. ═══════════════════════════════════════════════════════════════════════════ */ /* Painted backdrop behind the lobby card so the glass actually has something to refract. Replaces the flat dark wash. */ #lobby{ background: radial-gradient(60% 50% at 18% 20%, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 70%), radial-gradient(45% 50% at 82% 80%, rgba(255,209,102,0.18) 0%, rgba(255,209,102,0) 70%), radial-gradient(80% 90% at 50% 50%, rgba(8,6,18,0.96) 0%, rgba(0,0,0,1) 100%) !important; } /* Lobby card — the "main pane" of glass */ #lobby-card{ background: linear-gradient(180deg, rgba(28,18,52,0.55) 0%, rgba(14,8,26,0.62) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; backdrop-filter: blur(28px) saturate(1.2) !important; -webkit-backdrop-filter: blur(28px) saturate(1.2) !important; border-radius: 22px !important; box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset, inset 0 1px 0 rgba(255,255,255,0.10) !important; } /* Sub-section + main-section: nested glass tiles inside the main pane */ #sub-section, #main-section{ background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08); } #sub-section{ border-color: rgba(217,119,6,0.30); } #main-section{ border-color: rgba(34,197,94,0.30); } /* Secret Panel — warm glass with a gold rim glow */ .lobby-secret-panel{ background: linear-gradient(135deg, rgba(255,209,102,0.16) 0%, rgba(34,197,94,0.16) 100%) !important; border: 1.5px solid rgba(255,209,102,0.50) !important; backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.40), 0 0 32px rgba(255,184,77,0.16), inset 0 1px 0 rgba(255,255,255,0.14); } /* Marketplace — cooler glass tile */ .lobby-market{ background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(0,0,0,0.20) 100%) !important; border: 1px solid rgba(34,197,94,0.30) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06); } /* Marketplace cards — small glass chips */ .lm-card{ background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .lm-card:hover{ transform: translateY(-1px); border-color: rgba(167,139,250,0.45); box-shadow: 0 8px 18px rgba(0,0,0,0.35), 0 0 18px rgba(167,139,250,0.15), inset 0 1px 0 rgba(255,255,255,0.10); } /* Loadout block inside Secret Panel — darker glass for contrast */ .lsp-loadout{ background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.30) 100%); border: 1px solid rgba(34,197,94,0.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } /* Profile panel (signed-in chip) */ #pt-profile-panel{ background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(255,209,102,0.10) 100%) !important; border: 1.5px solid rgba(34,197,94,0.45) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08); } /* Sign-in CTA pill (when signed out) */ #pt-auth{ background: rgba(34,197,94,0.14) !important; border: 1px solid rgba(34,197,94,0.35) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } /* How-to card */ #pt-howto{ background: rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } /* Section blocks inside the new how-to. Each one is a small inset glass tile so the eye groups Goal / Lobby / Survivor / Murder / Phases / Lighting separately. */ .howto-block{ margin-bottom: 10px; padding: 10px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .howto-block-murder{ background: linear-gradient(180deg, rgba(199,58,74,0.10) 0%, rgba(199,58,74,0.02) 100%); border-color: rgba(255,128,144,0.25); } .howto-h{ font-family: var(--pt-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; margin-bottom: 6px; } .howto-keys{ display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #dceaf0; } .howto-keys span{ line-height: 1.5; } .howto-keys b{ color: #fff; } .howto-foot{ margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.10); font-size: 11.5px; color: var(--pt-dim); line-height: 1.5; } /* Buttons — glassy with subtle gradient sheen */ .ready-btn, .queue-btn, .unqueue-btn, .watch-live-btn{ background: linear-gradient(180deg, rgba(34,197,94,0.85) 0%, rgba(91,33,182,0.95) 100%) !important; border: 1px solid rgba(255,255,255,0.18) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(34,197,94,0.35), inset 0 1px 0 rgba(255,255,255,0.20); transition: transform 0.08s, box-shadow 0.15s; } .ready-btn:hover, .queue-btn:hover, .unqueue-btn:hover, .watch-live-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(34,197,94,0.45), inset 0 1px 0 rgba(255,255,255,0.25); } .ready-btn.ready{ background: linear-gradient(180deg, rgba(126,255,158,0.85) 0%, rgba(61,180,93,0.95) 100%) !important; border-color: rgba(255,255,255,0.25) !important; box-shadow: 0 6px 16px rgba(61,180,93,0.40), inset 0 1px 0 rgba(255,255,255,0.30); } /* Lobby clock + queue list items get glass too */ .lobby-clock, #sub-match-clock{ background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; } #sub-queue-list li{ background: rgba(0,0,0,0.30) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ── PACK PRESSURE BAR — appears top-centre when 4+ pandas caught. Big red banner + bar that fills as the 3s wolf-win timer ticks. */ #pack-pressure { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 6; font-family: var(--pt-display); } #pack-pressure.show { display: flex; animation: pack-pulse 0.8s ease-in-out infinite alternate; } @keyframes pack-pulse { 0% { transform: translateX(-50%) scale(1.0); } 100% { transform: translateX(-50%) scale(1.06); } } #pack-pressure-label { font-size: 14px; font-weight: 900; letter-spacing: 0.10em; color: #fff; text-shadow: 0 2px 0 #4a1a30, 0 0 12px rgba(255,90,74,0.85); padding: 4px 14px; background: linear-gradient(180deg, #ff5a8a 0%, #c73a3a 100%); border: 3px solid #4a1a30; border-radius: 999px; box-shadow: 0 4px 0 #4a1a30, 0 10px 18px rgba(0,0,0,0.30); } #pack-pressure-bar { width: 240px; height: 14px; background: rgba(74,26,48,0.65); border: 2px solid #4a1a30; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,0.20); } #pack-pressure-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #ff5a8a 0%, #ffd166 100%); transition: width 80ms linear; box-shadow: 0 0 12px rgba(255,209,102,0.85); } #pack-pressure-sub { font-size: 11px; color: #fff; font-weight: 700; text-shadow: 0 1px 0 #4a1a30; } /* ── SCORE POPUP — "+1 🎍" floats up from the temple after each delivery. Spawned by spawnScorePopup() in main.js, fades + drifts up via the keyframe below, removed after 1.4s. */ .score-popup { position: fixed; font-family: var(--pt-display); font-size: 28px; font-weight: 900; color: #2d5a18; text-shadow: 0 2px 0 #fff, 0 4px 6px rgba(0,0,0,0.35); pointer-events: none; z-index: 7; animation: score-float 1.4s ease-out forwards; } @keyframes score-float { 0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.2); opacity: 1; } 30% { transform: translate(-50%, -20px) scale(1.0); opacity: 1; } 100% { transform: translate(-50%, -90px) scale(0.85); opacity: 0; } } /* ── CAPTURE FLASH — full-screen pink vignette pulse when YOU get caught. Fades in fast, out slow. */ #capture-flash { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: 0; background: radial-gradient(120% 80% at 50% 50%, rgba(255,90,138,0) 0%, rgba(255,90,138,0.55) 60%, rgba(199,58,58,0.85) 100%); mix-blend-mode: multiply; } #capture-flash.show { animation: capture-flash-anim 0.9s ease-out forwards; } @keyframes capture-flash-anim { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } /* ── PARK-TOUR MINIMAP ───────────────────────────────────────── Circular minimap top-right showing player + items + wolves + islands. Drawn each frame in main.js drawMinimap(). The mask is a thick brown ring + cream sand backing for the cartoon park-map aesthetic. */ #minimap { position: fixed; top: 12px; right: 12px; width: 160px; height: 160px; border-radius: 50%; border: 4px solid #5b3a1a; background: rgba(255,246,220,0.85); box-shadow: 0 6px 0 #5b3a1a, 0 14px 24px rgba(0,0,0,0.30), inset 0 3px 0 rgba(255,255,255,0.65); pointer-events: none; z-index: 4; } @media (max-width: 720px) { #minimap { width: 110px; height: 110px; top: 60px; } } /* ── PANDA LAND SHINE FLASH ─────────────────────────────────── Full-screen warm golden vignette that triggers when the local player crosses into Panda Land. Pulses from invisible → bright → faded over ~1.2s so it reads as "you stepped into the safe zone". Soft radial gradient so the centre stays clear (you can still see your panda) while the edges glow gold. */ #panda-land-shine { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0; background: radial-gradient(120% 80% at 50% 50%, rgba(255,236,160,0) 0%, rgba(255,236,160,0.45) 60%, rgba(255,200,80,0.75) 100%); mix-blend-mode: screen; } #panda-land-shine.show { animation: panda-land-shine-anim 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes panda-land-shine-anim { 0% { opacity: 0; transform: scale(1.05); } 20% { opacity: 1; transform: scale(1.00); } 100% { opacity: 0; transform: scale(1.00); } } /* Marketplace tabs — highlighted underline */ .lm-tab.active{ color: #fff; border-bottom-color: #ffd166; text-shadow: 0 0 12px rgba(255,209,102,0.50); } /* ============================================================ CARTOON LOBBY OVERRIDE — Wolf Pandana paint pass. Loaded LAST so it wins over the legacy purple/dark glass theme above. Same selectors, new palette: sky-blue background, cream bamboo-paper card, chunky cartoon buttons with thick brown strokes and 4-6px drop shadows. ============================================================ */ :root { --wp-cream:#fff6dc; --wp-cream-2:#ffe5a3; --wp-bamboo-lt:#cfe898; /* light bamboo leaf */ --wp-bamboo:#7fdc6a; /* mid bamboo */ --wp-bamboo-leaf:#4a9028; /* deep leaf green */ --wp-bamboo-dk:#2d5a18; /* shadow bamboo */ --wp-sand:#f0dfb0; /* pale sand */ --wp-sand-2:#d9bf80; /* warm sand */ --wp-sand-dk:#a8884c; /* shadow sand */ --wp-brown:#5b3a1a; --wp-brown-mid:#8b5a2b; --wp-pink:#ffb3c8; --wp-pink-dk:#4a1a30; --wp-sky:#cfeaff; --wp-sky-2:#9ed9ff; --wp-shadow:rgba(91,58,26,0.30); /* Glossy highlight band — used as an overlay on cards / buttons. */ --wp-gloss-band: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0.00) 50%); } /* ── BACKGROUND: bamboo grove + warm sand (Wolf Pandana hero palette) Top: light bamboo-green canopy. Middle: warm sand horizon. Bottom: deep bamboo green forest floor. Plus a soft golden sunlight glow rising from the horizon line for that "afternoon in the grove" warmth. No more sky-blue. */ #lobby { background: /* Sunlight glow at the horizon */ radial-gradient(70% 55% at 50% 62%, rgba(255,232,150,0.55) 0%, rgba(255,232,150,0) 60%), /* Vertical bamboo+sand gradient */ linear-gradient(180deg, #cfe898 0%, /* light bamboo canopy */ #b8da7a 18%, #f0dfb0 42%, /* sand horizon band */ #d9bf80 55%, /* warm sand */ #88c84a 78%, #4a9028 100%) !important; font-family: var(--pt-body); overflow: hidden; } /* Animated cloud strip drifting left → right across the sky. Built as repeating radial gradients so we get 3 cloud blobs per tile, then a 60s linear translate animation. */ #lobby::before { content: ''; position: fixed; top: 6%; left: -50%; width: 200%; height: 110px; pointer-events: none; z-index: 0; background-image: radial-gradient(ellipse 80px 28px at 80px 50px, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 60%, transparent 80%), radial-gradient(ellipse 70px 26px at 320px 38px, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.45) 60%, transparent 80%), radial-gradient(ellipse 95px 30px at 580px 56px, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.40) 60%, transparent 80%), radial-gradient(ellipse 60px 22px at 820px 44px, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.35) 60%, transparent 80%); background-repeat: repeat-x; background-size: 1100px 110px; animation: lobby-cloud-drift 120s linear infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); } @keyframes lobby-cloud-drift { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } } /* Bamboo silhouettes peeking up from the bottom — gentle sway. */ #lobby::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 38vh; pointer-events: none; z-index: 0; background-image: /* Bamboo stalks (vertical stripes) */ repeating-linear-gradient(90deg, transparent 0px, transparent 78px, rgba(74,144,40,0.55) 78px, rgba(74,144,40,0.65) 86px, transparent 86px, transparent 132px, rgba(45,90,24,0.50) 132px, rgba(45,90,24,0.60) 142px, transparent 142px, transparent 198px, rgba(74,144,40,0.50) 198px, rgba(74,144,40,0.60) 208px, transparent 208px, transparent 260px), /* Soft hill base */ radial-gradient(120% 80% at 50% 100%, rgba(60,140,40,0.85) 0%, rgba(60,140,40,0.55) 40%, transparent 70%); background-position: 0 bottom, 0 0; background-repeat: repeat-x, no-repeat; background-size: 260px 100%, 100% 100%; transform-origin: bottom center; animation: lobby-bamboo-sway 6s ease-in-out infinite alternate; } @keyframes lobby-bamboo-sway { 0% { transform: skewX(-0.5deg) translateX(-4px); } 100% { transform: skewX(0.5deg) translateX(4px); } } /* Floating bamboo leaves drifting across the lobby. Pure CSS layer: we attach two .lobby-leaf elements (added by JS) with looping keyframes; this rule sets the base look. */ /* .lobby-leaf / @keyframes lobby-leaf-fall REMOVED (2026-08-17) — see removeLobbyLeaves() in main.js. The drifting emoji were never torn down when a match started, so the compositor re-blended six animated, drop-shadowed layers over the WebGL canvas every frame. */ /* Subtle pop-in animation for the lobby card. */ #lobby-card { animation: lobby-card-in 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes lobby-card-in { 0% { transform: translateY(20px) scale(0.96); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* ── LOBBY CARD: glossy cream-sand bamboo paper ───────────────── Multi-layer background: sand gradient base + a baked-in top-down gloss highlight. NO pseudo-element decoration (those previously clipped the card's scrollable content) — the gloss is now part of the static background gradient stack so nothing covers the lobby queue / ready button. */ #lobby-card { background: /* Top-down gloss highlight band */ linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 18%, rgba(255,255,255,0.00) 38%), /* Soft corner sheen at top-left for depth */ radial-gradient(60% 40% at 25% 8%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 70%), /* Sand paper base */ linear-gradient(180deg, #fff7df 0%, #fff 28%, var(--wp-sand) 70%, #ffe19a 100%) !important; border: 4px solid var(--wp-bamboo-dk) !important; border-radius: 28px !important; box-shadow: 0 10px 0 var(--wp-bamboo-dk), 0 28px 60px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.40) inset, inset 0 4px 0 rgba(255,255,255,0.90), inset 0 -2px 0 rgba(74,144,40,0.25) !important; color: var(--wp-brown); position: relative; z-index: 1; /* NO overflow: hidden — that broke the lobby scroll body. */ } #lobby-card h1 { font-family: var(--pt-display); color: var(--wp-bamboo-dk) !important; font-weight: 900 !important; letter-spacing: 0.01em !important; text-shadow: 0 2px 0 rgba(255,255,255,0.65), 0 4px 0 rgba(91,58,26,0.15); } .lobby-tagline { color: var(--wp-brown) !important; font-weight: 600 !important; font-style: normal !important; } /* Back-home pill — cartoon. */ #back-home { background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%) !important; color: var(--wp-brown) !important; border: 3px solid var(--wp-brown) !important; font-weight: 800 !important; box-shadow: 0 4px 0 var(--wp-brown), 0 10px 18px rgba(0,0,0,0.25) !important; backdrop-filter: none !important; } #back-home:hover { transform: translateY(-1px); filter: brightness(1.05); } /* Connect status pill — cartoon. */ #connect-status { background: var(--wp-cream) !important; color: var(--wp-brown) !important; border: 2px solid var(--wp-brown) !important; font-weight: 800 !important; letter-spacing: 0.05em !important; } #connect-status.ok { background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important; color: var(--wp-bamboo-dk) !important; border-color: var(--wp-bamboo-dk) !important; } #connect-status.err { background: linear-gradient(180deg, #ffd9e6 0%, var(--wp-pink) 100%) !important; color: var(--wp-pink-dk) !important; border-color: var(--wp-pink-dk) !important; } /* Name input — paper card style. */ #my-name { background: #fff !important; color: var(--wp-brown) !important; border: 3px solid var(--wp-brown) !important; border-radius: 14px !important; font-weight: 700 !important; box-shadow: inset 0 2px 0 rgba(91,58,26,0.10); } #my-name::placeholder { color: rgba(91,58,26,0.45); } #my-name:focus { border-color: var(--wp-bamboo-dk) !important; outline: none; } /* Slot tiles — cream tabs with brown trim. */ .slot { background: var(--wp-cream) !important; border: 3px solid var(--wp-brown) !important; border-radius: 14px !important; color: var(--wp-brown) !important; font-weight: 700 !important; box-shadow: 0 3px 0 var(--wp-brown), inset 0 2px 0 rgba(255,255,255,0.55); } .slot.taken { background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important; border-color: var(--wp-bamboo-dk) !important; color: var(--wp-bamboo-dk) !important; box-shadow: 0 3px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.55) !important; } .slot.you { background: linear-gradient(180deg, #ffe98a 0%, #ffc23a 100%) !important; border-color: #a05f08 !important; color: #4a2a05 !important; box-shadow: 0 3px 0 #a05f08, inset 0 2px 0 rgba(255,255,255,0.55) !important; } .slot.ai { background: var(--wp-cream-2) !important; color: var(--wp-brown-mid) !important; } .slot.taken.ready { border-color: var(--wp-bamboo-dk) !important; box-shadow: 0 0 0 3px rgba(45,90,24,0.40) inset, 0 3px 0 var(--wp-bamboo-dk) !important; } /* GO / READY / QUEUE / WATCH-LIVE buttons — chunky GLOSSY bamboo green primaries. Lacquered finish with a top highlight band. */ #go-btn, .ready-btn, .queue-btn, .unqueue-btn, .watch-live-btn { background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--wp-bamboo-lt) 0%, var(--wp-bamboo) 55%, var(--wp-bamboo-leaf) 100%) !important; color: #143612 !important; border: 3px solid var(--wp-bamboo-dk) !important; border-radius: 999px !important; padding: 12px 26px !important; font-family: var(--pt-display); font-weight: 900 !important; letter-spacing: 0.05em !important; box-shadow: 0 5px 0 var(--wp-bamboo-dk), 0 14px 22px rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.85), inset 0 -3px 0 rgba(45,90,24,0.40) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.55); transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 90ms; } #go-btn:hover, .ready-btn:hover, .queue-btn:hover, .unqueue-btn:hover, .watch-live-btn:hover { filter: brightness(1.05); transform: translateY(-2px); } #go-btn:active, .ready-btn:active, .queue-btn:active, .unqueue-btn:active, .watch-live-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wp-brown), 0 6px 12px rgba(0,0,0,0.30), inset 0 3px 0 rgba(255,255,255,0.55) !important; } #go-btn:disabled { background: #e8e2cf !important; color: var(--wp-brown-mid) !important; opacity: 0.6; box-shadow: 0 2px 0 var(--wp-brown-mid), inset 0 2px 0 rgba(255,255,255,0.40) !important; cursor: not-allowed; transform: none !important; } .ready-btn.ready { background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important; border-color: var(--wp-bamboo-dk) !important; color: var(--wp-bamboo-dk) !important; box-shadow: 0 5px 0 var(--wp-bamboo-dk), 0 14px 22px rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.65) !important; } .unqueue-btn { background: linear-gradient(180deg, #ffd9e6 0%, var(--wp-pink) 100%) !important; border-color: var(--wp-pink-dk) !important; color: var(--wp-pink-dk) !important; box-shadow: 0 5px 0 var(--wp-pink-dk), 0 14px 22px rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.55) !important; } .watch-live-btn { background: linear-gradient(180deg, #cfeaff 0%, var(--wp-sky-2) 100%) !important; border-color: #1f5a8a !important; color: #0a3055 !important; box-shadow: 0 5px 0 #1f5a8a, 0 14px 22px rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.55) !important; } /* Role / sub buttons — same cartoon framing, smaller. */ .role-btn { background: var(--wp-cream) !important; color: var(--wp-brown) !important; border: 2.5px solid var(--wp-brown) !important; border-radius: 999px !important; font-weight: 800 !important; padding: 7px 14px !important; box-shadow: 0 3px 0 var(--wp-brown), inset 0 2px 0 rgba(255,255,255,0.55) !important; } .role-btn:hover { background: linear-gradient(180deg, #d8f4c6 0%, var(--wp-bamboo) 100%) !important; border-color: var(--wp-bamboo-dk) !important; color: var(--wp-bamboo-dk) !important; } .role-btn.active { background: linear-gradient(180deg, var(--wp-bamboo) 0%, var(--wp-bamboo-leaf) 100%) !important; border-color: var(--wp-bamboo-dk) !important; color: #fff !important; } /* Sub / main section heads — chunky bamboo-leaf strip. */ .section-head { background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%); border-bottom: 3px solid var(--wp-brown); } .section-head h3, #sub-section h3, #main-section h3, #sub-section .section-head h3, #main-section .section-head h3 { font-family: var(--pt-display) !important; color: var(--wp-bamboo-dk) !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.55); } .section-blurb { color: var(--wp-brown); font-weight: 500; } .section-icon { filter: drop-shadow(0 2px 4px rgba(91,58,26,0.30)); } .section-count { background: var(--wp-cream) !important; color: var(--wp-brown) !important; border: 2px solid var(--wp-brown) !important; font-weight: 900 !important; box-shadow: 0 2px 0 var(--wp-brown); } /* Sub / main sections — glossy sand paper panels inside the card. */ #sub-section, #main-section { background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 30%), linear-gradient(180deg, var(--wp-sand) 0%, #fff2c8 50%, var(--wp-sand) 100%) !important; border: 3px solid var(--wp-bamboo-dk) !important; border-radius: 18px !important; box-shadow: 0 4px 0 var(--wp-bamboo-dk), 0 12px 24px rgba(0,0,0,0.18), inset 0 3px 0 rgba(255,255,255,0.80), inset 0 -2px 0 rgba(74,144,40,0.20) !important; overflow: hidden; } /* Lobby clocks. */ #sub-match-clock, #countdown-wrap { background: var(--wp-cream) !important; border: 2.5px solid var(--wp-brown) !important; color: var(--wp-brown) !important; border-radius: 14px !important; box-shadow: 0 3px 0 var(--wp-brown), inset 0 2px 0 rgba(255,255,255,0.65); } .clock-time, #countdown-num { color: var(--wp-bamboo-dk) !important; font-family: var(--pt-display) !important; } /* Auth / profile cards in the lobby. Override the inline styles by restating with higher specificity + !important. */ #pt-auth { background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%) !important; border: 3px solid var(--wp-brown) !important; border-radius: 18px !important; box-shadow: 0 4px 0 var(--wp-brown); } #pt-auth b { color: var(--wp-brown) !important; } #pt-auth div { color: var(--wp-brown) !important; } #pt-auth-sub { color: var(--wp-brown-mid) !important; } #pt-auth-btn { background: linear-gradient(180deg, var(--wp-bamboo) 0%, var(--wp-bamboo-leaf) 100%) !important; color: #fff !important; font-weight: 900 !important; border: 2.5px solid var(--wp-bamboo-dk) !important; box-shadow: 0 4px 0 var(--wp-bamboo-dk) !important; } #pt-profile-panel { background: linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%) !important; border: 3px solid var(--wp-brown) !important; border-radius: 18px !important; box-shadow: 0 4px 0 var(--wp-brown); } #pt-profile-name, #pt-profile-credits { color: var(--wp-brown) !important; } #pt-profile-panel div { color: var(--wp-brown) !important; } /* Queue list rows — cream pills. */ #sub-queue-list li, .queue-row { background: var(--wp-cream); border: 2px solid var(--wp-brown); color: var(--wp-brown); border-radius: 12px; font-weight: 700; box-shadow: 0 2px 0 var(--wp-brown); } .queue-empty { color: var(--wp-brown-mid); font-style: italic; } /* Overlay (end-of-match popup) — bamboo paper too. */ #overlay { background: radial-gradient(80% 60% at 50% 0%, rgba(127,220,106,0.40) 0%, rgba(207,234,255,0.85) 100%) !important; } #overlay-card { background: linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%) !important; border: 4px solid var(--wp-brown) !important; border-radius: 28px !important; box-shadow: 0 10px 0 var(--wp-brown), 0 28px 60px rgba(0,0,0,0.30), inset 0 4px 0 rgba(255,255,255,0.85) !important; color: var(--wp-brown); } #overlay-card h1 { font-family: var(--pt-display); color: var(--wp-bamboo-dk) !important; font-weight: 900 !important; text-shadow: 0 2px 0 rgba(255,255,255,0.65); } #overlay-card p { color: var(--wp-brown) !important; } #overlay-btn { background: linear-gradient(180deg, var(--wp-cream) 0%, var(--wp-cream-2) 100%) !important; color: var(--wp-brown) !important; border: 3px solid var(--wp-brown) !important; border-radius: 999px !important; font-family: var(--pt-display); font-weight: 900 !important; letter-spacing: 0.05em !important; box-shadow: 0 5px 0 var(--wp-brown), 0 14px 22px rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.65) !important; } #overlay-btn:hover { filter: brightness(1.05); transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════════════ LOBBY REDESIGN — BAMBOO GROVE THEME (2026-05) Hero banner + sign-in card + status pills, all tuned to match the cream/sand bamboo overlay. Replaces the old plain h1 + cyan boxes that clashed with the warm cream lobby card. ═══════════════════════════════════════════════════════════════════ */ /* ─── HERO BANNER ─────────────────────────────────────────────────── */ .wp-hero{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-4px -4px 18px; padding:18px 22px; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 60%), linear-gradient(90deg, #cfe898 0%, #fff6dc 50%, #cfe898 100%); border:3px solid var(--wp-bamboo-dk); border-radius:22px; box-shadow: inset 0 3px 0 rgba(255,255,255,0.7), inset 0 -2px 0 rgba(74,144,40,0.30), 0 6px 0 var(--wp-bamboo-dk), 0 16px 32px -10px rgba(0,0,0,0.25); } .wp-hero::before, .wp-hero::after{ content:''; position:absolute; left:0; right:0; height:4px; background:repeating-linear-gradient(90deg, var(--wp-bamboo-dk) 0px, var(--wp-bamboo-dk) 12px, transparent 12px, transparent 22px); opacity:0.35; } .wp-hero::before{ top:10px; } .wp-hero::after { bottom:10px; } .wp-hero-side{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; } .wp-hero-side .wp-hero-emoji{ font-size:46px; line-height:1; filter: drop-shadow(0 4px 6px rgba(91,58,26,0.40)); animation: wp-hero-bob 3.2s ease-in-out infinite; } .wp-hero-side .wp-hero-leaf{ font-size:18px; opacity:0.85; animation: wp-hero-spin 8s linear infinite; } .wp-hero-side-l .wp-hero-emoji{ transform:rotate(-6deg); } .wp-hero-side-r .wp-hero-emoji{ transform:rotate(6deg); animation-delay:-1.6s; } @keyframes wp-hero-bob{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-6px) rotate(-3deg); } } .wp-hero-side-r .wp-hero-emoji{ animation-name: wp-hero-bob-r; } @keyframes wp-hero-bob-r{ 0%,100%{ transform:translateY(0) rotate(6deg); } 50% { transform:translateY(-6px) rotate(3deg); } } @keyframes wp-hero-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } } .wp-hero-core{ flex:1 1 auto; text-align:center; min-width:0; } .wp-hero-title{ font-family:var(--pt-display); font-weight:900; font-size:clamp(28px, 5vw, 42px); line-height:1; color:var(--wp-brown); letter-spacing:-0.01em; text-shadow: 0 2px 0 rgba(255,255,255,0.8), 0 4px 0 var(--wp-bamboo-lt), 0 6px 12px rgba(91,58,26,0.25); margin:2px 0 6px; } .wp-hero-sub{ font-size:13px; color:#5b4a30; font-style:italic; margin:0 0 12px; line-height:1.4; } .wp-hero-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; } /* Status pill — recolors itself when class flips (live/match/offline). */ .wp-mode-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; background:rgba(255,255,255,0.65); border:2px solid var(--wp-bamboo-dk); border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:0.04em; color:var(--wp-brown); text-transform:uppercase; box-shadow:0 2px 0 rgba(74,144,40,0.25); } .wp-mode-pill-info{ background:rgba(255,246,220,0.85); text-transform:none; letter-spacing:0.01em; font-weight:700; font-size:11px; } /* Keep the connection-status colours feeding through the old #connect-status id classes (.ok / .err / .warn) — re-skin them as bamboo pills. */ #connect-status.ok{ background:linear-gradient(180deg, #b8da7a, #88c84a); border-color:var(--wp-bamboo-dk); color:#1a3a05; box-shadow:0 2px 0 var(--wp-bamboo-dk); } #connect-status.err{ background:linear-gradient(180deg, #ff8a8a, #d44848); border-color:#7a1c1c; color:#fff; box-shadow:0 2px 0 #7a1c1c; } #connect-status.warn{ background:linear-gradient(180deg, #ffd166, #f59e0b); border-color:#7a4d10; color:#3a2a08; box-shadow:0 2px 0 #7a4d10; } /* ─── PRIVATE-ROOM BANNER + PUBLIC-LOBBY ROOM ACTIONS ─────────── */ .wp-room-banner{ margin:14px 0 8px; padding:12px 14px; background:linear-gradient(180deg, #fff8e1 0%, #ffe5a3 100%); border:2.5px solid #a86d00; border-radius:14px; box-shadow:0 4px 0 #a86d00, inset 0 2px 0 rgba(255,255,255,0.7); color:#5b3206; font-weight:700; } .wp-room-banner .wp-room-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .wp-room-lonely{ margin-top:10px; padding:8px 12px; background:rgba(255,255,255,0.55); border:1.5px dashed #a86d00; border-radius:10px; font-size:12.5px; line-height:1.5; color:#5b3206; font-style:italic; } .wp-room-qr-box{ margin-top:10px; padding:8px; background:rgba(255,255,255,0.65); border:1.5px solid #a86d00; border-radius:12px; display:flex; flex-direction:column; align-items:center; } .wp-room-banner .wp-room-pill{ display:inline-flex; align-items:center; padding:4px 12px; background:#a86d00; color:#fff; border-radius:999px; font-size:11.5px; letter-spacing:0.08em; font-weight:800; text-transform:uppercase; } .wp-room-banner .wp-room-code{ font-family:var(--pt-display); font-size:22px; font-weight:900; color:#5b3206; letter-spacing:0.15em; background:#fff; padding:4px 14px; border:2px dashed #a86d00; border-radius:10px; } .wp-room-banner .wp-room-btn{ display:inline-flex; align-items:center; padding:7px 14px; background:#fff; color:#5b3206; border:2px solid #a86d00; border-radius:10px; font:inherit; font-weight:800; font-size:12.5px; text-decoration:none; cursor:pointer; box-shadow:0 3px 0 #a86d00; transition:transform 0.12s ease; } .wp-room-banner .wp-room-btn:hover{ transform:translateY(-1px); } .wp-room-banner .wp-room-btn-leave{ background:rgba(255,255,255,0.65); margin-left:auto; } .wp-room-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0 8px; padding:10px 14px; background:rgba(255,255,255,0.55); border:2px dashed var(--wp-brown-mid); border-radius:14px; color:var(--wp-brown); } .wp-room-create-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%); color:#1a3a05; border:2px solid var(--wp-bamboo-dk); border-radius:12px; box-shadow:0 4px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.35); transition:transform 0.12s ease; } .wp-room-create-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.40); } .wp-room-create-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.30); } .wp-room-join-form{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; } .wp-room-join-label{ font-size:12.5px; font-weight:700; color:var(--wp-brown); } .wp-room-join-input{ width:110px; padding:7px 10px; font:inherit; font-family:var(--pt-display); font-weight:700; font-size:15px; letter-spacing:0.12em; text-transform:uppercase; background:#fff; color:var(--wp-brown); border:2px solid var(--wp-brown-mid); border-radius:10px; outline:none; } .wp-room-join-input.wp-room-join-err{ border-color:#dc2626; animation:wp-room-shake 0.18s linear 3; } @keyframes wp-room-shake{ 0%,100%{ transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } } .wp-room-join-btn{ padding:7px 14px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; background:var(--wp-brown); color:#fff; border:2px solid var(--wp-brown); border-radius:10px; box-shadow:0 3px 0 var(--wp-brown); } .wp-room-join-btn:hover{ filter:brightness(1.05); } @media (max-width: 640px){ .wp-room-banner{ flex-direction:column; align-items:flex-start; } .wp-room-banner .wp-room-btn-leave{ margin-left:0; width:100%; justify-content:center; } .wp-room-actions{ flex-direction:column; align-items:stretch; } .wp-room-join-form{ margin-left:0; flex-wrap:wrap; } .wp-room-join-input{ flex:1 1 80px; } } /* ─── SIGN-IN / AUTH CARD (cream bamboo) ─────────────────────────── */ .wp-auth-card{ display:flex; align-items:center; gap:12px; margin:14px 0; padding:12px 14px; background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, #fff7df 0%, #ffe8b3 100%); border:2.5px solid var(--wp-brown-mid); border-radius:14px; box-shadow: 0 4px 0 var(--wp-brown-mid), inset 0 2px 0 rgba(255,255,255,0.7); } .wp-auth-icon{ font-size:22px; line-height:1; flex:none; } .wp-auth-text{ flex:1; font-size:13px; line-height:1.4; color:var(--wp-brown); } .wp-auth-text b{ display:block; color:var(--wp-brown); font-size:13.5px; } .wp-auth-text #pt-auth-sub{ display:block; margin-top:3px; font-size:11.5px; color:#5e4a2e; font-weight:500; } .wp-auth-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; font-weight:800; font-size:13px; background:linear-gradient(180deg, #7fdc6a 0%, #4a9028 100%); color:#fff; text-decoration:none; border:2px solid var(--wp-bamboo-dk); border-radius:12px; box-shadow: 0 4px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.35); transition:transform 0.12s ease; white-space:nowrap; } .wp-auth-btn:hover{ transform:translateY(-2px); box-shadow: 0 6px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.40); } .wp-auth-btn:active{ transform:translateY(1px); box-shadow: 0 2px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.30); } /* ─── PROFILE CARD (cream bamboo, replaces cyan) ─────────────────── */ .wp-profile-card{ margin:14px 0; padding:14px; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, #fff7df 0%, #ffe8b3 100%); border:2.5px solid var(--wp-bamboo-dk); border-radius:16px; box-shadow: 0 4px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.7); color:var(--wp-brown); } .wp-profile-row{ display:flex; align-items:center; gap:14px; } .wp-profile-avatar{ flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%); border:2.5px solid var(--wp-bamboo-dk); box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), 0 3px 0 var(--wp-bamboo-dk); } .wp-profile-meta{ flex:1; min-width:0; } .wp-profile-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .wp-profile-meta b{ color:var(--wp-brown); font-size:15px; } .wp-profile-sub{ font-size:11.5px; color:#5e4a2e; margin-top:3px; font-weight:600; } .wp-profile-tag{ padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:0.5px; border:1.5px solid; } .wp-profile-tag-admin{ background:#ffd166; color:#5b3206; border-color:#a86d00; } .wp-profile-tag-priority{ background:rgba(255,209,102,0.30); color:#7a4d10; border-color:#a86d00; } .wp-profile-supporter{ text-align:right; flex:none; } .wp-profile-supporter-label{ font-size:10px; color:#5e4a2e; letter-spacing:0.6px; font-weight:800; } .wp-profile-supporter-amt{ font-size:14px; font-weight:800; color:#a86d00; margin-top:2px; } .wp-profile-supporter-tier{ margin-top:6px; } /* Supporter badge — colour ramps with tier. Wanderer (t0) shows plain helper text; t1–t5 get progressively bolder treatments. */ .wp-supporter-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11.5px; font-weight:800; letter-spacing:0.4px; border-radius:999px; border:1.5px solid; } .wp-supporter-badge.t1{ background:rgba(132,204,22,0.20); color:#365314; border-color:#365314; } .wp-supporter-badge.t2{ background:rgba(34,197,94,0.20); color:#166534; border-color:#166534; } .wp-supporter-badge.t3{ background:rgba(217,169,58,0.30); color:#7a4d10; border-color:#7a4d10; } .wp-supporter-badge.t4{ background:rgba(132,204,22,0.36); color:#1a2e05; border-color:#365314; } .wp-supporter-badge.t5{ background:linear-gradient(135deg, #facc15 0%, #f59e0b 100%); color:#3a2208; border-color:#a86d00; box-shadow:0 2px 0 #a86d00; } .wp-profile-bottom{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:2px dashed rgba(91,58,26,0.30); flex-wrap:wrap; } .wp-profile-bottom-label{ font-size:10.5px; color:#5e4a2e; letter-spacing:0.6px; font-weight:800; } .wp-profile-scarf-chip{ padding:4px 12px; background:rgba(255,255,255,0.75); border:2px solid var(--wp-brown-mid); border-radius:10px; font-size:12px; font-weight:700; color:var(--wp-brown); } .wp-profile-action{ padding:6px 12px; font-family:inherit; font-size:12px; font-weight:800; border-radius:10px; text-decoration:none; cursor:pointer; border:2px solid; transition:transform 0.12s ease; } .wp-profile-action:hover{ transform:translateY(-1px); } .wp-profile-action:active{ transform:translateY(1px); } .wp-profile-action-donate{ background:linear-gradient(180deg, #ff8a8a 0%, #e11d48 100%); color:#fff; border-color:#9e1029; box-shadow:0 3px 0 #9e1029; } .wp-profile-action-acct{ background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%); color:#1a3a05; border-color:var(--wp-bamboo-dk); box-shadow:0 3px 0 var(--wp-bamboo-dk); } .wp-profile-action-signout{ background:rgba(255,255,255,0.65); color:var(--wp-brown); border-color:var(--wp-brown-mid); box-shadow:0 3px 0 var(--wp-brown-mid); } /* ─── Mobile tuning ─────────────────────────────────────────────── */ @media (max-width: 640px){ .wp-hero{ padding:14px; gap:10px; } .wp-hero-side .wp-hero-emoji{ font-size:36px; } .wp-hero-side .wp-hero-leaf{ display:none; } .wp-hero-title{ font-size:26px; } .wp-hero-sub{ font-size:12px; } .wp-auth-card{ flex-wrap:wrap; } .wp-auth-btn{ width:100%; justify-content:center; } .wp-profile-row{ flex-wrap:wrap; } .wp-profile-supporter{ width:100%; text-align:left; } .wp-profile-bottom .wp-profile-action{ flex:1; text-align:center; } } /* ─── POST-MATCH REMATCH-IN-PRIVATE-ROOM CTA (WP overlay) ──────── */ .overlay-rematch{ margin-top:18px; padding-top:14px; border-top:2px dashed rgba(91,58,26,0.30); display:flex; flex-direction:column; gap:10px; align-items:center; } .overlay-rematch-btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 18px; font:inherit; font-weight:800; font-size:13.5px; cursor:pointer; background:linear-gradient(180deg, #fff8e1 0%, #ffe5a3 100%); color:#5b3206; border:2px solid #a86d00; border-radius:12px; box-shadow:0 4px 0 #a86d00; transition:transform 0.12s ease; } .overlay-rematch-btn:hover{ transform:translateY(-1px); } .overlay-rematch-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 #a86d00; } .overlay-rematch-share{ padding:10px; width:100%; background:rgba(255,255,255,0.55); border:1.5px solid #a86d00; border-radius:12px; } .overlay-rematch-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:center; } .overlay-rematch-code{ font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:20px; font-weight:900; letter-spacing:0.15em; color:#5b3206; background:#fff; padding:4px 12px; border:2px dashed #a86d00; border-radius:10px; } .overlay-rematch-hint{ font-size:11.5px; color:#5b3206; font-style:italic; margin-top:6px; text-align:center; line-height:1.45; } @media (max-width: 640px){ .overlay-rematch-row{ flex-direction:column; align-items:stretch; } } /* ─── CUSTOM LOBBIES BROWSER (public lobby only, WP) ─────────────── */ .wp-custom-lobbies{ margin:14px 0 8px; padding:12px 14px; background:rgba(255,255,255,0.55); border:2.5px solid var(--wp-bamboo-dk); border-radius:14px; box-shadow:0 4px 0 var(--wp-bamboo-dk), inset 0 2px 0 rgba(255,255,255,0.7); color:var(--wp-brown); } .wp-custom-lobbies-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; } .wp-custom-lobbies-title{ font-family:var(--pt-display); font-weight:900; font-size:15px; color:var(--wp-brown); } .wp-custom-lobbies-count{ padding:3px 10px; background:rgba(34,197,94,0.20); color:#0f3a14; border:1.5px solid #166534; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.08em; } .wp-custom-lobbies-refresh{ margin-left:auto; padding:5px 10px; font:inherit; font-size:13px; cursor:pointer; background:rgba(255,255,255,0.65); color:var(--wp-brown); border:1.5px solid var(--wp-brown-mid); border-radius:8px; } .wp-custom-lobbies-list{ display:flex; flex-direction:column; gap:6px; } .wp-custom-lobbies-empty{ padding:14px; background:rgba(255,255,255,0.40); border:1.5px dashed var(--wp-brown-mid); border-radius:10px; font-size:12.5px; font-style:italic; color:var(--wp-brown); text-align:center; } .wp-cl-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; background:rgba(255,255,255,0.75); border:1.5px solid var(--wp-brown-mid); border-radius:10px; } .wp-cl-row-code{ font-family:var(--pt-display); font-weight:900; font-size:16px; letter-spacing:0.12em; color:var(--wp-brown); padding:2px 10px; background:#fff; border:1.5px dashed #a86d00; border-radius:8px; } .wp-cl-row-host{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:#3a2e1e; } .wp-cl-row-size{ padding:2px 8px; font-size:11.5px; font-weight:800; background:rgba(34,197,94,0.18); color:#0f3a14; border:1.5px solid #166534; border-radius:999px; } .wp-cl-row-status{ padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:0.06em; border-radius:999px; border:1.5px solid; } .wp-cl-row-status-open { background:rgba(132,204,22,0.22); color:#365314; border-color:#365314; } .wp-cl-row-status-match { background:rgba(245,158,11,0.20); color:#7a4d10; border-color:#a86d00; } .wp-cl-row-join{ padding:6px 14px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; background:linear-gradient(180deg, #cfe898 0%, #88c84a 100%); color:#1a3a05; border:2px solid var(--wp-bamboo-dk); border-radius:10px; box-shadow:0 3px 0 var(--wp-bamboo-dk); } .wp-cl-row-join:hover{ transform:translateY(-1px); } .wp-custom-lobbies-foot{ margin-top:10px; padding-top:8px; border-top:1px dashed rgba(91,58,26,0.30); font-size:11.5px; color:#5e4a2e; font-style:italic; line-height:1.4; } /* Host's '📢 List publicly' toggle inside the private-room banner. */ .wp-room-listed-row{ margin-top:10px; padding:8px 10px; background:rgba(255,255,255,0.55); border:1.5px dashed #a86d00; border-radius:10px; } .wp-room-listed-label{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; color:#5b3206; } .wp-room-listed-label input{ margin-top:3px; flex:none; } .wp-room-listed-text{ font-size:12.5px; line-height:1.45; } .wp-room-listed-text b{ display:block; } .wp-room-listed-text .wp-room-listed-sub{ display:block; font-weight:500; font-size:11.5px; color:#5e4a2e; margin-top:2px; } @media (max-width: 640px){ .wp-cl-row{ flex-direction:column; align-items:stretch; } .wp-cl-row-join{ width:100%; } } /* ── 4-tab lobby nav — vertical sidebar (Main / Private / Loadout / Library) ── */ .lobby-shell{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; } .lobby-panes-wrap{ flex:1 1 0; min-width:0; } .lobby-tabs{ display:flex; gap:6px; padding:8px; background:linear-gradient(180deg, rgba(255,250,235,0.65), rgba(255,236,200,0.55)); border:1.5px solid rgba(91,58,26,0.22); border-radius:14px; box-shadow:inset 0 1px 2px rgba(91,58,26,0.10); } .lobby-tabs.lobby-tabs-vertical{ flex-direction:column; width:184px; flex:none; position:sticky; top:14px; } .lobby-tabs.lobby-tabs-vertical .lobby-tab{ flex:none; justify-content:flex-start; text-align:left; } .lobby-tabs:not(.lobby-tabs-vertical){ flex-wrap:wrap; margin:14px 0 10px; } /* Parked tabs must actually disappear. The `display:inline-flex` below out-ranks the UA's `[hidden]{display:none}`, so a tab marked hidden would still paint — it looks clickable but the guard in wpSetLobbyTab bounces it back to Main Lobby, reading as a dead button. */ .lobby-tabs .lobby-tab[hidden]{ display:none; } .lobby-tabs .lobby-tab{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; font:inherit; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:800; font-size:13px; letter-spacing:0.04em; color:#5b3206; background:transparent; border:1.5px solid transparent; border-radius:10px; cursor:pointer; transition:background-color 0.15s ease, color 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease; } .lobby-tabs .lobby-tab:hover{ background:rgba(255,255,255,0.55); color:#3a2e1e; } .lobby-tabs .lobby-tab.active{ background:linear-gradient(180deg, #fff8e6 0%, #ffe6a8 100%); color:#3a2e1e; border-color:#a86d00; box-shadow:0 3px 0 #a86d00, inset 0 1px 0 rgba(255,255,255,0.6); transform:translateY(-1px); } .lobby-tabs .lobby-tab .lt-emoji{ font-size:16px; line-height:1; } .lobby-tabs .lobby-tab .lt-text{ white-space:nowrap; } /* Mobile: compress text, keep emojis prominent. */ @media (max-width: 560px){ .lobby-tabs .lobby-tab{ padding:8px 10px; font-size:11.5px; gap:5px; } .lobby-tabs .lobby-tab .lt-emoji{ font-size:15px; } } @media (max-width: 380px){ .lobby-tabs .lobby-tab .lt-text{ display:none; } .lobby-tabs .lobby-tab{ padding:9px 10px; } } /* Mobile: sidebar collapses to a horizontal scroll above the panes */ @media (max-width: 720px){ .lobby-shell{ flex-direction:column; gap:8px; } .lobby-tabs.lobby-tabs-vertical{ flex-direction:row; width:auto; position:static; overflow-x:auto; } .lobby-tabs.lobby-tabs-vertical .lobby-tab{ flex:1 1 auto; justify-content:center; text-align:center; } } /* Panes — only the .active one is shown. Animation is a subtle fade so tab swaps don't feel jarring. */ .lobby-pane{ display:none; animation:wpPaneFade 0.18s ease-out; } .lobby-pane.active{ display:block; } @keyframes wpPaneFade{ from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;} } .lobby-pane-intro{ margin-bottom:12px; padding:10px 14px; background:rgba(255,255,255,0.55); border:1.5px solid rgba(91,58,26,0.18); border-left:4px solid #a86d00; border-radius:10px; color:#3a2e1e; } .lobby-pane-intro .lobby-pane-h{ font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-size:15px; font-weight:800; letter-spacing:0.02em; margin:0 0 4px; color:#7a4d10; } .lobby-pane-intro .lobby-pane-sub{ margin:0; font-size:12.5px; line-height:1.5; color:#5e4a2e; } /* ── Main-pane "you're in a private room" redirect notice ────────── Shown in the Main Lobby tab when the user is connected to a private room. The Main tab is PUBLIC ONLY — all private gameplay UI lives in the Private Lobby tab. */ .ml-private-redirect{ text-align:center; padding:48px 24px; background:linear-gradient(180deg, rgba(255,250,235,0.85) 0%, rgba(255,236,200,0.75) 100%); border:1.5px solid rgba(91,58,26,0.25); border-radius:14px; } .ml-private-redirect-icon{ font-size:48px; line-height:1; margin-bottom:14px; filter:drop-shadow(0 4px 8px rgba(168,109,0,0.30)); } .ml-private-redirect-h{ font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:800; font-size:1.35rem; letter-spacing:-0.01em; color:#7a4d10; margin:0 0 10px; } .ml-private-redirect-h code{ display:inline-block; margin-left:6px; padding:1px 10px; font-family:inherit; font-weight:900; font-size:1rem; letter-spacing:0.18em; color:#3a2e1e; background:#fff; border:1.5px dashed #a86d00; border-radius:6px; vertical-align:middle; font-variant-numeric:tabular-nums; } .ml-private-redirect-sub{ font-size:13.5px; line-height:1.55; color:#5e4a2e; margin:0 auto 22px; max-width:480px; } .ml-private-redirect-sub b{ color:#7a4d10; } .ml-private-redirect-cta{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; } .ml-private-redirect-go{ padding:12px 22px; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:900; font-size:14px; letter-spacing:0.04em; color:#3a2410; background:linear-gradient(180deg, #ffd166 0%, #f59e0b 100%); border:1.5px solid #92400e; border-radius:10px; cursor:pointer; box-shadow:0 4px 0 #92400e; transition:transform 0.10s ease; } .ml-private-redirect-go:hover{ transform:translateY(-1px); } .ml-private-redirect-leave{ padding:11px 18px; font-size:12.5px; font-weight:700; text-decoration:none; color:#5b3206; background:transparent; border:1px solid rgba(91,58,26,0.30); border-radius:10px; transition:color 0.15s ease, border-color 0.15s ease; } .ml-private-redirect-leave:hover{ color:#3a2e1e; border-color:#3a2e1e; } /* ── Private-mode action band (Ready/Start/Leave) ─────────────────── */ .ml-private-action-band{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; background:linear-gradient(180deg, rgba(255,209,102,0.10) 0%, rgba(255,250,235,0) 100%); border:1px solid rgba(91,58,26,0.22); border-radius:10px; } .ml-private-action-band #ready-btn-private{ flex:1 1 180px; } .ml-private-action-band .wp-private-start{ flex:1 1 200px; } .ml-private-action-band .wp-private-leave{ padding:10px 18px; font:inherit; font-weight:700; font-size:12.5px; text-decoration:none; color:#5b3206; background:transparent; border:1px solid rgba(91,58,26,0.30); border-radius:10px; transition:color 0.15s ease, border-color 0.15s ease; } .ml-private-action-band .wp-private-leave:hover{ color:#3a2e1e; border-color:#3a2e1e; } /* ── Mode-hint banner — sits at the top of the Main Lobby pane so the public/private split is unmistakable on first glance. */ .ml-mode-hint{ display:flex; align-items:center; gap:12px; padding:11px 14px; margin-bottom:14px; border-radius:12px; font-size:13px; line-height:1.5; } .ml-mode-hint .ml-mode-hint-icon{ font-size:22px; line-height:1; flex:none; } .ml-mode-hint .ml-mode-hint-text{ flex:1; color:#3a2e1e; } .ml-mode-hint .ml-mode-hint-text b{ color:#15803d; } .ml-mode-hint-public{ background:linear-gradient(180deg, rgba(132,204,22,0.20) 0%, rgba(34,197,94,0.10) 100%); border:1.5px solid #166534; border-left:4px solid #166534; } .ml-mode-hint-private{ background:linear-gradient(180deg, rgba(255,209,102,0.30) 0%, rgba(245,158,11,0.18) 100%); border:1.5px solid #a86d00; border-left:4px solid #a86d00; } .ml-mode-hint-private .ml-mode-hint-text b{ color:#7a4d10; } /* ── Main Lobby — public/private mode swap (Survive List → Setup) ─ */ /* Mode-aware UI uses [data-mode-only="public|private"] sprinkled through the Main + Private panes; #lobby-body[data-mode] is the single source of truth, set by paintWpMainMode. */ #lobby-body[data-mode="public"] [data-mode-only="private"] { display:none; } #lobby-body[data-mode="private"] [data-mode-only="public"] { display:none; } .ml-queue-inline{ margin-top:14px; padding:12px 14px; background:rgba(255,250,235,0.55); border:1.5px solid rgba(91,58,26,0.18); border-radius:12px; } .ml-queue-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:800; font-size:13px; color:#7a4d10; letter-spacing:0.04em; } .ml-queue-head .ml-queue-title{ flex:1; } .ml-private-browser{ padding:14px 16px; background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,250,235,0.55)); border:1.5px solid rgba(91,58,26,0.22); border-radius:14px; } .ml-setup{ padding:14px 16px; background:linear-gradient(180deg, rgba(255,236,200,0.55), rgba(255,250,235,0.45)); border:1.5px solid #a86d00; border-left:4px solid #a86d00; border-radius:12px; } .ml-setup .section-head .section-icon{ font-size:22px; } .ml-setup-code{ display:inline-block; margin-left:8px; padding:2px 12px; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:900; font-size:18px; letter-spacing:0.18em; background:#fff; color:#3a2e1e; border:1.5px dashed #a86d00; border-radius:8px; font-variant-numeric:tabular-nums; } .ml-setup .section-count{ background:rgba(255,209,102,0.30); color:#7a4d10; border:1.5px solid #a86d00; font-weight:800; } .ml-joined{ padding:14px 16px; background:rgba(255,250,235,0.60); border:1.5px solid rgba(91,58,26,0.22); border-radius:12px; } .ml-joined .section-head .section-icon{ font-size:20px; } /* The WP lobby card sits on a cream/sand background. The global .lobby-player-row is themed for dark backgrounds (light lavender text on near-black) — washes out completely against cream. Override to dark-on-light for EVERY lobby-player-row inside the WP card (covers both the Public Lobby seats in #main-section AND the Private Lobby's Joined Players panel in .ml-joined). */ #lobby-card .lobby-player-row{ background:#fff !important; border-color:rgba(91,58,26,0.18) !important; border-left-color:#a86d00 !important; color:#3a2e1e !important; opacity:1 !important; } #lobby-card .lobby-player-row .role-tag{ background:rgba(168,109,0,0.16) !important; color:#7a4d10 !important; } #lobby-card .lobby-player-row .nm{ color:#3a2e1e !important; font-weight:700; } #lobby-card .lobby-player-row .waiting-tag, #lobby-card .lobby-player-row .empty-tag{ color:#88909a !important; } #lobby-card .lobby-player-row .ready-tag{ color:#15803d !important; } #lobby-card .lobby-player-row .wp-ping-unknown{ color:#5e4a2e !important; } #lobby-card .lobby-player-row.empty{ background:rgba(255,255,255,0.55) !important; border-left-color:transparent !important; } #lobby-card .lobby-player-row.empty .nm{ color:#88909a !important; font-style:italic; font-weight:600; } #lobby-card .lobby-player-row.empty .role-tag{ background:rgba(91,58,26,0.10) !important; color:#88909a !important; } #lobby-card .lobby-player-row.you{ border-left-color:#ff8a3d !important; background:linear-gradient(180deg, rgba(255,138,61,0.12) 0%, #fff 100%) !important; } #lobby-card .lobby-player-row.taken{ border-left-color:#16a34a !important; } #lobby-card .lobby-player-row.murder-seat{ border-left-color:#9d174d !important; } #lobby-card .lobby-player-row.murder-seat .role-tag{ background:rgba(157,23,77,0.16) !important; color:#9d174d !important; } .ml-private-action-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; background:linear-gradient(180deg, rgba(132,204,22,0.16) 0%, rgba(34,197,94,0.10) 100%); border:1.5px solid #166534; border-radius:12px; } .wp-private-start{ flex:1 1 220px; padding:14px 22px; font:inherit; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:900; font-size:16px; letter-spacing:0.04em; color:#fff; cursor:pointer; background:linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a 100%); border:2px solid #166534; border-radius:12px; box-shadow:0 4px 0 #166534, 0 8px 18px -8px rgba(22,163,74,0.5); transition:transform 0.10s ease, box-shadow 0.15s ease; text-shadow:0 1px 1px rgba(0,0,0,0.20); } .wp-private-start:not(:disabled):hover{ transform:translateY(-1px); box-shadow:0 5px 0 #166534, 0 10px 22px -8px rgba(22,163,74,0.6); } .wp-private-start:disabled{ filter:grayscale(0.5); } .wp-private-leave{ padding:10px 16px; font:inherit; font-weight:700; font-size:13px; text-decoration:none; color:#5b3206; background:transparent; border:1px solid rgba(91,58,26,0.30); border-radius:10px; transition:color 0.15s ease, border-color 0.15s ease; } .wp-private-leave:hover{ color:#3a2e1e; border-color:#3a2e1e; } .ml-private-foot{ padding:10px 14px; font-size:12px; line-height:1.55; color:#5e4a2e; background:rgba(255,250,235,0.55); border:1px dashed rgba(91,58,26,0.22); border-radius:8px; } .ml-private-foot b{ color:#7a4d10; } .wp-cl-row-lock{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(132,204,22,0.22); border:1.5px solid #365314; font-size:14px; line-height:1; flex-shrink:0; } /* ── Ping latency badge + host kick + auto-kick panel ───────────── */ .wp-ping{ display:inline-block; margin-left:8px; padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:0.04em; border:1.5px solid; border-radius:999px; font-variant-numeric:tabular-nums; } .wp-ping-green { color:#0f3a14; background:rgba(34,197,94,0.18); border-color:#166534; } .wp-ping-amber { color:#7a4d10; background:rgba(245,158,11,0.20); border-color:#a86d00; } .wp-ping-red { color:#7a1d1d; background:rgba(239, 68, 68,0.18); border-color:#991b1b; } .wp-ping-unknown { color:#5e4a2e; background:rgba(91,58,26,0.10); border-color:rgba(91,58,26,0.45); } .wp-row-kick{ margin-left:6px; padding:2px 9px; font:inherit; font-weight:900; font-size:12px; cursor:pointer; color:#fff; background:linear-gradient(180deg,#ef4444 0%,#b91c1c 100%); border:1.5px solid #7f1d1d; border-radius:999px; box-shadow:0 2px 0 #7f1d1d; } .wp-row-kick:hover{ transform:translateY(-1px); } .wp-room-autokick-row{ margin-top:10px; padding:10px 12px; background:rgba(255,250,235,0.65); border:1.5px dashed #b8350b; border-radius:10px; color:#5b3206; } .wp-room-autokick-head{ font-weight:900; font-size:13px; letter-spacing:0.02em; color:#7a1d1d; margin-bottom:6px; } .wp-room-autokick-input{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:#3a2e1e; } .wp-room-autokick-input input{ width:90px; padding:5px 8px; font:inherit; font-weight:800; background:#fff; color:#3a2e1e; border:1.5px solid #a86d00; border-radius:8px; font-variant-numeric:tabular-nums; } .wp-room-autokick-state{ margin-top:6px; font-size:11.5px; color:#5e4a2e; line-height:1.45; } /* "Skip the wait?" CTA — anyone in the Survive Queue can jump straight to a Public-Host Private Lobby instead of waiting. */ .queue-rail-private-cta{ display:flex; align-items:center; gap:10px; margin-top:8px; padding:9px 12px; font:inherit; color:#3a2e1e; background:linear-gradient(135deg, rgba(132,204,22,0.30) 0%, rgba(34,197,94,0.18) 100%); border:1.5px solid #166534; border-radius:10px; cursor:pointer; text-align:left; transition:transform 0.10s ease, background 0.15s ease; } .queue-rail-private-cta:hover{ transform:translateY(-1px); background:linear-gradient(135deg, rgba(132,204,22,0.40) 0%, rgba(34,197,94,0.25) 100%); } .queue-rail-private-cta .qrpc-emoji{ font-size:18px; line-height:1; flex:none; } .queue-rail-private-cta .qrpc-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:11.5px; line-height:1.35; } .queue-rail-private-cta .qrpc-text b{ color:#15803d; font-size:12px; } .queue-rail-private-cta .qrpc-sub{ color:#3a2e1e; font-weight:600; } .queue-rail-private-cta .qrpc-sub #queue-rail-private-count{ color:#fff; font-weight:900; background:#16a34a; padding:0 6px; border-radius:999px; font-variant-numeric:tabular-nums; } .queue-rail-private-cta .qrpc-arrow{ font-size:16px; color:#15803d; font-weight:900; flex:none; transition:transform 0.18s ease; } .queue-rail-private-cta:hover .qrpc-arrow{ transform:translateX(3px); } /* ── Lock / Unlock pill (room visibility) ───────────────────────── Red 🔒 LOCKED when code-only; green 🔓 PUBLIC HOST when listed. */ .wp-room-listed-head{ font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:900; font-size:13px; letter-spacing:0.02em; color:#7a4d10; margin-bottom:8px; } .wp-room-listed-row-body{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .lock-toggle{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 12px; font:inherit; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:900; font-size:13px; letter-spacing:0.10em; color:#fff; cursor:pointer; border:1.5px solid; border-radius:999px; transition:transform 0.10s ease, box-shadow 0.15s ease; text-shadow:0 1px 1px rgba(0,0,0,0.22); flex:none; } .lock-toggle:hover{ transform:translateY(-1px); } .lock-toggle .lock-toggle-icon{ font-size:16px; line-height:1; } .lock-toggle.locked{ background:linear-gradient(180deg, #fb7185 0%, #ef4444 60%, #b91c1c 100%); border-color:#7f1d1d; box-shadow:0 3px 0 #7f1d1d; } .lock-toggle.unlocked{ background:linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a 100%); border-color:#166534; box-shadow:0 3px 0 #166534; } /* ON/OFF toggle pill (sits next to "Kick if ping > ___" input). Green when ON, red when OFF. The dot snaps left/right to make the toggle behaviour obvious at a glance. Click anywhere on the pill to flip — same hit area, same behaviour as a switch. */ .autokick-toggle{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 7px; font:inherit; font-family:var(--pt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight:900; font-size:12px; letter-spacing:0.08em; color:#fff; cursor:pointer; border:1.5px solid; border-radius:999px; transition:background 0.15s ease, border-color 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease; text-shadow:0 1px 1px rgba(0,0,0,0.20); } .autokick-toggle:hover{ transform:translateY(-1px); } .autokick-toggle .autokick-toggle-dot{ display:inline-block; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:inset 0 -1px 2px rgba(0,0,0,0.18); transition:transform 0.18s ease; } .autokick-toggle.on{ background:linear-gradient(180deg, #4ade80 0%, #22c55e 60%, #16a34a 100%); border-color:#166534; box-shadow:0 2px 0 #166534; } .autokick-toggle.on .autokick-toggle-dot{ transform:translateX(0); background:#fff; } .autokick-toggle.off{ background:linear-gradient(180deg, #fb7185 0%, #ef4444 60%, #b91c1c 100%); border-color:#7f1d1d; box-shadow:0 2px 0 #7f1d1d; } .autokick-toggle.off .autokick-toggle-dot{ background:#ffe5e5; } .autokick-toggle .autokick-toggle-label{ font-variant-numeric:tabular-nums; } /* Render wake / first-connect wait — looks like matchmaking, not a server error. */ .match-wait{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; padding-bottom:max(20px, env(safe-area-inset-bottom)); background:rgba(20,28,16,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto; } .match-wait.hidden{ display:none; } .match-wait-card{ position:relative; width:min(22rem, 100%); text-align:center; padding:36px 22px 24px; border-radius:28px; background:linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%); border:4px solid var(--wp-brown); box-shadow:0 10px 0 var(--wp-brown), 0 28px 60px rgba(0,0,0,0.30); color:var(--wp-brown); } .match-wait-close{ position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(90,70,40,0.10); color:var(--wp-brown); font-size:18px; line-height:1; cursor:pointer; pointer-events:auto; z-index:2; } .match-wait-close:hover{ background:rgba(90,70,40,0.18); } .match-wait-card h2{ margin:0 0 8px; font-size:clamp(1.1rem, 4.2vw, 1.35rem); font-weight:900; color:var(--wp-bamboo-dk); line-height:1.25; } .match-wait-card p{ margin:0; font-size:14px; line-height:1.5; color:var(--wp-brown); } .match-wait-spin{ width:36px; height:36px; margin:0 auto 16px; border:3px solid rgba(90,70,40,0.18); border-top-color:var(--wp-bamboo-dk); border-radius:50%; animation:match-wait-spin 0.8s linear infinite; } @keyframes match-wait-spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .match-wait-spin{ animation:none; border-top-color:rgba(90,70,40,0.18); background:var(--wp-bamboo-dk); } } /* ── Mobile reliability + accessibility pass ───────────────────── */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } canvas { touch-action: none; } /* The lobby is a normal scrolling document surface, not a game surface. */ #lobby, #lobby-card { touch-action: pan-y; -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */ overscroll-behavior: contain; /* don't hand the scroll to the page */ } /* Form controls and buttons inside the lobby must keep the browser's own tap handling — `manipulation` kills the 300ms double-tap delay without taking the tap itself away. */ #lobby button, #lobby a, #lobby input, #lobby select, #lobby textarea, #wp-play-gate button { touch-action: manipulation; } /* iOS refuses to focus / show a caret in a field that inherits `user-select: none`, and refuses to let you select the text you typed. Nothing in this sheet should ever apply it to a text input. */ #my-name, #lobby input, #lobby textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #sky-indicator { min-width: 0; width: min(360px, calc(100vw - 24px)); } #back-home { top: max(18px, env(safe-area-inset-top)) !important; left: max(18px, env(safe-area-inset-left)) !important; } #fs-btn { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); } #topbar { top: max(16px, env(safe-area-inset-top)); } #mobile-controls { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } #joystick { left: max(28px, env(safe-area-inset-left)); bottom: max(32px, env(safe-area-inset-bottom)); } #minimap { right: max(12px, env(safe-area-inset-right)); } .skill-btn { background-color: #d8c4ff; } .jump-btn { background-color: #bde8ff; } #pt-report-close { color: #fff; } @media (pointer: coarse), (max-width: 900px) { #mobile-controls { grid-template-columns: repeat(2, auto); gap: 8px; } .mobile-btn { width: 64px; height: 64px; font-size: 9.5px; border-width: 3px; } #joystick { width: 128px; height: 128px; } #joystick-stick { width: 54px; height: 54px; } } @media (max-width: 400px) and (pointer: coarse) { #mobile-controls { right: max(8px, env(safe-area-inset-right)); } .mobile-btn { width: 58px; height: 58px; font-size: 8.5px; } #joystick { left: max(10px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 112px; height: 112px; } #joystick-stick { width: 48px; height: 48px; } } @media (max-height: 500px) and (pointer: coarse) { #mobile-controls { grid-template-columns: repeat(3, auto); gap: 6px; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); } .mobile-btn { width: 54px; height: 54px; font-size: 8px; } #joystick { width: 108px; height: 108px; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); } #minimap { width: 96px; height: 96px; top: max(58px, calc(env(safe-area-inset-top) + 48px)); } #prompt { bottom: 18%; } } @media (prefers-reduced-motion: reduce) { #lobby::before, .lobby-leaf, #chase-flash { animation: none !important; backdrop-filter: none !important; } } .leave-confirm{ position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; padding:20px; padding-bottom:max(20px, env(safe-area-inset-bottom)); background:rgba(20,28,16,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .leave-confirm.hidden{ display:none; } .leave-confirm-card{ width:min(22rem, 100%); text-align:center; padding:28px 22px 22px; border-radius:28px; background:linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%); border:4px solid var(--wp-brown); box-shadow:0 10px 0 var(--wp-brown), 0 28px 60px rgba(0,0,0,0.30); color:var(--wp-brown); } .leave-confirm-card h2{ margin:0 0 8px; font-size:clamp(1.15rem, 4.2vw, 1.4rem); font-weight:900; color:var(--wp-bamboo-dk); } .leave-confirm-card p{ margin:0 0 20px; font-size:15px; line-height:1.5; } .leave-confirm-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .leave-confirm-actions button{ min-height:44px; min-width:8.5rem; padding:10px 16px; border-radius:999px; font-weight:800; cursor:pointer; } #leave-confirm-stay{ border:2px solid var(--wp-brown); background:var(--wp-cream); color:var(--wp-brown); } #leave-confirm-leave{ border:2px solid var(--wp-brown); background:var(--wp-bamboo-dk); color:#fff; } /* ── PRE-NAME GATE (#wp-login-card) ─────────────────────────────────── Sign-in CTA → "or play as guest" → display name + PLAY. Mirrors Bunny Harvest's opening screen. Hidden wholesale once a name is submitted. */ .wp-login-card{ margin:0 0 16px; padding:16px; border-radius:20px; border:3px solid var(--wp-brown); background:linear-gradient(180deg, #fff 0%, var(--wp-cream) 100%); box-shadow:0 5px 0 var(--wp-brown), 0 16px 34px rgba(0,0,0,0.14); } .wp-login-card.hidden{ display:none; } .wp-login-divider{ display:flex; align-items:center; gap:12px; margin:14px 0 12px; color:var(--wp-brown-mid); font-size:11.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; } .wp-login-divider::before, .wp-login-divider::after{ content:""; flex:1 1 0; height:2px; border-radius:2px; background:rgba(91,58,26,0.20); } .wp-login-row{ display:flex; gap:10px; align-items:stretch; } .wp-login-row #my-name{ flex:1 1 auto; width:auto; min-height:48px; padding:10px 16px; font-size:15px; } .wp-name-submit{ flex:0 0 auto; min-height:48px; min-width:7rem; padding:10px 20px; border-radius:14px; border:3px solid var(--wp-brown); background:var(--wp-bamboo-dk); color:#fff; font:inherit; font-size:15px; font-weight:900; letter-spacing:0.04em; cursor:pointer; box-shadow:0 4px 0 var(--wp-brown); transition:filter 0.15s ease, transform 0.1s ease; } .wp-name-submit:hover:not(:disabled){ filter:brightness(1.08); } .wp-name-submit:active:not(:disabled){ transform:translateY(2px); box-shadow:0 2px 0 var(--wp-brown); } .wp-name-submit:disabled{ opacity:0.45; cursor:not-allowed; } .wp-name-prompt{ margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--wp-brown-mid); } .wp-name-prompt a{ color:var(--wp-bamboo-dk); font-weight:800; } @media (max-width: 560px){ .wp-login-row{ flex-direction:column; } .wp-name-submit{ width:100%; } } /* The landscape-phone hero compaction that used to live here is now part of the COMPACT LOBBY block at the end of this file, which compacts the whole lobby (hero, tabs, seats, skill picker, queue) rather than the sign-in gate alone. */ /* ── HOW TO PLAY ────────────────────────────────────────────────────── The briefing that used to live on /mini-game.html. Scrolls inside its own card so the long version still works on a short landscape phone. */ .wp-mode-pill-howto{ border:2px solid var(--wp-brown); background:var(--wp-cream); color:var(--wp-brown); font:inherit; font-weight:800; cursor:pointer; } .wp-mode-pill-howto:hover{ background:#fff; } .wp-howto{ position:fixed; inset:0; z-index:230; display:flex; align-items:center; justify-content:center; padding:20px; padding-bottom:max(20px, env(safe-area-inset-bottom)); background:rgba(20,28,16,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .wp-howto.hidden{ display:none; } .wp-howto-card{ position:relative; width:min(34rem, 100%); max-height:min(84vh, 44rem); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:26px 24px 22px; border-radius:28px; background:linear-gradient(180deg, var(--wp-cream) 0%, #fff 50%, var(--wp-cream-2) 100%); border:4px solid var(--wp-brown); box-shadow:0 10px 0 var(--wp-brown), 0 28px 60px rgba(0,0,0,0.30); color:var(--wp-brown); } .wp-howto-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:999px; border:2px solid var(--wp-brown); background:var(--wp-cream); color:var(--wp-brown); font-size:15px; font-weight:900; line-height:1; cursor:pointer; } .wp-howto-close:hover{ background:#fff; } .wp-howto-card h2{ margin:0 0 10px; padding-right:44px; font-size:clamp(1.15rem, 4.2vw, 1.4rem); font-weight:900; color:var(--wp-bamboo-dk); } .wp-howto-card h3{ margin:18px 0 5px; font-size:14.5px; font-weight:900; color:var(--wp-bamboo-dk); } .wp-howto-card p{ margin:0 0 4px; font-size:14.5px; line-height:1.55; } .wp-howto-lede{ margin-bottom:2px; padding:10px 12px; border-radius:12px; background:rgba(127,220,106,0.16); border:1px solid rgba(127,220,106,0.4); } .wp-howto-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:7px 0; border-bottom:1px dashed rgba(90,62,38,0.22); font-size:14px; } .wp-howto-row:last-of-type{ border-bottom:none; } .wp-howto-row kbd{ display:inline-block; margin-left:3px; padding:2px 7px; border-radius:6px; border:1px solid var(--wp-brown); border-bottom-width:2px; background:#fff; font-size:12px; font-weight:800; } .wp-howto-foot{ margin-top:16px; padding:10px 12px; border-radius:12px; border-left:4px solid var(--wp-bamboo-dk); background:rgba(127,220,106,0.10); font-size:13.5px; } @media (max-width: 560px){ .wp-howto-card{ padding:22px 18px 18px; border-radius:22px; } .wp-howto-row{ flex-direction:column; align-items:flex-start; gap:3px; } } /* ── MATCH SKILL PICKER (Main Lobby, above PLAY NOW) ────────────────── One skill per match. Sits directly above the start button so the choice is made in the same glance as starting, with no extra navigation. Ported from Bunny Harvest, recoloured to the bamboo palette. */ .wp-skill-picker{ margin:14px 0 12px; padding:12px 14px; border-radius:16px; background:linear-gradient(180deg, rgba(184,232,144,0.16) 0%, rgba(255,255,255,0.35) 100%); border:2px solid rgba(91,58,26,0.22); } .wp-sp-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .wp-sp-title{ font-family:var(--pt-display, system-ui), system-ui, sans-serif; font-weight:900; font-size:14px; letter-spacing:0.02em; color:#3f2a12; } .wp-sp-sub{ font-size:11px; font-weight:700; color:#6d5334; letter-spacing:0.03em; } .wp-sp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } .wp-sp-card{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 8px; border-radius:14px; cursor:pointer; pointer-events:auto; background:rgba(255,255,255,0.78); border:2px solid rgba(91,58,26,0.18); color:#3f2a12; text-align:center; transition:border-color 0.15s ease, background 0.15s ease, transform 0.12s ease; } .wp-sp-card:hover{ border-color:rgba(91,58,26,0.45); transform:translateY(-1px); } .wp-sp-card.active{ border-color:#5b3a1a; background:#b8e890; box-shadow:0 0 0 2px rgba(184,232,144,0.55), 0 8px 18px -12px rgba(91,58,26,0.9); } .wp-sp-emoji{ font-size:20px; line-height:1; } .wp-sp-name{ font-family:var(--pt-display, system-ui), system-ui, sans-serif; font-weight:900; font-size:12px; letter-spacing:0.02em; } .wp-sp-desc{ font-size:10px; line-height:1.35; color:#6d5334; } @media (max-width:560px){ .wp-sp-grid{ gap:6px; } .wp-sp-card{ padding:8px 5px; } .wp-sp-desc{ display:none; } /* name + emoji carry it on small screens */ } /* ═══════════════════════════════════════════════════════════════════ COMPACT LOBBY — phones, portrait AND landscape (2026-08-27) The lobby was authored at desktop scale: on a landscape phone (844x390) the Main tab measured 1,739px of content against a 390px viewport, so PLAY NOW and the skill picker both sat four screens down. Nothing here changes the layout's structure — it only takes the desktop air out of it: smaller hero, tighter cards, the seat list and Survive Queue capped and scrolled inside themselves, and the skill picker reduced to emoji + name chips. Two conditions, one ruleset: narrow (portrait phone) OR short (landscape phone). Everything the superseded `max-height: 500px` block did is folded in here. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px), (max-height: 560px){ /* Card — the desktop 32px/28px padding is a fifth of a landscape viewport all by itself. */ #lobby-card{ padding:12px 12px 14px !important; border-radius:20px !important; border-width:3px !important; max-height:100vh; max-height:100dvh; } /* Hero — one line: title beside the status pills. The side emoji, the tagline and the dashed banner rules are decoration and go. */ .wp-hero{ margin:-2px -2px 10px !important; padding:8px 12px !important; gap:8px !important; border-radius:16px; border-width:2px; box-shadow:inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 var(--wp-bamboo-dk); } .wp-hero::before, .wp-hero::after{ display:none; } .wp-hero-side{ display:none !important; } .wp-hero-core{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 10px; } .wp-hero-title{ font-size:clamp(16px, 4.6vh, 22px) !important; margin:0 !important; text-shadow:0 2px 0 rgba(255,255,255,0.8); } .wp-hero-sub{ display:none !important; } .wp-hero-pills{ gap:5px !important; } .wp-hero-pills .wp-mode-pill{ padding:4px 9px !important; font-size:10px !important; border-width:1.5px; box-shadow:none; } /* Sign-in gate — the legal sub-line and the long "sign in once…" paragraph are both reachable from /mini-game.html. */ .wp-login-card{ padding:10px 12px; margin-bottom:8px; } .wp-login-divider{ margin:8px 0 7px; } .wp-name-prompt{ display:none; } .wp-auth-card{ margin:0 0 2px; padding:9px 11px; gap:9px; } .wp-auth-text #pt-auth-sub{ display:none !important; } .wp-auth-icon{ font-size:18px; } .wp-auth-btn{ padding:8px 13px; font-size:12.5px; } /* Profile card — one slim identity strip. The "shared wallet" line and the supporter column are informational; the name, the scarf and the two account actions are what anyone actually reaches for. */ .wp-profile-card{ margin:6px 0; padding:7px 9px; border-radius:13px; } .wp-profile-row{ gap:9px; } .wp-profile-avatar{ width:30px; height:30px; font-size:17px; border-width:2px; } .wp-profile-meta b{ font-size:13px; } .wp-profile-sub{ display:none; } .wp-profile-bottom{ margin-top:6px; padding-top:6px; gap:6px; } .wp-profile-bottom-label{ font-size:9.5px; } .wp-profile-scarf-chip{ padding:2px 8px; font-size:11px; border-width:1.5px; } .wp-profile-action{ padding:4px 10px; font-size:11px; } /* Tabs */ #lobby-body{ margin:8px 0 4px; } .lobby-shell{ gap:10px; margin-top:8px; } .lobby-tabs{ padding:5px; border-radius:11px; } .lobby-tabs.lobby-tabs-vertical{ width:136px; top:6px; } .lobby-tabs .lobby-tab{ padding:7px 10px; font-size:12px; gap:6px; } .lobby-tabs .lobby-tab .lt-emoji{ font-size:14px; } /* Main / private panes */ #main-section, .ml-private-browser, .ml-setup, .ml-joined{ padding:10px 11px; gap:7px; } .section-head{ margin-bottom:4px; } .section-head h3{ font-size:0.86rem; } .section-icon{ font-size:15px; } .section-count{ padding:1px 8px; font-size:10px; } .section-blurb{ font-size:10.5px; line-height:1.35; margin-bottom:6px; } /* Two lines of guidance, not five — the rest is in HOW TO PLAY. */ #main-section .section-blurb{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .role-note{ display:none; } /* Seats — a full roster is 6 rows plus the queue; cap it and let it scroll in place rather than pushing PLAY NOW off the screen. */ .lobby-player-list{ max-height:33vh; overflow-y:auto; gap:3px; } #lobby-card .lobby-player-row{ padding:5px 8px; font-size:11.5px; } .lobby-clock{ padding:6px 10px; font-size:11.5px; gap:6px; } /* Skill picker — emoji + name chips. The descriptions are the single biggest block on the tab (six paragraphs) and the same text is in HOW TO PLAY. */ .wp-skill-picker{ margin:8px 0 8px; padding:9px 10px; border-radius:13px; } .wp-sp-head{ margin-bottom:7px; gap:8px; } .wp-sp-title{ font-size:12.5px; } .wp-sp-sub{ font-size:10px; } .wp-sp-grid{ gap:6px; } .wp-sp-card{ padding:6px 3px; gap:1px; border-radius:11px; border-width:1.5px; } .wp-sp-emoji{ font-size:16px; } .wp-sp-name{ font-size:10px; line-height:1.15; } .wp-sp-desc{ display:none; } /* Actions */ .play-now-btn{ margin:8px 0 7px; padding:11px 20px; font-size:15px; } #lobby-body.wp-guest .play-now-btn{ margin:6px 0; padding:13px; font-size:16px; } .lobby-action-row{ gap:7px; } .lobby-action-row button, #go-btn, .ready-btn, .queue-btn, .unqueue-btn{ padding:8px 14px; font-size:12.5px; } /* Survive Queue — secondary to starting a match; it keeps its own scroll so it can never be the reason the tab is 1,700px tall. */ .ml-queue-inline{ margin-top:8px; padding:9px 10px; } .ml-queue-head{ margin-bottom:6px; font-size:12px; } #sub-queue-list{ max-height:22vh; overflow-y:auto; } #sub-match-clock{ padding:6px 9px; font-size:11.5px; } .sub-foot{ font-size:10px; line-height:1.35; } .queue-rail-private-cta{ padding:8px 10px; } } /* Priority order on a phone: the two controls that start a match — the skill picker and PLAY NOW — come first, then the roster and the queue. #main-section is a flex column, so this is `order` only; the DOM keeps its authored reading order (seats, then picker, then play), which is the right one on a desktop where all of it is on screen at once. Without this, PLAY NOW sat ~410px down a 390px viewport — permanently one scroll below the fold. */ @media (max-width: 720px), (max-height: 560px){ #main-section .wp-skill-picker{ order:1; } #main-section .play-now-btn{ order:2; } #main-section .lobby-action-row{ order:3; } #main-section #ready-timer-row{ order:4; } #main-section #countdown-wrap{ order:5; } #main-section #lobby-player-list{ order:6; } #main-section #sub-section{ order:7; } } /* Landscape phone only — the viewport is wide enough for the skill picker to be one row of six, which is the whole choice in one glance and saves a further ~120px. The blurb goes: it is 40px of prose above the fold, and HOW TO PLAY carries the same explanation. */ @media (max-height: 560px) and (min-width: 620px){ .wp-sp-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } } @media (max-height: 560px){ #main-section .section-blurb{ display:none; } .wp-hero{ padding:6px 12px !important; } .wp-hero-title{ font-size:clamp(15px, 4.2vh, 20px) !important; } } /* …and wide enough to fold the profile card's second row up beside the first, which is a whole 34px row of the first screen. */ @media (max-height: 560px) and (min-width: 620px){ .wp-profile-card{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .wp-profile-row{ flex:1 1 220px; } .wp-profile-bottom{ flex:0 1 auto; width:auto; margin:0; padding:0; border-top:none; } }