@import url("https://fonts.googleapis.com/css2?family=Grenze:wght@500;700&family=Alegreya+Sans:wght@400;500;700&family=Alegreya+Sans+SC:wght@500;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #0F201D;
  --panel: #162E29;
  --panel-2: #1C3A33;
  --line: #2C5147;
  --text: #ECE7D6;
  --muted: #A9B6A8;
  --gold: #E4B34E;
  --gold-soft: rgba(228, 179, 78, .16);
  --good: #7FD68B;
  --bad: #FF7A6E;
  --twitch: #9146FF;
  --display: "Grenze", "Palatino Linotype", Georgia, serif;
  --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --caps: "Alegreya Sans SC", "Alegreya Sans", system-ui, sans-serif;
}
* { box-sizing: border-box }
html, body { background: var(--bg); margin: 0 }
body { color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.5; padding-inline: 16px; padding-block: 16px 40px }
a { color: var(--gold) }
[hidden] { display: none !important }
.wrap { max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px }

/* en-tête */
#site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 64px }
.brand { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.5vw, 40px); line-height: 1; color: var(--text); text-decoration: none }
.brand small { display: block; font-family: var(--caps); font-size: 14px; letter-spacing: .12em; color: var(--gold); font-weight: 500; margin-bottom: 4px }
.nav { display: flex; flex-wrap: wrap; gap: 4px }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-weight: 500 }
.nav a:hover { color: var(--text); background: var(--panel) }
.nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line) }
.who { display: flex; align-items: center; gap: 10px }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); object-fit: cover; display: inline-block }
.avatar.ph { background: var(--panel-2) }
.who-name { font-weight: 700 }
.elo { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--gold); padding: 0 10px; border-radius: 999px; background: var(--gold-soft); font-variant-numeric: tabular-nums }

/* boutons */
.btn { all: unset; cursor: pointer; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 500; color: var(--text); text-align: center; text-decoration: none; display: inline-block }
.btn:hover { border-color: var(--gold) }
.btn.primary { background: var(--gold); color: #1B1606; border-color: var(--gold); font-weight: 700 }
.btn.small { padding: 5px 10px; font-size: 14px }
.btn.twitch { background: var(--twitch); border-color: var(--twitch); color: #fff; font-weight: 700 }
.btn[disabled] { opacity: .45; pointer-events: none }
.btn:focus-visible, .seg button:focus-visible, .step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.btn.icon { padding: 7px 11px; font-size: 14px; line-height: 1 }

/* mise en page jeu */
main.game { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start }
@media (max-width: 860px) { main.game { grid-template-columns: 1fr } }
.board { background: radial-gradient(120% 90% at 50% 40%, #1A3A32 0%, var(--bg) 75%); border: 1px solid var(--line); border-radius: 14px; padding: 8px; position: relative }
.board svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none }
.hintbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 4px 8px 6px; color: var(--muted); font-size: 14px }
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer }
.toggle input { accent-color: var(--gold) }
.side { display: flex; flex-direction: column; gap: 14px }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px }
.label { font-family: var(--caps); font-size: 13px; letter-spacing: .12em; color: var(--gold); margin: 0 }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px }
.seg button { all: unset; text-align: center; padding: 7px 4px; border-radius: 7px; cursor: pointer; font-weight: 500; color: var(--muted) }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold) }
.consigne { font-size: 17px; margin: 0 }
.consigne strong { color: var(--gold) }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.legend li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px }
.chip { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #10201C; font-size: 14px }
.legend b { display: block; font-weight: 700 }
.legend span { color: var(--muted) }
.actions { display: flex; flex-wrap: wrap; gap: 8px }
.result { border-radius: 10px; padding: 10px 12px; font-weight: 500; margin: 0 }
.result.good { background: rgba(127, 214, 139, .12); color: var(--good); border: 1px solid rgba(127, 214, 139, .4) }
.result.bad { background: rgba(255, 122, 110, .1); color: var(--bad); border: 1px solid rgba(255, 122, 110, .4) }
.result.info { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(228, 179, 78, .35) }
.notice { margin: 0; color: var(--muted); font-size: 15px }
.foot { color: var(--muted); font-size: 13px; margin: 0 }
.rules { columns: 2 320px; column-gap: 28px; color: var(--muted); font-size: 15px; margin: 0; padding-left: 18px }
.rules li { margin-bottom: 6px; break-inside: avoid }
.rules b { color: var(--text) }

/* elo et chrono */
.rated-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap }
.big-elo { font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums }
.delta { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums }
.delta.up { color: var(--good) } .delta.down { color: var(--bad) }
.kv { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 15px }
.kv b { color: var(--text); font-variant-numeric: tabular-nums }
.timer { display: flex; flex-direction: column; gap: 4px }
.timer-top { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-weight: 700 }
.bar { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden }
.bar > i { display: block; height: 100%; background: var(--gold); width: 100%; transform-origin: left center }
.timer.hurry .bar > i { background: var(--bad) }
.timer.hurry .timer-top { color: var(--bad) }

