@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }

:root { --jb: #ff9a1f; --straw: #ff4f7b; --ink: #2a1f33; --sung: #ffc800; --vh: 56vw; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: 'Fredoka', 'Trebuchet MS', sans-serif; color: #fff; }
#stage { position: fixed; inset: 0; background: #000; }
#view { position: absolute; overflow: hidden; background: #0d0c2e; }
#view canvas { display: block; width: 100%; height: 100%; }
body.idle #view { cursor: none; }

/* ---------- karaoke ---------- */
#lyrics { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--vh) * 0.012); pointer-events: none; }
#lyrics .row { position: relative; height: calc(var(--vh) * 0.075); width: 100%; }
#lyrics .line { position: absolute; left: 0; right: 0; text-align: center; white-space: pre; font-weight: 700; font-size: calc(var(--vh) * 0.06); line-height: 1.15; }
#lyrics .syl { position: relative; display: inline-block; white-space: pre; transform-origin: 50% 80%; }
#lyrics .syl .b, #lyrics .syl .f { -webkit-text-stroke: calc(var(--vh) * 0.008) var(--ink); paint-order: stroke fill; }
#lyrics .syl .b { color: #fff; text-shadow: 0 calc(var(--vh) * 0.004) 0 rgba(0,0,0,0.35); }
#lyrics .syl .f { position: absolute; left: 0; top: 0; color: var(--sung); clip-path: inset(-20% 100% -20% -5%); }
#lyrics::before { content: ''; position: absolute; left: 0; right: 0; bottom: -10%; height: 150%; background: linear-gradient(transparent, rgba(0,0,0,0.35)); z-index: -1; }

/* ---------- controls ---------- */
#controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; background: linear-gradient(transparent, rgba(10,6,25,0.85)); transition: opacity .3s; opacity: 0; pointer-events: none; }
body.started #controls { opacity: 1; pointer-events: auto; }
body.started.idle #controls { opacity: 0; pointer-events: none; }
#controls button { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; display: grid; place-items: center; font: 700 14px 'Fredoka', sans-serif; }
#controls button:hover { background: rgba(255,255,255,0.2); }
.i-play { width: 0; height: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.i-pause { display: none; width: 14px; height: 16px; border-left: 5px solid #fff; border-right: 5px solid #fff; }
#playbtn.playing .i-play { display: none; } #playbtn.playing .i-pause { display: block; }
.i-fs { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 3px; clip-path: polygon(0 0,40% 0,40% 20%,60% 20%,60% 0,100% 0,100% 40%,80% 40%,80% 60%,100% 60%,100% 100%,60% 100%,60% 80%,40% 80%,40% 100%,0 100%,0 60%,20% 60%,20% 40%,0 40%); }
#time { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 88px; text-align: center; }
#scrub { flex: 1; min-width: 60px; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--jb) var(--p, 0%), rgba(255,255,255,0.3) var(--p, 0%)); cursor: pointer; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--straw); }
#scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--straw); }

/* ---------- intro & end ---------- */
#intro { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a2f6e, #1a1a4a 55%, #0d0c2e); transition: opacity .6s; z-index: 5; padding: 16px; }
#intro.gone { opacity: 0; pointer-events: none; }
#intro .card { text-align: center; }
#intro h1 { margin: 10px 0 0; font-size: clamp(48px, 12vw, 120px); font-weight: 700; color: #ffc04d; -webkit-text-stroke: clamp(4px, 1vw, 9px) var(--ink); paint-order: stroke fill; letter-spacing: 1px; animation: wob 2.4s ease-in-out infinite; }
#intro .sub { margin: 0 0 26px; font-size: clamp(16px, 3.5vw, 24px); color: #e8e2ff; }
#startbtn { font: 700 clamp(18px, 4vw, 24px) 'Fredoka', sans-serif; color: var(--ink); background: #ffd23f; border: 4px solid var(--ink); border-radius: 999px; padding: 14px 30px; cursor: pointer; box-shadow: 0 6px 0 var(--ink); transition: transform .1s; display: inline-flex; align-items: center; gap: 12px; }
#startbtn:disabled { opacity: 0.5; cursor: wait; }
#startbtn.ready:hover { transform: translateY(-2px); }
#startbtn.ready:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
#startbtn .tri { width: 0; height: 0; border-left: 16px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
#loading { font-size: 14px; color: #b8b0e0; min-height: 1.2em; }
.jb { position: relative; width: 70px; height: 100px; margin: 0 auto; background: var(--jb); border: 5px solid var(--ink); border-radius: 8px; animation: bob 1.6s ease-in-out infinite; }
.jb .straw { position: absolute; right: 12px; top: -46px; width: 9px; height: 50px; background: var(--straw); border: 3px solid var(--ink); border-radius: 4px; transform: rotate(8deg); }
.jb .label { position: absolute; left: 12px; top: 26px; width: 36px; height: 40px; border-radius: 50%; background: #fff3c4; border: 3px solid var(--ink); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-6deg); } }
@keyframes wob { 50% { transform: rotate(-2deg) scale(1.03); } }
#endcard { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .5s; }
#endcard.show { opacity: 1; pointer-events: auto; }
#replay { font: 700 22px 'Fredoka', sans-serif; color: var(--ink); background: #ffd23f; border: 4px solid var(--ink); border-radius: 999px; padding: 10px 26px; cursor: pointer; box-shadow: 0 5px 0 var(--ink); }

@media (max-width: 560px) { #time { display: none; } #controls { gap: 8px; padding: 8px 10px; } }

/* ---------- iris + The End ---------- */
#iris { position: absolute; inset: 0; pointer-events: none; display: none; }
#theend { position: absolute; left: 50%; top: 42%; display: flex; align-items: center; gap: calc(var(--vh) * 0.04); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
#theend span { font-weight: 700; font-size: calc(var(--vh) * 0.16); color: var(--jb); -webkit-text-stroke: calc(var(--vh) * 0.014) var(--ink); paint-order: stroke fill; white-space: nowrap; }
#theend .jb { transform: rotate(12deg) scale(calc(var(--vh) / 600px)); animation: none; }

#intro .home { display: inline-block; margin-top: 6px; color: #e8e2ff; font-size: 15px; text-underline-offset: 3px; }
#intro .home:hover, #intro .home:focus-visible { color: #fff; }

/* the intro is sized from the screen height so it always fits without scrolling */
#intro { overflow: hidden; }
#intro .card { display: flex; flex-direction: column; align-items: center; }
#intro .jb { width: clamp(30px, 8vh, 70px); height: clamp(43px, 11.5vh, 100px); margin-top: clamp(22px, 6vh, 50px); border-width: clamp(3px, 0.6vh, 5px); }
#intro .jb .straw { right: 17%; top: -46%; width: 13%; height: 50%; border-width: clamp(2px, 0.4vh, 3px); }
#intro .jb .label { left: 17%; top: 26%; width: 52%; height: 40%; border-width: clamp(2px, 0.4vh, 3px); }
#intro h1 { margin: clamp(2px, 1vh, 10px) 0 0; font-size: clamp(34px, min(12vw, 15vh), 120px); -webkit-text-stroke-width: clamp(3px, 1vh, 9px); }
#intro .sub { margin: 0 0 clamp(8px, 3.5vh, 26px); font-size: clamp(13px, min(3.5vw, 3.8vh), 24px); }
#startbtn { font-size: clamp(15px, min(4vw, 4.8vh), 24px); padding: clamp(7px, 2vh, 14px) clamp(18px, 4vh, 30px); border-width: clamp(3px, 0.6vh, 4px); box-shadow: 0 clamp(3px, 0.8vh, 6px) 0 var(--ink); }
#intro .tcopt { margin-top: clamp(8px, 2.6vh, 20px); display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px, 3.2vh, 17px); color: #e8e2ff; cursor: pointer; user-select: none; }
#intro .tcopt input { width: clamp(16px, 3.4vh, 20px); height: clamp(16px, 3.4vh, 20px); margin: 0; accent-color: #ff9a1f; cursor: pointer; }
#loading { margin: clamp(4px, 1.6vh, 12px) 0 0; font-size: clamp(11px, 2.6vh, 14px); }
#intro .home { margin-top: clamp(2px, 1vh, 6px); font-size: clamp(12px, 3vh, 15px); }
@media (max-height: 300px) { #intro .sub, #loading { display: none; } }

/* time code overlay, for pointing at exact moments */
#tc { position: absolute; left: 12px; top: 12px; display: grid; gap: 2px; padding: 6px 12px 7px; border-radius: 10px; background: rgba(10,6,25,0.72); border: 2px solid rgba(255,255,255,0.25); pointer-events: none; font-variant-numeric: tabular-nums; }
#tc[hidden] { display: none; }
#tc .tct { font: 700 calc(var(--vh) * 0.05) 'Fredoka', sans-serif; color: #ffd23f; line-height: 1.05; }
#tc .tcs { font-size: calc(var(--vh) * 0.026); color: #e8e2ff; }