/* =========================================================
   FUTURE GADGET LAB ARCHIVE — RUKAKO DATABASE
   Design tokens
   ========================================================= */
:root{
  --bg:            #0a0908;
  --bg-raised:     #131110;
  --panel:         #17140f;
  --panel-line:    #2a2420;
  --ink:           #d9d2c4;
  --ink-dim:       #837a6c;
  --ink-faint:     #4d473d;
  --crimson:       #7d1f2a;
  --crimson-bright:#c73e42;
  --amber:         #b8863b;
  --teal:          #2f6b62;
  --teal-bright:   #4fae9c;
  --green-crt:     #6ea87a;

  --font-display:  'Share Tech Mono', monospace;
  --font-data:     'JetBrains Mono', monospace;
  --font-body:     'Noto Sans JP', sans-serif;

  --dur: .25s;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  position:relative;
}

img{ max-width:100%; display:block; }
a{ color:var(--teal-bright); }
button{ font-family:inherit; }

::selection{ background:var(--crimson); color:#fff; }

/* scanline / crt overlay -------------------------------------------- */
.crt-overlay{
  pointer-events:none;
  position:fixed; inset:0; z-index:9000;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.12) 1px,
      rgba(0,0,0,0) 2px
    );
  mix-blend-mode:multiply;
  opacity:.5;
}
.crt-vignette{
  pointer-events:none;
  position:fixed; inset:0; z-index:8999;
  box-shadow: inset 0 0 12vw rgba(0,0,0,.85);
}
.crt-flicker{
  pointer-events:none;
  position:fixed; inset:0; z-index:9001;
  background:rgba(255,255,255,.02);
  animation:flicker 6.2s infinite;
}
@keyframes flicker{
  0%,93%,100%{opacity:0;}
  94%{opacity:.5;}
  95%{opacity:0;}
  96%{opacity:.3;}
  97%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .crt-flicker{ display:none; } }

.noise-pass{
  pointer-events:none;
  position:fixed; inset:0; z-index:8998;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================
   TOP STATUS BAR
   ========================================================= */
.statusbar{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-dim);
  background:var(--bg-raised);
  border-bottom:1px solid var(--panel-line);
  display:flex;
  justify-content:space-between;
  padding:6px 16px;
  position:sticky; top:0; z-index:500;
}
.statusbar span.online{ color:var(--green-crt); }
.statusbar .blink{ animation:blink 1.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

/* =========================================================
   NAV
   ========================================================= */
header.site-nav{
  position:sticky; top:23px; z-index:499;
  background:rgba(10,9,8,.9);
  backdrop-filter:blur(3px);
  border-bottom:1px solid var(--panel-line);
}
.nav-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px;
}
.lab-menu-label{
  font-family:var(--font-display);
  font-size:12px; color:var(--crimson-bright);
  letter-spacing:.15em;
  display:flex; align-items:center; gap:8px;
}
.lab-menu-label::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--crimson-bright);
  box-shadow:0 0 6px var(--crimson-bright);
  display:inline-block;
}
nav.links{ display:flex; gap:22px; }
nav.links a{
  font-family:var(--font-display);
  font-size:13px;
  text-decoration:none;
  color:var(--ink-dim);
  letter-spacing:.05em;
  padding:4px 2px;
  border-bottom:1px solid transparent;
  transition:color var(--dur), border-color var(--dur);
}
nav.links a:hover, nav.links a:focus-visible{
  color:var(--teal-bright);
  border-color:var(--teal-bright);
  outline:none;
}
.hamburger{
  display:none;
  background:none; border:1px solid var(--panel-line);
  color:var(--ink); width:38px; height:34px;
  cursor:pointer;
}
.hamburger span{
  display:block; width:18px; height:2px; background:var(--ink);
  margin:3px auto;
}

@media (max-width: 860px){
  nav.links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--bg-raised);
    border-bottom:1px solid var(--panel-line);
  }
  nav.links.open{ display:flex; }
  nav.links a{ padding:14px 20px; border-bottom:1px solid var(--panel-line); }
  .hamburger{ display:block; }
}

