/* ================================================================
   GOLD  —  early-90s Windows chrome over a live gold-gradient video
   looping video bg · raised 3D bevel cut-out windows · gold
   panels+buttons · jaggy aliased bold-italic text
   ================================================================ */
:root{
  --plate:#8f8f95;
  --frame-lo:#5f5f65;   --frame-hi:#eaeaee;   /* bevel dark / light */
  --panel:#b7b7bd;
  --gold:#e2b23c;      --gold-hi:#ffeaa6;   --gold-lo:#8a6210;
  --ink:#1c1c20;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Liberation Sans",Arial,Helvetica,sans-serif;
  font-weight:bold; font-style:italic;
  color:var(--ink);
  background:#e6a92c;        /* only seen for the instant before the video paints */
  -webkit-font-smoothing:none;           /* chase the aliased look */
}

/* ---------- FULL-PAGE BACKGROUND VIDEO ----------------------------------
   Replaces the old diamond-plate wallpaper. Fixed so it never scrolls with
   the page, and pinned behind everything. object-fit:cover crops rather
   than letterboxes, so the gradient always fills any viewport shape.      */
.bg-video{
  position:fixed;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-1;                /* behind all content, but still in flow-free space */
  pointer-events:none;
  user-select:none;
}

.page{
  min-height:100%;
  background:transparent;    /* the video shows through */
  padding:14px 10px 28px;   /* was 0 on the left — content kissed the page edge */
  overflow-x:hidden;
}
.stage{max-width:none;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* ---------- raised grey plaque (brushed metal + outset bevel) ---------- */
.plaque{
  background:url("assets/brushed.png") repeat;
  background-size:256px 256px;
  border:4px solid;
  border-color:var(--frame-hi) var(--frame-lo) var(--frame-lo) var(--frame-hi);
  box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
}
.plaque-in{
  border:3px solid;
  border-color:var(--frame-lo) var(--frame-hi) var(--frame-hi) var(--frame-lo);
}

/* ---------- title banner ---------- */
.banner{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 16px;
}
.wordmark{height:46px;image-rendering:pixelated;display:block}
.ticker-badge{
  background:url("assets/brushed.png");background-size:256px;
  padding:6px 14px;font-size:22px;color:#2a2a2e;
  letter-spacing:1px;
}

/* ---------- HERO ROW ---------- */
/* stretch, not start: the rail matches the TV's height so the row never ends
   in a band of dead background under the shorter of the two columns */
/* column-gap is the space between the TV's right edge and the rail buttons —
   an inch of it. The TV fills the remaining column, so it narrows to suit. */
/* three columns: rail | TV | rail. Both rails carry the same 10px/18px
   margins as the TV so their tops and bottoms land on its visible border. */
.hero{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;
      column-gap:38px;row-gap:16px;align-items:stretch}

/* ---------- AWGE CRT TV (silver) ----------------------------------------
   tv.png is AWGE's border.png with the alpha channel copied verbatim — the
   silhouette and barrel-curved hole are pixel-identical, only the metal was
   recoloured. Measured hole, as % of the 1018x573 frame:
       top 7.16  left 5.60  width 89.19  height 82.90
       (right 5.21, bottom 9.95 — bottom is deeper for the embossed chin)
   The frame keeps its own aspect ratio so those %s stay true at any width.  */
.tvbox{
  position:relative;
  aspect-ratio:1018/573;
  /* LEFT-ALIGNED, not centred — centring is what put an even gap on both
     sides. Now it hugs the page edge and only gives up space on the rail side.
     max-width is the SIZE DIAL; the rail auto-matches whatever you set. */
  width:100%;
  max-width:none;          /* fills the column right up to the rail */
  /* min-width:0 is LOAD-BEARING. A grid `1fr` track is minmax(auto,1fr), and
     `auto` floors at the item's min-content width. With the max-width cap
     removed, the TV's intrinsic 1018px frame became that floor, blew the track
     past the container and shoved the whole rail off-screen. */
  min-width:0;
  margin:10px auto 18px;
}
.tv-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:fill;          /* frame defines the box, so no letterboxing */
  z-index:2;                /* sits OVER the screen and masks its corners */
  pointer-events:none;
  display:block;
  -webkit-user-drag:none;user-select:none;
}
/* the glass: parked in the frame's hole, no bevel of its own — the TV is the
   bevel now. Nudged 0.4% outward on each side so no hairline of page shows
   between video edge and the frame's inner curve. */
