/* ═════════════════════════════════════════════════════════
   CANOPY — page + game styling
   Site chrome (header, nav, footer, .wrap, .btn) comes from
   /css/site.css. Everything here is Canopy's own: the Green Sector
   palette, the viewport, the HUD and the upgrade cards.
   ═════════════════════════════════════════════════════════ */

/* Every game on this site defines .sr-only in its OWN stylesheet —
   site.css does not carry it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cy-page {
  --jade:#4ADE80;        /* the Operative's green — this game's accent */
  --amber:#FFB03D;
  --dust:#FF5C3D;
  --loam:#0B1410;
}

/* ── hero ───────────────────────────────────────────────── */
.cy-hero { padding:26px 0 10px; }

/* The hero breaks out of the site's 1200px .wrap — and only the hero.
   Everything below it (how-to-play, the bestiary, the FAQ) keeps the
   standard width, because prose at 1400px is worse to read while a
   viewport at 1400px is strictly better to play in.

   It grows to the RIGHT only. The left margin is pinned to wherever the
   site's 1200px column starts, so the headline still lines up with the
   logo above it and the section headings below it; a merely-wider
   centred wrap pulled the hero out of alignment on both sides.
   `100%` is the section's width, not 100vw, so a scrollbar cannot
   throw the sum off. Under ~1250px this collapses to exactly the
   standard wrap and nothing moves. */
.cy-hero > .wrap {
  max-width:none;
  margin-left:max(24px, calc((100% - 1200px) / 2 + 24px));
  margin-right:24px;
  padding:0;
}

.cy-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  gap:34px;
  align-items:start;
}
@media (max-width:1180px){
  .cy-hero-grid { grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:26px; }
}
@media (max-width:980px){ .cy-hero-grid { grid-template-columns:1fr; gap:22px; } }

.cy-title {
  font-family:var(--display); font-weight:800;
  font-size:clamp(40px,7.4vw,76px);
  line-height:.92; letter-spacing:-.025em;
  margin:6px 0 10px; color:var(--jade);
  text-shadow:0 0 40px rgba(74,222,128,.4);
}
.cy-sub {
  font-family:var(--display); font-size:clamp(15px,2vw,19px);
  color:var(--jade); margin:0 0 14px; line-height:1.35;
}
.cy-points { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.cy-points li { color:var(--dim); font-size:15px; display:flex; gap:10px; align-items:flex-start; }
.cy-points b { color:var(--paper); }
.cy-hint { margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--dim); line-height:2.1; }
.cy-hint .kbd {
  display:inline-block; padding:2px 7px; border:1px solid var(--line);
  border-radius:7px; background:rgba(242,241,255,.05); color:var(--paper);
}

/* ── the viewport ───────────────────────────────────────── */
.cy-stage { position:relative; }
.cy-shell {
  position:relative;
  border:2.5px solid rgba(74,222,128,.6);
  border-radius:var(--radius);
  overflow:hidden;
  background:#06100C;
  box-shadow:0 0 0 8px rgba(74,222,128,.06),
             0 30px 90px rgba(74,222,128,.2),
             inset 0 0 60px rgba(0,0,0,.5);
}
/* No aspect-ratio: the renderer reads the canvas's real pixel size and
   builds its projection from that, so any box is correct — a wider one
   simply shows more of the sector horizontally, which is what a wider
   screen should buy you. Height is driven by the viewport instead, so
   the play area grows downward on a tall window without ever pushing
   its own HUD off the bottom of the screen. */
