/* Higher or Lower: mode switch, two big cards face to face, reveal, results and stats. */
.hl-page { --hl-tint: color-mix(in srgb, var(--cbx-accent) 12%, #fff); }
.hl-page [hidden] { display: none !important; }

.hl-modes { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.hl-modes button { flex: 1; border: 0; background: transparent; padding: 10px 6px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; white-space: nowrap; }
.hl-modes button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(42, 29, 23, .12); }
.hl-tick { color: var(--cbx-good); }

.hl-card { padding: 12px 12px 16px; }
.hl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hl-top-r { display: flex; align-items: center; gap: 8px; }
.hl-pill { font: 900 13px var(--cbx-body); background: var(--hl-tint); color: color-mix(in srgb, var(--cbx-accent) 70%, #000); padding: 6px 11px; border-radius: 999px; }
.hl-clock { font: 900 14px var(--cbx-body); font-variant-numeric: tabular-nums; color: var(--cbx-ink-2); background: var(--cbx-soft); padding: 6px 10px; border-radius: 10px; }
.hl-icon { border: 0; background: var(--cbx-soft); width: 36px; height: 34px; border-radius: 10px; font-size: 17px; cursor: pointer; }

.hl-card .hl-challenge { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff4e6; box-shadow: inset 0 0 0 2px #f6c58f; font: 800 15px/1.35 var(--cbx-body); color: #5a3510; }
.hl-card .hl-challenge b { color: #c25e00; }

.hl-dots { justify-content: center; margin: 14px 0 4px; }
.hl-card .hl-cat { margin: 12px 0 0; text-align: center; font: 900 12px var(--cbx-body); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--cbx-accent) 80%, #000); }
.hl-q { margin: 4px 0 14px; text-align: center; font: 900 clamp(23px, 6vw, 30px)/1.15 var(--cbx-display); color: var(--cbx-ink); letter-spacing: -.01em; }

/* ---- the two cards ---- */
.hl-arena { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hl-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; min-height: 228px; padding: 22px 10px 14px; border-radius: 22px; border: 2px solid var(--cbx-line); background: #fff;
  box-shadow: 0 5px 0 var(--cbx-line); color: var(--cbx-ink); cursor: pointer; font: inherit; text-align: center;
  transition: transform .12s, border-color .15s, background .2s, box-shadow .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hl-art { height: 64px; display: grid; place-items: center; }
.hl-emoji { font-size: 56px; line-height: 1; }
.hl-art img { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 10px rgba(42, 29, 23, .15); }
.hl-name { flex: 1; display: flex; align-items: center; justify-content: center; font: 900 clamp(16px, 4.4vw, 19px)/1.2 var(--cbx-body); overflow-wrap: anywhere; hyphens: auto; }
.hl-val { min-width: 70%; padding: 8px 10px; border-radius: 12px; background: var(--cbx-soft); color: var(--cbx-muted); font: 900 clamp(15px, 4.2vw, 19px)/1.1 var(--cbx-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-val.on { background: var(--hl-tint); color: var(--cbx-ink); }
.hl-mark { position: absolute; top: 8px; right: 8px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 900 16px var(--cbx-body); color: #fff; }
.hl-mark:empty { display: none; }
@media (hover: hover) { .hl-opt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--cbx-accent); box-shadow: 0 8px 0 color-mix(in srgb, var(--cbx-accent) 30%, var(--cbx-line)); } }
.hl-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--cbx-line); }
.hl-opt:disabled { cursor: default; }
.hl-opt.win { border-color: var(--cbx-good); }
.hl-opt.win .hl-val.on { background: var(--cbx-good); color: #fff; }
.hl-opt.win .hl-mark { background: var(--cbx-good); font-size: 13px; }
.hl-opt.right { background: var(--cbx-good-soft); box-shadow: 0 5px 0 #9fd9b8; animation: hl-pop .35s ease; }
.hl-opt.wrong { border-color: var(--cbx-bad); background: var(--cbx-bad-soft); box-shadow: 0 5px 0 #f2b0a9; animation: cbx-shake .4s ease; }
.hl-opt.wrong .hl-val.on { background: var(--cbx-bad); color: #fff; }
.hl-opt.wrong .hl-mark { background: var(--cbx-bad); }
.hl-opt.right .hl-mark { font-size: 16px; }
.hl-opt.enter { animation: hl-in .32s ease both; }
.hl-opt[data-side="1"].enter { animation-delay: .05s; }
.hl-opt.stay::before { content: '👑 stays'; position: absolute; top: 8px; left: 8px; padding: 2px 8px 2px 6px; border-radius: 999px; background: #fff4d6; color: #7a5600; font: 900 11px/1.6 var(--cbx-body); letter-spacing: .02em; }
.hl-card .hl-miss { display: block; margin: 6px auto 0; max-width: 34em; font: 800 13.5px/1.4 var(--cbx-body); color: var(--cbx-muted); }
.hl-vs { position: absolute; left: 50%; top: 92px; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--cbx-ink); color: #fff; font: 900 14px var(--cbx-body); letter-spacing: .04em; box-shadow: 0 0 0 5px #fff; z-index: 2; pointer-events: none; }
@keyframes hl-pop { 40% { transform: scale(1.04); } }
@keyframes hl-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.hl-card .hl-note { min-height: 2.8em; margin: 12px 4px 10px; text-align: center; font: 800 15px/1.4 var(--cbx-body); color: var(--cbx-ink-2); }
.hl-note .ok { color: var(--cbx-good); }
.hl-note .no { color: var(--cbx-bad); }

/* ---- results ---- */
.hl-result { margin-top: 6px; }
.hl-result .cbx-big small { font-size: .4em; }
.hl-card .hl-res-sub { margin: 4px 0 6px; font: 900 17px var(--cbx-body); color: var(--cbx-ink-2); }
.hl-grid { font-size: 22px; letter-spacing: .04em; }
.hl-card .hl-vsline { margin: 6px 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--cbx-soft); font: 900 17px/1.35 var(--cbx-body); color: var(--cbx-ink); }
.hl-card .hl-vsline.win { background: var(--hl-tint); color: color-mix(in srgb, var(--cbx-accent) 75%, #000); }
.hl-mini, .hl-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 14px; }
.hl-nums { grid-template-columns: repeat(3, 1fr); }
.hl-mini div, .hl-nums div { background: var(--cbx-soft); border-radius: 12px; padding: 8px 4px; text-align: center; }
.hl-mini b, .hl-nums b { display: block; font: 900 22px var(--cbx-body); color: var(--cbx-ink); font-variant-numeric: tabular-nums; }
.hl-mini span, .hl-nums span { display: block; font: 800 11px/1.2 var(--cbx-body); color: var(--cbx-muted); text-transform: uppercase; letter-spacing: .03em; }
.hl-name-in { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 900 13px var(--cbx-body); color: var(--cbx-muted); text-transform: uppercase; letter-spacing: .04em; }
.hl-name-in input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 2px solid var(--cbx-line); font: 800 16px var(--cbx-body); color: var(--cbx-ink); text-transform: none; letter-spacing: 0; background: #fff; }
.hl-result #resShare2, .hl-result #resAgain { margin-top: 10px; }
.hl-link { display: block; margin: 10px auto 0; border: 0; background: none; padding: 8px; font: 900 15px var(--cbx-body); color: color-mix(in srgb, var(--cbx-accent) 85%, #000); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hl-card .hl-review { margin: 8px 0 0; text-align: left; border-top: 2px solid var(--cbx-soft); padding-top: 10px; }
.hl-review summary { text-align: center; color: var(--cbx-ink-2); }
.hl-review ol { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hl-review li { padding: 8px 10px; border-radius: 12px; background: var(--cbx-paper); font: 800 14px/1.4 var(--cbx-body); color: var(--cbx-ink-2); }
.hl-review li small { color: var(--cbx-muted); font-weight: 800; }
.hl-review li .ok { color: var(--cbx-good); font-weight: 900; }
.hl-review li .no { color: var(--cbx-bad); font-weight: 900; }
.hl-review li em { font-style: normal; color: var(--cbx-muted); white-space: nowrap; }
.hl-review li .w { color: var(--cbx-ink); font-weight: 900; }
.hl-review li .w em { color: var(--cbx-good); }
.hl-review li i { color: var(--cbx-muted); font-style: normal; font-size: 12px; }

/* ---- stats dialog (top layer) ---- */
.hl-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); font-family: var(--cbx-body); color: var(--cbx-ink); }
.hl-dlg::backdrop { background: rgba(31, 22, 50, .45); }
.hl-dlg-card { padding: 20px; }
.hl-dlg h2 { margin: 0 0 4px; font: 900 22px 'Fraunces', Georgia, serif; color: #2a1d17; }
.hl-dlg h3 { margin: 4px 0 8px; font: 900 15px 'Nunito', system-ui, sans-serif; color: #2a1d17; }
.hl-dlg .hl-nums div { background: #f3e8da; }
.hl-dlg .hl-nums b { color: #2a1d17; }
.hl-dlg .hl-nums span { color: #7d685c; }
.hl-dist { display: grid; gap: 4px; }
.hl-bar { display: flex; align-items: center; gap: 8px; font: 900 13px 'Nunito', system-ui, sans-serif; }
.hl-bar .k { width: 18px; color: #4a3a30; text-align: right; }
.hl-bar .v { display: block; min-width: 24px; padding: 2px 8px; border-radius: 6px; background: #878c99; color: #fff; text-align: right; box-sizing: border-box; }
.hl-bar.me .v { background: #6a3fd6; }
.hl-dlg-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

@media (min-width: 640px) {
  .hl-opt { min-height: 250px; padding-top: 26px; }
  .hl-arena { gap: 18px; }
  .hl-emoji { font-size: 64px; }
  .hl-art { height: 72px; }
  .hl-art img { width: 96px; height: 64px; }
  .hl-vs { top: 100px; }
}
@media (max-width: 360px) { .hl-opt { min-height: 210px; padding: 20px 6px 12px; } .hl-emoji { font-size: 48px; } }
@media (prefers-reduced-motion: reduce) { .hl-opt, .hl-opt.enter, .hl-opt.right, .hl-opt.wrong { animation: none; transition: none; } }