/* Genesis Jeux · Échecs : échiquier et labos (s'ajoute à civ.css) */
/* ---------- échiquier ---------- */
.cb-wrap{width:100%;max-width:480px}
.cb{position:relative;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#dfe5ee;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 10px 30px rgba(31,45,70,.12);user-select:none;-webkit-user-select:none}
.cb-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%}
.cb-sq{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5%;min-width:0;min-height:0}
.cb-sq.l{background:#eef1f6}
.cb-sq.d{background:#9fb0c8}
.cb-sq::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;transition:background .2s}
.cb-sq.hf::before{background:rgba(142,68,216,.22)}
.cb-sq.ht::before{background:rgba(142,68,216,.42)}
.cb-sq.sel::before{background:rgba(0,113,227,.28)}
.cb-sq.chk::before{background:radial-gradient(circle,rgba(255,80,60,.75) 0,rgba(255,80,60,.25) 62%,transparent 80%)}
.cb-sq.dot::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;border-radius:50%;background:rgba(0,113,227,.5);transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.cb-sq.cap::after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 .32em rgba(255,106,85,.85);z-index:2;pointer-events:none}
.cb-rk,.cb-fl{position:absolute;font:600 clamp(8px,1.5vw,11px)/1 var(--body);font-style:normal;color:rgba(29,29,31,.5);z-index:3;pointer-events:none}
.cb-rk{top:4%;left:5%}
.cb-fl{right:5%;bottom:3%}
.cb-p{position:relative;z-index:1;display:block;max-width:86%;height:var(--ph,70%);object-fit:contain;object-position:50% 100%;pointer-events:none;transition:opacity .15s}
.cb-p.tK{--ph:90%}.cb-p.tQ{--ph:86%}.cb-p.tB{--ph:76%}.cb-p.tN{--ph:70%}.cb-p.tR{--ph:64%}.cb-p.tP{--ph:56%}
.cb-p.w{filter:brightness(1.1) saturate(.95) drop-shadow(0 2px 1.5px rgba(20,30,50,.35))}
.cb-p.b{filter:brightness(.34) contrast(1.18) saturate(1.3) drop-shadow(0 2px 1.5px rgba(20,30,50,.4))}
.cb-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.cb-int .cb-sq{cursor:pointer}
.cb-int .cb-sq:hover::before{background:rgba(0,113,227,.12)}

