.brand { padding: 0; border: 0; background: none; color: var(--text); }
.brand-rook { color: var(--accent); }
.sw[data-theme="crystal"] { --sl: #e2e6ff; --sd: #2142b5; }

body[data-ui="crystal"] {
  color-scheme: light;
  --bg: #f8eee2;
  --surface: #fff9f1;
  --surface2: #f0e6d9;
  --text: #0c1836;
  --text2: #424858;
  --muted: #636574;
  --line: #ddd2c7;
  --line2: #c5bcb3;
  --ink: #112ca3;
  --ink-text: #fff;
  --accent: #1738bd;
  --accent-soft: #e7e9fa;
  --good: #24724e;
  --bad: #ae3b30;
  --radius: 8px;
  --radius-sm: 5px;
}
[data-ui="crystal"] .topbar {
  max-width: 1200px; min-height: 76px; padding: 8px 0;
  width: calc(100% - clamp(32px, 7vw, 100px));
  border-bottom: 1px solid #959191; gap: clamp(16px, 3vw, 46px);
}
[data-ui="crystal"] .brand { font: 600 clamp(24px, 3vw, 40px)/1 Georgia, serif; letter-spacing: -.055em; gap: 8px; }
[data-ui="crystal"] .brand-rook { color: #1534b8; width: .59em; height: .79em; }
[data-ui="crystal"] .tabs { margin: 0; border-inline-start: 1px solid var(--line2); padding-inline-start: clamp(18px,3vw,45px); gap: clamp(18px,3vw,46px); }
[data-ui="crystal"] .tab { color: var(--text2); }
[data-ui="crystal"] .tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
[data-ui="crystal"] .tab::after { height: 3px; background: var(--accent); }
[data-ui="crystal"] #btnSettings { margin-inline-start: auto; border-color: var(--line2); }
[data-ui="crystal"] .home { max-width: 1200px; width: calc(100% - clamp(32px, 7vw, 100px)); padding: 0 0 40px; }

.crystal-hero {
  isolation: isolate; position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(400px, 55vw, 620px); border-bottom: 1px solid #9c948c;
  background: radial-gradient(ellipse at 28% 50%, #f5dfca, var(--bg) 69%);
}
.knight-studio {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; aspect-ratio: 1.5;
  pointer-events: none; transform-origin: 35% 78%;
  background: url(cobalt-knight.jpg) no-repeat center / cover;
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 63%,transparent);
}
.knight-studio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--bg),transparent 5%,transparent 88%,var(--bg));
}
.hero-copy { width: 45%; margin-left: auto; margin-right: 1%; padding: 25px 2.5%; }
.hero-copy h1 { font: 500 clamp(86px, 9.8vw, 150px)/.9 var(--serif); letter-spacing: -.055em; margin: 0; }
.hero-copy h1 span { display: block; overflow: hidden; padding-block: .09em .16em; margin-block: -.09em -.16em; }
.hero-copy h1 b { display: block; font: inherit; }
.hero-copy p { margin: clamp(20px,3vw,42px) 0 14px; color: var(--text2); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
[data-ui="crystal"] .btn { border-radius: 5px; }
.hero-actions .btn.primary {
  border: 0; border-radius: 2px; padding: 13px clamp(16px,2.2vw,32px);
  background: linear-gradient(110deg,#1428a4,#203fce); gap: 18px;
  box-shadow: inset 0 1px 0 #ffffff44; font-size: 18px;
}
.hero-actions .btn:not(.primary) { background: none; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; padding-inline: 0; color: var(--text); }
.home-shelf { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); margin: 24px 0; gap: clamp(22px,4vw,66px); }
.home-shelf .club-library { margin: 0; }
.home-shelf .club-row { padding: 16px 0; }
.home-shelf .club-row:hover { background: transparent; color: var(--accent); }
.home-shelf .club-row strong { font: 500 23px/1.2 var(--serif); }
.home-shelf .club-row small { margin-top: 4px; font-size: 13px; }
.home-shelf .club-daily {
  display: grid; align-content: center; align-items: center; grid-template-columns: 1fr auto; gap: 5px 14px; height: 100%;
  padding: 12px 0; padding-inline-start: clamp(18px,3vw,42px); border: 0; border-inline-start: 1px solid var(--line2);
  border-radius: 0; background: none;
}
.home-shelf .club-daily p { margin: 0 0 4px; font-size: 14px; }
.home-shelf .club-daily > :is(.mini,.ic) { grid-row: 1/4; grid-column: 2; width: min(8vw,92px); }
.home-shelf .club-daily .btn { padding: 5px 16px; }

[data-board="crystal"] {
  --light: #e4e9fc; --dark: #3154b7; --sel: #ffe79266; --hl: #ffe9a333; --dotc: #081b48a8;
}
[data-board="crystal"] .board-wrap {
  position: relative; isolation: isolate; align-self: start; padding: clamp(5px,1vw,12px); border-radius: 2.5%;
  background:
    linear-gradient(43deg,transparent 3%,#c5e4ff 3.6%,#3561e3 4.2%,transparent 5%,transparent 91%,#e8f5ff 93%,transparent 95%),
    conic-gradient(from 40deg at 50% 50%,#15267f,#8baeff 12%,#12299a 24%,#08195c 33%,#4876f0 37%,#e0f4ff 40%,#243dba 44%,#07154e 58%,#7aa3fc 65%,#102688 74%,#678ef8 82%,#ecf6ff 89%,#2d4abb 95%,#15267f);
  box-shadow: inset 0 0 0 1px #203d8d,inset 1px 1px 2px 2px #d2e6ffbf,inset -2px -3px 2px #0b2264,
    0 3px 1px #233984, 0 9px 13px -8px #264bccbb, 8px 19px 26px -21px #1030e7;
}
[data-board="crystal"] .board-wrap::before {
  content: ""; position: absolute; inset: 2px; border: 1px solid #adcaffb3; border-radius: inherit; pointer-events: none;
}
[data-board="crystal"] #board { border-radius: 1%; box-shadow: 0 0 0 1px #172972, 0 0 0 2px #c4ddffba; }
[data-board="crystal"] .cb-squares { background: #284ec9 url(cobalt-glass.jpg) center / cover; }
[data-board="crystal"] .cb-sq {
  box-shadow: inset 1px 1px 1px #f3f8ffab, inset -1px -1px 1px #1b319768;
}
[data-board="crystal"] .cb-sq.light { background: radial-gradient(ellipse at 92% 98%,#ffffff90,transparent 37%), linear-gradient(141deg,#fff9ecf0,#dce5fbdf 57%,#f4f5fcda); }
[data-board="crystal"] .cb-sq.dark { background: radial-gradient(ellipse at 4% 94%,#a9caff38,transparent 33%), linear-gradient(137deg,#8eb7ff63,#1d39a24d 36%,#15288659 76%,#abc9ff6b); }
[data-board="crystal"] .cb-sq.check { background: radial-gradient(circle,#fc5648 0%,#fb7c699c 54%,transparent 80%),var(--light); }
[data-board="crystal"] .cb-sq.last::before { background: var(--hl); box-shadow: inset 0 0 0 2px #efc863; }
[data-board="crystal"] .cb-sq.sel::before { background: var(--sel); box-shadow: inset 0 0 0 3px #b78213; }
[data-board="crystal"] .cb-sq.dot::after { box-shadow: 0 0 0 1px #c9dbffd9; }
[data-board="crystal"] .cb-sq.light .coord { color: #253969; }
[data-board="crystal"] .cb-sq.dark .coord { color: #fff; text-shadow: 0 1px 2px #001645; }
[data-board="crystal"] .cb-pc:not(.dragging) { filter: drop-shadow(0 1px 1px #fff9) drop-shadow(0 2px 1px #0c1f4899); }

[data-ui="crystal"] .layout { padding-top: 18px; }
[data-ui="crystal"] .player-bar { border-block-end: 1px solid var(--line); padding-block: 3px; }
[data-ui="crystal"] .avatar.me { background: #e4e7fa; }
[data-ui="crystal"] .avatar.bot { background: linear-gradient(145deg,#385eba,#152d77); }
[data-ui="crystal"] .avatar.b { background: #ccd4e3; }
[data-ui="crystal"] .clock { border-radius: 4px; }
[data-ui="crystal"] .side { padding: 17px; margin-top: 49px; border: 1px solid var(--line2); border-radius: 6px; background: var(--surface); }
[data-ui="crystal"] .status { color: var(--text); }
[data-ui="crystal"] .chip { color: var(--text2); }
[data-ui="crystal"] .mv.cur { background: var(--accent); color: white; }
[data-ui="crystal"] .acc-card.w { background: var(--accent-soft); color: var(--text); }
[data-ui="crystal"] .acc-card.b { background: var(--text); }
[data-ui="crystal"] .gbg { fill: #f4efe8; }
[data-ui="crystal"] .gfill { fill: #637fe143; }
.gtrace { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gcur { transition: transform .16s ease-out; }
[data-ui="crystal"] .graph { border-radius: 3px; border: 1px solid var(--line2); }
#navPosition { display: none; }
[data-ui="crystal"].reviewing .navbar { grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; }
[data-ui="crystal"].reviewing #navPosition { display: block; min-width: 68px; border-radius: 4px; padding: 4px 10px; background: var(--ink); color: white; text-align: center; font-weight: 700; }
[data-ui="crystal"] .dlg { border: 1px solid var(--line2); box-shadow: 0 22px 95px -25px #14245866; }
[data-ui="crystal"] .dlg::backdrop { background: #10204755; }
.hero-track.is-moving::after { content: ""; display: block; height: clamp(260px,52svh,500px); }
.hero-track.is-moving .home-scene { position: sticky; top: 0; display: flow-root; }
.knight-stage,.hero-skip,.hero-progress { display: none; }
.has-sculpture .knight-studio { display: none; }
.has-sculpture { background: radial-gradient(ellipse at 32% 50%,#ffe8cc 0%,#f8eddf 48%,var(--bg) 78%); }
.has-sculpture::before {
  content: ""; position: absolute; inset: 46% 0 65px; pointer-events: none;
  background: url(cobalt-knight.jpg) no-repeat 100% 100% / 195% 700%;
  mask-image: radial-gradient(ellipse 65% 49% at 32% 63%,#0008,transparent 85%);
}
.has-sculpture .knight-stage {
  display: block; position: absolute; z-index: 3; inset: 0 auto 68px 2%; width: 49%;
  transform-origin: 50% 80%; pointer-events: none;
}
.knight-stage::before {
  content: ""; position: absolute; left: 5%; bottom: 1%; width: 95%; height: 10%; transform: rotate(4deg);
  background: radial-gradient(ellipse at 56% 50%,#1114458c,transparent 46%),
    radial-gradient(ellipse at 30% 40%,#375cdb77,transparent 60%);
  filter: blur(4px);
}
.knight-stage canvas { position: relative; width: 100%; height: 100%; object-fit: contain; }
.has-sculpture:not(.has-turntable) .knight-stage canvas, .passage-knight.use-poster { background: url(art/knight-poster.png) center / contain no-repeat; }
.has-sculpture .hero-copy { display: contents; }
.has-sculpture .hero-copy h1 { position: absolute; top: 20%; right: 3%; width: 43%; z-index: 1; }
.has-sculpture .hero-copy p { position: absolute; left: 1%; bottom: 22px; margin: 0; z-index: 4; }
.has-sculpture .hero-actions { position: absolute; right: 1%; bottom: 10px; z-index: 4; }
.has-sculpture::after { content: ""; position: absolute; inset: auto 1% 69px; height: 1px; background: var(--line2); }
.has-turntable .hero-skip {
  display: grid; place-items: center; position: absolute; z-index: 5; bottom: 12px; left: calc(50% - 20px);
  width: 40px; height: 40px; border: 1px solid #16244e45; border-radius: 50%;
  background: #faf0e5da; color: var(--ink); font-size: 21px; cursor: pointer;
}
.has-turntable .hero-progress { display: block; height: 2px; background: var(--accent); position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; transform-origin: left; }
.crystal-passage { position: fixed; z-index: 40; inset: 0; pointer-events: none; overflow: hidden; isolation: isolate; }
.passage-backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.passage-backdrop .crystal-hero { position: absolute; margin: 0; min-height: 0; }
.passage-backdrop .knight-stage canvas, .receiving-knight { visibility: hidden; }
.passage-knight { position: absolute; display: block; pointer-events: none; }
@keyframes crystal-dialog { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  [data-ui="crystal"][data-motion="on"] .dlg[open] { animation: crystal-dialog .28s ease-out; }
}
body[data-motion="off"] *, body[data-motion="off"] *::before, body[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 861px) {
  [data-ui="crystal"] .board-col { --bsize: min(100%, calc(100vh - 228px)); }
  [data-ui="crystal"] .side { max-height: calc(100vh - 162px); }
  [data-ui="crystal"].reviewing .side { height: calc(100vh - 162px); }
}
@media (max-width: 860px) {
  [data-ui="crystal"] .side { margin: 0; }
  .hero-copy h1 { font-size: clamp(64px,11.5vw,96px); }
  .home-shelf { grid-template-columns: minmax(0,1.5fr) minmax(180px,1fr); gap: 16px; }
}
@media (max-width: 600px) {
  [data-ui="crystal"] .topbar { width: calc(100% - 24px); min-height: 52px; gap: 7px; }
  [data-ui="crystal"] .brand { font-size: 22px; gap: 3px; }
  [data-ui="crystal"] .brand span { display: inline; }
  [data-ui="crystal"] .tabs { gap: 1px; padding-inline-start: 5px; border: 0; }
  [data-ui="crystal"] .tab { font-size: 13px; }
  [data-ui="crystal"] #btnSettings { width: 32px; height: 32px; flex: none; }
  [data-ui="crystal"] .home { width: calc(100% - 24px); }
  .crystal-hero { min-height: clamp(315px,88vw,440px); }
  .knight-studio { top: 5%; bottom: 3%; left: -21%; }
  .hero-track.is-moving::after { height: clamp(170px,28svh,260px); }
  .crystal-hero.has-sculpture { min-height: clamp(370px,104vw,470px); }
  .has-sculpture .knight-stage { inset: 2% auto 77px -3%; width: 56%; }
  .has-sculpture .hero-copy h1 { right: 1%; top: 22%; width: 48%; }
  .has-sculpture .hero-copy p { left: auto; right: 1%; bottom: 50px; }
  .has-sculpture .hero-actions { bottom: 5px; gap: 14px; }
  .has-turntable .hero-skip { width: 32px; height: 32px; left: 1%; bottom: 10px; }
  .hero-copy { width: 47%; margin-right: 0; padding: 16px 3px; }
  .hero-copy h1 { font-size: clamp(54px,13.6vw,80px); }
  .hero-copy p { font-size: 12px; margin: 17px 0 10px; }
  .hero-actions { gap: 5px; }
  .hero-actions .btn.primary { font-size: 15px; padding: 10px 14px; gap: 10px; }
  .hero-actions .btn:not(.primary) { font-size: 13px; padding: 5px 0; }
  .home-shelf { grid-template-columns: 1fr; margin: 8px 0; gap: 0; }
  .home-shelf .club-rows { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
  .home-shelf .club-row { gap: 8px; align-items: start; }
  .home-shelf .club-row > .ic-arrow { display: none; }
  .home-shelf .club-row strong { font-size: 19px; }
  .home-shelf .club-row small { font-size: 12px; }
  .home-shelf .club-daily { border: 0; padding: 16px 0; }
  .home-shelf .club-daily > :is(.mini,.ic) { width: 65px; }
  [data-ui="crystal"] .layout { padding: 4px 8px 16px; }
  [data-ui="crystal"] .side { padding: 12px 5px; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: transparent; }
  [data-ui="crystal"].reviewing .panel:has(.graph), [data-ui="crystal"].reviewing .review:has(.graph) { display: contents; }
  [data-ui="crystal"].reviewing .graph { order: 2; height: 66px; }
  [data-ui="crystal"].reviewing .moves-box { order: 3; }
  [data-ui="crystal"].reviewing .acc-cards { order: 4; }
  [data-ui="crystal"].reviewing :is(.review-lesson,.review details,.review p,.opening,.panel > .chips) { order: 5; }
  [data-ui="crystal"].reviewing .actions { order: 6; }
}

/* Float Shadow, adapted from Hover.css 2.0.2 (MIT, Ian Lunn). See art/CREDITS.txt.
   Only controls in the chrome float. The board, review graph and layout stay put. */
body[data-ui="crystal"] {
  --lift: 3px;
  --cast: 0 5px 10px -6px #23346c85;
  --settle: 180ms cubic-bezier(.2,.75,.25,1);
}
[data-ui="crystal"] :is(.club-row,.pcard,.weak,.ccg,.club-daily,.hero-actions .primary) {
  --lift: 4px; --cast: 0 9px 18px -10px #23346ca8;
}
[data-ui="crystal"] :is(.tab,.mv,.nav-btn,.pv,[data-group],.pk button,summary) {
  --lift: 2px; --cast: 0 4px 8px -5px #23346c85;
}
[data-ui="crystal"] :is(.pcard,.weak,.ccg):hover { background: var(--surface2); }

/* Make the daily diagram, heading and call to action a single native button target. */
.home-daily .club-daily { position: relative; }
.home-daily .btn::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.home-daily:has(:focus-visible) .club-daily { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  /* Keep the first and last lifted cards and their focus rings inside scrollable lists. */
  [data-ui="crystal"] :is(.chooser .pgrid,.cclist) { padding: 10px; margin: -8px; }
  [data-ui="crystal"] :is(.topbar,.home,.side,.dlg) :where(button:enabled,summary):not(:where(.club-daily button)) {
    &:not(.hero-skip) { position: relative; }
    &:hover { box-shadow: var(--cast); }
    @media (prefers-reduced-motion: no-preference) {
      &:where([data-motion="on"] *) { transition: translate var(--settle), box-shadow var(--settle), background-color var(--settle); }
      &:where([data-motion="on"] *):hover { translate: 0 calc(-1 * var(--lift)); }
      /* The transparent ends still catch the pointer at the original bottom edge. */
      &:where([data-motion="on"] *):hover::before {
        content: ""; position: absolute; inset: 100% 0 auto; height: calc(var(--lift) + 1px);
        background: radial-gradient(ellipse closest-side at 50% 70%, #293c7529, transparent);
      }
      &:where([data-motion="on"] *):active { translate: 0 0; box-shadow: none; }
    }
  }
  [data-ui="crystal"] :is(.pcard,.weak,.ccg):hover { background-color: #eef0fb; border-bottom-color: #98a7cd; }
  [data-ui="crystal"] .club-row:hover,
  [data-ui="crystal"] .home-daily:hover .club-daily { background-color: var(--surface); }
  [data-ui="crystal"] .pv { display: flex; align-items: baseline; gap: .4em; overflow: visible; }
  [data-ui="crystal"] .pv span { overflow: hidden; text-overflow: ellipsis; }
  [data-ui="crystal"] :is(.home-daily:hover .club-daily,.seg label:hover > span,.tog:hover > span,.swatches label:hover > .sw) {
    box-shadow: var(--cast);
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-ui="crystal"][data-motion="on"] :is(.home-daily .club-daily,.seg label > span,.tog > span,.sw) {
      transition: translate var(--settle), box-shadow var(--settle), background-color var(--settle);
    }
    [data-ui="crystal"][data-motion="on"] :is(.home-daily:hover .club-daily,.seg label:hover > span,.tog:hover > span,.swatches label:hover > .sw) {
      translate: 0 calc(-1 * var(--lift));
    }
  }
}
/* Press feedback is immediate on touch, without a hover state that persists after a tap. */
[data-ui="crystal"] :is(.btn,.pcard):active { transform: none; }
[data-ui="crystal"] :is(button,summary)[data-touch-pressed],
[data-ui="crystal"] label[data-touch-pressed] > span,
[data-ui="crystal"] .club-daily:has([data-touch-pressed]),
[data-ui="crystal"] :is(.topbar,.home,.side,.dlg) :where(button:enabled,summary):active,
[data-ui="crystal"] :is(.seg label:active > span,.tog:active > span,.sw:active,.home-daily:active .club-daily) {
  box-shadow: inset 0 0 0 2px #7287c8a6;
}