:root{
  --bg:#05060a;
  --ink:rgba(255,255,255,0.92);
  --shadow:0 20px 70px rgba(0,0,0,0.60);

  /* hover 放大时裁切用 */
  --clipPad: 10px;
}

/* pixel cursor */
*{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='none'/%3E%3Cpath d='M3 2h2v2H3V2zm2 2h2v2H5V4zm2 2h2v2H7V6zm2 2h2v2H9V8zm2 2h2v2h-2v2h-2v2H7v2H5v2H3V2z' fill='%23000'/%3E%3Cpath d='M4 3h1v1H4V3zm1 1h1v1H5V4zm1 1h1v1H6V5zm1 1h1v1H7V6zm1 1h1v1H8V7zm1 1h1v1H9V8zm1 1h1v1H10V9zm0 1h1v1h-1v1H9v1H8v1H7v1H6v1H5v-12z' fill='%23fff'/%3E%3C/svg%3E") 2 2, auto;
}

html,body{height:100%;}
body{
  margin:0;
  color:var(--ink);
  overflow:hidden;
  font-family:"MS PGothic","Tahoma",system-ui;

  background-color:var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%2305060a'/%3E%3Cg fill='%23ffffff' fill-opacity='.18'%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='21' y='6' width='1' height='1'/%3E%3Crect x='11' y='14' width='1' height='1'/%3E%3Crect x='27' y='18' width='1' height='1'/%3E%3Crect x='6' y='25' width='1' height='1'/%3E%3Crect x='16' y='27' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%238ab4ff' fill-opacity='.22'%3E%3Crect x='9' y='7' width='1' height='1'/%3E%3Crect x='24' y='12' width='1' height='1'/%3E%3Crect x='3' y='18' width='1' height='1'/%3E%3Crect x='14' y='22' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  image-rendering:pixelated;
  animation:bgDrift 22s linear infinite;
}
@keyframes bgDrift{
  from{background-position:0 0;}
  to{background-position:64px 32px;}
}

.no-scroll{overflow:hidden;}
body.glitch{transform:translateX(1px);}

/* CRT */
.crt{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:2;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.14) 3px
    ),
    radial-gradient(1200px 800px at 50% 35%,
      rgba(0,0,0,0.0),
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.55) 100%);
  mix-blend-mode:multiply;
  opacity:0.9;
}

.glitch-layer{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:3;
  opacity:0;
}
.glitch-layer.on{
  opacity:1;
  animation:rgbFlash 180ms steps(2) both;
}
@keyframes rgbFlash{
  0%{opacity:0;}
  50%{opacity:1;}
  100%{opacity:0;}
}

/* stage */
.stage{
  position:relative;
  width:100vw;
  height:100vh;
  z-index:4;
}

/* cards (漂浮保留) */
.card{
  position:absolute;
  width:420px;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;

  overflow:visible;
  transform:translateZ(0) scale(var(--s,1)) rotate(var(--r,0deg));
  animation:float 7.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes float{
  0%   {transform: translateY(0) scale(var(--s,1)) rotate(var(--r,0deg));}
  50%  {transform: translateY(-14px) scale(var(--s,1)) rotate(var(--r,0deg));}
  100% {transform: translateY(0) scale(var(--s,1)) rotate(var(--r,0deg));}
}

.card img{
  width:100%;
  display:block;
  border-radius:14px;
  box-shadow:var(--shadow);
  filter:saturate(1.25) contrast(1.08);
  image-rendering:auto;

  transform:scale(1);
  transition:transform 140ms steps(2), clip-path 140ms steps(2), filter 140ms steps(2);
}

/* hover 放大：但裁切，保证视觉更“干净” */
.card:hover img{
  transform:scale(1.12);
  clip-path: inset(var(--clipPad) round 14px);
  filter:saturate(1.35) contrast(1.12);
}

/* label */
.card-label{
  position:absolute;
  left:12px;
  bottom:12px;
  font-size:11px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.86);
  backdrop-filter:blur(2px);
  z-index:5;
}

/* Viewer */
.viewer{
  position:fixed;
  inset:0;
  display:none;
  z-index:50;
}
.viewer.open{display:block;}

.viewer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.68);
  backdrop-filter:blur(6px);
}

