:root {
--pink: #f0968f;
--pink-soft: #fbe8dc;
--lavender: #d9c294;
--lavender-soft: #f6ecd6;
--mint: #b9dfa0;
--mint-soft: #e9f4d9;
--peach: #f7d3a0;
--peach-soft: #fdf0da;
--yellow: #f7e3a0;
--cream: #fff7e6;
--text: #4a3524;
--text-soft: #8a7258;
--primary: #6aa84f;
--bg: #fdf3dd;
--card-bg: #fffbef;
--accent: #f0968f;
--white: #fffdf6;
--shadow: 0 4px 0 rgba(107,68,35,.14), 0 12px 22px rgba(90,60,25,.13);
--shadow-card: 0 5px 0 rgba(107,68,35,.16), 0 14px 26px rgba(90,60,25,.15);
--radius: 22px;
--radius-sm: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
height: 100%;
/* warm background as the ultimate fallback layer, visible only if something
above it is ever shorter than the viewport (shouldn't happen anymore, but safe) */
background: linear-gradient(135deg, #fdf3dd 0%, #f7ead0 40%, #e9f2d8 100%);
}
body {
font-family: 'Nunito', sans-serif;
background: linear-gradient(135deg, #fdf3dd 0%, #f7ead0 40%, #e9f2d8 100%);
height: 100%;
min-height: 100vh;
color: var(--text);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 20px;
}
/* Floating bg blobs */
.blob {
position: fixed; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none; z-index: 0;
animation: floatBlob 8s ease-in-out infinite;
}
.blob1 { width: 250px; height: 250px; background: var(--pink); top: -80px; left: -60px; animation-delay: 0s; }
.blob2 { width: 200px; height: 200px; background: var(--lavender); bottom: 100px; right: -50px; animation-delay: 3s; }
.blob3 { width: 180px; height: 180px; background: var(--mint); top: 40%; left: 30%; animation-delay: 5s; }
@keyframes floatBlob { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-20px) scale(1.05)} }
/* Header */
.header {
position: sticky; top: 0; z-index: 100;
background: var(--cream);
border-bottom: 3px solid #d9c294;
box-shadow: 0 4px 0 rgba(107,68,35,.08);
padding: 13px 20px;
display: flex; align-items: center; justify-content: space-between;
transition: all 0.2s;
}
.header-title { font-family: 'Fredoka One', cursive; font-size: 1.4rem; color: var(--text); letter-spacing: 0.5px; }
.header-title span { color: #d9c294; }
.koin-badge {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: white; font-weight: 800; font-size: 0.85rem;
padding: 5px 12px; border-radius: 50px;
box-shadow: 0 2px 8px rgba(255,165,0,0.3);
display: flex; align-items: center; gap: 4px;
}
/* Side Menu */
.side-menu-item {
display: block; width: 100%; text-align: left;
padding: 10px 14px; border-radius: 10px; border: none;
background: none; cursor: pointer; font-size: 0.9rem;
font-family: inherit; color: var(--text); font-weight: 600;
transition: background 0.15s;
}
.side-menu-item:hover, .side-menu-item.active {
background: rgba(106,168,79,0.12); color: #6aa84f;
}
/* Remove bottom padding since no nav */
body { padding-bottom: 0 !important; }
/* Screens */
.screen { display: none; padding: 16px; position: relative; z-index: 1; min-height: 100vh; }
.screen.active { display: block; animation: fadeUp 0.3s ease; }
#screen-task { padding: 0; background: #241a10; min-height: 100vh; }
/* Burger Builder overlay */
#bb-overlay { display:none; position:fixed; inset:0; z-index:500; background:radial-gradient(circle at 50% 25%,#3a2818 0%,#1a0f08 80%); font-family:'Segoe UI',system-ui,sans-serif; color:#fff; user-select:none; }
#bb-canvasWrap { position:absolute; inset:0; z-index:1; }
#bb-canvasWrap canvas { display:block; }
.bb-screen { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.bb-hidden { display:none !important; }
.bb-logo { font-size:56px; margin-bottom:8px; animation:bbBob 2s ease-in-out infinite; }
@keyframes bbBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.bb-title { font-size:28px; font-weight:900; color:#ffd97a; letter-spacing:1px; text-shadow:0 3px 0 #7a3800; margin-bottom:6px; }
.bb-sub { font-size:13px; color:#ffb366; opacity:0.9; margin-bottom:32px; max-width:280px; line-height:1.5; }
.bb-big-btn { background:linear-gradient(180deg,#ffb547,#ff8c1a); color:#3a1500; border:none; border-radius:50px; padding:16px 48px; font-size:18px; font-weight:900; cursor:pointer; box-shadow:0 6px 0 #b85e00; transition:transform .1s,box-shadow .1s; }
.bb-big-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #b85e00; }
.bb-small-btn { background:rgba(0,0,0,0.5); color:#ffd97a; border:1px solid rgba(255,200,80,0.3); border-radius:30px; padding:10px 24px; font-size:13px; font-weight:700; cursor:pointer; margin-top:14px; }
.bb-spin-label { font-size:14px; color:#ffb366; margin-bottom:16px; letter-spacing:2px; text-transform:uppercase; }
.bb-spin-display { background:rgba(0,0,0,0.5); border:3px solid #ffd97a; border-radius:24px; padding:30px 40px; min-width:260px; backdrop-filter:blur(10px); box-shadow:0 0 40px rgba(255,200,80,0.3); }
.bb-spin-emoji { font-size:64px; margin-bottom:8px; }
.bb-spin-name { font-size:22px; font-weight:800; color:#fff; }
.bb-recipe-card { background:rgba(20,10,5,0.92); border:2px solid #ffd97a; border-radius:20px; padding:24px; max-width:320px; width:100%; backdrop-filter:blur(12px); }
.bb-recipe-header { font-size:18px; font-weight:800; color:#ffd97a; margin-bottom:4px; }
.bb-recipe-target { font-size:13px; color:#ffb366; margin-bottom:16px; }
.bb-recipe-list { display:flex; flex-direction:column-reverse; gap:6px; margin-bottom:18px; }
.bb-recipe-item { display:flex; align-items:center; gap:10px; background:rgba(255,200,80,0.08); border-radius:10px; padding:8px 12px; font-size:14px; font-weight:600; }
.bb-recipe-item .bb-num { background:#ffd97a; color:#3a1500; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; }
.bb-mem-timer { font-size:32px; font-weight:900; color:#ff6b4a; margin-bottom:8px; }
.bb-mem-hint { font-size:12px; color:#ffb366; opacity:0.8; }
.bb-play-hud { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; }
.bb-timer-badge { background:rgba(0,0,0,0.6); border:2px solid #ff6b4a; color:#ff6b4a; font-size:20px; font-weight:900; padding:6px 16px; border-radius:30px; backdrop-filter:blur(8px); min-width:80px; text-align:center; }
.bb-timer-badge.warn { animation:bbPulse .5s ease-in-out infinite; border-color:#ff3030; color:#ff3030; }
@keyframes bbPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.bb-target-badge { background:rgba(0,0,0,0.6); border:1px solid rgba(255,200,80,0.4); color:#ffd97a; font-size:13px; font-weight:700; padding:8px 14px; border-radius:20px; backdrop-filter:blur(8px); display:flex; align-items:center; gap:6px; }
.bb-stack-count { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:20; font-size:12px; color:#ffb366; background:rgba(0,0,0,0.4); padding:4px 12px; border-radius:16px; }
.bb-ing-bar { position:fixed; bottom:0; left:0; right:0; z-index:20; padding:14px 10px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to top,rgba(10,5,2,0.95),transparent); }
.bb-ing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:440px; margin:0 auto; }
.bb-ing-btn { background:rgba(40,25,12,0.9); border:2px solid rgba(255,200,80,0.25); border-radius:14px; padding:8px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .08s,background .15s; }
.bb-ing-btn:active { transform:scale(0.92); background:rgba(255,200,80,0.25); }
.bb-ing-btn .em { font-size:26px; }
.bb-ing-btn .nm { font-size:9px; color:#ffd0a0; font-weight:600; }
.bb-undo-btn { position:fixed; bottom:calc(110px + env(safe-area-inset-bottom)); right:16px; z-index:21; background:rgba(0,0,0,0.6); border:1px solid rgba(255,100,100,0.4); color:#ff8866; width:48px; height:48px; border-radius:50%; font-size:20px; cursor:pointer; backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; }
.bb-result-card { background:rgba(20,10,5,0.95); border:3px solid; border-radius:24px; padding:32px 28px; max-width:340px; width:100%; backdrop-filter:blur(12px); }
.bb-result-card.win { border-color:#4ade80; box-shadow:0 0 40px rgba(74,222,128,0.3); }
.bb-result-card.lose { border-color:#ff6b4a; box-shadow:0 0 40px rgba(255,107,74,0.3); }
.bb-result-emoji { font-size:64px; margin-bottom:12px; }
.bb-result-title { font-size:24px; font-weight:900; margin-bottom:8px; }
.bb-result-title.win { color:#4ade80; }
.bb-result-title.lose { color:#ff6b4a; }
.bb-result-detail { font-size:14px; color:#ffd0a0; margin-bottom:6px; line-height:1.5; }
.bb-result-coins { font-size:28px; font-weight:900; color:#ffd97a; margin:16px 0; }
.bb-acc-bar { background:rgba(255,255,255,0.1); border-radius:10px; height:12px; overflow:hidden; margin:12px 0; }
.bb-acc-fill { height:100%; border-radius:10px; transition:width .8s ease; }
.bb-toast { position:fixed; top:120px; left:50%; transform:translateX(-50%) translateY(-20px); background:rgba(0,0,0,0.85); color:#fff; padding:10px 20px; border-radius:20px; font-size:14px; font-weight:700; z-index:100; opacity:0; transition:all .3s; pointer-events:none; white-space:nowrap; }
.bb-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
/* Cards */
.card {
background: rgba(255,255,255,0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow-card);
border: 1.5px solid rgba(255,255,255,0.6);
margin-bottom: 14px;
}
.card-title {
font-family: 'Fredoka One', cursive;
font-size: 1.1rem; color: var(--text); margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
/* Pet Card */
.pet-hero {
background: linear-gradient(135deg, rgba(240,150,143,0.4), rgba(217,194,148,0.4));
border-radius: var(--radius);
padding: 22px 18px; text-align: center; margin-bottom: 14px;
border: 1.5px solid rgba(255,255,255,0.7);
box-shadow: var(--shadow-card);
position: relative; overflow: hidden;
}
.pet-hero::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5) 0%, transparent 60%);
}
.pet-emoji { font-size: 5rem; display: block; animation: petBob 2s ease-in-out infinite; }
@keyframes petBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.pet-name { font-family: 'Fredoka One', cursive; font-size: 1.6rem; color: var(--text); margin-top: 6px; }
.pet-level { font-size: 0.85rem; color: var(--text-soft); font-weight: 700; margin-top: 2px; }
.pet-mood { font-size: 1rem; margin-top: 8px; font-weight: 700; color: #6aa84f; }
/* Stat bars */
.stat-row { margin-bottom: 12px; }
.stat-label { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.stat-bar-bg { background: rgba(180,140,200,0.15); border-radius: 50px; height: 10px; overflow: hidden; }
.stat-bar { height: 100%; border-radius: 50px; transition: width 0.6s ease; }
.bar-hunger { background: linear-gradient(90deg, #f0968f, #e07a6a); }
.bar-happy { background: linear-gradient(90deg, #b9dfa0, #8fc177); }
.bar-health { background: linear-gradient(90deg, #d9c294, #b8935e); }
/* Buttons */
.btn {
display: block; width: 100%; padding: 14px 18px;
border: none; border-radius: var(--radius-sm);
font-family: 'Nunito', sans-serif; font-size: 0.95rem; font-weight: 800;
cursor: pointer; transition: all 0.2s; text-align: center;
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
.btn:active { transform: scale(0.97); }
.btn-pink { background: linear-gradient(135deg, #f0968f, #e07a6a); color: white; }
.btn-lavender { background: linear-gradient(135deg, #d9c294, #b8935e); color: white; }
.btn-mint { background: linear-gradient(135deg, #b9dfa0, #8fc177); color: white; }
.btn-peach { background: linear-gradient(135deg, #f7d3a0, #eda05e); color: white; }
.btn-yellow { background: linear-gradient(135deg, #f7e3a0, #f0cf6e); color: #7a6400; }
.btn-soft { background: rgba(255,255,255,0.8); color: var(--text); border: 1.5px solid rgba(217,194,148,0.4); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.btn-disabled { opacity: 0.45; pointer-events: none; }
/* Shop items */
.shop-item {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; background: rgba(255,255,255,0.65);
border-radius: var(--radius-sm); margin-bottom: 10px;
border: 1.5px solid rgba(255,255,255,0.7);
box-shadow: 0 2px 10px rgba(180,140,200,0.1);
}
.shop-item-left { display: flex; align-items: center; gap: 12px; }
.shop-item-emoji { font-size: 1.8rem; }
.shop-item-name { font-weight: 800; font-size: 0.9rem; }
.shop-item-desc { font-size: 0.75rem; color: var(--text-soft); margin-top: 2px; }
.shop-item-price { font-weight: 800; font-size: 0.85rem; color: #6aa84f; white-space: nowrap; }
.buy-btn {
padding: 7px 14px; border: none; border-radius: 50px;
background: linear-gradient(135deg, #d9c294, #b8935e); color: white;
font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.8rem;
cursor: pointer; transition: all 0.15s; margin-left: 10px;
}
.buy-btn:active { transform: scale(0.94); }
/* Inventory */
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-item {
background: rgba(255,255,255,0.7); border-radius: var(--radius-sm);
padding: 14px 10px; text-align: center;
border: 1.5px solid rgba(255,255,255,0.6);
box-shadow: 0 2px 10px rgba(180,140,200,0.1);
}
.inv-item-emoji { font-size: 2rem; display: block; }
.inv-item-name { font-size: 0.72rem; font-weight: 700; margin-top: 4px; color: var(--text); }
.inv-item-count { font-size: 0.8rem; font-weight: 800; color: #6aa84f; margin-top: 2px; }
/* Games */
.game-card {
background: rgba(255,255,255,0.7); border-radius: var(--radius);
padding: 20px; text-align: center; cursor: pointer;
border: 1.5px solid rgba(255,255,255,0.7);
box-shadow: var(--shadow); transition: all 0.2s;
margin-bottom: 12px;
}
.game-card:active { transform: scale(0.97); }
.game-card-emoji { font-size: 2.8rem; display: block; margin-bottom: 8px; }
.game-card-name { font-family: 'Fredoka One', cursive; font-size: 1.1rem; color: var(--text); }
.game-card-desc { font-size: 0.78rem; color: var(--text-soft); margin-top: 4px; }
.game-card-quota { font-size: 0.75rem; font-weight: 800; margin-top: 6px; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Modal */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(90,74,106,0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; align-items: flex-end; justify-content: center;
padding: 0;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box {
background: linear-gradient(170deg, #fffdf4, #f9edd2);
border: 3.5px solid #8b5e34; border-bottom: none;
border-radius: 26px 26px 0 0;
padding: 24px 20px 36px;
width: 100%; max-width: 480px;
box-shadow: 0 -10px 34px rgba(80,50,20,.28);
animation: slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
/* Modal yang isinya panjang WAJIB bisa digulir sendiri.
Tanpa dua baris ini, kotaknya tumbuh ke ATAS melewati tepi layar
(.modal-overlay itu align-items:flex-end), bagian atasnya terpotong
viewport, dan TIDAK ADA yang bisa digulir — pemain melihat daftar yang
terpenggal dan tombol paling atas tidak bisa diketuk sama sekali.
Dilaporkan pemain di daftar "pakai item ke pet mana" dengan 11 pet,
tapi ini kena SEMUA modal berdaftar panjang: pilih pet, pilih hadiah,
pilih furnitur, dan seterusnya. Satu aturan menutup semuanya.
100dvh, bukan 100vh: bilah bawah peramban seluler menyembunyikan
~60px dan vh tidak tahu itu.
overscroll-behavior:contain supaya guliran yang mentok tidak diteruskan
ke halaman di belakang — di Telegram, tarikan yang lolos memicu gestur
tutup mini app. */
max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width: 36px; height: 4px; background: rgba(180,140,200,0.3); border-radius: 50px; margin: 0 auto 20px; }
.modal-title { font-family: 'Fredoka One', cursive; font-size: 1.3rem; text-align: center; color: var(--text); margin-bottom: 16px; }
.modal-close { position: absolute; top: 16px; right: 20px; font-size: 1.4rem; cursor: pointer; background: none; border: none; color: var(--text-soft); }
/* Quiz buttons */
.quiz-btn {
display: block; width: 100%; padding: 13px 16px; margin-bottom: 10px;
background: rgba(255,255,255,0.8); border: 1.5px solid rgba(217,194,148,0.4);
border-radius: var(--radius-sm); font-family: 'Nunito', sans-serif;
font-weight: 700; font-size: 0.9rem; color: var(--text);
cursor: pointer; text-align: left; transition: all 0.15s;
}
.quiz-btn:active { transform: scale(0.98); }
.quiz-btn.correct { background: linear-gradient(135deg, #b9dfa0, #8fc177); color: white; border-color: transparent; }
.quiz-btn.wrong { background: linear-gradient(135deg, #f0968f, #e07a6a); color: white; border-color: transparent; }
/* Catch game */
.catch-grid { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.catch-btn {
width: 56px; height: 56px; border: none; border-radius: 14px;
font-size: 1.6rem; cursor: pointer; transition: all 0.15s;
background: rgba(255,255,255,0.8); box-shadow: 0 2px 10px rgba(180,140,200,0.15);
}
.catch-btn:active { transform: scale(0.9); }
/* Toast */
.toast {
position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px);
background: rgba(60,40,80,0.9); color: white;
padding: 10px 20px; border-radius: 50px; font-weight: 700; font-size: 0.85rem;
z-index: 300; white-space: nowrap; opacity: 0; transition: all 0.3s;
pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Loading */
.loading {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 60vh; width: 100%; height: 100%; gap: 16px;
}
.loading-emoji { font-size: 3rem; animation: petBob 1s ease-in-out infinite; }
.loading-text { font-family: 'Fredoka One', cursive; font-size: 1.2rem; color: var(--text-soft); }
/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-soft); }
.empty-state-emoji { font-size: 4rem; display: block; margin-bottom: 12px; }
.empty-state-title { font-family: 'Fredoka One', cursive; font-size: 1.2rem; color: var(--text); margin-bottom: 8px; }
/* Section label */
.section-label { font-family: 'Fredoka One', cursive; font-size: 1rem; color: var(--text-soft); margin: 16px 0 10px; letter-spacing: 0.5px; }
/* Partner info */
.partner-tag {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(217,194,148,0.25); border-radius: 50px;
padding: 5px 12px; font-size: 0.8rem; font-weight: 700; color: #6aa84f;
margin-bottom: 14px;
}
/* Pet animated display */
.pet-anim-wrap {
position: relative; display: inline-block;
width: 120px; height: 120px; margin: 0 auto 4px;
animation: petBob 2s ease-in-out infinite;
}
.pet-anim-wrap img.pet-anim {
width: 120px; height: 120px; object-fit: contain; display: block;
filter: drop-shadow(0 4px 12px rgba(180,140,200,0.3));
}
.pet-badge {
position: absolute; top: -8px; right: -4px;
font-size: 1.4rem; line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.pet-acc { position: absolute; font-size: 1.8rem; line-height: 1; pointer-events: none; }
.pet-acc.hat { top: -14px; left: 50%; transform: translateX(-50%); }
.pet-acc.glasses{ top: 38px; left: 50%; transform: translateX(-50%); }
.pet-acc.ribbon { top: -10px; right: 10px; }
.pet-acc.flower { top: -10px; left: 10px; }
.pet-acc.aura { top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5rem; opacity: 0.35; }
.pet-emoji-fallback { font-size: 5rem; display: block; }
/* Chat screen */
.chat-wrap {
display: flex; flex-direction: column; height: calc(100vh - 130px);
position: relative; z-index: 1;
}
.chat-pet-header {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; margin-bottom: 8px;
background: rgba(255,255,255,0.72);
backdrop-filter: blur(12px);
border-radius: var(--radius);
border: 1.5px solid rgba(255,255,255,0.6);
box-shadow: var(--shadow);
flex-shrink: 0;
}
.chat-pet-header.koi-header-chat {
background: rgba(10,25,50,0.6) !important;
border-color: rgba(100,200,255,0.2) !important;
}
.chat-messages {
flex: 1; overflow-y: auto; padding: 8px 4px;
display: flex; flex-direction: column; gap: 10px;
-webkit-overflow-scrolling: touch;
}
.chat-bubble {
max-width: 78%; padding: 10px 14px;
border-radius: 18px; font-size: 0.88rem;
line-height: 1.45; word-break: break-word;
animation: fadeUp 0.25s ease;
}
.chat-bubble.user {
align-self: flex-end;
background: linear-gradient(135deg, #d9c294, #b8935e);
color: white; border-bottom-right-radius: 4px;
}
.chat-bubble.pet {
align-self: flex-start;
background: rgba(255,255,255,0.85);
color: var(--text); border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(180,140,200,0.12);
border: 1.5px solid rgba(217,194,148,0.2);
}
.chat-bubble.pet.koi-bubble {
background: rgba(10,30,60,0.7) !important;
color: #c0e8ff !important;
border-color: rgba(100,200,255,0.2) !important;
}
.chat-bubble.typing {
display: flex; gap: 5px; align-items: center; padding: 12px 16px;
}
.typing-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--text-soft);
animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-input-wrap {
display: flex; gap: 8px; padding: 8px 0 4px;
flex-shrink: 0;
}
.chat-input {
flex: 1; padding: 11px 14px;
border: 1.5px solid rgba(217,194,148,0.4);
border-radius: 50px; font-family: 'Nunito', sans-serif;
font-size: 0.9rem; color: var(--text);
background: rgba(255,255,255,0.85); outline: none;
}
.chat-input.koi-input {
background: rgba(10,25,50,0.6) !important;
color: #c0e8ff !important;
border-color: rgba(100,200,255,0.3) !important;
}
.chat-send-btn {
width: 44px; height: 44px; border: none; border-radius: 50%;
background: linear-gradient(135deg, #d9c294, #b8935e);
color: white; font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: all 0.15s;
}
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn.koi-send {
background: linear-gradient(135deg, #0095d9, #005fa3) !important;
}
.chat-quota {
text-align: center; font-size: 0.75rem;
color: var(--text-soft); font-weight: 700;
padding: 2px 0 4px; flex-shrink: 0;
}
.chat-date-sep {
text-align: center; font-size: 0.72rem;
color: var(--text-soft); padding: 4px 0;
}
/* Cooldown badge */
.cooldown-badge {
display: inline-block; background: rgba(240,150,143,0.25);
color: #d4558a; font-size: 0.78rem; font-weight: 800;
padding: 4px 10px; border-radius: 50px; margin-top: 8px;
}
/* ===== KOI / OCEAN THEME ===== */
.koi-theme body,
body.koi-theme {
background: linear-gradient(180deg, #0a1628 0%, #0d2744 30%, #0a3d5c 60%, #0d5078 100%) !important;
}
.koi-screen {
background: linear-gradient(180deg, #0a1628 0%, #0d2744 30%, #0a3d5c 60%, #0d5078 100%);
min-height: 100vh;
}
/* Bubble particles for koi screen */
.koi-bubbles {
position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.bubble-particle {
position: absolute; border-radius: 50%;
background: rgba(100,200,255,0.15);
border: 1px solid rgba(100,200,255,0.3);
animation: bubbleRise linear infinite;
bottom: -30px;
}
@keyframes bubbleRise {
0% { transform: translateY(0) scale(1); opacity: 0.6; }
100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}
/* Koi video container */
.koi-video-wrap {
width: 100%; aspect-ratio: 1/1; max-width: 340px;
margin: 0 auto 16px; border-radius: 24px; overflow: hidden;
position: relative;
box-shadow: 0 0 40px rgba(0,180,255,0.3), 0 0 80px rgba(0,100,200,0.15);
border: 1.5px solid rgba(100,200,255,0.2);
}
.koi-video-wrap video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Koi card override */
.koi-hero {
background: rgba(10,30,60,0.6) !important;
border: 1.5px solid rgba(100,200,255,0.2) !important;
backdrop-filter: blur(16px);
}
.koi-hero .pet-name { color: #7dd8ff !important; }
.koi-hero .pet-level { color: rgba(100,200,255,0.7) !important; }
.koi-hero .pet-mood { color: #5bc8ff !important; }
/* Koi stat bars */
.koi-bar-hunger { background: linear-gradient(90deg, #ff6b9d, #ff4477) !important; }
.koi-bar-happy { background: linear-gradient(90deg, #5bc8ff, #0095d9) !important; }
.koi-bar-health { background: linear-gradient(90deg, #7dd8ff, #0070b0) !important; }
/* Koi card bg */
.koi-card {
background: rgba(10,25,50,0.55) !important;
border: 1.5px solid rgba(100,200,255,0.15) !important;
color: #c0e8ff !important;
}
.koi-card .card-title { color: #7dd8ff !important; }
.koi-card .stat-label { color: #a0d8f0 !important; }
/* Liquid glass buttons */
.btn-liquid {
position: relative; overflow: hidden;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: #e0f4ff !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
border-radius: 16px !important;
font-weight: 800;
transition: all 0.2s;
}
.btn-liquid::before {
content: '';
position: absolute; top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
transition: left 0.4s;
}
.btn-liquid:active { transform: scale(0.97); background: rgba(255,255,255,0.14) !important; }
.btn-liquid:hover::before { left: 100%; }
.btn-liquid-blue {
background: rgba(0,150,220,0.25) !important;
border-color: rgba(100,200,255,0.35) !important;
color: #c0eeff !important;
box-shadow: 0 4px 24px rgba(0,100,200,0.3), inset 0 1px 0 rgba(100,200,255,0.2) !important;
}
.btn-liquid-red {
background: rgba(220,50,80,0.25) !important;
border-color: rgba(255,120,140,0.35) !important;
color: #ffd0da !important;
}
/* Koi bottom nav */
.koi-nav {
background: rgba(5,15,35,0.7) !important;
border-top-color: rgba(100,200,255,0.15) !important;
backdrop-filter: blur(20px);
}
.koi-nav .nav-item { color: rgba(100,200,255,0.5) !important; }
.koi-nav .nav-item.active { color: #5bc8ff !important; }
.koi-nav .nav-item.active::before {
background: linear-gradient(90deg, #5bc8ff, #0095d9) !important;
}
/* Koi header */
.koi-header {
background: rgba(5,15,35,0.7) !important;
border-bottom-color: rgba(100,200,255,0.15) !important;
}
/* Koi quote bubble */
.koi-quote {
background: rgba(0,80,150,0.3);
border: 1px solid rgba(100,200,255,0.2);
border-radius: 16px; padding: 10px 14px;
font-size: 0.85rem; color: #a0d8f0; font-style: italic;
margin-bottom: 10px; text-align: center;
}
.progress-ring { display: block; margin: 0 auto 4px; }
/* ===== PET CARD CUSTOMIZER ===== */
.pet-settings-btn {
position: absolute; top: 10px; right: 10px; z-index: 10;
background: rgba(255,255,255,0.45); border: 1.5px solid rgba(255,255,255,0.7);
border-radius: 50%; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; cursor: pointer; backdrop-filter: blur(8px);
transition: all 0.18s; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.pet-settings-btn:active { transform: scale(0.9); }
/* Custom pet hero override vars */
.pet-hero-custom {
--card-bg: var(--_card-bg, linear-gradient(135deg, rgba(240,150,143,0.4), rgba(217,194,148,0.4)));
background: var(--card-bg) !important;
}
/* Theme preset swatches */
.theme-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.theme-swatch {
width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
border: 2.5px solid transparent; transition: all 0.15s;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.theme-swatch.active { border-color: var(--text); transform: scale(1.12); }
/* Emoji picker grid */
.emoji-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.emoji-opt {
width: 40px; height: 40px; border-radius: 10px; font-size: 1.4rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer; background: rgba(255,255,255,0.6);
border: 2.5px solid transparent; transition: all 0.15s;
}
.emoji-opt.active { border-color: #6aa84f; background: rgba(217,194,148,0.25); transform: scale(1.1); }
/* Size slider row */
.size-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.size-row input[type=range] { flex: 1; }
.size-preview { font-size: 2.5rem; line-height: 1; min-width: 40px; text-align: center; }
/* Customizer section label */
.cust-label { font-size: 0.78rem; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
/* btn color swatches */
.btn-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.btn-color-opt {
padding: 7px 14px; border-radius: 50px; font-size: 0.78rem; font-weight: 800;
cursor: pointer; border: 2.5px solid transparent; color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: all 0.15s;
}
.btn-color-opt.active { border-color: var(--text); transform: scale(1.06); }
/* Photo bg preview strip */
.photo-preview {
width: 100%; height: 80px; border-radius: 12px; object-fit: cover;
border: 2px solid rgba(217,194,148,0.4); margin: 6px 0 12px;
}
/* ==================== BATTLE ARENA ==================== */
#battle-overlay {
position:fixed;inset:0;z-index:9999;
background:#0d0d1a;
display:none;flex-direction:column;
overflow:hidden;
}
#battle-overlay.active{display:flex;}
.ba-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ba-star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;
animation:baTwinkle var(--d,3s) var(--dl,0s) ease-in-out infinite;}
@keyframes baTwinkle{0%,100%{opacity:0}50%{opacity:0.7}}
.ba-header{
padding:14px 18px 8px;display:flex;align-items:center;justify-content:space-between;
position:relative;z-index:2;border-bottom:1px solid rgba(255,107,107,0.15);
}
.ba-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:#ff6b6b;
text-shadow:0 0 20px rgba(255,107,107,0.4);}
.ba-close{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
border-radius:50%;width:34px;height:34px;color:rgba(255,255,255,0.6);font-size:1rem;
cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ba-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:20px;position:relative;z-index:2;overflow-y:auto;}
/* Choose phase */
.ba-choose-title{font-family:'Fredoka One',cursive;font-size:1.5rem;color:white;text-align:center;margin-bottom:6px;}
.ba-choose-sub{font-size:0.82rem;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:28px;}
.ba-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:340px;margin-bottom:24px;}
.ba-type-card{
background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.1);
border-radius:20px;padding:20px 12px;text-align:center;cursor:pointer;transition:all 0.2s;
}
.ba-type-card:active{transform:scale(0.96);}
.ba-type-card.sel{border-color:#ff6b6b;background:rgba(255,107,107,0.12);
box-shadow:0 0 24px rgba(255,107,107,0.2);}
.ba-type-emoji{font-size:2.2rem;display:block;margin-bottom:8px;}
.ba-type-name{font-family:'Fredoka One',cursive;font-size:1rem;color:white;margin-bottom:4px;}
.ba-type-desc{font-size:0.7rem;color:rgba(255,255,255,0.4);line-height:1.4;}
.ba-cost{background:rgba(255,215,0,0.12);border:1px solid rgba(255,215,0,0.25);
border-radius:50px;padding:6px 18px;color:#FFD700;font-size:0.85rem;font-weight:800;
margin-bottom:20px;display:inline-block;}
.ba-start-btn{
background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:white;border:none;
border-radius:16px;padding:14px 40px;font-family:'Fredoka One',cursive;font-size:1.1rem;
cursor:pointer;box-shadow:0 4px 20px rgba(238,90,36,0.4);transition:all 0.15s;width:100%;max-width:300px;
}
.ba-start-btn:active{transform:scale(0.97);}
.ba-start-btn:disabled{opacity:0.4;pointer-events:none;}
/* Matchmaking phase */
.ba-mm-wrap{text-align:center;width:100%;}
.ba-mm-spinner{
width:80px;height:80px;border-radius:50%;
border:3px solid rgba(255,107,107,0.2);border-top-color:#ff6b6b;
animation:baSpin 0.9s linear infinite;margin:0 auto 20px;
}
@keyframes baSpin{to{transform:rotate(360deg)}}
.ba-mm-title{font-family:'Fredoka One',cursive;font-size:1.3rem;color:white;margin-bottom:8px;}
.ba-mm-sub{font-size:0.82rem;color:rgba(255,255,255,0.4);margin-bottom:28px;}
.ba-mm-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;
background:#ff6b6b;margin:0 3px;animation:baDot 1.2s ease-in-out infinite;}
.ba-mm-dots span:nth-child(2){animation-delay:0.2s;}
.ba-mm-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes baDot{0%,80%,100%{transform:scale(0.6);opacity:0.4}40%{transform:scale(1);opacity:1}}
.ba-cancel-btn{
background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
border-radius:14px;padding:10px 28px;color:rgba(255,255,255,0.6);font-size:0.88rem;
cursor:pointer;margin-top:24px;font-family:'Nunito',sans-serif;font-weight:700;
}
/* VS banner (both phases) */
.ba-vs-wrap{
display:flex;align-items:center;justify-content:space-around;
width:100%;max-width:380px;margin-bottom:20px;
}
.ba-fighter{text-align:center;flex:1;}
.ba-fighter-emoji{font-size:2.8rem;display:block;margin-bottom:6px;}
.ba-fighter-name{font-family:'Fredoka One',cursive;font-size:0.9rem;color:white;}
.ba-fighter-sub{font-size:0.7rem;color:rgba(255,255,255,0.4);margin-top:2px;}
.ba-vs-badge{
font-family:'Fredoka One',cursive;font-size:1.8rem;color:#ff6b6b;
text-shadow:0 0 20px rgba(255,107,107,0.6);flex-shrink:0;padding:0 8px;
}
/* Countdown */
.ba-countdown{
font-family:'Fredoka One',cursive;font-size:6rem;color:white;
text-shadow:0 0 40px rgba(255,107,107,0.6);
animation:baCountPop 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes baCountPop{0%{transform:scale(1.8);opacity:0}100%{transform:scale(1);opacity:1}}
/* Spin phase (game mode selector) */
.ba-spin-track-wrap{
width:100%;overflow:hidden;border-radius:16px;
border:2px solid rgba(255,107,107,0.3);background:rgba(255,255,255,0.04);
position:relative;height:100px;
}
.ba-spin-track-wrap::before,.ba-spin-track-wrap::after{
content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.ba-spin-track-wrap::before{left:0;background:linear-gradient(90deg,#0d0d1a,transparent);}
.ba-spin-track-wrap::after{right:0;background:linear-gradient(-90deg,#0d0d1a,transparent);}
.ba-spin-indicator{
position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
width:3px;background:#ff6b6b;z-index:3;box-shadow:0 0 12px #ff6b6b;
}
.ba-spin-track{
display:flex;align-items:center;height:100%;
transition:transform 2.5s cubic-bezier(0.25,0.46,0.45,0.94);
will-change:transform;
}
.ba-spin-item{
flex-shrink:0;width:120px;height:80px;margin:0 8px;border-radius:14px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.1);
font-family:'Fredoka One',cursive;
}
.ba-spin-item.highlight{
background:rgba(255,107,107,0.2);border-color:#ff6b6b;
box-shadow:0 0 20px rgba(255,107,107,0.3);
}
.ba-spin-item-emoji{font-size:1.8rem;}
.ba-spin-item-name{font-size:0.8rem;color:white;}
.ba-spin-label{font-family:'Fredoka One',cursive;font-size:1rem;color:rgba(255,255,255,0.6);
text-align:center;margin-bottom:12px;}
.ba-spin-result{font-family:'Fredoka One',cursive;font-size:1.1rem;color:#ff6b6b;
text-align:center;margin-top:12px;opacity:0;transition:opacity 0.4s;}
.ba-spin-result.show{opacity:1;}
/* RPS game */
.ba-rps-wrap{width:100%;max-width:380px;}
.ba-rps-round{
font-family:'Fredoka One',cursive;font-size:0.9rem;color:rgba(255,255,255,0.5);
text-align:center;margin-bottom:8px;
}
.ba-rps-timer{
font-family:'Fredoka One',cursive;font-size:2rem;color:white;text-align:center;
margin-bottom:16px;
}
.ba-rps-timer.urgent{color:#ff6b6b;animation:baTimerPulse 0.5s ease-in-out infinite;}
@keyframes baTimerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ba-rps-choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px;}
.ba-rps-btn{
background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.1);
border-radius:18px;padding:16px 8px;text-align:center;cursor:pointer;transition:all 0.15s;
}
.ba-rps-btn:active{transform:scale(0.93);}
.ba-rps-btn.chosen{border-color:#ff6b6b;background:rgba(255,107,107,0.15);}
.ba-rps-btn.disabled{opacity:0.35;pointer-events:none;}
.ba-rps-btn-emoji{font-size:2rem;display:block;margin-bottom:4px;}
.ba-rps-btn-name{font-size:0.72rem;color:rgba(255,255,255,0.6);font-weight:700;}
.ba-rps-scoreboard{
display:flex;align-items:center;justify-content:space-around;
background:rgba(255,255,255,0.04);border-radius:14px;padding:12px;margin-bottom:16px;
}
.ba-rps-score-side{text-align:center;}
.ba-rps-score-num{font-family:'Fredoka One',cursive;font-size:1.8rem;color:white;}
.ba-rps-score-name{font-size:0.72rem;color:rgba(255,255,255,0.4);}
.ba-rps-score-sep{font-family:'Fredoka One',cursive;font-size:1.2rem;color:rgba(255,107,107,0.5);}
/* Round result popup */
.ba-round-result{
position:absolute;inset:0;z-index:10;
background:rgba(13,13,26,0.85);backdrop-filter:blur(8px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
animation:baFadeIn 0.25s ease;
}
@keyframes baFadeIn{from{opacity:0}to{opacity:1}}
.ba-round-result-title{
font-family:'Fredoka One',cursive;font-size:2rem;color:white;margin-bottom:8px;
text-shadow:0 0 30px rgba(255,107,107,0.5);
}
.ba-round-picks{display:flex;gap:20px;margin-bottom:8px;}
.ba-round-pick{text-align:center;}
.ba-round-pick-emoji{font-size:2.5rem;display:block;}
.ba-round-pick-label{font-size:0.72rem;color:rgba(255,255,255,0.5);}
.ba-round-winner-badge{
background:rgba(255,215,0,0.15);border:1px solid rgba(255,215,0,0.3);
border-radius:50px;padding:6px 20px;color:#FFD700;font-weight:800;font-size:0.88rem;
}
/* Auto battle drama */
.ba-auto-wrap{width:100%;max-width:380px;}
.ba-auto-pets{display:flex;align-items:center;justify-content:space-around;margin-bottom:20px;}
.ba-auto-pet{text-align:center;}
.ba-auto-pet-emoji{font-size:2.4rem;display:block;margin-bottom:4px;}
.ba-auto-pet-name{font-family:'Fredoka One',cursive;font-size:0.85rem;color:white;}
.ba-auto-pet-score{font-size:0.7rem;color:rgba(255,255,255,0.4);}
.ba-drama-box{
background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
border-radius:16px;padding:16px;min-height:120px;position:relative;overflow:hidden;
margin-bottom:16px;
}
.ba-drama-line{
font-size:0.88rem;color:rgba(255,255,255,0.85);line-height:1.6;
animation:baDramaSlide 0.4s ease;
}
@keyframes baDramaSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.ba-drama-dots{color:rgba(255,255,255,0.3);font-size:0.8rem;margin-top:8px;}
/* Final result */
.ba-result-wrap{text-align:center;width:100%;max-width:380px;}
.ba-result-emoji{font-size:4rem;display:block;margin-bottom:12px;
animation:baResultPop 0.6s cubic-bezier(0.36,0.07,0.19,0.97);}
@keyframes baResultPop{0%{transform:scale(0)}80%{transform:scale(1.2)}100%{transform:scale(1)}}
.ba-result-title{font-family:'Fredoka One',cursive;font-size:2rem;color:white;margin-bottom:6px;}
.ba-result-sub{font-size:0.88rem;color:rgba(255,255,255,0.5);margin-bottom:20px;}
.ba-result-reward{
background:rgba(255,215,0,0.1);border:1px solid rgba(255,215,0,0.25);
border-radius:14px;padding:12px 20px;color:#FFD700;font-weight:800;font-size:1rem;
margin-bottom:20px;display:inline-block;
}
.ba-result-close{
background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);
border-radius:14px;padding:12px 36px;color:white;font-family:'Fredoka One',cursive;
font-size:1rem;cursor:pointer;
}
/* ============================================================
FULLSCREEN ROOM — kayak Widgetable/My Talking Tom
============================================================ */
#screen-home {
padding: 0 !important;
margin-top: 0 !important;
background: linear-gradient(170deg, #fdf3dd 0%, #f7ead0 45%, #e9f2d8 100%);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: relative;
height: 100%;
min-height: 100vh;
min-height: 100dvh;
}
/* While loading or showing the "no pet"/"pet missing" card, lock the screen to
exactly one viewport and disable scrolling so no empty strip can ever appear
below the popup, on any screen size or aspect ratio. */
#screen-home.active:has(> #home-content > .loading),
#screen-home.active:has(> #home-content > .cozy-empty),
#screen-home.screen-empty-state.active {
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
body:has(#screen-home.screen-empty-state.active) {
overflow: hidden;
}
#home-content:has(> .loading),
#home-content:has(> .cozy-empty),
.screen-empty-state #home-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
width: 100%;
}
/* Room takes full viewport */
.room-fullscreen {
position: relative;
inset: 0;
z-index: 0;
background: #2a2016;
overflow: visible;
touch-action: pan-y;
}
.room-fullscreen.inside-home {
position: relative;
height: auto;
min-height: calc(100vh - 60px);
overflow: visible;
}
/* Background image stretched to fill */
.room-bg-full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* Vignette overlay */
.room-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%);
pointer-events: none;
z-index: 1;
}
/* Pet sprite — draggable */
.room-pet-wrap {
position: absolute;
z-index: 5;
cursor: grab;
user-select: none;
touch-action: none;
transform: translateX(-50%);
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
transition: filter 0.2s;
}
.room-pet-wrap:active { cursor: grabbing; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
#room-pet-canvas { image-rendering: pixelated; display: block; }
/* Speech bubble above pet */
.room-speech {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 14px;
padding: 6px 12px;
font-size: 0.72rem;
font-weight: 800;
color: #555;
white-space: nowrap;
box-shadow: 0 3px 12px rgba(0,0,0,0.15);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
/* label nama pet duduk tepat di atas sprite, jadi gelembungnya naik */
margin-bottom: 30px;
max-width: 160px;
white-space: normal;
text-align: center;
}
.room-speech::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: white;
border-bottom: none;
}
.room-speech.show { opacity: 1; }
/* Nama pet di atas sprite — dipakai pet utama DAN pasangannya yang sekamar.
Ikut di dalam .room-pet-wrap, tapi cuma kanvasnya yang dibalik pas pet jalan
(lihat pasangTransform di js/07), jadi tulisannya gak pernah jadi kaca. */
.room-petname {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
padding: 2px 9px;
border-radius: 99px;
background: rgba(255,253,244,0.94);
border: 2px solid #8b5e34;
box-shadow: 0 2px 0 rgba(107,68,35,0.2);
font-size: 0.66rem;
font-weight: 800;
color: #4a3524;
white-space: nowrap;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
/* Pasangan cuma numpang tampil: gak bisa digeser, gak ikut mode dekor. */
.room-pet-pasangan { cursor: default; z-index: 4; }
.room-pet-pasangan canvas { image-rendering: pixelated; display: block; }
/* Furniture items inside room */
.room-furniture-item {
position: absolute;
image-rendering: pixelated;
pointer-events: auto;
z-index: 3;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* ── TOP LEFT: Pet name + level ── */
.room-hud-tl {
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
display: flex;
flex-direction: column;
gap: 5px;
}
.room-pill {
background: rgba(0,0,0,0.45);
backdrop-filter: blur(8px);
border-radius: 50px;
padding: 5px 12px;
color: white;
font-family: 'Fredoka One', cursive;
font-size: 0.95rem;
border: 1px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
gap: 6px;
}
.room-stat-mini {
display: flex;
align-items: center;
gap: 5px;
background: rgba(0,0,0,0.38);
backdrop-filter: blur(6px);
border-radius: 50px;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,0.08);
}
.room-stat-mini-bar {
width: 48px;
height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
overflow: hidden;
}
.room-stat-mini-fill {
height: 100%;
border-radius: 2px;
transition: width 0.5s;
}
/* ── TOP RIGHT: Coin + switch pet ── */
.room-hud-tr {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.room-icon-btn {
width: 42px;
height: 42px;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(8px);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.15s;
}
.room-icon-btn:active { transform: scale(0.88); background: rgba(255,255,255,0.2); }
/* ── ACTION BUTTONS: vertical col ── */
.room-act-col {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
margin-top: 2px;
}
.room-act-col.panel-open { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.room-actions-bar.panel-open { opacity:0 !important; pointer-events:none !important; }
.room-actions-bar {
display: none;
}
.room-actions-row {
pointer-events: auto;
}
.room-actions-row {
display: flex;
justify-content: center;
gap: 8px;
}
.room-act-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
padding: 6px 4px 5px;
cursor: pointer;
transition: all 0.12s;
width: 42px;
min-height: 42px;
position: relative;
color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.room-act-btn:active { transform: scale(0.93); background: rgba(255,255,255,0.2); }
.room-act-icon { font-size: 1.2rem; line-height: 1; }
.room-act-label { font-size: 0.5rem; font-weight: 800; opacity: 0.85; text-align: center; line-height: 1.2; }
.room-act-badge {
position: absolute;
top: -4px;
right: -4px;
background: #ff5252;
color: white;
border-radius: 50px;
font-size: 0.5rem;
font-weight: 900;
padding: 2px 4px;
min-width: 14px;
text-align: center;
line-height: 1.4;
}
/* ── SLIDE UP PANELS ── */
.room-slide-panel {
position: fixed;
bottom: 0; left: 0; right: 0;
background: rgba(12,12,25,0.96);
backdrop-filter: blur(20px);
border-radius: 24px 24px 0 0;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 18px 14px 28px;
z-index: 20;
transform: translateY(110%);
visibility: hidden;
transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
max-height: 70vh;
overflow-y: auto;
}
.room-slide-panel.open {
transform: translateY(0);
visibility: visible;
}
.room-panel-pip {
width: 36px; height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 0 auto 16px;
cursor: pointer;
}
.room-panel-title {
font-family: 'Fredoka One', cursive;
font-size: 1.1rem;
color: white;
margin-bottom: 14px;
}
/* Feed grid */
.room-feed-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.room-feed-item {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 10px 4px;
text-align: center;
cursor: pointer;
transition: all 0.12s;
}
.room-feed-item:active {
border-color: #ffd700;
background: rgba(255,215,0,0.15);
transform: scale(0.94);
}
.room-feed-emoji { font-size: 1.5rem; }
.room-feed-name { font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.7); margin-top: 2px; }
.room-feed-price { font-size: 0.55rem; color: #ffd700; font-weight: 800; }
/* Pet switcher panel */
.room-pet-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.room-pet-item {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 10px 14px;
cursor: pointer;
transition: all 0.12s;
}
.room-pet-item.active {
background: rgba(106,168,79,0.2);
border-color: rgba(106,168,79,0.5);
}
.room-pet-item:active { transform: scale(0.97); }
.room-pet-avatar { font-size: 2rem; }
.room-pet-info { flex: 1; }
.room-pet-name { font-weight: 800; color: white; font-size: 0.9rem; }
.room-pet-sub { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 1px; }
/* Decor/shop panel */
.room-decor-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.room-decor-tab {
padding: 6px 14px;
border-radius: 50px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6);
font-size: 0.72rem;
font-weight: 800;
cursor: pointer;
transition: all 0.12s;
}
.room-decor-tab.active {
background: rgba(106,168,79,0.4);
border-color: rgba(106,168,79,0.6);
color: white;
}
.room-decor-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.room-decor-item {
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 8px 4px;
text-align: center;
cursor: pointer;
transition: all 0.12s;
}
.room-decor-item.owned { border-color: rgba(106,168,79,0.5); background: rgba(106,168,79,0.1); }
.room-decor-item:active { transform: scale(0.93); }
.room-decor-img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; display: block; margin: 0 auto 3px; }
.room-decor-name { font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.8); }
.room-decor-price { font-size: 0.55rem; color: #ffd700; font-weight: 800; margin-top: 1px; }
.room-decor-buy-btn {
width: 100%;
padding: 3px;
border: none;
border-radius: 6px;
font-size: 0.55rem;
font-weight: 800;
cursor: pointer;
margin-top: 3px;
color: white;
}
/* Skin switcher in decor panel */
.room-skin-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.room-skin-item {
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 10px 8px;
cursor: pointer;
text-align: center;
transition: all 0.12s;
}
.room-skin-item.active { border-color: rgba(106,168,79,0.6); background: rgba(106,168,79,0.15); }
.room-skin-item:active { transform: scale(0.95); }
.room-skin-label { font-size: 0.7rem; font-weight: 800; color: white; margin-top: 4px; }
/* ==================== CARPETS COZY DESIGN SYSTEM ==================== */
.header-title{color:#4a3524;text-shadow:0 1px 0 #fffdf4}
.header-title span{color:#6aa84f}
.koin-badge{border:2.5px solid #a8761b;box-shadow:0 3px 0 rgba(140,90,20,.35)}
#side-menu-btn{border:3px solid #f7e3a0}
.side-menu-item{border-radius:12px;font-weight:800}
.side-menu-item.active{background:rgba(106,168,79,.16)}
.modal-overlay{background:rgba(60,40,15,.45)!important}
.modal-handle{background:#d9c294!important}
button{font-family:inherit}
button:active{filter:brightness(.94)}
input,select,textarea{font-family:inherit;color:var(--text)}
input:not([type=range]),select,textarea{background:#fffdf6;border:2.5px solid #d9c294;border-radius:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#6aa84f}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d9c294;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.blob{opacity:.24}
.loading-emoji{filter:drop-shadow(0 4px 4px rgba(107,68,35,.2))}
.loading-text{color:#8a7258}
.screen.active{animation:fadeUp .3s ease}
/* ---- splash ---- */
#cozy-splash{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;
background:
radial-gradient(circle at 16% 12%, rgba(168,214,140,.4), transparent 34%),
radial-gradient(circle at 84% 22%, rgba(242,164,184,.3), transparent 32%),
linear-gradient(165deg,#fdf3dd 0%,#f7ead0 50%,#e9f2d8 100%);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
animation:cozySplashOut .6s ease 1.9s forwards}
#cozy-splash .sp-logo{display:flex;flex-direction:column;align-items:center;gap:6px;animation:cozyBreathe 2.4s ease-in-out infinite}
#cozy-splash .sp-badge{width:92px;height:92px;border-radius:32px;background:linear-gradient(165deg,#8fce7a,#5f9c48);
border:4px solid #4a7a36;box-shadow:0 7px 0 #3f6b2e, 0 18px 26px rgba(60,90,30,.3);
display:flex;align-items:center;justify-content:center;padding:16px}
#cozy-splash .sp-badge svg{width:100%;height:100%}
#cozy-splash h1{font-family:'Fredoka One',cursive;font-size:2.3rem;color:#4a3524;letter-spacing:.5px;text-shadow:0 2px 0 #fffdf4;margin-top:4px}
#cozy-splash h1 span{color:#6aa84f}
#cozy-splash p{font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;color:#8a7258;letter-spacing:.4px}
/* ---- Bilah muat gaya game kasual ----------------------------------------
DNA-nya diambil dari referensi yang dikirim user (bilah pil gemuk berbingkai
kayu, isian emas bergaris diagonal, tulisan LOADING bergaris tepi tebal).
WARNANYA punya Carpets sendiri — coklat kayu + emas yang sudah dipakai di
koin dan tombol, bukan hijau hutan milik referensinya.
Isian memakai `width`, bukan `scaleX`: garis-garis diagonalnya ikut melar
kalau elemennya diskala, dan bilahnya cuma satu elemen kecil selama dua
detik — biaya tata letaknya nol yang terasa. */
#cozy-splash .bar{position:relative;width:236px;height:30px;border-radius:99px;
background:linear-gradient(180deg,#b9793a,#8b5e34);
border:3px solid #6b4423;box-shadow:0 4px 0 #5c3a1e,0 7px 14px rgba(92,58,30,.32);
padding:4px;overflow:hidden}
#cozy-splash .bar::before{content:'';position:absolute;inset:4px;border-radius:99px;
background:#5c3a1e;box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
#cozy-splash .bar i{position:relative;display:block;height:100%;width:8%;min-width:22px;
border-radius:99px;overflow:hidden;
background:
repeating-linear-gradient(115deg,
rgba(255,255,255,.30) 0 10px, rgba(255,255,255,0) 10px 20px),
linear-gradient(180deg,#FFE49A 0%,#FFD75E 42%,#F0B429 100%);
background-size:28px 100%,100% 100%;
box-shadow:inset 0 -3px 0 rgba(176,116,20,.55), 0 0 10px rgba(255,215,94,.55);
animation:cozyGaris .62s linear infinite, cozyLoad 1.9s cubic-bezier(.32,.72,.36,1) forwards}
/* kilau tipis di punggung bilah, seperti plastik permen */
#cozy-splash .bar i::after{content:'';position:absolute;left:6px;right:6px;top:2px;height:34%;
border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0))}
@keyframes cozyGaris{to{background-position:28px 0,0 0}}
/* Emas di atas krem hampir tidak ada kontrasnya — referensinya berlatar
hijau GELAP, sedangkan splash Carpets krem terang, jadi arah kontrasnya
harus dibalik: tulisan coklat tua dengan garis tepi krem, sama seperti
judul "Carpets" di atasnya yang memang sudah terbaca jelas. */
#cozy-splash .sp-load{display:flex;align-items:baseline;gap:8px;
font-family:'Fredoka One',cursive;font-size:1.05rem;letter-spacing:1.6px;color:#6b4423;
text-shadow:0 2px 0 #fffdf4,0 -1px 0 #fffdf4,1px 0 0 #fffdf4,-1px 0 0 #fffdf4,0 4px 7px rgba(92,58,30,.18)}
#cozy-splash .sp-load b{font-size:.92rem;color:#8b5e34;letter-spacing:.5px;min-width:44px;text-align:right}
#cozy-splash .sp-load i{font-style:normal;letter-spacing:0;margin-left:-2px;animation:cozyTitik 1.05s steps(1) infinite}
#cozy-splash .sp-load i:nth-child(2){animation-delay:.18s}
#cozy-splash .sp-load i:nth-child(3){animation-delay:.36s}
@keyframes cozyTitik{0%,40%{opacity:.25}50%,100%{opacity:1}}
/* Yang minta gerak dikurangi: garis dan titik berhenti, bilahnya langsung penuh. */
@media (prefers-reduced-motion:reduce){
#cozy-splash .bar i{animation:none;width:100%}
#cozy-splash .sp-load i{animation:none;opacity:1}
#cozy-splash .sp-logo{animation:none}
}
#cozy-splash .sp-paws{display:flex;gap:14px}
#cozy-splash .sp-paws i{font-style:normal;font-size:17px;opacity:0;animation:cozyPawStep 1.9s ease infinite}
#cozy-splash .sp-paws i:nth-child(1){animation-delay:.1s}
#cozy-splash .sp-paws i:nth-child(2){animation-delay:.4s}
#cozy-splash .sp-paws i:nth-child(3){animation-delay:.7s}
#cozy-splash .sp-petals{position:absolute;inset:0}
#cozy-splash .sp-petals i{position:absolute;top:-24px;width:14px;height:9px;border-radius:60% 60% 60% 60%/70% 70% 50% 50%;
background:#f7bccb;box-shadow:inset 0 -2px 0 rgba(192,90,114,.35);animation:cozyPetal 4.4s linear infinite}
#cozy-splash .sp-petals i:nth-child(1){left:12%;animation-delay:0s;background:#f7bccb}
#cozy-splash .sp-petals i:nth-child(2){left:28%;animation-delay:1.1s;background:#ffd9a8}
#cozy-splash .sp-petals i:nth-child(3){left:46%;animation-delay:2s;background:#f7bccb}
#cozy-splash .sp-petals i:nth-child(4){left:62%;animation-delay:.6s;background:#cfe8b8}
#cozy-splash .sp-petals i:nth-child(5){left:78%;animation-delay:1.6s;background:#ffd9a8}
#cozy-splash .sp-petals i:nth-child(6){left:90%;animation-delay:2.6s;background:#f7bccb}
#cozy-splash .sp-bfly{position:absolute;width:34px;height:34px;filter:drop-shadow(0 3px 2px rgba(90,60,25,.2))}
#cozy-splash .sp-bfly svg{width:100%;height:100%}
#cozy-splash .sp-bfly.b1{left:14%;top:24%;animation:cozyFlutter 3.4s ease-in-out infinite}
#cozy-splash .sp-bfly.b2{right:14%;top:62%;width:27px;height:27px;animation:cozyFlutter 2.8s ease-in-out infinite reverse}
@keyframes cozyBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes cozyPawStep{0%{opacity:0;transform:translateY(4px) scale(.7)}25%{opacity:.9;transform:translateY(0) scale(1)}60%{opacity:.9}100%{opacity:0;transform:translateY(-3px)}}
@keyframes cozyPetal{0%{transform:translateY(-10px) rotate(0) translateX(0)}100%{transform:translateY(105vh) rotate(300deg) translateX(-40px)}}
@keyframes cozyFlutter{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(10px,-16px) rotate(8deg)}}
@keyframes cozyLoad{to{width:100%}}
@keyframes cozySplashOut{to{opacity:0;visibility:hidden}}
/* ==================== BLOOM GARDEN CSS ==================== */
#gdn-root{
--ink:#4a3524;
--ink-soft:#7a6248;
--paper:#fff7e6;
--paper-deep:#f7e9c9;
--wood:#8b5e34;
--wood-dark:#6b4423;
--leaf:#6aa84f;
--leaf-dark:#4e8438;
--butter:#f7c948;
--blush:#f2909e;
--sky-chip:#bfe0ef;
--shadow:0 6px 0 rgba(107,68,35,.28), 0 14px 24px rgba(60,40,15,.22);
--r-lg:22px;
--r-md:16px;
--font:'Baloo 2','Comfortaa','Varela Round','Quicksand','Chalkboard SE','Comic Sans MS','Trebuchet MS',system-ui,sans-serif;
}#gdn-root, #gdn-root *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}#gdn-root{height:100%;overflow:hidden;overscroll-behavior:none}#gdn-root{
font-family:var(--font);
color:var(--ink);
background:#8fc177;
user-select:none;-webkit-user-select:none;
touch-action:none;
position:fixed;inset:0;
}#gdn-root canvas#gdn-garden{position:fixed;inset:0;display:block;touch-action:none}#gdn-root .chip{
display:inline-flex;align-items:center;gap:6px;
background:var(--paper);
border:3px solid var(--wood);
border-radius:999px;
padding:5px 12px 6px;
font-weight:700;font-size:14px;line-height:1;
box-shadow:0 3px 0 rgba(107,68,35,.35);
color:var(--ink);
}#gdn-root .icon-btn{
width:46px;height:46px;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(#fffbef,#f7e9c9);
border:3px solid var(--wood);
border-radius:16px;
box-shadow:0 4px 0 rgba(107,68,35,.4);
cursor:pointer;transition:transform .12s, box-shadow .12s;
position:relative;
}#gdn-root .icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(107,68,35,.4)}#gdn-root .icon-btn svg{width:26px;height:26px;display:block}#gdn-root .icon-btn .dot{
position:absolute;top:-5px;right:-5px;width:14px;height:14px;
background:var(--blush);border:2px solid #fff7e6;border-radius:50%;
display:none;
}#gdn-root .icon-btn.notify .dot{display:block;animation:gdn-pip .9s ease infinite alternate}
@keyframes gdn-pip{from{transform:scale(1)}to{transform:scale(1.25)}}#gdn-root #gdn-hud{position:fixed;inset:0;pointer-events:none;z-index:5}#gdn-root #gdn-hud > *{pointer-events:auto}#gdn-root #gdn-topLeft{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}#gdn-root #gdn-topRight{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}#gdn-root #gdn-weatherChip .wicon{width:20px;height:20px}#gdn-root #gdn-dayChip small{font-weight:700;color:var(--ink-soft);font-size:11px;margin-left:2px}#gdn-root #gdn-dailyChip{background:linear-gradient(#fff3c9,#ffe08f);border-color:#b8862c;color:#6b4a12}#gdn-root #gdn-dailyChip .mini{width:18px;height:18px;border-radius:50%;overflow:hidden;background:#fff}#gdn-root #gdn-dailyChip canvas{width:18px;height:18px;display:block}#gdn-root #gdn-toolbarWrap{
position:fixed;left:0;right:0;bottom:0;z-index:6;
padding:8px 8px calc(10px + env(safe-area-inset-bottom));
background:linear-gradient(rgba(87,56,25,0), rgba(60,38,15,.16));
pointer-events:none;
}#gdn-root #gdn-toolbar{
pointer-events:auto;
display:flex;gap:8px;align-items:flex-end;
overflow-x:auto;overflow-y:visible;
padding:14px 6px 6px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}#gdn-root #gdn-toolbar::-webkit-scrollbar{display:none}#gdn-root .tool{
flex:0 0 auto;width:60px;
display:flex;flex-direction:column;align-items:center;gap:3px;
background:none;border:none;cursor:pointer;font-family:var(--font);
}#gdn-root .tool .pad{
width:56px;height:56px;border-radius:19px;
background:linear-gradient(#fffdf4,#f3e3bd);
border:3px solid var(--wood);
box-shadow:0 4px 0 rgba(107,68,35,.42);
display:flex;align-items:center;justify-content:center;
transition:transform .13s, box-shadow .13s, background .13s, border-color .13s;
}#gdn-root .tool .pad svg{width:34px;height:34px}#gdn-root .tool span{
font-size:10.5px;font-weight:700;color:#fff;
text-shadow:0 2px 0 rgba(74,53,36,.55);
letter-spacing:.2px;white-space:nowrap;
}#gdn-root .tool:active .pad{transform:translateY(3px);box-shadow:0 1px 0 rgba(107,68,35,.42)}#gdn-root .tool.sel .pad{
background:linear-gradient(#eaffd8,#bfe89b);
border-color:var(--leaf-dark);
transform:translateY(-6px) scale(1.06);
box-shadow:0 7px 0 rgba(62,102,40,.45), 0 12px 18px rgba(40,70,20,.3);
}#gdn-root .tool.sel span{color:#f4ffe8}#gdn-root #gdn-toastLane{position:fixed;top:calc(64px + env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:40;pointer-events:none}#gdn-root .g-toast{
background:var(--paper);border:3px solid var(--wood);border-radius:16px;
padding:8px 16px;font-weight:700;font-size:14px;max-width:86vw;text-align:center;
box-shadow:var(--shadow);
animation:gdn-toastIn .3s cubic-bezier(.2,1.4,.4,1), gdn-toastOut .35s ease-in forwards;
animation-delay:0s, var(--ttl,2.4s);
}#gdn-root .g-toast.gold{background:linear-gradient(#fff4cd,#ffe08f);border-color:#b8862c}
@keyframes gdn-toastIn{from{transform:translateY(-18px) scale(.85);opacity:0}}
@keyframes gdn-toastOut{to{transform:translateY(-10px) scale(.9);opacity:0}}#gdn-root .g-overlay{
position:fixed;inset:0;z-index:30;
background:rgba(52,36,16,.45);
display:flex;align-items:center;justify-content:center;
padding:16px;
opacity:0;pointer-events:none;transition:opacity .22s;
}#gdn-root .g-overlay.open{opacity:1;pointer-events:auto}#gdn-root .g-panel{
width:min(430px,100%);max-height:min(78vh,660px);
background:var(--paper);
border:4px solid var(--wood);border-radius:26px;
box-shadow:var(--shadow);
display:flex;flex-direction:column;overflow:hidden;
transform:translateY(24px) scale(.94);transition:transform .25s cubic-bezier(.2,1.3,.4,1);
background-image:repeating-linear-gradient(0deg, rgba(139,94,52,.04) 0 2px, transparent 2px 26px);
}#gdn-root .g-overlay.open .g-panel{transform:none}#gdn-root .g-panel-head{
position:relative;
background:linear-gradient(#a9784f,#8b5e34);
padding:12px 48px 12px 18px;
color:#fff6e3;text-shadow:0 2px 0 rgba(0,0,0,.25);
border-bottom:4px solid var(--wood-dark);
}#gdn-root .g-panel-head h2{font-size:19px;letter-spacing:.4px;display:flex;align-items:center;gap:8px}#gdn-root .g-panel-head h2 svg{width:22px;height:22px;flex:0 0 auto}#gdn-root .g-panel-head::before, #gdn-root .g-panel-head::after{
content:"";position:absolute;top:9px;width:9px;height:9px;border-radius:50%;
background:#5c3c1e;box-shadow:inset 0 -2px 0 rgba(255,255,255,.25);
}#gdn-root .g-panel-head::before{left:12px}#gdn-root .g-panel-head::after{right:12px}#gdn-root .g-panel-x{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
width:32px;height:32px;border-radius:12px;border:3px solid var(--wood-dark);
background:linear-gradient(#ffb3a1,#f08a72);color:#5c2313;
font-size:16px;font-weight:800;cursor:pointer;line-height:1;font-family:var(--font);
box-shadow:0 3px 0 rgba(0,0,0,.25);
}#gdn-root .g-panel-x:active{transform:translateY(calc(-50% + 2px))}#gdn-root .g-panel-#gdn-root{padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}#gdn-root .g-panel-#gdn-root::-webkit-scrollbar{width:6px}#gdn-root .g-panel-#gdn-root::-webkit-scrollbar-thumb{background:#c9a878;border-radius:3px}#gdn-root #gdn-flowerSheet{align-items:flex-end;padding-bottom:calc(104px + env(safe-area-inset-bottom))}#gdn-root #gdn-flowerSheet .g-panel{width:min(400px,100%)}#gdn-root .f-hero{display:flex;gap:14px;align-items:center;margin-bottom:10px}#gdn-root .f-portrait{
width:88px;height:88px;flex:0 0 auto;border-radius:20px;
border:3px solid var(--wood);
background:linear-gradient(#dff3ff 55%, #b5dd8f 55%);
box-shadow:inset 0 0 0 3px rgba(255,255,255,.4);
overflow:hidden;
}#gdn-root .f-portrait canvas{width:100%;height:100%;display:block}#gdn-root .f-title{flex:1;min-width:0}#gdn-root .f-title .nameRow{display:flex;align-items:center;gap:6px}#gdn-root .f-title input{
font-family:var(--font);font-weight:800;font-size:19px;color:var(--ink);
background:transparent;border:none;border-bottom:2px dashed #c9a878;
width:100%;min-width:0;outline:none;padding:0 0 2px;
}#gdn-root .f-title .species{font-size:12.5px;color:var(--ink-soft);font-weight:700}#gdn-root .f-title .latin{font-size:11px;color:#a0876a;font-style:italic}#gdn-root .favBtn{
width:38px;height:38px;flex:0 0 auto;border-radius:14px;cursor:pointer;
border:3px solid var(--wood);background:linear-gradient(#fffdf4,#f3e3bd);
display:flex;align-items:center;justify-content:center;
transition:transform .15s;
}#gdn-root .favBtn svg{width:22px;height:22px}#gdn-root .favBtn.on{background:linear-gradient(#ffe1e7,#ffb9c6);border-color:#c05672;transform:scale(1.08)}#gdn-root .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:8px}#gdn-root .g-stat{font-size:12px;font-weight:700;color:var(--ink-soft)}#gdn-root .g-stat b{display:flex;justify-content:space-between;color:var(--ink);font-size:12.5px;margin-bottom:3px}#gdn-root .bar{height:12px;border-radius:8px;background:#e7d5ac;border:2px solid #b8935e;overflow:hidden}#gdn-root .bar i{display:block;height:100%;border-radius:6px;transition:width .4s ease;background:linear-gradient(#9ed06f,#6aa84f)}#gdn-root .bar.water i{background:linear-gradient(#8fd0f0,#4f9fd6)}#gdn-root .bar.sun i{background:linear-gradient(#ffe38f,#f4b93c)}#gdn-root .bar.happy i{background:linear-gradient(#ffb3c4,#f2778f)}#gdn-root .bar.bloom i{background:linear-gradient(#e8b7f2,#c77fd9)}#gdn-root .f-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}#gdn-root .f-meta .tag{background:var(--paper-deep);border:2px solid #c9a878;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;color:var(--ink-soft)}#gdn-root .f-actions{display:flex;gap:8px;margin-top:14px}#gdn-root .g-btn{
flex:1;font-family:var(--font);font-weight:800;font-size:14px;
border-radius:16px;border:3px solid var(--wood);padding:10px 6px;
cursor:pointer;box-shadow:0 4px 0 rgba(107,68,35,.4);color:var(--ink);
background:linear-gradient(#fffdf4,#f3e3bd);
transition:transform .12s, box-shadow .12s;
}#gdn-root .g-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(107,68,35,.4)}#gdn-root .g-btn.green{background:linear-gradient(#c8ecab,#93cc6d);border-color:var(--leaf-dark);color:#274b16}#gdn-root .g-btn.blue{background:linear-gradient(#c9e9fa,#8ecbe8);border-color:#3f7ea3;color:#143d55}#gdn-root .g-btn.red{background:linear-gradient(#ffc7b8,#f0917a);border-color:#a34a33;color:#5c1f10}#gdn-root .seed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#gdn-root .seed-card{
border:3px solid var(--wood);border-radius:18px;cursor:pointer;
background:linear-gradient(#fffdf4,#f5e7c2);
padding:8px 4px 7px;text-align:center;
box-shadow:0 3px 0 rgba(107,68,35,.35);
transition:transform .12s;font-family:var(--font);
}#gdn-root .seed-card:active{transform:translateY(2px)}#gdn-root .seed-card canvas{width:52px;height:52px;display:block;margin:0 auto}#gdn-root .seed-card b{display:block;font-size:11.5px;color:var(--ink);line-height:1.15;margin-top:2px}#gdn-root .seed-card small{font-size:9.5px;color:var(--ink-soft);font-weight:700}#gdn-root .ency-card{
display:flex;gap:12px;align-items:center;
border:3px solid var(--wood);border-radius:18px;
background:linear-gradient(#fffdf4,#f7ecca);
padding:8px 10px;margin-bottom:10px;box-shadow:0 3px 0 rgba(107,68,35,.28);
}#gdn-root .ency-card.locked{filter:saturate(.15) opacity(.72)}#gdn-root .ency-card canvas{width:56px;height:56px;flex:0 0 auto}#gdn-root .ency-card .txt{flex:1;min-width:0}#gdn-root .ency-card .txt b{font-size:14px}#gdn-root .ency-card .txt i{display:block;font-size:10.5px;color:#a0876a}#gdn-root .ency-card .txt p{font-size:11.5px;color:var(--ink-soft);font-weight:600;line-height:1.3;margin-top:2px}#gdn-root .ency-card .count{font-size:11px;font-weight:800;color:#8a6a3e;background:#f3e3bd;border:2px solid #c9a878;border-radius:10px;padding:3px 7px;flex:0 0 auto}#gdn-root .j-entry{display:flex;gap:10px;padding:7px 4px;border-bottom:2px dashed #dcc596;font-weight:600;font-size:13px;color:var(--ink)}#gdn-root .j-entry .d{flex:0 0 auto;background:var(--butter);border:2px solid #b8862c;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:800;color:#6b4a12;height:fit-content}#gdn-root .ach{
display:flex;gap:12px;align-items:center;padding:9px 10px;margin-bottom:9px;
border:3px solid #c9a878;border-radius:16px;background:#fbf1d9;
}#gdn-root .ach.done{border-color:#b8862c;background:linear-gradient(#fff4cd,#ffe6a3)}#gdn-root .ach .medal{width:40px;height:40px;flex:0 0 auto}#gdn-root .ach b{font-size:13.5px;display:block}#gdn-root .ach p{font-size:11.5px;color:var(--ink-soft);font-weight:600}#gdn-root .stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;border-bottom:2px dashed #dcc596;font-weight:700;font-size:14px}#gdn-root .stat-row span{color:var(--ink-soft);font-size:13px}#gdn-root .stars{font-size:20px;letter-spacing:2px;color:#e0a52c;text-shadow:0 1px 0 #8a6220}#gdn-root .set-row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:2px dashed #dcc596;font-weight:700}#gdn-root .switch{width:54px;height:30px;border-radius:999px;border:3px solid var(--wood);background:#d8c294;position:relative;cursor:pointer;transition:background .2s}#gdn-root .switch::after{content:"";position:absolute;top:1px;left:2px;width:22px;height:22px;border-radius:50%;background:#fffdf4;border:2px solid var(--wood);transition:left .2s}#gdn-root .switch.on{background:var(--leaf)}#gdn-root .switch.on::after{left:24px}#gdn-root .credit{margin-top:14px;text-align:center;font-size:11.5px;font-weight:700;color:#a0876a}#gdn-root.photo #gdn-hud>*:not(#gdn-photoUI){opacity:0;pointer-events:none}#gdn-root #gdn-photoUI{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:0;right:0;display:none;justify-content:center;gap:14px}#gdn-root.photo #gdn-photoUI{display:flex}#gdn-root #gdn-shutter{
width:70px;height:70px;border-radius:50%;cursor:pointer;
border:5px solid #fff7e6;background:radial-gradient(circle at 35% 30%, #ffd0d8, var(--blush));
box-shadow:0 6px 0 rgba(90,40,40,.4), 0 0 0 4px rgba(74,53,36,.5);
}#gdn-root #gdn-shutter:active{transform:translateY(3px)}#gdn-root #gdn-photoExit{align-self:center}#gdn-root #gdn-holdTip{
position:fixed;z-index:20;pointer-events:none;
background:var(--paper);border:3px solid var(--wood);border-radius:14px;
padding:6px 10px;font-size:12px;font-weight:800;
box-shadow:0 4px 0 rgba(107,68,35,.35);
transform:translate(-50%,-115%);
display:none;white-space:nowrap;
}#gdn-root #gdn-holdTip small{display:block;font-weight:700;color:var(--ink-soft);font-size:10.5px}
@media (max-width:360px){#gdn-root .tool{width:54px}#gdn-root .tool .pad{width:50px;height:50px}#gdn-root .icon-btn{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){#gdn-root .g-toast, #gdn-root .g-panel, #gdn-root .g-overlay{transition:none;animation-duration:.01s}
}
/* ---- host-integration & fitur baru ---- */
#gdn-root{position:fixed;inset:0;z-index:900;display:none;font-family:var(--font);color:var(--ink);background:#8fc177;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}
#gdn-root .chip.gold{background:linear-gradient(#fff3cf,#ffe093);border-color:#a8761b;color:#7a5210}
#gdn-root .chip.gold small{color:#a8761b}
#gdn-root #gdn-btnBack{width:42px;height:42px;border-radius:14px}
#gdn-root .g-intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);width:min(340px,88vw);background:var(--paper);border:4px solid var(--wood);border-radius:26px;box-shadow:var(--shadow);padding:26px 22px 22px;text-align:center;z-index:40}
#gdn-root .g-intro h1{font-size:24px;margin:8px 0 6px;color:var(--wood-dark)}
#gdn-root .g-intro p{font-size:13.5px;font-weight:600;color:var(--ink-soft);line-height:1.45;margin-bottom:16px}
#gdn-root .g-intro small{display:block;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--ink-soft);line-height:1.4}
#gdn-root .g-intro .g-btn.big{width:100%;padding:13px;font-size:16px}
#gdn-root .g-intro-back{position:absolute;top:10px;left:10px;width:38px;height:38px;border-radius:12px}
#gdn-root .g-intro-flower{width:96px;height:96px;margin:0 auto;background:#eef7e2;border:3px solid var(--leaf-dark);border-radius:50%;display:flex;align-items:center;justify-content:center}
#gdn-root #gdn-introCard{position:absolute;inset:0;z-index:35}
#gdn-root .vdots{display:flex;gap:6px;justify-content:center;margin-top:6px}
#gdn-root .vdots i{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(107,68,35,.35);cursor:pointer;transition:transform .12s}
#gdn-root .vdots i.on{border-color:var(--wood-dark);transform:scale(1.18);box-shadow:0 0 0 2px #fff inset}
#gdn-root .seed-card.locked{filter:saturate(.25);opacity:.62}
#gdn-root .g-buy{border:3px solid #a8761b;background:linear-gradient(#fff3cf,#ffe093);color:#7a5210;font-family:inherit;font-weight:800;font-size:13px;border-radius:12px;padding:8px 12px;box-shadow:0 3px 0 rgba(140,90,20,.4);cursor:pointer}
#gdn-root .g-buy:disabled{filter:saturate(.3);opacity:.55}
#gdn-root .g-buy:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(140,90,20,.4)}
#gdn-root .owners{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--paper-deep);border:3px solid var(--wood);border-radius:18px;padding:14px 10px;margin-bottom:14px}
#gdn-root .owners .own{flex:1;text-align:center;background:#fffbef;border:2.5px solid #d9c294;border-radius:14px;padding:10px 6px}
#gdn-root .owners .own b{display:block;font-size:14.5px;color:var(--wood-dark)}
#gdn-root .owners .own small{font-size:11px;font-weight:700;color:var(--ink-soft)}
#gdn-root .owners .own.empty{border-style:dashed;opacity:.8}
#gdn-root .owners .heart{font-size:22px;flex:0 0 auto;animation:gdn-heartBeat 1.4s ease-in-out infinite}
@keyframes gdn-heartBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.22)}}
#gdn-root .invite-box{background:#fdeef2;border:3px dashed #d98aa0;border-radius:16px;padding:14px;margin-bottom:14px;text-align:center}
#gdn-root .invite-box b{font-size:14px;color:#b04a66}
#gdn-root .invite-box p{font-size:12px;font-weight:600;color:#a06a78;margin:6px 0 10px;line-height:1.4}
#gdn-root .invite-btns{display:flex;gap:8px}
#gdn-root .invite-btns .g-btn{flex:1;padding:10px 6px;font-size:13.5px}
#gdn-root .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#gdn-root .info-grid .ig{background:#fffbef;border:2.5px solid #e0cba0;border-radius:13px;padding:9px 10px}
#gdn-root .info-grid .ig small{display:block;font-size:10.5px;font-weight:800;color:var(--ink-soft);margin-bottom:2px}
#gdn-root .info-grid .ig b{font-size:14px;color:var(--wood-dark)}
/* ==================== TAMAN BUNGA v2 — teman bunga virtual ==================== */
#gdn-root .ic{display:inline-flex;width:17px;height:17px;vertical-align:-3px}
#gdn-root .ic svg{width:100%;height:100%}
#gdn-root .bic{width:17px;height:17px;vertical-align:-3px;margin-right:2px}
/* ---------- halaman koleksi (album) ---------- */
#gdn-collection{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
background:
radial-gradient(circle at 12% 8%, rgba(168,214,140,.35), transparent 34%),
radial-gradient(circle at 88% 20%, rgba(242,164,184,.28), transparent 30%),
radial-gradient(circle at 80% 85%, rgba(247,201,72,.18), transparent 36%),
linear-gradient(170deg,#fdf3dd 0%,#f7ead0 55%,#eaf2da 100%);
padding:18px 16px calc(34px + env(safe-area-inset-bottom))}
#gdn-collection .col-head{display:flex;align-items:center;gap:12px;margin:6px 2px 18px}
#gdn-collection .col-title{flex:1}
#gdn-collection .col-title h1{font-size:26px;color:#4a3524;line-height:1.05;text-shadow:0 1.5px 0 #fffdf4}
#gdn-collection .col-title p{font-size:12px;font-weight:800;color:#8a7258;margin-top:3px}
#gdn-collection .col-deco{width:52px;height:52px;background:#fffdf4;border:3px solid #d9c294;border-radius:50%;
padding:8px;box-shadow:0 4px 0 rgba(107,68,35,.15);animation:gdn-bobHead 3s ease-in-out infinite}
#gdn-collection .col-deco svg{width:100%;height:100%}
@keyframes gdn-bobHead{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
#gdn-cards{display:flex;flex-direction:column;gap:14px;max-width:480px;margin:0 auto}
/* kartu taman */
#gdn-root .gcard{display:flex;gap:14px;align-items:center;text-align:left;width:100%;cursor:pointer;
background:linear-gradient(170deg,#fffdf4,#faf0d8);
border:3.5px solid #8b5e34;border-radius:24px;padding:14px;
box-shadow:0 6px 0 rgba(107,68,35,.22), 0 16px 26px rgba(90,60,25,.16);
font-family:inherit;color:#4a3524;cursor:pointer;position:relative;
transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
#gdn-root .gcard:active{transform:scale(.97)}
#gdn-root .gcard::after{content:'';position:absolute;inset:5px;border:2px dashed rgba(139,94,52,.22);border-radius:17px;pointer-events:none}
#gdn-root .gcard canvas{width:96px;height:96px;flex:0 0 auto;border-radius:18px;border:3px solid #d9c294;background:#eef7e2}
#gdn-root .gc-info{flex:1;min-width:0}
#gdn-root .gc-info>b{display:block;font-size:17px;color:#5a3d1e;margin-bottom:2px}
#gdn-root .gc-day{font-size:11.5px;font-weight:800;color:#8a7258;display:flex;align-items:center;gap:5px}
#gdn-root .gc-bar{height:10px;background:#f0e2c0;border:2px solid #c9ab78;border-radius:99px;overflow:hidden;margin:6px 0}
#gdn-root .gc-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fce7a,#6aa84f);border-radius:99px;transition:width .4s}
#gdn-root .gc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px}
#gdn-root .gc-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:#7a6248;
background:#fffbe9;border:2px solid #e0cba0;border-radius:99px;padding:2.5px 9px}
#gdn-root .gc-own{font-size:11.5px;font-weight:800;color:#6b8f4e;display:flex;align-items:center;gap:5px}
/* kartu kosong & tambah */
#gdn-root .gcard.empty,#gdn-root .gcard.add{flex-direction:column;text-align:center;gap:6px;padding:26px 18px}
#gdn-root .gcard.add{background:rgba(255,253,244,.6);border-style:dashed;box-shadow:none}
#gdn-root .gcard .big-ic{width:64px;height:64px}
#gdn-root .gcard .big-ic svg{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(107,68,35,.14))}
#gdn-root .gcard.empty b,#gdn-root .gcard.add b{font-size:18px;color:#5a3d1e}
#gdn-root .gcard.empty small,#gdn-root .gcard.add small{font-size:12px;font-weight:700;color:#8a7258;line-height:1.45}
#gdn-root .gcard.empty .g-btn{margin-top:10px;padding:12px 22px;font-size:15px}
/* ---------- ruang taman ---------- */
#gdn-room{position:absolute;inset:0}
#gdn-room canvas#gdn-garden{position:absolute;inset:0;display:block}
#gdn-root .room-top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;
display:flex;justify-content:space-between;align-items:flex-start;z-index:20;pointer-events:none}
#gdn-root .room-top .icon-btn{pointer-events:auto}
#gdn-root .room-top-right{display:flex;gap:8px}
#gdn-hintWater{position:absolute;top:calc(66px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
z-index:21;background:#fffdf4;border:2.5px solid #3f7ea3;border-radius:99px;padding:7px 15px;
font-size:12.5px;font-weight:800;color:#1f5878;box-shadow:0 4px 0 rgba(31,88,120,.22);
display:flex;align-items:center;gap:6px;animation:gdn-hintBob 1.6s ease-in-out infinite}
@keyframes gdn-hintBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
#gdn-bubble{position:absolute;z-index:22;transform:translate(-50%,-100%) scale(.7);opacity:0;pointer-events:none;
max-width:230px;background:#fffdf4;border:3px solid #8b5e34;border-radius:18px;border-bottom-left-radius:4px;
padding:10px 14px;font-size:13.5px;font-weight:700;color:#4a3524;text-align:center;
box-shadow:0 5px 0 rgba(107,68,35,.2);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
#gdn-bubble.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
#gdn-bubble::after{content:'';position:absolute;left:26px;bottom:-11px;width:14px;height:14px;
background:#fffdf4;border-right:3px solid #8b5e34;border-bottom:3px solid #8b5e34;transform:rotate(45deg) skew(8deg,8deg)}
/* bottom sheet perawatan — collapsed kecil, expand penuh */
#gdn-root .care-sheet{position:absolute;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;
max-width:480px;margin:0 auto;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:3.5px solid #8b5e34;border-radius:24px;
box-shadow:0 6px 0 rgba(107,68,35,.28), 0 18px 30px rgba(60,40,15,.28);
overflow:hidden}
#gdn-root .cs-grab{display:block;width:100%;background:none;border:none;font-family:inherit;
padding:9px 16px 8px;cursor:pointer;text-align:left}
#gdn-root .cs-handle{display:block;width:44px;height:5px;border-radius:99px;background:#d9c294;margin:0 auto 7px}
#gdn-root .cs-mini{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#gdn-root .cs-mini b{font-size:17px;color:#5a3d1e}
#gdn-root .cs-day{font-size:13px;font-weight:800;color:#8a5f2a;white-space:nowrap}
#gdn-root .cs-hint{font-size:10.5px;font-weight:800;color:#b09468;text-align:center;margin-top:3px;
transition:opacity .25s}
#gdn-root .care-sheet.open .cs-hint{opacity:0;height:0;margin:0;overflow:hidden}
#gdn-root .cs-full{max-height:0;opacity:0;padding:0 14px;overflow:hidden;
transition:max-height .42s cubic-bezier(.3,.9,.35,1), opacity .3s, padding .3s}
#gdn-root .care-sheet.open .cs-full{max-height:340px;opacity:1;padding:2px 14px 14px}
#gdn-root .cd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
#gdn-root .cd-stage{font-size:11px;font-weight:800;color:#6b8f4e;background:#eef6dd;border:2px solid #b9dfa0;border-radius:99px;padding:2.5px 11px}
#gdn-root .cd-count{font-size:10.5px;font-weight:800;color:#8a7258;text-align:right}
#gdn-root .cd-bars{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
#gdn-root .cd-bar{display:flex;align-items:center;gap:8px}
#gdn-root .cd-bar .ic{width:19px;height:19px;flex:0 0 auto}
#gdn-root .cd-bar .bar{flex:1;height:11px;background:#f0e2c0;border:2px solid #c9ab78;border-radius:99px;overflow:hidden}
#gdn-root .cd-bar .bar i{display:block;height:100%;width:50%;border-radius:99px;background:linear-gradient(90deg,#f7a0b0,#ef7890);transition:width .5s}
#gdn-root .cd-bar .bar.happy i{background:linear-gradient(90deg,#ffd875,#f2b23a)}
#gdn-root .cd-bar .bar.clean i{background:linear-gradient(90deg,#a8d68c,#7ab85c)}
#gdn-root .cd-bar em{font-style:normal;font-size:11px;font-weight:800;color:#7a6248;width:34px;text-align:right}
#gdn-root .cd-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px}
#gdn-root .act{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit;cursor:pointer;
background:none;border:none;padding:0}
#gdn-root .act .pad{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;
border:3px solid;transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
#gdn-root .act .pad svg{width:29px;height:29px}
#gdn-root .act b{font-size:11px;font-weight:800;color:#6b4e2e}
#gdn-root .act:active .pad{transform:scale(.9);box-shadow:0 1px 0 rgba(0,0,0,.25)}
#gdn-root .act.blue .pad{background:linear-gradient(#e7f4fb,#c9e6f5);border-color:#3f7ea3;box-shadow:0 4px 0 #35708f}
#gdn-root .act.green .pad{background:linear-gradient(#eef6dd,#d5ecba);border-color:#4e8438;box-shadow:0 4px 0 #44742f}
#gdn-root .act.sand .pad{background:linear-gradient(#fdf3da,#f5e0ae);border-color:#a8761b;box-shadow:0 4px 0 #906415}
#gdn-root .act.pinkk .pad{background:linear-gradient(#fdeef2,#f8d3dc);border-color:#c05a72;box-shadow:0 4px 0 #a84c62}
#gdn-root .cs-owners{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;cursor:pointer;
background:#fffbe9;border:2.5px solid #e0cba0;border-radius:15px;padding:9px 12px;text-align:left}
#gdn-root .cs-owners .ic{width:19px;height:19px;flex:0 0 auto}
#gdn-root .cs-own-txt{flex:1;font-size:12px;font-weight:700;color:#7a6248}
#gdn-root .cs-own-txt b{color:#5a3d1e}
#gdn-root .cs-own-txt i{font-style:normal;color:#c05a72;font-weight:800}
#gdn-root .cs-own-go{font-size:18px;font-weight:800;color:#b09468}
#gdn-root .free-tag{font-size:10px;font-weight:900;background:#e8f5d9;color:#4e8438;border:2px solid #8fce7a;border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:2px}
/* ---- dialog konfirmasi & tombol bahaya ---- */
#gdn-root .g-overlay.center{align-items:center;justify-content:center;display:none}
#gdn-root .g-overlay.center.open{display:flex}
#gdn-root .g-panel.mini{width:min(310px,86vw);border-radius:24px;padding:22px 18px 18px;text-align:center;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:3.5px solid #8b5e34;
box-shadow:0 6px 0 rgba(107,68,35,.26), 0 20px 34px rgba(60,40,15,.3);
animation:gdn-dialogIn .32s cubic-bezier(.34,1.45,.64,1)}
@keyframes gdn-dialogIn{from{transform:scale(.82) translateY(14px);opacity:0}to{transform:none;opacity:1}}
#gdn-root .cf-ic{width:64px;height:64px;margin:0 auto 8px;background:#fdeef2;border:3px solid #e2a8b8;border-radius:50%;padding:12px}
#gdn-root .cf-ic svg{width:100%;height:100%}
#gdn-root .g-panel.mini h3{font-size:18px;color:#5a3d1e;margin-bottom:6px}
#gdn-root .g-panel.mini p{font-size:12.5px;font-weight:700;color:#8a7258;line-height:1.45;margin-bottom:15px}
#gdn-root .cf-btns{display:flex;gap:9px}
#gdn-root .cf-btns .g-btn{flex:1;padding:11px 6px;font-size:14px}
#gdn-root .g-btn.danger{background:linear-gradient(#f28ba0,#e06a84);border-color:#a84c62;color:#fffdf4;box-shadow:0 4px 0 #8f3e52}
#gdn-root .g-btn.danger:active{box-shadow:0 1px 0 #8f3e52}
/* ---- slider volume ---- */
#gdn-root .set-row.vol{padding-top:0;margin-top:-6px;border-bottom:none}
#gdn-root input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:99px;
background:#f0e2c0;border:2px solid #c9ab78;outline:none}
#gdn-root input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
background:linear-gradient(#8fce7a,#6aa84f);border:3px solid #4a7a36;box-shadow:0 2.5px 0 rgba(60,90,30,.4);cursor:pointer}
/* ---- fix scroll di dalam panel/sheet (root pakai touch-action:none) ---- */
#gdn-root .g-panel-body{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
#gdn-root .g-overlay{touch-action:pan-y}
#gdn-root .seed-grid{touch-action:pan-y}
#gdn-root .care-sheet .cs-full{touch-action:pan-y;overscroll-behavior:contain}
#gdn-root #gdn-collection{touch-action:pan-y}
/* ---- tombol hapus di kartu koleksi ---- */
#gdn-root .gcard{position:relative}
#gdn-root .gc-del{position:absolute;top:9px;right:9px;z-index:3;width:34px;height:34px;padding:6px;
background:#fffdf4;border:2.5px solid #e2a8b8;border-radius:12px;cursor:pointer;
box-shadow:0 2.5px 0 rgba(192,90,114,.28);transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
#gdn-root .gc-del svg{width:100%;height:100%;display:block}
#gdn-root .gc-del:active{transform:scale(.88)}
#gdn-root .gcard.empty .gc-del,#gdn-root .gcard.add .gc-del{display:none}
#gdn-root .gcard::after{right:5px;left:5px}
/* ---- Clean Mode (tombol kamera) — HUD harus benar2 hilang, bukan cuma di-inline ---- */
.room-fullscreen.clean-active .room-hud-tl,
.room-fullscreen.clean-active .room-hud-tr,
.room-fullscreen.clean-active .room-act-col,
.room-fullscreen.clean-active .room-speech,
.room-fullscreen.clean-active .room-petname,
.room-fullscreen.clean-active .room-notif-host,
.room-fullscreen.clean-active .away-card{
display:none!important}
/* Mode kamera: chrome di luar kamar ikut minggir. Aturan di atas cuma bisa
menjangkau anak .room-fullscreen, sementara header koin dan dok Menu berdiri
di luar — tanpa ini dua-duanya ikut kefoto. */
body.clean-mode-on #app-header,
body.clean-mode-on #side-menu-btn,
body.clean-mode-on #side-menu-panel{
display:none!important}
/* ==================== ROOM UX v6 — dock tidak nutup pet, notif compact ==================== */
/* dock: menempel di KIRI, tepat di bawah status bar — SATU KOLOM VERTIKAL, tiap tombol KOTAK */
.room-hud-tl{display:flex!important;flex-direction:column!important;align-items:flex-start!important;
gap:7px!important;max-width:78px!important;
max-height:calc(100dvh - 180px - env(safe-area-inset-top))!important}
.room-act-col{
display:flex!important;flex-direction:column!important;
position:static!important;inset:auto!important;left:auto!important;right:auto!important;
bottom:auto!important;top:auto!important;transform:none!important;
margin-top:2px!important;width:auto!important;max-width:none!important;
max-height:min(340px,44dvh)!important;overflow-y:auto!important;overflow-x:hidden!important;
padding:7px!important;gap:7px!important;align-items:stretch!important;
background:linear-gradient(170deg,#fffdf4,#f7ecd2)!important;
border:2.5px solid #8b5e34!important;border-radius:18px!important;
box-shadow:0 4px 0 rgba(107,68,35,.22), 0 10px 18px rgba(60,40,15,.2)!important}
.room-act-col::-webkit-scrollbar{display:none}
.room-act-btn{
display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
width:100%!important;height:auto!important;aspect-ratio:1/1!important;
min-width:0!important;min-height:0!important;max-width:none!important;
padding:5px 3px!important;margin:0!important;gap:3px!important;flex-shrink:0!important;
background:#fffbe9!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
border:2px solid #c9a878!important;border-radius:14px!important;
color:#5a3d1e!important;box-shadow:0 3px 0 rgba(140,90,20,.28)!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)!important}
.room-act-btn:active{transform:scale(.92)!important;background:#fdf3da!important}
.room-act-icon{width:24px;height:24px;flex:0 0 auto;display:flex!important;align-items:center;justify-content:center;
font-size:1.25rem!important;line-height:1!important}
.room-act-icon svg{width:24px;height:24px}
.room-act-label{font-size:.56rem!important;line-height:1.1!important;font-weight:800!important;
opacity:1!important;text-align:center;white-space:normal!important;word-break:break-word;max-width:100%}
.room-act-badge{top:-4px!important;right:-4px!important;min-width:15px;height:15px;font-size:.55rem!important;line-height:15px!important}
/* posisi pet tetap dikontrol oleh drag JS (wrap.style.left/bottom) — jangan override dengan !important */
/* notifikasi compact, bisa ditutup, di bawah HUD kiri, tidak melebar penuh */
.room-notif-host{position:fixed;top:calc(150px + env(safe-area-inset-top));left:12px;z-index:65;
max-width:min(78vw,300px);pointer-events:none}
.room-notif{pointer-events:auto;display:flex;align-items:center;gap:8px;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:2.5px solid #8b5e34;border-radius:16px;
padding:8px 8px 8px 10px;box-shadow:0 4px 0 rgba(107,68,35,.2), 0 10px 18px rgba(60,40,15,.2);
animation:rnIn .38s cubic-bezier(.34,1.4,.64,1) both}
.room-notif.rn-out{animation:rnOut .22s ease both}
@keyframes rnIn{from{opacity:0;transform:translateX(-16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes rnOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-10px) scale(.94)}}
.rn-ic{width:22px;height:22px;flex:0 0 auto}
.rn-ic svg{width:100%;height:100%}
.rn-tx{flex:1;font-size:.7rem;font-weight:800;color:#5a3d1e;line-height:1.3;min-width:0}
.rn-act{flex:0 0 auto;font-family:'Nunito',sans-serif;font-weight:800;font-size:.62rem;color:#fffdf4;
background:linear-gradient(170deg,#8fce7a,#5f9c48);border:2px solid #4a7a36;border-radius:10px;
padding:5px 9px;white-space:nowrap;cursor:pointer;box-shadow:0 2.5px 0 #3f6b2e}
.rn-x{flex:0 0 auto;width:20px;height:20px;padding:4px;background:none;border:none;cursor:pointer;
opacity:.55;transition:opacity .15s}
.rn-x:active{opacity:1}
.rn-x svg{width:100%;height:100%}
/* ==================== ROOM FULL-SCREEN v5 — 100dvh sejati, nol whitespace ==================== */
html:has(.screen.active .room-fullscreen.inside-home){height:100%;overflow:hidden}
body:has(.screen.active .room-fullscreen.inside-home){
height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
overflow:hidden!important;padding:0!important;margin:0!important}
/* header aplikasi disembunyikan di layar room — HUD room sudah menampilkan nama+koin */
body:has(.screen.active .room-fullscreen.inside-home) .header{display:none!important}
.screen.active:has(.room-fullscreen.inside-home){
height:100dvh!important;max-height:100dvh!important;padding:0!important;margin:0!important;
overflow:hidden!important;animation:none!important}
.room-fullscreen.inside-home{
position:fixed!important;inset:0!important;width:100%!important;
height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
border-radius:0!important;z-index:1}
/* HUD turun mengikuti safe-area (tidak ada header lagi) */
.room-fullscreen.inside-home .room-hud-tl{top:calc(12px + env(safe-area-inset-top))!important}
.room-fullscreen.inside-home .room-hud-tr{top:calc(12px + env(safe-area-inset-top))!important}
/* notifikasi melayang di bawah HUD kiri */
.warn-stack{top:calc(148px + env(safe-area-inset-top))!important}
/* dok aksi menempel tepi bawah, di atas pill Menu */
/* kartu away ikut naik di atas dok */
.away-card{bottom:calc(150px + env(safe-area-inset-bottom))!important}
/* panel geser & scene menutup sampai tepi bawah layar */
.room-fullscreen.inside-home .room-slide-panel{padding-bottom:calc(14px + env(safe-area-inset-bottom))!important}
/* ==================== AWAY SCENES (Ekspedisi & Boarding) ==================== */
.away-scene{position:absolute;inset:0;z-index:6;overflow:hidden;animation:awayIn .55s ease both}
.away-scene.away-hide{opacity:0;pointer-events:none;transition:opacity .45s}
.away-scene.away-out{opacity:0;transition:opacity .8s}
@keyframes awayIn{from{opacity:0}to{opacity:1}}
.aw-sky{position:absolute;inset:0}
.exp-local .aw-sky{background:linear-gradient(180deg,#aee0f2 0%,#dff2d8 62%,#dff2d8 100%)}
.exp-city .aw-sky{background:linear-gradient(180deg,#a8d4ee 0%,#f2e4c4 66%)}
.exp-country .aw-sky{background:linear-gradient(180deg,#9ecdea 0%,#d8ecf5 58%,#f2e8cc 100%)}
.aw-ground{position:absolute;left:0;right:0;bottom:0;height:34%}
.exp-local .aw-ground{background:linear-gradient(180deg,#a8d68c,#8fc474)}
.exp-city .aw-ground{background:linear-gradient(180deg,#d9c8a0,#c9b488)}
.exp-country .aw-ground{background:linear-gradient(180deg,#e2d4ac,#d0be92)}
.aw-path{position:absolute;left:-6%;right:-6%;bottom:11%;height:13%;border-radius:50%/60%;
background:linear-gradient(180deg,#e0c9a0,#cbb184);opacity:.9}
.exp-country .aw-path{background:linear-gradient(180deg,#cfd6dc,#b7c0c8)}
.aw-cloud{position:absolute;width:120px;height:44px;background:#fff;border-radius:99px;opacity:.9;
box-shadow:26px -12px 0 -6px #fff, -28px -8px 0 -8px #fff}
.aw-cloud.c1{top:9%;animation:awCloud 34s linear infinite}
.aw-cloud.c2{top:17%;transform:scale(.7);animation:awCloud 46s linear infinite;animation-delay:-18s}
.aw-cloud.c3{top:4%;transform:scale(1.2);animation:awCloud 58s linear infinite;animation-delay:-32s}
@keyframes awCloud{from{left:-24%}to{left:104%}}
.ap{position:absolute}
.exp-local .tree.t1{width:96px;left:4%;bottom:30%}
.exp-local .tree.t2{width:70px;right:6%;bottom:32%;filter:brightness(1.05)}
.exp-local .bench{width:108px;right:12%;bottom:14%}
.exp-local .bfly{width:26px;left:24%;top:34%;animation:awFlutter 3.6s ease-in-out infinite}
.exp-local .bird{width:34px;right:22%;top:12%;animation:awBirdFly 12s linear infinite}
@keyframes awFlutter{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(14px,-18px) rotate(8deg)}}
@keyframes awBirdFly{from{right:-10%;top:14%}50%{top:9%}to{right:110%;top:16%}}
.exp-city .skyline{left:0;right:0;bottom:31%;height:34%;width:100%}
.exp-city .shopfront{width:100px;right:6%;bottom:15%}
.exp-country .plane{width:120px;left:-14%;top:12%;animation:awPlane 11s linear infinite}
@keyframes awPlane{from{left:-24%;top:15%}to{left:108%;top:6%}}
.exp-country .landmarks{left:0;right:0;bottom:32%;height:26%;width:100%}
.exp-country .suitcase{width:62px;right:12%;bottom:13%;transform:rotate(-4deg)}
/* pet jalan-jalan */
.away-pet{position:absolute;bottom:14%;left:0;width:100%;height:90px;pointer-events:none}
.away-pet span{position:absolute;left:0;bottom:8px;font-size:58px;filter:drop-shadow(0 4px 3px rgba(80,50,20,.25));
animation:awWalkX 9s ease-in-out infinite, awWalkBob .45s ease-in-out infinite alternate}
.away-pet .aw-shadow{position:absolute;left:0;bottom:2px;width:64px;height:12px;border-radius:50%;
background:rgba(80,50,20,.2);animation:awWalkX 9s ease-in-out infinite}
@keyframes awWalkX{0%{transform:translateX(12vw) scaleX(1)}46%{transform:translateX(64vw) scaleX(1)}
50%{transform:translateX(66vw) scaleX(-1)}96%{transform:translateX(14vw) scaleX(-1)}100%{transform:translateX(12vw) scaleX(1)}}
@keyframes awWalkBob{from{margin-bottom:0}to{margin-bottom:7px}}
.away-pet .aw-shadow{animation-name:awWalkXs}
@keyframes awWalkXs{0%{transform:translateX(calc(12vw + 2px))}46%{transform:translateX(calc(64vw + 2px))}
50%{transform:translateX(calc(66vw + 2px))}96%,100%{transform:translateX(calc(12vw + 2px))}}
/* boarding: kamar hangat */
.brd .aw-room{position:absolute;inset:0;
background:linear-gradient(180deg,#f5e2c4 0%,#eed4ac 58%,#c9a878 58.5%,#b8935e 100%)}
.brd .window{width:120px;left:9%;top:9%}
.brd .plant{width:76px;right:7%;bottom:34%}
.brd .bowl{width:84px;right:14%;bottom:12%}
.brd .ball{width:40px;left:10%;bottom:13%;animation:awBallRock 4s ease-in-out infinite}
@keyframes awBallRock{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.brd-bed{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:min(64vw,260px)}
.brd-bed svg{width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(107,68,35,.18))}
.brd-pet{position:absolute;left:22%;bottom:34%;font-size:52px;transform-origin:50% 90%;
animation:brdBreath 3.2s ease-in-out infinite}
@keyframes brdBreath{0%,100%{transform:scale(1,1) rotate(-4deg)}50%{transform:scale(1.045,.96) rotate(-4deg)}}
.brd-zz{position:absolute;left:44%;top:-26px}
.brd-zz i{position:absolute;font-style:normal;font-family:'Fredoka One',cursive;color:#8a9ec4;opacity:0;
animation:brdZz 3s ease-in infinite}
.brd-zz i:nth-child(1){font-size:20px;animation-delay:0s}
.brd-zz i:nth-child(2){font-size:15px;left:14px;animation-delay:1s}
.brd-zz i:nth-child(3){font-size:11px;left:26px;animation-delay:2s}
@keyframes brdZz{0%{opacity:0;transform:translateY(10px)}25%{opacity:.9}100%{opacity:0;transform:translateY(-34px) rotate(14deg)}}
/* kartu info away */
.away-card{position:absolute;left:14px;right:14px;bottom:calc(96px + env(safe-area-inset-bottom));
max-width:430px;margin:0 auto;background:linear-gradient(170deg,#fffdf4,#f7ecd2);
border:3.5px solid #8b5e34;border-radius:24px;padding:14px 16px;
box-shadow:0 6px 0 rgba(107,68,35,.28), 0 18px 30px rgba(60,40,15,.3);
animation:awayCardIn .55s cubic-bezier(.34,1.4,.64,1) both;animation-delay:.15s}
@keyframes awayCardIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.aw-head{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.aw-ic{width:44px;height:44px;flex:0 0 auto;background:#fffdf4;border:2.5px solid #d9c294;border-radius:15px;padding:7px;
box-shadow:0 3px 0 rgba(107,68,35,.15)}
.aw-ic svg{width:100%;height:100%}
.aw-head b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.05rem;color:#5a3d1e}
.aw-head small{font-size:.72rem;font-weight:800;color:#6b8f4e}
.aw-timer{font-size:.82rem;font-weight:800;color:#7a6248;background:#fffbe9;border:2px dashed #d9c294;
border-radius:13px;padding:8px 12px;margin-bottom:8px;text-align:center}
.aw-timer b{color:#8a5f2a;font-size:.95rem}
.aw-chips{display:flex;gap:7px;margin-bottom:8px}
.aw-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;color:#7a6248;
background:#fffbe9;border:2px solid #e0cba0;border-radius:99px;padding:4px 11px}
.aw-chip svg{width:15px;height:15px}
.aw-msg{font-size:.76rem;font-weight:700;color:#8a7258;line-height:1.5;margin-bottom:10px}
.aw-peek{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;color:#5a3d1e;
background:linear-gradient(170deg,#fffbe9,#f3e4c0);border:2.5px solid #c9a878;border-radius:15px;padding:10px;
box-shadow:0 3.5px 0 rgba(140,90,20,.28);cursor:pointer;transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.aw-peek:active{transform:scale(.96)}
.aw-peek svg{width:17px;height:17px}
/* kunci dock saat ekspedisi (bot memang menonaktifkan interaksi) */
.exp-away .room-pet-wrap{display:none}
.exp-away .room-act-btn{opacity:.42;filter:saturate(.5);pointer-events:none;position:relative}
.exp-away .room-act-btn::after{content:'';position:absolute;top:-5px;right:-5px;width:17px;height:17px;
background:#fffdf4 url('data:image/svg+xml;utf8,') center/11px no-repeat;
border:2px solid #c9a878;border-radius:7px}
/* ==================== CUSTOM FLOWER (CFLOW) ==================== */
/* toast mandiri CFLOW — jaga-jaga kalau #toast host ketutup/rusak, ini selalu di atas semua overlay CFLOW */
#cf-toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-30px);
z-index:500;background:#3a2612;color:#fff3dd;font-weight:800;font-size:.82rem;
padding:10px 18px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.35);
opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;max-width:86vw;text-align:center}
#cf-toast.cf-toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Flower Gift section di dalam Inventory — pakai .inv-item bawaan, tinggal tambah thumbnail */
.cf-invthumb{width:100%;aspect-ratio:1/1;background:#fff;border:2px solid #f2c4d0;border-radius:12px;
overflow:hidden;margin-bottom:4px}
.cf-invthumb img{width:100%;height:100%;object-fit:contain}
.cf-inv-empty{grid-column:1/-1;text-align:center;padding:20px 16px;margin-bottom:10px;
background:linear-gradient(170deg,#fff5f8,#fdeaf0);border:2.5px dashed #e2a8b8;border-radius:18px}
.cf-inv-emptyic{display:inline-block;width:44px;height:44px;margin-bottom:6px}
.cf-inv-emptyic svg{width:100%;height:100%}
.cf-inv-empty p{font-size:.76rem;font-weight:700;color:#c07a8c;line-height:1.4}
.cf-cat{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:13px 15px;cursor:pointer;
background:linear-gradient(170deg,#fff5f8,#fdeaf0);border:3px solid #e2a8b8;border-radius:22px;
box-shadow:0 5px 0 rgba(192,90,114,.25), 0 12px 20px rgba(192,90,114,.1);
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-cat:active{transform:scale(.97)}
.cf-cat-ic{width:48px;height:48px;flex:0 0 auto;background:#fffdf4;border:2.5px solid #f2c4d0;
border-radius:16px;padding:8px;box-shadow:0 3px 0 rgba(192,90,114,.18)}
.cf-cat-ic svg{width:100%;height:100%}
.cf-cat-tx{flex:1;min-width:0}
.cf-cat-tx b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1rem;color:#a84c62}
.cf-cat-tx small{font-size:.7rem;font-weight:800;color:#c07a8c;line-height:1.3}
.cf-cat-go{font-size:1.5rem;font-weight:900;color:#e2a8b8}
/* creator fullscreen */
#cf-creator{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#cf-creator.cf-on{opacity:1;transform:none}
#cf-creator.cf-hide{display:none}
.cf-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;
margin:calc(10px + env(safe-area-inset-top)) 12px 10px;padding:9px 11px;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:3px solid #8b5e34;border-radius:20px;
box-shadow:0 5px 0 rgba(107,68,35,.2)}
.cf-hbtn{width:42px;height:42px;flex:0 0 auto;background:#fffbe9;border:2.5px solid #d9c294;border-radius:14px;
padding:8px;cursor:pointer;box-shadow:0 3px 0 rgba(107,68,35,.16);
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-hbtn:active{transform:scale(.88)}
.cf-hbtn svg{width:100%;height:100%}
.cf-htitle{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.cf-htitle b{font-family:'Fredoka One',cursive;font-weight:400;font-size:1.05rem;color:#5a3d1e}
.cf-hflower{width:26px;height:26px;flex:0 0 auto;animation:petBob 2.6s ease-in-out infinite}
.cf-hflower svg{width:100%;height:100%}
.cf-hkoin{display:flex;align-items:center;gap:5px;background:#fff8dd;border:2.5px solid #e8c86e;
border-radius:99px;padding:6px 12px;font-weight:900;color:#8a6410;font-size:.85rem}
.cf-hkoin svg{width:17px;height:17px}
#cf-frame{flex:1;width:100%;border:none;background:#fff}
.cf-done{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:410;
display:flex;align-items:center;gap:8px;font-family:'Fredoka One',cursive;font-weight:400;font-size:1rem;
color:#fffdf4;background:linear-gradient(170deg,#8fce7a,#5f9c48);border:3px solid #4a7a36;border-radius:99px;
padding:13px 24px;cursor:pointer;box-shadow:0 5px 0 #3f6b2e, 0 14px 22px rgba(60,90,30,.35);
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-done:active{transform:scale(.93)}
.cf-done svg{width:20px;height:20px}
/* bottom sheet */
.cf-ov{position:fixed;inset:0;z-index:430;background:rgba(58,38,18,.45);opacity:0;transition:opacity .3s;
display:flex;align-items:flex-end;justify-content:center}
.cf-ov.on{opacity:1}
.cf-sheet{width:100%;max-width:460px;background:linear-gradient(170deg,#fffdf4,#f7ecd2);
border:3.5px solid #8b5e34;border-bottom:none;border-radius:28px 28px 0 0;
padding:12px 18px calc(20px + env(safe-area-inset-bottom));
transform:translateY(100%);transition:transform .42s cubic-bezier(.34,1.2,.64,1)}
.cf-ov.on .cf-sheet{transform:none}
.cf-grab{width:44px;height:5px;border-radius:99px;background:#d9c294;margin:2px auto 12px}
.cf-prev{width:150px;height:170px;margin:0 auto 8px;background:#fff;border:3px solid #d9c294;border-radius:18px;
overflow:hidden;box-shadow:0 4px 0 rgba(107,68,35,.15)}
.cf-prev.sm{width:110px;height:124px}
.cf-prev img{width:100%;height:100%;object-fit:contain}
.cf-ptitle{text-align:center;font-family:'Fredoka One',cursive;font-weight:400;color:#5a3d1e;margin-bottom:6px}
.cf-price{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.78rem;font-weight:800;
color:#8a6410;background:#fff8dd;border:2px dashed #e8c86e;border-radius:13px;padding:7px 12px;margin-bottom:12px}
.cf-price svg{width:16px;height:16px}
.cf-big{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 15px;margin-bottom:10px;
border-radius:19px;cursor:pointer;transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-big:active{transform:scale(.97)}
.cf-big:disabled{opacity:.6}
.cf-big svg{width:32px;height:32px;flex:0 0 auto}
.cf-big span b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:.98rem}
.cf-big span small{font-size:.68rem;font-weight:800}
.cf-blue{background:linear-gradient(170deg,#eef6fb,#dcedf7);border:3px solid #8ab8d4}
.cf-blue b{color:#3f6b8a}.cf-blue small{color:#6a94ae}
.cf-green{background:linear-gradient(170deg,#f2f9e8,#e4f2d4);border:3px solid #9ec886}
.cf-green b{color:#4a7a36}.cf-green small{color:#7aa060}
.cf-stitle{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Fredoka One',cursive;
font-weight:400;font-size:1.1rem;color:#5a3d1e;margin-bottom:10px}
.cf-stitle svg{width:22px;height:22px}
.cf-lbl{display:block;font-size:.72rem;font-weight:900;color:#8a7258;margin:8px 2px 5px}
.cf-in{width:100%;box-sizing:border-box;background:#fffdf4;border:2.5px solid #c9a878;border-radius:15px;
padding:12px 15px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.88rem;color:#4a3524}
.cf-in::placeholder{color:#b09468}
.cf-in:focus{outline:none;border-color:#6aa84f}
.cf-row{display:flex;gap:10px;margin-top:14px}
.cf-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:15px;
font-family:'Nunito',sans-serif;font-weight:900;font-size:.9rem;cursor:pointer;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-btn:active{transform:scale(.95)}
.cf-btn:disabled{opacity:.6}
.cf-btn svg{width:18px;height:18px}
.cf-btn.ghost{background:#fffbe9;border:2.5px solid #c9a878;color:#8a7258}
.cf-btn.solid{background:linear-gradient(170deg,#8fce7a,#5f9c48);border:2.5px solid #4a7a36;color:#fffdf4;
box-shadow:0 3.5px 0 #3f6b2e}
.cf-err{margin-top:9px;text-align:center;font-size:.74rem;font-weight:800;color:#c0392b;min-height:1em}
/* popup terima bunga */
.cf-pop-ov{position:fixed;inset:0;z-index:450;background:rgba(58,38,18,.5);opacity:0;transition:opacity .32s;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.cf-pop-ov.on{opacity:1}
.cf-pop{position:relative;width:min(82vw,320px);text-align:center;padding:24px 20px 18px;
background:linear-gradient(170deg,#fffdf4,#fdeef2);border:3.5px solid #c05a72;border-radius:26px;
box-shadow:0 7px 0 rgba(168,76,98,.4), 0 24px 40px rgba(90,40,50,.4);
transform:scale(.7);transition:transform .42s cubic-bezier(.34,1.4,.64,1)}
.cf-pop-ov.on .cf-pop{transform:scale(1)}
.cf-pop-ic{width:64px;height:64px;margin:0 auto 10px;background:#fff;border:3px solid #f2c4d0;border-radius:50%;
padding:13px;animation:petBob 2.4s ease-in-out infinite;box-shadow:0 4px 0 rgba(192,90,114,.2)}
.cf-pop-ic svg{width:100%;height:100%}
.cf-pop b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.15rem;color:#a84c62;margin-bottom:6px}
.cf-pop p{font-size:.85rem;font-weight:700;color:#8a6a72;margin-bottom:14px}
.cf-pop .cf-btn{width:100%;margin-bottom:8px}
.cf-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.cf-petal{position:absolute;top:-16px;width:11px;height:8px;border-radius:60% 40% 55% 45%;opacity:.9;
animation:cfPetal linear infinite}
@keyframes cfPetal{0%{transform:translateY(-10px) rotate(0) translateX(0)}
50%{transform:translateY(48vh) rotate(200deg) translateX(20px)}
100%{transform:translateY(102vh) rotate(400deg) translateX(-14px)}}
/* flower card fullscreen */
.cf-card-ov{position:fixed;inset:0;z-index:460;background:rgba(46,28,14,.55);backdrop-filter:blur(9px);
-webkit-backdrop-filter:blur(9px);opacity:0;transition:opacity .32s;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.cf-card-ov.on{opacity:1}
.cf-card{position:relative;width:min(86vw,340px);max-height:86dvh;overflow-y:auto;text-align:center;
padding:20px 18px;background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:3.5px solid #8b5e34;border-radius:28px;
box-shadow:0 8px 0 rgba(107,68,35,.35), 0 28px 48px rgba(40,25,10,.5);
transform:scale(.6);transition:transform .5s cubic-bezier(.34,1.35,.64,1)}
.cf-card-ov.on .cf-card{transform:scale(1)}
.cf-cx{position:absolute;top:12px;right:12px;width:34px;height:34px;background:#fffbe9;border:2.5px solid #d9c294;
border-radius:12px;padding:7px;cursor:pointer;z-index:2}
.cf-cx svg{width:100%;height:100%}
.cf-cimg{width:100%;aspect-ratio:5/6;background:#fff;border:3px solid #d9c294;border-radius:20px;overflow:hidden;
margin-bottom:12px;box-shadow:inset 0 0 24px rgba(242,164,184,.18)}
.cf-cimg img{width:100%;height:100%;object-fit:contain;animation:cfBloom .8s cubic-bezier(.34,1.3,.64,1) both}
@keyframes cfBloom{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.cf-cname{font-family:'Fredoka One',cursive;font-weight:400;font-size:1.2rem;color:#5a3d1e;margin-bottom:9px}
.cf-cmeta{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cf-cmeta span{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.78rem;font-weight:700;color:#8a7258}
.cf-cmeta svg{width:16px;height:16px}
.cf-cmeta b{color:#5a3d1e}
.cf-cmsg{font-size:.85rem;font-weight:700;font-style:italic;color:#a84c62;background:#fdeef2;
border:2px dashed #f2c4d0;border-radius:14px;padding:10px 13px;margin-top:4px}
/* gift page */
#cf-gift{position:fixed;inset:0;z-index:420;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .32s, transform .36s cubic-bezier(.34,1.2,.64,1)}
#cf-gift.cf-on{opacity:1;transform:none}
.cf-tabs{flex:0 0 auto;display:flex;gap:9px;margin:2px 14px 10px}
.cf-tab{flex:1;padding:10px;border-radius:15px;font-family:'Nunito',sans-serif;font-weight:900;font-size:.85rem;
background:#fffbe9;border:2.5px solid #e0cba0;color:#8a7258;cursor:pointer;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-tab:active{transform:scale(.96)}
.cf-tab.on{background:#eef6dd;border-color:#8fce7a;color:#4e8438}
.cf-list{flex:1;overflow-y:auto;padding:2px 14px calc(20px + env(safe-area-inset-bottom));
display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}
.cf-gcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px;text-align:center;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:2.5px solid #d9c294;border-radius:19px;
box-shadow:0 4px 0 rgba(107,68,35,.16);cursor:pointer;
animation:cfCardIn .4s cubic-bezier(.34,1.4,.64,1) both;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cf-gcard:active{transform:scale(.95)}
@keyframes cfCardIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
.cf-gthumb{width:100%;aspect-ratio:5/6;background:#fff;border:2.5px solid #ecdcc0;border-radius:14px;overflow:hidden}
.cf-gthumb img{width:100%;height:100%;object-fit:contain}
.cf-gcard b{font-family:'Fredoka One',cursive;font-weight:400;font-size:.82rem;color:#5a3d1e;margin-top:4px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cf-gcard small{font-size:.62rem;font-weight:800;color:#8a7258;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cf-gcard em{font-style:normal;font-size:.56rem;font-weight:700;color:#b09468}
.cf-empty{grid-column:1/-1;text-align:center;padding:44px 20px}
.cf-empty b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.05rem;color:#5a3d1e;margin:10px 0 5px}
.cf-empty p{font-size:.78rem;font-weight:700;color:#8a7258}
.cf-loading{grid-column:1/-1;text-align:center;padding:40px;font-weight:800;color:#8a7258}
/* ==================== CUSTOM COOKIE (CCOOKIE) — reuse CFLOW styling ==================== */
#cc-creator{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#cc-creator.cf-on{opacity:1;transform:none}
#cc-creator.cf-hide{display:none}
#cc-frame{flex:1;width:100%;border:none;background:#fff}
#cc-gift{position:fixed;inset:0;z-index:420;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#cc-gift.cf-on{opacity:1;transform:none}
#cc-toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-30px);
z-index:520;background:linear-gradient(170deg,#5a3d1e,#3f2a12);color:#fff6e2;font-weight:800;font-size:.86rem;
padding:11px 18px;border-radius:99px;box-shadow:0 8px 20px rgba(60,40,15,.4);opacity:0;pointer-events:none;
transition:opacity .3s, transform .3s;max-width:86%;text-align:center}
#cc-toast.cf-toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ==================== CUSTOM BENTO (CBENTO) — reuse CFLOW styling ==================== */
#bb-creator{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#bb-creator.cf-on{opacity:1;transform:none}
#bb-creator.cf-hide{display:none}
#bb-frame{flex:1;width:100%;border:none;background:#fff}
#bb-gift{position:fixed;inset:0;z-index:420;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#bb-gift.cf-on{opacity:1;transform:none}
#bb-toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-30px);
z-index:520;background:linear-gradient(170deg,#5a3d1e,#3f2a12);color:#fff6e2;font-weight:800;font-size:.86rem;
padding:11px 18px;border-radius:99px;box-shadow:0 8px 20px rgba(60,40,15,.4);opacity:0;pointer-events:none;
transition:opacity .3s, transform .3s;max-width:86%;text-align:center}
#bb-toast.cf-toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- Custom Cookie/Bento inventory card action row ---------- */
.cf-invcard-actrow{display:flex;align-items:stretch;gap:6px;margin-top:4px}
.cf-invcard-actrow .cf-viewbtn-w{flex:1;min-width:0;padding:6px 4px;font-size:0.68rem}
.cf-icon-del{flex:0 0 auto;width:38px;height:38px;padding:0!important;
display:flex;align-items:center;justify-content:center}
.cf-icon-del svg{width:17px;height:17px;display:block}
/* ==================== CUSTOM SCRAPBOOK (CSCRAP) — reuse CFLOW styling ==================== */
#sb-creator,#sb-reader{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#sb-creator.cf-on,#sb-reader.cf-on{opacity:1;transform:none}
#sb-creator.cf-hide{display:none}
#sb-frame,#sb-rframe{flex:1;width:100%;border:none;background:#fff}
#sb-gift{position:fixed;inset:0;z-index:420;display:flex;flex-direction:column;
background:linear-gradient(170deg,#fdf3dd,#f7ead2);
opacity:0;transform:translateY(26px);transition:opacity .35s, transform .38s cubic-bezier(.34,1.2,.64,1)}
#sb-gift.cf-on{opacity:1;transform:none}
#sb-toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-30px);
z-index:520;background:linear-gradient(170deg,#5a3d1e,#3f2a12);color:#fff6e2;font-weight:800;font-size:.86rem;
padding:11px 18px;border-radius:99px;box-shadow:0 8px 20px rgba(60,40,15,.4);opacity:0;pointer-events:none;
transition:opacity .3s, transform .3s;max-width:86%;text-align:center}
#sb-toast.cf-toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ==================== CHAT v2 ==================== */
#chat.screen,#screen-chat{position:relative}
#chat-content .chat-wrap{height:calc(100dvh - 118px)}
#chat-content{position:relative}
#chat-content::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(circle at 14% 10%, rgba(168,214,140,.25), transparent 30%),
radial-gradient(circle at 86% 24%, rgba(242,164,184,.22), transparent 28%),
radial-gradient(circle at 78% 86%, rgba(247,201,72,.14), transparent 32%),
radial-gradient(rgba(139,94,52,.06) 1.5px, transparent 1.5px);
background-size:auto,auto,auto,26px 26px}
.chat-pet-header{background:linear-gradient(170deg,#fffdf4,#f7ecd2)!important;backdrop-filter:none!important;
border:3px solid #8b5e34!important;border-radius:22px!important;padding:10px 12px!important;
box-shadow:0 5px 0 rgba(107,68,35,.2), 0 12px 20px rgba(90,60,25,.12)!important;gap:10px!important}
.chv-back{width:40px;height:40px;flex:0 0 auto;background:#fffbe9;border:2.5px solid #d9c294;border-radius:14px;
padding:7px;cursor:pointer;box-shadow:0 3px 0 rgba(107,68,35,.16);
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.chv-back:active{transform:scale(.88)}
.chv-back svg{width:100%;height:100%}
.chv-ava{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-size:1.7rem;background:#eef6dd;border:2.5px solid #b9dfa0;border-radius:50%;
animation:petBob 2.6s ease-in-out infinite}
.chv-id{flex:1;min-width:0}
.chv-id b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.02rem;color:#5a3d1e;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chv-id small{font-size:.7rem;font-weight:800;color:#8a7258}
.chv-mood{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;
border-radius:99px;padding:4px 9px;white-space:nowrap}
.chv-mood svg{width:14px;height:14px}
.chv-mood.ok{background:#eef6dd;border:2px solid #b9dfa0;color:#4e8438}
.chv-mood.mid{background:#fdf3da;border:2px solid #e8c86e;color:#8a6410}
.chv-mood.low{background:#fdeef2;border:2px solid #e2a8b8;color:#c05a72}
/* gelembung */
.chat-messages{padding:10px 4px!important;gap:11px!important}
.chat-bubble{animation:chBubIn .3s cubic-bezier(.34,1.4,.64,1) both!important;
font-weight:700!important;box-shadow:0 3px 0 rgba(107,68,35,.13)!important}
@keyframes chBubIn{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
.chat-bubble.user{background:linear-gradient(170deg,#8fce7a,#6fae53)!important;color:#fffdf4!important;
border:2.5px solid #4a7a36!important;border-bottom-right-radius:5px!important;
box-shadow:0 3.5px 0 #3f6b2e!important}
.chat-bubble.pet{background:linear-gradient(170deg,#fffdf4,#faf0d8)!important;color:#4a3524!important;
border:2.5px solid #d9c294!important;border-bottom-left-radius:5px!important}
.chat-bubble.pet.typing{padding:13px 18px!important}
.typing-dot{background:#c9a878!important;animation:chTyping 1.1s ease-in-out infinite!important}
.typing-dot:nth-child(2){animation-delay:.18s!important}
.typing-dot:nth-child(3){animation-delay:.36s!important}
@keyframes chTyping{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
/* kuota badge */
.chat-quota{display:flex!important;align-items:center;gap:8px;text-align:left!important;
background:#fffdf4;border:2.5px dashed #d9c294;border-radius:15px;padding:7px 12px!important;
margin:6px 0 2px}
.chq-ic{width:21px;height:21px;flex:0 0 auto}
.chq-ic svg{width:100%;height:100%}
.chq-tx{flex:1;font-size:.72rem;font-weight:800;color:#8a7258}
.chq-n{font-family:'Fredoka One',cursive;font-weight:400;font-size:.85rem;color:#4e8438}
.chq-n.low{color:#c05a72}
/* input */
.chat-input-wrap{padding:8px 0 calc(6px + env(safe-area-inset-bottom))!important;gap:9px!important}
.chat-input{background:#fffdf4!important;border:2.5px solid #c9a878!important;
box-shadow:inset 0 2px 0 rgba(107,68,35,.08)!important;padding:12px 17px!important;
font-weight:700!important;color:#4a3524!important}
.chat-input::placeholder{color:#b09468!important;font-weight:700}
.chat-input:focus{outline:none;border-color:#6aa84f!important}
.chat-send-btn{width:48px!important;height:48px!important;border-radius:17px!important;
background:linear-gradient(170deg,#8fce7a,#5f9c48)!important;border:2.5px solid #4a7a36!important;
box-shadow:0 4px 0 #3f6b2e!important;padding:11px!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)!important}
.chat-send-btn:active{transform:scale(.88)!important;box-shadow:0 1px 0 #3f6b2e!important}
.chat-send-btn svg{width:100%;height:100%}
/* empty state */
.chat-empty{margin:auto;text-align:center;max-width:250px;padding:22px 18px;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:3px solid #8b5e34;border-radius:24px;
box-shadow:0 5px 0 rgba(107,68,35,.2);animation:chBubIn .4s cubic-bezier(.34,1.4,.64,1) both}
.che-ava{display:inline-flex;width:72px;height:72px;align-items:center;justify-content:center;font-size:2.6rem;
background:#eef6dd;border:3px solid #b9dfa0;border-radius:50%;margin-bottom:8px;
animation:petBob 2.4s ease-in-out infinite}
.chat-empty b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.05rem;color:#5a3d1e;margin-bottom:4px}
.chat-empty p{font-size:.78rem;font-weight:700;color:#8a7258;line-height:1.5;margin-bottom:10px}
.che-dots{display:flex;gap:6px;justify-content:center}
.che-dots i{width:8px;height:8px;border-radius:50%}
.che-dots i:nth-child(1){background:#f0968f}.che-dots i:nth-child(2){background:#f7c948}.che-dots i:nth-child(3){background:#8fce7a}
/* ==================== PETERNAKAN — kandang berilustrasi ====================
Kartu emoji lama diganti diorama SVG (js/22-ternak-kandang.js). Animasi
idle-nya pakai keyframes lv* yang sama seperti dulu, cuma sekarang
menempel ke di dalam SVG, bukan ke emoji. */
.farm-tip{background:#fffdf4;border:2.5px solid #e6d4ab;border-radius:16px;padding:10px 14px;margin-bottom:12px;
font-size:.8rem;font-weight:700;color:#8a7258;text-align:center}
.farm-field{display:grid;gap:13px}
.pen{position:relative;overflow:hidden;cursor:pointer;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);
border:2.5px solid #d9c294;border-radius:22px;
box-shadow:0 5px 0 rgba(107,68,35,.16), 0 14px 26px rgba(90,60,25,.13);
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.pen:active{transform:scale(.975)}
.pen.ready{border-color:#8fce7a;box-shadow:0 5px 0 rgba(78,132,56,.22), 0 14px 26px rgba(90,60,25,.13)}
.pen.plot{opacity:.92}
.pen-art{position:relative;background:linear-gradient(#dff0f7,#eff7e6 72%)}
.pen.ready .pen-art{background:linear-gradient(#e2f3e4,#f4fae6 72%)}
.pen-art::before{content:'';position:absolute;top:9px;right:16px;width:38px;height:38px;border-radius:50%;
background:radial-gradient(circle,#fff3c8 0 42%,rgba(255,235,168,0) 72%);pointer-events:none}
.kd-svg{display:block;width:100%;height:auto}
/* gelembung hasil panen */
.pen-pop{position:absolute;top:10px;left:12px;display:inline-flex;align-items:center;gap:3px;
background:#fffdf4;border:2.5px solid #8fce7a;border-radius:99px;padding:3px 11px 4px;
font-family:'Fredoka One',cursive;font-size:.88rem;color:#4e8438;
box-shadow:0 3px 0 rgba(78,132,56,.26);animation:penPop 1.9s ease-in-out infinite}
@keyframes penPop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* papan nama */
.pen-info{display:flex;align-items:center;gap:10px;padding:9px 14px 10px;
background:#fffdf4;border-top:2.5px solid #e6d4ab}
.pen-nm{flex:1;min-width:0}
.pen-nm b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.02rem;color:#5a3d1e;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pen-nm span{display:block;font-size:.7rem;font-weight:800;color:#8a7258;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pen-st{flex:0 0 auto;text-align:right;font-size:.66rem;font-weight:800;color:#a08a6e;white-space:nowrap}
.pen-st b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:.92rem;color:#8a7258}
.pen-st.on b{color:#4e8438}
.pen-bar{height:7px;background:#ece0c6;overflow:hidden;border-top:2px solid #e6d4ab}
.pen-bar i{display:block;height:100%;border-radius:0 4px 4px 0;
background:linear-gradient(90deg,#f7d06a,#8fce7a);transition:width .4s ease}
.pen.plot .pen-bar{display:none}
/* dipakai di modal detail / beli / berhasil beli */
.pen-hero{position:relative;overflow:hidden;border:2.5px solid #d9c294;border-radius:18px;
background:linear-gradient(#dff0f7,#eff7e6 72%)}
.pen-hero.ready{border-color:#8fce7a;background:linear-gradient(#e2f3e4,#f4fae6 72%)}
.pen-thumb{flex:0 0 auto;width:50px;height:auto;overflow:hidden;border:2px solid #d9c294;border-radius:12px;
background:linear-gradient(#dff0f7,#eff7e6 72%)}
/* baris toko ternak sempit di layar 360px — keterangannya dikecilin sedikit */
.shop-item-left:has(.pen-thumb) .shop-item-desc{font-size:.69rem;line-height:1.36}
.shop-item-left:has(.pen-thumb) + div .shop-item-price{white-space:nowrap}
/* animasi idle per hewan — menempel ke di dalam SVG */
.kd-a{transform-box:fill-box;transform-origin:50% 100%;will-change:transform}
.kd-peck{animation:lvPeck 3.6s ease-in-out infinite}
.kd-chew{animation:lvChew 3.8s ease-in-out infinite}
.kd-waddle{animation:lvWaddle 2.6s ease-in-out infinite}
.kd-waddle2{animation:lvWaddle 2.1s ease-in-out infinite;animation-delay:.5s}
.kd-graze{animation:lvGraze 5.2s ease-in-out infinite}
.kd-hop{animation:lvHop 3s cubic-bezier(.36,.07,.19,.97) infinite}
.kd-wiggle{animation:lvWiggle 2.8s ease-in-out infinite}
.kd-hover,.kd-hover2{transform-origin:50% 50%}
.kd-hover{animation:lvHover 1.7s ease-in-out infinite}
.kd-hover2{animation:lvHover 2.2s ease-in-out infinite;animation-delay:.4s}
/* biar tidak serempak sepetak sawah */
.farm-field .pen:nth-child(2n) .kd-a{animation-delay:.9s}
.farm-field .pen:nth-child(3n) .kd-a{animation-delay:1.5s}
@media (prefers-reduced-motion:reduce){.kd-a,.pen-pop{animation:none!important}}
@keyframes lvPeck{0%,54%,100%{transform:rotate(0)}58%{transform:rotate(16deg) translateY(2px)}62%{transform:rotate(0)}66%{transform:rotate(18deg) translateY(3px)}71%{transform:rotate(0)}82%{transform:rotate(-5deg)}88%{transform:rotate(0)}}
@keyframes lvWaddle{0%,100%{transform:translateX(-3px) rotate(-5deg)}50%{transform:translateX(3px) rotate(5deg)}}
@keyframes lvWiggle{0%,100%{transform:rotate(-3.5deg) scale(1,1)}25%{transform:rotate(0) scale(1.04,.96)}50%{transform:rotate(3.5deg) scale(1,1)}75%{transform:rotate(0) scale(.97,1.03)}}
@keyframes lvHover{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(2px,-4px) rotate(0)}50%{transform:translate(0,-6px) rotate(4deg)}75%{transform:translate(-2px,-3px) rotate(0)}}
@keyframes lvGraze{0%,42%,100%{transform:rotate(0) translateY(0)}50%,72%{transform:rotate(14deg) translateY(4px)}56%{transform:rotate(11deg) translateY(3px)}64%{transform:rotate(15deg) translateY(4px)}80%{transform:rotate(0) translateY(0)}}
@keyframes lvChew{0%,100%{transform:scale(1,1) rotate(0)}20%{transform:scale(1.015,.985) rotate(-1.6deg)}40%{transform:scale(1,1) rotate(0)}60%{transform:scale(1.015,.985) rotate(1.6deg)}80%{transform:scale(1,1)}}
@keyframes lvHop{0%,60%,100%{transform:translateY(0) scale(1,1)}64%{transform:translateY(1px) scale(1.06,.92)}72%{transform:translateY(-7px) scale(.96,1.05)}80%{transform:translateY(0) scale(1.05,.94)}86%{transform:translateY(0) scale(1,1)}}
/* ==================== SHOP/INV HERO ==================== */
.shop-hero{position:relative;display:flex;align-items:center;gap:13px;margin-bottom:16px;overflow:hidden;
background:linear-gradient(165deg,#fdf1d7,#f3e2bd 60%,#e9f0d4);
border:3.5px solid #8b5e34;border-radius:24px;padding:16px 18px;
box-shadow:0 6px 0 rgba(107,68,35,.22), 0 14px 24px rgba(90,60,25,.14)}
.shop-hero-ic{width:56px;height:56px;flex:0 0 auto;background:#fffdf4;border:3px solid #d9c294;border-radius:18px;
padding:9px;box-shadow:0 3.5px 0 rgba(107,68,35,.16)}
.shop-hero-ic svg{width:100%;height:100%}
.shop-hero-tx{flex:1;min-width:0}
.shop-hero-tx b{display:block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.25rem;color:#5a3d1e;
text-shadow:0 1.5px 0 #fffdf4}
.shop-hero-tx span{font-size:.76rem;font-weight:800;color:#8a7258}
.shop-hero-koin{display:flex;align-items:center;gap:5px;background:#fffdf4;border:2.5px solid #e8c86e;border-radius:99px;
padding:6px 13px;font-family:'Fredoka One',cursive;font-size:.9rem;color:#8a6410;
box-shadow:0 3px 0 rgba(200,144,31,.28);white-space:nowrap}
.shop-hero-koin svg{width:18px;height:18px}
.shop-hero-deco{position:absolute;right:-14px;bottom:-16px;width:74px;height:74px;opacity:.3;transform:rotate(-14deg)}
/* ==================== ROOM FULL-SCREEN v4 ==================== */
.screen:has(.room-fullscreen.inside-home){padding:0!important;overflow:hidden!important;
height:calc(100dvh - 62px);max-height:calc(100dvh - 62px)}
.room-fullscreen.inside-home{height:100%!important;min-height:100%;border-radius:0;overflow:hidden!important}
/* tumpukan notifikasi melayang — tidak mendorong layout */
.warn-stack{position:fixed;top:calc(70px + env(safe-area-inset-top));left:12px;right:12px;z-index:70;
max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.warn-stack .room-warn{pointer-events:auto;margin-bottom:0!important;
box-shadow:0 4px 0 rgba(107,68,35,.16), 0 12px 24px rgba(60,40,15,.24)!important;
animation:warnFloatIn .45s cubic-bezier(.34,1.4,.64,1) both}
.warn-stack .room-warn:nth-child(2){animation-delay:.08s}
.warn-stack .room-warn:nth-child(3){animation-delay:.16s}
@keyframes warnFloatIn{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}
/* panel Lainnya */
.room-more-body{overflow-y:auto;max-height:52vh;padding:2px 2px 8px;touch-action:pan-y;overscroll-behavior:contain}
.room-more-body .btn{margin-bottom:10px}
/* tombol umum -> gaya game hangat */
.btn{background:linear-gradient(170deg,#fffdf4,#f3e6c8)!important;color:#5a3d1e!important;
border:2.5px solid #c9a878!important;border-radius:16px!important;
box-shadow:0 3.5px 0 rgba(140,90,20,.28)!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)!important}
.btn:active{transform:scale(.965)!important;box-shadow:0 1px 0 rgba(140,90,20,.3)!important}
.btn.btn-soft{background:#fffbe9!important;border-color:#e0cba0!important}
/* ==================== ROOM MODE v3 — HUD & dock gaya Taman ==================== */
.rico{display:inline-flex;width:18px;height:18px;vertical-align:-4px}
.rico.b{width:26px;height:26px}
.rico svg{width:100%;height:100%}
.room-pill{background:linear-gradient(170deg,#fffdf4,#f7ecd2)!important;backdrop-filter:none!important;
border:2.5px solid #8b5e34!important;color:#4a3524!important;
box-shadow:0 3px 0 rgba(107,68,35,.22)!important;padding:6px 13px!important}
.room-pill span{color:#8a7258!important}
.room-icon-btn{width:46px!important;height:46px!important;border-radius:16px!important;
background:linear-gradient(170deg,#fffdf4,#f3e6c8)!important;backdrop-filter:none!important;
border:2.5px solid #8b5e34!important;box-shadow:0 3.5px 0 rgba(107,68,35,.24)!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)!important}
.room-icon-btn:active{transform:scale(.9)!important}
.room-stat-mini{background:#fffdf4!important;backdrop-filter:none!important;
border:2.5px solid #d9c294!important;box-shadow:0 2.5px 0 rgba(107,68,35,.14);padding:4px 10px!important}
.room-stat-mini-bar{width:56px!important;height:9px!important;background:#f0e2c0!important;
border:1.5px solid #c9ab78;border-radius:99px!important}
.room-stat-mini-fill{border-radius:99px!important}
/* room-act-col & room-act-btn dipindah/direstyle di ROOM UX v6 (vertikal, kiri, bawah status) */
.room-act-btn{background:#fffbe9!important;backdrop-filter:none!important;
border:2.5px solid #c9a878!important;border-radius:15px!important;
color:#5a3d1e!important;
box-shadow:0 3.5px 0 rgba(140,90,20,.3)!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)!important}
.room-act-btn:active{transform:scale(.9)!important;background:#fdf3da!important}
.room-act-icon{font-size:1.15rem!important;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.room-act-icon svg{width:26px;height:26px}
.room-act-label{font-size:.56rem!important;color:#6b4e2e!important;opacity:1!important;font-weight:800!important}
.room-act-badge{border:2px solid #fffdf4;top:-6px!important;right:-6px!important}
/* panel geser bawah -> kertas hangat */
.room-slide-panel{background:linear-gradient(170deg,#fffdf4,#f7ecd2)!important;backdrop-filter:none!important;
border:3.5px solid #8b5e34!important;border-bottom:none!important;
border-radius:26px 26px 0 0!important;box-shadow:0 -12px 34px rgba(80,50,20,.3)!important}
.room-panel-pip{width:46px!important;height:5.5px!important;background:#d9c294!important;border-radius:99px!important}
.room-panel-title{color:#5a3d1e!important}
.room-feed-item,.room-decor-item,.room-pet-item,.room-skin-item{
background:#fffbe9!important;border:2.5px solid #e0cba0!important;border-radius:16px!important;
box-shadow:0 3px 0 rgba(107,68,35,.12)!important;color:#5a3d1e!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.room-feed-item:active,.room-decor-item:active,.room-pet-item:active,.room-skin-item:active{transform:scale(.95)}
.room-feed-name,.room-decor-name,.room-pet-name,.room-skin-label{color:#5a3d1e!important}
.room-feed-price,.room-decor-price,.room-pet-sub{color:#8a7258!important}
.room-feed-qty{background:#fff3cf!important;border:1.5px solid #e8c86e;color:#8a6410!important;border-radius:99px!important}
.room-decor-buy-btn{background:linear-gradient(#8fce7a,#6aa84f)!important;border:2.5px solid #4a7a36!important;
color:#fffdf4!important;border-radius:12px!important;box-shadow:0 3px 0 #3f6b2e!important}
.room-decor-tab{background:#fffbe9!important;border:2px solid #e0cba0!important;color:#8a7258!important;border-radius:99px!important}
.room-decor-tab.active{background:#eef6dd!important;border-color:#8fce7a!important;color:#4e8438!important}
/* balon bicara pet */
.room-speech{background:#fffdf4!important;border:2.5px solid #8b5e34;border-radius:15px!important;
color:#4a3524!important;box-shadow:0 3.5px 0 rgba(107,68,35,.2)!important;font-weight:800!important}
.room-vignette{background:radial-gradient(ellipse at center, transparent 52%, rgba(40,26,12,.26) 100%)!important}
/* banner peringatan hangat */
.room-warn{background:#fffdf4!important;border:2.5px solid #e0cba0!important;border-radius:16px!important;
box-shadow:0 3px 0 rgba(107,68,35,.13);padding:11px 14px!important;margin-bottom:10px!important}
.room-warn .btn{border-radius:12px!important}
/* empty state premium */
.cozy-empty{max-width:340px;width:calc(100% - 40px);margin:0 auto;text-align:center;
background:linear-gradient(170deg,#fffdf4,#f7ecd2);border:3.5px solid #8b5e34;border-radius:26px;
padding:24px 20px 22px;box-shadow:0 6px 0 rgba(107,68,35,.22), 0 16px 28px rgba(90,60,25,.16);
animation:screenIn .35s cubic-bezier(.3,.9,.4,1)}
.cozy-empty.away{background:linear-gradient(170deg,#fdf6e8,#f2e2c2)}
.cozy-empty .ce-art{width:170px;margin:0 auto 6px}
.cozy-empty .ce-art svg{width:100%;height:auto;filter:drop-shadow(0 5px 0 rgba(107,68,35,.12))}
.cozy-empty .ce-title{display:block;font-family:'Fredoka One',cursive;font-size:1.35rem;color:#5a3d1e;margin-bottom:6px}
.cozy-empty .ce-text{font-size:.85rem;font-weight:700;color:#8a7258;line-height:1.55;margin-bottom:13px}
.cozy-empty .ce-card{background:#fffbe9;border:2.5px dashed #d9c294;border-radius:15px;padding:11px 13px;
font-size:.78rem;font-weight:700;color:#7a6248;line-height:1.5;margin-bottom:15px}
.cozy-empty .ce-card b{color:#4e8438}
.cozy-empty .ce-card.away{border-color:#d9a8a0;background:#fdf2ee}
.cozy-empty .ce-card.away b{color:#b0543a}
.cozy-empty .ce-btn{font-family:'Fredoka One',cursive;font-size:1rem;letter-spacing:.3px;color:#fffdf4;
background:linear-gradient(170deg,#8fce7a,#5f9c48);border:3px solid #4a7a36;border-radius:99px;
padding:12px 30px;box-shadow:0 5px 0 #3f6b2e;cursor:pointer;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.cozy-empty .ce-btn:active{transform:scale(.94);box-shadow:0 1px 0 #3f6b2e}
/* baris audio menu */
.smi-audio{margin-top:11px;padding-top:11px;border-top:2.5px dashed #e5d3a8;display:flex;flex-direction:column;gap:9px}
.smi-audio .row{display:flex;align-items:center;gap:9px}
.smi-audio .rico{width:21px;height:21px;flex:0 0 auto}
.smi-audio input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:11px;border-radius:99px;
background:#f0e2c0;border:2px solid #c9ab78;outline:none;min-width:0}
.smi-audio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;
background:linear-gradient(#8fce7a,#6aa84f);border:2.5px solid #4a7a36;box-shadow:0 2px 0 rgba(60,90,30,.4);cursor:pointer}
.smi-audio .sw{width:40px;height:24px;border-radius:99px;background:#e0cba0;border:2px solid #c9a878;
position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s}
.smi-audio .sw::after{content:'';position:absolute;top:1.5px;left:2px;width:17px;height:17px;border-radius:50%;
background:#fffdf4;box-shadow:0 1.5px 0 rgba(107,68,35,.3);transition:left .2s}
.smi-audio .sw.on{background:#8fce7a;border-color:#4e8438}
.smi-audio .sw.on::after{left:17px}
/* ==================== PET PAGE v3 — hero scene + dock aksi ==================== */
.pet-hero{min-height:46vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:30px 18px 34px!important;margin-bottom:0!important;
border-radius:26px 26px 8px 8px!important}
.pet-anim-wrap{width:168px!important;height:168px!important;animation:petBob 2.4s ease-in-out infinite!important}
.pet-anim-wrap img.pet-anim{width:168px!important;height:168px!important}
.pet-emoji,.pet-emoji-fallback{font-size:7rem!important}
.pet-name{font-size:1.9rem!important;text-shadow:0 2px 0 rgba(255,253,244,.8)}
.pet-acc{font-size:2.4rem!important}
.pet-acc.glasses{top:54px!important}
.pet-acc.aura{font-size:7rem!important}
.card.pet-panel{margin-top:-18px;border-radius:8px 8px 24px 24px!important;position:relative;z-index:3}
.pet-panel-wrap{display:flex;flex-direction:column-reverse;gap:13px}
.pet-stats{width:100%}
.pet-dock{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%;
padding-bottom:12px;border-bottom:2.5px dashed #e5d3a8}
.pet-dock button{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
gap:3px;min-height:0!important;aspect-ratio:1/1.12;padding:6px 2px!important;
background:linear-gradient(170deg,#fffbe9,#f3e4c0)!important;
border:2.5px solid #c9a878!important;border-radius:16px!important;
box-shadow:0 3.5px 0 rgba(140,90,20,.3)!important;color:#5a3d1e!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.pet-dock button:active{transform:scale(.9)}
.pet-dock button span:first-child{font-size:1.45rem!important;filter:drop-shadow(0 2px 0 rgba(107,68,35,.14))}
.pet-dock button span:nth-child(2){font-size:.6rem!important;color:#6b4e2e!important}
@media (max-width:380px){.pet-dock{grid-template-columns:repeat(3,1fr)}.pet-dock button{aspect-ratio:1/0.9}}
/* ==================== SCREENS v2 — kartu ala game utk Home/Toko/Inventori/Game ==================== */
.card{background:linear-gradient(170deg,#fffdf4,#faf0d8)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
border:3px solid #8b5e34!important;border-radius:22px!important;
box-shadow:0 5px 0 rgba(107,68,35,.2), 0 14px 24px rgba(90,60,25,.14)!important;position:relative}
.pet-hero{background:linear-gradient(180deg,#cde9f7 0%,#e9f5da 78%,#cfe6b4 100%)!important;
border:3.5px solid #8b5e34!important;border-radius:24px!important;
box-shadow:0 6px 0 rgba(107,68,35,.22), 0 16px 26px rgba(90,60,25,.16)!important;overflow:hidden}
.pet-hero::before{background:radial-gradient(circle at 74% 22%, rgba(255,244,190,.9) 0%, rgba(255,244,190,0) 34%)!important}
.pet-hero::after{content:'';position:absolute;left:-4px;right:-4px;bottom:-6px;height:26px;
background:radial-gradient(60% 100% at 50% 100%, rgba(106,168,79,.35), transparent 70%)}
.shop-item{background:#fffbe9!important;border:2.5px solid #e0cba0!important;border-radius:18px!important;
box-shadow:0 3px 0 rgba(107,68,35,.13)!important;margin-bottom:11px!important;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.shop-item:active{transform:scale(.975)}
.shop-item-emoji{width:52px;height:52px;display:flex!important;align-items:center;justify-content:center;
background:linear-gradient(170deg,#fdf6e2,#f3e4c0);border:2.5px solid #d9c294;border-radius:15px;
font-size:1.6rem!important;flex:0 0 auto;box-shadow:inset 0 -3px 0 rgba(107,68,35,.1)}
.shop-item-name{color:#5a3d1e!important;font-size:.95rem!important}
.shop-item-price{background:#eef6dd;border:2px solid #b9dfa0;border-radius:99px;padding:4px 11px;color:#4e8438!important}
.inv-grid{gap:11px!important}
.inv-item{background:linear-gradient(170deg,#fffdf4,#f7ecd2)!important;border:2.5px solid #d9c294!important;
border-radius:18px!important;box-shadow:0 4px 0 rgba(107,68,35,.15)!important;position:relative;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.inv-item:active{transform:scale(.94)}
.inv-item-emoji{font-size:2.1rem!important;filter:drop-shadow(0 2.5px 0 rgba(107,68,35,.14))}
.inv-item-count{background:#fff3cf;border:2px solid #e8c86e;border-radius:99px;display:inline-block;
padding:1px 9px;color:#8a6410!important;font-size:.72rem!important;margin-top:5px!important}
.game-card{background:linear-gradient(170deg,#fffdf4,#f7ecd2)!important;border:3px solid #8b5e34!important;
border-radius:22px!important;box-shadow:0 5px 0 rgba(107,68,35,.2), 0 12px 20px rgba(90,60,25,.13)!important;
position:relative;transition:transform .15s cubic-bezier(.34,1.56,.64,1)!important}
.game-card::after{content:'';position:absolute;inset:5px;border:2px dashed rgba(139,94,52,.2);border-radius:16px;pointer-events:none}
.game-card:active{transform:scale(.94)!important}
.game-card-emoji{filter:drop-shadow(0 4px 0 rgba(107,68,35,.16))}
.game-card-name{color:#5a3d1e!important}
/* ==================== DESIGN SYSTEM v2 — menu tiles, header badge, transisi ==================== */
.smi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.side-menu-item{display:flex!important;flex-direction:column;align-items:center;gap:5px;
background:#fffbe9!important;border:2.5px solid #e0cba0!important;border-radius:18px!important;
padding:11px 6px 9px!important;font-family:'Nunito',sans-serif;font-weight:800!important;font-size:12px!important;
color:#5a3d1e!important;box-shadow:0 3px 0 rgba(107,68,35,.14);cursor:pointer;
transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.side-menu-item:active{transform:scale(.93)}
.side-menu-item.active{background:#eef6dd!important;border-color:#8fce7a!important;box-shadow:0 3px 0 rgba(78,132,56,.3)}
.smi-ic{width:30px;height:30px;display:flex}
.smi-ic svg{width:100%;height:100%;filter:drop-shadow(0 1.5px 0 rgba(107,68,35,.12))}
.smi-lb{line-height:1}
#side-menu-btn{border:3px solid #f7e3a0}
.hl-badge{display:inline-flex;width:32px;height:32px;background:#fffdf4;border:2.5px solid #d9c294;
border-radius:11px;padding:4px;margin-right:9px;vertical-align:-9px;box-shadow:0 2.5px 0 rgba(107,68,35,.15)}
.hl-badge svg{width:100%;height:100%}
.screen.active{animation:screenIn .32s cubic-bezier(.3,.9,.4,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-box{animation:modalPop .34s cubic-bezier(.34,1.4,.64,1)!important}
@keyframes modalPop{from{transform:translateY(46px) scale(.96);opacity:.4}to{transform:none;opacity:1}}
.modal-box::before{content:'';display:block;width:46px;height:5.5px;border-radius:99px;background:#d9c294;margin:-6px auto 12px}
.koin-badge{font-family:'Fredoka One',cursive;letter-spacing:.3px}
.loading-emoji{animation:petBob 1s ease-in-out infinite, loadGlow 2s ease-in-out infinite!important}
@keyframes loadGlow{0%,100%{filter:drop-shadow(0 4px 4px rgba(107,68,35,.2))}50%{filter:drop-shadow(0 8px 10px rgba(107,68,35,.32))}}
/* ===== HOMEPAGE (desain baru) ===== */
#screen-menu{padding:0!important;position:relative;overflow:hidden;
height:100vh;height:100dvh;max-height:100dvh;background:#FBF3E4}
#screen-menu.active{display:flex;flex-direction:column}
#screen-menu:not(.active){display:none!important}
body.on-menu{overflow:hidden!important;overscroll-behavior:none}
/* ---- 📬 pilih rumah di kotak surat (cuma muncul kalau rumahnya >1) ---- */
.srt-tab{display:flex;gap:6px;overflow-x:auto;padding:0 2px 8px;margin-bottom:2px;
-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none}
.srt-tab::-webkit-scrollbar{display:none}
.srt-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
border-radius:999px;cursor:pointer;font-family:inherit;font-size:.7rem;font-weight:900;
color:#8a7258;background:#fffdf4;border:2px solid #e4d5b4;white-space:nowrap}
.srt-chip i{font-style:normal;font-size:.6rem;min-width:16px;padding:1px 5px;border-radius:999px;
background:#E05555;color:#fff}
.srt-chip.on{background:linear-gradient(180deg,#FFF3D2,#F7E3A8);border-color:#D9A93A;color:#5A3D1E}
.srt-chip:active{transform:translateY(1px)}
/* ---- 🏘️ deret rumah (maks 5) di layar Rumah ---- */
.rmh-deret{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;
touch-action:pan-x;scrollbar-width:none}
.rmh-deret::-webkit-scrollbar{display:none}
.rmh-kartu{flex:0 0 auto;width:104px;min-height:82px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;padding:9px 7px;border-radius:14px;cursor:pointer;
background:#fffdf4;border:2.5px solid #e4d5b4;box-shadow:0 3px 0 rgba(107,68,35,.14);
font-family:inherit;color:#5A3D1E;text-align:center;line-height:1.15}
.rmh-kartu b{font-size:.7rem;font-weight:900;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmh-kartu small{font-size:.58rem;color:#8a7258;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmh-kartu .rmh-emo{font-size:1.5rem;line-height:1}
.rmh-kartu.on{background:linear-gradient(180deg,#FFF3D2,#F7E3A8);border-color:#D9A93A;
box-shadow:0 3px 0 rgba(180,130,30,.3)}
.rmh-kartu.tambah{border-style:dashed;background:rgba(255,253,244,.6);color:#8a7258}
.rmh-kartu:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(107,68,35,.14)}
/* Sabuk pengaman kedua buat "peta digeser -> halaman ke-refresh": selain
swipe-tutup punya Telegram (dimatiin di js/01 pakai disableVerticalSwipes),
WebView-nya sendiri punya pull-to-refresh kalau seretan sampai kelewat batas
atas. Dimatiin global — gak ada satu pun layar di app ini yang butuh. */
html,body{overscroll-behavior:none}
body.on-menu #screen-menu{position:fixed;inset:0}
/* --- panggung dunia --- */
.hb-adegan{flex:1;min-height:0;position:relative;overflow:hidden}
.hb-adegan::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
background:
radial-gradient(85% 55% at 76% 10%, rgba(255,226,158,.30), transparent 62%),
radial-gradient(120% 46% at 50% 108%, rgba(255,248,225,.20), transparent 58%)}
.hb-adegan::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
box-shadow:inset 0 -52px 64px -38px rgba(74,112,54,.34),
inset 0 34px 54px -34px rgba(255,255,255,.42),
inset 26px 0 44px -36px rgba(90,120,70,.20),
inset -26px 0 44px -36px rgba(90,120,70,.20)}
.hb-adegan svg.hb-latar{position:absolute;inset:0;width:100%;height:100%}
/* vignette homepage nyesuaiin latar tiap model rumah (dipasang hbLatarModel) */
.hb-adegan[data-hb-theme="pantai"]::after{box-shadow:inset 0 -52px 64px -38px rgba(180,150,80,.32),
inset 0 34px 54px -34px rgba(255,255,255,.45),inset 26px 0 44px -36px rgba(150,140,90,.18),inset -26px 0 44px -36px rgba(150,140,90,.18)}
.hb-adegan[data-hb-theme="hutan"]::after{box-shadow:inset 0 -52px 64px -38px rgba(30,60,35,.5),
inset 0 34px 54px -34px rgba(190,215,190,.3),inset 26px 0 44px -36px rgba(30,55,35,.3),inset -26px 0 44px -36px rgba(30,55,35,.3)}
.hb-adegan[data-hb-theme="kastil"]::after,.hb-adegan[data-hb-theme="penthouse"]::after{
box-shadow:inset 0 -52px 64px -38px rgba(30,22,55,.55),inset 0 34px 54px -34px rgba(200,180,230,.22),
inset 26px 0 44px -36px rgba(35,25,60,.34),inset -26px 0 44px -36px rgba(35,25,60,.34)}
.hb-adegan[data-hb-theme="apart"]::after{box-shadow:inset 0 -52px 64px -38px rgba(50,72,100,.34),
inset 0 34px 54px -34px rgba(255,255,255,.42),inset 26px 0 44px -36px rgba(60,85,115,.2),inset -26px 0 44px -36px rgba(60,85,115,.2)}
.hb-adegan[data-hb-theme="town"]::after{box-shadow:inset 0 -52px 64px -38px rgba(70,100,60,.3),
inset 0 34px 54px -34px rgba(255,255,255,.42),inset 26px 0 44px -36px rgba(80,105,80,.18),inset -26px 0 44px -36px rgba(80,105,80,.18)}
.hb-adegan[data-hb-theme="loft"]::after{box-shadow:inset 0 -52px 64px -38px rgba(90,60,35,.4),
inset 0 34px 54px -34px rgba(255,235,205,.4),inset 26px 0 44px -36px rgba(100,70,45,.24),inset -26px 0 44px -36px rgba(100,70,45,.24)}
.hb-adegan[data-hb-theme="kastil"]::before,.hb-adegan[data-hb-theme="penthouse"]::before{
background:radial-gradient(85% 55% at 76% 24%, rgba(255,214,170,.22), transparent 62%),
radial-gradient(120% 46% at 50% 108%, rgba(180,160,220,.14), transparent 58%)}
.hb-adegan[data-hb-theme="loft"]::before{
background:radial-gradient(85% 55% at 80% 18%, rgba(255,190,120,.34), transparent 62%),
radial-gradient(120% 46% at 50% 108%, rgba(255,225,190,.2), transparent 58%)}
.hb-adegan[data-hb-theme="hutan"]::before{
background:radial-gradient(85% 55% at 78% 14%, rgba(255,240,190,.2), transparent 62%),
radial-gradient(120% 46% at 50% 108%, rgba(210,235,200,.14), transparent 58%)}
/* --- kehidupan lingkungan (transform/opacity only) --- */
.hb-latar .sun{transform-box:fill-box;transform-origin:center;animation:hbsun 7s ease-in-out infinite}
@keyframes hbsun{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}
.hb-latar .cl{transform-box:fill-box;animation:hbcloud 17s ease-in-out infinite alternate}
.hb-latar .c1{animation-duration:19s}
.hb-latar .c2{animation-duration:24s;animation-delay:-8s}
.hb-latar .c3{animation-duration:15s;animation-delay:-5s;opacity:.9}
@keyframes hbcloud{from{transform:translateX(-9px)}to{transform:translateX(11px)}}
.hb-latar .birdfly{animation:hbfly 46s linear infinite}
.hb-latar .bf2{animation-duration:56s;animation-delay:-23s}
@keyframes hbfly{
0%{transform:translateX(-36px)}96%{transform:translateX(356px);opacity:1}
97%,100%{transform:translateX(356px);opacity:0}}
.hb-latar .bird{transform-box:fill-box;transform-origin:center;animation:yarnA .5s steps(1) infinite}
.hb-latar .bird .wB{opacity:0;animation:yarnB .5s steps(1) infinite}
@keyframes yarnA{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes yarnB{0%,49%{opacity:0}50%,100%{opacity:1}}
.hb-latar .smoke circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:hbpuff 4.6s linear infinite}
.hb-latar .smoke .p2{animation-delay:1.5s}.hb-latar .smoke .p3{animation-delay:3s}
@keyframes hbpuff{0%{transform:translate(0,0) scale(.45);opacity:0}
16%{opacity:.62}70%{opacity:.28}
100%{transform:translate(-5px,-36px) scale(1.75);opacity:0}}
.hb-latar .tree .canopy,.hb-latar .bush{transform-box:fill-box;transform-origin:50% 100%;animation:hbsway 6s ease-in-out infinite alternate}
.hb-latar .t2 .canopy{animation-duration:7.2s;animation-delay:-2.4s}
.hb-latar .bsh2{animation-duration:6.8s;animation-delay:-3s}
@keyframes hbsway{from{transform:rotate(-1.3deg)}to{transform:rotate(1.3deg)}}
.hb-latar .flower .head{transform-box:fill-box;transform-origin:50% 100%;animation:hbflower 3.8s ease-in-out infinite alternate}
.hb-latar .f2 .head{animation-duration:4.6s;animation-delay:-1.2s}
.hb-latar .f3 .head{animation-duration:4.1s;animation-delay:-2.1s}
@keyframes hbflower{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.hb-latar .tuft{transform-box:fill-box;transform-origin:50% 100%;animation:hbsway 4.8s ease-in-out infinite alternate}
.hb-latar .tB{animation-delay:-1.8s}.hb-latar .tC{animation-delay:-3.2s}.hb-latar .tD{animation-delay:-.9s}
.hb-latar .mote{transform-box:fill-box;opacity:0;animation:hbmote 16s linear infinite}
.hb-latar .m2{animation-duration:19s;animation-delay:-7s}
.hb-latar .m3{animation-duration:14s;animation-delay:-3s}
.hb-latar .m4{animation-duration:21s;animation-delay:-12s}
.hb-latar .m5{animation-duration:17s;animation-delay:-9s}
@keyframes hbmote{
0%{transform:translate(0,0);opacity:0}
12%{opacity:.75}72%{opacity:.4}
100%{transform:translate(9px,-118px);opacity:0}}
.hb-latar .bfly{position:static;animation:none;width:auto;height:auto;filter:drop-shadow(0 2px 2px rgba(90,60,25,.18))}
.hb-latar .bfly.bf1{animation:hbbf1 15s ease-in-out infinite alternate}
.hb-latar .bfly.bf2{animation:hbbf2 19s ease-in-out infinite alternate}
.hb-latar .bfly .wing{transform-box:fill-box;transform-origin:center;animation:hbwing .34s ease-in-out infinite alternate}
@keyframes hbwing{from{transform:scaleX(1)}to{transform:scaleX(.5)}}
@keyframes hbbf1{
0%{transform:translate(66px,352px) rotate(6deg)}
30%{transform:translate(120px,332px) rotate(-8deg)}
60%{transform:translate(88px,306px) rotate(5deg)}
100%{transform:translate(140px,330px) rotate(-6deg)}}
@keyframes hbbf2{
0%{transform:translate(232px,340px) rotate(-6deg)}
40%{transform:translate(196px,314px) rotate(7deg)}
75%{transform:translate(246px,300px) rotate(-5deg)}
100%{transform:translate(210px,338px) rotate(6deg)}}
/* --- profil papan kayu --- */
.hb-profil{position:absolute;left:14px;top:16px;z-index:3;display:flex;align-items:center;gap:10px;
background:linear-gradient(175deg,#FFFCF5,#FBF2DF);border:2px solid #D9C6A6;border-radius:17px;padding:7px 13px 7px 7px;
box-shadow:0 3px 0 #D9C6A6,0 8px 18px rgba(120,90,50,.14);cursor:pointer;text-align:left;
animation:hbInL .5s cubic-bezier(.3,1.4,.5,1) both .08s}
.hb-profil::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
width:9px;height:9px;border-radius:50%;background:#C9A97E;border:2px solid #B89468;
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5)}
.hb-profil:active{transform:translateY(2px);box-shadow:0 1px 0 #D9C6A6,0 4px 10px rgba(120,90,50,.12)}
.hb-foto{width:44px;height:44px;flex:0 0 44px;border-radius:13px;overflow:hidden;background:#F6C9D3;
border:2px solid #D9C6A6;position:relative;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.hb-foto .av-box{position:absolute;width:290%;height:290%;left:-95%;top:-52%}
.hb-nama{font-size:14.5px;font-weight:800;line-height:1.15;color:#6B5442}
.hb-sub{font-size:11px;font-weight:700;color:#9C8570}
.hb-koin{position:absolute;right:14px;top:16px;z-index:3;display:flex;align-items:center;gap:6px;
background:linear-gradient(175deg,#FFFCF5,#FBF2DF);border:2px solid #D9C6A6;border-radius:14px;padding:8px 12px;
font-size:13px;font-weight:800;color:#6B5442;box-shadow:0 3px 0 #D9C6A6,0 8px 18px rgba(120,90,50,.14);
overflow:hidden;animation:hbInR .5s cubic-bezier(.3,1.4,.5,1) both .14s}
.hb-koin::after{content:'';position:absolute;top:-45%;bottom:-45%;width:24%;left:-45%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);
transform:skewX(-18deg);animation:hbshine 5.4s ease-in-out infinite}
@keyframes hbshine{0%,68%{left:-48%}84%,100%{left:118%}}
.hb-koin svg{width:17px;height:17px}
/* --- tokoh + bayangan sinkron --- */
.hb-tokoh{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);z-index:2;
width:150px;height:210px;animation:hbInUp .55s cubic-bezier(.3,1.35,.5,1) both .05s,hbidle 4.4s ease-in-out 1.1s infinite}
.hb-tokoh .av-box{position:absolute;inset:0}
@keyframes hbidle{
0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
50%{transform:translateX(-50%) translateY(-4.5px) rotate(.7deg)}}
.hb-bayang{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:104px;height:17px;
border-radius:50%;background:rgba(120,96,70,.14);z-index:1;
animation:hbshdw 4.4s ease-in-out 1.1s infinite}
@keyframes hbshdw{
0%,100%{transform:translateX(-50%) scaleX(1);opacity:1}
50%{transform:translateX(-50%) scaleX(.92);opacity:.82}}
/* --- kartu arah kayu --- */
.hb-nav{padding:12px 14px 10px;display:flex;gap:11px}
.hb-kartu{flex:1;position:relative;border-radius:18px;
padding:13px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;
background:linear-gradient(178deg,#F7E9CC,#EDD6AC);
border:2px solid #CFAF80;cursor:pointer;
box-shadow:0 4px 0 #C4A273,inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(160,120,70,.22),0 10px 20px rgba(120,90,50,.12);
transition:transform .14s cubic-bezier(.34,1.4,.64,1),box-shadow .14s;
animation:hbInUp2 .5s cubic-bezier(.3,1.4,.5,1) both}
.hb-kartu::before{content:'';position:absolute;inset:4px;border-radius:12px;pointer-events:none;
background:repeating-linear-gradient(181deg,rgba(170,128,78,.075) 0 2px,transparent 2px 10px)}
.hb-kartu::after{content:'';position:absolute;top:7px;left:9px;right:9px;height:5px;pointer-events:none;
background:radial-gradient(circle 2.6px at 2.6px 2.6px,#B89468 98%,transparent),
radial-gradient(circle 2.6px at calc(100% - 2.6px) 2.6px,#B89468 98%,transparent);
filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.hb-kartu.pet{transform:rotate(-.7deg);animation-delay:.2s}
.hb-kartu.rumah{transform:rotate(.7deg);animation-delay:.27s}
.hb-kartu:active{transform:rotate(0deg) translateY(3px);
box-shadow:0 1px 0 #C4A273,inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(160,120,70,.22)}
.hb-ikon{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
border:2px solid rgba(201,169,126,.9);position:relative;overflow:hidden;
box-shadow:inset 0 -3px 0 rgba(140,95,45,.18),inset 0 2px 0 rgba(255,255,255,.55)}
.hb-ikon svg{width:38px;height:38px}
.hb-kartu.pet .hb-ikon{background:linear-gradient(180deg,#FADDC4,#F4CBA6)}
.hb-kartu.rumah .hb-ikon{background:linear-gradient(180deg,#D3E6F1,#BCD6E8)}
.hb-kartu b{font-size:14px;font-weight:800;color:#5E4732;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hb-kartu small{font-size:10.5px;font-weight:700;color:#97795A;margin-top:-3px}
/* --- kartu Car Paws: satu baris penuh, warnanya biru supaya beda dari Pet/Rumah --- */
.hb-nav.hb-paws{padding:0 14px 10px}
.hb-kartu.paws{flex-direction:row;justify-content:center;gap:11px;padding:10px 14px;
transform:rotate(0deg);animation-delay:.31s;
background:linear-gradient(178deg,#DCEEFB,#C2DFF4);border-color:#8FBEDE;
box-shadow:0 4px 0 #86B2D2,inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(70,120,160,.2),0 10px 20px rgba(60,110,160,.14)}
.hb-kartu.paws:active{transform:translateY(3px);
box-shadow:0 1px 0 #86B2D2,inset 0 2px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(70,120,160,.2)}
.hb-kartu.paws .hb-ikon{width:40px;height:40px;border-radius:13px;
background:linear-gradient(180deg,#EAF5FD,#CFE6F7);border-color:rgba(143,190,222,.9)}
.hb-kartu.paws .hb-ikon svg{width:26px;height:26px}
.hb-kartu.paws b{color:#2E5C7E;font-size:14px}
.hb-kartu.paws small{color:#5E89A8;margin-top:0}
.hb-lencana{position:absolute;top:6px;right:8px;background:#E05555;color:#fff;font-size:10px;
font-weight:800;font-style:normal;border-radius:999px;padding:1px 6px;
box-shadow:0 1px 0 rgba(150,40,40,.45)}
/* --- tombol menu bawah --- */
.hb-bawah{padding:0 14px calc(14px + env(safe-area-inset-bottom));display:flex;gap:10px}
.hb-menu{flex:1;background:linear-gradient(180deg,#D6E7D3,#C4DBc2);border:2px solid #9BBE9F;border-radius:16px;padding:11px;
display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:800;
color:#3E5C3C;box-shadow:0 3px 0 #93B791,inset 0 2px 0 rgba(255,255,255,.5);cursor:pointer;
transition:transform .14s,box-shadow .14s;animation:hbInUp2 .5s cubic-bezier(.3,1.4,.5,1) both .34s}
.hb-menu:active{transform:translateY(3px);box-shadow:0 0 0 #93B791,inset 0 2px 0 rgba(255,255,255,.5)}
.hb-menu svg{width:20px;height:20px}
/* --- koreografi masuk halaman --- */
@keyframes hbInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}
@keyframes hbInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes hbInUp{from{opacity:0;transform:translateX(-50%) translateY(26px) scale(.94)}
to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes hbInUp2{from{opacity:0;transform:translateY(20px) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}}
#screen-menu.active .hb-adegan svg.hb-latar{animation:hbScene .7s ease both}
@keyframes hbScene{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
body.on-menu #side-menu-btn,body.in-room #side-menu-btn{display:none!important}
.mn-back{position:fixed;left:10px;top:10px;z-index:99999}
/* ===== AVATAR (dipulihkan) ===== */
.av-box{position:relative;overflow:hidden}
.av-box img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.av-face{position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%}
.av-face .av-box{position:absolute;width:290%;height:290%;left:-95%;top:-58%}
.av-full{position:relative;width:100%;height:100%}
.av-full .av-box{position:absolute;inset:0}
#screen-avatar{padding:0!important;position:fixed;inset:0;z-index:250;display:none;
background:linear-gradient(180deg,#fdf3dd,#f0e6d0)}
#screen-avatar.on{display:flex;flex-direction:column;overflow:hidden}
.av-top{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#FFFDF8;border-bottom:2px solid #EADCC6}
.av-top b{flex:1;font-family:'Fredoka One',cursive;font-size:15px;color:#4a3524}
.av-stage{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;
background:radial-gradient(ellipse at 50% 38%,#FFFCF4,#F2DEC4)}
#avPrev{position:absolute}
.av-pan{flex:0 0 auto;background:#FFFDF8;border-top:2px solid #EADCC6;height:42vh;display:flex;flex-direction:column;overflow:hidden}
.av-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 6px;scrollbar-width:none;flex:0 0 auto}
.av-tabs::-webkit-scrollbar{display:none}
.av-tab{flex:0 0 auto;padding:7px 12px;border-radius:13px;border:2px solid #EADCC6;background:#FFFDF8;
font-size:11.5px;font-weight:800;color:#8A6C4E;white-space:nowrap;cursor:pointer}
.av-tab.on{background:linear-gradient(160deg,#F7B267,#EE8F3C);border-color:#D2761F;color:#fff}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;
padding:0 10px 16px;overflow-y:auto;flex:1 1 auto;min-height:0}
.av-op{height:66px;border-radius:14px;border:2.5px solid #EADCC6;background:#FFFDF8;overflow:hidden;position:relative;cursor:pointer}
.av-op.on{border-color:#E58BA8;box-shadow:0 0 0 3px rgba(229,139,168,.25)}
.av-op .av-box{position:absolute;width:280%;height:280%;left:-90%;top:-56%}
.av-op .sw{position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(0,0,0,.1)}
.av-op .nn{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;opacity:.4}
/* ===== POPUP ===== */
.pop-mask{position:fixed;inset:0;z-index:2147483000;background:rgba(45,30,15,.55);
display:none;align-items:center;justify-content:center;padding:20px}
.pop-mask.on{display:flex}
.pop{width:100%;max-width:340px;max-height:86vh;overflow-y:auto;
background:linear-gradient(180deg,#fffdf6,#f9efd9);border:3px solid #fff;border-radius:24px;
padding:20px 18px;text-align:center;box-shadow:0 10px 0 #c9ab78,0 20px 34px rgba(60,40,20,.4)}
.pop h3{font-family:'Fredoka One',cursive;font-size:19px;color:#4a3524;margin-bottom:6px}
.pop p{font-size:13px;color:#6b5340;line-height:1.6;margin-bottom:14px}
.pop .row{display:flex;gap:9px}
.pop .row .wbtn{flex:1}
/* ===== LAYAR PROFIL & RUMAH ===== */
#screen-profile,#screen-house{padding:0!important;position:relative;overflow-y:auto;height:100vh;
background:linear-gradient(180deg,#fdf3dd 0%,#f7ead0 55%,#e9f2d8 100%)}
.pg{padding:64px 16px 40px;max-width:480px;margin:0 auto}
.pg-h{font-family:'Fredoka One',cursive;font-size:22px;color:#4a3524;text-align:center;
text-shadow:0 2px 0 #fffdf4;margin-bottom:4px}
.pg-s{text-align:center;font-size:12.5px;font-weight:800;color:#8a7258;margin-bottom:18px}
.pnl{background:linear-gradient(180deg,#fffdf6,#f9efd9);border:3px solid #fff;border-radius:22px;
padding:16px;box-shadow:0 7px 0 #c9ab78,0 14px 22px rgba(120,90,50,.2);margin-bottom:16px}
.pf-ava{width:120px;height:120px;margin:0 auto 12px;border-radius:50%;padding:6px;
background:linear-gradient(180deg,#ffe9c8,#f3c98f);
box-shadow:0 8px 0 #b98a52,0 14px 22px rgba(70,50,30,.3),inset 0 2px 0 rgba(255,255,255,.85)}
.pf-ava>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
background:radial-gradient(circle at 50% 30%,#fff6e6,#ffd9e6);border:3px solid #fffdf6}
.pf-ava svg{width:88%;height:88%;margin-top:6%}
.fld{display:block;font-size:11.5px;font-weight:800;color:#8a7258;margin:10px 0 5px}
.inp{width:100%;padding:12px 14px;border-radius:14px;border:2.5px solid #e8d9c0;
background:#fffdf8;font-size:14px;font-weight:700;color:#4a3524;font-family:inherit}
.wbtn{width:100%;padding:14px;border:0;border-radius:18px;cursor:pointer;
font-family:'Fredoka One',cursive;font-size:16px;letter-spacing:.6px;color:#fff6e2;
background:linear-gradient(180deg,#d9a15e,#c88742 46%,#a96a2c);
border-top:3px solid #f0c48a;border-bottom:4px solid #8a5420;
box-shadow:0 7px 0 #7d4a1b,0 12px 18px rgba(60,38,16,.3),inset 0 2px 0 rgba(255,226,180,.5);
text-shadow:0 2px 0 rgba(105,60,20,.9)}
.wbtn:active{transform:translateY(5px);box-shadow:0 2px 0 #7d4a1b}
.wbtn.g{background:linear-gradient(180deg,#a8d98a,#8ac46a 46%,#6aa84f);
border-top-color:#cfeab4;border-bottom-color:#4d7f36;box-shadow:0 7px 0 #4d7f36}
.wbtn.r{background:linear-gradient(180deg,#f0a0a0,#e07a7a 46%,#c25a5a);
border-top-color:#ffd0d0;border-bottom-color:#9c4444;box-shadow:0 7px 0 #9c4444}
.wbtn.s{padding:11px;font-size:14px}
.aff-row{display:flex;align-items:center;gap:9px;margin-top:6px}
.aff-bar{flex:1;height:15px;border-radius:99px;background:#f0e2c0;border:2.5px solid #c9ab78;overflow:hidden}
.aff-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffb3c9,#f2779c)}
.aff-lb{font-size:12px;font-weight:800;color:#a8628a;white-space:nowrap}
.aff-pick{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.aff-op{padding:8px 13px;border-radius:13px;border:2.5px solid #e8d9c0;background:#fffdf8;
font-size:12px;font-weight:800;color:#8a7258;cursor:pointer}
.aff-op.on{background:linear-gradient(180deg,#ffd0e2,#f7a8c8);border-color:#e07aa4;color:#7a2f52}
.hs-art{height:170px;border-radius:18px;overflow:hidden;border:3px solid #fff;margin-bottom:12px;
box-shadow:0 5px 0 #c9ab78;background:#DFF1FA}
.hs-art svg{width:100%;height:100%;display:block}
.hs-md{background:#FFF9EF;border:2.5px solid #EAD9C2;border-radius:14px;padding:8px;cursor:pointer;text-align:center}
.hs-md:active{transform:scale(.98)}
.hs-md-art{height:110px;border-radius:10px;overflow:hidden;border:2px solid #fff;margin-bottom:6px}
.hs-md-art svg{width:100%;height:100%;display:block}
.hs-md-nm{font-family:'Fredoka One',cursive;font-size:.82rem;color:#7A5A3A}
.hs-md-harga{font-size:.72rem;font-weight:800;color:#C98A2A;margin-top:2px}
.hint{font-size:12px;color:#8a7258;line-height:1.6;text-align:center;margin-top:10px}
.pcode{display:flex;gap:8px;margin-top:8px}
.pcode .inp{flex:1}
.pt-card{display:flex;align-items:center;gap:12px;cursor:pointer}
.pt-ava{width:56px;height:56px;flex:0 0 56px;border-radius:50%;padding:4px;
background:linear-gradient(180deg,#ffe9c8,#f3c98f);box-shadow:0 4px 0 #b98a52}
.pt-ava>span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
background:radial-gradient(circle at 50% 30%,#fff6e6,#ffd9e6);border:2.5px solid #fffdf6}
.pt-nm{font-family:'Fredoka One',cursive;font-size:15px;color:#4a3524}
.pt-st{font-size:11.5px;font-weight:800;color:#a8628a;margin-top:2px}
.pf-opt{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;margin-bottom:10px;
border-radius:18px;border:2.5px solid #e8d9c0;background:linear-gradient(170deg,#fffdf8,#f8eedf);
cursor:pointer;text-align:left;box-shadow:0 4px 0 #d9c6a4}
.pf-opt:active{transform:translateY(3px);box-shadow:0 1px 0 #d9c6a4}
.pf-opt b{display:block;font-family:'Fredoka One',cursive;font-size:14.5px;color:#4a3524}
.pf-opt small{display:block;font-size:11.5px;color:#8a7258;margin-top:1px}
.pf-opt .ic{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;font-size:20px;
background:linear-gradient(180deg,#fff6e2,#f2d8ac);box-shadow:inset 0 -3px 0 rgba(140,95,45,.25)}
/* ===== RUANGAN LAYAR PENUH ===== */
#screen-room{padding:0!important;position:fixed;inset:0;z-index:120;display:none;background:#0e0b08;overflow:hidden}
#screen-room.on{display:block}
.rm-stage{position:absolute;inset:0}
.rm-stage svg{position:absolute;inset:0;width:100%;height:100%}
.rm-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:8px;
padding:12px 12px 26px;background:linear-gradient(180deg,rgba(30,20,10,.5),transparent)}
.rm-x{width:42px;height:42px;flex:0 0 42px;border-radius:15px;border:3px solid rgba(255,255,255,.85);
background:linear-gradient(180deg,#fffdf6,#f3e2c4);display:grid;place-items:center;
box-shadow:0 4px 0 #b98a52;cursor:pointer;font-size:19px}
.rm-nm{font-family:'Fredoka One',cursive;font-size:17px;color:#fffdf4;
text-shadow:0 2px 0 rgba(80,50,20,.8),0 4px 10px rgba(0,0,0,.4)}
/* Pita tab ini selebar layar dan nempel di bawah — seretan mendatar di sini
yang kelewat ujung dulu diterusin ke shell Telegram Android dan kebaca
gestur tutup mini app (layar geser ke kiri, pita hitam + "❮" di kanan).
contain = berhenti di sini, jangan dirambatin ke luar. */
.rm-tabs{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;gap:8px;
overflow-x:auto;padding:14px 12px 18px;scrollbar-width:none;
overscroll-behavior-x:contain;touch-action:pan-x;
background:linear-gradient(0deg,rgba(30,20,10,.55),transparent)}
.rm-tabs::-webkit-scrollbar{display:none}
.rm-tab{flex:0 0 auto;padding:9px 15px;border-radius:15px;cursor:pointer;
font-family:'Fredoka One',cursive;font-size:13px;color:#6b4f3c;
background:linear-gradient(180deg,#fffdf6,#f3e2c4);border:3px solid rgba(255,255,255,.8);box-shadow:0 4px 0 #b98a52}
.rm-tab.on{background:linear-gradient(180deg,#d9a15e,#a96a2c);color:#fff6e2;border-color:#f0c48a;box-shadow:0 4px 0 #7d4a1b}
.rm-act{position:absolute;right:12px;bottom:82px;z-index:6;display:flex;flex-direction:column;gap:9px}
.rm-fab{width:52px;height:52px;border-radius:18px;border:3px solid rgba(255,255,255,.85);
background:linear-gradient(180deg,#ffe9a8,#f0b447);display:grid;place-items:center;font-size:22px;
box-shadow:0 5px 0 #c98d2a;cursor:pointer}
.rm-hud{position:absolute;right:12px;top:14px;z-index:7;display:flex;align-items:center;gap:5px;
padding:7px 13px;border-radius:99px;background:linear-gradient(165deg,#ffe9a8,#ffd06a);
border:2.5px solid #d9a03c;font-size:13px;font-weight:800;color:#6b4a12;box-shadow:0 4px 0 #c98d2a}
.rm-chat{position:absolute;right:12px;top:62px;z-index:7;width:46px;height:46px;border-radius:16px;
border:3px solid rgba(255,255,255,.85);background:linear-gradient(180deg,#fffdf6,#f3e2c4);
display:grid;place-items:center;font-size:20px;box-shadow:0 4px 0 #b98a52;cursor:pointer}
.rm-cam{position:absolute;right:12px;top:116px;z-index:7;width:46px;height:46px;border-radius:16px;
border:3px solid rgba(255,255,255,.85);background:linear-gradient(180deg,#fffdf6,#f3e2c4);
display:grid;place-items:center;font-size:20px;box-shadow:0 4px 0 #b98a52;cursor:pointer}
body.foto .rm-top,body.foto .rm-tabs,body.foto .rm-acts,body.foto .rm-act,
body.foto .rm-hud,body.foto .rm-chat,body.foto .rm-cam,body.foto .fbar,body.foto .rm-tag{display:none!important}
.rm-acts{position:absolute;left:12px;bottom:78px;z-index:6;display:flex;flex-direction:column;gap:8px}
.rm-abtn{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:16px;cursor:pointer;
font-family:'Fredoka One',cursive;font-size:13px;color:#fff6e2;border:0;
background:linear-gradient(180deg,#d9a15e,#a96a2c);border-top:3px solid #f0c48a;box-shadow:0 5px 0 #7d4a1b}
.rm-abtn b{font-size:17px}
.rm-char{position:absolute;z-index:4;width:168px;height:236px;pointer-events:auto;cursor:pointer;
transition:left .55s cubic-bezier(.3,1,.5,1), bottom .55s cubic-bezier(.3,1,.5,1)}
.rm-char svg,.rm-char .av-full{width:100%;height:100%}
.rm-char>div{filter:drop-shadow(0 6px 7px rgba(60,40,20,.32));animation:chBob 2.6s ease-in-out infinite}
.rm-char.p2>div{animation-delay:.6s}
@keyframes chBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.rm-tag{position:absolute;left:50%;top:-16px;transform:translateX(-50%);white-space:nowrap;
font-family:'Fredoka One',cursive;font-size:11px;color:#fffdf4;
background:rgba(80,52,26,.72);border-radius:99px;padding:3px 10px;pointer-events:none;z-index:5}
.rm-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.rm-dot.on{background:#43d17c;box-shadow:0 0 5px #43d17c}
.rm-dot.off{background:#b3b3b3}
.rm-pet{position:absolute;z-index:4;cursor:pointer;image-rendering:pixelated;
filter:drop-shadow(0 5px 5px rgba(60,40,20,.32))}
.rm-pet .tag{position:absolute;left:50%;top:-15px;transform:translateX(-50%);white-space:nowrap;
font-family:'Fredoka One',cursive;font-size:10.5px;color:#fffdf4;
background:rgba(80,52,26,.72);border-radius:99px;padding:2px 9px}
.rm-pet .spr{width:100%;height:100%;background-repeat:no-repeat;background-position:0 0}
.mess{position:absolute;z-index:5;width:58px;height:58px;border:0;background:none;padding:0;cursor:pointer;
animation:messPulse 1.8s ease-in-out infinite}
.mess svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(60,40,20,.35))}
@keyframes messPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}
.coin-fly{position:absolute;z-index:9;pointer-events:none;font-family:'Fredoka One',cursive;
font-size:17px;color:#FFE07A;text-shadow:0 2px 0 #a9700f;animation:coinFly 1.05s ease-out forwards}
@keyframes pelukNaik{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:1;transform:translateY(-18px) scale(1.1)}100%{transform:translateY(-90px) scale(.9);opacity:0}}
@keyframes coinFly{0%{transform:translateY(0) scale(.6);opacity:0}
25%{transform:translateY(-16px) scale(1.15);opacity:1}100%{transform:translateY(-56px) scale(1);opacity:0}}
.bubble{position:absolute;left:50%;top:-46px;transform:translateX(-50%);max-width:150px;
background:#fffdf6;border:2.5px solid #e8d9c0;border-radius:14px;padding:6px 10px;
font-size:12px;font-weight:700;color:#4a3524;box-shadow:0 4px 0 #c9ab78;z-index:9}
.bubble::after{content:'';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
border:7px solid transparent;border-top-color:#e8d9c0}
.chatbox{position:fixed;left:0;right:0;bottom:0;z-index:2147483001;display:flex;gap:8px;padding:12px;
background:linear-gradient(180deg,rgba(255,253,246,.96),#f7ead0);border-top:3px solid #fff;
transform:translateY(110%);transition:transform .25s}
.chatbox.on{transform:none}
.chatbox input{flex:1;padding:12px 14px;border-radius:14px;border:2.5px solid #e8d9c0;
background:#fffdf8;font-size:14px;font-weight:700;color:#4a3524;font-family:inherit}
/* ===== FURNITURE ===== */
.fi{position:absolute;z-index:3;touch-action:none;transform-origin:center}
.fi svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.fi.sel{filter:drop-shadow(0 0 0 #F0A05A) drop-shadow(0 0 4px #F0A05A)}
.fi.drag{filter:drop-shadow(0 8px 8px rgba(70,50,30,.4))}
.fbar{position:absolute;z-index:20;display:flex;gap:5px;padding:5px;border-radius:15px;
background:linear-gradient(180deg,#fffdf6,#f3e2c4);border:2.5px solid rgba(255,255,255,.85);
box-shadow:0 4px 0 #b98a52;opacity:0;pointer-events:none;
transform:translate(-50%,-100%) scale(.9);transition:opacity .15s,transform .15s}
.fbar.on{opacity:1;pointer-events:auto;transform:translate(-50%,-100%) scale(1)}
.fbar button{width:34px;height:34px;border:0;border-radius:11px;background:#FFF3E0;font-size:15px;cursor:pointer}
.fbar button.del{background:#FFE3E0}
.fsheet{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;max-height:56vh;display:flex;flex-direction:column;
background:linear-gradient(180deg,#fffdf6,#f7ead0);border-top:3px solid #fff;border-radius:24px 24px 0 0;
box-shadow:0 -10px 26px rgba(60,40,20,.34);transform:translateY(103%);transition:transform .3s}
.fsheet.on{transform:none}
.fs-head{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;flex:0 0 auto}
.fs-head b{flex:1;font-family:'Fredoka One',cursive;font-size:15px;color:#4a3524}
.fs-cats{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none;flex:0 0 auto}
.fs-cats::-webkit-scrollbar{display:none}
.fs-cat{flex:0 0 auto;padding:6px 12px;border-radius:12px;border:2.5px solid #e8d9c0;background:#fffdf8;
font-size:11.5px;font-weight:800;color:#8a7258;cursor:pointer}
.fs-cat.on{background:linear-gradient(180deg,#d9a15e,#a96a2c);border-color:#8a5420;color:#fff6e2}
.fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px;padding:0 12px 20px;
overflow-y:auto;flex:1 1 auto;min-height:0}
.fs-it{height:96px;border-radius:15px;border:2.5px solid #e8d9c0;background:linear-gradient(170deg,#fffdf8,#f8eedf);
display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:5px}
.fs-it svg{width:44px;height:44px;overflow:visible}
.fs-it small{font-size:9px;font-weight:800;color:#8a7258;margin-top:3px}
.fs-it .hrg{font-size:9.5px;font-weight:800;color:#a9782c;margin-top:1px}
/* ===== POLISH GLOBAL ===== */
/* transisi antar halaman yang lebih dalam tapi tetap ringkas */
@keyframes fadeUp{from{opacity:0;transform:translateY(15px) scale(.992)}to{opacity:1;transform:none}}
.screen.active{animation:fadeUp .34s cubic-bezier(.25,.9,.35,1)}
#screen-menu.active{animation:none}
/* toast hangat sesuai identitas game */
.toast{
background:linear-gradient(176deg,#FFFDF4,#F8EED8);color:#5B4229;
border:2px solid #E6D5B4;
box-shadow:0 4px 0 #D9C6A4,0 14px 26px rgba(120,85,45,.24);
}
.toast.show{animation:toastPop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes toastPop{
0%{transform:translateX(-50%) translateY(-16px) scale(.94)}
100%{transform:translateX(-50%) translateY(0) scale(1)}}
/* gelembung bicara pet muncul dengan pop */
.room-speech{
transform:translateX(-50%) scale(.86);
transform-origin:bottom center;
transition:opacity .26s ease,transform .26s cubic-bezier(.34,1.56,.64,1);
}
.room-speech.show{transform:translateX(-50%) scale(1)}
/* entri daftar toko & inventori: halus, tidak berlebihan */
@keyframes itemIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.shop-item,.inv-item{animation:itemIn .3s cubic-bezier(.3,1.2,.5,1) both}
.shop-item:nth-child(2),.inv-item:nth-child(2){animation-delay:.03s}
.shop-item:nth-child(3),.inv-item:nth-child(3){animation-delay:.06s}
.shop-item:nth-child(4),.inv-item:nth-child(4){animation-delay:.09s}
.shop-item:nth-child(5),.inv-item:nth-child(5){animation-delay:.12s}
.shop-item:nth-child(n+6),.inv-item:nth-child(n+6){animation-delay:.15s}
/* fokus keyboard yang jelas (aksesibilitas) */
button:focus-visible,[role="button"]:focus-visible{
outline:3px solid rgba(238,148,64,.55);outline-offset:2px}
/* hormati preferensi gerak minimal */
.hb-kartu:active .hb-ikon svg{transform:scale(.88) rotate(-5deg)}
.hb-kartu .hb-ikon svg{transition:transform .16s cubic-bezier(.34,1.6,.64,1)}
@media (prefers-reduced-motion:reduce){
.blob,
.hb-latar .sun,.hb-latar .cl,.hb-latar .birdfly,.hb-latar .bird,
.hb-latar .smoke circle,.hb-latar .tree .canopy,.hb-latar .bush,
.hb-latar .flower .head,.hb-latar .tuft,.hb-latar .mote,
.hb-latar .bfly,.hb-latar .bfly .wing,.hb-latar .bfly.bf1,.hb-latar .bfly.bf2,
.hb-tokoh,.hb-bayang,.hb-koin::after{animation:none!important}
.screen.active,#screen-menu.active .hb-adegan svg.hb-latar{animation-duration:.001s!important}
}
/* ===== INTERAKSI FURNITURE + GAME 3D ===== */
.fx-bub{position:absolute;z-index:14;width:16px;height:16px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95),rgba(190,228,246,.55) 58%,rgba(140,200,232,.35));
border:1px solid rgba(255,255,255,.75);animation:fxNaik ease-out forwards}
@keyframes fxNaik{0%{transform:translateY(0) scale(.5);opacity:0}18%{opacity:.92}
100%{transform:translateY(-130px) scale(1.15);opacity:0}}
/* sheet aksi furniture */
.asheet{position:fixed;left:0;right:0;bottom:0;z-index:2147483200;background:linear-gradient(180deg,#fffdf6,#f7ead0);
border-top:3px solid #fff;border-radius:24px 24px 0 0;box-shadow:0 -10px 26px rgba(60,40,20,.34);
transform:translateY(103%);transition:transform .28s;padding:12px 16px calc(18px + env(safe-area-inset-bottom))}
.asheet.on{transform:none}
.as-grab{width:44px;height:5px;border-radius:99px;background:#e2d2b4;margin:0 auto 10px}
.as-title{font-family:'Fredoka One',cursive;font-size:15.5px;color:#4a3524;display:flex;align-items:center;gap:8px}
.as-desc{font-size:12.5px;font-weight:700;color:#8a7258;margin:4px 0 12px}
.as-row{display:flex;align-items:center;gap:11px;background:#fffdf8;border:2.5px solid #e8d9c0;
border-radius:16px;padding:11px 12px;margin-bottom:9px;cursor:pointer;transition:transform .12s}
.as-row:active{transform:scale(.97)}
.as-ico{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;font-size:23px;
background:linear-gradient(180deg,#fbe8d8,#f3d7bd);border:2px solid #e8d3b2}
.as-row b{display:block;font-size:14px;color:#4a3524}
.as-row small{font-size:11px;font-weight:800;color:#97795a}
.as-chip{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:900;color:#6b8f4e;
background:rgba(185,223,160,.35);border:2px solid #cfe6bb;border-radius:99px;padding:4px 9px;white-space:nowrap}
.as-chip.off{color:#b06a5c;background:rgba(240,150,143,.18);border-color:#f0cfc7}
/* overlay game 3D */
#fx3d{position:fixed;inset:0;z-index:2147483600;background:radial-gradient(120% 90% at 50% 8%,#4a3856 0%,#241a30 55%,#14101e 100%);
opacity:0;transition:opacity .25s;user-select:none;-webkit-user-select:none;touch-action:none}
#fx3d.on{opacity:1}
#fx3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:9px;
padding:calc(10px + env(safe-area-inset-top)) 14px 10px;pointer-events:none}
.fx-x{pointer-events:auto;width:40px;height:40px;flex:0 0 40px;border-radius:14px;border:2px solid rgba(255,255,255,.28);
background:rgba(20,14,28,.55);color:#ffe9c9;font-size:17px;font-weight:900;cursor:pointer;backdrop-filter:blur(4px)}
.fx-ttl{font-family:'Fredoka One',cursive;font-size:15px;color:#ffedd2;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.fx-chip{margin-left:auto;font-size:11.5px;font-weight:900;color:#ffd98a;background:rgba(20,14,28,.55);
border:2px solid rgba(255,217,138,.4);border-radius:99px;padding:6px 11px;backdrop-filter:blur(4px)}
.fx-hint{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;text-align:center;
font-size:12.5px;font-weight:800;color:#cdbde0;text-shadow:0 2px 5px rgba(0,0,0,.5);padding:0 30px;pointer-events:none}
.fx-result{position:absolute;left:50%;top:50%;z-index:8;transform:translate(-50%,-50%) scale(.6);opacity:0;
width:min(84vw,330px);background:linear-gradient(180deg,#fffdf6,#f9efd8);border:3px solid #fff;
border-radius:26px;box-shadow:0 18px 44px rgba(0,0,0,.45);text-align:center;padding:22px 20px 18px;
transition:transform .32s cubic-bezier(.34,1.55,.64,1),opacity .28s;pointer-events:none}
.fx-result.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.fx-r-emoji{font-size:52px;line-height:1;animation:petBob 1s ease-in-out infinite}
.fx-r-judul{font-family:'Fredoka One',cursive;font-size:19px;color:#4a3524;margin-top:8px}
.fx-r-koin{font-size:26px;font-weight:900;color:#6aa84f;margin-top:5px}
.fx-r-sub{font-size:12px;font-weight:800;color:#97795a;margin-top:5px}
.fx-r-btns{margin-top:15px;display:flex;flex-direction:column;gap:8px}
.fx-r-btns .wbtn{width:100%}
/* ==================== PETA RUMAH 2D ==================== */
#peta-overlay{position:fixed;inset:0;z-index:300;display:none;background:#8FBF78;
font-family:'Nunito',sans-serif;user-select:none;-webkit-user-select:none}
#peta-overlay.on{display:block}
#peta-top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:10px;
padding:calc(10px + env(safe-area-inset-top)) 12px 10px;pointer-events:none}
#peta-top>*{pointer-events:auto}
.peta-x{width:44px;height:44px;border-radius:16px;border:3px solid rgba(255,255,255,.9);
background:linear-gradient(165deg,#fffdf6,#f3e2c4);box-shadow:0 4px 0 #b98a52,0 8px 14px rgba(120,90,50,.28);
font-size:22px;font-weight:900;color:#6B4F3C;cursor:pointer;line-height:1;padding:0;display:grid;place-items:center}
.peta-title{flex:1;text-align:center;background:rgba(255,253,244,.92);border:3px solid #fffdf4;
border-radius:99px;padding:8px 16px;font-family:'Fredoka One',cursive;font-size:.95rem;color:#5a3d1e;
box-shadow:0 4px 0 rgba(107,68,35,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peta-ico{position:relative;width:44px;height:44px;border-radius:16px;border:3px solid rgba(255,255,255,.9);
background:linear-gradient(165deg,#fffdf6,#f3e2c4);box-shadow:0 4px 0 #b98a52,0 8px 14px rgba(120,90,50,.28);
font-size:20px;cursor:pointer;padding:0;display:grid;place-items:center}
.peta-ico svg{display:block}
#peta-btn-lap i{min-width:14px;height:14px;top:-4px;right:-4px;font-size:.5rem;line-height:1;
animation:petaBob .9s ease-in-out infinite alternate}
.peta-ico i{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:99px;background:#e05555;
color:#fff;font-style:normal;font-size:.62rem;font-weight:900;display:grid;place-items:center;padding:0 5px;
border:2px solid #fff}
#peta-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;
background:radial-gradient(ellipse at 50% 42%,#6FC3E8 0%,#3F98CE 55%,#2F7FB4 100%)}
#peta-langit{position:absolute;inset:0;pointer-events:none;z-index:6;transition:background .6s ease}
#peta-viewport.malam #peta-hujan line{stroke:#BFE4F5}
#peta-hujan{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
#peta-viewport.drag{cursor:grabbing}
#peta-world{position:absolute;left:0;top:0;transform-origin:0 0}
#peta-svg{display:block}
.peta-omb{animation:petaOmbIso 2.8s ease-in-out infinite alternate}
/* HP kentang: matiin animasi dekoratif biar peta gak ngelag */
#peta-overlay.hemat .peta-omb,#peta-overlay.hemat .peta-buih,#peta-overlay.hemat .peta-buih2,
#peta-overlay.hemat .peta-percik,#peta-overlay.hemat .peta-kelopak,#peta-overlay.hemat .peta-debu,
#peta-overlay.hemat .peta-awanb,#peta-overlay.hemat .peta-terbang,#peta-overlay.hemat .peta-buih2,
#peta-overlay.hemat .peta-kunang,#peta-overlay.hemat .peta-api{animation:none!important}
@keyframes petaOmbIso{from{opacity:.18}to{opacity:.75}}
.peta-buih{animation:petaBuihIso 1.8s linear infinite}
@keyframes petaBuihIso{to{stroke-dashoffset:-56}}
#peta-world.peta-anim{transition:transform .5s cubic-bezier(.3,1,.4,1)}
.peta-zona{position:absolute;border-radius:40px}
.peta-laut{position:absolute;left:0;right:0;top:2120px;height:280px;overflow:hidden;
background:linear-gradient(#6FC3E8,#3F98CE)}
.peta-laut:before{content:'';position:absolute;inset:-20px;
background:repeating-linear-gradient(95deg,transparent 0 110px,rgba(255,255,255,.30) 110px 150px,transparent 150px 260px);
animation:petaOmbak 10s linear infinite}
.peta-laut:after{content:'';position:absolute;left:0;right:0;top:0;height:14px;
background:repeating-linear-gradient(90deg,#fff 0 26px,rgba(255,255,255,.55) 26px 52px);opacity:.85;border-radius:0 0 50% 50%/0 0 14px 14px}
@keyframes petaOmbak{from{transform:translateX(0)}to{transform:translateX(-260px)}}
.peta-pasir{position:absolute;left:0;right:0;top:1958px;height:170px;background:linear-gradient(#F6E9C8,#EEDCAf)}
.peta-jalan{position:absolute;background:#E8DCC0;border-top:4px solid #D8C8A4;border-bottom:4px solid #D8C8A4}
.peta-jalan:after{content:'';position:absolute;left:0;right:0;top:50%;height:4px;
background:repeating-linear-gradient(90deg,#fff0 0 34px,#C9B78E 34px 74px)}
.peta-jalan.t:after{left:50%;right:auto;top:0;bottom:0;width:4px;height:auto;
background:repeating-linear-gradient(180deg,#fff0 0 34px,#C9B78E 34px 74px)}
.peta-bukit{position:absolute;left:120px;top:130px;width:1060px;height:640px;border-radius:50%;
background:radial-gradient(ellipse at 45% 32%,#CDBBDE,#B39FC9 70%);box-shadow:inset 0 -18px 0 rgba(90,60,120,.15)}
.peta-hutan-tutup{position:absolute;left:2020px;top:110px;width:1140px;height:820px;border-radius:60px;
background:radial-gradient(ellipse at 60% 40%,rgba(70,110,70,.5),rgba(60,100,62,.65))}
.peta-deko{position:absolute;pointer-events:none;line-height:0;filter:drop-shadow(0 3px 2px rgba(60,40,20,.25))}
.peta-rambu{position:absolute;transform:translateX(-50%);text-align:center;pointer-events:none}
.peta-rambu .bd{display:inline-block;background:linear-gradient(#C89A62,#B08350);border:3px solid #8A6238;
border-radius:10px;padding:4px 12px;font-size:.78rem;font-weight:900;color:#fff8ea;white-space:nowrap;
box-shadow:0 3px 0 rgba(90,60,30,.35)}
.peta-rambu .tg{width:8px;height:26px;background:#8A6238;margin:0 auto;border-radius:3px}
.peta-awan{position:absolute;pointer-events:none;opacity:.9;animation:petaAwan linear infinite}
@keyframes petaAwan{from{transform:translateX(-420px)}to{transform:translateX(3620px)}}
.peta-rumah{position:absolute;transform:translate(-50%,-6px);z-index:5;cursor:pointer;text-align:center}
.pr-3d{position:relative;line-height:0;filter:drop-shadow(0 6px 5px rgba(50,35,15,.30))}
.pr-3d svg{display:block}
.pr-3d .lapis{position:absolute;left:0;top:0}
.pr-3d .lapis.l1{transform:translate(5px,-3px);filter:brightness(.8) saturate(.9)}
.pr-3d .lapis.l2{transform:translate(10px,-6px);filter:brightness(.62) saturate(.8)}
.pr-3d .lapis.l3{transform:translate(15px,-9px);filter:brightness(.45) saturate(.7)}
.pr-3d .depan{position:relative}
.pr-bayang{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:150px;height:26px;
background:radial-gradient(ellipse at center,rgba(60,40,20,.30),transparent 68%);pointer-events:none}
.pr-halaman{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:190px;height:34px;
background:radial-gradient(ellipse at center,rgba(255,255,240,.28),transparent 72%);pointer-events:none}
.peta-rumah .pr-board{position:relative;margin:0 auto;width:max-content;max-width:150px;
background:linear-gradient(#C89A62,#B08350);border:3px solid #8A6238;border-radius:9px;
padding:2px 9px 3px;box-shadow:0 3px 0 rgba(90,60,30,.35);text-align:left}
.peta-rumah .pr-board b{display:block;font-size:.6rem;color:#fff8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px}
.peta-rumah .pr-board small{display:block;font-size:.52rem;color:#F3E3BD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px}
.peta-rumah.ku .pr-3d .depan{filter:drop-shadow(0 0 6px rgba(255,224,122,.9))}
.peta-rumah .pr-me{position:absolute;left:50%;top:-30px;transform:translateX(-50%);background:#E05555;color:#fff;
font-size:.6rem;font-weight:900;padding:3px 10px;border-radius:99px;border:2.5px solid #fff;white-space:nowrap;
animation:petaPin 1.2s ease-in-out infinite alternate;z-index:4}
@keyframes petaPin{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-7px)}}
.peta-rumah .pr-surat{position:absolute;right:-14px;top:-14px;z-index:4;background:#fff;border:3px solid #E05555;color:#E05555;
border-radius:99px;font-size:.9rem;padding:3px 8px;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.2);animation:petaBob .8s ease-in-out infinite alternate}
@keyframes petaBob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
.peta-npc{position:absolute;pointer-events:none;line-height:0;animation:petaJalan var(--d) linear infinite alternate}
.peta-npc .flip{animation:petaBalik var(--d) linear infinite alternate}
.peta-npc svg{animation:petaBob2 .5s ease-in-out infinite alternate}
@keyframes petaJalan{from{transform:translateX(0)}to{transform:translateX(var(--w))}}
@keyframes petaBalik{0%,46%{transform:scaleX(1)}54%,100%{transform:scaleX(-1)}}
@keyframes petaBob2{from{transform:translateY(0)}to{transform:translateY(-2.6px)}}
.peta-bebek{position:absolute;pointer-events:none;animation:petaBebek 26s ease-in-out infinite alternate}
@keyframes petaBebek{from{transform:translateX(0)}to{transform:translateX(500px)}}
.peta-note{position:absolute;transform:translate(-50%,-100%);background:#fff;color:#4a3524;
font-size:.68rem;font-weight:800;padding:6px 12px;border-radius:14px;border:2.5px solid #E8DCC0;
box-shadow:0 3px 8px rgba(60,40,20,.18);max-width:150px;text-align:center;z-index:6;line-height:1.25}
.peta-note:after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.peta-kunang{animation:petaKunang 2.6s ease-in-out infinite}
@keyframes petaKunang{0%,100%{opacity:0}50%{opacity:.95}}
/* --- dekor kota: animasi ringan (CSS, bukan SMIL) --- */
.peta-percik{transform-box:fill-box;transform-origin:center;animation:petaPercik 1.7s ease-in-out infinite}
@keyframes petaPercik{0%{transform:translateY(7px) scale(.55);opacity:.1}45%{transform:translateY(-7px) scale(1);opacity:.95}100%{transform:translateY(11px) scale(.5);opacity:0}}
.peta-kelopak{transform-box:fill-box;transform-origin:center;animation:petaKelopak 6.5s linear infinite}
@keyframes petaKelopak{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:.85}100%{transform:translate(-17px,60px) rotate(220deg);opacity:0}}
.peta-api{transform-box:fill-box;transform-origin:center bottom;animation:petaApi .5s ease-in-out infinite alternate}
@keyframes petaApi{from{transform:scale(.82,.88)}to{transform:scale(1.1,1.18)}}
.peta-umbul{transform-box:fill-box;transform-origin:top center;animation:petaUmbul 2.6s ease-in-out infinite alternate}
@keyframes petaUmbul{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.peta-awanb{pointer-events:none;animation:petaAwanB 74s linear infinite}
@keyframes petaAwanB{from{transform:translateX(-680px)}to{transform:translateX(3400px)}}
.peta-debu{transform-box:fill-box;animation:petaDebu 7s ease-in-out infinite}
@keyframes petaDebu{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.3;transform:translateY(-14px)}}
.peta-terbang{transform-box:fill-box;transform-origin:center;animation:petaTerbang 11s ease-in-out infinite alternate}
@keyframes petaTerbang{from{transform:translate(0,0)}to{transform:translate(150px,-30px)}}
.peta-terjun{animation:petaTerjun 1s linear infinite}
@keyframes petaTerjun{to{stroke-dashoffset:-48}}
.peta-buih2{transform-box:fill-box;transform-origin:center;animation:petaBuih2 3.4s ease-in-out infinite}
@keyframes petaBuih2{0%,100%{transform:scale(.72);opacity:.12}50%{transform:scale(1.06);opacity:.34}}
/* --- 🚦 lampu merah distrik perkotaan (1 siklus 9 detik · .tmB = fase lawan) --- */
.peta-tm-r{transform-box:fill-box;transform-origin:center;animation:petaTMR 9s linear infinite}
@keyframes petaTMR{0%,50%{opacity:1}56%,94%{opacity:.14}100%{opacity:1}}
.peta-tm-y{transform-box:fill-box;transform-origin:center;opacity:.14;animation:petaTMY 9s linear infinite}
@keyframes petaTMY{0%,44%{opacity:.14}50%,56%{opacity:1}62%,100%{opacity:.14}}
.peta-tm-g{transform-box:fill-box;transform-origin:center;opacity:.14;animation:petaTMG 9s linear infinite}
@keyframes petaTMG{0%,88%{opacity:.14}94%,100%{opacity:1}}
.tmB.peta-tm-r,.tmB.peta-tm-y,.tmB.peta-tm-g{animation-delay:-4.5s}
/* hemat: lampu merah diam (merah nyala) — gak ada animasi */
#peta-overlay.hemat .peta-tm-r,#peta-overlay.hemat .peta-tm-y,#peta-overlay.hemat .peta-tm-g,
#peta-overlay.hemat .peta-percik,#peta-overlay.hemat .peta-kelopak{animation:none!important}
#peta-overlay.hemat .peta-tm-r{opacity:1}#peta-overlay.hemat .peta-tm-y,#peta-overlay.hemat .peta-tm-g{opacity:.14}
.peta-ayun{animation:petaAyun 2.8s ease-in-out infinite alternate}
@keyframes petaAyun{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
.peta-jungkat{animation:petaJungkat 2.4s ease-in-out infinite alternate}
@keyframes petaJungkat{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.peta-kincir{animation:petaKincir 9s linear infinite}
@keyframes petaKincir{to{transform:rotate(360deg)}}
.peta-mercu{transform-box:fill-box;transform-origin:center;animation:petaMercu 3.2s ease-in-out infinite}
@keyframes petaMercu{0%,100%{opacity:.14;transform:scale(.8)}50%{opacity:.5;transform:scale(1.25)}}
#gm-bar{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;z-index:2147482000;
display:flex;align-items:center;gap:8px;background:linear-gradient(165deg,#fffdf6,#f3e2c4);
border:2.5px solid #d9c6a6;border-radius:16px;padding:10px 12px;font-size:.78rem;font-weight:800;color:#6B5442;
box-shadow:0 4px 0 #c9ab78,0 10px 20px rgba(120,90,50,.2);font-family:'Nunito',sans-serif;
animation:gmBarIn .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes gmBarIn{from{transform:translateY(-90px);opacity:0}to{transform:none;opacity:1}}
.gm-bar-join{border:none;background:linear-gradient(180deg,#7ecb63,#5aa848);color:#fff;font-weight:900;
font-family:'Nunito',sans-serif;font-size:.75rem;padding:8px 14px;border-radius:99px;cursor:pointer;
box-shadow:0 2px 0 #3f7a30;white-space:nowrap}
.gm-bar-join:active{transform:translateY(2px);box-shadow:none}
.gm-bar-x{cursor:pointer;font-size:15px;opacity:.6;padding:0 2px}
.peta-meteor-jatuh{position:absolute;width:16px;height:16px;border-radius:50%;background:#FFE07A;z-index:8;pointer-events:none;
box-shadow:-30px 30px 0 -4px rgba(255,224,122,.5),-60px 60px 0 -8px rgba(255,224,122,.25),0 0 18px 8px rgba(255,224,122,.9);
animation:petaMeteorJatuh 1.4s cubic-bezier(.45,0,1,1) forwards}
@keyframes petaMeteorJatuh{from{transform:translate(-430px,-550px);opacity:0}18%{opacity:1}to{transform:translate(0,0);opacity:1}}
.peta-meteor-bulat{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;z-index:8;cursor:pointer;
background:radial-gradient(circle,rgba(255,224,122,.95),rgba(255,180,60,.35) 60%,transparent 72%);
border:3px solid #FFE07A;display:grid;place-items:center;animation:petaMeteorPulse 1.1s ease-in-out infinite alternate}
@keyframes petaMeteorPulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.22)}}
.gm-ov{position:fixed;inset:0;z-index:400;background:rgba(40,28,15,.55);display:grid;place-items:center;padding:18px}
.gm-card{position:relative;width:min(400px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(175deg,#FFFCF5,#FBF2DF);
border:3px solid #d9c6a6;border-radius:22px;padding:18px 16px;box-shadow:0 6px 0 #c9ab78,0 18px 40px rgba(60,40,20,.3);
font-family:'Nunito',sans-serif;color:#4a3524}
.gm-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:2px solid #d9c6a6;
background:#fff;font-weight:900;color:#8a7258;cursor:pointer;font-size:16px;line-height:1}
.gm-judul{font-family:'Fredoka One',cursive;font-size:1.15rem;text-align:center}
.gm-sub{font-size:.72rem;color:#8a7258;text-align:center;margin:2px 0 10px}
.gm-body{margin-top:6px}
body.peta-on #home-plus,body.peta-on .mn-back,body.peta-on .hb-koin,body.peta-on #app-header,body.in-room .mn-back{display:none!important}
.peta-fab svg{width:26px;height:26px;display:block;margin:0 auto}
.peta-ico svg{width:22px;height:22px;display:block}
.peta-title svg{width:18px;height:18px;vertical-align:-4px;margin-right:5px}
.pr-me svg{width:11px;height:11px;vertical-align:-1px}
.pr-surat svg{width:14px;height:14px;vertical-align:-2px}
.pr-board small svg{width:10px;height:10px;vertical-align:-1px}
#peta-hint{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);
z-index:20;background:rgba(60,40,20,.65);color:#fff8ea;font-size:.72rem;font-weight:800;
padding:7px 16px;border-radius:99px;pointer-events:none;white-space:nowrap;transition:opacity .5s}
#peta-hint.hide{opacity:0}
/* spanduk ajakan acara lapangan — nempel di layar, bukan ikut geser peta */
#peta-lap-ajak{position:absolute;left:12px;right:12px;top:calc(66px + env(safe-area-inset-top));
z-index:21;display:flex;align-items:center;gap:9px;cursor:pointer;
background:linear-gradient(180deg,#FFF3D2,#F4C542);border:3px solid #fffdf4;border-radius:16px;
padding:9px 14px;box-shadow:0 4px 0 rgba(107,68,35,.28),0 10px 20px rgba(90,60,20,.22);
font-family:'Nunito',sans-serif;animation:petaAjak .45s ease-out}
#peta-lap-ajak b{font-family:'Fredoka One',cursive;font-size:.8rem;color:#5A3D1E;white-space:nowrap}
#peta-lap-ajak span{flex:1;min-width:0;font-size:.74rem;font-weight:800;color:#7a5a2e;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#peta-lap-ajak a{text-decoration:none;color:#7a5a2e;border-bottom:2px dotted rgba(122,90,46,.45);
padding-bottom:1px;cursor:pointer}
#peta-lap-ajak a:active{color:#4a3524}
#peta-lap-ajak i{flex:0 0 auto;font-style:normal;font-size:.74rem;font-weight:900;color:#fff6e2;
background:linear-gradient(180deg,#8FC46E,#5E9440);border-radius:99px;padding:4px 11px;
box-shadow:0 2px 0 #4d7f36}
#peta-lap-ajak:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(107,68,35,.28)}
@keyframes petaAjak{from{transform:translateY(-14px);opacity:0}to{transform:translateY(0);opacity:1}}
#peta-overlay.hemat #peta-lap-ajak{animation:none}
.peta-fab{position:absolute;right:12px;bottom:calc(186px + env(safe-area-inset-bottom));z-index:6;
width:62px;height:62px;border-radius:22px;border:3px solid #fffdf4;cursor:pointer;
background:linear-gradient(165deg,#fffdf6,#f3e2c4);box-shadow:0 5px 0 #b98a52,0 10px 16px rgba(120,90,50,.28);
font-size:24px;line-height:1;display:grid;place-items:center;align-content:center;gap:1px;padding:0}
.peta-fab small{font-size:.52rem;font-weight:900;color:#6B4F3C}
.peta-fab i{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:99px;background:#e05555;
color:#fff;font-style:normal;font-size:.62rem;font-weight:900;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.peta-fab:active{transform:translateY(3px);box-shadow:0 2px 0 #b98a52}
@keyframes tutPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes tutIn{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
/* --- adegan tidur: kepala nempel di bantal, selimut berhenti di bawah dagu --- */
.td-bedwrap{position:relative;display:inline-block;margin:6px;height:172px;vertical-align:bottom}
.td-mattress{position:absolute;left:0;top:58px;width:100%;height:100px;
background:#FFFDF6;border:3px solid #8A6C4E;border-radius:18px;
box-shadow:inset 0 -12px 0 #EADFCB}
.td-pillow{position:absolute;left:50%;top:66px;transform:translateX(-50%);width:calc(100% - 26px);max-width:180px;height:30px;
background:#FFEFD9;border:2.5px solid #C9A97E;border-radius:12px;z-index:2}
/* wadah kepala (div polos dari tampilTidur) ditaruh persis di atas bantal */
.td-bedwrap>div:not([class]){position:absolute;left:0;top:44px;width:100%;z-index:3;align-items:flex-end}
.td-head{position:relative;width:56px;height:56px;margin:0;
filter:drop-shadow(0 3px 3px rgba(60,40,20,.32));
animation:tdNapasKepala 3.4s ease-in-out infinite}
.td-head:nth-child(2){animation-delay:-1.5s}
.td-selimut{position:absolute;left:2px;top:104px;width:calc(100% - 4px);height:56px;z-index:4;
background:repeating-linear-gradient(180deg,#F4A9B8 0 12px,#EE97A9 12px 24px);
border:3px solid #D67E92;border-bottom:none;border-radius:16px 16px 0 0;
box-shadow:inset 0 6px 0 rgba(255,255,255,.35);
animation:tdNaik 1s cubic-bezier(.3,1.3,.5,1) both, tdNapas 3.4s ease-in-out 1s infinite}
@keyframes tdNaik{from{top:150px}to{top:104px}}
@keyframes tdNapas{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-4px) scaleY(1.04)}}
@keyframes tdNapasKepala{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(-1deg)}}
/* 💤 tiga gelembung mengambang, nggak lompat keluar kasur lagi */
.td-zz{position:absolute;right:2px;top:24px;font-size:20px;z-index:6;
animation:tdZz 2.8s ease-in-out infinite}
.td-zz::before,.td-zz::after{content:'💤';position:absolute;left:-4px;top:0;font-size:.72em;
animation:tdZz 2.8s ease-in-out infinite}
.td-zz::before{animation-delay:.9s}
.td-zz::after{animation-delay:1.8s;left:8px;font-size:.55em}
@keyframes tdZz{
0%{transform:translate(0,6px) scale(.6);opacity:0}
22%{opacity:.95}
100%{transform:translate(12px,-38px) scale(1.05);opacity:0}}
@keyframes affNaik{from{transform:scale(.7) rotate(-8deg)}to{transform:scale(1.15) rotate(6deg)}}
.aff-heart-rain{display:flex;justify-content:center;gap:7px;margin:10px 0 4px;opacity:.95}
.aff-heart-rain svg{animation:affH .9s ease-in-out infinite alternate}
.aff-heart-rain svg:nth-child(2n){animation-delay:.22s}
.aff-heart-rain svg:nth-child(3n){animation-delay:.44s}
@keyframes affH{from{transform:translateY(0) scale(1)}to{transform:translateY(-7px) scale(1.12)}}
/* ==================== 🎪 LAPANGAN BERMAIN DESA (js/10-lapangan.js) ==================== */
#lap-page{position:fixed;inset:0;height:100dvh;z-index:340;display:none;font-family:'Nunito',sans-serif;
background:linear-gradient(180deg,#cfe9f7 0%,#dff0d8 34%,#f6ecd3 100%);
flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none}
#lap-page.on{display:flex}
body.lap-on #app-header,body.lap-on .hb-koin,body.lap-on #home-plus,body.lap-on .peta-fab{display:none!important}
#lap-yt{position:absolute;left:-9999px;top:0;width:300px;height:170px;opacity:.01;pointer-events:none}
.lap-top{flex:0 0 auto;display:flex;align-items:center;gap:9px;
padding:calc(9px + env(safe-area-inset-top)) 11px 9px;background:rgba(255,253,244,.72);
border-bottom:2.5px solid rgba(201,171,120,.5)}
.lap-x{min-width:44px;height:40px;padding:0 12px;border-radius:14px;border:2.5px solid rgba(255,255,255,.92);
background:linear-gradient(165deg,#fffdf6,#f3e2c4);box-shadow:0 3px 0 #b98a52;
font-family:'Fredoka One',cursive;font-size:19px;color:#6B4F3C;cursor:pointer;line-height:1;
display:grid;place-items:center}
.lap-x.lap-out{font-size:12.5px;letter-spacing:.4px}
.lap-x:active{transform:translateY(3px);box-shadow:0 0 0 #b98a52}
.lap-judul{flex:1;text-align:center;font-family:'Fredoka One',cursive;font-size:.95rem;color:#5a3d1e;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* --- bar musik: nempel di atas, kelihatan terus walau lagi main --- */
.lap-musbar{display:none}
.lap-musbar.on{display:flex;align-items:center;gap:7px;flex:0 0 auto;
padding:7px 11px;background:rgba(48,32,58,.88);color:#fff8ea}
.lap-musbar .lap-nada{animation:lapNada 1.6s ease-in-out infinite}
@keyframes lapNada{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
.lap-musbar .lap-jd{flex:1;min-width:0;font-size:.74rem;font-weight:900;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap-musbar small{opacity:.6;font-size:.62rem;font-weight:800;white-space:nowrap}
.lap-musbar button{border:none;border-radius:11px;padding:5px 10px;cursor:pointer;
font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:900;
background:rgba(255,255,255,.2);color:#fff8ea}
.lap-musbar button.g{background:#6aa84f}
.lap-musbar button.r{background:#c25a5a}
/* --- strip pemain --- */
.lap-orang{flex:0 0 auto;display:flex;align-items:center;gap:6px;overflow-x:auto;
padding:8px 11px;background:rgba(255,253,244,.55);border-bottom:2px solid rgba(201,171,120,.35);
scrollbar-width:none}
.lap-orang::-webkit-scrollbar{display:none}
.lap-cnt{flex:0 0 auto;font-size:.68rem;font-weight:900;color:#8a7258;padding-right:4px;white-space:nowrap}
.lap-p{flex:0 0 auto;display:flex;align-items:center;gap:5px;background:#fffdf6;
border:2.5px solid #e8dcc0;border-radius:99px;padding:3px 9px 3px 3px}
.lap-p.aku{border-color:#8ac46a}
.lap-p.draw{border-color:#e0a83c;background:#fff6e0}
.lap-p b{font-size:.7rem;font-weight:900;color:#5a3d1e;max-width:88px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap-p i{font-style:normal;font-size:.66rem;font-weight:900;color:#fff;background:#e0a83c;
border-radius:99px;padding:1px 6px}
.lap-p em{font-style:normal;font-size:.72rem}
.lap-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 22px;
color:#fffdf4;font-size:.68rem;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.25)}
/* --- area tengah --- */
.lap-isi{flex:1 1 auto;min-height:0;overflow-y:auto;padding:11px 12px 4px;-webkit-overflow-scrolling:touch}
.lap-card{background:linear-gradient(180deg,#fffdf6,#f9efd9);border:3px solid #fff;border-radius:20px;
padding:14px;box-shadow:0 5px 0 #c9ab78,0 10px 18px rgba(120,90,50,.16);margin-bottom:13px}
.lap-h{display:flex;align-items:center;gap:6px;font-family:'Fredoka One',cursive;
font-size:.98rem;color:#4a3524;margin-bottom:8px}
.lap-ikon{width:23px;height:23px;flex:0 0 auto;display:block}
.lap-mini{font-size:.74rem;font-weight:700;color:#8a7258;line-height:1.55}
.lap-now{display:flex;flex-direction:column;background:rgba(217,194,148,.2);border-radius:12px;
padding:8px 11px;margin-bottom:9px}
.lap-now b{font-size:.82rem;color:#5a3d1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap-now small{font-size:.66rem;font-weight:800;color:#8a7258}
.lap-row2{display:flex;gap:7px}
.lap-row2 .wbtn{flex:1;width:auto}
.lap-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.lap-chip{padding:7px 15px;border-radius:12px;border:2.5px solid #e8d9c0;background:#fffdf8;
font-size:.8rem;font-weight:900;color:#8a7258;cursor:pointer}
.lap-chip.on{background:linear-gradient(180deg,#cdeab4,#a8d98a);border-color:#6aa84f;color:#3d6a2a}
.lap-kosong{text-align:center;padding:26px 16px;color:#6b5340}
.lap-kosong b{display:block;font-size:.95rem;margin:6px 0 4px;color:#4a3524}
.lap-papan{margin-top:10px;text-align:left}
.lap-papan>div{display:flex;justify-content:space-between;background:#f7efe2;border-radius:10px;
padding:6px 11px;margin-bottom:5px;font-size:.78rem;font-weight:800;color:#6B4F3C}
/* --- papan gambar --- */
.lap-gbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;
font-size:.74rem;font-weight:900;color:#6b5340}
.lap-wkt{font-size:.95rem;font-weight:900;color:#d05555}
/* tombol undang di baris atas layar game — kecil, biar gak makan tinggi layar */
.lap-undang{flex:0 0 auto;border:2px solid #c9ab78;border-radius:99px;cursor:pointer;
background:linear-gradient(180deg,#fffdf6,#f3e2c4);color:#6b5340;
font-family:'Nunito',sans-serif;font-size:.68rem;font-weight:900;padding:4px 10px;
box-shadow:0 2px 0 rgba(107,68,35,.22);white-space:nowrap}
.lap-undang:active{transform:translateY(2px);box-shadow:none}
/* ---------- 🕵️🔗 GAME LAPANGAN TAMBAHAN (js/13) ---------- */
.lg2-kata{display:flex;flex-direction:column;align-items:center;text-align:center;
background:linear-gradient(180deg,#FFF3D2,#F4D98A);border:3px solid #fffdf4;border-radius:16px;
padding:10px 14px;margin-bottom:9px;font-size:.72rem;font-weight:800;color:#7a5a2e;
box-shadow:0 4px 0 rgba(107,68,35,.22)}
.lg2-kata b{font-family:'Fredoka One',cursive;font-size:1.35rem;color:#4a3524;letter-spacing:1px;
line-height:1.25;margin:1px 0}
.lg2-kata small{font-size:.68rem;font-weight:700;color:#9c7b45}
.lg2-kata.mw{background:linear-gradient(180deg,#EDE7F6,#C8BBE0);color:#4A3B6B}
.lg2-kata.mw b,.lg2-kata.mw small{color:#3A2E58}
.lg2-kata.sk{background:linear-gradient(180deg,#E8F5DE,#B9DFA0);color:#3d6a2a}
.lg2-kata.sk u{text-decoration:none;background:#fffdf4;border-radius:6px;padding:0 5px;color:#4e8438}
.lg2-pesan{background:rgba(217,194,148,.28);border-radius:11px;padding:7px 11px;margin-bottom:9px;
font-size:.75rem;font-weight:800;color:#6b5340;text-align:center}
.lg2-daftar{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.lg2-daftar.rapat{gap:5px}
.lg2-orang{position:relative;background:#fffdf6;border:2.5px solid #ecdcbe;border-radius:14px;
padding:8px 11px}
.lg2-orang.kini{border-color:#F4C542;box-shadow:0 0 0 3px rgba(244,197,66,.28)}
.lg2-orang.mati{opacity:.55;background:#f3ece0}
.lg2-nm{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:900;color:#4a3524}
.lg2-desk{font-size:.74rem;font-weight:700;color:#8a7258;margin-top:2px;word-break:break-word}
.lg2-desk em{color:#b8a58a}
.lg2-peran{font-style:normal;font-size:.6rem;font-weight:900;border-radius:99px;padding:2px 7px;
background:#DCE8CF;color:#3d6a2a}
.lg2-peran.uc{background:#F6C9C9;color:#9c3a3a}
.lg2-peran.mw{background:#DDD3F0;color:#4A3B6B}
.lg2-suara{font-style:normal;font-size:.6rem;font-weight:900;color:#9c7b45;
background:rgba(244,197,66,.28);border-radius:99px;padding:2px 7px}
.lg2-nyawa{margin-left:auto;font-style:normal;font-size:.72rem;letter-spacing:-1px}
.lg2-vote{position:absolute;right:9px;top:50%;transform:translateY(-50%);cursor:pointer;
border:2.5px solid #c9ab78;border-radius:99px;padding:5px 13px;font-family:'Nunito',sans-serif;
font-size:.7rem;font-weight:900;color:#6b5340;background:linear-gradient(180deg,#fffdf6,#f3e2c4);
box-shadow:0 2px 0 rgba(107,68,35,.22)}
.lg2-vote.on{background:linear-gradient(180deg,#A8D98A,#6AA84F);color:#fff6e2;border-color:#4d7f36}
.lg2-giliranmu{background:linear-gradient(180deg,#E8F5DE,#C6E8AE);border:2.5px solid #A8D68C;
border-radius:13px;padding:8px 12px;margin-bottom:6px;font-size:.75rem;font-weight:800;
color:#3d6a2a;text-align:center}
.lg2-nunggu{background:rgba(217,194,148,.24);border-radius:13px;padding:9px 12px;margin-bottom:8px;
font-size:.76rem;font-weight:800;color:#6b5340;text-align:center}
.lg2-inrow{display:flex;gap:6px;margin-top:4px}
.lg2-inrow{margin-bottom:10px}
#lg2-in{flex:1;min-width:0;padding:10px 13px;border:2.5px solid #d9c294;border-radius:13px;
font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:700;color:#4a3524;
background:#fffdf8;outline:none}
.lg2-rantai{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:8px}
.lg2-rantai i{font-style:normal;font-size:.68rem;font-weight:800;color:#6b5340;
background:rgba(217,194,148,.3);border-radius:99px;padding:3px 9px}
/* ---------- 📣 menu pasang pajangan (baliho / spanduk / kembang api) ---------- */
.pjg-kartu{background:#fffdf6;border:2.5px solid #ecdcbe;border-radius:16px;padding:11px 12px;
margin-bottom:9px}
.pjg-h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.pjg-ik{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
font-size:1.25rem;background:rgba(217,194,148,.28)}
.pjg-h>div{flex:1;min-width:0;display:flex;flex-direction:column}
.pjg-h b{font-size:.86rem;font-weight:900;color:#4a3524}
.pjg-h small{font-size:.68rem;font-weight:700;color:#8a7258;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjg-h i{flex:0 0 auto;font-style:normal;font-size:.68rem;font-weight:900;color:#8a7258;
background:rgba(217,194,148,.3);border-radius:99px;padding:3px 9px}
.pjg-tag{text-align:center;font-size:.72rem;font-weight:800;border-radius:11px;padding:7px 10px}
.pjg-tag.ku{background:rgba(138,196,106,.22);color:#3d6a2a}
.pjg-tag.penuh{background:rgba(224,85,85,.14);color:#9c3a3a}
.pjg-prev{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:0 0 auto;
border:4px solid #fffdf4;box-shadow:0 4px 0 rgba(107,68,35,.22)}
.pjg-prev.kosong{display:grid;place-items:center;background:rgba(217,194,148,.25);
border:3px dashed #c9ab78;color:#8a7258;font-size:.68rem;font-weight:900;
text-align:center;line-height:1.35}
.lg2-pesan.salah{background:rgba(224,85,85,.14);color:#9c3a3a}
/* daftar room yang lagi buka di lobi lapangan */
.lg2-roomlist{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.lg2-room{display:flex;align-items:center;gap:9px;background:#fffdf6;border:2.5px solid #ecdcbe;
border-radius:14px;padding:8px 10px}
.lg2-room-i{flex:0 0 auto;width:26px;height:26px}
.lg2-room-i .lap-ikon{width:26px;height:26px}
.lg2-room-t{flex:1;min-width:0;display:flex;flex-direction:column}
.lg2-room-t b{font-size:.8rem;font-weight:900;color:#4a3524}
.lg2-room-t small{font-size:.68rem;font-weight:700;color:#8a7258;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg2-room-b{flex:0 0 auto;cursor:pointer;border:2.5px solid #4d7f36;border-radius:99px;
padding:6px 14px;font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:900;
color:#fff6e2;background:linear-gradient(180deg,#A8D98A,#6AA84F);box-shadow:0 2px 0 #4d7f36}
.lg2-room-b.mati{background:#ddd2bd;border-color:#c9ab78;color:#8a7258;box-shadow:none}
.lg2-kode{display:inline-block;margin:2px auto 6px;font-size:.64rem;font-weight:900;color:#8a7258;
letter-spacing:1.4px;background:rgba(217,194,148,.3);border-radius:99px;padding:4px 12px}
.lg2-kode b{font-family:'Fredoka One',cursive;font-size:.9rem;color:#4a3524;letter-spacing:3px;margin-left:5px}
.lg2-duakata{display:flex;gap:8px;margin:8px 0 2px}
.lg2-duakata>div{flex:1;display:flex;flex-direction:column;background:rgba(217,194,148,.24);
border-radius:12px;padding:7px 6px}
.lg2-duakata small{font-size:.62rem;font-weight:800;color:#8a7258}
.lg2-duakata b{font-family:'Fredoka One',cursive;font-size:.92rem;color:#4a3524;line-height:1.2}
.lg2-duakata .uc{background:rgba(224,85,85,.14)}
.lg2-duakata .uc b{color:#9c3a3a}
.lap-kata{background:rgba(217,194,148,.22);border-radius:11px;padding:7px 11px;text-align:center;
margin-bottom:7px;font-size:.74rem;font-weight:800;color:#8a7258}
.lap-kata b{font-size:.92rem;letter-spacing:1.2px;color:#4a3524}
.lap-kata.info{background:rgba(142,203,232,.2)}
/* waktu habis: bar kata jadi papan jawaban selama LAP_REVEAL detik */
.lap-kata.reveal{background:linear-gradient(180deg,#FFE9A8,#F4C542);color:#5A3D1E;
border:2.5px solid #D9A93A;font-weight:900;animation:lapReveal .4s ease-out}
.lap-kata.reveal b{color:#4a3524;font-size:1rem;letter-spacing:1.6px}
@keyframes lapReveal{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.lap-kata button{border:none;background:none;color:#3f7ea3;font-size:.68rem;font-weight:900;
cursor:pointer;margin-left:6px;font-family:'Nunito',sans-serif}
.lap-cvwrap{position:relative}
#lap-cv{width:100%;aspect-ratio:1/1;display:block;border-radius:16px;border:3px solid #e8dcc0;
background:#fffdf4;touch-action:none;box-shadow:0 4px 0 #c9ab78}
/* pesan besar di TENGAH papan tulis — paling kebaca pas semua lagi melototin kanvas */
.lap-cvmsg{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%) scale(.92);
pointer-events:none;opacity:0;transition:opacity .22s ease,transform .22s ease;
text-align:center;font-family:'Fredoka One',cursive;font-size:1.15rem;line-height:1.35;
color:#4a3524;background:rgba(255,253,244,.93);border:3px solid #fffdf4;border-radius:18px;
padding:14px 12px;box-shadow:0 6px 0 rgba(107,68,35,.2),0 14px 26px rgba(90,60,20,.18)}
.lap-cvmsg.on{opacity:1;transform:translateY(-50%) scale(1)}
.lap-cvmsg i{font-style:normal;display:inline-block;margin-top:4px;letter-spacing:2px;
font-size:1.45rem;color:#c8901f}
/* nempel di dasar area gulir: palet warna gak ketutup kotak chat lagi */
.lap-tool{position:sticky;bottom:0;z-index:3;display:flex;gap:5px;align-items:center;
flex-wrap:wrap;margin:8px 0 2px;padding:7px 9px;border-radius:13px;
background:rgba(255,253,244,.95);border:2px solid rgba(201,171,120,.55);
box-shadow:0 3px 10px rgba(90,61,30,.16)}
.lap-w.on{outline:3px solid #4a3524;outline-offset:2px}
.lap-sz.on{box-shadow:0 0 0 3px #4a3524}
.lap-w{width:25px;height:25px;border-radius:50%;border:2.5px solid #fff;cursor:pointer;
box-shadow:0 1px 4px rgba(0,0,0,.22)}
.lap-sz{border-radius:50%;background:#4a3524;border:2px solid #fff;cursor:pointer;
box-shadow:0 1px 3px rgba(0,0,0,.3)}
.lap-tx{cursor:pointer;font-size:.85rem;font-weight:900;margin-left:3px}
.lap-tx.b{color:#3f7ea3}
.lap-tx.r{color:#d05555}
.lap-stat{text-align:center;font-weight:900;font-size:.82rem;margin-top:7px;min-height:19px}
/* --- chat --- */
.lap-chatwrap{flex:0 0 auto;display:flex;flex-direction:column;
background:rgba(255,253,244,.9);border-top:2.5px solid rgba(201,171,120,.5);
padding:7px 10px calc(7px + env(safe-area-inset-bottom))}
.lap-chat-jd{font-size:.64rem;font-weight:900;color:#a08b6d;letter-spacing:.4px;
margin-bottom:3px;display:flex;align-items:center;gap:5px}
.lap-chat-jd.room{color:#4e8438}
.lap-chat-jd.room:after{content:'terpisah dari chat lapangan';font-weight:700;font-size:.6rem;
color:#a08b6d;letter-spacing:0}
.lap-chat{height:15vh;max-height:124px;min-height:52px;overflow-y:auto;
font-size:.76rem;line-height:1.5;-webkit-overflow-scrolling:touch}
.lap-c{margin-bottom:2px;color:#5a3d1e;word-break:break-word}
.lap-c.aku{color:#3d6a2a}
.lap-c.sis{text-align:center;font-size:.68rem;font-weight:800;color:#a08b6d;margin:4px 0}
.lap-c.ok{background:rgba(138,196,106,.22);border-radius:8px;padding:3px 8px;font-weight:800;color:#3d6a2a}
.lap-inrow{display:flex;gap:6px;margin-top:6px}
#lap-in{flex:1;min-width:0;padding:10px 13px;border:2.5px solid #d9c294;border-radius:13px;
font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:700;color:#4a3524;
background:#fffdf8;outline:none}
.lap-send{flex:0 0 auto;border:none;border-radius:13px;padding:0 15px;cursor:pointer;
font-family:'Fredoka One',cursive;font-size:.82rem;color:#fff6e2;
background:linear-gradient(180deg,#a8d98a,#6aa84f);box-shadow:0 3px 0 #4d7f36}
.lap-send:active{transform:translateY(2px);box-shadow:0 1px 0 #4d7f36}
/* ---------- 🎬 NOBAR: panggung bioskop layar penuh ----------
z-index 360: di atas #lap-page (340) tapi masih di bawah modal/toast global. */
#lap-bios{position:fixed;inset:0;z-index:360;display:none;flex-direction:column;
background:#12100c;font-family:'Nunito',sans-serif;user-select:none;-webkit-user-select:none}
#lap-bios.on{display:flex}
#lap-bios .lb-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;
padding:calc(9px + env(safe-area-inset-top)) 13px 9px;color:#FFE9C4}
#lap-bios .lb-jd{flex:1;min-width:0;font-weight:900;font-size:.86rem;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lap-bios .lb-nonton{flex:0 0 auto;font-size:.72rem;font-weight:900;color:#FFE9C4;
background:rgba(255,235,200,.16);border:2px solid rgba(255,235,200,.3);
border-radius:99px;padding:4px 11px;white-space:nowrap}
#lap-bios .lb-x{flex:0 0 auto;width:34px;height:34px;border-radius:12px;cursor:pointer;
border:2.5px solid rgba(255,235,200,.35);background:rgba(255,235,200,.12);
color:#FFE9C4;font-size:1rem;font-weight:900;display:grid;place-items:center;padding:0}
#lap-bios .lb-video{flex:0 0 auto;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
#lap-bios .lb-video iframe{width:100%;height:100%;display:block;border:0}
#lap-bios .lb-bar{flex:0 0 auto;display:flex;gap:8px;padding:9px 13px 4px}
#lap-bios .lb-bar .wbtn{flex:1}
#lap-bios .lb-info{flex:1;text-align:center;font-size:.74rem;font-weight:800;color:#C9B08A;padding:6px 0}
#lap-bios .lb-chat{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:8px 13px;font-size:.78rem;line-height:1.55;color:#F3E3C8}
#lap-bios .lb-chat .lap-c{color:#F3E3C8}
#lap-bios .lb-chat .lap-c.aku{color:#B6E39A}
#lap-bios .lb-chat .lap-c.sis{color:#B29A78}
#lap-bios .lb-chat .lap-c.ok{background:rgba(138,196,106,.2);color:#C6EBAA}
#lap-bios .lb-inrow{flex:0 0 auto;display:flex;gap:6px;
padding:8px 13px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,235,200,.14)}
#lap-bios #lb-in{flex:1;min-width:0;padding:10px 13px;border:2.5px solid rgba(255,235,200,.28);
border-radius:13px;font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:700;
color:#FFF3DD;background:rgba(255,235,200,.08);outline:none}
#lap-bios #lb-in::placeholder{color:#9C8768}
/* Pet lagi jalan-jalan sendiri: naik-turun tipis biar kebaca melangkah.
Cuma 3 lembar sprite yang punya animasi 'walk' beneran, sisanya ngandelin ini. */
@keyframes petLangkah{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.rm-pet.pet-lagi-jalan canvas{animation:petLangkah .32s steps(2,end) infinite}
.room-pet-wrap.pet-lagi-jalan #room-pet-canvas{animation:petLangkah .34s steps(2,end) infinite}
/* Perabot bawaan ruangan yang bisa digeser pemain (lihat RM_BAWAAN di js/04).
z-index 3: di atas lukisan ruangan, tapi di bawah pet (4) & karakter (5). */
.rm-bawaan{position:absolute;z-index:3;cursor:grab;touch-action:none;
filter:drop-shadow(0 4px 6px rgba(60,40,20,.28))}
.rm-bawaan svg{width:100%;height:100%;display:block;overflow:visible}
/* tombol buang perabot bawaan — cuma dipasang pas mode dekor */
.rm-bawaan .bw-x{position:absolute;right:-8px;top:-8px;width:24px;height:24px;padding:0;
border:2px solid #fff;border-radius:50%;background:#E05555;color:#fff;font-size:12px;
font-weight:800;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 4px rgba(60,40,20,.35)}
.fs-kosong{padding:18px 6px;text-align:center;color:#9b8365;font-size:13px;grid-column:1/-1}
/* ===== 📣 IKLAN — poster popup sekali lihat (js/15-iklan.js) ===== */
/* z-index di atas .pop-mask (2147483000): iklan & preview harus nutup panel */
.ikl-mask{position:fixed;inset:0;z-index:2147483100;background:rgba(30,20,10,.72);
display:none;align-items:center;justify-content:center;padding:22px}
.ikl-mask.on{display:flex}
.ikl-kartu{position:relative;width:100%;max-width:320px;max-height:88vh;overflow-y:auto;
background:linear-gradient(180deg,#fffdf6,#f7ebd4);border:3px solid #fff;border-radius:22px;
padding:12px;text-align:center;box-shadow:0 10px 0 #c9ab78,0 22px 38px rgba(40,25,10,.5)}
.ikl-x{position:absolute;top:16px;right:16px;z-index:2;width:32px;height:32px;border:0;
border-radius:50%;background:rgba(30,20,10,.62);color:#fff;font-size:15px;font-weight:900;
line-height:32px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ikl-x:active{transform:scale(.92)}
.ikl-foto{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:15px;
background:#efe1c6;border:2px solid #ecdcbe}
.ikl-foto.kosong{display:grid;place-items:center;font-size:52px;color:#b9a684}
.ikl-foto.klik{cursor:pointer}
.ikl-foto.klik:active{transform:scale(.985)}
.ikl-teks{margin-top:9px;font-size:.86rem;font-weight:800;color:#4a3524;line-height:1.5;
word-break:break-word}
.ikl-cta{width:100%;margin-top:10px;padding:12px;border:0;border-radius:15px;cursor:pointer;
font-family:'Fredoka One',cursive;font-size:15px;color:#fff6e2;
background:linear-gradient(180deg,#a8d98a,#8ac46a 46%,#6aa84f);
border-top:3px solid #cfeab4;border-bottom:4px solid #4d7f36;box-shadow:0 5px 0 #4d7f36}
.ikl-cta:active{transform:translateY(4px);box-shadow:0 1px 0 #4d7f36}
.ikl-cta.polos{background:linear-gradient(180deg,#e3d3b4,#cbb68f 46%,#b09a72);
border-top-color:#f0e4cb;border-bottom-color:#8a7758;box-shadow:0 5px 0 #8a7758}
.ikl-tag{margin-bottom:8px;padding-right:40px;font-size:.68rem;font-weight:900;color:#7a5f3c;
background:rgba(217,194,148,.35);border-radius:9px;padding:5px 8px}
/* tombol "Add Iklan" di layar Custom Avatar — cuma disuntik buat owner */
.ikl-add{flex:0 0 auto;margin:8px 10px 0;padding:9px 12px;border-radius:13px;
border:2px solid #D2761F;background:linear-gradient(160deg,#F7B267,#EE8F3C);
color:#fff;font-size:12px;font-weight:900;cursor:pointer}
.ikl-add:active{transform:translateY(2px)}
/* panel owner */
.ikl-thumb{width:80px;height:100px;border-radius:13px;object-fit:cover;flex:0 0 auto;
border:2.5px solid #ecdcbe;background:#f7ecd6}
.ikl-thumb.kosong{display:grid;place-items:center;font-size:.66rem;font-weight:800;
color:#a08a68;line-height:1.35}
.ikl-thumb.mini{width:38px;height:48px;font-size:17px}
.ikl-baris{display:flex;align-items:center;gap:9px;text-align:left;margin-bottom:7px;
background:#fffdf6;border:2px solid #ecdcbe;border-radius:13px;padding:7px 8px}
.ikl-baris img{width:38px;height:48px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.ikl-baris>div{flex:1;min-width:0;display:flex;flex-direction:column}
.ikl-baris b{font-size:.76rem;font-weight:900;color:#4a3524;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikl-baris small{font-size:.64rem;font-weight:700;color:#8a7258}
.ikl-mini{flex:0 0 auto;border:0;border-radius:10px;padding:6px 10px;cursor:pointer;
font-size:.68rem;font-weight:900;color:#fff;background:#c88742}
.ikl-mini.r{background:#c25a5a}
/* ===== 🎨 WALLPAPER & JENDELA (js/16-wallpaper.js) ===== */
#wpsheet .wp-ruang{font-size:.72rem;color:#8a7258;text-align:center;padding:0 12px 6px}
#wpsheet .wp-it{padding:6px 6px 8px}
#wpsheet .wp-pv{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
border:2px solid #e4d5b4;background:#fffdf6;margin-bottom:5px}
#wpsheet .wp-pv svg{width:100%;height:100%;display:block}
#wpsheet .wp-it.on .wp-pv{border-color:#D9A93A;box-shadow:0 0 0 2px rgba(217,169,58,.35)}
#wpsheet .wp-it.on .hrg{background:linear-gradient(180deg,#FFF3D2,#F7E3A8);color:#7a5a2e}