/* =========================================================
   GOLDEN HAWKINS — a loteria diária (golden.js), no balcão da Melvald's.
   Só existe em Hawkins (.t-h). Prefixo próprio: .gh-
   Um balcão de loteria de cidade pequena em 2003: letreiro preto e dourado,
   volante de papel com tinta vermelha, bilhete impresso e bolas douradas.
   Celular: bloco "GOLDEN HAWKINS" no mobile.css (só dentro das consultas de celular).
   ========================================================= */
.gh {
  --gh-ink: #2a1c12; --gh-muted: #6e5a44; --gh-paper: #fbf3dc; --gh-paper-2: #f3e6c4;
  --gh-red: #b8321c; --gh-red-soft: rgba(184, 50, 28, 0.14); --gh-gold: #e2b23c; --gh-gold-2: #f6d77c;
  --gh-night: #16100a; --gh-wood: #2c1a0e; --gh-green: #1e6b3c;
  --gh-cond: "Barlow Condensed", "Arial Narrow", var(--font-ui);
  margin-top: 30px; color: var(--gh-ink);
}
.gh[hidden] { display: none; }
.gh :focus-visible { outline: 2px solid var(--gh-gold); outline-offset: 2px; }
.gh-counter {
  padding: 0 clamp(12px, 2.2vw, 24px) 22px; border-radius: 3px; background: var(--gh-wood);
  box-shadow: 0 0 0 1px #120b06, inset 0 0 0 4px #3e2716, 0 24px 50px rgba(0, 0, 0, 0.55);
}

