/* Ghommayda UI: blocky, pixel-edged HUD over the 3D scene; light/dark panels for menus. */ :root { --bg: #e9eef8; --panel: rgba(233, 238, 248, 0.92); --card: #ffffff; --card-2: #dfe7f7; --text: #17203a; --muted: #55607e; --line: rgba(20, 30, 70, 0.2); --accent: #ffb400; --accent-ink: #2a1d00; --accent-edge: #c68600; --seek: #ff5d4f; --hide: #3fd17f; --pink: #ff6fa5; --glass: rgba(16, 20, 38, 0.78); --glass-line: rgba(255, 255, 255, 0.18); --glass-text: #fffaf0; --glass-muted: #c3cae6; --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; --pix: 'Press Start 2P', 'Cairo', monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #10152a; --panel: rgba(16, 21, 42, 0.92); --card: #1e2748; --card-2: #2b3763; --text: #fff6e0; --muted: #b4bddf; --line: rgba(255, 255, 255, 0.16); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #10152a; --panel: rgba(16, 21, 42, 0.92); --card: #1e2748; --card-2: #2b3763; --text: #fff6e0; --muted: #b4bddf; --line: rgba(255, 255, 255, 0.16); color-scheme: dark; } [hidden] { display: none !important; } html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); overflow-x: auto; overflow-y: auto; touch-action: pan-x pan-y; } #game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } #vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 62%, rgba(10, 14, 36, 0.3) 100%); } /* ---------- HUD ---------- */ #hud { position: fixed; top: 0; left: 0; right: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; color: var(--glass-text); } .hud-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 720px; } .role, .wallet { flex: 1 1 0; min-width: 0; max-width: 260px; display: flex; align-items: center; gap: 10px; background: var(--glass); border: 3px solid #05060e; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--glass-line); padding: 8px 12px; min-height: 56px; box-sizing: border-box; } .role-ico, .coin-ico { flex: none; width: 38px; height: 38px; border-radius: 4px; display: grid; place-items: center; } .role-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; } .role-txt, .wal-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .role-txt b, .wal-txt b { font-size: 19px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .role-txt small, .wal-txt small { font-size: 12px; color: var(--glass-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .role.seeker { border-color: #7a1d16; box-shadow: inset 0 0 0 2px var(--seek); } .role.seeker .role-ico { background: var(--seek); color: #fff; } .role.hider { border-color: #14522f; box-shadow: inset 0 0 0 2px var(--hide); } .role.hider .role-ico { background: var(--hide); color: #06251a; } .role.watch .role-ico { background: #6d68a0; color: #fff; } /* the coin icon is a square gold block */ .coin-ico { background: linear-gradient(135deg, #fff2b0 0%, #ffd23a 45%, #c88a00 100%); box-shadow: inset -4px -4px 0 rgba(120, 70, 0, 0.4), inset 3px 3px 0 rgba(255, 255, 255, 0.5); } .wal-txt b { font-variant-numeric: tabular-nums; } .timer { flex: none; position: relative; width: 84px; height: 84px; display: grid; place-items: center; background: var(--glass); border-radius: 50%; border: 3px solid #05060e; box-shadow: inset 0 0 0 2px var(--glass-line); } .timer svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); } .timer circle { fill: none; stroke-width: 6; } .timer .trk { stroke: rgba(255, 255, 255, 0.14); } .timer .bar { stroke: var(--accent); stroke-linecap: butt; stroke-dasharray: 213.6; stroke-dashoffset: 0; transition: stroke 0.3s; } .timer.count .bar { stroke: #6fd0ff; } .timer.low .bar { stroke: var(--seek); } .timer b { font-family: var(--pix); font-size: 22px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 #000; } .timer small { position: absolute; bottom: 9px; font-size: 10px; color: var(--glass-muted); letter-spacing: 0.04em; } #roster { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 560px; } .chip { display: flex; align-items: center; gap: 6px; background: var(--glass); border: 3px solid #05060e; border-radius: 6px; padding: 3px 10px 3px 4px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; } .chip .av { width: 28px; height: 28px; border: 2px solid #fff; box-sizing: border-box; image-rendering: pixelated; border-radius: 2px; background: var(--c); } .chip .ct { color: #ffd45a; } .chip.seek { box-shadow: inset 0 0 0 2px var(--seek); } .chip.seek .av { box-shadow: 0 0 0 2px var(--seek); } .chip.out { opacity: 0.45; text-decoration: line-through; } .chip.me { box-shadow: inset 0 0 0 2px var(--accent); } .chip .bot { font-size: 10px; color: var(--glass-muted); font-weight: 500; } .roundline { font-family: var(--pix), var(--font); font-size: 10px; color: var(--glass-text); background: var(--glass); border: 3px solid #05060e; border-radius: 6px; padding: 4px 12px; } #objective { font-size: 15px; font-weight: 700; color: var(--glass-text); background: var(--glass); border: 3px solid #05060e; border-radius: 6px; padding: 4px 16px; text-align: center; max-width: 92%; } #objective.urgent { color: #ffd98a; box-shadow: 0 0 0 3px #ffb020; animation: urgent 0.8s steps(2) infinite alternate; } @keyframes urgent { to { box-shadow: 0 0 0 6px rgba(255, 176, 32, 0.4); } } .chip.chase { box-shadow: inset 0 0 0 2px #ffb020; } .chip.safe { box-shadow: inset 0 0 0 2px var(--hide); } /* after the first seconds the HUD shrinks to icons so the playing field stays clear */ #hud, .role, .wallet, .chip, .timer { transition: all 0.35s ease; } #hud.compact { gap: 4px; } #hud.compact .hud-row { justify-content: space-between; max-width: 460px; } #hud.compact .role, #hud.compact .wallet { flex: 0 0 auto; padding: 5px; min-height: 0; background: rgba(16, 20, 38, 0.55); } #hud.compact .role-txt, #hud.compact .wal-txt small, #hud.compact .roundline, #hud.compact #phaseLbl { display: none; } #hud.compact .wallet { padding-inline-end: 12px; } #hud.compact .timer { width: 62px; height: 62px; background: rgba(16, 20, 38, 0.55); } #hud.compact .timer b { font-size: 16px; } #hud.compact #roster { gap: 6px; } #hud.compact .chip { padding: 2px; background: transparent; border: 0; box-shadow: none; } #hud.compact .chip span:not(.ct) { display: none; } #hud.compact .chip .ct { position: absolute; bottom: -4px; inset-inline-end: -4px; font-size: 11px; background: rgba(16, 20, 38, 0.9); border-radius: 3px; padding: 0 4px; } #hud.compact .chip.chase .av { box-shadow: 0 0 0 3px #ffb020; } #hud.compact .chip.safe .av { box-shadow: 0 0 0 3px var(--hide); } #hud.compact .chip.out { opacity: 0.4; } #hud.compact #objective:not(.urgent) { display: none; } #hud.compact ~ #toasts { top: calc(120px + env(safe-area-inset-top, 0px)); } /* markers at the screen edge pointing to players who are out of view */ #pointers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; } .ptr { position: absolute; left: 0; top: 0; width: 0; height: 0; } .ptr b { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 4px; background: var(--c); border: 3px solid #fff; box-sizing: border-box; color: #fff; font-family: var(--pix); font-size: 14px; font-weight: 400; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); } .ptr .tri { position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 11px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-top: -8px; transform-origin: 0 8px; } #fps { position: fixed; left: 8px; bottom: 6px; font: 600 11px/1 monospace; color: #fff; opacity: 0.6; pointer-events: none; } #muteBtn { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); z-index: 5; width: 48px; height: 48px; border-radius: 6px; border: 3px solid #05060e; background: var(--glass); color: var(--glass-text); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px var(--glass-line); } #muteBtn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; } #muteBtn[aria-pressed="true"] { color: var(--seek); } #muteBtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* ---------- Toasts, banner, power-up ---------- */ #toasts { position: fixed; left: 0; right: 0; top: calc(176px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { background: var(--glass); color: var(--glass-text); border: 3px solid #05060e; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--glass-line); padding: 8px 18px; font-weight: 700; font-size: 16px; animation: toast-in 0.28s steps(5) both; } .toast.good { box-shadow: inset 0 0 0 2px var(--hide); } .toast.warn { box-shadow: inset 0 0 0 2px var(--seek); } .toast.info { box-shadow: inset 0 0 0 2px var(--accent); } .toast.out { animation: toast-out 0.3s steps(4) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } } #banner { position: fixed; left: 0; right: 0; top: 36%; text-align: center; font-size: clamp(30px, 7vw, 54px); font-weight: 900; color: #fff; text-shadow: 4px 4px 0 #1b1630, 0 0 24px rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.94); transition: opacity 0.25s, transform 0.25s; pointer-events: none; padding: 0 16px; } #banner.show { opacity: 1; transform: none; } #powerup { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(170px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; background: var(--glass); color: var(--glass-text); border: 3px solid #05060e; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 6px; padding: 6px 16px; font-weight: 900; font-size: 16px; pointer-events: none; } #powerup i { display: block; width: 100%; height: 8px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } #powerup b { display: block; height: 100%; width: 100%; background: var(--accent); } #blind { position: fixed; inset: 0; background: #0b0918; color: #fff6e6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 16px; } #blindnum { font-family: var(--pix); font-size: clamp(90px, 28vw, 200px); color: var(--accent); line-height: 1; text-shadow: 6px 6px 0 #5a3a00; } #blind p { margin: 0; color: var(--glass-muted); font-size: 18px; } /* ---------- Panels ---------- */ .panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; touch-action: pan-y; } .sheet { width: min(620px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; position: relative; z-index: 1; } .eyebrow { font-family: var(--pix); letter-spacing: 0.3em; font-size: 12px; font-weight: 400; color: var(--pink); } h1 { margin: 0; font-size: clamp(72px, 20vw, 140px); line-height: 1.1; font-weight: 900; color: var(--accent); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 rgba(0, 0, 0, 0.3); } h2 { margin: 0; font-size: clamp(28px, 6vw, 42px); font-weight: 900; color: var(--accent); text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25); } .lead { margin: 0; max-width: 36ch; color: var(--muted); font-size: 17px; line-height: 1.6; } .label { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; } .hint { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.4em; } .conn { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 3px solid #05060e; border-radius: 6px; padding: 4px 16px; font-weight: 700; font-size: 14px; } .conn .dot { width: 10px; height: 10px; background: var(--muted); } .conn.on .dot { background: var(--hide); box-shadow: 0 0 0 4px rgba(63, 209, 127, 0.3); } #slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; } .slot { font: inherit; color: var(--text); cursor: pointer; text-align: center; background: var(--card); border: 3px solid #05060e; border-radius: 6px; padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #05060e; transition: transform 0.12s steps(3); } .slot .face { width: 100%; max-width: 54px; aspect-ratio: 1; image-rendering: pixelated; border: 3px solid #05060e; box-sizing: border-box; background: var(--c); } .slot b { font-size: 13px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .slot:hover:not(:disabled) { transform: translateY(-4px); } .slot[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 #05060e; background: var(--card-2); animation: pick 1.1s steps(2) infinite alternate; } .slot:disabled { opacity: 0.4; cursor: not-allowed; } .slot:focus-visible, .cta:focus-visible, .ghost:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @keyframes pick { to { transform: translateY(-5px); } } /* Minecraft-style green button with a moving shine */ .cta { position: relative; overflow: hidden; font: inherit; font-weight: 900; font-size: 22px; cursor: pointer; color: #fff; text-shadow: 2px 2px 0 #1b3a0c; background: #5aa02c; border: 4px solid #0e1d07; border-radius: 3px; padding: 12px 44px; min-height: 58px; box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 6px 0 #0e1d07; } .cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: shine 3.2s ease-in-out infinite; } .cta:active { transform: translateY(4px); box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 2px 0 #0e1d07; } .cta:disabled { filter: grayscale(0.7) brightness(0.8); cursor: default; transform: none; } .cta:disabled::after { display: none; } @keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } } .ghost { font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); background: var(--card); border: 3px solid #05060e; border-radius: 4px; padding: 6px 18px; cursor: pointer; } .help { color: var(--muted); font-size: 14px; line-height: 1.7; text-align: start; max-width: 50ch; } .help summary { cursor: pointer; font-weight: 700; text-align: center; } .help ul { margin: 8px 0 0; padding-inline-start: 20px; } .help b { color: var(--text); } .ghost-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .table { width: 100%; display: flex; flex-direction: column; gap: 6px; } .row { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr auto; gap: 8px; align-items: center; background: var(--card); border: 3px solid #05060e; border-radius: 6px; padding: 6px 12px; text-align: start; font-size: 15px; font-variant-numeric: tabular-nums; } .row.me { box-shadow: inset 0 0 0 2px var(--accent); } .row.win { background: var(--card-2); } .row .pts { font-weight: 900; color: var(--accent-edge); font-size: 18px; } .row .nm { font-weight: 900; display: flex; align-items: center; gap: 8px; } .row .dot { width: 24px; height: 24px; image-rendering: pixelated; border: 2px solid #05060e; box-sizing: border-box; } .row.head { background: none; border-color: transparent; color: var(--muted); font-size: 12px; padding-block: 0; } .cd { color: var(--muted); font-weight: 700; font-size: 15px; } /* ---------- Home page: a sunny sky with clouds and floating blocks ---------- */ .menu { --text: #ffffff; --muted: #e1ecff; --card: rgba(18, 26, 58, 0.8); --card-2: rgba(50, 70, 140, 0.92); --line: rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, rgba(40, 90, 190, 0.1) 0%, rgba(14, 24, 56, 0.28) 50%, rgba(8, 14, 36, 0.78) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; } .menu .lead, .menu .hint, .menu .label, .menu .help, .menu .help summary { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } .menu .ghost { color: #fff; background: rgba(18, 26, 58, 0.8); } .menu .help b { color: #ffe27a; } .sky-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .cloud { position: absolute; left: 0; width: 70px; height: 26px; background: #fff; opacity: 0.88; box-shadow: 28px -16px 0 #fff, 56px -4px 0 #fff, 84px 6px 0 #fff, -22px 6px 0 #fff, 28px 8px 0 #fff; animation: drift 70s linear infinite; } .cloud.c1 { top: 9%; animation-duration: 80s; } .cloud.c2 { top: 26%; transform: scale(1.4); animation-duration: 110s; animation-delay: -45s; opacity: 0.7; } .cloud.c3 { top: 62%; animation-duration: 95s; animation-delay: -20s; opacity: 0.6; transform: scale(0.8); } @keyframes drift { from { translate: -200px 0; } to { translate: calc(100vw + 100px) 0; } } .blk { position: absolute; width: 34px; height: 34px; box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.28), inset 6px 6px 0 rgba(255, 255, 255, 0.28), 0 0 0 3px rgba(0, 0, 0, 0.55); animation: bob 5s ease-in-out infinite; } .blk.b1 { left: 7%; top: 40%; background: #5fa83a; } .blk.b2 { left: 88%; top: 33%; background: #8a5a33; animation-delay: -1.2s; width: 28px; height: 28px; } .blk.b3 { left: 14%; top: 74%; background: #9a9aa2; animation-delay: -2.4s; width: 40px; height: 40px; } .blk.b4 { left: 80%; top: 70%; background: #d33a2a; animation-delay: -3.1s; } .blk.b5 { left: 48%; top: 6%; background: #d8b24a; animation-delay: -0.6s; width: 26px; height: 26px; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(12deg); } } .fl { position: absolute; font-size: 30px; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.45)); animation: bob 4.2s ease-in-out infinite; } .fl.f1 { left: 20%; top: 22%; } .fl.f2 { left: 76%; top: 52%; animation-delay: -1.5s; } .fl.f3 { left: 6%; top: 58%; animation-delay: -2.6s; } .fl.f4 { left: 90%; top: 16%; animation-delay: -0.8s; } .title-wrap { position: relative; } .menu h1 { animation: bob 3.4s ease-in-out infinite; } .menu .eyebrow { background: linear-gradient(90deg, #ff6fa5, #ffd45a, #7dff6a, #4aa3ff, #ff6fa5); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue 4s linear infinite; } @keyframes hue { to { background-position: 300% 0; } } .splash { position: absolute; left: -4%; bottom: 4%; transform: rotate(-12deg); white-space: nowrap; color: #ffeb3b; font-weight: 900; font-size: 20px; text-shadow: 3px 3px 0 #3d3200; z-index: 2; } .splash.pulse { animation: splash 0.9s ease-in-out infinite alternate; } @keyframes splash { from { transform: rotate(-12deg) scale(0.92); } to { transform: rotate(-12deg) scale(1.1); } } /* ---------- Intro dialog ---------- */ .modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(8, 10, 24, 0.68); touch-action: pan-y; overflow-y: auto; } .modal .box { width: min(420px, 100%); margin: auto; background: var(--card); color: var(--text); border: 4px solid #05060e; border-radius: 6px; padding: 20px 18px 16px; box-shadow: inset 0 0 0 3px var(--line), 0 8px 0 #05060e; display: flex; flex-direction: column; gap: 12px; } .modal h3 { margin: 0; font-size: 26px; font-weight: 900; color: var(--accent-edge); text-align: center; } .modal .goal { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.55; text-align: center; } .modal .steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); } .modal .steps b { color: var(--text); } .modal .steps .g { color: #1f9d63; font-weight: 700; } .modal .ctl { margin: 0; font-size: 13px; color: var(--muted); text-align: center; } .modal .skip { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; } .modal .skip input { width: 18px; height: 18px; accent-color: var(--accent); } .modal .cta { align-self: center; font-size: 20px; padding: 10px 32px; min-height: 52px; } /* ---------- Touch ---------- */ #touch-controls { position: fixed; inset: 0; pointer-events: none; } #joy-zone { position: absolute; left: 0; top: 22%; bottom: 0; width: 44%; pointer-events: auto; touch-action: none; } #look-zone { position: absolute; right: 0; top: 18%; bottom: 0; left: 44%; pointer-events: auto; touch-action: none; } #joystick { position: absolute; left: calc(26px + env(safe-area-inset-left, 0px)); bottom: calc(44px + env(safe-area-inset-bottom, 0px)); width: 132px; height: 132px; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.16); border: 3px solid rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; } #joystick.active { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); } #joystick svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.45); stroke: none; } #joystick svg circle { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; } #joystick svg .inner { stroke-dasharray: 2 5; stroke-width: 1.2; } #stick { position: relative; width: 58px; height: 58px; border-radius: 6px; background: rgba(255, 255, 255, 0.75); box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.3); } /* round jump button: gold disc, an outer ring that dims while you are in the air, and an arrow */ #jump-btn { position: absolute; right: calc(28px + env(safe-area-inset-right, 0px)); bottom: calc(48px + env(safe-area-inset-bottom, 0px)); width: 112px; height: 112px; border-radius: 50%; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font: inherit; font-weight: 900; font-size: 17px; color: var(--accent-ink); background: radial-gradient(circle at 35% 28%, #ffd96a, var(--accent) 62%, #e69c00); box-shadow: 0 6px 0 var(--accent-edge), 0 12px 22px rgba(0, 0, 0, 0.32); pointer-events: auto; touch-action: none; } #jump-btn .ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); pointer-events: none; transition: opacity 0.15s; } #jump-btn .ring circle { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0.85; } #jump-btn.air .ring { opacity: 0.25; } #jump-btn .arrow { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: square; stroke-linejoin: miter; } #jump-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent-edge), 0 6px 14px rgba(0, 0, 0, 0.3); } #jump-btn:active .ring circle { stroke-width: 5; } /* crawl button sits left of the jump button */ #sneak-btn { position: absolute; right: calc(160px + env(safe-area-inset-right, 0px)); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); width: 78px; height: 78px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.55); padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; font-weight: 900; font-size: 13px; color: #fff; background: rgba(20, 26, 52, 0.72); pointer-events: auto; touch-action: none; } #sneak-btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; } #sneak-btn.on { background: #3fd17f; color: #06251a; border-color: #fff; } @media (max-width: 560px) { .hud-row { gap: 6px; } .role, .wallet { padding: 6px 10px; min-height: 52px; gap: 8px; } .role-txt b, .wal-txt b { font-size: 17px; } .timer { width: 76px; height: 76px; } .timer b { font-size: 19px; } .chip { font-size: 12px; } #toasts { top: calc(190px + env(safe-area-inset-top, 0px)); } .row { grid-template-columns: 1.3fr 1fr auto; } .row .res { display: none; } #slots { gap: 6px; } .slot b { font-size: 11px; } .splash { font-size: 16px; left: -2%; } } @media (prefers-reduced-motion: reduce) { #banner, .toast, .cloud, .blk, .fl, .menu h1, .menu .eyebrow, .splash, .cta::after, .slot[aria-pressed="true"] { transition: none; animation: none; } } /* ---------- First person ---------- */ #crosshair { position: fixed; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; z-index: 2; } #crosshair::before, #crosshair::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55); } #crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; } #crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; } #floatTxt { position: fixed; left: 50%; top: 42%; transform: translate(-50%, 0); pointer-events: none; z-index: 3; opacity: 0; font-family: var(--pix); font-size: 22px; color: #ffe27a; text-shadow: 3px 3px 0 #5a3a00; } #floatTxt.go { animation: float-up 0.9s ease-out; } @keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50px) scale(1.15); } } /* screen tint while a power-up or a cobweb is on you */ #vignette { transition: background 0.3s; } body[data-fx="speed"] #vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 190, 40, 0.38) 100%); } /* ---------- XP and map picker ---------- */ .xp { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; background: var(--card); border: 3px solid #05060e; border-radius: 6px; padding: 6px 12px; font-weight: 700; font-size: 13px; } .xp .bar { height: 10px; background: rgba(255, 255, 255, 0.18); border: 2px solid #05060e; overflow: hidden; } .xp .bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5aa02c, #8fdc55); transition: width 0.5s; } #maps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .map { font: inherit; color: var(--text); cursor: pointer; text-align: center; background: var(--card); border: 3px solid #05060e; border-radius: 6px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #05060e; } .map .mi { font-size: 30px; line-height: 1; } .map b { font-size: 13px; font-weight: 900; } .map small { font-size: 11px; color: var(--muted); font-weight: 700; } .map[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 #05060e; background: var(--card-2); } .map:disabled { cursor: default; } .map:disabled:not([aria-pressed="true"]) { opacity: 0.55; } .map:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .xpgain { font-family: var(--pix), var(--font); font-size: 11px; color: var(--accent); line-height: 1.8; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); } /* ---------- Pause and exit icons ---------- */ #sysbtns { position: fixed; right: max(10px, env(safe-area-inset-right, 0px)); top: calc(96px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; flex-direction: column; gap: 8px; } #sysbtns button { width: 48px; height: 48px; border-radius: 6px; border: 3px solid #05060e; padding: 0; background: var(--glass); color: var(--glass-text); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--glass-line); } #sysbtns svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; } #sysbtns button:active { transform: translateY(2px); } #sysbtns button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } #pausePanel { z-index: 15; } .ghost.big { font-size: 16px; padding: 10px 26px; } /* ---------- Adaptive controls: sizes follow the screen, the right set shows for the device ---------- */ :root { --joy: clamp(104px, 24vmin, 150px); --jump: clamp(84px, 20vmin, 120px); --crawl: clamp(60px, 14vmin, 82px); --edge: clamp(14px, 3vmin, 28px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } #joystick { width: var(--joy); height: var(--joy); left: calc(var(--edge) + var(--safe-l)); bottom: calc(var(--edge) * 1.6 + var(--safe-b)); } #stick { width: calc(var(--joy) * 0.44); height: calc(var(--joy) * 0.44); } #jump-btn { width: var(--jump); height: var(--jump); right: calc(var(--edge) + var(--safe-r)); bottom: calc(var(--edge) * 1.8 + var(--safe-b)); font-size: clamp(14px, 3.4vmin, 18px); } #jump-btn .arrow { width: calc(var(--jump) * 0.36); height: calc(var(--jump) * 0.36); } #sneak-btn { width: var(--crawl); height: var(--crawl); right: calc(var(--edge) * 2 + var(--jump) + var(--safe-r)); bottom: calc(var(--edge) * 1.8 + var(--safe-b)); font-size: clamp(11px, 2.6vmin, 13px); } #sneak-btn svg { width: calc(var(--crawl) * 0.4); height: calc(var(--crawl) * 0.4); } .mode-touch #powerup { bottom: calc(var(--jump) + var(--edge) * 3 + var(--safe-b)); } .mode-desktop #powerup { bottom: 74px; } .mode-touch #mouseBtn, .mode-touch #keyhint { display: none; } .mode-desktop #touch-controls { display: none; } /* keyboard cheat sheet for desktop players */ #keyhint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; pointer-events: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: min(92vw, 720px); background: var(--glass); color: var(--glass-text); border: 3px solid #05060e; border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 700; opacity: 0.85; } #keyhint kbd { font: inherit; font-size: 11px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; margin-inline: 1px; } #mouseBtn[aria-pressed="true"] { background: #3fd17f; color: #06251a; } /* short landscape phones: smaller icon column so nothing crowds the view */ @media (max-height: 460px) { #sysbtns { top: calc(70px + env(safe-area-inset-top, 0px)); gap: 6px; } #sysbtns button { width: 40px; height: 40px; } #sysbtns svg { width: 22px; height: 22px; } .timer { width: 64px; height: 64px; } .role, .wallet { min-height: 44px; padding-block: 4px; } #roster { display: none; } #toasts { top: calc(120px + env(safe-area-inset-top, 0px)); } } /* ---------- Minimap and radar ---------- */ /* the top search icon is gone: the role pill is just text now */ .role-ico { display: none; } #slots { grid-template-columns: repeat(3, 1fr); } .fl.f5 { left: 36%; top: 12%; animation-delay: -3.2s; } #minimap { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); top: calc(122px + env(safe-area-inset-top, 0px)); z-index: 3; width: clamp(96px, 22vmin, 150px); height: clamp(96px, 22vmin, 150px); border: 3px solid #05060e; border-radius: 4px; box-shadow: 0 0 0 2px var(--glass-line); opacity: 0.92; pointer-events: none; } #radar { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; width: min(74vmin, 560px); height: min(74vmin, 560px); border: 4px solid #6fe0ff; border-radius: 6px; box-shadow: 0 0 40px rgba(111, 224, 255, 0.45), inset 0 0 0 2px rgba(0, 0, 0, 0.5); } @media (max-height: 460px) { #minimap { top: calc(70px + env(safe-area-inset-top, 0px)); width: clamp(84px, 24vmin, 120px); height: clamp(84px, 24vmin, 120px); } } /* the letter badges and edge markers are gone for good */ #pointers, .ptr { display: none !important; } .map em { font-style: normal; font-size: 11px; font-weight: 900; color: var(--accent); } .map small { line-height: 1.35; } /* ---------- Runners Games hub ---------- */ .games, .modes, .partners { display: grid; gap: 8px; width: 100%; } .games, .modes { grid-template-columns: repeat(2, 1fr); } .partners { grid-template-columns: repeat(3, 1fr); } .laser-opts { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; } .game-card, .mode { font: inherit; color: var(--text); cursor: pointer; text-align: center; background: var(--card); border: 3px solid #05060e; border-radius: 6px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #05060e; transition: transform 0.12s steps(3); } .game-card .gi { font-size: 34px; line-height: 1; } .game-card b, .mode b { font-size: 16px; font-weight: 900; } .game-card small, .mode small { font-size: 12px; color: var(--muted); font-weight: 500; } .game-card.laser[aria-pressed="true"] { background: linear-gradient(180deg, #2a1f55, #162a55); color: #fff; } .game-card.laser[aria-pressed="true"] small { color: #c3cae6; } .game-card[aria-pressed="true"], .mode[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 #05060e; } .game-card:hover:not(:disabled), .mode:hover:not(:disabled) { transform: translateY(-3px); } .game-card:disabled:not([aria-pressed="true"]), .mode:disabled:not([aria-pressed="true"]) { opacity: 0.55; cursor: default; } /* ---------- Laser Arena HUD: hidden outside the arena ---------- */ .lz { display: none; } .is-laser .lz { display: block; } .is-laser #hotbar { display: flex; } .is-laser #hpbar { display: flex; } .is-laser #reviveBar { display: flex; } .is-laser #fire-btn, .is-laser #scope-btn, .is-laser #use-btn { display: flex; } .mode-desktop #fire-btn, .mode-desktop #scope-btn, .mode-desktop #use-btn { display: none !important; } .is-laser #coinN, .is-laser .coin-ico { } .role.laser { border-color: #1d3a7a; box-shadow: inset 0 0 0 2px #6fe0ff; } #hurt { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 30, 30, 0.75) 100%); } #hitmark { position: fixed; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.12s; } #hitmark.on { opacity: 1; transition: none; } #hitmark i { position: absolute; width: 12px; height: 3px; background: #fff; box-shadow: 0 0 0 1.5px #000; } #hitmark i:nth-child(1) { left: 0; top: 0; transform: rotate(45deg); } #hitmark i:nth-child(2) { right: 0; top: 0; transform: rotate(-45deg); } #hitmark i:nth-child(3) { left: 0; bottom: 0; transform: rotate(-45deg); } #hitmark i:nth-child(4) { right: 0; bottom: 0; transform: rotate(45deg); } /* sniper scope: black frame with a clear circle, thin cross-hairs */ #scope { position: fixed; inset: 0; pointer-events: none; z-index: 2; } #scope .ring { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0, transparent 17%, #000 17.4%); } #scope .h, #scope .v { position: absolute; background: rgba(255, 60, 90, 0.85); } #scope .h { left: 50%; top: 50%; width: min(60vmin, 520px); height: 1.5px; transform: translate(-50%, -50%); } #scope .v { left: 50%; top: 50%; height: min(60vmin, 520px); width: 1.5px; transform: translate(-50%, -50%); } #hpbar { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; align-items: center; gap: 8px; width: min(300px, 46vw); pointer-events: none; direction: ltr; } #hpbar .cross { color: #ff6a7d; font-size: 20px; text-shadow: 0 0 0 #000, 2px 2px 0 #000; } #hpbar .trk, #reviveBar .trk { flex: 1; height: 16px; background: rgba(5, 6, 14, 0.8); border: 3px solid #05060e; border-radius: 3px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); overflow: hidden; } #hpFill { display: block; height: 100%; width: 100%; background: #4cd66e; transition: width 0.15s linear; } #hpFill.mid { background: #ffc93c; } #hpFill.low { background: #ff4b3e; animation: urgent 0.6s steps(2) infinite alternate; } #reviveBar { position: fixed; left: 50%; top: 62%; transform: translateX(-50%); z-index: 3; align-items: center; gap: 8px; width: min(280px, 60vw); pointer-events: none; font-weight: 900; color: #fff; text-shadow: 2px 2px 0 #000; } #reviveFill { display: block; height: 100%; width: 0; background: #5fe08f; } #ammo { position: fixed; left: 50%; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; pointer-events: none; font-weight: 900; font-size: 13px; color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; } #hotbar { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 4; gap: 6px; direction: ltr; } #hotbar button { position: relative; width: 56px; height: 52px; font: inherit; color: #fff; cursor: pointer; background: rgba(16, 20, 38, 0.78); border: 3px solid #05060e; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; } #hotbar button i { font-style: normal; font-size: 22px; line-height: 1; } #hotbar button small { font-size: 10px; font-weight: 700; color: var(--glass-muted); } #hotbar button kbd { position: absolute; top: 1px; left: 3px; font: 700 10px var(--font); color: #ffd45a; } #hotbar button.on { box-shadow: inset 0 0 0 3px #ffd45a; background: rgba(60, 50, 10, 0.85); transform: translateY(-4px); } #hotbar button.na { opacity: 0.45; } .mode-touch #hotbar kbd { display: none; } .mode-touch #hotbar button { width: 48px; height: 46px; } /* touch fire / scope / revive buttons stack above the jump button */ #fire-btn, #scope-btn, #use-btn { position: absolute; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.6); padding: 0; font: inherit; font-weight: 900; color: #fff; align-items: center; justify-content: center; flex-direction: column; pointer-events: auto; touch-action: none; } #fire-btn { width: var(--jump); height: var(--jump); right: calc(var(--edge) + var(--safe-r)); bottom: calc(var(--edge) * 2.6 + var(--jump) + var(--safe-b)); background: radial-gradient(circle at 35% 28%, #ff9a8a, #ff4b3e 65%, #c42a20); font-size: 30px; box-shadow: 0 5px 0 #7a1d16; } #fire-btn.on { transform: translateY(3px); box-shadow: 0 2px 0 #7a1d16; } #scope-btn { width: var(--crawl); height: var(--crawl); right: calc(var(--edge) * 2 + var(--jump) + var(--safe-r)); bottom: calc(var(--edge) * 3.2 + var(--jump) + var(--crawl) * 0.6 + var(--safe-b)); background: rgba(20, 26, 52, 0.78); font-size: 26px; } #use-btn { width: var(--crawl); height: var(--crawl); right: calc(var(--edge) * 2 + var(--jump) + var(--safe-r)); bottom: calc(var(--edge) * 1.8 + var(--crawl) + var(--safe-b) + 14px); background: rgba(40, 150, 90, 0.9); font-size: 24px; animation: urgent 0.7s steps(2) infinite alternate; } #use-btn small { font-size: 10px; } #use-btn.on { background: #3fd17f; } .mode-touch #hpbar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: min(240px, 36vw); } .mode-touch #ammo { bottom: calc(46px + env(safe-area-inset-bottom, 0px)); } .mode-touch #hotbar { bottom: calc(4px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 560px) { .game-card .gi { font-size: 28px; } .game-card b, .mode b { font-size: 14px; } .partners { grid-template-columns: repeat(3, 1fr); } } .is-laser #keyhint, .is-laser #powerup { display: none; } .back { align-self: flex-start; margin-bottom: 4px; } /* a clear, labelled exit button */ #sysbtns #exitBtn { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; background: #d1402f; color: #fff; border-color: #05060e; font: 900 15px var(--font); } #sysbtns #exitBtn span { line-height: 1; } #sysbtns #exitBtn:hover { background: #e5523f; } /* ---------- rooms ---------- */ .room-create, .room-join { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; width: 100%; } .room-create input[type=text], .room-join input { flex: 1 1 180px; min-width: 0; font: inherit; color: var(--text); background: var(--card); border: 3px solid #05060e; border-radius: 4px; padding: 10px 12px; min-height: 48px; } .room-join input { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 900; direction: ltr; flex: 0 1 140px; } .room-create .pub { display: flex; align-items: center; gap: 8px; font-weight: 700; flex: 1 1 100%; } .room-create .cta { flex: 1 1 100%; } .room-list { display: grid; gap: 8px; width: 100%; max-height: 260px; overflow-y: auto; } .room-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 3px solid #05060e; border-radius: 4px; padding: 8px 12px; box-shadow: 0 3px 0 #05060e; } .room-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; } .room-row small { color: var(--muted); font-weight: 700; direction: ltr; } .room-row button { font: inherit; font-weight: 900; padding: 6px 16px; cursor: pointer; color: #fff; background: #5aa02c; border: 3px solid #0e1d07; border-radius: 3px; } .room-row button:disabled { opacity: 0.5; cursor: default; } .room-empty { color: var(--muted); text-align: center; padding: 14px; border: 3px dashed var(--line); border-radius: 4px; } .ghost.mini { padding: 2px 10px; font-size: 12px; min-height: 0; margin-inline-start: 8px; } .room-badge { font-weight: 900; padding: 6px 14px; background: var(--card); border: 3px solid #05060e; border-radius: 4px; } .room-badge b { font-family: var(--pix); font-size: 13px; letter-spacing: 2px; color: var(--accent-edge); direction: ltr; display: inline-block; } .slot .rdy { position: absolute; top: 2px; inset-inline-start: 4px; font-size: 14px; } .slot { position: relative; } /* ---------- Laser Arena tactical HUD (left panel, centre weapon boxes, labelled touch buttons) ---------- */ #lzpanel { display: none; position: fixed; left: calc(10px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); z-index: 3; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; direction: ltr; } .is-laser #lzpanel { display: flex; } #lzpanel #hpbar { position: static; transform: none; width: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; } #hpbar .hpnum { display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 900; color: #fff; text-shadow: 2px 2px 0 #000; } #hpbar .hpnum b { font-size: 24px; } #hpbar .hpnum small { font-size: 10px; color: #ff9aa6; letter-spacing: 1px; } #lzpanel #hpbar .trk { flex: none; width: 20px; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; } #lzpanel #hpFill { width: 100%; height: 100%; transition: height 0.15s linear; } #lzpanel #ammo { position: static; transform: none; display: block; background: rgba(16, 20, 38, 0.78); border: 3px solid #05060e; border-radius: 4px; padding: 4px 8px; text-align: left; } #ammo small { display: block; font-size: 10px; color: var(--glass-muted); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ammo span { font-size: 11px; color: var(--glass-muted); letter-spacing: 1px; } #ammo b { font-size: 22px; color: #ffd45a; margin-inline-start: 4px; } #lzobj { display: grid; gap: 6px; background: rgba(16, 20, 38, 0.78); border: 3px solid #05060e; border-radius: 4px; padding: 6px 10px; } #lzobj small { display: block; font-size: 10px; color: var(--glass-muted); } #lzobj b { font-size: 17px; color: #fff; } #hotbar { gap: 8px; align-items: flex-end; } #hotbar button { width: 104px; height: auto; min-height: 70px; padding: 14px 4px 6px; gap: 1px; } #hotbar button .nm { font-size: 12px; font-weight: 900; line-height: 1.1; white-space: nowrap; } #hotbar button .st { font-size: 10px; font-weight: 700; color: var(--glass-muted); white-space: nowrap; } #hotbar button .up { margin-top: 3px; font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); color: var(--glass-muted); pointer-events: auto; cursor: pointer; } #hotbar button .up.can { background: #3fd17f; color: #06251a; } .mode-touch #hotbar button { width: 82px; min-height: 60px; } .mode-touch #hotbar button .st { display: none; } #fire-btn span, #swap-btn span { font-size: 15px; letter-spacing: 1px; } #fire-btn { font-size: 15px; } #swap-btn { width: var(--crawl); height: var(--crawl); right: calc(var(--edge) * 2 + var(--jump) + var(--safe-r)); bottom: calc(var(--edge) * 2.6 + var(--jump) + var(--safe-b)); background: rgba(20, 26, 52, 0.78); font-size: 13px; } .is-laser #swap-btn { display: flex; } .mode-desktop #swap-btn { display: none !important; } #scope-btn { right: calc(var(--edge) * 2 + var(--jump) + var(--safe-r)); bottom: calc(var(--edge) * 3.4 + var(--jump) + var(--crawl) + var(--safe-b)); } #use-btn { right: calc(var(--edge) * 3 + var(--jump) + var(--crawl) + var(--safe-r)); bottom: calc(var(--edge) * 1.8 + var(--safe-b)); } #sneak-btn { text-align: center; line-height: 1; } #sneak-btn small { display: block; font-size: 9px; font-weight: 700; } #jump-btn span { font-size: 13px; letter-spacing: 1px; } /* Ghommayda: tag-and-run, so only the minimap, timer, score and movement controls stay */ .is-hide #roster, .is-hide .roundline, .is-hide #objective { display: none !important; } /* phones held upright: ask for landscape (the lock itself is requested from game.js) */ #rotate { display: none; position: fixed; inset: 0; z-index: 100; background: #0b1020; color: #fff; align-items: center; justify-content: center; text-align: center; font-weight: 900; font-size: 20px; padding: 24px; } #rotate b { display: block; font-size: 64px; animation: spin 2.4s ease-in-out infinite; } @keyframes spin { 50% { transform: rotate(90deg); } } @media (prefers-reduced-motion: reduce) { #rotate b { animation: none; } } /* ---------- Laser Arena: stripped-down HUD (icons and bars only, no text blocks) ---------- */ #swap-btn { position: absolute; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.6); padding: 0; font: inherit; font-weight: 900; color: #fff; align-items: center; justify-content: center; flex-direction: column; pointer-events: auto; touch-action: none; } .is-laser .role, .is-laser .wallet, .is-laser #roster, .is-laser .roundline, .is-laser #objective:not(.urgent) { display: none !important; } .is-laser #lzobj, .is-laser #ammo small, .is-laser #ammo span, .is-laser #hpbar .hpnum small { display: none !important; } .is-laser #hpbar .hpnum b { font-size: 15px; } .is-laser #lzpanel { gap: 6px; } .is-laser #lzpanel #hpbar .trk { height: 110px; width: 12px; } .is-laser #lzpanel #ammo { padding: 2px 8px; } .is-laser #lzpanel #ammo b { margin: 0; font-size: 18px; } .is-laser #hud .hud-row { justify-content: center; } .is-laser #hotbar { gap: 6px; } .is-laser #hotbar button, .is-laser.mode-touch #hotbar button { width: 50px; min-height: 48px; padding: 4px 2px; } .is-laser #hotbar button .nm, .is-laser #hotbar button .st, .is-laser #hotbar button kbd { display: none; } .is-laser #hotbar button i { font-size: 22px; } .is-laser #hotbar button .up { display: none; position: absolute; top: -7px; right: -5px; margin: 0; padding: 0 5px; font-size: 10px; } .is-laser #hotbar button .up.can { display: block; } /* phone controls: pause and exit sit in the top corner as small icons, clear of the fire button */ .mode-touch #sysbtns { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); flex-direction: row; } .mode-touch #sysbtns #exitBtn { width: 40px; padding: 0; justify-content: center; } .mode-touch #sysbtns #exitBtn span { display: none; } #fire-btn span, #swap-btn span { font-size: 13px; } /* ---------- Hub: three games, silhouettes that pop out of their cards ---------- */ #hub .sheet { width: min(1040px, 100%); gap: 18px; } #hub h1 { font-size: clamp(38px, 8vw, 76px); letter-spacing: 1px; direction: ltr; } #hub .games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 54px; } .game-card { position: relative; overflow: visible; padding: 78px 14px 16px; gap: 6px; color: #fff; border-radius: 6px; animation: pop-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; animation-delay: var(--d, 0s); } .game-card.hide { background: linear-gradient(180deg, #4f8fe8, #2b5fb8); } .game-card.laser { background: linear-gradient(180deg, #3a2a7a, #16224f); } .game-card.zombie { background: linear-gradient(180deg, #1f4d2a, #0d1f14); box-shadow: inset 0 0 0 2px rgba(120, 255, 140, 0.25), 0 4px 0 #05060e, 0 0 26px rgba(61, 255, 90, 0.28); } .game-card b { font-size: 24px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); direction: ltr; } .game-card small { color: rgba(255, 255, 255, 0.82); font-size: 13px; } .game-card .art { position: absolute; left: 50%; top: -58px; width: 176px; transform: translateX(-50%); pointer-events: none; transition: transform 0.25s cubic-bezier(0.2, 1.5, 0.4, 1); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); animation: art-in 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--d, 0s) + 0.15s); } .game-card .art svg { width: 100%; height: auto; display: block; overflow: visible; } .game-card:hover:not(:disabled) .art { transform: translateX(-50%) scale(1.1) rotate(-2deg); } .game-card .tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; } .game-card .tags i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); } .game-card:disabled { opacity: 1; } .game-card:disabled:not(:hover) { filter: none; } @keyframes pop-in { from { opacity: 0; transform: translateY(70px) scale(0.7); } to { opacity: 1; transform: none; } } @keyframes art-in { from { opacity: 0; transform: translateX(-50%) translateY(50px) scale(0.3); } to { opacity: 1; transform: translateX(-50%); } } .art .bob, .art .bob2 { animation: art-bob 2.6s ease-in-out infinite; } .art .bob2 { animation-duration: 3.4s; animation-delay: -1s; } .art .peek { animation: art-peek 3.2s ease-in-out infinite; } .art .sway { transform-origin: 66px 118px; animation: art-sway 2.4s ease-in-out infinite; } .art .zarm { transform-origin: 86px 60px; animation: art-arm 1.3s ease-in-out infinite; } .art .beam { transform-origin: 130px 60px; animation: art-beam 0.5s steps(2) infinite; } .art .spark { animation: art-spark 0.5s steps(2) infinite; } @keyframes art-bob { 50% { transform: translateY(-5px); } } @keyframes art-peek { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-2px); } } @keyframes art-sway { 50% { transform: rotate(3deg); } } @keyframes art-arm { 50% { transform: rotate(-7deg); } } @keyframes art-beam { 50% { opacity: 0.35; transform: scaleX(0.8); } } @keyframes art-spark { 50% { opacity: 0.3; } } @media (max-width: 760px) and (orientation: portrait) { #hub .games { grid-template-columns: minmax(0, 1fr); gap: 70px; margin-top: 70px; } } @media (max-height: 520px) { #hub .games { margin-top: 34px; gap: 12px; } .game-card { padding-top: 56px; } .game-card .art { width: 118px; top: -36px; } .game-card b { font-size: 18px; } .game-card .tags { display: none; } #hub h1 { font-size: 34px; } } @media (prefers-reduced-motion: reduce) { .game-card, .game-card .art, .art * { animation: none !important; } } /* ---------- Zombiez HUD ---------- */ #zcount { display: none; position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; padding: 3px 14px; font-weight: 900; font-size: 15px; color: #fff; background: rgba(16, 20, 38, 0.78); border: 3px solid #05060e; border-radius: 4px; pointer-events: none; white-space: nowrap; } .is-zombie #zcount { display: block; } #ztint { display: none; position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.1) 30%, rgba(160, 0, 0, 0.62) 100%); mix-blend-mode: multiply; animation: ztint 1.6s ease-in-out infinite alternate; } .is-zme #ztint { display: block; } @keyframes ztint { to { opacity: 0.7; } } .is-zme #lzpanel { display: none !important; } .is-zombie #hotbar, .is-zombie #fire-btn, .is-zombie #swap-btn, .is-zombie #scope-btn, .is-zombie #ammo, .is-zombie #use-btn { display: none !important; } .is-zme #zcount { color: #ff9a8a; border-color: #7a1d16; } /* zombiez: a bite splashes blood across the screen */ .is-zombie #hurt { background: radial-gradient(circle at 12% 22%, rgba(140, 0, 0, 0.9) 0 7%, transparent 8%), radial-gradient(circle at 86% 30%, rgba(120, 0, 0, 0.9) 0 9%, transparent 10%), radial-gradient(circle at 22% 82%, rgba(150, 0, 0, 0.9) 0 8%, transparent 9%), radial-gradient(circle at 78% 78%, rgba(120, 0, 0, 0.9) 0 6%, transparent 7%), radial-gradient(ellipse at center, transparent 35%, rgba(160, 0, 0, 0.85) 100%); } /* ---------- Zombiez: horror theme (menu, HUD and screen) ---------- */ .is-zombie #vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 12, 2, 0.75) 100%); } .is-zombie .timer { border-color: #3a0a0a; } .is-zombie .timer .bar { stroke: #c1121f; } .is-zombie .timer b, .is-zombie .timer small { color: #ffb4a8; } .is-zombie #hpFill { background: linear-gradient(90deg, #7a0a10, #d4202c); } .is-zombie #hpFill.mid { background: #c66a1a; } .is-zombie #hpFill.low { background: #ff1f2d; } .is-zombie #lzpanel #hpbar .trk { border-color: #2a0508; } .is-zombie #banner { color: #ffb4a8; text-shadow: 3px 3px 0 #2a0508, 0 0 16px rgba(255, 30, 30, 0.6); } .is-zombie .toast { background: rgba(30, 6, 8, 0.92); border-color: #7a1d16; color: #ffd0c8; } .is-zombie #zcount { background: rgba(20, 4, 6, 0.85); border-color: #5a1014; letter-spacing: 1px; } .is-zombie #sysbtns button { background: rgba(30, 6, 8, 0.85); } .is-zombie #minimap { border-color: #3a0a0a; } .is-zombie #jump-btn { background: radial-gradient(circle at 35% 28%, #b6403a, #7a1016 62%, #4a0a0e); color: #ffd9d4; box-shadow: 0 6px 0 #2a0508, 0 12px 22px rgba(0, 0, 0, 0.5); } .is-zombie #sneak-btn { background: rgba(30, 6, 8, 0.8); border-color: rgba(255, 120, 110, 0.5); } /* ---------- Zombiez: infection / transformation glitch ---------- */ #infectfx { display: none; position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; background: repeating-linear-gradient(0deg, rgba(0, 255, 70, 0.1) 0 2px, transparent 2px 5px), radial-gradient(ellipse at center, rgba(40, 255, 90, 0.12) 20%, rgba(0, 90, 20, 0.8) 100%); animation: infect-flash 0.5s steps(3) infinite; } .is-infecting #infectfx { display: block; } #infectfx b { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: clamp(22px, 5vw, 44px); font-weight: 900; color: #b6ffb6; text-shadow: 3px 0 #ff1f2d, -3px 0 #1fd0ff; white-space: nowrap; animation: infect-text 0.25s steps(2) infinite; } #infectfx .rgb { position: absolute; left: 0; right: 0; height: 14%; mix-blend-mode: screen; opacity: 0.5; animation: infect-bar 0.6s steps(6) infinite; } #infectfx .rgb.r { background: rgba(255, 0, 40, 0.45); top: 20%; } #infectfx .rgb.b { background: rgba(0, 200, 255, 0.4); top: 62%; animation-delay: -0.3s; } .is-infecting #game { animation: infect-shake 0.3s steps(2) infinite; } @keyframes infect-shake { 0% { transform: translate(0, 0) scale(1.02); filter: hue-rotate(0deg) saturate(1.4) contrast(1.1); } 25% { transform: translate(-7px, 3px) scale(1.04); filter: hue-rotate(70deg) saturate(2.4) contrast(1.4) blur(1px); } 50% { transform: translate(6px, -4px) scale(1.03) skewX(1.5deg); filter: hue-rotate(-40deg) saturate(2) contrast(1.3); } 75% { transform: translate(-3px, -6px) scale(1.05); filter: hue-rotate(110deg) saturate(3) brightness(1.3); } 100% { transform: translate(4px, 5px) scale(1.02); filter: hue-rotate(0deg) saturate(1.6); } } @keyframes infect-flash { 50% { opacity: 0.6; } } @keyframes infect-text { 50% { transform: translate(calc(-50% + 4px), -50%); } } @keyframes infect-bar { 0% { transform: translateY(0); } 50% { transform: translateY(40px); } 100% { transform: translateY(-20px); } } /* a zombie closing in on a survivor: the red edge swells and beats faster the nearer it gets (--zp is 0 to 1) */ .is-zme #ztint { opacity: calc(0.4 + var(--zp, 0) * 0.6); animation: zbeat calc(1.5s - 0.95s * var(--zp, 0)) ease-in-out infinite; } @keyframes zbeat { 0%, 100% { filter: brightness(0.8); } 18% { filter: brightness(1.9); } 36% { filter: brightness(0.9); } 54% { filter: brightness(1.6); } } @media (prefers-reduced-motion: reduce) { .is-infecting #game, #infectfx, #infectfx b, #infectfx .rgb { animation: none; } } .is-zombie #lzpanel, .is-zombie #hpbar { display: none !important; } /* upright phone: the whole game is turned 90 degrees so it always plays in landscape (JS sets --W and --H to the real screen size) */ html.force-land, html.force-land body { overflow: hidden; } html.force-land body { position: fixed; top: 0; left: 0; width: var(--H); height: var(--W); transform-origin: 0 0; transform: translateX(var(--W)) rotate(90deg); } /* ====================================================================== Game setup pages (Ghommayda, Laser Tag, Zombiez): flat glass cards, one accent per game ====================================================================== */ :root { --g-bg: rgba(255, 255, 255, 0.78); --g-line: rgba(20, 30, 70, 0.12); --g-shadow: 0 10px 30px -14px rgba(20, 30, 70, 0.35); --ok: #1f9d55; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-bg: rgba(30, 39, 72, 0.62); --g-line: rgba(255, 255, 255, 0.12); --g-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); --ok: #4cd68a; } } :root[data-theme="dark"] { --g-bg: rgba(30, 39, 72, 0.62); --g-line: rgba(255, 255, 255, 0.12); --g-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); --ok: #4cd68a; } #menu.setup { --ga: #4f8fe8; --ga-soft: rgba(79, 143, 232, 0.16); align-items: flex-start; background: radial-gradient(ellipse at 15% -10%, var(--ga-soft), transparent 55%), var(--panel); animation: setup-in 0.35s ease both; } #menu.setup[data-g="laser"] { --ga: #8a6cff; --ga-soft: rgba(138, 108, 255, 0.18); } #menu.setup[data-g="zombie"] { --ga: #d4343c; --ga-soft: rgba(212, 52, 60, 0.2); } #menu.setup.zmenu { --text: #e8f3e8; --muted: #9db8a0; --card: #142016; --g-bg: rgba(16, 26, 18, 0.78); --g-line: rgba(130, 255, 150, 0.14); --panel: rgba(5, 9, 6, 0.95); color-scheme: dark; } @keyframes setup-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .setup-wrap { width: min(780px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-block: 8px 0; color: var(--text); text-align: start; } .setup-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .back-btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 700; font-size: 14px; color: var(--text); background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 999px; padding: 6px 14px 6px 10px; cursor: pointer; box-shadow: var(--g-shadow); transition: transform 0.15s; } .back-btn:hover { transform: translateX(2px); } .back-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .setup-title { flex: 1; min-width: 160px; } .setup-title h2 { margin: 0; font-size: clamp(26px, 5vw, 38px); font-weight: 900; line-height: 1.1; color: var(--text); } .setup-title p { margin: 2px 0 0; font-size: 14px; color: var(--muted); } .conn-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 999px; padding: 5px 12px; } .conn-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .conn-chip.on .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(76, 214, 138, 0.22); } .xp-line { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--muted); } .xp-line .bar { flex: 1; height: 5px; border-radius: 999px; background: var(--g-line); overflow: hidden; } .xp-line .bar b { display: block; height: 100%; border-radius: inherit; background: var(--ga); transition: width 0.4s ease; } .block { display: flex; flex-direction: column; gap: 10px; } .block h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); } /* maps */ #menu #maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; width: 100%; } #menu .map { display: flex; align-items: center; gap: 12px; text-align: start; font: inherit; color: var(--text); cursor: pointer; background: var(--g-bg); border: 1.5px solid var(--g-line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--g-shadow); transition: transform 0.15s, border-color 0.15s, background 0.15s; min-width: 0; } #menu .map .sw { flex: none; width: 6px; align-self: stretch; min-height: 40px; border-radius: 999px; background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 40%, transparent)); } #menu .map .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #menu .map b { font-size: 16px; font-weight: 900; } #menu .map small { font-size: 12px; color: var(--muted); line-height: 1.35; } #menu .map em { flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--g-line); } #menu .map:hover:not(:disabled) { transform: translateY(-2px); } #menu .map[aria-pressed="true"] { border-color: var(--ga); background: linear-gradient(0deg, var(--ga-soft), var(--ga-soft)), var(--g-bg); } #menu .map[aria-pressed="true"] em { background: var(--ga); color: #fff; } #menu .map.locked { opacity: 0.5; } #menu .map:disabled:not(.locked):not([aria-pressed="true"]) { opacity: 0.75; cursor: default; } /* characters */ #menu #slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; width: 100%; } #menu .slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; font: inherit; color: var(--text); cursor: pointer; background: var(--g-bg); border: 1.5px solid var(--g-line); border-radius: 16px; box-shadow: var(--g-shadow); transition: transform 0.15s, border-color 0.15s; animation: none; min-width: 0; } #menu .slot .face { width: 64px; max-width: none; aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--c); box-sizing: border-box; image-rendering: pixelated; background: var(--c); } #menu .slot b { font-size: 14px; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #menu .slot .st { min-height: 16px; font-size: 11px; font-weight: 700; color: var(--muted); } #menu .slot .st.ok { color: var(--ok); } #menu .slot:hover:not(:disabled) { transform: translateY(-2px); } #menu .slot[aria-pressed="true"] { border-color: var(--ga); background: linear-gradient(0deg, var(--ga-soft), var(--ga-soft)), var(--g-bg); box-shadow: 0 0 0 3px var(--ga-soft), var(--g-shadow); } #menu .slot:disabled { opacity: 0.45; cursor: default; } /* match type and partner */ #menu .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 14px; } #menu .seg-btn { display: flex; flex-direction: column; gap: 1px; align-items: center; padding: 10px 8px; font: inherit; color: var(--muted); cursor: pointer; background: transparent; border: 0; border-radius: 10px; transition: background 0.15s, color 0.15s; } #menu .seg-btn b { font-size: 15px; font-weight: 900; } #menu .seg-btn small { font-size: 11px; } #menu .seg-btn[aria-pressed="true"] { background: var(--ga); color: #fff; } #menu .seg-btn:disabled:not([aria-pressed="true"]) { opacity: 0.6; cursor: default; } #menu .pick-row { display: flex; flex-wrap: wrap; gap: 8px; } #menu .pick { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; font: inherit; color: var(--text); cursor: pointer; background: var(--g-bg); border: 1.5px solid var(--g-line); border-radius: 999px; } #menu .pick .face { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--c); box-sizing: border-box; image-rendering: pixelated; background: var(--c); } #menu .pick b { font-size: 13px; font-weight: 700; } #menu .pick[aria-pressed="true"] { border-color: var(--ga); background: var(--ga-soft); } /* start bar */ .setup-foot { position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; padding: 14px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, var(--panel) 62%, transparent); } .setup-foot .hint { margin: 0; text-align: center; font-size: 13px; color: var(--muted); min-height: 1.2em; } #menu .cta { align-self: center; width: min(420px, 100%); min-height: 54px; padding: 10px 24px; font-size: 18px; font-weight: 900; color: #fff; text-shadow: none; background: var(--ga); border: 0; border-radius: 14px; box-shadow: 0 10px 26px -10px var(--ga); transition: transform 0.12s, filter 0.2s; } #menu .cta::after { display: none; } #menu .cta:active { transform: translateY(2px); box-shadow: 0 6px 16px -8px var(--ga); } #menu .cta:disabled { filter: grayscale(0.6) brightness(0.9); opacity: 0.7; } #menu .cta.is-ready { background: var(--ok); box-shadow: 0 10px 26px -10px var(--ok); } .foot-links { display: flex; justify-content: center; gap: 18px; } .link { font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: none; border: 0; padding: 4px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .link:hover { color: var(--text); } @media (max-width: 560px) { #menu #maps { grid-template-columns: minmax(0, 1fr); } #menu #slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .setup-title { flex-basis: 100%; order: 2; } } @media (max-height: 520px) { .setup-wrap { gap: 12px; } #menu #slots { grid-template-columns: repeat(6, minmax(0, 1fr)); } #menu .slot .face { width: 48px; } } @media (prefers-reduced-motion: reduce) { #menu.setup { animation: none; } } .setup-wrap { padding-top: 44px; } .setup-foot { background: var(--panel); border-top: 1px solid var(--g-line); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); } #menu .map { flex-direction: row; justify-content: flex-start; text-align: start; box-shadow: var(--g-shadow); animation: none; } #menu .map .tx, #menu .map .tx b, #menu .map .tx small { text-align: start; } .setup-title h2 { text-shadow: none; letter-spacing: 0; } /* ====================================================================== Dark glass redesign: every menu screen shares one calm dark look; the hub shows four games ====================================================================== */ #hub, #rooms, #menu, #pausePanel, #roundEnd, #final { --text: #eef2ff; --muted: #a3aed0; --card: #161d38; --line: rgba(255, 255, 255, 0.14); --g-bg: rgba(255, 255, 255, 0.06); --g-line: rgba(255, 255, 255, 0.12); --g-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.7); --panel: rgba(7, 10, 24, 0.96); --ok: #4cd68a; color: var(--text); color-scheme: dark; } #hub, #rooms { background: radial-gradient(ellipse at 20% -10%, rgba(138, 108, 255, 0.22), transparent 55%), radial-gradient(ellipse at 90% 110%, rgba(79, 143, 232, 0.18), transparent 55%), var(--panel); } #menu.setup { background: radial-gradient(ellipse at 15% -10%, var(--ga-soft), transparent 55%), var(--panel); } #menu.setup[data-g="bomb"] { --ga: #ff8a1a; --ga-soft: rgba(255, 138, 26, 0.2); } #menu.setup.zmenu { --panel: rgba(5, 9, 6, 0.96); } #pausePanel .sheet, #roundEnd .sheet, #final .sheet { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 18px; padding: 24px; box-shadow: var(--g-shadow); backdrop-filter: blur(14px); } /* hub: title, four cards that pop out of the glass */ #hub .sheet, #rooms .sheet { width: min(1120px, 100%); gap: 18px; } #hub .eyebrow, #rooms .eyebrow { font-family: var(--font); font-size: 13px; letter-spacing: 0.18em; color: var(--muted); font-weight: 700; } #hub h1, #rooms h1 { font-family: var(--font); font-size: clamp(34px, 7vw, 64px); font-weight: 900; color: var(--text); text-shadow: none; letter-spacing: 0; direction: ltr; margin: 0; } #rooms h1 { direction: rtl; } #hub .hint, #rooms .hint { color: var(--muted); } #hub .conn { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; box-shadow: none; } #hub .conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } #hub .games { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 56px; } #hub .game-card { border: 1px solid var(--g-line); border-radius: 18px; box-shadow: var(--g-shadow); backdrop-filter: blur(10px); color: var(--text); } #hub .game-card.hide { background: linear-gradient(180deg, rgba(79, 143, 232, 0.45), rgba(79, 143, 232, 0.12)); } #hub .game-card.laser { background: linear-gradient(180deg, rgba(138, 108, 255, 0.45), rgba(138, 108, 255, 0.12)); } #hub .game-card.bomb { background: linear-gradient(180deg, rgba(255, 138, 26, 0.42), rgba(255, 138, 26, 0.1)); } #hub .game-card.zombie { background: linear-gradient(180deg, rgba(212, 52, 60, 0.42), rgba(212, 52, 60, 0.1)); box-shadow: var(--g-shadow); } #hub .game-card b { font-size: 21px; text-shadow: none; } #hub .game-card small { color: var(--muted); } #hub .game-card .tags i { background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 2px 10px; } #hub .ghost-row .ghost, #rooms .ghost { background: var(--g-bg); color: var(--muted); border: 1px solid var(--g-line); border-radius: 999px; box-shadow: none; } #hub .art .fuse { animation: art-bob 1.4s ease-in-out infinite; } @media (max-width: 1000px) { #hub .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 16px; } } @media (max-width: 480px) and (orientation: portrait) { #hub .games { grid-template-columns: minmax(0, 1fr); gap: 70px; } } /* rooms */ #rooms .room-row, #rooms .room-create input[type=text], #rooms .room-join input { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 12px; color: var(--text); box-shadow: none; } #rooms .room-row button, #rooms .cta, #rooms .room-join .ghost { border-radius: 12px; } #rooms .cta { background: #8a6cff; color: #fff; border: 0; text-shadow: none; box-shadow: 0 10px 26px -10px #8a6cff; } #rooms .cta::after { display: none; } #rooms .room-row button { background: #8a6cff; border: 0; } #rooms .label { color: var(--muted); font-size: 13px; letter-spacing: 0.04em; } .room-badge { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 999px; box-shadow: none; } /* buttons in the quiet panels */ #hub .cta, #pausePanel .cta, #roundEnd .cta, #final .cta { background: #8a6cff; color: #fff; border: 0; border-radius: 14px; text-shadow: none; box-shadow: 0 10px 26px -10px #8a6cff; } #hub .cta::after, #pausePanel .cta::after, #roundEnd .cta::after, #final .cta::after { display: none; } .table .row { border-radius: 10px; } /* ---------- Hot Potato Bomb HUD ---------- */ #bombHud { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; padding: 6px 22px 8px; background: rgba(10, 12, 26, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; backdrop-filter: blur(8px); } #bombHud small { font-size: 13px; font-weight: 700; color: #ffd0a0; } #bombHud b { font-size: 46px; line-height: 1; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; } #bombHud.mine { border-color: #ff3a2a; background: rgba(60, 8, 8, 0.8); } #bombHud.mine b { color: #ff6a5a; animation: bomb-pulse 0.6s ease-in-out infinite; } #bombHud.frozen b { color: #9fdcff; } @keyframes bomb-pulse { 50% { transform: scale(1.12); } } #btint { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--bp, 0); background: radial-gradient(ellipse at center, transparent 35%, rgba(255, 20, 10, 0.75) 100%); animation: btint calc(1s - 0.7s * var(--bp, 0)) ease-in-out infinite alternate; } @keyframes btint { from { filter: brightness(0.7); } to { filter: brightness(1.6); } } .is-bomb #hotbar, .is-bomb #fire-btn, .is-bomb #swap-btn, .is-bomb #scope-btn, .is-bomb #use-btn, .is-bomb #ammo, .is-bomb #lzobj, .is-bomb #zcount, .is-bomb #crosshair { display: none !important; } body:not(.is-bomb) #bombHud, body:not(.is-bomb) #btint { display: none; } .is-bomb #hud .role, .is-bomb #hud .wallet { display: none; } @media (prefers-reduced-motion: reduce) { #bombHud.mine b, #btint { animation: none; } } /* ====================================================================== Blocky stone theme for every menu screen: the first screen is a group portrait with a stone logo, and the cards, buttons and pick lists everywhere share the same bevelled stone look. ====================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #hub, #rooms, #menu, #pausePanel, #roundEnd, #final { --stone: #44444c; --stone-hi: #7a7a86; --stone-lo: #24242a; --ink: #05060e; --text: #f2f4ff; --muted: #b3bad6; --panel: #131a2c; --g-bg: var(--stone); --g-line: var(--ink); background: linear-gradient(180deg, #27355e 0%, #1a2340 38%, #121828 100%); } #hub, #rooms { background: linear-gradient(180deg, #2c3d70 0%, #1c2748 42%, #121828 100%); } #menu.setup { background: linear-gradient(180deg, #27355e 0%, #1a2340 38%, #121828 100%); } #menu.setup.zmenu { background: linear-gradient(180deg, #1a2a1c 0%, #0e1610 40%, #070a07 100%); } #menu.setup[data-g="hide"] { --ga: #4f8fe8; } #menu.setup[data-g="laser"] { --ga: #8a6cff; } #menu.setup[data-g="zombie"] { --ga: #d4343c; } #menu.setup[data-g="bomb"] { --ga: #ff8a1a; } /* the stone bevel shared by cards and buttons */ .stone, #hub .game-card, #menu .map, #menu .slot, #menu .seg-btn, #menu .pick, #rooms .room-row, #menu .back-btn, #menu .conn-chip, #hub .conn, #rooms .ghost, #hub .ghost, #pausePanel .sheet, #roundEnd .sheet, #final .sheet { background: var(--stone); border: 3px solid var(--ink); border-radius: 4px; backdrop-filter: none; box-shadow: inset 3px 3px 0 var(--stone-hi), inset -3px -3px 0 var(--stone-lo), 0 5px 0 rgba(0, 0, 0, 0.55); color: var(--text); } /* first screen */ #hub .sheet { width: min(980px, 100%); gap: 8px; padding-top: 4px; } .hub-hero { width: min(900px, 100%); position: relative; z-index: 0; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)); } .hub-hero > svg { width: 100%; height: auto; display: block; } .hub-logo { position: relative; z-index: 1; width: min(640px, 92%); margin-top: -30px; display: flex; flex-direction: column; align-items: center; gap: 2px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.45)); animation: logo-drop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .hub-logo .l1 { width: 100%; } .hub-logo .l2 { width: 66%; } .hub-logo svg { width: 100%; height: auto; display: block; } @keyframes logo-drop { from { opacity: 0; transform: translateY(-40px) scale(0.9); } to { opacity: 1; transform: none; } } #hub .hint { margin: 6px 0 0; font-weight: 700; color: var(--muted); } #hub .games { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 52px; width: 100%; } #hub .game-card { padding: 78px 10px 14px; text-align: center; } #hub .game-card .art { top: -52px; width: 150px; } #hub .game-card.hide, #hub .game-card.laser, #hub .game-card.bomb, #hub .game-card.zombie { background: var(--stone); } #hub .game-card.hide { box-shadow: inset 3px 3px 0 #6a8fd0, inset -3px -3px 0 #2a3f6e, 0 5px 0 rgba(0, 0, 0, 0.55); } #hub .game-card.laser { box-shadow: inset 3px 3px 0 #9a86e6, inset -3px -3px 0 #3a2f78, 0 5px 0 rgba(0, 0, 0, 0.55); } #hub .game-card.bomb { box-shadow: inset 3px 3px 0 #e6a45a, inset -3px -3px 0 #7a3f10, 0 5px 0 rgba(0, 0, 0, 0.55); } #hub .game-card.zombie { box-shadow: inset 3px 3px 0 #d86a70, inset -3px -3px 0 #6e1a20, 0 5px 0 rgba(0, 0, 0, 0.55); } #hub .game-card b { font-family: var(--pix); font-size: 12px; font-weight: 400; line-height: 1.5; color: #fff; text-shadow: 2px 2px 0 #000; } #hub .game-card small { font-weight: 700; color: var(--muted); } #hub .game-card .tags i { border-radius: 2px; background: rgba(0, 0, 0, 0.35); font-weight: 700; } #hub .game-card:hover:not(:disabled) { transform: translateY(-5px); } #hub .ghost, #rooms .ghost, #menu .back-btn { font-weight: 700; } #hub .conn { border-radius: 2px; padding: 3px 12px; box-shadow: inset 2px 2px 0 var(--stone-hi), inset -2px -2px 0 var(--stone-lo); } @media (max-width: 1000px) { #hub .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 66px 14px; } .hub-logo { margin-top: -34px; } } @media (max-width: 480px) and (orientation: portrait) { #hub .games { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .hub-logo { animation: none; } } /* setup pages in the same stone look, with the game's own character on the header */ #menu .setup-head { align-items: flex-end; } .game-icon { display: block; width: 92px; margin-bottom: -4px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); } .game-icon svg { width: 100%; height: auto; display: block; overflow: visible; } .game-icon .bob, .game-icon .bob2, .game-icon .peek, .game-icon .sway, .game-icon .zarm, .game-icon .fuse { animation: art-bob 2.6s ease-in-out infinite; } #menu .setup-title { display: flex; align-items: flex-end; gap: 14px; flex: 1; } #menu .setup-title h2 { font-family: var(--pix); font-size: clamp(16px, 3.4vw, 24px); font-weight: 400; line-height: 1.5; text-shadow: 3px 3px 0 #000; color: #fff; } #menu .setup-title p { color: var(--muted); } #menu .block h3 { font-family: var(--pix); font-size: 10px; font-weight: 400; letter-spacing: 0; color: #cfd6f3; text-shadow: 2px 2px 0 #000; } #menu .xp-line .bar { border-radius: 0; height: 8px; background: #05060e; border: 2px solid #05060e; } #menu .xp-line .bar b { background: #5aa02c; border-radius: 0; } #menu .map { border-radius: 4px; } #menu .map .sw { width: 40px; height: 40px; min-height: 0; align-self: center; background: rgba(0, 0, 0, 0.35); border: 2px solid var(--ink); border-radius: 2px; display: grid; place-items: center; padding: 4px; } #menu .map .sw svg { width: 100%; height: 100%; display: block; } #menu .map em { border-radius: 2px; background: rgba(0, 0, 0, 0.4); color: var(--muted); } #menu .map[aria-pressed="true"], #menu .slot[aria-pressed="true"], #menu .seg-btn[aria-pressed="true"], #menu .pick[aria-pressed="true"] { background: var(--stone); box-shadow: inset 3px 3px 0 var(--ga), inset -3px -3px 0 var(--stone-lo), 0 0 0 3px var(--ga), 0 5px 0 rgba(0, 0, 0, 0.55); } #menu .map[aria-pressed="true"] em { background: var(--ga); color: #fff; } #menu .seg { background: transparent; border: 0; padding: 0; gap: 8px; } #menu .seg-btn { color: var(--text); padding: 10px 8px; } #menu .seg-btn small { color: var(--muted); } #menu .slot .face, #menu .pick .face { border-radius: 2px; border: 3px solid var(--ink); } #menu .slot b, #menu .pick b { color: #fff; } #menu .slot .st { color: var(--muted); } #menu .slot .st.ok { color: #7bf0a8; } #menu .setup-foot { background: #101626; border-top: 3px solid var(--ink); } #menu .cta, #rooms .cta, #hub .cta, #pausePanel .cta, #roundEnd .cta, #final .cta { font-family: var(--font); font-weight: 900; color: #fff; text-shadow: 2px 2px 0 #1b3a0c; background: #5aa02c; border: 4px solid #0e1d07; border-radius: 3px; box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 6px 0 #0e1d07; min-height: 56px; } #menu .cta:active { transform: translateY(4px); box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 2px 0 #0e1d07; } #menu .cta.is-ready { background: #4a8fd0; box-shadow: inset -4px -6px 0 #2e6aa8, inset 4px 4px 0 #86c0f0, 0 6px 0 #0e1d07; } #menu .cta:disabled { filter: grayscale(0.7) brightness(0.8); opacity: 1; } #rooms .room-create input[type=text], #rooms .room-join input { background: #1c2236; border: 3px solid var(--ink); border-radius: 3px; box-shadow: inset 2px 2px 0 #0a0d18; color: var(--text); } #rooms .room-row button { background: #5aa02c; border: 3px solid #0e1d07; border-radius: 3px; box-shadow: inset -3px -3px 0 #3d7a1c, inset 3px 3px 0 #8fdc55; } #rooms .label, #rooms .hint { color: var(--muted); } #rooms h1 { font-family: var(--pix); font-size: clamp(22px, 5vw, 34px); font-weight: 400; color: #fff; text-shadow: 4px 4px 0 #000; } #rooms .eyebrow { font-family: var(--pix); font-size: 10px; letter-spacing: 0; color: var(--muted); } #pausePanel .sheet, #roundEnd .sheet, #final .sheet { padding: 24px; } /* ---- first screen on a clean neutral ground, like the reference poster ---- */ #hub { background: radial-gradient(ellipse at 50% 30%, #f3f3f5 0%, #dcdce0 100%); --text: #1c2030; --muted: #4a5068; } #hub .sheet { width: min(1000px, 100%); gap: 0; } .hub-hero { width: min(920px, 100%); filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.18)); animation: hero-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; } .hub-logo { display: none; } #hub .hint { color: #4a5068; margin-top: 14px; } #hub .games { margin-top: 56px; } #hub .ghost { color: var(--text); background: #c9c9d0; box-shadow: inset 3px 3px 0 #ededf2, inset -3px -3px 0 #8d8d98, 0 4px 0 rgba(0, 0, 0, 0.35); } #hub .conn { background: #c9c9d0; color: #1c2030; } @keyframes hero-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hub-hero { animation: none; } } #hub .game-card small, #hub .game-card .tags i { color: #d9def5; } #hub .game-card .tags i { background: rgba(0, 0, 0, 0.4); } #hub .ghost { color: #1c2030 !important; } /* ---- first screen is the 3D diorama itself: the panel is see-through, only the labels and a hint sit on top ---- */ #hub { background: transparent !important; pointer-events: none; align-items: flex-end; } #hub .sheet { pointer-events: none; width: min(760px, 100%); margin: 0 auto; gap: 8px; padding-bottom: 6px; } #hub .sheet > * { pointer-events: auto; } #hub .hub-hero, #hub .hub-logo, #hub .games { display: none; } #hub .hint { color: #2a3048; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0; } #hub .ghost { color: #1c2030 !important; background: #cfcfd6; } .pods { position: fixed; inset: 0; pointer-events: none; z-index: 2; } .pod-btn { position: absolute; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 128px; max-width: 200px; padding: 8px 12px 9px; font: inherit; text-align: center; color: #fff; background: #44444c; border: 3px solid #05060e; border-radius: 4px; box-shadow: inset 3px 3px 0 #7a7a86, inset -3px -3px 0 #24242a, 0 5px 0 rgba(0, 0, 0, 0.5); transition: transform 0.15s; } .pod-btn b { font-family: var(--pix); font-size: 11px; font-weight: 400; line-height: 1.5; text-shadow: 2px 2px 0 #000; direction: ltr; } .pod-btn small { font-size: 12px; font-weight: 700; color: #d9def5; } .pod-btn:hover:not(:disabled), .pod-btn:focus-visible { transform: translate(-50%, -4px); } .pod-btn.hide { box-shadow: inset 3px 3px 0 #6a8fd0, inset -3px -3px 0 #2a3f6e, 0 5px 0 rgba(0, 0, 0, 0.5); } .pod-btn.laser { box-shadow: inset 3px 3px 0 #9a86e6, inset -3px -3px 0 #3a2f78, 0 5px 0 rgba(0, 0, 0, 0.5); } .pod-btn.bomb { box-shadow: inset 3px 3px 0 #e6a45a, inset -3px -3px 0 #7a3f10, 0 5px 0 rgba(0, 0, 0, 0.5); } .pod-btn.zombie { box-shadow: inset 3px 3px 0 #d86a70, inset -3px -3px 0 #6e1a20, 0 5px 0 rgba(0, 0, 0, 0.5); } .pod-btn:disabled { cursor: default; opacity: 0.92; } @media (max-width: 700px) { .pod-btn { min-width: 100px; padding: 6px 8px 7px; } .pod-btn b { font-size: 9px; } .pod-btn small { font-size: 11px; } } #hub { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; align-items: flex-start; padding-top: 12px; } #hub .hint { font-size: 14px; } /* ====================================================================== Split-screen setup, scrolling everywhere, a small sun/moon switch and a clean in-game screen ====================================================================== */ body { touch-action: pan-x pan-y; } .panel { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: thin; } #hub { pointer-events: auto; overflow: auto; } .pods { pointer-events: none; } /* sun / moon */ .theme-icon { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 40; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--text); background: var(--stone, #44444c); border: 3px solid #05060e; border-radius: 4px; box-shadow: inset 2px 2px 0 var(--stone-hi, #7a7a86), inset -2px -2px 0 var(--stone-lo, #24242a); } .theme-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } html[data-ui="dark"] .theme-icon { color: #ffe27a; background: #2a2e44; } html[data-ui="light"] .theme-icon { color: #3b4260; background: #dfe3ef; } .in-game .theme-icon { display: none; } /* light and dark tokens for the quiet screens */ html[data-ui="light"] #hub, html[data-ui="light"] #rooms, html[data-ui="light"] #menu, html[data-ui="light"] #pausePanel, html[data-ui="light"] #roundEnd, html[data-ui="light"] #final { --stone: #d4d8e4; --stone-hi: #f6f8fd; --stone-lo: #9aa1b8; --text: #1b2033; --muted: #555d78; --card: #eef1f8; --g-bg: rgba(255, 255, 255, 0.78); --panel: rgba(236, 240, 249, 0.94); color-scheme: light; } html[data-ui="light"] #rooms { background: linear-gradient(180deg, #eef1f8, #d9deec); } html[data-ui="light"] #menu.setup { background: transparent !important; } html[data-ui="light"] #pausePanel, html[data-ui="light"] #roundEnd, html[data-ui="light"] #final { background: rgba(236, 240, 249, 0.92); } html[data-ui="light"] .pod-btn { background: #d6d9e6; color: #1b2033; } html[data-ui="light"] .pod-btn b { color: #1b2033; text-shadow: none; } html[data-ui="light"] .pod-btn small { color: #444b66; } html[data-ui="light"] #menu .setup-title h2, html[data-ui="light"] #rooms h1 { color: #1b2033; text-shadow: none; } html[data-ui="light"] #menu .block h3 { color: #3b4260; text-shadow: none; } html[data-ui="light"] #menu .map b, html[data-ui="light"] #menu .pick b { color: #1b2033; } html[data-ui="light"] #menu .setup-foot { background: rgba(236, 240, 249, 0.96); } html[data-ui="dark"] #hub .hint { color: #c8cee8; text-shadow: none; } html[data-ui="dark"] #hub .ghost { color: #e8ecff !important; background: #343850; } /* the setup page: maps on the right, the player in the middle, the 3D character on the left */ #menu.setup { background: transparent !important; align-items: flex-start; } .setup-wrap { width: min(1240px, 100%); } .setup-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 16px; align-items: start; } .col-maps, .col-me { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--g-bg); border: 3px solid #05060e; border-radius: 6px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 3px 3px 0 var(--stone-hi), inset -3px -3px 0 var(--stone-lo), 0 5px 0 rgba(0, 0, 0, 0.35); } html[data-ui="dark"] .col-maps, html[data-ui="dark"] .col-me { background: rgba(24, 28, 46, 0.82); } #menu.zmenu .col-maps, #menu.zmenu .col-me { background: rgba(10, 18, 12, 0.86); } .col-view { min-height: 440px; pointer-events: none; } .name-input { width: 100%; font: inherit; font-weight: 700; font-size: 17px; color: var(--text); background: rgba(0, 0, 0, 0.22); border: 3px solid #05060e; border-radius: 3px; padding: 10px 12px; min-height: 48px; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35); } html[data-ui="light"] .name-input { background: #fff; } .name-input::placeholder { color: var(--muted); } .name-input:focus-visible { outline: 3px solid var(--ga, #4f8fe8); outline-offset: 2px; } .style-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .style-pick span { font-weight: 900; font-size: 15px; color: var(--text); } .style-pick button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--text); background: var(--stone); border: 3px solid #05060e; border-radius: 3px; box-shadow: inset 3px 3px 0 var(--stone-hi), inset -3px -3px 0 var(--stone-lo); } .style-pick button:active { transform: translateY(2px); } .style-pick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .sw-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; } .sw-row small { font-weight: 700; color: var(--muted); } .swatches { display: flex; flex-wrap: wrap; gap: 6px; } .swatches .sw { width: 26px; height: 26px; padding: 0; cursor: pointer; border: 3px solid #05060e; border-radius: 3px; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.3); } .swatches .sw.on { outline: 3px solid var(--ga, #4f8fe8); outline-offset: 1px; transform: scale(1.12); } .players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .players li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.18); border-radius: 3px; font-size: 14px; color: var(--text); } .players li.me b { color: var(--ga, #4f8fe8); } .players li span { font-size: 11px; font-weight: 700; color: var(--muted); } .players li span.ok { color: var(--ok, #4cd68a); } .players:empty { display: none; } #menu .setup-foot { position: sticky; bottom: 0; margin-top: 16px; } @media (max-width: 960px) { .setup-grid { grid-template-columns: minmax(0, 1fr); } .col-view { order: -1; min-height: 38vh; } .col-me { order: 0; } .col-maps { order: 1; } } /* in a match nothing floats over the play field: no messages, hints, objective text or role chips */ .in-game #objective, .in-game #powerup, .in-game #toasts, .in-game #banner, .in-game #floatTxt, .in-game #roster, .in-game .roundline, .in-game #keyhint, .in-game #blind p, .in-game .role, .in-game #infectfx b, .in-game #pointers { display: none !important; } #menu.setup { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-ui="light"] #menu.setup.zmenu { --text: #1b2033; --muted: #555d78; --card: #eef1f8; --g-bg: rgba(255, 255, 255, 0.78); --panel: rgba(236, 240, 249, 0.94); color-scheme: light; } html[data-ui="light"] #menu.zmenu .col-maps, html[data-ui="light"] #menu.zmenu .col-me { background: rgba(255, 255, 255, 0.8); } html[data-ui="light"] #menu.zmenu .setup-foot { background: rgba(236, 240, 249, 0.96); } /* first screen is one full window; below it, a calm text section you scroll to */ .hub-sheet { width: min(1100px, 100%); align-items: stretch; gap: 0; } .hub-first { min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; pointer-events: none; } .hub-first > * { pointer-events: auto; } .scroll-cue { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 12px; font-weight: 700; color: var(--muted); pointer-events: none; animation: cue 1.6s ease-in-out infinite; } .scroll-cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } @keyframes cue { 50% { transform: translate(-50%, 5px); } } .hub-info { position: relative; z-index: 3; margin-top: 8px; padding: 28px 18px 36px; background: var(--g-bg); border: 3px solid #05060e; border-radius: 6px; box-shadow: inset 3px 3px 0 var(--stone-hi), inset -3px -3px 0 var(--stone-lo), 0 5px 0 rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: start; } html[data-ui="dark"] .hub-info { background: rgba(24, 28, 46, 0.88); } .hub-info h2 { margin: 0 0 18px; text-align: center; font-size: clamp(20px, 3vw, 28px); font-weight: 900; color: var(--text); } .info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .info { padding: 16px; background: var(--stone); border: 3px solid #05060e; border-radius: 4px; box-shadow: inset 3px 3px 0 var(--stone-hi), inset -3px -3px 0 var(--stone-lo); } .info h3 { margin: 0 0 8px; font-family: var(--pix); font-size: 11px; font-weight: 400; line-height: 1.6; color: var(--text); direction: ltr; text-align: start; } .info p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); } .info.hide { border-top-color: #4f8fe8; } .info.laser { border-top-color: #8a6cff; } .info.bomb { border-top-color: #ff8a1a; } .info.zombie { border-top-color: #d4343c; } .info-foot { margin: 20px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); } @media (max-width: 900px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .info-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } } .scroll-cue { position: static; transform: none; flex-direction: row; gap: 4px; margin-top: 0; animation: none; opacity: 0.85; } .scroll-cue svg { width: 18px; height: 18px; } /* ====================================================================== Natural page: the menus are ordinary content that scrolls with the window (wheel, scrollbar, arrow keys, PageUp/PageDown, touch). The 3D scene is a fixed backdrop. During a match the page stops scrolling. ====================================================================== */ html { height: auto; min-height: 100%; overflow-x: auto; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; } body { height: auto; min-height: 100%; overflow: visible; touch-action: pan-x pan-y; user-select: auto; -webkit-user-select: auto; } html.in-game, body.in-game { height: 100%; overflow: hidden; scroll-behavior: auto; user-select: none; -webkit-user-select: none; touch-action: none; } html.force-land, html.force-land body { overflow: hidden; } html.in-game .panel { display: none; } /* menu screens are blocks in the page, not fixed layers */ #hub, #rooms, #menu { position: relative; inset: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; touch-action: pan-x pan-y; display: flex; justify-content: center; align-items: flex-start; pointer-events: auto; } #rooms { background: var(--panel) !important; align-items: center; } #hub .hub-first { pointer-events: none; } /* result / pause layers stay on top of the match */ #pausePanel, #roundEnd, #final { position: fixed; inset: 0; overflow: auto; } html.in-game #pausePanel, html.in-game #roundEnd, html.in-game #final { display: flex; } .user-select-text, .panel { user-select: text; -webkit-user-select: text; } /* one glass look for every card on every menu screen */ :root { --glass: rgba(255, 255, 255, 0.64); --glass-bd: rgba(255, 255, 255, 0.75); --glass-sh: 0 12px 34px -14px rgba(30, 40, 80, 0.4); --tile: rgba(60, 70, 110, 0.08); --tile-bd: rgba(60, 70, 110, 0.16); } html[data-ui="dark"] { --glass: rgba(22, 27, 46, 0.66); --glass-bd: rgba(255, 255, 255, 0.12); --glass-sh: 0 14px 36px -14px rgba(0, 0, 0, 0.75); --tile: rgba(255, 255, 255, 0.06); --tile-bd: rgba(255, 255, 255, 0.12); } html .col-maps, html .col-me, html .hub-info, html #rooms .sheet, html #roundEnd .sheet, html #final .sheet, html #pausePanel .sheet { background: var(--glass) !important; border: 1px solid var(--glass-bd) !important; border-radius: 22px !important; box-shadow: var(--glass-sh) !important; backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); } html #menu.zmenu .col-maps, html #menu.zmenu .col-me { background: rgba(12, 22, 14, 0.7) !important; border-color: rgba(130, 255, 150, 0.16) !important; } /* setup page: maps on the right, character on the left, nothing fixed on top of anything */ html #menu.setup .setup-wrap { width: min(1180px, 100%); padding: 56px 0 40px; display: flex; flex-direction: column; gap: 22px; } html #menu .setup-head { align-items: center; gap: 16px; } html #menu .setup-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } html #menu .setup-title h2 { font-family: var(--font); font-size: clamp(24px, 4vw, 34px); font-weight: 900; text-shadow: none; letter-spacing: 0; color: var(--text); margin: 0; } html #menu .setup-title p { margin: 0; color: var(--muted); font-size: 14px; } html #menu .game-icon { width: 64px; margin: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25)); } html #menu .back-btn, html #menu .conn-chip { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 999px; box-shadow: var(--glass-sh); color: var(--text); backdrop-filter: blur(12px); } html #menu .setup-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; } html #menu .col-maps { padding: 20px; gap: 18px; } html #menu .col-char { display: flex; flex-direction: column; gap: 16px; min-width: 0; } html #menu .col-view { min-height: 340px; } html #menu .col-me { padding: 20px; gap: 18px; } html #menu .block { gap: 10px; } html #menu .block h3 { font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); text-shadow: none; margin: 0; } html #menu .xp-line .bar { height: 6px; border-radius: 999px; border: 0; background: var(--tile-bd); } html #menu .xp-line .bar b { background: var(--ga); border-radius: inherit; } /* map cards */ html #menu #maps { grid-template-columns: minmax(0, 1fr); gap: 10px; } html #menu .map { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; text-align: start; background: var(--tile); border: 1px solid var(--tile-bd); border-radius: 16px; box-shadow: none; color: var(--text); transition: transform 0.15s, border-color 0.15s, background 0.15s; } html #menu .map:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ga); } html #menu .map[aria-pressed="true"] { background: color-mix(in srgb, var(--ga) 14%, transparent); border-color: var(--ga); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ga) 35%, transparent); } html #menu .map .sw { width: 46px; height: 46px; min-height: 0; padding: 6px; border-radius: 12px; border: 1px solid var(--tile-bd); background: var(--tile); } html #menu .map .tx b { font-size: 16px; font-weight: 800; color: var(--text); } html #menu .map .tx small { font-size: 13px; color: var(--muted); line-height: 1.5; } html #menu .map em { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--tile-bd); color: var(--muted); } html #menu .map[aria-pressed="true"] em { background: var(--ga); color: #fff; } html #menu .map.locked { opacity: 0.55; } /* match type and partner */ html #menu .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--tile); border: 1px solid var(--tile-bd); border-radius: 16px; } html #menu .seg-btn { background: transparent; border: 0; border-radius: 12px; box-shadow: none; color: var(--muted); padding: 10px 8px; } html #menu .seg-btn b { font-size: 15px; color: inherit; } html #menu .seg-btn[aria-pressed="true"] { background: var(--ga); color: #fff; box-shadow: none; } html #menu .pick { background: var(--tile); border: 1px solid var(--tile-bd); border-radius: 999px; box-shadow: none; color: var(--text); } html #menu .pick[aria-pressed="true"] { border-color: var(--ga); background: color-mix(in srgb, var(--ga) 14%, transparent); box-shadow: none; } html #menu .pick .face { border-radius: 8px; border: 2px solid var(--c); } /* the player's own controls */ html #menu .name-input { background: var(--tile); border: 1px solid var(--tile-bd); border-radius: 14px; box-shadow: none; color: var(--text); padding: 12px 14px; font-size: 16px; } html #menu .name-input:focus-visible { outline: 2px solid var(--ga); outline-offset: 1px; } html #menu .style-pick button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--tile-bd); background: var(--tile); box-shadow: none; color: var(--text); } html #menu .swatches .sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } html #menu .swatches .sw.on { outline: 2px solid var(--ga); outline-offset: 2px; transform: scale(1.1); } html #menu .players li { background: var(--tile); border-radius: 10px; } /* Start sits at the end of the player's card, in the normal flow */ html #menu .start-box { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 4px; } html #menu .start-box .hint { margin: 0; text-align: center; font-size: 13px; color: var(--muted); min-height: 1.2em; } html #menu .cta { width: 100%; min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 0; background: var(--ga); color: #fff; font-family: var(--font); font-size: 18px; font-weight: 900; text-shadow: none; box-shadow: 0 12px 26px -10px var(--ga); } html #menu .cta::after { display: none; } html #menu .cta.is-ready { background: var(--ok, #4cd68a); box-shadow: 0 12px 26px -10px var(--ok, #4cd68a); } html #menu .cta:disabled { opacity: 0.55; box-shadow: none; filter: grayscale(0.4); } html #menu .link { align-self: center; } /* first screen */ html .hub-info { margin: 24px 0 48px; padding: 26px 20px 30px; } html .hub-info .info { background: var(--tile); border: 1px solid var(--tile-bd); border-radius: 16px; box-shadow: none; border-top: 3px solid var(--tile-bd); } html .hub-info .info h3 { font-family: var(--font); font-size: 16px; font-weight: 900; color: var(--text); } html .hub-info .info p { color: var(--muted); } html .pod-btn { background: var(--glass); color: var(--text); border: 1px solid var(--glass-bd); border-top: 3px solid currentColor; border-radius: 14px; box-shadow: var(--glass-sh); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html .pod-btn b { font-family: var(--font); font-size: 15px; font-weight: 900; color: var(--text); text-shadow: none; } html .pod-btn small { color: var(--muted); } html .pod-btn.hide { color: #4f8fe8; } html .pod-btn.laser { color: #8a6cff; } html .pod-btn.bomb { color: #ff8a1a; } html .pod-btn.zombie { color: #d4343c; } html .pod-btn b, html .pod-btn small { color: var(--text); } html .pod-btn small { color: var(--muted); } html .pod-btn.hide, html .pod-btn.laser, html .pod-btn.bomb, html .pod-btn.zombie { box-shadow: var(--glass-sh); } /* tiny sun / moon in the top-right corner */ html .theme-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-bd); background: var(--glass); box-shadow: var(--glass-sh); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html .theme-icon svg { width: 18px; height: 18px; } html[data-ui="dark"] .theme-icon { color: #ffe27a; } html[data-ui="light"] .theme-icon { color: #3b4260; } @media (max-width: 900px) { html #menu .setup-grid { grid-template-columns: minmax(0, 1fr); } html #menu .col-char { order: -1; } html #menu .col-view { min-height: 300px; } } @media (max-width: 520px) { html #menu.setup .setup-wrap { padding-top: 60px; } html #menu .setup-head { gap: 10px; } } html #menu .col-view { min-height: 420px; } /* help: a small round "?" beside the sun/moon opens the explanation of the four games */ html .help-icon { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(54px + env(safe-area-inset-right, 0px)); z-index: 40; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 1px solid var(--glass-bd); background: var(--glass); box-shadow: var(--glass-sh); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); } .help-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[data-ui="dark"] .help-icon { color: #cfd6f3; } html[data-ui="light"] .help-icon { color: #3b4260; } .in-game .help-icon { display: none; } html #modesHelp { --text: #eef2ff; --muted: #a3aed0; } html[data-ui="light"] #modesHelp { --text: #1b2033; --muted: #555d78; } html #modesHelp .box.wide { width: min(980px, 94vw); max-height: 90vh; overflow: auto; text-align: start; padding: 26px; color: var(--text); background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 22px; box-shadow: var(--glass-sh); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html #modesHelp h3 { margin: 0 0 16px; text-align: center; font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: var(--text); } html #modesHelp .info { background: var(--tile); border: 1px solid var(--tile-bd); border-top: 3px solid var(--tile-bd); border-radius: 16px; box-shadow: none; padding: 14px; } html #modesHelp .info h4 { margin: 0 0 6px; font-size: 16px; font-weight: 900; color: var(--text); direction: ltr; text-align: start; } html #modesHelp .info p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); } html #modesHelp .info.hide { border-top-color: #4f8fe8; } html #modesHelp .info.laser { border-top-color: #8a6cff; } html #modesHelp .info.bomb { border-top-color: #ff8a1a; } html #modesHelp .info.zombie { border-top-color: #d4343c; } html #modesHelp .ctl { margin: 16px 0; text-align: center; font-size: 13px; color: var(--muted); } html #modesHelp .cta { display: block; margin: 0 auto; width: min(260px, 100%); min-height: 48px; border-radius: 999px; border: 0; background: #8a6cff; color: #fff; font-family: var(--font); font-weight: 900; text-shadow: none; box-shadow: 0 10px 24px -10px #8a6cff; } html #modesHelp .cta::after { display: none; } html #modesHelp .info-grid { margin-bottom: 4px; } /* weapon icons are line drawings: give them a stroke so they show */ #hotbar button i { display: grid; place-items: center; width: 28px; height: 28px; } #hotbar button i svg { width: 26px; height: 26px; fill: none; stroke: #f2f4ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #hotbar button.on i svg { stroke: #ffd45a; } #hotbar button.na i svg { stroke: #8a92b0; } /* the first screen is the diorama; under it, a quiet footer you scroll to */ html .hub-foot { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 16px 48px; margin: 0 auto; width: min(960px, 100%); box-sizing: border-box; } html .hub-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } html .hub-link { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 150px; padding: 10px 18px; font: inherit; cursor: pointer; color: var(--text); background: var(--glass); border: 1px solid var(--glass-bd); border-top: 3px solid currentColor; border-radius: 14px; box-shadow: var(--glass-sh); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.15s; } html .hub-link b { font-weight: 900; font-size: 15px; direction: ltr; color: var(--text); } html .hub-link small { font-size: 12px; font-weight: 700; color: var(--muted); } html .hub-link.hide { color: #4f8fe8; } html .hub-link.laser { color: #8a6cff; } html .hub-link.bomb { color: #ff8a1a; } html .hub-link.zombie { color: #d4343c; } html .hub-link:hover:not(:disabled) { transform: translateY(-3px); } html .hub-link:disabled { cursor: default; } html .hub-link b, html .hub-link small { color: var(--text); } html .hub-link small { color: var(--muted); } html .hub-note { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; } html .scroll-down { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 3; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 1px solid var(--glass-bd); background: var(--glass); box-shadow: var(--glass-sh); color: var(--text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 0.2s; } .scroll-down svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .in-game .scroll-down { display: none; } /* ====================================================================== Lively colour: bright sky and meadow behind everything, each game in its own bold colour with a glowing edge, soft bobbing and pop-in motion, no grey blocks ====================================================================== */ :root { --c-hide: #2f8cff; --c-laser: #9b5cff; --c-bomb: #ff8a1a; --c-zombie: #e63946; } html .pod-btn, html .hub-link { --pc: currentColor; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 92%, #fff 8%), color-mix(in srgb, var(--pc) 72%, #000 28%)); border: 3px solid rgba(255, 255, 255, 0.85); border-top-width: 3px; box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 50%, #000 50%), 0 0 22px color-mix(in srgb, var(--pc) 70%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.45); border-radius: 18px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); animation: pod-pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both, pod-float 3.2s ease-in-out infinite; } html .pod-btn.hide, html .hub-link.hide { --pc: var(--c-hide); } html .pod-btn.laser, html .hub-link.laser { --pc: var(--c-laser); } html .pod-btn.bomb, html .hub-link.bomb { --pc: var(--c-bomb); } html .pod-btn.zombie, html .hub-link.zombie { --pc: var(--c-zombie); } html .pod-btn.laser, html .hub-link.laser { animation-delay: 0.08s, 0.4s; } html .pod-btn.bomb, html .hub-link.bomb { animation-delay: 0.16s, 0.8s; } html .pod-btn.zombie, html .hub-link.zombie { animation-delay: 0.24s, 1.2s; } html .pod-btn b, html .hub-link b { font-family: var(--font); font-weight: 900; font-size: 19px; direction: rtl; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); } html .pod-btn small, html .hub-link small { color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 12px; } html .pod-btn:hover:not(:disabled), html .pod-btn:focus-visible { filter: brightness(1.12) saturate(1.1); box-shadow: 0 8px 0 color-mix(in srgb, var(--pc) 50%, #000 50%), 0 0 34px var(--pc), inset 0 2px 0 rgba(255, 255, 255, 0.5); } html .hub-link:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-3px) scale(1.03); } @keyframes pod-pop { from { opacity: 0; transform: translate(-50%, 24px) scale(0.6); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes pod-float { 50% { margin-top: -5px; } } html .hub-link { animation-name: link-pop, link-float; } @keyframes link-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } } @keyframes link-float { 50% { translate: 0 -4px; } } html .pod-btn.pod-btn { transform: translate(-50%, 0); } /* the first screen: bright floor of the meadow under the footer */ html #hub .hint { color: #0d2f66; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } html[data-ui="dark"] #hub .hint { color: #e9e4ff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } html .hub-note { color: #0d2f66; } html[data-ui="dark"] .hub-note { color: #e9e4ff; } html .hub-foot { background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.0)); } /* small round icons in the corner: sun, moon and help, each with its own colour */ html .theme-icon, html .help-icon { border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 14px rgba(255, 255, 255, 0.45); transition: transform 0.15s, box-shadow 0.15s; } html[data-ui="light"] .theme-icon { background: linear-gradient(180deg, #7a63ff, #4b3bd6); color: #ffe27a; } html[data-ui="dark"] .theme-icon { background: linear-gradient(180deg, #ffd45a, #ff9a1f); color: #7a3a00; } html .help-icon { background: linear-gradient(180deg, #ff7ab8, #e63e8a); color: #fff; } html .theme-icon:hover, html .help-icon:hover { transform: scale(1.12) rotate(-6deg); } html .scroll-down { background: linear-gradient(180deg, #4fd6a2, #1fa874); color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); } /* setup page: tinted glass with a glowing edge in the game's own colour */ html #menu.setup { --ga: var(--c-hide); } html #menu.setup[data-g="laser"] { --ga: var(--c-laser); } html #menu.setup[data-g="bomb"] { --ga: var(--c-bomb); } html #menu.setup[data-g="zombie"] { --ga: var(--c-zombie); } html .col-maps, html .col-me { border: 2px solid color-mix(in srgb, var(--ga) 70%, #fff) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ga) 22%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--ga) 60%, #000), 0 0 30px color-mix(in srgb, var(--ga) 35%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--ga) 12%, var(--glass)), var(--glass)) !important; } html #menu .map { background: color-mix(in srgb, var(--mc, var(--ga)) 14%, transparent); border: 2px solid color-mix(in srgb, var(--mc, var(--ga)) 45%, transparent); } html #menu .map:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); box-shadow: 0 0 20px color-mix(in srgb, var(--mc, var(--ga)) 55%, transparent); } html #menu .map[aria-pressed="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--mc, var(--ga)) 34%, transparent), color-mix(in srgb, var(--mc, var(--ga)) 12%, transparent)); border-color: var(--mc, var(--ga)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc, var(--ga)) 40%, transparent), 0 0 24px color-mix(in srgb, var(--mc, var(--ga)) 55%, transparent); } html #menu .map .sw { background: color-mix(in srgb, var(--mc, var(--ga)) 22%, transparent); border-color: color-mix(in srgb, var(--mc, var(--ga)) 55%, transparent); } html #menu .map em { background: color-mix(in srgb, var(--mc, var(--ga)) 30%, transparent); color: var(--text); } html #menu .map[aria-pressed="true"] em { background: var(--mc, var(--ga)); color: #fff; } html #menu .seg { background: color-mix(in srgb, var(--ga) 10%, transparent); border-color: color-mix(in srgb, var(--ga) 40%, transparent); } html #menu .seg-btn[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--ga) 90%, #fff), var(--ga)); box-shadow: 0 0 18px color-mix(in srgb, var(--ga) 60%, transparent); } html #menu .style-pick button { background: linear-gradient(180deg, color-mix(in srgb, var(--ga) 85%, #fff), var(--ga)); color: #fff; border: 2px solid rgba(255, 255, 255, 0.8); } html #menu .style-pick button:hover { transform: scale(1.1); } html #menu .swatches .sw { transition: transform 0.15s; } html #menu .swatches .sw:hover { transform: scale(1.18); } html #menu .name-input { border: 2px solid color-mix(in srgb, var(--ga) 50%, transparent); } html #menu .name-input:focus-visible { outline: none; border-color: var(--ga); box-shadow: 0 0 16px color-mix(in srgb, var(--ga) 55%, transparent); } html #menu .cta { background: linear-gradient(180deg, color-mix(in srgb, var(--ga) 80%, #fff), var(--ga) 55%, color-mix(in srgb, var(--ga) 80%, #000)); border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 6px 0 color-mix(in srgb, var(--ga) 50%, #000), 0 0 26px color-mix(in srgb, var(--ga) 65%, transparent); animation: cta-glow 2.2s ease-in-out infinite; } html #menu .cta:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--ga) 50%, #000), 0 0 18px var(--ga); } html #menu .cta.is-ready { background: linear-gradient(180deg, #6ff0a8, #1fa874); } @keyframes cta-glow { 50% { box-shadow: 0 6px 0 color-mix(in srgb, var(--ga) 50%, #000), 0 0 40px var(--ga); } } html #menu .back-btn, html #menu .conn-chip { border: 2px solid color-mix(in srgb, var(--ga) 60%, #fff); } html #menu .setup-title h2 { background: linear-gradient(90deg, var(--ga), color-mix(in srgb, var(--ga) 55%, #ffcf4a)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: clamp(28px, 4.6vw, 42px); } html #menu.zmenu .col-maps, html #menu.zmenu .col-me { background: linear-gradient(180deg, rgba(40, 8, 12, 0.7), rgba(10, 18, 12, 0.78)) !important; } /* help dialog in bright colours too */ html #modesHelp .info { border-top-width: 5px; background: color-mix(in srgb, var(--pc, #888) 10%, var(--tile)); } html #modesHelp .info.hide { --pc: var(--c-hide); } html #modesHelp .info.laser { --pc: var(--c-laser); } html #modesHelp .info.bomb { --pc: var(--c-bomb); } html #modesHelp .info.zombie { --pc: var(--c-zombie); } html #modesHelp .info h4 { color: var(--pc); direction: rtl; font-size: 19px; } html #modesHelp .cta { background: linear-gradient(180deg, #b58cff, #7a4fe0); border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 5px 0 #4a2da6, 0 0 22px rgba(138, 108, 255, 0.6); } /* third-person play: no scope button, the cursor is the aim */ @media (prefers-reduced-motion: reduce) { html .pod-btn, html .hub-link, html #menu .cta { animation: none; } } html .pod-btn, html .hub-link { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 92%, #fff 8%), color-mix(in srgb, var(--pc) 72%, #000 28%)) !important; color: #fff !important; border: 3px solid rgba(255, 255, 255, 0.85) !important; } html .pod-btn b, html .hub-link b { color: #fff !important; } html .pod-btn small, html .hub-link small { color: rgba(255, 255, 255, 0.92) !important; } /* ====================================================================== Game setup page, original pixel look: navy pixel cards with a yellow selection, the big yellow/pink title, the green button. Everything small enough to sit on one page. ====================================================================== */ html #menu { --text: #f5f7ff; --muted: #b7c0e6; --navy: #17205c; --navy-2: #202c7a; --ink: #05060e; --ga: #ffb400; color: var(--text); } html #menu.setup .setup-wrap { width: min(1100px, 100%); padding: 52px 0 28px; gap: 14px; } /* title block: small pixel line, big yellow word with the pink 3D shadow, tilted splash */ html #menu .setup-head { align-items: center; gap: 12px; flex-wrap: wrap; } html #menu .back-btn { background: var(--navy); color: #fff; border: 3px solid var(--ink); border-radius: 3px; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28), inset -2px -2px 0 rgba(0, 0, 0, 0.35), 0 4px 0 var(--ink); backdrop-filter: none; padding: 7px 14px; } html #menu .conn-chip { background: var(--navy); color: #fff; border: 3px solid var(--ink); border-radius: 3px; box-shadow: 0 4px 0 var(--ink); backdrop-filter: none; } html #menu .setup-title { position: relative; display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } html #menu .setup-title .tt { position: relative; display: flex; flex-direction: column; gap: 0; } html #menu .setup-title .eyebrow { font-family: var(--pix); font-size: 10px; letter-spacing: 0.3em; color: var(--pink); text-align: start; margin: 0 0 2px; } html #menu .setup-title h2 { margin: 0; font-family: var(--font); font-weight: 900; font-size: clamp(42px, 7vw, 72px); line-height: 1.1; letter-spacing: 0; color: var(--accent); background: none; -webkit-text-fill-color: var(--accent); text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 rgba(0, 0, 0, 0.3); animation: title-bob 3.4s ease-in-out infinite; } html #menu .setup-title .splash { position: absolute; inset-inline-start: 100%; top: 10%; white-space: nowrap; font-family: var(--font); font-weight: 900; font-size: 17px; color: #ffe27a; text-shadow: 2px 2px 0 #5a3a00; transform: rotate(-9deg); transform-origin: left center; animation: splash-pulse 1s ease-in-out infinite alternate; } html #menu .game-icon { width: 58px; margin: 0; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); } @keyframes title-bob { 50% { transform: translateY(-3px) rotate(-0.6deg); } } @keyframes splash-pulse { to { transform: rotate(-9deg) scale(1.12); } } /* the two cards */ html #menu .setup-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; } html .col-maps, html .col-me { background: var(--navy) !important; border: 3px solid var(--ink) !important; border-radius: 4px !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 5px 0 var(--ink) !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 14px; gap: 12px; } html #menu.zmenu .col-maps, html #menu.zmenu .col-me { background: #12261a !important; } html #menu .block { gap: 7px; } html #menu .block h3 { font-family: var(--pix); font-size: 9px; font-weight: 400; letter-spacing: 0; color: #cfd6f3; text-shadow: 2px 2px 0 #000; margin: 0; } html #menu .xp-line { font-family: var(--pix); font-size: 9px; color: #cfd6f3; } html #menu .xp-line .bar { height: 8px; border: 2px solid var(--ink); border-radius: 0; background: #0a0f2e; } html #menu .xp-line .bar b { background: #5aa02c; border-radius: 0; } /* maps: two small cards per row */ html #menu #maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html #menu .map { padding: 8px 10px; gap: 9px; border-radius: 3px; background: var(--navy-2); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.3); color: #fff; } html #menu .map:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 0 14px rgba(255, 180, 0, 0.45); } html #menu .map[aria-pressed="true"] { background: #2f45b8; border-color: #ffb400; box-shadow: inset 0 0 0 2px #ffb400, 0 0 16px rgba(255, 180, 0, 0.55); } html #menu .map .sw { width: 32px; height: 32px; padding: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.3); border: 2px solid var(--ink); flex: none; } html #menu .map .tx b { font-size: 13px; font-weight: 900; color: #fff; } html #menu .map .tx small { font-size: 10.5px; line-height: 1.3; color: #c3cbee; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } html #menu .map em { font-size: 10px; padding: 1px 7px; border-radius: 2px; background: rgba(0, 0, 0, 0.4); color: #ffe27a; } html #menu .map[aria-pressed="true"] em { background: #ffb400; color: #2a1d00; } html #menu .map.locked { opacity: 0.55; } /* match type and partner */ html #menu .seg { background: transparent; border: 0; padding: 0; gap: 8px; } html #menu .seg-btn { background: var(--navy-2); border: 3px solid var(--ink); border-radius: 3px; color: #fff; padding: 7px 8px; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.3); } html #menu .seg-btn b { font-size: 13px; } html #menu .seg-btn small { font-size: 10px; color: #c3cbee; } html #menu .seg-btn[aria-pressed="true"] { background: #ffb400; color: #2a1d00; box-shadow: 0 0 14px rgba(255, 180, 0, 0.55); } html #menu .seg-btn[aria-pressed="true"] small { color: #5a3a00; } html #menu .pick { background: var(--navy-2); border: 3px solid var(--ink); border-radius: 3px; color: #fff; padding: 3px 10px 3px 4px; } html #menu .pick .face { border-radius: 2px; border: 2px solid var(--ink); } html #menu .pick[aria-pressed="true"] { border-color: #ffb400; background: #2f45b8; } /* the player's card: tiny */ html #menu .col-char { gap: 8px; } html #menu .col-view { min-height: 300px; } html #menu .col-me { width: min(270px, 100%); padding: 10px 12px; gap: 8px; } html #menu .name-input { background: #0a0f2e; border: 3px solid var(--ink); border-radius: 3px; color: #fff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5); padding: 6px 10px; min-height: 34px; font-size: 14px; } html #menu .name-input:focus-visible { outline: 3px solid #ffb400; outline-offset: 1px; box-shadow: none; border-color: var(--ink); } html #menu .style-pick button { width: 28px; height: 28px; border-radius: 3px; background: #ffb400; color: #2a1d00; border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45); } html #menu .style-pick span { color: #fff; } html #menu .swatches .sw { border-radius: 2px; width: 19px; height: 19px; border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4); } html #menu .swatches .sw.on { outline: 2px solid #ffb400; outline-offset: 1px; transform: none; } html #menu .players li { background: rgba(0, 0, 0, 0.3); color: #fff; } /* the original green button */ html #menu .cta { background: #5aa02c; color: #fff; text-shadow: 2px 2px 0 #1b3a0c; border: 4px solid #0e1d07; border-radius: 3px; box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 6px 0 #0e1d07; min-height: 46px; font-size: 16px; animation: none; } html #menu .cta:active { transform: translateY(4px); box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 2px 0 #0e1d07; } html #menu .cta.is-ready { background: #3f8fd8; box-shadow: inset -4px -6px 0 #2a64a8, inset 4px 4px 0 #86c0f0, 0 6px 0 #0e1d07; } html #menu .cta:disabled { filter: grayscale(0.7) brightness(0.85); } html #menu .link { color: #cfd6f3; } html #menu .start-box .hint { color: #cfd6f3; } @media (max-width: 900px) { html #menu .setup-grid { grid-template-columns: minmax(0, 1fr); } html #menu .col-view { min-height: 260px; } html #menu #maps { grid-template-columns: repeat(2, minmax(0, 1fr)); } html #menu .setup-title .splash { display: none; } } @media (max-width: 480px) { html #menu #maps { grid-template-columns: minmax(0, 1fr); } html #menu .setup-title h2 { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { html #menu .setup-title h2, html #menu .setup-title .splash { animation: none; } } /* one page: the 3D character and the small player card sit side by side, maps on the other side */ html #menu .setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } html #menu .col-char { flex-direction: row; align-items: stretch; gap: 10px; } html #menu .col-view { flex: 1 1 auto; min-width: 150px; min-height: 340px; } html #menu .col-me { flex: none; width: 236px; align-self: flex-start; } html #menu .setup-title h2 { text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 rgba(0, 0, 0, 0.3) !important; font-size: clamp(38px, 5.4vw, 60px); -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; background: none !important; } html #menu .block h3, html #menu .xp-line, html #menu .xp-line span { color: #cfd6f3 !important; } html #menu .sw-row small { color: #cfd6f3; } @media (max-width: 900px) { html #menu .col-char { flex-direction: column; align-items: center; } html #menu .col-view { width: 100%; min-height: 250px; } html #menu .col-me { width: min(300px, 100%); } } /* name + look live behind their own icon, outside the main card */ html #menu .col-char { position: relative; } html #menu .look-icon { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 6; display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; font: 900 14px var(--font); color: #2a1d00; background: #ffb400; border: 3px solid var(--ink); border-radius: 3px; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 var(--ink); } html #menu .look-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } html #menu .look-icon[aria-expanded="true"] { background: #ff6fb0; color: #fff; } html #menu .look-icon:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 var(--ink); } html #menu .look-panel { position: absolute; top: 56px; inset-inline-start: 8px; z-index: 7; width: min(290px, calc(100% - 16px)); display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; background: var(--navy); border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 8px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, 0.5); animation: look-in 0.18s ease-out; } html #menu .look-panel[hidden] { display: none; } html #menu .look-head { display: flex; align-items: center; justify-content: space-between; font: 900 16px var(--font); color: var(--accent); } html #menu .look-x { width: 28px; height: 28px; font: 900 20px/1 var(--font); color: #fff; background: #c8344a; border: 3px solid var(--ink); border-radius: 3px; cursor: pointer; padding: 0; } html #menu .col-me { width: 236px; } @keyframes look-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } } @media (max-width: 900px) { html #menu .look-panel { position: absolute; } html #menu .col-me { width: min(300px, 100%); } } /* ===== character page (opened from the first screen) and the way back from the rooms screen ===== */ html #charPage { --navy: #17205c; --navy-2: #202c7a; --ink: #05060e; color: #f5f7ff; } html #charPage .sheet { width: min(980px, 100%); margin: 0 auto; padding: 56px 16px 28px; } html #charPage .char-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 16px; align-items: start; margin-top: 12px; } html #charPage .char-view { min-height: min(62vh, 520px); } html #charPage .char-edit { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--navy); border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 6px 0 var(--ink); } html #charPage .block { display: flex; flex-direction: column; gap: 8px; } html #charPage .block h3 { margin: 0; font-family: var(--pix); font-size: 10px; font-weight: 400; color: #cfd6f3; text-shadow: 2px 2px 0 #000; } html #charPage .name-input { background: #0a0f2e; border: 3px solid var(--ink); border-radius: 3px; color: #fff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5); padding: 8px 12px; min-height: 40px; font-size: 16px; width: 100%; box-sizing: border-box; } html #charPage .name-input:focus-visible { outline: 3px solid #ffb400; outline-offset: 1px; } html #charPage .style-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font-weight: 900; } html #charPage .style-pick button { width: 34px; height: 34px; border-radius: 3px; background: #ffb400; color: #2a1d00; border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45); display: grid; place-items: center; cursor: pointer; padding: 0; } html #charPage .style-pick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } html #charPage .sw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html #charPage .sw-row small { color: #cfd6f3; font-weight: 800; font-size: 13px; min-width: 96px; } html #charPage .swatches { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } html #charPage .swatches .sw { width: 26px; height: 26px; border-radius: 3px; border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4); cursor: pointer; padding: 0; } html #charPage .swatches .sw.on { outline: 3px solid #ffb400; outline-offset: 1px; } html #charPage .link { background: none; border: 0; color: #cfd6f3; text-decoration: underline; cursor: pointer; font: inherit; align-self: center; } html #charPage .cta { background: #5aa02c; color: #fff; text-shadow: 2px 2px 0 #1b3a0c; border: 4px solid #0e1d07; border-radius: 3px; box-shadow: inset -4px -6px 0 #3d7a1c, inset 4px 4px 0 #8fdc55, 0 6px 0 #0e1d07; min-height: 48px; font-size: 18px; cursor: pointer; } html .look-icon { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; font: 900 14px var(--font); color: #2a1d00; background: #ffb400; border: 3px solid #05060e; border-radius: 3px; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 #05060e; } html .look-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } html .look-icon:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 #05060e; } html #menu .look-icon { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 6; } html #hub .hub-me { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 16px; z-index: 12; font-size: 16px; padding: 10px 16px 10px 12px; animation: pod-pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; } html #rooms .back-btn { align-self: flex-start; margin-bottom: 6px; } @media (max-width: 760px) { html #charPage .char-grid { grid-template-columns: minmax(0, 1fr); } html #charPage .char-view { min-height: 260px; } } /* character page: the character on the left, the properties on the right; stacked on a phone (character first) */ html #charPage .char-grid { width: 100%; } html #charPage .char-edit { order: -1; } html #charPage .char-view { min-height: min(66vh, 540px); } html #charPage .title-wrap h1 { font-size: clamp(30px, 4.6vw, 48px); } @media (max-width: 760px) { html #charPage .char-edit { order: 0; } html #charPage .char-view { min-height: 300px; } html #charPage .sheet { padding-top: 52px; } } /* the first screen scrolls as one piece: under the 3D scene the page continues in the colour of the grass */ html[data-ui="light"] body { background: #86d36a; } html[data-ui="dark"] body { background: #234a3a; } html #hub .hub-me { animation: none; } html #hub .hub-foot { background: transparent; } /* the character page shows the 3D scene through it, like the setup page: no glass layer on top */ html #charPage { position: relative; inset: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex; justify-content: center; align-items: flex-start; pointer-events: auto; } html #charPage[hidden] { display: none; } html #charPage .char-view { pointer-events: none; } html #hub .hub-me { bottom: auto; top: calc(74px + env(safe-area-inset-top, 0px)); inset-inline-start: auto; left: 16px; right: auto; } html #charPage .opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } html #charPage .opt-row small { color: #cfd6f3; font-weight: 800; font-size: 13px; min-width: 96px; } html #charPage .opt-row .style-pick { flex: 1; } html #charPage .back-btn { align-self: flex-start; background: var(--navy); color: #fff; border: 3px solid var(--ink); border-radius: 3px; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28), 0 4px 0 var(--ink); padding: 7px 14px; font: 900 15px var(--font); cursor: pointer; } html #charPage .style-pick span { color: #fff !important; text-align: center; flex: 1; font-weight: 900; } /* the character page fits one screen: the character on the left, one compact card with two columns on the right */ html #charPage .sheet { padding: 44px 14px 14px; gap: 6px; } html #charPage .eyebrow { display: none; } html #charPage .title-wrap h1 { font-size: clamp(24px, 3.4vw, 34px); } html #charPage .char-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 12px; margin-top: 0; } html #charPage .char-view { min-height: min(72vh, 520px); } html #charPage .char-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 10px 12px; align-items: start; } html #charPage .char-edit > .block:first-child, html #charPage .char-edit > .cta { grid-column: 1 / -1; } html #charPage .block { gap: 5px; } html #charPage .block h3 { font-size: 9px; } html #charPage .name-input { min-height: 32px; padding: 4px 10px; font-size: 14px; } html #charPage .style-pick button { width: 26px; height: 26px; } html #charPage .style-pick svg { width: 14px; height: 14px; } html #charPage .style-pick span { font-size: 13px; } html #charPage .sw-row { flex-direction: column; align-items: stretch; gap: 3px; } html #charPage .sw-row small, html #charPage .opt-row small { min-width: 0; font-size: 11.5px; } html #charPage .swatches { justify-content: flex-start; gap: 4px; } html #charPage .swatches .sw { width: 18px; height: 18px; } html #charPage .opt-row { flex-direction: column; align-items: stretch; gap: 3px; margin-top: 2px; } html #charPage .link { font-size: 12px; } html #charPage .cta { min-height: 38px; font-size: 16px; } @media (max-width: 760px) { html #charPage .char-grid { grid-template-columns: minmax(0, 1fr); } html #charPage .char-view { min-height: 230px; } html #charPage .char-edit { grid-template-columns: minmax(0, 1fr); } } html #charPage .sheet { margin: 0 auto; padding-top: 40px; } html #charPage .title-wrap { margin: 0; } html #charPage .swatches { gap: 3px; flex-wrap: nowrap; } html #charPage .swatches .sw { width: 17px; height: 17px; flex: none; } html #charPage .back-btn { position: absolute; top: 8px; inset-inline-start: 14px; } html #charPage .char-view { min-height: min(66vh, 480px); } html #charPage .theme-tabs { display: flex; gap: 4px; } html #charPage .theme-tab { flex: 1; min-width: 0; padding: 6px 4px; font: 900 12.5px var(--font); color: #fff; background: var(--navy-2); border: 3px solid var(--ink); border-radius: 3px; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.3); } html #charPage .theme-tab.t0.on { background: #ed54ba; } html #charPage .theme-tab.t1.on { background: #ffd90f; color: #2a1d00; } html #charPage .theme-tab.t2.on { background: #4caf50; } html #charPage .theme-tab.on { box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, 0.4); } html #charPage .theme-tab { font-size: 11px; padding: 6px 1px; white-space: nowrap; letter-spacing: -0.2px; } html #charPage .char-edit { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } html #charPage .theme-tabs { direction: ltr; gap: 3px; } html #charPage .theme-tab { direction: ltr; font: 900 10.5px 'Cairo', system-ui, sans-serif; letter-spacing: 0; padding: 7px 0; text-align: center; overflow: hidden; } /* language switch: a small round icon left of the help button, same family as the sun/moon */ html .lang-icon { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(98px + env(safe-area-inset-right, 0px)); z-index: 40; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; font: 900 12px 'Cairo', system-ui, sans-serif; color: #fff; background: linear-gradient(180deg, #4fd6a2, #1fa874); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 14px rgba(255, 255, 255, 0.45); transition: transform 0.15s; } html .lang-icon:hover { transform: scale(1.12) rotate(-6deg); } html.in-game .lang-icon { display: none; } html[lang="en"] .pod-btn b, html[lang="en"] .hub-link b, html[lang="en"] #modesHelp .info h4, html[lang="en"] #menu .setup-title h2 { direction: ltr; } html[lang="en"] body { direction: ltr; } /* phones: keep the character button clear of the hint text, and stop the page scrolling sideways */ @media (max-width: 700px) { html #hub .hub-first { padding-top: 64px; } html #hub .hub-me { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; right: auto; } } /* account chip: Google sign-in under the character button */ .acct { position: fixed; z-index: 12; left: 16px; top: calc(134px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 8px; } .acct .acct-who { font-weight: 900; font-size: 14px; background: var(--glass, rgba(255,255,255,.8)); padding: 6px 12px; border-radius: 999px; } @media (max-width: 700px) { .acct { top: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } /* rooms screen: one clean form that follows the light/dark theme */ html #rooms { --rf-bg: #ffffff; --rf-line: #cfd5e8; --rf-text: #1b2033; --rf-muted: #5d6685; --rf-soft: #eef1fa; } html[data-ui="dark"] #rooms { --rf-bg: #1c2236; --rf-line: rgba(255, 255, 255, 0.16); --rf-text: #f2f4ff; --rf-muted: #aab3d6; --rf-soft: #262d47; } html #rooms .room-create { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } html #rooms .room-create input[type=text], html #rooms .room-join input { background: var(--rf-bg); color: var(--rf-text); border: 2px solid var(--rf-line); border-radius: 14px; box-shadow: none; min-height: 52px; padding: 0 16px; font-size: 17px; font-weight: 700; } html #rooms .room-create input[type=text] { grid-column: 1 / -1; } html #rooms .room-create input::placeholder, html #rooms .room-join input::placeholder { color: var(--rf-muted); font-weight: 600; opacity: 1; } html #rooms .room-create input:focus, html #rooms .room-join input:focus { outline: none; border-color: #8a6cff; box-shadow: 0 0 0 4px rgba(138, 108, 255, 0.2); } html #rooms .room-create .pub { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; background: var(--rf-soft); color: var(--rf-text); border-radius: 14px; font-size: 15px; font-weight: 800; cursor: pointer; } html #rooms .room-create .pub input[type=checkbox] { width: 22px; height: 22px; accent-color: #8a6cff; flex: none; } html #rooms .room-create .pub select { font: inherit; font-weight: 900; font-size: 16px; color: var(--rf-text); background: var(--rf-bg); border: 2px solid var(--rf-line); border-radius: 10px; padding: 6px 10px; min-width: 64px; cursor: pointer; } html #rooms .room-create .cta { grid-column: 1 / -1; min-height: 54px; border-radius: 14px; font-size: 19px; } html #rooms .room-join { display: flex; flex-wrap: nowrap; gap: 12px; } html #rooms .room-join input { flex: 1 1 auto; text-align: center; letter-spacing: 8px; font-size: 20px; font-weight: 900; } html #rooms .room-join .ghost { flex: none; min-height: 52px; padding: 0 28px; border-radius: 14px; font-weight: 900; } html #rooms .room-row { background: var(--rf-bg); color: var(--rf-text); border: 2px solid var(--rf-line); border-radius: 14px; box-shadow: none; padding: 10px 14px; } html #rooms .room-row small { color: var(--rf-muted); } html #rooms .room-empty { border: 2px dashed var(--rf-line); border-radius: 14px; color: var(--rf-muted); } html #rooms .label { color: var(--rf-muted); font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 10px; } @media (max-width: 520px) { html #rooms .room-create { grid-template-columns: 1fr; } html #rooms .room-join .ghost { padding: 0 18px; } } /* saved coin balance, top right under the theme buttons */ .bank { position: fixed; z-index: 12; right: 16px; top: calc(74px + env(safe-area-inset-top, 0px)); padding: 7px 14px 7px 12px; border-radius: 999px; font-weight: 900; font-size: 15px; color: #3b2a00; background: linear-gradient(180deg, #ffd84d, #ffb400); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); direction: rtl; } html #rooms .ghost, html #rooms .room-join .ghost { background: var(--rf-soft); color: var(--rf-text); border: 2px solid var(--rf-line); box-shadow: none; border-radius: 12px; } /* first page: play as a guest or sign in */ .welcome { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(20, 28, 60, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; } .welcome-card { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 30px 24px 26px; border-radius: 24px; background: var(--card, #fff); color: var(--text, #1b2033); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5); } .welcome-logo { display: flex; gap: 5px; direction: ltr; } .welcome-logo span { width: 38px; height: 38px; display: grid; place-items: center; font: 900 22px/1 system-ui, sans-serif; color: #3b2a00; background: linear-gradient(180deg, #ffd84d, #ffb400); border: 3px solid #05060e; border-radius: 4px; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.18); } .welcome-logo span:nth-child(even) { background: linear-gradient(180deg, #7fd3ff, #3b9be8); color: #08264a; } .welcome h1 { margin: 4px 0 0; font-size: 34px; font-weight: 900; } .welcome-sub { margin: 0; color: var(--muted, #5d6685); font-weight: 700; } .welcome-google { min-height: 44px; display: flex; justify-content: center; } .welcome-or { width: 100%; display: flex; align-items: center; gap: 12px; color: var(--muted, #5d6685); font-weight: 800; font-size: 14px; } .welcome-or::before, .welcome-or::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.25; } .welcome-guest { width: 100%; min-height: 54px; font-size: 19px; } .welcome-note { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted, #5d6685); } body.welcoming #pods, body.welcoming .acct, body.welcoming .bank, body.welcoming .hub-me { visibility: hidden; } /* join a room: a clear button on the game-choice page */ .hub-join { font: inherit; font-weight: 900; font-size: 16px; cursor: pointer; padding: 10px 24px; border-radius: 999px; border: 0; color: #fff; background: #8a6cff; box-shadow: 0 4px 0 #5b43c4; } .hub-join:hover { filter: brightness(1.08); } /* breathing room: nothing hugs the screen edge */ #muteBtn { top: calc(18px + env(safe-area-inset-top, 0px)); left: calc(18px + env(safe-area-inset-left, 0px)); } html .theme-icon { top: calc(18px + env(safe-area-inset-top, 0px)); right: calc(18px + env(safe-area-inset-right, 0px)); } html .help-icon { top: calc(18px + env(safe-area-inset-top, 0px)); right: calc(62px + env(safe-area-inset-right, 0px)); } html .lang-icon { top: calc(18px + env(safe-area-inset-top, 0px)); right: calc(106px + env(safe-area-inset-right, 0px)); } .acct { left: calc(18px + env(safe-area-inset-left, 0px)); } .bank { right: calc(18px + env(safe-area-inset-right, 0px)); top: calc(70px + env(safe-area-inset-top, 0px)); } html #hub .hub-me { left: calc(18px + env(safe-area-inset-left, 0px)); } @media (max-width: 700px) { html #hub .hub-me { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: calc(18px + env(safe-area-inset-left, 0px)); } .acct { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } } html #rooms, html #menu, html #charPage { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); padding-block: 72px 32px; box-sizing: border-box; } html #rooms .sheet { width: min(640px, 100%); padding: 32px clamp(20px, 5vw, 34px) 30px; box-sizing: border-box; } html #rooms .sheet .back-btn { top: 14px; } /* the game-choice buttons sit above the pod layer so they can be clicked */ .hub-first .ghost-row { position: relative; z-index: 8; } .hub-first .ghost-row button, #hubJoin, #leaveRoom { position: relative; z-index: 8; pointer-events: auto; } /* coin balance sits top centre, clear of the hint text and the corner buttons */ .bank { left: 50%; right: auto; transform: translateX(-50%); top: calc(22px + env(safe-area-inset-top, 0px)); } /* the games page is only the cards */ html #hub .hub-first { min-height: 0; padding-top: 74px; gap: 12px; } html #hub .pods { position: static; inset: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: min(1040px, 100%); margin: 22px auto 0; padding: 0 4px 40px; box-sizing: border-box; pointer-events: auto; z-index: 3; } html #hub .pod-btn { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100%; min-width: 0; max-width: none; padding: 16px 12px 18px; border-radius: 22px; gap: 6px; align-items: center; } html #hub .pod-btn:hover:not(:disabled) { transform: translateY(-4px) !important; } html #hub .pod-btn .art { display: block; width: 100%; max-width: 150px; aspect-ratio: 160 / 130; margin-bottom: 4px; } html #hub .pod-btn .art svg { display: block; width: 100%; height: 100%; overflow: visible; } html #hub .pod-btn b { font-size: 22px; line-height: 1.25; } html #hub .pod-btn small { font-size: 13px; line-height: 1.5; } html #hub .hub-foot, html #hub #scrollDown, #scrollDown { display: none !important; } @media (max-width: 900px) { html #hub .pods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 700px) { html #hub .pods { padding-bottom: 110px; } html #hub .pod-btn b { font-size: 19px; } html #hub .pod-btn .art { max-width: 120px; } } @media (max-height: 520px) and (orientation: landscape) { html #hub .pods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } html #hub .pod-btn { padding: 8px 8px 10px; } html #hub .pod-btn .art { max-width: 84px; } html #hub .pod-btn b { font-size: 16px; } html #hub .pod-btn small { font-size: 11px; } } /* phone held upright during a match: ask to turn it (the match keeps running) */ body.need-landscape #rotate { display: flex; } #rotate svg { width: 84px; height: 84px; margin-bottom: 8px; animation: spin 2.4s ease-in-out infinite; } #rotate p { margin: 0 0 6px; font-size: 22px; font-weight: 900; } #rotate small { color: #aab3d6; font-weight: 700; font-size: 14px; } /* lobby page on phones and small tablets: one clean column, nothing overlapping or cut off */ @media (max-width: 900px) { html #menu.setup { padding-inline: 16px; } html #menu.setup .setup-wrap { width: 100%; padding: 8px 0 36px; gap: 14px; } html #menu .setup-head { flex-wrap: wrap; gap: 10px; } html #menu .setup-title { flex: 1 1 100%; order: 2; min-width: 0; } html #menu .setup-title h2 { font-size: 26px; } html #menu .setup-grid { display: flex !important; flex-direction: column; gap: 14px; } html #menu .col-maps, html #menu .col-char, html #menu .col-me { position: static !important; width: 100% !important; max-width: 100%; min-width: 0; margin: 0; transform: none; box-sizing: border-box; } html #menu .col-char { order: -1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; } html #menu .col-view { width: 100%; min-height: 170px; height: 170px; } html #menu .col-me { width: 100% !important; } html #menu #maps { grid-template-columns: minmax(0, 1fr) !important; } html #menu .map { display: flex; align-items: center; gap: 12px; } html #menu .map .tx { flex: 1; min-width: 0; } html #menu .map em { position: static !important; margin: 0; flex: none; white-space: nowrap; } } @media (max-width: 900px) { html #menu .col-view { display: none !important; } html #menu .look-icon.look-open { position: static !important; align-self: stretch; justify-content: center; margin: 0; } html #menu .setup-head { padding-top: 52px; } } /* the clock fits inside its ring in every game */ html #hud .timer b { font-size: 17px; letter-spacing: -1px; } html #hud.compact .timer b { font-size: 14px; } @media (max-height: 520px) { html #hud .timer b { font-size: 15px; } html #hud.compact .timer b { font-size: 13px; } /* shooting games on a phone: the health bar sits beside the minimap, not under it */ #lzpanel { left: calc(122px + env(safe-area-inset-left, 0px)); top: calc(74px + env(safe-area-inset-top, 0px)); transform: none; } .is-laser #lzpanel #hpbar .trk { height: 90px; } } @media (max-height: 520px) { html #hud .timer { width: 72px; height: 72px; } html #hud.compact .timer { width: 68px; height: 68px; } html #hud .timer b { font-size: 13px; letter-spacing: -1px; } html #hud.compact .timer b { font-size: 12px; } }