:root {
  color-scheme: dark;
  --ink: #f7f4df;
  --muted: #989bb0;
  --lime: #ceff42;
  --purple: #7b4dff;
  --pink: #ff4b8b;
  --cyan: #40e4ff;
  --panel: #15182a;
  --deep: #080a15;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05060c; }
body { display: grid; place-items: center; touch-action: pan-x pan-y; user-select: none; }
button { color: inherit; font: inherit; border: 0; cursor: pointer; touch-action: manipulation; }

#app {
  position: relative;
  width: min(100vw, 480px);
  height: 100vh;
  height: 100dvh;
  max-height: 960px;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%, #292150 0, #111426 34%, var(--deep) 70%);
  box-shadow: 0 0 80px #000;
}

.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: flex; animation: screen-in .25s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: scale(.985); } }

#menu { flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 22px max(14px, env(safe-area-inset-bottom)); }
.menu-art { position: absolute; z-index: 0; inset: 0; opacity: 0; overflow: hidden; transition: opacity .5s ease-out; pointer-events: none; }
.menu-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.96) contrast(1.03); }
.menu-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--style-main, #a17aff) 68%, transparent), transparent 54%); mix-blend-mode: color; opacity: .38; }
.menu-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #050713d9 0%, #080a1626 24%, #080a1612 50%, #070914b8 72%, #050610f2 100%); }
.art-ready .menu-art { opacity: 1; }
.art-ready #menu .menu-glow { opacity: .32; }
.art-ready #menu .mascot { opacity: 0; visibility: hidden; }
.art-ready #menu .brand h1 { text-shadow: 0 6px 0 #000, 0 0 28px #7047ff55; }
.art-ready #menu .primary-button, .art-ready #menu .secondary-button, .art-ready #menu .feature-button, .art-ready #menu .daily-card { backdrop-filter: blur(8px); }
.menu-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: #7143ff33; filter: blur(45px); left: 50%; top: 24%; transform: translate(-50%, -50%); }
.topbar, .panel-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.icon-button, .back-button, .pause-button { width: 42px; height: 42px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff14; }
.wallet { height: 38px; padding: 0 13px; min-width: 76px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #0a0c16b8; border: 1px solid #ffffff16; border-radius: 20px; }
.currency-icon { display: inline-block; flex: 0 0 auto; width: 1.45em; height: 1.45em; vertical-align: -.32em; background-position: center; background-repeat: no-repeat; background-size: contain; }
.currency-coin { background-image: url("assets/currency-coin-11.9.6.png"); filter: drop-shadow(0 0 .42em #f6c54e70); }
.currency-gem { background-image: url("assets/currency-gem-11.9.6.png"); filter: drop-shadow(0 0 .48em #5cecff85); }
.coin-dot { display: inline-block; width: 21px; height: 21px; background: url("assets/currency-coin-11.9.6.png") center / contain no-repeat; filter: drop-shadow(0 0 6px #f6c54e82); }
.level-badge { position: relative; min-width: 58px; height: 40px; display: grid; place-content: center; text-align: center; border-radius: 14px; background: #7047ff22; border: 1px solid #7047ff55; }
.level-badge small { color: #9a91c6; font-size: 6px; letter-spacing: .14em; }
.level-badge b { color: var(--lime); font-size: 15px; line-height: 15px; }
.level-badge > i { display: none; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border: 2px solid #090b18; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px #ff4b8baa; }
.level-badge.ready > i { display: block; animation: career-ping 1.2s infinite alternate; }
@keyframes career-ping { to { transform: scale(1.18); box-shadow: 0 0 16px #ff4b8b; } }

.brand { position: relative; z-index: 2; margin-top: clamp(15px, 5vh, 45px); text-align: center; }
.eyebrow { color: var(--lime); letter-spacing: .25em; font-size: 11px; font-weight: 900; }
.brand h1 { margin: 7px 0 8px; font-size: clamp(54px, 15vw, 76px); line-height: .77; letter-spacing: -.07em; font-style: italic; text-shadow: 0 6px 0 #000; }
.brand h1 span { color: var(--lime); }
.brand p { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.mascot { position: relative; z-index: 1; width: clamp(145px, 37vw, 185px); height: clamp(130px, 23vh, 190px); margin: 5px auto -13px; border-radius: 52% 52% 35% 35%; background: linear-gradient(145deg, var(--style-main, #a17aff), var(--style-dark, #5730d8) 58%, #17132c); border: 5px solid #090b16; box-shadow: 0 18px 40px #000b, inset -12px -12px 20px #0005; overflow: visible; }
.mask-band { position: absolute; width: 90%; height: 49px; border-radius: 22px; background: #0b0d18; top: 34px; left: 5%; display: flex; justify-content: center; align-items: center; gap: 22px; transform: rotate(-2deg); }
.mask-band i { width: 24px; height: 12px; background: var(--style-eye, var(--lime)); border-radius: 50%; box-shadow: 0 0 15px var(--style-eye, var(--lime)); }
.mascot-body { position: absolute; inset: 83px 18px -22px; background: var(--style-suit, #252943); border-radius: 40% 40% 20% 20%; border: 4px solid #090b16; }
.bag { position: absolute; width: 72px; height: 68px; display: grid; place-items: center; right: -34px; top: 22px; border-radius: 40% 40% 45% 45%; background: var(--style-bag, #d7a965); color: #281b0d; border: 4px solid #090b16; font-size: 25px; font-weight: 1000; transform: rotate(10deg); }

.menu-actions { position: relative; z-index: 3; margin-top: auto; display: grid; gap: 10px; }
.primary-button { min-height: 62px; width: 100%; border-radius: 18px; background: var(--lime); color: #12150a; font-weight: 1000; letter-spacing: .04em; box-shadow: 0 7px 0 #789714, 0 14px 28px #0007; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #789714; }
.primary-button small { display: block; font-size: 10px; opacity: .55; margin-top: 2px; }
.pulse { animation: pulse 2.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 7px 0 #789714, 0 12px 34px #ceff4245; } }
.money-store-card { min-height: 51px; padding: 7px 10px; display: none; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; text-align: left; border: 1px solid #ffd36b66; border-radius: 15px; color: #fff; background: linear-gradient(105deg, #37251bde, #251b3be8 62%, #151827e8); box-shadow: inset 0 0 22px #ffbd4320, 0 8px 20px #0005; }
.billing-ready .money-store-card { display: grid; }
.money-store-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #39230a; background: linear-gradient(145deg, #352717, #171c39); font-size: 18px; font-weight: 1000; box-shadow: inset 0 0 0 1px #ffe08a42, 0 0 15px #ffbd4350; }
.money-store-icon.currency-pair { position: relative; display: block; }
.money-store-icon.currency-pair .currency-icon { position: absolute; width: 27px; height: 27px; }
.money-store-icon.currency-pair .currency-coin { left: -2px; top: 4px; }
.money-store-icon.currency-pair .currency-gem { right: -5px; bottom: -2px; width: 21px; height: 21px; }
.money-store-card small, .money-store-card b, .money-store-card em { display: block; }
.money-store-card small { color: #d6ab68; font-size: 6px; font-weight: 1000; letter-spacing: .12em; }
.money-store-card b { margin-top: 1px; font-size: 10px; letter-spacing: .04em; }
.money-store-card em { margin-top: 1px; color: #aaa2b9; font-size: 7px; font-style: normal; }
.money-store-card strong { padding: 8px 9px; border-radius: 9px; color: #332008; background: #ffd36b; font-size: 7px; letter-spacing: .06em; }
.secondary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.secondary-row.single-action { grid-template-columns: 1fr; }
.feature-row[data-visible-actions="1"] { grid-template-columns: 1fr; }
.feature-row[data-visible-actions="2"] { grid-template-columns: repeat(2, 1fr); }
.secondary-button { min-height: 47px; border-radius: 15px; background: #ffffff0c; border: 1px solid #ffffff17; font-size: 11px; font-weight: 900; color: #d8d9e5; }
.secondary-button span { color: var(--purple); margin-right: 4px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.feature-button { min-height: 49px; padding: 7px 10px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: 1fr 1fr; text-align: left; align-items: center; column-gap: 8px; border-radius: 15px; background: #141727; border: 1px solid #ffffff14; }
.feature-button > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #7047ff33; color: var(--lime); }
.feature-button b { align-self: end; font-size: 10px; }
.feature-button small { align-self: start; color: var(--muted); font-size: 8px; }
.feature-button.wanted-feature { grid-column: 1 / -1; min-height: 42px; }
.feature-button.wanted-feature > span { color: #ff5f78; background: #ff5f7822; }
.daily-card { min-height: 57px; padding: 8px 12px; display: grid; grid-template-columns: 38px 1fr auto; text-align: left; align-items: center; gap: 8px; border-radius: 16px; background: linear-gradient(100deg, #231e3d, #141727); border: 1px solid #7655e048; }
.daily-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: var(--purple); color: var(--lime); }
.daily-card b { display: block; font-size: 11px; letter-spacing: .08em; }
.daily-card small { color: var(--muted); font-size: 10px; }
.daily-state { color: var(--lime); font-size: 11px; font-weight: 1000; }
.version { margin: 9px 0 0; text-align: center; color: #484b5e; font-size: 8px; letter-spacing: .16em; }

/* Quiet hideout: keep the first screen immediately scannable. */
#menu .version,
#menu .feature-button small,
#menu .daily-card small,
#menu .money-store-card small,
#menu .money-store-card em { display: none; }
#menu .brand { margin-top: clamp(7px, 2.8vh, 24px); }
#menu .brand h1 { margin-bottom: 0; }
#menu .menu-actions { gap: 7px; }
#menu .feature-row { grid-template-columns: repeat(3, 1fr); gap: 7px; }
#menu .feature-button,
#menu .feature-button.wanted-feature { grid-column: auto; min-height: 58px; padding: 6px 4px; grid-template-columns: 1fr; grid-template-rows: 31px auto; justify-items: center; text-align: center; row-gap: 3px; }
#menu .feature-button > span { grid-row: auto; width: 30px; height: 30px; }
#menu .feature-button b { align-self: center; max-width: 100%; overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
#menu .money-store-card { min-height: 46px; }
#menu .daily-card { min-height: 48px; }

#game { background: #111; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; contain: strict; transform: translateZ(0); touch-action: none; }
.game-hud { pointer-events: none; position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); left: 13px; right: 13px; display: grid; grid-template-columns: 1fr auto 42px; align-items: start; gap: 9px; }
.hud-left { display: flex; flex-direction: column; }
.distance b { font-size: 25px; font-style: italic; }
.distance small { font-size: 11px; color: var(--muted); margin-left: 2px; }
.hearts { display: flex; gap: 3px; margin-top: 2px; }
.heart { color: var(--pink); font-size: 15px; filter: drop-shadow(0 0 5px #ff4b8b); }
.heart.empty { color: #4a3345; filter: none; }
.loot-pill { justify-self: center; height: 42px; padding: 0 12px; border-radius: 14px; display: grid; grid-template-columns: auto auto; align-content: center; column-gap: 7px; background: #070914cc; border: 1px solid #ffffff1c; }
.loot-pill small { grid-column: 1 / -1; text-align: center; color: var(--lime); font-size: 9px; font-weight: 900; }
.intel-cache-hud { position: absolute; z-index: 4; top: calc(max(12px, env(safe-area-inset-top)) + 104px); right: 12px; min-width: 82px; padding: 7px 8px; display: none; border: 1px solid #55e6ff70; border-radius: 12px; color: #eaffff; background: linear-gradient(135deg, #071721e8, #0b2934e8); box-shadow: 0 8px 22px #0007, 0 0 18px #55e6ff20; pointer-events: none; }
.intel-cache-hud.show { display: block; }
.intel-cache-hud small, .intel-cache-hud b, .intel-cache-hud span { display: block; }
.intel-cache-hud small { color: #77e9fa; font-size: 6px; font-weight: 1000; letter-spacing: .1em; }
.intel-cache-hud b { margin-top: 2px; font-size: 12px; }
.intel-cache-hud span { margin-top: 1px; color: #b7f8ff; font-size: 7px; font-weight: 900; }
.pause-button { pointer-events: auto; }
.rival-chase-hud { position: absolute; z-index: 5; top: calc(max(12px, env(safe-area-inset-top)) + 57px); left: 50%; width: min(260px, calc(100% - 122px)); padding: 8px 10px; display: none; transform: translateX(-50%); border: 1px solid #ff6d8366; border-radius: 13px; background: #100c18e8; box-shadow: 0 10px 26px #0007; pointer-events: none; }
.rival-chase-hud > div:first-child { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; }
.rival-chase-hud small { color: #ff8fa0; font-size: 6px; font-weight: 1000; letter-spacing: .11em; }
.rival-chase-hud b { overflow: hidden; color: #fff; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.rival-chase-hud span { color: #c8cbd6; font-size: 7px; font-weight: 900; }
.rival-pressure-track { position: relative; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #34202b; }
.rival-pressure-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #70f4e8, #ffd36b 58%, #ff5f78); transition: width .12s linear; }
.rival-chase-hud em { display: block; margin-top: 4px; color: #79efda; font-size: 6px; font-style: normal; font-weight: 1000; letter-spacing: .08em; }
.rival-racer, .rival-prize-marker, .rival-race-gap { display: none; }
.rival-chase-hud[aria-hidden="false"] { display: block; }
.rival-chase-hud.escort { border-color: #8fb8ff77; background: #0b1325e8; }
.rival-chase-hud.escort small { color: #a9c8ff; }
.rival-chase-hud.escort .rival-pressure-track { background: #18243b; }
.rival-chase-hud.escort .rival-pressure-track i { background: linear-gradient(90deg, #ff5f78, #ffd36b 42%, #8fb8ff); }
.rival-chase-hud.rival-mode { border-color: #55e6ff7a; background: linear-gradient(135deg, #071822f2, #0b2634ed); box-shadow: 0 10px 28px #0008, 0 0 26px #55e6ff16; }
.rival-chase-hud.rival-mode small, .rival-chase-hud.rival-mode em { color: #8df1ff; }
.rival-chase-hud.rival-mode .rival-pressure-track { background: #0b3041; }
.rival-chase-hud.rival-mode .rival-pressure-track > i { background: linear-gradient(90deg, #187693, #55e6ff, #e0fbff); box-shadow: 0 0 13px #55e6ff; }
.rival-chase-hud.rival-benchmark { padding-bottom: 7px; }
.rival-chase-hud.rival-benchmark .rival-pressure-track { height: 27px; margin: 11px 6px 5px; overflow: visible; border-radius: 0; background: none; }
.rival-chase-hud.rival-benchmark .rival-pressure-track::before { content: ""; position: absolute; z-index: 0; top: 12px; left: 0; right: 0; height: 4px; border-radius: 99px; background: #0b3041; box-shadow: inset 0 0 0 1px #55e6ff1e; }
.rival-chase-hud.rival-benchmark .rival-pressure-track > i { position: absolute; z-index: 1; top: 12px; left: 0; height: 4px; }
.rival-chase-hud.rival-benchmark .rival-racer { position: absolute; z-index: 3; left: 0; display: grid; place-items: center; transform: translateX(-50%); transition: left .12s linear; }
.rival-chase-hud.rival-benchmark .rival-racer::after { content: ""; width: 8px; height: 8px; border: 2px solid #071822; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.rival-chase-hud.rival-benchmark .rival-racer b { position: absolute; max-width: 70px; padding: 2px 4px; overflow: hidden; border-radius: 5px; font-size: 5px; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.rival-chase-hud.rival-benchmark .rival-racer-you { top: 9px; color: #ceff42; }
.rival-chase-hud.rival-benchmark .rival-racer-you b { top: 12px; color: #111608; background: #ceff42; }
.rival-chase-hud.rival-benchmark .rival-racer-opponent { top: 9px; color: #ff7191; }
.rival-chase-hud.rival-benchmark .rival-racer-opponent b { bottom: 12px; color: #fff; background: #b92f58; }
.rival-chase-hud.rival-benchmark .rival-racer-opponent::before { content: ""; position: absolute; width: 16px; height: 16px; border: 1px solid #ff71dd99; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 38%, #72efff 0 12%, #180d2d 14% 43%, #9b2d8d 45% 52%, #0b1424 54%); box-shadow: -5px 1px 0 -2px #774cff55, 5px -1px 0 -2px #ff4fc955, 0 0 13px #67eaff; animation: rival-shadow-flicker .82s steps(2, end) infinite; }
.rival-chase-hud.rival-benchmark .rival-racer-opponent::after { width: 5px; height: 5px; border-color: #071822; background: #77efff; box-shadow: 0 0 6px #77efff, 0 0 13px #ff55d7; }
@keyframes rival-shadow-flicker { 0%, 100% { transform: translate(0); filter: none; } 48% { transform: translateX(-1px); filter: hue-rotate(16deg); } 52% { transform: translateX(1px); } }
.rival-chase-hud.rival-benchmark .rival-prize-marker { position: absolute; z-index: 2; top: 4px; right: -7px; width: 17px; height: 17px; display: grid; place-items: center; color: #ffe271; font-size: 11px; text-shadow: 0 0 10px #ffe271; }
.rival-chase-hud.rival-benchmark .rival-race-gap { display: block; margin: 0 0 2px; color: #fff; font-size: 6px; text-align: center; letter-spacing: .09em; }
.rival-chase-hud.wanted-mode { border-color: #ff5f7894; background: linear-gradient(135deg, #250b16f2, #130911ed); box-shadow: 0 10px 28px #0008, 0 0 30px #ff315f20; }
.rival-chase-hud.wanted-mode small, .rival-chase-hud.wanted-mode em { color: #ff9bab; }
.rival-chase-hud.wanted-mode .rival-pressure-track { background: #39101e; }
.rival-chase-hud.wanted-mode .rival-pressure-track > i { background: linear-gradient(90deg, #8e1736, #ff315f, #ff9bab); box-shadow: 0 0 13px #ff315f; }
#game[data-rival-raid="true"] .flow-orb,
#game[data-rival-raid="true"] .contract-hud,
#game[data-rival-raid="true"] .mechanic-hud,
#game[data-rival-raid="true"] .mission-checklist,
#game[data-rival-raid="true"] .boss-phase,
#game[data-rival-raid="true"] .hearts,
#game[data-rival-raid="true"] .loot-pill,
#game[data-rival-raid="true"] .protocol-banner,
#game[data-rival-raid="true"] .cashout-prompt,
#game[data-rival-raid="true"] .contract-toast { display: none; }
.rival-countdown { position: absolute; z-index: 8; inset: 0; display: none; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 45%, #082d3ddd, #03050be8 56%, #03050bf7); pointer-events: none; }
.rival-countdown.show { display: grid; }
.rival-countdown > div { width: min(310px, calc(100% - 26px)); padding: 22px 18px; text-align: center; border: 1px solid #55e6ff7a; border-radius: 24px; background: linear-gradient(145deg, #092938f2, #101421f2); box-shadow: 0 20px 60px #000c, 0 0 38px #55e6ff22; }
.rival-countdown small { display: block; color: #8df1ff; font-size: 8px; font-weight: 1000; letter-spacing: .14em; }
.rival-countdown b { width: 100px; height: 100px; margin: 13px auto 10px; display: grid; place-items: center; border: 3px solid #55e6ff; border-radius: 50%; color: #07131a; background: #55e6ff; box-shadow: 0 0 32px #55e6ff66; font-size: 54px; font-style: italic; animation: rival-countdown-pulse .75s ease-in-out infinite alternate; }
.rival-countdown p { margin: 0 auto; max-width: 250px; color: #e6fbff; font-size: 11px; font-weight: 850; line-height: 1.45; }
.rival-countdown.go { background: #06212de8; }
.rival-countdown.go b { color: #102000; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 42px #ceff4275; font-size: 31px; }
@keyframes rival-countdown-pulse { to { transform: scale(1.06); box-shadow: 0 0 46px #55e6ff85; } }
.rival-boost-strip { display: none; }
.rival-chase-hud.rival-mode .rival-boost-strip { margin-top: 5px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 5px; }
.rival-boost-strip > span { color: #61f3ff; font-size: 9px; text-shadow: 0 0 10px #61f3ff; }
.rival-boost-strip > i { height: 5px; overflow: hidden; border-radius: 99px; background: #183746; }
.rival-boost-strip > i > b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #61f3ff, #e8fdff); box-shadow: 0 0 10px #61f3ff; transition: width .12s linear; }
.rival-boost-strip > em { margin: 0 !important; color: #9af8ff !important; font-size: 6px !important; }
.rival-boost-strip > strong { padding-left: 5px; border-left: 1px solid #ffffff1c; color: #ffe075; font-size: 7px; white-space: nowrap; }
.rival-chase-hud.rival-mode.boosting { border-color: #aafaffaa; box-shadow: 0 10px 28px #0008, 0 0 31px #55e6ff35; }
.rival-chase-hud.rival-mode.crashed { border-color: #ff5f7899; animation: rival-hud-impact .16s linear 2; }
@keyframes rival-hud-impact { 50% { transform: translateX(calc(-50% + 3px)); } }
.rival-countdown p { display: flex; justify-content: center; gap: 6px; }
.rival-countdown p span { padding: 5px 7px; border: 1px solid #55e6ff2f; border-radius: 7px; color: #c5faff; background: #55e6ff0c; font-size: 6px; letter-spacing: .06em; }
#game[data-daily-heist="true"] .contract-hud { display: none; }
#game[data-daily-heist="true"] .mechanic-hud { display: none; }
.daily-survival-hud { --daily-threat: #65e9d0; position: absolute; z-index: 5; top: calc(max(12px, env(safe-area-inset-top)) + 61px); left: 50%; width: min(246px, calc(100% - 126px)); min-height: 53px; padding: 7px 10px; display: none; grid-template-columns: 1fr 1fr; gap: 3px 12px; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--daily-threat) 58%, transparent); border-radius: 15px; background: linear-gradient(135deg, #081018ed, #100a16ed); box-shadow: 0 8px 24px #0009, 0 0 20px color-mix(in srgb, var(--daily-threat) 20%, transparent); pointer-events: none; }
.daily-survival-hud.show { display: grid; }
.daily-survival-hud div { min-width: 0; }
.daily-survival-hud small, .daily-survival-hud b { display: block; }
.daily-survival-hud small { color: #8e96aa; font-size: 6px; font-weight: 1000; letter-spacing: .1em; }
.daily-survival-hud b { margin-top: 2px; overflow: hidden; color: var(--daily-threat); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.daily-survival-hud > div:last-child { text-align: right; }
.daily-survival-hud .daily-pb-track { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; text-align: left; }
.daily-pb-track > i { height: 3px; overflow: hidden; border-radius: 99px; background: #ffffff12; }
.daily-pb-track > i > u { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--daily-threat); box-shadow: 0 0 8px var(--daily-threat); text-decoration: none; transition: width .12s linear; }
.daily-pb-track > small { color: var(--daily-threat); font-size: 5px; white-space: nowrap; }
.daily-pb-track.crossed > i > u { background: linear-gradient(90deg, #ffe271, #ceff42); box-shadow: 0 0 12px #ffe271; }
.daily-pb-track.crossed > small { color: #ffe271; text-shadow: 0 0 9px #ffe271aa; }
.contract-hud { position: absolute; z-index: 3; top: calc(max(12px, env(safe-area-inset-top)) + 82px); left: 50%; transform: translateX(-50%); width: min(184px, calc(100% - 112px)); min-height: 39px; padding: 5px 11px; text-align: center; border-radius: 10px; background: #070914a8; border: 1px solid #ffffff12; pointer-events: none; }
.contract-hud::after { content: ""; position: absolute; left: 6px; bottom: -1px; width: var(--mission-progress, 0%); max-width: calc(100% - 12px); height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--lime)); box-shadow: 0 0 8px #ceff4266; transition: width .2s ease-out; }
.contract-hud small { display: block; overflow: hidden; color: #969aaf; font-size: 7px; line-height: 1.25; letter-spacing: .11em; white-space: nowrap; text-overflow: ellipsis; }
.contract-hud b { display: block; margin-top: 3px; overflow: hidden; color: var(--lime); font-size: 10px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.mechanic-hud { position: absolute; z-index: 4; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: 130px; min-height: 42px; padding: 6px 8px; display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 6px; transform: translateX(-50%); border: 1px solid #ffffff1c; border-radius: 13px; background: #080b16db; pointer-events: none; }
.mechanic-hud > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #08130e; background: var(--lime); font-size: 12px; font-weight: 1000; }
.mechanic-hud small, .mechanic-hud b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mechanic-hud small { color: #a8adbb; font-size: 6px; font-weight: 1000; letter-spacing: .07em; }
.mechanic-hud b { margin-top: 2px; color: var(--lime); font-size: 8px; }
.boss-phase { position: absolute; z-index: 4; top: calc(max(12px, env(safe-area-inset-top)) + 132px); right: 12px; width: min(148px, calc(50% - 20px)); padding: 6px 9px; border: 1px solid #ffb84d66; border-radius: 10px; text-align: center; background: #080a15df; pointer-events: none; }
.boss-phase[aria-hidden="true"] { display: none; }
.boss-phase small { display: block; color: #ffb84d; font-size: 6px; font-weight: 1000; letter-spacing: .14em; }
.boss-phase b { display: block; margin: 2px 0 4px; overflow: hidden; color: #f3eef7; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.boss-phase > div { height: 4px; overflow: hidden; border-radius: 4px; background: #31242b; }
.boss-phase i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #ffb84d, #ff4b8b); transition: width .2s; }
.protocol-banner { position: absolute; z-index: 4; top: calc(max(12px, env(safe-area-inset-top)) + 132px); right: 12px; width: min(168px, calc(50% - 20px)); min-height: 48px; padding: 7px 9px; border: 1px solid var(--protocol-accent, #ceff42); border-radius: 11px; background: linear-gradient(115deg, #090c18e8, #171b2ce8); box-shadow: 0 10px 26px #0008, 0 0 20px color-mix(in srgb, var(--protocol-accent, #ceff42) 18%, transparent); opacity: 0; transform: translateX(16px); pointer-events: none; }
.protocol-banner.show { animation: protocol-in .35s ease-out forwards; }
.protocol-banner small { display: block; color: var(--protocol-accent, #ceff42); font-size: 6px; font-weight: 1000; letter-spacing: .13em; }
.protocol-banner b { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .05em; }
.protocol-banner span { display: block; margin-top: 2px; color: #aeb2c4; font-size: 7px; line-height: 1.25; }
@keyframes protocol-in { to { opacity: 1; transform: translateX(0); } }
.mission-checklist { position: absolute; z-index: 3; top: calc(max(12px, env(safe-area-inset-top)) + 132px); left: 12px; width: min(166px, calc(50% - 20px)); display: grid; gap: 4px; pointer-events: none; transition: opacity .2s, transform .2s; }
.mission-checklist > div { min-height: 37px; padding: 5px 7px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 6px; border-radius: 10px; background: #070914bd; border: 1px solid #ffffff0c; opacity: .48; transition: .25s; }
.mission-checklist i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; background: #2c3042; color: #8c90a1; font-size: 8px; font-style: normal; font-weight: 1000; }
.mission-checklist b { display: block; color: #d6d8e1; font-size: 7px; letter-spacing: .05em; }
.mission-checklist small { display: block; margin-top: 1px; color: #7d8193; font-size: 6px; }
.mission-checklist small:empty { display: none; }
#checkMastery { display: none; }
.mission-checklist b, .mission-checklist small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mission-checklist > div.active { opacity: 1; border-color: #ceff4255; box-shadow: 0 0 18px #ceff4210; }
.mission-checklist > div.active i { background: var(--purple); color: var(--lime); }
.mission-checklist > div.done { opacity: .78; border-color: #40e4ff35; }
.mission-checklist > div.done i { background: #1a5360; color: var(--cyan); font-size: 0; }
.mission-checklist > div.done i::after { content: "✓"; font-size: 10px; }
.mission-checklist > div.escape-ready { opacity: 1; border-color: var(--lime); animation: checklist-pulse .8s infinite alternate; }
.mission-checklist > div.optional { opacity: .82; border-color: #ffd36b42; }
.mission-checklist > div.optional i { color: #ffd36b; background: #4a3822; }
.mission-checklist > div.optional.ready { opacity: 1; border-color: #ffd36b; box-shadow: 0 0 16px #ffd36b20; }
.mission-checklist > div.optional.secured { opacity: .68; border-color: #65e9d044; }
.mission-checklist > div.optional.secured i { color: #08251f; background: #65e9d0; }
.mission-checklist > div.optional.hidden { display: none; }
@keyframes checklist-pulse { to { box-shadow: 0 0 20px #ceff4238; transform: translateX(3px); } }
.crew-power-button { position: absolute; z-index: 5; left: 14px; bottom: max(22px, env(safe-area-inset-bottom)); width: 66px; min-height: 72px; padding: 5px 5px 7px; display: grid; justify-items: center; gap: 4px; border: 2px solid #a47cff99; border-radius: 23px; color: #e4dcff; background: #17142de8; box-shadow: 0 8px 23px #0009, inset 0 0 18px #8b62ff16; }
.crew-power-button[hidden] { display: none; }
.crew-power-button:active { transform: scale(.95); }
.crew-power-button.disabled { opacity: .4; filter: grayscale(.8); }
.crew-power-button.active { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 24px #ceff4238; }
.crew-power-button.tutorial-target { z-index: 9; border-color: var(--lime); background: #202a19f5; box-shadow: 0 0 0 7px #ceff4224, 0 0 34px #ceff4285; animation: crew-tutorial-target .6s ease-in-out infinite alternate; }
.crew-power-button.tutorial-target::before { content: "▼"; position: absolute; left: 50%; top: -31px; transform: translateX(-50%); color: var(--lime); font-size: 18px; text-shadow: 0 0 12px #ceff42; pointer-events: none; }
.crew-power-button.tutorial-target::after { content: "TAP HERE"; position: absolute; left: 50%; top: -48px; min-width: 72px; padding: 4px 7px; transform: translateX(-50%); border-radius: 8px; color: #101608; background: var(--lime); box-shadow: 0 0 18px #ceff4266; font-size: 7px; font-weight: 1000; letter-spacing: .08em; pointer-events: none; }
@keyframes crew-tutorial-target { to { transform: scale(1.09); box-shadow: 0 0 0 11px #ceff4215, 0 0 46px #ceff42aa; } }
.crew-power-portrait { width: 48px; height: 48px; overflow: hidden; border: 2px solid #bda8ff; border-radius: 50%; background: #252040; box-shadow: 0 0 15px #8b62ff3c; }
.crew-power-portrait img { width: 100%; height: 100%; object-fit: cover; }
.crew-power-button small { max-width: 58px; overflow: hidden; color: #c5bbeb; font-size: 6px; font-weight: 1000; letter-spacing: .07em; white-space: nowrap; text-overflow: ellipsis; }
.crew-power-active-hud { --crew-power-progress: 100%; position: absolute; z-index: 6; left: 80px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); min-height: 66px; padding: 8px 10px 8px 8px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid #ceff42a8; border-radius: 18px; background: linear-gradient(110deg, #1b2b1af2, #10172af2 66%); box-shadow: 0 10px 30px #000b, 0 0 30px #ceff4230, inset 0 0 24px #ceff420c; pointer-events: none; animation: crew-power-hud-in .18s ease-out; }
.crew-power-active-hud[hidden] { display: none; }
.crew-power-active-hud > span { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #ceff42; border-radius: 14px; color: #101707; background: linear-gradient(145deg, #ecff9f, #8de85d); box-shadow: 0 0 18px #ceff4252; font-size: 16px; font-weight: 1000; }
.crew-power-active-hud > div { min-width: 0; }
.crew-power-active-hud small, .crew-power-active-hud b, .crew-power-active-hud p { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crew-power-active-hud small { color: #b8d77c; font-size: 5px; font-weight: 1000; letter-spacing: .12em; }
.crew-power-active-hud b { margin-top: 2px; color: #f6ffd9; font-size: 9px; }
.crew-power-active-hud p { margin: 2px 0 5px; color: #b7c5c1; font-size: 6px; font-weight: 900; }
.crew-power-active-hud > div > i { height: 5px; display: block; overflow: hidden; border-radius: 99px; background: #2b3734; }
.crew-power-active-hud > div > i > u { width: var(--crew-power-progress); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ceff42, #67eed5); box-shadow: 0 0 8px #ceff4280; text-decoration: none; transition: width .08s linear; }
.crew-power-active-hud > em { min-width: 42px; color: #ceff42; font-size: 12px; font-style: normal; font-weight: 1000; text-align: right; }
@keyframes crew-power-hud-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.tactical-hud { --tactic-color: #6debd3; position: absolute; z-index: 4; left: 14px; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 72px); max-width: 155px; min-height: 45px; padding: 6px 9px 6px 6px; display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--tactic-color) 48%, transparent); border-radius: 14px; background: #080c16d9; box-shadow: 0 8px 22px #0008; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .25s; }
.tactical-hud.show { opacity: 1; transform: translateY(0); }
.tactical-hud[aria-hidden="true"] { display: none; }
.tactical-hud > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #071411; background: var(--tactic-color); font-size: 14px; font-weight: 1000; }
.tactical-hud small { display: block; color: #7c8796; font-size: 6px; font-weight: 1000; letter-spacing: .1em; }
.tactical-hud b { display: block; margin-top: 2px; overflow: hidden; color: var(--tactic-color); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.radio-message { position: absolute; z-index: 6; left: 14px; top: calc(max(12px, env(safe-area-inset-top)) + 119px); width: min(285px, calc(100% - 28px)); min-height: 57px; padding: 8px 12px 8px 8px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 9px; border-radius: 15px; background: #090c18e8; border: 1px solid #7047ff77; box-shadow: 0 10px 25px #0007; opacity: 0; transform: translateX(-20px); pointer-events: none; }
.radio-message.show { animation: radio-in 3.6s both; }
.radio-message[aria-hidden="true"] { display: none; }
.radio-message > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #7047ff; color: var(--lime); font-size: 17px; font-weight: 1000; }
.radio-message b { color: var(--lime); font-size: 8px; letter-spacing: .1em; }
.radio-message p { margin: 2px 0 0; color: #d7d9e3; font-size: 10px; line-height: 1.3; }
@keyframes radio-in { 8%, 78% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-10px); } }
.cashout-prompt { position: absolute; z-index: 8; top: calc(max(12px, env(safe-area-inset-top)) + 80px); left: 50%; transform: translateX(-50%) translateY(-10px) scale(.92); width: min(286px, calc(100% - 32px)); padding: 10px 16px; border-radius: 16px; text-align: center; background: #10151bf2; border: 2px solid var(--lime); box-shadow: 0 14px 34px #000a, 0 0 25px #ceff4230; opacity: 0; transition: .25s; pointer-events: none; }
.cashout-prompt.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.cashout-prompt b { display: block; color: var(--lime); font-size: 12px; }
.cashout-prompt span { font-size: 9px; color: #bcc0c8; }
.cashout-prompt i { display: block; font-style: normal; color: var(--lime); font-size: 26px; animation: bob .7s infinite alternate; }
.cashout-prompt i.currency-icon-large { width: 39px; height: 39px; margin: 3px auto -3px; }
.cashout-prompt::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--lime) 0 var(--getaway-progress, 100%), #ffffff12 var(--getaway-progress, 100%)); box-shadow: 0 0 9px #ceff4247; }
#game.getaway-active :is(.contract-hud, .flow-orb, .rush-meter, .heist-route-hud, .mechanic-hud, .crew-power-button) { opacity: 0; transform: translateY(-7px) scale(.94); pointer-events: none; }
#game.getaway-active .cashout-prompt { border-color: color-mix(in srgb, var(--run-accent) 62%, var(--lime)); background: linear-gradient(120deg, #071019ef, #121b22e8); }
#game.getaway-ready .contract-hud,
#game.getaway-ready .mission-checklist,
#game.getaway-ready .boss-phase,
#game.getaway-ready .protocol-banner { opacity: 0; }
@keyframes bob { to { transform: translateY(5px); } }
.combo { position: absolute; z-index: 4; top: 28%; left: 50%; transform: translateX(-50%) rotate(-5deg); color: var(--lime); font-size: 21px; font-weight: 1000; font-style: italic; text-shadow: 0 3px #000; pointer-events: none; opacity: 0; }
.combo.pop { animation: combo-pop .55s; }
@keyframes combo-pop { 20% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1.25); } 75% { opacity: 1; } }

/* 9.8: a quieter play surface. The road carries the instructions now. */
.mission-checklist[hidden], .boss-phase { display: none !important; }
.progressive-feature[hidden] { display: none !important; }
.flow-orb { --flow: 0deg; position: absolute; z-index: 4; top: calc(max(12px, env(safe-area-inset-top)) + 49px); right: 14px; width: 40px; height: 40px; display: grid; place-content: center; border-radius: 50%; text-align: center; background: conic-gradient(var(--cyan) 0 var(--flow), #18313c var(--flow) 360deg); box-shadow: 0 5px 18px #0008, 0 0 12px #40e4ff22; pointer-events: none; }
.flow-orb::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #08121be8; }
.flow-orb span, .flow-orb small { position: relative; z-index: 1; display: block; }
.flow-orb span { color: var(--cyan); font-size: 13px; line-height: 12px; }
.flow-orb small { margin-top: 2px; color: #b8eefa; font-size: 6px; font-weight: 1000; letter-spacing: .03em; }
.flow-orb i { display: none; }
.flow-orb.ready { background: conic-gradient(var(--lime), var(--cyan), var(--lime)); box-shadow: 0 0 24px #ceff4266; animation: flow-pulse .7s infinite alternate; }
@keyframes flow-pulse { to { transform: scale(1.06); } }
.rush-meter { --rush: 0%; position: absolute; z-index: 5; top: calc(max(12px, env(safe-area-inset-top)) + 96px); right: 12px; width: 50px; padding: 5px 4px 4px; display: grid; grid-template-columns: 11px 1fr; align-items: center; gap: 3px; border: 1px solid #ffd76242; border-radius: 10px; background: #090b18d9; box-shadow: 0 6px 18px #0009; color: #ffd762; opacity: .78; pointer-events: none; transition: opacity .18s, transform .18s, box-shadow .18s; }
.rush-meter > span { font-size: 9px; line-height: 1; }
.rush-meter > i { height: 4px; overflow: hidden; border-radius: 99px; background: #ffffff14; }
.rush-meter > i > u { width: var(--rush); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ffd762, #ff8a3d); box-shadow: 0 0 9px #ffd762; text-decoration: none; transition: width .12s linear; }
.rush-meter > b { color: #fff3c0; font-size: 5px; line-height: 1; letter-spacing: .05em; text-align: center; }
.rush-meter > em { color: #ffd762; font-size: 5px; font-style: normal; font-weight: 1000; line-height: 1; text-align: center; }
.rush-meter[aria-hidden="true"] { opacity: 0; transform: translateX(8px) scale(.9); }
.rush-meter.charged { opacity: 1; transform: scale(1.08); border-color: #fff0a4; box-shadow: 0 0 24px #ffb52f55; }
.rush-meter.active { opacity: 1; border-color: #fff5ba; background: linear-gradient(135deg, #42200fe8, #111326e8); box-shadow: 0 0 30px #ffb52f77; animation: rush-hud-pulse .42s ease-in-out infinite alternate; }
@keyframes rush-hud-pulse { to { transform: scale(1.08); filter: brightness(1.2); } }
#game.rush-active::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border: 2px solid #ffd76266; background: radial-gradient(circle at 50% 78%, #ffb52f18, transparent 42%), linear-gradient(90deg, #ff9d240b, transparent 18% 82%, #ff9d240b); box-shadow: inset 0 0 48px #ffb52f22; animation: rush-field .4s ease-in-out infinite alternate; }
@keyframes rush-field { to { border-color: #fff0a499; box-shadow: inset 0 0 72px #ffb52f33; opacity: .8; } }
#game[data-rival-raid="true"] .rush-meter,
#game[data-tutorial="true"] .rush-meter { display: none; }
.result-rush { width: fit-content; min-height: 27px; margin: 5px auto 8px; padding: 4px 7px 4px 4px; display: none; grid-template-columns: 22px auto auto; align-items: center; gap: 6px; border: 1px solid #ffd76266; border-radius: 999px; background: linear-gradient(135deg, #33200ddd, #111326dd); box-shadow: 0 0 20px #ffb52f22; }
.result-rush.show { display: grid; }
.result-rush > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #211302; background: #ffd762; box-shadow: 0 0 12px #ffd76288; font-size: 10px; }
.result-rush > b { color: #fff5c5; font-size: 7px; letter-spacing: .06em; }
.result-rush > small { color: #ffd762; font-size: 7px; font-weight: 1000; }
.streak-hud { --streak-color: #65e9d0; --streak-progress: 0%; --streak-time: 0%; position: absolute; z-index: 5; right: 12px; bottom: max(15px, env(safe-area-inset-bottom)); min-width: 84px; min-height: 39px; padding: 5px 7px 6px 5px; display: grid; grid-template-columns: 28px minmax(35px, 1fr) auto; align-items: center; gap: 5px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--streak-color) 52%, transparent); border-radius: 14px; background: linear-gradient(135deg, #071119dc, #111326e8); box-shadow: 0 8px 22px #0008, 0 0 20px color-mix(in srgb, var(--streak-color) 14%, transparent); opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .18s ease, transform .18s ease, border-color .18s ease; pointer-events: none; }
.streak-hud::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--streak-time); height: 2px; border-radius: 99px; background: var(--streak-color); box-shadow: 0 0 8px var(--streak-color); transition: width .08s linear; }
.streak-hud.show { opacity: 1; transform: translateY(0) scale(1); }
.streak-hud > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #07100e; background: var(--streak-color); box-shadow: 0 0 15px color-mix(in srgb, var(--streak-color) 50%, transparent); font-size: 12px; font-weight: 1000; }
.streak-hud > div { min-width: 0; }
.streak-hud small { display: block; overflow: hidden; color: var(--streak-color); font-size: 6px; font-weight: 1000; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.streak-hud i { height: 4px; margin-top: 4px; display: block; overflow: hidden; border-radius: 99px; background: #ffffff12; }
.streak-hud i u { width: var(--streak-progress); height: 100%; display: block; border-radius: inherit; background: var(--streak-color); box-shadow: 0 0 8px var(--streak-color); text-decoration: none; transition: width .12s linear; }
.streak-hud > b { color: #f5f8ff; font-size: 7px; white-space: nowrap; }
.streak-hud[data-tier="building"] { opacity: .86; box-shadow: 0 7px 18px #0008; }
.streak-hud[data-tier="building"] > span { color: #dff8ff; background: #23445d; box-shadow: inset 0 0 0 1px #74d9ff66; }
.streak-hud[data-tier="ghost"] { animation: streak-breathe .72s ease-in-out infinite alternate; }
@keyframes streak-breathe { to { box-shadow: 0 8px 22px #0008, 0 0 28px color-mix(in srgb, var(--streak-color) 31%, transparent); } }
.run-milestone { --milestone-color: #ceff42; position: absolute; z-index: 7; top: 18%; left: 50%; min-width: 132px; padding: 8px 12px 8px 8px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; transform: translate(-50%, -14px) scale(.9); border: 1px solid color-mix(in srgb, var(--milestone-color) 58%, transparent); border-radius: 17px; background: linear-gradient(135deg, #0d1721ee, #101221ee); box-shadow: 0 14px 35px #000a, 0 0 30px color-mix(in srgb, var(--milestone-color) 18%, transparent); opacity: 0; pointer-events: none; }
.run-milestone.show { animation: run-milestone-in 1.45s ease both; }
.run-milestone > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #07100b; background: var(--milestone-color); box-shadow: 0 0 18px color-mix(in srgb, var(--milestone-color) 52%, transparent); font-size: 13px; }
.run-milestone b, .run-milestone small { display: block; white-space: nowrap; }
.run-milestone b { color: #fff; font-size: 12px; font-style: italic; }
.run-milestone small { margin-top: 2px; color: var(--milestone-color); font-size: 6px; font-weight: 1000; letter-spacing: .08em; }
@keyframes run-milestone-in { 0% { opacity: 0; transform: translate(-50%, -15px) scale(.88); } 13%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 8px) scale(.96); } }
#game[data-rival-raid="true"] .streak-hud { display: none; }
.heist-route-hud { --route-color: #ceff42; position: absolute; z-index: 5; top: calc(max(12px, env(safe-area-inset-top)) + 119px); left: 50%; width: 126px; min-height: 24px; padding: 4px 7px; display: grid; grid-template-columns: 25px 1fr 25px 1fr 25px; align-items: center; transform: translateX(-50%); border: 1px solid #ffffff12; border-radius: 999px; background: #070914b8; box-shadow: 0 7px 18px #0008; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; }
.heist-route-hud.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#game:has(.protocol-banner.show) .heist-route-hud,
#game:has(.radio-message.show) .heist-route-hud { opacity: 0; }
.heist-route-hud > span { position: relative; height: 19px; display: grid; place-items: center; color: #586072; }
.heist-route-hud > span i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 7px; background: #090d18; font-size: 7px; font-style: normal; font-weight: 1000; transition: .25s; }
.heist-route-hud > span small { position: absolute; top: 22px; max-width: 42px; overflow: hidden; color: currentColor; font-size: 4px; font-weight: 1000; letter-spacing: .06em; opacity: 0; text-overflow: ellipsis; white-space: nowrap; transition: .2s; }
.heist-route-hud > span.active, .heist-route-hud > span.done { color: var(--route-color); }
.heist-route-hud > span.active i { color: #0a1106; background: var(--route-color); box-shadow: 0 0 15px color-mix(in srgb, var(--route-color) 58%, transparent); transform: scale(1.12); }
.heist-route-hud > span.active small { opacity: 1; }
.heist-route-hud > span.done i::before { content: "\2713"; font-size: 9px; }
.heist-route-hud > span.done i { color: #07130f; background: #65e9d0; border-color: #65e9d0; font-size: 0; }
.heist-route-hud > u { height: 2px; overflow: hidden; border-radius: 99px; background: #33394a; text-decoration: none; }
.heist-route-hud > u::before { content: ""; width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #65e9d0, var(--route-color)); box-shadow: 0 0 7px var(--route-color); transition: width .3s ease; }
.heist-route-hud[data-route-stage="target"] > u:first-of-type::before,
.heist-route-hud[data-route-stage="escape"] > u::before { width: 100%; }
#game.reflex-active::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border: 2px solid #66f3ff66; background: repeating-linear-gradient(90deg, transparent 0 16%, #66f3ff08 16% 16.4%); box-shadow: inset 0 0 42px #3fe8ff22, inset 0 0 110px #426dff18; animation: reflex-field .58s ease-in-out infinite alternate; }
@keyframes reflex-field { to { border-color: #b8fbff99; box-shadow: inset 0 0 58px #3fe8ff2c, inset 0 0 140px #426dff22; opacity: .72; } }
@media (max-height: 670px) {
  .heist-route-hud { top: calc(max(9px, env(safe-area-inset-top)) + 107px); transform: translateX(-50%) scale(.88); }
  .heist-route-hud.show { transform: translateX(-50%) scale(.88); }
}
.contract-hud { top: calc(max(12px, env(safe-area-inset-top)) + 66px); width: auto; min-width: 126px; max-width: min(204px, calc(100% - 128px)); min-height: 46px; padding: 5px 11px; display: grid; grid-template-columns: 32px minmax(0, auto); align-items: center; gap: 7px; border-color: #ffffff18; background: #070914df; box-shadow: 0 7px 22px #0008; }
.contract-hud > div { min-width: 0; text-align: left; }
.contract-hud small { display: block; overflow: hidden; color: #aeb4c7; font-size: 6px; font-weight: 1000; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
.contract-hud > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #10140b; background: var(--lime); font-size: 19px; line-height: 1; box-shadow: 0 0 14px #ceff4244; }
.contract-hud b { margin: 2px 0 0; color: #fff; font-size: 15px; letter-spacing: .03em; }
.mechanic-hud { left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: auto; max-width: 170px; min-height: 25px; padding: 4px 8px; grid-template-columns: 18px 1fr; gap: 5px; border: 0; border-radius: 999px; background: #070914b5; box-shadow: none; }
.mechanic-hud > span { width: 18px; height: 18px; border-radius: 6px; font-size: 9px; }
.mechanic-hud small { display: none; }
.mechanic-hud b { margin: 0; font-size: 7px; }
.protocol-banner { top: calc(max(12px, env(safe-area-inset-top)) + 105px); left: 50%; right: auto; width: auto; max-width: calc(100% - 76px); min-height: 0; padding: 5px 12px; transform: translate(-50%, -8px); border-radius: 999px; text-align: center; background: #080b16d9; box-shadow: 0 6px 18px #0007; }
.protocol-banner.show { animation: protocol-compact 1.65s both; }
.protocol-banner small, .protocol-banner span { display: none; }
.protocol-banner b { margin: 0; overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
@keyframes protocol-compact { 12%, 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.crew-power-button { left: 12px; bottom: max(14px, env(safe-area-inset-bottom)); width: 58px; min-height: 64px; padding: 4px 4px 6px; border-width: 1px; border-radius: 20px; }
.crew-power-portrait { width: 43px; height: 43px; }
.crew-power-button small { font-size: 5px; }
.radio-message { left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 105px); width: min(244px, calc(100% - 60px)); min-height: 36px; padding: 5px 9px; grid-template-columns: 27px 1fr; gap: 6px; transform: translate(-50%, -8px); border-radius: 999px; }
.radio-message.show { animation: radio-compact 2.25s both; }
.radio-message > span { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; }
.radio-message b { display: none; }
.radio-message p { margin: 0; overflow: hidden; font-size: 8px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
@keyframes radio-compact { 10%, 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.contract-toast { position: absolute; z-index: 6; left: 50%; top: 18%; width: 230px; padding: 13px 17px; transform: translate(-50%, -20px); text-align: center; border-radius: 16px; background: #101522ed; border: 2px solid var(--lime); box-shadow: 0 10px 35px #000a, 0 0 28px #ceff4220; opacity: 0; pointer-events: none; }
.contract-toast.show { animation: toast-in 2.4s both; }
.contract-toast small { display: block; color: var(--lime); font-size: 8px; letter-spacing: .16em; }
.contract-toast b { display: block; margin-top: 3px; font-size: 15px; font-style: italic; }
@keyframes toast-in { 10%, 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -12px); } }
.swipe-guide { position: absolute; z-index: 7; inset: 0; display: grid; place-items: start center; padding: calc(max(10px, env(safe-area-inset-top)) + 116px) 18px 20px; background: radial-gradient(circle at 50% 24%, #050712b8 0 19%, #05071220 42%, transparent 67%); pointer-events: none; }
.tutorial-card { width: min(318px, calc(100% - 6px)); padding: 11px 13px 10px; border: 1px solid #ceff4275; border-radius: 19px; background: linear-gradient(150deg, #202640f7, #10131ff7); box-shadow: 0 14px 38px #000a, 0 0 28px #ceff421c; text-align: center; animation: tutorial-card-in .22s ease-out both; }
@keyframes tutorial-card-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.tutorial-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutorial-head small { color: var(--lime); font-size: 8px; font-weight: 1000; letter-spacing: .14em; }
.tutorial-head em { color: #8990a5; font-size: 7px; font-style: normal; font-weight: 1000; letter-spacing: .08em; }
.tutorial-card > strong { width: 44px; height: 44px; margin: 6px auto 5px; display: grid; place-items: center; border-radius: 14px; color: #111608; background: var(--lime); font-size: 25px; box-shadow: 0 0 25px #ceff424d; animation: tutorial-gesture 1s ease-in-out infinite alternate; }
@keyframes tutorial-gesture { to { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 34px #ceff4275; } }
.tutorial-card h2 { margin: 0; font-size: 17px; font-style: italic; }
.tutorial-card p { max-width: 286px; margin: 5px auto 0; color: #c6cad6; font-size: 9px; font-weight: 700; line-height: 1.35; }
.tutorial-card p[hidden] { display: none; }
.tutorial-examples { margin: 8px 0 4px; color: var(--pickup-color, #aeb5c8); font-size: 7px; font-weight: 1000; letter-spacing: .14em; line-height: 1.2; }
.tutorial-examples[hidden], .tutorial-prompt[hidden] { display: none; }
.tutorial-prompt { margin: 6px 0 7px; padding: 8px 10px; border: 1px solid #ceff4255; border-radius: 11px; color: var(--lime); background: #ceff420b; font-size: 10px; font-weight: 1000; letter-spacing: .11em; animation: tutorial-prompt 1s ease-in-out infinite alternate; }
@keyframes tutorial-prompt { to { border-color: #ceff42aa; box-shadow: 0 0 16px #ceff4220; transform: scale(1.018); } }
.tutorial-pickup-legend { gap: 6px; margin: 5px 0 8px; justify-content: center; flex-wrap: wrap; }
.tutorial-pickup-legend:not([hidden]) { display: flex; }
.tutorial-pickup-legend span { position: relative; flex: 0 1 82px; min-width: 76px; min-height: 78px; display: grid; place-items: center; gap: 3px; padding: 5px 4px 6px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--pickup-color) 44%, transparent); border-radius: 12px; background: linear-gradient(155deg, color-mix(in srgb, var(--pickup-color) 10%, #111625), #080b16f2 62%); text-align: center; box-shadow: inset 0 1px #ffffff0b; }
.tutorial-pickup-legend canvas { width: 74px; height: 55px; display: block; border-radius: 9px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pickup-color) 12%, #171b2c), #090b14 70%); }
.tutorial-pickup-legend b { max-width: 74px; color: #f5f6fb; font-size: 7px; line-height: 1.1; }
.tutorial-pickup-legend em { position: absolute; top: 5px; right: 5px; min-width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--pickup-color); border-radius: 7px; color: #080b12; background: var(--pickup-color); box-shadow: 0 0 12px color-mix(in srgb, var(--pickup-color) 55%, transparent); font-size: 12px; font-style: normal; font-weight: 1000; }
.tutorial-system-visuals { margin: 7px 0 9px; display: grid; gap: 6px; }
.tutorial-system-visuals[hidden] { display: none; }
.tutorial-system-demo { min-height: 184px; padding: 9px; overflow: hidden; border: 1px solid #ffffff17; border-radius: 14px; background: radial-gradient(circle at 50% 28%, #ffffff0c, transparent 58%), #080b16ee; }
.tutorial-system-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; text-align: left; }
.tutorial-system-heading b { color: #f3f5fb; font-size: 7px; letter-spacing: .07em; }
.tutorial-system-heading span { padding: 4px 6px; border-radius: 7px; color: #210810; background: #ff647e; font-size: 6px; font-weight: 1000; }
.tutorial-shield-demo .tutorial-system-heading span { color: #061512; background: #40e4ff; }
.tutorial-flow-demo .tutorial-system-heading span { color: #061512; background: #65e9d0; }
.tutorial-system-rule, .tutorial-flow-build { min-height: 49px; display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: 7px; padding: 3px 7px 3px 2px; border: 1px solid #ffffff12; border-radius: 11px; text-align: left; }
.tutorial-system-rule canvas, .tutorial-flow-build canvas { width: 56px; height: 42px; border-radius: 8px; background: #080b16; }
.tutorial-system-rule div, .tutorial-flow-build div, .tutorial-flow-result div { min-width: 0; display: grid; gap: 2px; }
.tutorial-system-rule div b, .tutorial-flow-build div b, .tutorial-flow-result div b { color: #f4f5f9; font-size: 7px; line-height: 1.15; }
.tutorial-system-rule div span, .tutorial-flow-build div span, .tutorial-flow-result div span { color: #aeb5c7; font-size: 6px; font-weight: 900; line-height: 1.15; }
.tutorial-system-rule > strong, .tutorial-flow-build > strong { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; font-size: 18px; animation: tutorial-rule-pulse 1s ease-in-out infinite alternate; }
.tutorial-system-rule.danger { border-color: #ff647e33; background: #ff647e09; }
.tutorial-system-rule.danger > strong { color: #260812; background: #ff647e; box-shadow: 0 0 14px #ff647e55; }
.tutorial-system-rule.relief { border-color: #65e9d033; background: #65e9d009; }
.tutorial-system-rule.relief > strong, .tutorial-flow-build > strong { color: #061512; background: #65e9d0; box-shadow: 0 0 14px #65e9d055; }
.tutorial-flow-build { grid-template-columns: 60px 1fr 31px; border-color: #65e9d033; background: #65e9d008; }
.tutorial-flow-result { min-height: 68px; margin-top: 7px; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #65e9d055; border-radius: 12px; background: linear-gradient(90deg, #65e9d012, #65e9d005); text-align: left; }
.tutorial-flow-ring { position: relative; width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#65e9d0 0 92%, #1b3840 92%); box-shadow: 0 0 18px #65e9d044; animation: tutorial-flow-pulse 1.2s ease-in-out infinite alternate; }
.tutorial-flow-ring::before { content: ""; position: absolute; inset: 6px; border-radius: inherit; background: #0a101b; }
.tutorial-flow-ring span { position: relative; z-index: 1; color: #65e9d0; font-size: 20px; }
.tutorial-reflex-sequence { min-height: 106px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr) auto minmax(0, 1fr); align-items: center; gap: 4px; }
.tutorial-reflex-sequence > div { min-width: 0; min-height: 97px; padding: 5px 3px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #65e9d026; border-radius: 12px; background: #65e9d007; text-align: center; }
.tutorial-reflex-sequence canvas { width: 58px; height: 44px; border-radius: 8px; background: #080b16; }
.tutorial-reflex-sequence > em { color: #65e9d0; font-size: 17px; font-style: normal; }
.tutorial-reflex-sequence b, .tutorial-reflex-sequence small { display: block; }
.tutorial-reflex-sequence b { color: #f3fffc; font-size: 6px; line-height: 1.15; }
.tutorial-reflex-sequence small { color: #7ea9a2; font-size: 5px; font-weight: 1000; }
.tutorial-reflex-sequence .tutorial-flow-ring { width: 48px; height: 48px; }
.tutorial-reflex-slow > span { width: 48px; height: 31px; display: grid; place-items: center; border: 1px solid #65e9d06b; border-radius: 10px; color: #061612; background: linear-gradient(145deg, #c3fff3, #65e9d0); box-shadow: 0 0 18px #65e9d045; font-size: 11px; font-weight: 1000; }
.tutorial-reflex-slow > i { width: 45px; height: 6px; display: block; border-radius: 99px; background: repeating-linear-gradient(90deg, #65e9d0 0 5px, transparent 5px 9px); animation: tutorial-reflex-drift .8s linear infinite; }
.tutorial-reflex-note { min-height: 36px; margin-top: 7px; padding: 6px 9px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid #ceff4240; border-radius: 11px; background: linear-gradient(90deg, #ceff4210, #65e9d00b); }
.tutorial-reflex-note span { color: #9aaa89; font-size: 6px; font-weight: 1000; }.tutorial-reflex-note b { color: #ceff42; font-size: 7px; }
@keyframes tutorial-reflex-drift { to { background-position: 18px 0; } }
@keyframes tutorial-rule-pulse { to { transform: translateY(-2px) scale(1.06); } }
@keyframes tutorial-flow-pulse { to { transform: scale(1.07); box-shadow: 0 0 28px #65e9d077; } }
.tutorial-steps { display: flex; justify-content: center; gap: 4px; }
.tutorial-steps i { width: 14px; height: 4px; border-radius: 4px; background: #43485c; }
.tutorial-steps i.on { background: var(--lime); }
.tutorial-card button { margin-top: 5px; min-width: 66px; min-height: 28px; padding: 0 11px; border: 1px solid #ffffff1c; border-radius: 9px; color: #8f94a5; background: #ffffff06; font-size: 7px; font-weight: 1000; pointer-events: auto; }
.tutorial-card .tutorial-action { width: 100%; min-height: 42px; border-color: #ceff4266; color: #111608; background: var(--lime); font-size: 24px; }
.tutorial-card .tutorial-action + #tutorialSkipButton { display: none; }
.tutorial-card .tutorial-action[hidden] + #tutorialSkipButton { display: inline-block; }
.swipe-guide.hide { animation: guide-out .35s forwards; pointer-events: none; }
@keyframes guide-out { to { opacity: 0; visibility: hidden; } }

@media (max-height: 620px) {
  .swipe-guide { padding: calc(max(6px, env(safe-area-inset-top)) + 72px) 8px 6px; }
  .tutorial-card { padding: 7px 9px 6px; border-radius: 16px; }
  .tutorial-card > strong { width: 35px; height: 35px; margin: 3px auto; border-radius: 11px; font-size: 20px; }
  .tutorial-card h2 { font-size: 14px; }
  .tutorial-card p { margin-top: 3px; font-size: 7.5px; line-height: 1.22; }
  .tutorial-examples { margin: 4px 0 2px; font-size: 6px; }
  .tutorial-prompt { margin: 3px 0 4px; padding: 5px 7px; font-size: 8px; }
  .tutorial-pickup-legend { gap: 4px; margin: 3px 0 4px; }
  .tutorial-pickup-legend span { flex-basis: 70px; min-width: 66px; min-height: 64px; padding: 3px; border-radius: 10px; }
  .tutorial-pickup-legend canvas { width: 64px; height: 44px; }
  .tutorial-pickup-legend b { max-width: 64px; font-size: 6px; }
  .tutorial-pickup-legend em { top: 3px; right: 3px; min-width: 17px; height: 17px; border-radius: 6px; font-size: 9px; }
  .tutorial-system-visuals { margin: 4px 0 5px; gap: 4px; }
  .tutorial-system-demo { min-height: 148px; padding: 6px; }
  .tutorial-system-heading { margin-bottom: 4px; }
  .tutorial-reflex-sequence { min-height: 88px; gap: 2px; }
  .tutorial-reflex-sequence > div { min-height: 82px; }
  .tutorial-reflex-sequence canvas { width: 49px; height: 37px; }
  .tutorial-reflex-sequence .tutorial-flow-ring { width: 42px; height: 42px; }
  .tutorial-reflex-note { min-height: 28px; margin-top: 4px; padding: 4px 6px; }
  .tutorial-steps i { width: 11px; height: 3px; }
  .tutorial-card button { min-height: 24px; margin-top: 3px; }
}

.modal-screen { z-index: 8; align-items: flex-start; overflow-y: auto; padding: calc(max(10px, env(safe-area-inset-top)) + 8px) 16px max(16px, env(safe-area-inset-bottom)); background: #050711d9; backdrop-filter: blur(9px); }
.result-card, .pause-card { width: 100%; padding: 28px 20px 20px; text-align: center; border-radius: 28px; background: linear-gradient(150deg, #202440, #111422); border: 1px solid #ffffff1e; box-shadow: 0 30px 80px #000b; }
.result-card { margin: 0 auto; max-height: calc(100dvh - max(30px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); overflow-y: auto; }
.interstitial-break { position: fixed; z-index: 30; inset: 0; display: grid; grid-template-columns: 32px auto 32px; place-content: center; align-items: center; gap: 9px; pointer-events: none; opacity: 0; color: var(--lime); background: #050711e8; backdrop-filter: blur(10px); transition: opacity .16s ease; }
.interstitial-break.show { pointer-events: auto; opacity: 1; }
.interstitial-break b { font-size: 11px; letter-spacing: .18em; }
.interstitial-break span, .interstitial-break i { width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--lime)); box-shadow: 0 0 10px #ceff4266; }
.interstitial-break i { transform: scaleX(-1); }
.result-card:not(.raid-result) { padding-top: 20px; }
.result-card:not(.raid-result) .result-kicker,
.result-card:not(.raid-result) .result-contract,
.result-card:not(.raid-result) .result-story,
.result-card:not(.raid-result) .bonus-line { display: none; }
.result-card:not(.raid-result) h2 { margin-top: 0; }
.result-card:not(.raid-result) .result-mastery small { display: none; }
.result-card:not(.raid-result) .score-ring { width: 136px; height: 136px; }
.result-card:not(.raid-result) .result-stats { grid-template-columns: repeat(2, 1fr); margin: 11px 0 7px; }
.result-card:not(.raid-result) .result-stats > div:nth-child(3) { display: none; }
.result-card:not(.raid-result) .share-result-button { min-height: 41px; grid-template-rows: 1fr; }
.result-card:not(.raid-result) .share-result-button span { grid-row: auto; }
.result-card:not(.raid-result) .share-result-button b { align-self: center; }
.result-card:not(.raid-result) .share-result-button small { display: none; }
.result-unlock { display: none; margin: 8px 0 2px; padding: 8px 10px; border: 1px solid #ffcd6a44; border-radius: 12px; color: #ffd88f; background: #ffae4d12; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.result-unlock.show { display: block; animation: screen-in .3s ease-out; }
.first-loop-coach { width: 100%; min-height: 86px; margin: 8px 0 3px; padding: 9px 11px; display: grid; grid-template-columns: repeat(5, auto); align-items: center; justify-content: center; gap: 7px; border: 1px solid #ceff426e; border-radius: 16px; color: #f6ffe2; background: radial-gradient(circle at 50% 0, #ceff421b, transparent 58%), linear-gradient(125deg, #17231c, #11182a); box-shadow: inset 0 0 24px #ceff420a, 0 0 20px #ceff4210; }
.first-loop-coach[hidden] { display: none; }
.first-loop-coach > small, .first-loop-coach > strong { grid-column: 1 / -1; }
.first-loop-coach > small { color: var(--lime); font-size: 6px; font-weight: 1000; letter-spacing: .16em; }
.first-loop-coach > span { display: grid; justify-items: center; gap: 2px; }
.first-loop-coach > span i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #ceff4275; border-radius: 9px; color: #0d160a; background: var(--lime); font-size: 15px; font-style: normal; font-weight: 1000; box-shadow: 0 0 14px #ceff4236; }
.first-loop-coach > span i.done { color: #07130f; background: #70f4e8; }
.first-loop-coach > span b { font-size: 6px; letter-spacing: .08em; }
.first-loop-coach > em { color: #718067; font-size: 18px; font-style: normal; }
.first-loop-coach > strong { color: #eaffab; font-size: 8px; letter-spacing: .08em; }
#resultCard.raid-result .result-mastery,
#resultCard.raid-result .result-mastery-contract,
#resultCard.raid-result .bonus-line,
#resultCard.raid-result .new-best,
#resultCard.raid-result .share-result-button,
#resultCard.raid-result .rewarded-button { display: none !important; }
#resultCard.raid-result .score-ring { width: 132px; height: 132px; }
#resultCard.raid-result .result-story { margin-bottom: 9px; }
.rewarded-button { display: none; width: 100%; min-height: 48px; margin: 9px 0; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 7px 12px; border: 1px solid #63e7b85c; border-radius: 14px; color: #e7fff7; background: linear-gradient(100deg, #17392f, #17213a); text-align: left; }
.rewarded-button.show { display: grid; }
.rewarded-button span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #09251b; background: #63e7b8; font-size: 11px; }
.rewarded-button b { align-self: end; font-size: 10px; letter-spacing: .07em; }
.rewarded-button small { align-self: start; color: #9bbab0; font-size: 8px; }
.share-result-button { width: 100%; min-height: 46px; margin: 8px 0 3px; padding: 7px 11px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: 1fr 1fr; align-items: center; border: 1px solid #7b9fff4d; border-radius: 14px; color: #edf2ff; background: linear-gradient(100deg, #1a2542, #17182b); text-align: left; }
.share-result-button span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: #0c1730; background: #8eafff; font-size: 12px; font-weight: 1000; }
.share-result-button b { align-self: end; font-size: 9px; letter-spacing: .07em; }
.share-result-button small { align-self: start; overflow: hidden; color: #8f9bb9; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.share-result-button.shared { border-color: #62e8bc66; background: linear-gradient(100deg, #17392f, #17213a); }
.share-result-button.shared span { color: #082219; background: #62e8bc; }
.rewarded-button:disabled { opacity: .65; }
.reset-overlay { z-index: 30; background: #050711e8; backdrop-filter: blur(10px); }
.reset-card p { margin: 10px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.danger-button { width: 100%; min-height: 50px; border: 1px solid #ff5b7566; border-radius: 15px; color: #fff; background: linear-gradient(100deg, #a72e48, #6d2136); font-size: 11px; font-weight: 900; letter-spacing: .06em; box-shadow: 0 10px 24px #7a1f3738; }
.result-kicker, .pause-card > span { color: var(--lime); font-size: 10px; letter-spacing: .22em; font-weight: 1000; }
.result-card h2, .pause-card h2 { margin: 6px 0 4px; font-size: 28px; font-style: italic; }
.result-mastery { display: none; grid-template-columns: repeat(3, 30px); justify-content: center; gap: 2px; margin: 5px 0 2px; color: #596078; font-size: 24px; line-height: 1; }
.result-mastery.show { display: grid; }
.result-mastery span.on { color: #ffcf62; text-shadow: 0 0 14px #ffb94f88; animation: star-pop .38s ease-out both; }
.result-mastery span:nth-child(2) { animation-delay: .1s; }
.result-mastery span:nth-child(3) { animation-delay: .2s; }
.result-mastery small { grid-column: 1 / 4; margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.result-mastery-contract { display: none; width: fit-content; max-width: 292px; margin: 5px auto 7px; padding: 6px 9px; border: 1px solid #ffd36b4d; border-radius: 9px; color: #ffd98a; background: #ffb84d12; font-size: 7px; font-weight: 1000; letter-spacing: .055em; line-height: 1.35; }
.result-mastery-contract.show { display: block; }
.result-mastery-contract.secured { color: #08221b; border-color: #72efcf; background: linear-gradient(90deg, #65e9d0, #a6ffe8); box-shadow: 0 0 18px #65e9d033; }
@keyframes star-pop { from { transform: scale(.4) rotate(-25deg); opacity: .2; } }
.result-contract { margin-bottom: 3px; color: #989bb0; font-size: 8px; letter-spacing: .16em; }
.result-approach { margin: 0 auto 8px; color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.result-approach, .result-tactic, .result-bond, .result-case { display: none !important; }
.result-tactic { display: none; width: fit-content; max-width: 290px; margin: -3px auto 8px; padding: 5px 8px; border: 1px solid #58dbc23d; border-radius: 8px; color: #83f2dd; background: #46cfb512; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.result-tactic.show { display: block; }
.result-bond { display: none; width: fit-content; max-width: 290px; margin: -2px auto 8px; padding: 5px 8px; border: 1px solid #8b6dff3d; border-radius: 8px; color: #c9b8ff; background: #815cff10; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.result-bond.show { display: block; }
.result-bond.rank-up { color: #201606; border-color: #ffd36b; background: #ffd36b; box-shadow: 0 0 17px #ffd36b33; }
.result-case { display: none; width: fit-content; max-width: 290px; margin: -3px auto 8px; padding: 5px 8px; border: 1px solid #48dfc83f; border-radius: 8px; color: #83f5e1; background: #2ccdb512; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.result-case.show { display: block; }
.result-daily { display: none; width: fit-content; max-width: 290px; margin: -3px auto 8px; padding: 6px 9px; border: 1px solid #58e8d055; border-radius: 8px; color: #78f3dd; background: #58e8d012; font-size: 8px; font-weight: 1000; letter-spacing: .05em; }
.result-daily.show { display: block; }
.result-daily.best { color: #071612; border-color: #79f6df; background: linear-gradient(90deg, #58e8d0, #9bffe9); box-shadow: 0 0 20px #58e8d044; }
.result-story { max-width: 290px; margin: 0 auto 12px; color: #babdca; font-size: 9px; font-style: italic; line-height: 1.35; }
.score-ring { margin: auto; width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; background: radial-gradient(circle, #1b2036 55%, transparent 56%), conic-gradient(var(--lime), #5f3fea, var(--lime)); box-shadow: 0 0 35px #ceff4225; }
.score-ring strong { font-size: 37px; line-height: 1; }
.score-ring span { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.bonus-line { min-height: 26px; margin: 12px auto 0; padding: 6px 10px; max-width: 200px; display: flex; justify-content: space-between; border-radius: 10px; background: #ceff4210; color: var(--lime); font-size: 9px; font-weight: 1000; }
.bonus-line.empty { opacity: .32; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 15px 0; }
.result-stats div + div { border-left: 1px solid #ffffff14; }
.result-stats b { display: block; font-size: 16px; }
.result-stats span { color: var(--muted); font-size: 8px; }
.new-best { height: 19px; color: var(--lime); font-size: 11px; font-weight: 1000; visibility: hidden; }
.new-best.show { visibility: visible; animation: flash 1s infinite alternate; }
@keyframes flash { to { transform: scale(1.08); } }
.text-button { width: 100%; min-height: 45px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 900; }

.panel-screen { z-index: 6; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: radial-gradient(circle at top, #242044, #0a0c18 48%); overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* Live operations */
.operations-screen { gap: 12px; background: radial-gradient(circle at 80% 5%, #392366, #111326 38%, #080a15 72%); }
.legacy-daily-objectives[hidden] { display: none !important; }
.operations-screen .panel-header { flex: 0 0 auto; }
.op-timer { padding: 6px 9px; border: 1px solid #b58aff55; border-radius: 999px; color: #c8aeff; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.streak-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid #ffffff18; border-radius: 18px; background: linear-gradient(120deg, #241d3f, #15182a); }
.streak-card small, .section-heading small, .weekly-top small { display: block; color: #ae94ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.streak-card b { display: block; margin-top: 2px; font-size: 17px; }
.streak-card em { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.streak-pips { display: grid; grid-template-columns: repeat(4, 12px); gap: 5px; }
.streak-pips i { width: 12px; height: 12px; border: 1px solid #ffffff2c; border-radius: 50%; background: #080a15; }
.streak-pips i.on { border-color: #b98bff; background: #9d61ff; box-shadow: 0 0 10px #9d61ff88; }
.daily-heist-card { --daily-color: #58e8d0; padding: 15px; border: 1px solid color-mix(in srgb, var(--daily-color) 48%, transparent); border-radius: 21px; background: radial-gradient(circle at 92% 0, color-mix(in srgb, var(--daily-color) 24%, transparent), transparent 42%), linear-gradient(145deg, #102a2d, #15172a 64%); box-shadow: inset 0 0 30px #0003; }
.daily-heist-top, .daily-board-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.daily-heist-top small { display: block; color: var(--daily-color); font-size: 8px; font-weight: 1000; letter-spacing: .12em; }
.daily-heist-top b { display: block; margin-top: 3px; font-size: 16px; }
.daily-heist-top > span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--daily-color) 42%, transparent); border-radius: 999px; color: var(--daily-color); font-size: 8px; font-weight: 1000; }
.daily-heist-target { display: grid; grid-template-columns: 43px 1fr; gap: 10px; align-items: start; margin-top: 13px; }
.daily-heist-target > span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--daily-color) 55%, transparent); border-radius: 14px; color: #071613; background: var(--daily-color); font-size: 20px; box-shadow: 0 0 18px color-mix(in srgb, var(--daily-color) 30%, transparent); }
.daily-heist-target small { display: block; color: #b7bccd; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.daily-heist-target b { display: block; margin-top: 2px; font-size: 13px; }
.daily-heist-target p { margin: 5px 0 0; color: #9da4b8; font-size: 9px; line-height: 1.45; }
.daily-heist-rules { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.daily-heist-rules span { padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--daily-color) 30%, transparent); border-radius: 7px; color: color-mix(in srgb, var(--daily-color) 80%, white); background: color-mix(in srgb, var(--daily-color) 9%, transparent); font-size: 7px; font-weight: 1000; letter-spacing: .05em; }
.daily-heist-score { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid #ffffff10; border-radius: 12px; background: #080b15a8; }
.daily-heist-score div { padding: 8px 5px; text-align: center; }
.daily-heist-score div + div { border-left: 1px solid #ffffff10; }
.daily-heist-score small, .daily-heist-score b { display: block; }
.daily-heist-score small { color: #747b91; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.daily-heist-score b { margin-top: 3px; color: var(--daily-color); font-size: 13px; }
.daily-board-head { align-items: center; margin-top: 11px; color: #9198ab; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.daily-board-head small { color: var(--daily-color); font-size: 7px; }
.daily-board { display: grid; gap: 4px; min-height: 31px; margin-top: 6px; }
.daily-board-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 7px; min-height: 28px; padding: 4px 7px; border-radius: 9px; background: #090c16b8; font-size: 8px; }
.daily-board-row.you { background: color-mix(in srgb, var(--daily-color) 12%, #090c16); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--daily-color) 28%, transparent); }
.daily-board-row i { color: #6f7588; font-style: normal; font-weight: 1000; }
.daily-board-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-board-row span { color: var(--daily-color); font-weight: 1000; }
.daily-heist-start { width: 100%; min-height: 52px; margin-top: 11px; border-radius: 14px; color: #071411; background: linear-gradient(135deg, var(--daily-color), color-mix(in srgb, var(--daily-color) 72%, white)); box-shadow: 0 8px 24px color-mix(in srgb, var(--daily-color) 22%, transparent); }
.daily-heist-start b, .daily-heist-start small { display: block; }
.daily-heist-start b { font-size: 11px; letter-spacing: .05em; }
.daily-heist-start small { margin-top: 3px; color: #17352f; font-size: 8px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; padding: 2px 2px 0; }
.section-heading b { display: block; margin-top: 2px; font-size: 14px; }
.section-heading > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.operation-list { display: grid; gap: 8px; }
.operation-card { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; min-height: 70px; padding: 10px; border: 1px solid #ffffff15; border-radius: 17px; background: #14172aee; }
.operation-card.complete { border-color: #5fe9b055; background: linear-gradient(100deg, #123026aa, #14172a); }
.operation-card.claimed { opacity: .68; }
.operation-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #cfbaff; background: #9c6bff20; font-size: 20px; }
.operation-copy b { display: block; font-size: 11px; letter-spacing: .03em; }
.operation-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.mini-progress { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #070913; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a5bff, #52e7ae); }
.operation-claim { min-width: 62px; min-height: 36px; padding: 0 8px; border: 1px solid #8f64ff55; border-radius: 11px; color: #cfbaff; background: #8f64ff15; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.operation-claim.ready { color: #07140f; border-color: #61efb8; background: #61efb8; box-shadow: 0 0 18px #61efb844; }
.operation-claim:disabled { color: #777c94; border-color: #ffffff12; background: #ffffff07; }
.quest-panel { display: grid; gap: 9px; padding: 13px; border: 1px solid #8065d33d; border-radius: 20px; background: linear-gradient(145deg, #181a31eb, #101321eb); }
.daily-quest-panel { border-color: #54dfc83b; background: radial-gradient(circle at 100% 0, #39d7be18, transparent 42%), linear-gradient(145deg, #151d2c, #101321); }
.weekly-quest-panel { border-color: #9d7bff42; background: radial-gradient(circle at 100% 0, #875fff1b, transparent 42%), linear-gradient(145deg, #1c1831, #101321); }
.quest-panel-note { margin: -3px 2px 0; color: #969db1; font-size: 8px; line-height: 1.35; }
.weekly-quest-list .operation-icon { color: #d5c6ff; background: #9b73ff22; }
.story-files-link { width: 100%; min-height: 50px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #ffffff12; border-radius: 15px; color: inherit; background: #10131f; text-align: left; }
.story-files-link > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #75e8d2; background: #52d9c21a; }
.story-files-link small, .story-files-link b { display: block; }
.story-files-link small { color: #6fcfbe; font-size: 6px; letter-spacing: .1em; }
.story-files-link b { margin-top: 2px; font-size: 9px; }
.story-files-link em { color: #7d8496; font-size: 7px; font-style: normal; }
.weekly-card { --event-color: #ffb35f; padding: 15px; border: 1px solid color-mix(in srgb, var(--event-color) 36%, transparent); border-radius: 20px; background: radial-gradient(circle at 95% 0, color-mix(in srgb, var(--event-color) 27%, transparent), transparent 42%), linear-gradient(140deg, #2c2032, #151829); }
.weekly-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.weekly-top b { display: block; margin-top: 3px; font-size: 15px; }
.weekly-top > span { color: var(--event-color); font-size: 9px; font-weight: 900; }
.weekly-card p { margin: 9px 0 11px; color: #b9bdd0; font-size: 10px; line-height: 1.45; }
.weekly-mutators { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 11px; }
.weekly-mutators span { padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--event-color) 28%, transparent); border-radius: 7px; color: color-mix(in srgb, var(--event-color) 82%, white); background: color-mix(in srgb, var(--event-color) 9%, transparent); font-size: 7px; font-weight: 1000; letter-spacing: .05em; }
.weekly-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #090a13; box-shadow: inset 0 0 0 1px #ffffff0d; }
.weekly-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--event-color) 65%, #784dff), var(--event-color)); box-shadow: 0 0 16px color-mix(in srgb, var(--event-color) 55%, transparent); transition: width .35s ease; }
.weekly-score { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9px; }
.weekly-score b { color: var(--event-color); }
.weekly-score span { color: var(--muted); }
.weekly-rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.weekly-reward { min-height: 48px; padding: 6px 4px; border: 1px solid #ffffff12; border-radius: 11px; text-align: center; background: #090b16aa; }
button.weekly-reward { color: inherit; }
.weekly-reward b, .weekly-reward small { display: block; }
.weekly-reward b { color: var(--event-color); font-size: 10px; }
.weekly-reward small { margin-top: 3px; color: #8f94a9; font-size: 8px; }
.weekly-reward.ready { border-color: #ffc36a; background: #ffc36a22; animation: reward-pulse 1.4s infinite; }
.weekly-reward.claimed { border-color: #54e5ad44; opacity: .62; }
@keyframes reward-pulse { 50% { box-shadow: 0 0 18px #ffac5b44; } }
.evidence-heading { margin-top: 2px; }
.operations-note { margin: -6px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.evidence-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; padding-bottom: 8px; }
.evidence-item { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #ffffff12; border-radius: 11px; color: #555b70; background: #0b0d18; font-size: 16px; }
.evidence-item.found { color: var(--evidence-color, #bb91ff); border-color: color-mix(in srgb, var(--evidence-color, #bb91ff) 45%, transparent); background: color-mix(in srgb, var(--evidence-color, #bb91ff) 12%, #0b0d18); box-shadow: inset 0 0 14px #0007; }
.evidence-item small { position: absolute; right: 4px; bottom: 3px; color: #7e8398; font-size: 7px; font-weight: 900; }
.evidence-item.found small { color: #d9dce8; }

/* Permanent launch case */
.case-preview { width: 100%; min-height: 76px; padding: 10px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; border: 1px solid #51e5ca4a; border-radius: 18px; color: inherit; background: radial-gradient(circle at 0 50%, #39d8bd24, transparent 44%), linear-gradient(110deg, #142c31, #17172a); text-align: left; }
.case-preview.ready { border-color: #62f1d5; box-shadow: 0 0 20px #38dcc332; animation: reward-pulse 1.4s infinite; }
.case-preview-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #65ecd27a; border-radius: 14px; color: #071a17; background: linear-gradient(145deg, #8bffe8, #35bca6); box-shadow: inset 0 0 0 4px #ffffff1d; font-size: 20px; font-weight: 1000; }
.case-preview-copy { min-width: 0; }
.case-preview-copy > small { display: block; color: #66e6cf; font-size: 7px; font-weight: 1000; letter-spacing: .12em; }
.case-preview-copy > b { display: block; margin-top: 2px; font-size: 12px; letter-spacing: .03em; }
.case-preview-copy > em { display: block; margin-top: 3px; overflow: hidden; color: #9baeb2; font-size: 8px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.case-preview-copy > i { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #07100f; }
.case-preview-copy > i u { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3bd1b8, #adffe8); transition: width .35s ease; }
.case-preview-status { min-width: 63px; text-align: right; }
.case-preview-status b, .case-preview-status small { display: block; }
.case-preview-status b { color: #76efd8; font-size: 8px; letter-spacing: .05em; }
.case-preview-status small { margin-top: 4px; color: #73878a; font-size: 7px; }
.caseboard-screen { gap: 12px; background: radial-gradient(circle at 15% 0, #164b48, #11172a 37%, #080a15 74%); }
.caseboard-screen > * { flex-shrink: 0; }
.case-ready-count { min-width: 74px; padding: 6px 8px; border: 1px solid #56e6ca4a; border-radius: 999px; color: #76ecd6; background: #36c8ae10; text-align: center; font-size: 7px; font-weight: 1000; letter-spacing: .06em; }
.case-hero { min-height: 138px; padding: 15px; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; border: 1px solid #5ce8cd42; border-radius: 22px; background: radial-gradient(circle at 0 50%, #45ddc52e, transparent 45%), linear-gradient(125deg, #233c43, #18172b); }
.case-seal { position: relative; width: 72px; height: 86px; display: grid; place-items: center; overflow: hidden; border: 1px solid #92ffe783; border-radius: 13px 13px 20px 20px; color: #0b211d; background: linear-gradient(145deg, #c4fff3, #47cdb5 68%, #247f75); box-shadow: inset 0 0 0 5px #ffffff24, 0 12px 25px #0007; }
.case-seal::before, .case-seal::after { content: ""; position: absolute; width: 80px; height: 8px; background: #17393652; transform: rotate(-24deg); }
.case-seal::after { transform: translateY(24px) rotate(18deg); }
.case-seal span { position: relative; z-index: 1; font-size: 29px; font-weight: 1000; }
.case-seal i { position: absolute; inset: 7px; border: 1px dashed #163c367d; border-radius: 8px 8px 15px 15px; }
.case-hero small, .case-pass-card small { color: #69e5ce; font-size: 8px; font-weight: 1000; letter-spacing: .12em; }
.case-hero h3 { margin: 4px 0 6px; color: #cafff5; font-size: 18px; font-style: italic; }
.case-hero p { margin: 0; color: #aab7be; font-size: 9px; line-height: 1.45; }
.case-total { padding: 12px 14px; border: 1px solid #ffffff13; border-radius: 16px; background: #101625d9; }
.case-total > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.case-total b { color: #9af5e4; font-size: 11px; }
.case-total small { color: #7e9298; font-size: 8px; }
.case-total > i { display: block; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #060c0e; }
.case-total > i u { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2db9a5, #8ffff0); box-shadow: 0 0 14px #5be9ce66; transition: width .35s ease; }
.case-claim-all { width: 100%; min-height: 40px; margin-top: 10px; border: 1px solid #7affdf; border-radius: 12px; color: #06110f; background: linear-gradient(180deg, #a5ffe8, #45d9bc); box-shadow: 0 7px 0 #147965, 0 0 20px #55ebcb35; font-size: 9px; font-weight: 1000; letter-spacing: .08em; }
.case-claim-all:active { transform: translateY(4px); box-shadow: 0 3px 0 #147965, 0 0 15px #55ebcb2c; }
.case-claim-all[hidden] { display: none; }
.case-pass-card { min-height: 90px; padding: 13px; display: grid; grid-template-columns: 1fr 128px; align-items: center; gap: 12px; border: 1px solid #b987ff4a; border-radius: 18px; background: radial-gradient(circle at 100% 50%, #a05fff28, transparent 52%), #17162a; }
.case-pass-card b { display: block; margin-top: 3px; color: #d6baff; font-size: 13px; }
.case-pass-card p { margin: 4px 0 0; color: #9995ad; font-size: 8px; line-height: 1.35; }
.case-pass-card button { min-height: 43px; padding: 6px 8px; border: 1px solid #b982ff70; border-radius: 12px; color: #1b0e25; background: #c99aff; font-size: 8px; font-weight: 1000; letter-spacing: .04em; }
.case-pass-card button:disabled { color: #7f778d; border-color: #ffffff10; background: #ffffff08; }
.case-lane-key { display: grid; grid-template-columns: 1fr 90px 90px; gap: 7px; padding: 0 6px; color: #68797f; font-size: 7px; font-weight: 1000; letter-spacing: .08em; }
.case-lane-key span:nth-child(n + 2) { text-align: center; }
.case-tier-list { display: grid; gap: 9px; }
.case-tier { min-height: 136px; padding: 11px; display: grid; grid-template-columns: 43px 1fr; align-items: start; gap: 10px; border: 1px solid #ffffff13; border-radius: 18px; background: #111625e8; }
.case-tier.reached { border-color: #52e2c54a; background: linear-gradient(110deg, #173330, #141627 68%); }
.case-tier.settled { opacity: .72; }
.case-tier.locked .case-tier-number { color: #4d5b60; border-color: #ffffff10; background: #0a0d16; }
.case-tier-number { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #64e5cc63; border-radius: 14px; color: #8cf7e3; background: #35c4aa17; font-size: 12px; font-weight: 1000; }
.case-tier-copy small { display: block; color: #67d7c2; font-size: 7px; font-weight: 1000; letter-spacing: .1em; }
.case-tier-copy b { display: block; margin-top: 3px; font-size: 11px; }
.case-tier-copy p { min-height: 28px; margin: 4px 0 0; color: #979fad; font-size: 8px; line-height: 1.38; }
.case-tier.locked .case-tier-copy b, .case-tier.locked .case-tier-copy p { color: #59616e; }
.case-tier-rewards { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: -1px; }
.case-reward { min-width: 0; min-height: 49px; padding: 6px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 2px 5px; border: 1px solid #5ce3c64a; border-radius: 11px; color: #baf8ec; background: #2ab69e12; text-align: left; }
.case-reward small { color: #64d9c3; font-size: 6px; font-weight: 1000; letter-spacing: .08em; }
.case-reward b { grid-column: 1 / -1; overflow: hidden; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.case-reward em { grid-column: 2; grid-row: 1; color: #77edd7; font-size: 6px; font-style: normal; font-weight: 1000; }
.case-reward.elite { border-color: #b67aff4c; color: #dfcaff; background: #9a5ee815; }
.case-reward.elite small, .case-reward.elite em { color: #c294ff; }
.case-reward.ready { color: #081612; border-color: #79f5dc; background: #79f5dc; box-shadow: 0 0 16px #62e8ce38; animation: reward-pulse 1.4s infinite; }
.case-reward.ready small, .case-reward.ready em { color: #1d6458; }
.case-reward.elite.ready { color: #170c22; border-color: #d0a7ff; background: #d0a7ff; }
.case-reward.elite.ready small, .case-reward.elite.ready em { color: #653692; }
.case-reward.claimed, .case-reward:disabled { opacity: .58; }
.case-footnote { margin: 0 4px 10px; color: #69787d; font-size: 8px; line-height: 1.45; text-align: center; }

/* Criminal career */
.career-screen { gap: 12px; background: radial-gradient(circle at 18% 0, #52391f, #181528 34%, #080a15 72%); }
.career-screen > * { flex-shrink: 0; }
.career-screen .panel-header { flex: 0 0 auto; }
.career-score { min-width: 55px; height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #ffd2764d; border-radius: 999px; color: #ffd276; background: #ffb34912; font-size: 10px; }
.career-score span { font-size: 13px; }
.career-hero { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 14px; padding: 15px; border: 1px solid #ffd27638; border-radius: 21px; background: radial-gradient(circle at 0 50%, #9f652848, transparent 42%), linear-gradient(120deg, #292139, #161829); }
.career-emblem { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #ffd27680; border-radius: 23px; color: #15100a; background: linear-gradient(145deg, #ffe09a, #a96627); box-shadow: inset 0 0 0 5px #ffffff24, 0 10px 25px #0007; font-size: 26px; font-weight: 1000; }
.career-hero small { color: #baa686; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.career-hero h3 { margin: 3px 0 4px; color: #ffe3a8; font-size: 18px; font-style: italic; }
.career-hero p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.career-progress { height: 6px; overflow: hidden; border: 1px solid #ffffff0c; border-radius: 99px; background: #070913; }
.career-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #be792f, #ffe39c); box-shadow: 0 0 12px #ffca6d66; transition: width .35s ease-out; }
.career-stats { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #ffffff13; border-radius: 17px; background: #111424d9; }
.career-stats div { min-height: 56px; display: grid; place-content: center; text-align: center; border-right: 1px solid #ffffff0c; border-bottom: 1px solid #ffffff0c; }
.career-stats div:nth-child(3n) { border-right: 0; }
.career-stats div:nth-last-child(-n + 3) { border-bottom: 0; }
.career-stats b { color: #f2dfba; font-size: 14px; }
.career-stats small { margin-top: 2px; color: #777c91; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.career-heading { margin-top: 2px; }
.career-note { margin: -6px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.achievement-list { display: grid; gap: 8px; padding-bottom: 8px; }
.achievement-card { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 10px; min-height: 77px; padding: 10px; border: 1px solid #ffffff14; border-radius: 18px; background: #141727e8; content-visibility: auto; contain-intrinsic-size: auto 77px; }
.achievement-card.complete { border-color: #ffd27655; background: linear-gradient(105deg, #34271d, #171829 68%); }
.achievement-card.claimed { opacity: .67; border-color: #ffffff10; background: #101322; }
.achievement-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #ffd27642; border-radius: 14px; color: #ffd276; background: #d68b3520; font-size: 19px; }
.achievement-card.claimed .achievement-icon { color: #7be8ba; border-color: #55dca64a; background: #55dca618; }
.achievement-copy b { display: block; font-size: 10px; letter-spacing: .035em; }
.achievement-copy p { margin: 3px 0 0; color: #9b9fb1; font-size: 8px; line-height: 1.3; }
.achievement-copy small { display: block; margin-top: 5px; color: #d7b978; font-size: 8px; font-weight: 900; }
.achievement-meter { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #070913; }
.achievement-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9e612a, #ffd276); }
.achievement-claim { min-width: 62px; min-height: 36px; padding: 0 8px; border: 1px solid #ffd2764a; border-radius: 11px; color: #e9c77e; background: #d68b3512; font-size: 8px; font-weight: 1000; letter-spacing: .04em; }
.achievement-claim.ready { color: #211607; border-color: #ffd276; background: #ffd276; box-shadow: 0 0 18px #ffd27640; }
.achievement-claim:disabled { color: #6d7184; border-color: #ffffff0d; background: #ffffff05; }
.panel-header h2 { font-size: 18px; font-style: italic; }
.back-button { font-size: 31px; line-height: 31px; }
.panel-header > div { min-width: 42px; }
.panel-subtitle { margin: 9px 4px 18px; color: var(--muted); text-align: center; font-size: 11px; }
.panel-subtitle { display: none; }
.contract-screen { gap: 0; overflow: hidden; background: radial-gradient(circle at 50% 5%, #172950, #0b0d1a 42%, #070912 78%); }
.contract-screen .panel-header,
.contract-screen .campaign-map-viewport,
.contract-screen .campaign-map-key,
.contract-screen .chapter-banner,
.contract-screen .chapter-story-card,
.contract-screen .mission-map-heading,
.contract-screen > .bottom-button { flex: 0 0 auto; }
.campaign-map-viewport { position: relative; height: 312px; margin: 5px -20px 5px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; touch-action: pan-x; scrollbar-width: none; background: radial-gradient(ellipse at 38% 112%, #6e45ff35, transparent 55%), radial-gradient(circle at 84% 2%, #40e4ff16, transparent 28%), linear-gradient(180deg, #0a1630, #11142a 67%, #181326); border-block: 1px solid #ffffff10; box-shadow: inset 0 -24px 45px #03040a8c; }
.campaign-map-viewport::-webkit-scrollbar { display: none; }
.campaign-map-grid { position: absolute; inset: 0; width: 2980px; opacity: .5; background-image: linear-gradient(#63a9ff0a 1px, transparent 1px), linear-gradient(90deg, #63a9ff0a 1px, transparent 1px), linear-gradient(108deg, transparent 0 44%, #a684ff14 45% 46%, transparent 47% 100%); background-size: 28px 28px, 28px 28px, 230px 100%; }
.campaign-map-skyline { position: absolute; left: 0; bottom: 0; width: 2980px; height: 84px; display: flex; align-items: flex-end; justify-content: space-around; opacity: .22; pointer-events: none; }
.campaign-map-skyline i { width: 8%; height: 48%; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #18284b, #25386c); box-shadow: inset 8px 0 #ffffff05, inset -8px 0 #0003; }
.campaign-map-skyline i:nth-child(2) { height: 86%; }.campaign-map-skyline i:nth-child(3) { height: 62%; }.campaign-map-skyline i:nth-child(4) { height: 100%; }.campaign-map-skyline i:nth-child(5) { height: 55%; }.campaign-map-skyline i:nth-child(6) { height: 78%; }.campaign-map-skyline i:nth-child(7) { height: 42%; }
.campaign-map-label { position: sticky; z-index: 5; left: 20px; top: 10px; width: fit-content; height: 33px; padding: 7px 9px; border: 1px solid #ffffff13; border-radius: 10px; background: #090d1ae8; pointer-events: none; }
.campaign-map-label small, .campaign-map-label b { display: block; }
.campaign-map-label small { color: #78dff4; font-size: 6px; font-weight: 1000; letter-spacing: .17em; }
.campaign-map-label b { margin-top: 2px; color: #f2f5ff; font-size: 8px; letter-spacing: .06em; }
.chapter-strip.campaign-map-route { position: relative; z-index: 2; width: max-content; height: 100%; margin: -33px 0 0; padding: 48px 24px 14px; display: flex; align-items: stretch; gap: 18px; overflow: visible; }
.chapter-map-card { position: relative; flex: 0 0 228px; min-width: 228px; height: 246px; padding: 11px; overflow: visible; border: 1px solid #ffffff16; border-radius: 23px; background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--chapter-color) 28%, transparent), transparent 28%), linear-gradient(145deg, color-mix(in srgb, var(--chapter-color) 10%, #14192c), #0b0f1c 70%); box-shadow: 0 18px 34px #02040ba6, inset 0 0 35px color-mix(in srgb, var(--chapter-color) 8%, transparent); scroll-snap-align: center; transition: transform .2s ease, border-color .2s ease, opacity .2s ease; content-visibility: auto; contain-intrinsic-size: 228px 246px; }
.chapter-map-card::after { content: ""; position: absolute; z-index: -1; left: 100%; top: 50%; width: 19px; height: 4px; border-block: 1px solid #ffffff12; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--chapter-color) 58%, #394257) 0 7px, transparent 7px 11px); }
.chapter-map-card:last-child::after { display: none; }
.chapter-map-card.locked { opacity: .42; filter: grayscale(.7); }
.chapter-map-card.active { border-color: color-mix(in srgb, var(--chapter-color) 78%, white 15%); transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--chapter-color) 32%, transparent), 0 19px 38px #02040bc4, inset 0 0 38px color-mix(in srgb, var(--chapter-color) 15%, transparent); }
.chapter-map-card.cleared::before { content: "✓"; position: absolute; z-index: 4; right: 10px; top: 9px; width: 21px; height: 21px; display: grid; place-items: center; border: 2px solid #0b101a; border-radius: 50%; color: #07130f; background: #70f4e8; font-size: 9px; font-weight: 1000; box-shadow: 0 0 12px #70f4e866; }
.chapter-map-head { width: 100%; min-height: 81px; padding: 0; display: grid; grid-template-columns: 67px 1fr; align-items: center; gap: 10px; color: #edf1ff; background: transparent; text-align: left; }
.chapter-map-head:disabled { color: #838a9d; }
.chapter-map-art { position: relative; width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--chapter-color) 62%, #ffffff44); border-radius: 20px 20px 26px 14px; color: var(--chapter-color); background-color: #090d17; background-image: url("assets/chapter-atlas-11.7.2.webp"); background-repeat: no-repeat; background-size: 500% 500%; background-position: var(--chapter-art-position, 0% 0%); box-shadow: 0 0 24px color-mix(in srgb, var(--chapter-color) 24%, transparent), inset 0 0 0 1px #ffffff18; }
.chapter-map-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, #03050bb8 100%); pointer-events: none; }
.chapter-map-art::after { content: ""; position: absolute; inset: 4px; border: 1px solid #ffffff15; border-radius: 15px 15px 20px 10px; pointer-events: none; }
.chapter-map-art u { position: absolute; right: -4px; bottom: -4px; min-width: 25px; height: 21px; display: grid; place-items: center; border: 2px solid #0b0f19; border-radius: 8px; color: #0a0f17; background: var(--chapter-color); font-size: 7px; font-weight: 1000; text-decoration: none; }
.chapter-map-copy { min-width: 0; }
.chapter-map-copy small, .chapter-map-copy b, .chapter-map-copy em { display: block; }
.chapter-map-copy small { color: var(--chapter-color); font-size: 6px; font-weight: 1000; letter-spacing: .15em; }
.chapter-map-copy b { min-height: 26px; margin-top: 4px; overflow: hidden; font-size: 11px; font-style: italic; line-height: 1.15; }
.chapter-map-copy em { width: fit-content; margin-top: 5px; padding: 3px 6px; border: 1px solid #ffffff16; border-radius: 7px; color: #b7bdd0; background: #0508128f; font-size: 7px; font-style: normal; font-weight: 1000; }
.chapter-progress-pair { margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.chapter-mastery-mini { position: relative; width: 54px; height: 8px; display: block; overflow: hidden; border-radius: 99px; background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff0a; }
.chapter-mastery-mini > i { width: var(--chapter-stars); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--chapter-color), #ffd762); box-shadow: 0 0 8px color-mix(in srgb, var(--chapter-color) 58%, transparent); }
.chapter-mastery-mini > b { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--mastery-stop); width: 1px; background: #ffffff55; transform: translateX(-1px); }
.chapter-mastery-mini > b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #738095; transform: translate(-50%, -50%); }
.chapter-mastery-mini > b.ready::after { background: #fff; box-shadow: 0 0 5px #fff; }
.chapter-mastery-mini > b.claimed::after { background: #ffe271; box-shadow: 0 0 7px #ffe271; }
.chapter-mastery-mini > u { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 5px; font-weight: 1000; text-decoration: none; text-shadow: 0 1px 2px #000; }
.chapter-mastery-mini.perfect { background: #4a3510; box-shadow: 0 0 11px #ffd76255; }
.chapter-score-mini { min-width: 31px; height: 12px; display: grid; place-items: center; border: 1px solid #ffe27138; border-radius: 99px; color: #8e8358; background: #ffe27108; font-size: 5px; font-weight: 1000; line-height: 1; }
.chapter-score-mini.ready { color: #191307; border-color: #ffe271; background: #ffe271; box-shadow: 0 0 10px #ffe27155; animation: chapter-score-ready .82s ease-in-out infinite alternate; }
.chapter-score-mini.claimed { color: #ffe271; border-color: #ffe2719c; background: #ffe27117; box-shadow: inset 0 0 7px #ffe27118; }
@keyframes chapter-score-ready { to { filter: brightness(1.22); transform: translateY(-1px); } }
.chapter-gambit-mini { min-width: 31px; height: 12px; display: grid; place-items: center; border: 1px solid #ff5f9638; border-radius: 99px; color: #ad7186; background: #ff5f960a; font-size: 5px; font-weight: 1000; line-height: 1; }
.chapter-gambit-mini.claimed { color: #fff; border-color: #ff5f96; background: #ff5f9626; box-shadow: 0 0 8px #ff5f9644; }
.chapter-level-route { position: relative; min-height: 134px; margin-top: 7px; padding: 12px 7px 5px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); align-items: center; gap: 7px 13px; border-top: 1px solid #ffffff10; }
.chapter-level-route::before { content: ""; position: absolute; inset: 35px 18px 31px; opacity: .65; background: linear-gradient(90deg, var(--chapter-color), #576078 49%, var(--chapter-color)) 0 0 / 100% 3px no-repeat, linear-gradient(90deg, var(--chapter-color), #576078 49%, var(--chapter-color)) 0 100% / 100% 3px no-repeat, linear-gradient(#576078, #576078) 100% 0 / 3px 100% no-repeat; filter: saturate(.7); }
.chapter-level-node { position: relative; z-index: 2; min-width: 0; min-height: 52px; padding: 0; display: grid; justify-items: center; align-content: center; gap: 2px; color: #7e879b; background: transparent; }
.chapter-level-node:nth-child(n+4) { grid-row: 2; }
.chapter-level-node:nth-child(4) { grid-column: 3; }.chapter-level-node:nth-child(5) { grid-column: 2; }.chapter-level-node:nth-child(6) { grid-column: 1; }
.chapter-level-node span { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #3d465a; border-radius: 13px; color: #788195; background: linear-gradient(145deg, #111827, #070a12); font-size: 16px; box-shadow: 0 7px 14px #0009; transition: transform .16s ease, background .16s ease; }
.chapter-level-node small { color: #7b8396; font-size: 6px; font-weight: 1000; }
.mission-star-pips { height: 3px; display: flex; gap: 2px; }
.mission-star-pips i { width: 7px; height: 2px; border-radius: 99px; background: #ffffff18; box-shadow: inset 0 0 0 1px #ffffff08; }
.mission-star-pips i.on { background: linear-gradient(90deg, var(--chapter-color), #ffe271); box-shadow: 0 0 5px color-mix(in srgb, var(--chapter-color) 60%, transparent); }
.chapter-level-node.completed span { color: #08130f; border-color: #70f4e8; background: #70f4e8; }
.chapter-level-node.current span { color: var(--chapter-color); border-color: color-mix(in srgb, var(--chapter-color) 72%, #ffffff24); box-shadow: 0 0 14px color-mix(in srgb, var(--chapter-color) 27%, transparent), 0 7px 14px #0009; }
.chapter-level-node.selected span { color: #080b12; border-color: white; background: var(--chapter-color); transform: scale(1.13); box-shadow: 0 0 18px color-mix(in srgb, var(--chapter-color) 60%, transparent); }
.chapter-level-node.selected small { color: white; }
.chapter-level-node.gambit-cleared::after { content: "◆"; position: absolute; z-index: 4; top: 0; right: 3px; color: #ff77a5; font-size: 7px; text-shadow: 0 0 7px #ff5f96; }
.chapter-level-node.locked { opacity: .34; }
.chapter-level-node:disabled { cursor: default; }
.campaign-map-key { min-height: 18px; display: flex; justify-content: center; gap: 10px; color: #737b90; font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.campaign-map-key span { display: flex; align-items: center; gap: 4px; }
.campaign-map-key i { width: 6px; height: 6px; border-radius: 50%; background: #4a5062; }
.campaign-map-key i.complete { background: #70f4e8; box-shadow: 0 0 6px #70f4e8; }
.campaign-map-key i.current { background: #fff; box-shadow: 0 0 6px #fff; }
.campaign-map-key i.gambit { border-radius: 1px; background: #ff5f96; box-shadow: 0 0 6px #ff5f96; transform: rotate(45deg) scale(.75); }
.campaign-legacy-summary, .campaign-legacy-missions { display: none !important; }
.chapter-banner { min-height: 63px; margin-bottom: 7px; padding: 8px 11px; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 9px; border-radius: 17px; background: linear-gradient(125deg, color-mix(in srgb, var(--chapter-color) 20%, #171a2d), #111421); border: 1px solid color-mix(in srgb, var(--chapter-color) 54%, transparent); box-shadow: inset 0 0 30px color-mix(in srgb, var(--chapter-color) 12%, transparent); }
.chapter-banner > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #070a13c4; color: var(--chapter-color, var(--lime)); font-size: 22px; box-shadow: 0 0 18px color-mix(in srgb, var(--chapter-color) 22%, transparent); }
.chapter-banner small { display: block; color: var(--chapter-color, var(--lime)); font-size: 6px; letter-spacing: .14em; }
.chapter-banner b { display: block; margin: 2px 0; overflow: hidden; font-size: 13px; font-style: italic; white-space: nowrap; text-overflow: ellipsis; }
.chapter-banner em { display: flex; gap: 4px; margin-top: 4px; font-style: normal; }
.chapter-banner em i { position: relative; width: 23px; height: 6px; border-radius: 99px; background: #ffffff12; }
.chapter-banner em i.done { background: var(--chapter-color, var(--lime)); }
.chapter-banner em i.current { background: #fff; box-shadow: 0 0 8px #fff9; }
.chapter-banner em.story-progress-long { max-width: 245px; flex-wrap: nowrap; gap: 3px; }
.chapter-banner em.story-progress-long i { flex: 1 1 auto; width: auto; height: 5px; }
.chapter-story-card { width: 100%; min-height: 40px; margin: 0 0 5px; padding: 6px 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; text-align: left; border: 1px solid #ffffff16; border-radius: 13px; color: #f7f8ff; background: linear-gradient(125deg, color-mix(in srgb, var(--chapter-color, #7047ff) 10%, #15192a), #0d101c); box-shadow: inset 0 0 24px color-mix(in srgb, var(--chapter-color, #7047ff) 7%, transparent); }
.chapter-story-card span { min-width: 0; }
.chapter-story-card small, .chapter-story-card b { display: block; }
.chapter-story-card small { color: var(--lime); font-size: 6px; font-weight: 1000; letter-spacing: .14em; }
.chapter-story-card b { margin-top: 2px; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.chapter-story-card p { display: none; }
.chapter-story-card em { grid-column: 2; align-self: center; color: var(--chapter-color, #c3abff); font-size: 7px; font-style: normal; font-weight: 1000; letter-spacing: .05em; }
.chapter-story-dialog { max-width: 350px; max-height: calc(100dvh - 48px); overflow-y: auto; text-align: left; }
.chapter-story-icon { width: 104px; height: 104px; margin: 9px auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--story-color, var(--lime)); border-radius: 24px; color: var(--story-color, var(--lime)); background-color: #090d19; background-image: linear-gradient(180deg, transparent 55%, #03050b8a), url("assets/chapter-atlas-11.7.2.webp"); background-repeat: no-repeat; background-size: 100% 100%, 500% 500%; background-position: center, var(--chapter-art-position, 0% 0%); box-shadow: 0 0 28px color-mix(in srgb, var(--story-color, var(--lime)) 28%, transparent), inset 0 0 0 1px #ffffff16; }
.chapter-story-dialog h2 { margin: 0; text-align: center; }
.chapter-story-dialog > b { display: block; margin-top: 5px; color: var(--lime); text-align: center; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.chapter-story-dialog > p { margin: 12px 0; color: #d0d4e1; font-size: 11px; line-height: 1.5; }
.chapter-story-missions { margin: 10px 0 14px; display: grid; gap: 6px; }
.chapter-story-missions span { padding: 8px 9px; display: grid; grid-template-columns: 24px 1fr; gap: 1px 7px; border: 1px solid #ffffff12; border-radius: 11px; background: #090d18; }
.chapter-story-missions i { grid-row: 1 / 3; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #0d1310; background: var(--lime); font-size: 8px; font-style: normal; font-weight: 1000; }
.chapter-story-missions b { font-size: 8px; }
.chapter-story-missions small { color: #aeb5c8; font-size: 7px; line-height: 1.35; }
.chapter-story-missions span.classified { border-style: dashed; opacity: .58; }
.chapter-story-missions span.classified i { color: #8a91a5; background: #252a3a; box-shadow: none; }
.chapter-story-missions span.classified small { color: #6f768b; }
.chapter-story-dialog .primary-button { width: 100%; min-height: 46px; }
.mission-map-heading { min-height: 48px; margin: 1px 2px; display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.mission-map-heading > .mission-map-record { grid-column: 3; grid-row: 1; }
.mission-map-heading > #missionMapIcon { grid-column: 1; grid-row: 1; }
.mission-map-heading > #missionMapIcon + div { grid-column: 2; grid-row: 1; }
.mission-map-heading > span { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--mission-color, #70f4e8) 50%, transparent); border-radius: 11px; color: var(--mission-color, #70f4e8); background: color-mix(in srgb, var(--mission-color, #70f4e8) 10%, #090c15); font-size: 17px; }
.mission-map-heading small, .mission-map-heading b, .mission-map-heading em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mission-map-heading small { color: #81889c; font-size: 6px; font-weight: 1000; letter-spacing: .12em; }
.mission-map-heading b { margin-top: 1px; font-size: 10px; }
.mission-map-heading em { margin-top: 2px; color: var(--mission-color, #70f4e8); font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .04em; }
.mission-map-record { min-width: 46px; padding: 5px 6px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 4px; border: 1px solid #ffffff12; border-radius: 10px; color: #7f8799; background: #080b14bd; }
.mission-map-record small { grid-column: 1 / -1; font-size: 5px; letter-spacing: .12em; }
.mission-map-record b { overflow: visible; color: #9aa2b4; font-size: 8px; font-style: italic; }
.mission-map-record em { width: 16px; height: 16px; margin: 0; display: grid; place-items: center; border: 1px solid #ffffff1f; border-radius: 50%; color: #929bad; font-size: 7px; }
.mission-map-record.has-record { border-color: color-mix(in srgb, var(--mission-color) 46%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--mission-color) 8%, transparent); }
.mission-map-record.has-record b { color: #fff; }
.mission-map-record.has-record em { color: #08100e; border-color: var(--mission-color); background: var(--mission-color); box-shadow: 0 0 9px color-mix(in srgb, var(--mission-color) 55%, transparent); }
.mission-record-grade { position: absolute; right: -4px; top: -4px; width: 15px; height: 15px; display: grid; place-items: center; border: 2px solid #0b0f19; border-radius: 50%; color: #0b1210; background: #ffe271; font-size: 6px; font-style: italic; box-shadow: 0 0 7px #ffe27177; }
.mission-record-grade[data-grade="A"] { background: #ceff42; box-shadow-color: #ceff4277; }
.mission-record-grade[data-grade="B"] { background: #8cf3d9; box-shadow-color: #8cf3d977; }
.mission-record-grade[data-grade="C"] { background: #74d9ff; box-shadow-color: #74d9ff77; }
.mission-record-grade[data-grade="D"] { color: #fff; background: #667085; box-shadow: none; }
.mission-map-record[data-grade="S"] em { color: #171104; border-color: #ffe271; background: #ffe271; box-shadow: 0 0 11px #ffe27177; }
.mission-list { position: relative; flex: 1 1 auto; min-height: 72px; max-height: 94px; grid-template-columns: repeat(var(--mission-count, 6), minmax(42px, 1fr)); align-items: center; gap: 0; padding: 4px 2px 6px; overflow: visible; border-block: 1px solid #ffffff0d; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--mission-color, #7047ff) 11%, transparent), transparent 72%); }
.mission-list::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 99px; background: repeating-linear-gradient(90deg, #566077 0 8px, transparent 8px 14px); opacity: .46; }
.mission-node { position: relative; z-index: 1; width: 100%; min-height: 66px; padding: 0; display: grid; justify-items: center; align-content: center; gap: 3px; color: #798096; background: transparent; transform: translateY(var(--mission-y, 0)); }
.mission-node::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 20px; background: #293247; transform: translate(-50%, -50%); z-index: -1; }
.mission-node-icon { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #41495d; border-radius: 13px; color: #7a8296; background: #0b0f1a; font-size: 17px; box-shadow: 0 7px 14px #0008; }
.mission-node small { max-width: 55px; overflow: hidden; color: #7d8499; font-size: 6px; font-weight: 1000; white-space: nowrap; text-overflow: ellipsis; }
.mission-node.completed .mission-node-icon { color: #07120e; border-color: #70f4e8; background: #70f4e8; }
.mission-node.current .mission-node-icon { color: var(--mission-color); border-color: var(--mission-color); box-shadow: 0 0 16px color-mix(in srgb, var(--mission-color) 35%, transparent); }
.mission-node.selected { transform: translateY(var(--mission-y, 0)) scale(1.12); }
.mission-node.selected .mission-node-icon { color: #080b13; border-color: #fff; background: var(--mission-color); box-shadow: 0 0 18px color-mix(in srgb, var(--mission-color) 55%, transparent); }
.mission-node.selected small { color: #fff; }
.mission-node.locked { opacity: .35; filter: grayscale(.7); }
.mission-node:disabled { cursor: default; }
.contract-screen > .bottom-button { min-height: 50px; margin-top: 7px; }
.mission-state { color: var(--muted); font-size: 8px; font-weight: 1000; }
.mission-stars { display: block; margin-top: 4px; color: #ffcf62; font-size: 9px; letter-spacing: 1px; }
.mission-mastery { display: block; margin-top: 2px; overflow: hidden; color: #d7b96c; font-size: 6px; font-weight: 900; letter-spacing: .05em; white-space: nowrap; text-overflow: ellipsis; }
.mission-mastery.secured { color: #73ecd2; }
.contract-list { display: grid; gap: 11px; }
.contract-card { position: relative; min-height: 96px; padding: 10px 12px; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 12px; text-align: left; border-radius: 20px; background: #15182a; border: 2px solid transparent; overflow: hidden; transition: transform .18s, border-color .18s, background .18s; }
.contract-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, #ffffff09); pointer-events: none; }
.contract-card.selected { transform: translateX(4px); border-color: var(--lime); background: #1c2031; box-shadow: 0 0 24px #ceff4218; }
.contract-art { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 17px; overflow: hidden; font-size: 28px; font-weight: 1000; color: white; }
.contract-art::before, .contract-art::after { content: ""; position: absolute; background: #090b18; opacity: .7; }
.contract-art::before { width: 16px; height: 54px; left: 12px; bottom: -10px; box-shadow: 27px -13px 0 #090b18, 45px 4px 0 #090b18; }
.contract-art::after { width: 65px; height: 4px; bottom: 11px; }
.contract-art i { position: relative; z-index: 2; color: var(--lime); font-style: normal; filter: drop-shadow(0 0 9px currentColor); }
.museum-art { background: linear-gradient(145deg, #7047ff, #2c195f); }
.casino-art { background: linear-gradient(145deg, #ff4b8b, #622246); }
.casino-art i { color: #ffe75d; }
.vault-art { background: linear-gradient(145deg, #31cce7, #16475f); }
.vault-art i { color: #a8f5ff; }
.contract-copy { min-width: 0; }
.contract-copy small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.contract-copy b { display: block; margin: 3px 0; font-size: 13px; font-style: italic; }
.contract-copy em { display: block; overflow: hidden; color: #8f92a5; font-size: 9px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.contract-reward { align-self: end; padding-bottom: 3px; color: var(--lime); font-size: 10px; font-weight: 1000; }
.briefing-screen { z-index: 7; flex-direction: column; align-items: center; padding: max(18px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 34%, #34246e, #0a0c18 58%); }
.briefing-scanlines { position: absolute; inset: 0; opacity: .17; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #ffffff0b 4px); }
.briefing-header { position: relative; width: 100%; display: flex; justify-content: space-between; color: #71758b; font-size: 8px; letter-spacing: .14em; }
.briefing-header span { color: var(--lime); }
.briefing-location { position: relative; margin-top: 8vh; text-align: center; }
.briefing-location small { display: block; color: var(--lime); font-size: 9px; letter-spacing: .2em; }
.briefing-location b { display: block; margin-top: 4px; font-size: 23px; font-style: italic; }
.crew-portrait { position: relative; width: 180px; height: 210px; margin-top: 18px; display: grid; place-items: center; border-radius: 90px 90px 45px 45px; background: linear-gradient(150deg, #9b78ff, #3c207c); border: 5px solid #080a15; box-shadow: 0 20px 50px #0009, 0 0 45px #7047ff33; overflow: hidden; }
.crew-portrait > img { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: 0; transform: scale(1.03); transition: opacity .22s ease-out; }
.crew-portrait.has-art > img { opacity: 1; }
.crew-portrait.has-art::before, .crew-portrait.has-art::after, .crew-portrait.has-art > span, .crew-portrait.has-art > i { opacity: 0; }
.crew-portrait::before { content: ""; position: absolute; width: 150px; height: 62px; top: 58px; border-radius: 30px; background: #080a15; }
.crew-portrait::after { content: ""; position: absolute; width: 90px; height: 25px; top: 76px; background: radial-gradient(circle at 25% 50%, var(--lime) 0 7px, transparent 8px), radial-gradient(circle at 75% 50%, var(--lime) 0 7px, transparent 8px); filter: drop-shadow(0 0 8px var(--lime)); }
.crew-portrait > span { position: relative; z-index: 2; margin-top: 115px; color: #ffffff15; font-size: 76px; font-weight: 1000; font-style: italic; }
.crew-portrait > i { position: absolute; left: 50%; bottom: -20px; width: 150px; height: 90px; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: #20243b; }
.crew-portrait.rook { background: linear-gradient(150deg, #ff835b, #6d2848); }
.crew-portrait.rook::after { background: radial-gradient(circle at 25% 50%, #ffcf4c 0 7px, transparent 8px), radial-gradient(circle at 75% 50%, #ffcf4c 0 7px, transparent 8px); filter: drop-shadow(0 0 8px #ffcf4c); }
.crew-portrait.ace { background: linear-gradient(150deg, #40e4ff, #245b85); }
.dialogue-card { position: relative; width: 100%; min-height: 132px; margin-top: -25px; padding: 22px 20px 15px; border-radius: 22px; background: #15182af2; border: 1px solid #ffffff1c; box-shadow: 0 15px 35px #0008; }
.speaker { display: flex; align-items: center; gap: 8px; }
.speaker b { color: var(--lime); font-size: 11px; letter-spacing: .09em; }
.speaker span { padding: 3px 6px; border-radius: 6px; background: #ffffff0c; color: var(--muted); font-size: 7px; }
.dialogue-card p { margin: 10px 0 13px; min-height: 38px; color: #e3e4eb; font-size: 14px; line-height: 1.45; }
.story-progress { display: flex; justify-content: center; gap: 5px; }
.story-progress i { width: 22px; height: 4px; border-radius: 4px; background: #3b3f52; }
.story-progress i.on { background: var(--lime); }
.briefing-screen > .primary-button { position: relative; margin-top: auto; }
.briefing-screen > .text-button { position: relative; min-height: 34px; }

/* Target-first briefing popup: the objective dominates, everything else stays secondary. */
.briefing-screen { --briefing-accent: var(--lime); z-index: 20; place-items: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); overflow: hidden; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--briefing-accent) 16%, transparent), transparent 48%), #03050bc7; backdrop-filter: blur(5px) saturate(.8); }
.briefing-screen:not(.active) { display: none !important; pointer-events: none; }
.briefing-screen.active { display: grid; }
.briefing-screen::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px); background-size: 28px 28px; transform: perspective(450px) rotateX(58deg) scale(1.4) translateY(18%); }
.briefing-modal { position: relative; z-index: 2; width: min(370px, 100%); max-height: 100%; padding: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow-x: hidden; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--briefing-accent) 54%, transparent); border-radius: 28px; background: linear-gradient(155deg, #15192cf5, #080b16f7 72%); box-shadow: 0 28px 80px #000d, inset 0 0 50px color-mix(in srgb, var(--briefing-accent) 8%, transparent); animation: briefing-intercept .3s cubic-bezier(.2,.85,.25,1.15); }
@keyframes briefing-intercept { from { opacity: 0; transform: translateY(28px) scale(.94); } }
.briefing-modal::before { content: ""; position: absolute; left: 15%; right: 15%; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--briefing-accent), transparent); box-shadow: 0 0 18px var(--briefing-accent); }
.briefing-header { position: relative; width: 100%; display: flex; justify-content: space-between; color: #777f93; font-size: 7px; letter-spacing: .14em; }
.briefing-header span { color: var(--briefing-accent); }
.briefing-location { position: relative; margin: 0; text-align: center; }
.briefing-location small { display: block; color: #82899d; font-size: 7px; font-weight: 1000; letter-spacing: .13em; }
.briefing-location b { display: block; margin-top: 3px; overflow: hidden; font-size: 15px; font-style: italic; white-space: nowrap; text-overflow: ellipsis; }
.briefing-target-hero { position: relative; min-height: 260px; padding: 17px 14px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--briefing-accent) 46%, transparent); border-radius: 24px; text-align: center; background: radial-gradient(circle at 50% 37%, color-mix(in srgb, var(--briefing-accent) 21%, transparent), transparent 43%), linear-gradient(180deg, #090d19, #111426); }
.briefing-target-hero::before, .briefing-target-hero::after { content: ""; position: absolute; left: 50%; top: 43%; border: 1px solid color-mix(in srgb, var(--briefing-accent) 28%, transparent); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.briefing-target-hero::before { width: 190px; height: 190px; }
.briefing-target-hero::after { width: 225px; height: 225px; border-style: dashed; opacity: .5; animation: target-orbit 12s linear infinite; }
.briefing-target-beacon { position: relative; z-index: 1; width: 124px; height: 124px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--briefing-accent) 82%, white 18%); border-radius: 50%; color: #fff; background: radial-gradient(circle at 43% 34%, #ffffff20 0 10%, transparent 11%), radial-gradient(circle, color-mix(in srgb, var(--briefing-accent) 22%, #182238) 0 46%, #070b16 72%); box-shadow: 0 0 45px color-mix(in srgb, var(--briefing-accent) 48%, transparent), inset 0 0 24px #000b; animation: target-float 2.2s ease-in-out infinite alternate; }
.briefing-target-beacon::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -12px; height: 12px; border-radius: 50%; background: var(--briefing-accent); opacity: .38; filter: blur(7px); }
.briefing-target-beacon i { position: absolute; inset: -9px; border: 1px dashed color-mix(in srgb, var(--briefing-accent) 62%, transparent); border-radius: 50%; animation: target-orbit 10s linear infinite; }
.briefing-target-beacon span { position: relative; z-index: 2; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 66px; line-height: 1; filter: drop-shadow(0 8px 9px #000b) drop-shadow(0 0 12px color-mix(in srgb, var(--briefing-accent) 46%, transparent)); }
.briefing-target-hero > small { position: relative; z-index: 1; margin-top: 13px; color: var(--briefing-accent); font-size: 8px; font-weight: 1000; letter-spacing: .22em; }
.briefing-target-hero > strong { position: relative; z-index: 1; margin-top: 1px; color: #fff; font-size: 28px; line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--briefing-accent) 45%, transparent); }
.briefing-target-hero h2 { position: relative; z-index: 1; max-width: 100%; margin: 2px 0 0; overflow: hidden; color: #fff; font-size: 20px; font-style: italic; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.briefing-target-hero p { position: relative; z-index: 1; max-width: 94%; margin: 6px 0 0; overflow: hidden; color: #98a0b3; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
@keyframes target-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes target-float { to { transform: translateY(-5px) rotate(4deg); } }
.briefing-route { min-height: 48px; padding: 6px 8px; display: grid; grid-template-columns: 56px 1fr 56px 1fr 56px; align-items: center; gap: 4px; border: 1px solid #ffffff11; border-radius: 14px; background: #080b15ad; }
.briefing-route span { min-width: 0; display: grid; justify-items: center; gap: 2px; color: #8c93a6; }
.briefing-route span i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #b9c0d1; background: #ffffff0d; font-size: 12px; font-style: normal; }
.briefing-route span b { overflow: hidden; max-width: 58px; font-size: 5px; letter-spacing: .07em; white-space: nowrap; text-overflow: ellipsis; }
.briefing-route span.target { color: var(--briefing-accent); }
.briefing-route span.target i { color: #07100c; background: var(--briefing-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--briefing-accent) 36%, transparent); }
.briefing-route u { position: relative; height: 2px; overflow: hidden; background: #ffffff16; text-decoration: none; }
.briefing-route u::after { content: ""; position: absolute; width: 45%; height: 100%; background: var(--briefing-accent); animation: route-run 1.25s linear infinite; }
.briefing-crew-tip { min-height: 70px; display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 10px; }
.briefing-screen .crew-portrait { z-index: 4; width: 66px; height: 66px; margin: 0; display: grid; border-width: 2px; border-radius: 19px; box-shadow: 0 8px 19px #000b, 0 0 20px color-mix(in srgb, var(--briefing-accent) 34%, transparent); }
.briefing-screen .crew-portrait > img { object-position: 50% 28%; transform: scale(1.02); }
.briefing-screen .crew-portrait > span { margin-top: 23px; font-size: 22px; }
.briefing-screen .crew-portrait > i { width: 42px; height: 28px; bottom: -8px; }
.briefing-screen .crew-portrait::before { width: 42px; height: 18px; top: 15px; }
.briefing-screen .crew-portrait::after { width: 32px; height: 9px; top: 20px; background-size: auto; }
.briefing-screen .dialogue-card { min-width: 0; width: 100%; min-height: 58px; margin: 0; padding: 8px 10px; border-radius: 13px; }
.briefing-screen .dialogue-card p { min-height: 0; margin: 4px 0 0; display: -webkit-box; overflow: hidden; color: #c8ccda; font-size: 8px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.briefing-screen .story-progress { display: none; }
.briefing-modal > .primary-button { min-height: 50px; margin-top: 0; }
.briefing-modal > .text-button { display: none; }
@keyframes route-run { from { transform: translateX(-110%); } to { transform: translateX(250%); } }

/* Pre-heist approach planning */
.approach-screen { gap: 12px; overflow-y: auto; background: radial-gradient(circle at 80% 8%, #244857, #16162a 38%, #080a15 74%); }
.approach-screen > * { flex-shrink: 0; }
.header-spacer { width: 42px; }
.approach-section-title { min-height: 22px; display: flex; align-items: center; gap: 7px; color: #daddE8; }
.approach-section-title > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; color: #07110e; background: var(--approach-accent, #70f4e8); font-size: 9px; font-weight: 1000; }
.approach-section-title b { font-size: 9px; letter-spacing: .13em; }
.approach-section-title small { margin-left: auto; color: #747a90; font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.difficulty-title { margin-top: 2px; padding-top: 11px; border-top: 1px solid #ffffff18; }
.approach-target { min-height: 86px; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--approach-accent, #70f4e8) 38%, transparent); border-radius: 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--approach-accent, #70f4e8) 12%, #1e2639), #15182a); }
.approach-target > span { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--approach-accent, #70f4e8); border-radius: 18px; color: var(--approach-accent, #70f4e8); background: color-mix(in srgb, var(--approach-accent, #70f4e8) 14%, transparent); font-size: 30px; }
.approach-target small { display: block; color: #8f94aa; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.approach-target b { display: flex; align-items: baseline; gap: 9px; margin-top: 4px; }
.approach-target strong { flex: 0 0 auto; color: var(--approach-accent, #70f4e8); font-size: 23px; line-height: 1; white-space: nowrap; }
.approach-target em { min-width: 0; overflow: hidden; font-size: 14px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.approach-mastery { min-height: 39px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border: 1px solid #ffffff10; border-radius: 12px; background: #090c16c9; }
.approach-mastery > span { min-width: 0; min-height: 29px; padding: 4px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #ffffff0b; border-radius: 8px; color: #778095; background: linear-gradient(145deg, #ffffff07, #ffffff02); }
.approach-mastery i { color: #586072; font-size: 6px; line-height: 1; font-style: normal; letter-spacing: 0; white-space: nowrap; }
.approach-mastery b { overflow: hidden; font-size: 5.5px; line-height: 1; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.approach-mastery > span.earned { color: #fff3c0; background: linear-gradient(90deg, #ffd76218, #ffffff05); }
.approach-mastery > span.earned i { color: #ffd762; text-shadow: 0 0 7px #ffd762a8; }
.approach-score-chase { min-height: 54px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--approach-accent, #70f4e8) 24%, #ffffff0b); border-radius: 14px; background: linear-gradient(100deg, color-mix(in srgb, var(--approach-accent, #70f4e8) 7%, #0b0e19), #101525); }
.approach-score-chase > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 13px; color: #778095; background: #060911; font-size: 22px; font-weight: 1000; font-style: italic; }
.approach-score-chase > span[data-grade="S"] { color: #ffe271; border-color: #ffe2718f; box-shadow: inset 0 0 18px #ffe2711c, 0 0 15px #ffe27118; }
.approach-score-chase > span[data-grade="A"] { color: var(--lime); border-color: #ceff4275; }
.approach-score-chase > span[data-grade="B"], .approach-score-chase > span[data-grade="C"] { color: #70f4e8; border-color: #70f4e855; }
.approach-score-chase > div { min-width: 0; display: grid; gap: 3px; }
.approach-score-chase small { color: #7f889d; font-size: 5.8px; font-weight: 900; letter-spacing: .13em; }
.approach-score-chase > div > b { overflow: hidden; font-size: 11px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.approach-score-chase > div > i { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; font-style: normal; }
.approach-score-chase u { height: 10px; display: grid; place-items: center; border-radius: 3px; color: #626a7e; background: #ffffff08; font-size: 5px; font-weight: 1000; text-decoration: none; }
.approach-score-chase u.earned { color: #07100e; background: color-mix(in srgb, var(--approach-accent, #70f4e8) 76%, white); }
.approach-score-chase u.current { box-shadow: 0 0 8px var(--approach-accent, #70f4e8); }
.approach-score-chase > em { display: grid; justify-items: end; gap: 2px; font-style: normal; }
.approach-score-chase > em b { color: #ffe271; font-size: 10px; }
.approach-pickups { display: flex; gap: 6px; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: none; }
.approach-pickups::-webkit-scrollbar { display: none; }
.approach-pickup { min-width: max-content; height: 34px; display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border: 1px solid #ffffff14; border-radius: 11px; color: #c6cad7; background: #0b0e18c9; }
.approach-pickup i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #08100c; background: var(--pickup-color, #ceff42); font-size: 12px; font-style: normal; font-weight: 1000; }
.approach-pickup b { font-size: 7px; letter-spacing: .04em; }
.approach-screen > .quick-intel, .approach-screen > .approach-loadout { display: none; }
.quick-intel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quick-intel > div { min-height: 48px; padding: 7px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto 1fr; align-items: center; column-gap: 6px; border: 1px solid #ffffff13; border-radius: 11px; background: #0b0e18c9; }
.quick-intel span { grid-row: 1 / 3; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #0a0d15; background: #70f4e8; font-size: 10px; font-weight: 1000; }
.quick-intel > div:first-child span { color: #fff; background: #ff5f78; }
.quick-intel > div:nth-child(2) span { background: #78dff4; }
.quick-intel > div:last-child span { color: var(--lime); background: #7047ff; }
.quick-intel b { align-self: end; overflow: hidden; font-size: 7px; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; }
.quick-intel small { align-self: start; margin-top: 2px; color: #8e94a8; font-size: 6px; line-height: 1.2; }
.approach-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.approach-card { position: relative; min-height: 108px; width: 100%; display: grid; grid-template-rows: 44px 1fr 18px; justify-items: center; align-items: center; gap: 4px; padding: 9px 6px 7px; text-align: center; border: 1px solid #ffffff14; border-radius: 17px; background: #141727e8; }
.approach-card.selected { border-color: var(--approach-color); background: linear-gradient(105deg, color-mix(in srgb, var(--approach-color) 19%, #151827), #151827 70%); box-shadow: 0 0 24px color-mix(in srgb, var(--approach-color) 15%, transparent); }
.approach-card.sealed { box-shadow: inset 0 0 0 1px #ff5f9626, 0 0 18px #ff5f9614; }
.approach-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--approach-color) 48%, transparent); border-radius: 14px; color: var(--approach-color); background: color-mix(in srgb, var(--approach-color) 12%, transparent); font-size: 20px; }
.approach-card-copy { min-width: 0; }
.approach-card-copy b { display: block; font-size: 11px; letter-spacing: .04em; }
.approach-card-copy small { display: block; margin-top: 3px; color: #a5a9ba; font-size: 7px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.difficulty-meter { display: flex; justify-content: center; gap: 3px; margin-top: 6px; }
.difficulty-meter i { width: 17px; height: 3px; border-radius: 4px; background: #ffffff18; }
.difficulty-meter i.on { background: var(--approach-color); box-shadow: 0 0 7px color-mix(in srgb, var(--approach-color) 60%, transparent); }
.approach-card-copy p { margin: 3px 0 5px; color: #9ca0b2; font-size: 8px; line-height: 1.3; }
.approach-trade { display: flex; flex-wrap: wrap; gap: 4px; }
.approach-trade i { padding: 3px 5px; border-radius: 6px; color: #8ce8c8; background: #53dfae12; font-size: 6px; font-style: normal; font-weight: 1000; letter-spacing: .05em; }
.approach-trade i.cost { color: #ff9cb7; background: #ff537c12; }
.approach-check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #ffffff1d; border-radius: 50%; color: transparent; font-size: 9px; }
.approach-card.selected .approach-check { border-color: var(--approach-color); color: #07110f; background: var(--approach-color); }
.approach-loadout { min-height: 49px; padding: 7px 8px 7px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #ffffff13; border-radius: 12px; background: #0b0e18b8; }
.approach-loadout > div { min-width: 0; }
.approach-loadout span { display: block; color: #8e94a8; font-size: 7px; font-weight: 1000; letter-spacing: .08em; }
.approach-loadout span b { color: #70f4e8; }
.approach-loadout > div > small { display: block; margin-top: 3px; overflow: hidden; color: #b5b9c8; font-size: 7px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.approach-loadout > button { min-width: 96px; min-height: 35px; padding: 5px 7px; border: 1px solid #70f4e84a; border-radius: 9px; color: #70f4e8; background: #70f4e811; }
.approach-loadout > button b, .approach-loadout > button small { display: block; }
.approach-loadout > button b { font-size: 8px; letter-spacing: .06em; }
.approach-loadout > button small { margin-top: 2px; max-width: 100px; color: #8faeac; font-size: 6px; line-height: 1.15; }
.approach-loadout > button:disabled { opacity: .48; }
.approach-screen > .bottom-button { margin-top: auto; }
.approach-screen > #launchApproachButton,
.contract-screen > #startContractButton { position: sticky; z-index: 8; bottom: max(0px, env(safe-area-inset-bottom)); box-shadow: 0 -12px 24px #080a15d9, 0 10px 25px color-mix(in srgb, var(--approach-accent, #ceff42) 20%, transparent); }

@media (max-height: 700px) {
  .approach-screen { gap: 7px; }
  .approach-section-title { min-height: 17px; }
  .approach-section-title > span { width: 17px; height: 17px; font-size: 7px; }
  .approach-target { min-height: 66px; grid-template-columns: 47px 1fr; gap: 9px; padding: 8px 10px; border-radius: 15px; }
  .approach-target > span { width: 46px; height: 46px; border-radius: 14px; font-size: 23px; }
  .approach-target strong { font-size: 18px; }
  .approach-mastery { min-height: 31px; }
  .approach-score-chase { min-height: 48px; }
}
.upgrade-list { display: grid; gap: 12px; }
.shop-wallet { display: flex; gap: 7px; font-size: 9px; }
.shop-wallet span { padding: 6px 8px; display: flex; align-items: center; gap: 4px; border-radius: 10px; background: #0a0c16; }
.shop-wallet .currency-icon { width: 17px; height: 17px; }
.shop-wallet span:first-child { color: var(--lime); }
.shop-wallet span:last-child { color: var(--cyan); }
.shop-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 12px 0 0; padding: 4px; border-radius: 14px; background: #0b0e19; }
.billing-ready .shop-tabs { grid-template-columns: repeat(5, 1fr); }
.shop-tabs button[hidden] { display: none; }
.shop-tabs button { height: 36px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 1000; }
.shop-tabs button.active { background: #7047ff; color: white; }
.shop-tabs .deals-tab { color: #f2c46e; }
.shop-tabs .deals-tab.active { color: #2c1c08; background: linear-gradient(135deg, #ffe281, #ffb347); box-shadow: 0 0 14px #ffbd433d; }
.gear-loadout { margin-bottom: 10px; padding: 11px; display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; border: 1px solid #70f4e83b; border-radius: 16px; background: linear-gradient(120deg, #10292c, #15182a); }
.gear-loadout[hidden] { display: none; }
.gear-loadout > div:first-child small, .gear-loadout > div:first-child b { display: block; }
.gear-loadout > div:first-child small { color: #70f4e8; font-size: 7px; font-weight: 1000; letter-spacing: .11em; }
.gear-loadout > div:first-child b { margin-top: 3px; font-size: 11px; }
.gear-loadout-slots { display: grid; grid-template-columns: repeat(4, 30px); gap: 5px; }
.gear-loadout-slots span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px dashed #ffffff21; border-radius: 9px; color: #555b70; background: #080b15; font-size: 13px; }
.gear-loadout-slots span.filled { border-style: solid; border-color: #70f4e866; color: #70f4e8; background: #70f4e811; box-shadow: inset 0 0 10px #70f4e80f; }
.gear-loadout-slots span.gear-slot-art { background-image: url("assets/gear-atlas-11.3.0.webp"); background-repeat: no-repeat; background-size: 400% 400%; background-position: var(--gear-x) var(--gear-y); box-shadow: inset 0 0 0 1px #70f4e84a, 0 4px 9px #0007; }
.gear-loadout > p { grid-column: 1 / -1; margin: 0; color: #8f95a8; font-size: 7px; line-height: 1.35; }
.gear-loadout > p.active-synergy { color: #ffe271; font-weight: 900; letter-spacing: .04em; }
.shop-card.high-rank { border-color: color-mix(in srgb, #70f4e8 calc(var(--rank-glow) * 1%), #ffffff12); box-shadow: inset 0 0 calc(8px + var(--rank-glow) * .25px) #70f4e817; }
.shop-card.legendary { border-color: #d397ff66; background: radial-gradient(circle at 0 0, #d397ff18, transparent 44%), linear-gradient(120deg, #18162c, #111827); box-shadow: inset 0 0 26px #9d66ff0c; }
.shop-card.legendary .shop-item-icon { color: #10091d; background: linear-gradient(145deg, #f1d5ff, #a96cff); box-shadow: 0 0 20px #b678ff35; }
.shop-card.legendary h3 { color: #e7cfff; }
.shop-supplies { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 7px; }
.shop-supplies > div { min-height: 118px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #ffffff16; border-radius: 15px; background: linear-gradient(145deg, #171b2e, #101521); text-align: center; }
.shop-supplies > div > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #0d1420; background: #70f4e8; font-size: 13px; font-weight: 1000; }
.shop-supplies > div > .supply-art { width: 48px; height: 48px; border: 1px solid #ffffff1f; border-radius: 13px; color: transparent; background-color: #080c15; }
.supply-revive-art { background-image: url("assets/gear-atlas-11.3.0.webp"); background-repeat: no-repeat; background-size: 400% 400%; background-position: 100% 100%; box-shadow: inset 0 0 0 1px #ff7b8840, 0 8px 18px #0008; }
.shop-supplies > div > b { min-height: 20px; font-size: 8px; line-height: 1.2; }
.shop-supplies > div > small { min-height: 25px; color: #8f97aa; font-size: 6px; line-height: 1.3; }
.shop-supplies button { width: 100%; min-height: 28px; margin-top: auto; border: 1px solid #70f4e84c; border-radius: 8px; color: #bffef4; background: #70f4e80b; font-size: 6px; font-weight: 1000; }
.shop-supplies button .currency-icon, .crew-slot-buy .currency-icon { width: 17px; height: 17px; vertical-align: -6px; }
.shop-supplies button + button { margin-top: 3px; }
.shop-supplies button:disabled { opacity: .38; }
.shop-supplies .ad-supply > span { background: #ceff42; }
.shop-list { display: grid; gap: 10px; padding-bottom: 20px; }
.rank-banner { padding: 9px 12px; border: 1px solid #40e4ff35; border-radius: 13px; color: #83eef8; background: #40e4ff0a; font-size: 7px; font-weight: 1000; letter-spacing: .08em; text-align: center; }
.lab-banner { padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #ceff4240; border-radius: 16px; background: linear-gradient(120deg, #18251d, #17182b); }
.lab-banner b { color: var(--lime); font-size: 10px; }
.lab-banner span { color: #9aa28f; font-size: 7px; font-weight: 1000; letter-spacing: .08em; }
.shop-card.lab { --gear-accent: #70f4e8; min-height: 126px; grid-template-columns: 70px minmax(0, 1fr) auto; background: linear-gradient(115deg, #171b2c, #102329); }
.shop-card.lab .shop-item-icon { color: #061718; background-color: #08131a; }
.shop-card.lab .shop-atlas-art, .deal-card .shop-atlas-art { border: 1px solid #ffffff1f; background-color: #080c15; }
.shop-card { min-height: 84px; padding: 10px; display: grid; grid-template-columns: 55px minmax(0, 1fr) auto; gap: 9px; align-items: center; border-radius: 18px; background: #15182a; border: 1px solid #ffffff12; content-visibility: auto; contain-intrinsic-size: auto 104px; }
.shop-card.equipped { border-color: var(--lime); box-shadow: inset 0 0 20px #ceff420b; }
.shop-item-icon { width: 53px; height: 53px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #7047ff, #25155b); color: var(--lime); font-size: 23px; }
.shop-atlas-art { overflow: hidden; background-image: url("assets/shop-atlas-11.7.0.webp"); background-repeat: no-repeat; background-size: 500% 400%; background-position: var(--shop-atlas-x) var(--shop-atlas-y); box-shadow: inset 0 0 0 1px #ffffff20, 0 8px 18px #0008; }
.shop-card.lab .shop-item-icon, .deal-card .deal-icon { width: 68px; height: 68px; border-radius: 18px; }
.shop-card.gear { min-height: 104px; grid-template-columns: 74px minmax(0, 1fr) auto; background: radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--gear-accent, #7047ff) 12%, transparent), transparent 34%), #15182a; }
.shop-card.gear .shop-item-icon.gear-art { position: relative; width: 72px; height: 72px; overflow: hidden; border: 1px solid #ffffff22; border-radius: 20px; background-image: url("assets/gear-atlas-11.3.0.webp"); background-repeat: no-repeat; background-size: 400% 400%; background-position: var(--gear-x) var(--gear-y); box-shadow: inset 0 0 18px #ffffff0a, 0 10px 22px #0008; }
.shop-card.gear .shop-item-icon.gear-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #0007; pointer-events: none; }
.shop-card.gear.legendary .shop-item-icon.gear-art { background-image: url("assets/gear-atlas-11.3.0.webp"); background-size: 400% 400%; background-position: var(--gear-x) var(--gear-y); box-shadow: 0 0 23px #b678ff52, inset 0 0 0 1px #f4d9ff70; }
.shop-item-icon.crew-preview { position: relative; overflow: hidden; background: #171a2b; }
.shop-item-icon.crew-preview span { position: relative; z-index: 1; }
.shop-item-icon.crew-preview img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.style-preview { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--preview-main), var(--preview-dark)); border: 2px solid #090b16; }
.style-preview i { position: absolute; width: 46px; height: 18px; top: 15px; left: 2px; border-radius: 9px; background: #080a13; }
.style-preview i::before, .style-preview i::after { content: ""; position: absolute; top: 6px; width: 10px; height: 5px; border-radius: 50%; background: var(--preview-eye); box-shadow: 0 0 8px var(--preview-eye); }
.style-preview i::before { left: 9px; }
.style-preview i::after { right: 9px; }
.style-preview b { position: absolute; width: 28px; height: 15px; left: 11px; bottom: -4px; border-radius: 10px 10px 0 0; background: #151827; }
.shop-card.crew .shop-item-icon { border-radius: 50%; background: linear-gradient(145deg, #40e4ff, #333060); }
.shop-card.crew { --gear-accent: #9d7dff; min-height: 108px; }
.shop-card.crew.support { border-color: #6cebd46b; box-shadow: inset 0 0 20px #55e8c00c; }
.crew-command-card { padding: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 1px solid #8b68ff66; border-radius: 18px; background: radial-gradient(circle at 0 0, #6249a42c, transparent 46%), linear-gradient(120deg, #17152d, #111b29); }
.crew-command-art { width: 58px; height: 58px; grid-row: 1; border: 1px solid #b49dff44; border-radius: 16px; }
.crew-command-art + .crew-command-copy { grid-row: 1; }
.crew-command-card:has(.crew-command-art) { grid-template-columns: 58px minmax(0, 1fr) auto; }
.crew-command-card:has(.crew-command-art) .crew-loadout-slots { grid-column: 1 / -1; }
.crew-command-copy small, .crew-command-copy b { display: block; }
.crew-command-copy small { color: #b49dff; font-size: 7px; font-weight: 1000; letter-spacing: .12em; }
.crew-command-copy b { margin-top: 3px; font-size: 11px; }
.crew-command-copy p { display: none; }
.crew-loadout-slots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.crew-loadout-slot { position: relative; min-height: 61px; padding: 5px; display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 7px; overflow: hidden; border: 1px dashed #ffffff21; border-radius: 14px; color: #777d91; background: #090c16a6; text-align: left; }
.crew-loadout-slot img { width: 43px; height: 43px; object-fit: cover; border-radius: 50%; }
.crew-loadout-slot b, .crew-loadout-slot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-loadout-slot b { color: #f3f0ff; font-size: 8px; }
.crew-loadout-slot small { margin-top: 3px; color: #7ee8d6; font-size: 6px; font-weight: 1000; letter-spacing: .07em; }
.crew-loadout-slot.locked { grid-template-columns: 1fr; place-items: center; text-align: center; }
.crew-slot-buy { min-width: 95px; min-height: 39px; padding: 5px 8px; border-radius: 12px; color: #111423; background: linear-gradient(135deg, #70f4e8, #40d1ff); font-size: 7px; font-weight: 1000; line-height: 1.25; }
.crew-slot-buy:disabled { color: #7d8191; background: #303445; }
.crew-details-button { min-width: 78px; min-height: 29px; border: 1px solid #a48aff50; border-radius: 9px; color: #cabdff; background: #8d67ff0d; font-size: 7px; font-weight: 1000; }
.shop-card-copy { min-width: 0; }
.shop-card h3 { margin: 0 0 3px; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.shop-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.shop-card em { display: block; margin-top: 5px; color: var(--cyan); font-size: 7px; font-style: normal; letter-spacing: .05em; }
.shop-card-badges { min-height: 15px; display: flex; flex-wrap: wrap; gap: 3px; }
.shop-card-badge { width: fit-content; padding: 2px 4px; border: 1px solid #ffffff17; border-radius: 5px; color: #929aaf; background: #080b14a3; font-size: 5px; font-weight: 1000; letter-spacing: .08em; }
.shop-card-badge.legendary { color: #e4c5ff; border-color: #b778ff55; background: #b778ff12; }
.perk-visual { min-width: 0; min-height: 33px; margin-top: 4px; padding: 4px 6px 4px 4px; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 5px; border: 1px solid #ffffff12; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--gear-accent, #7047ff) 12%, #080b15), #080b15); }
.perk-visual > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #0b1117; background: var(--gear-accent, #70f4e8); font-size: 12px; font-weight: 1000; box-shadow: 0 0 10px color-mix(in srgb, var(--gear-accent, #70f4e8) 25%, transparent); }
.perk-visual > div { min-width: 0; }
.perk-visual b { display: block; overflow: hidden; color: #e9edf8; font-size: 6px; letter-spacing: .07em; white-space: nowrap; text-overflow: ellipsis; }
.perk-visual em { height: 4px; margin: 4px 0 0; display: flex; gap: 2px; }
.perk-visual em i { flex: 1 1 0; height: 4px; border-radius: 99px; background: #343a4b; }
.perk-visual em i.filled { background: linear-gradient(90deg, var(--gear-accent, #70f4e8), #ffffff); box-shadow: 0 0 5px color-mix(in srgb, var(--gear-accent, #70f4e8) 45%, transparent); }
.perk-visual > strong { color: var(--gear-accent, #70f4e8); font-size: 7px; letter-spacing: .04em; }
.perk-visual.crew { --gear-accent: #9d7dff; }
.perk-visual.lab { --gear-accent: #70f4e8; }
.perk-visual.upgrade { --gear-accent: #ceff42; }
.shop-effect-value { margin: 5px 0 0 !important; padding: 7px 8px; display: block; border-left: 3px solid var(--gear-accent, #70f4e8); border-radius: 4px 9px 9px 4px; color: #d8deeb !important; background: color-mix(in srgb, var(--gear-accent, #70f4e8) 8%, #090c16); line-height: 1.3 !important; }
.shop-effect-value small { display: block; margin: 0 0 3px; color: var(--gear-accent, #70f4e8); font-size: 5.5px; font-weight: 1000; letter-spacing: .12em; }
.shop-effect-value b { display: block; color: #f2f5ff; font-size: 7.5px; line-height: 1.35; }
.palette-visual { min-height: 33px; margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.palette-visual i { width: 22px; height: 22px; border: 2px solid #080b14; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #ffffff1d; }
.palette-visual i + i { margin-left: -10px; }
.palette-visual b { margin-left: 2px; color: #949bad; font-size: 6px; letter-spacing: .1em; }
.shop-card .shop-impact { width: fit-content; padding: 4px 6px; border: 1px solid #ceff4247; border-radius: 8px; color: var(--lime); background: #ceff4209; font-weight: 900; line-height: 1.25; letter-spacing: .03em; }
.crew-bond { margin-top: 7px; }
.crew-bond > span { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.crew-bond > span b { color: #d8c2ff; font-size: 6px; letter-spacing: .08em; }
.crew-bond > span small { color: #8f94a9; font-size: 6px; font-weight: 900; white-space: nowrap; }
.crew-bond > i { display: block; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 99px; background: #090b14; }
.crew-bond > i u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #825bff, #69efc8); box-shadow: 0 0 8px #69efc855; text-decoration: none; }
.crew-bond > em { margin-top: 4px; color: #777e93; font-size: 6px; line-height: 1.25; letter-spacing: 0; }
.deal-card { min-height: 126px; grid-template-columns: 70px minmax(0, 1fr) auto; background: linear-gradient(115deg, #1b1d37, #101421); }
.deal-card { --gear-accent: #ffd46b; }
.deal-card.featured { border-color: #ffd46b73; background: radial-gradient(circle at 4% 50%, #ffcf6530, transparent 34%), linear-gradient(115deg, #292038, #101421); box-shadow: inset 0 0 28px #ffcb5f0c, 0 10px 24px #0005; }
.deal-card.featured::after { content: attr(data-badge); position: absolute; top: 7px; right: 8px; padding: 3px 5px; border-radius: 5px; color: #2a1906; background: #ffd46b; font-size: 5px; font-weight: 1000; letter-spacing: .09em; }
.deal-card { position: relative; }
.deal-card .deal-icon { color: #ffd46b; background-color: #090c17; box-shadow: inset 0 0 18px #ffcc6022, 0 8px 18px #0008; }
.deal-card small { display: block; margin-bottom: 3px; color: #ffc96b; font-size: 6px; font-weight: 1000; letter-spacing: .11em; }
.deal-rewards { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.deal-rewards span { padding: 4px 6px; border: 1px solid #ffd46b3b; border-radius: 7px; color: #ffd46b; background: #ffd46b0c; font-size: 7px; font-weight: 1000; }
.deal-rewards span, .shop-buy, .shop-upgrade, .buy-button, .operation-claim, .case-reward b, .achievement-copy small { align-items: center; }
.deal-rewards .currency-icon, .shop-buy .currency-icon, .shop-upgrade .currency-icon, .buy-button .currency-icon, .operation-claim .currency-icon, .case-reward .currency-icon, .achievement-copy .currency-icon { width: 16px; height: 16px; vertical-align: -5px; }
.deal-impact { min-height: 27px; margin-top: 6px; padding: 4px 6px; display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; gap: 5px; border: 1px solid #70f4e82b; border-radius: 9px; background: linear-gradient(90deg, #70f4e812, #080b1600); }
.deal-impact i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; color: #071310; background: #70f4e8; font-size: 10px; font-style: normal; }
.deal-impact b { overflow: hidden; color: #c6fff7; font-size: 6px; line-height: 1.2; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.deal-section-heading { padding: 5px 3px 0; color: #9fa7bd; font-size: 8px; font-weight: 1000; letter-spacing: .14em; }
.deal-trust-banner { padding: 12px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; border: 1px solid #70f4e84a; border-radius: 16px; background: radial-gradient(circle at 0 50%, #70f4e829, transparent 43%), #121b27; }
.deal-trust-banner > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #061612; background: linear-gradient(135deg, #70f4e8, #ceff42); font-size: 17px; font-weight: 1000; }
.deal-trust-banner b, .deal-trust-banner small { display: block; }
.deal-trust-banner b { font-size: 8px; }
.deal-trust-banner small { margin-top: 3px; color: #76decf; font-size: 6px; font-weight: 1000; letter-spacing: .1em; }
.deal-trust-banner em { color: #8cefe2; font-size: 6px; font-style: normal; font-weight: 1000; white-space: nowrap; }
.crew-value-banner { padding: 13px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border: 1px solid #d6a7ff55; border-radius: 17px; background: radial-gradient(circle at 0 50%, #a96bff2b, transparent 43%), #17172b; }
.crew-value-banner > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #1c1329; background: linear-gradient(135deg, #e0b5ff, #70f4e8); font-size: 18px; font-weight: 1000; }
.crew-value-banner b, .crew-value-banner small { display: block; }
.crew-value-banner b { font-size: 9px; }
.crew-value-banner small { margin-top: 3px; color: #9ea4b7; font-size: 7px; line-height: 1.3; }
.crew-value-banner em { color: #8cefe2; font-size: 7px; font-style: normal; font-weight: 1000; white-space: nowrap; }
.billing-footer { padding: 6px 3px 16px; text-align: center; }
.restore-purchases { min-height: 39px; padding: 0 17px; border: 1px solid #ffffff22; border-radius: 12px; color: #c7cad8; background: #ffffff0a; font-size: 8px; font-weight: 1000; letter-spacing: .08em; }
.restore-purchases:disabled { opacity: .45; }
.billing-status { min-height: 28px; margin: 8px auto 0; max-width: 310px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.shop-actions { min-width: 78px; display: grid; gap: 5px; }
.shop-buy { min-width: 70px; min-height: 39px; padding: 0 8px; border-radius: 12px; background: var(--lime); color: #151807; font-size: 9px; font-weight: 1000; }
.shop-buy:disabled { background: #313445; color: #777a88; }
.shop-upgrade { min-width: 78px; min-height: 31px; padding: 4px 6px; border: 1px solid #40e4ff66; border-radius: 10px; color: var(--cyan); background: #40e4ff0d; font-size: 7px; font-weight: 1000; line-height: 1.15; }
.shop-upgrade:disabled { border-color: #ffffff12; color: #6e7180; background: #252838; }
.infinite-rank { margin-top: 7px; color: #6fe9df; font-size: 7px; font-weight: 1000; letter-spacing: .08em; }
.buy-button { display: grid; place-items: center; align-content: center; line-height: 1.05; }
.buy-button small { display: block; margin-top: 3px; font-size: 7px; }

.network-dot { width: 12px; height: 12px; border-radius: 50%; background: #55586b; box-shadow: 0 0 0 5px #55586b22; }
.network-dot.live { background: var(--lime); box-shadow: 0 0 0 5px #ceff4222, 0 0 12px var(--lime); }
.network-profile { margin-top: 14px; padding: 14px 15px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; background: linear-gradient(120deg, #241b4b, #172334); border: 1px solid #7047ff55; }
.network-profile > div:last-child { text-align: right; }
.network-profile small { display: block; color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.network-profile b { color: var(--lime); font-size: 14px; }
.defense-card { margin: 9px 0; padding: 11px; display: grid; grid-template-columns: 1fr auto; gap: 8px; border-radius: 16px; border: 1px solid #40e4ff33; background: #121a29; }
.legacy-rival-defense[hidden] { display: none; }
.defense-card small, .defense-card b, .defense-card em { display: block; }
.defense-card small { color: #7f879c; font-size: 7px; }
.defense-card b { margin-top: 2px; color: #77e7ff; font-size: 11px; }
.defense-card em { color: #aab0c3; font-size: 7px; font-style: normal; }
.defense-card > button { border: 1px solid #ffe27144; border-radius: 10px; color: #ffe271; background: #ffe2710c; font-size: 7px; font-weight: 900; }
.defense-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.defense-options button { min-height: 26px; border: 1px solid #ffffff15; border-radius: 8px; color: #8990a4; background: #090d18; font-size: 6px; font-weight: 900; }
.defense-options button.active { border-color: #77e7ff88; color: #77e7ff; background: #77e7ff12; }
.network-status { margin: 10px 2px 15px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; }
.network-status button { padding: 7px 9px; border-radius: 9px; background: #ffffff0c; color: #c9cad4; font-size: 8px; }
.rival-send-card { margin: 10px 0 12px; padding: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid #65e9d055; border-radius: 17px; background: radial-gradient(circle at 100% 0, #65e9d022, transparent 52%), linear-gradient(135deg, #102727, #111522); }
.rival-send-card small, .rival-send-card b, .rival-send-card span { display: block; }
.rival-send-card small { color: #65e9d0; font-size: 7px; font-weight: 1000; letter-spacing: .11em; }
.rival-send-card b { margin-top: 2px; color: #f4fff9; font-size: 13px; }
.rival-send-card span { margin-top: 3px; max-width: 190px; color: #9fa8b9; font-size: 8px; line-height: 1.35; }
.rival-send-card button { min-height: 43px; padding: 0 12px; border-radius: 12px; color: #07130f; background: #65e9d0; box-shadow: 0 8px 20px #65e9d025; font-size: 8px; font-weight: 1000; }
.rival-ad-refill { min-width: 74px; min-height: 43px; padding: 5px 8px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 5px; border: 1px solid #ffd45d66; border-radius: 12px; color: #fff1ad; background: linear-gradient(145deg, #4a3510, #17141c); box-shadow: 0 0 18px #ffd45d22; text-align: left; }
.rival-ad-refill[hidden] { display: none; }
.rival-ad-refill > span { grid-row: 1 / 3; font-size: 14px; }
.rival-ad-refill b, .rival-ad-refill small { display: block; white-space: nowrap; }
.rival-ad-refill b { font-size: 7px; }.rival-ad-refill small { color: #c8ad69; font-size: 5px; }
.rival-direct-head { margin: 9px 2px 6px; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.rival-direct-head small, .rival-direct-head b { display: block; }
.rival-direct-head small { color: #65e9d0; font-size: 6px; font-weight: 1000; letter-spacing: .11em; }
.rival-direct-head b { margin-top: 2px; color: #edfefe; font-size: 9px; }
.rival-direct-head > span { padding: 4px 7px; border: 1px solid #65e9d03d; border-radius: 8px; color: #73e9d7; background: #65e9d00c; font-size: 6px; font-weight: 1000; white-space: nowrap; }
.rival-direct-head > span.empty { color: #ff8298; border-color: #ff5f7848; background: #ff5f780b; }
.rival-recipient-list { min-height: 58px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rival-recipient-card { min-width: 0; min-height: 58px; padding: 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; border: 1px solid #ffffff18; border-radius: 13px; color: #83929f; background: #0a121d; text-align: left; }
.rival-recipient-card > span { width: 34px; height: 39px; display: grid; place-items: center; border: 1px solid #61f3ff4d; border-radius: 12px 12px 12px 4px; color: #07151b; background: linear-gradient(145deg, #bdfcff, #4ddfe8); font-size: 13px; font-weight: 1000; }
.rival-recipient-card b, .rival-recipient-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rival-recipient-card b { color: #e7faff; font-size: 7px; }.rival-recipient-card small { margin-top: 3px; font-size: 5px; }
.rival-recipient-card.selected { border-color: #ceff42a3; background: linear-gradient(145deg, #1d2b1b, #0b1720); box-shadow: 0 0 20px #ceff4220; }
.rival-recipient-card.selected > span { border-color: #ceff42; background: linear-gradient(145deg, #eeffad, #90e65b); }
.rival-recipient-empty { grid-column: 1 / -1; min-height: 52px; display: grid; place-items: center; border: 1px dashed #ffffff1b; border-radius: 13px; color: #77838f; font-size: 7px; }
.rival-effects { margin: 8px 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rival-effects > span { padding: 8px 10px; border: 1px solid #55e6ff35; border-radius: 12px; background: linear-gradient(135deg, #0a1b28, #111827); }
.rival-effects small, .rival-effects b { display: block; }
.rival-effects small { color: #77dff1; font-size: 6px; font-weight: 1000; letter-spacing: .1em; }
.rival-effects b { margin-top: 3px; color: #f3fbff; font-size: 9px; }
.raid-rules { margin: -4px 0 13px; padding: 11px; display: grid; gap: 6px; border: 1px solid #ff6d8350; border-radius: 12px; background: linear-gradient(135deg, #ff5f780d, #55e6ff08); font-size: 7px; line-height: 1.35; }
.raid-rules b { color: #ff8fa0; font-size: 8px; letter-spacing: .08em; }
.raid-rules span { color: #b9bece; }
.raid-rules strong { color: #75ebd6; font-size: 7px; }
.leaderboard-head { display: flex; justify-content: space-between; margin: 0 4px 8px; font-size: 8px; color: var(--muted); letter-spacing: .1em; }
.leaderboard-list { display: grid; gap: 8px; }
.raid-log-head { margin-top: 15px; }
.raid-history-list { display: grid; gap: 6px; }
.raid-history-row { padding: 9px; display: grid; grid-template-columns: 1fr auto; gap: 6px; border-radius: 12px; background: #111522; border: 1px solid #ffffff0e; }
.raid-history-row b, .raid-history-row small { display: block; }
.raid-history-row b { font-size: 8px; }
.raid-history-row small { color: #8990a4; font-size: 7px; }
.raid-history-row button { padding: 6px 8px; border: 1px solid #ff6d8355; border-radius: 8px; color: #ff8b9c; background: #ff5f780d; font-size: 6px; font-weight: 900; }
.raid-plan-card { max-width: 330px; }
.raid-plan-card > p { margin: 7px 0 14px; color: #b8bece; font-size: 10px; }
.raid-tactics { margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.raid-tactics button { min-height: 72px; padding: 7px 4px; display: grid; place-items: center; gap: 2px; border: 1px solid #ffffff17; border-radius: 13px; color: #b5bbcc; background: #090c18; }
.raid-tactics button:active { transform: scale(.97); }
.raid-tactics button.selected { color: #091411; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 20px #ceff4238; }
.raid-tactics span, .raid-tactics b, .raid-tactics small { display: block; }
.raid-tactics span { font-size: 19px; }
.raid-tactics b { font-size: 9px; }
.raid-tactics small { color: inherit; font-size: 6px; font-weight: 1000; letter-spacing: .08em; opacity: .72; }
.raid-plan-track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: #8f96aa; font-size: 7px; font-weight: 1000; }
.raid-plan-track i { height: 7px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #6ff0d6 0 58%, #ff6d83 62% 100%); box-shadow: 0 0 15px #ff6d8330; }
.raid-plan-rules { margin: 10px 0 15px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.raid-plan-rules span { padding: 5px 7px; border-radius: 7px; color: #9fa7bb; background: #ffffff08; font-size: 6px; font-weight: 900; }
.raid-plan-card .primary-button { min-height: 50px; }

/* Rival Exchange */
.rivals-screen { --rival-cyan: #61f3ff; --rival-blue: #1769ff; --rival-gold: #ffd45d; --rival-ink: #061019; background: radial-gradient(circle at 48% 0, #0b3448 0, #07131e 32%, #080a14 72%); }
.rivals-screen::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(#61f3ff12 1px, transparent 1px), linear-gradient(90deg, #61f3ff12 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(#000, transparent 72%); }
.rivals-screen > * { position: relative; z-index: 1; }
.rival-vault-card { margin-top: 13px; padding: 11px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #61f3ff42; border-radius: 19px; background: linear-gradient(130deg, #0b2230e8, #101429e8); box-shadow: inset 0 1px #ffffff0d, 0 14px 36px #0006; }
.rival-vault-agent { min-width: 0; display: flex; align-items: center; gap: 9px; }
.rival-vault-agent > span, .rival-match-avatar { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border: 1px solid #61f3ff8c; border-radius: 13px 13px 13px 4px; color: #061119; background: linear-gradient(145deg, #b8fbff, #39dce9); box-shadow: 0 0 18px #61f3ff28; font-size: 15px; font-weight: 1000; }
.rival-vault-agent small, .rival-vault-agent b, .rival-vault-balance small, .rival-vault-balance b { display: block; }
.rival-vault-agent small, .rival-vault-balance small { color: #829aaa; font-size: 6px; font-weight: 1000; letter-spacing: .13em; }
.rival-vault-agent b { max-width: 145px; overflow: hidden; color: #effeff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rival-vault-balance { text-align: right; }
.rival-vault-balance b { color: var(--rival-gold); font-size: 18px; text-shadow: 0 0 15px #ffd45d3d; }
.rival-open-pot { grid-column: 1 / -1; min-height: 35px; padding: 6px 7px 6px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #ffd45d38; border-radius: 11px; background: #ffd45d0b; }
.rival-open-pot[hidden] { display: none; }
.rival-open-pot > i { width: 7px; height: 7px; border-radius: 50%; background: var(--rival-gold); box-shadow: 0 0 12px var(--rival-gold); animation: rival-pot-pulse 1.4s ease-in-out infinite; }
.rival-open-pot > span { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.rival-open-pot small { color: #a99d7c; font-size: 6px; letter-spacing: .12em; }
.rival-open-pot b { color: #ffe490; font-size: 10px; }
.rival-open-pot button { width: 26px; height: 26px; border: 1px solid #ffffff1c; border-radius: 8px; color: #9daab2; background: #0003; font-size: 15px; }
@keyframes rival-pot-pulse { 50% { opacity: .42; transform: scale(.7); } }
.rivals-screen .network-status { margin: 7px 3px 8px; min-height: 27px; }
.rivals-screen .network-status span { color: #6f8a99; font-size: 6px; font-weight: 950; letter-spacing: .1em; }
.rivals-screen .network-status button { width: 28px; height: 27px; padding: 0; border: 1px solid #61f3ff24; color: #8feff5; background: #61f3ff08; font-size: 14px; }
.rival-exchange-hero { min-height: 112px; padding: 12px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow: hidden; border: 1px solid #61f3ff52; border-radius: 21px; background: radial-gradient(circle at 10% 40%, #24deff2e, transparent 31%), radial-gradient(circle at 90% 0, #1769ff30, transparent 45%), linear-gradient(135deg, #0a2635, #0b1020); box-shadow: 0 18px 42px #0008, inset 0 1px #ffffff12; }
.rival-exchange-hero::after { content: ""; position: absolute; inset: auto -20px -34px 30%; height: 70px; transform: skewX(-20deg); opacity: .33; background: repeating-linear-gradient(90deg, transparent 0 12px, #61f3ff1d 13px 14px); }
.rival-pot-visual { position: relative; width: 52px; height: 65px; display: grid; place-items: center; }
.rival-pot-visual span { position: relative; z-index: 3; width: 43px; height: 43px; display: grid; place-items: center; border: 2px solid #ffe791; border-radius: 50%; color: #5c3f00; background: radial-gradient(circle at 36% 27%, #fff2a6, #ffd45d 48%, #a56b00 100%); box-shadow: 0 0 28px #ffd45d6b, inset 0 0 0 5px #f0a91c; font-size: 19px; font-weight: 1000; }
.rival-pot-visual i { position: absolute; width: 36px; height: 36px; border: 1px solid #ffd45d99; border-radius: 50%; background: #bf7e16; }
.rival-pot-visual i:nth-child(2) { transform: translate(-5px, 12px); }.rival-pot-visual i:nth-child(3) { transform: translate(6px, 15px); }.rival-pot-visual i:nth-child(4) { transform: translate(0, 21px); }
.rival-stake-control { position: relative; z-index: 2; min-width: 0; }
.rival-stake-control > small { display: block; color: #92aab6; font-size: 6px; font-weight: 1000; letter-spacing: .13em; }
.rival-stake-choices { margin: 5px 0 4px; display: grid; grid-template-columns: repeat(4, minmax(28px, 1fr)); gap: 4px; }
.rival-stake-choices button { min-width: 0; height: 31px; border: 1px solid #61f3ff22; border-radius: 9px; color: #8ba7b5; background: #020b1287; font-size: 9px; font-weight: 1000; }
.rival-stake-choices button.selected { color: #071015; border-color: #ffe17a; background: var(--rival-gold); box-shadow: 0 0 17px #ffd45d4a; }
.rival-stake-choices button:disabled { opacity: .28; }
.rival-stake-control > b { color: #fff2b6; font-size: 7px; letter-spacing: .05em; }
.rival-post-button { position: relative; z-index: 2; min-width: 66px; min-height: 65px; padding: 7px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid #80f7ff; border-radius: 14px; color: #07151d; background: linear-gradient(150deg, #bdfdff, #4fe2ec); box-shadow: 0 8px 22px #31dce43d; }
.rival-post-button span { font-size: 18px; line-height: 1; }.rival-post-button b { font-size: 7px; line-height: 1.15; }.rival-post-button:disabled { opacity: .4; filter: grayscale(.6); }
.rival-icon-rules { margin: 9px 0 14px; padding: 7px 9px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 13px; background: #050e17ba; }
.rival-icon-rules span { display: flex; align-items: center; gap: 4px; }.rival-icon-rules i { color: var(--rival-cyan); font-size: 11px; font-style: normal; }.rival-icon-rules b { color: #93a8b4; font-size: 6px; letter-spacing: .08em; }.rival-icon-rules em { color: #365464; font-size: 13px; font-style: normal; }
.rival-armory-head { margin: 0 2px 7px; display: flex; align-items: center; justify-content: space-between; color: #8fa7b2; font-size: 6px; letter-spacing: .11em; }
.rival-armory-head b { color: #e9fcff; font-size: 8px; }
.rival-armory-head span { padding: 4px 6px; border: 1px solid #61f3ff2b; border-radius: 99px; color: #75dfe8; background: #61f3ff0a; }
.rival-armory-list { margin: 0 -13px 14px; padding: 0 13px 5px; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.rival-armory-list::-webkit-scrollbar { display: none; }
.rival-armory-card { --armory-accent: #61f3ff; position: relative; min-width: 136px; min-height: 116px; padding: 10px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--armory-accent) 42%, transparent); border-radius: 16px; background: radial-gradient(circle at 13% 8%, color-mix(in srgb, var(--armory-accent) 18%, transparent), transparent 48%), linear-gradient(145deg, #0b1b27, #0b0f1b); box-shadow: inset 0 1px #ffffff0d; scroll-snap-align: start; }
.rival-armory-card::after { content: ""; position: absolute; right: -20px; bottom: -22px; width: 62px; height: 62px; border: 8px solid color-mix(in srgb, var(--armory-accent) 7%, transparent); border-radius: 50%; }
.rival-armory-card[data-tone="gold"] { --armory-accent: #ffd45d; }.rival-armory-card[data-tone="lime"] { --armory-accent: #cfff4d; }.rival-armory-card[data-tone="pink"] { --armory-accent: #ff79b0; }.rival-armory-card[data-tone="violet"] { --armory-accent: #b58cff; }
.rival-armory-icon { grid-row: 1 / 4; width: 35px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--armory-accent) 58%, transparent); border-radius: 12px 12px 12px 4px; color: #071117; background: var(--armory-accent); box-shadow: 0 0 17px color-mix(in srgb, var(--armory-accent) 29%, transparent); font-size: 17px; font-style: normal; font-weight: 1000; }
.rival-armory-card small, .rival-armory-card b, .rival-armory-card span { position: relative; z-index: 1; display: block; }
.rival-armory-card small { color: #728d9a; font-size: 5px; font-weight: 1000; letter-spacing: .1em; }
.rival-armory-card b { margin-top: 1px; color: #effcff; font-size: 9px; line-height: 1.05; }
.rival-armory-card > span { align-self: start; margin-top: 5px; color: var(--armory-accent); font-size: 6px; font-weight: 1000; letter-spacing: .04em; }
.rival-armory-card button { position: relative; z-index: 1; grid-column: 1 / -1; min-height: 29px; margin-top: 7px; border: 1px solid color-mix(in srgb, var(--armory-accent) 58%, transparent); border-radius: 9px; color: #071116; background: var(--armory-accent); font-size: 7px; font-weight: 1000; }
.rival-armory-card button:disabled { color: #74858d; border-color: #ffffff13; background: #1a2730; }
.rival-armory-card.owned { border-color: color-mix(in srgb, var(--armory-accent) 65%, transparent); }
.rival-armory-card.owned button { color: var(--armory-accent); border-color: color-mix(in srgb, var(--armory-accent) 28%, transparent); background: color-mix(in srgb, var(--armory-accent) 8%, #071019); }
.rivals-screen .leaderboard-head { margin-top: 2px; color: #718894; font-size: 7px; }.rivals-screen .leaderboard-head b { color: #c8faff; }
.rival-match-list { gap: 9px; }
.rival-match-card { --match-accent: #61f3ff; min-height: 88px; padding: 10px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--match-accent) 35%, transparent); border-radius: 17px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--match-accent) 13%, transparent), transparent 54%), linear-gradient(130deg, #0c1825, #101321); box-shadow: inset 0 1px #ffffff0a; }
.rival-match-card.hot { --match-accent: #ff8a67; }.rival-match-card.high { --match-accent: #ffd45d; }
.rival-match-card .rival-match-avatar { width: 40px; height: 44px; border-color: var(--match-accent); color: #071018; background: var(--match-accent); box-shadow: 0 0 17px color-mix(in srgb, var(--match-accent) 28%, transparent); }
.rival-match-info { min-width: 0; }.rival-match-info > small { color: var(--match-accent); font-size: 6px; font-weight: 1000; letter-spacing: .1em; }.rival-match-info > b { display: block; max-width: 130px; overflow: hidden; color: #f1fbff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rival-match-stats { margin-top: 6px; display: flex; gap: 4px; }.rival-match-stats span { padding: 4px 5px; border-radius: 6px; color: #9fb0ba; background: #ffffff08; font-size: 6px; font-weight: 900; white-space: nowrap; }
.rival-match-action { min-width: 68px; text-align: center; }.rival-match-action small { display: block; color: #869aa5; font-size: 6px; }.rival-match-action b { display: block; margin: 1px 0 5px; color: var(--rival-gold); font-size: 13px; text-shadow: 0 0 10px #ffd45d35; }.rival-match-action button { min-width: 66px; min-height: 30px; padding: 0 8px; border-radius: 9px; color: #071119; background: var(--match-accent); font-size: 7px; font-weight: 1000; }.rival-match-action button:disabled { color: #6f7c84; background: #202b33; }
.rival-empty-exchange { padding: 20px 12px; display: grid; place-items: center; gap: 7px; border: 1px dashed #61f3ff38; border-radius: 17px; color: #77929f; background: #06131d8f; text-align: center; }.rival-empty-exchange span { font-size: 27px; }.rival-empty-exchange b { color: #d7fbff; font-size: 10px; }.rival-empty-exchange small { max-width: 190px; font-size: 7px; line-height: 1.4; }
.rivals-screen .raid-history-row { border-color: #61f3ff16; background: #09131d; }.rivals-screen .raid-history-row b { color: #d8faff; }.rivals-screen .raid-history-row small { color: #758b96; }
.raid-plan-card { max-width: 325px; padding: 18px; overflow: hidden; border-color: #61f3ff61; background: radial-gradient(circle at 50% 0, #1769ff31, transparent 40%), linear-gradient(155deg, #0b2634, #090d18 68%); box-shadow: 0 25px 80px #000d, 0 0 40px #61f3ff20; }
.raid-plan-card .challenge-kicker { color: #89f7ff; }
.rival-versus { margin: 14px auto 9px; display: grid; grid-template-columns: 1fr 43px 1fr; align-items: center; gap: 5px; }
.rival-versus > div { min-width: 0; display: grid; place-items: center; gap: 5px; }.rival-versus > div > span { width: 54px; height: 58px; display: grid; place-items: center; border: 2px solid #61f3ff; border-radius: 18px 18px 18px 6px; color: #06131a; background: linear-gradient(150deg, #cbfdff, #48e3ed); box-shadow: 0 0 23px #61f3ff42; font-size: 22px; font-weight: 1000; }.rival-versus > div:last-child > span { border-color: #ff7295; color: #fff; background: linear-gradient(150deg, #ff82a3, #792955); box-shadow: 0 0 23px #ff729542; }.rival-versus b { max-width: 100px; overflow: hidden; color: #effcff; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.rival-versus > em { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: #ffe998; background: #ffd45d17; font-size: 14px; font-style: italic; font-weight: 1000; }
.rival-pot-lock { margin: 3px 0 10px; padding: 10px; display: grid; place-items: center; border: 1px solid #ffd45d4d; border-radius: 15px; background: radial-gradient(circle, #ffd45d1c, transparent 68%); }.rival-pot-lock small { color: #a89769; font-size: 6px; letter-spacing: .14em; }.rival-pot-lock > b { color: #ffe16f; font-size: 28px; line-height: 1.1; text-shadow: 0 0 24px #ffd45d68; }.rival-pot-lock > span { color: #637982; font-size: 7px; }.rival-pot-lock i { color: #c9b571; font-style: normal; }.rival-pot-lock em { font-style: normal; }
.raid-plan-card.practice .rival-pot-lock > span { display: none; }
.rival-match-metrics { margin-bottom: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }.rival-match-metrics span { padding: 6px 2px; border-radius: 7px; color: #9fb5c0; background: #ffffff08; font-size: 6px; font-weight: 1000; text-align: center; }
.raid-plan-card .raid-plan-track { color: #7c939e; }.raid-plan-card .raid-plan-track i { height: 5px; background: linear-gradient(90deg, #61f3ff 0 47%, #132a38 48% 92%, #ffd45d 93%); }
.raid-plan-card .primary-button { margin-top: 13px; color: #061217; background: linear-gradient(150deg, #bdfdff, #48e3ed); box-shadow: 0 10px 28px #45e4ed38; }.raid-plan-card .primary-button:disabled { opacity: .42; }
.rival-wager-note { margin: 7px 0 0 !important; color: #627781 !important; font-size: 6px !important; text-align: center; }

@media (max-width: 360px) {
  .rival-exchange-hero { grid-template-columns: 46px minmax(0, 1fr) 60px; gap: 7px; padding: 10px 8px; }
  .rival-pot-visual { transform: scale(.84); transform-origin: center; }
  .rival-stake-choices { gap: 3px; }.rival-stake-choices button { height: 29px; font-size: 8px; }
  .rival-post-button { min-width: 58px; min-height: 61px; padding: 5px; }
  .rival-match-card { grid-template-columns: 36px minmax(0, 1fr) 62px; gap: 7px; padding: 8px; }
  .rival-match-card .rival-match-avatar { width: 36px; height: 41px; }.rival-match-info > b { max-width: 105px; }.rival-match-stats span:nth-child(3) { display: none; }
}
/* Legendary Heists: boss-heist concept */
.wanted-screen { background: radial-gradient(circle at 50% 7%, #4b2614 0, #111422 36%, #080b14 78%); }
.legendary-case-card { position: relative; height: 218px; margin-top: 12px; overflow: hidden; border: 1px solid #e5b94d70; border-radius: 24px; background: #090807; box-shadow: 0 18px 42px #000b, inset 0 0 0 1px #fff08; }
.legendary-case-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; filter: saturate(1.06) contrast(1.04); }
.legendary-case-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #05050712 20%, transparent 62%), linear-gradient(0deg, #050509fa 0, #0505099c 32%, transparent 65%); }
.legendary-case-number { position: absolute; top: 12px; left: 12px; padding: 6px 8px; border: 1px solid #e8bd5970; border-radius: 9px; color: #f3cd72; background: #090707cf; font-size: 7px; font-weight: 1000; letter-spacing: .13em; }
.legendary-case-number i { font-style: normal; }
.legendary-case-copy { position: absolute; left: 15px; right: 84px; bottom: 14px; }
.legendary-case-copy small, .legendary-case-copy b, .legendary-case-copy em { display: block; }
.legendary-case-copy small { color: #e5b84f; font-size: 7px; letter-spacing: .14em; }
.legendary-case-copy b { margin-top: 2px; color: white; font-size: 24px; font-style: italic; }
.legendary-case-copy em { margin-top: 2px; color: #d8bcc1; font-size: 8px; font-style: normal; letter-spacing: .08em; }
.legendary-case-value { position: absolute; right: 12px; bottom: 13px; min-width: 66px; padding: 8px 7px; border: 1px solid #f0c45d75; border-radius: 13px; background: #1a1109d9; text-align: center; box-shadow: inset 0 0 18px #e9b94a13; }
.legendary-case-value small, .legendary-case-value b { display: block; }
.legendary-case-value small { color: #a78c56; font-size: 5px; letter-spacing: .13em; }
.legendary-case-value b { margin-top: 2px; color: #ffe49a; font-size: 13px; }

.legendary-route, .heist-phase-track { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: center; gap: 5px; }
.legendary-route { margin: 11px 0 9px; }
.legendary-route > span, .heist-phase-track > span { display: grid; place-items: center; gap: 4px; }
.legendary-route > span { min-height: 62px; border: 1px solid #e5bb4d2e; border-radius: 15px; background: linear-gradient(145deg, #211810, #11131b); }
.legendary-route > em, .heist-phase-track > em { height: 1px; background: linear-gradient(90deg, #765e2d, #e5b94e, #765e2d); }
.legendary-route b, .heist-phase-track b { color: #e7d5aa; font-size: 6px; letter-spacing: .1em; }
.legendary-route i, .heist-phase-track i { position: relative; width: 31px; height: 31px; display: block; border: 1px solid #e6b74874; border-radius: 10px; background: #291b0d; box-shadow: inset 0 0 12px #f6c55e13; }
.legendary-route-vault::before { content: ""; position: absolute; inset: 6px; border: 2px solid #e8bd55; border-radius: 50%; box-shadow: inset 0 0 0 4px #291b0d, inset 0 0 0 6px #e8bd55; }
.legendary-route-vault::after { content: ""; position: absolute; left: 14px; top: 5px; width: 2px; height: 21px; background: #e8bd55; box-shadow: -7px 7px 0 -1px #e8bd55, 7px 7px 0 -1px #e8bd55; transform: rotate(35deg); }
.legendary-route-gem::before { content: ""; position: absolute; inset: 7px 6px 6px; background: linear-gradient(135deg, #ff6e7d, #951633 48%, #ffbec4); clip-path: polygon(20% 0, 80% 0, 100% 35%, 50% 100%, 0 35%); filter: drop-shadow(0 0 5px #ff315f); }
.legendary-route-exit::before { content: ""; position: absolute; inset: 7px 8px 5px; border: 2px solid #e8bd55; border-bottom: 0; border-radius: 3px 3px 0 0; }
.legendary-route-exit::after { content: "↑"; position: absolute; inset: 0; display: grid; place-items: center; color: #e8bd55; font-size: 15px; font-weight: 1000; }
.wanted-bounty-strip { margin: 0 0 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wanted-bounty-strip div { padding: 8px 4px; border: 1px solid #d8ac4730; border-radius: 11px; background: #e8bd5609; text-align: center; }
.wanted-bounty-strip small, .wanted-bounty-strip b { display: block; }
.wanted-bounty-strip small { color: #817760; font-size: 5px; letter-spacing: .08em; }
.wanted-bounty-strip b { margin-top: 3px; color: #f3ca6d; font-size: 9px; }
.legendary-roster { display: grid; gap: 6px; margin-bottom: 10px; }
.legendary-roster article { min-height: 50px; padding: 5px 9px 5px 6px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 9px; border: 1px solid #ffffff0c; border-radius: 14px; background: #111520; }
.legendary-roster article.active { border-color: #e5b64c54; background: linear-gradient(100deg, #2c1b0e, #111520); }
.legendary-roster img, .legendary-roster article > i { width: 42px; height: 42px; object-fit: cover; border-radius: 11px; background: #090b11; }
.legendary-roster span small, .legendary-roster span b { display: block; }
.legendary-roster span small { color: #b8954c; font-size: 5px; letter-spacing: .13em; }
.legendary-roster span b { margin-top: 3px; font-size: 9px; }
.legendary-roster .locked { opacity: .48; }
.roster-relic::before, .roster-orbit::before { content: ""; position: absolute; }
.legendary-roster article > i { position: relative; display: grid; place-items: center; }
.roster-relic::before { width: 16px; height: 23px; border: 2px solid #c2c5d1; border-radius: 9px 9px 5px 5px; box-shadow: inset 0 -7px #4b4e5f; }
.roster-orbit::before { width: 22px; height: 22px; border: 2px solid #9ba2b5; border-radius: 50%; box-shadow: inset 0 0 0 6px #252936; }
.roster-orbit::after { content: ""; width: 28px; height: 8px; border: 1px solid #9ba2b5; border-radius: 50%; transform: rotate(-25deg); }

/* Full-screen Legendary Heist */
.manhunt-screen { z-index: 8; flex-direction: column; gap: 8px; padding: max(9px, env(safe-area-inset-top)) 9px max(9px, env(safe-area-inset-bottom)); overflow: hidden; background: radial-gradient(circle at 50% -12%, #5b3219, #11101a 35%, #03050a 80%); }
.manhunt-header { z-index: 3; flex: 0 0 43px; display: grid; grid-template-columns: 42px 1fr 60px; align-items: center; gap: 8px; }
.manhunt-header > div { text-align: center; }
.manhunt-header > div small, .manhunt-header > div b { display: block; }
.manhunt-header > div small { color: #e7bc58; font-size: 6px; font-weight: 1000; letter-spacing: .18em; }
.manhunt-header > div b { margin-top: 1px; font-size: 13px; font-style: italic; letter-spacing: .06em; }
.manhunt-clock { width: 60px; height: 40px; display: grid; place-content: center; border: 1px solid #e2b64e58; border-radius: 13px; color: #ffe5a5; background: #211507db; text-align: center; box-shadow: inset 0 0 18px #efc05812; }
.manhunt-clock small, .manhunt-clock b { display: block; }
.manhunt-clock small { font-size: 5px; letter-spacing: .12em; }
.manhunt-clock b { font-variant-numeric: tabular-nums; font-size: 13px; line-height: 14px; }
.heist-phase-track { z-index: 3; flex: 0 0 45px; padding: 4px 10px; border: 1px solid #e4b64d24; border-radius: 15px; background: #0b0c12dc; }
.heist-phase-track > span { opacity: .35; transition: .25s; }
.heist-phase-track i { width: 25px; height: 25px; border-radius: 8px; transform: scale(.78); }
.heist-phase-track span.active, .heist-phase-track span.done { opacity: 1; }
.heist-phase-track span.active i { border-color: #ffd875; background: #38250e; box-shadow: 0 0 14px #e9b84d58; }
.heist-phase-track span.done i { border-color: #caff45; filter: hue-rotate(42deg); }
.heist-phase-track span.done b { color: #caff45; }

.legendary-stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 430px; overflow: hidden; border: 1px solid #ddad4450; border-radius: 24px; background: #070707 url("assets/legendary-vault-12.2.0.webp") center 42% / cover no-repeat; box-shadow: 0 20px 45px #000c, inset 0 0 0 1px #fff06; isolation: isolate; }
.legendary-stage-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(0deg, #05060ced, #05060c35 58%, #05060c8f), radial-gradient(circle at 50% 45%, transparent 20%, #03040a80 78%); transition: .35s; }
.legendary-stage[data-phase="steal"] .legendary-stage-shade { background: radial-gradient(circle at 50% 38%, #a10d2438, #04050ab0 62%), linear-gradient(0deg, #04050ae8, transparent 70%); }
.legendary-stage[data-phase="escape"] .legendary-stage-shade { background: linear-gradient(0deg, #03040af5, #2f0a2790 52%, #03040a9e); }
.heist-phase { position: absolute; z-index: 2; inset: 0; display: none; padding: 18px 16px 15px; }
.heist-phase.active { display: flex; flex-direction: column; align-items: center; animation: legendary-phase-in .35s ease both; }
@keyframes legendary-phase-in { from { opacity: 0; transform: scale(1.04); } }
.phase-title { align-self: stretch; text-align: center; text-shadow: 0 3px 10px #000; }
.phase-title small, .phase-title b { display: block; }
.phase-title small { color: #d2a84d; font-size: 6px; letter-spacing: .18em; }
.phase-title b { margin-top: 2px; font-size: 15px; font-style: italic; letter-spacing: .07em; }
.phase-gesture { margin-top: auto; min-height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #f0c45a3b; border-radius: 18px; color: #f4d889; background: #08080de8; }
.phase-gesture > i { width: 12px; height: 12px; border: 2px solid #f0c45a; border-radius: 50%; box-shadow: 0 0 8px #f0c45a; animation: heist-tap 1s ease-out infinite; }
.phase-gesture b { font-size: 7px; letter-spacing: .1em; }
@keyframes heist-tap { to { opacity: .15; transform: scale(1.8); } }

.vault-machine { position: relative; width: min(320px, 100%); height: 285px; margin-top: 13px; display: grid; place-items: center; border: 1px solid #d4a13f56; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle, #1a130d 0 16%, #09090d 17% 45%, #3c2a16 46% 47%, #09090dd9 48% 70%, #4b3419 71% 72%, #090a0ef2 73%); box-shadow: inset 0 0 45px #e0a8441a, 0 18px 40px #000c; }
.vault-crown { position: absolute; z-index: 4; top: 7px; left: 50%; color: #ffe28d; font-size: 18px; transform: translateX(-50%); text-shadow: 0 0 11px #e8b84e; }
.vault-rings { width: 88%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vault-ring { --turn: 1; position: relative; aspect-ratio: 1; padding: 0; border: 1px solid #d1a34372; border-radius: 50%; color: #f2d17c; background: radial-gradient(circle, #19130c 0 37%, #07080c 38% 51%, #392510 52% 54%, #0b0b0f 55%); box-shadow: inset 0 0 18px #eebd501c, 0 7px 14px #0009; }
.vault-ring > i { position: absolute; inset: 6px; border: 1px dashed #b38636; border-radius: 50%; transform: rotate(calc(var(--turn) * 45deg)); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.vault-ring > i::after { content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; border: 2px solid #fff0b2; border-radius: 3px; background: #e7b84f; box-shadow: 0 0 11px #ffc849; transform: translateX(-50%) rotate(45deg); }
.vault-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 1000; }
.vault-ring.locked { color: #dfff83; border-color: #caff45; background: radial-gradient(circle, #1a2410, #070a08 54%, #253414 55%); box-shadow: inset 0 0 20px #caff4524, 0 0 15px #caff4538; }
.vault-ring.locked > i { border-color: #caff45; }
.vault-ring.locked > i::after { border-color: #efffc0; background: #caff45; box-shadow: 0 0 13px #caff45; }
.vault-core { position: absolute; left: 50%; bottom: 24px; width: 84px; height: 16px; display: grid; place-items: center; border: 1px solid #d1a44d55; border-radius: 12px; background: #09090d; transform: translateX(-50%); }
.vault-core i { width: 54px; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #caff45 0 30%, #38402e 30% 35%, #caff45 35% 65%, #38402e 65% 70%, #caff45 70%); box-shadow: 0 0 8px #caff4550; }

.heist-steal { justify-content: flex-start; }
.crimson-diamond { position: relative; width: 128px; height: 150px; margin: 24px auto 10px; display: grid; place-items: center; border: 1px solid #ff62775c; border-radius: 45% 45% 25% 25%; background: radial-gradient(circle, #ff536436, #19071099 59%, #05070ba8 60%); box-shadow: inset 0 0 35px #ff315f24; transition: .25s; }
.crimson-diamond > i, .result-diamond > i { width: 70px; height: 76px; background: conic-gradient(from 45deg, #ffced2, #d21e43, #6e0920, #ff5d74, #ffced2); clip-path: polygon(22% 0, 78% 0, 100% 32%, 50% 100%, 0 32%); filter: grayscale(.75) brightness(.55) drop-shadow(0 0 7px #ff315f); transition: .25s; }
.crimson-diamond > span { position: absolute; bottom: 9px; color: #6c4d53; font-size: 6px; font-weight: 1000; letter-spacing: .13em; }
.crimson-diamond.ready { border-color: #ff687c; background: radial-gradient(circle, #ff536469, #210810a8 62%, #05070bad); box-shadow: inset 0 0 35px #ff315f42, 0 0 25px #ff315f42; animation: gem-ready .8s ease-in-out infinite alternate; }
.crimson-diamond.ready > i { filter: saturate(1.2) brightness(1.12) drop-shadow(0 0 15px #ff315f); }
.crimson-diamond.ready > span { color: #ffd8dc; }
@keyframes gem-ready { to { transform: translateY(-4px); filter: brightness(1.16); } }
.laser-locks { align-self: stretch; display: grid; gap: 8px; margin-top: 4px; }
.laser-lock { --laser-pos: 12%; min-height: 47px; padding: 0 10px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; border: 1px solid #ff456348; border-radius: 13px; background: #120810e8; }
.laser-lock > b { color: #ff6c7e; font-size: 10px; }
.laser-lock > span { position: relative; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #4a0c18, #ff315f, #4a0c18); box-shadow: 0 0 9px #ff315f61; }
.laser-zone { position: absolute; z-index: 1; left: 38%; width: 24%; height: 100%; border-radius: 8px; background: #ffd76d; box-shadow: 0 0 11px #ffd05b; }
.laser-dot { position: absolute; z-index: 2; left: var(--laser-pos); top: 50%; width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; background: #ff315f; box-shadow: 0 0 10px #ff315f; transform: translate(-50%, -50%); }
.laser-lock.locked { border-color: #caff45; background: #0e1709df; }
.laser-lock.locked > b { color: #caff45; }
.laser-lock.locked > span { background: #263313; box-shadow: 0 0 8px #caff453b; }
.laser-lock.locked .laser-zone, .laser-lock.locked .laser-dot { background: #caff45; border-color: #efffc0; box-shadow: 0 0 10px #caff45; }
.laser-lock.miss { animation: laser-miss .28s linear; }
@keyframes laser-miss { 25%,75% { transform: translateX(-5px); } 50% { transform: translateX(5px); filter: brightness(1.5); } }

.heist-escape { justify-content: flex-start; }
.escape-choice { align-self: stretch; display: grid; gap: 12px; margin-top: 35px; }
.escape-choice > button { min-height: 106px; padding: 12px; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 13px; border: 1px solid #87f5db4f; border-radius: 20px; color: white; background: linear-gradient(120deg, #0e2b27dc, #09100fe8); text-align: left; box-shadow: 0 10px 22px #0009; }
.escape-choice > button.roof { border-color: #f1bd5263; background: linear-gradient(120deg, #34220edd, #110b08ec); }
.escape-choice > button > i { position: relative; width: 70px; height: 70px; border-radius: 18px; background: #071210; }
.escape-choice span small, .escape-choice span b, .escape-choice span em { display: block; }
.escape-choice span small { color: #70d9c1; font-size: 6px; letter-spacing: .13em; }
.escape-choice .roof span small { color: #deb253; }
.escape-choice span b { margin-top: 3px; font-size: 15px; }
.escape-choice span em { margin-top: 5px; color: #d6fff5; font-size: 11px; font-style: normal; }
.escape-choice .roof span em { color: #ffe298; }
.escape-van-icon::before { content: ""; position: absolute; left: 10px; right: 10px; top: 21px; height: 28px; border: 3px solid #76e4ca; border-radius: 9px 9px 5px 5px; box-shadow: inset 0 0 0 7px #123f35; }
.escape-van-icon::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 12px; height: 9px; border-left: 11px dotted #76e4ca; border-right: 11px dotted #76e4ca; }
.escape-roof-icon::before { content: ""; position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border: 3px solid #e9ba55; border-radius: 50%; box-shadow: 15px -8px 0 -12px #e9ba55; }
.escape-roof-icon::after { content: ""; position: absolute; left: 33px; top: 18px; width: 3px; height: 40px; background: #e9ba55; transform: rotate(35deg); transform-origin: top; box-shadow: 0 0 8px #e9ba55; }
.roof-timing { align-self: stretch; display: none; margin-top: 35px; text-align: center; }
.heist-escape.roof-active .escape-choice { display: none; }
.heist-escape.roof-active .roof-timing { display: block; }
.roof-hook { position: relative; width: 126px; height: 135px; margin: 0 auto 25px; border-top: 4px solid #d1d9df; }
.roof-hook::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 90px; background: linear-gradient(#d8e1e5, #6d7a82); transform: translateX(-50%); }
.roof-hook > i { position: absolute; left: 50%; bottom: 5px; width: 45px; height: 45px; border: 5px solid #e8b94f; border-top-color: transparent; border-radius: 50%; transform: translateX(-50%) rotate(-24deg); filter: drop-shadow(0 0 10px #e8b94f); animation: hook-swing 1.2s ease-in-out infinite alternate; }
@keyframes hook-swing { to { transform: translateX(-50%) rotate(24deg); } }
.roof-meter { position: relative; height: 17px; margin: 0 8px 14px; border: 1px solid #d0a04445; border-radius: 10px; background: linear-gradient(90deg, #5d1420, #24141a 38%, #d5a746 38% 62%, #24141a 62%, #5d1420); box-shadow: inset 0 0 8px #000; }
.roof-meter > span { position: absolute; left: 38%; width: 24%; height: 100%; background: #f1c65f35; box-shadow: 0 0 13px #f1c65f; }
.roof-meter > i { position: absolute; left: 0; top: 50%; width: 21px; height: 28px; border: 3px solid white; border-radius: 8px; background: #f14d64; box-shadow: 0 0 12px #f14d64; transform: translate(-50%, -50%); }
.roof-timing > button { width: 100%; min-height: 52px; border-radius: 15px; color: #171104; background: linear-gradient(135deg, #ffe08b, #e4ad35); box-shadow: 0 5px 0 #845b0d, 0 12px 25px #0009; font-size: 11px; font-weight: 1000; letter-spacing: .08em; }

.manhunt-brief, .manhunt-result { position: absolute; z-index: 12; inset: 0; display: none; place-items: center; padding: 15px; background: radial-gradient(circle at 50% 40%, #573314c7, #020308f0 67%); backdrop-filter: blur(9px); }
.manhunt-brief.show, .manhunt-result.show { display: grid; }
.manhunt-brief-card, .manhunt-result-card { width: min(300px, 100%); padding: 16px 17px 15px; overflow: hidden; border: 1px solid #e6b84f78; border-radius: 24px; background: radial-gradient(circle at 50% 10%, #70471b47, transparent 34%), linear-gradient(145deg, #211912f7, #090c13f8 73%); box-shadow: 0 24px 60px #000d, inset 0 0 30px #e5b64c0e; text-align: center; }
.manhunt-brief-card > small, .manhunt-result-card > small { color: #e8bb54; font-size: 7px; font-weight: 1000; letter-spacing: .18em; }
.manhunt-brief-target { width: 112px; height: 112px; margin: 8px auto 6px; overflow: hidden; border: 1px solid #e4b6506b; border-radius: 30px; background: #0b0a0b; box-shadow: 0 0 25px #dcaa3e24; }
.manhunt-brief-target img { width: 100%; height: 100%; object-fit: cover; }
.manhunt-brief-card h2, .manhunt-result-card h2 { margin: 0; font-size: 22px; font-style: italic; }
.manhunt-brief-card > p, .manhunt-result-card > p { margin: 4px 0 10px; color: #cdbb99; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.manhunt-brief-rule { height: 50px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.manhunt-brief-rule span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #e0b04a63; border-radius: 12px; background: #291b0e; }
.manhunt-brief-rule span i { transform: scale(1.05); }
.manhunt-brief-rule em { color: #e8bd59; font-size: 15px; font-style: normal; }
.manhunt-brief-card > button, .manhunt-result-card > button:first-of-type { width: 100%; min-height: 48px; border-radius: 14px; color: #181104; background: linear-gradient(135deg, #ffe493, #e5ad36); box-shadow: 0 5px 0 #855b0f, 0 11px 24px #0008; font-size: 10px; font-weight: 1000; letter-spacing: .08em; }
.result-diamond { width: 105px; height: 112px; margin: 8px auto 4px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #ff405e47, transparent 68%); }
.result-diamond > i { filter: saturate(1.15) brightness(1.16) drop-shadow(0 0 17px #ff315f); animation: result-gem 1s ease-in-out infinite alternate; }
@keyframes result-gem { to { transform: translateY(-5px) scale(1.04); } }
.manhunt-result-stats { margin-bottom: 13px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #ffffff12; border-radius: 13px; background: #06080da6; }
.manhunt-result-stats span { min-height: 50px; display: grid; place-content: center; border-right: 1px solid #ffffff0c; }
.manhunt-result-stats span:last-child { border: 0; }
.manhunt-result-stats b, .manhunt-result-stats small { display: block; }
.manhunt-result-stats b { color: #ffe49b; font-size: 12px; }
.manhunt-result-stats small { margin-top: 2px; color: #756b59; font-size: 5px; letter-spacing: .1em; }
.manhunt-result-card #manhuntRetryButton { width: 100%; min-height: 37px; margin-top: 8px; color: #968a75; background: transparent; font-size: 8px; font-weight: 900; }

.heist-action-strip { z-index: 3; flex: 0 0 46px; min-height: 46px; padding: 0 11px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; border: 1px solid #e5b64b3e; border-radius: 15px; color: #f8dd97; background: #141008e8; }
.heist-action-strip > i { width: 8px; height: 8px; border-radius: 50%; background: #e8b94f; box-shadow: 0 0 10px #e8b94f; }
.heist-action-strip b { font-size: 7px; letter-spacing: .09em; }
.heist-action-strip span { color: #f2c765; font-size: 8px; font-weight: 1000; }
.heist-action-strip.phase-steal { border-color: #ff49694b; color: #ffd3da; background: #1d080eea; }
.heist-action-strip.phase-steal > i { background: #ff4969; box-shadow: 0 0 10px #ff4969; }
.heist-action-strip.phase-escape { border-color: #72e0c34b; color: #d6fff5; background: #071612eb; }
.heist-action-strip.phase-escape > i { background: #72e0c3; box-shadow: 0 0 10px #72e0c3; }

@media (max-width: 365px), (max-height: 720px) {
  .legendary-case-card { height: 184px; }
  .legendary-case-copy b { font-size: 20px; }
  .legendary-route > span { min-height: 50px; }
  .legendary-roster article { min-height: 44px; }
  .manhunt-screen { gap: 5px; padding-inline: 7px; }
  .heist-phase-track { flex-basis: 41px; }
  .legendary-stage { min-height: 350px; border-radius: 19px; }
  .heist-phase { padding: 12px 11px; }
  .vault-machine { height: 245px; margin-top: 7px; }
  .crimson-diamond { width: 105px; height: 120px; margin-top: 12px; }
  .laser-lock { min-height: 40px; }
  .escape-choice { margin-top: 17px; gap: 8px; }
  .escape-choice > button { min-height: 88px; }
  .roof-timing { margin-top: 16px; }
  .roof-hook { height: 105px; margin-bottom: 12px; }
  .manhunt-brief-target { width: 88px; height: 88px; }
  .manhunt-brief-card, .manhunt-result-card { padding-block: 12px; }
}
/* Night Jobs: real-time top-down stealth robbery */
.wanted-screen { background: radial-gradient(circle at 50% 5%, #203f39 0, #111727 34%, #070a12 78%); }
.stealth-job-card { position: relative; height: 224px; margin-top: 12px; overflow: hidden; border: 1px solid #caff456b; border-radius: 24px; background: #080c12; box-shadow: 0 18px 42px #000b, inset 0 0 0 1px #fff08; }
.stealth-job-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; filter: saturate(1.12) contrast(1.06) brightness(.76); }
.stealth-job-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #050812f5, #050812a8 35%, transparent 68%), linear-gradient(90deg, #0508124a, transparent 60%); }
.stealth-job-number { position: absolute; top: 12px; left: 12px; padding: 6px 8px; border: 1px solid #caff4570; border-radius: 9px; color: #dfff86; background: #08100cd9; font-size: 7px; font-weight: 1000; letter-spacing: .13em; }
.stealth-job-number i { font-style: normal; }
.stealth-job-copy { position: absolute; left: 15px; right: 86px; bottom: 14px; }
.stealth-job-copy small, .stealth-job-copy b, .stealth-job-copy em { display: block; }
.stealth-job-copy small { color: #caff45; font-size: 7px; letter-spacing: .14em; }
.stealth-job-copy b { margin-top: 2px; color: #fff; font-size: 23px; font-style: italic; }
.stealth-job-copy em { margin-top: 3px; color: #ff91a3; font-size: 8px; font-style: normal; letter-spacing: .08em; }
.stealth-job-value { position: absolute; right: 12px; bottom: 13px; min-width: 68px; padding: 8px 7px; border: 1px solid #caff4566; border-radius: 13px; background: #0c1710e8; text-align: center; }
.stealth-job-value small, .stealth-job-value b { display: block; }
.stealth-job-value small { color: #89a45e; font-size: 5px; letter-spacing: .13em; }
.stealth-job-value b { margin-top: 2px; color: #dfff83; font-size: 13px; }
.stealth-job-route { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: center; gap: 5px; margin: 11px 0 9px; }
.stealth-job-route > span { min-height: 62px; display: grid; place-items: center; gap: 4px; border: 1px solid #71eadf26; border-radius: 15px; background: linear-gradient(145deg, #122322, #10141e); }
.stealth-job-route > em { height: 1px; background: linear-gradient(90deg, #305e58, #70efe4, #305e58); }
.stealth-job-route b { color: #d7f7f2; font-size: 6px; letter-spacing: .1em; }
.stealth-job-route small { color: #718f8b; font-size: 5px; font-weight: 900; letter-spacing: .06em; }
.stealth-job-route i, .stealth-brief-rule i { position: relative; width: 31px; height: 31px; display: block; border: 1px solid #71eadf66; border-radius: 10px; background: #0d2422; }
.job-route-sneak::before { content: ""; position: absolute; left: 8px; top: 7px; width: 12px; height: 16px; border-radius: 55% 55% 45% 45%; background: #70efe4; transform: rotate(-20deg); box-shadow: 7px 9px 0 -3px #70efe4; }
.job-route-sneak::after { content: ""; position: absolute; left: 7px; bottom: 4px; width: 6px; height: 3px; border-radius: 50%; background: #70efe4; box-shadow: 11px 2px 0 #70efe4; }
.job-route-steal::before { content: ""; position: absolute; inset: 7px 6px 6px; background: linear-gradient(135deg,#ff6f82,#a40f35 48%,#ffd0d6); clip-path: polygon(20% 0,80% 0,100% 35%,50% 100%,0 35%); filter: drop-shadow(0 0 5px #ff315f); }
.job-route-exit::before { content: ""; position: absolute; inset: 7px 8px 5px; border: 2px solid #caff45; border-bottom: 0; border-radius: 3px 3px 0 0; }
.job-route-exit::after { content: "↑"; position: absolute; inset: 0; display: grid; place-items: center; color: #caff45; font-size: 15px; font-weight: 1000; }
.wanted-bounty-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 8px; }
.wanted-bounty-strip > div { min-height: 45px; padding: 7px 4px; border: 1px solid #ffffff0c; border-radius: 12px; background: #101622; text-align: center; }
.wanted-bounty-strip small, .wanted-bounty-strip b { display: block; }
.wanted-bounty-strip small { color: #71869a; font-size: 5px; letter-spacing: .09em; }
.wanted-bounty-strip b { margin-top: 3px; color: #dffcf8; font-size: 8px; }
.stealth-job-roster { display: grid; gap: 6px; margin-bottom: 10px; }
.stealth-job-roster article { min-height: 50px; padding: 5px 9px 5px 6px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 9px; border: 1px solid #ffffff0c; border-radius: 14px; background: #111520; }
.stealth-job-roster article.active { border-color: #caff454d; background: linear-gradient(100deg,#152818,#111520); }
.stealth-job-roster img, .stealth-job-roster article > i { width: 42px; height: 42px; object-fit: cover; border-radius: 11px; background: #090b11; }
.stealth-job-roster span small, .stealth-job-roster span b { display: block; }
.stealth-job-roster span small { color: #7d978b; font-size: 5px; letter-spacing: .13em; }
.stealth-job-roster span b { margin-top: 3px; font-size: 9px; }
.stealth-job-roster .locked { opacity: .48; }
.stealth-job-roster article > i { position: relative; display: grid; place-items: center; }
.roster-museum::before { content: "◆"; color: #70efe4; font-size: 17px; }
.roster-penthouse::before { content: "▤"; color: #caff45; font-size: 18px; }
.manhunt-screen.stealth-screen { z-index: 8; flex-direction: column; gap: 7px; padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); overflow: hidden; background: radial-gradient(circle at 50% -12%,#17403a,#0b111b 38%,#03050a 82%); }
.stealth-header { flex: 0 0 auto; min-height: 44px; display: grid; grid-template-columns: 40px 1fr 64px; align-items: center; gap: 7px; }
.stealth-header > div small, .stealth-header > div b, .stealth-header > span small, .stealth-header > span b { display: block; }
.stealth-header > div small { color: #79eadd; font-size: 6px; letter-spacing: .13em; }
.stealth-header > div b { margin-top: 2px; font-size: 12px; }
.stealth-header > span { text-align: right; }
.stealth-header > span small { color: #738397; font-size: 5px; letter-spacing: .1em; }
.stealth-header > span b { color: #dfff83; font-size: 13px; }
.stealth-hud { flex: 0 0 auto; min-height: 58px; display: grid; grid-template-columns: 1.45fr 1fr 52px; gap: 6px; }
.stealth-hud > div { border: 1px solid #ffffff10; border-radius: 13px; background: #0d1420df; }
.stealth-objective { position: relative; padding: 5px 7px; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 6px; }
.stealth-objective > em { position: absolute; left: 48px; bottom: 5px; color: #91a5b5; font-size: 5px; font-style: normal; letter-spacing: .08em; }
.stealth-objective span small, .stealth-objective span b { display: block; }
.stealth-objective span small { color: #ff738a; font-size: 5px; letter-spacing: .12em; }
.stealth-objective span b { margin-top: 2px; font-size: 8px; }
.stealth-sprite { display: block; background: url("assets/stealth-sprites-12.3.0.png") no-repeat; background-size: 200% 200%; }
.stealth-sprite.gem-sprite { width: 34px; height: 34px; background-position: 0 100%; filter: drop-shadow(0 0 6px #ff315f88); }
.stealth-alert { padding: 7px; transition: .2s; }
.stealth-alert > span { display: flex; align-items: center; gap: 5px; }
.stealth-alert > span > i { width: 7px; height: 7px; border-radius: 50%; background: #70efe4; box-shadow: 0 0 8px #70efe4; }
.stealth-alert > span b { font-size: 7px; letter-spacing: .08em; }
.stealth-alert > div { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: #27313f; }
.stealth-alert > div > i { width: 0; height: 100%; display: block; border-radius: inherit; background: #70efe4; transition: width .1s; }
.stealth-alert.exposed { border-color: #ffb64d70; background: #271c11e8; }
.stealth-alert.exposed > span > i, .stealth-alert.exposed > div > i { background: #ffb64d; box-shadow: 0 0 8px #ffb64d; }
.stealth-alert.alarm { border-color: #ff3b5d80; background: #320d18ed; animation: stealth-alarm .55s ease-in-out infinite alternate; }
.stealth-alert.alarm > span > i, .stealth-alert.alarm > div > i { background: #ff3b5d; box-shadow: 0 0 9px #ff3b5d; }
@keyframes stealth-alarm { to { filter: brightness(1.35); } }
.stealth-loot { padding: 8px 4px; text-align: center; }
.stealth-loot small, .stealth-loot b { display: block; }
.stealth-loot small { color: #788da0; font-size: 5px; letter-spacing: .09em; }
.stealth-loot b { margin-top: 7px; color: #f1c665; font-size: 8px; }
.stealth-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 1px solid #70efe444; border-radius: 20px; background: #070a10; box-shadow: 0 18px 42px #000c,inset 0 0 0 1px #fff05; isolation: isolate; }
#stealthCanvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.manhunt-brief, .manhunt-result { position: absolute; z-index: 8; inset: 0; padding: 18px; display: none; place-items: center; background: #02050bd9; backdrop-filter: blur(10px); }
.manhunt-brief.show, .manhunt-result.show { display: grid; }
.stealth-brief-card, .manhunt-result-card { width: min(310px,100%); padding: 15px; border: 1px solid #70efe45c; border-radius: 22px; background: linear-gradient(155deg,#15232c,#090d16 72%); box-shadow: 0 25px 60px #000e,inset 0 0 0 1px #fff08; text-align: center; }
.stealth-brief-card > small, .manhunt-result-card > small { color: #caff45; font-size: 6px; font-weight: 1000; letter-spacing: .15em; }
.stealth-brief-art { height: 158px; margin: 10px 0; overflow: hidden; border: 1px solid #70efe42e; border-radius: 17px; }
.stealth-brief-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(1.1) brightness(.8); }
.stealth-brief-card h2 { margin: 0; font-size: 21px; font-style: italic; }
.stealth-brief-card > p { margin: 4px 0 10px; color: #ff8297; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.stealth-brief-rule { display: grid; grid-template-columns: 48px 18px 48px 18px 48px; justify-content: center; align-items: center; gap: 3px; margin: 5px 0 13px; }
.stealth-brief-rule > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #ffffff10; border-radius: 13px; background: #0a121b; }
.stealth-brief-rule > em { color: #607f7d; font-size: 13px; font-style: normal; }
.stealth-brief-rule .stealth-sprite { width: 37px; height: 37px; border: 0; background-color: transparent; }
.vision-rule::before { content: ""; position: absolute; left: 4px; top: 7px; width: 22px; height: 17px; border: 2px solid #ff526e; border-radius: 50%; }
.vision-rule::after { content: ""; position: absolute; left: 12px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #ff526e; box-shadow: 0 0 8px #ff526e; }
.stealth-brief-card > button, .manhunt-result-card > button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; color: #0b1308; background: linear-gradient(135deg,#e5ff8e,#b9f62e); box-shadow: 0 5px 0 #5b8112,0 10px 23px #0008; font-size: 10px; font-weight: 1000; letter-spacing: .08em; }
.stealth-result-art { width: 104px; height: 104px; margin: 12px auto 6px; display: grid; place-items: center; border: 1px solid #ff577061; border-radius: 50%; background: radial-gradient(circle,#651128,#11121c 70%); }
.stealth-result-art .stealth-sprite { width: 88px; height: 88px; }
.manhunt-result-card h2 { margin: 3px 0 0; font-size: 24px; font-style: italic; }
.manhunt-result-card > p { margin: 4px 0 12px; color: #8297a8; font-size: 7px; letter-spacing: .1em; }
.manhunt-result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 12px; }
.manhunt-result-stats span { padding: 8px 3px; border: 1px solid #ffffff0d; border-radius: 11px; background: #0a1019; }
.manhunt-result-stats b, .manhunt-result-stats small { display: block; }
.manhunt-result-stats b { color: #dfff83; font-size: 12px; }
.manhunt-result-stats small { margin-top: 3px; color: #6c8090; font-size: 5px; letter-spacing: .1em; }
.manhunt-result-card #manhuntRetryButton { min-height: 30px; margin-top: 9px; color: #75909b; background: transparent; box-shadow: none; font-size: 7px; }
.manhunt-result-card:not(.captured) .stealth-result-art { filter: grayscale(1); opacity: .48; }
.manhunt-result-card:not(.captured) > button:first-of-type { color: #fff; background: linear-gradient(135deg,#ff536c,#af1736); box-shadow: 0 5px 0 #5e0c20; }
.stealth-controls { flex: 0 0 42px; min-height: 42px; padding: 0 9px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; border: 1px solid #ffffff10; border-radius: 13px; background: #0c121c; }
.stealth-controls b { font-size: 7px; letter-spacing: .08em; }
.stealth-controls span { padding: 5px 7px; border: 1px solid #6dece05a; border-radius: 8px; color: #7ef4e9; background: #0d2524; font-size: 6px; font-weight: 1000; }
.tap-floor-icon { position: relative; width: 25px; height: 25px; border: 1px dashed #caff45; border-radius: 50%; }
.tap-floor-icon::before { content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 11px; border: 2px solid #caff45; border-radius: 6px 6px 4px 4px; }
.tap-floor-icon::after { content: ""; position: absolute; left: 11px; bottom: 2px; width: 3px; height: 6px; background: #caff45; }
@media (max-height: 720px) {
  .stealth-job-card { height: 184px; }
  .stealth-job-copy b { font-size: 20px; }
  .stealth-job-route > span { min-height: 50px; }
  .stealth-job-roster article { min-height: 44px; }
  .manhunt-screen.stealth-screen { gap: 4px; padding-inline: 6px; }
  .stealth-header { min-height: 38px; }
  .stealth-hud { min-height: 50px; }
  .stealth-stage { border-radius: 17px; }
  .stealth-brief-art { height: 116px; }
  .stealth-result-art { width: 78px; height: 78px; }
  .stealth-result-art .stealth-sprite { width: 66px; height: 66px; }
  .stealth-controls { flex-basis: 36px; min-height: 36px; }
}
.night-target-sprite { width: 48px; height: 48px; display: block; background: url("assets/night-targets-12.4.0.png") no-repeat; background-size: 300% 200%; filter: drop-shadow(0 0 8px #70efff70); }
.night-reset-badge { min-width: 64px; padding: 6px 8px; border: 1px solid #caff4557; border-radius: 9px; color: #dfff86; background: #0b160ddd; font-size: 6px; font-weight: 1000; letter-spacing: .08em; text-align: center; }
.night-job-explainer { margin: 10px 0 7px; padding: 10px 12px; border: 1px solid #70efe44a; border-radius: 14px; background: linear-gradient(135deg,#102725,#0b141c); box-shadow: inset 0 0 20px #70efe40b; }
.night-job-explainer strong { display: block; color: #caff45; font-size: 7px; letter-spacing: .14em; }
.night-job-explainer p { margin: 5px 0 0; color: #d9efed; font-size: 8px; font-weight: 700; line-height: 1.45; }

/* 12.6.0 — Night Jobs board hierarchy and readable room navigation */
.night-jobs-picker-head,
.night-explainer-head,
.night-prize-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.night-jobs-picker-head { margin: 12px 2px 7px; }
.night-jobs-picker-head b,
.night-explainer-head strong,
.night-prize-head b { color: #dfff88; font-size: 7px; letter-spacing: .14em; }
.night-jobs-picker-head span,
.night-explainer-head span,
.night-prize-head span { color: #6f8e8a; font-size: 5px; font-weight: 900; letter-spacing: .1em; }
.wanted-screen .night-job-grid { margin-bottom: 11px; }
.wanted-screen .night-job-explainer { margin: 0 0 9px; padding: 11px; border-color: #70efe455; background: radial-gradient(circle at 25% 0,#153a36,#0a151d 72%); }
.night-how-route { margin-top: 9px; display: grid; grid-template-columns: minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr); align-items: center; gap: 2px; }
.night-how-route > span { min-width: 0; min-height: 68px; padding: 6px 2px 5px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #ffffff12; border-radius: 11px; background: #08121ae8; text-align: center; }
.night-how-route > em { color: #5cefe4; font-size: 13px; font-style: normal; text-align: center; }
.night-how-route i { position: relative; width: 27px; height: 27px; display: block; border: 1px solid #71eadf66; border-radius: 9px; background-color: #0d2422; }
.night-how-route b { color: #d8f7f3; font-size: 5px; letter-spacing: .06em; line-height: 1.1; }
.night-how-route small { color: #698681; font-size: 4px; font-weight: 900; letter-spacing: .04em; }
.night-door-rule::before { content: ""; position: absolute; inset: 5px 7px; border: 2px solid #70efe4; border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 0 8px #70efe477; }
.night-door-rule::after { content: "›"; position: absolute; left: 10px; bottom: 0; color: #d5fffb; font-size: 15px; line-height: 12px; transform: rotate(90deg); text-shadow: 0 0 7px #70efe4; }
.night-job-explainer > p { margin: 9px 2px 0; color: #afc9c5; font-size: 7px; line-height: 1.45; }
.night-job-explainer .wanted-job-hint { margin: 9px 0 0; border-color: #caff4536; background: #101d11d9; }
.night-job-explainer .wanted-job-hint i { background: #caff45; box-shadow: 0 0 9px #caff45; }
.night-prize-panel { margin-bottom: 10px; padding: 10px; border: 1px solid #caff453d; border-radius: 15px; background: linear-gradient(145deg,#111c13,#0b1119); box-shadow: inset 0 0 22px #caff4508; }
.night-prize-panel .wanted-bounty-strip { margin: 8px 0 7px; }
.night-prize-panel .wanted-bounty-strip > div { background: #091119; }
.night-prize-panel > small { display: block; margin-top: 6px; color: #718883; font-size: 5px; font-weight: 800; letter-spacing: .05em; }
.night-progress-track { height: 5px; overflow: hidden; border-radius: 5px; background: #26312b; }
.night-progress-track > i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#5ae9df,#caff45); box-shadow: 0 0 10px #caff45; transition: width .25s ease; }
.night-job-tile.cleared { border-color: #caff454c; }
.night-job-tile.cleared::after { content: "PAID"; position: absolute; top: 6px; right: 6px; padding: 3px 4px; border-radius: 5px; color: #101708; background: #caff45; font-size: 4px; font-weight: 1000; letter-spacing: .08em; }
.night-job-tile.cleared:not(.selected) { filter: saturate(.65) brightness(.72); }
.wanted-screen #startWantedButton:disabled { color: #78907d; background: linear-gradient(135deg,#1c2a22,#101720); box-shadow: inset 0 0 0 1px #ffffff0c; }
@media (max-height: 720px) {
  .night-how-route > span { min-height: 58px; }
  .night-how-route i { width: 23px; height: 23px; }
  .night-job-explainer > p { font-size: 6px; }
}
.daily-night-callout { margin: 0 0 7px; padding: 9px 10px; display: grid; gap: 3px; border: 1px solid #caff453d; border-radius: 12px; background: linear-gradient(90deg,#18230e,#0c1716); }
.daily-night-callout b { color: #e5ff98; font-size: 7px; letter-spacing: .09em; }
.daily-night-callout span { color: #8ba49d; font-size: 5px; font-weight: 900; letter-spacing: .05em; line-height: 1.35; }
.wanted-hero-target { position: absolute; top: 13px; right: 13px; width: 70px; height: 70px; border: 1px solid #ffffff1a; border-radius: 20px; background-color: #071018aa; box-shadow: inset 0 0 22px #70efff18, 0 9px 18px #0008; }
.wanted-job-hint { min-height: 34px; margin: 0 0 8px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #70efe436; border-radius: 11px; color: #c7fff9; background: #0b1c1bd9; }
.wanted-job-hint i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #70efe4; box-shadow: 0 0 9px #70efe4; }
.wanted-job-hint b { font-size: 6px; letter-spacing: .08em; }
.night-job-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-bottom: 10px; }
.night-job-tile { position: relative; min-height: 76px; padding: 0; overflow: hidden; display: grid; grid-template-columns: 52px 1fr 15px; align-items: center; gap: 7px; border: 1px solid #ffffff12; border-radius: 15px; color: white; background: #0b1019; text-align: left; isolation: isolate; }
.night-job-tile::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#071018f5 38%,#071018c4 70%,#0710189b); }
.night-job-tile > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.6); }
.night-job-tile > .night-target-sprite { width: 49px; height: 49px; margin-left: 4px; border: 1px solid #ffffff14; border-radius: 12px; background-color: #081019b8; }
.night-job-tile span small, .night-job-tile span b { display: block; }
.night-job-tile span small { color: #70efe4; font-size: 5px; letter-spacing: .12em; }
.night-job-tile span b { margin-top: 4px; font-size: 8px; line-height: 1.08; }
.night-job-tile > em { color: #6f8890; font-size: 12px; font-style: normal; font-weight: 1000; }
.night-job-tile.selected { border-color: #caff45; box-shadow: 0 0 0 1px #caff4524, 0 0 18px #caff451c; }
.night-job-tile.selected > em, .night-job-tile.cleared > em { color: #caff45; }
.night-job-tile.locked { opacity: .42; filter: grayscale(.8); }
.stealth-objective > .night-target-sprite { width: 35px; height: 35px; }
.stealth-brief-art { position: relative; }
.stealth-brief-art > .night-target-sprite { position: absolute; right: 8px; bottom: 8px; width: 72px; height: 72px; border: 1px solid #ff6b825c; border-radius: 18px; background-color: #090b13d9; filter: drop-shadow(0 0 11px #ff315f90); }
.stealth-brief-rule { grid-template-columns: 74px 12px 74px 12px 74px; gap: 2px; }
.stealth-brief-rule > span { width: 74px; height: 62px; align-content: center; gap: 3px; }
.stealth-brief-rule > span > i { width: 29px; height: 29px; margin: auto; }
.stealth-brief-rule > span > b { color: #b8d6d2; font-size: 5px; letter-spacing: .05em; }
.tap-rule::before { content: ""; position: absolute; left: 8px; top: 7px; width: 10px; height: 14px; border: 2px solid #caff45; border-radius: 8px 8px 5px 5px; }
.tap-rule::after { content: ""; position: absolute; inset: 2px; border: 1px dashed #caff45; border-radius: 50%; animation: heist-tap 1s ease-out infinite; }
.stealth-brief-lesson { min-height: 27px; margin: -3px 0 10px; display: grid; place-items: center; border: 1px solid #caff4532; border-radius: 9px; color: #dfff88; background: #111b0d; font-size: 6px; letter-spacing: .08em; }
.stealth-brief-help { margin: -3px 8px 10px !important; display: flex; align-items: center; justify-content: center; gap: 6px; color: #81958f !important; font-size: 5px !important; font-weight: 1000; line-height: 1; letter-spacing: .08em !important; }
.stealth-brief-help b { padding: 4px 6px; border: 1px solid #70efe452; border-radius: 7px; color: #caff45; background: #70efe40c; font-size: 6px; }
.stealth-brief-help i { width: 8px; height: 1px; display: block; background: #70efe45c; }
.stealth-guide { position: absolute; z-index: 5; left: 50%; bottom: 16px; min-width: 190px; padding: 9px 13px 9px 37px; display: none; border: 1px solid #caff456e; border-radius: 14px; color: white; background: #09100eeb; box-shadow: 0 10px 28px #000c, 0 0 18px #caff4522; transform: translateX(-50%); pointer-events: none; }
.stealth-guide.show { display: block; animation: guide-in .25s ease both; }
.stealth-guide > i { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; border: 2px solid #caff45; border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 10px #caff45; }
.stealth-guide > i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #caff45; }
.stealth-guide b, .stealth-guide span { display: block; }
.stealth-guide b { color: #dfff88; font-size: 7px; letter-spacing: .08em; }
.stealth-guide span { margin-top: 2px; color: #91aaa5; font-size: 5px; letter-spacing: .07em; }
@keyframes guide-in { from { opacity: 0; transform: translate(-50%,8px); } }
.stealth-controls { grid-template-columns: 28px 1fr auto; }
.stealth-controls > button { min-height: 31px; padding: 0 8px; display: flex; align-items: center; gap: 5px; border: 1px solid #70efe45a; border-radius: 9px; color: #89fff3; background: linear-gradient(145deg,#12312e,#0a1d1c); }
.stealth-controls > button > i { width: 7px; height: 7px; border-radius: 50%; background: #70efe4; box-shadow: 0 0 8px #70efe4; }
.stealth-controls > button > span { padding: 0; border: 0; color: inherit; background: none; font-size: 6px; }
.stealth-controls > button:disabled { opacity: .38; filter: grayscale(1); }
.stealth-result-art > .night-target-sprite { width: 94px; height: 94px; }
@media (max-width: 365px), (max-height: 720px) {
  .night-job-tile { min-height: 66px; grid-template-columns: 44px 1fr 12px; }
  .night-job-tile > .night-target-sprite { width: 41px; height: 41px; }
  .wanted-job-hint { min-height: 29px; }
  .night-job-explainer { padding: 8px 10px; }
  .night-job-explainer p { font-size: 7px; }
  .stealth-brief-rule { grid-template-columns: 65px 9px 65px 9px 65px; }
  .stealth-brief-rule > span { width: 65px; height: 53px; }
  .stealth-brief-art > .night-target-sprite { width: 58px; height: 58px; }
}
.rival-row { min-height: 68px; padding: 9px 10px; display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; border-radius: 15px; background: #15182a; border: 1px solid #ffffff10; }
.rival-row.you { border-color: #7047ff88; }
.rival-rank { color: var(--lime); font-size: 14px; font-weight: 1000; text-align: center; }
.rival-info b { display: block; font-size: 10px; }
.rival-info small { color: var(--muted); font-size: 8px; }
.rival-info em { display: block; margin-top: 3px; color: #73d8e9; font-size: 7px; font-style: normal; }
.raid-button { min-width: 61px; min-height: 34px; border-radius: 10px; background: var(--pink); color: white; font-size: 8px; font-weight: 1000; }
.raid-button:disabled { background: #303343; color: #777b8a; }
.network-loading, .network-note { padding: 20px; text-align: center; color: var(--muted); font-size: 9px; }
.network-note { padding: 13px 10px; line-height: 1.4; }
.upgrade-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 16px 14px; border-radius: 19px; background: #171a2b; border: 1px solid #ffffff12; }
.upgrade-card { --gear-accent: #ceff42; }
.upgrade-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #ffffff1f; border-radius: 16px; font-size: 23px; background-color: #080c15; }
.upgrade-card h3 { margin: 0 0 3px; font-size: 13px; }
.upgrade-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.level-dots { display: flex; gap: 3px; margin-top: 7px; }
.level-dots i { width: 15px; height: 4px; background: #3d4053; border-radius: 4px; }
.level-dots i.on { background: var(--lime); }
.buy-button { min-width: 72px; min-height: 39px; border-radius: 12px; background: var(--lime); color: #171b09; font-size: 10px; font-weight: 1000; }
.buy-button:disabled { background: #303342; color: #777a88; }
.how-list { display: grid; gap: 9px; margin-top: 15px; }
.how-list article { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; padding: 11px; background: #15182a; border: 1px solid #ffffff12; border-radius: 16px; }
.how-list article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #6d45ee; color: var(--lime); font-size: 18px; font-weight: 900; }
.how-list h3 { margin: 0 0 4px; font-size: 12px; }
.how-list p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.3; }
.bottom-button { margin-top: auto; flex: 0 0 60px; }
.settings-list { display: grid; gap: 12px; margin-top: 22px; }
.settings-list label, .settings-list button { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; text-align: left; background: #15182a; border: 1px solid #ffffff12; border-radius: 18px; }
.settings-list b { display: block; font-size: 13px; }
.settings-list small { color: var(--muted); font-size: 9px; }
.settings-list input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-list label:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.settings-list label i { position: relative; width: 48px; height: 27px; border-radius: 18px; background: #343749; transition: .2s; }
.settings-list label i::after { content: ""; position: absolute; width: 21px; height: 21px; border-radius: 50%; left: 3px; top: 3px; background: white; transition: .2s; }
.settings-list input:checked + i { background: var(--purple); }
.settings-list input:checked + i::after { transform: translateX(21px); }
.settings-list em { color: var(--pink); font-size: 10px; font-style: normal; font-weight: 900; }
.settings-list .install-setting em { color: var(--lime); }
.settings-list .install-setting.ready { border-color: #ceff4255; background: linear-gradient(100deg, #27311c, #15182a); }
.settings-list .install-setting.installed { opacity: .68; }
.settings-list .pi-setting { border-color: #8b5cf655; background: linear-gradient(100deg, #2b1e48, #15182a); }
.settings-list .pi-setting[hidden] { display: none; }
.settings-list .pi-setting em { color: #bda7ff; }
.settings-list .pi-setting.connected { border-color: #ceff4266; background: linear-gradient(100deg, #27311c, #15182a); }
.settings-list .pi-setting.connected em { color: var(--lime); }
.settings-list .pi-reward-setting { border-color: #55f2c84a; background: linear-gradient(100deg, #12332e, #15182a); }
.settings-list .pi-reward-setting em { color: #6ef0bf; }
.settings-list .pi-reward-setting.completed { border-color: #ceff4273; background: linear-gradient(100deg, #2c351b, #15182a); }
.settings-list .pi-reward-setting.completed em { color: var(--lime); }
.settings-list .pi-payment-setting { border-color: #f1b84b55; background: linear-gradient(100deg, #382918, #15182a); }
.settings-list .pi-payment-setting em { color: #ffd46a; }
.settings-list .pi-payment-setting.completed { border-color: #ceff4266; background: linear-gradient(100deg, #27311c, #15182a); }
.settings-list .pi-payment-setting.completed em { color: var(--lime); }
.credits { margin-top: auto; text-align: center; color: var(--muted); font-size: 10px; }
.credits b { color: var(--lime); letter-spacing: .15em; }
.credits span { color: #4f5265; font-size: 8px; }
.privacy-list { display: grid; gap: 9px; }
.privacy-list article { min-height: 88px; padding: 12px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: start; border: 1px solid #ffffff13; border-radius: 17px; background: #14172a; }
.privacy-list article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #d0baff; background: #8c61ff20; font-size: 19px; }
.privacy-list h3 { margin: 1px 0 5px; color: #e7e8f0; font-size: 10px; letter-spacing: .07em; }
.privacy-list p { margin: 0; color: #a8adbf; font-size: 9px; line-height: 1.45; }
.player-id-card { margin-top: 11px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; border: 1px solid #5de7b544; border-radius: 17px; background: linear-gradient(120deg, #15332988, #14172a); }
.player-id-card small { grid-column: 1 / 3; color: #61e8b7; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.player-id-card code { align-self: center; color: #eafff7; font: 800 12px ui-monospace, monospace; }
.player-id-card button { min-width: 72px; height: 34px; border: 1px solid #61e8b755; border-radius: 10px; color: #61e8b7; background: #61e8b710; font-size: 8px; font-weight: 900; }
.player-id-card p { grid-column: 1 / 3; margin: 0; color: var(--muted); font-size: 8px; }
.privacy-document { min-height: 44px; margin-top: 10px; display: grid; place-items: center; border: 1px solid #ffffff1c; border-radius: 13px; color: #c7cadd; background: #ffffff08; text-decoration: none; font-size: 9px; font-weight: 900; letter-spacing: .06em; }

.overlay { position: absolute; z-index: 10; inset: 0; display: none; align-items: center; padding: 24px; background: #03040bd9; backdrop-filter: blur(7px); }
.overlay.show { display: flex; }
.revive-overlay { z-index: 35; background: #050711ed; }
.revive-card { width: 100%; padding: 24px 18px 17px; border: 1px solid #ff55786b; border-radius: 25px; background: radial-gradient(circle at 50% 0, #ff3e6a25, transparent 42%), linear-gradient(160deg, #241728, #111521); text-align: center; box-shadow: 0 28px 75px #000e; }
.revive-card > span { color: #ff708d; font-size: 7px; font-weight: 1000; letter-spacing: .15em; }
.revive-card h2 { margin: 7px 0 3px; font-size: 24px; font-style: italic; }
.revive-card > small { display: block; margin-bottom: 16px; color: #a7adbd; font-size: 8px; }
.revive-card button { width: 100%; min-height: 46px; margin-top: 8px; }
.rewarded-revive-button { border: 1px solid #70f4e85e; border-radius: 13px; color: #d7fff8; background: linear-gradient(100deg, #15352d, #172039); font-size: 9px; font-weight: 1000; letter-spacing: .05em; }
.rewarded-revive-button b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; color: #102019; background: #70f4e8; font-size: 8px; }
.crew-detail-overlay { z-index: 31; padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)); }
.crew-detail-card { position: relative; width: 100%; max-height: 100%; overflow-y: auto; padding: 18px; border: 1px solid #a481ff59; border-radius: 27px; background: radial-gradient(circle at 10% 0, #7047ff36, transparent 38%), linear-gradient(150deg, #20223a, #10131f); box-shadow: 0 30px 80px #000d; }
.crew-detail-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid #ffffff20; border-radius: 50%; color: #d7d8e4; background: #090b14b8; font-size: 21px; }
.crew-detail-hero { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 14px; padding-right: 30px; }
.crew-detail-hero > img { width: 82px; height: 82px; object-fit: cover; border: 3px solid #a98dff; border-radius: 50%; box-shadow: 0 0 25px #7e5bff47; }
.crew-detail-hero small { color: #9e91cc; font-size: 7px; font-weight: 1000; letter-spacing: .11em; }
.crew-detail-hero h2 { margin: 2px 0 5px; font-size: 27px; font-style: italic; }
.crew-detail-hero span { padding: 4px 7px; border-radius: 7px; color: #0e1c18; background: #70f4d8; font-size: 6px; font-weight: 1000; letter-spacing: .1em; }
.crew-detail-power { margin-top: 15px; padding: 13px; border: 1px solid #70f4e84a; border-radius: 16px; background: #0f2324bd; }
.crew-detail-power small, .crew-detail-power b { display: block; }
.crew-detail-power small, .crew-detail-grid small { color: #6ae8d7; font-size: 6px; font-weight: 1000; letter-spacing: .12em; }
.crew-detail-power b { margin-top: 3px; font-size: 14px; }
.crew-detail-power p, .crew-detail-grid p { margin: 4px 0 0; color: #aeb4c6; font-size: 8px; line-height: 1.4; }
.crew-detail-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crew-detail-grid > div { padding: 11px; border: 1px solid #ffffff12; border-radius: 14px; background: #111522; }
.crew-detail-bond { margin-top: 12px; }
.crew-detail-bond > span { display: flex; justify-content: space-between; color: #cbbcff; font-size: 7px; }
.crew-detail-bond > span small { color: #858b9e; }
.crew-detail-bond > i { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #090b14; }
.crew-detail-bond > i u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d65ff, #70f4d8); text-decoration: none; }
.crew-detail-actions { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 8px; }
.crew-detail-actions button { width: 100%; min-height: 45px; }
.pause-card .primary-button { margin-top: 16px; }
.challenge-overlay { z-index: 12; }
.challenge-card { width: 100%; padding: 25px 19px 20px; text-align: center; border-radius: 26px; background: linear-gradient(150deg, #202440, #10131f); border: 1px solid #ffffff20; box-shadow: 0 30px 80px #000c; }
.challenge-kicker { color: var(--lime); font-size: 9px; font-weight: 1000; letter-spacing: .2em; }
.challenge-card h2 { margin: 6px 0; font-size: 25px; font-style: italic; }
.challenge-card > p { margin: 0 0 20px; color: var(--muted); font-size: 10px; }
.hack-track { position: relative; height: 38px; margin: 28px 3px 15px; border-radius: 13px; background: #080a12; border: 1px solid #ffffff14; overflow: hidden; }
.hack-track::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 4px; background: linear-gradient(90deg, #ff4b8b, #7b4dff, #40e4ff); opacity: .38; }
.hack-track i { position: absolute; top: 5px; bottom: 5px; left: 35%; width: 24%; border-radius: 8px; background: #ceff4233; border: 1px solid var(--lime); box-shadow: 0 0 16px #ceff4233; }
.hack-track b { position: absolute; z-index: 2; top: 2px; left: 0%; width: 7px; height: 34px; border-radius: 6px; background: white; box-shadow: 0 0 14px white; transform: translateX(-50%); }
.tap-challenge, .sequence-challenge, .dial-challenge { display: none; margin: 16px 0; }
.tap-challenge.show, .sequence-challenge.show, .dial-challenge.show { display: block; }
.hack-track.hide, .hack-status.hide, #crackButton.hide { display: none; }
.tap-challenge button { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, #ff7a54, #ad275b); border: 6px solid #ffffff22; box-shadow: 0 10px 0 #661c39, 0 0 35px #ff4b8b55; }
.tap-challenge button:active { transform: translateY(6px); box-shadow: 0 4px 0 #661c39; }
.tap-challenge span { display: block; font-size: 37px; }
.tap-challenge b { display: block; font-size: 11px; }
.tap-challenge small { display: block; margin-top: 5px; color: #ffe96c; font-size: 14px; font-weight: 1000; }
.sequence-target small, .dial-clue small { display: block; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.sequence-target b { display: block; min-height: 42px; margin: 5px 0 11px; color: #78f2dc; font-size: 25px; letter-spacing: .18em; }
.sequence-swipe-pad { height: 112px; border: 1px solid #65e9d077; border-radius: 18px; background: radial-gradient(circle at 50% 80%, #2a8c7d33, transparent 62%), #102725; display: grid; place-content: center; gap: 8px; color: #8ff5e2; touch-action: none; user-select: none; outline: none; box-shadow: inset 0 0 24px #65e9d00e; }
.sequence-swipe-pad span { font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.sequence-swipe-pad i { font-size: 26px; font-style: normal; }
.sequence-swipe-pad:focus { border-color: #8ff5e2; box-shadow: 0 0 0 3px #65e9d022, inset 0 0 28px #65e9d016; }
.sequence-swipe-pad.good { animation: swipe-good .18s ease-out; }
.sequence-swipe-pad.bad { animation: swipe-bad .24s ease-out; border-color: #ff627d; }
.sequence-timer { height: 6px; overflow: hidden; border-radius: 99px; background: #ffffff16; }
.sequence-timer i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff6078, #ffd66b, #65e9d0); transform-origin: left; transition: width .08s linear; }
@keyframes swipe-good { 50% { transform: scale(1.025); background-color: #1b5149; } }
@keyframes swipe-bad { 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.sequence-challenge > small { display: block; margin-top: 10px; color: #8d93a8; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.dial-clue { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dial-clue b { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #ffd36b88; border-radius: 50%; color: #241706; background: #ffd36b; box-shadow: 0 0 18px #ffd36b44; font-size: 19px; }
.dial-control { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 12px; margin: 13px 0 11px; }
.dial-control button { height: 54px; border: 1px solid #ffd36b44; border-radius: 15px; color: #ffd36b; background: #2b251f; font-size: 27px; }
.dial-control > b { height: 82px; display: grid; place-items: center; border: 5px solid #3e3448; border-top-color: #ffd36b; border-radius: 50%; color: #fff1ca; background: radial-gradient(circle, #292236, #0d0f18); box-shadow: 0 0 25px #ffd36b22; font-size: 31px; }
#dialSetButton { width: 100%; min-height: 46px; border: 1px solid #ffd36b66; border-radius: 14px; color: #241706; background: #ffd36b; font-size: 10px; font-weight: 1000; letter-spacing: .09em; }
.hack-status { display: flex; justify-content: space-between; margin: 0 5px 20px; color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.hack-status b { color: var(--lime); }
.tactical-overlay { z-index: 13; padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); }
.tactical-card { width: 100%; max-height: 100%; overflow-y: auto; padding: 22px 16px 17px; text-align: center; border: 1px solid #62e7ce42; border-radius: 27px; background: radial-gradient(circle at 15% 0, #28524f, transparent 38%), linear-gradient(150deg, #20263d, #0f1320); box-shadow: 0 30px 80px #000d; }
.tactical-card h2 { margin: 6px 0; font-size: 23px; font-style: italic; }
.tactical-card > p { max-width: 310px; margin: 0 auto 14px; color: #a5aabb; font-size: 9px; line-height: 1.4; }
.tactical-choices { display: grid; gap: 8px; }
.tactical-option { --tactic-color: #6debd3; width: 100%; min-height: 78px; padding: 9px; display: grid; grid-template-columns: 49px 1fr; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--tactic-color) 42%, transparent); border-radius: 17px; color: inherit; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--tactic-color) 18%, transparent), transparent 48%), #121725; text-align: left; }
.tactical-option:active { transform: scale(.985); background: color-mix(in srgb, var(--tactic-color) 12%, #121725); }
.tactical-option > span { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tactic-color) 55%, transparent); border-radius: 15px; color: #071411; background: var(--tactic-color); box-shadow: 0 0 18px color-mix(in srgb, var(--tactic-color) 28%, transparent); font-size: 20px; font-weight: 1000; }
.tactical-option small { display: block; color: var(--tactic-color); font-size: 6px; font-weight: 1000; letter-spacing: .12em; }
.tactical-option b { display: block; margin-top: 2px; font-size: 11px; }
.tactical-trade { display: flex; flex-wrap: wrap; gap: 4px; }
.tactical-trade em, .tactical-trade u { padding: 3px 5px; border-radius: 6px; font-size: 6px; font-style: normal; font-weight: 1000; text-decoration: none; }
.tactical-trade em { color: #9affdc; background: #3fdaaf17; }
.tactical-trade u { color: #ff9cb4; background: #ff557c13; }
.tactical-footnote { display: block; margin-top: 12px; color: #657077; font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.reward-overlay { z-index: 14; }
.reward-card { width: 100%; padding: 28px 19px 20px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 50% 22%, #43326e, #171a2c 55%); border: 1px solid #ffffff22; box-shadow: 0 30px 80px #000c; }
.gift-box { position: relative; width: 120px; height: 100px; margin: 21px auto 12px; display: grid; place-items: center; border-radius: 15px 15px 28px 28px; background: linear-gradient(#ffdb55 0 18%, #7b4dff 19%); border: 5px solid #090b18; box-shadow: 0 0 38px #ceff4233; }
.gift-box i { position: absolute; width: 22px; inset: 0 auto 0 48px; background: var(--lime); }
.gift-box b { position: relative; z-index: 2; color: #10131d; font-size: 30px; }
.reward-card h2 { margin: 0; font-size: 26px; font-style: italic; }
.reward-card > p { color: var(--muted); font-size: 10px; }
.gift-rewards { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0; }
.gift-rewards span { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--lime); font-size: 11px; }
.gift-rewards .currency-icon { width: 25px; height: 25px; }
.gift-rewards span + span { border-left: 1px solid #ffffff16; }
.gift-rewards span:nth-child(2) { color: var(--cyan); }
.gift-rewards span:nth-child(3) { color: #e9a8ff; }
.level-up { height: 17px; color: var(--lime); font-size: 9px; font-weight: 1000; letter-spacing: .12em; opacity: 0; }
.level-up.show { opacity: 1; animation: flash 1s infinite alternate; }
.level-guide { z-index: 16; }
.level-guide-card { width: 100%; padding: 26px 19px 19px; border-radius: 27px; background: linear-gradient(150deg, #24294a, #111421); border: 1px solid #ffffff20; box-shadow: 0 30px 80px #000c; }
.level-guide-card > h2 { margin: 6px 0 19px; text-align: center; font-size: 23px; font-style: italic; }
.level-guide-card > .challenge-kicker { display: block; text-align: center; }
.level-guide-card > div { min-height: 64px; padding: 10px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; border-radius: 15px; background: #15182a; border: 1px solid #ffffff10; }
.level-guide-card > div + div { margin-top: 8px; }
.level-guide-card i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--purple); color: var(--lime); font-size: 17px; font-style: normal; font-weight: 1000; }
.level-guide-card b { display: block; font-size: 10px; }
.level-guide-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.level-guide-tip { margin: 10px 3px 0; color: #8edfeb; font-size: 8px; line-height: 1.45; text-align: center; }
.level-guide-card .primary-button { margin-top: 17px; }

@media (max-height: 900px) {
  .brand { margin-top: 8px; }
  .brand h1 { font-size: 54px; }
  .brand p { display: none; }
  .mascot { width: 142px; height: 130px; }
  .menu-actions { gap: 6px; }
  .primary-button { min-height: 54px; }
  .daily-card { min-height: 47px; }
  .feature-button { min-height: 44px; }
}

@media (max-width: 380px) {
  #app { width: 100%; max-width: none; }
  #menu { padding: max(12px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); }
  .topbar, .panel-header { min-height: 36px; }
  .icon-button, .back-button, .pause-button { width: 36px; height: 36px; border-radius: 12px; }
  .level-badge { min-width: 52px; height: 36px; }
  .wallet { min-width: 68px; height: 34px; padding: 0 10px; }
  #menu .brand { margin-top: 5px; }
  .brand h1 { font-size: 44px; text-shadow: 0 4px 0 #000; }
  .mascot { width: 118px; height: 108px; margin: 2px auto -9px; border-width: 4px; }
  .mask-band { height: 40px; top: 27px; }
  .mask-band i { width: 20px; height: 10px; }
  .mascot-body { inset: 66px 14px -18px; }
  .bag { width: 58px; height: 54px; right: -27px; top: 17px; font-size: 20px; }
  #menu .menu-actions { gap: 5px; }
  #menu .primary-button { min-height: 47px; border-radius: 15px; }
  #menu .secondary-button { min-height: 41px; }
  #menu .feature-button,
  #menu .feature-button.wanted-feature { min-height: 50px; grid-template-rows: 27px auto; }
  #menu .feature-button > span { width: 27px; height: 27px; }
  #menu .daily-card { min-height: 43px; padding: 6px 9px; }
  .panel-screen { padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  .panel-header h2 { font-size: 16px; }
  #shop .panel-header h2 { max-width: 90px; font-size: 12px; line-height: .92; }
  #shop .shop-wallet { width: 121px; flex: 0 0 121px; gap: 3px; }
  #shop .shop-wallet span { width: 59px; min-width: 59px; flex: 0 0 59px; padding: 5px 4px; justify-content: center; gap: 3px; }
  #shop .shop-wallet b { min-width: 0; display: inline-block !important; overflow: hidden; font-size: 7px; font-variant-numeric: tabular-nums; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; text-overflow: clip; }
  #shop .shop-wallet .currency-icon { width: 15px; height: 15px; }
  .bottom-button { flex-basis: 52px; }
  .approach-pickups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; padding-inline: 0; }
  .approach-pickup { min-width: 0; height: 44px; padding: 4px 2px; flex-direction: column; justify-content: center; gap: 2px; }
  .approach-pickup i { width: 23px; height: 23px; flex: 0 0 23px; }
  .approach-pickup b { max-width: 100%; overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
  .approach-target em { font-size: 11px; }
  .campaign-map-viewport { margin-inline: -14px; }
  .chapter-map-card { flex-basis: 214px; min-width: 214px; }
  .shop-card.gear { grid-template-columns: 63px 1fr auto; gap: 8px; }
  .shop-card.gear .shop-item-icon.gear-art { width: 61px; height: 61px; border-radius: 17px; }
  .deal-card { grid-template-columns: 56px minmax(0, 1fr) 62px; gap: 7px; padding: 8px; }
  .shop-card.lab .shop-item-icon, .deal-card .deal-icon { width: 55px; height: 55px; border-radius: 15px; }
  .deal-card .shop-buy { min-width: 60px; padding-inline: 5px; font-size: 8px; }
  .deal-impact b { font-size: 5.5px; }
  .deal-trust-banner { grid-template-columns: 34px 1fr; }
  .deal-trust-banner em { display: none; }
  .settings-list { gap: 8px; margin-top: 14px; }
  .settings-list label, .settings-list button { min-height: 62px; padding: 11px 13px; border-radius: 15px; }
}

html.pi-platform,
html.pi-platform body {
  min-width: 0;
  min-height: 0;
}

html.pi-platform #app {
  width: min(100%, 480px);
  height: 100vh;
  height: 100dvh;
}

@media (max-height: 700px) {
  .modal-screen { padding: calc(max(6px, env(safe-area-inset-top)) + 6px) 12px 12px; }
  .contract-screen { overflow: hidden; }
  .result-card { margin: 0; padding: 20px 16px 16px; }
  .brand { margin-top: 8px; }
  .brand h1 { font-size: 50px; }
  .brand p { display: none; }
  .mascot { height: 128px; width: 140px; }
  .daily-card { min-height: 48px; }
  .menu-actions { gap: 7px; }
  .contract-screen .panel-subtitle { margin: 4px 0 8px; }
  .contract-list { gap: 7px; }
  .contract-card { min-height: 72px; padding: 7px 10px; grid-template-columns: 54px 1fr auto; }
  .contract-art { width: 52px; height: 52px; border-radius: 13px; font-size: 20px; }
  .contract-screen .bottom-button { flex-basis: 52px; }
  .campaign-map-viewport { height: 264px; }
  .campaign-map-grid, .campaign-map-skyline { height: 264px; }
  .campaign-map-label { top: 7px; }
  .chapter-strip.campaign-map-route { padding-top: 45px; }
  .chapter-map-card { height: 204px; padding: 8px; border-radius: 19px; }
  .chapter-map-head { min-height: 66px; grid-template-columns: 54px 1fr; gap: 8px; }
  .chapter-map-art { width: 52px; height: 52px; border-radius: 16px 16px 20px 12px; }
  .chapter-level-route { min-height: 119px; margin-top: 3px; padding-top: 7px; gap: 3px 10px; }
  .chapter-level-route::before { inset-block: 28px 25px; }
  .chapter-level-node { min-height: 46px; }
  .chapter-level-node span { width: 33px; height: 33px; border-radius: 11px; font-size: 14px; }
  .chapter-story-card { min-height: 38px; padding-block: 5px; }
  .mission-map-heading { min-height: 37px; }
  .mission-list { min-height: 58px; max-height: 70px; }
  .mission-node { min-height: 56px; }
  .mission-node-icon { width: 33px; height: 33px; border-radius: 11px; font-size: 15px; }
  .briefing-modal { gap: 7px; padding: 12px; border-radius: 23px; }
  .briefing-location b { font-size: 13px; }
  .briefing-target-hero { min-height: 205px; padding-block: 11px; }
  .briefing-target-hero::before { width: 152px; height: 152px; }
  .briefing-target-hero::after { width: 182px; height: 182px; }
  .briefing-target-beacon { width: 94px; height: 94px; }
  .briefing-target-beacon span { font-size: 50px; }
  .briefing-target-hero > small { margin-top: 8px; }
  .briefing-target-hero > strong { font-size: 24px; }
  .briefing-target-hero h2 { font-size: 17px; }
  .briefing-route { min-height: 41px; }
  .briefing-crew-tip { min-height: 58px; grid-template-columns: 56px 1fr; }
  .briefing-screen .crew-portrait { width: 54px; height: 54px; border-radius: 15px; }
  .briefing-screen .dialogue-card { min-height: 43px; padding: 6px 8px; }
  .briefing-modal > .primary-button { min-height: 46px; }
}

@media (min-width: 481px) { #app { border-radius: 28px; height: min(92vh, 900px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

html.high-contrast {
  --ink: #ffffff;
  --muted: #d8dbea;
  --panel: #0d1020;
  --deep: #02040b;
}
html.high-contrast #app { background: radial-gradient(circle at 50% -10%, #241c51 0, #080b18 36%, #02040b 72%); }
html.high-contrast .panel-screen { background: radial-gradient(circle at top, #241d4d, #03050d 48%); }
html.high-contrast .settings-list label,
html.high-contrast .settings-list button,
html.high-contrast .how-list article,
html.high-contrast .privacy-list article,
html.high-contrast .contract-card,
html.high-contrast .operation-card,
html.high-contrast .shop-card { border-color: #ffffff52; background-color: #090c18; }
html.high-contrast .settings-list small,
html.high-contrast .privacy-list p,
html.high-contrast .credits,
html.high-contrast .panel-subtitle { color: #e2e5f2; }
html.high-contrast .icon-button,
html.high-contrast .back-button,
html.high-contrast .pause-button { border-color: #ffffff70; background: #ffffff17; }
html.high-contrast .settings-list label i { outline: 2px solid #ffffff8a; outline-offset: 1px; }

/* Mission identity stays visible without adding another instruction panel. */
#game[data-mode="loot"] .mechanic-hud { border-color: rgba(255, 222, 105, .72); box-shadow: 0 10px 30px rgba(255, 204, 66, .14); }
#game[data-mode="loot"] .mechanic-hud span { color: #ffe66d; }
#game[data-mode="stealth"] .mechanic-hud { border-color: rgba(91, 241, 208, .72); box-shadow: 0 10px 30px rgba(45, 214, 182, .14); }
#game[data-mode="stealth"] .mechanic-hud span { color: #67f1da; }
#game[data-mode="chase"] .mechanic-hud { border-color: rgba(255, 105, 136, .76); box-shadow: 0 10px 30px rgba(255, 63, 110, .16); }
#game[data-mode="chase"] .mechanic-hud span { color: #ff6f91; }
#game[data-mode="collect"] .mechanic-hud { border-color: rgba(121, 186, 255, .72); box-shadow: 0 10px 30px rgba(82, 153, 255, .14); }
#game[data-mode="collect"] .mechanic-hud span { color: #80c2ff; }

/* 12.5.0 — unified premium menu and control system */
:root {
  --ui-void: #070911;
  --ui-surface: #121624;
  --ui-surface-raised: #1a2032;
  --ui-rim: rgba(255, 255, 255, .13);
  --ui-rim-bright: rgba(255, 255, 255, .24);
  --ui-shadow: 0 14px 34px rgba(0, 0, 0, .48);
  --ui-shadow-tight: 0 8px 20px rgba(0, 0, 0, .42);
  --ui-lime-dark: #6f9511;
  --ui-gold: #ffd769;
}

button {
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

button:focus-visible,
[role="button"]:focus-visible,
.settings-list label:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--cyan) 78%, white);
  outline-offset: 3px;
}

button:not(:disabled):active { filter: brightness(1.09) saturate(1.06); }
button:disabled,
button[aria-disabled="true"] { cursor: default; }

#app {
  background:
    radial-gradient(circle at 50% -12%, rgba(119, 77, 255, .34), transparent 36%),
    radial-gradient(circle at 105% 65%, rgba(64, 228, 255, .08), transparent 38%),
    linear-gradient(180deg, #101326 0%, var(--ui-void) 72%);
}

.panel-screen {
  background:
    radial-gradient(circle at 50% -8%, rgba(112, 71, 255, .27), transparent 34%),
    linear-gradient(180deg, #0f1322 0%, #080a13 62%, #06080f 100%);
}

.topbar,
.panel-header {
  min-height: 50px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(31, 37, 58, .9), rgba(13, 17, 29, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 28px rgba(0, 0, 0, .27);
  backdrop-filter: blur(18px) saturate(1.25);
}

#menu .topbar { background: linear-gradient(180deg, rgba(25, 30, 50, .7), rgba(10, 13, 24, .54)); }
.panel-header h2 { letter-spacing: .055em; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }

:is(.icon-button, .back-button, .pause-button) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #f5f7ff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025) 54%),
    #111625;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 5px rgba(0, 0, 0, .28), 0 7px 16px rgba(0, 0, 0, .32);
}

:is(.icon-button, .back-button, .pause-button):not(:disabled):active {
  transform: translateY(2px) scale(.97);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4), 0 3px 9px rgba(0, 0, 0, .28);
}

.back-button { color: #dce7ff; }
.pause-button { color: var(--lime); }

.level-badge,
.wallet,
.shop-wallet span,
.career-score,
.op-timer,
.night-reset-badge,
.case-ready-count {
  border: 1px solid rgba(255, 255, 255, .15);
  background: linear-gradient(180deg, rgba(22, 28, 45, .96), rgba(8, 11, 20, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 7px 16px rgba(0, 0, 0, .32);
}

.level-badge {
  color: var(--lime);
  border-color: rgba(206, 255, 66, .35);
}

.wallet,
.shop-wallet span { backdrop-filter: blur(12px); }
.wallet strong,
.shop-wallet b { text-shadow: 0 0 12px currentColor; }

.primary-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(239, 255, 180, .76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .44), transparent 34%),
    linear-gradient(135deg, #efff91 0%, #cfff37 48%, #a9e31c 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(69, 96, 5, .35), 0 6px 0 var(--ui-lime-dark), 0 14px 31px rgba(148, 212, 25, .24), 0 18px 35px rgba(0, 0, 0, .44);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.primary-button::after {
  content: "";
  position: absolute;
  inset: 1px 14px auto;
  height: 1px;
  opacity: .75;
  background: linear-gradient(90deg, transparent, white, transparent);
  pointer-events: none;
}

.primary-button:not(:disabled):active {
  transform: translateY(4px) scale(.992);
  box-shadow: inset 0 2px 6px rgba(74, 100, 6, .25), 0 2px 0 #607f11, 0 7px 18px rgba(0, 0, 0, .38);
}

.primary-button:disabled {
  color: #737a62;
  border-color: rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #2a2f38, #1a1e27);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 4px 0 #0b0e14;
  text-shadow: none;
}

:is(.secondary-button, .text-button, .crew-details-button, .shop-upgrade, .rewarded-button, .share-result-button, .rewarded-revive-button) {
  border-color: rgba(150, 170, 255, .24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012)),
    linear-gradient(135deg, rgba(30, 37, 61, .98), rgba(14, 18, 31, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .3);
}

:is(.secondary-button, .text-button, .crew-details-button, .shop-upgrade, .rewarded-button, .share-result-button, .rewarded-revive-button):not(:disabled):active {
  transform: translateY(2px) scale(.987);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .34), 0 3px 9px rgba(0, 0, 0, .25);
}

.text-button { border: 1px solid transparent; background: transparent; box-shadow: none; }
.text-button:focus-visible { border-color: rgba(64, 228, 255, .35); }

:is(.buy-button, .shop-buy, .operation-claim) {
  border: 1px solid rgba(238, 255, 181, .64);
  background: linear-gradient(180deg, #ebff8a, #b9ec2f 72%, #99cf16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px rgba(65, 89, 5, .26), 0 4px 0 #58790d, 0 9px 18px rgba(0, 0, 0, .34);
}

:is(.buy-button, .shop-buy, .operation-claim):not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 5px rgba(61, 83, 7, .24), 0 1px 0 #58790d, 0 5px 10px rgba(0, 0, 0, .3);
}

:is(.buy-button, .shop-buy, .operation-claim):disabled {
  color: #727887;
  border-color: rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #2a2f3b, #1b1f29);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 3px 0 #0b0e14;
}

.raid-button {
  border: 1px solid rgba(255, 170, 197, .62);
  background: linear-gradient(180deg, #ff79ab, #e63c7d 72%, #b6215b);
  box-shadow: inset 0 1px rgba(255, 255, 255, .42), inset 0 -2px rgba(92, 6, 42, .3), 0 4px 0 #78153c, 0 9px 18px rgba(0, 0, 0, .34);
}

.raid-button:not(:disabled):active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(92, 6, 42, .32), 0 1px 0 #78153c, 0 5px 10px rgba(0, 0, 0, .3); }

.rival-match-action button {
  border: 1px solid color-mix(in srgb, var(--match-accent) 70%, white 18%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--match-accent) 70%, white), var(--match-accent));
  box-shadow: inset 0 1px rgba(255, 255, 255, .44), 0 4px 0 color-mix(in srgb, var(--match-accent) 48%, black), 0 9px 18px rgba(0, 0, 0, .3);
}

.rival-armory-card button {
  box-shadow: inset 0 1px rgba(255, 255, 255, .32), 0 4px 0 color-mix(in srgb, var(--armory-accent) 45%, black), 0 9px 16px rgba(0, 0, 0, .3);
}

#dialSetButton {
  background: linear-gradient(180deg, #ffe99d, #ffd05b 72%, #e4a92f);
  box-shadow: inset 0 1px rgba(255, 255, 255, .65), 0 4px 0 #896018, 0 9px 18px rgba(0, 0, 0, .34);
}

.raid-plan-card .primary-button {
  border-color: rgba(205, 253, 255, .82);
  background: linear-gradient(180deg, #d8feff, #70eef5 58%, #36cbd6);
  box-shadow: inset 0 1px #fff, inset 0 -3px rgba(2, 102, 112, .28), 0 6px 0 #147c86, 0 14px 31px rgba(69, 228, 237, .25), 0 18px 35px rgba(0, 0, 0, .44);
}

#menu .menu-actions { position: relative; }

#menu .secondary-button,
#menu .feature-button,
#menu .daily-card,
#menu .money-store-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .16);
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 91, 255, .17), transparent 48%),
    linear-gradient(145deg, rgba(29, 35, 57, .95), rgba(12, 15, 26, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .35), var(--ui-shadow-tight);
}

#menu .feature-button > span {
  border: 1px solid rgba(143, 113, 255, .44);
  background: linear-gradient(145deg, rgba(130, 91, 255, .4), rgba(73, 44, 151, .19));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 5px 12px rgba(64, 41, 128, .3);
}

#menu #shopButton > span { color: #76f6df; border-color: rgba(112, 244, 232, .4); background: linear-gradient(145deg, rgba(55, 218, 195, .3), rgba(13, 92, 87, .16)); }
#menu #rivalsButton > span { color: #92eaff; border-color: rgba(64, 228, 255, .42); background: linear-gradient(145deg, rgba(54, 176, 255, .3), rgba(43, 48, 153, .17)); }
#menu #wantedButton > span { color: #ff91ad; border-color: rgba(255, 92, 133, .42); background: linear-gradient(145deg, rgba(255, 75, 139, .3), rgba(128, 31, 72, .16)); }

#menu .feature-progress {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 3px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  pointer-events: none;
}

#menu .feature-progress u {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

#menu .feature-progress u.done { background: #d2ff4e; box-shadow: 0 0 7px rgba(210, 255, 78, .6); }
#menu .feature-progress u.next { background: #ff7599; box-shadow: 0 0 8px rgba(255, 117, 153, .7); animation: feature-next-pulse 1s ease-in-out infinite alternate; }
@keyframes feature-next-pulse { to { filter: brightness(1.45); transform: scaleY(1.55); } }

#menu :is(.secondary-button, .feature-button, .daily-card, .money-store-card):not(:disabled):active {
  transform: translateY(2px) scale(.985);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .36), 0 4px 10px rgba(0, 0, 0, .28);
}

#menu .daily-card {
  border-color: rgba(118, 89, 224, .48);
  background:
    radial-gradient(circle at 0 50%, rgba(118, 85, 224, .25), transparent 40%),
    linear-gradient(135deg, rgba(31, 28, 58, .98), rgba(12, 15, 26, .98));
}

.shop-tabs {
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, #090c15, #111624);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55), 0 7px 17px rgba(0, 0, 0, .28);
}

.shop-tabs button {
  position: relative;
  border: 1px solid transparent;
}

.shop-tabs button.active {
  border-color: rgba(194, 178, 255, .5);
  background: linear-gradient(180deg, #9375ff, #6541dc);
  box-shadow: inset 0 1px rgba(255, 255, 255, .26), 0 4px 12px rgba(112, 71, 255, .36);
}

.shop-tabs button:not(.active):not(:disabled):active { background: rgba(255, 255, 255, .07); }

:is(.shop-card, .upgrade-card, .operation-card, .achievement-card, .contract-card, .approach-card, .chapter-map-card, .chapter-story-card, .night-job-tile, .rival-match-card, .rival-armory-card, .rival-exchange-hero, .daily-heist-card, .quest-panel, .weekly-card, .case-pass-card, .crew-command-card, .story-files-link, .settings-list > label, .settings-list > button) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .26), 0 10px 25px rgba(0, 0, 0, .34);
}

:is(.shop-card, .upgrade-card, .operation-card, .achievement-card, .contract-card, .approach-card, .night-job-tile, .rival-match-card, .rival-armory-card, .chapter-story-card, .story-files-link, .settings-list > button):not(.locked):not(.claimed):active {
  transform: translateY(2px) scale(.99);
}

:is(.shop-card.equipped, .contract-card.selected, .approach-card.selected, .chapter-map-card.active, .night-job-tile.selected, .rival-stake-choices button.selected) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px color-mix(in srgb, var(--lime) 56%, transparent), 0 0 25px rgba(206, 255, 66, .16), 0 13px 28px rgba(0, 0, 0, .4);
}

:is(.locked, button:disabled, [aria-disabled="true"]) { filter: grayscale(.42) saturate(.7); }
:is(.locked, button:disabled, [aria-disabled="true"]) :is(img, .shop-item-icon, .contract-art) { filter: saturate(.48) brightness(.74); }

.settings-list label,
.settings-list button {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .055), transparent 44%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface));
}

.settings-list label i {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .24);
}

.settings-list label i::after {
  box-shadow: inset 0 1px 0 white, 0 2px 7px rgba(0, 0, 0, .55);
}

.settings-list input:checked + i {
  background: linear-gradient(90deg, #7651ee, #9b7aff);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 0 14px rgba(123, 77, 255, .28);
}

:is(.result-card, .pause-card, .challenge-card, .raid-plan-card, .crew-detail-card, .tactical-card, .reward-card, .level-guide-card, .revive-card, .stealth-brief-card, .manhunt-result-card) {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 85px rgba(0, 0, 0, .78), 0 0 0 1px rgba(0, 0, 0, .4);
}

.overlay {
  background: radial-gradient(circle at 50% 42%, rgba(76, 59, 137, .2), transparent 46%), rgba(3, 5, 11, .84);
  backdrop-filter: blur(9px) saturate(.9);
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover { filter: brightness(1.08) saturate(1.08); }
  :is(.feature-button, .secondary-button, .daily-card, .chapter-story-card, .night-job-tile, .settings-list button):not(:disabled):hover { border-color: var(--ui-rim-bright); transform: translateY(-1px); }
  .primary-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(69, 96, 5, .35), 0 7px 0 var(--ui-lime-dark), 0 18px 38px rgba(148, 212, 25, .3), 0 20px 42px rgba(0, 0, 0, .46); }
}

@media (max-width: 380px) {
  .topbar,
  .panel-header { min-height: 44px; padding: 4px 5px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none !important; }
  button:active { transform: none !important; }
}

/* 12.5.1 — key-art-first phone composition */
#menu {
  isolation: isolate;
  padding: max(12px, env(safe-area-inset-top)) 14px max(9px, env(safe-area-inset-bottom));
  background: #070914;
}

.art-ready #menu .menu-art { opacity: 1; }
#menu .menu-art img {
  object-position: 50% 48%;
  transform: scale(1.012);
  filter: saturate(1.14) contrast(1.05) brightness(1.04);
}

#menu .menu-art::before {
  opacity: .2;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--style-main, #a17aff) 38%, transparent), transparent 54%);
}

#menu .menu-art::after {
  background:
    linear-gradient(180deg, rgba(3, 5, 14, .72) 0%, rgba(3, 5, 14, .13) 17%, transparent 43%, rgba(4, 6, 14, .08) 68%, rgba(4, 6, 13, .58) 86%, rgba(3, 5, 11, .88) 100%),
    linear-gradient(90deg, rgba(2, 4, 11, .2), transparent 24% 76%, rgba(2, 4, 11, .2));
}

#menu .menu-glow { display: none; }

#menu .topbar {
  min-height: 46px;
  padding: 3px 5px;
  border-color: rgba(211, 226, 255, .18);
  background: linear-gradient(180deg, rgba(15, 20, 36, .76), rgba(7, 10, 20, .48));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 8px 24px rgba(0, 0, 0, .22);
  backdrop-filter: blur(7px) saturate(1.15);
}

#menu .brand {
  position: absolute;
  z-index: 2;
  top: calc(max(12px, env(safe-area-inset-top)) + 58px);
  left: 18px;
  margin: 0;
  text-align: left;
  pointer-events: none;
}

#menu .brand h1 {
  margin: 0;
  font-size: clamp(36px, 10.6vw, 48px);
  line-height: .76;
  letter-spacing: -.075em;
  text-shadow: 0 4px 0 #03040a, 0 0 20px rgba(123, 77, 255, .42);
}

.art-ready #menu .brand h1 { text-shadow: 0 4px 0 #03040a, 0 0 20px rgba(123, 77, 255, .42); }
#menu .mascot { display: none; }

#menu .menu-actions {
  width: 100%;
  margin-top: auto;
  padding: 8px;
  gap: 5px;
  border: 1px solid rgba(198, 211, 255, .19);
  border-radius: 23px;
  background:
    linear-gradient(180deg, rgba(10, 13, 25, .34), rgba(5, 7, 15, .73)),
    linear-gradient(120deg, rgba(123, 77, 255, .1), transparent 45%, rgba(64, 228, 255, .07));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 18px 48px rgba(0, 0, 0, .44);
  backdrop-filter: blur(4px) saturate(1.08);
}

#menu .primary-button {
  min-height: 50px;
  border-radius: 15px;
  border-color: rgba(244, 255, 201, .86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 35%),
    linear-gradient(110deg, #e8ff73, #c9ff2e 52%, #9edd18);
  box-shadow: inset 0 1px #fff, inset 0 -3px rgba(57, 86, 3, .3), 0 5px 0 #62870d, 0 10px 24px rgba(165, 231, 27, .27);
  font-size: 12px;
}

#menu .primary-button small { margin-top: 1px; font-size: 7px; letter-spacing: .08em; }
#menu .primary-button .clean-streak-progress { min-height: 6px; margin-top: 3px; display: grid; grid-template-columns: repeat(3, 15px) auto; align-items: center; justify-content: center; gap: 3px; color: #385305; font-style: normal; }
#menu .clean-streak-progress > u { width: 15px; height: 3px; border-radius: 99px; background: #24400642; box-shadow: inset 0 0 0 1px #41690a22; text-decoration: none; }
#menu .clean-streak-progress > u.on { background: #2d5205; box-shadow: 0 0 5px #2d520588; }
#menu .clean-streak-progress > b { margin-left: 2px; font-size: 4.8px; line-height: 1; letter-spacing: .07em; white-space: nowrap; }
#menu .clean-streak-progress.rewarded > u { background: #fff3a0; box-shadow: 0 0 7px #fff3a0aa; }

#menu .secondary-row { gap: 5px; }
#menu .secondary-button {
  min-height: 31px;
  border-radius: 10px;
  border-color: rgba(185, 196, 234, .18);
  color: #d9deef;
  background: linear-gradient(180deg, rgba(37, 44, 67, .65), rgba(13, 17, 29, .58));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 4px 10px rgba(0, 0, 0, .2);
  font-size: 8px;
}

#menu .secondary-button span { color: #b596ff; }
#menu .feature-row { gap: 5px; }

#menu .feature-button,
#menu .feature-button.wanted-feature {
  min-height: 51px;
  padding: 4px 3px 5px;
  gap: 2px;
  border-radius: 13px;
  border-color: rgba(255, 255, 255, .13);
  background: linear-gradient(180deg, rgba(28, 35, 55, .62), rgba(8, 11, 21, .58));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 5px 12px rgba(0, 0, 0, .22);
  backdrop-filter: none;
}

#menu .feature-button > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 0 17px currentColor;
}

#menu .feature-button b { font-size: 7px; letter-spacing: .045em; }

#menu .daily-card {
  min-height: 37px;
  padding: 4px 8px;
  grid-template-columns: 28px 1fr auto;
  border-radius: 11px;
  border-color: rgba(144, 116, 255, .34);
  background: linear-gradient(90deg, rgba(93, 62, 176, .33), rgba(11, 14, 26, .6));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 4px 11px rgba(0, 0, 0, .2);
  backdrop-filter: none;
}

#menu .daily-icon { width: 25px; height: 25px; border-radius: 8px; font-size: 11px; }
#menu .daily-card b { font-size: 8px; }
#menu .daily-state { font-size: 8px; }

#menu .money-store-card {
  min-height: 35px;
  padding: 3px 7px;
  grid-template-columns: 27px 1fr auto;
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(98, 66, 27, .52), rgba(13, 16, 28, .6));
  backdrop-filter: none;
}

#menu .money-store-icon { width: 26px; height: 26px; }
#menu .money-store-icon.currency-pair .currency-icon { width: 20px; height: 20px; }
#menu .money-store-card b { font-size: 8px; }
#menu .money-store-card strong { padding: 6px 8px; }
.art-ready #menu :is(.primary-button, .secondary-button, .feature-button, .daily-card, .money-store-card) { backdrop-filter: none; }

/* Every destination carries one unmistakable color signature. */
#contracts { --screen-accent: #ffd867; }
#shop { --screen-accent: #69f3dd; }
#rivals { --screen-accent: #62eaff; }
#wanted { --screen-accent: #d4ff54; }
#operations { --screen-accent: #af8bff; }
#caseboard { --screen-accent: #73ead1; }
#career { --screen-accent: #ffc665; }
#approach { --screen-accent: #68e8ff; }
#upgrades { --screen-accent: #d1ff48; }
#how { --screen-accent: #ff779d; }
#settings, #privacy { --screen-accent: #a789ff; }

.panel-screen {
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--screen-accent, #7b4dff) 21%, transparent), transparent 34%),
    linear-gradient(180deg, #0e1220, #070a12 68%);
}

.panel-screen .panel-header {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--screen-accent, #7b4dff) 35%, rgba(255, 255, 255, .12));
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--screen-accent, #7b4dff) 12%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(31, 37, 58, .94), rgba(12, 16, 28, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .32);
}

.panel-screen .panel-header::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--screen-accent, #7b4dff), transparent);
  box-shadow: 0 0 11px var(--screen-accent, #7b4dff);
}

.panel-screen .back-button {
  color: var(--screen-accent, #dce7ff);
  border-color: color-mix(in srgb, var(--screen-accent, #7b4dff) 38%, transparent);
  background: color-mix(in srgb, var(--screen-accent, #7b4dff) 8%, #101522);
}

.panel-screen .panel-header h2 { color: #f9fbff; text-shadow: 0 0 16px color-mix(in srgb, var(--screen-accent, #7b4dff) 34%, transparent); }

@media (max-height: 760px) {
  #menu .brand { top: calc(max(10px, env(safe-area-inset-top)) + 52px); }
  #menu .brand h1 { font-size: 32px; }
  #menu .menu-actions { padding: 6px; gap: 4px; border-radius: 19px; }
  #menu .primary-button { min-height: 44px; }
  #menu .secondary-button { min-height: 28px; }
  #menu .feature-button,
  #menu .feature-button.wanted-feature { min-height: 45px; grid-template-rows: 25px auto; }
  #menu .feature-button > span { width: 24px; height: 24px; }
  #menu .daily-card { min-height: 33px; }
  #menu .money-store-card { min-height: 32px; }
}

@media (max-width: 380px) {
  #menu { padding-inline: 9px; }
  #menu .brand { left: 12px; }
  #menu .topbar { min-height: 42px; }
  #menu .menu-actions { padding: 6px; }
}

/* 12.7.0 — visual-first interface: less copy, stronger art and clearer hierarchy */
.panel-screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 7%, color-mix(in srgb, var(--screen-accent, #7b4dff) 28%, transparent), transparent 27%),
    radial-gradient(circle at 92% 34%, color-mix(in srgb, var(--screen-accent, #7b4dff) 9%, transparent), transparent 32%),
    linear-gradient(165deg, #11172a 0%, #080b14 54%, #05070d 100%);
}

.panel-screen::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 48px 0 0;
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(120deg, transparent 0 12%, color-mix(in srgb, var(--screen-accent, #7b4dff) 13%, transparent) 12.2% 12.6%, transparent 12.8% 70%, color-mix(in srgb, var(--screen-accent, #7b4dff) 8%, transparent) 70.2% 70.5%, transparent 70.7%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .018) 40px);
  mask-image: linear-gradient(180deg, black, transparent 82%);
}

.panel-screen > * { position: relative; z-index: 1; }

.panel-screen .panel-header {
  min-height: 54px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 130%, color-mix(in srgb, var(--screen-accent, #7b4dff) 22%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(34, 42, 67, .97), rgba(11, 15, 28, .95));
}

.panel-screen .panel-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
}

.panel-screen .panel-header h2::before {
  content: "◆";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--screen-accent, #7b4dff) 55%, white 6%);
  border-radius: 9px;
  color: var(--screen-accent, #7b4dff);
  background: color-mix(in srgb, var(--screen-accent, #7b4dff) 12%, #0b0f1c);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 16px color-mix(in srgb, var(--screen-accent, #7b4dff) 24%, transparent);
  font-size: 12px;
  font-style: normal;
}

#contracts .panel-header h2::before { content: "◇"; }
#shop .panel-header h2::before { content: "◈"; }
#rivals .panel-header h2::before { content: "♛"; }
#wanted .panel-header h2::before { content: "♦"; }
#operations .panel-header h2::before { content: "↟"; }
#caseboard .panel-header h2::before { content: "▦"; }
#career .panel-header h2::before { content: "★"; }
#approach .panel-header h2::before { content: "⌖"; }
#upgrades .panel-header h2::before { content: "▲"; }
#how .panel-header h2::before { content: "?"; }
#settings .panel-header h2::before { content: "⚙"; }
#privacy .panel-header h2::before { content: "◌"; }

#menu .menu-actions {
  padding: 7px;
  gap: 4px;
  border-color: rgba(209, 221, 255, .22);
  background:
    linear-gradient(180deg, rgba(9, 13, 27, .2), rgba(4, 6, 15, .72)),
    radial-gradient(circle at 15% 0%, rgba(125, 81, 255, .2), transparent 42%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 20px 55px rgba(0, 0, 0, .5);
}

#menu .primary-button { min-height: 48px; font-size: 14px; letter-spacing: .09em; }
#menu .primary-button span::before { content: "▶"; margin-right: 7px; font-size: 9px; }
#menu .feature-button small,
#menu .daily-card small { display: none; }

#menu .feature-button,
#menu .feature-button.wanted-feature {
  min-height: 57px;
  grid-template-rows: 34px auto;
  gap: 3px;
  border-color: rgba(198, 211, 255, .18);
  background:
    linear-gradient(180deg, rgba(37, 46, 72, .7), rgba(7, 10, 21, .68)),
    radial-gradient(circle at 50% 0%, currentColor, transparent 62%);
}

#menu .feature-button > span {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 15px;
  transform: rotate(-3deg);
}

#menu .feature-button b { font-size: 8px; letter-spacing: .09em; }
#menu .daily-card { min-height: 35px; }
#menu .money-store-card { min-height: 34px; }

:is(.chapter-story-card, .shop-card, .upgrade-card, .operation-card, .achievement-card, .approach-card, .night-job-tile, .rival-match-card, .rival-armory-card, .daily-heist-card, .quest-panel, .case-pass-card, .story-files-link, .settings-list > label, .settings-list > button) {
  border-color: color-mix(in srgb, var(--screen-accent, #7b4dff) 25%, rgba(255, 255, 255, .1));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .09),
    inset 4px 0 18px color-mix(in srgb, var(--screen-accent, #7b4dff) 6%, transparent),
    0 12px 29px rgba(0, 0, 0, .38);
}

#chapterStoryText,
.night-job-explainer > p,
.night-prize-panel > small,
.quest-panel-note,
.case-hero p,
.case-pass-card p,
.case-footnote,
.career-note,
.achievement-copy p,
.tactical-option p,
.result-story,
.result-approach,
.result-tactic,
.share-result-button small,
.rewarded-button small { display: none !important; }

.chapter-story-card {
  min-height: 58px;
  grid-template-columns: 1fr auto;
  background:
    radial-gradient(circle at 0 50%, rgba(255, 208, 82, .18), transparent 37%),
    linear-gradient(110deg, #29231e, #131728 70%);
}

.chapter-story-card > span::before {
  content: "▦";
  float: left;
  width: 34px;
  height: 34px;
  margin-right: 9px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 218, 112, .45);
  border-radius: 10px;
  color: #ffd968;
  background: rgba(255, 211, 83, .1);
  font-size: 15px;
}

.night-job-explainer { padding: 10px; }
.night-how-route { margin-top: 8px; }
.night-how-route > span {
  min-height: 66px;
  border-color: rgba(112, 239, 228, .26);
  background: linear-gradient(180deg, rgba(37, 80, 77, .35), rgba(7, 17, 23, .72));
}
.night-how-route > span > i { filter: drop-shadow(0 0 9px rgba(112, 239, 228, .46)); }
.night-how-route small { display: none; }
.night-prize-panel { padding-bottom: 10px; }

.daily-heist-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 18%, rgba(181, 137, 255, .26), transparent 36%),
    linear-gradient(145deg, rgba(36, 31, 67, .98), rgba(10, 15, 27, .98));
}

.daily-heist-target > span {
  transform: rotate(-5deg);
  box-shadow: inset 0 1px rgba(255, 255, 255, .19), 0 0 26px rgba(174, 128, 255, .3), 0 12px 25px rgba(0, 0, 0, .4);
}

.daily-heist-target p { color: #d9d1ee; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.daily-heist-rules span { border-radius: 9px; background: rgba(174, 132, 255, .1); }
.daily-heist-start { min-height: 48px; }
.daily-heist-start small { font-size: 7px; }

.operation-card,
.achievement-card {
  min-height: 68px;
  overflow: hidden;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--screen-accent, #7b4dff) 8%, transparent), transparent 48%),
    rgba(17, 22, 38, .94);
}

.operation-icon,
.achievement-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 20px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 0 18px color-mix(in srgb, var(--screen-accent, #7b4dff) 18%, transparent);
}

.achievement-copy small { margin-top: 2px; }
.achievement-meter { height: 6px; }

.case-hero {
  min-height: 108px;
  background:
    radial-gradient(circle at 5% 50%, rgba(73, 224, 197, .33), transparent 38%),
    linear-gradient(125deg, #223d43, #131629 72%);
}

.case-seal { transform: rotate(-3deg); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .14), 0 0 26px rgba(90, 235, 207, .22), 0 13px 28px rgba(0, 0, 0, .52); }
.case-tier-copy p { max-height: 26px; overflow: hidden; }
.case-tier:not(.locked) .case-tier-copy p { display: none; }
.case-tier:not(.locked) { min-height: 104px; }

.career-hero {
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 196, 91, .3), transparent 39%),
    linear-gradient(115deg, #382b1e, #15172a 70%);
}
.career-emblem { transform: rotate(-4deg); box-shadow: 0 0 28px rgba(255, 201, 99, .27), 0 12px 26px rgba(0, 0, 0, .42); }

.shop-card { overflow: hidden; }
.shop-card:not(.deal-card) { min-height: 106px; }
.shop-card.gear,
.shop-card.crew,
.shop-card.lab { grid-template-columns: 74px minmax(0, 1fr) auto; }
.shop-card.crew .shop-item-icon,
.shop-card.style .shop-item-icon { width: 70px; height: 70px; }
.shop-card h3 { margin-bottom: 5px; font-size: 12px; }
.shop-card-badge { display: none; }
.shop-card-badge:nth-last-child(-n + 2) { display: block; }
.perk-visual { min-height: 31px; margin-top: 3px; }
.shop-effect-value { margin-top: 4px !important; padding: 5px 7px; }
.shop-effect-value small { display: none; }
.shop-effect-value b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 7px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.deal-impact { min-height: 25px; }
.deal-trust-banner { min-height: 58px; padding: 8px 10px; }
.billing-status { font-size: 7px; }

.how-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.how-list article {
  min-height: 112px;
  padding: 11px 8px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 118, 158, .16), transparent 48%),
    linear-gradient(145deg, #1d2037, #10131f);
}

.how-list article > span {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 126, 165, .45);
  border-radius: 17px;
  background: linear-gradient(145deg, #a36cff, #4c31a9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 0 21px rgba(139, 86, 255, .32);
  font-size: 21px;
}
.how-list .how-rush > span { color: #251604; border-color: #ffd7629c; background: linear-gradient(145deg, #fff2a3, #ffad29); box-shadow: inset 0 1px #fff, 0 0 22px #ffb52f5c; }
.how-list .how-route > span { color: #071716; border-color: #70f4e89c; background: linear-gradient(145deg, #a7fff4, #45cfda); box-shadow: inset 0 1px #fff, 0 0 22px #45e0d653; }

.how-list h3 { margin: 0; font-size: 10px; letter-spacing: .1em; }
.how-list p { color: #b9bbca; font-size: 8px; font-weight: 800; }

.settings-list { gap: 8px; margin-top: 12px; }
.settings-list label,
.settings-list button { min-height: 61px; padding: 9px 11px; gap: 9px; }
.settings-list label::before,
.settings-list button::before {
  content: "◆";
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--screen-accent, #a789ff) 45%, transparent);
  border-radius: 12px;
  color: var(--screen-accent, #a789ff);
  background: color-mix(in srgb, var(--screen-accent, #a789ff) 12%, #0b0e19);
  box-shadow: 0 0 16px color-mix(in srgb, var(--screen-accent, #a789ff) 18%, transparent);
  font-size: 13px;
}
.settings-list label:nth-child(1)::before { content: "♪"; }
.settings-list label:nth-child(2)::before { content: "≈"; }
.settings-list .graphics-setting::before { content: "◈"; }
.settings-list label:nth-child(4)::before { content: "◌"; }
.settings-list label:nth-child(5)::before { content: "◐"; }
.settings-list label:nth-child(6)::before { content: "⌁"; }
.settings-list > :is(label, button) > span { flex: 1 1 auto; }
.settings-list b { font-size: 11px; }
.settings-list small { font-size: 7px; line-height: 1.3; }
.settings-list > button > em {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
.settings-list .graphics-setting em { min-width: 61px; padding: 6px 8px; border: 1px solid #68ecff55; border-radius: 99px; color: #68ecff; background: #102733; text-align: center; }
.settings-list .graphics-setting[data-mode="performance"] em { color: #ceff42; border-color: #ceff4255; background: #21301a; }
.settings-list .graphics-setting[data-mode="quality"] em { color: #d3b3ff; border-color: #b98cff55; background: #271d3c; }

@media (max-width: 340px) {
  .settings-list > button > em { font-size: 8px; letter-spacing: -.015em; }
}

.result-card {
  position: relative;
  background:
    radial-gradient(circle at 50% 16%, rgba(205, 255, 72, .16), transparent 33%),
    radial-gradient(circle at 100% 55%, rgba(123, 77, 255, .15), transparent 38%),
    linear-gradient(160deg, #1a2034, #090c16 72%);
}
.result-card > h2 { text-shadow: 0 0 24px rgba(205, 255, 72, .28); }
.result-card:has(.result-grade.show) > h2 { padding-inline: 42px; }
.result-grade {
  --grade-color: #8f9aae;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 43px;
  height: 49px;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 4px;
  gap: 2px;
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--grade-color) 68%, transparent);
  border-radius: 13px 13px 13px 5px;
  color: var(--grade-color);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--grade-color) 18%, transparent), transparent 65%), #090d17e8;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 22px color-mix(in srgb, var(--grade-color) 24%, transparent), 0 9px 20px rgba(0, 0, 0, .38);
}
.result-grade.show { display: grid; animation: grade-drop .42s cubic-bezier(.2, .9, .25, 1.25) both; }
.result-grade span { grid-column: 1 / 4; align-self: center; font-size: 25px; font-style: italic; font-weight: 1000; line-height: 1; text-shadow: 0 0 15px currentColor; }
.result-grade i { border-radius: 3px; background: rgba(255, 255, 255, .1); }
.result-grade i.on { background: var(--grade-color); box-shadow: 0 0 7px var(--grade-color); }
.result-grade[data-grade="S"] { --grade-color: #d7ff51; }
.result-grade[data-grade="A"] { --grade-color: #6ef3df; }
.result-grade[data-grade="B"] { --grade-color: #70c8ff; }
.result-grade[data-grade="C"] { --grade-color: #c09cff; }
.result-grade[data-grade="D"] { --grade-color: #ff6f8e; }
@keyframes grade-drop { from { opacity: 0; transform: translateY(-9px) rotate(8deg) scale(.72); } }
.score-ring { box-shadow: inset 0 0 22px rgba(206, 255, 66, .1), 0 0 31px rgba(206, 255, 66, .13); }
.share-result-button,
.rewarded-button { min-height: 44px; }

.tactical-option { min-height: 78px; }
.tactical-trade { margin-top: 7px; }

@media (max-width: 380px) {
  .panel-screen .panel-header h2 { gap: 5px; font-size: 14px; }
  .panel-screen .panel-header h2::before { width: 25px; height: 25px; }
  .shop-card.gear,
  .shop-card.crew,
  .shop-card.lab { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 7px; }
  .shop-card.gear .shop-item-icon.gear-art,
  .shop-card.crew .shop-item-icon,
  .shop-card.style .shop-item-icon { width: 62px; height: 62px; }
  .shop-actions { min-width: 70px; }
  .how-list article { min-height: 102px; }
}

@media (max-height: 720px) {
  #menu .feature-button,
  #menu .feature-button.wanted-feature { min-height: 49px; grid-template-rows: 28px auto; }
  #menu .feature-button > span { width: 28px; height: 28px; }
  .how-list article { min-height: 94px; }
}

/* 12.7.1 — keep Daily Survival content full-height inside its scrollable screen. */
.operations-screen > :is(.daily-heist-card, .quest-panel, .story-files-link) {
  flex: 0 0 auto;
}

/* 12.9.0 — tactile phone UI, visual action feedback, compact grades and Night Job progress. */
.panel-screen > * { flex-shrink: 0; min-width: 0; }
.panel-screen :is(button, .shop-card, .operation-card, .achievement-card, .night-job-tile, .rival-match-card, .rival-armory-card) {
  -webkit-tap-highlight-color: transparent;
}
.panel-screen :is(button, .night-job-tile, .rival-match-card):active:not(:disabled) {
  transform: translateY(1px) scale(.992);
  filter: brightness(1.08);
}
.panel-screen :is(b, small, p, em, span) { overflow-wrap: anywhere; }
.panel-screen .shop-wallet b { overflow-wrap: normal; word-break: normal; white-space: nowrap; }

.stealth-job-contract {
  position: absolute;
  top: 13px;
  left: 76px;
  right: 91px;
  min-height: 34px;
  padding: 6px 9px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(202, 255, 69, .38);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(12, 25, 20, .92), rgba(7, 12, 18, .78));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 8px 18px rgba(0, 0, 0, .35);
}
.stealth-job-contract small,
.stealth-job-contract b { display: block; }
.stealth-job-contract small { color: #77958b; font-size: 5px; letter-spacing: .13em; }
.stealth-job-contract b { margin-top: 2px; color: #e9ffc0; font-size: 7px; letter-spacing: .06em; }
.night-job-tile span small { color: #9debdc; }
.stealth-loot b { color: #dfff83; font-size: 9px; }
.stealth-brief-lesson {
  display: block;
  margin: 0 0 11px;
  padding: 8px 9px;
  border: 1px solid rgba(202, 255, 69, .34);
  border-radius: 10px;
  color: #e8ffb2;
  background: rgba(202, 255, 69, .07);
  font-size: 7px;
  letter-spacing: .08em;
}

.rival-empty-exchange.compact {
  min-height: 56px;
  padding: 9px 12px;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  gap: 1px 8px;
  text-align: left;
}
.rival-empty-exchange.compact span { grid-row: 1 / 3; font-size: 20px; }
.rival-empty-exchange.compact b { font-size: 8px; }
.rival-empty-exchange.compact small { font-size: 6px; }
.rival-match-card:has(.rival-match-action b:first-child) { position: relative; }
.rival-match-card.incoming::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--match-accent) 7%, transparent);
}

.result-unlock.show {
  position: relative;
  min-height: 46px;
  padding: 9px 10px 9px 47px;
  display: grid;
  align-items: center;
  border-color: color-mix(in srgb, var(--unlock-color, #ffd88f) 45%, transparent);
  color: #f7fbff;
  background: linear-gradient(110deg, color-mix(in srgb, var(--unlock-color, #ffd88f) 18%, #101522), #0b0f1a);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 24px rgba(0, 0, 0, .32);
  line-height: 1.25;
}
.result-unlock.show::before {
  content: "◆";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--unlock-color, #ffd88f) 58%, transparent);
  border-radius: 10px;
  color: var(--unlock-color, #ffd88f);
  background: color-mix(in srgb, var(--unlock-color, #ffd88f) 12%, #080b13);
  box-shadow: 0 0 18px color-mix(in srgb, var(--unlock-color, #ffd88f) 28%, transparent);
}
.result-unlock[data-kind="chapter"] { --unlock-color: #ceff42; }
.result-unlock[data-kind="chapter"]::before { content: "★"; animation: result-unlock-pulse .7s ease-out 2 alternate; }
.result-unlock[data-kind="mode"] { --unlock-color: #40e4ff; }
.result-unlock[data-kind="mode"]::before { content: "◆"; animation: result-unlock-pulse .7s ease-out 2 alternate; }
.result-unlock[data-kind="mastery"] { --unlock-color: #d397ff; }
.result-unlock[data-kind="mastery"]::before { content: "M"; }
.result-unlock[data-kind="support"] { --unlock-color: #70f4e8; }
.result-unlock[data-kind="support"]::before { content: "↻"; }
.result-unlock[data-kind="career"] { --unlock-color: #ffbf62; }
.result-unlock[data-kind="career"]::before { content: "♛"; }
.result-unlock[data-kind="rival"] { --unlock-color: #61f3ff; }
.result-unlock[data-kind="rival"]::before { content: "⚡"; }
@keyframes result-unlock-pulse { to { transform: scale(1.12) rotate(5deg); filter: brightness(1.25); } }

@media (max-width: 380px) {
  .rivals-screen { padding-inline: 8px; }
  .rival-exchange-hero { grid-template-columns: 58px minmax(0, 1fr) 86px; gap: 7px; padding: 9px; }
  .rival-pot-visual { transform: scale(.88); }
  .rival-post-button { min-width: 0; padding-inline: 6px; }
  .rival-recipient-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rival-recipient-card { padding: 6px; gap: 5px; }
  .rival-recipient-card > span { width: 27px; height: 27px; }
  .stealth-job-contract { left: 70px; right: 84px; }
  .wanted-hero-target { width: 62px; height: 62px; }
  .night-how-route { gap: 3px; }
  .night-how-route > span { min-height: 59px; }
  .result-card { max-width: calc(100vw - 18px); }
}

@media (max-width: 340px) {
  .result-card:has(.result-grade.show) > h2 { padding-inline: 34px; font-size: 24px; }
  .result-grade { top: 11px; right: 10px; width: 38px; height: 42px; padding: 5px 6px; }
  .result-grade span { font-size: 21px; }
}

@media (max-height: 720px) {
  .stealth-job-contract { min-height: 30px; padding-block: 4px; }
  .rivals-screen .rival-armory-list { max-height: 230px; overflow-y: auto; }
  .result-unlock.show { min-height: 40px; }
}

/* 12.9.1 — Rivals rebuilt as a focused race hub. */
.rivals-screen {
  --rival-cyan: #70f6ff;
  --rival-violet: #7e6cff;
  --rival-pink: #ff668f;
  --rival-gold: #ffd660;
  padding-inline: 11px;
  background:
    radial-gradient(circle at 16% 8%, rgba(34, 209, 255, .17), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(124, 81, 255, .18), transparent 34%),
    linear-gradient(180deg, #080f1d, #060810 72%);
}
.rivals-screen::before {
  opacity: .12;
  background-image: linear-gradient(115deg, transparent 0 46%, rgba(112, 246, 255, .16) 47% 48%, transparent 49% 100%);
  background-size: 92px 92px;
  mask-image: linear-gradient(#000, transparent 52%);
}
.rivals-screen .panel-header { margin-inline: 0; }
.rival-vault-card {
  margin-top: 9px;
  padding: 9px 11px;
  border-color: rgba(112, 246, 255, .22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(18, 39, 58, .96), rgba(17, 18, 36, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 10px 25px rgba(0, 0, 0, .34);
}
.rival-vault-agent > span {
  border-color: rgba(112, 246, 255, .72);
  border-radius: 50%;
  color: #06141a;
  background: linear-gradient(145deg, #d9feff, #58dfef);
}
.rival-vault-agent b { font-size: 10px; }
.rival-vault-balance small { color: #b6a35e; }
.rival-vault-balance b { font-size: 17px; }

.rival-hub-tabs {
  margin: 9px 0 0;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
  background: rgba(4, 9, 18, .76);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.rival-hub-tabs button {
  min-height: 52px;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 5px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #758a99;
  background: transparent;
  text-align: left;
}
.rival-hub-tabs button > span {
  grid-row: 1 / 3;
  width: 24px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #8da6b6;
  background: rgba(255, 255, 255, .05);
  font-size: 11px;
}
.rival-hub-tabs b, .rival-hub-tabs small { display: block; }
.rival-hub-tabs b { align-self: end; color: #acbac3; font-size: 8px; }
.rival-hub-tabs small { align-self: start; color: #526775; font-size: 5px; letter-spacing: .08em; }
.rival-hub-tabs button.selected {
  border-color: rgba(112, 246, 255, .48);
  color: #071218;
  background: linear-gradient(145deg, rgba(35, 124, 156, .5), rgba(41, 49, 102, .5));
  box-shadow: 0 0 18px rgba(78, 225, 255, .14), inset 0 1px rgba(255, 255, 255, .13);
}
.rival-hub-tabs button.selected > span { color: #06151a; background: var(--rival-cyan); box-shadow: 0 0 14px rgba(112, 246, 255, .34); }
.rival-hub-tabs button.selected b { color: #f1feff; }
.rival-hub-tabs button.selected small { color: #8feaf1; }

.rival-network-strip {
  min-height: 21px !important;
  margin: 1px 3px 3px !important;
  opacity: .78;
}
.rival-network-strip button { width: 25px !important; height: 23px !important; min-height: 23px; }
.rival-hub-pane[hidden] { display: none !important; }
.rival-hub-pane { animation: rival-pane-in .18s ease-out; }
@keyframes rival-pane-in { from { opacity: .25; transform: translateY(5px); } }

.rival-race-stage {
  position: relative;
  min-height: 112px;
  padding: 12px 16px 24px;
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(112, 246, 255, .35);
  border-radius: 21px;
  background:
    radial-gradient(circle at 13% 50%, rgba(57, 214, 239, .2), transparent 27%),
    radial-gradient(circle at 87% 50%, rgba(255, 84, 139, .19), transparent 27%),
    linear-gradient(135deg, #0c2635, #111227 58%, #281123);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 14px 32px rgba(0, 0, 0, .38);
}
.rival-race-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background: repeating-linear-gradient(112deg, transparent 0 18px, rgba(255, 255, 255, .07) 19px 20px);
  mask-image: linear-gradient(90deg, transparent, #000 48%, transparent);
}
.rival-stage-player { position: relative; z-index: 2; min-width: 0; display: grid; justify-items: center; gap: 5px; }
.rival-stage-player > span {
  width: 48px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid var(--rival-cyan);
  border-radius: 17px 17px 17px 6px;
  color: #06151c;
  background: linear-gradient(150deg, #d5feff, #56dfed);
  box-shadow: 0 0 22px rgba(112, 246, 255, .32);
  font-size: 20px;
  font-weight: 1000;
}
.rival-stage-player.opponent > span {
  border-color: #ff779c;
  color: #fff;
  background: linear-gradient(150deg, #ff91ad, #9f2659);
  box-shadow: 0 0 22px rgba(255, 102, 143, .32);
}
.rival-stage-player small { max-width: 65px; overflow: hidden; color: #d9faff; font-size: 6px; font-weight: 1000; text-overflow: ellipsis; white-space: nowrap; }
.rival-stage-player.opponent small { color: #ffadc0; }
.rival-stage-track { position: relative; z-index: 2; height: 46px; display: grid; place-items: center; }
.rival-stage-track::before, .rival-stage-track::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--rival-cyan), #59617a 48% 52%, var(--rival-pink)); }
.rival-stage-track::before { top: 13px; }
.rival-stage-track::after { bottom: 12px; opacity: .25; }
.rival-stage-track > i { position: absolute; left: 12%; right: 12%; top: 8px; bottom: 8px; border: 1px dashed rgba(255, 255, 255, .12); border-radius: 50%; }
.rival-stage-track > b { position: relative; z-index: 2; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: #fff4bf; background: #101426; box-shadow: 0 0 18px rgba(255, 214, 96, .18); font-size: 8px; font-style: italic; }
.rival-stage-track > em { position: absolute; right: -1px; top: 2px; color: var(--rival-gold); font-size: 12px; font-style: normal; text-shadow: 0 0 13px var(--rival-gold); }
.rival-race-stage > strong { position: absolute; z-index: 2; left: 0; right: 0; bottom: 8px; color: #91a8b7; font-size: 6px; letter-spacing: .13em; text-align: center; }

.rival-section-head { margin: 11px 2px 6px !important; }
.rival-section-head b { color: #e7fcff !important; font-size: 8px !important; }
.rival-section-head span { padding: 3px 6px; border-radius: 99px; color: #081319 !important; background: var(--rival-cyan); font-size: 5px !important; }
.rival-match-list { gap: 7px; }
.rival-match-card {
  min-height: 76px;
  padding: 8px 9px;
  grid-template-columns: 37px minmax(0, 1fr) 68px;
  gap: 8px;
  border-radius: 15px;
  background: linear-gradient(125deg, rgba(14, 31, 45, .98), rgba(16, 17, 31, .98));
}
.rival-match-card .rival-match-avatar { width: 37px; height: 42px; border-radius: 14px 14px 14px 5px; font-size: 15px; }
.rival-match-info > small { font-size: 5px; }
.rival-match-info > b { margin-top: 2px; font-size: 10px; }
.rival-match-stats { margin-top: 5px; }
.rival-match-stats span { padding: 3px 4px; font-size: 5px; }
.rival-match-action b { font-size: 11px; }
.rival-match-action button { min-height: 31px; border-radius: 9px; }
.rival-empty-exchange.compact { margin-top: 1px; border-style: solid; opacity: .84; }

.rival-send-panel {
  margin-top: 11px;
  padding: 11px;
  border: 1px solid rgba(126, 108, 255, .28);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(21, 23, 48, .94), rgba(9, 17, 29, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.rival-send-panel .rival-direct-head { margin: 0 1px 7px; }
.rival-send-panel .rival-direct-head small { color: #a99cff; }
.rival-send-panel .rival-direct-head b { font-size: 10px; }
.rival-recipient-list { min-height: 56px; gap: 5px; }
.rival-recipient-card {
  min-height: 56px;
  padding: 6px;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 5px;
  border-radius: 12px;
  background: rgba(4, 10, 19, .7);
}
.rival-recipient-card > span { width: 29px; height: 34px; border-radius: 11px 11px 11px 4px; font-size: 11px; }
.rival-recipient-card b { font-size: 6px; }
.rival-recipient-card.selected { border-color: var(--rival-cyan); background: linear-gradient(145deg, rgba(21, 64, 70, .78), rgba(17, 20, 39, .88)); box-shadow: 0 0 15px rgba(112, 246, 255, .15); }
.rival-recipient-card.selected > span { border-color: var(--rival-cyan); background: var(--rival-cyan); }
.rival-send-panel .rival-exchange-hero {
  min-height: 82px;
  margin-top: 7px;
  padding: 9px;
  grid-template-columns: minmax(0, 1fr) 42px 82px;
  gap: 8px;
  border-color: rgba(112, 246, 255, .21);
  border-radius: 15px;
  background: linear-gradient(130deg, rgba(8, 29, 42, .92), rgba(11, 12, 26, .96));
  box-shadow: none;
}
.rival-send-panel .rival-exchange-hero::after { display: none; }
.rival-send-panel .rival-pot-visual { width: 42px; height: 52px; transform: scale(.78); }
.rival-send-panel .rival-stake-control > small { color: #7f96a4; }
.rival-send-panel .rival-stake-choices { margin: 5px 0; }
.rival-send-panel .rival-stake-choices button { height: 30px; }
.rival-send-panel .rival-post-button {
  min-width: 0;
  min-height: 62px;
  border-color: #d8feff;
  border-radius: 12px;
  background: linear-gradient(180deg, #d8feff, #61e9f0 65%, #2eb9c7);
  box-shadow: inset 0 1px #fff, 0 4px 0 #167984, 0 9px 18px rgba(0, 0, 0, .32);
}
.rival-send-panel .rival-post-button:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(5, 82, 91, .2), 0 1px 0 #167984; }
.rival-send-panel .rival-post-button b { font-size: 7px; }
.rival-send-panel .rival-post-button small { font-size: 5px; }
.rival-send-panel .rival-icon-rules { margin: 7px 0 0; padding: 6px; background: rgba(2, 8, 15, .48); }
.rival-send-panel .rival-icon-rules i { font-size: 9px; }
.rival-send-panel .rival-icon-rules b { font-size: 5px; }
.rival-send-panel .rival-icon-rules em { font-size: 9px; }

.rival-hub-pane[data-rival-pane="armory"] { padding-top: 9px; }
.rival-hub-pane[data-rival-pane="armory"] .rival-armory-head { margin: 0 2px 8px; }
.rival-hub-pane[data-rival-pane="armory"] .rival-armory-list {
  margin: 0;
  padding: 0 0 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}
.rival-hub-pane[data-rival-pane="armory"] .rival-armory-card {
  min-width: 0;
  min-height: 124px;
  padding: 9px;
  border-radius: 15px;
}
.rival-hub-pane[data-rival-pane="results"] { padding-top: 10px; }
.rival-hub-pane[data-rival-pane="results"] .raid-log-head { margin: 0 2px 8px; }
.rival-hub-pane[data-rival-pane="results"] .raid-history-row {
  min-height: 54px;
  padding: 9px 11px;
  border-left: 3px solid var(--rival-cyan);
  border-radius: 12px;
}
.rival-hub-pane[data-rival-pane="results"] .network-loading { min-height: 92px; display: grid; place-items: center; border: 1px dashed rgba(112, 246, 255, .22); border-radius: 15px; }

@media (max-width: 360px) {
  .rivals-screen { padding-inline: 7px; }
  .rival-race-stage { grid-template-columns: 51px 1fr 51px; padding-inline: 11px; gap: 6px; }
  .rival-stage-player > span { width: 43px; height: 47px; }
  .rival-hub-tabs button { grid-template-columns: 21px 1fr; column-gap: 4px; padding-inline: 4px; }
  .rival-hub-tabs button > span { width: 21px; }
  .rival-send-panel { padding: 9px 8px; }
  .rival-send-panel .rival-exchange-hero { grid-template-columns: minmax(0, 1fr) 35px 72px; gap: 5px; padding-inline: 7px; }
  .rival-send-panel .rival-pot-visual { transform: scale(.68); }
  .rival-match-card { grid-template-columns: 34px minmax(0, 1fr) 62px; gap: 6px; padding-inline: 7px; }
  .rival-match-card .rival-match-avatar { width: 34px; height: 39px; }
  .rival-hub-pane[data-rival-pane="armory"] .rival-armory-list { grid-template-columns: 1fr; }
  .rival-hub-pane[data-rival-pane="armory"] .rival-armory-card { min-height: 105px; }
}

/* 12.9.2 — illustrated Rival hub, challenge-first layout and instant race verdicts. */
.rival-hub-tabs button > .rival-tab-art {
  width: 32px;
  height: 36px;
  border: 1px solid rgba(124, 220, 255, .3);
  border-radius: 10px;
  background-color: #081226;
  background-image: url("assets/rival-ui-atlas-12.9.2.webp");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 5px 11px rgba(0, 0, 0, .32);
}
.rival-hub-tabs button > .rival-tab-art.race { background-position: 0 0; }
.rival-hub-tabs button > .rival-tab-art.armory { background-position: 50% 0; }
.rival-hub-tabs button > .rival-tab-art.results { background-position: 100% 0; }
.rival-hub-tabs button.selected > .rival-tab-art {
  border-color: rgba(165, 251, 255, .82);
  background-color: #081226;
  background-image: url("assets/rival-ui-atlas-12.9.2.webp");
  box-shadow: 0 0 17px rgba(112, 246, 255, .34), inset 0 1px rgba(255, 255, 255, .16);
  filter: saturate(1.12) brightness(1.08);
}
.rival-hub-tabs button.selected > .rival-tab-art.race { background-position: 0 0; }
.rival-hub-tabs button.selected > .rival-tab-art.armory { background-position: 50% 0; }
.rival-hub-tabs button.selected > .rival-tab-art.results { background-position: 100% 0; }
.rival-hub-tabs button { grid-template-columns: 32px 1fr; }

.rival-send-panel { margin-top: 0; }
.rival-send-panel .rival-race-stage {
  min-height: 98px;
  margin: 0 0 8px;
  padding-block: 9px 22px;
  border-color: rgba(112, 246, 255, .26);
  border-radius: 15px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09);
}
.rival-send-panel .rival-stage-player > span { width: 43px; height: 47px; font-size: 17px; }
.rival-send-panel .rival-stage-track { height: 39px; }
.rival-send-panel .rival-race-stage > strong { bottom: 6px; }
.rival-send-panel + .rival-section-head { margin-top: 13px !important; }

.rival-armory-icon.rival-armory-art {
  width: 58px;
  height: 64px;
  border-radius: 14px 14px 14px 5px;
  background-color: #071126;
  background-image: url("assets/rival-ui-atlas-12.9.2.webp");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  box-shadow: 0 0 19px color-mix(in srgb, var(--armory-accent) 26%, transparent), inset 0 1px rgba(255, 255, 255, .12);
}
.rival-armory-art.night_plating { background-position: 0 50%; }
.rival-armory-art.vacuum_wire { background-position: 50% 50%; }
.rival-armory-art.payday_key { background-position: 100% 50%; }
.rival-armory-art.crew_battery { background-position: 0 100%; }
.rival-armory-art.heart_forgery { background-position: 50% 100%; }
.rival-armory-art.phantom_alibi { background-position: 100% 100%; }
.rival-hub-pane[data-rival-pane="armory"] .rival-armory-card {
  min-height: 145px;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 10px;
}
.rival-hub-pane[data-rival-pane="armory"] .rival-armory-card > b { font-size: 9px; }
.rival-hub-pane[data-rival-pane="armory"] .rival-armory-card > span { min-height: 20px; font-size: 6px; line-height: 1.3; }

.rival-result-verdict {
  --verdict-accent: #70f6ff;
  position: relative;
  margin: 5px 0 10px;
  padding: 10px 12px;
  display: grid;
  justify-items: center;
  gap: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--verdict-accent) 60%, transparent);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--verdict-accent) 22%, transparent), transparent 52%),
    linear-gradient(145deg, #0b1c2b, #0a0d19);
  box-shadow: 0 0 26px color-mix(in srgb, var(--verdict-accent) 17%, transparent), inset 0 1px rgba(255, 255, 255, .1);
}
.rival-result-verdict[hidden] { display: none !important; }
.rival-result-verdict.lost { --verdict-accent: #ff668f; }
.rival-result-verdict.sent { --verdict-accent: #ffd660; }
.rival-result-verdict::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background: repeating-linear-gradient(110deg, transparent 0 16px, var(--verdict-accent) 17px 18px);
  mask-image: linear-gradient(90deg, transparent, #000, transparent);
}
.rival-result-verdict > * { position: relative; z-index: 1; }
.rival-result-verdict > small { color: #c9e3e9; font-size: 7px; font-weight: 1000; letter-spacing: .035em; }
.rival-result-verdict > b { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--verdict-accent) 55%, transparent); border-radius: 99px; color: var(--verdict-accent); background: color-mix(in srgb, var(--verdict-accent) 10%, #071018); font-size: 12px; box-shadow: 0 0 14px color-mix(in srgb, var(--verdict-accent) 18%, transparent); }
.result-card.raid-result > h2 { margin-bottom: 2px; }
.result-card.raid-result :is(#levelUp, .result-contract, .result-approach, .result-story, .score-ring, .bonus-line, .result-stats) { display: none !important; }
.result-card.raid-result .result-unlock.show { margin-top: 1px; }

@media (max-width: 360px) {
  .rival-hub-tabs button { grid-template-columns: 28px 1fr; }
  .rival-hub-tabs button > .rival-tab-art { width: 28px; height: 33px; }
  .rival-send-panel .rival-race-stage { grid-template-columns: 48px 1fr 48px; }
  .rival-hub-pane[data-rival-pane="armory"] .rival-armory-card { grid-template-columns: 54px minmax(0, 1fr); min-height: 138px; }
  .rival-armory-icon.rival-armory-art { width: 54px; height: 60px; }
}

/* 13.1 live competition */
.competitive-name-edit {
  min-width: 38px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #62efff70;
  border-radius: 9px;
  color: #86f7ff;
  background: #61f3ff0d;
  font: 1000 7px/1 var(--font-ui);
  letter-spacing: .09em;
}
.daily-board-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; }
.daily-username-button {
  min-height: 23px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--daily-color) 42%, transparent);
  border-radius: 8px;
  color: var(--daily-color);
  background: color-mix(in srgb, var(--daily-color) 8%, #090c16);
  font: 1000 6px/1 var(--font-ui);
  letter-spacing: .06em;
}
.daily-placement-prizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}
.daily-placement-prizes > span {
  min-width: 0;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--daily-color) 25%, transparent);
  border-radius: 9px;
  background: #090c1699;
  text-align: center;
}
.daily-placement-prizes b { color: var(--daily-color); font-size: 8px; }
.daily-placement-prizes small { color: #b4bdce; font-size: 5px; white-space: nowrap; }
.daily-placement-claim {
  margin-top: 7px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #c8ff3f80;
  border-radius: 11px;
  background: linear-gradient(100deg, #b9ff2417, #61f3ff0c);
}
.daily-placement-claim[hidden] { display: none; }
.daily-placement-claim small, .daily-placement-claim b { display: block; }
.daily-placement-claim small { color: #a9b795; font-size: 6px; }
.daily-placement-claim b { margin-top: 2px; color: #f6ffe5; font-size: 8px; }
.daily-placement-claim button {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  color: #101609;
  background: linear-gradient(135deg, #e9ff75, #9cf000);
  font: 1000 8px/1 var(--font-ui);
}
.competitive-name-overlay { z-index: 42; padding: 18px; }
.competitive-name-card {
  width: min(100%, 350px);
  margin: auto;
  padding: 23px 20px 17px;
  display: grid;
  gap: 10px;
  border: 1px solid #62efff73;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0, #62efff1f, transparent 45%), linear-gradient(155deg, #101b2a, #090b17 72%);
  box-shadow: 0 25px 70px #000c, inset 0 1px #fff1;
  text-align: center;
}
.competitive-name-card h2 { margin: 0; color: #f5ffff; font-size: 22px; font-style: italic; }
.competitive-name-card p { margin: 0; color: #aab7c8; font-size: 10px; }
.competitive-name-art { height: 52px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.competitive-name-art i { width: 45px; height: 45px; border: 1px solid #62efff8c; border-radius: 15px 15px 15px 5px; background: radial-gradient(circle at 40% 35%, #e5ffff, #4ce8f4 32%, #13324b 35%); box-shadow: 0 0 22px #62efff34; }
.competitive-name-art i:last-child { border-color: #c8ff3f8c; border-radius: 15px 15px 5px 15px; background: radial-gradient(circle at 40% 35%, #f6ffd5, #c8ff3f 32%, #263a19 35%); box-shadow: 0 0 22px #c8ff3f2e; }
.competitive-name-art b { color: #8491a5; font-size: 10px; }
.competitive-name-card input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #62efff80;
  border-radius: 13px;
  outline: none;
  color: #fff;
  background: #050914;
  box-shadow: inset 0 0 20px #0008;
  font: 1000 15px/1 var(--font-ui);
  text-align: center;
}
.competitive-name-card input:focus { border-color: #c8ff3f; box-shadow: 0 0 0 3px #c8ff3f16; }
.competitive-name-card > small { min-height: 12px; color: #718193; font-size: 7px; }
.competitive-name-card > small.error { color: #ff7798; }

/* 14.1 - command-center home and high-impact run feedback */
#menu {
  --home-chapter-color: #ceff42;
  padding: max(10px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
}

#menu .topbar { min-height: 43px; padding: 3px 4px; }
#menu .icon-button { width: 44px; height: 44px; border-radius: 13px; }
#menu .level-badge { min-width: 58px; height: 44px; border-color: rgba(206, 255, 66, .48); background: rgba(22, 36, 25, .66); }
#menu .home-wallets { display: flex; align-items: center; gap: 4px; }
#menu .home-wallets .wallet { min-width: 65px; height: 34px; padding: 0 8px; gap: 5px; font-size: 12px; }
#menu .home-wallets .gem-wallet { min-width: 49px; border-color: rgba(87, 231, 255, .24); }
#menu .home-wallets .gem-wallet .currency-icon { width: 18px; height: 18px; }

#menu .brand { top: calc(max(10px, env(safe-area-inset-top)) + 50px); left: 15px; }
#menu .brand > small { display: block; margin: 0 0 4px 2px; color: #d8ff6d; font-size: 5px; font-weight: 1000; letter-spacing: .25em; text-shadow: 0 2px 9px #000; }
#menu .brand h1 { font-size: clamp(31px, 8.8vw, 40px); }

.home-operation {
  position: absolute;
  z-index: 3;
  top: calc(max(10px, env(safe-area-inset-top)) + 116px);
  left: 12px;
  right: 12px;
  height: 188px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--home-chapter-color) 58%, rgba(255, 255, 255, .18));
  border-radius: 24px 24px 24px 9px;
  background: #070b14;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 16px 42px rgba(0, 0, 0, .53), 0 0 32px color-mix(in srgb, var(--home-chapter-color) 13%, transparent);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-operation:focus-visible { outline: 2px solid var(--home-chapter-color); outline-offset: 3px; }
.home-operation:active { transform: scale(.988); border-color: var(--home-chapter-color); box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 10px 28px rgba(0, 0, 0, .58), 0 0 38px color-mix(in srgb, var(--home-chapter-color) 24%, transparent); }
.home-operation::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 37%, color-mix(in srgb, var(--home-chapter-color) 7%, transparent) 48%, transparent 68%);
  pointer-events: none;
}
.home-operation-art {
  position: absolute;
  inset: 0 45% 0 0;
  background-color: #0c111e;
  background-image: url("assets/chapter-atlas-11.7.2.webp");
  background-repeat: no-repeat;
  background-size: 500% 500%;
  background-position: var(--chapter-art-position, 0% 0%);
  filter: saturate(1.2) contrast(1.04) brightness(.86);
  transform: scale(1.03);
  animation: home-art-drift 8s ease-in-out infinite alternate;
}
@keyframes home-art-drift { to { transform: scale(1.095) translate3d(-1.5%, -1%, 0); filter: saturate(1.32) contrast(1.07) brightness(.92); } }
.home-operation-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 15, .05), rgba(5, 8, 15, .56)), linear-gradient(90deg, transparent 35%, #070b14 96%);
}
.home-operation-shade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 30%, rgba(7, 11, 20, .58) 44%, #070b14 61%); }
.home-operation-head {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 43%;
  right: 12px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 7px;
}
.home-operation-head small, .home-operation-head b { display: block; }
.home-operation-head small { color: var(--home-chapter-color); font-size: 5px; font-weight: 1000; letter-spacing: .14em; }
.home-operation-head b { margin-top: 3px; max-width: 145px; overflow: hidden; color: #f8fbff; font-size: 11px; font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.home-operation-head em { padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--home-chapter-color) 42%, transparent); border-radius: 99px; color: var(--home-chapter-color); background: color-mix(in srgb, var(--home-chapter-color) 8%, #090d16); font-size: 5px; font-style: normal; font-weight: 1000; letter-spacing: .08em; white-space: nowrap; }
.home-operation-target {
  position: absolute;
  z-index: 2;
  top: 52px;
  left: 41%;
  right: 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.home-operation-target > span { width: 42px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--home-chapter-color) 66%, white 12%); border-radius: 15px 15px 15px 5px; color: #07100c; background: linear-gradient(145deg, color-mix(in srgb, var(--home-chapter-color) 72%, white), var(--home-chapter-color)); box-shadow: 0 0 20px color-mix(in srgb, var(--home-chapter-color) 30%, transparent), inset 0 1px #fff9; font-size: 20px; }
.home-operation-target small, .home-operation-target b, .home-operation-target p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-operation-target small { color: #8d95a8; font-size: 5px; font-weight: 1000; letter-spacing: .11em; }
.home-operation-target b { margin-top: 3px; color: #fff; font-size: 10px; }
.home-operation-target p { margin: 3px 0 0; color: color-mix(in srgb, var(--home-chapter-color) 77%, white); font-size: 6px; font-weight: 950; letter-spacing: .04em; }
.home-operation-route { position: absolute; z-index: 2; left: 43%; right: 14px; top: 114px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.home-operation-route i { height: 4px; border-radius: 99px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff09; }
.home-operation-route i.done { background: color-mix(in srgb, var(--home-chapter-color) 48%, #687184); }
.home-operation-route i.active { background: var(--home-chapter-color); box-shadow: 0 0 10px color-mix(in srgb, var(--home-chapter-color) 65%, transparent); animation: home-route-pulse 1.4s ease-in-out infinite alternate; }
@keyframes home-route-pulse { to { filter: brightness(1.35); transform: scaleY(1.45); } }
.home-operation-stats { position: absolute; z-index: 2; left: 9px; right: 9px; bottom: 9px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px; background: rgba(4, 7, 14, .82); backdrop-filter: blur(7px); }
.home-operation-stats span { min-width: 0; min-height: 42px; padding: 6px 5px; display: grid; place-content: center; text-align: center; }
.home-operation-stats span + span { border-left: 1px solid rgba(255, 255, 255, .09); }
.home-operation-stats small, .home-operation-stats b { display: block; }
.home-operation-stats small { color: #727b90; font-size: 4.5px; font-weight: 1000; letter-spacing: .11em; }
.home-operation-stats b { margin-top: 3px; color: #f0f4ff; font-size: 9px; }
.home-operation-stats b[data-grade="S"] { color: #ffe271; text-shadow: 0 0 9px #ffe27166; }
.home-operation-stats b[data-grade="A"] { color: #ceff42; }

#menu .home-command-deck {
  margin-top: auto;
  padding: 7px;
  gap: 5px;
  border: 1px solid rgba(202, 216, 255, .24);
  border-radius: 24px 24px 10px 24px;
  background: linear-gradient(180deg, rgba(12, 17, 31, .84), rgba(5, 8, 17, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 18px 50px rgba(0, 0, 0, .58);
  backdrop-filter: blur(12px) saturate(1.15);
}
#menu .home-command-title { min-height: 40px; padding: 0 2px 2px 3px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; }
#menu .home-command-title small { color: #788196; font-size: 5px; font-weight: 1000; letter-spacing: .16em; }
#menu .home-command-title span { overflow: hidden; color: #8c96ab; font-size: 5px; font-weight: 1000; letter-spacing: .06em; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
#menu .home-command-title span.ready { color: #ceff42; text-shadow: 0 0 10px #ceff4277; }
#menu .home-command-title button { min-height: 40px; padding: 0 10px; border: 1px solid rgba(116, 217, 255, .22); border-radius: 11px 11px 11px 4px; color: #9de7ff; background: linear-gradient(135deg, rgba(31, 84, 109, .24), rgba(8, 13, 23, .72)); font-size: 6px; font-weight: 1000; letter-spacing: .07em; white-space: nowrap; }
#menu .home-command-title button b { margin-left: 3px; color: #ceff42; font-size: 9px; }
#menu .home-command-title button:active { transform: translateY(1px); border-color: rgba(206, 255, 66, .5); }
#menu .home-command-deck > #playButton { display: none; }
#menu .home-command-deck > #playButton span::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #18210b; }
#menu .home-command-deck > #playButton small { font-size: 6px; }
#menu .home-command-deck > .feature-row { order: 2; gap: 5px; }
#menu .home-command-deck > .daily-card { order: 3; }
#menu .home-command-deck > .secondary-row { order: 4; }
#menu .home-command-deck > .money-store-card { order: 5; }
#menu .home-command-deck > .home-command-title { order: 0; }
#menu .home-command-deck .feature-button,
#menu .home-command-deck .feature-button.wanted-feature { min-height: 49px; grid-template-rows: 28px auto; border-radius: 12px; background: linear-gradient(180deg, rgba(35, 44, 67, .84), rgba(8, 12, 24, .88)); }
#menu .home-command-deck .feature-button > span { width: 27px; height: 27px; border-radius: 9px; font-size: 12px; }
#menu .home-command-deck .home-mode-icon { position: relative; display: block; overflow: visible; color: #8deeff; background: radial-gradient(circle at 50% 42%, rgba(100, 230, 255, .2), rgba(11, 26, 43, .82)); box-shadow: inset 0 0 0 1px rgba(111, 230, 255, .28), 0 0 13px rgba(64, 228, 255, .13); }
#menu .home-command-deck .home-mode-icon::before,
#menu .home-command-deck .home-mode-icon::after { content: ""; position: absolute; box-sizing: border-box; }
#menu .home-command-deck .mode-shop::before { left: 7px; top: 10px; width: 13px; height: 11px; border: 2px solid currentColor; border-radius: 3px 3px 5px 5px; background: rgba(64, 228, 255, .07); }
#menu .home-command-deck .mode-shop::after { left: 10px; top: 6px; width: 7px; height: 6px; border: 2px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }
#menu .home-command-deck .mode-rivals { color: #c0a4ff; background: radial-gradient(circle at 50% 42%, rgba(168, 125, 255, .2), rgba(21, 16, 47, .84)); box-shadow: inset 0 0 0 1px rgba(181, 145, 255, .3), 0 0 13px rgba(151, 94, 255, .14); }
#menu .home-command-deck .mode-rivals::before { left: 4px; top: 7px; width: 11px; height: 13px; border: 2px solid currentColor; border-radius: 8px 8px 5px 5px; box-shadow: 8px 2px 0 -2px #171331, 8px 2px 0 0 currentColor; }
#menu .home-command-deck .mode-rivals::after { left: 7px; top: 11px; width: 5px; height: 2px; border-radius: 99px; background: currentColor; box-shadow: 8px 2px 0 currentColor; }
#menu .home-command-deck .mode-night { color: #ff799f; background: radial-gradient(circle at 50% 42%, rgba(255, 83, 137, .2), rgba(49, 12, 34, .84)); box-shadow: inset 0 0 0 1px rgba(255, 95, 143, .3), 0 0 13px rgba(255, 69, 125, .14); }
#menu .home-command-deck .mode-night::before { left: 8px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: currentColor; box-shadow: inset 5px -1px 0 #321126; }
#menu .home-command-deck .mode-night::after { left: 15px; top: 16px; width: 6px; height: 6px; border: 1px solid #ffc3d6; transform: rotate(45deg); background: #ff5f8f; }
#menu .home-command-deck .mode-daily { color: #d7b5ff; background: radial-gradient(circle at 50% 42%, rgba(188, 135, 255, .2), rgba(28, 16, 53, .84)); box-shadow: inset 0 0 0 1px rgba(197, 155, 255, .3), 0 0 13px rgba(167, 102, 255, .15); }
#menu .home-command-deck .mode-daily::before { left: 6px; top: 6px; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; }
#menu .home-command-deck .mode-daily::after { left: 13px; top: 9px; width: 2px; height: 7px; border-radius: 99px; background: currentColor; transform-origin: 1px 6px; transform: rotate(-35deg); }
#menu .home-command-deck .mode-upgrades { width: 16px; height: 16px; display: inline-block; flex: 0 0 16px; color: #ceff42; background: none; box-shadow: none; }
#menu .home-command-deck .mode-upgrades::before { left: 3px; top: 5px; width: 10px; height: 10px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
#menu .home-command-deck .mode-upgrades::after { left: 7px; top: 6px; width: 2px; height: 10px; border-radius: 99px; background: currentColor; }
#menu .home-command-deck .feature-button b { font-size: 6.5px; }
#menu .home-command-deck .daily-card { min-height: 44px; border-radius: 12px; }
#menu .home-command-deck .secondary-button { min-height: 40px; border-radius: 11px; font-size: 8px; }
#menu .home-command-deck .money-store-card { min-height: 40px; border-radius: 11px; }

.precision-callout {
  --precision-color: #cfff45;
  position: absolute;
  z-index: 9;
  top: 26%;
  left: 50%;
  min-width: 224px;
  max-width: calc(100% - 64px);
  min-height: 62px;
  padding: 9px 15px 9px 10px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  overflow: hidden;
  transform: translate(-50%, -14px) scale(.92) rotate(-2deg);
  border: 1px solid color-mix(in srgb, var(--precision-color) 68%, transparent);
  border-radius: 18px 18px 18px 5px;
  opacity: 0;
  color: #f8fff1;
  background: linear-gradient(115deg, color-mix(in srgb, var(--precision-color) 16%, #071017), rgba(5, 8, 16, .94) 58%);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .62), 0 0 28px color-mix(in srgb, var(--precision-color) 22%, transparent), inset 0 1px rgba(255, 255, 255, .13);
  pointer-events: none;
}
.precision-callout::before { content: ""; position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(112deg, transparent 0 15px, var(--precision-color) 16px 17px); mask-image: linear-gradient(90deg, #000, transparent 74%); }
.precision-callout > * { position: relative; z-index: 1; }
.precision-callout > span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--precision-color) 75%, white 12%); border-radius: 14px 14px 14px 5px; color: #07110c; background: var(--precision-color); box-shadow: 0 0 20px color-mix(in srgb, var(--precision-color) 45%, transparent); font-size: 22px; font-weight: 1000; }
.precision-callout small, .precision-callout b, .precision-callout em { display: block; }
.precision-callout small { color: color-mix(in srgb, var(--precision-color) 76%, white); font-size: 5px; font-weight: 1000; letter-spacing: .14em; }
.precision-callout b { margin-top: 2px; color: #fff; font-size: 18px; font-style: italic; letter-spacing: -.02em; text-shadow: 0 0 18px color-mix(in srgb, var(--precision-color) 35%, transparent); }
.precision-callout em { margin-top: 2px; color: #aeb7c8; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .05em; }
.precision-callout.show { animation: precision-callout-in .72s cubic-bezier(.18, .9, .2, 1) forwards; }
.precision-callout.perfect { --precision-color: #ceff42; }
.precision-callout.slide { --precision-color: #68ecff; }
.precision-callout.vault { --precision-color: #ba96ff; }
.precision-callout.rush { --precision-color: #ffd45f; min-width: 250px; }
.precision-callout.reflex { --precision-color: #69f3ff; min-width: 238px; }
.precision-callout.record { --precision-color: #65f0d5; min-width: 248px; }
.precision-callout.live { --precision-color: #ceff42; min-width: 242px; }
.precision-callout.rank { --precision-color: #ffe271; min-width: 240px; }
.precision-callout.alert { --precision-color: #ffc45f; min-width: 242px; }
.precision-callout.lockdown { --precision-color: #ff456f; min-width: 252px; }
.precision-callout.target { --precision-color: #9d7bff; min-width: 236px; }
.precision-callout.target-complete { --precision-color: #ceff42; min-width: 258px; }
@keyframes canvas-objective-surge {
  0% { filter: brightness(1) saturate(1); }
  28% { filter: brightness(1.28) saturate(1.32); }
  100% { filter: brightness(1) saturate(1); }
}
@keyframes canvas-rank-surge {
  0% { filter: brightness(1) contrast(1); }
  30% { filter: brightness(1.2) contrast(1.08) saturate(1.24); }
  100% { filter: brightness(1) contrast(1); }
}
#game.target-captured #gameCanvas { animation: canvas-objective-surge .48s ease-out; }
#game.rank-up #gameCanvas { animation: canvas-rank-surge .58s ease-out; }
.precision-callout.crew-nyx { --precision-color: #65f0d5; }
.precision-callout.crew-rook { --precision-color: #ff9b61; }
.precision-callout.crew-lux { --precision-color: #ffe271; }
.precision-callout.crew-sable { --precision-color: #b795ff; }
.precision-callout.crew-vesper { --precision-color: #ffd56a; }
@keyframes precision-callout-in {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.82) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, -3px) scale(1.055) rotate(-2deg); }
  70% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(.98) rotate(-2deg); }
}
#game.precision-hit #gameCanvas { animation: precision-canvas-hit .22s ease-out; }
@keyframes precision-canvas-hit { 42% { transform: scale(1.012); filter: brightness(1.08) saturate(1.12); } }

@media (max-height: 760px) {
  .home-operation { top: calc(max(8px, env(safe-area-inset-top)) + 98px); height: 162px; }
  .home-operation-target { top: 44px; }
  .home-operation-route { top: 99px; }
  .home-operation-stats { bottom: 7px; }
  .home-operation-stats span { min-height: 36px; padding-block: 4px; }
  #menu .home-command-deck > #playButton { min-height: 43px; }
  #menu .home-command-deck .feature-button,
  #menu .home-command-deck .feature-button.wanted-feature { min-height: 43px; grid-template-rows: 24px auto; }
  #menu .home-command-deck .feature-button > span { width: 23px; height: 23px; }
  #menu .home-command-title { min-height: 36px; }
  #menu .home-command-title button { min-height: 36px; }
  #menu .home-command-deck .daily-card { min-height: 38px; }
  #menu .home-command-deck .secondary-button,
  #menu .home-command-deck .money-store-card { min-height: 36px; }
}

@media (max-width: 350px) {
  #menu { padding-inline: 7px; }
  .home-operation { left: 7px; right: 7px; }
  .home-operation-head, .home-operation-route { left: 45%; }
  .home-operation-target { left: 43%; grid-template-columns: 35px minmax(0, 1fr); gap: 6px; }
  .home-operation-target > span { width: 35px; height: 42px; font-size: 16px; }
  .home-operation-head b { font-size: 9px; }
  .home-operation-head em { padding-inline: 4px; }
  .home-operation-stats b { font-size: 8px; }
  .precision-callout { min-width: 205px; grid-template-columns: 39px minmax(0, 1fr); }
  .precision-callout > span { width: 39px; height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-score-mini.ready { animation: none; }
  .home-operation-route i.active { animation: none; }
  .precision-callout.show { animation-duration: .3s; }
  #game.precision-hit #gameCanvas { animation: none; }
}

/* One-glance result receipt: reward first, performance second. */
.result-card:not(.raid-result) {
  padding: 18px 16px 15px;
  border-color: rgba(203, 255, 69, .3);
  background:
    radial-gradient(circle at 50% 7%, rgba(206, 255, 66, .2), transparent 28%),
    radial-gradient(circle at 105% 48%, rgba(95, 225, 255, .13), transparent 35%),
    linear-gradient(155deg, #182139, #090d19 70%);
}
.result-card:not(.raid-result)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .12;
  background: repeating-linear-gradient(112deg, transparent 0 25px, rgba(205, 255, 72, .16) 26px 27px);
  mask-image: linear-gradient(180deg, #000, transparent 48%);
  pointer-events: none;
}
.result-card:not(.raid-result) > * { position: relative; z-index: 1; }
.result-card:not(.raid-result) > h2 { margin: 2px 0 4px; font-size: 31px; letter-spacing: -.04em; }
.result-card:not(.raid-result) .result-grade {
  top: 12px;
  right: 12px;
  width: 55px;
  height: 61px;
  padding: 6px 7px;
  border-radius: 17px 17px 17px 6px;
}
.result-card:not(.raid-result) .result-grade span { font-size: 32px; }
.result-card:not(.raid-result) .score-ring {
  position: relative;
  width: 146px;
  height: 146px;
  margin: 10px auto 8px;
  border-width: 9px;
  background: radial-gradient(circle, rgba(206, 255, 66, .08), rgba(8, 12, 22, .92) 67%);
  box-shadow: inset 0 0 25px rgba(206, 255, 66, .11), 0 0 34px rgba(206, 255, 66, .2), 0 18px 32px rgba(0, 0, 0, .42);
}
.result-card:not(.raid-result) .score-ring::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px dashed rgba(206, 255, 66, .32);
  border-radius: 50%;
  animation: result-orbit 10s linear infinite;
}
@keyframes result-orbit { to { transform: rotate(360deg); } }
.result-card:not(.raid-result) .score-ring strong { font-size: 30px; }
.result-performance { display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 9px 0 8px; }
.result-performance.show { display: grid; }
.result-performance span { min-height: 55px; padding: 7px 5px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 5px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 13px; background: linear-gradient(145deg, rgba(31, 40, 61, .82), rgba(10, 14, 25, .82)); text-align: left; }
.result-performance i { grid-row: 1 / 3; width: 24px; height: 31px; display: grid; place-items: center; border-radius: 9px 9px 9px 3px; color: #101506; background: #ceff42; box-shadow: 0 0 13px rgba(206, 255, 66, .28); font-size: 11px; font-style: normal; font-weight: 1000; }
.result-performance span:nth-child(2) i { color: #201400; background: #ffd45f; box-shadow-color: rgba(255, 212, 95, .28); }
.result-performance span:nth-child(3) i { color: #fff; background: #7f516c; box-shadow: none; }
.result-performance small { align-self: end; color: #7f899e; font-size: 4.5px; font-weight: 1000; letter-spacing: .09em; }
.result-performance b { align-self: start; margin-top: 1px; color: #fff; font-size: 12px; }
.result-card:not(.raid-result) .result-stats { margin-block: 8px 6px; }
.result-card:not(.raid-result) :is(.share-result-button, .rewarded-button, .primary-button) { border-radius: 13px; }
.result-card:not(.raid-result) .bonus-line:not(.empty) { display: flex; margin: 3px auto 7px; }
.result-card:not(.raid-result) .bonus-line[data-grade="S"] { color: #ffe271; background: #ffe27112; box-shadow: inset 0 0 0 1px #ffe27125; }
.result-card:not(.raid-result) .bonus-line[data-grade="B"], .result-card:not(.raid-result) .bonus-line[data-grade="C"] { color: #8cf3d9; background: #8cf3d90d; }

@media (max-height: 720px) {
  .result-card:not(.raid-result) { padding-block: 13px 11px; }
  .result-card:not(.raid-result) .score-ring { width: 118px; height: 118px; margin-block: 6px; }
  .result-card:not(.raid-result) .score-ring strong { font-size: 25px; }
  .result-performance span { min-height: 47px; padding-block: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .result-card:not(.raid-result) .score-ring::after { animation: none; }
}

.run-score-mini { --run-rank-color: #8d98ab; width: min(132px, 100%); min-width: 0; margin-top: 4px; padding: 3px 5px 3px 3px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--run-rank-color) 38%, transparent); border-radius: 8px; background: rgba(6, 10, 18, .72); box-shadow: 0 0 12px color-mix(in srgb, var(--run-rank-color) 12%, transparent); }
.run-score-mini > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 4px; }
.run-rank-letter { grid-row: 1; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--run-rank-color) 64%, white 8%); border-radius: 7px 7px 7px 2px; color: #071019; background: var(--run-rank-color); box-shadow: 0 0 10px color-mix(in srgb, var(--run-rank-color) 32%, transparent); font-size: 11px; font-style: italic; font-weight: 1000; }
.run-score-mini small { overflow: hidden; color: color-mix(in srgb, var(--run-rank-color) 76%, white); font-size: 4px; font-weight: 1000; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.run-score-mini b { color: #edf3ff; font-size: 7px; font-style: italic; text-shadow: 0 0 8px color-mix(in srgb, var(--run-rank-color) 42%, transparent); }
.run-score-mini i { grid-column: 1 / 3; height: 2px; margin-top: 2px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.run-score-mini i u { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--run-rank-color); box-shadow: 0 0 7px var(--run-rank-color); transition: width .25s ease-out; }
.run-score-mini.record-hunt { border-color: rgba(255, 226, 113, .34); }
.run-score-mini.record-hunt small { color: #f0cf69; }
.run-score-mini.daily-score { border-color: rgba(185, 132, 255, .46); box-shadow: 0 0 13px rgba(185, 132, 255, .13); }
.run-score-mini.daily-score small, .run-score-mini.daily-score b { color: #d7b5ff; text-shadow: 0 0 8px rgba(183, 124, 255, .42); }
.run-score-mini.hunt-score { border-color: rgba(255, 95, 120, .46); box-shadow: 0 0 13px rgba(255, 95, 120, .13); }
.run-score-mini.hunt-score small, .run-score-mini.hunt-score b { color: #ff9bab; text-shadow: 0 0 8px rgba(255, 95, 120, .42); }
.run-score-mini.record-pace { border-color: rgba(101, 240, 213, .72); background: linear-gradient(135deg, rgba(8, 31, 30, .9), rgba(5, 12, 20, .84)); box-shadow: 0 0 18px rgba(101, 240, 213, .24); animation: run-record-pulse 1s ease-in-out infinite alternate; }
.run-score-mini.record-pace small, .run-score-mini.record-pace b { color: #65f0d5; text-shadow: 0 0 9px rgba(101, 240, 213, .62); }
@keyframes run-record-pulse { to { transform: translateY(-1px) scale(1.03); } }
#game[data-rival-raid="true"] .run-score-mini { display: none; }

.result-heist-score { display: none; width: fit-content; min-width: 154px; margin: 2px auto 6px; padding: 6px 12px; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; border: 1px solid rgba(112, 232, 255, .3); border-radius: 12px; background: linear-gradient(110deg, rgba(53, 103, 129, .2), rgba(9, 13, 24, .82)); }
.result-heist-score.show { display: grid; }
.result-heist-score small { align-self: end; color: #7f8da2; font-size: 5px; font-weight: 1000; letter-spacing: .12em; }
.result-heist-score b { grid-row: 1 / 3; grid-column: 2; color: #eafcff; font-size: 21px; font-style: italic; text-shadow: 0 0 16px rgba(99, 227, 255, .45); }
.result-heist-score em { align-self: start; color: #70e8ff; font-size: 5px; font-style: normal; font-weight: 1000; letter-spacing: .08em; }
.result-heist-score.record { border-color: rgba(206, 255, 66, .55); background: linear-gradient(110deg, rgba(206, 255, 66, .18), rgba(9, 13, 24, .84)); box-shadow: 0 0 22px rgba(206, 255, 66, .12); }
.result-heist-score.record b, .result-heist-score.record em { color: #ceff42; text-shadow: 0 0 16px rgba(206, 255, 66, .43); }

/* 14.1 field HUD: one compact command rail instead of scattered counters. */
.game-hud {
  top: max(7px, env(safe-area-inset-top));
  left: 8px;
  right: 8px;
  min-height: 46px;
  padding: 5px 6px;
  grid-template-columns: minmax(0, 1fr) auto 35px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(188, 216, 255, .2);
  border-radius: 17px 17px 17px 6px;
  background: linear-gradient(115deg, rgba(7, 12, 24, .8), rgba(12, 18, 33, .68));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 10px 26px rgba(0, 0, 0, .32);
  backdrop-filter: blur(8px) saturate(1.16);
}
.game-hud::before { content: ""; position: absolute; left: 15px; right: 56%; bottom: -1px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--run-accent), transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--run-accent) 45%, transparent); opacity: .75; }
.contract-hud { border-color: color-mix(in srgb, var(--run-accent) 24%, rgba(255, 255, 255, .12)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--run-accent) 68%, transparent), 0 8px 22px rgba(0, 0, 0, .25); }
#game[data-heist-act="2"] .game-hud { border-color: rgba(255, 196, 95, .36); }
#game[data-heist-act="3"] .game-hud { border-color: rgba(255, 69, 111, .48); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .34), 0 0 20px rgba(255, 69, 111, .12); }
.hud-left { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 7px; row-gap: 1px; }
.hud-left .distance { grid-column: 1; grid-row: 1 / 3; min-width: 53px; padding-left: 2px; }
.hud-left .distance b { font-size: 22px; line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, .65); }
.hud-left .distance small { font-size: 8px; }
.hud-left .hearts { grid-column: 2; grid-row: 1; margin: 0; gap: 2px; align-self: end; }
.hud-left .heart { font-size: 10px; filter: drop-shadow(0 0 4px #ff4b8b); }
.hud-left .run-score-mini { grid-column: 2; grid-row: 2; margin: 0; align-self: start; background: rgba(3, 7, 14, .5); }
.loot-pill { height: 34px; padding: 0 8px; border-color: rgba(255, 255, 255, .1); border-radius: 11px; background: rgba(4, 8, 17, .42); }
.loot-pill b { font-size: 11px; }
.loot-pill small { font-size: 6px; }
.pause-button { width: 35px; height: 35px; border-radius: 11px; background: rgba(10, 15, 28, .72); }
.flow-orb { top: calc(max(7px, env(safe-area-inset-top)) + 54px); right: 9px; width: 38px; height: 38px; }
.rush-meter { top: calc(max(7px, env(safe-area-inset-top)) + 98px); right: 9px; }
.contract-hud { top: calc(max(7px, env(safe-area-inset-top)) + 55px); min-height: 42px; backdrop-filter: blur(7px); }
.heist-route-hud { top: calc(max(7px, env(safe-area-inset-top)) + 105px); }
.protocol-banner { top: calc(max(7px, env(safe-area-inset-top)) + 101px); }

#game.rush-active .game-hud { border-color: rgba(255, 215, 98, .4); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .34), 0 0 22px rgba(255, 181, 47, .12); }
#game.reflex-active .game-hud { border-color: rgba(105, 243, 255, .38); }

/* Runtime fallback for phones that cannot sustain the full cinematic stack. */
#game.low-visual-quality :is(.game-hud, .contract-hud) { backdrop-filter: none; }
#game.low-visual-quality :is(.run-score-mini.record-pace, .flow-orb.ready, .streak-hud.show) { animation: none; }
#game.low-visual-quality .game-hud { background: rgba(7, 12, 24, .9); }
#game.low-visual-quality :is(.flow-orb, .rush-meter, .streak-hud, .crew-power-button, .crew-power-active-hud) { box-shadow: 0 5px 14px rgba(0, 0, 0, .58); }
#game.low-visual-quality :is(.heart, .currency-icon) { filter: none; }

/* Android browsers pay a disproportionate cost for live backdrop sampling.
   Preserve the translucent art direction with opaque fallbacks and let the
   canvas own the motion instead of recompositing every panel each frame. */
html[data-mobile-render="true"] #app * { backdrop-filter: none !important; }
html[data-mobile-render="true"] .topbar,
html[data-mobile-render="true"] .panel-header { background-color: rgba(12, 16, 29, .94); }
html[data-mobile-render="true"][data-active-screen="game"] #app { box-shadow: none; }
html[data-mobile-render="true"] #menu .menu-art img { transform: none; }
html[data-mobile-render="true"] #menu .menu-art::before { mix-blend-mode: normal; opacity: .12; }

@media (max-width: 350px) {
  .game-hud { left: 5px; right: 5px; padding-inline: 4px; }
  .hud-left .distance { min-width: 45px; }
  .hud-left .distance b { font-size: 19px; }
  .hud-left .heart { font-size: 8px; }
  .loot-pill { padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .run-score-mini.record-pace { animation: none; }
  .home-operation-art { animation: none; }
}

/* 14.2 visual direction: clearer action hierarchy, richer mission art, fewer tiny labels. */
.home-operation {
  border-radius: 25px 25px 25px 10px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 18px 46px rgba(0, 0, 0, .6), 0 0 40px color-mix(in srgb, var(--home-chapter-color) 16%, transparent);
}
.home-operation-art { inset: 0; filter: saturate(1.28) contrast(1.08) brightness(.8); }
.home-operation-art::after { background: linear-gradient(180deg, rgba(5, 8, 15, .04), rgba(5, 8, 15, .58)), linear-gradient(90deg, transparent 7%, rgba(7, 11, 20, .2) 28%, #070b14 68%); }
.home-operation-shade { background: linear-gradient(90deg, transparent 4%, rgba(7, 11, 20, .28) 31%, rgba(7, 11, 20, .96) 63%); }
.home-operation-head small { font-size: 6px; }
.home-operation-head b { font-size: 13px; }
.home-operation-head em { padding: 5px 7px; font-size: 6px; }
.home-operation-target small { font-size: 6px; }
.home-operation-target b { font-size: 12px; }
.home-operation-target p { font-size: 7px; }
.home-operation-route i { height: 5px; }
.home-operation-stats { background: rgba(4, 7, 14, .9); }
.home-operation-stats small { font-size: 5.5px; }
.home-operation-stats b { font-size: 10px; }

#menu .home-command-deck {
  padding: 8px;
  gap: 6px;
  border-color: rgba(202, 216, 255, .3);
  background: linear-gradient(155deg, rgba(18, 25, 43, .95), rgba(5, 8, 17, .97) 72%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 19px 54px rgba(0, 0, 0, .64), 0 0 32px rgba(99, 71, 255, .1);
}
#menu .home-command-deck > #playButton {
  position: relative;
  order: 0;
  min-height: 54px;
  padding: 7px 60px 7px 14px;
  display: grid;
  place-content: center;
  overflow: hidden;
  border: 1px solid rgba(244, 255, 207, .9);
  border-radius: 16px 16px 16px 6px;
  background: linear-gradient(105deg, #f0ff85 0%, #ceff42 50%, #91e700 100%);
  box-shadow: inset 0 1px #fff, inset 0 -4px rgba(57, 94, 0, .28), 0 7px 0 #608e05, 0 18px 36px rgba(134, 221, 0, .25);
  font-size: 15px;
  letter-spacing: .08em;
}
#menu .home-command-deck > #playButton::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 12px 12px 12px 4px;
  background: #101905;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 6px 14px rgba(0, 0, 0, .32);
}
#menu .home-command-deck > #playButton::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #ceff42;
}
#menu .home-command-deck > #playButton span::before { display: none; }
#menu .home-command-deck > #playButton small { margin-top: 2px; font-size: 7px; letter-spacing: .08em; }
#menu .home-command-deck > #playButton .clean-streak-progress { display: none; }
#menu .home-command-deck > #playButton:active { transform: translateY(4px); box-shadow: inset 0 1px #fff, inset 0 -2px rgba(57, 94, 0, .28), 0 3px 0 #608e05, 0 10px 24px rgba(134, 221, 0, .18); }
#menu .home-command-deck > .home-command-title { order: 1; min-height: 35px; }
#menu .home-command-title small { font-size: 6px; color: #9ba5ba; }
#menu .home-command-title span { font-size: 5.5px; }
#menu .home-command-title button { min-height: 33px; font-size: 7px; }
#menu .home-command-deck > .feature-row { order: 2; }
#menu .home-command-deck > .daily-card { order: 3; }
#menu .home-command-deck > .secondary-row { order: 4; }
#menu .home-command-deck > .money-store-card { order: 5; }
#menu .home-command-deck .feature-button,
#menu .home-command-deck .feature-button.wanted-feature {
  min-height: 53px;
  border-color: rgba(190, 210, 255, .18);
  border-radius: 14px 14px 14px 5px;
  background: radial-gradient(circle at 50% 0, rgba(98, 122, 174, .16), transparent 62%), linear-gradient(160deg, rgba(30, 39, 62, .92), rgba(7, 11, 22, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 8px 18px rgba(0, 0, 0, .34);
}
#menu .home-command-deck .feature-button > span { width: 30px; height: 30px; }
#menu .home-command-deck .feature-button b { font-size: 8px; letter-spacing: .06em; }
#menu .home-command-deck .daily-card { min-height: 47px; border-color: rgba(190, 140, 255, .35); background: linear-gradient(110deg, rgba(56, 35, 91, .86), rgba(13, 16, 31, .95)); }
#menu .home-command-deck .daily-card b { font-size: 9px; }
#menu .home-command-deck .daily-card small { display: none; }
#menu .home-command-deck .secondary-button,
#menu .home-command-deck .money-store-card { border-color: rgba(188, 208, 245, .16); background: linear-gradient(155deg, rgba(23, 31, 51, .86), rgba(7, 11, 21, .92)); }

.panel-header {
  border: 1px solid rgba(190, 211, 255, .2);
  background: linear-gradient(135deg, rgba(20, 28, 47, .96), rgba(7, 10, 20, .97));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 11px 28px rgba(0, 0, 0, .32);
}
.chapter-map-card { border-color: color-mix(in srgb, var(--chapter-color) 22%, rgba(255, 255, 255, .13)); }
.chapter-map-card.active { transform: translateY(-5px) scale(1.015); }
.chapter-map-art { width: 70px; height: 70px; border-width: 2px; filter: saturate(1.2) contrast(1.05); }
.chapter-level-node span { border-radius: 14px 14px 14px 5px; }
.chapter-level-node.current span { animation: mission-node-ready 1.15s ease-in-out infinite alternate; }
@keyframes mission-node-ready { to { transform: translateY(-2px); filter: brightness(1.2); } }

@media (max-height: 760px) {
  #menu .home-command-deck > #playButton { min-height: 46px; }
  #menu .home-command-deck > .home-command-title { min-height: 31px; }
  #menu .home-command-deck .feature-button,
  #menu .home-command-deck .feature-button.wanted-feature { min-height: 45px; }
  #menu .home-command-deck .daily-card { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-level-node.current span { animation: none; }
}

/* 14.2.1 — illustrated hideout destinations. Keep the city and runner visible,
   but make every destination read as a real game mode instead of a tiny symbol. */
#menu .home-command-deck > .feature-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
#menu .home-command-deck .feature-button,
#menu .home-command-deck .feature-button.wanted-feature {
  position: relative;
  min-height: 62px;
  padding: 4px;
  display: grid;
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 36px auto;
  gap: 3px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--mode-color, #8deeff) 35%, transparent);
  border-radius: 15px 15px 15px 5px;
  background: linear-gradient(165deg, rgba(29, 38, 62, .9), rgba(5, 8, 17, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 9px 22px rgba(0, 0, 0, .4);
  isolation: isolate;
}
#menu .home-command-deck .feature-button::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--mode-color, #8deeff), transparent);
  opacity: .8;
  pointer-events: none;
}
#menu #shopButton { --mode-color: #63f0d4; }
#menu #rivalsButton { --mode-color: #a98aff; }
#menu #wantedButton { --mode-color: #ff6d9c; }
#menu .home-command-deck .feature-button > .home-mode-icon {
  position: relative;
  z-index: 0;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 36px;
  margin: 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mode-color, #8deeff) 32%, transparent);
  border-radius: 10px 10px 8px 3px;
  background-color: #090e1c;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 15px color-mix(in srgb, var(--mode-color, #8deeff) 13%, transparent);
  filter: saturate(1.18) contrast(1.06);
}
#menu .home-command-deck .feature-row .home-mode-icon::before,
#menu .home-command-deck .feature-row .home-mode-icon::after { display: none; }
#menu #shopButton .mode-shop {
  background-image: linear-gradient(0deg, rgba(2, 6, 14, .2), transparent 60%), url("assets/gear-atlas-11.3.0.webp");
  background-size: cover, 400% 400%;
  background-position: center, 33.333% 33.333%;
}
#menu #rivalsButton .mode-rivals {
  background-image: linear-gradient(0deg, rgba(2, 4, 14, .16), transparent 60%), url("assets/rival-ui-atlas-12.9.2.webp");
  background-size: cover, 300% 300%;
  background-position: center, 100% 0;
}
#menu #wantedButton .mode-night {
  background-image: linear-gradient(0deg, rgba(4, 2, 10, .12), transparent 62%), url("assets/night-casino-12.4.0.webp");
  background-size: cover, 112% auto;
  background-position: center, center 58%;
}
#menu .home-command-deck .feature-button > b {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  overflow: hidden;
  color: #f8fbff;
  font-size: 8px;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 5px #000;
  white-space: nowrap;
}
#menu .home-command-deck .feature-button > small { display: none; }
#menu .home-command-deck .feature-button > .feature-progress {
  position: absolute;
  z-index: 4;
  left: 9px;
  right: 9px;
  bottom: 18px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .1);
}
#menu .home-command-deck .daily-card {
  position: relative;
  min-height: 47px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 7px;
  overflow: hidden;
  border-color: rgba(189, 143, 255, .42);
  background: linear-gradient(110deg, rgba(46, 29, 82, .92), rgba(9, 13, 28, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .35);
}
#menu .home-command-deck .daily-card > .mode-daily {
  width: 58px;
  height: 33px;
  border: 1px solid rgba(201, 167, 255, .4);
  border-radius: 11px 11px 9px 4px;
  background-image: linear-gradient(90deg, rgba(11, 7, 26, .12), rgba(11, 7, 26, .36)), url("assets/run-vista-orbit-14.2.0.webp");
  background-size: cover;
  background-position: center 64%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 15px rgba(172, 115, 255, .18);
  filter: saturate(1.16) contrast(1.04);
}
#menu .home-command-deck .daily-card > .mode-daily::before,
#menu .home-command-deck .daily-card > .mode-daily::after { display: none; }
#menu .home-command-deck .daily-card b { color: #f6f0ff; font-size: 9px; text-shadow: 0 1px 5px #000; }
#menu .home-command-deck .daily-state {
  padding: 5px 7px;
  border: 1px solid rgba(207, 255, 66, .34);
  border-radius: 99px;
  color: #ceff42;
  background: rgba(26, 39, 13, .72);
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: .08em;
}

@media (max-height: 760px) {
  #menu .home-command-deck .feature-button,
  #menu .home-command-deck .feature-button.wanted-feature {
    min-height: 54px;
    grid-template-rows: 30px auto;
  }
  #menu .home-command-deck .feature-button > .home-mode-icon { height: 30px; }
  #menu .home-command-deck .daily-card { min-height: 43px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  #menu .home-command-deck .daily-card > .mode-daily { width: 48px; height: 28px; }
}