@import url("../assets/fonts/fonts.css");

:root {
  --ink:#eaf4fa; --dim:#8aa7bd; --line:rgba(138,167,189,0.22);
  --blue:#0397d9; --green:#77ba13; --navy:#022a8a;
  --card:rgba(4,22,56,0.74); --card-up:rgba(6,34,84,0.92);
  --display:"Barlow Condensed",sans-serif; --body:"Inter",sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#000408; color:var(--ink);
  font-family:var(--body); -webkit-user-select:none; user-select:none; touch-action:manipulation; }

/* 9:16 portrait stage; letterboxes on a desktop preview, fills the panel on device */
.stage { height:100vh; aspect-ratio:9/16; max-width:100vw; margin:0 auto; position:relative;
  overflow:hidden; box-shadow:0 0 80px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#03234f 0%,#021637 55%,#010c20 100%); }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; padding:3vh; }

.tri { display:flex; flex-direction:column; }
.tri > i { display:block; height:33.34%; }
.tri > i:nth-child(1){ background:var(--green);} .tri > i:nth-child(2){ background:var(--blue);} .tri > i:nth-child(3){ background:var(--navy);}

.kicker { font-family:var(--display); font-size:1.6vh; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); }
.title  { font-family:var(--display); font-size:4.4vh; font-weight:700; text-transform:uppercase; margin:.6vh 0 0; line-height:1; }
.card   { background:var(--card); border:1.5px solid var(--line); border-radius:2vh; color:var(--ink);
  text-align:left; transition:transform .12s ease,border-color .12s ease,background .12s ease; cursor:pointer; }
.card:active { transform:scale(.97); }

@keyframes pulseGlow { 0%,100%{opacity:.6;} 50%{opacity:1;} }
@keyframes drift    { 0%{transform:translateY(-2%);} 100%{transform:translateY(2%);} }
@keyframes riseIn   { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.rise { animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Persistent video background (shared by all screens) ---------- */
.bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bg-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,10,28,.90) 0%, rgba(1,10,28,.84) 18%, rgba(1,10,28,.60) 40%, rgba(1,10,28,.64) 70%, rgba(1,10,28,.88) 100%); }
#screens { position:absolute; inset:0; z-index:2; }

/* ---------- Attract screen (foreground over the shared background) ---------- */
.screen.attract { padding:0; align-items:center; justify-content:center; }

.start { position:absolute; inset:0; z-index:2; width:100%; height:100%;
  background:transparent; border:0; cursor:pointer; color:var(--ink); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3vh; padding:6vh 5vh; }

.wordmark { font-family:var(--display); font-size:3.1vh; font-weight:700;
  letter-spacing:.42em; text-transform:uppercase; color:var(--blue); padding-left:.42em; }
/* tri-stripe accent under the wordmark */
.wordmark::after { content:""; display:block; width:16vh; height:1vh; margin:1.1vh auto 0; margin-left:auto;
  background:linear-gradient(90deg, var(--green) 0 33.3%, var(--blue) 33.3% 66.6%, var(--navy) 66.6% 100%); }

.headline { font-family:var(--display); font-size:8.6vh; font-weight:700;
  line-height:.94; text-transform:uppercase; color:var(--ink); }
.headline b { color:var(--blue); font-weight:700; }

.cta { font-family:var(--display); font-size:2.3vh; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); border:2px solid var(--green); border-radius:999px;
  padding:2vh 5.2vh; margin-top:1.4vh; animation:pulseGlow 2.4s ease-in-out infinite;
  box-shadow:0 0 36px rgba(119,186,19,.22); }

/* ---------- Shared screen chrome (header / back / step rail) ---------- */
.head { position:relative; display:flex; flex-direction:column; gap:1vh; margin-bottom:2vh; }
.back { align-self:flex-start; order:-1; font-family:var(--display); font-size:1.7vh; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); background:transparent;
  border:1.5px solid var(--line); border-radius:1.3vh; padding:1.1vh 2.4vh; cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, color .12s ease; }
.back:active { transform:scale(.96); border-color:var(--blue); color:var(--ink); }
.head .title { font-size:4.6vh; }
.head .tri { width:9vh; height:.9vh; }
.steprail { display:flex; gap:1.6vh; align-items:center; margin-top:.6vh; }
.step { font-family:var(--display); font-size:1.5vh; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); padding-bottom:.3vh; border-bottom:.3vh solid transparent; }
.step.on { color:var(--ink); border-bottom-color:var(--green); }

