/* ===== Adrián Hojas — página minimalista de pegatinas ===== */
:root{
  --bg:#FAF7F0; --ink:#1D1D2B; --ink-soft:#6A6A7E; --accent:#FF5C38; --sun:#FFC531;
}
[data-theme="dark"]{
  --bg:#13131D; --ink:#F4F1E8; --ink-soft:#9A9AB0; --accent:#FF7A5C;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  transition:background-color .35s,color .35s;overflow:hidden;
}
.svg-defs{position:absolute}
.stage{position:fixed;inset:0;cursor:copy}

/* ---------- cabecera mínima ---------- */
.top{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 28px;pointer-events:none;
}
.logo{
  width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;transform:rotate(-6deg);
  pointer-events:auto;
}
.links{display:flex;gap:20px;align-items:center;pointer-events:auto}
.links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
.links a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.1rem;line-height:1;padding:4px}
.theme-toggle:hover{transform:rotate(-14deg) scale(1.12)}

/* ---------- texto central, como jhey.dev ---------- */
.intro{
  position:absolute;z-index:1;left:28px;top:50%;transform:translateY(-58%);
  max-width:620px;padding-right:20px;pointer-events:none;
}
.intro h1{font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin-bottom:20px}
.intro p{font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.45;font-weight:500;color:var(--ink)}
.intro em{font-style:normal;background:linear-gradient(transparent 64%,var(--sun) 64%);padding:0 3px}
.intro q{font-family:'Caveat',cursive;font-size:1.3em;font-weight:700}

/* ---------- pista y pie mínimos ---------- */
.hint{
  position:absolute;z-index:1;right:30px;bottom:84px;max-width:210px;text-align:right;
  font-family:'Caveat',cursive;font-weight:700;font-size:1.5rem;color:var(--accent);
  transform:rotate(-4deg);pointer-events:none;transition:opacity .5s;
}
.hint-arrow{display:inline-block;animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(24deg)}}
.hint.faded{opacity:.45}
.bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 28px;pointer-events:none;font-size:.88rem;color:var(--ink-soft);
}
.counter{font-weight:700;color:var(--ink)}
.bottom-links{display:flex;gap:16px;align-items:center;pointer-events:auto}
.tip{pointer-events:none}
.clear{background:none;border:none;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.clear:hover{color:var(--accent)}

/* ---------- pegatinas troqueladas ---------- */
.placed{position:absolute;left:0;top:0;z-index:10;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform}
.placed:active{cursor:grabbing}
.placed .sticker-art{transition:transform .18s}
.placed:hover .sticker-art{transform:scale(1.05) rotate(-1.5deg)}
.placed.pop{animation:pop .38s cubic-bezier(.2,2.2,.4,1)}
@keyframes pop{0%{scale:.3;opacity:0}100%{scale:1;opacity:1}}
.placed.peel{animation:peel .3s ease-in forwards}
@keyframes peel{to{scale:.4;opacity:0;rotate:24deg;translate:0 -26px}}

.sticker-art{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:3px 2px;text-align:center;filter:url(#sticker-filter)}
.sticker-art .glyph{display:grid;place-items:center;line-height:0}
.sticker-art .glyph svg{display:block}
.sticker-art .word{font-weight:700;font-size:1.04rem;line-height:1.08;letter-spacing:.01em;white-space:nowrap}
[data-theme="dark"] .sticker-art .word{filter:brightness(1.55)}
.sticker-art .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;height:88px;font-weight:700;line-height:1;position:relative}
.sticker-art .tile-top{font-size:.68rem;letter-spacing:.14em;margin-bottom:2px}
.sticker-art .tile-big{line-height:1}
.shape-squircle{border-radius:26%}
.shape-square{border-radius:16%}
.shape-pill{border-radius:999px;width:118px!important;height:64px!important}
.shape-shield{border-radius:12px 12px 46% 46%/12px 12px 30% 30%}
.shape-hex{clip-path:polygon(25% 4%,75% 4%,98% 50%,75% 96%,25% 96%,2% 50%)}

@media (max-width:640px){
  .top{padding:16px 18px}
  .intro{left:18px;top:44%}
  .hint{right:18px;bottom:96px;font-size:1.3rem;max-width:170px}
  .bottom{padding:14px 18px}
  .tip{display:none}
  .links{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}