/* online_api_menu.css — Liquid Glass theme ────────────────────────────────────────────────────────────────── Translucent frosted-glass panels floating on a teal→green gradient. Interactive elements (buttons, inputs) use spring transitions so clicks feel tactile. JS in online_api_menu.js adds drag-deform on buttons. Designed for macOS first; Windows variant will hook off the `.os-win` class added to . */ :root { /* Gradient backdrop */ --bg-1: #146b6f; --bg-2: #2dd57a; /* Glass */ --glass-bg: rgba(255, 255, 255, 0.10); --glass-bg-hi: rgba(255, 255, 255, 0.18); --glass-border: rgba(255, 255, 255, 0.22); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Text */ --text: rgba(255, 255, 255, 0.96); --text-dim: rgba(255, 255, 255, 0.60); --text-mute: rgba(255, 255, 255, 0.40); /* Accent (the green Sign in button) */ --accent: rgba( 71, 215, 130, 0.90); --accent-hi: rgba( 95, 230, 145, 0.95); /* Accent colour for the active tab — the cyan/sky-blue tint that icons and labels adopt while the bubble is over them. Matches the macOS system "Vivid" accent the user is targeting. */ --accent-cyan: #5DC5F0; /* State colors */ --danger: rgba(255, 90, 90, 0.95); --warning: rgba(245, 175, 70, 0.95); --success: rgba( 71, 215, 130, 0.95); --radius-pill: 999px; --radius: 24px; --radius-sm: 14px; /* Spring transitions — overshoot on release for the "liquid" feel */ --spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --spring-fast: 220ms cubic-bezier(0.34, 1.56, 0.64, 1); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; font-family: var(--sans); font-size: 16px; color: var(--text); background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%); background-attachment: fixed; background-size: cover; /* Light diagonal sheen overlay */ background-image: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04) 100%), linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%); } /* ── Host overlay ─────────────────────────────────────────────────── */ .api-menu-host { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: transparent; } .api-menu-host:empty { display: none; } /* ── Common screen wrapper ───────────────────────────────────────── */ .ap-screen { min-height: 100vh; max-width: 560px; margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 24px; justify-content: center; box-sizing: border-box; } /* Make menu-type screens lay out more like the auth card */ .ap-screen > h1.ap-title, .ap-screen > .ap-body, .ap-screen > .ap-menu, .ap-screen > .ap-cols, .ap-screen > .ap-field, .ap-screen > .ap-confirm-row, .ap-screen > .ap-form-error, .ap-screen > .ap-footer, .ap-screen > .ap-hint, .ap-screen > .ap-textarea, .ap-screen > .ap-line, .ap-screen > .ap-counter, .ap-screen > p { /* Each direct child sits inside the glass card */ position: relative; } /* Glass-card wrapper for form / info screens */ .ap-form, .ap-info, .ap-confirm, .ap-input { background: var(--glass-bg); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); padding: 40px 36px; gap: 18px; } /* For menus we wrap differently — title on the gradient, options as individual glass pills */ .ap-title { font-size: 2rem; font-weight: 600; margin: 0; line-height: 1.1; letter-spacing: -0.01em; display: flex; align-items: center; gap: 14px; } .ap-title-icon { width: 44px; height: 44px; flex-shrink: 0; } .ap-body { display: flex; flex-direction: column; gap: 8px; } .ap-line { margin: 0; line-height: 1.5; color: var(--text); } /* ── Two-column layout for menus with sidebar ────────────────────── */ .ap-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; flex: 0 1 auto; } .ap-cols:not(:has(.ap-sidebar)) { grid-template-columns: 1fr; } .ap-main { display: flex; flex-direction: column; gap: 14px; } .ap-sidebar { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 18px 22px; color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; box-shadow: var(--glass-shadow); } /* ── Menu items ──────────────────────────────────────────────────── */ .ap-menu { display: flex; flex-direction: column; gap: 8px; } .ap-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 22px; background: var(--glass-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: var(--text); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; transition: transform var(--spring), background var(--spring-fast), border-color var(--spring-fast); box-shadow: var(--glass-shadow); user-select: none; } .ap-item:hover:not(.disabled), .ap-item.focused { background: var(--glass-bg-hi); border-color: rgba(255, 255, 255, 0.40); } /* Press / drag deform is handled by makeLiquid() in JS — see online_api_menu.js. No CSS :active rule here, since the JS sets an inline transform that we don't want CSS to fight with. */ .ap-item.disabled { opacity: 0.45; cursor: not-allowed; } .ap-item-num { color: var(--text-mute); font-variant-numeric: tabular-nums; min-width: 1.5em; } .ap-item-label { font-weight: 500; } .ap-item-hint { color: var(--text-dim); font-size: 0.82rem; } /* ── Footer + hint line ──────────────────────────────────────────── */ .ap-footer { color: var(--text-dim); font-size: 0.85rem; margin-top: 4px; } .ap-hint { color: var(--text-mute); font-size: 0.78rem; margin-top: 2px; } /* ── Info screen ─────────────────────────────────────────────────── */ .ap-info .ap-body p { color: var(--text); } .ap-ok { align-self: flex-start; margin-top: 8px; padding: 12px 28px; background: var(--accent); color: white; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-pill); font-family: var(--mono); font-size: 0.95rem; cursor: pointer; transition: transform var(--spring), background var(--spring-fast); user-select: none; box-shadow: 0 2px 12px rgba(46, 213, 115, 0.30); } .ap-ok:hover { background: var(--accent-hi); } /* ── Splash screen ───────────────────────────────────────────────── */ .ap-splash { align-items: center; justify-content: center; text-align: center; } .ap-splash .ap-title { font-size: 1.4rem; font-weight: 500; } /* ── Confirm dialog ──────────────────────────────────────────────── */ .ap-confirm { align-items: center; text-align: center; } .ap-confirm-prompt { font-size: 1.15rem; max-width: 480px; margin: 0 0 12px 0; line-height: 1.4; } .ap-confirm-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Form fields ─────────────────────────────────────────────────── */ .ap-field { display: flex; flex-direction: column; gap: 6px; } .ap-field-label { font-size: 0.82rem; color: var(--text-dim); font-weight: 500; padding-left: 6px; } .ap-field-input { width: 100%; padding: 16px 22px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: var(--text); font: inherit; font-size: 1rem; outline: none; transition: background var(--spring-fast), border-color var(--spring-fast); box-shadow: var(--glass-shadow); } .ap-field-input::placeholder { color: var(--text-mute); } .ap-field-input:focus { background: var(--glass-bg-hi); border-color: rgba(255, 255, 255, 0.45); } textarea.ap-field-input { resize: vertical; min-height: 90px; border-radius: var(--radius-sm); font-family: inherit; } .ap-field-hint { font-size: 0.78rem; color: var(--text-mute); padding-left: 8px; } .ap-form-error { margin: 0; color: var(--danger); font-size: 0.85rem; padding-left: 6px; } /* ── Buttons (Yes / No / submit) ─────────────────────────────────── */ .ap-yes, .ap-no { padding: 12px 32px; border-radius: var(--radius-pill); font: inherit; font-family: var(--mono); font-size: 0.95rem; cursor: pointer; transition: transform var(--spring), background var(--spring-fast), border-color var(--spring-fast); user-select: none; } .ap-yes { background: var(--accent); color: white; border: 1px solid rgba(255, 255, 255, 0.30); box-shadow: 0 2px 12px rgba(46, 213, 115, 0.30); } .ap-yes:hover, .ap-yes.focused { background: var(--accent-hi); } .ap-no { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--text); border: 1px solid var(--glass-border); } .ap-no:hover, .ap-no.focused { background: var(--glass-bg-hi); border-color: rgba(255, 255, 255, 0.40); } /* The drag-deform JS adds `liquid-pressed` while a pointer is held */ .liquid-pressed { transition: none !important; /* follow the pointer instantly */ } /* ── Multiline textarea panel ────────────────────────────────────── */ .ap-textarea { width: 100%; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text); padding: 14px 16px; font: inherit; font-size: 1rem; font-family: var(--sans); resize: vertical; min-height: 110px; } .ap-textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); } .ap-counter { text-align: right; color: var(--text-mute); font-size: 0.78rem; margin-top: -6px; } /* ── Color tags ──────────────────────────────────────────────────── */ .c-red { color: var(--danger); } .c-green { color: var(--success); } .c-yellow { color: var(--warning); } .c-blue { color: #80c4ff; } .c-cyan { color: #80e0ff; } .c-magenta { color: #c8a0ff; } .c-white { color: var(--text); } .c-gray, .c-dim { color: var(--text-dim); } .c-bold { font-weight: 700; } /* ── Connection status pill (bottom-right) ───────────────────────── */ #conn-status { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; background: var(--glass-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); font-family: var(--mono); font-size: 0.85rem; color: var(--text); box-shadow: var(--glass-shadow); user-select: none; } .conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warning); flex-shrink: 0; } #conn-status.connected .conn-dot { background: var(--success); box-shadow: 0 0 8px rgba(71,215,130,0.6); } #conn-status.connecting .conn-dot { background: var(--warning); animation: pulse-dot 1.2s ease-in-out infinite; } #conn-status.offline .conn-dot { background: var(--danger); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Mobile / small screens ──────────────────────────────────────── */ @media (max-width: 640px) { .ap-screen { padding: 24px 16px; gap: 16px; } .ap-form, .ap-info, .ap-confirm, .ap-input { padding: 28px 22px; } .ap-cols { grid-template-columns: 1fr; } .ap-title { font-size: 1.6rem; } .ap-title-icon { width: 36px; height: 36px; } .ap-item-hint { display: none; } #conn-status { bottom: 12px; right: 12px; } } /* ── Reduced motion (respects user preference) ────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.05s !important; animation-duration: 0.05s !important; } } /* ── Shell layout ──────────────────────────────────────────────────── The post-login app shell. Lives in at z-index 0; the api-menu-host (z-index 100) overlays it for modals (forms, confirms). Composed of: .shell-root fixed full-viewport flex container .shell-grid the main 3-column grid (left | mid | right) .panel-left lobby browser OR lobby room (always shown) .panel-mid game chat column (only in_lobby state) .panel-right social tabs sidebar (collapsible) .shell-footer bottom toolbar (Home / Settings / Search) */ .shell-root { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 24px; gap: 16px; box-sizing: border-box; pointer-events: auto; } .shell-grid { flex: 1; display: grid; gap: 16px; min-height: 0; /* default: lobby browser — left panel takes everything, no mid panel */ grid-template-columns: 1fr 320px; } .shell-grid.in-lobby { /* lobby room state — three columns */ grid-template-columns: 1.1fr 1fr 320px; } .shell-grid.sidebar-collapsed { /* right panel hidden — left (or left+mid) expands */ grid-template-columns: 1fr; } .shell-grid.sidebar-collapsed.in-lobby { grid-template-columns: 1.2fr 1fr; } /* ── Panels (glass cards) ────────────────────────────────────────── */ .shell-panel { background: var(--glass-bg); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; display: flex; flex-direction: column; } .panel-mid { display: none; } .shell-grid.in-lobby .panel-mid { display: flex; } .shell-grid.sidebar-collapsed .panel-right { display: none; } /* ── Panel internals: padded content + sticky footer rows ────────── */ .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; gap: 12px; } .panel-body { flex: 1; overflow-y: auto; padding: 0 16px 16px 16px; } .panel-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; gap: 10px; align-items: center; } /* ── Header pills (lobby code, title, etc.) ──────────────────────── */ .header-pill { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 8px 16px; font-family: var(--mono); font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 8px; } /* ── Round icon button (refresh, create, eye, etc.) ──────────────── */ .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; padding: 0; flex-shrink: 0; transition: transform var(--spring), background var(--spring-fast); user-select: none; } .icon-btn:hover { background: var(--glass-bg-hi); } .icon-btn svg { width: 22px; height: 22px; } /* ── Lobby browser pills (Style A) ───────────────────────────────── */ .lobby-list { display: flex; flex-direction: column; gap: 8px; padding: 4px; } .lobby-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: var(--text); cursor: pointer; text-align: left; font: inherit; font-size: 1rem; transition: transform var(--spring), background var(--spring-fast), border-color var(--spring-fast); user-select: none; } .lobby-row:hover:not(.full) { background: var(--glass-bg-hi); border-color: rgba(255,255,255,0.40); } .lobby-row.full { opacity: 0.50; cursor: not-allowed; } .lobby-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .lobby-text { display: flex; flex-direction: column; min-width: 0; } .lobby-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobby-meta { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobby-count { font-family: var(--mono); font-size: 0.85rem; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent); color: white; box-shadow: 0 0 8px rgba(46,213,115,0.30); } .lobby-row.full .lobby-count { background: rgba(255,255,255,0.15); color: var(--text-dim); box-shadow: none; } .lobby-row.almost .lobby-count { background: var(--warning); box-shadow: 0 0 6px rgba(245,175,70,0.30); } /* ── Empty / loading states for the lobby browser ────────────────── */ .empty-state { text-align: center; padding: 60px 24px; color: var(--text-dim); } .empty-state .empty-title { font-size: 1.15rem; color: var(--text); margin-bottom: 8px; } /* ── Lobby room — member scatter ─────────────────────────────────── */ .member-scatter { position: relative; flex: 1; min-height: 280px; padding: 20px; } .member { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; user-select: none; transition: transform var(--spring); } .member-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.30); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: rgba(0,0,0,0.65); border: 2px solid transparent; box-shadow: 0 4px 16px rgba(0,0,0,0.10); position: relative; } .member.is-host .member-avatar { border-color: var(--accent); } .member.is-ready .member-avatar::after { content: "✓"; position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; border: 2px solid var(--bg-2); } .member.is-empty .member-avatar { background: transparent; border: 2px dashed rgba(255,255,255,0.30); color: rgba(255,255,255,0.35); } .member-name { font-size: 0.9rem; color: var(--text); font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.10); } .member.is-host .member-name::before { content: "👑 "; } /* ── Member popover (host actions) ───────────────────────────────── */ .popover-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.10); backdrop-filter: blur(2px); } .popover { background: var(--glass-bg); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); padding: 24px; min-width: 280px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; align-items: center; } /* ── Lobby room action bar ──────────────────────────────────────── */ .action-bar { display: flex; gap: 10px; flex-wrap: wrap; } .btn-primary, .btn-danger, .btn-neutral { padding: 12px 20px; border-radius: var(--radius-pill); font: inherit; font-family: var(--mono); font-size: 0.92rem; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); display: inline-flex; align-items: center; gap: 8px; transition: transform var(--spring), background var(--spring-fast); user-select: none; } .btn-primary { background: var(--accent); color: white; box-shadow: 0 2px 12px rgba(46,213,115,0.30); } .btn-primary:hover { background: var(--accent-hi); } .btn-danger { background: rgba(220, 70, 70, 0.85); color: white; box-shadow: 0 2px 12px rgba(220,70,70,0.30); } .btn-danger:hover { background: rgba(235, 90, 90, 0.95); } .btn-neutral { background: var(--glass-bg); color: var(--text); } .btn-neutral:hover { background: var(--glass-bg-hi); } .btn-primary[disabled], .btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; } .btn-icon { width: 18px; height: 18px; } /* ── Right sidebar: tabs row + content ───────────────────────────── */ .tabs-row { display: flex; align-items: center; gap: 4px; padding: 10px; position: relative; /* anchor for the sliding indicator */ } .tab-btn { flex: 1; padding: 12px 8px 8px 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--text); cursor: pointer; font: inherit; font-size: 0.72rem; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: color var(--spring-fast), background-color 0.18s ease, transform 0.10s cubic-bezier(0.34, 1.1, 0.4, 1); user-select: none; position: relative; /* sit above the indicator */ z-index: 1; } .tab-btn:hover { color: rgba(255,255,255,1); } /* Hover preview — when the cursor is over an inactive tab, a very subtle background tints the area so the user gets a "this is tappable" affordance. Doesn't apply to the active tab (the bubble already shows it) or to the sidebar toggle. */ .tab-btn:not(.active):not(.tab-toggle-sidebar):hover { background: rgba(255, 255, 255, 0.05); } .tab-btn.active { color: white; font-weight: 600; /* No background here — the .tab-indicator element below handles it */ } /* Press feedback — the tab briefly scales down on pointerdown, springs back on release. Set as a class from JS so we can also apply it to the tinted clone in sync (CSS :active doesn't reach the clones since they're pointer-events: none). */ .tab-btn.pressing, .tinted-clone.pressing, .chat-mid-tab.pressing, .toolbar-btn.pressing { transform: scale(0.96); } .tab-btn .tab-icon { width: 22px; height: 22px; } /* ── Sliding pill indicator — iOS Liquid Glass ────────────────────── The pill itself is just a clean glass bubble — a translucent white tint, a soft border, a drop shadow. No chromatic aberration: the "color" effect comes from the .tabs-tinted-overlay layer which is clipped to the bubble's shape, revealing cyan-tinted copies of the icons/text wherever the bubble overlaps them. z-index 2 puts the pill ABOVE the tab buttons (z-index 1) so that the icons look like they're behind glass. The .tabs-tinted-overlay sits at z-index 3 — above the pill — so the cyan icons "shine through" the glass. pointer-events: none keeps the tabs tappable through the bubble. */ .tab-indicator, .toolbar-indicator, .chat-mid-indicator { position: absolute; top: 0; left: 0; width: 0; height: 0; /* iOS 26 Liquid Glass. The bubble is a translucent piece of glass sitting on top of the content — not a tint. Visual character comes from these layered effects working together: - Background almost transparent (6% white) — just enough to define the bubble on any backdrop - Strong backdrop-filter: blur softens content behind, saturate makes colours behind pop more vibrantly, brightness lifts the whole region slightly - Bright inner highlight at top — light catching the curved top of the glass (like a meniscus) - Inner shadow at bottom — depth where glass meets surface - Outer soft drop shadow — glass casting a shadow on the panel below it (floating element) - Hairline border defines the glass edge without dominating. */ background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); backdrop-filter: blur(20px) saturate(200%) brightness(1.08); -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.08); box-shadow: /* Top inner highlight — curved top catching light from above */ inset 0 1px 0.5px rgba(255, 255, 255, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.10), /* Bottom inner shadow — depth where glass meets surface */ inset 0 -1px 0.5px rgba(0, 0, 0, 0.10), inset 0 -2px 4px rgba(0, 0, 0, 0.06), /* Outer drop shadow — glass floating above the panel */ 0 3px 12px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10); pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.15s ease; } /* ── Tinted overlay — cyan icons revealed only inside the bubble ──── A pixel-for-pixel mirror of the tabs row / toolbar, but with every icon and label rendered in the accent cyan colour. Sits absolutely on top of the originals. JS keeps its clip-path glued to the indicator's current rectangle — pill-shaped, with `round 999px` — so the cyan version only shows through where the bubble is. Result: icons gradually transition from gray to cyan as the bubble sweeps over them, exactly like macOS Find My / iOS tab bars. */ .tabs-tinted-overlay, .toolbar-tinted-overlay { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; z-index: 3; color: var(--accent-cyan); clip-path: inset(100% 100% 100% 100% round 999px); /* hidden until JS runs */ } .tabs-tinted-overlay { gap: 4px; padding: 10px; } .toolbar-tinted-overlay { gap: 4px; padding: 8px; } /* The cloned buttons inherit their layout from .tab-btn / .toolbar-btn but we want them painted in the accent colour and unable to receive pointer events. */ .tinted-clone { color: var(--accent-cyan) !important; cursor: default; font-weight: 600; } .tinted-clone .tab-icon, .tinted-clone svg { color: var(--accent-cyan); } .tab-content { flex: 1; overflow-y: auto; padding: 16px 20px; } /* ── Game chat column ────────────────────────────────────────────── */ .chat-messages { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px; overflow-y: auto; } .chat-empty { margin: auto; color: var(--text-mute); font-size: 0.9rem; } .chat-message { background: var(--glass-bg); padding: 8px 14px; border-radius: var(--radius-pill); align-self: flex-start; max-width: 88%; font-size: 0.92rem; } .chat-message .chat-author { font-weight: 600; color: var(--text); font-size: 0.78rem; margin-right: 6px; } .chat-input-row { display: flex; gap: 8px; padding: 12px 16px; } .chat-input { flex: 1; padding: 10px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: var(--text); font: inherit; font-size: 0.95rem; outline: none; } .chat-input::placeholder { color: var(--text-mute); } .chat-input:focus { border-color: rgba(255,255,255,0.40); } .chat-mid-tabs { display: flex; gap: 6px; padding: 10px 16px; position: relative; } .chat-mid-tab { flex: 1; padding: 10px 8px 8px 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--text); cursor: pointer; font: inherit; font-size: 0.78rem; display: flex; flex-direction: column; align-items: center; gap: 4px; user-select: none; transition: color var(--spring-fast); position: relative; z-index: 1; } .chat-mid-tab.active { font-weight: 600; /* Indicator handles the background */ } .chat-mid-tab svg { width: 18px; height: 18px; } /* (chat-mid-indicator styled via the shared rule above) */ /* ── Footer toolbar (Home/Settings/Search) ──────────────────────── */ .shell-footer { display: flex; gap: 12px; align-items: center; padding-bottom: 0; } .toolbar { display: flex; gap: 4px; padding: 8px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); position: relative; /* anchor for .toolbar-indicator */ } .toolbar-btn { padding: 10px 14px 8px 14px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--text); cursor: pointer; font: inherit; font-size: 0.72rem; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 60px; transition: color var(--spring-fast), background-color 0.18s ease, transform 0.10s cubic-bezier(0.34, 1.1, 0.4, 1); user-select: none; position: relative; z-index: 1; } .toolbar-btn:hover { color: white; } .toolbar-btn:not(.active):hover { background: rgba(255, 255, 255, 0.05); } .toolbar-btn.active { color: white; font-weight: 600; } .toolbar-btn svg { width: 22px; height: 22px; } /* (toolbar-indicator styled via the shared rule above) */ /* ── Sidebar-expand button when collapsed ────────────────────────── */ .sidebar-expand-btn { position: fixed; top: 36px; right: 36px; z-index: 50; display: none; } .shell-grid.sidebar-collapsed ~ .sidebar-expand-btn { display: inline-flex; } /* ── Mobile / smaller screens ────────────────────────────────────── */ @media (max-width: 900px) { .shell-grid, .shell-grid.in-lobby { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .panel-right { display: none; } .shell-grid.sidebar-collapsed { grid-template-columns: 1fr; } }