/* CutieCraft.EU · dc.cutiecraft.eu
   Cards are framed with Minecraft tooltip sprites (100x100 px, nine-slice
   border 45 px, exactly like the game draws them). --s is the pixel scale. */

@font-face { font-family: "Tiny5"; src: url("/assets/fonts/tiny5-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --s: 3;
  --px: calc(var(--s) * 1px);
  --pink: #FF8FC7;
  --lilac: #C6A6FF;
  --blue: #8FD3FF;
  --mint: #A8F0D0;
  --gold: #F2DFA1;
  --text: #F4EEFF;
  --muted: #C9BEDF;
  --night: #120e1f;
  --pixel: "Tiny5", ui-monospace, monospace;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* ---------- night sky ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255, 143, 199, 0.26), transparent 70%),
    radial-gradient(600px 400px at 90% 100%, rgba(198, 166, 255, 0.16), transparent 70%),
    radial-gradient(500px 400px at 5% 80%, rgba(143, 211, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #1b1430 0%, #120e1f 60%, #0d0a17 100%);
}
.sky::before, .sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 62%, #ffd9f0 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 63% 38%, #e6dbff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 14%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 56%, #d7f2ff 50%, transparent 51%),
    radial-gradient(2px 2px at 8% 84%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 52% 88%, #ffd9f0 50%, transparent 51%),
    radial-gradient(2px 2px at 95% 90%, #fff 50%, transparent 51%);
  opacity: 0.55;
}
.sky::after {
  transform: translate(3%, 7%);
  opacity: 0.35;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.12; } to { opacity: 0.5; } }

/* ---------- layout ---------- */
.page {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero { text-align: center; }
.logo {
  display: block;
  width: min(320px, 70vw);
  height: auto;
  margin: 0 auto;
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes float { 50% { transform: translateY(-6px); } }
.tagline {
  margin: 6px 0 18px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink);
}

/* server address, click to copy */
.ip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: rgba(18, 12, 34, 0.75);
  box-shadow: 0 0 0 2px #3a2a60, 0 0 0 4px rgba(198, 166, 255, 0.35);
  color: var(--text);
  font: 400 16px/1.2 var(--pixel);
  cursor: pointer;
}
.ip:hover, .ip:focus-visible { box-shadow: 0 0 0 2px #5b3a99, 0 0 0 4px var(--lilac); outline: none; }
.ip-label { color: var(--muted); }
.ip-value { color: var(--mint); font-size: 20px; }
.ip-hint { color: var(--muted); font-size: 14px; }
.ip.copied .ip-hint { color: var(--mint); }

/* ---------- tooltip cards ---------- */
.tip {
  position: relative;
  border-style: solid;
  border-width: 0;
  border-image-slice: 45 fill;
  border-image-width: calc(var(--s) * 45px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
  padding: calc(var(--s) * 27px) calc(var(--s) * 12px) calc(var(--s) * 20px);
  min-height: calc(var(--s) * 92px);
}
.tip-mythic { border-image-source: url("/assets/tooltip-mythic.png"); }
.tip-legendary { border-image-source: url("/assets/tooltip-legendary.png"); }
.tip-rare { border-image-source: url("/assets/tooltip-rare.png"); }

/* the title sits in the sprite's header band (rows 12-20 of 100) */
.tip-title {
  position: absolute;
  top: calc(var(--s) * 12px);
  left: calc(var(--s) * 11px);
  right: calc(var(--s) * 11px);
  height: calc(var(--s) * 9px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: calc(var(--s) * 8px);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tip-mythic .tip-title { color: #F5D2FF; }
.tip-legendary .tip-title { color: var(--gold); }

.tip-body { image-rendering: auto; }
.tip-body > p { margin: 0 0 14px; }
.tip-body strong, .tip-body b { font-weight: 800; }
.gold { color: var(--gold); }
.small { font-size: 14px; color: var(--muted); margin: 12px 0 0 !important; }

.steps {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 10px;
}
.steps li {
  position: relative;
  padding-left: 40px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font: 400 16px/1 var(--pixel);
  color: #3b1d22;
  background: var(--gold);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.45);
}
.chan {
  padding: 1px 6px;
  background: rgba(143, 211, 255, 0.16);
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}
code {
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--mint);
  font-family: var(--pixel);
  font-size: 0.95em;
}

/* ---------- Minecraft-style buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  flex: 1 1 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  font: 400 20px/1 var(--pixel);
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  border: 3px solid #120b1e;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.3), inset 3px 3px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(2px); box-shadow: inset 3px 4px 0 rgba(0, 0, 0, 0.3); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn-main { background: #6b58e8; }
.btn-alt { background: #3f3560; color: var(--text); }
.btn-gold { background: #b9753a; flex: 0 1 240px; }

.namemc-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 728 / 90;
  margin-top: 18px;
  overflow: hidden;
}
/* the NameMC banner is a fixed 728x90 page - scaled down to fit (script.js) */
.namemc {
  position: absolute;
  top: 0;
  left: 0;
  width: 728px;
  height: 90px;
  border: 0;
  transform-origin: 0 0;
}

.foot { text-align: center; font-size: 13px; color: #8f84a8; }
.foot p { margin: 0; }

/* ---------- small screens: 2x pixels instead of 3x ---------- */
@media (max-width: 560px) {
  :root { --s: 2; }
  body { font-size: 16px; }
  .page { padding-top: 22px; gap: 20px; }
  .tip { padding-left: 26px; padding-right: 26px; }
  .tip-title { left: 22px; right: 22px; font-size: 16px; }
  .tagline { font-size: 16px; letter-spacing: 0.04em; }
  .btn { flex-basis: 100%; }
  .btn-gold { flex-basis: 100%; }
}

/* phones: no looping animations, so scrolling never stutters */
@media (max-width: 560px), (prefers-reduced-motion: reduce) {
  .logo, .sky::after { animation: none; will-change: auto; }
}