/* $WASTED shared UI — GTA pause-menu button language + consistency layer.
   Linked after each page's own styles so these overrides win. */

:root{
  --ui-ease:cubic-bezier(.2,.7,.2,1);
  --ui-fast:.16s;
  --gta-gold:#F0C850;
  --gta-gold-dim:#c9a33a;
  --gta-ink:#0a0a0a;
  --gta-panel:rgba(12,12,14,.88);
  --gta-panel-solid:#121214;
  --gta-line:rgba(255,255,255,.16);
  --gta-pink:#ff3d8b;
  --gta-radius:3px;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%}
:focus-visible{outline:3px solid var(--gta-gold);outline-offset:3px}
button,a,[role="button"],summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ——— GTA pause-menu / in-game UI buttons ———
   Shape: sharp rectangles (3px). Type: heavy, tracked, uppercase.
   Primary keeps $WASTED magenta fill; hover/selected = warm gold menu row.
   Do NOT use Pricedown on these labels. */
.cta,.button,.chip,.nav-cta,.music-toggle,.menu,.copy-ca,
.mbar a,.template{
  position:relative;
  border-radius:var(--gta-radius)!important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800!important;
  box-sizing:border-box;
  transition:
    transform var(--ui-fast) var(--ui-ease),
    filter var(--ui-fast) var(--ui-ease),
    box-shadow var(--ui-fast) var(--ui-ease),
    border-color var(--ui-fast) var(--ui-ease),
    background-color var(--ui-fast) var(--ui-ease),
    background var(--ui-fast) var(--ui-ease),
    color var(--ui-fast) var(--ui-ease);
}

/* Left accent via inset box-shadow (avoids clobbering .hero-links .cta:before ↗) */

