/* Croc.JuxOG — Ultra-modern aesthetic without frameworks. */
:root{
  --bg: hsl(240 10% 4%);
  --panel: hsl(240 12% 8%);
  --ink: hsl(0 0% 98%);
  --muted: hsl(240 6% 70%);
  --accent: hsl(142 70% 50%);
  --accent-2: hsl(210 90% 55%);
  --ring: hsl(142 70% 45% / .35);
  --shadow: 0 10px 30px hsl(0 0% 0% / .45);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0; font: 16px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink); background: radial-gradient(1200px 800px at 70% -10%, hsl(142 60% 18% / .25), transparent) var(--bg);
  display:flex; align-items:center; justify-content:center;
}

.wrap{ width:min(1100px, 92vw); }

.site-header, .site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px; gap:12px;
}

.brand{ display:flex; gap:12px; align-items:center; }
.brand h1{ margin:0; font-size: clamp(18px, 3vw, 28px); letter-spacing:.4px; }
.brand .dot{ color:var(--muted); }
.brand .accent{ color:var(--accent); }
.tag{ margin:0; color:var(--muted); font-size:12px; }

.logo{ filter: drop-shadow(0 2px 4px hsl(0 0% 0% /.4)); }

.actions a, .actions button{
  appearance:none; border:1px solid hsl(0 0% 50% / .15);
  background:hsl(0 0% 100% / .02); color:var(--ink);
  padding:10px 14px; border-radius:14px;
  text-decoration:none; box-shadow: var(--shadow);
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.actions .primary{ border-color: hsl(210 90% 55% / .4); }
.actions a:hover, .actions button:hover{ transform: translateY(-1px); background:hsl(0 0% 100% / .05); }
.actions .ghost{ background:transparent; box-shadow:none; }

.stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; padding: 10px 20px 0; }
.stat{
  background:linear-gradient(180deg, hsl(0 0% 100% / .03), hsl(0 0% 100% / .00));
  padding:16px 18px; border-radius:18px; border:1px solid hsl(0 0% 50% / .15);
  display:flex; flex-direction:column; gap:6px; box-shadow: var(--shadow);
}
.stat .label{ color:var(--muted); font-size:12px; }
.stat .value{ font-size: clamp(22px, 4vw, 44px); font-weight: 800; letter-spacing:.5px; }

.stage{
  margin: 18px 0; position:relative; height: 54vh; min-height: 360px; max-height: 640px;
  background: radial-gradient(500px 220px at 50% 40%, hsl(142 60% 20% / .45), transparent), var(--panel);
  border:1px solid hsl(0 0% 50% / .15); border-radius: 28px; overflow:hidden;
  box-shadow: var(--shadow);
}

.croc{ position:absolute; inset:auto 0 22% 0; margin:auto; width:min(520px, 64vw); transform-origin: 50% 80%; }
.croc:active{ transform: scale(.98); }

.croc-svg{ width:100%; height:auto; display:block; filter: drop-shadow(0 10px 30px hsl(0 0% 0% /.45)); }

.hitfx{
  position:absolute; inset:auto 0 72% 0; margin:auto; width:max-content; padding:6px 10px;
  background:hsl(0 0% 100% / .06); border:1px solid hsl(0 0% 100% / .15); border-radius: 999px;
  transform: translateY(10px) scale(.9); opacity:0; transition: transform .15s ease, opacity .15s ease;
  font-weight:700; letter-spacing:.4px; text-shadow: 0 2px 8px hsl(0 0% 0% /.6);
}
.hitfx.show{ transform: translateY(-6px) scale(1); opacity:1; }

.pan{
  --x: 50%; --y: 50%;
  position:absolute; width: 92px; height:92px; border-radius: 60px;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events:none; filter: drop-shadow(0 10px 20px hsl(0 0% 0% /.5));
  background:
    radial-gradient(circle at 60% 40%, hsl(0 0% 100% / .25), transparent 35%),
    conic-gradient(from 200deg at 60% 60%, transparent 0 270deg, hsl(0 0% 100% / .14) 270deg 330deg, transparent 330deg 360deg),
    radial-gradient(circle at 35% 45%, hsl(0 0% 15%), hsl(0 0% 8%) 60%),
    radial-gradient(circle at 35% 45%, hsl(0 0% 10%), hsl(0 0% 4%) 62%);
  border: 2px solid hsl(0 0% 100% / .18);
  box-shadow: inset 0 0 8px hsl(0 0% 100% / .05);
}

.bonk, .ghost{
  appearance:none; border:1px solid hsl(0 0% 50% / .15);
  background:linear-gradient(180deg, hsl(0 0% 100% / .06), hsl(0 0% 100% / .02));
  color:var(--ink); padding:14px 18px; border-radius:18px; font-size:16px; font-weight:700;
  letter-spacing:.4px; box-shadow: var(--shadow);
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bonk{ border-color: hsl(142 70% 45% / .35); }
.bonk:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px hsl(142 70% 30% / .25); }
.ghost:hover{ transform: translateY(-1px); }

.cta{ display:flex; gap:10px; padding: 8px 20px 20px; }

.site-footer{ justify-content:center; gap:18px; color:var(--muted); }

@media (max-width: 720px){
  .stats{ grid-template-columns: 1fr; }
  .croc{ width: min(520px, 84vw); }
  .pan{ display:none; } /* keeps mobile perf snappy */
}


.croc-img{ width:100%; height:auto; display:block; border-radius: 18px; object-fit: contain; }