/* ---------- letreiro ---------- */
.gh-sign {
  display: flex; flex-direction: column; align-items: center; margin: 0 calc(-1 * clamp(12px, 2.2vw, 24px)) 18px;
  padding: 18px 16px 14px; background: var(--gh-night); border-bottom: 3px solid var(--gh-gold); text-align: center;
}
.gh-kicker, .gh-sub { font: 700 11px var(--font-small); letter-spacing: 0.2em; text-transform: uppercase; color: #cdb88f; }
.gh-name { margin: 6px 0 4px; font: 800 clamp(34px, 5.4vw, 54px)/1 var(--gh-cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gh-gold-2); text-shadow: 0 2px 0 #7a5a12; }
.gh-name span { color: #fff6dc; }

/* ---------- volante + mesa ---------- */
.gh-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gh-slip {
  padding: 14px 16px 16px; background: var(--gh-paper); border-top: 6px solid var(--gh-red);
  box-shadow: 0 2px 0 #c9b88c, 0 10px 22px rgba(0, 0, 0, 0.35);
}
.gh-slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gh-slip-head h3 { margin: 0; font: 800 20px var(--gh-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gh-red); }
.gh-count { font: 700 13px var(--font-type); color: var(--gh-muted); }
.gh-nums { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.gh-nums[hidden], .gh-slip-tools[hidden], .gh-ticket[hidden] { display: none; }
.gh-n {
  min-width: 0; height: 36px; padding: 0; border: 1.5px solid var(--gh-red); border-radius: 2px; background: transparent;
  font: 700 14px var(--font-type); color: var(--gh-red); cursor: pointer; transition: background 0.12s, color 0.12s;
}
.gh-n:hover { background: var(--gh-red-soft); }
.gh-n[aria-pressed="true"] { background: var(--gh-ink); border-color: var(--gh-ink); color: var(--gh-paper); }
.gh-nums.gh-full .gh-n[aria-pressed="false"] { opacity: 0.5; }
.gh-slip-tools { display: flex; gap: 8px; margin-top: 12px; }
.gh-tool {
  min-height: 34px; padding: 6px 14px; border: 1.5px solid var(--gh-ink); border-radius: 2px; background: transparent;
  font: 700 13px var(--font-ui); color: var(--gh-ink); cursor: pointer;
}
.gh-tool:hover { background: rgba(42, 28, 18, 0.08); }
.gh-tool:disabled { opacity: 0.5; cursor: default; }

/* bilhete comprado: papel de impressora térmica */
.gh-ticket { padding: 14px 12px; background: #fffef8; border: 1px dashed #b9a47a; text-align: center; }
.gh-ticket-top { margin: 0 0 10px; font: 700 13px var(--font-type); text-transform: uppercase; letter-spacing: 0.08em; }
.gh-ticket-foot { margin: 10px 0 0; font: 13px var(--font-type); color: var(--gh-muted); }

/* bolas */
.gh-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gh-ball {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4 0 12%, var(--gh-gold) 55%, #9c7316 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.3);
  font: 800 17px var(--gh-cond); color: #2a1a04;
}
.gh-big .gh-ball { width: 52px; height: 52px; font-size: 22px; }
.gh-roll .gh-ball { animation: ghDrop 0.5s cubic-bezier(0.3, 1.4, 0.6, 1) both; animation-delay: calc(var(--i) * 0.55s); }
@keyframes ghDrop { from { opacity: 0; transform: translateY(-26px) rotate(-120deg); } to { opacity: 1; transform: none; } }

/* mesa: relógio, valores e compra */
.gh-desk { padding: 16px; background: var(--gh-night); color: #f1e6cc; border: 1px solid #4a3418; }
.gh-desk-title { margin: 0; font: 700 12px var(--font-small); letter-spacing: 0.2em; text-transform: uppercase; color: #cdb88f; }
.gh-when { margin: 4px 0 0; font: 700 15px var(--font-ui); }
.gh-clock { margin: 6px 0 12px; font: 400 46px/1 var(--font-crt); letter-spacing: 0.06em; color: var(--gh-gold-2); }
.gh-clock.gh-live { animation: ghBlink 1s steps(1, end) infinite; }
@keyframes ghBlink { 50% { opacity: 0.35; } }
.gh-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0 0 14px; }
.gh-facts div { min-width: 0; border-top: 1px solid #4a3418; padding-top: 6px; }
.gh-facts dt { font: 700 10px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; color: #a8936c; }
.gh-facts dd { margin: 2px 0 0; font: 700 18px var(--gh-cond); color: #fff6dc; overflow-wrap: anywhere; }
.gh-facts div:first-child dd { color: var(--gh-gold-2); font-size: 24px; }
.gh-buy {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 2px; background: var(--gh-gold);
  font: 800 17px var(--gh-cond); letter-spacing: 0.06em; text-transform: uppercase; color: #22170a; cursor: pointer;
  box-shadow: 0 3px 0 #8e6a14;
}
.gh-buy:hover:not(:disabled) { background: var(--gh-gold-2); }
.gh-buy:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8e6a14; }
.gh-buy:disabled { background: #4a3a22; color: #b9a684; box-shadow: none; cursor: default; }
.gh-msg { min-height: 1.4em; margin: 10px 0 0; font: 13px/1.5 var(--font-type); color: #e8dcc0; }
.gh-msg.gh-ok { color: #9fe0b0; }
.gh-msg.gh-bad { color: #ffab9c; }
.gh-msg.gh-meh { color: var(--gh-gold-2); }

/* painel do dono (Dono do fliperama ou admin) */
.gh-owner { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #6b5229; }
.gh-owner[hidden] { display: none; }
.gh-owner h4 { margin: 0 0 8px; font: 700 14px var(--font-ui); color: var(--gh-gold-2); }
.gh-owner h4 small { display: block; font: 400 11px var(--font-small); color: #a8936c; }
.gh-owner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gh-owner label { display: flex; flex-direction: column; gap: 4px; font: 700 11px var(--font-small); color: #cdb88f; }
.gh-owner input { min-width: 0; padding: 7px 8px; border: 1px solid #6b5229; border-radius: 2px; background: #241a0f; color: #fff6dc; font: 700 15px var(--font-type); }
.gh-owner .gh-tool { margin-top: 10px; border-color: var(--gh-gold); color: var(--gh-gold-2); }
.gh-owner .gh-tool:hover { background: rgba(226, 178, 60, 0.12); }
.gh-owner-hint { margin: 8px 0 0; font: 12px/1.5 var(--font-small); color: #a8936c; }

/* ---------- último sorteio e histórico ---------- */
.gh-result, .gh-board { margin-top: 18px; padding: 14px 16px; background: var(--gh-paper); box-shadow: 0 2px 0 #c9b88c; }
.gh-result h3, .gh-board h3 { margin: 0 0 10px; font: 800 18px var(--gh-cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gh-red); }
.gh-result { text-align: center; }
.gh-date { margin: 0 0 10px; font: 700 13px var(--font-type); color: var(--gh-muted); }
.gh-winner, .gh-win, .gh-mine { margin: 12px 0 0; font: 15px/1.5 var(--font-ui); overflow-wrap: anywhere; }
.gh-winner small { color: var(--gh-muted); }
.gh-win { padding: 8px 10px; background: var(--gh-ink); color: var(--gh-gold-2); }
.gh-mine { font: 14px var(--font-type); }
.gh-mine .gh-hit { padding: 0 3px; background: var(--gh-gold); font-weight: 700; }
.gh-empty { margin: 0; font: 14px var(--font-type); color: var(--gh-muted); list-style: none; }
.gh-board ol { margin: 0; padding: 0; list-style: none; }
.gh-board ol li:not(.gh-empty) { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #e0d1aa; font: 14px var(--font-type); }
.gh-m-date { color: var(--gh-muted); }
.gh-m-nums { font-weight: 700; color: var(--gh-red); }
.gh-m-who { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.gh-rules { margin: 14px 0 0; padding-left: 18px; font: 13px/1.6 var(--font-small); color: var(--gh-muted); }

@media (max-width: 900px) {
  .gh-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-roll .gh-ball, .gh-clock.gh-live { animation: none; }
}