/* intervle/intervle.css: Intervle's look, a daily puzzle game. Page parts
 * (header, windows, footer) come from shared/ui/page.css; colours and fonts
 * only from the theme (shared/ui/themes.css). Right and wrong: --color-good /
 * --color-bad.
 */
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
/* A game screen, not a document: no pull-to-refresh or page bounce, no text growing when turned sideways. */
html, body { overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }
/* Controls never select their label or pop the callout on a long press; text stays selectable. */
:is(.tab, .answer, .past-row, .today-btn, .seg button, .play-row) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
:is(.tab, .past-row, .seg button):active { transform: scale(0.97); }
.iv { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.2dvh, 16px); }
.flame { color: color-mix(in srgb, var(--color-warn-end) 40%, var(--color-warn-start)); }
:is(.tab, .answer, .play-btn, .past-btn, .share-btn, .seg button, .past-row, .today-btn):focus-visible { outline: 2px solid var(--color-right); outline-offset: 3px; }

/* --- The day: #6, the date, the streak, past games --- */
.day-line { display: flex; align-items: center; gap: 12px; }
.day-num { font: var(--title-weight) 34px/1 var(--font-display); letter-spacing: var(--title-spacing); color: var(--color-title); font-variant-numeric: tabular-nums; }
.day-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.day-date { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--color-text-inactive); }
.day-date::first-letter { text-transform: uppercase; }
.today-btn { padding: 2px 0; border: 0; background: none; font: 700 13px var(--font-main); color: var(--color-right); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.today-btn[hidden] { display: none; }
.streak { display: inline-flex; align-items: center; gap: 3px; font: 700 20px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.streak .flame { width: 22px; height: 22px; }
.past-btn svg, .share-btn svg { width: 20px; height: 20px; }
.share-btn[hidden] { display: none; }
.day-line { position: relative; }
.copied { position: absolute; right: 0; top: 100%; z-index: 2; padding: 4px 10px; border-radius: var(--radius-control); background: var(--color-right); color: var(--bg-page); font-size: 13px; font-weight: 700; }
.copied:empty { display: none; }

/* --- Modes --- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--color-panel); }
.tab {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 4px 6px; border: 0; border-radius: var(--radius-control); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: 700 15px/1.1 var(--font-main); color: var(--color-text-inactive); transition: background 0.2s, color 0.2s, transform 0.1s ease-out;
}
.tab[aria-selected="true"] { background: var(--color-left); color: var(--color-text-pinched); }
.tab-mark svg { width: 14px; height: 14px; display: block; }
.tab[data-result="won"] .tab-mark { color: var(--color-good); }
.tab[data-result="lost"] .tab-mark { color: var(--color-bad); }
.tab[aria-selected="true"] .tab-mark { color: inherit; }

/* --- The puzzle --- */
.play-panel { display: flex; flex-direction: column; align-items: stretch; gap: clamp(6px, 1.2dvh, 14px); }
.prompt { margin: 0; min-height: 2.5em; display: grid; place-items: center; text-align: center; font: 600 19px/1.25 var(--font-display); color: var(--color-title); text-wrap: balance; }
.play-row { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.play-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hint-btn { min-height: 52px; padding: 10px 18px; font-size: 16px; font-weight: 700; }
.hint-btn[hidden] { display: none; }
.play-btn { min-width: 160px; min-height: 52px; padding: 10px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 700; touch-action: manipulation; transition: transform 0.12s ease-out, background 0.15s ease-out; }
.play-btn svg { width: 18px; height: 18px; flex: none; }
.play-btn:active { transform: scale(0.96); }
/* Playing: the same button, turned to Stop, with a quiet outline instead of the fill. */
.play-btn.busy { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-primary); }
.note-dots { display: flex; gap: 6px; min-height: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--color-right) 30%, transparent); transition: background 0.15s, transform 0.15s; }
.dot.was { background: color-mix(in srgb, var(--color-right) 60%, transparent); }
.dot.on { background: var(--color-right); transform: scale(1.4); }
.loading { margin: -4px 0 0; text-align: center; font-size: 13px; font-weight: 700; }
.loading[hidden] { display: none; }

