:root { --ink: #f6f3ec; --dim: rgba(246, 243, 236, 0.66); --panel: rgba(16, 19, 26, 0.78); --line: rgba(246, 243, 236, 0.16);
  --accent: #9fb2ff; --warn: #ff6b52; --good: #8fe0a4; --gold: #f2c75c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2230; color: var(--ink); font-family: 'Work Sans', system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10, 12, 18, 0.38) 100%); }
.hidden { display: none !important; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #1b2230; color: var(--dim); font-size: 17px; z-index: 40; transition: opacity 0.9s; }
#loading.gone { opacity: 0; pointer-events: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.top { position: absolute; left: 0; right: 0; top: 0; padding: max(12px, env(safe-area-inset-top)) 14px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who b { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }
.who span { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
#h-timer { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; padding-top: 6px; }
#h-timer.low { color: var(--warn); }
.btns { justify-self: end; display: flex; gap: 8px; }
.btns button { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(16, 19, 26, 0.35); color: var(--ink); font: 600 18px 'Work Sans', sans-serif; cursor: pointer; backdrop-filter: blur(6px); }
#mute.off { color: rgba(246, 243, 236, 0.3); text-decoration: line-through; }
#h-crows { display: flex; flex-wrap: wrap; gap: 2px; max-width: 34vw; font-size: 14px; line-height: 1; margin-top: 6px; }
#h-crows span.lost { opacity: 0.35; filter: grayscale(1); }
#h-count { display: none; font-size: 15px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* the hawk's patience: the one number that says how you're doing */
#h-pat { position: absolute; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 40px); transform: translateX(-50%); width: min(340px, 64vw); padding: 8px 12px 7px; border-radius: 14px;
  background: rgba(16, 19, 26, 0.5); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#h-pat .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
#h-trend { letter-spacing: 0.02em; text-transform: none; font-size: 13px; color: var(--dim); transition: color 0.3s; }
#h-trend.good { color: var(--good); } #h-trend.great { color: var(--good); font-weight: 700; } #h-trend.bad { color: var(--warn); }
#h-pat i { display: block; position: relative; height: 14px; margin: 6px 0 6px; border-radius: 7px; background: rgba(246, 243, 236, 0.16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
#h-pat i b { display: block; height: 100%; width: 100%; border-radius: 7px; background: linear-gradient(90deg, #ff6b52, #f2c75c 45%); transition: width 0.18s linear, filter 0.2s; }
#h-pat.hit i b { filter: brightness(1.8); }
#h-pat.low i b { animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(1.5); } }
#h-pat .sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); white-space: nowrap; }
#h-pat .pips { display: flex; gap: 4px; }
#h-pat .pips em { font-style: normal; font-size: 13px; line-height: 1; transition: opacity 0.3s, transform 0.3s; }
#h-pat .pips em.gone { opacity: 0.2; filter: grayscale(1); transform: scale(0.8); }
#h-nest { position: absolute; right: 14px; top: calc(max(12px, env(safe-area-inset-top)) + 54px); display: flex; align-items: center; gap: 6px; font-size: 20px; transition: transform 0.3s; }
#h-nest i { display: block; width: 44px; height: 6px; border-radius: 3px; background: rgba(246, 243, 236, 0.22); overflow: hidden; }
#h-nest i b { display: block; height: 100%; width: 0; background: var(--warn); }
#h-nest.danger { animation: throb 0.8s ease-in-out infinite; }
@keyframes throb { 50% { transform: scale(1.12); } }

/* caw and dive: buttons that say whether now is the moment */
#acts { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; }
.act { pointer-events: auto; position: relative; overflow: hidden; width: 156px; min-height: 54px; padding: 7px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(16, 19, 26, 0.55); color: var(--ink);
  font: 600 16px 'Work Sans', sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.1s; touch-action: manipulation; }
.act:active { transform: scale(0.96); }
.act .k small { font-weight: 500; font-size: 11px; color: var(--dim); margin-left: 2px; }
.act .s { font-size: 12.5px; font-weight: 500; color: var(--dim); white-space: nowrap; }
.act u { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--dim); }
.act.good { border-color: var(--good); background: rgba(40, 90, 55, 0.6); box-shadow: 0 0 18px rgba(143, 224, 164, 0.45); }
.act.good .s { color: var(--good); font-weight: 700; }
.act.good.pulse { animation: glow 0.9s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 30px rgba(143, 224, 164, 0.8); } }
.act.bad { border-color: rgba(255, 107, 82, 0.8); }
.act.bad .s { color: var(--warn); font-weight: 600; }
.act.meh .s { color: var(--gold); }
.act.cool { opacity: 0.55; }
@media (max-width: 480px) {
  .who b { font-size: 16px; } .who span, #h-crows { display: none; } #h-count { display: block; }
  #h-timer { font-size: 22px; padding-top: 10px; }
  #h-pat { width: calc(100vw - 28px); top: calc(max(12px, env(safe-area-inset-top)) + 50px); }
  #h-nest { top: calc(max(12px, env(safe-area-inset-top)) + 128px); }
  .act { width: calc(50vw - 20px); }
  .act .k small { display: none; }
}

/* backup: one call a round, above the action buttons on the right */
#a-backup { pointer-events: auto; position: absolute; right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); min-height: 44px; padding: 6px 12px; border-radius: 12px;
  border: 1.5px solid var(--gold); background: rgba(60, 48, 16, 0.6); color: var(--ink); font: 700 14px 'Work Sans', sans-serif; display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; touch-action: manipulation; }
