/* ============================================================
   main.css — token, layout dasar, background, topbar, rail
   ============================================================ */

:root{
  /* aksen global (bisa diubah user, disimpan di localStorage) */
  --accent:#16a34a;

  /* ukuran unit tile (1 unit = tile kecil). Skala ikut tinggi layar
     supaya papan tile penuh di rasio monitor umum (16:9 / 16:10). */
  --u-scale:1;   /* diatur user di pengaturan */
  --u-fit:1;     /* otomatis, supaya semua tile muat di lebar layar */
  --u: calc(clamp(46px, calc((100vh - 250px) / 6), 160px) * var(--u-scale) * var(--u-fit));
  --gap: clamp(6px, .9vh, 12px);

  /* efek latar */
  --bg-blur: 0px;
  --bg-dim: .45;
  --bg-scale: 1.06;

  /* warna teks / chrome */
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.62);
  --chrome:rgba(0,0,0,.35);

  --speed: 1;           /* pengali durasi animasi, 0 = animasi mati */
  --ease:cubic-bezier(.2,.85,.25,1);
}

*{box-sizing:border-box}
/* penting: .panel & .board-wrap memakai display:flex, yang kalau tidak
   ditimpa akan mengalahkan atribut [hidden] dan menutupi layar */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:#0a0f14;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.theme-light{ --ink:#10151a; --ink-soft:rgba(16,21,26,.6); --chrome:rgba(255,255,255,.5); }
body.no-anim{ --speed:0 }

button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- background ---------- */
.bg-layer{
  position:fixed; inset:-4vmax; z-index:0;
  background:var(--bg-image, linear-gradient(160deg,#0b3d2e,#0a1c2b 55%,#04070a));
  background-size:cover; background-position:center;
  filter:blur(var(--bg-blur));
  transform:scale(var(--bg-scale));
  transition:background-image .5s ease, filter .35s ease;
  animation:bgDrift calc(48s / max(var(--speed),.001)) ease-in-out infinite alternate;
}
.bg-veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%),
    rgba(0,0,0,var(--bg-dim));
}
body.theme-light .bg-veil{
  background:radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.15) 0%, rgba(255,255,255,.5) 100%),
             rgba(255,255,255,calc(var(--bg-dim) * .8));
}
@keyframes bgDrift{ from{ transform:scale(var(--bg-scale)) translate3d(-.8%,-.6%,0) } to{ transform:scale(calc(var(--bg-scale) + .04)) translate3d(.8%,.6%,0) } }

/* ---------- kerangka ---------- */
.shell{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column;
  padding:clamp(14px,3vh,34px) clamp(16px,3vw,56px) clamp(8px,1.6vh,18px);
}

/* ---------- topbar ---------- */
.topbar{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex:none}
.pivot{display:flex; align-items:baseline; gap:clamp(14px,1.8vw,30px)}
.pivot-item{
  font-size:clamp(20px,3.2vh,38px); font-weight:200; letter-spacing:.2px;
  color:var(--ink-soft); padding:0 2px 4px;
  transition:color .25s ease, transform .25s var(--ease), opacity .25s;
}
.pivot-item:hover{color:var(--ink)}
.pivot-item.is-active{color:var(--ink); position:relative}
.pivot-item.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--accent);
  animation:underline calc(.45s / max(var(--speed),.001)) var(--ease);
}
@keyframes underline{ from{transform:scaleX(0); transform-origin:left} to{transform:scaleX(1)} }

.status{display:flex; align-items:center; gap:10px}
.status-chip{
  font-size:13px; letter-spacing:.4px; color:var(--ink-soft);
  background:var(--chrome); padding:5px 10px; backdrop-filter:blur(6px);
}
button.status-chip{transition:color .2s, background .2s, transform .2s var(--ease)}
button.status-chip:hover{color:var(--ink); background:rgba(0,0,0,.5); transform:translateY(-2px)}
.lang-chip b{font-weight:600; color:var(--accent)}
.icon-chip{font-size:15px; line-height:1; padding:5px 9px}
.avatar{
  width:38px; height:38px; background:var(--accent);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .25s var(--ease), filter .25s;
}
.avatar:hover{transform:translateY(-2px) rotate(-3deg); filter:brightness(1.15)}

