/* =========================================================
   Lobi Insos Barakah — gaya kartun "stiker" yang sama dengan
   semua game: garis tinta tebal, bayangan padat, langit cerah.
   ========================================================= */
:root {
  --ink: #1d3140;
  --ink-soft: #4f6574;
  --paper: #fffdf5;
  --paper-2: #fff4da;
  --sky-1: #86d3ea;
  --sky-2: #cdeef4;
  --sky-3: #f3fbe6;
  --sun: #ffc93c;
  --sun-2: #ffe08a;
  --leaf: #43ab57;
  --leaf-2: #cdedd1;
  --coral: #ff7a5c;
  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --bounce: cubic-bezier(.3, 1.5, .5, 1);
}

* { box-sizing: border-box; }
html { font-size: clamp(15px, 0.55vw + 9px, 21px); }
html, body { min-height: 100%; }
body {
  margin: 0; font-family: var(--body); color: var(--ink);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%) fixed;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2 { margin: 0; font-family: var(--display); text-wrap: balance; }
:focus-visible { outline: 4px solid #8a6ee0; outline-offset: 3px; border-radius: 12px; }
kbd { font-family: var(--body); font-weight: 800; font-size: .85em; border: 2px solid var(--ink-soft); border-bottom-width: 3px; border-radius: 6px; padding: 0 5px; background: var(--paper); }

/* ---------------- Latar ---------------- */
.scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sun {
  position: absolute; top: 24px; right: 5%; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, #fff6c8 0 40%, var(--sun) 41% 100%);
  box-shadow: 0 0 0 16px rgba(255, 201, 60, .22), 0 0 0 34px rgba(255, 201, 60, .12);
  animation: sunpulse 5s ease-in-out infinite;
}
@keyframes sunpulse { 50% { box-shadow: 0 0 0 22px rgba(255, 201, 60, .2), 0 0 0 44px rgba(255, 201, 60, .1); } }
.cloud { position: absolute; width: 150px; opacity: .9; animation: drift 90s linear infinite; }
.cloud-1 { top: 60px; animation-delay: -25s; }
.cloud-2 { top: 240px; width: 100px; animation-duration: 70s; animation-delay: -50s; opacity: .75; }
.cloud-3 { top: 420px; width: 180px; animation-duration: 120s; animation-delay: -90s; opacity: .6; }
@keyframes drift { from { transform: translateX(-220px); } to { transform: translateX(110vw); } }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }

/* Daun & kilau yang melayang naik pelan */
.floaties { position: absolute; inset: 0; }
.fl {
  position: absolute; bottom: -40px; width: var(--size); height: var(--size); opacity: .8;
  animation: floatup var(--dur) linear infinite; animation-delay: var(--delay);
}
.fl svg { width: 100%; height: 100%; display: block; }
@keyframes floatup {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: .8; }
  50% { transform: translate(var(--dx), -55vh) rotate(calc(var(--rot) / 2)); }
  92% { opacity: .8; }
  100% { transform: translate(0, -115vh) rotate(var(--rot)); opacity: 0; }
}
#confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* ---------------- Tombol suara ---------------- */
.sound-toggles { position: fixed; top: 12px; right: 12px; z-index: 55; display: flex; gap: 8px; }
.snd {
  position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.snd svg { width: 22px; height: 22px; }
.snd:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.snd.off { background: #dde3e6; color: var(--ink-soft); }
.snd.off::after { content: ""; position: absolute; width: 30px; height: 3px; background: var(--coral); transform: rotate(-45deg); border-radius: 2px; }

/* ---------------- Tulisan "Insos Barakah" ---------------- */
.w1 { color: var(--paper); }
.w2 { color: var(--sun); }
.ch { display: inline-block; animation: wave 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .09s); }
@keyframes wave { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-7px) rotate(-3deg); } }

