/* Higher / Lower never got the pass the other games have had: it still runs on
   the neutral --osrs-ui-border grey against a near-black field, so it shares no
   palette with ScribbleScape, Model Match, the homepage or Connections. This
   overlay brings it onto the same warm card/raised/chip ladder. Loaded after
   styles.css so the shared sheet stays untouched (editing it would force a ?v=
   bump on every page). Scoped to .hl-body.

   No feature-image backdrop; the illustrated wordmark leads the game screen.

   This pass covers the shared foundations and the solo game screen. */
.hl-body {
  --hl-card: #35291f;
  --hl-raised: #2a231b;
  --hl-chip: #2e2720;
  --hl-well: #211b16;
  --hl-secondary: #4a3825;
  --hl-border: #b18a4f;
  --hl-inner: #5b4730;
  --hl-hair: #4a3a28;
  --hl-ink: #ffe9bf;
  --hl-muted: #c5ad8b;
  --hl-title: #f3d49b;
  --hl-value: #ffe1a3;
  --hl-gold: #f0c56d;
  --hl-green: #365f2b;
  --hl-green-edge: #80a552;
  --hl-focus: #e8bd70;
}

/* --- The ground ----------------------------------------------------------- */
/* stone.jpg is 256px, so across a 1920 viewport it repeats ~7 times and reads as
   wallpaper. This is large soft mottling with no recognisable features instead,
   blended soft-light so it behaves as material on the base rather than sitting
   on top of it as a picture. The ground also goes properly dark: the panel above
   it is the warm surface, and the two were previously the same brown. */