#cy-canvas {
  display:block;
  width:100%;
  height:clamp(430px, 74vh, 820px);
  touch-action:none;
  background:#06100C;
  cursor:crosshair;
}
@media (max-width:980px){ #cy-canvas { height:clamp(400px, 62vh, 620px); } }
@media (max-width:640px){ #cy-canvas { height:clamp(380px, 58vh, 560px); } }

/* ── crosshair ──────────────────────────────────────────── */
.cy-cross {
  position:absolute; left:50%; top:50%;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  pointer-events:none;
}
.cy-cross span {
  position:absolute; background:rgba(242,241,255,.82);
  box-shadow:0 0 4px rgba(0,0,0,.9);
}
.cy-cross span:nth-child(1){ left:50%; top:0; width:1.5px; height:8px; margin-left:-.75px; }
.cy-cross span:nth-child(2){ left:50%; bottom:0; width:1.5px; height:8px; margin-left:-.75px; }
.cy-cross span:nth-child(3){ top:50%; left:0; height:1.5px; width:8px; margin-top:-.75px; }
.cy-cross span:nth-child(4){ top:50%; right:0; height:1.5px; width:8px; margin-top:-.75px; }
.cy-cross i {
  position:absolute; inset:0; opacity:0;
  background:
    linear-gradient(45deg,transparent 46%,#FF3B30 46%,#FF3B30 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,#FF3B30 46%,#FF3B30 54%,transparent 54%);
}

/* ── threat bearing ──────────────────────────────────────
   A chevron on a ring around the crosshair, pointing at something that
   has committed to shooting you. Rotated about the centre and pushed
   outward, so 12 o'clock is dead ahead and the ring reads the way a
   compass does. The radius is set from JS so it tracks the viewport in
   both windowed and fullscreen. */
#cy-threats {
  position:absolute; left:50%; top:50%;
  width:0; height:0; pointer-events:none; z-index:3;
}
.cy-threat {
  position:absolute; left:-15px; top:-15px;
  width:30px; height:30px;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.cy-threat::before {
  content:''; position:absolute; left:50%; top:0; margin-left:-10px;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:15px solid var(--amber);
  filter:drop-shadow(0 0 7px rgba(255,176,61,.95));
  animation:cy-threat-pulse .5s ease-in-out infinite alternate;
}
@keyframes cy-threat-pulse { from { opacity:.55; } to { opacity:1; } }
.cy-threat[hidden] { display:none; }

@media (prefers-reduced-motion:reduce){
  .cy-threat::before { animation:none; opacity:1; }
}

/* ── HUD ────────────────────────────────────────────────── */
.cy-hud-top {
  position:absolute; inset:0 0 auto 0;
  display:flex; align-items:center; gap:9px;
  padding:10px 12px;
  font-family:var(--mono); font-size:11px; color:var(--paper);
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,8,.66),rgba(4,10,8,0));
}
.cy-armor { display:flex; gap:3px; }
.cy-seg {
  display:block; width:17px; height:7px; border-radius:2px;
  background:var(--jade); box-shadow:0 0 8px rgba(74,222,128,.55);
}
.cy-seg.off { background:rgba(242,241,255,.16); box-shadow:none; }
.cy-spacer { flex:1; }
.cy-chip {
  padding:3px 9px; border-radius:999px;
  background:rgba(0,0,0,.45); border:1px solid var(--line); white-space:nowrap;
}
#cy-score { font-weight:700; color:var(--jade); }

.cy-hud-bot {
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px;
  font-family:var(--mono); font-size:11px; color:var(--dim);
  background:linear-gradient(0deg,rgba(4,10,8,.74),rgba(4,10,8,0));
}
#cy-weapon { color:var(--paper); }
#cy-weapon i { font-style:normal; color:var(--dim); }
#cy-weapon u, #cy-relic u {
  text-decoration:none; font-size:9px; padding:1px 4px; border-radius:4px;
  border:1px solid var(--line); color:var(--dim); margin-left:3px;
}
#cy-ammo { font-size:15px; font-weight:700; color:var(--paper); letter-spacing:.02em; }
#cy-ammo.low { color:var(--dust); }
.cy-empty { color:rgba(242,241,255,.3); }

.cy-btn-mini {
  pointer-events:auto;
  padding:5px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(0,0,0,.42);
  color:var(--dim); font:600 10px var(--mono);
}
.cy-btn-mini:hover { color:var(--paper); border-color:rgba(74,222,128,.45); }
.cy-dash {
  position:relative; pointer-events:auto; overflow:hidden;
  width:56px; height:26px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,0,0,.45);
  color:var(--dim); font:600 10px var(--mono);
  display:grid; place-items:center; cursor:pointer;
}
.cy-dash::before {
  content:''; position:absolute; inset:0; width:var(--fill,100%);
  background:linear-gradient(90deg,rgba(74,222,128,.34),rgba(74,222,128,.10));
  transition:width .08s linear;
}
.cy-dash span { position:relative; }
.cy-dash.ready { color:var(--jade); border-color:rgba(74,222,128,.5); }