/* ---------------- Layar pembuka ---------------- */
.intro {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; cursor: pointer;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 253, 245, .75) 0, rgba(255, 253, 245, 0) 45%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 60%, var(--sky-3) 100%);
}
.intro.leaving { animation: introout .55s ease-in forwards; }
@keyframes introout { to { opacity: 0; transform: scale(1.08); } }
.intro-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2vh, 18px); text-align: center; }
.intro-logo-wrap { position: relative; width: clamp(150px, 32vh, 300px); aspect-ratio: 1; }
.intro-logo {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 6px 0 rgba(29, 49, 64, .9));
  animation: logoin 1s var(--bounce) both, logofloat 4s ease-in-out 1s infinite;
}
@keyframes logoin { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
@keyframes logofloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.spark {
  position: absolute; width: 34px; height: 34px; background: var(--sun);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle 1.8s ease-in-out infinite;
}
.spark.s1 { top: 4%; right: -6%; animation-delay: .9s; }
.spark.s2 { bottom: 14%; left: -10%; width: 24px; height: 24px; animation-delay: 1.3s; }
.spark.s3 { top: 40%; right: -14%; width: 18px; height: 18px; animation-delay: 1.7s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
/* Garis tepi judul dibuat dari bayangan berlapis (bukan text-stroke) supaya huruf
   seperti "B" tidak memunculkan garis di bagian yang bertumpuk. */
.intro-title {
  font-size: clamp(3rem, 11vh, 6.5rem); line-height: .95; font-weight: 700;
  text-shadow:
    4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
    0 9px 0 var(--ink), 3px 8px 0 var(--ink), -3px 8px 0 var(--ink);
}
.intro-title .ch {
  animation: dropin .7s var(--bounce) backwards, wave 3.2s ease-in-out infinite;
  animation-delay: calc(.45s + var(--i) * .06s), calc(1.8s + var(--i) * .09s);
}
@keyframes dropin { from { transform: translateY(-120px) rotate(-20deg); opacity: 0; } }
.intro-tag { margin: 0; animation: popin .6s var(--bounce) 1.25s backwards; }
.intro-tag span {
  display: inline-block; font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 3vh, 1.7rem);
  background: var(--leaf); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  padding: 4px 22px; transform: rotate(-2deg);
}
.intro-start {
  margin-top: 1vh; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 3.6vh, 2rem);
  background: var(--sun); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink);
  padding: 12px 34px;
  animation: popin .5s var(--bounce) 1.5s backwards, breathe 1.3s ease-in-out 2.1s infinite;
}
.intro-start:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.intro-hint { margin: 0; font-weight: 700; color: var(--ink-soft); animation: popin .5s ease 1.8s backwards; }
@keyframes popin { from { transform: scale(.4); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.07); } }

/* ---------------- Kerangka lobi: muat satu layar ---------------- */
.lobby {
  position: relative; z-index: 1; max-width: 1440px; margin: 0 auto;
  padding: clamp(10px, 2vh, 22px) 16px 12px;
  height: 100vh; height: 100dvh; min-height: 560px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 2vh, 20px);
}

/* Judul */
.brand { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); }
.brand-logo {
  width: clamp(76px, 14vh, 140px); height: auto; aspect-ratio: 1; flex: none;
  filter: drop-shadow(0 5px 0 rgba(29, 49, 64, .9));
  animation: logofloat 4s ease-in-out infinite;
}
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-name {
  font-size: clamp(2.4rem, 8.5vh, 4.8rem); line-height: .95; font-weight: 700;
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 7px 0 var(--ink), 2px 6px 0 var(--ink), -2px 6px 0 var(--ink);
}
.brand-tagline { margin: 6px 0 0; }
.brand-tagline span {
  display: inline-block; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 2.4vh, 1.35rem);
  background: var(--leaf); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink);
  padding: 2px 16px; transform: rotate(-1.5deg);
}

.lobby-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(16px, 3vw, 44px); min-height: 0; align-items: stretch;
}