/* --- Answer tiles --- */
.answers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; perspective: 600px; }
.answers[data-mode="easy"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Hard: the chord's note (6 + 6), then its type (one row of 7). */
.answers[data-mode="hard"] { display: flex; flex-direction: column; gap: 10px; }
.tile-group { display: grid; gap: 6px; }
.tile-group.root { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile-group.type { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tile-group .answer { min-height: 44px; padding: 2px; }
.answers[data-mode="hard"] .answer-name { font-size: 16px; }
.tile-group.type .answer-name { font-size: 13px; letter-spacing: -0.01em; }
.answer[aria-pressed="true"] { background: var(--color-left); color: var(--color-text-pinched); box-shadow: none; transform: translateY(-2px); }
.answer {
  position: relative; min-width: 0; min-height: clamp(44px, 7dvh, 58px); padding: 4px; border: 0; border-radius: var(--radius-control);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--color-panel); color: var(--color-btn-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-panel) 70%, transparent);
  font: 700 15px/1.1 var(--font-main); cursor: pointer; touch-action: manipulation; overflow-wrap: break-word; hyphens: auto;
  transition: background 0.15s ease-out, color 0.15s ease-out, opacity 0.2s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.answers[data-mode="easy"] .answer { font-size: 14px; min-height: clamp(44px, 6dvh, 54px); }
.answers:not([data-mode="easy"]) .answer-name { font-size: 18px; }
.answer-sub { font-size: 11px; font-weight: 500; opacity: 0.75; }
.answer:active:not(.after) { transform: scale(0.95); }
.answer.after { cursor: default; }
.answer.bad { opacity: 0.32; text-decoration: line-through; }
.answer.after:not(.good):not(.bad) { opacity: 0.45; }
.answer.good { background: var(--color-good); color: var(--color-good-text); box-shadow: none; opacity: 1; }
.answer.match { box-shadow: inset 0 0 0 2px var(--color-right); }
.answer.flip { animation: flip 0.4s ease-out; }
@keyframes flip { from { transform: rotateX(90deg); } }
.answer-key { position: absolute; top: 2px; left: 5px; font-size: 9px; font-weight: 500; opacity: 0.55; }

.type-box {
  min-height: 40px; padding: 6px 12px; border-radius: var(--radius-control); border: 0; box-shadow: inset 0 0 0 1px var(--border-panel);
  background: var(--color-panel); color: var(--color-text); font: 500 16px var(--font-main); -webkit-user-select: text; user-select: text;   /* 16px: iPad Safari zooms into smaller inputs */
}
.type-box::placeholder { color: var(--color-text-inactive); }
.type-box:focus { outline: 2px solid var(--color-right); outline-offset: 1px; }
.type-box:disabled { opacity: 0.4; }

/* --- Tries and the result --- */
.feedback { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.feedback p { margin: 0; line-height: 1.25; }
.tries { display: flex; gap: 5px; }
.try { width: 18px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--color-right) 30%, transparent); }
.try.used { background: var(--color-bad); }
.try.good { background: var(--color-good); }
.fb-main:empty { display: none; }
.fb-main { font: 800 19px/1.2 var(--font-display); }
.fb-main.good { color: var(--color-good); }
.fb-main.bad { color: var(--color-bad); }
.fb-detail { font-size: 14px; color: var(--color-text-inactive); }
.fb-main:is(.good, .bad) + .fb-detail { color: var(--color-text); }

/* --- Windows --- */
.group-label { font-size: 15px; font-weight: 600; }
.seg { display: flex; border: var(--border-width) solid var(--border-panel); border-radius: var(--radius-control); overflow: hidden; }
.seg button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; background: var(--color-panel); color: var(--color-btn-text); cursor: pointer;
  font: 600 14px/1.15 var(--font-main); touch-action: manipulation;
}
.seg button + button { border-left: 1px solid var(--border-panel); }
.seg button[aria-pressed="true"] { background: var(--color-left); color: var(--color-text-pinched); }
.past-list { list-style: none; margin: 0; padding: 0; max-height: min(60dvh, 420px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; }
.past-row {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; text-align: left; border: 0;
  border-radius: var(--radius-control); background: var(--color-panel); color: var(--color-btn-text); font: 600 14px var(--font-main); cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.past-row.current { box-shadow: inset 0 0 0 2px var(--color-right); }
.past-num { min-width: 3ch; font: 700 15px var(--font-display); color: var(--color-right); }
.past-date { flex: 1; }
.past-date::first-letter { text-transform: uppercase; }
.past-marks { display: flex; gap: 4px; }
.past-mark { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-panel); display: grid; place-items: center; }
.past-mark svg { width: 12px; height: 12px; }
.past-mark[data-result="won"] { color: var(--color-good); box-shadow: inset 0 0 0 1.5px var(--color-good); }
.past-mark[data-result="lost"] { color: var(--color-bad); box-shadow: inset 0 0 0 1.5px var(--color-bad); }

@media (hover: hover) and (pointer: fine) {
  .tab:hover:not([aria-selected="true"]) { background: var(--color-hover); color: var(--color-hover-text); }
  .answer:not(.after):hover { transform: translateY(-2px); background: var(--color-hover); color: var(--color-hover-text); }
  .play-btn:hover { transform: translateY(-1px); }
  .play-btn:active { transform: scale(0.96); }
  .play-btn.busy:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-text); }
  :is(.seg button, .past-row):hover:not([aria-pressed="true"]) { background: var(--color-hover); color: var(--color-hover-text); }
  .past-row:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .answer.flip { animation: none; }
}