/* ── fullscreen ──────────────────────────────────────────
   The SHELL goes fullscreen, never the canvas alone: the HUD, the
   crosshair, the announcements and every overlay are absolutely
   positioned inside it, so fullscreening the canvas would leave the
   entire interface behind on the page.

   These are written as SEPARATE rules on purpose. An unrecognised
   selector invalidates the whole selector list, so grouping
   `:fullscreen` with `:-webkit-full-screen` would drop the rule
   entirely in any browser that knows only one of them. */
#cy-shell:fullscreen { border:0; border-radius:0; box-shadow:none; width:100%; height:100%; }
#cy-shell:-webkit-full-screen { border:0; border-radius:0; box-shadow:none; width:100%; height:100%; }
#cy-shell.cy-faux-full { border:0; border-radius:0; box-shadow:none; }

#cy-shell:fullscreen #cy-canvas { width:100%; height:100%; }
#cy-shell:-webkit-full-screen #cy-canvas { width:100%; height:100%; }
#cy-shell.cy-faux-full #cy-canvas { width:100%; height:100%; }

/* iOS Safari exposes no Fullscreen API on ordinary elements — only on
   <video>. The fallback pins the shell over the viewport instead, which
   is the same result minus the browser chrome hiding. */
#cy-shell.cy-faux-full {
  position:fixed; inset:0; z-index:9999;
  width:auto; height:auto;
}

/* the toggle reads as active while engaged */
#cy-btn-full[aria-pressed="true"] { color:var(--jade); border-color:rgba(74,222,128,.5); }

/* ── screen effects ─────────────────────────────────────── */
#cy-vignette {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center,transparent 38%,rgba(200,20,30,.62) 100%);
  transition:opacity .12s linear;
}
#cy-vignette.flash { background:rgba(255,255,255,.85); opacity:1 !important; transition:none; }

#cy-say {
  position:absolute; left:0; right:0; top:31%;
  text-align:center; pointer-events:none;
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,3.8vw,30px); letter-spacing:.08em;
  color:var(--paper); text-shadow:0 2px 22px rgba(0,0,0,.9);
  opacity:0;
}
#cy-say.show { animation:cy-say 1.7s ease-out forwards; }
@keyframes cy-say {
  0%{opacity:0;transform:scale(.9)} 14%{opacity:1;transform:scale(1)}
  76%{opacity:1} 100%{opacity:0;transform:scale(1.03)}
}
#cy-toast {
  position:absolute; left:0; right:0; top:64%;
  text-align:center; pointer-events:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--jade); text-shadow:0 2px 12px rgba(0,0,0,.9);
  opacity:0; transition:opacity .2s;
}
#cy-toast.show { opacity:1; }

#cy-lockhint {
  position:absolute; left:50%; top:50%; transform:translate(-50%,26px);
  pointer-events:none; text-align:center;
  font-family:var(--mono); font-size:11px; color:rgba(242,241,255,.72);
  background:rgba(4,10,8,.6); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; white-space:nowrap;
}

/* ── overlays ───────────────────────────────────────────── */
.cy-overlay {
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center; padding:20px;
  background:rgba(4,10,8,.86);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.cy-overlay[hidden] { display:none; }
.cy-panel { width:100%; max-width:420px; text-align:center; }
.cy-panel h2 {
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,4.4vw,32px); margin:0 0 8px; line-height:1.06;
  color:var(--jade); text-shadow:0 0 28px rgba(74,222,128,.5);
}
.cy-panel > p { color:var(--dim); font-size:14px; margin:0 0 16px; }

.cy-modes { display:grid; gap:9px; }
.cy-mode {
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:13px 15px; border-radius:15px;
  border:1px solid var(--line); background:rgba(242,241,255,.04);
  color:var(--paper); font-family:inherit;
  transition:border-color .15s, background .15s, transform .1s;
}
.cy-mode:hover { border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.08); transform:translateY(-1px); }
.cy-mode b { display:block; font-family:var(--display); font-size:15px; margin-bottom:3px; }
.cy-mode small { color:var(--dim); font-size:12px; line-height:1.45; display:block; }
.cy-mode.primary { border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.1); }

/* sits ABOVE the mode buttons: choose what you carry, then commit to
   a mode. Below them it read as an afterthought that applied to only
   one of the two. */
