/* Habillage ordinateur uniquement — le CSS mobile reste dans style.css. */
:root {
  --camp-ink: #0d0712;
  --camp-plum: #25122f;
  --camp-purple: #54265c;
  --camp-gold: #e6a13a;
  --camp-gold-light: #ffe39b;
  --camp-cyan: #38e6ef;
}

body {
  min-width: 1101px;
  background:
    radial-gradient(ellipse at 50% -13%, rgba(141, 71, 139, .72), transparent 47rem),
    radial-gradient(circle at 15% 54%, rgba(237, 140, 36, .18), transparent 21rem),
    radial-gradient(circle at 86% 52%, rgba(41, 160, 180, .16), transparent 23rem),
    linear-gradient(145deg, #0d0712 0%, #291334 47%, #100817 100%);
}

body::before,
body::after,
.game-shell::before,
.game-shell::after { display: none; }

.desktop-decor {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.decor-piece {
  position: absolute;
  display: block;
  background-image: url("assets/pc/decorations.png");
  background-repeat: no-repeat;
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .7));
}

.decor-lantern-left {
  top: 88px;
  left: -18px;
  width: 212px;
  height: 540px;
  background-size: 1448px 1086px;
  background-position: 0 0;
  opacity: .94;
}

.decor-lantern-right {
  right: -52px;
  bottom: 72px;
  width: 260px;
  height: 490px;
  background-size: 1250px auto;
  background-position: 0 0;
  transform: rotate(7deg);
  opacity: .88;
}

.decor-caravan {
  right: -52px;
  bottom: -42px;
  width: 520px;
  height: 410px;
  background-size: 1448px 1086px;
  background-position: -950px -540px;
  clip-path: inset(0 0 0 44px);
  opacity: .76;
}

.decor-garland {
  top: -20px;
  right: 4vw;
  width: 520px;
  height: 210px;
  background-size: 1448px 1086px;
  background-position: -925px 0;
  opacity: .88;
}

.decor-stars {
  position: absolute;
  top: 12vh;
  left: 22vw;
  color: #80fbff;
  font-size: 2.2rem;
  letter-spacing: 1.5rem;
  opacity: .78;
  text-shadow: 0 0 13px #31e8f4;
}

/* Les fragments de la planche décorative ne doivent jamais dépasser du cadre. */
.decor-stars,
.decor-garland,
.decor-lantern-right,
.decor-lantern-left,
.decor-caravan { display: none; }

.game-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 28px;
  width: min(1420px, calc(100vw - 44px));
  min-height: 100vh;
  padding: 20px 0 32px;
}

.game-area { align-items: stretch; }

