@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&display=swap');

:root {
  --app-font-sans: 'Manrope', sans-serif;
  --app-font-serif: 'Newsreader', Georgia, serif;
  --app-font-mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #eee6d8; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 8%, rgba(229, 107, 78, .11), transparent 28rem),
    radial-gradient(circle at 88% 72%, rgba(38, 103, 111, .10), transparent 30rem),
    #eee6d8;
  color: #1e2b34;
  font-family: var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
button:focus-visible, [role="button"]:focus-visible { outline: 3px solid rgba(229,107,78,.45); outline-offset: 3px; }

.chess-app {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}
.chess-app::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.topbar, .main-shell { position: relative; z-index: 1; }
.topbar {
  width: min(1260px, calc(100% - 40px));
  margin: 0 auto;
  padding: 27px 0 23px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: #1e2b34; color: #f3ead9;
  display: grid; place-items: center;
  font: 700 24px/1 var(--app-font-serif);
  box-shadow: 4px 5px 0 #d36a4d;
}
.brand-name { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.brand-subtitle { margin: 3px 0 0; color: #788079; font-size: 11px; letter-spacing: .05em; }
.session-label { text-align: right; }
.session-label p { margin: 0; }
.session-label .eyebrow { font: 500 10px/1 var(--app-font-mono); color: #89918a; letter-spacing: .12em; text-transform: uppercase; }
.session-label .match-name { margin-top: 7px; font-family: var(--app-font-serif); font-size: 21px; color: #344b50; }

.main-shell {
  width: min(1260px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 346px;
  gap: 38px;
  align-items: start;
}
.board-stage { min-width: 0; }
.match-strip { display: flex; align-items: center; justify-content: space-between; margin: 0 5px 14px; }
.player-chip { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: #4e5b5b; }
.player-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #d4c9b6; border: 1px solid rgba(30,43,52,.2); }
.player-chip.active { color: #1e2b34; }
.player-chip.active .dot { background: #e56b4e; box-shadow: 0 0 0 4px rgba(229,107,78,.13); }
.turn-caption { color: #8b9188; font: 500 10px var(--app-font-mono); letter-spacing: .13em; text-transform: uppercase; }
.board-frame {
  position: relative;
  width: min(100%, 720px, calc(100dvh - 190px));
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.board {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  overflow: hidden;
  border-radius: 9px;
  border: 0;
  background: #d8bc8f;
}
.square {
  position: relative;
  border: 0;
  padding: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #1f2c31;
  transition: filter .16s ease, transform .16s ease;
}
.square.light { background: #e9d5ad; }
.square.dark { background: #a75e47; color: #f6ead5; }
.square:hover { filter: brightness(1.08); }
.square:active { transform: scale(.97); }
.square.selected { box-shadow: inset 0 0 0 4px rgba(239, 116, 80, .95); z-index: 2; }
.square.last-move { background-image: linear-gradient(rgba(244, 194, 91, .38), rgba(244,194,91,.38)); }
.square.in-check { background-image: radial-gradient(circle, rgba(223,69,57,.9) 0 22%, rgba(223,69,57,.4) 42%, transparent 70%); }
.square.legal::after {
  content: '';
  width: 19%;
  aspect-ratio: 1;
  position: absolute;
  border-radius: 50%;
  background: rgba(30,43,52,.28);
  transition: transform .15s ease;
}
.square.dark.legal::after { background: rgba(247, 226, 185, .68); }
.square.legal:hover::after { transform: scale(1.32); }
.square.capture-target::after {
  width: 72%; height: 72%;
  background: transparent;
  border: 3px solid rgba(229, 107, 78, .78);
}
.piece {
  position: relative; z-index: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 6.8vw, 67px);
  line-height: 1;
  transform: translateY(-2%);
  user-select: none;
  transition: transform .18s ease;
}
.square:hover .piece { transform: translateY(-5%) scale(1.04); }
.piece.white-piece { color: #fff0d4; text-shadow: 0 2px 0 rgba(64,39,28,.55), 0 4px 7px rgba(38,24,18,.28); }
.piece.black-piece { color: #24343a; text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 4px 5px rgba(32,22,19,.26); }
.coord {
  position: absolute; z-index: 2;
  font: 500 clamp(8px, 1.25vw, 12px)/1 var(--app-font-mono);
  opacity: .68;
  pointer-events: none;
}
.rank-coord { top: 6px; left: 6px; }
.file-coord { right: 6px; bottom: 5px; }
.square.dark .coord { color: #f3dfbd; }
.square.light .coord { color: #915842; }
.board-caption {
  display: flex; justify-content: space-between; align-items: center;
  margin: 13px 4px 0; color: #8a8b82; font: 500 10px var(--app-font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.board-caption .legal-note { display: flex; gap: 7px; align-items: center; }
.mini-dot { width: 7px; height: 7px; border-radius: 50%; background: #d38b54; }

.side-panel { display: flex; flex-direction: column; gap: 13px; }
.status-card, .history-card, .info-card {
  border: 1px solid rgba(30,43,52,.12);
  border-radius: 16px;
  background: rgba(248, 243, 234, .78);
  box-shadow: 0 10px 26px rgba(64, 51, 34, .06);
  backdrop-filter: blur(8px);
}
.status-card { padding: 21px 21px 19px; }
.status-kicker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.status-kicker span:first-child { color: #8d948d; font: 500 10px var(--app-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.live-badge { color: #31736e; font: 500 10px var(--app-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.live-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: #5aa38b; }
.status-card h1 { margin: 0; font: 600 30px/.98 var(--app-font-serif); letter-spacing: -.025em; color: #22313a; }
.status-card p { margin: 9px 0 0; color: #69746f; font-size: 12px; line-height: 1.55; }
.status-card.is-check { border-color: rgba(229,107,78,.42); background: rgba(255, 239, 225, .86); }
.status-card.is-over { border-color: rgba(37, 89, 94, .35); background: rgba(232, 241, 235, .88); }
.action-row { display: flex; gap: 8px; margin-top: 19px; }
.action-button {
  min-height: 39px; border: 1px solid #d5c7b5; border-radius: 9px;
  padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; color: #32434a; background: #f7f0e5; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.action-button:hover { border-color: #e56b4e; background: #fff6eb; color: #cf583d; transform: translateY(-1px); }
.action-button:active { transform: translateY(1px); }
.action-button.primary { flex: 1; border-color: #e56b4e; background: #e56b4e; color: #fff4df; box-shadow: 0 4px 0 #b9533c; }
.action-button.primary:hover { background: #d96145; color: #fff4df; }

.history-card { overflow: hidden; }
.card-heading { padding: 17px 19px 13px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(30,43,52,.09); }
.card-heading h2 { margin: 0; color: #34484e; font: 600 18px var(--app-font-serif); }
.card-heading span { color: #a19b8d; font: 500 10px var(--app-font-mono); }
.history-list { max-height: 330px; overflow-y: auto; padding: 5px 8px 8px; }
.history-row { display: grid; grid-template-columns: 33px 1fr 1fr; align-items: center; min-height: 38px; border-radius: 8px; padding: 0 10px; font-size: 12px; }
.history-row:nth-child(odd) { background: rgba(220, 208, 190, .24); }
.move-no { color: #aaa497; font: 500 10px var(--app-font-mono); }
.move-san { color: #35464b; font: 600 13px var(--app-font-mono); }
.move-san.recent { color: #ce5c42; }
.empty-history { padding: 28px 15px 30px; text-align: center; color: #96988f; font-size: 12px; line-height: 1.5; }
.empty-history strong { display: block; margin-bottom: 5px; color: #556467; font-family: var(--app-font-serif); font-size: 17px; font-weight: 600; }
.info-card { padding: 16px 19px; }
.info-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #7b837d; font-size: 11px; }
.info-line + .info-line { margin-top: 10px; }
.info-line strong { color: #405054; font: 500 11px var(--app-font-mono); }

.promotion-backdrop {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(24, 34, 38, .42); backdrop-filter: blur(4px);
  animation: fade-in .18s ease both;
}
.promotion-card { width: min(350px, calc(100% - 32px)); padding: 23px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; background: #f7efe2; box-shadow: 0 24px 70px rgba(16,23,26,.3); }
.promotion-card h2 { margin: 0; font: 600 25px var(--app-font-serif); color: #25353b; }
.promotion-card p { margin: 5px 0 17px; color: #737b75; font-size: 12px; }
.promotion-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.promotion-option { min-height: 78px; border: 1px solid #d9c7ae; border-radius: 11px; background: #fff8ed; cursor: pointer; color: #29383c; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.promotion-option:hover { transform: translateY(-3px); border-color: #e56b4e; background: #fff0dd; }
.promotion-option .promotion-piece { display: block; font: 42px/1 Georgia, serif; }
.promotion-option span:last-child { color: #7b827d; font: 500 9px var(--app-font-mono); text-transform: uppercase; }
.thinking-bar { margin-top: 15px; display: flex; align-items: center; gap: 8px; color: #6e7b76; font: 500 10px var(--app-font-mono); letter-spacing: .09em; text-transform: uppercase; }
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: #e56b4e; animation: pulse-dot 1s infinite ease-in-out; }
.thinking-dots i:nth-child(2) { animation-delay: .13s; }.thinking-dots i:nth-child(3) { animation-delay: .26s; }
.capture-flash { animation: capture-flash .42s ease; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-dot { 0%, 60%, 100% { opacity: .28; transform: scale(.8); } 30% { opacity: 1; transform: scale(1.15); } }
@keyframes capture-flash { 0% { filter: brightness(1); } 45% { filter: brightness(1.35) saturate(1.25); } 100% { filter: brightness(1); } }

@media (max-width: 900px) {
  .main-shell { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
  .status-card h1 { font-size: 26px; }
}
@media (max-width: 720px) {
  .topbar, .main-shell { width: min(100% - 24px, 560px); }
  .topbar { padding: 18px 0 19px; }
  .brand-mark { width: 34px; height: 34px; font-size: 21px; }
  .brand-subtitle { display: none; }
  .session-label .match-name { font-size: 17px; }
  .main-shell { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
  .board-stage, .side-panel { width: 100%; }
  .board-frame { width: 100%; }
  .side-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .status-card { grid-column: 1 / -1; }
  .history-card { min-width: 0; }
  .info-card { min-width: 0; }
}
@media (max-width: 470px) {
  .topbar, .main-shell { width: calc(100% - 20px); }
  .board-frame { padding: 0; border-radius: 0; }
  .match-strip { margin-bottom: 9px; }
  .player-chip { font-size: 11px; }
  .turn-caption { font-size: 9px; }
  .side-panel { display: flex; }
  .history-list { max-height: 260px; }
  .info-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .info-line + .info-line { margin-top: 0; }
}