/* SS Adec hooks.
   Drop your own copies of these font files into assets/fonts/.
   The site falls back gracefully until they are present. */
@font-face{
  font-family:"SS Adec Text";
  src:url("assets/fonts/SS_Adec2.0_text.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"SS Adec Main";
  src:url("assets/fonts/SS_Adec2.0_main.ttf") format("truetype");
  font-display:swap;
}

:root{
  --bg:#050303;
  --screen:#080505;
  --wine:#250507;
  --wine2:#3e090c;
  --line:#612023;
  --red:#c53b3b;
  --red2:#e34e48;
  --paper:#c9aa86;
  --text:#d7c9bb;
  --muted:#927d73;
  --metal:#796f66;
}
*{box-sizing:border-box}
html{background:#171310}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at center,#2a211b 0,#12100e 62%,#080706 100%);
  color:var(--text);
  font-family:Verdana, Geneva, sans-serif;
  cursor:none;
  overflow-x:hidden;
}
a,button{cursor:none}
.fly-cursor{
  position:fixed;
  left:0;top:0;
  width:30px;height:30px;
  background:url("images/fly.gif") center/contain no-repeat;
  pointer-events:none;
  z-index:10000;
  transform:translate(-3px,-3px) rotate(-8deg);
  image-rendering:pixelated;
  filter:drop-shadow(1px 2px 1px #000);
}
.fly-cursor::after{
  content:"";
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:#544;
  left:12px;top:12px;
  animation:wingbuzz .08s steps(2) infinite alternate;
  opacity:.28
}
@keyframes wingbuzz{to{transform:scaleX(2.5)}}

.crt{
  width:min(1540px,99vw);
  margin:7px auto;
  padding:42px 48px 82px;
  position:relative;
  border:7px solid #665f56;
  border-radius:24px;
  background:
    linear-gradient(#8b8377,#514b43 14%,#777064 49%,#4b4640 52%,#71695e 100%);
  box-shadow:
    inset 0 0 0 3px #201d19,
    inset 0 0 0 8px #9b9386,
    0 18px 50px #000;
}
.crt::before{
  content:"";
  position:absolute;inset:13px;
  border:2px solid #26221e;
  border-radius:16px;
  pointer-events:none
}
.crt::after{
  content:"ELYTECH   CRT-9000     — MUNICIPAL TERMINAL —";
  position:absolute;
  left:315px;bottom:25px;
  color:#28231f;
  font:700 13px "Lucida Console",monospace;
  letter-spacing:.08em;
  text-shadow:0 1px #a39b90;
}
.screen{
  position:relative;
  border:13px solid #151311;
  border-radius:12px;
  background:#040303;
  min-height:860px;
  overflow:hidden;
  box-shadow:inset 0 0 38px #000, 0 0 0 2px #978d7d;
}
.screen::before{
  content:"";
  position:absolute;inset:0;z-index:30;pointer-events:none;
  background:
   repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.22) 3px 4px),
   radial-gradient(ellipse at center,transparent 57%,rgba(0,0,0,.72) 100%);
  opacity:.75;
}
.screen::after{
  content:"";
  position:absolute;inset:-10%;
  pointer-events:none;z-index:29;
  background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.025) 44%,transparent 70%);
}
.osbar{
  height:31px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #2c0e10;
  padding:0 15px;
  font:10px "Lucida Console",monospace;
  color:#b53031;
  letter-spacing:.1em;
}
.terminal{
  padding:10px;
}
.grid-head{
  display:grid;
  grid-template-columns:1.1fr 1.55fr 1fr;
  gap:7px;
}
.panel{
  position:relative;
  border:1px solid #342526;
  background:
    linear-gradient(180deg,rgba(72,8,11,.24),rgba(5,3,3,.88)),
    #080404;
  box-shadow:
    inset 0 0 0 2px #090606,
    inset 0 0 18px #000,
    0 0 0 1px #090606;
}
.panel::before,.panel::after{
  content:"";
  position:absolute;
  width:24px;height:3px;background:#8f2728;
  opacity:.55;
}
.panel::before{left:7px;top:5px}
.panel::after{right:7px;bottom:5px}
.metal{
  border:2px solid #665f57;
  outline:1px solid #181514;
  box-shadow:
    inset 0 0 0 2px #161313,
    inset 0 0 0 3px #4b4540,
    0 0 0 1px #0b0908;
}
.title{
  margin:0;
  color:#d6423d;
  font:700 11px "Lucida Console",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand{
  min-height:128px;
  display:grid;place-items:center;
  text-align:center;
}
.brand h1{
  margin:0;
  font:normal clamp(35px,4vw,65px) Georgia, "Times New Roman",serif;
  letter-spacing:.19em;
  color:#d9c2a7;
  text-shadow:2px 2px #2d0908,0 0 7px #431111;
}
.slogan{
  margin-top:10px;
  color:#df3f39;
  font:14px "Lucida Console",monospace;
  letter-spacing:.16em;
}
.message-panel,.visitor-panel{min-height:128px;padding:15px 18px}
.logs{margin-top:8px;font:9px/1.65 "Lucida Console",monospace;color:#bb8a72}
.logs div::before{content:"> ";color:#d23a37}
.counter{display:flex;gap:4px;margin:14px auto 0;justify-content:center}
.counter b{
  display:grid;place-items:center;
  width:30px;height:42px;
  background:linear-gradient(#171110,#050303);
  border:1px solid #6c6058;
  box-shadow:inset 0 0 0 2px #111;
  color:#eadbca;
  font:22px "Lucida Console",monospace;
}
.main-grid{
  display:grid;
  grid-template-columns:190px 34px minmax(550px,1fr) 34px 165px 190px;
  gap:7px;
  margin-top:7px;
  align-items:stretch;
}
.side-access{padding:13px;min-height:480px}
.lock{font-size:52px;color:#8d2528;text-align:center;margin:42px 0 18px}
.mono{font:9px/1.7 "Lucida Console",monospace;color:#c9a98e}
.action{
  display:block;
  margin-top:18px;
  padding:10px 8px;
  color:#df433e;
  font:10px "Lucida Console",monospace;
  text-decoration:none;
  border:1px solid #5b171a;
  background:#140506;
}
.action:hover{background:#3b0c0e;color:#fff}
.flesh{
  min-height:480px;
  position:relative;
  border:2px solid #49403a;
  overflow:hidden;
  background:#130305;
  box-shadow:inset 0 0 9px #000;
}
.flesh::before,.flesh::after{
  content:"";
  position:absolute;inset:-8%;
  background:
    url("assets/art/flesh_strip_left.png") 50%/cover no-repeat;
  filter:saturate(1.15) contrast(1.12);
  animation:breathe 2.8s ease-in-out infinite;
  transform-origin:center;
}
.flesh::after{
  opacity:.22;
  mix-blend-mode:screen;
  animation-duration:1.7s;
}
@keyframes breathe{
  0%,100%{transform:scale(1.01,1.00);filter:saturate(1.0) brightness(.74)}
  50%{transform:scale(1.09,1.025);filter:saturate(1.35) brightness(1.05)}
}
.city-index{padding:11px;min-height:480px}
.city-title{text-align:center;margin-bottom:9px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cat{
  min-height:91px;
  color:#d9cbbd;
  text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px;
  font:11px/1.45 "Lucida Console",monospace;
  text-align:center;
  border:2px solid #756b62;
  background:
    radial-gradient(circle at 50% 50%,#350a0d 0,#140405 65%,#060303 100%);
  outline:1px solid #100d0c;
  box-shadow:inset 0 0 0 2px #171110,inset 0 0 20px #000;
}
.cat:hover{
  filter:brightness(1.25);
  color:#fff;
  border-color:#9c8e80;
}
.cat i{font-style:normal;font-size:26px;color:#a82d30}
.recovered{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;margin-top:8px;
}
.photo-slot{
  min-height:100px;
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),
    url("assets/art/recovered_photo_slot.png") center/cover no-repeat;
  border:2px solid #5c5148;
  overflow:hidden;
}
.photo-slot .photo-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,5,5,.18);
}
.photo-slot a{
  padding:11px 16px;
  background:#a78e6b;
  color:#1c1411;text-decoration:none;
  font:700 10px Georgia,serif;
  border:1px solid #392b22;
}
.status{padding:12px;min-height:480px}
.ekg{height:63px;position:relative}
.ekg::before{
  content:"────╱╲╱╲────";
  position:absolute;top:18px;left:5px;
  color:#c12d30;font:21px monospace;letter-spacing:-4px;
}
.statusrow{
  display:flex;justify-content:space-between;
  border-bottom:1px solid #321012;
  padding:9px 0;
  font:8px "Lucida Console",monospace;color:#b9a18e
}
.statusrow strong{color:#d6413b;font-weight:normal}
.right-stack{display:grid;grid-template-rows:220px 105px 143px;gap:7px}
.feature{padding:10px}
.feature a{text-decoration:none}
.news-thumb{
  height:145px;margin-top:8px;
  background:url("assets/art/bulletin_art.png") center/cover no-repeat;
  filter:sepia(.3) contrast(1.04);
}
.eq{
  display:flex;align-items:end;gap:4px;height:35px;padding:3px 10px;
}
.eq i{width:6px;background:#a72123;animation:eq .8s steps(4) infinite alternate}
.eq i:nth-child(2n){animation-duration:.45s}.eq i:nth-child(3n){animation-duration:1.15s}
@keyframes eq{from{height:5px}to{height:31px}}
.weather{font:9px/1.55 "Lucida Console",monospace;color:#c9a98f}
.bottom-grid{
  display:grid;
  grid-template-columns:1.15fr 1.15fr 1.3fr 1.2fr;
  gap:7px;
  margin-top:7px;
}
.bottom-card{min-height:160px;padding:10px;text-align:center}
.thumb{
  height:87px;margin:8px 0;
  border:1px solid #241012;background:#080404 center/cover no-repeat;
}
.thumb.posters{background-image:url("assets/art/band_posters.png")}
.thumb.skags{background-image:url("assets/art/skags_store.png")}
.thumb.collect{background-image:url("assets/art/collectible_icon.png")}
.reg-face{
  height:87px;margin:8px 0;
  display:grid;place-items:center;
  border:1px solid #241012;background:#060303;
  font-size:42px;color:#b52e30;
}
.bottom-card a{color:#d43c38;font:9px "Lucida Console",monospace;text-decoration:none}
.footer{
  margin-top:7px;
  border-top:1px solid #3a1113;
  padding:11px 10px 7px;
  display:flex;justify-content:center;gap:23px;flex-wrap:wrap;
  font:8px "Lucida Console",monospace;
}
.footer a{color:#b92d2d;text-decoration:none}
.footer a:hover{color:#fff}
.bezel-power{
  position:absolute;
  right:72px;bottom:17px;
  display:flex;align-items:center;gap:13px;
  z-index:4;
}
.power-btn{
  width:53px;height:53px;border-radius:6px;
  border:3px solid #26201c;
  background:radial-gradient(circle,#c82d27 0 10%,#47100f 42%,#17100e 72%);
  color:#ff6758;font-size:28px;
  box-shadow:inset 0 0 0 2px #867c70,0 2px 4px #000;
}
.power-label{color:#28231f;font:700 11px "Lucida Console",monospace;letter-spacing:.06em}
.power-led{
  position:absolute;left:76px;bottom:32px;
  display:flex;align-items:center;gap:8px;
  color:#28231f;font:700 9px "Lucida Console",monospace;
}
.power-led i{width:9px;height:9px;background:#6df337;border-radius:50%;box-shadow:0 0 7px #4cff1c}
.shutdown-overlay{
  position:fixed;inset:0;background:#000;z-index:9998;
  display:none;align-items:center;justify-content:center;
  color:#7b1717;font:16px "Lucida Console",monospace;
}
.shutdown-overlay.on{display:flex;animation:off 1s forwards}
@keyframes off{
  0%{clip-path:inset(0 0 0 0);filter:brightness(1)}
  70%{clip-path:inset(49% 0 49% 0);filter:brightness(4)}
  100%{clip-path:inset(50% 0 50% 0);filter:brightness(0)}
}
.shutdown-msg{animation:msg 1.2s 1.1s forwards;opacity:0}
@keyframes msg{to{opacity:1}}
.page{
  width:min(1200px,96%);
  margin:8px auto;
  min-height:650px;padding:18px;
}
.page h1{font:normal 42px Georgia,serif;letter-spacing:.1em;color:#d7c0a7}
.page .back{color:#cf3936;font:10px "Lucida Console",monospace}
.page-content{
  margin-top:18px;padding:18px;min-height:430px;
  border:2px solid #655e56;
  background:linear-gradient(#260608,#090303);
  box-shadow:inset 0 0 28px #000;
}
@media(max-width:1100px){
 .crt{padding:28px 20px 75px}
 .main-grid{grid-template-columns:175px 26px 1fr 26px 150px}
 .right-stack{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr;grid-template-rows:none}
 .bottom-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
 body{cursor:auto}
 a,button{cursor:pointer}
 .fly-cursor{display:none}
 .crt{width:100%;margin:0;border-radius:0;padding:22px 7px 70px}
 .screen{border-width:7px}
 .grid-head{grid-template-columns:1fr}
 .main-grid{grid-template-columns:1fr}
 .flesh{min-height:24px;height:24px}
 .side-access,.status{min-height:auto}
 .cat-grid{grid-template-columns:repeat(2,1fr)}
 .right-stack{grid-template-columns:1fr}
 .bottom-grid{grid-template-columns:1fr}
 .crt::after{left:28px;font-size:9px}
 .bezel-power{right:20px}
}


/* ==========================================================
   V4 — APPROVED HEAVY METAL FRAME ASSETS
   These frames are cropped directly from the approved CRT mockup.
   ========================================================== */

.panel.metal{
  border:0;
  outline:0;
  box-shadow:none;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(71,10,13,.52),rgba(11,3,4,.96) 70%),
    #080404;
}
.panel.metal::before{
  content:"";
  position:absolute;
  inset:-1px;
  width:auto;height:auto;
  background:url("assets/ui/panel_frame.png") 50% 50%/100% 100% no-repeat;
  opacity:1;
  z-index:8;
  pointer-events:none;
}
.panel.metal::after{display:none}

.cat{
  position:relative;
  border:0;
  outline:0;
  box-shadow:none;
  background:
    radial-gradient(ellipse at center,#3d0b0f 0,#160405 66%,#050202 100%);
  overflow:hidden;
  min-height:103px;
}
.cat::before{
  content:"";
  position:absolute;inset:-1px;
  background:url("assets/ui/category_frame.png") center/100% 100% no-repeat;
  z-index:4;pointer-events:none;
}
.cat span,.cat i{position:relative;z-index:5}
.cat:hover{border:0;filter:brightness(1.22) drop-shadow(0 0 5px #541417)}

.bottom-card{
  position:relative;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(ellipse at center,#30080b 0,#100304 73%,#050202 100%) !important;
  overflow:hidden;
  padding:18px 19px 16px;
}
.bottom-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:url("assets/ui/bottom_frame.png") center/100% 100% no-repeat !important;
  z-index:8;
  pointer-events:none;
}
.bottom-card > *{position:relative;z-index:9}

/* The approved mockup's borders are intentionally chunky. */
.city-index{padding:15px 17px 17px}
.main-grid{gap:9px}
.bottom-grid{gap:10px}
.grid-head{gap:9px}

/* ==========================================================
   BRIGHT / GLITCHED ELYSIAN MASTHEAD
   ========================================================== */
.glitch-title{
  position:relative;
  display:inline-block;
  color:#fff1d9 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-shadow:
    0 0 2px #fff,
    0 0 7px #ff9d6f,
    0 0 16px #d93032,
    3px 0 0 rgba(255,23,50,.65),
    -3px 0 0 rgba(61,224,255,.32) !important;
  animation:titleFlicker 3.8s infinite steps(1);
}
.glitch-title::before,
.glitch-title::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.glitch-title::before{
  color:#ff3342;
  transform:translate(2px,0);
  clip-path:inset(0 0 58% 0);
  opacity:.7;
  animation:glitchTop 2.1s infinite steps(2,end);
}
.glitch-title::after{
  color:#7cefff;
  transform:translate(-2px,0);
  clip-path:inset(55% 0 0 0);
  opacity:.38;
  animation:glitchBottom 1.75s infinite steps(2,end);
}
@keyframes titleFlicker{
  0%,8%,11%,53%,57%,100%{filter:brightness(1)}
  9%{filter:brightness(1.8)}
  10%{filter:brightness(.35)}
  54%{filter:brightness(2.1)}
  55%{filter:brightness(.6)}
}
@keyframes glitchTop{
  0%,84%,100%{transform:translate(2px,0)}
  85%{transform:translate(-7px,-1px)}
  88%{transform:translate(8px,1px)}
  91%{transform:translate(1px,0)}
}
@keyframes glitchBottom{
  0%,77%,100%{transform:translate(-2px,0)}
  78%{transform:translate(9px,1px)}
  82%{transform:translate(-8px,-1px)}
  86%{transform:translate(-1px,0)}
}
.small-glitch{font-size:clamp(28px,5vw,52px)!important}

.thumb.businesses{
  background-image:
    linear-gradient(rgba(20,2,4,.08),rgba(20,2,4,.08)),
    url("assets/art/city_businesses.png");
}

.directory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin-top:18px;
}
.directory-grid a,.directory-grid span{
  min-height:85px;
  display:grid;place-items:center;
  text-align:center;
  padding:12px;
  color:#ddbbb1;
  text-decoration:none;
  font:10px "Lucida Console",monospace;
  background:radial-gradient(circle,#360a0d,#090303);
  position:relative;
}
.directory-grid a::before,.directory-grid span::before{
  content:"";
  position:absolute;inset:0;
  background:url("assets/ui/category_frame.png") center/100% 100% no-repeat;
  pointer-events:none;
}
.directory-grid a:hover{filter:brightness(1.25)}


/* ==========================================================
   V5 — SHARPER FRAME ASSETS + LOGO/SPACING FIX
   ========================================================== */

/* Switch all metalwork to the sharpened 3x assets. */
.panel.metal::before{
  background-image:url("assets/ui/panel_frame_sharp.png") !important;
  image-rendering:auto;
}
.cat::before,
.directory-grid a::before,
.directory-grid span::before{
  background-image:url("assets/ui/category_frame_sharp.png") !important;
  image-rendering:auto;
}
.bottom-card::before{
  background-image:url("assets/ui/bottom_frame_sharp.png") !important;
  image-rendering:auto;
}

/* Give the title panel enough breathing room so the lettering never intersects the metal. */
.brand{
  min-height:148px !important;
  padding:20px 38px 24px !important;
  overflow:hidden;
}
.brand-copy{
  position:relative;
  z-index:12;
  width:100%;
  display:flex;
  min-height:104px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 18px 6px;
}
.brand h1{
  margin:0 !important;
  max-width:100%;
  font-size:clamp(30px,3.55vw,56px) !important;
  line-height:.98 !important;
  white-space:nowrap;
  transform:none !important;
}

/* Slogan was being visually swallowed by the frame/scanlines. Make it an explicit second line. */
.slogan{
  display:block !important;
  position:relative;
  z-index:14;
  margin:0 !important;
  color:#ff534c !important;
  font:700 clamp(10px,1vw,14px) "Lucida Console",monospace !important;
  letter-spacing:.18em !important;
  line-height:1.4 !important;
  text-align:center;
  text-shadow:
    0 0 2px #ffb0a5,
    0 0 7px #e62f2c,
    0 0 13px rgba(196,25,26,.72) !important;
  animation:sloganPulse 3.2s ease-in-out infinite;
}
@keyframes sloganPulse{
  0%,100%{opacity:.78;filter:brightness(.95)}
  50%{opacity:1;filter:brightness(1.25)}
}

/* Keep glitch layers clipped to the lettering, not the whole frame. */
.glitch-title{
  isolation:isolate;
  padding:0 .03em;
}
.glitch-title::before,
.glitch-title::after{
  line-height:.98;
}

/* Slightly thicken the panel visuals without enlarging layout dimensions. */
.panel.metal::before{inset:-3px !important}
.cat::before{inset:-3px !important}
.bottom-card::before{inset:-4px !important}

/* Tone down browser-side pixelation on these specific UI assets. */
.panel.metal,.cat,.bottom-card{image-rendering:auto}

/* On smaller screens, allow logo wrapping only if absolutely necessary. */
@media(max-width:900px){
  .brand h1{font-size:clamp(27px,5.8vw,46px) !important}
  .brand{min-height:138px !important;padding:18px 26px 22px !important}
}
@media(max-width:620px){
  .brand h1{white-space:normal;text-align:center}
  .brand-copy{gap:7px}
  .slogan{font-size:9px !important;letter-spacing:.12em !important}
}


/* ==========================================================
   V6 — FIT / BORDER / CRT DIRT / SCREEN-ONLY SHUTDOWN PASS
   ========================================================== */

/* Use the newly refined border assets. */
.panel.metal::before{
  background-image:url("assets/ui/panel_frame_refined.png") !important;
}
.cat::before,
.directory-grid a::before,
.directory-grid span::before{
  background-image:url("assets/ui/category_frame_refined.png") !important;
}
.bottom-card::before{
  background-image:url("assets/ui/bottom_frame_refined.png") !important;
}

/* Keep all live content safely inside metal frames. */
.panel.metal,
.cat,
.bottom-card,
.feature,
.message-panel,
.visitor-panel,
.city-index,
.side-access,
.status{
  overflow:hidden !important;
}
.panel.metal > *,
.bottom-card > *,
.feature > *{
  max-width:100%;
}

/* Header: prevent ELYSIAN FIELDS or its glitch copies from ever leaving the frame. */
.brand{
  min-height:152px !important;
  padding:24px 46px 26px !important;
  overflow:hidden !important;
}
.brand-copy{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  padding:6px 22px 8px !important;
}
.brand h1{
  display:block;
  width:100%;
  max-width:100%;
  font-size:clamp(27px,3.15vw,50px) !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:clip;
}
.glitch-title::before,
.glitch-title::after{
  width:100%;
  max-width:100%;
  overflow:hidden !important;
}
.slogan{
  margin-top:5px !important;
  font-size:clamp(9px,.86vw,13px) !important;
  letter-spacing:.14em !important;
  white-space:nowrap;
}

/* Make every framed block use comfortable internal gutters. */
.message-panel,.visitor-panel{padding:18px 26px !important}
.side-access{padding:18px 20px !important}
.status{padding:18px 17px !important}
.city-index{padding:16px 18px 20px !important}
.feature{padding:15px 16px !important}
.bottom-card{padding:18px 22px 20px !important}

/* Category buttons: center content and stop any icon/text clipping. */
.cat{
  min-height:104px !important;
  padding:18px 22px !important;
  gap:10px !important;
}
.cat span{
  display:block;
  max-width:calc(100% - 40px);
  overflow-wrap:anywhere;
}

/* Fix right-column sizing, especially City Bulletin. */
.right-stack{
  grid-template-rows:236px 116px 148px !important;
}
.feature-link{
  display:flex;
  height:100%;
  min-height:0;
  flex-direction:column;
  text-decoration:none;
}
.bulletin-card{
  min-height:0;
}
.news-thumb{
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
  margin:9px 2px 7px !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}
.feature-cta{
  flex:0 0 auto;
  color:#d43b37;
  font:9px "Lucida Console",monospace;
  text-align:center;
  border-top:1px solid #4f1719;
  padding:7px 3px 3px;
}

/* Slightly increase column breathing room so frames don't crush their contents. */
.main-grid{
  grid-template-columns:200px 38px minmax(600px,1fr) 38px 180px 210px !important;
  gap:9px !important;
}
.grid-head{
  grid-template-columns:1.15fr 1.55fr 1fr !important;
}
.bottom-grid{
  gap:10px !important;
}

/* ----------------------------------------------------------
   OLD, DIRTY CRT CHASSIS
   ---------------------------------------------------------- */
.crt{
  background:
    /* greasy stains */
    radial-gradient(circle at 15% 22%,rgba(42,27,17,.42) 0 2%,transparent 8%),
    radial-gradient(circle at 77% 17%,rgba(35,24,16,.35) 0 1.5%,transparent 7%),
    radial-gradient(circle at 58% 84%,rgba(34,21,14,.42) 0 2%,transparent 9%),
    /* yellowed plastic */
    linear-gradient(#736b5f,#4f4a42 13%,#686156 47%,#47423b 52%,#625b51 100%) !important;
  border-color:#514b42 !important;
  box-shadow:
    inset 0 0 0 3px #1b1916,
    inset 0 0 0 8px #7f776b,
    inset 0 0 34px rgba(24,16,10,.7),
    0 18px 50px #000 !important;
}
.crt::before{
  border-color:#211d19 !important;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.38),
    0 0 0 1px rgba(142,126,103,.35);
}
/* grime / scratches layer on the computer body only */
.crt .screen{
  position:relative;
  z-index:2;
}
.crt > .power-led,
.crt > .bezel-power{
  z-index:5;
}
.crt:has(.screen)::after{
  color:#221e1a !important;
  text-shadow:0 1px rgba(169,155,132,.55) !important;
}
.crt .grime-layer{display:none}

/* Add scratches with a pseudo element that stays on the bezel, behind the screen. */
.crt{
  isolation:isolate;
}
.crt > .screen{z-index:2}
.crt > .bezel-power,.crt > .power-led{z-index:4}
.crt{
  --scratch:rgba(28,22,18,.38);
}
.crt::marker{display:none}

/* Extra dirt using body-attached repeating gradients */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(103deg,transparent 0 82px,rgba(255,255,255,.012) 83px 84px,transparent 85px 174px);
}

/* ----------------------------------------------------------
   DRAMATIC SCREEN-ONLY SHUTDOWN
   ---------------------------------------------------------- */
.screen{
  position:relative !important;
}
.screen-shutdown{
  position:absolute !important;
  inset:0 !important;
  z-index:100 !important;
  display:none;
  overflow:hidden;
  background:#020202;
  color:#821c1d;
  pointer-events:auto;
}
.screen-shutdown.on{
  display:flex !important;
  align-items:center;
  justify-content:center;
  animation:none !important;
}
.shutdown-flash{
  position:absolute;inset:0;
  background:#fff;
  opacity:0;
}
.screen-shutdown.on .shutdown-flash{
  animation:screenFlash .18s linear forwards;
}
@keyframes screenFlash{
  0%{opacity:0}
  25%{opacity:.75}
  100%{opacity:0}
}
.shutdown-scan{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  background:
    linear-gradient(to bottom,transparent 0 47%,rgba(255,255,255,.94) 49%,#ffefe1 50%,rgba(255,255,255,.9) 51%,transparent 53%);
  transform:scaleY(1);
  filter:blur(.2px) brightness(2.2);
}
.screen-shutdown.on .shutdown-scan{
  animation:crtCollapse 1.15s cubic-bezier(.68,0,.32,1) forwards;
}
@keyframes crtCollapse{
  0%{transform:scaleY(1);opacity:.9}
  58%{transform:scaleY(.035);opacity:1}
  72%{transform:scaleX(.22) scaleY(.018);opacity:1}
  84%{transform:scaleX(.035) scaleY(.012);opacity:.92}
  100%{transform:scale(0);opacity:0}
}
.shutdown-msg{
  position:relative;
  z-index:5;
  opacity:0;
  text-align:center;
  color:#711719;
  text-shadow:0 0 6px #260607;
  font-family:"Lucida Console",monospace;
  pointer-events:none;
}
.screen-shutdown.on .shutdown-msg{
  animation:shutdownText 1.2s 1.25s forwards;
}
@keyframes shutdownText{
  from{opacity:0;filter:blur(2px)}
  to{opacity:1;filter:none}
}
.shutdown-title{
  font-size:13px;
  letter-spacing:.14em;
  color:#5d1717;
}
.shutdown-sub{
  margin-top:11px;
  font-size:10px;
  color:#421010;
}
.shutdown-final{
  margin-top:34px;
  font-size:15px;
  letter-spacing:.1em;
  color:#7c1c1c;
}
/* dark glass after poweroff */
.screen-shutdown.on::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 48%,rgba(25,25,25,.18),rgba(0,0,0,.96) 68%),
    repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.01) 3px 4px);
  opacity:0;
  animation:deadGlass .7s 1.05s forwards;
  z-index:2;
}
@keyframes deadGlass{to{opacity:1}}

/* responsive guardrails so no text/frame collisions occur */
@media(max-width:1250px){
  .main-grid{
    grid-template-columns:190px 32px minmax(520px,1fr) 32px 170px !important;
  }
  .right-stack{
    grid-column:1/-1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    grid-template-rows:none !important;
  }
}
@media(max-width:900px){
  .grid-head{grid-template-columns:1fr !important}
  .brand{min-height:145px !important}
  .brand h1{
    font-size:clamp(28px,7vw,48px) !important;
    letter-spacing:.12em !important;
  }
  .slogan{font-size:10px !important}
}


/* ==========================================================
   V7 — MASTHEAD SAFE-ZONE FIX
   The ELYSIAN FIELDS logo now sits inside a deliberately smaller
   protected area so no letters can touch or disappear beneath
   the decorative metal frame.
   ========================================================== */

.brand{
  min-height:168px !important;
  padding:30px 58px 32px !important;
  overflow:hidden !important;
}

.brand-copy{
  width:78% !important;
  max-width:78% !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:10px 6px 8px !important;
  overflow:visible !important;
}

.brand h1.glitch-title{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  font-size:clamp(24px,2.55vw,43px) !important;
  line-height:1.08 !important;
  letter-spacing:.09em !important;
  white-space:nowrap !important;
  text-align:center !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* Keep the chromatic glitch copies exactly inside the safe title width. */
.brand h1.glitch-title::before,
.brand h1.glitch-title::after{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  line-height:1.08 !important;
  text-align:center !important;
  overflow:hidden !important;
}

/* Give the slogan its own protected line and keep it away from the bottom rail. */
.brand .slogan{
  width:100% !important;
  max-width:100% !important;
  margin:11px auto 0 !important;
  padding:0 4px !important;
  font-size:clamp(9px,.78vw,12px) !important;
  letter-spacing:.11em !important;
  line-height:1.35 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* The center header gets a little more room than the side header modules. */
.grid-head{
  align-items:stretch !important;
}
.grid-head > .brand{
  min-width:0 !important;
}

/* Extra guardrail for laptop / narrower desktop widths. */
@media(max-width:1250px){
  .brand-copy{
    width:74% !important;
    max-width:74% !important;
  }
  .brand h1.glitch-title{
    font-size:clamp(23px,2.7vw,39px) !important;
    letter-spacing:.075em !important;
  }
}
@media(max-width:900px){
  .brand{
    min-height:158px !important;
    padding:28px 42px 30px !important;
  }
  .brand-copy{
    width:82% !important;
    max-width:82% !important;
  }
  .brand h1.glitch-title{
    font-size:clamp(25px,6vw,41px) !important;
    letter-spacing:.07em !important;
  }
}
@media(max-width:620px){
  .brand-copy{
    width:88% !important;
    max-width:88% !important;
  }
  .brand h1.glitch-title{
    white-space:normal !important;
    font-size:clamp(23px,8vw,34px) !important;
  }
  .brand .slogan{
    white-space:normal !important;
    font-size:9px !important;
  }
}


/* ==========================================================
   V8 — TRUE MASTHEAD CENTERING FIX
   Stop sizing the logo with percentages/clamp tricks.
   The brand panel is now a simple centered flex container.
   ========================================================== */

.brand{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:158px !important;
  padding:24px 72px !important;
  overflow:hidden !important;
  text-align:center !important;
}

/* This wrapper is centered geometrically in the actual panel. */
.brand-copy{
  position:relative !important;
  z-index:12 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:calc(100% - 20px) !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:12px !important;
  overflow:visible !important;
  transform:none !important;
}

/* Fixed sensible desktop size rather than viewport-relative sizing. */
.brand h1.glitch-title{
  position:relative !important;
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 5px !important;

  font-family:Georgia,"Times New Roman",serif !important;
  font-size:38px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:4px !important;

  white-space:nowrap !important;
  text-align:center !important;
  overflow:visible !important;

  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
}

/* Glitch copies sit directly over the real centered title.
   Their movement is deliberately tiny so they cannot hit the frame. */
.brand h1.glitch-title::before,
.brand h1.glitch-title::after{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 5px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  line-height:1 !important;
  letter-spacing:4px !important;
  overflow:hidden !important;
}

.brand h1.glitch-title::before{
  transform:translateX(1px) !important;
  animation:glitchTopSafe 2.1s infinite steps(2,end) !important;
}
.brand h1.glitch-title::after{
  transform:translateX(-1px) !important;
  animation:glitchBottomSafe 1.75s infinite steps(2,end) !important;
}

@keyframes glitchTopSafe{
  0%,84%,100%{transform:translateX(1px)}
  85%{transform:translateX(-2px)}
  88%{transform:translateX(2px)}
  91%{transform:translateX(0)}
}
@keyframes glitchBottomSafe{
  0%,77%,100%{transform:translateX(-1px)}
  78%{transform:translateX(2px)}
  82%{transform:translateX(-2px)}
  86%{transform:translateX(0)}
}

.brand .slogan{
  position:relative !important;
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:2px !important;
}

/* Override the older V7 responsive rules that were fighting the centering. */
@media(max-width:1250px){
  .brand{padding-left:55px !important;padding-right:55px !important}
  .brand-copy{width:auto !important;max-width:100% !important}
  .brand h1.glitch-title{font-size:34px !important;letter-spacing:3px !important}
}
@media(max-width:1000px){
  .brand h1.glitch-title{font-size:31px !important;letter-spacing:2.5px !important}
  .brand .slogan{font-size:10px !important;letter-spacing:1.5px !important}
}
@media(max-width:900px){
  .brand{
    min-height:150px !important;
    padding:24px 45px !important;
  }
  .brand-copy{width:auto !important;max-width:100% !important}
  .brand h1.glitch-title{
    font-size:36px !important;
    letter-spacing:3px !important;
    white-space:nowrap !important;
  }
}
@media(max-width:620px){
  .brand{padding:22px 30px !important}
  .brand-copy{width:auto !important;max-width:100% !important}
  .brand h1.glitch-title{
    font-size:clamp(23px,7vw,31px) !important;
    letter-spacing:2px !important;
    white-space:nowrap !important;
  }
  .brand .slogan{
    font-size:8px !important;
    letter-spacing:1px !important;
    white-space:nowrap !important;
  }
}


/* ==========================================================
   V9 — CATEGORY + CITY BULLETIN CENTERING PASS
   ========================================================== */

/* CITY INDEX: keep the entire category grid visually centered
   inside the large metal panel. */
.city-index{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:18px 22px 22px !important;
}

.city-title{
  width:100% !important;
  margin:2px auto 12px !important;
  text-align:center !important;
}

.cat-grid{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  gap:9px !important;
}

/* Every individual category is centered internally.
   Icon sits above text so long labels don't look pushed sideways. */
.cat{
  min-width:0 !important;
  min-height:106px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:18px 24px !important;
  text-align:center !important;
}

.cat i{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 auto !important;
  font-size:25px !important;
  line-height:1 !important;
  text-align:center !important;
}

.cat span{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.35 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

/* Recovered-photo area follows the same center line as the category grid. */
.recovered{
  width:100% !important;
  margin:10px auto 0 !important;
  text-align:center !important;
}
.photo-slot{
  width:100% !important;
  margin:0 auto !important;
}
.photo-slot .photo-overlay{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* CITY BULLETIN: center every element inside the frame. */
.bulletin-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:17px 20px 18px !important;
  text-align:center !important;
}

.bulletin-card .feature-link{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-align:center !important;
}

.bulletin-card .title{
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  line-height:1.15 !important;
}

.bulletin-card .news-thumb{
  width:min(88%, 165px) !important;
  height:132px !important;
  min-height:132px !important;
  flex:0 0 132px !important;
  margin:2px auto !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
}

.bulletin-card .feature-cta{
  width:100% !important;
  margin:0 auto !important;
  padding:7px 4px 2px !important;
  text-align:center !important;
}

/* Bring AMP and Weather titles onto the same visual center line
   so the right column feels intentional rather than staggered. */
.right-stack .feature{
  text-align:center !important;
}
.right-stack .feature > .title,
.right-stack .feature a > .title{
  width:100% !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.right-stack .eq{
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.right-stack .mono,
.right-stack .weather{
  text-align:center !important;
}

/* Responsive category centering. */
@media(max-width:900px){
  .cat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .cat{
    min-height:100px !important;
  }
}
@media(max-width:560px){
  .cat-grid{
    grid-template-columns:1fr !important;
  }
  .cat{
    min-height:92px !important;
  }
}


/* ==========================================================
   V10 — CRISP PROCEDURAL METAL FRAME SYSTEM
   Replaces the blurry bitmap borders with browser-rendered
   chrome/steel frames so they stay razor-sharp at any size.
   ========================================================== */

/* Kill the old stretched frame bitmaps. */
.panel.metal::before,
.cat::before,
.bottom-card::before,
.directory-grid a::before,
.directory-grid span::before{
  background-image:none !important;
}

/* Shared steel frame recipe */
.panel.metal,
.cat,
.bottom-card,
.directory-grid a,
.directory-grid span{
  position:relative !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(72,12,15,.58), rgba(16,4,5,.96) 68%),
    #080404 !important;
  box-shadow:
    /* deep inner recess */
    inset 0 0 26px rgba(0,0,0,.92),
    inset 0 0 0 2px rgba(20,16,15,.95),
    /* exterior depth */
    0 2px 0 rgba(255,255,255,.09),
    0 7px 12px rgba(0,0,0,.72) !important;
}

/* Outer chrome rail */
.panel.metal::before,
.cat::before,
.bottom-card::before,
.directory-grid a::before,
.directory-grid span::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:8 !important;
  pointer-events:none !important;

  padding:7px !important;
  border-radius:2px !important;

  background:
    linear-gradient(135deg,
      #161515 0%,
      #aaa59f 4%,
      #e4ded6 8%,
      #6d6965 15%,
      #2a2928 24%,
      #b8b2aa 34%,
      #f0ebe4 41%,
      #77736e 50%,
      #2a2928 63%,
      #9c9790 73%,
      #ded8cf 82%,
      #5d5955 91%,
      #171616 100%
    ) border-box !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;

  filter:none !important;
  opacity:1 !important;
}

/* Dark oxidized seam just inside the chrome */
.panel.metal::after,
.cat::after,
.bottom-card::after,
.directory-grid a::after,
.directory-grid span::after{
  content:"" !important;
  position:absolute !important;
  inset:8px !important;
  z-index:7 !important;
  pointer-events:none !important;
  border:2px solid #191515 !important;
  box-shadow:
    inset 0 0 0 1px #756b64,
    inset 0 0 10px #000,
    0 0 0 1px #080707 !important;
  background:none !important;
  opacity:1 !important;
}

/* Top-left shine and bottom-right grime make the metal feel less flat. */
.panel.metal,
.cat,
.bottom-card{
  --chrome-hi:rgba(255,248,235,.50);
  --chrome-dk:rgba(14,12,12,.88);
}
.panel.metal > *,
.cat > *,
.bottom-card > *{
  position:relative;
  z-index:10;
}

/* Thick frame variants */
.message-panel::before,
.visitor-panel::before,
.brand::before,
.side-access::before,
.status::before,
.feature::before{
  padding:9px !important;
}
.city-index::before{
  padding:10px !important;
}
.bottom-card::before{
  padding:10px !important;
}
.cat::before{
  padding:6px !important;
}

/* Rivets / screw heads on major panels */
.panel.metal{
  background-color:#080404 !important;
}
.panel.metal .title{
  position:relative;
}
.panel.metal .title::before,
.panel.metal .title::after{
  content:"";
  position:absolute;
  top:-4px;
  width:5px;height:5px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#d6d0c9 0 12%,#7b746d 18% 46%,#272322 52% 100%);
  box-shadow:0 0 0 1px #0d0b0a;
  opacity:.9;
}
.panel.metal .title::before{left:-8px}
.panel.metal .title::after{right:-8px}

/* Small grime and oxidation along the chrome rails */
.panel.metal::before,
.cat::before,
.bottom-card::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 4px rgba(0,0,0,.4) !important;
}

/* Make the category boxes more mechanical and chunky */
.cat{
  min-height:108px !important;
  border-radius:1px !important;
}
.cat:hover{
  filter:brightness(1.11) !important;
}
.cat:hover::before{
  background:
    linear-gradient(135deg,
      #222 0%,
      #c1bbb4 5%,
      #fff7ec 9%,
      #75706a 18%,
      #333 29%,
      #cdc6bd 39%,
      #fffaf2 45%,
      #79736d 55%,
      #363230 68%,
      #aaa39b 78%,
      #e7ded5 86%,
      #57514d 94%,
      #1a1818 100%
    ) border-box !important;
}

/* City bulletin gets a wider, heavier rail so it reads like a real module. */
.bulletin-card::before{
  padding:10px !important;
}
.bulletin-card::after{
  inset:11px !important;
}

/* Header frame: more polished silver, less noisy than the other modules */
.brand::before{
  background:
    linear-gradient(90deg,
      #161515 0%,
      #8f8a84 3%,
      #ebe5dd 8%,
      #65615d 14%,
      #2a2928 21%,
      #c7c1b9 35%,
      #f4eee6 43%,
      #817b75 51%,
      #2f2c2a 65%,
      #aaa49d 77%,
      #ded8d0 86%,
      #5d5954 94%,
      #171616 100%
    ) border-box !important;
}

/* Inner bevel line — crisp, not blurry */
.brand::after,
.city-index::after,
.side-access::after,
.status::after,
.feature::after,
.bottom-card::after{
  border-color:#1c1717 !important;
  box-shadow:
    inset 0 0 0 1px #877d76,
    inset 0 0 0 2px #241f1e,
    inset 0 0 12px #000 !important;
}

/* Responsive: procedural frames stay sharp automatically. */
@media(max-width:900px){
  .panel.metal::before,
  .bottom-card::before{
    padding:7px !important;
  }
  .cat::before{
    padding:5px !important;
  }
}


/* ==========================================================
   V11 — CRT STATIC + SHUTDOWN SKULL
   ========================================================== */

/* Always-on low-level CRT static/noise inside the screen only. */
.screen::before{
  background:
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.012) 0 1px,
      rgba(0,0,0,.10) 2px 3px,
      transparent 4px 5px
    ),
    /* fine grain */
    repeating-radial-gradient(
      circle at 17% 23%,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,.018) 1px 2px,
      transparent 2px 4px
    ),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.70) 100%) !important;
  opacity:.82 !important;
  animation:staticShift .16s steps(2,end) infinite;
}

.screen::after{
  content:"" !important;
  position:absolute !important;
  inset:-2% !important;
  z-index:29 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,transparent 0 43%,rgba(255,255,255,.018) 48%,transparent 53%),
    repeating-linear-gradient(
      100deg,
      rgba(255,255,255,.008) 0 2px,
      rgba(0,0,0,.008) 2px 4px,
      transparent 4px 7px
    ) !important;
  opacity:.45 !important;
  animation:signalJitter .28s steps(2,end) infinite;
}

@keyframes staticShift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1px,1px)}
  50%{transform:translate(1px,0)}
  75%{transform:translate(0,-1px)}
  100%{transform:translate(0,0)}
}

@keyframes signalJitter{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-1px)}
  40%{transform:translateX(1px)}
  60%{transform:translateX(-.5px)}
  80%{transform:translateX(.5px)}
}

/* occasional stronger interference band */
.screen .terminal{
  position:relative;
}
.screen .terminal::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:8%;
  height:7%;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,.025),
    rgba(255,255,255,.045),
    transparent
  );
  opacity:.22;
  pointer-events:none;
  z-index:28;
  animation:rollBand 7.5s linear infinite;
}
@keyframes rollBand{
  0%{transform:translateY(-160%)}
  100%{transform:translateY(1500%)}
}

/* ----------------------------------------------------------
   Faint skull behind the shutdown message.
   This is CSS-only so it can be swapped later for a creepy face image.
   ---------------------------------------------------------- */
.screen-shutdown .shutdown-skull{
  position:absolute;
  left:50%;
  top:49%;
  width:190px;
  height:220px;
  transform:translate(-50%,-50%);
  opacity:0;
  z-index:3;
  pointer-events:none;
}

.screen-shutdown .shutdown-skull::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:150px;
  height:150px;
  transform:translateX(-50%);
  border-radius:47% 47% 42% 42%;
  background:
    radial-gradient(circle at 34% 47%, rgba(0,0,0,.95) 0 13%, transparent 14%),
    radial-gradient(circle at 66% 47%, rgba(0,0,0,.95) 0 13%, transparent 14%),
    radial-gradient(ellipse at 50% 69%, rgba(0,0,0,.88) 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 48%, rgba(188,188,188,.24), rgba(91,91,91,.10) 58%, transparent 61%);
  filter:blur(.2px);
}

.screen-shutdown .shutdown-skull::after{
  content:"";
  position:absolute;
  left:50%;
  top:128px;
  width:92px;
  height:74px;
  transform:translateX(-50%);
  border-radius:0 0 18px 18px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(175,175,175,.17) 0 10px,
      rgba(0,0,0,.18) 10px 13px
    );
  clip-path:polygon(8% 0,92% 0,82% 100%,18% 100%);
}

.screen-shutdown.on .shutdown-skull{
  animation:skullFadeIn 2.2s 1.05s ease forwards,
            skullPulse 5s 3s ease-in-out infinite;
}

@keyframes skullFadeIn{
  from{opacity:0;filter:blur(4px) brightness(.4)}
  to{opacity:.12;filter:blur(1.5px) brightness(.7)}
}
@keyframes skullPulse{
  0%,100%{opacity:.08;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.14;transform:translate(-50%,-50%) scale(1.025)}
}

/* shutdown text remains above the skull */
.shutdown-msg{
  z-index:6 !important;
}

/* screen goes dead but still retains faint analogue noise */
.screen-shutdown.on::before{
  content:"";
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.012) 0 1px,
      transparent 1px 3px
    ),
    repeating-radial-gradient(
      circle,
      rgba(255,255,255,.012) 0 1px,
      rgba(0,0,0,.01) 1px 2px,
      transparent 2px 4px
    );
  opacity:.16;
  animation:deadStatic .2s steps(2,end) infinite;
}

@keyframes deadStatic{
  0%{transform:translate(0,0)}
  50%{transform:translate(1px,-1px)}
  100%{transform:translate(-1px,1px)}
}


/* ==========================================================
   V12 — HARSH CRT NOISE / GLITCH + LARGE RIGHT-SIDE SKULL
   ========================================================== */

/* Stronger analogue grain across the CRT screen. */
.screen::before{
  opacity:.98 !important;
  background:
    /* heavy horizontal scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035) 0 1px,
      rgba(0,0,0,.30) 1px 3px,
      rgba(255,255,255,.012) 3px 4px,
      transparent 4px 6px
    ),
    /* coarse snow */
    repeating-radial-gradient(
      circle at 13% 17%,
      rgba(255,255,255,.045) 0 1px,
      rgba(0,0,0,.055) 1px 2px,
      transparent 2px 4px
    ),
    /* dark CRT vignette */
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.83) 100%) !important;
  animation:
    staticShiftV12 .075s steps(2,end) infinite,
    scanFlickerV12 .41s steps(2,end) infinite !important;
  mix-blend-mode:screen;
}

