/* =============================
   Minimal Token Landing – Haruto, Fullscreen BG Image
============================= */

:root{
  --ink:#0b0f1a;
  --white:#ffffff;
  --muted:#dbe7ff;
  --accent:#2A7BFF;
  --accent-2:#6BB3FF;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --nav-h: 60px;
}

/* Local Haruto font (drop files into /fonts) */
@font-face{
  font-family:'Haruto';
  src: url('fonts/Haruto.woff2') format('woff2'),
       url('fonts/Haruto.woff') format('woff'),
       url('fonts/Haruto.ttf') format('truetype'),
       url('fonts/Haruto.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  color:var(--white);
  font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.6;
  background:#000;
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace }

/* Fullscreen background image */
.bg-image{
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; filter: saturate(1.05) contrast(1.05);
}
.bg-overlay{
  position: fixed; inset: 0;
  background: radial-gradient(1000px 500px at 80% -20%, rgba(42,123,255,.25), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 70%);
  z-index: -1;
}

/* Nav: logo only */
.nav{
  height: var(--nav-h);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-inner{
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  width:40px; height:40px; border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Center stack */
.center-stage{
  min-height: calc(100vh - var(--nav-h));
  padding: 48px 16px 72px;
  display:grid; place-items:center; text-align:center;
  gap: 16px;
}

.title-img{
  width: min(90vw, 540px);
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.35));
}

/* JP-style contract address card */
.ca-wrap{
  position: relative;
  display: grid; place-items:center;
  margin-top: 8px;
}
.jp-tag{
  position:absolute; left: 50%; transform: translateX(-50%) translateY(-70%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:700; letter-spacing:.08em;
  padding: .25rem .6rem; border:2px solid rgba(255,255,255,.65);
  border-radius: 999px;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  font-size: .85rem;
  font-family: 'Haruto', 'Noto Sans JP', system-ui;
}
.ca-card{
  width: min(92vw, 720px);
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
  backdrop-filter: blur(6px);
}
.ca-label{
  display:block; text-align:center; font-weight:700; letter-spacing:.08em; color: var(--muted);
  font-family: 'Haruto', 'Noto Sans JP', system-ui;
}
.ca-field{
  display:flex; align-items:center; gap:10px; justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.35);
  border-radius: 10px; padding: 10px 12px; margin-top: 8px;
}
#caText{ font-size: .95rem; word-break: break-all }
.btn-copy{
  cursor:pointer; border: 2px solid rgba(255,255,255,.8);
  background: transparent; color:#fff; font-weight:800;
  padding:.45rem .7rem; border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  font-family: 'Haruto', 'Noto Sans JP', system-ui;
}
.btn-copy:hover{ background: rgba(255,255,255,.1) }
.copy-msg{
  margin-top:6px; font-size:.9rem; color:#b9e7ff; opacity:0; transition: opacity .25s ease
}
.copy-msg.show{ opacity:1 }

/* PNG social icons */
.social-bottom{
  position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%);
  display:flex; align-items:center; gap:12px;
  background: rgba(0,0,0,.35); padding:6px 10px; border-radius:999px;
  border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(6px);
}

.social-bottom a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
}

.social-bottom a:hover{ background: rgba(255,255,255,.08) }

.social-bottom .icon{
  display:block; width:22px; height:22px; object-fit:contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
/* Make PNG icons turn red and grow on hover */
.social-bottom .icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  transition: transform .2s ease, filter .2s ease;
}

.social-bottom a:hover .icon,
.social-bottom a:focus-visible .icon{
  /* bigger */
  transform: scale(1.35);
  /* tint to red (works best if your PNGs are white/black on transparent) */
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.4))
    sepia(1)              /* add warm tone */
    saturate(8000%)       /* boost color */
    hue-rotate(-5deg)     /* nudge toward red */
    brightness(.95);      /* slight darken */
}