/* Cali's Times Table. Colours are the site's own (styles.css --m10-* tokens), as in the other Cali games. */
:root {
	--tt-ink: #1a1a1a;
	--tt-muted: #444746;
	--tt-edge: #b9c0c7;
	--tt-line: #d3d8de;
	--tt-line-strong: #7d8b99;
	--tt-band: #d8e6fc;
	--tt-band-soft: #eef4fc;
	--tt-panel: #caddf6;
	--tt-orange: #ee6600;
	--tt-orange-hover: #ff7a1a;
	--tt-orange-text: #9a4200;
	--tt-orange-soft: #fff1e6;
	--tt-blue: #006699;
	--tt-blue-strong: #004d73;
	--tt-blue-soft: #e6f0f8;
	--tt-lime: #b2df5d;
	--tt-lime-soft: #edf8da;
	--tt-good: #3f7d16;
	--tt-good-text: #2e5e12;
	--tt-bad: #b3261e;
	--tt-chip: #1f2a37;
	/* the three marks of a filled cell */
	--tt-first: #cdeb95;
	--tt-second: #ffdcb8;
	--tt-shown: #e6e9ed;
	--tt-font: Onest, Verdana, system-ui, -apple-system, "Segoe UI", sans-serif;
	--tt-digits: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Roboto, sans-serif;
}

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

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

/* ---------- header band ---------- */
.tt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 52px; padding: 4px 6px; border-radius: 12px; background: var(--tt-band); }
.tt-title { flex: 1 1 0; min-width: 0; padding-left: 10px; font-weight: 700; font-size: 18px; line-height: 1.2; }
.tt-back:not([hidden]) + .tt-title { padding-left: 2px; }
.tt-stats { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 0 6px 4px; font-size: 16px; }
.tt-stats:empty { display: none; }
.tt-sound { order: 2; }
.tt-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(--tt-blue); }
.tt-iconbtn:hover { background: var(--tt-panel); }
.tt-iconbtn svg { width: 26px; height: 26px; }
.tt-where { font-weight: 600; }
.tt-score, .tt-left, .tt-time { white-space: nowrap; }
.tt-score { position: relative; }
.tt-stats b { font-family: var(--tt-digits); font-size: 18px; }
.tt-time { display: inline-flex; align-items: center; gap: 4px; }
.tt-time-pic { display: inline-flex; color: var(--tt-blue); }
.tt-time-pic svg { width: 20px; height: 20px; }
.tt-float { position: absolute; left: 100%; top: -6px; margin-left: 6px; color: var(--tt-good-text); font-weight: 700; font-size: 18px; pointer-events: none; animation: tt-float 1s ease-out forwards; }
@keyframes tt-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-22px); } }
/* on a phone a board's header is one band: back, "Multiply, up to 10", score, cells left, sound */
@media (max-width: 699px) {
	.tt-app[data-screen="board"] .tt-title { display: none; }
	.tt-app[data-screen="board"] .tt-stats { order: 1; flex: 1 1 0; min-width: 0; padding: 2px 4px; gap: 0 12px; line-height: 1.3; }
}
@media (min-width: 700px) {
	/* one line: a long title is cut with an ellipsis before the sound button would wrap */
	.tt-top { flex-wrap: nowrap; }
	.tt-title { flex: 1 1 auto; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tt-stats { order: 1; flex: 0 0 auto; flex-wrap: nowrap; padding: 0 4px; white-space: nowrap; }
}

/* ---------- buttons, switches ---------- */
.tt-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; touch-action: manipulation; }
.tt-primary { background: var(--tt-orange); color: var(--tt-ink); }
.tt-primary:hover { background: var(--tt-orange-hover); }
.tt-btn-quiet { background: #fff; border-color: var(--tt-blue); color: var(--tt-blue); }
.tt-btn-quiet:hover { background: var(--tt-blue-soft); }
.tt-btn.tt-small { padding: 6px 14px; font-size: 16px; }
.is-calling { animation: tt-call 1.3s ease-in-out infinite; }
@keyframes tt-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 102, 0, .6); } 50% { box-shadow: 0 0 0 8px rgba(238, 102, 0, 0); } }
.tt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.tt-switches { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; }
.tt-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 16px; line-height: 1.2; cursor: pointer; }
.tt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tt-switch-ui { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #7d838a; transition: background-color .15s; }
.tt-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; }
.tt-switch input:checked + .tt-switch-ui { background: var(--tt-blue); }
.tt-switch input:checked + .tt-switch-ui::after { transform: translateX(20px); }
.tt-switch input:focus-visible + .tt-switch-ui { outline: 3px solid var(--tt-orange); outline-offset: 2px; }

