/*
 * play.v1.css — espace jeu (prompt 4). Complète arqualea.v2.css, account.v1.css (cartes, cases) et reveal.v1/v2.css
 * (barre des points, chrono, liste d'indices, trous trompeurs .gh/.gw-*).
 */
/* L'attribut hidden doit toujours masquer, même un bloc en display: grid ou flex */
.pg-board [hidden] { display: none !important; }
.pg-back { margin: 24px 0 0; font-size: 14px; }
.pg-back a { color: var(--c-steel); text-decoration: none; }
.pg-back a:hover { color: var(--c-gold); }
.pg-head { padding-top: 24px; }
.pill-on { border-color: var(--c-gold); color: var(--c-gold); }

/* Catalogue */
.pg-grid { list-style: none; margin: 8px 0 56px; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.pg-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: var(--rule); border-radius: var(--radius-m); background: linear-gradient(180deg, rgba(27,46,107,.32), rgba(13,26,63,.55)); }
.pg-card h2 { font-size: 20px; margin: 4px 0 0; }
.pg-card p { margin: 0; color: var(--c-silver); font-size: 15px; }
.pg-card .btn { align-self: flex-start; margin-top: auto; }
.pg-card.is-soon { opacity: .72; }
.pg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-best { color: var(--c-gold) !important; font: 400 13px/1.4 var(--f-num) !important; min-height: 1.4em; }

/* Plateau commun */
.pg-board { max-width: 46rem; margin: 0 0 40px; padding: clamp(18px, 4vw, 30px); border: var(--rule); border-radius: var(--radius-m); background: rgba(13,26,63,.55); box-shadow: var(--shadow-panel); }
.pg-intro { display: grid; justify-items: start; gap: 14px; }
.pg-intro .note { margin: 0; color: var(--c-steel); font-size: 14px; }
.pg-rules { margin: 0; color: var(--c-silver); }
.pg-levels { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.pg-levels legend { font: 500 12px/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c-silver); margin-bottom: 8px; }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]::before { clip-path: circle(50%); width: 10px; height: 10px; }
.pg-board .mask-row { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 14px; }
.mask-row .k { font: 500 11px/1.3 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-steel); }
.mask { font: 400 22px/1 var(--f-house); color: var(--c-ivory); letter-spacing: .08em; }

/* Réponse */
.pg-answer { margin-top: 18px; display: grid; gap: 8px; }
.pg-answer label { font: 500 12px/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c-silver); }
.pg-answer-row { display: flex; gap: 8px; align-items: stretch; }
.pg-answer-row input { flex: 1; min-width: 0; width: 100%;min-height: 46px; padding: 8px 12px; font: 400 20px/1 var(--f-num); letter-spacing: .12em; color: var(--c-gold);
  background: rgba(7,12,36,.8); border: 1px solid rgba(159,178,216,.35); border-radius: var(--radius-s); }
.pg-answer-row input:focus { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.pg-table summary { cursor: pointer; color: var(--c-gold); font-size: 14px; padding: 6px 0; }
.pg-feedback { margin: 0; min-height: 1.4em; color: var(--c-ko); font-size: 14px; }
.pg-giveup { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--c-steel); text-decoration: underline; cursor: pointer; font-size: 13px; }
.pg-giveup:hover { color: var(--c-ko); }

/* Clavier en table d'images */
.ktable { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 22rem; margin-top: 8px; }
.kt-key { position: relative; aspect-ratio: 1; min-height: 40px; border: 1px solid rgba(159,178,216,.35); border-radius: var(--radius-s); background: rgba(7,12,36,.8);
  color: var(--c-ivory); cursor: pointer; font: 500 16px/1 var(--f-display); }
.kt-key:hover { border-color: var(--c-gold); }
.kt-key:active { background: var(--c-gold-faint); }
.kt-key:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.kt-d { position: absolute; right: 4px; bottom: 3px; font: 400 10px/1 var(--f-num); color: var(--c-gold); }

