/* ===================================================================== Kızma Birader (Ludo) — web client styles. Dark indigo/navy base + amber/orange accent (BirKart family). Turkish UI. No purple. Shell (screens/buttons/lists/overlays) mirrors the sibling Dama / Pişti web clients; board + token visuals are ported from the validated prototype (birkartoyunu-ios/prototypes/kizmabirader/index.html). ===================================================================== */ :root { --bg-0: #070b18; --bg-1: #0b1226; --bg-2: #131d3b; --bg-3: #1c2a52; --line: #26386b; --line-soft: rgba(38,56,107,0.45); --track: #eef2fb; --ink: #eef3ff; --ink-dim: #93a3c9; --ink-soft: #c4cfe8; --amber: #f5a524; --amber-2: #f7b84d; --amber-d: #c47f16; --red: #ef4444; --red-d: #b01c1c; --red-l: #ffd7d7; --teal: #17baa6; --teal-d: #0c7d70; --teal-l: #c7f2ec; --amb: #f59e0b; --amb-d: #b06d06; --amb-l: #ffe6bd; --blue: #3b82f6; --blue-d: #1d55c4; --blue-l: #d2e2ff; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: #05070f; overflow: hidden; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Unified full-viewport SCENE: the indigo gradient lives on (not the app column) so on desktop the centred content floats on one continuous backdrop — no hard-edged "phone strip on flat black". Faint amber + teal ambient glows and a soft vignette keep the margins alive without stealing focus from the board. On mobile the app fills the viewport, so this reads the same as before. */ body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(46% 40% at 15% 14%, rgba(245,165,36,0.06), transparent 62%), radial-gradient(46% 42% at 85% 86%, rgba(23,186,166,0.055), transparent 62%), radial-gradient(150% 120% at 50% -8%, rgba(120,150,230,0.10), transparent 55%), radial-gradient(135% 105% at 50% 2%, #16224a 0%, #0b1226 50%, #05070f 100%); background-attachment: fixed; } #app { position: relative; width: 100vw; height: 100dvh; /* wide enough for the game board to scale up on desktop (board caps at 680px). Background is TRANSPARENT so the column blends seamlessly into the body scene (no visible edge); mobile-style screens keep their own narrow inner max-widths. */ max-width: 720px; margin: 0 auto; background: transparent; overflow: hidden; } /* ---------- screens ---------- */ .screen { position: absolute; inset: 0; display: none; flex-direction: column; } .screen.show { display: flex; } .home-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 24px) 26px calc(var(--safe-b) + 30px); text-align: center; overflow-y: auto; /* ana menüye eklenen üst/alt reyon sığmazsa kırpmadan kaydırır */ } /* ===== Google AdSense yerleşimleri — yalnızca boş kenar/üst/alt alanlar; oyun alanını asla itmez/örtmez ===== */ .ad-slot { width: 100%; max-width: 340px; margin: 18px auto 0; text-align: center; overflow: hidden; } .ad-slot--header { min-height: 90px; margin-top: 16px; } .ad-slot--footer { min-height: 90px; margin-top: 20px; } .ad-slot .adsbygoogle { display: block; width: 100%; } .ad-rail { position: fixed; top: 50%; transform: translateY(-50%); width: 160px; height: 600px; max-height: calc(100vh - 40px); z-index: 90; display: none; overflow: hidden; } .ad-rail--left { left: 12px; } .ad-rail--right { right: 12px; } .ad-rail .adsbygoogle { display: block; width: 160px; height: 600px; } @media (min-width: 1100px) { .ad-rail { display: block; } } .crest { width: 100px; height: 100px; border-radius: 28px; margin-bottom: 18px; background: conic-gradient(from 45deg, var(--teal) 0 90deg, var(--amb) 90deg 180deg, var(--blue) 180deg 270deg, var(--red) 270deg 360deg); display: flex; align-items: center; justify-content: center; font-size: 42px; box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 0 0 4px rgba(255,255,255,0.14); } .crest.small { width: 62px; height: 62px; font-size: 28px; border-radius: 18px; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(255,255,255,0.14); } .title { font-size: 32px; font-weight: 800; letter-spacing: 1px; margin: 0; } .title.small { font-size: 24px; } .subtitle { font-size: 14px; color: var(--ink-dim); margin: 8px 0 28px; } .menu { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; } .btn { appearance: none; border: none; width: 100%; min-height: 54px; border-radius: var(--r-md); font-family: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform 0.08s ease, filter 0.15s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.35); } .btn:active { transform: translateY(2px) scale(0.99); filter: brightness(1.08); } .btn[disabled] { opacity: 0.45; pointer-events: none; } .btn-primary { background: linear-gradient(160deg, var(--amber-2), var(--amber-d)); color: #241400; } .btn-ghost { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); } .btn-confirm { background: linear-gradient(160deg, var(--teal), var(--teal-d)); } .joincode-row { display: flex; gap: 8px; width: 100%; max-width: 340px; margin-top: 16px; } .code-input, .name-input { flex: 1; min-height: 50px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-family: inherit; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: 2px; padding: 0 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .code-input:focus, .name-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,165,36,0.18); } .name-input { letter-spacing: normal; width: 100%; max-width: 340px; margin: 4px 0 2px; } .joincode-row .btn { width: auto; padding: 0 20px; min-height: 50px; } .home-err { color: #ff9b9b; font-size: 13px; min-height: 18px; margin: 12px 0 0; } .home-note { font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin-top: 22px; max-width: 340px; } .mute-btn { position: absolute; top: calc(var(--safe-t) + 12px); right: 14px; background: rgba(255,255,255,0.07); border: none; color: var(--ink); width: 40px; height: 40px; border-radius: 12px; font-size: 18px; cursor: pointer; } .mute-btn.small { position: static; width: 40px; height: 40px; } /* ---------- topbar ---------- */ .topbar { flex: 0 0 auto; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 12px; margin-top: var(--safe-t); } .icon-btn { width: 40px; height: 40px; border: none; background: rgba(255,255,255,0.07); border-radius: 12px; color: var(--ink); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .icon-btn:active { background: rgba(255,255,255,0.16); } .tb-title { font-size: 16px; font-weight: 700; } .tb-code { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--amber); } .tb-spacer { flex: 1; } /* ---------- list screens (browse / recent) — Çak-style centred cards ---------- */ .list-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 18px calc(var(--safe-b) + 20px); min-height: 0; } .list-card { width: 100%; max-width: 460px; display: flex; flex-direction: column; max-height: 100%; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px; box-shadow: 0 22px 50px rgba(0,0,0,0.5); } .list-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; } .list-title { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: 0.3px; } .refresh-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; } .list-tag { font-size: 13px; color: var(--ink-dim); text-align: center; margin: 8px 0 14px; line-height: 1.5; } .room-list { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 48vh; -webkit-overflow-scrolling: touch; } .room-row, .match-row { display: grid; align-items: center; gap: 11px; background: rgba(255,255,255,0.055); border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px 12px; animation: pop 0.22s ease; } .room-row { grid-template-columns: auto 1fr auto; } .match-row { grid-template-columns: auto 1fr; } .room-av, .match-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; } .room-av { background: linear-gradient(150deg, var(--bg-3), #1b2c5e); box-shadow: inset 0 0 0 2px var(--rc, rgba(255,255,255,0.14)), 0 3px 8px rgba(0,0,0,0.35); } .room-av.a0 { --rc: var(--teal); } .room-av.a1 { --rc: var(--amb); } .room-av.a2 { --rc: var(--blue); } .room-av.a3 { --rc: var(--red); } .match-av { background: linear-gradient(150deg, var(--amber-2), var(--amber-d)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.35); } .match-av.bot { background: linear-gradient(150deg, #8aa0cf, #46577f); } .room-meta, .match-meta { min-width: 0; text-align: left; } .room-host, .match-who { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-sub, .match-sub { font-size: 12px; font-weight: 600; color: var(--ink-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-code { color: var(--amber-2); font-weight: 800; letter-spacing: 1px; } .room-join { width: auto; min-height: 38px; min-width: 78px; padding: 0 16px; font-size: 14px; justify-self: end; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .list-empty { text-align: center; color: var(--ink-soft); font-size: 14.5px; font-weight: 700; padding: 26px 12px; line-height: 1.5; } .list-empty.hide { display: none; } .list-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .icon-btn.spinning { animation: spin 0.6s linear; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- lobby ---------- */ .lobby-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 22px calc(var(--safe-b) + 16px); overflow-y: auto; } .lobby-badge { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--amber); background: rgba(245,165,36,0.12); padding: 6px 14px; border-radius: 999px; margin-bottom: 12px; border: 1px solid rgba(245,165,36,0.24); } .lobby-code { font-size: 30px; font-weight: 800; letter-spacing: 4px; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px dashed var(--line); padding: 12px 24px; border-radius: var(--r-md); color: var(--amber-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .lobby-hint { font-size: 13px; color: var(--ink-dim); margin: 10px 0 18px; text-align: center; } .seat-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; } .seat-row { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.24); } .seat-row.me { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245,165,36,0.4), 0 4px 12px rgba(0,0,0,0.24); } .seat-row.empty { opacity: 0.5; border-style: dashed; box-shadow: none; } .pAvatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, var(--bg-3), #16224e); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } .pName { flex: 1; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--ink-soft); white-space: nowrap; } .badge.host { background: rgba(245,165,36,0.18); color: var(--amber-2); } .seat-row.s0 .pAvatar { color: var(--teal); } .seat-row.s1 .pAvatar { color: var(--amb); } .seat-row.s2 .pAvatar { color: var(--blue); } .seat-row.s3 .pAvatar { color: var(--red); } .lobby-actions { width: 100%; max-width: 340px; margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .wait-hint { text-align: center; color: var(--ink-dim); font-size: 14px; } /* ---------- name prompt (compact centered card) ---------- */ .name-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 22px calc(var(--safe-b) + 24px); } .name-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px 22px; box-shadow: 0 22px 50px rgba(0,0,0,0.5); } .name-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; } .name-sub { font-size: 13.5px; color: var(--ink-dim); margin: 0 0 16px; line-height: 1.5; } .name-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } /* ---------- player strip (game) ---------- */ /* Vertical chips: the name gets the FULL chip width (≈ full 4-up column), so 8-11 char names read without truncation even at 390px. */ .players { flex: 0 0 auto; width: var(--board-size); max-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 0; } .chip { display: flex; flex-direction: column; align-items: center; gap: 3px; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1.5px solid var(--line-soft); border-radius: 13px; padding: 8px 5px 7px; min-width: 0; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; } /* full-height accent bar keyed to the seat colour (matches the board yard) */ .chip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc); box-shadow: 0 0 6px -1px var(--cc); } .chip .cav { width: clamp(28px, calc(var(--board-size) * 0.078), 44px); height: clamp(28px, calc(var(--board-size) * 0.078), 44px); border-radius: 26%; background: linear-gradient(150deg, var(--bg-3), #16224e); display: flex; align-items: center; justify-content: center; font-size: clamp(15px, calc(var(--board-size) * 0.042), 22px); flex: 0 0 auto; box-shadow: inset 0 0 0 2px var(--cc, transparent); } .chip .cinfo { min-width: 0; width: 100%; line-height: 1.15; text-align: center; } .chip .cn { font-size: clamp(11.5px, calc(var(--board-size) * 0.031), 16px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip .cp { font-size: clamp(9.5px, calc(var(--board-size) * 0.024), 12.5px); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .chip.gone { opacity: 0.5; } .chip.c0 { --cc: var(--teal); } .chip.c1 { --cc: var(--amb); } .chip.c2 { --cc: var(--blue); } .chip.c3 { --cc: var(--red); } .chip.active { border-color: var(--cc); background: linear-gradient(160deg, var(--bg-3), #1a2b57); box-shadow: 0 0 0 1px var(--cc), 0 0 14px -2px var(--cc); } .chip.active .cav { box-shadow: inset 0 0 0 2px var(--cc), 0 0 8px -1px var(--cc); } .chip .cn { color: var(--cc); } .chip.active::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 6px var(--cc); animation: turnDot 1.1s ease-in-out infinite; } @keyframes turnDot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .chip.me { border-color: var(--amber); } /* SEN pill sits inline on the second (meta) line — never steals the name's width */ .chip .csen { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px; color: #241400; background: linear-gradient(160deg, var(--amber-2), var(--amber-d)); padding: 0 4px; border-radius: 999px; margin-right: 3px; vertical-align: middle; } /* ---------- game middle: board + action stay together, footer stays apart ---------- */ /* Chips + board + action ride together as ONE vertically-centred block, so any slack splits evenly top/bottom instead of pooling into a dead gap under the chips. */ .game-main { /* single source of truth for the game area: square, scales to viewport width AND height (300px reserved for topbar + chips + action + footer), capped at 680px so it never gets absurdly large on big monitors. Everything below (board, chip strip, dice, glyphs) derives its size from this so nothing breaks. */ --board-size: min(94vw, calc(100dvh - 300px), 680px); --dice: clamp(60px, calc(var(--board-size) * 0.155), 84px); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; min-height: 0; padding: 8px 10px calc(var(--safe-b) + 20px); } .play-area { position: relative; flex: 0 1 auto; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; width: 100%; } /* ---------- center-stage dice reveal ---------- */ .dice-stage { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; z-index: 30; } .dice-stage.show { display: flex; } .stage-die { position: relative; box-sizing: border-box; width: clamp(72px, calc(var(--board-size) * 0.22), 138px); height: clamp(72px, calc(var(--board-size) * 0.22), 138px); border-radius: 22%; background: linear-gradient(155deg, #ffffff, #d7deee); display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: calc(var(--board-size) * 0.028); gap: calc(var(--board-size) * 0.009); box-shadow: 0 20px 44px rgba(0,0,0,0.6), inset 0 -4px 8px rgba(0,0,0,0.14), inset 0 3px 5px rgba(255,255,255,0.9), 0 0 0 5px var(--dc, rgba(255,255,255,0.16)); transition: box-shadow 0.2s ease; } .stage-die .pip { width: 68%; height: 68%; place-self: center; border-radius: 50%; background: transparent; } .stage-die .pip.on { background: radial-gradient(circle at 35% 30%, #3a3f52, #12151f); box-shadow: inset 0 -1px 2px rgba(255,255,255,0.25); } /* Gentle bounce-and-tilt while the pip faces flip (JS changes them every 110ms). Max ~10° tilt keeps every face LEGIBLE — no fast 360° spin that blurs the pips into an unreadable white square. */ .stage-die.tumbling { animation: stageTumble 0.28s ease-in-out infinite; } @keyframes stageTumble { 0% { transform: translateY(0) rotate(-10deg) scale(1.05); } 50% { transform: translateY(-8%) rotate(10deg) scale(0.97); } 100% { transform: translateY(0) rotate(-10deg) scale(1.05); } } /* ease-out settle onto the final value */ .stage-die.settle { animation: stageSettle 0.44s cubic-bezier(0.16,1.2,0.3,1); } @keyframes stageSettle { 0% { transform: rotate(0deg) scale(0.7); } 55% { transform: rotate(0deg) scale(1.12); } 100% { transform: rotate(0deg) scale(1); } } .stage-die.six::after { content: ""; position: absolute; inset: -7px; border-radius: 26%; box-shadow: 0 0 26px 5px rgba(245,165,36,0.85); animation: sixGlow 0.75s ease-in-out infinite; } @keyframes sixGlow { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } } .dice-stage.out { animation: stageOut 0.16s ease forwards; } @keyframes stageOut { to { opacity: 0; transform: scale(0.92); } } .stage-label { display: flex; align-items: center; gap: 7px; font-size: clamp(13px, calc(var(--board-size) * 0.032), 18px); font-weight: 800; color: var(--ink); background: rgba(10,16,34,0.86); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,0.45); max-width: 92%; } .stage-label .sl-six { color: var(--amber-2); font-weight: 800; } @media (prefers-reduced-motion: reduce) { .stage-die.tumbling, .stage-die.settle, .stage-die.six::after, .dice-stage.out { animation: none; } } .board { position: relative; width: var(--board-size); max-width: 100%; aspect-ratio: 1/1; font-size: calc(var(--board-size) * 0.043); /* base unit for board glyphs (scales) */ background: linear-gradient(160deg, #22346a 0%, var(--bg-3) 45%, var(--bg-2) 100%); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 32px rgba(0,0,0,0.35), 0 18px 38px rgba(0,0,0,0.5); padding: 3.2%; overflow: hidden; /* standard Ludo convention: the local player's yard rotates to the bottom. Multiples of 90° keep the square's bounding box identical → zero layout shift. Protocol/geometry are untouched; this is a pure presentation rotation. */ --board-rot: 0deg; transform: rotate(var(--board-rot)); transition: transform 0.35s ease; } .board::before { content: ""; position: absolute; inset: 1.6%; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); pointer-events: none; z-index: 1; } /* capture feedback: brightness pulse (no transform) so it never fights --board-rot */ .board.shake { animation: boardFlash 0.36s ease; } @keyframes boardFlash { 0%,100% { filter: none; } 45% { filter: brightness(1.16) saturate(1.1); } } .board-grid { position: absolute; inset: 3.2%; z-index: 2; } /* colored home yards (corner bases) */ .base { position: absolute; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.22), inset 0 2px 8px rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.3); } .base .base-in { position: absolute; inset: 16%; background: radial-gradient(120% 120% at 50% 25%, #16204a, var(--bg-1) 70%); border-radius: 12px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04); } /* "this yard is YOURS" — persistent ring; strengthens on your turn */ .base.mine { box-shadow: inset 0 0 0 3px rgba(245,165,36,0.9), inset 0 2px 8px rgba(255,255,255,0.18), 0 0 16px -2px rgba(245,165,36,0.7), 0 4px 12px rgba(0,0,0,0.3); } .base.mine .sen-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(calc(-1 * var(--board-rot, 0deg))); font-size: 0.72em; font-weight: 800; letter-spacing: 0.5px; color: #241400; background: linear-gradient(160deg, var(--amber-2), var(--amber-d)); padding: 0.15em 0.55em; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); z-index: 3; white-space: nowrap; } .base.mine.turn { box-shadow: inset 0 0 0 3px var(--amber), inset 0 2px 8px rgba(255,255,255,0.18), 0 0 22px 0 rgba(245,165,36,0.8), 0 4px 12px rgba(0,0,0,0.35); animation: yardPulse 1.2s ease-in-out infinite; } @keyframes yardPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* track cells */ .cell { position: absolute; background: linear-gradient(160deg, #ffffff, #dfe6f3); box-shadow: inset 0 0 0 1px rgba(30,45,90,0.55), inset 0 1px 1px rgba(255,255,255,0.7); } .cell.safe { display: flex; align-items: center; justify-content: center; } .cell.safe::after { content: "★"; font-size: 66%; color: rgba(196,127,22,0.7); text-shadow: 0 1px 0 rgba(255,255,255,0.6); transform: rotate(calc(-1 * var(--board-rot, 0deg))); } .c-teal { background: linear-gradient(160deg, #23d4bd, var(--teal-d)); } .c-amb { background: linear-gradient(160deg, #ffb638, var(--amb-d)); } .c-blue { background: linear-gradient(160deg, #5a9bff, var(--blue-d)); } .c-red { background: linear-gradient(160deg, #ff6161, var(--red-d)); } .cell.c-teal, .cell.c-amb, .cell.c-blue, .cell.c-red { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22), inset 0 1px 2px rgba(255,255,255,0.4); } .cell.c-teal.safe::after, .cell.c-amb.safe::after, .cell.c-blue.safe::after, .cell.c-red.safe::after { color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.45); } /* start cells show a flow ARROW (rotates WITH the board so direction stays true) */ .cell.start::after { content: "➤"; font-size: 62%; color: rgba(255,255,255,0.95); text-shadow: 0 1px 2px rgba(0,0,0,0.5); transform: rotate(var(--arrow, 0deg)); } .cell.start-r { --arrow: 0deg; } .cell.start-d { --arrow: 90deg; } .cell.start-l { --arrow: 180deg; } .cell.start-u { --arrow: 270deg; } .base.c-teal { background: linear-gradient(150deg, #2ee0c9, var(--teal-d)); } .base.c-amb { background: linear-gradient(150deg, #ffc45c, var(--amb-d)); } .base.c-blue { background: linear-gradient(150deg, #6ba6ff, var(--blue-d)); } .base.c-red { background: linear-gradient(150deg, #ff7a7a, var(--red-d)); } /* home-run columns — SATURATED so each colour's lane reads clearly (not pastel) */ .cell.hr-teal { background: linear-gradient(160deg, #38d9c6, #12a08f); } .cell.hr-amb { background: linear-gradient(160deg, #ffc255, #c98207); } .cell.hr-blue { background: linear-gradient(160deg, #6aa5ff, #2f66d6); } .cell.hr-red { background: linear-gradient(160deg, #ff8080, #d63b3b); } .cell.hr-teal, .cell.hr-amb, .cell.hr-blue, .cell.hr-red { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.35); } .center { position: absolute; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: conic-gradient(from 45deg, var(--teal) 0 90deg, var(--amb) 90deg 180deg, var(--blue) 180deg 270deg, var(--red) 270deg 360deg); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.22), inset 0 2px 10px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.35); } .center::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: rgba(11,18,38,0.72); box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); } .center span { position: relative; font-size: 118%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); transform: rotate(calc(-1 * var(--board-rot, 0deg))); } .token { position: absolute; width: 5.6%; aspect-ratio: 1/1; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid rgba(255,255,255,0.85); box-shadow: 0 3px 5px rgba(0,0,0,0.55), inset 0 -2px 3px rgba(0,0,0,0.35), inset 0 2px 3px rgba(255,255,255,0.35); transition: left 0.18s ease, top 0.18s ease, transform 0.12s ease; z-index: 5; } .token::after { content: ""; position: absolute; top: 14%; left: 20%; width: 36%; height: 30%; border-radius: 50%; background: rgba(255,255,255,0.6); filter: blur(0.3px); } .token.t0 { background: radial-gradient(circle at 35% 28%, #6ff0e2, var(--teal) 52%, var(--teal-d)); } .token.t1 { background: radial-gradient(circle at 35% 28%, #ffd27a, var(--amb) 52%, var(--amb-d)); } .token.t2 { background: radial-gradient(circle at 35% 28%, #9cc4ff, var(--blue) 52%, var(--blue-d)); } .token.t3 { background: radial-gradient(circle at 35% 28%, #ff9494, var(--red) 52%, var(--red-d)); } .token.movable { cursor: pointer; z-index: 8; box-shadow: 0 0 0 3px rgba(255,255,255,0.92), 0 0 14px rgba(245,165,36,0.75), 0 3px 5px rgba(0,0,0,0.55); } .token.movable:active { transform: translate(-50%, -50%) scale(0.9); } .token.hint { animation: hintPulse 0.9s ease-in-out infinite; } @keyframes hintPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.92), 0 0 8px rgba(245,165,36,0.55), 0 3px 5px rgba(0,0,0,0.55); } 50% { box-shadow: 0 0 0 5px rgba(245,165,36,0.95), 0 0 20px rgba(245,165,36,0.95), 0 3px 5px rgba(0,0,0,0.55); } } .token.capd { animation: capShake 0.4s ease; } @keyframes capShake { 0%,100% { transform: translate(-50%,-50%) rotate(0); } 30% { transform: translate(-50%,-50%) rotate(-16deg) scale(1.15); } 60% { transform: translate(-50%,-50%) rotate(12deg); } } .token.done { opacity: 0.92; } /* Landing hint: a soft dashed ring in the viewer's seat colour showing where a movable pull would land after the roll. Sits UNDER real tokens (z 4 < 5) and never intercepts taps. Shown only via .on. */ .dest-hint { position: absolute; width: 5.6%; aspect-ratio: 1/1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; border: 2px dashed currentColor; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); opacity: 0; visibility: hidden; transition: opacity 0.16s ease; } .dest-hint.t0 { color: var(--teal); } .dest-hint.t1 { color: var(--amb); } .dest-hint.t2 { color: var(--blue); } .dest-hint.t3 { color: var(--red); } .dest-hint.on { opacity: 1; visibility: visible; animation: destPulse 1s ease-in-out infinite; } @keyframes destPulse { 0%,100% { box-shadow: 0 0 6px currentColor, inset 0 0 5px rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 15px currentColor, inset 0 0 8px rgba(255,255,255,0.5); } } /* ---------- action area: sits right UNDER the board, apart from the footer ---------- */ .controls { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; width: var(--board-size); max-width: 100%; } .status { font-size: clamp(14px, calc(var(--board-size) * 0.036), 18px); font-weight: 700; color: var(--ink-soft); min-height: 22px; line-height: 1.35; text-align: center; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 4px; } .status .badge-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 6px currentColor; } .dice { width: var(--dice); height: var(--dice); border-radius: calc(var(--dice) * 0.27); background: linear-gradient(155deg, #ffffff, #d7deee); box-shadow: 0 7px 16px rgba(0,0,0,0.45), inset 0 -3px 5px rgba(0,0,0,0.14), inset 0 2px 3px rgba(255,255,255,0.9); border: none; cursor: pointer; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: calc(var(--dice) * 0.13); gap: calc(var(--dice) * 0.04); transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease; } .dice:not([disabled]) { box-shadow: 0 7px 16px rgba(0,0,0,0.45), inset 0 -3px 5px rgba(0,0,0,0.14), inset 0 2px 3px rgba(255,255,255,0.9), 0 0 0 3px rgba(245,165,36,0.4); animation: diceReady 1.6s ease-in-out infinite; } @keyframes diceReady { 0%,100% { box-shadow: 0 7px 16px rgba(0,0,0,0.45), inset 0 -3px 5px rgba(0,0,0,0.14), inset 0 2px 3px rgba(255,255,255,0.9), 0 0 0 3px rgba(245,165,36,0.35); } 50% { box-shadow: 0 7px 16px rgba(0,0,0,0.45), inset 0 -3px 5px rgba(0,0,0,0.14), inset 0 2px 3px rgba(255,255,255,0.9), 0 0 0 5px rgba(245,165,36,0.55); } } .dice:active { transform: scale(0.94); } .dice[disabled] { opacity: 0.55; cursor: default; filter: grayscale(0.35); animation: none; } .dice.rolling { animation: diceRoll 0.42s ease; } @keyframes diceRoll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } } .pip { width: 68%; height: 68%; place-self: center; border-radius: 50%; background: transparent; } .pip.on { background: radial-gradient(circle at 35% 30%, #3a3f52, #12151f); box-shadow: inset 0 -1px 1px rgba(255,255,255,0.2), 0 0.5px 0.5px rgba(255,255,255,0.4); } .dice-label { font-size: clamp(11px, calc(var(--board-size) * 0.028), 14px); color: var(--ink-dim); min-height: 15px; line-height: 1.3; text-align: center; } /* ---------- toast / overlay / banners ---------- */ #toastWrap { position: absolute; top: 96px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 120; } .toast { background: rgba(10,16,34,0.94); color: var(--ink); border: 1px solid var(--line); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 7px; } .toast.show { opacity: 1; transform: none; } .toast .tdot { width: 9px; height: 9px; border-radius: 50%; } .global-toast { position: absolute; bottom: calc(var(--safe-b) + 96px); left: 50%; transform: translateX(-50%) translateY(12px); background: rgba(10,16,34,0.95); color: var(--ink); border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 200; pointer-events: none; max-width: 90%; text-align: center; box-shadow: 0 8px 22px rgba(0,0,0,0.45); } .global-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,10,22,0.82); backdrop-filter: blur(5px); z-index: 150; padding: 26px; } .overlay.show { display: flex; } .result-card { width: 100%; max-width: 300px; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 24px 26px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.6); animation: pop 0.32s cubic-bezier(0.2,1.3,0.4,1); } @keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .result-emoji { font-size: 54px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); } .result-title { font-size: 26px; font-weight: 800; margin: 8px 0 4px; } .result-sub { font-size: 14px; color: var(--ink-dim); margin-bottom: 20px; line-height: 1.5; } .result-card .btn { margin-top: 10px; } #confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 149; } .conf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confFall linear forwards; } @keyframes confFall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(105dvh) rotate(720deg); opacity: 0.9; } } .conn-banner { position: absolute; top: var(--safe-t); left: 0; right: 0; background: #b01c1c; color: #fff; font-size: 13px; font-weight: 700; text-align: center; padding: 8px; transform: translateY(-100%); transition: transform 0.25s ease; z-index: 300; } .conn-banner.show { transform: none; } .conn-banner.ok { background: var(--teal-d); } /* Back-to-hub pill on the HOME hero. Mirrors the çak client's .hubBack affordance (rounded-full translucent-white pill, bold label, subtle hover/active), adapted to this dark-navy palette: a touch more opacity + a hairline inset border so it reads on the navy backdrop, and the amber focus ring instead of çak's gold. Lives inside .home-wrap so it only appears on the HOME screen and sits at the top of the centered hero, above the crest/title. Navigates out to the games hub. */ .hub-back { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--ink); text-decoration: none; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); border-radius: 999px; padding: 7px 16px; margin: 0 0 22px; transition: transform 0.08s ease, background 0.15s ease; } .hub-back:hover { background: rgba(255,255,255,0.15); } .hub-back:active { transform: translateY(1px); } .hub-back:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .token, .token.hint, .dest-hint.on, .chip.active::after, .dice:not([disabled]) { animation: none !important; } .token { transition: none; } }