/* ==== DOKI DOKI CLUBROOM '98 — system sheet ==== */
:root{
  --oat:#EFE7DC; --paper:#F7F1E6; --taupe:#C9BCAE;
  --cocoa:#45372E; --cocoa-soft:#6b584a;
  --honey:#E4B94E; --blossom:#F2B8CE; --ribbon:#C4373F; --leaf:#A9C05B;
  --shadow:4px 4px 0 rgba(69,55,46,.22);
  --px:'Silkscreen',monospace; --serif:'Fraunces',serif; --hand:'Caveat',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--serif);color:var(--cocoa);background:var(--oat);overflow:hidden}
a{color:inherit}

/* atmosphere */
.wallpaper{position:fixed;inset:0;background:var(--taupe) center/cover no-repeat}
.wallpaper::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 70% 10%, rgba(255,246,220,.25), transparent 60%),
  radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(69,55,46,.28))}
.mote{position:fixed;width:5px;height:5px;border-radius:50%;background:rgba(255,244,214,.8);
  filter:blur(1px);pointer-events:none;animation:floaty 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0);opacity:0}20%{opacity:.9}50%{transform:translateY(-40px) translateX(10px)}}

/* desktop icons */
.desk-icons{position:fixed;left:14px;top:14px;display:flex;flex-direction:column;gap:14px;z-index:5}
.icon{display:flex;flex-direction:column;align-items:center;width:76px;text-decoration:none;gap:4px}
.icon .tile{width:52px;height:52px;display:grid;place-items:center;font-size:26px;background:var(--paper);
  border:2px solid var(--cocoa);border-radius:8px;box-shadow:var(--shadow);transform:rotate(-2deg);transition:.15s}
.icon:nth-child(even) .tile{transform:rotate(2deg)}
.icon:hover .tile{transform:rotate(0) translateY(-3px);background:var(--honey)}
.icon .label{font-family:var(--px);font-size:9px;color:var(--paper);text-shadow:1px 1px 0 var(--cocoa);
  background:rgba(69,55,46,.55);padding:2px 5px;border-radius:3px}

/* windows */
.window{position:absolute;left:50%;transform:translateX(-50%);z-index:10;width:min(560px,92vw);
  background:var(--paper);border:2px solid var(--cocoa);border-radius:8px;
  box-shadow:var(--shadow), inset 1px 1px 0 rgba(255,255,255,.6);
  animation:pop .28s cubic-bezier(.2,1.4,.4,1)}
.window.wide{width:min(820px,94vw)}
@keyframes pop{from{scale:.85;opacity:0}}
.tbar{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--cocoa);color:var(--oat);
  border-radius:6px 6px 0 0;font-family:var(--px);font-size:10px;cursor:grab;user-select:none}
.tbar:active{cursor:grabbing}
.tbar .dot{width:8px;height:8px;background:var(--honey);border-radius:2px}
.tbar .title{flex:1;letter-spacing:.5px}
.tbtns{display:flex;gap:4px}
.tbtn{width:18px;height:16px;display:grid;place-items:center;font-family:var(--px);font-size:8px;
  background:var(--oat);color:var(--cocoa);border:1.5px solid var(--cocoa);border-radius:3px;
  box-shadow:inset -1px -1px 0 rgba(69,55,46,.3), inset 1px 1px 0 #fff;cursor:pointer}
.tbtn.x{background:var(--ribbon);color:var(--paper)}
.tbtn:active{box-shadow:inset 1px 1px 0 rgba(69,55,46,.4)}
.win-body{padding:18px 20px 20px;max-height:min(66vh,560px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--taupe) transparent}
.win-body::-webkit-scrollbar{width:8px}
.win-body::-webkit-scrollbar-thumb{background:var(--taupe);border-radius:4px}

/* bevel buttons */
.btn95{font-family:var(--px);font-size:10px;padding:6px 10px;background:var(--oat);color:var(--cocoa);
  border:2px solid var(--cocoa);border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:inset -2px -2px 0 rgba(69,55,46,.25), inset 2px 2px 0 rgba(255,255,255,.8), 2px 2px 0 rgba(69,55,46,.2)}
.btn95:hover{background:var(--honey)}
.btn95:active{box-shadow:inset 2px 2px 0 rgba(69,55,46,.3);transform:translate(1px,1px)}

/* stickers / tape / notes */
.sticker{position:relative;background:var(--paper);border:2px solid var(--cocoa);border-radius:6px;
  box-shadow:var(--shadow);padding:8px 14px;transform:rotate(-2deg)}
.tape::before{content:"";position:absolute;top:-10px;left:50%;translate:-50% 0;width:64px;height:16px;
  background:rgba(232,196,90,.7);border:1px solid rgba(69,55,46,.15);transform:rotate(-1deg)}
.note{font-family:var(--hand);font-size:19px;line-height:1.6;
  background:repeating-linear-gradient(transparent 0 26px, rgba(69,55,46,.15) 26px 27px), var(--paper)}

/* VN dialog box */
.vn{margin-top:16px;background:var(--oat);border:2px solid var(--cocoa);border-radius:6px;
  box-shadow:var(--shadow);padding:14px;position:relative}
.vn .name{position:absolute;top:-12px;left:10px;font-family:var(--px);font-size:9px;background:var(--blossom);
  border:2px solid var(--cocoa);padding:2px 8px;border-radius:4px}
.vn p{font-size:15px}

/* blinkies (88x31, sacred size) */
.blinkie-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.blinkie{width:88px;height:31px;border:2px solid var(--cocoa);border-radius:4px;display:inline-grid;
  place-items:center;font-family:var(--px);font-size:8px;overflow:hidden;box-shadow:2px 2px 0 rgba(69,55,46,.25)}
.b-heart{background:var(--blossom)} .b-heart span{animation:blink 1s steps(2) infinite}
.b-star{background:var(--honey)} .b-star b{display:inline-block;animation:spin 3s linear infinite}
.b-marquee{background:var(--cocoa);color:var(--honey)}
.b-marquee span{display:inline-block;white-space:nowrap;animation:marq 8s linear infinite}
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{rotate:360deg}}
@keyframes marq{from{transform:translateX(88px)}to{transform:translateX(-100%)}}

