/* Coin flip (wave 2, agent B) — spec §5.6. Uses the tokens of app.css / wheel.css (.lh-app scope).
   The coin itself is never mirrored in RTL (spec §9.9); everything else uses logical properties. */

/* ---------- Layout: coin column + side column (≥ 768 px) ---------- */
.lh-cn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; }
.lh-cn-main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lh-cn-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 768px) { .lh-cn-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
@media (min-width: 1024px) { .lh-cn-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; } }
html:not(.js) .lh-tl-js, html:not(.js) .lh-step__b { display: none !important; }

/* ---------- Cards (side column) ---------- */
.lh-tl-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 16px; box-shadow: var(--lh-shadow-sm); }
.lh-tl-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.lh-tl-card__h { margin: 0; color: var(--lh-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-tl-card__h { letter-spacing: 0; font-size: .875rem; }
.lh-tl-card__acts { display: inline-flex; gap: 2px; }
.lh-tl-card .lh-btn--sm { min-height: 44px; }
.lh-tl-card .lh-btn--sm.lh-btn--icon { width: 44px; min-width: 44px; }
.lh-tl-card .lh-set__row { padding-block: 6px; }
.lh-tl-card > .lh-btn { align-self: flex-start; }
.lh-tl-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.lh-tl-dl > div { padding: 8px 12px; border-radius: 12px; background: var(--lh-surface-2); }
.lh-tl-dl dt { color: var(--lh-muted); font-size: .8125rem; font-weight: 600; }
.lh-tl-dl dd { margin: 2px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* history: fixed height (restoring it never shifts the layout), scrolls inside */
.lh-tl-hist { list-style: none; margin: 0; padding: 0 4px; block-size: 232px; overflow: auto; overscroll-behavior: contain; border-radius: 12px; }
.lh-tl-hist:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 2px; }
.lh-tl-hist__i { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 8px 2px; border-block-end: 1px solid var(--lh-border); }
.lh-tl-hist__i:last-child { border-block-end: 0; }
.lh-tl-hist__t { flex: none; color: var(--lh-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; direction: ltr; }
.lh-tl-hist__v { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.lh-tl-hist__v small { display: block; color: var(--lh-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; word-break: break-all; }
.lh-tl-hist__empty { display: grid; place-items: center; block-size: 100%; padding: 16px; color: var(--lh-muted); font-size: .9375rem; text-align: center; }

/* ---------- Stage: one big 3D coin, or a grid of small coins ---------- */
.lh-cn-stage { position: relative; display: grid; place-items: center; inline-size: 100%; max-inline-size: 680px; block-size: 212px; }
@media (min-width: 768px) { .lh-cn-stage { block-size: 300px; } }
.lh-cn-btn { display: block; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lh-cn-btn:focus-visible { outline: 3px solid var(--lh-focus); outline-offset: 6px; }
.lh-cn-coin {
  --s: 168px; position: relative; z-index: 2; display: block; inline-size: var(--s); block-size: var(--s);
  perspective: 900px; filter: drop-shadow(0 10px 14px rgba(20, 21, 26, .22));
}
@media (min-width: 768px) { .lh-cn-coin { --s: 236px; } }
.lh-cn-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); }
.lh-cn-coin.is-b .lh-cn-spin { transform: rotateY(180deg); }
.lh-cn-rim { position: absolute; inset: 0; border-radius: 50%; background: #A5761F; transform: translateZ(calc(var(--z) * 1px)); }
.lh-cn-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(4px);
  container-type: inline-size; color: #3A2604; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #FFF1BF 0, #F6CC5C 34%, #DDA43A 70%, #B98224 100%);
  box-shadow: inset 0 0 0 4px #C99234, inset 0 0 0 8px #F8DA88, inset 0 0 0 10px rgba(120, 78, 10, .45), inset 0 -10px 22px rgba(120, 78, 10, .25);
}
.lh-cn-face--b {
  transform: rotateY(180deg) translateZ(4px); color: #1C2233;
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0, #D9DEE8 34%, #AEB6C6 72%, #858EA2 100%);
  box-shadow: inset 0 0 0 4px #8E97AB, inset 0 0 0 8px #E7EAF1, inset 0 0 0 10px rgba(40, 48, 70, .4), inset 0 -10px 22px rgba(40, 48, 70, .22);
}
.lh-cn-em { inline-size: 22%; block-size: 22%; opacity: .85; }
.lh-cn-t { max-inline-size: 78%; font-weight: 850; line-height: 1.05; overflow-wrap: anywhere; text-wrap: balance; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.lh-cn-t.is-xl { font-size: 17cqi; } .lh-cn-t.is-l { font-size: 12.5cqi; } .lh-cn-t.is-m { font-size: 10cqi; } .lh-cn-t.is-s { font-size: 8cqi; }
:lang(ar) .lh-cn-t { letter-spacing: 0; line-height: 1.3; }

/* many coins: square cells sized by JS (--c), small 3D coins with the label initials */
.lh-cn-cells { --c: 44px; --cols: 5; display: grid; grid-template-columns: repeat(var(--cols), var(--c)); gap: 6px; justify-content: center; align-content: center; margin: 0; padding: 0; list-style: none; block-size: 100%; }
.lh-cn-cell { inline-size: var(--c); block-size: var(--c); perspective: 400px; }
.lh-cn-cs { position: relative; display: block; inline-size: 100%; block-size: 100%; transform-style: preserve-3d; }
.lh-cn-cell.is-b .lh-cn-cs { transform: rotateY(180deg); }
.lh-cn-cf {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-weight: 850; font-size: max(10px, calc(var(--c) * .38)); line-height: 1; color: #3A2604;
  background: radial-gradient(circle at 34% 28%, #FFF1BF 0, #F6CC5C 40%, #CF962E 100%); box-shadow: inset 0 0 0 2px #C99234, 0 1px 2px rgba(20, 21, 26, .25);
}
.lh-cn-cf--b { transform: rotateY(180deg); color: #1C2233; background: radial-gradient(circle at 34% 28%, #FFFFFF 0, #CDD3DE 45%, #8C95A8 100%); box-shadow: inset 0 0 0 2px #8E97AB, 0 1px 2px rgba(20, 21, 26, .25); }
.lh-cn-stage.is-multi .lh-cn-btn { display: none; }

/* ---------- Result line (fixed height) ---------- */
.lh-cn-res { display: flex; align-items: center; justify-content: center; inline-size: 100%; max-inline-size: 680px; min-block-size: 64px; margin-block-start: 6px; text-align: center; }
.lh-cn-hint { margin: 0; color: var(--lh-muted); font-size: .9375rem; }
.lh-cn-hint--err { color: var(--lh-danger); font-weight: 650; }
.lh-cn-big { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 22px 4px 16px; border-radius: 999px; background: var(--lh-brand-soft); font-size: 1.5rem; font-weight: 850; line-height: 1.15; overflow-wrap: anywhere; }
.lh-cn-badge { margin-inline-start: 6px; padding: 2px 10px; border-radius: 999px; background: var(--lh-accent); color: #14151A; font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.lh-cn-dot { display: inline-block; flex: none; inline-size: 14px; block-size: 14px; border-radius: 50%; vertical-align: -1px; background: radial-gradient(circle at 35% 30%, #FFF1BF, #E2A93C); box-shadow: inset 0 0 0 1.5px #B98224; }
.lh-cn-dot--b { background: radial-gradient(circle at 35% 30%, #FFFFFF, #9AA2B4); box-shadow: inset 0 0 0 1.5px #737C90; }
.lh-cn-set__l .lh-cn-dot, .lh-cn-lab .lh-cn-dot { margin-inline-end: 6px; }
.lh-cn-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; inline-size: min(100%, 420px); }
.lh-cn-sum__l { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 650; min-width: 0; }
.lh-cn-sum__l bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-cn-sum__l strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.lh-cn-sum__l--b { justify-content: flex-end; }
.lh-cn-pct { color: var(--lh-muted); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-cn-split { grid-column: 1 / -1; display: block; block-size: 10px; border-radius: 5px; overflow: hidden; background: #A3AABA; }
.lh-cn-split > span { display: block; block-size: 100%; background: #E2A93C; transition: inline-size .3s var(--lh-ease); }

/* ---------- Number of coins + action bar ---------- */
.lh-cn-count { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-start: 4px; }
.lh-cn-count__l { font-weight: 650; font-size: .9375rem; }
.lh-tl-step .lh-step__b { inline-size: 48px; block-size: 48px; font-size: 1.25rem; }
.lh-tl-step .lh-num { inline-size: 64px; block-size: 48px; font-size: 1.0625rem; }
.lh-cn .lh-bar { justify-content: center; }
@media (min-width: 768px) { .lh-cn .lh-bar { max-inline-size: 360px; } }
.lh-cn .lh-spin[aria-disabled="true"] { cursor: progress; }

/* ---------- Options ---------- */
.lh-cn-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lh-cn-lab { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lh-cn-lab .lh-field { min-block-size: 48px; }
.lh-cn-total { margin: 0; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.lh-cn-bars .lh-bars__i { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr) auto; }
.lh-cn-bars .lh-bars__fill { background: linear-gradient(90deg, #F6CC5C, #D79A2E); transition: inline-size .3s var(--lh-ease); }
.lh-cn-bars .lh-cn-bars--b .lh-bars__fill { background: linear-gradient(90deg, #C3C9D5, #808AA0); }
.lh-cn-bars .lh-bars__n { min-inline-size: 76px; font-weight: 700; font-size: .8125rem; }

/* ---------- Effects ---------- */
.lh-cn-big.is-pop { animation: lh-cn-pop .32s var(--lh-ease); }
@keyframes lh-cn-pop { 0% { transform: scale(.86); opacity: .4; } 60% { transform: scale(1.04); } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lh-cn-big.is-pop { animation: none; } }
.lh-reduced .lh-cn-big.is-pop { animation: none; }

@media print { .lh-cn-side, .lh-cn .lh-bar, .lh-cn-count { display: none !important; } }