.screen::after{
  opacity:.72 !important;
  inset:-4% !important;
  background:
    /* intermittent color breakup */
    repeating-linear-gradient(
      90deg,
      rgba(255,0,30,.018) 0 2px,
      rgba(0,220,255,.012) 2px 4px,
      transparent 4px 10px
    ),
    /* diagonal electrical noise */
    repeating-linear-gradient(
      103deg,
      transparent 0 5px,
      rgba(255,255,255,.022) 5px 6px,
      rgba(0,0,0,.03) 6px 8px
    ) !important;
  animation:
    signalJitterV12 .095s steps(2,end) infinite,
    chromaJumpV12 2.8s steps(1,end) infinite !important;
}

@keyframes staticShiftV12{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2px,1px)}
  40%{transform:translate(2px,-1px)}
  60%{transform:translate(-1px,-2px)}
  80%{transform:translate(1px,2px)}
  100%{transform:translate(0,0)}
}

@keyframes scanFlickerV12{
  0%,100%{filter:brightness(.94) contrast(1.08)}
  48%{filter:brightness(1.08) contrast(1.24)}
  51%{filter:brightness(.76) contrast(1.4)}
  54%{filter:brightness(1.02) contrast(1.15)}
}

@keyframes signalJitterV12{
  0%,100%{transform:translateX(0)}
  16%{transform:translateX(-2px)}
  32%{transform:translateX(2px)}
  48%{transform:translateX(-1px)}
  64%{transform:translateX(3px)}
  80%{transform:translateX(-2px)}
}

