/*
 * gallery.css — Styles spécifiques à /gallery/
 * Prérequis : pxchess.css
 * Typographie : Cormorant Garamond (chargée dans le HTML)
 */

/* ── Tokens galerie ───────────────────────────────────────────── */
:root {
  --bg2:       #0b0b10;
  --text2:     #a09c92;
  --text3:     #50504a;
  --gold:      #C8A96E;
  --gold-dim:  #7a6640;
  --gold-pale: #e8d8b0;
  --font-s:    'Cormorant Garamond', Georgia, serif;
  --font-m:    'IBM Plex Mono', monospace;
}

/* ── Site header (gallery-specific sticky header) ─────────────── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  animation: fadeIn .6s ease-out;
}
.site-header::after {
  content:''; position:absolute; bottom:0; left:48px; right:48px;
  height:1px; background:var(--border2);
}
.header-title {
  font-family: var(--font-m);
  font-size: 13px; font-weight: 400; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text2);
}
.header-right { display:flex; align-items:center; gap:28px; }
.header-nav-link {
  font-family: var(--font-m);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text2); text-decoration: none; transition: color .2s;
}
.header-nav-link:hover { color: var(--gold); }
.header-play {
  font-family: var(--font-m);
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bg);
  background: var(--gold); padding: 7px 18px; border-radius: 2px;
  text-decoration: none; transition: background .2s;
}
.header-play:hover { background: var(--gold-pale); }

/* ── Intro ────────────────────────────────────────────────────── */
.intro {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 0 48px 80px;
  position: relative; border-bottom: 1px solid var(--border2);
}
.intro::before {
  content:''; position:absolute; top:30%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:400px;
  background:radial-gradient(ellipse,rgba(200,169,110,.04) 0%,transparent 70%);
  pointer-events:none;
}
.intro-eyebrow {
  font-family: var(--font-m);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text2); margin-bottom: 24px;
  animation: riseIn .8s .2s ease-out both;
}
.intro-title {
  font-size: clamp(64px,9vw,130px); font-weight: 300;
  font-family: var(--font-s); line-height: .95; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 40px;
  animation: riseIn .8s .35s ease-out both;
}
.intro-title em { font-style:italic; color:var(--gold); }
.intro-rule {
  width:60px; height:1px; background:var(--gold); margin-bottom:28px;
  animation: lineIn .8s .55s ease-out both; transform-origin:left;
}
.intro-desc {
  font-family: var(--font-s);
  font-size: 20px; font-weight: 300; color: var(--text);
  max-width: 480px; line-height: 1.8; letter-spacing:.01em;
  animation: riseIn .8s .65s ease-out both; margin-bottom: 56px;
}
.intro-scroll {
  display:flex; align-items:center; gap:16px; text-decoration:none;
  animation: riseIn .8s .8s ease-out both;
}
.intro-scroll-line {
  width:48px; height:1px; background:var(--text2); transition:width .3s;
}
.intro-scroll:hover .intro-scroll-line { width:72px; background:var(--gold); }
.intro-scroll-text {
  font-family: var(--font-m);
  font-size: 11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--text2); transition:color .2s;
}
.intro-scroll:hover .intro-scroll-text { color:var(--gold); }
.intro-counter {
  position:absolute; top:120px; right:48px;
  font-family: var(--font-m);
  font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--text2); animation:fadeIn 1s .5s ease-out both;
  line-height:2.2; text-align:right;
}
.intro-counter span {
  display:block; color:var(--gold); font-size:22px;
  font-family: var(--font-s); font-weight:300;
}

/* ── Game sections ────────────────────────────────────────────── */
.games-list { padding:0; }
.game-section {
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--border2); position:relative; overflow:hidden;
}
.game-section:nth-child(even) .game-text  { order:2; }
.game-section:nth-child(even) .game-visual { order:1; border-right:1px solid var(--border2); border-left:none; }
@media(max-width:780px){
  .game-section { grid-template-columns:1fr; min-height:auto; }
  .game-section:nth-child(even) .game-text  { order:1; }
  .game-section:nth-child(even) .game-visual { order:2; border-right:none; border-left:none; }
}

.game-text {
  display:flex; flex-direction:column; justify-content:center;
  padding: 80px 64px 80px 25%;
  border-left:1px solid var(--border2);
}
@media(max-width:780px){ .game-text { padding:48px 32px; border-left:none; } }