/* hit counter */
.counter{display:inline-flex;gap:6px;align-items:center;font-family:var(--px);font-size:9px;margin-top:6px}
.counter .digits{background:var(--cocoa);color:var(--honey);padding:3px 6px;letter-spacing:3px;border-radius:3px;font-size:11px}

/* taskbar */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:44px;z-index:20;background:var(--oat);
  border-top:2px solid var(--cocoa);display:flex;align-items:center;gap:8px;padding:0 8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7)}
.start{display:flex;align-items:center;gap:6px;font-weight:bold}
.start-cow{width:20px;height:20px}
.task-note{font-family:var(--px);font-size:8px;color:var(--cocoa-soft);flex:1;overflow:hidden;white-space:nowrap}
.clock{font-family:var(--px);font-size:10px;background:var(--paper);border:2px solid var(--cocoa);
  border-radius:4px;padding:4px 8px;box-shadow:inset 1px 1px 0 rgba(69,55,46,.2)}

/* mr. cow corner peek */
.mrcow{position:fixed;right:10px;bottom:52px;width:74px;z-index:15;animation:bob 4s ease-in-out infinite;
  filter:drop-shadow(2px 3px 0 rgba(69,55,46,.25))}
@keyframes bob{50%{transform:translateY(-4px)}}
.mrcow .eye{transform-box:fill-box;transform-origin:center;animation:eyeblink 5s infinite}
@keyframes eyeblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* type + misc */
.big-welcome{font-weight:600;font-size:44px}
.hand-sub{font-family:var(--hand);font-size:20px;color:var(--cocoa-soft)}
.tiny{font-family:var(--px);font-size:8px;margin-top:12px;color:var(--cocoa-soft)}
.under-construction{position:fixed;left:16px;bottom:56px;font-family:var(--hand);font-size:18px;z-index:15}

@media (max-width:640px){
  .desk-icons{flex-direction:row;flex-wrap:wrap;right:14px}
  .window{top:22% !important}
  .mrcow{width:56px}
}

/* ==== THE ATTIC EXPANSION ==== */

/* 3x3 Record Crate */
.crate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 10px;
}
.sleeve {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--paper);
  border: 2px solid var(--cocoa);
  box-shadow: var(--shadow);
  transition: transform 0.2s, z-index 0s;
  overflow: hidden;
  cursor: pointer;
}
/* fixed tiny tilts to feel hand-placed */
.sleeve:nth-child(3n+1) { transform: rotate(-2deg); }
.sleeve:nth-child(3n+2) { transform: rotate(1.5deg); }
.sleeve:nth-child(3n) { transform: rotate(-1deg); }
.sleeve:hover { transform: rotate(0deg) translateY(-5px); z-index: 5; }

.sleeve .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sleeve .disc {
  position: absolute;
  top: 10%; left: 50%;
  width: 80%; height: 80%;
  transform: translateX(-30%);
  background: radial-gradient(circle, var(--cocoa) 20%, #111 21%, #222 40%, #000 41%);
  border-radius: 50%;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.3s;
  z-index: -1;
  animation: spin-disc 4s linear infinite paused;
}
.sleeve:hover .disc {
  opacity: 1;
  transform: translateX(-65%);
  animation-play-state: running;
}
@keyframes spin-disc {
  to { transform: translateX(-65%) rotate(360deg); }
}

/* Placeholder empty Sleeve */
.sleeve.empty {
  background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 10px, rgba(69,55,46,.03) 10px, rgba(69,55,46,.03) 20px);
  display: grid;
  place-items: center;
}
.sleeve.empty::after {
  content: "🐄";
  font-size: 48px;
  opacity: 0.2;
  transform: rotate(-15deg);
}
.sleeve.empty .side-a {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--px);
  font-size: 9px;
  color: var(--cocoa-soft);
}

