/* rc-gmpro.css - "Pro" look of the grandmaster game page (owner, 14 Nov 2026). Only on pages with body.gp-pro (TEST ?pptest=1).
   Desktop: board | controls + Play + moves, then About/FAQ | video + facts + links - every column filled.
   Tablet: the same two columns, narrower. Phone: one column. Light + dark from the viewer's own tokens. */
.gp-pro{--gp-r:16px;--gp-gap:20px;--gp-card:var(--panel);--gp-line:var(--line);--gp-soft:var(--panel-2);font-feature-settings:"ss01","cv11"}
.gp-pro .wrap{max-width:1280px;margin:0 auto}

/* ---------- header: breadcrumb bar (no 3-dot menu any more: its items are in Review & Options) ---------- */
.gp-pro #siteHeader.topbar{background:transparent;border:0;box-shadow:none;position:static}
.gp-pro .topbar-inner{max-width:1280px;margin:0 auto;padding:12px 24px 0}
.gp-pro .menu-wrap{display:none!important}
.gp-pro .crumb{font-size:13px;font-weight:500;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0}
.gp-pro .crumb a{color:var(--muted);text-decoration:none;padding:4px 8px;border-radius:999px;background:var(--gp-soft);border:1px solid var(--gp-line);transition:color .15s,border-color .15s}
.gp-pro .crumb a:hover{color:var(--text);border-color:var(--accent)}
.gp-pro .crumb-sep{opacity:.5}
.gp-pro .crumb-current{color:var(--text);font-weight:600;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}

/* ---------- hero: H1 + match line ---------- */
.gp-hero{margin:12px 0 14px;padding:22px 24px;border-radius:var(--gp-r);background:
  radial-gradient(120% 140% at 0% 0%,rgba(52,199,89,.16),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(10,132,255,.14),transparent 55%),var(--gp-card);
  border:1px solid var(--gp-line);box-shadow:var(--shadow-md)}
.gp-kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.gp-h1{margin:6px 0 10px;font-size:clamp(24px,3.2vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.gp-h1-ev{display:block;margin-top:6px;font-size:clamp(15px,1.6vw,19px);font-weight:600;letter-spacing:0;color:var(--muted)}
.gp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--muted)}
.gp-chips a{color:var(--text);text-decoration:none;border-bottom:1px dashed var(--muted-2)}
.gp-chips a:hover{color:var(--accent);border-color:var(--accent)}
.gp-dot{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}
.gp-eco{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 6px;border-radius:6px;background:var(--gp-soft);border:1px solid var(--gp-line);color:var(--muted)}

