s; the WebGL canvas inside #board handles rendering. Squares stay clickable underneath the canvas. */ body.mode-3d .square .piece { display: none !important; } .pieces3d-canvas { /* Inline styles cover positioning; this rule ensures the canvas can never intercept clicks if something flips pointer-events. */ pointer-events: none !important; } /* Tiny "Deep Square" link, centered at the very bottom of the home screen. */ .home-deepsquare { margin: 14px auto 0; font-family: var(--sans); font-weight: 300; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 227, 196, 0.32); text-decoration: none; transition: color 0.2s; align-self: center; -webkit-tap-highlight-color: transparent; } .home-deepsquare:hover, .home-deepsquare:active { color: var(--gold); } /* Top-left credits — light condensed, left-aligned, anchored to the corner. */ .home-credits-tl { position: absolute; top: max(env(safe-area-inset-top), 22px); left: max(env(safe-area-inset-left), 22px); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-family: var(--sans); font-weight: 300; font-size: 11px; letter-spacing: 0.10em; color: rgba(240, 227, 196, 0.38); text-transform: uppercase; line-height: 1.45; pointer-events: none; opacity: 0; animation: fadeIn 0.6s 1.7s var(--transition) forwards; } .text-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(240, 227, 196, 0.75); font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; border: none; padding: 12px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s; } .text-btn:hover, .text-btn:active { color: var(--neon); } .text-btn .gear { font-size: 16px; display: inline-block; transition: transform 0.4s var(--transition); } .text-btn:hover .gear, .text-btn:active .gear { transform: rotate(90deg); } /* ===================================================================== OPTIONS PANEL — centered modal with spring pop-in ===================================================================== */ #options-panel { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 1; pointer-events: auto; transition: opacity 0.18s ease-out; } /* Override the global .hidden { display: none } so the fade can play. */ #options-panel.hidden { display: flex !important; opacity: 0; pointer-events: none; } .panel-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ORIGINAL V3.1 panel-sheet — simple solid dark gradient, 1px gold border. Bevels via clip-path applied below. */ .panel-sheet { position: relative; width: 100%; max-width: 540px; /* Halo lives in the element background — a rotating conic gradient. Visible only on the 1.5px ring because ::before covers the interior. */ background: conic-gradient( from var(--halo-angle), rgba(120, 200, 255, 0.10) 0deg, rgba(181, 107, 255, 0.75) 80deg, rgba(120, 200, 255, 0.75) 160deg, rgba(181, 107, 255, 0.10) 260deg, rgba(120, 200, 255, 0.10) 360deg ); border: none; border-radius: 0; padding: 22px 26px; max-height: calc(100vh - 48px); overflow-y: auto; /* Octagonal bevel — same silhouette as the home hex buttons. */ clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); animation: haloSpin 8s linear infinite; box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 60px rgba(181, 107, 255, 0.15); isolation: isolate; } /* Glassmorphic dark interior — sits 1.5px inside so the halo rims the edge. */ .panel-sheet::before { content: ''; position: absolute; inset: 1.5px; background: rgba(10, 6, 12, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); z-index: -1; pointer-events: none; } .panel-header { margin-bottom: 22px; text-align: center; } .panel-header h2 { font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: 0.18em; color: var(--parchment); text-transform: uppercase; } /* --- Tabs --- */ .panel-tabs { display: flex; justify-content: center; gap: 0; margin-top: 18px; border-bottom: 1px solid rgba(201, 169, 97, 0.18); } .panel-tab { flex: 1; max-width: 140px; padding: 11px 14px; background: transparent; border: none; color: rgba(240, 227, 196, 0.55); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; transition: color 0.2s; } .panel-tab.active { color: var(--parchment); } .panel-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px; background: var(--neon-w); box-shadow: 0 0 10px rgba(181, 107, 255, 0.55); border-radius: 1px; } .panel-tab-content { display: none; animation: tabFadeIn 0.25s ease-out; } .panel-tab-content.active { display: block; } /* Scoreboard sections — Classement + Historique stacked inside one filtered view. */ .panel-section { display: flex; flex-direction: column; gap: 10px; animation: tabFadeIn 0.25s ease-out; } .panel-section-title { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240, 227, 196, 0.55); text-align: center; margin: 0; padding-bottom: 4px; border-bottom: 1px solid rgba(201, 169, 97, 0.15); } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .panel-footer { margin-top: 24px; display: flex; justify-content: center; } .primary-btn { padding: 13px 44px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--parchment); background: linear-gradient(180deg, rgba(181, 107, 255, 0.30), rgba(181, 107, 255, 0.14)); border: 1px solid var(--neon); border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 0 1px rgba(181, 107, 255, 0.15), 0 0 18px rgba(181, 107, 255, 0.25); transition: transform 0.15s, box-shadow 0.2s, background 0.2s; } .primary-btn:active { transform: scale(0.97); background: linear-gradient(180deg, rgba(181, 107, 255, 0.42), rgba(181, 107, 255, 0.20)); box-shadow: 0 0 0 1px rgba(181, 107, 255, 0.30), 0 0 28px rgba(181, 107, 255, 0.40); } .panel-body { display: flex; flex-direction: column; gap: 22px; } .option-group { display: flex; flex-direction: column; gap: 8px; } .option-label { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 227, 196, 0.62); font-weight: 500; } .option-hint { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: rgba(240, 227, 196, 0.45); line-height: 1.4; margin-top: 4px; } .seg-picker { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(201, 169, 97, 0.18); border-radius: 0; padding: 4px; flex-wrap: wrap; } .seg-picker button { flex: 1 1 0; min-width: 0; padding: 9px 6px; background: transparent; border: none; color: rgba(240, 227, 196, 0.75); font-family: var(--condensed); /* Roboto Condensed — fits long labels */ font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s; white-space: nowrap; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; } .seg-picker button:active { background: rgba(181, 107, 255, 0.1); } .seg-picker button.active { background: linear-gradient(180deg, rgba(181, 107, 255, 0.25), rgba(181, 107, 255, 0.12)); color: var(--parchment); box-shadow: 0 0 0 1px rgba(181, 107, 255, 0.3); } .seg-picker button:disabled { opacity: 0.35; cursor: not-allowed; } .seg-picker.disabled { opacity: 0.6; } /* ===================================================================== GAME SCREEN ===================================================================== */ #game-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; height: 100dvh; padding: 0; background: #050306; } /* --- Board container holds the artwork AND the in-image overlays --- */ #board-container { position: relative; width: min(100vw, calc(100dvh * var(--bg-aspect))); aspect-ratio: var(--bg-aspect); background-image: url('data/boards/board-bg-lecercueil.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* Turn indicators — full-width PNG overlays placed on the top/bottom decorative bands of the artwork. Pulses on the active side. */ /* Turn indicators — full-width PNG overlays placed on the top/bottom decorative bands of the artwork. Pulses on the active side. */ .turn-indicator { position: absolute; left: 0; right: 0; width: 100%; height: auto; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.45s var(--transition); } .turn-indicator.top { top: 0; } .turn-indicator.bottom { bottom: 0; } .turn-indicator.active { animation: thinkPulse 1.8s ease-in-out infinite; } @keyframes thinkPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* --- Capture trays — small icons of pieces taken, with material score --- */ .capture-tray { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 2px; font-family: var(--serif); font-size: clamp(13px, 1.7vw, 16px); color: rgba(245, 232, 200, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); pointer-events: none; white-space: nowrap; height: 36px; } /* Sit between the medallion and the wood frame. */ .capture-tray.top { top: calc(var(--grid-top) - 2.7%); } .capture-tray.bot { bottom: calc(var(--grid-bottom) - 2.7%); } .capture-tray:empty { display: none; } .cap-piece { width: clamp(21px, 2.7vw, 27px); height: clamp(21px, 2.7vw, 27px); background: center/contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); flex-shrink: 0; } /* Same "facing" rotation logic as the main board pieces. */ body.piece-flip:not(.view-b) .capture-tray.top .cap-piece { transform: rotate(180deg); } body.piece-flip.view-b .capture-tray.bot .cap-piece { transform: rotate(180deg); } .cap-score { margin-left: 8px; font-weight: 600; letter-spacing: 0.05em; font-size: clamp(13px, 1.8vw, 17px); color: var(--gold); text-shadow: 0 0 8px rgba(201, 169, 97, 0.4), 0 1px 4px rgba(0, 0, 0, 0.85); } /* --- Chess clocks (Blitz) --- */ .clock { position: absolute; left: 50%; z-index: 6; pointer-events: none; font-family: var(--serif); font-size: clamp(13px, 1.7vw, 18px); font-weight: 600; letter-spacing: 0.08em; color: rgba(245, 232, 200, 0.85); background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(201, 169, 97, 0.35); padding: 5px 16px; border-radius: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); white-space: nowrap; display: none; transition: color 0.2s, border-color 0.2s, box-shadow 0.25s, background 0.2s; } body.with-clock .clock { display: block; } /* Clocks pulled into the OUTER corners of the screen — top-left and bottom-right — so they leave the central medallion area clean. */ .clock-top { top: var(--tind-y-top); bottom: auto; left: 13%; transform: translate(-50%, -50%); } .clock-bot { top: auto; bottom: var(--tind-y-bottom); left: auto; right: 13%; transform: translate(50%, 50%); } /* In PvP, the player on the far side of the iPad (Black) sits across from the device. Rotate their clock 180° so it reads the right way up for them. */ body.mode-pvp .clock-top { transform: translate(-50%, -50%) rotate(180deg); } /* When the local player views the board flipped (boardOrient='b' = view-b), their own pieces are at the bottom — so swap the two clocks' positions. */ body.view-b #clock-b { top: auto; bottom: var(--tind-y-bottom); left: auto; right: 13%; transform: translate(50%, 50%); } body.view-b #clock-w { top: var(--tind-y-top); bottom: auto; right: auto; left: 13%; transform: translate(-50%, -50%); } .clock.active { background: rgba(0, 0, 0, 0.85); color: #fff; border-color: var(--neon); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 14px rgba(255, 255, 255, 0.12), 0 0 22px var(--neon-soft); } .clock-top.active { --neon: var(--neon-b); --neon-soft: var(--neon-b-soft); color: #ffe1e6; } .clock-bot.active { --neon: var(--neon-w); --neon-soft: var(--neon-w-soft); color: #ece1ff; } .clock.low { animation: clockLow 0.9s ease-in-out infinite; } @keyframes clockLow { 0%, 100% { color: #ff5d7a; } 50% { color: #ffd6df; } } /* In-image overlays (top + bottom) — sit on the decorative margins of the artwork. */ .game-overlay { position: absolute; left: 0; right: 0; display: flex; align-items: center; z-index: 5; pointer-events: none; padding: 0 3.5%; } .game-overlay > * { pointer-events: auto; } .game-overlay.top { top: 0; /* Allow the right-side vertical stack to extend past the top band when there are many buttons (resign + online). */ height: auto; min-height: var(--grid-top); justify-content: space-between; align-items: flex-start; /* anchor to the top edge */ padding-top: 1.5%; /* tiny top inset only — stack starts near the corner */ } .icon-btn-right { margin-left: auto; } /* Online-only action buttons (draw / takeback / share) — visible only when playing a Lichess game. Toggled by body.online-game from app.js. We use higher specificity (.icon-btn.online-only) to override .icon-btn's own `display: flex` rule defined a few selectors below. */ .icon-btn.online-only { display: none; } body.online-game .icon-btn.online-only { display: flex; } .game-overlay.bottom { bottom: 0; height: var(--grid-bottom); justify-content: center; } .icon-btn { /* "Baton" pill shape — wider than tall, with the same bevel cut corners as the rest of the UI. */ width: 62px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: var(--ink); border: 1px solid rgba(201, 169, 97, 0.30); border-radius: 0; font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ); transition: border-color 0.2s, background 0.2s; } .icon-btn:active { border-color: var(--neon); background: rgba(181, 107, 255, 0.15); } .coords { display: none; } #board-row { position: absolute; top: var(--grid-top); bottom: var(--grid-bottom); left: var(--grid-left); right: var(--grid-right); } #board { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); position: relative; } .square { position: relative; display: flex; align-items: center; justify-content: center; font-size: var(--piece-size); line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .square.light, .square.dark { background: transparent; } /* --- Neon highlights — circular gameplay indicators. --- */ .square.selected::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; height: 78%; border-radius: 50%; border: 3px solid var(--neon); background: transparent; pointer-events: none; z-index: 1; box-shadow: 0 0 8px var(--neon-glow), 0 0 18px var(--neon-glow), 0 0 32px var(--neon-soft), inset 0 0 10px var(--neon-soft); animation: neonPulse 1.6s ease-in-out infinite; } /* Last move spotlight — colored by who JUST moved (not current turn). .by-w → purple (white moved) ; .by-b → red (black moved). */ .square.last-move::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; height: 75%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, rgba(181, 107, 255, 0.85) 0%, rgba(181, 107, 255, 0.55) 30%, rgba(181, 107, 255, 0.20) 60%, rgba(181, 107, 255, 0) 95%); mix-blend-mode: screen; } .square.last-move.by-b::after { background: radial-gradient(circle at center, rgba(255, 61, 94, 0.85) 0%, rgba(255, 61, 94, 0.55) 30%, rgba(255, 61, 94, 0.20) 60%, rgba(255, 61, 94, 0) 95%); } .square.legal-move::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38%; height: 38%; border-radius: 50%; border: 3px solid var(--neon); background: transparent; pointer-events: none; z-index: 1; box-shadow: 0 0 6px var(--neon-glow), 0 0 14px var(--neon-glow), inset 0 0 6px var(--neon-soft); } .square.legal-capture::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88%; height: 88%; border-radius: 50%; border: 3px solid var(--neon); background: transparent; pointer-events: none; z-index: 1; box-shadow: 0 0 8px var(--neon-glow), 0 0 20px var(--neon-glow), 0 0 36px var(--neon-soft); } @keyframes neonPulse { 0%, 100% { box-shadow: 0 0 8px var(--neon-glow), 0 0 18px var(--neon-glow), 0 0 32px var(--neon-soft), inset 0 0 10px var(--neon-soft); } 50% { box-shadow: 0 0 12px var(--neon-glow), 0 0 26px var(--neon-glow), 0 0 48px var(--neon-soft), inset 0 0 14px var(--neon-soft); } } .square.in-check { background-image: var(--check); } .square.illegal-flash { animation: flashIllegal 0.35s ease-out; } @keyframes flashIllegal { 0% { background-color: var(--illegal-flash); } 100% {} } /* --- Pieces (PNG via background-image div for reliable touch passthrough) --- */ .piece { position: relative; z-index: 2; pointer-events: none; width: 92%; height: 92%; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55)); transition: opacity 0.3s; } /* Optional piece flip — only active when "Rotation des pièces" is on. Rotates the OPPOSING side's pieces 180° so they appear "facing" the active view (physical chess board feel). */ body.piece-flip:not(.view-b) .piece.piece-b { transform: rotate(180deg); } body.piece-flip.view-b .piece.piece-w { transform: rotate(180deg); } /* --- "Thinking" pulse glow on the side currently to play. Reproduces the Photoshop Drop Shadow at 94% opacity, 6px size, additive. White pieces pulse PURPLE on their turn ; black pieces pulse RED on theirs. */ body.turn-w .piece.piece-w { animation: piecePulseW 1.6s ease-in-out infinite; } body.turn-b .piece.piece-b { animation: piecePulseB 1.6s ease-in-out infinite; } /* Disable the piece halo entirely (Options > Halo des pièces actives). */ body.no-piece-glow .piece { animation: none !important; } /* Hide legal-move / legal-capture indicators (Options > Indicateurs de coups légaux). */ body.no-legal-hints .square.legal-move::before, body.no-legal-hints .square.legal-capture::before { display: none !important; } /* Hide the selection ring around the picked piece (Options > Cercle de sélection). */ body.no-selector .square.selected::after { display: none !important; } /* --- Lichess online button + modal --- */ .mode-btn-lichess { border-color: rgba(120, 200, 255, 0.45); } .mode-btn-lichess::before { background: linear-gradient(180deg, rgba(120, 200, 255, 0.10), rgba(120, 200, 255, 0.04)); } .mode-btn-lichess:hover, .mode-btn-lichess:active { border-color: #78c8ff; box-shadow: 0 0 18px rgba(120, 200, 255, 0.28); } .mode-btn-lichess .mode-label { color: #d6ecff; } /* Online opponent banner — sits at the very top of the game screen. */ .online-banner { position: absolute; top: 1.5%; left: 50%; transform: translateX(-50%); z-index: 7; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(120, 200, 255, 0.4); font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: #d6ecff; white-space: nowrap; pointer-events: none; } .online-banner.hidden { display: none; } .online-dot { width: 8px; height: 8px; border-radius: 50%; background: #78c8ff; box-shadow: 0 0 6px rgba(120, 200, 255, 0.7); animation: lichessPulse 1.6s ease-in-out infinite; } @keyframes lichessPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .online-rating { color: rgba(214, 236, 255, 0.6); font-variant-numeric: tabular-nums; } /* Centered modal layout for the lobby + waiting screens. */ #lichess-lobby, #lichess-waiting, #post-game-modal { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 1; pointer-events: auto; transition: opacity 0.18s ease-out; } #lichess-lobby.hidden, #lichess-waiting.hidden, #post-game-modal.hidden { display: flex !important; opacity: 0; pointer-events: none; } .panel-sub { text-align: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(120, 200, 255, 0.85); margin-top: 4px; } .lichess-logout-link { background: transparent; border: 1px solid rgba(120, 200, 255, 0.35); color: rgba(120, 200, 255, 0.75); font-size: 12px; padding: 2px 8px; margin-left: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s, border-color 0.2s; border-radius: 0; vertical-align: middle; } .lichess-logout-link:hover, .lichess-logout-link:active { color: #ff5d7a; border-color: #ff5d7a; } /* Animated spinner shown while looking for an opponent. */ .lichess-spinner { width: 56px; height: 56px; margin: 12px auto 18px; border: 3px solid rgba(120, 200, 255, 0.18); border-top-color: #78c8ff; border-radius: 50%; animation: lichessSpin 0.9s linear infinite; } @keyframes lichessSpin { to { transform: rotate(360deg); } } .lichess-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; } .lichess-username { font-family: var(--serif); font-size: 22px; letter-spacing: 0.08em; color: var(--parchment); } .lichess-ratings { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 12px; color: rgba(240, 227, 196, 0.7); padding: 4px 0 8px; } .lichess-rating b { text-transform: uppercase; letter-spacing: 0.1em; color: #78c8ff; font-weight: 600; margin-right: 4px; } .lichess-hint { font-size: 13px; line-height: 1.5; color: rgba(240, 227, 196, 0.7); text-align: center; padding: 4px 0; } /* Drop target highlight while drag-and-dropping a piece. */ .square.drag-hover::before { content: ''; position: absolute; inset: 6%; border: 3px solid var(--neon); background: var(--neon-soft); box-shadow: 0 0 14px var(--neon-glow); pointer-events: none; z-index: 2; } /* Floating ghost piece that follows the pointer during a drag. */ .piece.drag-ghost { background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); } /* Disable native touch gestures (scroll, double-tap zoom) on the board so pointermove fires reliably during drag on iPad Safari. */ #board { touch-action: none; } /* Hide the last-move spotlight (Options > Indicateur du dernier coup). */ body.no-last-move .square.last-move::after { display: none !important; } @keyframes piecePulseW { 0%, 100% { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1.5px rgba(181, 107, 255, 0.40)); } 50% { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 3px rgba(181, 107, 255, 0.85)) drop-shadow(0 0 7px rgba(181, 107, 255, 0.45)); } } @keyframes piecePulseB { 0%, 100% { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1.5px rgba(255, 61, 94, 0.40)); } 50% { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 3px rgba(255, 61, 94, 0.85)) drop-shadow(0 0 7px rgba(255, 61, 94, 0.45)); } } /* PHYSICAL mode: hide virtual pieces — user places real pieces on screen. Kept in DOM for click-target detection; just visually invisible. */ body.physical-mode .piece { opacity: 0; } /* "Peek" — temporarily reveal virtual pieces in physical mode (verify a position). */ body.physical-mode.physical-peek .piece { opacity: 1; } /* Eye button — visible only when in physical mode. */ #btn-peek { display: none; } body.physical-mode #btn-peek { display: flex; } body.physical-peek #btn-peek { background: rgba(181, 107, 255, 0.32); border-color: var(--neon-w); color: #fff; box-shadow: 0 0 12px rgba(181, 107, 255, 0.4); } .overlay-group { display: flex; align-items: center; gap: 8px; } /* The right-side group stacks vertically: home / peek / options / resign / online. */ .overlay-group-right { flex-direction: column; gap: 8px; align-items: flex-end; margin-left: auto; /* push the stack to the right edge */ } /* --- Coordinate labels (file letters in corners of edge ranks) --- */ .coord-label { position: absolute; font-family: var(--serif); font-size: clamp(8px, 1.4vw, 13px); font-weight: 500; letter-spacing: 0; color: rgba(245, 232, 200, 0.55); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); text-transform: uppercase; pointer-events: none; z-index: 3; line-height: 1; } .coord-label.coord-bl { bottom: 6%; left: 7%; } .coord-label.coord-tr { top: 6%; right: 7%; } .coord-label.coord-tl { top: 6%; left: 7%; } .coord-label.coord-br { bottom: 6%; right: 7%; } /* --- Game-state toast — centered popup for check / mate / draw --- */ .game-toast { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 250; opacity: 0; transition: opacity 0.25s ease-out; } .game-toast.show { opacity: 1; } .game-toast-content { background: linear-gradient(180deg, rgba(20,12,8,0.94), rgba(8,4,6,0.96)); border: 1px solid rgba(201, 169, 97, 0.55); border-radius: 0; padding: 28px 56px; font-family: var(--serif); font-size: clamp(22px, 3.8vw, 34px); font-weight: 600; line-height: 1.25; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment); text-align: center; text-shadow: 0 0 20px rgba(201, 169, 97, 0.4); box-shadow: 0 10px 60px rgba(0, 0, 0, 0.7), 0 0 60px rgba(181, 107, 255, 0.18); transform: scale(0.5); } .game-toast-content .toast-sub { display: block; margin-top: 8px; font-size: 0.72em; font-weight: 500; letter-spacing: 0.22em; color: var(--gold); text-shadow: 0 0 14px rgba(201, 169, 97, 0.45); } .game-toast.tone-red .toast-sub { color: #ff8a9a; text-shadow: 0 0 14px rgba(255, 61, 94, 0.6); } .game-toast.tone-purple .toast-sub { color: #c98aff; text-shadow: 0 0 14px rgba(181, 107, 255, 0.6); } .game-toast.show .game-toast-content { animation: toastBump 0.42s cubic-bezier(.34, 1.7, .64, 1) forwards; } /* === Toast color variants === - default : gold/parchment (échec, pat, nulle) - tone-red : rouge — quand les NOIRS gagnent (haut) - tone-purple : violet — quand les BLANCS gagnent (bas) */ .game-toast.tone-red .game-toast-content { border-color: rgba(255, 61, 94, 0.7); box-shadow: 0 10px 60px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 61, 94, 0.35); text-shadow: 0 0 20px rgba(255, 61, 94, 0.6); color: #ffe1e6; } .game-toast.tone-purple .game-toast-content { border-color: rgba(181, 107, 255, 0.7); box-shadow: 0 10px 60px rgba(0, 0, 0, 0.7), 0 0 80px rgba(181, 107, 255, 0.35); text-shadow: 0 0 20px rgba(181, 107, 255, 0.6); color: #ece1ff; } @keyframes toastBump { 0% { transform: scale(0.55); } 55% { transform: scale(1.10); } 100% { transform: scale(1); } } /* --- Status (centered on bottom decorative margin) --- */ #status-text { font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: 0.12em; color: var(--parchment); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,0.85); min-height: 1em; opacity: 1; transition: opacity 0.25s ease; } #status-text:empty { opacity: 0; } /* ===================================================================== PROMOTION MODAL ===================================================================== */ #promotion-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #promotion-modal.hidden { display: none; } #promotion-choices { display: flex; gap: 8px; background: linear-gradient(180deg, #1a1014, #0c0608); padding: 16px; border-radius: 0; border: 1px solid rgba(201, 169, 97, 0.3); } .promo-btn { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(245, 232, 200, 0.12), rgba(245, 232, 200, 0.04)); border: 2px solid rgba(201, 169, 97, 0.45); border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, background 0.15s; padding: 0; } .promo-btn .promo-piece { width: 90%; height: 90%; background: center/contain no-repeat; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.4)); pointer-events: none; } .promo-btn:active { border-color: var(--neon); background: rgba(181, 107, 255, 0.14); } .hidden { display: none !important; } /* ===================================================================== BEVELED CORNERS — applied only to the largest visible UI surfaces (mode buttons + modals). The 1px gold border is visible on the horizontal & vertical edges of the polygon; the diagonal cuts don't carry the border (compromise: clean transparent fill > full outline). ===================================================================== */ .mode-btn, .panel-sheet, .panel-sheet-narrow { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); } /* ===================================================================== HOME — links row (Options + Scores) ===================================================================== */ .home-links { display: flex; gap: 4px; align-items: center; } /* ===================================================================== NAMES MODAL + SCORES PANEL — reuse panel-* visuals ===================================================================== */ #names-modal, #scores-panel, #confirm-modal, #lichess-modal { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 1; pointer-events: auto; transition: opacity 0.18s ease-out; } #names-modal.hidden, #scores-panel.hidden, #confirm-modal.hidden, #lichess-modal.hidden { display: flex !important; opacity: 0; pointer-events: none; } .confirm-text { text-align: center; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--parchment); padding: 8px 4px; } .panel-sheet-narrow { max-width: 440px; } .panel-footer-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; } /* Pass-through wrapper (was used for bevel outline before — now just a transparent container so inputs sit naturally). */ .bevel-frame { display: contents; } /* ORIGINAL V3.1 name input — own border + transparent dark background. */ .name-input { width: 100%; padding: 13px 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 169, 97, 0.28); border-radius: 0; color: var(--parchment); font-family: var(--sans); font-size: 14px; letter-spacing: 0.08em; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .name-input:focus { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon-soft), 0 0 14px rgba(181, 107, 255, 0.18); } .name-input::placeholder { color: rgba(240, 227, 196, 0.32); } /* ===================================================================== SCOREBOARD ===================================================================== */ .scores-table { display: flex; flex-direction: column; gap: 1px; background: rgba(201, 169, 97, 0.12); border: 1px solid rgba(201, 169, 97, 0.18); } .scores-row { display: grid; grid-template-columns: 38px 1fr 50px 50px 50px 60px; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(180deg, #14090d 0%, #0c0608 100%); font-family: var(--sans); font-size: 13px; color: var(--parchment); } .scores-row.head { font-family: var(--serif); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 227, 196, 0.55); background: rgba(0, 0, 0, 0.4); } .scores-row .rank { font-family: var(--serif); color: var(--gold); text-align: center; font-size: 14px; } .scores-row.head .rank { color: rgba(240, 227, 196, 0.55); } .scores-row.top1 .rank { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 200, 60, 0.45); } .scores-row.top2 .rank { color: #d6d6d6; } .scores-row.top3 .rank { color: #c79a6b; } .scores-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scores-row .num { text-align: center; font-variant-numeric: tabular-nums; color: rgba(240, 227, 196, 0.78); } .scores-row .pts { text-align: right; font-variant-numeric: tabular-nums; color: var(--neon-w); font-weight: 600; font-family: var(--serif); } .scores-empty { text-align: center; padding: 32px 12px; color: rgba(240, 227, 196, 0.45); font-size: 13px; font-style: italic; } /* History list */ .scores-history { display: flex; flex-direction: column; gap: 1px; background: rgba(201, 169, 97, 0.12); border: 1px solid rgba(201, 169, 97, 0.18); max-height: 60vh; overflow-y: auto; } .history-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: linear-gradient(180deg, #14090d 0%, #0c0608 100%); font-family: var(--sans); font-size: 13px; color: var(--parchment); } .history-row .h-date { font-size: 11px; letter-spacing: 0.06em; color: rgba(240, 227, 196, 0.45); font-variant-numeric: tabular-nums; } .history-row .h-players { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .history-row .h-line { display: flex; align-items: center; gap: 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-row .h-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .history-row .h-dot.w { background: var(--neon-w); box-shadow: 0 0 6px var(--neon-w-soft); } .history-row .h-dot.b { background: var(--neon-b); box-shadow: 0 0 6px var(--neon-b-soft); } .history-row .h-name { color: var(--parchment); } .history-row .h-name.lost { color: rgba(240, 227, 196, 0.45); text-decoration: line-through; } .history-row .h-result { font-family: var(--serif); font-size: 13px; letter-spacing: 0.12em; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; } .history-row .h-meta { font-size: 10px; letter-spacing: 0.08em; color: rgba(240, 227, 196, 0.4); text-transform: uppercase; margin-top: 2px; } /* Online (Lichess) game in the history list — subtle blue accent. */ .history-row.online { border-left: 2px solid #78c8ff; } .history-row .h-online { font-size: 10px; margin-right: 2px; filter: drop-shadow(0 0 4px rgba(120, 200, 255, 0.6)); }