.game-num {
  font-family: var(--font-m);
  font-size: 11px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--text2); margin-bottom:20px;
}
.game-title {
  font-family: var(--font-s);
  font-size: clamp(36px,4vw,60px); font-weight:300;
  line-height:1.05; letter-spacing:-.01em; color:var(--text); margin-bottom:8px;
}
.game-players {
  font-family: var(--font-s);
  font-size: 17px; font-weight:300; font-style:italic;
  color:var(--gold); margin-bottom:4px; letter-spacing:.02em;
}
.game-event {
  font-family: var(--font-m);
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text2); margin-bottom:36px;
}
.game-rule { width:40px; height:1px; background:var(--border2); margin-bottom:28px; }
.game-desc {
  font-family: var(--font-s);
  font-size: 16px; font-weight:300; color:var(--text);
  line-height:1.9; max-width:380px; margin-bottom:40px;
}
.game-desc strong { color:var(--gold); font-weight:400; font-style:italic; }
.btn-watch {
  align-self:flex-start; font-family: var(--font-m);
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-dim);
  background:transparent; padding:12px 28px; cursor:pointer;
  transition:background .18s,color .18s; border-radius:1px;
}
.btn-watch:hover { background:var(--gold); color:var(--bg); }

/* ── Game visual ─────────────────────────────────────────────── */
.game-visual {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:64px 48px;
  background:var(--bg2); border-left:1px solid var(--border2); position:relative;
}
@media(max-width:780px){ .game-visual { padding:40px 24px; border-left:none; border-top:1px solid var(--border2); } }
.game-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(200,169,110,.035) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Artwork frame ───────────────────────────────────────────── */
.artwork-frame {
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg); border:1px solid var(--border2);
  padding:28px 28px 22px;
  box-shadow:0 0 0 1px var(--border),0 24px 80px rgba(0,0,0,.85),inset 0 1px 0 rgba(200,169,110,.06);
  z-index:1; position:relative;
}
.artwork-title-line {
  font-family: var(--font-s);
  font-size:13px; font-weight:300; font-style:italic;
  color:var(--gold); letter-spacing:.10em; margin-bottom:16px; text-align:center; white-space:nowrap;
}
.artwork-rule {
  width:100%; height:1px; margin-bottom:16px;
  background:linear-gradient(to right,transparent,var(--border2) 30%,var(--border2) 70%,transparent);
}
.card-board {
  display:grid; grid-template-columns:repeat(8,40px); grid-template-rows:repeat(8,40px);
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.card-cell { width:40px; height:40px; }
@media(max-width:480px){
  .card-board { grid-template-columns:repeat(8,28px); grid-template-rows:repeat(8,28px); }
  .card-cell  { width:28px; height:28px; }
}
.artwork-meta {
  margin-top:16px; font-family: var(--font-m);
  font-size:10px; letter-spacing:.20em; text-transform:uppercase;
  color: var(--text2); text-align:center;
}
.artwork-meta em { font-style:normal; color:var(--gold-dim); }

/* ── Modal ───────────────────────────────────────────────────── */
#modal {
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,10,.97); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation: fadeIn .25s ease-out;
}
#modal.hidden { display:none; }
@keyframes boxIn {
  from{opacity:0;transform:translateY(20px) scale(.98);}
  to  {opacity:1;transform:translateY(0) scale(1);}
}
.modal-box {
  background:var(--bg2); border:1px solid var(--border2);
  width:min(96vw,580px); display:flex; flex-direction:column;
  animation:boxIn .28s ease-out; overflow:hidden;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--border2);
}
.modal-header-title {
  font-family: var(--font-s);
  font-size:11px; font-weight:300; font-style:italic;
  color:var(--text2); letter-spacing:.06em;
}
.modal-close {
  font-family: var(--font-m); font-size:14px;
  color:var(--text2); background:none; border:none;
  cursor:pointer; line-height:1; padding:2px 6px; transition:color .15s;
}
.modal-close:hover { color:var(--text); }
.modal-board-area {
  display:flex; align-items:center; justify-content:center;
  padding:32px; background:var(--bg); border-bottom:1px solid var(--border2); position:relative;
}
.modal-board-area::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(200,169,110,.04) 0%,transparent 70%);
  pointer-events:none;
}
#modalBoard {
  display:grid;
  grid-template-columns:repeat(8,var(--mc,52px));
  grid-template-rows:repeat(8,var(--mc,52px));
  image-rendering:pixelated; image-rendering:crisp-edges;
  outline:1px solid var(--border2);
  box-shadow:0 0 0 1px var(--border),0 20px 60px rgba(0,0,0,.5); z-index:1;
}
.modal-cell { width:var(--mc,52px); height:var(--mc,52px); }