/* ---------- the players bar: two clean cards and the result between ---------- */
.gp-pro .players{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:0 0 14px;padding:0;background:transparent;border:0;box-shadow:none}
.gp-pro .player{display:flex!important;align-items:center;gap:10px;min-width:0}
.gp-pro .player>div{min-width:0}
.gp-pro .player.black{justify-content:flex-end}
.gp-pro .player{flex:1 1 0;min-width:0;padding:12px 14px;border-radius:14px;background:var(--gp-card);border:1px solid var(--gp-line)}
.gp-pro .player-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-pro .player-side{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gp-pro .result-badge{font-size:15px;padding:8px 14px;border-radius:12px;flex:0 0 auto}

/* ---------- page grid (owner 14 Nov): main.wrap is the grid, the template's .game-grid only passes its children through.
   Desktop: the board from the top of the page on the left (whole board on the first screen); on the right the title card,
   players, controls, Play and the moves box, which ends level with the board and scrolls inside. Below: About | side.
   Tablet: title + players on top, board | moves, then About | side. Phone: one column. !important: the template's own
   layout CSS (rama-layout-final) sets these with !important. ---------- */
body.gp-pro main.wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"hero" "players" "left" "right" "about" "side"!important;column-gap:24px;row-gap:14px;align-items:start}
body.gp-pro main.wrap>*{grid-column:1/-1;min-width:0}
body.gp-pro .game-grid{display:contents!important}
body.gp-pro .game-grid>*{grid-column:1/-1}
body.gp-pro main.wrap>.gp-hero{grid-area:hero!important;margin:0!important}
body.gp-pro main.wrap>.players{grid-area:players!important;margin:0!important}
body.gp-pro .game-grid>.col-left{grid-area:left!important;display:block!important;min-width:0;width:auto!important;max-width:none!important}
body.gp-pro .game-grid>.col-right{grid-area:right!important;min-width:0;width:auto!important;max-width:none!important;display:flex!important;flex-direction:column;gap:12px}
body.gp-pro .game-grid>#aboutGame{grid-area:about!important;min-width:0;max-width:none!important;width:auto!important;margin:0!important}
body.gp-pro .game-grid>.gp-side{grid-area:side!important;min-width:0}
@media (min-width:768px){
  body.gp-pro main.wrap{grid-template-columns:minmax(0,1fr) 300px!important;grid-template-areas:"hero hero" "players players" "left right" "about side"!important}
  .gp-pro .gp-side{position:sticky;top:76px}
  .gp-pro .col-right .moves-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .gp-pro .col-right .movelist{flex:1 1 auto;max-height:none!important;height:auto!important;min-height:0;overflow-y:auto!important}
}
@media (min-width:1024px){
  /* the board column = the board (the viewer caps it at the screen height - 195 px): no empty space beside it */
  body.gp-pro main.wrap{grid-template-columns:minmax(0,min(60%,calc(100vh - 150px))) minmax(340px,1fr)!important;
    grid-template-areas:"left hero" "left players" "left right" "about side"!important;grid-template-rows:auto auto 1fr auto!important}
  body.gp-pro .game-grid>.col-left{align-self:start}
  .gp-pro .board-wrap{display:flex;justify-content:center}
  /* compact right side, so the moves box gets the rest of the board's height */
  body.gp-pro main.wrap{row-gap:10px}
  .gp-pro .gp-hero{padding:14px 18px}
  .gp-pro .gp-kicker,.gp-pro .gp-h1-ev{display:none}
  .gp-pro .gp-h1{font-size:clamp(21px,2vw,27px);margin:0 0 6px}
  .gp-pro .gp-chips{font-size:12.5px;gap:4px 8px}
  .gp-pro .player{padding:8px 12px}
  .gp-pro .player-side{font-size:10px}
  .gp-pro .player-name{font-size:15px}
  .gp-pro .result-badge{padding:6px 12px}
  .gp-pro .col-right{gap:10px!important}
  .gp-pro .ctrl-btn{height:40px}
  .gp-pro .actions .pp-btn{min-height:46px}
  /* the moves box never makes the right side taller than the board: rc-gmpro.js sets its height to end with the board */
  .gp-pro .col-right .moves-panel{overflow:hidden}
}
.gp-pro .board-wrap{padding:10px;border-radius:var(--gp-r);background:var(--gp-card);border:1px solid var(--gp-line);box-shadow:var(--shadow-md)}