/* ---------- Card grids (shared) ---------- */
.grid { flex:1; display:flex; flex-direction:column; gap:1.8vh; min-height:0; }
.card { padding:2.6vh 3vh; display:flex; flex-direction:column; justify-content:center; gap:1vh; }
.card .title { margin:0; }

/* ---------- Water screen: three tall group cards ---------- */
.grid.water .card { flex:1; position:relative; }
.grid.water .card .kicker { color:var(--dim); letter-spacing:.16em; }
.grid.water .card::after { content:"→"; position:absolute; right:3vh; top:50%; transform:translateY(-50%);
  font-family:var(--display); font-size:3.4vh; color:var(--green); opacity:.85; }
.grid.water .card:active { border-color:var(--blue); background:var(--card-up); }

/* ---------- Fish screen: two-column species grid ---------- */
.grid.fish { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:1.6vh; }
.grid.fish .card { padding:2.2vh; justify-content:flex-end; gap:.6vh; }
.grid.fish .hero { width:100%; height:14vh; object-fit:cover; border-radius:1.2vh; margin-bottom:auto; }
.grid.fish .card .title { font-size:3vh; line-height:1; }
.grid.fish .card .kicker { color:var(--dim); letter-spacing:.14em; font-size:1.35vh; }
.grid.fish .card:active { border-color:var(--blue); background:var(--card-up); }

/* ---------- Setup screen: Good / Better / Best tier ribbons (Direction 2) ---------- */
/* Each card = a colored header bar + three Rod/Reel/Line columns. Best is the green hero
   (brighter border + glow); Good/Better sit quieter. Per-tier color is carried in vars. */
.grid.tiers .card { flex:1; padding:0; overflow:hidden; border:1.5px solid var(--bd); min-height:0; }
.grid.tiers .card[data-tier="good"]   { --accent:#9fb6c6; --bar:rgba(138,167,189,.12); --bd:rgba(138,167,189,.30); }
.grid.tiers .card[data-tier="better"] { --accent:#1fa9e6; --bar:rgba(3,151,217,.16);   --bd:rgba(138,167,189,.30); }
.grid.tiers .card[data-tier="best"]   { --accent:#8ed31f; --bar:rgba(119,186,19,.18);  --bd:rgba(119,186,19,.62);
  box-shadow:0 0 5vh rgba(119,186,19,.30); }
.grid.tiers .card:active { background:var(--card-up); }

.tier-bar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  padding:1.1vh 2.4vh; background:var(--bar); border-bottom:1px solid var(--bd); border-left:.6vh solid var(--accent); }
.tier-bar .tier-label { font-family:var(--display); font-size:3vh; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; color:var(--accent); line-height:1; }
.tier-bar .choose { font-family:var(--display); font-size:1.9vh; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:transparent; border:1.5px solid var(--bd);
  border-radius:999px; padding:.8vh 2vh; cursor:pointer; transition:transform .12s ease, background .12s ease; }
.tier-bar .choose:active { transform:scale(.96); background:rgba(255,255,255,.06); }

.tier-cols { flex:1; display:flex; min-height:0; }
.tier-cols .col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9vh; padding:1.2vh .9vh; min-width:0; min-height:0; }
.tier-cols .col + .col { border-left:1px solid rgba(138,167,189,.14); }

