/* Doubles — visual language borrowed from PDQ.com: light grey page with a faint dice watermark, solid white cards, near-black #131515, Space Grotesk headings over Inter body, flat hairline borders, small-radius rectangular buttons, and a tri-color accent (blue / green / orange) reserved for meaning. */ :root { --ink: #131515; --ink-2: #1f2121; --ink-3: #272727; --paper: #ffffff; --page: #eceef0; --band: #f5f6f7; --band-2: #f8f8f8; --line: #e5e7eb; --line-2: #c8cccf; --muted: #696969; --muted-2: #8a8f93; --blue: #0a95e6; --blue-soft: #e8f6fe; --green: #007d54; --green-soft: #d4f5ea; --orange: #ff9933; --orange-soft: #fff1e0; --navy: #27455c; --red: #b3261e; --radius: 5px; --shadow: none; --head: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; } /* Light grey page with a faint pair of dice behind everything. The grey lives on (not ) so the fixed watermark, painted at z-index -1, sits above the page colour and below all content — and every card stays solid white, so no text ever sits on the watermark itself. */ html { background: var(--page); } body { background: transparent; } /* "Your turn" wash: the whole screen tints blue while it's your turn, then reverts to the grey page the instant your entry hands the turn on. */ html.my-turn { background: var(--blue-soft); } html.my-turn .topbar { background: var(--blue); } body::before { content: ""; position: fixed; left: 50%; top: 50%; width: min(88vw, 560px); aspect-ratio: 420 / 260; transform: translate(-50%, -50%); background: url("/dice-watermark.svg") center / contain no-repeat; opacity: 0.075; pointer-events: none; z-index: -1; } h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; margin: 0; letter-spacing: -0.01em; } h1 { font-size: 40px; line-height: 1.05; } h2 { font-size: 26px; line-height: 1.15; } h3 { font-size: 18px; } p { margin: 0 0 12px; } a { color: var(--ink); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--blue); display: inline-block; border-radius: 1px; } .eyebrow.green::before { background: var(--green); } .eyebrow.orange::before { background: var(--orange); } .eyebrow.onDark { color: rgba(255, 255, 255, 0.7); } .muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 11.5px; letter-spacing: 0.04em; } .center { text-align: center; } .mono-num { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ shell */ .wrap { max-width: 620px; margin: 0 auto; padding: 0 18px; } .topbar { background: var(--ink); color: #fff; padding: 11px 0; position: sticky; top: 0; z-index: 20; transition: background 0.3s ease; } .topbar .wrap { display: flex; align-items: center; gap: 12px; } .brand { font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; white-space: nowrap; } .brand span { color: var(--orange); } .topbar .spacer { flex: 1; } .roomchip { font-family: var(--head); font-size: 12px; letter-spacing: 0.16em; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius); padding: 3px 8px; white-space: nowrap; } .status { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .dot.off { background: var(--orange); } .dot.dead { background: var(--red); } .screen { display: none; padding: 26px 0 90px; } .screen.active { display: block; } /* ---------------------------------------------------------------- pieces */ .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--paper); } .card.band { background: var(--paper); border-color: var(--line); } .card.dark { background: var(--ink); border-color: var(--ink); color: #fff; } .card.dark .muted { color: rgba(255, 255, 255, 0.65); } .stack > * + * { margin-top: 14px; } .row { display: flex; gap: 10px; align-items: center; } .row.wrapit { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } label.field { display: block; margin-bottom: 14px; } label.field .lab { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; } input[type=text], input[type=tel] { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 11px 12px; } input[type=text]:focus, input[type=tel]:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); } input.code { text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--head); font-weight: 700; } button, .btn { font-family: var(--head); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; border-radius: var(--radius); border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 12px 18px; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } button:hover:not(:disabled), .btn:hover { background: var(--ink-3); } button.ghost, .btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); } button.ghost:hover:not(:disabled) { background: var(--band); } button.ghost.onDark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); } button.ghost.onDark:hover { background: rgba(255, 255, 255, 0.12); } button.wide { width: 100%; } button.sm { padding: 8px 12px; font-size: 12.5px; } button:disabled { opacity: 0.4; cursor: not-allowed; } button.green { background: var(--green); border-color: var(--green); } button.green:hover:not(:disabled) { background: #006846; } button.blue { background: var(--blue); border-color: var(--blue); } button.blue:hover:not(:disabled) { background: #0884cc; } button.link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 6px; font-size: 13px; } button.link:hover { background: none; color: var(--ink); } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 9px 14px; font-family: var(--head); font-weight: 600; font-size: 14px; cursor: pointer; } .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---------------------------------------------------------------- lobby */ .codebox { font-family: var(--head); font-size: 44px; font-weight: 700; letter-spacing: 0.22em; line-height: 1; } .sharebox { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--band); padding: 8px 10px; } .sharebox code { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .plist { list-style: none; margin: 0; padding: 0; } .plist li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; margin-bottom: 8px; background: var(--paper); } .plist li .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plist li .sc { font-family: var(--head); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; } .plist li.host .nm::after { content: "HOST"; font-size: 9.5px; letter-spacing: 0.12em; color: var(--blue); border: 1px solid var(--blue); border-radius: 3px; padding: 1px 4px; margin-left: 7px; vertical-align: 2px; } .plist li.me { border-color: var(--ink); border-width: 1.5px; } .plist li.turn { background: var(--ink); border-color: var(--ink); color: #fff; } .plist li.turn .sc { color: #fff; } .plist li.turn .tag { color: var(--orange); } .plist li.banked { background: var(--band); color: var(--muted); } .plist li.banked .sc { color: var(--muted); } .plist li.offline { opacity: 0.55; } .tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* ------------------------------------------------------------- game head */ .potbox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 16px 18px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .potval { font-family: var(--head); font-size: 56px; font-weight: 700; line-height: 0.95; font-variant-numeric: tabular-nums; } .potval.hot { color: var(--green); } .potval.warm { color: var(--orange); } .metric { min-width: 76px; } .metric .k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .metric .v { font-family: var(--head); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .riskline { margin-top: 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; } .badge { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; padding: 3px 7px; } .badge.safe { background: var(--blue-soft); color: #08648f; } .badge.risk { background: var(--orange-soft); color: #9a5200; } .badge.danger { background: #fdecea; color: var(--red); } .badge.green { background: var(--green-soft); color: var(--green); } /* --------------------------------------------------------------- dicepad */ .turnbar { border: 1px solid var(--ink); border-radius: var(--radius); padding: 13px 15px; display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: 17px; } .turnbar .spacer { flex: 1; } .turnbar.mine { background: var(--blue); border-color: var(--blue); color: #fff; } .turnbar.mine .sub { color: rgba(255, 255, 255, 0.85); } .turnbar.banked { border-color: var(--line-2); color: var(--muted); } .turnbar .sub { font-family: var(--body); font-weight: 400; font-size: 12.5px; color: var(--muted); } .dicepad { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; } .dicepad.off { opacity: 0.5; } .dicelab { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; } .dicestage { display: flex; gap: 20px; justify-content: center; align-items: center; min-height: 96px; padding: 6px 0 2px; } .die { width: 80px; height: 80px; border-radius: 15px; background: var(--theme-face, #0e1f3d); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.20), 0 10px 20px rgba(19, 21, 21, 0.18); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; flex: none; } .die .pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; width: 58px; height: 58px; } .pip { width: 100%; height: 100%; border-radius: 50%; } .pip.on { background: var(--theme-pip, #c9a227); box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25); } .dicestage.idle .die { opacity: 0.5; } .die.rolling { animation: dieTumble 0.85s cubic-bezier(0.3, 0.7, 0.35, 1) both; } #die2.rolling { animation-delay: 0.07s; } .die.settle { animation: dieSettle 0.28s ease-out; } @keyframes dieTumble { 0% { transform: rotate(0deg) translateY(0); } 18% { transform: rotate(120deg) translateY(-13px); } 45% { transform: rotate(250deg) translateY(4px); } 72% { transform: rotate(320deg) translateY(-7px); } 100% { transform: rotate(360deg) translateY(0); } } @keyframes dieSettle { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } } .themes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .swatches { display: flex; gap: 8px; } .swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--face, #ccc); border: 2px solid transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .swatch .dot { width: 8px; height: 8px; border-radius: 50%; background: #c9a227; } .swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; } .rollsummary { display: flex; align-items: center; gap: 10px; margin-top: 13px; font-size: 13.5px; border-top: 1px solid var(--line); padding-top: 13px; } .rollsummary .eq { font-family: var(--head); font-weight: 700; font-size: 18px; } .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .actions.single { grid-template-columns: 1fr; } .actions button { padding: 17px 10px; font-size: 16px; letter-spacing: 0.06em; } /* ---------------------------------------------------------------- banner */ .banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform 0.3s ease; border-top: 3px solid var(--orange); } .banner.show { transform: translateY(0); } .banner.bust { border-top-color: var(--red); } .banner.green { border-top-color: var(--green); } .banner .txt { font-family: var(--head); font-weight: 700; font-size: 15.5px; } /* ------------------------------------------------------------------ log */ .log { max-height: 230px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); } .log div { padding: 8px 12px; font-size: 13.5px; border-bottom: 1px solid var(--line); } .log div:last-child { border-bottom: none; } .log div.bust { background: #fdecea; color: var(--red); font-weight: 600; } .log div.bank { background: var(--green-soft); } .log div.double { background: var(--orange-soft); font-weight: 600; } .log div.safe { background: var(--blue-soft); } .log div.round { background: var(--band); font-weight: 600; } .log div.win { background: var(--ink); color: #fff; font-weight: 600; } .log div.undo { color: var(--muted); font-style: italic; } /* --------------------------------------------------------------- results */ .trophy { font-size: 44px; line-height: 1; } .winner-name { font-family: var(--head); font-size: 34px; font-weight: 700; } .winner-score { font-family: var(--head); font-size: 22px; color: var(--green); font-weight: 700; } details.rules { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; } details.rules summary { cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 15px; } details.rules ul { margin: 12px 0 0; padding-left: 20px; } details.rules li { margin-bottom: 7px; font-size: 14px; } .footer { border-top: 1px solid var(--line); background: var(--band); padding: 20px 0 30px; color: var(--muted); position: relative; z-index: 1; } .footer .wrap { font-size: 12px; } .err { color: var(--red); font-size: 13.5px; font-weight: 600; min-height: 18px; } .hide { display: none !important; } .invite { border: 1px solid var(--orange); background: var(--orange-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; font-size: 14px; } .invite strong { font-family: var(--head); font-weight: 700; letter-spacing: 0.08em; } @media (max-width: 420px) { h1 { font-size: 33px; } .potval { font-size: 46px; } .codebox { font-size: 36px; } .die { width: 68px; height: 68px; } .die .pips { width: 50px; height: 50px; } .actions button { font-size: 15px; padding: 16px 6px; } }