/* * style.css — the shared shell. * Design language inherited from PandaChess: an animated radial glow behind * everything, a heavy "premium ring" around the board, drop-shadowed pieces, * frosted glass panels, and the #0b1020 / #13151a / #1a2132 dark palette. */ :root { --bg: #0b1020; --panel: #13151a; --frame: #1a2132; --frame-in: #101420; --edge: #2a2e38; --text: #e2e8f0; --text-dim: #94a3b8; --accent: #3b82f6; --good: #22c55e; --bad: #ef4444; --board-light: #ebecd0; --board-dark: #779556; } * { box-sizing: border-box; } html, body { height: 100%; } /* The base colour lives on , not . body::before is a z-index:-1 child of body, so if body painted its own background the glow would sit behind it and vanish. Painting the canvas from lets the glow show through. */ 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; } /* ---- the ambient glow --------------------------------------------------- Oversized fixed layer, rounded to an ellipse, animating OPACITY ONLY so it stays on the compositor. Never animate the gradient itself. */ body::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.60) 0%, rgba(139,92,246,0.45) 25%, rgba(59,130,246,0.30) 50%, transparent 70%); } @keyframes ambientGlow { 0%, 100% { opacity: .5 } 50% { opacity: .8 } } body.glow-emerald::before { background: radial-gradient(ellipse at center, rgba(16,185,129,.55) 0%, rgba(5,150,105,.4) 25%, rgba(6,95,70,.28) 50%, transparent 70%); } body.glow-sunset::before { background: radial-gradient(ellipse at center, rgba(251,191,36,.5) 0%, rgba(249,115,22,.38) 25%, rgba(244,114,182,.26) 50%, transparent 70%); } body.glow-crimson::before { background: radial-gradient(ellipse at center, rgba(244,63,94,.55) 0%, rgba(190,18,60,.4) 25%, rgba(127,29,29,.28) 50%, transparent 70%); } body.glow-cyan::before { background: radial-gradient(ellipse at center, rgba(34,211,238,.5) 0%, rgba(14,165,233,.38) 25%, rgba(3,105,161,.26) 50%, transparent 70%); } body.glow-amethyst::before { background: radial-gradient(ellipse at center, rgba(192,132,252,.55) 0%, rgba(147,51,234,.4) 25%, rgba(88,28,135,.28) 50%, transparent 70%); } /* ---- chrome ------------------------------------------------------------- */ header { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; flex-wrap: wrap; } .brand { font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; } .brand .mark { font-size: 1.3rem; } .brand em { font-style: normal; color: var(--accent); } .spacer { flex: 1 1 auto; } .glass-panel { background: rgba(19,21,26,.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 40px -10px rgba(0,0,0,.6); border-radius: 14px; } button, select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; padding: .45rem .8rem; cursor: pointer; transition: border-color .15s, background .15s, transform .08s; } button:hover, select:hover { border-color: var(--accent); } button:active { transform: translateY(1px); } button.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; } button.ghost { background: transparent; } button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--frame); border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 6px; padding: .1rem .4rem; font-size: .8em; } /* ---- layout ------------------------------------------------------------- */ main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0 1rem 1.5rem; } .prompt { text-align: center; min-height: 3.2rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; } .prompt .q { font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; } .prompt .sub { color: var(--text-dim); font-size: .88rem; } .prompt .sub b { color: var(--text); font-weight: 600; } /* The 3D stage. #board-3d flips; the two faces are the two games. */ #stage { position: relative; width: min(92vw, calc(100dvh - 260px), 620px); aspect-ratio: 1 / 1; perspective: 1400px; } #board-3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .face { position: absolute; inset: 0; backface-visibility: hidden; } .face-back { transform: rotateY(180deg); } .premium-board-ring { border-radius: 10px; border: 6px solid var(--frame); background: var(--frame-in); box-shadow: 0 30px 60px -15px rgba(0,0,0,.65), 0 0 60px rgba(59,130,246,.15), inset 0 1px 1px rgba(255,255,255,.2); overflow: hidden; } .grid8 { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } /* ---- chess squares & pieces --------------------------------------------- */ .sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } .sq.light { background: var(--board-light); } .sq.dark { background: var(--board-dark); } .sq .coord { position: absolute; bottom: 1px; right: 3px; font-size: clamp(7px, 1.1vw, 10px); font-weight: 700; opacity: .45; pointer-events: none; } .sq.light .coord { color: var(--board-dark); } .sq.dark .coord { color: var(--board-light); } .piece { width: 96%; height: 96%; user-select: none; -webkit-user-drag: none; position: relative; z-index: 2; /* transition opacity ONLY — animating `filter` leaves ghost trails */ filter: drop-shadow(0 4px 4px rgba(0,0,0,.8)); transition: opacity .25s ease-in-out; } .piece.grab { cursor: grab; } .hl { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .2s; } .hl-sel { background: rgba(0,0,0,.25); } .hl-last { background: rgba(250,204,21,.5); } .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; } .hl-check { box-shadow: inset 0 0 0 4px var(--bad); animation: kingShake .4s; } @keyframes kingShake { 0%,100% { transform: translateX(0) } 20%,60% { transform: translateX(-3px) } 40%,80% { transform: translateX(3px) } } /* ---- status / footer ---------------------------------------------------- */ .bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; padding: .6rem .9rem; font-size: .9rem; } .bar .lvl { font-weight: 700; } .bar .dim { color: var(--text-dim); } .switch-hint { color: var(--text-dim); font-size: .85rem; text-align: center; } .switch-hint strong { color: var(--text); } .toast-wrap { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: .4rem; align-items: center; } .toast { padding: .55rem .9rem; border-radius: 10px; background: rgba(19,21,26,.92); border: 1px solid var(--edge); box-shadow: 0 8px 30px -8px #000; animation: toastIn .18s ease-out; font-size: .9rem; } .toast.bad { border-color: var(--bad); } .toast.good { border-color: var(--good); } @keyframes toastIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } /* ---- modal -------------------------------------------------------------- */ .modal-back { position: fixed; inset: 0; z-index: 400; background: rgba(3,6,15,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal { max-width: 30rem; width: 100%; padding: 1.3rem; } .modal h2 { margin: 0 0 .3rem; font-size: 1.35rem; letter-spacing: -.02em; } .modal p { color: var(--text-dim); margin: .35rem 0 1rem; line-height: 1.5; } .modal .row { display: flex; gap: .5rem; flex-wrap: wrap; } .levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .4rem; margin: .8rem 0; } .levels button { padding: .5rem 0; text-align: center; } .levels button.cur { background: var(--accent); border-color: var(--accent); font-weight: 700; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; opacity: .65; } .hl-check { animation: none; } }