/* image slot grows to fill the card's free height, so three cards always fit with no scroll */
.gimg { flex:1; min-height:0; width:100%; position:relative; display:flex; align-items:center; justify-content:center; }
.gimg img { max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 1vh 1.6vh rgba(0,0,0,.55)); }
/* tap-to-enlarge affordance on Setup product images */
.gimg.zoomable { cursor:pointer; }
.zoom-badge { position:absolute; right:.4vh; top:.4vh; width:3.2vh; height:3.2vh; border-radius:50%;
  background:rgba(2,18,44,.72); border:1px solid var(--bd); color:var(--accent);
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.zoom-badge svg { width:1.9vh; height:1.9vh; }

/* branded placeholder when a gear cutout is missing (keeps the column from gaping) */
.gimg.noimg { border:1px dashed var(--line); border-radius:1.1vh; background:rgba(255,255,255,.03); }
.gimg.noimg img { display:none; }
.gimg.noimg::after { content:"SHIMANO"; font-family:var(--display); font-weight:700; font-size:1.7vh;
  letter-spacing:.22em; color:var(--dim); opacity:.6; }
.gimg.noimg::before { content:""; position:absolute; bottom:24%; width:44%; height:.7vh; border-radius:999px; opacity:.6;
  background:linear-gradient(90deg,var(--green) 0 33.3%,var(--blue) 33.3% 66.6%,var(--navy) 66.6%); }

.tier-cols .pill { flex-shrink:0; font-family:var(--display); font-size:1.4vh; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--bd); border-radius:999px; padding:.4vh 1.5vh; }
.tier-cols .gname { flex-shrink:0; font-family:var(--display); font-size:1.95vh; font-weight:700; text-transform:uppercase;
  color:var(--ink); text-align:center; line-height:1.1; min-height:4.3vh;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Lightbox: tap-to-enlarge + reel multi-angle gallery ---------- */
.lightbox { position:absolute; inset:0; z-index:50; background:rgba(1,8,20,.93); animation:lbIn .18s ease both;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4vh; padding:7vh 4vh; }
@keyframes lbIn { from{opacity:0} to{opacity:1} }
.lb-close { position:absolute; top:3vh; right:3vh; width:6vh; height:6vh; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1.5px solid var(--line); color:var(--ink); font-size:3.2vh; line-height:1; }
.lb-stage { position:relative; flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.lb-img { max-width:86%; max-height:100%; object-fit:contain; filter:drop-shadow(0 2vh 4vh rgba(0,0,0,.6)); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:8vh; height:8vh; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1.5px solid var(--line); color:var(--ink); font-size:4vh; line-height:1; }
.lb-prev { left:1vh; } .lb-next { right:1vh; }
.lb-nav:active { transform:translateY(-50%) scale(.94); }
.lb-meta { text-align:center; flex-shrink:0; }
.lb-label { font-family:var(--display); font-size:1.8vh; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); }
.lb-name { font-family:var(--display); font-size:3.4vh; font-weight:700; text-transform:uppercase; color:var(--ink); margin-top:.5vh; line-height:1.05; }
.lb-dots { display:flex; gap:1.4vh; flex-shrink:0; }
.lb-dots span { width:1.4vh; height:1.4vh; border-radius:50%; background:rgba(255,255,255,.25); transition:background .12s ease; }
.lb-dots span.on { background:var(--green); }

/* ---------- Rig screen: the payoff (hero rig card + QR) ---------- */
.rig { flex:1; display:flex; flex-direction:column; gap:1.6vh; min-height:0; }

/* hero card reuses the tier card's accent/border/glow (best = green hero) */
.rig-card { flex:1; min-height:0; padding:0; overflow:hidden; }
.rig-card .tier-bar { padding:1.4vh 2.6vh; }
.rig-card .tier-label { font-size:3.2vh; }
.rig-card .tier-tag { font-family:var(--display); font-size:1.5vh; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); opacity:.6; }
.rig-card .tier-cols { flex:1; }
.rig-card .pill { font-size:1.6vh; }
.rig-card .gname { font-size:2.1vh; min-height:5vh; -webkit-line-clamp:3; }

/* leader / baits / pro-tip inside the card, shown only when present */
.rig-extras { flex-shrink:0; border-top:1px solid var(--bd); padding:1.4vh 2.6vh;
  display:flex; flex-direction:column; gap:1vh; }
.rig-line { font-family:var(--body); font-size:1.7vh; color:var(--ink); line-height:1.35; }
.rig-line .rl-label { font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.rig-tip { background:rgba(119,186,19,.10); border:1px solid rgba(119,186,19,.3); border-radius:1.1vh;
  padding:1.2vh 1.8vh; font-family:var(--body); font-size:1.6vh; color:var(--ink); line-height:1.4; }
.rig-tip .tip-label { font-family:var(--display); color:var(--green); font-weight:600; letter-spacing:.04em; }

/* QR takeaway (two-column: text + white QR tile) + restart */
.rig-cta { align-self:stretch; display:flex; align-items:center; justify-content:center; gap:3.2vh; }
.rig-cta-text { max-width:46%; }
.rig-cta-text .kicker { color:var(--green); }
.rig-cta-line { font-family:var(--display); font-size:2.9vh; font-weight:700; text-transform:uppercase;
  line-height:1.06; color:var(--ink); margin-top:.6vh; }
.rig .qr { flex-shrink:0; background:#fff; padding:1.4vh; border-radius:1.4vh; display:flex; }
.rig .qr img { display:block; width:16vh; height:16vh; image-rendering:pixelated; }
.rig .restart { align-self:stretch; font-family:var(--display); font-size:2.1vh; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#04210a; background:linear-gradient(135deg,#8ed31f,var(--green)); border:0;
  border-radius:999px; padding:1.7vh 4vh; cursor:pointer; box-shadow:0 10px 30px rgba(119,186,19,.28); }
.rig .restart:active { transform:scale(.97); }