#heroScreen{
  position:absolute;
  top:6.76%;left:5.20%;
  width:90.0%;height:83.7%;
  aspect-ratio:auto;        /* the hole dictates the shape, not 21/9 */
  border:0;box-shadow:none;
  z-index:1;
}

/* the 3D cut-out window: raised grey frame with a recessed screen */
.viewport{
  background:url("assets/brushed.png") repeat;background-size:256px;
  border:5px solid;
  border-color:var(--frame-hi) var(--frame-lo) var(--frame-lo) var(--frame-hi);
  box-shadow:0 3px 0 rgba(0,0,0,.4);
  padding:12px;
}
.screen{
  position:relative;
  aspect-ratio:16/10;
  background:#0b0b12;
  /* min-height set here so meme/lore screens keep their own sizing */
  border:4px solid;
  border-color:var(--frame-lo) var(--frame-hi) var(--frame-hi) var(--frame-lo);
  box-shadow:inset 0 0 0 2px #000;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
       opacity:1;transition:opacity .5s ease}
.screen-fallback{
  position:relative;z-index:0;
  color:#ffc94d;font-size:26px;letter-spacing:2px;
  text-shadow:0 0 8px rgba(255,201,77,.5);
}

/* ---------- FIND rail ---------- */
/* The TV carries an 18px bottom margin, so the grid row runs 18px past its
   visible border. Matching it here lands the bottom of INSTAGRAM exactly on
   the TV's bottom edge. */
.rail{display:flex;flex-direction:column;gap:12px;margin:10px 0 18px}
.find-plaque{display:flex;align-items:center;justify-content:center;padding:8px 10px}
.findmark{height:44px;image-rendering:pixelated;display:block}

.gold-panel{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 40%,var(--gold-lo));
  border:4px solid;
  border-color:#fff2c0 #6d4a05 #6d4a05 #fff2c0;
  box-shadow:0 2px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.2);
  color:#2a1c02;
}
.gold-panel.info{padding:12px 10px;text-align:center}
.g-name{font-size:20px;line-height:1.05;color:#241800}
.g-sub{font-size:15px;margin-top:6px;letter-spacing:2px;font-style:italic}
.gold-panel.silo{
  flex:0 0 auto;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;
  line-height:0;            /* kill the inline baseline gap under the image */
  padding:0;
}
/* display:block + zeroed line-height is what actually centres a GIF — flex
   alone leaves it sitting a few px low on the text baseline. */
.silo-img{
  display:block;
  max-width:88%;max-height:88%;
  width:auto;height:auto;
  object-fit:contain;
  margin:0;
}
.silo-fallback{display:none;font-size:80px;filter:brightness(0) saturate(1)}

/* ---------- MUSIC TOGGLE (fixed, matches gold button chrome) ---------- */
.music-toggle{
  position:fixed;left:14px;bottom:14px;z-index:50;
  font-family:inherit;font-weight:bold;font-style:italic;
  font-size:15px;letter-spacing:1px;color:#2a1c02;
  padding:9px 16px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  border:4px solid;
  border-color:#fff2c0 #6d4a05 #6d4a05 #fff2c0;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
}
.music-toggle:hover{filter:brightness(1.08)}
.music-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.music-toggle.on{animation:musicpulse 1.1s ease-in-out infinite}
@keyframes musicpulse{0%,100%{box-shadow:0 3px 0 rgba(0,0,0,.45)}50%{box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 14px rgba(255,224,138,.9)}}

/* ---------- SCROLL HINT ---------- */
.scroll-hint{display:flex;justify-content:center;margin:-2px 0;transition:opacity .35s ease}
.scroll-hint.hide{opacity:0;pointer-events:none}
.scroll-hint span{
  display:inline-block;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  border:4px solid;
  border-color:#fff2c0 #6d4a05 #6d4a05 #fff2c0;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
  color:#2a1c02;font-size:17px;letter-spacing:3px;padding:7px 30px;
  animation:scrollbob 1s ease-in-out infinite;
}
@keyframes scrollbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- GOLD BUTTON ROW ---------- */
.buttons{display:flex;flex-wrap:wrap;gap:12px}
.gbtn{
  flex:1 1 0;min-width:120px;text-align:center;
  text-decoration:none;color:#2a1c02;
  font-size:18px;letter-spacing:1px;
  padding:10px 10px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  border:4px solid;
  border-color:#fff2c0 #6d4a05 #6d4a05 #fff2c0;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
  cursor:pointer;user-select:none;
}
.gbtn:hover{filter:brightness(1.08)}
.gbtn:active{
  transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45);
  border-color:#6d4a05 #fff2c0 #fff2c0 #6d4a05;
}
.gbtn.ca{flex:1 1 100%;font-size:18px;letter-spacing:0}