/* timeline */
.tl { gap: 14px }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px }
.tl-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.tl-count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500 }
.tl-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin }
.step { all: unset; flex: 0 0 auto; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 74px; padding: 7px 10px 8px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--c, var(--line)); font-size: 13px; line-height: 1.25; position: relative }
.step .k { font-family: var(--caps); font-size: 11px; letter-spacing: .08em; color: var(--muted) }
.step .v { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums }
.step .dots { display: flex; gap: 3px }
.step .dots i { width: 9px; height: 9px; border-radius: 50%; display: block }
.step[data-depth="1"] { margin-top: 10px } .step[data-depth="2"] { margin-top: 20px } .step[data-depth="3"] { margin-top: 30px } .step[data-depth="4"] { margin-top: 40px }
.step.cur { background: var(--panel-2); box-shadow: 0 0 0 2px var(--gold) }
.step.past { opacity: .72 }
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px }
@media (max-width: 760px) { .tl-body { grid-template-columns: 1fr } }
.tl-now, .tl-pile { display: flex; flex-direction: column; gap: 8px }
.tl-text { margin: 0; font-size: 16px; max-width: 60ch }
.tag { font-weight: 700 }
.end { color: var(--gold); font-weight: 700 }
.layer { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg) }
.layer + .layer { opacity: .85 }
.layer-h { font-family: var(--caps); font-size: 12px; letter-spacing: .08em; color: var(--muted) }
.item { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 5px 8px; border-radius: 7px; background: var(--panel) }
.item .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: 0 0 auto }
.item .gl { margin-left: auto; font-size: 18px; color: var(--gold) }
.item.next { box-shadow: inset 0 0 0 1px var(--gold) }
.item.now { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold) }
.empty { color: var(--muted); font-size: 15px; margin: 0 }

/* plateau svg */
.cell-hit { fill: transparent; cursor: pointer }
.done .cell-hit { cursor: default }
.coord { font-family: var(--caps); font-size: 12px; fill: var(--muted); letter-spacing: .05em }
.ord-big { font-family: var(--display); font-weight: 700; font-size: 19px }
.trap { transition: opacity .25s }
.trap.used { opacity: .22 }
.tok { transition: transform .17s ease-in-out }
.bob { animation: bob 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100% }
.bob2 { animation-duration: 1.3s }
.bob.hit { animation: hit .38s ease-out }
.glow { animation: glow 2.4s ease-in-out infinite }
.pulse { animation: pulse 1.2s ease-in-out infinite }
@keyframes bob { 50% { transform: translateY(-2px) scaleY(1.02) } }
@keyframes hit { 0% { transform: scale(1.25, .7) } 45% { transform: scale(.85, 1.2) translateY(-5px) } 100% { transform: none } }
@keyframes glow { 50% { opacity: .45 } }
@keyframes pulse { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .bob, .glow, .pulse { animation: none } .tok, .trap { transition: none } }

