:root {
  --ink: #143a55;
  --muted: #6c8ba0;
  --sky: #5fd4f7;
  --sky-soft: #dff6ff;
  --cream: #fffdf4;
  --yellow: #ffd23d;
  --sun: #ffc93c;
  --green: #2fd18d;
  --green-dark: #0f8f60;
  --coral: #ff6b5c;
  --blue: #1e9fdb;
  --navy: #10496e;
  --panel: rgba(255,255,255,.94);
  --shadow: 0 14px 34px rgba(24,94,128,.16);
  --box-step: clamp(30px, 5vh, 46px);
  --box-height: clamp(38px, 6vh, 55px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background: var(--sky-soft);
  user-select: none;
  overscroll-behavior: none;
}
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.hidden { display: none !important; }

#gameApp {
  position: relative; width: 100%; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg,#8fe4ff 0,#d8f6ff 38%,#fff3d0 38%,#ffe9b4 100%);
}

/* ------------------------------------------------------------------ header */
.topbar {
  min-height: 64px;
  display: grid; grid-template-columns: auto minmax(190px,1fr) auto auto;
  align-items: center; gap: 10px;
  padding: max(8px,env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(180deg,#ffffff,#f2fbff);
  border-bottom: 3px solid #b9e8fa;
  box-shadow: 0 6px 20px rgba(28,120,158,.14);
  z-index: 20;
}
.brand-button { display: flex; align-items: center; gap: 8px; background: transparent; text-align: left; padding: 0; }
.brand-box {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; font-size: 1.4rem;
  background: linear-gradient(150deg,#ffe07a,#ff9d3d); box-shadow: 0 6px 0 #d97a1e, 0 10px 18px rgba(216,126,38,.28);
}
.brand-copy { display: grid; grid-template-columns: auto auto; line-height: .95; letter-spacing: -.04em; }
.brand-copy strong, .brand-copy b { font-size: 1.04rem; font-weight: 950; }
.brand-copy strong { color: var(--ink); } .brand-copy b { color: #f0891c; }
.brand-copy small { grid-column: 1/3; margin-top: 4px; font-size: .57rem; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; }

.mission-chip {
  min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 16px; background: #e4f7ff; border: 2px solid #a9e2f5; text-align: left;
}
.mission-chip > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: white; font-size: 1.15rem; }
.mission-chip small { display: block; color: #4d8ba5; font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.mission-chip strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .84rem; }
.mission-chip i { font-style: normal; color: #63a8c2; }

.stats-group { display: flex; gap: 6px; }
.stat-card { min-width: 76px; padding: 6px 9px; text-align: center; border-radius: 14px; background: #eefaff; border: 2px solid #cbecf8; }
.stat-card span { display: block; font-size: .52rem; color: #5f8899; font-weight: 900; letter-spacing: .05em; }
.stat-card strong { display: block; margin-top: 1px; font: 950 .95rem ui-monospace,"Cascadia Mono",monospace; color: #0e82b8; }
.par-card { background: #f0fff6; border-color: #bdedd4; } .par-card strong { color: #12915f; }
.combo-card { background: #fff6e2; border-color: #ffdfa8; } .combo-card strong { color: #e0850f; }

.action-group { display: flex; gap: 5px; }
.action-button {
  min-width: 54px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 14px; background: #e7f5fb; color: #3d6b81; font-size: .95rem; font-weight: 900;
  box-shadow: 0 3px 0 #c3e2ee;
}
.action-button b { font-size: .54rem; }
.action-button.hint { background: #ffe98a; color: #6d5205; box-shadow: 0 3px 0 #e0c65c; }
.action-button.icon-only { min-width: 44px; font-size: 1.05rem; }
.action-button.exit { background: #ffe0dc; color: #c2453f; font-size: 1.5rem; box-shadow: 0 3px 0 #f0bdb7; }
.action-button:active, .mission-chip:active { transform: translateY(2px); box-shadow: none; }

/* ----------------------------------------------------------------- staging */
.staging-area { min-height: 100px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; padding: 9px 12px; z-index: 7; }
.panel { min-width: 0; padding: 9px 11px; border-radius: 20px; background: var(--panel); border: 2px solid white; box-shadow: var(--shadow); }
.panel-title { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.panel-title > span { font-size: 1rem; }
.panel-title strong { display: block; font-size: .66rem; letter-spacing: .08em; }
.panel-title small { display: block; color: var(--muted); font-size: .57rem; margin-top: 1px; }

.buffer-slots { display: grid; gap: 8px; }
.buffer-slot {
  min-height: 50px; position: relative; display: flex; align-items: center; justify-content: center;
  border: 3px dashed #9fd3e6; border-radius: 14px; background: #f0fbff; transition: .18s; overflow: hidden;
}
.buffer-slot.valid-target { border-color: var(--green); background: #e2fff2; box-shadow: 0 0 0 3px rgba(47,209,141,.18) inset; animation: target-pulse 1.2s infinite; }
.slot-placeholder { color: #7fadc0; font-size: .62rem; font-weight: 900; letter-spacing: .06em; }

.fleet-list { display: grid; gap: 6px; }
.fleet-card { min-width: 0; position: relative; padding: 7px 9px; border-radius: 13px; background: #f4fbfe; border-left: 6px solid var(--route-color); overflow: hidden; }
.fleet-card::after { content: ""; position: absolute; right: -13px; top: -18px; width: 50px; height: 50px; border-radius: 50%; background: var(--route-color); opacity: .1; }
.fleet-head { display: flex; justify-content: space-between; gap: 4px; font-size: .66rem; font-weight: 950; }
.fleet-head span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fleet-status { font-size: .52rem; font-weight: 900; color: var(--muted); letter-spacing: .07em; margin-top: 2px; }
.fleet-card.shipping { background: #fff6ca; animation: fleet-pulse .55s infinite alternate; }
.fleet-card.shipped { background: #e3fff1; }
.fleet-card.shipped .fleet-status { color: #108963; }
@keyframes fleet-pulse { to { transform: translateY(-2px); box-shadow: 0 7px 13px rgba(226,172,48,.24); } }

/* --------------------------------------------------------------- warehouse */
.warehouse-floor {
  position: relative; min-height: 0; flex: 1; overflow: hidden;
  margin: 0 11px max(10px,env(safe-area-inset-bottom)); border-radius: 26px;
  background: linear-gradient(180deg,#9fe8ff 0 22%,#7fd3ee 22% 25%,#ffe9b8 25% 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 14px 30px rgba(37,110,130,.2);
}
.warehouse-floor::before {
  content: ""; position: absolute; inset: 25% 0 0;
  background: repeating-linear-gradient(90deg,transparent 0 92px,rgba(180,132,64,.09) 92px 96px),
              linear-gradient(180deg,rgba(255,255,255,.35),transparent 50%);
}
.warehouse-sky { position: absolute; left: 0; right: 0; top: 0; height: 25%; pointer-events: none; overflow: hidden; }
.warehouse-sky .sun { position: absolute; right: 5%; top: 8%; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle,#fff3a8,#ffcf3f); box-shadow: 0 0 26px rgba(255,206,63,.75); }
.warehouse-sky .cloud { position: absolute; height: 15px; border-radius: 999px; background: rgba(255,255,255,.9); }
.warehouse-sky .cloud::before, .warehouse-sky .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.warehouse-sky .cloud::before { width: 22px; height: 22px; left: 9px; bottom: 3px; }
.warehouse-sky .cloud::after { width: 28px; height: 28px; right: 10px; bottom: 2px; }
.cloud-a { width: 72px; left: 8%; top: 22%; animation: drift 26s linear infinite; }
.cloud-b { width: 56px; left: 42%; top: 46%; opacity: .8; animation: drift 34s linear infinite reverse; }
.cloud-c { width: 64px; left: 70%; top: 16%; opacity: .7; animation: drift 30s linear infinite; }
@keyframes drift { from { transform: translateX(-14px); } 50% { transform: translateX(14px); } to { transform: translateX(-14px); } }
.warehouse-sky .crane { position: absolute; left: 3%; bottom: 0; width: 6px; height: 62%; background: #f0a52c; border-radius: 3px; box-shadow: 30px 0 0 -1px rgba(240,165,44,.35); }
.warehouse-sky .crane::before { content: ""; position: absolute; left: -4px; top: 0; width: 74px; height: 6px; border-radius: 3px; background: #f0a52c; }
.warehouse-sky .crane::after { content: ""; position: absolute; left: 58px; top: 6px; width: 3px; height: 22px; background: #c9832a; }

.warehouse-skyline { position: absolute; left: 0; right: 0; top: 3%; height: 22%; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 6%; pointer-events: none; }
.warehouse-skyline i { width: 13%; height: 58%; border-radius: 9px 9px 0 0; background: linear-gradient(160deg,#bff0ff,#8bd8f2); border: 4px solid rgba(45,140,170,.28); border-bottom: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.warehouse-skyline i:nth-child(2) { height: 76%; } .warehouse-skyline i:nth-child(4) { height: 68%; }

.floor-caption { position: absolute; z-index: 3; top: 8px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.floor-caption span, .floor-caption strong { padding: 6px 11px; border-radius: 999px; font-size: .63rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor-caption span { background: rgba(255,255,255,.9); color: #1f6d87; }
.floor-caption strong { background: rgba(255,247,214,.92); color: #8a6208; }

.pallets-scroll { position: absolute; inset: 36px 0 12px; overflow-x: auto; overflow-y: hidden; padding: 0 10px; scrollbar-width: thin; scrollbar-color: #86c3bd transparent; }
.pallets-container {
  height: 100%;
  display: grid; grid-template-columns: repeat(var(--pallet-count,5), minmax(66px,1fr));
  gap: 8px; align-items: stretch;
}
.pallet-col { position: relative; min-width: 0; border-radius: 19px 19px 10px 10px; border: 3px dashed rgba(78,140,132,.22); background: rgba(255,255,255,.28); transition: .18s; }
.pallet-col.dispatch-bay { border-style: solid; border-color: var(--route-color); background: rgba(255,255,255,.55); }
.pallet-col.valid-target { border-color: var(--green) !important; background: rgba(206,255,231,.8) !important; box-shadow: 0 0 0 4px rgba(47,209,141,.2) inset; animation: target-pulse 1.1s infinite; }
.pallet-col.invalid-target { opacity: .6; }
.pallet-col.wrong-ready { border-color: #f5a623; background: rgba(255,240,190,.75); animation: wrong-ready 1s infinite alternate; }
.pallet-col.shipping-bay { animation: bay-load .45s infinite alternate; }
@keyframes target-pulse { 50% { box-shadow: 0 0 0 6px rgba(47,209,141,.28) inset; } }
@keyframes wrong-ready { to { box-shadow: 0 0 0 6px rgba(245,166,35,.22) inset; } }
@keyframes bay-load { to { filter: brightness(1.14); transform: translateY(-2px); } }

.bay-label {
  position: absolute; z-index: 6; left: 5px; right: 5px; top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 5px;
  border-radius: 10px; background: rgba(255,255,255,.88); font-size: .58rem; font-weight: 950;
  color: var(--route-dark); border: 2px solid var(--route-color);
  white-space: nowrap; overflow: hidden;
}
.bay-label .bay-mode { font-style: normal; }
.bay-label .bay-city { overflow: hidden; text-overflow: ellipsis; }
.bay-label .bay-city::before { content: "· "; }
.bay-label.plain { color: #6d8b94; border-color: transparent; background: rgba(255,255,255,.6); }

/* Kolom menyempit pada misi berpalet banyak. Nama kota dan ikon moda dilepas
   bertahap supaya kode kota tidak pernah terpotong di tengah kata. */
.pallets-container.tight .bay-label .bay-city { display: none; }
.pallets-container.very-tight .bay-label .bay-mode { display: none; }
.pallets-container.very-tight .bay-label { font-size: .62rem; padding: 0 2px; }
.pallets-container.tight .cargo-box { padding: 0 4px 0 5px; }
.pallets-container.tight .box-code { font-size: .52rem; gap: 3px; }
.pallets-container.tight .box-code i { display: none; }
/* Pada kolom paling sempit, badge jumlah tidak lagi muat berdampingan dengan
   kode dan nomor; tumpukan yang terpilih sudah terangkat bersama sebagai
   petunjuk visual. */
.pallets-container.very-tight .box-count { display: none; }
.pallets-container.very-tight .box-number { min-width: 18px; padding: 2px 3px; }

.ready-ribbon {
  position: absolute; z-index: 12; left: 50%; top: 38px; transform: translateX(-50%);
  width: max-content; max-width: 94%; padding: 5px 8px; border-radius: 9px;
  background: linear-gradient(160deg,#ffe98a,#ffc93c); color: #6b4a05; font-size: .5rem; font-weight: 950;
  box-shadow: 0 4px 0 #d9a71f, 0 8px 14px rgba(140,100,12,.24);
  animation: ribbon-bob .9s infinite alternate;
}
.ready-ribbon:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 1px 0 #d9a71f; }
@keyframes ribbon-bob { to { transform: translateX(-50%) translateY(-3px); } }

.wooden-pallet { position: absolute; z-index: 4; left: 4px; right: 4px; bottom: 7px; height: 22px; border-radius: 6px; background: linear-gradient(#e09a45 0 45%,#a35d26 45%); border-top: 4px solid #f7c368; box-shadow: 0 5px 0 #764424; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 8px; }
.pallet-block { width: 16%; height: 8px; border-radius: 2px 2px 0 0; background: #6b3519; }
.box-stack-area { position: absolute; inset: 38px 4px 24px; pointer-events: none; }

/* -------------------------------------------------------------------- box */
.cargo-box {
  position: absolute; left: 3%; right: 3%; bottom: calc(4px + var(--row) * var(--box-step)); height: var(--box-height);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 8px;
  border-radius: 11px 11px 8px 8px; color: white;
  background: linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%), var(--box-color);
  border: 3px solid var(--box-deep);
  box-shadow: 0 5px 0 var(--box-deep), 0 9px 16px rgba(35,72,84,.2);
  font-weight: 950; pointer-events: auto; touch-action: none;
  transition: transform .15s, filter .15s, box-shadow .15s; overflow: hidden;
}
.cargo-box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 0 45%,rgba(255,255,255,.4) 45% 55%,transparent 55%); pointer-events: none; }
.cargo-box::after { content: ""; position: absolute; left: 8%; right: 8%; top: 5px; height: 3px; border-radius: 4px; background: rgba(255,255,255,.34); }
.cargo-box.liftable { cursor: grab; }
.cargo-box.liftable:active { cursor: grabbing; }
.cargo-box.selected { z-index: 50 !important; transform: translateY(-8px) scale(1.03); filter: brightness(1.12); box-shadow: 0 8px 0 var(--box-deep), 0 16px 26px rgba(38,86,102,.3), 0 0 0 4px var(--yellow); }
.cargo-box.hint-source { animation: hint-source .55s 4 alternate; }
@keyframes hint-source { to { transform: translateY(-10px); filter: brightness(1.3); } }
.box-code { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: clamp(.54rem,.95vw,.7rem); text-shadow: 0 1px 2px rgba(0,0,0,.26); }
.box-code i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.14); flex: 0 0 auto; }
.box-code b { flex: 0 0 auto; }
.box-number { position: relative; z-index: 2; min-width: 22px; padding: 2px 5px; border-radius: 7px; text-align: center; background: rgba(15,55,72,.62); font: 950 clamp(.72rem,1.4vw,1.05rem) ui-monospace,"Cascadia Mono",monospace; }
/* Jumlah kardus ditulis sebaris dengan kode. Sebagai badge melayang, angka ini
   menimpa nomor kardus di atasnya pada tumpukan yang rapat. */
.box-count { flex: 0 0 auto; margin-left: 2px; padding: 1px 4px; border-radius: 7px; background: var(--yellow); color: #5c4409; font-style: normal; font-size: .52rem; text-shadow: none; }
.buffer-slot .cargo-box { position: relative; left: auto; right: auto; bottom: auto; width: 94%; height: 42px; min-height: 42px; box-shadow: 0 3px 0 var(--box-deep), 0 5px 9px rgba(41,68,75,.16); }
.drag-ghost {
  position: fixed; z-index: 1000; width: clamp(96px,15vw,170px); height: 50px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-radius: 12px;
  color: white; background: linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%), var(--box-color);
  border: 3px solid var(--box-deep); box-shadow: 0 16px 30px rgba(23,66,84,.34); font-weight: 950;
  pointer-events: none; transform: translate(-50%,-70%) rotate(-3deg);
}

.safety-stripe { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(135deg,#ffd23d 0 17px,#20465c 17px 34px); }
.vehicle-runway { position: absolute; z-index: 35; left: 0; right: 0; bottom: 11px; height: 100px; pointer-events: none; overflow: hidden; }
.dispatch-vehicle {
  position: absolute; left: -190px; bottom: 0; width: 178px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 20px; background: white; border: 4px solid var(--route-color);
  box-shadow: 0 13px 28px rgba(31,74,88,.3); animation: vehicle-trip 1.2s cubic-bezier(.25,.75,.25,1) forwards;
}
.dispatch-vehicle .vehicle-icon { font-size: 2.3rem; filter: drop-shadow(0 4px 2px rgba(0,0,0,.16)); }
.dispatch-vehicle strong { display: block; color: var(--route-dark); font-size: .7rem; }
.dispatch-vehicle small { display: block; color: var(--muted); font-size: .54rem; }
.dispatch-vehicle .cargo-mini { margin-left: auto; font-size: 1.3rem; }
@keyframes vehicle-trip { 0% { transform: translateX(0); } 38%,62% { transform: translateX(var(--stop-x)); } 100% { transform: translateX(calc(100vw + 230px)); } }

/* ---------------------------------------------------------------- overlay */
.overlay { position: fixed; z-index: 100; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(16,58,80,.55); backdrop-filter: blur(10px); }
.overlay.show { display: flex; animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } }

.map-overlay { padding: max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom)); }
.map-card { width: min(1220px,100%); height: min(760px,100%); display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: #f4fdff; box-shadow: 0 30px 80px rgba(13,64,86,.34); }
.map-header { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 16px; align-items: center; padding: 18px 24px 14px; background: white; border-bottom: 3px solid #d9f1f8; }
.map-heading { min-width: 0; }
.kicker { margin: 0 0 4px; color: #f0891c; font-size: .62rem; font-weight: 950; letter-spacing: .17em; }
.map-header h1, .dialog-card h2 { margin: 0; font-size: clamp(1.25rem,2.4vw,1.85rem); letter-spacing: -.04em; }
.map-header p { margin: 5px 0 0; color: var(--muted); font-size: .74rem; }

.daily-button { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 18px; background: linear-gradient(150deg,#ffe9a3,#ffca4a); color: #6a4c05; text-align: left; box-shadow: 0 5px 0 #e0aa1d; }
.daily-button:active { transform: translateY(3px); box-shadow: none; }
.daily-button.done { background: linear-gradient(150deg,#c8f5dd,#7fdcb0); color: #0d6c48; box-shadow: 0 5px 0 #3fa77b; }
.daily-icon { font-size: 1.5rem; }
.daily-copy small { display: block; font-size: .53rem; font-weight: 950; letter-spacing: .12em; opacity: .8; }
.daily-copy strong { display: block; max-width: 168px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; }
.daily-copy em { display: block; font-style: normal; font-size: .58rem; opacity: .85; }

.map-progress { min-width: 176px; padding: 10px 13px; border-radius: 16px; background: #eafaf2; }
.map-progress > span { display: block; font-size: .55rem; color: #55887a; font-weight: 900; letter-spacing: .08em; }
.map-progress strong { display: block; margin: 2px 0 6px; font-size: .95rem; color: #1c7f5d; }
.map-progress > div { height: 8px; border-radius: 8px; background: #cfe9dd; overflow: hidden; }
.map-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#43c98a,#ffd23d); transition: width .35s; }
.round-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: #eaf5f8; color: #517183; font-size: 1.45rem; }
.map-header > .round-close { position: absolute; right: 10px; top: 10px; }

.map-content {
  min-height: 0; flex: 1; display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(300px,.85fr);
  grid-template-rows: minmax(0,1fr) auto;
  gap: 12px 14px; padding: 14px;
}
/* Penempatan eksplisit: peta dan baris kota di kolom kiri, panel misi menempati
   seluruh tinggi kolom kanan. Tanpa ini panel merebut kolom lebar dan peta
   terjepit di kolom sempit. */
.indonesia-map { grid-column: 1; grid-row: 1; }
.city-strip { grid-column: 1; grid-row: 2; }
.mission-panel { grid-column: 2; grid-row: 1 / 3; }

/* --------------------------------------------------------------- peta SVG */
.indonesia-map { position: relative; min-height: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(170deg,#bff0ff,#7ed3ec 60%,#59bede); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.indonesia-map svg { display: block; width: 100%; height: 100%; }
.map-land .island { fill: #8fe07f; stroke: #3f9c66; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 4px 4px rgba(20,110,130,.22)); }
.map-routes .route-arc { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 8; opacity: .85; animation: route-flow 1.4s linear infinite; }
@keyframes route-flow { to { stroke-dashoffset: -30; } }
.map-routes .route-dot { stroke: white; stroke-width: 2; }
.map-routes .route-origin { stroke: white; stroke-width: 3; }

/* Penanda hub dan nama kota digambar di dalam SVG agar selalu sejajar dengan
   garis pantai. Versi sebelumnya memakai lapisan HTML dalam persen dan meleset
   sampai 97 px ketika kotak peta lebih tinggi daripada rasio viewBox. */
.map-routes .route-halo { opacity: .22; animation: halo-pulse 1.8s ease-in-out infinite; }
@keyframes halo-pulse { 50% { opacity: .42; r: 16; } }
.map-routes .route-origin { stroke: white; stroke-width: 3; }
.map-city-name {
  fill: #14536d; font: 950 15px "Trebuchet MS","Segoe UI",system-ui,sans-serif;
  paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 4px; stroke-linejoin: round;
}

.city-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.city-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 13px; background: #eef8fb; border: 2px solid transparent; color: #23617c; }
.city-chip b { font-size: .72rem; font-weight: 950; }
.city-chip em { font-style: normal; font-size: .56rem; font-weight: 900; color: #6d94a5; }
.city-chip.active { background: var(--yellow); border-color: #e0a41a; color: #5c4408; }
.city-chip.active em { color: #7a5c0d; }
.city-chip.complete { background: #dcfaeb; color: #12744f; }
.city-chip.complete::after { content: "✓"; font-weight: 950; color: #1fa26c; }
.city-chip.locked { opacity: .55; }
.city-chip.locked::after { content: "🔒"; font-size: .6rem; }

.map-legend { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 12px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.88); font-size: .55rem; font-weight: 900; color: #3f7386; }
.map-legend span { display: flex; align-items: center; gap: 4px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.port-dot { background: #1189cc; } .rail-dot { background: #ef7d3f; } .air-dot { background: #7d63d8; }

/* --------------------------------------------------------- panel misi */
.mission-panel { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 24px; background: white; box-shadow: 0 10px 28px rgba(28,89,107,.12); overflow: hidden; }
.selected-city, .selected-hub, .map-note { flex: 0 0 auto; }
.selected-city { display: grid; gap: 9px; }
.selected-city small { font-size: .55rem; color: #f0891c; font-weight: 950; letter-spacing: .12em; }
.selected-city h2 { margin: 1px 0 0; font-size: 1.1rem; }
/* Hub ditampilkan sebagai baris tab, bukan daftar bertumpuk. Versi bertumpuk
   memakan ~100px tinggi dan membuat tombol misi terpotong di HP mendatar. */
.hub-list { display: flex; gap: 5px; }
.hub-chip {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto auto; justify-items: center; gap: 1px;
  padding: 6px 4px; border-radius: 13px; background: #f2f9fb; border: 2px solid transparent; text-align: center;
}
.hub-chip.active { border-color: var(--hub-color); background: #fffdf0; }
.hub-chip-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: white; font-size: .95rem; box-shadow: 0 2px 4px rgba(30,90,110,.12); }
.hub-chip > span:last-child { min-width: 0; width: 100%; }
.hub-chip small { display: block; font-size: .44rem; font-weight: 950; letter-spacing: .08em; color: var(--hub-color); }
.hub-chip strong { display: block; font-size: .62rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hub-chip.locked { opacity: .55; filter: grayscale(.5); }
.hub-chip .hub-lock { font-size: .5rem; font-weight: 950; color: #b8853a; }
.hub-chip .hub-progress { font-style: normal; font-size: .5rem; font-weight: 950; color: #6d94a5; }
.hub-chip.active .hub-progress { color: var(--hub-color); }

.selected-hub { display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border-radius: 15px; background: #f0fbff; }
.hub-big-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: white; font-size: 1.45rem; }
.selected-hub small { font-size: .53rem; color: #f0891c; font-weight: 950; letter-spacing: .12em; }
.selected-hub strong { display: block; font-size: .82rem; margin: 1px 0 3px; }
.selected-hub p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.35; }
.route-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.route-chip { padding: 2px 6px; border-radius: 7px; background: var(--route-color); color: white; font-size: .52rem; font-weight: 950; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

.mission-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.mission-list-heading b { font-size: .7rem; color: var(--ink); }
.mission-list-heading em { font-style: normal; font-size: .55rem; font-weight: 900; color: #8ba6b2; }
.mission-list { display: grid; align-content: start; gap: 7px; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
/* Kartu misi memuat baris tingkat 1..8. Tinggi tumpukan naik satu kardus tiap
   tingkat, jadi satu misi bisa dimainkan berulang dengan tantangan berbeda. */
.mission-card { padding: 9px; border-radius: 15px; background: #f2f9f6; border: 2px solid transparent; }
.mission-card.locked { filter: grayscale(.7); opacity: .55; }
.mission-head { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; }
.mission-card .mission-no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: white; color: #1f8a63; font-weight: 950; font-size: .78rem; }
.mission-body { min-width: 0; }
.mission-card strong { display: block; font-size: .74rem; }
.mission-card small { display: block; color: var(--muted); font-size: .54rem; margin-top: 1px; }
.mission-tally { font-size: .58rem; font-weight: 950; color: #1f8a63; background: white; padding: 2px 6px; border-radius: 7px; }

.level-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.level-pip {
  display: grid; justify-items: center; gap: 0; padding: 4px 0 3px; border-radius: 9px;
  background: white; border: 2px solid #dceae4; color: #47707f; line-height: 1;
}
.level-pip b { font-size: .68rem; font-weight: 950; }
.level-pip em { font-style: normal; font-size: .45rem; font-weight: 900; color: #9ab3bd; }
.level-pip:hover:not(:disabled) { border-color: #5fcfa1; }
.level-pip.done { background: linear-gradient(160deg,#ffe9a3,#ffd23d); border-color: #e0a41a; color: #5c4408; }
.level-pip.done em { color: #8a6a10; }
.level-pip.locked { background: #eef3f1; border-color: transparent; color: #b3c4c9; }
.level-pip.locked em { color: #c3d2d6; }
.level-pip:disabled { cursor: default; }

.map-note { margin: 0; padding-top: 8px; border-top: 1px solid #e6f1f3; color: #89a3ac; font-size: .52rem; line-height: 1.4; }

/* --------------------------------------------------------------- dialog */
.dialog-card { position: relative; width: min(560px,100%); max-height: 95vh; overflow-y: auto; padding: 24px; border-radius: 28px; background: var(--cream); text-align: center; box-shadow: 0 28px 70px rgba(12,50,66,.32); }
.dialog-close { position: absolute; right: 14px; top: 14px; }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; text-align: left; }
.rule-grid > div { position: relative; padding: 13px 12px 12px 48px; border-radius: 16px; background: #ecfaf3; }
.rule-grid > div > span { position: absolute; left: 10px; top: 11px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--yellow); color: #5f4810; font-weight: 950; }
.rule-grid strong { font-size: .75rem; }
.rule-grid p { margin: 3px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.35; }
.drag-tip { padding: 10px; border-radius: 14px; background: #fff3c2; color: #6b5409; font-size: .66rem; font-weight: 800; line-height: 1.45; }
.primary-button, .secondary-button, .danger-button { width: 100%; min-height: 50px; border-radius: 16px; padding: 0 18px; font-weight: 950; }
.primary-button { background: linear-gradient(150deg,#ffe07a,#ffb62c); color: #5c4408; box-shadow: 0 6px 0 #dc9c17; }
.primary-button:active { transform: translateY(4px); box-shadow: none; }
.primary-button:disabled { filter: grayscale(.6); opacity: .6; box-shadow: none; }
.secondary-button { margin-top: 9px; background: #e8f3f2; color: #35606a; }
.danger-button { background: var(--coral); color: white; box-shadow: 0 6px 0 #d34a3e; }
.compact-card { width: min(400px,100%); }
.compact-card p { color: var(--muted); font-size: .76rem; }
.exit-symbol { font-size: 2.4rem; margin-bottom: 8px; }

.win-card { width: min(520px,100%); }
.confetti { color: #ff9d4e; letter-spacing: 12px; font-size: 1rem; animation: confetti-dance .6s infinite alternate; }
@keyframes confetti-dance { to { transform: translateY(5px); color: #3fc48d; } }
.win-stars { margin: 12px 0; color: #efaa24; font-size: 2.3rem; letter-spacing: 6px; }
.win-card > p:not(.kicker) { color: var(--muted); }
.win-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 16px 0 10px; background: #dceae6; border-radius: 17px; overflow: hidden; }
.win-stats div { padding: 10px 6px; background: #f0f9f5; }
.win-stats span { display: block; color: var(--muted); font-size: .5rem; font-weight: 900; }
.win-stats strong { display: block; margin-top: 2px; color: #1c7d60; font-size: 1rem; }
.win-record { margin: 0 0 4px; font-size: .66rem; font-weight: 900; color: #6c8ba0; }
.win-record.fresh { color: #12915f; }
.win-record.fresh::after { content: " 🎉"; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); transform: translate(-50%,20px); max-width: calc(100% - 34px); padding: 10px 15px; border-radius: 13px; background: #12435c; color: white; font-size: .67rem; font-weight: 850; box-shadow: 0 12px 28px rgba(18,59,78,.3); opacity: 0; pointer-events: none; transition: .22s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.hint-target { animation: hint-target .55s 4 alternate !important; }
@keyframes hint-target { to { box-shadow: 0 0 0 7px rgba(255,210,70,.6) inset; filter: brightness(1.1); } }
.shake { animation: shake .24s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ------------------------------------------------------------- responsif */
@media (max-width: 1180px) {
  .brand-copy small { display: none; } .brand-copy { display: block; }
  .brand-copy strong, .brand-copy b { font-size: .86rem; }
  .stat-card { min-width: 64px; padding: 5px 7px; }
  .action-button { min-width: 46px; } .action-button b { display: none; }
  .mission-chip { min-width: 160px; }
  .staging-area { grid-template-columns: .9fr 1.2fr; }
  .map-header { grid-template-columns: minmax(0,1fr) auto; }
  .map-progress { display: none; }
}
@media (max-width: 880px) {
  .topbar { grid-template-columns: auto minmax(120px,1fr) auto; padding-left: 8px; padding-right: 8px; }
  .brand-copy { display: none; } .brand-box { width: 38px; height: 38px; }
  .stats-group { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 25; }
  .staging-area { padding-top: 42px; }
  .combo-card { display: none; }
  .action-group { gap: 3px; }
  .action-button { min-width: 40px; width: 40px; }
  #helpButton, #soundButton { display: none; }
  .mission-chip strong { font-size: .7rem; }
  .map-content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .indonesia-map, .city-strip, .mission-panel { grid-column: 1; grid-row: auto; }
  .indonesia-map { min-height: 250px; }
  .map-card { overflow-y: auto; }
  .mission-panel { min-height: 320px; }
  .daily-button { display: none; }
  .win-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-height: 660px) {
  :root { --box-step: 30px; --box-height: 38px; }
  .topbar { min-height: 54px; padding-top: 6px; padding-bottom: 6px; }
  .brand-box { width: 38px; height: 38px; }
  .action-button { height: 39px; }
  .stat-card { padding: 4px 7px; }
  .staging-area { min-height: 80px; padding-top: 6px; padding-bottom: 6px; }
  .panel { padding: 6px 9px; } .panel-title { margin-bottom: 4px; } .panel-title small { display: none; }
  .buffer-slot { min-height: 40px; } .fleet-card { padding: 5px 8px; }
  .warehouse-floor { border-radius: 20px; } .floor-caption { top: 5px; }
  .pallets-scroll { inset: 32px 0 9px; } .bay-label { height: 24px; } .box-stack-area { top: 34px; }
  .map-header { padding-top: 12px; padding-bottom: 10px; }
  .map-header p { display: none; }
  .map-content { padding: 10px; } .dialog-card { padding: 18px; }
  .mission-panel { gap: 7px; padding: 11px; }
  .map-note { display: none; }
  .selected-hub p { display: none; }
  /* Nama pulau dan nama kota disatukan dalam satu baris; dua baris terpisah
     memakan tinggi yang dibutuhkan tombol misi. */
  .selected-city > div:first-child { display: flex; align-items: baseline; gap: 7px; }
  .selected-city small { font-size: .5rem; }
  .selected-city h2 { font-size: .98rem; }
  .hub-chip { padding: 4px; }
  .hub-chip-icon { width: 22px; height: 22px; font-size: .85rem; }
  .mission-button { padding: 7px; }
  .rule-grid { margin: 12px 0; } .win-stars { margin: 7px 0; } .win-stats { margin: 10px 0 6px; }
}
@media (max-width: 880px) and (max-height: 660px) {
  /* max-height berada sesudah max-width dalam cascade. Tanpa aturan gabungan
     ini, padding statistik kembali menjadi 6px dan kartu statistik menimpa rak. */
  .staging-area { padding-top: 42px; }
}
@media (orientation: portrait) {
  #gameApp::after {
    content: "Putar HP ke posisi mendatar agar gudang lebih lega ↻";
    position: fixed; z-index: 90; left: 50%; bottom: 15px; transform: translateX(-50%);
    padding: 8px 12px; border-radius: 12px; background: rgba(18,67,92,.92); color: white;
    font-size: .62rem; font-weight: 850; white-space: nowrap;
  }
  .staging-area { grid-template-columns: 1fr; }
  .fleet-panel { display: none; }
  .pallets-container { grid-template-columns: repeat(var(--pallet-count,5), minmax(62px,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}