#a-backup small { font-weight: 500; font-size: 11px; color: var(--dim); }
#a-backup.used { border-color: var(--line); background: rgba(16, 19, 26, 0.4); opacity: 0.5; pointer-events: none; }
#a-backup:active { transform: scale(0.96); }

/* in the world: hit pops, the hawk's patience over its head, the raid over the nest */
#pops { position: fixed; inset: 0; pointer-events: none; z-index: 7; }
.pop { position: absolute; transform: translate(-50%, -50%); font: 800 17px 'Work Sans', sans-serif; white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); animation: pop 1.15s ease-out forwards; }
.pop.good { color: var(--good); } .pop.great { color: var(--gold); font-size: 20px; } .pop.meh { color: #ffd39a; font-size: 14px; } .pop.bad { color: var(--warn); }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
#finds .find { position: fixed; transform: translateY(-50%); pointer-events: none; z-index: 6; font: 800 14px 'Work Sans', sans-serif; padding: 5px 9px; border-radius: 99px; background: rgba(16, 19, 26, 0.7); border: 1.5px solid var(--gold); color: var(--gold); animation: throb 1.4s ease-in-out infinite; }
#hawkbar { position: fixed; transform: translate(-50%, -100%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 6; }
#hawkbar i { display: block; width: 64px; height: 7px; border-radius: 4px; background: rgba(10, 12, 18, 0.55); overflow: hidden; box-shadow: 0 0 0 1px rgba(246, 243, 236, 0.35); }
#hawkbar i b { display: block; height: 100%; width: 100%; background: var(--gold); transition: background 0.3s; }
#hawkbar.dropping i b { background: var(--good); }
#hawkbar.dropping i { box-shadow: 0 0 0 1px var(--good), 0 0 10px rgba(143, 224, 164, 0.7); }
#hawkbar .pips { font-size: 8px; letter-spacing: 0; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
#nestmark { position: fixed; transform: translate(-50%, -100%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 6; animation: throb 0.8s ease-in-out infinite; }
#nestmark span { font-size: 22px; }
#nestmark i { display: block; width: 58px; height: 7px; border-radius: 4px; background: rgba(10, 12, 18, 0.6); overflow: hidden; box-shadow: 0 0 0 1px var(--warn); }
#nestmark i b { display: block; height: 100%; width: 0; background: var(--warn); }
#nestmark small { font: 800 12px 'Work Sans', sans-serif; color: var(--warn); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); white-space: nowrap; }

/* ---------- messages ---------- */
#toast { position: fixed; left: 50%; top: 30%; transform: translate(-50%, 6px) scale(0.98); font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: clamp(26px, 6vw, 44px); letter-spacing: -0.01em;
  text-align: center; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.35s, transform 0.35s; pointer-events: none; z-index: 8; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast small { display: block; font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 15px; color: var(--dim); margin-top: 6px; }
#hint { position: fixed; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 78px)); width: max-content; max-width: calc(100vw - 24px); text-align: center; transform: translateX(-50%); padding: 10px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
  font-size: 15px; opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: 8; backdrop-filter: blur(8px); }