@keyframes chromaJumpV12{
  0%,84%,100%{filter:none}
  85%{filter:hue-rotate(8deg) saturate(1.4)}
  86%{filter:hue-rotate(-8deg) saturate(1.6)}
  87%{filter:none}
}

/* Stronger rolling interference bands */
.screen .terminal::before{
  content:"";
  position:absolute;
  left:-2%;right:-2%;
  top:0;
  height:20%;
  z-index:27;
  pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,.025) 25%,
      rgba(255,255,255,.08) 48%,
      rgba(0,0,0,.12) 52%,
      rgba(255,255,255,.025) 76%,
      transparent 100%
    );
  animation:violentRollV12 4.4s linear infinite;
  opacity:.45;
}

@keyframes violentRollV12{
  0%{transform:translateY(-180%) skewY(0deg)}
  45%{transform:translateY(480%) skewY(.2deg)}
  46%{transform:translateY(500%) skewY(-.4deg)}
  100%{transform:translateY(1220%) skewY(0deg)}
}

/* Brief horizontal tearing on the actual UI content. */
.screen .terminal{
  animation:terminalTearV12 6.8s steps(1,end) infinite;
}

@keyframes terminalTearV12{
  0%,91%,100%{transform:translateX(0)}
  92%{transform:translateX(-3px)}
  93%{transform:translateX(4px)}
  94%{transform:translateX(-1px)}
  95%{transform:translateX(0)}
}

/* More aggressive luminance flicker */
.screen{
  animation:screenPulseV12 3.6s steps(1,end) infinite;
}

@keyframes screenPulseV12{
  0%,8%,10%,37%,39%,100%{filter:brightness(1)}
  9%{filter:brightness(.72)}
  38%{filter:brightness(1.16)}
}

/* ==========================================================
   LARGE RIGHT-SIDE SKULL
   ========================================================== */

.screen-shutdown .shutdown-skull{
  left:76% !important;
  top:50% !important;
  width:360px !important;
  height:410px !important;
  transform:translate(-50%,-50%) !important;
  opacity:0;
  z-index:3 !important;
}

.screen-shutdown .shutdown-skull::before{
  width:295px !important;
  height:300px !important;
  top:0 !important;
  background:
    radial-gradient(circle at 33% 46%, rgba(0,0,0,.98) 0 14%, transparent 15%),
    radial-gradient(circle at 67% 46%, rgba(0,0,0,.98) 0 14%, transparent 15%),
    radial-gradient(ellipse at 50% 69%, rgba(0,0,0,.92) 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 48%,
      rgba(230,230,225,.42) 0 12%,
      rgba(180,180,175,.30) 28%,
      rgba(112,112,108,.18) 54%,
      transparent 68%
    ) !important;
  filter:blur(.15px) contrast(1.15);
}