/* focus visibility everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal-bright);
  outline-offset:2px;
}

/* =========================================================
   LAYOUT / PANELS
   ========================================================= */
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
section{ padding:70px 0; border-bottom:1px solid var(--panel-line); }
.eyebrow{
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--crimson-bright);
  margin:0 0 10px;
}
h2.section-title{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,32px);
  color:var(--ink);
  margin:0 0 26px;
  letter-spacing:.02em;
}
.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  padding:24px;
  position:relative;
}
.panel::before{
  content:"";
  position:absolute; top:6px; left:6px; right:6px; bottom:6px;
  border:1px solid rgba(255,255,255,.03);
  pointer-events:none;
}
.corner-tag{
  position:absolute; top:-1px; right:-1px;
  font-family:var(--font-data); font-size:9px; letter-spacing:.1em;
  background:var(--crimson); color:#fff;
  padding:2px 6px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:60px 0 80px;
  position:relative;
  border-bottom:1px solid var(--panel-line);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:40px;
  align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-copy .eyebrow{ margin-bottom:14px; }
.hero-copy h1{
  font-family:var(--font-display);
  font-size:clamp(38px,6vw,64px);
  line-height:1;
  margin:0;
  color:var(--ink);
  text-shadow:0 0 14px rgba(199,62,66,.25);
}
.hero-copy .nickname{
  font-family:var(--font-display);
  font-size:clamp(18px,2.4vw,24px);
  color:var(--teal-bright);
  margin:10px 0 20px;
}
.hero-copy .nickname::before{ content:"“"; }
.hero-copy .nickname::after{ content:"”"; }
.hero-copy p.lede{
  color:var(--ink-dim);
  max-width:46ch;
  margin-bottom:26px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:var(--font-display);
  font-size:13px; letter-spacing:.05em;
  padding:11px 18px;
  border:1px solid var(--teal-bright);
  color:var(--teal-bright);
  background:transparent;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:background var(--dur), color var(--dur);
}
.btn:hover, .btn:focus-visible{ background:var(--teal-bright); color:#08130f; }
.btn.alt{ border-color:var(--crimson-bright); color:var(--crimson-bright); }
.btn.alt:hover, .btn.alt:focus-visible{ background:var(--crimson-bright); color:#1a0506; }

/* portrait frame - CSS placeholder art (no external image asset) */
.portrait-frame{
  position:relative;
  border:1px solid var(--panel-line);
  background:
    radial-gradient(circle at 30% 20%, rgba(79,174,156,.12), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(199,62,66,.12), transparent 55%),
    linear-gradient(180deg, #14100e, #0a0908);
  aspect-ratio:3/4;
  overflow:hidden;
}
.portrait-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.portrait-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px;
  color:var(--ink-faint);
  font-family:var(--font-data);
  text-align:center;
  padding:20px;
}
.portrait-placeholder svg{ width:46%; opacity:.5; }
.portrait-placeholder small{ font-size:10px; letter-spacing:.08em; }
.portrait-frame .scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(79,174,156,.05) 3px 4px);
  pointer-events:none;
}
.portrait-frame .hud{
  position:absolute; left:10px; right:10px; bottom:10px;
  font-family:var(--font-data); font-size:10px; color:var(--green-crt);
  display:flex; justify-content:space-between;
  border-top:1px solid rgba(110,168,122,.3);
  padding-top:6px;
}

/* status readout block */
.readout{
  margin-top:24px;
  font-family:var(--font-data);
  font-size:12px;
  background:var(--bg-raised);
  border:1px solid var(--panel-line);
  padding:14px 16px;
  color:var(--green-crt);
}
.readout .line{ display:flex; justify-content:space-between; padding:2px 0; }
.readout .line .k{ color:var(--ink-dim); }
.readout .note{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--panel-line);
  color:var(--ink-faint); font-size:10.5px; font-family:var(--font-body);
}

/* =========================================================
   MICROWAVE / PHONE MICROWAVE MOTIF (decorative SVG unit)
   ========================================================= */
