/* ============================================================
   ARTURE — "catch the line" on the home page.
   A visitor is invited to click the head of the storyline as it
   draws. Loaded only by Site-Home.html; nothing else on the site
   carries it. Pairs with line-game.js.
   ============================================================ */

/* ---------- the catch-the-line layer ---------- */
#fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* cursor ring — tightens and warms as you close in on the head */
#reticle {
  position: fixed; left: 0; top: 0; z-index: 55; pointer-events: none;
  width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  border: 1px solid rgba(243,239,231,.18);
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
#reticle::after {
  content: ""; position: absolute; inset: 34px; border-radius: 50%;
  background: rgba(243,239,231,.35);
}
#reticle.live { opacity: 1; }
#reticle { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
#reticle::after { inset: 41px; }
#reticle.hot { border-color: var(--accent); box-shadow: 0 0 22px rgba(240,137,45,.45) inset, 0 0 22px rgba(240,137,45,.3); }
#reticle.hot::after { background: var(--accent); }
/* the reticle replaces the pointer while hunting, but real controls keep a
   real cursor so the page never feels broken */
html.pointer-fine body { cursor: none; }
html.pointer-fine a, html.pointer-fine button, html.pointer-fine #hud { cursor: auto; }
html.pointer-fine a, html.pointer-fine button { cursor: pointer; }


/* HUD */
#hud {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 58; width: 232px;
  padding: 1rem 1.1rem 1.05rem;
  background: rgba(10,17,32,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--faint); border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
  font-family: var(--mono); color: var(--paper);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
#hud.away { transform: translateY(140%); opacity: 0; }
#hud .invite p { margin: 0 0 .9rem; font-size: .68rem; letter-spacing: .04em; line-height: 1.75;
  text-transform: none; color: var(--muted); }
#hud .invite .tally { display: block; margin: 0 0 1rem; font-size: .55rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(243,239,231,.35); }
#hud .invite .acts { display: flex; gap: .45rem; flex-wrap: wrap; }
#hud .yes, #hud .no {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: .55rem .95rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
#hud .yes { background: var(--accent); color: var(--ink); font-weight: 700; }
#hud .yes:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(240,137,45,.4); }
#hud .no { background: transparent; border-color: rgba(243,239,231,.2); color: var(--muted); }
#hud .no:hover { border-color: rgba(243,239,231,.4); color: var(--paper); }
#hud .game { display: none; }
#hud.playing .invite { display: none; }
#hud.playing .game { display: block; }
#hud h4 { margin: 0 0 .7rem; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
#hud .row { display: flex; justify-content: space-between; align-items: baseline; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .22rem 0; }
#hud .row b { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
#hud .meter { height: 3px; border-radius: 3px; background: rgba(243,239,231,.12); margin: .7rem 0 .5rem; overflow: hidden; }
#hud .meter i { display: block; height: 100%; width: 0%; border-radius: 3px; background: var(--accent);
  transition: width .12s linear, background .25s ease; }
#hud .say { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-height: 1.6em; }
#hud .say.hot { color: var(--accent); }

/* floating "so close" marks */
.nearmiss {
  position: fixed; z-index: 59; pointer-events: none; transform: translate(-50%,-50%);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
  animation: floatOff 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes floatOff { to { transform: translate(-50%,-50%) translateY(-38px); opacity: 0; } }

/* the reward */
#prize {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  padding: 1.5rem; opacity: 0; pointer-events: none;
  background: rgba(5,9,18,.72); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: opacity .5s ease;
}
#prize.open { opacity: 1; pointer-events: auto; }
#prize .card {
  position: relative; width: min(560px, 100%); padding: clamp(1.8rem,4vw,2.8rem);
  background: linear-gradient(165deg, rgba(20,32,54,.97), rgba(9,15,28,.98));
  border: 1px solid rgba(240,137,45,.34); border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(243,239,231,.04) inset;
  text-align: center;
  transform: translateY(26px) scale(.94); opacity: 0;
  transition: transform .7s cubic-bezier(.2,1,.3,1), opacity .5s ease;
}
#prize.open .card { transform: none; opacity: 1; }
#prize .seal {
  width: 58px; height: 58px; margin: 0 auto 1.3rem; border-radius: 50%;
  border: 1px solid rgba(240,137,45,.5); display: grid; place-items: center;
  box-shadow: 0 0 34px rgba(240,137,45,.35);
}
#prize .seal i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 18px rgba(240,137,45,.9); display: block; }
#prize .tag { font-family: var(--mono); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .9rem; }
#prize h3 { margin: 0 0 1rem; font-size: clamp(1.5rem,3.6vw,2.3rem); font-weight: 300; line-height: 1.15;
  text-transform: none; letter-spacing: -.01em; }
#prize h3 b { font-weight: 700; }
#prize p { margin: 0 auto 1.1rem; max-width: 46ch; color: var(--muted); line-height: 1.7; font-size: .93rem; }
#prize .stats { display: flex; justify-content: center; gap: 2rem; margin: 1.4rem 0 1.6rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(243,239,231,.1); }
#prize .stat { font-family: var(--mono); }
#prize .stat b { display: block; font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
#prize .stat span { font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
#prize .board { margin: 0 0 1.5rem; }
#prize .board-h { font-family: var(--mono); font-size: .54rem; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(243,239,231,.38); margin: 0; }
#prize .board-row { margin: .6rem 0 0; padding-top: .9rem; }
#prize .board-row .stat b { font-size: 1.05rem; color: var(--paper); }
#prize .acts { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  #hud { right: .8rem; bottom: .8rem; width: 190px; padding: .85rem .9rem; }
  }