/* Self-hosted fonts (variable woff2, latin + latin-ext so Turkish letters work). Inter 400-600, Space Grotesk 500-700. Files live in ../fonts/. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #0e1013; --panel: #1b2027; --panel-2: #232a33; --ink: #eef1f5; --ink-dim: #9aa5b1; --line: rgba(255, 255, 255, 0.08); --good: #3ddc97; --s0: #d63031; --s1: #ff7a00; --s2: #f1c40f; --s3: #26de81; --s4: #0984e3; --s5: #6c5ce7; --s6: #e84393; --s7: #00bec4; --neutral: #7b8794; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } /* Card skin: while a card is held, the whole screen takes on its color. ui.js sets data-skin, --skin-bg and data-ink on every render. With no card held (intro, setup, sitting out) the dark default applies. */ :root[data-skin="card"] { --bg: var(--skin-bg, #0984e3); --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.78); --panel: rgba(0, 0, 0, 0.18); --panel-2: rgba(0, 0, 0, 0.26); --line: rgba(255, 255, 255, 0.3); } :root[data-skin="card"][data-ink="dark"] { --ink: #161616; --ink-dim: rgba(22, 22, 22, 0.72); --panel: rgba(255, 255, 255, 0.35); --panel-2: rgba(255, 255, 255, 0.5); --line: rgba(0, 0, 0, 0.22); } :root[data-skin="card"] .held-card { background: transparent !important; } :root[data-skin="card"] .action-btn.primary { background: var(--ink); color: var(--bg); box-shadow: none; } :root[data-skin="card"] .action-btn.disabled { background: var(--panel); color: var(--ink-dim); border: 1px solid var(--line); } :root[data-skin="card"] .race-sheet { background: var(--panel); } html { background: var(--bg); transition: background-color 0.3s ease; } * { box-sizing: border-box; } html, body { height: 100%; overscroll-behavior: none; /* no pull-to-refresh or bounce while playing */ overflow: hidden; /* the game itself scrolls internally if it ever needs to — the page never does */ } body { margin: 0; background: transparent; color: var(--ink); font-family: 'Inter', -apple-system, sans-serif; display: flex; justify-content: center; /* An app, not a page: no text selection, no iPhone long-press callout, no dragging the logo. Text boxes stay selectable so names and room codes can still be edited and pasted. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } img, svg { -webkit-user-drag: none; } h1, .display { font-family: 'Space Grotesk', 'Inter', sans-serif; } .stage-label { font-size: 12px; color: var(--ink-dim); text-align: center; line-height: 1.5; } .stage-label b { color: var(--ink); } /* The game fills the real browser viewport edge-to-edge on a phone. 100svh ("small viewport height") accounts for mobile browser chrome (address bar, etc.) so the layout never runs taller than what's actually visible — with 100vh as a fallback for older browsers. The max-width just keeps it from stretching absurdly wide if opened on a desktop browser during testing — it has no effect on a phone. */ .screen { width: 100%; max-width: 480px; min-width: 0; height: 100vh; height: 100svh; background: transparent; position: relative; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; /* safety net only — normal play should never need to scroll */ } /* ---------------- landscape guard ---------------- */ /* This game is portrait-only. On a real Android build this gets locked properly (screenOrientation="portrait" in the app manifest); on the web, the best we can do is detect it and ask the player to rotate back. */ .rotate-guard { display: none; position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--ink); align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 15px; line-height: 1.5; } @media (orientation: landscape) and (max-height: 500px) { .rotate-guard { display: flex; } .screen { display: none; } } .field { margin-top: 14px; } .field-hint { margin-top: 8px; text-align: left; } .online-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .online-mode-switch button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-dim); font: 600 13px Inter, sans-serif; cursor: pointer; } .online-mode-switch button.active { background: var(--panel-2); color: var(--ink); box-shadow: 0 2px 7px rgba(0,0,0,.22); } .online-mode-switch button:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } .field label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; } .join-status { min-height: 30px; margin-top: 10px; color: var(--ink-dim); font-size: 12px; line-height: 1.4; text-align: center; } input[type=text], select { width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 14px; padding: 11px 12px; border-radius: 9px; font-family: inherit; } @media (max-height: 760px) { .screen.online-join-screen { overflow-y: hidden; padding: calc(8px + env(safe-area-inset-top, 0px)) 18px calc(8px + env(safe-area-inset-bottom, 0px)); } .online-join-screen .intro-title { margin-top: 6px; } .online-join-screen .intro-sub { margin-top: 4px; line-height: 1.35; } .online-join-screen .online-mode-switch { margin-top: 12px; padding: 3px; } .online-join-screen .online-mode-switch button { min-height: 38px; } .online-join-screen .field { margin-top: 10px; } .online-join-screen .field label { margin-bottom: 4px; } .online-join-screen .field-hint { margin-top: 5px; line-height: 1.35; } .online-join-screen input[type=text], .online-join-screen select { padding: 10px 11px; } .online-join-screen #joinBtn { min-height: 46px; margin-top: 10px; padding: 11px 12px; } .online-join-screen > .stage-label { margin-top: 4px !important; line-height: 1.35; } .online-join-screen .join-status { min-height: 20px; margin-top: 5px; } } #codeIn:focus { outline: 2px solid rgba(61, 220, 151, 0.45); outline-offset: 1px; border-color: var(--good); } .row2 { display: flex; gap: 8px; } .row2 > div { flex: 1; } .screen-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-dim); margin-bottom: 8px; } .deck-pill { background: var(--panel); border: 1px solid var(--line); padding: 4px 8px; border-radius: 100px; } .deck-pill b { color: var(--ink); } .screen-top .top-leave-btn { margin: 0; padding: 4px 0; text-align: left; text-decoration: none; font-size: 12px; } .room-code-footer { align-self: center; max-width: 100%; margin-top: 10px; overflow-wrap: anywhere; text-align: center; font-size: 11px; font-weight: 600; } .online-score-group { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .point-awarded { position: relative; z-index: 1; border-color: var(--good); } .point-award { position: absolute; top: -13px; right: -10px; display: grid; place-items: center; min-width: 27px; height: 22px; padding: 0 6px; border: 1px solid rgba(0,0,0,.18); border-radius: 99px; background: var(--good); color: #062017; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: point-float-up 950ms ease-out both; } @keyframes point-float-up { 0% { opacity: 0; transform: translateY(7px) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 35% { transform: translateY(-2px) scale(1); } 100% { opacity: 0; transform: translateY(-14px) scale(.94); } } .point-fireworks { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; } .point-fireworks i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; background: #fff; box-shadow: 0 -28px #ffd166, 20px -20px #fff, 28px 0 #6ee7b7, 20px 20px #fff, 0 28px #ffd166, -20px 20px #fff, -28px 0 #6ee7b7, -20px -20px #fff, 0 -40px #ff8fab, 28px -28px #ffd166, 40px 0 #ff8fab, 28px 28px #ffd166, 0 40px #ff8fab, -28px 28px #ffd166, -40px 0 #ff8fab, -28px -28px #ffd166; animation: firework-burst 1050ms cubic-bezier(.15,.7,.25,1) both; } .point-fireworks i:nth-child(1) { left: 24%; top: 29%; animation-delay: 20ms; } .point-fireworks i:nth-child(2) { left: 76%; top: 36%; transform: scale(.7); animation-delay: 140ms; } .point-fireworks i:nth-child(3) { left: 51%; top: 18%; transform: scale(.55); animation-delay: 260ms; } @keyframes firework-burst { 0% { opacity: 0; transform: scale(.12); } 16% { opacity: 1; } 68% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } } .online-deck-progress { display: flex; align-items: center; gap: 9px; min-width: 0; flex-shrink: 0; margin-top: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .online-deck-progress-copy { flex: 0 0 auto; color: var(--ink-dim); font-size: 10px; line-height: 1.3; white-space: nowrap; } .online-deck-progress-copy b { color: var(--ink); font-weight: 700; } .online-deck-track { flex: 1 1 auto; min-width: 18px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); } .online-deck-track span { display: block; height: 100%; border-radius: inherit; background: var(--good); transition: width 220ms ease; } .online-deck-remaining { flex: 0 0 auto; color: var(--ink-dim); font-size: 10px; white-space: nowrap; } .card-zone { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-width: 0; min-height: 0; } .held-card { flex: 1; min-width: 0; min-height: 0; border-radius: 24px; padding: 8px 8px; display: flex; flex-direction: column; } .held-card.match-glow, .t-row.match-glow, .point-awarded { animation: match-pair-glow 850ms ease-out both; } @keyframes match-pair-glow { 0%, 100% { transform: scale(1); box-shadow: none; } 35% { transform: scale(1.035); box-shadow: 0 0 0 3px var(--skin-bg, var(--bg)), 0 0 0 7px #ffffff, 0 8px 28px rgba(0, 0, 0, 0.55); } } @media (prefers-reduced-motion: reduce) { .held-card.match-glow, .t-row.match-glow, .point-awarded { animation-duration: 1ms; } .point-awarded, .point-award, .point-fireworks i { animation-duration: 1ms; } } .held-card.ink-light { color: #ffffff; } .held-card.ink-dark { color: #161616; } .card-face { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; } .card-face.mirrored { transform: rotate(180deg); } .card-face .topic { width: 100%; max-width: 100%; font-size: clamp(27px, min(6vh, 8vw), 40px); font-weight: 700; line-height: 1.1; text-align: center; color: currentColor; padding: 0 4px; overflow-wrap: anywhere; } .card-center-glyph { align-self: center; display: flex; align-items: center; justify-content: center; flex: 0 0 clamp(112px, 22vh, 156px); width: clamp(112px, 22vh, 156px); color: currentColor; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2)); } .card-center-glyph svg { width: 100%; height: 100%; display: block; } .empty-state { text-align: center; color: var(--ink-dim); font-size: 13px; line-height: 1.5; padding: 0 8px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .empty-state .big { font-size: 30px; margin-bottom: 10px; } .points-strip { text-align: center; font-size: 12px; color: var(--ink-dim); margin-top: 8px; } .points-strip b { color: var(--ink); font-weight: 700; font-size: 14px; } .action-btn { width: 100%; padding: 15px; border-radius: 13px; border: none; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: 'Space Grotesk', inherit; margin-top: 14px; } .action-btn.primary { background: linear-gradient(180deg, #fff, #e9edf2); color: #12151a; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28); } .action-btn.secondary { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); } .action-btn:active { transform: translateY(2px); } .action-btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none; box-shadow: none; } .action-btn.primary:disabled, :root[data-skin="card"] .action-btn.primary:disabled { background: var(--panel); color: var(--ink-dim); } .action-btn.disabled { background: var(--panel); color: var(--ink-dim); border: 1px solid var(--line); cursor: default; } .setup-btn { margin-top: auto; } .race-sheet { flex-shrink: 0; margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 12px; } .race-sheet .tag { font-size: 11px; color: var(--ink-dim); text-align: center; margin-bottom: 8px; } .race-status { margin: 0 2px 10px; color: var(--ink-dim); font-size: 12px; line-height: 1.45; text-align: center; } .race-btns { display: flex; flex-direction: column; gap: 6px; } .race-btns button { padding: 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .race-btns button.is-selected, .race-btns button:active { background: var(--good); color: #062017; border-color: var(--good); } .race-btns button.is-conflict { background: #d63031; color: #ffffff; border-color: #d63031; } /* The race panel is compact (see .race-compact at the end of the file), so the card keeps its normal size while racing. */ /* Keep both card orientations available for face-to-face play, while scaling the prompt and suit mark together on compact phone screens. */ @media (max-height: 740px), (max-width: 360px) { .card-face .topic { font-size: clamp(16px, min(4.2vh, 6.8vw), 28px); } .card-center-glyph { flex-basis: clamp(64px, min(13vh, 20vw), 92px); width: clamp(64px, min(13vh, 20vw), 92px); } .screen:has(.tableau) .action-btn { margin-top: 10px; padding-top: 12px; padding-bottom: 12px; } .match-banner { margin-top: 6px; padding: 4px 8px; } .tableau { margin-top: 6px; gap: 4px; } .t-row { gap: 5px; padding: 5px 7px; } .t-row .sw { width: 12px; height: 12px; } .online-deck-progress { gap: 7px; margin-top: 6px; padding: 6px 8px; } .room-code-footer { margin-top: 6px; padding: 3px 8px; } } .countdown { text-align: center; font-size: 40px; font-weight: 700; padding: 16px 0; font-family: 'Space Grotesk', sans-serif; } .link-btn { background: none; border: none; color: var(--ink-dim); font-size: 11.5px; text-decoration: underline; cursor: pointer; margin-top: 10px; font-family: inherit; } .back-btn { background: none; border: none; color: var(--ink-dim); font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; display: flex; align-items: center; gap: 4px; } .intro-title { font-size: clamp(20px, 5vh, 22px); font-weight: 700; margin-top: clamp(16px, 4vh, 32px); text-align: center; } .intro-sub { font-size: 12px; color: var(--ink-dim); text-align: center; margin-top: 6px; line-height: 1.5; } .language-control { align-self: center; display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ink-dim); font-size: 12px; } .language-control select { width: auto; min-width: 110px; padding: 6px 9px; border-radius: 8px; background: var(--panel-2); color: var(--ink); font: inherit; } .steps { margin-top: clamp(10px, 3vh, 20px); display: flex; flex-direction: column; gap: clamp(6px, 1.8vh, 12px); flex: 1; justify-content: flex-start; } .step { display: flex; gap: 10px; align-items: flex-start; } .step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); color: var(--ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .step .t { font-size: 12.5px; line-height: 1.5; color: var(--ink); padding-top: 2px; } .step .t b { color: var(--ink); } .loading-state { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-dim); font-size: 13px; padding: 0 20px; } /* Styles specific to online mode's lobby/tableau — loaded alongside the shared css/style.css, which already covers the card, buttons, race sheet, and screen shell used by both modes. */ .room-code-display { text-align: center; margin-top: 18px; } .room-code-display .lbl { font-size: 11px; color: var(--ink-dim); } .room-code-display .code { font-size: 30px; font-weight: 700; letter-spacing: 0.06em; margin-top: 4px; font-family: 'Space Grotesk', sans-serif; } .room-code-copy { margin-top: 8px; } .room-code-copy .action-btn + .action-btn { margin-left: 8px; } .room-code-copy .action-btn { width: min(100%, 220px); margin-top: 0; padding: 10px 14px; } .room-code-copy-status { min-height: 17px; margin-top: 4px; color: var(--good); font-size: 12px; } .room-code-copy-status.is-error { color: #ff8891; } .peer-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .peer-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .peer-row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-dim); flex-shrink: 0; } .peer-row.ready .dot { background: var(--good); } .peer-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-dim); font-size: 13px; line-height: 1.4; text-align: center; } .peer-waiting::before { content: "+"; flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--good); font-size: 17px; font-weight: 600; } .connection-notice { margin-top: 10px; color: #ff8891; } .peer-row .nm { flex: 1; font-size: 14px; font-weight: 600; } .peer-row .you { font-size: 11px; color: var(--ink-dim); } .turn-banner { text-align: center; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 10px; } .turn-banner b { color: var(--ink); } .match-banner { align-self: center; max-width: 100%; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); color: rgba(0, 0, 0, 0.76); font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center; overflow-wrap: anywhere; } .tableau { min-width: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .t-row { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .t-row .sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; } .t-row .nm { flex: 1; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-row .pt { font-size: 10.5px; color: var(--ink-dim); } .t-row.disconnected { opacity: 0.62; } .opp-pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .opp-pick label { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--panel-2); padding: 9px 11px; border-radius: 9px; cursor: pointer; } .end-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; background: var(--panel); border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--line); } .end-row.first { border-color: var(--good); background: rgba(61, 220, 151, 0.08); } .end-row .rank { color: var(--ink-dim); font-size: 13px; width: 20px; } .end-row .nm { flex: 1; font-weight: 600; font-size: 14.5px; } .end-row .sc { font-weight: 700; font-size: 14.5px; } /* ================================================================ Redesign (1a): fanned suit cards, display headlines, grouped panels, pill controls, tap chips, and a dark / light skin. ================================================================ */ :root { --btn-bg: linear-gradient(180deg, #fff, #e9edf2); --btn-ink: #12151a; --card-shadow: rgba(0, 0, 0, 0.4); --good-ink: #062017; } /* Light skin for menu screens. In-game, the held card's color still wins. */ :root[data-theme="light"]:not([data-skin="card"]) { --bg: #f8f7f4; --panel: #efede8; --panel-2: #e6e3dc; --ink: #1c1b19; --ink-dim: #5f5d57; --line: rgba(28, 27, 25, 0.14); --good: #13855a; --good-ink: #ffffff; --btn-bg: #1c1b19; --btn-ink: #f8f7f4; --card-shadow: rgba(28, 27, 25, 0.2); } :root[data-theme="light"]:not([data-skin="card"]) input::placeholder { color: #8d8a82; } .action-btn { padding: 17px; border-radius: 14px; font-size: 16px; } .action-btn.primary { background: var(--btn-bg); color: var(--btn-ink); } .action-btn.secondary { margin-top: 10px; } .back-btn { align-self: flex-start; padding: 7px 14px; border-radius: 100px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; } .screen-top .top-leave-btn { padding: 7px 14px; border-radius: 100px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; font-weight: 600; color: var(--ink-dim); } .deck-pill { padding: 7px 12px; } input[type=text] { font-size: 15px; padding: 13px 14px; border-radius: 12px; } .field label { font-weight: 600; margin-bottom: 8px; } /* fanned hand */ .fan { position: relative; flex-shrink: 0; width: 100%; margin-top: 8px; transition: height 0.3s ease, opacity 0.3s ease; } .fan-card { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px var(--card-shadow); } .fan-card.ink-light { color: #ffffff; } .fan-card.ink-dark { color: #161616; } .fan-card svg { display: block; } /* The intro hand scales with the screen: --cw is the card width, everything else derives from it, so it grows on tall/wide screens and stays compact on small phones. */ .fan-lg { --cw: clamp(92px, min(15vh, 34vw), 190px); height: calc(var(--cw) * 2.12); margin-top: 0; } .fan-lg .fan-card { bottom: calc(var(--cw) * 0.085); width: var(--cw); height: calc(var(--cw) * 1.41); margin-left: calc(var(--cw) / -2); border-radius: calc(var(--cw) * 0.135); transform-origin: 50% 120%; } .fan-lg .fan-card svg { width: calc(var(--cw) * 0.39); height: calc(var(--cw) * 0.39); } .fan-md { height: 200px; margin-top: 20px; } .fan-md .fan-card { width: 96px; height: 136px; margin-left: -48px; border-radius: 14px; transform-origin: 50% 120%; } .fan-md .fan-card svg { width: 38px; height: 38px; } .fan-sm { height: 86px; margin-top: 6px; } .fan-sm .fan-card { width: 52px; height: 74px; margin-left: -26px; border-radius: 9px; transform-origin: 50% 130%; box-shadow: 0 6px 14px var(--card-shadow); } .fan-sm .fan-card svg { width: 22px; height: 22px; } /* intro */ .intro-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .theme-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 100px; background: var(--panel); } .theme-switch button { min-height: 30px; border: 0; border-radius: 100px; padding: 0 13px; background: transparent; color: var(--ink-dim); font: 600 12px Inter, sans-serif; cursor: pointer; } .theme-switch button.active { background: var(--ink); color: var(--bg); } .theme-switch button:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } .intro-top .language-control { margin-top: 0; align-self: auto; } .intro-top .language-control select { appearance: none; -webkit-appearance: none; min-width: 0; padding: 7px 14px; border-radius: 100px; background: var(--panel); color: var(--ink-dim); font-weight: 600; text-align: center; } .intro-hero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3.5vh, 40px); padding-top: 8px; } .intro-hero-title { font-size: clamp(36px, 6.5vh, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: center; margin: 0; } .intro-tagline { font-size: 15px; color: var(--ink-dim); text-align: center; margin-top: 10px; } .intro-bottom { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 16px; } .how-to-play-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 700 15px Inter, sans-serif; cursor: pointer; } .how-to-play-btn:active { background: var(--panel-2); } .how-to-play-btn:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } .intro-bottom .install-app-btn { margin-top: 10px; } .top-left-group { display: flex; align-items: center; gap: 8px; } /* sub-screen headings + forms */ .screen-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: center; margin: 20px 0 0; } .screen-sub { font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); text-align: center; margin: 10px 8px 0; text-wrap: pretty; } .form-panel { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; } .form-panel + .form-panel { margin-top: 10px; } .form-panel .field:first-child { margin-top: 0; } .form-panel input[type=text] { background: var(--panel-2); } .chip-row { display: flex; flex-wrap: wrap; gap: 5px; } .chip-row.chip-row-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .chip { min-height: 34px; padding: 0 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: 600 12.5px Inter, sans-serif; cursor: pointer; } .chip-row-grid .chip { min-height: 38px; padding: 0; border-radius: 10px; font: 700 15px 'Space Grotesk', sans-serif; } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } .online-mode-switch { border-radius: 14px; } .online-mode-switch button { min-height: 42px; border-radius: 11px; font-size: 13.5px; } @media (max-height: 760px) { .online-join-screen .screen-title { font-size: 28px; margin-top: 10px; } .online-join-screen .screen-sub { margin-top: 4px; line-height: 1.35; } .screen.online-join-screen { overflow-y: auto; } .online-join-screen #genreChips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; } .online-join-screen #genreChips::-webkit-scrollbar { display: none; } .online-join-screen #genreChips .chip { flex-shrink: 0; min-height: 30px; } } @media (max-height: 600px) { .online-join-screen .screen-sub { display: none; } } /* lobby */ .lobby-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .topic-pill { padding: 7px 12px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-dim); font-size: 12px; } .topic-pill b { color: var(--ink); } .room-code-display .lbl { font-size: 12px; } .room-code-display .code { font-size: 38px; letter-spacing: -0.01em; } .room-code-copy .action-btn { width: auto; padding: 9px 18px; border-radius: 100px; background: none; font: 600 13px Inter, sans-serif; } .peer-list { margin-top: 22px; } .peer-row { gap: 12px; padding: 12px 14px; border-radius: 16px; } .peer-row .avatar { width: 28px; height: 38px; flex-shrink: 0; display: flex; padding: 7px; border-radius: 6px; } .peer-row .avatar.ink-light { color: #ffffff; } .peer-row .avatar.ink-dark { color: #161616; } .peer-row .avatar svg { width: 100%; height: 100%; display: block; } .peer-row .nm { font-size: 15px; } .peer-row .status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); } .peer-row.ready .status { color: var(--good); } .lobby-hint { font-size: 11.5px; margin-top: 10px; } /* in-game */ .card-face .topic { font-family: 'Space Grotesk', 'Inter', sans-serif; } :root[data-skin="card"] .held-card { border: 0; } .turn-banner { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 15px; letter-spacing: -0.01em; margin: 2px 0 4px; } .match-banner { margin-top: 12px; padding: 7px 14px; font-size: 13px; font-weight: 600; } .t-row { border-radius: 12px; } .t-row .sw { width: 14px; height: 20px; box-shadow: 0 0 0 1.5px var(--line); } .t-row .nm { font-size: 12px; } :root[data-skin="card"] .online-deck-track span { background: var(--ink); } .race-sheet { border-radius: 20px; padding: 16px 14px 14px; } .race-sheet .tag { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); } .race-btns { gap: 7px; } .race-btns button { padding: 14px; border-radius: 12px; font: 700 14px 'Space Grotesk', 'Inter', sans-serif; } /* end */ .end-title { font-size: 46px; margin-top: 28px; } .end-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 24px; display: flex; flex-direction: column; gap: 8px; } .end-row { gap: 12px; margin-bottom: 0; padding: 14px 16px; border-radius: 16px; } .end-row .rank { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); font-size: 12px; font-weight: 700; } .end-row.first { background: color-mix(in srgb, var(--good) 8%, transparent); } .end-row.first .rank { background: var(--good); color: var(--good-ink); } .end-row .sc { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 16px; } /* Card sizing: the topic and the shape scale with the card itself (container units), not the viewport, so they grow as large as the card allows while always leaving room for each other — including the shorter card shown while the race sheet is open. The older vh/vw rules above remain as the fallback for browsers without container query units. */ @supports (height: 1cqh) { .held-card { container-type: size; } .card-face .topic { font-size: clamp(16px, min(9cqh, 12cqw), 64px); max-height: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .card-face { overflow: hidden; } .card-center-glyph { flex: 0 0 clamp(56px, min(30cqh, 60cqw), 280px); width: clamp(56px, min(30cqh, 60cqw), 280px); } } /* online game footer: smaller scoreboard, deck progress + room code share a row */ .tableau { gap: 4px; margin-top: 8px; } .t-row { gap: 6px; padding: 5px 8px; border-radius: 10px; } .t-row .sw { width: 10px; height: 14px; border-radius: 3px; } .t-row .nm { font-size: 11px; } .t-row .pt { font-size: 10px; } .online-footer-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex-shrink: 0; margin-top: 8px; } .online-footer-row .online-deck-progress { flex: 1 1 auto; min-width: 0; margin-top: 0; padding: 6px 9px; } .online-footer-row .room-code-footer { flex: 0 1 auto; max-width: 42%; margin-top: 0; padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; } @media (max-height: 740px), (max-width: 360px) { .t-row { gap: 5px; padding: 4px 7px; } .t-row .sw { width: 9px; height: 12px; } .online-footer-row { margin-top: 6px; } .online-footer-row .online-deck-progress { padding: 5px 8px; } .online-footer-row .room-code-footer { padding: 5px 8px; } } .screen-top .top-leave-btn.icon-leave-btn { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; color: var(--ink); } .screen-top .top-leave-btn.icon-leave-btn svg { display: block; } /* points badge: card-stack icon + number */ .pts-badge { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; line-height: 1; vertical-align: middle; } .pts-icon { width: 1.2em; height: 1.2em; flex: none; display: block; } .t-row .pt .pts-badge { gap: 4px; } .t-row .pt .pts-icon { width: 12px; height: 12px; } .end-row .sc .pts-badge { gap: 6px; } /* online game: player list as a pull-up sheet */ .screen:has(.players-sheet) { overflow: hidden; } .players-bar { flex-shrink: 0; width: 100%; margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 12px Inter, sans-serif; cursor: pointer; text-align: left; } .players-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .players-bar-sws { display: flex; flex: none; } .players-bar-sws i { width: 10px; height: 14px; border-radius: 3px; margin-right: -3px; box-shadow: 0 0 0 1.5px var(--skin-bg, var(--bg)); } .players-bar-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-weight: 500; } .players-bar-sum b { color: var(--ink); font-weight: 600; } .players-bar-chev { color: var(--ink-dim); font-size: 14px; line-height: 1; } .players-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .players-scrim.open { opacity: 1; pointer-events: auto; } .players-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 75%; overflow-y: auto; padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--skin-bg, var(--bg)); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35); transform: translateY(105%); visibility: hidden; transition: transform 0.28s ease, visibility 0s linear 0.28s; } .players-sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--panel); pointer-events: none; } .players-sheet > * { position: relative; } .players-sheet.open { transform: none; visibility: visible; transition: transform 0.28s ease, visibility 0s; } .players-sheet-grab { width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 9px; background: var(--line); } .players-sheet-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font: 700 15px 'Space Grotesk', 'Inter', sans-serif; } .players-sheet-hd button { border: 0; background: none; color: var(--ink-dim); font: 600 12px Inter, sans-serif; cursor: pointer; } .players-sheet .tableau { grid-template-columns: 1fr; margin-top: 0; } .t-row.turn { box-shadow: 0 0 0 1.5px var(--ink); border-color: transparent; } @media (prefers-reduced-motion: reduce) { .players-sheet, .players-scrim { transition: none; } } .score-open-btn { color: var(--ink-dim); font: inherit; font-size: 12px; cursor: pointer; } .score-open-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* main page: hero gives way on short screens so the bottom buttons never overlap the title */ .intro-hero { min-height: 0; flex-shrink: 1; overflow: hidden; } .intro-bottom .install-app-btn { margin-top: 8px; padding: 7px 14px; font-size: 12px; } @media (max-height: 700px) { .how-to-play-btn { min-height: 42px; margin-bottom: 8px; font-size: 14px; } .intro-bottom { margin-top: 10px; } } @media (max-height: 620px) { .intro-hero .fan { display: none; } } /* in-game quick rules sheet (reuses .players-sheet) */ .help-rules { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .help-rule { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: 500 13.5px/1.35 Inter, sans-serif; } .help-ic { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--panel-2); color: var(--ink); font: 700 13px 'Space Grotesk', sans-serif; } .help-ic-pair { background: none; } .help-ic-pair i { position: absolute; width: 16px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: #2bb3a3; color: #fff; } .help-ic-pair i:first-child { left: 1px; top: 5px; transform: rotate(-8deg); } .help-ic-pair i:last-child { right: 1px; top: 3px; transform: rotate(8deg); } .help-ic-pair svg { width: 9px; height: 9px; display: block; } .help-full { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--ink); font: 600 13.5px Inter, sans-serif; cursor: pointer; } .help-full svg { width: 16px; height: 16px; flex: none; } /* Leave confirmation dialog (ui.js showConfirm). Uses the current skin's colors, so it follows dark / light / the held card's color. */ .confirm-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.55); } .confirm-dialog { width: min(100%, 340px); padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); text-align: center; } .confirm-msg { margin: 0 0 18px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; } .confirm-actions { display: flex; gap: 10px; } .confirm-btn { flex: 1; min-height: 46px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); font: 700 15px 'Space Grotesk', 'Inter', sans-serif; cursor: pointer; } .confirm-stay { background: var(--ink); color: var(--bg); border-color: transparent; } .confirm-leave { background: var(--panel-2); color: var(--ink); } .confirm-btn:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } .confirm-btn:active { transform: translateY(1px); } /* Recent rooms on the Join screen. */ .screen.online-join-screen.has-recent-rooms { overflow-y: auto; } .recent-rooms { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } .recent-rooms-title { margin: 0 2px; color: var(--ink-dim); font-size: 12px; font-weight: 600; text-align: left; } .recent-room { display: flex; align-items: stretch; gap: 6px; } .recent-room-join { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; } .recent-room-join:active { background: var(--panel-2); } .recent-room-code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px 'Space Grotesk', 'Inter', sans-serif; } .recent-room-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 12px; } .recent-room-remove { flex: 0 0 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink-dim); font-size: 20px; line-height: 1; cursor: pointer; } .recent-room-join:focus-visible, .recent-room-remove:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } /* Match snap: ring pulses out from your card, match banner lands like a stamp */ .held-card.match-ring { animation: match-pair-glow 850ms ease-out both, match-ring-pulse 900ms ease-out 120ms both; } @keyframes match-ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 30% { box-shadow: 0 0 0 8px rgba(255,255,255,.85); } 100% { box-shadow: 0 0 0 24px rgba(255,255,255,0); } } .match-banner.match-stamp { animation: match-stamp 520ms cubic-bezier(.3,1.4,.5,1) 180ms both; } @keyframes match-stamp { 0% { transform: scale(2.2) rotate(-8deg); opacity: 0; } 60% { transform: scale(.94) rotate(-2deg); opacity: 1; } 100% { transform: none; opacity: 1; } } /* Point win: +1 flies from the card to the score, confetti in suit colors */ .point-flight { position: absolute; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; } .point-flight-badge { position: absolute; margin: -20px 0 0 -26px; padding: 8px 14px; border-radius: 99px; background: var(--good); color: var(--good-ink); font: 700 22px 'Space Grotesk', sans-serif; box-shadow: 0 8px 20px rgba(0,0,0,.35); animation: point-flight 1.3s cubic-bezier(.3,1.2,.5,1) both; } @keyframes point-flight { 0% { transform: translateY(30px) scale(.5); opacity: 0; } 20% { transform: none; opacity: 1; } 30% { transform: scale(1.12); } 40% { transform: scale(1); } 85% { transform: translate(var(--tx), var(--ty)) scale(.45); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(.3); opacity: 0; } } .point-flight i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: point-confetti 1.1s ease-out both; } @keyframes point-confetti { 0% { transform: scale(0); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(260deg) scale(.6); opacity: 0; } } .score-open-btn.point-awarded { animation: point-bump 420ms ease-out 1.05s both; } @keyframes point-bump { 0%, 100% { transform: none; } 40% { transform: scale(1.3); } 75% { transform: scale(.95); } } @media (prefers-reduced-motion: reduce) { .held-card.match-ring, .match-banner.match-stamp, .score-open-btn.point-awarded { animation: none; } .point-flight { display: none; } } /* Lobby on small phones: keep the button on screen, let the player list scroll */ .lobby-top .back-btn { flex: none; } .topic-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-code-display .code { overflow-wrap: anywhere; line-height: 1.05; } .peer-list { min-height: 0; overflow-y: auto; } .peer-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .peer-row .status { flex: none; } @media (max-height: 700px) { .screen:has(.lobby-top) .fan-sm { height: 62px; margin-top: 2px; } .screen:has(.lobby-top) .fan-sm .fan-card { width: 40px; height: 56px; margin-left: -20px; } .screen:has(.lobby-top) .fan-sm .fan-card svg { width: 17px; height: 17px; } .room-code-display { margin-top: 10px; } .room-code-display .code { font-size: 30px; } .room-code-copy { margin-top: 6px; } .room-code-copy .action-btn { padding: 7px 14px; font-size: 12.5px; } .peer-list { margin-top: 12px; gap: 6px; } .peer-row { padding: 8px 12px; gap: 10px; border-radius: 13px; } .peer-row .avatar { width: 22px; height: 30px; padding: 5px; } .peer-row .nm { font-size: 14px; } .lobby-hint { margin-top: 8px; } } @media (max-height: 600px) { .screen:has(.lobby-top) .fan-sm { display: none; } .room-code-display .code { font-size: 26px; } .topic-pill { padding: 5px 10px; font-size: 11px; } } @media (max-width: 340px) { .lobby-top { gap: 6px; } .topic-pill { font-size: 11px; padding: 6px 10px; } .room-code-display .code { font-size: 26px; } } /* Create room: word + auto tag */ .room-word { display: flex; align-items: stretch; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; } .room-word:focus-within { border-color: var(--ink-dim); } .room-word input[type=text] { flex: 1; min-width: 0; border: 0; border-radius: 0; background: none; } .room-word input[type=text]:focus { outline: none; } .room-word-tag { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--panel-2); border-left: 1px solid var(--line); color: var(--good); font: 700 15px 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .06em; } .room-word-preview { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-align: center; } .room-word-preview small { display: block; color: var(--ink-dim); font-size: 11px; } .room-word-preview b { display: block; margin-top: 2px; font: 700 22px 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .04em; overflow-wrap: anywhere; } @media (max-height: 700px) { .room-word-preview { margin-top: 8px; padding: 7px 10px; } .room-word-preview b { font-size: 19px; } } /* Host-only "Remove" button on lobby rows */ .peer-row .kick-btn { flex: none; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-dim); font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer; } .peer-row .kick-btn:hover { color: var(--ink); border-color: var(--ink-dim); } /* Link to the feedback form (main menu and results screen) */ .report-link { align-self: center; margin-top: 12px; padding: 4px 8px; color: var(--ink-dim); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .report-link:hover, .report-link:focus-visible { color: var(--ink); } /* One-line notice about the anonymous counters (main menu) */ .privacy-note { margin: 2px 0 0; text-align: center; color: var(--ink-dim); font-size: 11px; opacity: .8; } /* "A new version is available" bar (js/update-check.js) */ .update-banner { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 0 auto; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--panel-2, #232a33); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 13px; } .update-banner span { flex: 1; min-width: 0; } .update-banner button { min-height: 34px; padding: 6px 14px; border-radius: 10px; border: 0; background: var(--ink); color: var(--bg); font: 700 13px Inter, sans-serif; cursor: pointer; } .update-banner .update-banner-close { padding: 6px 10px; background: transparent; color: var(--ink-dim); font-size: 18px; line-height: 1; } /* Shown only when JavaScript is off (also what simple search crawlers read) */ .noscript-note { max-width: 420px; margin: 24px auto; padding: 0 16px; color: var(--ink); font-size: 15px; line-height: 1.5; } /* Lobby top bar: the same round icon buttons as the game page (leave and how-to-play) */ .lobby-top .top-leave-btn.icon-leave-btn { width: 38px; height: 38px; padding: 0; margin: 0; display: grid; place-items: center; border-radius: 100px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; cursor: pointer; } .lobby-top .top-leave-btn.icon-leave-btn svg { display: block; } /* Main page: settings button + Settings sheet (rows: feedback, privacy link; new options go here) */ .intro-top .top-left-group { gap: 8px; } .settings-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer; } .settings-btn:active { background: var(--panel-2); } .settings-btn:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; } .settings-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: 600 14px Inter, sans-serif; text-decoration: none; } .settings-row span:first-child { flex: 1; } .settings-row span:last-child { color: var(--ink-dim); } /* Main page language button: a globe and the language code. The real