/* ITZA Chess - app.css. No external fonts or assets; system stack only.
   Chrome palette: deep warm charcoal (chess-room feel) with ITZA gold accents
   and play-green primaries. The board is the hero. */

/* ============================ palette ============================
   Premium blue system (2026-07-26 redesign, user-specified):
     Midnight Navy #0B192C  - primary actions, headline ink ("the black")
     Sapphire      #1E3E62  - selected / active states
     Slate         #8697A7  - sub-labels, borders, muted ink
     Ice White     #F4F7F6  - page background (light scheme, the default)
   The dark scheme keeps the same DNA: navy surfaces instead of warm charcoal.
   Gold survives only as the ITZA brand mark; green survives only where it is
   semantic (live/chain/win states), never decorative. */
:root{
  --chrome:#0A1524; --panel:#101F33; --elev:#182A42; --line:#24384F;
  /* --card was referenced in five places but never defined (bots.css even
     documents the hole and carries its own fallback) - the rules silently got
     a transparent background. It IS the panel surface; alias it so the
     "card background" the back buttons/chat/profile always intended actually
     renders, in both background modes. */
  --card:var(--panel);
  --ink:#E8EEF5; --ink2:#9FB0C3; --ink3:#71839A;
  --gold:#f5c711; --gold2:#ffd83d;
  --green:#81b64c; --green2:#95c25c;
  --navy:#0B192C; --sapphire:#1E3E62; --slate:#8697A7;
  /* text/border accent: sapphire on light, a lifted sapphire on dark so it
     still reads against navy surfaces */
  --accent:#7FA6D9;
  --danger:#e02828;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rad:10px;
  /* form-control surface, one notch above the card it sits on */
  --ctrl:#0D1B2E; --ctrl-line:#2A415C;
  /* focus ring: sapphire, soft and wide */
  --ring:0 0 0 3px rgba(30,62,98,.35);
  /* primary action button per scheme (class .btn.gold, name kept for wiring) */
  --primary:#1E3E62; --primary-hi:#2A5080; --primary-ink:#ffffff;
}
html[data-contrast="1"]{ --ink:#ffffff; --ink2:#d6d3cf; --ink3:#aaa6a1; --line:#5a554f; }
/* Light background option (Settings -> Background: light). Flips the app chrome
   to a light scheme; board themes, gold, and green accents are unchanged. */
html[data-bg="light"]{
  --chrome:#F4F7F6; --panel:#ffffff; --elev:#F1F5F9; --line:#E2E8F0;
  --ink:#0B192C; --ink2:#44566C; --ink3:#8697A7;
  --ctrl:#F8FAFC; --ctrl-line:#E2E8F0;
  --ring:0 0 0 3px rgba(30,62,98,.16);
  --primary:#0B192C; --primary-hi:#1E3E62; --primary-ink:#ffffff;
  --accent:#1E3E62;
}
html[data-bg="light"] body{ background:var(--chrome); }
html[data-bg="light"] #previewBoard,
html[data-bg="light"] .cboard,
html[data-bg="light"] .cboard3d{ box-shadow:0 2px 10px rgba(11,25,44,.14); }
html[data-bg="light"] .cboard3d{ background:radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #E8EDF2 72%); }
html[data-bg="light"] .clk.run{ background:#0B192C; color:#fff; }
html[data-bg="light"] .topbar{ box-shadow:0 1px 0 var(--line); }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--chrome); color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;   /* deep navy text renders crisper on macOS */
  -moz-osx-font-smoothing:grayscale;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{
  font:inherit;color:var(--ink);background:var(--ctrl);
  border:1px solid var(--ctrl-line);border-radius:10px;padding:8px 11px;outline:none;
  transition:border-color .12s, box-shadow .12s;
}
input[type=text],input[type=number],input[type=password],select{height:40px}
/* selects draw their own chevron - the native widget is what made the old
   dropdowns look dated. The arrow is an inline data URI (local, section 1
   compliant) in a neutral grey that reads on both schemes. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:28px;
  /* slate chevron for the dark scheme */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%239FB0C3' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
/* navy chevron on the light scheme */
html[data-bg="light"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%230B192C' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
input:hover,select:hover{border-color:var(--slate)}
input:focus,select:focus{border-color:var(--sapphire);box-shadow:var(--ring)}
html[data-contrast="1"] :focus-visible{outline:2px solid var(--gold);outline-offset:1px}
label{display:block;font-size:13px;color:var(--ink2);margin:10px 0 4px}
h1,h2,h3{margin:0;font-weight:700}
.grow{flex:1}

/* ============================ top bar ============================ */
.topbar{
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 14px;background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.pyr{height:30px;width:auto}
.pyr.lg{height:56px}
.brand{font-size:17px;letter-spacing:.2px}
.brand b{color:var(--gold)}
.pill{font-size:11px;padding:2px 9px;border-radius:99px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.pill.live{background:rgba(129,182,76,.18);color:var(--green2)}
.pill.demo{background:var(--elev);color:var(--ink3)}
/* rectangle with small corners (user-directed 2026-07-26) - the big pill
   surround is gone; the control surface matches the selects */
.chip{
  background:var(--ctrl);border:1px solid var(--ctrl-line);border-radius:8px;
  padding:5px 13px;font-size:13px;color:var(--ink2);
}
.chip:hover{color:var(--ink)}
.iconbtn{
  font-size:18px;color:var(--ink2);padding:6px 9px;border-radius:6px;line-height:1;
}
.iconbtn:hover{background:var(--elev);color:var(--ink)}

/* ============================ buttons ============================ */
.btn{
  background:var(--elev);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 18px;font-weight:600;color:var(--ink);
  transition:filter .12s, transform .05s, box-shadow .12s, border-color .12s;
}
.btn:hover{filter:brightness(1.08);border-color:var(--ink3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
/* primary: Midnight Navy, flat and expensive - the class NAME stays .gold so
   nothing re-wires, but green is gone from actions entirely (it survives only
   where it means something: live/chain/win states) */
.btn.gold{
  background:var(--primary);
  border-color:transparent;color:var(--primary-ink);
  box-shadow:0 1px 3px rgba(11,25,44,.16);
}
.btn.gold:hover{filter:none;background:var(--primary-hi);box-shadow:0 2px 5px rgba(11,25,44,.2)}
.btn.gold:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.btn.gold:disabled{box-shadow:none}
/* ghost buttons wear the same surface as the custom selects - soft control
   background, thin cool border, ink text - so secondary actions and inputs
   read as one family */
.btn.ghost{background:var(--ctrl);border-color:var(--ctrl-line)}
.btn.ghost:hover{background:var(--elev);border-color:var(--slate);filter:none}
.btn.danger{background:transparent;border-color:var(--danger);color:#ff7a6e}
.btn.wide{width:100%}
.btn.sm{padding:5px 12px;font-size:13px;border-radius:8px}

/* ============================ toggles ============================
   Checkboxes render as switches everywhere except the onboarding screen
   (which is a 1:1 port of ITZA Chat and keeps its own look). The INPUT is
   untouched - same element, same events, suites keep clicking it. */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:38px;height:22px;flex:none;border-radius:999px;cursor:pointer;
  background:var(--line);border:1px solid transparent;padding:0;margin:0;
  position:relative;transition:background .15s;
}
input[type=checkbox]::before{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .15s;
}
input[type=checkbox]:checked{background:var(--sapphire)}
input[type=checkbox]:checked::before{transform:translateX(16px)}
input[type=checkbox]:focus-visible{box-shadow:var(--ring)}
#screen-onboard input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:auto;height:auto}
#screen-onboard input[type=checkbox]::before{content:none}
.linklike{color:var(--ink3);text-decoration:underline;font-size:13px;margin-top:14px}
.linklike:hover{color:var(--ink)}

/* ============================ screens ============================ */
.screen{display:none;padding:22px 16px}
.screen.on{display:block}

/* ---------------- onboarding (ported from ITZA Chat, matched 1:1) ----------------
   Self-contained: the chat's own palette + rules are scoped to #screen-onboard
   so the sign-in looks identical to ITZA Chat without disturbing the rest of the
   chess UI. Light is the default; dark follows the app's html[data-bg]. */
#screen-onboard{
  --ob-blue:#0c7ffb; --ob-blue-soft:#1d6fd0; --ob-gold:#f5c711;
  --ob-acc:#0c7ffb; --ob-acc-ink:#ffffff;
  --ob-bg:#f3f4f6; --ob-bg2:#ffffff; --ob-bg3:#f7f7f8;
  --ob-ink:#0b2a4a; --ob-ink2:#1e416b; --ob-ink3:#41618c;
  --ob-line:#d7dbe2; --ob-line2:#c5ccd6; --ob-hover:rgba(12,127,251,.06);
  --ob-card-shadow:0 18px 50px rgba(24,59,103,.12);
  --ob-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ob-r-sm:8px;
}
html[data-bg="dark"] #screen-onboard{
  --ob-bg:#0b1f3a; --ob-bg2:#10294a; --ob-bg3:#173058;
  --ob-ink:#e8edf4; --ob-ink2:#9db0c7; --ob-ink3:#5b7089;
  --ob-line:#1e3a63; --ob-line2:#28466f; --ob-hover:rgba(255,255,255,.05);
  --ob-card-shadow:0 18px 50px rgba(0,0,0,.45);
}
#screen-onboard{padding:0}
#screen-onboard.on{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
  background:linear-gradient(to bottom,#ffffff 0,#ffffff 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
html[data-bg="dark"] #screen-onboard.on{
  background:linear-gradient(to bottom,#10294a 0,#10294a 200px,var(--ob-blue) 200px,var(--ob-blue) 224px,var(--ob-bg) 224px);
}
#screen-onboard .obcard{
  width:100%; max-width:430px; margin:0; text-align:left;
  background:var(--ob-bg2); border:1px solid var(--ob-line); border-radius:22px;
  padding:22px; box-shadow:var(--ob-card-shadow); color:var(--ob-ink);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#screen-onboard .hd{display:flex; align-items:center; gap:10px; margin-bottom:4px}
#screen-onboard .pyr{width:44px; height:auto}
#screen-onboard h1{font-size:19px; letter-spacing:.01em; font-weight:700}
#screen-onboard .tag{font-size:11.5px; color:var(--ob-ink2); margin-bottom:14px}
#screen-onboard .tag b{color:#8d6f00}
html[data-bg="dark"] #screen-onboard .tag b{color:var(--ob-gold)}
#screen-onboard .pill{font-size:9.5px; padding:1px 7px; border-radius:99px; border:1px solid var(--ob-line2); color:var(--ob-ink3); text-transform:uppercase; letter-spacing:.05em; font-weight:400}
#screen-onboard .pill.demo{border-color:var(--ob-gold); color:#8d6f00}
html[data-bg="dark"] #screen-onboard .pill.demo{color:var(--ob-gold)}
#screen-onboard label{display:block; margin:12px 0 4px; font-size:11.5px; color:var(--ob-ink2); font-weight:600; text-align:left}
#screen-onboard label .lbl2{color:var(--ob-ink3); font-weight:400}
#screen-onboard input,#screen-onboard textarea{
  width:100%; font:inherit; color:var(--ob-ink); background:var(--ob-bg3);
  border:1px solid var(--ob-line2); border-radius:var(--ob-r-sm); padding:6px 9px; outline:none;
}
#screen-onboard input:focus,#screen-onboard textarea:focus{border-color:var(--ob-acc)}
#screen-onboard ::placeholder{color:var(--ob-ink3)}
#screen-onboard .obtoggle{display:flex; gap:4px; margin-bottom:12px}
#screen-onboard .obtoggle button{flex:1; font-size:11.5px; padding:6px; border-radius:var(--ob-r-sm); border:1px solid var(--ob-line2); color:var(--ob-ink2); background:none; cursor:pointer}
#screen-onboard .obtoggle button.on{border-color:var(--ob-acc); color:var(--ob-ink); background:var(--ob-hover); font-weight:700}
#screen-onboard .row2{display:flex; gap:8px}
#screen-onboard .row2 .btn,#screen-onboard .row2 input{flex:1; min-width:0}
#screen-onboard .btn{
  background:linear-gradient(135deg,var(--ob-acc),var(--ob-blue-soft)); color:var(--ob-acc-ink);
  font-weight:700; font-size:12.5px; padding:8px 16px; border-radius:10px; border:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(12,127,251,.22);
}
#screen-onboard .btn:disabled{opacity:.45; cursor:default; box-shadow:none}
#screen-onboard .btn.ghost{background:var(--ob-bg3); color:var(--ob-ink); border:1px solid var(--ob-line2); font-weight:600; box-shadow:none}
#screen-onboard .btn.gold{background:var(--ob-gold); color:#231c00; box-shadow:none}
#screen-onboard .btn.wide{width:100%}
#screen-onboard .feenote{font-size:10px; color:var(--ob-ink3); text-align:left; margin-top:0}
#screen-onboard .feenote b{color:var(--ob-ink2)}
#screen-onboard .linklike{display:block; margin:14px auto 0; background:none; border:none; color:var(--ob-blue); font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
#screen-onboard .qrframe{display:flex; justify-content:center; margin:6px 0 2px}
#screen-onboard #obQrBox{width:190px; height:190px; border-radius:12px; background:#fff; border:1px solid var(--ob-line); display:flex; align-items:center; justify-content:center; position:relative}
#screen-onboard #obQrBox .qrph{font-family:var(--ob-mono); font-size:34px; color:var(--ob-line2); letter-spacing:2px}
#screen-onboard #obQrBox svg{width:100%; height:100%; display:block; border-radius:10px}
#screen-onboard .keybox{font-family:var(--ob-mono); font-size:10.5px; background:var(--ob-bg3); border:1px dashed var(--ob-line2); border-radius:var(--ob-r-sm); padding:8px; word-break:break-all; user-select:all; color:var(--ob-ink)}
#screen-onboard .savekey{display:flex; gap:8px; align-items:flex-start; margin-top:9px; font-size:11.5px; color:var(--ob-ink2)}
#screen-onboard .savekey input{width:auto; margin-top:2px}
#screen-onboard .settingsec{border-top:1px solid var(--ob-line); margin-top:12px; padding-top:10px}
#screen-onboard .settingsec h4{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ob-ink3); margin-bottom:6px}
#screen-onboard .spinner{display:inline-block; width:13px; height:13px; border:2px solid var(--ob-line2); border-top-color:var(--ob-blue); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:4px}

.mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.mbtns .wide{flex:1}

/* ---------------- home ---------------- */
.homegrid{
  display:flex;gap:34px;justify-content:center;align-items:center;
  max-width:980px;margin:4vh auto 0;flex-wrap:wrap;
}
.homeboard{width:min(480px,92vw);flex:0 1 auto}
#previewBoard{width:100%;border-radius:6px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.45)}
.homemenu{display:flex;flex-direction:column;gap:14px;width:min(330px,92vw)}
.menubtn{
  text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;transition:filter .12s, transform .05s;
}
.menubtn:hover{filter:brightness(1.15)}
.menubtn:active{transform:translateY(1px)}
.menubtn b{display:block;font-size:18px;margin-bottom:2px}
.menubtn span{color:var(--ink2);font-size:13px}
.menubtn.gold{background:var(--primary);border-color:transparent;box-shadow:0 1px 3px rgba(11,25,44,.16)}
.menubtn.gold:hover{background:var(--primary-hi);filter:none}
.menubtn.gold b,.menubtn.gold span{color:#fff}
.menubtn.gold span{opacity:.85}

/* ---------------- lobby ---------------- */
/* 684px: exactly wide enough that Create's four fields, the Rated switch and
   the action share ONE row - the button then sits on the dropdowns' axis */
.lobbywrap{max-width:684px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.lobbyhead{display:flex;align-items:center;gap:12px}
.lobbyhead h2{font-size:21px;letter-spacing:-.01em}
.lobbyrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--accent);border-radius:var(--rad);
  padding:10px 14px;font-size:13.5px;color:var(--ink2);
}
/* cards: pure white on ice white, razor-thin cool border, and a flat TIGHT
   grounding shadow - no floating-on-clouds blur */
.lobbycard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 3px rgba(11,25,44,.04);
}
/* card titles as quiet overlines; the CONTROLS become the hero of each card.
   The extra bottom margin lets the title breathe as a real header. */
.lobbycard h3{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:20px;color:var(--ink3);
}
/* flex-end + equal 40px control heights = every button sits on the exact
   centre axis of the dropdown row; the tightened gap keeps full rows (Create's
   four fields + action) on ONE line at the card's 640px width */
.newgame{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
/* field labels: micro-overlines above equal-height controls, so every row
   shares one baseline. The children reset the inherited caps/size so option
   text ("3+2 blitz") stays as typed. */
.newgame label{
  margin:0;display:flex;flex-direction:column;gap:6px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);
}
.newgame label select,.newgame label input{
  font-size:14px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--ink);
}
/* a checkbox label is a ROW (switch beside its word), sharing the controls'
   40px lane - :has() so the classless Quick Match label gets it too */
.newgame .cklbl,.newgame label:has(>input[type=checkbox]){
  flex-direction:row;align-items:center;gap:8px;height:40px;padding-bottom:0;align-self:flex-end;
}
/* the primary action holds the row's right edge, wrapped or not */
.newgame .btn.gold{height:40px;padding-top:0;padding-bottom:0;margin-left:auto}
.newgame>span{color:var(--ink2)}
/* wager amount: the input and its currency suffix share one 40px line under
   the AMOUNT overline (the bare text nodes used to wrap around the input) */
.amtline{display:inline-flex;align-items:center;gap:8px}
.amtline input{width:110px}
.amtsuffix{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--ink3)}
/* private-challenge row: one full-width address field under the option row */
.ngInviteRow{margin-top:12px}
.ngInviteRow label{
  display:flex;flex-direction:column;gap:6px;margin:0;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);
}
.ngInviteRow input{width:100%;font-family:var(--mono);font-size:12.5px;text-transform:none;letter-spacing:normal}
/* the card-bottom Create: full width, clearly the LAST step */
.ngCreateBtn{margin-top:16px}
/* the duplicated on-page score line is gone - identity + ladders live in the
   header chip alone (kept in the DOM for the suites; visually retired) */