@keyframes lmGlow {
  0%  {box-shadow:inset 0 0 0 3px #fff,inset 0 0 14px rgba(255,255,255,.5);}
  40% {box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 12px rgba(200,169,110,.6);}
  100%{box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 6px rgba(200,169,110,.3);}
}
.lm-glow { animation:lmGlow .55s ease-out forwards; }

.modal-info { padding:20px 24px; border-bottom:1px solid var(--border2); }
.modal-info-title {
  font-family: var(--font-s);
  font-size:20px; font-weight:300; color:var(--text); margin-bottom:4px;
}
.modal-info-players {
  font-family: var(--font-s);
  font-size:13px; font-weight:300; font-style:italic;
  color:var(--gold); margin-bottom:12px;
}
.modal-brilliant-box {
  padding:12px 14px; background:var(--bg); border:1px solid var(--border2);
  font-family: var(--font-s);
  font-size:14px; font-weight:300; color:var(--text); line-height:1.7;
}
.modal-brilliant-box strong { color:var(--gold); font-weight:400; font-style:italic; }

/* ── Modal controls ──────────────────────────────────────────── */
.modal-controls {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 24px; flex-wrap:wrap;
}
.modal-status {
  font-family: var(--font-m);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text2); flex:1; min-width:100px; transition:color .2s;
}
.modal-status.paused { color:var(--gold); }

/* Trio controls */
.trio-controls { display:flex; align-items:center; gap:8px; }
.trio-btn {
  font-family: var(--font-s); font-size:24px; font-weight:300;
  color:var(--text2); background:transparent;
  border:1px solid var(--border2); border-radius:3px;
  width:40px; height:40px; cursor:pointer; line-height:1;
  transition:color .12s,border-color .12s;
  display:flex; align-items:center; justify-content:center;
}
.trio-btn:hover:not(:disabled) { color:var(--gold); border-color:var(--gold-dim); }
.trio-btn:disabled { opacity:.25; cursor:not-allowed; }
.trio-center {
  font-family: var(--font-m); font-size:11px; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--bg); background:var(--gold); border:none; border-radius:3px;
  min-width:84px; height:40px; cursor:pointer; line-height:1;
  transition:background .14s; display:flex; align-items:center; justify-content:center; gap:6px;
}
.trio-center:hover { background:var(--gold-pale); }
.trio-center.reveal-mode {
  background:transparent; color:var(--gold); border:1px solid var(--gold-dim);
}
.trio-center.reveal-mode:hover { background:var(--gold); color:var(--bg); }
.trio-center.rewind-mode {
  background:transparent; color:var(--text2); border:1px solid var(--border2); font-size:16px;
}
.trio-center.rewind-mode:hover { color:var(--text); border-color:var(--text2); }

/* ── Signature footer ────────────────────────────────────────── */
.site-footer {
  padding:40px 48px; display:flex; align-items:center;
  justify-content:space-between; border-top:1px solid var(--border2);
}
.footer-sig { display:flex; align-items:center; gap:14px; }
.footer-sig-text {
  font-family: var(--font-m);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--text2);
}
.footer-right {
  font-family: var(--font-m);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text2);
}
.footer-right a { color:var(--text2); text-decoration:none; transition:color .15s; }
.footer-right a:hover { color:var(--gold); }

/* ── Animations galerie ──────────────────────────────────────── */
@keyframes riseIn { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes lineIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* ── Scroll reveal (gallery version) ─────────────────────────── */
.sr { opacity:0; transform:translateY(20px); transition:opacity .7s ease-out,transform .7s ease-out; }
.sr.visible { opacity:1; transform:translateY(0); }

/* ── Readability overrides ───────────────────────────────────── */
.header-title,.header-nav-link,.intro-eyebrow,.intro-scroll-text,
.intro-counter,.game-num,.game-event,.artwork-meta,
.modal-status,.footer-sig-text,.footer-right { color:var(--text2); }

.intro-desc,.game-desc,.modal-brilliant-box { color:var(--text); font-weight:400; }