#hint.show { opacity: 1; }

/* ---------- panel ---------- */
#panel { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; padding: 16px; background: linear-gradient(180deg, rgba(12, 14, 20, 0.15), rgba(12, 14, 20, 0.55)); }
.card { width: min(420px, 100%); max-height: calc(100% - 20px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px 20px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); animation: pop 0.45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.card h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 46px; letter-spacing: -0.02em; margin: 0; line-height: 1; }
.card h1 em { font-style: normal; color: var(--accent); }
.card h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 28px; margin: 0 0 4px; letter-spacing: -0.01em; }
.card .date { color: var(--dim); font-size: 14px; margin-top: 8px; }
.today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 16px; }
.today div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.today b { display: block; font-size: 22px; margin-bottom: 4px; }
.today span { font-size: 12.5px; color: var(--dim); }
.how { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.4; }
.how li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; }
.how b { font-weight: 600; }
.btn { display: block; width: 100%; padding: 14px 18px; border-radius: 12px; border: 0; font: 600 17px 'Work Sans', sans-serif; cursor: pointer; background: var(--ink); color: #151922; margin-top: 10px; }
.btn.alt { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.attempts { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.attempts em { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dim); }
.attempts em.won { background: var(--good); border-color: var(--good); }
.attempts em.lost { background: var(--warn); border-color: var(--warn); }
.result { font-size: 16px; color: var(--dim); margin: 6px 0 2px; }
.share { -webkit-user-select: text; user-select: text; font-family: ui-monospace, 'SF Mono', Menlo, monospace; white-space: pre-wrap; font-size: 15px; line-height: 1.5; background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 12px 14px; margin: 14px 0 4px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 6px; text-align: center; }
.stats b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-variant-numeric: tabular-nums; }
.stats span { font-size: 11.5px; color: var(--dim); }
.next { text-align: center; color: var(--dim); font-size: 14px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.small { font-size: 13px; color: var(--dim); text-align: center; margin-top: 12px; }
.tap { display: none; } body.touch .tap { display: inline; } body.touch .desk { display: none; }
.stars { font-size: 26px; letter-spacing: 4px; margin: 4px 0 2px; }
.par { font-size: 13px; color: var(--dim); text-align: center; margin: -6px 0 12px; }

/* ---------- the guide ---------- */
#guide { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; padding: 12px; background: rgba(10, 12, 18, 0.6); }
.gcard { width: min(560px, 100%); padding: 16px 16px 14px; }
.ghead { display: flex; justify-content: space-between; align-items: center; }
.ghead .tag { margin: 0; }
#g-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.gvid { position: relative; margin: 10px 0 12px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: #10141c; }
.gvid video { display: block; width: 100%; height: 100%; object-fit: cover; }
#g-num { position: absolute; left: 10px; top: 8px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); }
.gcard h2 { font-size: 25px; }
#g-when { margin: 6px 0 6px; font-size: 14.5px; font-weight: 600; color: var(--gold); }
#g-body { margin: 0 0 4px; font-size: 14.5px; line-height: 1.45; color: rgba(246, 243, 236, 0.9); min-height: 3em; }
.gnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 6px; }
.gnav .btn { margin: 0; padding: 11px 12px; }
.gnav .btn:disabled { opacity: 0.35; cursor: default; }
#g-dots { display: flex; gap: 6px; }
#g-dots em { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; }
#g-dots em.on { background: var(--ink); }
.btn.guide { background: transparent; color: var(--ink); border: 1.5px solid var(--gold); }
@media (max-height: 700px) and (orientation: landscape) { .gcard { width: min(760px, 100%); display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 16px; } .ghead, .gvid { grid-column: 1; } .ghead { grid-column: 1 / -1; } .gvid { grid-row: 2 / span 5; align-self: start; } }