* { box-sizing: border-box; }

:root {
    --ink: #171719;
    --muted: #68676c;
    --paper: #f5f5f3;
    --line: rgba(23, 23, 25, .14);
    --night: #0d0c0f;
    --night-soft: #151419;
    --night-line: rgba(255, 255, 255, .13);
    --night-muted: #aaa7af;
    --pink: #ffa4ce;
    --blue: #b9d8ff;
    --board-light: #ebe9e6;
    --board-dark: #55515b;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html { scroll-behavior: smooth; }
body { margin: 0; padding-top: 68px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 9% 5%, rgba(177, 208, 255, .42), transparent 28rem), radial-gradient(circle at 86% 9%, rgba(255, 224, 157, .42), transparent 30rem), radial-gradient(circle at 52% 29%, rgba(255, 178, 213, .25), transparent 31rem); pointer-events: none; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button { font: inherit; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(247, 247, 245, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.wordmark { font-size: 17px; font-weight: 650; letter-spacing: -.025em; text-decoration: none; }
.site-header nav { display: flex; gap: 30px; font-size: 14px; }
.site-header nav a { text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }

main { width: min(1440px, 100%); margin: 0 auto; }
#project, #chess { scroll-margin-top: 68px; }
.eyebrow, .section-label, .panel-label, .player-strip span { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hero { min-height: min(760px, 84vh); display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 11vw, 160px) clamp(20px, 6vw, 86px); }
.hero h1 { margin: 20px 0 30px; font-size: clamp(76px, 13.5vw, 194px); font-weight: 570; letter-spacing: -.075em; line-height: .84; }
.hero-lede { max-width: 790px; margin: 0; font-size: clamp(28px, 4vw, 52px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }

.statement { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(300px, 2.7fr); gap: 50px; padding: clamp(80px, 10vw, 145px) clamp(20px, 6vw, 86px); border-top: 1px solid var(--line); }
.section-label { padding-top: 12px; }
.statement-copy { max-width: 850px; }
.statement h2 { max-width: 760px; margin: 0 0 52px; font-size: clamp(48px, 6vw, 82px); font-weight: 570; letter-spacing: -.055em; line-height: .96; }
.statement-copy > p { max-width: 760px; margin: 0 0 24px; color: #353439; font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -.018em; line-height: 1.55; }
.text-link { display: inline-block; margin-top: 16px; font-size: 16px; font-weight: 600; }

.chess-intro { padding: clamp(90px, 12vw, 170px) clamp(20px, 6vw, 86px) clamp(58px, 7vw, 96px); border-top: 1px solid var(--line); }
.chess-intro h2 { margin: 18px 0 25px; font-size: clamp(70px, 12vw, 164px); font-weight: 570; letter-spacing: -.075em; line-height: .86; }
.chess-intro > p:last-child { max-width: 660px; margin: 0; color: #353439; font-size: clamp(18px, 2vw, 25px); line-height: 1.5; }

.key-access { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 8vw, 120px); align-items: end; padding: 0 clamp(20px, 6vw, 86px) clamp(65px, 8vw, 110px); }
.key-access h3 { margin: 12px 0 16px; font-size: clamp(32px, 4vw, 54px); font-weight: 580; letter-spacing: -.045em; }
.key-access > div:first-child > p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.key-control { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.42); backdrop-filter: blur(18px); }
.key-control label { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.key-input-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.key-input-row input { min-width: 0; height: 45px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.7); color: var(--ink); font: 14px var(--mono); }
.key-input-row input:focus { border-color: #77737d; outline: 2px solid rgba(119,115,125,.18); }
.key-input-row button { padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: white; cursor: pointer; }
.key-input-row button:last-child { background: transparent; color: var(--ink); }
.key-input-row button:disabled { cursor: not-allowed; opacity: .42; }
.key-status { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.key-status.connected { color: #306b4b; }

.playground { display: grid; grid-template-columns: minmax(520px, 1.45fr) minmax(350px, .8fr); overflow: hidden; border-radius: 30px 30px 0 0; background: var(--night); color: #f6f3f5; box-shadow: 0 30px 90px rgba(50, 43, 59, .18); }
.game-column { padding: clamp(20px, 4vw, 54px); }
.player-strip { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.player-strip-top { margin-bottom: 20px; border-bottom: 1px solid var(--night-line); }
.player-strip span { display: block; color: var(--night-muted); font-size: 9px; }
.player-strip strong { display: block; margin-top: 4px; font-size: 15px; }
.thinking { display: flex; align-items: center; gap: 8px; color: var(--pink); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); animation: pulse 1s ease-in-out infinite; }
.hidden { display: none !important; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.6); } }

.board-shell { padding: 7px; border: 1px solid rgba(255,255,255,.17); border-radius: 5px; background: rgba(255,255,255,.035); }
.board { width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); overflow: hidden; border-radius: 2px; }
.square { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer; user-select: none; font-family: "Arial Unicode MS", "Noto Sans Symbols 2", serif; font-size: clamp(32px, 5.2vw, 76px); line-height: 1; transform: none; transition: filter .12s ease; }
.square.light { background: var(--board-light); }
.square.dark { background: var(--board-dark); }
.square:hover { filter: brightness(1.06); }
.square:focus-visible { z-index: 6; outline: 3px solid var(--pink); outline-offset: -3px; }
.square.selected::after, .square.last-move::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.square.last-move::after { background: rgba(255, 227, 161, .34); }
.square.selected::after { background: rgba(255, 164, 206, .58); }
.square.legal::before { content: ""; position: absolute; z-index: 3; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(19, 75, 53, .45); box-shadow: 0 0 0 5px rgba(182, 225, 203, .22); animation: none; transform: none; }
.square.capture::before { width: 72%; height: 72%; border: 5px solid rgba(80, 181, 137, .55); background: transparent; box-shadow: none; }
.piece { position: relative; z-index: 4; }
.black-piece { color: #17151b; filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
.white-piece { color: #fbf8f5; filter: drop-shadow(0 2px 1px rgba(0,0,0,.72)); }
.coordinate { position: absolute; z-index: 5; color: currentColor; font-family: var(--mono); font-size: clamp(7px, .7vw, 9px); opacity: .5; }
.coordinate.file { right: 5px; bottom: 4px; }
.coordinate.rank { left: 5px; top: 4px; }
.game-status { max-width: 50%; font-size: 13px !important; text-align: right; }
.game-status[data-error="true"] { color: var(--pink); }
.turn-status { display: grid; gap: 4px; justify-items: end; }
.turn-status small { color: var(--night-muted); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }

.analysis-panel { padding: clamp(28px, 3.5vw, 50px); border-left: 1px solid var(--night-line); background: var(--night-soft); }
.analysis-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.panel-label { color: var(--night-muted); }
.analysis-header h3 { margin: 7px 0 0; font-size: 48px; font-weight: 570; letter-spacing: -.045em; }
.state-pill { padding: 6px 9px; border: 1px solid var(--night-line); border-radius: 999px; color: var(--night-muted); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.selected-move-block { display: flex; align-items: end; justify-content: space-between; margin-top: 38px; padding: 20px 0; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.selected-move-block span, .metric-heading span, .metric-grid span { color: var(--night-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.selected-move-block strong { color: var(--pink); font-size: 48px; font-weight: 580; letter-spacing: -.04em; line-height: .8; }
.confidence-section { padding: 20px 0; }
.metric-heading { display: flex; justify-content: space-between; margin-bottom: 11px; }
.metric-heading strong { font-family: var(--mono); font-size: 11px; }
.meter, .candidate-bar { height: 2px; overflow: hidden; background: rgba(255,255,255,.12); }
.meter div, .candidate-bar div { width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--blue)); transition: width .4s ease; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.metric-grid > div { padding: 16px 10px 16px 0; }
.metric-grid > div + div { padding-left: 12px; border-left: 1px solid var(--night-line); }
.metric-grid span { display: block; min-height: 23px; }
.metric-grid strong { display: block; margin-top: 7px; font-family: var(--mono); font-size: 14px; font-weight: 400; }
.panel-section { padding-top: 30px; }
.panel-section h4 { margin: 0 0 13px; font-size: 13px; font-weight: 550; }
.candidate { display: grid; grid-template-columns: 46px 1fr 43px; align-items: center; gap: 10px; padding: 7px 0; font-family: var(--mono); font-size: 9px; }
.candidate strong { font-size: 11px; font-weight: 400; }
.candidate > span { color: var(--night-muted); text-align: right; }
.empty { margin: 0; color: var(--night-muted); font-size: 12px; line-height: 1.5; }
#move-history { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 3px 7px; max-height: 130px; overflow: auto; font-family: var(--mono); font-size: 10px; }
#move-history .empty { grid-column: 1 / -1; }
.move-number { padding: 4px 0; color: #6f6b76; }
.move { padding: 4px 6px; border-radius: 3px; background: rgba(255,255,255,.035); }
.reset-button { width: 100%; display: flex; justify-content: space-between; margin-top: 28px; padding: 13px 0; border: 0; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); background: transparent; color: white; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.reset-button:hover { color: var(--pink); }
.reset-button:disabled { cursor: wait; opacity: .45; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); background: rgba(250,250,248,.6); font-size: 13px; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(5,4,7,.72); backdrop-filter: blur(12px); }
.promotion-dialog { width: min(440px, 100%); padding: 32px; border: 1px solid var(--night-line); border-radius: 16px; background: var(--night-soft); color: white; }
.promotion-dialog h2 { margin: 8px 0 24px; font-size: 40px; font-weight: 570; letter-spacing: -.04em; }
.promotion-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.promotion-options button { aspect-ratio: 1; border: 1px solid var(--night-line); border-radius: 6px; background: rgba(255,255,255,.05); color: white; font-family: Georgia, serif; font-size: 35px; cursor: pointer; }
.promotion-options button:hover, .promotion-options button:focus-visible { border-color: var(--pink); outline: 0; }

@media (max-width: 980px) {
    .playground { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; }
    .analysis-panel { border-top: 1px solid var(--night-line); border-left: 0; }
    .board-shell { max-width: 760px; margin: 0 auto; }
}

@media (max-width: 700px) {
    .site-header nav { gap: 16px; font-size: 12px; }
    .hero { min-height: 620px; }
    .statement { grid-template-columns: 1fr; gap: 30px; }
    .statement h2 { margin-bottom: 36px; }
    .key-access { grid-template-columns: 1fr; }
    .key-input-row { grid-template-columns: 1fr 1fr; }
    .key-input-row input { grid-column: 1 / -1; }
    .game-column { padding: 14px; }
    .board-shell { padding: 4px; }
    .square { font-size: clamp(27px, 11vw, 49px); }
    .analysis-panel { padding: 30px 20px 38px; }
    footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}