/* Hoodey City (/city) */
.cy-stage { position: relative; height: clamp(440px, 74vh, 780px); border-radius: 32px; overflow: hidden; background: #0B1F14; box-shadow: var(--raise-lg); isolation: isolate; touch-action: none; }
.cy-stage > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; outline: none; }
.cy-stage > canvas:active { cursor: grabbing; }
.cy-hud { position: absolute; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.cy-hud > * { pointer-events: auto; }
.cy-tl { left: 18px; top: 18px; right: 200px; }
.cy-tr { right: 18px; top: 18px; }
.cy-bl { left: 18px; bottom: 64px; }
.cy-chip, .cy-btn, .cy-legend, .cy-hint, .cy-tip, .cy-card, .cy-lab, .cy-fps, .cy-toast, .cy-sh-in {
  background: rgba(6, 18, 12, 0.72); color: #E8F7EC; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(124, 240, 138, 0.22), 0 8px 24px rgba(0, 0, 0, 0.25);
}
.cy-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 12px; font-size: 12px; color: rgba(232, 247, 236, 0.75); }
.cy-chip b { font-size: 16px; font-weight: 700; color: #fff; }
.cy-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; font-size: 13px; font-weight: 600; }
.cy-btn:hover { color: #7CF08A; }
.cy-btn[aria-pressed="true"] .i-sun, .cy-btn[aria-pressed="false"] .i-moon { display: none; }
.cy-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; border-radius: 14px; font-size: 12px; max-width: calc(100% - 36px); }
.cy-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cy-legend i { width: 10px; height: 10px; border-radius: 3px; }
.cy-legend i.bc { border-radius: 50%; background: #FF3B1F; box-shadow: 0 0 0 3px rgba(255, 59, 31, 0.3), 0 0 10px #FF3B1F; width: 8px; height: 8px; }
.cy-hint { position: absolute; z-index: 2; left: 50%; bottom: 118px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 12px; white-space: nowrap; pointer-events: none; animation: cyfade 0.6s 1.2s both; }
.cy-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cy-lab { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 0.25s; will-change: transform; }
.cy-lab i, .cy-tip i { width: 8px; height: 8px; border-radius: 50%; }
.cy-tip { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 12px; pointer-events: none; white-space: nowrap; }
.cy-card { position: absolute; z-index: 4; right: 18px; top: 70px; width: 320px; max-width: calc(100% - 36px); padding: 18px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; animation: cyin 0.25s ease-out; }
.cy-x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: #E8F7EC; font-size: 22px; line-height: 1; }
.cy-x:hover { background: rgba(255, 255, 255, 0.08); }
.cy-c-head { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.cy-c-head b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.cy-c-head small { display: block; font-size: 12px; color: rgba(232, 247, 236, 0.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cy-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.cy-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cy-tag { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.07); }
.cy-tag.crew { color: #FF8A73; background: rgba(255, 59, 31, 0.14); }
.cy-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.cy-dl div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.cy-dl dt { font-size: 11px; color: rgba(232, 247, 236, 0.6); }
.cy-dl dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
.cy-dl dd small { font-size: 11px; font-weight: 500; color: rgba(232, 247, 236, 0.55); }
.cy-ca { font-size: 11px; color: rgba(232, 247, 236, 0.6); word-break: break-all; }
.cy-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cy-a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px; background: #00C805; color: #06140B; font-size: 13px; font-weight: 700; text-decoration: none; }
.cy-a:hover { color: #06140B; filter: brightness(1.08); }
.cy-a.ghost { background: rgba(255, 255, 255, 0.08); color: #E8F7EC; }
.cy-a.ghost:hover { color: #7CF08A; }
.cy-load { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #E8F7EC; font-size: 14px; background: radial-gradient(ellipse at 50% 40%, #12321F, #0B1F14 70%); }
.cy-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(124, 240, 138, 0.25); border-top-color: #00E00A; animation: cyspin 0.9s linear infinite; }
.cy-list { display: flex; flex-direction: column; gap: 10px; }
.cy-row { display: grid; grid-template-columns: 14px minmax(0, 2fr) minmax(0, 1.4fr) 100px 90px; gap: 14px; align-items: center; padding: 12px 18px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--raise-sm); text-align: left; }
.cy-row:hover { outline: 2px solid var(--accent); }
.cy-sym { display: flex; flex-direction: column; min-width: 0; }
.cy-sym small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-r { font-size: 13px; font-weight: 600; }
.cy-n, .cy-t { font-size: 13px; color: var(--muted); text-align: right; }
.cy-fps { position: absolute; z-index: 2; right: 18px; bottom: 18px; padding: 6px 10px; border-radius: 10px; font: 600 12px/1 'Spline Sans Mono', ui-monospace, monospace; pointer-events: none; }
.cy-fps.ok { color: #7CF08A; } .cy-fps.mid { color: #FFB21E; } .cy-fps.low { color: #FF6A4D; }
.cy-btn[aria-pressed="true"]#fpsb { color: #7CF08A; box-shadow: inset 0 0 0 1px rgba(124, 240, 138, 0.6); }
.cy-ticker { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap;
  background: linear-gradient(to top, rgba(4, 14, 9, 0.88), rgba(4, 14, 9, 0.6)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(124, 240, 138, 0.18); }
.cy-ticker::-webkit-scrollbar { display: none; }
.cy-ev { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: rgba(232, 247, 236, 0.85); font-size: 12px; }
.cy-ev.nw { animation: cyev 0.45s ease-out; }
.cy-ev:hover { background: rgba(255, 255, 255, 0.12); }
.cy-ev b { color: #fff; font-weight: 700; }
.cy-ev small { color: rgba(232, 247, 236, 0.5); font-size: 11px; }
.cy-ev i { font-style: normal; font-size: 11px; }
.cy-ev.buy i { color: #3BFF4A; } .cy-ev.sell i { color: #FF6A4D; }
.cy-ev.launch { box-shadow: inset 0 0 0 1px rgba(255, 178, 30, 0.45); }
.cy-ev.faded { opacity: 0.75; }
.cy-ev.idle { background: none; color: rgba(232, 247, 236, 0.55); animation: none; }
.cy-toasts { position: absolute; z-index: 3; left: 50%; top: 70px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.cy-toast { pointer-events: auto; border: 0; padding: 9px 16px; border-radius: 999px; font-size: 13px; white-space: nowrap; animation: cyin 0.3s ease-out; transition: opacity 0.4s, transform 0.4s; }
.cy-toast b { color: #fff; }
.cy-toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes cyev { from { opacity: 0; transform: translateX(-12px); } }
.cy-a.share { gap: 6px; border: 0; background: #E8F7EC; color: #06140B; }
.cy-a.share:hover { background: #fff; }
.cy-share { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(2, 8, 5, 0.55); }
.cy-sh-in { position: relative; width: min(560px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; animation: cyin 0.25s ease-out; }
.cy-sh-t { font-size: 18px; }
.cy-sh-img { width: 100%; border-radius: 12px; display: block; box-shadow: inset 0 0 0 1px rgba(124, 240, 138, 0.25); }
.cy-sh-n { font-size: 12.5px; color: rgba(232, 247, 236, 0.7); }
.cy-drivebtn .ic { font-size: 15px; }
.cy-dhud { position: absolute; z-index: 4; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 16px; background: rgba(6, 18, 12, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(124, 240, 138, 0.3); color: #E8F7EC; white-space: nowrap; }
.cy-spd b { font: 700 24px/1 'Spline Sans Mono', monospace; color: #3BFF4A; } .cy-spd small { margin-left: 4px; font-size: 11px; color: rgba(232, 247, 236, 0.6); }
.cy-near { font-size: 13px; font-weight: 600; } .cy-near.hot { color: #3BFF4A; }
.cy-keys { font-size: 12px; color: rgba(232, 247, 236, 0.6); } .cy-keys b { color: #fff; }
.cy-joy { position: absolute; z-index: 4; left: 18px; bottom: 60px; width: 132px; height: 132px; border-radius: 50%; background: rgba(6, 18, 12, 0.55); box-shadow: inset 0 0 0 2px rgba(124, 240, 138, 0.35); touch-action: none; }
.cy-joy i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(59, 255, 74, 0.85); box-shadow: 0 0 20px rgba(59, 255, 74, 0.6); }
.cy-horn { position: absolute; z-index: 4; right: 18px; bottom: 74px; width: 96px; height: 96px; border: 0; border-radius: 50%; background: #00C805; color: #05170C; font-size: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 200, 5, 0.45); touch-action: manipulation; }
.cy-horn span { font: 800 13px/1 'Funnel Sans', sans-serif; margin-top: 2px; }
.cy-horn:active { transform: scale(0.94); }
.cy-stage.driving .cy-legend, .cy-stage.driving .cy-hint, .cy-stage.driving .cy-labels { display: none; }
.cy-stage.driving > canvas { cursor: default; }
@keyframes cyspin { to { transform: rotate(360deg); } }
@keyframes cyin { from { opacity: 0; transform: translateY(8px); } }
@keyframes cyfade { from { opacity: 0; } }
@media (max-width: 760px) {
  .cy-stage { height: 76vh; min-height: 460px; border-radius: 24px; margin: 0 -8px; }
  .cy-tl { right: 18px; top: 66px; }
  .cy-tr { top: 14px; right: 14px; left: 14px; justify-content: flex-end; }
  .cy-hide-sm { display: none; }
  #home span { display: none; }
  .cy-btn { padding: 0 11px; }
  .cy-fps { bottom: auto; top: 118px; right: 14px; }
  .cy-chip { padding: 6px 10px; } .cy-chip b { font-size: 14px; }
  .cy-legend { font-size: 11px; gap: 4px 10px; padding: 8px 10px; }
  .cy-hint { bottom: auto; top: 118px; font-size: 11px; }
  .cy-bl { bottom: 54px; }
  .cy-dhud { left: 14px; right: 14px; transform: none; bottom: auto; top: 118px; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; }
  .cy-keys { display: none; }
  .cy-near { overflow: hidden; text-overflow: ellipsis; max-width: 170px; font-size: 12px; }
  .cy-stage.driving .cy-card { top: 164px; bottom: auto; }
  .cy-stage.driving .cy-card .cy-dl, .cy-stage.driving .cy-card .cy-ca { display: none; }
  .cy-drivebtn span:last-child { display: none; }
  .cy-horn { bottom: 60px; width: 84px; height: 84px; }
  .cy-ticker { height: 40px; padding: 0 10px; }
  .cy-ev { height: 28px; font-size: 11.5px; }
  .cy-toasts { top: 118px; width: calc(100% - 28px); }
  .cy-toast { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .cy-card { bottom: 50px; }
  .cy-card { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-width: none; padding: 16px; }
  .cy-card { gap: 10px; padding: 14px; border-radius: 18px; }
  .cy-c-head b { font-size: 18px; }
  .cy-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cy-dl div { padding: 8px; }
  .cy-dl dt { font-size: 10px; line-height: 1.2; }
  .cy-dl dd { font-size: 13px; }
  .cy-ca { display: none; }
  .cy-a { min-height: 36px; padding: 0 10px; font-size: 12.5px; }
  .cy-row { grid-template-columns: 12px minmax(0, 1fr) 84px; gap: 10px; padding: 12px 14px; }
  .cy-r { display: none; } .cy-t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cy-card, .cy-hint, .cy-ev, .cy-toast { animation: none; } .cy-spin { animation-duration: 3s; } }