.cy-weapon-pick { margin:2px 0 14px; text-align:left; }
.cy-weapon-pick > span {
  display:block; font-family:var(--mono); font-size:10.5px; color:var(--dim);
  text-transform:uppercase; letter-spacing:.09em; margin-bottom:7px;
}
.cy-weapon-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.cy-weapon-row-2 { grid-template-columns:repeat(2,1fr); }
.cy-weapon-row label {
  display:block; padding:9px 8px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:rgba(242,241,255,.03);
  font-family:var(--mono); font-size:10.5px; color:var(--dim); text-align:center;
}
.cy-weapon-row input { position:absolute; opacity:0; pointer-events:none; }
.cy-weapon-row input:checked + label { border-color:var(--jade); color:var(--paper); background:rgba(74,222,128,.12); }
.cy-weapon-row input:focus-visible + label { outline:2px solid var(--jade); outline-offset:2px; }

#cy-upgrade-wave {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--jade); margin-bottom:6px;
}
.cy-cards { display:grid; gap:9px; }
.cy-card {
  --card:#7CFFA8;
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(242,241,255,.05),rgba(242,241,255,.02));
  color:var(--paper); font-family:inherit;
  transition:border-color .15s, transform .1s, background .15s;
}
.cy-card:hover, .cy-card:focus-visible {
  border-color:var(--card); transform:translateY(-1px);
  background:linear-gradient(135deg,rgba(242,241,255,.09),rgba(242,241,255,.03));
  outline:none;
}
.cy-card-tag {
  display:inline-block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--card); margin-bottom:5px;
}
.cy-card-name { display:block; font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:4px; }
.cy-card-desc { display:block; font-size:12.5px; color:var(--dim); line-height:1.42; }
.cy-card-meta { display:block; margin-top:6px; font-family:var(--mono); font-size:10px; color:rgba(242,241,255,.34); }

.cy-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 15px; }
.cy-stats > div {
  padding:9px 11px; border-radius:11px; text-align:left;
  border:1px solid var(--line); background:rgba(242,241,255,.03);
}
.cy-stats dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }
.cy-stats dd { margin:2px 0 0; font-family:var(--display); font-weight:700; font-size:16px; color:var(--paper); }
#cy-over-note { font-family:var(--mono); font-size:10.5px; color:var(--dim); margin:12px 0 0; }
.cy-over-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

#cy-unranked, #cy-nogl p {
  margin-top:10px; padding:7px 10px; border-radius:9px;
  border:1px solid rgba(255,176,61,.35); background:rgba(255,176,61,.08);
  font-family:var(--mono); font-size:10.5px; color:var(--amber);
}

/* audio self-check meter */
.cy-at-meter {
  height:16px; border-radius:999px; overflow:hidden;
  border:1px solid var(--line); background:rgba(0,0,0,.45);
  margin:0 0 14px;
}
.cy-at-meter i {
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--jade),var(--amber));
  transition:width .05s linear;
}
#cy-at-note { font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:12px; }

/* ── leaderboard ─────────────────────────────────────────
   The shared board renderer in /js/board.js emits .lb-* markup; these
   are Canopy's own wrappers around it plus the post-run form. */
.cy-lb-note { font-size:13px; color:var(--dim); margin:14px 0 8px; line-height:1.5; }
.cy-lb-standing { font-size:14px; color:var(--jade); margin:14px 0 4px; font-weight:600; }
.cy-lb-err { font-size:12px; color:var(--dust); margin:6px 0 0; }
.cy-lb-fine { font-size:11.5px; color:rgba(242,241,255,.42); margin:8px 0 0; line-height:1.5; }
.cy-lb-fine a { color:var(--jade); }
.cy-lb-form { display:flex; gap:7px; align-items:stretch; }
.cy-lb-form input {
  flex:1; min-width:0;
  padding:8px 11px; border-radius:11px;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  color:var(--paper); font:14px var(--body);
}
.cy-lb-form input:focus-visible { outline:2px solid var(--jade); outline-offset:1px; }
.cy-lb-post { padding:8px 16px; font-size:11px; }
#cy-lb-block:empty { display:none; }