.lobbyMe .rgroup{display:none}
/* prose + action rows (Events): the text takes the slack and wraps INSIDE its
   own box, so the button stays on the same line, centred on the text block */
#evCard .newgame{align-items:center}
#evTeaser{flex:1;min-width:240px}
#evCard .newgame .grow{flex:0}   /* the teaser owns the slack, not the spacer */
/* A lobby row is a player's public face: name on its own line with all three
   ladders beneath. align-items:flex-start keeps the clock/tags/button pinned
   to the top of that two-line block instead of floating to its middle, and
   the pill group is allowed to wrap as a whole (never mid-pill) if a very
   narrow screen demands it. */
.openRow{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px;
  border-radius:8px;
}
.openRow .rgroup{flex-wrap:wrap;white-space:normal;row-gap:4px}
.openRow .opTc,.openRow .opTags,.openRow .btn{margin-top:2px}
.openRow:hover{background:rgba(245,199,17,.07)}
.openRow:last-child{border-bottom:none}
.opWho{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}  /* name line, then the rating group - never side-by-side, never colliding */
.opName{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.opElo{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);background:rgba(245,199,17,.18);border:1px solid rgba(245,199,17,.5);border-radius:10px;padding:1px 8px}
.opTc{font-family:var(--mono);color:var(--accent);font-weight:600}
.opTag{display:inline-block;font-size:11px;color:var(--ink2);border:1px solid var(--line);border-radius:9px;padding:1px 7px;margin-right:4px}
.opTags{color:var(--ink3);font-size:12.5px;flex:1}
.mvEmpty{color:var(--ink3);font-size:13px;padding:8px 2px}
/* inside the move list the empty state fills the box and reads deliberate,
   not like a stranded fragment in the top-left corner */
#moveList .mvEmpty{width:100%;text-align:center;padding:22px 0;font-style:italic}

/* ---------------- game layout ---------------- */
.gamewrap{
  display:flex;gap:20px;justify-content:center;align-items:flex-start;
  max-width:1100px;margin:0 auto;
}
body.layout-left .gamewrap{flex-direction:row-reverse}
.boardcol{
  width:min(92vw, calc(100vh - 215px), 660px);
  display:flex;flex-direction:column;gap:6px;position:relative;
  padding:0 0 14px 2px;
}
.boardrow{display:flex;gap:8px;align-items:stretch}
#board{flex:1}
.playerbar{
  display:flex;align-items:center;gap:10px;padding:2px 2px;min-height:34px;
}
.pname{font-weight:600;font-size:15px}
.clk{
  font-family:var(--mono);font-size:20px;font-weight:700;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:3px 12px;color:var(--ink3);min-width:86px;text-align:center;
}
.clk:empty{display:none}
.clk.run{background:#f4f4f2;color:#161513;border-color:transparent}
.clk.low{background:var(--danger);color:#fff;border-color:transparent}

#confirmBar{
  display:none;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  background:var(--panel);border:1px solid var(--accent);border-radius:10px;
  padding:12px 16px;z-index:25;gap:10px;align-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5);font-weight:600;
}
#confirmBar.on{display:flex}

#waitOverlay{
  display:none;position:absolute;inset:0;z-index:24;
  background:rgba(38,36,33,.72);backdrop-filter:blur(2px);
  align-items:center;justify-content:center;border-radius:6px;
}
#waitOverlay.on{display:flex}
.waitbox{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:26px 34px;font-weight:600;
}
.spin{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--elev);border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- side panel ---------------- */
.panel{
  width:330px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;
  max-height:calc(100vh - 100px);
}
/* Header row: status takes the flexible space (min-width:0 so it can shrink
   instead of pushing the buttons out); the gear/close stay pinned top-right.
   Inside the status, .slSeg phrases are unbreakable and separated by dots
   drawn in CSS, so a narrow panel breaks BETWEEN phrases ("White to move"
   drops to its own line whole), never mid-phrase. */
.panelhead{display:flex;align-items:flex-start;gap:6px;min-height:30px}
.panelhead .iconbtn{flex:0 0 auto}
#statusLine{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink2);font-weight:600;line-height:1.45;padding-top:3px}
#statusLine .slSeg{white-space:nowrap}
#statusLine .slSeg + .slSeg::before{content:"-";margin:0 5px;color:var(--ink3)}
#statusLine .refBadge{margin-right:6px;vertical-align:1px}
#drawBar{display:none;background:var(--elev);border-radius:6px;padding:8px 10px;font-size:13px;align-items:center;gap:8px}
#drawBar.on{display:flex}
#capturedBar{display:flex;flex-direction:column;gap:2px}
.capRow{display:flex;align-items:center;min-height:20px}
.capLbl{font-size:10px;color:var(--ink3);width:14px;font-weight:700}
.capP{width:19px;height:19px;display:inline-block;margin-left:-5px}
.capP svg{width:100%;height:100%}
.capScore{font-size:12px;color:var(--ink2);margin-left:6px;font-family:var(--mono)}
#moveList{
  flex:1;min-height:120px;overflow-y:auto;
  background:var(--chrome);border-radius:6px;padding:8px 10px;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px 4px;
  font-size:14px;
}
.mvno{color:var(--ink3);padding:2px 0 2px 4px;font-family:var(--mono);font-size:12.5px}
.mv{padding:2px 7px;border-radius:4px;cursor:default;font-weight:600}
.mv.cur{background:var(--elev);color:var(--gold2)}
.aids{display:flex;gap:16px;font-size:13px;color:var(--ink2)}
.aids label{display:flex;align-items:center;gap:6px;margin:0}
.ctrls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