/* ---------- hero: halaman beranda penuh, avatar 3D + bio ala gamertag Xbox 360 ---------- */
.hero{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(28px,5.5vw,80px);
}
.hero-avatar{
  order:2;
  flex:none;
  width:clamp(340px,42vw,620px); height:clamp(480px,96vh,940px);
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.55));
  animation:heroIn calc(.6s / max(var(--speed),.001)) var(--ease) backwards;
}
.hero-avatar model-viewer{ width:100%; height:100%; --poster-color:transparent; background:transparent; }
.hero-info{
  order:1;
  min-width:0; max-width:620px;
  animation:heroIn calc(.6s / max(var(--speed),.001)) var(--ease) backwards;
  animation-delay:calc(120ms / max(var(--speed),.001));
}
@keyframes heroIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.hero-kicker{
  margin:0; font-size:13px; font-weight:500; letter-spacing:2.8px;
  text-transform:uppercase; color:var(--accent);
}
.hero-name{
  margin:6px 0 8px; font-weight:200; letter-spacing:.2px; line-height:1.02;
  font-size:clamp(48px,8.5vw,92px);
}
.hero-role{margin:0 0 18px; font-size:clamp(15px,1.8vw,19px); color:var(--ink-soft); letter-spacing:.2px}
.hero-bio{margin:0; max-width:56ch; color:var(--ink-soft); line-height:1.65; font-size:clamp(14px,1.5vw,16.5px)}
@media (max-width:760px){
  .topbar{flex-wrap:wrap; gap:10px 14px}
  .pivot{gap:12px; flex-wrap:wrap}
  .pivot-item{font-size:clamp(15px,4.4vw,20px)}
  .status{flex-wrap:wrap; gap:6px}

  .hero{flex-direction:column; justify-content:flex-start; gap:14px; text-align:center; padding-top:8px; overflow-y:auto}
  .hero-avatar{order:1; width:clamp(200px,68vw,340px); height:clamp(290px,52vh,470px)}
  .hero-info{order:2; text-align:center}
  .hero-bio{max-width:46ch; margin:0 auto}
}
@media (max-width:420px){
  #today{display:none}
}

/* ---------- papan tile ---------- */
.board-wrap{
  position:relative;
  flex:1 1 auto; min-height:0;
  margin-top:clamp(10px,2.4vh,26px);
  display:flex;
}
.board{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:flex-start; gap:clamp(20px,3vw,54px);
  overflow-x:auto; overflow-y:hidden;
  padding:14px 0 24px 4px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;
}
/* penahan di ujung kanan supaya tile terakhir tidak tertutup rail */
.board-end{flex:none; width:clamp(70px,12vw,168px); height:1px}

/* panah geser: hanya muncul kalau papan memang lebih lebar dari layar */
.board-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:74px; z-index:4;
  display:none; place-items:center;
  font-size:26px; line-height:1; color:var(--ink);
  background:var(--chrome); backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.8);
  transition:background .2s, transform .2s var(--ease);
}
.board-nav:hover{background:var(--accent); color:#fff}
.board-nav.prev{left:-6px}
.board-nav.next{right:clamp(60px,11vw,150px)}
.board-wrap.can-prev .board-nav.prev,
.board-wrap.can-next .board-nav.next{display:grid}
.board::-webkit-scrollbar{height:8px}
.board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.board::-webkit-scrollbar-track{background:transparent}

.group{flex:none}
.group-title{
  font-size:14px; font-weight:400; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px 2px;
}
.grid{
  display:grid;
  grid-auto-flow:column dense;
  grid-template-rows:repeat(6, var(--u));
  grid-auto-columns:var(--u);
  gap:var(--gap);
}

/* ---------- rail kanan ---------- */
.rail{
  position:fixed; z-index:3; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.rail-card{
  pointer-events:auto;
  width:150px; height:calc(var(--u) * .82); min-height:52px;
  background:var(--accent);
  color:#fff; text-align:left; font-size:14px; letter-spacing:.3px;
  padding:0 14px;
  transform:translateX(96px);
  box-shadow:-14px 14px 30px -14px rgba(0,0,0,.85);
  transition:transform .35s var(--ease), filter .2s;
  display:flex; align-items:center;
}
.rail-card:nth-child(even){filter:brightness(.86)}
.rail-card:hover,.rail-card:focus-visible{transform:translateX(0); filter:brightness(1.12)}

/* ---------- popover warna ---------- */
.popover{
  position:fixed; z-index:60; width:236px; padding:14px;
  background:rgba(18,22,26,.96); backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.09);
  color:#fff;
  animation:pop calc(.22s / max(var(--speed),.001)) var(--ease);
}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1}}
.popover h4{margin:0 0 10px; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:400; opacity:.7}
.swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.swatch{aspect-ratio:1; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:transform .18s var(--ease)}
.swatch:hover{transform:scale(1.14)}
.popover-row{display:flex; gap:8px; align-items:center; margin-top:12px}
.popover-row input[type=color]{width:38px; height:30px; padding:0; border:0; background:none}
.popover-row button{font-size:12px; padding:7px 10px; background:rgba(255,255,255,.1); letter-spacing:.6px}
.popover-row button:hover{background:rgba(255,255,255,.2)}
.size-heading{margin-top:14px; padding-top:12px; border-top:1px solid rgba(128,128,128,.2)}
.size-row{display:flex; align-items:flex-end; gap:8px}
.size-swatch{
  display:flex; align-items:flex-end; justify-content:center;
  height:36px; padding:0; background:none; opacity:.55;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.size-swatch:hover{opacity:.85; transform:translateY(-2px)}
.size-swatch.is-active{opacity:1}
.size-box{background:rgba(255,255,255,.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.size-swatch.is-active .size-box{background:var(--accent)}

/* layar sempit: tetap terpakai, tile mengecil */
@media (max-width:760px){
  :root{ --u: calc(clamp(64px, 21vw, 96px) * var(--u-scale)); }
  .board{flex-direction:column; overflow-y:auto; overflow-x:hidden; padding-right:16px}
  .board-nav,.board-end{display:none}
  .grid{grid-auto-flow:row dense; grid-template-rows:none; grid-template-columns:repeat(4,var(--u)); grid-auto-rows:var(--u)}
  .rail{display:none}
}