/* Coronet: the round board. Everything else is in shared/core.css.
   The full-colour game: regions are riso inks laid as tints; its own ink is the key blue. */
:root {
  --brand: var(--ink); --brand-text: var(--ink); --on-brand: var(--paper);
  /* one ink per region (at most 9: Impossible), ordered so any first N stay far apart in hue */
  --r0: #ff48b0; --r1: #ffb511; --r2: #3f8ee6; --r3: #a8cf2a; --r4: #ff6c2f; --r5: #1fb3a8; --r6: #a07de6; --r7: #d2342a; --r8: #8d97b5;
  --wall: var(--navy); --piece: var(--navy); --seam: rgb(28 42 92 / .45);
}
:root[data-theme="dark"] {
  --r0: #ff5cb8; --r1: #ffc62e; --r2: #5ea2f0; --r3: #b8dc3c; --r4: #ff7a3d; --r5: #2ec4b6; --r6: #b291f0; --r7: #ff6b5e; --r8: #c3cadf;
  --wall: #0d1533; --piece: #0d1533; --seam: rgb(13 21 51 / .55);
}

.board {
  width: min(620px, calc(100 * var(--vw) - 24px), calc(100 * var(--dvh) - 230px)); max-width: 100%; height: auto; aspect-ratio: 1; overflow: visible;
  fill: initial; stroke: none; stroke-width: 1;
  touch-action: none; user-select: none; -webkit-user-select: none;
  /* box-shadow, not filter: drop-shadow — a filter on the <svg> makes WebKit redraw every speck and stamp on each tap (~10x slower on iPhone) */
  border-radius: 50%; box-shadow: 0 18px 26px -6px rgb(28 42 92 / .2);
  animation: spin-in .6s var(--ease) both;
}
:root[data-theme="dark"] .board { box-shadow: 0 16px 28px -6px rgb(0 0 0 / .45); }
.board.mini { width: 132px; box-shadow: none; }
#logo { animation: spin-in .6s var(--ease) both, turn 90s linear infinite; }
#help-board { display: block; margin: 0 auto 8px; width: 120px; }
@keyframes spin-in { from { opacity: 0; transform: rotate(-30deg) scale(.9); } }
@keyframes turn { to { transform: rotate(360deg); } }