/* ---------- controls: 6 viewer buttons + Review & Options ---------- */
.gp-pro .controls{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:6px;border-radius:14px;background:var(--gp-card);border:1px solid var(--gp-line)}
.gp-pro .ctrl-btn{width:auto!important;height:44px;border-radius:10px}
.gp-pro .ctrl-btn.gp-opt-btn{background:var(--accent);color:#fff;border-color:transparent}
.gp-pro .ctrl-btn.gp-opt-btn:hover{filter:brightness(1.06)}
.gp-pro .ctrl-btn.gp-opt-btn svg{width:20px;height:20px}
/* actions: only "Play This Position Against Stockfish" (Analyse is in the menu) */
.gp-pro #analyseBtn{display:none!important}
.gp-pro .actions{display:block!important;margin:0}
.gp-pro .actions .pp-btn{width:100%;min-height:52px;border-radius:14px;font-size:15px;box-shadow:0 6px 18px rgba(10,132,255,.25)}
.gp-pro .moves-panel{border-radius:14px;border:1px solid var(--gp-line)}
/* moves: number | White | Black in tidy columns, also when the column is wide */
@media (min-width:1024px){.gp-pro .col-right .move-row{grid-template-columns:44px minmax(0,170px) minmax(0,170px)!important;justify-content:start}}

/* ---------- About / summary / FAQ ---------- */
.gp-pro #aboutGame{padding:22px 24px;border-radius:var(--gp-r);background:var(--gp-card);border:1px solid var(--gp-line)}
.gp-pro #aboutGame h2,.gp-pro #aboutGame .about-game-title,.gp-pro #aboutGame .about-game-subtitle{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:22px 0 10px;color:var(--text)}
.gp-pro #aboutGame>.p2gs:first-of-type h2,.gp-pro #aboutGame>*:first-child h2{margin-top:0}
.gp-pro .p2gs{border:0!important;background:transparent!important;padding:0!important;margin:0 0 6px!important}
.gp-pro .p2gs .p2gl{font-size:15.5px;line-height:1.65;color:var(--text)}
.gp-pro .p2gs dl{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:10px!important;margin:14px 0!important}
.gp-pro .p2gs dl>div{padding:10px 12px;border-radius:12px;background:var(--gp-soft);border:1px solid var(--gp-line)}
.gp-pro .p2gs dt{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gp-pro .p2gs dd{margin:3px 0 0;font-weight:600;font-size:14.5px;color:var(--text);word-break:break-word}
.gp-pro .p2gs details{margin:10px 0;padding:12px 14px;border-radius:12px;background:var(--gp-soft);border:1px solid var(--gp-line)}
.gp-pro .p2gs summary{cursor:pointer;font-weight:600}
.gp-pro .p2mv{font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;word-spacing:2px}
.gp-pro .p2lk{display:none}
.gp-pro .about-game-body p{font-size:15.5px;line-height:1.7;color:var(--text);margin:0 0 12px}
.gp-pro .about-game-body a,.gp-pro .p2gs a{color:var(--accent);text-decoration:none;font-weight:600}
.gp-pro .about-game-body a:hover{text-decoration:underline}
.gp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;padding:1px 6px;border-radius:6px;background:var(--gp-soft);border:1px solid var(--gp-line)}
.gp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.gp-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--gp-line);background:var(--gp-soft);color:var(--text)!important;font-size:14px;font-weight:600}
.gp-links a:hover{border-color:var(--accent);text-decoration:none!important}
.gp-pro .about-game-faq{display:flex;flex-direction:column;gap:8px}
.gp-pro .ag-faq{border-radius:12px;border:1px solid var(--gp-line);background:var(--gp-soft);overflow:hidden}
.gp-pro .ag-faq summary{list-style:none;cursor:pointer;padding:14px 44px 14px 16px;font-weight:650;font-size:15px;position:relative;color:var(--text)}
.gp-pro .ag-faq summary::-webkit-details-marker{display:none}
.gp-pro .ag-faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.gp-pro .ag-faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.gp-pro .ag-faq p{margin:0;padding:0 16px 14px;font-size:14.5px;line-height:1.65;color:var(--muted)}