#gameMsg{display:none;background:var(--elev);border-radius:10px;padding:14px;text-align:center}
#gameMsg.on{display:block}
.endHead{font-size:20px;font-weight:800;color:var(--accent)}
.endSub{color:var(--ink2);font-size:13px;margin:2px 0 12px;text-transform:capitalize}
.endBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---------------- review ---------------- */
#reviewBox{display:none;flex-direction:column;gap:8px;min-height:0}
#reviewBox.on{display:flex}
.revHead{font-weight:700}
.revProg{font-size:13px;color:var(--ink2)}
.revTime{color:var(--ink3);font-size:11.5px}
.revRows{overflow-y:auto;max-height:240px;display:flex;flex-direction:column}
.revRow{
  display:flex;align-items:center;gap:8px;padding:4px 8px;
  border-left:3px solid transparent;border-radius:4px;cursor:pointer;font-size:13.5px;
}
.revRow:hover{background:var(--elev)}
.revRow.sel{background:var(--elev)}
.rvNo{color:var(--ink3);font-family:var(--mono);font-size:12px;min-width:34px}
.rvSan{font-weight:700;min-width:52px}
.rvBadge{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.3px}
.rvBest{color:var(--ink3);font-size:12px;margin-left:auto}
.revRow.brill{border-left-color:#26c2a3}.rvBadge.brill{background:rgba(38,194,163,.18);color:#3fd9bb}
.revRow.best{border-left-color:var(--green)}.rvBadge.best{background:rgba(129,182,76,.18);color:var(--green2)}
.revRow.exc{border-left-color:#a3c65b}.rvBadge.exc{background:rgba(163,198,91,.15);color:#b5d472}
.revRow.good{border-left-color:#8f8c88}.rvBadge.good{background:rgba(143,140,136,.16);color:var(--ink2)}
.revRow.inac{border-left-color:#f7c045}.rvBadge.inac{background:rgba(247,192,69,.16);color:#ffd062}
.revRow.mist{border-left-color:#ff9800}.rvBadge.mist{background:rgba(255,152,0,.16);color:#ffb547}
.revRow.blun{border-left-color:#fa412d}.rvBadge.blun{background:rgba(250,65,45,.16);color:#ff6f5e}

/* ---------------- eval bar ---------------- */
#evalWrap{display:flex;flex-direction:column;align-items:center;gap:5px;width:24px}
#evalTrack{
  flex:1;width:13px;background:#141312;border:1px solid var(--line);border-radius:7px;
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
}
#evalFill{width:100%;height:50%;background:#efefec;transition:height .5s ease}
#evalNum{font-family:var(--mono);font-size:10px;color:var(--ink2);min-height:12px}

/* ============================ the board ============================ */
.cboard{
  position:relative;aspect-ratio:1/1;width:100%;user-select:none;
  touch-action:none;border-radius:5px;overflow:visible;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.cb-squares{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  border-radius:5px;overflow:hidden;
}
.cb-sq{position:relative}
.cb-sq::after{content:'';position:absolute;inset:0;pointer-events:none}
.cb-sq.sel::after{background:rgba(255,235,59,.5)}
.cb-sq.pre::after{background:rgba(35,120,255,.4)}
.cb-sq.chk::after{background:radial-gradient(circle,rgba(224,40,40,.9) 18%,rgba(224,40,40,0) 68%)}
.cb-sq.dot::after{
  inset:36%;border-radius:50%;background:rgba(20,18,16,.28);
}
.cb-sq.badtarget::after{
  inset:0;border-radius:0;background:rgba(224,40,40,.55);
  animation:badflash .42s ease-out;
}
@keyframes badflash{from{opacity:1}to{opacity:0}}
.cb-sq.cap::after{
  inset:3%;border-radius:50%;border:5px solid rgba(20,18,16,.28);background:none;
}
html[data-contrast="1"] .cb-sq.dot::after{background:rgba(0,0,0,.5)}
html[data-contrast="1"] .cb-sq.cap::after{border-color:rgba(0,0,0,.5)}

.cb-pieces{position:absolute;inset:0;pointer-events:none;z-index:3}
.cb-piece{
  position:absolute;left:0;top:0;width:12.5%;height:12.5%;
  will-change:transform;
}
.cb-piece svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.cb-piece.drag{z-index:12;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));transition:none!important}

.cb-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
/* Hint/user arrows are drawn twice: a light casing underneath, then the
   colour on top. Without the casing a green arrow disappears into the
   teaching overlay's green dots (reported) and into green board themes. */
.arrcase{stroke:rgba(255,255,255,.9);stroke-linecap:round}
.arrhcase{fill:rgba(255,255,255,.9);stroke:rgba(255,255,255,.9);stroke-linejoin:round}
.arr{stroke:#2f9e2a;stroke-linecap:round}
.arrh{fill:#2f9e2a}
/* teaching overlay is up: the red->green dot palette can never be blue, so
   the arrow moves out of its hue range entirely and stays unmistakable */
.arr.onteach{stroke:#0b57d0}
.arrh.onteach{fill:#0b57d0}
.arrcase.onteach,.arrhcase.onteach{stroke:rgba(255,255,255,.95)}
.arrhcase.onteach{fill:rgba(255,255,255,.95)}
.arr.user{stroke:#e08a00}
.arrh.user{fill:#e08a00}

.cb-coords{position:absolute;inset:0;pointer-events:none;z-index:4;font-family:var(--mono)}
.cb-coord{position:absolute;font-size:11px;font-weight:700;color:var(--ink3)}
.cb-coord.file.in{bottom:1%;transform:translateX(-2%)}
.cb-coord.rank.in{left:1.6%}
.cb-coord.file:not(.in){top:calc(100% + 3px);transform:translateX(-50%)}
.cb-coord.rank:not(.in){left:-15px;transform:translateY(-50%);margin-top:0}
.cb-coord:not(.in){color:var(--ink3)}

.cb-promo{
  position:absolute;width:12.5%;z-index:20;flex-direction:column;
  background:#f4f4f2;border-radius:5px;box-shadow:0 6px 24px rgba(0,0,0,.55);
  overflow:hidden;
}
.cb-promo button{width:100%;aspect-ratio:1/1;padding:4%}
.cb-promo button:hover{background:var(--sapphire)}
/* close X on the floating explanation card (teaching / learner / puzzles /
   post-mortem - one card system, one control). Drawn in CSS: two bars, no
   glyph, so the ASCII-only text rule stays untouched. The hidden card comes
   back by tapping its anchor square (board.js remembers it). */
.cb-teachpop .tpbody{position:relative;padding-right:30px}
.cb-teachpop .tpclose{
  position:absolute;top:6px;right:6px;width:20px;height:20px;flex:none;
  border:none;border-radius:6px;background:transparent;cursor:pointer;padding:0;
}
.cb-teachpop .tpclose:hover{background:var(--elev)}
.cb-teachpop .tpclose::before,
.cb-teachpop .tpclose::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;
  background:var(--ink3);border-radius:1px;
}
.cb-teachpop .tpclose::before{transform:translate(-50%,-50%) rotate(45deg)}
.cb-teachpop .tpclose::after{transform:translate(-50%,-50%) rotate(-45deg)}
.cb-teachpop .tpclose:hover::before,.cb-teachpop .tpclose:hover::after{background:var(--ink)}
.cb-promo svg{width:100%;height:100%;display:block}

/* ============================ 3D board ============================ */
.cboard3d{
  position:relative;aspect-ratio:1/1;width:100%;user-select:none;
  touch-action:none;border-radius:8px;overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  background:radial-gradient(120% 100% at 50% 0%, #35322e 0%, #1c1a18 70%);
}
.cboard3d canvas{display:block;width:100%!important;height:100%!important}
.c3-promo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:6px;z-index:20;background:#f4f4f2;border-radius:8px;
  padding:8px;box-shadow:0 8px 30px rgba(0,0,0,.55);
}
.c3-promo button{width:56px;height:56px;border-radius:6px}
.c3-promo button:hover{background:var(--sapphire)}
.c3-promo svg{width:100%;height:100%;display:block}

/* ============================ modal / scrim / toasts ============================ */
.scrim{
  display:none;position:fixed;inset:0;z-index:60;
  background:rgba(10,9,8,.62);align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:6vh 14px;
}
.scrim.on{display:flex}
.modal{
  width:min(460px,94vw);background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:22px;
  box-shadow:0 14px 50px rgba(0,0,0,.6);
}
.mhead{font-size:18px;font-weight:700;margin-bottom:6px}
.modal select,.modal input[type=text],.modal input[type=number]{width:100%}
.lvlRow{display:flex;align-items:center;gap:12px}
.lvlRow input{flex:1}
.lvlRow span{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);min-width:20px;text-align:center}
.setList{display:flex;flex-direction:column}
.setRow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.setRow:last-child{border-bottom:none}
.setRow select{width:auto;min-width:120px}
.setRow input[type=text]{max-width:220px}
.setRow input[type=number]{width:90px}
.setRow input[type=range]{width:140px}
/* settings checkboxes inherit the app-wide switch look */
/* account modal */
.acctIdent{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.acctIdent .chipAv{width:38px;height:38px;border-radius:10px;flex:none}
.acctWho{flex:1;min-width:0}
.acctName{font-weight:700;font-size:15px}
.acctReg{font-weight:400;font-size:12px;color:var(--ink2)}
.acctAddr{font-family:var(--mono);font-size:11px;color:var(--ink2);word-break:break-all;line-height:1.4}
.acctSect{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink2);margin:14px 0 2px;display:flex;align-items:center;gap:8px}
.acctTest{font-size:10px;font-weight:700;color:#64748B;border:1px solid transparent;
  border-radius:4px;padding:1px 5px;letter-spacing:.04em}
.acctTest:empty{display:none}
.acctVal{font-family:var(--mono);font-weight:700;margin-left:auto}
.acctVal+button{margin-left:10px}
.acctNote{font-size:12px;color:var(--ink2);padding:4px 0;min-height:1em}
.acctNote:empty{display:none}
.logBar{display:flex;gap:6px;margin:2px 0 8px}
.logBar input{flex:1 1 auto;min-width:0}
.logPre{
  max-height:50vh;overflow:auto;background:var(--chrome);border-radius:6px;
  padding:10px;font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-all;
}

#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  background:var(--elev);border:1px solid var(--line);color:var(--ink);
  border-radius:99px;padding:9px 20px;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 22px rgba(0,0,0,.45);animation:tin .18s ease;max-width:88vw;
}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================ history ============================ */
.histwrap{max-width:760px;margin:0 auto}
.histhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.histhead h2{font-size:20px}
.histstats{font-size:12.5px;color:var(--ink2);font-family:var(--mono)}
#histList{display:flex;flex-direction:column;gap:8px}
.histcard{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;cursor:pointer;transition:filter .12s,transform .05s;
}
.histcard:hover{filter:brightness(1.08)}
.histcard:active{transform:translateY(1px)}
.hcThumb{width:52px;height:52px;flex:none;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hcThumb .miniboard{width:100%;height:100%;display:block}
.hcMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hcTop{display:flex;align-items:center;gap:8px}
.rbadge{font-size:11px;font-weight:800;letter-spacing:.5px;padding:2px 9px;border-radius:99px}
.rbadge.win{background:rgba(129,182,76,.2);color:var(--green2)}
.rbadge.loss{background:rgba(224,40,40,.16);color:#ff7a6e}
.rbadge.draw{background:var(--elev);color:var(--ink2)}
.hcElo{font-size:12px;font-weight:700;font-family:var(--mono)}
.hcElo.up,.up{color:var(--green2)}
.hcElo.dn,.dn{color:#ff7a6e}
.hcOpp{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcMeta{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcDate{font-size:12px;color:var(--ink3);flex:none;text-align:right;font-family:var(--mono)}
.endElo{font-family:var(--mono);font-size:15px;font-weight:700;margin:4px 0 10px}

.histdetail{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.hdBoardCol{width:min(92vw,440px);flex:0 1 auto;display:flex;flex-direction:column;gap:6px}
#histBoard{width:100%}
.hdNav{display:flex;align-items:center;gap:6px;margin-top:4px}
.hdPly{font-family:var(--mono);font-size:13px;color:var(--ink2);min-width:56px;text-align:center}
.hdInfoCol{flex:1;min-width:240px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.hdTitle{font-size:20px;font-weight:800;color:var(--accent)}
.hdSubtitle{color:var(--ink2);font-size:13px;text-transform:capitalize;margin-bottom:10px}
.hdRow{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.hdRow:last-of-type{border-bottom:none}
.hdRow span{color:var(--ink2)}
.hdMoves{
  margin-top:10px;background:var(--chrome);border-radius:6px;padding:8px 10px;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px 4px;font-size:14px;
  max-height:200px;overflow-y:auto;
}
html[data-bg="light"] .hdMoves{background:var(--elev)}

/* ============================ responsive ============================ */
@media (max-width:920px){
  .gamewrap{flex-direction:column;align-items:center}
  body.layout-left .gamewrap{flex-direction:column}
  .panel{width:min(92vw,660px);max-height:none}
  .boardcol{width:min(94vw, calc(100vh - 265px), 660px)}
  .homegrid{margin-top:2vh}
}
@media (max-width:520px){
  .screen{padding:14px 8px}
  .clk{font-size:17px;min-width:74px}
  .newgame{gap:10px}
  /* ultra-narrow: let each field take a full share of the row instead of the
     centred containers squeezing the dropdowns down to slivers */
  .newgame label:not(.cklbl):not(:has(>input[type=checkbox])){flex:1 1 44%;min-width:0}
  .newgame label select{width:100%;min-width:0}
  .newgame .btn.gold{flex:1 1 100%}
}

/* ============================ learn (tutorials) ============================ */
.learnwrap{max-width:820px;margin:0 auto}
.learntabs{display:flex;gap:6px;margin-bottom:8px}
.ltab{flex:0 0 auto;padding:7px 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font:inherit;font-weight:600;cursor:pointer}
.ltab.on{border-color:var(--accent);color:var(--ink);background:var(--elev)}
.learntag{font-size:12.5px;color:var(--ink3);margin-bottom:12px}
#lessonList{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lessoncard{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:filter .12s,transform .05s}
.lessoncard:hover{filter:brightness(1.08)}
.lessoncard:active{transform:translateY(1px)}
.lcName{font-size:15px;font-weight:700}
.lcSub{font-size:11.5px;color:var(--ink3);font-weight:600;margin:1px 0 6px;text-transform:uppercase;letter-spacing:.4px}
.lcBlurb{font-size:12px;color:var(--ink3);line-height:1.4}
.lsextended{font-size:13px;color:var(--ink2);line-height:1.55;background:var(--chrome);border-radius:8px;padding:11px 13px;margin-top:10px}
html[data-bg="light"] .lsextended{background:var(--elev)}


/* ============================ app background patterns ============================
   Ported from ITZA Chat: a pyramid watermark, or ITZA-paired chess phrases (ITZA
   in the opposite colour, alternating yellow/blue). data-bgpat is separate from
   data-bg (the light/dark theme). */
html[data-bgpat="pyramids"] body{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22470%22%3E%3Cdefs%3E%3Cimage%20id%3D%22p%22%20href%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAGAAAABNCAYAAABZqmHQAAAw40lEQVR42u29d7RlV3Xm%2B1tr733OPjnee24OlZNKQiohBEglEQy2wRhsydhuYwM2brfbaTj79Wip2s9%2BduMO7kAbN9HYIKtAEhIIA4JSCZSzVCVVrro5nZz22WGt9f64Ij083CQJMR7rrzvOuOnMb865vm%2FNb%2B0DP6DLGOQ%2F9%2FUP1wsS%2FOssgMHKW%2F54sPHzP%2FH1r%2F1wPc%2Frkfde5gB4j179LtM%2FaKL1lw2Cx15%2F%2BQ9BeCEy%2F8hBG2DwwFVvip69XKvonYGJ3mqi45cs9h%2F5hSkAc%2FMPQXhegx8887NXho%2Ft81T%2FOh2Fv62V%2BrXIDN5kwicvfsKYx%2FOblXDDD8yeYP%2Bg9HwhDkfe6T%2FaJlqf%2FYS9fdaNYiNayqyUYsPS8ZHI3hJdHD7567caY36UG0VgjBFCCPNif28v%2BkwxN19nCXFYmd5Hx2LhPXfaU7lRlRpVlozJ6OytdI4%2FhCS0VWI0ckZT16jF139M%2FGlCc1hIY4z4IQDfVebfIMX1h5Uxt5RU428%2FI0eC7VFuTAkrY4WP34PwXJr3PkXziWNYlrBV4eWhlW7%2FZLj6ur8R19uKu6%2BxED8E4DsMvhFwCGPOu6p%2Fxy3WeGm%2FSmyLrNi05T%2F8OIO1s6jhncTihujxx%2FAW%2B0hnq6PiPx7Z7plfDTu%2Fe6O49mhk9EH7hwB8%2ByJLwPVSCKlV7y%2F%2FwUpuuzqKfjMS7p%2FYaqMH9SNYO7YRra9x%2FoJhoCI4cydBI0IkdlpKXB7Z6sgNQe%2FPflWIo5ExN9g%2FBODbWgctIQ6rsP9v%2F9pKNd4S9e6KpPWUDS5S%2FRNqcjvIKZQpMzpmWFgR9KoN5MZfo7snBOm8paJRZfmffU8Yvu8nhDj0ogVBvviy%2F6AtxNEoaP%2FqH9uJud%2BMehciGWvYYvBF1BOvQKPxOxmEJbAKeYoVw%2FAIrK9YtM8%2Bib%2F0D%2BiuEZT2CeMbITt%2Fd1NgDl%2BxCcLN1g8B%2BJc3XVuIo5Hf%2Bq23OWLlz1X92UjKDUuYaVqffgAVKYJGklQljR3XaG%2BRZhtSWYEVM8w%2F4eCfP0H32c%2BBvyRN6WVG9HoJq%2FXhWzxzZEaI69WLTS3LF1fmH4o87w9eZ8sL71etR5URA0smJsSpDz%2BCcgcEdpHqhYh4eRxMCh2lUF2Q2qC1QTgRG6ckVvUZGk8fRcq2VMWXKNk%2BPua0%2F%2FoOY5pFIQ6rF5NQky%2BO4F9nbW6W%2F%2B1ip3viZrVxj2WynrALiOP%2FuIQftige2EJ9zWbk0m0ELQ%2BvHRKFDpkxwDbki5JUztBVmoVnJfbieepPP4WdtKwo%2F8rIaj2xT%2FV%2B41ZjTGyTXb04NML3HYCbnxNaffNXk6pz7%2B2sfCkrdEPbKSWX7%2B7RfuYCO68q0rrQpThWwPQHBL6mtdQgntBEXYgiyBagOGRhQgiUoVsXeI8%2BQvPsAnYmZYexSyKrdfTqyP%2F1vxPC0nD9i0Koye9v5t8gr7vusF5bO5Z2eo%2FdIueOTEVWQ9lZx9p4XHPuC01e8uYi9VVDqjJMNNBEChwrJDdkgRTYeVCWpNmGdgPKZUk6Jxg4YFkR9c99kd7aMk5lwg71jshuff5nlLrhr4U4rOAa6%2F%2B3AGxy%2FUPi8PVGlrO%2F9zHbPHggVOtRPGdZvQXDmTv6XPbmUZbPG0KRRjoO6ckhgmaPcGCT270Nodp01kB5htVzGq0MritIZw21FYM1boPxWbrtKKEXYk9M2FGvF8nGx38z6L%2F7j18MGuH7AoABscn1Udf979f8jVx%2B%2Bg0bnzobSce2tXA4eSfsedUQxopjJ7JM7MgTKAsjHZobHu7IMKo%2FIFRJcgVIpiBdALeoqbcUOoTdFwk6LUX5cklQb7F8%2B%2BfRUQ45Mmup9nzkeB%2F7c9%2B89xe%2B3xrh%2BwLAo49cZgtxNDLdH%2Fn34dLcLz%2F6%2FqUobEnbTkkaD1iMzwqi0MerB2Sygo0Lbax4nNaFKqOXX4Qdd%2Bgtd4h6hvPnBXYMCkWBYyDQQFLQaUhKOY3yNdltFvUnz1H9%2FHFk4heEmfxFS3uPKbv64fd73gde9%2F0EQb7wreegfeDAo6Hx3vguvbp86PGPnY0KJcseuUhw7AvQWvKIjyVYPhthJQqIWJ64a9NdWCZRsPCWFvDWmxgVkXAtRmZACYinDf0BpF2IZQ3Kgu6qRWfOEPQUuT0W1YfvovHkM9j264Qu%2F5igfZ8TC2662Tc3Xfr9EmryhQ6%2BEEcjE17%2Fxv7i0t8cv%2B2Empw01pYrDcdOOqyeDYmNWnS7MXKjBZxkAkQMbSRKOyTKFeL5POiQRCWDTiQRgQFl6LYNuSHIpWHjGQhThlQBbEfgZsFJaURZMnfLe%2Bievx07npGqlNSy%2BsWs1T78yb75wvSmUHthNcIL9seOHHku%2BMG7rqBX%2Fdjn3vMMnXokRq%2BSYq4jOPmgzxUvh8aGxrIlQzNFglDgDRQhSWL5Etq3sVMZascXsIvT2I7Cihn63U0GRBwSk4KhcfBXDL2MQETgxsFEhsyEIb9NcfL9H6I318RJp2UURsqqfnoi7r339nr9vTk4ZF5IEOQLk%2FnXWddeezQyrV%2Ffgeh88kv%2F%2B6lUc2FgYo6UG6uCR%2B4wHHyNpNu3mNyeRqIZDCKUCumvt8hWsriZOE4pS%2BN8jdLlFyH8FjqKkZkQpIYFyQx4LfB8SA1JxkoGK5KkL4rRXoS4C27MUJyWuOUBZ%2F7uIYL2MHJ2nxWlhiIZ3LU%2Fmzp%2BM3zlGPyF0Qjy%2BQ%2F%2BDVKIw8osvaFM1rvtwqcerjSfqKoto8jkmOD%2Bz2iueY1FrWbwjUtmOE0sV8IWAltEjOwZpre0RjTo0V1YxHEFiVwC1c%2FTWZxn47yhMGWRHpZEPvQ2QGFodgWxIMKvhrgFgeqDUVBdUkxeZiFkg%2Fpnu8jYl6DyW3a0Xo%2Bs4L4fifSffEAInhNqz%2F84Rz6%2Fwd98A%2BaD064e23ILp0%2Fsds%2BfiV719pR1xb8aor0Ol75EIl2BEg6T2%2BK0OzGS2ThnHlkjVRlGOimcXAFvrQmRJD1cJKp3sXITpAppEgXodzSREThJQbkC7XXIVwSmZ1g9bhgYQzgQhJ5FelTQiwyVA5La%2FAXqn3s7dvgRpIsdnn4ksr17ftH33%2F3uTaF2g%2FUDC8Bm8A9aQhzS%2Bq2v%2BTu5cuaq1n33RcMzwk7tn0COzTIzpihWBI01zda9cbp9i%2FzEEIvnPcYPzGLFHPxuRBg6GJFGuimc3BAiUUE3niI2vIPMkKC5bEjEIFvcpKQrS4b1DU1uVJIsCIQEk4RBHUQksISg29IMv0Jw9MO3ceG2ZeREBWxh%2B1%2B%2BN4rF7vm9YPBnvyXEoeiRR97l%2FIBWwEFLiKNR2P7J%2FyLV6nXVz98ZaSXsICZY%2B8JZWl98CJOE1TlDccyhti6AOP16i1TRYWgiT9DXtKp9AOyUSywdY1BtEfXaeKuLaO1gJyXxguHMSY2TgkBb7L8CDALPh2xB4NrQ7xjcUUWvKggHkMgIXAcuf7vFgx%2BvMffFDM5sEVnA6n7xU8qxnvqvfv%2FPf%2BbAgb8Nn0%2BNIJ%2Bf7H9uqDJ4y%2B%2Fa6dO%2F3bjjzsj0sCMNZxds5p%2BN6ESS%2FsCiH1m4aZvCWA5lJJGvSSctFp%2BcI%2FAGCNVHioj0WBkdCfrVDioAmR5Dyjb9mmJ4O4xtMSyeM1gxw9KiTb7k0G0apK0xGtyYAClI5zVCa0b22NQWJfkSXPVrNrf%2Fx3MsnZrC2VUU3qKRtc%2FcqWOJuQ%2F36394tRCHoq%2F4kl70AHxlqGKid%2F0rx17%2Bq4W%2FfSZSdazUVBxGx2ksadIjkq5nUMqQzyssJ03gRZx%2BokVuYhilYwztrGCiPoXJArYraJ6ZR6kBYW0RKXokpkoMWh10BI1zgnxZ4gDdNUV5RJMfgeEJTS5nyA3DyFaBUYKeZ8jkBZ11GN7lsHhKUt7i8spfcvnoHz1Dc8VQutgSarmD9%2Bg%2FxROF6BOD5XfuFtcejZ6PYY783gf%2FUBSG%2F8%2BrsFY%2BcNefParOPy2txAgieWACr6WZmY2wLAsCST4PuaEEdiLB4rzHvqtn6FZ97GyK7lqXlWcbZGZGMNIht20CEQZkd02gVEiwuABOGr8HiRxooLIFtITWmiJohfRbgtPHBVEARkkMkngROoEh8AwiZrP15VnWz8JL3lxk%2F0HBh%2F64STjkULosJjvH5lTv8afK8dH%2Bba0Hx0qbw5zvbczk9y7411lCHIo6q3%2B837Yf%2F8T9%2F%2BNLzrnHI5HJGUFCcuaOBWxvmQBB0lUUhiS9voW0LJobHca3ZojFLULjkChkaax6zBzcQ2%2BxTqKUoXthnv5ak%2BT4FLGERKZSSH%2BVWExCIGgvGzo1AyGYCPyBIZYRpIcsTp0SCKFJZwyxuEAHYISDDgTdtYBs0bD2QINX%2FXycka027%2F29EDkBuR2OVTv6xShabO7IvnTq1vmbJxJfz%2B5eNAB8hevPn%2Fy%2Fx9OVhTue%2Bshd%2BSO3NNX0qJATOwxffsAQtQN8KTl3RpApCOy4IZuzqS356BDwFQvHl3EzktZSjZF9U9iWRMRjCFvSaXjkL9qC6lSJIs2gukLr5Am0gep5Qz5ryGQFoQI7CdqAdGBil2HrPkm9ocmXDUEP0gWJm5Y4jkCFAqTEbyhqZ31%2B6t%2FEsIF%2FeLciPi3JDGn79E1fjmgVrpp8Y3xTI9yN9b0CQX4vgg%2BHzLNfvi0zuePUbYt33Tf16Q%2FWVTwtrXTZcGxZEg81lUnB8qJh7z6DiiSDnqA%2FgL4Hbj6DnUgwtnuEsN3DQqN7HZpzq7ilLJ25GkMX7UBKC7%2FeYdCJkOk0IjeGHRf0GjB%2FGmQoKI9JjBHUNwStKnhNQ8zSZEuSbt%2FgJgVYFm7ecPJ%2Bn9x4AmQSZyiBSNjUlwW%2F%2FKcp1s5LbnmvIjFkYUUd%2B9zfPxIRJt9q6jv%2Bo7hWRI8%2B%2Br3x1crvLvhGwCEhhGHXK275WPOJLx%2B45b%2Bci%2ByUsAo5TVVLWvOG7bOwsmiolAyOBWEEzS7ImCSZS6MiRbKYZP10Fa%2BlyI4NYYxDIp%2Bmc%2BYC8bREhh7h2gqh7xHVqkiTID0zQ9BTbN8nUKGkUdVIpUkkDemEQGLQyjAIwMkJqgsQITbbkHIoTsQ491iHVE4Si7nE0i7dmqG1EvLOP03wwGcjPn%2BPJj9iM2hu2E9%2FcC7C7f9%2BtLT1tw4cIDTmuwfhu6wAYQkhlRm85X%2BGp7%2Fw4x%2B58VzkC2Hn0obMiES0NS%2B5WLNWkyRcSaRgowbGKKQxxB1BYVgSS7gEfU3XiyhvK9NeaWOMzaBl6G74uMPDGAUimcOJ2cRyCZy0i2puYLnQjQwjFVChwPchCAWFEYMlYOmcoTxpkFJjlyTGtmmsGyJPM74%2FS2kyR201JDeeRoc22aKDCgXZTIJ33TDE5%2F%2FJcK4D0zskpta2Tv3DmrJSjf8arl3zU0IQGfPd0VP5nWf%2FQVsIItP5qRvVmXt%2F7X%2F90VKEJe1iFsa326i24dK9hhNnwA8hlRNYCYtiWeD1BRNbYvhBRLMeEEvYVFfabDswS9TTKCPpDwwimcLK5xFhSKxUJqx1sBJFUjt3EXXrWIkUti2QcQlpQ6IIG0sWrgvGCBwXBl3ByhzEY4Js0QIj8QcaZQJaKx7JtI1jFP16Gx0IYvks5e1jzD%2Fms%2B3qAr%2FyJyU%2B%2Fo8RJ1dgeNwSy8%2BE8vSnWtpOnfhIsPZjLxfi6HelEeR3HvyjUdR4%2BztZveeGD%2F3FeiS0tEpJzfbdFnZkeOluQ9sDJwZbpqDRgnzWcPK4IV2yyAzbxJMOcQzrZ9bJlSTNhRq%2BH2GiANFrIvEojqcxlkPkB3QuLGIXchgvRKaGMH6b2sJmcDMjEi03D%2BIa65vKF2D%2Fy6CzAQNf4yYU8SRIBZFnMEFEbb6D7Ur6Kz7poSS2GyeKLGQyxZm761z0phI%2F%2BQt5PvD3mpWBIJeXYulhzfo9Gwknc%2Bx2v%2FZv9n43GkF%2BZ1z%2FaOQ1f%2BP1lr77vXd9aE2pgbAmy1rMbBV0u4qhmMJxBd2OYMsktDqGUt5QrxnKI5JixabTCFAR%2BJHCyDiJbAalFGgPxw5JlSwSOXvzCmQqRf3UHPmXH8D4PmHHo7e0ipNO0q4ajj%2BqkRa4aUGyuDl0XlsyCAmtlmFqC%2FQboENDd1VRms4i7Cw4FhMXZ4mUg2%2FH6bV8Bl1NONBMvbJCspRh5aEer%2FzlEV79%2BjgfORyRKNoMlZAbj6KCM%2BulWOqu27sXfnv0OzV8ye%2BE6%2Ftrv3yJK%2B46%2FNjh8%2FL8aSmGckZMzUoCx2YiZ7DjsLEB%2BRxU64IwgDAy9H3B9j2Sfh%2B8tkZLIO6QKLgEHri5LM3lNoFOkRybprvUIgoU%2FbllsqN5hBqgvQ7tlRWka9NdWGXvQUl%2B1HDuGUM8AdmcJJmzsaVERYZmVVCvCZI5Qb8Fo7sN8azETSdYPhnR6ynS5RiJXBKjNZ31Jk5c0L7QYGg6hutC%2B9kub%2FrVAnt3x7jpUyHZEUEsZqzO00FEdWFLonTk1qVHHknCIcwN3x4I3%2FI3f8VAtXL%2ByExs2HzqwU%2BcSn%2F5U8Ikk8hsSeBmBQWtCDXU2gKFwbYhnYZ0RtDpQCEHy0sGoRTttiHsadL5FK5r0etGaDuOSKawkwl0KImXyvQWqxhhIR2X5lPPEvltrKiO6XdIb91PY9kws0%2BQLQG2QdgapQ3js5vH0uUyJDNg2YbGnGF9QWO7HsIx7Lh6nLUTAcK2yQ1ZxDNxHK3w2330IKJxpo6bcujMd%2Bm1De%2F8yynSSYvDnzfkKwKJsPtPepG0WldULrrxYwhjuPGQ%2BHY0gvxWuf51192sn%2FrUzxVGZp6448w9z47f849KZfJCJhKQHxKktKGPIdLgWJCIg4pACsPSimF8qyRZjoGQtGoGN2bhpmNIDEbG6LV9oq5HupgkmYJetUng%2BQRKQiyOQVC8eB9SJshOjZIcySI6J6Bn2DhjURiyWDslcGxNaUrhuIZWU9BqQBQK%2Bm3Y9ipBt2bwOiAsTeQLxnYV6K0G%2BO0A1YsY2juGsF3cfJb87DihL%2FGFy6Bj0VpT%2FOZ%2FH6e6rrn1S4Z80eC4wh48sRRZsaWfiDqveY8QKDhofc8A2ERzrzgshLzox%2Fcfrp26Z9%2Bn331fVCxKK24bShUI6jDA0G4apBHksmDbgmTSUG0IRicFoQa%2Fq7EQtJowuj2DjFu0GwK%2F14PAI561yJRSGCNpb7RACOKFHLZUWMk4QbPLxuMncSfGkKkYsrCNTEFgmobmSc3GArRrFt2WIVaEVAYsaei1DNKSeB2b6Uti%2BB2FZRvaC03CnsLJWBjhUNg6hJN2ENLmzH0LYGmcZIJ0MYMygtqFFsaS%2FM5%2FKnP8Yc1NnzY4ZYFUoT149ERkp61%2FHTXf8O82DV%2FfGjOS35qB6np1Xfi7Hwhqy6%2F%2BxA23RcWCZRddw%2BgY5FzJxFZotwzDBUFkoNsH193s%2F4WyoDws6Teh29JYSYmyYxgglkwyPJkh6Bkqu8YIOz610yt4vS6630JKRX6qDMImlitQO7tO4aX7UZ6H6gd0l%2BeZOyfIlxQq0NjGIF1YnRP4fUNluwBbEDYNhBbdBeisWSTSLu35kMK2PPFCEieTY%2BmxKq21LiBIDceYvnKSs%2Fev4KQlmZEY6WISW0H9ZIN8WfJr%2Fy7JkbsMn77VEBuyMRue5T3xVGTlGn%2FqL%2B57x7cKwr9YKjc%2Bcpkjxu%2BPTOOtf4aT%2Frcf%2Fs2%2FjaKOsisFuOgKQT4nKZUNx45r4haUKxKtBToCP9qkoMm0IAohCqHtCWwbKhMxgiCiMF7k1INrxIslitMjSGGTHMrgtwakxisIpfCWV0mMj9Bfa2EnY%2BQmRwibHt21AMeOs%2FTsMYJQMzEr8DvQWjUEHlgIhJFgDG5O4GQM6UqEljG0SFJdENgCRMwC6TC8t8T8Y1VS5QSWBDdrIy2HoDfAKE1vvU1hIosdM4R9n4mrXcZzAX%2F%2FHs3QMMzuskTvRFuEvb5O7nHf9EdvHX%2FAGXrotDmCfejD6G8bAGMO2mL8%2Fsg7e9mv2aPpv7j59z8ZZb2OvXW3pFgSzLzMJpUSLJzWDDyYnBB0PYtuW6MMCEswOSXpdjeBwBhsWzI8GUeFmuJMnuqSwjhxJi%2BeoLPUIVFIsvDAOdJTo%2BS2jBH1fGLpFMFGFVSAk3LxN5rIdJHu%2BTUSeZtM%2BBSdjsBoMPbmKWipBN2uBLPZgoZ2Qn3O0GtDaZsi9BwUMRKFBO3lPm6xiBWLkS6n6Fa7SEdQO7GGmwAhJI4ryAyl0FIQSzic%2BmKDZE4ze41NFsP7%2F5tiYliTc4W4%2F5N9ZNISw5cFb%2Fqda8Y%2Bn3hVdckYrEOHMN8yAOYItpidi3qf2fGmxI72h2%2F6y6f0ykMd63Vvjoldv5IlnIsYdDT9umZlCabGQRmLesNgO8%2FZxdMCKyFIp6HZEpTGLdIFi40VjWVJhHTwBzCxq4LX6pMYzlJd7KHdBMP7p%2BnO1zHEUV0Pr9oht%2B8i%2FNUGGINq14g7EcLdgjf%2FAJkSdDoS1zWMbwOtBc2qIDtmcKTAAMmiYOO8xM1DqiIwvsRb72CikHjGpX6hg9%2FTOJbCb%2FTITZSIuQK3mOTC3atkx9PImIXyPUb3FZh7sofrBuw8aOOvaW76qKGYFSghxJNHemZyR%2BCW9pkf%2B42rf%2BRwaseJljHIfw6EbwLA3Iwl3oBavemilxWmF2%2F%2FzCdqzkN3hiJTsIQbh%2F5SSMpR9JuKblPgutAbSJIOrNY2N5VsGhJpi3QGmk1JowvTOyyCgSEeB68nkI4kkbWpne8gYzZOJkV1scvUFdsYrHcxysZreziZLKESuOk40nLRSiN6TdL7DqAGVdaeeJz8sMB24NgTMDYLdkJiGei3YRCAsC0yFYt0yaK%2FYfA9gVGb%2F2OmbBMNQuLpHJYdJ5FK0p1fw3ItYrkYJgxw8nGWn21RnM2gI4NlR2SHk7SWusQTEdu2S1bOGr70IOychUEgxLNfVmr3VSqfm9m49rrpv%2FiH4ZfeGdwI8tDRbwRBflPwr0edv%2FV1M5X8%2FC1Hv9BNHrnNmFxOCCdpqPUN0ZpiZVlz6pQgnwUrJkkmDJGBYgayCUMyKcjmDUob6k3NS15mM%2FAF7Zqm50t8pYnl8li2S3pyiHg%2BR2exTmU8Qe%2F8IkZFDAY%2Bfm2DsFEnM5ZF9Tq0VlbRxuAFDsQTRD2PfAVaLcgNwSVXCs6eECQLhswIDFUgaEOvpmmvaboNSIzYRG2J6UIsHydWyeN1BUbGSVfA73VRqQxGQmvBQ7o2%2BZkMY5eMsvZMg%2BRwin4tQvU7pNIxvHWLREXy9kMOwyNw1yNQKkl831gfP%2BRFBI2X7H3tuz92%2BLCR7OWbNMLXHnp0A1Jcjzr2T%2B8sToQPfvrxY53ROz8tVMI10rIFM7OC7cOaXF5zYQ4mR6A3AGkMA09QrRnKBQ2OoO8ZfE%2FTbsG2bQbhGKLA0G5DOm3IDqdw4hJl5XFiDitPLJGfrSCdBEE3JPIHyLCDm0mQ2zZKzI0x6CmkNBAMSE6Oo9tVsGKkMptir1XXFIYNQyOCjQXoNAWrq5LKXkl5VjIYaMo7NXbCQtkCnUpSPx%2FidzS28ll56DjCCXALBjft4nUNkefjNSVqoElkJfnROO1zG0gietWA9FicXk1y%2FoGQzIzkN%2F4iThjAmVXDxXsE3Q1h3%2FruKCK3%2FoY3b518n7jeUtyNtckuvw4AYxAcgjvNnfGt7dtvObvU2nP4syYqpLUlpWB0xFB2NKWi4fwcjA%2BBm4B%2BT2OjubAE2ayAmE0qs%2BnNqVchndm0G65fiDCRwnY0MpeitK2EFzpktoywdr6FWykgHAcVBLilAqraIp5yyMyO0jh%2BAb%2FegLANrSrxygjxrIuOIuxCivPPbHo%2Fgx6cfNSgfdC%2BJJGG6T0SKy5xc5LlZwSNdU08p8lWBDLy8Gua5ok2uV2jjF%2B1i5XH2sQLSXIjLrnxCqqvCNtdvFpA%2FZl5hPQImgOCTkR%2BMku%2FaihM2xjtsPiAYmiX4Pf%2BU5yzpw3VruHAJYKNOWMffd8gsgsbv%2BTdM%2FUfxLUi4sjXWv%2FmaO0wUnzc1u%2FZedffr69U3%2FDBz5iomDC2UoLt22x2z0AMzcoqOBLSaYE3gGIWzswLxiuC4WFJzzNUNwxWbNOjOTErsBOSXDmG70uSBYlMJui34hR3ztBZ7tHr9pm6cppgvUu3rVBK0mmGJCoF4sk4TiaOk4yjwxA74yKFher0iI9PE84%2Fy6B2Gm0E2ZygU5dky4JMAR4%2BahjdonBdg7E0lZ0O5x6TJJIGlEAqyE7mye4eobOsyc6O4tUC%2FE6X9FSW3moXJ25hx8FxbTJjeWxH0FiOkDELr61wMxJQVHbHWDsVEjMRlb0W48M2H31fxKVXSHIJwfFjSHwTTV%2Fau%2FYP3jxdjb2q%2BeBX6Kn1xjGc8V%2BUUf2WLf%2FZ21j5lfd8MopciS0MbNsiuOoySSKmWVo1JBJg2bBR3SwdP9w8Ch4dkYSBYX1NE4ttIluuCIQF6bzFqacVmbJLaTZHY0nhJJOE3QFRr0tlZ5GoqzDCprbUJVVIEyhBcTxL0Ogi45LVe09QunQvTiaLt7yAk3EJ6g2iZoOoPs%2FivGFqhyQIBP5A4iY0qZRmbQliLnTXIF6wkcTw2g6FcQvhFqmdspB2HLdQpju%2FTnFbibDbxPR9JBDPuCQKCU5%2FcYnsZBYpXaQj6NYjYgnBoOWRTlsEXkihZOhXFYOViNl9hlLZ4baPKg68QiIHhmNPGhG3Iz2523%2FDH7xlx2OxV2%2BcMEew5YFfFeHKR7f%2Fhre49Dv%2F6%2FYgUqGw4wImZwWvf6ckJiLmlwzrNUEqIbCkIJeC7kCgFLhxw8IK9HsGI8BgUSxIHEeSydt024IQQXlbkm4LsmMFZOTj1TqkRoaon2zRvtBAa4hFPYgixvZN0FtukpwepnGujjNawUqmCOp9EuOzhPUOAnCGRymUDYm0pNsyxJPQ9aCxKmivCUrDAoMgMWRjuzCyNwRrQHNNIOMxhg%2BUiJoDpBMRND02njqHLW06p1oIYYG0Cbs%2BU68Y4dwja2gTkEwJhqcEQadHb91j0PDZOO7TrVlkZhx6bcP6CcMrftHidT8T4%2FZbIyZ2QTFvxJE7EI8d6Ru3OP%2FR7tM%2FfrG4lsiqf3rv28TG3N%2BeWuir7kBYMWlEuSB58x%2BlsJuahacUixuwa1agELTqhgGCSEEuB6mUwBGaQSCRQK5oEwpBJi9IZGzOn43Ye2WKQKcIPE2v7iMTGq%2FnUJocQiPITQ0TtPqbp5HZLN3FGpnpCqEXMai2GL1yL95aY9NYtd7CCIHvaRKVCt1Tj5DJCbyuQG5qLzJZiZCCZtswfbnBIMA2WCkLNwfKT6A6AmMkdsrBW%2BtQmC2BsLEcm347xIrbBB44rkMi65DIJumstUkNx%2BguN5F6QMwy6EgxskUQCUgMQdA2rJ41xIRiz09bRHXJfZ%2FV7N8JWEL4njBbd%2FpxVzd%2F%2FMbfevUd1lt2Dx589KmeWG8KeelWITKuRCYtCp4i5RtMRhC3BCoCr2foDCCfF2htyGcFJoJqW7DRFGydNDTbBqMFlpC0W4rRCUEsEUcbi1Y1JFVK0G04DE1X6K61yA6nmb%2F%2FLDIeo7B7Cm%2B1gXQsjDIE1Q1yM2WUrxFG05jfIDVcxqv1ye0YRVWXaZ8%2BRWYIFs9CKmeY3rmpvse2GXr1zWlYaVrQbxiMMIT9GMJYiFgC3Yfk5CjLD68RBiGlHRW6qz2Ix4l8hbfeJD1SIOiFCBNiBiF%2Bs4G0QyRQntKcvVdhuYbCKHQ2DKWLDKXdho0nDaapiEmbVMpw2Y8JLrlUkElLce9dhJ0Fr4Dxp6w%2F%2FBHnT8NmKBcbiEfPEgUB4tyiEU8f16yubboYZmYthqYEuLC2BAltKBVBInFTgoV1wfSowbA5i5UC2j3B8IjNIICNpYhUQdCpaYyKUd46RrfWITOUJFKajaUGkwdmGFS72AmXeC6L3%2BqRGC3hrdXpz6%2FjDhfpnFtFhgMyWysksoKoq7B6zyJjgnTGcOxpKJUhmdp0P49ugaAPUQ%2F8FkSeIJ6O0TwZEk8ncStl%2FFpAeVeBlZN1tArJjWcxviKRS9BbrSGsCL8d0F1tkh0J6a2EJNKCZEnj10KK2wT1qsBNG1JlQ3tZMFi1WHvasPCkJKgpXvJSyeppwWc%2BafRDDxmdEtjbcgY7m5wTK%2B8de2uv3nvHoO%2B9OvIDeXwZztel8gJBq6OlHxgxVpZcsluw%2FzLB0E4LYWxqJwy0%2BpxbgEQGhodtWi1DqASpgqTTMey%2FIkaoDIm8pN%2BTDHoW8VKRMLBxE5CZqHDiSwvMvGQSJxFnUO%2BSnpnk1KceJTtZZuTKffTOr%2BHkXKKuh2p3kOkU8ayDnS7RrYN68oN4gUVpSNNuQrcjGN9iWF0wqBAyJQstBIUtEJHAiCSrJwyFiTRh4JIZyWG0wcnEOf%2FAHFuuKNM40yLoeqSGXPRgQGokj7QtguYi62f7ZEcSqF6H%2FFiEXZAEA8GFzymEY5h%2FRrCxIen5hjgGR2K8AK2MkdMjQmwbt5GWs27H3E%2FEx0f%2Bh3jOXULjjn2XWLXFX%2BrV%2FZ82%2FcH4ai%2Fi0Qtw6oKIWp6Qjo0sZWDLFsPegwm2Xz6LY4%2By9vQ68cZJGqs%2BgQIdt4nFBek85IckyWKSjQWfgQ%2FbXreb6uk%2BQaNLquiijUSm0uTGSnSWmqRnx2gu9qgvbLD11TvpzzUx2Pi1DpHXp3hgL7rXJVxbxi5N0Fpp03%2Fys4xul6wuCXJ5Q7cFjrt5b7hVF4xut7hwzNBVIRe9ocSglsBrBfT7KYxvyE8XEEQIDKEX4ncDUsMpBnWP3FSBYKXGxskWk6%2BbJGi28OqrBKFFTIbobki%2FCounoFaH5RWodQy9nkAY1MSoYMessaYLgqTlkE6790XpzAe9sSs%2FOXb1xzfAIMzNWDdejzkEGgSm%2Ba8LK7fc%2BhM513uHbQ9eGfQj%2BfS84fizWtdrGBtkJoYYG5Vsu3yCsSsvR%2BZLWP3TXLjvSVaeabJlhyQ7LLEyDplKkafuWWXLtVPE05N0zy9hG0Ov5ZGZKqMC6K13yEwMkZoYZuGRecYvmyLqBehQ0FrpkRkvUb%2BwxviVexBeC9IVdM%2BnfWGZ%2FuN3Ei8KGnUb5UdMbzOcPSWZ3CNIF6C2BMMzNmeORaQnHUZ2DTOoh6hAs%2FBIn%2BJsCsd16Kx0GNo1StAxeJ2Q0ZeN0Tm3QXIIehseUbNG4eIZ%2FJVlvLkWrQuweEGzuAH1JgwGBq%2BLURI1NCzsV1xpsWPKxnTFathLfsqLD71%2F5G1nHsBEmycP12Gxh69dRDM3INmLENejNl%2Bx6T6445JUVP9ZMoPriJnZVtVn7oSGxSAyHjJmI20HTCGJnJ4lsxUy6XlY79JZcijvHGbuVES87DN%2B6R56p9apzXvEU4bVhYC9r9pD2PeQEsJA4dUD3FIeJ5UAA71WROApYo6FU86TyYGJF2mduIC33qV4YA%2FtL3%2BAdl1QGrGIQo3tGNaXBdWW4YofhUFHYJRFpmKzeFoxsi9Lpy4IewFWTGIJSA0PIZ0k2vfwmxFn719j8uAE%2BdE8Yb9JfPRKgtV1rPiXUSd7nL5XceK8pNbQ9DsGHaEzBcy2%2FbZ1yS6bjA12OnEPOv2B%2Bf5Vt0%2B%2F4WONTX6GMDcjuQ4txHMv%2FLMjyMNIrkeL537q2LEb0jutm15nj%2FN2MnteC17Mf%2BQRNp5oa7%2BqzKCtZKuD6GlIz0gquzXFksRSLu2qonLlLGHTYdDo0W0PiLk2Az%2FJ2EyeMAjptzSttS6zV83SWxvQXqiS3z5C0Anx1psU92wnntnMcFmcYO5zD1K5fC82Ht1nPsbycYtEElKZzedFVCYlq0uGWsuw%2F6BNc1EgHIFWhjASJEoxEBaZSoLm%2FIC5YxEX%2F%2FR2BhsDLNPBzhnO3tdm%2BqUlnKEyRv4VIryf8OH%2Fi1NfhCdOQ9czxnHQIxPIvZc5YvqlacinVpnn4%2BGC%2B5HYG889xHO5bK7D4mbM5uW%2F%2F4%2B38P8wD5bciBSHiL5ydNRe%2BsNdqZGVn5Ny5Wdoze1gtcrCwz1Wn%2FGjTkNL30NiQ7oiGZo2lEfAlhbxXJr1qkXgKQozFfKVAl7DI7NliPs%2B%2FAQT%2B8eYunwL7QtVEsUMg2obYjZYEscCQUB82342Hr8AMmTo4r3UHj5GuPQFNjYkI6OwvGCYmDAEIVTGBHNnIJUXeANBs6rYcokk6FgYISnsSqAGDkIrFs94iESGmStH6JxeJWma4Gk6gwjLSmKtWehmh6AJT5%2BVum0JMzsjrV27LexhFyrp%2B7HSH1xqvfqWiT3%2Fs%2FYNifx12f7Pmju%2FjduOEr6G4vkP%2FqI7cc3JH7VTg18iav8IUdutPdpj%2FrSv2wvaKF9INyFFpgjJYUNmSGDbBi0sMlun6DdtclsmWHq2RhR4zF69k9apBqDw%2BwahQohJynu3MJhfJBLu5pBaSpKzkxCEdJbbdB%2B%2FDSkkrR4MPBgZMwjLotMwxOIGJykoDYPvC4RtqC5LknmbvqeZPhBHBRZ2UnLii11S0sIJAtbWYGld0aiBMzBYApNKCj0zhpzeLkQiY0EqU8VKfNILSx9Kvvb4l7%2Ba7Qbr6%2BP0f3TXfmd29LulEEejr%2FyKweLrd8TN%2Bs%2FTbryVcnuH7vrMPegTzgeRo7BirhDELVRM4qQ18ZzCzsaRiQLr52HqpfsIBwajBzTWB2Qnh2gu1ClNFYgTQLpI2NMgFDIeo3dhmVg2xcDEkPOfxoQWka9ZXRJkchBLSsJQML5ds74ItTXN%2FtfatFcFg26EzDhIW9BrhjhK0D6vGHSg0zVU%2B3BuAcKeQYAulIXZs922LntpjJi20Nq5PxSxj6ryKz%2BevuLjq5vXAUFvBv5fzPbvCQDfWBXXSTj8tao4f8Sd9H%2FnjdZU7%2B0k3NfCPjt8dpnWUw%2BpaCMQKCGDEJQtiA%2FZuEOS9LhExV0GtRROcoTaqTrJsTx2LkM2H0NrQzCQnP%2FCU%2Bz%2BuYMgHMJ2h1ihwsYTzyJqd%2BM1JN26ZnhKEgFuUpBICnothe0KzpzQTOyFyn6bzjnN%2FDHoVAVuoMilBf1QsLwuiDzoNLXpavTQjBH7L4nL6ZIN2E0ShTtI5d8nLn76Hp7ryOZmrMPA9V8lLt%2BBv%2Fx7dCdYcjdSXMtXq6Kz%2BjP7k5Vdb5fq7uuwnh5nHpqPtUywrrXqGxlpKfzIYiBscrvjFPe6OK5D60QHKzFOenyKyPNJTo6y8tAZEqM58lMV%2BgsbxCpD9OdrDDp96Bwll4X6eUNxQrA4J5g%2Fq7n6JwQDYriOwiobHr8zQmmonZMUCoLRIUFlRuPVYP24oT8wWubiujCDPTZrIbckwUk9yYn4R2ve6EfL196zCGbTqnMDFjeivt1sf94A%2BJf2isat5DOv3XWdhXkHy%2B2XYfXx1kK881E0WI%2Fk3AUtw1DiZF1yuwuMX5khWUzhr4c4ydyma60vGL3mEronL%2BBWyqggYuVLxym%2FZJy1B%2F%2BJ4h6bbN5i%2FeGIfEXSDQ1R3DD68jGO31Zl%2BRmPYJCisj3O9lf3yKU1PKwIugZRQvVqkvR2x7L3DYPK9VmqfiYSO97nvP%2Fuz3FI6K9kO4D4LrL9eQfgm%2FeKvUKI67%2BqK8Ljr3iNTDXfIcd4I85IOjqzwfwXnlZeTRP2lbWxBlpajF40zPBLZilsLSGiHhiJVw2wUwlS27eyfORJ8rvGELZi%2FtZb6GnJxT9tIZuGoANREu69JaK26pApFth5MM%2BWl6WxEhbQJaotGPNsT2Mb6eyMCQoJYNtZPRAf7Xb2fSQ3%2FOHTzzFwzBFsrvneZPsLCsA3VMXdWF%2FfnrzVn91iF0pvt2Onf56NY7PMN6ieC019XunqmpHRQAs%2FALecZ%2Fiy7YxePEkirZBC463XCLyQ4oErqT7%2BNLnoCFFosbKmEC4cPwLaJBjdX2H28g7lnftAZDFmESWENo11bV9YtoWjYSiJTpfvMSb33o2zb%2Fvk6CW%2F3%2FtqSwWB%2BJoWer7WC%2FrYxs2PFzn81TJeO3ZdumSv%2F6ToXPhl2ase1I0BqxuG%2FsCOwnokV1e1rLZAJm3GL55h6yu3U5xx0DLCeNCbmyPoHWfhtOTUE3Hy4wV2H9zG9OVjSPcC4KMCH2NPKqpnsBcXLRZ8QpnsWhOp29RI5X2xsWePfpVCHsHmmhu0EIf0CxWT78tzMzcz7ODXUVmL4N6LXu4vLb3T9Hs%2FldkqcoyXmL93oOYeXme1Ka1AacpZmNlTYuKqraS2DWNMj9M33UejlWDP1Qkyl08D%2BzC00Rw3ejCszYUnZczzBPWAqJ88a2KFv1O7pj%2BSmLn3POiv37f089VmXnQAfBOVFYefK3WJWfqxqfDEE2%2BzLh16m8zPbmf9IZ68acVsnEFHRsiEHYmUCxN74zjlcaiuUtrpQ0IRbSlClNc0WjpYU3Yy1JhaH51JfYnxifdZO%2F7zJ4R4Xe%2F53FR%2FoAD4pqq4HiEObwZk6ZF3Jcvlp94cK1TfRW3jav1gnwuLmlZbR42akI4rZC6nKBUk5a1gUkY5F2Wwqp5F0mHwuNUUMffj8dmRj4jdz96D3iy2IzdgXwNaHEK%2FGN73i%2B4DPm64AXnjNd%2BoKYJTFx%2B01jZ%2BhW77zfJSlfROC1Ye8HWUsERMRCYpjBx%2BvQPTM6h%2B8jyy9yErcfGHhPjEPOhN7m6%2Bf23mB3IZgzDmuq97JIDAm3v1lii65N%2BbcM9Jc5trzIMps%2FSRmFn7745RS6NfiKIrf2Ft7eb011stv9Jqfri%2BK%2Fb0jYHc2PjLjP%2FAvneED4w8Vf905fO123f%2F6NfbXI3BNjf8YHy%2B5P8LOrXThWQgDrQAAAAASUVORK5CYII%3D%22%20width%3D%2296%22%20height%3D%2277%22%2F%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%2830%2C50%29%20rotate%28-10%29%20scale%281.0%29%22%20opacity%3D%220.1%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%28300%2C20%29%20rotate%288%29%20scale%280.65%29%22%20opacity%3D%220.08%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%28390%2C190%29%20rotate%28-5%29%20scale%281.1%29%22%20opacity%3D%220.09%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%28120%2C230%29%20rotate%2812%29%20scale%280.8%29%22%20opacity%3D%220.1%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%28260%2C330%29%20rotate%28-14%29%20scale%280.55%29%22%20opacity%3D%220.08%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%2820%2C380%29%20rotate%286%29%20scale%280.9%29%22%20opacity%3D%220.09%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate%28210%2C140%29%20rotate%283%29%20scale%280.45%29%22%20opacity%3D%220.07%22%2F%3E%3C%2Fsvg%3E"); }
html[data-bgpat="words"] body{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22910%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2250%22%20transform%3D%22rotate%28-7%2024%2050%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EYour%20Move%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22333%22%20y%3D%2250%22%20transform%3D%22rotate%285%20333%2050%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EWinning%20Move%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22134%22%20transform%3D%22rotate%284%2030%20134%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EBrilliant%20Move%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22339%22%20y%3D%22134%22%20transform%3D%22rotate%28-5%20339%20134%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EPower%20Move%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2236%22%20y%3D%22218%22%20transform%3D%22rotate%286%2036%20218%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EGame%20of%20Kings%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22325%22%20y%3D%22218%22%20transform%3D%22rotate%28-6%20325%20218%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EBattle%20of%20Minds%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2242%22%20y%3D%22302%22%20transform%3D%22rotate%28-4%2042%20302%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3ELong%20Game%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22331%22%20y%3D%22302%22%20transform%3D%22rotate%285%20331%20302%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EMind%20Game%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2228%22%20y%3D%22386%22%20transform%3D%22rotate%285%2028%20386%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EGame%20Worth%20Playing%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22337%22%20y%3D%22386%22%20transform%3D%22rotate%28-5%20337%20386%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EMove%20Worth%20Making%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2234%22%20y%3D%22470%22%20transform%3D%22rotate%284%2034%20470%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EPath%20to%20Victory%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22323%22%20y%3D%22470%22%20transform%3D%22rotate%28-4%20323%20470%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3ERoad%20to%20Checkmate%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22554%22%20transform%3D%22rotate%285%2040%20554%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3ECheckmate%20Moment%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22329%22%20y%3D%22554%22%20transform%3D%22rotate%283%20329%20554%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3ENew%20Opening%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2226%22%20y%3D%22638%22%20transform%3D%22rotate%28-5%2026%20638%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EStrong%20Opening%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22335%22%20y%3D%22638%22%20transform%3D%22rotate%284%20335%20638%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EGrandmaster%20Mindset%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2232%22%20y%3D%22722%22%20transform%3D%22rotate%28-5%2032%20722%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3EPawn%20with%20Potential%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%22321%22%20y%3D%22722%22%20transform%3D%22rotate%285%20321%20722%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%230c7ffb%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%23f5c711%22%3EKnight%20to%20Remember%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20x%3D%2238%22%20y%3D%22806%22%20transform%3D%22rotate%28-6%2038%20806%29%22%20font-family%3D%22Segoe%20UI%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20opacity%3D%220.14%22%3E%3Ctspan%20fill%3D%22%23f5c711%22%3EITZA%3C%2Ftspan%3E%20%3Ctspan%20fill%3D%22%230c7ffb%22%3ERook%20Solid%20Strategy%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E"); }
/* the watermark rides on the SAME crisp ice white - no tinted wash behind it */
html[data-bg="light"][data-bgpat="pyramids"] body,
html[data-bg="light"][data-bgpat="words"] body{ background-color:#F4F7F6; }

/* board size (desktop): raise the cap; viewport terms still clamp on mobile */
html[data-boardsize="large"] .boardcol{ width:min(92vw, calc(100vh - 200px), 820px); }
html[data-boardsize="max"] .boardcol{ width:min(94vw, calc(100vh - 140px), 1000px); }

/* ---- in-game chat (ITZA Chat engine) ---- */
#chatToggleRow{display:none;margin-top:8px}
#chatToggleRow.on{display:block}
#btnChat{position:relative}
#btnChat.on{background:var(--sapphire);color:#fff;border-color:var(--sapphire)}
#chatBadge{display:none;position:absolute;top:-7px;right:-7px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;border-radius:9px;padding:1px 5px;min-width:12px;text-align:center}
#chatBox{display:none;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
#chatBox.on{display:block}
.chatHead{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px}
.chatX{background:none;border:none;color:var(--ink2);font-size:18px;cursor:pointer;line-height:1}
#chatLog{height:180px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.chatEmpty{color:var(--ink3);font-size:12.5px;text-align:center;margin:auto}
.chatMsg{max-width:78%;padding:6px 11px;border-radius:13px;font-size:13.5px;line-height:1.35;background:rgba(127,127,127,.14);align-self:flex-start;word-wrap:break-word}
.chatMsg.mine{background:rgba(245,199,17,.22);align-self:flex-end}
.chatRow{display:flex;gap:8px;padding:8px;border-top:1px solid var(--line)}
#chatInput{flex:1;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);padding:7px 11px;font-size:13.5px;outline:none}
#chatInput:focus{border-color:var(--sapphire)}

/* ---- back buttons: unmissable but on-palette (slate frame, navy on hover) ---- */
.backbtn{
  background:var(--card);border:1.5px solid var(--slate);color:var(--ink);
  font-weight:700;box-shadow:0 1px 3px rgba(11,25,44,.08);
}
.backbtn:hover{border-color:var(--sapphire);background:var(--elev)}
#btnExit{border:1.5px solid var(--slate);background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(11,25,44,.08)}
#btnExit:hover{background:rgba(229,72,77,.12);border-color:#e5484d}

/* ---- learner mode ---- */
.modeRow{display:flex;gap:8px;margin-bottom:10px}
.modebtn{flex:1;padding:9px 6px;border-radius:10px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-weight:700;cursor:pointer;font-size:13.5px}
.modebtn.on{border-color:var(--accent);background:rgba(30,62,98,.12)}
/* badges */
#badgeRow{display:none;margin-top:10px;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
#badgeRow.on{display:flex}
.badgeTitle{font-size:12px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px;margin-right:4px}
.badgeThumb{width:38px;height:38px;object-fit:contain;cursor:pointer;opacity:.55;filter:grayscale(.4);transition:transform .12s ease}
.badgeThumb:hover{transform:scale(1.15);opacity:.85}
.badgeThumb.got{opacity:1;filter:none}
.badgeBig{text-align:center;margin:10px 0}
.badgeBig img{width:170px;height:170px;object-fit:contain}
.badgeBig.reveal img{animation:bpop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes bpop{0%{transform:scale(.2) rotate(-16deg);opacity:0}100%{transform:scale(1) rotate(0)}}
.fanfareHead{text-align:center;color:var(--accent);font-size:19px}
#confetti{position:fixed;inset:0;z-index:9999;pointer-events:none}

/* three-mode row + practice tags */
.modeRow3 .modebtn{font-size:12.5px;padding:8px 4px}
/* four tabs (Board/Play/App/Account) share the same row - a touch
   tighter so the labels stay on one line on a phone */
.modeRow4 .modebtn{font-size:11.5px;padding:8px 2px}
.endElo.practice,.hcElo.practice{color:var(--ink3);font-weight:600}
.hcElo.practice{background:rgba(127,127,127,.14);border-radius:9px;padding:1px 8px;font-size:11px}

/* ---- account chip + the three rating ladders ----
   The ladders used to sit in one bordered, divided box with ALL-CAPS micro
   labels, which read as a spreadsheet row bolted into the top bar. Now: a
   round avatar, the name, and three SOFT TINTED PILLS - each ladder keeps
   its own colour (blue Players / gold Bots / violet Puzzles) so they stay
   instantly distinct and are never blended, but the heavy frame and the
   dividers are gone. Everything is nowrap and the name has its own line, so
   the collision this replaced cannot return. */
#meChip{display:inline-flex;align-items:center;gap:9px;max-width:64vw;border-radius:8px;padding:4px 10px 4px 5px;flex:0 1 auto;min-width:0}
/* the scores keep a tidy grid inside the rectangle: fixed gaps, one baseline,
   and the whole group may SHRINK (min-width:0 + hidden overflow) so it can
   never run under the gear button on a narrow bar */
#meChip .chipCol{gap:2px}
#meChip .rgroup{min-width:0;overflow:hidden}
#meChip .rcell+.rcell::before{margin:0 7px}
/* the smallest bars keep the three figures whole by dropping the words - the
   order (Players | Bots | Puzzles) and each cell's title carry the meaning */
@media (max-width:430px){
  #meChip .rlbl{display:none}
  #meChip .rcell+.rcell::before{margin:0 6px}
}
/* rounded-square avatar - matches the settings page tile (user-directed) */
.chipAv{width:28px;height:28px;border-radius:8px;object-fit:cover;object-position:center top;flex:0 0 auto;box-shadow:0 0 0 1.5px var(--line);background:var(--elev)}
.chipCol{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;line-height:1.1}
.chipName{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* the pill row: soft, rounded, tabular figures, never wrapping */
.rgroup{display:inline-flex;align-items:center;gap:0;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 2026-07-26 redesign: the three ladders read as ONE muted text line
   everywhere - no per-ladder tinted pills anywhere any more. Slate label,
   ink figure, hairline pipe between cells. */
.rcell{display:inline-flex;align-items:baseline;gap:5px;border-radius:0;padding:0;border:none;background:none}
.rcell+.rcell::before{content:"|";color:var(--line);font-weight:400;margin:0 9px;align-self:center}
.rlbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);opacity:1}
.rval{font-size:12px;font-weight:800;line-height:1.35;color:var(--ink)}
/* Narrow bars: three labelled pills plus the app's own chrome cannot all fit
   a phone's 52px bar, and the chip is the part carrying real information -
   so the CHROME yields first (wordmark, then the mode pill's padding), and
   only on the smallest screens does the chip itself give up its avatar.
   The labels never shrink to initials: "P" would be ambiguous between
   Players and Puzzles, which is exactly the confusion these pills exist to
   prevent. Widths here were measured, not guessed (see verify_chip.mjs). */
@media (max-width:760px){
  #meChip{gap:7px;max-width:70vw}
  .chipAv{width:24px;height:24px}
  .chipName{font-size:11.5px}
  .rcell{padding:1px 7px;gap:4px}
  .rlbl{font-size:8.5px}
  .rval{font-size:10.5px}
}
@media (max-width:640px){
  .topbar .brand{display:none}            /* the pyramid alone still says ITZA */
  .topbar .pill{font-size:10px;padding:2px 7px}
}
@media (max-width:470px){
  .chipAv{display:none}                   /* identity survives in the name */
  #meChip{gap:0;padding:3px 2px;max-width:74vw}
  .rgroup{gap:4px}
  .rcell{padding:1px 6px;gap:3px}
  .rlbl{font-size:8px}
  .rval{font-size:10px}
}
/* Play Online: my ladders as ONE quiet line of muted text under the heading -
   the coloured pills the header chip wears stay in the header; down here they
   broke the page's alignment and colour discipline. Same markup, restyled. */
.lobbyMe{display:flex;align-items:center;gap:10px;margin:0 0 6px;flex-wrap:wrap}
.lobbyMeName{font-weight:700;font-size:14px;color:var(--ink)}
/* (the lobby line simply inherits the global muted .rcell treatment) */
.lobbyMe .rcell .rlbl{font-size:10.5px;letter-spacing:.07em}
.lobbyMe .rcell .rval{font-size:12.5px;font-weight:700}
.lobbyMe .rcell+.rcell::before{margin:0 12px}
@media (max-width:760px){
  #meChip{padding:3px 8px;max-width:58vw}
  .chipName{font-size:11.5px}
  .rcell{padding:1px 6px}
  .rlbl{font-size:8.5px}
  .rval{font-size:10.5px}
}
/* settings profile block */
.profBlock{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--card)}
.profName{font-weight:800;font-size:15px;margin-bottom:9px}
.profRatings{display:flex;gap:10px;flex-wrap:wrap}
.profR{flex:1;min-width:110px;border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:1px}
.profR.human,.profR.bot,.profR.puz{background:var(--ctrl);border:1px solid var(--ctrl-line)}
.prLbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;opacity:.75}
.prVal{font-size:22px;font-weight:800;line-height:1.1}
.prSub{font-size:11px;opacity:.6}

/* ---- on-chain referee badge (computer games) ---- */
.refBadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;
  border-radius:999px;padding:1px 8px;margin-right:6px;vertical-align:1px}
.refBadge.chain{background:rgba(67,160,71,.15);color:#2e7d32;border:1px solid rgba(67,160,71,.5)}
html[data-bg="dark"] .refBadge.chain{color:#7bd07f}
.refBadge.practice{background:rgba(245,166,35,.14);color:#9a6a00;border:1px solid rgba(245,166,35,.5)}
html[data-bg="dark"] .refBadge.practice{color:#f0b73d}

/* ---- Crown & Ransom wager configurator (ECONOMY_SPEC 4.6) ---- */
.wagerbox{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
/* two-line header: WAGER over its test-coin subtitle in column one, balance
   and the action vertically centred against the pair on the right */
.wagerhead{
  display:grid;grid-template-columns:1fr auto auto;column-gap:10px;row-gap:2px;
  align-items:center;margin-bottom:12px;font-weight:700;color:var(--ink);
}
.wagerhead .grow{display:none}
/* the word "Wager" speaks in the same overline voice as the card titles */
.wagerhead>span:first-child{
  grid-column:1;grid-row:1;
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);
}
/* the test-coin note is a quiet SUBTITLE, not a badge - no container at all */
.wagertag{
  grid-column:1;grid-row:2;justify-self:start;
  font-size:12px;font-weight:600;color:#64748B;
  background:none;border:none;border-radius:0;padding:0;
}
html[data-bg="dark"] .wagertag{color:#9FB0C3;background:none;border:none}
.wagerhead .wagerbal{grid-column:2;grid-row:1/3;align-self:center}
.wagerhead #btnGrantTest{grid-column:3;grid-row:1/3;align-self:center}
.wagerbal{color:var(--ink2);font-size:12.5px;font-variant-numeric:tabular-nums}
.crownslider{margin-top:8px}
.crownslider label{display:block;color:var(--ink2);font-size:13px}
.crownslider input[type=range]{display:block;width:100%;margin-top:6px}
.crownsplit{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;color:var(--ink2);font-size:12.5px}
.crownsplit b{color:var(--ink);font-variant-numeric:tabular-nums}
.ransomtable{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.ransomtable th{text-align:left;color:var(--ink2);font-weight:600;font-size:12px;padding:4px 8px;border-bottom:1px solid var(--line)}
.ransomtable td{padding:5px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.ransomtable td:first-child{font-size:18px;width:26px;text-align:center}
.ransomtable .rv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.ransomnote{margin-top:8px;color:var(--ink2);font-size:12.5px;line-height:1.45}
.ransomnote.warn{color:#b5892f}

/* ---- in-game Crown & Ransom tally + capture flourish (10.1-10.2) ---- */
.rntally{display:none;margin-top:8px;background:var(--elev);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:8px 12px}
.rntally.on{display:block}
.rntally .rnrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.rntally .rnrow b{color:var(--ink);font-variant-numeric:tabular-nums}
.rntally .rnjack{margin-top:4px;font-weight:700;color:var(--gold)}
.rntrays{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.rntray{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.rncap{display:inline-flex;flex-direction:column;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px 4px;min-width:34px}
.rncap .g{font-size:20px;line-height:1}
.rncap .v{font-size:10px;color:var(--ink2);font-variant-numeric:tabular-nums}
.rnfloat{position:absolute;pointer-events:none;z-index:60;font-weight:800;color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.4);animation:rnrise 1s ease-out forwards}
@keyframes rnrise{0%{opacity:0;transform:translateY(6px) scale(.9)}15%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1.05)}}

/* ---- reputation (ECONOMY_SPEC 14) + owed ledger (15): lobby badge + star modal ---- */
/* reputation / owed / faucet: one quiet meta strip above the cards, labels
   sharing the cards' overline voice and every line on a common left edge */
.lobbyRep{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin:2px 0 0;font-size:13px;
}
.lobbyRep .repLine{display:flex;align-items:center;gap:10px;min-height:26px}
.lobbyRep .repLbl{
  color:var(--ink3);text-transform:uppercase;letter-spacing:.09em;
  font-size:10.5px;font-weight:800;min-width:86px;
}
.lobbyRep .repScore{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.lobbyRep .repTier{color:var(--ink);font-weight:600}
.lobbyRep .repok{margin-left:2px;color:var(--green);font-size:11px;font-weight:700;border:1px solid var(--green);border-radius:6px;padding:0 5px}
.lobbyRep .owedAmt{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.lobbyRep .owedLock{color:var(--ink3);font-size:11px;font-weight:700;border:1px solid var(--line);border-radius:6px;padding:0 5px}
.lobbyRep #btnWithdraw{padding:2px 10px}
/* clickable star widget - pure CSS star (no glyph, keeps the DOM ASCII) */
.starrate{display:flex;gap:8px;justify-content:center;margin:14px 0 6px}
.starrate .star{width:36px;height:36px;padding:0;border:0;cursor:pointer;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transition:background .12s,transform .08s}
.starrate .star:hover{transform:scale(1.08)}
.starrate .star.on{background:var(--gold)}

/* ---- password fields: show/hide, and problems stated in place ----
   The eye sits INSIDE the field's box (the input reserves room for it via
   padding-right) so it never reflows the form when it appears. */
.pwwrap{ position:relative; display:block; }
.pwwrap input{ width:100%; padding-right:44px; }
.pweye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--ink3); cursor:pointer; padding:0;
}
.pweye:hover{ color:var(--ink); background:var(--elev); }
.pweye svg{ width:20px; height:20px; display:block; }
.pweye.on{ color:var(--accent); }
/* A mismatch is a STOP, not a whisper: red text under the field, both boxes
   outlined, stated the moment it is true rather than only on submit. */
.fieldErr{
  margin-top:8px; padding:9px 12px; border-radius:9px;
  border:2px solid var(--danger); color:var(--danger);
  font-size:13.5px; font-weight:700; line-height:1.4;
}
#screen-onboard .fieldErr{ color:#c62828; border-color:#c62828; background:rgba(198,40,40,.07); }
html[data-bg="hc"] #screen-onboard .fieldErr{ color:var(--danger); border-color:var(--danger); background:rgba(255,107,107,.12); }
input.err, .pwwrap input.err{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(224,40,40,.18); }
#screen-onboard input.err{ border-color:#c62828; box-shadow:0 0 0 3px rgba(198,40,40,.16); }

/* ---- sign-in: the two ways in, and the account warning ----
   The first thing a new player sees is a choice of two, username+password
   first. Both buttons are full width so neither reads as the "small" option;
   the Vault one is ghost so the lead is unambiguous. */
#screen-onboard #obChoose{ display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
#screen-onboard #obChoose .btn{ height:46px; font-size:15px; font-weight:700; }
#screen-onboard #obBack{ margin-top:0; margin-bottom:10px; display:inline-block; }
/* The account warning, repeated at the moment of no return. Bigger than the
   inline note by design - this is the last point where a forgotten password
   is still fixable. */
.obWarnBig{
  border:2px solid var(--danger); border-radius:12px;
  padding:14px 16px; margin:4px 0 6px; font-size:15px; line-height:1.55;
}
.obWarnBig b.lead{ display:block; font-size:16px; margin-bottom:8px; }
.obWarnBig .hl{
  font-weight:800; background:rgba(245,199,17,.24);
  padding:1px 5px; border-radius:5px;
}
html[data-bg="hc"] .obWarnBig .hl{ background:rgba(255,204,0,.28); color:var(--ink); }
/* the same phrase in the small inline note: bolded rather than highlighted,
   so it carries the emphasis without shouting at the size it renders there */
#crWarnNote .hl{ font-weight:700; }

/* ================= ACCESSIBLE THEME (data-bg="hc") =================
   A THIRD app theme beside light and dark, for players with low vision.
   Everything above this block is untouched - light and dark render exactly
   as before; this only teaches the app one NEW value for data-bg.

   NAVY AND GOLD (Eli, 2026-07-28 - the charcoal draft is retired: "I hate
   that black"). No black anywhere: the ground is the design system's own
   Midnight Navy #0B192C, so the accessible theme reads as the same product
   rather than a bolted-on mode, and the ink is ITZA gold.

   Contrast is a RATIO, not a colour - measured against the navy ground:
     #FFCC00 gold ink   ~ 11.7:1     primary text and headings
     #F0DFA8 soft gold  ~ 13.3:1     secondary text (still AAA, not dimmed)
     #C9B784 tertiary   ~  8.9:1     the quietest text in the app
     #FFFFFF white      ~ 17.6:1     where white beats gold (board coords)
     #00E5FF cyan       ~ 11.5:1     live / clock state only, so "it is
                                     ticking" never depends on telling two
                                     golds apart
   Gold-on-navy and navy-on-gold are the same pairing inverted, so buttons
   stay AAA whichever way round they sit.
   NOTE ON FONTS: the palette suggested Atkinson Hyperlegible. Section 1
   forbids web fonts (no third party in the wallet's origin), so the system
   stack stays and the legibility budget goes to size, weight and contrast. */
html[data-bg="hc"]{
  --chrome:#0B192C; --panel:#12253F; --elev:#1B3454; --line:#3F5C80;
  --card:var(--panel);
  --ink:#FFCC00; --ink2:#F0DFA8; --ink3:#C9B784;
  --gold:#FFCC00; --gold2:#FFD633;
  /* semantic green (live / chain / win) lifted so it clears AAA on navy */
  --green:#4FE3A0; --green2:#6FEBB4;
  --navy:#0B192C; --sapphire:#1E3E62; --slate:#C9B784;
  --accent:#00E5FF;
  --danger:#FF6B6B;
  --ctrl:#12253F; --ctrl-line:#3F5C80;
  --ring:0 0 0 3px rgba(255,204,0,.45);
  --primary:#FFCC00; --primary-hi:#FFD633; --primary-ink:#0B192C;
}
html[data-bg="hc"] body{ background:var(--chrome); color:var(--ink); }
/* the decorative pyramid/word patterns sit behind text and cost contrast -
   the accessible theme always uses a flat ground. Two attributes, so this
   outranks the data-bgpat rules above without !important. */
html[data-bg="hc"][data-bgpat] body{ background-image:none; }
/* Borders carry the layout when colour alone cannot, and focus is
   unmissable (the palette's "2px solid border around active elements so the
   user never has to guess where their focus is"). */
html[data-bg="hc"] .topbar{ box-shadow:none; border-bottom:2px solid var(--line); }
html[data-bg="hc"] :focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
html[data-bg="hc"] .btn{ border-width:2px; font-weight:700; }
html[data-bg="hc"] .btn.gold{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
html[data-bg="hc"] .btn.gold:hover{ background:var(--gold2); border-color:var(--gold2); }
html[data-bg="hc"] .btn.ghost{ background:var(--elev); border-color:var(--ctrl-line); color:var(--ink); }
/* danger: a light coral that still clears AAA on navy, never a dark red */
html[data-bg="hc"] .btn.danger{ background:var(--danger); border-color:var(--danger); color:var(--navy); }
html[data-bg="hc"] input,
html[data-bg="hc"] select,
html[data-bg="hc"] .pill,
html[data-bg="hc"] .chip{ border-width:2px; }
/* clocks: a lifted navy box with cyan digits, so a ticking timer separates
   from the board instead of blending into the gold */
html[data-bg="hc"] .clk{ background:var(--elev); color:var(--accent); border:2px solid var(--line); font-weight:700; }
html[data-bg="hc"] .clk.run{ background:var(--elev); color:var(--accent); border-color:var(--accent); }
/* the home menu uses .menubtn, not .btn - the primary card gets the same
   gold treatment, with navy label text for the AAA pairing */
html[data-bg="hc"] .menubtn{ border-width:2px; }
html[data-bg="hc"] .menubtn.gold{ background:var(--gold); border-color:var(--gold); }
html[data-bg="hc"] .menubtn.gold b,
html[data-bg="hc"] .menubtn.gold span{ color:var(--navy); }
html[data-bg="hc"] .menubtn.gold span{ opacity:1; }
/* State must never rest on a subtle grey: an ON switch goes gold with a
   navy knob, an OFF switch keeps a visible outline, and the sliders use the
   theme accent instead of the stock blue. */
html[data-bg="hc"] input[type=checkbox]{ background:var(--elev); border:2px solid var(--line); }
html[data-bg="hc"] input[type=checkbox]:checked{ background:var(--gold); border-color:var(--gold); }
html[data-bg="hc"] input[type=checkbox]::before{ background:#F8FAFC; }
html[data-bg="hc"] input[type=checkbox]:checked::before{ background:var(--navy); }
html[data-bg="hc"] input[type=range]{ accent-color:var(--accent); }
/* The board sits on a navy page, so it gets a gold frame - its edge is then
   stated outright instead of resting on the squares alone. */
html[data-bg="hc"] #board,
html[data-bg="hc"] #previewBoard,
html[data-bg="hc"] #puzzleBoard,
html[data-bg="hc"] .cboard{ outline:2px solid var(--gold); outline-offset:0; }
/* Pieces keep their own SVG strokes; these add a second, opposite-colour
   halo so a piece can never be lost against a square of its own colour
   (the palette's "thick outer stroke", without touching the shared art). */
html[data-bg="hc"] .cb-piece[data-side="b"] svg{ filter:drop-shadow(0 0 1.6px #fff) drop-shadow(0 0 1.6px #fff); }
html[data-bg="hc"] .cb-piece[data-side="w"] svg{ filter:drop-shadow(0 0 1.6px #0B192C) drop-shadow(0 0 1.6px #0B192C); }
/* Sign-in wears its own self-contained palette (the --ob-* set), so the
   accessible theme has to reach it too - a low-vision player meets this
   screen FIRST. Same navy/gold system in that vocabulary. Those vars are
   declared ON #screen-onboard, so the override has to land there: one up on
   <html> is simply out-inherited. */
html[data-bg="hc"] #screen-onboard{
  --ob-blue:#00E5FF; --ob-blue-soft:#00C8DF; --ob-gold:#FFCC00;
  --ob-acc:#FFCC00; --ob-acc-ink:#0B192C;
  --ob-bg:#0B192C; --ob-bg2:#12253F; --ob-bg3:#1B3454;
  --ob-ink:#FFCC00; --ob-ink2:#F0DFA8; --ob-ink3:#C9B784;
  --ob-line:#3F5C80; --ob-line2:#3F5C80; --ob-hover:rgba(255,204,0,.12);
  --ob-card-shadow:none;
}
html[data-bg="hc"] #screen-onboard.on{ background:var(--ob-bg); }
html[data-bg="hc"] #screen-onboard .obcard{ border-width:2px; }
html[data-bg="hc"] #screen-onboard .btn.gold{ background:var(--ob-gold); color:#0B192C; border:2px solid var(--ob-gold); }
html[data-bg="hc"] #screen-onboard .btn.ghost{ background:var(--ob-bg3); color:var(--ob-ink); border:2px solid var(--ob-line2); }