@font-face { font-family: Quicksand; font-weight: 600; font-display: swap; src: url(../fonts/quicksand-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Quicksand; font-weight: 700; font-display: swap; src: url(../fonts/quicksand-latin-700-normal.woff2) format('woff2'); }
/* Palet Lume: krem, peach, rose gold, cokelat mocha */
:root {
  --ink: #fff6ee;
  --muted: rgba(255, 246, 238, .72);
  --accent: #f6c3a6;
  --accent-deep: #b9785a;
  --on-accent: #3a2522;
  --shade: rgba(36, 22, 22, .55);
  --brand: Quicksand, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #241a1b; color: var(--ink);
  font: 600 16px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; z-index: 5; }
.hidden { display: none !important; }
#loading { background: #241a1b; }
#paused, #over { background: var(--shade); }
#menu { justify-content: flex-start; padding-top: calc(28px + env(safe-area-inset-top)); }
.spacer { flex: 1; }

.title { font-size: clamp(34px, 9vw, 64px); font-weight: 900; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
#loading .title, #menu .title { font-family: var(--brand); font-weight: 700; font-size: clamp(46px, 13vw, 84px); letter-spacing: 0; line-height: 1; }
.title span { color: var(--accent); }
.brand { font-family: var(--brand); font-weight: 700; font-size: 15px !important; letter-spacing: .02em; }
.sub { font-size: clamp(15px, 4vw, 20px); color: var(--muted); margin-top: -8px; }
.hint { color: var(--muted); font-weight: 500; }
.hint.small { font-size: 13px; max-width: 360px; }
.hint b { color: var(--ink); }

.bar { width: min(280px, 70vw); height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; margin-top: 18px; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.big { background: var(--accent); color: var(--on-accent); font-size: 22px; font-weight: 900; padding: 14px 44px; border-radius: 14px;
  box-shadow: 0 4px 0 var(--accent-deep); }
.big:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.big.wait { opacity: .8; font-size: 18px; }
.ghost { background: transparent; color: var(--muted); padding: 8px 16px; font-size: 16px; }

.deck { --cw: min(clamp(150px, 44vw, 220px), 30vh); position: relative; flex: none; width: 100vw;
  height: calc(var(--cw) * 1.4 + 52px); touch-action: none; cursor: grab; }
.deck.dragging { cursor: grabbing; }
.card { position: absolute; left: 50%; top: 4px; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 115%; will-change: transform; }
.card img { display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 16px; background: #f7efe3; object-fit: cover;
  box-shadow: 0 10px 26px rgba(0,0,0,.4); pointer-events: none; }
.card span { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: var(--on-accent); font-size: clamp(15px, 4.2vw, 19px); font-weight: 900; letter-spacing: .03em;
  text-transform: uppercase; padding: 9px 22px; border-radius: 12px; box-shadow: 0 4px 0 var(--accent-deep); }
@media (max-height: 560px) { #menu .sub, #menu .hint.small { display: none; } }
@media (max-width: 520px) { #menu { padding-top: calc(62px + env(safe-area-inset-top)); } } /* judul tidak ketimpa tombol musik */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.stat { position: absolute; top: calc(12px + env(safe-area-inset-top)); display: flex; flex-direction: column;
  text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.stat small { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat b { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stat.left { left: 16px; }
.stat.right { right: 64px; text-align: right; }
.stat.right b { color: var(--accent); }
#power { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
#power small { font-size: 12px; font-weight: 700; color: #ffb3ad; letter-spacing: .04em; }
#power i { display: block; width: 110px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
#power b { display: block; height: 100%; width: 100%; background: #ff5a4e; border-radius: 3px; }
#power.ending b { background: #ffd1cc; }
#pause { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; pointer-events: auto; width: 40px; height: 40px;
  border-radius: 10px; background: rgba(36,22,22,.45); display: flex; align-items: center; justify-content: center; gap: 4px; }
#pause i { display: block; width: 4px; height: 15px; border-radius: 1px; background: var(--ink); }
.music { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; padding: 9px;
  border-radius: 10px; background: rgba(36,22,22,.45); }
.music svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music .x { display: none; }
.music.off svg { opacity: .55; }
.music.off .x { display: block; }

.result { display: flex; gap: 36px; margin: 8px 0; }
.result div { display: flex; flex-direction: column; }
.result small { color: var(--muted); font-size: 13px; }
.result b { font-size: 40px; font-weight: 900; }
.result div:last-child b { color: var(--accent); }

/* ---------- diskon (reward.js) ---------- */
.stat .disc { margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--accent); }
.goal { margin-top: -4px; }
.goal b, .mycode b { color: var(--accent); }
.milestone { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px 12px; border-radius: 16px;
  background: rgba(36, 22, 22, .72); border: 1px solid rgba(246, 195, 166, .45); text-align: center; white-space: nowrap;
  opacity: 0; pointer-events: none; }
.milestone b { font: 700 26px/1.1 var(--brand); color: var(--accent); }
.milestone span { font-size: 15px; font-weight: 700; color: var(--ink); }
.milestone.max { background: rgba(246, 195, 166, .92); border-color: #fff3ea; }
.milestone.max b, .milestone.max span { color: var(--on-accent); }
.milestone.show { animation: ms-pop 2.2s ease forwards; }
@keyframes ms-pop {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(.85); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  18% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
.result .disc-res b { color: var(--accent); }
#over { overflow-y: auto; justify-content: safe center; }
.reward { width: min(380px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 16px;
  background: rgba(36, 22, 22, .6); border: 1px solid rgba(255, 246, 238, .14); }
.reward:empty { display: none; }
.rw-lbl { margin: 2px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rw-note { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.rw-note b { color: var(--ink); }
.rw-wait { margin: 6px 0; color: var(--muted); }
.rw-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px;
  border: 1.5px dashed var(--accent); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.rw-code span { font: 700 24px/1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .06em; color: var(--ink); user-select: text; }
.rw-copy { background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 10px; }
.rw-shops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } /* 4 series (Makeup, Skincare, Hair & Body, Parfum): 2 × 2 */
.rw-shop { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px; border-radius: 12px;
  border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; font-size: 14px; text-decoration: none; text-align: center; }
.rw-shop:active { background: var(--accent); color: var(--on-accent); }
@media (max-height: 700px) { #over .title { font-size: 34px; } #over { gap: 8px; } }

.goal-min { margin-top: -8px; }
.rw-kept { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(246, 195, 166, .14); font-size: 13px; font-weight: 500;
  line-height: 1.4; color: var(--ink); }
.rw-kept b { color: var(--accent); }
/* codes last a few hours: deadline + ticking time left right under the code */
.rw-time { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.rw-time b { color: var(--ink); }
.rw-left { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-time .rw-left, .mycode .rw-left { color: var(--accent); }

/* ---------- cara main (tutorial.js) ---------- */
.howto-btn { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; height: 40px; display: flex; align-items: center;
  gap: 7px; padding: 0 13px 0 7px; border-radius: 10px; background: rgba(36,22,22,.45); font-size: 14px; font-weight: 800; }
.howto-btn i { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 900 16px/26px system-ui, sans-serif;
  font-style: normal; text-align: center; }
.howto { z-index: 20; background: rgba(24, 15, 15, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
.ht-card { position: relative; width: min(400px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 14px; border-radius: 22px; background: linear-gradient(180deg, #3b2927, #291c1c);
  border: 1px solid rgba(246, 195, 166, .28); box-shadow: 0 18px 50px rgba(0,0,0,.5); touch-action: pan-y; }
.ht-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,246,238,.08);
  color: var(--muted); font-size: 24px; line-height: 1; }
.ht-kicker { margin: 2px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ht-kicker span { color: var(--accent); margin-left: 4px; }
.ht-slide { display: none; flex-direction: column; gap: 12px; }
.ht-slide.on { display: flex; }
.ht-slide.enter { animation: ht-in .32s ease; }
@keyframes ht-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.ht-slide h2 { margin: 0; font: 700 25px/1.15 var(--brand); color: var(--ink); }
.ht-text { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.ht-text b, .ht-fine b { color: var(--ink); }

/* 1. gerak */
.ht-moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ht-move { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,246,238,.07); }
.ht-move b { font-size: 14px; color: var(--ink); }
.ht-move small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ht-pad { position: relative; width: 64px; height: 50px; margin-bottom: 4px; --dx: 0; --dy: 0; --rot: 0deg; }
.ht-pad.d-l { --dx: -1; --rot: 180deg; }
.ht-pad.d-r { --dx: 1; }
.ht-pad.d-u { --dy: -1; --rot: -90deg; }
.ht-pad.d-d { --dy: 1; --rot: 90deg; }
.ht-pad.swipe { border-radius: 10px; background: rgba(255,246,238,.06); }
.ht-trail { position: absolute; left: 50%; top: 50%; width: 34px; height: 3px; margin: -1.5px 0 0 -17px; border-radius: 2px;
  background: rgba(246,195,166,.35); transform: rotate(var(--rot)); }
.ht-trail::after { content: ""; position: absolute; right: -4px; top: -4px; border: 5.5px solid transparent;
  border-left: 7px solid rgba(246,195,166,.55); border-right: 0; }
.ht-finger { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 5px rgba(255,246,238,.22); animation: ht-swipe 1.7s ease-in-out infinite; }
.ht-move:nth-child(2) .ht-finger, .ht-move:nth-child(2) kbd { animation-delay: .42s; }
.ht-move:nth-child(3) .ht-finger, .ht-move:nth-child(3) kbd { animation-delay: .85s; }
.ht-move:nth-child(4) .ht-finger, .ht-move:nth-child(4) kbd { animation-delay: 1.27s; }
@keyframes ht-swipe {
  0% { opacity: 0; transform: translate(calc(var(--dx) * -15px), calc(var(--dy) * -13px)) scale(.7); }
  15% { opacity: 1; transform: translate(calc(var(--dx) * -15px), calc(var(--dy) * -13px)) scale(1); }
  60% { opacity: 1; transform: translate(calc(var(--dx) * 15px), calc(var(--dy) * 13px)); }
  80%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 15px), calc(var(--dy) * 13px)); }
}
.ht-pad kbd { position: absolute; left: 50%; top: 50%; width: 40px; height: 38px; margin: -21px 0 0 -20px; border-radius: 9px;
  background: #f7efe3; color: var(--on-accent); font: 900 22px/38px system-ui, sans-serif; box-shadow: 0 4px 0 var(--accent-deep);
  animation: ht-press 1.7s ease-in-out infinite; }
@keyframes ht-press {
  0%, 20%, 45%, 100% { transform: none; box-shadow: 0 4px 0 var(--accent-deep); }
  30% { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); background: var(--accent); }
}

/* 2. rintangan */
.ht-obs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ht-obs li { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 14px; background: rgba(0,0,0,.22); text-align: left; }
.ht-obs svg { width: 62px; height: 42px; display: block; }
.ht-obs span b { display: block; font-size: 14px; color: var(--ink); }
.ht-obs span small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ht-obs em { font-style: normal; font-weight: 800; font-size: 13px; white-space: nowrap; padding: 6px 10px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); }

/* 3. koin */
.ht-coins { position: relative; height: 82px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ht-coin { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe3d2, #e7a98b 48%, #b9785a 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.22), inset 0 -5px 9px rgba(0,0,0,.22), 0 5px 12px rgba(0,0,0,.35);
  animation: ht-bob 1.8s ease-in-out infinite; }
.ht-coin i { font: 700 15px var(--brand); font-style: normal; color: #6f3f2d; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.ht-coin.c2 { animation-delay: .25s; }
.ht-coin.c3 { animation-delay: .5s; }
@keyframes ht-bob { 0%, 100% { transform: translateY(4px) rotateY(0deg); } 50% { transform: translateY(-6px) rotateY(25deg); } }
.ht-plus { position: absolute; left: calc(50% + 70px); top: 2px; font: 700 21px var(--brand); color: var(--accent); animation: ht-plus 1.8s ease-out infinite; }
@keyframes ht-plus { 0% { opacity: 0; transform: translateY(10px); } 25%, 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.ht-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ht-facts li { padding: 9px 12px; border-radius: 12px; background: rgba(0,0,0,.22); font-size: 14.5px; font-weight: 500; color: var(--muted); }
.ht-facts b { color: var(--ink); }
.ht-facts li.mag { display: flex; align-items: center; gap: 10px; text-align: left; }
.ht-facts li.mag svg { width: 30px; height: 30px; flex: none; }

/* 4. diskon */
.ht-meter { padding: 4px 16px 34px; }
.ht-track { height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.ht-track i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #f6c3a6, #ff9f7a);
  animation: ht-fill 3.4s ease-in-out infinite; }
@keyframes ht-fill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.ht-ticks { position: relative; }
.ht-ticks span { position: absolute; top: 7px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.ht-ticks span:last-child { transform: translateX(-85%); }
.ht-ticks b { font-size: 14px; color: var(--accent); }
.ht-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ht-steps li { counter-increment: s; padding: 8px 5px; border-radius: 12px; background: rgba(0,0,0,.22); font-size: 12.5px; line-height: 1.25; color: var(--ink); }
.ht-steps li::before { content: counter(s); display: block; width: 22px; height: 22px; margin: 0 auto 4px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 900 13px/22px system-ui, sans-serif; }
.ht-fine { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }

.ht-dots { display: flex; justify-content: center; gap: 7px; }
.ht-dots button { width: 8px; height: 8px; padding: 0; border-radius: 4px; background: rgba(255,246,238,.28); transition: width .2s, background .2s; }
.ht-dots button.on { width: 22px; background: var(--accent); }
.ht-nav { display: flex; align-items: center; gap: 8px; }
.ht-nav .big { flex: 1; padding: 12px 18px; font-size: 19px; }
.ht-nav .ghost { min-width: 92px; }
.invisible { visibility: hidden; }
@media (max-height: 640px) { .ht-slide h2 { font-size: 21px; } .ht-card { gap: 9px; } .ht-coins { height: 70px; } }
@media (prefers-reduced-motion: reduce) { .ht-card *, .ht-card *::before { animation: none !important; } .ht-track i { transform: scaleX(.6); } }

/* ---------- pilih game (index.html, 5 Okt 2026): kartu lumé run / lumé fly di depan /game/ */
#pick { z-index: 15; background: #241a1b; overflow-y: auto; justify-content: safe center; }
.pick-cards { display: flex; gap: 14px; justify-content: center; width: min(560px, 100%); margin-top: 8px; }
.pick-card { flex: 1 1 0; min-width: 0; max-width: 250px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 14px;
  border-radius: 18px; background: rgba(255,246,238,.06); border: 1px solid rgba(246,195,166,.28); color: var(--ink); text-decoration: none; }
.pick-card img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 12px; background: #f7efe3; }
.pick-card b { font: 700 24px/1.1 var(--brand); margin-top: 4px; }
.pick-card small { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); min-height: 2.6em; }
.pick-card .big { font-size: 18px; padding: 10px 28px; }
.pick-card:active .big { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
@media (max-height: 620px) { .pick-card img { aspect-ratio: 1; } }