.button{justify-content:center;align-items:center;gap:var(--spacing-sm);min-height:44px;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-full);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);border:1px solid #0000;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.button--primary{background-color:var(--color-primary);color:var(--color-primary-foreground)}.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--secondary{background-color:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}.button--secondary:hover:not(:disabled){border-color:var(--color-text-primary)}.button--ghost{color:var(--color-text-secondary);background-color:#0000}.button--ghost:hover:not(:disabled){color:var(--color-text-primary)}.button:disabled{opacity:.5;box-shadow:none}.home{align-items:center;gap:var(--spacing-xxl);width:100%;max-width:560px;padding:var(--spacing-xxxl) var(--spacing-xl);flex-direction:column;margin:auto;display:flex}.home__header{text-align:center}.home__header .material-symbols-rounded{color:var(--color-primary);font-size:48px}.home__title{margin-top:var(--spacing-sm);font-size:var(--font-size-display);font-weight:var(--font-weight-extrabold)}.home__subtitle{margin-top:var(--spacing-xs);color:var(--color-text-secondary)}.home__modes{gap:var(--spacing-md);flex-direction:column;width:100%;display:flex}.home__mode{align-items:flex-start;gap:var(--spacing-xs);width:100%;padding:var(--spacing-xl);text-align:left;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;transition:border-color .15s,box-shadow .15s;display:flex}.home__mode:hover{border-color:var(--color-text-primary)}.home__mode--selected{border-color:var(--color-text-primary);box-shadow:var(--focus-ring)}.home__mode .material-symbols-rounded{color:var(--color-primary);font-size:32px}.home__mode-label{align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-bold);display:flex}.home__mode-description{font-size:var(--font-size-label);color:var(--color-text-secondary)}.home__difficulty{justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.home__difficulty-option{min-height:40px;padding:var(--spacing-sm) var(--spacing-xl);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);transition:background-color .15s,border-color .15s,color .15s}.home__difficulty-option--active{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-foreground)}@media (height<=720px){.home{gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-xl)}.home__header .material-symbols-rounded{font-size:40px}.home__mode{padding:var(--spacing-lg) var(--spacing-xl)}}@media (width<=360px){.home{padding-right:var(--spacing-md);padding-left:var(--spacing-md)}}@media (height<=520px){.home{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-xl)}.home__header .material-symbols-rounded{font-size:28px}.home__title{font-size:var(--font-size-title);margin-top:0}.home__mode{padding:var(--spacing-sm) var(--spacing-xl);gap:0}.home__mode .material-symbols-rounded{font-size:24px}}@media (height<=360px){.home{gap:var(--spacing-xs);padding-top:0;padding-bottom:0}.home__subtitle{display:none}.home__header .material-symbols-rounded{font-size:22px}.home__mode{padding:var(--spacing-xs) var(--spacing-xl)}}.scoreboard{width:100%;max-width:var(--board-max,760px);padding:var(--spacing-lg) var(--spacing-xl);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:0}.scoreboard__top-row{justify-content:center;align-items:center;display:flex}.scoreboard__badge{padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-muted);color:var(--color-text-secondary);border-radius:var(--radius-sm);font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);letter-spacing:.5px;text-transform:uppercase}.scoreboard__names{margin-top:var(--spacing-sm);grid-template-columns:1fr 1fr;display:grid}.scoreboard__name{font-size:var(--font-size-subtitle);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);transition:color .15s}.scoreboard__name:nth-child(2){text-align:right}.scoreboard__name--active{color:var(--color-text-primary)}.scoreboard__counts{margin-top:var(--spacing-xs);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.scoreboard__count{font-size:var(--font-size-display);font-weight:var(--font-weight-extrabold);color:var(--color-text-secondary);transition:color .15s}.scoreboard__count--active{color:var(--color-primary)}.scoreboard__count:nth-child(3){text-align:right}.scoreboard__vs{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--font-size-caption);font-weight:var(--font-weight-bold);text-transform:lowercase;color:var(--color-text-secondary);background-color:var(--color-muted);border-radius:var(--radius-full);justify-self:center}@media (height<=720px){.scoreboard{padding:var(--spacing-md) var(--spacing-lg)}.scoreboard__names{margin-top:0}.scoreboard__counts{margin-top:var(--spacing-xs)}.scoreboard__count{font-size:var(--font-size-title)}.scoreboard__badge{padding:2px var(--spacing-md)}}@media (height<=440px){.scoreboard{padding:var(--spacing-sm) var(--spacing-lg)}.scoreboard__badge{display:none}}.chessboard{width:100%;max-width:var(--board-max,760px);aspect-ratio:1;border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);background-color:var(--color-surface);grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;overflow:hidden;container-type:inline-size}.board__square{cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;min-height:0;padding:0;display:flex;position:relative}.board__square:disabled{cursor:default}.board__square--light{background-color:var(--color-board-light)}.board__square--dark{background-color:var(--color-board-dark)}.board__marker{pointer-events:none;position:absolute;inset:0}.board__marker--last-move{background-color:color-mix(in srgb, var(--color-last-move) 35%, transparent)}.board__marker--check{background-color:color-mix(in srgb, var(--color-error) 32%, transparent)}.board__marker--selection{background-color:color-mix(in srgb, var(--color-selection) 45%, transparent)}.board__marker--target{justify-content:center;align-items:center;display:flex}.board__marker--dot{border-radius:var(--radius-full);background-color:var(--color-move-hint);width:28%;height:28%;box-shadow:0 1px 2px #00000026}.board__marker--capture{border-radius:var(--radius-full);border:clamp(2px, .9cqw, 5px) solid var(--color-capture-hint);opacity:.85;inset:6%}.piece{z-index:1;-webkit-user-select:none;user-select:none;font-size:9.2cqw;line-height:1}.piece--white{color:var(--color-piece-white);text-shadow:.06em 0 0 var(--color-piece-black-border), -.06em 0 0 var(--color-piece-black-border), 0 .06em 0 var(--color-piece-black-border), 0 -.06em 0 var(--color-piece-black-border), .04em .04em 0 var(--color-piece-black-border), -.04em .04em 0 var(--color-piece-black-border), .04em -.04em 0 var(--color-piece-black-border), -.04em -.04em 0 var(--color-piece-black-border), 0 2px 4px #00000059}.piece--black{color:var(--color-piece-black);text-shadow:.06em 0 0 var(--color-piece-white-border), -.06em 0 0 var(--color-piece-white-border), 0 .06em 0 var(--color-piece-white-border), 0 -.06em 0 var(--color-piece-white-border), .04em .04em 0 var(--color-piece-white-border), -.04em .04em 0 var(--color-piece-white-border), .04em -.04em 0 var(--color-piece-white-border), -.04em -.04em 0 var(--color-piece-white-border), 0 1px 3px #00000040}.captured-pieces{justify-content:center;align-items:center;gap:var(--spacing-xs);flex-direction:column;min-width:44px;display:flex}.captured-pieces .piece{font-size:clamp(18px,3.4vw,30px);line-height:1}@media (width<=640px){.captured-pieces{min-width:0}.captured-pieces .piece{font-size:clamp(10px,3.2vw,16px)}}.game-over{z-index:10;padding:var(--spacing-xl);background-color:color-mix(in srgb, var(--color-text-primary) 45%, transparent);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.game-over__card{align-items:center;gap:var(--spacing-lg);width:100%;max-width:380px;padding:var(--spacing-xxxl) var(--spacing-xxl);background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);text-align:center;flex-direction:column;display:flex}.game-over__card .material-symbols-rounded{color:var(--color-warning);font-size:48px}.game-over__title{font-size:var(--font-size-title);font-weight:var(--font-weight-extrabold)}.game-over__subtitle{color:var(--color-text-secondary)}.game-over__actions{gap:var(--spacing-sm);flex-direction:column;width:100%;display:flex}@media (width<=420px){.game-over__card{padding:var(--spacing-lg)}}@media (height<=600px){.game-over{padding:var(--spacing-md)}.game-over__card{padding:var(--spacing-lg) var(--spacing-xl)}.game-over__card .material-symbols-rounded{font-size:32px}}.game-screen{--board-reserve:360px;--board-max:min(760px, calc(100dvh - var(--board-reserve)));--board-gutter:clamp(40px, 5vw, 88px);grid-template-columns:var(--board-gutter) minmax(0, 1fr) var(--board-gutter);place-items:center;column-gap:var(--spacing-md);row-gap:var(--spacing-lg);width:100%;max-width:1100px;padding:var(--spacing-lg) var(--spacing-xl);grid-template-rows:auto auto auto;margin:0 auto;display:grid}.game-screen__score{grid-area:1/2;justify-content:center;width:100%;display:flex}.game-screen__board{grid-area:2/2;justify-content:center;width:100%;min-width:0;display:flex}.game-screen__controls{align-items:center;gap:var(--spacing-sm);flex-direction:column;grid-area:3/2;width:100%;display:flex}.game-screen__side{justify-content:center;min-width:0;display:flex}.game-screen__side--left{grid-area:2/1}.game-screen__side--right{grid-area:2/3}.game-screen__actions{justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.game-screen__status{font-size:var(--font-size-label);color:var(--color-text-secondary)}@media (width<=640px){.game-screen{--board-gutter:clamp(8px, 4vw, 32px);padding:var(--spacing-md);row-gap:var(--spacing-sm);column-gap:var(--spacing-sm)}}@media (height<=720px){.game-screen{--board-reserve:240px;padding:var(--spacing-sm) var(--spacing-xl);row-gap:var(--spacing-sm)}}@media (height<=600px){.game-screen{--board-reserve:220px}}@media (height<=440px){.game-screen{--board-reserve:190px}}.app{min-height:100dvh;padding:var(--spacing-lg) 0;display:flex}@media (height<=720px){.app{padding:var(--spacing-sm) 0}}:root{--color-bg:#fafafa;--color-surface:#fff;--color-muted:#f0f0f0;--color-text-primary:#242424;--color-text-secondary:#7f7f7f;--color-text-placeholder:#ccc;--color-border:#e8e8e8;--color-primary:#242424;--color-primary-hover:#3d3d3d;--color-primary-active:#1a1a1a;--color-primary-foreground:#fff;--color-success:#73b468;--color-error:#dc2626;--color-warning:#fbcd44;--color-info:#5c98f9;--color-board-light:#efeae4;--color-board-dark:#b9ac98;--color-piece-white:#f5f4f2;--color-piece-white-border:#d8d3cb;--color-piece-black:#2e2b28;--color-piece-black-border:#1c1a18;--color-selection:#5c98f9;--color-move-hint:#73b468;--color-last-move:#fbcd44;--color-capture-hint:#dc2626;--font-family-base:"Inter", system-ui, -apple-system, sans-serif;--font-size-display:2rem;--font-size-title:1.5rem;--font-size-subtitle:1.125rem;--font-size-body:1rem;--font-size-label:.875rem;--font-size-caption:.75rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem;--spacing-xxl:2rem;--spacing-xxxl:3rem;--spacing-xxxxl:4rem;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-full:9999px;--shadow-sm:0 2px 8px #00000026;--shadow-md:0 3px 12px #00000038;--shadow-lg:0 8px 30px #0000001f;--shadow-xl:0 20px 60px #0003;--focus-ring:0 0 0 3px #24242440}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-family-base);font-size:var(--font-size-body);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}h1,h2,h3,h4{line-height:1.2;font-weight:var(--font-weight-bold);margin:0}p{margin:0}button,input,select{font-family:inherit;font-size:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{box-shadow:var(--focus-ring);outline:none}.material-symbols-rounded{font-variation-settings:"FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24}