/* ---------- Intro ---------- */
#intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: radial-gradient(70% 60% at 50% 40%, #1d2b5c, #05070f 72%); }
#intro::before { content: ""; position: absolute; left: 50%; top: 40%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(rgba(255,212,59,.07) 0 6deg, transparent 6deg 12deg); animation: rays 50s linear infinite; }
#intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), radial-gradient(circle, transparent 55%, rgba(0,0,0,.65)); }
#intro.leave { animation: iris 1.1s cubic-bezier(.7,0,.3,1) forwards; pointer-events: none; }
@keyframes iris { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
.intro-inner { position: relative; z-index: 1; text-align: center; padding: 20px; }
#intro.leave .intro-inner { animation: zoomout 1.1s ease-in forwards; }
@keyframes zoomout { to { transform: scale(1.6); opacity: 0; } }
.presents { margin: 0 0 18px; font-family: "Press Start 2P", monospace; font-size: .58rem; color: var(--muted); letter-spacing: .2em; animation: fadein 1s .1s both; }
.logo { margin: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; line-height: .92; font-size: clamp(3.4rem, 15vw, 9.5rem); letter-spacing: .03em; white-space: nowrap; }
.logo span { display: inline-block; background: linear-gradient(180deg, #fffbe0, var(--gold) 45%, #e08a00 82%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 #7a4a00) drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation: drop .8s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * 70ms + .3s); }
.logo.l2 span { background-image: linear-gradient(180deg, #ffffff, #a8dcff 50%, #3a8ee0 85%); filter: drop-shadow(0 6px 0 #123b6b) drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation-delay: calc(var(--i) * 70ms + .85s); }
@keyframes drop { from { opacity: 0; transform: translateY(-140px) rotate(-22deg) scale(.4); } }
.tag { margin: 16px 0 28px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; font-size: clamp(.68rem, 2vw, .95rem); color: #cfe3ff; animation: fadein .8s 1.5s both; }
.load { width: min(420px, 80vw); margin: 0 auto; animation: fadein .5s 1.6s both; }
.load-bar { height: 14px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--gold) 0 12px, var(--gold-2) 12px 24px); background-size: 34px 34px; animation: stripes .6s linear infinite; box-shadow: 0 0 16px rgba(255,212,59,.6); }
@keyframes stripes { to { background-position: 34px 0; } }
#load-msg { margin: 12px 0 0; min-height: 2.2em; font-family: "Press Start 2P", monospace; font-size: .52rem; line-height: 1.7; color: var(--muted); }
.press { margin-top: 10px; font-family: "Press Start 2P", monospace; font-size: clamp(.85rem, 3vw, 1.25rem); color: #fff; padding: 16px 26px; border: 3px solid #fff; border-radius: 6px; background: rgba(0,0,0,.35); text-shadow: 0 0 12px var(--gold); box-shadow: 0 0 0 4px rgba(0,0,0,.4), 0 0 30px rgba(255,212,59,.3); animation: blink 1.1s steps(2) infinite; }
.press[hidden], .hint[hidden] { display: none; }
.hint { margin: 14px 0 0; font-size: .72rem; color: var(--muted); }
.intro-fine { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 1; text-align: center; font-size: .65rem; color: #5d6676; }
.icoin { position: absolute; top: -10vh; z-index: 0; font-size: 1.6rem; opacity: .5; animation: icoin linear infinite; }
@keyframes icoin { to { transform: translateY(125vh) rotate(720deg); } }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } }