/* Board looks — the colours of the board and the set of pieces, chosen by the
   club (Institute settings) and by the teacher for a class (the 🎨 button).
   A page carries data-cbb / data-cbp on <html>; a preview carries them on
   its own box. Only variables are set here, so nothing is drawn twice, and a
   piece picture is fetched only when its set is in use (then cached). */

/* ── Boards ─────────────────────────────────────────────── */
[data-cbb]{--cb-img:none;--cb-pad:0px;--cb-bw:3px;--cb-mfrom:initial;--cb-mto:initial;--cb-sel:initial}
[data-cbb=classic]{--cb-lt:#F0D9B5;--cb-dk:#B58863;--cb-frame:#5a3e20;--cb-co-lt:#7a5230;--cb-co-dk:#F0D9B5;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=green]  {--cb-lt:#EEEED2;--cb-dk:#769656;--cb-frame:#4B6634;--cb-co-lt:#5C7A40;--cb-co-dk:#EEEED2;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=blue]   {--cb-lt:#DEE3E6;--cb-dk:#8CA2AD;--cb-frame:#56707D;--cb-co-lt:#5D7783;--cb-co-dk:#EEF2F4;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=ocean]  {--cb-lt:#E4EEF7;--cb-dk:#3F6E9E;--cb-frame:#22476E;--cb-co-lt:#3F6E9E;--cb-co-dk:#E4EEF7;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=slate]  {--cb-lt:#E2E4E7;--cb-dk:#7F8A96;--cb-frame:#4A535D;--cb-co-lt:#5E6873;--cb-co-dk:#F1F2F4;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=purple] {--cb-lt:#EDE5F5;--cb-dk:#8C6BB8;--cb-frame:#5A3F80;--cb-co-lt:#7A59A6;--cb-co-dk:#F3EDF9;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=coral]  {--cb-lt:#FBE7D9;--cb-dk:#D98466;--cb-frame:#9C4F36;--cb-co-lt:#B8644A;--cb-co-dk:#FFF1E8;--cb-tx-lt:none;--cb-tx-dk:none}
[data-cbb=night]  {--cb-lt:#A7B3C4;--cb-dk:#4F5D73;--cb-frame:#2B3443;--cb-co-lt:#3E4A5C;--cb-co-dk:#D5DCE6;--cb-tx-lt:none;--cb-tx-dk:none}
/* Pictured boards: the whole board — squares and carved / studded / bamboo frame —
   is one picture (assets/boards/, about 2–38 KB each, fetched only when chosen).
   The squares are see-through so the picture shows; the frame is the padding. */
[data-cbb=wood]{--cb-img:url('/assets/boards/wood.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:rgba(255,218,170,.30);--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#8A5527;--cb-co-dk:#F3DDB6;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=marble]{--cb-img:url('/assets/boards/marble.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#55585E;--cb-co-dk:#E9E9EC;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=stone]{--cb-img:url('/assets/boards/stone.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#4E524F;--cb-co-dk:#E2E2DC;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=glass]{--cb-img:url('/assets/boards/glass.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#3E7E80;--cb-co-dk:#F2FFFF;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=metal]{--cb-img:url('/assets/boards/metal.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#3A2E14;--cb-co-dk:#E9C97C;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=ancient]{--cb-img:url('/assets/boards/ancient.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#7A4520;--cb-co-dk:#F2D2A6;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=medieval]{--cb-img:url('/assets/boards/medieval.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#6A3018;--cb-co-dk:#EFDFBF;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=minimal]{--cb-img:url('/assets/boards/minimal.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#2A2A2C;--cb-co-dk:#EDEDED;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=colorful]{--cb-img:url('/assets/boards/colorful.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#24439E;--cb-co-dk:#F0DDAA;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=bamboo]{--cb-img:url('/assets/boards/bamboo.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#7E5222;--cb-co-dk:#F2D9A6;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=leather]{--cb-img:url('/assets/boards/leather.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#5A2C18;--cb-co-dk:#E8B88E;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}
[data-cbb=space]{--cb-img:url('/assets/boards/space.webp?v=2');--cb-pad:1.875%;--cb-bw:0px;--cb-lt:transparent;--cb-dk:transparent;--cb-tx-lt:none;--cb-tx-dk:none;--cb-frame:transparent;--cb-co-lt:#E8E0FF;--cb-co-dk:#C8BEF0;
  --cb-mfrom:rgba(205,210,60,.45);--cb-mto:rgba(170,187,30,.55);--cb-sel:rgba(246,246,105,.6)}

/* ── Pieces ─────────────────────────────────────────────── */
/* "classic" is the default set drawn in classroom.css. */
[data-cbp=blue]{--pc-bk:url('/assets/pieces/blue/bK.svg');--pc-bq:url('/assets/pieces/blue/bQ.svg');--pc-br:url('/assets/pieces/blue/bR.svg');
  --pc-bb:url('/assets/pieces/blue/bB.svg');--pc-bn:url('/assets/pieces/blue/bN.svg');--pc-bp:url('/assets/pieces/blue/bP.svg')}
[data-cbp=red]{--pc-bk:url('/assets/pieces/red/bK.svg');--pc-bq:url('/assets/pieces/red/bQ.svg');--pc-br:url('/assets/pieces/red/bR.svg');
  --pc-bb:url('/assets/pieces/red/bB.svg');--pc-bn:url('/assets/pieces/red/bN.svg');--pc-bp:url('/assets/pieces/red/bP.svg')}
/* 3D sets (pictures): gold & blue, marble, wood, royal Indian, medieval, Indian. */
[data-cbp=royal]{
  --pc-wk:url('/assets/pieces/royal/wK.webp?v=3');--pc-wq:url('/assets/pieces/royal/wQ.webp?v=3');--pc-wr:url('/assets/pieces/royal/wR.webp?v=3');
  --pc-wb:url('/assets/pieces/royal/wB.webp?v=3');--pc-wn:url('/assets/pieces/royal/wN.webp?v=3');--pc-wp:url('/assets/pieces/royal/wP.webp?v=3');
  --pc-bk:url('/assets/pieces/royal/bK.webp?v=3');--pc-bq:url('/assets/pieces/royal/bQ.webp?v=3');--pc-br:url('/assets/pieces/royal/bR.webp?v=3');
  --pc-bb:url('/assets/pieces/royal/bB.webp?v=3');--pc-bn:url('/assets/pieces/royal/bN.webp?v=3');--pc-bp:url('/assets/pieces/royal/bP.webp?v=3')}
[data-cbp=marble]{
  --pc-wk:url('/assets/pieces/marble/wK.webp?v=3');--pc-wq:url('/assets/pieces/marble/wQ.webp?v=3');--pc-wr:url('/assets/pieces/marble/wR.webp?v=3');--pc-wb:url('/assets/pieces/marble/wB.webp?v=3');--pc-wn:url('/assets/pieces/marble/wN.webp?v=3');--pc-wp:url('/assets/pieces/marble/wP.webp?v=3');
  --pc-bk:url('/assets/pieces/marble/bK.webp?v=3');--pc-bq:url('/assets/pieces/marble/bQ.webp?v=3');--pc-br:url('/assets/pieces/marble/bR.webp?v=3');--pc-bb:url('/assets/pieces/marble/bB.webp?v=3');--pc-bn:url('/assets/pieces/marble/bN.webp?v=3');--pc-bp:url('/assets/pieces/marble/bP.webp?v=3')}
[data-cbp=wood]{
  --pc-wk:url('/assets/pieces/wood/wK.webp?v=3');--pc-wq:url('/assets/pieces/wood/wQ.webp?v=3');--pc-wr:url('/assets/pieces/wood/wR.webp?v=3');--pc-wb:url('/assets/pieces/wood/wB.webp?v=3');--pc-wn:url('/assets/pieces/wood/wN.webp?v=3');--pc-wp:url('/assets/pieces/wood/wP.webp?v=3');
  --pc-bk:url('/assets/pieces/wood/bK.webp?v=3');--pc-bq:url('/assets/pieces/wood/bQ.webp?v=3');--pc-br:url('/assets/pieces/wood/bR.webp?v=3');--pc-bb:url('/assets/pieces/wood/bB.webp?v=3');--pc-bn:url('/assets/pieces/wood/bN.webp?v=3');--pc-bp:url('/assets/pieces/wood/bP.webp?v=3')}
[data-cbp=mughal]{
  --pc-wk:url('/assets/pieces/mughal/wK.webp?v=3');--pc-wq:url('/assets/pieces/mughal/wQ.webp?v=3');--pc-wr:url('/assets/pieces/mughal/wR.webp?v=3');--pc-wb:url('/assets/pieces/mughal/wB.webp?v=3');--pc-wn:url('/assets/pieces/mughal/wN.webp?v=3');--pc-wp:url('/assets/pieces/mughal/wP.webp?v=3');
  --pc-bk:url('/assets/pieces/mughal/bK.webp?v=3');--pc-bq:url('/assets/pieces/mughal/bQ.webp?v=3');--pc-br:url('/assets/pieces/mughal/bR.webp?v=3');--pc-bb:url('/assets/pieces/mughal/bB.webp?v=3');--pc-bn:url('/assets/pieces/mughal/bN.webp?v=3');--pc-bp:url('/assets/pieces/mughal/bP.webp?v=3')}
[data-cbp=medieval]{
  --pc-wk:url('/assets/pieces/medieval/wK.webp?v=3');--pc-wq:url('/assets/pieces/medieval/wQ.webp?v=3');--pc-wr:url('/assets/pieces/medieval/wR.webp?v=3');--pc-wb:url('/assets/pieces/medieval/wB.webp?v=3');--pc-wn:url('/assets/pieces/medieval/wN.webp?v=3');--pc-wp:url('/assets/pieces/medieval/wP.webp?v=3');
  --pc-bk:url('/assets/pieces/medieval/bK.webp?v=3');--pc-bq:url('/assets/pieces/medieval/bQ.webp?v=3');--pc-br:url('/assets/pieces/medieval/bR.webp?v=3');--pc-bb:url('/assets/pieces/medieval/bB.webp?v=3');--pc-bn:url('/assets/pieces/medieval/bN.webp?v=3');--pc-bp:url('/assets/pieces/medieval/bP.webp?v=3')}
[data-cbp=indian]{
  --pc-wk:url('/assets/pieces/indian/wK.webp?v=3');--pc-wq:url('/assets/pieces/indian/wQ.webp?v=3');--pc-wr:url('/assets/pieces/indian/wR.webp?v=3');--pc-wb:url('/assets/pieces/indian/wB.webp?v=3');--pc-wn:url('/assets/pieces/indian/wN.webp?v=3');--pc-wp:url('/assets/pieces/indian/wP.webp?v=3');
  --pc-bk:url('/assets/pieces/indian/bK.webp?v=3');--pc-bq:url('/assets/pieces/indian/bQ.webp?v=3');--pc-br:url('/assets/pieces/indian/bR.webp?v=3');--pc-bb:url('/assets/pieces/indian/bB.webp?v=3');--pc-bn:url('/assets/pieces/indian/bN.webp?v=3');--pc-bp:url('/assets/pieces/indian/bP.webp?v=3')}
[data-cbp=royal] .cb-pc,[data-cbp=marble] .cb-pc,[data-cbp=wood] .cb-pc,[data-cbp=mughal] .cb-pc,
[data-cbp=medieval] .cb-pc,[data-cbp=indian] .cb-pc{inset:1%}          /* these pictures carry their own margin */

/* ── The picker (class 🎨 button and Institute settings) ── */
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.lk-opt{border:2px solid transparent;border-radius:9px;padding:5px;background:none;cursor:pointer;text-align:center;font:inherit;font-size:11.5px;color:inherit}
.lk-opt:hover{border-color:rgba(184,134,11,.45)}
.lk-opt.on{border-color:#B8860B;background:rgba(184,134,11,.08)}
.lk-sw{display:grid;grid-template-columns:repeat(4,1fr);aspect-ratio:1;border:2px solid var(--cb-frame);border-radius:4px;overflow:hidden;margin-bottom:4px;background:var(--cb-img) center/100% 100% no-repeat}
.lk-sw i{display:block}
.lk-sw i.l{background:var(--cb-tx-lt),var(--cb-lt)}
.lk-sw i.d{background:var(--cb-tx-dk),var(--cb-dk)}
.lk-pcs{display:flex;justify-content:center;align-items:flex-end;gap:2px;height:44px;margin-bottom:4px;border-radius:5px;background:#E9DCC2}
.lk-pcs img{width:38px;height:38px;object-fit:contain}