/* Foto tim */
.team { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4vh, 12px); min-height: 0; }
.team-title {
  font-size: clamp(1.05rem, 2.8vh, 1.5rem); text-align: center;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  padding: 4px 16px;
}
/* Polaroid menyesuaikan ruang yang tersisa (cqh/cqw = persen tinggi/lebar area foto). */
.stack { position: relative; flex: 1 1 0; min-height: 0; width: 100%; container-type: size; display: grid; place-items: center; }
.paper {
  position: absolute; height: min(88cqh, 76cqw * 1.33); aspect-ratio: 1000 / 1330;
  background: var(--paper-2); border: 3px solid var(--ink); border-radius: 10px;
}
.paper.p1 { transform: rotate(6deg) translate(10px, 4px); background: var(--sun-2); }
.paper.p2 { transform: rotate(-7deg) translate(-12px, 6px); background: var(--leaf-2); }
.polaroid {
  --tilt: -2deg;
  position: relative; margin: 0; height: min(92cqh, 80cqw * 1.33); aspect-ratio: 1000 / 1330;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 7px 0 var(--ink);
  padding: 3.5% 3.5% 0;
  transform: rotate(var(--tilt)); transition: transform .4s ease;
}
.polaroid img {
  display: block; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: center top;
  border: 3px solid var(--ink); border-radius: 4px; background: var(--sky-2);
}
.polaroid figcaption {
  flex: none; text-align: center; padding: 2% 4px 3.5%;
  font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 2.6vh, 1.45rem);
}
.polaroid::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 224, 138, .85); border: 2px solid rgba(29, 49, 64, .35); border-radius: 3px;
}
/* Wajah yang bisa diketuk. Letak & ukurannya dihitung di lobby.js dari data foto. */
.faces { position: absolute; left: 0; top: 0; pointer-events: none; }
.face {
  position: absolute; padding: 0; border: 0; border-radius: 50%; background: transparent;
  pointer-events: auto; cursor: pointer;
}
.face:focus-visible { outline: none; }
.face::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, .95); opacity: 0; transform: scale(.85);
  transition: opacity .15s ease, transform .2s var(--bounce);
}
.face:hover::before, .face:focus-visible::before { opacity: 1; transform: scale(1); }
.face.on { z-index: 1; }
.face.on::before {
  opacity: 1; transform: scale(1); border: 4px solid var(--sun);
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2.5px var(--ink);
  animation: facering .5s var(--bounce);
}
@keyframes facering { from { transform: scale(.6); opacity: 0; } }
.face-tag {
  position: absolute; left: 50%; bottom: 94%; transform: translateX(-50%) scale(0); transform-origin: 50% 120%;
  white-space: nowrap; padding: 3px 12px; pointer-events: none;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--display); font-weight: 700; font-size: clamp(.85rem, 2.3vh, 1.2rem); line-height: 1.2;
  transition: transform .25s var(--bounce);
}
.face-tag::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px;
  border: 7px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0;
}
.face.on .face-tag { transform: translateX(-50%) scale(1); }
.polaroid.out { transform: rotate(calc(var(--tilt) - 8deg)) translateX(-30px) scale(.94); opacity: 0; transition: transform .32s ease-in, opacity .32s ease-in; }
.polaroid.in { animation: photoin .45s var(--bounce); }
@keyframes photoin { from { transform: rotate(calc(var(--tilt) + 8deg)) translateX(30px) scale(.94); opacity: 0; } }
.nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.nav svg { width: 24px; height: 24px; }
.nav.prev { left: 0; }
.nav.next { right: 0; }
.nav:active { transform: translateY(calc(-50% + 2px)); box-shadow: 0 1px 0 var(--ink); }
.team-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dots { display: flex; gap: 8px; }
.dot { width: 16px; height: 16px; border-radius: 50%; padding: 0; background: var(--paper); border: 2.5px solid var(--ink); transition: transform .2s var(--bounce), background .2s; }
.dot[aria-current="true"] { background: var(--sun); transform: scale(1.25); }
.team-note { margin: 0; font-weight: 800; font-size: .9rem; color: var(--ink-soft); }

