@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(../fonts/poppins-regular.woff) format("woff"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(../fonts/poppins-medium.woff) format("woff"); }
@font-face { font-family: Poppins; font-weight: 600 700; font-display: swap; src: url(../fonts/poppins-bold.woff) format("woff"); }
  :root { --ink: #f4ede2; --muted: #b9ad9c; --glass: rgba(18, 14, 11, .72); --line: rgba(255, 235, 205, .14); --warm: #ffcf8a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050403; color: var(--ink); overflow: hidden;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
canvas { display: block; touch-action: none; outline: none; }
#vig { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); }
button { font: inherit; color: inherit; cursor: pointer; }

/* intro */
#intro { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 55%, rgba(5,4,3,.55), rgba(5,4,3,.92) 70%); transition: opacity .9s ease; z-index: 5; }
#intro.gone { opacity: 0; pointer-events: none; }
.kicker img { height: clamp(26px, 4vw, 38px); width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 4px 24px rgba(255,190,110,.18)); }
#intro h1 { margin: 14px 0 10px; font-size: clamp(34px, 7vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; }
#intro p { margin: 0 auto; max-width: 520px; color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.55; }
#enter { margin-top: 30px; padding: 15px 30px; border-radius: 999px; border: 1px solid rgba(255,207,138,.5);
  background: linear-gradient(180deg, rgba(255,207,138,.22), rgba(255,207,138,.08)); font-weight: 600; font-size: 16px;
  box-shadow: 0 0 40px rgba(255,190,110,.18); transition: transform .2s, box-shadow .2s, opacity .3s; }
#enter:hover { transform: translateY(-1px); box-shadow: 0 0 60px rgba(255,190,110,.32); }
#enter[disabled] { opacity: .5; cursor: progress; }
.hint { margin-top: 18px; font-size: 13px; color: #8d8274; }
.bar { width: 200px; height: 2px; background: rgba(255,255,255,.1); margin: 22px auto 0; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--warm); transition: width .3s; }

/* toolbar */
#hud { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px;
  padding: 6px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); z-index: 3; opacity: 0; transition: opacity .8s .4s; }
#hud.on { opacity: 1; }
#hud button { display: flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; font-size: 14px; font-weight: 500; white-space: nowrap; }
#hud button:hover { background: rgba(255,255,255,.08); }
#hud svg { width: 18px; height: 18px; flex: none; }
#brand { position: fixed; left: 18px; top: max(16px, env(safe-area-inset-top)); z-index: 3; opacity: 0; transition: opacity .8s .4s; pointer-events: none; }
#brand.on { opacity: 1; }
#brand img { display: block; height: 22px; width: auto; margin-bottom: 6px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
#brand span { font-size: 15px; font-weight: 600; }
#tip { position: fixed; left: 50%; top: max(18px, env(safe-area-inset-top)); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); font-size: 13px; color: var(--muted); z-index: 3; opacity: 0; transition: opacity .6s; pointer-events: none; white-space: nowrap; }
#tip.on { opacity: 1; }

/* lightbox */
#lb { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  background: rgba(6,5,4,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .3s; }
#lb.on { opacity: 1; pointer-events: auto; }
#stage { position: relative; height: 100vh; height: 100dvh; display: grid; place-items: center; padding: 64px 0 80px; min-width: 0; overflow: hidden; }
#stage img, #stage video { display: block; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  background: #000; animation: pop .35s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.nav { height: 56px; width: 56px; margin: auto; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; place-items: center; }
.nav:hover { background: rgba(255,255,255,.12); }
.nav svg { width: 24px; height: 24px; }
#close { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.06); display: grid; place-items: center; z-index: 2; }
#close svg { width: 20px; height: 20px; }
#count { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 13px; color: var(--muted);
  letter-spacing: .06em; white-space: nowrap; }
#count b { color: var(--ink); font-weight: 600; }
.spin { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--warm); border-radius: 50%; animation: sp 0.9s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  #lb { display: block; }
  #stage { width: 100%; padding-left: 10px; padding-right: 10px; }
  .nav { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); width: 48px; height: 48px; z-index: 2; }
  #prev { left: 16px; } #next { right: 16px; }
  #stage { padding: 70px 0 84px; }
  #stage img, #stage video { max-height: calc(100dvh - 170px); border-radius: 6px; }
  #hud .lbl { display: none; }
  #brand { display: none; }
  #tip { white-space: normal; text-align: center; width: calc(100% - 32px); border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.err { color: var(--muted); }

