/* 3D Coin Flip. The coins' canvas fills the stage; the result, the tally
   card and the buttons float over it. Side colors: the first side takes the
   category accent, the second the blue of the time tools. */

.cf { --cf-a: var(--cat); --cf-b: var(--c-time); overflow: hidden; }
.cf-host {
  background:
    radial-gradient(110% 80% at 50% 62%, color-mix(in srgb, var(--cat) 9%, var(--stage-bg)), var(--stage-bg) 72%);
}
.cf-host .t-canvas { cursor: pointer; }

/* ---- the result ---- */
.cf-result-wrap {
  position: absolute; top: clamp(8px, 3cqmin, 30px); left: 0; right: 0; z-index: 4;
  display: flex; justify-content: center; pointer-events: none; transition: opacity .2s;
}
.cf-result-wrap.is-empty { visibility: hidden; }
.cf.is-flipping .cf-result-wrap { opacity: 0; }
.cf-result {
  display: flex; align-items: baseline; gap: .4em; max-width: 92%; min-height: 1.2em;
  padding: .18em .85em; border-radius: 999px; white-space: nowrap; overflow: hidden;
  font: 700 clamp(20px, 8.5cqmin, 132px)/1.2 var(--font-display); letter-spacing: -.01em;
  background: color-mix(in srgb, var(--stage-bg) 90%, transparent); color: var(--stage-ink);
  border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.cf-result.is-many { font-size: clamp(16px, 5.4cqmin, 84px); }
.cf-res { overflow: hidden; text-overflow: ellipsis; color: var(--cf-a); }
.cf-res[data-side="1"] { color: var(--cf-b); }
.cf-res b { font-variant-numeric: tabular-nums; color: var(--stage-ink); }
.cf-sep { font-style: normal; color: var(--muted); }

/* ---- the tally card ---- */
.cf-card {
  position: absolute; top: clamp(8px, 3cqmin, 30px); left: clamp(8px, 3cqmin, 30px); z-index: 4;
  width: clamp(150px, 31cqmin, 360px); padding: clamp(9px, 2.2cqmin, 22px);
  display: grid; gap: .5em;
  border-radius: clamp(10px, 2.2cqmin, 22px); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
  font-size: clamp(12px, 2.7cqmin, 30px); line-height: 1.25;
}
.cf-card[hidden] { display: none; }
.cf-card-title {
  font: 650 .72em/1 var(--font-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.cf-hist-title { margin-top: .25em; }
.cf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; gap: .5em; }
.cf-dot { width: .7em; height: .7em; border-radius: 50%; background: var(--cf-a); align-self: center; }
.cf-row[data-side="1"] .cf-dot { background: var(--cf-b); }
.cf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cf-cnt { font: 700 1.3em/1 var(--font-display); font-variant-numeric: tabular-nums; }
.cf-pct { min-width: 2.8em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-bar { display: flex; height: .55em; border-radius: 999px; overflow: hidden; background: var(--cf-b); }
.cf-bar.is-empty { background: var(--line); }
.cf-bar.is-empty .cf-bar-h { background: transparent; }
.cf-bar-h { background: var(--cf-a); transition: width .45s cubic-bezier(.2, .8, .3, 1); }
.cf-streak { font-weight: 600; color: var(--ink-soft); }
.cf-hist { display: flex; flex-wrap: wrap; gap: .3em; }
.cf-hist:empty { display: none; }
.cf-chip {
  width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center;
  font: 700 .8em/1 var(--font-display); color: #fff; background: var(--cf-a);
}
.cf-chip[data-side="1"] { background: var(--cf-b); }
.cf-chip:first-child { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in srgb, var(--ink) 35%, transparent); }

/* ---- labels under the coins, when there are several ---- */
.cf-tags { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cf-tag {
  position: absolute; transform: translate(-50%, 0); max-width: 22cqw;
  padding: .2em .7em; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 650 clamp(11px, 3cqmin, 34px)/1.2 var(--font-display); color: #fff; background: var(--cf-a);
  box-shadow: var(--shadow-sm); animation: t-pop .4s cubic-bezier(.2, 1.6, .4, 1);
}
.cf-tag[data-side="1"] { background: var(--cf-b); }

.cf-hint {
  position: absolute; left: 50%; bottom: calc(clamp(36px, 8.4cqmin, 84px) + clamp(16px, 5.2cqmin, 56px));
  transform: translateX(-50%); z-index: 4; pointer-events: none; white-space: nowrap;
  padding: .3em .8em; border-radius: 999px; font-size: clamp(11px, 2.6cqmin, 22px);
  background: color-mix(in srgb, var(--stage-ink) 8%, transparent); color: color-mix(in srgb, var(--stage-ink) 72%, transparent);
}
.cf-count { min-width: 5.2em; justify-content: center; }

/* ---- flat coins, when there is no WebGL ---- */
.cf { --m: #e3b24c; --m-hi: #fff2c2; --m-lo: #8f6418; --m-ink: #6b470b; }
.cf[data-finish="silver"] { --m: #c4cad3; --m-hi: #ffffff; --m-lo: #6d7480; --m-ink: #464d58; }
.cf[data-finish="copper"] { --m: #d4865a; --m-hi: #ffdcc4; --m-lo: #763a1b; --m-ink: #5a2a10; }
.cf-host.is-flat { display: grid; place-items: center; padding: 15cqmin 4cqmin 19cqmin; }
.cf-flat { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5cqmin; max-width: 100%; }
.cf-fcoin { position: relative; width: clamp(64px, 30cqmin, 460px); aspect-ratio: 1; perspective: 900px; cursor: pointer; }
.cf-flat:has(> :nth-child(3)) .cf-fcoin { width: clamp(56px, 21cqmin, 320px); }
.cf-flat:has(> :nth-child(4)) .cf-fcoin { width: clamp(48px, 16cqmin, 250px); }
.cf-flift, .cf-fspin { position: absolute; inset: 0; transform-style: preserve-3d; }
.cf-fface {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, color-mix(in srgb, var(--m-lo) 55%, transparent) 63%, transparent 64.5%),
    radial-gradient(circle at 34% 28%, var(--m-hi), var(--m) 46%, var(--m-lo) 100%);
  box-shadow: inset 0 0 0 4cqmin color-mix(in srgb, var(--m) 70%, var(--m-hi)), inset 0 0 0 4.6cqmin var(--m-lo),
    inset 0 .8cqmin 1.2cqmin rgba(255, 255, 255, .5), inset 0 -.8cqmin 1.4cqmin rgba(0, 0, 0, .3);
}
.cf-fface.is-t { transform: rotateX(180deg); }
.cf-fface span {
  max-width: 70%; text-align: center; overflow-wrap: anywhere;
  font: 800 clamp(11px, 4.6cqmin, 64px)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  color: var(--m-ink); text-shadow: 0 1px 0 var(--m-hi), 0 -1px 0 color-mix(in srgb, var(--m-lo) 60%, transparent);
}
.cf-fshadow {
  position: absolute; left: 8%; right: 8%; bottom: -9%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .32), transparent);
}

@container (max-height: 460px) {
  .cf-hist, .cf-hist-title { display: none; }
}
@container (max-height: 340px) or (max-width: 560px) {
  .cf-card { display: none !important; }
}
@container (max-height: 300px) {
  .cf-hint { display: none; }
}
@container (max-width: 400px) {
  .cf-count { display: none; }
}
/* Short and wide (a Board widget in a bottom row): only the Flip button,
   on the right, so the coins can have the height. 1 – 5 still set the count. */
@container (max-height: 340px) and (min-aspect-ratio: 8/5) {
  .cf .t-controls { left: auto; top: 0; flex-direction: column; justify-content: center; }
  .cf .t-controls .t-btn-round, .cf-count { display: none; }
  .cf-host.is-flat { padding: 12cqmin clamp(100px, 24cqw, 200px) 6cqmin 4cqmin; }
  .cf-flat:not(:has(> :nth-child(2))) .cf-fcoin { width: clamp(64px, 50cqmin, 300px); }
}