:root{--navy:#16294A;--navy2:#223C68;--navy0:#0C1830;--cream:#FFF3D1;--yel:#FFC629;--org:#FF7A1F;--grn:#27B35A;--blu:#2F7DF0;--mut:#9DB4DA;--sea:#9CC4DB;
--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--navy0)}
body{font-family:'Saira Semi Condensed',system-ui,sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-weight:700}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.bg{font-family:'Bungee',sans-serif;letter-spacing:.01em;font-weight:400}
.lbl{font-weight:800;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
#app{position:fixed;inset:0;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:linear-gradient(180deg,#8FBBD6 0%,#B4D6E6 55%,#CFE5EE 100%);overflow:hidden;height:100vh;height:100dvh}
@media (min-width:521px){#app{box-shadow:0 0 0 1px #0A1530,0 20px 60px rgba(0,0,0,.6);top:10px;bottom:10px;height:auto;border-radius:26px}}

/* ---------- HUD ---------- */
#hud{position:relative;z-index:6;padding:calc(var(--sat) + 8px) 12px 0;flex:none;background:linear-gradient(180deg,#0F1E3D 0%,#16294A 100%);padding-bottom:10px;border-bottom:4px solid #0A1530;box-shadow:0 6px 16px rgba(8,18,40,.35)}
.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sign{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0C1830;background:linear-gradient(180deg,#FFE680,#FFC629);padding:4px 11px 3px;border-radius:7px;border:2px solid #7A3E00;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 #7A3E00}
.sign b{margin:0 3px;opacity:.55}
#gear{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.plate{border-radius:16px;background:linear-gradient(180deg,#2B4A7E,#1B3258);border:3px solid #0A1530;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 3px 0 #0A1530;padding:8px 12px 9px;position:relative}
.coinrow{display:flex;align-items:center;gap:10px}
.coin{flex:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}.coin.big{width:40px;height:40px}
#coins{font-size:36px;line-height:40px;color:var(--yel);text-shadow:0 3px 0 #7A4A00,0 0 18px rgba(255,198,41,.35);white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:clip}
#coins.pop{animation:pop .28s ease-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.rate{text-align:right;font-weight:800;font-size:12px;line-height:13px;letter-spacing:.06em;color:#7DF0A6;text-transform:uppercase;white-space:nowrap}
.rate small{display:block;font-size:10px;color:var(--mut);letter-spacing:.1em;font-weight:700}
.rate.dim{color:var(--mut)}
.goal{margin-top:6px;padding-top:7px;border-top:2px solid rgba(255,255,255,.1)}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:8px}
.goal .lbl{color:#FFF3D1;font-size:10.5px;white-space:nowrap}
.goaltxt{font-weight:800;font-size:14px;white-space:nowrap;color:#7DF0A6}
.goaltxt span{color:var(--mut);font-size:12px}
.tube{height:16px;border-radius:9px;background:#0A1530;border:2px solid #07101F;box-shadow:inset 0 3px 5px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.12);overflow:hidden;position:relative}
.tube i{display:block;height:100%;width:0%;border-radius:8px;position:relative;transition:width .25s linear}
.tube i::after{content:"";position:absolute;left:3px;right:3px;top:2px;height:36%;border-radius:4px;background:rgba(255,255,255,.4)}
.tube.green i{background:linear-gradient(180deg,#7DF0A6,#25B15A 60%,#0E8040)}
.tube.orange i{background:linear-gradient(180deg,#FFAA55,#FF7A1F 55%,#D9560A)}
.tube.thin{height:11px}
.tube em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:10.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);letter-spacing:.06em}
.goalbtn{display:block;width:100%;margin-top:7px;height:38px;border-radius:12px;background:linear-gradient(180deg,#8DFFB4,#25B15A);border:3px solid #0E6B34;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #0E6B34;color:#04301A;font-size:17px;letter-spacing:.04em;animation:pulse 1.1s ease-in-out infinite}
.goalnote{margin-top:6px;font-weight:700;font-size:12.5px;color:#BFD0EE;line-height:1.25}
.goalnote b{color:var(--yel)}
@keyframes pulse{50%{transform:scale(1.025);filter:brightness(1.12)}}

/* ---------- map ---------- */
#mapwin{position:relative;flex:1 1 0;min-height:200px;background:linear-gradient(180deg,#8FBBD6 0%,#B4D6E6 100%);overflow:hidden;z-index:1;touch-action:manipulation}
#svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:15px;background:rgba(12,24,48,.88);border:2px solid #0A1530;box-shadow:0 3px 8px rgba(8,18,40,.35),inset 0 1px 0 rgba(255,255,255,.15);font-weight:800;font-size:12.5px;letter-spacing:.07em;color:var(--cream);text-transform:uppercase;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lane{left:10px;top:10px}
.viewbtn{right:10px;top:10px;padding:0 11px 0 9px;color:var(--yel);height:32px}
.viewbtn:active{transform:scale(.95)}
.trip{position:absolute;left:10px;right:10px;bottom:20px;z-index:3;padding:7px 10px 8px;border-radius:14px;background:rgba(12,24,48,.86);border:2px solid #0A1530;box-shadow:0 3px 8px rgba(8,18,40,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.trip-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.tripmi{font-weight:800;font-size:15px}
.tripeta{font-weight:800;font-size:13px;color:var(--yel);letter-spacing:.06em}
#floaters{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.floater{position:absolute;display:flex;align-items:center;gap:4px;font-family:'Bungee';font-size:21px;color:var(--yel);-webkit-text-stroke:0;text-shadow:0 2px 0 #7A3E00,0 0 10px rgba(0,0,0,.35);transform:translate(-50%,-50%);animation:floatup 1.5s ease-out forwards;white-space:nowrap}
.floater svg{width:22px;height:22px}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

/* ---------- bottom panel ---------- */
#panel{position:relative;z-index:5;flex:none;margin-top:-16px;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#223C68,#0F1E3D);border-top:4px solid #0A1530;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),0 -8px 22px rgba(8,18,40,.4);padding:9px 12px calc(10px + var(--sab))}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;padding:0 2px}
.seg{display:flex;background:#0A1530;border-radius:11px;padding:3px;gap:2px;border:2px solid #07101F}
.seg button{min-width:44px;height:26px;padding:0 9px;border-radius:8px;font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--mut)}
.seg button.on{background:linear-gradient(180deg,#FFE680,#FFC629);color:#3A1C00;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
#rows{display:flex;flex-direction:column;gap:7px}
.row{display:flex;align-items:center;gap:9px;height:62px;padding:6px 7px 6px 8px;border-radius:15px;background:linear-gradient(180deg,#FFF1BF,#FFD66B);border:3px solid #B87400;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #B87400;color:#2A1600;position:relative}
.row.off{background:linear-gradient(180deg,#8FA0BC,#6C7E9C);border-color:#3D4B66;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #3D4B66;color:#101A30}
.row.owned{background:linear-gradient(180deg,#B8F5CB,#6FDB96);border-color:#0E6B34;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #0E6B34;color:#04301A}
.ric{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#2B4A7E,#16294A);border:2px solid #0A1530;display:flex;align-items:center;justify-content:center;color:var(--yel);box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.row.off .ric{background:linear-gradient(180deg,#4D5F82,#34425F);border-color:#27324A;color:#C8D2E6}
.row.owned .ric{color:#7DF0A6}
.rmid{flex:1;min-width:0;line-height:1}
.rname{font-weight:800;font-size:15.5px;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:6px;white-space:nowrap}
.lv{font-size:11px;font-weight:800;padding:2px 6px 1px;border-radius:6px;background:rgba(10,21,48,.85);color:var(--yel);letter-spacing:.06em}
.row.off .lv{background:rgba(10,21,48,.6);color:#E0E8F8}
.reff{font-weight:700;font-size:12.5px;margin-top:4px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reff b{color:#B34400;font-weight:800}
.row.off .reff b{color:#fff}
.row.owned .reff b{color:#0A5C2B}
.mile{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-top:3px;color:#8A4A00;opacity:.9}
.row.off .mile{color:#E8EEF9}
.buy{flex:none;min-width:98px;height:46px;padding:0 9px;border-radius:12px;background:linear-gradient(180deg,#5BE38A,#25B15A);border:3px solid #0E6B34;box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 4px 0 #0E6B34;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#032A14;line-height:1}
.buy:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 1px 0 #0E6B34}
.buy .cost{display:flex;align-items:center;gap:4px;font-family:'Bungee';font-size:15px;margin-top:2px}
.buy .cost svg{width:16px;height:16px}
.buy .bl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.buy.off{background:linear-gradient(180deg,#A9B6CC,#7F8DA6);border-color:#4D5A72;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #4D5A72;color:#1A2438}
.buy.off:active{transform:none}
.row.ready{animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.08) saturate(1.1)}}
.tag{flex:none;font-family:'Bungee';font-size:16px;color:#0A5C2B;padding-right:8px;letter-spacing:.02em}
.gobtn{position:relative;width:100%;margin-top:11px;height:70px;border-radius:22px;background:linear-gradient(180deg,#FFE680 0%,#FFC629 45%,#FF9A1F 100%);border:4px solid #7A3E00;box-shadow:inset 0 3px 0 rgba(255,255,255,.75),inset 0 -6px 10px rgba(180,80,0,.45),0 6px 0 #7A3E00,0 12px 20px rgba(8,18,40,.5);overflow:hidden;color:#3A1C00;display:block}
.gobtn:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.75),inset 0 -6px 10px rgba(180,80,0,.45),0 2px 0 #7A3E00}
.gobtn::before{content:"";position:absolute;left:10px;right:10px;top:4px;height:30%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));z-index:2;pointer-events:none}
.gobtn i{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(180deg,#9CF0B8,#3CC36E);z-index:0;transition:width .2s linear}
.goin{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 16px 0 14px;gap:10px}
.goicon{flex:none;color:#3A1C00}
#goLbl{font-size:27px;letter-spacing:.03em;text-shadow:0 2px 0 rgba(255,255,255,.5);flex:1;text-align:left;white-space:nowrap}
.gopay{display:flex;align-items:center;gap:5px;font-size:21px;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.gobtn.idle{animation:pulse 1.3s ease-in-out infinite}
.gobtn.busy{background:linear-gradient(180deg,#D8C27A,#B79535 55%,#8A6A1F);border-color:#4A3A10;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 6px 0 #4A3A10,0 12px 20px rgba(8,18,40,.5);color:#2A1D00;cursor:default}
.gobtn.busy #goLbl{font-size:21px}
.gobtn.auto{background:linear-gradient(180deg,#8FD9A8,#3FAE68 55%,#1F7E45);border-color:#0E4A27;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 6px 0 #0E4A27,0 12px 20px rgba(8,18,40,.5);color:#032A14}
.gobtn.auto i{background:linear-gradient(180deg,#FFE680,#FFC629)}
.gobtn.auto #goLbl{font-size:20px}
.gobtn.busy i{background:linear-gradient(180deg,#FFE680,#FFC629);opacity:.9}

/* ---------- modal / toast ---------- */
#modal{position:fixed;inset:0;z-index:50;background:rgba(6,12,28,.72);display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#modal[hidden],#toast[hidden]{display:none}
.mcard{width:100%;max-width:360px;border-radius:24px;background:linear-gradient(180deg,#2B4A7E,#16294A);border:4px solid #0A1530;box-shadow:inset 0 3px 0 rgba(255,255,255,.25),0 8px 0 #0A1530,0 24px 40px rgba(0,0,0,.5);padding:20px 18px 18px;text-align:center;animation:mpop .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes mpop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.mcard h2{font-family:'Bungee';font-weight:400;font-size:25px;line-height:1.05;color:var(--yel);text-shadow:0 3px 0 #7A4A00;margin-bottom:10px}
.mcard p{font-size:16px;line-height:1.3;color:#DCE7FA;font-weight:600;margin-bottom:8px}
.mcard p b{color:var(--yel)}
.mcard .big{font-family:'Bungee';font-size:34px;color:#7DF0A6;text-shadow:0 3px 0 #06361C;margin:8px 0 12px;display:flex;align-items:center;justify-content:center;gap:8px}
.mcard .big svg{width:34px;height:34px}
.mbtn{display:block;width:100%;height:54px;margin-top:12px;border-radius:16px;background:linear-gradient(180deg,#FFE680,#FFC629 50%,#FF9A1F);border:3px solid #7A3E00;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 5px 0 #7A3E00;font-family:'Bungee';font-size:20px;color:#3A1C00}
.mbtn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 2px 0 #7A3E00}
.mbtn.sec{background:linear-gradient(180deg,#8FA0BC,#6C7E9C);border-color:#3D4B66;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 #3D4B66;color:#101A30;font-size:16px;height:46px}
.mbtn.red{background:linear-gradient(180deg,#FF8A7F,#E2483D);border-color:#7A1A12;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #7A1A12;color:#fff;font-size:16px;height:46px}
.mcard .small{font-size:12.5px;color:var(--mut);margin-top:8px}
.mcard .pete{margin:2px auto 6px;width:100%;height:auto}
#toast{position:fixed;left:50%;top:calc(var(--sat) + 70px);transform:translateX(-50%);z-index:60;max-width:92%;padding:9px 18px;border-radius:16px;background:linear-gradient(180deg,#FFE680,#FFC629);border:3px solid #7A3E00;box-shadow:0 5px 0 #7A3E00,0 10px 20px rgba(0,0,0,.4);color:#3A1C00;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-align:center;animation:toast .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes toast{0%{transform:translate(-50%,-30px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}

/* map svg text */
.hl{font-family:'Saira Semi Condensed';font-weight:800;letter-spacing:.07em;paint-order:stroke;stroke:#FBF3DC;stroke-linejoin:round}
.lake{font-family:'Saira Semi Condensed';font-weight:700;font-style:italic;letter-spacing:.2em;fill:#4F86AA;opacity:.9}
@media (max-height:700px){.row{height:56px}.ric{width:36px;height:36px}.buy{height:42px}.gobtn{height:62px;margin-top:9px}#coins{font-size:32px}.mile{display:none}}

/* ---------- warehouse screen ---------- */
#whwin{position:relative;flex:1 1 0;min-height:200px;overflow:hidden;z-index:1;background:#BFE3F3}
#whwin[hidden]{display:none}
#whsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.backbtn{left:10px;top:10px;height:32px;color:var(--yel);padding:0 12px 0 8px}
.whtitle{right:10px;top:10px;left:auto}
.whtrip{left:auto;right:10px;top:48px;height:26px;font-size:11.5px;color:var(--yel)}
.whcard{display:flex;align-items:center;gap:10px;width:100%;height:60px;padding:6px 10px 6px 8px;border-radius:15px;background:linear-gradient(180deg,#FFF1BF,#FFD66B);border:3px solid #B87400;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #B87400;color:#2A1600;text-align:left}
.whcard:active{transform:translateY(3px)}
.whcard .enter{flex:none;font-family:'Bungee';font-size:14px;color:#fff;background:linear-gradient(180deg,#5BE38A,#25B15A);border:3px solid #0E6B34;border-radius:11px;padding:8px 9px 6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 #0E6B34}
#mapBar{margin-bottom:2px}
.hubtip{pointer-events:none}
@media (max-height:700px){.whcard{height:54px}}
[hidden]{display:none!important}

.zoombtn{right:10px;bottom:12px;color:var(--yel);height:32px;padding:0 11px 0 9px}
#whsvg{touch-action:none;cursor:grab}
.uptoggle{display:flex;align-items:center;gap:6px;height:28px}
.uptoggle svg{transition:transform .2s}
.collapsed .uptoggle svg{transform:rotate(180deg)}
.collapsed #rows{display:none}
.collapsed .seg{display:none}