/* =====================================================================
   THE INTERNET IS CLOSED — styles.css
   A memecoin website built to look like the internet died in 2012 and
   woke up on-chain. Organized in sections; search the ALL-CAPS headers.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS — the whole chaotic palette lives here so it's easy
   to keep "consistent chaos" across every section.
   --------------------------------------------------------------------- */
:root{
  /* core retro palette */
  --win-blue:       #000080;
  --win-blue-2:     #1084d0;
  --win-face:       #c0c0c0;
  --win-face-lt:    #dcdcdc;
  --bevel-lightest: #ffffff;
  --bevel-light:    #dfdfdf;
  --bevel-dark:     #808080;
  --bevel-darkest:  #000000;

  --cyan:      #00fff7;
  --lime:      #39ff14;
  --acid:      #eeff00;
  --red:       #ff003c;
  --purple:    #9900ff;
  --rh-green:  #00c805;
  --rh-green-dk: #007a03;
  --white:     #ffffff;
  --black:     #0a0a0a;

  --paper:     #f4f1e6;
  --ink:       #101010;

  /* fonts — system only, never Google Fonts */
  --f-system:  Tahoma, Verdana, Arial, sans-serif;
  --f-mono:    "Courier New", Courier, monospace;
  --f-display: Impact, "Arial Narrow", Arial, sans-serif;
  --f-serif:   "Times New Roman", Times, serif;

  --z-desktop: 1;
  --z-chrome: 500;
  --z-toast: 800;
  --z-taskbar: 900;
  --z-startmenu: 950;
  --z-window: 600;
  --z-shutdown: 999;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--f-system);
  color: var(--ink);
  background:
    repeating-linear-gradient(45deg, #7fa6c9 0 14px, #6f97bb 14px 28px);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font-family: inherit; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul{ padding:0; list-style:none; }

.container{ max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* CRT scanline overlay — subtle, whole-viewport, purely decorative */
.crt-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 997;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px,
    transparent 2px, transparent 3px);
  mix-blend-mode: multiply;
  opacity:.5;
}
.crt-flicker{
  position: fixed; inset:0; pointer-events:none; z-index:996;
  background: rgba(255,255,255,0.02);
  animation: crtFlicker 6.5s infinite;
}
@keyframes crtFlicker{
  0%,96%,100%{ opacity:0; }
  97%{ opacity:.35; }
  98%{ opacity:0; }
  99%{ opacity:.2; }
}

/* ---------------------------------------------------------------------
   3. BEVEL / PANEL PRIMITIVES — reused everywhere for the Win98 look
   --------------------------------------------------------------------- */
.bevel-out{
  border: 2px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark);
}
.bevel-in{
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark);
  box-shadow: inset 1px 1px 0 var(--bevel-darkest);
}

/* ---------------------------------------------------------------------
   4. BUTTONS — beveled Win98 buttons, 88x31 badges, shiny green pills
   --------------------------------------------------------------------- */
.btn-98{
  display:inline-block;
  font-family: var(--f-system);
  font-weight:bold;
  font-size: 13px;
  background: var(--win-face);
  color:#000;
  padding: 6px 14px;
  border: 2px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark);
  cursor:pointer;
}
.btn-98:active{
  border-color: var(--bevel-darkest) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-darkest);
  box-shadow: inset -1px -1px 0 var(--bevel-light), inset 1px 1px 0 var(--bevel-dark);
  transform: translate(1px,1px);
}

