/* =====================================================================
   MAGPIE POWER · zine.css · the house design system
   Loud 90s game-mag paper: screaming display type, halftone dots,
   starbursts, power meters, type-in listings, mail-in coupons.
   ===================================================================== */

:root{
  /* keep in sync with index.html :root — the console's brand block */
  --void:#05060c; --ink:#cfd6e4; --dim:#6b7385;
  --gbgreen:#9bbc0f; --gbdark:#0f380f; --mag:#e54f8a; --plastic:#c8c3b8;
  --pow-yel:#ffd23e; --pow-red:#e3344a; --pow-cyan:#37d2e8; --pow-orange:#ff8a2a;
  --disp:'Arial Black','Arial Bold',Arial,'Helvetica Neue',sans-serif;
  /* zine-only: newsprint */
  --paper:#f2edda; --paper2:#e6dfc6; --pulp:#16131c;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
  background:
    radial-gradient(1100px 700px at 28% 18%, #1a2240 0%, transparent 60%),
    radial-gradient(900px 600px at 78% 78%, #2a1030 0%, transparent 55%),
    var(--void);
  font-family:"Courier New", ui-monospace, Menlo, monospace;
  color:var(--ink);
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
/* the same halftone dot field the console floats in */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(160,180,255,0.10) 1px, transparent 1.6px);
  background-size:14px 14px;}

/* ============================ READER CHROME ============================ */

#mast{position:fixed;top:10px;left:18px;z-index:5;display:flex;align-items:baseline;gap:12px;}
#mast h1{
  font-family:var(--disp);font-style:italic;font-weight:900;
  font-size:clamp(17px,3.4vmin,26px);letter-spacing:.04em;line-height:1;
  color:var(--pow-yel);transform:skewX(-6deg);
  text-shadow:2px 2px 0 #000, 4px 4px 0 var(--pow-red), 0 0 22px rgba(255,210,62,.3);
  -webkit-text-stroke:1px #000;text-transform:uppercase;
}
#mast h1 b{color:var(--gbgreen);font-weight:900;}
#mast .issue{font-family:var(--disp);font-style:italic;font-weight:900;font-size:10px;
  color:#000;background:var(--pow-cyan);padding:3px 9px;letter-spacing:.1em;
  transform:rotate(-2deg) skewX(-8deg);box-shadow:2px 2px 0 #000;text-transform:uppercase;}

#backlink{position:fixed;top:12px;right:16px;z-index:5;
  font-family:var(--disp);font-style:italic;font-weight:900;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:#000;background:var(--pow-yel);padding:7px 12px;box-shadow:3px 3px 0 #000;
  transform:rotate(1deg);}
#backlink:hover{background:var(--gbgreen);}

#rail{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:14px;}
#rail button{
  font-family:var(--disp);font-weight:900;font-size:15px;color:#000;
  background:var(--plastic);border:2px solid #000;border-bottom-width:4px;
  width:42px;height:34px;cursor:pointer;box-shadow:2px 2px 0 #000;
}
#rail button:hover{background:var(--pow-yel);}
#rail button:active{transform:translateY(2px);box-shadow:none;}
#counter{font-family:var(--disp);font-style:italic;font-weight:900;font-size:12px;
  letter-spacing:.14em;color:var(--ink);text-shadow:2px 2px 0 #000;min-width:110px;text-align:center;
  text-transform:uppercase;}
#hint{position:fixed;left:50%;bottom:52px;transform:translateX(-50%);z-index:5;
  font-size:9px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;white-space:nowrap;}

#newsstand{position:fixed;left:18px;bottom:12px;z-index:5;display:flex;gap:6px;}
#newsstand button{font-family:inherit;font-size:9px;letter-spacing:.12em;color:var(--dim);
  background:none;border:1px solid #2a2f3d;padding:4px 8px;cursor:pointer;text-transform:uppercase;}
#newsstand button.on{color:var(--pow-yel);border-color:var(--pow-yel);}

/* ============================ THE BOOK ============================ */

