/* era-2020.css: styles for when the time machine is set to 2020. only applies when <html data-era="2020">. */
/* ============================================================
   2020 :: "PHANTOM MENU" era
   sleek jrpg pause-menu ui: red / black / white, slanted
   panels, ransom-note letters, halftone dots, star bursts.
   (style only, no game assets. everything is css shapes)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Archivo:ital,wght@0,400;0,600;0,800;1,400;1,800&display=swap');

html[data-era="2020"] {
  --p5r: #e60012;
  --p5r2: #d4001a;
  --p5k: #0a0a0a;
  --p5w: #ffffff;
  --p5dots: radial-gradient(circle, rgba(230, 0, 18, .55) 1.4px, transparent 1.9px);
  --p5dotsk: radial-gradient(circle, rgba(0, 0, 0, .35) 1.6px, transparent 2.1px);
  --p5pop: cubic-bezier(.25, 1.8, .45, 1);
  overflow-x: hidden;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><polygon points='2,2 24,10 14,13 19,24 15,25 10,15 4,21' fill='%23e60012' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/></svg>") 2 2, auto;
}
html[data-era="2020"] a:not(#time-machine *):hover,
html[data-era="2020"] button:not(#time-machine *):hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><polygon points='13,1 16,9 25,9 18,15 21,24 13,19 5,24 8,15 1,9 10,9' fill='%23fff' stroke='%23e60012' stroke-width='2' stroke-linejoin='round'/></svg>") 13 13, pointer;
}

/* ---------- the page: black, with big red slashes ---------- */
html[data-era="2020"] body {
  color: #f4f4f4;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  background-color: var(--p5k);
  background-image:
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse at 20% 0%, #2a0004 0%, var(--p5k) 55%);
  background-attachment: fixed;
}
/* giant red slice across the screen */
html[data-era="2020"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--p5r), var(--p5r2));
  clip-path: polygon(0 58%, 38% 44%, 36% 49%, 100% 18%, 100% 40%, 62% 56%, 64% 52%, 0 84%);
}
/* halftone + star burst */
html[data-era="2020"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 8deg at 88% 12%, rgba(230, 0, 18, .16) 0 5deg, transparent 5deg 16deg),
    var(--p5dots) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(circle at 88% 12%, #000 0, rgba(0, 0, 0, .7) 30%, transparent 65%);
  mask-image: radial-gradient(circle at 88% 12%, #000 0, rgba(0, 0, 0, .7) 30%, transparent 65%);
}

html[data-era="2020"] a:not(#time-machine *) { color: #ff3347; font-weight: 800; text-decoration: none; box-shadow: inset 0 -2px 0 currentColor; transition: color .12s, background .12s; }
html[data-era="2020"] a:not(#time-machine *):visited { color: #ff6b7a; }
html[data-era="2020"] a:not(#time-machine *):hover { color: #000; background: #fff; text-shadow: none; }
html[data-era="2020"] ::selection { background: var(--p5r); color: #fff; }
html[data-era="2020"] ::-webkit-scrollbar { width: 14px; }
html[data-era="2020"] ::-webkit-scrollbar-track { background: #000; }
html[data-era="2020"] ::-webkit-scrollbar-thumb { background: var(--p5r); border: 3px solid #000; }

/* ---------- frame ---------- */
html[data-era="2020"] #wrapper {
  width: 1060px;
  max-width: calc(100% - 24px);
  margin: 18px auto 50px;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ---------- header: red slab, ransom-note title ---------- */
html[data-era="2020"] #header {
  position: relative;
  isolation: isolate;
  padding: 26px 20px 30px;
  border: 0;
  background: none;
}
html[data-era="2020"] #header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--p5dotsk) 0 0 / 9px 9px,
    linear-gradient(100deg, var(--p5r) 0 70%, var(--p5r2) 70%);
  clip-path: polygon(0 6%, 22% 0, 23% 4%, 100% 0, 98% 82%, 100% 100%, 64% 92%, 62% 97%, 2% 100%);
}
html[data-era="2020"] #header::after {
  content: "";
  position: absolute;
  inset: 10px -8px -12px 12px;
  z-index: -2;
  background: #000;
  clip-path: polygon(0 6%, 22% 0, 23% 4%, 100% 0, 98% 82%, 100% 100%, 64% 92%, 62% 97%, 2% 100%);
}
html[data-era="2020"] .header-gifs { gap: 18px; align-items: center; }
html[data-era="2020"] .header-gifs img { filter: drop-shadow(4px 4px 0 #000) grayscale(.35) contrast(1.2); }
html[data-era="2020"] #header .title,
html[data-era="2020"] .enter-box .title {
  font-family: "Anton", Impact, sans-serif;
  font-size: 60px;
  line-height: 1.15;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: rotate(-3deg);
  animation: none;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0, 0, 0, .35);
}
/* ransom-note letters (wrapped by js/era-2020.js) */
html[data-era="2020"] .p5l {
  display: inline-block;
  padding: 0 .07em;
  margin: 0 .015em;
  line-height: 1;
  text-shadow: none;
  transition: transform .15s var(--p5pop);
}
html[data-era="2020"] .p5l.p5v0 { background: #000; color: #fff; transform: rotate(-6deg); clip-path: polygon(0 4%, 100% 0, 94% 100%, 6% 94%); }
html[data-era="2020"] .p5l.p5v1 { background: #fff; color: #000; font-family: "Archivo Black", sans-serif; font-size: .78em; transform: rotate(5deg) translateY(-.08em); }
html[data-era="2020"] .p5l.p5v2 { color: #000; font-size: 1.12em; transform: rotate(-2deg); text-shadow: 3px 3px 0 #fff; }
html[data-era="2020"] .p5l.p5v3 { background: #fff; color: var(--p5r); font-size: .9em; transform: rotate(-8deg) translateY(.06em); clip-path: polygon(8% 0, 100% 6%, 92% 100%, 0 92%); }
html[data-era="2020"] .p5l.p5v4 { background: #000; color: var(--p5r); font-family: "Bebas Neue", sans-serif; font-size: 1.05em; transform: rotate(7deg); }
html[data-era="2020"] .p5sp { display: inline; }
html[data-era="2020"] .p5w { display: inline-block; white-space: nowrap; }
html[data-era="2020"] .title:hover .p5l:is(.p5v0, .p5v2, .p5v4) { transform: rotate(4deg) scale(1.08); }
html[data-era="2020"] .title:hover .p5l:is(.p5v1, .p5v3) { transform: rotate(-5deg) scale(.95); }

html[data-era="2020"] #header .subtitle {
  display: table;
  margin: 18px auto 0;
  padding: 5px 18px;
  background: #000;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  text-shadow: none;
  transform: rotate(1.5deg);
  clip-path: polygon(0 0, 100% 10%, 98% 100%, 2% 90%);
}

/* ---------- marquee: a slanted ticker band ---------- */
html[data-era="2020"] .marquee-strip {
  margin: 14px -6px 18px;
  padding: 4px 0;
  border: 0;
  background: #fff;
  color: #000;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  transform: rotate(-1deg);
  clip-path: polygon(0 10%, 100% 0, 100% 88%, 0 100%);
  box-shadow: inset 0 -5px 0 var(--p5r);
}

/* ---------- layout ---------- */
html[data-era="2020"] #layout { gap: 26px; align-items: flex-start; }
html[data-era="2020"] #sidebar {
  width: 250px;
  padding: 6px 0 10px 18px;
  border: 0;
  background: none;
}
html[data-era="2020"] #content {
  padding: 30px 30px 40px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 3px, transparent 3px 12px),
    rgba(8, 8, 8, .94);
  clip-path: polygon(0 0, 100% 16px, 100% 100%, 0 calc(100% - 16px));
  border-left: 6px solid #fff;
  line-height: 1.6;
}

/* ---------- PAUSE MENU nav ---------- */
html[data-era="2020"] .nav-title {
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 22px -6px;
  text-align: left;
  font-family: "Anton", Impact, sans-serif;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 4px 4px 0 var(--p5r), 7px 7px 0 #000;
  transform: rotate(-6deg) skewX(-8deg);
}
html[data-era="2020"] #nav { margin: 6px 0 26px; }
html[data-era="2020"] #nav li { position: relative; margin: 2px 0; }
html[data-era="2020"] #sidebar #nav li:nth-child(2) { margin-left: 16px; }
html[data-era="2020"] #sidebar #nav li:nth-child(3) { margin-left: 6px; }
html[data-era="2020"] #sidebar #nav li:nth-child(4) { margin-left: 22px; }
html[data-era="2020"] #sidebar #nav li:nth-child(5) { margin-left: 2px; }
html[data-era="2020"] #sidebar #nav li:nth-child(6) { margin-left: 14px; }
html[data-era="2020"] #sidebar #nav li:nth-child(7) { margin-left: 26px; }
html[data-era="2020"] #sidebar #nav li:nth-child(8) { margin-left: 8px; }
html[data-era="2020"] #nav a {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 4px 18px 2px 12px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: .5px;
  text-transform: uppercase;
  transform: skewX(-10deg) rotate(-2deg);
  transform-origin: 20% 50%;
  transition: transform .16s var(--p5pop), color .1s;
}
html[data-era="2020"] #nav li:nth-child(even) a { transform: skewX(-10deg) rotate(1.5deg); }
html[data-era="2020"] #nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  color: transparent;
  clip-path: polygon(0 10%, 97% 0, 100% 84%, 6% 100%);
  transition: background .1s;
}
html[data-era="2020"] #nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #fff;
  clip-path: polygon(0 10%, 97% 0, 100% 84%, 6% 100%);
  transform: translate(0, 0);
  opacity: 0;
  transition: transform .16s var(--p5pop), background .1s, opacity .1s;
}
html[data-era="2020"] #nav li:nth-child(even) a::before,
html[data-era="2020"] #nav li:nth-child(even) a::after { clip-path: polygon(3% 0, 100% 12%, 95% 100%, 0 88%); }
html[data-era="2020"] #nav a:hover,
html[data-era="2020"] #nav a:focus-visible {
  color: #000;
  background: none;
  text-shadow: none;
  transform: skewX(-10deg) rotate(-5deg) scale(1.12) translateX(6px);
  outline: 0;
}
html[data-era="2020"] #nav a:hover::before,
html[data-era="2020"] #nav a:focus-visible::before { content: ""; background: #fff; }
html[data-era="2020"] #nav a:hover::after,
html[data-era="2020"] #nav a:focus-visible::after { opacity: 1; background: var(--p5r); transform: translate(7px, 6px) rotate(2deg); }
html[data-era="2020"] #nav a.here {
  color: #fff;
  transform: skewX(-10deg) rotate(-4deg) scale(1.08) translateX(4px);
}
html[data-era="2020"] #nav a.here::before { content: ""; background: var(--p5r); }
html[data-era="2020"] #nav a.here::after { opacity: 1; background: #fff; transform: translate(6px, 5px); box-shadow: none; }
html[data-era="2020"] #nav a.here:hover { color: #000; }
html[data-era="2020"] #nav a.here:hover::before { background: #fff; }
html[data-era="2020"] #nav a.here:hover::after { background: var(--p5r); }
/* jagged pointer arrow */
html[data-era="2020"] #sidebar #nav li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 18px;
  height: 24px;
  margin-top: -12px;
  background: var(--p5r);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
  transform: scale(0) rotate(-40deg);
  transition: transform .16s var(--p5pop);
}
html[data-era="2020"] #sidebar #nav li:hover::before { transform: scale(1) rotate(-6deg); background: #fff; }
html[data-era="2020"] #sidebar #nav li:has(a.here)::before { transform: scale(1) rotate(-6deg); }