/* hero video switcher box */
.vid-switch{
  display:block;text-align:center;font-size:18px;letter-spacing:0;
  padding:12px 8px;
}
.vid-switch #vidNum{font-style:normal;opacity:.75}

/* rail buttons + panels sit ABOVE the character so his head can rise behind them */
/* every rail button flexes, so the stack always fills the rail exactly —
   no dead space under it however tall the TV ends up */
.rail .gbtn{
  flex:1 1 0;width:100%;min-width:0;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  min-height:38px;padding:6px 10px;font-size:20px;
}
.rail .gbtn.ca{font-size:18px}
.rail .vid-switch{font-size:17px;display:flex;gap:.4em}
.rail .gold-panel{position:relative;z-index:2}

/* anchored APE character dropped to fill the space between the NEXT VIDEO
   button and the bottom of the rail, standing on the background.
   min-height:0 — it ABSORBS the leftover rail height rather than setting it.
   (It used to force 360px, which was right beside a full-width TV but now
   just pushes a dead gap under the 820px one.) */
.rail-char{
  /* The TV carries an 18px bottom margin, so the grid row ends 18px BELOW the
     TV's visible bottom border. Matching that margin here drops the character's
     feet exactly onto the TV's bottom edge instead of 18px past it. */
  margin-bottom:18px;
  flex:1 1 auto;min-height:0;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:visible;position:relative;z-index:1;pointer-events:none;
}
.rail-char img{
  /* fill as much of the leftover rail as the aspect ratio allows —
     contain, so a square GIF is never stretched */
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  image-rendering:auto;display:block;
}

/* ---------- STATUS BAR ---------- */
.statusbar{
  background:#f2f2f2;color:#111;
  border:3px solid;
  border-color:var(--frame-lo) var(--frame-hi) var(--frame-hi) var(--frame-lo);
  padding:8px 14px;font-size:18px;
}
.statusbar #count{color:#c00;font-style:normal}
.foot{font-size:14px;overflow-wrap:anywhere}