#stage{position:fixed;left:50%;top:calc(50% + 4px);z-index:4;transform-origin:center;}
#book{
  position:relative;width:100%;height:100%;
  perspective:2600px;
  /* paper block edges */
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.65));
}
/* the closed-block paper edges left and right of the spread */
#book::before,#book::after{content:'';position:absolute;top:3px;bottom:3px;width:var(--stackL,0px);
  left:calc(-1 * var(--stackL,0px));z-index:0;
  background:repeating-linear-gradient(to right,#d8d2bc 0 1px,#b8b2a0 1px 2px);}
#book::after{width:var(--stackR,0px);left:auto;right:calc(-1 * var(--stackR,0px));}
#book.at-start::before{display:none;}
#book.at-end::after{display:none;}

.sheet{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-style:preserve-3d;
  transform-origin:left center;
}
#stage[data-mode="single"] .sheet{left:0;width:100%;}

.face{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--paper);
}
.face.back{transform:rotateY(180deg);}
.face.paperback{
  background:
    radial-gradient(circle at 50% 46%, rgba(15,56,15,.07) 0 36%, transparent 37%),
    var(--paper2);
}
.face.paperback::marker{content:none;}

/* spine gutter shading: fronts hinge on their left, backs on their right */
.face::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:40;
  background:linear-gradient(to right, rgba(15,10,20,.22), transparent 7%);
  opacity:calc(.6 + var(--booklift,0) * .9);}
.face.back::before{background:linear-gradient(to left, rgba(15,10,20,.22), transparent 7%);}

/* in-flight shade + travelling sheen, driven by --flip from flip.js */
.face::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:41;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%),
    linear-gradient(to right, rgba(5,6,12,.0), rgba(5,6,12,.42));
  opacity:var(--flip,0);}
.face.back::after{
  background:
    linear-gradient(-105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%),
    linear-gradient(to left, rgba(5,6,12,.0), rgba(5,6,12,.42));}

/* dog-ear: the bottom corner you are invited to grab */
.ear{position:absolute;right:0;bottom:0;width:26px;height:26px;z-index:42;pointer-events:none;
  background:linear-gradient(135deg, transparent 49%, rgba(15,10,20,.18) 50%, rgba(15,10,20,.32));
  opacity:.0;transition:opacity .25s;}
.sheet:hover .ear{opacity:1;}

/* ============================ PAGES ============================ */

.page{
  position:absolute;inset:0;
  width:420px;height:560px;
  color:var(--pulp);
  font-size:10px;line-height:1.5;
  padding:16px 18px 30px;
  background:var(--paper);
}
.page.dark{background:var(--void);color:var(--ink);}
.page.bleed{padding:0;}

/* running footer */
.folio{position:absolute;left:0;right:0;bottom:0;height:20px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;font-family:var(--disp);font-style:italic;font-weight:900;
  font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(22,19,28,.55);}
.page.dark .folio{color:rgba(207,214,228,.4);}
.folio b{font-size:9px;}

/* ---------- type ---------- */

.kick{display:inline-block;font-family:var(--disp);font-style:italic;font-weight:900;
  font-size:9px;letter-spacing:.14em;color:#fff;background:var(--pulp);
  padding:2px 9px;transform:skewX(-8deg);text-transform:uppercase;}