/* tableaux */
.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
th { text-align: left; font-family: var(--caps); font-size: 13px; letter-spacing: .08em; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line) }
td { padding: 9px 10px; border-bottom: 1px solid rgba(44, 81, 71, .5) }
tr.me td { background: var(--gold-soft) }
td.num, th.num { text-align: right }
.player { display: flex; align-items: center; gap: 10px; font-weight: 700 }
.player .avatar { width: 28px; height: 28px }
.rank { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--muted); width: 48px }
tr:nth-child(1) .rank { color: var(--gold) }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 700 }
.pill.correct { background: rgba(127, 214, 139, .15); color: var(--good) }
.pill.wrong, .pill.timeout, .pill.revealed, .pill.skipped { background: rgba(255, 122, 110, .12); color: var(--bad) }

/* dédicace */
#site-footer { margin-top: 8px }
.dedicace { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 12px; background: linear-gradient(90deg, rgba(145, 70, 255, .18), rgba(145, 70, 255, .04) 70%); border: 1px solid rgba(145, 70, 255, .45) }
.dedicace p { margin: 0; font-size: 16px }
.dedicace b { font-family: var(--display); font-size: 19px; letter-spacing: .01em }
.dedicace a { color: #C9A8FF; font-weight: 700 }
.dedicace .heart { font-size: 26px; color: #B98CFF; line-height: 1 }

/* stats */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px }
.stat-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px }
.stat-box .n { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums }
.stat-box .l { font-family: var(--caps); font-size: 12px; letter-spacing: .08em; color: var(--muted) }
.chart svg { width: 100%; height: auto; display: block }

/* mode stream */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px }
.res-grid > div { display: flex; flex-direction: column; gap: 6px }
ol.mini { list-style: none; counter-reset: m; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
ol.mini li { counter-increment: m; display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 7px; background: var(--bg); font-size: 15px }
ol.mini li::before { content: counter(m); font-family: var(--display); font-weight: 700; color: var(--muted); width: 18px }
ol.mini li:first-child::before { color: var(--gold) }
ol.mini li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
ol.mini li b { font-variant-numeric: tabular-nums }
.picks { display: flex; flex-wrap: wrap; gap: 6px }
.pick-chip { padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums }
.pick-chip.ok { border-color: var(--good); color: var(--good); font-weight: 700 }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--caps); letter-spacing: .08em; font-size: 13px; color: var(--muted) }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: block }
.live.on i { background: #FF4D4D; box-shadow: 0 0 0 4px rgba(255, 77, 77, .2) }
.count { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums }
.form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted) }
.field input, .field select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 120px }
.copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.copy code { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 14px; user-select: all; word-break: break-all }

/* rangs */
.rank-badge { display: block; flex: 0 0 auto; overflow: visible }
.rk-pchennn { filter: drop-shadow(0 0 4px rgba(185, 140, 255, .75)); animation: rkglow 2.6s ease-in-out infinite }
@keyframes rkglow { 50% { filter: drop-shadow(0 0 9px rgba(185, 140, 255, .95)) } }
.hdr-rank { display: inline-flex }
.rank-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rk); white-space: nowrap }
.rank-block { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line) }
.rank-block .rk-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0 }
.rank-block .rk-name { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1; color: var(--rk) }
.rank-block .rk-next { font-size: 14px; color: var(--muted) }
.rank-block .bar { height: 7px }
.rank-block .bar > i { background: var(--rk); transition: transform .6s ease }
.rank-block.promo { animation: promo 1.6s ease-out }
.rank-block.demo { animation: demo .8s ease-out }
@keyframes promo { 0% { box-shadow: 0 0 0 0 var(--rk); transform: scale(1) } 20% { transform: scale(1.04) } 60% { box-shadow: 0 0 0 14px transparent } 100% { transform: none } }
@keyframes demo { 20%, 60% { transform: translateX(-4px) } 40%, 80% { transform: translateX(4px) } }
@media (prefers-reduced-motion: reduce) { .rk-pchennn, .rank-block.promo, .rank-block.demo { animation: none } }
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.ladder-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--rk) }
.ladder-step b { font-family: var(--display); font-size: 20px; color: var(--rk) }
.ladder-step span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.ladder-step.mine { box-shadow: 0 0 0 2px var(--rk) }
ol.mini li .rank-badge { align-self: center }

.item.rest { border: 1px dashed var(--line); background: transparent }
.item.rest.next, .item.rest.now { border-color: var(--gold) }