/* Primary CTAs — magenta block with bevel, not a pill */
.cta.p,
.button:not(.ghost):not(.secondary):not(.small-ghost),
.nav-cta,
.mbar a.mbar-buy,
a.button:not(.ghost):not(.secondary){
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 42%),linear-gradient(135deg,#ff5a9a,#ff3d8b 42%,#6a3df0)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:
    inset 3px 0 0 rgba(255,255,255,.55),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 6px 18px rgba(255,61,139,.22)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Secondary / ghost — dark translucent menu row */
.cta.g,
.button.ghost,
.button.secondary,
.chip,
.mbar a:not(.mbar-buy),
.music-toggle,
.menu{
  background:var(--gta-panel)!important;
  color:#f2efe8!important;
  border:1px solid var(--gta-line)!important;
  box-shadow:
    inset 3px 0 0 rgba(240,200,80,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  text-shadow:none;
}

/* Sizing: keep 44px touch targets */
.cta,.button,.nav-cta,.copy-ca{min-height:44px}
.cta{padding:12px 20px;font-size:14px;gap:8px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.button{padding:10px 18px;font-size:13px}
.button.small{min-height:40px;padding:7px 14px;font-size:12px;letter-spacing:.07em}
.chip{min-height:36px;padding:6px 14px;font-size:12px;letter-spacing:.07em;border-radius:var(--gta-radius)!important}
.nav-cta{padding:8px 14px;font-size:12px;letter-spacing:.1em}
.job .cta,.hero-links .cta{min-height:40px;padding:9px 14px;font-size:12px;letter-spacing:.07em}
nav .cta{padding:8px 14px;font-size:12px;letter-spacing:.1em;min-height:40px}

/* Focus — gold menu select ring */
.cta:focus-visible,
.button:focus-visible,
.chip:focus-visible,
.nav-cta:focus-visible,
.music-toggle:focus-visible,
.menu:focus-visible,
.copy-ca:focus-visible,
.mbar a:focus-visible{
  outline:2px solid var(--gta-gold)!important;
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(240,200,80,.22)!important;
}

/* Hover / selected = gold pause-menu row (desktop pointers only) */
@media(hover:hover){
  .cta:hover,
  .button:not(:disabled):not([aria-disabled="true"]):hover,
  .nav-cta:hover,
  .copy-ca:hover,
  .mbar a:hover,
  .chip:hover,
  .music-toggle:hover,
  .menu:hover{
    transform:none;
    filter:none;
    background:var(--gta-gold)!important;
    color:var(--gta-ink)!important;
    border-color:var(--gta-gold-dim)!important;
    box-shadow:
      inset 3px 0 0 var(--gta-ink),
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 0 0 1px rgba(0,0,0,.25)!important;
    text-shadow:none;
  }
  .chip[aria-pressed="true"]{
    background:var(--gta-gold)!important;
    color:var(--gta-ink)!important;
    border-color:var(--gta-gold-dim)!important;
  }
  /* gentle card lift still ok */
  .card.tile:hover,.card.ms:hover,.card.step:hover,.dispatch-row:hover{transform:translateY(-3px)}
  .card:hover{border-color:#4a2a4f}
}

/* Pressed */
.cta:active,.button:not(:disabled):active,.chip:active,.nav-cta:active,
.music-toggle:active,.menu:active,.copy-ca:active,.mbar a:active{
  transform:translateY(1px);
  filter:brightness(.96);
  transition-duration:.08s;
}
.chip[aria-pressed="true"]{
  background:var(--gta-gold)!important;
  color:var(--gta-ink)!important;
  border-color:var(--gta-gold-dim)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important;
}

@media(hover:none){
  .mission:hover,.item:hover,.room:hover,.dispatch-row:hover,.card:hover{transform:none!important}
}

/* Music toggle — same language, quieter corner control */
.music-toggle{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:30;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:0 14px 0 12px!important;
  font:800 12px/1 Inter,ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:.08em!important;
  cursor:pointer;
}
.music-toggle.on{border-color:rgba(255,61,139,.65)!important}
.music-toggle .eq{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:13px}
.music-toggle .eq i{display:block;width:3px;height:4px;border-radius:1px;background:#a39cb5;transition:height .2s,background-color .2s}
.music-toggle.on .eq i{background:#ff3d8b;animation:ui-eq .9s ease-in-out infinite alternate}
.music-toggle.on .eq i:nth-child(2){animation-delay:-.45s}
.music-toggle.on .eq i:nth-child(3){animation-delay:-.2s}
@keyframes ui-eq{0%{height:3px}100%{height:13px}}
@media(max-width:600px){
  .music-toggle{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));padding:0 12px 0 10px!important;font-size:11px!important}
  #toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 58px)!important}
}

/* Homepage mobile bottom bar — menu tiles */
.mbar a{
  border-radius:var(--gta-radius)!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}
.mbar a.mbar-buy{box-shadow:inset 3px 0 0 rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(255,61,139,.28)!important}

/* Desktop nav underline indicator */
@media(min-width:861px){
  nav .links a:not(.cta):not(.nav-cta),nav .nav-links a:not(.button){position:relative;transition:color var(--ui-fast) var(--ui-ease)}
  nav .links a:not(.cta):not(.nav-cta)::after,nav .nav-links a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:1px;background:linear-gradient(90deg,#ff8a3d,#ff3d8b,#6a3df0);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ui-ease)}
  nav .links a:not(.cta):not(.nav-cta):hover::after,nav .nav-links a:not(.button):hover::after,nav .links a[aria-current="page"]::after,nav .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
  nav .links a[aria-current="page"],nav .nav-links a[aria-current="page"]{color:#fff}
}

/* Inner pages on mobile: swipeable nav row */
@media(max-width:860px){
  nav .wrap,nav .nav-inner{gap:10px}
  nav .nav-links,nav .links:not(#nav-links){display:flex!important;flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center;gap:2px!important;margin-left:6px;padding-right:28px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  nav .nav-links::-webkit-scrollbar,nav .links:not(#nav-links)::-webkit-scrollbar{display:none}
  nav .nav-links a,nav .links:not(#nav-links) a{display:inline-flex!important;align-items:center;flex:0 0 auto;min-height:44px;padding:0 10px;white-space:nowrap;border-radius:var(--gta-radius)}
  nav .nav-links a.button,nav .links:not(#nav-links) a.nav-cta{min-height:38px;padding:0 12px;margin-left:4px}
  nav .links:not(#nav-links) a[aria-current="page"],nav .nav-links a[aria-current="page"]{color:#fff;background:rgba(240,200,80,.12);box-shadow:inset 3px 0 0 var(--gta-gold)}
  nav .logo,nav .brand{flex:0 0 auto}
}

@media(prefers-reduced-motion:reduce){
  .cta,.button,.chip,.nav-cta,.music-toggle,.menu,.copy-ca,.mbar a,.card,.mission,.item,.dispatch-row{transition:none!important;transform:none!important}
  .music-toggle .eq i{animation:none!important;height:9px!important}
  nav .links a::after,nav .nav-links a::after{transition:none!important}
}

/* Frosted sticky nav */
nav:not(:has(.nav-inner)):not(.mbar){-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
@supports not (backdrop-filter:blur(1px)){nav:not(:has(.nav-inner)){background:rgba(10,8,14,.96)!important}}

/* Temple Rug site chrome only — leave .game-shell in-game buttons alone */
.hero .button:not(.secondary),
.board-section .button:not(.secondary){
  border-radius:var(--gta-radius)!important;
}
.game-shell .button,
.game-shell .button.secondary{
  /* preserve existing in-game gold styling; do not force magenta */
  text-transform:uppercase;
  letter-spacing:.06em;
}