/* Career mode: the app layout and the new screens. Everything is scoped to body.career, which is only set when
   the server has career mode switched on, so the current site is untouched until then. */
body.career{--c-navy:#0B1D45;--c-deep:#0A0F1F;--c-blue:#2F8BFF;--c-sky:#5FD0FF;--c-gold:#FFD964;--c-gold2:#F0A000;--c-green:#3DD68C;--c-red:#FF6B7D;--c-soft:#B9CCF2;--c-line:rgba(255,255,255,.16);--c-panel:rgba(255,255,255,.08);--c-paper:#F4F3EE;--c-ink:#16161A;
  --c-disp:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--c-hud:70px;--c-nav:92px;
  --paper:#0C1B3F;--panel:#15295A;
  background:var(--c-deep);min-height:100%}
body.career::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(120,180,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.06) 1px,transparent 1px),radial-gradient(130% 60% at 50% 0%,#17408F 0%,var(--c-navy) 48%,var(--c-deep) 100%);background-size:30px 30px,30px 30px,100% 100%;pointer-events:none;z-index:0}
body.career .wrap{position:relative;z-index:1;padding-top:calc(var(--c-hud) + env(safe-area-inset-top,0px) + 6px);padding-bottom:calc(var(--c-nav) + env(safe-area-inset-bottom,0px) + 26px)}
body.career.c-bare .wrap{padding-bottom:40px}
body.career.c-auth .wrap{padding-top:20px;padding-bottom:40px}
body.career.c-auth .c-hud,body.career.c-auth .c-nav,body.career.c-bare .c-nav{display:none}
body.career .toast{bottom:calc(var(--c-nav) + env(safe-area-inset-bottom,0px) + 14px)}
body.career.c-bare .toast,body.career.c-auth .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
body.career #themeBtn,body.career #themeLink,body.career .ph-fab{display:none}

/* ---- gem buttons ---- */
.c-btn,.c-nav button,.c-side button,.c-earn,.c-back{--g1:#3D9BFF;--g2:#1463E0;--g3:#7CC0FF;--g4:#0A3F99;--gt:#fff}
.c-btn{display:block;width:100%;border:0;border-radius:16px;min-height:56px;padding:12px 18px;font:800 20px/1.05 var(--c-disp);letter-spacing:.06em;text-transform:uppercase;color:var(--gt);background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 2.5px var(--g3),inset 0 4px 0 rgba(255,255,255,.22),0 6px 0 var(--g4),0 10px 18px rgba(0,0,0,.3);text-shadow:0 2px 0 rgba(0,0,0,.25);position:relative;overflow:hidden;cursor:pointer;transition:transform .08s,box-shadow .08s}
.c-btn::after,.c-earn::after{content:"";position:absolute;left:8%;right:8%;top:5px;height:34%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.c-btn:active,.c-nav button:active,.c-side button:active,.c-earn:active,.c-back:active{transform:translateY(4px) scale(.985);box-shadow:inset 0 0 0 2.5px var(--g3),0 2px 0 var(--g4)}
.c-btn.sm{width:auto;min-height:48px;font-size:17px;padding:10px 14px;flex:none}
.c-btn.big{min-height:66px;font-size:23px;border-radius:18px}
.c-btn.gold{--g1:#FFE066;--g2:#F0A000;--g3:#FFF3B0;--g4:#A86A00;--gt:#2B1D00;text-shadow:none}
.c-btn.green{--g1:#4BE08C;--g2:#159A52;--g3:#A6F5C8;--g4:#0B5F31}
.c-btn.ghost{--g1:#33405F;--g2:#1E2740;--g3:#5A6B99;--g4:#0F1526}
.c-btn.dbl{--g1:#B46BFF;--g2:#6B21D6;--g3:#DDBFFF;--g4:#3E0F8A;margin:10px 0}
.c-btn small{display:block;font:700 12px/1.1 Barlow,system-ui,sans-serif;letter-spacing:0;text-transform:none;opacity:.9;margin-top:3px}
.c-btn[disabled]{opacity:.55;pointer-events:none}
body.career .grow{flex:1;min-width:0}

/* ---- top bar ---- */
.c-hud{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--c-hud) + env(safe-area-inset-top,0px));padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,calc(50% - 344px)) 8px;display:flex;align-items:center;gap:10px;background:linear-gradient(rgba(10,15,31,.96),rgba(10,15,31,.82));border-bottom:2px solid rgba(120,180,255,.25);color:#fff}
.c-who{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.c-av{width:46px;height:46px;border-radius:13px;background:linear-gradient(var(--c-sky),var(--c-blue));display:grid;place-items:center;font:800 22px var(--c-disp);border:2px solid #fff;color:var(--c-navy);flex:none}
.c-who b{display:block;font:800 18px/1.05 var(--c-disp);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-who span{display:block;font-size:12px;font-weight:600;color:var(--c-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-cash{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);border:2px solid #F5B82E;border-radius:99px;padding:6px 14px 6px 6px;font:800 21px/1 var(--c-disp);font-variant-numeric:tabular-nums;flex:none}
.c-cash i{width:28px;height:28px;border-radius:50%;background:linear-gradient(var(--c-gold),#E0A100);color:#5a3d00;display:grid;place-items:center;font:800 16px var(--c-disp);font-style:normal}
.c-cash.bump{animation:cBump .4s}
@keyframes cBump{40%{transform:scale(1.2)}}
.c-gear{width:46px;height:46px;border-radius:13px;border:2px solid rgba(255,255,255,.28);background:var(--c-panel);color:#fff;display:grid;place-items:center;flex:none;cursor:pointer}
.c-gear svg{width:24px;height:24px}

/* ---- bottom bar ---- */
.c-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;gap:7px;padding:12px max(10px,calc(50% - 350px)) calc(14px + env(safe-area-inset-bottom,0px));background:rgba(10,15,31,.94);border-top:2px solid rgba(120,180,255,.25)}
.c-nav button{height:68px;border:0;border-radius:16px;min-width:0;padding:0 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 2.5px var(--g3),inset 0 4px 0 rgba(255,255,255,.2),0 6px 0 var(--g4);text-shadow:0 2px 0 rgba(0,0,0,.25);cursor:pointer;transition:transform .08s,filter .15s}
.c-nav button span{display:block;max-width:100%;font:800 min(12.5px,3.05vw)/1 var(--c-disp);letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.c-nav svg{width:27px;height:27px}
.c-nav button:nth-child(1){--g1:#22D3B6;--g2:#0E8F85;--g3:#7FF0DC;--g4:#075E58}
.c-nav button:nth-child(2){--g1:#8B5CF6;--g2:#5B21B6;--g3:#B79CFF;--g4:#3B1480}
.c-nav button:nth-child(5){--g1:#FF5FA2;--g2:#C81E6A;--g3:#FFA6CC;--g4:#84103F}
.c-nav button.mid{--g1:#FFE066;--g2:#F0A000;--g3:#FFF3B0;--g4:#A86A00;color:#2B1D00;text-shadow:none}
.c-nav button.on{filter:brightness(1.2);transform:translateY(-3px)}

/* ---- title screen ---- */
.c-title{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(120% 90% at 50% 35%,#12306E 0%,#0B1D45 45%,#0A0F1F 100%);color:#fff;transition:opacity .35s;cursor:pointer}
.c-title.bye{opacity:0;pointer-events:none}
.c-title img{width:min(72%,320px);height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));animation:cFloat 2.8s ease-in-out infinite}
@keyframes cFloat{50%{transform:translateY(-7px)}}
.c-tap{margin-top:28px;font:700 21px var(--c-disp);letter-spacing:.2em;text-transform:uppercase;color:#DCE7FF;animation:cBlink 1.6s ease-in-out infinite}
@keyframes cBlink{50%{opacity:.35}}
.c-by{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));font:600 13px Barlow,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8FA6D6}.c-by b{color:#fff}
.c-tbtn{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));border:2px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(10,15,31,.55);color:#fff;font:800 16px var(--c-disp);letter-spacing:.08em;text-transform:uppercase;padding:13px 16px;cursor:pointer}
.c-tbtn.l{left:16px}.c-tbtn.r{right:16px}

/* ---- home ---- */
body.career #home > :not(#cHome){display:none}
.c-home{display:flex;flex-direction:column;gap:12px}
.c-job{display:flex;align-items:center;gap:10px;border-radius:16px;padding:11px 14px;background:rgba(0,0,0,.34);border:2px solid rgba(120,180,255,.35);width:100%;text-align:left;color:#fff;cursor:pointer}
.c-job .ji{width:38px;height:38px;border-radius:11px;background:linear-gradient(var(--c-sky),var(--c-blue));color:#06224f;display:grid;place-items:center;flex:none}.c-job .ji svg{width:22px;height:22px}
.c-job small,.c-slot small,.c-k{display:block;font:700 10.5px/1.2 Barlow,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8FB7FF}
.c-job b{display:block;font:800 21px/1.05 var(--c-disp);letter-spacing:.03em;text-transform:uppercase}
.c-job em{margin-left:auto;font:800 21px/1 var(--c-disp);font-style:normal;color:var(--c-gold);white-space:nowrap;text-align:right}
.c-job em small{color:var(--c-soft);letter-spacing:.08em}
.c-stage{position:relative;border-radius:20px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 0 rgba(0,0,0,.35);min-height:300px}
body.career .c-stage .placecard{border:0;box-shadow:none;padding:0;margin:0;background:none}
body.career .c-stage .pc-head{position:absolute;left:10px;top:10px;z-index:2;background:rgba(10,15,31,.82);border-radius:12px;padding:7px 12px;margin:0}
body.career .c-stage .pc-head small{display:block;font:700 10px/1.2 Barlow,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8FB7FF}
body.career .c-stage .pc-head b{font:800 22px/1 var(--c-disp);letter-spacing:.03em;text-transform:uppercase;color:#fff}
body.career .c-stage .pc-next,body.career .c-stage .pc-btns{display:none}
body.career .c-stage .stagebox{border-radius:0;min-height:300px}
.c-side{position:absolute;right:10px;top:10px;z-index:2;display:flex;flex-direction:column;gap:8px}
.c-side button{width:66px;border:0;border-radius:16px;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font:800 12px/1 var(--c-disp);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 2.5px var(--g3),inset 0 3px 0 rgba(255,255,255,.22),0 5px 0 var(--g4);text-shadow:0 1px 0 rgba(0,0,0,.3);cursor:pointer;transition:transform .08s}
.c-side svg{width:27px;height:27px}
.c-side button:nth-child(1){--g1:#FFE066;--g2:#F0A000;--g3:#FFF3B0;--g4:#A86A00;color:#2B1D00;text-shadow:none}
.c-side button:nth-child(2){--g1:#FF5FA2;--g2:#C81E6A;--g3:#FFA6CC;--g4:#84103F}
.c-side button:nth-child(3){--g1:#8B5CF6;--g2:#5B21B6;--g3:#B79CFF;--g4:#3B1480}
.c-side button:nth-child(4){--g1:#22D3B6;--g2:#0E8F85;--g3:#7FF0DC;--g4:#075E58}
.c-next{display:flex;align-items:center;gap:10px;width:100%;background:var(--c-panel);border:1.5px solid var(--c-line);border-radius:16px;padding:12px 14px;font:600 14px/1.35 Barlow,system-ui,sans-serif;color:#DCE7FF;text-align:left;cursor:pointer}
.c-next .grow{flex:1;min-width:0}.c-next em{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff}.c-next em svg{width:18px;height:18px}.c-next .c-bar{margin-top:7px}
.c-next b{color:#fff}
.c-bar{display:block;height:8px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:6px}
.c-bar u{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c-gold),#F5B82E);transform-origin:left;transition:transform .7s cubic-bezier(.2,.9,.3,1)}
.c-earn{--g1:#FFE066;--g2:#F0A000;--g3:#FFF3B0;--g4:#A86A00;width:100%;min-height:84px;border:0;border-radius:22px;display:flex;align-items:center;gap:14px;padding:12px 16px;text-align:left;color:#2B1D00;background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 3px var(--g3),inset 0 5px 0 rgba(255,255,255,.35),0 8px 0 var(--g4),0 0 26px rgba(255,200,60,.55);position:relative;overflow:hidden;cursor:pointer;transition:transform .08s}
.c-earn::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0));transform:translateX(-140%) skewX(-18deg);animation:cShine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes cShine{0%,55%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(440%) skewX(-18deg)}}
.c-earn .ei{width:56px;height:56px;border-radius:16px;background:rgba(0,0,0,.16);display:grid;place-items:center;flex:none}.c-earn .ei svg{width:38px;height:38px}
.c-earn b{display:block;font:800 38px/.95 var(--c-disp);letter-spacing:.06em;text-transform:uppercase}
.c-earn small{display:block;font:700 13px/1.2 Barlow,system-ui,sans-serif;opacity:.85}
.c-earn .ea{width:44px;height:44px;border-radius:13px;background:rgba(0,0,0,.2);display:grid;place-items:center;flex:none}.c-earn .ea svg{width:24px;height:24px}
.c-pay{display:flex;align-items:center;gap:10px;border:0;border-radius:16px;padding:13px 14px;background:linear-gradient(#1f9d57,#147a41);box-shadow:inset 0 0 0 2.5px #A6F5C8,0 6px 0 #0B5F31;font:600 13px/1.3 Barlow,system-ui,sans-serif;color:#DFF7E8;width:100%;text-align:left;cursor:pointer}
.c-pay b{display:block;font:800 20px/1 var(--c-disp);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.c-pay em{margin-left:auto;font:800 17px var(--c-disp);font-style:normal;letter-spacing:.06em;background:#fff;color:#147a41;border-radius:12px;padding:10px 14px;text-transform:uppercase;flex:none}
.c-pay{position:relative}.c-pay.ready::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 30px 4px rgba(61,214,140,.95);opacity:0;animation:cPulse 1.8s ease-in-out infinite;pointer-events:none}.c-pay.ready em{background:var(--c-gold);color:#2B1D00}
@keyframes cPulse{50%{opacity:1}}
body.career #cHomeTop:empty{display:none}
body.career #guestbar{margin:0}

/* ---- shared screen parts ---- */
.c-screen{display:flex;flex-direction:column;gap:11px;color:#fff}
.c-screen.hidden{display:none}
.c-hd{display:flex;align-items:flex-start;gap:12px}
.c-ttl{font:800 34px/1 var(--c-disp);letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:0;text-wrap:balance}
.c-ttl.gold{color:var(--c-gold)}.c-ttl.sm{font-size:24px}
.c-sub{font:600 14px/1.35 Barlow,system-ui,sans-serif;color:var(--c-soft);margin:4px 0 0}
.c-h3{font:800 16px/1 var(--c-disp);letter-spacing:.14em;text-transform:uppercase;color:#8FB7FF;margin:6px 0 0}
.tiny{font:600 12px/1.3 Barlow,system-ui,sans-serif;color:var(--c-soft);margin:0}
.c-back{--g1:#33405F;--g2:#1E2740;--g3:#7C8DBB;--g4:#0F1526;width:52px;height:52px;border:0;border-radius:15px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 2.5px var(--g3),inset 0 3px 0 rgba(255,255,255,.18),0 5px 0 var(--g4);cursor:pointer;transition:transform .08s;padding:0}
.c-back svg{width:28px;height:28px}
body.career button.back.c-back{margin-bottom:10px}
.c-card{border-radius:18px;background:var(--c-panel);border:1.5px solid var(--c-line);padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.c-rate{border-radius:12px;background:rgba(245,184,46,.14);border:1.5px solid rgba(245,184,46,.6);padding:9px 12px;font:600 14px/1.3 Barlow,system-ui,sans-serif;color:#FFE9B0;text-align:center}.c-rate b{color:#fff}
.c-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(0,0,0,.34);border-radius:18px;padding:6px}
.c-seg button{border:0;border-radius:14px;background:none;color:var(--c-soft);padding:13px 4px;font:800 22px/1 var(--c-disp);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.c-seg button small{display:block;font:600 12px/1.2 Barlow,system-ui,sans-serif;letter-spacing:0;text-transform:none;margin-top:3px}
.c-seg button.on{background:linear-gradient(180deg,#3D9BFF,#1463E0);color:#fff;box-shadow:inset 0 0 0 2.5px #7CC0FF,0 5px 0 #0A3F99;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.c-seg button.lock{opacity:.6}
.c-earntop{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
body.career #earn > .tag-row,body.career #earn > h1.title,body.career #earn > p.note:not(#reviseNote){display:none}

/* ---- career ---- */
.c-slot{border-radius:16px;padding:11px 12px;display:flex;align-items:center;gap:10px}
.c-slot.m{border:2px solid var(--c-gold);background:rgba(245,184,46,.14)}.c-slot.s{border:2px dashed var(--c-sky);background:rgba(47,139,255,.12)}
.c-slot b{display:block;font:800 23px/1.05 var(--c-disp);letter-spacing:.03em;text-transform:uppercase}
.c-slot span{display:block;font:600 12.5px/1.3 Barlow,system-ui,sans-serif;color:#DCE7FF}
.c-total{border-radius:14px;background:var(--c-paper);color:var(--c-ink);padding:11px 14px;display:flex;justify-content:space-between;align-items:center;font:800 20px var(--c-disp);letter-spacing:.04em;text-transform:uppercase}
.c-total b{color:#00843D;font-size:24px}
.c-jb{border-radius:16px;border:1.5px solid var(--c-line);background:var(--c-panel);padding:11px 12px}
.c-jb.can{border:2px solid var(--c-gold);background:rgba(0,0,0,.34)}.c-jb.got{border-color:var(--c-green)}
.c-jb .hd{display:flex;align-items:center;gap:9px}
.c-jb .no{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;font:800 15px var(--c-disp);flex:none}
.c-jb.got .no{background:var(--c-green);color:#06331c}
.c-jb b{font:800 20px/1.05 var(--c-disp);letter-spacing:.03em;text-transform:uppercase}
.c-jb em{font:800 17px var(--c-disp);font-style:normal;color:var(--c-gold);white-space:nowrap}
.c-req{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.c-req li{display:flex;align-items:center;gap:8px;font:600 13.5px/1.25 Barlow,system-ui,sans-serif;color:#DCE7FF}
.c-req li i{width:19px;height:19px;border-radius:50%;border:2px solid rgba(255,255,255,.45);flex:none;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.c-req li span{flex:1;min-width:0}
.c-req li.ok{color:#9BF0C2}.c-req li.ok i{background:var(--c-green);border-color:var(--c-green);color:#06331c}
.c-req li u{text-decoration:none;color:var(--c-soft);font-weight:700;white-space:nowrap}

/* ---- shop ---- */
.c-shopart{min-height:112px;border-radius:18px;background:linear-gradient(120deg,#C81E6A,#FF5FA2);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2.5px #FFA6CC,0 6px 0 #84103F;display:flex;align-items:center;padding:14px}
.c-shopart::before{content:"";position:absolute;right:-6px;top:-8px;bottom:-8px;width:46%;background:url(img/brand/shop.webp) center/contain no-repeat}
.c-shopart>div{position:relative;max-width:58%}.c-shopart .c-sub{color:#fff}.c-shopart .c-ttl{text-shadow:0 3px 0 rgba(0,0,0,.3)}
.c-tabs{display:grid;grid-template-columns:1fr 1.25fr .8fr;gap:7px}
.c-tabs button{border:2px solid rgba(255,255,255,.3);border-radius:14px;background:var(--c-panel);color:#DCE7FF;font:800 16px/1.05 var(--c-disp);letter-spacing:.04em;text-transform:uppercase;padding:12px 4px;cursor:pointer}
.c-tabs button.on{background:linear-gradient(180deg,#3D9BFF,#1463E0);color:#fff;border-color:transparent;box-shadow:inset 0 0 0 2.5px #7CC0FF,0 5px 0 #0A3F99}
.c-it{display:flex;align-items:center;gap:10px;border-radius:18px;background:var(--c-panel);border:1.5px solid var(--c-line);padding:13px 14px}
.c-it .ui{width:54px;height:54px;border-radius:14px;background:linear-gradient(#1f9d57,#147a41);display:grid;place-items:center;flex:none}.c-it .ui svg{width:28px;height:28px}
.c-it b{display:block;font:800 20px/1.05 var(--c-disp);letter-spacing:.03em;text-transform:uppercase}
.c-it span{display:block;font:600 12.5px/1.3 Barlow,system-ui,sans-serif;color:var(--c-soft)}.c-it span.g{color:#9BF0C2}
.c-it.own{border-color:var(--c-green)}.c-it.lock{opacity:.7}
.c-it.shake{animation:cShake .4s}
@keyframes cShake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* ---- payslips ---- */
.c-slip{border-radius:16px;background:var(--c-paper);color:var(--c-ink);padding:12px 14px;font:600 14px/1.3 Barlow,system-ui,sans-serif;margin-bottom:10px}
.c-slip h3{font:800 20px var(--c-disp);letter-spacing:.05em;text-transform:uppercase;margin:0;color:var(--c-ink)}
.c-slip p{color:#55554F;font-size:12px;margin:0 0 6px}
.c-slip .ln{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed #b9b8b0;animation:cRise .35s both}
.c-slip .ln.pos span:last-child{color:#00843D}.c-slip .ln.neg span:last-child{color:#C8102E}
.c-slip .tot{display:flex;justify-content:space-between;border-top:2px solid var(--c-ink);font:800 22px var(--c-disp);letter-spacing:.03em;text-transform:uppercase;padding-top:9px;margin-top:2px}
.c-slip .tot span:last-child{color:#00843D;font-variant-numeric:tabular-nums}.c-slip .tot.neg span:last-child{color:#C8102E}
@keyframes cRise{from{opacity:0;transform:translateY(12px)}}
.c-bands{display:grid;gap:4px;font:600 13px Barlow,system-ui,sans-serif;color:#DCE7FF}.c-bands div{display:flex;justify-content:space-between}
body.career .c-saved > .pts-add:not(.bonus),body.career .c-saved > .sub,body.career .c-saved > .capnote,body.career .c-saved > .review{display:none}

/* ---- pop-ups ---- */
body.career .jmodal.c-modal{place-items:center;padding:16px}
body.career .jmodal.c-modal .jm-in{background:#12234f;border:3px solid var(--c-sky);border-radius:22px;padding:18px 16px;display:flex;flex-direction:column;gap:10px;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.6);max-width:420px;width:100%;max-height:86vh;overflow-y:auto;position:relative}
body.career .jmodal.c-big .jm-in{border-color:var(--c-gold);text-align:center;overflow:hidden}
.c-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(rgba(255,217,100,.13) 0 10deg,transparent 10deg 20deg);animation:cSpin 14s linear infinite;pointer-events:none}
.c-big .jm-in>*:not(.c-rays){position:relative}
@keyframes cSpin{to{transform:rotate(360deg)}}
.c-menu{display:flex;flex-direction:column;gap:9px}
.c-pick{display:flex;align-items:center;gap:10px;border:1.5px solid var(--c-line);border-radius:16px;background:var(--c-panel);padding:10px 12px;text-align:left;color:#fff;cursor:pointer}
.c-pick b{display:block;font:800 19px/1.05 var(--c-disp);letter-spacing:.03em;text-transform:uppercase}.c-pick small{font:600 12.5px Barlow,system-ui,sans-serif;color:var(--c-soft)}
body.career .jmodal.c-fb .jm-in{max-width:330px;padding:14px 14px 16px;gap:8px;border-width:2px;border-radius:18px}
.c-fb .c-btn{min-height:46px;font-size:17px;border-radius:14px}
.c-stars{display:flex;justify-content:center;gap:6px}
.c-stars button{width:42px;height:42px;border:0;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#33405F,#1E2740);box-shadow:inset 0 0 0 2px #5A6B99,0 4px 0 #0F1526;cursor:pointer;transition:transform .1s}
.c-stars svg{width:23px;height:23px;fill:#5A6B99}
.c-stars button.on{background:linear-gradient(180deg,#FFE066,#F0A000);box-shadow:inset 0 0 0 2px #FFF3B0,0 4px 0 #A86A00;transform:translateY(-3px)}.c-stars button.on svg{fill:#2B1D00}
.c-fb .tiny{text-align:center}
.c-fbt{width:100%;min-height:58px;border-radius:14px;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font:600 14px/1.3 Barlow,system-ui,sans-serif;padding:8px 10px;resize:none}

/* ---- existing screens, sized up to match ---- */
body.career .go,body.career .next{min-height:56px;font-size:19px}
body.career #cjoin .join-card{margin:0}
html.rm .c-earn,html.rm .c-pay.ready::after,html.rm .c-earn::before,html.rm .c-title img,html.rm .c-tap,html.rm .c-rays{animation:none}

/* ---- offline (packed app with no connection) ---- */
.c-off{position:fixed;left:0;right:0;top:calc(var(--c-hud) + env(safe-area-inset-top,0px));z-index:49;background:#C8283E;color:#fff;font:800 14px/1 var(--c-disp);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:7px 10px}
body.career.c-offline .wrap{padding-top:calc(var(--c-hud) + env(safe-area-inset-top,0px) + 38px)}
body.career.c-auth .c-off{display:none}

/* ---- Gaz's tour: keep him off the bottom bar button he is pointing at ---- */
.tour.gz-flip .npc-fig,.tour.gz-flip .npc-fig.is3d{left:auto;right:-6px;transform:scaleX(-1)}
@media (max-width:640px){.tour.gz-flip .tour-pop::before{left:auto!important;right:calc(var(--gz) * .3)!important}.tour.gz-flip .tour-pop::after{left:auto!important;right:calc(var(--gz) * .3 + 3px)!important}}

/* wardrobe: option rows share the "wrap" class with the page wrapper, so cancel the page padding on them */
body.career .mp-slots.ch-opts.wrap{padding:0 0 6px;margin:0 0 8px;max-width:none;z-index:auto}

/* Earn: level buttons sit beside the back button */
.c-earntop.has-seg{margin-top:-64px}
.c-earntop.has-seg .c-seg{margin-left:62px;padding:5px;border-radius:16px}
.c-earntop.has-seg .c-seg button{padding:8px 4px;font-size:20px;border-radius:12px}
.c-earntop.has-seg .c-seg button small{margin-top:2px;font-size:11.5px}

/* game clock on the home scene */
.c-clock{position:absolute;left:10px;top:66px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(10,15,31,.82);border-radius:999px;padding:5px 11px 5px 7px;font:800 15px/1 var(--c-disp);letter-spacing:.05em;text-transform:uppercase;color:#FFE9A8;pointer-events:none}
.c-clock svg{width:18px;height:18px;flex:none}.c-clock.night{color:#DCE6FF}
.c-clock:empty{display:none}
body.career #cStage .stagebox{transition:none}

/* the Tax Man */
.c-tax{display:flex;align-items:center;gap:10px;border:0;border-radius:16px;padding:11px 14px;background:linear-gradient(#C9343F,#9A1E2C);box-shadow:inset 0 0 0 2.5px #FFB3BA,0 6px 0 #5E0F19;font:600 13px/1.3 Barlow,system-ui,sans-serif;color:#FFE3E6;width:100%;text-align:left;cursor:pointer}
.c-tax[hidden],.c-bars[hidden]{display:none}
.c-tax b{display:block;font:800 20px/1 var(--c-disp);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.c-tax em{margin-left:auto;font:800 17px var(--c-disp);font-style:normal;letter-spacing:.06em;background:#fff;color:#9A1E2C;border-radius:12px;padding:10px 14px;text-transform:uppercase;flex:none}
.c-tax.jail{background:linear-gradient(#3A3F4D,#1F232D);box-shadow:inset 0 0 0 2.5px #AEB6C8,0 6px 0 #0D0F14;color:#DDE2EE}.c-tax.jail em{color:#1F232D}
.c-tm{width:44px;height:44px;flex:none}
.c-bars{position:absolute;inset:0;z-index:1;pointer-events:none}
.c-bars i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(12,14,20,0) 0 34px,#2A2E38 34px 38px,#8A93A6 38px 42px,#2A2E38 42px 46px);box-shadow:inset 0 0 0 8px #2A2E38,inset 0 0 60px rgba(0,0,0,.55)}
.c-bars b{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;background:#16161A;color:#FFD23A;font:800 17px/1 var(--c-disp);letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:10px;box-shadow:0 0 0 2px #FFD23A}
.c-tmcard.jail{border-color:#AEB6C8}.c-tmrow{display:flex;gap:12px;align-items:center}.c-tmrow .c-tm{width:64px;height:64px}
.c-tmrow span{display:block;font:600 14px/1.35 Barlow,system-ui,sans-serif;color:var(--c-soft)}.c-tmrow span b{color:#fff}
.c-tmamt{display:block;font:800 38px/1 var(--c-disp);letter-spacing:.02em;color:#fff;margin:2px 0 4px}
.c-tmrate{display:flex;gap:12px;align-items:center}.c-tmrate b{font:800 40px/1 var(--c-disp);color:var(--c-gold)}.c-tmrate span{font:600 14px/1.35 Barlow,system-ui,sans-serif;color:var(--c-soft)}
.c-bands div.on{color:var(--c-gold);font-weight:800}
.c-tmbig .c-tm{width:96px;height:96px;margin:0 auto;display:block}
body.career .jmodal.c-jailm .jm-in{border-color:#AEB6C8}
.c-btn[disabled]{opacity:.55}

/* jail bars drop down with a clang, and lift when the debt is cleared */
.c-bars{overflow:hidden}
.c-bars i{animation:cBarsDown .75s cubic-bezier(.5,0,.9,.4) both;transform-origin:50% 0}
.c-bars b{animation:cBarsTag .4s cubic-bezier(.2,1.6,.4,1) .8s both}
.c-stage.clang{animation:cClang .45s cubic-bezier(.36,.07,.19,.97) .62s both}
.c-bars.up i{animation:cBarsUp .7s cubic-bezier(.5,0,.6,1) both}.c-bars.up b{animation:none;opacity:0}
@keyframes cBarsDown{0%{transform:translateY(-104%)}62%{transform:translateY(0)}74%{transform:translateY(-5%)}86%{transform:translateY(0)}93%{transform:translateY(-1.5%)}100%{transform:translateY(0)}}
@keyframes cBarsUp{0%{transform:translateY(0)}20%{transform:translateY(2%)}100%{transform:translateY(-104%)}}
@keyframes cBarsTag{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes cClang{0%,100%{transform:none}20%{transform:translateY(5px)}40%{transform:translateY(-3px)}60%{transform:translateY(2px)}80%{transform:translateY(-1px)}}
html.rm .c-bars i,html.rm .c-bars b,html.rm .c-stage.clang,html.rm .c-bars.up i{animation:none}

/* police lights when the Tax Man sends you down */
.c-cops{position:fixed;inset:0;z-index:86;pointer-events:none;opacity:0}
.c-cops.on{opacity:1}
.c-cops::before,.c-cops::after{content:"";position:absolute;top:0;bottom:0;width:60%;opacity:0}
.c-cops::before{left:0;background:radial-gradient(ellipse 100% 70% at 0% 30%,rgba(40,110,255,.75),rgba(40,110,255,0) 70%)}
.c-cops::after{right:0;background:radial-gradient(ellipse 100% 70% at 100% 30%,rgba(255,40,50,.75),rgba(255,40,50,0) 70%)}
.c-cops.on::before{animation:cCop .5s steps(1) infinite}.c-cops.on::after{animation:cCop .5s steps(1) -.25s infinite}
@keyframes cCop{0%{opacity:1}12%{opacity:.25}24%{opacity:1}50%{opacity:0}100%{opacity:0}}

/* no scroll bars and no rubber-band pull anywhere in the app; pages that are longer than the screen still slide */
html:has(body.career){overscroll-behavior:none;scrollbar-width:none}
html:has(body.career)::-webkit-scrollbar,body.career ::-webkit-scrollbar{display:none;width:0;height:0}
body.career *{scrollbar-width:none}
body.career button,body.career a{touch-action:manipulation}
/* the home scene takes whatever height is left, so the home screen fits without sliding */
body.career #cStage{min-height:0}
body.career #cStage .stagebox{height:var(--stage-h,300px);min-height:0}

/* Earn screen: daily challenge, weak spots, exam countdown */
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c-mini{--g1:#3D9BFF;--g2:#1463E0;--g3:#7CC0FF;--g4:#0A3F99;display:flex;align-items:center;gap:9px;border:0;border-radius:16px;padding:11px 10px;min-height:66px;text-align:left;color:#fff;background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 2.5px var(--g3),0 5px 0 var(--g4);cursor:pointer;transition:transform .08s}
.c-mini:active{transform:translateY(3px)}
.c-mini.gold{--g1:#FFE066;--g2:#F0A000;--g3:#FFF3B0;--g4:#A86A00;color:#2B1D00}
.c-mini.done{--g1:#2E7D55;--g2:#1C5C3C;--g3:#8CE0B4;--g4:#0E3A25;color:#fff}
.c-mini i{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.16);display:grid;place-items:center}.c-mini i svg{width:22px;height:22px}
.c-mini b{display:block;font:800 18px/1 var(--c-disp);letter-spacing:.03em;text-transform:uppercase}
.c-mini small{display:block;font:600 11.5px/1.25 Barlow,system-ui,sans-serif;margin-top:3px;opacity:.9}
.c-exam{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--c-line);border-radius:16px;background:var(--c-panel);padding:10px 14px;text-align:left;color:#DCE7FF;cursor:pointer}
.c-exam b{display:block;font:800 19px/1 var(--c-disp);letter-spacing:.04em;text-transform:uppercase;color:#fff}.c-exam small{font:600 13px/1.3 Barlow,system-ui,sans-serif}
.c-exam em{margin-left:auto;font:800 15px var(--c-disp);font-style:normal;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:8px 12px;flex:none}
.c-ready{display:grid;gap:6px;max-height:34vh;overflow:auto;margin:4px 0 8px}
.c-ready div{display:grid;grid-template-columns:1fr 70px 38px;gap:8px;align-items:center;font:600 13px/1.2 Barlow,system-ui,sans-serif;color:#DCE7FF;text-align:left}
.c-ready i{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}.c-ready u{display:block;height:100%;background:var(--c-gold);transform-origin:0 50%;text-decoration:none}
.c-ready b{text-align:right;color:#fff}
.c-date{width:100%;min-height:50px;border-radius:14px;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font:700 17px Barlow,system-ui,sans-serif;padding:8px 12px;color-scheme:dark}
.c-lbtabs{margin-bottom:12px;flex-wrap:wrap}

/* sideways slide is cut off. The page itself (not the body) is the only thing that scrolls, otherwise touch scrolling stops working */
html:has(body.career){overflow-x:hidden}body.career{overflow-x:clip;max-width:100%}
body.career #boards .title{font-size:clamp(28px,9.6vw,56px);white-space:nowrap}
.c-menu{gap:7px}.c-menu .c-btn{min-height:44px;font-size:16px;padding:8px 12px;border-radius:13px}
.c-btn.danger{--g1:#D8485A;--g2:#A8222F;--g3:#FFB3BA;--g4:#5E0F19}