/* ---------- angled cards (panels, side boxes, guestbook...) ---------- */
html[data-era="2020"] .panel,
html[data-era="2020"] .side-box,
html[data-era="2020"] .gb-entry,
html[data-era="2020"] .webring,
html[data-era="2020"] .enter-box {
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(8px 8px 0 var(--p5r));
}
html[data-era="2020"] .panel::before,
html[data-era="2020"] .side-box::before,
html[data-era="2020"] .gb-entry::before,
html[data-era="2020"] .webring::before,
html[data-era="2020"] .enter-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 40%),
    #0d0d0d;
  clip-path: polygon(1.5% 3%, 99% 0, 100% 92%, 96% 100%, 0 97%);
}
html[data-era="2020"] .panel::after,
html[data-era="2020"] .side-box::after,
html[data-era="2020"] .gb-entry::after,
html[data-era="2020"] .webring::after,
html[data-era="2020"] .enter-box::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -2;
  background: #fff;
  clip-path: polygon(1.5% 3%, 99% 0, 100% 92%, 96% 100%, 0 97%);
}

html[data-era="2020"] .panel { padding: 18px 24px; margin: 26px 8px 30px 4px; }
html[data-era="2020"] .panel.orange { filter: drop-shadow(-8px 9px 0 var(--p5r)); }
html[data-era="2020"] .panel.orange::before {
  background: var(--p5dots) 0 0 / 12px 12px, #0d0d0d;
  background-position: right top;
  clip-path: polygon(0 0, 97% 4%, 100% 100%, 3% 96%);
}
html[data-era="2020"] .panel.orange::after { clip-path: polygon(0 0, 97% 4%, 100% 100%, 3% 96%); background: var(--p5r); inset: -6px; }
html[data-era="2020"] .panel.dashed::before {
  background:
    repeating-linear-gradient(-45deg, rgba(230, 0, 18, .12) 0 10px, transparent 10px 20px),
    #0d0d0d;
}

