/* BeerMat's colours and type (brand/README.md). */
@font-face { font-family: Fredoka; src: url(/brand/fredoka.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
:root { --bg: #140b2e; --card: #221447; --line: rgba(255, 243, 214, .14); --text: #fff8ec; --muted: #c8b9e4; --gold: #ffb21a; --pink: #ff3d81; --teal: #1fd6c6; --good: #34d399; --bad: #f87171; color-scheme: dark; }
h1, h2, h3, h4 { font-family: Fredoka, system-ui, sans-serif; }
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(4.5rem + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
.bar { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.bar h1 { margin: 0; font-size: 1.3rem; color: var(--gold); line-height: 0; }
.bar .logo { width: min(64vw, 300px); height: auto; }
main { padding: 0 1rem; max-width: 40rem; margin: 0 auto; }
h2 { font-size: 1.4rem; margin: 1rem 0 .25rem; } h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.hint { color: var(--muted); margin: .25rem 0 .75rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin: .75rem 0; }
label { display: grid; gap: .3rem; margin: .5rem 0; font-weight: 600; }
input { font: inherit; padding: .75rem; border-radius: 10px; border: 1px solid var(--line); background: #0b1324; color: var(--text); width: 100%; min-height: 3rem; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button { font: inherit; font-weight: 700; border: 0; border-radius: 10px; padding: .7rem 1rem; min-height: 3rem; background: #2b3a63; color: var(--text); margin: .25rem .25rem .25rem 0; cursor: pointer; }
button.big { width: 100%; background: var(--gold); color: #1b1f3b; font-size: 1.1rem; margin-top: .5rem; }
button.subtle { background: transparent; border: 1px solid var(--line); }
button.danger { background: #5b1d26; }
button:disabled { opacity: .5; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; } .check input { width: auto; min-height: auto; margin-top: .3rem; }
.status { margin: .5rem 1rem; min-height: 1.5rem; } .status.error, .warning { color: #fbbf24; }
.pill { background: #5b1d26; padding: .2rem .6rem; border-radius: 99px; font-size: .85rem; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.list li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; }
.list li button { margin-top: .5rem; }
.events .when { color: var(--gold); font-weight: 700; } .events .where { color: var(--muted); }
.events a { color: var(--gold); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; text-align: center; }
.stats strong { display: block; font-size: 1.6rem; color: var(--gold); }
.badges { list-style: none; padding: 0; display: grid; gap: .5rem; }
.badges li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; }
.badges li.locked { opacity: .45; }
.me { display: flex; gap: 1rem; align-items: center; } .avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: #0a0f1c; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { margin: 0; border-radius: 0; background: transparent; color: var(--muted); min-height: 3.75rem; }
.tabs button[aria-selected="true"] { color: var(--gold); box-shadow: inset 0 3px 0 var(--gold); }
details summary { cursor: pointer; font-weight: 700; min-height: 2rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* The venue map and a venue's page. */
.map { height: min(55vh, 420px); border-radius: 14px; border: 1px solid var(--line); margin: .5rem 0; z-index: 0; }
.leaflet-container { background: #1b2233; font: inherit; }
.leaflet-tooltip { font-weight: 700; }
.venue { position: relative; }
.venue .close { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.venue h3 { margin: 0 2.5rem .25rem 0; }
.venue a { color: var(--gold); }
.venue .where { color: var(--muted); margin-top: 0; }
.leaflet-interactive:focus:not(:focus-visible) { outline: none; }
/* Quiz day filter. */
.days { display: flex; gap: .35rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: none; }
.days button { flex: none; margin: 0; padding: .45rem .8rem; border-radius: 999px; font-size: .95rem; background: var(--card); border: 1px solid var(--line); color: inherit; }
.days button.today { border-color: var(--gold); }
.days button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1a1205; font-weight: 800; }
/* Map pins. */
.pin { color: #6f7fa8; }
.pin.quiz { color: #f5a300; }
.pin svg { width: 34px; height: 44px; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; transition: transform .15s; }
.pin.chosen svg { transform: scale(1.25); }
.pin.chosen { z-index: 1000 !important; }
.pin-body { fill: currentColor; stroke: #fff; stroke-width: 2.5; }
.pin-face { fill: #fff; }
.pin-mark { fill: #1a1430; font: 900 14px system-ui, sans-serif; }
.venue .nights { color: var(--gold); font-weight: 700; }