/* Cali Matches Fractions. Colours are the site's own (styles.css --m10-* tokens), as in the other Cali games. */
:root {
	--cf-ink: #1a1a1a;
	--cf-muted: #444746;
	--cf-line: #e6e6e6;
	--cf-edge: #b9c0c7;
	--cf-band: #d8e6fc;
	--cf-band-soft: #eef4fc;
	--cf-panel: #caddf6;
	--cf-orange: #ee6600;
	--cf-orange-hover: #ff7a1a;
	--cf-orange-text: #9a4200;
	--cf-orange-soft: #fff1e6;
	--cf-blue: #006699;
	--cf-blue-strong: #004d73;
	--cf-blue-soft: #e6f0f8;
	--cf-lime: #b2df5d;
	--cf-lime-soft: #edf8da;
	--cf-good: #3f7d16;
	--cf-good-text: #2e5e12;
	--cf-font: Onest, Verdana, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cf-digits: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Roboto, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--cf-ink); font: 16px/1.4 var(--cf-font); }
*, *::before, *::after { box-sizing: border-box; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.cf-app { position: relative; max-width: 1040px; margin: 0 auto; padding: 0 0 8px; }
.cf-app :focus-visible { outline: 3px solid var(--cf-orange); outline-offset: 2px; }
.cf-main { outline: none; }
.cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- header band ---------- */
.cf-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 52px; padding: 4px 6px; border-radius: 12px; background: var(--cf-band); }
.cf-title { flex: 1 1 0; min-width: 0; padding-left: 6px; font-weight: 700; font-size: 18px; line-height: 1.2; }
.cf-stats { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 6px 4px; font-size: 16px; }
.cf-stats:empty { display: none; }
.cf-sound { order: 2; }
.cf-iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--cf-blue); }
.cf-iconbtn:hover { background: var(--cf-panel); }
.cf-iconbtn svg { width: 26px; height: 26px; }
.cf-where { font-weight: 600; }
.cf-score { position: relative; }
.cf-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.cf-float { position: absolute; left: 100%; top: -6px; margin-left: 6px; color: var(--cf-good-text); font-weight: 700; font-size: 18px; animation: cf-float 1s ease-out forwards; }
@keyframes cf-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-22px); } }
/* on a phone the round's header is one band: back, "Fractions · Level 4", score, time, sound */
@media (max-width: 699px) {
	.cf-app[data-screen="round"] .cf-title { display: none; }
	.cf-app[data-screen="round"] .cf-stats { order: 1; flex: 1 1 0; min-width: 0; padding: 2px 4px; gap: 0 14px; line-height: 1.25; }
}
@media (min-width: 700px) {
	.cf-title { flex: 1 1 auto; font-size: 19px; }
	.cf-stats { order: 1; flex: 0 1 auto; padding: 0 4px; }
}