.btn-hero{
  font-family: var(--f-display);
  letter-spacing: .5px;
  font-size: 18px;
  padding: 12px 20px;
  border: 3px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -2px -2px 0 var(--bevel-dark), 3px 3px 0 #000;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  color:#000;
  background: linear-gradient(180deg, #eaffea, var(--rh-green) 55%, var(--rh-green-dk));
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.btn-hero:active{ transform: translate(2px,2px); box-shadow: inset -1px -1px 0 var(--bevel-light), 1px 1px 0 #000; }
.btn-hero.alt{ background: linear-gradient(180deg,#eaf6ff, var(--win-blue-2) 55%, var(--win-blue)); color:#fff; text-shadow:0 1px 1px #000; }
.btn-hero.x{ background: linear-gradient(180deg,#3a3a3a,#000 60%,#000); color:#fff; }
.btn-hero.tg{ background: linear-gradient(180deg,#bfe9ff,#2aa9e0 55%,#1478a3); color:#012; }

.btn-88{
  width: 88px; height: 31px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size: 10px;
  line-height:1.1;
  font-weight:bold;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #666 inset;
  padding: 2px;
  cursor:pointer;
  font-family: var(--f-system);
  text-transform:uppercase;
}

/* ---------------------------------------------------------------------
   5. BROWSER CHROME — title bar / menu / address bar
   --------------------------------------------------------------------- */
.browser-chrome{
  position: sticky; top:0; z-index: var(--z-chrome);
  font-family: var(--f-system);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.title-bar{
  background: linear-gradient(90deg, var(--win-blue), var(--win-blue-2) 60%, var(--win-blue));
  color:#fff;
  padding: 4px 8px;
  font-weight:bold;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-bar{
  background: var(--win-face);
  border-bottom: 1px solid var(--bevel-dark);
  display:flex;
  padding: 2px 4px;
  position: relative;
}
.menu-bar button{
  background:none; border:none; padding:4px 10px; font-size:12px; cursor:pointer;
}
.menu-bar button:hover, .menu-bar button:focus-visible{ background: var(--win-blue); color:#fff; outline: 1px dotted #fff; }
.menu-dropdown{
  position:absolute; top: 100%; left: 8px;
  background: var(--win-face);
  min-width: 180px;
  font-size: 12px;
  padding: 4px 0;
  z-index: 20;
}
.menu-dropdown li{ padding:4px 14px; }
.menu-dropdown li:hover{ background: var(--win-blue); color:#fff; }

.address-bar{
  background: var(--win-face-lt);
  border-bottom: 2px solid var(--bevel-dark);
  padding: 4px 6px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.addr-nav-buttons{ display:flex; gap:3px; flex-wrap:wrap; }
.addr-nav-buttons button{
  font-size: 11px; padding: 3px 7px;
}
.addr-url-wrap{ flex:1; min-width: 160px; display:flex; align-items:center; gap:4px; }
.addr-label{ font-size:11px; }
.addr-url{
  flex:1;
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 3px 6px;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark);
  background:#fff;
  color:#0000aa;
}
.addr-go{ font-size:11px; padding:3px 10px; }

/* ---------------------------------------------------------------------
   6. TOAST / PAGE FLICKER
   --------------------------------------------------------------------- */
.toast{
  position: fixed; top: 78px; left:50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--acid);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  padding: 10px 16px;
  font-family: var(--f-mono);
  font-weight:bold;
  font-size: 13px;
  max-width: 90vw;
  text-align:center;
}
.toast[hidden]{ display:none; }

.page-flicker{
  position:fixed; inset:0; background:#fff; z-index: 995; pointer-events:none;
  opacity:0; display:none;
}
.page-flicker.active{ display:block; animation: flickerAnim .5s steps(6); }
@keyframes flickerAnim{
  0%{opacity:.85;} 20%{opacity:0;} 40%{opacity:.6;} 60%{opacity:0;} 80%{opacity:.4;} 100%{opacity:0;}
}

/* ---------------------------------------------------------------------
   7. WINDOW COMPONENT — reused for every window/dialog on the page
   --------------------------------------------------------------------- */
.win-window{
  background: var(--win-face);
  border: 2px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark), 5px 5px 0 rgba(0,0,0,.45);
  max-width: 100%;
  will-change: transform;
}
.win-window.win-floating{
  position: fixed;
  top: 18%;
  left: 50%;
  width: min(360px, 90vw);
  z-index: var(--z-window);
  transform: translate(-50%, 0);
}
.win-window.win-inline{ position: relative; }

.win-titlebar{
  background: linear-gradient(90deg, var(--win-blue), var(--win-blue-2) 70%);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding: 4px 5px;
  font-weight:bold;
  font-size: 13px;
  user-select:none;
  touch-action: none;
}
.win-titlebar[data-drag-handle]{ cursor: move; }
.win-window.warn .win-titlebar{ background: linear-gradient(90deg,#7a0000,#c40000 70%); }
.win-window.green-crt .win-titlebar{ background: linear-gradient(90deg,#003300,#0a5c0a 70%); }

.win-title-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.win-controls{ display:flex; gap:2px; flex-shrink:0; }
.win-controls button{
  width:18px; height:16px;
  font-size:10px; line-height:1;
  font-family: var(--f-system);
  font-weight:bold;
  background: var(--win-face);
  border: 1px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  cursor:pointer;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}
.win-controls button:active{ border-color: var(--bevel-darkest) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-darkest); }

.win-body{
  padding: 12px 14px;
  font-size: 14px;
  max-height: 70vh;
  overflow-y: auto;
}
.win-window.minimized .win-body{ display:none; }

.win-window.green-crt .win-body{
  background:#001a00; color: var(--lime);
  font-family: var(--f-mono);
  text-shadow: 0 0 4px rgba(57,255,20,.7);
}

/* ---------------------------------------------------------------------
   8. DESKTOP ICONS
   --------------------------------------------------------------------- */
.desktop-icons{
  position: relative;
  z-index: var(--z-desktop);
  min-height: 40px;
}
.desktop-icon{
  position:absolute;
  width: 84px;
  background:none;
  border:none;
  color:#fff;
  text-shadow: 1px 1px 2px #000, 0 0 3px #000;
  font-size: 11px;
  font-family: var(--f-system);
  text-align:center;
  cursor:pointer;
  padding: 6px 2px;
}
.desktop-icon .icon-glyph{
  font-size: 26px;
  display:block;
  margin: 0 auto 4px;
  filter: drop-shadow(1px 1px 1px #000);
}
.desktop-icon:hover .icon-glyph, .desktop-icon:focus-visible .icon-glyph{ transform: scale(1.15); }
.desktop-icon:focus-visible{ outline: 1px dotted #fff; }
.desktop-icon span.label{
  display:block; background: rgba(0,0,128,0); padding: 1px 2px;
}
.desktop-icon:hover span.label, .desktop-icon:focus-visible span.label{ background: var(--win-blue); }

/* scattered desktop positions (desktop only; grid takes over on mobile) */
#icon-mycomputer{ top: 4px; left: 2%; }
#icon-memes{ top: 96px; left: 2%; }
#icon-web3{ top: 188px; left: 2%; }
#icon-recyclebin{ top: 4px; right: 2%; left: auto; }
#icon-rugs{ top: 96px; right: 2%; left: auto; }
#icon-wallets{ top: 188px; right: 2%; left: auto; }
#icon-screenshots{ top: 280px; left: 2%; }
#icon-alpha{ top: 280px; right: 2%; left: auto; }
#icon-degenfiles{ top: 372px; left: 2%; }
#icon-donotopen{ top: 372px; right: 2%; left: auto; }

/* ---------------------------------------------------------------------
   9. HERO
   --------------------------------------------------------------------- */
.hero-section{
  position: relative;
  padding: 46px 16px 40px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.5) 0 3px, transparent 4px) 0 0/70px 70px,
    linear-gradient(180deg, #bfe3ff 0%, #eaf9ff 45%, #dff6d8 100%);
  overflow: hidden;
}
.hero-hills{
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background: linear-gradient(180deg, var(--lime) 0%, #1f9e12 100%);
  clip-path: ellipse(75% 100% at 30% 100%);
  z-index:0;
}
.hero-hills::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, #2ecf16 0%, #167a0c 100%);
  clip-path: ellipse(60% 100% at 85% 100%);
}
.hero-window{
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto;
}
.hero-titlebar-label{ font-family: var(--f-mono); }
.hero-body{
  background: var(--paper);
  padding: 26px 22px 30px;
  text-align:center;
}
.hero-heading{
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: .98;
  letter-spacing: 1px;
  color: var(--win-blue);
  text-shadow: 3px 3px 0 var(--acid), 6px 6px 0 #000;
  margin: 0 0 10px;
}
.hero-tagline{
  font-family: var(--f-mono);
  font-weight:bold;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  color: var(--rh-green-dk);
  background:#000;
  color: var(--rh-green);
  display:inline-block;
  padding: 5px 12px;
  margin: 0 0 14px;
  animation: blink 1.4s steps(1) infinite;
}
.hero-subtagline{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 22px;
  color:#222;
}
.hero-buttons{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom: 26px;
}
.hero-mascot-wrap{
  display:flex; justify-content:center; margin: 6px 0 22px;
}
.mascot-figure{ margin:0; max-width: 320px; }
.mascot-figure figcaption{
  font-family: var(--f-mono); font-size: 11px; text-align:center; margin-top:4px; color:#333;
}

/* floating pixel decorations */
.float-deco{ position:absolute; font-size: 26px; z-index:1; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.4)); }
.deco-rocket{ top: 14%; right: 8%; animation: floatY 3.4s ease-in-out infinite; }
.deco-coin{ top: 60%; left: 6%; animation: floatY 4.1s ease-in-out infinite reverse; }
.deco-globe{ top: 8%; left: 42%; animation: spin 7s linear infinite; }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
@keyframes spin{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }

/* ---------------------------------------------------------------------
   10. MARQUEES
   --------------------------------------------------------------------- */
.marquee-strip{
  overflow:hidden;
  white-space: nowrap;
  background: #000;
  color: var(--acid);
  font-family: var(--f-mono);
  font-weight:bold;
  font-size: 14px;
  border-top: 2px solid var(--acid);
  border-bottom: 2px solid var(--acid);
  padding: 6px 0;
}
.marquee-strip.alt{ background: var(--win-blue); color:#fff; border-color: var(--cyan); }
.marquee-strip.pink{ background:#2b0033; color: var(--purple); border-color: var(--purple); }
.marquee-track{
  display:inline-block;
  padding-left: 100%;
  animation: marquee 18s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

/* ---------------------------------------------------------------------
   11. LORE SECTION
   --------------------------------------------------------------------- */
.lore-section{
  background: repeating-linear-gradient(135deg, var(--purple) 0 22px, #6a00b3 22px 44px);
  padding: 46px 16px;
}
.lore-box{
  max-width: 760px; margin:0 auto;
  background: var(--paper);
  padding: 24px 22px;
}
.section-title{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  text-align:center;
  color:#fff;
  background: var(--black);
  padding: 10px;
  margin: 0 0 20px;
  text-shadow: 2px 2px 0 var(--red);
  letter-spacing: 1px;
}
.lore-box p{
  font-family: var(--f-serif);
  font-size: 1.15rem;
  line-height:1.6;
  margin-bottom: 12px;
}
.lore-shout{
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-align:center;
  color: var(--red);
  letter-spacing: 1px;
  margin-top: 18px;
}

/* ---------------------------------------------------------------------
   12. COMPARISON PANEL
   --------------------------------------------------------------------- */
.comparison-section{
  padding: 44px 16px;
  background: var(--win-face);
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 4px);
}
.comparison-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 900px; margin: 0 auto;
}
.comparison-col{
  background:#fff;
  border: 2px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  padding: 16px;
}
.comparison-col h3{
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-align:center;
  padding-bottom:6px;
  border-bottom: 2px dashed #000;
}
.comparison-col.y2008 h3{ color: var(--win-blue); }
.comparison-col.y2026 h3{ color: var(--rh-green-dk); }
.comparison-col ol{ font-family: var(--f-mono); font-size:.95rem; list-style: decimal; padding-left: 20px; }
.comparison-col li{ margin-bottom:8px; }
.comparison-bottom{
  text-align:center; margin-top: 20px;
  font-family: var(--f-display);
  font-size: 1.5rem;
  color:#000;
}

/* ---------------------------------------------------------------------
   13. INLINE WINDOWS ROW (Markets / Portfolio / History)
   --------------------------------------------------------------------- */
.windows-row{
  padding: 44px 16px;
  background: repeating-linear-gradient(90deg, #0b3d91 0 3px, #0a2f6e 3px 6px);
  display:flex; flex-wrap:wrap; gap: 20px; justify-content:center;
  align-items: flex-start;
}
.windows-row .win-window{ width: min(340px, 100%); }

.market-row{
  display:flex; justify-content:space-between;
  font-family: var(--f-mono);
  padding: 3px 0;
  border-bottom: 1px dotted #999;
}
.market-row .up{ color: var(--rh-green-dk); font-weight:bold; }
.market-row.closed .up{ color: var(--red); }
.tiny-disclaimer{ font-size:10px; color:#555; margin: 8px 0 12px; font-family: var(--f-mono); }

.portfolio-list{ font-family: var(--f-mono); line-height:1.8; }
.portfolio-status{ margin-top: 10px; font-weight:bold; border-top:1px dashed var(--lime); padding-top:8px; }

.history-list{ font-family: var(--f-mono); font-size: 13px; line-height: 1.9; }
.history-list .today{ color: var(--red); font-weight:bold; }

/* ---------------------------------------------------------------------
   14. /MEMES/ ARCHIVE
   --------------------------------------------------------------------- */
.memes-section{
  padding: 46px 16px 56px;
  background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23111'/%3E%3Crect width='2' height='2' fill='%231b1b1b'/%3E%3C/svg%3E");
}
.memes-path{
  font-family: var(--f-mono); color: var(--lime); text-align:center;
  margin-bottom: 20px; font-size: 13px;
}
.meme-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 1100px; margin:0 auto;
}
.meme-card{
  background: var(--win-face);
  border: 2px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  padding: 10px;
  min-height: 190px;
  display:flex; flex-direction:column;
}
.meme-card-index{ font-family: var(--f-mono); font-size:11px; color:#555; margin-bottom:4px; }
.meme-card-content{ flex:1; display:flex; flex-direction:column; justify-content:center; }

/* card 01 */
.crt-compare{ background:#001a00; color:var(--lime); font-family:var(--f-mono); font-size:11px; padding:8px; text-align:center; line-height:1.6; }
.crt-compare .vs{ color:#fff; margin: 4px 0; }

/* card 02 error box */
.error-box{ background:#fff; border:2px outset var(--win-face); text-align:center; }
.error-box .error-title{ background:#000080; color:#fff; font-size:11px; padding:2px 4px; text-align:left; font-weight:bold; }
.error-box .error-body{ padding: 14px 8px; font-size: 13px; font-weight:bold; }
.error-box .error-icon{ font-size:22px; }
.error-box .error-ok{ margin: 6px 0 10px; }

/* card 03 loading bar */
.loading-label{ font-family: var(--f-mono); font-size:12px; margin-bottom:6px; text-align:center; }
.loading-bar-outer{ background:#fff; border: 2px solid; border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark); height:20px; padding:2px; }
.loading-bar-inner{ height:100%; width:99%; background: repeating-linear-gradient(90deg, var(--win-blue) 0 8px, var(--win-blue-2) 8px 16px); animation: loadPulse 1.6s ease-in-out infinite; }
@keyframes loadPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }
.loading-meta{ display:flex; justify-content:space-between; font-family: var(--f-mono); font-size:10px; margin-top:6px; }

/* card 04 popup congrats */
.congrats-card{ text-align:center; background: linear-gradient(180deg,#fff59d,#ffd54f); border:3px double #b8860b; padding:10px; }
.congrats-card h4{ font-family: var(--f-display); font-size:1.1rem; margin-bottom:4px; }
.congrats-card p{ font-size:12px; margin-bottom:8px; }

/* card 05 tombstone */
.tombstone{ text-align:center; }
.tombstone-shape{
  width: 100px; height: 120px; margin: 0 auto 8px;
  background: #9a9a9a;
  border-radius: 50% 50% 6px 6px / 60% 60% 6px 6px;
  border: 2px solid #444;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--f-serif);
  color:#222;
  padding-top: 10px;
}
.tombstone-shape strong{ font-size: 13px; }
.tombstone-shape span{ font-size: 10px; }
.tombstone p{ font-family: var(--f-serif); font-size:11px; font-style:italic; }

/* card 06 terminal */
.terminal-box{ background:#000; color: var(--lime); font-family: var(--f-mono); font-size:12px; padding:10px; height:100%; }
.terminal-box .cursor-blink{ animation: blink 1s steps(1) infinite; }

/* card 07 exit dialog */
.meme-card-07{ position: relative; overflow:hidden; }
.exit-dialog-box{ background:#fff; border:2px solid #000; padding:10px; font-size:12px; text-align:center; height: 150px; position:relative; }
.exit-dialog-box .exit-icon{ font-size: 18px; }
.exit-btn-row{ position:absolute; inset:0; }
#exit-yes-btn{ position:absolute; top: 96px; left: 20px; }
#exit-no-btn{ position:absolute; top: 96px; right: 20px; }
.exit-good-msg{ margin-top:6px; font-weight:bold; color: var(--rh-green-dk); }

/* ---------------------------------------------------------------------
   15. TOKEN SECTION — shareware download page
   --------------------------------------------------------------------- */
.token-section{
  padding: 48px 16px;
  background: linear-gradient(180deg, #dcdcdc, #b6b6b6);
}
.token-window{ max-width: 640px; margin: 0 auto; }
.token-body{ background: #fff; }
.token-sub{ font-family: var(--f-serif); font-style:italic; text-align:center; margin-bottom:16px; }
.spec-table{ width:100%; border-collapse: collapse; font-family: var(--f-mono); font-size:13px; margin-bottom: 16px; }
.spec-table td{ padding: 5px 6px; border-bottom: 1px dashed #999; }
.spec-table td:first-child{ font-weight:bold; color: var(--win-blue); white-space:nowrap; }
.contract-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background: var(--win-face);
  border: 2px solid; border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark);
  padding: 8px; margin-bottom: 18px;
}
.contract-label{ font-weight:bold; font-size:12px; }
#contract-address{
  font-family: var(--f-mono); font-size:12px; background:#fff; padding:4px 6px; flex:1; min-width: 140px;
  border: 1px solid #888; word-break: break-all;
}
.copy-feedback{ font-size:11px; color: var(--rh-green-dk); font-weight:bold; min-width: 60px; }
.token-buttons{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---------------------------------------------------------------------
   16. 88x31 BUTTON WALL
   --------------------------------------------------------------------- */
.buttonwall-section{ padding: 44px 16px; background: #fff9e0; }
.buttonwall-grid{
  display:flex; flex-wrap:wrap; gap: 8px; justify-content:center; max-width: 900px; margin: 0 auto;
}
.wb1{ background:#ffdf00; color:#000; }
.wb2{ background:#ff5a5a; color:#fff; }
.wb3{ background:#00e0e0; color:#000; }
.wb4{ background:#39ff14; color:#000; }
.wb5{ background:#000080; color:#fff; }
.wb6{ background:#9900ff; color:#fff; }
.wb7{ background:#fff; color:#000; }
.wb8{ background:#ff8c00; color:#000; }
.wb9{ background:#000; color: var(--lime); font-family: var(--f-mono); }
.wb10{ background:#ff003c; color:#fff; }
.wb11{ background:#00c805; color:#000; }
.wb12{ background: linear-gradient(90deg,#ff0,#0f0,#0ff,#f0f); color:#000; }
.wb13{ background:#c0c0c0; color:#000; }
.blink{ animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }

/* ---------------------------------------------------------------------
   17. GUESTBOOK
   --------------------------------------------------------------------- */
.guestbook-section{ padding: 46px 16px; background: var(--win-face-lt); }
.guestbook-wrap{ max-width: 640px; margin:0 auto; }
.guestbook-list{ background:#fff; border: 2px solid; border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark); padding: 4px 10px; margin-bottom: 18px; }
.guestbook-entry{ padding: 8px 0; border-bottom: 1px dotted #999; font-family: var(--f-mono); font-size: 13px; }
.guestbook-entry:last-child{ border-bottom:none; }
.guestbook-entry .gb-name{ font-weight:bold; color: var(--win-blue); }
.guestbook-entry .gb-msg{ display:block; margin-top:2px; }
.guestbook-entry.new-entry .gb-name{ color: var(--rh-green-dk); }
.guestbook-form{ background: var(--win-face); border: 2px solid; border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest); padding: 14px; }
.guestbook-form label{ display:block; font-size:12px; font-weight:bold; margin-bottom:3px; }
.guestbook-form input, .guestbook-form textarea{
  width:100%; font-family: var(--f-system); font-size: 13px; padding: 6px;
  border: 2px solid; border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark);
  margin-bottom: 10px; background:#fff;
}
.guestbook-form textarea{ min-height: 70px; resize: vertical; }

/* ---------------------------------------------------------------------
   18. VISITOR COUNTER
   --------------------------------------------------------------------- */
.counter-section{ padding: 40px 16px 60px; text-align:center; background: #000; }
.counter-label{ color:#fff; font-family: var(--f-mono); font-size: 13px; margin-bottom: 10px; letter-spacing:1px; }
.odometer{ display:inline-flex; gap:3px; background:#111; padding:8px; border: 3px solid #555; }
.odometer span{
  display:inline-block; width: 22px; text-align:center;
  background:#000; color: var(--lime); font-family: var(--f-mono); font-weight:bold; font-size: 22px;
  border: 1px solid #333; text-shadow: 0 0 6px var(--lime);
}

/* ---------------------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------------------- */
.site-footer{
  background: var(--black); color:#ccc; padding: 30px 16px 120px; text-align:center;
  font-family: var(--f-mono); font-size: 12px; line-height: 1.9;
}
.footer-disclaimer{ max-width: 620px; margin: 0 auto 16px; color:#888; font-size: 11px; font-family: var(--f-serif); }
.site-footer strong{ color:#fff; }

/* ---------------------------------------------------------------------
   20. POPUP ADS
   --------------------------------------------------------------------- */
.popup-ad{ width: min(300px, 88vw); text-align:center; }
.popup-ad .win-body{ background:#fff; }
.popup-ad h4{ font-family: var(--f-display); font-size: 1.2rem; color: var(--red); margin-bottom: 8px; }
.popup-ad p{ font-size: 13px; margin-bottom: 12px; }

/* ---------------------------------------------------------------------
   21. BAGGY ASSISTANT
   --------------------------------------------------------------------- */
.baggy{
  position: fixed; bottom: 66px; right: 14px; z-index: 890;
  display:flex; align-items:flex-end; gap:8px;
  max-width: 300px;
}
.baggy[hidden]{ display:none; }
.baggy-bubble{
  background:#ffffe1; border:1px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  padding: 10px 12px; font-size:12px; border-radius: 8px; position:relative;
}
.baggy-bubble:after{
  content:""; position:absolute; bottom:-8px; right: 26px;
  border-width:8px 8px 0 0; border-style:solid; border-color:#ffffe1 transparent transparent transparent;
}
.baggy-buttons{ display:flex; gap:6px; margin-top:8px; }
.baggy-svg{ width:50px; height:50px; flex-shrink:0; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.5)); }

/* ---------------------------------------------------------------------
   22. WINAMP MINI PLAYER
   --------------------------------------------------------------------- */
.winamp-player{
  position: fixed; bottom: 40px; left: 14px; z-index: 880;
  width: 220px;
  background: linear-gradient(180deg,#3a3a3a,#1a1a1a);
  border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  font-family: var(--f-system);
  color: var(--lime);
}
.winamp-titlebar{
  background: linear-gradient(90deg,#0a2f6e,#1084d0);
  font-size: 10px; padding: 3px 5px; color:#fff; font-weight:bold;
  display:flex; justify-content:space-between; align-items:center;
}
.winamp-body{ padding: 6px 8px; }
.winamp-display{
  background:#001a00; border:1px solid #000; padding: 4px 6px; margin-bottom:6px;
  display:flex; justify-content:space-between; align-items:center;
}
.winamp-time{ font-family: var(--f-mono); font-size: 12px; }
.eq-bars{ display:flex; gap:2px; align-items:flex-end; height:14px; }
.eq-bars span{ width:3px; background: var(--lime); height: 3px; }
.winamp-player.playing .eq-bars span{ animation: eqAnim .9s ease-in-out infinite; }
.eq-bars span:nth-child(1){ animation-delay: 0s; }
.eq-bars span:nth-child(2){ animation-delay: .15s; }
.eq-bars span:nth-child(3){ animation-delay: .3s; }
.eq-bars span:nth-child(4){ animation-delay: .1s; }
@keyframes eqAnim{ 0%,100%{ height:3px; } 50%{ height: 14px; } }
.winamp-controls{ display:flex; gap:4px; align-items:center; }
.winamp-controls button{
  width: 26px; height: 22px; font-size: 11px; background:#444; color:#fff; border: 1px outset #777; cursor:pointer;
}
.winamp-controls button:active{ border-style: inset; }
.winamp-volume{ display:flex; align-items:center; gap:4px; margin-top:6px; }
.winamp-volume label{ font-size: 10px; }
.winamp-volume input{ flex:1; }

/* ---------------------------------------------------------------------
   23. TASKBAR / START MENU
   --------------------------------------------------------------------- */
.taskbar{
  position: fixed; bottom:0; left:0; right:0; height: 34px; z-index: var(--z-taskbar);
  background: linear-gradient(180deg, var(--win-face), #a8a8a8);
  border-top: 2px solid var(--bevel-lightest);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 6px;
  font-family: var(--f-system);
}
#start-btn{
  font-weight:bold; font-size: 13px; padding: 4px 12px 4px 8px;
}
.taskbar-tray{
  background: var(--win-face); border: 2px solid; border-color: var(--bevel-dark) var(--bevel-lightest) var(--bevel-lightest) var(--bevel-dark);
  padding: 3px 10px; font-size: 12px; display:flex; align-items:center; gap:6px;
}
#nice-badge{
  background: var(--acid); border:1px solid #000; padding:0 4px; font-weight:bold; font-size:10px;
}
#nice-badge[hidden]{ display:none; }

.start-menu{
  position: fixed; bottom: 34px; left: 4px; z-index: var(--z-startmenu);
  width: 220px;
  background: var(--win-face);
  border: 2px solid;
  border-color: var(--bevel-lightest) var(--bevel-darkest) var(--bevel-darkest) var(--bevel-lightest);
  box-shadow: 4px 4px 0 rgba(0,0,0,.4);
}
.start-menu[hidden]{ display:none; }
.start-menu-header{
  background: linear-gradient(180deg, var(--win-blue-2), var(--win-blue));
  color:#fff; font-family: var(--f-display); font-size: 14px; padding: 10px 8px;
}
.start-menu ul{ padding: 4px 0; }
.start-menu li{ }
.start-menu button{
  width:100%; text-align:left; background:none; border:none; padding: 8px 12px; font-size:13px; cursor:pointer;
}
.start-menu button:hover, .start-menu button:focus-visible{ background: var(--win-blue); color:#fff; }
.start-menu .divider{ height:1px; background: var(--bevel-dark); margin: 4px 0; box-shadow: 0 1px 0 var(--bevel-lightest); }

/* ---------------------------------------------------------------------
   24. SHUTDOWN OVERLAY
   --------------------------------------------------------------------- */
.shutdown-overlay{
  position: fixed; inset:0; background:#000; color:#fff; z-index: var(--z-shutdown);
  display:flex; align-items:center; justify-content:center; text-align:center;
  flex-direction:column; gap: 16px; padding: 20px;
  font-family: var(--f-system);
}
.shutdown-overlay[hidden]{ display:none; }
.shutdown-line1{ font-size: clamp(1.1rem, 4vw, 1.8rem); }
.shutdown-line2{ display:none; font-size: clamp(1rem, 3vw, 1.4rem); color: var(--lime); }
.shutdown-overlay.phase2 .shutdown-line1{ display:none; }
.shutdown-overlay.phase2 .shutdown-line2{ display:block; }
.shutdown-overlay .btn-98{ display:none; }
.shutdown-overlay.phase2 .btn-98{ display:inline-block; }

/* ---------------------------------------------------------------------
   25. MISC BANNERS (easter eggs)
   --------------------------------------------------------------------- */
.meme-mode-banner{
  position: fixed; top: 90px; left:50%; transform: translateX(-50%);
  z-index: 970; background:#000; color: var(--acid);
  font-family: var(--f-display); font-size: 1.4rem; padding: 10px 20px;
  border: 3px solid var(--acid);
}
.meme-mode-banner[hidden]{ display:none; }
body.meme-mode-active{ animation: memeModePulse 2.5s ease-in-out; }
@keyframes memeModePulse{
  0%{ filter: hue-rotate(0deg) invert(0); }
  25%{ filter: hue-rotate(120deg) invert(0); }
  50%{ filter: hue-rotate(240deg) invert(.15); }
  75%{ filter: hue-rotate(320deg) invert(0); }
  100%{ filter: hue-rotate(0deg) invert(0); }
}
.secret-message{
  position: fixed; top: 90px; left:50%; transform: translateX(-50%);
  z-index: 970; background: var(--purple); color:#fff;
  font-family: var(--f-mono); font-size: 1rem; padding: 10px 18px;
  border: 2px solid #fff;
}
.secret-message[hidden]{ display:none; }

/* ---------------------------------------------------------------------
   26. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 760px){
  .desktop-icons{
    position: static;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 4px;
    padding: 10px 4px 4px;
  }
  .desktop-icon{ position: static !important; width:auto; color:#052; text-shadow:none; }
  .desktop-icon .icon-glyph{ filter:none; }
  .desktop-icon span.label{ color:#023; }
  .desktop-icon:hover span.label, .desktop-icon:focus-visible span.label{ background:none; color: var(--win-blue); text-decoration: underline; }

  .comparison-grid{ grid-template-columns: 1fr; }
  .windows-row{ flex-direction: column; align-items: stretch; }
  .windows-row .win-window{ width: 100%; }
  .win-window.win-floating{ width: 92vw; max-height: 80vh; }
  .winamp-player{ width: 170px; left: 6px; bottom: 38px; }
  .baggy{ right:6px; bottom: 6px; max-width: 220px; }
  .baggy-svg{ width:38px; height:38px; }
  .hero-heading{ letter-spacing: 0; }
  .float-deco{ display:none; }
}

@media (max-width: 480px){
  .odometer span{ width:16px; font-size:16px; }
  .btn-hero{ font-size:15px; padding:10px 14px; }
}

/* ---------------------------------------------------------------------
   27. REDUCED MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .marquee-track{ animation: none; }
  .crt-flicker{ display:none; }
  .hero-tagline{ animation: none; }
}