/* HIGH NOON on the shared engine: a spaghetti-western poster. Sun-bleached paper, burnt orange sky, dark saddle-brown
   ink, wanted-poster cards. Rye (wood type) for the big words, Roboto Slab for reading. Scoped to html[data-game="hn"]
   (the engine's join screen, lobby, TV pages) and .hn (the game's own views, hn-prefixed classes).
   Phones first (portrait, held like a pistol); a TV is read from 3 m. */
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Roboto+Slab:wght@500;700;900&display=swap');

html[data-game="hn"] {
  --sand: #f3dfb4; --sand-2: #e6c98c; --ochre: #e39a35; --rust: #b4471a; --rust-d: #7a2a0c; --ink: #2a150a; --night: #1d0e06; --blood: #a31d12; --sky: #f28c28;
  --west: 'Rye', 'Georgia', serif; --slab: 'Roboto Slab', 'Georgia', serif;
  /* the engine's palette, western */
  --ink-2: #3a1d0e; --ink-3: #4e2914; --paper: #f3dfb4; --paper-2: #e6c98c; --paper-ink: #2a150a;
  --pink: #b4471a; --pink-deep: #7a2a0c; --blue: #3c5a6e; --blue-deep: #263c4a; --yellow: #e39a35; --yellow-deep: #a8691a;
  --orange: #e39a35; --mint: #6f8f4a; --good: #6f8f4a; --bad: #a31d12;
  --display: 'Rye', 'Georgia', serif;
  background: var(--night);
}
html[data-game="hn"] body { background: linear-gradient(rgba(29, 14, 6, .55), rgba(29, 14, 6, .85)), url('/hn/art/street.webp') center top / cover no-repeat fixed, var(--night); }
html[data-game="hn"] body.screen-mode { background: linear-gradient(rgba(29, 14, 6, .35), rgba(29, 14, 6, .75)), url('/hn/art/street.webp') center / cover no-repeat, var(--night); }
html[data-game="hn"] .studio { background: transparent; }
html[data-game="hn"] .h1, html[data-game="hn"] .h2, html[data-game="hn"] .h3, html[data-game="hn"] .display { font-family: var(--west); font-weight: 400; letter-spacing: .01em; text-transform: none; }
html[data-game="hn"] .btn { font-family: var(--slab); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
html[data-game="hn"] .hn-homelogo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
html[data-game="hn"] .hn-homelogo img { width: min(56vw, 300px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
html[data-game="hn"] .hn-homelogo.tv img { width: min(26vw, 420px); }
html[data-game="hn"] .hn-lobbycard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
html[data-game="hn"] .hn-lobby-art { width: 110px; height: auto; grid-row: span 2; }
html[data-game="hn"] .hn-lobby-plan { font-weight: 900; margin-top: 4px; }

/* the wordmark */
.hn-logo { display: flex; flex-direction: column; align-items: center; line-height: .86; font-family: 'Rye', serif; transform: rotate(-3deg); }
.hn-logo span { display: block; color: #f3dfb4; text-shadow: 3px 3px 0 #7a2a0c, 6px 6px 0 rgba(0, 0, 0, .45); }
.hn-high { font-size: clamp(48px, 15vw, 86px); }
.hn-noon { font-size: clamp(64px, 20vw, 118px); color: #e39a35 !important; }
.tv .hn-high { font-size: clamp(60px, 7vw, 120px); } .tv .hn-noon { font-size: clamp(80px, 9vw, 160px); }
.hn-logo.small .hn-high { font-size: 40px; } .hn-logo.small .hn-noon { font-size: 54px; }

/* ------------------------------------------------------------- the game's own views */
.hn { --sand: #f3dfb4; --sand-2: #e6c98c; --ochre: #e39a35; --rust: #b4471a; --rust-d: #7a2a0c; --ink: #2a150a; --night: #1d0e06; --blood: #a31d12;
  --west: 'Rye', 'Georgia', serif; --slab: 'Roboto Slab', 'Georgia', serif;
  font: 500 16px/1.35 var(--slab); color: var(--sand); }
.hn button { font: inherit; color: inherit; cursor: pointer; }
.hn button:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.hn h2 { margin: 0; font: 400 28px/1.1 var(--west); text-wrap: balance; }
.hn-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.hn-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hn-revolver { width: min(64vw, 320px); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); animation: hnSpin .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes hnSpin { from { transform: rotate(-200deg) scale(.4); opacity: 0; } }
.hn-tag { font: 400 20px var(--west); background: var(--rust); color: var(--sand); padding: 6px 16px 8px; border: 3px solid var(--sand); transform: rotate(1.5deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); }
.hn-card { width: min(100%, 560px); background: var(--sand); color: var(--ink); border: 4px solid var(--ink); padding: 20px 18px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .45); display: grid; gap: 14px; text-align: center; justify-items: center;
  background-image: radial-gradient(rgba(122, 42, 12, .12) 1px, transparent 1.4px); background-size: 7px 7px; }
.tv .hn-card { width: min(70vw, 980px); }

/* play */
.hn-play { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; }
.hn-play.flash::after { content: ''; position: fixed; inset: 0; background: #fff6dd; animation: hnFlash .5s ease-out both; pointer-events: none; z-index: 9; }
@keyframes hnFlash { from { opacity: .95; } to { opacity: 0; } }
.hn-head { display: grid; gap: 6px; }
.hn-round { font: 400 16px var(--west); color: var(--ochre); text-align: center; letter-spacing: .04em; }
.hn-vs { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; font-size: 17px; flex-wrap: wrap; }
.hn-vs b { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-v { font: 400 16px var(--west); color: var(--ochre); }
.hn-v.big { font-size: 34px; }
.hn-pips { display: inline-flex; gap: 3px; }
.hn-pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sand); }
.hn-pips i.on { background: var(--ochre); border-color: var(--ochre); box-shadow: 0 0 8px rgba(227, 154, 53, .8); }
.hn-timer { height: 6px; background: rgba(243, 223, 180, .15); border-radius: 3px; overflow: hidden; }
.hn-timer i { display: block; height: 100%; background: var(--ochre); transform-origin: left; }
.hn-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.hn-step { display: grid; gap: 10px; justify-items: center; max-width: 420px; }
.hn-stepn { width: 46px; height: 46px; border-radius: 50%; background: var(--rust); border: 3px solid var(--sand); display: grid; place-items: center; font: 400 24px var(--west); }
.hn-big { margin: 0; font: 400 clamp(28px, 8.5vw, 40px)/1.1 var(--west); }
.hn-sub { margin: 0; font-weight: 700; font-size: 16px; opacity: .9; max-width: 34ch; }
.hn-strong { font-weight: 900; opacity: 1; }
.hn-ok { margin: 0; font: 400 24px var(--west); color: var(--ochre); }
.hn-gunimg { width: min(56vw, 260px); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); transform: rotate(-12deg); }
.hn-btn { min-height: 64px; min-width: min(80vw, 320px); padding: 10px 24px; border: 4px solid var(--sand); background: var(--rust); color: var(--sand) !important; font: 400 26px var(--west) !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, .5); }
.hn-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.hn-link { background: none; border: 0; text-decoration: underline; font-weight: 700; opacity: .8; padding: 8px; }
.hn-holster { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 3px dashed rgba(243, 223, 180, .5); font-weight: 900; }
.hn-holster i { width: 18px; height: 18px; border-radius: 50%; background: rgba(243, 223, 180, .25); }
.hn-holster.on { border-style: solid; border-color: var(--ochre); }
.hn-holster.on i { background: #6f8f4a; box-shadow: 0 0 10px #8fbf5a; }

/* wanted cards (bets) */
.hn-cards { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.hn-wanted, .hn-poster { flex: 1; max-width: 220px; display: grid; gap: 4px; justify-items: center; padding: 12px 10px 14px; background: var(--sand); color: var(--ink) !important; border: 4px solid var(--ink); box-shadow: 6px 6px 0 rgba(0, 0, 0, .45);
  background-image: radial-gradient(rgba(122, 42, 12, .14) 1px, transparent 1.4px); background-size: 7px 7px; transform: rotate(-1.5deg); }
.hn-wanted:nth-of-type(2) { transform: rotate(1.5deg); }
.hn-wanted[disabled] { cursor: default; }
.hn-wanted.on { outline: 5px solid var(--ochre); outline-offset: 3px; transform: scale(1.04) rotate(0); }
.hn-w { font: 400 26px var(--west); color: var(--blood); letter-spacing: .06em; }
.hn-wn { font: 400 clamp(20px, 6.6vw, 30px)/1.05 var(--west); overflow-wrap: anywhere; }
.hn-ws, .hn-wb { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.hn-wb { color: var(--rust); }
.tv .hn-wanted { max-width: 380px; padding: 20px; } .tv .hn-w { font-size: 44px; } .tv .hn-wn { font-size: 54px; } .tv .hn-ws, .tv .hn-wb { font-size: 22px; }

/* the wait + DRAW */
.hn-stage.wait { gap: 8px; }
.hn-wait { margin: 0; font: 400 clamp(40px, 13vw, 68px)/1 var(--west); color: var(--sand); animation: hnBreathe 1.6s ease-in-out infinite; }
.hn-wait.draw { color: #fff; font-size: clamp(76px, 26vw, 150px); text-shadow: 5px 5px 0 var(--blood); animation: hnSlam .45s cubic-bezier(.2, 1.7, .4, 1) both; }
.hn-wait.bad { color: var(--blood); text-shadow: 3px 3px 0 #000; }
.tv .hn-wait { font-size: clamp(80px, 9vw, 160px); } .tv .hn-wait.draw { font-size: clamp(140px, 16vw, 280px); }
@keyframes hnBreathe { 50% { opacity: .55; transform: scale(.97); } }
@keyframes hnSlam { from { transform: scale(2.4); opacity: 0; } }
.hn-firezone { position: fixed; inset: 30% 0 0; border: 0; background: rgba(163, 29, 18, .25); color: var(--sand) !important; font: 400 34px var(--west) !important; z-index: 2; }
.hn-firezone:active { background: rgba(163, 29, 18, .55); }

/* results */
.hn-banner { font: 400 clamp(26px, 8vw, 40px)/1.1 var(--west); background: var(--rust); color: var(--sand); padding: 8px 18px 10px; border: 4px solid var(--sand); box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); animation: hnSlam .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.hn-banner.void { background: var(--ink-3, #4e2914); }
.tv .hn-banner { font-size: 64px; }
.hn-shots { display: grid; gap: 8px; width: min(100%, 460px); }
.hn-shot { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(243, 223, 180, .1); border: 2px solid rgba(243, 223, 180, .3); text-align: left; }
.hn-shot b { font: 400 20px var(--west); }
.hn-shot.win { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.hn-shot.win i { font-style: normal; font: 400 16px var(--west); color: #fff; background: var(--blood); padding: 2px 8px; }
.hn-shot.foot { border-color: var(--blood); }
.tv .hn-shots { width: min(70vw, 1100px); } .tv .hn-shot { font-size: 28px; } .tv .hn-shot b { font-size: 40px; }
.hn-poster { max-width: 300px; transform: rotate(-2deg); animation: hnSlam .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.hn-poster.big { max-width: 360px; padding: 18px; } .hn-poster.big .hn-w { font-size: 46px; } .hn-poster.big .hn-wn { font-size: 46px; }
.hn-drink { display: grid; gap: 2px; width: min(100%, 420px); padding: 12px 16px; background: var(--blood); color: #fff; border: 4px solid var(--sand); box-shadow: 6px 6px 0 rgba(0, 0, 0, .45); animation: hnSlam .5s .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.hn-drink b { font: 400 54px/1 var(--west); }
.hn-drink small, .hn-drinklist small { font: 400 18px var(--west); color: var(--ochre); }
.hn-drinklist { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; padding: 8px 18px; background: var(--blood); border: 3px solid var(--sand); font-weight: 900; font-size: 18px; }
.tv .hn-drinklist { font-size: 32px; }
.hn-nextbtn { min-height: 56px; width: min(100%, 420px); border: 4px solid var(--sand); background: var(--ochre); color: var(--ink) !important; font: 400 24px var(--west) !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); }
.hn-nextbtn[disabled] { opacity: .55; }
.hn-lock-s { display: block; font: 900 13px var(--slab); }
.hn-lock-s:empty { display: none; }
.hn-ghost { min-height: 48px; padding: 0 18px; border: 2px solid currentColor; background: none; font-weight: 900; }
.hn-wait-s { margin: 0; font-weight: 900; opacity: .8; }

/* the bracket */
.hn-bracket { display: flex; gap: 10px; justify-content: center; align-items: center; width: 100%; overflow-x: auto; padding: 4px 0; }
.hn-bround { display: grid; gap: 6px; }
.hn-match { display: grid; gap: 1px; min-width: 96px; padding: 4px 8px; border: 2px solid rgba(243, 223, 180, .35); font-weight: 700; font-size: 13px; text-align: left; }
.hn-match.now { border-color: var(--ochre); background: rgba(227, 154, 53, .15); }
.hn-match span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.hn-match .won { color: var(--ochre); font-weight: 900; } .hn-match .out { opacity: .45; text-decoration: line-through; } .hn-match .bye { opacity: .4; font-style: italic; }
.tv .hn-match { min-width: 180px; font-size: 22px; } .tv .hn-match span { max-width: 240px; }

/* awards + final */
.hn-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: min(100%, 680px); }
.hn-award { display: grid; gap: 2px; padding: 12px; background: rgba(243, 223, 180, .12); border: 2px solid rgba(243, 223, 180, .4); animation: hnSlam .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.hn-award b { font: 400 18px var(--west); color: var(--ochre); }
.hn-award span { font-weight: 900; }
.hn-award small { opacity: .8; }
.hn-table { width: 100%; border-collapse: collapse; font-weight: 700; }
.hn-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-align: right; opacity: .7; }
.hn-table td { padding: 5px 4px; border-top: 1px solid rgba(42, 21, 10, .2); text-align: right; }
.hn-table td:first-child, .hn-table th:first-child { text-align: left; }
.hn-table tr.me td { color: var(--rust); font-weight: 900; }
.hn-awardline { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 14px; }
.hn-btns { display: grid; gap: 10px; width: 100%; justify-items: center; }

.hn-play.tv { padding: 3vh 4vw; }
.tv .hn-round { font-size: 30px; } .tv .hn-vs { font-size: 40px; } .tv .hn-pips i { width: 22px; height: 22px; }
.tv .hn-big { font-size: 64px; } .tv .hn-sub { font-size: 26px; max-width: 50ch; }
@media (prefers-reduced-motion: reduce) { .hn * { animation: none !important; } }