/* ========================================================================== Jesus Checkers — styles.css -------------------------------------------------------------------------- Contents 1. Design tokens 2. Base / full-bleed background (night sky + rays of light) 3. Row 1 — title + status 4. Row 2 — toolbar 5. Board frame + squares 6. Selection, legal-move and forced-jump indicators 7. Pieces (incl. crowned kings) 8. Effects layer (slide, capture, promotion, shake) 9. Scripture ribbon + legend 10. Game-over overlay + confetti 11. Responsive + reduced-motion + print -------------------------------------------------------------------------- Theme note (v3.0): the player is LIGHT — ivory-and-gold discs, each etched with a cross. The computer is NIGHT — deep indigo discs, each etched with a star. Pieces only ever stand on the DARK squares, so every contrast decision below is judged against the olive-umber square colour, not the parchment one. Sizing note: --cell-size is written by Scripts.js (Fx.measure) whenever the board is laid out, so glyphs inside pieces scale with the real pixel size of a square instead of guessing from viewport units. The value below is a sane default used before the first measurement and if JS is unavailable. ========================================================================== */ /* -------------------------------------------------------------------------- */ /* 1. Design tokens */ /* -------------------------------------------------------------------------- */ :root { /* Page background — night sky below, the light of dawn breaking above. Applied to so it covers the whole viewport, the overscroll area and any scrolled region. */ --bg-deep: #05081c; --bg-mid: #131a48; --bg-glow: #ffd77a; /* Board — olive wood and parchment, with a burnished gold rim */ --frame-wood-1: #8a6a2f; --frame-wood-2: #3a2c10; --frame-wood-3: #c2a054; --square-light: #f7ecd2; --square-light-2: #e8d6ad; --square-dark: #7a6038; --square-dark-2: #5c4726; --square-etch: rgba(255, 231, 175, 0.10); /* the faint cross on dark squares */ /* Text + panels */ --text: #f6efdd; --text-dim: #c9c2dd; --panel-bg: rgba(255, 251, 241, 0.96); --panel-ink: #241a3a; --panel-border: rgba(255, 214, 122, 0.6); /* Pieces — LIGHT (you) is ivory/gold, NIGHT (computer) is deep indigo. Both carry a gold-family rim so each disc separates cleanly from the olive-umber square underneath it. */ --you-1: #fffdf2; --you-2: #f2c645; --you-edge: #8a6110; --you-etch: rgba(115, 78, 8, 0.62); --cpu-1: #4b52a8; --cpu-2: #101334; --cpu-edge: #b9c6f2; --cpu-etch: rgba(226, 234, 255, 0.72); --gold-1: #fff3b0; --gold-2: #ffcc33; --gold-3: #b7860b; /* Indicators — chosen for maximum contrast on the olive squares */ --go-core: #b9f6ca; --go-edge: #00c853; --jump: #ff1744; --select: #00e5ff; --warn: #ffab00; /* Buttons */ --btn-bg: #2c2f6b; --btn-bg-hover: #3d4290; --btn-ink: #f6efdd; --btn-primary-1: #ffcc4d; --btn-primary-2: #e08b00; /* Motion (Snappy preset) */ --dur-slide: 220ms; --dur-capture: 640ms; --dur-promote: 700ms; /* Written by JS; default keeps the page sane without scripting. */ --cell-size: 64px; } /* -------------------------------------------------------------------------- */ /* 2. Base / full-bleed background */ /* -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Night sky with a warm glory breaking over the top of the page. */ html { min-height: 100%; background-color: var(--bg-deep); background-image: radial-gradient(ellipse 90% 46% at 50% -8%, rgba(255, 240, 200, 0.55) 0%, rgba(255, 215, 122, 0.28) 34%, rgba(255, 215, 122, 0) 68%), linear-gradient(178deg, #2a2a63 0%, var(--bg-mid) 32%, var(--bg-deep) 78%, #03050f 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } body { position: relative; min-height: 100vh; margin: 0; padding: 14px 12px 28px; background: transparent; color: var(--text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; -webkit-text-size-adjust: 100%; } /* A scattering of stars, drawn as tiny radial gradients — no image files. Fixed so it behaves like part of the sky rather than part of the document. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.85), transparent), radial-gradient(1.4px 1.4px at 78% 14%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1.8px 1.8px at 33% 61%, rgba(255, 246, 214, 0.6), transparent), radial-gradient(1.3px 1.3px at 62% 44%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.7px 1.7px at 89% 72%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.2px 1.2px at 6% 82%, rgba(255, 246, 214, 0.5), transparent), radial-gradient(1.5px 1.5px at 47% 88%, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1.4px 1.4px at 22% 40%, rgba(255, 255, 255, 0.5), transparent); animation: star-twinkle 6s ease-in-out infinite; } @keyframes star-twinkle { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } /* Rays of light streaming down from above. Kept in its own @supports block: an engine that does not know repeating-conic-gradient would otherwise throw away the whole background-image declaration and lose the stars with it. */ @supports (background-image: repeating-conic-gradient(#000 0deg, #000 1deg)) { body::after { content: ''; position: fixed; top: 0; left: 50%; width: 220vmax; height: 130vmax; transform: translateX(-50%); z-index: -1; pointer-events: none; opacity: 0.3; background-image: repeating-conic-gradient( from 200deg at 50% -12%, rgba(255, 240, 205, 0.35) 0deg 2.4deg, rgba(255, 240, 205, 0) 2.4deg 9deg ); -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 0%, #000 12%, transparent 74%); mask-image: radial-gradient(ellipse 70% 62% at 50% 0%, #000 12%, transparent 74%); animation: rays-breathe 9s ease-in-out infinite; } } @keyframes rays-breathe { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.38; } } .noscript { max-width: 32rem; margin: 1rem auto; padding: 1rem; border-radius: 10px; background: var(--panel-bg); color: var(--panel-ink); font-weight: 700; } /* Shared focus ring — visible on every interactive control. */ button:focus-visible, .square:focus-visible { outline: 3px solid var(--select); outline-offset: 2px; } /* -------------------------------------------------------------------------- */ /* 3. Row 1 — title + status */ /* -------------------------------------------------------------------------- */ .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; margin: 0 auto 12px; max-width: 1000px; } .title { position: relative; z-index: 0; /* own stacking context, so the glory cross below sits behind the lettering but still in front of the page's ray layer */ display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.7rem, 5.2vw, 2.9rem); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } /* A great cross of light standing behind the title. Purely decorative, so it is a pseudo-element rather than markup; absolutely positioned so it takes no space in the title's flex row, and it never takes clicks. */ .title::before { content: '\271D'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); z-index: -1; font-size: clamp(6.5rem, 18vw, 12rem); line-height: 1; color: var(--gold-2); opacity: 0.2; pointer-events: none; filter: blur(0.5px) drop-shadow(0 0 30px rgba(255, 214, 122, 0.95)); animation: glory-breathe 5.5s ease-in-out infinite; } @keyframes glory-breathe { 0%, 100% { opacity: 0.16; transform: translate(-50%, -54%) scale(1); } 50% { opacity: 0.3; transform: translate(-50%, -54%) scale(1.05); } } /* Gradient lettering with a carved 3D drop, plus a plain-colour fallback for engines without background-clip:text. */ .title__text { position: relative; color: var(--gold-2); background-image: linear-gradient(180deg, #fff8d6 0%, var(--gold-2) 45%, #e08b00 70%, #ffe27a 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 1px 0 #7a4a00, 0 2px 0 #5e3800, 0 3px 0 #472a00, 0 4px 0 #2f1c00, 0 6px 14px rgba(0, 0, 0, 0.7); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .title__text { -webkit-text-fill-color: transparent; } /* Re-create the 3D shadow behind the (now transparent) glyphs. */ .title__text::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; -webkit-text-fill-color: #4a2c00; color: #4a2c00; text-shadow: 0 2px 0 #382100, 0 4px 10px rgba(0, 0, 0, 0.75); } } /* The two sides' discs, flanking the title: Light on the left, Night on the right, each showing the same emblem it carries on the board. */ .title__chip { display: inline-flex; align-items: center; justify-content: center; width: clamp(22px, 4.4vw, 38px); height: clamp(22px, 4.4vw, 38px); border-radius: 50%; font-size: clamp(11px, 2.2vw, 19px); line-height: 1; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(0, 0, 0, 0.45); animation: chip-bob 3.2s ease-in-out infinite; } .title__chip--light { background: radial-gradient(circle at 35% 30%, var(--you-1), var(--you-2) 72%); border: 2px solid var(--you-edge); color: var(--you-etch); } .title__chip--light::before { content: '\271D'; } .title__chip--night { background: radial-gradient(circle at 35% 30%, var(--cpu-1), var(--cpu-2) 72%); border: 2px solid var(--cpu-edge); color: var(--cpu-etch); animation-delay: 1.6s; } .title__chip--night::before { content: '\2726'; } @keyframes chip-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(8deg); } } /* Status chip ---------------------------------------------------------- */ .status { min-width: min(340px, 90vw); margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--panel-bg); border: 2px solid var(--panel-border); color: var(--panel-ink); font-size: clamp(0.95rem, 2.4vw, 1.1rem); font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transition: background-color 0.2s ease, color 0.2s ease; } .status.is-thinking { color: #4a3a1a; font-style: italic; } .status.is-win { background: #1b7f3b; color: #fffdf5; border-color: #79ffa8; } .status.is-loss { background: #8e1a12; color: #fff3f0; border-color: #ff9c92; } .status.is-draw { background: #4a5560; color: #f4f7fa; border-color: #b6c4d0; } .status.is-error { background: #6d1f00; color: #ffe9de; border-color: #ff9a63; } /* The "you must jump" state has to be impossible to miss. */ .status.is-alert { background: linear-gradient(180deg, #ff5252, #c50e29); color: #fff; border-color: #ffd0cc; animation: alert-pulse 0.9s ease-in-out infinite; } @keyframes alert-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } 50% { transform: scale(1.04); box-shadow: 0 6px 22px rgba(255, 23, 68, 0.85); } } /* -------------------------------------------------------------------------- */ /* 4. Row 2 — toolbar */ /* -------------------------------------------------------------------------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 14px; max-width: min(860px, 98vw); } /* The link back to the Bible Games hub is an wearing .btn, so it is the same object as every other control in the toolbar and needs no styling of its own — only an anchor's underline removed. */ a.btn { text-decoration: none; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 9px; background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } .btn:hover:not(:disabled) { background: var(--btn-bg-hover); } .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .btn--primary { background: linear-gradient(180deg, var(--btn-primary-1), var(--btn-primary-2)); color: #331c00; border-color: rgba(255, 255, 255, 0.4); } .btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffc740, #ff7f1a); } .btn--quiet { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); } .btn--quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); } .btn--icon { padding: 8px 11px; font-size: 1.05rem; } .btn__icon { font-size: 1.02em; line-height: 1; } /* Segmented difficulty picker ------------------------------------------ */ .segmented { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.14); } .seg { padding: 6px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .seg:hover:not(.is-active) { background: rgba(255, 255, 255, 0.1); color: var(--text); } .seg.is-active { background: linear-gradient(180deg, #6fd36f, #2e9e2e); color: #06280a; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .seg[data-level="medium"].is-active { background: linear-gradient(180deg, #ffd45e, #e8a000); color: #3a2600; } .seg[data-level="hard"].is-active { background: linear-gradient(180deg, #ff8a7a, #d32f2f); color: #38060a; } .timer { padding: 8px 12px; border-radius: 9px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.95rem; min-width: 68px; } /* -------------------------------------------------------------------------- */ /* 5. Board frame + squares */ /* -------------------------------------------------------------------------- */ .board-area { display: block; } .board-frame { position: relative; /* offset parent for .square + .fx-layer */ width: min(640px, 94vw, 66vh); margin: 0 auto; border: clamp(9px, 2.2vw, 16px) solid var(--frame-wood-1); border-radius: 10px; background-image: linear-gradient(135deg, var(--frame-wood-3), var(--frame-wood-2) 55%, var(--frame-wood-1)); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 204, 51, 0.35), /* thin gold line around the wood */ 0 0 42px 6px rgba(255, 214, 122, 0.22), /* the board sits in the light */ inset 0 0 0 3px var(--frame-wood-2); } /* Input is suspended while a move animates or the computer is thinking. */ .board-frame.is-busy { pointer-events: none; } .board { display: grid; grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1 / 1; } /* Rows exist for accessibility (role="grid" needs role="row" children) and double as the column grid. */ .board-row { display: grid; grid-template-columns: repeat(8, 1fr); min-height: 0; } @supports not (aspect-ratio: 1 / 1) { .board { height: min(640px, 94vw, 66vh); } } .square { position: relative; width: 100%; height: 100%; } .square.light { background-color: var(--square-light); background-image: linear-gradient(135deg, #fdf0d8, var(--square-light-2)); } /* Each playable square carries a faint cross, drawn as two flat gradient bars sized and placed by background-size/-position. Deliberately built into the square's own background rather than a pseudo-element: ::before and ::after on .square are already spoken for by the selection and hint rings. */ .square.dark { background-color: var(--square-dark); background-image: linear-gradient(var(--square-etch), var(--square-etch)), linear-gradient(var(--square-etch), var(--square-etch)), linear-gradient(135deg, var(--square-dark), var(--square-dark-2)); background-size: 9% 48%, 30% 9%, auto; background-position: 50% 30%, 50% 40%, 0 0; background-repeat: no-repeat, no-repeat, repeat; } .square.playable { cursor: pointer; } /* -------------------------------------------------------------------------- */ /* 6. Selection, legal-move and forced-jump indicators */ /* -------------------------------------------------------------------------- */ /* Selected square: thick white/cyan halo that pulses. Impossible to miss. */ .square.is-selected::before { content: ''; position: absolute; inset: 2px; border-radius: 8px; box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 8px var(--select), 0 0 20px 7px rgba(0, 229, 255, 0.85); pointer-events: none; z-index: 3; animation: select-pulse 1s ease-in-out infinite; } @keyframes select-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } /* Legal destination: bright core, dark rim, white halo — reads clearly on both the light and dark squares. */ .move-marker, .capture-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 4; animation: marker-pulse 1.15s ease-in-out infinite; } .move-marker { width: 44%; height: 44%; background: radial-gradient(circle at 50% 38%, #ffffff 0%, var(--go-core) 42%, var(--go-edge) 100%); border: 3px solid rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 16px 5px rgba(0, 200, 83, 0.8); } .capture-marker { width: 72%; height: 72%; border: 5px solid var(--jump); background: radial-gradient(circle, rgba(255, 23, 68, 0.28) 40%, rgba(255, 23, 68, 0) 70%); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), inset 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 18px 6px rgba(255, 23, 68, 0.8); } /* Dimmer variant used to preview *all* forced jumps before a piece is picked. */ .capture-marker.is-preview { opacity: 0.75; } @keyframes marker-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.16); } } /* Hint flash */ .square.is-hint::after { content: ''; position: absolute; inset: 2px; border-radius: 8px; box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 9px #29b6f6, 0 0 22px 7px rgba(41, 182, 246, 0.9); pointer-events: none; z-index: 5; animation: select-pulse 0.55s ease-in-out infinite; } /* -------------------------------------------------------------------------- */ /* 7. Pieces */ /* -------------------------------------------------------------------------- */ .piece { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; border-radius: 50%; pointer-events: none; z-index: 2; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.55), inset 0 3px 6px rgba(255, 255, 255, 0.35), inset 0 -5px 8px rgba(0, 0, 0, 0.4); transition: transform 0.16s ease, opacity 0.2s ease, filter 0.2s ease; } /* LIGHT — the player. Ivory rising to gold, with a warm halo so the disc glows against the olive square it stands on. */ .piece--you { background: radial-gradient(circle at 35% 28%, var(--you-1), var(--you-2) 72%); border: 2px solid var(--you-edge); } /* NIGHT — the computer. Deep indigo with a moonlit silver rim. */ .piece--cpu { background: radial-gradient(circle at 35% 28%, var(--cpu-1), var(--cpu-2) 72%); border: 2px solid var(--cpu-edge); } /* Each disc is engraved with its side's emblem: a cross for the Light, a star for the Night. Sized from --cell-size so it scales with the real board. */ .piece::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--cell-size) * 0.36); line-height: 1; pointer-events: none; } .piece--you::after { content: '\271D'; color: var(--you-etch); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); } .piece--cpu::after { content: '\2726'; color: var(--cpu-etch); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Ridged rim, like a real checker. */ .piece::before { content: ''; position: absolute; inset: 13%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); pointer-events: none; } /* --- Kings: crowned with glory, unmistakably the super piece ------------ */ .piece--king { border-color: var(--gold-3); transform: scale(1.05); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6), inset 0 3px 6px rgba(255, 255, 255, 0.4), inset 0 -5px 8px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--gold-3), 0 0 0 6px var(--gold-2), 0 0 20px 6px rgba(255, 204, 51, 0.7); animation: king-glow 2.2s ease-in-out infinite; } /* Written with doubled specificity so it beats .piece--you::after and .piece--cpu::after regardless of source order: a crowned piece shows the crown, never its side emblem. */ .piece.piece--king::after { content: '\1F451'; /* 👑 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); font-size: calc(var(--cell-size) * 0.42); line-height: 1; color: inherit; text-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85)); pointer-events: none; } /* Travelling glint across the crown. */ .piece--king::before { inset: 8%; border: 2px solid rgba(255, 236, 160, 0.55); background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 62%); background-size: 260% 100%; animation: king-glint 3.4s ease-in-out infinite; } @keyframes king-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 204, 51, 0.55)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 224, 120, 0.95)); } } @keyframes king-glint { 0% { background-position: 180% 0; } 55%, 100%{ background-position: -80% 0; } } /* --- Interaction states ------------------------------------------------ */ /* The lifted, obviously-picked-up piece. */ .piece.is-selected { transform: translateY(-9%) scale(1.12); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)); } .piece--king.is-selected { transform: translateY(-9%) scale(1.17); } /* A piece that MUST jump. */ .piece.is-jumper { animation: jumper-pulse 0.85s ease-in-out infinite; } @keyframes jumper-pulse { 0%, 100% { box-shadow: 0 5px 8px rgba(0, 0, 0, 0.55), inset 0 3px 6px rgba(255, 255, 255, 0.35), 0 0 0 4px var(--jump); } 50% { box-shadow: 0 5px 8px rgba(0, 0, 0, 0.55), inset 0 3px 6px rgba(255, 255, 255, 0.35), 0 0 0 7px var(--jump), 0 0 22px 8px rgba(255, 23, 68, 0.9); } } /* Your other pieces while a jump is compulsory: they shrink back and go quiet. Opacity is deliberately NOT used — a semi-transparent red disc lets the brown square show through and turns muddy, which reads as "my piece vanished". Fully opaque but smaller and duller keeps it unmistakably "your piece, just not this turn". */ .piece.is-muted { filter: saturate(0.3) brightness(1.3); transform: scale(0.86); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); } .piece--king.is-muted { transform: scale(0.92); } /* The enemy piece that is about to be taken. */ .piece.is-doomed { box-shadow: 0 5px 8px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--warn), 0 0 16px 5px rgba(255, 171, 0, 0.8); } /* Refused click feedback. */ .piece.is-shaking { animation: shake 0.36s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-14%) rotate(-7deg); } 45% { transform: translateX(12%) rotate(6deg); } 70% { transform: translateX(-8%) rotate(-4deg); } } /* Hidden at its origin square while its ghost slides across the board. */ .piece.is-travelling { visibility: hidden; } /* -------------------------------------------------------------------------- */ /* 8. Effects layer */ /* -------------------------------------------------------------------------- */ .fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; } /* A square-sized wrapper positioned in px by JS; it holds a cloned .piece so all the normal piece styling applies unchanged. */ .fx-cell { position: absolute; will-change: transform; } .fx-cell--slide { animation-name: fx-slide; animation-duration: var(--dur-slide); animation-timing-function: cubic-bezier(0.25, 0.85, 0.35, 1.05); animation-fill-mode: forwards; z-index: 8; } @keyframes fx-slide { 0% { transform: translate(0, 0) scale(1); } 45% { transform: translate(calc(var(--dx) * 0.45), calc(var(--dy) * 0.45 - var(--hop))) scale(1.14); } 100% { transform: translate(var(--dx), var(--dy)) scale(1); } } /* Captured piece: flash bright, spin, shrink away — with a sad face. */ .fx-cell--capture { animation: fx-capture var(--dur-capture) ease-in forwards; z-index: 7; } @keyframes fx-capture { 0% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); } 12% { transform: scale(1.3) rotate(-10deg); opacity: 1; filter: brightness(2.6) saturate(1.6); } 26% { transform: scale(1.12) rotate(9deg); opacity: 1; filter: brightness(1); } 40% { transform: scale(1.2) rotate(-7deg); opacity: 1; filter: brightness(2.6) saturate(1.6); } 55% { transform: scale(0.95) rotate(20deg); opacity: 0.95; filter: brightness(1.2); } 100% { transform: scale(0) rotate(200deg); opacity: 0; filter: brightness(1); } } /* The unhappy face rides on top of the doomed piece (and hides its crown). */ .fx-cell--capture .piece::after, .fx-cell--capture .piece::before { display: none; } .fx-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell-size) * 0.5); line-height: 1; z-index: 3; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); pointer-events: none; } /* Promotion burst */ .fx-cell--promote { animation: fx-promote var(--dur-promote) ease-out forwards; z-index: 9; } .fx-crown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell-size) * 0.62); line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.95)); } @keyframes fx-promote { 0% { transform: scale(0.2) rotate(-40deg); opacity: 0; } 35% { transform: scale(1.5) rotate(10deg); opacity: 1; } 60% { transform: scale(1.15) rotate(-5deg); opacity: 1; } 100% { transform: scale(2.2) rotate(0deg); opacity: 0; } } /* -------------------------------------------------------------------------- */ /* 9. Scripture ribbon + legend */ /* -------------------------------------------------------------------------- */ /* A little parchment scroll under the board. Scripts.js fills it on every new game, and again whenever a piece is crowned. It stays empty (and therefore invisible) if scripting is off, so the page never shows a blank slab. */ .verse { display: block; width: min(560px, 94vw); margin: 16px auto 0; padding: 11px 26px 12px; border-radius: 6px / 22px; background-image: linear-gradient(180deg, #fdf3dd 0%, #f2e0b8 55%, #e6cf9f 100%); border-top: 2px solid rgba(255, 255, 255, 0.85); border-bottom: 2px solid rgba(139, 106, 42, 0.5); color: #4a3410; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 26px rgba(180, 140, 70, 0.25); } /* Hidden until Scripts.js has a verse to show (and so, permanently, when scripting is unavailable). */ .verse.is-empty { display: none; } .verse__mark { display: inline-block; margin-right: 8px; color: #b7860b; font-size: 1.05em; vertical-align: -0.05em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } .verse__text { font-size: clamp(0.9rem, 2.3vw, 1.06rem); font-style: italic; font-weight: 600; line-height: 1.4; } .verse__ref { display: block; margin-top: 4px; color: #7d5c1e; font-size: 0.78rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Fresh verse — a brief warm flash so a newly crowned king's verse is noticed. */ .verse.is-fresh { animation: verse-glow 1.5s ease-out; } @keyframes verse-glow { 0% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(255, 204, 51, 0.9); } 35% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 26px 8px rgba(255, 204, 51, 0.85); } 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(255, 204, 51, 0); } } .legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 14px auto 0; max-width: min(640px, 94vw); color: var(--text-dim); font-size: 0.82rem; font-weight: 600; } .legend__item { display: inline-flex; align-items: center; gap: 6px; } .legend__swatch { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35); } .legend__swatch--you { background: radial-gradient(circle at 35% 30%, var(--you-1), var(--you-2)); border: 1px solid var(--you-edge); } .legend__swatch--cpu { background: radial-gradient(circle at 35% 30%, var(--cpu-1), var(--cpu-2)); border: 1px solid var(--cpu-edge); } .legend__swatch--move { background: radial-gradient(circle at 50% 38%, #fff, var(--go-edge)); border: 2px solid rgba(0, 0, 0, 0.8); } .legend__swatch--jump { background: transparent; border: 3px solid var(--jump); } /* -------------------------------------------------------------------------- */ /* 10. Game-over overlay + confetti */ /* -------------------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 38%, rgba(255, 214, 122, 0.22), rgba(16, 19, 52, 0.86) 42%, rgba(3, 5, 15, 0.95)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: overlay-in 0.28s ease-out both; } .overlay[hidden] { display: none; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .overlay__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .overlay__card { position: relative; z-index: 1; width: min(430px, 92vw); padding: 26px 24px 22px; border-radius: 20px; background: linear-gradient(180deg, #fffaf0, #f2e3c9); border: 4px solid var(--gold-2); color: var(--panel-ink); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.7); animation: card-pop 0.45s cubic-bezier(0.18, 1.3, 0.4, 1) both; } @keyframes card-pop { from { transform: scale(0.7) translateY(24px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .overlay__icon { font-size: 4rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); animation: icon-cheer 1.4s ease-in-out infinite; } @keyframes icon-cheer { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.14) rotate(6deg); } } .overlay__title { margin: 8px 0 6px; font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 900; letter-spacing: 0.02em; color: #8a4b00; text-shadow: 0 2px 0 #fff, 0 3px 6px rgba(0, 0, 0, 0.2); } .overlay__msg { margin: 0 0 14px; font-size: 1rem; font-weight: 600; color: #5c4426; } /* Scripture on the result card. Hidden when there is nothing to show. */ .overlay__verse { margin: 0 0 18px; padding: 11px 14px; border-left: 4px solid var(--gold-2); border-radius: 4px; background: rgba(255, 255, 255, 0.55); text-align: left; } .overlay__verse.is-empty { display: none; } .overlay__verse-text { display: block; color: #4a3410; font-size: 0.95rem; font-style: italic; font-weight: 600; line-height: 1.4; } .overlay__verse-ref { display: block; margin-top: 5px; color: #7d5c1e; font-size: 0.74rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .btn--big { padding: 14px 26px; font-size: 1.2rem; border-radius: 12px; } .overlay__close { display: block; margin: 12px auto 0; font-size: 0.82rem; background: transparent; color: #7a6444; box-shadow: none; border-color: transparent; } .overlay__close:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } /* -------------------------------------------------------------------------- */ /* 11. Responsive + reduced motion + print */ /* -------------------------------------------------------------------------- */ /* Below ~760px the toolbar is allowed to wrap; the two-row rule is a desktop/tablet promise and readability wins on phones. */ @media (max-width: 760px) { .btn { padding: 7px 10px; font-size: 0.84rem; } .seg { padding: 6px 8px; font-size: 0.8rem; } .status { padding: 8px 14px; } } /* On phones the secondary actions drop to icons only. "New Game" keeps its label — it is the one button a child needs to find without help. Each icon-only button carries an aria-label, so hiding the text costs nothing to assistive technology. */ @media (max-width: 430px) { #undo .btn__label, #hint .btn__label, #resign .btn__label { display: none; } #undo, #hint, #resign { padding: 8px 10px; font-size: 1rem; } /* Tightened just enough that "New Game + level picker" still share one line and the whole toolbar stays two rows on a phone. */ .toolbar { gap: 6px; } .btn { padding: 7px 10px; font-size: 0.82rem; } .seg { padding: 6px 7px; font-size: 0.78rem; } .segmented { padding: 2px; } .timer { padding: 7px 9px; font-size: 0.86rem; min-width: 60px; } .status { min-width: 0; width: 100%; } .legend { font-size: 0.74rem; gap: 6px 12px; } .verse { padding: 9px 16px 10px; margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media print { html { background: #fff; } body { color: #000; } body::before, body::after, .title::before { display: none !important; } .toolbar, .overlay, .legend { display: none !important; } .verse { box-shadow: none; } }