/* V1.20. Material boards and viewer-specific checker finishes.
   These styles never encode game ownership, legal moves or die results. */
.cosmetic-board-mini { --board-bg:#111722;--board-bg-2:#171f2d;--rail:#30394a;--rail-hi:#424d61;--point-a:#c8ff38;--point-b:#8066ff; }
:is(.board-frame,.cosmetic-board-mini).theme-walnut { --board-bg:#102c24;--board-bg-2:#173b2e;--rail:#482715;--rail-hi:#96663a;--point-a:#eed3a1;--point-b:#80512e;--trim:#d0a264; }
:is(.board-frame,.cosmetic-board-mini).theme-oak { --board-bg:#342d24;--board-bg-2:#4a3e2a;--rail:#976a36;--rail-hi:#e4bc78;--point-a:#eed5a4;--point-b:#825730;--trim:#ffe0a2; }
:is(.board-frame,.cosmetic-board-mini).theme-nebula { --board-bg:#100e29;--board-bg-2:#281040;--rail:#261e49;--rail-hi:#59416e;--point-a:#e1a3ea;--point-b:#6653c7;--trim:#d59dea; }
:is(.board-frame,.cosmetic-board-mini).theme-lunar { --board-bg:#090f1d;--board-bg-2:#14243b;--rail:#223041;--rail-hi:#778998;--point-a:#a7d4e9;--point-b:#385480;--trim:#bbe7ff; }
:is(.board-frame,.cosmetic-board-mini).theme-cyber { --board-bg:#07191e;--board-bg-2:#09272c;--rail:#112930;--rail-hi:#25535d;--point-a:#35d5cc;--point-b:#306779;--trim:#61ffe8; }
:is(.board-frame,.cosmetic-board-mini).theme-quantum { --board-bg:#141929;--board-bg-2:#1e2b3a;--rail:#2c3549;--rail-hi:#566b84;--point-a:#c5e7f4;--point-b:#9c88cc;--trim:#c9c3ff; }
.cosmetic-board-mini.theme-emerald { --board-bg:#08231b;--board-bg-2:#0d3126;--rail:#164837;--rail-hi:#24654f;--point-a:#73f5a6;--point-b:#087d5a; }
.cosmetic-board-mini.theme-crimson { --board-bg:#250b13;--board-bg-2:#35101d;--rail:#57202f;--rail-hi:#7a2d41;--point-a:#ff6075;--point-b:#7e1f3a; }
.cosmetic-board-mini.theme-royal { --board-bg:#14102a;--board-bg-2:#211845;--rail:#382e60;--rail-hi:#514178;--point-a:#ffd66b;--point-b:#7858ff; }
.cosmetic-board-mini.theme-carbon { --board-bg:#090b0f;--board-bg-2:#11151b;--rail:#22272f;--rail-hi:#3b424e;--point-a:#d7dce5;--point-b:#515965; }
/* Layered grain on the frame and on the matching side rails. */
:is(.board-frame,.cosmetic-board-mini):is(.theme-walnut,.theme-oak) {
 background:repeating-linear-gradient(7deg,#14090400 0 5px,#1c0e0870 6px,#ffffff0c 7px,#14090400 10px),linear-gradient(93deg,var(--rail),var(--rail-hi) 22%,var(--rail) 52%,var(--rail-hi) 74%,var(--rail));
 box-shadow:inset 0 0 0 1px var(--trim),inset 0 0 0 5px #1d110744,0 14px 32px #0006;
}
#gameBoard:is(.theme-walnut,.theme-oak) :is(.board-balance-rail,.bar-column,.bearoff-tray),
.cosmetic-board-mini:is(.theme-walnut,.theme-oak) .mini-spine {
 background:repeating-linear-gradient(88deg,#ffffff0d 0 1px,transparent 2px 7px,#0003 8px 9px),linear-gradient(90deg,var(--rail),var(--rail-hi),var(--rail));
 box-shadow:inset 1px 0 #edcc8660,inset -1px 0 #1e100cbb;
}
:is(.theme-walnut,.theme-oak) :is(.board-grid,.mini-felt) {
 background:repeating-linear-gradient(3deg,#ffffff05 0 1px,transparent 1px 3px),repeating-linear-gradient(93deg,#0000000d 0 1px,transparent 1px 4px),radial-gradient(ellipse at 45% 45%,var(--board-bg-2),var(--board-bg));
}
#gameBoard:is(.theme-walnut,.theme-oak) .point::before { opacity:1; }
#gameBoard:is(.theme-walnut,.theme-oak) .point.tone-a::before { background:repeating-linear-gradient(88deg,#1c100e09 0 1px,transparent 2px 6px),linear-gradient(90deg,var(--point-a),#fff0 50%),var(--point-a); }
#gameBoard:is(.theme-walnut,.theme-oak) .point.tone-b::before { background:repeating-linear-gradient(86deg,#1c100e2b 0 1px,transparent 2px 5px),linear-gradient(90deg,var(--point-b),#fff2 50%),var(--point-b); }
/* Star layers stay beneath pieces and all move guidance. No moving stars over labels. */
:is(.theme-nebula,.theme-lunar) :is(.board-grid,.mini-felt) {
 background-image:radial-gradient(circle at 15% 20%,#eeedffaf 0 .8px,transparent 1.2px),radial-gradient(circle at 70% 75%,#b4ddff9c 0 .8px,transparent 1.3px),radial-gradient(ellipse at 20% 65%,#8f4ba844,transparent 52%),radial-gradient(ellipse at 78% 30%,#326da53f,transparent 45%),linear-gradient(130deg,var(--board-bg),var(--board-bg-2));
 background-size:97px 79px,137px 119px,100% 100%,100% 100%,100% 100%;
}
#gameBoard:is(.theme-nebula,.theme-lunar) .point::before { filter:drop-shadow(0 0 4px color-mix(in srgb,var(--trim),transparent 65%)); }
#gameBoard:is(.theme-nebula,.theme-lunar,.theme-cyber,.theme-quantum) { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trim),transparent 38%),inset 0 0 0 5px #060d1733,0 12px 34px #0006; }
#gameBoard:is(.theme-lunar,.theme-quantum) :is(.bar-column,.board-balance-rail,.bearoff-tray),
.cosmetic-board-mini:is(.theme-lunar,.theme-quantum) .mini-spine { background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 2px 4px),linear-gradient(90deg,var(--rail),var(--rail-hi) 47%,var(--rail)); }
/* Restrained circuitry, with no effect on source/destination outlines. */
:is(.theme-cyber,.theme-quantum) :is(.board-grid,.mini-felt) {
 background:linear-gradient(#69e8d410 1px,transparent 1px),linear-gradient(90deg,#69e8d410 1px,transparent 1px),radial-gradient(ellipse at 60% 20%,var(--board-bg-2),var(--board-bg));
 background-size:32px 32px,32px 32px,100% 100%;
}
#gameBoard.theme-cyber .board-grid { box-shadow:inset 0 0 0 1px #54e8d955,inset 0 0 38px #40decd12; }
#gameBoard.theme-cyber :is(.bar-column,.board-balance-rail,.bearoff-tray) { background:linear-gradient(90deg,var(--rail),var(--rail-hi),var(--rail));box-shadow:inset 1px 0 #59eed848,inset -1px 0 #59eed848; }
#gameBoard.theme-quantum .point::before { opacity:.92;filter:drop-shadow(1px 0 0 #e0efff99); }
#gameBoard.theme-quantum .board-grid::before { background:linear-gradient(128deg,transparent 15%,#bee2fb06 40%,#d4bdff12 49%,transparent 70%);background-size:200% 100%;animation:quantumLight 18s ease-in-out infinite alternate; }
#gameBoard.theme-nebula .board-grid::before { background:radial-gradient(ellipse at 45% 55%,#dba5f418,transparent 60%);animation:nebulaLight 16s ease-in-out infinite alternate; }
#gameBoard.theme-walnut .board-grid::before,#gameBoard.theme-oak .board-grid::before,#gameBoard.theme-lunar .board-grid::before,#gameBoard.theme-cyber .board-grid::before { background:none; }
@keyframes quantumLight { from {background-position:0 0} to {background-position:100% 0} }
@keyframes nebulaLight { from {opacity:.35} to {opacity:.85} }
/* Preview uses the same material variables as the playable board. */
.material-board-preview { background:radial-gradient(ellipse at center,#303749,#0d131e);padding:18px; }
.cosmetic-board-mini { width:100%;height:100%;padding:9px;border-radius:12px;background:linear-gradient(130deg,var(--rail-hi),var(--rail));box-shadow:0 12px 20px #0005,inset 0 0 0 1px #fff3; }
.mini-felt { height:100%;width:100%;display:grid;grid-template-columns:1fr 8% 1fr;grid-template-rows:1fr 1fr;gap:0;position:relative;overflow:hidden;border-radius:5px;background:linear-gradient(130deg,var(--board-bg),var(--board-bg-2)); }
.mini-quarter { display:flex;gap:1px;padding:0 2px;min-height:0; }
.mini-quarter:nth-child(4) { grid-area:2/1; }.mini-quarter:nth-child(5) { grid-area:2/3; }
.mini-inlay { flex:1;display:block;height:89%;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--point-a); }
.mini-inlay.b { background:var(--point-b); }.mini-quarter.bottom { align-items:end; }.mini-quarter.bottom .mini-inlay { transform:rotate(180deg); }
.mini-spine { grid-area:1/2/3/3;background:linear-gradient(90deg,var(--rail),var(--rail-hi),var(--rail)); }
.mini-token { width:8%;aspect-ratio:1;border-radius:50%;position:absolute;box-shadow:0 3px 4px #0008,inset 0 0 0 1px #fff7; }
.mini-token.ivory { top:8%;left:7%;background:radial-gradient(circle at 30% 25%,#fff,#dce0e7 65%,#777f8f); }.mini-token.dark { bottom:8%;right:8%;background:radial-gradient(circle at 30% 25%,#657085,#111821 65%,#020409); }
/* All checker surfaces share the local presentation palette; W and B remain
   logical identities even when the displayed colors are inverted or collide. */
#gameView .checker.white,#gameView .white-bar-zone .bar-checker,#gameView .score-checker.white,#gameView .turn-avatar.white {
 background:radial-gradient(circle at 30% 23%,var(--piece-white-light,#fff),var(--piece-white-color,#f4f7fc) 49%,var(--piece-white-edge,#9da7ba));color:var(--piece-white-text,#101724);
}
#gameView .checker.black,#gameView .black-bar-zone .bar-checker,#gameView .score-checker.black,#gameView .turn-avatar.black {
 background:radial-gradient(circle at 30% 23%,var(--piece-black-light,#59647a),var(--piece-black-color,#181d28) 49%,var(--piece-black-edge,#04070b));color:var(--piece-black-text,#fff);
}
#gameView .checker,#gameView .bar-checker { border:1px solid #ffffff75; }
#gameView .checker-count,#gameView .bar-count { background:#070f20ed;color:#fff;border:1px solid #dce8ff99; }
#gameView #whiteAvatar { border-color:var(--piece-white-color,#f4f7fc);box-shadow:inset 0 0 0 2px var(--piece-white-edge,#9da7ba),0 0 0 1px #a6b1c850; }
#gameView #blackAvatar { border-color:var(--piece-black-light,#59647a);box-shadow:inset 0 0 0 2px var(--piece-black-color,#181d28),0 0 0 1px #a6b1c850; }
#gameView #whiteOffTray { color:var(--piece-white-light,#fff); }#gameView #blackOffTray { color:var(--piece-black-light,#59647a); }
#checkerMatchNotice { font-size:11px;line-height:1.5;color:#b6c1d2;margin:10px 0; }
.checker-collection-note { max-width:860px;margin:0 0 20px;padding:12px 16px;border-left:2px solid #c8ff38;color:#bdc7d8;background:#c8ff3806;line-height:1.6;font-size:13px; }
.checker-preview { --finish:#f4f7fc;--glint:#fff;--bevel:#9da7ba;background:radial-gradient(ellipse at 50% 80%,#2d384e,#111723 70%);position:relative;overflow:hidden; }
.collection-checker { display:block;position:absolute;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 30% 23%,var(--glint),var(--finish) 48%,var(--bevel));border:1px solid #ffffff88;box-shadow:0 14px 18px #0008,inset 0 0 0 5px #ffffff18,inset 0 -5px 9px #0003; }
.collection-checker.front { left:calc(50% - 23px);top:calc(50% - 34px); }.collection-checker.rear { left:calc(50% - 71px);top:calc(50% - 53px);width:72px;height:72px; }
.checker-preview[data-checker="standard"] .rear { background:radial-gradient(circle at 30% 23%,#59647a,#181d28 55%,#04070b); }
.profile-checker-choice { display:flex;gap:8px;align-items:center;justify-content:space-between;color:#b8c3d4;font-size:12px;line-height:1.5;padding:0 0 14px; }.profile-checker-choice strong { color:#f2f6ff; }
@media (max-width:720px) { .vault-tabs { width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:16px;gap:2px; }.vault-tabs .vault-tab { padding:12px 4px;font-size:12px;min-width:0; }.material-board-preview {padding:12px;}.checker-collection-note {font-size:12px;} }
@media (prefers-reduced-motion:reduce) { #gameBoard.theme-quantum .board-grid::before,#gameBoard.theme-nebula .board-grid::before {animation:none;} }

.checker-preview[data-checker="ivory"] { --finish:#f4f7fc;--glint:#ffffff;--bevel:#9da7ba; }
.checker-preview[data-checker="obsidian"] { --finish:#181d28;--glint:#59647a;--bevel:#04070b; }
.checker-preview[data-checker="emerald"] { --finish:#14915d;--glint:#9effc7;--bevel:#064530; }
.checker-preview[data-checker="sapphire"] { --finish:#2863d8;--glint:#a9d2ff;--bevel:#0b235b; }
.checker-preview[data-checker="ruby"] { --finish:#c42f56;--glint:#ffb3c4;--bevel:#590f28; }
.checker-preview[data-checker="amethyst"] { --finish:#8b40ce;--glint:#e9b9ff;--bevel:#391c68; }
.checker-preview[data-checker="gold"] { --finish:#ddb044;--glint:#fff0b5;--bevel:#775014; }
.checker-preview[data-checker="cyan"] { --finish:#27cadb;--glint:#ceffff;--bevel:#0a657e; }
/* Keep counters readable even when a dark finish meets a dark rail, or a
   light wood rail is selected. Palette ownership stays on the tray metadata. */
#gameView .bearoff-tray strong { color:#f4f7fc;background:#0b1120da;border-radius:4px;box-shadow:0 0 0 2px #0b1120da;text-shadow:none; }