/* The board section (#cy-lb-today) is rendered by BOARD.renderBoard, which
   emits UNPREFIXED .lb-* classes — the same markup every game's board uses.
   The .cy-lb-* rules above style Canopy's own post-run block only, so without
   these the ranked table fell back to browser defaults: a decimal-marker <ol>
   with four inline spans per row running together. Prefixing these would
   silently break it again. */
.lb-panel {
  background:rgba(242,241,255,.03); border:1px solid var(--line);
  border-radius:15px; padding:22px; max-width:680px;
}
.lb-msg { color:var(--dim); font-size:14.5px; margin:0; }
.lb-standing { font-size:13.5px; color:var(--paper); margin:0 0 6px; line-height:1.5; }
.lb-standing b { color:var(--jade); }
.lb-count { font-family:var(--mono); font-size:12px; color:var(--dim); margin:0 0 12px; }
.lb-list { list-style:none; margin:0; padding:0; }
.lb-row {
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.lb-row:last-child { border-bottom:none; }
.lb-row.is-you { color:var(--jade); }
.lb-row.is-you .lb-name { font-weight:600; }
.lb-row.is-you .lb-rank { color:var(--jade); }
.lb-rank { font-family:var(--mono); font-size:12px; color:var(--dim); width:22px; flex-shrink:0; }
.lb-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-name em { font-style:normal; color:var(--dim); font-size:12px; }
.lb-wave { font-family:var(--mono); font-size:11.5px; color:var(--dim); white-space:nowrap; }
.lb-score { font-family:var(--display); font-weight:700; font-size:14px; min-width:66px; text-align:right; }
.lb-err { color:var(--dust); font-size:12px; margin:6px 0 0; }
.lb-remove {
  margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--dim);
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; cursor:pointer;
}
.lb-remove:hover:not(:disabled) { color:var(--paper); border-color:var(--dim); }
.lb-remove:disabled { opacity:.5; cursor:not-allowed; }

/* ── content sections ───────────────────────────────────── */
/* vertical only: this element also carries .wrap, and a shorthand
   here would zero out .wrap's 24px side padding and shift every
   section 24px left of the header and footer. */
.cy-sec { padding-top:44px; padding-bottom:6px; }
.cy-sec h2 {
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,3.4vw,31px); margin:0 0 6px; color:var(--paper);
}
.cy-sec .lede { color:var(--dim); font-size:15.5px; max-width:72ch; margin:0 0 20px; line-height:1.6; }

.cy-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
.cy-cardlet {
  padding:15px 16px; border-radius:15px;
  border:1px solid var(--line); background:rgba(242,241,255,.03);
}
.cy-cardlet h3 { font-family:var(--display); font-size:15px; margin:0 0 6px; color:var(--paper); }
.cy-cardlet p { margin:0; color:var(--dim); font-size:13.5px; line-height:1.55; }
.cy-cardlet .ic { font-size:19px; display:block; margin-bottom:7px; }

.cy-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:15px; }
table.cy-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:580px; }
table.cy-table th, table.cy-table td { padding:10px 13px; text-align:left; border-bottom:1px solid var(--line); }
table.cy-table th {
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); background:rgba(242,241,255,.03);
}
table.cy-table tr:last-child td { border-bottom:0; }
table.cy-table td:first-child { color:var(--paper); font-weight:600; white-space:nowrap; }
table.cy-table td { color:var(--dim); line-height:1.5; }
.cy-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; }

.cy-faq { display:grid; gap:9px; }
.cy-faq details {
  border:1px solid var(--line); border-radius:13px;
  background:rgba(242,241,255,.03); overflow:hidden;
}
.cy-faq summary {
  padding:13px 15px; cursor:pointer; font-weight:600; color:var(--paper);
  font-size:14.5px; list-style:none; display:flex; justify-content:space-between; gap:12px;
}
.cy-faq summary::-webkit-details-marker { display:none; }
.cy-faq summary::after { content:'+'; color:var(--jade); font-family:var(--mono); flex:none; }
.cy-faq details[open] summary::after { content:'−'; }
.cy-faq p { margin:0; padding:0 15px 14px; color:var(--dim); font-size:13.5px; line-height:1.6; }

@media (prefers-reduced-motion:reduce){
  #cy-say.show { animation:none; opacity:1; }
  .cy-mode:hover, .cy-card:hover { transform:none; }
}