.tt-stars { display: inline-flex; gap: 2px; font-size: 22px; line-height: 1; }
.tt-stars .on { color: #e8a200; }
.tt-stars .off { color: #d5dbe2; }
.tt-stars.is-big { font-size: 46px; }
.tt-stars.is-mini { gap: 0; font-size: 14px; }

/* ---------- game select ---------- */
.tt-select-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 6px 0; }
.tt-cali-big { width: 120px; }
.tt-cali-big svg { display: block; width: 100%; height: auto; }
.tt-select-head .tt-cali-big { width: 64px; }
.tt-total { font-weight: 700; font-size: 20px; }
.tt-total-star { margin-right: 6px; color: #e8a200; font-size: 24px; }
.tt-select-head .tt-switch { margin-left: auto; }

.tt-games { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 0 0; }
.tt-game, .tt-one { padding: 10px; border: 2px solid var(--tt-band); border-radius: 14px; background: #fff; }
.tt-one { margin-top: 10px; }
.tt-game-t { margin: 0; color: var(--tt-blue-strong); font-weight: 700; font-size: 20px; line-height: 1.2; }
.tt-game-eg { margin: 2px 0 8px; color: var(--tt-muted); font: 700 18px/1.3 var(--tt-digits); white-space: nowrap; }
.tt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-tile { display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 98px; padding: 10px 4px 8px; border: 2px solid var(--tt-panel); border-radius: 12px; background: var(--tt-band-soft); text-align: center; touch-action: manipulation; }
.tt-tile:hover, .tt-number:hover { border-color: var(--tt-blue); background: var(--tt-blue-soft); }
.tt-tile-n { font-weight: 700; font-size: 18px; line-height: 1.2; }
.tt-ring { display: inline-flex; align-items: center; gap: 5px; font: 700 16px/1 var(--tt-digits); white-space: nowrap; }
.tt-ring-pic { display: block; width: 20px; height: 20px; }
.tt-ring-pic svg { display: block; width: 100%; height: 100%; }
.tt-ring-bg { fill: none; stroke: #c3ccd6; stroke-width: 4; }
.tt-ring-fg { fill: none; stroke: var(--tt-orange); stroke-width: 4; }
.tt-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.tt-number { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 58px; padding: 4px 2px; border: 2px solid var(--tt-panel); border-radius: 12px; background: var(--tt-band-soft); touch-action: manipulation; }
.tt-number-k { color: var(--tt-blue-strong); font: 700 24px/1.1 var(--tt-digits); }
@media (min-width: 560px) {
	.tt-numbers { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
	.tt-games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.tt-tiles { grid-template-columns: minmax(0, 1fr); }
	.tt-tile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 58px; padding: 8px 12px; text-align: left; }
}

/* ---------- a board: the table, and beside it (under it on a phone) Cali, the answer and the keys ---------- */
.tt-play { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px 18px; margin-top: 8px; }
.tt-play.is-n5 { --tt-cols: 6; --tt-max: 60px; }
.tt-play.is-n10 { --tt-cols: 11; --tt-max: 44px; }
.tt-play.is-n12 { --tt-cols: 13; --tt-max: 38px; }
.tt-boardbox { flex: 1 1 100%; min-width: 0; max-width: calc(var(--tt-cols) * var(--tt-max)); }
.tt-side { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
@media (min-width: 700px) {
	.tt-play { margin-top: 10px; }
	.tt-boardbox { flex: 1 1 300px; }
	.tt-side { flex: 0 1 290px; gap: 10px; }
}

.tt-board { position: relative; --tt-cell: 30px; }
.tt-grid { display: grid; grid-template-columns: repeat(var(--tt-cols), minmax(0, 1fr)); border: 2px solid var(--tt-line-strong); border-radius: 8px; background: #fff; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tt-row { display: contents; }
.tt-cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; border: solid var(--tt-line); border-width: 0 1px 1px 0; font: 700 calc(var(--tt-cell) * .5)/1 var(--tt-digits); }
.tt-row > .tt-cell:last-child { border-right-width: 0; }
.tt-row:last-child > .tt-cell { border-bottom-width: 0; }
/* a thicker line every 5 cells helps the eye */
.tt-cell.is-vline { border-right: 2px solid var(--tt-line-strong); }
.tt-cell.is-hline { border-bottom: 2px solid var(--tt-line-strong); }
.tt-head { background: var(--tt-band); color: var(--tt-blue-strong); }
.tt-row:first-child > .tt-head { border-bottom: 2px solid var(--tt-line-strong); }
.tt-row > .tt-head:first-child { border-right: 2px solid var(--tt-line-strong); }
.tt-corner { color: var(--tt-ink); font-size: calc(var(--tt-cell) * .62); }
.tt-num { max-width: 100%; font-size: min(calc(var(--tt-cell) * .5), 26px); }
.tt-num.is-long { font-size: min(calc(var(--tt-cell) * .42), 24px); letter-spacing: -.02em; }
.tt-head { font-size: min(calc(var(--tt-cell) * .5), 24px); }
.tt-app .tt-cell:focus-visible, .tt-cell.is-cursor { outline: 3px solid var(--tt-orange); outline-offset: -3px; z-index: 2; }

/* how a cell was filled: first try = lime with a check, second try = light orange, shown by the game = grey with a dotted border */
.tt-body.is-first, .tt-legend-c.is-first { background-color: var(--tt-first); }
.tt-body.is-second, .tt-legend-c.is-second { background-color: var(--tt-second); }
.tt-body.is-shown, .tt-legend-c.is-shown { background-color: var(--tt-shown); color: #3d4248; }
.tt-body.is-first::after, .tt-legend-c.is-first::after { content: ""; position: absolute; top: 6%; right: 6%; width: 30%; height: 30%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.4l2.4 2.5L8.5 2.2' fill='none' stroke='%232e5e12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
.tt-body.is-shown::after, .tt-legend-c.is-shown::after { content: ""; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; border: 1.5px dotted #4a5057; border-radius: 2px; pointer-events: none; }
.tt-body.is-closed { background: repeating-linear-gradient(45deg, #f4f6f8 0, #f4f6f8 5px, #e6e9ed 5px, #e6e9ed 10px); }
.tt-num.is-pop { animation: tt-pop .15s ease-out; }
@keyframes tt-pop { from { transform: scale(.3); opacity: .3; } 70% { transform: scale(1.25); opacity: 1; } to { transform: scale(1); } }

/* the question: orange headers, a faint band to its cell, a pulsing "?" */
.tt-head.is-on { background: var(--tt-orange); color: var(--tt-ink); }
.tt-body.is-band { background-image: linear-gradient(rgba(238, 102, 0, .12), rgba(238, 102, 0, .12)); }
.tt-body.is-closed.is-band { background-image: linear-gradient(rgba(238, 102, 0, .12), rgba(238, 102, 0, .12)), repeating-linear-gradient(45deg, #f4f6f8 0, #f4f6f8 5px, #e6e9ed 5px, #e6e9ed 10px); }
.tt-body.is-q { background: var(--tt-orange-soft); box-shadow: inset 0 0 0 2px var(--tt-orange); }
.tt-body.is-q .tt-num { color: var(--tt-orange-text); font-size: min(calc(var(--tt-cell) * .62), 30px); animation: tt-pulse 1.2s ease-in-out infinite; }
@keyframes tt-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .65; } }

/* hints: a row to look at, the filled cells in it */
.tt-head.is-hint { background: var(--tt-blue); color: #fff; box-shadow: 0 0 0 3px var(--tt-blue); z-index: 2; }
.tt-body.is-look { box-shadow: inset 0 0 0 2px var(--tt-blue); }

/* the rectangle from the first cell (hints, Find the factors) and its size */
.tt-area { position: absolute; z-index: 3; border: 2px solid var(--tt-blue); border-radius: 3px; background: rgba(0, 102, 153, .16); pointer-events: none; }
.tt-chip { position: absolute; z-index: 4; padding: 3px 8px; border-radius: 8px; background: var(--tt-chip); color: #fff; font: 700 16px/1.25 var(--tt-digits); white-space: nowrap; pointer-events: none; }
.tt-chip.is-wrong { z-index: 5; background: var(--tt-bad); }
.tt-board[data-mode="pick"] .tt-grid { cursor: pointer; touch-action: none; }
.tt-board[data-mode="pick"] .tt-head { cursor: default; }
.tt-board[data-mode="explore"] .tt-body { cursor: pointer; }
.tt-board.is-calling .tt-grid { animation: tt-call 1.3s ease-in-out infinite; }
.tt-body.is-wrong { box-shadow: inset 0 0 0 3px var(--tt-bad); animation: tt-flash .6s ease-out; }
@keyframes tt-flash { 0%, 50% { background-color: #f6c9c5; } 25%, 75%, 100% { background-color: #fff; } }

/* a finished table: every cell with the same number, and the diagonal of squares */
.tt-grid.is-exploring .tt-body:not(.is-same) { background-image: linear-gradient(rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)); color: #5a6067; }
.tt-body.is-square { box-shadow: inset 0 0 0 3px var(--tt-blue); }
.tt-body.is-same { box-shadow: inset 0 0 0 3px var(--tt-orange); z-index: 1; }
.tt-body.is-same.is-square { box-shadow: inset 0 0 0 3px var(--tt-orange), inset 0 0 0 5px var(--tt-blue); }

/* Cali and her bubble */
.tt-ask { display: flex; align-items: center; gap: 10px; }
.tt-cali-pic { flex: none; width: 44px; }
.tt-cali-pic svg { display: block; width: 100%; height: auto; }
.tt-bubble { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border: 2px solid var(--tt-panel); border-radius: 14px; background: var(--tt-band-soft); }
.tt-bubble::before { content: ""; position: absolute; left: -8px; top: 50%; width: 13px; height: 13px; margin-top: -7px; border: solid var(--tt-panel); border-width: 0 0 2px 2px; background: inherit; transform: rotate(45deg); }
.tt-said { font-weight: 600; font-size: 16px; line-height: 1.35; }
.tt-said.is-good { color: var(--tt-good-text); }
.tt-said.is-bad { color: var(--tt-blue-strong); }
.tt-said.is-note { color: var(--tt-orange-text); }
.tt-q { font-weight: 700; font-size: 21px; line-height: 1.25; }
.tt-q.is-sum { font: 700 28px/1.2 var(--tt-digits); white-space: nowrap; }
.tt-q.is-text { font-weight: 600; font-size: 17px; line-height: 1.4; }
.tt-q.is-ways { font: 700 20px/1.45 var(--tt-digits); }
.tt-q-note { color: var(--tt-muted); font-weight: 600; font-size: 16px; line-height: 1.3; }

/* the answer box and the keys */
.tt-answer { flex: none; display: flex; align-items: center; justify-content: center; width: 92px; height: 56px; border: 2px solid var(--tt-blue); border-radius: 10px; background: #fff; font: 700 32px/1 var(--tt-digits); }
.tt-caret { align-self: flex-end; width: 16px; height: 3px; margin: 0 0 11px 2px; background: var(--tt-blue); animation: tt-blink 1.1s steps(1, end) infinite; }
@keyframes tt-blink { 50% { opacity: 0; } }
.tt-answer.is-bad { border-color: var(--tt-bad); box-shadow: 0 0 0 2px var(--tt-bad); color: #5a6067; }
.tt-answer.is-bad .tt-answer-d { text-decoration: line-through; }
.tt-answer.is-bad .tt-caret { display: none; }
.tt-answer.is-shake { animation: tt-shake .3s linear; }
@keyframes tt-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tt-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "k1 k2 k3 k4 k5 kd" "k6 k7 k8 k9 k0 ko"; gap: 6px; border-radius: 12px; }
.tt-key { min-width: 0; min-height: 48px; padding: 0; border: 2px solid var(--tt-edge); border-radius: 10px; background: #fff; font: 700 24px/1 var(--tt-digits); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tt-key:hover { border-color: var(--tt-blue); background: var(--tt-blue-soft); }
.tt-key:active { background: var(--tt-band); }
.tt-key.is-del { color: var(--tt-blue-strong); }
.tt-key.is-ok { border-color: var(--tt-orange); background: var(--tt-orange); font-size: 20px; }
.tt-key.is-ok:hover { border-color: var(--tt-orange-hover); background: var(--tt-orange-hover); }
.tt-tools { justify-content: center; }
@media (min-width: 700px) {
	.tt-ask { flex-wrap: wrap; }
	.tt-cali-pic { width: 56px; }
	.tt-bubble { min-height: 76px; }
	.tt-answer { flex: 1 1 100%; height: 60px; }
	.tt-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "k7 k8 k9" "k4 k5 k6" "k1 k2 k3" "kd k0 ko"; }
	.tt-key { min-height: 52px; }
}

/* what the colours are worth */
.tt-legend { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; color: var(--tt-muted); font-size: 16px; }
.tt-legend-i { display: inline-flex; align-items: center; gap: 5px; color: var(--tt-ink); font: 700 16px/1 var(--tt-digits); }
.tt-legend-c { position: relative; width: 22px; height: 22px; border: 1px solid var(--tt-line-strong); border-radius: 3px; }

/* ---------- questions over the game: "Start over?", "Table complete!" ---------- */
.tt-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); }
.tt-overlay.is-done { background: rgba(255, 255, 255, .5); }
.tt-dialog { max-width: 460px; padding: 16px 20px; border: 2px solid var(--tt-blue); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(26, 31, 39, .18); }
.tt-dialog p { margin: 0 0 10px; font-weight: 600; font-size: 18px; }
.tt-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; max-width: 540px; padding: 16px 20px; border: 2px solid var(--tt-blue); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(26, 31, 39, .28); }
.tt-panel .tt-cali-big { width: 96px; }
.tt-panel-body { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.tt-panel-body .tt-actions { justify-content: flex-start; margin-top: 4px; }
.tt-screen-t { font-weight: 700; font-size: 24px; line-height: 1.2; }
.tt-panel-say { font-size: 17px; }
.tt-done-score { font-size: 19px; }
.tt-done-score b { font-family: var(--tt-digits); font-size: 22px; }
.tt-newrec { padding: 4px 12px; border-radius: 999px; background: var(--tt-lime); color: var(--tt-ink); font-weight: 700; font-size: 17px; }

/* no pops, pulses or shakes; a wrong answer keeps its red outline */
@media (prefers-reduced-motion: reduce) {
	.tt-switch-ui, .tt-switch-ui::after { transition: none; }
	.is-calling, .tt-board.is-calling .tt-grid, .tt-num.is-pop, .tt-body.is-q .tt-num, .tt-body.is-wrong, .tt-answer.is-shake, .tt-caret { animation: none; }
	.tt-float { display: none; }
}