#gameCanvas{image-rendering:auto}
#mobileActions.jadda-actions{position:absolute;z-index:100;right:16px;right:max(16px,env(safe-area-inset-right));bottom:16px;bottom:max(16px,env(safe-area-inset-bottom));display:flex!important;visibility:visible!important;opacity:1!important;align-items:flex-end;gap:10px;pointer-events:auto}
.jump-button,.view-button{border:1px solid rgba(255,255,255,.5);color:white;box-shadow:0 10px 28px rgba(8,38,33,.28);backdrop-filter:blur(9px);cursor:pointer;touch-action:manipulation}
.jump-button{width:82px;height:72px;border-radius:25px;background:linear-gradient(145deg,#ef8c5f,#d85b46);display:grid;grid-template-columns:22px auto;place-content:center;align-items:center;gap:5px;text-shadow:0 1px 2px rgba(80,23,12,.25)}
.jump-button span{font-size:24px;line-height:1}.jump-button b{font-size:11px;letter-spacing:.06em}.jump-button.pressed{animation:jumpPress .24s ease}
.view-button{width:58px;height:48px;border-radius:17px;background:rgba(18,62,54,.88);font-size:11px;font-weight:900}
.control-coach{position:fixed;z-index:15;left:50%;bottom:28px;transform:translate(-50%,10px);padding:10px 15px;border-radius:15px;background:rgba(20,61,53,.84);color:white;text-align:center;pointer-events:none;opacity:0;box-shadow:0 10px 25px rgba(8,38,33,.2)}
.control-coach span,.control-coach small{display:block}.control-coach span{font-size:13px;font-weight:900}.control-coach small{margin-top:2px;font-size:10px;opacity:.75}.game-shell.playing .control-coach{animation:coachHint 5.2s ease .8s both}
.context-prompt{right:max(16px,env(safe-area-inset-right));bottom:max(100px,calc(env(safe-area-inset-bottom) + 96px))}
.context-prompt.task-trash{border:1px solid rgba(70,174,126,.48);box-shadow:0 12px 32px rgba(24,111,77,.3)}
.context-prompt.task-trash>button{background:linear-gradient(145deg,#6bd4a6,#34a977);color:#123c2d}
.reward-pop{animation:rewardPop .3s cubic-bezier(.2,.85,.28,1.35)}
.light-counter b,.mission-list small{display:inline-block}
.game-shell.impact-flash::after{content:"";position:fixed;z-index:49;inset:0;pointer-events:none;background:rgba(255,239,202,.72);animation:impactFlash .22s ease-out both}
.game-shell.market-cleared .objective-ribbon{box-shadow:0 8px 24px rgba(7,35,31,.14),0 0 0 3px rgba(101,210,168,.26)}
.touch-guide{width:48px;height:48px;border-color:rgba(255,224,122,.8);background:rgba(255,224,122,.1)}.touch-guide i{inset:11px;background:rgba(255,224,122,.3)}.touch-guide span{top:8px;font-size:20px;color:#ffe07a}.touch-guide.active{animation:touchPulse .5s ease infinite alternate}
@keyframes jumpPress{0%{transform:scale(1)}45%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes touchPulse{from{opacity:.7;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes coachHint{0%,100%{opacity:0;transform:translate(-50%,10px)}12%,76%{opacity:1;transform:translate(-50%,0)}}
@keyframes rewardPop{0%{transform:scale(1)}42%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes impactFlash{from{opacity:.8}to{opacity:0}}
@media(max-width:680px){#mobileActions.jadda-actions{right:12px;right:max(12px,env(safe-area-inset-right));bottom:12px;bottom:max(12px,env(safe-area-inset-bottom))}.jump-button{width:76px;height:68px;border-radius:22px}.view-button{width:52px;height:44px}.context-prompt{left:14px;right:154px;bottom:max(14px,env(safe-area-inset-bottom));transform:none;width:auto;grid-template-columns:auto 1fr}.context-prompt>button{grid-column:1/-1;width:100%;min-height:42px}.status-rail{bottom:max(92px,calc(env(safe-area-inset-bottom) + 84px))}.control-coach{bottom:max(94px,calc(env(safe-area-inset-bottom) + 86px))}.toast{bottom:174px}}
@media(max-width:760px) and (orientation:landscape){.topbar{top:7px;left:8px;right:8px}.progress-wrap{top:58px}.jump-button{width:72px;height:60px}.view-button{height:42px}#mobileActions.jadda-actions{bottom:8px}.context-prompt{bottom:8px}.status-rail{bottom:74px}.control-coach{bottom:74px}.toast{bottom:94px}}
@media(prefers-reduced-motion:reduce){.game-shell.playing .control-coach{animation:none;opacity:0}.touch-guide.active,.jump-button.pressed,.reward-pop,.game-shell.impact-flash::after{animation:none}}

/* Empat kolom hasil (Cahaya, Rahasia, Kebaikan, Waktu) -> grid 2x2 yang seimbang. */
.finish-panel .result-grid{grid-template-columns:repeat(2,1fr)}

/* Tautan mode arcade di layar mulai. */
.secondary-button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:50px;margin-top:10px;padding:0 18px;border:1px solid #d8d6c6;border-radius:16px;background:#fff;color:#143c34;font-size:14px;font-weight:900;text-decoration:none;cursor:pointer}.secondary-button:active{transform:scale(.98)}

/* ---------- Rumah Jadda: progres, misi harian, kartu, lemari ---------- */
.hub-panel{margin-top:16px;display:grid;gap:12px;text-align:left}
.hub-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hub-stats span{padding:9px 6px;border-radius:14px;background:#edf4e8;text-align:center;display:grid;gap:1px}
.hub-stats small{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#728076}
.hub-stats b{font-size:18px;color:#143c34}
.hub-daily{border:1px solid #e2e6d8;border-radius:16px;padding:12px}
.hub-daily__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.hub-daily__head strong{font-size:13px;color:#143c34}
.hub-daily__head span{font-size:11px;color:#74807a}
.hub-daily__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hub-daily__list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#f5f7ef;font-size:12px;color:#3d5048}
.hub-daily__list li b{font-variant-numeric:tabular-nums;color:#143c34}
.hub-daily__list li.done{background:#e3f4e6;color:#2c6b45}
.hub-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hub-links button{min-height:44px;border:1px solid #d8d6c6;border-radius:14px;background:#fff;color:#143c34;font-size:12px;font-weight:800;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:6px}
.hub-links button:active{transform:scale(.98)}
.hub-line{margin:8px 0 0;font-size:11px;color:#74807a;text-align:center}
.hub-overlay{max-height:86vh;overflow:auto;text-align:left}
.hub-overlay__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.hub-overlay__head small{display:block;color:#b16036;font-size:10px;font-weight:900;letter-spacing:.16em}
.hub-overlay__head h2{margin:2px 0 0;font-size:24px;color:#143c34}
.hub-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.hub-card{display:grid;gap:3px;padding:12px;border-radius:16px;background:#f2f3ec;border:1px solid #e4e6da;opacity:.62}
.hub-card b{font-size:20px;line-height:1;color:#9aa79f}
.hub-card span{font-size:12px;font-weight:800;color:#3d5048}
.hub-card small{font-size:10px;color:#828d85;line-height:1.35}
.hub-card--owned{opacity:1;background:linear-gradient(150deg,#fff6dd,#eaf6e8);border-color:#e6d9ac}
.hub-card--owned b{color:#c9962a}
.hub-card--owned span{color:#143c34}
.wardrobe{display:grid;gap:10px}
.wardrobe-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wardrobe-row>strong{width:100%;font-size:12px;color:#143c34}
.wardrobe-item{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:12px;border:1px solid #d8d6c6;background:#fff;color:#4c5a53;font-size:11px;font-weight:800;cursor:pointer}
.wardrobe-item i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:block}
.wardrobe-item--owned{background:#f4f8f0}
.wardrobe-item--active{border-color:#c9962a;background:linear-gradient(135deg,#f4b62d,#ffd86e);color:#46350e}

/* ---------- Keselamatan tata letak layar ---------- */
/* html,body memakai overflow:hidden, jadi panel yang lebih tinggi dari
   viewport terpotong dan tombol di bawahnya tidak bisa diklik sama sekali.
   Layar yang isinya bisa memanjang harus bisa digulir; panel hanya
   ditengahkan bila masih muat. */
#startScreen,#cardsScreen,#wardrobeScreen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding-block:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-bottom))}
#startScreen>.panel,#cardsScreen>.panel,#wardrobeScreen>.panel{margin-block:auto}
/* Ringkas blok progres supaya lebih sering muat tanpa menggulir. */
.hub-panel{margin-top:12px;gap:10px}
.hub-daily{padding:10px}
.hub-daily__list li{padding:7px 10px}
.hub-stats span{padding:7px 4px}
.hub-stats b{font-size:16px}
/* Layar pendek: ringkas panel supaya tidak perlu menggulir sama sekali. */
@media (max-height:820px){.panel{padding:22px 20px}.panel h1{font-size:clamp(30px,7vw,44px)}.hub-panel{gap:8px}.hub-daily{padding:9px}}
/* Pembaca performa: untuk mengukur di perangkat nyata (?perf=1). */
.perf-badge{position:fixed;z-index:70;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:11px;background:rgba(12,34,30,.92);color:#9ff5d9;font:600 12px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em;pointer-events:none;white-space:pre;text-align:center}
a.primary-button{text-decoration:none}