.city-utility-dock { position:fixed; z-index:980; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:flex; align-items:stretch; gap:9px; transition:opacity .25s ease,transform .25s ease; }
.city-utility-dock::before { content:"CITY TOOLS"; position:absolute; right:0; bottom:calc(100% + 7px); padding:4px 7px; color:#0a0c0e; background:var(--lime,#b9f227); box-shadow:3px 3px 0 #000; font:1000 8px/1 system-ui,sans-serif; letter-spacing:.12em; transform:rotate(-1deg); }
.claim-launcher { position:relative; z-index:1; display:flex; align-items:center; gap:11px; min-width:202px; min-height:60px; padding:7px 14px 7px 8px; overflow:hidden; color:white; border:1px solid rgba(255,255,255,.34); background:linear-gradient(100deg,rgba(255,106,0,.15),rgba(7,9,12,.96) 42%); box-shadow:7px 7px 0 rgba(255,60,145,.34),0 16px 44px rgba(0,0,0,.5); backdrop-filter:blur(12px); cursor:pointer; clip-path:polygon(0 5%,96% 0,100% 82%,91% 100%,3% 95%); }
.claim-launcher::after { content:""; position:absolute; left:51px; right:12px; bottom:6px; height:3px; background:linear-gradient(90deg,var(--orange,#ff6a00),var(--pink,#ff3c91),var(--lime,#b9f227)); transform:rotate(-1deg); }
.claim-launcher:hover { border-color:var(--orange,#ff6a00); transform:translateY(-2px) rotate(-.35deg); }
.claim-launcher > i { position:relative; display:grid; place-items:center; width:40px; height:44px; border-radius:4px 4px 8px 8px; background:var(--orange,#ff6a00); box-shadow:0 0 18px rgba(255,106,0,.55),inset 0 -7px 0 rgba(0,0,0,.2); transform:rotate(-4deg); }
.claim-launcher > i::before { content:""; position:absolute; top:-4px; width:18px; height:8px; border:3px solid #080a0d; border-bottom:0; border-radius:3px 3px 0 0; }
.claim-launcher > i::after { content:""; width:13px; height:13px; transform:rotate(45deg); border:2px solid #080a0d; }
.claim-launcher > i em { position:absolute; right:-7px; top:2px; width:9px; height:4px; background:#d8dde0; box-shadow:5px 1px 0 -1px #d8dde0; }
.claim-launcher.has-claims > i { background:var(--lime,#b9f227); box-shadow:0 0 16px rgba(185,242,39,.6); }
.claim-launcher span { display:grid; gap:4px; text-align:left; }
.claim-launcher small { color:#a3abb1; font:800 9px/1 system-ui,sans-serif; letter-spacing:.09em; }
.claim-launcher b { font-size:12px; letter-spacing:.075em; }

.claim-dialog { --claim-color:var(--orange,#ff6a00); width:min(820px,calc(100vw - 24px)); max-width:none; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); min-height:0; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; color:#f3f4f2; border:1px solid rgba(255,255,255,.28); background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--claim-color) 18%,transparent),transparent 22rem),linear-gradient(145deg,#171b21,#080a0d 66%); box-shadow:0 40px 120px rgba(0,0,0,.82); }
.claim-dialog::backdrop { background:rgba(0,0,0,.84); backdrop-filter:blur(8px); }
.claim-close { position:absolute; z-index:5; top:14px; right:14px; width:44px; height:44px; color:white; border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.45); font-size:25px; cursor:pointer; }
.claim-panel { position:relative; display:none; min-height:min(610px,calc(100vh - 24px)); min-height:min(610px,calc(100dvh - 24px)); padding:clamp(34px,7vw,70px); }
.claim-panel.is-active { display:flex; flex-direction:column; justify-content:center; }
.claim-kicker { color:var(--claim-color); font:850 11px/1 system-ui,sans-serif; letter-spacing:.13em; }
.claim-panel h2 { margin:13px 0 14px; font-size:clamp(48px,8vw,84px); line-height:.83; letter-spacing:-.045em; text-shadow:4px 4px #000; }
.claim-panel h2 em { color:var(--claim-color); font-style:normal; }
.claim-panel > p { max-width:600px; color:#c1c7cb; font:550 14px/1.65 system-ui,sans-serif; }
#claimForm { margin-top:18px; }
#claimForm label,.waitlist-form label { display:block; margin-bottom:8px; color:#e0e3e5; font:850 11px/1 system-ui,sans-serif; letter-spacing:.1em; }
#claimForm > div,.waitlist-form > div { display:grid; grid-template-columns:1fr auto; gap:6px; }
#claimForm input,.waitlist-form input { min-width:0; height:48px; padding:0 14px; color:white; border:1px solid rgba(255,255,255,.25); background:#080b0e; border-radius:0; outline:none; font:800 14px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.waitlist-form input { text-transform:none; letter-spacing:.04em; }
#claimForm input:focus,.waitlist-form input:focus { border-color:var(--claim-color); box-shadow:0 0 0 2px color-mix(in srgb,var(--claim-color) 25%,transparent); }
#claimForm button,.waitlist-form button { min-height:48px; padding:0 18px; color:#080a0d; border:1px solid var(--claim-color); background:var(--claim-color); cursor:pointer; font-size:11px; font-weight:900; letter-spacing:.08em; }
#claimError { display:block; min-height:18px; margin-top:8px; color:#ff9aa3; font:800 11px/1.4 system-ui,sans-serif; letter-spacing:.06em; }
.claim-ledger { display:flex; align-items:center; gap:16px; margin-top:18px; padding:13px 15px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.025); }
.claim-ledger span { display:grid; gap:4px; }
.claim-ledger small { color:#a2aab0; font:750 10px/1 system-ui,sans-serif; letter-spacing:.09em; }
.claim-ledger b { font-size:19px; }
.claim-ledger i { align-self:stretch; width:1px; background:rgba(255,255,255,.15); }
.claim-note { margin-bottom:0; color:#929aa0!important; font-size:11px!important; }

.claim-success { position:relative; align-items:center; text-align:center; }
.claim-success.is-active { justify-content:flex-start; }
.claim-check { position:relative; z-index:2; display:grid; place-items:center; width:74px; height:74px; margin-bottom:25px; color:#080a0d; border-radius:50%; background:var(--claim-color); box-shadow:0 0 30px color-mix(in srgb,var(--claim-color) 60%,transparent); font-size:38px; font-weight:900; }
.claim-success h2 { position:relative; z-index:2; margin-bottom:8px; font-size:clamp(42px,7vw,70px); }
.claim-release-note { position:relative; z-index:2; max-width:500px; margin:14px auto 0; color:#b9c0c4; font:700 11px/1.6 system-ui,sans-serif; }
.claim-release-note[hidden],#claimReleaseLink[hidden] { display:none; }
.claim-found-name { position:relative; z-index:2; margin:0 0 15px!important; color:#e0e4e6!important; font-size:11px!important; font-weight:850!important; letter-spacing:.09em!important; }
.claim-evidence { --focus-x:50%; --focus-y:50%; position:relative; z-index:2; width:min(540px,100%); min-height:145px; margin:0 0 12px; overflow:hidden; border:2px solid color-mix(in srgb,var(--claim-color) 65%,white); background:#040608; box-shadow:7px 8px 0 rgba(0,0,0,.6); transform:rotate(-.45deg); }
.claim-evidence::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(2,4,7,.9),transparent 58%),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.045) 5px); }
.claim-evidence img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.08) brightness(.82); }
.claim-evidence > span { position:absolute; z-index:4; left:14px; bottom:12px; display:grid; gap:5px; text-align:left; text-shadow:0 2px 6px #000; }
.claim-evidence > span small { color:var(--claim-color); font:900 10px/1 system-ui,sans-serif; letter-spacing:.1em; }
.claim-evidence > span b { font-size:20px; line-height:1; }
.claim-evidence > i { position:absolute; z-index:4; left:var(--focus-x); top:var(--focus-y); width:46px; height:46px; transform:translate(-50%,-50%); border:1px solid var(--claim-color); border-radius:50%; box-shadow:0 0 0 6px color-mix(in srgb,var(--claim-color) 14%,transparent),0 0 24px var(--claim-color); animation:claimEvidenceLock 1.8s ease-in-out infinite; }
.claim-evidence > i::before,.claim-evidence > i::after { content:""; position:absolute; background:var(--claim-color); }.claim-evidence > i::before { left:50%; top:-8px; bottom:-8px; width:1px; }.claim-evidence > i::after { top:50%; left:-8px; right:-8px; height:1px; }.claim-evidence > i b { position:absolute; inset:15px; border-radius:50%; background:color-mix(in srgb,var(--claim-color) 42%,transparent); box-shadow:0 0 12px var(--claim-color); }
.claim-reward { position:relative; z-index:2; display:grid; width:min(500px,100%); gap:7px; padding:17px; border:1px solid color-mix(in srgb,var(--claim-color) 55%,transparent); background:color-mix(in srgb,var(--claim-color) 7%,#090b0e); }
.claim-reward small { color:var(--claim-color); font:850 10px/1 system-ui,sans-serif; letter-spacing:.1em; }
.claim-reward b { font-size:20px; }
.claim-reward p { margin:0; color:#bcc2c6; font:550 12px/1.55 system-ui,sans-serif; }
.claim-chain { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:7px 12px; width:min(500px,100%); margin-top:13px; padding:16px; overflow:hidden; border:1px dashed color-mix(in srgb,var(--claim-color) 72%,white); background:linear-gradient(135deg,color-mix(in srgb,var(--claim-color) 10%,#080a0d),#080a0d); text-align:left; }
.claim-chain-stamp { grid-column:1/-1; justify-self:start; margin-bottom:4px; padding:6px 9px; color:#080a0d; background:var(--claim-color); font:950 9px/1 system-ui,sans-serif; letter-spacing:.1em; transform:rotate(-1.3deg); box-shadow:4px 4px 0 rgba(0,0,0,.35); animation:claimStampIn .55s cubic-bezier(.2,.85,.2,1) both; }
.claim-chain span { display:contents; }.claim-chain small { color:#a7afb5; font:800 9px/1.2 system-ui,sans-serif; letter-spacing:.08em; }.claim-chain span b { color:#fff; font:950 10px/1.2 system-ui,sans-serif; }
.claim-chain > i { grid-column:1/-1; height:5px; overflow:hidden; background:rgba(255,255,255,.1); }.claim-chain > i b { display:block; width:0; height:100%; background:var(--claim-color); box-shadow:0 0 14px var(--claim-color); transition:width .55s ease .2s; }
.waitlist-form { position:relative; z-index:2; display:none; width:min(500px,100%); margin-top:13px; text-align:left; }
.waitlist-form.is-visible { display:block; }
#waitlistStatus { display:block; min-height:16px; margin-top:7px; color:var(--claim-color); font:750 10px/1.4 system-ui,sans-serif; letter-spacing:.06em; }
.success-actions { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:15px; }
.success-actions a,.success-actions button { min-height:44px; display:grid; place-items:center; padding:0 15px; border:1px solid rgba(255,255,255,.25); background:transparent; color:white; text-decoration:none; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.08em; }
.success-actions a { color:#080a0d; border-color:var(--claim-color); background:var(--claim-color); }
.claim-confetti { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.claim-confetti i { --angle:calc(var(--i) * 47deg); position:absolute; left:50%; top:32%; width:7px; height:18px; background:hsl(calc(var(--i) * 41deg) 85% 56%); transform:rotate(var(--angle)); animation:claimBurst 1.25s calc(var(--i) * .015s) ease-out both; }

@keyframes claimBurst { from { opacity:1; translate:0 0; rotate:0deg; } to { opacity:0; translate:calc(cos(var(--angle)) * 290px) calc(sin(var(--angle)) * 290px + 120px); rotate:520deg; } }
@keyframes claimEvidenceLock { 0%,100% { transform:translate(-50%,-50%) scale(.86); opacity:.65; } 50% { transform:translate(-50%,-50%) scale(1.08); opacity:1; } }

@media (max-width:620px) {
  .city-utility-dock { right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); gap:7px; }
  .city-utility-dock::before { display:none; }
  .claim-launcher { min-width:0; width:52px; min-height:54px; padding:7px; touch-action:manipulation; }
  .claim-launcher::after { left:7px; right:7px; }
  .claim-launcher span { display:none; }
  .claim-dialog { width:calc(100vw - 16px); height:calc(100vh - 16px); height:calc(100dvh - 16px); max-height:none; min-height:0; }
  .claim-panel { min-height:100%; padding-top:max(58px,calc(env(safe-area-inset-top) + 52px)); padding-right:max(20px,env(safe-area-inset-right)); padding-bottom:max(28px,env(safe-area-inset-bottom)); padding-left:max(20px,env(safe-area-inset-left)); }
  .claim-panel.is-active { justify-content:flex-start; }
  .claim-close { top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); }
  #claimForm > div,.waitlist-form > div { grid-template-columns:1fr; }
  #claimForm input,.waitlist-form input { min-height:50px; height:50px; font-size:16px; }
  #claimForm button,.waitlist-form button,.success-actions a,.success-actions button { min-height:48px; }
  .claim-panel h2 { max-width:100%; font-size:clamp(40px,14vw,52px); overflow-wrap:anywhere; }
  .claim-evidence { min-height:125px; }
  .claim-evidence > span b { font-size:17px; }
}

@media (max-width:380px) {
  .claim-panel { padding-right:max(16px,env(safe-area-inset-right)); padding-left:max(16px,env(safe-area-inset-left)); }
  .claim-ledger { align-items:flex-start; flex-direction:column; gap:10px; }
  .claim-ledger i { width:100%; height:1px; }
  .success-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .success-actions a,.success-actions button { width:100%; }
}

@media (max-width:950px) and (max-height:600px) and (orientation:landscape) {
  .claim-dialog { width:calc(100vw - 12px); height:calc(100vh - 12px); height:calc(100dvh - 12px); max-height:none; min-height:0; }
  .claim-panel { min-height:100%; padding-top:max(48px,env(safe-area-inset-top)); padding-right:max(24px,env(safe-area-inset-right)); padding-bottom:max(24px,env(safe-area-inset-bottom)); padding-left:max(24px,env(safe-area-inset-left)); }
  .claim-close { top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); }
  #claimForm input,.waitlist-form input { font-size:16px; }
}

@media (hover:none),(pointer:coarse) {
  .claim-launcher:hover { transform:none; }
  #claimForm input,.waitlist-form input { font-size:16px; }
}

@media (prefers-reduced-motion:reduce) { .claim-confetti i { animation:none; display:none; }.claim-evidence > i { animation:none; } }
@keyframes claimStampIn { from { opacity:0; transform:scale(1.4) rotate(-8deg); } to { opacity:1; transform:scale(1) rotate(-1.3deg); } }
