/* The live page, framed by the stage. Only active with ?embed=board or ?embed=panel (class set in <head> before paint). */
html.etc-embed,html.etc-embed body{background:transparent!important;overflow:hidden!important;height:100%}
html.etc-embed .wrap,html.etc-embed .fab,html.etc-embed .cbx,html.etc-embed #side{display:none!important}
html.etc-embed .page{background:none!important;min-height:0!important}
html.etc-embed .page::before,html.etc-embed .page::after{display:none!important}

/* ---------- board frame: bars, board, moves + Another game + sound, This game (live capture tracker) ---------- */
#etcb{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px;gap:6px;box-sizing:border-box}
#etcb .hbar{width:var(--ebs);flex:none;min-height:0;height:44px;padding:4px 8px 4px 5px;gap:9px;box-sizing:border-box}
#etcb .hbar .hav{width:34px;height:34px}
#etcb .hbar .hn{font-size:14.5px}
#etcb .hbar .hn small{font-size:11.5px}
#etcb .hbar .clk{min-width:56px;padding:6px 8px;font-size:11.5px}
#etcb .hbar .hjb{width:22px;height:22px}
#etcb #board{width:var(--ebs)!important;height:var(--ebs)!important;flex:none;max-width:none}
#etcb .etc-row{width:var(--ebs);flex:none;height:38px;display:flex;gap:6px;align-items:stretch}
#etcb #hms{flex:1;min-width:0;min-height:0;height:38px;box-sizing:border-box;padding:7px 10px;font-size:13.5px}
#etcb #next{flex:none;margin:0;padding:0 13px;font-size:13px;white-space:nowrap;display:flex;align-items:center}
#etcb .hsnd{position:static!important;flex:none;width:38px!important;height:38px!important;margin:0!important;transform:none!important}
#etcb #hlive{width:var(--ebs);flex:none;height:34px;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(40px,90px) auto minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:0 10px;margin:0;border-radius:10px;background:#111416;border:1px solid #2f383d;overflow:hidden}
#etcb #hlive .lab{font:700 10px/1 var(--ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#d6ab52;white-space:nowrap}
#etcb #hlive .lrow{display:contents}
#etcb #hlive .lrow .mvn{font-size:12px;white-space:nowrap;color:#a9adb5}
#etcb #hlive .lrow .mvn b{font-size:13px}
#etcb #hlive .mat{order:9;font-size:11.5px;line-height:1.25;padding:1px 8px}
#etcb #hlive .caps{display:contents}
#etcb #hlive .caps>div{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
#etcb #hlive .caps small{margin:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
#etcb #hlive .caps span{flex:1;min-width:0;min-height:0;height:24px;box-sizing:border-box;padding:2px 4px;flex-wrap:nowrap;overflow:hidden}
#etcb #hlive .caps span img{width:16px;height:16px}
#etcb #hlive .caps span em{font-size:11px;white-space:nowrap}
/* phone-sized frame */
html.etc-small #etcb{padding:6px;gap:4px}
html.etc-small #etcb .hbar{height:38px;padding:3px 6px 3px 4px;gap:7px}
html.etc-small #etcb .hbar .hav{width:30px;height:30px}
html.etc-small #etcb .hbar .hn{font-size:13.5px}
html.etc-small #etcb .hbar .clk{min-width:48px;padding:5px 6px;font-size:11px}
html.etc-small #etcb .etc-row{height:34px}
html.etc-small #etcb #hms{height:34px;padding:6px 8px;font-size:12.5px}
html.etc-small #etcb #next{padding:0 10px;font-size:12px}
html.etc-small #etcb .hsnd{width:34px!important;height:34px!important}
html.etc-small #etcb #hlive{height:30px;grid-template-columns:minmax(24px,50px) auto minmax(0,1fr) minmax(0,1fr) auto;gap:6px;padding:0 8px}
html.etc-small #etcb #hlive .lab,html.etc-small #etcb #hlive .caps small{display:none}