/* Fin de partie */
.pg-end { margin-top: 20px; padding-top: 18px; border-top: var(--rule-faint); display: grid; gap: 10px; justify-items: start; }
.pg-result { margin: 0; font: 500 18px/1.4 var(--f-display); color: var(--c-gold); }
.pg-end a { color: var(--c-gold); }
.pg-share { margin: 0; padding: 12px 14px; white-space: pre-wrap; font: 400 13px/1.5 var(--f-num); color: var(--c-silver); background: rgba(7,12,36,.7); border: var(--rule-steel); border-radius: var(--radius-s); max-width: 100%; }
.pg-share:empty { display: none; }

/* Goloth */
.pg-board#goloth { max-width: none; }
.gl-layout { display: grid; gap: 22px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .gl-layout { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); } }
.gl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gl-cell { aspect-ratio: 1; min-height: 40px; border-radius: var(--radius-s); border: 1px solid transparent; cursor: pointer; font: 400 18px/1 var(--f-num); color: var(--c-space); transition: transform .12s, filter .2s; }
.gl-cell:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.15); }
.gl-cell:focus-visible { outline: 2px solid var(--c-ivory); outline-offset: 2px; }
.gl-cell:disabled { cursor: default; }
.gl-g { background: #5E9C7A; } .gl-b { background: #5B7EC2; } .gl-y { background: #D4B47A; }
.gl-cell[class*="is-"] { background: rgba(7,12,36,.85); color: var(--c-ivory); }
.gl-cell.gl-g[class*="is-"] { border-color: #5E9C7A; } .gl-cell.gl-b[class*="is-"] { border-color: #5B7EC2; } .gl-cell.gl-y[class*="is-"] { border-color: #D4B47A; }
.gl-cell.is-crystal { color: var(--c-shield); } .gl-cell.is-bomb { color: var(--c-ko); border-color: var(--c-ko) !important; }
.gl-cell.is-hidden { opacity: .35; }
.gl-h { font-size: 13px; letter-spacing: .18em; color: var(--c-gold); margin: 18px 0 0; }
.gl-clue { border-left: 3px solid transparent; padding-left: 8px !important; }
.gl-clue.gl-g { background: none; border-left-color: #5E9C7A; } .gl-clue.gl-b { background: none; border-left-color: #5B7EC2; } .gl-clue.gl-y { background: none; border-left-color: #D4B47A; }
.gl-msg { min-height: 1.4em; margin: 8px 0 0; color: var(--c-shield); font-size: 14px; }
.pg-boards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-bottom: 56px; }
.pg-rank { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.pg-rank li { display: flex; justify-content: space-between; gap: 12px; color: var(--c-silver); }
.pg-rank li span:last-child { font: 400 13px/1.5 var(--f-num); color: var(--c-steel); }
.pg-rank li.is-me span:first-child { color: var(--c-gold); }

/* Saison 1 */
.s1-part h2 { font-size: 15px; letter-spacing: .18em; color: var(--c-gold); margin: 28px 0 12px; }
.s1-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.s1-list a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: var(--rule-steel); border-radius: var(--radius-m); background: rgba(13,26,63,.5); text-decoration: none; color: var(--c-ivory); }
.s1-list a:hover { border-color: var(--c-gold); }
.s1-title { font: 500 16px/1.3 var(--f-display); }
.s1-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 12px/1.4 var(--f-num); color: var(--c-steel); }
.s1-riddle { display: grid; gap: 24px; margin-bottom: 56px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .s1-riddle { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.s1-video { width: 100%; max-height: 70vh; background: #000; border: var(--rule-steel); border-radius: var(--radius-m); }
.s1-text { margin-top: 18px; }
.s1-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.s1-side .acc-card { max-width: none; }
.s1-clues { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 6px; color: var(--c-ivory); }
.s1-code { font: 400 22px/1.3 var(--f-num); color: var(--c-gold); margin: 0 0 10px; }