.screen-shutdown .shutdown-skull::after{
  top:258px !important;
  width:178px !important;
  height:122px !important;
  border-radius:0 0 24px 24px !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(210,210,205,.30) 0 17px,
      rgba(0,0,0,.24) 17px 21px
    ) !important;
  clip-path:polygon(8% 0,92% 0,84% 100%,16% 100%) !important;
}

.screen-shutdown.on .shutdown-skull{
  animation:
    skullFadeInV12 1.65s .95s ease forwards,
    skullPulseV12 4.2s 2.8s ease-in-out infinite !important;
}

@keyframes skullFadeInV12{
  from{
    opacity:0;
    filter:blur(9px) brightness(.35);
    transform:translate(-50%,-50%) scale(.93);
  }
  to{
    opacity:.34;
    filter:blur(1.4px) brightness(.82);
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes skullPulseV12{
  0%,100%{
    opacity:.26;
    transform:translate(-50%,-50%) scale(1);
  }
  50%{
    opacity:.41;
    transform:translate(-50%,-50%) scale(1.035);
  }
}

/* Push shutdown text left so the skull dominates the right side. */
.screen-shutdown .shutdown-msg{
  position:absolute !important;
  left:11% !important;
  top:50% !important;
  width:45% !important;
  transform:translateY(-50%) !important;
  text-align:left !important;
}

.screen-shutdown .shutdown-title,
.screen-shutdown .shutdown-sub,
.screen-shutdown .shutdown-final{
  text-align:left !important;
}

/* Stronger dead-screen noise after collapse */
.screen-shutdown.on::before{
  opacity:.34 !important;
  animation:deadStaticV12 .085s steps(2,end) infinite !important;
}

@keyframes deadStaticV12{
  0%{transform:translate(0,0)}
  25%{transform:translate(2px,-1px)}
  50%{transform:translate(-2px,2px)}
  75%{transform:translate(1px,-2px)}
  100%{transform:translate(-1px,1px)}
}


/* ==========================================================
   V13 — DULLED / AGED STEEL
   Keep the crisp procedural frames, but reduce the bright
   polished-chrome look in favor of worn municipal steel.
   ========================================================== */

.panel.metal::before,
.cat::before,
.bottom-card::before,
.directory-grid a::before,
.directory-grid span::before{
  background:
    linear-gradient(135deg,
      #171717 0%,
      #77736f 5%,
      #aaa59f 9%,
      #5f5c58 16%,
      #292827 25%,
      #85817c 35%,
      #b5b0aa 42%,
      #68645f 51%,
      #292827 64%,
      #77736f 74%,
      #a39e98 83%,
      #514e4b 92%,
      #171717 100%
    ) border-box !important;
  filter:brightness(.86) saturate(.58) contrast(1.06) !important;
}

/* Masthead still gets a tiny bit more definition, but no bright chrome. */
.brand::before{
  background:
    linear-gradient(90deg,
      #171717 0%,
      #706d69 4%,
      #aaa59f 9%,
      #5c5956 15%,
      #292827 23%,
      #89847f 36%,
      #b8b2ac 44%,
      #68645f 53%,
      #2e2c2b 66%,
      #797570 78%,
      #a29d97 87%,
      #504d49 95%,
      #171717 100%
    ) border-box !important;
  filter:brightness(.88) saturate(.52) contrast(1.05) !important;
}

/* Hover should illuminate the controls slightly, not turn them shiny white. */
.cat:hover::before{
  background:
    linear-gradient(135deg,
      #1c1b1b 0%,
      #817d78 5%,
      #bbb5ae 10%,
      #68635f 18%,
      #302e2d 29%,
      #918c86 39%,
      #c1bbb4 46%,
      #6d6863 56%,
      #343130 68%,
      #817c76 79%,
      #aaa49e 87%,
      #55514d 95%,
      #191818 100%
    ) border-box !important;
  filter:brightness(.94) saturate(.62) !important;
}

/* Slight brown/black oxidation in the inner seams. */
.brand::after,
.city-index::after,
.side-access::after,
.status::after,
.feature::after,
.bottom-card::after,
.cat::after{
  border-color:#1a1615 !important;
  box-shadow:
    inset 0 0 0 1px #69615b,
    inset 0 0 0 2px #211c1b,
    inset 0 0 11px #000,
    0 0 0 1px rgba(49,31,26,.45) !important;
}


/* ==========================================================
   V14 — DARKER / DIRTIER SCREEN + ADEC TYPOGRAPHY
   ========================================================== */

/* Adec becomes the UI voice throughout the municipal terminal. */
body{
  font-family:"SS Adec Text","Lucida Console","Courier New",monospace !important;
}
.title,
.logs,
.counter b,
.mono,
.action,
.feature-cta,
.footer,
.osbar,
.weather,
.power-label,
.shutdown-msg,
.directory-grid a,
.directory-grid span,
.cat{
  font-family:"SS Adec Text","Lucida Console","Courier New",monospace !important;
}

/* Use the stronger display cut for the Elysian masthead. */
.brand h1.glitch-title{
  font-family:"SS Adec Main","SS Adec Text","Lucida Console",monospace !important;
  font-weight:400 !important;
  letter-spacing:5px !important;
}
.brand .slogan{
  font-family:"SS Adec Text","Lucida Console",monospace !important;
}

/* Darken the CRT glass substantially. */
.screen{
  background:
    radial-gradient(ellipse at 50% 42%,#0c0808 0%,#060303 53%,#010101 100%) !important;
  box-shadow:
    inset 0 0 75px rgba(0,0,0,.98),
    inset 0 0 0 2px #080606,
    0 0 0 2px #4f493f !important;
}

/* Dim the whole live terminal slightly behind the noise layer. */
.screen > .osbar,
.screen > .terminal,
.page{
  filter:brightness(.78) contrast(1.14) saturate(.82);
}

/* Panels should feel stained, old and under-lit rather than freshly rendered. */
.panel.metal,
.cat,
.bottom-card,
.directory-grid a,
.directory-grid span{
  background:
    /* uneven old-screen staining */
    radial-gradient(circle at 17% 22%,rgba(82,23,16,.10),transparent 24%),
    radial-gradient(circle at 79% 67%,rgba(40,17,10,.16),transparent 29%),
    radial-gradient(ellipse at 50% 43%,rgba(45,6,9,.50),rgba(7,2,3,.98) 66%),
    #050202 !important;
  box-shadow:
    inset 0 0 38px rgba(0,0,0,.98),
    inset 0 0 0 2px rgba(12,9,9,.98),
    0 2px 0 rgba(255,255,255,.035),
    0 7px 13px rgba(0,0,0,.88) !important;
}

/* Darker category interiors with less polished red. */
.cat{
  color:#bdaea0 !important;
}
.cat i{
  color:#7d2226 !important;
}
.cat:hover{
  color:#d7c9bc !important;
  filter:brightness(1.04) !important;
}

/* Titles no longer look freshly illuminated. */
.title{
  color:#a83231 !important;
  text-shadow:0 0 4px rgba(95,10,11,.5) !important;
}
.slogan{
  color:#bd302d !important;
  text-shadow:
    0 0 2px #63201c,
    0 0 7px rgba(125,18,18,.58) !important;
}

/* Keep the logo readable but make it look like an aging display. */
.glitch-title{
  color:#c9b7a1 !important;
  text-shadow:
    0 0 2px rgba(224,190,154,.58),
    0 0 8px rgba(143,38,29,.58),
    2px 0 0 rgba(134,26,35,.55),
    -2px 0 0 rgba(50,99,103,.24) !important;
}

/* More smoked glass / dirty CRT overlay. */
.screen::before{
  opacity:1 !important;
  mix-blend-mode:multiply !important;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.40) 1px 3px,
      rgba(255,255,255,.008) 3px 4px,
      transparent 4px 6px
    ),
    repeating-radial-gradient(
      circle at 13% 17%,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.08) 1px 2px,
      transparent 2px 4px
    ),
    radial-gradient(ellipse at center,rgba(0,0,0,.04) 34%,rgba(0,0,0,.88) 100%) !important;
}

