/* ======= Theme ======= */
:root{
  --pink-accent: #FF5781;
  --pink-primary: #FEA6BE;
  --pink-fill:    #FFCDD9;
  --pink-soft:    #FDE1E9;
  --pink-snow:    #FFF7FA;

  --text: #5a2b4a;
  --border-dark: #ba3a66;
  --border: #ffb2c8;

  --radius: 12px;
  --win-width: min(560px, 92vw);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);

  /* Glitter tile + soft glow */
  background:
    url("/assets/bg/seamlessGlitter.png") repeat,
    radial-gradient(1200px 800px at 15% 20%, var(--pink-soft), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, var(--pink-snow), transparent 60%);
  background-size: 128px 128px, auto, auto;
}

/* ===== Top navigation ===== */
.topnav{
  position: fixed; top: 8px; left: 8px; right: 8px; z-index: 10001;
  display:flex; gap:10px; align-items:center; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(var(--pink-snow), var(--pink-soft));
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--pink-fill) inset;
}
.topnav a{
  padding:4px 10px; border-radius:8px; text-decoration:none; color: var(--text);
  border:1px solid var(--border-dark);
  background: linear-gradient(var(--pink-snow), var(--pink-soft));
}
.topnav a:hover{ box-shadow: 0 0 10px rgba(255,87,129,.25); }

.toggles{ margin-left:auto; display:flex; gap:8px; }
.toggle{
  display:flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:8px;
  background: linear-gradient(var(--pink-snow), var(--pink-soft));
  border: 1px solid var(--border-dark);
}
.toggle input{ accent-color: var(--pink-accent); }

/* ===== Desktop canvas ===== */
.desktop{
  position: relative;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* mobile small viewport */
  min-height: 100dvh;  /* modern dynamic viewport */
  padding: 2rem;
}

/* Stickers */
.sticker{
  position: absolute; width: 56px; image-rendering: pixelated;
  pointer-events: none; /* don't block dragging */
}
.s-heart{ left: 2vw;  top: 8vh; }
.s-bow  { left: 95vw; top: 10vh; }
.s-girl {left: 40vw; top: 60vh; }
.s-leon {left: 0vw; top: 13vh; }
.s-chris {left: 90vw; top: 90vh; }

/* Special large sticker */
.sticker--hero{
  width: 200px;       /* <-- THIS controls size */
  pointer-events: auto; /* allow hover */
  transition:
    transform 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease;
  transform-origin: center;
}

/* Hover effect for k-girl sticker (sticker--hero)*/
.sticker--hero:hover{
  transform: translateY(-8px) scale(1.03);
  filter: brightness(1.05) saturate(1.05);
  box-shadow:
    0 12px 20px rgba(0,0,0,.18),
    0 0 18px rgba(255,87,129,.35);
  z-index: 20;
}


/* ===== Window system ===== */
.win{ position:absolute; width: clamp(260px, 36vw, 520px); color: var(--text); }
.win--sm{     width: clamp(220px, 28vw, 420px); }
.win--dialog{ width: clamp(240px, 30vw, 420px); }

.win__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 6px 8px;
  background: linear-gradient(var(--pink-primary), var(--pink-fill));
  border-bottom: 2px solid var(--border);
  cursor: grab;
}
.win__bar:active{ cursor: grabbing; }
.win__title{ font-weight:700; letter-spacing:.3px; }

/* Clean, soft paper fill inside windows */
.win__body{
  padding: 10px;
  background: linear-gradient(var(--pink-snow), var(--pink-soft)); /* no glitter */
}

.win__status{
  padding: 4px 8px;
  border-top: 2px solid var(--border);
  background: linear-gradient(var(--pink-fill), var(--pink-primary));
}

/* 9‑slice frame from your PNG (center transparent) */
.win{
  background: linear-gradient(var(--pink-snow), var(--pink-soft));
  border: 0;
  border-image-slice: 22 fill;   /* ← set to your frame thickness */
  border-image-width: 22px;
  border-style: solid;
  box-shadow:
    0 1px 0 var(--pink-snow) inset,
    0 3px 0 var(--pink-fill) inset,
    0 14px 28px rgba(255, 87, 129, .22);
}


  /* fic List custom size (bigger than the small default) */
  #ficWin{
  width: clamp(320px, 40vw, 640px);   /* widen */
  min-height: 320px;                  /* optional: taller */
}