/* ---------- side column: video, facts, explore ---------- */
.gp-side{display:flex;flex-direction:column;gap:14px}
.gp-card{padding:14px;border-radius:var(--gp-r);background:var(--gp-card);border:1px solid var(--gp-line)}
.gp-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.gp-card-h span{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text)}
.gp-card-h em{font-style:normal;font-size:12px;color:var(--accent);font-weight:600;text-align:right}
.gp-yt{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.gp-yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.gp-yt:hover img{transform:scale(1.03)}
.gp-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gp-yt-play svg{width:62px;height:44px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.gp-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gp-yt-t{margin:10px 0 6px;font-weight:700;font-size:14.5px;line-height:1.4;color:var(--text)}
.gp-yt-ch{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.gp-yt-ch:hover{color:#ff3b30}
.gp-facts dl{margin:0;display:grid;gap:0}
.gp-facts dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--gp-line);font-size:14px}
.gp-facts dl>div:first-child{border-top:0}
.gp-facts dt{color:var(--muted)}
.gp-facts dd{margin:0;font-weight:600;text-align:right;color:var(--text);min-width:0;overflow-wrap:anywhere}
.gp-more{display:flex;flex-direction:column;gap:6px}
.gp-more a{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 12px;border-radius:10px;background:var(--gp-soft);border:1px solid var(--gp-line);color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.gp-more a::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:rotate(45deg)}
.gp-more a:hover{border-color:var(--accent)}

/* ---------- Review & Options menu + its result sheets ---------- */
.gp-menu-ov{position:fixed;inset:0;z-index:2147482000;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;animation:gpFade .15s ease}
@media (min-width:768px){.gp-menu-ov{align-items:center}}
.gp-sheet{width:100%;max-width:420px;max-height:88vh;overflow:auto;background:var(--panel);color:var(--text);border-radius:22px 22px 0 0;padding:18px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.35);animation:gpUp .2s ease}
@media (min-width:768px){.gp-sheet{border-radius:22px;padding:18px 14px}}
.gp-sheet h3{margin:2px 6px 12px;font-size:18px;font-weight:800}
.gp-sheet .gp-sub{margin:-8px 6px 12px;font-size:13px;color:var(--muted)}
.gp-mi{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:var(--text);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer;text-decoration:none}
.gp-mi:hover,.gp-mi:focus-visible{background:var(--panel-2);outline:none}
.gp-mi .gp-ic{flex:0 0 38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--accent)}
.gp-mi .gp-ic svg{width:21px;height:21px}
.gp-mi small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:1px}
.gp-sep{height:1px;margin:6px 8px;background:var(--line)}
.gp-row{display:flex;gap:8px;margin-top:12px}
.gp-b{flex:1 1 0;min-height:48px;border:0;border-radius:999px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;background:var(--panel-2);color:var(--text)}
.gp-b.main{background:var(--accent);color:#fff}
.gp-prev{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--panel-2)}
.gp-bar{height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin:12px 0 6px}
.gp-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.gp-note{font-size:13px;color:var(--muted);text-align:center}
@keyframes gpFade{from{opacity:0}to{opacity:1}}
@keyframes gpUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* ---------- phone ---------- */
@media (max-width:767px){
  .gp-pro .topbar-inner{padding:10px 14px 0}
  .gp-hero{padding:16px;margin:10px 0 12px}
  .gp-chips{font-size:13px}
  .gp-pro .players{gap:8px}
  .gp-pro .player{padding:10px}
  .gp-pro .player-name{font-size:14px;white-space:normal;overflow:visible;line-height:1.2;overflow-wrap:anywhere}
  .gp-pro .player-chip{display:none}
  .gp-pro .result-badge{padding:6px 9px;font-size:13px}
  .gp-pro .board-wrap{padding:6px;border-radius:14px}
  .gp-pro .ctrl-btn{height:46px}
  .gp-pro #aboutGame{padding:16px}
  .gp-pro .p2gs dl{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gp-pro .col-right .movelist{max-height:300px}
}

/* ---------- player photos (owner 14 Nov: real photo instead of the king) + name -> profile pop-up ---------- */
.gp-pro .player{cursor:pointer;transition:border-color .15s,transform .15s}
.gp-pro .player:hover{border-color:var(--accent)}
.gp-pro .player:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gp-pro .player-chip.gp-face{width:44px!important;height:44px!important;min-width:44px;border-radius:50%!important;padding:0!important;overflow:hidden;display:flex!important;align-items:center;justify-content:center;font:800 15px/1 system-ui,sans-serif;border:2px solid var(--gp-line)}
.gp-pro .player-chip.gp-face img{width:100%;height:100%;object-fit:cover;display:block}
.gp-pro .player-chip.gp-face[data-side="white"]{border-color:#e5e5ea;background:#f2f2f7;color:#1c1c1e}
.gp-pro .player-chip.gp-face[data-side="black"]{border-color:#1c1c1e;background:#1c1c1e;color:#fff}
.gp-pro .player-name{text-decoration:underline dotted transparent;text-underline-offset:3px}
.gp-pro .player:hover .player-name{text-decoration-color:var(--muted)}
.gp-pcard{position:relative;width:100%;max-width:380px;max-height:90vh;overflow:auto;background:var(--panel);color:var(--text);border-radius:24px;padding:0 18px 18px;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:gpUp .2s ease;text-align:center}
@media (max-width:767px){.gp-pcard{border-radius:24px 24px 0 0;max-width:none;padding-bottom:calc(18px + env(safe-area-inset-bottom))}}
.gp-pcover{height:110px;margin:0 -18px;background:linear-gradient(135deg,#0e271d,#00a86b 55%,#e9c46a)}
.gp-pc-black .gp-pcover{background:linear-gradient(135deg,#111,#2c3442 55%,#0a84ff)}
.gp-pclose{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gp-pclose svg{width:16px;height:16px}
.gp-pphoto{width:104px;height:104px;margin:-56px auto 10px;border-radius:50%;overflow:hidden;border:4px solid var(--panel);box-shadow:0 0 0 3px #e9c46a,0 8px 24px rgba(0,0,0,.3);background:#2c3442;display:flex;align-items:center;justify-content:center;color:#fff;font:800 34px/1 system-ui,sans-serif;position:relative}
.gp-pphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.gp-pname{font-size:22px;font-weight:800;letter-spacing:-.01em}
.gp-pchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 12px}
.gp-pchip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;font-weight:600}
.gp-pchip.won{color:#16a34a;border-color:rgba(22,163,74,.35)}
.gp-pchip.lost{color:#e53935;border-color:rgba(229,57,53,.3)}
.gp-pdot{width:10px;height:10px;border-radius:50%;border:1.5px solid #8e8e93}
.gp-pdot.white{background:#fff}.gp-pdot.black{background:#111}
.gp-pabout{text-align:left;padding:12px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);margin:0 0 12px}
.gp-pabout b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gp-pabout p{margin:4px 0 0;font-size:14.5px;line-height:1.55}
.gp-pbtn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:700;font-size:15px}
.gp-pbtn.main{background:#00a86b;border-color:#00a86b;color:#fff;margin-bottom:8px}
.gp-pbtn-row{display:flex;gap:8px}.gp-pbtn-row .gp-pbtn{flex:1 1 0}
.gp-pcredit{margin-top:10px;font-size:11px;color:var(--muted)}
.gp-pcredit a{color:inherit}

/* ---------- desktop width (owner 14 Nov "still much space left and right"): use the screen ---------- */
@media (min-width:1280px){
  .gp-pro .wrap,.gp-pro .topbar-inner{max-width:min(1640px,calc(100vw - 48px))!important;padding-left:0!important;padding-right:0!important}
  body.gp-pro main.wrap{grid-template-columns:minmax(0,min(58%,calc(100vh - 150px))) minmax(380px,1fr)!important}
}

/* last move = the Analyser's exact highlight (same class + colour as analyser.html) */
.gp-pro #board .square-55d63.square-highlight-last{background:rgba(255,225,50,0.85)!important}

/* owner 14 Nov: no Flip button in the row (Flip board is in the Options menu); the 3-dot Options button sits in its place */
.gp-pro #btnFlip{display:none!important}

/* ---------- FAQ (owner 14 Nov "improve the UI"): numbered question cards, accent bar + soft tint when open, answer
   lined up under the question, smooth chevron; same in light and dark ---------- */
.gp-pro .about-game-subtitle{display:flex;align-items:center;gap:10px}
.gp-pro .about-game-subtitle::before{content:"?";flex:0 0 30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:17px;font-weight:800}
.gp-pro .about-game-faq{counter-reset:gpq;gap:10px!important}
.gp-pro .ag-faq{counter-increment:gpq;position:relative;border-radius:14px!important;border:1px solid var(--gp-line)!important;background:var(--gp-card)!important;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s,background .2s}
.gp-pro .ag-faq:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--gp-line))!important}
.gp-pro .ag-faq[open]{border-color:color-mix(in srgb,var(--accent) 55%,var(--gp-line))!important;background:color-mix(in srgb,var(--accent) 6%,var(--gp-card))!important;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.gp-pro .ag-faq::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:0;transition:opacity .2s}
.gp-pro .ag-faq[open]::before{opacity:1}
.gp-pro .ag-faq summary{display:flex!important;align-items:center;gap:12px;padding:15px 48px 15px 14px!important;font-size:15.5px!important;line-height:1.4;font-weight:700!important}
.gp-pro .ag-faq summary::before{content:counter(gpq,decimal-leading-zero);flex:0 0 34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--gp-soft);border:1px solid var(--gp-line);color:var(--accent);font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.gp-pro .ag-faq[open] summary::before{background:var(--accent);border-color:var(--accent);color:#fff}
.gp-pro .ag-faq summary::after{right:20px!important;width:9px!important;height:9px!important}
.gp-pro .ag-faq p{padding:0 18px 16px 60px!important;font-size:15px!important;line-height:1.7!important;color:var(--text)!important;opacity:.82;animation:gpFade .25s ease}
@media (max-width:767px){
  .gp-pro .ag-faq summary{font-size:15px!important;padding:13px 42px 13px 12px!important;gap:10px}
  .gp-pro .ag-faq summary::before{flex-basis:30px;height:30px;font-size:12px}
  .gp-pro .ag-faq p{padding:0 14px 14px 14px!important}
}

/* while playing Stockfish (rc-playpos): names bar hidden, and on desktop the board column gets the room the game needs
   (its own desktop layout: picture, message, buttons on the left, the board fitted to the screen) */
.gp-pro .players.pp-hide,.gp-pro .pp-hide{display:none!important}
@media (min-width:1024px){
  body.gp-pro main.wrap:has(.pp-on){grid-template-columns:minmax(0,1fr) minmax(340px,400px)!important;grid-template-areas:"left hero" "left right" "about side"!important;grid-template-rows:auto 1fr auto!important}
}

/* owner 14 Nov: the Options pop-up and the White / Black profile pop-ups always in the centre of the screen (also phones) */
.gp-menu-ov{align-items:center!important;justify-content:center!important;padding:16px!important}
.gp-sheet,.gp-pcard{border-radius:22px!important;max-height:calc(100dvh - 32px)!important;padding-bottom:18px!important}
.gp-pcard{max-width:380px!important}

/* Review button beside the 3-dot Options (owner 14 Nov) */
.gp-pro .ctrl-btn.gp-rev-btn{color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--gp-card))}
.gp-pro .ctrl-btn.gp-rev-btn:hover{background:color-mix(in srgb,var(--accent) 18%,var(--gp-card))}
.gp-pro .ctrl-btn.gp-rev-btn svg{width:20px;height:20px}

/* ads placed inside the page's columns (AdSense full-width-responsive) stay inside their column: no sideways scroll */
body.gp-pro main.wrap{overflow-x:clip}
body.gp-pro main.wrap>*,body.gp-pro .game-grid>*{max-width:100%}
.gp-pro #aboutGame ins.adsbygoogle,.gp-pro .gp-side ins.adsbygoogle,.gp-pro .col-right ins.adsbygoogle,.gp-pro .col-left ins.adsbygoogle{max-width:100%!important;overflow:hidden!important}
.gp-pro #aboutGame,.gp-pro .gp-side{overflow-x:clip}

/* ---------- head-to-head pages (body[data-gph2h]): photo bar + video / play box ---------- */
.gp-vsbar{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,36px);margin:14px 0 18px;padding:16px;border-radius:18px;background:var(--panel,#fff);border:1px solid var(--line,#e5e5ea)}
.gp-vsp{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1 1 0;max-width:260px;padding:8px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.gp-vsp:hover{background:var(--panel-2,#f2f2f7)}
.gp-vsf{width:clamp(64px,12vw,96px);height:clamp(64px,12vw,96px);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#2c3442;color:#fff;font:800 26px/1 system-ui,sans-serif;box-shadow:0 0 0 3px #e9c46a}
.gp-vsf img{width:100%;height:100%;object-fit:cover}
.gp-vsn{font-weight:800;font-size:clamp(14px,2vw,18px);text-align:center;overflow-wrap:anywhere}
.gp-vsg{font-size:12.5px;color:var(--muted,#6e6e73)}
.gp-vsx{font:800 clamp(16px,2.4vw,22px)/1 system-ui,sans-serif;color:#e9c46a}
.gp-h2h-more{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin:18px 0}
@media(max-width:767px){.gp-h2h-more{grid-template-columns:1fr}}
.gp-play-t{font-weight:800;font-size:17px;margin:2px 0 6px}
.gp-play p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--muted,#6e6e73)}
.gp-play .gp-pbtn{text-decoration:none}
/* head-to-head pages have their own colour tokens: map ours onto them, with safe fallbacks */
body[data-gph2h]{--gp-r:16px;--gp-card:var(--panel,#fff);--gp-line:var(--line,#e5e5ea);--gp-soft:var(--panel-2,#f2f2f7);--muted:var(--text-2,#6e6e73)}
body[data-gph2h] .gp-pcard{background:var(--panel,#fff);color:var(--text,#1c1c1e)}
body[data-gph2h] .gp-pabout,body[data-gph2h] .gp-pchip,body[data-gph2h] .gp-pbtn:not(.main){background:var(--panel-2,#f2f2f7);border-color:var(--line,#e5e5ea);color:var(--text,#1c1c1e)}
body[data-gph2h] .gp-pphoto{border-color:var(--panel,#fff)}
body[data-gph2h] .gp-yt-t{color:var(--text,#1c1c1e)}