/* Higher or Lower lives in its own screen; selectors do not restyle daily play. */
body:not([data-view="higherLower"]) #higherLower { display: none !important; }
body[data-view="higherLower"] #pavilionWorld { visibility: hidden; }
body[data-view="higherLower"] { background: radial-gradient(ellipse at 50% 30%, #124334 0, #061f1d 75%); }
#home .hl-entry { display: flex; align-items: center; gap: 15px; width: 100%; max-width: 377px; min-height: 65px; padding: 12px 17px; color: #fff0d1; border: 1px solid #cfb27c80; border-radius: 5px; background: #103b30; cursor: pointer; text-align: left; }
.hl-entry > span:nth-child(2) { flex: 1; }
.hl-entry strong { display: block; font-size: 15px; font-weight: 600; }
.hl-entry small { display: block; margin-top: 5px; font-size: 10px; color: #c4d0b8; }
.hl-entry .hl-entry-mark { font: 27px Georgia, serif; color: #e8c580; }
#home .hl-entry:hover { background: #1c513d; border-color: #e8c580; }
#higherLower { max-width: 1050px; gap: 18px; padding: 4px 0 20px; }
#higherLower button { cursor: pointer; }
.hl-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #bbcaaf; font-size: 10px; letter-spacing: .13em; }
.hl-back { background: none; border: 0; padding: 0 8px 0 0; color: #e8c580; font-size: 13px; letter-spacing: 0; }
.hl-best { padding: 8px 12px; border: 1px solid #c6a15d50; border-radius: 999px; font-size: 12px; letter-spacing: 0; }
.hl-best b { margin-left: 6px; color: #fff0d1; font-variant-numeric: tabular-nums; }
.hl-intro { text-align: center; }
.hl-kicker { font: 600 9px/1.5 var(--body); letter-spacing: .2em; color: #e8c580; margin: 0 0 8px; }
.hl-intro h1 { font: 400 clamp(38px, 5vw, 65px)/1.05 Georgia, serif; letter-spacing: -2px; margin: 0; }
.hl-intro h1 em { color: #e8c580; }
.hl-intro > p:last-child { color: #bfd0b8; font-size: 13px; margin: 12px auto 0; max-width: 56ch; }
.hl-scoreline { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #bfd0b8; max-width: 500px; width: 100%; margin: 0 auto; }
.hl-score { display: flex; align-items: center; gap: 9px; color: #e8c580; }
.hl-score strong { font: 400 40px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.hl-score span { font-size: 8px; letter-spacing: .15em; max-width: 4ch; line-height: 1.5; }
.hl-match { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hl-event { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 19px 24px 21px; border: 1px solid #79926966; border-radius: 15px; background: linear-gradient(160deg, #164833, #0b3028); overflow: hidden; }
.hl-candidate { border-color: #e8c580a6; background: linear-gradient(160deg, #274d36, #11372b); }
.hl-card-label { display: flex; width: 100%; justify-content: space-between; gap: 8px; color: #e8c580; font-size: 9px; letter-spacing: .13em; line-height: 1.5; }
.hl-card-label span:last-child { color: #bacbae; letter-spacing: 0; }
.hl-art { width: 100%; height: 150px; margin: 4px 0 8px; display: grid; place-items: center; font-size: 60px; overflow: hidden; }
.hl-art canvas, .hl-art svg { display: block; width: 100%; height: 100%; max-height: 150px; object-fit: contain; }
.hl-event h2 { font: 400 clamp(21px, 2.2vw, 28px)/1.22 Georgia, serif; letter-spacing: -.35px; text-align: center; margin: 0 auto 15px; max-width: 27ch; min-height: 2.5em; }
.hl-odds { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: auto; }
.hl-odds strong { color: #e8c580; font: 400 42px/1 Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.hl-odds span { color: #c2cdb4; font-size: 11px; }
.hl-versus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #e8c580; color: #123728; font: italic 19px Georgia, serif; box-shadow: 0 0 0 7px #082b25; }
.hl-decision { text-align: center; }
.hl-decision > p { color: #d2d8bd; font-size: 12px; margin: 0 0 12px; }
.hl-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 570px; margin: 0 auto; }
.hl-choices button, .hl-feedback button { min-height: 55px; padding: 12px 20px; border: 1px solid #e8c580; border-radius: 7px; font-size: 16px; font-weight: 600; }
#hlMore, .hl-feedback button { background: #e8c580; color: #153b2c; }
#hlLess { background: #153e2d; color: #fff0d1; }
.hl-choices span { margin-right: 7px; font-size: 24px; font-weight: 400; vertical-align: -1px; }
.hl-choices button:hover, .hl-feedback button:hover { filter: brightness(1.12); }
.hl-feedback { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #86c99570; border-radius: 12px; background: #123d2b; padding: 18px 24px; }
.hl-feedback h2 { font: 400 28px/1.2 Georgia, serif; margin: 0; }
.hl-feedback p:last-child { font-size: 12px; color: #d1dabd; margin: 7px 0 0; }
.hl-feedback button { flex: 0 0 auto; font-size: 14px; }
#higherLower[data-state="lost"] .hl-feedback { border-color: #ea9b8270; background: #31382a; }
#higherLower[data-state="lost"] .hl-candidate { border-color: #edab8f; }
#higherLower[data-state="correct"] .hl-candidate { border-color: #a7e0ad; }
.hl-explanation { border-top: 1px solid #c6a15d35; color: #c6d2bb; font-size: 12px; }
.hl-explanation summary { cursor: pointer; padding: 13px 0; min-height: 44px; color: #e8c580; }
#hlFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 0 15px; }
#hlFacts h3 { color: #fff0d1; font-size: 14px; }
#hlFacts a { display: block; width: fit-content; margin-top: 8px; padding: 5px 0; overflow-wrap: anywhere; }
.hl-assumptions { color: #aebfa7; }
.hl-status, .hl-footnote { font-size: 10px; text-align: center; color: #afc1ab; margin: 0; }
.hl-footnote { margin-top: -10px; }
#higherLower[data-state="correct"] .hl-score strong { animation: hl-pop 280ms ease-out; }
@keyframes hl-pop { 45% { transform: scale(1.22); } }
html.calm #higherLower *, html.lowpower #higherLower * { animation: none; transition: none; }
@media (min-width: 701px) and (max-height: 850px) {
  #higherLower { gap: 10px; padding-top: 0; }
  .hl-intro .hl-kicker { display: none; }
  .hl-intro h1 { font-size: 44px; }
  .hl-intro > p:last-child { max-width: none; margin-top: 6px; font-size: 12px; }
  .hl-score strong { font-size: 32px; }
  .hl-event { padding: 13px 20px 15px; }
  .hl-art { height: 95px; margin: 3px 0 5px; }
  .hl-art canvas, .hl-art svg { max-height: 95px; }
  .hl-event h2 { font-size: 23px; min-height: 2.45em; margin-bottom: 10px; }
  .hl-odds strong { font-size: 36px; }
  .hl-decision > p { margin-bottom: 8px; }
  .hl-choices button { min-height: 50px; padding-block: 9px; }
  .hl-feedback { padding: 13px 20px; }
  .hl-footnote { margin-top: -3px; }
}
@media (max-width: 700px) {
  #home .hl-entry { max-width: 360px; min-height: 58px; padding: 10px 14px; }
  #higherLower { gap: 14px; padding-top: 3px; }
  .hl-topline { font-size: 8px; gap: 8px; }
  .hl-back { font-size: 12px; }
  .hl-best { font-size: 11px; padding: 7px 10px; }
  .hl-intro h1 { font-size: 40px; letter-spacing: -1.5px; }
  .hl-intro > p:last-child { font-size: 11px; max-width: 35ch; margin-top: 8px; }
  .hl-intro .hl-kicker { display: none; }
  .hl-scoreline { font-size: 10px; }
  .hl-score strong { font-size: 32px; }
  .hl-match { gap: 10px; }
  .hl-event { padding: 12px 10px 15px; border-radius: 10px; }
  .hl-card-label { display: block; font-size: 8px; letter-spacing: .08em; text-align: center; }
  .hl-card-label span:last-child { display: none; }
  .hl-art { height: 100px; margin: 5px 0 8px; }
  .hl-art canvas, .hl-art svg { max-height: 100px; }
  .hl-event h2 { font-size: 18px; line-height: 1.2; min-height: 4.8em; margin-bottom: 13px; }
  .hl-odds strong { font-size: 31px; }
  .hl-odds span { font-size: 9px; text-align: center; }
  .hl-versus { width: 26px; height: 26px; font-size: 13px; box-shadow: 0 0 0 3px #082b25; top: 102px; }
  .hl-decision > p { max-width: 30ch; margin: 0 auto 10px; font-size: 11px; }
  .hl-choices { gap: 9px; }
  .hl-choices button { padding: 9px 5px; min-height: 52px; font-size: 13px; }
  .hl-choices span { font-size: 19px; margin-right: 3px; }
  .hl-feedback { flex-direction: column; text-align: center; gap: 12px; padding: 16px; }
  .hl-feedback h2 { font-size: 25px; }
  .hl-feedback button { width: 100%; min-height: 48px; }
  #hlFacts { grid-template-columns: 1fr; gap: 8px; }
  .hl-status, .hl-footnote { font-size: 9px; line-height: 1.5; }
  .hl-footnote { margin-top: -5px; }
}
@media (max-width: 350px) {
  .hl-intro h1 { font-size: 34px; }
  .hl-topline > span:nth-child(2) { font-size: 7px; letter-spacing: .04em; }
  .hl-event { padding-inline: 8px; }
  .hl-event h2 { font-size: 16px; }
  .hl-odds strong { font-size: 28px; }
  .hl-choices button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { #higherLower * { animation: none !important; } }