/* the board's registration shadow: the key drum, a touch down-right */
.lip { fill: var(--reg); transform: translate(2px, 0); }
.cells { filter: url(#speck); }
/* paper under the arcs, so the speckle shows paper rather than the shadow */
.stock-back { fill: var(--stock); }
.c {
  transform-box: fill-box; transform-origin: center;
  animation: enter .3s var(--d, 0ms) both var(--ease);
}
/* inks toned down: a little darker, much less chroma — muted print colours, not neon */
.c { --tone-l: .95; --tone-c: .7; }
:root[data-theme="dark"] .c { --tone-l: .84; --tone-c: .7; }
.rg0 { fill: var(--r0); }
.rg1 { fill: var(--r1); }
.rg2 { fill: var(--r2); }
.rg3 { fill: var(--r3); }
.rg4 { fill: var(--r4); }
.rg5 { fill: var(--r5); }
.rg6 { fill: var(--r6); }
.rg7 { fill: var(--r7); }
.rg8 { fill: var(--r8); }
/* older browsers without relative colours keep the plain inks */
@supports (color: oklch(from red l c h)) {
  .rg0 { fill: oklch(from var(--r0) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg1 { fill: oklch(from var(--r1) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg2 { fill: oklch(from var(--r2) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg3 { fill: oklch(from var(--r3) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg4 { fill: oklch(from var(--r4) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg5 { fill: oklch(from var(--r5) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg6 { fill: oklch(from var(--r6) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg7 { fill: oklch(from var(--r7) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
  .rg8 { fill: oklch(from var(--r8) calc(l * var(--tone-l)) calc(c * var(--tone-c)) h); }
}
.seams { fill: none; stroke: var(--seam); stroke-width: .5; }
.seams.halo { stroke: var(--stock); stroke-width: 1.5; }
/* dark stock is close to the wall ink: a narrower halo keeps seams reading thinner than walls */
:root[data-theme="dark"] .seams.halo { stroke-width: .9; }
.walls, .rim { fill: none; stroke: var(--wall); stroke-width: 1.4; stroke-linecap: round; }
.mini .walls, .mini .rim { stroke-width: 2.2; }
.hub circle { fill: var(--stock); stroke: var(--wall); stroke-width: 1.4; }
.hub text { fill: var(--ink); font-family: var(--display); font-weight: 600; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }

.pc { pointer-events: none; }
/* queens are rubber stamps: inked unevenly, a touch crooked, not quite inside the lines */
.pc { filter: url(#stamp); }
.crown { fill: var(--piece); transform-box: fill-box; transform-origin: center; rotate: var(--rot, 0deg); translate: var(--tx, 0) var(--ty, 0); }
.x { stroke: var(--piece); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.pc[data-k="a"] .x { opacity: .4; }
.pc.bad .crown, .pc.hinted .crown { stroke: var(--stock); stroke-width: 2; paint-order: stroke; }
.pc.bad .crown { fill: var(--red); }
.pc.hinted .crown { fill: var(--sun-text); }
:root[data-theme="dark"] .pc.hinted .crown { fill: var(--sun); }
.tut-ring { display: none; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; pointer-events: none; outline: none !important; }
.tut-ring.coach-at { display: inline; animation: tut-ring 1.2s ease-in-out infinite !important; }
@keyframes tut-ring { 50% { stroke-opacity: .35; } }
[data-calm] .tut-ring.coach-at { animation: none !important; }
.cursor { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; pointer-events: none; }

.crown.pop { animation: pop .22s var(--ease); }
/* a ring that just got its queen: one glint sweeps round it, from 12 o'clock, clockwise */
.shimmer {
  fill: none; stroke: var(--stock); opacity: .5; pointer-events: none; rotate: -90deg;
  stroke-dasharray: 14 86; stroke-dashoffset: 14; animation: shimmer 1.1s ease-in-out forwards;
}
@keyframes shimmer { 15% { opacity: .5; } to { stroke-dashoffset: -86; opacity: 0; } }
.crown.shake { animation: shake .4s; }

/* solved: a ripple runs out from the hub, ring by ring */
.board.solved .c { transform-box: view-box; transform-origin: 50% 50%; animation: ripple .7s calc(var(--ring) * 70ms) both; }
.board.solved .pc .crown { animation: wave .6s .3s both var(--ease); }
/* the seal of approval: the hub takes the sunflower drum and a stamped crown thumps down into it */
.seal { display: none; }
.board.solved .seal { display: inline; }
.board.solved .hub circle { fill: var(--sun); filter: url(#speck); transition: fill .2s .25s; }
.seal-ink { transform-box: fill-box; transform-origin: center; filter: url(#stamp); animation: stamp .32s .3s both cubic-bezier(.3, 0, .2, 1); }
.seal .crown { fill: var(--navy); }
@keyframes ripple { 40% { transform: scale(1.03); } }

@media (orientation: landscape) and (max-height: 540px) {
  .board:not(.mini) { width: min(calc(100 * var(--dvh) - 90px), calc(100 * var(--vw) - 380px)); }
}

@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
  .board:not(.mini) { width: min(760px, calc(100 * var(--vw) - 64px), calc(100 * var(--dvh) - 300px)); }
}
@media (pointer: coarse) and (orientation: landscape) and (min-height: 700px) {
  .board:not(.mini) { width: min(calc(100 * var(--dvh) - 120px), calc(100 * var(--vw) - 480px)); }
}

/* keep board, tip and tools together in the middle instead of the tools stranded at the bottom */
#game .board-wrap { flex: 0 0 auto; margin-top: auto; }
#game .tools { margin: 6px 0 auto; padding-bottom: 8px; }
#game .tip { margin: 2px 0 0; }

/* arcs answer the pointer */
@media (hover: hover) {
  .board:not(.mini):not(.solved) .c { transition: opacity .12s; }
  .board:not(.mini):not(.solved) .c:hover { opacity: .82; }
}

/* key-ink buttons would hide a key-ink registration offset: print it in sunflower instead */
.btn.primary, .daily-btn:not(.done) { box-shadow: 2px 3px 0 var(--sun); }

/* practice: each pack row resumes its puzzle or deals a new one; the row below always deals a new one */

/* ---------- print ---------- */
/* regions as greys and textures, all light enough that pen shows on them */
.p-ring { width: 165mm; height: 165mm; fill: initial; stroke: none; stroke-width: 1; overflow: visible; margin-top: 4mm; }
.p-ring .cells, .p-ring .pc { filter: none; }
.p-ring .lip, .p-ring .cursor, .p-ring .seal { display: none; }
.p-ring .seams { stroke: #000; stroke-width: .3; }
.p-ring .seams.halo { display: none; }
.p-ring .walls, .p-ring .rim, .p-ring .hub circle { stroke: #000; stroke-width: 1.6; }
.p-ring .hub circle { fill: #fff; }
#print .rg0 { fill: #fff; }
#print .rg1 { fill: #d2d2d2; }
#print .rg2 { fill: url(#p-hatch); }
#print .rg3 { fill: url(#p-dots); }
#print .rg4 { fill: url(#p-grid); }
#print .rg5 { fill: url(#p-back); }
#print .rg6 { fill: url(#p-greydots); }
#print { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* high contrast (core.css): the inks print flat, without speckle or the stamp's rough edge */
:root[data-contrast] :is(.cells, .pc, .hub circle, .seal-ink) { filter: none; }