/* ========================================================================== TOKENS: deep emerald + charcoal neutrals, one gold accent, one radius ========================================================================== */ :root{ /* -- spacing scale: every margin/padding/gap in this file is one of these -- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --bg-app: #0a2218; /* deep emerald, app background */ --bg-panel: #12251d; /* cards, tiles, dock, header */ --bg-elevated: #182e24; /* modal sheets */ --bg-sunken: rgba(0,0,0,.28); /* inputs, chip rest state */ --bg-charcoal: #121212; /* board felt / deepest surface */ --border: rgba(212,175,55,.16); /* the one border colour */ --border-hi: rgba(212,175,55,.4); /* same hue, selected state */ --accent: #d4af37; /* the one accent colour: warm gold */ --accent-ink: #1a1300; /* text on top of accent fills */ --accent-glow: rgba(212,175,55,.12); /* soft ambient gold glow */ --ink-1: #eef1ec; /* primary text */ --ink-2: #9fb3a8; /* secondary text */ --ink-3: #66776d; /* captions, disabled */ --danger: #b5544a; /* semantic only, never decorative */ --radius: 12px; --radius-pill: 999px; --shadow-elevated: 0 1px 2px rgba(0,0,0,.4), 0 16px 32px rgba(0,0,0,.45); --shadow-card: 0 2px 8px rgba(0,0,0,.3), 0 0 1px rgba(212,175,55,.15); --dur: 140ms; --ease: ease-out; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ========================================================================== VISUAL AMBIENT / EYE-COMFORT SYSTEM Two lighting modes, toggled by adding/removing a single class on : - default (no class): VIP Night Mode — the dark wood/deep-emerald theme used everywhere above, unchanged. - body.theme-day: Warm Ambient / Day Mode — the same palette's hues, just lifted and softened (lighter surfaces, warmer ink, gentler borders) plus a subtle global sepia/brightness "glow" via `filter`, so it's easy on the eyes in bright rooms/daylight without losing the wood-and-gold identity. Every element already reads these variables, so this single block re-themes the entire app. The transition itself lives on body (below, alongside its other base rules). ========================================================================== */ body.theme-day{ --bg-app: #1e2f22; --bg-panel: #28392b; --bg-elevated: #314430; --bg-sunken: rgba(90,65,25,.20); --bg-charcoal: #2a2116; --border: rgba(212,175,55,.26); --border-hi: rgba(212,175,55,.55); --ink-1: #f5efe3; --ink-2: #b9ab8f; --ink-3: #8a7d64; --danger: #c2685a; filter: sepia(.06) saturate(.94) brightness(1.04) contrast(.97); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; } } /* ========================================================================== RESET ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; } /* Reinforces the fixed-position sizing above on engines that support the modern dynamic-viewport unit, so the app's true height tracks the visible viewport even while a mobile browser's address bar is animating in or out. Harmless where unsupported: body's position:fixed + inset:0 already pins it exactly to the visual viewport regardless. */ @supports (height: 100dvh){ html,body{ height:100dvh; } } body{ background:var(--bg-app); color:var(--ink-1); font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size:16px; line-height:1.45; overflow:hidden; position:fixed; inset:0; width:100%; -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior:none; transition: background .3s ease, filter .3s ease; /* smooth day/night lighting-mode crossfade */ } button, h1, h2, h3, .no-select{ -webkit-user-select:none; user-select:none; } img,svg{ display:block; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; -webkit-appearance:none; appearance:none; } button:focus-visible, [tabindex]:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius); } svg{ color:inherit; } /* ========================================================================== APP SHELL / SCREENS ========================================================================== */ #app{ position:relative; height:100%; width:100%; background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.04) 0%, transparent 60%), var(--bg-app); container-type: inline-size; container-name: app; transform: translateZ(0); transition: background .3s ease; } .screen{ position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .25s ease; } .screen.is-active{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; } /* Large screens (tablets in landscape, laptops, desktops): the board and every tile inside it still scale up to fill this frame (see the Domino engine's responsive geometry), it is simply capped at a comfortable width so nothing stretches into an unusable, ultra-wide sheet of tiles on a large monitor. Below this breakpoint the app stays fully edge to edge, exactly as on a phone. */ @media (min-width:1100px){ .screen{ left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:1100px; } body{ background:var(--bg-charcoal); } } /* ========================================================================== HUB HEADER ========================================================================== */ .hub-header{ display:flex; align-items:center; gap:var(--space-3); padding: calc(var(--space-3) + var(--safe-t)) calc(var(--space-3) + var(--safe-r)) var(--space-3) calc(var(--space-3) + var(--safe-l)); background: repeating-linear-gradient(180deg, rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 1px, rgba(255,255,255,.02) 1px, rgba(255,255,255,.02) 3px), linear-gradient(180deg, #14302380 0%, var(--bg-panel) 100%); border-bottom:1px solid var(--border); box-shadow: 0 1px 12px rgba(0,0,0,.25), inset 0 -1px 0 rgba(212,175,55,.08); } .brand{ flex:1; min-width:0; overflow:hidden; } .brand h1{ font-size:21px; font-weight:700; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.3px; background:linear-gradient(135deg, var(--ink-1) 40%, var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .brand p{ font-size:13px; color:var(--ink-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.2px; } @media (max-width:399px){ .brand h1{ font-size:17px; } .brand p{ font-size:11.5px; } } .icon-btn{ width:48px; height:48px; border-radius:var(--radius); display:grid; place-items:center; color:var(--ink-2); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .icon-btn:active{ background:var(--bg-sunken); color:var(--ink-1); transform:scale(.92); } @media (hover:hover){ .icon-btn:hover{ background:rgba(212,175,55,.08); color:var(--ink-1); } } .icon-btn svg{ width:20px; height:20px; transition:transform .2s ease; } /* Language switcher: plain text control, no icon container, remembers choice */ .lang-switch{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); height:48px; min-width:48px; padding:0 var(--space-3); border-radius:var(--radius); border:1px solid var(--border); color:var(--ink-1); font-size:13px; font-weight:600; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .lang-switch:active{ background:var(--bg-sunken); } .lang-switch svg{ width:16px; height:16px; color:var(--ink-2); } .hub-actions{ display:flex; gap:6px; flex-shrink:0; } @media (max-width:399px){ .hub-actions{ gap:2px; } .hub-actions .icon-btn{ width:40px; height:40px; } .hub-actions .lang-switch{ min-width:40px; height:40px; padding:0 6px; font-size:11px; } .hub-actions .lang-switch svg{ width:14px; height:14px; } } /* ========================================================================== GAME TILE GRID ========================================================================== */ .hub-body{ flex:1; min-height:0; overflow-y:auto; padding: var(--space-3) calc(var(--space-3) + var(--safe-r)) calc(var(--space-4) + var(--safe-b) + 12px) calc(var(--space-3) + var(--safe-l)); } .tile-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); max-width:640px; margin:0 auto; } @media (orientation:landscape){ .tile-grid{ grid-template-columns:repeat(4,1fr); max-width:900px; } } @media (min-width:720px){ .tile-grid{ max-width:720px; } } /* Container-query equivalents: respond to the app frame's own rendered width, not just the window's. Matters if this ever runs narrower than the full viewport (a desktop split-view pane, an embedded frame). */ @container app (min-width: 640px){ .tile-grid{ grid-template-columns:repeat(4,1fr); max-width:900px; } } @container app (min-width: 1080px){ .tile-grid{ grid-template-columns:repeat(5,1fr); max-width:1100px; gap:var(--space-4); } .hub-body{ padding: var(--space-4) calc(var(--space-4) + var(--safe-r)) calc(var(--space-4) + var(--safe-b)) calc(var(--space-4) + var(--safe-l)); } } /* ========================================================================== HUB SECTION LABELS: a plain, quiet heading above each package — states real product structure (offline vs. online), not a decorative eyebrow. ========================================================================== */ .hub-section-label{ max-width:640px; margin:0 auto var(--space-2); font-size:12.5px; font-weight:600; letter-spacing:.3px; color:var(--ink-2); padding:0 2px; } .hub-section-label-online{ margin-top:var(--space-4); } @container app (min-width: 640px){ .hub-section-label{ max-width:900px; } } @container app (min-width: 1080px){ .hub-section-label{ max-width:1100px; } } /* Online multiplayer: same tile family language (border, radius, background step) as the game tiles, so it reads as part of the same system rather than a bolted-on banner — just quietly disabled with a lock instead of an icon, and a small factual "Coming soon" label instead of a shiny badge. */ .online-locked-card{ width:100%; max-width:640px; margin:0 auto; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius); background:var(--bg-panel); border:1px solid var(--border); cursor:pointer; text-align:start; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .online-locked-card:active{ background:var(--bg-sunken); border-color:var(--border-hi); } @media (hover:hover){ .online-locked-card:hover{ border-color:var(--border-hi); } } .online-locked-icon{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-3); background:var(--bg-sunken); } .online-locked-icon svg{ width:19px; height:19px; } .online-locked-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .online-locked-text strong{ font-size:14px; font-weight:600; color:var(--ink-1); } .online-locked-text span{ font-size:12px; color:var(--ink-3); } .online-locked-badge{ flex:none; font-size:11px; font-weight:600; color:var(--accent); border:1px solid rgba(212,175,55,.35); border-radius:var(--radius-pill); padding:4px 10px; } @container app (min-width: 640px){ .online-locked-card{ max-width:900px; } } @container app (min-width: 1080px){ .online-locked-card{ max-width:1100px; } } .tile{ background: linear-gradient(145deg, rgba(255,255,255,.03) 0%, transparent 50%, rgba(0,0,0,.08) 100%), var(--bg-panel); border:1px solid rgba(197,160,89,.20); border-radius:var(--radius); padding:var(--space-3); aspect-ratio:1/1.32; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:var(--space-2); text-align:start; touch-action:manipulation; box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04); transition: background .25s ease, border-color .25s ease, box-shadow .3s ease, transform .25s ease; position:relative; overflow:hidden; } /* Subtle animated shimmer on tiles — a slow diagonal highlight sweep */ .tile::before{ content:""; position:absolute; inset:-50%; z-index:0; background:linear-gradient(105deg, transparent 40%, rgba(212,175,55,.04) 45%, rgba(212,175,55,.08) 50%, rgba(212,175,55,.04) 55%, transparent 60%); animation: tile-shimmer 8s ease-in-out infinite; pointer-events:none; } @keyframes tile-shimmer{ 0%,100%{ transform:translateX(-80%) rotate(25deg); } 50%{ transform:translateX(80%) rotate(25deg); } } .tile > *{ position:relative; z-index:1; } @media (orientation:landscape) and (max-height:420px){ .tile{ aspect-ratio:1/0.85; padding:var(--space-2); } } .tile:active{ background: linear-gradient(145deg, rgba(255,255,255,.05) 0%, transparent 50%, rgba(0,0,0,.05) 100%), var(--bg-elevated); border-color:rgba(197,160,89,.5); box-shadow: 0 0 0 1px rgba(197,160,89,.32), 0 0 12px rgba(197,160,89,.12), 0 6px 18px rgba(0,0,0,.28); transform:scale(.97); } @media (hover:hover){ .tile:hover{ border-color:rgba(212,175,55,.45); box-shadow: 0 0 0 1px rgba(212,175,55,.28), 0 10px 22px -6px rgba(212,175,55,.22), 0 8px 18px rgba(0,0,0,.28); transform:translateY(-4px); } .tile:hover .tile-icon{ transform:scale(1.1); filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)) drop-shadow(0 0 5px rgba(212,175,55,.45)); } .tile:hover .tile-icon::before{ opacity:1; transform:scale(1.15); } } .tile-icon{ position:relative; width:32px; height:32px; color:var(--accent); margin-bottom:auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 0 2px rgba(212,175,55,.25)); transition: transform .3s ease, filter .3s ease; } /* Soft radial gold aura sitting behind each icon — a quiet ambient glow at rest, blooming a little further on hover rather than appearing only then, so every tile reads as a lit, dimensional object rather than a flat glyph on a flat card. */ .tile-icon::before{ content:""; position:absolute; inset:-65%; background:radial-gradient(circle, rgba(212,175,55,.32) 0%, rgba(212,175,55,.1) 45%, transparent 72%); border-radius:50%; z-index:-1; filter:blur(3px); opacity:.8; transition: opacity .3s ease, transform .3s ease; } /* Real photo icons (as opposed to the small gold line-art SVGs): a big, square, edge-to-edge image that IS the card's artwork, with the game's live bilingual title/button rendered normally underneath — never baked into the picture itself, so language switching still works and there's only ever one "Play now" button per card. */ .tile-has-photo{ padding-bottom:var(--space-2); } /* Photo wrapper: a perfectly square viewport that centers the artwork inside the icon area, with a small inset so the picture never touches the tile's edges. The image itself is never cropped — it is scaled to fit entirely inside this square (object-fit:contain), then centered both horizontally and vertically. */ .tile-photo-wrap{ width:100%; aspect-ratio:1/1; margin-top:6px; margin-bottom:auto; padding:8px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:calc(var(--radius) - 2px); overflow:hidden; background:rgba(0,0,0,.15); } .tile-photo{ width:100%; height:100%; object-fit:contain; object-position:center; border-radius:calc(var(--radius) - 4px); box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .3s ease, box-shadow .3s ease; } @media (hover:hover){ .tile:hover .tile-photo{ transform:scale(1.03); box-shadow:0 6px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.3); } } .tile-tag{ display:none; } .tile-name{ margin-top:2px; } .tile-name .ar{ display:block; font-size:17px; font-weight:600; color:var(--ink-1); } .tile-play-btn{ display:block; width:100%; margin-top:8px; background:linear-gradient(180deg, #2fae5b 0%, #1e8a45 100%); color:#eafff0; font-size:13px; font-weight:700; text-align:center; padding:9px 0; border-radius:var(--radius-pill); box-shadow:0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18); } .tile-name .en{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px; } html[lang="en"] .tile-name .en{ font-size:16px; font-weight:600; color:var(--ink-1); } html[lang="en"] .tile-name .ar{ font-size:12.5px; color:var(--ink-2); margin-top:1px; } /* ========================================================================== GAME BOARD VIEW ========================================================================== */ .board-header{ display:flex; align-items:center; gap:var(--space-2); padding: calc(var(--space-3) + var(--safe-t)) calc(var(--space-3) + var(--safe-r)) var(--space-2) calc(var(--space-3) + var(--safe-l)); background: repeating-linear-gradient(180deg, rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px, rgba(255,255,255,.04) 1px, rgba(255,255,255,.04) 3px), linear-gradient(180deg, #7a5030 0%, #5a3620 40%, #46280f 100%); border-bottom:2px solid #2e1a0c; box-shadow: 0 3px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,200,100,.08); position:relative; z-index:1; } .board-title{ flex:1; text-align:center; min-width:0; overflow:hidden; } .board-title strong{ display:block; font-size:15px; font-weight:600; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .board-title span{ display:block; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .turn-hud{ position:relative; display:flex; justify-content:center; align-items:stretch; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--bg-panel); border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; } @media (max-width:399px){ .turn-hud{ gap:var(--space-1); padding:var(--space-2) var(--space-2); } } .player-pill{ display:flex; align-items:center; gap:var(--space-2); font-size:13px; color:var(--ink-2); } .player-pill i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); } .player-pill.is-turn{ color:var(--ink-1); } .player-pill.is-turn i{ background:var(--accent); } /* ========================================================================== VICTORY SPARKS: a light, short-lived gold particle burst used around the score HUD when a round is won. Pure CSS transforms/opacity (GPU-cheap, no layout thrash), auto-removed from the DOM once the animation ends so nothing lingers or accumulates. ========================================================================== */ .victory-spark-layer{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:40; } .victory-spark{ position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle, #fff6da 0%, var(--accent) 55%, transparent 100%); box-shadow:0 0 5px 1px rgba(212,175,55,.7); opacity:0; animation: victorySparkBurst 900ms cubic-bezier(.15,.7,.3,1) forwards; } @keyframes victorySparkBurst{ 0%{ opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--sx), var(--sy)) scale(.3); } } .board-stage{ flex:1; min-height:0; margin: var(--space-2) calc(var(--space-3) + var(--safe-r)) var(--space-2) calc(var(--space-3) + var(--safe-l)); background:var(--bg-charcoal); border:3px solid rgba(212,175,55,.22); border-radius:var(--radius); display:grid; place-items:stretch; overflow:hidden; position:relative; container-type:size; box-shadow: inset 0 0 80px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.3), 0 0 16px rgba(0,0,0,.35), 0 0 1px rgba(212,175,55,.15); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } @media (min-width:768px){ .board-stage{ margin: var(--space-3) calc(var(--space-3) + var(--safe-r)) var(--space-3) calc(var(--space-3) + var(--safe-l)); } } @media (min-width:1100px){ .board-stage{ margin: var(--space-3) calc(var(--space-4) + var(--safe-r)) var(--space-3) calc(var(--space-4) + var(--safe-l)); } } @media (max-height:420px) and (orientation:landscape){ .board-stage{ margin: var(--space-1) calc(var(--space-2) + var(--safe-r)) var(--space-1) calc(var(--space-2) + var(--safe-l)); } } .board-stage canvas{ width:100%; height:100%; display:block; touch-action:none; cursor:pointer; } /* Table themes: only the board felt/frame colour changes; header/dock chrome stays the same consistent gold-accent wood design across all three. The canvas paints the actual felt (with its own radial highlight, see DominoEngine.THEMES); this background is just the loading-state fallback glimpsed for a frame before the canvas first paints. */ /* Emerald's CSS background matches the canvas's own radial felt gradient (see DominoEngine THEMES.emerald / render()) so the board reads as vibrant green everywhere — including the rounded corners the canvas mask reveals a sliver of, and the instant before the canvas first paints — rather than falling back to the neutral charcoal .board-stage default. The border is a soft dark-green rim (not the wood colour) so the felt blends smoothly into the wooden frame around it instead of a hard brown edge cutting into the green. */ html[data-table-theme="emerald"] .board-stage{ background: radial-gradient(circle at 50% 42%, #2e9959 0%, #0f6b3c 55%, #08421f 100%); border-color: #06331a; } html[data-table-theme="mahogany"] .board-stage{ background:#1f120c; border-color:rgba(201,130,47,.24); } html[data-table-theme="onyx"] .board-stage{ background:#131315; border-color:rgba(185,172,134,.2); } /* ========================================================================== DOMINO & CARDS: a warm wood-and-gold bezel frame (light/mid/dark wood rings behind a bright gold inlay trim, plus a deep inset shadow so the felt reads as genuinely recessed into the frame), matching the reference professional table briefs for both games. Scoped strictly to these two games so the other games' subtler board-stage border is untouched. ========================================================================== */ #screen-board[data-game="dominoes"] .board-stage, #screen-board[data-game="cards"] .board-stage{ border: 3px solid #d4af37; box-shadow: /* felt sits recessed into the frame, catching a soft inner shadow */ inset 0 0 40px rgba(0,0,0,.55), inset 0 0 90px rgba(0,0,0,.35), /* layered wood-grain rings: light -> mid -> dark, for real depth instead of one flat brown border */ 0 0 0 3px #241407, 0 0 0 9px #6b4020, 0 0 0 14px #4a2c15, 0 0 0 18px #3a2010, /* the whole table lifts off the page */ 0 16px 34px rgba(0,0,0,.5); } /* Domino score/status readout reuses .turn-hud; these modifiers are additive only. Each pill is a comfortable grid cell: label on top, big number below, so the whole strip reads as a proper scoreboard rather than a row of inline text. */ .dom-score{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:3px var(--space-2); min-width:46px; flex-shrink:0; font-size:10.5px; letter-spacing:.4px; color:var(--ink-2); text-transform:uppercase; } .dom-score b{ font-family:"Courier New", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size:21px; letter-spacing:1px; text-transform:none; font-weight:700; color:#f5f3ee; text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.4); padding:0 6px; border-radius:6px; background: rgba(0,0,0,.22); } @media (max-width:399px){ .dom-score{ min-width:38px; padding:3px var(--space-1); font-size:9.5px; } .dom-score b{ font-size:17px; } } .dom-score.is-turn{ color:var(--ink-1); } .dom-score.is-turn b{ color:#fff6da; text-shadow: 0 0 8px rgba(212,175,55,.65), 0 0 18px rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.4); } .dom-score.score-pop{ animation: domScorePop 0.7s cubic-bezier(.22,1,.36,1); } .dom-score.score-pop b{ animation: domScorePopNum 0.7s cubic-bezier(.22,1,.36,1); } @keyframes domScorePop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.22); } 100%{ transform:scale(1); } } @keyframes domScorePopNum{ 0%{ transform:scale(1); text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.25); } 35%{ transform:scale(1.4); color:#fff6da; text-shadow: 0 0 16px rgba(212,175,55,.9), 0 0 32px rgba(255,255,255,.6); } 100%{ transform:scale(1); } } .dom-sep{ width:1px; align-self:stretch; margin:2px 0; background:var(--border); } /* Round counter: the first cell, set apart with an accent-tinted chip so it reads as "which lap of the match" rather than another score column. */ .dom-round{ background:rgba(212,175,55,.1); border-radius:var(--radius); } .dom-round b{ background:transparent; color:var(--accent); text-shadow:none; } /* Turn timer: the one deliberate, scoped glow in this app. It exists only during a timed human turn (Intermediate/Pro) and communicates real time pressure, not decoration. */ .turn-timer{ height:4px; margin:0 var(--space-3); border-radius:var(--radius-pill); background:rgba(255,255,255,.08); overflow:hidden; } .turn-timer-fill{ height:100%; width:100%; border-radius:var(--radius-pill); background:#6fae74; box-shadow:0 0 6px rgba(111,174,116,.7); transition:width 100ms linear, background-color 300ms ease, box-shadow 300ms ease; } .turn-timer-fill.is-yellow{ background:#d4af37; box-shadow:0 0 6px rgba(212,175,55,.7); } .turn-timer-fill.is-red{ background:#b5544a; box-shadow:0 0 6px rgba(181,84,74,.8); } .dom-status-row{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--bg-app); border-bottom:1px solid var(--border); font-size:12.5px; color:var(--ink-2); text-align:center; } .dom-status-row .btn{ flex:none; height:32px; padding:0 var(--space-3); font-size:12.5px; white-space:nowrap; } @media (max-width:359px){ .dom-status-row .btn{ padding:0 var(--space-2); font-size:11.5px; } } /* ========================================================================== TAULA-ONLY HEADER & STATUS REFINEMENT Scoped strictly to [data-game="taula"] so Dominoes/Cards/Chess keep their existing HUD/timer/status-row look untouched. Turns the plain HUD strip and status row into one continuous dark glass panel — semi-transparent, blurred, quietly lettered — and re-themes the turn timer from a bright green progress bar into a slim gold hairline that matches the velvet + gold-inlay identity instead of clashing with it. ========================================================================== */ #screen-board[data-game="taula"] .turn-hud{ background: linear-gradient(180deg, rgba(8,18,13,.6) 0%, rgba(8,18,13,.42) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: none; padding: 11px var(--space-3) 5px; } #screen-board[data-game="taula"] .player-pill{ font-size:13.5px; font-weight:500; letter-spacing:.3px; color:var(--ink-2); } #screen-board[data-game="taula"] .player-avatar{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; flex:none; background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.35); color:var(--ink-3); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } #screen-board[data-game="taula"] .player-avatar svg{ width:12px; height:12px; } #screen-board[data-game="taula"] .player-pill.is-turn .player-avatar{ color:#f5efd8; border-color:var(--accent); background:rgba(212,175,55,.22); box-shadow:0 0 6px rgba(212,175,55,.4); } #screen-board[data-game="taula"] .player-pill.is-turn{ color:#f5efd8; text-shadow:0 0 8px rgba(212,175,55,.3); } #screen-board[data-game="taula"] .player-pill.is-turn i{ box-shadow:0 0 5px rgba(212,175,55,.65); } #screen-board[data-game="taula"] .dom-sep{ background:rgba(212,175,55,.14); } #screen-board[data-game="taula"] #turn-timer{ height:2.5px; margin:2px var(--space-4) 9px; border-radius:var(--radius-pill); background:rgba(255,255,255,.05); } #screen-board[data-game="taula"] #turn-timer-fill{ background:linear-gradient(90deg, #c9a22e, #efd27e); box-shadow:0 0 4px rgba(212,175,55,.45); } #screen-board[data-game="taula"] #turn-timer-fill.is-yellow{ background:linear-gradient(90deg, #d4af37, #e8c454); box-shadow:0 0 5px rgba(212,175,55,.55); } #screen-board[data-game="taula"] #turn-timer-fill.is-red{ background:linear-gradient(90deg, #b5544a, #d97264); box-shadow:0 0 5px rgba(181,84,74,.6); } #screen-board[data-game="taula"] #tau-status-row{ background: linear-gradient(180deg, rgba(8,18,13,.42) 0%, rgba(6,14,10,.6) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom:1px solid rgba(212,175,55,.14); font-size:12.5px; font-weight:500; letter-spacing:.25px; color:var(--ink-1); padding: 7px var(--space-3) 11px; } /* Suit picker: shown centred over the board when a J/7 is played and the active player must choose the new suit. Plain overlay chip, no shadow trick beyond the standard elevated-surface shadow already used for sheets. */ .crd-suit-picker{ position:absolute; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3); text-align:center; box-shadow:var(--shadow-elevated); max-width:calc(100% - 24px); } .crd-suit-picker p{ font-size:13px; color:var(--ink-2); margin-bottom:var(--space-2); } .crd-suit-options{ display:flex; gap:var(--space-2); } .crd-suit-opt{ width:48px; height:48px; border-radius:var(--radius); font-size:26px; background:var(--bg-sunken); border:1px solid var(--border); display:grid; place-items:center; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .crd-suit-opt:active{ background:var(--bg-panel); transform:scale(.94); } /* ========================================================================== CHESS STAGE: a clean, flat top-down 2D board (no perspective, no rotateX — the request was explicit that the BOARD itself should read as directly overhead, not tilted). The luxury wood bezel and ivory/wood square colors are unchanged from the earlier 3D version. What still looks "3D" is the PIECES: each is a large glyph rendered with a multi-stop material gradient (ivory or dark wood) plus stacked drop-shadows for crisp, heavy depth, sitting on a soft grounded shadow — without any board tilt or counter-rotation math. Sizing uses CSS container queries (cqw/cqh): .chess-stage is a size container so .chess-scene can pick min(cqw,cqh) — the largest square that fits the actual box it's given on any phone or desktop, with zero JS layout math and no scrolling. Each .chess-sq is also its own size container so every piece/shadow/mark scales with its own square regardless of overall board size. ========================================================================== */ .chess-stage{ position:absolute; inset:0; z-index:3; align-items:center; justify-content:center; padding: 3%; container-type: size; display:none; } .chess-stage:not(.hidden){ display:flex; } .chess-scene{ width:min(94cqw, 94cqh); max-width:100%; aspect-ratio:1/1; } @supports not (container-type: size){ .chess-scene{ width:min(92vw, 82dvh, 82vh); } } .chess-board3d{ position:relative; width:100%; height:100%; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:6px; /* layered box-shadows fake a solid wooden bezel + gold inlay + floor contact shadow, without an extra DOM element to keep in sync. */ box-shadow: 0 0 0 3px #2e1a0c, 0 0 0 4px rgba(212,175,55,.6), 0 0 0 14px #4a2c15, 0 0 0 17px rgba(212,175,55,.35), 0 30px 50px -12px rgba(0,0,0,.6); } .chess-sq{ position:relative; container-type: size; display:flex; align-items:center; justify-content:center; overflow:visible; } .chess-sq.light{ background:linear-gradient(135deg,#f6ecd3 0%,#e7d3a3 100%); } .chess-sq.dark{ background:linear-gradient(135deg,#8d5c31 0%,#5e3b1c 100%); } .chess-sq::before{ /* subtle inner bevel per square so the board doesn't read as flat paint */ content:""; position:absolute; inset:0; box-shadow: inset 0 0 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); pointer-events:none; } .chess-sq.is-last{ box-shadow: inset 0 0 0 999px rgba(255,214,0,.2); } .chess-sq.is-selected{ box-shadow: inset 0 0 0 999px rgba(212,175,55,.5); } .chess-sq.is-check{ box-shadow: inset 0 0 22px 8px rgba(210,45,45,.65); } .chess-sq.is-hint{ box-shadow: inset 0 0 0 3px rgba(212,175,55,.95); } .chess-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:1; } .chess-mark.dot{ width:30cqw; height:30cqw; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(170,235,170,.95), rgba(90,180,90,.75) 70%); box-shadow:0 2px 4px rgba(0,0,0,.35); } .chess-mark.ring{ width:82cqw; height:82cqw; border-radius:50%; border: 7cqw solid rgba(120,215,120,.55); box-sizing:border-box; } .chess-piece-shadow{ position:absolute; left:50%; bottom:6%; z-index:1; width:66cqw; height:16cqh; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 74%); filter:blur(2px); pointer-events:none; } /* Bold, hand-friendly scale: the glyph nearly fills its square so pieces read as big, confident 3D-rendered objects sitting flat on the board — no tilt, no counter-rotation, just size + shadow + gradient. */ .chess-piece{ position:relative; z-index:2; width:100%; height:100%; display:flex; align-items:center; justify-content:center; pointer-events:none; } .chess-glyph{ position:relative; font-size:82cqw; line-height:1; font-family:"Segoe UI Symbol", Arial, sans-serif; filter: drop-shadow(0 3cqh 2cqh rgba(0,0,0,.5)) drop-shadow(0 8cqh 7cqh rgba(0,0,0,.4)); } /* Ivory / bone material: pale gradient text-fill with a bold dark stroke for high contrast against light squares, so the glyph reads as carved ivory catching light from above rather than a flat sticker. */ .chess-piece.piece-w .chess-glyph{ background:linear-gradient(180deg,#fffefb 0%, #f1e6c9 38%, #d3c093 72%, #a89468 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1.6px rgba(30,20,8,.85); } /* Dark royal wood: near-black gradient with a bright gold hairline edge so it never merges visually into the dark squares, even at small sizes. */ .chess-piece.piece-b .chess-glyph{ background:linear-gradient(180deg,#666666 0%, #2c2c2c 42%, #050505 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1.6px rgba(212,175,55,.85); } .chess-piece.is-hint .chess-glyph{ filter:drop-shadow(0 0 10cqw rgba(212,175,55,.9)); } /* ========================================================================== TAULA (BACKGAMMON) STAGE: same DOM/CSS approach as the chess board above (no canvas) — a real-wood bezel around a 14-column CSS grid (6 points, the bar, 6 points, the bear-off tray, twice over for the two halves). Checkers are plain circles with a radial-gradient material so they read as 3D-rendered ivory/ebony pieces sitting on green felt, matching the project's emerald + luxury-wood theme. ========================================================================== */ .taula-stage{ position:absolute; inset:0; z-index:3; align-items:center; justify-content:center; padding: 3%; container-type: size; display:none; } .taula-stage:not(.hidden){ display:flex; } .taula-scene{ position:relative; width:min(94cqw, calc(94cqh * 1.62)); max-width:100%; aspect-ratio: 1.62/1; } @supports not (container-type: size){ .taula-scene{ width:min(92vw, 148dvh, 148vh); } } .taula-board{ position:relative; width:100%; height:100%; /* The board's point numbering (1-24), bar position, and off-tray are a fixed physical layout — like a chessboard, not text. Without this, the whole grid mirrors under the page's dir="rtl" (Arabic UI), which visually swaps the off-tray column to the left edge and leaves what looks like an empty, unstyled gap where the layout no longer matches the wooden frame around it. Locking direction here keeps the board itself always left-to-right regardless of interface language. */ direction:ltr; display:grid; grid-template-columns: repeat(6,1fr) 8.5% repeat(6,1fr) 8.5%; grid-template-rows: 1fr 1fr; border-radius:8px; background: radial-gradient(circle at 50% 44%, #c9915a 0%, #a8703f 55%, #7c4f2a 100%); box-shadow: /* the wood play-surface sits slightly recessed into the frame, catching a soft shadow along its top edge and a faint warm glow along its bottom edge */ inset 0 4px 12px rgba(0,0,0,.55), inset 0 -2px 8px rgba(255,200,110,.06), /* dark inner lip, then the gold inlay line */ 0 0 0 3px #241407, 0 0 0 4px rgba(212,175,55,.65), /* layered wood-grain bands: light → mid → dark, for real depth instead of one flat brown ring */ 0 0 0 9px #6b4020, 0 0 0 12px #4a2c15, 0 0 0 16px #3a2210, /* outer gold inlay + drop shadow onto the table beneath */ 0 0 0 19px rgba(212,175,55,.32), 0 36px 60px -14px rgba(0,0,0,.65); } /* Ornate corner hardware, echoing a folding wooden case's metal brackets — four small dark squares with a fine gold trim, sitting on the outer rim. Top corners use ::before/::after (a single element only gets two pseudo- elements); the bottom two are real sibling divs in the HTML instead. */ .taula-board::before, .taula-board::after, .tau-board-corner-bl, .tau-board-corner-br{ content:""; position:absolute; width:16px; height:16px; background:linear-gradient(135deg,#2a180b,#140b04); border:1px solid rgba(212,175,55,.5); border-radius:3px; box-shadow:inset 0 0 3px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.4); z-index:3; pointer-events:none; } .taula-board::before{ top:-20px; left:-20px; } .taula-board::after{ top:-20px; right:-20px; } .tau-board-corner-bl{ bottom:-20px; left:-20px; } .tau-board-corner-br{ bottom:-20px; right:-20px; } .tau-point{ position:relative; } .tau-tri{ position:absolute; inset:4% 6%; filter: drop-shadow(0 2px 2.5px rgba(0,0,0,.32)); transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .tau-point.top .tau-tri{ clip-path: polygon(0 0, 100% 0, 50% 96%); } .tau-point.bottom .tau-tri{ clip-path: polygon(0 100%, 100% 100%, 50% 4%); } .tau-point.shade-a .tau-tri{ background:linear-gradient(180deg,#e6c589 0%,#c9a05a 100%); } .tau-point.shade-b .tau-tri{ background:linear-gradient(180deg,#8b4530 0%,#5e2c1c 100%); } .tau-point.is-legal .tau-tri{ filter:brightness(1.18) saturate(1.1) drop-shadow(0 2px 2.5px rgba(0,0,0,.32)); box-shadow:0 0 0 2px rgba(120,200,140,.95) inset, 0 0 10px 1px rgba(120,200,140,.55); } .tau-point.is-legal-hit .tau-tri{ box-shadow:0 0 0 2px rgba(211,60,50,.95) inset, 0 0 10px 1px rgba(211,60,50,.5); } .tau-point.is-selected .tau-tri{ box-shadow:0 0 0 3px rgba(212,175,55,1) inset; } .tau-point.is-hint .tau-tri{ animation: tauPulse 1s ease-in-out infinite; } @keyframes tauPulse{ 0%,100%{ filter:brightness(1) drop-shadow(0 2px 2.5px rgba(0,0,0,.32)); } 50%{ filter:brightness(1.55) drop-shadow(0 2px 2.5px rgba(0,0,0,.32)); } } /* The small "1"-"24" reference number at each point's outer edge — sits at the base of the triangle (nearest the rail), never overlapping checkers which stack inward from that same edge. */ .tau-point-num{ position:absolute; z-index:1; pointer-events:none; font-size:9px; font-weight:700; color:rgba(212,175,55,.75); left:50%; transform:translateX(-50%); } .tau-point.top .tau-point-num{ top:1%; } .tau-point.bottom .tau-point-num{ bottom:1%; } .tau-stack{ position:absolute; inset:0; display:flex; align-items:center; padding:6% 10%; pointer-events:none; z-index:2; } .tau-point.top .tau-stack{ flex-direction:column; justify-content:flex-start; } .tau-point.bottom .tau-stack{ flex-direction:column-reverse; justify-content:flex-start; } .tau-checker{ position:relative; width:88%; aspect-ratio:1/1; border-radius:50%; flex:none; margin-top:-24%; box-shadow: 0 3px 5px rgba(0,0,0,.5), 0 1.5px 2.5px rgba(0,0,0,.35), inset 0 1.5px 2px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.24); display:flex; align-items:center; justify-content:center; } .tau-stack > .tau-checker:first-child{ margin-top:0; } /* Small glossy specular highlight, painted before the count badge so it never sits on top of readable text — gives the ivory/ebony material a real polished-stone sheen instead of a flat tinted circle. */ .tau-checker::before{ content:""; position:absolute; top:13%; left:20%; width:34%; height:20%; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%); } .tau-checker.owner-w{ background:radial-gradient(circle at 34% 26%, #ffffff 0%, #fbf4de 20%, #f1e6c9 55%, #cbb583 100%); border:1px solid rgba(90,70,30,.42); } .tau-checker.owner-b{ background:radial-gradient(circle at 34% 26%, #6d6a64 0%, #423f3a 32%, #201e1b 68%, #0a0908 100%); border:1px solid rgba(212,175,55,.5); } .tau-checker.owner-b::before{ background:radial-gradient(ellipse, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 72%); } .tau-count{ font-size:11px; font-weight:700; color:#1a1300; background:rgba(212,175,55,.92); border-radius:50%; width:62%; height:62%; display:flex; align-items:center; justify-content:center; } .tau-checker.owner-b .tau-count{ color:#f1e6c0; background:rgba(0,0,0,.6); } .tau-bar-cell{ position:relative; background:linear-gradient(180deg,#3a2210,#241407); box-shadow:inset 0 0 10px rgba(0,0,0,.55); transition:box-shadow var(--dur) var(--ease); } .tau-bar-cell .tau-stack{ padding:6% 12%; } .tau-bar-cell.bar-top .tau-stack{ flex-direction:column; } .tau-bar-cell.bar-bottom .tau-stack{ flex-direction:column-reverse; } .tau-bar-cell.is-selected{ box-shadow: inset 0 0 0 3px rgba(212,175,55,1); } .tau-off-cell{ position:relative; /* Matches the bar cell's solid dark-wood notch (see .tau-bar-cell above) instead of a faint translucent tint over the green felt — a half-transparent overlay let the felt show through almost fully, which read as an accidental empty gap in the board rather than a deliberate bear-off slot, especially before any checkers have been borne off into it. A solid, matching background makes it look like built-in furniture on either edge of the board, regardless of which side it lands on. */ background:linear-gradient(180deg,#3a2210,#241407); box-shadow:inset 0 0 10px rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:box-shadow var(--dur) var(--ease); } .tau-off-cell .tau-off-stack{ display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; justify-content:center; max-width:100%; } .tau-off-cell .tau-off-stack .tau-checker{ width:22%; margin-top:0; box-shadow: 0 1.5px 2.5px rgba(0,0,0,.5), inset 0 1px 1.5px rgba(255,255,255,.4), inset 0 -1.5px 2px rgba(0,0,0,.22); } .tau-off-cell .tau-off-count{ font-size:12px; font-weight:700; color:var(--accent); } .tau-off-cell.is-legal{ box-shadow:inset 0 0 0 3px rgba(120,200,140,.9); } /* On-board dice: a small wood-and-gold tray that floats directly over the felt in the center bar lane (a side lane relative to the point columns, not the surrounding status chrome), so the roll always happens right on the table itself. */ .tau-dice-wrap{ grid-column:7; grid-row:1/3; align-self:center; justify-self:center; z-index:6; display:flex; flex-direction:column; gap:9%; align-items:center; justify-content:center; padding:8% 10%; border-radius:10px; background:linear-gradient(180deg, rgba(58,34,16,.85), rgba(36,20,7,.85)); box-shadow:0 0 0 1px rgba(212,175,55,.45), 0 6px 14px rgba(0,0,0,.5); cursor:default; } .tau-dice-wrap.is-tappable{ cursor:pointer; animation: tauDiceInvite 1.6s ease-in-out infinite; } @keyframes tauDiceInvite{ 0%,100%{ box-shadow:0 0 0 1px rgba(212,175,55,.45), 0 6px 14px rgba(0,0,0,.5); } 50%{ box-shadow:0 0 0 2px rgba(212,175,55,.7), 0 6px 16px rgba(0,0,0,.5), 0 0 8px 1px rgba(212,175,55,.2); } } .tau-die{ width: min(9cqw, 30px); height: min(9cqw, 30px); min-width:20px; min-height:20px; border-radius:6px; flex:none; background:linear-gradient(180deg,#fffef8,#e9dbb0); display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:14%; gap:6%; box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.6); transition: transform .5s cubic-bezier(.34,1.56,.64,1); } @supports not (container-type: size){ .tau-die{ width:26px; height:26px; } } .tau-die i{ border-radius:50%; background:transparent; } .tau-die i.on{ background:#1a1300; } .tau-die.is-used{ opacity:.35; filter:grayscale(1); } .tau-die.is-rolling{ animation: tauDiceTumble .55s ease-in-out; } @keyframes tauDiceTumble{ 0%{ transform:rotate(0deg) scale(1); } 25%{ transform:rotate(-100deg) scale(1.12); } 50%{ transform:rotate(140deg) scale(.96); } 75%{ transform:rotate(-60deg) scale(1.08); } 100%{ transform:rotate(0deg) scale(1); } } .tau-die.is-settling{ animation: tauDieSettle .32s ease-out; } @keyframes tauDieSettle{ 0%{ transform:scale(1.22); } 60%{ transform:scale(.94); } 100%{ transform:scale(1); } } .dock{ display:flex; justify-content:space-around; align-items:center; padding:var(--space-2) calc(var(--space-3) + var(--safe-r)) calc(var(--space-2) + var(--safe-b)) calc(var(--space-3) + var(--safe-l)); background: repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0px, rgba(0,0,0,.07) 1px, rgba(255,255,255,.04) 1px, rgba(255,255,255,.04) 3px), linear-gradient(180deg, #46280f 0%, #5a3620 40%, #7a5030 100%); border-top:2px solid #2e1a0c; box-shadow: 0 -3px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,200,100,.06); position:relative; z-index:1; } .dock button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--ink-2); font-size:10.5px; min-width:44px; min-height:48px; padding:var(--space-1); flex:1; } /* Circular gold-bordered icon badge — matches the reference apps' polished floating-button look instead of a bare icon sitting on the wood grain. */ .dock-icon{ display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.18) 100%); border:1.5px solid rgba(212,175,55,.32); box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.3); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; } @media (max-width:359px){ .dock button{ min-width:38px; font-size:9.5px; } .dock-icon{ width:34px; height:34px; } .dock button svg{ width:16px; height:16px; } }.dock button svg{ width:18px; height:18px; } .dock button:active .dock-icon{ transform:scale(.9); background:rgba(0,0,0,.28); } .dock button:active{ color:var(--ink-1); } .dock button.is-active{ color:var(--accent); } .dock button.is-active .dock-icon{ border-color:var(--accent); box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 0 8px rgba(212,175,55,.4); } @media (hover:hover){ .dock button:hover .dock-icon{ border-color:rgba(212,175,55,.55); } } /* ========================================================================== MODALS: Onboarding, Mode select, Settings ========================================================================== */ .overlay{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; opacity:0; visibility:hidden; transition:opacity .2s ease; } .overlay.is-open{ opacity:1; visibility:visible; } @media (min-width:560px){ .overlay{ align-items:center; } } .sheet{ width:100%; max-width:460px; max-height:96vh; max-height:96dvh; overflow-y:auto; overflow-x:hidden; background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%), var(--bg-elevated); border:1px solid rgba(212,175,55,.12); border-radius: var(--radius) var(--radius) 0 0; padding:20px var(--space-3) calc(var(--space-2) + var(--safe-b)); box-shadow: var(--shadow-elevated), 0 0 40px rgba(0,0,0,.3); transform:translateY(20px); opacity:0; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease; } .overlay.is-open .sheet{ transform:translateY(0); opacity:1; } @media (min-width:560px){ .sheet{ border-radius:var(--radius); } } .sheet-handle{ width:36px; height:4px; border-radius:var(--radius-pill); background:var(--ink-3); opacity:.5; margin:0 auto 16px; } @media (min-width:560px){ .sheet-handle{ display:none; } } /* Round-result trophy: shown only for genuine campaign-level completions (never for an ordinary in-progress round win), replacing the old 🏆 emoji so the icon always matches the app's own gold accent instead of whatever trophy glyph the device's font happens to render. */ .round-trophy{ width:44px; height:44px; margin:0 auto var(--space-2); color:var(--accent); filter: drop-shadow(0 0 6px rgba(212,175,55,.35)); } .round-trophy svg{ width:100%; height:100%; } .sheet h2{ font-size:20px; font-weight:600; color:var(--ink-1); margin-bottom:6px; } .sheet .lede{ font-size:13.5px; color:var(--ink-2); margin-bottom:16px; } /* Developer card: plain square avatar, no gradient, no glow */ .dev-card{ display:flex; gap:var(--space-3); align-items:center; background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3); margin-bottom:var(--space-3); } .dev-photo{ width:48px; height:48px; border-radius:var(--radius); flex:0 0 auto; background:var(--bg-panel); border:1px solid var(--border); display:grid; place-items:center; color:var(--accent); font-weight:700; font-size:15px; } .dev-meta strong{ display:block; font-size:14px; color:var(--ink-1); } .dev-meta span{ font-size:12px; color:var(--ink-2); } .onb-steps{ display:flex; gap:var(--space-2); margin-bottom:var(--space-3); } .onb-dot{ flex:1; height:3px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; } .onb-dot i{ display:block; height:100%; width:0; background:var(--accent); transition:width var(--dur) var(--ease); } .onb-dot.done i{ width:100%; } .onb-panel{ display:none; } .onb-panel.is-active{ display:block; } .onb-panel ul{ list-style:none; display:flex; flex-direction:column; gap:8px; } .onb-panel li{ font-size:13px; color:var(--ink-2); background:var(--bg-sunken); padding:var(--space-2) var(--space-3); border-radius:var(--radius); } .onb-panel li b{ color:var(--ink-1); font-weight:600; } .checkbox-row{ display:flex; align-items:center; gap:var(--space-2); margin:var(--space-3) 0; } .checkbox-row input{ width:18px; height:18px; accent-color:var(--accent); } .checkbox-row label{ font-size:13px; color:var(--ink-2); } .sheet-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-2); } /* Buttons: premium fills with subtle gradients for depth */ .btn{ flex:1; height:48px; padding:0 16px; border-radius:var(--radius); font-size:14.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .btn:active{ transform:scale(.97); } .btn-primary{ background:linear-gradient(180deg, #dbb944 0%, #c9a22e 100%); color:var(--accent-ink); box-shadow: 0 2px 8px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.18); } .btn-primary:active{ background:linear-gradient(180deg, #c9a22e 0%, #b8922a 100%); transform:scale(.97); box-shadow:0 1px 4px rgba(212,175,55,.2); } @media (hover:hover){ .btn-primary:hover{ box-shadow:0 3px 10px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.2); } } .btn-ghost{ background:var(--bg-sunken); border:1px solid var(--border); color:var(--ink-1); } .btn-ghost:active{ background:var(--bg-panel); transform:scale(.97); } @media (hover:hover){ .btn-ghost:hover{ border-color:var(--border-hi); background:rgba(212,175,55,.06); } } /* ========================================================================== MODE SELECT: segmented control, chips ========================================================================== */ .seg{ display:flex; background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-1); margin-bottom:var(--space-3); } .seg button{ flex:1; height:48px; border-radius:var(--radius-pill); font-size:13px; color:var(--ink-2); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .seg button:active{ transform:scale(.98); } .seg button.is-on{ background:var(--accent); color:var(--accent-ink); font-weight:600; } .opt-group{ margin-bottom:var(--space-3); } .opt-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-3); margin-bottom:var(--space-2); transition:opacity var(--dur) var(--ease); } .opt-group.is-disabled .opt-label{ opacity:.45; } .chip-row{ display:flex; flex-wrap:wrap; gap:8px; } .emote-chip{ flex:1 1 42%; display:flex; align-items:center; justify-content:center; min-width:0; } .chip{ height:48px; padding:0 var(--space-3); border-radius:var(--radius-pill); font-size:13px; color:var(--ink-2); background:var(--bg-sunken); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .chip:active{ transform:scale(.97); } .chip.is-on{ background:linear-gradient(180deg, #dbb944 0%, #c9a22e 100%); border-color:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:0 0 6px rgba(212,175,55,.22); } .seg button.is-on{ box-shadow:0 0 6px rgba(212,175,55,.22); } /* Professional grid layout for AI-level / player-count option rows: always evenly spaced and aligned regardless of item count (2 or 3), instead of flex-wrap's uneven last-row behaviour. */ .chip-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:8px; } .chip-grid .chip{ width:100%; } #mode-heading{ margin-bottom:4px; } #mode-lede{ margin-bottom:10px; } /* Free-play panel: compact spacing so the sheet fits on one screen without a scrollbar, matching the Campaign Levels tab. Scoped to this panel only — Settings, Feedback, and the emote picker keep their normal, roomier touch-target spacing. */ #panel-freeplay .seg{ margin-bottom:var(--space-2); } #panel-freeplay .seg button{ height:42px; font-size:12.5px; } #panel-freeplay .opt-group{ margin-bottom:var(--space-2); } #panel-freeplay .opt-label{ margin-bottom:6px; font-size:11px; } #panel-freeplay .chip{ height:40px; padding:0 var(--space-2); font-size:12px; } #panel-freeplay .chip-grid{ gap:6px; } #panel-freeplay .chip-grid .chip{ padding:0 4px; } /* AI-level and player-count sit side by side once there's enough width, halving the vertical space they take together; they stack normally on narrow phones where two 3-item grids would get too cramped. */ .opt-columns{ display:flex; flex-direction:column; } .opt-columns .opt-group{ flex:1; } @media (min-width:420px){ .opt-columns{ flex-direction:row; gap:var(--space-3); } } /* Game mode tabs (Free Play / Campaign Levels) + their panels */ .dom-panel{ display:none; } .dom-panel.is-active{ display:block; } /* Taula (backgammon) campaign panels — reuses the same .dom-panel class toggling pattern already proven by dominoes. */ .tau-panel{ display:none; } .tau-panel.is-active{ display:block; } .tau-levels-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:var(--space-2); } /* Taula-specific compact spacing — keeps the sheet single-screen even with the Campaign tab's 5-level grid, matching the domino freeplay panel. Cards (51) shares the exact same solo-vs-AI-only layout, so the same selectors are extended to #crd-panel-freeplay rather than duplicated. */ #tau-panel-freeplay .seg, #crd-panel-freeplay .seg, #bil-panel .seg{ margin-bottom:var(--space-2); } #tau-panel-freeplay .seg button, #crd-panel-freeplay .seg button, #bil-panel .seg button{ height:42px; font-size:12.5px; } #tau-panel-freeplay .opt-group, #crd-panel-freeplay .opt-group, #bil-panel .opt-group{ margin-bottom:var(--space-2); } #tau-panel-freeplay .opt-label, #crd-panel-freeplay .opt-label, #bil-panel .opt-label{ margin-bottom:6px; font-size:11px; } #tau-panel-freeplay .chip, #crd-panel-freeplay .chip, #bil-panel .chip{ height:40px; padding:0 var(--space-2); font-size:12px; } #tau-panel-freeplay .chip-grid, #crd-panel-freeplay .chip-grid, #bil-panel .chip-grid{ gap:6px; } #tau-panel-freeplay .chip-grid .chip, #crd-panel-freeplay .chip-grid .chip, #bil-panel .chip-grid .chip{ padding:0 4px; } /* AI-level selector is the only control in these free-play panels (Pass and Play removed), so it gets roomier, single-focus spacing. */ #tau-panel-freeplay #tau-group-ai, #crd-panel-freeplay #crd-group-ai, #bil-panel #bil-group-ai{ margin-bottom:0; } #tau-panel-freeplay #tau-group-ai .opt-label, #crd-panel-freeplay #crd-group-ai .opt-label, #bil-panel #bil-group-ai .opt-label{ font-size:12.5px; margin-bottom:10px; } #tau-panel-freeplay .tau-ai-grid, #crd-panel-freeplay .tau-ai-grid, #bil-panel .tau-ai-grid{ gap:10px; } #tau-panel-freeplay .tau-ai-grid .chip, #crd-panel-freeplay .tau-ai-grid .chip, #bil-panel .tau-ai-grid .chip{ height:52px; font-size:13.5px; padding:0 var(--space-2); } /* ========================================================================== CAMPAIGN LEVELS MAP ========================================================================== */ .levels-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:var(--space-2); } .level-card{ position:relative; aspect-ratio:1/1; border-radius:var(--radius); background:var(--bg-sunken); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:var(--space-1); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .level-card .level-num{ font-size:24px; font-weight:800; color:var(--ink-1); line-height:1; } .level-card .level-name{ font-size:9.5px; color:var(--ink-2); text-align:center; line-height:1.3; padding:0 2px; } .level-card .level-star{ position:absolute; top:5px; inset-inline-end:6px; font-size:13px; color:var(--accent); } .level-card .level-lock{ display:inline-flex; width:17px; height:17px; color:var(--ink-3); } .level-card .level-lock svg{ width:100%; height:100%; } .level-card.is-locked{ opacity:.42; } .level-card.is-unlocked{ border-color:rgba(212,175,55,.35); cursor:pointer; } .level-card.is-unlocked:active{ transform:scale(.94); background:var(--bg-panel); box-shadow:0 0 0 1px rgba(212,175,55,.4), 0 0 10px rgba(212,175,55,.16); } @media (hover:hover){ .level-card.is-unlocked:hover{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(212,175,55,.35), 0 0 12px rgba(212,175,55,.14); transform:translateY(-2px); } } .level-card.is-completed{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(212,175,55,.28), 0 0 8px rgba(212,175,55,.12); } .level-card.is-completed .level-num{ color:var(--accent); } .chip[disabled]{ opacity:.35; pointer-events:none; } /* ========================================================================== SETTINGS DRAWER ========================================================================== */ .drawer-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-1); border-bottom:1px solid var(--border); } .drawer-row:last-child{ border-bottom:none; } .drawer-row .lbl{ font-size:14px; color:var(--ink-1); } .drawer-row .sub{ font-size:12px; color:var(--ink-2); margin-top:1px; } .switch{ position:relative; width:44px; height:24px; border-radius:var(--radius-pill); background:var(--bg-sunken); border:1px solid var(--border); transition:background var(--dur) var(--ease); } .switch::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%; background:var(--ink-2); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); } .switch.is-on{ background:var(--accent); border-color:var(--accent); } .switch.is-on::after{ transform:translateX(20px); background:var(--accent-ink); } [dir="rtl"] .switch.is-on::after{ transform:translateX(-20px); } /* ========================================================================== VIP FEEDBACK & SUGGESTION MODAL ========================================================================== */ .feedback-form{ display:flex; flex-direction:column; gap:var(--space-3); } .fb-field{ display:flex; flex-direction:column; gap:6px; } .fb-field > span{ font-size:12.5px; color:var(--ink-2); } .fb-field input[type="text"], .fb-field input[type="email"], .fb-field input[type="password"], .fb-field textarea{ background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius); color:var(--ink-1); font-family:inherit; font-size:14.5px; padding:var(--space-2) var(--space-3); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); /* email/password fields render LTR-shaped chrome (e.g. the native reveal icon) even inside an RTL page; keeping direction explicit here avoids the browser mirroring that icon into an awkward spot. */ direction:ltr; text-align:start; } .fb-field textarea{ resize:vertical; min-height:88px; line-height:1.5; } .fb-field input[type="text"]:focus, .fb-field input[type="email"]:focus, .fb-field input[type="password"]:focus, .fb-field textarea:focus{ outline:none; border-color:rgba(197,160,89,.6); box-shadow:0 0 0 3px rgba(197,160,89,.15); } /* ========================================================================== ACCOUNT SIGN-IN SHEET: tab-style form status text + forgot-password link ========================================================================== */ .auth-status{ font-size:13px; line-height:1.5; padding:var(--space-2) var(--space-3); border-radius:var(--radius); background:var(--bg-sunken); color:var(--ink-2); } .auth-status.is-error{ color:var(--danger); } .auth-status.is-success{ color:var(--accent); } .auth-forgot{ align-self:flex-start; font-size:12.5px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; transition:color var(--dur) var(--ease); } .auth-forgot:active{ color:var(--accent); } @media (hover:hover){ .auth-forgot:hover{ color:var(--accent); } } /* Logged-in account card: same shape/spacing as .online-locked-card so it reads as the exact same design family, just swapping the lock icon for a checkmark and the "coming soon" badge for a real sign-out button. */ .online-account-icon{ color:var(--accent); } /* ========================================================================== ACCOUNT AVATAR: a simple tap-to-change profile picture. Stored as a small compressed data-URI in the account's own Auth metadata (see CloudSync) — no separate storage bucket/table needed for something this lightweight. ========================================================================== */ .account-avatar-btn{ position:relative; flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--bg-sunken); border:1.5px solid rgba(212,175,55,.4); color:var(--accent); display:flex; align-items:center; justify-content:center; } .account-avatar-btn img{ width:100%; height:100%; object-fit:cover; } .account-avatar-btn #account-avatar-fallback svg{ width:22px; height:22px; } .account-avatar-pencil{ position:absolute; bottom:-2px; inset-inline-end:-2px; width:16px; height:16px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--bg-panel); } .account-avatar-pencil svg{ width:9px; height:9px; } .account-avatar-btn:active{ transform:scale(.95); } .online-account-signout{ border:1px solid rgba(212,175,55,.35); background:none; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .online-account-signout:active{ background:var(--bg-sunken); border-color:var(--border-hi); } @media (hover:hover){ .online-account-signout:hover{ border-color:var(--border-hi); } } /* ========================================================================== ONLINE ROOM LOBBY: big shareable code, waiting spinner, matched banner ========================================================================== */ .room-state{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; } .room-choice-btn{ width:100%; } #room-join-field{ width:100%; } #room-join-code{ text-align:center; letter-spacing:4px; text-transform:uppercase; font-size:20px; } .room-code-display{ font-family:var(--font-mono, monospace); font-size:36px; font-weight:700; letter-spacing:8px; color:var(--accent); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3) var(--space-4); direction:ltr; } .room-waiting-label{ font-size:13.5px; color:var(--ink-2); } .room-matched-msg{ font-size:16px; color:var(--ink-1); } .room-spinner{ width:32px; height:32px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:room-spin 0.9s linear infinite; } @keyframes room-spin{ to{ transform:rotate(360deg); } } .room-players-list{ display:flex; flex-direction:column; gap:6px; width:100%; } .room-player-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-radius:var(--radius); background:var(--bg-sunken); font-size:13.5px; color:var(--ink-1); } .room-player-row .room-player-seat{ color:var(--ink-2); font-size:12px; } .room-player-row.is-filled{ border:1px solid rgba(212,175,55,.35); } /* ========================================================================== ONLINE MATCH CHAT ========================================================================== */ .chat-unread-dot{ position:absolute; top:1px; inset-inline-end:1px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 4px rgba(212,175,55,.7); } #btn-online-chat .dock-icon{ position:relative; } /* ========================================================================== CHAT PREVIEW BUBBLE: shows the actual incoming message above the dock icon (not just a bare notification dot) while the chat panel is closed. ========================================================================== */ #btn-online-chat{ position:relative; } .chat-preview-bubble{ position:absolute; bottom:calc(100% + 10px); left:0; transform:none; max-width:170px; width:max-content; background:var(--bg-panel); color:var(--ink-1); font-size:12px; line-height:1.35; padding:7px 11px; border-radius:12px; border:1px solid rgba(212,175,55,.4); box-shadow:0 4px 14px rgba(0,0,0,.4); text-align:start; white-space:normal; word-break:break-word; pointer-events:none; z-index:5; animation: chat-bubble-in .18s ease-out; } .chat-preview-bubble::after{ content:""; position:absolute; top:100%; left:16px; border:6px solid transparent; border-top-color:var(--bg-panel); } @keyframes chat-bubble-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } .chat-sheet{ max-height:80vh; display:flex; flex-direction:column; } .chat-messages{ flex:1; min-height:180px; max-height:44vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:var(--space-2) 2px; } .chat-msg{ max-width:82%; padding:8px 12px; border-radius:14px; font-size:14px; line-height:1.4; word-break:break-word; } .chat-msg .chat-msg-name{ display:block; font-size:11px; color:var(--ink-3); margin-bottom:2px; } .chat-msg.is-me{ align-self:flex-end; background:linear-gradient(180deg, #dbb944 0%, #c9a22e 100%); color:var(--accent-ink); border-bottom-right-radius:4px; } .chat-msg.is-them{ align-self:flex-start; background:var(--bg-sunken); border:1px solid var(--border); color:var(--ink-1); border-bottom-left-radius:4px; } .chat-msg.is-system{ align-self:center; background:none; color:var(--ink-3); font-size:12px; padding:2px 8px; } .chat-input-row{ display:flex; gap:8px; align-items:center; } .chat-input-row input{ flex:1; background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--ink-1); font-family:inherit; font-size:14px; padding:10px 16px; direction:auto; } .chat-input-row input:focus{ outline:none; border-color:rgba(197,160,89,.6); } .chat-send-btn{ flex-shrink:0; padding:0 var(--space-4); } .star-rating{ display:flex; gap:6px; direction:ltr; } /* 1→5 always reads left-to-right, regardless of app language */ .star{ background:none; border:none; padding:0; width:36px; height:36px; font-size:28px; line-height:36px; color:var(--ink-3); transition:color var(--dur) var(--ease), transform var(--dur) var(--ease); } .star:active{ transform:scale(.88); } .star.is-filled{ color:var(--accent); } .feedback-thanks{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); text-align:center; padding:var(--space-4) var(--space-3); } .feedback-thanks-icon{ width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:26px; font-weight:700; } .feedback-thanks p{ font-size:14.5px; color:var(--ink-1); } /* ========================================================================== TOAST: the one place besides modals a shadow is earned (floats above UI) ========================================================================== */ #toast{ position:fixed; left:50%; bottom:calc(20px + var(--safe-b)); transform:translate(-50%,140%); z-index:80; background:var(--bg-elevated); border:1px solid rgba(212,175,55,.2); color:var(--ink-1); font-size:13px; padding:var(--space-2) var(--space-3); border-radius:var(--radius-pill); box-shadow: var(--shadow-elevated), 0 0 12px rgba(212,175,55,.1); transition:transform .3s cubic-bezier(.22,1,.36,1); max-width:88vw; text-align:center; } #toast.show{ transform:translate(-50%,0); } /* ========================================================================== PRIVACY POLICY MODAL: scrollable legal text in the same sheet style ========================================================================== */ .privacy-body{ max-height:54vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--space-2) 0; font-size:13.5px; line-height:1.7; color:var(--ink-2); } .privacy-body h3{ font-size:14.5px; font-weight:600; color:var(--ink-1); margin:var(--space-3) 0 var(--space-1); } .privacy-body h3:first-child{ margin-top:0; } .privacy-body p{ margin-bottom:var(--space-2); } .privacy-body ul{ padding-inline-start:1.3em; margin-bottom:var(--space-2); } .privacy-body li{ margin-bottom:4px; } .privacy-body a{ color:var(--accent); text-decoration:underline; } .privacy-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); padding:var(--space-1) 0; transition:color var(--dur) var(--ease); } .privacy-link:active{ color:var(--accent); } .privacy-link svg{ width:14px; height:14px; flex:none; } /* ========================================================================== AD BANNER CONTAINER: responsive placeholder that stays below the hub tiles. Hidden by default until an ad network fills it. The container is styled to be non-intrusive and match the app's colour family. ========================================================================== */ .ad-banner{ width:100%; max-width:728px; min-height:50px; margin:0 auto var(--space-2); display:flex; align-items:center; justify-content:center; background:transparent; border-radius:var(--radius); overflow:hidden; } .ad-banner:empty{ display:none; } @media (max-width:767px){ .ad-banner{ max-width:100%; min-height:50px; } } @media (min-width:768px){ .ad-banner{ min-height:90px; } } .hidden{ display:none !important; } /* ========================================================================== LANDSCAPE-PHONE COMPACT CHROME: on a rotated phone the viewport is very short (often ~360–430px tall), and every fixed-height bar around the board-stage (header, HUD, status row, bottom dock) eats into that badly. None of these bars need their full portrait breathing room to stay legible — this tightens padding/sizes across all of them at once so the actual game canvas gets as much of that scarce height back as possible, instead of being squeezed down to almost nothing. Scoped to the board screen specifically (the hub/menus already have their own landscape handling and don't fight for canvas space). ========================================================================== */ @media (orientation:landscape) and (max-height:500px){ #screen-board .board-header{ padding-top: calc(var(--space-1) + var(--safe-t)); padding-bottom: var(--space-1); } #screen-board .board-title strong{ font-size:13px; } #screen-board .board-title span{ font-size:10.5px; } #screen-board .icon-btn{ width:34px; height:34px; } #screen-board .turn-hud{ padding:var(--space-1) var(--space-2); } #screen-board .player-pill{ font-size:11.5px; } #screen-board .dom-status-row{ padding:calc(var(--space-1) / 2) var(--space-2); font-size:11px; } #screen-board .dom-status-row .btn{ height:26px; font-size:11px; } #screen-board .dock{ padding: var(--space-1) calc(var(--space-2) + var(--safe-r)) calc(var(--space-1) + var(--safe-b)) calc(var(--space-2) + var(--safe-l)); } #screen-board .dock button{ min-height:34px; font-size:9px; gap:2px; } #screen-board .dock-icon{ width:28px; height:28px; } #screen-board .dock button svg{ width:14px; height:14px; } .board-stage{ margin: var(--space-1) calc(var(--space-1) + var(--safe-r)) var(--space-1) calc(var(--space-1) + var(--safe-l)); } }