:root{font-family:'DM Sans',Arial,sans-serif;color:#fff;--accent:#65f395;--party:#24c46d;--ink:#132e32}*{box-sizing:border-box}body{margin:0;background:#a5cbd5;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid white;outline-offset:5px}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}#start[hidden],#start.start-panel[hidden],#game.playing #start{display:none!important;visibility:hidden!important}#game{position:relative;width:100vw;height:100dvh;min-height:480px;overflow:hidden}#scene{width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#17313e20,transparent 25%,transparent 65%,#102e3940)}.topbar{position:absolute;inset:28px 34px auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;font-weight:800;letter-spacing:1px;color:#fff;text-shadow:0 2px 14px #133e5260}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2.3px;font-weight:700;margin-top:2px}.brand-icon{display:grid;place-items:center;width:45px;height:48px;background:#173238;border:1px solid #ffffff40;border-radius:13px;font-size:35px;position:relative}.brand-icon span{font-family:Arial;font-size:23px;color:var(--accent);position:absolute;right:5px;top:-4px}.top-actions{display:flex;gap:8px;pointer-events:auto}.icon-button{width:44px;height:44px;border:1px solid #ffffff50;border-radius:50%;background:#183036c9;font-size:25px;position:relative;display:grid;place-items:center}.off-line{position:absolute;width:23px;height:2px;transform:rotate(-45deg);background:white}.glass{background:linear-gradient(135deg,#193b40ed,#10282eef);border:1px solid #ffffff35;box-shadow:0 18px 60px #08243226;backdrop-filter:blur(18px)}.start-panel{position:absolute;left:6%;top:50%;transform:translateY(-43%);width:390px;border-radius:25px;padding:31px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:64px;font-weight:700;letter-spacing:-1px;line-height:.96;margin:21px 0 17px}h1>span{color:var(--accent)}.start-panel p{font-size:14px;line-height:1.7;color:#c7d7d7;margin:0 0 25px}.select-label{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#d4e2e1;margin-bottom:10px}.party-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.party{position:relative;text-align:left;padding:13px 12px;background:#ffffff07;border:1px solid #ffffff25;border-radius:10px;min-height:67px;transition:background .2s,border-color .2s}.party i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--p);margin-right:6px}.party strong{font-size:20px}.party>span{display:block;font-size:10px;margin-top:4px;line-height:1.2;color:#c2d0d0}.party[data-party=PA]{--p:#44ee88}.party[data-party=ANC]{--p:#ffdd40}.party[data-party=DA]{--p:#4c94ff}.party[data-party=EFF]{--p:#dc1420}.party[data-party=ActionSA]{--p:#00a651}.party[data-party=NCC]{--p:#e02227}.party.selected{border-color:var(--p);background:color-mix(in srgb,var(--p) 12%,transparent)}.party:hover{background:#ffffff18}.primary{display:block;width:100%;border:0;border-radius:11px;padding:16px;margin-top:20px;background:var(--accent);color:#103229;font-weight:800;font-size:16px;box-shadow:0 5px 24px #45e77920}.primary:hover{filter:brightness(1.07)}.primary:active{transform:translateY(1px)}.round-details{display:flex;justify-content:space-between;margin-top:12px;font-size:9px;letter-spacing:1.1px;font-weight:700;color:#acc2c2}.fiction-note{text-align:center;margin-top:20px;font-size:10px;color:#a6bebe}#location{position:absolute;right:5%;bottom:45px;text-align:right;text-shadow:0 2px 12px #183f40}#location span{font-size:11px;letter-spacing:3px}#location strong{display:block;font-size:23px;margin-top:8px;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px}.timer{position:absolute;top:106px;left:34px;border-radius:15px;padding:12px 19px;min-width:135px}.timer small,.mission small{display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#b6ced0}.timer strong{font-family:'Barlow Condensed',sans-serif;font-size:43px;line-height:1.2;font-variant-numeric:tabular-nums}.timer.urgent strong{color:#ff8b73}.mission{position:absolute;left:50%;top:28px;transform:translateX(-50%);text-align:center;padding:13px 28px;border-radius:15px}.mission strong{font-family:'Barlow Condensed',sans-serif;font-size:30px;letter-spacing:.5px}.mission small{font-size:8px;margin-bottom:2px}.leaderboard{position:absolute;right:34px;top:106px;width:168px;border-radius:14px;padding:13px}.board-title{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:1px;color:#b2c9ca;padding-bottom:10px}.board-title>span{color:var(--accent);font-size:8px}.score-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;position:relative;margin-bottom:3px;background:#ffffff08}.score-row:last-child{margin-bottom:0}.score-row .dot{width:6px;height:6px;border-radius:50%;background:var(--p)}.score-row b{font-family:'Barlow Condensed',sans-serif;font-size:21px}.score-row strong{margin-left:auto;font-size:19px}.score-row em{font-style:normal;font-size:8px;opacity:.7}.score-row.you{background:color-mix(in srgb,var(--p) 22%,transparent);outline:1px solid color-mix(in srgb,var(--p) 40%,transparent)}.bottom-progress{position:absolute;bottom:37px;left:50%;transform:translateX(-50%);width:285px;border-radius:16px;padding:15px 20px}.bottom-progress>div:first-child{display:flex;justify-content:space-between;align-items:center}.bottom-progress span#your-party{font-size:11px;letter-spacing:1px;font-weight:700;color:var(--accent)}.bottom-progress strong{font-size:20px}.muted{color:#94aaaf;font-weight:500}.progress-track{height:9px;background:#ffffff20;border-radius:8px;margin:11px 0 8px;overflow:hidden}#progress{height:100%;width:0;background:var(--accent);border-radius:8px;transition:width .3s}.bottom-progress small{display:block;font-size:10px;text-align:center;color:#bcd0d1}#joystick{position:absolute;bottom:42px;left:45px;width:142px;height:142px;border-radius:50%;background:#16353b33;border:2px solid #ffffff66;touch-action:none;user-select:none;backdrop-filter:blur(4px)}#stick{position:absolute;width:62px;height:62px;left:38px;top:38px;border-radius:50%;background:#ffffff77;border:5px solid #ffffff50;box-shadow:0 4px 18px #173e4030;pointer-events:none}.joystick-mark{position:absolute;color:#ffffffaa;font-size:20px}.north{top:4px;left:61px}.south{bottom:4px;left:61px}.west{left:8px;top:56px}.east{right:8px;top:56px}#boost{position:absolute;bottom:48px;right:54px;width:118px;height:118px;border-radius:50%;border:4px solid white;background:linear-gradient(135deg,var(--party),#0c583d);box-shadow:0 0 0 5px #ffffff30,0 7px 25px #102d3860;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation}#boost svg{width:45px;height:45px;fill:#fff;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#boost>span{font-family:'Barlow Condensed',sans-serif;font-size:19px;letter-spacing:1px}#boost small{font-size:8px;letter-spacing:1px;opacity:.7}#boost:disabled{cursor:default;filter:saturate(.3);opacity:.8}.controls-hint{position:absolute;bottom:17px;left:45px;font-size:8px;letter-spacing:1px;color:#fff;text-shadow:0 1px 5px #123}.controls-hint span{color:#e2e9eb}#toast{position:absolute;top:28%;left:50%;transform:translate(-50%,-15px);opacity:0;transition:.2s;pointer-events:none;background:#153739ec;padding:11px 21px;border:1px solid #ffffff50;border-radius:30px;font-size:13px;font-weight:700;text-align:center;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}#floating{position:absolute;inset:0;pointer-events:none}.floater{position:absolute;white-space:nowrap;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;color:var(--accent);text-shadow:0 2px 4px #08250f;animation:float 1.4s ease-out forwards}@keyframes float{0%{transform:translate(-50%,-20%);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-130px);opacity:0}}.modal-backdrop{position:absolute;inset:0;background:#0b26365c;backdrop-filter:blur(8px);display:grid;place-items:center}.modal{width:min(390px,90%);border-radius:23px;padding:32px;text-align:center}.modal .eyebrow{justify-content:center}.modal h2{font-family:'Barlow Condensed',sans-serif;font-size:47px;line-height:1;margin:20px 0 15px}.modal p{font-size:14px;color:#c2d5d8;line-height:1.7}.secondary{border:0;background:transparent;padding:17px 10px 0;color:#c4d6d7;font-size:13px}.end-number{font-family:'Barlow Condensed',sans-serif;font-size:62px;color:var(--accent)}.end-number small{font-size:20px;color:#b9cbcd}.error{position:absolute;inset:30%;background:#17343a;padding:30px;border-radius:15px;text-align:center}
@media(min-width:1500px){.start-panel{left:9%;width:410px;padding:36px}h1{font-size:72px}}
@media(max-width:700px){.topbar{inset:18px 18px auto}.brand{font-size:20px;gap:8px}.brand-icon{width:36px;height:40px;font-size:29px}.brand small{font-size:8px;letter-spacing:1.4px}.icon-button{width:36px;height:36px;font-size:21px}.start-panel{left:16px;right:16px;top:auto;bottom:20px;transform:none;width:auto;max-width:400px;margin:auto;padding:22px;border-radius:22px}h1{font-size:49px;margin:12px 0}.start-panel p{font-size:13px;line-height:1.55;margin-bottom:17px}.eyebrow{font-size:8px;letter-spacing:1.4px}.party{min-height:57px;padding:9px 11px}.party strong{font-size:19px}.party>span{font-size:9px}.primary{padding:14px;margin-top:14px}.fiction-note{margin-top:12px;font-size:9px}.select-label{font-size:9px}.round-details{font-size:8px}.start-panel h1 br{display:none}#location{display:none}.mission{top:80px;padding:9px 15px;min-width:164px;border-radius:12px}.mission small{display:none}.mission strong{font-size:23px}.timer{left:14px;top:80px;padding:8px 11px;min-width:72px;border-radius:12px}.timer small{font-size:7px;letter-spacing:1px}.timer strong{font-size:29px}.leaderboard{right:14px;top:147px;width:109px;padding:8px;border-radius:11px}.board-title{font-size:7px;letter-spacing:.5px;padding-bottom:6px}.board-title>span{font-size:6px}.score-row{gap:5px;padding:4px 5px}.score-row b{font-size:18px}.score-row strong{font-size:16px}.score-row em{font-size:6px}.score-row .dot{width:5px;height:5px}.bottom-progress{bottom:25px;width:184px;padding:10px 13px;border-radius:13px}.bottom-progress span#your-party{font-size:9px}.bottom-progress strong{font-size:17px}.bottom-progress small{font-size:8px}.progress-track{height:7px;margin:7px 0}.controls-hint{display:none}#joystick{width:106px;height:106px;left:20px;bottom:133px}#stick{width:48px;height:48px;left:27px;top:27px;border-width:4px}.north,.south{left:44px}.west,.east{top:38px}#boost{width:91px;height:91px;right:22px;bottom:140px;border-width:3px}#boost svg{width:33px;height:33px}#boost>span{font-size:16px}#boost small{display:none}#toast{top:35%;font-size:11px;max-width:90%;white-space:normal}.error{inset:25% 10%}}
@media(max-height:660px) and (min-width:701px){.start-panel{top:85px;bottom:15px;transform:none;padding:20px;width:355px}h1{font-size:48px;margin:12px 0}.start-panel p{margin-bottom:12px}.fiction-note{margin-top:10px}.party{padding:8px;min-height:55px}.primary{margin-top:12px;padding:12px}}
@media(max-height:650px) and (max-width:700px){.start-panel{padding:17px;bottom:12px}h1{font-size:40px}.start-panel p{margin-bottom:10px}.fiction-note{display:none}#joystick{bottom:110px}#boost{bottom:117px}.leaderboard{top:134px}}
.neighbourhood-map{position:absolute;left:34px;top:213px;width:140px;padding:9px;border-radius:13px;text-align:center;pointer-events:none}.neighbourhood-map>span{font-size:12px;font-weight:700}.neighbourhood-map canvas{display:block;width:120px;height:120px}.neighbourhood-map small{font-size:7px;letter-spacing:1px;color:#c5d4d0}.resident-tip{font-size:11px;line-height:1.5;color:#d9d9b0;margin-top:15px}.speech{position:absolute;transform:translate(-50%,-100%);max-width:210px;padding:12px 15px;border:2px solid #c4e6d2;border-radius:16px 16px 16px 3px;background:#fffdf1;color:#263b3b;box-shadow:0 5px 20px #0c262340;font-weight:700;font-size:14px;line-height:1.3;text-align:center;pointer-events:none;animation:speech-in .16s ease-out}.speech:after{content:'';position:absolute;bottom:-10px;left:calc(50% - 7px);border-top:10px solid #fffdf1;border-left:7px solid transparent;border-right:7px solid transparent}#speech-layer{position:absolute;inset:0;pointer-events:none}@keyframes speech-in{from{opacity:0;margin-top:8px}to{opacity:1;margin-top:0}}
@media(max-width:700px){.neighbourhood-map{left:14px;top:158px;width:96px;padding:5px}.neighbourhood-map>span{font-size:9px}.neighbourhood-map canvas{width:84px;height:84px}.neighbourhood-map small{font-size:5px;letter-spacing:.5px}.resident-tip{font-size:10px;margin-top:10px}.speech{font-size:12px;max-width:190px;padding:9px 11px}.start-panel h1{font-size:44px}}
@media(max-height:670px){.resident-tip{display:none}.start-panel .fiction-note{margin-top:8px}.start-panel{padding-top:18px;padding-bottom:18px}.start-panel h1{font-size:44px}.neighbourhood-map{top:205px}.neighbourhood-map canvas{height:80px;width:80px}.neighbourhood-map{width:100px}.neighbourhood-map small{display:none}}
.party-logo{float:left;width:36px;height:36px;object-fit:contain;margin-right:9px;padding:3px;background:#fffdf1;border-radius:50%}.party[data-party=DA] .party-logo{background:#0874bd}.party>span{clear:both;padding-top:3px}.score-logo{width:22px;height:22px;object-fit:contain;background:#fffdf1;border-radius:50%;padding:2px}.score-row[style*="6aa6ff"] .score-logo{background:#0874bd}.fiction-note a{color:#bfe8d2;text-decoration:underline;text-underline-offset:2px}.speech{max-width:240px;font-size:14px}.start-panel{max-height:calc(100dvh - 105px);overflow-y:auto;scrollbar-width:thin}.party-grid{gap:7px}
@media(max-width:700px){.party-logo{width:31px;height:31px;margin-right:7px}.party>span{font-size:9px}.speech{max-width:215px;font-size:13px}.start-panel{max-height:calc(100dvh - 95px)}.score-logo{width:16px;height:16px;padding:1px}}

.ward-select{display:flex;gap:8px;margin:14px 0}.ward-select button{flex:1;border:1px solid #ffffff30;border-radius:10px;padding:9px;background:#ffffff0c;color:#d7e5df;font:700 12px system-ui;cursor:pointer}.ward-select button[aria-pressed="true"]{border-color:#65ef9e;background:#1b6947;color:white}.ward-select button span{display:block;font-size:10px;font-weight:400;margin-top:3px}
.ward-select button small{display:block;font-size:10px;font-weight:400;margin-top:3px}

.party-grid{max-height:245px;overflow-y:auto;padding:2px;scrollbar-width:thin}.party strong{font-size:17px}.party>span{font-size:10px}.ward-select button{min-width:0;font-size:12px;padding:8px 4px}.ward-select small{line-height:1.2}.start-panel h1{font-size:40px}.start-panel>p{margin-bottom:12px}.resident-tip{line-height:1.5}.score-row b{font-size:12px}
@media(max-width:700px){.party-grid{max-height:210px}.start-panel h1{font-size:32px}.ward-select small{font-size:9px}.party strong{font-size:15px}.start-panel{padding-top:18px;padding-bottom:18px}.select-label{font-size:10px}}

.party[data-party="ActionSA"] .party-logo{background:#ffffff!important;border:1.5px solid #00a651!important}.party[data-party="EFF"] .party-logo{background:#dc1420!important;border:1.5px solid #ff4545!important}.party[data-party="NCC"] .party-logo{background:#0b0d0e!important;border:1.5px solid #e02227!important}.score-row[style*="00a651"] .score-logo{background:#ffffff}.score-row[style*="dc1420"] .score-logo{background:#dc1420}.score-row[style*="e02227"] .score-logo{background:#0b0d0e}

/* Collapsible HUD widgets & mobile declutter */
.pill-toggle{background:#ffffff18;border:1px solid #ffffff30;color:#c4d7d6;font-size:10px;cursor:pointer;border-radius:6px;padding:1px 5px;margin-left:auto;line-height:1.2;transition:background .15s,color .15s}
.pill-toggle:hover{background:#ffffff35;color:#fff}
.map-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.leaderboard.collapsed{width:auto;min-width:0;padding:6px 10px;cursor:pointer}
.leaderboard.collapsed #scores{display:none}
.leaderboard.collapsed .board-title span{display:none}
.neighbourhood-map.collapsed{width:auto;min-width:0;padding:6px 10px;cursor:pointer;pointer-events:auto}
.neighbourhood-map.collapsed canvas,.neighbourhood-map.collapsed small{display:none}

@media(max-width:700px){
  /* Remove brand header completely during gameplay on mobile */
  #game.playing .topbar .brand,
  #game:has(#hud:not([hidden])) .topbar .brand{display:none!important}
  #game.playing .topbar{inset:10px 12px auto}
  #game.playing .top-actions{position:absolute;right:0;top:0}
  
  /* Compact unified top row */
  .timer{left:10px;top:10px;padding:5px 10px;min-width:0;border-radius:12px;display:flex;align-items:baseline;gap:5px;z-index:10}
  .timer small{display:inline;font-size:8px;letter-spacing:.5px}
  .timer strong{font-size:20px;line-height:1}
  .mission{top:10px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:12px;min-width:0;z-index:10}
  .mission small{display:none}
  .mission strong{font-size:14px;letter-spacing:.5px}
  .icon-button{width:34px;height:34px;font-size:18px}

  /* Compact non-intrusive placement for map and standings */
  .neighbourhood-map{left:10px;top:54px;width:90px;padding:5px 6px;pointer-events:auto;z-index:8}
  .neighbourhood-map canvas{width:78px;height:78px}
  .leaderboard{right:10px;top:54px;width:100px;padding:6px 7px;z-index:8}
  .leaderboard.collapsed,.neighbourhood-map.collapsed{padding:5px 8px}
  .board-title{font-size:8px}
  .score-row{padding:3px 4px;gap:4px}
  .score-row b{font-size:11px}
  .score-row strong{font-size:13px}
  .score-logo{width:14px;height:14px}
}

/* Mobile-first controls, legible tactical map and low-cost compositing. */
#game{min-height:0}.neighbourhood-map{width:186px;pointer-events:auto;border-color:var(--leader,#b8cdca);transition:border-color .3s}.neighbourhood-map canvas{width:166px;height:176px;border-radius:9px;touch-action:none;cursor:crosshair}.map-head{font-size:12px;gap:4px}.map-head>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#map-leader{display:block;font-size:12px;color:var(--leader,#d4e1df);margin-top:6px}.neighbourhood-map small{display:block;font-size:8px;letter-spacing:.2px;margin-top:4px}.neighbourhood-map.collapsed #map-leader{display:none}.pill-toggle{min-width:30px;min-height:30px;font-size:16px;flex-shrink:0}.hole-level{font-size:10px;text-align:center;letter-spacing:.4px;color:var(--accent);margin-bottom:5px}.rival-alert{position:absolute;right:34px;top:360px;width:205px;padding:12px;border-radius:13px;border-left:4px solid var(--rival,#ffda70);z-index:12}.rival-alert>span{display:block;font-size:13px;line-height:1.4}.rival-alert button{margin-top:8px;width:100%;min-height:40px;border:1px solid #ffdc7480;background:#ffdc741c;border-radius:8px;font-size:12px;font-weight:700;color:#ffe39d}.rival-alert.urgent{border-color:#ffb27b}.party strong{font-family:Arial,sans-serif}.party.selected{border-color:var(--p,var(--accent))}.timer strong,.mission strong,.brand,.start-panel h1{font-family:'Arial Narrow',Impact,Arial,sans-serif}.top-actions{margin-left:auto}#toast{z-index:20}.neighbourhood-map.collapsed{width:auto}.score-row em{font-size:9px}
@media(max-width:900px),(pointer:coarse){
 .glass,#joystick{backdrop-filter:none}.glass{background:#163338ed;box-shadow:0 3px 12px #08243220}.topbar{inset:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) auto max(10px,env(safe-area-inset-left));z-index:15}.icon-button{width:40px;height:40px}.start-panel{max-height:calc(100dvh - 82px);overscroll-behavior:contain}.party{min-height:62px}.party>span{font-size:11px}.ward-select button{min-height:48px}.ward-select small{font-size:10px}.mission{top:8px;left:50%;transform:translateX(-50%);padding:4px 10px;min-width:0;z-index:12}.mission strong{font-size:13.5px}.timer{left:10px;top:8px;min-width:0;padding:4px 8px;display:flex;gap:4px;align-items:center;z-index:12}.timer strong{font-size:20px}.timer small{font-size:7.5px}.neighbourhood-map{right:10px;bottom:120px;left:auto;top:auto;width:110px;padding:5px}.neighbourhood-map canvas{width:100px;height:106px}.map-head{font-size:9.5px}#map-leader{font-size:9.5px}.neighbourhood-map small{display:none}.leaderboard{right:10px;top:60px;width:125px;padding:6px;z-index:12}.board-title{font-size:8.5px;letter-spacing:0;align-items:center;padding-bottom:3px;gap:3px}.board-title>span{font-size:8px}.score-row{padding:4px 5px;gap:4px}.score-row b{font-size:11px}.score-row strong{font-size:15px}.score-logo{width:16px;height:16px}.score-row em{font-size:7px}.bottom-progress{bottom:max(10px,env(safe-area-inset-bottom));width:198px;padding:8px 10px}.bottom-progress small{font-size:9px}.hole-level{font-size:9px}#joystick{left:max(14px,env(safe-area-inset-left));bottom:calc(110px + env(safe-area-inset-bottom));width:108px;height:108px}#stick{left:29px;top:29px;width:48px;height:48px}.north,.south{left:46px}.west,.east{top:40px}#boost{right:max(14px,env(safe-area-inset-right));bottom:calc(116px + env(safe-area-inset-bottom));width:86px;height:86px}.controls-hint{display:none}#toast{top:42%;font-size:11.5px;max-width:85%;white-space:normal}.resident-tip{display:block;font-size:11px}.map-head .pill-toggle{min-width:26px}.start-panel h1{font-size:32px}.start-panel .eyebrow{display:none}#game.playing .brand{display:none}.mission small{display:none}
}
@media(max-height:600px) and (orientation:landscape){
 .start-panel{left:16px;top:65px;bottom:10px;width:390px;transform:none;padding:15px;max-height:calc(100dvh - 75px)}.start-panel h1{font-size:28px;margin:7px 0}.party-grid{max-height:145px}.start-panel p{font-size:12px;margin-bottom:5px}.timer{top:10px}.mission{top:10px}.neighbourhood-map{top:55px;width:110px}.neighbourhood-map canvas{width:98px;height:104px}.leaderboard{top:55px;width:120px}.bottom-progress{bottom:8px;width:220px}#joystick{bottom:12px;left:14px;width:90px;height:90px}#stick{left:22px;top:22px}.north,.south{left:37px}.west,.east{top:31px}#boost{bottom:16px;right:16px;width:76px;height:76px}.neighbourhood-map small{display:none}#toast{top:48%}
}
@media(max-width:360px){
 .neighbourhood-map{width:100px}.neighbourhood-map canvas{width:90px;height:96px}.leaderboard{width:115px}.bottom-progress{width:180px}.mission strong{font-size:12px}
}
#hud:has(.rival-alert.visible) .crisis-hud {
 display: none !important;
}

/* A compact, opaque opening card keeps the landscape crisp. */
.start-panel{background:#122f34;backdrop-filter:none;border:1px solid #ffffff40;border-radius:24px;padding:25px;width:410px;max-height:calc(100dvh - 110px);overflow-y:auto;scrollbar-width:thin;transform:translateY(-46%)}
.start-panel h1{font-family:Arial,sans-serif;font-size:43px;letter-spacing:-1.8px;line-height:1.04;margin:15px 0 12px}.start-panel p{font-size:13px;line-height:1.6;margin-bottom:16px}.start-stats{display:flex;gap:8px;margin:0 0 20px;padding:12px 0;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18}.start-stats span{flex:1;font-size:10px;color:#b8ccca}.start-stats b{display:block;font-size:24px;color:var(--accent);margin-bottom:3px}.ward-heading{margin-bottom:8px}.start-panel .party-grid{max-height:220px;overflow-y:auto;padding:2px;scrollbar-width:thin}.start-panel .primary{margin-top:16px}.start-panel .resident-tip{font-size:10px;line-height:1.5;margin-top:13px}.start-panel .fiction-note{margin-top:12px}.start-panel .party{min-height:60px;padding:10px}.start-panel .ward-select{margin-bottom:17px}
@media(max-width:700px){.start-panel{left:12px;right:12px;width:auto;top:80px;bottom:12px;transform:none;max-height:none;padding:20px}.start-panel h1{font-size:36px}.start-stats{margin-bottom:15px}.start-panel .party-grid{max-height:190px}.start-panel p{margin-bottom:12px}}
@media(max-height:600px) and (orientation:landscape){.start-panel{top:70px;bottom:10px;left:16px;width:410px;transform:none;max-height:none}.start-panel h1{font-size:32px}}

.start-panel{top:90px;bottom:20px;transform:none;max-height:none;padding:22px;width:430px}.start-panel h1{font-size:36px;margin:12px 0 9px}.start-panel p{font-size:12px;margin-bottom:10px}.start-stats{margin-bottom:13px;padding:9px 0}.start-stats b{font-size:21px}.start-panel .ward-select{margin-bottom:12px}.start-panel .party-grid{max-height:150px}.start-panel .primary{position:sticky;bottom:0;z-index:2;margin-top:12px;padding:14px}.start-panel .resident-tip{margin-top:10px;font-size:10px}.start-panel .round-details{display:none}.start-panel .fiction-note{margin-top:8px}
@media(max-width:700px){.start-panel{left:12px;right:12px;top:78px;bottom:12px;width:auto;padding:18px}.start-panel h1{font-size:32px}.start-panel .party-grid{max-height:180px}.start-panel .eyebrow{display:none}}
@media(max-height:600px) and (orientation:landscape){.start-panel{top:70px;width:410px}.start-panel .party-grid{max-height:140px}}
.start-panel h1 br{display:block}.start-panel{bottom:auto;max-height:calc(100dvh - 110px)}@media(max-width:700px){.start-panel{max-height:calc(100dvh - 90px)}}@media(max-height:600px) and (orientation:landscape){.start-panel{max-height:calc(100dvh - 80px)}}

/* ========================================================
   HUD Redesign: Circular Radar, Sub-Pause Sound, Alert Popup,
   Smaller Timer, and Clean Bottom Layout
   ======================================================== */
.bottom-progress {
  display: none !important;
}

#game.playing .topbar .brand,
#game:has(#hud:not([hidden])) .topbar .brand {
  display: none !important;
}

/* Compact Timer */
.timer {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  padding: 4px 9px !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 15 !important;
  background: rgba(25, 59, 64, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 3px 12px rgba(8, 36, 50, 0.25) !important;
}
.timer small {
  display: inline !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #b6ced0 !important;
  line-height: 1 !important;
}
.timer strong {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Top Actions: Single Pause button, Sound appears directly beneath Pause */
.topbar {
  inset: 12px 14px auto !important;
  z-index: 35 !important;
}
.top-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 35 !important;
  pointer-events: auto !important;
}
.top-actions .icon-button {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
  border-radius: 50% !important;
  background: rgba(24, 48, 54, 0.92) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
}
.top-actions #sound {
  animation: sound-appear 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes sound-appear {
  from { opacity: 0; transform: translateY(-8px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Leaderboard: CURRENTLY IN FRONT positioned below top actions */
.leaderboard {
  position: absolute !important;
  right: 12px !important;
  top: 96px !important;
  width: 108px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
  z-index: 10 !important;
  background: rgba(22, 51, 56, 0.92) !important;
}
.board-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #b2c9ca !important;
  padding-bottom: 5px !important;
}
.board-title > span {
  color: var(--accent) !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
}
.score-row {
  padding: 3px 5px !important;
  gap: 4px !important;
  margin-bottom: 2px !important;
}
.score-row b {
  font-size: 11px !important;
}
.score-row strong {
  font-size: 13px !important;
}
.score-logo {
  width: 14px !important;
  height: 14px !important;
}

/* ========================================================
   GTA-Style Radar, Centered Alert Banner, Confetti & Modal Blur
   ======================================================== */
.modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8, 20, 26, 0.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 100 !important;
}
.modal-backdrop[hidden],
#modal[hidden] {
  display: none !important;
}
.confetti-canvas[hidden],
#confetti[hidden] {
  display: none !important;
}
.modal-party-badge {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid var(--party-win, #65f395) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.5), 0 0 16px var(--party-win, rgba(101, 243, 149, 0.45)) !important;
  margin: 0 auto 8px !important;
  display: grid !important;
  place-items: center !important;
  padding: 4px !important;
  animation: badge-pop 0.35s cubic-bezier(0.18, 1, 0.32, 1) !important;
  box-sizing: border-box !important;
}
.modal-party-badge[hidden] {
  display: none !important;
}
.modal-party-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  display: block !important;
}
@keyframes badge-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal {
  z-index: 101 !important;
  width: min(420px, 92vw) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  padding: 16px 16px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}
.modal h2 {
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: clamp(17px, 2.2vw, 21px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 6px 0 4px !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: -0.3px !important;
}
.modal p {
  font-size: 12.5px !important;
  color: #c2d5d8 !important;
  line-height: 1.4 !important;
  margin: 2px 0 6px !important;
}

.end-number {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: clamp(32px, 6vw, 42px) !important;
  line-height: 1 !important;
  color: var(--accent, #65f395) !important;
  margin: 4px 0 1px !important;
}
.end-number small {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #b9cbcd !important;
  letter-spacing: 0.5px !important;
}

/* Victory Share Box */
.victory-share-box {
  margin: 8px 0 10px !important;
  padding: 10px 10px 12px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(8, 38, 30, 0.95), rgba(4, 20, 28, 0.95)) !important;
  border: 1.5px solid var(--accent, #65f395) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(101, 243, 149, 0.2) !important;
  animation: badge-pop 0.35s ease-out !important;
}
.victory-share-box[hidden] {
  display: none !important;
}
.share-header-badge {
  display: inline-block !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(101, 243, 149, 0.18) !important;
  color: #65f395 !important;
  border: 1px solid rgba(101, 243, 149, 0.4) !important;
  margin-bottom: 4px !important;
}
.share-title {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  text-align: center !important;
  margin-bottom: 2px !important;
}
.share-copy-sub {
  font-size: 11px !important;
  color: #b9d8d1 !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
.share-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
}
.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 8px 6px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  min-height: 38px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.share-btn:hover {
  transform: translateY(-1px) scale(1.02) !important;
}
.share-btn:active {
  transform: scale(0.97) !important;
}
.share-btn.whatsapp,
.share-btn.twitter,
.share-btn.copy,
.share-btn.native {
  width: 100% !important;
  flex: none !important;
}
.share-btn.whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35) !important;
}
.share-btn.whatsapp:hover {
  background: linear-gradient(135deg, #2ae16e, #149c8d) !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5) !important;
}
.share-btn.twitter {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #38444d !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45) !important;
}
.share-btn.twitter:hover {
  background: #16181c !important;
  border-color: #555 !important;
}
.share-btn.copy {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.share-btn.copy:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: var(--accent, #65f395) !important;
  box-shadow: 0 3px 10px rgba(101, 243, 149, 0.25) !important;
}
.share-btn.native {
  background: rgba(101, 243, 149, 0.16) !important;
  color: var(--accent, #65f395) !important;
  border-color: rgba(101, 243, 149, 0.45) !important;
}
.share-btn.native:hover {
  background: rgba(101, 243, 149, 0.25) !important;
}
.share-btn[hidden] {
  display: none !important;
}
#share-native[hidden] ~ #share-copy {
  grid-column: 1 / -1 !important;
}
.share-btn svg {
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
}
.confetti-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 105 !important; position: fixed !important;
}
#next-ward {
  margin-top: 8px !important;
  padding: 12px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}
#retry-ward {
  background: #e27c38 !important;
  box-shadow: 0 5px 24px rgba(226, 124, 56, 0.35) !important;
  color: #fff !important;
  margin-top: 8px !important;
  padding: 12px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}
#retry-ward:hover {
  filter: brightness(1.1) !important;
}
.secondary {
  padding: 8px 10px 0 !important;
  font-size: 12px !important;
}

/* GTA Circular Minimap Radar */
.neighbourhood-map {
  position: absolute !important;
  left: auto !important;
  right: 18px !important;
  top: auto !important;
  bottom: 124px !important;
  width: 98px !important;
  height: 98px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 3px solid #13222a !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 0 12px rgba(0, 0, 0, 0.9) !important;
  background: #0c161c !important;
  pointer-events: auto !important;
  z-index: 12 !important;
}
.neighbourhood-map canvas {
  width: 98px !important;
  height: 98px !important;
  border-radius: 50% !important;
  display: block !important;
  touch-action: none !important;
  cursor: crosshair !important;
}
.neighbourhood-map .map-head {
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
  width: max-content !important;
}
.neighbourhood-map #street-name {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #f0f7f6 !important;
  background: rgba(10, 22, 26, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
.neighbourhood-map .pill-toggle,
.neighbourhood-map #map-leader,
.neighbourhood-map small {
  display: none !important;
}

/* RALLY Button */
#boost {
  position: absolute !important;
  bottom: 22px !important;
  right: 20px !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  border: 3.5px solid white !important;
  background: linear-gradient(135deg, var(--party), #0c583d) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(16, 45, 56, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
  z-index: 12 !important;
}
#boost svg {
  width: 28px !important;
  height: 28px !important;
}
#boost > span {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}
#boost small {
  display: none !important;
}

/* Joystick */
#joystick {
  position: absolute !important;
  bottom: 22px !important;
  left: 18px !important;
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  background: rgba(22, 53, 59, 0.35) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  touch-action: none !important;
  user-select: none !important;
  z-index: 12 !important;
}

/* Top Rival Alert Banner - Clean, spacious, mobile-friendly notification card */
.rival-alert {
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-12px) !important;
  width: min(440px, calc(100vw - 20px)) !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  border: 2px solid var(--rival, #ffda70) !important;
  background: rgba(10, 26, 32, 0.96) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 35 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  backdrop-filter: blur(12px) !important;
}
.rival-alert.visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}
.alert-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  padding: 3px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.alert-party-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 50% !important;
}
.alert-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
.alert-tag {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: var(--rival, #ffda70) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
.alert-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.alert-title b {
  color: var(--rival, #ffda70) !important;
  font-weight: 800 !important;
}
.alert-title em {
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11.5px !important;
  margin-left: 2px !important;
}
.alert-action-btn,
.rival-alert button.alert-action-btn,
.rival-alert #hunt-rival {
  width: auto !important;
  margin: 0 !important;
  min-height: 32px !important;
  border: 1.5px solid rgba(255, 220, 116, 0.8) !important;
  background: rgba(255, 220, 116, 0.25) !important;
  color: #fff3be !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
.alert-action-btn:hover {
  background: rgba(255, 220, 116, 0.45) !important;
  transform: scale(1.04) !important;
}
.alert-action-btn:active {
  transform: scale(0.96) !important;
}
.alert-close,
.rival-alert button.alert-close,
.rival-alert #close-rival-alert {
  width: auto !important;
  margin: 0 0 0 2px !important;
  min-height: auto !important;
  background: none !important;
  border: none !important;
  color: #9cb2b0 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 3px 6px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.alert-close:hover {
  color: #fff !important;
}
@media (max-width: 700px) {
  .rival-alert {
    top: 48px !important;
    width: calc(100vw - 18px) !important;
    max-width: 370px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }
  .alert-icon-wrap {
    width: 32px !important;
    height: 32px !important;
  }
  .alert-tag {
    font-size: 8.5px !important;
  }
  .alert-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .alert-action-btn {
    padding: 5px 9px !important;
    font-size: 10.5px !important;
  }
  .alert-close {
    padding: 2px 4px !important;
    font-size: 14px !important;
  }
  .crisis-hud {
    top: 44px !important;
    font-size: 11.5px !important;
    padding: 3px 10px !important;
  }
}

/* Pause Button SVG & Modern Hover */
#pause svg {
  display: block !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
#pause:hover {
  background: rgba(30, 60, 70, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  transform: scale(1.06) !important;
}

/* Gamified Level Selector (10 Cape Town Wards) */
.level-select {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 7px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  margin: 10px 0 16px !important;
}
.level-select::-webkit-scrollbar {
  width: 5px !important;
}
.level-select::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 4px !important;
}
.level-select::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
}
.level-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 8px 6px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #d7e5df !important;
  transition: all 0.2s cubic-bezier(0.18, 1, 0.32, 1) !important;
  cursor: pointer !important;
  min-height: 62px !important;
}
.level-card .lvl-badge {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  margin-bottom: 4px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
.level-card.easy .lvl-badge { background: #1c7340 !important; color: #9dfad8 !important; }
.level-card.medium .lvl-badge { background: #876214 !important; color: #ffe699 !important; }
.level-card.hard .lvl-badge { background: #8c2626 !important; color: #ffb3b3 !important; }
.level-card.expert .lvl-badge { background: #731c6a !important; color: #f7a8ed !important; }
.level-card strong {
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  line-height: 1.1 !important;
  color: #fff !important;
}
.level-card small {
  font-size: 9px !important;
  opacity: 0.82 !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
  display: block !important;
}
.level-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-1px) !important;
}
.level-card[aria-pressed="true"] {
  border-color: var(--accent, #65f395) !important;
  background: rgba(101, 243, 149, 0.18) !important;
  box-shadow: 0 0 16px rgba(101, 243, 149, 0.3) !important;
}
.level-card.hard[aria-pressed="true"] {
  border-color: #ff6868 !important;
  background: rgba(255, 104, 104, 0.22) !important;
  box-shadow: 0 0 18px rgba(255, 104, 104, 0.35) !important;
}
.level-card.expert[aria-pressed="true"] {
  border-color: #f755e3 !important;
  background: rgba(247, 85, 227, 0.22) !important;
  box-shadow: 0 0 18px rgba(247, 85, 227, 0.35) !important;
}

/* Arcade Feature Perks */
.arcade-perks {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}
.arcade-perks span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #c7dedd !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  letter-spacing: 0.3px !important;
}
.tagline {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: #c7dedd !important;
  margin: 0 0 16px !important;
}

/* Crisis HUD Tracker */
.crisis-hud {
  position: absolute !important;
  left: 50% !important;
  top: 72px !important;
  transform: translateX(-50%) !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  border: 1px solid #ffaa44 !important;
  background: rgba(35, 18, 8, 0.92) !important;
  color: #ffdd99 !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 10 !important;
  box-shadow: 0 3px 14px rgba(255, 170, 68, 0.4) !important;
  animation: pulse-crisis 2s infinite ease-in-out !important;
}
.crisis-hud[hidden] {
  display: none !important;
}
@keyframes pulse-crisis {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 170, 68, 0.35); }
  50% { box-shadow: 0 0 18px rgba(255, 170, 68, 0.75); }
}


/* Keep the crisis pill clear of the mission banner on larger screens */
@media (min-width: 701px) { .crisis-hud { top: 132px !important; } }
/* Mobile touch comfort: no text selection / tap highlight / overscroll while playing */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#game{touch-action:none;-webkit-user-select:none;user-select:none}
@media (prefers-reduced-motion: reduce){.crisis-hud{animation:none !important}}

/* Extreme mobile performance: eliminate all GPU compositor blur bottlenecks */
@media (max-width: 900px), (pointer: coarse) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass {
    background: rgba(18, 45, 52, 0.94) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  }
}