/* Card board (ways board + Firefly Card, card.js). Colours are tokens a game's skin sets:
   --card-bg, --card-edge, --card-ink, --card-muted, --card-title (panel); --card-cell, --card-cell-edge (a cell),
   --card-lit (the hatching of a lit cell), --card-tick (its tick), --card-line (a paid line), --card-done (a paid
   value); on the reels: --cd-thread (the stitch-run), --cd-glow (a cell lit now), --cd-tick / --cd-tick-bg (the tick
   every lit cell keeps for the round). A lit cell always has the tick and the hatching, a paid value the tick: the
   state never rests on colour alone. Animated properties: transform and opacity only; reduced motion: none. */
.card-panel{width:100%}
.card-view{--cv:26px;color:var(--card-ink,var(--ink));font-family:var(--ui)}
.card-view.full{display:flex;flex-direction:column;gap:8px;padding:12px 10px 10px;border-radius:var(--radius-sm);background:var(--card-bg,var(--panel-bg));border:1.5px solid var(--card-edge,var(--line))}
.card-view .cv-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-view .cv-title{font-family:var(--display);font-weight:400;font-size:17px;line-height:1.1;color:var(--card-title,var(--card-ink,var(--ink)))}
.card-view .cv-count{font-size:14px;font-weight:700;color:var(--card-muted,var(--muted));white-space:nowrap}
.card-view .cv-body{display:grid;grid-template-columns:repeat(var(--n,5),var(--cv)) auto;grid-template-rows:auto repeat(var(--n,5),var(--cv)) auto;justify-content:center}
.card-view .cv-body>.cv-grid{grid-row:2/-2;grid-column:1/-2}
.card-view .cv-vals{display:contents}
.card-view .cv-v{display:flex;align-items:center;justify-content:center;padding:1px 4px;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;color:var(--card-muted,var(--muted))}
.card-view .cv-v.k-row{justify-content:flex-start}
.card-view .cv-v.k-column{padding-top:3px}
.card-view .cv-v.done{color:var(--card-done,var(--card-ink,var(--ink)))}
.card-view .cv-v.done::before{content:"";display:inline-block;width:4px;height:8px;margin:0 4px 2px 1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.card-view .cv-v.new{animation:cv-in .42s steps(4) both}
.card-view .cv-grid{position:relative;display:grid;grid-template-rows:repeat(var(--n,5),var(--cv))}
.card-view .cv-row{display:grid;grid-template-columns:repeat(var(--n,5),var(--cv))}
.card-view .cv-cell{position:relative;width:var(--cv);height:var(--cv);background:var(--card-cell,#EDE6D6);box-shadow:inset 0 0 0 1px var(--card-cell-edge,rgba(0,0,0,.3))}
.card-view .cv-cell.lit{background:repeating-linear-gradient(45deg,var(--card-lit,#D4F05A) 0 2px,transparent 2px 6px),var(--card-cell,#EDE6D6)}
/* the tick: a stitched check mark (two legs of thread) */
.card-view .cv-x{position:absolute;left:34%;top:14%;width:30%;height:52%;border-right:3px solid var(--card-tick,#1E1A17);border-bottom:3px solid var(--card-tick,#1E1A17);border-radius:1px;transform:rotate(45deg);opacity:0}
.card-view .cv-cell.lit .cv-x{opacity:1}
.card-view .cv-cell.fresh .cv-x{animation:cv-tick .3s steps(4) both}
.card-view .cv-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.card-view .cv-ln{stroke:var(--card-line,#E23434);stroke-width:4;stroke-linecap:round;stroke-dasharray:7 4}
.card-view .cv-ln.new{animation:cv-in .42s steps(4) both}
.card-view .cv-bloom{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--card-muted,var(--muted))}
.card-view .cv-flower{display:inline-grid;width:28px;height:28px;flex:none}
.card-view .cv-flower svg{width:100%;height:100%}
.card-view.bloomed .cv-bloom{color:var(--card-done,var(--card-ink,var(--ink)))}
.card-view.bloomed .cv-flower{animation:cv-bloom 1.2s cubic-bezier(.3,1.4,.5,1) both}
.card-view .cv-hint{margin:0;font-size:12px;line-height:1.35;color:var(--card-muted,var(--muted))}
body.fs .card-view .cv-hint{display:none}
/* the mini card (a game's feature bar; not ".mini", a reels.css class): 12 px cells, the same states */
.card-view.cv-mini{--cv:12px;display:inline-block;flex:none;line-height:0}
.card-view.cv-mini .cv-cell{box-shadow:inset 0 0 0 .5px var(--card-cell-edge,rgba(0,0,0,.3))}
.card-view.cv-mini .cv-cell.lit{background:repeating-linear-gradient(45deg,var(--card-lit,#D4F05A) 0 1.5px,transparent 1.5px 3.5px),var(--card-cell,#EDE6D6)}
.card-view.cv-mini .cv-x{left:32%;top:10%;width:34%;height:58%;border-width:0 1.5px 1.5px 0}
.card-view.cv-mini .cv-ln{stroke-width:2;stroke-dasharray:3 2}
.card-view.cv-mini.bloomed{outline:2px solid var(--card-done,var(--card-ink,#fff));outline-offset:2px}

/* the reels: the tick every lit cell keeps for the round, the glow of the cells lit now, the stitch-run */
.card-board .cd-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.card-board .cd-m{position:absolute;width:var(--cell);height:var(--cell)}
.card-board .cd-m::after{content:"";position:absolute;left:4%;top:4%;width:22%;height:22%;border-radius:22%;background:var(--cd-tick-bg,rgba(237,230,214,.92));box-shadow:0 0 0 1px var(--cd-tick,#1E1A17)}
.card-board .cd-m::before{content:"";position:absolute;z-index:1;left:12%;top:6.5%;width:6%;height:12%;border-right:2.5px solid var(--cd-tick,#1E1A17);border-bottom:2.5px solid var(--cd-tick,#1E1A17);transform:rotate(45deg)}
.card-board .cd-m.fresh{box-shadow:inset 0 0 0 3px var(--cd-glow,#D4F05A),inset 0 0 18px var(--cd-glow,#D4F05A);animation:cd-glow .3s steps(3) both}
.card-board .cd-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.card-board .cd-run{fill:none;stroke:var(--cd-thread,#E23434);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 8;vector-effect:non-scaling-stroke}
.card-board .cd-knot{fill:var(--cd-thread,#E23434);stroke:var(--cd-tick-bg,#EDE6D6);stroke-width:2;vector-effect:non-scaling-stroke}
@keyframes cv-tick{from{opacity:0;transform:rotate(45deg) scale(.3)}to{opacity:1;transform:rotate(45deg)}}
@keyframes cv-in{from{opacity:0}to{opacity:1}}
@keyframes cv-bloom{from{opacity:0;transform:scale(.4) rotate(-36deg)}to{opacity:1;transform:none}}
@keyframes cd-glow{from{opacity:0}to{opacity:1}}
/* reduced motion: everything is shown at once (shell.css also caps every animation) */
body.still .card-view .cv-cell.fresh .cv-x,body.still .card-view .cv-ln.new,body.still .card-view .cv-v.new,body.still .card-view.bloomed .cv-flower,body.still .card-board .cd-m.fresh{animation:none}
@media (prefers-reduced-motion:reduce){.card-view .cv-cell.fresh .cv-x,.card-view .cv-ln.new,.card-view .cv-v.new,.card-view.bloomed .cv-flower,.card-board .cd-m.fresh{animation:none}}