/* sidebar boxes */
html[data-era="2020"] .side-box {
  margin: 30px 8px 22px 0;
  padding: 18px 12px 12px;
  font-size: 13px;
  text-align: center;
}
html[data-era="2020"] .side-box:nth-of-type(odd) { transform: rotate(-1.2deg); }
html[data-era="2020"] .side-box:nth-of-type(even) { transform: rotate(1deg); filter: drop-shadow(-7px 7px 0 var(--p5r)); }
html[data-era="2020"] .box-title {
  display: table;
  margin: -32px auto 12px;
  padding: 3px 16px 2px;
  border: 0;
  background: var(--p5r);
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: rotate(-4deg) skewX(-8deg);
  clip-path: polygon(0 12%, 100% 0, 96% 100%, 4% 88%);
}
html[data-era="2020"] .side-box:nth-of-type(even) .box-title { background: #fff; color: #000; transform: rotate(3deg) skewX(-8deg); }
html[data-era="2020"] .side-box img { filter: drop-shadow(3px 3px 0 var(--p5r)); max-width: 100%; height: auto; }

/* ---------- headings ---------- */
html[data-era="2020"] h1, html[data-era="2020"] h2, html[data-era="2020"] h3 { font-weight: normal; }
html[data-era="2020"] #content h1,
html[data-era="2020"] #portal h1 {
  position: relative;
  isolation: isolate;
  display: table;
  margin: 8px auto 26px;
  padding: 6px 34px 4px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 46px;
  line-height: 1.15;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 3px 3px 0 #000, 6px 6px 0 #000;
  transform: rotate(-2.5deg) skewX(-9deg);
}
html[data-era="2020"] #content h1::before,
html[data-era="2020"] #portal h1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--p5dotsk) 0 0 / 8px 8px, var(--p5r);
  clip-path: polygon(0 14%, 30% 0, 31% 8%, 100% 0, 97% 86%, 100% 100%, 4% 94%);
}
html[data-era="2020"] #content h1::after,
html[data-era="2020"] #portal h1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #fff;
  transform: translate(10px, 8px) rotate(1.5deg);
  clip-path: polygon(0 14%, 30% 0, 31% 8%, 100% 0, 97% 86%, 100% 100%, 4% 94%);
}

html[data-era="2020"] #content h2 {
  display: table;
  margin: 34px 0 14px -10px;
  padding: 4px 36px 3px 18px;
  background: linear-gradient(100deg, #fff 0 calc(100% - 22px), var(--p5r) calc(100% - 22px));
  color: #000;
  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(230, 0, 18, .35);
  transform: rotate(-1.5deg) skewX(-8deg);
  clip-path: polygon(0 6%, 100% 0, 97% 100%, 1.5% 92%);
}
html[data-era="2020"] #content h3 {
  display: table;
  margin: 18px 0 8px;
  padding: 2px 14px;
  background: #000;
  color: #fff;
  border-left: 6px solid var(--p5r);
  font-family: "Bebas Neue", sans-serif;
  font-size: 27px;
  letter-spacing: 1.5px;
  box-shadow: 4px 4px 0 var(--p5r);
  transform: rotate(1deg);
}