/* win98 */
.win{
  position:absolute;
  left:50%;
  top:50%;
  width:min(980px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  transform:translate(-50%, -50%);
  background:#c0c0c0;
  color:#101010;
  border:2px solid #e6e6e6;
  border-right-color:#4a4a4a;
  border-bottom-color:#4a4a4a;
  box-shadow:0 24px 90px rgba(0,0,0,0.65);
  border-radius:6px;
  overflow:hidden;
}
.win.dragging{filter:contrast(1.05);}

.win-titlebar{
  height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  user-select:none;
  cursor:grab;

  background:linear-gradient(#0b2a7a,#061c57);
  color:#fff;
  border-bottom:2px solid #9a9a9a;
}
.win-icon{
  width:16px;height:16px;
  background:linear-gradient(45deg,#ff00f7,#00ffea);
  border:1px solid rgba(255,255,255,0.45);
}
.win-title{
  font-weight:700;
  font-size:12px;
  letter-spacing:.3px;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.win-controls{display:flex;gap:6px;}
.win-btn{
  width:28px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #e6e6e6;
  border-right-color:#4a4a4a;
  border-bottom-color:#4a4a4a;
  background:#c0c0c0;
  color:#000;
  font-weight:800;
  user-select:none;
}
.win-deco{opacity:.65;}
.win-close{
  background:#d75a5a;
  color:#fff;
  cursor:pointer;
}
.win-close:active{
  border:2px solid #4a4a4a;
  border-right-color:#e6e6e6;
  border-bottom-color:#e6e6e6;
}

.win-body{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
  padding:10px;
}
@media (max-width:860px){
  .card{width:88vw;}
  .win-body{grid-template-columns:1fr;}
}

.win-media{
  background:#000;
  border:2px solid #9a9a9a;
  border-right-color:#fff;
  border-bottom-color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.win-media img{
  max-width:100%;
  max-height:calc(100vh - 180px);
  border-radius:10px;
  box-shadow:0 16px 60px rgba(0,0,0,0.55);

  image-rendering:pixelated;
  opacity:0;
  transition:opacity 120ms linear, filter 260ms linear;
  filter:saturate(1.2) contrast(1.05);
}
.win-media img.clarify{
  image-rendering:auto;
  filter:none;
}

.win-quote{
  background:#000;
  color:#00ff6a;
  border:2px solid #9a9a9a;
  border-right-color:#fff;
  border-bottom-color:#fff;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quote-label{
  font-size:12px;
  color:rgba(255,255,255,0.85);
  letter-spacing:.6px;
}
.quote-box{
  font-family:"Courier New", monospace;
  font-size:13px;
  line-height:1.7;
  color:#00ff6a;
  white-space:pre-wrap;
  word-break:break-word;
  min-height:120px;
}
.cursor{
  display:inline-block;
  margin-left:6px;
  animation:blink 700ms steps(2) infinite;
}
@keyframes blink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

/* trail */
.trail-layer{
  position:fixed;
  inset:0;
  z-index:45;
  pointer-events:none;
}
.trail-pixel{
  position:absolute;
  width:12px;height:12px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.08);
  border-radius:0;
  image-rendering:pixelated;
  opacity:1;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.25) inset,
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 18px rgba(0,255,234,0.55),
    0 0 22px rgba(255,0,247,0.45);
  animation:trailFade 520ms steps(7) forwards;
}
@keyframes trailFade{
  from{opacity:1; transform:translate(-50%,-50%) scale(1);}
  to{opacity:0; transform:translate(-50%,-140%) scale(.3);}
}

/* zoom clone + burst */
.zoom-clone{
  position:fixed;
  z-index:120;
  object-fit:cover;
  pointer-events:none;
  border-radius:14px;
  box-shadow:var(--shadow);
  transition:
    left 360ms cubic-bezier(.2,.9,.2,1),
    top 360ms cubic-bezier(.2,.9,.2,1),
    width 360ms cubic-bezier(.2,.9,.2,1),
    height 360ms cubic-bezier(.2,.9,.2,1),
    border-radius 360ms cubic-bezier(.2,.9,.2,1),
    transform 360ms cubic-bezier(.2,.9,.2,1),
    filter 360ms cubic-bezier(.2,.9,.2,1);
  filter:saturate(1.25) contrast(1.08);
  image-rendering:pixelated;
}
.burst-pixel{
  position:fixed;
  z-index:130;
  width:10px;height:10px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.9);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.25) inset,
    0 0 0 1px rgba(255,255,255,0.15),
    0 0 18px rgba(0,255,234,0.55),
    0 0 22px rgba(255,0,247,0.45);
  animation:burst 560ms steps(6) forwards;
  pointer-events:none;
}
@keyframes burst{
  from{opacity:1; transform:translate(-50%,-50%) scale(1);}
  to{
    opacity:0;
    transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.2);
  }
}

/* error */
.error{
  position:absolute;
  left:16px;
  bottom:16px;
  max-width:560px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow);
}
.error-title{
  font-weight:900;
  letter-spacing:.8px;
  margin-bottom:6px;
}
.error-text{color:rgba(255,255,255,0.88);line-height:1.6;}
.error-text.dim{color:rgba(255,255,255,0.68);}
code{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.12);
  padding:1px 6px;
  border-radius:8px;
}