/* =================================================================== Flip 7 - Vengeance edition Shared design tokens + global resets. ================================================================ */ :root { /* Brand palette: ink + crimson + bone */ --c-ink: #0a0a14; --c-ink-2: #12121e; --c-ink-3: #1c1c2c; --c-ink-4: #2a2a3e; --c-bone: #f6f4ee; --c-bone-dim: #d8d4c8; --c-crimson: #d4213d; --c-crimson-2: #ff3155; --c-blood: #8a0e22; --c-amber: #f6b73c; --c-gold: #ffd166; --c-teal: #38d9a9; --c-violet: #9b6bff; --c-blue: #4dabff; --c-pink: #ff7eb6; --c-rose: #ff5b8a; /* Card colours by number band */ --num-low: #4dabff; /* 0-3 */ --num-mid: #38d9a9; /* 4-7 */ --num-high: #f6b73c; /* 8-10 */ --num-top: #ff5b8a; /* 11-12 */ /* Action card colours */ --act-freeze: #4dabff; --act-flip3: #f6b73c; --act-sc: #38d9a9; --act-mod: #9b6bff; /* Typography */ --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --f-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; /* Spacing & radius */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; /* Shadows */ --shadow-card: 0 8px 20px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25); --shadow-card-h: 0 14px 28px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.3); --shadow-glow-r: 0 0 30px rgba(212, 33, 61, .45); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--f-body); background: var(--c-ink); color: var(--c-bone); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select { font-family: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--f-display); letter-spacing: .02em; font-weight: 400; } .hidden { display: none !important; } code { font-family: var(--f-mono); font-size: .9em; } /* Backgrounds shared by every view ----------------------------------- */ .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 0%, rgba(212,33,61,.10), transparent 65%), radial-gradient(circle at 80% 100%, rgba(155,107,255,.08), transparent 60%), repeating-linear-gradient( 0deg, transparent 0, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px ), repeating-linear-gradient( 90deg, transparent 0, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px ); } .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(212,33,61,.18), transparent 70%); filter: blur(40px); animation: bgPulse 8s ease-in-out infinite alternate; } .bg-glow--host { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,33,61,.22), transparent 70%), radial-gradient(ellipse 40% 30% at 20% 80%, rgba(77,171,255,.15), transparent 70%), radial-gradient(ellipse 40% 30% at 80% 20%, rgba(155,107,255,.15), transparent 70%); transition: background .9s ease; } .bg-glow--player { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,33,61,.18), transparent 70%); transition: background .9s ease; } /* Per-game background tints: applied to when a game is active. Soft transition so the room shifts mood as the GM switches games. */ body.game-bg-flip7 .bg-glow { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,33,61,.32), transparent 65%), radial-gradient(ellipse 40% 30% at 18% 78%, rgba(155,107,255,.18), transparent 70%), radial-gradient(ellipse 40% 30% at 82% 22%, rgba(246,183,60,.14), transparent 70%) !important; } body.game-bg-crew .bg-glow { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(77,171,255,.30), transparent 65%), radial-gradient(ellipse 40% 30% at 18% 80%, rgba(56,217,169,.16), transparent 70%), radial-gradient(ellipse 40% 30% at 82% 18%, rgba(155,107,255,.12), transparent 70%) !important; } body.game-bg-uno .bg-glow { background: radial-gradient(ellipse 60% 50% at 20% 40%, rgba(211,45,45,.22), transparent 65%), radial-gradient(ellipse 60% 50% at 80% 40%, rgba(33,150,243,.20), transparent 65%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(76,175,80,.18), transparent 65%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(246,200,19,.20), transparent 65%) !important; animation: unoBgShift 18s ease-in-out infinite alternate; } @keyframes unoBgShift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(25deg); } } /* Same tints for the grid pattern overlay. */ body.game-bg-flip7 .bg-grid::after, body.game-bg-crew .bg-grid::after, body.game-bg-uno .bg-grid::after { content: ''; } @keyframes bgPulse { 0% { opacity: .55; } 100% { opacity: .85; } } /* Primary / secondary buttons --------------------------------------- */ .primary-btn { --bg: linear-gradient(135deg, var(--c-crimson-2), var(--c-blood)); background: var(--bg); color: var(--c-bone); font-family: var(--f-display); font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: .12em; padding: .9rem 1.6rem; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-card), 0 0 0 2px rgba(212,33,61,.35) inset; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; text-shadow: 0 1px 2px rgba(0,0,0,.4); position: relative; overflow: hidden; } .primary-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25), transparent 70%); transform: translateX(-120%); transition: transform .6s ease; pointer-events: none; } .primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-card-h), 0 0 0 2px rgba(212,33,61,.55) inset, 0 0 30px rgba(212,33,61,.5); } .primary-btn:hover:not(:disabled)::before { transform: translateX(120%); } .primary-btn:active:not(:disabled) { transform: translateY(0); } .primary-btn:disabled { opacity: .45; cursor: not-allowed; } .primary-btn small { display: block; font-family: var(--f-body); font-size: .65em; letter-spacing: .05em; opacity: .75; margin-top: .15rem; } .secondary-btn { background: rgba(255,255,255,.04); color: var(--c-bone-dim); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: .6rem 1rem; font-size: .9rem; letter-spacing: .04em; transition: background .12s ease, color .12s ease, border-color .12s ease; } .secondary-btn:hover { background: rgba(255,255,255,.08); color: var(--c-bone); border-color: rgba(255,255,255,.2); } /* Notify ribbon — thin, unobtrusive top-edge notifications. Replaces toasts for in-game events; toasts are reserved for hero moments like rename confirm, kicked, disconnects. ----- */ .notify-ribbon { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 240; width: min(560px, calc(100% - 2rem)); margin: 0 1rem; pointer-events: none; display: flex; flex-direction: column; align-items: center; } .notify-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: .55rem; background: rgba(20,20,32,.86); border: 1px solid rgba(255,255,255,.12); border-top: none; border-radius: 0 0 999px 999px; padding: .35rem .9rem .42rem; font-size: .82rem; color: var(--c-bone); line-height: 1; backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.4); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: notifyIn .25s cubic-bezier(.2,1.4,.5,1); transition: transform .22s ease, opacity .22s ease; } .notify-pill__icon { display: inline-flex; width: 1.2em; height: 1.2em; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; } .notify-pill__text { display: block; overflow: hidden; text-overflow: ellipsis; } .notify-pill--good { border-color: rgba(56,217,169,.45); background: rgba(20,40,32,.88); } .notify-pill--good .notify-pill__icon { color: var(--c-teal); } .notify-pill--warn { border-color: rgba(246,183,60,.5); background: rgba(40,30,20,.88); } .notify-pill--warn .notify-pill__icon { color: var(--c-amber); } .notify-pill--epic { border-color: rgba(155,107,255,.5); background: rgba(32,22,46,.88); } .notify-pill--epic .notify-pill__icon { color: var(--c-violet); } .notify-pill--bust { border-color: rgba(212,33,61,.55); background: rgba(46,18,24,.92); } .notify-pill--bust .notify-pill__icon { color: var(--c-crimson-2); } .notify-pill--info .notify-pill__icon { color: var(--c-blue); } .notify-pill--out { transform: translateY(-100%); opacity: 0; } @keyframes notifyIn { from { transform: translateY(-110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* When the help/connection chrome at the top would overlap. */ @media (max-width: 720px) { .player-body .notify-ribbon { top: 0; } .notify-pill { font-size: .76rem; padding: .3rem .75rem .36rem; } } /* Recent-events button + panel — opens the catch-up log. */ .log-toggle { position: fixed; bottom: 4.4rem; right: .8rem; z-index: 92; width: 38px; height: 38px; border-radius: 50%; background: rgba(20,20,32,.78); border: 1px solid rgba(255,255,255,.12); color: var(--c-bone-dim); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; backdrop-filter: blur(8px); cursor: pointer; transition: all .14s ease; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .log-toggle:hover { color: var(--c-bone); background: rgba(20,20,32,.92); transform: translateY(-1px); } .log-toggle__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--c-crimson); color: var(--c-bone); font-family: var(--f-display); font-size: .65rem; letter-spacing: .04em; padding: 0 5px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(212,33,61,.6); } @media (max-width: 720px) { .log-toggle { bottom: 4.4rem; right: .55rem; width: 32px; height: 32px; font-size: .9rem; } .log-toggle__badge { min-width: 15px; height: 15px; font-size: .55rem; } .has-gm-fab .log-toggle { bottom: 7.6rem; } } .log-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(12,12,20,.96); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -10px 30px rgba(0,0,0,.55); max-height: 60vh; overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(12px); animation: logSlideUp .26s cubic-bezier(.2,1.3,.5,1); } @keyframes logSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .log-panel__head { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); } .log-panel__head h3 { color: var(--c-bone); font-family: var(--f-display); letter-spacing: .15em; font-size: 1.05rem; } .log-panel__head button { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--c-bone-dim); font-size: .95rem; transition: all .14s ease; } .log-panel__head button:hover { background: rgba(212,33,61,.4); color: var(--c-bone); } .log-panel__list { list-style: none; overflow-y: auto; flex: 1; padding: .35rem .55rem .35rem; } .log-entry { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; padding: .4rem .55rem; border-radius: var(--r-sm); margin-bottom: .2rem; font-size: .82rem; color: var(--c-bone); background: rgba(255,255,255,.03); border-left: 3px solid transparent; align-items: baseline; } .log-entry--good { border-left-color: var(--c-teal); } .log-entry--warn { border-left-color: var(--c-amber); } .log-entry--epic { border-left-color: var(--c-violet); } .log-entry--bust { border-left-color: var(--c-crimson-2); } .log-entry--info { border-left-color: var(--c-blue); } .log-entry__icon { font-size: .92rem; line-height: 1; } .log-entry__body { color: var(--c-bone); line-height: 1.3; } .log-entry__time { font-family: var(--f-mono); color: var(--c-bone-dim); font-size: .68rem; letter-spacing: .03em; } .log-empty { color: var(--c-bone-dim); text-align: center; padding: 1.4rem .8rem; font-style: italic; font-size: .85rem; } .log-panel__hint { color: var(--c-bone-dim); font-size: .7rem; text-align: center; padding: .35rem .8rem .55rem; letter-spacing: .04em; } /* Toast --------------------------------------------------------- */ .toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 5000; display: flex; flex-direction: column; gap: .6rem; max-width: 320px; pointer-events: none; } .toast-stack--mobile { top: auto; bottom: 5rem; right: 1rem; left: 1rem; max-width: none; } .toast { background: rgba(20,20,32,.92); border: 1px solid rgba(255,255,255,.1); border-left: 4px solid var(--c-crimson); border-radius: var(--r-md); padding: .7rem 1rem; color: var(--c-bone); font-size: .92rem; box-shadow: var(--shadow-card); animation: toastIn .22s ease-out; pointer-events: auto; line-height: 1.35; } .toast.toast--good { border-left-color: var(--c-teal); } .toast.toast--warn { border-left-color: var(--c-amber); } .toast.toast--info { border-left-color: var(--c-blue); } .toast.toast--epic { border-left-color: var(--c-violet); } .toast--out { animation: toastOut .25s ease-in forwards; } @keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(20px); opacity: 0; } } /* Generic card visual ------------------------------------------- */ .card { --card-bg: linear-gradient(160deg, #f6f4ee 0%, #e6e2d5 100%); --card-ink: var(--c-ink); --card-accent: var(--c-ink-3); width: 64px; height: 90px; border-radius: 8px; background: var(--card-bg); color: var(--card-ink); box-shadow: var(--shadow-card); position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; border: 1px solid rgba(255,255,255,.1); } .card::after { content: ''; position: absolute; inset: 4px; border: 1.5px solid currentColor; border-radius: 6px; opacity: .15; pointer-events: none; } .card__pip { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; color: var(--card-accent); text-shadow: 0 2px 0 rgba(0,0,0,.06); z-index: 1; } .card__corner { position: absolute; font-family: var(--f-display); font-size: .85rem; color: var(--card-accent); line-height: 1; } .card__corner--tl { top: 4px; left: 6px; } .card__corner--br { bottom: 4px; right: 6px; transform: rotate(180deg); } /* Number-card colour bands */ .card[data-kind="number"][data-band="low"] { --card-accent: var(--num-low); } .card[data-kind="number"][data-band="mid"] { --card-accent: var(--num-mid); } .card[data-kind="number"][data-band="high"] { --card-accent: var(--num-high); } .card[data-kind="number"][data-band="top"] { --card-accent: var(--num-top); } /* Modifier cards */ .card[data-kind="modifier"] { --card-bg: linear-gradient(160deg, #2a1c4a 0%, #1a1230 100%); --card-ink: var(--c-bone); --card-accent: var(--c-violet); color: var(--c-bone); } .card[data-kind="modifier"]::after { border-color: var(--c-violet); opacity: .4; } /* Action cards */ .card[data-kind="action"] { --card-bg: linear-gradient(160deg, #102433 0%, #0a1622 100%); --card-ink: var(--c-bone); color: var(--c-bone); } .card[data-kind="action"][data-action="freeze"] { --card-accent: var(--act-freeze); } .card[data-kind="action"][data-action="flip_three"] { --card-accent: var(--act-flip3); } .card[data-kind="action"][data-action="second_chance"] { --card-accent: var(--act-sc); } .card[data-kind="action"]::after { border-color: currentColor; opacity: 0; } .card[data-kind="action"] .card__pip { font-size: 1.6rem; text-align: center; line-height: .9; color: var(--card-accent); } .card[data-kind="action"] .card__pip small { display: block; font-size: .55em; opacity: .8; } .card.card--sm { width: 48px; height: 68px; } .card.card--sm .card__pip { font-size: 1.8rem; } .card.card--sm .card__corner { font-size: .7rem; } .card.card--lg { width: 96px; height: 138px; } .card.card--lg .card__pip { font-size: 3.6rem; } .card.card--lg .card__corner { font-size: 1.2rem; } /* Pop-in animation for newly added cards */ .card.card--enter { animation: cardEnter .42s cubic-bezier(.2,1.4,.5,1) both; } @keyframes cardEnter { 0% { transform: translateY(-30px) rotate(-8deg) scale(.7); opacity: 0; } 60% { transform: translateY(4px) rotate(2deg) scale(1.04); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } } .card.card--flash { animation: cardFlash .45s ease-out; } @keyframes cardFlash { 0% { box-shadow: var(--shadow-card), 0 0 0 0 var(--card-accent); } 50% { box-shadow: var(--shadow-card-h), 0 0 0 6px rgba(212,33,61,.35); } 100% { box-shadow: var(--shadow-card), 0 0 0 0 transparent; } } /* Back of card (deck) */ .card-back { width: 100%; height: 100%; background: radial-gradient(circle at 50% 35%, rgba(212,33,61,.5), transparent 60%), repeating-linear-gradient(45deg, #2a0712, #2a0712 6px, #1a040c 6px, #1a040c 12px); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--c-bone); font-family: var(--f-display); border: 2px solid rgba(212,33,61,.6); } .card-back__7 { font-size: 2.4rem; color: var(--c-bone); text-shadow: 0 0 14px var(--c-crimson), 0 2px 0 rgba(0,0,0,.4); line-height: 1; } .card-back__label { font-size: .7rem; letter-spacing: .3em; opacity: .7; margin-top: 4px; } /* Utility */ .accent { color: var(--c-crimson-2); } .dim { color: var(--c-bone-dim); } /* Sound toggle button (host + phone) — bottom-left so it never overlaps the room code, QR area, ticker, or any header content. */ .sound-toggle { position: fixed; bottom: .8rem; left: .8rem; z-index: 90; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,20,32,.78); border: 1px solid rgba(255,255,255,.1); color: var(--c-bone-dim); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; backdrop-filter: blur(8px); cursor: pointer; transition: all .14s ease; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .sound-toggle:hover { color: var(--c-bone); background: rgba(20,20,32,.92); transform: translateY(-1px); } .sound-toggle.is-muted { opacity: .55; } /* Music toggle button — sits directly next to the sound toggle so the two audio controls read as a paired audio cluster. */ .music-toggle { position: fixed; bottom: .8rem; left: 3.2rem; z-index: 90; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,20,32,.78); border: 1px solid rgba(255,255,255,.1); color: var(--c-bone-dim); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; backdrop-filter: blur(8px); cursor: pointer; transition: all .14s ease; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .music-toggle:hover { color: var(--c-bone); background: rgba(20,20,32,.92); } .music-toggle.is-off { opacity: .55; } /* On phones the bottom of the screen is taken up by Hit/Stay/Draw action panels. Move the chrome row to the top-left edge in a compact form so it never overlaps gameplay buttons. */ @media (max-width: 720px) { .sound-toggle, .help-toggle, .music-toggle { width: 30px; height: 30px; bottom: auto; top: .45rem; font-size: .95rem; } .sound-toggle { left: .45rem; } .music-toggle { left: 2.45rem; } .help-toggle { left: 4.45rem; } /* Dot sits at left + 30px-width + clear gap from help-toggle (right edge at 6.325rem). Vertically centered against the 30px button: button center = top .45 + .9375 = ~1.39rem; dot center = top 1.0 + .3125 = ~1.31rem (close enough). */ .conn-status { bottom: auto; top: 1.0rem; left: 6.9rem; width: 10px; height: 10px; } /* Push the player view content down to clear the chrome row above. */ .player-body .player { padding-top: 2.6rem; } /* The disconnect banner already pushes everything below it, but when both are visible we don't want the chrome to sit on top of the banner text. Bump it down. */ .player-body .disconnect-banner ~ .sound-toggle, .player-body .disconnect-banner ~ .help-toggle, .player-body .disconnect-banner ~ .music-toggle { top: 2.6rem; } .player-body .disconnect-banner ~ .conn-status { top: 3.2rem; } } /* Connection status dot — sits to the right of the help-toggle so the four-element cluster (sound / music / help / conn) reads as one row with consistent gaps and no overlap. Vertically centered against the 36px buttons: button center = bottom .8 + 1.125 = 1.925rem dot center = bottom 1.55 + .375 = 1.925rem ✓ help-toggle right edge sits at 6.2 + 2.25 = 8.45rem; dot starts at 9.1rem giving a clear .65rem visual gap. */ .conn-status { position: fixed; bottom: 1.55rem; left: 9.1rem; z-index: 90; width: 12px; height: 12px; border-radius: 50%; background: var(--c-teal); box-shadow: 0 0 10px rgba(56,217,169,.75); transition: background .2s ease, box-shadow .2s ease; pointer-events: none; } .conn-status--reconnecting { background: var(--c-amber); box-shadow: 0 0 12px rgba(246,183,60,.8); animation: connPulse 1s ease-in-out infinite; } .conn-status--disconnected { background: var(--c-crimson); box-shadow: 0 0 12px rgba(212,33,61,.8); animation: connPulse 0.6s ease-in-out infinite; } @keyframes connPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } } /* Help / Rules toggle button — placed after the audio cluster (sound + music) so the two audio buttons sit shoulder-to-shoulder. */ .help-toggle { position: fixed; bottom: .8rem; left: 6.2rem; z-index: 90; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,20,32,.78); border: 1px solid rgba(255,255,255,.1); color: var(--c-bone-dim); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.15rem; backdrop-filter: blur(8px); cursor: pointer; transition: all .14s ease; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .help-toggle:hover { color: var(--c-bone); background: rgba(20,20,32,.92); transform: translateY(-1px); } /* Help / rules modal. The backdrop is intentionally translucent (and has no blur) so the game underneath stays visible — opening "How to play" mid-game shouldn't feel like the game vanished. */ .rules-modal { position: fixed; inset: 0; z-index: 280; background: rgba(5,5,10,.38); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: overlayIn .18s ease; } .rules-modal__inner { background: linear-gradient(160deg, var(--c-ink-2), var(--c-ink-3)); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); padding: 1.4rem 1.6rem; max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; color: var(--c-bone); position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 60px rgba(212,33,61,.15); } .rules-modal__x { position: absolute; top: .55rem; right: .65rem; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--c-bone); font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s ease, transform .12s ease; z-index: 2; } .rules-modal__x:hover { background: rgba(212,33,61,.5); transform: scale(1.05); } .rules-modal__hint { text-align: center; color: var(--c-bone-dim); font-size: .75rem; margin-top: .8rem; opacity: .7; } .rules-head { margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.08); } .rules-head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--c-crimson-2); letter-spacing: .04em; text-shadow: 0 0 18px rgba(212,33,61,.35); } .rules-head p { color: var(--c-bone-dim); font-size: .95rem; font-style: italic; margin-top: .35rem; } .rules-section { margin-bottom: 1rem; } .rules-section h3 { font-family: var(--f-display); color: var(--c-amber); letter-spacing: .12em; font-size: 1rem; margin-bottom: .35rem; } .rules-section ul { padding-left: 1.4rem; color: var(--c-bone); } .rules-section li { line-height: 1.5; margin-bottom: .25rem; font-size: .92rem; } .rules-modal__close { display: block; margin: 1.2rem auto 0; } .rules-empty { color: var(--c-bone-dim); text-align: center; padding: 2rem; } /* Connection-lost sticky banner */ .disconnect-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 220; background: linear-gradient(135deg, var(--c-blood), var(--c-crimson)); color: var(--c-bone); padding: .55rem 1rem; text-align: center; font-family: var(--f-display); letter-spacing: .12em; font-size: .95rem; box-shadow: 0 4px 14px rgba(212,33,61,.5); animation: bannerDrop .25s ease-out; } @keyframes bannerDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* =================================================================== GM "End game" controls — phone FAB at top-right, host bar at top-left. Both call the same play_again socket event after confirmation. ================================================================ */ .gm-quit-fab { position: fixed; top: .45rem; right: .45rem; z-index: 96; background: linear-gradient(135deg, var(--c-crimson-2), var(--c-blood)); color: var(--c-bone); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .35rem .8rem .35rem .6rem; font-family: var(--f-display); font-size: .72rem; letter-spacing: .14em; display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 4px 14px rgba(212,33,61,.45); backdrop-filter: blur(6px); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; } .gm-quit-fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,33,61,.6); } .gm-quit-fab:active { transform: translateY(0); } .gm-quit-fab__icon { font-size: .95rem; line-height: 1; } .gm-quit-fab__label { line-height: 1; } /* When the phone FAB is visible, push the game view content down so the top-right score / mission info isn't overlapped by the floating pill. */ body.player-body.has-gm-fab .view--game, body.player-body.has-gm-fab .view--crew-game, body.player-body.has-gm-fab .view--uno-game { padding-top: 1.9rem; } /* Same idea on the host TV: push game container down so the top-left FAB doesn't sit on top of the game header. */ body.host-body.has-host-fab .game, body.host-body.has-host-fab .crew-game, body.host-body.has-host-fab .uno-game { padding-top: 3.6rem; } /* Larger variant for the host TV (top-left). */ .gm-quit-fab--host { top: .8rem; left: .8rem; right: auto; padding: .55rem 1rem .55rem .85rem; font-size: .9rem; } .gm-quit-fab--host .gm-quit-fab__icon { font-size: 1.15rem; } /* Confirmation modal */ .gm-quit-modal { position: fixed; inset: 0; z-index: 295; background: rgba(5,5,10,.88); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: overlayIn .18s ease; } .gm-quit-modal__inner { background: linear-gradient(160deg, var(--c-ink-2), var(--c-ink-3)); border: 1px solid rgba(212,33,61,.4); border-radius: var(--r-xl); padding: 1.6rem; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 80px rgba(212,33,61,.15); } .gm-quit-modal__inner h3 { color: var(--c-crimson-2); font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: .05em; margin-bottom: .8rem; text-shadow: 0 0 18px rgba(212,33,61,.4); } .gm-quit-modal__inner p { color: var(--c-bone-dim); font-size: .95rem; line-height: 1.5; margin-bottom: 1.4rem; } .gm-quit-modal__actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; } .gm-quit-modal__confirm { background: linear-gradient(135deg, var(--c-crimson-2), var(--c-blood)); } /* QR helper widget (host only, visible during gameplay). Top-center to avoid the per-game room-code labels in the corners. */ .qr-helper { position: fixed; top: .6rem; right: .8rem; z-index: 95; } .qr-helper__pill { background: rgba(20,20,32,.78); border: 1px solid rgba(255,255,255,.1); color: var(--c-bone); border-radius: 999px; padding: .45rem .9rem .45rem .8rem; font-family: var(--f-display); letter-spacing: .12em; font-size: .85rem; display: flex; align-items: center; gap: .55rem; box-shadow: 0 6px 16px rgba(0,0,0,.4); cursor: pointer; backdrop-filter: blur(8px); } .qr-helper__pill:hover { background: rgba(20,20,32,.92); } .qr-helper__pill-icon { font-size: 1.05rem; } .qr-helper__pill-code { color: var(--c-crimson-2); font-size: 1.05rem; letter-spacing: .15em; } .qr-helper__pill-sub { color: var(--c-bone-dim); font-size: .7rem; letter-spacing: .1em; } .qr-helper__panel { position: absolute; top: 3rem; right: 0; background: linear-gradient(160deg, var(--c-ink-2), var(--c-ink-3)); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 1rem; box-shadow: 0 12px 36px rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; gap: .55rem; min-width: 220px; animation: cardEnter .25s ease-out; } .qr-helper__qr { background: var(--c-bone); padding: .6rem; border-radius: var(--r-md); } .qr-helper__qr img { width: 200px; height: auto; display: block; } .qr-helper__big-code { font-family: var(--f-display); color: var(--c-bone); letter-spacing: .25em; font-size: 2rem; line-height: 1; } .qr-helper__url { font-family: var(--f-mono); color: var(--c-bone-dim); font-size: .78rem; } .qr-helper__hint { color: var(--c-bone-dim); font-size: .8rem; text-align: center; } /* =================================================================== Profile / stats button + modal =================================================================== */ .profile-toggle { position: fixed; bottom: .8rem; right: .8rem; z-index: 90; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,20,32,.78); border: 1px solid rgba(255,255,255,.1); color: var(--c-bone-dim); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; backdrop-filter: blur(8px); cursor: pointer; transition: all .14s ease; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .profile-toggle:hover { color: var(--c-bone); background: rgba(20,20,32,.92); transform: translateY(-1px); } @media (max-width: 720px) { .profile-toggle { width: 30px; height: 30px; bottom: auto; top: .45rem; right: .45rem; font-size: .9rem; } } .profile-modal { position: fixed; inset: 0; z-index: 300; background: rgba(5,5,10,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: overlayIn .18s ease; } .profile-modal__inner { background: linear-gradient(160deg, var(--c-ink-2), var(--c-ink-3)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); padding: 1.6rem 1.4rem 1.2rem; max-width: 460px; width: 100%; color: var(--c-bone); position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 60px rgba(155,107,255,.15); max-height: 86vh; overflow-y: auto; text-align: center; } .profile-modal__inner h2 { color: var(--c-bone); font-family: var(--f-display); font-size: 2.4rem; letter-spacing: .05em; line-height: 1; } .profile-modal__name { color: var(--c-gold); font-weight: 600; margin: .35rem 0 1.1rem; letter-spacing: .03em; } .profile-modal__x { position: absolute; top: .55rem; right: .55rem; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,20,32,.6); color: var(--c-bone-dim); font-size: .95rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .profile-modal__x:hover { color: var(--c-bone); background: rgba(40,40,55,.92); } .profile-modal__grand { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; background: rgba(0,0,0,.25); border-radius: var(--r-lg); padding: .9rem .6rem; margin-bottom: 1.1rem; } .profile-modal__grand-row { display: flex; flex-direction: column; align-items: center; line-height: 1; } .profile-modal__grand-num { font-family: var(--f-display); font-size: 2.3rem; color: var(--c-gold); letter-spacing: .03em; } .profile-modal__grand-lbl { margin-top: .25rem; font-size: .7rem; letter-spacing: .15em; color: var(--c-bone-dim); text-transform: uppercase; } .profile-modal__games { display: grid; gap: .55rem; margin-bottom: .9rem; } .profile-game { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: .55rem .8rem; display: flex; align-items: center; gap: .7rem; font-size: .9rem; } .profile-game__icon { font-size: 1.3rem; line-height: 1; } .profile-game__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .profile-game__name { font-family: var(--f-display); letter-spacing: .04em; font-size: 1.1rem; color: var(--c-bone); } .profile-game__sub { color: var(--c-bone-dim); font-size: .72rem; letter-spacing: .03em; } .profile-game__stat { font-family: var(--f-mono); color: var(--c-teal); font-size: .95rem; font-weight: 600; } .profile-modal__hint { color: var(--c-bone-dim); font-size: .76rem; margin: .4rem 0 .9rem; } .profile-modal__reset { font-size: .8rem; padding: .35rem .9rem; opacity: .75; } .profile-modal__reset:hover { opacity: 1; } /* =================================================================== Reactions tray + floating emoji =================================================================== */ .react-tray { position: fixed; bottom: 1rem; /* Sit just to the left of the 📊 profile button (bottom-right) so both stay reachable on a desktop player browser. On phones the profile button moves to top-right, so this still looks clean. */ right: 3.6rem; z-index: 95; display: flex; align-items: center; flex-direction: row-reverse; gap: .4rem; pointer-events: none; } .react-tray > * { pointer-events: auto; } .react-tray__toggle { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, rgba(212,33,61,.85), rgba(155,107,255,.85)); color: var(--c-bone); box-shadow: 0 6px 18px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; transition: transform .14s ease; } .react-tray__toggle:hover { transform: scale(1.06); } .react-tray__toggle:active { transform: scale(.94); } .react-tray__toggle-icon { display: block; line-height: 1; } .react-tray__strip { display: flex; flex-wrap: nowrap; gap: .3rem; padding: .35rem .5rem; background: rgba(12,12,20,.85); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.55); max-width: 75vw; overflow: hidden; opacity: 0; /* Animate "out from the toggle" — strip lives to the toggle's left because the container is row-reverse. */ transform: translateX(20px) scale(.95); pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2,1.6,.4,1); } .react-tray.is-open .react-tray__strip { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } .react-emoji { font-size: 1.55rem; line-height: 1; padding: .25rem .35rem; border-radius: 999px; transition: transform .12s ease, background .14s ease; } .react-emoji:hover { background: rgba(255,255,255,.08); transform: scale(1.15); } .react-emoji:active { transform: scale(.85); } @media (max-width: 720px) { .react-tray { bottom: .6rem; right: .6rem; } .react-tray__toggle { width: 40px; height: 40px; font-size: 1.15rem; } .react-emoji { font-size: 1.35rem; padding: .2rem .3rem; } } .react-layer { position: fixed; inset: 0; pointer-events: none; z-index: 98; overflow: hidden; } .react-layer--host { z-index: 65; } .react-bubble { position: absolute; transform: translate(-50%, 0); font-size: 2.6rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,.55)); animation: reactFloat 2.2s cubic-bezier(.2,.7,.3,1) forwards; text-shadow: 0 0 18px rgba(255,255,255,.25); } .react-bubble__name { display: block; font-family: var(--f-display); font-size: .8rem; letter-spacing: .12em; color: var(--c-bone); background: rgba(12,12,20,.7); padding: .12rem .55rem; border-radius: 999px; margin-top: .25rem; text-align: center; text-shadow: none; white-space: nowrap; } @keyframes reactFloat { 0% { opacity: 0; transform: translate(-50%, 28px) scale(.4); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); } 35% { transform: translate(-50%, -16px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -140px) scale(.95) rotate(-6deg); } } /* =================================================================== Winner-slam overlay flourish =================================================================== */ .overlay-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: .9rem; } .winner-slam { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: .9rem; animation: winnerSlam .85s cubic-bezier(.18,1.7,.3,1) forwards; transform-origin: center; } .winner-slam__crown { font-size: 2.6rem; line-height: 1; animation: crownBob 1.6s ease-in-out infinite; } .winner-slam__title { font-family: var(--f-display); font-size: clamp(2.6rem, 8vw, 4.4rem); letter-spacing: .15em; background: linear-gradient(180deg, #fff7c2 0%, #f6c813 55%, #ff8c2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 36px rgba(246,200,19,.45); line-height: 1; } @keyframes winnerSlam { 0% { transform: scale(2.2) rotate(-8deg); opacity: 0; filter: blur(8px); } 25% { transform: scale(.86) rotate(2deg); opacity: 1; filter: blur(0); } 55% { transform: scale(1.06) rotate(-1deg); } 78% { transform: scale(.97); } 100% { transform: scale(1); } } @keyframes crownBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } } /* =================================================================== Rematch button extra polish (uses .primary-btn base) =================================================================== */ .primary-btn, .secondary-btn { transition: transform .12s ease, box-shadow .14s ease, background .15s ease; } .primary-btn:active { transform: scale(.97); } /* When the GM-fab is also visible, the reactions tray needs to dodge it on the phone so they don't overlap. */ .has-gm-fab .react-tray { bottom: 4.4rem; } @media (max-width: 720px) { .has-gm-fab .react-tray { bottom: 4rem; } }