/* ---------- pièces et coups spéciaux ---------- */
.pl{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.pl.sp{display:block}
.pl-side{display:grid;gap:12px;align-content:start;min-width:0}
.pl-pcs{display:flex;flex-wrap:wrap;gap:6px}
.pl-pc{display:grid;justify-items:center;gap:2px;width:74px;padding:6px 4px 7px;border:0;border-radius:16px;background:#fff;font-size:12.5px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.pl-pc img{height:52px;width:auto;max-width:52px;object-fit:contain}
.pl-pc[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--violet);background:var(--violet-s)}
.pl-opts{display:flex;flex-wrap:wrap;gap:6px}
.pl-info{background:#fff;border-radius:20px;padding:14px 16px;display:grid;gap:6px}
.pl-info h4{font-size:19px}
.pl-info.bad{box-shadow:inset 0 0 0 1.5px rgba(255,106,85,.7)}
.pl-n{font-size:14.5px;color:var(--ink3)}
.pl-n b{color:var(--ink)}
.sp-top{margin-bottom:14px}
.sp-intro{font-size:16px}
.sp-opts{display:grid;gap:6px}
.sp-opt{border:0;border-radius:14px;background:#fff;padding:10px 14px;text-align:left;font-size:15px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.sp-opt:hover{background:#fafafa}
.sp-opt.on{box-shadow:inset 0 0 0 2px var(--blue)}
.sp-rules{margin:0;padding-left:20px;font-size:14px;color:var(--ink3);display:grid;gap:3px}

/* ---------- rejeu d'une partie ---------- */
.rp-pills{margin-bottom:14px}
.rp-main{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.rp-l{min-width:0}
.rp-r{min-width:0;display:grid;gap:10px;align-content:start}
.rp-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.rp-ctl .btn{min-width:46px}
.rp-ctl .btn:disabled{opacity:.4;cursor:default}
.rp-mat{margin-top:10px;font-size:13.5px;color:var(--ink3);text-align:center}
.rp-mat b{color:var(--ink)}
.rp-mat i{font-style:normal;font-weight:600;padding:2px 9px;border-radius:99px;background:#fff}
.rp-head h4{font-size:20px}
.rp-meta{font-size:14.5px;color:var(--ink3);margin-top:4px}
.rp-dn{font-size:13px}
.rp-say{background:#fff;border-radius:20px;padding:14px 16px;min-height:100px;display:grid;gap:8px;align-content:start}
.rp-last span{color:var(--ink3);font-size:14px}
.rp-km-t{border-left:3px solid var(--violet);padding-left:12px;font-size:15.5px}
.rp-end{background:var(--violet-s);border-radius:14px;padding:10px 12px;font-size:15px}
.rp-hint{color:var(--ink3);font-size:14px}
.rp-kt{font:600 12.5px var(--body);color:var(--ink3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.rp-km{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rp-km .rp-kt{width:100%;margin:0}
.rp-kb{border:0;background:#fff;border-radius:99px;padding:6px 12px;font-size:13.5px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.rp-kb.on{background:var(--violet);color:#fff}
.rp-moves{position:relative;max-height:176px;overflow:auto;background:#fff;border-radius:16px;padding:8px 10px;display:grid;gap:1px;font-variant-numeric:tabular-nums}
.rp-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:4px;align-items:center}
.rp-no{color:var(--ink4);font-size:13px}
.rp-m{border:0;background:none;border-radius:8px;padding:4px 8px;text-align:left;font-size:14.5px}
.rp-m:hover{background:var(--tile)}
.rp-m.key{font-weight:700;color:var(--violet)}
.rp-m.on{background:var(--blue);color:#fff}

/* ---------- nombres ---------- */
.ng-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ng-big{background:#fff;border-radius:20px;padding:14px 18px;display:grid;gap:2px}
.ng-big small{font-size:13px;color:var(--ink3)}
.ng-big b{font:700 clamp(26px,4vw,40px)/1.05 var(--display);letter-spacing:-.04em;color:var(--blue);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ng-big.alt b{color:var(--violet)}
.ng-track{grid-column:1/-1;height:8px;background:#dcdce1;border-radius:99px;overflow:hidden}
.ng-track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--violet));border-radius:99px;transition:width .4s}
.ng-txt{margin-top:14px;font-size:16px}
.ng-tr{display:block;margin-top:8px;color:var(--ink3);font-size:14.5px}
.ls-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.ls-t b{display:block;font:700 22px/1.1 var(--display);letter-spacing:-.03em}
.ls-t span{font-size:14px;color:var(--ink3)}
.ls-bar{height:14px;background:#dcdce1;border-radius:99px;overflow:hidden}
.ls-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.ls-row.hi .ls-bar i{background:var(--violet)}
.ls-row.hi .ls-t b{color:var(--violet)}
.bl{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.bl-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#cfd6e2;padding:2px}
.bl-c{background:#fff;border-radius:2px;transition:background .25s}
.bl-c.d{background:#e6eaf1}
.bl-c.on{background:#f0cb5e}
.bl-c.d.on{background:#e2b438}
.bl-c.cur{box-shadow:inset 0 0 0 2.5px var(--violet)}
.bl-r{display:grid;gap:10px;min-width:0}
.bl-r1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.bl-r1 small{font-size:14px;color:var(--ink3)}
.bl-r1 b{font:700 18px var(--display);letter-spacing:-.02em;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.bl-r1.hi b{color:var(--violet)}
.bl-note{background:#fff;border-radius:16px;padding:12px 14px;font-size:15px}

/* ---------- grands maîtres ---------- */
.mt-cnt{font-size:14px;color:var(--ink3);margin-bottom:10px}
.mt-cnt.all{color:var(--green);font-weight:600}
.mt-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.mt-t{position:relative;text-align:left;background:#fff;border:0;border-radius:16px;padding:10px 32px 10px 12px;display:grid;gap:1px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.mt-t b{font-size:15px;letter-spacing:-.02em;line-height:1.2}
.mt-y{font-size:12px;color:var(--ink4)}
.mt-p{font-size:12px;color:var(--ink3);line-height:1.25}
.mt-ck{position:absolute;top:9px;right:11px;font-style:normal;font-size:14px;color:transparent}
.mt-t.seen .mt-ck{color:var(--green)}
.mt-t[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--violet);background:var(--violet-s)}
.mt-det{margin-top:14px;background:#fff;border-radius:24px;padding:18px 22px;display:grid;gap:8px}
.mt-det h4{font-size:26px}
.mt-k{font:600 13px var(--body);color:var(--gold)}
.mt-r{font-size:17px;color:var(--ink3)}
.mt-q{font:600 18px/1.3 var(--display);letter-spacing:-.025em}
.mt-t2{font-size:16.5px}
.mt-f{background:var(--tile);border-radius:14px;padding:10px 14px;font-size:15px}
.mt-hyp{display:grid;gap:10px;background:var(--tile);border-radius:18px;padding:14px 16px}
.rg-sc{overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;max-width:100%;contain:inline-size}
.panel>*,.hyp-res,.lab{min-width:0}
.rg-in{position:relative;min-width:1000px;height:300px}
.rg-ax span{position:absolute;top:0;font-size:12px;color:var(--ink4);transform:translateX(-50%)}
.rg-lane{position:absolute;left:0;right:0;top:24px;height:112px}
.rg-lane.l2{top:176px;height:112px}
.rg-lab{position:absolute;top:150px;font-size:13px;font-weight:600;color:var(--violet)}
.rg-b{position:absolute;top:0;bottom:0;border:0;padding:4px 0;border-radius:8px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:500;overflow:hidden;box-shadow:0 0 0 1.5px var(--tile);min-width:4px;display:grid;justify-items:center;align-content:start}
.rg-b span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;line-height:1.1}
.rg-b.nt span{display:none}
.rg-b.odd{background:#4a95ee}
.rg-b.vac{background:#d2d2d7}
.rg-b.now{background:var(--violet)}
.rg-lane.l2 .rg-b{background:#7a6a9a}
.rg-lane.l2 .rg-b.odd{background:#9a88bd}
.rg-b.on{box-shadow:0 0 0 3px var(--ink)}
.rg-b.hl{box-shadow:0 0 0 3px var(--gold)}
.rg-info{margin-top:8px;background:#fff;border-radius:14px;padding:10px 14px;font-size:15px}

/* ---------- histoires en étapes, frises horizontales ---------- */
.stp-top{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.stp-top button{flex:0 0 auto;display:flex;gap:7px;align-items:center;border:0;background:#fff;border-radius:99px;padding:5px 13px 5px 5px;font-size:13.5px;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.stp-top button b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tile);font-size:12px;color:var(--ink3)}
.stp-top button.done b{background:var(--green);color:#fff}
.stp-top button.on{background:var(--ink);color:#fff}
.stp-top button.on b{background:#fff;color:var(--ink)}
.stp-body{background:#fff;border-radius:22px;padding:18px 22px;margin:12px 0;min-height:150px;display:grid;gap:8px;align-content:start}
.stp-body h4{font-size:22px}
.when{font:600 13px var(--body);color:var(--gold)}
.fx{font-size:14px;color:var(--ink3);background:var(--tile);border-radius:12px;padding:8px 12px}
.stp-bars{display:flex;height:38px;border-radius:99px;overflow:hidden;font-size:13px;font-weight:600;color:#fff;margin:6px 0}
.stp-bars i{display:grid;place-items:center;font-style:normal;white-space:nowrap;min-width:0;overflow:hidden}
.stp-bars .k{background:#6e6e73}
.stp-bars .n{background:#c7c7cc;color:var(--ink)}
.stp-bars .g{background:var(--violet)}
.stp-nav{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.stp-nav .btn:disabled{opacity:.4;cursor:default}
.stp-link{justify-self:start;text-decoration:none}
.tlh-bar{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.tlh-bar button{flex:0 0 auto;display:grid;gap:1px;text-align:left;background:#fff;border:0;border-radius:16px;padding:9px 14px;width:158px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.tlh-bar button b{font-size:12.5px;color:var(--gold)}
.tlh-bar button span{font-size:13px;line-height:1.25;letter-spacing:-.01em}
.tlh-bar button[aria-selected=true]{background:var(--ink);color:#fff}
.tlh-bar button[aria-selected=true] b{color:#f5c07a}
.tlh-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(14px,3vw,28px);align-items:center;background:#fff;border-radius:24px;padding:clamp(16px,2.4vw,26px);margin-top:4px}
.tlh-tx{display:grid;gap:9px;min-width:0;align-content:start}
.tlh-tx h4{font-size:clamp(20px,2.4vw,26px);line-height:1.12}
.tlh-im{margin:0;min-width:0}
.tlh-im img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.tlh-im.o{background:var(--tile);border-radius:20px;display:grid;place-items:center;padding:18px;min-height:200px}
.tlh-im.o img{aspect-ratio:auto;object-fit:contain;max-height:260px;width:auto;border-radius:0}

/* ---------- vrai ou faux, Elo, chess.com ---------- */
.vf-sc{font-size:14px;color:var(--ink3);margin-bottom:4px}
.vf-c{background:#fff;border-radius:18px;padding:14px 16px;margin-top:10px;display:grid;gap:10px}
.vf-s{font-size:16.5px;display:flex;gap:10px}
.vf-s span{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tile);font-size:12.5px;font-weight:600;color:var(--ink3)}
.vf-b{display:flex;gap:8px}
.vf-b button{border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:99px;padding:8px 22px;font-size:15px}
.vf-b button.ok{border-color:var(--green);background:#f1faf4;box-shadow:inset 0 0 0 1px var(--green)}
.vf-b button.no{border-color:#e8a317;background:#fff8e8;text-decoration:line-through;opacity:.7}
.vf-ex{font-size:15px;background:var(--tile);border-radius:12px;padding:10px 12px}
.elo-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.elo-g label{display:grid;gap:6px;font-size:14px;color:var(--ink3)}
.elo-v{font:700 30px/1 var(--display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.elo input[type=range]{width:100%;accent-color:var(--violet)}
.elo-bar{display:flex;height:46px;border-radius:99px;overflow:hidden;margin:16px 0 10px;font-weight:600;color:#fff}
.elo-bar i{display:grid;place-items:center;font-style:normal;min-width:0;overflow:hidden;transition:flex .3s}
.elo-bar .ea{background:var(--blue)}
.elo-bar .eb{background:var(--violet)}
.elo-out{font-size:16px;margin-bottom:10px}
.mbr-l{display:grid;grid-template-columns:110px minmax(0,1fr) 72px;gap:10px;align-items:center;margin:9px 0;font-size:14px}
.mbr-t{height:16px;background:#dcdce1;border-radius:99px;overflow:hidden}
.mbr-t i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--violet));border-radius:99px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.mbr-l b{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- adaptation ---------- */
@media (max-width:900px){
  .pl,.bl,.rp-main{grid-template-columns:minmax(0,1fr)}
  .cb-wrap{max-width:min(100%,460px);margin:0 auto}
  .tlh-body{grid-template-columns:minmax(0,1fr)}
  .tlh-im{order:-1}
  .ls-row{grid-template-columns:minmax(0,1fr)}
  .elo-g{grid-template-columns:minmax(0,1fr)}
  .ng-out{grid-template-columns:minmax(0,1fr)}
  .mbr-l{grid-template-columns:84px minmax(0,1fr) 62px}
}
@media (prefers-reduced-motion:reduce){.ls-bar i,.mbr-t i,.ng-track i,.cb-sq::before,.cb-p{transition:none}}

/* onglet « Parties célèbres » : image d'objet détouré dans le bandeau */
.tabhero.ob .th-img{object-fit:contain;padding:clamp(18px,3vw,38px);box-sizing:border-box;background:linear-gradient(135deg,#f5f5f7,#e9e9ee);-webkit-mask-image:none;mask-image:none;width:min(36%,400px)}
.tabhero.ob .th-tx{width:calc(100% - min(36%,400px) + 0px)}
@media (max-width:980px){.tabhero.ob .th-img{width:100%;aspect-ratio:16/9;padding:18px}.tabhero.ob .th-tx{width:auto}}