:root{
  --bg:#0a0e17;
  --bg-deep:#05070c;
  --panel:#121826;
  --panel2:#0f1521;
  --line:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.10);
  --txt:#eaf0fb;
  --muted:#8b97ad;
  --muted2:#6b7689;
  --accent:#3b9cff;
  --accent2:#2563eb;
  --up:#34d399;
  --danger:#f87171;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  background:var(--bg-deep);color:var(--txt);
  display:flex;justify-content:center;
  min-height:100vh;
}
.phone{
  width:100%;max-width:430px;
  background:var(--bg);
  min-height:100vh;
  position:relative;
  padding:0 16px 104px;
  overflow-x:hidden;
}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px 6px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,var(--bg) 75%,rgba(10,14,23,0));
}
.brand{display:flex;align-items:center;gap:9px;}
.brand-mark{
  width:24px;height:24px;border-radius:8px;
  background:conic-gradient(from 0deg,#ff5da2,#ffb703,#34d399,#3b9cff,#8b5cf6,#ff5da2);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 2px 8px rgba(0,0,0,.4);
}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-.3px;}
.me-pill{
  display:flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--line);color:var(--txt);
  font:600 12.5px/1 inherit;padding:8px 12px;border-radius:999px;cursor:pointer;
  max-width:160px;
}
.me-pill #meName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.me-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(59,156,255,.18);}