/* Extra murky film over the interface. */
.screen .terminal::before{
  box-shadow:inset 0 0 100px rgba(0,0,0,.52);
}

/* Make buttons feel aged / dim. */
.action{
  background:#0c0304 !important;
  color:#a72d2b !important;
  border-color:#3d1113 !important;
}
.action:hover{
  background:#251012 !important;
  color:#c8afa0 !important;
}

/* Counter / population module gets a dim smoked-glass treatment. */
.counter b{
  background:linear-gradient(#0d0908,#020202) !important;
  border-color:#48413c !important;
  color:#c4b4a3 !important;
  text-shadow:0 0 4px rgba(147,79,58,.35);
}

/* Recovered image area and bulletin stay visible, but subdued. */
.news-thumb,
.photo-slot,
.thumb{
  filter:brightness(.68) contrast(1.14) saturate(.72);
}

/* Keep interactive hover from becoming bright/modern. */
.news-thumb:hover,
.photo-slot:hover,
.thumb:hover{
  filter:brightness(.82) contrast(1.16) saturate(.78);
}

/* A touch of vertical ghosting like an old phosphor display. */
.screen .terminal{
  text-shadow:0 1px 1px rgba(92,20,18,.22);
}

/* Mobile type guardrails for Adec's wider decorative forms. */
@media(max-width:1000px){
  .brand h1.glitch-title{
    letter-spacing:4px !important;
  }
}
@media(max-width:620px){
  .brand h1.glitch-title{
    letter-spacing:2px !important;
  }
}


/* ==========================================================
   V15 — SLIGHTLY LIGHTER CRT + RESTORED BLOOD-RED PANEL GLOW
   ========================================================== */

/* Lift the screen only a little. Keep the corners black and dirty. */
.screen{
  background:
    radial-gradient(ellipse at 50% 42%,
      #171011 0%,
      #0c0607 49%,
      #040202 76%,
      #010101 100%) !important;
  box-shadow:
    inset 0 0 68px rgba(0,0,0,.94),
    inset 0 0 0 2px #0b0707,
    0 0 0 2px #4f493f !important;
}

/* V14 dimmed the live terminal to .78. Lift it just enough to read,
   while preserving the dirty CRT treatment and harsh noise. */
.screen > .osbar,
.screen > .terminal,
.page{
  filter:brightness(.88) contrast(1.11) saturate(.90) !important;
}

/* Restore the dark red gradient inside every framed square/module.
   The center is bruised crimson, fading to almost-black at the rails. */
.panel.metal,
.cat,
.bottom-card,
.directory-grid a,
.directory-grid span{
  background:
    radial-gradient(circle at 20% 18%,rgba(108,31,25,.10),transparent 27%),
    radial-gradient(circle at 81% 73%,rgba(64,18,16,.13),transparent 31%),
    radial-gradient(ellipse at 50% 45%,
      #481014 0%,
      #330a0e 22%,
      #1d0508 51%,
      #0c0204 76%,
      #040102 100%) !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.88),
    inset 0 0 0 2px rgba(12,8,8,.98),
    0 2px 0 rgba(255,255,255,.035),
    0 7px 13px rgba(0,0,0,.88) !important;
}

/* Categories get a slightly clearer red center so the grid reads
   as individual illuminated terminal modules. */
.cat{
  background:
    radial-gradient(ellipse at 50% 46%,
      #501116 0%,
      #35090e 28%,
      #190407 61%,
      #060102 100%) !important;
}

/* Larger feature boxes stay darker than category buttons. */
.brand,
.city-index,
.message-panel,
.visitor-panel,
.side-access,
.status,
.feature,
.bottom-card{
  background:
    radial-gradient(ellipse at 50% 43%,
      #3e0d11 0%,
      #27070a 31%,
      #130305 63%,
      #050102 100%) !important;
}

/* Masthead gets a restrained red glow behind ELYSIAN FIELDS. */
.brand{
  background:
    radial-gradient(ellipse at 50% 46%,
      #541217 0%,
      #31090d 31%,
      #160305 61%,
      #050102 100%) !important;
}

/* City Bulletin / AMP / Weather retain enough red to separate
   themselves from the black CRT glass. */
.right-stack .feature{
  background:
    radial-gradient(ellipse at center,
      #420e12 0%,
      #250609 43%,
      #0b0203 78%,
      #030101 100%) !important;
}

/* Keep the V12 noise aggressive, but stop the multiply layer from
   swallowing the restored red gradients quite as much. */
.screen::before{
  opacity:.93 !important;
}

/* Lift interface text a fraction without returning to polished white. */
.cat{
  color:#c8b7a8 !important;
}
.title{
  color:#b93a38 !important;
}
.mono,
.logs,
.weather,
.footer{
  color:#9e8e82;
}

/* Images remain degraded, but are a little easier to identify. */
.news-thumb,
.photo-slot,
.thumb{
  filter:brightness(.75) contrast(1.13) saturate(.78) !important;
}
.news-thumb:hover,
.photo-slot:hover,
.thumb:hover{
  filter:brightness(.86) contrast(1.15) saturate(.82) !important;
}


/* ==========================================================
   V16 — ART PLACEHOLDER PASS
   Homepage preview artwork intentionally removed so custom
   Elysian art can be dropped in later.
   ========================================================== */

/* Blank City Bulletin image area */
.news-thumb{
  background-image:none !important;
  background:
    radial-gradient(ellipse at center,
      rgba(49,9,12,.48) 0%,
      rgba(18,3,5,.82) 62%,
      rgba(4,1,2,.96) 100%) !important;
  border:1px dashed rgba(126,78,70,.42) !important;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.88),
    0 0 0 1px rgba(20,8,8,.7) !important;
}

/* Blank lower homepage art cards: Skag's Records, Collectibles,
   City Businesses, and any similar .thumb preview. */
.bottom-card .thumb,
.thumb{
  background-image:none !important;
  background:
    radial-gradient(ellipse at center,
      rgba(54,10,14,.46) 0%,
      rgba(20,4,6,.84) 62%,
      rgba(4,1,2,.98) 100%) !important;
  border:1px dashed rgba(126,78,70,.38) !important;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.9) !important;
}

/* No broken-image icons or old pseudo artwork should appear. */
.news-thumb::before,
.news-thumb::after,
.bottom-card .thumb::before,
.bottom-card .thumb::after{
  background-image:none !important;
}

/* Optional subtle placeholder marker.
   Easy to delete later when real artwork is added. */
.news-thumb::after,
.bottom-card .thumb::after{
  content:"ART SLOT" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  color:rgba(150,111,99,.34) !important;
  background:none !important;
  border:0 !important;
  font-family:"SS Adec Text","Lucida Console",monospace !important;
  font-size:8px !important;
  letter-spacing:2px !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}

.news-thumb,
.bottom-card .thumb{
  position:relative !important;
}


/* ==========================================================
   V17 — DRAGGABLE WINDOWS-STYLE ARCHIVE WINDOWS
   ========================================================== */

.archive-desktop{
  position:absolute;
  inset:31px 0 0 0; /* below the OS bar */
  z-index:70;
  pointer-events:none;
  overflow:hidden;
}

/* Launcher still looks like the category tile, but gets a tiny folder hint. */
.archive-launcher{
  cursor:none;
}
.archive-launcher::after{
  /* override the old seam only visually with a tiny folder tab marker */
  content:"" !important;
}

/* Window shell */
.archive-window{
  position:absolute;
  width:min(430px, calc(100% - 26px));
  min-height:250px;
  background:
    linear-gradient(#b7b1a8,#8c867e 2px,#5f5a55 3px,#2b2826 4px),
    #bcb6ac;
  border:2px solid #d7d1c7;
  box-shadow:
    2px 2px 0 #080707,
    inset 1px 1px 0 #efe9df,
    inset -1px -1px 0 #4e4944,
    0 12px 24px rgba(0,0,0,.66);
  color:#171211;
  font-family:"SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
  pointer-events:auto;
  user-select:none;
}

/* Active/inactive windows */
.archive-window.is-active{
  box-shadow:
    2px 2px 0 #080707,
    inset 1px 1px 0 #efe9df,
    inset -1px -1px 0 #4e4944,
    0 16px 32px rgba(0,0,0,.78);
}
.archive-window.is-minimized .archive-body,
.archive-window.is-minimized .archive-status{
  display:none;
}
.archive-window.is-minimized{
  min-height:0;
  height:auto !important;
}

/* Red draggable title bar */
.archive-titlebar{
  height:29px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 4px 3px 7px;
  background:
    linear-gradient(90deg,#5a0709 0%,#9f1519 40%,#6e090d 100%);
  color:#f2dfd5;
  border-bottom:2px solid #4a4541;
  font:700 11px "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
  letter-spacing:.03em;
  text-shadow:1px 1px #2a0002;
  cursor:move;
}
.archive-titlebar:active{
  background:linear-gradient(90deg,#430507,#7c1014 45%,#520609 100%);
}

.archive-title{
  display:flex;
  align-items:center;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.archive-title::before{
  content:"▰";
  color:#dfb478;
  margin-right:7px;
  font-size:12px;
}

/* Classic square caption buttons */
.archive-controls{
  display:flex;
  gap:3px;
  flex:0 0 auto;
}
.archive-control{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #312e2c;
  background:#bdb7ae;
  color:#211d1b;
  box-shadow:
    inset 1px 1px 0 #f4eee5,
    inset -1px -1px 0 #5b5651;
  font:700 11px Arial,sans-serif;
  cursor:none;
}
.archive-control:active{
  box-shadow:
    inset 1px 1px 0 #5b5651,
    inset -1px -1px 0 #f4eee5;
  padding-top:1px;
  padding-left:1px;
}

/* Toolbar */
.archive-toolbar{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  background:#b7b1a8;
  border-bottom:1px solid #77716a;
  box-shadow:inset 0 1px #e9e3da;
}
.archive-toolbar button{
  padding:3px 8px;
  border:1px solid #625d57;
  background:#c7c1b7;
  box-shadow:
    inset 1px 1px #f1ebe2,
    inset -1px -1px #6b655f;
  color:#2d2623;
  font:10px "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
  cursor:none;
}
.archive-toolbar button:active{
  box-shadow:
    inset 1px 1px #6b655f,
    inset -1px -1px #f1ebe2;
}

/* Window content */
.archive-body{
  padding:10px;
  background:
    linear-gradient(rgba(255,255,255,.54),rgba(255,255,255,.20)),
    #c7c0b6;
  min-height:178px;
  border-top:1px solid #d9d3ca;
}
.archive-location{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  padding:4px 6px;
  background:#eee9df;
  border:1px solid #706a64;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.24);
  font:9px "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
  color:#4f1718;
}
.archive-desc{
  margin:0 0 10px;
  padding:7px 8px;
  background:#d7d0c5;
  border:1px solid #8f8880;
  font:10px/1.45 "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
  color:#2e2723;
}

/* Folder/file icons inside archive window */
.archive-files{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.archive-file{
  min-height:63px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px;
  text-align:center;
  border:1px solid transparent;
  color:#241e1b;
  font:9px/1.2 "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
}
.archive-file:hover{
  border:1px dotted #6d1517;
  background:rgba(118,19,22,.10);
}
.archive-file .file-icon{
  font-size:25px;
  line-height:1;
  color:#8c651f;
  text-shadow:1px 1px rgba(255,255,255,.5);
}
.archive-file.is-corrupt .file-icon{
  color:#771419;
}
.archive-file.is-corrupt{
  color:#671214;
}

.archive-open-full{
  grid-column:1/-1;
  display:block;
  margin-top:4px;
  padding:7px 8px;
  text-align:center;
  color:#7a0e12;
  text-decoration:none;
  background:#cfc8bd;
  border:1px solid #746e67;
  box-shadow:
    inset 1px 1px #f1ebe2,
    inset -1px -1px #817a73;
  font:700 10px "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
}
.archive-open-full:hover{
  background:#d9d2c7;
  color:#3a0507;
}

.archive-status{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:3px 7px;
  border-top:1px solid #79736c;
  background:#b8b2a9;
  color:#514946;
  font:8px "SS Adec Text","Tahoma","MS Sans Serif",Arial,sans-serif;
}

/* brief open flicker */
.archive-window{
  animation:archiveAppear .13s steps(2,end);
}
@keyframes archiveAppear{
  0%{opacity:.1;filter:contrast(1.8);transform:scaleY(.06)}
  55%{opacity:.9;transform:scaleY(1.03)}
  100%{opacity:1;filter:none;transform:scaleY(1)}
}

@media(max-width:760px){
  .archive-window{
    width:calc(100% - 14px);
    left:7px !important;
  }
  .archive-files{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}