/* ---------- buttons ---------- */
.cf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 22px; border: 2px solid transparent; border-radius: 10px; font-weight: 600; font-size: 17px; line-height: 1.2; }
.cf-primary { background: var(--cf-orange); color: var(--cf-ink); }
.cf-primary:hover { background: var(--cf-orange-hover); }
.cf-btn-quiet { background: #fff; border-color: var(--cf-blue); color: var(--cf-blue); }
.cf-btn-quiet:hover { background: var(--cf-blue-soft); }
.cf-btn.is-off { background: #e3e6ea; color: #50555b; }
.cf-btn.is-calling { animation: cf-call 1.3s ease-in-out infinite; }
@keyframes cf-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 102, 0, .55); } 50% { box-shadow: 0 0 0 9px rgba(238, 102, 0, 0); } }
.cf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------- numbers in text: stacked fractions, never a slash ---------- */
.cf-n { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; font-family: var(--cf-digits); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cf-fr { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; font-size: .86em; }
.cf-fr > span:first-child { padding: 0 3px 2px; border-bottom: 2px solid currentColor; }
.cf-fr > span:last-child { padding: 2px 3px 0; }
.cf-wh { font-size: 1.2em; }

/* ---------- level select ---------- */
.cf-lv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 10px 4px 8px; }
.cf-total { font-weight: 700; font-size: 19px; }
.cf-total-star { margin-right: 6px; color: #e8a200; font-size: 22px; }
.cf-tabs { display: flex; gap: 6px; padding: 0 6px; border-bottom: 3px solid var(--cf-band); }
.cf-tab { min-height: 48px; padding: 8px 18px; border: 2px solid var(--cf-band); border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; color: var(--cf-blue-strong); font-weight: 700; font-size: 18px; line-height: 1.2; }
.cf-tab:hover { background: var(--cf-blue-soft); }
.cf-tab[aria-selected="true"] { background: var(--cf-band); color: var(--cf-ink); }
.cf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 0 4px; }
@media (min-width: 560px) { .cf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-tile { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px 6px; border: 2px solid var(--cf-band); border-radius: 14px; background: #fff; }
.cf-tile:hover { border-color: var(--cf-blue); background: var(--cf-blue-soft); }
.cf-tile-n { color: var(--cf-blue-strong); font-weight: 700; font-size: 18px; }
.cf-tile-card { display: block; width: 104px; max-width: 78%; border: 1px solid var(--cf-edge); border-radius: 10px; background: #fff; box-shadow: 0 2px 5px rgba(26, 31, 39, .14); }
.cf-tile-card svg { display: block; width: 100%; height: auto; }
.cf-tile-time { min-height: 1.4em; color: var(--cf-muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.cf-stars { display: inline-flex; gap: 2px; font-size: 24px; line-height: 1; }
.cf-stars .on { color: #e8a200; }
.cf-stars .off { color: #d5dbe2; }
.cf-stars.is-big { font-size: 46px; }
.cf-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 17px; cursor: pointer; }
.cf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-switch-ui { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #8b9096; transition: background-color .15s; }
.cf-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.cf-switch input:checked + .cf-switch-ui { background: var(--cf-orange); }
.cf-switch input:checked + .cf-switch-ui::after { transform: translateX(20px); }
.cf-switch input:focus-visible + .cf-switch-ui { outline: 3px solid var(--cf-orange); outline-offset: 2px; }

/* ---------- a round: Cali, the scale, the shelf, the tray ---------- */
.cf-round { position: relative; -webkit-user-select: none; user-select: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cali" "scale" "tray" "shelf"; gap: 8px; margin-top: 8px; }
.cf-cali { grid-area: cali; min-width: 0; }
.cf-scalebox { grid-area: scale; min-width: 0; }
.cf-tray { grid-area: tray; }
.cf-shelf { grid-area: shelf; min-width: 0; }
@media (min-width: 700px) {
	.cf-round { grid-template-columns: 176px minmax(0, 1fr) 154px; grid-template-areas: "cali scale shelf" "tray tray tray"; gap: 10px; margin-top: 10px; }
}

/* Cali and her bubble: one line beside her on a phone, a bubble above her on a wide screen */
.cf-cali { display: flex; align-items: center; gap: 8px; }
.cf-cali-pic { flex: none; order: -1; width: 44px; }
.cf-cali-pic svg { display: block; width: 100%; height: auto; }
.cf-bubble { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 52px; padding: 4px 6px 4px 12px; border: 2px solid var(--cf-panel); border-radius: 14px; background: var(--cf-band-soft); font-weight: 600; font-size: 17px; line-height: 1.3; }
.cf-bubble-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-bubble.is-open { align-items: flex-start; }
.cf-bubble.is-open .cf-bubble-text { white-space: normal; overflow: visible; }
.cf-more { flex: none; width: 44px; height: 40px; padding: 0 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--cf-blue); font-weight: 700; font-size: 24px; line-height: 1; }
.cf-more:hover { background: var(--cf-panel); }
.cf-bubble.is-good { border-color: var(--cf-lime); background: var(--cf-lime-soft); color: var(--cf-good-text); }
.cf-bubble.is-bad { border-color: var(--cf-blue); background: var(--cf-blue-soft); color: var(--cf-blue-strong); }
.cf-bubble.is-note { border-color: var(--cf-orange); background: var(--cf-orange-soft); color: var(--cf-orange-text); }
@media (min-width: 700px) {
	.cf-cali { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 12px; }
	.cf-cali-pic { order: 0; align-self: center; width: 112px; }
	.cf-bubble { flex: 0 0 auto; align-items: flex-start; min-height: 104px; padding: 10px 12px; }
	.cf-bubble::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px; margin-left: -9px; border: solid var(--cf-panel); border-width: 0 2px 2px 0; background: inherit; transform: rotate(45deg); }
	.cf-bubble.is-good::after { border-color: var(--cf-lime); }
	.cf-bubble.is-bad::after { border-color: var(--cf-blue); }
	.cf-bubble.is-note::after { border-color: var(--cf-orange); }
	.cf-bubble-text { white-space: normal; overflow: visible; }
	.cf-more { display: none; }
}

/*
 * The scale. Everything is a share of its width, so it needs no script to resize:
 * the box is 256 units high for 400 wide, the beam's line is 70 units above the bottom,
 * and a pan (card + plate + post, 159.5 units high) moves by 9.8% of its own height = 15.6 units at 8°.
 */
.cf-scale { position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
.cf-scale::before { content: ""; display: block; padding-top: 64%; }
.cf-scale-art { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; }
.cf-beam { transform-origin: 0 0; transition: transform .3s ease; }
.cf-pan { position: absolute; left: 22%; bottom: 27.34%; width: 37.5%; transform: translate(-50%, 0); transition: transform .3s ease; }
.cf-pan-r { left: 78%; }
.cf-scale.tilt-l .cf-beam { transform: rotate(-8deg); }
.cf-scale.tilt-r .cf-beam { transform: rotate(8deg); }
.cf-scale.tilt-l .cf-pan-l, .cf-scale.tilt-r .cf-pan-r { transform: translate(-50%, 9.8%); }
.cf-scale.tilt-l .cf-pan-r, .cf-scale.tilt-r .cf-pan-l { transform: translate(-50%, -9.8%); }
.cf-slot { position: relative; border-radius: 12px; outline: 2px dashed var(--cf-edge); outline-offset: -2px; background: rgba(238, 244, 252, .7); }
.cf-slot::before { content: ""; display: block; padding-top: 91.667%; }
.cf-slot-hint { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 6px; color: var(--cf-muted); font-size: 16px; line-height: 1.2; text-align: center; }
.cf-pan.is-full .cf-slot { outline-color: transparent; background: none; }
.cf-pan.is-full .cf-slot-hint { display: none; }
.cf-pan.is-over .cf-slot { outline: 3px solid var(--cf-orange); background: var(--cf-orange-soft); }
.cf-plate { height: 0; margin: 0 -5%; padding-top: 5.33%; border-radius: 5px; background: var(--cf-blue); }
.cf-pan-r .cf-plate { background: var(--cf-orange); }
.cf-post { width: 5%; height: 0; margin: 0 auto; padding-top: 9.33%; background: var(--cf-blue-strong); }
.cf-sign { position: absolute; left: 50%; bottom: 62.5%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 0 -24px -24px; border: 2px dashed var(--cf-edge); border-radius: 50%; font-family: var(--cf-digits); font-weight: 700; font-size: 32px; line-height: 1; }
.cf-sign.is-on { border: 3px solid var(--cf-blue-strong); background: #fff; color: var(--cf-blue-strong); }
.cf-sign.is-eq { border-color: var(--cf-good); background: var(--cf-lime-soft); color: var(--cf-good-text); }
.cf-nudge { animation: cf-shake .2s linear; }
@keyframes cf-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

/* the number line under the scale: where the two values lie */
.cf-nline { max-width: 440px; margin: 2px auto 0; }
.cf-nline svg { display: block; width: 100%; height: auto; }
.cf-nline-n, .cf-line-n { font-family: var(--cf-digits); font-weight: 700; font-size: 17px; fill: var(--cf-ink); }

/* ---------- cards ---------- */
.cf-tray { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--cf-band-soft); }
.cf-cell { position: relative; border-radius: 12px; }
.cf-cell::before { content: ""; display: block; padding-top: 100%; }
.cf-cell.is-away { outline: 2px dashed var(--cf-panel); outline-offset: -2px; }
@media (min-width: 700px) {
	.cf-tray { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 860px; margin: 0 auto; padding: 10px; }
	.cf-cell::before { padding-top: 91.667%; }
}
.cf-card { position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 1px solid var(--cf-edge); border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(26, 31, 39, .16); cursor: grab; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.cf-face { display: block; width: 100%; height: 100%; pointer-events: none; }
.cf-num { font-family: var(--cf-digits); font-weight: 700; fill: var(--cf-ink); }
.cf-cell > .cf-card:focus-visible { border-color: var(--cf-blue); box-shadow: 0 0 0 1px var(--cf-blue), 0 6px 10px rgba(26, 31, 39, .2); transform: translateY(-4px); }
@media (hover: hover) {
	.cf-cell > .cf-card:hover { border-color: var(--cf-blue); box-shadow: 0 0 0 1px var(--cf-blue), 0 6px 10px rgba(26, 31, 39, .2); transform: translateY(-4px); }
}
/* a card on the scale: lifted, with a blue border */
.cf-slot > .cf-card { border-color: var(--cf-blue); box-shadow: 0 0 0 1px var(--cf-blue), 0 4px 0 rgba(0, 77, 115, .18), 0 8px 14px rgba(26, 31, 39, .2); }
.cf-card.is-match { border-color: var(--cf-good); box-shadow: 0 0 0 3px var(--cf-good), 0 6px 12px rgba(26, 31, 39, .2); }
.cf-card.is-hint { animation: cf-hint 1.2s ease-in-out infinite; }
@keyframes cf-hint {
	0%, 100% { box-shadow: 0 0 0 3px rgba(238, 102, 0, .85), 0 2px 5px rgba(26, 31, 39, .16); }
	50% { box-shadow: 0 0 0 8px rgba(238, 102, 0, .25), 0 2px 5px rgba(26, 31, 39, .16); }
}
.cf-card.is-drag { z-index: 40; cursor: grabbing; pointer-events: none; border-color: var(--cf-blue); box-shadow: 0 0 0 1px var(--cf-blue), 0 12px 22px rgba(26, 31, 39, .3); }
.cf-card.is-flying { z-index: 30; pointer-events: none; }
.cf-card:disabled { cursor: default; }
/* the value of a picture card, shown under it for 2 s when a pair is found */
.cf-val { position: absolute; left: 50%; bottom: -15px; z-index: 2; display: none; padding: 2px 9px; border: 2px solid var(--cf-good); border-radius: 999px; background: #fff; color: var(--cf-good-text); font-size: 17px; transform: translateX(-50%); pointer-events: none; }
.cf-val.is-on { display: block; }
.cf-card.is-flying .cf-val { display: none; }

/* ---------- the Matched shelf ---------- */
.cf-shelf { display: flex; flex-direction: column; border: 2px solid var(--cf-band); border-radius: 12px; background: #fff; overflow: hidden; }
.cf-shelf-t { padding: 5px 10px; background: var(--cf-band); font-weight: 700; font-size: 16px; }
.cf-shelf-list { display: flex; flex-wrap: wrap; gap: 4px; min-height: 50px; margin: 0; padding: 5px; list-style: none; }
.cf-pair { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 3px; border: 1px solid var(--cf-line); border-radius: 8px; background: #fff; }
.cf-pair:hover { border-color: var(--cf-blue); background: var(--cf-blue-soft); }
.cf-mini { display: block; width: 42px; border: 1px solid var(--cf-edge); border-radius: 6px; background: #fff; }
.cf-mini svg { display: block; width: 100%; height: auto; }
.cf-pair-eq { font-family: var(--cf-digits); font-weight: 700; font-size: 18px; }
@media (min-width: 700px) {
	.cf-shelf-list { display: grid; align-content: start; gap: 4px; padding: 6px; }
	.cf-pair { width: 100%; }
	.cf-mini { width: 52px; }
}

/* ---------- a pair, large; the "leave this level?" question ---------- */
.cf-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 64px 12px 12px; background: rgba(255, 255, 255, .8); }
.cf-dialog { max-width: 460px; padding: 16px 20px; border: 2px solid var(--cf-blue); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(26, 31, 39, .18); }
.cf-dialog p { margin: 0; font-weight: 600; font-size: 18px; }
.cf-pairrow { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.cf-bigcard { width: 150px; max-width: 36vw; border: 1px solid var(--cf-edge); border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(26, 31, 39, .16); }
.cf-bigcard svg { display: block; width: 100%; height: auto; }
.cf-bigval { margin-top: 8px; font-size: 24px; text-align: center; }
.cf-pairbig-eq { align-self: center; font-family: var(--cf-digits); font-weight: 700; font-size: 34px; }

/* ---------- level complete ---------- */
.cf-done { padding: 14px 0 4px; }
.cf-done-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.cf-cali-big { width: 140px; }
.cf-cali-big svg { display: block; width: 100%; height: auto; }
.cf-done-body { display: grid; justify-items: start; gap: 8px; }
.cf-done-body .cf-actions { justify-content: flex-start; margin-top: 6px; }
.cf-screen-t { margin: 0; font-weight: 700; font-size: 24px; }
.cf-done-where { color: var(--cf-muted); font-weight: 600; }
.cf-done-score { font-size: 22px; }
.cf-done-time { font-size: 18px; font-variant-numeric: tabular-nums; }
.cf-newrec { padding: 6px 14px; border-radius: 999px; background: var(--cf-lime); font-weight: 700; font-size: 18px; }
.cf-recap-t { margin: 18px 0 6px; font-weight: 700; font-size: 17px; text-align: center; }
.cf-recap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-recap-pair { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--cf-line); border-radius: 8px; }
.cf-recap .cf-mini { width: 60px; }

@media (prefers-reduced-motion: reduce) {
	.cf-beam, .cf-pan, .cf-card, .cf-switch-ui, .cf-switch-ui::after { transition: none; }
	.cf-btn.is-calling, .cf-nudge, .cf-float { animation: none; }
	.cf-btn.is-calling { box-shadow: 0 0 0 4px rgba(238, 102, 0, .45); }
	.cf-card.is-hint { animation: none; box-shadow: 0 0 0 5px rgba(238, 102, 0, .7); }
	.cf-float { opacity: 0; }
}