.kick.red{background:var(--pow-red);}
.kick.cyan{background:var(--pow-cyan);color:#000;}
.kick.grn{background:var(--gbdark);color:var(--gbgreen);}

.mph1{font-family:var(--disp);font-style:italic;font-weight:900;line-height:.95;
  text-transform:uppercase;transform:skewX(-6deg);letter-spacing:.01em;
  font-size:30px;color:var(--pow-yel);
  text-shadow:2px 2px 0 #000, 4px 4px 0 var(--pow-red);
  -webkit-text-stroke:1px #000;margin:8px 0 6px;}
.mph1.red{color:var(--pow-red);text-shadow:2px 2px 0 #000, 4px 4px 0 var(--pow-yel);}
.mph1.cyan{color:var(--pow-cyan);text-shadow:2px 2px 0 #000, 4px 4px 0 var(--mag);}
.mph1.grn{color:var(--gbgreen);text-shadow:2px 2px 0 #000, 4px 4px 0 var(--gbdark);}
.mph2{font-family:var(--disp);font-style:italic;font-weight:900;font-size:15px;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.05;margin:6px 0 4px;}
.mph3{font-family:var(--disp);font-weight:900;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;margin:4px 0 2px;}

.deck{font-family:var(--disp);font-weight:700;font-size:10.5px;line-height:1.45;
  letter-spacing:.02em;}
.bodytxt{font-size:9.5px;line-height:1.55;}
.bodytxt p{margin:0 0 7px;}
.bodytxt .lead{float:left;font-family:var(--disp);font-weight:900;font-size:30px;
  line-height:.85;padding:2px 5px 0 0;}

/* ---------- furniture ---------- */

.rule{border:none;border-top:3px solid var(--pulp);margin:6px 0;}
.rule.thin{border-top-width:1px;}

.burst{display:inline-block;font-family:var(--disp);font-style:italic;font-weight:900;
  color:#000;background:var(--pow-cyan);padding:3px 10px;
  transform:rotate(-2deg) skewX(-8deg);box-shadow:3px 3px 0 #000;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.burst.yel{background:var(--pow-yel);}
.burst.red{background:var(--pow-red);color:#fff;}

/* the console's own starburst polygon, borrowed from the FBA sticker */
.starburst{
  position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:110px;height:110px;z-index:20;gap:0;text-align:center;
  background:radial-gradient(circle at 38% 32%, #ffe98a 0%, var(--pow-yel) 55%, #f5a623 100%);
  clip-path:polygon(50% 0%,57.9% 9.9%,69.1% 4.3%,72.7% 16.3%,85.4% 14.6%,84% 27.3%,95.7% 30.9%,89.9% 42.1%,100% 50%,89.9% 57.9%,95.7% 69.1%,84% 72.7%,85.4% 85.4%,72.7% 84%,69.1% 95.7%,57.9% 89.9%,50% 100%,42.1% 89.9%,30.9% 95.7%,27.3% 84%,14.6% 85.4%,16% 72.7%,4.3% 69.1%,10.1% 57.9%,0% 50%,10.1% 42.1%,4.3% 30.9%,16% 27.3%,14.6% 14.6%,27.3% 16%,30.9% 4.3%,42.1% 10.1%);
  transform:rotate(-12deg);
  font-family:var(--disp);font-style:italic;font-weight:900;text-transform:uppercase;
  color:var(--pow-red);line-height:1.1;
}
.starburst .s-top{font-size:8px;color:#7a1220;}
.starburst .s-big{font-size:13px;text-shadow:1px 1px 0 #fff;}
.starburst.red{background:radial-gradient(circle at 38% 32%, #ff8a93 0%, var(--pow-red) 55%, #9c1626 100%);color:#fff;}
.starburst.red .s-top{color:#ffd9dd;}
.starburst.red .s-big{text-shadow:1px 1px 0 #000;}

/* halftone field for paper pages */
.halfto{background-image:radial-gradient(rgba(22,19,28,.16) 1px, transparent 1.5px);
  background-size:7px 7px;}

/* ---------- screenshots ---------- */

.gbshot{display:inline-block;background:var(--plastic);padding:7px 7px 4px;
  border:2px solid var(--pulp);box-shadow:3px 3px 0 rgba(22,19,28,.8);}
.gbshot canvas{display:block;image-rendering:pixelated;border:3px solid var(--gbdark);
  background:var(--gbgreen);}
.gbshot .cap{font-family:var(--disp);font-weight:900;font-size:6.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pulp);text-align:center;padding-top:3px;}

/* ---------- review furniture ---------- */

.gamecard{border:2px solid var(--pulp);background:#fff;box-shadow:3px 3px 0 rgba(22,19,28,.75);
  display:flex;flex-direction:column;overflow:hidden;}
.gamecard .bar{height:14px;display:flex;align-items:center;padding:0 6px;
  font-family:var(--disp);font-style:italic;font-weight:900;font-size:8.5px;color:#fff;
  letter-spacing:.06em;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,.6);}
.gamecard .inner{display:flex;gap:6px;padding:5px 6px 6px;}
.gamecard .blurb{font-size:7.8px;line-height:1.35;}
.gamecard canvas{display:block;image-rendering:pixelated;border:2px solid var(--gbdark);flex-shrink:0;}

.powmeter{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:1px 5px;align-items:center;margin-top:2px;}
.powmeter .lbl{font-family:var(--disp);font-weight:900;font-size:5.8px;letter-spacing:.1em;
  text-transform:uppercase;}
.powmeter .cells{display:flex;gap:2px;}
.powmeter .cells i{width:8px;height:6px;background:#d9d2ba;border:1px solid var(--pulp);}
.powmeter .cells i.on{background:var(--pow-red);}

.protip{border:3px solid var(--pulp);background:var(--pow-yel);padding:7px 9px 8px;
  box-shadow:4px 4px 0 var(--pulp);position:relative;}
.protip .tt{font-family:var(--disp);font-style:italic;font-weight:900;font-size:11px;
  letter-spacing:.06em;color:var(--pow-red);text-shadow:1px 1px 0 #fff;text-transform:uppercase;}
.protip p{font-size:8.5px;line-height:1.45;margin-top:2px;}

/* ---------- code corner ---------- */

.typein{background:var(--pulp);color:var(--gbgreen);border:2px solid var(--pulp);
  font-size:8px;line-height:1.42;padding:8px 9px;white-space:pre;overflow:hidden;
  box-shadow:3px 3px 0 rgba(22,19,28,.7);}
.typein .ln{color:#5a6477;}
.typein b{color:var(--pow-yel);font-weight:700;}

.apiref{font-size:8px;line-height:1.5;white-space:pre;background:#fff;
  border:2px solid var(--pulp);padding:7px 9px;box-shadow:3px 3px 0 rgba(22,19,28,.7);}
.apiref b{font-family:var(--disp);font-size:8px;letter-spacing:.08em;}

/* ---------- hall of fables ---------- */

.crt{background:var(--gbgreen);border:4px solid var(--gbdark);padding:8px 10px;
  color:var(--gbdark);box-shadow:inset 0 0 0 2px #8bac0f, 3px 3px 0 rgba(22,19,28,.7);}
.crt .crth{font-family:var(--disp);font-weight:900;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:2px solid var(--gbdark);padding-bottom:3px;margin-bottom:4px;}
.crt table{width:100%;border-collapse:collapse;font-size:8.5px;font-weight:700;}
.crt td{padding:1px 0;}
.crt td:last-child{text-align:right;}

/* ---------- ads, coupons, stamps ---------- */

.adpage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;height:100%;}

.clip{border:3px dashed var(--pulp);padding:10px 12px;position:relative;background:#fff;}
.clip::before{content:'✂';position:absolute;top:-12px;left:18px;font-size:15px;
  background:var(--paper);padding:0 4px;}

.stamp{display:inline-block;font-family:var(--disp);font-weight:900;font-size:13px;
  letter-spacing:.22em;color:var(--pow-red);border:3px double var(--pow-red);
  padding:3px 10px;transform:rotate(-8deg);text-transform:uppercase;opacity:.85;}

.specs{width:100%;border-collapse:collapse;font-size:8.5px;}
.specs td{border:1px solid var(--pulp);padding:3px 6px;vertical-align:top;}
.specs td:first-child{font-family:var(--disp);font-weight:900;font-size:7.5px;
  letter-spacing:.08em;text-transform:uppercase;background:var(--paper2);width:34%;}

.dpadrow{display:flex;gap:8px;align-items:center;}
.keycap{display:inline-block;border:2px solid var(--pulp);border-bottom-width:4px;
  background:#fff;font-family:var(--disp);font-weight:900;font-size:8px;
  padding:2px 6px;border-radius:3px;text-transform:uppercase;}

[data-goto]{cursor:pointer;}
.tocrow{display:flex;align-items:baseline;gap:6px;padding:3px 0;border-bottom:1px dotted rgba(22,19,28,.4);}
.tocrow:hover .toct{color:var(--pow-red);}
.tocrow .tocn{font-family:var(--disp);font-style:italic;font-weight:900;font-size:13px;
  color:var(--pow-red);min-width:22px;}
.tocrow .toct{font-family:var(--disp);font-weight:900;font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;}
.tocrow .dots{flex:1;border-bottom:2px dotted rgba(22,19,28,.5);transform:translateY(-3px);}
.tocrow .tocd{font-size:7.5px;color:#4a4438;max-width:150px;text-align:right;}

/* barcode block for covers */
.barcodebox{display:inline-flex;flex-direction:column;align-items:center;background:#fff;
  padding:4px 6px 2px;border:1px solid #000;}
.barcodebox canvas{display:block;}
.barcodebox span{font-size:6px;letter-spacing:.3em;color:#000;}

@media(max-width:700px){
  #mast{top:8px;left:12px;}
  #mast h1{font-size:15px;}
  #mast .issue{display:none;}
  #backlink{font-size:8.5px;padding:5px 8px;top:8px;right:10px;}
  #hint{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .sheet{transition:none !important;}
}