/* Pilihan game */
.games { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); min-height: 0; justify-content: center; }
.mascot-row { display: flex; align-items: flex-end; gap: 12px; }
.mascot { width: clamp(90px, 16vh, 150px); height: clamp(90px, 16vh, 150px); flex: none; padding: 0; border: 0; background: none; animation: bob 3s ease-in-out infinite; }
.mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mascot.jump { animation: jump .6s ease; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes jump { 30% { transform: translateY(-18px) scale(1.05); } 60% { transform: translateY(0) scale(.97, 1.03); } }
.bubble {
  position: relative; flex: 1; margin: 0 0 14px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink);
  padding: 10px 18px; font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 2.4vh, 1.3rem); line-height: 1.35;
}
.bubble::before { content: ""; position: absolute; left: -13px; bottom: 16px; border: 10px solid transparent; border-right: 13px solid var(--ink); border-left: 0; }
.bubble::after { content: ""; position: absolute; left: -8px; bottom: 19px; border: 7px solid transparent; border-right: 9px solid var(--paper); border-left: 0; }
.games-title { font-size: clamp(1.3rem, 3.4vh, 1.9rem); }
.game-list { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); }
.game-card {
  --gc: var(--leaf);
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  padding: clamp(8px, 1.4vh, 14px) clamp(10px, 1.4vw, 18px);
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-left: 14px solid var(--gc); border-radius: 20px; box-shadow: 0 5px 0 var(--ink);
  transition: transform .15s var(--bounce), box-shadow .15s;
}
a.game-card:hover, a.game-card:focus-visible { transform: translateY(-4px) rotate(-.6deg) scale(1.01); box-shadow: 0 9px 0 var(--ink); }
a.game-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.gc-icon {
  width: clamp(56px, 10vh, 88px); height: clamp(56px, 10vh, 88px); flex: none;
  border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--sky-2);
  display: grid; place-items: center;
}
.gc-icon img { width: 100%; height: 100%; display: block; }
a.game-card:hover .gc-icon { animation: wiggle .5s ease; }
@keyframes wiggle { 25% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.08); } }
.gc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-chip {
  align-self: flex-start; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: var(--gc); border: 2px solid var(--ink); border-radius: 999px; padding: 0 10px;
}
.gc-body b { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 3vh, 1.6rem); line-height: 1.15; }
.gc-body small { font-size: clamp(.82rem, 1.9vh, 1rem); font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.gc-go {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 2.4vh, 1.3rem);
  background: var(--sun); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
  padding: 6px 10px 6px 8px;
}
.gc-go kbd { font-size: .75em; }
.gc-go svg { width: 20px; height: 20px; transition: transform .2s; }
a.game-card:hover .gc-go svg { transform: translateX(4px); }
@media (hover: none) { .gc-go kbd { display: none; } }
.game-card.soon { border-style: dashed; border-left-width: 3px; box-shadow: none; background: rgba(255, 253, 245, .6); }
.game-card.soon .gc-icon { border-style: dashed; background: transparent; }
.gc-plus { font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: var(--ink-soft); }
.game-card.soon b { color: var(--ink-soft); }

/* Kaki */
.lobby-foot { display: flex; align-items: center; justify-content: center; gap: 8px 24px; flex-wrap: wrap; }
.credit, .tip { margin: 0; font-weight: 700; font-size: .92rem; color: var(--ink-soft); text-align: center; }
.credit a {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px;
  padding: 3px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 600; box-shadow: 0 3px 0 var(--ink);
  transition: background .15s ease;
}
/* Sama dengan tautan GitHub di dalam game */
.credit a:hover, .credit a:focus-visible { background: var(--sun-2); }
.credit a svg { width: 16px; height: 16px; }
@media (hover: none) { .tip { display: none; } }

/* ---------------- Animasi masuk lobi (setelah layar pembuka) ---------------- */
body.entered .brand { animation: dropdown .7s var(--bounce) backwards; }
body.entered .team { animation: swingin .8s var(--bounce) .15s backwards; }
body.entered .mascot-row { animation: popin .6s var(--bounce) .3s backwards; }
body.entered .games-title { animation: slidein .5s var(--bounce) .4s backwards; }
body.entered .game-card { animation: slidein .55s var(--bounce) backwards; animation-delay: calc(.5s + var(--i) * .12s); }
body.entered .lobby-foot { animation: fadein .6s ease .9s backwards; }
@keyframes dropdown { from { transform: translateY(-60px); opacity: 0; } }
@keyframes swingin { from { transform: translateX(-80px) rotate(-8deg); opacity: 0; } }
@keyframes slidein { from { transform: translateX(80px); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }

/* ---------------- Layar sempit (HP) ---------------- */
@media (max-width: 860px) {
  .lobby { height: auto; min-height: 0; grid-template-rows: auto auto auto; padding-top: 64px; }
  .lobby-main { grid-template-columns: 1fr; }
  .games { order: -1; }
  .brand { justify-content: flex-start; }
  .stack { flex: none; height: min(125vw, 600px); }
  /* Tombol musik/suara ikut tergulung, tidak melayang menutupi isi saat di-scroll. */
  .sound-toggles { position: absolute; }
}

/* HP tegak: judul tidak patah di tengah kata dan ukurannya mengikuti lebar layar. */
@media (max-width: 600px) {
  .w1, .w2 { white-space: nowrap; }
  .brand { gap: 10px; }
  .brand-logo { width: clamp(64px, 22vw, 96px); }
  .brand-name { font-size: clamp(2rem, 12.5vw, 3.4rem); }
  .intro-title { font-size: clamp(2.6rem, 17vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .polaroid, .polaroid.out { transition: none; }
}