@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;700;900&display=swap');

:root { --ink: #20211f; --muted: #77766f; --paper: #f5f2eb; --card: #fffdf9; --line: #e7e0d6; --red: #bc493e; --red-soft: #f6e2dc; --gold: #d59a54; --green: #708a67; }
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 8% 8%, #fffaf0 0, transparent 35%), var(--paper); font-family: Manrope, "Microsoft YaHei", sans-serif; }
body:before { content: ''; pointer-events: none; position: fixed; inset: 0; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); }
.app-shell { max-width: 1240px; margin: 0 auto; padding: 34px 34px 24px; position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; margin-bottom: 34px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 44px; height: 44px; border: 1px solid #d8cbbd; border-radius: 13px; display: grid; place-items: center; font: 900 24px "Noto Serif SC", serif; color: #faf6ea; background: #262722; box-shadow: 3px 3px 0 #d8cbbd; }
.eyebrow, .section-kicker { color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin: 0; } h1 { font: 900 22px "Noto Serif SC", serif; letter-spacing: .02em; } h1 span { color: var(--muted); font: 500 12px Manrope, sans-serif; margin-left: 7px; }
.top-actions { display: flex; align-items: center; gap: 15px; }
.safe-badge { color: #66715e; font-size: 11px; } .safe-badge i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #83a273; margin-right: 6px; }
.button { border: 0; border-radius: 10px; font: 700 12px Manrope, sans-serif; cursor: pointer; padding: 12px 17px; transition: transform .15s, box-shadow .15s, background .15s; } a.button { display: inline-block; text-decoration: none; } .button:active { transform: translateY(1px); } .button:disabled { cursor: not-allowed; opacity: .45; }
.button-primary { color: #fffaf3; background: #272824; box-shadow: 0 5px 12px #24251f22; } .button-primary:hover { box-shadow: 0 7px 16px #24251f33; transform: translateY(-1px); }
.button-danger { color: #fffaf3; background: #a63d35; box-shadow: 0 5px 12px #8d2e2826; } .button-danger:hover { background: #92342e; box-shadow: 0 7px 16px #8d2e2838; transform: translateY(-1px); }
.button-ghost { color: #4f514b; border: 1px solid var(--line); background: #fffdf9; } .button-ghost:hover { background: #f8f2e9; } .full-width { width: 100%; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: 25px; align-items: start; }
.card { background: color-mix(in srgb, var(--card) 91%, transparent); border: 1px solid #ebe4da; border-radius: 18px; box-shadow: 0 11px 32px #5d4c3310; }
.board-card { position: relative; min-width: 0; overflow: hidden; padding: 23px 25px 17px; } .board-header, .card-title-row { display: flex; align-items: center; justify-content: space-between; } .board-header { margin-bottom: 18px; }
.status-text { font: 700 19px "Noto Serif SC", serif; margin-top: 4px; } .turn-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 30px; background: #faf5ee; color: #76726b; font-size: 11px; } .turn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .turn-dot.red { background: var(--red); } .turn-dot.black { background: #34352f; }
.chess-clocks { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(100%, 660px); margin: 0 auto 13px; } .chess-clock { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 9px 12px; border: 1px solid #ded7cd; border-radius: 8px; color: #77766f; background: #f7f3ed; transition: background .2s, box-shadow .2s, border-color .2s; } .chess-clock span { font-size: 10px; } .chess-clock strong { font: 600 20px "DM Mono", monospace; } .chess-clock.active { border-color: #ba6b5e; background: #fff8f1; box-shadow: 0 0 0 2px #c77a6b22; } .chess-clock.danger { color: #b8322c; animation: clock-pulse .8s ease-in-out infinite; } .black-clock strong { color: #34352f; } .red-clock strong { color: var(--red); } .clock-mode { display: grid; justify-items: center; gap: 2px; min-width: 92px; color: #77766f; } .clock-mode span { font-size: 10px; font-weight: 700; } .clock-mode small { color: #a19b91; font-size: 8px; white-space: nowrap; } @keyframes clock-pulse { 50% { background: #f9ddd7; } }
.board-wrap { width: min(100%, 660px); margin: 0 auto; padding: 14px; border: 1px solid #d6a86f; border-radius: 4px; background: linear-gradient(135deg, #dcaf73, #c99557); box-shadow: inset 0 0 0 4px #d2a064, 0 10px 22px #6c482329; }
.board { container-type: inline-size; position: relative; isolation: isolate; width: 100%; height: auto; min-height: 300px; aspect-ratio: 9 / 10; overflow: hidden; background: linear-gradient(100deg, #e9c58c, #dfb574 48%, #e7c187); border: 1px solid #785331; }
.board-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .board-lines .engrave-light { fill: none; stroke: #f5d9a9; stroke-width: .042; stroke-linecap: square; } .board-lines .engrave-dark { fill: none; stroke: #76502e; stroke-width: .024; stroke-linecap: square; }
.river { position: absolute; z-index: 1; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 10%; display: flex; justify-content: space-around; align-items: center; color: #8a633a; text-shadow: 0 1px 0 #f2d29f; font: 700 clamp(13px, 3.5cqw, 21px) "Noto Serif SC", serif; pointer-events: none; } .river span { letter-spacing: .5em; }
.cell { z-index: 2; position: absolute; display: grid; place-items: center; width: 11.111111%; height: 10%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .cell:before { content: ''; position: absolute; width: 69%; height: 69%; border-radius: 50%; transition: background .15s; } .cell.selectable:before { background: #7f9e6c55; } .cell.selected:before { background: #c56a5970; box-shadow: 0 0 0 2px #bb554c99; } .cell.last:after { content: ''; position: absolute; width: 72%; height: 72%; border: 2px solid #d09b4e; border-radius: 50%; opacity: .74; }
.cell.capture-target:before { width: 80%; height: 80%; background: transparent; border: 3px solid #d43d35; box-shadow: 0 0 0 3px #fff4, 0 0 13px #c52f2988; animation: capture-ring 1s ease-in-out infinite; } .cell.capture-target .piece { box-shadow: 0 3px 4px #4b2e1d55, inset 0 0 0 1px #fff8, 0 0 0 2px #d43d35; } @keyframes capture-ring { 50% { transform: scale(1.08); opacity: .72; } }
.move-route { position: absolute; z-index: 1; height: 5px; border-radius: 6px; pointer-events: none; transform-origin: left center; background: linear-gradient(90deg, #fff0, #fff9 18%, #fff 82%, #fff0); box-shadow: 0 0 7px 2px #fff, 0 0 13px 3px #e8b76d99; animation: route-flash .52s ease-out both; }
.cell.moving-cell { z-index: 9; }
@keyframes route-flash { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 18% { opacity: .95; } 70% { opacity: .8; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } }
.piece { z-index: 2; position: relative; display: grid; place-items: center; width: 75%; height: 75%; border-radius: 50%; font: 900 clamp(15px, 5cqw, 31px) "Noto Serif SC", serif; user-select: none; transform: translateY(-1px); box-shadow: 0 5px 2px #50331f42, 0 8px 8px #422b1d2d, inset 0 2px 2px #fff8, inset 0 -4px 5px #714b272b; transition: transform .12s, box-shadow .12s; } .piece:before { content: ''; position: absolute; inset: 7%; z-index: -1; border: 1px solid currentColor; border-radius: 50%; opacity: .42; box-shadow: inset 0 1px 1px #fff9, inset 0 -2px 3px #5e3b2224; } .piece:after { content: ''; position: absolute; top: 8%; left: 19%; width: 43%; height: 22%; border-radius: 50%; background: linear-gradient(155deg, #fff9, transparent 72%); transform: rotate(-16deg); pointer-events: none; } .piece:hover { transform: translateY(-3px); box-shadow: 0 7px 3px #50331f42, 0 10px 10px #422b1d2d, inset 0 2px 2px #fff9, inset 0 -4px 5px #714b272b; } .piece.red { color: #a92f2b; background: radial-gradient(circle at 34% 24%, #fff2d9 0 10%, #f4d5af 45%, #d9a979 78%, #b97c55 100%); border: 2px solid #a9684e; text-shadow: 0 1px 0 #fff8, 0 -1px 0 #74302b33; } .piece.black { color: #272c28; background: radial-gradient(circle at 34% 24%, #f8edda 0 10%, #e4ceb0 45%, #b99a73 78%, #80694d 100%); border: 2px solid #665845; text-shadow: 0 1px 0 #fff8, 0 -1px 0 #0002; } .piece.last-moved { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #fff8, 0 0 16px 7px #fff, 0 5px 2px #50331f42, 0 8px 8px #422b1d2d, inset 0 0 0 2px #fff, inset 0 2px 2px #fff; animation: last-piece-glow 1.7s ease-in-out infinite; } .piece.route-moving { z-index: 8; pointer-events: none; animation: piece-route .44s cubic-bezier(.2,.76,.25,1), last-piece-glow 1.7s .44s ease-in-out infinite; will-change: transform; }
@keyframes piece-route { 0% { transform: translate(var(--route-x), var(--route-y)) translateY(-1px) scale(1.05); filter: drop-shadow(0 11px 6px #3f281b5c); } 72% { transform: translate(0, -5px) scale(1.045); filter: drop-shadow(0 9px 5px #3f281b45); } 100% { transform: translate(0, -1px) scale(1); filter: none; } }
@keyframes last-piece-glow { 50% { outline-color: #fff; box-shadow: 0 0 0 6px #ffffffa8, 0 0 22px 9px #fff, 0 5px 2px #50331f42, 0 8px 8px #422b1d2d, inset 0 0 0 2px #fff, inset 0 2px 2px #fff; } }
@media (prefers-reduced-motion: reduce) { .piece.route-moving, .move-route { animation: none; } .move-route { display: none; } .piece.last-moved { animation: none; } }
.board-footer { display: flex; justify-content: space-between; color: #817b72; font-size: 11px; margin-top: 15px; } .legend-piece { width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 50%; font: 700 12px "Noto Serif SC", serif; margin-right: 4px; vertical-align: middle; } .red-piece { color: var(--red); background: var(--red-soft); } .black-piece { color: #33352f; background: #ede9df; } .thinking { color: var(--red); } .hidden { visibility: hidden; } .spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #e7c4bd; border-top-color: var(--red); border-radius: 50%; animation: spin .7s linear infinite; margin-right: 5px; vertical-align: -1px; } @keyframes spin { to { transform: rotate(360deg); } }
.side-column { display: grid; gap: 15px; } .opponent-card, .analysis-card, .history-card { padding: 19px; } .opponent-row { display: flex; align-items: center; gap: 10px; margin: 15px 0 16px; } .avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #fff9ed; font: 900 21px "Noto Serif SC", serif; background: #252721; } .opponent-meta { flex: 1; } .opponent-meta h2, .analysis-card h2, .history-card h2 { font: 800 14px "Noto Serif SC", serif; } .opponent-meta p { color: var(--muted); font-size: 11px; margin-top: 3px; } .online-dot { width: 7px; height: 7px; border-radius: 50%; background: #82a06f; box-shadow: 0 0 0 4px #e5eee1; }
.strength-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-bottom: 9px; } .strength-row strong { color: #6d715e; font: 500 11px "DM Mono", monospace; } input[type=range] { width: 100%; height: 3px; accent-color: var(--red); } .range-labels { display: flex; justify-content: space-between; color: #a19b91; font-size: 10px; margin-top: 5px; }
.match-settings { display: grid; gap: 11px; margin-bottom: 17px; padding-bottom: 15px; border-bottom: 1px solid #eee8df; } .match-settings > label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; color: #77766f; font-size: 10px; } .match-settings select { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: #55564f; background: #fffdf9; font: 600 10px Manrope, sans-serif; } .time-setting { display: grid; gap: 7px; color: #77766f; font-size: 10px; } .segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f6f1ea; } .segmented-control button { min-width: 0; padding: 7px 3px; border: 0; border-radius: 6px; color: #8a857c; background: transparent; font: 600 9px Manrope, sans-serif; cursor: pointer; } .segmented-control button.active { color: #fff9ef; background: #34352f; box-shadow: 0 2px 5px #34352f33; }
.invite-panel { display: grid; gap: 8px; margin: 12px 0 15px; } .invite-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } .invite-link-row input { min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: #686961; background: #fffdf9; font: 500 9px "DM Mono", monospace; } .invite-link-row .button { padding: 8px 10px; } .invite-panel small { color: #99938a; font-size: 9px; line-height: 1.5; }
.auto-play-row { display: flex; align-items: center; gap: 12px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #eee8df; cursor: pointer; } .auto-play-row > span { display: grid; gap: 2px; flex: 1; } .auto-play-row strong { font-size: 11px; } .auto-play-row small { color: #99938a; font-size: 9px; } .auto-play-row input { position: absolute; opacity: 0; pointer-events: none; } .switch { position: relative; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 20px; background: #d7d2c9; transition: background .2s; } .switch:after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0003; transition: transform .2s; } .auto-play-row input:checked + .switch { background: var(--green); } .auto-play-row input:checked + .switch:after { transform: translateX(15px); }
.audio-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .audio-controls > label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 1px solid var(--line); border-radius: 8px; color: #77766f; background: #fcf9f3; font-size: 10px; cursor: pointer; } .audio-controls input { accent-color: var(--green); } .audio-controls span { color: var(--red); font: 700 12px "DM Mono", monospace; } .audio-controls .volume-row { grid-column: 1 / -1; justify-content: flex-start; padding: 0 10px; } .volume-row input { flex: 1; min-width: 0; } .volume-row output { width: 32px; color: #77766f; text-align: right; font: 500 9px "DM Mono", monospace; } .music-source-row { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; margin-top: 3px; color: #77766f; font-size: 10px; } .music-source-row label { white-space: nowrap; } .music-source-row select, .music-library-panel select, .online-music-panel input { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #55564f; background: #fffdf9; font: 500 10px Manrope, sans-serif; } .music-library-panel, .online-music-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } .music-library-panel label { grid-column: 1 / -1; color: #77766f; font-size: 9px; } .music-library-panel .button, .online-music-panel .button { padding: 8px 12px; } .music-library-panel small, .online-music-panel small { grid-column: 1 / -1; color: #99938a; font-size: 9px; line-height: 1.45; } .hidden-control { display: none; }
.voice-settings { grid-column: 1 / -1; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fcf9f3; } .voice-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .voice-title span { color: #55564f; font: 700 10px Manrope, sans-serif; } .voice-title button { padding: 3px 8px; border: 1px solid #ddd4c9; border-radius: 6px; color: #77766f; background: #fffdf9; font: 600 9px Manrope, sans-serif; cursor: pointer; } .voice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; } .voice-options label { display: flex; align-items: center; gap: 3px; color: #77766f; font-size: 9px; white-space: nowrap; cursor: pointer; } .voice-select-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: #77766f; font-size: 9px; } .voice-select-row select { min-width: 0; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; color: #55564f; background: #fffdf9; font: 500 10px Manrope, sans-serif; }
.card-title-row { margin-bottom: 17px; } .eval-score { color: var(--green); font: 500 15px "DM Mono", monospace; } .muted { color: #9a958c; font: 500 10px "DM Mono", monospace; } .eval-meter { height: 8px; position: relative; overflow: hidden; border-radius: 7px; background: #e4d9cc; } .eval-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #77916d, #a9b58a); transition: width .3s; } .eval-mid { position: absolute; top: 0; bottom: 0; width: 2px; left: 50%; background: #fffdf9; } .analysis-note { color: #77766f; font-size: 11px; line-height: 1.7; margin: 13px 0 15px; }
.move-list { height: 143px; overflow: auto; border-top: 1px solid #eee8df; border-bottom: 1px solid #eee8df; padding: 7px 0; margin-bottom: 13px; } .empty-history { display: grid; place-items: center; height: 100%; color: #aaa49b; font-size: 11px; } .move-row { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 7px; padding: 7px 5px; font-size: 11px; } .move-row:nth-child(odd) { background: #fcf9f3; } .move-no { color: #aaa49b; font: 500 10px "DM Mono", monospace; } .move-red, .move-black { color: #4c4c45; } .move-red:before { content: '红 '; color: var(--red); } .move-black:before { content: '黑 '; color: #77786f; }
.game-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .game-actions .button { min-width: 0; padding-left: 8px; padding-right: 8px; } .board-actions { width: min(100%, 660px); margin: 13px auto 0; }
.footer-note { text-align: center; color: #aaa49b; font-size: 10px; margin-top: 20px; }
.finish-effect { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; overflow: hidden; color: #fff8eb; background: #241b16db; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s; backdrop-filter: blur(3px); } .finish-effect.show { opacity: 1; visibility: visible; pointer-events: auto; } .finish-rays { position: absolute; width: 150%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, #d7513f33 0deg 8deg, transparent 8deg 18deg); animation: finish-spin 18s linear infinite; } .finish-content { z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; animation: finish-enter .58s cubic-bezier(.2,.9,.25,1.2); } .finish-seal { display: grid; place-items: center; width: 84px; height: 84px; border: 3px double #f2c17a; border-radius: 50%; color: #fff3d9; background: #b33e34; box-shadow: 0 0 0 8px #b33e3444, 0 12px 35px #0007; font: 900 45px "Noto Serif SC", serif; } .finish-title { color: #f6d59d; font: 900 clamp(34px, 7vw, 62px) "Noto Serif SC", serif; text-shadow: 0 4px 14px #0008; } .finish-subtitle { margin-bottom: 12px; color: #e9dfd1; font-size: 13px; } @keyframes finish-spin { to { transform: rotate(360deg); } } @keyframes finish-enter { from { opacity: 0; transform: scale(.72) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .board.checkmate-impact { animation: board-impact .55s ease-out; } @keyframes board-impact { 20% { transform: scale(.985) rotate(-.25deg); filter: saturate(1.5); } 45% { transform: scale(1.012) rotate(.2deg); } 100% { transform: none; } }
.capture-callout { position: absolute; z-index: 18; left: 50%; top: 42%; display: grid; place-items: center; width: 82px; height: 82px; border: 4px double #ffe0a3; border-radius: 50%; color: #fff4d8; background: #b92f29e8; box-shadow: 0 0 0 9px #b92f2933, 0 15px 36px #3d181066; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(.5); font: 900 43px "Noto Serif SC", serif; } .capture-callout.show { visibility: visible; animation: capture-callout .68s cubic-bezier(.2,.9,.25,1); } @keyframes capture-callout { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(-8deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -56%) scale(.94); } }
@media (max-width: 900px) { .app-shell { padding: 22px 14px; } .hero-grid { grid-template-columns: 1fr; } .side-column { grid-template-columns: repeat(3, 1fr); align-items: start; } .history-card { grid-column: span 3; } }
@media (max-width: 620px) { .topbar { align-items: flex-start; } .top-actions { flex: 0 0 auto; } .safe-badge { display: none; } .external-link { display: none !important; } .side-column { grid-template-columns: minmax(0, 1fr); } .history-card { grid-column: auto; } .board-card { padding: 17px 10px 13px; } .board-wrap { padding: 8px; } .status-text { font-size: 16px; } }
@media (max-width: 420px) { .app-shell { padding: 14px 7px 18px; } .topbar { margin: 0 7px 18px; } .brand { gap: 9px; } .brand-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 20px; } h1 { font-size: 18px; } h1 span { display: none; } .button { padding: 10px 13px; } .card { border-radius: 12px; } .board-card { padding: 13px 5px 11px; } .board-header { padding: 0 6px; margin-bottom: 12px; } .chess-clocks { grid-template-columns: minmax(0, 1fr) minmax(54px, 70px) minmax(0, 1fr); gap: 4px; padding: 0 4px; } .chess-clock { padding: 7px 8px; } .chess-clock strong { font-size: 16px; } .clock-mode { min-width: 0; } .clock-mode small { white-space: normal; text-align: center; } .board-wrap { padding: 5px; } .board-actions { width: 100%; } .game-actions .button { white-space: nowrap; overflow: hidden; } .board-footer { padding: 0 5px; gap: 5px; } .legend { font-size: 9px; } .opponent-card, .analysis-card, .history-card { padding: 16px; } }