/* ═══════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ --bg:#0c0a16;--bg-purple:#0c0a16; --surface:#1a1628;--surface2:#221e32; --border:rgba(255,255,255,0.08); --primary-gold:#f5c518;--accent:#f5c518;--gold2:#e88200;--gold3:#c45a00;--neon-purple:#7c3aed; --glass-bg:rgba(22,18,36,0.85);--glass-blur:blur(14px); --red:#e05a5a;--text:#eeedf5;--muted:#8880a0;--green:#4cbe8a; --radius:14px;--radius-lg:20px; /* seenjeem team colors */ --team-a:#E8272A;--team-b:#2563eb; /* buzzer extras */ --bz-surface2:#242434;--bz-border:rgba(255,255,255,0.08); --bz-accent:#f5c518;--bz-red:#ff3b3b;--bz-green:#3bff9a; } html{ scroll-behavior:auto;overflow-x:hidden; /* Use the largest viewport height so iOS Safari paints the bg behind the URL bar / notch / home indicator. Both 100% and 100dvh declared so older browsers fall back gracefully. */ height:100%;min-height:100vh;min-height:100dvh; margin:0; } html,body{ background:var(--bg);color:var(--text); /* Edge-to-edge paint under the iOS notch & home indicator. */ min-height:100vh;min-height:100dvh; /* Disable double-tap-to-zoom (keeps pinch-zoom for accessibility, kills the 300ms click delay on older mobile browsers as a side-effect). */ touch-action:manipulation;-ms-touch-action:manipulation; } /* iOS Safari sometimes ignores touch-action on body; apply to every element too. */ *{touch-action:manipulation;-webkit-tap-highlight-color:transparent;} /* When the document is backgrounded (user switched apps / locked phone / another tab), pause all CSS animations + transitions. Saves significant CPU/battery — without this, ~42 infinite animations keep running even when nothing is visible. JS sets `data-page-hidden` on via the visibilitychange event (see end of index.html). */ html[data-page-hidden="1"] *, html[data-page-hidden="1"] *::before, html[data-page-hidden="1"] *::after{ animation-play-state:paused !important; transition:none !important; } body{ margin:0; display:flex;align-items:flex-start;justify-content:center; min-height:100vh;min-height:100dvh; /* Note: previously had `background-attachment:fixed` here, but iOS Safari has a documented bug where it causes massive GPU usage on every paint. The fixed-position `body::before` layer (defined later for themed lobbies) handles the "pinned to viewport" behavior without that cost. */ font-family:'Cairo',sans-serif; } body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background-image: radial-gradient(1px 1px at 8% 12%,rgba(255,255,255,0.55) 0%,transparent 100%), radial-gradient(1px 1px at 92% 8%,rgba(255,255,255,0.45) 0%,transparent 100%), radial-gradient(1px 1px at 21% 35%,rgba(255,255,255,0.4) 0%,transparent 100%), radial-gradient(1px 1px at 67% 22%,rgba(255,255,255,0.5) 0%,transparent 100%), radial-gradient(1px 1px at 45% 5%,rgba(255,255,255,0.35) 0%,transparent 100%), radial-gradient(1px 1px at 78% 45%,rgba(255,255,255,0.4) 0%,transparent 100%), radial-gradient(1px 1px at 12% 70%,rgba(255,255,255,0.3) 0%,transparent 100%), radial-gradient(1px 1px at 55% 78%,rgba(255,255,255,0.35) 0%,transparent 100%), radial-gradient(1px 1px at 88% 62%,rgba(255,255,255,0.45) 0%,transparent 100%), radial-gradient(1px 1px at 33% 88%,rgba(255,255,255,0.3) 0%,transparent 100%), radial-gradient(2px 2px at 95% 30%,rgba(255,255,255,0.5) 0%,transparent 100%), radial-gradient(2px 2px at 5% 50%,rgba(255,255,255,0.4) 0%,transparent 100%), radial-gradient(1px 1px at 72% 88%,rgba(255,255,255,0.35) 0%,transparent 100%), radial-gradient(1px 1px at 38% 55%,rgba(255,255,255,0.25) 0%,transparent 100%);} #app{position:relative;z-index:1;width:100%;max-width:480px;padding:60px 20px 70px;} /* PWA scroll fix — when the floating bottom score-bar (نقاطك / name / الكود) is visible, extend #app's bottom padding so: 1) The home-indicator safe-area inset (~34px on iPhone X+) is added on top of the existing 70px, otherwise the bar (which itself is sized to include the inset) ends up taller than #app's reserved bottom space and the last content row (e.g. "Start Next Round" / "End Match") sits BEHIND the bar with no way to scroll further. 2) On non-PWA browsers, env(safe-area-inset-bottom) is 0, so this rule is a no-op and existing layout is preserved. 3) Extra +16px gives a comfortable visual gap between the last button and the top edge of the bar, so the bar doesn't appear to be touching the button. `:has()` keeps the extra padding scoped to phases that actually show the score-bar — homepage / lobby don't need the extra space. */ body:has(#score-bar.visible) #app { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 16px); } .screen{display:none;flex-direction:column;gap:20px;animation:fadeIn .35s ease;} .screen.active{display:flex;} /* ════════════════════════════════════════════════════════════════════ 📱 PWA HOME-INDICATOR CLEARANCE FOR ALL GAME SCREENS ──────────────────────────────────────────────────────────────────── Every `.screen` in the SPA is a game phase that lives inside #app. #app already provides a flat 60px top padding for every screen. We apply safe-area-inset-bottom here for the iOS home indicator (~34px), but NOT inset-top — relying on the flat 60px keeps every screen's first content element at viewport y=60, matching the homepage. Why no inset-top: • The flat-60 convention matches the homepage hero exactly. Visual consistency across the whole app. • Adding inset-top stacked with #app's 60px and `.lobby-top`'s own inset-top caused triple-padding on Pro/Pro Max with Dynamic Island — content sat at viewport y≈176 instead of y=60. • iOS chrome (Dynamic Island, ~58px tall) only spans the center horizontally. The lobby's X / ? icons sit at the corners, so they're never under the island even at y=60. Excludes #screen-home (homepage uses its own #app-only padding). ════════════════════════════════════════════════════════════════════ */ .screen:not(#screen-home) { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ════════════════════════════════════════════════════════════════════ IN-GAME TOP PADDING — clear the floating chrome buttons ──────────────────────────────────────────────────────────────────── Lobby phases have their own .lobby-top chrome bar (X / ?) at viewport y=60. The hamburger and refresh buttons are HIDDEN on lobbies so no conflict. In-game phases have NO .lobby-top — but the floating buttons (#hamburger-btn at top-right and #return-home-btn at top-left) are visible at viewport y=12+safe-area-inset-top, ~36px tall. That puts them at y=71–107 on Pro models. With flat-60 content (y=60), the first row of any full-width content (titles, hero icons) clipped behind the buttons in the corners — exactly what the user reported. This rule pushes in-game content down by another 60px so it starts at viewport y=120 — clearing both buttons by ~13px. Detection uses `:has(.lobby-top)` to identify lobby phases; in-game is everything else (excluding #screen-home). ════════════════════════════════════════════════════════════════════ */ .screen.active:not(#screen-home):not(#screen-dev-dashboard):not(#screen-dev-password):not(:has(.lobby-top)) { padding-top: 60px; } /* Opacity-only fade — using transform here would establish a containing block that traps position:fixed children (e.g. .lobby-atmo) inside the screen's box during the animation, so the atmo would never reach the iOS notch. */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* All game screens — purple-tinted background to match homepage card */ #screen-lobby-host,#screen-lobby-player,#screen-word,#screen-voting,#screen-results,#screen-winner, #iq-screen-host,#iq-screen-player, #au-screen-host,#au-screen-player, #tor-screen,#tor-screen-lobby-host,#tor-screen-lobby-player, #screen-ww-lobby,#screen-ww-role-selection,#screen-ww-role-reveal,#screen-ww-view-card, #screen-ww-night,#screen-ww-morning,#screen-ww-discussion,#screen-ww-voting,#screen-ww-results,#screen-ww-ended,#screen-ww-spectator{ position:relative; } /* PWA notch / Dynamic-Island clearance for impostor screens — every phase (lobby host/player, word reveal, voting, results, early-exit winner, unified-winner, game-over podium) needs safe-area padding so the logo / countdown / first card doesn't slide under the iPhone notch in PWA standalone mode. Bottom inset clears the iOS home indicator on phases that scroll to the bottom (voting list, results breakdown, leaderboard). Same pattern already applied to ww / tor / story screens. */ #screen-lobby-host, #screen-lobby-player, #screen-word, #screen-voting, #screen-results, #screen-winner, #screen-unified-winner, #screen-gameover { /* No padding-top — flat-60 from #app is the only top spacing. */ padding-bottom: env(safe-area-inset-bottom, 0px); } #screen-lobby-host::before,#screen-lobby-player::before,#screen-word::before, #screen-voting::before,#screen-results::before,#screen-winner::before, #iq-screen-host::before,#iq-screen-player::before, #au-screen-host::before,#au-screen-player::before, #tor-screen::before,#tor-screen-lobby-host::before,#tor-screen-lobby-player::before, #screen-ww-lobby::before,#screen-ww-role-selection::before,#screen-ww-role-reveal::before,#screen-ww-view-card::before, #screen-ww-night::before,#screen-ww-morning::before,#screen-ww-discussion::before,#screen-ww-voting::before,#screen-ww-results::before,#screen-ww-ended::before,#screen-ww-spectator::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(ellipse at 50% 0%,rgba(130,50,220,.1) 0%,transparent 60%), radial-gradient(ellipse at 80% 100%,rgba(90,30,180,.06) 0%,transparent 50%); } /* ═══════════════════════════════════════════════════ HOMEPAGE ═══════════════════════════════════════════════════ */ /* Floating particles */ .h-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;} .h-particle{position:absolute;border-radius:50%;opacity:0;animation:hFloatUp linear infinite;} @keyframes hFloatUp{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(-100vh) scale(1)}} /* Live stats pills */ .h-live-stats{display:flex;justify-content:center;gap:12px;padding:0;z-index:1;animation:hFadeDown .5s ease both;} .h-live-stat{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted); background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:20px;padding:5px 14px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} .h-live-dot{width:7px;height:7px;border-radius:50%;animation:pulse-dot 2s infinite;} .h-live-dot.green{background:#4cbe8a;} .h-live-dot.red{background:#e05a5a;} @keyframes pulse-dot{0%,100%{opacity:.4}50%{opacity:1}} @keyframes hFadeDown{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}} /* Hero */ .hero{text-align:center;padding:12px 0 0;position:relative;z-index:1;} .hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%); width:280px;height:180px;pointer-events:none;filter:blur(40px); background:radial-gradient(ellipse,rgba(245,197,24,.15) 0%,rgba(232,130,0,.08) 40%,transparent 70%); animation:heroGlow 4s ease-in-out infinite alternate;} @keyframes heroGlow{0%{opacity:.6;transform:translate(-50%,-60%) scale(1)}100%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}} .hero-title{font-size:clamp(3.2rem,13vw,4.5rem);font-weight:900;line-height:1.2;padding-bottom:.05em; background:linear-gradient(165deg,#fff0a0 0%,#f5c518 28%,#e88200 60%,#b85000 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; filter:drop-shadow(0 2px 24px rgba(245,180,0,0.55));position:relative;z-index:1; animation:heroIn .6s cubic-bezier(.17,.67,.29,1.3) both;} @keyframes heroIn{0%{opacity:0;transform:scale(.8) translateY(10px)}100%{opacity:1;transform:none}} .hero-sub{font-size:.85rem;color:var(--muted);word-spacing:4px;margin-top:4px;position:relative;z-index:1; animation:hFadeUp .5s .2s ease both;} .hero-credit{font-size:.68rem;color:var(--muted);opacity:.45;letter-spacing:1px;margin-top:6px;position:relative;z-index:1; animation:hFadeUp .5s .3s ease both;} /* Quick Join (collapsible) */ .h-quick-join{background:linear-gradient(175deg,#1e1a2e 0%,#161225 100%);border:1px solid var(--border); border-radius:16px;padding:16px 18px;z-index:1;position:relative;overflow:hidden; animation:hFadeUp .5s .35s ease both;} .h-quick-join::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(245,197,24,.4),transparent);} .h-qj-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-tap-highlight-color:transparent;} .h-qj-title{font-size:.92rem;font-weight:800;display:flex;align-items:center;gap:8px;} .h-qj-arrow{font-size:.7rem;color:var(--muted);transition:transform .3s;} .h-qj-arrow.open{transform:rotate(180deg);} /* Modern smooth-collapse: CSS-Grid 0fr→1fr animates true content height. No max-height guess, no jank, smooth on every device. .h-qj-inner is a wrapper (overflow:hidden,min-height:0) so the grid track can collapse to 0 while keeping children in the DOM. */ .h-qj-body{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin-top .32s cubic-bezier(.4,0,.2,1); opacity:0;margin-top:0;} .h-qj-body.open{grid-template-rows:1fr;opacity:1;margin-top:14px;} .h-qj-inner{overflow:hidden;min-height:0;} .h-qj-row{display:flex;gap:8px;margin-bottom:8px;} .h-qj-input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1); border-radius:10px;padding:11px 14px;font-family:'Cairo',sans-serif;font-size:.92rem; color:var(--text);outline:none;transition:border-color .3s;direction:rtl;} .h-qj-input:focus{border-color:rgba(245,197,24,.45);} .h-qj-input::placeholder{color:var(--muted);} .h-qj-code{direction:ltr;text-align:center;letter-spacing:3px;max-width:130px;} /* Section label */ .h-section-label{display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700; color:var(--muted);letter-spacing:1px;z-index:1;animation:hFadeUp .5s .4s ease both;} .h-section-label::after{content:'';flex:1;height:1px; background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);} /* Host name input */ .h-host-row{z-index:1;animation:hFadeUp .5s .42s ease both;} .h-host-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1); border-radius:10px;padding:11px 14px;font-family:'Cairo',sans-serif;font-size:.92rem; color:var(--text);outline:none;transition:border-color .3s;direction:rtl;} .h-host-input:focus{border-color:rgba(245,197,24,.45);} .h-host-input::placeholder{color:var(--muted);} /* Game grid (2-column, vertical scroll) */ .h-game-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;z-index:1;animation:hFadeUp .5s .45s ease both; perspective:800px;} .h-game-card{position:relative;overflow:hidden;border-radius:18px;padding:22px 14px 18px; display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center; cursor:pointer;font-family:'Cairo',sans-serif;color:var(--text); -webkit-appearance:none;appearance:none; border:1px solid rgba(255,255,255,.06); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.3); transition:transform .35s cubic-bezier(.17,.67,.29,1.3),box-shadow .35s ease,border-color .35s ease; -webkit-tap-highlight-color:transparent; /* Note: previously had `will-change:transform; transform-style:preserve-3d; transform:translateZ(0)` here, plus a `rotateX(8deg)` in the entrance keyframe. That promoted every card to its own GPU compositing layer permanently, and Safari has a longstanding bug where 3D-rotated composited layers sometimes drop their background-image texture after the animation completes — leaving the card with just the ::before / ::after decorations visible and the main gradient gone. Removing the 3D rotation + permanent layer promotion fixes the intermittent "cards-look-flat-black" issue without changing visible behavior. */} .h-game-card:active{transform:scale(.94) translateY(2px); box-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);} .h-game-card:hover{transform:translateY(-4px) scale(1.03); border-color:var(--gc-accent); box-shadow: 0 4px 8px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.2), 0 0 30px var(--gc-glow), inset 0 1px 0 rgba(255,255,255,.14);} /* Top accent line */ .h-game-card::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1.5px; background:linear-gradient(90deg,transparent,var(--gc-accent),transparent);opacity:.7;transition:all .35s;} .h-game-card:hover::before{opacity:1;left:5%;right:5%;} /* Ambient glow orb */ .h-game-card::after{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%); width:140%;height:100px;border-radius:50%;pointer-events:none;opacity:.4;transition:opacity .4s; background:radial-gradient(ellipse,var(--gc-glow),transparent 65%);filter:blur(8px);} .h-game-card:hover::after{opacity:.7;} /* Icon */ .h-gc-icon{font-size:2.6rem;position:relative;z-index:1;line-height:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); transition:transform .35s ease;} .h-game-card:hover .h-gc-icon{transform:scale(1.12) translateY(-2px);} /* Inner shine layer */ .h-gc-shine{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none; background:linear-gradient(165deg,rgba(255,255,255,.06) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.02) 100%); border-radius:18px;z-index:0;} /* Title */ .h-gc-title{font-size:.95rem;font-weight:900;position:relative;z-index:1; text-shadow:0 1px 8px rgba(0,0,0,.5);} /* Description */ .h-gc-desc{font-size:.68rem;color:rgba(255,255,255,.45);position:relative;z-index:1;line-height:1.4;} /* Player count badge */ .h-gc-players{font-size:.62rem;color:rgba(255,255,255,.55);position:relative;z-index:1;margin-top:auto; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); border-radius:20px;padding:3px 12px; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); letter-spacing:.02em;} /* Card color themes — deeper gradients + theme vars */ .h-gc-ww{background:linear-gradient(165deg,#080f22 0%,#0c1a36 40%,#112448 100%); --gc-accent:rgba(70,140,240,.45);--gc-glow:rgba(70,130,220,.2);} .h-gc-imp{background:linear-gradient(165deg,#140828 0%,#1f0e3e 40%,#2c1558 100%); --gc-accent:rgba(140,60,240,.45);--gc-glow:rgba(130,50,220,.2);} .h-gc-sj{background:linear-gradient(165deg,#081e10 0%,#0e3420 40%,#164a2e 100%); --gc-accent:rgba(50,200,90,.4);--gc-glow:rgba(50,180,80,.18);} .h-gc-iq{background:linear-gradient(165deg,#061830 0%,#0c2848 40%,#143a62 100%); --gc-accent:rgba(60,130,255,.45);--gc-glow:rgba(50,120,255,.2);} .h-gc-au{background:linear-gradient(165deg,#181000 0%,#2a1800 40%,#3e2200 100%); --gc-accent:rgba(240,120,10,.45);--gc-glow:rgba(230,100,0,.2);} .h-gc-bz{background:linear-gradient(165deg,#1c0808 0%,#300e0e 40%,#441515 100%); --gc-accent:rgba(240,60,60,.45);--gc-glow:rgba(220,50,50,.2);} .h-gc-st{background:linear-gradient(165deg,#04201e 0%,#0a3a38 40%,#115d54 100%); --gc-accent:rgba(45,212,191,.5);--gc-glow:rgba(45,212,191,.25);} .h-gc-bomb{background:linear-gradient(165deg,#2a0f06 0%,#4a1e0c 40%,#7a3418 100%); --gc-accent:rgba(230,115,45,.55);--gc-glow:rgba(230,115,45,.28);} .h-gc-dn{background:linear-gradient(165deg,#1a0512 0%,#2a0a28 40%,#3d1452 100%); --gc-accent:rgba(167,139,250,.5);--gc-glow:rgba(124,58,237,.25);} /* التعذيب البطيء — dark crimson + charred gold (matches in-game theme) */ .h-gc-tor{background:linear-gradient(165deg,#1a0609 0%,#2a0a0e 40%,#48111a 100%); --gc-accent:rgba(220,38,38,.5);--gc-glow:rgba(212,160,23,.2);} .h-gc-tor .h-gc-icon{text-shadow:0 0 12px rgba(212,160,23,.4),0 0 24px rgba(220,38,38,.3);} /* المؤامرة — deep crimson + gold (Secret-Hitler aesthetic) */ .h-gc-cn{background:linear-gradient(165deg,#1a0606 0%,#2e0808 40%,#440f0f 100%); --gc-accent:rgba(251,191,36,.55);--gc-glow:rgba(220,38,38,.28);} .h-gc-cn .h-gc-icon{text-shadow:0 0 12px rgba(251,191,36,.45),0 0 24px rgba(220,38,38,.35);} /* Staggered card entrance */ .h-game-card:nth-child(1){animation:hCardIn .45s .5s ease both;} .h-game-card:nth-child(2){animation:hCardIn .45s .58s ease both;} .h-game-card:nth-child(3){animation:hCardIn .45s .66s ease both;} .h-game-card:nth-child(4){animation:hCardIn .45s .74s ease both;} .h-game-card:nth-child(5){animation:hCardIn .45s .82s ease both;} .h-game-card:nth-child(6){animation:hCardIn .45s .90s ease both;} .h-game-card:nth-child(7){animation:hCardIn .45s .98s ease both;} .h-game-card:nth-child(8){animation:hCardIn .45s 1.06s ease both;} .h-game-card:nth-child(9){animation:hCardIn .45s 1.14s ease both;} .h-game-card:nth-child(10){animation:hCardIn .45s 1.22s ease both;} .h-game-card:nth-child(11){animation:hCardIn .45s 1.30s ease both;} /* Removed `rotateX(8deg)` — see .h-game-card comment about Safari 3D-layer compositing bug that intermittently drops the card's background gradient. */ @keyframes hCardIn{0%{opacity:0;transform:scale(.85) translateY(20px)}100%{opacity:1;transform:none}} /* Join button (reused) */ .h-btn{width:100%;padding:15px;border:none;border-radius:var(--radius);cursor:pointer; font-family:'Cairo',sans-serif;font-weight:700;font-size:1rem;transition:all .3s;} .h-btn:active{transform:scale(.97);} .h-btn-join{background:linear-gradient(135deg,#f5b500 0%,#e88500 48%,#cc6500 100%); color:#1a0600;font-size:1.05rem;font-weight:900;letter-spacing:.5px; box-shadow:0 4px 20px rgba(245,150,0,.3);padding:12px;} .h-btn-join:hover{box-shadow:0 0 30px rgba(240,150,0,.5);transform:scale(1.02);} /* Feedback button */ .h-feedback-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%; padding:10px;border:1px solid var(--border);border-radius:12px;background:transparent; color:var(--muted);font-family:'Cairo',sans-serif;font-size:.8rem;cursor:pointer; transition:all .3s;z-index:1;animation:hFadeUp .5s .9s ease both;} .h-feedback-btn:hover{border-color:rgba(255,255,255,.2);color:var(--text);} /* Error display */ .h-err{color:var(--red);font-size:.82rem;text-align:center;min-height:0;z-index:1;} .h-err:not(:empty){min-height:18px;margin-top:-4px;} /* Shared animation */ @keyframes hFadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}} /* Legacy class aliases (used by dev screens, lobby) */ .h-card{background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:22px;box-shadow:0 20px 60px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.1);} .h-card-title{font-size:1rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;} .h-sec{font-size:.78rem;letter-spacing:1px;color:var(--muted);margin-bottom:6px;} .h-input{width:100%;background:rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.1);border-radius:10px; padding:13px 16px;color:var(--text);font-family:'Cairo',sans-serif;font-size:1rem;direction:rtl;transition:all .3s;} .h-input:focus{outline:none;border-color:rgba(245,197,24,0.5);box-shadow:0 0 14px rgba(245,197,24,0.1);} .h-input::placeholder{color:var(--muted);} #join-code{direction:ltr;text-align:center;letter-spacing:4px;font-size:1.1rem;} /* ══ مزاد الجحيم ══ */ #au-host-content,#au-player-content{display:flex;flex-direction:column;gap:16px;} .au-mystery-desc{ background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(90,30,180,.08)); border:1px solid rgba(124,58,237,.3);border-radius:var(--radius); padding:22px 18px;font-size:1.05rem;font-weight:700;text-align:center; line-height:1.65;color:rgba(220,210,245,.9);} .au-item-header{text-align:center;font-size:.8rem;color:var(--muted);letter-spacing:.05em;} .au-timer{ font-size:3rem;font-weight:900;text-align:center;color:var(--accent); font-variant-numeric:tabular-nums;letter-spacing:2px;} .au-timer.urgent{color:var(--red);animation:pulse .5s infinite alternate;} .au-bid-feed{ background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.09); border-radius:10px;padding:10px 12px;min-height:60px; display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto;} .au-bid-entry{font-size:.9rem;padding:4px 0;} .au-bid-top{color:var(--accent);font-weight:800;} .au-bid-row{display:flex;gap:8px;align-items:center;} .au-bid-row input{flex:1;padding:10px 14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.15); border-radius:var(--radius);color:var(--text);font-family:'Cairo',sans-serif;font-size:1rem;direction:ltr;} .au-bid-row input:focus{outline:none;border-color:rgba(124,58,237,.5);} .au-bid-row button{padding:10px 18px;background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(124,58,237,.45)); border:1px solid rgba(124,58,237,.5);border-radius:var(--radius); color:var(--text);font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;white-space:nowrap;} .au-bid-row button:disabled{opacity:.4;cursor:default;} .au-reveal-item{font-size:1.5rem;font-weight:900;text-align:center;padding:18px 0 8px;} .au-effect-text{text-align:center;font-size:.95rem;font-weight:700;padding:8px 14px; background:rgba(0,0,0,.2);border-radius:8px;color:rgba(220,215,240,.9);} .au-winner-badge{text-align:center;font-size:.95rem;color:var(--muted);padding:4px 0;} .au-balances{display:flex;flex-direction:column;gap:6px;} .au-bal-row{display:flex;justify-content:space-between;padding:8px 12px; background:rgba(255,255,255,.04);border-radius:8px;font-size:.9rem;} .au-bal-me{background:rgba(245,197,24,.08);border:1px solid rgba(245,197,24,.25);font-weight:800;} .au-end-title{text-align:center;font-size:1.5rem;font-weight:900;padding:8px 0;} .au-king{text-align:center;font-size:1.1rem;font-weight:800;color:var(--accent);padding:6px 0;} .au-victim{text-align:center;font-size:1rem;color:var(--red);padding:4px 0;} .au-final-scores{display:flex;flex-direction:column;gap:6px;} .au-final-row{display:flex;gap:8px;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:8px;font-size:.9rem;} /* legacy (used by old-style full-width buttons in other screens) */ .h-game-icon{font-size:2.6rem;flex-shrink:0;line-height:1;} .h-game-title{font-size:1.05rem;font-weight:900;display:block;} .h-game-desc{font-size:.78rem;color:rgba(255,255,255,0.55);display:block;margin-top:3px;} .h-game-btns{display:flex;flex-direction:column;gap:10px;} /* ═══════════════════════════════════════════════════ IMPOSTOR GAME — exact CSS from impostor.html ═══════════════════════════════════════════════════ */ /* ── Unified bottom bar (score + room code) — one bar, same for host & all players ── */ #host-code-bar{display:none!important;}/* safety net for cached HTML */ #score-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%); width:100%;max-width:480px;z-index:100; background:rgba(13,13,24,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.06); /* Add safe-area padding-bottom so the bar isn't hidden behind the iOS home-indicator when running as PWA (display:standalone). */ padding:5px 14px calc(5px + env(safe-area-inset-bottom, 0px)) 14px; display:none;align-items:center;justify-content:space-between;gap:6px;} #score-bar.visible{display:flex;} /* WW mode — no points, just name + code */ #score-bar.ww-mode .score-my{display:none;} .score-my{display:flex;flex-direction:column;align-items:flex-end;} .score-my-label{font-size:.58rem;color:var(--muted);letter-spacing:1px;} .score-my-val{font-size:1.05rem;font-weight:900;color:var(--accent);line-height:1;} .sb-mid{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;} .score-bar-name{font-size:.75rem;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .score-target{font-size:.65rem;color:var(--muted);} .sb-code{display:flex;flex-direction:column;align-items:flex-end;} .sb-code-label{font-size:.55rem;color:var(--muted);letter-spacing:.5px;} .sb-code-val{font-size:.82rem;font-weight:900;color:var(--accent);letter-spacing:3px;direction:ltr;} .logo{font-size:clamp(2.4rem,10vw,3.2rem);font-weight:900;text-align:center;line-height:1.3;padding-bottom:4px; background:linear-gradient(165deg,#fff0a0 0%,#f5c518 30%,#e88200 65%,#c45a00 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; filter:drop-shadow(0 2px 18px rgba(245,180,0,.4));} .logo span{color:var(--accent);} .subtitle{text-align:center;color:var(--muted);font-size:.82rem;letter-spacing:2px;} .card{background:linear-gradient(175deg,#1e1a2e 0%,#181428 50%,#12101e 100%); border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:22px; box-shadow:0 12px 40px rgba(0,0,0,0.6);position:relative;overflow:hidden;} .card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);} .btn{width:100%;padding:15px;border:none;border-radius:12px;cursor:pointer; font-family:'Cairo',sans-serif;font-weight:700;font-size:1.05rem;transition:all .3s;} .btn:active{transform:scale(.97);} .btn-primary{background:linear-gradient(135deg,#f5c518 0%,#e88200 55%,#c45a00 100%);color:#1a0800; box-shadow:0 4px 20px rgba(245,197,24,.35),inset 0 1px 0 rgba(255,255,255,0.2);} .btn-primary:hover{box-shadow:0 0 30px rgba(245,197,24,.5);transform:scale(1.02);} .btn-secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,0.1);color:var(--text);} .btn-secondary:hover{border-color:rgba(245,197,24,0.35);background:rgba(255,255,255,.06);} .btn-danger{background:linear-gradient(135deg,#e05a5a,#c43030);color:#fff; box-shadow:0 4px 16px rgba(224,90,90,.25);} .btn-green{background:linear-gradient(135deg,#4cbe8a,#2d9a6a);color:#fff; box-shadow:0 4px 16px rgba(76,190,138,.25);} .btn:disabled{opacity:.4;cursor:not-allowed;} .btn-row{display:flex;gap:10px;}.btn-row .btn{flex:1;} .sec{font-size:.78rem;letter-spacing:1px;color:var(--muted);margin-bottom:2px;font-weight:600;} .room-code{text-align:center;font-size:2.8rem;font-weight:900;letter-spacing:8px; color:var(--accent);background:rgba(0,0,0,.2);border:1px solid rgba(245,197,24,.15); border-radius:14px;padding:10px 4px 10px 12px;direction:ltr; width:100%;box-sizing:border-box; text-shadow:0 0 20px rgba(245,197,24,.3);} .player-list{display:flex;flex-direction:column;gap:6px;} .player-item{display:flex;align-items:center;gap:10px;padding:10px 14px; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); border-radius:10px;font-size:.9rem;transition:background .2s;} .player-item:hover{background:rgba(255,255,255,.05);} .player-item .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0; box-shadow:0 0 6px rgba(76,190,138,.5);} .player-item .badge{margin-right:auto;font-size:.7rem;padding:3px 10px; border-radius:20px;background:rgba(245,197,24,.15);border:1px solid rgba(245,197,24,.3); color:var(--accent);font-weight:700;} .player-item .pscore{margin-right:auto;font-size:.82rem;font-weight:700;color:var(--accent);} .imp-control{display:flex;align-items:center;gap:14px;} .imp-num{font-size:2.2rem;font-weight:900;color:var(--accent);min-width:40px;text-align:center;} .cnt-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);color:var(--text);font-size:1.4rem;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;} .cnt-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);} .score-options{display:flex;gap:8px;flex-wrap:wrap;} .score-opt{flex:1;min-width:52px;padding:10px 6px;border:1px solid rgba(255,255,255,.1); border-radius:10px;background:rgba(255,255,255,.03);color:var(--muted);font-family:'Cairo',sans-serif; font-size:.95rem;font-weight:700;cursor:pointer;text-align:center;transition:all .2s;} .score-opt.active{border-color:var(--accent);color:var(--accent);background:rgba(245,197,24,.08);} .score-opt:hover:not(.active){border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;} .toggle-wrap{position:relative;width:52px;height:28px;flex-shrink:0;} .toggle-wrap input{opacity:0;width:0;height:0;} .toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:28px;cursor:pointer;transition:background .3s;} .toggle-slider::before{content:'';position:absolute;height:20px;width:20px;right:4px;top:4px; background:var(--muted);border-radius:50%;transition:transform .3s,background .3s;} .toggle-wrap input:checked+.toggle-slider{background:rgba(245,197,24,.2);border:1px solid rgba(245,197,24,.4);} .toggle-wrap input:checked+.toggle-slider::before{transform:translateX(-24px);background:var(--accent);} .toggle-label{font-size:.9rem;color:var(--text);font-weight:600;} .toggle-sub{font-size:.75rem;color:var(--muted);margin-top:2px;} .role-banner{text-align:center;padding:20px 16px;border-radius:16px;font-weight:800;font-size:1.05rem;letter-spacing:.5px;position:relative;overflow:hidden;} .role-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.5;} .role-banner::after{content:'';position:absolute;bottom:-40px;left:50%;transform:translateX(-50%); width:180px;height:80px;border-radius:50%;pointer-events:none;opacity:.15;} .role-banner.impostor{background:linear-gradient(155deg,rgba(224,90,90,.12) 0%,rgba(180,50,50,.06) 100%); border:1px solid rgba(224,90,90,.3);color:#f87171; box-shadow:0 4px 24px rgba(224,90,90,.08),inset 0 1px 0 rgba(255,255,255,.04);} .role-banner.impostor::after{background:radial-gradient(circle,rgba(224,90,90,.4) 0%,transparent 70%);} .role-banner.crewmate{background:linear-gradient(155deg,rgba(76,190,138,.12) 0%,rgba(40,150,100,.06) 100%); border:1px solid rgba(76,190,138,.3);color:#4ade80; box-shadow:0 4px 24px rgba(76,190,138,.08),inset 0 1px 0 rgba(255,255,255,.04);} .role-banner.crewmate::after{background:radial-gradient(circle,rgba(76,190,138,.4) 0%,transparent 70%);} .role-banner.hidden-role{opacity:0;filter:blur(10px);transition:opacity .5s,filter .5s;} .big-word{text-align:center;font-size:clamp(2.2rem,10vw,3rem);font-weight:900;color:var(--text);line-height:1.25; text-shadow:0 0 30px rgba(255,255,255,.06);} .word-lbl{text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:2px;} .ring-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px;} .ring-wrap svg{width:96px;height:96px;transform:rotate(-90deg);} .ring-wrap circle{fill:none;stroke-width:6;} .ring-bg{stroke:var(--border);} .ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:239;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;} .ring-num{position:absolute;font-size:1.9rem;font-weight:900;color:var(--accent);} .hidden-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 20px;text-align:center;} .hidden-icon{font-size:4rem;} .hidden-title{font-size:1.4rem;font-weight:900;color:var(--muted);} .hidden-sub{font-size:.88rem;color:var(--muted);} .vote-grid{display:flex;flex-direction:column;gap:8px;} .vote-btn{display:flex;align-items:center;gap:12px;padding:14px 16px; background:linear-gradient(155deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%); border:1px solid rgba(255,255,255,.08);border-radius:14px; cursor:pointer;transition:all .25s cubic-bezier(.17,.67,.29,1.3); font-family:'Cairo',sans-serif;color:var(--text);font-size:.95rem;width:100%;direction:rtl;text-align:right; position:relative;overflow:hidden;} .vote-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);} /* Hover highlight only on real pointer devices — prevents "sticky hover" on touch screens where the purple glow persists after tap and gets confused with the gold 'selected' state. */ @media (hover: hover) and (pointer: fine) { .vote-btn:hover:not(:disabled){border-color:rgba(130,50,220,.5);background:rgba(130,50,220,.08);transform:scale(1.01);} } .vote-btn:disabled{opacity:.5;cursor:not-allowed;} .vote-btn.selected{border-color:var(--accent);background:linear-gradient(155deg,rgba(245,197,24,.1) 0%,rgba(245,197,24,.04) 100%); box-shadow:0 0 20px rgba(245,197,24,.1),inset 0 1px 0 rgba(245,197,24,.1);} .vote-btn .avatar{width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,rgba(130,50,220,.15),rgba(130,50,220,.05)); border:1px solid rgba(130,50,220,.2); display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;} .vote-btn.skip-btn{border-style:dashed;color:var(--muted);justify-content:center;} .vote-btn.multi-selected{border-color:var(--accent);background:linear-gradient(155deg,rgba(245,197,24,.1) 0%,rgba(245,197,24,.04) 100%); box-shadow:0 0 20px rgba(245,197,24,.1),inset 0 1px 0 rgba(245,197,24,.1);} .vote-instruction{text-align:center;font-size:.82rem;color:var(--muted);padding:4px 0;} .vote-confirm-btn{width:100%;padding:15px;border:none;border-radius:14px;cursor:pointer; font-family:'Cairo',sans-serif;font-weight:700;font-size:1.05rem; background:linear-gradient(135deg,#f5c518 0%,#e88200 55%,#c45a00 100%);color:#1a0800; box-shadow:0 4px 20px rgba(245,197,24,.3);transition:all .2s cubic-bezier(.17,.67,.29,1.3); position:relative;overflow:hidden;} .vote-confirm-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);} .vote-confirm-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;} /* Hover effect only on real pointer devices — avoids stuck hover after tap on mobile. */ @media (hover: hover) and (pointer: fine) { .vote-confirm-btn:hover:not(:disabled){box-shadow:0 4px 30px rgba(245,197,24,.45);transform:scale(1.02);} } .vote-confirm-btn:active{transform:scale(.97);} .timer-bar{height:5px;background:rgba(130,50,220,.12);border-radius:6px;overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.3);} .timer-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold2));width:100%;border-radius:6px; transition:width 1s linear;box-shadow:0 0 8px rgba(245,197,24,.3);} .result-banner{text-align:center;padding:24px 20px;border-radius:18px;font-weight:900;font-size:1.4rem;position:relative;overflow:hidden;} .result-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.4;} .result-banner::after{content:'';position:absolute;bottom:-40px;left:50%;transform:translateX(-50%); width:200px;height:100px;border-radius:50%;pointer-events:none;opacity:.12;} .result-banner.caught{background:linear-gradient(155deg,rgba(76,190,138,.1) 0%,rgba(40,150,100,.04) 100%); border:1px solid rgba(76,190,138,.3);color:#4ade80; box-shadow:0 4px 24px rgba(76,190,138,.08),inset 0 1px 0 rgba(255,255,255,.04);} .result-banner.caught::after{background:radial-gradient(circle,rgba(76,190,138,.5) 0%,transparent 70%);} .result-banner.escaped{background:linear-gradient(155deg,rgba(224,90,90,.1) 0%,rgba(180,50,50,.04) 100%); border:1px solid rgba(224,90,90,.3);color:#f87171; box-shadow:0 4px 24px rgba(224,90,90,.08),inset 0 1px 0 rgba(255,255,255,.04);} .result-banner.escaped::after{background:radial-gradient(circle,rgba(224,90,90,.5) 0%,transparent 70%);} .result-banner.tanner{background:linear-gradient(155deg,rgba(146,64,14,.1) 0%,rgba(146,64,14,.04) 100%); border:1px solid rgba(146,64,14,.3);color:#fcd34d; box-shadow:0 4px 24px rgba(146,64,14,.08),inset 0 1px 0 rgba(255,255,255,.04);} .result-banner.tanner::after{background:radial-gradient(circle,rgba(252,211,77,.4) 0%,transparent 70%);} .result-banner.continue{background:linear-gradient(155deg,rgba(130,50,220,.06) 0%,rgba(255,255,255,.02) 100%); border:1px solid rgba(130,50,220,.2);color:var(--muted);font-size:1rem; box-shadow:0 4px 16px rgba(0,0,0,.2);} .scorecard{display:flex;flex-direction:column;gap:7px;} .sc-row{display:flex;align-items:center;justify-content:space-between; padding:11px 14px;background:linear-gradient(155deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%); border:1px solid rgba(255,255,255,.07); border-radius:12px;transition:all .25s;position:relative;overflow:hidden;} .sc-row::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);} .sc-row.sc-winner{border-color:rgba(245,197,24,.3);background:linear-gradient(155deg,rgba(245,197,24,.08) 0%,rgba(245,197,24,.02) 100%); box-shadow:0 0 16px rgba(245,197,24,.06);} .sc-left{display:flex;align-items:center;gap:10px;} .sc-name{font-size:.9rem;font-weight:700;} .sc-role{font-size:.7rem;padding:3px 10px;border-radius:20px;font-weight:600;} .sc-role.imp{background:rgba(224,90,90,.12);color:#f87171;border:1px solid rgba(224,90,90,.3);} .sc-role.crew{background:rgba(76,190,138,.12);color:#4ade80;border:1px solid rgba(76,190,138,.3);} .sc-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;} .sc-total{font-size:1.1rem;font-weight:900;color:var(--accent);} .sc-round-pts{font-size:.75rem;color:var(--green);} .sc-round-zero{font-size:.75rem;color:var(--muted);} .crown{font-size:1rem;margin-left:4px;} /* ═══════════════════════════════════════════════════ GAME OVER — trophy / podium / leaderboard ═══════════════════════════════════════════════════ */ #screen-gameover{align-items:center;position:relative;overflow:hidden;} /* confetti canvas */ #go-confetti{position:fixed;inset:0;pointer-events:none;z-index:0;} /* trophy icon */ #go-trophy{font-size:3.5rem;animation:goTrophyIn .7s cubic-bezier(.17,.67,.29,1.3) both; filter:drop-shadow(0 0 24px rgba(245,197,24,.45));z-index:1;} @keyframes goTrophyIn{0%{opacity:0;transform:scale(0) rotate(-20deg)}100%{opacity:1;transform:scale(1) rotate(0)}} /* title */ #go-title{font-size:1.05rem;color:var(--muted);letter-spacing:2px;font-weight:700;z-index:1; animation:goFadeUp .5s .2s ease both;} /* winner name callout */ #go-winner-name{font-size:1.6rem;font-weight:900;z-index:1; background:linear-gradient(165deg,#fff0a0 0%,#f5c518 28%,#e88200 60%,#b85000 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; filter:drop-shadow(0 2px 18px rgba(245,180,0,.5)); animation:goFadeUp .5s .35s ease both;} /* subtitle (auction king/victim) */ #go-subtitle{z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap; animation:goFadeUp .5s .38s ease both;} #go-subtitle:empty{display:none;} .go-sub-tag{font-size:.8rem;font-weight:700;padding:6px 14px;border-radius:20px;} .go-sub-tag.king{background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.3);color:var(--accent);} .go-sub-tag.victim{background:rgba(224,90,90,.12);border:1px solid rgba(224,90,90,.3);color:var(--red);} /* podium container */ #go-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px; width:100%;max-width:360px;z-index:1;margin-top:4px; animation:goFadeUp .5s .45s ease both;} /* individual podium column */ .go-pod{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;max-width:110px;} .go-pod-medal{font-size:1.6rem;} .go-pod-name{font-size:.82rem;font-weight:800;color:var(--text);text-align:center; max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .go-pod-score{font-size:.78rem;font-weight:700;color:var(--muted);} .go-pod-bar{width:100%;border-radius:12px 12px 4px 4px;display:flex;align-items:flex-end; justify-content:center;padding-bottom:8px;position:relative;overflow:hidden; transition:height .6s cubic-bezier(.17,.67,.29,1.3);} .go-pod-bar::before{content:'';position:absolute;inset:0;opacity:.12; background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 100%);} /* 1st place */ .go-pod.first .go-pod-bar{height:120px; background:linear-gradient(180deg,#f5c518 0%,#c49000 100%); box-shadow:0 0 30px rgba(245,197,24,.3);} .go-pod.first .go-pod-medal{animation:goPulse 1.5s ease infinite;} .go-pod.first .go-pod-name{color:#f5c518;} /* 2nd place */ .go-pod.second .go-pod-bar{height:88px; background:linear-gradient(180deg,#a0a0b0 0%,#6b6b7b 100%); box-shadow:0 0 20px rgba(160,160,176,.2);} /* 3rd place */ .go-pod.third .go-pod-bar{height:64px; background:linear-gradient(180deg,#cd7f32 0%,#8b5a20 100%); box-shadow:0 0 20px rgba(205,127,50,.2);} @keyframes goPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}} /* personal rank callout */ #go-my-rank{width:100%;z-index:1;animation:goFadeUp .5s .55s ease both;} #go-my-rank:empty{display:none;} .go-my-rank-card{display:flex;align-items:center;justify-content:center;gap:10px; padding:12px 16px;border-radius:12px; background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.05)); border:1px solid rgba(124,58,237,.3);} .go-my-rank-card .go-mr-medal{font-size:1.5rem;} .go-my-rank-card .go-mr-text{font-size:.95rem;font-weight:800;color:#a78bfa;} .go-my-rank-card .go-mr-score{font-size:.85rem;font-weight:700;color:var(--muted);} /* rest of leaderboard */ #go-rest{width:100%;display:flex;flex-direction:column;gap:6px;z-index:1; animation:goFadeUp .5s .6s ease both;} .go-rest-row{display:flex;align-items:center;justify-content:space-between; padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border); border-radius:10px;animation:goSlideRow .4s ease both;} .go-rest-row .go-r-rank{color:var(--muted);font-size:.85rem;font-weight:700;min-width:24px;text-align:center;} .go-rest-row .go-r-name{font-size:.88rem;font-weight:700;flex:1;margin:0 10px;} .go-rest-row .go-r-score{font-size:.95rem;font-weight:900;color:var(--accent);} @keyframes goFadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}} @keyframes goSlideRow{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:none}} .tally{display:flex;flex-direction:column;gap:8px;} .tally-row{display:flex;align-items:center;gap:10px;font-size:.88rem;} .tally-name{width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;} .tally-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;} .tally-bar{height:100%;background:var(--accent);border-radius:3px;transition:width .6s ease;} .tally-num{width:20px;color:var(--muted);font-size:.78rem;} .votes-detail{display:flex;flex-direction:column;gap:0;border-radius:12px;overflow:hidden; border:1px solid rgba(255,255,255,.07);} .vd-row{display:flex;align-items:center;font-size:.82rem;padding:10px 14px;gap:10px; background:linear-gradient(155deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.01) 100%); border-bottom:1px solid rgba(255,255,255,.05);} .vd-row:last-child{border-bottom:none;} .vd-row:nth-child(even){background:rgba(255,255,255,.015);} .vd-voter{flex:1;text-align:right;color:var(--text);font-weight:600;} .vd-arrow{flex-shrink:0;color:rgba(130,50,220,.5);font-size:.85rem;font-weight:700;} .vd-voted{flex:1;text-align:left;color:var(--text);font-weight:700;} .vd-skip{color:var(--muted);font-style:italic;} .vd-pts{flex-shrink:0;font-size:.72rem;color:var(--muted);} .winner-podium{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;} .winner-trophy{font-size:5rem;} .winner-name{font-size:2rem;font-weight:900;color:var(--accent);} .winner-sub{color:var(--muted);font-size:.9rem;} .waiting{text-align:center;color:var(--muted);font-size:.88rem;} .dots::after{content:'...';animation:dots 1.4s infinite;} @keyframes dots{0%,20%{content:'.'}40%{content:'..'}60%,100%{content:'...'}} .err{color:var(--red);font-size:.84rem;text-align:center;min-height:18px;} hr{border:none;border-top:1px solid var(--border);} .info-row{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;} .tag{font-size:.72rem;padding:3px 10px;border-radius:20px;border:1px solid var(--border);color:var(--muted);} .center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;} /* ═══════════════════════════════════════════════════ BUZZER GAME — exact CSS from buzzer-connect, scoped ═══════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── Buzzer screens — modernized to match the new design system. Same HTML classes (so the buzzer JS that touches `.bz-card`, `.code-badge`, `.buzz-item`, `.big-buzzer`, etc. keeps working untouched), only the visual layer is rebuilt: red theme matching the homepage card, gradient-surfaced cards with accent top-line, animated LED section labels, polished big buzzer with multi-layer glow, modern button gradients. Mirrors `.bomb-card` / lobby-hero conventions for cohesion. */ #bz-screen-host,#bz-screen-player{ font-family:'Cairo',sans-serif; /* Wider vertical gap between every section than the global .screen default (20px) so the modernized cards have proper breathing room without feeling cramped. */ gap:26px; } /* Lobby chrome (top help/leave row + atmo) shouldn't add to that gap. */ #bz-screen-host > .lobby-top,#bz-screen-player > .lobby-top{margin-bottom:-6px;} #bz-screen-host > .bz-logo,#bz-screen-player > .bz-logo{margin-top:6px;} /* Tagline sits tight under the logo, not 26px below it. */ #bz-screen-host > .bz-tagline,#bz-screen-player > .bz-tagline{margin-top:-18px;} /* Hero — animated red-tinted name + pulsing dot */ .bz-logo{ font-size:clamp(36px,11vw,52px);font-weight:900;line-height:1.2; padding:8px 0 4px;text-align:center; background:linear-gradient(135deg,#fff 0%,#ffb4b4 60%,#ff5454 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; font-family:'Cairo',sans-serif; filter:drop-shadow(0 4px 16px rgba(255,84,84,.3)); } .bz-red-dot{ display:inline-block;width:.7em;height:.7em;border-radius:50%; background:radial-gradient(circle at 35% 35%,#ff7878,#cc1414); box-shadow:0 0 14px rgba(255,84,84,.7),0 0 28px rgba(255,84,84,.3); vertical-align:middle;margin-bottom:.12em; animation:bzDotPulse 1.4s ease-in-out infinite; } @keyframes bzDotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}} .bz-tagline{ font-size:13px;color:rgba(255,255,255,.55);margin-top:6px; text-align:center;font-family:'Cairo',sans-serif;letter-spacing:.02em; } /* Cards — gradient surface + accent top-line + ambient glow */ #bz-screen-host .bz-card,#bz-screen-player .bz-card{ position:relative;overflow:hidden; background:linear-gradient(155deg,rgba(60,15,15,.32) 0%,rgba(20,8,8,.55) 55%,rgba(30,10,10,.45) 100%); border:1px solid rgba(255,84,84,.22);border-radius:16px; padding:18px 16px; box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04); } #bz-screen-host .bz-card::before,#bz-screen-player .bz-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,120,120,.5),transparent); pointer-events:none; } /* Section header inside cards — uppercase muted-red with animated LED */ .bz-section-label{ display:flex;align-items:center;gap:8px; font-size:.72rem;color:#ff8a8a;font-weight:800;letter-spacing:.1em; text-transform:uppercase;margin-bottom:12px;font-family:'Cairo',sans-serif; } .bz-section-label::before{ content:'';width:8px;height:8px;border-radius:50%; background:#ff5454;box-shadow:0 0 10px #ff5454; animation:bzLedPulse 1.6s ease-in-out infinite; } @keyframes bzLedPulse{0%,100%{opacity:.7;}50%{opacity:1;}} #bz-screen-host .bz-card-title,#bz-screen-player .bz-card-title{ font-size:.72rem;font-weight:800;color:#ff8a8a;letter-spacing:.1em; text-transform:uppercase;margin-bottom:12px; } /* Code badge — large shareable code box with theme glow */ .code-badge{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:space-between;gap:14px; background:linear-gradient(155deg,rgba(50,18,18,.45) 0%,rgba(20,8,8,.6) 100%); border:1px solid rgba(255,84,84,.28);border-radius:14px;padding:18px 20px; box-shadow:0 8px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04); } .code-badge::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,120,120,.5),transparent); pointer-events:none; } .code-badge-label{ font-size:.72rem;color:rgba(255,255,255,.55);font-weight:600; letter-spacing:.04em;font-family:'Cairo',sans-serif; } .code-badge-value{ font-size:32px;font-weight:900;letter-spacing:6px; color:#fff;line-height:1.1;font-family:'Courier New',monospace; text-shadow:0 0 12px rgba(255,84,84,.5);direction:ltr; } .copy-btn{ background:linear-gradient(135deg,rgba(255,84,84,.18) 0%,rgba(255,84,84,.08) 100%); border:1px solid rgba(255,84,84,.4);color:#ff8a8a; padding:9px 16px;border-radius:10px; font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer; transition:all .15s; } .copy-btn:hover{filter:brightness(1.15);border-color:rgba(255,120,120,.6);} /* Status strip — live indicator + lock badge + player count */ .bz-status-row{ display:flex;align-items:center;justify-content:space-between; padding:12px 16px; background:linear-gradient(155deg,rgba(40,12,12,.4) 0%,rgba(20,8,8,.55) 100%); border:1px solid rgba(255,84,84,.18);border-radius:12px; font-size:13px;font-family:'Cairo',sans-serif; } .bz-dot{ width:9px;height:9px;border-radius:50%; background:#3bff9a;box-shadow:0 0 8px #3bff9a; animation:bzBlink 2s infinite;flex-shrink:0; } .bz-dot.locked{background:#ff5454;box-shadow:0 0 8px #ff5454;} @keyframes bzBlink{0%,100%{opacity:1}50%{opacity:.4}} .bz-pill{ background:rgba(255,84,84,.14);color:#ff8a8a; border:1px solid rgba(255,84,84,.28); border-radius:100px;padding:3px 12px;font-size:12px;font-weight:800; font-family:'Cairo',sans-serif; } .lock-badge{ font-size:11px;padding:4px 11px;border-radius:100px; background:rgba(255,84,84,.14);color:#ff8a8a; border:1px solid rgba(255,84,84,.32);font-weight:700;letter-spacing:.04em; font-family:'Cairo',sans-serif; } /* Players grid — pill chips, host can kick via X */ .players-wrap{display:flex;flex-wrap:wrap;gap:8px;} .chip{ display:flex;align-items:center;gap:6px;padding:6px 12px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); border-radius:100px;font-size:13px;color:#fff;font-family:'Cairo',sans-serif; transition:all .15s; } .chip-x{ color:rgba(255,255,255,.4);cursor:pointer;font-size:15px;line-height:1; transition:color .12s;padding:0 2px; } .chip-x:hover{color:#ff5454;} /* Buzz list — gradient cards, top spot in gold with glow */ .buzz-list{display:flex;flex-direction:column;gap:8px;} .buzz-item{ display:flex;align-items:center;gap:12px;padding:12px 14px; background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);border-radius:12px; animation:bzSlideIn .25s ease both; } .buzz-item:first-child{ background:linear-gradient(135deg,rgba(245,197,24,.16),rgba(245,197,24,.04)); border-color:rgba(245,197,24,.4); box-shadow:0 0 24px rgba(245,197,24,.18); } @keyframes bzSlideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}} .buzz-pos{ font-size:22px;font-weight:900;color:rgba(255,255,255,.45); min-width:30px;text-align:center;font-family:'Cairo',sans-serif; font-variant-numeric:tabular-nums; } .buzz-item:first-child .buzz-pos{ color:#f5c518;text-shadow:0 0 12px rgba(245,197,24,.6); } .buzz-name{flex:1;font-weight:700;font-size:14px;color:#fff;font-family:'Cairo',sans-serif;} .bz-empty{ text-align:center;padding:32px 20px;color:rgba(255,255,255,.45); font-size:13px;border:1px dashed rgba(255,255,255,.12);border-radius:12px; font-family:'Cairo',sans-serif;letter-spacing:.02em; } /* Action buttons — gradient + soft theme shadow */ .bz-controls-row{display:flex;gap:10px;} .bz-controls-row .bz-btn{flex:1;} .bz-btn{ display:flex;align-items:center;justify-content:center;gap:8px; padding:14px;border-radius:12px;border:none; font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:800;cursor:pointer; transition:all .15s;width:100%;letter-spacing:.01em; } .bz-btn:active{transform:scale(.97);} .bz-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.5);} .bz-btn-gold{ background:linear-gradient(135deg,#f5c518 0%,#d49b00 100%);color:#0c0c10; box-shadow:0 4px 16px rgba(245,197,24,.25); } .bz-btn-gold:hover{filter:brightness(1.08);box-shadow:0 6px 22px rgba(245,197,24,.4);} .bz-btn-outline{ background:rgba(255,255,255,.03);color:#fff; border:1px solid rgba(255,255,255,.18); } .bz-btn-outline:hover{ border-color:#ff5454;color:#ff8a8a; box-shadow:0 0 18px rgba(255,84,84,.18); } .bz-btn-danger{ background:linear-gradient(135deg,rgba(220,38,38,.20),rgba(154,20,20,.28)); color:#ff8a8a;border:1px solid rgba(220,38,38,.4); } .bz-btn-danger:hover{ background:linear-gradient(135deg,rgba(220,38,38,.30),rgba(154,20,20,.40)); border-color:rgba(255,84,84,.6); } /* Big buzzer — iconic centerpiece, multi-layer glow + dramatic shadows */ .buzzer-wrap{ display:flex;flex-direction:column;align-items:center;gap:22px; padding:20px 0 12px; } .big-buzzer{ width:200px;height:200px;border-radius:50%;border:none; background:radial-gradient(circle at 38% 32%,#ff6464 0%,#cc1414 60%,#7a0a0a 100%); box-shadow: 0 0 0 8px rgba(255,84,84,.10), 0 0 0 18px rgba(255,84,84,.06), 0 0 60px rgba(255,84,84,.4), 0 16px 40px rgba(187,0,0,.55), inset 0 -6px 18px rgba(0,0,0,.35), inset 0 6px 18px rgba(255,255,255,.18); cursor:pointer;transition:transform .12s,box-shadow .25s; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; position:relative;overflow:hidden; -webkit-tap-highlight-color:transparent;user-select:none; } .big-buzzer::before{ content:'';position:absolute;top:14%;left:18%;width:42%;height:24%; background:rgba(255,255,255,.22);border-radius:50%;filter:blur(6px); } .big-buzzer:hover{transform:scale(1.05);} .big-buzzer:active,.big-buzzer.pressed{ transform:scale(.92); box-shadow: 0 0 0 4px rgba(255,84,84,.08), 0 0 30px rgba(255,84,84,.25), 0 6px 16px rgba(187,0,0,.4), inset 0 -3px 10px rgba(0,0,0,.4), inset 0 3px 10px rgba(255,255,255,.1); } .big-buzzer.buzzed{ background:radial-gradient(circle at 38% 32%,#5a5a5a,#2a2a2a); box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 -3px 10px rgba(0,0,0,.4); cursor:not-allowed; } .big-buzzer.locked-state{ background:radial-gradient(circle at 38% 32%,#444,#1f1f1f); cursor:not-allowed;box-shadow:0 4px 16px rgba(0,0,0,.4); } .buzzer-icon{ font-size:44px;position:relative;z-index:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .buzzer-label{ font-size:24px;font-weight:900;color:rgba(255,255,255,.95); position:relative;z-index:1;font-family:'Cairo',sans-serif; text-shadow:0 1px 4px rgba(0,0,0,.5);letter-spacing:.02em; } /* Position badge after buzzing — gold pill showing rank */ .pos-badge{ background:linear-gradient(135deg,rgba(245,197,24,.16),rgba(245,197,24,.04)); border:1px solid rgba(245,197,24,.4); border-radius:100px;padding:12px 28px;text-align:center; animation:bzFadeIn .25s ease; box-shadow:0 0 30px rgba(245,197,24,.18); } .pos-num{ font-size:36px;font-weight:900;color:#f5c518;line-height:1; font-family:'Cairo',sans-serif;text-shadow:0 0 12px rgba(245,197,24,.5); } .pos-sub{ font-size:11px;color:rgba(255,255,255,.55);margin-top:3px; font-family:'Cairo',sans-serif;letter-spacing:.04em; } @keyframes bzFadeIn{from{opacity:0;transform:translateY(8px) scale(.95);}to{opacity:1;transform:none;}} /* Room bar (player screen) — host name + room code */ .room-bar{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px; background:linear-gradient(155deg,rgba(40,12,12,.4) 0%,rgba(20,8,8,.55) 100%); border:1px solid rgba(255,84,84,.18);border-radius:12px; } .room-bar-name{ font-size:14px;font-weight:800;color:#fff;font-family:'Cairo',sans-serif; } .room-bar-sub{ font-size:11px;color:rgba(255,255,255,.5);margin-top:2px; font-family:'Cairo',sans-serif;letter-spacing:.02em; } /* Toast — modernized to match the rest of the new design system */ .bz-toast{ position:fixed;bottom:calc(24px + env(safe-area-inset-bottom, 0px)); left:50%;transform:translateX(-50%) translateY(70px); background:linear-gradient(155deg,rgba(40,18,18,.95),rgba(20,10,10,.95)); border:1px solid rgba(255,255,255,.1);border-radius:12px; padding:12px 22px;font-size:13px;font-weight:700;z-index:999; /* Hide via opacity + visibility + pointer-events too — translateY(70px) alone wasn't enough to push the toast fully off-screen on phones in standalone PWA mode (safe-area-inset-bottom ≈ 34px raised it back up, leaving ~30px of the top peeking into the lobby). */ opacity:0;visibility:hidden;pointer-events:none; transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s linear .2s; white-space:nowrap;font-family:'Cairo',sans-serif; box-shadow:0 12px 40px rgba(0,0,0,.5); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .bz-toast.show{ transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto; transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s linear 0s; } .bz-toast.success{ border-color:rgba(76,190,138,.4);color:#5ed39a; box-shadow:0 12px 40px rgba(76,190,138,.2); } .bz-toast.error{ border-color:rgba(255,84,84,.4);color:#ff8a8a; box-shadow:0 12px 40px rgba(255,84,84,.2); } .bz-toast.info{ border-color:rgba(245,197,24,.4);color:#f5c518; box-shadow:0 12px 40px rgba(245,197,24,.2); } @media(max-width:380px){ .big-buzzer{width:170px;height:170px;} .code-badge-value{font-size:26px;letter-spacing:4px;} .bz-logo{font-size:36px;} } /* ── زر العودة للرئيسية الثابت ─────────────────── */ /* ══ اقنعني GAME ══ */ #iq-host-content,#iq-player-content{display:flex;flex-direction:column;gap:16px;} /* Slow-Torture lobby — rule #13: lobby uses the standard platform primitives (.card / .logo / .player-list), so the content container needs the same flex-column layout that iqni/imposter/etc. use. The in-game .tor-wrap has its own layout and is not affected. */ #tor-content{display:flex;flex-direction:column;gap:16px;} #tor-content > .card{margin:0;} /* PWA notch / Dynamic-Island clearance for slow-torture — every phase (lobby host/player, in-game night/morning/voting/results/ended) needs safe-area padding so the role title / "open your eyes" banner doesn't slide under the iPhone notch in standalone PWA. Bottom inset clears the iOS home indicator on the action panels that scroll to the bottom. */ #tor-screen, #tor-screen-lobby-host, #tor-screen-lobby-player { /* No padding-top — flat-60 from #app is the only top spacing. */ padding-bottom: env(safe-area-inset-bottom, 0px); } .iq-answer-input{width:100%;min-height:100px;padding:14px;background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius);color:var(--text); font-family:'Cairo',sans-serif;font-size:1rem;resize:none;direction:rtl;} .iq-answer-input:focus{outline:none;border-color:rgba(124,58,237,0.5);} .iq-answer-input:disabled{opacity:.6;} .iq-answer-card{padding:16px;background:var(--bg);border:1px solid var(--border); border-radius:10px;font-size:.95rem;line-height:1.5;cursor:pointer;transition:all .2s;direction:rtl;} /* Hover highlight is desktop-only — on touch devices (mobile web + PWA) the `:hover` state sticks after a tap until the next tap elsewhere, so the "selectable" outline phantom-clings to whichever card the player tapped last. `(hover: hover) and (pointer: fine)` matches only true hover-capable inputs (mouse, trackpad, stylus); phones/tablets resolve as `(hover: none)` and skip this rule, leaving the .selected state as the only visible cue. */ @media (hover: hover) and (pointer: fine){ .iq-answer-card:hover:not(.voted):not(.own-answer){border-color:rgba(124,58,237,0.5);background:rgba(124,58,237,0.06);} } .iq-answer-card.voted{border-color:var(--accent);background:rgba(124,58,237,.08);cursor:default;} .iq-answer-card.own-answer{opacity:.55;cursor:default;} .iq-card-num{font-size:.72rem;color:var(--muted);margin-bottom:5px;} .iq-countdown{font-size:2.4rem;font-weight:900;color:var(--accent);} .iq-countdown.urgent{color:var(--red);animation:pulse .5s infinite alternate;} @keyframes pulse{from{opacity:1}to{opacity:.5}} .iq-storyteller-tag{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3); border-radius:var(--radius);padding:24px;text-align:center;} /* Floating refresh button (top-LEFT, mirrored opposite the hamburger which is top-RIGHT). Sized identically to #hamburger-btn for symmetry: same height, same padding, same backdrop-blur background, same border radius. Visible only on non-home screens (toggled by show() in JS). */ #return-home-btn{ position:fixed;top:calc(12px + env(safe-area-inset-top, 0px));left:12px;z-index:1100; display:none;align-items:center;gap:6px; background:rgba(20,18,32,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); height:36px;padding:0 12px; color:rgba(240,240,248,.9);font-size:12px;font-family:'Cairo',sans-serif; cursor:pointer;white-space:nowrap; transition:all .25s; } @media (hover: hover) and (pointer: fine){ #return-home-btn:hover{border-color:rgba(245,197,24,0.4);color:var(--primary-gold);} } #return-home-btn:active{transform:scale(.96);} #return-home-btn.visible{display:flex;} /* ── Waiting overlay (pause screen) ───────────────────────── */ #waiting-overlay{ display:none;position:fixed;inset:0;z-index:2000; background:rgba(10,8,20,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); align-items:center;justify-content:center;flex-direction:column; gap:20px;padding:32px;text-align:center;} #waiting-overlay.visible{display:flex;} #waiting-overlay .wo-icon{font-size:4rem;animation:wo-pulse 1.5s ease-in-out infinite;} @keyframes wo-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}} #waiting-overlay .wo-title{font-size:1.3rem;font-weight:800;color:var(--text);} #waiting-overlay .wo-name{color:var(--accent);font-size:1.5rem;font-weight:900;margin-bottom:4px;} #waiting-overlay .wo-timer{font-size:3rem;font-weight:900;font-variant-numeric:tabular-nums; color:var(--accent);letter-spacing:2px;margin:8px 0;} #waiting-overlay .wo-hint{font-size:.85rem;color:var(--muted);max-width:280px;} #waiting-overlay .wo-code{font-size:.8rem;color:var(--muted);letter-spacing:.05em;} #waiting-overlay .wo-code span{font-size:1.1rem;font-weight:900;color:var(--accent);letter-spacing:.15em;margin-right:4px;} #waiting-home-btn{display:none;padding:12px 24px; background:linear-gradient(135deg,#1a1830,#252040);border:1px solid rgba(124,58,237,.3); border-radius:var(--radius);color:var(--text);font-family:'Cairo',sans-serif; font-size:.95rem;font-weight:700;cursor:pointer;} #waiting-home-btn:active{transform:scale(.97);} #waiting-end-btn{display:none;padding:12px 24px; background:linear-gradient(135deg,#5a1010,#7a1515);border:1px solid rgba(220,80,80,0.5); border-radius:var(--radius);color:var(--text);font-family:'Cairo',sans-serif; font-size:.95rem;font-weight:700;cursor:pointer;} #waiting-end-btn:active{transform:scale(.97);} /* Players status button — top-right corner */ #hamburger-btn{ display:none;position:fixed;top:calc(12px + env(safe-area-inset-top, 0px));right:12px;z-index:10300; background:rgba(20,18,32,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); color:rgba(240,240,248,.9);font-size:12px;font-family:'Cairo',sans-serif; height:36px;padding:0 12px;border-radius:var(--radius); cursor:pointer;align-items:center;gap:6px;white-space:nowrap; transition:all .25s;} #hamburger-btn.visible{display:flex;} #hamburger-btn:hover{border-color:rgba(245,197,24,0.4);color:var(--primary-gold);} #hamburger-overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10200;} #hamburger-overlay.visible{display:block;} #hamburger-panel{ display:none;position:fixed;top:0;right:0;width:270px;max-width:85vw;height:100dvh; background:rgba(16,14,28,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-left:1px solid rgba(255,255,255,0.08); z-index:10300; /* Account for iOS notch / home indicator in PWA mode. Inner padding pushes content past the safe-area zones; height stays 100dvh so the panel still spans the full viewport. */ padding:calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px; overflow-y:auto;flex-direction:column;gap:12px;} #hamburger-panel.visible{display:flex;} .hm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;} .hm-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;} .hm-close:hover{background:rgba(255,255,255,0.08);color:var(--text);} .hm-player{ display:flex;align-items:center;gap:10px;padding:9px 12px; border-radius:8px;background:rgba(255,255,255,0.05); border-right:3px solid var(--hm-color,#555);} .hm-player-name{font-size:.9rem;font-weight:600;flex:1;} .hm-player-status{font-size:.72rem;color:var(--muted);} .hm-legend{display:flex;gap:14px;margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.08);flex-wrap:wrap;} .hm-legend span{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted);} .hm-dot{width:10px;height:10px;border-radius:50%;display:inline-block;} .hm-green{background:var(--green);}.hm-yellow{background:var(--accent);}.hm-red{background:var(--red);}.hm-ghost{background:var(--muted);} .hm-player.hm-inactive{opacity:.55;border-color:rgba(107,114,128,.3);} /* Per-row action layout (status label + optional host buttons) */ .hm-player-right{display:flex;align-items:center;gap:6px;} /* Unified host action buttons (kick + host-transfer) — share base styling */ .hm-action-btn{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:var(--muted); font-family:'Cairo',sans-serif;font-size:.7rem;font-weight:700; cursor:pointer;padding:3px 8px;border-radius:6px;line-height:1.2; transition:all .15s;white-space:nowrap; } .hm-action-btn:hover{color:var(--text);} /* Kick — danger action */ .hm-kick-btn:hover{color:#fff;background:rgba(224,90,90,.2);border-color:rgba(224,90,90,.5);} /* Transfer — promotion action */ .hm-transfer-btn:hover{color:#fff;background:rgba(245,197,24,.18);border-color:rgba(245,197,24,.45);} /* Connection Lost Overlay */ #conn-lost-overlay{ display:none;position:fixed;inset:0;z-index:9999; background:rgba(10,8,20,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); align-items:center;justify-content:center; text-align:center;padding:24px; } #conn-lost-overlay.visible{display:flex;} .conn-lost-box{ background:linear-gradient(155deg,#1a1030 0%,#13102a 50%,#180d2a 100%); border:1px solid rgba(239,68,68,.25); border-radius:18px;padding:32px 24px;max-width:340px;width:92%; display:flex;flex-direction:column;align-items:center;gap:16px; box-shadow:0 0 0 1px rgba(239,68,68,.06),0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06); position:relative;overflow:hidden; } .conn-lost-box::before{ content:'';position:absolute;top:-30px;right:-30px; width:120px;height:120px; background:radial-gradient(circle,rgba(239,68,68,.12) 0%,transparent 70%); pointer-events:none; } .conn-lost-box::after{ content:'';position:absolute;bottom:-30px;left:-30px; width:100px;height:100px; background:radial-gradient(circle,rgba(239,68,68,.08) 0%,transparent 70%); pointer-events:none; } .conn-lost-icon{font-size:2.4rem;position:relative;z-index:1;} .conn-lost-title{font-weight:800;font-size:1.1rem;color:#f87171;letter-spacing:.01em;position:relative;z-index:1;} .conn-lost-sub{font-size:.82rem;color:var(--muted);line-height:1.55;max-width:260px;position:relative;z-index:1;} .conn-lost-btn{ background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.08)); border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:12px 32px; color:#f87171;font-family:'Cairo',sans-serif;font-size:.92rem;font-weight:700; cursor:pointer;transition:all .2s;position:relative;z-index:1; } .conn-lost-btn:active{transform:scale(.97);} /* Duplicate-tab overlay */ #duplicate-tab-overlay{ display:none;position:fixed;inset:0;z-index:10000; background:rgba(0,0,0,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); align-items:center;justify-content:center; text-align:center;padding:24px; } #duplicate-tab-overlay.visible{display:flex;} .dup-tab-box{ background:linear-gradient(155deg,#1a1620 0%,#18141e 100%); border:1px solid rgba(234,179,8,.3); border-radius:18px;padding:32px 28px;max-width:320px;width:100%; display:flex;flex-direction:column;align-items:center;gap:14px; box-shadow:0 8px 40px rgba(0,0,0,.5); } .dup-tab-icon{font-size:3rem;} .dup-tab-title{font-weight:800;font-size:1.1rem;color:#eab308;} .dup-tab-sub{font-size:.85rem;color:var(--muted);line-height:1.6;} .dup-tab-retry{ margin-top:8px;padding:10px 22px;border:1px solid #eab308;background:rgba(234,179,8,.15); color:#fde68a;font-weight:700;border-radius:10px;cursor:pointer;font-size:.9rem; font-family:inherit;transition:background .2s,transform .1s; } .dup-tab-retry:hover{background:rgba(234,179,8,.28);} .dup-tab-retry:active{transform:scale(.97);} /* pulse-dot used by homepage live stats */ /* Spectator waiting overlay — purple geometric minimalist */ #spectator-overlay{ display:none;position:fixed;inset:0;z-index:8000; background:rgba(10,8,20,.88); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); align-items:center;justify-content:center; } #spectator-overlay.visible{display:flex;} .spectator-box{ background:linear-gradient(155deg,#1a1030 0%,#13102a 50%,#180d2a 100%); border:1px solid rgba(124,58,237,.35); border-radius:18px;padding:28px 24px;max-width:340px;width:92%; display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center; box-shadow:0 0 0 1px rgba(124,58,237,.08),0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06); position:relative;overflow:hidden; } .spectator-box::before{ content:'';position:absolute;top:-30px;right:-30px; width:120px;height:120px; background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 70%); pointer-events:none; } .spectator-box::after{ content:'';position:absolute;bottom:-30px;left:-30px; width:100px;height:100px; background:radial-gradient(circle,rgba(124,58,237,.12) 0%,transparent 70%); pointer-events:none; } .spectator-icon{font-size:2.2rem;} .spectator-title{font-weight:800;font-size:1.1rem;color:#a78bfa;letter-spacing:.01em;} .spectator-sub{font-size:.82rem;color:var(--muted);line-height:1.55;max-width:240px;} .spectator-scores{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:2px;} .spectator-score-row{display:flex;justify-content:space-between;font-size:.82rem;padding:6px 10px;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.14);border-radius:8px;} /* ── Share-link join overlay ─────────────────────────────────────────── Shown on the home page when ?code= is in the URL. Two flavors of content (room-found / room-not-found) share the same chrome. The ✕ sits at the LEFT in screen coords (regardless of RTL). */ #share-join-overlay{ display:none;position:fixed;inset:0;z-index:8500; background:rgba(10,8,20,.85); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); align-items:center;justify-content:center;padding:20px; animation:shareJoinFadeIn .2s ease both; } #share-join-overlay.visible{display:flex;} @keyframes shareJoinFadeIn{from{opacity:0;}to{opacity:1;}} .share-join-box{ background:linear-gradient(155deg,#1a1530 0%,#13102a 50%,#180d2a 100%); border:1px solid rgba(245,197,24,.25); border-radius:18px;padding:44px 28px 34px;max-width:360px;width:100%; display:flex;flex-direction:column;gap:14px;text-align:center; box-shadow:0 0 0 1px rgba(245,197,24,.06),0 12px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06); position:relative;animation:shareJoinPop .25s ease both; } @keyframes shareJoinPop{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}} .share-join-close{ position:absolute;top:8px;left:8px; width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:rgba(240,240,248,.7);font-size:.95rem;font-family:inherit; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:all .15s;line-height:1;padding:0; } .share-join-close:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);} .share-join-icon{font-size:2.6rem;line-height:1;margin-bottom:6px;} .share-join-title{font-weight:800;font-size:1.15rem;color:#fff;line-height:1.4;} .share-join-sub{font-size:.85rem;color:var(--muted);line-height:1.6;max-width:280px;margin:0 auto;} .share-join-code-pill{ display:inline-block;align-self:center; font-family:'Courier New',monospace;font-size:1.05rem;font-weight:800;letter-spacing:.18em; color:#f5c518;background:rgba(245,197,24,.08);border:1px solid rgba(245,197,24,.25); padding:9px 18px;border-radius:10px;direction:ltr;margin-top:10px; } .share-join-input{ width:100%;padding:14px 14px;border-radius:10px; background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12); color:#fff;font-size:.95rem;font-family:'Cairo',sans-serif;text-align:center; box-sizing:border-box;margin-top:14px; } .share-join-input:focus{outline:none;border-color:rgba(245,197,24,.5);background:rgba(0,0,0,.4);} .share-join-err{ font-size:.8rem;color:#ff8a8a;min-height:1em;line-height:1.4;margin-top:4px; } .share-join-btn{ width:100%;padding:14px;border:none;border-radius:10px;cursor:pointer; background:linear-gradient(135deg,#f5c518,#d49b00);color:#0e0c14; font-family:'Cairo',sans-serif;font-size:.98rem;font-weight:800; transition:transform .12s,filter .15s;margin-top:10px; } .share-join-btn:hover{filter:brightness(1.06);} .share-join-btn:active{transform:scale(.97);} .share-join-btn[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.4);} /* WW pause overlay */ #ww-pause-overlay{ display:none;position:fixed;inset:0;z-index:9500; background:rgba(10,8,20,.95); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); align-items:center;justify-content:center; } #ww-pause-overlay.visible{display:flex;} .ww-pause-box{ background:linear-gradient(155deg,#1a1030 0%,#13102a 50%,#180d2a 100%); border:1px solid rgba(124,58,237,.35); border-radius:18px;padding:32px 24px;max-width:340px;width:92%; display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center; box-shadow:0 0 0 1px rgba(124,58,237,.08),0 8px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06); } /* ═══════════════════════════════════════════════════ WAREWOLF GAME ═══════════════════════════════════════════════════ */ .h-btn-ww{ background:linear-gradient(135deg,#070d1a 0%,#0d1c35 45%,#102540 100%); border:1px solid rgba(70,130,200,.4);border-radius:var(--radius);color:var(--text); display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:right; box-shadow:0 4px 20px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.07);} .h-btn-ww:hover{border-color:rgba(70,150,220,.7);box-shadow:0 0 22px rgba(50,120,200,0.3),0 4px 20px rgba(0,0,0,0.5);transform:scale(1.02);} /* WW screen base — every phase needs: 1. min-height:100vh so the night/forest/atmosphere bleeds full-bleed 2. padding-top:env(safe-area-inset-top) so on PWA / notched iPhones the content starts BELOW the notch / Dynamic Island in every phase (lobby, role-selection, role-reveal, view-card, night, morning, discussion, voting, results, ended, spectator). #app already gives a flat 60px top — adding the inset stacks on top so non-notched devices see no change while notched devices get clean clearance. 3. padding-bottom:env(safe-area-inset-bottom) so the iOS home indicator doesn't overlap the last button / countdown on phases that scroll to the very bottom. */ #screen-ww-lobby,#screen-ww-role-selection,#screen-ww-role-reveal, #screen-ww-view-card,#screen-ww-night,#screen-ww-morning, #screen-ww-discussion,#screen-ww-voting,#screen-ww-results,#screen-ww-ended, #screen-ww-spectator{ min-height:100vh; /* No padding-top — flat-60 from #app is the only top spacing. */ padding-bottom:env(safe-area-inset-bottom, 0px); } /* No padding-top here — the universal in-game rule `.screen.active:not(#screen-home):not(:has(.lobby-top))` already adds 60px so the floating ✕ / ❓ pills clear the title. Re-declaring it would override the universal rule (id-selector specificity beats class-chain) and break flat-60 alignment. */ #screen-ww-ended{align-items:center;position:relative;overflow:hidden;gap:22px;padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));} /* All WW phase content wrappers — match the same flex-column-with-gap shape the lobby and role-selection wrappers already use inline. Without this, the cards / banners / buttons that each `*-content` div renders stack directly against each other with no breathing room (the .screen parent's gap:20px doesn't propagate into the inner content div). Using gap:16px matches `#iq-host-content` / `#iq-player-content` (the canonical pattern for in-game content) so every WW phase aligns visually with iqni / story / dinner / etc. width:100% guards against any phase that tries to render a child without explicit width and ends up shrink-wrapped. */ #ww-role-reveal-content, #ww-view-card-content, #ww-night-content, #ww-morning-content, #ww-discussion-content, #ww-voting-content, #ww-results-content, #ww-ended-content, #ww-spectator-content { display:flex; flex-direction:column; gap:16px; width:100%; } /* WW role card */ .ww-role-card{ border-radius:18px;padding:28px 20px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:12px;} .ww-role-card.team-werewolf{background:linear-gradient(160deg,#1a0505,#2d0a0a);border:2px solid #dc2626;} .ww-role-card.team-villager{background:linear-gradient(160deg,#051510,#0a2520);border:2px solid #15803d;} .ww-role-card.team-tanner{background:linear-gradient(160deg,#1a0f05,#2d1a0a);border:2px solid #92400e;} .ww-role-card.team-special{background:linear-gradient(160deg,#0d0520,#1a0a35);border:2px solid #7c3aed;} .ww-role-icon{font-size:4rem;line-height:1;filter:drop-shadow(0 0 16px rgba(255,255,255,.15));} .ww-role-name{font-size:2rem;font-weight:900;letter-spacing:.03em;} .ww-role-card.team-werewolf .ww-role-name{color:#fca5a5;} .ww-role-card.team-villager .ww-role-name{color:#86efac;} .ww-role-card.team-tanner .ww-role-name{color:#fcd34d;} .ww-role-card.team-special .ww-role-name{color:#c4b5fd;} .ww-role-team{font-size:.78rem;letter-spacing:2px;color:rgba(255,255,255,.5);margin-top:-4px;} .ww-role-desc{font-size:.9rem;color:rgba(255,255,255,.75);line-height:1.6;max-width:280px;} /* WW role selection grid */ .ww-roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .ww-role-sel-card{ background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1); border-radius:12px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px; transition:border-color .2s;} .ww-role-sel-card.selected{border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.08);} .ww-role-sel-icon{font-size:1.8rem;} .ww-role-sel-name{font-size:.82rem;font-weight:700;text-align:center;line-height:1.2;} .ww-role-sel-name-ar{font-size:.7rem;color:var(--muted);text-align:center;margin-top:1px;} .ww-role-sel-count{font-size:.72rem;color:var(--muted);} .ww-role-sel-btns{display:flex;gap:6px;align-items:center;margin-top:2px;} .ww-role-cnt-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.3);color:var(--text);font-size:1rem;cursor:pointer; display:flex;align-items:center;justify-content:center;line-height:1;} .ww-role-cnt-btn:disabled{opacity:.3;cursor:not-allowed;} .ww-role-sel-num{font-size:1rem;font-weight:900;color:var(--accent);min-width:18px;text-align:center;} /* WW night action */ .ww-night-bg{min-height:100vh;padding:20px;display:flex;flex-direction:column;gap:16px;} .ww-night-role-header{text-align:center;padding:16px 0 8px;} .ww-night-role-icon{font-size:3rem;} .ww-night-role-name{font-size:1.4rem;font-weight:900;margin-top:4px;} .ww-night-targets{display:flex;flex-direction:column;gap:8px;margin-top:4px;} .ww-night-target-btn{ display:flex;align-items:center;gap:12px;padding:14px 16px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12); border-radius:10px;cursor:pointer;color:var(--text);font-family:'Cairo',sans-serif; font-size:.95rem;width:100%;transition:border-color .2s,background .2s;} .ww-night-target-btn:hover:not(:disabled){border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.06);} .ww-night-target-btn.selected{border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.12);} .ww-night-target-btn:disabled{opacity:.4;cursor:not-allowed;} .ww-night-target-btn .ww-avatar{width:36px;height:36px;border-radius:50%;background:rgba(139,92,246,.2); display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;flex-shrink:0;} /* ── WW Night Waiting – Immersive Theme ── */ .ww-night-scene{position:fixed;inset:0;height:100dvh;z-index:2;overflow:hidden; background:linear-gradient(175deg,#06050f 0%,#0a0820 30%,#110e28 55%,#0d0a1e 100%);} /* Stars layer */ .ww-night-stars{position:absolute;inset:0;pointer-events:none;} .ww-night-stars span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;} .ww-night-stars span:nth-child(odd){animation:wwTwinkle 3s ease-in-out infinite;} .ww-night-stars span:nth-child(even){animation:wwTwinkle 4s 1.5s ease-in-out infinite;} @keyframes wwTwinkle{0%,100%{opacity:.15}50%{opacity:.8}} /* Moon */ .ww-moon{position:absolute;top:8%;right:12%;width:70px;height:70px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#f0e6c0 0%,#d4c48a 50%,#b0a060 100%); box-shadow:0 0 40px rgba(240,230,180,.25),0 0 80px rgba(240,230,180,.1),0 0 120px rgba(200,180,100,.06); animation:wwMoonGlow 6s ease-in-out infinite alternate;} .ww-moon::after{content:'';position:absolute;top:8px;right:5px;width:52px;height:52px;border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(6,5,15,.95),rgba(6,5,15,.7));pointer-events:none;} @keyframes wwMoonGlow{0%{box-shadow:0 0 40px rgba(240,230,180,.2),0 0 80px rgba(240,230,180,.08)} 100%{box-shadow:0 0 50px rgba(240,230,180,.35),0 0 100px rgba(240,230,180,.12)}} /* Fog/mist */ .ww-fog{position:absolute;bottom:80px;left:-20%;width:140%;height:120px;pointer-events:none; background:linear-gradient(0deg,rgba(100,80,160,.08) 0%,transparent 100%); filter:blur(20px);animation:wwFogDrift 12s ease-in-out infinite alternate;} .ww-fog:nth-child(2){bottom:100px;animation-delay:-6s;opacity:.5;} @keyframes wwFogDrift{0%{transform:translateX(-5%)}100%{transform:translateX(5%)}} /* Forest silhouette */ .ww-forest{position:absolute;bottom:0;left:0;width:100%;height:140px;pointer-events:none;} .ww-forest svg{width:100%;height:100%;display:block;} /* Fireflies */ .ww-fireflies{position:absolute;inset:0;pointer-events:none;} .ww-firefly{position:absolute;width:4px;height:4px;border-radius:50%; background:rgba(180,255,100,.7);box-shadow:0 0 6px rgba(180,255,100,.5),0 0 12px rgba(180,255,100,.2); animation:wwFirefly 8s ease-in-out infinite;} .ww-firefly:nth-child(2){animation-delay:-3s;animation-duration:10s;} .ww-firefly:nth-child(3){animation-delay:-6s;animation-duration:7s;} .ww-firefly:nth-child(4){animation-delay:-1.5s;animation-duration:9s;} .ww-firefly:nth-child(5){animation-delay:-4.5s;animation-duration:11s;} @keyframes wwFirefly{ 0%{opacity:0;transform:translate(0,0)} 15%{opacity:.8} 50%{opacity:.4;transform:translate(30px,-40px)} 85%{opacity:.7} 100%{opacity:0;transform:translate(-20px,-80px)}} /* Central content */ .ww-night-center{position:relative;z-index:3;display:flex;flex-direction:column; align-items:center;justify-content:center;min-height:100dvh;padding:40px 20px;text-align:center;gap:6px;} .ww-night-moon-icon{font-size:3.2rem;filter:drop-shadow(0 0 20px rgba(200,180,100,.3)); animation:wwIconFloat 4s ease-in-out infinite;} @keyframes wwIconFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}} .ww-night-title{font-size:1.6rem;font-weight:900; color:rgba(255,255,255,.85);text-shadow:0 0 30px rgba(139,92,246,.3);letter-spacing:.02em;margin-top:4px;} .ww-night-role-pill{display:inline-flex;align-items:center;gap:6px; background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25); border-radius:20px;padding:6px 16px;margin-top:8px; font-size:.82rem;color:rgba(200,180,255,.7);} .ww-night-role-pill .ww-role-icon-sm{font-size:1rem;} .ww-night-pulse{width:6px;height:6px;border-radius:50%;background:rgba(139,92,246,.6); margin-top:14px;animation:wwPulseGlow 2s ease-in-out infinite;} @keyframes wwPulseGlow{0%,100%{opacity:.3;box-shadow:0 0 4px rgba(139,92,246,.2)} 50%{opacity:1;box-shadow:0 0 12px rgba(139,92,246,.5),0 0 24px rgba(139,92,246,.2)}} .ww-center-cards{display:flex;gap:12px;justify-content:center;margin-top:8px;} .ww-center-card{width:80px;height:110px;border-radius:10px;background:rgba(139,92,246,.15); border:2px solid rgba(139,92,246,.3);display:flex;flex-direction:column;align-items:center; justify-content:center;cursor:pointer;transition:all .2s;gap:4px;font-size:.75rem;color:var(--muted);} .ww-center-card:hover:not(:disabled){border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.2);} .ww-center-card.selected{border-color:rgba(139,92,246,.9);background:rgba(139,92,246,.25);} .ww-center-card:disabled{opacity:.4;cursor:not-allowed;} .ww-center-card-icon{font-size:2rem;} /* WW morning / discussion / voting */ .ww-phase-title{text-align:center;font-size:1.8rem;font-weight:900;} .ww-victim-reveal{text-align:center;padding:20px;border-radius:14px; background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);} .ww-victim-name{font-size:1.4rem;font-weight:900;color:#fca5a5;} .ww-timer-num{font-size:3rem;font-weight:900;color:var(--accent);text-align:center; font-variant-numeric:tabular-nums;} .ww-timer-num.urgent{color:var(--red);animation:pulse .5s infinite alternate;} .ww-vote-grid{display:flex;flex-direction:column;gap:8px;} .ww-vote-btn{display:flex;align-items:center;gap:12px;padding:14px 16px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1); border-radius:10px;cursor:pointer;color:var(--text);font-family:'Cairo',sans-serif; font-size:.95rem;width:100%;direction:rtl;text-align:right;transition:all .2s;} .ww-vote-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(245,197,24,.06);} .ww-vote-btn.selected{border-color:var(--accent);background:rgba(245,197,24,.1);} .ww-vote-btn:disabled{opacity:.5;cursor:not-allowed;} .ww-vote-btn .ww-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;flex-shrink:0;} .ww-voted-done{text-align:center;padding:40px 20px;color:var(--muted);} /* WW results */ .ww-result-banner{text-align:center;padding:20px;border-radius:14px;font-weight:900;font-size:1.3rem;} .ww-result-banner.villager{background:rgba(21,128,61,.12);border:1px solid #15803d;color:#86efac;} .ww-result-banner.werewolf{background:rgba(220,38,38,.12);border:1px solid #dc2626;color:#fca5a5;} .ww-result-banner.tanner{background:rgba(146,64,14,.12);border:1px solid #92400e;color:#fcd34d;} .ww-result-banner.continue{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:1rem;} .ww-result-person-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px; border:1px solid rgba(255,255,255,.1);border-radius:12px;width:100%;text-align:center;} .ww-allroles-grid{display:flex;flex-direction:column;gap:6px;} .ww-allroles-row{display:flex;align-items:center;justify-content:space-between; padding:8px 12px;background:rgba(255,255,255,.04);border-radius:8px;font-size:.88rem;} .ww-allroles-row .role-pill{font-size:.72rem;padding:2px 8px;border-radius:12px;border:1px solid;} .ww-allroles-row .role-pill.team-werewolf{border-color:#dc2626;color:#fca5a5;background:rgba(220,38,38,.1);} .ww-allroles-row .role-pill.team-villager{border-color:#15803d;color:#86efac;background:rgba(21,128,61,.1);} .ww-allroles-row .role-pill.team-tanner{border-color:#92400e;color:#fcd34d;background:rgba(146,64,14,.1);} .ww-allroles-row .role-pill.team-special{border-color:#7c3aed;color:#c4b5fd;background:rgba(124,58,237,.1);} /* role-pill inside result person card */ .ww-result-person-card .role-pill{font-size:.7rem;padding:2px 8px;border-radius:12px;border:1px solid;} .ww-result-person-card .role-pill.team-werewolf{border-color:#dc2626;color:#fca5a5;background:rgba(220,38,38,.1);} .ww-result-person-card .role-pill.team-villager{border-color:#15803d;color:#86efac;background:rgba(21,128,61,.1);} .ww-result-person-card .role-pill.team-tanner{border-color:#92400e;color:#fcd34d;background:rgba(146,64,14,.1);} .ww-result-person-card .role-pill.team-special{border-color:#7c3aed;color:#c4b5fd;background:rgba(124,58,237,.1);} /* WW game over redesign */ .ww-go-confetti{position:fixed;inset:0;pointer-events:none;z-index:0;} .ww-go-shield{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px; animation:wwShieldIn .7s cubic-bezier(.17,.67,.29,1.3) both;} .ww-go-shield-icon{font-size:4rem;animation:wwPulse 2s ease infinite;} .ww-go-shield.villager .ww-go-shield-icon{filter:drop-shadow(0 0 20px rgba(21,128,61,.5));} .ww-go-shield.werewolf .ww-go-shield-icon{filter:drop-shadow(0 0 20px rgba(220,38,38,.5));} .ww-go-shield.tanner .ww-go-shield-icon{filter:drop-shadow(0 0 20px rgba(146,64,14,.5));} .ww-go-shield-label{font-size:.85rem;font-weight:700;letter-spacing:2px;color:var(--muted); animation:wwFadeUp .5s .15s ease both;} .ww-go-shield-text{font-size:1.8rem;font-weight:900;text-align:center;animation:wwFadeUp .5s .25s ease both;} .ww-go-shield.villager .ww-go-shield-text{color:#86efac;} .ww-go-shield.werewolf .ww-go-shield-text{color:#fca5a5;} .ww-go-shield.tanner .ww-go-shield-text{color:#fcd34d;} .ww-go-tanner-sub{font-size:.82rem;color:var(--muted);text-align:center;z-index:1;animation:wwFadeUp .5s .35s ease both;} .ww-go-my-role{width:100%;z-index:1;animation:wwFadeUp .5s .4s ease both;} .ww-go-my-role-card{display:flex;align-items:center;justify-content:center;gap:14px; padding:16px 20px;border-radius:14px;position:relative;overflow:hidden;} .ww-go-my-role-card.team-villager{background:linear-gradient(135deg,rgba(21,128,61,.15),rgba(21,128,61,.05));border:1px solid rgba(21,128,61,.35);} .ww-go-my-role-card.team-werewolf{background:linear-gradient(135deg,rgba(220,38,38,.15),rgba(220,38,38,.05));border:1px solid rgba(220,38,38,.35);} .ww-go-my-role-card.team-tanner{background:linear-gradient(135deg,rgba(146,64,14,.15),rgba(146,64,14,.05));border:1px solid rgba(146,64,14,.35);} .ww-go-my-role-card.team-special{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.05));border:1px solid rgba(124,58,237,.35);} .ww-go-mr-icon{font-size:2.2rem;} .ww-go-mr-info{display:flex;flex-direction:column;gap:3px;} .ww-go-mr-label{font-size:.75rem;color:var(--muted);font-weight:600;} .ww-go-mr-name{font-size:1.15rem;font-weight:800;} .ww-go-my-role-card.team-villager .ww-go-mr-name{color:#86efac;} .ww-go-my-role-card.team-werewolf .ww-go-mr-name{color:#fca5a5;} .ww-go-my-role-card.team-tanner .ww-go-mr-name{color:#fcd34d;} .ww-go-my-role-card.team-special .ww-go-mr-name{color:#c4b5fd;} .ww-go-mr-result{font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:20px;margin-right:auto;} .ww-go-mr-result.won{background:rgba(21,128,61,.15);border:1px solid rgba(21,128,61,.3);color:#86efac;} .ww-go-mr-result.lost{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.2);color:#fca5a5;} .ww-go-roles-section{width:100%;z-index:1;animation:wwFadeUp .5s .5s ease both;} .ww-go-roles-title{font-size:.82rem;font-weight:700;color:var(--muted);text-align:center;margin-bottom:8px;} .ww-go-roles-grid{display:flex;flex-direction:column;gap:8px;} .ww-go-role-row{display:flex;align-items:center;justify-content:space-between; padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border); animation:wwSlideRow .4s ease both;} .ww-go-role-row .rr-left{display:flex;align-items:center;gap:12px;} .ww-go-role-row .rr-icon{font-size:1.5rem;width:32px;text-align:center;} .ww-go-role-row .rr-name{font-size:1rem;font-weight:700;} .ww-go-role-row .rr-pill{font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:12px;border:1px solid;white-space:nowrap;} .rr-pill.team-werewolf{border-color:#dc2626;color:#fca5a5;background:rgba(220,38,38,.1);} .rr-pill.team-villager{border-color:#15803d;color:#86efac;background:rgba(21,128,61,.1);} .rr-pill.team-tanner{border-color:#92400e;color:#fcd34d;background:rgba(146,64,14,.1);} .rr-pill.team-special{border-color:#7c3aed;color:#c4b5fd;background:rgba(124,58,237,.1);} .rr-changed{display:flex;align-items:center;gap:4px;} .rr-changed .rr-old{font-size:.65rem;color:var(--muted);text-decoration:line-through;opacity:.6;} .rr-changed .rr-arrow{font-size:.6rem;color:var(--muted);} .ww-go-center{width:100%;z-index:1;animation:wwFadeUp .5s .6s ease both;} .ww-go-center-title{font-size:.78rem;font-weight:600;color:var(--muted);text-align:center;margin-bottom:6px;} .ww-go-center-cards{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;} .ww-go-center-card{display:flex;flex-direction:column;align-items:center;gap:4px; padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);min-width:80px;} .ww-go-center-card .cc-icon{font-size:1.3rem;} .ww-go-center-card .cc-name{font-size:.76rem;color:var(--muted);font-weight:600;} @keyframes wwShieldIn{0%{opacity:0;transform:scale(0) rotate(-15deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes wwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} @keyframes wwFadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}} @keyframes wwSlideRow{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:none}} /* ═══════════════════════════════════════════════════ SEEN JEEM (سين جيم) — Host + Player ═══════════════════════════════════════════════════ */ /* ── Host: Lobby ──────────────────────────────── */ #sj-s-lobby { align-items:center; justify-content:center; gap:2rem; background: radial-gradient(ellipse at center, #22183a 0%, var(--bg) 65%); } .sj-lobby-logo { font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 900; line-height: 1.2; padding-bottom: 0.05em; background: linear-gradient(165deg, #fff0a0 0%, #f5c518 28%, #e88200 60%, #b85000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 28px rgba(245,180,0,0.55)); } .sj-lobby-sub { font-size: 1.4rem; font-weight: 900; color: var(--primary-gold); opacity: 0.85; margin-top: -1rem; } .sj-room-code-display { text-align:center; background:linear-gradient(175deg,#26263a 0%,#1a1a28 45%,#111118 100%); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:2rem 4rem; box-shadow:0 16px 56px rgba(0,0,0,0.75),inset 0 1px 0 rgba(255,255,255,0.09); } .sj-room-code-display .label { font-size:1rem; opacity:0.6; margin-bottom:0.5rem; color:var(--muted); } .sj-room-code-display .code { font-size:5rem; font-weight:900; letter-spacing:8px; color:var(--accent); direction:ltr; filter:drop-shadow(0 0 14px rgba(245,197,24,0.4)); } .sj-players-status { display:flex; gap:2rem; } .sj-player-slot { background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-radius:var(--radius-lg); padding:1rem 2rem; text-align:center; min-width:160px; border: 1px dashed var(--border); } .sj-player-slot.filled { border-style:solid; border-color:var(--green); } .sj-player-slot .slot-label { font-size:0.8rem; opacity:0.5; margin-bottom:0.3rem; } .sj-player-slot .slot-name { font-size:1.2rem; font-weight:700; } /* ── Lobby: Teams table ──────────────────────── */ .sj-teams-table { display:flex; gap:14px; width:100%; } .sj-team-col { flex:1; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; } .sj-team-col.team-a { border-color:rgba(232,39,42,.35); background:rgba(232,39,42,.04); } .sj-team-col.team-b { border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.04); } .sj-team-label { font-size:1.05rem; font-weight:800; } .sj-team-label.team-a { color:#E8272A; } .sj-team-label.team-b { color:#2563eb; } .sj-team-player { font-size:.9rem; font-weight:600; min-height:24px; color:var(--text); } .sj-team-player.empty { color:var(--muted); font-style:italic; font-weight:400; font-size:.85rem; } .sj-team-name-status { font-size:.72rem; color:var(--green); opacity:.8; } .sj-team-member { padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.9rem; } /* ── Host: Setup (team distribution) ─────────── */ #sj-s-setup { align-items:center; justify-content:center; gap:1.5rem; } .sj-setup-card { background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:2rem; width:500px; } .sj-setup-card h2 { font-size:1.3rem; margin-bottom:1rem; opacity:0.7; } .sj-names-input { width:100%; padding:0.8rem; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); color:var(--text); font-family:'Cairo',sans-serif; font-size:1rem; resize:vertical; min-height:120px; text-align:right; outline:none; transition:all 0.3s; } .sj-names-input:focus { border-color:rgba(245,197,24,0.5); box-shadow:0 0 14px rgba(245,197,24,0.1); } .sj-teams-result { display:flex; gap:1rem; margin-top:1rem; } .sj-team-box { flex:1; background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:1rem; } .sj-team-box h3 { font-size:1rem; margin-bottom:0.5rem; } .sj-team-box.a h3 { color:var(--team-a); } .sj-team-box.b h3 { color:var(--team-b); } .sj-team-member { padding:0.3rem 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.95rem; } /* ── Host: Waiting screen ────────────────────── */ #sj-s-waiting { align-items:center; justify-content:center; gap:1rem; } .sj-waiting-text { font-size:1.5rem; opacity:0.6; } /* ── Host: Game board ────────────────────────── */ #sj-s-board { padding:0; display:flex; flex-direction:column; } .sj-board-top { display:flex; align-items:center; justify-content:space-between; direction:ltr; padding:0.5rem 1.5rem; flex-shrink:0; background: linear-gradient(90deg, var(--team-a) 0%, #12121f 50%, var(--team-b) 100%); } .sj-board-top .sj-team-score-display { direction:rtl; } .sj-team-score-display { display:flex; flex-direction:column; align-items:center; } .sj-team-score-display .t-name { font-size:0.9rem; font-weight:700; opacity:0.8; } .sj-team-score-display .t-pts { font-size:2.2rem; font-weight:900; line-height:1.1; } .sj-turn-badge { background:rgba(0,0,0,0.5); border-radius:50px; padding:0.35rem 1.4rem; font-size:1rem; font-weight:700; border:1px solid rgba(255,255,255,0.12); } .sj-turn-badge span { color:var(--accent); } /* ── Board grid: 3 cols x 2 rows ─────────────── */ .sj-board-grid { flex:1; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap:10px; padding:10px; min-height:0; } /* One category block: [left pts] [center] [right pts] */ .sj-cat-block { display:grid; grid-template-columns: 2fr 3fr 2fr; gap:6px; background:linear-gradient(175deg,#1e1a2c 0%,#13101e 100%); border-radius:14px; padding:8px; border:1px solid rgba(255,255,255,0.08); box-shadow:0 8px 24px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.05); min-height:0; } /* Center -- icon + name */ .sj-cat-center { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; border-radius:10px; padding:4px; } .sj-cat-center .cc-icon { font-size:2.2rem; line-height:1; } .sj-cat-center .cc-name { font-size:0.85rem; font-weight:900; } .sj-cat-center.team-a { background:linear-gradient(160deg,rgba(232,39,42,0.35) 0%,rgba(160,15,15,0.5) 100%); border:1px solid rgba(232,39,42,0.5); box-shadow:inset 0 1px 0 rgba(255,80,80,0.15); } .sj-cat-center.team-b { background:linear-gradient(160deg,rgba(37,99,235,0.35) 0%,rgba(15,50,180,0.5) 100%); border:1px solid rgba(37,99,235,0.5); box-shadow:inset 0 1px 0 rgba(80,130,255,0.15); } /* Left / right columns of point buttons */ .sj-cat-side { display:flex; flex-direction:column; gap:5px; } /* Individual point button */ .sj-pt-btn { flex:1; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; transition:all 0.25s; position:relative; border:1.5px solid transparent; } .sj-pt-btn.side-a { background:linear-gradient(160deg,rgba(232,39,42,0.28) 0%,rgba(160,15,15,0.45) 100%); border-color:rgba(232,39,42,0.5); box-shadow:inset 0 1px 0 rgba(255,80,80,0.1); } .sj-pt-btn.side-b { background:linear-gradient(160deg,rgba(37,99,235,0.28) 0%,rgba(15,50,180,0.45) 100%); border-color:rgba(37,99,235,0.5); box-shadow:inset 0 1px 0 rgba(80,130,255,0.1); } .sj-pt-btn .btn-pts { font-size:1.15rem; font-weight:900; line-height:1; } .sj-pt-btn .btn-team { font-size:0.58rem; opacity:0.45; margin-top:2px; } .sj-pt-btn.side-a .btn-pts { color:#ffaaaa; } .sj-pt-btn.side-b .btn-pts { color:#a0c4ff; } /* USED */ .sj-pt-btn.used { background:#0e0e0e !important; border-color:#222 !important; pointer-events:none; } .sj-pt-btn.used .btn-pts { display:none; } .sj-pt-btn.used .btn-team { display:none; } .sj-pt-btn.used::after { content:'\2713'; font-size:1.3rem; font-weight:900; color:#2ecc71; } /* FLASH -- very obvious */ .sj-pt-btn.flash { animation: sjPtFlash 1.6s ease-out forwards; z-index:10; } @keyframes sjPtFlash { 0% { background:#F5A623 !important; border-color:#F5A623 !important; box-shadow:0 0 0 6px rgba(245,166,35,0.5); transform:scale(1.12); } 40% { background:#F5A623 !important; border-color:#F5A623 !important; box-shadow:0 0 0 10px rgba(245,166,35,0.2); } 100% { transform:scale(1); box-shadow:none; } } .sj-board-bottom { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 1.5rem; background:rgba(13,13,24,0.95); border-top:1px solid rgba(255,255,255,0.08); } .sj-lifelines-display { display:flex; gap:1rem; align-items:center; } .sj-lifeline-icon { font-size:1.5rem; padding:0.3rem 0.6rem; border-radius:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); transition: all 0.3s; } .sj-lifeline-icon.used { opacity:0.2; filter:grayscale(1); } .sj-lifeline-icon.active { background:var(--accent); border-color:var(--accent); animation: sjLifelinePop 0.5s ease; } @keyframes sjLifelinePop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} } /* ── Host: Question screen ───────────────────── */ #sj-s-question { align-items:center; justify-content:center; gap:1.5rem; padding:2rem; } #sj-s-question.active { display:flex !important; } .sj-q-meta { display:flex; gap:1rem; align-items:center; } .sj-q-cat-badge { background:var(--glass-bg); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:50px; padding:0.4rem 1.2rem; font-size:0.9rem; } .sj-q-points-badge { background:var(--accent); color:#000; border-radius:50px; padding:0.4rem 1.2rem; font-weight:900; font-size:0.9rem; } .sj-q-text { font-size:2.5rem; font-weight:900; text-align:center; max-width:800px; line-height:1.4; } .sj-timer-container { width:300px; text-align:center; } .sj-timer-bar-bg { height:12px; background:rgba(255,255,255,0.1); border-radius:10px; overflow:hidden; } .sj-timer-bar { height:100%; background:var(--green); border-radius:10px; transition: width 1s linear, background 1s; } .sj-timer-number { font-size:3rem; font-weight:900; margin-top:0.5rem; } .sj-timer-number.urgent { color:var(--red); animation: sjBlink 0.5s ease infinite; } @keyframes sjBlink { 0%,100%{opacity:1} 50%{opacity:0.3} } .sj-turn-indicator { background:var(--glass-bg); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:50px; padding:0.5rem 1.5rem; font-size:1rem; } .sj-turn-indicator span { font-weight:900; } .sj-skip-btn { background:var(--green); color:#000; border:none; border-radius:12px; padding:0.8rem 2rem; font-family:'Cairo',sans-serif; font-size:1rem; font-weight:900; cursor:pointer; transition: all 0.2s; } .sj-skip-btn:hover { filter:brightness(0.9); } .sj-choices-display { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; max-width:600px; width:100%; } .sj-choice-btn { background:var(--glass-bg); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; font-family:'Cairo',sans-serif; font-size:1.1rem; font-weight:700; color:var(--text); text-align:center; cursor:default; } .sj-hint-display { background:rgba(232,197,71,0.1); border:1px solid var(--primary-gold); border-radius:var(--radius-lg); padding:0.8rem 1.5rem; font-size:1.1rem; color:var(--primary-gold); } /* ── Host: Judging screen ────────────────────── */ #sj-s-judging { align-items:center; justify-content:center; gap:2rem; } .sj-judging-title { font-size:1.5rem; opacity:0.6; } .sj-judge-btns { display:flex; gap:1.5rem; } .sj-judge-btn { padding:1.5rem 3rem; border:none; border-radius:16px; font-family:'Cairo',sans-serif; font-size:1.3rem; font-weight:900; cursor:pointer; transition: all 0.2s; min-width:200px; text-align:center; } .sj-judge-btn:hover { transform:translateY(-3px); filter:brightness(1.1); } .sj-judge-btn.a { background:var(--team-a); color:white; } .sj-judge-btn.b { background:var(--team-b); color:white; } .sj-judge-btn.none { background:var(--muted); color:rgba(255,255,255,0.6); } .sj-judge-btn.deduct-a { background:rgba(232,39,42,0.3); border:1px solid var(--team-a); color:var(--team-a); font-size:0.9rem; } .sj-judge-btn.deduct-b { background:rgba(37,99,235,0.3); border:1px solid var(--team-b); color:#60a5fa; font-size:0.9rem; } /* ── Host: Ended screen ──────────────────────── */ #sj-s-ended { align-items:center; justify-content:center; gap:2rem; background: radial-gradient(ellipse at center, #2a1a00 0%, #0d0d18 65%); } .sj-winner-text { font-size:4rem; font-weight:900; color:var(--accent); } .sj-final-scores { display:flex; gap:3rem; } .sj-final-score-box { background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; text-align:center; min-width:180px; } .sj-final-score-box .fs-name { font-size:1.1rem; margin-bottom:0.5rem; opacity:0.7; } .sj-final-score-box .fs-pts { font-size:3.5rem; font-weight:900; } /* ── Lifeline banner ─────────────────────────── */ /* Seenjeem lifeline banner — kept in DOM and JS still calls sjShowBanner(), but the visual is fully suppressed (was peeking out at the top center of every screen because the transform-based hide didn't fully clear the safe-area inset on notched iPhones). To re-enable later, remove the `display:none !important` line below. */ .sj-lifeline-banner, .sj-lifeline-banner.show { display:none !important; } /* ── Host: Utility ───────────────────────────── */ .sj-btn-gray { background:linear-gradient(160deg,#252538 0%,#1a1a2a 100%); border:1px solid rgba(255,255,255,0.1); color:var(--text); } .sj-btn-gray:hover { border-color:rgba(245,197,24,0.4); } input.sj-setup-input { padding:0.7rem 1rem; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:var(--text); font-family:'Cairo',sans-serif; font-size:1rem; text-align:right; outline:none; transition:all 0.3s; } input.sj-setup-input:focus { border-color:rgba(245,197,24,0.5); box-shadow:0 0 14px rgba(245,197,24,0.1); } /* ═════════════════════════════════════════════════ SEEN JEEM — Player-side ═════════════════════════════════════════════════ */ /* ── Player: Top bar ─────────────────────────── */ .sj-top-bar { background:rgba(13,13,24,0.95); border-bottom:1px solid rgba(255,255,255,0.08); padding:0.7rem 1rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; flex-shrink:0; } .sj-top-bar .sj-team-badge { padding:0.3rem 0.8rem; border-radius:50px; font-size:0.85rem; font-weight:700; } .sj-team-badge.A { background:var(--team-a); } .sj-team-badge.B { background:var(--team-b); } .sj-top-bar .score-mini { font-size:0.85rem; opacity:0.6; } /* ── Player: Connecting ──────────────────────── */ #sj-s-connecting { align-items:center; justify-content:center; gap:1rem; background:var(--bg); } .sj-spinner { width:40px; height:40px; border:3px solid rgba(232,197,71,0.15); border-top-color:var(--primary-gold); border-radius:50%; animation:sjSpin 0.8s linear infinite; } @keyframes sjSpin { to{transform:rotate(360deg)} } /* ── Player: Waiting ─────────────────────────── */ #sj-s-player-waiting { align-items:center; justify-content:center; gap:1.5rem; padding:2rem; text-align:center; } .sj-player-info-card { background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; width:100%; max-width:320px; } /* ── Player: Team name input screen ──────────── */ .sj-team-name-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; height:100%; padding:2rem; text-align:center; } .sj-team-name-input { width:100%; max-width:320px; padding:1rem; background:rgba(255,255,255,0.08); border:1px solid var(--border); border-radius:14px; color:var(--text); font-family:Cairo,sans-serif; font-size:1.3rem; text-align:center; outline:none; transition:all .3s; } .sj-team-name-input:focus { border-color:rgba(245,197,24,.5); box-shadow:0 0 14px rgba(245,197,24,.1); } /* ── Player: Category select ─────────────────── */ #sj-s-cat-select { padding:1rem; gap:0; } .sj-section-title { font-size:1.1rem; font-weight:900; padding:0.5rem 0 0.8rem; opacity:0.8; } .sj-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; } .sj-cat-card { background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 0.7rem; text-align:center; cursor:pointer; transition:all 0.3s; user-select:none; } .sj-cat-card:active { transform:scale(0.95); } .sj-cat-card.selected { border-color:var(--accent); background:rgba(232,197,71,0.1); } .sj-cat-card.disabled { opacity:0.3; pointer-events:none; } .sj-cat-card .ci { font-size:2rem; margin-bottom:0.3rem; } .sj-cat-card .cn { font-size:0.9rem; font-weight:700; } .sj-confirm-btn { width:100%; padding:1rem; background:linear-gradient(135deg,#f5c518 0%,#e88200 55%,#c45a00 100%); color:#1a0800; border:none; border-radius:var(--radius); font-family:'Cairo',sans-serif; font-size:1.1rem; font-weight:900; cursor:pointer; transition:all 0.3s; margin-top:1rem; flex-shrink:0; box-shadow:0 0 24px rgba(245,197,24,0.45),inset 0 1px 0 rgba(255,255,255,0.2); } .sj-confirm-btn:not(:disabled):hover { box-shadow:0 0 40px rgba(245,197,24,0.65); transform:scale(1.02); } .sj-confirm-btn:disabled { opacity:0.3; cursor:not-allowed; } .sj-confirm-btn:not(:disabled):active { transform:scale(0.97); } .sj-selected-counter { text-align:center; font-size:0.9rem; opacity:0.5; padding:0.3rem 0; } /* ── Player: Lifeline select ─────────────────── */ #sj-s-lifeline-select { display:none; padding:1rem; gap:0; } #sj-s-lifeline-select.active { display:flex; } #sj-s-lifeline-select .sj-ll-confirm-bar { padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 16px)); flex-shrink: 0; background: rgba(13,13,24,0.97); border-top: 1px solid rgba(255,255,255,0.08); } .sj-lifeline-card { background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; display:flex; align-items:center; gap:0.8rem; cursor:pointer; transition:all 0.3s; margin-bottom:0.6rem; user-select:none; } .sj-lifeline-card:active { transform:scale(0.97); } .sj-lifeline-card.selected { border-color:var(--primary-gold); background:rgba(232,197,71,0.1); } .sj-lifeline-card .li-icon { font-size:2rem; width:40px; text-align:center; } .sj-lifeline-card .li-info { flex:1; } .sj-lifeline-card .li-name { font-size:1rem; font-weight:900; } .sj-lifeline-card .li-desc { font-size:0.8rem; opacity:0.5; margin-top:0.2rem; } .sj-lifeline-card .li-check { font-size:1.3rem; } /* ── Player: Board ───────────────────────────── */ #sj-s-player-board { padding:0; } .sj-player-board-content { flex:1; overflow-y:auto; padding:0.8rem; } .sj-player-cat-section { margin-bottom:1rem; } .sj-player-cat-header { border-radius:10px; padding:0.6rem 0.8rem; margin-bottom:0.4rem; display:flex; align-items:center; gap:0.5rem; font-weight:900; } .sj-player-cat-header.mine { background:rgba(232,39,42,0.2); border:1px solid rgba(232,39,42,0.3); } .sj-player-cat-header.opponent { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); opacity:0.4; } .sj-player-q-row { display:flex; gap:0.5rem; } .sj-player-q-btn { flex:1; padding:0.8rem; border:none; border-radius:10px; font-family:'Cairo',sans-serif; font-size:1.1rem; font-weight:900; cursor:pointer; transition:all 0.2s; text-align:center; } .sj-player-q-btn:active:not(:disabled) { transform:scale(0.93); } .sj-player-q-btn:disabled { opacity:0.25; cursor:not-allowed; } .sj-player-q-btn.p200 { background:#1a2a38; color:#9cb4cc; } .sj-player-q-btn.p400 { background:#122a20; color:#7dd3a8; } .sj-player-q-btn.p600 { background:#2a1a00; color:#f5a623; } .sj-player-q-btn.used { background:#0a0a0a; color:rgba(255,255,255,0.15); } .sj-player-q-btn.not-my-turn { opacity:0.4; cursor:not-allowed; } /* ── Player: Waiting for question ────────────── */ #sj-s-q-waiting { align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; } /* ── Player: Lifeline use screen ─────────────── */ #sj-s-lifeline-use { padding:1rem; gap:0.8rem; overflow-y:auto; } .sj-ll-use-card { background:linear-gradient(175deg,#272336 0%,#1e1a2c 45%,#141020 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; display:flex; align-items:center; gap:0.8rem; cursor:pointer; transition:all 0.3s; user-select:none; } .sj-ll-use-card:active:not(.used-ll) { transform:scale(0.97); } .sj-ll-use-card.used-ll { opacity:0.25; pointer-events:none; } .sj-ll-use-card:not(.used-ll):hover { border-color:var(--primary-gold); box-shadow:0 0 14px rgba(232,197,71,0.2); } /* ── Player: Opponent turn ───────────────────── */ #sj-s-opponent-turn { align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; } /* ── Player: Disconnected ────────────────────── */ #sj-s-disconnected { align-items:center; justify-content:center; gap:1.5rem; padding:2rem; text-align:center; } /* ── Player: Turn float pill ─────────────────── */ #sj-turn-float-pill { position:fixed; top:calc(56px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%); z-index:50; pointer-events:none; transition:opacity 0.25s ease; } #sj-turn-float-pill.hidden { opacity:0; } .sj-turn-pill-inner { font-size:1.1rem; font-weight:900; padding:0.5rem 1.4rem; border-radius:50px; white-space:nowrap; } .sj-turn-pill-inner.my-turn { background:rgba(232,39,42,0.22); color:var(--red); border:1.5px solid rgba(232,39,42,0.6); box-shadow:0 4px 20px rgba(232,39,42,0.2); animation:sjPillFloat 2.4s ease-in-out infinite; } .sj-turn-pill-inner.not-turn { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.1); } @keyframes sjPillFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-5px) scale(1.02); } } /* legacy class kept so any JS references don't break */ .sj-turn-msg { display:none; } /* ═════════════════════════════════════════════════ SEEN JEEM — TV Scaling ═════════════════════════════════════════════════ */ @media (min-width: 1400px) { .sj-q-text { font-size: 3.8rem !important; } .sj-timer-number { font-size: 5rem !important; } .sj-timer-container { width: 420px !important; } .sj-timer-bar-bg { height: 18px !important; } .sj-pt-btn .btn-pts { font-size: 1.7rem !important; } .sj-pt-btn .btn-team { font-size: 0.75rem !important; } .sj-cat-center .cc-name { font-size: 1.1rem !important; } .sj-cat-center .cc-icon { font-size: 3rem !important; } .sj-team-score-display .t-pts { font-size: 3.5rem !important; } .sj-team-score-display .t-name { font-size: 1.2rem !important; } .sj-turn-badge { font-size: 1.4rem !important; padding: 0.6rem 2rem !important; } .sj-judge-btn { font-size: 1.8rem !important; padding: 2rem 3.5rem !important; min-width: 250px !important; } .sj-judging-title { font-size: 2.2rem !important; } #sj-judgeQDisplay { font-size: 2rem !important; } #sj-judgeADisplay { font-size: 1.4rem !important; } .sj-board-top { padding: 1rem 2rem !important; } .sj-board-bottom { padding: 1rem 2rem !important; } .sj-lifeline-icon { font-size: 2.2rem !important; padding: 0.5rem 0.8rem !important; } .sj-q-points-badge, .sj-q-cat-badge, .sj-turn-indicator { font-size: 1.2rem !important; padding: 0.6rem 1.6rem !important; } .sj-hint-display { font-size: 1.5rem !important; } } /* SJ — extra styles for SPA integration */ .sj-p-topbar { background:rgba(13,13,24,.95); border-bottom:1px solid rgba(255,255,255,.08); padding:.7rem 1rem; padding-top:2.8rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; flex-shrink:0; } .sj-p-team-badge { padding:.3rem .8rem; border-radius:50px; font-size:.85rem; font-weight:700; } .sj-p-team-badge.A { background:var(--team-a); } .sj-p-team-badge.B { background:var(--team-b); } .sj-host-wait-top { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1.5rem; padding-top:3rem; background:rgba(0,0,0,.4); } .sj-hw-team { background:rgba(255,255,255,.04); border:2px solid var(--tc,rgba(255,255,255,.1)); border-radius:10px; padding:.4rem 1rem; text-align:center; min-width:120px; } .sj-hw-label { font-size:.75rem; opacity:.7; margin-bottom:.2rem; } .sj-hw-name { font-size:1rem; font-weight:900; color:var(--tc,var(--text)); } .sj-hw-status { font-size:.75rem; color:#aaa; margin-top:.2rem; } .sj-hw-legend { display:flex; gap:1.5rem; justify-content:center; padding:.6rem; background:rgba(0,0,0,.3); font-size:.8rem; } .sj-judging-title { font-size:1.5rem; opacity:.6; } .sj-judge-a { background:var(--team-a); color:white; } .sj-judge-b { background:var(--team-b); color:white; } .sj-judge-none { background:var(--gray,#252535); color:rgba(255,255,255,.6); } .sj-turn-pill { position:fixed; top:calc(56px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%); z-index:50; pointer-events:none; transition:opacity .25s ease; } .sj-turn-pill.hidden { opacity:0; } .sj-teams-table { display:flex; gap:12px; width:100%; } .sj-team-col { flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; text-align:center; } .sj-team-col.team-a { border-color:rgba(232,39,42,.3); } .sj-team-col.team-b { border-color:rgba(37,99,235,.3); } .sj-team-label { font-size:.82rem; font-weight:700; margin-bottom:8px; } .sj-team-label.team-a { color:#E8272A; } .sj-team-label.team-b { color:#2563eb; } .sj-team-player { font-size:.95rem; font-weight:600; min-height:28px; } .sj-team-player.empty { color:var(--muted); font-style:italic; font-weight:400; } .sj-team-name-display { font-size:.78rem; color:var(--muted); margin-top:4px; } /* ── SJ Host fullscreen game screens (for TV/desktop) ── */ #app:has(#sj-screen-host-board.active), #app:has(#sj-screen-host-question.active), #app:has(#sj-screen-host-judging.active), #app:has(#sj-screen-host-waiting.active) { max-width:100%; padding:0; } /* Hide fixed home button on host board — board has its own inline home button */ body:has(#sj-screen-host-board.active) #return-home-btn { display:none !important; } #sj-screen-host-board.active, #sj-screen-host-question.active, #sj-screen-host-judging.active, #sj-screen-host-waiting.active { height:100vh; padding:0; gap:0; overflow:hidden; } #sj-screen-host-question.active { align-items:center; justify-content:center; gap:1.5rem; padding:2rem; padding-top:3rem; } #sj-screen-host-judging.active { align-items:center; justify-content:center; gap:1.5rem; padding:2rem; padding-top:3rem; } /* ── SJ Disconnect overlay ── */ .sj-dc-overlay { display:none; position:fixed; inset:0; z-index:9000; background:rgba(10,8,20,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); align-items:center; justify-content:center; } .sj-dc-overlay.visible { display:flex; } .sj-dc-box { background:linear-gradient(155deg,#1a1030 0%,#13102a 50%,#180d2a 100%); border:1px solid rgba(245,166,35,.3); border-radius:18px; padding:32px 28px; max-width:380px; width:92%; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; box-shadow:0 8px 40px rgba(0,0,0,.5); } .sj-dc-title { font-weight:800; font-size:1.15rem; color:var(--accent); } .sj-dc-sub { font-size:.88rem; color:var(--muted); line-height:1.5; } .sj-dc-timer { font-size:2rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; } .sj-dc-code { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 20px; font-size:1.3rem; font-weight:900; letter-spacing:.15em; color:var(--accent); font-variant-numeric:tabular-nums; } .sj-dc-status { font-size:.78rem; color:var(--muted); line-height:1.6; width:100%; } /* ═══════════════════════════════════════════════════════════ تفكيك القنبلة — BOMB DEFUSAL — copper/LED tactical theme ─────────────────────────────────────────────────────────── Design language: "bomb-squad mission briefing" — Copper/amber palette for warmth — LED indicators (green OK, amber warn, red danger) — Monospaced digits for all numeric readouts — Card surfaces with inset panel / warning-tape feel ═══════════════════════════════════════════════════════════ */ /* Bomb screen containers — matches the iqni/dinner spacing so lobby cards look identical to the other games while phases still get breathing room. */ #bomb-host-content, #bomb-player-content { display:flex; flex-direction:column; gap:20px; } #bomb-host-content > .card, #bomb-player-content > .card { margin:0; } /* ─── Mission card (shared dark tactical surface — used in reveal/defusal/results) ─── */ .bomb-card{ position:relative; overflow:hidden; background: linear-gradient(155deg, rgba(60,30,15,.28) 0%, rgba(20,12,8,.55) 55%, rgba(30,18,10,.45) 100%); border:1px solid rgba(230,150,80,.22); border-radius:16px; padding:16px 14px; box-shadow:0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); } .bomb-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(245,163,106,.45), transparent); pointer-events:none; } .bomb-card-head{ display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; color:#f5b98b; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; } .bomb-card-head::before{ content:''; width:8px; height:8px; border-radius:50%; background:#f5a36a; box-shadow:0 0 10px #f5a36a; animation:bombLedPulse 1.6s ease-in-out infinite; } @keyframes bombLedPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } } /* ─── "Start next round" button (results phase) ─── */ .bomb-start-btn{ width:100%; padding:14px 18px; border:0; cursor:pointer; font-family:'Cairo', sans-serif; font-weight:900; font-size:1.02rem; border-radius:14px; letter-spacing:.02em; color:#2a0f06; background:linear-gradient(135deg, #ffd580 0%, #f5a36a 40%, #e6732d 100%); box-shadow: 0 6px 0 #9a4010, 0 10px 28px rgba(230,115,45,.4), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .12s ease, box-shadow .12s ease; position:relative; overflow:hidden; } .bomb-start-btn::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.35) 0%, transparent 40%); opacity:.35; } .bomb-start-btn:not(:disabled):hover{ transform:translateY(-1px); box-shadow:0 7px 0 #9a4010, 0 12px 32px rgba(230,115,45,.5), inset 0 1px 0 rgba(255,255,255,.3); } .bomb-start-btn:not(:disabled):active{ transform:translateY(4px); box-shadow:0 2px 0 #9a4010, 0 4px 10px rgba(230,115,45,.35), inset 0 1px 0 rgba(255,255,255,.25); } .bomb-start-btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:0 3px 0 #5e2608, inset 0 1px 0 rgba(255,255,255,.1); } /* ── Generic lobby "settings pill" — lets non-host players see what the host is configuring. Theme variants keep each game's visual language. ── */ .cfg-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;} .cfg-pill{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; border-radius:999px; padding:5px 12px; font-size:.74rem; font-weight:700; letter-spacing:.01em; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--muted); } .cfg-pill b{color:var(--text); font-weight:800;} .cfg-pill-purple{background:rgba(124,58,237,.1); border-color:rgba(124,58,237,.32); color:#c4b5fd;} .cfg-pill-purple b{color:#ddd6fe;} .cfg-pill-gold{background:rgba(245,197,24,.1); border-color:rgba(245,197,24,.3); color:#f5d76b;} .cfg-pill-gold b{color:#ffe58f;} .cfg-pill-copper{background:rgba(230,115,45,.12); border-color:rgba(245,163,106,.35); color:#f5b98b;} .cfg-pill-copper b{color:#ffd580;} /* ═══════ REVEAL phase — "MEMORIZE YOUR BRIEFING" ═══════ */ .bomb-reveal-wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; padding:10px 0 6px; } /* Circular SVG progress-ring countdown */ .bomb-reveal-ring-wrap{ position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; } .bomb-reveal-ring-svg{ position:absolute; inset:0; transform:rotate(-90deg); filter:drop-shadow(0 0 14px rgba(245,163,106,.35)); } .bomb-reveal-ring-track{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:6; } .bomb-reveal-ring-bar{ fill:none; stroke:url(#bombRingGrad); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .25s linear; } .bomb-reveal-ring-core{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:0; } .bomb-reveal-ring-num{ font-family:'Courier New', monospace; font-size:3rem; font-weight:900; color:#ffd580; font-variant-numeric:tabular-nums; line-height:1; text-shadow:0 0 18px rgba(245,163,106,.55); animation:bombRingNum 1s ease-in-out infinite alternate; } @keyframes bombRingNum{ 0%{ opacity:.88; transform:scale(1); } 100%{ opacity:1; transform:scale(1.04); } } .bomb-reveal-ring-label{ margin-top:2px; font-size:.6rem; letter-spacing:.15em; color:#c9a085; text-transform:uppercase; font-weight:700; } /* Color badge — "YOUR WIRE" target card */ .bomb-color-badge{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 26px; width:100%; max-width:320px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bc,#7c3aed) 20%, transparent) 0%, transparent 60%), linear-gradient(155deg, rgba(0,0,0,.35), rgba(20,12,8,.55)); border:2px solid var(--bc,#7c3aed); border-radius:18px; box-shadow: inset 0 2px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 28px color-mix(in srgb, var(--bc,#7c3aed) 42%, transparent); } .bomb-color-badge::before{ content:'YOUR WIRE'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:.58rem; letter-spacing:.22em; font-weight:900; padding:2px 10px; background:var(--bc,#7c3aed); color:#0b0810; border-radius:4px; } .bomb-color-circle{ width:82px; height:82px; border-radius:50%; background:radial-gradient(circle at 32% 32%, color-mix(in srgb, var(--bc,#7c3aed) 80%, white 20%), var(--bc,#7c3aed) 55%, color-mix(in srgb, var(--bc,#7c3aed) 70%, black 30%) 100%) !important; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 32px var(--bc,#7c3aed), inset 0 4px 6px rgba(255,255,255,.25), inset 0 -6px 10px rgba(0,0,0,.35); animation:bombColorPulse 2s ease-in-out infinite; } @keyframes bombColorPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } .bomb-color-name{ font-size:1.25rem; font-weight:900; color:#fff; letter-spacing:.02em; text-shadow:0 2px 4px rgba(0,0,0,.5); } /* Riddle card — "CLASSIFIED DOSSIER" */ .bomb-riddle-card{ position:relative; width:100%; background: linear-gradient(170deg, rgba(50,24,12,.55), rgba(20,12,6,.75)); border:1px solid rgba(245,163,106,.32) !important; border-radius:14px; padding:18px 18px 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 24px rgba(0,0,0,.45); } .bomb-riddle-card::before{ content:''; position:absolute; top:0; left:16px; right:16px; height:1px; background:linear-gradient(90deg, transparent, rgba(245,163,106,.5), transparent); } .bomb-riddle-label{ display:flex; align-items:center; gap:6px; justify-content:center; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#f5b98b; font-weight:800; margin-bottom:8px; } .bomb-riddle-label::before, .bomb-riddle-label::after{ content:''; flex:1; height:1px; max-width:40px; background:linear-gradient(90deg, transparent, rgba(245,163,106,.35), transparent); } .bomb-riddle-text{ font-size:1.05rem; line-height:1.65; color:#f9ecd8; font-weight:700; text-align:center; letter-spacing:.005em; } /* Mnemonic warning hint */ .bomb-hint{ font-size:.82rem; color:#c9a085; text-align:center; line-height:1.6; padding:8px 12px; width:100%; background:rgba(245,163,106,.05); border:1px dashed rgba(245,163,106,.18); border-radius:10px; } .bomb-hint.warn{ color:#ffb259; background:rgba(255,138,61,.07); border-color:rgba(255,138,61,.3); } /* ═══════ DEFUSAL phase — "BOMB CHASSIS" ═══════ */ .bomb-defusal-wrap{ display:flex; flex-direction:column; gap:18px; padding:6px 0 4px; } /* Bomb chassis — the container that frames timer + LEDs like a real device */ .bomb-chassis{ position:relative; display:flex; flex-direction:column; gap:16px; background: repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 2px, transparent 2px 10px), linear-gradient(165deg, rgba(44,22,10,.78), rgba(22,12,8,.9) 50%, rgba(44,22,10,.78)); border:1px solid rgba(245,163,106,.35); border-radius:16px; padding:20px 16px 18px; box-shadow: inset 0 2px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(230,115,45,.15); } .bomb-chassis::before{ /* Warning-stripe accent bar at the top */ content:''; position:absolute; top:0; left:12px; right:12px; height:2px; background: repeating-linear-gradient(90deg, #f5a36a 0 10px, #1a0e08 10px 20px); opacity:.45; border-radius:0 0 4px 4px; } .bomb-chassis::after{ /* Corner "screw" decoration — purely visual */ content:''; position:absolute; bottom:6px; left:8px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, #1a0e08 40%, #3a1d0c 50%, #1a0e08 60%); box-shadow: calc(100vw + 0px) 0 0 -50vw #1a0e08, /* silly offset; replaced below via second ::after via data attr trick */ 6px 0 0 rgba(0,0,0,0); /* no-op — we keep it simple */ } /* LED digital timer display */ .bomb-timer-block{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0 6px; background:linear-gradient(165deg, #180a06, #2a130a); border:1px solid rgba(245,163,106,.3); border-radius:12px; box-shadow: inset 0 3px 8px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.03); } .bomb-timer-label{ display:flex; align-items:center; gap:6px; font-size:.64rem; color:#c9a085; letter-spacing:.18em; text-transform:uppercase; font-weight:800; } .bomb-timer-label::before{ content:''; width:7px; height:7px; border-radius:50%; background:#5ed675; box-shadow:0 0 8px #5ed675; animation:bombLedPulse 1.4s ease-in-out infinite; } .bomb-timer{ font-family:'Courier New', monospace; font-size:2.6rem; font-weight:900; color:#ffb259; font-variant-numeric:tabular-nums; letter-spacing:.08em; text-shadow: 0 0 10px rgba(255,178,89,.65), 0 0 24px rgba(255,178,89,.35); line-height:1; } .bomb-timer-block.urgent{ border-color:rgba(255,107,107,.55); box-shadow: inset 0 3px 8px rgba(0,0,0,.55), 0 0 24px rgba(255,107,107,.3); } .bomb-timer-block.urgent .bomb-timer-label::before{ background:#ff6b6b; box-shadow:0 0 10px #ff6b6b; } .bomb-timer-block.urgent .bomb-timer{ color:#ff6b6b; text-shadow:0 0 10px rgba(255,107,107,.7), 0 0 28px rgba(255,107,107,.4); animation:bombPulseQuick .5s infinite alternate; } @keyframes bombPulseQuick{ 0%{transform:scale(1);} 100%{transform:scale(1.06);} } /* Strike warning lights */ .bomb-strikes-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; margin-top:10px; background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(20,12,8,.45)); border:1px solid rgba(255,255,255,.05); border-radius:10px; } .bomb-strikes-label{ display:flex; align-items:center; gap:6px; font-size:.68rem; color:#c9a085; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .bomb-strikes-cells{ display:flex; gap:8px; } .bomb-strike{ width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #2a1a12, #0f0805 70%); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:.78rem; color:rgba(255,255,255,.18); font-weight:900; box-shadow:inset 0 2px 3px rgba(0,0,0,.55); } .bomb-strike.on{ background:radial-gradient(circle at 35% 30%, #ff8a6a 0%, #d65e5e 45%, #7a1818 100%); border-color:rgba(255,107,107,.6); color:#fff; box-shadow: 0 0 16px rgba(214,94,94,.7), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.3); animation:bombStrikePop .35s ease; } @keyframes bombStrikePop{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.2); } 100%{ transform:scale(1); } } /* In-defusal riddle mini-card (when visible per difficulty) */ .bomb-riddle-card-small{ position:relative; background:linear-gradient(160deg, rgba(60,30,12,.45), rgba(20,12,8,.6)); border:1px solid rgba(245,163,106,.28) !important; border-radius:10px; padding:8px 12px !important; } .bomb-riddle-text-small{ font-size:.92rem; line-height:1.55; color:#f4e4d8; font-weight:700; text-align:center; } /* "STATUS" readout above the button grid */ .bomb-status-bar{ display:flex; align-items:center; gap:8px; justify-content:center; padding:7px 12px; background:rgba(245,163,106,.06); border:1px solid rgba(245,163,106,.18); border-radius:10px; font-size:.78rem; color:#f5b98b; font-weight:700; letter-spacing:.01em; } .bomb-status-bar::before{ content:''; width:8px; height:8px; border-radius:50%; background:#f5a36a; box-shadow:0 0 10px #f5a36a; animation:bombLedPulse 1.5s ease-in-out infinite; } .bomb-status-bar.ok{ color:#9be5a9; background:rgba(94,214,117,.06); border-color:rgba(94,214,117,.22); } .bomb-status-bar.ok::before{ background:#5ed675; box-shadow:0 0 10px #5ed675; } .bomb-status-bar.locked{ color:#c9a085; background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.05); } .bomb-status-bar.locked::before{ background:#555; box-shadow:none; animation:none; } /* Button grid — color buttons like "defuse wires" */ .bomb-btn-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:12px; padding:4px 0; } .bomb-btn{ position:relative; aspect-ratio:1; min-height:96px; background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--bc,#7c3aed) 80%, white 20%), var(--bc,#7c3aed) 58%, color-mix(in srgb, var(--bc,#7c3aed) 65%, black 35%) 100%); border:3px solid color-mix(in srgb, var(--bc,#7c3aed) 65%, black 35%); border-radius:22px; box-shadow: 0 6px 0 color-mix(in srgb, var(--bc,#7c3aed) 35%, black 65%), 0 12px 22px rgba(0,0,0,.52), inset 0 3px 0 rgba(255,255,255,.32), inset 0 -6px 0 rgba(0,0,0,.3); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, filter .2s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px; font-family:'Cairo',sans-serif; -webkit-tap-highlight-color:transparent; } .bomb-btn:not(:disabled):hover{ transform:translateY(-2px); } .bomb-btn:not(:disabled):active{ transform:translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--bc,#7c3aed) 35%, black 65%), 0 4px 10px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.3); } .bomb-btn-label{ font-size:1rem; font-weight:900; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.3); letter-spacing:.01em; } .bomb-btn-ar{ font-size:.72rem; color:rgba(255,255,255,.92); font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.5); } .bomb-btn-other{ filter:saturate(.45) brightness(.62) contrast(.9); cursor:not-allowed; } .bomb-btn-mine{ /* Ring pulse highlighting "your wire" */ box-shadow: 0 6px 0 color-mix(in srgb, var(--bc,#7c3aed) 35%, black 65%), 0 12px 22px rgba(0,0,0,.52), 0 0 0 2px rgba(255,255,255,.15), 0 0 28px color-mix(in srgb, var(--bc,#7c3aed) 58%, transparent), inset 0 3px 0 rgba(255,255,255,.32), inset 0 -6px 0 rgba(0,0,0,.3); animation:bombBtnMineGlow 1.6s ease-in-out infinite; } @keyframes bombBtnMineGlow{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.12); } } .bomb-btn-correct{ border-color:#5ed675; box-shadow: 0 6px 0 #2b9a3a, 0 12px 22px rgba(0,0,0,.52), 0 0 30px rgba(94,214,117,.6), inset 0 3px 0 rgba(255,255,255,.32), inset 0 -6px 0 rgba(0,0,0,.3); animation:bombBtnCorrectPop .4s ease; } @keyframes bombBtnCorrectPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.1); } 100%{ transform:scale(1); } } .bomb-btn-wrong{ border-color:#d65e5e; box-shadow: 0 6px 0 #9a2b2b, 0 12px 22px rgba(0,0,0,.52), 0 0 30px rgba(214,94,94,.6), inset 0 3px 0 rgba(255,255,255,.32), inset 0 -6px 0 rgba(0,0,0,.3); animation:bombWrongShake .45s ease; } .bomb-btn-disabled{ opacity:.82; cursor:not-allowed; transform:none !important; animation:none !important; } .bomb-btn.pressed-self{ filter:brightness(.85) saturate(.8); } @keyframes bombWrongShake{ 0%,100%{transform:translate(0,0);} 25%{transform:translate(-4px,0);} 75%{transform:translate(4px,0);} } /* Full-screen shake when a wrong press happens */ .bomb-shake{ animation:bombScreenShake .42s ease; } @keyframes bombScreenShake{ 0%,100%{transform:translate(0,0);} 20%{transform:translate(-6px,1px);} 40%{transform:translate(5px,-1px);} 60%{transform:translate(-4px,1px);} 80%{transform:translate(4px,-1px);} } /* ── Results banner + sequence + recap ── */ .bomb-result-banner{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 14px; border-radius:16px; margin:0; animation:bombBannerIn .5s ease both; } .bomb-result-banner.success{ background:linear-gradient(145deg,rgba(94,214,117,.12),rgba(43,154,58,.18)); border:1px solid rgba(94,214,117,.35); box-shadow:0 0 32px rgba(94,214,117,.2), inset 0 1px 0 rgba(255,255,255,.08); } .bomb-result-banner.fail{ background:linear-gradient(145deg,rgba(214,94,94,.12),rgba(154,43,43,.2)); border:1px solid rgba(214,94,94,.4); box-shadow:0 0 32px rgba(214,94,94,.25), inset 0 1px 0 rgba(255,255,255,.06); } .bomb-result-icon{ font-size:2.4rem; line-height:1; } .bomb-result-title{ font-size:1.4rem; font-weight:900; color:#fff; } .bomb-result-sub{ font-size:.88rem; color:rgba(255,255,255,.75); } @keyframes bombBannerIn{ 0%{opacity:0;transform:scale(.94);} 100%{opacity:1;transform:scale(1);} } .bomb-seq-list{ display:flex; flex-direction:column; gap:8px; } .bomb-seq-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:10px; } .bomb-seq-dot{ width:22px; height:22px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.3); } .bomb-seq-pos{ font-size:.82rem; color:var(--muted); min-width:22px; text-align:center; } .bomb-seq-name{ font-size:.95rem; color:#f4e4d8; font-weight:700; } .bomb-recap-list{ display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; } .bomb-recap-row{ display:grid; grid-template-columns:22px 36px 1fr; column-gap:8px; row-gap:6px; padding:10px 12px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:10px; align-items:center; } .bomb-recap-dot{ width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.3); } .bomb-recap-pos{ font-size:.78rem; color:#e08d55; font-weight:800; } .bomb-recap-name{ font-size:.88rem; color:#fff; font-weight:700; } .bomb-recap-riddle{ grid-column:1/-1; font-size:.78rem; color:rgba(255,255,255,.55); line-height:1.55; padding-right:30px; } .bomb-next-block{ background:rgba(204,102,40,.08); border:1px solid rgba(204,102,40,.25); border-radius:12px; padding:18px 14px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; } .bomb-next-label{ font-size:.85rem; color:var(--muted); } .bomb-next-timer{ font-size:2rem; font-weight:900; color:#f5a36a; font-variant-numeric:tabular-nums; } /* ═══════════════════════════════════════════════════════════ BOMB — Game Ended (WOW redesign) ═══════════════════════════════════════════════════════════ */ .bomb-end-wrap{ display:flex; flex-direction:column; gap:14px; padding:0; animation:bombEndFade .45s ease both; } .bomb-end-logo{ text-align:center; font-size:1.1rem; font-weight:800; color:#f4c39b; letter-spacing:.02em; padding:2px 0 2px; } @keyframes bombEndFade{ 0%{ opacity:0; transform:translateY(6px); } 100%{ opacity:1; transform:translateY(0); } } /* Hero banner */ .bomb-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 18px 22px; border-radius:22px; text-align:center; animation:bombHeroIn .6s ease both; } @keyframes bombHeroIn{ 0%{ opacity:0; transform:scale(.96); } 60%{ opacity:1; transform:scale(1.01); } 100%{ opacity:1; transform:scale(1); } } .bomb-hero.victory{ background: radial-gradient(circle at 50% 0%, rgba(94,214,117,.28) 0%, transparent 60%), linear-gradient(165deg, rgba(20,40,24,.9) 0%, rgba(12,25,15,.9) 50%, rgba(16,35,22,.9) 100%); border:1px solid rgba(94,214,117,.45); box-shadow: 0 0 0 1px rgba(94,214,117,.1), 0 0 60px rgba(94,214,117,.22), inset 0 1px 0 rgba(255,255,255,.08); } .bomb-hero.defeat{ background: radial-gradient(circle at 50% 0%, rgba(255,140,80,.32) 0%, transparent 60%), linear-gradient(165deg, rgba(60,20,10,.92) 0%, rgba(40,12,6,.92) 50%, rgba(50,18,10,.92) 100%); border:1px solid rgba(230,115,45,.5); box-shadow: 0 0 0 1px rgba(230,115,45,.1), 0 0 60px rgba(230,115,45,.3), inset 0 1px 0 rgba(255,255,255,.06); animation:bombHeroIn .6s ease both, bombHeroShake .7s .4s ease-in-out; } .bomb-hero.aborted{ background: radial-gradient(circle at 50% 0%, rgba(204,102,40,.18) 0%, transparent 60%), linear-gradient(165deg, rgba(30,22,15,.92) 0%, rgba(22,16,12,.92) 50%, rgba(28,20,14,.92) 100%); border:1px solid rgba(204,102,40,.34); box-shadow:0 0 40px rgba(204,102,40,.2), inset 0 1px 0 rgba(255,255,255,.05); } @keyframes bombHeroShake{ 0%,100%{ transform:translateX(0); } 15%{ transform:translateX(-6px) rotate(-.4deg); } 30%{ transform:translateX(6px) rotate(.4deg); } 45%{ transform:translateX(-4px); } 60%{ transform:translateX(4px); } 75%{ transform:translateX(-2px); } } .bomb-hero-fx{ position:absolute; inset:0; pointer-events:none; z-index:2; } .bomb-hero-shock,.bomb-hero-ring{ position:absolute; top:44px; left:50%; width:110px; height:110px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; } .bomb-hero.victory .bomb-hero-shock{ background:radial-gradient(circle, rgba(94,214,117,.4) 0%, rgba(94,214,117,0) 70%); animation:bombHeroPulse 2.2s ease-in-out infinite; } .bomb-hero.defeat .bomb-hero-shock{ background:radial-gradient(circle, rgba(255,140,80,.45) 0%, rgba(255,140,80,0) 70%); animation:bombHeroPulse 1.4s ease-in-out infinite; } .bomb-hero.aborted .bomb-hero-shock{ background:radial-gradient(circle, rgba(204,102,40,.22) 0%, rgba(204,102,40,0) 70%); } .bomb-hero-ring{ border:1px solid rgba(255,255,255,.08); width:160px; height:160px; animation:bombHeroRing 3s ease-in-out infinite; } @keyframes bombHeroPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(.9); opacity:.85; } 50%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; } } @keyframes bombHeroRing{ 0%,100%{ opacity:.3; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:.55; transform:translate(-50%,-50%) scale(1.06); } } .bomb-hero-icon{ position:relative; z-index:3; font-size:3.6rem; line-height:1; filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)); animation:bombHeroIcon .8s .1s ease both; } .bomb-hero.victory .bomb-hero-icon{ animation:bombHeroIcon .8s .1s ease both, bombWinBob 2s 1s ease-in-out infinite; } .bomb-hero.defeat .bomb-hero-icon{ animation:bombHeroIcon .8s .1s ease both, bombLoseTilt 2s 1s ease-in-out infinite; } @keyframes bombHeroIcon{ 0%{ opacity:0; transform:scale(.3) rotate(-14deg); } 60%{ opacity:1; transform:scale(1.12) rotate(4deg); } 100%{ opacity:1; transform:scale(1) rotate(0); } } @keyframes bombWinBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } } @keyframes bombLoseTilt{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } } .bomb-hero-title{ position:relative; z-index:3; font-size:1.7rem; font-weight:900; color:#fff; letter-spacing:.01em; margin-top:4px; text-shadow:0 2px 16px rgba(0,0,0,.5); animation:bombHeroText .6s .2s ease both; } .bomb-hero.victory .bomb-hero-title{ color:#b8efc4; } .bomb-hero.defeat .bomb-hero-title{ color:#ffc89a; } .bomb-hero.aborted .bomb-hero-title{ color:#f4c39b; } .bomb-hero-sub{ position:relative; z-index:3; font-size:.88rem; color:rgba(255,255,255,.72); line-height:1.55; animation:bombHeroText .6s .28s ease both; } @keyframes bombHeroText{ 0%{ opacity:0; transform:translateY(6px); } 100%{ opacity:1; transform:translateY(0); } } .bomb-hero-score{ position:relative; z-index:3; display:flex; align-items:baseline; justify-content:center; gap:14px; margin-top:8px; animation:bombHeroText .6s .36s ease both; } .bomb-hero-score-w,.bomb-hero-score-l{ font-size:2.6rem; font-weight:900; font-variant-numeric:tabular-nums; min-width:32px; } .bomb-hero-score-w{ color:#5ed675; text-shadow:0 0 16px rgba(94,214,117,.35); } .bomb-hero-score-l{ color:#ff8a3d; text-shadow:0 0 16px rgba(255,138,61,.4); } .bomb-hero-score-vs{ font-size:1.3rem; font-weight:800; color:rgba(255,255,255,.4); letter-spacing:.1em; } .bomb-hero-meta{ position:relative; z-index:3; font-size:.74rem; color:rgba(255,255,255,.55); letter-spacing:.02em; text-transform:uppercase; animation:bombHeroText .6s .44s ease both; } /* Stats grid */ .bomb-stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; animation:bombEndFade .5s .2s ease both; } .bomb-stat-tile{ background:linear-gradient(155deg, rgba(255,255,255,.035), rgba(0,0,0,.2)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; transition:transform .2s ease; } .bomb-stat-tile.win{ background:linear-gradient(155deg, rgba(94,214,117,.1), rgba(43,154,58,.05)); border-color:rgba(94,214,117,.28); } .bomb-stat-tile.lose{ background:linear-gradient(155deg, rgba(230,115,45,.1), rgba(120,50,20,.05)); border-color:rgba(230,115,45,.28); } .bomb-stat-tile.neutral{ background:linear-gradient(155deg, rgba(244,195,155,.06), rgba(60,40,20,.12)); border-color:rgba(204,102,40,.2); } .bomb-stat-num{ font-size:1.75rem; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; } .bomb-stat-tile.win .bomb-stat-num{ color:#5ed675; } .bomb-stat-tile.lose .bomb-stat-num{ color:#ff8a3d; } .bomb-stat-tile.neutral .bomb-stat-num{ color:#f4c39b; } .bomb-stat-lbl{ font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.01em; } /* Round timeline */ .bomb-tl-card{ background:linear-gradient(155deg, rgba(204,102,40,.06), rgba(30,20,10,.45)); border:1px solid rgba(204,102,40,.22); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:12px; animation:bombEndFade .5s .28s ease both; } .bomb-tl-head{ font-size:.88rem; font-weight:800; color:#f4c39b; letter-spacing:.01em; } .bomb-tl-track{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; justify-content:flex-start; padding:4px 0; } .bomb-tl-dot{ position:relative; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1rem; animation:bombTlPop .45s ease both; flex-shrink:0; } @keyframes bombTlPop{ 0%{ opacity:0; transform:scale(.4); } 70%{ opacity:1; transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); } } .bomb-tl-dot.ok{ background:linear-gradient(145deg,#5ed675,#2b9a3a); color:#0b2414; box-shadow:0 0 12px rgba(94,214,117,.4), inset 0 1px 0 rgba(255,255,255,.25); } .bomb-tl-dot.fail{ background:linear-gradient(145deg,#ff8a3d,#b64318); color:#2a0f06; box-shadow:0 0 12px rgba(255,138,61,.42), inset 0 1px 0 rgba(255,255,255,.2); } .bomb-tl-dot em{ position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); font-size:.62rem; font-style:normal; font-weight:700; color:var(--muted); } .bomb-tl-sep{ width:8px; height:2px; background:rgba(255,255,255,.1); border-radius:1px; flex-shrink:0; } .bomb-tl-legend{ margin-top:10px; font-size:.7rem; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .bomb-tl-mini{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:.72rem; font-weight:900; color:#0b2414; } .bomb-tl-mini.ok { background:#5ed675; color:#0b2414; } .bomb-tl-mini.fail{ background:#ff8a3d; color:#2a0f06; } /* Players list */ .bomb-players-card{ background:linear-gradient(155deg, rgba(124,58,237,.06), rgba(30,20,35,.45)); border:1px solid rgba(124,58,237,.22); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; animation:bombEndFade .5s .36s ease both; } .bomb-players-head{ font-size:.88rem; font-weight:800; color:#d0c4f2; } .bomb-players-grid{ display:flex; flex-wrap:wrap; gap:6px; } .bomb-player-chip{ display:flex; align-items:center; gap:6px; padding:6px 10px 6px 6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:999px; font-size:.8rem; color:#e8e5f4; } .bomb-player-chip.me{ background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.4); } .bomb-player-chip.left{ opacity:.55; } .bomb-player-avatar{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#7c3aed,#5b21b6); font-weight:800; color:#fff; font-size:.72rem; flex-shrink:0; } .bomb-player-name{ font-weight:600; } .bomb-player-badge{ font-size:.6rem; font-weight:800; padding:2px 6px; border-radius:999px; letter-spacing:.02em; } .bomb-player-badge.host{ background:rgba(240,192,64,.2); color:#f0c040; border:1px solid rgba(240,192,64,.4); } .bomb-player-badge.me{ background:rgba(167,139,250,.18); color:#c4b5fd; border:1px solid rgba(167,139,250,.4); } /* End actions */ .bomb-end-actions{ display:flex; flex-direction:column; gap:8px; margin-top:4px; animation:bombEndFade .5s .44s ease both; } .bomb-end-actions .btn{ margin:0; } /* ═══════════════════════════════════════════════════════════ BOMB — Phase Header (clearer round tracker) ═══════════════════════════════════════════════════════════ */ .bomb-phase-hdr{ position:relative; display:flex; flex-direction:column; gap:10px; background:linear-gradient(155deg, rgba(204,102,40,.08), rgba(30,15,8,.55)); border:1px solid rgba(204,102,40,.25); border-radius:14px; padding:12px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .bomb-phase-hdr-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .bomb-phase-round{ display:flex; align-items:baseline; gap:6px; font-weight:800; color:#f4c39b; } .bomb-phase-round-num{ font-size:1.25rem; line-height:1; color:#fff; } .bomb-phase-round-sep{ color:rgba(255,255,255,.35); font-size:.92rem; } .bomb-phase-round-total{ font-size:.92rem; color:rgba(255,255,255,.55); } .bomb-phase-round-lbl{ font-size:.72rem; color:var(--muted); margin-inline-end:2px; } .bomb-phase-diff{ font-size:.72rem; color:#e08d55; background:rgba(204,102,40,.15); border:1px solid rgba(204,102,40,.35); border-radius:999px; padding:3px 10px; font-weight:700; display:inline-flex; align-items:center; gap:4px; } .bomb-phase-score{ display:flex; align-items:center; gap:10px; padding:4px 0 2px; } .bomb-phase-score-box{ flex:1; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); } .bomb-phase-score-box.win{ background:rgba(94,214,117,.08); border-color:rgba(94,214,117,.22); } .bomb-phase-score-box.lose{ background:rgba(255,138,61,.08); border-color:rgba(255,138,61,.22); } .bomb-phase-score-label{ font-size:.68rem; color:var(--muted); font-weight:700; letter-spacing:.01em; } .bomb-phase-score-val{ margin-inline-start:auto; font-size:1.1rem; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; } .bomb-phase-score-box.win .bomb-phase-score-val{ color:#5ed675; } .bomb-phase-score-box.lose .bomb-phase-score-val{ color:#ff8a3d; } .bomb-phase-goal{ font-size:.7rem; color:var(--muted); text-align:center; line-height:1.4; } .bomb-phase-goal b{ color:#f4c39b; font-weight:800; } /* Shared Story voting/writing screens reuse `.iq-answer-card`, `.iq-answer-input`, `.iq-countdown`, and `.iq-storyteller-tag` for a consistent look with Iqni. */ #st-host-content,#st-player-content{display:flex;flex-direction:column;gap:20px;} #st-host-content > .card,#st-player-content > .card{margin:0;} #st-host-content .iq-countdown,#st-player-content .iq-countdown{margin-bottom:4px;} /* ═══════════════════════════════════════════════════════════ العشاء المسموم — POISONED DINNER (purple mystery theme) ═══════════════════════════════════════════════════════════ */ #dn-host-content, #dn-player-content { display:flex; flex-direction:column; gap:20px; } #dn-host-content > .card, #dn-player-content > .card { margin:0; } .dn-hero { text-align:center; padding:22px 18px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; } .dn-hero-icon { font-size:2.2rem; line-height:1; } .dn-hero-title { font-size:1.55rem; font-weight:900; letter-spacing:.01em; background:linear-gradient(135deg,#a78bfa,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; } .dn-hero-sub { font-size:.82rem; color:var(--muted); max-width:340px; line-height:1.55; } .dn-sec-label { font-size:.72rem; font-weight:800; color:#a78bfa; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; } .dn-sec { display:flex; flex-direction:column; gap:8px; } .dn-card-dark { background:linear-gradient(160deg,#1a1030 0%,#13102a 55%,#180d2a 100%); border:1px solid rgba(124,58,237,.28); border-radius:14px; padding:14px 16px; color:var(--text); box-shadow:0 4px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04); } .dn-victim-card { background:linear-gradient(160deg,rgba(124,58,237,.14) 0%,rgba(90,30,170,.08) 100%); border:1px solid rgba(167,139,250,.35); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; position:relative; overflow:hidden; } .dn-victim-card::before { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; background:radial-gradient(circle,rgba(124,58,237,.2) 0%,transparent 70%); pointer-events:none; } .dn-victim-title { font-size:.72rem; font-weight:800; color:#a78bfa; letter-spacing:.05em; text-transform:uppercase; } .dn-victim-name { font-size:1.15rem; font-weight:900; color:#fff; } .dn-victim-desc { font-size:.85rem; color:var(--muted); line-height:1.5; } .dn-role-chip { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(124,58,237,.2)); border:1px solid rgba(167,139,250,.4); border-radius:999px; padding:5px 12px; font-size:.78rem; font-weight:800; color:#d4b8ff; } .dn-role-chip.detective { background:linear-gradient(135deg,rgba(92,206,126,.15),rgba(52,166,96,.2)); border-color:rgba(92,206,126,.5); color:#a5e8b9; } .dn-role-chip.killer { background:linear-gradient(135deg,rgba(220,80,80,.15),rgba(180,40,40,.2)); border-color:rgba(220,80,80,.5); color:#ffb1b1; } .dn-character-big { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 18px; background:linear-gradient(160deg,rgba(124,58,237,.1),rgba(255,255,255,.02)); border:1px solid rgba(167,139,250,.3); border-radius:16px; } .dn-character-big-name { font-size:1.4rem; font-weight:900; color:#fff; } .dn-character-big-title { font-size:.9rem; color:#a78bfa; font-weight:700; } .dn-character-big-desc { font-size:.85rem; color:var(--muted); text-align:center; line-height:1.55; margin-top:6px; } .dn-memory-list { display:flex; flex-direction:column; gap:10px; } .dn-memory-item { background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(124,58,237,.06)); border:1px solid rgba(124,58,237,.22); border-radius:12px; padding:12px 14px; font-size:.88rem; line-height:1.7; color:var(--text); position:relative; } .dn-memory-item::before { content:'❝'; position:absolute; top:-4px; right:10px; font-size:1.4rem; color:rgba(167,139,250,.5); } .dn-memory-num { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; background:#7c3aed; color:#fff; border-radius:50%; font-size:.75rem; font-weight:800; margin-left:8px; } .dn-countdown-big { text-align:center; font-size:3rem; font-weight:900; background:linear-gradient(135deg,#a78bfa,#6d28d9); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; line-height:1; } .dn-countdown-sub { text-align:center; font-size:.78rem; color:var(--muted); margin-top:4px; } .dn-speaker-hero { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px; border-radius:16px; background:linear-gradient(160deg,rgba(124,58,237,.12),rgba(24,13,42,.8)); border:1px solid rgba(167,139,250,.4); } .dn-speaker-label { font-size:.72rem; font-weight:800; color:#a78bfa; letter-spacing:.05em; text-transform:uppercase; } .dn-speaker-name { font-size:1.5rem; font-weight:900; color:#fff; } .dn-speaker-char { font-size:.88rem; color:#d4b8ff; } .dn-speaker-bar { height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin-top:6px; width:100%; } .dn-speaker-bar-fill { height:100%; background:linear-gradient(90deg,#7c3aed,#a78bfa); border-radius:3px; transition:width .5s linear; } .dn-ready-row { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--muted); margin-top:4px; } .dn-ready-pill { padding:4px 10px; border-radius:999px; background:rgba(124,58,237,.15); color:#d4b8ff; font-weight:700; } .dn-chars-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .dn-char-card { background:rgba(255,255,255,.04); border:1px solid rgba(124,58,237,.2); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; cursor:pointer; transition:transform .2s ease, border-color .2s ease; } .dn-char-card:hover, .dn-char-card.selected { transform:translateY(-2px); border-color:rgba(167,139,250,.7); box-shadow:0 4px 14px rgba(124,58,237,.2); } .dn-char-card.selected { background:rgba(124,58,237,.18); } .dn-char-name { font-size:.95rem; font-weight:800; color:#fff; } .dn-char-title { font-size:.75rem; color:#a78bfa; } .dn-char-player { font-size:.7rem; color:var(--muted); margin-top:2px; padding-top:4px; border-top:1px dashed rgba(255,255,255,.1); } .dn-hint-stone-btn { width:100%; padding:12px; border-radius:12px; background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; border:none; font-family:'Cairo',sans-serif; font-size:.9rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 14px rgba(124,58,237,.3); transition:transform .2s ease; } .dn-hint-stone-btn:hover { transform:translateY(-1px); } .dn-hint-stone-btn:disabled { opacity:.5; cursor:not-allowed; background:rgba(255,255,255,.06); box-shadow:none; color:var(--muted); } .dn-fact-list { display:flex; flex-direction:column; gap:8px; } .dn-fact-item { background:rgba(92,206,126,.08); border:1px solid rgba(92,206,126,.3); border-radius:10px; padding:10px 12px; font-size:.85rem; line-height:1.55; color:#cfe8d8; } .dn-fact-item::before { content:'🔍 '; opacity:.8; } .dn-question-area { display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(124,58,237,.2); border-radius:12px; padding:12px; } .dn-question-target-row { display:flex; gap:6px; flex-wrap:wrap; } .dn-question-target-btn { padding:6px 12px; border-radius:999px; font-size:.78rem; font-weight:700; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--text); cursor:pointer; } .dn-question-target-btn.selected { background:rgba(167,139,250,.2); border-color:rgba(167,139,250,.6); color:#d4b8ff; } .dn-question-input { width:100%; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 12px; color:var(--text); font-family:'Cairo',sans-serif; font-size:.85rem; resize:none; } .dn-question-log { display:flex; flex-direction:column; gap:8px; margin-top:8px; } .dn-question-entry { background:rgba(255,255,255,.04); border:1px dashed rgba(167,139,250,.3); border-radius:10px; padding:10px; font-size:.8rem; } .dn-question-entry-meta { color:#a78bfa; font-weight:700; font-size:.72rem; margin-bottom:4px; } .dn-question-entry-text { color:var(--text); line-height:1.5; } .dn-result-banner { padding:22px 16px; border-radius:16px; text-align:center; background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(92,206,126,.1)); border:1px solid rgba(167,139,250,.4); display:flex; flex-direction:column; align-items:center; gap:8px; } .dn-result-banner.win { background:linear-gradient(135deg,rgba(92,206,126,.2),rgba(52,166,96,.1)); border-color:rgba(92,206,126,.5); } .dn-result-banner.lose { background:linear-gradient(135deg,rgba(220,80,80,.2),rgba(180,40,40,.1)); border-color:rgba(220,80,80,.5); } .dn-result-icon { font-size:2.6rem; } .dn-result-title { font-size:1.3rem; font-weight:900; color:#fff; } .dn-result-sub { font-size:.88rem; color:var(--muted); line-height:1.55; max-width:340px; } .dn-solution-box { background:linear-gradient(160deg,rgba(124,58,237,.08),rgba(255,255,255,.02)); border:1px solid rgba(124,58,237,.3); border-radius:12px; padding:14px 16px; line-height:1.7; font-size:.88rem; color:var(--text); } /* Speaking-phase text highlight — simulates live "now speaking" text for detective/group focus */ .dn-memory-emphasis { background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(167,139,250,.08)); border-left:3px solid #7c3aed; padding:10px 12px; border-radius:8px; font-size:.88rem; line-height:1.7; font-weight:500; } .dn-speak-pill { display:inline-block; padding:3px 10px; border-radius:999px; background:rgba(167,139,250,.15); color:#d4b8ff; font-size:.72rem; font-weight:700; } .dn-tokens-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:rgba(124,58,237,.15); color:#d4b8ff; font-size:.75rem; font-weight:700; } /* ═══════════════════════════════════════════════════════════ Dinner end screens — celebration (win) / doom (lose) / aborted ═══════════════════════════════════════════════════════════ */ .dn-end-wrap { display:flex; flex-direction:column; gap:16px; } .dn-end-hero { position:relative; overflow:hidden; border-radius:22px; padding:36px 22px 30px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } .dn-end-hero.win { background: radial-gradient(circle at 20% 10%, rgba(253,224,71,.22) 0%, transparent 55%), radial-gradient(circle at 80% 90%, rgba(167,139,250,.22) 0%, transparent 55%), linear-gradient(165deg,#2a1f06 0%,#1a1030 55%,#170a2a 100%); border:1px solid rgba(253,224,71,.45); animation:dnWinGlow 2.4s ease-in-out infinite alternate; } .dn-end-hero.lose { background: radial-gradient(circle at 50% 0%, rgba(220,38,38,.28) 0%, transparent 60%), linear-gradient(165deg,#1a0909 0%,#15060d 55%,#100409 100%); border:1px solid rgba(220,38,38,.45); animation:dnLosePulse 3s ease-in-out infinite; } .dn-end-hero.aborted { background:linear-gradient(165deg,#171128 0%,#121023 55%,#140d24 100%); border:1px solid rgba(167,139,250,.3); } @keyframes dnWinGlow { 0% { box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 0 rgba(253,224,71,0); } 100% { box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 36px rgba(253,224,71,.35); } } @keyframes dnLosePulse { 0%,100% { box-shadow:0 10px 40px rgba(0,0,0,.55), inset 0 0 60px rgba(220,38,38,.10); } 50% { box-shadow:0 10px 40px rgba(0,0,0,.55), inset 0 0 80px rgba(220,38,38,.22); } } .dn-end-hero-fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; } .dn-end-hero > *:not(.dn-end-hero-fx) { position:relative; z-index:3; } .dn-end-hero .dn-end-icon { font-size:3.2rem; line-height:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)); } .dn-end-hero.win .dn-end-icon { animation:dnIconBounce 1.4s cubic-bezier(.34,1.56,.64,1) both; } .dn-end-hero.lose .dn-end-icon { animation:dnIconShake .6s ease-in-out 2 both; } @keyframes dnIconBounce { 0% { transform:scale(.2) rotate(-12deg); opacity:0; } 60% { transform:scale(1.15) rotate(6deg); opacity:1; } 100% { transform:scale(1) rotate(0); } } @keyframes dnIconShake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px) rotate(-3deg); } 75% { transform:translateX(6px) rotate(3deg); } } .dn-end-hero .dn-end-title { font-size:1.85rem; font-weight:900; letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,0,0,.5); } .dn-end-hero.win .dn-end-title { background:linear-gradient(135deg,#fde047 0%,#facc15 50%,#f59e0b 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .dn-end-hero.lose .dn-end-title { color:#fecaca; } .dn-end-hero.aborted .dn-end-title { background:linear-gradient(135deg,#c4b5fd,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; } .dn-end-hero .dn-end-sub { font-size:.92rem; color:rgba(255,255,255,.75); line-height:1.6; max-width:360px; } .dn-end-hero.win .dn-end-sub { color:#fef3c7; } .dn-end-hero.lose .dn-end-sub { color:#fecaca; } .dn-end-role-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; font-size:.75rem; font-weight:800; letter-spacing:.04em; margin-top:4px; } .dn-end-role-pill.win { background:rgba(253,224,71,.14); border:1px solid rgba(253,224,71,.4); color:#fde68a; } .dn-end-role-pill.lose { background:rgba(220,38,38,.14); border:1px solid rgba(220,38,38,.4); color:#fecaca; } .dn-end-players-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .dn-end-player-chip { background:rgba(255,255,255,.04); border:1px solid rgba(124,58,237,.25); border-radius:10px; padding:10px 12px; font-size:.88rem; font-weight:700; color:#fff; text-align:center; } .dn-end-actions { display:flex; flex-direction:column; gap:8px; margin-top:4px; } /* ═══════════════════════════════════════════════════════════════════════════ THEMED LOBBY SYSTEM — applied via [data-lobby-theme=""] on the lobby container (set by renderLobby()). Each key remaps --lobby-accent etc. Keys match the actual in-app dominant colors: ww red+night, im gold, iq purple, au gold, sj red/blue, bz gold, bomb copper, st purple, dn lavender, tor gold+blood ═══════════════════════════════════════════════════════════════════════════ */ /* Default fallback (gold — matches global --accent). Per-game backgrounds are painted on / directly via the :has() rules below — that's the only way the gradient bleeds behind the iOS status bar / notch / home indicator without containing-block tricks. */ [data-lobby-theme]{ --lobby-accent:#f5c518; --lobby-accent-soft:#a37c00; --lobby-accent-glow:rgba(245,197,24,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#ffe58f 100%); --lobby-bg:radial-gradient(ellipse at top, #1a1030 0%, #0a0814 60%, #05030a 100%); position:relative; isolation:isolate; } [data-lobby-theme="ww"]{ --lobby-accent:#dc2626;--lobby-accent-soft:#7f1d1d;--lobby-accent-glow:rgba(220,38,38,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#fca5a5 100%); --lobby-bg:radial-gradient(ellipse at top, #110e28 0%, #0a0820 50%, #06050f 100%); } [data-lobby-theme="im"]{ --lobby-accent:#f5c518;--lobby-accent-soft:#a37c00;--lobby-accent-glow:rgba(245,197,24,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#ffe58f 100%); --lobby-bg:radial-gradient(ellipse at top, #1a1408 0%, #0e0a04 50%, #050307 100%); } [data-lobby-theme="iq"]{ --lobby-accent:#7c3aed;--lobby-accent-soft:#5b21b6;--lobby-accent-glow:rgba(124,58,237,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#c4b5fd 100%); --lobby-bg:radial-gradient(ellipse at top, #1a1430 0%, #0e0b1f 50%, #05030a 100%); } [data-lobby-theme="au"]{ --lobby-accent:#f5c518;--lobby-accent-soft:#a37c00;--lobby-accent-glow:rgba(245,197,24,.5); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#ffe58f 100%); --lobby-bg:radial-gradient(ellipse at top, #1f1808 0%, #0e0b04 50%, #05030a 100%); } [data-lobby-theme="sj"]{ --lobby-accent:#2563eb;--lobby-accent-soft:#1e3a8a;--lobby-accent-glow:rgba(37,99,235,.4); --lobby-accent2:#E8272A; --lobby-name-grad:linear-gradient(135deg,#fca5a5 0%,#fff 50%,#93c5fd 100%); --lobby-bg:radial-gradient(ellipse at left, #1a0510 0%, #0a0a18 50%, #06070f 100%); } [data-lobby-theme="bz"]{ /* Aligned to the .h-gc-bz homepage card (red gradient) instead of the legacy gold-on-gray look. Accent + name-grad now read as "buzzer red" so the lobby chrome and the body-level backdrop visually match the game's homepage card and the big red buzzer below the fold. */ --lobby-accent:#ff5454;--lobby-accent-soft:#7a0a0a;--lobby-accent-glow:rgba(255,84,84,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#ffb4b4 100%); --lobby-bg:radial-gradient(ellipse at top, #1a0808 0%, #100404 50%, #06010a 100%); } [data-lobby-theme="bomb"]{ --lobby-accent:#e6732d;--lobby-accent-soft:#9a4010;--lobby-accent-glow:rgba(230,115,45,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#ffd580 100%); --lobby-bg:radial-gradient(ellipse at bottom, #1f0c04 0%, #120703 50%, #05030a 100%); } [data-lobby-theme="st"]{ --lobby-accent:#7c3aed;--lobby-accent-soft:#5b21b6;--lobby-accent-glow:rgba(124,58,237,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#c4b5fd 100%); --lobby-bg:radial-gradient(ellipse at top, #150d28 0%, #0a081a 50%, #05030a 100%); } [data-lobby-theme="dn"]{ --lobby-accent:#a78bfa;--lobby-accent-soft:#6d28d9;--lobby-accent-glow:rgba(167,139,250,.4); --lobby-name-grad:linear-gradient(135deg,#fff 0%,#ddd6fe 100%); --lobby-bg:radial-gradient(ellipse at top, #0d0a1f 0%, #08071a 50%, #04030f 100%); } [data-lobby-theme="tor"]{ --lobby-accent:#f1c768;--lobby-accent-soft:#8a6914;--lobby-accent-glow:rgba(241,199,104,.4); --lobby-accent2:#b91c1c; --lobby-name-grad:linear-gradient(135deg,#fff 0%,#f1c768 100%); --lobby-bg:radial-gradient(ellipse at top, #1a0d08 0%, #0d0805 50%, #05030a 100%); } /* المؤامرة — green + red two-color split (mirrors Seenjeem's blue+red layout, with green replacing blue). Only the LOBBY uses this scheme; the in-game screens (board, status bar, card frame) keep the gold-on-crimson Secret-Hitler aesthetic. */ [data-lobby-theme="cn"]{ --lobby-accent:#16a34a;--lobby-accent-soft:#14532d;--lobby-accent-glow:rgba(22,163,74,.4); --lobby-accent2:#E8272A; --lobby-name-grad:linear-gradient(135deg,#fca5a5 0%,#fff 50%,#86efac 100%); --lobby-bg:radial-gradient(ellipse at left, #1a0510 0%, #0a0f0a 50%, #06080a 100%); } /* مزاد الأسرار — four-color quadrant split (blue / red / green / yellow) for the four team colors. Lobby chrome reads neutral white-on-dark with the four tints subtly bleeding from the corners via the atmo layer. */ [data-lobby-theme="ac"]{ --lobby-accent:#3b82f6;--lobby-accent-soft:#1e40af;--lobby-accent-glow:rgba(59,130,246,.35); --lobby-accent2:#dc2626; --lobby-name-grad:linear-gradient(135deg,#93c5fd 0%,#fca5a5 33%,#86efac 66%,#fde68a 100%); --lobby-bg:radial-gradient(ellipse at center, #0d1424 0%, #0a0f1a 50%, #050810 100%); } [data-lobby-theme="fa"]{ /* Softer rose — original #ec4899 was too high-saturation for prolonged viewing. Stepped down to a deeper, more muted #a83b6a with a yellow- gold accent. Less eye fatigue, still distinct from every other game. */ --lobby-accent:#a83b6a;--lobby-accent-soft:#6b1f3f;--lobby-accent-glow:rgba(168,59,106,.30); --lobby-accent2:#d4a449; --lobby-name-grad:linear-gradient(135deg,#d68fab 0%,#d4a449 50%,#c69daf 100%); --lobby-bg:radial-gradient(ellipse at center, #1f0816 0%, #14060f 50%, #0a040a 100%); } [data-lobby-theme="tb"]{ /* Time Bet — deep cyan/teal accent. Distinct from every other game's palette (no other game uses cyan). Yellow accent for the time-dial ticking inside the bidding widget. */ --lobby-accent:#06b6d4;--lobby-accent-soft:#0e7490;--lobby-accent-glow:rgba(6,182,212,.30); --lobby-accent2:#fbbf24; --lobby-name-grad:linear-gradient(135deg,#67e8f9 0%,#fbbf24 50%,#22d3ee 100%); --lobby-bg:radial-gradient(ellipse at center, #06181d 0%, #061218 50%, #03090c 100%); } [data-lobby-theme="bp"]{ /* البروتوكول المكسور — acid green / matrix terminal aesthetic. The accent glows hard for the corrupted-data feel; the secondary teal shifts to pale lime so the lead-engineer pill pops without competing. */ --lobby-accent:#22c55e;--lobby-accent-soft:#166534;--lobby-accent-glow:rgba(34,197,94,.32); --lobby-accent2:#a3e635; --lobby-name-grad:linear-gradient(135deg,#86efac 0%,#22c55e 50%,#a3e635 100%); --lobby-bg:radial-gradient(ellipse at center, #06140a 0%, #082010 50%, #03090a 100%); } /* ────────────────────────────────────────────────────────────────────────── Per-game lobby background — full-bleed gradient extending fully behind the iOS notch and status bar. No solid top cap. The gradient is the single continuous surface from screen edge to screen edge. The URL bar tint (in regular Safari) is handled by JS dynamic updates to — see _updateLobbyThemeColor() in index.html which sets the meta to each game's gradient peak color on render. ──────────────────────────────────────────────────────────────────────── */ body:has(.screen.active[data-lobby-theme="ww"]), body:has(.screen.active [data-lobby-theme="ww"]){ --current-lobby-bg:radial-gradient(ellipse at top, #110e28 0%, #0a0820 50%, #06050f 100%); background:var(--current-lobby-bg) !important; background-color:#06050f !important; } body:has(.screen.active[data-lobby-theme="im"]), body:has(.screen.active [data-lobby-theme="im"]){ --current-lobby-bg:radial-gradient(ellipse at top, #1a1408 0%, #0e0a04 50%, #050307 100%); background:var(--current-lobby-bg) !important; background-color:#050307 !important; } body:has(.screen.active[data-lobby-theme="iq"]), body:has(.screen.active [data-lobby-theme="iq"]){ --current-lobby-bg:radial-gradient(ellipse at top, #1a1430 0%, #0e0b1f 50%, #05030a 100%); background:var(--current-lobby-bg) !important; background-color:#05030a !important; } body:has(.screen.active[data-lobby-theme="au"]), body:has(.screen.active [data-lobby-theme="au"]){ --current-lobby-bg:radial-gradient(ellipse at top, #1f1808 0%, #0e0b04 50%, #05030a 100%); background:var(--current-lobby-bg) !important; background-color:#05030a !important; } body:has(.screen.active[data-lobby-theme="sj"]), body:has(.screen.active [data-lobby-theme="sj"]){ --current-lobby-bg:radial-gradient(ellipse at left, #1a0510 0%, #0a0a18 50%, #06070f 100%); background:var(--current-lobby-bg) !important; background-color:#06070f !important; } body:has(.screen.active[data-lobby-theme="bz"]), body:has(.screen.active [data-lobby-theme="bz"]){ --current-lobby-bg:radial-gradient(ellipse at top, #1c1c28 0%, #12121c 50%, #08080f 100%); background:var(--current-lobby-bg) !important; background-color:#08080f !important; } body:has(.screen.active[data-lobby-theme="bomb"]), body:has(.screen.active [data-lobby-theme="bomb"]){ --current-lobby-bg:radial-gradient(ellipse at bottom, #1f0c04 0%, #120703 50%, #05030a 100%); background:var(--current-lobby-bg) !important; background-color:#05030a !important; } body:has(.screen.active[data-lobby-theme="st"]), body:has(.screen.active [data-lobby-theme="st"]){ --current-lobby-bg:radial-gradient(ellipse at top, #150d28 0%, #0a081a 50%, #05030a 100%); background:var(--current-lobby-bg) !important; background-color:#05030a !important; } body:has(.screen.active[data-lobby-theme="dn"]), body:has(.screen.active [data-lobby-theme="dn"]){ --current-lobby-bg:radial-gradient(ellipse at top, #0d0a1f 0%, #08071a 50%, #04030f 100%); background:var(--current-lobby-bg) !important; background-color:#04030f !important; } body:has(.screen.active[data-lobby-theme="tor"]), body:has(.screen.active [data-lobby-theme="tor"]){ --current-lobby-bg:radial-gradient(ellipse at top, #1a0d08 0%, #0d0805 50%, #05030a 100%); background:var(--current-lobby-bg) !important; background-color:#05030a !important; } body:has(.screen.active[data-lobby-theme="cn"]), body:has(.screen.active [data-lobby-theme="cn"]){ --current-lobby-bg:radial-gradient(ellipse at left, #1a0510 0%, #0a0f0a 50%, #06080a 100%); background:var(--current-lobby-bg) !important; background-color:#06080a !important; } body:has(.screen.active[data-lobby-theme="ac"]), body:has(.screen.active [data-lobby-theme="ac"]){ --current-lobby-bg:radial-gradient(ellipse at center, #0d1424 0%, #0a0f1a 50%, #050810 100%); background:var(--current-lobby-bg) !important; background-color:#050810 !important; } body:has(.screen.active[data-lobby-theme="fa"]), body:has(.screen.active [data-lobby-theme="fa"]){ --current-lobby-bg:radial-gradient(ellipse at center, #1f0816 0%, #14060f 50%, #0a040a 100%); background:var(--current-lobby-bg) !important; background-color:#0a040a !important; } body:has(.screen.active[data-lobby-theme="tb"]), body:has(.screen.active [data-lobby-theme="tb"]){ --current-lobby-bg:radial-gradient(ellipse at center, #06181d 0%, #061218 50%, #03090c 100%); background:var(--current-lobby-bg) !important; background-color:#03090c !important; } body:has(.screen.active[data-lobby-theme="bp"]), body:has(.screen.active [data-lobby-theme="bp"]){ --current-lobby-bg:radial-gradient(ellipse at center, #06140a 0%, #082010 50%, #03090a 100%); background:var(--current-lobby-bg) !important; background-color:#03090a !important; } /* HTML mirrors each game's gradient so the entire physical surface (html, body, body::before) is one continuous painted layer with no flat-color regions that could create visible seams. */ html:has(.screen.active[data-lobby-theme="ww"]), html:has(.screen.active [data-lobby-theme="ww"]) { background:radial-gradient(ellipse at top, #110e28 0%, #0a0820 50%, #06050f 100%) ; background-color:#06050f; } html:has(.screen.active[data-lobby-theme="im"]), html:has(.screen.active [data-lobby-theme="im"]) { background:radial-gradient(ellipse at top, #1a1408 0%, #0e0a04 50%, #050307 100%) ; background-color:#050307; } html:has(.screen.active[data-lobby-theme="iq"]), html:has(.screen.active [data-lobby-theme="iq"]) { background:radial-gradient(ellipse at top, #1a1430 0%, #0e0b1f 50%, #05030a 100%) ; background-color:#05030a; } html:has(.screen.active[data-lobby-theme="au"]), html:has(.screen.active [data-lobby-theme="au"]) { background:radial-gradient(ellipse at top, #1f1808 0%, #0e0b04 50%, #05030a 100%) ; background-color:#05030a; } html:has(.screen.active[data-lobby-theme="sj"]), html:has(.screen.active [data-lobby-theme="sj"]) { background:radial-gradient(ellipse at left, #1a0510 0%, #0a0a18 50%, #06070f 100%) ; background-color:#06070f; } html:has(.screen.active[data-lobby-theme="bz"]), html:has(.screen.active [data-lobby-theme="bz"]) { background:radial-gradient(ellipse at top, #1c1c28 0%, #12121c 50%, #08080f 100%) ; background-color:#08080f; } html:has(.screen.active[data-lobby-theme="bomb"]), html:has(.screen.active [data-lobby-theme="bomb"]){ background:radial-gradient(ellipse at bottom, #1f0c04 0%, #120703 50%, #05030a 100%) ; background-color:#05030a; } html:has(.screen.active[data-lobby-theme="st"]), html:has(.screen.active [data-lobby-theme="st"]) { background:radial-gradient(ellipse at top, #150d28 0%, #0a081a 50%, #05030a 100%) ; background-color:#05030a; } html:has(.screen.active[data-lobby-theme="dn"]), html:has(.screen.active [data-lobby-theme="dn"]) { background:radial-gradient(ellipse at top, #0d0a1f 0%, #08071a 50%, #04030f 100%) ; background-color:#04030f; } html:has(.screen.active[data-lobby-theme="tor"]), html:has(.screen.active [data-lobby-theme="tor"]) { background:radial-gradient(ellipse at top, #1a0d08 0%, #0d0805 50%, #05030a 100%) ; background-color:#05030a; } html:has(.screen.active[data-lobby-theme="cn"]), html:has(.screen.active [data-lobby-theme="cn"]) { background:radial-gradient(ellipse at left, #1a0510 0%, #0a0f0a 50%, #06080a 100%) ; background-color:#06080a; } html:has(.screen.active[data-lobby-theme="ac"]), html:has(.screen.active [data-lobby-theme="ac"]) { background:radial-gradient(ellipse at center, #0d1424 0%, #0a0f1a 50%, #050810 100%) ; background-color:#050810; } html:has(.screen.active[data-lobby-theme="fa"]), html:has(.screen.active [data-lobby-theme="fa"]) { background:radial-gradient(ellipse at center, #1f0816 0%, #14060f 50%, #0a040a 100%) ; background-color:#0a040a; } html:has(.screen.active[data-lobby-theme="tb"]), html:has(.screen.active [data-lobby-theme="tb"]) { background:radial-gradient(ellipse at center, #06181d 0%, #061218 50%, #03090c 100%) ; background-color:#03090c; } html:has(.screen.active[data-lobby-theme="bp"]), html:has(.screen.active [data-lobby-theme="bp"]) { background:radial-gradient(ellipse at center, #06140a 0%, #082010 50%, #03090a 100%) ; background-color:#03090a; } /* While a themed lobby is rendered, suppress the default screen::before purple tint so it doesn't muddy the per-game gradient. */ [data-lobby-theme]::before{ background:transparent !important; } /* On themed lobbies, REPURPOSE body::before from "star pattern overlay" to "fixed-position gradient layer that physically spans behind the iOS notch and home indicator". The layered gradient (solid #0c0a16 cap + per-game radial below) is read from `--current-lobby-bg` set by the body :has() rules above, so this layer is identical to the body bg — but pinned to the viewport with negative safe-area insets so it physically covers under the notch / home indicator regardless of viewport-fit quirks. */ body:has(.screen.active[data-lobby-theme])::before, body:has(.screen.active [data-lobby-theme])::before{ content:''; position:fixed; top:calc(-1 * env(safe-area-inset-top, 0px)); left:0;right:0; bottom:calc(-1 * env(safe-area-inset-bottom, 0px)); width:auto;height:auto; z-index:-1; pointer-events:none; background:#0c0a16 var(--current-lobby-bg, none); background-attachment:scroll; background-repeat:no-repeat; background-size:cover; /* Override every property the global body::before star-pattern set */ background-image:var(--current-lobby-bg, none); animation:none; display:block; opacity:1; transform:none; filter:none; } /* Hide the global refresh pill (#return-home-btn) on lobby phases only. Detection: every lobby renders a `.lobby-top` chrome bar (with its own ✕ icon-button + lobby title) inside the active screen, so a `.lobby-top` that's a descendant of `.screen.active` IS a lobby chrome bar. In-game phases (storytelling, voting, results, defuser, expert, …) do NOT render `.lobby-top`, so they keep the floating refresh pill visible — this gives players a one-tap manual reload inside PWA where browser-level refresh isn't available. Flat (single-level) `:has()` with a descendant combinator inside — nested `:has()` (`:has(.foo:has(.bar))`) only landed in Safari 16.4 and would silently invalidate the whole selector on older iOS PWA installs. The flat form is supported from Safari 15.4 onwards. */ body:has(.screen.active .lobby-top) #return-home-btn{ display:none !important; } /* Tighten #app's bottom padding while a themed lobby is active. The default 70px bottom (which exists on every game screen to reserve space for floating bottom buttons) is excess inside a lobby — the start button has its own breathing room. We bring it down to max(20px, home-indicator inset) so the start button sits at a comfortable distance from the home indicator without floating in extra void. PADDING-TOP IS NOT TOUCHED — it stays at #app's flat 60px so the lobby's chrome bar (X / ?) lands exactly at viewport y=60. Previously we set padding-top:0 here to compensate for `.lobby-top`'s own safe-area-inset-top padding (which would have stacked); after switching to the flat-60 convention `.lobby-top` no longer adds its own inset, so #app's 60px is the single source of top spacing. */ body:has(.screen.active[data-lobby-theme]) #app, body:has(.screen.active [data-lobby-theme]) #app{ padding-bottom:max(20px, env(safe-area-inset-bottom, 20px)); } /* Force the body to be 1px taller than the viewport while a themed lobby is active. This guarantees the page has SOMETHING to scroll, so JS can park it at scrollY=1 to keep iOS Safari's top chrome bar collapsed. Without this 1px buffer, scrollTo(0,1) snaps right back to 0 on a non-overflowing body and the chrome bar reappears. */ body:has(.screen.active[data-lobby-theme]), body:has(.screen.active [data-lobby-theme]){ min-height:calc(100vh + 1px); min-height:calc(100dvh + 1px); } /* Zero out the global .screen flex-gap on themed lobbies. The demo's lobby container has NO inter-section gap — each section (.lobby-top, .hero, .code-card, .section-head, .players, .start-btn) brings its own margin so the rhythm is exact. Inheriting the .screen's 20px gap on top of those margins stacks excess whitespace (badly visible on tor/impostor/buzzer where the lobby renders directly into the .screen rather than an inner wrapper). Inner content wrappers (sj, iq, st, bomb, dn, au, ww) keep their own spacing model — we only override the outer .screen here. */ .screen[data-lobby-theme]{gap:0;} /* Give every direct lobby section its own intrinsic margin-bottom so that removing the parent flex-gap doesn't make sections collide. Each card (settings + cfg-pill panels) and inline element (waiting, err) gets matching breathing room. */ [data-lobby-theme] > .card, .screen[data-lobby-theme] .card{margin-bottom:14px;} [data-lobby-theme] .waiting{margin-bottom:14px;} [data-lobby-theme] .err:not(:empty){margin-bottom:10px;} /* Top bar (help + leave icons) — replaces the global return-home pill in the lobby. Mirrors the demo's .lobby-top exactly, plus a safe-area top inset so the icons clear the iOS status bar / notch when the bg now bleeds behind it. */ .lobby-top{ position:relative;z-index:2; display:flex;justify-content:space-between;align-items:center; margin-bottom:16px; /* No padding-top — flat-60 convention. The screen's first child (this chrome bar) sits at viewport y=60 from #app's padding alone. Adding safe-area-inset-top here used to triple-pad the top on Pro models. */ } .lobby-icon-btn{ width:36px;height:36px;border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.7);font-size:1rem;font-family:inherit; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:all .2s ease;padding:0;line-height:1; } .lobby-icon-btn:hover{background:rgba(255,255,255,.1);color:#fff;} .lobby-icon-btn:active{transform:scale(.94);} /* Hero (replaces .logo) — animated themed icon + name + tagline. Sizes match the approved demo exactly (78x78 icon, 1.4rem name, .84rem tagline). */ .lobby-hero{ position:relative;z-index:2;text-align:center; padding:6px 0 18px; } .lobby-hero-icon{ width:78px;height:78px;margin:0 auto 12px; display:flex;align-items:center;justify-content:center; font-size:2.6rem;line-height:1;border-radius:24px; background:linear-gradient(135deg, color-mix(in srgb, var(--lobby-accent) 20%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 6%, transparent) 100%); border:1px solid color-mix(in srgb, var(--lobby-accent) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lobby-accent) 10%, transparent), 0 12px 32px color-mix(in srgb, var(--lobby-accent) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.08); animation:lobbyHeroFloat 4s ease-in-out infinite; position:relative; } .lobby-hero-icon::after{ content:'';position:absolute;inset:-1px;border-radius:24px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; } @keyframes lobbyHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} .lobby-hero-name{ font-size:1.4rem;font-weight:900;letter-spacing:-.01em;line-height:1.25; margin-bottom:4px; background:var(--lobby-name-grad); -webkit-background-clip:text;background-clip:text;color:transparent; } .lobby-hero-tagline{ font-size:.84rem;font-weight:600;color:rgba(255,255,255,.55); line-height:1.55; } /* Code card (replaces simple .room-code) — digit boxes for room code. Sizes match the demo exactly: 38x46 digits, 1.2rem font, 11px gap from label. */ .lobby-code-card{ position:relative;z-index:2; margin:14px 0 18px; background:linear-gradient(155deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%); border:1px solid rgba(255,255,255,.07); border-radius:20px;padding:18px 16px 16px; display:flex;flex-direction:column;align-items:stretch; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .lobby-code-label{ font-size:.7rem;font-weight:700;letter-spacing:.12em; color:rgba(255,255,255,.45);text-transform:uppercase; text-align:center;margin-bottom:10px; } .lobby-code-digits{ display:flex;gap:5px;direction:ltr;flex-wrap:wrap;justify-content:center; margin-bottom:11px; } .lobby-code-digit{ width:38px;height:46px;border-radius:11px; display:flex;align-items:center;justify-content:center; font-family:'Inter','Cairo',monospace;font-weight:800;font-size:1.2rem;color:#fff; background:linear-gradient(180deg, color-mix(in srgb, var(--lobby-accent) 16%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 4%, transparent) 100%); border:1px solid color-mix(in srgb, var(--lobby-accent) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px color-mix(in srgb, var(--lobby-accent) 12%, transparent); position:relative; } .lobby-code-digit::before{ content:'';position:absolute;top:1px;left:1px;right:1px;height:50%; border-radius:10px 10px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent); pointer-events:none; } /* Status pill (next to player count) — matches demo .section-pill (.66rem) */ .lobby-status-pill{ font-size:.66rem;font-weight:700;color:var(--lobby-accent); padding:3px 9px;border-radius:99px; background:color-mix(in srgb, var(--lobby-accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--lobby-accent) 22%, transparent); display:inline-flex;align-items:center;gap:5px;white-space:nowrap; } .lobby-status-pill .dot{ width:6px;height:6px;border-radius:50%;background:var(--lobby-accent); box-shadow:0 0 8px var(--lobby-accent); animation:lobbyStatusPulse 1.8s ease-in-out infinite; } @keyframes lobbyStatusPulse{0%,100%{opacity:1}50%{opacity:.4}} /* Themed primary button — auto-applies inside [data-lobby-theme]. Mirrors the approved demo's .start-btn (position:relative + ::before shimmer, overflow:hidden, hover lift, etc.) so the lobby start button matches the demo. */ [data-lobby-theme] .btn-primary{ position:relative;z-index:2; background:linear-gradient(135deg, var(--lobby-accent) 0%, var(--lobby-accent-soft) 100%); box-shadow:0 8px 26px var(--lobby-accent-glow), inset 0 1px 0 rgba(255,255,255,.18); color:#fff;border-color:transparent; padding:15px;border-radius:15px;font-size:1rem;font-weight:800; margin-bottom:10px; overflow:hidden; transition:all .25s ease; } [data-lobby-theme] .btn-primary::before{ content:'';position:absolute;inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%); transform:translateX(-100%);transition:transform .6s; pointer-events:none; } [data-lobby-theme] .btn-primary:hover:not(:disabled)::before{transform:translateX(100%);} [data-lobby-theme] .btn-primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 32px var(--lobby-accent-glow), inset 0 1px 0 rgba(255,255,255,.2); } /* Override the global .btn:disabled .4 opacity so the theme color stays clearly visible (the demo's spec is opacity:.4 but at that level red→brown on dark backgrounds; .65 keeps it readable while still looking inactive). */ [data-lobby-theme] .btn-primary:disabled{ opacity:.65;cursor:not-allowed;transform:none; } /* Gold/lavender themes need dark text on bright background */ [data-lobby-theme="im"] .btn-primary, [data-lobby-theme="au"] .btn-primary, [data-lobby-theme="bz"] .btn-primary, [data-lobby-theme="tor"] .btn-primary{ color:#1a1006; } /* Themed accent fallbacks for legacy elements still rendered inside the lobby */ [data-lobby-theme] .logo span{color:var(--lobby-accent);} [data-lobby-theme] .room-code{color:var(--lobby-accent);text-shadow:0 0 14px var(--lobby-accent-glow);} [data-lobby-theme] .sec span[style*="--accent"]{color:var(--lobby-accent) !important;} /* ── Themed settings card (host config: counters, score buttons, toggles) ── Replaces the legacy gold-accented look so every game's settings panel matches the lobby's demo aesthetic. Lives directly inside the lobby card wrapper that renderLobby() builds for hostSettingsHTML. */ [data-lobby-theme] .card{ position:relative;z-index:2; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } [data-lobby-theme] .card hr{ border:none;border-top:1px solid rgba(255,255,255,.06); margin:14px 0; } [data-lobby-theme] .sec{ font-size:.78rem;letter-spacing:.02em; color:rgba(255,255,255,.55);font-weight:700; margin-bottom:6px; } /* +/- counter row (e.g. "عدد المتسللين") */ [data-lobby-theme] .imp-control{gap:12px;} [data-lobby-theme] .imp-num{ color:var(--lobby-accent); text-shadow:0 0 14px var(--lobby-accent-glow); } [data-lobby-theme] .cnt-btn{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); } [data-lobby-theme] .cnt-btn:hover:not(:disabled){ background:color-mix(in srgb, var(--lobby-accent) 12%, transparent); border-color:color-mix(in srgb, var(--lobby-accent) 35%, transparent); color:#fff; } [data-lobby-theme] .cnt-btn:disabled{opacity:.35;cursor:not-allowed;} /* Score-target chips */ [data-lobby-theme] .score-opt{ background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.6); border-radius:12px; font-weight:800; transition:all .2s ease; } [data-lobby-theme] .score-opt:hover:not(.active){ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.85); } [data-lobby-theme] .score-opt.active{ border-color:var(--lobby-accent); color:var(--lobby-accent); background:color-mix(in srgb, var(--lobby-accent) 10%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--lobby-accent) 35%, transparent), 0 4px 18px var(--lobby-accent-glow); } /* Toggle switches (hints / hard-mode) */ [data-lobby-theme] .toggle-label{color:rgba(255,255,255,.92);font-weight:700;} [data-lobby-theme] .toggle-sub{color:rgba(255,255,255,.5);} [data-lobby-theme] .toggle-slider{background:rgba(255,255,255,.08);} [data-lobby-theme] .toggle-slider::before{background:rgba(255,255,255,.55);} [data-lobby-theme] .toggle-wrap input:checked+.toggle-slider{ background:color-mix(in srgb, var(--lobby-accent) 24%, transparent); border:1px solid color-mix(in srgb, var(--lobby-accent) 45%, transparent); } [data-lobby-theme] .toggle-wrap input:checked+.toggle-slider::before{ background:var(--lobby-accent); box-shadow:0 0 10px var(--lobby-accent-glow); } /* Player-side cfg pills (the "🎯 الهدف: 20" chips beneath the player list) */ [data-lobby-theme] .cfg-pill, [data-lobby-theme] .cfg-pill-gold, [data-lobby-theme] .cfg-pill-purple{ background:color-mix(in srgb, var(--lobby-accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--lobby-accent) 28%, transparent); color:#fff; } [data-lobby-theme] .cfg-pill b{color:var(--lobby-accent);} /* Code-card action buttons (copy / share) — shown beneath the digit row */ .lobby-code-actions{display:flex;gap:8px;margin-top:11px;} .lobby-code-btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:6px; padding:10px;border-radius:11px;font-size:.78rem;font-weight:700; font-family:inherit; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.85);cursor:pointer; transition:background .2s ease, color .2s ease, transform .15s ease; } .lobby-code-btn:hover{background:rgba(255,255,255,.08);color:#fff;} .lobby-code-btn:active{transform:scale(.97);} .lobby-code-btn.primary{ background:linear-gradient(135deg, color-mix(in srgb, var(--lobby-accent) 22%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 8%, transparent) 100%); border-color:color-mix(in srgb, var(--lobby-accent) 32%, transparent); color:#fff; } .lobby-code-btn.primary:hover{ background:linear-gradient(135deg, color-mix(in srgb, var(--lobby-accent) 30%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 14%, transparent) 100%); } /* Section head row — title + status pill, sits above the player grid */ .lobby-section-head{ position:relative;z-index:2; display:flex;justify-content:space-between;align-items:center; padding:0 4px;margin-bottom:10px;flex-wrap:wrap;gap:8px; } .lobby-section-title{ font-size:.78rem;font-weight:800;color:rgba(255,255,255,.72); letter-spacing:.02em; } .lobby-section-title b{color:var(--lobby-accent);font-weight:900;} /* Player grid (replaces the single-column table inside lobbies) */ .lobby-players-grid{ position:relative;z-index:2; display:grid;grid-template-columns:repeat(2,1fr);gap:8px; margin-bottom:18px; } .lobby-player-card{ display:flex;align-items:center;gap:9px; padding:9px 11px;border-radius:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); animation:lobbyPlayerIn .35s ease both; min-width:0; } @keyframes lobbyPlayerIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .lobby-player-card.is-self{ border-color:color-mix(in srgb, var(--lobby-accent) 35%, transparent); background:color-mix(in srgb, var(--lobby-accent) 7%, rgba(255,255,255,.025)); } .lobby-player-avatar{ width:30px;height:30px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-weight:800;font-size:.78rem;color:#fff; background:linear-gradient(135deg,var(--av1,#7c3aed),var(--av2,#5b21b6)); border:1.5px solid color-mix(in srgb, var(--lobby-accent) 40%, rgba(255,255,255,.1)); box-shadow:0 2px 8px rgba(0,0,0,.3); } .lobby-player-name{ font-size:.82rem;font-weight:700;color:rgba(255,255,255,.92); flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .lobby-player-host-badge{ font-size:.6rem;padding:2px 6px;border-radius:5px;font-weight:800; background:rgba(251,191,36,.16);color:#fbbf24; border:1px solid rgba(251,191,36,.25); white-space:nowrap; } /* sj is a captain-vs-captain dual-team game — 1-col grid like the demo */ [data-lobby-theme="sj"] .lobby-players-grid{grid-template-columns:1fr;} .lobby-player-kick{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#ff8a8a;border-radius:6px; padding:3px 7px;font-size:.62rem;font-weight:700; cursor:pointer;font-family:inherit; white-space:nowrap;line-height:1; } .lobby-player-kick:hover{background:rgba(239,68,68,.18);} /* Help link footer + expandable rules panel (matches the approved demo's centered "📖 كيفية اللعب" affordance instead of the heavy

trigger). */ .lobby-help-link{ position:relative;z-index:2; text-align:center;padding:8px;cursor:pointer; font-size:.75rem;color:rgba(255,255,255,.5);font-weight:700; background:none;border:none;font-family:inherit;width:100%; transition:color .2s ease; } .lobby-help-link:hover{color:rgba(255,255,255,.8);} .lobby-howto-content{ position:relative;z-index:2; font-size:.78rem;color:rgba(255,255,255,.72);line-height:1.85; padding:14px 16px; background:rgba(255,255,255,.04); border-radius:14px; border:1px solid color-mix(in srgb, var(--lobby-accent) 22%, rgba(255,255,255,.06)); box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); margin:0 0 14px; animation:lobbyHowtoIn .25s ease both; } @keyframes lobbyHowtoIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } /* Ambient atmospheric overlay — pinned to the viewport (not the lobby container) so it fills the screen edge-to-edge, matching the approved demo where the lobby IS the phone screen. position:fixed is safe here because the atmo only exists while a lobby screen is rendered (renderLobby() re-mounts it on every render and removes it when leaving the lobby). */ .lobby-atmo{ position:fixed; /* Explicitly negative top + extra height = guaranteed coverage UNDER the iOS status bar (signal/wifi/battery), even when Safari treats top:0 as the start of the safe area instead of the physical screen edge. */ top:calc(-1 * env(safe-area-inset-top, 0px)); left:0;right:0; bottom:calc(-1 * env(safe-area-inset-bottom, 0px)); width:100vw; /* 100lvh = largest viewport height (URL bar hidden); fallback chain handles older browsers. Adding both safe-area insets ensures the box always spans the entire physical screen, edge-to-edge, including the notch area. */ height:100vh; height:100lvh; height:calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)); z-index:0;pointer-events:none;overflow:hidden; opacity:.7;mix-blend-mode:screen; } .lobby-atmo::before, .lobby-atmo::after{ content:''; position:absolute; inset:0; pointer-events:none; } /* All atmo alphas/positions match the demo's LOBBY_THEMES atmo classes 1:1. */ .lobby-atmo[data-mood="ww"]{ background: radial-gradient(circle at 78% 14%, rgba(220,38,38,.22), transparent 28%), radial-gradient(circle at 78% 14%, rgba(255,180,180,.06), transparent 14%), radial-gradient(ellipse at 50% 100%, rgba(124,58,237,.10), transparent 70%); } .lobby-atmo[data-mood="ww"]::before{ background: radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 28% 8%, rgba(255,255,255,.33) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 32%, rgba(255,255,255,.47) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60% 16%, rgba(255,255,255,.33) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 28%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 18% 50%, rgba(255,255,255,.27) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.33) 50%, transparent 51%); animation:lobbyTwinkle 4s ease-in-out infinite; } @keyframes lobbyTwinkle{0%,100%{opacity:.85}50%{opacity:.35}} .lobby-atmo[data-mood="im"]{ background: radial-gradient(ellipse at 50% 0%, rgba(245,197,24,.14), transparent 55%), repeating-linear-gradient(0deg,transparent 0,transparent 4px,rgba(239,68,68,.022) 4px,rgba(239,68,68,.022) 5px); } .lobby-atmo[data-mood="iq"]{ background: radial-gradient(circle at 20% 25%, rgba(124,58,237,.22), transparent 42%), radial-gradient(circle at 80% 75%, rgba(167,139,250,.12), transparent 42%); } .lobby-atmo[data-mood="au"]{ background: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(245,197,24,.28), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(245,197,24,.06), transparent 70%); } .lobby-atmo[data-mood="sj"]{ background: radial-gradient(circle at 0% 50%, rgba(232,39,42,.18), transparent 45%), radial-gradient(circle at 100% 50%, rgba(37,99,235,.18), transparent 45%); } .lobby-atmo[data-mood="sj"]::after{ top:10%;bottom:10%;left:50%;width:1px;right:auto; background:linear-gradient(180deg,transparent,rgba(255,255,255,.15),transparent); } .lobby-atmo[data-mood="bz"]{ background:radial-gradient(circle at 50% 0%, rgba(245,197,24,.18), transparent 45%); } .lobby-atmo[data-mood="bz"]::before{ background:radial-gradient(circle at 50% 0%, rgba(245,197,24,.08) 0%, transparent 25%); animation:lobbyBzPulse 2.4s ease-in-out infinite; } @keyframes lobbyBzPulse{0%,100%{opacity:.7}50%{opacity:1}} .lobby-atmo[data-mood="bomb"]{ background: radial-gradient(circle at 30% 100%, rgba(230,115,45,.25), transparent 55%), radial-gradient(circle at 70% 100%, rgba(154,64,16,.18), transparent 50%); } .lobby-atmo[data-mood="st"]{ background: radial-gradient(ellipse at 50% 30%, rgba(124,58,237,.18), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(124,58,237,.06), transparent 60%); } .lobby-atmo[data-mood="dn"]{ background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.16), transparent 50%), radial-gradient(circle at 20% 80%, rgba(139,92,246,.08), transparent 50%); } .lobby-atmo[data-mood="tor"]{ background: radial-gradient(circle at 30% 0%, rgba(241,199,104,.18), transparent 50%), radial-gradient(circle at 80% 100%, rgba(185,28,28,.15), transparent 50%); } .lobby-atmo[data-mood="tor"]::after{ background-image:repeating-linear-gradient(95deg,transparent 0,transparent 60px,rgba(241,199,104,.025) 60px,rgba(241,199,104,.025) 61px); } /* المؤامرة — green-on-right + red-on-left two-color split. Only the lobby uses this scheme; the in-game screens keep the gold/crimson aesthetic. */ .lobby-atmo[data-mood="cn"]{ background: radial-gradient(circle at 0% 50%, rgba(232,39,42,.18), transparent 45%), radial-gradient(circle at 100% 50%, rgba(22,163,74,.18), transparent 45%); } /* مزاد الأسرار — four corner radials matching the four team colors: blue (top-left), red (top-right), green (bottom-left), yellow (bottom-right). Lighter than sj's two-color split so all four read clearly without muddying. */ .lobby-atmo[data-mood="ac"]{ background: radial-gradient(circle at 0% 0%, rgba(59,130,246,.18), transparent 40%), radial-gradient(circle at 100% 0%, rgba(220,38,38,.18), transparent 40%), radial-gradient(circle at 0% 100%, rgba(22,163,74,.18), transparent 40%), radial-gradient(circle at 100% 100%, rgba(234,179,8,.18), transparent 40%); } /* End themed lobby system */ /* ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════╗ ║ ADD-TO-HOME-SCREEN PROMPT (web → PWA install nudge) ║ ╚════════════════════════════════════════════════════════════════════════╝ Markup is injected at runtime (see end of index.html). Body's `data-a2hs-platform` attribute decides which variant card is visible. ═══════════════════════════════════════════════════════════════════════════ */ #a2hs-overlay{ position:fixed;inset:0;z-index:9999; background:rgba(5,3,10,.72); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); display:flex;align-items:flex-end;justify-content:center; opacity:0;pointer-events:none; transition:opacity .35s ease; /* Prevent overscroll/rubber-band on iOS when touching the blurred backdrop area — body scroll lock (set via JS) handles the page itself, this handles the overlay's own scroll layer. */ overscroll-behavior:contain; touch-action:none; } /* The card inside DOES need touch-action:auto so its buttons are tappable */ #a2hs-overlay .a2hs-card{touch-action:auto;} #a2hs-overlay.show{opacity:1;pointer-events:auto} #a2hs-overlay .a2hs-card{ width:100%;max-width:420px; background:linear-gradient(155deg,#1a1825 0%,#13101f 60%,#0c0a16 100%); border:1px solid rgba(255,255,255,.06); border-top-left-radius:28px;border-top-right-radius:28px; padding:22px 22px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 -20px 60px rgba(0,0,0,.5), 0 -4px 30px rgba(245,197,24,.06), inset 0 1px 0 rgba(255,255,255,.05); transform:translateY(110%); transition:transform .5s cubic-bezier(.22,1,.36,1); position:relative; overflow:hidden; } #a2hs-overlay.show .a2hs-card{transform:translateY(0)} #a2hs-overlay .a2hs-card::before{ content:'';position:absolute;top:-40px;right:-40px; width:160px;height:160px;border-radius:50%; background:radial-gradient(circle,rgba(245,197,24,.18) 0%,transparent 70%); pointer-events:none; } #a2hs-overlay .a2hs-handle{ width:40px;height:4px;border-radius:99px; background:rgba(255,255,255,.15); margin:0 auto 16px; } #a2hs-overlay .a2hs-head{ display:flex;align-items:center;gap:14px; margin-bottom:18px;position:relative;z-index:2; } #a2hs-overlay .a2hs-app-icon{ width:60px;height:60px;flex-shrink:0; border-radius:16px; background:linear-gradient(135deg,#f5c518 0%,#c45a00 100%); display:flex;align-items:center;justify-content:center; font-size:1.9rem; box-shadow: 0 0 0 1px rgba(245,197,24,.3), 0 8px 24px rgba(245,197,24,.32), inset 0 1px 0 rgba(255,255,255,.2); animation:a2hs-icon-pulse 2.4s ease-in-out infinite; } @keyframes a2hs-icon-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} } #a2hs-overlay .a2hs-icon-warn{ background:linear-gradient(135deg,#3b82f6 0%,#1e3a8a 100%) !important; box-shadow: 0 0 0 1px rgba(59,130,246,.3), 0 8px 24px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.2) !important; } #a2hs-overlay .a2hs-titles{flex:1;min-width:0} #a2hs-overlay .a2hs-title{ font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:-.01em; margin-bottom:3px;line-height:1.3; } #a2hs-overlay .a2hs-sub{ font-size:.78rem;color:rgba(255,255,255,.6);font-weight:600;line-height:1.5; } #a2hs-overlay .a2hs-steps{ position:relative;z-index:2; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:14px 16px; margin-bottom:16px; } #a2hs-overlay .a2hs-step{ display:flex;align-items:center;gap:10px; padding:6px 0;font-size:.85rem;color:rgba(255,255,255,.85); font-weight:600; } #a2hs-overlay .a2hs-step + .a2hs-step{ border-top:1px solid rgba(255,255,255,.04); } #a2hs-overlay .a2hs-step-num{ width:22px;height:22px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,#f5c518 0%,#c45a00 100%); color:#1a1006;font-weight:900;font-size:.78rem; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(245,197,24,.3); } #a2hs-overlay .a2hs-step-icon{font-size:1rem;flex-shrink:0} #a2hs-overlay .a2hs-step-text{flex:1;line-height:1.4} #a2hs-overlay .a2hs-step-text b{color:#f5c518;font-weight:800} #a2hs-overlay .a2hs-native-pitch{ position:relative;z-index:2; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:14px 16px; margin-bottom:16px; } #a2hs-overlay .a2hs-native-pitch-row{ font-size:.86rem;color:rgba(255,255,255,.85); font-weight:600;padding:6px 0; } #a2hs-overlay .a2hs-native-pitch-row + .a2hs-native-pitch-row{ border-top:1px solid rgba(255,255,255,.04); } #a2hs-overlay .a2hs-actions{ position:relative;z-index:2; display:flex;gap:8px; } #a2hs-overlay .a2hs-btn{ flex:1;padding:13px;border-radius:12px;border:none;cursor:pointer; font-family:inherit;font-size:.92rem;font-weight:800; transition:all .2s ease; } #a2hs-overlay .a2hs-btn-primary{ background:linear-gradient(135deg,#f5c518 0%,#c45a00 100%); color:#1a1006; box-shadow:0 6px 20px rgba(245,197,24,.32),inset 0 1px 0 rgba(255,255,255,.2); } #a2hs-overlay .a2hs-btn-primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 8px 24px rgba(245,197,24,.4),inset 0 1px 0 rgba(255,255,255,.25); } #a2hs-overlay .a2hs-btn-primary:disabled{opacity:.65;cursor:wait} #a2hs-overlay .a2hs-btn-secondary{ background:rgba(255,255,255,.04); color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.08); } #a2hs-overlay .a2hs-btn-secondary:hover{ background:rgba(255,255,255,.08);color:#fff; } /* ── Variant visibility — driven by body[data-a2hs-platform] ──────────── */ #a2hs-overlay .a2hs-variant{display:none} body[data-a2hs-platform="ios"] #a2hs-overlay .a2hs-variant-install-ios, body[data-a2hs-platform="ios-other"] #a2hs-overlay .a2hs-variant-switch, body[data-a2hs-platform="android-native"] #a2hs-overlay .a2hs-variant-native, body[data-a2hs-platform="android-manual"] #a2hs-overlay .a2hs-variant-install-android{display:block} /* ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════╗ ║ DEMO SYNC — copy-pasted from lobby-demo.html ║ ╚════════════════════════════════════════════════════════════════════════╝ Every rule below is a VERBATIM copy of the corresponding rule in lobby-demo.html, scoped under `[data-lobby-theme]` so it can't collide with global classes. Each emitted lobby element carries BOTH the legacy `lobby-*` class (kept for JS hooks / aria) AND the demo class — so these rules apply directly to the real lobby and produce the demo's exact look. The CSS-var bridge at the top maps the lobby-system's `--lobby-accent` etc. onto the demo's variable names (`--accent`, `--name-grad`, …) so the per-game theming (LOBBY_THEMES from index.html) drives the demo rules just like LOBBY_THEMES drives them in the demo file itself. ═══════════════════════════════════════════════════════════════════════════ */ [data-lobby-theme]{ --accent:var(--lobby-accent); --accent-border:color-mix(in srgb, var(--lobby-accent) 33%, transparent); --accent-shadow:color-mix(in srgb, var(--lobby-accent) 14%, transparent); --accent-glow:var(--lobby-accent-glow); --name-grad:var(--lobby-name-grad); --icon-bg:linear-gradient(135deg, color-mix(in srgb, var(--lobby-accent) 20%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 4%, transparent) 100%); --digit-bg:linear-gradient(180deg, color-mix(in srgb, var(--lobby-accent) 16%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 4%, transparent) 100%); --digit-border:color-mix(in srgb, var(--lobby-accent) 28%, transparent); --digit-fg:#fff; --digit-glow:color-mix(in srgb, var(--lobby-accent) 12%, transparent); --btn-bg:linear-gradient(135deg, color-mix(in srgb, var(--lobby-accent) 22%, transparent) 0%, color-mix(in srgb, var(--lobby-accent) 8%, transparent) 100%); --btn-border:color-mix(in srgb, var(--lobby-accent) 30%, transparent); --btn-fg:#fff; --start-bg:linear-gradient(135deg, var(--lobby-accent) 0%, var(--lobby-accent-soft) 100%); --start-glow:var(--lobby-accent-glow); --pill-bg:color-mix(in srgb, var(--lobby-accent) 12%, transparent); --pill-border:color-mix(in srgb, var(--lobby-accent) 22%, transparent); --avatar-border:color-mix(in srgb, var(--lobby-accent) 25%, transparent); } /* ── Top bar (demo .lobby-top + .icon-btn) ──────────────────────────────── */ [data-lobby-theme] .lobby-top{ position:relative;z-index:2; display:flex;justify-content:space-between;align-items:center; margin-bottom:16px; /* No padding-top — flat-60 convention (see .lobby-top above). */ } [data-lobby-theme] .icon-btn{ width:36px;height:36px;border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.7);font-size:1rem; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:all .2s ease; } [data-lobby-theme] .icon-btn:hover{background:rgba(255,255,255,.1);color:#fff} /* ── Hero (demo .hero / .hero-icon / .hero-name / .hero-tagline) ─────────── */ [data-lobby-theme] .hero{ position:relative;z-index:2;text-align:center; padding:6px 0 18px; } [data-lobby-theme] .hero-icon{ width:78px;height:78px;margin:0 auto 12px; display:flex;align-items:center;justify-content:center; font-size:2.6rem; border-radius:24px; background:var(--icon-bg); border:1px solid var(--accent-border); box-shadow: 0 0 0 1px var(--accent-shadow), 0 12px 32px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.08); position:relative; animation:icon-float 4s ease-in-out infinite; } @keyframes icon-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } [data-lobby-theme] .hero-icon::after{ content:'';position:absolute;inset:-1px;border-radius:24px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; } [data-lobby-theme] .hero-name{ font-size:1.4rem;font-weight:900;letter-spacing:-.01em; margin-bottom:4px; background:var(--name-grad); -webkit-background-clip:text;background-clip:text;color:transparent; } [data-lobby-theme] .hero-tagline{ color:rgba(255,255,255,.55);font-size:.84rem;font-weight:600; } /* ── Code card (demo .code-card / .code-label / .code-digits / .code-digit) */ [data-lobby-theme] .code-card{ position:relative;z-index:2; margin:14px 0 18px;padding:18px 16px 16px; border-radius:20px; background:linear-gradient(155deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%); border:1px solid rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } [data-lobby-theme] .code-label{ font-size:.7rem;font-weight:700;letter-spacing:.12em; color:rgba(255,255,255,.45);text-transform:uppercase; text-align:center;margin-bottom:10px; } [data-lobby-theme] .code-digits{ display:flex;gap:5px;justify-content:center;direction:ltr;margin-bottom:11px; } [data-lobby-theme] .code-digit{ width:38px;height:46px;border-radius:11px; display:flex;align-items:center;justify-content:center; font-family:'Inter',monospace;font-weight:800;font-size:1.2rem; background:var(--digit-bg); border:1px solid var(--digit-border); color:var(--digit-fg); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px var(--digit-glow); position:relative; } [data-lobby-theme] .code-digit::before{ content:'';position:absolute;top:1px;left:1px;right:1px;height:50%; border-radius:10px 10px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent); pointer-events:none; } [data-lobby-theme] .code-actions{display:flex;gap:8px} [data-lobby-theme] .code-btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:6px; padding:10px;border-radius:11px;font-size:.78rem;font-weight:700; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.85);cursor:pointer;transition:all .2s ease; font-family:inherit; } [data-lobby-theme] .code-btn:hover{background:rgba(255,255,255,.08);color:#fff} [data-lobby-theme] .code-btn.primary{ background:var(--btn-bg); border-color:var(--btn-border); color:var(--btn-fg); } /* ── Section head (demo .section-head / .section-title / .section-pill) ─── */ [data-lobby-theme] .section-head{ position:relative;z-index:2; display:flex;justify-content:space-between;align-items:center; padding:0 4px;margin-bottom:10px; } [data-lobby-theme] .section-title{font-size:.78rem;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:.02em} [data-lobby-theme] .section-title b{color:var(--accent)} [data-lobby-theme] .section-pill{ font-size:.66rem;font-weight:700;color:var(--accent); padding:3px 9px;border-radius:99px; background:var(--pill-bg); border:1px solid var(--pill-border); display:flex;align-items:center;gap:5px; } [data-lobby-theme] .section-pill .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 8px var(--accent); animation:lobby-pulse 1.6s ease-in-out infinite; } @keyframes lobby-pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ── Players grid (demo .players / .player / .avatar / .player-name) ────── */ [data-lobby-theme] .players{ position:relative;z-index:2; display:grid;grid-template-columns:repeat(2,1fr);gap:8px; margin-bottom:18px; } [data-lobby-theme="sj"] .players{grid-template-columns:1fr;} [data-lobby-theme] .player{ display:flex;align-items:center;gap:9px; padding:9px 11px;border-radius:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); animation:lobby-player-in .35s ease both; } @keyframes lobby-player-in{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } [data-lobby-theme] .avatar{ width:30px;height:30px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-weight:800;font-size:.78rem;color:#fff; background:linear-gradient(135deg,var(--av1,#7c3aed),var(--av2,#5b21b6)); border:1.5px solid var(--avatar-border); box-shadow:0 2px 8px rgba(0,0,0,.3); } [data-lobby-theme] .player-name{ font-size:.82rem;font-weight:700;color:rgba(255,255,255,.92); flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } [data-lobby-theme] .host-badge{ font-size:.6rem;padding:2px 6px;border-radius:5px;font-weight:800; background:rgba(251,191,36,.16); color:#fbbf24; border:1px solid rgba(251,191,36,.25); } /* ── Start button (demo .start-btn) ─────────────────────────────────────── */ [data-lobby-theme] .start-btn{ position:relative;z-index:2; width:100%;padding:15px;border-radius:15px;border:none;cursor:pointer; font-family:inherit;font-size:1rem;font-weight:800;color:#fff; background:var(--start-bg); box-shadow: 0 8px 26px var(--start-glow), inset 0 1px 0 rgba(255,255,255,.18); transition:all .25s ease; margin-bottom:10px; overflow:hidden; } [data-lobby-theme] .start-btn::before{ content:'';position:absolute;inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%); transform:translateX(-100%);transition:transform .6s; pointer-events:none; } [data-lobby-theme] .start-btn:hover:not(:disabled)::before{transform:translateX(100%)} [data-lobby-theme] .start-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 32px var(--start-glow),inset 0 1px 0 rgba(255,255,255,.2); } [data-lobby-theme] .start-btn:disabled{opacity:.65;cursor:not-allowed;transform:none} /* Gold/lavender themes need dark text on bright buttons (matches demo) */ [data-lobby-theme="im"] .start-btn, [data-lobby-theme="au"] .start-btn, [data-lobby-theme="bz"] .start-btn, [data-lobby-theme="tor"] .start-btn{ color:#1a1006; } /* ── Settings card (demo .settings-card) ───────────────────────────────── */ [data-lobby-theme] .settings-card{ position:relative;z-index:2; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:16px;padding:20px; display:flex;flex-direction:column;gap:14px; margin-bottom:14px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } [data-lobby-theme] .settings-card hr{ border:none;border-top:1px solid rgba(255,255,255,.06);margin:0; } [data-lobby-theme] .settings-card .sec{ font-size:.78rem;letter-spacing:.02em;font-weight:700; color:rgba(255,255,255,.55);margin-bottom:6px; } /* +/- counter row — bridges legacy `.imp-control` + `.imp-num` to demo look */ [data-lobby-theme] .imp-control{display:flex;align-items:center;gap:12px;} [data-lobby-theme] .imp-num{ font-size:2.2rem;font-weight:900;min-width:48px;text-align:center; color:var(--accent); text-shadow:0 0 14px color-mix(in srgb, var(--accent) 40%, transparent); } [data-lobby-theme] .cnt-btn{ width:44px;height:44px;border-radius:50%;cursor:pointer; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.4rem;font-family:inherit; transition:all .2s ease;flex-shrink:0; } [data-lobby-theme] .cnt-btn:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 35%, transparent); } [data-lobby-theme] .cnt-btn:disabled{opacity:.35;cursor:not-allowed;} /* Score-target chips — bridges legacy `.score-options` + `.score-opt` */ [data-lobby-theme] .score-options{display:flex;gap:8px;flex-wrap:wrap;} [data-lobby-theme] .score-opt{ flex:1;min-width:52px;padding:10px 6px;cursor:pointer; border-radius:12px;text-align:center;font-weight:800; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.6);font-size:.95rem;font-family:inherit; transition:all .2s ease; } [data-lobby-theme] .score-opt:hover:not(.active){ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.85); } [data-lobby-theme] .score-opt.active{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 18px color-mix(in srgb, var(--accent) 30%, transparent); } /* Toggles (legacy `` + `.toggle-slider` styled to match the demo's div-based `.toggle-wrap`) */ [data-lobby-theme] .toggle-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; } [data-lobby-theme] .toggle-label{font-size:.9rem;color:rgba(255,255,255,.92);font-weight:700;} [data-lobby-theme] .toggle-sub{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:2px;} [data-lobby-theme] .toggle-wrap{ position:relative;width:52px;height:28px;flex-shrink:0; } [data-lobby-theme] .toggle-wrap input{opacity:0;width:0;height:0;} [data-lobby-theme] .toggle-slider{ position:absolute;inset:0;cursor:pointer; background:rgba(255,255,255,.08); border-radius:28px;transition:background .3s ease; } [data-lobby-theme] .toggle-slider::before{ content:'';position:absolute;top:4px;right:4px; width:20px;height:20px;border-radius:50%; background:rgba(255,255,255,.55); transition:transform .3s ease, background .3s ease; } [data-lobby-theme] .toggle-wrap input:checked+.toggle-slider{ background:color-mix(in srgb, var(--accent) 24%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); } [data-lobby-theme] .toggle-wrap input:checked+.toggle-slider::before{ transform:translateX(-24px); background:var(--accent); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); } /* Player-side cfg-row (chips that show host's config to players) */ [data-lobby-theme] .cfg-row{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; position:relative;z-index:2; } [data-lobby-theme] .cfg-pill, [data-lobby-theme] .cfg-pill-gold, [data-lobby-theme] .cfg-pill-purple, [data-lobby-theme] .cfg-pill-copper{ font-size:.7rem;font-weight:700;padding:5px 10px;border-radius:99px; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); color:#fff; } [data-lobby-theme] .cfg-pill b, [data-lobby-theme] .cfg-pill-gold b, [data-lobby-theme] .cfg-pill-purple b, [data-lobby-theme] .cfg-pill-copper b{color:var(--accent);font-weight:900;} /* Help link (kept around for any callers that still use _howToPlayHTML; the primary affordance is the top-bar `?` icon-btn). */ [data-lobby-theme] .help-link{ position:relative;z-index:2; text-align:center;padding:8px;cursor:pointer; font-size:.75rem;color:rgba(255,255,255,.5);font-weight:700; } [data-lobby-theme] .help-link:hover{color:rgba(255,255,255,.8)} /* ═══════════════════════════════════════════════════════════════════════════ END DEMO SYNC ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ KTANE — تفكيك القنبلة المعقدة Asymmetric bomb-defusal. The defuser sees a chassis-style bomb UI; the experts see a searchable manual. Theme: deep red + gold accent on near- black, evoking neon-arcade tension. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Homescreen card ────────────────────────────────────────────────── NOTE: each card MUST define --gc-accent and --gc-glow. The shared .h-game-card:hover rule reads `border-color:var(--gc-accent)` and `box-shadow:... var(--gc-glow)`. If those vars are missing the declaration becomes invalid and falls back to currentColor (≈ white text), so on hover the card gets a stark white border. Themed to each game's identity colour (matches the icon text-shadow + the `accents` map in index.html). */ .h-gc-ktane{background:linear-gradient(165deg,#180407 0%,#2a0810 40%,#3e0e1a 100%); --gc-accent:rgba(255,84,84,.5);--gc-glow:rgba(255,84,84,.22);} .h-gc-ktane .h-gc-icon{text-shadow:0 0 12px rgba(255,80,80,.45),0 0 24px rgba(245,197,24,.25);} /* مزاد الأسرار — four-color quadrant nod (blue/red/green/yellow) on the homepage card, mirroring the lobby atmo's quadrant split. */ .h-gc-ac{background:linear-gradient(165deg,#0a1424 0%,#0d172e 40%,#15102e 100%); --gc-accent:rgba(59,130,246,.5);--gc-glow:rgba(59,130,246,.22);} .h-gc-ac .h-gc-icon{text-shadow:0 0 12px rgba(59,130,246,.4),0 0 24px rgba(220,38,38,.25);} .h-gc-fa{background:linear-gradient(165deg,#1f0816 0%,#160712 40%,#100610 100%); --gc-accent:rgba(168,59,106,.55);--gc-glow:rgba(168,59,106,.24);} .h-gc-fa .h-gc-icon{text-shadow:0 0 12px rgba(168,59,106,.45),0 0 24px rgba(212,164,73,.25);} .h-gc-tb{background:linear-gradient(165deg,#06181d 0%,#072028 40%,#031218 100%); --gc-accent:rgba(6,182,212,.55);--gc-glow:rgba(6,182,212,.24);} .h-gc-tb .h-gc-icon{text-shadow:0 0 12px rgba(6,182,212,.5),0 0 24px rgba(251,191,36,.25);} /* البروتوكول المكسور — acid green / matrix terminal aesthetic */ .h-gc-bp{background:linear-gradient(165deg,#06140a 0%,#082010 40%,#031f10 100%); --gc-accent:rgba(34,197,94,.55);--gc-glow:rgba(34,197,94,.24);} .h-gc-bp .h-gc-icon{text-shadow:0 0 14px rgba(34,197,94,.55),0 0 28px rgba(34,197,94,.25);} /* ── Per-game lobby theme ───────────────────────────────────────────── */ [data-lobby-theme="ktane"]{ --lobby-accent:#ff5454; --lobby-accent-soft:#7a1820; --lobby-accent-glow:rgba(255,84,84,.4); --lobby-accent2:#f5c518; --lobby-name-grad:linear-gradient(135deg,#fff 0%,#fca5a5 100%); --lobby-bg:radial-gradient(ellipse at top,#1c0408 0%,#0e0205 50%,#06010a 100%); } /* Body bg + --current-lobby-bg variable (read by body::before to paint behind the iOS notch / home indicator). MUST be on body:has() rules, not html — that's the convention used by every other game above. */ body:has(.screen.active[data-lobby-theme="ktane"]), body:has(.screen.active [data-lobby-theme="ktane"]){ --current-lobby-bg:radial-gradient(ellipse at top,#1c0408 0%,#0e0205 50%,#06010a 100%); background:var(--current-lobby-bg) !important; } /* HTML mirror with solid fallback color so the deepest pixels (behind safe-area insets in PWA mode) never reveal white body underneath. */ html:has(.screen.active[data-lobby-theme="ktane"]), html:has(.screen.active [data-lobby-theme="ktane"]){ background:radial-gradient(ellipse at top,#1c0408 0%,#0e0205 50%,#06010a 100%); background-color:#06010a; } /* ── Common ──────────────────────────────────────────────────────────── */ /* `.kt-screen` is a non-lobby ktane screen (defuser / expert / results / */ /* final). The lobby itself goes through the shared renderLobby() chrome */ /* and uses the standard `.screen` skeleton — no custom layout there. */ /* Top padding clears the floating top-bar buttons (#return-home-btn at */ /* top:12px height ~36px on the left, #hamburger-btn same on the right). */ /* Without this, the bomb chassis renders flush under the button row and */ /* the Arabic timer numerals visibly clip behind the chips on a phone. */ /* Bottom padding includes safe-area-inset so iOS home indicator doesn't */ /* sit on top of the last module. */ .kt-screen{ /* Top padding handled by the universal in-game rule (`.screen.active: not(#screen-home):not(:has(.lobby-top))` adds 60px). Combined with #app's 60px, that gives the bomb chassis y=120 to clear the floating refresh + hamburger buttons. Bottom keeps home-indicator inset. */ padding:0 14px calc(36px + env(safe-area-inset-bottom, 0px)); color:var(--text);font-family:'Cairo',sans-serif; } /* Settings-card buttons / pills inside the shared lobby that show the current ktane settings to non-host players. Match the existing `.cfg-pill` style other games use for read-only setting summaries. */ [data-lobby-theme="ktane"] .cfg-pill{background:rgba(255,84,84,.1);border:1px solid rgba(255,84,84,.25); color:var(--lobby-accent);padding:5px 10px;border-radius:99px;font-size:.78rem;font-weight:700; display:inline-flex;align-items:center;gap:4px;} /* Inline info text next to a setting heading (e.g. "مستوى الصعوبة ⏱️ 5:00"). Lighter/smaller than the heading itself, gold-tinted to read as a live value rather than a label. Updates automatically when the lobby re-renders (kt:room_update / settings change). */ [data-lobby-theme="ktane"] .kt-sec-info{font-size:.78rem;font-weight:600; color:var(--lobby-accent2,#f5c518);margin-right:6px;letter-spacing:0; font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;} /* ── DEFUSER — bomb chassis ─────────────────────────────────────────── */ /* No max-width/auto-margin: #app already caps the column at 480px, and inside the flex-column .kt-screen those rules cause the box to shrink to its intrinsic content width instead of stretching across the full row. */ .kt-bomb-header{width:100%;margin-bottom:18px;display:flex;flex-direction:column;align-items:center;gap:8px; background:linear-gradient(180deg,#0e0c14 0%,#1a1018 100%);border:1px solid rgba(255,255,255,.08); border-radius:16px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.5); box-sizing:border-box;} .kt-bomb-timer{font-family:'Courier New',monospace;font-size:3.4rem;font-weight:900; color:#ff4040;text-shadow:0 0 14px rgba(255,80,80,.6);letter-spacing:4px;direction:ltr;} .kt-bomb-timer.kt-timer-urgent{animation:ktBlinkRed .4s ease-in-out infinite alternate;} @keyframes ktBlinkRed{from{color:#ff4040;}to{color:#fff;}} .kt-bomb-meta{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--text-soft);width:100%;align-items:center;} .kt-meta-row{display:flex;gap:6px;} .kt-meta-label{color:var(--muted);} .kt-meta-val{color:#fff;font-weight:700;direction:ltr;} .kt-bomb-status{display:flex;gap:14px;align-items:center;justify-content:center;font-size:.82rem;} .kt-strikes-row{display:flex;gap:5px;} .kt-strike-dot{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.06); display:flex;align-items:center;justify-content:center;font-weight:900;color:#666;border:1px solid rgba(255,255,255,.08);} .kt-strike-dot.kt-strike-active{background:rgba(255,40,40,.3);border-color:#ff4040;color:#ff4040;} .kt-progress-row{color:var(--muted);font-weight:600;} /* Grid stretches to fill the flex-column parent (.kt-screen). One column on phones, two on wider viewports. We use `width:100%` instead of relying on default stretch because the previous `max-width + auto margin` combo caused the grid to collapse to intrinsic content width. */ .kt-bomb-grid{width:100%;display:grid;grid-template-columns:1fr;gap:14px;box-sizing:border-box;} .kt-defuser-hint{margin:18px 0 0;width:100%;text-align:center;color:var(--muted);font-size:.78rem; background:rgba(245,197,24,.06);border:1px solid rgba(245,197,24,.15);border-radius:10px;padding:8px 14px; box-sizing:border-box;} @media (min-width:520px){ .kt-bomb-grid{grid-template-columns:repeat(2,1fr);} } /* ── Module common ──────────────────────────────────────────────────── */ .kt-mod{background:linear-gradient(180deg,#15101c 0%,#0d0813 100%);border:1px solid rgba(255,255,255,.08); border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.4); transition:opacity .25s,filter .25s,border-color .2s;} .kt-mod-solved{opacity:.55;filter:grayscale(.5);border-color:rgba(76,190,138,.4);} .kt-mod-solved::before{content:'✓';position:absolute;} .kt-mod-struck{animation:ktModShake .25s ease;border-color:rgba(255,60,60,.6);} @keyframes ktModShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}} .kt-mod-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;} /* ── Wires module ───────────────────────────────────────────────────── */ .kt-wires-stack{display:flex;flex-direction:column;gap:8px;} .kt-wire{position:relative;display:flex;align-items:center;gap:10px;height:30px;cursor:pointer; padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.25);transition:background .15s;} .kt-wire:hover:not(.kt-wire-cut){background:rgba(255,255,255,.06);} .kt-wire-line{flex:1;height:6px;border-radius:3px;} .kt-wire-num{font-size:.78rem;color:var(--muted);font-weight:700;width:18px;text-align:center;} .kt-wire-red .kt-wire-line{background:linear-gradient(90deg,#ff3838,#a02020);} .kt-wire-blue .kt-wire-line{background:linear-gradient(90deg,#4080ff,#1640a0);} .kt-wire-yellow .kt-wire-line{background:linear-gradient(90deg,#ffe040,#a08010);} .kt-wire-white .kt-wire-line{background:linear-gradient(90deg,#f0f0f0,#a0a0a0);} .kt-wire-black .kt-wire-line{background:linear-gradient(90deg,#404040,#101010);} .kt-wire-cut .kt-wire-line{opacity:.25;background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px);color:#666;} .kt-wire-cut{cursor:default;} /* ── Keypad module ──────────────────────────────────────────────────── */ .kt-keypad-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;} .kt-key{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);color:#fff; font-size:1.6rem;padding:14px 0;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif; transition:all .15s;} .kt-key:hover:not(.kt-key-pressed){background:rgba(255,255,255,.08);border-color:var(--lobby-accent2,#f5c518);} .kt-key:active{transform:scale(.95);} .kt-key-pressed{opacity:.45;background:rgba(76,190,138,.15);border-color:rgba(76,190,138,.5);cursor:default;} /* ── Button module ──────────────────────────────────────────────────── */ .kt-button-wrap{display:flex;align-items:center;gap:14px;justify-content:center;padding:6px 0;} .kt-bigbtn{width:100px;height:100px;border-radius:50%;border:none;cursor:pointer; font-size:1rem;font-weight:900;color:#fff;font-family:'Cairo',sans-serif; position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent; user-select:none;transition:transform .12s,filter .15s; text-shadow:0 1px 3px rgba(0,0,0,.6);} .kt-bigbtn:active,.kt-bigbtn-held{transform:scale(.92);} .kt-bigbtn::before{content:'';position:absolute;top:14%;left:18%;width:35%;height:25%; background:rgba(255,255,255,.18);border-radius:50%;filter:blur(4px);} .kt-bigbtn-red {background:radial-gradient(circle at 38% 32%,#ff5050,#a01010);box-shadow:0 6px 20px rgba(220,30,30,.4);} .kt-bigbtn-blue {background:radial-gradient(circle at 38% 32%,#5080ff,#1030a0);box-shadow:0 6px 20px rgba(40,80,220,.4);} .kt-bigbtn-white {background:radial-gradient(circle at 38% 32%,#f0f0f0,#a0a0a0);box-shadow:0 6px 20px rgba(200,200,200,.3);color:#1a1a1a;text-shadow:none;} .kt-bigbtn-yellow{background:radial-gradient(circle at 38% 32%,#ffe040,#a08010);box-shadow:0 6px 20px rgba(220,180,30,.4);color:#1a1a1a;text-shadow:none;} .kt-strip{width:18px;height:64px;border-radius:4px;box-shadow:0 0 12px currentColor;} .kt-strip-red {background:#ff3030;color:#ff5050;} .kt-strip-blue {background:#3070ff;color:#4080ff;} .kt-strip-yellow {background:#ffd020;color:#ffe040;} .kt-strip-white {background:#e8e8e8;color:#fff;} /* ── EXPERT — manual reader ─────────────────────────────────────────── */ /* Same shape as the defuser side: stretch to fill the .kt-screen content area; #app already caps the column at 480px. No max-width/auto-margin here — the flex-column parent shrinks those to intrinsic content. */ .kt-expert-header{width:100%;margin-bottom:10px;text-align:center;box-sizing:border-box;} .kt-expert-title{font-size:1.4rem;font-weight:900;color:var(--lobby-accent2,#f5c518);} .kt-expert-sub{font-size:.82rem;color:var(--muted);margin-top:4px;} .kt-expert-status{width:100%;margin-bottom:12px;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;display:flex; flex-direction:column;gap:6px;box-sizing:border-box;} .kt-mini-stats{display:flex;gap:14px;justify-content:center;font-size:.85rem;color:#fff;font-weight:700;} .kt-expert-meta{display:flex;gap:12px;justify-content:center;font-size:.75rem;color:var(--text-soft);direction:ltr;flex-wrap:wrap;} .kt-expert-meta b{color:var(--lobby-accent2,#f5c518);} .kt-search{width:100%;margin-bottom:12px;display:block; background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);color:#fff; padding:10px 14px;border-radius:10px;font-family:'Cairo',sans-serif;font-size:.92rem;direction:rtl; box-sizing:border-box;} .kt-search:focus{outline:none;border-color:var(--lobby-accent2,#f5c518);} .kt-manual{width:100%;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;} .kt-manual-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08); border-radius:12px;padding:12px 16px;} .kt-manual-heading{font-weight:900;color:var(--lobby-accent2,#f5c518);font-size:1rem;cursor:pointer;list-style:none;} .kt-manual-heading::-webkit-details-marker{display:none;} .kt-manual-heading::before{content:'▶';margin-left:6px;font-size:.7rem;display:inline-block;transition:transform .2s;} .kt-manual-section[open] .kt-manual-heading::before{transform:rotate(90deg);} .kt-manual-intro{font-size:.82rem;color:var(--text-soft);margin:8px 0;line-height:1.6;} .kt-manual-rules{list-style:decimal-leading-zero;padding-right:24px;display:flex;flex-direction:column;gap:7px; font-size:.85rem;line-height:1.7;} .kt-manual-rules li{padding:4px 8px;border-radius:6px;} /* Hover highlight is desktop-only — on touch devices (mobile web + PWA) the `:hover` state sticks after a tap until the next tap elsewhere, leaving a "phantom highlighted" rule that never clears. `(hover: hover)` matches only true hover-capable inputs (mouse, trackpad, stylus). Phones and tablets in PWA / browser mode resolve as `(hover: none)` and skip this. */ @media (hover: hover) and (pointer: fine){ .kt-manual-rules li:hover{background:rgba(245,197,24,.06);} } .kt-manual-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:8px;} .kt-manual-col{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:8px;text-align:center;} .kt-manual-col-h{font-size:.7rem;color:var(--muted);margin-bottom:6px;font-weight:700;} .kt-manual-sym{font-size:1.4rem;padding:2px 0;color:#fff;} .kt-manual-subhead{font-weight:900;color:var(--lobby-accent2,#f5c518);margin-top:14px;font-size:.92rem;} .kt-strip-mini{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle;margin-left:6px;} /* ── Round results page ─────────────────────────────────────────────── */ .kt-results-wrap{max-width:480px;margin:60px auto 0;text-align:center;display:flex;flex-direction:column;gap:14px;} .kt-results-icon{font-size:5rem;line-height:1;} .kt-results-title{font-size:1.8rem;font-weight:900;color:#fff;} .kt-results-reason{font-size:.95rem;color:var(--muted);} .kt-results-scores{display:flex;justify-content:center;gap:10px;} .kt-score-pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); border-radius:99px;padding:8px 16px;font-size:.85rem;font-weight:700;} .kt-score-pill.kt-score-win{border-color:rgba(76,190,138,.35);color:#4cbe8a;} .kt-score-pill.kt-score-lose{border-color:rgba(255,84,84,.35);color:#ff5454;} .kt-results-defuser{font-size:.85rem;color:var(--text-soft);} .kt-results-countdown{font-size:.78rem;color:var(--muted);margin-top:18px;} /* ── Match end ──────────────────────────────────────────────────────── */ .kt-final-wrap{max-width:480px;margin:60px auto 0;text-align:center;display:flex;flex-direction:column;gap:18px;} .kt-final-icon{font-size:6rem;line-height:1;} .kt-final-title{font-size:2.1rem;font-weight:900; background:linear-gradient(135deg,#fff,var(--lobby-accent2,#f5c518)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .kt-final-scores{display:flex;justify-content:center;gap:12px;} /* Pause uses the shared #waiting-overlay (same as ww / sj / etc.) — no custom pause overlay element for ktane. */ /* ── Mobile tightening ──────────────────────────────────────────────── */ @media (max-width:560px){ .kt-bomb-timer{font-size:2.6rem;letter-spacing:3px;} .kt-bomb-grid{grid-template-columns:1fr;} .kt-mod{padding:12px;} .kt-bigbtn{width:80px;height:80px;font-size:.85rem;} .kt-key{font-size:1.3rem;padding:10px 0;} .kt-results-icon{font-size:3.6rem;} } /* ════════════════════════════════════════════════════════════════════ 🔁 RETURN-TO-GAME BANNER Shown on the homepage when the user voluntarily left a game and the room is still alive on the server. One-tap re-enters the same room (server's normal join handler decides player vs spectator role). Theme tokens (--rt-*) are swapped per-game so the banner matches the color of whatever game the user left. Hidden by default; the JS module toggles `.visible` after a successful server check. ════════════════════════════════════════════════════════════════════ */ #return-banner-slot { display:contents; } .rt-banner { /* Default theme = neutral purple. Game-specific themes below override. */ --rt-accent: #6d4ae0; --rt-bg-1: #0e0826; --rt-bg-2: #0c0720; --rt-border: rgba(124,58,237,.4); --rt-glow: rgba(124,58,237,.25); display:none; /* JS sets .visible to show */ align-items:center; gap:10px; background: linear-gradient(135deg, var(--rt-bg-1), var(--rt-bg-2)); border: 1px solid var(--rt-border); box-shadow: 0 6px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); padding: 12px 14px; border-radius: 12px; position: relative; overflow: hidden; margin: 14px 0 4px; /* slot in between hero and quick-join */ z-index: 1; animation: hFadeUp .45s ease both; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rt-banner.visible { display: flex; } .rt-banner::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 12% 50%, var(--rt-glow) 0%, transparent 50%); pointer-events: none; } .rt-banner .rt-icon { font-size: 1.3rem; width:36px; height:36px; display:grid; place-items:center; background: rgba(255,255,255,.06); border: 1px solid var(--rt-border); border-radius: 10px; flex-shrink: 0; z-index:1; } .rt-banner .rt-text { flex:1; min-width:0; z-index:1; line-height: 1.35; font-size: .88rem; color:#ece7ff; /* RTL nowrap not enforced — names + Arabic wrap naturally if narrow */ text-align: right; } .rt-banner .rt-text b { color: var(--rt-accent); font-weight: 800; } .rt-banner .rt-cta { background: var(--rt-accent); color: #fff; border: none; font-family: inherit; font-weight: 800; font-size: .82rem; padding: 8px 14px; border-radius: 9px; z-index: 1; flex-shrink: 0; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); transition: transform .15s ease, box-shadow .15s ease; } .rt-banner .rt-cta:active { transform: scale(.96); } .rt-banner .rt-x { background: transparent; border: none; color: rgba(255,255,255,.4); font-size: 1rem; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; flex-shrink: 0; z-index: 1; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; } .rt-banner .rt-x:hover, .rt-banner .rt-x:focus { background: rgba(255,255,255,.06); color:#fff; } /* Per-game theme tokens. Keep the keys aligned with `_RETURN_BANNER_THEME` in index.html so JS just sets `theme-` and the rest is automatic. */ .rt-banner.theme-iqni { --rt-accent:#6d4ae0; --rt-bg-1:#0e0826; --rt-bg-2:#0c0720; --rt-border:rgba(124,58,237,.4); --rt-glow:rgba(124,58,237,.25); } .rt-banner.theme-impostor{ --rt-accent:#fbbf24; --rt-bg-1:#1f1408; --rt-bg-2:#150e05; --rt-border:rgba(251,191,36,.4); --rt-glow:rgba(251,191,36,.25); } .rt-banner.theme-auction { --rt-accent:#f59e0b; --rt-bg-1:#1f1606; --rt-bg-2:#150e04; --rt-border:rgba(245,158,11,.4); --rt-glow:rgba(245,158,11,.25); } .rt-banner.theme-warewolf{ --rt-accent:#ff5454; --rt-bg-1:#1a0d12; --rt-bg-2:#110a0e; --rt-border:rgba(255,84,84,.4); --rt-glow:rgba(255,84,84,.25); } .rt-banner.theme-seenjeem{ --rt-accent:#60a5fa; --rt-bg-1:#0a1426; --rt-bg-2:#06101c; --rt-border:rgba(96,165,250,.4); --rt-glow:rgba(96,165,250,.25); } .rt-banner.theme-buzzer { --rt-accent:#ef4444; --rt-bg-1:#1c0e0e; --rt-bg-2:#120808; --rt-border:rgba(239,68,68,.4); --rt-glow:rgba(239,68,68,.25); } .rt-banner.theme-bomb { --rt-accent:#fb923c; --rt-bg-1:#1f1208; --rt-bg-2:#150c05; --rt-border:rgba(251,146,60,.4); --rt-glow:rgba(251,146,60,.25); } .rt-banner.theme-story { --rt-accent:#a78bfa; --rt-bg-1:#140d28; --rt-bg-2:#0e081d; --rt-border:rgba(167,139,250,.4); --rt-glow:rgba(167,139,250,.25); } .rt-banner.theme-dinner { --rt-accent:#c084fc; --rt-bg-1:#1a0d24; --rt-bg-2:#10081a; --rt-border:rgba(192,132,252,.4); --rt-glow:rgba(192,132,252,.25); } .rt-banner.theme-tor { --rt-accent:#d4a017; --rt-bg-1:#1c1408; --rt-bg-2:#120d05; --rt-border:rgba(212,160,23,.4); --rt-glow:rgba(212,160,23,.25); } .rt-banner.theme-ktane { --rt-accent:#ef4444; --rt-bg-1:#1f0a0a; --rt-bg-2:#150606; --rt-border:rgba(239,68,68,.4); --rt-glow:rgba(239,68,68,.25); } .rt-banner.theme-conspiracy { --rt-accent:#dc2626; --rt-bg-1:#1f0808; --rt-bg-2:#140505; --rt-border:rgba(220,38,38,.4); --rt-glow:rgba(220,38,38,.25); } .rt-banner.theme-auction_of_clues { --rt-accent:#3b82f6; --rt-bg-1:#0a1224; --rt-bg-2:#060c18; --rt-border:rgba(59,130,246,.4); --rt-glow:rgba(59,130,246,.25); } /* ════════════════════════════════════════════════════════════════════ 📖 SHARED STORY — notch / dynamic-island clearance ──────────────────────────────────────────────────────────────────── In PWA standalone mode with viewport-fit=cover, the layout extends behind the iPhone notch / Dynamic Island. The global #app padding-top of 60px clears regular notches but leaves the story logo and round-1 cards visually overlapping the chrome on Pro/Pro Max devices where the safe-area-inset-top is 50–59px. Adding env(safe-area-inset-top) here stacks on top of #app's existing 60px padding so on a non-notched device this resolves to 0 (no change), and on notched iPhones it pushes content down by exactly the inset amount. Applied to both host and player screens so every phase (lobby / writing / voting / results / game-end) clears the notch. ════════════════════════════════════════════════════════════════════ */ #st-screen-host, #st-screen-player { /* No padding-top — flat-60 from #app's padding is the only top spacing. */ } /* ════════════════════════════════════════════════════════════════════ 📢 NOTIFY OVERLAY — broadcast modal triggered by `notify:overlay` ──────────────────────────────────────────────────────────────────── Sits above ALL game UI (z-index above the score-bar at 1500, the waiting-overlay at 2000, lobby chrome at 1100, etc.) so the message reaches the player no matter what phase they're on. `pointer-events` stays auto so taps don't leak through to underlying buttons during the 10-second window. The overlay is purely visual — sockets keep ticking, server timers keep firing, audio keeps playing — so the moment it dismisses, the player resumes mid-stride. ════════════════════════════════════════════════════════════════════ */ #notify-overlay { display: none; position: fixed; inset: 0; z-index: 99000; background: rgba(8, 6, 18, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 24px; pointer-events: auto; animation: notifyFadeIn .3s ease-out; } #notify-overlay.visible { display: flex; } @keyframes notifyFadeIn { from { opacity: 0; } to { opacity: 1; } } .notify-box { background: linear-gradient(155deg, #1a1030 0%, #13102a 50%, #180d2a 100%); border: 1px solid rgba(124, 58, 237, .4); border-radius: 20px; padding: 32px 28px; max-width: 420px; width: 92%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-shadow: 0 0 0 1px rgba(124, 58, 237, .12), 0 12px 50px rgba(0, 0, 0, .6), 0 0 60px rgba(124, 58, 237, .25), inset 0 1px 0 rgba(255, 255, 255, .08); position: relative; overflow: hidden; animation: notifyPop .35s cubic-bezier(.22, 1, .36, 1); } @keyframes notifyPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Decorative glow behind the icon — purely cosmetic */ .notify-box::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(124, 58, 237, .25) 0%, transparent 70%); pointer-events: none; } .notify-icon { font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 0 14px rgba(167, 139, 250, .35)); animation: notifyIconPulse 1.4s ease-in-out infinite; } @keyframes notifyIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Optional title — shown above .notify-message when the dev provides one in the free-message form. Bigger + brighter than the body to give it priority. Hidden via inline display:none when no title is provided. */ .notify-title { font-size: 1.25rem; line-height: 1.4; color: #fff; font-weight: 800; letter-spacing: -.01em; } .notify-message { font-size: 1.05rem; line-height: 1.7; color: #fff; font-weight: 700; white-space: pre-line; } /* Preview badge — visible only when the overlay was triggered via the "🧪 معاينة" buttons in the dev panel. Shows top-right (RTL: top-left) so it doesn't conflict with the icon's animation. */ .notify-preview-badge { position: absolute; top: 12px; inset-inline-end: 14px; font-size: .65rem; font-weight: 700; color: #fbbf24; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); border-radius: 10px; padding: 3px 9px; letter-spacing: .02em; z-index: 1; } .notify-countdown { font-size: .78rem; color: #a78bfa; font-weight: 700; background: rgba(124, 58, 237, .12); border: 1px solid rgba(124, 58, 237, .25); border-radius: 12px; padding: 6px 14px; margin-top: 4px; } /* ════════════════════════════════════════════════════════════════════ 🔢 HERO VERSION LABEL ──────────────────────────────────────────────────────────────────── Sits under the .hero-credit line on the homepage. Smaller font + more muted than the credit so the credit stays primary and the version is a discrete diagnostic. Same monospace-ish letter-spacing rhythm so numbers line up cleanly across deploys. ════════════════════════════════════════════════════════════════════ */ .hero-version { font-size: .55rem; color: var(--muted); opacity: .35; letter-spacing: 1px; margin-top: 2px; position: relative; z-index: 1; animation: hFadeUp .5s .35s ease both; } /* ════════════════════════════════════════════════════════════════════ 🚫 FORCE-UPDATE OVERLAY — un-dismissible ──────────────────────────────────────────────────────────────────── Highest z-index in the app (above notify-overlay's 99000) because the moment this opens the user CAN'T do anything else until they update. No close button, no escape gesture. The amber theme signals "you need to act on this", differentiating from the purple positive notify overlay. Path 2 (reload button mode) is identical visually except the numbered steps are hidden and a glowing button appears instead. ════════════════════════════════════════════════════════════════════ */ #force-update-overlay { display: none; position: fixed; inset: 0; z-index: 999000; background: rgba(8, 4, 14, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); align-items: center; justify-content: center; padding: 24px; pointer-events: auto; overflow-y: auto; } #force-update-overlay.visible { display: flex; } .fu-box { background: linear-gradient(160deg, #2a1605 0%, #1f1108 50%, #1a0a0a 100%); border: 1px solid rgba(245, 158, 11, .4); border-radius: 22px; padding: 32px 26px; max-width: 460px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; box-shadow: 0 0 0 1px rgba(245, 158, 11, .12), 0 14px 60px rgba(0, 0, 0, .7), 0 0 80px rgba(245, 158, 11, .15), inset 0 1px 0 rgba(255, 255, 255, .06); position: relative; overflow: hidden; animation: fuPop .4s cubic-bezier(.22, 1, .36, 1); } @keyframes fuPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* When in reload OR browser mode, swap the entire card to the purple theme so the user instantly recognizes "this is the easy path, not the painful one". Reload (PWA + SW staged) and browser (PC / mobile non-PWA) share the same one-tap UX, so they share the same visual language. */ #force-update-overlay[data-mode="reload"] .fu-box, #force-update-overlay[data-mode="browser"] .fu-box { background: linear-gradient(155deg, #1a1030 0%, #13102a 50%, #180d2a 100%); border-color: rgba(124, 58, 237, .4); box-shadow: 0 0 0 1px rgba(124, 58, 237, .12), 0 14px 60px rgba(0, 0, 0, .7), 0 0 80px rgba(124, 58, 237, .25), inset 0 1px 0 rgba(255, 255, 255, .06); } .fu-box::before { content: ''; position: absolute; top: -50px; right: -50px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(245, 158, 11, .25) 0%, transparent 70%); pointer-events: none; } #force-update-overlay[data-mode="reload"] .fu-box::before, #force-update-overlay[data-mode="browser"] .fu-box::before { background: radial-gradient(circle, rgba(124, 58, 237, .25) 0%, transparent 70%); } .fu-icon { font-size: 3rem; line-height: 1; filter: drop-shadow(0 0 16px rgba(245, 158, 11, .35)); animation: fuIconPulse 1.6s ease-in-out infinite; } #force-update-overlay[data-mode="reload"] .fu-icon, #force-update-overlay[data-mode="browser"] .fu-icon { filter: drop-shadow(0 0 16px rgba(167, 139, 250, .4)); } @keyframes fuIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .fu-title { font-size: 1.3rem; font-weight: 800; color: #fbbf24; margin-top: 2px; } #force-update-overlay[data-mode="reload"] .fu-title, #force-update-overlay[data-mode="browser"] .fu-title { color: #c4b5fd; } .fu-sub { font-size: .85rem; color: var(--muted); margin-top: -6px; } .fu-body { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .fu-intro { font-size: .9rem; line-height: 1.7; color: rgba(255, 255, 255, .85); } .fu-steps { background: rgba(0, 0, 0, .35); border: 1px solid rgba(245, 158, 11, .2); border-radius: 14px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; text-align: right; } .fu-step { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .9); } .fu-step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(245, 158, 11, .15); border: 1px solid rgba(245, 158, 11, .35); color: #fbbf24; font-weight: 800; font-size: .82rem; display: flex; align-items: center; justify-content: center; } .fu-step-txt { flex: 1; padding-top: 2px; } .fu-reload-btn { background: linear-gradient(135deg, #7c3aed, #6d28d9); border: none; border-radius: 14px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; padding: 14px 24px; cursor: pointer; box-shadow: 0 6px 22px rgba(124, 58, 237, .4), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: transform .2s ease, box-shadow .2s ease; width: 100%; margin-top: 8px; } .fu-reload-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(124, 58, 237, .5); } .fu-reload-btn:active { transform: scale(.98); } .fu-reload-btn:disabled { opacity: .6; cursor: wait; transform: none; } .fu-versions { font-size: .68rem; color: var(--muted); opacity: .7; line-height: 1.7; margin-top: 8px; } .fu-versions b { color: rgba(255, 255, 255, .8); font-weight: 700; } .fu-footer { font-size: .72rem; color: rgba(255, 255, 255, .5); font-style: italic; margin-top: 6px; } /* ════════════════════════════════════════════════════════════════════ 🎭 المؤامرة — in-game CSS (deep crimson + gold theme) ──────────────────────────────────────────────────────────────────── Status bar at top, persistent board (red row + green row + tracker), policy cards (red/green), candidate buttons, vote buttons, end screen. Sections sized large enough to avoid shrink (no flex:0 minimum issues). 16px gap between sections matches the rest of the app. ════════════════════════════════════════════════════════════════════ */ #cn-screen-host, #cn-screen-player { /* No padding-top — universal flat-60 rule already applies. Standard 16px gap between top-level children for consistent breathing room. */ } #cn-host-content, #cn-player-content { display: flex; flex-direction: column; gap: 16px; width: 100%; } /* مزاد الأسرار in-game content containers — same 16px gap between phase cards as conspiracy / others, so there's a consistent breathing room. */ #ac-host-content, #ac-player-content { display: flex; flex-direction: column; gap: 16px; width: 100%; } /* البروتوكول المكسور — same content-container shape as AC. Without these, the inner cards inside #bp-host-content / #bp-player-content didn't stretch full-width and the screen's flex layout occasionally clamped scroll height (the "shows a limit during scrolling" bug). Mirroring AC's known-good rules makes BP scroll like every other game. */ #bp-host-content, #bp-player-content { display: flex; flex-direction: column; gap: 16px; width: 100%; } /* Screen-level: ensure both BP screens behave like AC's — let the body own scroll, never clip vertically, never lock height. The default `.screen` rule already covers most of this; this is a defensive belt- and-suspenders for the BP-specific stage which can grow tall during the protocol phase (10 player chips + fragments + status). */ #bp-screen-host, #bp-screen-player { overflow: visible; min-height: 0; } /* Status bar — sticky-feeling chip strip showing president/VP/phase */ .cn-status-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(251, 191, 36, .18); border-radius: 12px; font-size: .78rem; } .cn-sb-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 4px 9px; color: var(--text); font-weight: 700; } .cn-sb-phase { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); color: #fbbf24; margin-inline-start: auto; } /* Board — 6-slot red row, 5-slot green row, election tracker */ .cn-board { background: linear-gradient(160deg, #1a0606 0%, #2a0808 50%, #1a0606 100%); border: 1px solid rgba(251, 191, 36, .22); border-radius: 14px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 1px rgba(251, 191, 36, .05), inset 0 1px 0 rgba(255, 255, 255, .04); } .cn-board-row { display: flex; align-items: center; gap: 8px; } .cn-board-label { font-size: .75rem; font-weight: 800; min-width: 56px; text-align: center; } .cn-board-label.red { color: #fca5a5; } .cn-board-label.green { color: #86efac; } .cn-slots { display: flex; gap: 5px; flex: 1; } .cn-slot { flex: 1; aspect-ratio: 1; min-height: 28px; background: rgba(0, 0, 0, .4); border: 1px dashed rgba(255, 255, 255, .12); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .9rem; } .cn-slot.filled-red { background: linear-gradient(160deg, #5a1212, #8a1f25); border: 1px solid #e57373; border-style: solid; box-shadow: 0 0 8px rgba(220, 38, 38, .35); } .cn-slot.filled-green { background: linear-gradient(160deg, #0e3a1f, #1c8c4e); border: 1px solid #5fbf8b; border-style: solid; box-shadow: 0 0 8px rgba(21, 128, 61, .35); } .cn-tracker-row { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .08); } .cn-tracker-dots { display: flex; gap: 6px; } .cn-tracker-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); } .cn-tracker-dot.filled { background: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .55); } /* Phase card — the big rounded panel containing each phase's body */ .cn-card-frame { background: linear-gradient(160deg, #1a0606 0%, #2a0808 50%, #1a0606 100%); border: 1px solid rgba(251, 191, 36, .25); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; box-shadow: 0 0 0 1px rgba(251, 191, 36, .05), 0 8px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04); } .cn-phase-title { font-size: 1.3rem; font-weight: 900; color: #fbbf24; } .cn-phase-sub { font-size: .9rem; line-height: 1.6; color: var(--text); opacity: .85; } .cn-role-hint { font-size: .78rem; color: var(--muted); margin-top: 6px; } /* Role-reveal: known reds list (only shown to Red team) */ .cn-known-reds { width: 100%; margin-top: 10px; background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .25); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: right; } .cn-known-title { font-weight: 800; color: #fca5a5; font-size: .88rem; margin-bottom: 4px; } .cn-known-row { display: flex; align-items: center; gap: 8px; font-size: .9rem; } .cn-master-tag { background: rgba(251, 191, 36, .18); border: 1px solid rgba(251, 191, 36, .4); color: #fbbf24; border-radius: 6px; padding: 1px 7px; font-size: .68rem; font-weight: 800; margin-inline-start: 6px; } /* Nomination — candidate grid */ .cn-cand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; margin-top: 6px; } .cn-cand { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 12px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .15s ease; } .cn-cand:hover { border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .08); } .cn-cand.selected { background: linear-gradient(135deg, rgba(251, 191, 36, .25), rgba(220, 38, 38, .15)); border-color: #fbbf24; color: #fff; box-shadow: 0 0 0 2px rgba(251, 191, 36, .25); } /* Voting — government card + agree/disagree buttons */ .cn-gov-card { width: 100%; background: rgba(0, 0, 0, .35); border: 1px solid rgba(251, 191, 36, .2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: right; } .cn-gov-row { display: flex; align-items: center; gap: 8px; font-size: .95rem; } .cn-gov-icon { font-size: 1.05rem; } .cn-vote-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .cn-btn-vote { padding: 14px; border-radius: 12px; border: 2px solid transparent; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all .15s ease; color: #fff; } .cn-btn-vote.agree { background: linear-gradient(135deg, #15803d, #0e3a1f); border-color: rgba(34, 197, 94, .3); } .cn-btn-vote.disagree { background: linear-gradient(135deg, #dc2626, #5a1212); border-color: rgba(220, 38, 38, .3); } .cn-btn-vote.selected { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(251, 191, 36, .35); } .cn-btn-vote:disabled { opacity: .55; cursor: not-allowed; } .cn-vote-status { font-size: .78rem; color: var(--muted); margin-top: 4px; } .cn-vote-progress { font-size: .78rem; color: #a78bfa; margin-top: 4px; } .cn-vote-rows { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .cn-vote-row { display: flex; justify-content: space-between; font-size: .85rem; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; padding: 6px 10px; } /* Card-pick row (president / VP picking which card to discard/enact) */ .cn-cards-row { display: flex; gap: 10px; justify-content: center; margin-top: 6px; width: 100%; } .cn-pick-card { background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all .15s ease; } .cn-pick-card:hover { border-color: rgba(251, 191, 36, .55); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); } .cn-pick-label { font-size: .75rem; font-weight: 800; color: #fbbf24; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .3); border-radius: 6px; padding: 3px 10px; } /* Card visuals */ .cn-card { /* base inline styles set per-instance */ } /* Pulsing dot for "waiting…" states */ .cn-pulse-dot { width: 14px; height: 14px; border-radius: 50%; background: #fbbf24; animation: cnPulse 1.2s ease-in-out infinite; margin-top: 4px; } @keyframes cnPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* End screen */ .cn-end-board { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; margin: 6px 0; } .cn-end-rows { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .cn-end-row { display: flex; justify-content: space-between; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; padding: 8px 12px; font-size: .9rem; } /* Role-reveal countdown — visible 20s timer the player watches before the first nomination starts */ .cn-role-countdown { font-size: 1.5rem; font-weight: 900; color: #fbbf24; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35); border-radius: 12px; padding: 8px 18px; margin-top: 4px; letter-spacing: .02em; } /* Discussion phase — 2-min timer + skip button */ .cn-discussion-countdown { font-size: 1.8rem; font-weight: 900; color: #fbbf24; background: rgba(0, 0, 0, .35); border: 1px solid rgba(251, 191, 36, .35); border-radius: 12px; padding: 10px 22px; margin: 6px 0 4px; letter-spacing: .03em; font-variant-numeric: tabular-nums; } .cn-skip-btn { width: 100%; background: linear-gradient(135deg, #f59e0b, #d97706); border: none; border-radius: 12px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; padding: 12px 16px; cursor: pointer; transition: all .15s ease; box-shadow: 0 4px 14px rgba(245, 158, 11, .3); } .cn-skip-btn:hover { filter: brightness(1.08); } .cn-skip-btn:active { transform: scale(.98); } .cn-skip-btn.voted, .cn-skip-btn:disabled { background: linear-gradient(135deg, #4cbe8a, #2d7d54); cursor: default; opacity: .9; box-shadow: 0 2px 8px rgba(76, 190, 138, .25); } .cn-skip-progress { font-size: .78rem; color: var(--muted); font-weight: 700; margin-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════╗ ║ مزاد الأسرار (AUCTION OF CLUES) — in-game styles ║ ╚════════════════════════════════════════════════════════════════════════╝ Four team colors used throughout the game UI: team A → blue #3b82f6 / glow rgba(59,130,246,.35) team B → red #dc2626 / glow rgba(220,38,38,.35) team C → green #16a34a / glow rgba(22,163,74,.35) team D → yellow #eab308 / glow rgba(234,179,8,.35) ═══════════════════════════════════════════════════════════════════════════ */ .ac-team-blue { --ac-team-color: #3b82f6; --ac-team-glow: rgba(59,130,246,.35); --ac-team-bg: rgba(59,130,246,.08); --ac-team-bd: rgba(59,130,246,.32); } .ac-team-red { --ac-team-color: #dc2626; --ac-team-glow: rgba(220,38,38,.35); --ac-team-bg: rgba(220,38,38,.08); --ac-team-bd: rgba(220,38,38,.32); } .ac-team-green { --ac-team-color: #16a34a; --ac-team-glow: rgba(22,163,74,.35); --ac-team-bg: rgba(22,163,74,.08); --ac-team-bd: rgba(22,163,74,.32); } .ac-team-yellow { --ac-team-color: #eab308; --ac-team-glow: rgba(234,179,8,.35); --ac-team-bg: rgba(234,179,8,.08); --ac-team-bd: rgba(234,179,8,.32); } /* ── Status bar (always-visible, shows team scores + phase) ─────────── */ .ac-status-bar { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; } .ac-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; } .ac-phase-label { font-size: .74rem; color: var(--muted); font-weight: 700; } .ac-phase-name { font-size: .85rem; color: var(--text); font-weight: 800; } .ac-team-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ac-team-chip { display: flex; align-items: center; gap: 6px; background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 8px; padding: 4px 9px; font-size: .76rem; font-weight: 700; color: var(--ac-team-color); flex: 1; min-width: 110px; } .ac-team-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-team-chip-pts { font-variant-numeric: tabular-nums; direction: ltr; font-weight: 800; } /* ── Phase card — shared frame for each phase's body ──────────────── */ .ac-phase-card { background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; } .ac-phase-title { font-size: 1.1rem; font-weight: 900; color: var(--text); text-align: center; } .ac-phase-sub { font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.6; } /* ── Case intro (shown once for ~8s) ─────────────────────────────── */ .ac-case-card { background: linear-gradient(160deg, #1a1730 0%, #15122a 100%); border: 1px solid rgba(124,58,237,.3); border-radius: 18px; padding: 18px 16px; box-shadow: 0 8px 32px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 12px; } .ac-case-title { font-size: 1.25rem; font-weight: 900; color: #fff; text-align: center; line-height: 1.3; } .ac-case-desc { font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.7; text-align: center; } .ac-case-question { font-size: 1rem; font-weight: 800; color: #c4b5fd; text-align: center; padding: 10px 14px; background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.3); border-radius: 12px; } /* ── Bidder selection (first-tap-wins per team) ──────────────────── */ .ac-bidder-grid { display: flex; flex-direction: column; gap: 12px; } .ac-bidder-team-card { background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .ac-bidder-team-head { display: flex; align-items: center; justify-content: space-between; } .ac-bidder-team-name { font-size: .95rem; font-weight: 800; color: var(--ac-team-color); } .ac-bidder-status { font-size: .75rem; color: var(--muted); font-weight: 700; } .ac-bidder-status.chosen { color: var(--ac-team-color); } .ac-bidder-members { display: flex; flex-wrap: wrap; gap: 6px; } .ac-bidder-member { font-size: .8rem; padding: 5px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--text); font-weight: 700; } .ac-bidder-member.bidder { background: var(--ac-team-color); color: #fff; border-color: var(--ac-team-color); box-shadow: 0 0 14px var(--ac-team-glow); } .ac-claim-btn { width: 100%; background: linear-gradient(135deg, var(--ac-team-color), color-mix(in srgb, var(--ac-team-color) 70%, #000)); border: none; border-radius: 12px; color: #fff; font-family: 'Cairo', sans-serif; font-size: .95rem; font-weight: 800; padding: 11px 16px; cursor: pointer; transition: all .15s; } .ac-claim-btn:hover { filter: brightness(1.1); } .ac-claim-btn:active { transform: scale(.98); } .ac-claim-btn:disabled { background: rgba(255,255,255,.06); color: var(--muted); cursor: default; filter: none; } /* ── Bidding phase (the core auction) ────────────────────────────── */ .ac-clue-header { display: flex; align-items: center; justify-content: space-between; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25); border-radius: 12px; padding: 10px 14px; } .ac-clue-num { font-size: 1.4rem; font-weight: 900; color: #c4b5fd; font-variant-numeric: tabular-nums; direction: ltr; } .ac-clue-cat { font-size: .9rem; font-weight: 800; color: #fff; background: rgba(124,58,237,.25); padding: 6px 12px; border-radius: 10px; } .ac-bid-timer { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 900; color: #fbbf24; font-variant-numeric: tabular-nums; direction: ltr; } .ac-bid-timer.warning { color: #f87171; animation: acTimerPulse 1s ease-in-out infinite; } @keyframes acTimerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .ac-bid-input-wrap { display: flex; flex-direction: column; gap: 10px; } .ac-bid-input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.3); border: 2px solid var(--ac-team-bd); border-radius: 12px; padding: 14px 16px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1.4rem; font-weight: 900; text-align: center; direction: ltr; } .ac-bid-input:focus { outline: none; border-color: var(--ac-team-color); box-shadow: 0 0 0 4px var(--ac-team-glow); } .ac-bid-submit { width: 100%; background: linear-gradient(135deg, var(--ac-team-color), color-mix(in srgb, var(--ac-team-color) 70%, #000)); border: none; border-radius: 12px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; padding: 12px 16px; cursor: pointer; } .ac-bid-submit:disabled { background: rgba(255,255,255,.06); color: var(--muted); cursor: default; } .ac-spectator-note { font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.6; padding: 10px 12px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.1); border-radius: 10px; } /* Status grid showing each team's bid-submission state (without revealing values) */ .ac-bid-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ac-bid-status { display: flex; align-items: center; gap: 8px; background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 10px; padding: 8px 10px; } .ac-bid-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-team-color); opacity: .35; flex-shrink: 0; } .ac-bid-status.submitted .ac-bid-status-dot { opacity: 1; box-shadow: 0 0 10px var(--ac-team-glow); } .ac-bid-status-name { flex: 1; font-size: .82rem; font-weight: 700; color: var(--ac-team-color); } .ac-bid-status-state { font-size: .72rem; font-weight: 700; color: var(--muted); } .ac-bid-status.submitted .ac-bid-status-state { color: var(--ac-team-color); } /* ── Bid reveal — shows everyone's bids + winner highlight ─────── */ .ac-reveal-grid { display: flex; flex-direction: column; gap: 8px; } .ac-reveal-row { display: flex; align-items: center; justify-content: space-between; background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 12px; padding: 10px 14px; font-size: .9rem; transition: all .3s; } .ac-reveal-row.winner { background: var(--ac-team-color); border-color: var(--ac-team-color); box-shadow: 0 4px 24px var(--ac-team-glow); } .ac-reveal-row.winner .ac-reveal-team-name, .ac-reveal-row.winner .ac-reveal-bid { color: #fff; } .ac-reveal-team-name { font-weight: 800; color: var(--ac-team-color); } .ac-reveal-bid { font-weight: 900; font-variant-numeric: tabular-nums; direction: ltr; color: var(--ac-team-color); font-size: 1.05rem; } .ac-reveal-skipped { text-align: center; font-size: .9rem; font-weight: 700; color: var(--muted); padding: 14px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.1); border-radius: 12px; } /* Private clue card — only visible to the winning team */ .ac-clue-revealed { background: linear-gradient(160deg, rgba(124,58,237,.18), rgba(76,190,138,.08)); border: 2px solid rgba(124,58,237,.4); border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 28px rgba(124,58,237,.25); animation: acClueReveal .5s ease-out; } @keyframes acClueReveal { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .ac-clue-revealed-head { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; color: #c4b5fd; font-weight: 800; } .ac-clue-revealed-text { font-size: 1rem; line-height: 1.7; color: #fff; font-weight: 600; } /* My team's accumulated clues panel (always visible during auction) */ .ac-my-clues { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; max-height: 240px; overflow-y: auto; } .ac-my-clues-title { font-size: .78rem; color: var(--muted); font-weight: 700; margin-bottom: 8px; } .ac-my-clue-row { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .ac-my-clue-row:last-child { border-bottom: none; } .ac-my-clue-num { font-weight: 900; color: #c4b5fd; font-variant-numeric: tabular-nums; direction: ltr; flex-shrink: 0; min-width: 22px; } .ac-my-clue-cat { font-size: .68rem; padding: 1px 6px; background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3); border-radius: 5px; color: #c4b5fd; font-weight: 700; flex-shrink: 0; } .ac-my-clue-text { flex: 1; line-height: 1.5; color: var(--text); } /* ── Deduction (3 min — bidder types final answer) ──────────────── */ .ac-deduction-area { display: flex; flex-direction: column; gap: 10px; } .ac-deduction-input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.35); border: 2px solid var(--ac-team-bd); border-radius: 12px; padding: 14px 16px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.6; resize: vertical; min-height: 100px; } .ac-deduction-input:focus { outline: none; border-color: var(--ac-team-color); box-shadow: 0 0 0 4px var(--ac-team-glow); } .ac-deduction-mirror { /* Read-only live mirror that teammates see (the bidder is the only one who types) */ width: 100%; box-sizing: border-box; background: rgba(0,0,0,.2); border: 1px dashed var(--ac-team-bd); border-radius: 12px; padding: 14px 16px; color: rgba(255,255,255,.85); font-family: 'Cairo', sans-serif; font-size: 1rem; line-height: 1.7; min-height: 100px; white-space: pre-wrap; overflow-wrap: anywhere; } .ac-deduction-mirror.empty::before { content: 'في انتظار المراهن…'; color: var(--muted); font-style: italic; } /* ── Answers reveal (host-side judging) ─────────────────────────── */ .ac-answer-card { background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .ac-answer-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; } .ac-answer-team-name { color: var(--ac-team-color); } .ac-answer-match { font-size: .82rem; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; } .ac-answer-match.high { color: #4cbe8a; border-color: rgba(76,190,138,.3); background: rgba(76,190,138,.08); } .ac-answer-match.medium { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); } .ac-answer-match.low { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); } .ac-answer-text { font-size: .92rem; line-height: 1.7; color: var(--text); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; min-height: 50px; white-space: pre-wrap; overflow-wrap: anywhere; } .ac-answer-text.empty { color: var(--muted); font-style: italic; text-align: center; } .ac-judge-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ac-judge-btn { border: none; border-radius: 10px; font-family: 'Cairo', sans-serif; font-size: .9rem; font-weight: 800; padding: 10px 12px; cursor: pointer; transition: all .15s; } .ac-judge-btn.correct { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; } .ac-judge-btn.incorrect { background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; } .ac-judge-btn.locked { background: rgba(255,255,255,.06); color: var(--muted); cursor: default; } .ac-judge-result { text-align: center; padding: 8px 12px; border-radius: 10px; font-size: .85rem; font-weight: 800; } .ac-judge-result.correct { background: rgba(22,163,74,.15); border: 1px solid rgba(22,163,74,.4); color: #4cbe8a; } .ac-judge-result.incorrect { background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.4); color: #f87171; } /* Host "finalize judging" CTA — shown beneath the answer cards once the host has judged at least one team. Pressing it submits the round and defaults any remaining unjudged teams to incorrect. */ .ac-finalize-row { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 4px; } .ac-finalize-btn { width: 100%; border: none; border-radius: 12px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-family: 'Cairo', sans-serif; font-size: .95rem; font-weight: 800; padding: 12px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(124,58,237,.35); transition: transform .12s, box-shadow .15s; } .ac-finalize-btn:active { transform: scale(.98); } .ac-finalize-hint { font-size: .72rem; color: var(--muted); text-align: center; } /* The solution reveal at the top of the answers screen */ .ac-solution-reveal { background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(124,58,237,.06)); border: 2px solid rgba(124,58,237,.4); border-radius: 14px; padding: 14px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .ac-solution-label { font-size: .78rem; color: #c4b5fd; font-weight: 700; } .ac-solution-value { font-size: 1.3rem; font-weight: 900; color: #fff; } /* ── Pause overlay (universal pause flow) ───────────────────────── */ .ac-pause-msg { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 12px; padding: 12px 14px; font-size: .9rem; color: #fbbf24; font-weight: 700; text-align: center; } /* ── Final scoreboard ───────────────────────────────────────────── */ .ac-final-grid { display: flex; flex-direction: column; gap: 10px; } .ac-final-row { background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ac-final-row.winner { background: linear-gradient(135deg, var(--ac-team-bg), rgba(255,255,255,.05)); border-color: var(--ac-team-color); box-shadow: 0 8px 32px var(--ac-team-glow); } .ac-final-head { display: flex; align-items: center; justify-content: space-between; font-weight: 900; } .ac-final-team { display: flex; align-items: center; gap: 8px; color: var(--ac-team-color); font-size: 1rem; } .ac-final-trophy { font-size: 1.2rem; } .ac-final-total { font-size: 1.4rem; font-variant-numeric: tabular-nums; direction: ltr; color: var(--ac-team-color); } .ac-final-breakdown { display: flex; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); } .ac-final-bonus { color: #4cbe8a; } .ac-final-no-bonus { color: var(--muted); text-decoration: line-through; opacity: .6; } .ac-final-bidder { font-size: .76rem; color: var(--muted); font-weight: 600; } /* ── New AC final scoreboard (team-focused, no podium) ──────────── */ .ac-final-title { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 4px; } .ac-final-title-emoji { font-size: 2.4rem; line-height: 1; } .ac-final-title-main { font-size: 1.4rem; font-weight: 900; color: #fff; } .ac-final-title-sub { font-size: .82rem; color: var(--muted); font-weight: 600; } /* Winning team spotlight — slightly bigger card with extra glow */ .ac-final-winner { display: flex; flex-direction: column; gap: 8px; } .ac-final-winner-multi { display: flex; flex-direction: column; gap: 8px; } .ac-final-winner-label { text-align: center; font-size: .92rem; font-weight: 800; color: #fbbf24; letter-spacing: .03em; } .ac-final-winner .ac-final-team-card.is-winner, .ac-final-winner-multi .ac-final-team-card.is-winner { box-shadow: 0 8px 32px var(--ac-team-glow), 0 0 0 1px rgba(255,255,255,.08); background: linear-gradient(155deg, var(--ac-team-bg), rgba(255,255,255,.04)); } .ac-final-no-winner { text-align: center; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.1); border-radius: 14px; padding: 18px; color: var(--muted); font-size: .92rem; font-weight: 700; display: flex; flex-direction: column; gap: 6px; align-items: center; } /* Solution panel — purple-tinted standout card */ .ac-final-solution { background: linear-gradient(160deg, rgba(124,58,237,.18), rgba(124,58,237,.06)); border: 1px solid rgba(124,58,237,.4); border-radius: 14px; padding: 14px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .ac-final-solution-label { font-size: .82rem; color: #c4b5fd; font-weight: 700; } .ac-final-solution-value { font-size: 1.45rem; font-weight: 900; color: #fff; line-height: 1.3; } .ac-final-solution-case { font-size: .78rem; color: var(--muted); font-style: italic; margin-top: 2px; } .ac-final-my-msg { text-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 9px 12px; font-size: .9rem; color: var(--text); font-weight: 700; } .ac-final-my-msg.ac-final-my-win { background: rgba(76,190,138,.12); border-color: rgba(76,190,138,.4); color: #4cbe8a; } /* "Other teams" section */ .ac-final-others-head { font-size: .82rem; color: var(--muted); font-weight: 800; text-align: center; letter-spacing: .03em; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px; } .ac-final-others { display: flex; flex-direction: column; gap: 10px; } /* Single team card (used for both winner spotlight + others) */ .ac-final-team-card { background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ac-final-team-head { display: flex; align-items: center; justify-content: space-between; font-weight: 900; } .ac-final-team-name { color: var(--ac-team-color); font-size: 1.05rem; line-height: 1.2; flex: 1; overflow: hidden; text-overflow: ellipsis; } .ac-final-team-card.is-winner .ac-final-team-name { font-size: 1.2rem; } .ac-final-team-total { font-size: 1.5rem; font-variant-numeric: tabular-nums; direction: ltr; color: var(--ac-team-color); flex-shrink: 0; } .ac-final-team-card.is-winner .ac-final-team-total { font-size: 1.8rem; } .ac-final-breakdown-line { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; text-align: left; } .ac-final-players { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.04); } .ac-final-player { font-size: .78rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 3px 9px; color: var(--text); font-weight: 600; } .ac-final-player.bidder { background: var(--ac-team-bg); border-color: var(--ac-team-bd); color: var(--ac-team-color); font-weight: 800; } .ac-final-answer { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.05); } .ac-final-answer-label { font-size: .76rem; font-weight: 800; } .ac-final-answer.correct .ac-final-answer-label { color: #4cbe8a; } .ac-final-answer.incorrect .ac-final-answer-label { color: #f87171; } .ac-final-answer-text { font-size: .88rem; color: var(--text); line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; } /* Action buttons — horizontal row, single big primary if host */ .ac-final-actions { display: flex; gap: 8px; flex-direction: column; margin-top: 8px; } .ac-final-btn-play { width: 100%; font-size: 1rem; font-weight: 800; padding: 12px; } .ac-final-btn-home { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 11px; color: var(--muted); font-family: 'Cairo', sans-serif; font-size: .9rem; font-weight: 700; cursor: pointer; } /* ── Lobby settings (host options) ──────────────────────────────── */ .ac-settings-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; } .ac-settings-row { display: flex; flex-direction: column; gap: 6px; } .ac-settings-label { font-size: .8rem; color: var(--muted); font-weight: 700; } .ac-team-count-options { display: flex; gap: 6px; } .ac-team-count-btn { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 12px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: .9rem; font-weight: 800; cursor: pointer; transition: all .15s; } .ac-team-count-btn.active { background: linear-gradient(135deg, #7c3aed, #5b21b6); border-color: #7c3aed; color: #fff; } .ac-team-count-btn:disabled { opacity: .35; cursor: default; } .ac-arrange-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ac-arrange-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 11px 12px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: .88rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .ac-arrange-btn.active { background: linear-gradient(135deg, #7c3aed, #5b21b6); border-color: #7c3aed; color: #fff; } /* Team distributor (sj-style table view of the assignment) */ .ac-distrib-table { display: flex; flex-direction: column; gap: 8px; } .ac-distrib-team { background: var(--ac-team-bg); border: 1px solid var(--ac-team-bd); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .ac-distrib-team-name { font-size: .9rem; font-weight: 800; color: var(--ac-team-color); } .ac-distrib-members { display: flex; flex-wrap: wrap; gap: 6px; } .ac-distrib-pill { font-size: .78rem; padding: 4px 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--text); font-weight: 700; } .ac-distrib-empty { font-size: .78rem; color: var(--muted); font-style: italic; } .ac-shuffle-btn { width: 100%; background: linear-gradient(135deg, #7c3aed, #5b21b6); border: none; border-radius: 12px; color: #fff; font-family: 'Cairo', sans-serif; font-size: .92rem; font-weight: 800; padding: 11px 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .ac-shuffle-btn:active { transform: scale(.98); } .ac-shuffle-btn:disabled { opacity: .5; cursor: default; } /* Manual assign chip picker — tap a player → tap a team chip */ .ac-manual-list { display: flex; flex-direction: column; gap: 8px; } .ac-manual-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; } .ac-manual-name { flex: 1; font-size: .88rem; font-weight: 700; color: var(--text); } .ac-manual-team-chips { display: flex; gap: 4px; } .ac-manual-team-chip { width: 22px; height: 22px; border-radius: 50%; background: var(--ac-team-color); border: 2px solid transparent; cursor: pointer; opacity: .35; transition: all .15s; } .ac-manual-team-chip.active { opacity: 1; border-color: #fff; box-shadow: 0 0 12px var(--ac-team-glow); } /* ────────────────────────────────────────────────────────────────────── الجواب المضحك (FUNNY ANSWER) — game-specific in-game UI Color palette tuned for low eye-fatigue: deep muted rose + warm gold, no high-saturation hot pinks. Matches the lobby theme. ────────────────────────────────────────────────────────────────────── */ :root { --fa-pink: #a83b6a; --fa-pink-soft: #6b1f3f; --fa-pink-glow: rgba(168,59,106,.28); --fa-yellow: #d4a449; --fa-yellow-soft: #8b6914; } /* (Removed: .fa-status-bar — replaced by the universal ScoreBar at the bottom of every in-game screen, same as impostor.) ScoreBar adopts FA accent color (gold) when an FA screen is active. */ body:has(.screen.active[data-lobby-theme="tb"]) #score-bar .score-my-val, body:has(.screen.active[data-lobby-theme="tb"]) #score-bar .sb-code-val { color: #fbbf24; } body:has(.screen.active[data-lobby-theme="tb"]) #score-bar { background: linear-gradient(135deg, rgba(6,24,29,.95), rgba(7,16,24,.95)); border-color: rgba(6,182,212,.3); } body:has(.screen.active[data-lobby-theme="fa"]) #score-bar .score-my-val, body:has(.screen.active[data-lobby-theme="fa"]) #score-bar .sb-code-val { color: var(--fa-yellow); } body:has(.screen.active[data-lobby-theme="fa"]) #score-bar { border-top-color: rgba(168,59,106,.25); } /* Phase header (icon + title row at top of each phase) */ .fa-phase-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .fa-phase-icon { font-size: 1.6rem; } .fa-phase-name { font-size: 1.15rem; font-weight: 800; color: #fff; } /* Scenario card — main card showing the prompt */ .fa-scenario-card { background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(236,72,153,.06)); border: 2px solid rgba(236,72,153,.4); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; text-align: center; display: flex; flex-direction: column; gap: 8px; } .fa-scenario-mini { padding: 12px 14px; } .fa-scenario-label { font-size: .78rem; color: #f9a8d4; font-weight: 700; } .fa-scenario-text { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.55; } /* Section title (e.g. "هدف النقاط للفوز") */ .fa-section { margin-bottom: 16px; } .fa-section-title { font-size: .9rem; font-weight: 800; color: var(--fa-yellow); margin-bottom: 10px; } /* Target-score picker (lobby) */ .fa-target-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .fa-target-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(236,72,153,.25); color: var(--text); font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1rem; padding: 12px 0; border-radius: 10px; cursor: pointer; transition: all .15s; } .fa-target-btn.active { background: linear-gradient(135deg, var(--fa-pink), var(--fa-pink-soft)); border-color: var(--fa-pink); color: #fff; box-shadow: 0 0 12px var(--fa-pink-glow); } /* Info / spectator boxes */ .fa-info-box { background: rgba(255,255,255,.04); border: 1px solid rgba(236,72,153,.18); border-radius: 12px; padding: 12px 14px; font-size: .85rem; color: var(--text); text-align: center; display: flex; flex-direction: column; gap: 6px; } .fa-info-line { font-size: .82rem; line-height: 1.55; } /* Timer row (visible to players) */ .fa-timer-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 14px; padding: 10px 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(251,191,36,.25); border-radius: 12px; } .fa-timer-label { font-size: 1.1rem; } .fa-timer-value { font-size: 1.6rem; font-weight: 900; color: var(--fa-yellow); font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; } .fa-timer-suffix { font-size: .8rem; color: var(--muted); } .fa-timer-warn { color: #f87171 !important; text-shadow: 0 0 12px rgba(248,113,113,.5); animation: faPulse .9s ease-in-out infinite; } @keyframes faPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Writing phase — textarea card */ .fa-write-card { background: rgba(255,255,255,.03); border: 1px solid rgba(236,72,153,.2); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .fa-answer-input { width: 100%; min-height: 110px; background: rgba(0,0,0,.35); border: 1px solid rgba(236,72,153,.3); border-radius: 10px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; line-height: 1.55; padding: 12px 14px; resize: vertical; outline: none; transition: border-color .15s; } .fa-answer-input:focus { border-color: var(--fa-pink); } .fa-write-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .fa-char-count { font-size: .78rem; color: var(--muted); } /* Submitted-answer confirmation card */ .fa-submitted-card { background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.05)); border: 1px solid rgba(34,197,94,.4); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .fa-submitted-title { font-size: .9rem; font-weight: 800; color: #4ade80; } .fa-submitted-text { font-size: .95rem; color: #fff; line-height: 1.5; } .fa-submitted-hint { font-size: .78rem; color: var(--muted); margin-top: 4px; } /* Speaker phase — current speaker card */ .fa-speaker-card { background: linear-gradient(135deg, rgba(236,72,153,.15), rgba(236,72,153,.05)); border: 2px solid rgba(236,72,153,.45); border-radius: 14px; padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; } .fa-speaker-mine { border-color: var(--fa-yellow); background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(236,72,153,.10)); box-shadow: 0 0 16px rgba(251,191,36,.25); } .fa-speaker-name { font-size: .9rem; font-weight: 800; color: var(--fa-yellow); } .fa-speaker-answer { font-size: 1.1rem; line-height: 1.55; color: #fff; font-weight: 600; } /* Voting phase — option cards (anonymous) */ .fa-vote-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .fa-vote-card { background: rgba(255,255,255,.05); border: 1px solid rgba(168,59,106,.25); border-radius: 12px; padding: 14px 16px; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.55; text-align: right; cursor: pointer; transition: all .15s; } /* Hover effects ONLY on devices with a real pointer (mouse/trackpad). Phones report `hover: none` — without this guard, the hover style sticks after a tap and confuses the user about whether they selected a vote or not. */ @media (hover: hover) { .fa-vote-card:hover { border-color: var(--fa-pink); background: rgba(168,59,106,.08); transform: translateY(-1px); } } .fa-vote-card:active { transform: scale(.98); } .fa-vote-card.selected { border-color: var(--fa-yellow); background: linear-gradient(135deg, rgba(212,164,73,.15), rgba(168,59,106,.06)); box-shadow: 0 0 12px rgba(212,164,73,.25); } .fa-vote-card.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* Skip button selected state (mirrors the vote-card.selected look) */ .fa-skip-btn.selected { border-style: solid; border-color: var(--fa-yellow); background: linear-gradient(135deg, rgba(212,164,73,.15), rgba(168,59,106,.06)); color: var(--fa-yellow); box-shadow: 0 0 10px rgba(212,164,73,.2); } /* Skip button below voting grid */ .fa-skip-btn { width: 100%; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.18); color: var(--muted); font-family: 'Cairo', sans-serif; font-size: .9rem; font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; margin-top: 6px; } .fa-skip-btn:hover { color: var(--text); border-color: rgba(255,255,255,.3); } .fa-voted { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); color: #4ade80; font-weight: 700; } /* Round results — compact answer cards with voter chips. Tightened from the original generous layout that wasted vertical space — now each card is ~50% shorter so 4–5 fit on a phone without scrolling. */ .fa-results-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .fa-result-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 11px; } .fa-result-winner { background: linear-gradient(135deg, rgba(212,164,73,.15), rgba(168,59,106,.06)); border-color: var(--fa-yellow); box-shadow: 0 0 8px rgba(212,164,73,.18); } .fa-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .fa-result-author { font-size: .78rem; font-weight: 800; color: var(--fa-pink); } .fa-result-points { font-size: .95rem; font-weight: 900; color: var(--fa-yellow); } .fa-result-text { font-size: .88rem; color: #fff; line-height: 1.45; } .fa-result-voters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .fa-voter-chip { background: rgba(168,59,106,.15); border: 1px solid rgba(168,59,106,.3); border-radius: 999px; padding: 2px 8px; font-size: .68rem; color: #d68fab; } /* Leaderboard — bottom of round-results */ .fa-leaderboard { display: flex; flex-direction: column; gap: 6px; } .fa-rank-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 8px 12px; } .fa-rank-pos { font-weight: 800; font-size: .9rem; color: var(--fa-yellow); text-align: center; } .fa-rank-name { font-size: .92rem; font-weight: 600; color: #fff; } .fa-rank-score { font-weight: 800; font-size: 1rem; color: var(--fa-yellow); } /* Primary CTA button (used in lobby + results + speaker) */ .fa-primary-btn { width: 100%; background: linear-gradient(135deg, var(--fa-pink), var(--fa-pink-soft)); border: none; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; padding: 14px; border-radius: 12px; cursor: pointer; transition: transform .12s, box-shadow .15s; box-shadow: 0 4px 14px rgba(236,72,153,.35); } .fa-primary-btn:hover { box-shadow: 0 6px 18px rgba(236,72,153,.5); } .fa-primary-btn:active { transform: scale(.98); } .fa-primary-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .fa-listened-btn { background: linear-gradient(135deg, var(--fa-yellow), var(--fa-yellow-soft)); color: #1a1208; box-shadow: 0 4px 14px rgba(251,191,36,.35); } .fa-listened-btn:hover { box-shadow: 0 6px 18px rgba(251,191,36,.5); } /* Generic progress row */ .fa-progress-row { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; font-size: .82rem; color: var(--muted); } .fa-progress-value { font-weight: 800; color: var(--fa-yellow); } /* Loading placeholder */ .fa-loading { text-align: center; padding: 30px; color: var(--muted); font-size: .88rem; } /* ───────────────────────────────────────────────────────────────────── رهان الزمن (Time Bet) — full game styles ───────────────────────────────────────────────────────────────────── */ /* 6 team color tokens (extends AC palette: blue/red/green/yellow + new purple/orange) */ .tb-team-blue { --tb-team-color:#3b82f6; --tb-team-glow:rgba(59,130,246,.35); --tb-team-bg:rgba(59,130,246,.08); --tb-team-bd:rgba(59,130,246,.32); } .tb-team-red { --tb-team-color:#dc2626; --tb-team-glow:rgba(220,38,38,.35); --tb-team-bg:rgba(220,38,38,.08); --tb-team-bd:rgba(220,38,38,.32); } .tb-team-green { --tb-team-color:#16a34a; --tb-team-glow:rgba(22,163,74,.35); --tb-team-bg:rgba(22,163,74,.08); --tb-team-bd:rgba(22,163,74,.32); } .tb-team-yellow { --tb-team-color:#eab308; --tb-team-glow:rgba(234,179,8,.35); --tb-team-bg:rgba(234,179,8,.08); --tb-team-bd:rgba(234,179,8,.32); } .tb-team-purple { --tb-team-color:#9333ea; --tb-team-glow:rgba(147,51,234,.35); --tb-team-bg:rgba(147,51,234,.08); --tb-team-bd:rgba(147,51,234,.32); } .tb-team-orange { --tb-team-color:#ea580c; --tb-team-glow:rgba(234,88,12,.35); --tb-team-bg:rgba(234,88,12,.08); --tb-team-bd:rgba(234,88,12,.32); } /* ── Lobby settings (mirror AC pattern, tuned for TB) ── */ .tb-settings-card { display:flex; flex-direction:column; gap:14px; padding:14px; background:rgba(255,255,255,.03); border:1px solid rgba(6,182,212,.18); border-radius:14px; margin-top:10px; } .tb-settings-row { display:flex; flex-direction:column; gap:8px; } .tb-settings-label { font-size:.82rem; color:var(--muted); font-weight:700; } .tb-team-count-options, .tb-rounds-options, .tb-arrange-options { display:flex; gap:6px; flex-wrap:wrap; } .tb-team-count-btn, .tb-rounds-btn, .tb-arrange-btn { flex:1; min-width:60px; padding:8px 10px; font-size:.82rem; font-weight:700; background:rgba(255,255,255,.04); border:1px solid rgba(6,182,212,.18); color:var(--text); border-radius:10px; cursor:pointer; transition:all .2s ease; } .tb-team-count-btn.active, .tb-rounds-btn.active, .tb-arrange-btn.active { background:linear-gradient(135deg,#06b6d4,#0e7490); color:#fff; border-color:#06b6d4; box-shadow:0 0 12px rgba(6,182,212,.4); } .tb-team-count-btn:disabled, .tb-rounds-btn:disabled { opacity:.4; cursor:not-allowed; } @media (hover:hover) { .tb-team-count-btn:not(.active):not(:disabled):hover, .tb-rounds-btn:not(.active):not(:disabled):hover, .tb-arrange-btn:not(.active):hover { background:rgba(6,182,212,.1); } } .tb-distrib-table { display:flex; flex-direction:column; gap:8px; margin-top:6px; } .tb-distrib-team { background:var(--tb-team-bg); border:1px solid var(--tb-team-bd); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; } .tb-distrib-team-name { font-weight:800; font-size:.86rem; color:var(--tb-team-color); } .tb-distrib-members { display:flex; gap:6px; flex-wrap:wrap; } .tb-distrib-pill { padding:4px 10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:999px; font-size:.78rem; font-weight:600; color:var(--text); } .tb-distrib-empty { font-size:.76rem; color:var(--muted); font-style:italic; } .tb-shuffle-btn { margin-top:8px; padding:10px; background:rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.3); border-radius:10px; color:#67e8f9; font-weight:700; cursor:pointer; font-size:.85rem; } @media (hover:hover){.tb-shuffle-btn:hover{background:rgba(6,182,212,.2);}} .tb-manual-list { display:flex; flex-direction:column; gap:6px; } .tb-manual-row { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:rgba(255,255,255,.03); border-radius:10px; } .tb-manual-name { font-size:.86rem; font-weight:600; } .tb-manual-team-chips { display:flex; gap:5px; } .tb-manual-team-chip { width:22px; height:22px; border-radius:50%; cursor:pointer; background:transparent; border:2px solid var(--tb-team-color); transition:all .15s ease; } .tb-manual-team-chip.active { background:var(--tb-team-color); box-shadow:0 0 8px var(--tb-team-glow); } @media (hover:hover){.tb-manual-team-chip:hover{transform:scale(1.1);}} .tb-bidder-team-card { background:var(--tb-team-bg); border:1px solid var(--tb-team-bd); border-radius:12px; padding:14px; margin-top:6px; } .tb-bidder-team-head { display:flex; flex-direction:column; gap:4px; align-items:center; } .tb-bidder-team-name { font-weight:800; font-size:1rem; color:var(--tb-team-color); } .tb-bidder-status { font-size:.76rem; color:var(--muted); } .tb-spectator-note { text-align:center; color:var(--muted); font-size:.85rem; padding:14px; background:rgba(255,255,255,.03); border-radius:10px; } /* ── Phase wrappers ── */ .tb-screen-wrap { padding:20px 16px; max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:16px; } .tb-phase-head { display:flex; justify-content:space-between; align-items:center; gap:10px; } .tb-round-pill { padding:6px 14px; background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.3); border-radius:999px; font-size:.85rem; font-weight:800; color:#67e8f9; } .tb-round-pill-active { background:linear-gradient(135deg,#06b6d4,#0e7490); color:#fff; box-shadow:0 0 16px rgba(6,182,212,.5); } .tb-timer-pill { padding:6px 12px; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.35); border-radius:999px; font-size:.95rem; font-weight:800; color:#fbbf24; font-variant-numeric:tabular-nums; direction:ltr; display:inline-flex; align-items:center; gap:6px; } .tb-timer-icon { font-size:1.05em; } .tb-timer-unit { font-size:.7em; opacity:.85; } .tb-timer-bigger { padding:10px 18px; font-size:1.55rem; border-width:2px; border-color:rgba(251,191,36,.55); background:rgba(251,191,36,.14); box-shadow:0 0 20px rgba(251,191,36,.25); letter-spacing:1px; gap:8px; } .tb-timer-active { animation:tbTimerPulse 1s ease-in-out infinite; } @keyframes tbTimerPulse { 0%,100% { box-shadow:0 0 8px rgba(251,191,36,.3); } 50% { box-shadow:0 0 18px rgba(251,191,36,.7); } } /* ── Teaser ── */ .tb-teaser-card { padding:24px 20px; background:linear-gradient(155deg, rgba(6,24,29,.6), rgba(3,12,18,.6)); border:1px solid rgba(6,182,212,.25); border-radius:18px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; overflow:hidden; } .tb-teaser-card::before { content:''; position:absolute; top:-30px; right:-30px; width:140px; height:140px; background:radial-gradient(circle, rgba(6,182,212,.15) 0%, transparent 70%); pointer-events:none; } .tb-teaser-icon { font-size:3rem; } .tb-teaser-cat-pill { padding:4px 14px; background:rgba(6,182,212,.15); border:1px solid rgba(6,182,212,.4); border-radius:999px; font-weight:800; font-size:.88rem; color:#67e8f9; } .tb-teaser-difficulty { display:flex; gap:2px; font-size:1.1rem; } .tb-star { color:#fbbf24; } .tb-star-off { color:rgba(251,191,36,.25); } .tb-teaser-text { font-size:1.1rem; font-weight:700; text-align:center; color:#e2e8f0; } .tb-teaser-hint { font-size:.78rem; color:var(--muted); margin-top:4px; } .tb-teaser-mini { display:flex; gap:8px; align-items:center; justify-content:center; padding:6px 12px; background:rgba(6,182,212,.06); border-radius:10px; font-size:.8rem; } .tb-teaser-icon-mini { font-size:1.1rem; } .tb-teaser-cat-mini { font-weight:700; color:#67e8f9; } .tb-teaser-diff-mini { display:flex; gap:1px; font-size:.85rem; } /* ── Bidding ── */ .tb-bidding-headline { text-align:center; font-size:.95rem; color:var(--muted); font-weight:700; } .tb-time-dial { background:linear-gradient(155deg, rgba(6,182,212,.08), rgba(251,191,36,.05)); border:2px solid rgba(6,182,212,.4); border-radius:20px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:4px; box-shadow:0 0 24px rgba(6,182,212,.15), inset 0 1px 0 rgba(255,255,255,.05); } .tb-time-dial-label { font-size:.78rem; color:var(--muted); font-weight:700; } .tb-time-dial-value { font-size:3rem; font-weight:900; color:#fbbf24; font-variant-numeric:tabular-nums; direction:ltr; text-shadow:0 0 18px rgba(251,191,36,.3); display:inline-flex; align-items:baseline; gap:10px; } .tb-dial-unit { font-size:1.2rem; color:#67e8f9; } .tb-time-dial-by { font-size:.82rem; color:var(--muted); } .tb-bids-list { display:flex; flex-direction:column; gap:6px; } .tb-bids-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--tb-team-bg); border:1px solid var(--tb-team-bd); border-radius:10px; } .tb-bids-rank { font-size:.78rem; color:var(--muted); font-weight:800; min-width:18px; } .tb-bids-team { flex:1; font-weight:700; font-size:.88rem; color:var(--tb-team-color); } .tb-bids-time { font-weight:900; color:var(--tb-team-color); font-variant-numeric:tabular-nums; direction:ltr; font-size:1.05rem; display:inline-flex; align-items:baseline; gap:6px; } .tb-bids-unit { font-size:.78rem; opacity:.7; } .tb-bids-empty { padding:14px; text-align:center; color:var(--muted); font-size:.85rem; font-style:italic; } .tb-bid-input-card { padding:14px; background:rgba(6,182,212,.06); border:1px solid rgba(6,182,212,.25); border-radius:14px; display:flex; flex-direction:column; gap:10px; } .tb-bid-input-label { font-size:.85rem; font-weight:700; color:var(--text); } .tb-bid-input-row { display:flex; align-items:center; gap:8px; } .tb-bid-input { flex:1; padding:12px 14px; font-size:1.4rem; font-weight:800; background:rgba(0,0,0,.3); border:1px solid rgba(6,182,212,.3); border-radius:10px; color:#fbbf24; text-align:center; font-variant-numeric:tabular-nums; direction:ltr; } .tb-bid-input:focus { outline:none; border-color:#06b6d4; box-shadow:0 0 0 3px rgba(6,182,212,.2); } .tb-bid-input-unit { font-size:.85rem; color:var(--muted); font-weight:700; } .tb-bid-btn { padding:12px 20px; background:linear-gradient(135deg,#06b6d4,#0e7490); border:none; color:#fff; font-weight:800; border-radius:10px; cursor:pointer; font-size:1rem; box-shadow:0 4px 12px rgba(6,182,212,.3); transition:all .2s ease; } .tb-bid-btn:active { transform:scale(.96); } @media (hover:hover){.tb-bid-btn:hover{box-shadow:0 6px 20px rgba(6,182,212,.5);}} .tb-bid-input-hint { font-size:.74rem; color:var(--muted); } /* ── Execution (executor view) ── */ .tb-exec-banner { padding:14px 16px; background:linear-gradient(135deg, var(--tb-team-color), color-mix(in srgb, var(--tb-team-color) 70%, #000)); border-radius:12px; color:#fff; text-align:center; font-weight:800; box-shadow:0 4px 14px var(--tb-team-glow); } .tb-exec-banner-text { font-size:.95rem; } .tb-exec-banner-text b { font-size:1.15rem; } .tb-puzzle-card { padding:20px 18px; background:rgba(255,255,255,.03); border:2px solid rgba(6,182,212,.35); border-radius:18px; display:flex; flex-direction:column; gap:14px; box-shadow:0 8px 30px rgba(0,0,0,.4); } .tb-puzzle-cat-row { display:flex; gap:10px; align-items:center; justify-content:center; } .tb-puzzle-icon { font-size:1.5rem; } .tb-puzzle-cat { font-weight:700; color:#67e8f9; } .tb-puzzle-diff { display:flex; gap:1px; } .tb-puzzle-svg { display:flex; justify-content:center; padding:10px; background:rgba(0,0,0,.25); border-radius:10px; } .tb-puzzle-svg svg { max-width:100%; height:auto; } .tb-puzzle-scrambled { padding:14px; background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.3); border-radius:10px; text-align:center; font-size:1.6rem; font-weight:900; letter-spacing:6px; color:#fbbf24; direction:rtl; } .tb-puzzle-question { text-align:center; font-size:1.05rem; font-weight:700; color:#e2e8f0; line-height:1.5; } .tb-answer-card { display:flex; gap:8px; } .tb-answer-input { flex:1; padding:12px 14px; font-size:1.05rem; background:rgba(0,0,0,.3); border:1px solid rgba(6,182,212,.3); border-radius:10px; color:#fff; text-align:center; font-family:Cairo,sans-serif; } .tb-answer-input:focus { outline:none; border-color:#06b6d4; box-shadow:0 0 0 3px rgba(6,182,212,.2); } .tb-submit-btn { padding:12px 18px; background:linear-gradient(135deg,#22c55e,#16a34a); border:none; color:#fff; font-weight:800; border-radius:10px; cursor:pointer; font-size:.95rem; box-shadow:0 4px 12px rgba(34,197,94,.3); } .tb-submit-btn:active { transform:scale(.96); } .tb-mc-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; } .tb-mc-option { padding:14px 10px; background:rgba(255,255,255,.04); border:2px solid rgba(6,182,212,.2); border-radius:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; font-family:inherit; color:#fff; transition:all .15s ease; } .tb-mc-option.selected { background:rgba(6,182,212,.15); border-color:#06b6d4; box-shadow:0 0 16px rgba(6,182,212,.4); } @media (hover:hover){.tb-mc-option:not(.selected):hover{background:rgba(6,182,212,.08);}} .tb-mc-letter { width:26px; height:26px; border-radius:50%; background:rgba(6,182,212,.2); color:#67e8f9; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.85rem; } .tb-mc-text { font-size:1.4rem; font-weight:700; } .tb-confirm-btn { padding:14px; background:linear-gradient(135deg,#22c55e,#16a34a); border:none; color:#fff; font-weight:800; border-radius:12px; cursor:pointer; font-size:1rem; width:100%; box-shadow:0 4px 14px rgba(34,197,94,.3); } .tb-confirm-btn:disabled { background:rgba(255,255,255,.06); color:var(--muted); cursor:not-allowed; box-shadow:none; } .tb-confirm-btn:not(:disabled):active { transform:scale(.98); } /* ── Execution (spectator view) ── */ .tb-spec-card { padding:18px; background:linear-gradient(135deg, var(--tb-team-bg), rgba(0,0,0,.2)); border:2px solid var(--tb-team-bd); border-radius:14px; text-align:center; } .tb-spec-team-name { font-weight:800; font-size:1.15rem; color:var(--tb-team-color); } .tb-spec-text { font-size:.95rem; color:var(--muted); margin-top:6px; } .tb-spec-text b { color:#fbbf24; } .tb-stress-meter { display:flex; flex-direction:column; gap:8px; align-items:center; padding:12px; background:rgba(0,0,0,.25); border-radius:12px; } .tb-stress-track { width:100%; height:14px; background:rgba(255,255,255,.08); border-radius:7px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.4); } .tb-stress-fill { height:100%; width:0%; background:linear-gradient(90deg, #22c55e 0%, #fbbf24 50%, #dc2626 100%); transition:width .3s linear; } .tb-stress-label { font-size:.78rem; color:var(--muted); font-weight:700; letter-spacing:1px; } /* ── Results ── */ .tb-result-banner { padding:20px; border-radius:16px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; } .tb-result-success { background:linear-gradient(135deg, var(--tb-team-bg), rgba(34,197,94,.1)); border:2px solid var(--tb-team-color); box-shadow:0 0 32px var(--tb-team-glow); } .tb-result-fail { background:linear-gradient(135deg, var(--tb-team-bg), rgba(220,38,38,.1)); border:2px solid rgba(220,38,38,.5); } .tb-result-skipped { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); } .tb-result-icon { font-size:3.5rem; } .tb-result-title { font-size:1.3rem; font-weight:900; } .tb-result-sub { font-size:.92rem; color:var(--muted); } .tb-result-sub b { color:#fbbf24; font-variant-numeric:tabular-nums; direction:ltr; } .tb-result-points { font-size:1.6rem; font-weight:900; color:#fbbf24; font-variant-numeric:tabular-nums; direction:ltr; text-shadow:0 0 14px rgba(251,191,36,.4); } .tb-result-distrib { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:6px; padding:8px; background:rgba(255,255,255,.04); border-radius:10px; } .tb-result-distrib-item { padding:4px 10px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); border-radius:999px; font-size:.78rem; font-weight:700; color:#86efac; } .tb-result-correct { margin-top:6px; padding:8px 14px; background:rgba(255,255,255,.06); border-radius:10px; font-size:.92rem; } .tb-result-correct b { color:#67e8f9; } .tb-result-submitted { font-size:.82rem; color:var(--muted); } .tb-result-submitted s { color:#94a3b8; } .tb-next-round-btn { width:100%; padding:14px; margin-top:10px; background:linear-gradient(135deg,#06b6d4,#0e7490); border:none; color:#fff; font-weight:800; border-radius:12px; cursor:pointer; font-size:1.05rem; box-shadow:0 4px 14px rgba(6,182,212,.3); } .tb-next-round-btn:active { transform:scale(.98); } /* ── Scoreboard ── */ .tb-scoreboard { display:flex; flex-direction:column; gap:5px; padding:10px; background:rgba(255,255,255,.03); border:1px solid rgba(6,182,212,.18); border-radius:12px; } .tb-scoreboard-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--tb-team-bg); border:1px solid var(--tb-team-bd); border-radius:10px; } .tb-scoreboard-row.mine { box-shadow:0 0 0 1px var(--tb-team-color); } .tb-sb-name { font-weight:700; font-size:.92rem; color:var(--tb-team-color); } .tb-sb-me { font-size:.7rem; padding:2px 8px; background:rgba(6,182,212,.15); border:1px solid rgba(6,182,212,.3); border-radius:999px; color:#67e8f9; margin-right:6px; } .tb-sb-score { font-weight:900; color:var(--tb-team-color); font-variant-numeric:tabular-nums; direction:ltr; font-size:1.05rem; } /* ── Tiebreaker announce ── */ .tb-tiebreak-banner { padding:30px 20px; text-align:center; background:linear-gradient(135deg, rgba(220,38,38,.15), rgba(251,191,36,.1)); border:2px solid rgba(220,38,38,.4); border-radius:16px; display:flex; flex-direction:column; gap:10px; align-items:center; } .tb-tiebreak-icon { font-size:3.5rem; } .tb-tiebreak-title { font-size:1.6rem; font-weight:900; color:#fbbf24; } .tb-tiebreak-sub { font-size:.95rem; color:var(--muted); } /* ── Final scoreboard ── */ .tb-final-trophy { font-size:4rem; text-align:center; margin-top:20px; } .tb-final-winner-banner { padding:24px 20px; border-radius:18px; text-align:center; background:linear-gradient(135deg, var(--tb-team-bg), rgba(251,191,36,.1)); border:2px solid var(--tb-team-color); box-shadow:0 0 40px var(--tb-team-glow); display:flex; flex-direction:column; gap:8px; align-items:center; } .tb-final-winner-label { font-size:.85rem; color:var(--muted); font-weight:700; } .tb-final-winner-name { font-size:1.5rem; font-weight:900; color:var(--tb-team-color); } .tb-final-winner-members { font-size:.92rem; color:#e2e8f0; padding:6px 14px; background:rgba(0,0,0,.25); border-radius:999px; } .tb-final-winner-score { font-size:2rem; font-weight:900; color:#fbbf24; font-variant-numeric:tabular-nums; direction:ltr; text-shadow:0 0 16px rgba(251,191,36,.4); } .tb-final-others { display:flex; flex-direction:column; gap:6px; } .tb-final-other-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--tb-team-bg); border:1px solid var(--tb-team-bd); border-radius:12px; } .tb-final-rank { font-size:1.1rem; font-weight:900; color:var(--muted); min-width:22px; } .tb-final-other-info { flex:1; display:flex; flex-direction:column; gap:2px; } .tb-final-other-name { font-weight:700; color:var(--tb-team-color); } .tb-final-other-members { font-size:.76rem; color:var(--muted); } .tb-final-other-score { font-weight:900; color:var(--tb-team-color); font-variant-numeric:tabular-nums; direction:ltr; font-size:1.1rem; } .tb-final-actions { display:flex; flex-direction:column; gap:8px; margin-top:10px; } .tb-final-play-again { padding:14px; background:linear-gradient(135deg,#06b6d4,#0e7490); border:none; color:#fff; font-weight:800; border-radius:12px; cursor:pointer; font-size:1.05rem; box-shadow:0 4px 14px rgba(6,182,212,.4); } .tb-final-home { padding:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#e2e8f0; font-weight:700; border-radius:10px; cursor:pointer; font-size:.95rem; } /* ── Waiting overlay ── */ .tb-waiting-banner { padding:30px 20px; text-align:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; display:flex; flex-direction:column; gap:10px; align-items:center; } .tb-waiting-icon { font-size:3rem; } .tb-waiting-title { font-size:1.2rem; font-weight:900; color:#fbbf24; } .tb-waiting-sub { font-size:.92rem; color:var(--muted); } /* ════════════════════════════════════════════════════════════════════════ البروتوكول المكسور (BROKEN PROTOCOL) — game UI Acid green (#22c55e) accent, matrix/terminal aesthetic. The host screen is the TV anchor (large stage); player screens are personal terminals. ════════════════════════════════════════════════════════════════════════ */ :root { --bp-green: #22c55e; --bp-green-soft: #166534; --bp-green-glow: rgba(34,197,94,.32); --bp-amber: #eab308; --bp-red: #ef4444; --bp-bg-1: #0a1410; --bp-bg-2: #06140a; } /* Lobby player pill */ .bp-host-player-list, .bp-player-list-self { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .bp-player-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.22); font-size:.85rem; color:#d1fae5; font-weight:600; font-family:'Cairo',sans-serif; transition:transform .15s, background .2s; } .bp-pp-self { background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.45); } .bp-pp-disc { opacity:.55; } .bp-pp-left { opacity:.4; text-decoration:line-through; } .bp-pp-elim { opacity:.55; background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.30); } .bp-pp-lead { background:rgba(34,197,94,.22); border-color:rgba(34,197,94,.55); box-shadow:0 0 12px rgba(34,197,94,.20); } .bp-pp-lead-icon { font-size:.95rem; } .bp-pp-tag { font-size:.7rem; padding:2px 6px; border-radius:6px; background:rgba(239,68,68,.18); color:#fca5a5; } .bp-waiting-host { margin-top:12px; text-align:center; font-size:.92rem; color:#86efac; background:rgba(34,197,94,.06); border:1px solid rgba(34,197,94,.18); border-radius:12px; padding:14px 12px; } .bp-lobby-cta { margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:6px; } .bp-start-btn { width:100%; padding:14px 18px; background:linear-gradient(135deg,#22c55e,#15803d) !important; border:none !important; border-radius:14px; color:#06140a !important; font-weight:900; font-size:1.05rem; box-shadow:0 4px 18px rgba(34,197,94,.3); } .bp-start-btn[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; } .bp-lobby-hint { font-size:.74rem; color:rgba(255,255,255,.5); } /* Host stage (TV view). `flex-shrink: 0` ensures the stage doesn't get compressed inside the parent flex column — without it, tall content (10 player chips + status bar + banner) was sometimes clipped at the bottom of the viewport instead of being pushed below the fold for natural body-scroll. */ .bp-host-stage { display:flex; flex-direction:column; gap:14px; padding:14px; max-width:1200px; margin:0 auto; width:100%; box-sizing:border-box; flex-shrink:0; font-family:'Cairo',sans-serif; } .bp-host-banner { background:linear-gradient(160deg, rgba(34,197,94,.12) 0%, rgba(15,23,18,.6) 100%); border:1px solid rgba(34,197,94,.30); border-radius:18px; padding:18px 16px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; box-shadow:0 0 36px rgba(34,197,94,.06) inset, 0 4px 22px rgba(0,0,0,.4); } .bp-banner-reveal { background:linear-gradient(160deg, rgba(168,85,247,.14), rgba(15,23,18,.6)); border-color:rgba(168,85,247,.35); } .bp-banner-transition { background:linear-gradient(160deg, rgba(234,179,8,.14), rgba(15,23,18,.6)); border-color:rgba(234,179,8,.35); } .bp-banner-vote { background:linear-gradient(160deg, rgba(168,85,247,.14), rgba(15,23,18,.6)); border-color:rgba(168,85,247,.35); } .bp-banner-icon { font-size:2.4rem; } .bp-banner-title { font-size:1.4rem; font-weight:900; color:#86efac; } .bp-banner-sub { font-size:.92rem; color:rgba(255,255,255,.7); } .bp-host-header { display:flex; justify-content:space-between; align-items:center; gap:10px; } .bp-host-protocol-pill { padding:7px 14px; border-radius:999px; background:rgba(34,197,94,.14); color:#86efac; border:1px solid rgba(34,197,94,.3); font-family:'Courier New', monospace; font-weight:800; font-size:.85rem; letter-spacing:.05em; } .bp-host-timer-pill { padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.15); font-weight:800; font-size:.95rem; font-family:'Courier New', monospace; } .bp-timer-danger { color:var(--bp-red); animation:bp-pulse 1s infinite; } @keyframes bp-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} } /* Stability bar */ .bp-stability { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(34,197,94,.18); } .bp-stability-label { font-size:.82rem; color:#86efac; min-width:90px; font-weight:700; } .bp-stability-track { flex:1; height:14px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; position:relative; } .bp-stability-fill { height:100%; border-radius:99px; transition:width .6s ease-out, background .3s; box-shadow:0 0 18px currentColor; } .bp-stability-pct { font-weight:900; font-size:.9rem; min-width:55px; text-align:left; } /* Host fragments grid */ .bp-host-fragments { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } @media (max-width:720px){ .bp-host-fragments{grid-template-columns:1fr;} } .bp-host-frag { background:rgba(0,0,0,.45); border:1px solid rgba(34,197,94,.22); border-radius:14px; padding:13px; display:flex; flex-direction:column; gap:7px; } .bp-frag-letter { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#22c55e,#166534); color:#06140a; font-weight:900; font-size:1.2rem; font-family:'Courier New', monospace; } .bp-frag-label { font-size:.85rem; color:#86efac; font-weight:700; } .bp-frag-data { display:flex; flex-direction:column; gap:4px; font-family:'Courier New', monospace; font-size:.82rem; color:#bbf7d0; } .bp-frag-data span { padding:5px 8px; border-radius:8px; background:rgba(34,197,94,.06); border-left:2px solid rgba(34,197,94,.35); } .bp-host-lead { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:14px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.28); } .bp-lead-label { color:#86efac; font-size:.85rem; font-weight:700; } .bp-lead-name { color:#fff; font-size:1.05rem; font-weight:900; } /* Stage grid (role reveal) */ .bp-stage-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; } .bp-stage-card { padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); text-align:center; } .bp-stage-name { font-weight:800; font-size:.95rem; color:#fff; margin-bottom:4px; } .bp-stage-status { font-size:.78rem; color:rgba(255,255,255,.55); } .bp-stage-hint { text-align:center; font-size:.85rem; color:rgba(255,255,255,.55); } /* Player card (mobile terminal) */ .bp-player-card { background:linear-gradient(160deg,#0a1410,#06140a); border:1px solid rgba(34,197,94,.28); border-radius:18px; padding:24px 18px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; max-width:480px; margin:14px auto; width:100%; box-sizing:border-box; flex-shrink:0; font-family:'Cairo',sans-serif; box-shadow:0 4px 30px rgba(0,0,0,.5), 0 0 40px rgba(34,197,94,.06) inset; } .bp-role-engineer { border-color:rgba(34,197,94,.4); } .bp-role-virus { border-color:rgba(239,68,68,.5); background:linear-gradient(160deg,#1f0a0a,#0a0606); } .bp-role-emblem { font-size:3.4rem; } .bp-role-title { font-size:1.4rem; color:#fff; } .bp-role-sub { font-size:.92rem; color:rgba(255,255,255,.75); line-height:1.7; } .bp-role-loading { font-size:.78rem; color:#86efac; opacity:.7; margin-top:8px; } .bp-trans-icon { font-size:2.6rem; } .bp-trans-title { font-size:1.25rem; font-weight:900; color:#fbbf24; } .bp-trans-sub { font-size:.95rem; color:rgba(255,255,255,.7); } .bp-trans-stability { margin-top:6px; font-size:.85rem; color:rgba(255,255,255,.55); } /* Player protocol view */ .bp-player-protocol { display:flex; flex-direction:column; gap:10px; padding:12px; max-width:560px; margin:0 auto; width:100%; box-sizing:border-box; flex-shrink:0; font-family:'Cairo',sans-serif; } .bp-pp-top { display:flex; justify-content:space-between; align-items:center; } .bp-pp-stab-mini { text-align:center; font-size:.85rem; color:rgba(255,255,255,.7); } .bp-pp-fragment { background:rgba(0,0,0,.5); border:1px solid rgba(34,197,94,.32); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; } .bp-frag-letter-big { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#22c55e,#166534); color:#06140a; font-weight:900; font-size:2rem; font-family:'Courier New', monospace; align-self:center; box-shadow:0 0 22px rgba(34,197,94,.4); } .bp-frag-label-big { font-size:1rem; color:#86efac; font-weight:800; text-align:center; } .bp-frag-data-big { display:flex; flex-direction:column; gap:6px; font-family:'Courier New', monospace; font-size:.92rem; color:#bbf7d0; } .bp-data-line { padding:8px 10px; border-radius:9px; background:rgba(34,197,94,.08); border-left:3px solid rgba(34,197,94,.45); } .bp-pp-lead { text-align:center; padding:9px 12px; border-radius:12px; } .bp-pp-lead-yes { background:rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.45); color:#bbf7d0; font-weight:800; font-size:.92rem; padding:9px 12px; border-radius:12px; } .bp-pp-lead-no { color:rgba(255,255,255,.7); font-size:.88rem; padding:7px 10px; } .bp-pp-options { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; } @media (max-width:480px){ .bp-pp-options{grid-template-columns:1fr;} } .bp-option-btn { padding:13px 12px; border-radius:12px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.28); color:#fff; font-weight:700; font-size:.92rem; cursor:pointer; transition:all .15s; font-family:'Cairo',sans-serif; text-align:right; line-height:1.5; } .bp-option-btn:hover, .bp-option-btn:active { background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.55); transform:translateY(-1px); } .bp-pp-options-empty, .bp-pp-answered, .bp-pp-waiting { text-align:center; padding:14px; font-size:.92rem; color:rgba(255,255,255,.65); background:rgba(255,255,255,.04); border-radius:12px; } .bp-pp-answered { color:#86efac; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.25); } .bp-pp-virus-section { margin-top:8px; padding:14px; border-radius:14px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.28); display:flex; flex-direction:column; gap:10px; align-items:center; } .bp-pp-virus-label { font-size:.85rem; color:#fca5a5; font-weight:700; } .bp-corrupt-btn { padding:11px 22px; border-radius:12px; background:linear-gradient(135deg,#dc2626,#7f1d1d); border:1px solid rgba(239,68,68,.45); color:#fff; font-family:'Cairo',sans-serif; font-weight:900; font-size:.95rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all .15s; box-shadow:0 3px 14px rgba(239,68,68,.3); } .bp-corrupt-btn:hover:not([disabled]) { transform:translateY(-1px); box-shadow:0 4px 20px rgba(239,68,68,.4); } .bp-corrupt-btn[disabled], .bp-disabled { opacity:.45; cursor:not-allowed; box-shadow:none; } .bp-corrupt-cooldown { font-size:.8rem; padding:2px 7px; border-radius:8px; background:rgba(0,0,0,.35); transition:opacity .25s; } /* Corrupt modal */ .bp-corrupt-modal-bg { position:fixed; inset:0; z-index:9500; background:rgba(10,5,5,.78); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; } .bp-corrupt-modal { background:linear-gradient(160deg,#1f0a0a,#0a0606); border:1px solid rgba(239,68,68,.4); border-radius:18px; padding:22px 18px; max-width:340px; width:92%; display:flex; flex-direction:column; gap:14px; font-family:'Cairo',sans-serif; box-shadow:0 10px 60px rgba(0,0,0,.7); } .bp-corrupt-modal-title { font-weight:900; font-size:1.15rem; color:#fca5a5; text-align:center; } .bp-corrupt-modal-sub { font-size:.85rem; color:rgba(255,255,255,.6); text-align:center; } .bp-corrupt-modal-list { display:flex; flex-direction:column; gap:7px; } .bp-corrupt-target { padding:11px 14px; border-radius:11px; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.30); color:#fff; font-family:'Cairo',sans-serif; font-weight:700; font-size:.92rem; cursor:pointer; transition:all .15s; } .bp-corrupt-target:hover { background:rgba(239,68,68,.22); transform:translateX(-2px); } .bp-corrupt-cancel { padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); font-family:'Cairo',sans-serif; font-size:.85rem; cursor:pointer; } /* Voting */ .bp-vote-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; } .bp-vote-card { padding:14px 10px; border-radius:14px; text-align:center; background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.30); } .bp-vote-name { font-weight:900; color:#fff; margin-bottom:8px; } .bp-vote-progress { font-family:'Courier New',monospace; font-size:1.4rem; font-weight:900; color:#a78bfa; } .bp-vote-icon { font-size:2.6rem; } .bp-vote-title { font-size:1.25rem; font-weight:900; color:#a78bfa; } .bp-vote-sub { font-size:.88rem; color:rgba(255,255,255,.7); } .bp-vote-options { display:flex; flex-direction:column; gap:7px; width:100%; } .bp-vote-btn { padding:11px 14px; border-radius:11px; background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.30); color:#fff; font-family:'Cairo',sans-serif; font-weight:700; font-size:.92rem; cursor:pointer; transition:all .15s; } .bp-vote-btn:hover { background:rgba(168,85,247,.22); transform:translateY(-1px); } .bp-vote-skip { margin-top:8px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); font-family:'Cairo',sans-serif; font-size:.82rem; cursor:pointer; } .bp-vote-wait { font-size:.85rem; color:rgba(255,255,255,.6); } /* Ended */ .bp-host-ended { display:flex; flex-direction:column; gap:14px; padding:14px; max-width:1100px; margin:0 auto; width:100%; box-sizing:border-box; flex-shrink:0; font-family:'Cairo',sans-serif; } .bp-ended-banner { padding:24px; border-radius:20px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; } .bp-ended-win { background:linear-gradient(160deg, rgba(34,197,94,.18), rgba(15,23,18,.5)); border:1px solid rgba(34,197,94,.4); } .bp-ended-lose { background:linear-gradient(160deg, rgba(239,68,68,.18), rgba(15,23,18,.5)); border:1px solid rgba(239,68,68,.4); } .bp-ended-icon { font-size:3.5rem; } .bp-ended-title { font-size:1.6rem; font-weight:900; color:#fff; } .bp-ended-sub { font-size:1rem; color:rgba(255,255,255,.7); } .bp-ended-early { margin-top:6px; padding:6px 12px; border-radius:8px; background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.35); font-size:.82rem; color:#fde68a; } .bp-ended-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .bp-stat { text-align:center; padding:14px 8px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); } .bp-stat-val { font-size:1.6rem; font-weight:900; color:#86efac; } .bp-stat-lbl { font-size:.78rem; color:rgba(255,255,255,.5); } .bp-ended-reveal { padding:14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); } .bp-ended-reveal-title { font-weight:900; font-size:1rem; color:#86efac; margin-bottom:10px; text-align:center; } .bp-ended-reveal-list { display:flex; flex-direction:column; gap:5px; } .bp-reveal-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); } .bp-reveal-virus { background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.25); } .bp-reveal-icon { font-size:1.2rem; } .bp-reveal-name { flex:1; font-weight:700; color:#fff; } .bp-reveal-role { font-size:.85rem; color:rgba(255,255,255,.6); } .bp-ended-actions { display:flex; gap:8px; flex-wrap:wrap; } .bp-end-action { flex:1; min-width:140px; } .bp-ended-icon-big { font-size:3.5rem; } .bp-ended-result { font-size:1.6rem; font-weight:900; color:#fff; } .bp-ended-side { color:rgba(255,255,255,.7); font-size:.95rem; } .bp-ended-early-mini { margin-top:4px; padding:5px 11px; border-radius:8px; background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.35); font-size:.78rem; color:#fde68a; } .bp-ended-myrole { color:rgba(255,255,255,.6); font-size:.9rem; margin-top:2px; } /* ════════════════════════════════════════════════════════════════════ IMPOSTOR SKIN — purple/violet refresh for the in-game screens only (screen-word, screen-voting, screen-results). Scoped via .imp-skin so every other game's shared classes (.card, .vote-btn, .timer-fill, .scorecard .sc-winner, .tally-bar, etc.) keep their original gold look. Eye-comfortable lavender → violet palette matching the home card identity (#h-gc-imp). Concept/logic untouched — visual only. ════════════════════════════════════════════════════════════════════ */ /* 1. Re-route the accent variable so every `var(--accent)` reference — including the inline `style="color:var(--accent)"` spans throughout these screens — automatically picks up the new purple. Scoped to descendants of .imp-skin only; outside this scope the :root :--accent (gold #f5c518) is unchanged. */ .imp-skin { --accent: #a78bfa; --primary-gold: #a78bfa; } /* 2. Page header logos ("دورك" / "التصويت" / "النتائج") — soft lavender gradient instead of the gold one. */ .imp-skin .logo { background: linear-gradient(165deg, #ede9fe 0%, #c4b5fd 30%, #a78bfa 60%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 18px rgba(124,58,237,.4)); } /* 3. Frame card — switch from the generic dark-grey gradient to the deeper purple-tinted frame used by the newer games. */ .imp-skin .card { background: linear-gradient(165deg, #1a1030 0%, #15102a 50%, #180d2a 100%); border: 1px solid rgba(124,58,237,.28); box-shadow: 0 0 0 1px rgba(124,58,237,.06), 0 12px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); } .imp-skin .card::before { background: linear-gradient(90deg, transparent, rgba(167,139,250,.45), transparent); } /* 4. First-speaker banner — inline style hardcodes a gold-tinted bg (rgba(232,197,71,.12)) which doesn't pick up the var override. Force the purple wash here. */ .imp-skin #first-speaker-banner { background: rgba(124,58,237,.10) !important; border-color: rgba(124,58,237,.40) !important; } /* 5. Vote buttons — selected & multi-selected highlight states. */ .imp-skin .vote-btn.selected, .imp-skin .vote-btn.multi-selected { border-color: #a78bfa; background: linear-gradient(155deg, rgba(124,58,237,.18) 0%, rgba(124,58,237,.06) 100%); box-shadow: 0 0 20px rgba(124,58,237,.18), inset 0 1px 0 rgba(167,139,250,.18); } /* 6. Vote-confirm CTA — the big "تأكيد التصويت" button. Replaces the hardcoded gold/orange gradient with a violet gradient. */ .imp-skin .vote-confirm-btn { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 55%, #5b21b6 100%); color: #fff; box-shadow: 0 4px 22px rgba(124,58,237,.35); } .imp-skin .vote-confirm-btn:disabled { opacity: .35; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .imp-skin .vote-confirm-btn:hover:not(:disabled) { box-shadow: 0 4px 30px rgba(124,58,237,.55); transform: scale(1.02); } } /* 7. Timer bar — voting countdown. Override the gold-tinted track and the gold→orange fill gradient with a soft violet pair. */ .imp-skin .timer-bar { background: rgba(124,58,237,.12); } .imp-skin .timer-fill { background: linear-gradient(90deg, #c4b5fd, #7c3aed); box-shadow: 0 0 8px rgba(124,58,237,.35); } /* 8. Results scorecard — winner row swaps gold highlight for purple. */ .imp-skin .scorecard .sc-row.sc-winner { border-color: rgba(124,58,237,.35); background: linear-gradient(155deg, rgba(124,58,237,.10) 0%, rgba(124,58,237,.02) 100%); box-shadow: 0 0 16px rgba(124,58,237,.10); } /* 9. Vote tally bars (results — visualises votes per player). */ .imp-skin .tally-bar { background: #a78bfa; }