/* ---------- panel frame: the open dialog fills the frame; the frame is the stage's floating card ---------- */
html.etc-panel body{background:#16110d!important}
html.etc-panel dialog[open]{position:fixed!important;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;
  border-radius:0!important;border:0!important;box-shadow:none!important;transform:none!important;animation:none!important;box-sizing:border-box}
html.etc-panel dialog[open]{overflow-y:auto!important;overscroll-behavior:contain}
html.etc-panel dialog[open]>.dbody{min-height:0}
html.etc-panel dialog::backdrop{background:#16110d!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* no Doom imagery in the new brand: the Destiny cover art is the Doom character, the showcase canvas plays the shield's poses */
html.etc-panel .dest .dart{display:none!important}
html.etc-panel .dest{grid-template-columns:minmax(0,1fr)!important}
html.etc-panel .vdsa canvas{display:none!important}
html.etc-panel .vdsh,html.etc-panel .bhsh{filter:none!important}
html.etc-panel .pcard .pm{max-width:100%;box-sizing:border-box}
/* Slurp or Solve puzzle on the board: its label + chips fit the tracker row; the story hook lives in the Slurp section */
#etcb #hlive:has(.soshook){display:flex;align-items:center;gap:8px}
#etcb #hlive .soshook{display:none}
#etcb #hlive .soschips{display:flex;flex-wrap:nowrap;gap:4px;min-width:0;overflow:hidden}
#etcb #hlive .soschips span{font-size:10.5px;padding:2px 6px;white-space:nowrap;min-height:0;height:auto;background:none}
/* the tracker row drops its "X took" labels when the board is narrow, so the captured pieces always fit */
#etcb{container-type:size}
@container (max-width:600px){#etcb #hlive .caps small{display:none}#etcb #hlive .lab{display:none}#etcb #hlive{grid-template-columns:minmax(30px,70px) auto minmax(0,1fr) minmax(0,1fr) auto}}
@container (max-width:600px){#etcb #hlive .caps span em{font-size:0}#etcb #hlive .caps span em::before{content:"–";font-size:12px;color:#7d848c}}

/* ================= light skin (the twin and app shells): light cards, soft shadows, no dark chrome ================= */
html.etc-light #etcb{--ink:#33261a;--muted:#6e5d4c;--line:#eadcc8;--silver:#4a3b2c;--gold:#8a5a1e;--gold-hi:#6e4520}
html.etc-light #etcb .hbar{background:#fffbf5;border:1px solid #eadcc8;box-shadow:0 2px 8px rgba(58,38,20,.05)}
html.etc-light #etcb .hbar .hav{background:#f1e4d0}
html.etc-light #etcb .hbar .clk{background:#f1e4d0;color:#6e5d4c}
html.etc-light #etcb .hbar .clk.on{background:#33261a;color:#fffbf5}
html.etc-light #etcb .hbar .hjb{filter:drop-shadow(0 2px 3px rgba(58,38,20,.25))}
html.etc-light #etcb .hms{background:#f7efe2;border-color:#eadcc8;color:#4a3b2c}
html.etc-light #etcb .hms .n{color:#a08d79}
html.etc-light #etcb .hms .cur{background:#e4bd6a;color:#2a1d0f}
html.etc-light #etcb #next{background:#fffbf5;border:1px solid #dcc6a3;color:#6e4520;border-radius:999px}
html.etc-light #etcb #next:hover{background:#f5ebdc}
html.etc-light #etcb .hsnd{background:#fffbf5!important;border:1px solid #dcc6a3!important;color:#6e4520!important;box-shadow:none!important}
html.etc-light #etcb .hsnd[aria-pressed=false]{color:#a08d79!important}
html.etc-light #etcb #hlive{background:#f7efe2;border:1px solid #eadcc8}
html.etc-light #etcb #hlive .lab{color:#8a5a1e}
html.etc-light #etcb #hlive .lrow .mvn{color:#6e5d4c}
html.etc-light #etcb #hlive .lrow .mvn b{color:#33261a}
html.etc-light #etcb #hlive .mat{color:#6e5d4c;border-color:#dcc6a3}
html.etc-light #etcb #hlive .mat.up{color:#2f6b44;border-color:rgba(47,107,68,.45);background:rgba(47,107,68,.08)}
html.etc-light #etcb #hlive .mat.dn{color:#9a4b12;border-color:rgba(154,75,18,.4);background:rgba(154,75,18,.06)}
html.etc-light #etcb #hlive .caps small{color:#6e5d4c}
html.etc-light #etcb #hlive .caps span{background:rgba(58,38,20,.06)}
html.etc-light #etcb #hlive .caps span em,html.etc-light #etcb #hlive .caps span em::before{color:#a08d79}
html.etc-light #etcb .hbd{box-shadow:0 12px 30px rgba(58,38,20,.16),0 0 0 1px rgba(58,38,20,.14);border-radius:10px}
html.etc-light #etcb .soschips span{color:#4a3b2c;border-color:#dcc6a3}
/* flat squares: maple and walnut as flat colors, no grain (a8 is a light square) */
html.etc-flat #etcb .hbd{background:repeating-conic-gradient(#b98a5e 0 25%,#f0dcbc 0 50%) 0 0/25% 25%}
html.etc-flat #etcb .hbd .hco.l{color:#8a5f3a}
html.etc-flat #etcb .hbd .hco.d{color:#f6e8cf}
html.etc-flat #etcb .hbd .hp{filter:drop-shadow(0 .25cqw .2cqw rgba(0,0,0,.22))}

/* side layout: board left, a column beside it */
html.etc-side #etcb{flex-direction:row;align-items:stretch;justify-content:flex-start;padding:12px;gap:12px}
html.etc-side #etcb #board{align-self:center}
html.etc-side #etcb .etc-col{width:var(--ecw);flex:none;min-width:0;display:flex;flex-direction:column;gap:8px}
html.etc-side #etcb .hbar{width:100%;height:auto;min-height:54px;padding:6px 8px 6px 6px}
html.etc-side #etcb .hbar .hav{width:40px;height:40px}
html.etc-side #etcb .hbar .hn{font-size:15px}
html.etc-side #etcb #pbB{order:9}
html.etc-side #etcb #hms{flex:1 1 auto;min-height:60px;height:auto;width:100%;white-space:normal;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;row-gap:2px;padding:8px 8px;font-size:13.5px}
html.etc-side #etcb .etc-row{width:100%;height:38px}
html.etc-side #etcb #next{flex:1;justify-content:center}
html.etc-side #etcb #hlive{width:100%;height:auto;display:grid;grid-template-columns:1fr auto;grid-auto-rows:auto;gap:6px 8px;padding:9px 10px}
html.etc-side #etcb #hlive .lab{grid-column:1/-1}
html.etc-side #etcb #hlive .lrow{display:contents}
html.etc-side #etcb #hlive .lrow .mvn{grid-column:1}
html.etc-side #etcb #hlive .mat{order:0;grid-column:2;justify-self:end}
html.etc-side #etcb #hlive .caps{display:contents}
html.etc-side #etcb #hlive .caps>div{grid-column:1/-1}
html.etc-side #etcb #hlive .caps small{display:block;max-width:44%}
html.etc-side #etcb #hlive .caps span em{font-size:11px}
html.etc-side #etcb #hlive .caps span em::before{content:none}
html.etc-side #etcb #hlive .lpb{grid-column:1/-1}
html.etc-side #etcb #hlive:has(.soshook){display:flex;flex-direction:column;align-items:stretch}
html.etc-side #etcb #hlive .soschips{flex-wrap:wrap}

/* panel frame, light: the live dialogs keep their own code and layout; a tone map turns their dark ground light */
/* (the shell tone-maps the whole panel frame; Chromium ignores filters on top-layer dialogs) — images, video and the
   boards' wood and pieces are turned back so they keep their real colors */
html.etc-panel.etc-light dialog[open]{filter:invert(.92) hue-rotate(180deg) sepia(.1)}
html.etc-panel.etc-light dialog[open] :is(img,video,canvas,picture,iframe,[style*="url("]){filter:hue-rotate(180deg) invert(1)}
html.etc-panel.etc-light dialog[open] :is(img,video,canvas,picture,iframe,[style*="url("]) :is(img,video,canvas,[style*="url("]){filter:none}
html.etc-panel.etc-light body{background:#fffbf5!important}
/* a dark color-scheme in the frame makes the browser paint it opaque; the light skin is light all the way down */
html.etc-light{color-scheme:light!important}
html.etc-flat:not(.etc-side) #etcb #hlive .caps small{display:none}
/* the product has no capture tracker: the board, the players, the moves, Another game and sound */
html.etc-prod #etcb #hlive{display:none!important}
html.etc-prod #etcb{justify-content:center}
html.etc-side #etcb .hbar .hn,html.etc-side #etcb .hbar .hn small,html.etc-side #etcb .hbar .hn small *{white-space:normal;overflow:visible;text-overflow:clip}

/* ===== steel palette (the twin, Oct 30): prep's steel + gold, matching the road-sign logo ===== */
html.etc-steel.etc-light #etcb{--ink:#1b2733;--muted:#566373;--line:#d6dee7;--silver:#2a3a4a;--gold:#8a6514;--gold-hi:#6d4f0e}
html.etc-steel.etc-light #etcb .hbar{background:#fbfcfe;border-color:#d6dee7;box-shadow:0 2px 8px rgba(27,39,51,.05)}
html.etc-steel.etc-light #etcb .hbar .hav{background:#e0e8f0}
html.etc-steel.etc-light #etcb .hbar .clk{background:#e7edf3;color:#566373}
html.etc-steel.etc-light #etcb .hbar .clk.on{background:#1b2733;color:#fbfcfe}
html.etc-steel.etc-light #etcb .hms{background:#f1f5f9;border-color:#d6dee7;color:#2a3a4a}
html.etc-steel.etc-light #etcb .hms .n{color:#7d8a98}
html.etc-steel.etc-light #etcb .hms .cur{background:#3d6b94;color:#fff}
html.etc-steel.etc-light #etcb #next{background:#fbfcfe;border-color:#c4cfda;color:#2f5a80}
html.etc-steel.etc-light #etcb #next:hover{background:#e7edf3}
html.etc-steel.etc-light #etcb .hsnd{background:#fbfcfe!important;border-color:#c4cfda!important;color:#2f5a80!important}
html.etc-steel.etc-light #etcb .hsnd[aria-pressed=false]{color:#7d8a98!important}
html.etc-steel.etc-light #etcb .hbd{box-shadow:0 12px 30px rgba(27,39,51,.16),0 0 0 1px rgba(27,39,51,.12)}
html.etc-steel.etc-light #etcb .soschips span{color:#2a3a4a;border-color:#c4cfda}
/* blue-gray flat board, like his Lichess (a8 is a light square) */
html.etc-blue #etcb .hbd{background:repeating-conic-gradient(#8ca2ad 0 25%,#dee3e6 0 50%) 0 0/25% 25%}
html.etc-blue #etcb .hbd .hco.l{color:#6f8794}
html.etc-blue #etcb .hbd .hco.d{color:#eef2f4}
html.etc-blue #etcb .hbd .hsq{background:rgba(155,199,0,.41)}
html.etc-blue #etcb .hbd .hp{filter:drop-shadow(0 .25cqw .2cqw rgba(0,0,0,.22))}
/* the steel panel tone map: no warm sepia */
html.etc-panel.etc-light.etc-steel dialog[open]{filter:invert(.92) hue-rotate(180deg)}
html.etc-panel.etc-light.etc-steel body{background:#fbfcfe!important}
/* contrast: coordinates and move numbers on the steel board reach 4.5:1 */
html.etc-blue #etcb .hbd .hco.l{color:#4a6573}
html.etc-blue #etcb .hbd .hco.d{color:#22384a}
html.etc-steel.etc-light #etcb .hms .n{color:#5f6b78}
/* fix (Oct 30): the side-to-move pill read as blank when it was not your move; both states are explicit now */
html.etc-light #etcb .hbar .clk{transition:none!important;opacity:1!important;-webkit-text-fill-color:currentColor}
html.etc-steel.etc-light #etcb .hbar .clk{background:#fbfcfe!important;color:#2a3a4a!important;box-shadow:inset 0 0 0 1px #b9c6d3}
html.etc-steel.etc-light #etcb .hbar .clk.on{background:#1b2733!important;color:#fbfcfe!important;box-shadow:none}
/* featured games: master classics; Omar's own win as an occasional Easter egg */
#etcb .eggb{position:absolute;left:18px;top:18px;z-index:20;font:700 11px/1 var(--ui,sans-serif);letter-spacing:.06em;color:#1b2733;background:rgba(251,252,254,.94);border:1px solid #e3ae3a;border-radius:999px;padding:6px 10px;box-shadow:0 4px 12px rgba(27,39,51,.15);pointer-events:none}
#etcb .eggb b{color:#c98a00}
html.etc-small #etcb .eggb{left:10px;top:10px;font-size:10px;padding:5px 8px}
html.etc-wait #board,html.etc-wait #pbT,html.etc-wait #pbB,html.etc-wait .hms{opacity:0}