.lab-equipment{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:40px;
  align-items:center;
}
@media (max-width:900px){ .lab-equipment{ grid-template-columns:1fr; } }
.device-shell{
  background:linear-gradient(180deg,#1c1815,#0d0b09);
  border:1px solid var(--panel-line);
  padding:22px;
  position:relative;
}
.device-shell svg{ width:100%; height:auto; display:block; }
.device-led{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.device-readout-panel{
  font-family:var(--font-data);
  font-size:12px;
  background:var(--bg-raised);
  border:1px solid var(--panel-line);
  padding:16px;
  margin-top:16px;
}
.device-readout-panel .row{ display:flex; justify-content:space-between; padding:3px 0; color:var(--ink-dim); }
.device-readout-panel .row b{ color:var(--amber); font-weight:400; }

/* =========================================================
   SPOILER SYSTEM
   ========================================================= */
.spoiler-toggle{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:12px;
  color:var(--crimson-bright);
  background:rgba(125,31,42,.12);
  border:1px solid var(--crimson);
  padding:9px 14px;
  cursor:pointer;
  margin-bottom:18px;
}
.spoiler-toggle:hover{ background:rgba(125,31,42,.25); }
.spoiler-block{
  display:none;
  border-left:2px solid var(--crimson);
  padding-left:16px;
  margin-top:10px;
}
.spoiler-block.revealed{ display:block; }
.no-spoiler-tag{
  font-family:var(--font-data); font-size:10px; letter-spacing:.08em;
  color:var(--teal-bright); border:1px solid var(--teal); padding:2px 8px;
  display:inline-block; margin-bottom:10px;
}

/* =========================================================
   BIO / INFO TABLE
   ========================================================= */
.info-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--panel-line); border:1px solid var(--panel-line);
}
@media (max-width:640px){ .info-grid{ grid-template-columns:1fr; } }
.info-cell{ background:var(--panel); padding:14px 18px; }
.info-cell .label{ font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; }
.info-cell .value{ margin-top:4px; }
.info-cell .value .unverified{ color:var(--amber); font-size:11px; }

/* =========================================================
   CHARACTER ANALYSIS
   ========================================================= */