.hl-body {
  background-color: #14110d;
  background-image:
    radial-gradient(ellipse 85% 65% at 50% 26%, rgba(104, 80, 50, 0.28), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* The grain rides as its own fixed layer rather than a blended background image:
   soft-light and overlay both scale with the backdrop's luminance, so over a
   near-black ground they did nothing at all. Screening a faint light copy is
   what actually puts material on a dark surface. */
.hl-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/textures/grain-soft.png') repeat;
  background-size: 620px 620px;
  mix-blend-mode: screen;
  opacity: .10;
}

/* --- Foundations ---------------------------------------------------------- */
.hl-body .hl-header { padding-top: 0; }
.hl-body .hl-title {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  filter: none;
}
.hl-body .hl-title::before,
.hl-body .hl-title::after { content: none; }
/* Trim the image's transparent top/bottom margins in its display box. */
.hl-body .hl-title-logo {
  image-rendering: auto;
  display: block;
  width: min(460px, 80vw);
  height: auto;
  aspect-ratio: 460 / 132;
  object-fit: cover;
}
/* Feedback shares the toolbar instead of reserving a row below the logo. */
.hl-body .hl-game-wrap { margin-top: -8px; }
.hl-body .hl-main-menu-above-panel { position: relative; }
.hl-body .hl-status {
  position: absolute;
  top: 8px;
  left: 110px;
  right: 290px;
  min-height: 0;
  margin: 0;
  pointer-events: none;
  font-size: .95rem;
}
@media (max-width: 700px) {
  .hl-body .hl-status { left: 115px; right: 0; }
}
@media (max-width: 720px) {
  .hl-body .hl-header { display: block; padding-top: 0; }
  .hl-body .hl-title-logo { width: min(240px, 70vw); }
}

.hl-body .btn {
  min-height: 40px;
  color: var(--hl-ink);
  background: var(--hl-secondary);
  border: 1px solid var(--hl-border);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
}
.hl-body .btn:hover { background: #5a432a; border-color: #edbd68; }
.hl-body .btn-primary {
  color: #fff0cd;
  background: var(--hl-green);
  border-color: var(--hl-green-edge);
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #19140f;
}
.hl-body .btn-primary:hover { background: #447737; border-color: #9dc26a; }
.hl-body :is(button, a, input, select):focus-visible {
  outline: 2px solid var(--hl-focus); outline-offset: 2px;
}

/* --- Game panel ----------------------------------------------------------- */
/* Welcome screen shares the game's wordmark, warm frame and recessed details. */
.hl-body #hl-entry-screen .hl-entry-dialog {
  width: min(500px, 100%);
  padding: 28px;
  background: radial-gradient(ellipse at 50% 0, #4a3825, transparent 65%), var(--hl-card);
  border: 1px solid var(--hl-border);
  border-radius: 12px 8px 12px 8px;
  box-shadow: inset 0 0 0 3px var(--hl-well), 0 20px 60px #0008;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
}
.hl-body #hl-entry-screen .hl-entry-title { margin: 0 0 12px; }
.hl-body .hl-entry-logo {
  image-rendering: auto;
  display: block;
  width: min(380px, 100%);
  height: auto;
  aspect-ratio: 460 / 132;
  object-fit: cover;
  margin: 0 auto;
}
.hl-body #hl-entry-screen .hl-entry-sub {
  color: var(--hl-muted);
  font-family: 'RuneScape', Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0 0 24px;
}
.hl-body #hl-entry-screen .hl-entry-actions { gap: 12px; }
.hl-body #hl-entry-screen .hl-entry-btn {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 16px;
  margin: 0;
  text-align: left;
  border-radius: 6px;
}
.hl-body #hl-entry-screen .hl-entry-btn-solo { background: #304b26; border-color: var(--hl-green-edge); }
.hl-body #hl-entry-screen .hl-entry-btn-solo:hover { background: #3d6030; border-color: #b4ce83; }
.hl-body #hl-entry-screen .hl-entry-btn-duel { background: var(--hl-raised); border-color: var(--hl-inner); }
.hl-body #hl-entry-screen .hl-entry-btn-duel:hover { background: var(--hl-secondary); border-color: var(--hl-border); }
.hl-body .hl-entry-mode-icon { display: grid; place-items: center; width: 42px; height: 44px; background: #0002; border-radius: 5px; box-shadow: inset 0 1px 3px #0004; }
.hl-body .hl-entry-mode-icon img { image-rendering: pixelated; object-fit: contain; }
.hl-body .hl-entry-mode-copy { display: grid; gap: 5px; }
.hl-body .hl-entry-mode-copy strong { font-family: 'RuneScape Bold', Arial, sans-serif; font-size: 1.3rem; color: var(--hl-ink); line-height: 1.15; }
.hl-body .hl-entry-mode-copy > span { font-family: 'RuneScape Small', Arial, sans-serif; font-size: 1rem; font-weight: normal; color: var(--hl-muted); line-height: 1.25; }
.hl-body .hl-entry-btn-solo .hl-entry-mode-copy > span { color: #d0d9bd; }
.hl-body .hl-entry-mode-badge { display: inline-block; vertical-align: middle; margin-left: 5px; padding: 2px 5px; border: 1px solid var(--hl-inner); border-radius: 3px; font-size: .8rem; color: var(--hl-muted); }
.hl-body .hl-entry-arrow { font-family: Arial, sans-serif; font-size: 1.6rem; color: var(--hl-muted); }
@media (max-width: 480px) {
  .hl-body #hl-entry-screen .hl-entry-dialog { padding: 22px 18px; }
  .hl-body #hl-entry-screen .hl-entry-btn { padding: 12px; gap: 10px; grid-template-columns: 36px minmax(0, 1fr) 10px; }
  .hl-body .hl-entry-mode-icon { width: 36px; height: 40px; }
  .hl-body .hl-entry-mode-copy strong { font-size: 1.18rem; }
}

.hl-body .hl-panel {
  padding: 18px;
  background: var(--hl-card);
  border: 1px solid var(--hl-border);
  border-radius: 12px 8px 12px 8px;
  box-shadow: inset 0 0 0 3px #211b16, 0 14px 40px #0006;
}

/* The toggle used to float half off the panel's top-right corner while the
   menu button sat above the panel on the left — two clusters, different rows,
   nothing lining up with anything. They share one control bar now, spanning the
   panel's width. (No display here: the JS shows and hides this with [hidden].) */
.hl-body .hl-main-menu-above-panel {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hl-body .hl-mode-toggle-floating { position: static; }
.hl-body .hl-mode-toggle {
  gap: 3px;
  padding: 3px;
  background: #211b16;
  border: 1px solid var(--hl-inner);
  border-radius: 7px;
  box-shadow: inset 0 2px 4px #0004;
}
.hl-body .hl-mode-toggle-btn {
  min-height: 34px;
  padding: 6px 12px;
  color: var(--hl-muted);
  border-radius: 4px;
  box-shadow: none;
}
.hl-body .hl-mode-toggle-btn:not(.active):hover { color: var(--hl-ink); background: #3b3025; }
.hl-body .hl-mode-toggle-btn.active {
  color: var(--hl-ink);
  background: var(--hl-secondary);
  box-shadow: inset 0 1px 0 #ffffff10, 0 2px 0 #16110d;
}

/* --- Streak header and footer stats --------------------------------------- */
.hl-body .hl-streak-bar-top { color: var(--hl-title); }
.hl-body .hl-streak-bar-top .hl-current-streak strong { color: var(--hl-value); }
.hl-body .hl-streak-bar-top .hl-personal-best { color: var(--hl-muted); opacity: 1; }
.hl-body .hl-streak-bar { color: var(--hl-muted); }
.hl-body .hl-streak-bar .hl-weekly-best { color: var(--hl-muted); opacity: 1; }
.hl-body .hl-streak-bar .hl-global-best { color: #a8916e; opacity: 1; }

/* --- Item cards ----------------------------------------------------------- */
/* Raising these made a third brown stacked on the panel's brown. They are
   openings in the panel, so they recess instead: a dark well with the item lit
   inside it. Ground / panel / well now step dark → warm → dark. */
.hl-body .hl-card {
  background: radial-gradient(ellipse 70% 55% at 50% 38%, #2a2219, var(--hl-well) 78%);
  border: 1px solid #17120d;
  border-radius: 8px 6px 8px 6px;
  box-shadow: inset 0 2px 8px #000000a6, inset 0 0 0 1px #ffffff0a, 0 1px 0 #ffffff0d;
}
.hl-body .hl-name { color: var(--hl-title); }
.hl-body .hl-price { color: var(--hl-value); text-shadow: 0 2px 4px #0008; }
.hl-body .hl-icon-area {
  border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, #ffffff0a, transparent 70%);
}
.hl-body .hl-vs {
  color: var(--hl-title);
  background: linear-gradient(#54402a, var(--hl-secondary));
  border: 1px solid var(--hl-border);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 0 #19140f, 0 0 14px #0007;
}
/* Result feedback remains readable when it appears. */
.hl-body .hl-status-line {
  margin-top: 14px;
  max-width: none;
  color: var(--hl-muted);
  font-size: 1.02rem;
  line-height: 1.35;
}
.hl-body .hl-status-line strong { color: var(--hl-value); }

/* These are opposite choices, so identical green made them a visual coin flip.
   The entry screen's ▲/▼ motif already sets green-up and red-down; the buttons
   follow it. */
.hl-body .hl-guess-btn { min-height: 54px; font-size: 1.05rem; }
.hl-body #hl-lower {
  color: #ffdccf;
  background: #7a3323;
  border-color: #c8613f;
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #19140f;
}
.hl-body #hl-lower:hover { background: #8f3d2a; border-color: #dd7551; }

/* The flash used pure #00FF00 / #FF0000, the harshest colours on the page. */
@keyframes hlFlashGreen {
  0% { box-shadow: 0 0 0 0 rgba(128, 165, 82, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(128, 165, 82, 0); }
}
@keyframes hlFlashRed {
  0% { box-shadow: 0 0 0 0 rgba(200, 97, 63, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(200, 97, 63, 0); }
}

/* --- Chrome around the panel ---------------------------------------------- */
.hl-body .hl-main-menu-btn { min-height: 34px; color: var(--hl-muted); }
.hl-body .hl-main-menu-btn:hover { color: var(--hl-ink); }
.hl-body .rsn-footer { color: var(--hl-muted); }
.hl-body .rsn-footer a.btn-small { color: var(--hl-ink); }
.hl-body .connections-discord-link { color: #c9d2ff; }

/* Solo results: score first, a visual recap, then the next action. */
.hl-body #hl-gameover { background: #100c09c9; backdrop-filter: blur(3px); }
.hl-body #hl-gameover .hl-modal {
  width: min(480px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  gap: 12px;
  background: var(--hl-card);
  border: 1px solid var(--hl-border);
  border-radius: 12px 8px 12px 8px;
  box-shadow: inset 0 0 0 3px var(--hl-well), 0 20px 70px #0009;
}
/* Losing should land. The title takes the game's brightest established red
   (the Lower button's hover edge) and a size step up, still under the 4rem
   streak value so the score stays the biggest thing in the modal. */
.hl-body #hl-gameover .hl-modal-title { font-size: 2.3rem; color: #dd7551; text-shadow: 0 2px 0 #0007; }
.hl-body #hl-gameover .hl-modal-subtitle { color: var(--hl-muted); font-size: 1.05rem; margin-top: -6px; }
.hl-body #hl-gameover .hl-subtitle-green { color: #b6d78e; }
.hl-body #hl-gameover .hl-modal-scores { padding: 4px 0 8px; }
.hl-body #hl-gameover .hl-modal-streak-label { color: var(--hl-muted); font-size: .9rem; letter-spacing: 1.5px; }
.hl-body #hl-gameover .hl-modal-streak-value { color: var(--hl-value); font-size: 4rem; line-height: 1.05; text-shadow: 0 3px 0 #0006; margin: 4px 0 8px; }
.hl-body #hl-gameover .hl-modal-best-pill { color: var(--hl-muted); border-color: var(--hl-inner); background: var(--hl-well); padding: 5px 12px; opacity: 1; }
.hl-body #hl-gameover .hl-modal-best-pill.pb-new { border-color: var(--hl-green-edge); color: #b6d78e; }
.hl-body #hl-gameover .pb-new strong { color: #b6d78e; }
.hl-body #hl-gameover .hl-modal-recap { padding: 14px; gap: 14px; background: var(--hl-well); border-color: var(--hl-inner); color: var(--hl-ink); }
.hl-body #hl-gameover .hl-recap-items { align-items: stretch; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.hl-body #hl-gameover .hl-recap-item { grid-template-rows: 56px 1fr auto; gap: 8px; min-width: 0; }
.hl-body .hl-recap-icon { object-fit: contain; image-rendering: pixelated; }
.hl-body #hl-gameover .hl-recap-name { font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.hl-body #hl-gameover .hl-recap-price { font-size: 1.1rem; color: var(--hl-value); opacity: 1; }
.hl-body #hl-gameover .hl-recap-vs { align-self: center; color: var(--hl-muted); font-size: .85rem; }
.hl-body #hl-gameover .hl-recap-guess { border-top: 1px solid var(--hl-hair); padding-top: 12px; }
.hl-body #hl-gameover .hl-recap-guess-line { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; color: var(--hl-muted); font-size: 1rem; }
.hl-body .hl-recap-choice { display: grid; gap: 4px; }
.hl-body .hl-recap-choice strong { font-family: 'RuneScape Bold', Arial, sans-serif; font-size: 1.05rem; }
.hl-body #hl-recap-guess { color: #e7a18b; }
.hl-body #hl-recap-answer { color: var(--hl-value); }
.hl-body #hl-gameover .hl-modal-actions { gap: 10px; margin-top: 2px; }
.hl-body #hl-gameover #hl-retry { min-height: 50px; font-size: 1.15rem; }
.hl-body #hl-gameover #hl-share { background: transparent; border-color: var(--hl-inner); color: var(--hl-muted); box-shadow: none; opacity: 1; }
.hl-body #hl-gameover #hl-share:hover { background: var(--hl-secondary); color: var(--hl-ink); }
@media (max-width: 480px) {
  .hl-body #hl-gameover .hl-modal { padding: 18px; gap: 10px; }
  .hl-body #hl-gameover .hl-modal-recap { padding: 12px; }
  .hl-body #hl-gameover .hl-modal-streak-value { font-size: 3.2rem; }
}

/* Match the account row to the game rather than Connections' board width. */
.hl-body #hlRsnBar { width: 100%; max-width: none; }
.hl-body .hl-rsn-right { justify-content: flex-end; flex-wrap: wrap; }
.hl-body .hl-disclaimer-inline:empty { display: none; }

/* The question occupies the hidden value's place, directly above the choices. */
.hl-body .hl-question {
  margin: 0;
  max-width: 320px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hl-ink);
  font-family: 'RuneScape Small', Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.3;
  text-wrap: pretty;
}
.hl-body .hl-question[hidden],
.hl-body #hl-card-b .hl-price-area:has(.hl-hidden),
.hl-body #hl-card-b .hl-status-line:empty { display: none; }

/* Keep controls and feedback in flow so empty feedback leaves no bottom gap
   and long results can grow the cards instead of overlapping the controls. */
.hl-body #hl-card-b .hl-guess-actions {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  margin: 16px 0 0;
}
.hl-body #hl-card-b .hl-status-line {
  position: static;
  min-height: 0;
  max-height: none;
  margin: 12px 0 0;
  white-space: normal;
  overflow: visible;
}
@media (min-width: 721px) {
  .hl-body .hl-card { height: auto; max-height: none; padding: 20px; }
  .hl-body #hl-card-a .hl-card-inner,
  .hl-body #hl-card-b .hl-card-inner {
    height: auto;
    justify-content: flex-start;
    padding: 24px 0 0;
    gap: 6px;
  }
  .hl-body #hl-card-a .hl-price-area,
  .hl-body #hl-card-b .hl-price-area { min-height: 60px; align-items: center; }
  .hl-body #hl-card-b .hl-guess-btn { min-height: 54px; }
}

@media (max-width: 700px) {
  .hl-body .hl-panel { padding: 12px; }
  /* Docking the toggle inside the panel works where there is room beside the
     streak header; on a narrow screen it is panel-wide and lands on top of it,
     so it goes back into the flow above the streak instead. */
  .hl-body .hl-main-menu-above-panel { flex-wrap: wrap; }
  .hl-body .hl-mode-toggle-floating { flex: 1 0 100%; }
  .hl-body .hl-mode-toggle { width: 100%; justify-content: center; }
  .hl-body .hl-mode-toggle-btn { flex: 1; padding: 6px 4px; font-size: .88rem; }
}

/* Sound control (sfx.js): in the toolbar, just left of the mode toggle (or at
   the right edge in a duel, where the toggle is hidden). The absolutely placed
   status line gives up the room it needs. On a phone the slider hides and the
   toggle wraps to its own line, so the button shares the first line with the
   menu button. */
.hl-body .hl-sfx-control { margin-left: auto; }
.hl-body .hl-status { right: 395px; }
@media (max-width: 700px) {
  .hl-body .hl-status { right: 52px; }
}