/* ---- views ---- */
.view{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.view-head{display:flex;align-items:center;gap:10px;margin:14px 2px 14px;}
.view-head h1{font-size:22px;font-weight:700;letter-spacing:-.5px;margin:0;}
.count-pill{margin-left:auto;background:var(--panel);border:1px solid var(--line);
  color:var(--accent);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;
  font-family:ui-monospace,Menlo,monospace;}

/* ---- hero / supply ---- */
.hero{
  margin-top:8px;border-radius:22px;overflow:hidden;position:relative;
  background:radial-gradient(120% 140% at 85% 0%, #1d3a63 0%, #122742 45%, #0c1626 100%);
  border:1px solid var(--line);
  padding:20px 18px 18px;
}
.hero .dolphin-bg{position:absolute;top:-14px;right:-10px;width:170px;opacity:.8;pointer-events:none;}
.hlabel{font-size:12.5px;color:#bcd0ec;display:flex;align-items:center;gap:6px;font-weight:600;}
.supply-num{
  font-size:42px;font-weight:800;letter-spacing:-1.5px;margin:6px 0 0;
  font-variant-numeric:tabular-nums;line-height:1;
}
.supply-of{font-size:13px;color:#cdd9ee;margin-top:6px;}
.supply-cap{font-weight:700;color:#eaf0fb;font-variant-numeric:tabular-nums;}
.supply-bar{margin-top:14px;height:7px;border-radius:99px;background:rgba(8,14,24,.6);
  overflow:hidden;border:1px solid var(--line);}
.supply-bar-fill{height:100%;border-radius:99px;width:0%;
  background:linear-gradient(90deg,#3b9cff,#8b5cf6);transition:width .6s ease;
  box-shadow:0 0 10px rgba(59,156,255,.5);min-width:3px;}
.supply-remaining{font-size:12px;color:#9fb2cd;margin-top:8px;font-variant-numeric:tabular-nums;}
.supply-remaining span{font-weight:700;color:#cfe0f7;}
.tagline{margin:14px 0 0;font-size:12.5px;color:#aebfd6;line-height:1.45;
  border-top:1px solid var(--line);padding-top:13px;}

/* ---- panels ---- */
.panel{margin-top:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:18px;}
.panel-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;}
.panel-head h2{font-size:17px;font-weight:700;margin:0;letter-spacing:-.3px;}
.panel-sub{font-size:11.5px;color:var(--muted);}

/* ---- coins (shared) ---- */
.coin-xl,.coin-lg{
  position:relative;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.coin-xl{width:128px;height:128px;}
.coin-lg{width:104px;height:104px;}
.coin{position:relative;width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.45),inset 0 -5px 10px rgba(0,0,0,.38),0 6px 18px rgba(0,0,0,.45);}
.empty-coin .ring{box-shadow:inset 0 2px 5px rgba(255,255,255,.12),inset 0 -5px 10px rgba(0,0,0,.3);}
.dolphin-holder{position:relative;z-index:2;display:flex;}
.dolphin-holder svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));}
.coin-xl .dolphin-holder svg{width:60px;height:60px;}
.coin-lg .dolphin-holder svg{width:50px;height:50px;}
.coin .dolphin-holder svg{width:34px;height:34px;}

/* ---- reveal stage ---- */
.reveal{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:18px 0 8px;min-height:200px;justify-content:center;}
.coin-xl.idle{background:radial-gradient(circle at 32% 28%,#1b2536,#10182a 60%,#0a1120);}
.coin-xl.idle .dolphin-holder{opacity:.35;}
.coin-xl.flip{animation:flip .7s cubic-bezier(.3,.7,.3,1);}
@keyframes flip{
  0%{transform:rotateY(0) scale(1);}
  45%{transform:rotateY(540deg) scale(.85);}
  100%{transform:rotateY(720deg) scale(1);}
}
.coin-xl.rolling{animation:spin .35s linear infinite;}
@keyframes spin{from{transform:rotateY(0);}to{transform:rotateY(360deg);}}
.reveal-meta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.reveal-hex,.explore-hex{font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:700;
  letter-spacing:1px;}
.reveal-owner{font-size:12.5px;color:var(--muted);min-height:16px;}
.reveal-owner.taken{color:var(--danger);font-weight:600;}
.reveal-owner.mine{color:var(--up);font-weight:600;}

/* ---- rarity badge ---- */
.rarity-badge{display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid currentColor;}
.rarity-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;}

/* ---- buttons ---- */
.btn-primary{
  width:100%;background:linear-gradient(135deg,#3b9cff,#2563eb);border:none;color:#fff;
  font:700 15px/1 inherit;padding:15px;border-radius:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 6px 18px rgba(37,99,235,.35);transition:transform .12s,box-shadow .2s;
}
.btn-primary:active{transform:scale(.97);}
.btn-primary:disabled{opacity:.55;cursor:default;box-shadow:none;}
.btn-roll{margin-top:6px;}
.btn-claim{
  width:100%;margin-top:10px;background:linear-gradient(135deg,#34d399,#0d9488);border:none;color:#04221a;
  font:800 15px/1 inherit;padding:15px;border-radius:14px;cursor:pointer;
  box-shadow:0 6px 18px rgba(13,148,136,.3);transition:transform .12s;
  animation:fade .25s ease;
}
.btn-claim:active{transform:scale(.97);}
.btn-claim:disabled{opacity:.55;}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--txt);
  font:600 13.5px/1 inherit;padding:12px 18px;border-radius:12px;cursor:pointer;}
.btn-ghost:active{transform:scale(.97);}

/* ---- divider ---- */
.divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--muted2);
  font-size:11px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---- hex form ---- */
.hex-form{display:flex;gap:9px;}
.hex-input-wrap{flex:1;display:flex;align-items:center;background:var(--panel2);
  border:1px solid var(--line2);border-radius:12px;padding:0 12px;
  transition:border-color .15s,box-shadow .15s;}
.hex-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,156,255,.15);}
.hex-input-wrap .hash{color:var(--muted);font-family:ui-monospace,monospace;font-size:16px;font-weight:600;}
.hex-input{flex:1;background:none;border:none;outline:none;color:var(--txt);
  font-family:ui-monospace,Menlo,monospace;font-size:16px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;padding:13px 4px 13px 6px;width:100%;}
.hex-input::placeholder{color:var(--muted2);letter-spacing:1px;}
.btn-check{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  font:700 13.5px/1 inherit;padding:0 16px;border-radius:12px;cursor:pointer;white-space:nowrap;}
.btn-check:active{transform:scale(.96);}

/* ---- collection grid ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;
  transition:transform .12s,border-color .2s;animation:pop .3s ease;
}
.card:active{transform:scale(.96);}
@keyframes pop{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
.card .hexline{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  font-family:ui-monospace,Menlo,monospace;margin-top:9px;}
.card .card-rarity{font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;margin-top:6px;border:1px solid currentColor;}
.card .share{margin-top:8px;display:flex;align-items:center;gap:4px;background:none;border:none;
  color:var(--accent);font:700 11px/1 inherit;cursor:pointer;padding:4px;}
.card .share:active{opacity:.6;}

/* ---- empty ---- */
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:50px 0;text-align:center;}
.empty p{color:var(--muted);font-size:14px;margin:0;}
.empty-coin{width:72px;height:72px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 32% 28%,#1b2536,#10182a 60%,#0a1120);}

/* ---- explore ---- */
.explore-lead{color:var(--muted);font-size:13px;margin:0 2px 14px;line-height:1.45;}
.explore-result{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:11px;
  animation:fade .25s ease;}
.explore-status{font-size:13px;color:var(--muted);text-align:center;}
.explore-status .who{color:var(--txt);font-weight:700;}
.explore-status.open{color:var(--up);font-weight:600;}
.explore-actions{display:flex;gap:10px;margin-top:4px;width:100%;}
.explore-actions button{flex:1;}

/* ---- bottom nav ---- */
.nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:rgba(10,14,23,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));z-index:30;
}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);
  font:600 10.5px/1 inherit;background:none;border:none;cursor:pointer;padding:4px;transition:color .15s;}
.nav-btn.on{color:var(--accent);}

/* ---- modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(3,5,9,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:24px;animation:fade .2s ease;}
.modal-backdrop[hidden]{display:none;}
.modal{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line2);
  border-radius:20px;padding:22px;}
.modal h3{margin:0 0 6px;font-size:18px;font-weight:700;}
.modal p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.45;}
.modal-input{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  color:var(--txt);font:600 16px/1 inherit;padding:14px;outline:none;}
.modal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,156,255,.15);}
.modal-actions{display:flex;gap:10px;margin-top:16px;}
.modal-actions .btn-ghost,.modal-actions .btn-primary{flex:1;}

/* ---- toast ---- */
.toast{
  position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1c2433;border:1px solid var(--line2);color:#eaf0fb;
  padding:11px 16px;border-radius:12px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;display:flex;align-items:center;gap:9px;z-index:50;
  max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .sw{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 1px 2px rgba(255,255,255,.4);}