/* ===== Pabrik Permen Pak Bambang — style ===== */
:root {
  --pink: #ff5fa8; --pink-d: #d6337f; --purple: #7b2ff7; --cream: #fff7fb; --ink: #4a2545;
  --gold: #ffc107; --ok: #2e7d32; --bad: #e53935; --card: #ffffffee;
  --shadow: 0 6px 0 rgba(90, 20, 80, .25), 0 10px 24px rgba(90, 20, 80, .2);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #c79bff; }
body {
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif; color: var(--ink); min-height: 100vh;
  background: radial-gradient(circle at 20% 10%, #ffd1ec 0, transparent 40%), radial-gradient(circle at 90% 80%, #d9c2ff 0, transparent 45%), linear-gradient(160deg, #ffb3d9, #c79bff);
  background-attachment: fixed; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Top bar ---------- */
#topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: linear-gradient(90deg, var(--pink), var(--purple)); color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.logo { background: none; border: 0; color: #fff; font-size: 18px; font-weight: 700; }
.top-stats { display: flex; gap: 6px; }
.pill { background: rgba(255,255,255,.22); border: 0; color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 15px; }

main { max-width: 640px; margin: 0 auto; padding: 12px 16px 40px; }
.screen { display: none; animation: fadeIn .25s; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Tombol ---------- */
.btn { border: 0; border-radius: 14px; padding: 10px 14px; font-size: 16px; font-weight: 600; background: #fff; color: var(--ink); box-shadow: 0 4px 0 #d9b3cf; transition: transform .1s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9b3cf; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #ff7cbc, var(--pink-d)); color: #fff; box-shadow: 0 4px 0 #9c1f5c; }
.btn.danger { background: linear-gradient(180deg, #ff7043, #d84315); color: #fff; box-shadow: 0 4px 0 #8f2a0b; }
.btn.big { font-size: 19px; padding: 14px; }
.btn.small { padding: 6px 10px; font-size: 14px; }
.link { background: none; border: 0; color: var(--pink-d); text-decoration: underline; font-size: inherit; }

/* ---------- Menu ---------- */
.hero { text-align: center; padding: 8px 0 4px; }
.hero-candies { font-size: 34px; letter-spacing: 6px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.hero h1 { margin: 6px 0; font-size: clamp(28px, 7vw, 40px); line-height: 1.05; color: #fff; text-shadow: 0 3px 0 var(--pink-d), 0 6px 14px rgba(120, 0, 80, .35); }
.hero h1 span { color: #fff59d; }
.hero p { margin: 6px auto 12px; max-width: 420px; }
.profile-chip { display: flex; align-items: center; gap: 10px; margin: 0 auto 12px; background: var(--card); border: 0; border-radius: 99px; padding: 6px 16px 6px 6px; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.profile-chip small { display: block; color: var(--pink-d); }
.ava { font-size: 28px; width: 42px; height: 42px; display: grid; place-items: center; background: #ffe3f1; border-radius: 50%; }
.ava.big { font-size: 56px; width: 86px; height: 86px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.menu-grid .btn.big.primary { grid-column: 1 / -1; }
.panel { background: var(--card); border-radius: 18px; padding: 12px 14px; margin-top: 14px; box-shadow: var(--shadow); }
.panel h3 { margin: 0 0 8px; }
.quest { padding: 6px 0; border-bottom: 1px dashed #f0c6de; }
.quest:last-child { border: 0; }
.quest.done { opacity: .6; }
.q-rew { float: right; color: #b7860b; font-weight: 700; }
.bar { height: 10px; background: #f6d9ea; border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--purple)); border-radius: 99px; transition: width .35s; }
.menu-best { text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tiny { text-align: center; font-size: 13px; color: #5d2a55; }

/* ---------- Header layar ---------- */
.scr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.scr-head h2 { margin: 0; color: #fff; text-shadow: 0 2px 0 var(--pink-d); }

/* ---------- Peta ---------- */
.hard-toggle { display: block; background: #3b0d2e; color: #fff; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
.map-stars { color: #fff; font-weight: 700; margin-bottom: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.chapter { position: relative; background: var(--card); border-radius: 18px; padding: 12px; margin-bottom: 14px; box-shadow: var(--shadow); overflow: hidden; }
.chapter h3 { margin: 0; }
.chapter p { margin: 2px 0 10px; font-size: 14px; }
.chapter.secret { background: linear-gradient(135deg, #3b2a12, #6b4c13); color: #ffe082; }
.nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.node { border: 0; border-radius: 14px; background: linear-gradient(180deg, #fff, #ffe3f1); box-shadow: 0 3px 0 #e2a8c8; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); }
.node .n-num { font-size: 22px; font-weight: 700; }
.node .n-name { font-size: 10px; line-height: 1.1; min-height: 22px; text-align: center; }
.node .n-star { color: #f9a825; font-size: 12px; letter-spacing: -1px; }
.node.boss { background: linear-gradient(180deg, #ffccbc, #ff8a65); }
.node.locked { filter: grayscale(1); opacity: .6; }
.secret .node { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; background: linear-gradient(180deg, #ffe082, #ffb300); }
.chapter.fog > :not(.fog-cover) { filter: blur(3px); }
.fog-cover { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 20px; font-weight: 700; color: #fff; background: linear-gradient(180deg, rgba(120, 110, 140, .75), rgba(70, 60, 90, .85)); }
.fog-cover small { font-size: 13px; font-weight: 400; }

/* ---------- HUD game ---------- */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-mid { flex: 1; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#lvName { font-weight: 700; font-size: 15px; }
.hud-row { display: flex; justify-content: center; align-items: baseline; gap: 12px; }
#score { font-size: 28px; }
#moves, #time { background: rgba(255,255,255,.25); border-radius: 99px; padding: 1px 10px; font-weight: 600; }
#moves.low, #time.low { background: var(--bad); animation: pulse .6s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.target { background: var(--card); border-radius: 12px; padding: 6px 10px; margin: 8px 0 6px; font-size: 14px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.boss { display: flex; gap: 10px; align-items: center; background: linear-gradient(90deg, #4a0e0e, #7b1f1f); color: #fff; border-radius: 14px; padding: 6px 10px; margin-bottom: 6px; }
#bossPortrait { font-size: 40px; }
#bossPortrait.hit { animation: hit .3s; }
#bossPortrait.attack { animation: attack .6s; }
@keyframes hit { 30% { transform: translateX(-6px) scale(.9); filter: brightness(2); } 60% { transform: translateX(6px); } }
@keyframes attack { 40% { transform: scale(1.5) rotate(-10deg); } }
.boss-info { flex: 1; }
.bar.hp { background: #2a0606; height: 12px; }
.bar.hp i { background: linear-gradient(90deg, #ff1744, #ff9100); }

/* ---------- Papan ---------- */
#boardWrap { position: relative; width: min(100%, 470px, calc(100vh - 290px)); min-width: 280px; margin: 0 auto; }
#boardWrap.boss-mode #board { box-shadow: 0 0 0 4px #ff5252, 0 0 26px #ff1744; }
#board { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; background: rgba(60, 20, 70, .35); box-shadow: inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.5); touch-action: none; user-select: none; overflow: hidden; }
#tiles, #candies { position: absolute; inset: 0; }
.tile { position: absolute; width: 12.5%; height: 12.5%; border: 1px solid rgba(255,255,255,.08); }
.tile:nth-child(odd) { background: rgba(255,255,255,.06); }
.tile.jelly1 { background: rgba(255, 110, 200, .55); box-shadow: inset 0 0 10px rgba(255, 255, 255, .6); border-radius: 8px; }
.tile.jelly2 { background: rgba(190, 30, 140, .8); box-shadow: inset 0 0 12px rgba(255, 255, 255, .7); border-radius: 8px; }

.candy { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; transition: transform .22s ease-in; will-change: transform; }
.candy::before, .candy::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; transition: transform .15s; }
.c0 { --col: #e53935; --fruit: '🍓'; }
.c1 { --col: #1e88e5; --fruit: '🫐'; }
.c2 { --col: #43a047; --fruit: '🍏'; }
.c3 { --col: #fdd835; --fruit: '🍋'; }
.c4 { --col: #fb8c00; --fruit: '🍊'; }
.c5 { --col: #8e24aa; --fruit: '🍇'; }
.c9 { --col: #3e2723; --fruit: '🌈'; }

/* Skin klasik: permen digambar penuh dengan CSS (tanpa file gambar) */
.skin-classic .candy::before { background: radial-gradient(circle at 32% 28%, #fff 0 10%, transparent 26%), radial-gradient(circle at 50% 50%, var(--col) 0 60%, color-mix(in srgb, var(--col) 60%, #000) 100%); border-radius: 50%; box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.skin-classic .c1::before, .skin-classic .c4::before { border-radius: 28%; }
.skin-classic .c3::before { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
/* Skin buah */
.skin-fruit .candy::before { content: var(--fruit); display: grid; place-items: center; font-size: clamp(20px, 5.4vw, 38px); background: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
/* Skin neon */
.skin-neon #board { background: #0d0221; }
.skin-neon .candy::before { background: rgba(0,0,0,.4); border: 3px solid var(--col); box-shadow: 0 0 8px var(--col), inset 0 0 8px var(--col); }
.skin-neon .c1::before { border-radius: 20%; } .skin-neon .c2::before { border-radius: 0; transform: rotate(45deg) scale(.82); }
.skin-neon .c3::before { border-radius: 50% 0; } .skin-neon .c4::before { border-radius: 30% 70%; }
/* Skin retro */
.skin-retro #board { background: #222034; }
.skin-retro .candy::before { border-radius: 0; background: var(--col); box-shadow: inset -4px -4px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.4), 0 0 0 2px #000; }
.skin-retro .candy::after { inset: 30%; border-radius: 0; background: rgba(255,255,255,.35); }

/* Special candy */
.candy.s-h::after { background: repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 3px, transparent 3px 8px); inset: 22%; border-radius: 30%; }
.candy.s-v::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 3px, transparent 3px 8px); inset: 22%; border-radius: 30%; }
.candy.s-bomb::after { inset: 4%; border: 3px dashed #fff; background: none; animation: spin 3s linear infinite; box-shadow: 0 0 8px #fff; }
.candy.s-color::before { background: radial-gradient(circle at 35% 30%, #6d4c41, #2b1b17 70%) !important; border-radius: 50% !important; box-shadow: 0 0 10px #fff; content: '' !important; }
.candy.s-color::after { inset: 14%; background: conic-gradient(#e53935 0 16%, #fb8c00 0 33%, #fdd835 0 50%, #43a047 0 66%, #1e88e5 0 83%, #8e24aa 0); -webkit-mask: radial-gradient(circle, transparent 0 2px, #000 2px 3px, transparent 3px) 0 0 / 8px 8px; mask: radial-gradient(circle, transparent 0 2px, #000 2px 3px, transparent 3px) 0 0 / 8px 8px; animation: spin 4s linear infinite; }
.candy.s-gold::before { background: radial-gradient(circle at 30% 30%, #fffde7, #ffd54f 40%, #ff8f00 100%) !important; border-radius: 50% !important; box-shadow: 0 0 12px #ffd54f; content: '' !important; border: 0 !important; }
.candy.s-gold::after { content: '🪙'; inset: 0; display: grid; place-items: center; font-size: clamp(14px, 3.6vw, 24px); background: none; animation: twinkle 1s infinite; }
.candy.locked::before { filter: grayscale(.6) brightness(.8); }
.candy.locked::after { content: '🔒'; inset: auto 2% 2% auto; width: 46%; height: 46%; font-size: clamp(10px, 2.6vw, 17px); display: grid; place-items: center; background: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 50% { transform: scale(1.2) rotate(15deg); } }

.candy.sel::before { transform: scale(1.15); filter: drop-shadow(0 0 6px #fff) brightness(1.15); }
.candy.sel { z-index: 3; }
.candy.hint::before { animation: wiggle .5s ease-in-out infinite; }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.08); } 75% { transform: rotate(12deg) scale(1.08); } }
.candy.shake::before { animation: shakeX .35s; }
@keyframes shakeX { 20%, 60% { transform: translateX(-12%); } 40%, 80% { transform: translateX(12%); } }
.candy.popping::before, .candy.popping::after { animation: popOut .25s forwards; }
@keyframes popOut { 40% { transform: scale(1.3); filter: brightness(2); } to { transform: scale(0); opacity: 0; } }
.candy.born::before { animation: popIn .3s; }
@keyframes popIn { from { transform: scale(0); } 70% { transform: scale(1.2); } }

/* Efek */
.flash { position: absolute; pointer-events: none; background: rgba(255,255,255,.85); box-shadow: 0 0 20px #fff; animation: flash .45s forwards; z-index: 4; }
.flash.f-h { left: 0; width: 100%; top: calc(var(--r) * 12.5%); height: 12.5%; }
.flash.f-v { top: 0; height: 100%; left: calc(var(--c) * 12.5%); width: 12.5%; }
.flash.f-bomb { left: calc((var(--c) - 1) * 12.5%); top: calc((var(--r) - 1) * 12.5%); width: 37.5%; height: 37.5%; border-radius: 50%; }
.flash.f-color, .flash.f-colorcolor, .flash.f-cross, .flash.f-bigbomb, .flash.f-megacross { inset: 0; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255, 95, 168, .4)); }
@keyframes flash { to { opacity: 0; transform: scale(1.1); } }
.float-score { position: absolute; transform: translate(-50%, -50%); color: #fff; font-weight: 700; font-size: 20px; text-shadow: 0 2px 0 var(--pink-d), 0 0 6px #000; pointer-events: none; animation: floatUp .9s forwards; z-index: 5; }
@keyframes floatUp { to { transform: translate(-50%, -160%); opacity: 0; } }
.mention { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: clamp(30px, 9vw, 52px); font-weight: 700; color: #fff59d; white-space: nowrap; pointer-events: none; z-index: 8; text-shadow: 0 3px 0 #c2185b, 0 0 18px #ff4081, 0 0 2px #000; animation: mention 1.4s forwards; }
.mention.fatality { color: #ff1744; text-shadow: 0 3px 0 #000, 0 0 24px #ff9100; font-size: clamp(32px, 10vw, 60px); }
@keyframes mention { 0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); } 20% { transform: translate(-50%, -50%) scale(1.25) rotate(3deg); } 35% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } to { transform: translate(-50%, -90%) scale(1); opacity: 0; } }
#eventBanner { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -140%); background: #fff; color: var(--ink); border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); opacity: 0; transition: .3s; z-index: 9; width: max-content; max-width: 92%; text-align: center; }
#eventBanner.show { transform: translate(-50%, 0); opacity: 1; }
#eventBanner.danger { background: #b71c1c; color: #fff; }
#boardWrap.bump { animation: bump .3s; }
@keyframes bump { 30% { transform: scale(1.02) translateY(2px); } }
#boardWrap.quake { animation: quake .7s; }
@keyframes quake { 10%, 50%, 90% { transform: translate(-6px, 3px) rotate(-1deg); } 30%, 70% { transform: translate(6px, -3px) rotate(1deg); } }
#board.glitch { animation: glitch .6s steps(4); }
@keyframes glitch { 25% { filter: hue-rotate(90deg) contrast(1.6); transform: skewX(4deg); } 50% { filter: invert(.2); } 75% { filter: hue-rotate(-90deg); transform: skewX(-4deg); } }
#board.shuffling #candies { animation: shuffle .5s; }
@keyframes shuffle { 50% { transform: scale(.85) rotate(8deg); opacity: .6; } }
#boardWrap.raining::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; background-image: radial-gradient(circle, #fff 0 2px, transparent 3px), radial-gradient(circle, #fff59d 0 2px, transparent 3px); background-size: 40px 40px, 60px 60px; animation: rain 1s linear infinite; box-shadow: 0 0 0 4px #fff59d, 0 0 30px #fff59d; }
@keyframes rain { to { background-position: 0 40px, 20px 60px; } }

#comment { min-height: 44px; margin: 8px auto 0; max-width: 470px; display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 14px; padding: 6px 10px; font-size: 14px; opacity: 0; transform: translateY(6px); transition: .25s; box-shadow: var(--shadow); }
#comment.show { opacity: 1; transform: none; }
.c-ava { font-size: 28px; }
.hud-bottom { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 8px auto 0; max-width: 470px; }
.rage { flex: 1; color: #fff; }
.rage small { font-weight: 700; }
.rage-bar { background: rgba(0,0,0,.25); }
.rage-bar i { background: linear-gradient(90deg, #ff9100, #ff1744); }
.btn.rush { width: 100%; padding: 6px; font-size: 14px; }
.btn.rush.ready { background: linear-gradient(180deg, #ff5252, #b71c1c); color: #fff; box-shadow: 0 4px 0 #6d0f0f; animation: pulse .7s infinite; }
.boosters { display: flex; gap: 6px; }
.booster { position: relative; font-size: 20px; padding: 8px 10px; }
.booster small { position: absolute; top: -6px; right: -6px; background: var(--pink-d); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 6px; }
.booster.on { background: #ffd54f; }

/* ---------- Overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(40, 10, 40, .55); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; }
.modal-box { background: var(--cream); border-radius: 22px; padding: 18px; width: min(100%, 420px); max-height: 90vh; overflow: auto; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: zoom .25s; }
@keyframes zoom { from { transform: scale(.85); } }
.modal-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.res-head { font-size: 26px; font-weight: 700; color: var(--pink-d); }
.res-head.lose { color: var(--bad); }
.res-stars span { font-size: 54px; color: #ddd; display: inline-block; }
.res-stars span.on { color: var(--gold); text-shadow: 0 3px 0 #c79100; animation: starIn .5s backwards; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.res-score { font-size: 40px; font-weight: 700; }
.res-score small { font-size: 14px; font-weight: 400; }
.res-line { margin: 4px 0; }
.res-recipe { margin-top: 10px; background: #fff3c4; border-radius: 12px; padding: 8px; }
.taunt { font-size: 18px; margin: 10px 0; }
.taunt span { font-size: 40px; display: block; }
.ending-text { text-align: left; line-height: 1.5; }
.share-text { width: 100%; height: 140px; }
.streak-row { display: flex; gap: 4px; justify-content: center; margin: 10px 0; }
.sd { background: #eee; border-radius: 10px; padding: 6px 4px; font-size: 13px; width: 13%; }
.sd.on { background: var(--gold); font-weight: 700; }

#dialog { place-items: end center; }
.d-box { position: relative; width: min(100%, 560px); background: #fff; border-radius: 22px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 10px 40px rgba(0,0,0,.4); margin-bottom: 20px; border: 4px solid var(--pink); }
.d-box.pop { animation: zoom .2s; }
.d-portrait { font-size: 64px; line-height: 1; background: #ffe3f1; border-radius: 16px; padding: 6px; }
.d-body { flex: 1; }
.d-name { color: var(--pink-d); font-size: 18px; }
.d-text { margin: 4px 0 8px; font-size: 17px; line-height: 1.35; min-height: 46px; }
.d-count { color: #999; margin-right: 10px; }
.d-next { color: var(--purple); animation: pulse 1s infinite; display: inline-block; }
.d-skip { position: absolute; top: -14px; right: 12px; border: 0; background: var(--purple); color: #fff; border-radius: 99px; padding: 4px 12px; }

#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column-reverse; gap: 6px; width: min(92%, 420px); pointer-events: none; }
.toast { background: #fff; border-radius: 14px; padding: 8px 14px; box-shadow: var(--shadow); animation: slideDown .3s; transition: .4s; }
.toast.badge { background: linear-gradient(90deg, #fff59d, #ffe082); }
.toast.quest { background: #c8e6c9; }
.toast.event { background: #3b2a12; color: #ffe082; }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes slideDown { from { transform: translateY(20px); opacity: 0; } }

/* ---------- Shop, galeri, badge, leaderboard, profil ---------- */
.kasir { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 16px; padding: 10px; margin-bottom: 10px; }
.kasir span { font-size: 44px; }
.kasir p { margin: 0; font-style: italic; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shop-item { background: var(--card); border-radius: 16px; padding: 10px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.shop-item p { margin: 0; font-size: 13px; flex: 1; }
.si-icon { font-size: 36px; }
#galleryBody h3 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.recipe { background: #fffdf5; border: 2px solid #f3d27a; border-radius: 14px; padding: 10px; }
.recipe p { margin: 4px 0 0; font-size: 13px; }
.recipe.locked { background: #eee; border-color: #ccc; color: #888; }
.recipe.ending { grid-column: 1 / -1; background: #f3e5f5; border-color: #ce93d8; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stats div { background: var(--card); border-radius: 12px; padding: 8px 4px; text-align: center; }
.stats b { display: block; font-size: 20px; }
.stats small { font-size: 11px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.badge { background: #eee; border-radius: 14px; padding: 10px; text-align: center; opacity: .65; }
.badge.on { background: linear-gradient(180deg, #fffde7, #ffe082); opacity: 1; box-shadow: var(--shadow); }
.b-icon { font-size: 34px; }
.badge small { display: block; font-size: 12px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { border: 0; border-radius: 99px; padding: 6px 12px; background: rgba(255,255,255,.6); }
.tab.on { background: var(--pink-d); color: #fff; }
.lb-row { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 12px; margin-bottom: 6px; }
.lb-row.me { background: linear-gradient(90deg, #fff59d, #fff); box-shadow: 0 0 0 2px var(--gold); }
.lb-rank { width: 30px; font-size: 20px; text-align: center; font-weight: 700; }
.lb-ava { font-size: 26px; }
.lb-name { flex: 1; }
.lb-name small { display: block; color: var(--pink-d); font-size: 12px; }
.profile-card { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #fff, #ffe3f1); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.profile-card h2 { margin: 0; }
.title-chip { display: inline-block; background: var(--purple); color: #fff; border-radius: 99px; padding: 2px 10px; font-size: 13px; margin: 2px 0 4px; }
.showcase { font-size: 13px; }
.profile label { display: block; background: var(--card); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-weight: 600; }
.profile input, .profile select { display: block; width: 100%; margin-top: 4px; padding: 8px; border-radius: 10px; border: 2px solid #f0c6de; font: inherit; }
.ava-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ava-pick button { font-size: 26px; border: 3px solid transparent; background: var(--card); border-radius: 12px; padding: 4px 8px; }
.ava-pick button.on { border-color: var(--pink-d); }

@media (max-width: 420px) {
  main { padding: 8px 10px 30px; }
  .logo span { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .node .n-name { display: none; }
  .d-portrait { font-size: 44px; }
}

/* ---------- Halaman Kredit ---------- */
.credits { max-width: 760px; margin: 0 auto; }
.cr-card { background: var(--card); border-radius: 20px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.cr-head { display: flex; gap: 16px; align-items: center; }
.cr-photo { width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%; overflow: hidden; background: #ffe3f1; display: grid; place-items: center; box-shadow: 0 4px 0 #e2a8c8; }
.cr-photo img { width: 100%; height: 100%; object-fit: cover; }
.cr-photo-ph { font-size: 52px; }
.cr-head h2 { margin: 0; }
.cr-nrp { color: var(--pink-d); font-weight: 700; }
.cr-role { font-size: 14px; margin: 2px 0 0; }
.cr-card h3 { margin: 0 0 6px; }
.cr-card ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.cr-card ul b { color: var(--pink-d); }
.cr-thanks { text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); margin: 4px 0 0; }

/* ---------- Landscape 16:9 / layar lebar ---------- */
@media (min-width: 820px) {
  main { max-width: 960px; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-grid .btn.big.primary { grid-column: 1 / -1; }

  /* Layar bermain: papan di kiri, info & kontrol di kanan (hemat ruang vertikal pada 16:9) */
  #scr-game.active {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    align-content: start;
    max-width: 920px;
    margin: 0 auto;
  }
  #scr-game.active > #boardWrap {
    grid-column: 1; grid-row: 1 / span 6;
    width: min(46vw, 72vh, 540px); margin: 0; align-self: start;
  }
  #scr-game.active > .hud,
  #scr-game.active > .target,
  #scr-game.active > #bossBar,
  #scr-game.active > #comment,
  #scr-game.active > .hud-bottom {
    grid-column: 2; max-width: none; margin-left: 0; margin-right: 0;
  }
  #scr-game.active > .hud { margin-top: 2px; }
}