/* ---------- LORE ROW ---------- */
.lore-row,.meme-row{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.lore-plaque{align-self:flex-start;padding:6px 18px;font-size:18px;color:#2a2a2e}
.viewport.wide{padding:12px}
.lore-screen{
  aspect-ratio:auto;background:#0b0b12;color:#ffc94d;
  padding:22px 26px;display:block;
  font-size:19px;line-height:1.5;letter-spacing:.5px;
}
/* floated right with equal breathing room top and bottom so the wrap reads
   symmetrical rather than the text hugging one corner of him */
.lore-char{
  float:right;
  width:34%;max-width:300px;
  margin:4px 0 14px 26px;
  display:block;
  shape-outside:margin-box;
}
.lore-screen::after{content:"";display:block;clear:both}
.lore-screen p{margin-bottom:14px;text-shadow:0 0 6px rgba(255,201,77,.35)}
/* the A-P-E-S initials: body copy is already bold, so <strong> needs its own
   signal — brighter gold + a hotter glow so the acronym reads at a glance */
.lore-screen strong{
  color:#fff3cf;font-style:normal;
  text-shadow:0 0 10px rgba(255,224,138,.85);
}
.lore-screen em{color:#ffe08a;font-style:italic}

/* ---------- MEME STRIP ---------- */
.meme-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.viewport.meme{padding:8px}
.viewport.meme .screen{aspect-ratio:1/1}
.viewport.meme .screen-fallback{font-size:20px}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .rail{flex-direction:row;flex-wrap:wrap}
  .rail>*{flex:1 1 30%}
  .meme-strip{grid-template-columns:repeat(2,1fr)}
  .wordmark{height:38px}
}

/* ================================================================
   ANIMAL PNL SCANNER — matches the diamond-plate chrome exactly:
   recessed black screen, gold bevel input, aliased italic type.
   ================================================================ */
.zoo-row{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.zoo-screen{
  aspect-ratio:auto;                 /* content-height, not a fixed crop */
  display:block;padding:18px 16px;
  color:#ffc94d;
}

/* ---- paste form ---- */
.zoo-label{
  display:block;font-size:15px;letter-spacing:2px;
  color:#ffe08a;margin-bottom:8px;
}
.zoo-inputrow{display:flex;gap:10px;flex-wrap:wrap}
.zoo-input{
  flex:1 1 320px;min-width:0;
  font-family:inherit;font-weight:bold;font-style:italic;
  font-size:17px;letter-spacing:1px;
  color:#2a1c02;background:#ffeec2;
  padding:10px 12px;
  border:4px solid;
  border-color:#6d4a05 #fff2c0 #fff2c0 #6d4a05;   /* inset: recessed field */
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35);
  outline:none;
}
.zoo-input::placeholder{color:#8a7440;opacity:.8}
.zoo-input:focus{background:#fff7dd}
.zoo-go{flex:0 0 auto;min-width:120px;font-size:20px;padding:10px 22px}
.zoo-note{
  margin-top:8px;font-size:13px;letter-spacing:1px;
  color:#c9a24a;font-style:italic;
}

/* ---- BEST PNL CARD ------------------------------------------------------
   pnlcard.png measured with the frame recipe (flood alpha<254, not ==0):
       hole   top 4.00  left 2.86  width 94.29  height 92.00
       mascot starts at 54.1% across and 38.3% down, and overlaps the border,
              so the PNG must sit ON TOP of the content, like the TV frame.
   Card keeps the PNG's native 1032x688 ratio so those %s stay true at any
   width, and type is sized in cqw so it scales with the card, not the page. */
.pnl-card{
  position:relative;
  aspect-ratio:1032/688;
  width:100%;max-width:620px;
  margin:0 auto 18px;
  container-type:inline-size;
}
.pnl-card-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:fill;            /* frame defines the box, so no letterboxing */
  z-index:2;                  /* over the rows — the mascot must not be clipped */
  pointer-events:none;display:block;
  -webkit-user-drag:none;user-select:none;
}
.pnl-card-in{
  position:absolute;
  top:4.00%;left:2.86%;width:94.29%;height:92.00%;
  z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:3.5% 4%;
  overflow:hidden;
}
.pnl-card-title{
  font-size:16px;font-size:4.6cqw;
  letter-spacing:2px;color:#ffd76a;
  text-shadow:0 0 10px rgba(255,201,77,.45);
  margin-bottom:2.5%;
}
/* the headline is the WALLET TOTAL; the best single trade sits under it */
.pnl-card-total{
  padding-right:47%;              /* hold the number clear of the mascot */
  /* 7.4cqw keeps a 4-figure total ("+1,484.29 SOL") on ONE line inside the
     61% of the card that is clear of the mascot */
  font-size:26px;font-size:7.4cqw;line-height:1.05;
  white-space:nowrap;
  font-style:normal;letter-spacing:-1px;color:#7bff6a;
  text-shadow:0 0 14px rgba(123,255,106,.45);
}
.pnl-card-total.neg{color:#ff6a6a;text-shadow:0 0 14px rgba(255,106,106,.4)}

.pnl-card-best{
  padding-right:47%;
  margin-top:4%;
  display:grid;grid-template-columns:auto 1fr;gap:0 3%;
  align-items:baseline;
  color:#ffeec2;
}
.pnl-card-best .lbl{
  grid-column:1 / -1;
  font-size:10px;font-size:2.9cqw;letter-spacing:2px;color:#c9a24a;
  margin-bottom:1%;
}
.pnl-card-best .nm{
  font-size:15px;font-size:5cqw;line-height:1.05;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pnl-card-best .vl{
  grid-column:1;
  font-size:15px;font-size:5cqw;font-style:normal;letter-spacing:0;
  color:#7bff6a;
}
.pnl-card-best .vl.neg{color:#ff6a6a}
.pnl-card-best .an{
  grid-column:2;
  font-size:10px;font-size:2.9cqw;letter-spacing:2px;
  color:#c9a24a;font-style:italic;
}

/* the zero answer is a real result, so it is styled like one */
.zoo-none{
  display:block;text-align:center;color:#c9a24a;
  font-size:15px;letter-spacing:1px;
}

/* ---- status line ---- */
.zoo-status{
  margin-top:16px;padding:12px 14px;
  background:#1a1305;border:3px solid;
  border-color:#6d4a05 #c2a046 #c2a046 #6d4a05;
  font-size:17px;letter-spacing:1px;color:#ffc94d;
}
.zoo-status.working::after{content:"";animation:zoodots 1.1s steps(4,end) infinite}
@keyframes zoodots{0%{content:""}25%{content:" ."}50%{content:" .."}75%{content:" ..."}}
.zoo-status.err{color:#ff6a6a;border-color:#7d0a0a #c24646 #c24646 #7d0a0a;background:#180707}

/* ---- results ---- */
.zoo-results{margin-top:16px}
.zoo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.zoo-stat{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  border:4px solid;
  border-color:#fff2c0 #6d4a05 #6d4a05 #fff2c0;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
  color:#2a1c02;padding:12px 8px;text-align:center;
}
.zoo-k{display:block;font-size:30px;line-height:1.1;letter-spacing:0}
.zoo-v{display:block;font-size:12px;letter-spacing:1px;margin-top:5px;opacity:.85}
.zoo-k.pos{color:#04350a}
.zoo-k.neg{color:#6b0000}

.zoo-window{
  margin-top:12px;font-size:13px;letter-spacing:1px;
  color:#c9a24a;font-style:italic;
}

/* per-token breakdown */
.zoo-table{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.zoo-line{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  background:#1a1305;border:3px solid;
  border-color:#6d4a05 #c2a046 #c2a046 #6d4a05;
  padding:8px 12px;font-size:16px;
}
.zoo-line .zn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoo-line .zt{opacity:.7;font-size:13px}
.zoo-line .zp{font-style:normal;letter-spacing:0}
.zoo-line .zp.pos{color:#5ce65c}
.zoo-line .zp.neg{color:#ff6a6a}

@media (max-width:820px){
  .zoo-stats{grid-template-columns:1fr}
  .zoo-k{font-size:26px}
}