/* PandaBug — house style, inherited from PandaChess. * * Same visual language as PandaChess (ambient radial glow, glass panels, the * premium board ring, cburnett pieces with a resting drop-shadow), but written * as plain CSS: PandaChess leans on a vendored Tailwind and PandaBug has no * build step, so the utility classes it needs are spelled out here. * * Three perf lessons are baked in and must not be "cleaned up": * - the page background lives on , so the z-index:-1 glow layer on * body::before isn't painted over; * - the glow animates OPACITY ONLY. Animating the gradient or a transform * re-rasterizes a viewport-sized layer every frame and forces every glass * panel to re-blur; * - pieces transition OPACITY ONLY. Transitioning `filter` leaves * drop-shadow ghost-trails behind moving pieces. */ :root { /* PandaChess dark palette */ --bg: #0b1020; --panel: #13151a; --panel-2: #1a1d24; --frame: #1a2132; --frame-in: #101420; --edge: #2a2e38; --text: #e2e8f0; --text-dim: #94a3b8; --accent: #3b82f6; --good: #22c55e; --warn: #f59e0b; --bad: #ef4444; /* Board theme — overwritten at runtime from the BOARD_THEMES table, which is the same 14-entry table PandaChess ships. */ --sq-light: #EBECD0; --sq-dark: #739552; } * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; background: transparent; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; overscroll-behavior-y: none; min-height: 100dvh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; } img, span { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ---------------------------------------------------------- ambient glow */ @keyframes ambientGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.8; } } body.glow-on::before { content: ''; position: fixed; inset: -20%; z-index: -1; border-radius: 50%; pointer-events: none; transform: translateZ(0); backface-visibility: hidden; will-change: opacity; animation: ambientGlow 12s ease-in-out infinite alternate; background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.6) 0%, rgba(139, 92, 246, 0.45) 25%, rgba(59, 130, 246, 0.3) 50%, transparent 70%); } /* --------------------------------------------------------- glass panels */ .glass-panel { background: rgba(19, 21, 26, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6); border-radius: 14px; } /* ---------------------------------------------------------------- chrome */ header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap; } .brand { font-weight: 800; font-size: 20px; letter-spacing: -0.4px; display: flex; align-items: center; gap: 8px; } .brand em { color: var(--accent); font-style: normal; } .brand .mark { font-size: 22px; } .spacer { flex: 1; } .tagline { color: var(--text-dim); font-size: 12px; padding: 3px 10px; border: 1px solid var(--edge); border-radius: 999px; white-space: nowrap; } button { font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--edge); border-radius: 10px; padding: 7px 12px; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } button:hover { border-color: var(--accent); transform: translateY(-1px); } button:active { transform: translateY(0); } button.ghost { background: transparent; } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button.danger { border-color: var(--bad); color: #fca5a5; } kbd { font: inherit; font-size: 10px; font-weight: 700; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; margin-left: 4px; color: var(--text-dim); background: rgba(0,0,0,.3); } /* ---------------------------------------------------------------- boards */ main { flex: 1; display: flex; gap: 22px; justify-content: center; align-items: flex-start; padding: 4px 16px 16px; flex-wrap: wrap; } .board-col { display: flex; flex-direction: column; gap: 8px; padding: 12px; width: min(46vw, 460px); transition: box-shadow .25s ease; } /* The board you are on the clock for gets a live ring. In a simul that is usually BOTH of them, which is exactly the feeling we want to sell. */ .board-col.your-turn { box-shadow: 0 10px 40px -10px rgba(0,0,0,.6), 0 0 0 2px var(--accent), 0 0 30px -6px var(--accent); } .board-col.threatened { box-shadow: 0 10px 40px -10px rgba(0,0,0,.6), 0 0 0 2px var(--bad), 0 0 34px -4px var(--bad); } .board-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; } .board-title .num { background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 11px; } /* Seat = one player's name + clock + the pieces in their hand. */ .seat { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--edge); border-radius: 10px; min-height: 46px; } .seat.active { border-color: var(--accent); background: rgba(59,130,246,.10); } .seat .who { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .seat .who .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.5); } .seat .who .dot.w { background: #f1f5f9; } .seat .who .dot.b { background: #1e293b; } .seat .who .tag { font-size: 10px; color: var(--text-dim); font-weight: 600; } .clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; padding: 2px 10px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--edge); min-width: 84px; text-align: center; } .clock.running { border-color: var(--good); color: #d1fae5; } .clock.low { border-color: var(--warn); color: #fde68a; } .clock.panic { border-color: var(--bad); color: #fecaca; animation: panicPulse .8s ease-in-out infinite; } @keyframes panicPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* Pieces in hand. Click one, then click a square. */ .hand { flex: 1; display: flex; align-items: center; gap: 2px; min-height: 34px; flex-wrap: wrap; } .hand .slot { position: relative; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .hand .slot img { width: 30px; height: 30px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.8)); } .hand.mine .slot:hover { background: rgba(59,130,246,.18); transform: translateY(-2px); } .hand .slot.selected { border-color: var(--accent); background: rgba(59,130,246,.28); } .hand .slot .count { position: absolute; right: -1px; bottom: -3px; font-size: 10px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 4px; border: 1px solid rgba(0,0,0,.4); } .hand.theirs .slot { cursor: default; opacity: .85; } .hand .empty-note { font-size: 11px; color: var(--text-dim); font-style: italic; } /* The board itself: PandaChess's premium ring. */ .board-ring { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; border: 6px solid var(--frame); background: var(--frame-in); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 60px rgba(59, 130, 246, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2); overflow: hidden; } .grid8 { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .sq { position: relative; display: flex; align-items: center; justify-content: center; } .sq.light { background: var(--sq-light); } .sq.dark { background: var(--sq-dark); } .sq.playable { cursor: pointer; } .sq .coord { position: absolute; bottom: 1px; right: 3px; font-size: clamp(7px, .9vw, 10px); font-weight: 700; opacity: .45; pointer-events: none; } .sq.light .coord { color: var(--sq-dark); } .sq.dark .coord { color: var(--sq-light); } .piece { width: 92%; height: 92%; position: relative; z-index: 2; pointer-events: none; -webkit-user-drag: none; /* Resting piece shadow, straight from PandaChess. Transition OPACITY ONLY — transitioning `filter` leaves drop-shadow ghost-trails. */ filter: drop-shadow(0 4px 4px rgba(0,0,0,0.8)); transform: translateZ(0); transition: opacity .25s ease-in-out; } .sq.grabbable { cursor: grab; } .sq.grabbable:active { cursor: grabbing; } /* highlights */ .hl { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hl-sel { background: rgba(59,130,246,.45); } .hl-last { background: rgba(250,204,21,.42); } .hl-dot::after { content: ''; position: absolute; inset: 0; margin: auto; width: 28%; height: 28%; border-radius: 50%; background: rgba(0,0,0,.28); } .hl-cap { border: 5px solid rgba(0,0,0,.24); border-radius: 50%; margin: 3px; } /* Drop targets read differently from move targets — a drop is a different kind of action and must not be mistaken for a legal piece move. */ .hl-drop::after { content: ''; position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; border-radius: 6px; background: rgba(59,130,246,.55); box-shadow: 0 0 12px rgba(59,130,246,.8); } @keyframes kingShake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } } .hl-check { box-shadow: inset 0 0 0 4px var(--bad); } .sq.in-check .piece { animation: kingShake .4s ease-in-out; } /* The drop-mate warning. In a simul the way you lose is not being outplayed — it is a board quietly falling over while you are looking at the other one. */ .threat-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; background: rgba(239,68,68,.16); border: 1px solid var(--bad); color: #fecaca; animation: panicPulse 1.1s ease-in-out infinite; } .threat-bar.hidden { display: none; } .movelist { height: 62px; overflow-y: auto; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-dim); background: rgba(0,0,0,.25); border: 1px solid var(--edge); border-radius: 8px; padding: 5px 8px; line-height: 1.6; } .movelist b { color: var(--text); font-weight: 700; } .movelist .fed { color: var(--good); } .movelist::-webkit-scrollbar { width: 6px; } .movelist::-webkit-scrollbar-thumb { background: rgba(75,85,99,.5); border-radius: 3px; } /* ---------------------------------------------------------------- footer */ footer { padding: 8px 16px 16px; display: flex; justify-content: center; } .statusbar { display: flex; align-items: center; gap: 14px; padding: 8px 16px; font-size: 13px; color: var(--text-dim); max-width: 100%; } .statusbar b { color: var(--text); } /* ---------------------------------------------------------------- modals */ .overlay { position: fixed; inset: 0; z-index: 400; background: rgba(2,6,23,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .overlay.hidden { display: none; } .modal { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 22px; } .modal h2 { margin: 0 0 4px; font-size: 22px; } .modal .sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; } .modal h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin: 18px 0 8px; } .modal p { font-size: 14px; line-height: 1.6; color: #cbd5e1; } .modal ul { font-size: 14px; line-height: 1.7; color: #cbd5e1; padding-left: 20px; margin: 8px 0; } .modal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: rgba(0,0,0,.4); padding: 1px 5px; border-radius: 4px; } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .row.end { justify-content: flex-end; margin-top: 22px; } .chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s ease; } .chip:hover { border-color: var(--accent); } .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip small { display: block; font-size: 10px; font-weight: 500; opacity: .8; } select { font: inherit; font-size: 13px; background: var(--panel-2); color: var(--text); border: 1px solid var(--edge); border-radius: 8px; padding: 7px 10px; } /* Promotion picker floats over the board. */ .promo { position: absolute; z-index: 60; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -10px rgba(0,0,0,.8); } .promo.hidden { display: none; } .promo button { border: 0; border-radius: 0; padding: 4px; background: transparent; } .promo button:hover { background: rgba(59,130,246,.3); transform: none; } .promo img { width: 42px; height: 42px; display: block; } .result-line { font-size: 15px; line-height: 1.7; } .result-win { color: #86efac; font-weight: 800; } .result-loss { color: #fca5a5; font-weight: 800; } /* ---------------------------------------------------------------- mobile */ @media (max-width: 960px) { main { gap: 14px; } .board-col { width: min(96vw, 440px); } .clock { font-size: 17px; min-width: 70px; } .hand .slot { width: 30px; height: 30px; } .hand .slot img { width: 26px; height: 26px; } .tagline { display: none; } }