.title-plaque {
  position: relative;
  width: min(820px, 94%);
  min-height: 76px;
  margin: 0 auto 12px;
  padding: 11px 36px 12px;
  overflow: hidden;
  border: 3px solid #cf8b2d;
  border-radius: 13px 13px 32px 32px;
  background:
    radial-gradient(circle at 15% 50%, rgba(45, 224, 240, .19), transparent 23%),
    radial-gradient(circle at 85% 50%, rgba(250, 178, 63, .26), transparent 21%),
    linear-gradient(90deg, #160c20, #572950 26%, #2a1536 50%, #572950 74%, #160c20);
  box-shadow: 0 0 0 5px #110815, 0 8px 22px rgba(0, 0, 0, .62), inset 0 0 26px rgba(255, 208, 107, .2);
}

.title-plaque::before,
.title-plaque::after {
  position: absolute;
  top: 16px;
  color: #f7c457;
  font-size: 1.5rem;
  text-shadow: 0 0 8px #ffc84e;
  content: "✦";
}

.title-plaque::before { left: 23px; }
.title-plaque::after { right: 23px; }
.title-plaque p { display: none; }
.title-plaque h1 {
  color: var(--camp-gold-light);
  font-size: clamp(2.25rem, 4vw, 3.55rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #653219, 0 0 17px rgba(255, 190, 66, .56);
}

.how-to-play,
.board-help { display: none; }

.board-frame {
  width: min(100%, calc(100vh - 132px));
  margin-inline: auto;
  padding: 14px 17px 18px;
  border: 5px solid #6f3d1e;
  border-radius: 11px 11px 28px 28px;
  background:
    repeating-linear-gradient(90deg, #201012 0 7px, #a36b2d 7px 12px, #4a251b 12px 18px),
    #452018;
  box-shadow: 0 0 0 4px #d59330, 0 0 0 9px #140a16, 0 24px 50px rgba(0, 0, 0, .72), inset 0 0 24px #0a050a;
}

.chessboard {
  border: 3px solid #bf7b29;
  box-shadow: inset 0 0 26px #110817;
}

.square { border-color: rgba(239, 180, 79, .64); }
.square.light {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 222, 170, .25), transparent 42%),
    linear-gradient(135deg, #8c6268, #604151);
}
.square.dark {
  background:
    radial-gradient(circle at 30% 25%, rgba(182, 130, 158, .14), transparent 43%),
    linear-gradient(135deg, #3f2945, #21152c);
}

.square:hover:not(:disabled) { filter: brightness(1.22) saturate(1.12); }
.square.selected { box-shadow: inset 0 0 0 4px var(--camp-cyan), inset 0 0 25px rgba(56, 230, 239, .68); }
.square.last-move { box-shadow: inset 0 0 0 3px rgba(255, 193, 70, .72); }
.square.legal::after { background: rgba(173, 244, 62, .92); box-shadow: 0 0 13px #b9f23c; }

.piece {
  font-size: clamp(3rem, 6.6vw, 5.7rem);
  line-height: .82;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .7));
}

.piece.white {
  color: #ffe9ae;
  text-shadow: 0 2px 0 #704020, 0 0 9px #fff4cb, 1px 0 #1c1024, -1px 0 #1c1024;
}

.piece.black {
  color: #2e1839;
  text-shadow: 0 2px 0 #ba6c2d, 0 0 9px #c985dd, 1px 0 #0c0610, -1px 0 #0c0610;
}

.rank,
.file { color: #ffe3a0; font-size: .8rem; text-shadow: 0 1px 2px #170b1c; }

.side-panel {
  align-self: start;
  gap: 9px;
  padding: 10px;
  border: 4px solid #7a461f;
  border-radius: 12px 12px 25px 25px;
  background:
    linear-gradient(150deg, rgba(65, 31, 67, .98), rgba(17, 9, 23, .99) 49%, rgba(38, 19, 49, .98));
  box-shadow: 0 0 0 5px #100814, 0 0 0 8px rgba(202, 132, 38, .78), 0 18px 45px rgba(0, 0, 0, .66), inset 0 0 48px rgba(154, 53, 184, .19);
}

.niglo-card {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #9b5b26;
  border-radius: 7px;
  background: #1c0c23;
}

.niglo-card .lantern { display: none; }

.niglo-portrait {
  position: relative;
  display: grid;
  width: 100%;
  height: 218px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 38%, rgba(173, 100, 158, .98), rgba(45, 16, 57, .98) 68%),
    #250d31;
  box-shadow: inset 0 -26px 30px rgba(9, 3, 13, .56);
}

.niglo-portrait::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: url("assets/pc/niglo-portrait-transparent.png") center bottom / contain no-repeat;
  mix-blend-mode: multiply;
  filter: brightness(3.35) saturate(1.55) contrast(.88);
}

.niglo-portrait img {
  display: none !important;
  width: 100%;
  height: 100%;
  padding: 7px 11px 0;
  object-fit: contain;
  transform: none !important;
}

.niglo-card > div:last-child {
  display: block !important;
  padding: 9px 13px 12px;
  border-top: 1px solid rgba(229, 161, 54, .54);
  background: rgba(13, 7, 19, .87);
}

.niglo-card > div:last-child .eyebrow { display: none; }
.niglo-card h2 { color: var(--camp-gold-light); font-size: 1.14rem; }
.niglo-mood { margin: 3px 0 0; color: #f2dfeb; font-size: .85rem; }

.turn-banner {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 9px;
  color: #54f2f5;
  font-family: "Cinzel", Georgia, serif;
  font-size: .97rem;
  border: 2px solid #825026;
  border-radius: 7px;
  background: #09121a;
  box-shadow: inset 0 0 15px rgba(42, 227, 239, .22), 0 0 12px rgba(42, 227, 239, .18);
}

.control-card,
.history-card {
  padding: 10px;
  border: 2px solid #76431f;
  border-radius: 7px;
  background: linear-gradient(145deg, #1d1025, #0d0912);
}

.control-card h2 { display: none; }
.difficulty-options { gap: 6px; margin-top: 0; }
.difficulty {
  min-height: 44px;
  padding: 8px 15px;
  font-family: "Cinzel", Georgia, serif;
  color: #fff0c5;
  border: 2px solid #77421e;
  border-radius: 6px;
  background: linear-gradient(90deg, #31162f, #101018);
}
.difficulty:hover,
.difficulty.active {
  border-color: var(--camp-cyan);
  background: linear-gradient(90deg, #4c1e49, #142e3b);
  box-shadow: 0 0 12px rgba(56, 230, 239, .7), inset 0 0 13px rgba(56, 230, 239, .18);
}

.sound-toggle {
  min-height: 40px;
  color: #fff3cc;
  font-family: "Cinzel", Georgia, serif;
  font-size: .88rem;
  border: 2px solid #76431f;
  border-radius: 6px;
  background: #100a16;
}
.sound-toggle.on { color: #d9ff8b; border-color: #b9f23c; box-shadow: inset 0 0 14px rgba(185, 242, 60, .16); }

.new-game {
  min-height: 58px;
  color: #25100d;
  font-size: 1.13rem;
  border: 3px solid #ffc553;
  border-radius: 7px;
  background: linear-gradient(#ffe06f, #e18217 58%, #bb5310);
  box-shadow: inset 0 0 0 2px #71300e, 0 4px 0 #40200c, 0 0 18px rgba(246, 159, 35, .38);
}

.history-card { min-height: 214px; }
.history-card h2 { color: var(--camp-gold-light); font-size: 1.25rem; }
.move-list { max-height: 210px; }
.move-list li { border-bottom-color: rgba(255, 230, 174, .13); }

@media (min-width: 1600px) {
  .game-shell {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
    width: min(1580px, calc(100vw - 210px));
  }
  .decor-lantern-left { left: max(-18px, calc(50% - 1060px)); }
  .decor-lantern-right { right: max(-52px, calc(50% - 1090px)); }
  .decor-caravan { right: max(-52px, calc(50% - 1120px)); }
  .decor-garland { right: max(4vw, calc(50% - 1030px)); }
}

@media (min-width: 2400px) {
  .game-shell {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 36px;
    width: min(1700px, calc(100vw - 360px));
  }
  .decor-lantern-left { left: max(8px, calc(50% - 1090px)); }
  .decor-lantern-right { right: max(8px, calc(50% - 1110px)); }
  .decor-caravan { right: max(8px, calc(50% - 1140px)); }
  .decor-garland { right: max(16px, calc(50% - 1040px)); }
}