/* Hype Sticker (Moo Rating) */
.hype-sticker {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--honey);
  border: 1.5px solid var(--cocoa);
  border-radius: 40px;
  padding: 2px 5px;
  display: flex;
  gap: 2px;
  box-shadow: 2px 2px 0 rgba(69,55,46,.25);
  transform: rotate(8deg);
  pointer-events: none;
}
.hype-sticker svg { width: 12px; height: 12px; }

/* 3x3 Shrines Altars */
.altars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 10px;
}
.shrine {
  aspect-ratio: 1/1;
  background: var(--paper);
  border: 2px solid var(--cocoa);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
}
.shrine:nth-child(even) { transform: rotate(1.5deg); }
.shrine:nth-child(odd) { transform: rotate(-1.5deg); }
.shrine .trinket { font-size: 36px; margin-bottom: 8px; }
.shrine .nameplate { font-family: var(--serif); font-weight: 600; color: var(--cocoa); font-size: 16px; }
.shrine .whisper { font-family: var(--hand); color: var(--cocoa-soft); font-size: 16px; text-align: center; }

/* Placeholder Empty Shrine (Felt Stitching) */
.shrine.empty {
  background: transparent;
  border: 2px dashed var(--blossom);
  box-shadow: none;
  justify-content: center;
  gap: 4px;
}
.shrine.empty::before {
  content: "name: ＿＿＿＿＿";
  font-family: var(--hand);
  font-size: 18px;
  color: var(--cocoa-soft);
}
.shrine.empty::after {
  content: "why i love this: ＿＿＿＿";
  font-family: var(--hand);
  font-size: 15px;
  color: var(--cocoa-soft);
}

/* Stacked Liner Notes Window */
.notes-win {
  width: min(420px, 85vw);
  top: 15%;
  left: 60%;
  transform: translateX(-50%) rotate(1deg);
  z-index: 15;
}
.notes-win .win-body {
  padding: 0; /* Let the inner .note div handle padding */
}
.inner-note {
  padding: 20px 24px;
  min-height: 200px;
  background: repeating-linear-gradient(transparent 0 26px, rgba(69,55,46,.15) 26px 27px), var(--paper);
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.6;
}
.inner-note h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 10px; color: var(--cocoa); }

/* DDLC Logo Sticker on Desktop */
.desktop-sticker {
  position: fixed;
  top: 20px; right: 40px;
  transform: rotate(4deg);
  z-index: 4;
  padding: 12px;
  background: var(--paper);
  border: 2px solid var(--cocoa);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.desktop-sticker::before { /* Tape */
  content: ""; position: absolute; top: -10px; left: 50%; translate: -50% 0;
  width: 50px; height: 16px; background: rgba(232,196,90,.7);
  border: 1px solid rgba(69,55,46,.15); transform: rotate(-2deg);
}

@media (max-width:640px){ .crate,.altars{grid-template-columns:repeat(2,1fr)} }

/* ==== radio, blinkie shelf, residents, wall photo ==== */
:root{ --yuri:#7C5CBF }

.task-note.radio{background:none;border:none;cursor:pointer;text-align:left}
.task-note.radio:hover{color:var(--cocoa)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:8px;margin-right:5px}
.eq i{width:2px;background:var(--honey);animation:eq .8s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.25s}
.eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:2px}50%{height:8px}}

.blinkie-shelf{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.blinkie-shelf img{width:88px;height:31px;image-rendering:pixelated;border:2px solid var(--cocoa);
  border-radius:4px;box-shadow:2px 2px 0 rgba(69,55,46,.25);display:block}

/* residents stand NEXT to mr. cow — the under-construction badge owns the left corner and i don't touch working charms */
.resident{position:fixed;right:92px;bottom:52px;width:70px;z-index:15;pointer-events:none;
  filter:drop-shadow(2px 3px 0 rgba(69,55,46,.25));animation:bob 5s ease-in-out infinite}
.resident img{width:100%;display:block}

.wall-photo{position:fixed;left:15%;top:16%;width:150px;z-index:2;transform:rotate(-2deg);
  background:var(--paper);border:2px solid var(--cocoa);padding:6px 6px 20px;box-shadow:var(--shadow)}
.wall-photo::before{content:"";position:absolute;top:-10px;left:50%;translate:-50% 0;width:54px;height:14px;
  background:rgba(232,196,90,.7);border:1px solid rgba(69,55,46,.15);transform:rotate(-2deg)}
.wall-photo img{width:100%;display:block;border:1px solid var(--taupe)}
.wall-photo figcaption{position:absolute;bottom:2px;left:7px;right:7px;font-family:var(--hand);
  font-size:13px;color:var(--cocoa-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){ .wall-photo{display:none} }
@media (max-width:640px){ .resident{width:50px;right:70px} }