/* background music control */
#music { position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); z-index: 3; display: flex; align-items: center; gap: 2px;
  padding: 5px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity .8s .4s; }
#music.on { opacity: 1; pointer-events: auto; }
#music button { position: relative; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
#music button:hover { background: rgba(255,255,255,.08); }
#music svg { width: 18px; height: 18px; }
#mplay { background: rgba(255,207,138,.14) !important; color: var(--warm); }
#mplay .i-play { display: none; }
#music.paused #mplay .i-play { display: block; }
#music.paused #mplay .i-pause { display: none; }
#mplay .eq { position: absolute; right: 2px; bottom: 4px; display: flex; gap: 1.5px; align-items: flex-end; height: 8px; }
#mplay .eq i { width: 2px; height: 3px; background: var(--warm); border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
#mplay .eq i:nth-child(2) { animation-delay: .2s; } #mplay .eq i:nth-child(3) { animation-delay: .45s; }
#music.paused #mplay .eq { display: none; }
@keyframes eq { 0%, 100% { height: 2px; } 50% { height: 8px; } }
#mvol { width: 96px; height: 4px; margin: 0 4px; accent-color: var(--warm); cursor: pointer; }
@media (max-width: 640px) {
  #mvol { display: none; }
  #tip { top: calc(max(16px, env(safe-area-inset-top)) + 58px); }
}

/* upload */
#hud .primary { background: rgba(255,207,138,.16); color: var(--warm); }
#hud .primary:hover { background: rgba(255,207,138,.26); }
#cap { position: absolute; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 22px); transform: translateX(-50%); max-width: min(720px, 86vw); text-align: center; font-size: 15px; line-height: 1.4; }
#cap:empty { display: none; }
#cap .q { display: block; color: var(--ink); }
#cap .n { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.modal { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: 16px; background: rgba(6,5,4,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal[hidden] { display: none; }
.sheet { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: 18px; background: #16120e; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.sheet h2 { margin: 0 0 6px; font-size: 21px; }
.sheet .sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sheet .x { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; place-items: center; }
.sheet .x svg { width: 18px; height: 18px; }
.drop { position: relative; display: grid; place-items: center; min-height: 150px; border: 1.5px dashed rgba(255,207,138,.35); border-radius: 14px; background: rgba(255,255,255,.03); cursor: pointer; overflow: hidden; text-align: center; padding: 12px; color: var(--muted); font-size: 14px; }
.drop:hover { background: rgba(255,207,138,.06); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop img, .drop video { max-width: 100%; max-height: 220px; border-radius: 8px; pointer-events: none; }
.fld { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }
.fld .opt { opacity: .7; }
.fld input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0f0c0a; color: var(--ink); font: inherit; font-size: 15px; }
.fld input:focus { outline: 2px solid rgba(255,207,138,.45); outline-offset: 1px; }
.chk { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.45; cursor: pointer; }
.chk input { margin-top: 2px; accent-color: var(--warm); width: 16px; height: 16px; flex: none; }
.pbar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 16px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: var(--warm); transition: width .2s; }
.status { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.status.bad { color: #ff9b8a; } .status.good { color: #9be0a5; }
.go { width: 100%; margin-top: 10px; padding: 13px; border-radius: 12px; border: 1px solid rgba(255,207,138,.5); background: rgba(255,207,138,.18); font-weight: 600; font-size: 15px; }
.go:disabled { opacity: .5; cursor: progress; }
@media (max-width: 640px) { #hud .primary .lbl { display: inline; } #hud button { padding: 0 10px; } }

/* share */
.sharebtn { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); z-index: 2; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,207,138,.4); background: rgba(255,207,138,.14); color: var(--warm); font-weight: 600; font-size: 14px; }
.sharebtn:hover { background: rgba(255,207,138,.24); }
.sharebtn svg { width: 18px; height: 18px; }
.sharebtn[hidden] { display: none; }
#toast { position: fixed; left: 50%; top: max(70px, env(safe-area-inset-top)); transform: translate(-50%, -8px); z-index: 20; padding: 10px 16px; border-radius: 12px; background: rgba(18,14,11,.92); border: 1px solid var(--line); color: var(--ink); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center; word-break: break-all; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }