/* ============================================================
   日系极简 — Tokens
   ============================================================ */
:root {
  --bg:    #0d0d0d;
  --bg2:   #111111;
  --text:  #dedad4;
  --dim:   #5a5855;
  --muted: #3a3836;
  --line:  rgba(255,255,255,.07);
  --ease:  cubic-bezier(.4,0,.2,1);
  --cf:    cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{overflow-x:hidden}
body{overflow-x:hidden}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter','Helvetica Neue','PingFang SC',sans-serif;
  -webkit-font-smoothing:antialiased;
  font-weight:300;
  /* subtle noise */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.view{position:absolute;inset:0;display:flex;flex-direction:column}
.view.hidden{display:none!important}

/* ============================================================
   Global header
   ============================================================ */
.g-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;height:56px;
}
.g-logo{
  font-size:12px;font-weight:500;letter-spacing:3px;color:var(--text);
  opacity:.6;
}
.g-stats{font-size:11px;color:var(--dim);letter-spacing:.5px}

.back-btn{
  background:none;border:none;color:var(--dim);
  font-size:13px;letter-spacing:.5px;cursor:pointer;
  transition:color .2s;padding:0;
}
.back-btn:hover{color:var(--text)}

.album-meta{
  display:flex;align-items:center;gap:12px;
  position:absolute;left:50%;transform:translateX(-50%);
}
.album-cat{
  font-size:10px;letter-spacing:2px;color:var(--dim);
  text-transform:uppercase;
}
.album-name-el{font-size:14px;font-weight:500;letter-spacing:.5px}

.cf-nav{display:flex;align-items:center;gap:12px}
.cf-arrow{
  background:none;border:none;cursor:pointer;
  color:var(--dim);font-size:22px;line-height:1;
  transition:color .2s;padding:2px 6px;
}
.cf-arrow:hover{color:var(--text)}
.cf-counter{font-size:11px;color:var(--dim);letter-spacing:1px;min-width:48px;text-align:center}

/* ============================================================
   HOME — Two zones
   ============================================================ */
.zones{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;
}
.zone{
  flex:1;display:flex;align-items:stretch;
  overflow:visible;
  min-height:0;
}
.zone-sep{
  height:1px;background:var(--line);flex-shrink:0;margin:0 40px;
}

/* Left label column */
.zone-side{
  width:88px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:4px;padding-right:20px;padding-left:40px;
}
.zone-kana{font-size:9px;letter-spacing:2px;color:var(--muted)}
.zone-zh{font-size:13px;font-weight:500;letter-spacing:2px;color:var(--dim)}
.zone-sub{font-size:9px;color:var(--muted);letter-spacing:.3px;line-height:1.6;text-align:right}

/* 3D scene */
.zone-scene{
  flex:1;position:relative;
  overflow:visible;
}

/* ---- 3D Card ---- */
.card-3d{
  position:absolute;
  cursor:pointer;
  border-radius:3px;
  overflow:hidden;
  will-change:transform,opacity;
  box-shadow:0 12px 48px rgba(0,0,0,.8);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform-style:preserve-3d;
}
.card-3d img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  pointer-events:none;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.card-info{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  padding:20px 12px 12px;
  opacity:0;transition:opacity .25s;
}
.card-3d:hover .card-info{opacity:1}
.card-name{font-size:12px;font-weight:500;color:#fff;margin-bottom:2px}
.card-ct{font-size:10px;color:rgba(255,255,255,.45)}

/* ============================================================
   ALBUM — Coverflow
   ============================================================ */
.view#view-album .g-header{position:relative}
.cf-scene{
  flex:1;position:relative;
  overflow:hidden;
  /* perspective set by JS */
}
.cf-item{
  position:absolute;
  top:50%;left:50%;
  cursor:pointer;
  /* transform / opacity / filter set by JS */
  transition:
    transform .55s var(--cf),
    opacity   .55s var(--cf),
    filter    .55s var(--cf);
  will-change:transform,opacity;
}
.cf-item img{
  display:block;width:100%;
  border-radius:2px;
  box-shadow:0 24px 80px rgba(0,0,0,.85),0 4px 20px rgba(0,0,0,.5);
  user-select:none;
  -webkit-user-drag:none;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:all}
.lb-bg{
  position:absolute;inset:0;
  background:rgba(6,6,6,.96);
  backdrop-filter:blur(20px);
  cursor:zoom-out;
}
.lb-wrap{
  position:relative;z-index:1;
  max-width:88vw;max-height:88vh;
  display:flex;align-items:center;justify-content:center;
}
.lb-img{
  max-width:88vw;max-height:88vh;
  object-fit:contain;display:block;border-radius:2px;
  box-shadow:0 40px 100px rgba(0,0,0,.9);
  transition:opacity .2s;
}
.lb-spin{
  position:absolute;width:32px;height:32px;
  border:1px solid rgba(255,255,255,.15);
  border-top-color:rgba(255,255,255,.6);
  border-radius:50%;animation:spin .7s linear infinite;display:none;
}
.lb-spin.on{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.lb-close{
  position:absolute;top:18px;right:22px;z-index:2;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.4);font-size:18px;
  transition:color .2s;
}
.lb-close:hover{color:#fff}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.35);font-size:40px;line-height:1;
  transition:color .2s;padding:0 12px;
}
.lb-nav:hover{color:rgba(255,255,255,.85)}
.lb-p{left:12px}.lb-n{right:12px}
.lb-count{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11px;color:rgba(255,255,255,.25);letter-spacing:2px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:680px){
  .g-header{padding:14px 20px}
  .zone-side{width:60px;padding-left:20px;padding-right:12px}
  .zone-kana{display:none}
  .zone-sep{margin:0 20px}
  .album-meta{position:static;transform:none}
  .lb-p{left:4px}.lb-n{right:4px}
}