/* ---------- type helpers ---------- */
html[data-era="2020"] .glow-green { color: #fff; font-weight: 800; text-shadow: 2px 2px 0 var(--p5r); }
html[data-era="2020"] .glow-purple { color: #fff; font-style: italic; font-weight: 800; text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--p5r); }
html[data-era="2020"] .glow-orange { color: #ff3347; text-shadow: none; }
html[data-era="2020"] .rainbow {
  background: linear-gradient(100deg, #fff 0 40%, #ff3347 45%, #fff 50%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  animation: p5-shine 2.6s ease-in-out infinite;
}
@keyframes p5-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
html[data-era="2020"] .small { font-size: 13px; }
html[data-era="2020"] .tiny { font-size: 11px; letter-spacing: .3px; }
html[data-era="2020"] .pixel { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.7; }
html[data-era="2020"] .terminal { font-family: "Bebas Neue", sans-serif; font-size: 22px; letter-spacing: 1px; line-height: 1.35; }
html[data-era="2020"] .papyrus { font-family: "Anton", Impact, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
html[data-era="2020"] .times { font-family: "Archivo", sans-serif; font-style: italic; }
html[data-era="2020"] #content [style*="color:#ff7518"] { color: #ff3347 !important; }
html[data-era="2020"] #content [style*="color:#9b30ff"] { color: #fff !important; text-shadow: 2px 2px 0 var(--p5r); }
html[data-era="2020"] #content [style*="color:#ffae42"] { color: #fff !important; text-shadow: 3px 3px 0 var(--p5r); }
html[data-era="2020"] .trail {
  color: #fff !important;
  font-family: "Anton", Impact, sans-serif;
  font-size: 20px;
  text-shadow: 2px 2px 0 var(--p5r), 3px 3px 0 #000;
}
html[data-era="2020"] .trail:nth-child(odd) { color: var(--p5r) !important; text-shadow: 2px 2px 0 #fff; }

/* gifs: sharp offset shadows */
html[data-era="2020"] .gif-row { gap: 18px; margin: 18px 0; }
html[data-era="2020"] .gif-row img:not(.sticker) { filter: drop-shadow(5px 5px 0 var(--p5r)); }
html[data-era="2020"] img.sticker {
  background: #fff;
  border: 0;
  padding: 5px;
  box-shadow: 7px 7px 0 var(--p5r), 7px 7px 0 3px #000;
  transform: rotate(-3deg);
}
html[data-era="2020"] #content .divider-img { display: none; }
html[data-era="2020"] .divider-img { filter: grayscale(1) brightness(1.6) contrast(1.4) drop-shadow(3px 3px 0 var(--p5r)); }
html[data-era="2020"] hr.spooky { height: 8px; background: repeating-linear-gradient(-45deg, var(--p5r) 0 8px, #000 8px 16px); box-shadow: none; border: 0; transform: skewX(-20deg); }

/* ---------- myspace tables: stat sheets ---------- */
html[data-era="2020"] table.myspace { border-collapse: separate; border-spacing: 0 7px; font-size: 14px; }
html[data-era="2020"] table.myspace td,
html[data-era="2020"] table.myspace th { border: 0; padding: 9px 12px; }
html[data-era="2020"] table.myspace th {
  background: var(--p5r);
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 1.2px;
  line-height: 1.1;
  vertical-align: middle;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
  padding-right: 26px;
}
html[data-era="2020"] table.myspace tr:nth-child(even) th { background: #fff; color: #000; }
html[data-era="2020"] table.myspace td { background: #161616; border-bottom: 2px solid #fff; }
html[data-era="2020"] table.myspace tr:nth-child(even) td { background: #1f1f1f; }
html[data-era="2020"] table.myspace tr:hover td { background: #2a0408; }

/* ---------- counter + countdown: stat readouts ---------- */
html[data-era="2020"] .counter { gap: 3px; padding: 4px 2px; background: none; border: 0; }
html[data-era="2020"] .counter span {
  width: 22px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 26px;
  line-height: 34px;
  color: #000;
  background: #fff;
  text-shadow: none;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  transform: rotate(-4deg);
}
html[data-era="2020"] .counter span:nth-child(even) { background: var(--p5r); color: #fff; transform: rotate(3deg) translateY(2px); }
html[data-era="2020"] .countdown {
  display: inline-block;
  font-family: "Anton", Impact, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 3px 3px 0 var(--p5r);
  transform: rotate(-3deg) skewX(-8deg);
  margin: 4px 0 6px;
}
html[data-era="2020"] #mood {
  display: inline-block;
  padding: 2px 10px;
  background: #fff;
  color: #000;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  font-style: normal;
  letter-spacing: 1px;
  text-shadow: none;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--p5r);
}

/* ---------- buttons: angled tags ---------- */
html[data-era="2020"] .btn {
  position: relative;
  display: inline-block;
  padding: 7px 22px 6px 14px;
  border: 0;
  background: linear-gradient(105deg, #fff 0 calc(100% - 14px), var(--p5r) calc(100% - 14px));
  color: #000;
  font-family: "Anton", Impact, sans-serif;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  clip-path: polygon(0 8%, 100% 0, 95% 100%, 3% 92%);
  transform: rotate(-2deg);
  transition: transform .14s var(--p5pop), background .1s, color .1s;
}
html[data-era="2020"] .btn.purple {
  background: linear-gradient(105deg, var(--p5r) 0 calc(100% - 14px), #fff calc(100% - 14px));
  color: #fff;
  transform: rotate(1.5deg);
}
html[data-era="2020"] .btn:hover,
html[data-era="2020"] .btn:focus-visible {
  background: linear-gradient(105deg, var(--p5r) 0 calc(100% - 14px), #000 calc(100% - 14px));
  color: #fff;
  transform: rotate(-5deg) scale(1.1);
  outline: 0;
}
html[data-era="2020"] .btn.purple:hover,
html[data-era="2020"] .btn.purple:focus-visible { background: linear-gradient(105deg, #fff 0 calc(100% - 14px), #000 calc(100% - 14px)); color: #000; transform: rotate(4deg) scale(1.1); }
html[data-era="2020"] .btn:active { transform: rotate(0) scale(.94); }
html[data-era="2020"] #music-box .btn { width: 100%; margin: 4px 0; text-align: center; }
html[data-era="2020"] #now-playing {
  font-family: "Bebas Neue", sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 8px;
  padding: 2px 6px;
  border-top: 2px solid var(--p5r);
}

/* ---------- 88x31 buttons: mini tags ---------- */
html[data-era="2020"] .b88 {
  border: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px;
  letter-spacing: .6px;
  line-height: 1.05;
  margin: 4px 3px;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  transition: transform .14s var(--p5pop), filter .14s;
  box-shadow: none;
}
html[data-era="2020"] .b88.b-orange { background: var(--p5r); color: #fff; }
html[data-era="2020"] .b88.b-purple { background: repeating-linear-gradient(-45deg, #000 0 6px, #2a0004 6px 12px); color: #fff; }
html[data-era="2020"] .b88.b-black  { background: #000; color: #ff3347; box-shadow: inset 0 0 0 2px #fff; }
html[data-era="2020"] .b88.b-blue   { background: #fff; color: #000; }
html[data-era="2020"] .b88.b-white  { background: #fff; color: var(--p5r); box-shadow: inset 0 -5px 0 #000; }
html[data-era="2020"] .b88.b-red    { background: linear-gradient(100deg, var(--p5r) 0 60%, #000 60%); color: #fff; }
html[data-era="2020"] .b88.b-pink   { background: #ffd6da; color: #000; }
html[data-era="2020"] .b88.b-lain   { background: #000; color: #fff; font-family: "Bebas Neue", sans-serif; font-size: 15px; box-shadow: inset 0 0 0 2px var(--p5r); }
html[data-era="2020"] .b88:hover { transform: rotate(-4deg) scale(1.12); filter: none; }
html[data-era="2020"] a.b88:not(#time-machine *) { color: #fff; box-shadow: none; font-weight: normal; }
html[data-era="2020"] a.b88:hover { background: #fff; color: #000; }

/* ---------- footer ---------- */
html[data-era="2020"] #footer {
  position: relative;
  margin-top: 26px;
  padding: 34px 20px 22px;
  border: 0;
  font-size: 12px;
  background:
    var(--p5dots) 0 0 / 10px 10px,
    #000;
  clip-path: polygon(0 22px, 30% 0, 31% 10px, 100% 0, 100% 100%, 0 100%);
  border-bottom: 6px solid var(--p5r);
}
html[data-era="2020"] #footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background: var(--p5r);
  clip-path: polygon(0 22px, 30% 0, 31% 10px, 100% 0, 100% 6px, 31% 16px, 30% 6px, 0 28px);
}
html[data-era="2020"] #footer p { color: #ddd; }

/* ============================================================
   page bits
   ============================================================ */

/* ---------- splash / enter page ---------- */
html[data-era="2020"] body.enter-page { padding: 20px 0; }
html[data-era="2020"] .enter-box { padding: 30px 38px 28px; max-width: 620px; margin: 20px 16px; }
html[data-era="2020"] .enter-box::before { background: var(--p5dots) 0 0 / 12px 12px, #0d0d0d; background-position: right bottom; }
html[data-era="2020"] .enter-box .title { font-size: 60px; margin: 16px 0 12px; }
html[data-era="2020"] .enter-box .papyrus { font-size: 20px !important; }
html[data-era="2020"] .warning {
  font-family: "Bebas Neue", sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  line-height: 1.3;
  color: #fff;
  background: #000;
  border: 7px solid;
  border-image: repeating-linear-gradient(-45deg, var(--p5r) 0 8px, #fff 8px 16px) 7;
  padding: 10px 12px;
  margin: 18px 0;
  transform: rotate(-1deg);
}
html[data-era="2020"] .enter-link {
  display: inline-block;
  padding: 8px 34px 6px 24px;
  margin: 14px 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: 36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: 3px 3px 0 #000;
  background: linear-gradient(100deg, var(--p5r) 0 calc(100% - 20px), #fff calc(100% - 20px)) !important;
  box-shadow: none !important;
  clip-path: polygon(0 10%, 100% 0, 96% 100%, 3% 88%);
  animation: p5-bob 1.6s ease-in-out infinite;
  transition: filter .1s;
}
html[data-era="2020"] .enter-link:hover { background: linear-gradient(100deg, #fff 0 calc(100% - 20px), #000 calc(100% - 20px)) !important; color: #000 !important; text-shadow: 3px 3px 0 var(--p5r); }
@keyframes p5-bob {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(-1deg) scale(1.06); }
}

/* ---------- misty ---------- */
html[data-era="2020"] .frame-gold {
  border: 0;
  background: #fff;
  box-shadow: 12px 12px 0 var(--p5r), 12px 12px 0 4px #000;
  transform: rotate(-2deg);
}
html[data-era="2020"] .laser-zone {
  border: 5px solid #fff;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(230, 0, 18, .22) 58% 72%, transparent 72%),
    var(--p5dots) 0 0 / 14px 14px,
    radial-gradient(ellipse at 50% 120%, rgba(230, 0, 18, .25), transparent 60%),
    #120306;
  box-shadow: 9px 9px 0 var(--p5r), inset 0 0 40px rgba(0, 0, 0, .8);
}
html[data-era="2020"] .laser-zone:focus { outline: 3px solid var(--p5r); outline-offset: 4px; }
html[data-era="2020"] .laser-hint { font-family: "Bebas Neue", sans-serif; font-size: 22px; letter-spacing: 1px; color: rgba(255, 255, 255, .7); }
html[data-era="2020"] .cat-thought { font-family: "Anton", Impact, sans-serif; color: #fff; text-shadow: 2px 2px 0 var(--p5r); }
html[data-era="2020"] .laser-stats {
  border: 0;
  background: #fff;
  color: #000;
  font-family: "Bebas Neue", sans-serif;
  font-size: 21px;
  letter-spacing: 1px;
  padding: 8px 16px;
  margin: 12px 0 26px;
  clip-path: polygon(0 0, 100% 0, 98.5% 100%, 1% 100%);
}
html[data-era="2020"] .laser-stats b { color: var(--p5r); }
html[data-era="2020"] .laser-stats .glow-green { color: #000; text-shadow: none; }
html[data-era="2020"] .certificate {
  background:
    var(--p5dots) right bottom / 10px 10px no-repeat,
    #fff;
  color: #111;
  border: 8px solid #000;
  outline: 4px solid var(--p5r);
  outline-offset: -16px;
  box-shadow: 12px 12px 0 var(--p5r);
  font-family: "Archivo", sans-serif;
  transform: rotate(1deg);
}
html[data-era="2020"] .certificate h3 { font-family: "Anton", Impact, sans-serif; color: var(--p5r); }
html[data-era="2020"] .certificate [style*="Creepster"] { font-family: "Anton", Impact, sans-serif !important; text-transform: uppercase; color: #000 !important; text-shadow: 3px 3px 0 var(--p5r); }
html[data-era="2020"] .certificate .glow-green,
html[data-era="2020"] .certificate .glow-purple,
html[data-era="2020"] .certificate .rainbow { color: var(--p5r); -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }
html[data-era="2020"] .diary {
  background: #fff repeating-linear-gradient(transparent 0 23px, #e5e5e5 23px 24px);
  color: #111;
  font-family: "Archivo", sans-serif;
  border-left: 8px solid var(--p5r);
  box-shadow: 8px 8px 0 #000, 8px 8px 0 3px #fff;
  transform: rotate(-.6deg);
}
html[data-era="2020"] .diary .date { color: var(--p5r); font-family: "Bebas Neue", sans-serif; font-size: 18px; letter-spacing: 1px; font-weight: normal; }
html[data-era="2020"] .stat-card { background: #000; border: 4px solid #fff; box-shadow: 8px 8px 0 var(--p5r); font-family: "Bebas Neue", sans-serif; font-size: 18px; }

/* ---------- cryptid dossiers: calling-card files ---------- */
html[data-era="2020"] .dossier {
  background:
    var(--p5dots) 100% 100% / 10px 10px no-repeat,
    linear-gradient(135deg, transparent 0 93%, rgba(230, 0, 18, .9) 93%),
    #fff;
  color: #111;
  font-family: "Archivo", sans-serif;
  font-size: 14.5px;
  border: 0;
  border-left: 10px solid #000;
  padding: 22px 24px 20px;
  margin: 34px 10px 34px 4px;
  box-shadow: 10px 10px 0 var(--p5r), 10px 10px 0 4px #000;
}
html[data-era="2020"] .dossier h3 {
  display: inline-block;
  padding: 3px 16px 2px;
  margin: 0 0 10px;
  background: #000;
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 1px;
  border: 0;
  box-shadow: 5px 5px 0 var(--p5r);
  transform: rotate(-2deg) skewX(-8deg);
}
html[data-era="2020"] .dossier .stamp {
  font-family: "Anton", Impact, sans-serif;
  color: #fff;
  background: var(--p5r);
  border: 0;
  padding: 3px 14px;
  opacity: 1;
  clip-path: polygon(4% 0, 100% 8%, 96% 100%, 0 90%);
  transform: rotate(9deg);
}
html[data-era="2020"] .dossier .photo { background: #000; padding: 6px 6px 24px; box-shadow: 6px 6px 0 var(--p5r); }
html[data-era="2020"] .dossier .photo img { filter: grayscale(1) contrast(1.3); }
html[data-era="2020"] .dossier .photo figcaption { font-family: "Bebas Neue", sans-serif; font-size: 16px; letter-spacing: 1px; color: #fff; }
html[data-era="2020"] .dossier b { color: #000; }
html[data-era="2020"] .dossier .glow-green,
html[data-era="2020"] .dossier .glow-purple { color: #000; text-shadow: 2px 2px 0 rgba(230, 0, 18, .4); }
html[data-era="2020"] .dossier .glow-orange { color: var(--p5r); }
html[data-era="2020"] .redacted { background: #000; color: #000; }
html[data-era="2020"] .redacted:hover { background: var(--p5r); color: #fff; }
html[data-era="2020"] .threat { border: 2px solid #000; background: #fff; height: 16px; transform: skewX(-20deg); }
html[data-era="2020"] .threat i { background: repeating-linear-gradient(-45deg, var(--p5r) 0 7px, #000 7px 14px); }

/* ---------- legends corkboard: the "case board" ---------- */
html[data-era="2020"] .corkboard {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(230, 0, 18, .13) 0 6deg, transparent 6deg 15deg),
    var(--p5dots) 0 0 / 12px 12px,
    #0b0b0b;
  border: 6px solid #fff;
  box-shadow: 10px 10px 0 var(--p5r);
}
html[data-era="2020"] .corkboard svg.strings g { stroke: #fff; stroke-width: 3; stroke-dasharray: 10 5; }
html[data-era="2020"] .note {
  background: #fff;
  color: #111;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  box-shadow: 5px 5px 0 var(--p5r);
  transition: transform .15s var(--p5pop);
}
html[data-era="2020"] .note b { font-family: "Anton", Impact, sans-serif; font-weight: normal; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; }
html[data-era="2020"] .note.pink { background: var(--p5r); color: #fff; box-shadow: 5px 5px 0 #000, 5px 5px 0 2px #fff; }
html[data-era="2020"] .note.blue { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff, 5px 5px 0 var(--p5r); }
html[data-era="2020"] .note.green { background: #fff; border-left: 7px solid var(--p5r); box-shadow: 5px 5px 0 #000, 5px 5px 0 2px #fff; }
html[data-era="2020"] .note.photo { background: #fff; }
html[data-era="2020"] .note.photo img { filter: grayscale(1) contrast(1.2); }
html[data-era="2020"] .note::before {
  width: 20px;
  height: 20px;
  top: -10px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
html[data-era="2020"] .note.photo::before,
html[data-era="2020"] .note.green::before { background: var(--p5r); }
html[data-era="2020"] .glitch { font-family: "Anton", Impact, sans-serif; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
html[data-era="2020"] .glitch::before { color: var(--p5r); }
html[data-era="2020"] .glitch::after { color: #ff8a95; }

/* ---------- guestbook ---------- */
html[data-era="2020"] .gb-form { gap: 12px 14px; }
html[data-era="2020"] .gb-form label {
  justify-self: start;
  padding: 2px 10px;
  background: #fff;
  color: #000;
  font-family: "Anton", Impact, sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--p5r);
}
html[data-era="2020"] .gb-form input,
html[data-era="2020"] .gb-form textarea,
html[data-era="2020"] .gb-form select {
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  background: #fff;
  color: #000;
  border: 0;
  border-bottom: 4px solid var(--p5r);
  padding: 8px 10px;
  clip-path: polygon(0 0, 100% 0, 99% 100%, 0.5% 100%);
  transition: background .12s;
}
html[data-era="2020"] .gb-form input:focus,
html[data-era="2020"] .gb-form textarea:focus,
html[data-era="2020"] .gb-form select:focus { outline: 0; background: #ffe5e8; border-bottom-color: #000; }
html[data-era="2020"] .gb-entry { margin: 24px 10px 26px 4px; padding: 14px 18px; }
html[data-era="2020"] .gb-entry:nth-child(even) { filter: drop-shadow(-7px 7px 0 var(--p5r)); }
html[data-era="2020"] .gb-entry .gb-head { border-bottom: 2px solid var(--p5r); padding-bottom: 6px; margin-bottom: 8px; align-items: baseline; }
html[data-era="2020"] .gb-entry .gb-name { color: #fff; font-family: "Anton", Impact, sans-serif; font-weight: normal; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--p5r); }
html[data-era="2020"] .gb-entry .gb-meta { color: #bbb; font-family: "Bebas Neue", sans-serif; font-size: 15px; letter-spacing: 1px; }

/* ---------- webring / links ---------- */
html[data-era="2020"] .webring { padding: 18px 16px; margin: 26px auto; }
html[data-era="2020"] .webring .ring-title { font-family: "Anton", Impact, sans-serif; font-size: 30px; color: #fff; text-transform: uppercase; text-shadow: 3px 3px 0 var(--p5r); transform: rotate(-2deg); }
html[data-era="2020"] .webring .btn { margin: 4px; }
html[data-era="2020"] #content textarea[readonly] { background: #fff !important; color: #000 !important; border: 0 !important; border-left: 6px solid var(--p5r) !important; font-family: monospace; padding: 6px; }

/* ============================================================
   ANIME PAGE (shrines.html)
   ============================================================ */
html[data-era="2020"] #wrapper.anime-top { margin-bottom: 0; }
html[data-era="2020"] #nav.topnav {
  gap: 10px 6px;
  padding: 18px 12px 16px;
  margin: 0 -4px;
  border: 0;
  background: #000;
  clip-path: polygon(0 8px, 100% 0, 100% calc(100% - 10px), 0 100%);
  box-shadow: inset 0 -5px 0 var(--p5r);
}
html[data-era="2020"] #nav.topnav li { margin: 0; }
html[data-era="2020"] #nav.topnav a { font-size: 19px; padding: 3px 16px 1px 10px; }
html[data-era="2020"] #nav.topnav a::before { background: #1a1a1a; }
html[data-era="2020"] #nav.topnav a.here::before { background: var(--p5r); }
html[data-era="2020"] #nav.topnav a:hover::before { background: #fff; }
html[data-era="2020"] #nav.topnav a::after { opacity: 1; background: var(--p5r); transform: translate(3px, 3px); }
html[data-era="2020"] #nav.topnav a.here::after { background: #fff; }
html[data-era="2020"] #nav.topnav .btn { font-size: 13px; padding: 5px 18px 4px 10px; }
html[data-era="2020"] #nav.topnav #music-next { margin-left: 6px; }

html[data-era="2020"] .realm { font-family: "Archivo", sans-serif; }
/* every world gets a P5 slash + halftone overlay in its own accent */
html[data-era="2020"] .realm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 66%, rgba(0, 0, 0, .3) 66% 80%, transparent 80%),
    radial-gradient(circle, var(--p5a, #e60012) 1.3px, transparent 1.8px) 0 0 / 13px 13px;
  -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent), linear-gradient(105deg, transparent 0 50%, #000 85%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent), linear-gradient(105deg, transparent 0 50%, #000 85%);
  mask-composite: intersect;
  opacity: .45;
}
html[data-era="2020"] #portal { --p5a: #e60012; }
html[data-era="2020"] #lain { --p5a: #ff3fa4; }
html[data-era="2020"] #gits { --p5a: #39ff8a; }
html[data-era="2020"] #eva { --p5a: #ff8c1a; }
html[data-era="2020"] #bebop { --p5a: #d7263d; }
html[data-era="2020"] #spirited { --p5a: #f4c542; }
html[data-era="2020"] #totoro { --p5a: #8fe36b; }
html[data-era="2020"] #yotsuba { --p5a: #3cb043; }
html[data-era="2020"] #kuromi { --p5a: #ff4fa3; }
html[data-era="2020"] #junji { --p5a: #ffffff; }

/* portal: full P5 */
html[data-era="2020"] #portal { --bg: #0a0a0a; padding-top: 70px; }
html[data-era="2020"] #portal::before {
  background:
    linear-gradient(160deg, transparent 0 40%, var(--p5r) 40% 52%, transparent 52%),
    linear-gradient(160deg, transparent 0 55%, #fff 55% 56.5%, transparent 56.5%),
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(230, 0, 18, .2) 0 5deg, transparent 5deg 15deg);
}
html[data-era="2020"] #portal h1 { font-size: 58px; }
html[data-era="2020"] #portal p { font-size: 17px; text-shadow: 2px 2px 0 #000, 0 0 6px #000; }
html[data-era="2020"] #portal p[style*="font-size:18px"] {
  display: table;
  margin: 0 auto 10px;
  padding: 4px 16px;
  background: #fff;
  color: #000;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px !important;
  letter-spacing: 1px;
  transform: rotate(1.5deg);
  box-shadow: 6px 6px 0 #000;
}
html[data-era="2020"] .realm-map { gap: 12px 10px; margin-top: 30px; }
html[data-era="2020"] .realm-map a:not(#time-machine *) {
  padding: 5px 18px 4px 12px;
  border: 0;
  background: #000;
  color: #fff;
  box-shadow: none;
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .5px;
  clip-path: polygon(0 10%, 100% 0, 95% 100%, 4% 90%);
  transform: rotate(-2deg);
  transition: transform .14s var(--p5pop), background .1s, color .1s;
}
html[data-era="2020"] .realm-map a:nth-child(even):not(#time-machine *) { background: #fff; color: #000; transform: rotate(2deg); }
html[data-era="2020"] .realm-map a:not(#time-machine *):hover { background: var(--p5r); color: #fff; transform: rotate(-6deg) scale(1.15); }
html[data-era="2020"] .scroll-hint { font-family: "Anton", Impact, sans-serif; color: #fff; text-shadow: 3px 3px 0 var(--p5r); letter-spacing: 2px; }

/* realm chrome: world number sticker */
html[data-era="2020"] .world-no {
  display: table;
  margin: 0 auto 18px;
  padding: 4px 16px 3px;
  background: #fff;
  color: #000 !important;
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  opacity: 1;
  transform: rotate(-2deg);
  clip-path: polygon(0 0, 100% 10%, 98% 100%, 2% 92%);
  box-shadow: inset -12px 0 0 var(--p5a, #e60012);
}

/* slanted h2 banners (each keeps its own font + colors) */
html[data-era="2020"] .realm h2 {
  display: table;
  margin: 0 auto 14px;
  padding: 8px 40px 10px;
  background:
    linear-gradient(transparent calc(100% - 7px), var(--p5a, #e60012) calc(100% - 7px)),
    rgba(0, 0, 0, .82);
  clip-path: polygon(0 8%, 100% 0, 96% 100%, 3% 94%);
}
html[data-era="2020"] #lain h2.glitch::before,
html[data-era="2020"] #lain h2.glitch::after { padding: 8px 40px 10px; }
html[data-era="2020"] #gits h2,
html[data-era="2020"] #bebop h2,
html[data-era="2020"] #kuromi h2,
html[data-era="2020"] #spirited h2,
html[data-era="2020"] #totoro h2 { transform: rotate(-2deg); }
html[data-era="2020"] #yotsuba h2 { background: linear-gradient(transparent calc(100% - 7px), #ffd93b calc(100% - 7px)), #fff; transform: rotate(2deg); text-shadow: 3px 3px 0 #000; }
html[data-era="2020"] #junji h2 { background: linear-gradient(transparent calc(100% - 7px), #fff calc(100% - 7px)), #000; }
html[data-era="2020"] .realm .tagline { font-weight: 600; }

/* angled info cards: keep each world's colors, add the P5 stack */
html[data-era="2020"] .realm .box {
  position: relative;
  transform: rotate(-.8deg);
  box-shadow: 9px 9px 0 #000, 9px 9px 0 3px var(--p5a, #e60012);
  margin: 34px auto 26px;
}
html[data-era="2020"] .realm .box:not(.hud)::before {
  content: "INTEL";
  position: absolute;
  top: -16px;
  left: -12px;
  z-index: 3;
  padding: 3px 16px 2px 10px;
  background: #000;
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1.2;
  clip-path: polygon(0 10%, 100% 0, 92% 100%, 4% 92%);
  transform: rotate(-6deg);
  box-shadow: inset -10px 0 0 var(--p5a, #e60012);
}
html[data-era="2020"] #eva .box { box-shadow: 9px 9px 0 #ff8c1a, 9px 9px 0 3px #000; }
html[data-era="2020"] .realm .bounty { box-shadow: 10px 10px 0 #d7263d, 10px 10px 0 3px #000; transform: rotate(1deg); }
html[data-era="2020"] .realm .box.bounty::before { content: "WANTED"; }
html[data-era="2020"] .realm .manga-page { box-shadow: 9px 9px 0 #3cb043, 9px 9px 0 3px #000; transform: rotate(.8deg); }
html[data-era="2020"] .realm .box.manga-page::before { content: "CH. ???"; }
html[data-era="2020"] .realm .box.ink::before { content: "CURSED"; background: #fff; color: #000; box-shadow: inset -10px 0 0 #000; }
html[data-era="2020"] .realm .box.punk::before { content: "KEEP OUT"; }
html[data-era="2020"] .realm .leafy { transform: rotate(.8deg); }
html[data-era="2020"] .realm .box.bathhouse::before { content: "BATHHOUSE"; }
html[data-era="2020"] .realm .hud { transform: rotate(-.8deg); box-shadow: 9px 9px 0 #000, 9px 9px 0 3px #39ff8a; }
/* junji's stare effect owns .ink's transform, so leave it alone */
html[data-era="2020"] #junji .ink { box-shadow: 0 0 0 2px #f2efe6, 10px 10px 0 #000, 10px 10px 0 4px #fff; }

/* toy labels as stickers */
html[data-era="2020"] .toy-label {
  display: table;
  margin: 0 auto 12px;
  padding: 3px 14px;
  background: var(--p5a, #e60012);
  color: #000 !important;
  font-family: "Anton", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  opacity: 1;
  transform: rotate(-2deg) skewX(-8deg);
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%);
}
html[data-era="2020"] #junji .toy-label,
html[data-era="2020"] #kuromi .toy-label { color: #000 !important; }
html[data-era="2020"] .realm .btn {
  background: linear-gradient(105deg, #fff 0 calc(100% - 14px), var(--p5a, #e60012) calc(100% - 14px));
}
html[data-era="2020"] .realm .btn:hover { background: linear-gradient(105deg, var(--p5a, #e60012) 0 calc(100% - 14px), #000 calc(100% - 14px)); color: #000; }
html[data-era="2020"] #bebop .btn:hover, html[data-era="2020"] .realm .btn:focus-visible { color: #fff; background: linear-gradient(105deg, #000 0 calc(100% - 14px), var(--p5a, #e60012) calc(100% - 14px)); }
html[data-era="2020"] .grudge-diary { box-shadow: 9px 9px 0 #ff4fa3, 9px 9px 0 3px #000; transform: rotate(-.5deg); }
html[data-era="2020"] .navi { box-shadow: 8px 8px 0 #000, 8px 8px 0 3px #ff3fa4; }
html[data-era="2020"] .yotsuba-panel { box-shadow: 7px 7px 0 #3cb043, 7px 7px 0 3px #000; }

/* bottom footer box on the anime page */
html[data-era="2020"] #wrapper-bottom {
  width: 1060px;
  max-width: calc(100% - 24px);
  border: 0;
  box-shadow: none;
  margin: 0 auto 50px;
}

/* ============================================================
   phones
   ============================================================ */
@media (max-width: 720px) {
  html[data-era="2020"] #wrapper { max-width: calc(100% - 20px); margin-top: 12px; }
  html[data-era="2020"] #header { padding: 18px 10px 22px; }
  html[data-era="2020"] #header .title { font-size: 31px; flex-basis: 100%; order: -1; }
  html[data-era="2020"] .header-gifs img.float { display: none; }
  html[data-era="2020"] .header-gifs { gap: 6px; }
  html[data-era="2020"] .header-gifs img[width="90"] { width: 54px; }
  html[data-era="2020"] #header .subtitle { font-size: 17px; }
  html[data-era="2020"] .marquee-strip { margin: 12px 0 16px; }
  html[data-era="2020"] #sidebar { width: auto; padding: 4px 4px 10px; border: 0; }
  html[data-era="2020"] .nav-title { font-size: 34px; margin-left: 4px; }
  html[data-era="2020"] #sidebar #nav { display: flex; flex-wrap: wrap; gap: 10px 8px; padding-left: 4px; }
  html[data-era="2020"] #sidebar #nav li { margin: 0 !important; }
  html[data-era="2020"] #sidebar #nav li::before { display: none; }
  html[data-era="2020"] #nav a { font-size: 20px; }
  html[data-era="2020"] .side-box { margin: 28px 8px 20px 4px; }
  html[data-era="2020"] #content { padding: 26px 16px 34px; border-left-width: 4px; }
  html[data-era="2020"] #content h1, html[data-era="2020"] #portal h1 { font-size: 32px; padding: 6px 18px 4px; }
  html[data-era="2020"] #content h2 { font-size: 23px; margin-left: -4px; }
  html[data-era="2020"] .panel { padding: 14px 16px; margin: 22px 6px 24px 2px; }
  html[data-era="2020"] .dossier { margin: 30px 8px 30px 2px; padding: 18px 16px; }
  html[data-era="2020"] .dossier h3 { font-size: 24px; }
  html[data-era="2020"] .enter-box { padding: 24px 18px; }
  html[data-era="2020"] .enter-box .title { font-size: 44px; }
  html[data-era="2020"] .enter-link { font-size: 26px; }
  html[data-era="2020"] .corkboard { gap: 22px; padding: 24px 12px; }
  html[data-era="2020"] #nav.topnav a { font-size: 16px; }
  html[data-era="2020"] table.myspace th { width: 40%; font-size: 17px; }
  html[data-era="2020"] .realm h2 { padding: 6px 20px 8px; max-width: 100%; box-sizing: border-box; }
  html[data-era="2020"] #lain h2.glitch::before,
  html[data-era="2020"] #lain h2.glitch::after { padding: 6px 20px 8px; }
}
html[data-era="2020"] #content .certificate h3 { margin: 10px auto; }

/* link-buttons keep their tag colors (beat the generic link color) */
html[data-era="2020"] a.btn:not(#time-machine *) { color: #000; box-shadow: none; font-weight: normal; }
html[data-era="2020"] a.btn.purple:not(#time-machine *) { color: #fff; }
html[data-era="2020"] a.btn:not(#time-machine *):hover { color: #fff; background: linear-gradient(105deg, var(--p5r) 0 calc(100% - 14px), #000 calc(100% - 14px)); }
html[data-era="2020"] a.btn.purple:not(#time-machine *):hover { color: #000; background: linear-gradient(105deg, #fff 0 calc(100% - 14px), #000 calc(100% - 14px)); }
html[data-era="2020"] .eva-card { box-shadow: 10px 10px 0 #ff8c1a, 10px 10px 0 3px #000; transform: rotate(-1.2deg); border: 3px solid #fff; }
html[data-era="2020"] .btn[hidden] { display: none; }
html[data-era="2020"] #portal p[style*="font-size:18px"] { text-shadow: none; }