/* Buttons & toolbar */
.btn{
  font: inherit; padding:4px 10px; border-radius:8px;
  border:1px solid var(--border-dark);
  background: linear-gradient(var(--pink-snow), var(--pink-soft));
  color: var(--text); cursor:pointer;
}
.btn--mini{ width:28px; height:24px; }
.btn--primary{
  background: linear-gradient(var(--pink-accent), #ff86a5);
  color:#3b1930; text-shadow: 0 1px 0 var(--pink-snow);
}

#ficWin .toolbar{ gap: 8px; padding: 8px 10px; }   /* optional: roomier bar */
#ficWin .iconbtn{ width: 36px; height: 36px; }     /* larger button “tile” */
#ficWin .iconbtn img{ width: 22px; height: 22px; } /* larger icon graphic */
.btn--close{
  background: linear-gradient(var(--pink-accent), #ff86a5);
  color:#3b1930;
}

.toolbar{
  display:flex; gap:6px; padding:6px 8px;
  background: linear-gradient(#fff,#ffe6f2);
  border-bottom:1px solid var(--border);
}
.iconbtn{
  width:24px; height:24px; border-radius:6px;
  display:grid; place-items:center;
  border:1px solid var(--border-dark);
  background: linear-gradient(var(--pink-snow), var(--pink-soft));
}
.iconbtn img{ width:14px; height:14px; image-rendering: pixelated; }

/* Panels / notes */
.panel{
  background: linear-gradient(#fff, #ffeef6);
  border: 1px dashed #f6a9c3;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 0 #ffd3e2 inset;
}

/* Link list */
.linklist{ list-style:none; padding:0; margin:0; }
.linklist li{ margin: 6px 0; }
.linklist a{ color: #7a2552; text-decoration:none; font-weight: 700; }
.linklist a:hover{ text-decoration: underline; }

/* Jelly headline */
.y2k{
  font-size: 42px;
  color: #92255c;
  text-shadow:
    0 1px 0 var(--pink-snow),
    0 2px 0 var(--pink-fill),
    0 3px 0 var(--pink-primary),
    0 6px 12px rgba(255, 87, 129, .45);
  letter-spacing: .8px;
}
.y2k--outline{
  color:#7a2552;
  text-shadow:
    0 0 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff,
    0 4px 10px rgba(255,87,129,.35);
}

/* ======== CRT overlay (Alec Lownes / Lucas Bebber) ======== */
/* 1) Screen-door (scanlines + vertical RGB) on ::before */
body.crt-on::before{
  content:"";
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background:
    /* horizontal scanlines every 2px */
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
    /* vertical RGB subpixel mask every 3px */
    linear-gradient(90deg,
      rgba(255,0,0,0.06),
      rgba(0,255,0,0.02),
      rgba(0,0,255,0.06)
    );
  background-size: 100% 2px, 3px 100%;
  mix-blend-mode: multiply;
  opacity: .65;
}

/* 2) Vignette + film/flicker on ::after (flicker enabled by preset) */
body.crt-on::after{
  content:"";
  position: fixed; inset: 0; pointer-events:none; z-index: 9999;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.08) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 3px
    );
  opacity: .40;
  mix-blend-mode: multiply;
  filter: saturate(.98) contrast(1.02);
  /* animation: flicker 0.15s infinite;  (turned on by 'strong' preset in JS if you want) */
}

/* ===== Presets for CRT (optional: adjust here) ===== */
body[data-crt="soft"]::before{ opacity:.45; background-size:100% 3px, 4px 100%; }
body[data-crt="strong"]::before{ opacity:.80; background-size:100% 2px, 2px 100%; }

body[data-crt="soft"]::after{  opacity:.30; animation:none; }
body[data-crt="strong"]::after{ opacity:.50; animation:flicker 0.15s infinite; }

/* ======== RGB Color Separation (STRONG visual) ======== */
/* When RGB button is ON, add animated color separation to major text */
body.rgb-on h1,
body.rgb-on h2,
body.rgb-on h3,
body.rgb-on .win__title,
body.rgb-on a{
  animation: textShadowStrong 1.2s infinite;
}

/*sticker--hero effects*/
.sticker--hero{
  width: 160px;
  pointer-events: auto;
  transition:
    transform 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease;
}

.sticker--hero:hover{
  transform: translateY(-8px) scale(1.03);
  filter: brightness(1.05) saturate(1.05);
  box-shadow:
    0 12px 20px rgba(0,0,0,.18),
    0 0 18px rgba(255,87,129,.35);
  z-index: 20;
}

/* MUCH stronger offsets & opacity than the subtle version */
@keyframes textShadowStrong{
  0%  { text-shadow: 0.8px 0 1px rgba(0,30,255,.75),
                      -0.8px 0 1px rgba(255,0,80,.55),
                      0 0 4px rgba(255,87,129,.25); }
  25% { text-shadow: 2.8px 0 1px rgba(0,30,255,.85),
                      -2.8px 0 1px rgba(255,0,80,.65),
                      0 0 6px rgba(255,87,129,.35); }
  50% { text-shadow: 0.2px 0 1px rgba(0,30,255,.75),
                      -0.2px 0 1px rgba(255,0,80,.55),
                      0 0 4px rgba(255,87,129,.25); }
  75% { text-shadow: 3.6px 0 1px rgba(0,30,255,.9),
                      -3.6px 0 1px rgba(255,0,80,.7),
                      0 0 8px rgba(255,87,129,.4); }
  100%{ text-shadow: 1.0px 0 1px rgba(0,30,255,.8),
                      -1.0px 0 1px rgba(255,0,80,.6),
                      0 0 5px rgba(255,87,129,.3); }
}

/* Flicker keyframes (used by CRT strong) — tutorial pattern */
@keyframes flicker{
  0%{opacity:.27861}5%{opacity:.34769}10%{opacity:.23604}15%{opacity:.90626}
  20%{opacity:.18128}25%{opacity:.83891}30%{opacity:.65583}35%{opacity:.67807}
  40%{opacity:.26559}45%{opacity:.84693}50%{opacity:.96019}55%{opacity:.08594}
  60%{opacity:.20313}65%{opacity:.71988}70%{opacity:.53455}75%{opacity:.37288}
  80%{opacity:.71428}85%{opacity:.70419}90%{opacity:.7003}95%{opacity:.36108}
  100%{opacity:.24387}
}

/* Accessibility */
:focus-visible{ outline: 3px dashed #7a2a55; outline-offset: 2px; }

/* Mobile */
@media (max-width: 640px){
  .win{ width: calc(100vw - 16px); left: 8px !important; right: 8px; }
}
/* Reduced motion softens animations */
@media (prefers-reduced-motion: reduce){
  body.crt-on::after{ animation: none; opacity: .25; filter: none; }
  body[data-crt="strong"]::after{ animation: none; opacity: .25; }
  body.rgb-on h1, body.rgb-on h2, body.rgb-on h3, body.rgb-on .win__title, body.rgb-on a{
    animation: none;
    text-shadow: none;
  }
}