/* ═══════════════════════════════════════ TABLA WORLD — DAMAH / דמקה RTL · Hebrew · Arabic · Dark Brown Theme ═══════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;600;700;900&display=swap'); /* ── DESIGN TOKENS ── */ :root { --bg: var(--world-bg, #0d0d0f); --bg2: var(--world-bg-2, #17171a); --wood-dark: #6b3a1f; --wood-mid: #8b4513; --wood-light: #a0522d; --wood-grain: #7a3e18; --cell-dark: #3d1a00; --cell-light: #e8c99a; --gold: var(--world-accent, #b9f36b); --gold2: var(--world-accent-2, #d7ff9b); --red-hi: #ff6b6b; --red-base: #dc2626; --red-dark: #991b1b; --white-hi: #ffffff; --white-base: #f3f4f6; --white-dark: #9ca3af; --text: var(--world-text, #f5f5f5); --text-dim: var(--world-muted, #a6a6ad); --accent: var(--world-accent, #b9f36b); --accent-2: var(--world-accent-2, #d7ff9b); --shadow: rgba(0,0,0,0.7); --board-size: min(92vw, 92vh, 480px); --cell-size: calc(var(--board-size) / 8); --radius: 12px; --font-main: 'Heebo', 'Segoe UI', 'Arial', sans-serif; } /* ── RESET / BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; background: var(--bg, #0d0d0f); color: var(--text); font-family: var(--font-main); /* No `direction: rtl` here: an author rule on html/body outranks the [dir] attribute the language switcher sets, so English stayed RTL no matter what the player picked. Direction now follows , which the game sets. */ overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent; } button { cursor: pointer; border: none; font-family: inherit; font-size: inherit; transition: transform .12s, filter .12s; touch-action: manipulation; } button:active { transform: scale(0.94); } /* ── DAMAH HEADER (back to lobby) ── */ .damah-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--world-panel, rgba(18,20,24,.82)); border-bottom: 1px solid var(--world-line, rgba(185,243,107,.18)); position: fixed; top: 0; left: 0; right: 0; z-index: 50; } .back-btn { color: var(--world-accent, #b9f36b); text-decoration: none; font-size: 0.9rem; font-family: 'Heebo', sans-serif; font-weight: 600; padding: 6px 12px; border: 1px solid var(--world-line, rgba(185,243,107,.28)); border-radius: 8px; transition: background 0.2s; } .back-btn:hover { background: rgba(185,243,107,0.15); } .damah-brand { font-family: 'Heebo', sans-serif; font-size: 1.1rem; font-weight: 900; color: var(--world-accent, #b9f36b); text-shadow: 0 0 15px rgba(185,243,107,0.5); } /* ── SCREENS ── */ .screen { display: none; position: fixed; top: 44px; /* offset for header bar */ bottom: 0; left: 0; right: 0; align-items: center; justify-content: center; flex-direction: column; gap: 0; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--bg2, #17171a) 88%, transparent), transparent 65%), var(--bg, #0d0d0f); overflow: auto; padding: 16px; } .screen.active { display: flex; } /* Waiting is opt-in: stale callbacks must not cover menu or AI entry points. */ html:not([data-damah-mode="mp"]) #screen-waiting { display: none !important; } /* ── MENU SCREEN ── */ .menu-logo { font-size: clamp(2rem,8vw,3.5rem); font-weight: 900; color: var(--gold); text-shadow: 0 2px 12px rgba(185,243,107,.6), 0 0 40px rgba(185,243,107,.3); letter-spacing: .05em; margin-bottom: 4px; font-family: 'Heebo', sans-serif; } .menu-sub { font-size: .9rem; color: var(--text-dim); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 40px; } .menu-preview { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; margin-bottom: 36px; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px var(--shadow); } .menu-preview .mp-cell { width: clamp(20px,8vw,36px); aspect-ratio: 1; } .mp-cell.dark { background: var(--cell-dark); } .mp-cell.light { background: var(--cell-light); } .mp-cell.rp { background: radial-gradient(circle at 38% 35%, var(--red-hi), var(--red-base)); border-radius: 50%; transform: scale(.82); } .mp-cell.wp { background: radial-gradient(circle at 38% 35%, #fff, var(--white-base)); border-radius: 50%; transform: scale(.82); box-shadow: 0 2px 6px rgba(0,0,0,.4); } .menu-btns { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 320px; } .btn-primary { padding: 16px 24px; border-radius: var(--radius); font-size: clamp(.95rem,3.5vw,1.1rem); font-weight: 700; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #0d0d0f; box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.15) inset; text-shadow: none; font-family: 'Heebo', sans-serif; } .btn-primary:hover { filter: brightness(1.1); } .btn-secondary { padding: 14px 24px; border-radius: var(--radius); font-size: clamp(.88rem,3vw,1rem); font-weight: 600; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.2); font-family: 'Heebo', sans-serif; } .btn-secondary:hover { background: rgba(255,255,255,.13); } .menu-footer { margin-top: 28px; display: flex; gap: 12px; } .btn-icon { padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); font-size: 1rem; border: 1px solid rgba(255,255,255,.1); } /* ── DIFFICULTY SCREEN ── */ .diff-title { font-size: clamp(1.2rem,5vw,1.8rem); font-weight: 800; color: var(--gold); margin-bottom: 28px; text-align: center; font-family: 'Heebo', sans-serif; } .diff-btns { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 300px; } .diff-btns .btn-primary { text-align: center; } /* ── GAME SCREEN ── */ #screen-game { justify-content: flex-start; padding: 8px 8px 16px; overflow: hidden; } .game-topbar { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; margin-bottom: 6px; } .score-panel { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.3); padding: 6px 12px; border-radius: 8px; } .score-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .score-dot.red { background: radial-gradient(circle at 35% 30%, #ff8080, var(--red-base)); } .score-dot.white { background: radial-gradient(circle at 35% 30%, #fff, #ddd); } /* Highlights whichever score panel is the local player's own side, so it's never ambiguous which color you're playing (esp. in multiplayer, where the guest is assigned white and the board isn't flipped). */ .score-panel.mine { box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,.5); } .score-panel .you-tag { font-size: .62rem; font-weight: 700; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; } .score-num { font-size: .95rem; font-weight: 700; color: var(--text); min-width: 18px; text-align: center; } #status-text { flex: 1; text-align: center; font-size: clamp(.78rem,2.5vw,.92rem); font-weight: 600; color: var(--text); padding: 0 8px; } .topbar-btns { display: flex; gap: 6px; } .btn-topbar { padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--text-dim); font-size: .8rem; border: 1px solid rgba(255,255,255,.1); } /* ── MANDATORY CAPTURE TOAST ── */ #mandatory-msg { position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px); background: #dc2626; color: #fff; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: .9rem; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 200; box-shadow: 0 4px 16px rgba(220,38,38,.5); } #mandatory-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── BOARD FRAME (wood) ── */ .board-wrap { display: flex; justify-content: center; align-items: center; padding: 6px; flex: 1; } .board-frame { background: repeating-linear-gradient( 92deg, transparent 0, transparent 4px, rgba(0,0,0,.04) 4px, rgba(0,0,0,.04) 8px ), repeating-linear-gradient( 180deg, transparent 0, transparent 6px, rgba(0,0,0,.03) 6px, rgba(0,0,0,.03) 12px ), linear-gradient(160deg, var(--wood-light) 0%, var(--wood-mid) 30%, var(--wood-grain) 60%, var(--wood-dark) 100%); padding: clamp(10px, 2.5vw, 18px); border-radius: 10px; box-shadow: 0 0 0 2px var(--wood-dark), 0 0 0 5px var(--wood-light), 0 0 0 7px var(--wood-dark), 0 20px 60px rgba(0,0,0,.8), 0 8px 20px rgba(0,0,0,.5); position: relative; } /* Wood grain corner accents */ .board-frame::before, .board-frame::after { content: ''; position: absolute; inset: 4px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); pointer-events: none; } /* ── BOARD GRID ── */ #board { display: grid; grid-template-columns: repeat(8, var(--cell-size)); grid-template-rows: repeat(8, var(--cell-size)); border: 2px solid var(--wood-dark); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); } /* ── CELLS ── */ .cell { width: var(--cell-size); height: var(--cell-size); position: relative; display: flex; align-items: center; justify-content: center; transition: background .15s; touch-action: manipulation; } .cell.light { background: var(--cell-light); background-image: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%); } .cell.dark { background: var(--cell-dark); background-image: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 40%); } /* Keyboard focus visible outline */ .cell:focus-visible { outline: 2px solid rgba(185,243,107,0.8); outline-offset: -2px; } /* Highlight: possible move destination — gold dot with strong glow */ .cell.hint-move::after { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(39,174,96,0.75) 0%, rgba(39,174,96,0.35) 70%); box-shadow: 0 0 12px 4px rgba(39,174,96,0.55); animation: pulse-hint 1.1s ease-in-out infinite; pointer-events: none; } /* Highlight: piece that CAN capture (mandatory) */ .cell.hint-capture::after { content: ''; position: absolute; inset: 3px; border-radius: 4px; border: 3px solid rgba(255,80,80,0.85); box-shadow: inset 0 0 8px rgba(255,80,80,0.35), 0 0 8px rgba(255,80,80,0.4); animation: pulse-cap 0.85s ease-in-out infinite; pointer-events: none; } /* Selected piece cell — gold tint */ .cell.selected { background: rgba(185,243,107, 0.22) !important; box-shadow: inset 0 0 0 2px rgba(185,243,107,.55); } .cell.locked::before { content: ''; position: absolute; inset: 0; background: rgba(185,243,107,.08); animation: pulse-lock .7s ease-in-out infinite alternate; pointer-events: none; z-index: 1; } /* ── PIECES ── */ .piece { width: 78%; height: 78%; border-radius: 50%; position: relative; cursor: pointer; transition: transform .12s, box-shadow .12s; z-index: 2; } .piece:hover { transform: scale(1.07); } /* Physical 3D red piece */ .piece-red { background: radial-gradient(circle at 38% 30%, #ff8a8a 0%, #e03030 38%, #a01010 100%); box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.5), inset 0 -3px 7px rgba(0,0,0,.35), inset 0 3px 7px rgba(255,150,150,.4); } /* Physical 3D white piece */ .piece-white { background: radial-gradient(circle at 38% 30%, #ffffff 0%, #e8e8e8 38%, #b0b0b0 100%); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.5), inset 0 -3px 7px rgba(0,0,0,.25), inset 0 3px 7px rgba(255,255,255,.7); } /* Shine highlight */ .piece-shine { position: absolute; top: 10%; left: 18%; width: 30%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.45); transform: rotate(-30deg); pointer-events: none; filter: blur(1px); } /* Bottom shadow disc */ .piece-shadow { position: absolute; bottom: -12%; left: 10%; right: 10%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.4); filter: blur(3px); pointer-events: none; z-index: -1; } /* King — gold ring */ .piece.king .crown { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: calc(var(--cell-size) * 0.3); line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; z-index: 3; } .piece-red.king { background: radial-gradient(circle at 38% 30%, #ff9a9a 0%, #e04040 35%, #8b0000 100%); box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(185,243,107,.5), 0 5px 0 rgba(0,0,0,.4), 0 7px 20px rgba(0,0,0,.5); } .piece-white.king { background: radial-gradient(circle at 38% 30%, #fff 0%, #e0e0e0 35%, #888 100%); box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(185,243,107,.5), 0 5px 0 rgba(0,0,0,.35), 0 7px 20px rgba(0,0,0,.5); } /* ── ANIMATIONS ── */ @keyframes pulse-hint { 0%,100% { transform: scale(0.85); opacity:.5; } 50% { transform: scale(1.05); opacity:.9; } } @keyframes pulse-cap { 0%,100% { opacity:.5; } 50% { opacity:1; } } @keyframes pulse-lock { from { opacity:.05; } to { opacity:.18; } } @keyframes float-in { from { opacity:0; transform: translateY(30px) scale(.9); } to { opacity:1; transform: translateY(0) scale(1); } } @keyframes crown-pop { 0% { transform: translate(-50%,-50%) scale(0) rotate(-20deg); } 70% { transform: translate(-50%,-50%) scale(1.3) rotate(5deg); } 100% { transform: translate(-50%,-50%) scale(1) rotate(0); } } .piece.king .crown { animation: crown-pop .45s cubic-bezier(.4,2,.6,1) both; } /* ── WIN SCREEN ── */ #screen-win { text-align: center; animation: float-in .5s both; background: radial-gradient(ellipse at 50% 30%, #17171a 0%, #0d0d0f 65%); } #win-emoji { font-size: clamp(4rem,15vw,7rem); margin-bottom: 16px; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); animation: float-in .4s both; } #win-msg { font-size: clamp(1.6rem,7vw,2.8rem); font-weight: 900; color: var(--gold); text-shadow: 0 2px 20px rgba(185,243,107,.5); margin-bottom: 40px; font-family: 'Heebo', sans-serif; } .win-btns { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 280px; } /* ── WAITING SCREEN ── */ #screen-waiting { gap: 20px; } .waiting-spinner { width: 56px; height: 56px; border: 4px solid rgba(185,243,107,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #waiting-msg { font-size: 1.1rem; font-weight: 600; color: var(--text); text-align: center; } .room-link-row { display: flex; gap: 8px; width: 100%; max-width: 380px; } #room-link { flex: 1; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--text); border: 1px solid rgba(255,255,255,.15); font-size: .85rem; text-align: center; direction: ltr; cursor: text; } #share-status { font-size: .85rem; color: #4ade80; min-height: 1.2em; text-align: center; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; } /* ── MOBILE FINE-TUNING ── */ .board-skin-picker{position:relative;display:inline-flex;z-index:60} .board-skin-toggle{width:34px;height:32px;border-radius:8px;background:rgba(0,0,0,.24);border:1px solid color-mix(in srgb,var(--gold) 45%, transparent);color:var(--gold2);font-size:1rem;cursor:pointer} .board-skin-toggle:active{transform:scale(.96)} .board-skin-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:198px;padding:7px;border-radius:12px;background:color-mix(in srgb,var(--bg2) 94%, transparent);border:1px solid color-mix(in srgb,var(--gold) 30%, transparent);box-shadow:0 18px 40px -16px rgba(0,0,0,.8);backdrop-filter:blur(14px)} .board-skin-menu[hidden]{display:none} .board-skin-option{width:100%;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);font:600 .78rem var(--font-main);text-align:start;cursor:pointer} .board-skin-option:hover,.board-skin-option:focus-visible{background:rgba(255,255,255,.08);border-color:color-mix(in srgb,var(--gold) 35%, transparent)} .board-skin-option.active{background:color-mix(in srgb,var(--gold) 16%, transparent);border-color:var(--gold)} .board-skin-swatch{width:27px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.25);flex:none} @media (max-width: 480px) { :root { --board-size: 98vw; } .game-topbar { padding: 4px; } .btn-primary { padding: 13px 18px; } } @media (max-height: 680px) { :root { --board-size: min(88vw, 80vh); } .menu-preview { display: none; } } @media (hover: none) { .piece:hover { transform: none; } }