/** * ChessBoard package CSS — wave-2 comments for humans. * * This file only styles INTERACTION state owned by the board package: * - locked board (no clicks during intro) * - selected square * - native-drag off for drills / mobile / flip * - progressive hints * - hide fight chrome during puzzle/opening drills * * Piece art, square colors, and board size live in other CSS files * (chess_board.css, chess_playable.css, arena_layout.css, etc.). */ /* ============================================================================= INPUT LOCK When body has chess-board-locked or is-puzzle-locked, ignore all clicks. BoardMode.setLocked(true) adds these classes. ============================================================================= */ body.chess-board-locked #main-grid, body.chess-board-locked #board-wrapper, body.is-puzzle-locked #main-grid, body.is-puzzle-locked #board-wrapper { pointer-events: none !important; } /* When unlocked, force the grid to accept clicks again (beats leftover inline style="pointer-events:none"). */ body.chess-page:not(.chess-board-locked):not(.is-puzzle-locked) #main-grid, body.chess-page:not(.chess-board-locked):not(.is-puzzle-locked) #board-wrapper { pointer-events: auto !important; } body.chess-page:not(.chess-board-locked):not(.is-puzzle-locked) #main-grid .square, body.chess-page:not(.chess-board-locked):not(.is-puzzle-locked) #main-grid .piece, body.chess-page:not(.chess-board-locked):not(.is-puzzle-locked) #main-grid img.piece { pointer-events: auto !important; /* Finger-friendly: browser should not scroll the page while you move. */ touch-action: none; } /* ============================================================================= NATIVE HTML5 DRAG OFF body.chess-no-native-drag is toggled by BoardInput.syncDragAttrs() when Mode.wantNativeDrag() is false (puzzles, mobile, flipped board). ============================================================================= */ body.chess-no-native-drag #main-grid .piece, body.chess-no-native-drag #main-grid img.piece { -webkit-user-drag: none !important; user-select: none !important; } /* Drag ghost is a canvas/img on — never inherit square 100% sizing */ img.tmj-drag-ghost, canvas.tmj-drag-ghost, .tmj-drag-ghost { position: fixed !important; left: -10000px !important; top: -10000px !important; max-width: 120px !important; max-height: 120px !important; margin: 0 !important; padding: 0 !important; transform: none !important; pointer-events: none !important; opacity: 0.98 !important; z-index: 2147483646 !important; object-fit: contain !important; } /* ============================================================================= SELECTION RING (yellow) Added by BoardSelection as class is-selected on a .square ============================================================================= */ #main-grid .square.is-selected { box-shadow: inset 0 0 0 3px rgba(255, 255, 100, 0.85) !important; z-index: 2; } /* ============================================================================= MOBILE SHELL Practice board on /m/chess should not fight page scroll. ============================================================================= */ body.m-body-chess:not(.m-body-battle) #main-grid, body.m-body-chess:not(.m-body-battle) #board-wrapper { touch-action: none; } /* ============================================================================= PROGRESSIVE HINTS BoardHint adds is-hint-from (piece) then is-hint-to (destination). ============================================================================= */ #main-grid .square.is-hint-from { box-shadow: inset 0 0 0 3px rgba(80, 180, 255, 0.95) !important; background-color: rgba(80, 180, 255, 0.28) !important; z-index: 3; animation: board-hint-pulse 1.1s ease-in-out infinite; } #main-grid .square.is-hint-to { box-shadow: inset 0 0 0 3px rgba(255, 210, 60, 0.95) !important; background-color: rgba(255, 210, 60, 0.32) !important; z-index: 3; } /* Third-level hint: second player move */ #main-grid .square.is-hint-second { box-shadow: inset 0 0 0 3px rgba(180, 120, 255, 0.95) !important; background-color: rgba(180, 120, 255, 0.28) !important; z-index: 3; } @keyframes board-hint-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } /* Soft style for Hint buttons in ladder HUDs */ .chess-puzzle-ladder-hud button[data-cpl='hint'], .chess-opening-ladder-hud button[data-col='hint'] { border-color: rgba(80, 180, 255, 0.5); color: #a8d8ff; } /* ============================================================================= DRILL CHROME Puzzle / opening / vision hide the fight "controls" rail and clocks. ControlsPanel also collapses itself; these rules are a backup. ============================================================================= */ body.chess-page.is-drill-minigame aside.chess-controls-rail, body.chess-page.is-puzzle-mode aside.chess-controls-rail, body.chess-page.is-opening-mode aside.chess-controls-rail { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; visibility: hidden !important; } /* No fight clocks / time bars during drills */ body.is-drill-minigame .chess-timer, body.is-drill-minigame .time-bar-container, body.is-puzzle-mode .chess-timer, body.is-puzzle-mode .time-bar-container, body.is-opening-mode .chess-timer, body.is-opening-mode .time-bar-container, body.is-puzzle-ladder .chess-timer, body.is-puzzle-ladder .time-bar-container, body.is-opening-ladder .chess-timer, body.is-opening-ladder .time-bar-container { display: none !important; } /* Practice-only fight buttons */ body.is-drill-minigame [data-practice-only='1'], body.is-puzzle-mode [data-practice-only='1'], body.is-opening-mode [data-practice-only='1'] { display: none !important; } /* Match history header still shows in drills (notation stays) */ body.is-drill-minigame .chess-match-rail .side-panel-header, body.is-puzzle-mode .chess-match-rail .side-panel-header, body.is-opening-mode .chess-match-rail .side-panel-header { /* keep visible — empty rule left as intentional CSS hook */ }