.analysis-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width:900px){ .analysis-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .analysis-grid{ grid-template-columns:1fr;} }
.rel-card{
  background:var(--panel); border:1px solid var(--panel-line);
  padding:16px;
}
.rel-card h3{ margin:0 0 6px; font-family:var(--font-display); font-size:14px; color:var(--teal-bright); }
.rel-card p{ margin:0; color:var(--ink-dim); font-size:14px; }
.rel-thumb{
  position:relative;
  width:100%; aspect-ratio:1; margin-bottom:10px;
  background:repeating-linear-gradient(45deg, #1a1613, #1a1613 8px, #100d0b 8px, #100d0b 16px);
  border:1px solid var(--panel-line);
  overflow:hidden;
}
.rel-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.rel-thumb-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint); text-align:center; padding:6px;
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.gallery-filters button{
  font-family:var(--font-data); font-size:11px; letter-spacing:.04em;
  background:var(--bg-raised); border:1px solid var(--panel-line); color:var(--ink-dim);
  padding:7px 12px; cursor:pointer;
}
.gallery-filters button.active, .gallery-filters button:hover{
  border-color:var(--teal-bright); color:var(--teal-bright);
}
.masonry{
  columns:4 220px; column-gap:12px;
}
@media (max-width:640px){ .masonry{ columns:2 160px; } }
.g-item{
  break-inside:avoid; margin-bottom:12px;
  border:1px solid var(--panel-line);
  background:var(--panel);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.g-item .ph{
  position:relative;
  width:100%;
  aspect-ratio: var(--ar, 1);
  background:linear-gradient(145deg,#1b1613,#0d0b09);
  overflow:hidden;
}
.ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.ph-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
  font-family:var(--font-data); font-size:10px; text-align:center; padding:10px;
}
.g-item .cap{
  font-family:var(--font-data); font-size:10px; color:var(--ink-dim);
  padding:6px 8px; border-top:1px solid var(--panel-line);
  display:flex; justify-content:space-between;
}
.g-item:hover .ph{ outline:1px solid var(--teal-bright); outline-offset:-1px; }
.g-item:focus-visible{ outline:2px solid var(--teal-bright); }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:9500;
  background:rgba(4,3,3,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{ max-width:900px; width:100%; position:relative; }
.lightbox-img{
  position:relative;
  width:100%; aspect-ratio:4/3;
  background:linear-gradient(145deg,#1c1613,#0a0908);
  border:1px solid var(--panel-line);
  overflow:hidden;
}
.lightbox-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
.lightbox-meta{
  display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--font-data); font-size:12px; color:var(--ink-dim);
}
.lightbox-close{
  position:absolute; top:-40px; right:0;
  background:none; border:1px solid var(--panel-line); color:var(--ink);
  width:34px; height:34px; cursor:pointer; font-size:16px;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); border:1px solid var(--panel-line); color:var(--ink);
  width:38px; height:44px; cursor:pointer; font-size:18px;
}
.lightbox-nav.prev{ left:-50px; }
.lightbox-nav.next{ right:-50px; }
@media (max-width:800px){
  .lightbox-nav.prev{ left:4px; } .lightbox-nav.next{ right:4px; }
}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{
  position:relative;
  padding-left:26px;
  border-left:2px solid var(--panel-line);
}
.t-item{ position:relative; margin-bottom:34px; }
.t-item::before{
  content:""; position:absolute; left:-32px; top:4px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--teal-bright);
}
.t-item .t-date{
  font-family:var(--font-data); font-size:11px; color:var(--amber); letter-spacing:.06em;
}
.t-item h3{ margin:4px 0 6px; font-family:var(--font-display); font-size:16px; }
.t-item p{ margin:0; color:var(--ink-dim); font-size:14px; }
.divergence-tag{
  display:inline-block; margin-top:6px;
  font-family:var(--font-data); font-size:10px;
  border:1px solid var(--teal); color:var(--teal-bright);
  padding:2px 7px;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{ border-bottom:1px solid var(--panel-line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none;
  color:var(--ink); font-family:var(--font-display); font-size:14px;
  padding:16px 4px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-q:hover{ color:var(--teal-bright); }
.faq-q .ind{ font-family:var(--font-data); color:var(--ink-faint); }
.faq-a{ display:none; padding:0 4px 18px; color:var(--ink-dim); font-size:14px; max-width:70ch; }
.faq-a.open{ display:block; }
.faq-spoiler-flag{ color:var(--crimson-bright); font-family:var(--font-data); font-size:10px; margin-left:8px; }

/* =========================================================
   NEOCITIES / RETRO WIDGETS
   ========================================================= */
.retro-strip{
  display:flex; flex-wrap:wrap; gap:14px;
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
}
.retro-box{
  border:1px solid var(--panel-line); background:var(--bg-raised);
  padding:10px 14px; flex:1 1 200px;
}
.retro-box .n{ color:var(--green-crt); font-size:16px; }
.badge-construction{
  display:inline-block; font-family:var(--font-data); font-size:10px;
  background:repeating-linear-gradient(45deg, var(--amber), var(--amber) 8px, #1a1613 8px, #1a1613 16px);
  color:#0a0908; padding:3px 8px; font-weight:700;
}

/* footer */
footer{
  padding:40px 0 60px;
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
  text-align:center;
}
footer .glyph{ letter-spacing:.3em; color:var(--panel-line); margin-bottom:10px; }

/* sound toggle */
.sound-toggle{
  position:fixed; bottom:16px; right:16px; z-index:400;
  font-family:var(--font-data); font-size:10px;
  background:var(--bg-raised); border:1px solid var(--panel-line); color:var(--ink-dim);
  padding:8px 10px; cursor:pointer;
}

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:9999;
  background:var(--crimson); color:#fff; padding:10px 14px;
  font-family:var(--font-data); font-size:12px;
}
.skip-link:focus{ left:10px; top:10px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}