:root {
  --ink: #160d22;
  --night: #21132f;
  --violet: #432650;
  --plum: #76526e;
  --plum-light: #a5788d;
  --gold: #f0ad3a;
  --gold-soft: #ffd878;
  --cyan: #3de9ff;
  --lime: #b9f23c;
  --red: #ff5a63;
  --paper: #fff2ca;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--paper);
  font-family: "Nunito", sans-serif;
  background:
    linear-gradient(rgba(15, 7, 24, .42), rgba(15, 7, 24, .42)),
    radial-gradient(circle at 15% 15%, rgba(124, 62, 137, .42), transparent 25rem),
    radial-gradient(circle at 90% 80%, rgba(242, 149, 44, .12), transparent 24rem),
    linear-gradient(135deg, #130a1d 0%, #291637 52%, #120a1a 100%);
}

button { font: inherit; }

.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 350px);
  gap: clamp(18px, 3vw, 42px);
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: auto;
  padding: clamp(18px, 4vw, 52px);
}

.game-area { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.title-plaque {
  width: min(700px, 100%);
  margin-bottom: 14px;
  padding: 10px 28px 13px;
  text-align: center;
  border: 2px solid #c98629;
  border-radius: 10px 10px 26px 26px;
  box-shadow: 0 0 0 5px #190d25, 0 0 26px rgba(240, 173, 58, .25);
  background: linear-gradient(135deg, #291536, #56304f 45%, #291536);
}

.title-plaque p, .eyebrow { margin: 0; color: var(--gold-soft); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.title-plaque h1, h2 { margin: 0; font-family: "Cinzel", Georgia, serif; }
.title-plaque h1 { color: #ffe39b; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.1; text-shadow: 0 2px 0 #542a13, 0 0 17px rgba(255, 187, 57, .45); }

.turn-banner {
  width: min(700px, 100%);
  min-height: 48px;
  margin: 0 0 16px;
  padding: 12px 18px;
  color: #dcfbff;
  font-weight: 800;
  text-align: center;
  border: 1px solid rgba(61, 233, 255, .45);
  border-radius: 8px;
  background: rgba(18, 13, 32, .82);
  box-shadow: inset 0 0 18px rgba(61, 233, 255, .09);
}
.turn-banner.check { color: #ffd0d3; border-color: var(--red); box-shadow: inset 0 0 18px rgba(255, 90, 99, .18); }
.turn-banner.thinking { color: var(--lime); border-color: var(--lime); }

.how-to-play {
  width: min(700px, 100%);
  margin: 0 0 16px;
  color: #f3e2ec;
  border: 1px solid rgba(240, 173, 58, .5);
  border-radius: 8px;
  background: rgba(21, 12, 32, .72);
}
.how-to-play summary { padding: 10px 14px; color: var(--gold-soft); font-weight: 800; cursor: pointer; }
.how-to-play ol { margin: 0; padding: 0 22px 5px 36px; }.how-to-play li { margin: 5px 0; }
.how-to-play p { margin: 8px 14px 14px; color: #bfeff6; font-weight: 700; }

.board-frame {
  width: min(760px, 100%);
  padding: clamp(8px, 1.3vw, 15px);
  border: 3px solid #e5a33a;
  border-radius: 15px;
  background: linear-gradient(135deg, #2d1523, #744828 50%, #2b1523);
  box-shadow: 0 0 0 5px #100817, 0 18px 36px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 170, 54, .14);
}

.chessboard { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; overflow: hidden; border: 2px solid #160d22; }

.square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-right: 1px solid rgba(255, 209, 112, .34);
  border-bottom: 1px solid rgba(255, 209, 112, .34);
  transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}
.square.light { background: linear-gradient(135deg, #ad788c, #80566f); }
.square.dark { background: linear-gradient(135deg, #563653, #36213f); }
.square:hover:not(:disabled) { filter: brightness(1.16); }
.square:disabled { cursor: wait; }
.square.selected { z-index: 1; box-shadow: inset 0 0 0 4px var(--cyan), inset 0 0 23px rgba(61, 233, 255, .7); }
.square.last-move { box-shadow: inset 0 0 0 3px rgba(61, 233, 255, .72); }
.square.in-check { box-shadow: inset 0 0 0 4px var(--red), inset 0 0 28px rgba(255, 90, 99, .7); }
.square.legal::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: rgba(185, 242, 60, .88); box-shadow: 0 0 12px var(--lime); }
.square.legal.has-piece::after { width: 88%; background: transparent; border: 4px solid var(--lime); box-shadow: 0 0 15px var(--lime); }

.piece { position: relative; z-index: 1; display: block; font-family: "Times New Roman", serif; font-size: clamp(2rem, 7.2vw, 5.6rem); line-height: .88; transform: translateY(-1%); pointer-events: none; }
.piece.white { color: #fff1c5; text-shadow: 0 2px 0 #744621, 0 0 8px #fff1c5, 1px 0 #1c1024, -1px 0 #1c1024; }
.piece.black { color: #2c193a; text-shadow: 0 1px 0 #d88935, 0 0 9px #a769d1, 1px 0 #100917, -1px 0 #100917; }
.rank, .file { position: absolute; z-index: 2; color: rgba(255, 236, 176, .72); font-family: "Cinzel", serif; font-size: clamp(.48rem, 1.4vw, .78rem); font-weight: 700; pointer-events: none; }
.rank { top: 3px; left: 5px; }.file { right: 5px; bottom: 2px; }
.square.dark .rank, .square.dark .file { color: rgba(255, 232, 176, .9); }

.board-help { margin: 16px 0 0; color: #d7bdd9; font-size: .9rem; text-align: center; }

.side-panel { display: flex; flex-direction: column; gap: 15px; padding: 18px; align-self: center; border: 2px solid rgba(240, 173, 58, .55); border-radius: 18px; background: linear-gradient(165deg, rgba(61, 33, 75, .94), rgba(23, 13, 35, .96)); box-shadow: 0 14px 35px rgba(0, 0, 0, .35); }
.niglo-card { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; min-height: 112px; padding: 10px; border-bottom: 1px solid rgba(240, 173, 58, .35); }
.niglo-portrait { display: grid; place-items: center; width: 86px; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--gold); border-radius: 50% 45% 50% 42%; background: radial-gradient(circle at 42% 35%, #9560a7, #2b1939 67%); box-shadow: inset 0 0 17px rgba(61, 233, 255, .27), 0 0 16px rgba(240, 173, 58, .19); }
.niglo-portrait img { width: 142%; max-width: none; transform: translateY(8%); }
.niglo-card h2 { color: var(--gold-soft); font-size: 1.3rem; }.niglo-mood { margin: 5px 0 0; color: #e7d8ec; font-size: .9rem; line-height: 1.25; }

.control-card, .history-card { padding: 15px; border: 1px solid rgba(240, 173, 58, .42); border-radius: 10px; background: rgba(13, 8, 24, .48); }
.control-card h2, .history-card h2 { color: var(--gold-soft); font-size: 1.05rem; }
.difficulty-options { display: grid; gap: 8px; margin-top: 11px; }
.difficulty { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 9px 12px; color: #f8eac7; font-weight: 800; text-align: left; cursor: pointer; border: 1px solid rgba(240, 173, 58, .3); border-radius: 7px; background: rgba(71, 39, 82, .7); transition: .18s ease; }
.difficulty:hover, .difficulty.active { border-color: var(--cyan); background: #332447; box-shadow: 0 0 11px rgba(61, 233, 255, .45), inset 0 0 12px rgba(61, 233, 255, .13); }.difficulty.active span { color: var(--lime); }

.new-game { padding: 13px 16px; color: #27111b; font-family: "Cinzel", serif; font-weight: 800; font-size: 1rem; cursor: pointer; border: 2px solid #ffcc62; border-radius: 8px; background: linear-gradient(#ffd061, #d67d18); box-shadow: 0 3px 0 #743411, 0 0 17px rgba(240, 173, 58, .22); transition: transform .16s ease, filter .16s ease; }.new-game:hover { filter: brightness(1.1); transform: translateY(-1px); }.new-game:active { transform: translateY(2px); }
.sound-toggle { padding: 10px 14px; color: #dfd1e6; font-weight: 800; cursor: pointer; border: 1px solid rgba(61, 233, 255, .45); border-radius: 8px; background: rgba(13, 8, 24, .52); }.sound-toggle:hover, .sound-toggle.on { color: var(--lime); border-color: var(--lime); box-shadow: inset 0 0 13px rgba(185, 242, 60, .13), 0 0 12px rgba(185, 242, 60, .18); }
.history-card { min-height: 210px; }.history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.history-heading span { color: #b9a7c3; font-size: .78rem; font-weight: 700; }
.move-list { max-height: 255px; margin: 12px 0 0; padding: 0; overflow: auto; list-style: none; }.move-list li { display: grid; grid-template-columns: 32px 1fr 1fr; gap: 8px; padding: 7px 5px; border-bottom: 1px solid rgba(255, 242, 202, .1); font-variant-numeric: tabular-nums; }.move-number { color: var(--gold-soft); font-weight: 800; }.last-san { color: var(--cyan); font-weight: 800; }

.promotion-dialog, .end-dialog { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10, 5, 17, .77); backdrop-filter: blur(5px); }
.promotion-dialog[hidden], .end-dialog[hidden] { display: none; }
.promotion-card, .end-card { width: min(440px, 100%); padding: 27px; text-align: center; border: 2px solid var(--gold); border-radius: 17px; background: linear-gradient(150deg, #4e2c57, #1c102a); box-shadow: 0 0 0 5px #160a20, 0 20px 55px rgba(0, 0, 0, .6); }.promotion-card h2, .end-card h2 { margin: 6px 0 18px; color: var(--gold-soft); }.end-card p { color: #f0dfe8; }
.promotion-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.promotion-choices button { padding: 12px 4px; color: var(--paper); cursor: pointer; border: 1px solid var(--cyan); border-radius: 9px; background: #261535; }.promotion-choices button:hover { background: #4a2a55; box-shadow: 0 0 13px rgba(61, 233, 255, .55); }.promotion-choices span { display: block; font-family: "Times New Roman", serif; font-size: 2.7rem; }.promotion-choices small { font-weight: 800; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 13px 16px; color: #fff2f1; font-weight: 800; border: 1px solid var(--red); border-radius: 9px; background: #481f35; box-shadow: 0 10px 25px rgba(0, 0, 0, .35); }

@media (max-width: 900px) { .game-shell { grid-template-columns: 1fr; max-width: 760px; }.side-panel { width: 100%; align-self: stretch; }.history-card { min-height: auto; }.move-list { max-height: 150px; } }
@media (max-width: 480px) { .game-shell { padding: 10px; gap: 16px; }.title-plaque { padding: 8px 13px 10px; margin-bottom: 9px; }.title-plaque p { font-size: .63rem; }.turn-banner { min-height: 40px; margin-bottom: 10px; padding: 9px 12px; font-size: .88rem; }.how-to-play { margin-bottom: 10px; font-size: .85rem; }.how-to-play summary { padding: 9px 12px; }.board-frame { padding: 7px; border-width: 2px; }.side-panel { padding: 12px; }.niglo-card { grid-template-columns: 72px 1fr; }.niglo-portrait { width: 68px; font-size: 3.3rem; }.piece { font-size: 12vw; }.board-help { font-size: .8rem; } }