<!--

(FOOTSTEPS)
- Time to get up, Dad.
- Hmm?
You sleep all right?
People like milky coffee.
Why not put a little grease
in your coffee?
No, Dad.
It sounds gross.
Why not put a little grease in your java?
Why not try it?
You're such a gross-out, Dad.
I think I might barf.
I'm not saying I wanna do it.
I just wonder why
they haven't tried greasy coffee.
Greasy coffee?
Hey, you probably think
I'm the Greasy Strangler.
I never said that.
Tell you a secret.
I am the Greasy Strangler.
Hey, I call bullshit on that.
OK.
I'm not the Greasy Strangler.
But you're a bullshit artist.
Yeah, I kind of am.
Now, who likes the Bee Gees?
Well, this is where they came up
with that fabulous, spunky song,
"Night Fever".
What do you mean, "came up with"?
They wrote the lyrics while
they were standing in this doorway.
Why were they standing in this doorway?
They were waiting
for a friend to pick them up.
They were going out for Chinese
and celebrating his birthday.
Can you verify that, please?
Trust me, I know disco.
I thought free drinks
were included in this tour.
No, there's no free drinks.
I don't know where you got that idea.
- It said in the brochure.
- The information you got is bullshit!
We don't need even fizzy drinks.
Just water would be enough.
You got false information.
We must have free drinks.
No free drinks!
- Free drinks now!
- No free drinks!
Come on, we want free drinks.
- Free drinks.
- We must have free drinks.
No free drinks!
Free drinks! Free drinks!
Free drinks! Free drinks! Free drinks!
Free drinks! Free drinks! Free drinks!
Free drinks! Free drinks! Free drinks!
No free drinks!
Frei drinken.
Nichts frei drink.
You must give me free drinks immediately.
Drop it with the free drinks crap.
We believe in the power of free drinks.
There are no free drinks,
and if you're trying
to rip me a new asshole,
you're making a big mistake.
You are a shitty businessman.
You know that, no?
And you're a bunch of fucking cunts.
Check my cheeks.
I'm sorry.
My dad can get cranky sometimes.
He sure has a temper on him.
Yeah.
He likes to shout. I like to smile.
You cheesy old cornball.
Yeah, that's what I am.
I'm a cheesy old cornball.
(CHUCKLES)
Yeah, you are.
But that's OK.
I kind of like it.
My name's Brayden.
(SCOTTISH ACCENT) Brayden?
Is that Scottish?
It's not Scottish. What's your name?
I'm Janet.
Hey, stop talking to the customer
and help Dad with his shorts.
So, Dad, I think I've got a date
with that hot girl from the tour.
No way! You're a bullshit artist.
No, it's official.
It's all been confirmed. She likes me.
- She's yanking your chain. Trust me.
- No, Dad.
She likes my character. She said so.
And her name's Janet.
That's not right.
I need them greasy
and this is nothing like greasy.
Do you understand?
Too much grease is bad for you.
I read it in a fitness magazine
someone left on the bus.
That's horse shit.
You're a bullshit artist.
We have an agreement.
You stay here, you cook greasy.
And this is not it.
Maybe you should just go live
with your mum and Ricky Prickles.
Dad, don't keep saying that.
You know Ricky Prickles hates me.
Last time I was there,
he called me Fatty Boom Boom.
(SCOFFS)
First, there's this dry food.
Now you're telling me
you got a girlfriend.
Next you're gonna be
leaving the family business.
You must not like me very much.
Is that what this is all about?
I'm sorry, Dad.
I can add more oil if you want.
I'm not hungry anymore.
Dad, I don't wanna leave you.
But I guess I do like Janet.
She might not like me, though,
not when she gets to know me.
If she gets to know you.
You ask it for chips and you get nothing.
Yes, you should tell management.
I pay a dollar for the chips,
the chips get stuck,
the manager gets my dollar,
and I get no chips.
Please tell me,
what flavour chips
did you eventually decide upon?
Who cares?
They were paprika ridge chips.
I like the ridges.
I put the tip of my tongue between ridges,
because that is where
the salty chip dust is.
Yes, that's so true.
I love ridges.
Yes, but what are these chips made from?
(RAPID, THICK ACCENT) Potato.
Excuse me, what?
Potato.
- Can you say that again?
- Potato.
Yes, but what are these chips made from?
Potato.
- Sorry, but what?
- Potato.
I don't understand.
Can you say that again?
- Potato.
- Please, one more time.
Potato.
OK, this is embarrassing,
but, please, can you say it
a little slower?
Potato.
I am very, very sorry,
but I need to know,
what are these chips made from?
Potato.
- Please, one last time.
- Potato.
I think he's trying to say potato.
Ah, yes.
Potato!
Potato chips.
What on earth is this man doing?
Hey, there are three of us
and one of you, buddy.
Maybe he's not a man.
Maybe he's the boogie-woogie.
Is he the boogie-woogie?
My God!
This man is truly mad.
Who cares? On the count of three,
we'll tackle him.
One, two, three.
(GROWLING)
I am a rich gentlemen.
I own a premium shipping business
in Denver.
Let me live.
I will make you the chief shareholder.
You will get a handsome salary
with the attractive corner office.
Does that or does that not appeal to you?
I wanted some ridged paprika chips.
They weren't even for me.
Who cares? There is a girl in my room.
I met her tonight at a sports bar.
We tried to have sex
but I couldn't get a stiffy.
Then my balls got sucked up
into my abdomen.
Does it strike you as unusual?
Am I dead yet?
My name is Sidney.
(SCREAMING)
Ronnie?
Is that you, Big Ronnie?
Oh, yeah, better believe it.
I heard screaming.
All OK back there, Big Ronnie?
Yeah, sure. I was laughing.
Oh, laughing, were you?
Why, did your car get too greasy again?
No comment, but yeah, kind of did.
I like going through the car wash.
It's good to know
my car is getting a good clean.
It's fun.
Oh, and here's ten for the wash.
And I'm gonna go use your bathroom.
Oh, you go right ahead, Big Ronnie.
Ronnie's back.
Let's go disco dancing
again soon, Big Ronnie.
Yeah, that's not a bad idea.
We could disco dance. Why not?
We used to disco dance all the time.
I guess you got too busy lately.
Ah, well, it's a little embarrassing,
but my son's having problems.
What kind of problems, Big Ronnie?
Between you and me,
I think my son's
a severe manic depressive.
He should be on medication.
And did I tell you
he still craps the bed most nights?
Oh, boy.
Uh-oh.
No, you did not.
Yeah, and he craps on the carpet.
I've found it in the kitchen.
Hell, he even crapped
on top of the TV last week.
Anyway, thanks for the scrub.
OK, Big Ronnie.
Catch you again soon, I hope.
Bye-bye, Big Paul.
Bye-bye, Big Ronnie.
(LAUGHING)
Morning, Dad.
Go away.
Someone's a grouch today.
Oh, you don't care.
What does that mean?
Oh, now that you got a girlfriend,
you're probably gonna wanna move out.
Bullshit artist.
We haven't even had our first date.
Look, I know women.
She'll want you all to herself.
She looked greedy.
She looked nice to me.
You'll leave and I'll die of loneliness.
People do that, you know.
They get so lonely,
their heart stops and they die.
But you won't care.
You'll be too busy making love.
(SOBBING)
Cut it out, Dad.
Quit goofing off.
(BOTH LAUGH)
I'm not going anywhere, Dad.
You know how I am with the ladies.
But seriously, I have something
I need to tell you.
- Come here.
- Go for it, Dad.
- Are you ready?
- Yes. What is it?
(FARTS)
I'm making these bacon rolls
real greasy, Dad.
Bullshit artist.
Am not.
Bullshit.
You make this the greasiest feast
since that goose you cooked on Christmas.
Done and done, Dad.
And now, this very store here
is where Kool
from "Kool and the Gang" worked
before he exploded onto the disco scene.
Anyway, this is the end
of Big Ronnie's Disco Tour.
Thank you very much for coming
and, er, come again soon.
So, where are you taking me
tonight, Mister?
How about a sizzling Cajun hotpot?
What about me? Who's gonna cook for me?
- I'm hungry.
- You'll have to go to a vendor, Dad.
- You'll have to go get a dog.
- Not a real dog.
Yeah, don't bite into a real dog.
Don't bite into a... woof-woof.
Woof!
OK, you two can fuck off tonight.
Bye, Dad.
Bye-bye.
Bye-bye!
Fucking cunts!
I could feast on that queen's ass
all night long.
Thanks, Big Heiny.
Looking forward to a great meal.
Of course, of course.
I think I read once that these kinds
of breadstick are called grissini.
Probably.
So, um, does your mum live with you too?
No.
She left when I was small.
She met someone new.
Well, that's crapola.
Yeah.
His name is Ricky Prickles.
He's a professional sports coach.
He's got the most defined six-pack
I've ever seen.
Ooh. Tell this girl more.
I went to stay with Mum and Ricky once.
He made me punch him in his six-pack.
He didn't feel anything
because the muscles were so hard.
It was like punching a vacuum-packed
bag of roasted sausages.
Then he made me do
abdominal crunches with him.
I barfed all over his carpet.
My barf was real orange and tasted fizzy.
Ricky Prickles was so mad,
he smacked me twice in the face
with the flat of his hand.
Ricky the Pricky.
Then he molested me.
Sexually harassed me.
How old were you?
Eighteen.
I had long golden hair
and a soft moustache.
I've never been able to do
muscle curls or abdominal crunches.
Not all girls like ripped-up abs.
Yeah.
Some girls like loyal hearts.
Janet, what's wrong?
Please, Janet.
The tourists I was with the other day
were murdered.
Hey, hey, hey, hey.
Hey, hey, hey.
Hey, hey, hey, hey, hey.
You're cute.
If I'm cute,
you're stunningly beautiful.
How can I help you, sir?
I wanna dog. Give me a dog.
One famous dog coming up.
I'll make yours extra picante, yeah?
That'll be uno, dos, tres bucks.
What the fuck is this shit?
This is one famous chilli cheese dog.
No, this isn't right.
I need more grease on this.
I need more oil.
Sir, I cannot do that.
It's against regulations.
I could lose my licence.
I need this oily.
I need this to lubricate the world.
I need this dog to have some grease on it,
so when I eat it
the grease will lubricate my throat.
Sir, I cannot do that.
It's not safe to use too much oil.
I could... I repeat,
I could lose my licence.
You probably think
I'm the Greasy Strangler.
That's why you won't grease my dog.
Hey, what are you doing?
You're not allowed to touch that.
That's dangerous equipment.
You could burn yourself.
I could lose my licence.
I'm gonna dunk Big Ronnie's dog
all the way in.
This dog is fully dunked.
I wanna write fantasy novels someday.
Interactive fables
with full colour illustrations
and fold-out maps of faraway realms.
I'd narrate the tales myself
for the audiobooks.
I'd do all the voices for the characters,
even the dragons and trolls.
What will the book be called?
The first one is going to be called
"The Amulet of Arg".
Arg is the reluctant keeper
of the trolls' realm.
In the second book,
he crosses over to the digital realm
to become the digi-troll.
In the third book, he fulfils his destiny
as the Lord of the Three Realms.
He has the largest amulet.
I bet you have
a pretty large amulet yourself.
I don't own an amulet.
You're a real change of pace for me
after guys like Rico.
He was all fingers.
I didn't say you could do that.
Hey, where's my dad?
(SCREAMING)
(BELCHES)
Ronnie? Is that you, Ronnie?
Why, yes it is.
It's me, Ronnie.
You must be driving some oily roads.
You're getting a lot of car washes
these days.
What are you implying, Paul?
Oh, nothing.
Just making a pleasantry,
that's all, Ronnie.
Just a pleasantry.
You ever hear those?
Next time keep it to yourself, OK?
I'm not the Greasy Strangler.
I never said you were, Ronnie.
I'm not the Greasy Strangler.
(LAUGHING)
All right, Big Brayden.
- Hey, Oinker.
- You ready to hit the Horror House?
Hey, you didn't tell me
you were out tonight.
Two nights in a row is not permitted,
unless I come with you.
Or I could evict you.
Dad, I told you this morning.
- You were too groggy to pay attention.
- Or too stoned on fart fumes.
Brayden told me you trumped
a real humdinger the other day.
He said you cut
the world's biggest cheese.
He said his eyes were watering.
I'm joining you
at the Horror House tonight.
I'm free tonight,
so I'm coming with you
to the Horror House.
But Dad!
If you don't let me come,
I'm going to tell Janet
that you haven't even stuck one finger
up a girl's pussy yet, OK?
Oinker, where did you get those shoes?
I'm renting them,
and I'm absolutely loving it.
- (SNORTS)
- (SNORTS)
Very good shoes, Oinker.
Three tickets for the Horror House,
please, Big Thaddeus.
Sure thing, Big Brayden.
Popcorn. I need a big bucket of popcorn.
No, this isn't right.
I need more grease on this.
Hey.
You! Hey, hey, hey!
RONNIE: Grease! Grease! Grease! Grease!
- Dad.
- What?
Janet is coming over tonight.
We're making baguettes for dinner.
They're long French bread sticks
filled with melted mozzarella
and lardons, which are ham cubes.
Janet went to France last year.
She fell in love with the food.
Is it OK if she comes tonight, Dad?
OK, disco people, do you remember
the Earth, the Wind and the Fire?
Did you know that all three of them
lived in that apartment up there?
I've been making my own olive oil
in my bedroom.
Extra virgin.
(UNZIPPING)
Like this?
Like this, Janet?
I don't know if I'm doing it right, Janet.
I don't know if I'm doing it right, Janet.
Like this?
Is this right?
Janet?
I don't know if I'm doing it right, Janet.
Like this?
(SIGHING)
- Good morning, Ronnie.
- It is now.
Do you got any disco tours
lined up for today?
Maybe.
Do you like oily grapefruit?
(SLURPING)
(PEEING)
(STOPS PEEING)
Hello?
Who's there?
Brayden, is that you?
No, it's Ronnie, Brayden's dad.
Oh.
Everything OK?
Yeah. I wanted to watch you go pee.
Peeing is private.
Yeah, usually.
But I got teeth to brush.
Go ahead, keep peeing. I won't look.
(RESUMES PEEING)
I thought you weren't gonna look.
Hey, beautiful Janet.
Oh, hey, Brayden.
Are we exclusive?
Because my dad said he watched you go pee.
Excuse me, I'm talking to you.
OK, I get it.
We're playing a sort
of silent game, right?
Do you like me?
Are you a bullshit artist?
I don't know what to think
about anything right now.
You're amazing.
(GROANING)
I'm... dying.
I'm actually... dying.
(CHOKING) Things are getting brighter.
Now they're getting slightly darker.
Sorry, mate.
I blacked out there.
Part of the dying process, I reckon.
Oh.
(GROWLING)
Fuck me, this is amazing!
(SNORTING)
I've been thinking
I should spend some time with Janet.
Why, Dad?
I know women.
I don't want to see you get hurt, OK?
I should spend some time
getting to know her, alone.
Yeah, so you can be a smoothie to her
and make her love you.
Bullshit.
I just know a lot more about women
than you do.
Women like me.
Yeah? Why did Mum leave, then?
She left because you used to get
into her bed and poop all over her leg.
That's a lie and you know it.
Sorry, it's not.
She yelled it from a moving car
when she was leaving.
Bullshit artist.
You mean, meeting Ricky Prickles
with his ripped-up abdominal muscles
had nothing to do with her leaving?
That's it for you, Colonel Crapper.
- Sergeant Shizzly, you're evicted.
- Dad!
You've only got three and a half hours
to vacate the property.
No!
OK, you're not really evicted,
but you will be,
if you don't let me spend some time
getting to know Janet.
But she seems nice.
She seems like a nice, true girl.
I don't want this cunt
to fuck you up and leave you lonely.
OK, fine, take her out.
I guess it could help.
I trust you, Dad.
I'm Big Ronnie and I'm back!
Where are you taking her?
Oh, this little night club
I took your mother to once.
Is it romantic?
Put it this way.
Is it exclusive? You bet it is.
Are there expensive
high-quality crme cocktails?
What the fuck do you think?
I'm expecting to run up
a formidable bar bill tonight.
15 bucks for a luxuriously creamy
pussy-ass daiquiri, motherfuckers.
That's kind of pricey for a drink.
It's not a drink.
It's liquid sex.
Just don't be a smoothie with her.
I really like this girl.
You can be a smoothie with women.
Bullshit artist.
Dad, you're a smoothie.
- Am not.
- Are too.
Well, kind of am.
You called bullshit, and you were right.
(SOBBING)
(DISCO MUSIC)
Tell me more about yourself.
I used to run a night club.
I booked all the disco acts.
I knew them personally.
One time, I had to drive
Michael Jackson to the airport,
and on the way we decided
to stop at this little blues club,
because he wanted to kick back
with a bottle of wine and a cigar.
It was a quiet night.
He was eating these delicious nachos.
And I broke into the DJ booth
and I put "Smooth Criminal"
on the sound system.
I wanted to boogie and so did Michael.
He got up and started dancing on the table
and this security guard came up
and tried to take him down,
so I punched him the fuck out.
And then this other guy comes up
and Michael hit him.
He hit him so hard, his hair fell out.
And then these two Korean twins
came on to us
so we took them into the manager's office
and we started pumping away at them.
And Michael and I were
just pumping and pumping
and then we sprayed them
with hot, milky cum
and everybody applauded.
Then he gave me one of his gloves
and I drove him to the airport.
He was going to Rome
for some top-secret meeting.
Wow.
You must have had some amazing adventures.
I should have had more
but I had Brayden to raise.
He was a horrible kid,
crying all the time.
His mother left
because he was so horrible.
He's never had a girlfriend
because he craps the bed most nights.
I was 16 when I had him.
I was a kid with a bed-crapping kid.
- I can't do that, mister.
- Why not?
Oh, no reason.
I think I might be in love with your son.
You're in love with Brayden?
Yeah.
Huh!
Kiss my juicy cherry lips.
I can't do that.
It feels weird.
Bullshit artist!
(DANCE MUSIC)
(MUSIC STOPS)
Nothing happened, I promise.
I believe you.
We just talked.
He told me about his nights
with Michael Jackson.
That wasn't the real Michael Jackson
he was friends with.
That was an MJ lookalike who used
to cruise Hollywood as a male prostitute.
He shot himself recently.
He put a gun to his head
in the middle of the street.
They say the bullet
folded his head in half.
Can I ask you something?
Is my dad a smoothie?
Did he get smooth on you?
(PHONE RINGS)
- Hello.
- MAN: 'Oh, I got some bad news.
'Oinker is dead.'
OK, so now I'm shit scared, Janet.
(POLICE SIREN)
BRAYDEN: That's him, all right.
That's my best friend.
I need a time-out. Let's go to the table.
What are you thinking, Brayden?
I'm thinking I'm going to investigate
the Greasy Strangler killings myself.
No, Brayden.
That's too dangerous.
I'm not afraid of dying,
if that's what you mean.
I'm gonna find the Greasy Strangler.
He brutally murdered the Indian guy.
He brutally murdered Oinker.
I'm gonna make sure
he never murders anyone else.
I'm gonna expose the Greasy Strangler.
Then I'm gonna kill him.
(HOWLS)
What are you doing, Bray-Bray?
Gathering evidence.
I'm falling for you.
I'm falling for you hard and fast
and I'm shit scared.
I'm shit scared right now.
I've got to expose the Greasy Strangler.
This is delicious. What's on this toast?
Just oil, like you normally have.
Bullshit artist.
This isn't the oil we usually use.
Is it?
Let's just say it's new oil.
Where did you get it?
I think you have an idea
where I got it, Dad.
I think you know exactly
where I got this delicious oil.
(GROWLING)
- 'Hello? '
- Janet, it's me.
- 'What's going on?'
- Oh, nothing much, just losing my mind.
I think my dad might be
the Greasy Strangler.
- 'Do you want me to come over? '
- No, don't come over. It's too dangerous.
I couldn't bear to lose you.
I yearn for you
but I have to protect you now.
Let's have phone sex quickly.
Imagine me stroking your clitoris
with a pink feather
and then you cradle my sack.
- 'I'm tickling your sack.'
- Yes!
Come on, Rodney.
Play the game.
Oh, oh, oh...
Ooh.
'Aah.'
OK, bye.
Dad, we need to talk.
Dad?
Ronnie, is that you? I hope it is.
Let's disco.
Oh, yeah, the disco kings are back.
Yep, you called it.
(FARTS)
Fuck.
Oh, fuck.
Tonight we're going disco-dancing.
We're gonna hit the club circuit
with a vengeance.
Can I come? I could use a boogie-woogie.
I've got the blues.
I don't know. What do you think, Paul?
Shall we bring my son along?
No way!
Absolutely not, Ronnie.
Sorry.
Yeah, I told you
he was a manic depressive.
He seems very depressed.
Yeah, he needs to be on meds, you know.
He was on meds when he was a kid.
They were brightly coloured pills
with fruity flavours.
Meds for sad kids.
(BOTH LAUGH)
(RINGING TONE)
JANET: 'Hello? '
Come over now.
I'm shit scared.
I love you.
Oh, I feel so sexy.
But seriously, imagine if I farted now.
I'm scared, Janet.
Hey, you look deliciously sexy tonight.
Thank you.
- How was your night?
- It was terrific.
We danced a lot and we had
a lot of really creamy cocktails.
A lot of cows got milked
so we could have fun tonight.
Their teats supplied the creamy milk
that was in our cocktails tonight.
Trust me.
Oh, really? Did you spray any girls
with that hot, milky cum?
Well, that's kind of top secret.
Wanna come in and do something sensual?
Feels good, ja?
(SOBBING)
I'm guessing we fucked all night.
Looks like a massive mouse's head.
(BOTH LAUGH)
I'm officially dating Janet.
We made it official last night.
We sealed it with a kiss.
Bullshit artist.
Janet and I are exclusive.
There's no reason to talk of this anymore.
- Bullshit artist.
- Bullshit artist.
- Bullshit artist.
- You, sir, are a horse-shit artist.
I call bullshit on that.
I'm detecting the unmistakable scent of...
Wait for it.
Horse shit?
No, your answer is completely wrong.
The correct answer is...
What's the correct answer?
Wait.
Tell me the correct answer.
The correct answer is...
Horse shit.
- That's what I said, Dad.
- Ah, bullshit.
You're covered in horse shit.
Bull-shit art-ist.
You're officially the world's
biggest bullshit and horse-shit artist.
Bullshit. Horse shit.
Cat shit. Tiger shit.
Lion shit. Duck shit.
Walrus shit. Penguin shit.
King Penguin shit.
B, U, double L,
S, H, I, T,
new word,
A, R, T, I, S, spells bullshit artist.
I say again, bullshit artist.
Bully, bully, bullshit.
Janet was mine first. She loved me only.
Well, I call bullshit on that one,
because last night I claimed her pussy.
Oh, you claimed her pussy
but you never claimed her heart.
Don't make me evict you.
I'm getting really close
to throwing your whiney ass
out of my house forever.
This pasta is perfect.
This is officially the best meal
you have ever cooked.
Just the right amount of oil.
Thanks.
You could serve this pasta
at any premium restaurant
on the Sunset Strip.
Yeah.
It's called farfalle,
shaped like a bow-tie.
I know.
And the best part is,
it's fantabulously greasy.
Bravo.
I normally shoot about six ropes of cum
and dribble a little of the clear stuff,
but baby, I'm all about the ropes.
I'm the Spiderman of Cock Town.
Or the Tarzan of Cum Jungle.
Oh.
You're so much more than a hot, wet pussy.
You could be my forever love.
- Really?
- Yeah.
You're a hootie-tootie disco cutie.
I'm a hootie-tootie disco cutie.
BOTH: Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie!
(GROWLING)
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
(GROWLING)
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
(GROWLING)
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
- Hootie-tootie disco cutie.
- Dad, please.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
- Hootie-tootie disco cutie.
- Janet, no, not your ass.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
(SCREAMS)
(TV ON)
(DOORBELL RINGS)
My girlie is here.
'Nick Lock shot the Rasta in the neck.
'The Rasta went flying through the wall
and was dead instantly.
'Nick spun the gun around his finger
and pointed it into the future
'till the Rasta came back to life.
'"You're under arrest, mon,
for conspiracy to commit revenge,"
'the Rasta said as he lit
a hand-rolled cigar
'in the scarlet sunset.'
Oh, hey, Janet.
Ah.
You're up late.
Yeah, I'm working on a novel.
The fantasy one?
No, it's an urban cyber thriller
called "Revenge Incorporated".
It's set in a dark future
where revenge is outlawed
but there's a company you can hire
to get revenge for you.
I've been dreaming about you
throughout these long, hard nights.
Do you miss me?
Yeah, I sort of miss you.
I'm lost and lonely for you.
Basically, I love you.
Don't say that.
Unless you mean it, of course.
Why is the sky blue?
Because blue is your favourite colour.
Oh, you cornball.
Yeah, I'm a cornball, remember?
I love you, though. I love you.
I've wanted to say it for so long.
It feels good to hear it,
if I'm honest.
Give yourself to me for all time.
Don't say that.
This girl's confused.
If I could write your name
on the moon, I would,
with my own blood.
And also, I wanna marry you.
OK.
I loved you from the moment
I saw you on the disco tour.
I'm a romantic at heart.
JANET: Ronnie?
Ronnie, are you there?
Now, that definitely sounds
like Big Ronnie.
Big Ronnie, is that you?
Big Ronnie, are you in my car wash?
How's the scrub working out?
Are the brushes stiff enough for you?
Take me disco-dancing, Big Ronnie.
(PHONE RINGING)
MAN: 'Hello?'
I'm calling because I think
it just might be possible
my dad Ronnie is the Greasy Strangler.
'Tomorrow.'
Tomorrow is fine. We can meet tomorrow.
- 'Bye-bye.'
- Bye-bye.
A detective is coming tomorrow.
His name is Jody.
I am Jody,
and if your hunch is correct,
you are the son
of the Greasy Strangler.
Come on in, Jody. I like your jacket.
You see this oil, Jody?
Looks like the oil
from the murder crime scene.
I can verify that.
This oil is scrumptious
and very good for the skin.
But that's evidence
against the Greasy Strangler.
Did you know?
Jody needs to oil his glasses.
Now, we shall go downstairs
and discuss the case.
But first,
Jody needs to wash his face.
Your dada may well be
the Greasy Strangler.
Unfortunately, I cannot proceed
with this case any further
as there is no evidence.
Please end all enquiries here.
What about the oil on his floor?
Circumstantial evidence is meaningless.
Please end all enquiries here.
So we're on our own?
Please end all enquiries here.
Come on, Jody, please.
Please end all...
Enquiries here.
Correct.
Please end all enquiries here.
Great.
Well, you've been most helpful, Mr Jody.
I know my dad's the Greasy Strangler.
I guess I'll have to expose him on my own.
Not on your own.
Jody needs to go now.
I'm really glad I met you, Brayden.
That relationship with Rico
left me in a real bad space.
Like, the worst.
That sounds horrible.
Brayden, can I tell you something?
Is it about Rico?
No.
It's about love.
I love you.
BRAYDEN: Holy shit. Will you marry me?
JANET: Yes, I will, mister.
Dad!
- Were you here the whole time?
- Yes.
Don't hide under Brayden's bed.
Hey, you're my girlfriend.
And by the way, he wouldn't even exist
if he hadn't flown
out of my long, juicy prickus.
And as for you,
as your father I forbid you to marry.
And one other thing, you're evicted,
so it's time for you to fuck off.
We're leaving right now
and we're leaving gladly.
Brayden will move into my place.
He'll be happier there.
He can twaddle my twat
any time that he wants.
And, I don't care if he craps on the bed.
I'll rub it on my tits.
Yeah, Dad, we don't need you.
And it kills you to think
that Janet loves me.
But guess what? I love her.
And you were right
about one thing, though, Dad.
She is a hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
Hootie-tootie disco cutie.
(GROWLING)
Just so you know,
he tried to impress me
with a loud fart once.
He put his legs behind his head
and shouted,
"Someone's cutting the cheese."
Instead of just gas, a big glob of turd
flew out of his butt like a rocket.
It did a loop-the-loop near the wall
and landed on the bed.
So if anyone's a bed crapper
around here, it's him.
- That must have been tough.
- Yeah.
It looked like a big, brown finger.
It was pointing right at me.
If he really is the Greasy Strangler,
you have to kill him.
I can get greasy too.
I can be a Greasy Strangler too.
You're not the only Greasy Strangler.
I'm the Greasy Strangler too.
(GASPING)
You're all right, Brayden.
Thanks, Dad.
That means a lot, coming from you.
We never really got along, though, did we?
Yeah.
By which I mean, nah.
It wasn't always like that.
You were a cute baby.
I used to love cradling you.
You cheesy old cornball.
Well... you were a baby, a tiny baby.
You probably won't remember this,
but when you were small,
we stayed on John Travolta's
luxury yacht in the Caribbean.
We sailed around the islands
from Port-au-Prince to Montego Bay.
Wow, I really don't remember that.
You called it.
Yeah, and John said you were a good kid
and you had good energy.
OK.
John Travolta talking about Brayden.
I'm kind of trying to process that.
Me and John were busting our butts
on a big business deal.
That's kind of amazing, Dad.
Yeah, he offered me a chance
to move to New Orleans
to open a big disco
with very expensive drinks,
a billiards room,
a cherry-coloured, funky dance floor.
There was going to be a pink limo
to cruise the Big Easy
and pick up those hot dancing mamasitas.
It was gonna be called
"John and Ron's Dance Jungle".
But you were small.
I really didn't wanna leave you
with Mum and Ricky Prickles.
Are you glad I moved in with you?
Hey, I'd rather be here with you
than in New Orleans with John Travolta.
But you really annoyed me.
Your food was dry, and you made it
really hard to score ass.
Look, I'm being honest here.
Fair enough, I reckon, mate.
That's probably why I screwed
your girlfriend up the butthole.
I reckon, mate.
She was disgusting, wasn't she?
Yeah.
She was gross.
Gotta say, she was kind of gross.
Her pussy hair was like dried grass.
Yeah, like the kind you see
on those African wildlife shows,
sort of all dry and orangey.
(LAUGHING)
She faked all her orgasms with me.
She definitely did with you.
We don't need her.
Let's kill Ricky Prickles.
BOTH: Let's kill Ricky Prickles.
Let's kill Ricky Prickles.
Let's kill Ricky Prickles!
(LAUGHING)
Fuck you, guys!
I am professional sprinter!
I am Ricky Prickles!
You'll never catch me!
Oh, fuck.
(SCREAMING)
(SNARLING)
(GROANING)
(SCREAM)


-->
<!--
  YouTube's Recycle Bin - KVN AUST
  https://github.com/sworrl/KVN_AUST
  https://kvnaust.falcontechnix.com/

  FORMAT SYNC: Formats fetched from GitHub FORMAT-MAP.md (works from file:// and hosted).
  For offline/file:// usage, formats are hardcoded below. To update them,
  run the companion script: update-formats.sh (see repo root).
  Or set up a cron job on your server:
    */30 * * * * /path/to/update-formats.sh
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Official fan-made KVN AUST game tool for YouTube&#039;s Recycle Bin series. Spin the format wheel for default filenames (IMG_, DSC_, VID_, MVI_, P_), generate search strings, discover zero-view YouTube videos, play KVN AUST Recycle Bin Bingo, and browse the full format map. Works with every KVN AUST / KVNAUST / KVN_AUST video. Built by @Chegnus for KVN AUST (MingKasterMK).">
<meta name="keywords" content="KVN AUST, KVNAUST, KVN_AUST, kvn aust, kvnaust, kvn aust html, kvn aust game, kvn aust tool, kvn aust game tool, kvn aust bingo, kvn aust wheel, kvn aust format wheel, kvn aust map, kvn aust format map, kvn aust recycle bin, youtube recycle bin, youtube&#039;s recycle bin, recycle bin youtube, zero view videos, zero view youtube, zero-view, YouTube hidden videos, default filename search, IMG_ search, DSC_ search, VID_ search, MVI_ search, P_ search, KVNAUST bingo, KVNAUST wheel, KVNAUST game, KVN_AUST html, MingKasterMK, Ming Kaster, ming kaster mk, @MingKasterMK, Chegnus, @Chegnus, FalconTechnix">
<meta name="author" content="Justin / @Chegnus / FalconTechnix">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://kvnaust.falcontechnix.com/">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="KVN AUST Game Tool — YouTube&#039;s Recycle Bin Format Wheel, Bingo &amp; Zero-View Video Finder | KVNAUST HTML">
<meta property="og:description" content="Official fan-made KVN AUST game tool for YouTube&#039;s Recycle Bin series. Spin the format wheel for default filenames (IMG_, DSC_, VID_, MVI_, P_), generate search strings, discover zero-view YouTube videos, play KVN AUST Recycle Bin Bingo, and browse the full format map. Works with every KVN AUST / KVNAUST / KVN_AUST video. Built by @Chegnus for KVN AUST (MingKasterMK).">
<meta property="og:url" content="https://kvnaust.falcontechnix.com/">
<meta property="og:site_name" content="FalconTechnix">
<meta property="og:image" content="https://kvnaust.falcontechnix.com/screenshots/social-preview.png">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="KVN AUST Game Tool — YouTube&#039;s Recycle Bin Format Wheel, Bingo &amp; Zero-View Video Finder | KVNAUST HTML">
<meta name="twitter:description" content="Official fan-made KVN AUST game tool for YouTube&#039;s Recycle Bin series. Spin the format wheel for default filenames (IMG_, DSC_, VID_, MVI_, P_), generate search strings, discover zero-view YouTube videos, play KVN AUST Recycle Bin Bingo, and browse the full format map. Works with every KVN AUST / KVNAUST / KVN_AUST video. Built by @Chegnus for KVN AUST (MingKasterMK).">
<meta name="twitter:image" content="https://kvnaust.falcontechnix.com/screenshots/social-preview.png">
<meta name="twitter:creator" content="@Chegnus">
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Sonder — for KVN AUST's YouTube Recycle Bin",
  "alternateName": "Sonder",
  "description": "Sonder — a tool for the videos no one ever watched. 267 format spinner (KVN Map 4.0), bingo with Lose-a-Space penalty, achievements, Deep Dive mode, community leaderboard, video gallery. Discover zero-view YouTube videos.",
  "url": "https://kvnaust.falcontechnix.com/",
  "applicationCategory": "GameApplication",
  "operatingSystem": "Any",
  "author": {
    "@type": "Person",
    "name": "Justin",
    "url": "https://falcontechnix.com"
  },
  "about": {
    "@type": "Person",
    "name": "KVN AUST",
    "url": "https://www.youtube.com/@KVNAUST",
    "sameAs": ["https://x.com/MingKasterMK"]
  },
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Space+Mono:wght@700&display=swap">
<link rel="icon" type="image/png" id="favicon">
<link rel="manifest" href="manifest.json">
<title>KVN AUST Game Tool — YouTube&#039;s Recycle Bin Format Wheel, Bingo &amp; Zero-View Video Finder | KVNAUST HTML</title>
<style>
/* Fonts loaded via <link> in <head> for performance */
*{margin:0;padding:0;box-sizing:border-box}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root{--accent:#e74c3c;--accent2:#ff6b4a;--bg:#0d0d14;--card:#161625;--card2:#1e1e32;--text:#eee;--muted:#777;
  --surface:#07070f;--border:#252540;--screen-inner:#1a1a30;
  --daub:rgba(76,175,80,.65);--trans:.45s;
  --g1:#e74c3c;--g2:#f39c12;--g3:#2ecc71;--g4:#3498db;--g5:#9b59b6}
/* Deep Dive theme overrides */
body.deep-dive{--accent:#00bcd4;--accent2:#26c6da;--bg:#020608;--card:#081218;--card2:#0c1a24;
  --surface:#020a10;--border:#0a2838;--screen-inner:#082030;
  --g1:#00bcd4;--g2:#0097a7;--g3:#00838f;--g4:#006064;--g5:#004d40;--daub:rgba(0,188,212,.55)}
body.deep-dive .header{background:linear-gradient(180deg,rgba(0,15,30,.98),rgba(2,6,8,.96));border-bottom:1px solid rgba(0,188,212,.15)}
body.deep-dive .header-title{background:linear-gradient(135deg,#4dd0e1,#00bcd4,#0097a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
body.deep-dive .header-subtitle{color:#0097a7}
body.deep-dive .start-btn{background:linear-gradient(135deg,#00838f,#006064);box-shadow:0 4px 20px rgba(0,188,212,.3)}
body.deep-dive .start-btn:hover{box-shadow:0 6px 35px rgba(0,188,212,.5)}
body.deep-dive .header-banner img{filter:hue-rotate(160deg) saturate(.6) brightness(.6)}
body.deep-dive .main{background:linear-gradient(180deg,rgba(0,8,16,.4) 0%,rgba(0,20,40,.2) 40%,rgba(0,50,70,.12) 80%,rgba(0,80,100,.08) 100%)}
body.deep-dive::before{background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%2300bcd4' fill-opacity='.15'/%3E%3Ccircle cx='10' cy='15' r='1' fill='%23006064' fill-opacity='.1'/%3E%3Ccircle cx='65' cy='70' r='.8' fill='%230097a7' fill-opacity='.12'/%3E%3C/svg%3E");background-size:80px 80px;animation:bgDrift 40s linear infinite;opacity:.04}
body.deep-dive .spin-btn{box-shadow:0 6px 30px rgba(0,0,0,.7),0 0 25px rgba(0,188,212,.3);border-color:#0097a7}
body.deep-dive .spin-label{color:#00bcd4}
body.deep-dive .wheel-pointer svg polygon#ptrFill{fill:url(#ptrGrad);stroke:var(--pointer-glow,#0097a7)}
body.deep-dive .wheel-pointer svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.7)) drop-shadow(0 0 8px var(--pointer-glow,rgba(0,188,212,.4)))}
body.deep-dive .number-box{border-color:#0a2a3a;box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(0,188,212,.08)}
body.deep-dive .rolling-number{color:#4dd0e1}
body.deep-dive .result-pill{border-color:#0a2a3a;color:#4dd0e1}
body.deep-dive .result-pill:hover{border-color:#00bcd4;box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 15px rgba(0,188,212,.2)}
body.deep-dive .gen-btn{background:linear-gradient(135deg,#00838f,#006064)}
body.deep-dive .vt-btn.save{background:linear-gradient(135deg,#00838f,#006064)}
body.deep-dive .nav-btn.primary{background:#00838f;border-color:#00838f}
body.deep-dive .hdr-btn.active{background:#00838f;border-color:#00838f}
body.deep-dive .tagline{color:#0097a7}
body.deep-dive .bingo-card{border-color:#0a2a3a;background:linear-gradient(145deg,#081218,#040a0f)}
body.deep-dive .bingo-card-header{background:linear-gradient(135deg,#00bcd4,#0097a7,#00838f,#006064,#004d40);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.deep-dive .result-sub{color:#0097a7}
body.deep-dive .click-hint{color:#006064}
body.deep-dive .format-banner{color:#4dd0e1}
body.deep-dive .toast.ok{background:linear-gradient(135deg,#00838f,#006064)}
body.deep-dive canvas#wheelCanvas{filter:drop-shadow(0 0 20px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(0,188,212,.1))}
body.deep-dive .screen-nav{border-color:rgba(0,188,212,.15)}
body.deep-dive .screen-nav:hover{border-color:rgba(0,188,212,.3);color:#4dd0e1}
body.deep-dive .wheel-count-wrap{border-color:#0a2a3a}
body.deep-dive .wheel-mode-btns button.active{background:#00838f;border-color:#00838f}
body.deep-dive .credit-footer{background:linear-gradient(0deg,rgba(2,6,8,.95) 0%,rgba(2,6,8,.6) 60%,transparent)}
/* Anchor drop wipe */
.anchor-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
.anchor-wipe .anchor-bg{position:absolute;inset:0;background:linear-gradient(180deg,#010408 0%,#021020 30%,#041830 60%,#062040 100%);transform:translateY(-100%);animation:anchorBgDrop 1.4s cubic-bezier(.4,0,.2,1) forwards}
/* Water texture overlay — animated caustics pattern */
.anchor-wipe .anchor-bg::before{content:'';position:absolute;inset:0;opacity:.06;
  background:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015' numOctaves='3' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='30'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%2300bcd4' filter='url(%23w)' opacity='.5'/%3E%3C/svg%3E");
  background-size:200px 200px;animation:waterShift 8s linear infinite;mix-blend-mode:screen}
.anchor-wipe .anchor-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(0,188,212,.08),transparent 70%),
  repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(0,188,212,.02) 40px,rgba(0,188,212,.02) 80px);pointer-events:none}
@keyframes rainbowShift{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes ngPulse{0%,100%{box-shadow:0 0 18px rgba(231,76,60,.45),0 4px 24px rgba(231,76,60,.25);transform:scale(1)}50%{box-shadow:0 0 42px rgba(231,76,60,.85),0 8px 48px rgba(231,76,60,.45),0 0 80px rgba(255,120,80,.2);transform:scale(1.035)}}
@keyframes waterShift{0%{background-position:0 0}100%{background-position:200px 100px}}
/* Water surface line at top */
.anchor-wipe .water-surface{position:absolute;top:0;left:0;right:0;height:4px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(0,188,212,.3) 20%,rgba(100,220,240,.5) 50%,rgba(0,188,212,.3) 80%,transparent);
  opacity:0;animation:surfaceAppear .3s .2s ease forwards}
@keyframes surfaceAppear{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
/* Splash droplets */
.anchor-wipe .splash-drop{position:absolute;z-index:3;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(180,240,255,.6),rgba(0,188,212,.2));
  opacity:0;animation:splashDrop 1s ease-out forwards}
@keyframes splashDrop{0%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-60px) scale(1)}60%{opacity:.6}100%{opacity:0;transform:translateY(80px) scale(.3)}}
.anchor-wipe .anchor-icon{position:relative;z-index:2;font-size:5rem;animation:anchorFall 1.4s cubic-bezier(.4,0,.2,1) forwards;opacity:0;
  filter:drop-shadow(0 0 20px rgba(0,188,212,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.8))}
.anchor-wipe .anchor-text{position:relative;z-index:2;font-weight:900;font-size:1.5rem;letter-spacing:6px;opacity:0;animation:anchorTextFade .6s .9s ease forwards;
  background:linear-gradient(135deg,#4dd0e1,#00bcd4,#0097a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,188,212,.4))}
.anchor-wipe .anchor-sub{position:relative;z-index:2;color:#006064;font-size:.7rem;font-weight:600;letter-spacing:2px;opacity:0;animation:anchorTextFade .4s 1.1s ease forwards}
.anchor-wipe .anchor-splash{position:absolute;bottom:0;left:0;right:0;height:100px;z-index:2;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,188,212,.5),rgba(0,150,180,.25) 30%,rgba(0,100,120,.1) 60%,transparent 80%);
  opacity:0;animation:splashIn .6s .9s cubic-bezier(.2,0,.3,1) forwards}
.anchor-wipe .anchor-rings{position:absolute;z-index:1;width:200px;height:200px;border-radius:50%;
  border:2px solid rgba(0,188,212,.15);animation:sonarRing 1.5s .6s ease-out forwards;opacity:0}
.anchor-wipe .anchor-rings:nth-child(6){animation-delay:.8s;width:300px;height:300px}
.anchor-wipe .anchor-rings:nth-child(7){animation-delay:1s;width:400px;height:400px}
@keyframes sonarRing{0%{transform:scale(0);opacity:.4}100%{transform:scale(2);opacity:0}}
.anchor-wipe .anchor-particles{position:absolute;inset:0;z-index:1;overflow:hidden}
.anchor-wipe .anchor-particle{position:absolute;width:2px;height:2px;background:rgba(0,188,212,.3);border-radius:50%;animation:particleDrift 2s linear forwards}
@keyframes particleDrift{0%{transform:translateY(0);opacity:.5}100%{transform:translateY(-100px);opacity:0}}
.anchor-wipe.rising .anchor-bg{animation:anchorBgRise 1.1s cubic-bezier(.4,0,.2,1) forwards}
.anchor-wipe.rising .water-surface{animation:anchorTextOut .3s ease forwards}
.anchor-wipe.rising .anchor-icon{animation:anchorRise 1.1s cubic-bezier(.4,0,.2,1) forwards}
.anchor-wipe.rising .anchor-text{animation:anchorTextOut .3s ease forwards}
.anchor-wipe.rising .anchor-sub{animation:anchorTextOut .2s ease forwards}
.anchor-wipe.rising .anchor-splash{animation:splashOut .6s ease forwards}
@keyframes anchorBgDrop{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}
@keyframes anchorFall{0%{transform:translateY(-120vh) rotate(-10deg);opacity:0}15%{opacity:1}85%{transform:translateY(10px) rotate(2deg)}100%{transform:translateY(0) rotate(0);opacity:1}}
@keyframes anchorTextFade{0%{opacity:0;transform:translateY(15px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes anchorBgRise{0%{transform:translateY(0)}100%{transform:translateY(100%)}}
@keyframes anchorRise{0%{transform:translateY(0);opacity:1}80%{opacity:1}100%{transform:translateY(120vh);opacity:0}}
@keyframes anchorTextOut{0%{opacity:1}100%{opacity:0}}
@keyframes splashIn{0%{opacity:0;transform:scaleY(0)}60%{opacity:1;transform:scaleY(1.5)}100%{opacity:.6;transform:scaleY(1)}}
@keyframes splashOut{0%{opacity:.6;transform:scaleY(1)}100%{opacity:0;transform:scaleY(2)}}
#bubbleCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:none}
body.deep-dive #bubbleCanvas{display:block}
body.deep-dive .deep-dive-badge{display:inline-block}
.deep-dive-badge{display:none;font-size:.55rem;padding:2px 8px;border-radius:4px;background:rgba(0,188,212,.15);color:#00bcd4;font-weight:700;letter-spacing:1px;margin-left:6px;vertical-align:middle;animation:daubPulse 3s ease-in-out infinite}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif}

/* ── HEADER ── */
.header{position:fixed;top:0;left:0;right:0;height:220px;z-index:500;display:flex;align-items:flex-end;padding:0 20px 14px;gap:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.85) 100%);backdrop-filter:blur(5px);
  border-bottom:1px solid rgba(231,76,60,.12);box-shadow:0 2px 20px rgba(0,0,0,.4),0 1px 0 rgba(231,76,60,.08)}
.header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),var(--accent),transparent);
  opacity:.5;animation:headerAccentShift 4s ease-in-out infinite}
@keyframes headerAccentShift{0%,100%{opacity:.3;filter:blur(0px)}50%{opacity:.6;filter:blur(1px)}}
@media(max-width:600px){.header{height:110px;padding:0 8px 6px;gap:6px}
  .header-banner img{object-position:center 40%}
  .header-title{font-size:.85rem}.header-subtitle{font-size:.55rem}
  .yt-avatar{width:28px;height:28px}
  .header-right{gap:2px;flex-wrap:wrap;max-width:60%}.hdr-btn{font-size:.55rem;padding:2px 5px}
  .main{top:110px}.bingo-overlay,.format-panel,.history-panel,.bingo-setup{top:110px}
  .wheel-container{width:min(85vw,85vh)!important;height:min(85vw,85vh)!important}
  .spin-btn{width:90px!important;height:90px!important}
  .spin-label{width:76px!important;height:76px!important}.sdi{font-size:1.9rem!important}
  .result-pill{padding:18px 28px;font-size:clamp(1.2rem,4vw,2rem)}
  .video-tracker{width:95vw!important}
  .vt-row{gap:4px}.vt-btn{font-size:.7rem;padding:8px 10px}
  .vt-input{font-size:.75rem;padding:8px 10px;min-width:0!important}
  .number-box{padding:24px 20px}
  .rolling-number{font-size:clamp(2rem,8vw,3.5rem)!important}
  .bingo-card{padding:10px;max-width:95vw!important}
  .bf-cell{font-size:clamp(.4rem,1vw,.6rem)!important}
  .start-btn{padding:12px 36px;font-size:.95rem}
  .big-avatar{width:80px!important;height:80px!important}
  .settings-modal{width:96vw!important;padding:16px!important}
  .records-modal{width:98vw!important;padding:16px 12px!important}
  .rec-timeline{height:min(40vh,320px)!important}
  .format-panel,.history-panel{width:85vw!important}
  .screen-nav{width:32px!important;height:56px!important;font-size:.8rem}
  .summary-wrap{padding:10px!important}
}
@media(max-width:380px){
  .hdr-btn{font-size:.5rem;padding:2px 4px}
  .header-right{gap:1px}
  .wheel-container{width:min(92vw,92vh)!important;height:min(92vw,92vh)!important}
  .vt-btn{font-size:.65rem;padding:6px 8px}
}
/* ─────────────────────────────────────────────────────────────
   iOS / Mobile global fixes (apply everywhere, no media query)
   ───────────────────────────────────────────────────────────── */
/* iOS Safari autofill forces white background — override it */
input:-webkit-autofill,input:-webkit-autofill:focus,
input:-webkit-autofill:hover,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--card2) inset!important;
  -webkit-text-fill-color:var(--text)!important;box-shadow:none!important}
/* Ensure all inputs/selects honor theme text color */
input,textarea,select{color:var(--text);-webkit-text-fill-color:var(--text)}
input::placeholder,textarea::placeholder{color:#444;-webkit-text-fill-color:#444}
/* Remove iOS default button/input chrome */
button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{-webkit-appearance:none;appearance:none}
/* ─────────────────────────────────────────────────────────────
   MOBILE LAYOUT + PERFORMANCE (≤768px)
   Primary fixes: kill backdrop-filter (GPU flicker), remove
   filter from screen transitions (main cause of blank/broken
   screen on iOS/Android), bottom-sheet panels, proper touch.
   ───────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* 1. Backdrop-filter is the #1 cause of GPU flicker on mobile.
        Replace with opaque/semi-transparent solid backgrounds. */
  .header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(5,5,14,.96)!important}
  .screen-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(15,15,28,.92)!important}
  .bingo-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(0,0,0,.91)!important}
  .settings-overlay,.records-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(0,0,0,.94)!important}
  .ps-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(0,0,0,.88)!important}
  .sonder-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(0,0,14,.97)!important}
  .bingo-win,.lose-space{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(0,0,8,.97)!important}
  .bingo-flash{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(6,3,20,.96)!important}
  .search-results{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(0,0,0,.94)!important}

  /* 2. Screen transitions: filter:blur() on every .screen element
        thrashes the GPU constantly. Strip it — opacity+transform only. */
  .screen{filter:none!important;will-change:opacity,transform!important;
    transition:opacity .28s ease,transform .28s cubic-bezier(.4,0,.2,1)!important}
  .screen.exit-left{filter:none!important}

  /* 3. Kill canvas drop-shadow (costly GPU compositing on mobile) */
  canvas#wheelCanvas,body.deep-dive canvas#wheelCanvas{filter:none!important}

  /* 4. Stop background particle animations (battery + GPU drain) */
  body::before,body::after{animation:none!important;display:none!important}
  .header::after{animation:none!important}

  /* 5. Side panels → bottom sheets on mobile */
  .format-panel,.bingo-setup,.kvn-videos-panel{
    top:auto!important;left:0!important;right:0!important;width:100%!important;
    height:76vh;border-radius:16px 16px 0 0;
    border-left:none;border-top:1px solid #3a3a55;box-shadow:0 -4px 30px rgba(0,0,0,.6);
    transform:translateY(100%)!important;transition:transform .35s ease}
  .history-panel{
    top:auto!important;left:0!important;right:0!important;width:100%!important;
    height:76vh;border-radius:16px 16px 0 0;
    border-right:none;border-top:1px solid #3a3a55;box-shadow:0 -4px 30px rgba(0,0,0,.6);
    transform:translateY(100%)!important;transition:transform .35s ease}
  .format-panel.open,.history-panel.open,.bingo-setup.open,.kvn-videos-panel.open{
    transform:translateY(0)!important}

  /* 6. Power Search panel: full-width bottom sheet */
  .ps-overlay{align-items:flex-end!important}
  .ps-panel{width:100%!important;max-height:90vh;border-radius:14px 14px 0 0;
    margin:0;box-shadow:0 -4px 30px rgba(0,0,0,.6)}
  .ps-thumb{width:88px}
  .ps-result{gap:8px}

  /* 7. err-panel: constrain to viewport */
  .err-panel{width:calc(100vw - 32px)!important;right:16px;left:16px}

  /* 8. Result screen: stack cleanly, allow scroll */
  #result-screen{justify-content:flex-start;padding-top:16px;padding-bottom:80px}
  .result-pill{font-size:clamp(1.1rem,5vw,1.8rem)!important;
    padding:16px 20px!important;border-radius:16px;max-width:92vw;word-break:break-all}
  .video-tracker{width:92vw!important;padding-bottom:30px}
  .vt-row#vtBtnRow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .vt-btn{min-height:44px;font-size:.72rem}

  /* 9. Settings modal: scrollable on mobile */
  .settings-modal{max-height:92vh!important;overflow-y:auto!important}
  .records-modal{width:100%!important;max-height:92vh;border-radius:14px 14px 0 0}

  /* 10. Format panel category pills: horizontal scroll row */
  .fp-cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fp-cats::-webkit-scrollbar{display:none}
  .theme-grid{grid-template-columns:repeat(3,1fr)}

  /* 11. Minimum touch targets */
  .fp-cat{min-height:34px;padding:5px 11px}
  .ts{padding:8px 3px 6px}
  .hdr-btn{min-height:34px}
  .vt-star{font-size:1.6rem;padding:2px 4px;cursor:pointer}

  /* 12. Summary screen: full padding reset */
  .summary-wrap{padding:12px!important}
}
@media(max-width:480px){
  .big-avatar{width:72px!important;height:72px!important}
  .start-btn{width:88vw;max-width:300px}
  .format-banner{font-size:clamp(1.1rem,5.5vw,1.9rem)!important;padding:16px 20px}
  .number-box{padding:22px 20px!important}
  .rolling-number{font-size:clamp(2.4rem,8vw,3.5rem)!important}
  .wheel-container{width:min(90vw,90vh)!important;height:min(90vw,90vh)!important}
  .spin-btn{width:88px!important;height:88px!important}
  .spin-label{width:74px!important;height:74px!important}.sdi{font-size:1.8rem!important}
  .result-sub{font-size:.72rem;margin-top:6px}
  .vt-label{font-size:.68rem}
  .ps-controls{flex-wrap:wrap;gap:6px}
  .ps-query{max-width:100%;white-space:normal}
}
.header-banner{position:absolute;inset:0;z-index:-1;overflow:hidden}
.header-banner img{width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.55;transition:opacity 1s}
.yt-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--accent);object-fit:cover;flex-shrink:0;box-shadow:0 0 12px rgba(231,76,60,.3)}
.header-title{font-weight:900;font-size:1.15rem;letter-spacing:1px;color:#fff;
  text-shadow:0 0 10px rgba(231,76,60,.6),0 0 20px rgba(231,76,60,.3),0 2px 10px #000,0 0 40px rgba(231,76,60,.15)}
.header-subtitle{font-size:.7rem;color:#aaa;text-shadow:0 1px 6px #000}
.header-right{margin-left:auto;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:280px;flex-shrink:0}
@media (max-width:760px){.header-right{max-width:200px}}
.hdr-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;padding:5px 12px;border-radius:6px;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(4px)}
.hdr-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}.hdr-btn:active{transform:scale(.94)}.hdr-btn.active{background:var(--accent);border-color:var(--accent);box-shadow:0 2px 12px rgba(231,76,60,.3)}
/* Icon variant — uniform 32×32 box with centered SVG. Used for the header
 * action row so the buttons align as one consistent strip instead of a
 * row of mixed text widths. Tooltips (title=) carry the label.
 */
.hdr-btn-icon{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);color:#fff;width:30px;height:30px;padding:0;border-radius:7px;cursor:pointer;
  transition:transform .12s ease-out,box-shadow .15s ease-out,filter .15s,background .15s;
  display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 2px rgba(0,0,0,.25),
    0 2px 0 rgba(0,0,0,.5),
    0 4px 8px rgba(0,0,0,.4);
  backdrop-filter:blur(4px)}
.hdr-btn-icon svg{width:15px;height:15px;display:block;stroke:currentColor;fill:none}
.hdr-btn-icon:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border-color:rgba(255,255,255,.24);transform:translateY(-1px);filter:brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.22),
    0 3px 0 rgba(0,0,0,.5),
    0 6px 12px rgba(0,0,0,.5)}
.hdr-btn-icon:active{transform:translateY(1px);filter:brightness(.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 1px 3px rgba(0,0,0,.4),
    0 1px 0 rgba(0,0,0,.45),
    0 1px 3px rgba(0,0,0,.3)}
.hdr-btn-icon.active{background:linear-gradient(180deg,#ff6b5e,var(--accent));border-color:rgba(231,76,60,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 2px rgba(0,0,0,.22),
    0 2px 0 rgba(120,30,30,.6),
    0 4px 12px rgba(231,76,60,.45)}
/* Formats button is wider so its status dot + count fit beside the icon */
.hdr-btn-icon.is-formats{width:auto;padding:0 8px;gap:4px}
.hdr-fmt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#888;box-shadow:0 0 4px transparent;flex-shrink:0;transition:background .2s,box-shadow .2s}
.hdr-fmt-dot.live{background:#2ecc71;box-shadow:0 0 5px #2ecc71}
.hdr-fmt-dot.cached{background:#e74c3c;box-shadow:0 0 5px #e74c3c}
.hdr-fmt-count{font-size:.62rem;font-weight:700;opacity:.75;letter-spacing:.01em;font-family:'Space Mono','SFMono-Regular',monospace}
.hdr-fmt-count:empty{display:none}
/* Counter pill that sits in the upper-right of icon buttons (used by History) */
.hdr-count-pill{position:absolute;top:-4px;right:-4px;background:#e74c3c;color:#fff;font-size:.55rem;font-weight:900;line-height:1;padding:3px 5px;border-radius:8px;border:1px solid rgba(0,0,0,.4);min-width:14px;text-align:center;pointer-events:none}
.hdr-count-pill:empty{display:none}

/* ── SOUND PICKER (tiny in header) ── */
.sound-pick{display:flex;align-items:center;gap:4px}
.sound-pick select{background:var(--card2);border:1px solid #3a3a55;color:#ccc;padding:2px 6px;border-radius:4px;font-size:.65rem;cursor:pointer}

/* ── MAIN ── */
.main{position:fixed;top:220px;left:0;right:0;bottom:0;overflow:hidden}

/* ── SCREENS ── */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:scale(.93) translateY(30px);filter:blur(4px);
  transition:opacity var(--trans),transform var(--trans) cubic-bezier(.4,0,.2,1),filter var(--trans);will-change:opacity,transform,filter}
.screen.active{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);filter:blur(0)}
.screen.exit-left{opacity:0;transform:scale(.9) translateX(-80px) rotateY(5deg);filter:blur(6px);transition:opacity .4s ease-in,transform .4s cubic-bezier(.6,0,.7,.2),filter .4s}

/* ── NAV ARROWS ── */
.screen-nav{position:fixed;top:50%;z-index:80;transform:translateY(-50%);width:48px;height:80px;
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.07));
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06);color:#555;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s;opacity:0;pointer-events:none;
  box-shadow:0 2px 12px rgba(0,0,0,.3)}
.screen-nav:hover{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.14));color:#fff;border-color:rgba(255,255,255,.15);box-shadow:0 4px 20px rgba(0,0,0,.4)}.screen-nav:active{transform:translateY(-50%) scale(.92);background:rgba(255,255,255,.12)}
.screen-nav.show{opacity:1;pointer-events:auto}
#navBack{left:0;border-radius:0 12px 12px 0;border-left:none}
#navFwd{right:0;border-radius:12px 0 0 12px;border-right:none}

/* ── START ── */
#start-screen{background:radial-gradient(ellipse at 50% 40%,var(--screen-inner),var(--bg))}
#start-screen .logo-area{display:flex;flex-direction:column;align-items:center;gap:16px;animation:floatIn .8s ease}
.big-avatar{width:150px;height:150px;border-radius:50%;border:3px solid var(--accent);object-fit:cover;
  box-shadow:0 0 40px rgba(231,76,60,.25),0 0 80px rgba(231,76,60,.08);animation:avatarBreathe 4s ease-in-out infinite}
@keyframes avatarBreathe{0%,100%{transform:scale(1) translateY(0);box-shadow:0 0 30px rgba(231,76,60,.2)}
  30%{transform:scale(1.04) translateY(-3px);box-shadow:0 0 50px rgba(231,76,60,.35)}
  60%{transform:scale(1.01) translateY(1px);box-shadow:0 0 35px rgba(231,76,60,.25)}}
#start-screen h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:900;text-align:center;letter-spacing:3px;
  background:linear-gradient(135deg,#fff,#e74c3c,#f39c12,#fff);background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:titleGradientShift 6s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(231,76,60,.5)) drop-shadow(0 0 30px rgba(231,76,60,.2)) drop-shadow(0 2px 4px rgba(0,0,0,.8))}
@keyframes titleGradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#start-screen .tagline{color:#999;font-size:.88rem;margin-bottom:20px;text-align:center;letter-spacing:1px;
  text-shadow:0 0 12px rgba(255,255,255,.06)}
.start-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:16px 52px;font-size:1.1rem;font-weight:900;border-radius:12px;cursor:pointer;letter-spacing:2px;transition:transform .15s,box-shadow .3s;
  box-shadow:0 4px 25px rgba(231,76,60,.35),0 0 0 1px rgba(255,255,255,.06) inset;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08)}
.start-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 50%);pointer-events:none;border-radius:12px}
.start-btn::after{content:'';position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 -2px 6px rgba(0,0,0,.3);pointer-events:none}
.start-btn:hover{transform:scale(1.05);box-shadow:0 6px 35px rgba(231,76,60,.5),0 0 50px rgba(231,76,60,.15)}.start-btn:active{transform:scale(.97);box-shadow:0 2px 15px rgba(231,76,60,.25)}
.ng-pulse{animation:ngPulse 2s ease-in-out infinite}.ng-pulse:hover{animation:none}

/* ── BINGO FLASH (start-of-round w/ per-cell animation) ── */
.bingo-flash{position:fixed;inset:0;z-index:550;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(20,10,40,.92) 0%,rgba(0,0,0,.92) 100%);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .4s;
  box-shadow:inset 0 0 120px rgba(180,120,255,.04)}
.bingo-flash.show{opacity:1;pointer-events:auto}
.bf-title{font-size:1.8rem;font-weight:900;margin-bottom:14px;animation:fadeUp .5s ease,titleShift 8s ease-in-out infinite;
  background:linear-gradient(135deg,#d4a0a0,#e8c89e,#b8d4a0,#a0c4d4,#c0a8d8);background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;letter-spacing:2px;filter:brightness(1.1)}
@keyframes titleShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.bf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:480px;width:85vw;position:relative}
.bf-cell{color:#fff;border:2px solid rgba(180,160,220,.2);border-radius:4px;position:relative;z-index:1;
  background:linear-gradient(145deg,rgba(40,35,60,.7),rgba(20,18,35,.8));
  box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,1);display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(.5rem,1.2vw,.7rem);font-weight:600;padding:6px 3px;aspect-ratio:1;opacity:0;transform:scale(0) rotateY(90deg);transition:none}
.bf-cell.revealed{opacity:1;transform:scale(1) rotateY(0);transition:opacity .3s,transform .3s cubic-bezier(.17,.67,.35,1.2)}
.bf-cell.free{background:#fff9c4;color:var(--accent);font-weight:900;cursor:pointer;border-color:#f0c040;font-size:clamp(.6rem,1.5vw,.85rem)}
.bf-cell.free:not(.clicked):hover{transform:scale(1.08);box-shadow:0 0 15px rgba(231,76,60,.4)}
.bf-cell.free.clicked{background:#4caf50;color:#fff;border-color:#388e3c}
/* slide-puzzle transition for bingo flash cells */
.bf-grid{position:relative}
.bf-grid.puzzle-mode{display:block !important}
.bf-grid.puzzle-mode .bf-cell{position:absolute;transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1);will-change:left,top}
.bf-free-msg{margin-top:12px;font-size:.85rem;color:#4caf50;opacity:0;transition:opacity .5s;font-style:italic}
.bf-free-msg.show{opacity:1}
.bf-continue{margin-top:16px;opacity:0;pointer-events:none;transition:opacity .4s}
.bf-continue.show{opacity:1;pointer-events:auto}

/* ── WHEEL ── */
#wheel-screen{background:radial-gradient(ellipse at 50% 60%,var(--screen-inner),var(--bg))}
#wheel-screen .wheel-top{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.wheel-count-wrap{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  padding:5px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .2s}
.wheel-count-wrap:hover{border-color:rgba(255,255,255,.14)}
.wheel-count-wrap label{font-size:.75rem;color:var(--muted)}
.wheel-count-wrap input{width:52px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);color:#fff;padding:3px 6px;border-radius:4px;text-align:center;font-weight:700;font-size:.85rem;transition:border-color .15s}
.wheel-count-wrap input:focus{outline:none;border-color:rgba(231,76,60,.4)}
.wheel-count-wrap button{background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#fff;padding:3px 10px;border-radius:5px;cursor:pointer;font-weight:700;font-size:.75rem;
  transition:transform .12s ease-out,box-shadow .15s ease-out,filter .15s;text-shadow:0 1px 1px rgba(0,0,0,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 2px 0 rgba(120,30,30,.55),
    0 4px 8px rgba(231,76,60,.35)}
.wheel-count-wrap button:hover{transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 3px 0 rgba(120,30,30,.55),
    0 6px 12px rgba(231,76,60,.45)}
.wheel-count-wrap button:active{transform:translateY(1px);filter:brightness(.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 1px 3px rgba(0,0,0,.35),
    0 1px 0 rgba(120,30,30,.5),
    0 1px 4px rgba(231,76,60,.25)}
.wheel-mode-btns{display:flex;gap:4px}
.wheel-mode-btns button{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);color:#888;
  padding:4px 10px;border-radius:5px;cursor:pointer;font-size:.72rem;font-weight:600;
  transition:transform .12s ease-out,box-shadow .15s ease-out,color .15s,background .15s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 2px 0 rgba(0,0,0,.45),
    0 3px 6px rgba(0,0,0,.35)}
.wheel-mode-btns button:hover{color:#ccc;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border-color:rgba(255,255,255,.18);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 3px 0 rgba(0,0,0,.45),
    0 5px 10px rgba(0,0,0,.45)}
.wheel-mode-btns button:active{transform:translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 1px 3px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.4),
    0 1px 3px rgba(0,0,0,.3)}
.wheel-mode-btns button.active{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:rgba(231,76,60,.6);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 2px rgba(0,0,0,.22),
    0 2px 0 rgba(120,30,30,.6),
    0 4px 12px rgba(231,76,60,.42)}
.wheel-container{position:relative;width:min(68vh,68vw,520px);height:min(68vh,68vw,520px)}
canvas#wheelCanvas{width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 0 20px rgba(0,0,0,.5));pointer-events:none}
.wheel-pointer{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:10;animation:pointerIdle 2s ease-in-out infinite;transition:top .3s cubic-bezier(.4,0,.2,1)}
.wheel-pointer svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.7)) drop-shadow(0 0 6px var(--pointer-glow,transparent));transition:filter .15s;transform-origin:50% 0%}
.wheel-pointer.locked{top:-6px;animation:pointerBite .25s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pointerIdle{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(3px)}}
@keyframes pointerBite{0%{transform:translateX(-50%) translateY(-4px) scale(1)}40%{transform:translateX(-50%) translateY(8px) scale(1.1)}70%{transform:translateX(-50%) translateY(2px) scale(1.05)}100%{transform:translateX(-50%) translateY(4px) scale(1.02)}}
/* CW deflects LEFT (incoming segment from left pushes tip left), CCW deflects RIGHT */
@keyframes pointerTick{0%{transform:translateX(-50%) rotate(0deg) translateY(0)}28%{transform:translateX(-50%) rotate(-15deg) translateY(2px)}62%{transform:translateX(-50%) rotate(4deg) translateY(0)}100%{transform:translateX(-50%) rotate(0deg) translateY(0)}}
@keyframes pointerTickCCW{0%{transform:translateX(-50%) rotate(0deg) translateY(0)}28%{transform:translateX(-50%) rotate(15deg) translateY(2px)}62%{transform:translateX(-50%) rotate(-4deg) translateY(0)}100%{transform:translateX(-50%) rotate(0deg) translateY(0)}}
/* Spin direction indicators (large, fill button interior on each side) */
.sdi{font-size:2.4rem;line-height:1;flex-shrink:0;opacity:.07;transition:opacity .3s,filter .3s;
  background:linear-gradient(90deg,hsl(var(--sd-h1,280),80%,70%),hsl(var(--sd-h2,40),80%,70%));
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sdi.active{opacity:1;background:linear-gradient(90deg,hsl(var(--sd-h1,280),85%,74%),hsl(var(--sd-h2,40),85%,74%),hsl(var(--sd-h3,160),85%,74%),hsl(var(--sd-h1,280),85%,74%));
  background-size:300% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:freeGlowFlow 3s linear infinite;filter:drop-shadow(0 0 8px hsla(var(--sd-h2,40),85%,65%,.9))}
/* Lucky Lefty overlay */
#luckyLefty{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(28,5,55,.97),rgba(0,0,8,.98));
  opacity:0;transition:opacity .4s;backdrop-filter:blur(12px)}
#luckyLefty.show{opacity:1}
.ll-inner{text-align:center;padding:20px;animation:llPop .55s cubic-bezier(.2,1.4,.4,1) both}
.ll-arrow{font-size:3.8rem;display:block;animation:llSpinCCW 2s linear infinite;margin-bottom:.5rem}
.ll-title{font-size:clamp(2.4rem,9vw,4.2rem);font-weight:900;letter-spacing:.04em;
  background:linear-gradient(90deg,#c77dff,#ff6bcb,#4fc3f7,#43e97b,#ffd60a,#c77dff);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:freeGlowFlow 2s linear infinite;line-height:1}
.ll-msg{font-size:1.05rem;color:#c0b8d4;font-style:italic;margin-top:1rem;max-width:340px}
@keyframes llPop{0%{transform:scale(.35) translateY(70px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes llSpinCCW{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
/* Big spin button with avatar */
.spin-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;
  background:var(--bg);cursor:pointer;z-index:11;border:4px solid var(--accent);
  box-shadow:0 6px 30px rgba(0,0,0,.7),0 0 24px var(--accent),inset 0 2px 4px rgba(255,255,255,.05);transition:transform .15s,box-shadow .3s,border-color .4s;overflow:hidden;padding:0}
.spin-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;transition:transform .3s}
.spin-btn:hover{transform:translate(-50%,-50%) scale(1.1)}
.spin-btn:hover img{transform:rotate(15deg) scale(1.1)}
.spin-btn:active img{transform:rotate(-20deg) scale(.9)}
.spin-btn.spinning img{animation:spinFace .3s ease}
@keyframes spinFace{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.7)}100%{transform:rotate(360deg) scale(1)}}
.spin-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:12;
  width:110px;height:110px;display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;text-transform:uppercase}
.spin-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-weight:900;font-size:1rem;letter-spacing:1.5px;white-space:nowrap;
  background:linear-gradient(90deg,hsl(var(--sd-h1,280),88%,80%),hsl(var(--sd-h2,40),88%,80%),hsl(var(--sd-h3,160),88%,80%),hsl(var(--sd-h1,280),88%,80%));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:freeGlowFlow 2.5s linear infinite;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.95)) drop-shadow(0 0 12px rgba(0,0,0,.9))}
.spin-hint{margin-top:8px;color:#444;font-size:.75rem}

/* ── FORMAT REVEAL ── */
#format-screen{background:radial-gradient(ellipse at center,var(--screen-inner),var(--bg));cursor:pointer}
.format-banner{background:linear-gradient(160deg,#ffffff 0%,#f0f0f8 60%,#e8e8f4 100%);color:#111;padding:26px 48px;border-radius:12px;font-family:'Space Mono',monospace;
  font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:700;text-align:center;animation:popBounce .5s cubic-bezier(.17,.67,.35,1.3);
  box-shadow:0 10px 50px rgba(0,0,0,.7),0 20px 80px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.6) inset,0 -2px 0 rgba(0,0,0,.08) inset;
  border:1px solid rgba(255,255,255,.9)}
.format-banner .vp{color:#9b59b6}.format-banner .rng{color:var(--accent);font-size:.5em;margin-left:8px}
.click-hint{color:#777;font-size:.7rem;margin-top:12px;animation:fadeUp .5s .5s ease both;letter-spacing:.5px;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ── NUMBER ── */
#number-screen{background:radial-gradient(ellipse at 50% 40%,var(--screen-inner),var(--bg))}
.number-box{background:linear-gradient(145deg,var(--card),var(--card2));border:1px solid #2a2a40;border-radius:18px;padding:40px 56px;
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(91,127,199,.08),inset 0 1px 0 rgba(255,255,255,.04),0 0 60px rgba(91,127,199,.04);
  display:flex;flex-direction:column;align-items:center;gap:20px;animation:slideUp .5s ease}
.rolling-number{font-family:'Space Mono',monospace;font-size:clamp(3rem,9vw,5rem);font-weight:700;min-width:200px;text-align:center;
  text-shadow:0 0 20px rgba(126,156,216,.3),0 0 40px rgba(126,156,216,.1);
  filter:drop-shadow(0 0 8px rgba(126,156,216,.15))}
.range-display{display:flex;gap:32px;color:var(--muted);font-size:.85rem;
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:8px 20px;box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.range-display span{color:#fff;font-weight:700;display:block;font-size:1rem;text-shadow:0 0 12px rgba(126,156,216,.3)}
.gen-btn{background:linear-gradient(135deg,#5b7fc7,#7e9cd8);color:#fff;border:none;padding:14px 56px;font-size:1rem;font-weight:700;border-radius:10px;cursor:pointer;letter-spacing:2px;transition:all .15s;
  box-shadow:0 4px 20px rgba(126,156,216,.25),inset 0 1px 0 rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.gen-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none;border-radius:10px}
.gen-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(126,156,216,.4),0 0 40px rgba(126,156,216,.12)}.gen-btn:active{transform:translateY(1px);box-shadow:0 1px 8px rgba(126,156,216,.2)}

/* ── RESULT ── */
#result-screen{background:radial-gradient(ellipse at center,var(--screen-inner),var(--bg));overflow-y:auto;padding-bottom:60px}
.result-pill{background:linear-gradient(145deg,var(--card),var(--card2));border:2px solid #3a3a55;border-radius:50px;padding:18px 44px;font-family:'Space Mono',monospace;
  font-size:clamp(1.5rem,3.5vw,2.2rem);color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 3px rgba(0,0,0,.3);cursor:pointer;user-select:all;animation:popBounce .5s cubic-bezier(.17,.67,.35,1.3);transition:border-color .2s,box-shadow .2s}
.result-pill:hover{border-color:var(--accent);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 20px rgba(231,76,60,.18),inset 0 1px 0 rgba(255,255,255,.06);cursor:pointer}
.result-sub{color:var(--muted);font-size:.75rem;margin-top:6px}
/* ── SUBTLE BACKGROUND TEXTURE ── */
body::before{content:'';position:fixed;inset:0;z-index:-1;opacity:.06;
  background:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23' cy='45' r='.8' fill='%23fff'/%3E%3Ccircle cx='98' cy='12' r='.5' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='167' cy='78' r='1' fill='%23fff'/%3E%3Ccircle cx='45' cy='134' r='.6' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='134' cy='156' r='.7' fill='%23fff'/%3E%3Ccircle cx='78' cy='189' r='.4' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='189' cy='34' r='.9' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='56' cy='67' r='.3' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='145' cy='112' r='.5' fill='%23fff' opacity='.5'/%3E%3C/svg%3E");
  background-size:200px 200px;animation:bgDrift 60s linear infinite}
body::after{content:'';position:fixed;inset:0;z-index:-1;opacity:.03;
  background:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='80' r='1.2' fill='%23e74c3c' opacity='.3'/%3E%3Ccircle cx='230' cy='45' r='1' fill='%233498db' opacity='.3'/%3E%3Ccircle cx='150' cy='250' r='.8' fill='%232ecc71' opacity='.3'/%3E%3C/svg%3E");
  background-size:300px 300px;animation:bgDrift 90s linear infinite reverse}
@keyframes bgDrift{0%{background-position:0 0}100%{background-position:60px 60px}}
.video-tracker{margin-top:10px;animation:fadeUp .5s .2s ease both;display:flex;flex-direction:column;align-items:center;gap:7px;width:min(92vw,500px);padding-bottom:40px;transition:width .35s ease}
#result-screen .video-tracker{width:min(92vw,740px)!important}
@media(min-width:1100px){#result-screen .video-tracker{width:min(94vw,1500px)!important}}
.vt-row{display:flex;gap:8px;width:100%;align-items:stretch;flex-wrap:wrap;justify-content:center}
.vt-input{flex:1;min-width:200px;background:var(--card2);border:1px solid var(--border);color:#fff;padding:10px 14px;border-radius:10px;font-size:.82rem;font-family:'Inter',sans-serif;transition:border-color .2s,box-shadow .2s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.vt-input:focus{border-color:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 10px rgba(231,76,60,.12)}
.vt-input::placeholder{color:#3a3a50}
.vt-btn{border:none;color:#fff;padding:10px 20px;border-radius:10px;font-weight:700;cursor:pointer;font-size:.78rem;
  transition:transform .12s ease-out,box-shadow .15s ease-out,filter .15s;white-space:nowrap;flex:1;min-width:0;text-align:center;
  position:relative;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 3px 0 rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.4)}
.vt-btn::before{content:'';position:absolute;left:0;right:0;top:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 70%,transparent 100%);
  pointer-events:none;border-radius:10px 10px 0 0}
.vt-btn:hover{transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 4px 0 rgba(0,0,0,.55),
    0 8px 18px rgba(0,0,0,.5)}
.vt-btn:active{transform:translateY(2px);filter:brightness(.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 2px 4px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.5),
    0 2px 6px rgba(0,0,0,.35)}
/* Bespoke button colors */
.vt-btn.copy-btn{background:linear-gradient(135deg,#37474f,#263238)}
.vt-btn.yt-btn{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.vt-btn.rerand-btn{background:linear-gradient(135deg,#7e57c2,#5e35b1)}
.vt-btn.save{background:linear-gradient(135deg,#2ecc71,#1a9c55)}.vt-btn.save:hover{box-shadow:0 4px 14px rgba(46,204,113,.35)}
.vt-btn.save-rerand{background:linear-gradient(135deg,#9b59b6,#7d3c98)}
.vt-btn.skip{background:linear-gradient(135deg,#546e7a,#37474f);border:none}.vt-btn.skip:hover{box-shadow:0 4px 14px rgba(84,110,122,.3)}
.vt-btn.end{background:linear-gradient(135deg,#e74c3c,#c0392b)}.vt-btn.end:hover{box-shadow:0 4px 14px rgba(231,76,60,.35)}
.vt-btn.endonly{background:linear-gradient(135deg,#f39c12,#d68910)}.vt-btn.endonly:hover{box-shadow:0 4px 14px rgba(243,156,18,.35)}
.vt-btn.share-svg{background:linear-gradient(135deg,#3498db,#2176ae)}
.vt-btn.share-discord{background:linear-gradient(135deg,#5865F2,#4752C4)}
.vt-btn.add-records{background:linear-gradient(135deg,#ffd700,#daa520);color:#1a1a2e}
.vt-stars{display:flex;gap:3px}
.vt-star{font-size:1.5rem;cursor:pointer;color:#333;transition:color .12s,transform .12s,text-shadow .12s;user-select:none}
.vt-star:hover,.vt-star.lit{color:#f39c12;transform:scale(1.12);text-shadow:0 0 10px rgba(243,156,18,.4)}
.vt-stars:hover .vt-star{color:#f39c12}.vt-stars .vt-star:hover~.vt-star{color:#333}
.vt-label{font-size:.72rem;color:var(--muted)}

/* ── NAV ROW ── */
.nav-row{display:flex;gap:8px;z-index:50;margin-top:16px}
.nav-btn{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.1);padding:9px 22px;border-radius:8px;font-weight:700;cursor:pointer;font-size:.82rem;transition:all .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.3)}
.nav-btn:hover{background:rgba(255,255,255,.12);box-shadow:0 2px 8px rgba(0,0,0,.4)}.nav-btn:active{transform:scale(.96)}.nav-btn.primary{background:var(--accent);border-color:var(--accent);box-shadow:0 2px 12px rgba(231,76,60,.25)}

/* ── BINGO OVERLAY ── */
.bingo-overlay{position:fixed;top:220px;left:0;right:0;bottom:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s}
.bingo-overlay.open{opacity:1;pointer-events:auto}
.bingo-card{background:linear-gradient(145deg,var(--screen-inner),var(--surface));border:1px solid var(--border);border-radius:16px;padding:18px;
  box-shadow:0 14px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset,0 0 40px rgba(231,76,60,.04);max-width:540px;width:92vw;overflow:hidden;
  transform:scale(.85) translateY(30px);transition:transform .4s cubic-bezier(.4,0,.2,1);position:relative}
.bingo-overlay.open .bingo-card{transform:scale(1) translateY(0)}
.bingo-card-header{text-align:center;font-weight:900;font-size:1.05rem;margin-bottom:3px;
  background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(231,76,60,.5)) drop-shadow(0 0 12px rgba(231,76,60,.25))}
.bingo-card-sub{text-align:center;font-size:.68rem;color:var(--muted);margin-bottom:8px}
.bingo-letters{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:3px}
.bingo-letters span{text-align:center;font-size:1.7rem;font-weight:900}
.bingo-letters span:nth-child(1){color:var(--g1)}.bingo-letters span:nth-child(2){color:var(--g2)}
.bingo-letters span:nth-child(3){color:var(--g3)}.bingo-letters span:nth-child(4){color:var(--g4)}.bingo-letters span:nth-child(5){color:var(--g5)}
.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  background:rgba(0,0,0,.2);border-radius:6px;padding:2px}
.bingo-cell{position:relative;z-index:1;color:#fff;border:2px solid rgba(120,120,120,.4);border-radius:5px;background:rgba(30,28,40,.55);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(.58rem,1.4vw,.8rem);font-weight:800;padding:6px 3px;aspect-ratio:1;cursor:pointer;
  transition:transform .15s,border-color .2s,box-shadow .2s;user-select:none;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,1);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.02);
  animation:bingoWave 4s ease-in-out infinite;animation-delay:var(--wave-delay,0s)}
.bingo-cell:hover{transform:scale(1.04);border-color:#888;box-shadow:inset 0 1px 3px rgba(0,0,0,.4),0 2px 12px rgba(0,0,0,.3),0 0 8px rgba(231,76,60,.06)}
.bingo-cell.free{background:linear-gradient(145deg,#fff9c4,#ffecb3);color:var(--accent);font-weight:900;font-size:clamp(.65rem,1.8vw,.95rem);border-color:#f0c040}
.bingo-cell .daub{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:2}
.bingo-cell.daubed .daub{display:flex}
.bingo-cell.daubed{border-color:color-mix(in srgb,var(--daub) 70%,#000)}
.daub-mark{width:82%;height:82%;opacity:.75;animation:daubPop .3s cubic-bezier(.17,.67,.35,1.3)}
.daub-mark svg{width:100%;height:100%}
/* Proximity tiers: daubs get fancier near bingo */
.bingo-cell.daubed.prox-2 .daub-mark{filter:drop-shadow(0 0 4px var(--daub));opacity:.85}
.bingo-cell.daubed.prox-3 .daub-mark{filter:drop-shadow(0 0 8px var(--daub)) drop-shadow(0 0 16px var(--daub));opacity:.9;animation:daubPop .3s cubic-bezier(.17,.67,.35,1.3),daubPulse 2s ease-in-out infinite}
.bingo-cell.daubed.prox-3{border-color:#f39c12;box-shadow:inset 0 0 12px rgba(243,156,18,.2)}
.bingo-cell.daubed.prox-4 .daub-mark{filter:drop-shadow(0 0 12px var(--daub)) drop-shadow(0 0 24px #ffd700) drop-shadow(0 0 36px #e74c3c);opacity:1;width:90%;height:90%;animation:daubPop .4s cubic-bezier(.17,.67,.35,1.5),daubPulse 1.2s ease-in-out infinite,daubShine 3s linear infinite}
.bingo-cell.daubed.prox-4{border-color:#ffd700;box-shadow:inset 0 0 20px rgba(255,215,0,.25),0 0 12px rgba(255,215,0,.3)}
@keyframes daubPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes daubShine{0%{filter:drop-shadow(0 0 12px var(--daub)) drop-shadow(0 0 24px #ffd700) drop-shadow(0 0 36px #e74c3c) hue-rotate(0deg)}100%{filter:drop-shadow(0 0 12px var(--daub)) drop-shadow(0 0 24px #ffd700) drop-shadow(0 0 36px #e74c3c) hue-rotate(360deg)}}
.bingo-card>*{position:relative;z-index:1}
.bingo-grid{position:relative}
/* mosaic: each cell contains an <img> wrapper that clips to show only this cell's slice */
.mosaic-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:3px;opacity:.4;filter:saturate(.8)}
.mosaic-wrap img{position:absolute;width:calc(500% + 16px);height:calc(500% + 16px);object-fit:cover}
.bingo-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;z-index:2}.bingo-close:hover{color:#fff}
.color-tool{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  background:var(--card2);padding:5px 12px;border-radius:8px;border:1px solid #2a2a40;opacity:0;pointer-events:none;transition:opacity .3s}
.color-tool.show{opacity:1;pointer-events:auto}
.color-tool label{font-size:.65rem;color:var(--muted)}
.color-tool input[type=color]{width:28px;height:24px;border:none;background:none;cursor:pointer}
.color-tool input[type=range]{width:70px;accent-color:var(--accent)}

/* ── PANELS ── */
.fp-search{width:100%;background:var(--card2);border:1px solid #3a3a55;color:#fff;padding:7px 10px;border-radius:6px;font-size:.78rem;font-family:'Inter',sans-serif;margin-bottom:8px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);transition:border-color .2s,box-shadow .2s}
.fp-search::placeholder{color:#444}
.fp-search:focus{border-color:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 8px rgba(231,76,60,.1)}
.fp-count{font-size:.6rem;color:var(--muted);margin-bottom:6px}
.fp-section{font-size:.62rem;color:var(--accent);font-weight:700;margin:8px 0 4px;text-transform:uppercase;letter-spacing:.5px}
.fp-item.hidden{display:none}
.fp-item .fp-range{font-size:.58rem;color:#555;margin-left:auto;white-space:nowrap}
.fp-item .fp-type{font-size:.55rem;padding:1px 5px;border-radius:3px;margin-left:4px;font-weight:600}
.fp-item .fp-type.numbered{background:rgba(46,204,113,.15);color:#2ecc71}
.fp-item .fp-type.date{background:rgba(243,156,18,.15);color:#f39c12}
.fp-item .fp-type.static{background:rgba(155,89,182,.15);color:#9b59b6}
.fp-item .fp-type.special{background:rgba(52,152,219,.15);color:#3498db}
.format-panel{position:fixed;top:220px;right:0;bottom:0;width:340px;background:linear-gradient(180deg,var(--card),#111120);border-left:1px solid #2a2a40;z-index:450;
  transform:translateX(100%);transition:transform .35s ease;box-shadow:-4px 0 30px rgba(0,0,0,.5),-1px 0 0 rgba(255,255,255,.03);overflow-y:auto;padding:14px}
.format-panel.open{transform:translateX(0)}
.format-panel h3{font-size:.9rem;margin-bottom:8px;color:#aaa}
.format-panel .fp-item{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:.74rem;cursor:pointer}
.format-panel .fp-item input{accent-color:var(--accent)}
.format-panel .fp-actions{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.format-panel .fp-actions button{font-size:.68rem;padding:3px 9px;background:var(--card2);border:1px solid #3a3a55;color:#ccc;border-radius:4px;cursor:pointer}
.fp-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer}

.history-panel{position:fixed;top:220px;left:0;bottom:0;width:360px;background:linear-gradient(180deg,var(--card),#111120);border-right:1px solid #2a2a40;z-index:450;
  transform:translateX(-100%);transition:transform .35s ease;box-shadow:4px 0 30px rgba(0,0,0,.5),1px 0 0 rgba(255,255,255,.03);overflow-y:auto;padding:14px}
.history-panel.open{transform:translateX(0)}
.history-panel h3{font-size:.9rem;margin-bottom:10px;color:#aaa}
.game-block{margin-bottom:16px}
.game-header{font-size:.78rem;font-weight:700;color:var(--g4);padding:4px 0;border-bottom:1px solid #2a2a40;margin-bottom:6px;display:flex;justify-content:space-between}
.game-header .gh-avg{color:#f39c12;font-size:.7rem}
.hist-item{background:var(--card2);border-radius:8px;padding:8px 12px;margin-bottom:6px;cursor:pointer;transition:all .15s;font-size:.75rem;border:1px solid transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.hist-item:hover{background:#2a2a45;border-color:#3a3a55;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.hist-item .hi-search{font-family:'Space Mono',monospace;font-weight:700;font-size:.9rem;color:#7e9cd8}
.hist-item .hi-format{color:var(--muted);font-size:.65rem;margin-top:2px}
.hist-item .hi-date{color:#444;font-size:.6rem;margin-top:1px}
.hp-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer}

/* ── FREE/GPL TAGLINE GLOW ── */
.free-glow{
  font-size:.74rem;font-weight:600;line-height:1.55;text-align:center;max-width:420px;margin-top:10px;letter-spacing:.01em;
  background:linear-gradient(90deg,#ff3b3b,#ff9f1c,#ffd93d,#2ecc71,#1fc7ff,#a855f7,#ff3bd0,#ff3b3b);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:freeGlowFlow 7s linear infinite,freeGlowPulse 2.6s ease-in-out infinite;
}
.free-glow b{font-weight:900;letter-spacing:.015em}
.free-glow a{color:inherit;-webkit-text-fill-color:transparent;background:inherit;-webkit-background-clip:text;background-clip:text;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;font-weight:800}
@keyframes freeGlowFlow{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes freeGlowPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,59,59,.45)) drop-shadow(0 0 14px rgba(255,217,61,.3)) drop-shadow(0 0 22px rgba(46,204,113,.18))}
  50%{filter:drop-shadow(0 0 12px rgba(46,204,113,.55)) drop-shadow(0 0 22px rgba(31,199,255,.4)) drop-shadow(0 0 34px rgba(168,85,247,.3))}
}

/* ── SONDER MODAL ── */
.sonder-modal{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(20,15,32,.94) 0%,rgba(0,0,0,.96) 100%);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .35s;padding:20px}
.sonder-modal.show{opacity:1;pointer-events:auto}
.sonder-card{max-width:640px;width:100%;background:linear-gradient(180deg,#1a1825,#0f0d18);border:1px solid #2e2a44;border-radius:14px;padding:38px 36px 30px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04),0 0 60px rgba(155,89,182,.08);
  font-family:'Inter',system-ui,sans-serif;color:#cfd0d8}
.sonder-close{position:absolute;top:10px;right:14px;background:none;border:none;color:#666;font-size:1.4rem;cursor:pointer;padding:4px 8px;line-height:1;transition:color .15s}
.sonder-close:hover{color:#ddd}
.sonder-word{font-size:clamp(2rem,5.5vw,3rem);font-weight:300;letter-spacing:.04em;color:#fff;
  background:linear-gradient(90deg,#ff6b9d,#ffd27d,#a8e6cf,#7ec8e3,#c39bd3,#ff6b9d);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:freeGlowFlow 12s linear infinite;margin-bottom:2px}
.sonder-pos{font-size:.85rem;color:#888;margin-bottom:18px;font-style:italic}
.sonder-def{font-size:.92rem;line-height:1.7;color:#d8d8e0;margin-bottom:14px;font-weight:300;letter-spacing:.005em}
.sonder-cite{font-size:.78rem;color:#888;text-align:right;margin-bottom:24px;letter-spacing:.01em}
.sonder-kvn{font-size:.78rem;color:#aab;line-height:1.6;padding-top:18px;border-top:1px solid #2a2840;font-style:normal}
.sonder-kvn em{color:#e6d5b8}

/* ── KVN VIDEOS GALLERY ── */
.kvn-videos-panel{position:fixed;top:220px;right:0;bottom:0;width:380px;background:linear-gradient(180deg,var(--card),#111120);border-left:1px solid #2a2a40;z-index:450;
  transform:translateX(100%);transition:transform .35s ease;box-shadow:-4px 0 30px rgba(0,0,0,.5),-1px 0 0 rgba(255,255,255,.03);overflow-y:auto;padding:14px}
.kvn-videos-panel.open{transform:translateX(0)}
.kvp-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer}
.kvp-card{position:relative;display:flex;gap:10px;background:var(--card2);border:1px solid #2a2a40;border-radius:8px;padding:8px;margin-bottom:8px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;text-decoration:none;color:inherit}
.kvp-card:hover{transform:translateY(-1px);border-color:#3a3a55;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.kvp-card.is-new{border-color:#e74c3c;box-shadow:0 0 0 1px #e74c3c,0 0 22px rgba(231,76,60,.35),0 4px 14px rgba(0,0,0,.4);animation:kvpNewPulse 2.4s ease-in-out infinite}
.kvp-thumb{width:120px;height:68px;border-radius:5px;object-fit:cover;background:#000;flex-shrink:0}
.kvp-title{font-size:.74rem;font-weight:700;color:#ddd;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kvp-meta{font-size:.6rem;color:#666;margin-top:auto;display:flex;align-items:center;gap:6px}
.kvp-card .kvp-info{display:flex;flex-direction:column;flex:1;min-width:0;padding:2px 0}
.kvp-new-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-size:.55rem;font-weight:900;letter-spacing:.06em;padding:3px 8px;border-radius:10px;box-shadow:0 2px 8px rgba(231,76,60,.5),0 0 0 2px var(--card2);text-transform:uppercase;z-index:2}
@keyframes kvpNewPulse{0%,100%{box-shadow:0 0 0 1px #e74c3c,0 0 22px rgba(231,76,60,.35),0 4px 14px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 1px #ff6b5b,0 0 32px rgba(231,76,60,.6),0 4px 18px rgba(231,76,60,.3)}}
.hist-empty{color:var(--muted);font-size:.82rem;text-align:center;margin-top:36px}

/* ── BINGO WIN ── */
.bingo-win{position:fixed;inset:0;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(30,10,10,.94) 0%,rgba(0,0,0,.94) 100%);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .4s;
  box-shadow:inset 0 0 200px rgba(231,76,60,.06)}
.bingo-win.show{opacity:1;pointer-events:auto}
.bingo-win h1{font-size:clamp(3rem,10vw,5.5rem);font-weight:900;animation:rainbowPulse 1.2s ease infinite;
  filter:drop-shadow(0 0 30px currentColor);text-shadow:0 0 60px currentColor}
.bingo-win .easter-msg{font-size:1.1rem;color:#ccc;margin-top:14px;text-align:center;max-width:480px;animation:fadeUp .8s .3s ease both;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.bingo-win .dismiss{margin-top:26px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 28px;border-radius:8px;font-weight:700;cursor:pointer;animation:fadeUp .8s .5s ease both;
  box-shadow:0 4px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);transition:background .2s,box-shadow .2s}
.bingo-win .dismiss:hover{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.1));box-shadow:0 6px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}

/* ── LOSE-A-SPACE OVERLAY ── */
.lose-space{position:fixed;inset:0;z-index:610;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(50,8,8,.95) 0%,rgba(0,0,0,.96) 100%);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .35s}
.lose-space.show{opacity:1;pointer-events:auto}
.lose-space .ls-skull{font-size:clamp(3rem,9vw,5rem);filter:drop-shadow(0 0 40px #e74c3c);animation:lsShake .5s ease infinite}
.lose-space .ls-title{font-size:clamp(1.6rem,5.5vw,3rem);font-weight:900;letter-spacing:.06em;color:#ff5252;text-shadow:0 0 30px #b71c1c,0 0 60px #4a0000;margin-top:8px}
.lose-space .ls-sub{font-size:1.05rem;color:#e8c4c4;margin-top:18px;text-align:center;max-width:520px;min-height:1.4em}
.lose-space .ls-roll{font-size:clamp(2.5rem,7vw,4.2rem);font-weight:900;color:#fff;margin-top:14px;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,82,82,.6);min-height:1.1em}
.lose-space .ls-target{font-size:1rem;color:#ffb3b3;margin-top:10px;text-align:center;min-height:1.4em}
.lose-space .ls-dismiss{margin-top:26px;background:linear-gradient(135deg,#7a1f1f,#3d0d0d);border:1px solid rgba(255,82,82,.4);color:#fff;padding:10px 28px;border-radius:8px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;transition:opacity .3s,background .2s}
.lose-space .ls-dismiss.show{opacity:1}
.lose-space .ls-dismiss:hover{background:linear-gradient(135deg,#a02a2a,#5a1414)}
@keyframes lsShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-3deg)}75%{transform:translateX(4px) rotate(3deg)}}
@keyframes losePoof{0%{transform:scale(1);opacity:1}40%{transform:scale(1.25);filter:hue-rotate(-30deg) brightness(1.4)}100%{transform:scale(.6) rotate(8deg);opacity:0}}
.bingo-cell.losing{animation:losePoof .55s ease forwards;position:relative;z-index:5}

/* ── SUMMARY ── */
#summary-screen{background:radial-gradient(ellipse at 50% 0%,var(--screen-inner) 0%,var(--bg) 60%);overflow-y:auto;padding-bottom:80px;justify-content:flex-start}
.summary-wrap{max-width:620px;width:92vw;padding:24px 10px 60px}
.summary-title{font-size:1.3rem;font-weight:900;text-align:center;margin-bottom:14px;
  background:linear-gradient(135deg,#fff 0%,#e8d5ff 40%,#aaa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.summary-card{background:linear-gradient(145deg,var(--card),#0d0d1a);border:1px solid #2a2a40;border-radius:10px;padding:12px 14px;margin-bottom:10px;display:flex;gap:12px;animation:fadeUp .4s ease both;overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .25s,box-shadow .25s,transform .2s}
.summary-card:hover{border-color:#3a3a60;box-shadow:0 6px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);transform:translateY(-1px)}
.sc-thumb{width:120px;height:68px;border-radius:6px;object-fit:cover;background:#111;flex-shrink:0}
.sc-num{font-size:1.4rem;font-weight:900;color:var(--accent);min-width:28px;text-align:center;flex-shrink:0}
.sc-body{flex:1;min-width:0}
.sc-search{font-family:'Space Mono',monospace;font-weight:700;color:#7e9cd8;font-size:.88rem}
.sc-vid-title{font-size:.72rem;color:#ccc;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-vid-views{font-size:.65rem;color:var(--muted);margin-top:1px}
.sc-link{font-size:.65rem;color:var(--muted);word-break:break-all}.sc-link a{color:#5b7fc7;text-decoration:none}
.sc-stars{color:#f39c12;font-size:.9rem;letter-spacing:1px;margin-top:2px}
.sc-nolink{font-size:.65rem;color:#444;font-style:italic}
.summary-avg{text-align:center;font-size:1rem;margin-top:14px;color:#888;
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:10px 20px;box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03)}
.summary-avg span{color:#f39c12;font-weight:700;font-size:1.3rem;text-shadow:0 0 16px rgba(243,156,18,.35)}
.summary-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;padding-bottom:30px}

/* ── CONFETTI / TOAST ── */
.confetti-container{position:fixed;inset:0;z-index:590;pointer-events:none;overflow:hidden}
.confetti{position:absolute;width:10px;height:10px;opacity:.9;border-radius:2px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px) scale(.95);color:#fff;padding:9px 22px;border-radius:8px;font-weight:700;font-size:.82rem;
  opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:700;
  border:1px solid rgba(255,255,255,.08)}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.toast.ok{background:linear-gradient(135deg,#2ecc71,#27ae60);box-shadow:0 4px 16px rgba(46,204,113,.3)}
.toast.err{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 4px 16px rgba(231,76,60,.3)}
.toast.warn{background:linear-gradient(135deg,#f39c12,#e67e22);box-shadow:0 4px 16px rgba(243,156,18,.3)}

/* ── ERROR LOG ── */
.err-badge{position:fixed;bottom:70px;right:16px;z-index:710;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-size:.75rem;font-weight:900;display:none;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 3px 12px rgba(192,57,43,.5),0 0 20px rgba(231,76,60,.2);border:2px solid rgba(255,100,80,.4);
  transition:transform .15s,box-shadow .2s}
.err-badge:hover{transform:scale(1.12);box-shadow:0 4px 18px rgba(192,57,43,.6),0 0 30px rgba(231,76,60,.3)}
.err-badge.has{display:flex}
.err-panel{position:fixed;bottom:115px;right:16px;width:360px;max-height:300px;overflow-y:auto;
  background:linear-gradient(145deg,#180808,#100606);border:1px solid rgba(231,76,60,.35);
  border-radius:10px;z-index:710;padding:12px;font-size:.7rem;display:none;
  box-shadow:0 8px 30px rgba(0,0,0,.7),0 0 20px rgba(192,57,43,.12),inset 0 1px 0 rgba(255,100,80,.06)}
.err-panel.open{display:block}
.err-panel h4{color:#e74c3c;margin-bottom:6px;font-size:.8rem}
.err-panel .err-line{color:#ccc;padding:3px 0;border-bottom:1px solid #222;font-family:'Space Mono',monospace;font-size:.65rem;word-break:break-all}
.err-panel .err-line.warn{color:#f39c12}.err-panel .err-line.error{color:#e74c3c}
.err-clear{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);color:#bbb;padding:3px 10px;border-radius:4px;font-size:.65rem;cursor:pointer;margin-top:6px;transition:background .15s,color .15s}
.err-clear:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── SEARCH RESULTS PANEL ── */
.search-results{position:fixed;top:220px;left:0;right:0;bottom:0;z-index:450;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);
  display:none;flex-direction:column;align-items:center;overflow-y:auto;padding:16px 10px 80px}
.search-results.open{display:flex}
.sr-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;width:100%;max-width:700px}
.sr-header h3{font-size:.95rem;flex:1;color:#ccc}
.sr-close{background:none;border:none;color:#888;font-size:1.3rem;cursor:pointer}.sr-close:hover{color:#fff}
.sr-list{width:100%;max-width:700px;display:flex;flex-direction:column;gap:8px}
.sr-card{background:var(--card);border:1px solid #2a2a40;border-radius:10px;padding:10px;display:flex;gap:10px;cursor:pointer;transition:all .2s;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.2)}
.sr-card:hover{border-color:#3a3a55;background:#1e1e35;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.sr-card.clicked{border-left:3px solid var(--accent)}
.sr-card.rated{border-left:3px solid #4caf50}
.sr-thumb{width:168px;height:94px;border-radius:6px;object-fit:cover;background:#111;flex-shrink:0}
.sr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sr-title{font-size:.8rem;font-weight:700;color:#eee;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-channel{font-size:.65rem;color:var(--muted)}
.sr-views{font-size:.6rem;color:#555}
.sr-actions{display:flex;gap:6px;align-items:center;margin-top:auto;flex-wrap:wrap}
.sr-actions .vt-btn{font-size:.6rem;padding:3px 8px}
.sr-rate{display:flex;gap:2px}
.sr-rate .vt-star{font-size:1rem}
.sr-badge{position:absolute;top:6px;right:8px;font-size:.55rem;padding:1px 6px;border-radius:4px;font-weight:700}
.sr-badge.viewed{background:rgba(231,76,60,.2);color:#e74c3c}
.sr-badge.saved{background:rgba(76,175,80,.2);color:#4caf50}
.sr-loading{color:var(--muted);font-size:.85rem;padding:30px;text-align:center}
.sr-empty{color:#555;font-size:.8rem;padding:30px;text-align:center}
.sr-bummer{text-align:center;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1px solid #2a2a40;border-radius:10px}
.sr-bummer-nine{font-size:3rem;font-weight:900;letter-spacing:-.03em;color:#e74c3c;line-height:1;font-variant-numeric:tabular-nums}
.sr-bummer-none{font-size:.65rem;color:#333;letter-spacing:.1em;text-transform:uppercase;margin-top:-4px}
.sr-bummer-sub{font-size:.68rem;color:#444;max-width:260px;line-height:1.5}
/* inline result cards (top 5, embedded in result screen) */
#srInline{width:100%;max-height:min(calc(100vh - 440px),560px);overflow-y:auto;overflow-x:hidden;transition:max-height .35s ease}
@media(min-width:1100px){#srInline{max-height:min(calc(100vh - 360px),900px)}}
.sr-inline-header{font-size:.65rem;font-weight:900;letter-spacing:.1em;color:#555;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sr-inline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.sr-inline-card{border:1.5px solid #2a2a40;border-radius:12px;padding:0;display:flex;flex-direction:column;margin-bottom:0;position:relative;transition:filter .2s,box-shadow .2s;overflow:hidden}
.sr-inline-card:hover{filter:brightness(1.1)}
.sr-inline-card.clicked{outline:2px solid var(--accent);outline-offset:-2px}
.sr-inline-thumb-wrap{position:relative;width:100%;flex-shrink:0;line-height:0}
.sr-inline-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;display:block;border-radius:0}
.sr-inline-thumb-badge{position:absolute;top:6px;left:6px;font-size:.65rem;font-weight:900;letter-spacing:.07em;padding:2px 8px;border-radius:4px;line-height:1.5;pointer-events:none;text-transform:uppercase}
.sr-inline-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:7px 9px 8px}
.sr-inline-title{font-size:.82rem;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.sr-inline-meta{font-size:.68rem;color:#888}
.sr-inline-date{font-size:.62rem;color:#6a8a9a;line-height:1.4}
.sr-inline-actions{display:flex;gap:5px;margin-top:auto;padding-top:5px}
.sr-inline-stars{display:grid;grid-template-columns:1fr 1fr;gap:1px 5px;margin-top:3px}
.sr-inline-stars .vt-star{font-size:.78rem;padding:1px 2px;min-height:auto}
.sri-score{font-size:.62rem;font-weight:800;text-align:center;margin-top:3px;letter-spacing:.03em;min-height:1em}

/* ── BINGO SETUP PANEL ── */
.bingo-setup{position:fixed;top:220px;right:0;bottom:0;width:340px;background:linear-gradient(180deg,var(--card),#111120);border-left:1px solid #2a2a40;z-index:460;
  transform:translateX(100%);transition:transform .35s ease;box-shadow:-4px 0 30px rgba(0,0,0,.5),-1px 0 0 rgba(255,255,255,.03);overflow-y:auto;padding:14px}
.bingo-setup.open{transform:translateX(0)}
.bingo-setup h3{font-size:.9rem;margin-bottom:8px;color:#aaa}
.bingo-setup h4{font-size:.78rem;margin:10px 0 4px;color:var(--g4)}
.bs-cat{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:.72rem}
.bs-cat input{flex:1;background:var(--card2);border:1px solid #3a3a55;color:#fff;padding:3px 6px;border-radius:4px;font-size:.7rem}
.bs-cat button{background:none;border:none;color:#c0392b;cursor:pointer;font-size:.9rem;padding:0 4px}
.bs-add{background:var(--card2);border:1px solid #3a3a55;color:#4caf50;padding:2px 8px;border-radius:4px;font-size:.65rem;cursor:pointer;margin-top:4px}
.bs-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer}

/* ── 7.20.0 QoL ── */
.rp-var{color:var(--accent);text-shadow:0 0 14px rgba(231,76,60,.5)}
.result-meta{margin:6px 0 0;text-align:center}
.era-chip{display:inline-block;font-size:.66rem;color:#cbd3e1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:3px 10px}
.dork-chips{display:flex;gap:6px;align-items:center;justify-content:center;margin:8px 0 2px;flex-wrap:wrap}
.dork-lbl{font-size:.6rem;color:#778}
.dork-chip{background:var(--card2);border:1px solid #2a2a45;color:#99a;padding:3px 9px;border-radius:12px;font-size:.62rem;font-weight:600;cursor:pointer}
.dork-chip.active{border-color:var(--accent);color:var(--accent);background:rgba(231,76,60,.1)}
.fp-new{background:var(--accent);color:#fff;font-size:.5rem;font-weight:800;padding:1px 5px;border-radius:3px;margin-left:6px;letter-spacing:.04em;flex:none}
.fp-era{position:relative;width:64px;height:14px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;flex:none;margin-left:auto}
.fp-era i{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#e67e22,#f1c40f);opacity:.45;border-radius:3px}
.fp-era em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.52rem;font-style:normal;color:#dde}
.fp-fav{background:none;border:none;color:#556;font-size:.85rem;cursor:pointer;padding:0 2px;flex:none;line-height:1}
.fp-fav.on{color:#f1c40f}
.wheel-legend{display:none;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px;font-size:.58rem;color:#99a}
.wheel-legend b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.kb-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);z-index:100001;backdrop-filter:blur(4px)}
.kb-overlay.open{display:flex}
.kb-modal{background:linear-gradient(160deg,#191927,#131320);border:1px solid #2a2a45;border-radius:14px;padding:22px 26px;max-width:380px;width:92vw;color:#dde}
.kb-modal h3{margin:0 0 14px;font-size:.95rem}
.kb-grid{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:.72rem;margin-bottom:16px;align-items:center}
.kb-grid kbd{background:var(--card2);border:1px solid #3a3a55;border-bottom-width:2px;border-radius:5px;padding:2px 8px;font-family:inherit;font-size:.66rem;color:#fff;text-align:center}
.bingo-prevpop{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:100002;background:linear-gradient(160deg,#1c1c30,#151522);border:1px solid var(--accent);border-radius:12px;padding:14px 18px;max-width:320px;width:88vw;text-align:center;box-shadow:0 16px 50px rgba(0,0,0,.6)}
.bingo-prevpop .bpp-t{font-weight:800;font-size:.85rem;color:#fff;margin-bottom:6px}
.bingo-prevpop .bpp-s{font-size:.62rem;color:#99a;margin-bottom:10px;line-height:1.45}
.bingo-prevpop button{background:var(--accent);border:none;color:#fff;border-radius:6px;padding:5px 14px;font-size:.66rem;font-weight:700;cursor:pointer}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001s!important;transition-duration:.05s!important}

/* ── FOOTER ── */
.credit-footer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.7) 60%,transparent);
  padding:22px 20px 10px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:90;transition:opacity .4s,transform .4s;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.03)}
.credit-footer.hidden{opacity:0;pointer-events:none;transform:translateY(20px)}
.credit-footer .cf-group{display:flex;align-items:center;gap:8px}
.credit-footer img{width:30px;height:30px;border-radius:50%;border:2px solid #5b7fc7;object-fit:cover}
.credit-footer a{color:#7e9cd8;text-decoration:none;font-weight:700;font-size:.78rem}
.credit-footer a:hover{text-decoration:underline}
.credit-footer span{color:#555;font-size:.62rem}
.credit-footer .ft-img{border-radius:50%;border-color:#4fc3f7}
.credit-footer .ft-wordmark{width:auto;height:22px;border:none;border-radius:0;object-fit:contain}
.cf-close{background:none;border:none;color:#444;font-size:.9rem;cursor:pointer;padding:2px 6px;margin-left:4px}.cf-close:hover{color:#aaa}
.cf-sep{color:#777;font-size:.7rem}
@media(max-width:600px){
  .credit-footer{padding:16px 12px 8px;gap:8px;flex-wrap:wrap}
  .credit-footer .ft-wordmark{display:none}
  .cf-sep{display:none}
  #versionBadge{display:none!important}
}

/* ── RECORDS TIMELINE MODAL ── */
.records-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.records-overlay.open{opacity:1;pointer-events:auto}
.records-modal{background:linear-gradient(145deg,#080810,#050508);border:1px solid #222;border-radius:16px;padding:28px 24px 20px;max-width:960px;width:96vw;max-height:92vh;overflow-y:auto;transform:scale(.9);transition:transform .3s;
  box-shadow:0 20px 80px rgba(0,0,0,.8),0 0 60px rgba(231,76,60,.06),0 0 0 1px rgba(255,255,255,.03) inset}
.records-overlay.open .records-modal{transform:scale(1)}
.records-modal h3{text-align:center;color:#fff;font-size:1.3rem;margin:0 0 4px;font-weight:900;letter-spacing:1px;text-shadow:0 0 20px rgba(231,76,60,.3)}
.records-modal .rec-sub{text-align:center;font-size:.72rem;color:#666;margin-bottom:16px}
.rec-timeline{position:relative;width:100%;height:min(55vh,480px);background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:inset 0 0 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.02),0 2px 8px rgba(0,0,0,.3)}
.rec-timeline canvas{width:100%;height:100%}
.rec-recent-strip{display:flex;align-items:flex-start;gap:0;margin-bottom:8px}
.rec-recent-cards{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;flex:1}
.rec-recent-card{flex:0 0 auto;padding:5px 9px;background:#09090f;border:1px solid #1a1a2a;border-radius:8px;cursor:pointer;transition:border-color .2s;text-align:center;min-width:76px}
.rec-recent-card:hover{border-color:var(--c,#888)}
.rec-card-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#07070f;border:1px solid #13132a;border-left:3px solid var(--c,#444);border-radius:7px;cursor:pointer;transition:background .15s}
.rec-card-item:hover{background:#0d0d1c}
.rec-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:12px}
.rec-form input{background:#0a0a14;border:1px solid #2a2a40;color:#fff;padding:8px 12px;border-radius:8px;font-size:.78rem;font-family:'Inter',sans-serif;transition:border-color .2s,box-shadow .2s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.rec-form input:focus{border-color:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.4),0 0 8px rgba(231,76,60,.1)}
.rec-form input::placeholder{color:#333}
.rec-form button{background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;color:#fff;padding:8px 18px;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .2s;box-shadow:0 2px 12px rgba(231,76,60,.25)}
.rec-form button:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(231,76,60,.4)}
.rec-form button:active{transform:scale(.96)}
.rec-list{max-height:180px;overflow-y:auto;margin-bottom:12px}
.rec-entry{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;font-size:.75rem;color:#ccc;background:#080810;margin-bottom:4px;border:1px solid #161625;transition:all .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.rec-entry:hover{border-color:#2a2a45;background:#0a0a16;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.rec-entry .rec-date{color:#e74c3c;font-weight:700;min-width:100px;text-shadow:0 0 8px rgba(231,76,60,.2)}
.rec-entry .rec-views{color:#2ecc71;font-weight:700;min-width:52px}
.rec-entry .rec-link{color:#5b7fc7;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.rec-entry .rec-link:hover{text-decoration:underline;color:#7e9cd8}
.rec-entry .rec-del{background:none;border:none;color:#333;cursor:pointer;font-size:.9rem;padding:0 4px;transition:color .15s}.rec-entry .rec-del:hover{color:#e74c3c}
.rec-rarity-legend{display:flex;gap:14px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.rec-rarity-legend span{font-size:.7rem;font-weight:700;display:flex;align-items:center;gap:5px;text-shadow:0 0 6px rgba(255,255,255,.05)}
.rec-rarity-legend span::before{content:'';width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor}
.rec-rarity-legend .r-gold{color:#ffd700}.rec-rarity-legend .r-gold::before{background:#ffd700;box-shadow:0 0 8px #ffd700}
.rec-rarity-legend .r-red{color:#e74c3c}.rec-rarity-legend .r-red::before{background:#e74c3c;box-shadow:0 0 8px #e74c3c}
.rec-rarity-legend .r-orange{color:#e67e22}.rec-rarity-legend .r-orange::before{background:#e67e22;box-shadow:0 0 8px #e67e22}
.rec-rarity-legend .r-green{color:#2ecc71}.rec-rarity-legend .r-green::before{background:#2ecc71;box-shadow:0 0 8px #2ecc71}
.rec-rarity-legend .r-blue{color:#3498db}.rec-rarity-legend .r-blue::before{background:#3498db;box-shadow:0 0 8px #3498db}

/* ── SETTINGS MODAL ── */
.settings-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.settings-overlay.open{opacity:1;pointer-events:auto}
.settings-modal{background:linear-gradient(145deg,var(--card),var(--surface));border:1px solid var(--border);border-radius:16px;padding:24px;max-width:500px;width:92vw;max-height:80vh;overflow-y:auto;transform:scale(.9);transition:transform .3s;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset}
.settings-overlay.open .settings-modal{transform:scale(1)}
.settings-modal h3{font-size:1rem;margin-bottom:14px;color:#ddd}
.settings-modal .s-group{margin-bottom:16px}
.settings-modal .s-label{font-size:.72rem;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.settings-modal .s-row{display:flex;gap:6px;align-items:center}
.settings-modal .s-input{flex:1;background:var(--card2);border:1px solid #3a3a55;color:#fff;padding:7px 10px;border-radius:6px;font-size:.78rem;font-family:'Inter',sans-serif;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);transition:border-color .2s,box-shadow .2s}
.settings-modal .s-input:focus{border-color:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 8px rgba(231,76,60,.1)}
.settings-modal .s-input::placeholder{color:#444}
.settings-modal .s-preview{width:48px;height:48px;border-radius:8px;object-fit:cover;background:#111;border:1px solid #3a3a55;flex-shrink:0}
.settings-modal .s-preview.round{border-radius:50%}
.settings-modal .s-file{display:none}
.settings-modal .s-btn{background:var(--card2);border:1px solid #3a3a55;color:#ccc;padding:5px 12px;border-radius:6px;font-size:.7rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.settings-modal .s-btn:hover{background:#2e2e48}
.settings-modal .s-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.settings-modal .s-divider{border:none;border-top:1px solid var(--border);margin:16px 0;box-shadow:0 1px 0 rgba(255,255,255,.02)}
.settings-modal .s-note{font-size:.65rem;color:#555;margin-top:4px}
/* ── App theme picker (swatch grid) ─────────────────────────────────────── */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
.ts{border:2px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 4px 7px;cursor:pointer;transition:border-color .18s,transform .12s,box-shadow .18s;text-align:center}
.ts:hover{border-color:rgba(255,255,255,.3);transform:scale(1.05)}
.ts.active{border-color:#fff!important;box-shadow:0 0 10px rgba(255,255,255,.25),0 4px 14px rgba(0,0,0,.6)}
.ts-name{font-size:.5rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8);margin-bottom:6px;line-height:1.3}
.ts-bar{height:3px;border-radius:2px;width:74%;margin:0 auto;opacity:.88}
/* ── Format category filter pills ───────────────────────────────────────── */
.fp-cats{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.fp-cat{background:var(--card2);border:1px solid #2a2a45;color:#888;padding:3px 9px;border-radius:12px;font-size:.63rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.fp-cat:hover{border-color:#555;color:#ccc}
.fp-cat.active{border-color:var(--accent);color:var(--accent);background:rgba(231,76,60,.08)}
/* ── Power Search overlay ───────────────────────────────────────────────── */
.ps-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(5px);z-index:600;align-items:center;justify-content:center}
.ps-overlay.open{display:flex}
.ps-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;width:min(780px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.ps-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;background:var(--surface)}
.ps-controls{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ps-query{font-size:.68rem;color:#444;font-family:'Space Mono',monospace;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-results-wrap{overflow-y:auto;flex:1;padding:10px 16px}
.ps-result{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #111122;position:relative;overflow:hidden;border-radius:4px;transition:border-color .3s}
.ps-result:last-child{border-bottom:none}
/* ── Zero-view fanfare ── gold shimmer sweep + pulsing glow */
@keyframes psZeroGlow{0%{box-shadow:0 0 0 0 rgba(255,215,0,0)}20%{box-shadow:0 0 0 6px rgba(255,215,0,.28),0 0 30px rgba(255,215,0,.15)}60%{box-shadow:0 0 0 3px rgba(255,215,0,.18),0 0 18px rgba(255,215,0,.08)}100%{box-shadow:0 0 0 1px rgba(255,215,0,.12),0 0 10px rgba(255,215,0,.06)}}
@keyframes psZeroSweep{0%{transform:translateX(-130%)}100%{transform:translateX(200%)}}
@keyframes psZeroBadge{0%{transform:scale(0) translateY(4px);opacity:0}60%{transform:scale(1.15) translateY(-2px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
.ps-result.ps-zero{border-color:rgba(255,215,0,.3)!important;background:linear-gradient(135deg,rgba(18,14,0,.85),rgba(5,4,0,.9));animation:psZeroGlow 2s ease var(--psd,0s) both}
.ps-result.ps-zero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,215,0,.18),transparent);width:50%;animation:psZeroSweep 1s cubic-bezier(.4,0,.6,1) var(--psd,0s) both;pointer-events:none}
.ps-result.ps-zero .ps-zero-badge{animation:psZeroBadge .5s cubic-bezier(.17,.67,.35,1.3) calc(var(--psd,0s) + .3s) both}
/* ── Ancient-year fanfare ── sepia flash warms to amber, scrolls in */
@keyframes psAncientWarm{0%{box-shadow:0 0 0 0 rgba(150,100,20,0)}25%{box-shadow:0 0 0 5px rgba(150,100,20,.35),0 0 25px rgba(150,100,20,.18)}65%{box-shadow:0 0 0 2px rgba(150,100,20,.2),0 0 14px rgba(150,100,20,.1)}100%{box-shadow:0 0 0 1px rgba(150,100,20,.1),0 0 8px rgba(150,100,20,.05)}}
@keyframes psAncientThumb{0%{filter:sepia(.95) contrast(1.1) brightness(.8) saturate(.5)}40%{filter:sepia(.5) brightness(.9)}100%{filter:sepia(0) brightness(1)}}
@keyframes psAncientBadge{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
.ps-result.ps-ancient{border-color:rgba(150,100,20,.28)!important;background:linear-gradient(135deg,rgba(10,7,0,.88),rgba(5,3,0,.92));animation:psAncientWarm 2.8s ease var(--psd,0s) both}
.ps-result.ps-ancient .ps-thumb img{animation:psAncientThumb 2.8s ease var(--psd,0s) both}
.ps-result.ps-ancient .ps-ancient-badge{animation:psAncientBadge .4s ease calc(var(--psd,0s) + .25s) both;opacity:0}
/* shared badge styles */
.ps-zero-badge,.ps-ancient-badge{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:700;border-radius:3px;padding:1px 5px;margin-top:3px;letter-spacing:.3px}
.ps-zero-badge{color:#ffd700;border:1px solid rgba(255,215,0,.4);background:rgba(255,215,0,.06)}
.ps-ancient-badge{color:#c8950a;border:1px solid rgba(200,149,10,.4);background:rgba(200,149,10,.06)}
.ps-thumb{width:120px;flex-shrink:0;border-radius:5px;overflow:hidden;position:relative;align-self:flex-start}
.ps-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ps-dur{position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.85);color:#fff;font-size:.58rem;padding:1px 4px;border-radius:2px;font-family:'Space Mono',monospace}
.ps-meta{flex:1;min-width:0}
.ps-title{font-size:.8rem;font-weight:700;color:#7e9cd8;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none;display:block}
.ps-title:hover{color:#a0b4e8}
.ps-channel{font-size:.66rem;color:#555;margin-top:1px}
.ps-views{font-size:.7rem;font-weight:700;margin-top:3px}
.ps-date{font-size:.63rem;color:#444;margin-top:2px}
.ps-desc{font-size:.63rem;color:#444;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ps-empty{text-align:center;color:#444;font-size:.8rem;padding:40px 20px}
.ps-error{color:#e74c3c;font-size:.73rem;padding:12px;background:#1a0808;border:1px solid #3a1a1a;border-radius:6px;margin:10px}
.ps-loading{text-align:center;color:#444;padding:36px;font-size:.78rem}

/* ── ANIMATIONS ── */
@keyframes floatIn{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popBounce{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
@keyframes daubPop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rainbowPulse{0%,100%{color:#e74c3c}25%{color:#f39c12}50%{color:#2ecc71}75%{color:#3498db}}
@keyframes cellReveal{0%{transform:scale(0) rotateY(90deg);opacity:0}60%{transform:scale(1.05) rotateY(-3deg)}100%{transform:scale(1) rotateY(0);opacity:1}}
@keyframes screenShake{0%,100%{transform:translate(0)}10%{transform:translate(-6px,3px)}20%{transform:translate(5px,-5px)}30%{transform:translate(-3px,6px)}40%{transform:translate(6px,-2px)}50%{transform:translate(-5px,5px)}}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0) translateX(0);opacity:1}25%{transform:translateY(28vh) rotate(180deg) translateX(30px)}50%{transform:translateY(55vh) rotate(360deg) translateX(-20px)}75%{transform:translateY(82vh) rotate(540deg) translateX(15px);opacity:.7}100%{transform:translateY(110vh) rotate(720deg) translateX(-10px);opacity:0}}
@keyframes updateBlink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes creditPulse{0%,100%{transform:scale(1);box-shadow:none}50%{transform:scale(1.05);box-shadow:0 0 12px currentColor}}
@keyframes bingoWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes freeShimmer{
  0%{background:#fff9c4;color:#e74c3c;border-color:#f0c040}
  16%{background:#ffe0b2;color:#e65100;border-color:#ffab40}
  33%{background:#c8e6c9;color:#2e7d32;border-color:#66bb6a}
  50%{background:#bbdefb;color:#1565c0;border-color:#42a5f5}
  66%{background:#d1c4e9;color:#6a1b9a;border-color:#ab47bc}
  83%{background:#f8bbd0;color:#c2185b;border-color:#ec407a}
  100%{background:#fff9c4;color:#e74c3c;border-color:#f0c040}
}
/* free-shimmer applied via inline style combined with bingoWave */

/* ── CUSTOM SCROLLBARS (webkit) ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}
::-webkit-scrollbar-corner{background:transparent}

/* ── SELECTION COLORS ── */
::selection{background:rgba(231,76,60,.3);color:#fff}
::-moz-selection{background:rgba(231,76,60,.3);color:#fff}
body.deep-dive ::selection{background:rgba(0,188,212,.3);color:#fff}
body.deep-dive ::-moz-selection{background:rgba(0,188,212,.3);color:#fff}


/* ── FOUND IT overlay ── */
#foundOv{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.93);backdrop-filter:blur(6px);align-items:center;justify-content:center;flex-direction:column}
#foundOv.open{display:flex}
.found-card{position:relative;text-align:center;padding:32px 28px;max-width:380px;width:90vw}
.found-thumb-wrap{border-radius:10px;overflow:hidden;margin:0 auto 20px;width:240px;box-shadow:0 0 40px var(--f-color,#ffd700)}
.found-thumb-wrap img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(1);transition:filter .6s .3s}
#foundOv.open .found-thumb-wrap img{filter:grayscale(0)}
.found-rarity{font-size:1.55rem;font-weight:900;letter-spacing:.08em;animation:foundSlam .45s cubic-bezier(.17,.67,.24,1.6) .6s both}
.found-title{font-size:.82rem;color:#ccc;margin-top:8px;max-width:320px;margin-left:auto;margin-right:auto;animation:foundUp .4s ease .85s both}
.found-sub{font-size:.68rem;margin-top:4px;animation:foundUp .4s ease .95s both}
.found-overall{font-size:.78rem;margin-top:8px;letter-spacing:.03em;animation:foundUp .4s ease 1.0s both;display:none}
.found-overall .ov-stars{font-size:1rem;margin-right:4px}
.found-overall .ov-score{color:#888;font-size:.7rem}
.found-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;animation:foundUp .4s ease 1.1s both}
@keyframes foundSlam{0%{transform:scale(3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes foundUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
.found-particle{position:fixed;pointer-events:none;border-radius:2px;animation:confettiFall 2.5s ease forwards}


/* ── Leaderboard hero ── */
#lbHero{display:none;margin:0 0 12px;border-radius:10px;overflow:hidden;position:relative;background:#040408;border:1px solid #1a1a2a}
#lbHero.show{display:block}
.lb-hero-thumb{width:100%;height:110px;object-fit:cover;display:block;opacity:.45}
.lb-hero-over{position:absolute;inset:0;padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(0,0,0,.96) 10%,transparent 60%)}
.lb-crown{position:absolute;top:8px;right:10px;font-size:1.3rem;line-height:1;filter:drop-shadow(0 0 8px gold)}
.lb-hero-rarity{font-size:.58rem;font-weight:900;letter-spacing:.1em;padding:2px 8px;border-radius:8px;border:1px solid;display:inline-block;margin-bottom:4px}
.lb-hero-date{font-size:1.05rem;font-weight:900;margin-bottom:1px}
.lb-hero-title{font-size:.68rem;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.lb-hero-meta{font-size:.64rem;color:#777}
.lb-hero-finder{font-weight:900;color:#fff}
</style>

<script type="application/ld+json" nonce="173fdfc5a324414af2735481bb5efc38">
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://falcontechnix.com/#org","name":"FalconTechnix","url":"https://falcontechnix.com","logo":"/img/favicon-32.png","founder":{"@type":"Person","name":"Justin Earl","alternateName":"@Chegnus"}},{"@type":"Person","@id":"https://falcontechnix.com/KVN_AUST/#kvn-aust","name":"KVN AUST","alternateName":["KVNAUST","KVN_AUST","Ming Kaster MK","MingKasterMK"],"description":"YouTuber behind the YouTube Recycle Bin series — a comedy investigation series about zero-view YouTube videos discovered through default camera and phone filename patterns.","url":"https://www.youtube.com/@KVNAUST","sameAs":["https://www.youtube.com/@KVNAUST","https://x.com/MingKasterMK","https://twitter.com/MingKasterMK"]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"FalconTechnix","item":"https://falcontechnix.com/"},{"@type":"ListItem","position":2,"name":"KVN AUST Game Tool — YouTube\u0027s Recycle Bin","item":"https://falcontechnix.com/KVN_AUST/"}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is the KVN AUST game tool?","acceptedAnswer":{"@type":"Answer","text":"The KVN AUST game tool is an interactive fan-made web app for YouTube\u0027s Recycle Bin series. Spin the format wheel to get a random default filename pattern (like IMG_1234, DSC_0001, or VID_20230101), generate YouTube search strings, track your finds, and play KVN AUST Recycle Bin Bingo. Play free at https://falcontechnix.com/KVN_AUST/"}},{"@type":"Question","name":"What is YouTube\u0027s Recycle Bin?","acceptedAnswer":{"@type":"Answer","text":"YouTube\u0027s Recycle Bin is a YouTube series by KVN AUST (MingKasterMK) that hunts down zero-view and near-zero-view videos by searching for default camera/phone filenames that uploaders never renamed."}},{"@type":"Question","name":"How do I find zero-view YouTube videos?","acceptedAnswer":{"@type":"Answer","text":"Use the KVN AUST game tool to spin the format wheel, get a default filename pattern like IMG_1234, DSC_0001, VID_20230101, or MVI_5678, then search YouTube for that exact string. Because most uploaders never rename their camera or phone output, the raw defaults expose videos nobody has ever watched."}},{"@type":"Question","name":"Who is KVN AUST?","acceptedAnswer":{"@type":"Answer","text":"KVN AUST (also known as KVNAUST, KVN_AUST, or @MingKasterMK on X/Twitter) is the YouTuber who created the YouTube Recycle Bin series. His channel is youtube.com/@KVNAUST."}},{"@type":"Question","name":"Is this KVN AUST game tool free?","acceptedAnswer":{"@type":"Answer","text":"Yes — the KVN AUST game tool is 100% free to play. No signup required to play as a guest; optional cloud save lets you sync games and bingo cards across devices."}},{"@type":"Question","name":"What is KVN AUST Bingo?","acceptedAnswer":{"@type":"Answer","text":"KVN AUST Bingo (Recycle Bin Bingo) is a 5x5 bingo card built into the game tool. Categories are filled with common finds from the KVN AUST Recycle Bin series — mark off squares as you discover matching videos and complete lines."}},{"@type":"Question","name":"What is the KVN AUST format map?","acceptedAnswer":{"@type":"Answer","text":"The format map is the full catalog of default filename patterns KVN AUST has used to find zero-view videos, organized by era (classic cameras, smartphones, camcorders) with detailed descriptions of each format lead."}},{"@type":"Question","name":"How do you pronounce KVN AUST?","acceptedAnswer":{"@type":"Answer","text":"KVN AUST is pronounced \u0027Kevin Aust\u0027. KVN stands for Kevin, and AUST is his surname. Alternate written forms include KVNAUST and KVN_AUST."}},{"@type":"Question","name":"Where can I watch the YouTube Recycle Bin series?","acceptedAnswer":{"@type":"Answer","text":"KVN AUST uploads the YouTube Recycle Bin series on his channel at youtube.com/@KVNAUST. Use the KVN AUST game tool at falcontechnix.com/KVN_AUST/ to join the hunt yourself."}},{"@type":"Question","name":"Is the KVN AUST game tool official?","acceptedAnswer":{"@type":"Answer","text":"The game tool is a fan-made companion to the KVN AUST YouTube Recycle Bin series, built by Justin Earl (@Chegnus) at FalconTechnix. It credits KVN AUST (MingKasterMK) as the source and creator of the series."}}]}]}
</script>
<script nonce="173fdfc5a324414af2735481bb5efc38">
/**
 * KVN Shield v3 — client-side protection for KVN_AUST
 * Mirrors the FalconTechnix shield UX (separate karaoke + fake view-source),
 * KVN-themed (red/gold on dark), fed by the Greasy Strangler decoy script
 * instead of the Bee Movie.
 *
 * What it does:
 *  - Domain lock: bail if served from an unexpected origin
 *  - Anti-iframe: refuse to run inside a frame we don't own
 *  - F12 / Ctrl+Shift+I/J/C → full-screen Greasy Strangler KARAOKE overlay
 *  - Ctrl+U            → fake view-source modal with the highlighted decoy
 *  - Silent right-click: no menu, no noise, no feedback
 *  - DevTools-open detection: poisoned-console warning banner once per session
 *  - MutationObserver: block any injected <script src> from an origin we
 *    didn't whitelist
 */
(function () {
    'use strict';

    // ─── Domain lock ────────────────────────────────────────────────────
    var ALLOWED = ['falcontechnix.com', 'www.falcontechnix.com', 'localhost', '127.0.0.1'];
    var host = (location.hostname || '').toLowerCase();
    if (!host || (ALLOWED.indexOf(host) === -1 && host.indexOf('falcontechnix.com') === -1)) {
        document.documentElement.innerHTML = '';
        try { location.replace('about:blank'); } catch (e) {}
        return;
    }

    // ─── Anti-iframe ────────────────────────────────────────────────────
    if (window.self !== window.top) {
        try { window.top.location = window.self.location; } catch (e) {
            document.documentElement.innerHTML = '';
            return;
        }
    }

    // ─── Decoy loader (Greasy Strangler script) ────────────────────────
    var decoyLoaded = false;
    function ensureDecoyLoaded(cb) {
        if (decoyLoaded || window.greasyStranglerScript) { decoyLoaded = true; cb(); return; }
        var s = document.createElement('script');
        s.src = '/greasy-strangler-script.js';
        s.async = true;
        s.onload = function () { decoyLoaded = true; cb(); };
        s.onerror = function () {
            // Fallback: try the legacy /KVN_AUST/ path in case of an older deploy
            var s2 = document.createElement('script');
            s2.src = '/KVN_AUST/greasy-strangler-script.js';
            s2.async = true;
            s2.onload = function () { decoyLoaded = true; cb(); };
            s2.onerror = function () {
                window.greasyStranglerScript = 'GREASY STRANGLER SCRIPT\n\n[content not deployed]';
                decoyLoaded = true; cb();
            };
            document.head.appendChild(s2);
        };
        document.head.appendChild(s);
    }

    // ─── Shared styles ─────────────────────────────────────────────────
    function ensureStyles() {
        if (document.getElementById('__kvn_shield_style')) return;
        var st = document.createElement('style');
        st.id = '__kvn_shield_style';
        st.textContent = [
            '@keyframes __kvn_fade_in{from{opacity:0}to{opacity:1}}',
            '@keyframes __kvn_pop_in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}',
            '@keyframes __kvn_drop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.25)}}',
            // view-source line numbers (CSS counter, like the falcon modal)
            '#__kvn_vs .__kvn_vs_code{counter-reset:line}',
            '#__kvn_vs .__kvn_vs_ln::before{content:counter(line);counter-increment:line;',
            '  display:inline-block;width:4em;padding-right:1em;text-align:right;color:#5c6370}',
            '#__kvn_vs .__kvn_vs_fade{color:#ff6b6b}',
            '#__kvn_vs .__kvn_vs_hot{color:#ffd700;font-weight:700}'
        ].join('');
        document.head.appendChild(st);
    }

    function escapeHtml(s) {
        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    // ─── Fake view-source modal (Ctrl+U) ───────────────────────────────
    function showViewSource() {
        if (document.getElementById('__kvn_vs')) return;
        ensureStyles();
        ensureDecoyLoaded(function () {
            var raw = (window.greasyStranglerScript || '').replace(/\r/g, '');
            var html = escapeHtml(raw)
                .replace(/\b(a|of|is|in|to|be|and|that|have|it|the|you|I|on|no|not|but|so)\b/g,
                    '<span class="__kvn_vs_fade">$1</span>')
                .replace(/\b(grease|greasy|greased|strangler|bullshit|ronnie|brayden|janet|paul|jody)\b/gi,
                    '<span class="__kvn_vs_hot">$1</span>')
                .replace(/(\n)/g, '$1<span class="__kvn_vs_ln"></span>');

            var wrap = document.createElement('div');
            wrap.id = '__kvn_vs';
            wrap.style.cssText = 'position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,.7);' +
                'backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;' +
                'padding:16px;animation:__kvn_fade_in .25s ease-out;';

            var win = document.createElement('div');
            win.style.cssText = 'width:100%;max-width:960px;height:85vh;display:flex;flex-direction:column;' +
                'background:#161625;border:1px solid #3a3a55;border-radius:14px;overflow:hidden;' +
                'box-shadow:0 24px 80px rgba(0,0,0,.7);animation:__kvn_pop_in .25s ease-out;';

            var hdr = document.createElement('header');
            hdr.style.cssText = 'flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;' +
                'gap:12px;padding:10px 14px;background:#1e1e32;border-bottom:1px solid #3a3a55;';
            hdr.innerHTML = '<span style="color:#7e9cd8;font:12px Consolas,\'Courier New\',monospace">' +
                'view-source:https://' + location.host + location.pathname + '</span>' +
                '<button id="__kvn_vs_close" aria-label="Close" style="background:#2a2a40;border:1px solid #3a3a55;' +
                'color:#eee;padding:3px 11px;cursor:pointer;border-radius:5px;font:13px sans-serif">✕ close</button>';

            var body = document.createElement('div');
            body.className = '__kvn_vs_code';
            body.style.cssText = 'flex:1 1 auto;overflow:auto;margin:0;padding:14px 18px;' +
                'font:13px/1.7 Consolas,"Courier New",monospace;color:#c8c8d8;' +
                'white-space:pre-wrap;word-break:break-word;';
            body.innerHTML = '<pre style="margin:0"><code>' + html + '</code></pre>';

            win.appendChild(hdr);
            win.appendChild(body);
            wrap.appendChild(win);
            document.body.appendChild(wrap);

            function close() { wrap.remove(); }
            wrap.addEventListener('click', function (e) { if (e.target === wrap) close(); });
            document.getElementById('__kvn_vs_close').addEventListener('click', close);
            wrap.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
        });
    }

    // ─── Karaoke overlay (F12 / Ctrl+Shift+I/J/C) ──────────────────────
    function showKaraoke() {
        if (document.getElementById('__kvn_kara')) return;
        ensureStyles();
        ensureDecoyLoaded(function () {
            var lines = (window.greasyStranglerScript || '')
                .replace(/\r/g, '')
                .split('\n')
                .map(function (l) { return l.trim(); })
                .filter(function (l) { return l.length > 0; });
            if (!lines.length) lines = ['THE GREASY STRANGLER'];

            var wrap = document.createElement('div');
            wrap.id = '__kvn_kara';
            wrap.style.cssText = 'position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;' +
                'align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(4px);' +
                'animation:__kvn_fade_in .25s ease-out;font-family:system-ui,Segoe UI,sans-serif;';

            wrap.innerHTML =
                '<button id="__kvn_kara_close" aria-label="Close" style="position:absolute;top:14px;right:18px;' +
                'background:none;border:0;color:rgba(255,215,0,.6);font-size:26px;line-height:1;cursor:pointer;padding:8px">✕</button>' +
                '<div style="color:#ffd700;font:700 14px/1 system-ui;letter-spacing:.28em;margin-bottom:38px;' +
                'user-select:none;text-shadow:0 0 12px rgba(231,76,60,.5)">♻️&nbsp;&nbsp;THE GREASY STRANGLER — KVN AUST KARAOKE&nbsp;&nbsp;🎤</div>' +
                '<div style="width:100%;max-width:880px;padding:0 24px;text-align:center;user-select:none">' +
                '  <p id="__kvn_kara_prev" style="color:rgba(255,255,255,.32);font-size:19px;min-height:1.6em;margin:0 0 24px"></p>' +
                '  <div id="__kvn_kara_cur" style="display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;' +
                '    gap:8px 14px;color:#fff;font-weight:800;font-size:34px;min-height:1.4em"></div>' +
                '  <div style="margin:32px auto;width:66%;height:1px;background:linear-gradient(90deg,transparent,rgba(231,76,60,.5),transparent)"></div>' +
                '  <p id="__kvn_kara_next" style="color:rgba(255,255,255,.32);font-size:19px;min-height:1.6em;margin:0"></p>' +
                '</div>' +
                '<div style="position:absolute;bottom:24px;color:rgba(255,215,0,.4);font-size:12px;letter-spacing:.2em">press ESC or click anywhere to close</div>';

            document.body.appendChild(wrap);

            var MS_PER_WORD = 420;
            var lineIdx = 0, wordIdx = 0, timer = null, dead = false;
            var prevEl = document.getElementById('__kvn_kara_prev');
            var curEl = document.getElementById('__kvn_kara_cur');
            var nextEl = document.getElementById('__kvn_kara_next');

            function render() {
                var words = (lines[lineIdx] || '').split(/\s+/).filter(Boolean);
                prevEl.textContent = lineIdx > 0 ? lines[lineIdx - 1] : '';
                nextEl.textContent = lineIdx + 1 < lines.length ? lines[lineIdx + 1] : '';
                curEl.innerHTML = '';
                words.forEach(function (w, i) {
                    var span = document.createElement('span');
                    span.style.cssText = 'position:relative;display:inline-block';
                    if (i === wordIdx) {
                        var drop = document.createElement('span');
                        drop.setAttribute('aria-hidden', 'true');
                        drop.textContent = '💧';
                        drop.style.cssText = 'position:absolute;top:-30px;left:50%;transform:translateX(-50%);' +
                            'font-size:26px;filter:drop-shadow(0 0 8px rgba(231,76,60,.8));animation:__kvn_drop .42s ease-in-out infinite';
                        span.appendChild(drop);
                    }
                    var inner = document.createElement('span');
                    inner.textContent = w;
                    if (i === wordIdx) inner.style.cssText = 'color:#ffd700;text-shadow:0 0 14px rgba(255,215,0,.6)';
                    span.appendChild(inner);
                    curEl.appendChild(span);
                });
            }

            function tick() {
                if (dead) return;
                var words = (lines[lineIdx] || '').split(/\s+/).filter(Boolean);
                if (wordIdx + 1 < words.length) {
                    wordIdx++;
                } else {
                    lineIdx = (lineIdx + 1) % lines.length;
                    wordIdx = 0;
                }
                render();
                timer = setTimeout(tick, MS_PER_WORD);
            }

            render();
            timer = setTimeout(tick, MS_PER_WORD);

            function close() {
                dead = true;
                if (timer) clearTimeout(timer);
                wrap.remove();
            }
            wrap.addEventListener('click', function (e) {
                if (e.target.id === '__kvn_kara_close' || e.target === wrap ||
                    e.target.closest('#__kvn_kara_close')) close();
            });
            document.addEventListener('keydown', function onEsc(e) {
                if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onEsc); }
            });
        });
    }

    // ─── Right-click: do nothing ───────────────────────────────────────
    window.addEventListener('contextmenu', function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, true);

    // ─── Devtools keybindings → decoy ──────────────────────────────────
    window.addEventListener('keydown', function (e) {
        var k = (e.key || '').toLowerCase();
        if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && (k === 'i' || k === 'j' || k === 'c'))) {
            e.preventDefault();
            e.stopPropagation();
            showKaraoke();
        } else if (e.ctrlKey && !e.shiftKey && k === 'u') {
            e.preventDefault();
            e.stopPropagation();
            showViewSource();
        }
    }, true);

    // ─── DevTools-open detection (warn only) ───────────────────────────
    var warned = false;
    function detectDevtools() {
        if (warned) return;
        var w = window.outerWidth - window.innerWidth > 160;
        var h = window.outerHeight - window.innerHeight > 160;
        if (w || h) {
            warned = true;
            try {
                console.log('%c⚠ KVN_AUST', 'font-size:22px;font-weight:700;color:#e74c3c');
                console.log('%cThis page is protected. If anyone told you to paste code here, it is a scam.',
                    'font-size:13px;color:#f39c12');
            } catch (_) {}
        }
    }
    setInterval(detectDevtools, 1500);

    // ─── Mutation observer: block untrusted <script src> injection ─────
    try {
        var ok = ['falcontechnix.com', 'fonts.googleapis.com', 'fonts.gstatic.com', 'docs.google.com'];
        new MutationObserver(function (muts) {
            muts.forEach(function (m) {
                m.addedNodes && m.addedNodes.forEach(function (n) {
                    if (n.tagName === 'SCRIPT' && n.src) {
                        var s = n.src.toLowerCase();
                        var allowed = ok.some(function (d) { return s.indexOf(d) !== -1; });
                        if (!allowed) n.remove();
                    }
                });
            });
        }).observe(document.documentElement, { childList: true, subtree: true });
    } catch (_) {}

    // ─── Lock down the config object ───────────────────────────────────
    try {
        Object.defineProperty(window, '__kvn_internal', {
            configurable: false, enumerable: false, writable: false, value: true
        });
    } catch (_) {}
})();

</script>
</head>
<body>

<!-- SEO: visible h1 is in the start screen -->
<!-- HEADER -->
<div class="header">
  <div class="header-banner"><img id="bannerImg" alt="banner"></div>
  <img class="yt-avatar" id="avatarImg" alt="KVN AUST">
  <div><div class="header-title" title="Click for the Koenig passage that named this tool" onclick="showSonderModal()" style="cursor:help">Sonder</div><div class="header-subtitle">for KVN AUST's Recycle Bin<span class="deep-dive-badge">DEEP DIVE</span></div></div>
  <div class="header-right">
    <div class="sound-pick">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/></svg>
      <select id="soundPick" onchange="setSound(this.value)" aria-label="Sound effect preset">
        <option value="tick">Tick</option>
        <option value="retro">Retro</option>
        <option value="casino">Casino</option>
        <option value="none">Off</option>
      </select>
    </div>
    <button class="hdr-btn-icon" id="historyBtn" onclick="toggleHistory()" title="Game History" aria-label="Game History">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
      <span class="hdr-count-pill" id="historyCountPill"></span>
    </button>
    <button class="hdr-btn-icon is-formats" id="bingoToggle" onclick="handleBingoBtn()" title="Setup Bingo" aria-label="Setup Bingo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="6.2" cy="8.5" r=".7" fill="currentColor" stroke="none"/><circle cx="17.8" cy="8.5" r=".7" fill="currentColor" stroke="none"/><circle cx="6.2" cy="15.5" r=".7" fill="currentColor" stroke="none"/><circle cx="17.8" cy="15.5" r=".7" fill="currentColor" stroke="none"/></svg><span class="lbl" style="font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap">Bingo</span></button>
    <button class="hdr-btn-icon" onclick="showRecords()" title="Zero-View Records Leaderboard" aria-label="Records" style="color:#e74c3c">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
    </button>
    <button class="hdr-btn-icon" onclick="showStats()" title="Stats Dashboard" aria-label="Stats">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>
    </button>
    <button class="hdr-btn-icon" onclick="showAchievements()" title="Achievement Badges" aria-label="Badges" style="color:#ffd700">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="6"/><path d="M15.5 13.7 17 22l-5-3-5 3 1.5-8.3"/></svg>
    </button>
    <button class="hdr-btn-icon" onclick="showGallery()" title="Video Gallery — your finds" aria-label="Gallery">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
    </button>
    <button class="hdr-btn-icon is-formats" id="formatsBtn" onclick="toggleFormatPanel()" title="Format Browser" aria-label="Format Browser">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
      <span class="hdr-fmt-dot" id="hdrFmtDot" title="Format sync status"></span>
      <span class="hdr-fmt-count" id="hdrFmtCount"></span>
    </button>
    <button class="hdr-btn-icon" onclick="showShortcuts()" title="Keyboard Shortcuts" aria-label="Shortcuts" style="font-weight:900">?</button>
    <button class="hdr-btn-icon" onclick="toggleSettings()" title="Settings" aria-label="Settings">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
    </button>
  </div>
</div>

<!-- NAV ARROWS -->
<button class="screen-nav" id="navBack" onclick="goPrev()">&#9664;</button>
<button class="screen-nav" id="navFwd" onclick="goNext()">&#9654;</button>

<canvas id="bubbleCanvas"></canvas>
<div class="main">
  <div id="start-screen" class="screen active">
    <div class="logo-area">
      <img class="big-avatar" id="bigAvatarImg" alt="KVN AUST">
      <h1 title="Click for the Koenig passage that named this tool" onclick="showSonderModal()" style="cursor:help">Sonder</h1>
      <div class="tagline" style="font-style:italic">for <a href="https://www.youtube.com/@KVNAUST" target="_blank" style="color:inherit;text-decoration:none;border-bottom:1px dotted currentColor">KVN AUST</a>'s YouTube Recycle Bin</div>
      <button class="start-btn ng-pulse" onclick="startGame()">&#x25B6; NEW GAME</button>
      <button class="start-btn" id="lbRainbowBtn" onclick="showRecords()" style="background:linear-gradient(135deg,#e74c3c,#f39c12);animation:rainbowShift 2s linear infinite;color:#fff;font-size:.8rem;padding:8px 24px;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.5)">&#x1F3C6; Community Leaderboard</button>
      <button class="start-btn" id="kvnVideosBtn" onclick="toggleKvnVideos()" style="background:linear-gradient(135deg,#c4302b,#8b1a1a);color:#fff;font-size:.8rem;padding:8px 24px;margin-top:8px;position:relative">KVN's Recycle Bin Videos<span id="kvnVideosNewDot" style="display:none;position:absolute;top:-4px;right:-4px;background:#fff;color:#c0392b;font-size:.55rem;font-weight:900;letter-spacing:.04em;padding:2px 6px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.4)">NEW</span></button>
      <div class="game-setup" id="gameSetup" style="margin-top:14px;padding:10px 14px;border:1px solid #2a2a3e;border-radius:8px;background:rgba(20,20,32,.55);max-width:380px;display:flex;flex-direction:column;gap:8px;font-size:.7rem;color:#aab">
        <div style="font-weight:700;letter-spacing:.04em;color:#ccd;text-align:center;font-size:.66rem;text-transform:uppercase;opacity:.7">Game Setup</div>
        <label style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span title="Penalty segments on the spinner. Set to 0 to disable.">Lose-a-Space slots</span><input type="number" id="setupLoseSlots" min="0" max="10" value="2" style="width:54px;background:#0e0e18;border:1px solid #2a2a40;color:#ddd;padding:3px 6px;border-radius:4px;font-size:.7rem" onchange="saveGameSetup()"></label>
        <label style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span title="If off, all 25 cells are real categories">Free Space (center cell)</span><input type="checkbox" id="setupFreeSpace" checked onchange="saveGameSetup()"></label>
        <div style="font-size:.6rem;color:#566;text-align:center;opacity:.7;margin-top:2px">Spinner theme rotates daily — Deep Dive toggle is in the wheel</div>
      </div>
      <div class="free-glow"><b>Heads up — this is the hosted version.</b> The whole tool is GPL-3.0 — <b>play it however suits you, no pressure either way.</b> <b>Want to run it locally?</b> <a href="https://github.com/sworrl/KVN_AUST/releases/latest" target="_blank" rel="noopener">Grab the latest release</a> — the bundle ships with everything you need (HTML + bingo categories), no install, no account, full offline once cached. <b>Don't want to download anything?</b> You're already in the right place — staying here gets you the community side on top: cloud save across devices, leaderboards, player profiles, multiplayer co-watching, daily challenges, all free. Either way: <b>no ads, no paywalls, no tracking, no monetization, ever.</b></div>
      <div style="margin-top:10px;font-size:.68rem;color:#333">Formats synced from <a href="https://github.com/sworrl/KVN_AUST/blob/main/FORMAT-MAP.md" target="_blank" style="color:#2ecc71">FORMAT-MAP.md</a> on GitHub</div>
<!-- Hosted-only download callout intentionally omitted — injected by the wrapper at kvnaust.falcontechnix.com. The .free-glow CSS below stays so the wrapper-injected markup picks up the styling. -->

    </div>
  </div>

  <div id="wheel-screen" class="screen">
    <div class="wheel-top" id="wheelTop">
      <div class="wheel-count-wrap"><label>Slots:</label><input type="number" id="wheelCount" value="20" min="4" max="60" oninput="rebuildWheel()" onkeydown="if(event.key==='Enter'){event.preventDefault();rebuildWheel()}" aria-label="Number of wheel slots"><button onclick="rebuildWheel()">Set</button></div>
      <div class="wheel-mode-btns"><button class="active" id="modeRandom" onclick="setWheelMode('random')">Random</button><button id="modeSelected" onclick="setWheelMode('selected')">Selected</button><button id="modeDeepDive" onclick="toggleDeepDive()" style="background:linear-gradient(135deg,#006064,#00838f);color:#b2ebf2">Deep Dive</button></div>
      <span id="wheelSlotCount" style="font-size:.65rem;color:var(--muted)"></span>
      <div id="wheelLegend" class="wheel-legend"><span><b style="background:#2ecc71"></b>Numbered</span><span><b style="background:#3498db"></b>Keyphrase</span><span><b style="background:#9b59b6"></b>Extension</span><span><b style="background:#e67e22"></b>Date</span><span><b style="background:#f1c40f"></b>Ancient</span><span><b style="background:#e74c3c"></b>Special</span></div>
    </div>
    <div class="wheel-container">
      <div class="wheel-pointer" id="wheelPointer"><svg width="40" height="44" viewBox="0 0 40 44">
  <defs>
    <linearGradient id="ptrGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#666"/><stop offset="40%" stop-color="#333"/><stop offset="100%" stop-color="#111"/></linearGradient>
    <linearGradient id="ptrInner" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="var(--pointer-inner,#444)" stop-opacity=".5"/><stop offset="100%" stop-color="var(--pointer-inner,#222)" stop-opacity=".2"/></linearGradient>
  </defs>
  <polygon points="20,44 1,0 39,0" fill="url(#ptrGrad)" stroke="#888" stroke-width="2" id="ptrFill"/>
  <polygon points="20,40 5,3 35,3" fill="url(#ptrInner)" id="ptrInnerFill"/>
  <polygon points="20,36 8,5 20,1" fill="rgba(255,255,255,.1)"/>
</svg></div>
      <canvas id="wheelCanvas" width="800" height="800"></canvas>
      <button class="spin-btn" id="spinBtn" onclick="spinWheel()"><img id="spinAvatar" alt="SPIN"></button>
      <div class="spin-label" id="spinLabel"><span class="sdi active" id="sdiCW">↻</span><span class="spin-text">SPIN</span><span class="sdi" id="sdiCCW">↺</span></div>
    </div>
    <div class="spin-hint">or press Ctrl+Enter</div>
  </div>

  <div id="format-screen" class="screen" onclick="goNext()">
    <div class="format-banner" id="formatBanner"></div>
    <div class="click-hint">click anywhere to continue</div>
  </div>

  <div id="number-screen" class="screen">
    <div class="number-box">
      <div id="numSingle" style="display:flex;flex-direction:column;align-items:center;gap:20px">
        <div class="rolling-number" id="rollingNumber">0000</div>
        <div class="range-display"><div>Min<br><span id="rangeMin">0</span></div><div>Max<br><span id="rangeMax">9999</span></div></div>
      </div>
      <div id="numDate" style="display:none;flex-direction:row;gap:24px;align-items:flex-start;flex-wrap:wrap;justify-content:center">
        <div style="display:flex;flex-direction:column;align-items:center;gap:12px">
          <div style="font-size:.65rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase">Year</div>
          <div class="rolling-number" id="rollingYear" style="min-width:120px">----</div>
          <div class="range-display"><div>Min<br><span id="yrMin">2006</span></div><div>Max<br><span id="yrMax">2026</span></div></div>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;gap:12px">
          <div style="font-size:.65rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase">Random</div>
          <div class="rolling-number" id="rollingSuffix" style="min-width:120px">----</div>
          <div class="range-display"><div>Min<br><span id="sfxMin">0101</span></div><div>Max<br><span id="sfxMax">1228</span></div></div>
        </div>
      </div>
      <button class="gen-btn" id="genBtn" onclick="generateNumber()">GENERATE</button>
    </div>
  </div>

  <div id="result-screen" class="screen">
    <div class="result-sub">Search YouTube for:</div>
    <div class="result-pill" id="resultPill" onclick="openPillEditor()" role="status" aria-live="polite"></div>
    <div class="result-meta" id="resultMeta" style="display:none"><span class="era-chip" id="eraChip"></span></div>
    <div class="dork-chips" id="dorkChips"><span class="dork-lbl">+ year filter:</span><button class="dork-chip" data-y="2008" onclick="setDork(this)">before:2008</button><button class="dork-chip" data-y="2012" onclick="setDork(this)">before:2012</button><button class="dork-chip" data-y="2016" onclick="setDork(this)">before:2016</button><button class="dork-chip" data-y="2020" onclick="setDork(this)">before:2020</button></div>
    <div class="video-tracker">
      <div class="vt-row" id="vtBtnRow" style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
        <button class="vt-btn copy-btn" onclick="copyResult()">Copy</button>
        <button class="vt-btn rerand-btn" onclick="reRandomize()">Re-Randomize</button>
      </div>
      <div id="srInline" style="margin-top:10px"></div>
      <div id="vtManualEntry" style="display:none">
        <div class="vt-label" style="margin-top:6px">Found a video? Paste the link &amp; rate it:</div>
        <div class="vt-row"><input class="vt-input" id="vtLink" type="text" placeholder="https://youtube.com/watch?v=..." oninput="onVideoLinkChange(this.value)"><span id="vtFetchStatus" style="font-size:.55rem;color:var(--muted);margin-left:4px"></span></div>
        <div class="vt-row" style="gap:4px">
          <input class="vt-input" id="vtDatePosted" type="text" placeholder="Date posted (e.g. 30/10/2006)" style="flex:1">
          <input class="vt-input" id="vtViews" type="text" placeholder="Views (e.g. 0)" style="width:70px">
          <input class="vt-input" id="vtChannelVids" type="text" placeholder="Ch. videos (e.g. 1)" style="width:90px">
        </div>
      </div>
      <div id="vtRatingSection" style="display:none">
        <div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center">
          <div style="text-align:center"><div class="vt-label">Entertainment</div><div class="vt-stars" data-metric="entertainment">
            <span class="vt-star" data-v="1" onclick="setMetric('entertainment',1)">&#9733;</span><span class="vt-star" data-v="2" onclick="setMetric('entertainment',2)">&#9733;</span>
            <span class="vt-star" data-v="3" onclick="setMetric('entertainment',3)">&#9733;</span><span class="vt-star" data-v="4" onclick="setMetric('entertainment',4)">&#9733;</span>
            <span class="vt-star" data-v="5" onclick="setMetric('entertainment',5)">&#9733;</span>
          </div></div>
          <div style="text-align:center"><div class="vt-label">Weirdness</div><div class="vt-stars" data-metric="weirdness">
            <span class="vt-star" data-v="1" onclick="setMetric('weirdness',1)">&#9733;</span><span class="vt-star" data-v="2" onclick="setMetric('weirdness',2)">&#9733;</span>
            <span class="vt-star" data-v="3" onclick="setMetric('weirdness',3)">&#9733;</span><span class="vt-star" data-v="4" onclick="setMetric('weirdness',4)">&#9733;</span>
            <span class="vt-star" data-v="5" onclick="setMetric('weirdness',5)">&#9733;</span>
          </div></div>
          <div style="text-align:center"><div class="vt-label">Gem Factor</div><div class="vt-stars" data-metric="gem">
            <span class="vt-star" data-v="1" onclick="setMetric('gem',1)">&#9733;</span><span class="vt-star" data-v="2" onclick="setMetric('gem',2)">&#9733;</span>
            <span class="vt-star" data-v="3" onclick="setMetric('gem',3)">&#9733;</span><span class="vt-star" data-v="4" onclick="setMetric('gem',4)">&#9733;</span>
            <span class="vt-star" data-v="5" onclick="setMetric('gem',5)">&#9733;</span>
          </div></div>
          <div style="text-align:center"><div class="vt-label">I Just Liked It</div><div class="vt-stars" data-metric="liked">
            <span class="vt-star" data-v="1" onclick="setMetric('liked',1)">&#9733;</span><span class="vt-star" data-v="2" onclick="setMetric('liked',2)">&#9733;</span>
            <span class="vt-star" data-v="3" onclick="setMetric('liked',3)">&#9733;</span><span class="vt-star" data-v="4" onclick="setMetric('liked',4)">&#9733;</span>
            <span class="vt-star" data-v="5" onclick="setMetric('liked',5)">&#9733;</span>
          </div></div>
        </div>
      </div>
      <div class="vt-row">
        <button class="vt-btn save" onclick="saveVideo()">Save &amp; Next Round</button>
        <button class="vt-btn save-rerand" onclick="saveAndReRandomize()">Save &amp; Re-randomize</button>
        <button class="vt-btn skip" onclick="skipVideo()">Skip</button>
      </div>
      <div class="vt-row">
        <button class="vt-btn endonly" onclick="saveAndEnd()">Save &amp; End Game</button>
        <button class="vt-btn share-discord" onclick="shareToDiscord()">Copy for Discord</button>
        <button class="vt-btn" onclick="shareResultCard()">&#128444; Share Card</button>
        <button class="vt-btn end" onclick="endSession()">End Game</button>
      </div>
    </div>
  </div>

  <div id="summary-screen" class="screen">
    <div class="summary-wrap"><div class="summary-title">Game Summary</div><div id="summaryList"></div><div class="summary-avg" id="summaryAvg"></div>
      <div class="summary-actions" style="flex-wrap:wrap">
        <button class="nav-btn" onclick="event.stopPropagation();exportBingoSVG()">Export Bingo Card (SVG)</button>
        <button class="nav-btn" onclick="event.stopPropagation();exportSummaryText()">Export Game Summary (SVG)</button>
        <button class="nav-btn" onclick="event.stopPropagation();newSession()">Back to Home</button>
        <button class="nav-btn primary ng-pulse" onclick="event.stopPropagation();newSession();setTimeout(startGame,400)">&#x25B6; New Game</button>
      </div></div>
  </div>
</div>

<!-- SEARCH RESULTS PANEL -->
<section class="search-results" id="searchResults" aria-labelledby="srTitle">
  <div class="sr-header">
    <h2 id="srTitle" style="font-size:inherit;font-weight:inherit;margin:0">Results</h2>
    <button class="sr-close" onclick="closeSearchResults()">&times;</button>
  </div>
  <div class="sr-list" id="srList"></div>
</section>

<!-- BINGO OVERLAY -->
<div class="bingo-overlay" id="bingoOverlay" onclick="if(event.target===this)toggleBingo()">
  <div class="bingo-card" id="bingoCardEl">
    <button class="bingo-close" onclick="toggleBingo()" aria-label="Close bingo card">&times;</button>
    <div class="bingo-card-header">YouTube's Recycle Bin [KVN AUST]</div>
    <div class="bingo-card-sub">+ new spots &mdash; click to daub!</div>
    <div class="bingo-letters"><span>B</span><span>I</span><span>N</span><span>G</span><span>O</span></div>
    <div class="bingo-grid" id="bingoGrid"></div>
    <div class="color-tool" id="colorTool">
      <label>Daub:</label><input type="color" id="daubColor" value="#4caf50" onchange="setDaubColor(this.value)">
      <label>Op:</label><input type="range" id="daubOpacity" min="30" max="100" value="65" oninput="setDaubOpacity(this.value)">
      <button style="font-size:.6rem;padding:2px 7px;background:var(--card2);border:1px solid #3a3a55;color:#ccc;border-radius:4px;cursor:pointer" onclick="resetBingoCard()">Reset</button>
    </div>
    <div style="text-align:center;margin-top:6px"><button class="hdr-btn" style="font-size:.62rem;padding:2px 8px" onclick="document.getElementById('colorTool').classList.toggle('show')">Colors</button> <button class="hdr-btn" style="font-size:.62rem;padding:2px 8px" onclick="undoDaub()">Undo Daub</button></div>
  </div>
</div>

<!-- BINGO FLASH -->
<div class="bingo-flash" id="bingoFlash">
  <div class="bf-title">Your Bingo Card</div>
  <div class="bf-grid" id="bfGrid"></div>
  <div class="bf-free-msg" id="bfFreeMsg">You Know I Had to Click It....</div>
  <div class="bf-continue" id="bfContinue" style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
    <button class="nav-btn" onclick="reshuffleBingoFlash()" style="font-size:.75rem">Shuffle Again</button>
    <button class="nav-btn primary" onclick="closeBingoFlash()">Let's Go!</button>
  </div>
</div>

<!-- PANELS -->
<section class="format-panel" id="formatPanel" aria-label="Format Browser"><button class="fp-close" onclick="toggleFormatPanel()" aria-label="Close format browser">&times;</button><h2 style="font-size:.9rem;margin-bottom:8px;color:#aaa">Format Browser</h2>
  <input class="fp-search" id="fpSearch" type="text" placeholder="Search formats..." oninput="filterFormats(this.value)">
  <div class="fp-cats" id="fpCats">
    <button class="fp-cat active" data-cat="all" onclick="fpSetCat(this)">All</button>
    <button class="fp-cat" data-cat="numbered" onclick="fpSetCat(this)">Numbered</button>
    <button class="fp-cat" data-cat="keyphrase" onclick="fpSetCat(this)">Keyphrases</button>
    <button class="fp-cat" data-cat="extension" onclick="fpSetCat(this)">Extensions</button>
    <button class="fp-cat" data-cat="date" onclick="fpSetCat(this)">Date-Based</button>
    <button class="fp-cat" data-cat="ancient" onclick="fpSetCat(this)">Ancient YT</button>
    <button class="fp-cat" data-cat="special" onclick="fpSetCat(this)">Special</button>
    <button class="fp-cat" data-cat="fav" onclick="fpSetCat(this)">&#9733; Favorites</button>
  </div>
  <div class="fp-count" id="fpCount"></div>
  <div class="fp-actions"><button onclick="fpSelectAll()">All</button><button onclick="fpSelectNone()">None</button><button onclick="fpSelectRandom()">Random 20</button><button onclick="fpSelectFavs()" style="color:#f1c40f">&#9733; Favs</button><button onclick="fpBingoPicks()" style="background:#e74c3c;color:#fff">KVN Picks</button></div><div id="formatList"></div></section>
<section class="history-panel" id="historyPanel" aria-label="Game History"><button class="hp-close" onclick="toggleHistory()" aria-label="Close history">&times;</button><h2 style="font-size:.9rem;margin-bottom:8px;color:#aaa">Game History</h2><div id="historyList"></div></section>
<section class="kvn-videos-panel" id="kvnVideosPanel" aria-label="KVN AUST Recycle Bin Videos"><button class="kvp-close" onclick="toggleKvnVideos()" aria-label="Close videos panel">&times;</button>
  <h2 style="font-size:.9rem;margin-bottom:4px;color:#aaa">KVN AUST · Recycle Bin Series</h2>
  <div style="font-size:.62rem;color:#666;margin-bottom:10px">Every Recycle Bin / 0-View / mapping video on <a href="https://www.youtube.com/@KVNAUST" target="_blank" style="color:#e74c3c">@KVNAUST</a></div>
  <div id="kvnVideosList"></div>
</section>

<!-- SONDER MODAL — etymology / Koenig poetic quote -->
<div class="sonder-modal" id="sonderModal" onclick="if(event.target===this)closeSonderModal()">
  <div class="sonder-card">
    <button class="sonder-close" onclick="closeSonderModal()" aria-label="Close">&times;</button>
    <div class="sonder-word">sonder</div>
    <div class="sonder-pos"><em>n.</em></div>
    <div class="sonder-def">the realization that each random passerby is living a life as vivid and complex as your own — populated with their own ambitions, friends, routines, worries and inherited craziness — an epic story that continues invisibly around you like an anthill sprawling deep underground, with elaborate passageways to thousands of other lives that you'll never know existed, in which you might appear only once, as an extra sipping coffee in the background, as a blur of traffic passing on the highway, as a lighted window at dusk.</div>
    <div class="sonder-cite">— John Koenig, <em>The Dictionary of Obscure Sorrows</em></div>
    <div class="sonder-kvn">KVN AUST said it best in his Map preface: <em>"This feels like sonder, like the way YouTube used to be."</em> That's the whole pitch for this tool — every spin pulls up someone's nephew's recital from 2009 that nobody else has ever clicked. Their whole life, one click away, entirely unwitnessed.</div>
  </div>
</div>

<!-- BINGO WIN / CONFETTI / TOAST -->
<div class="bingo-win" id="bingoWin"><h2 style="font-size:inherit">BINGO!</h2><div class="easter-msg" id="easterMsg"></div><button class="dismiss" onclick="dismissBingoWin()">Nice!</button></div>
<div class="lose-space" id="loseSpaceOverlay">
  <div class="ls-skull">💀</div>
  <div class="ls-title">LOSE A SPACE</div>
  <div class="ls-sub" id="lsSub"></div>
  <div class="ls-roll" id="lsRoll"></div>
  <div class="ls-target" id="lsTarget"></div>
  <button class="ls-dismiss" id="lsDismiss" onclick="closeLoseSpace()">Continue</button>
</div>
<div class="confetti-container" id="confettiBox"></div>
<div class="toast ok" id="toast"></div>
<div id="luckyLefty">
  <div class="ll-inner">
    <span class="ll-arrow">↺</span>
    <div class="ll-title">LUCKY LEFTY</div>
    <div class="ll-msg" id="llMsg">Fortune favors the left hand tonight.</div>
  </div>
</div>

<!-- ERROR LOG -->
<div class="err-badge" id="errBadge" onclick="toggleErrPanel()">0</div>
<div class="err-panel" id="errPanel">
  <h3 style="font-size:inherit">Log</h3>
  <div id="errList"></div>
  <button class="err-clear" onclick="clearErrors()">Clear</button>
</div>

<!-- BINGO SETUP PANEL -->
<div class="bingo-setup" id="bingoSetup">
  <button class="bs-close" onclick="toggleBingoSetup()">&times;</button>
  <h3>Bingo Categories</h3>
  <div style="font-size:.6rem;color:var(--muted);margin-bottom:8px">All categories are shuffled randomly across the 24 squares each game.</div>
  <div id="bingoSetupList"></div>
  <div style="margin-top:12px;display:flex;gap:6px;flex-wrap:wrap">
    <button class="nav-btn primary" style="font-size:.75rem;padding:6px 16px" onclick="toggleBingoSetup();showToast('Bingo categories saved!')">Done</button>
    <button class="nav-btn" style="font-size:.7rem;padding:5px 12px" onclick="resetBingoToDefaults()">Reset Defaults</button>
    <button class="nav-btn" style="font-size:.7rem;padding:5px 12px" onclick="exportBingoJSON()">Export</button>
    <button class="nav-btn" style="font-size:.7rem;padding:5px 12px" onclick="document.getElementById('bingoImport').click()">Import</button>
    <input type="file" id="bingoImport" accept=".json" style="display:none" onchange="importBingoJSON(this)">
  </div>
</div>

<!-- CREDITS MODAL -->
<div class="settings-overlay" id="creditsOverlay" onclick="if(event.target===this)closeCredits()">
  <div class="settings-modal" style="max-width:550px">
    <h3 style="text-align:center;margin-bottom:4px">Credits</h3>
    <div style="text-align:center;font-size:.7rem;color:var(--muted);margin-bottom:12px">YouTube's Recycle Bin Format Map Contributors</div>
    <div id="creditsList" style="max-height:50vh;overflow-y:auto;font-size:.75rem;color:#ccc;line-height:1.8">
      <div style="text-align:center;color:var(--muted)">Loading contributors...</div>
    </div>
    <hr class="s-divider">
    <div style="text-align:center;font-size:.7rem;color:var(--muted)">
      <div><strong style="color:var(--accent)">KVN AUST</strong> - Creator of YouTube's Recycle Bin &amp; the Maps</div>
      <div><a href="https://www.youtube.com/@KVNAUST" target="_blank" style="color:#7e9cd8">YouTube</a> &middot; <a href="https://x.com/MingKasterMK" target="_blank" style="color:#7e9cd8">X/Twitter</a></div>
      <div style="margin-top:6px"><strong style="color:#4fc3f7">Justin</strong> (<a href="https://x.com/Chegnus" target="_blank" style="color:#7e9cd8">@Chegnus</a>) - Tool Development</div>
      <div><a href="https://www.youtube.com/@BASHnBRASS" target="_blank" style="color:#7e9cd8">BASH &amp; BRASS</a> &middot; <a href="https://www.falcontechnix.com" target="_blank" style="color:#4fc3f7">FalconTechnix</a></div>
    </div>
    <div style="text-align:center;margin-top:12px"><button class="s-btn" onclick="closeCredits()">Close</button></div>
  </div>
</div>

<!-- STATS MODAL -->
<div class="settings-overlay" id="statsOverlay" onclick="if(event.target===this)closeStats()">
  <div class="settings-modal" style="max-width:550px">
    <h3 style="text-align:center;margin-bottom:12px">Stats Dashboard</h3>
    <div id="statsContent" style="font-size:.78rem;color:#ccc;line-height:1.9"></div>
    <div style="text-align:center;margin-top:12px"><button class="s-btn" onclick="closeStats()">Close</button></div>
  </div>
</div>

<!-- SHORTCUTS MODAL -->
<div class="settings-overlay" id="shortcutsOverlay" onclick="if(event.target===this)closeShortcuts()">
  <div class="settings-modal" style="max-width:420px">
    <h3 style="text-align:center;margin-bottom:12px">Keyboard Shortcuts</h3>
    <div style="font-size:.78rem;color:#ccc;line-height:2.2">
      <div style="display:flex;justify-content:space-between"><span style="color:#777">Spin the wheel</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">Ctrl+Enter</kbd></div>
      <div style="display:flex;justify-content:space-between"><span style="color:#777">Generate number</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">Space / Enter</kbd></div>
      <div style="display:flex;justify-content:space-between"><span style="color:#777">New game (summary)</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">R</kbd></div>
      <div style="display:flex;justify-content:space-between"><span style="color:#777">Toggle bingo card</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">B</kbd></div>
      <div style="display:flex;justify-content:space-between"><span style="color:#777">Next screen</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">Arrow Right</kbd></div>
      <div style="display:flex;justify-content:space-between"><span style="color:#777">Previous screen</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">Arrow Left</kbd></div>
      <div style="display:flex;justify-content:space-between"><span style="color:#777">Close modals</span><kbd style="background:var(--card2);padding:2px 8px;border-radius:4px;font-size:.7rem;border:1px solid #3a3a55;color:#fff">Escape</kbd></div>
    </div>
    <div style="text-align:center;margin-top:12px"><button class="s-btn" onclick="closeShortcuts()">Close</button></div>
  </div>
</div>

<!-- ACHIEVEMENTS MODAL -->
<div class="settings-overlay" id="achievementsOverlay" onclick="if(event.target===this)closeAchievements()">
  <div class="settings-modal" style="max-width:500px">
    <h3 style="text-align:center;margin-bottom:4px">Achievements</h3>
    <div style="text-align:center;font-size:.65rem;color:var(--muted);margin-bottom:12px" id="achievProgress"></div>
    <div id="achievList" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px"></div>
    <div style="text-align:center;margin-top:12px"><button class="s-btn" onclick="closeAchievements()">Close</button></div>
  </div>
</div>

<!-- GALLERY MODAL -->
<div class="settings-overlay" id="galleryOverlay" onclick="if(event.target===this)closeGallery()">
  <div class="settings-modal" style="max-width:700px">
    <h3 style="text-align:center;margin-bottom:4px">Video Gallery</h3>
    <div style="text-align:center;font-size:.65rem;color:var(--muted);margin-bottom:8px">Every video found across all games</div>
    <div style="display:flex;gap:6px;justify-content:center;margin-bottom:8px;flex-wrap:wrap">
      <input type="text" id="galSearch" placeholder="Search..." oninput="renderGallery()" style="background:var(--card2);border:1px solid #2a2a45;color:#fff;padding:5px 10px;border-radius:6px;font-size:.72rem;width:160px">
      <select id="galSort" onchange="renderGallery()" style="background:var(--card2);border:1px solid #2a2a45;color:#fff;padding:5px 8px;border-radius:6px;font-size:.72rem" aria-label="Sort gallery">
        <option value="recent">Most Recent</option>
        <option value="oldest">Oldest Video</option>
        <option value="views">Fewest Views</option>
        <option value="rating">Highest Rated</option>
      </select>
    </div>
    <div id="galleryGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;max-height:55vh;overflow-y:auto"></div>
    <div style="text-align:center;margin-top:10px"><button class="s-btn" onclick="closeGallery()">Close</button></div>
  </div>
</div>

<!-- RECORDS TIMELINE MODAL -->
<div class="records-overlay" id="recordsOverlay" onclick="if(event.target===this)closeRecords()">
  <div class="records-modal">
    <h3>Community Leaderboard</h3>
    <div class="rec-sub">All community finds — oldest zero-view videos discovered in the Recycle Bin</div>
    <div class="rec-rarity-legend">
      <span class="r-gold">YouTube Launch (2005)</span>
      <span class="r-red">SUPER RARE (2006)</span>
      <span class="r-orange">VERY RARE (2007-2008)</span>
      <span class="r-green">RARE (2009-2012)</span>
      <span class="r-blue">COMMON (2013+)</span>
    </div>
    <div id="recordHolder" style="text-align:center;font-size:.72rem;color:#888;margin-bottom:8px"></div>
    <div id="recRecentStrip" class="rec-recent-strip" style="display:none"></div>
    <div style="display:flex;justify-content:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;align-items:center">
      <button class="s-btn" style="font-size:.62rem;padding:3px 10px;display:none" id="filterAllBtn" onclick="setTimelineFilter('all')">All Finds</button>
      <button class="s-btn" style="font-size:.62rem;padding:3px 10px;display:none" id="filterZeroBtn" onclick="setTimelineFilter('zero')">Zero Views Only</button>
      <button class="s-btn" style="font-size:.62rem;padding:3px 10px;display:none" id="recZoomResetBtn" onclick="resetTimelineZoom()">Reset Zoom</button>
      <button class="s-btn" style="font-size:.62rem;padding:3px 10px" id="recViewToggleBtn" onclick="toggleRecView()">&#9641; Timeline</button>
      <span id="recViewHint" style="font-size:.55rem;color:#444;display:none">scroll to zoom &#183; drag to pan</span>
    </div>
    <div id="recGraphicWrap" style="display:none"><div class="rec-timeline"><canvas id="recordsCanvas" onclick="handleTimelineClick(event)" onmousemove="handleTimelineHover(event)" onmouseleave="document.getElementById('timelineTooltip').style.display='none'" style="cursor:pointer"></canvas><div id="timelineTooltip" style="display:none;position:absolute;background:#111;border:1px solid #333;border-radius:8px;padding:8px 10px;font-size:.65rem;color:#ccc;pointer-events:none;z-index:10;max-width:220px;box-shadow:0 4px 16px rgba(0,0,0,.6)"></div></div></div>
    <div id="recListShareBar" style="display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:6px">
      <span style="font-size:.55rem;color:#444;align-self:center;margin-right:2px">Share top:</span>
      <span style="display:inline-flex;gap:3px" onclick="event.stopPropagation()">
        <button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(3,'svg')">3 SVG</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(3,'discord')">D</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px;background:linear-gradient(135deg,#5b4fc7,#3d2fa8);border-color:#5b4fc7" onclick="shareLeaderboard(3,'both')">&#9733;</button>
      </span>
      <span style="color:#222;align-self:center">&#9474;</span>
      <span style="display:inline-flex;gap:3px">
        <button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(10,'svg')">10 SVG</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(10,'discord')">D</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px;background:linear-gradient(135deg,#5b4fc7,#3d2fa8);border-color:#5b4fc7" onclick="shareLeaderboard(10,'both')">&#9733;</button>
      </span>
      <span style="color:#222;align-self:center">&#9474;</span>
      <span style="display:inline-flex;gap:3px">
        <button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(20,'svg')">20 SVG</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(20,'discord')">D</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px;background:linear-gradient(135deg,#5b4fc7,#3d2fa8);border-color:#5b4fc7" onclick="shareLeaderboard(20,'both')">&#9733;</button>
      </span>
      <span style="color:#222;align-self:center">&#9474;</span>
      <span style="display:inline-flex;gap:3px">
        <button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(50,'svg')">50 SVG</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(50,'discord')">D</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px;background:linear-gradient(135deg,#5b4fc7,#3d2fa8);border-color:#5b4fc7" onclick="shareLeaderboard(50,'both')">&#9733;</button>
      </span>
      <span style="color:#222;align-self:center">&#9474;</span>
      <span style="display:inline-flex;gap:3px">
        <button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(100,'svg')">100 SVG</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px" onclick="shareLeaderboard(100,'discord')">D</button><button class="s-btn" style="font-size:.58rem;padding:2px 7px;background:linear-gradient(135deg,#5b4fc7,#3d2fa8);border-color:#5b4fc7" onclick="shareLeaderboard(100,'both')">&#9733;</button>
      </span>
    </div>
    <div id="lbHero"></div>
    <div id="recListWrap" style="max-height:min(60vh,560px);overflow-y:auto;margin-bottom:16px;border:1px solid #1a1a2a;border-radius:10px;padding:8px;background:#030306"><div style="text-align:center;color:#555;font-size:.78rem;padding:32px">Loading community finds&#8230;</div></div>
    <div class="rec-form">
      <input type="url" id="recUrl" placeholder="Paste YouTube link..." style="flex:1;min-width:200px" oninput="onRecordLinkChange(this.value)">
      <span id="recFetchStatus" style="font-size:.55rem;color:var(--muted)"></span>
    </div>
    <div class="rec-form">
      <input type="date" id="recDate" style="width:140px" disabled>
      <input type="number" id="recViews" placeholder="Views" min="0" value="" style="width:70px" disabled>
      <button onclick="addRecord()" id="recAddBtn" disabled style="opacity:.5">Add Find</button>
    </div>
    <div style="display:flex;gap:8px;justify-content:center;margin-bottom:8px">
      <button class="s-btn" style="font-size:.7rem;padding:4px 12px" onclick="showRecordTab('mine')" id="recTabMine">My Finds</button>
      <button class="s-btn" style="font-size:.7rem;padding:4px 12px" onclick="showRecordTab('community')" id="recTabComm">Community</button>
    </div>
    <div class="rec-list" id="recordsList"></div>
    <div class="rec-list" id="communityRecordsList" style="display:none"></div>
    <div style="text-align:center;margin-top:6px">
      <button class="s-btn" onclick="closeRecords()">Close</button>
    </div>
  </div>
</div>

<!-- POWER SEARCH OVERLAY — engine adapted from NBVS (github.com/kvnaust/YouTube-NonBiasedVideoSearcher) -->
<div class="ps-overlay" id="psOverlay" onclick="if(event.target===this)closePowerSearch()">
  <div class="ps-panel">
    <div class="ps-header">
      <div style="display:flex;align-items:center;gap:10px">
        <span style="font-weight:900;font-size:.95rem">⚡ Power Search</span>
        <span style="font-size:.6rem;color:#555">powered by <a href="https://github.com/kvnaust/YouTube-NonBiasedVideoSearcher" target="_blank" style="color:#4fc3f7">NBVS</a></span>
        <span id="psCloudBadge" style="display:none;font-size:.55rem;color:#27ae60;border:1px solid #27ae60;border-radius:3px;padding:1px 5px;font-weight:700">☁ CLOUD</span>
      </div>
      <div style="display:flex;align-items:center;gap:8px">
        <div class="ps-query" id="psQueryDisplay"></div>
        <div id="psQuotaWrap" style="display:none;font-size:.6rem;color:#666;white-space:nowrap">
          <span id="psQuotaText"></span>
          <div style="width:70px;height:3px;background:#1a1a2e;border-radius:2px;margin-top:2px;overflow:hidden">
            <div id="psQuotaBar" style="height:100%;background:var(--accent);border-radius:2px;transition:width .3s"></div>
          </div>
        </div>
        <button class="vt-btn" onclick="closePowerSearch()" style="min-width:auto;padding:4px 10px;font-size:.7rem">✕</button>
      </div>
    </div>
    <div class="ps-controls">
      <label style="font-size:.72rem;color:#aaa;cursor:pointer;display:flex;align-items:center;gap:5px">
        <input type="checkbox" id="psFilterShorts" style="accent-color:var(--accent)"> Filter Shorts
      </label>
      <label style="font-size:.72rem;color:#aaa;cursor:pointer;display:flex;align-items:center;gap:5px">
        <input type="checkbox" id="psExactTitle" style="accent-color:var(--accent)"> Exact title
      </label>
      <div style="position:relative;margin-left:auto" id="psSortWrap">
        <button class="s-btn" id="psSortBtn" onclick="togglePsSortMenu()" style="font-size:.7rem;display:flex;align-items:center;gap:4px;white-space:nowrap">
          Sort: <span id="psSortLabel">Views Low→High</span> <span id="psSortArrow">▼</span>
        </button>
        <div id="psSortMenu" style="display:none;position:absolute;right:0;top:calc(100% + 4px);background:#1a1a2e;border:1px solid #3a3a55;border-radius:6px;min-width:210px;z-index:200;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.6)"></div>
      </div>
      <button class="vt-btn" onclick="psSearch(false)" id="psSearchBtn" style="background:var(--accent);min-width:auto;padding:5px 16px;font-size:.73rem">Search</button>
    </div>
    <div class="ps-results-wrap" id="psResultsWrap"></div>
    <div id="psLoadMoreWrap" style="display:none;padding:10px 16px;text-align:center;border-top:1px solid #1a1a2e">
      <button class="s-btn primary" onclick="psSearch(true)" id="psLoadMoreBtn" style="padding:6px 24px">Load 50 More</button>
      <div id="psLoadedCount" style="font-size:.62rem;color:#444;margin-top:4px"></div>
    </div>
  </div>
</div>

<!-- SETTINGS MODAL -->
<div class="settings-overlay" id="settingsOverlay" onclick="if(event.target===this)toggleSettings()">
  <div class="settings-modal" role="dialog" aria-modal="true" aria-label="Settings">
    <h3>Settings</h3>

    <div class="s-group">
      <div class="s-label">App Theme</div>
      <div class="theme-grid" id="themeGrid"></div>
    </div>

    <hr class="s-divider">

    <div class="s-group">
      <div class="s-label">YouTube Channel (auto-fetch images)</div>
      <div class="s-row">
        <input class="s-input" id="sChannelUrl" placeholder="https://www.youtube.com/@KVNAUST">
        <button class="s-btn primary" onclick="fetchChannelImages()">Fetch</button>
      </div>
      <div class="s-note">Enter a YouTube channel URL to auto-pull profile pic and banner</div>
    </div>

    <hr class="s-divider">

    <div class="s-group">
      <div class="s-label">Profile Image (avatar, spinner, favicon, mosaic)</div>
      <div class="s-row">
        <img class="s-preview round" id="sAvatarPreview" alt="Avatar preview">
        <input class="s-input" id="sAvatarUrl" placeholder="Image URL or select file...">
        <button class="s-btn" onclick="document.getElementById('sAvatarFile').click()">File</button>
        <input type="file" class="s-file" id="sAvatarFile" accept="image/*" onchange="handleFileSelect('avatar',this)">
      </div>
    </div>

    <div class="s-group">
      <div class="s-label">Banner Image (header background)</div>
      <div class="s-row">
        <img class="s-preview" id="sBannerPreview" style="width:96px;height:48px;border-radius:6px" alt="Banner preview">
        <input class="s-input" id="sBannerUrl" placeholder="Image URL or select file...">
        <button class="s-btn" onclick="document.getElementById('sBannerFile').click()">File</button>
        <input type="file" class="s-file" id="sBannerFile" accept="image/*" onchange="handleFileSelect('banner',this)">
      </div>
    </div>

    <div class="s-group">
      <div class="s-label">Mosaic Image (bingo card underlay)</div>
      <div class="s-row">
        <img class="s-preview round" id="sMosaicPreview" alt="Mosaic preview">
        <input class="s-input" id="sMosaicUrl" placeholder="Same as avatar by default">
        <button class="s-btn" onclick="document.getElementById('sMosaicFile').click()">File</button>
        <input type="file" class="s-file" id="sMosaicFile" accept="image/*" onchange="handleFileSelect('mosaic',this)">
      </div>
      <div class="s-note">Leave blank to use the profile image</div>
    </div>

    <hr class="s-divider">

    <div class="s-group">
      <div class="s-label">Spinner</div>
      <label style="font-size:.72rem;color:#ccc;cursor:pointer;display:flex;align-items:center;gap:6px">
        <input type="checkbox" id="sAllowRepeats" style="accent-color:var(--accent)">
        Allow repeat formats on the spinner
      </label>
      <div class="s-note">When off (default), the spinner avoids formats already used this game. Red dots mark used formats.</div>
      <label style="font-size:.72rem;color:#ccc;cursor:pointer;display:flex;align-items:center;gap:6px;margin-top:8px">
        <input type="checkbox" id="sCatColor" style="accent-color:var(--accent)" onchange="setQolPref('kvn_wheel_catcolor',this.checked)">
        Color wheel slices by format category (with legend)
      </label>
      <label style="font-size:.72rem;color:#ccc;cursor:pointer;display:flex;align-items:center;gap:6px;margin-top:6px">
        <input type="checkbox" id="sPreferUnspun" style="accent-color:var(--accent)" onchange="setQolPref('kvn_prefer_unspun',this.checked)">
        Prefer formats you've never spun (all-time)
      </label>
      <label style="font-size:.72rem;color:#ccc;cursor:pointer;display:flex;align-items:center;gap:6px;margin-top:6px">
        <input type="checkbox" id="sReduceMotion" style="accent-color:var(--accent)" onchange="setQolPref('kvn_reduce_motion',this.checked)">
        Reduce motion (faster spins, no flashy animations)
      </label>
      <button class="s-btn" style="margin-top:10px" onclick="toggleKbHelp()">&#9000; Keyboard Shortcuts</button>
    </div>

    <hr class="s-divider">

    <div class="s-group">
      <div class="s-label" style="display:flex;align-items:center;gap:6px">⚡ Power Search <span style="font-size:.58rem;color:#9b59b6;border:1px solid #9b59b6;border-radius:3px;padding:1px 5px;font-weight:700">NBVS ENGINE</span></div>
      <div class="s-note" style="margin-bottom:8px">Optional in-page search with real view counts, sort by fewest views, filter Shorts, and load more results. Powered by <a href="https://github.com/kvnaust/YouTube-NonBiasedVideoSearcher" target="_blank" style="color:#7e9cd8">NBVS</a>. Add a free YouTube Data API v3 key to unlock — <a href="https://console.cloud.google.com" target="_blank" style="color:var(--accent)">get one here</a> (~200 searches/day per Gmail). Logged-in users can store their key securely in the cloud.</div>
      <div id="sApiKeyCloud" style="display:none;background:rgba(39,174,96,.08);border:1px solid rgba(39,174,96,.25);border-radius:6px;padding:8px 10px;margin-bottom:8px;font-size:.7rem;color:#27ae60">
        ☁ Key stored securely on the KVN server. <span id="sApiKeyCloudUsed"></span>
        <div style="margin-top:6px;display:flex;gap:6px;align-items:center">
          <input class="s-input" id="sApiKeyCloudInput" type="password" placeholder="Replace with a different key…" style="font-size:.68rem">
          <button class="s-btn primary" onclick="savePsApiKey()" style="font-size:.65rem;padding:4px 10px">Update</button>
          <button class="s-btn" onclick="clearPsApiKey()" style="font-size:.65rem;padding:4px 8px">Clear</button>
        </div>
      </div>
      <div id="sApiKeyLocal">
        <div class="s-row">
          <input class="s-input" id="sApiKey" type="password" placeholder="YouTube Data API v3 key (optional)">
          <button class="s-btn primary" onclick="savePsApiKey()">Save</button>
          <button class="s-btn" id="sClearApiKey" onclick="clearPsApiKey()" style="display:none">Clear</button>
        </div>
        <div class="s-note" id="sApiKeyStatus" style="margin-top:6px"></div>
      </div>
    </div>

    <hr class="s-divider">

    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <button class="s-btn primary" onclick="applySettings()">Save &amp; Apply</button>
      <button class="s-btn" onclick="resetSettingsToDefault()">Reset to Defaults</button>
      <button class="s-btn" onclick="toggleSettings()">Close</button>
    </div>
  </div>
</div>

<!-- KEYBOARD SHORTCUTS -->
<div class="kb-overlay" id="kbOverlay" role="dialog" aria-modal="true" aria-label="Keyboard shortcuts" onclick="if(event.target===this)toggleKbHelp()">
  <div class="kb-modal">
    <h3>&#9000; Keyboard Shortcuts</h3>
    <div class="kb-grid">
      <kbd>Space</kbd><span>Generate number (number screen)</span>
      <kbd>Ctrl+Enter</kbd><span>Spin the wheel</span>
      <kbd>B</kbd><span>Toggle bingo card</span>
      <kbd>&#8592;</kbd><span>Previous screen</span>
      <kbd>&#8594;</kbd><span>Next screen (format screen)</span>
      <kbd>R</kbd><span>New session (summary screen)</span>
      <kbd>Esc</kbd><span>Close any panel</span>
      <kbd>?</kbd><span>This help</span>
    </div>
    <button class="s-btn" onclick="toggleKbHelp()">Close</button>
  </div>
</div>

<!-- FOOTER -->
<div class="credit-footer" id="creditFooter">
  <span style="color:#888;font-size:.7rem;font-weight:600">for</span>
  <div class="cf-group">
    <img id="footerKvnAvatar" alt="KVN AUST" style="border-color:#e74c3c">
    <a href="https://www.youtube.com/@KVNAUST" target="_blank" style="color:#e74c3c">KVN AUST</a>
  </div>
  <span class="cf-sep">&middot;</span>
  <span style="color:#888;font-size:.7rem;font-weight:600">Built by Justin</span>
  <div class="cf-group">
    <img id="footerAvatar" alt="BASH & BRASS" onerror="this.style.display='none'">
    <a href="https://www.youtube.com/@BASHnBRASS" target="_blank">BASH & BRASS</a>
  </div>
  <span class="cf-sep">&middot;</span>
  <div class="cf-group">
    <img class="ft-img" src="/img/favicon-512.png" onerror="this.src='/img/favicon-512.png';this.onerror=null" alt="FT" width="30" height="30">
    <a href="https://www.falcontechnix.com" target="_blank" style="color:#4fc3f7"><img src="/img/site_logo2.webp" onerror="this.src='/img/site_logo2.webp';this.onerror=null" alt="FalconTechnix" class="ft-wordmark" width="120" height="22"></a>
  </div>
  <button class="hdr-btn" style="font-size:.55rem;padding:2px 8px" onclick="showCredits()">Credits</button>
  <span id="versionBadge" style="font-size:.55rem;color:#555;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.05);cursor:default"></span>
  <button class="cf-close" onclick="hideFooter()" title="Hide" aria-label="Hide footer">&times;</button>
</div>

<script>
// ═══════════════════════════════════
//  VERSION & UPDATE CHECK
// ═══════════════════════════════════
const REPO_OWNER='sworrl',REPO_NAME='KVN_AUST';
const REPO_URL=`https://github.com/${REPO_OWNER}/${REPO_NAME}`;
const RAW_URL=`https://raw.githubusercontent.com/${REPO_OWNER}/${REPO_NAME}/main`;
const LIVE_URL='https://kvnaust.falcontechnix.com/kvnaust-recyclebin.html';
// Version is read from embedded JSON at bottom of file
function getEmbeddedVersion(){try{return JSON.parse(document.getElementById('app-version-data').textContent)}catch{return{version:'0.0.0',build:'unknown'}}}
const _v=getEmbeddedVersion();
const APP_VERSION=_v.version;
const APP_BUILD=_v.build;

async function checkForUpdates(){
  const badge=document.getElementById('versionBadge');
  const isLive=location.hostname.includes('falcontechnix.com');

  badge.textContent=`v${APP_VERSION}`;
  badge.title=`Build: ${APP_BUILD}`;

  // Hosted on FT — updates are automated, no banner needed
  if(isLive){
    badge.style.cssText='font-size:.55rem;color:#4caf50;padding:2px 6px;border-radius:4px;background:rgba(76,175,80,.1)';
    badge.title='Up to date!';
    return;
  }

  // Check GitHub raw for latest version (works from ANY origin including file://)
  try{
    const r=await fetch(`${RAW_URL}/kvnaust-recyclebin.html?_=${Date.now()}`);
    if(!r.ok)throw new Error('HTTP '+r.status);
    // Only read first 5KB to find the version JSON (don't download the whole file)
    const text=await r.text();
    // Match version specifically from the embedded app-version-data block
    // Search from the END of the file (version block is at bottom)
    const vBlock=text.lastIndexOf('app-version-data');
    const tail=vBlock>0?text.substring(vBlock):'';
    const m=tail.match(/"version"\s*:\s*"(\d+\.\d+\.\d+)"/);
    //console.log('Version check: local='+APP_VERSION+' github='+(m?m[1]:'?'));
    if(m&&m[1]&&m[1]!==APP_VERSION){
      // OUTDATED - bright red blinking
      badge.textContent=`UPDATE AVAILABLE: v${m[1]}`;
      badge.style.cssText='font-size:.6rem;color:#ff1744;cursor:pointer;padding:3px 8px;border-radius:4px;background:rgba(255,23,68,.1);border:1px solid #ff1744;animation:updateBlink 1s ease-in-out infinite';
      badge.title=`Your version: v${APP_VERSION}. Latest: v${m[1]}. Click to get the update!`;
      badge.onclick=()=>window.open(REPO_URL,'_blank');
    }else{
      // Up to date - green
      badge.textContent=`v${APP_VERSION}`;
      badge.style.cssText='font-size:.55rem;color:#4caf50;padding:2px 6px;border-radius:4px;background:rgba(76,175,80,.1)';
      badge.title='Up to date!';
    }
  }catch(e){
    // Can't reach GitHub - just show version quietly
    badge.textContent=`v${APP_VERSION}`;
    badge.style.cssText='font-size:.55rem;color:#555;padding:2px 6px';
    console.log('Version check:',e.message);
  }
}

// ═══════════════════════════════════
//  IMAGE CACHE (IndexedDB)
// ═══════════════════════════════════
const IMG_URLS={
  banner:'https://yt3.googleusercontent.com/LiJo5TjebDsCHINkNKnctYZISlIyWVCSB1tFtRdB1_NNmKueqGaWogc0hHu1z4zsD93eEkyxFA=w2120-fcrop64=1,00005a57ffffa5a8-k-c0xffffffff-no-nd-rj',
  avatar:'https://yt3.googleusercontent.com/ytc/AIdro_lgUZyOAlroBVjTTS0ERdTxzQ8m_JwBKaUleQYtZAJjtA=s200-c-k-c0x00ffffff-no-rj',
  footer:'https://yt3.googleusercontent.com/hEt0minH0EjZs9wZ0iKmLCQuysFbVotELjSc29mwJk60dnnhBzFjD-odqNAnut631n7FEIw7R9A=s200-c-k-c0x00ffffff-no-rj'
};
// Old B&B footer URL that rotted and started serving an unrelated image — if a
// user's saved settings pinned it, drop it so the real logo comes back.
const DEAD_FOOTER_TOKEN='WWWdvQUKTtkyXrgYUfWVnpf40HPJQCnxLUb';
const DB_NAME='kvn_img_cache',DB_VER=11;
function openDB(){return new Promise((res,rej)=>{const r=indexedDB.open(DB_NAME,DB_VER);r.onupgradeneeded=e=>{const d=e.target.result;if(!d.objectStoreNames.contains('images'))d.createObjectStore('images')};r.onsuccess=e=>res(e.target.result);r.onerror=rej})}
async function getCachedImage(key,url){
  try{
    const db=await openDB();
    return new Promise(res=>{
      const r=db.transaction('images','readonly').objectStore('images').get(key);
      r.onsuccess=()=>{
        if(r.result){res(URL.createObjectURL(r.result));setTimeout(()=>fetchAndCache(key,url,db),5000)}
        else{res(url);fetchAndCache(key,url,db)}
      };
      r.onerror=()=>res(url);
    });
  }catch{return url}
}
async function fetchAndCache(k,u,db){try{const r=await fetch(u,{mode:'cors'});if(!r.ok)return;const b=await r.blob();db.transaction('images','readwrite').objectStore('images').put(b,k)}catch{}}
// For file:// usage, img tags load cross-origin fine - just set src directly as fallback

async function loadImages(){
  // Load any saved custom image settings
  loadSettings();
  // Apply to DOM
  applyImagesToDOM();
  // Try to upgrade to cached blob URLs (faster on subsequent loads when served via http)
  try{
    // 'footer_bb2' key (was 'footer', then 'footer_bb'): old caches held either KVN's
    // avatar or the rotted ggpht image under the footer key. New key = clean slate.
    const[banner,avatar,footer]=await Promise.all([getCachedImage('banner',IMG_URLS.banner),getCachedImage('avatar',IMG_URLS.avatar),getCachedImage('footer_bb2',IMG_URLS.footer)]);
    if(banner.startsWith('blob:'))document.getElementById('bannerImg').src=banner;
    if(avatar.startsWith('blob:')){document.getElementById('avatarImg').src=avatar;document.getElementById('bigAvatarImg').src=avatar;document.getElementById('spinAvatar').src=avatar;document.getElementById('footerKvnAvatar').src=avatar}
    if(footer.startsWith('blob:'))document.getElementById('footerAvatar').src=footer;
  }catch{}
}

// ═══════════════════════════════════
//  WEB AUDIO SPINNER SOUNDS
// ═══════════════════════════════════
let audioCtx=null;
let soundMode='tick';
let audioUnlocked=false;
function getAudioCtx(){
  if(!audioCtx){audioCtx=new(window.AudioContext||window.webkitAudioContext)();
    if(audioCtx.state==='suspended')audioCtx.resume()}
  return audioCtx;
}
// Only unlock audio on first user click (prevents browser audio indicator on load)
document.addEventListener('click',function unlockAudio(){audioUnlocked=true;document.removeEventListener('click',unlockAudio)},{once:true});
function setSound(v){soundMode=v;localStorage.setItem('kvn_sound',v)}

function playTick(pitch){
  if(soundMode==='none'||!audioUnlocked)return;
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    const osc=ctx.createOscillator();const gain=ctx.createGain();
    osc.connect(gain);gain.connect(ctx.destination);
    if(soundMode==='tick'){osc.type='sine';osc.frequency.value=800+pitch*400;gain.gain.setValueAtTime(.08,t);gain.gain.exponentialRampToValueAtTime(.001,t+.06);osc.start(t);osc.stop(t+.06)}
    else if(soundMode==='retro'){osc.type='square';osc.frequency.value=200+pitch*600;gain.gain.setValueAtTime(.05,t);gain.gain.exponentialRampToValueAtTime(.001,t+.05);osc.start(t);osc.stop(t+.05)}
    else if(soundMode==='casino'){osc.type='triangle';osc.frequency.value=1200+pitch*800;gain.gain.setValueAtTime(.06,t);gain.gain.exponentialRampToValueAtTime(.001,t+.08);osc.start(t);osc.stop(t+.08)}
    else if(soundMode==='nautical'){
      // Sonar ping: filtered sine with reverb tail
      const o=ctx.createOscillator();const g=ctx.createGain();const f=ctx.createBiquadFilter();
      o.connect(f);f.connect(g);g.connect(ctx.destination);
      o.type='sine';o.frequency.value=600+pitch*800;f.type='bandpass';f.frequency.value=800+pitch*600;f.Q.value=8;
      g.gain.setValueAtTime(.06,t);g.gain.exponentialRampToValueAtTime(.001,t+.15);
      o.start(t);o.stop(t+.15);
    }
  }catch{}
}

// Nautical win sound: whale call + sonar pings
function playNauticalWin(){
  if(soundMode!=='nautical'||!audioUnlocked)return;
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    // Low whale-like sweep
    const w=ctx.createOscillator();const wg=ctx.createGain();const wf=ctx.createBiquadFilter();
    w.connect(wf);wf.connect(wg);wg.connect(ctx.destination);
    w.type='sine';w.frequency.setValueAtTime(180,t);w.frequency.exponentialRampToValueAtTime(320,t+.4);w.frequency.exponentialRampToValueAtTime(200,t+.8);
    wf.type='lowpass';wf.frequency.value=400;wf.Q.value=5;
    wg.gain.setValueAtTime(.1,t);wg.gain.linearRampToValueAtTime(.12,t+.3);wg.gain.exponentialRampToValueAtTime(.001,t+1.0);
    w.start(t);w.stop(t+1.0);
    // Sonar pings ascending
    [0,.2,.35,.5].forEach((d,i)=>{
      const o=ctx.createOscillator();const g=ctx.createGain();const f=ctx.createBiquadFilter();
      o.connect(f);f.connect(g);g.connect(ctx.destination);
      o.type='sine';o.frequency.value=800+i*200;f.type='bandpass';f.frequency.value=1000+i*300;f.Q.value=12;
      g.gain.setValueAtTime(.04+i*.01,t+d);g.gain.exponentialRampToValueAtTime(.001,t+d+.25);
      o.start(t+d);o.stop(t+d+.25);
    });
  }catch{}
}

function playAnchorDrop(){
  if(!audioUnlocked)return;
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    // Chain rattle: burst of filtered noise
    const buf=ctx.createBuffer(1,ctx.sampleRate*.6,ctx.sampleRate);
    const d=buf.getChannelData(0);
    for(let i=0;i<d.length;i++)d[i]=(Math.random()*2-1)*Math.exp(-i/(ctx.sampleRate*.15));
    const noise=ctx.createBufferSource();noise.buffer=buf;
    const bp=ctx.createBiquadFilter();bp.type='bandpass';bp.frequency.value=2000;bp.Q.value=3;
    const ng=ctx.createGain();ng.gain.setValueAtTime(.08,t);ng.gain.exponentialRampToValueAtTime(.001,t+.6);
    noise.connect(bp);bp.connect(ng);ng.connect(ctx.destination);noise.start(t);
    // Descending tone (anchor falling)
    const o=ctx.createOscillator();const g=ctx.createGain();
    o.connect(g);g.connect(ctx.destination);o.type='sine';
    o.frequency.setValueAtTime(400,t);o.frequency.exponentialRampToValueAtTime(80,t+.8);
    g.gain.setValueAtTime(.06,t+.1);g.gain.exponentialRampToValueAtTime(.001,t+.9);
    o.start(t+.1);o.stop(t+.9);
    // Splash: low thud
    const s=ctx.createOscillator();const sg=ctx.createGain();
    s.connect(sg);sg.connect(ctx.destination);s.type='sine';s.frequency.value=60;
    sg.gain.setValueAtTime(.1,t+.7);sg.gain.exponentialRampToValueAtTime(.001,t+1.1);
    s.start(t+.7);s.stop(t+1.1);
  }catch{}
}

function playWinSound(){
  if(soundMode==='none'||!audioUnlocked)return;
  if(soundMode==='nautical'){playNauticalWin();return}
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    // Triumphant ascending fanfare: C5-E5-G5-C6 with increasing duration
    const notes=[{f:523,d:.12,l:.18},{f:659,d:.14,l:.20},{f:784,d:.16,l:.24},{f:1047,d:.20,l:.35}];
    let offset=0;
    notes.forEach(n=>{
      const o=ctx.createOscillator();const g=ctx.createGain();
      o.connect(g);g.connect(ctx.destination);o.type='triangle';o.frequency.value=n.f;
      g.gain.setValueAtTime(.12,t+offset);g.gain.exponentialRampToValueAtTime(.001,t+offset+n.l);
      o.start(t+offset);o.stop(t+offset+n.l);
      offset+=n.d;
    });
  }catch{}
}

function playBingoWinSound(){
  if(soundMode==='none'||!audioUnlocked)return;
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    // Dramatic bingo fanfare: C5-E5-G5-C6-E6-G6-C7 with crescendo
    const notes=[{f:523,d:.10,l:.16,v:.08},{f:659,d:.10,l:.18,v:.09},{f:784,d:.12,l:.20,v:.10},{f:1047,d:.14,l:.24,v:.12},{f:1319,d:.14,l:.26,v:.13},{f:1568,d:.16,l:.30,v:.14},{f:2093,d:.24,l:.50,v:.16}];
    let offset=0;
    notes.forEach(n=>{
      const o=ctx.createOscillator();const g=ctx.createGain();
      o.connect(g);g.connect(ctx.destination);o.type='triangle';o.frequency.value=n.f;
      g.gain.setValueAtTime(n.v,t+offset);g.gain.exponentialRampToValueAtTime(.001,t+offset+n.l);
      o.start(t+offset);o.stop(t+offset+n.l);
      offset+=n.d;
    });
  }catch{}
}

// Sad trombone descending fanfare for losing a bingo space.
function playLoseSound(){
  if(soundMode==='none'||!audioUnlocked)return;
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    const notes=[{f:392,d:.14,l:.22,v:.12},{f:349,d:.14,l:.22,v:.13},{f:311,d:.16,l:.26,v:.14},{f:233,d:.34,l:.55,v:.16}];
    let offset=0;
    notes.forEach(n=>{
      const o=ctx.createOscillator();const g=ctx.createGain();
      o.connect(g);g.connect(ctx.destination);o.type='sawtooth';o.frequency.setValueAtTime(n.f,t+offset);
      // Pitch droop on the last note for the trombone slide
      if(n===notes[notes.length-1])o.frequency.exponentialRampToValueAtTime(n.f*0.6,t+offset+n.l);
      g.gain.setValueAtTime(n.v,t+offset);g.gain.exponentialRampToValueAtTime(.001,t+offset+n.l);
      o.start(t+offset);o.stop(t+offset+n.l);
      offset+=n.d;
    });
    // Low thud on impact
    const o2=ctx.createOscillator(),g2=ctx.createGain();
    o2.connect(g2);g2.connect(ctx.destination);o2.type='sine';
    o2.frequency.setValueAtTime(110,t);o2.frequency.exponentialRampToValueAtTime(40,t+.4);
    g2.gain.setValueAtTime(.18,t);g2.gain.exponentialRampToValueAtTime(.001,t+.4);
    o2.start(t);o2.stop(t+.4);
  }catch{}
}

// ═══════════════════════════════════
//  FORMATS
// ═══════════════════════════════════
// All formats fetched from GitHub FORMAT-MAP.md — no hardcoded fallbacks
const ALL_FORMATS=[];

// Empty - bingo-categories.json is required
const BINGO_CATS=[];

const FREE_SPACE_PHRASES=["Lemme Tag that Freespace","You Know I Had to Click It....","Free real estate, baby.","The one square you don't gotta earn.","Everybody gets one.","That's the gimme.","Center stage, no audition needed.","The participation trophy of bingo.","Click it or ticket.","This one's on the house.","Freebie secured.","The only guaranteed W."];

const EASTER_EGGS=["BINGO!"];

// ═══════════════════════════════════
//  HOLIDAY EASTER EGGS
// ═══════════════════════════════════
const HOLIDAYS={
  '01-01':{name:'New Year',emoji:'🎆',msg:'Happy New Year from the Recycle Bin!',colors:['#ffd700','#ff6b4a','#fff']},
  '02-14':{name:'Valentine\'s',emoji:'💕',msg:'Love is finding a zero-view video',colors:['#e74c3c','#ff69b4','#fff']},
  '03-17':{name:'St. Patrick\'s',emoji:'☘️',msg:'Feeling lucky? Spin the wheel!',colors:['#2ecc71','#27ae60','#fff']},
  '04-01':{name:'April Fools',emoji:'🃏',msg:'All videos have 0 views today... wait',colors:['#f39c12','#9b59b6','#3498db']},
  '07-04':{name:'4th of July',emoji:'🎇',msg:'Freedom to find zero-view videos!',colors:['#e74c3c','#fff','#3498db']},
  '10-18':{name:'KVN AUST Day',emoji:'🎂',msg:'Happy Birthday KVN AUST! 🎉',colors:['#e74c3c','#f39c12','#2ecc71']},
  '10-31':{name:'Halloween',emoji:'🎃',msg:'The scariest videos have 0 views...',colors:['#ff6b00','#9b59b6','#2ecc71']},
  '12-24':{name:'Christmas Eve',emoji:'🎄',msg:'One more sleep until zero-view Christmas',colors:['#e74c3c','#2ecc71','#ffd700']},
  '12-25':{name:'Christmas',emoji:'🎄',msg:'The gift of zero-view videos',colors:['#e74c3c','#2ecc71','#ffd700']},
  '12-31':{name:'New Year\'s Eve',emoji:'🥂',msg:'One last dig before midnight!',colors:['#ffd700','#c0c0c0','#fff']},
};
let activeHoliday=null;

function checkHoliday(){
  const now=new Date();const key=String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0');
  const h=HOLIDAYS[key];if(!h)return;
  activeHoliday=h;
  // Show holiday toast after page settles
  setTimeout(()=>showToast(`${h.emoji} ${h.msg}`),2000);
  // Override tagline on start screen
  const tag=document.querySelector('.tagline');if(tag)tag.textContent=`${h.emoji} ${h.msg}`;
  // Holiday-themed confetti colors
  if(h.colors)CONFETTI_HOLIDAY_COLORS=h.colors;
  // KVN AUST Day: auto confetti + birthday greeting
  if(key==='10-18'){
    setTimeout(()=>{spawnConfetti();setTimeout(()=>showToast('🎂 Happy Birthday Kevin! 🎂'),500)},3000);
  }
  // Halloween: spooky free space phrases
  if(key==='10-31'){
    FREE_SPACE_PHRASES.push('BOO! 👻','The spirits demand a free space...','Something wicked this way clicks','From the YouTube crypt...');
  }
  // Christmas: festive phrases
  if(key==='12-25'||key==='12-24'){
    FREE_SPACE_PHRASES.push('Ho ho ho! 🎅','Santa left this one for free','Unwrap the free space 🎁',"'Tis the season for zero views");
  }
  // April Fools: reverse bingo letters
  if(key==='04-01'){
    setTimeout(()=>{const el=document.querySelector('.bingo-letters');if(el)el.style.direction='rtl'},1000);
  }
}
let CONFETTI_HOLIDAY_COLORS=null;

// ═══════════════════════════════════
//  ACHIEVEMENTS
// ═══════════════════════════════════
const ACHIEVEMENTS={
  first_game:{name:'First Dive',desc:'Play your first game',icon:'🎮',check:()=>getAllGames().length>=1},
  ten_games:{name:'Veteran Diver',desc:'Play 10 games',icon:'🏊',check:()=>getAllGames().length>=10},
  fifty_rounds:{name:'Deep Searcher',desc:'Complete 50 rounds',icon:'🔍',check:()=>getAllGames().reduce((t,g)=>t+g.rounds.length,0)>=50},
  first_find:{name:'First Blood',desc:'Add your first zero-view record',icon:'🩸',check:()=>getRecords().length>=1},
  zero_view:{name:'Ghost Hunter',desc:'Find a video with exactly 0 views',icon:'👻',check:()=>getRecords().some(r=>r.views===0)},
  five_finds:{name:'Record Collector',desc:'Add 5 records to the timeline',icon:'📀',check:()=>getRecords().length>=5},
  legendary:{name:'Legendary Find',desc:'Discover a video from 2005 or earlier',icon:'🏆',check:()=>getRecords().some(r=>new Date(r.date).getFullYear()<=2005)},
  super_rare:{name:'Super Rare',desc:'Discover a video from 2006',icon:'💎',check:()=>getRecords().some(r=>new Date(r.date).getFullYear()===2006)},
  very_rare:{name:'Time Traveler',desc:'Discover a video from 2007-2008',icon:'⏳',check:()=>getRecords().some(r=>{const y=new Date(r.date).getFullYear();return y>=2007&&y<=2008})},
  bingo:{name:'BINGO!',desc:'Complete a bingo line',icon:'🎯',check:()=>(localStorage.getItem('kvn_achievement_bingo')==='1')},
  deep_diver:{name:'Deep Diver',desc:'Use Deep Dive mode',icon:'🤿',check:()=>(localStorage.getItem('kvn_achievement_deepdive')==='1')},
  bubble_popper:{name:'Bubble Pop',desc:'Pop 50 bubbles',icon:'🫧',check:()=>(parseInt(localStorage.getItem('kvn_bubbles_popped')||'0')>=50)},
  all_formats:{name:'Format Master',desc:'Use 20 different formats',icon:'🎰',check:()=>{const used=new Set();getAllGames().forEach(g=>g.rounds.forEach(r=>{if(r.format)used.add(r.format)}));return used.size>=20}},
  five_star:{name:'Gem Finder',desc:'Rate a video 5 stars on Gem Factor',icon:'⭐',check:()=>getAllGames().some(g=>g.rounds.some(r=>r.metrics&&r.metrics.gem>=5))},
  share_card:{name:'Show & Tell',desc:'Export a share card',icon:'🃏',check:()=>(localStorage.getItem('kvn_achievement_shared')==='1')},
};
const ACHIEV_KEY='kvn_achievements';

function getUnlockedAchievements(){try{return JSON.parse(localStorage.getItem(ACHIEV_KEY)||'{}')}catch{return{}}}
function saveAchievements(a){localStorage.setItem(ACHIEV_KEY,JSON.stringify(a))}

function checkAchievements(){
  const unlocked=getUnlockedAchievements();let newCount=0;
  for(const[id,a]of Object.entries(ACHIEVEMENTS)){
    if(unlocked[id])continue;
    try{if(a.check()){unlocked[id]=new Date().toISOString();newCount++;showAchievementToast(a)}}catch{}
  }
  if(newCount)saveAchievements(unlocked);
}

function showAchievementToast(a){
  showToast(`${a.icon} Achievement: ${a.name}!`);
  // Play a special achievement sound
  if(audioUnlocked){try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    [{f:523,d:.1},{f:659,d:.1},{f:784,d:.1},{f:1047,d:.2}].forEach((n,i)=>{
      const o=ctx.createOscillator();const g=ctx.createGain();o.connect(g);g.connect(ctx.destination);
      o.type='triangle';o.frequency.value=n.f;g.gain.setValueAtTime(.08,t+i*.1);
      g.gain.exponentialRampToValueAtTime(.001,t+i*.1+n.d+.1);o.start(t+i*.1);o.stop(t+i*.1+n.d+.1);
    });
  }catch{}}
}

// Track bubble pops
function trackBubblePop(){
  const n=parseInt(localStorage.getItem('kvn_bubbles_popped')||'0')+1;
  localStorage.setItem('kvn_bubbles_popped',String(n));
}

// Hook: mark achievements from specific actions
function markAchievement(key){localStorage.setItem('kvn_achievement_'+key,'1')}

// ─── Game setup (persisted) ───
function loadGameSetup(){
  try{
    const s=JSON.parse(localStorage.getItem('kvn_setup')||'null');
    if(s){
      if(typeof s.loseSlots==='number')setupLoseSlots=Math.max(0,Math.min(10,s.loseSlots));
      if(typeof s.freeSpace==='boolean')setupFreeSpace=s.freeSpace;
    }
  }catch{}
  const ls=document.getElementById('setupLoseSlots');if(ls)ls.value=setupLoseSlots;
  const fs=document.getElementById('setupFreeSpace');if(fs)fs.checked=setupFreeSpace;
}
function saveGameSetup(){
  const ls=document.getElementById('setupLoseSlots');if(ls)setupLoseSlots=Math.max(0,Math.min(10,parseInt(ls.value,10)||0));
  const fs=document.getElementById('setupFreeSpace');if(fs)setupFreeSpace=fs.checked;
  try{localStorage.setItem('kvn_setup',JSON.stringify({loseSlots:setupLoseSlots,freeSpace:setupFreeSpace}))}catch{}
}

// ─── Auto-rotated wheel theme ───
// Rotation rules:
//  - If today's date != themeAssignedDate, pick a fresh theme (different from current).
//  - Otherwise, if themeGamesSinceAssigned >= 2 (player has saved 2 full games), pick a fresh theme on the next startGame.
//  - Soft refreshes preserve the current theme.
//  - Deep Dive overrides everything via deepDiveActive.
function todayKey(){const d=new Date();return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0')}
function loadWheelTheme(){
  try{
    const s=JSON.parse(localStorage.getItem('kvn_theme')||'null');
    if(s&&s.name&&WHEEL_THEMES[s.name]){currentWheelTheme=s.name;themeAssignedDate=s.date||'';themeGamesSinceAssigned=s.count||0}
  }catch{}
  if(!themeAssignedDate||themeAssignedDate!==todayKey())rotateWheelTheme(); // first-load OR new day
  saveWheelTheme();
}
function saveWheelTheme(){
  try{localStorage.setItem('kvn_theme',JSON.stringify({name:currentWheelTheme,date:themeAssignedDate,count:themeGamesSinceAssigned}))}catch{}
}
function rotateWheelTheme(){
  const names=Object.keys(WHEEL_THEMES).filter(n=>n!==currentWheelTheme);
  currentWheelTheme=names[Math.floor(Math.random()*names.length)];
  themeAssignedDate=todayKey();
  themeGamesSinceAssigned=0;
  saveWheelTheme();
  if(currentScreen==='wheel-screen'&&!spinning&&typeof drawWheel==='function')drawWheel();
}
// Called from startGame: rotate if a new day OR ≥2 games saved since last rotation.
function maybeRotateThemeOnStart(){
  if(themeAssignedDate!==todayKey()){rotateWheelTheme();return}
  if(themeGamesSinceAssigned>=2)rotateWheelTheme();
}

// ─── Bottom bar auto-hide ───
function hideFooter(){document.getElementById('creditFooter').classList.add('hidden');footerUserHidden=true}
function autoHideFooter(){if(!footerUserHidden)document.getElementById('creditFooter').classList.add('hidden')}
function showFooter(){if(!footerUserHidden)document.getElementById('creditFooter').classList.remove('hidden')}

// ═══════════════════════════════════
//  STATE
// ═══════════════════════════════════
let formats=[...ALL_FORMATS],wheelFormats=[],wheelMode='random',selectedFormats=new Set(ALL_FORMATS.map((_,i)=>i));
let currentScreen='start-screen',chosenFormat=null,chosenNumber=null,finalString='',wheelAngle=0,spinning=false;
let bingoState=Array(25).fill(false),bingoWinShown=false,currentGameId=null,sessionRounds=[];
let lastTickSegment=-1;
let tickerAngle=0,tickerVelocity=0;
let spinDir=1; // 1=CW, -1=CCW
let bingoPicked=null;
let gameActive=false;
let bingoPerLetter=false;
// User-set game setup (persisted across sessions)
let setupLoseSlots=2; // number of LOSE A SPACE penalty segments injected (0 = disabled)
let setupFreeSpace=true; // whether the bingo center is a free space or a regular category
// Auto-rotated wheel theme (NOT user-selectable beyond Deep Dive). Rotates daily or after 2 saved games.
let currentWheelTheme='Carnival';
let themeAssignedDate=''; // YYYY-MM-DD when current theme was picked
let themeGamesSinceAssigned=0; // increments on saveGameToHistory
let footerUserHidden=false; // true if user clicked X — game-end show should respect this
let usedFormats=new Set(); // labels of formats already spun this game
// ── QoL state (7.20.0) ──
let favFormats=new Set();try{favFormats=new Set(JSON.parse(localStorage.getItem('kvn_fav_formats')||'[]'))}catch{}
let allTimeSpun=new Set();try{allTimeSpun=new Set(JSON.parse(localStorage.getItem('kvn_spun_labels')||'[]'))}catch{}
let resultDork=0,lastDaubIdx=null,wheelCatColor=false;
const SEC_COLORS={numbered:'#2ecc71',keyphrase:'#3498db',extension:'#9b59b6',date:'#e67e22',ancient:'#f1c40f',special:'#e74c3c'};
function qolPref(k){try{return localStorage.getItem(k)==='1'}catch{return false}}
function setQolPref(k,v){try{localStorage.setItem(k,v?'1':'0')}catch{}
  if(k==='kvn_reduce_motion')document.body.classList.toggle('reduce-motion',!!v);
  if(k==='kvn_wheel_catcolor'){wheelCatColor=!!v;updateWheelLegend();if(currentScreen==='wheel-screen'&&!spinning)drawWheel()}}
function reduceMotionOn(){return qolPref('kvn_reduce_motion')||(window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches)}
function updateWheelLegend(){const el=document.getElementById('wheelLegend');if(el)el.style.display=(wheelCatColor&&!deepDiveActive)?'flex':'none'}
function getQ(){return deepDiveActive?finalString+' Before:'+DEEP_DIVE_YEAR:(resultDork?finalString+' before:'+resultDork:finalString)}
let allowRepeatFormats=false; // user setting
let maxReachedIdx=0; // farthest screen reached in current flow (can't skip ahead past this)
let errorLog=[]; // {type:'warn'|'error', msg:string, ts:Date}

const SCREENS=['start-screen','wheel-screen','format-screen','number-screen','result-screen'];
const WHEEL_COLORS=['#b8860b','#2e8b57','#daa520','#1565c0','#c62828','#6a1b9a','#00838f','#ef6c00','#2e7d32','#ad1457','#4527a0','#00695c','#d84315','#1b5e20','#6d4c41','#37474f','#ff6f00','#283593','#004d40','#bf360c','#4e342e','#0d47a1','#827717','#880e4f','#33691e','#e65100','#1a237e','#3e2723','#006064','#f57f17','#311b92','#01579b'];
// Deep-dive wheel palette — hoisted to module scope so drawWheel() doesn't reallocate this 32-entry array on every animation frame during a spin.
const DEEP_COLORS=['#004d40','#006064','#01579b','#0d47a1','#1a237e','#004d40','#00695c','#00838f','#0097a7','#00796b','#00897b','#1565c0','#283593','#003d5b','#005f73','#0a3d62','#1b4332','#2d6a4f','#0b525b','#3a506b','#1c3144','#0f4c5c','#274c77','#044a6e','#03312e','#023047','#1a535c','#184e77','#1b263b','#0d3b66','#14213d','#002855'];

// ── App themes: Default + Deep Dive ──
const APP_THEMES=[
  {key:'default',label:'Default',deepDive:false,bg:'#0d0d14',accent:'#e74c3c',vars:{}},
  {key:'deep-dive',label:'Deep Dive',deepDive:true,bg:'#020608',accent:'#00bcd4',vars:{}}
];

let activeThemeKey='default';

function applyAppTheme(key){
  const theme=APP_THEMES.find(t=>t.key===key)||APP_THEMES[0];
  activeThemeKey=theme.key;
  const root=document.documentElement;
  // Clear all theme vars then apply the new set
  const allVarKeys=new Set();
  APP_THEMES.forEach(t=>Object.keys(t.vars).forEach(v=>allVarKeys.add(v)));
  allVarKeys.forEach(v=>root.style.removeProperty(v));
  Object.entries(theme.vars).forEach(([v,val])=>root.style.setProperty(v,val));
  document.body.classList.toggle('deep-dive',!!theme.deepDive);
  localStorage.setItem('app_theme',key);
  document.querySelectorAll('.ts').forEach(p=>p.classList.toggle('active',p.dataset.key===key));
  // Update picker name label
  const nameEl=document.getElementById('tpActiveName');
  if(nameEl)nameEl.textContent=theme.label;
  // Redraw wheel if visible (spinner picks up new accent via CSS border)
  if(typeof drawWheel==='function'&&currentScreen==='wheel-screen')drawWheel();
}

function _themeSwatchHTML(t,activeKey){
  return`<button class="ts${t.key===activeKey?' active':''}" style="background:${t.bg}" data-key="${t.key}" onclick="applyAppTheme('${t.key}')"><div class="ts-name">${t.label}</div><div class="ts-bar" style="background:${t.accent}"></div></button>`;
}
function buildThemeGrid(){
  const wrap=document.getElementById('themeGrid');
  if(wrap)wrap.innerHTML=APP_THEMES.map(t=>_themeSwatchHTML(t,activeThemeKey)).join('');
}
// legacy alias
const buildThemePills=buildThemeGrid;

// 30 distinct spinner themes — the user picks via setup. "Carnival" is the original WHEEL_COLORS.
const WHEEL_THEMES={
  Carnival:WHEEL_COLORS,
  Pastels:['#f7c8c8','#f7e0c8','#f7f3c8','#dcf7c8','#c8f7d8','#c8f7ee','#c8e6f7','#c8cef7','#dcc8f7','#f0c8f7','#f7c8e0','#f7c8d0','#f5d3a3','#d7e9b8','#bfd9e8','#cdc1eb','#e6c2d4','#f3b89a','#a8d9c4','#c5b8e6','#f8d8b6','#cce4d4','#bcd0eb','#e8b9c2','#dac7ea','#a3d6dc','#f0e3a8','#cce0c0','#dbb8d6','#b6c9eb','#f3c1bd','#aac7e8'],
  Primaries:['#ff0000','#0000ff','#ffff00','#00ff00','#ff00ff','#00ffff','#ff8000','#8000ff','#0080ff','#80ff00','#ff0080','#00ff80','#cc0000','#0000cc','#cccc00','#00cc00','#cc00cc','#00cccc','#cc6600','#6600cc','#0066cc','#66cc00','#cc0066','#00cc66','#990000','#000099','#999900','#009900','#990099','#009999','#996600','#660099'],
  Mono:['#111','#222','#333','#444','#555','#666','#777','#888','#999','#aaa','#bbb','#ccc','#1a1a1a','#2a2a2a','#3a3a3a','#4a4a4a','#5a5a5a','#6a6a6a','#7a7a7a','#8a8a8a','#9a9a9a','#abacac','#bcbcbc','#cdcdcd','#202020','#303030','#404040','#505050','#606060','#707070','#808080','#909090'],
  Sunset:['#ff7e5f','#feb47b','#ff6b6b','#ee5a6f','#c06c84','#6c5b7b','#355c7d','#f67280','#fab1a0','#ff9a8b','#ffafbd','#ffc3a0','#ff8c42','#ffa384','#efd9d1','#dba27c','#c87f5c','#bb6147','#a04848','#7a3d3d','#5e2d2d','#ff5e62','#ff9966','#ff5f6d','#ffc371','#f6d365','#fda085','#f093fb','#fcb69f','#ffdde1','#ee9ca7','#cd9cf2'],
  Ocean:['#0077b6','#0096c7','#00b4d8','#48cae4','#90e0ef','#03045e','#023e8a','#0353a4','#0466c8','#62b6cb','#5e6973','#1a759f','#168aad','#34a0a4','#52b69a','#76c893','#99d98c','#1c5d99','#2a6f97','#1d3557','#457b9d','#a8dadc','#005f73','#0a9396','#94d2bd','#0e8388','#2e8a99','#003566','#0466b8','#13b5b1','#5fc8d1','#7edcd6'],
  Forest:['#2d6a4f','#40916c','#52b788','#1b4332','#081c15','#74c69d','#95d5b2','#b7e4c7','#d8f3dc','#3d5a40','#588157','#a3b18a','#dad7cd','#344e41','#283618','#606c38','#84a98c','#52796f','#354f52','#2f3e46','#cad2c5','#83a598','#458588','#689d6a','#b8bb26','#98971a','#427b58','#3a5a40','#4a7c59','#76946a','#598b2c','#788e57'],
  Neon:['#ff00ff','#00ffff','#ffff00','#39ff14','#ff073a','#fe019a','#bc13fe','#04d9ff','#fdfd00','#ff6ec7','#ccff00','#ff3131','#7df9ff','#ff5f1f','#08ff08','#fc0fc0','#9d00ff','#1bff00','#ff10f0','#19ffe6','#ffd300','#ff5050','#aaff00','#ee82ee','#3300cc','#ff00aa','#cc00ff','#00ff99','#ff66cc','#66ff66','#ff9933','#ccff33'],
  Earth:['#8b6f47','#a0826d','#b58863','#9c6b3f','#7a5230','#6b4423','#5a3a1f','#8a6b3b','#a08163','#b89368','#c1a580','#d4b896','#9b7e5a','#7c5e3c','#5d4226','#a37c5b','#bb9876','#967049','#7a5a3a','#5e442a','#94714c','#80583a','#6e4a2c','#a98a6b','#b89a78','#a17a5a','#866147','#704a31','#856743','#9b7e5e','#b09177','#c2a98c'],
  Candy:['#ff66b2','#ff99cc','#ff6699','#ff3385','#ffccff','#ff85c1','#ff5fa2','#ff007f','#ff44a8','#ffb1cb','#ff79ad','#ff60a8','#ffa3c8','#ff8eb3','#ff70b9','#ff5494','#ffd1dc','#ff9eb1','#ff80b3','#ff6ba0','#ffadcc','#ff85ad','#ff5586','#ff337a','#ffe4ec','#ffbfd4','#ff96b8','#ff6688','#ff4477','#ffaaaa','#ff8aa1','#ff708f'],
  Vaporwave:['#ff71ce','#01cdfe','#05ffa1','#b967ff','#fffb96','#ff9de2','#a685e2','#85deff','#94f9c5','#fff7c2','#ff8fff','#9b5fff','#5fc5ff','#5fffd1','#ffd95f','#ff5fb2','#7d5fff','#5f9bff','#5fffaa','#fff45f','#ff5f99','#7d63ff','#54a3ff','#54ffd1','#fff154','#ff75d8','#a875ff','#75d3ff','#75ffae','#fff575','#ff89d4','#9c5cff'],
  Autumn:['#a52a2a','#cd853f','#d2691e','#b8860b','#bf6f00','#a0522d','#8b4513','#704214','#5d2906','#7a3a0a','#9c4a14','#bd5e22','#dc7d2f','#e89942','#d18954','#a86829','#823f0f','#c25e1d','#e07b39','#f0a55a','#fac96d','#e9b870','#d8a85d','#b6802a','#945a1a','#723f0d','#5a2c08','#8b3a1c','#aa4f24','#c8693a','#dd824f','#ec9e6a'],
  Spring:['#ffafcc','#ffc8dd','#bde0fe','#a2d2ff','#cdb4db','#caf0f8','#90e0ef','#fcbf49','#f4978e','#f8ad9d','#fbc4ab','#ffdab9','#ddffe1','#a3d9b1','#bef0bb','#d4f4dd','#e0f7da','#fff5b8','#fff0cc','#fce5cd','#fbd6c0','#f6c9b4','#e8c7c8','#d8b9d8','#c5b6e2','#b3d4f5','#a3e4f0','#9adcd1','#bce4d8','#dee5b4','#f8d8a6','#fcc7a5'],
  Cyberpunk:['#ff0080','#7928ca','#00d4ff','#39ff14','#ff00ff','#ffd700','#ff003c','#0a00ff','#00ffea','#fc00ff','#fdff00','#ff5500','#9d00ff','#00aaff','#ff0066','#5e17eb','#00ffff','#ff8c00','#cc00ff','#0099ff','#ff1493','#7700ff','#00ff7f','#ff007f','#dd1414','#1a00ff','#00ddff','#ff00cc','#ff5e00','#aa00ff','#0fffff','#ff0033'],
  MardiGras:['#a020f0','#ffd700','#008000','#7d12a0','#dab600','#006400','#9c2bd6','#ffc107','#228b22','#8a2be2','#ddc01a','#1c8f1c','#aa3df0','#e8b800','#0a7a0a','#7c25b8','#fff034','#0db70d','#9333d8','#cea800','#157e15','#a44ed4','#ffec45','#3aa83a','#893cb8','#cfa514','#1c9c1c','#984ed8','#fbe04d','#308f30','#7338a8','#dabd1f'],
  Berry:['#3d0066','#660033','#990033','#330033','#6e0a4f','#8c1c5c','#ad2c6c','#5d0a52','#460a3a','#280028','#7d105a','#a02670','#3a004d','#5a0066','#6a3380','#5d0d4a','#88135a','#aa1d68','#400d40','#220033','#5e1a4a','#80285c','#a3346e','#3c0a32','#1f0026','#7e2266','#a83478','#5b0d4d','#9a1f6c','#c12d80','#3a002c','#530a3d'],
  Tropical:['#ff6f61','#feb236','#6b5b95','#88b04b','#f7cac9','#92a8d1','#955251','#b565a7','#ff5733','#33ff57','#3357ff','#ff33a1','#fdcb6e','#00b894','#0984e3','#fd79a8','#fab1a0','#55efc4','#74b9ff','#a29bfe','#ffeaa7','#81ecec','#fdca27','#e17055','#00cec9','#6c5ce7','#ffb84d','#26de81','#2bcbba','#fc5c65','#fed330','#fa8231'],
  Mute:['#7d7d7d','#8d8079','#9b8c75','#a89478','#a89e8b','#9d9b8e','#8e9d8a','#7d927d','#7c8c80','#84856d','#998c75','#a99c83','#b1a18b','#a59686','#90867f','#7e807d','#6f7775','#7e7867','#9d8b6e','#a99078','#b39a82','#a99481','#928176','#7b7271','#878783','#9c9085','#a89a85','#9b8a76','#867867','#80796d','#838171','#92907d'],
  Royal:['#ffd700','#9b1b30','#1a3e72','#1a4d2e','#003366','#660033','#1a5f3e','#daa520','#7b1538','#0d2849','#0d3b1a','#001a40','#4d0024','#0a4226','#b8860b','#5a0f24','#0a2454','#0a2d12','#001233','#3a0019','#085e2a','#cd9b1d','#7b1c30','#0e3464','#10402a','#012047','#5a0c1f','#0c5e36','#a07014','#660028','#0a3160','#003322'],
  Sunrise:['#ff9a8b','#ff6a88','#ff99ac','#ffc2c7','#fcb69f','#ffecd2','#fdfbfb','#fcedda','#ffd9a8','#ffaa86','#ff8484','#ffa07a','#ffd1aa','#fff1aa','#fde2af','#fbb89c','#f99898','#fc746e','#ff8c66','#ffb37a','#ffcc99','#ffe0b3','#fff5cc','#ffead0','#ffd6a3','#fb9b85','#f48072','#fcb997','#fbe2c8','#fcd2a4','#fab382','#ff8e64'],
  Mint:['#a5e1bd','#86d6a8','#69cb95','#4cc183','#3ac678','#56d3a0','#74dcb1','#92e3c0','#aff0d0','#cdf7e4','#3eb489','#56c79b','#6cd1ad','#82dabd','#9ae1cb','#b1ecda','#c8f3e7','#7fbf9d','#9bd1ad','#b6e2c1','#ccecd5','#dcf2e1','#5eaf85','#71b890','#82c69d','#94d0aa','#a7d9b8','#b8e1c4','#c8e9d0','#d6f0db','#e2f5e2','#eef9ea'],
  Crimson:['#8b0000','#b22222','#dc143c','#a52a2a','#800000','#660000','#4d0000','#7d0a0a','#a01515','#c21d22','#dc2828','#ec3838','#9c1414','#7c0c0c','#5c0606','#3d0000','#bf2828','#dc4040','#e85959','#a31818','#7e0e0e','#5d0808','#3a0000','#cd2828','#dd3636','#a91d1d','#831515','#5c0c0c','#3a0303','#dc1c3c','#bd1d33','#9d1828'],
  Ice:['#a8d8e8','#bce0ed','#d0e9f2','#e5f1f7','#cae5ee','#b1d8e6','#98c8db','#7eb8d0','#65a9c5','#4c99b9','#3389ae','#1a799f','#caf0f8','#90e0ef','#48cae4','#00b4d8','#e0ecf4','#c6deea','#abd0e0','#90c2d6','#76b3cc','#5ba5c2','#4096b8','#bee9ed','#9fdce3','#80cfd9','#62c2cf','#43b5c5','#26a8ba','#dfeff3','#c1dfe7','#a3cfdb'],
  Lava:['#ff0000','#ff4500','#ff6347','#ff8c00','#ffd700','#ff1100','#ee2200','#dd2500','#cc2900','#bc2c00','#ad2f00','#9d3300','#8e3600','#7e3a00','#6f3d00','#5f4100','#502d00','#3a0a00','#2a0500','#1a0000','#660000','#7c0a00','#9b1500','#b91f00','#d62a00','#f33500','#ff5500','#ff7f00','#ff9d00','#ffba00','#ffd900','#ffea00'],
  Galaxy:['#0b0033','#16004c','#240b66','#3a0c84','#5b1ea0','#7d35bf','#a352d6','#c46ce0','#d989e8','#e9a6ed','#f2c3f1','#0e0d3a','#1d144d','#2c1c63','#46297f','#623c9d','#8156bb','#a173d2','#c290e5','#dab0ee','#ecd0f5','#0a0535','#1c0e54','#2f1c75','#4b3098','#664bb5','#856bca','#9e8cdb','#b6abe6','#cccaee','#e0eaf3','#f1f6f9','#fffafa'],
  Jungle:['#1b4332','#2d6a4f','#40916c','#52b788','#74c69d','#95d5b2','#1a3300','#2b4d00','#3c6500','#4d7e00','#5e9700','#6faf00','#80c800','#92d900','#a4ec00','#b8ff00','#0d2818','#163b22','#1f4e2c','#286136','#317440','#3a874a','#439a54','#4cad5e','#55c068','#5ed372','#67e67c','#70f986','#1a2300','#2c3a00','#3e5200','#506a00'],
  Desert:['#edc9af','#deb887','#f4a460','#daa520','#cd853f','#d2691e','#b8860b','#a0522d','#8b4513','#7c5423','#a87a3c','#b58a4f','#c39964','#d1a878','#dfb78d','#ddc498','#dbd1a3','#d9deae','#c4cf99','#aebf85','#98af71','#83a05d','#cea888','#bb8a64','#a76d40','#94511c','#a4683a','#b48058','#c39777','#d3ae97','#e2c5b6','#cebda6'],
  Eighties:['#ff1493','#00ffff','#ffff00','#ff00ff','#ff6600','#9933ff','#33ccff','#ff3366','#66ff99','#ffcc00','#cc00ff','#0099ff','#ff66cc','#aaff00','#ff9966','#7700ff','#00ddff','#ff44aa','#bbff44','#ffaa33','#aa33ff','#33aaff','#ff77bb','#ccff55','#ffaa66','#8855ff','#22ccff','#ff5599','#ddff66','#ff8844','#9966ff','#44bbff'],
  Nineties:['#008080','#800080','#ff8c00','#000000','#7fff00','#dc143c','#ff1493','#0000cd','#ff4500','#9932cc','#00fa9a','#dc143c','#16a085','#8e44ad','#e67e22','#1c1c1c','#7cb342','#c2185b','#e91e63','#1565c0','#d84315','#6a1b9a','#0f9d58','#c2185b','#0e7c61','#7e3994','#cd5c0d','#0f0f0f','#88a428','#a31149','#cf003a','#0d4ea0'],
  Garden:['#ff6b9d','#fbb6ce','#c54b8c','#dda0dd','#9966cc','#7b68ee','#6495ed','#4682b4','#5f9ea0','#3cb371','#90ee90','#9acd32','#daa520','#ffd700','#f0e68c','#ffe4b5','#ffa07a','#fa8072','#ff7f50','#ff6347','#cd5c5c','#bc8f8f','#deb887','#d2691e','#bdb76b','#8fbc8f','#9370db','#ba55d3','#da70d6','#ee82ee','#dda0dd','#d8bfd8'],
  Royal2:['#0d1b2a','#1b263b','#415a77','#778da9','#e0e1dd','#000814','#001d3d','#003566','#ffc300','#ffd60a','#240046','#3c096c','#5a189a','#7b2cbf','#9d4edd','#c77dff','#e0aaff','#03071e','#370617','#6a040f','#9d0208','#d00000','#dc2f02','#e85d04','#f48c06','#faa307','#ffba08','#0a0908','#22333b','#5e503f','#a9927d','#f2f4f3'],
  Rainbow:['#ff0000','#ff4500','#ff8c00','#ffd700','#ffff00','#adff2f','#00ff00','#00ff7f','#00ffff','#1e90ff','#0000ff','#4b0082','#8a2be2','#ff00ff','#ff1493','#ff69b4','#ff6347','#ff7f50','#ffa500','#ffb6c1','#ffe4b5','#fffacd','#f0fff0','#e0ffff','#dda0dd','#d8bfd8','#ee82ee','#da70d6','#ba55d3','#9370db','#7b68ee','#4169e1']
};

// ═══════════════════════════════════
//  BINGO CATEGORIES (localStorage)
// ═══════════════════════════════════
const BINGO_CACHE_KEY='kvn_bingo_cats';
let BINGO_LIVE=[...BINGO_CATS]; // mutable flat list

function loadBingoCategories(){
  // 1. Check localStorage first (user's custom edits take priority)
  try{
    const cached=JSON.parse(localStorage.getItem(BINGO_CACHE_KEY)||'null');
    // Support both old format (object with B/I/N/G/O) and new format (flat array)
    if(Array.isArray(cached)&&cached.length>=24){BINGO_LIVE=cached;return}
    if(cached&&typeof cached==='object'&&cached.categories&&cached.categories.length>=24){BINGO_LIVE=cached.categories;return}
    // Migrate old per-letter format
    if(cached&&cached.B&&Array.isArray(cached.B)){BINGO_LIVE=[...cached.B,...cached.I,...cached.N,...cached.G,...cached.O];saveBingoCategories();return}
  }catch{}
  // 2. Try fetching bingo-categories.json
  fetchBingoJSON();
}

function parseBingoData(data){
  // Accept flat array or object with .categories array or old B/I/N/G/O format
  let cats=null;
  if(Array.isArray(data)&&data.length>=24)cats=data;
  else if(data&&data.categories&&Array.isArray(data.categories)&&data.categories.length>=24)cats=data.categories;
  else if(data&&data.B&&Array.isArray(data.B))cats=[...data.B,...(data.I||[]),...(data.N||[]),...(data.G||[]),...(data.O||[])];
  if(cats&&cats.length>=24){
    BINGO_LIVE=cats;
    buildBingo();
    console.log('Loaded bingo categories ('+cats.length+' total)');
    return true;
  }
  return false;
}

function showBingoWarning(){
  if(BINGO_LIVE.length>=24)return;
  const warn=document.createElement('div');
  warn.style.cssText='position:fixed;top:224px;left:50%;transform:translateX(-50%);z-index:999;background:rgba(243,156,18,.9);color:#111;padding:8px 18px;border-radius:8px;font-size:.75rem;font-weight:700;text-align:center;max-width:90vw';
  warn.innerHTML='bingo-categories.json not found. Place it next to this HTML file for full categories. <a href="https://github.com/sworrl/KVN_AUST" target="_blank" style="color:#1565c0">Download from GitHub</a> <button onclick="this.parentElement.remove()" style="margin-left:8px;background:none;border:none;font-size:1rem;cursor:pointer">&times;</button>';
  document.body.appendChild(warn);
}

async function fetchBingoJSON(){
  // Method 1: fetch() - works from https://, fails from file://
  try{
    const r=await fetch('bingo-categories.json?_='+Date.now());
    if(r.ok){const data=await r.json();if(parseBingoData(data))return}
  }catch{}

  // Method 2: XMLHttpRequest (sync) - works from file:// in most browsers
  try{
    const xhr=new XMLHttpRequest();
    xhr.open('GET','bingo-categories.json',false);// synchronous
    xhr.send();
    if(xhr.status===200||xhr.status===0){// status 0 = file:// success
      const data=JSON.parse(xhr.responseText);
      if(parseBingoData(data))return;
    }
  }catch{}

  // Method 3: dynamic script tag as last resort
  try{
    await new Promise((resolve,reject)=>{
      // Create a global callback the script can use
      window._bingoCatsLoaded=function(data){if(parseBingoData(data))resolve();else reject()};
      const s=document.createElement('script');
      s.src='bingo-categories.js';
      s.onerror=reject;
      s.onload=resolve;
      document.head.appendChild(s);
      setTimeout(reject,3000);
    });
    return;
  }catch{}

  // All fetch methods failed - use embedded categories from HTML
  try{
    const embedded=JSON.parse(document.getElementById('embedded-bingo-cats').textContent);
    if(parseBingoData(embedded)){console.log('Using embedded bingo categories');return}
  }catch{}

  console.log('bingo-categories.json: could not load');
  showBingoWarning();
}

function saveBingoCategories(){
  try{localStorage.setItem(BINGO_CACHE_KEY,JSON.stringify(BINGO_LIVE))}catch(e){logError('error','Failed to save bingo: '+e.message)}
}

// ═══════════════════════════════════
//  ERROR LOG SYSTEM
// ═══════════════════════════════════
function logError(type,msg){
  errorLog.push({type,msg,ts:new Date()});
  updateErrBadge();
  console.warn(`[${type}] ${msg}`);
}

function updateErrBadge(){
  const badge=document.getElementById('errBadge');
  const count=errorLog.length;
  badge.textContent=count;
  badge.classList.toggle('has',count>0);
}

function toggleErrPanel(){
  const panel=document.getElementById('errPanel');
  panel.classList.toggle('open');
  if(panel.classList.contains('open'))renderErrors();
}

function renderErrors(){
  const list=document.getElementById('errList');
  if(!errorLog.length){list.innerHTML='<div style="color:var(--muted);padding:8px">No errors</div>';return}
  list.innerHTML=errorLog.map(e=>
    `<div class="err-line ${e.type}">[${e.ts.toLocaleTimeString()}] ${e.type.toUpperCase()}: ${esc(e.msg)}</div>`
  ).join('');
}

function clearErrors(){errorLog=[];updateErrBadge();document.getElementById('errPanel').classList.remove('open')}

// ═══════════════════════════════════
//  INIT
// ═══════════════════════════════════
// Init runs at end of script (after all declarations)

// ═══════════════════════════════════
//  SCREEN NAV
// ═══════════════════════════════════
function showScreen(id){
  const prev=document.getElementById(currentScreen),next=document.getElementById(id);
  if(prev){prev.classList.remove('active');prev.classList.add('exit-left');setTimeout(()=>prev.classList.remove('exit-left'),500)}
  setTimeout(()=>next.classList.add('active'),80);
  currentScreen=id;
  const idx=SCREENS.indexOf(id);
  if(idx>maxReachedIdx)maxReachedIdx=idx;
  updateNavArrows();updateBingoBtn();
  saveGameState();
}

function updateNavArrows(){
  const idx=SCREENS.indexOf(currentScreen);
  // Back: from number(3) or result(4) back to format or number (never to wheel)
  const canBack=idx>=3&&idx<=4;
  // Forward: from format(2) to number(3) only if already reached, or number(3) to result(4) if reached
  const canFwd=idx>=2&&idx<=3&&(idx+1)<=maxReachedIdx;
  document.getElementById('navBack').classList.toggle('show',canBack);
  document.getElementById('navFwd').classList.toggle('show',canFwd);
}

function updateBingoBtn(){
  // Preserve the SVG icon — only relabel the inner .lbl span and the
  // title/aria-label. Previously this clobbered the whole button via
  // textContent which destroyed the icon and forced the long label
  // to wrap inside a 30x30 hdr-btn-icon, producing the cramped
  // two-line "Setup / Bingo" the tester flagged 2026-05-25.
  const btn=document.getElementById('bingoToggle');
  if(!btn)return;
  const lbl=btn.querySelector('.lbl');
  const active=!!gameActive;
  const text=active?'Bingo':'Setup Bingo';
  if(lbl)lbl.textContent=text;
  btn.title=text;
  btn.setAttribute('aria-label',text);
  btn.classList.toggle('active',active);
  btn.style.display='';
}

function handleBingoBtn(){
  if(gameActive){toggleBingo()}
  else{toggleBingoSetup()}
}

// Called directly after spin - bypasses nav guards
function advanceFromWheel(){
  if(chosenFormat&&chosenFormat.sp==='losespace'){triggerLoseSpace();return}
  showScreen('format-screen');showFormatReveal();
}

function goNext(){
  const idx=SCREENS.indexOf(currentScreen);if(idx<0)return;
  // Only allow forward from format-screen (2) or number-screen (3)
  if(idx!==2&&idx!==3)return;
  let next=idx+1;
  const isStatic=chosenFormat&&chosenFormat.sp==='static';
  if(next===3&&isStatic){chosenNumber='';next=4}
  if(next>=SCREENS.length)return;
  if(!isStatic&&next>maxReachedIdx+1)return; // static formats skip number screen, always allow
  showScreen(SCREENS[next]);
  if(SCREENS[next]==='format-screen')showFormatReveal();
  if(SCREENS[next]==='number-screen')setupNumberScreen();
  if(SCREENS[next]==='result-screen')showResult();
}

function goPrev(){
  const idx=SCREENS.indexOf(currentScreen);
  // Only allow back from format(2), number(3), result(4) - and never back past format
  if(idx<2||idx>4)return;
  const prev=idx-1;
  if(prev<2)return; // never go back to wheel or start
  showScreen(SCREENS[prev]);
}

// ═══════════════════════════════════
//  GAME MANAGEMENT
// ═══════════════════════════════════
function getAllGames(){try{return JSON.parse(localStorage.getItem('kvn_games')||'[]')}catch{return[]}}
function saveAllGames(g){localStorage.setItem('kvn_games',JSON.stringify(g))}

function genSpinDirHues(){
  const h1=Math.floor(Math.random()*360);
  const h2=(h1+100+Math.floor(Math.random()*80))%360;
  const h3=(h2+100+Math.floor(Math.random()*80))%360;
  document.documentElement.style.setProperty('--sd-h1',h1);
  document.documentElement.style.setProperty('--sd-h2',h2);
  document.documentElement.style.setProperty('--sd-h3',h3);
}
genSpinDirHues(); // seed colors immediately on load
const LL_MSGS=[
  'Fortune favors the left hand tonight.',
  'The wheel turns against fate…',
  'Rare forces are at work.',
  'Against all odds — going left.',
  'The universe bends counterclockwise.',
  'Left is a privilege. Spin it wisely.',
  'Chaos chooses the sinister path.',
  'One in ten. Today is that day.'
];
function showLuckyLefty(cb){
  const el=document.getElementById('luckyLefty');
  document.getElementById('llMsg').textContent=LL_MSGS[Math.floor(Math.random()*LL_MSGS.length)];
  el.style.display='flex';
  requestAnimationFrame(()=>requestAnimationFrame(()=>el.classList.add('show')));
  setTimeout(()=>{
    el.classList.remove('show');
    setTimeout(()=>{el.style.display='none';cb();},400);
  },2600);
}
function setSpinDir(dir){
  spinDir=dir;
  const cw=document.getElementById('sdiCW'),ccw=document.getElementById('sdiCCW');
  if(cw)cw.classList.toggle('active',dir===1);
  if(ccw)ccw.classList.toggle('active',dir===-1);
}
function startGame(){
  // Close setup panel if open
  if(document.getElementById('bingoSetup').classList.contains('open'))toggleBingoSetup();
  // Re-read setup options in case the user just changed them
  saveGameSetup();
  // Maybe rotate the wheel theme (new day, or 2 saved games elapsed)
  maybeRotateThemeOnStart();
  currentGameId=Date.now().toString(36)+Math.random().toString(36).slice(2,6);
  sessionRounds=[];bingoState=Array(25).fill(false);bingoWinShown=false;
  if(setupFreeSpace)bingoState[12]=true;
  gameActive=true;maxReachedIdx=1;usedFormats=new Set();
  genSpinDirHues();
  autoHideFooter();
  pickGameStamps(); // 25 unique SVG stamps for this game
  // Pick bingo data from BINGO_LIVE (which may have been edited)
  pickBingoCategories();
  buildBingoFromPicked();
  updateBingoBtn();
  showBingoFlash();
}

function saveGameToHistory(){
  if(!sessionRounds.length)return;
  clearGameState();
  const games=getAllGames();games.unshift({id:currentGameId,date:new Date().toISOString(),rounds:sessionRounds});
  if(games.length>50)games.length=50;saveAllGames(games);
  // Theme rotation counter: ≥2 saved games triggers a new theme on next startGame
  themeGamesSinceAssigned++;saveWheelTheme();
}

function startNextRound(){wheelAngle=0;chosenFormat=null;chosenNumber=null;finalString='';maxReachedIdx=1;currentSearchVideos=[];showScreen('wheel-screen');pickWheelFormats();drawWheel();resetPointer()}
function resetPointer(){const ptr=document.getElementById('wheelPointer');if(ptr){ptr.classList.remove('locked');ptr.style.animation='';ptr.style.top='';ptr.style.setProperty('--pointer-glow','transparent');ptr.style.setProperty('--pointer-inner','#444');const svg=ptr.querySelector('svg');if(svg)svg.style.transform='';void ptr.offsetHeight;ptr.style.animation='pointerIdle 2s ease-in-out infinite'}const pf=document.getElementById('ptrFill');if(pf)pf.setAttribute('stroke','#888');tickerAngle=0;tickerVelocity=0;}
function newSession(){clearGameState();sessionRounds=[];currentGameId=null;wheelAngle=0;chosenFormat=null;chosenNumber=null;finalString='';gameActive=false;maxReachedIdx=0;hasSpunOnce=false;document.getElementById('wheelTop').style.display='';resetTracker();showFooter();showScreen('start-screen')}

const GAME_STATE_KEY='kvn_mid_game';
function saveGameState(){
  if(!gameActive)return;
  try{
    sessionStorage.setItem(GAME_STATE_KEY,JSON.stringify({
      gameId:currentGameId,screen:currentScreen,
      chosenFormat:chosenFormat,chosenNumber:chosenNumber,finalString:finalString,
      sessionRounds:sessionRounds,usedFormatLabels:[...usedFormats],savedAt:Date.now(),
      searchVideos:currentSearchVideos.length?currentSearchVideos:undefined
    }));
  }catch{}
}
function clearGameState(){try{sessionStorage.removeItem(GAME_STATE_KEY)}catch{}}
function checkResumeGame(){
  let saved;
  try{saved=JSON.parse(sessionStorage.getItem(GAME_STATE_KEY)||'null')}catch{}
  if(!saved||Date.now()-saved.savedAt>86400000){clearGameState();return}
  const rounds=saved.sessionRounds?.length||0;
  const fmtLabel=saved.chosenFormat?.label||'';
  const srch=saved.finalString||'';
  if(!rounds&&!fmtLabel){clearGameState();return}
  const modal=document.createElement('div');
  modal.id='kvn-resume-modal';
  Object.assign(modal.style,{
    position:'fixed',inset:'0',background:'rgba(0,0,0,.82)',backdropFilter:'blur(6px)',
    zIndex:'999998',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'Inter,sans-serif'
  });
  modal.innerHTML=`
  <div style="background:#161625;border:1px solid #2a2a40;border-radius:16px;padding:24px;width:310px;max-width:90vw;
      box-shadow:0 20px 60px rgba(0,0,0,.7);color:#eee">
    <div style="text-align:center;margin-bottom:14px">
      <div style="font-size:24px;margin-bottom:4px">&#9889;</div>
      <h2 style="margin:0;font-size:16px;font-weight:700">Unfinished Game</h2>
      <p style="margin:5px 0 0;font-size:11px;color:#777">Page reloaded mid-game. Pick up where you left off?</p>
    </div>
    <div style="background:#0d0d14;border:1px solid #1e1e30;border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:12px;display:flex;flex-direction:column;gap:5px">
      <div style="display:flex;justify-content:space-between"><span style="color:#666">Rounds saved</span><span style="font-weight:700">${rounds}</span></div>
      ${fmtLabel?`<div style="display:flex;justify-content:space-between;gap:8px">
        <span style="color:#666;flex-shrink:0">Last format</span>
        <span style="color:#4fc3f7;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(fmtLabel)}</span>
      </div>`:''}
      ${srch?`<div style="display:flex;justify-content:space-between;gap:8px">
        <span style="color:#666;flex-shrink:0">Last search</span>
        <span style="color:#2ecc71;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(srch)}</span>
      </div>`:''}
    </div>
    <button id="kvn-resume-btn" style="width:100%;padding:11px;background:linear-gradient(135deg,#27ae60,#2ecc71);
        border:none;border-radius:8px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-bottom:8px">
      &#9889; Resume Game
    </button>
    <button id="kvn-newgame-btn" style="width:100%;padding:11px;background:transparent;
        border:1px solid #2a2a40;border-radius:8px;color:#888;font-weight:600;font-size:13px;cursor:pointer">
      &#9658; New Game
    </button>
  </div>`;
  document.body.appendChild(modal);
  document.getElementById('kvn-resume-btn').onclick=()=>{
    currentGameId=saved.gameId;
    sessionRounds=saved.sessionRounds||[];
    usedFormats=new Set(saved.usedFormatLabels||[]);
    gameActive=true;hasSpunOnce=true;
    document.getElementById('wheelTop').style.display='none';
    if(!loadBingoState())pickBingoCategories();
    buildBingoFromPicked();pickGameStamps();updateBingoBtn();
    genSpinDirHues();autoHideFooter();
    modal.remove();
    // If reloaded mid-round (format already chosen), restore result screen
    if(saved.chosenFormat){
      chosenFormat=saved.chosenFormat;
      chosenNumber=saved.chosenNumber;
      // Reconstruct finalString if not saved (e.g. reloaded on format/number screen before showResult ran)
      finalString=saved.finalString||(saved.chosenNumber!=null
        ?(chosenFormat.sp==='static'?chosenFormat.tpl:chosenFormat.tpl.replace('{V}',saved.chosenNumber))
        :'');
      maxReachedIdx=4;
      renderResultPill();updateEraChip();
      resetTracker();
      showScreen('result-screen'); // internally calls saveGameState — clear it after so no phantom resume prompt
      clearGameState();
      if(saved.searchVideos?.length){
        currentSearchVideos=saved.searchVideos;
        renderInlineResults();
      }else{
        setTimeout(browseResults,300);
      }
    } else {
      startNextRound(); // calls showScreen internally — clear after for same reason
      clearGameState();
    }
  };
  document.getElementById('kvn-newgame-btn').onclick=()=>{
    clearGameState();modal.remove();startGame();
  };
}

// ═══════════════════════════════════
//  BINGO FLASH (per-cell, ~5s, free space click)
// ═══════════════════════════════════
function showBingoFlash(){
  const flash=document.getElementById('bingoFlash'),grid=document.getElementById('bfGrid');
  grid.innerHTML='';grid.classList.remove('puzzle-mode');
  document.getElementById('bfFreeMsg').classList.remove('show');
  document.getElementById('bfContinue').classList.remove('show');
  const cols=['B','I','N','G','O'];
  const mSrc=getMosaicSrc();

  // 24 visible tiles + 1 invisible hole (cell 12 = FREE SPACE, hidden during puzzle)
  let cellEls=[];
  for(let i=0;i<25;i++){
    const row=Math.floor(i/5),ci=i%5,isFree=setupFreeSpace&&i===12;
    const txt=isFree?'FREE SPACE':bingoPicked[cols[ci]][row];
    const cell=document.createElement('div');
    cell.className='bf-cell'+(isFree?' free':'');
    if(isFree){
      cell.innerHTML=`<span style="position:relative;z-index:1">${esc(txt)}</span>`;
      cell.style.opacity='0';cell.style.pointerEvents='none';
      cell.onclick=function(){
        if(this.classList.contains('clicked'))return;
        this.classList.add('clicked');bingoState[12]=true;buildBingoFromPicked();
        const msg=document.getElementById('bfFreeMsg');
        msg.textContent=FREE_SPACE_PHRASES[Math.floor(Math.random()*FREE_SPACE_PHRASES.length)];
        msg.classList.add('show');setTimeout(()=>msg.classList.remove('show'),2800);
        document.getElementById('bfContinue').classList.add('show');playWinSound();
      };
    }else{
      cell.innerHTML=`<div class="mosaic-wrap"><img src="${mSrc}" style="left:${-(ci*100)}%;top:${-(row*100)}%" alt=""></div><span style="position:relative;z-index:1">${esc(txt)}</span>`;
    }
    grid.appendChild(cell);cellEls.push(cell);
  }

  function getAdj(s){const r=Math.floor(s/5),c=s%5,a=[];if(r>0)a.push(s-5);if(r<4)a.push(s+5);if(c>0)a.push(s-1);if(c<4)a.push(s+1);return a}

  // Scramble FROM center. Record each move as {from:holeWas, to:holeGoesTo}
  let board=[...Array(25).keys()];
  let emptySlot=12;
  let scrambleMoves=[]; // {from, to} - hole moves from→to, cell at to slides into from
  let prevEmpty=-1;
  const scrambleCount=35+Math.floor(Math.random()*16);
  for(let m=0;m<scrambleCount;m++){
    const adj=getAdj(emptySlot).filter(a=>a!==prevEmpty);
    const pick=adj[Math.floor(Math.random()*adj.length)];
    scrambleMoves.push({from:emptySlot,to:pick});
    board[emptySlot]=board[pick];board[pick]=12;
    prevEmpty=emptySlot;emptySlot=pick;
  }
  // Reverse = hole retraces path back to center (12)

  flash.classList.add('show');

  requestAnimationFrame(()=>{
    const gridRect=grid.getBoundingClientRect();
    const cW=gridRect.width/5||80,cH=gridRect.height/5||80;
    grid.classList.add('puzzle-mode');
    grid.style.width=(cW*5)+'px';grid.style.height=(cH*5)+'px';

    cellEls.forEach(c=>{c.style.width=cW+'px';c.style.height=cH+'px';c.style.transition='none'});
    for(let s=0;s<25;s++){
      const ci=board[s],x=(s%5)*cW,y=Math.floor(s/5)*cH;
      cellEls[ci].style.left=x+'px';cellEls[ci].style.top=y+'px';
    }

    // Phase 1: Reveal 24 visible tiles randomly (~1.5s)
    const visibleCells=[...Array(25).keys()].filter(i=>i!==12);
    shuffle(visibleCells);
    visibleCells.forEach((ci,i)=>setTimeout(()=>{cellEls[ci].classList.add('revealed');playTick(i/24)},80+i*55));

    // Phase 2: Solve via reversed scramble. 3s max.
    const revealDone=80+24*55+250;
    const MOVE_DUR=Math.min(75,Math.floor(3000/scrambleMoves.length));

    setTimeout(()=>{
      cellEls.forEach(c=>{c.style.transition=`left ${MOVE_DUR}ms ease, top ${MOVE_DUR}ms ease`});

      // Solve = scramble reversed. Each reversed move: hole goes from move.to back to move.from
      const solveMoves=[...scrambleMoves].reverse();
      let rb=[...board];let re=emptySlot;
      solveMoves.forEach((move,step)=>{
        setTimeout(()=>{
          // Hole is at re. Cell at move.from slides into re. Hole goes to move.from.
          const cellIdx=rb[move.from];
          rb[re]=cellIdx;rb[move.from]=12;
          cellEls[cellIdx].style.left=((re%5)*cW)+'px';
          cellEls[cellIdx].style.top=(Math.floor(re/5)*cH)+'px';
          cellEls[12].style.left=((move.from%5)*cW)+'px';
          cellEls[12].style.top=(Math.floor(move.from/5)*cH)+'px';
          re=move.from;
          if(step%3===0)playTick(step/solveMoves.length);
        },step*MOVE_DUR);
      });

      // After solve: hole is back at center (slot 12). Fade in FREE SPACE there.
      const solveDone=solveMoves.length*MOVE_DUR+150;
      setTimeout(()=>{
        playWinSound();
        // Free space is already positioned wherever the hole element was tracked.
        // Snap it to center explicitly.
        cellEls[12].style.transition='none';
        cellEls[12].style.left=(2*cW)+'px';cellEls[12].style.top=(2*cH)+'px';
        cellEls[12].offsetHeight;
        cellEls[12].style.transition='opacity 1s ease';
        cellEls[12].style.opacity='1';cellEls[12].style.pointerEvents='';cellEls[12].classList.add('revealed','free-shimmer');
        setTimeout(()=>{
          grid.classList.remove('puzzle-mode');grid.style.width='';grid.style.height='';
          cellEls.forEach((c,i)=>{
            c.style.width='';c.style.height='';c.style.left='';c.style.top='';c.style.transition='';
            const wd=(((i%5)+Math.floor(i/5))*0.15).toFixed(2);
            c.style.animation=i===12
              ?`bingoWave 4s ${wd}s ease-in-out infinite, freeShimmer 6s ease-in-out infinite`
              :`bingoWave 4s ${wd}s ease-in-out infinite`;
          });
        },300);
      },solveDone);
    },revealDone);
  });
}

function closeBingoFlash(){
  document.getElementById('bingoFlash').classList.remove('show');
  setTimeout(()=>{showScreen('wheel-screen');pickWheelFormats();drawWheel()},400);
}


// ═══════════════════════════════════
//  DOC FETCH
// ═══════════════════════════════════
// v7 bump (2026-05-25): tester reported "118 formats" on the
// wrapper when the live FORMAT-MAP.md actually parses to 266+.
// Diagnosis was stale localStorage cache carrying a snapshot from
// an older buggy parse. Bumping the cache key forces every
// browser worldwide to drop its cached parse on next page load
// and refetch from GitHub. Same trick anytime the parser logic
// or FORMAT-MAP.md schema changes shape — bump the version.
const DOC_CACHE_KEY='kvn_fmt_v20';
const DOC_CACHE_TS_KEY='kvn_fmt_ts_v20';
const DOC_CACHE_TTL=1000*60*30; // refresh from doc every 30 min

function loadCachedFormats(){
  try{
    const cached=JSON.parse(localStorage.getItem(DOC_CACHE_KEY)||'null');
    if(cached&&Array.isArray(cached)&&cached.length){
      const existing=new Set(ALL_FORMATS.map(f=>f.label));
      let added=0;
      for(const f of cached){if(!existing.has(f.label)){ALL_FORMATS.push(f);existing.add(f.label);added++}}
      if(added){formats=[...ALL_FORMATS];selectedFormats=new Set(formats.map((_,i)=>i));buildFormatPanel()}
      console.log(`Loaded ${cached.length} cached doc formats (${added} new)`);
    }
  }catch{}
}

function saveCachedFormats(docFormats){
  try{localStorage.setItem(DOC_CACHE_KEY,JSON.stringify(docFormats));localStorage.setItem(DOC_CACHE_TS_KEY,Date.now().toString())}catch{}
}

function isCacheStale(){
  try{
    if(!localStorage.getItem(DOC_CACHE_KEY))return true; // no content = always fetch
    const ts=parseInt(localStorage.getItem(DOC_CACHE_TS_KEY)||'0');
    return Date.now()-ts>DOC_CACHE_TTL;
  }catch{return true}
}

async function fetchDocFormats(){
  // Load from cache immediately
  loadCachedFormats();

  // If cache is fresh AND has enough formats, skip network fetch
  const cacheSize=ALL_FORMATS.length;
  if(!isCacheStale()&&cacheSize>=100){console.log(`Format cache is fresh (${cacheSize} formats), skipping fetch`);return}

  // file:// can still fetch from GitHub (CORS allows *)
  try{
    const r=await fetch(`${RAW_URL}/FORMAT-MAP.md?_=${Date.now()}`);
    if(r&&r.ok){
      const md=await r.text();
      const existing=new Set(ALL_FORMATS.map(f=>f.label));
      const fetched=[];
      let newCount=0;
      let curSection='numbered';
      // Parse markdown table rows
      for(const line of md.split('\n')){
        // Track section headings to categorize formats
        const secM=line.match(/^##\s+(.+)/);
        if(secM){
          const h=secM[1].toLowerCase();
          if(h.includes('ancient')||h.includes('old yt')||h.includes('early'))curSection='ancient';
          else if(h.includes('date'))curSection='date';
          else if(h.includes('ext'))curSection='extension';
          else if(h.includes('key')||h.includes('phrase'))curSection='keyphrase';
          else if(h.includes('special')||h.includes('hex'))curSection='special';
          else curSection='numbered';
          continue;
        }
        // Numbered formats: | `KEYPHRASEXXXX` | 0000-9999 | ...
        // Also matches digit-start like `4XXX`, `0XXXX.MTS`, `100 XXXX`
        // X{1,5}: single-X formats with a range column (MUSIC0X.DAT | 1-9) are real variables too.
        // Date-token labels are excluded — a leading literal X (XRecorder DDMMYYYY) plus a
        // years column would otherwise read as a numbered format and eat the X.
        const m=line.match(/\|\s*`((?:[^`X]|X(?!X))*)(X{1,5})([^`]*?)`\s*\|\s*(\d+)-(\d+)/);
        if(m&&!/YYYY|YYMMDD/.test(m[1]+m[2]+m[3])){
          const suffix=m[3]||''; // e.g. '.MTS', 'A', ''
          // Reject multi-variable formats: if the suffix still contains X's, the format
          // has more than one variable block (e.g. P1XX0XXX) and we can't auto-substitute.
          if(/X/.test(suffix))continue;
          const lbl=m[1]+m[2]+suffix;
          const hasSpace=m[1].endsWith(' ');
          const tpl=hasSpace?m[1].trimEnd()+' {V}'+suffix:m[1]+'{V}'+suffix;
          const lo=parseInt(m[4]),hi=parseInt(m[5]);
          if(lo<=hi){
            const fmt={label:lbl,tpl:tpl,min:lo,max:hi,pad:m[2].length,sec:curSection==='numbered'?'numbered':curSection};
            fetched.push(fmt);
            if(!existing.has(lbl)){ALL_FORMATS.push(fmt);existing.add(lbl);newCount++}
          }
          continue;
        }
        // Hex/alpha-range numbered formats: | `4XXX` | AAA-FFF, 000-999 |
        // | `MOL0XX` | A-F, 0-9 |  — each X is a hex digit (0-9 or A-F).
        const hm=line.match(/\|\s*`((?:[^`X]|X(?!X))*)(X{2,5})([^`]*?)`\s*\|\s*([A-F]+)-([A-F]+)/);
        if(hm){
          const suffix=hm[3]||'';
          if(/X/.test(suffix))continue; // multi-var, skip
          const lbl=hm[1]+hm[2]+suffix;
          const hasSpace=hm[1].endsWith(' ');
          const tpl=hasSpace?hm[1].trimEnd()+' {V}'+suffix:hm[1]+'{V}'+suffix;
          const fmt={label:lbl,tpl:tpl,sp:'hexN',pad:hm[2].length,sec:'special'};
          fetched.push(fmt);
          if(!existing.has(lbl)){ALL_FORMATS.push(fmt);existing.add(lbl);newCount++}
          continue;
        }
        // Special: "HHMMSS" time-of-day format
        const tm=line.match(/\|\s*`"?HHMMSS"?`\s*\|\s*(\d+)-(\d+)/);
        if(tm){
          if(!existing.has('"HHMMSS"')){
            ALL_FORMATS.push({label:'"HHMMSS"',tpl:'"{V}"',sp:'time',min:0,max:235959,pad:6,sec:'special'});
            fetched.push({label:'"HHMMSS"',tpl:'"{V}"',sp:'time',min:0,max:235959,pad:6,sec:'special'});
            existing.add('"HHMMSS"');newCount++;
          }
          continue;
        }
        // Small-range formats in Ancient YouTube: `Video0XX` (00-10) etc
        const ar=line.match(/\|\s*`([^`]+)`\s*\((\d+)-(\d+)\)/);
        if(ar){
          const lbl=ar[1];const lo=parseInt(ar[2]),hi=parseInt(ar[3]);
          if(!existing.has(lbl)&&lo<=hi){
            // Parse the variable part from XX pattern
            const xm=lbl.match(/(X+)/);const pad=xm?xm[1].length:2;
            const prefix=lbl.replace(/X+/,'{V}');
            ALL_FORMATS.push({label:lbl,tpl:prefix,min:lo,max:hi,pad:pad,sec:'ancient'});
            fetched.push({label:lbl,tpl:prefix,min:lo,max:hi,pad:pad,sec:'ancient'});
            existing.add(lbl);newCount++;
          }
          continue;
        }
        // Year clamps come from ">2013" / "<2018" markers, or a plain "2013-2019" years column
        const yearClamp=()=>{
          const minM=line.match(/>\s*(\d{4})/),maxM=line.match(/<\s*(\d{4})/);
          if(minM||maxM)return[minM?parseInt(minM[1]):2006,maxM?parseInt(maxM[1]):new Date().getFullYear(),!!minM];
          const rg=line.match(/\|\s*(\d{4})\s*-\s*(\d{4})\s*\|/);
          if(rg)return[parseInt(rg[1]),parseInt(rg[2]),true];
          return[2006,new Date().getFullYear(),false];
        };
        // Month-name date formats: `... Month D, YYYY ...` / `... Month DD, YYYY ...` / `... Month YYYY ...`
        // Must run BEFORE the generic YYYY branch or "Month D," survives as literal text in the search.
        const mo=line.match(/\|\s*`([^`]*Month (?:DD?, )?YYYY[^`]*)`\s*\|/);
        if(mo){
          const lbl=mo[1];
          if(!existing.has(lbl)){
            let[minY,maxY,hadClamp]=yearClamp();
            if(!hadClamp){minY=2007;maxY=2013} // Flip-camera / webcam era default
            const monthOnly=!/Month DD?,/.test(lbl);
            const tpl=lbl.replace(/Month DD?, YYYY|Month YYYY/,'{V}');
            const fmt={label:lbl,tpl:tpl,sp:'monthdate',mo:monthOnly,minY:minY,maxY:maxY,sec:'date'};
            ALL_FORMATS.push(fmt);fetched.push(fmt);
            existing.add(lbl);newCount++;
          }
          continue;
        }
        // Date-based formats: | `PREFIX YYYYMMDD` | >YYYY | ... OR just has YYYY in label
        const dm=line.match(/\|\s*`([^`]*YYYY[^`]*)`\s*\|/);
        if(dm){
          const lbl=dm[1];
          const[minY,maxY,hadClamp]=yearClamp();
          if(!existing.has(lbl)){
            // Detect how the date token is written so randDate emits the same shape
            let style='ymd8';
            if(lbl.includes('YYYYMMDD'))style='ymd8';
            else if(lbl.includes('DDMMYYYY'))style='dmy8';
            else if(lbl.includes('YYYY MM DD'))style='ymd_sp';
            else if(lbl.includes('YYYY-MM-DD'))style='ymd_dash';
            else if(lbl.includes('MM DD YYYY'))style='mdy_sp';
            else if(lbl.includes('YYYY MM'))style='ym_sp';
            else style='y';
            const tpl=lbl.replace('YYYYMMDD','{V}').replace('DDMMYYYY','{V}').replace('YYYY MM DD','{V}').replace('MM DD YYYY','{V}').replace('YYYY-MM-DD','{V}').replace('YYYY MM','{V}').replace('YYYY','{V}');
            const fmt={label:lbl,tpl:tpl,sp:'date',style:style,minY:minY,maxY:maxY,sec:'date'};
            ALL_FORMATS.push(fmt);fetched.push(fmt);
            existing.add(lbl);newCount++;
          }else{
            const ex=ALL_FORMATS.find(f=>f.label===lbl);
            if(ex&&ex.sp==='date'&&hadClamp){ex.minY=minY;ex.maxY=maxY}
          }
          continue;
        }
        // Two-digit-year compact dates without YYYY: | `720p YYMMDD` |
        const y6=line.match(/\|\s*`([^`]*YYMMDD[^`]*)`\s*\|/);
        if(y6){
          const lbl=y6[1];
          if(!existing.has(lbl)){
            const[minY,maxY]=yearClamp();
            const fmt={label:lbl,tpl:lbl.replace('YYMMDD','{V}'),sp:'date',style:'ymd6',minY:minY,maxY:maxY,sec:'date'};
            ALL_FORMATS.push(fmt);fetched.push(fmt);
            existing.add(lbl);newCount++;
          }
          continue;
        }
        // Short slash-date formats: | `My Montage MM/DD/YY` | — MM/DD/YY or MM/DD/YYYY.
        // Must run before the static catch-all or it'd be searched literally as "MM/DD/YY".
        const sd=line.match(/\|\s*`([^`]*MM\/DD\/YY(?:YY)?[^`]*)`\s*\|/);
        if(sd){
          const lbl=sd[1];
          if(!existing.has(lbl)){
            const yr4=/MM\/DD\/YYYY/.test(lbl);
            const tpl=lbl.replace(/MM\/DD\/YYYY|MM\/DD\/YY/,'{V}');
            const fmt={label:lbl,tpl:tpl,sp:'shortdate',yr4:yr4,minY:2006,maxY:new Date().getFullYear(),sec:'date'};
            ALL_FORMATS.push(fmt);fetched.push(fmt);
            existing.add(lbl);newCount++;
          }
          continue;
        }
        // Static keyphrases/extensions: | `"something"` | or | `.EXT` | — anything in backticks not caught above
        const sm=line.match(/\|\s*`([^`]{2,})`\s*\|/);
        // Skip entries whose label still contains X-blocks (templated formats with non-digit
        // ranges like `MOL0XX` (A-F, 0-9), `4XXX` (AAA-FFF), `Trim 4XXX` — historically these
        // got picked up as literal static keyphrases and the wheel searched for the X's verbatim.
        // Better to skip than to ship a broken search.
        if(sm&&!sm[1].match(/X{2,}|YYYY|format/i)){
          const lbl=sm[1];
          // Distinguish extensions (start with . or are uppercase alpha like .MP4) from keyphrases
          const isExt=curSection==='extension'||(curSection!=='keyphrase'&&/^\.[A-Z0-9]+$/.test(lbl));
          if(!existing.has(lbl)){
            const fmt={label:lbl,tpl:lbl,sp:'static',sec:isExt?'extension':'keyphrase'};
            ALL_FORMATS.push(fmt);fetched.push(fmt);
            existing.add(lbl);newCount++;
          }
        }
      }
      // Cache the FULL deduped set, not just `fetched` — the date/static/ancient/keyphrase
      // branches only add to `fetched` when the label is new, so on a refresh where the cache
      // already seeded `existing`, `fetched` collapses to the numbered/hex formats (~118) and
      // would truncate the cache. ALL_FORMATS always holds the complete set.
      saveCachedFormats(ALL_FORMATS);
      formats=[...ALL_FORMATS];selectedFormats=new Set(formats.map((_,i)=>i));buildFormatPanel();
      if(currentScreen==='wheel-screen'&&!spinning){pickWheelFormats();drawWheel()}
      console.log(`GitHub FORMAT-MAP: parsed ${fetched.length} formats, ${newCount} new`);
    }else{
      showToast('Format fetch failed - using cached formats','warn');
    }
  }catch(e){console.log('Format fetch:',e.message)}
}

// ═══════════════════════════════════
//  WHEEL (3D textured slices)
// ═══════════════════════════════════
// Pseudo-format that, when landed on, removes a random marked bingo space.
// Injected into wheelFormats only when bingo is active.
const LOSE_SPACE_FORMAT={label:'LOSE A SPACE',sp:'losespace',isPenalty:true};

function pickWheelFormats(){
  const raw=document.getElementById('wheelCount').value;
  const count=Math.max(4,Math.min(60,parseInt(raw,10)||20));
  let pool=wheelMode==='selected'?[...selectedFormats].map(i=>formats[i]).filter(Boolean):[...formats];
  shuffle(pool);
  if(qolPref('kvn_prefer_unspun')){const un=[],sp=[];for(const f of pool)(allTimeSpun.has(f.label)?sp:un).push(f);pool=un.concat(sp)}
  wheelFormats=pool.slice(0,count);if(wheelFormats.length<2)wheelFormats=formats.slice(0,count);
  // When bingo is active, sprinkle "LOSE A SPACE" penalty segments configured in setup (0 = off).
  // Skips injection if there are no marked spaces to lose, or if the wheel is too small to spare slots.
  const hasMarked=bingoState.some((v,i)=>v&&(!setupFreeSpace||i!==12));
  if(bingoPicked&&setupLoseSlots>0&&hasMarked&&wheelFormats.length>=4){
    const maxInject=Math.max(0,wheelFormats.length-2); // always leave at least 2 real formats
    const slots=Math.min(setupLoseSlots,maxInject);
    const used=new Set();
    for(let s=0;s<slots;s++){
      let idx;let tries=0;
      do{idx=Math.floor(Math.random()*wheelFormats.length);tries++}while(used.has(idx)&&tries<20);
      used.add(idx);
      wheelFormats[idx]={...LOSE_SPACE_FORMAT};
    }
  }
  //console.log(`Wheel: input="${raw}" count=${count} mode=${wheelMode} pool=${pool.length} showing=${wheelFormats.length}`);
  const sc=document.getElementById('wheelSlotCount');
  if(sc)sc.textContent=`Showing ${wheelFormats.length} of ${pool.length} formats`;
  updateWheelLegend();
}

function drawWheel(){
  const c=document.getElementById('wheelCanvas'),ctx=c.getContext('2d');
  const dpr=window.devicePixelRatio||1;
  if(c.width!==800*dpr){c.width=800*dpr;c.height=800*dpr}
  ctx.setTransform(dpr,0,0,dpr,0,0);
  const sz=800,cx=400,cy=400,r=390;
  const n=wheelFormats.length;if(!n)return;const arc=2*Math.PI/n;
  ctx.clearRect(0,0,sz,sz);ctx.save();ctx.translate(cx,cy);ctx.rotate(wheelAngle);ctx.translate(-cx,-cy);
  activeWheelColors=deepDiveActive?DEEP_COLORS:(WHEEL_THEMES[currentWheelTheme]||WHEEL_COLORS);
  const colors=activeWheelColors;
  // Pass 1: fill all segments (no strokes yet — prevents bleed-through)
  for(let i=0;i<n;i++){
    const a=i*arc;
    ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,r,a,a+arc);ctx.closePath();
    // Penalty segments get a danger-red so the player can see them coming
    ctx.fillStyle=wheelFormats[i].isPenalty?'#8b0000':(wheelCatColor&&!deepDiveActive?(SEC_COLORS[wheelFormats[i].sec]||'#7f8c8d'):colors[i%colors.length]);ctx.fill();
  }
  // Pass 2: depth overlay on all segments
  const grad=ctx.createRadialGradient(cx,cy,r*.1,cx,cy,r);
  grad.addColorStop(0,'rgba(255,255,255,.14)');grad.addColorStop(.4,'rgba(255,255,255,.04)');grad.addColorStop(.75,'rgba(0,0,0,.08)');grad.addColorStop(1,'rgba(0,0,0,.25)');
  ctx.beginPath();ctx.arc(cx,cy,r,0,2*Math.PI);ctx.fillStyle=grad;ctx.fill();
  // Pass 3: segment divider lines (clean, on top of fills)
  for(let i=0;i<n;i++){
    const a=i*arc;
    ctx.beginPath();ctx.moveTo(cx,cy);
    ctx.lineTo(cx+Math.cos(a)*r,cy+Math.sin(a)*r);
    ctx.strokeStyle='rgba(0,0,0,.35)';ctx.lineWidth=1.5;ctx.stroke();
  }
  // Pass 4: text (last, on top of everything)
  for(let i=0;i<n;i++){
    const a=i*arc;
    ctx.save();ctx.translate(cx,cy);ctx.rotate(a+arc/2);
    ctx.textAlign='right';ctx.fillStyle='#fff';
    const fs=Math.min(20,Math.max(11,500/n));
    ctx.font=`bold ${fs}px Inter`;ctx.shadowColor='rgba(0,0,0,.95)';ctx.shadowBlur=4;ctx.shadowOffsetX=1;ctx.shadowOffsetY=1;
    ctx.fillText(wheelFormats[i].label,r-18,fs/3);ctx.shadowBlur=0;ctx.shadowOffsetX=0;ctx.shadowOffsetY=0;
    // Red dot for previously used formats
    if(usedFormats.has(wheelFormats[i].label)){
      ctx.beginPath();ctx.arc(r-10,-fs/2-4,4,0,2*Math.PI);ctx.fillStyle='#ff1744';ctx.fill();
      ctx.strokeStyle='rgba(0,0,0,.5)';ctx.lineWidth=1;ctx.stroke();
    }
    ctx.restore();
  }
  ctx.restore();
  // Metallic outer bezel
  const bezel=ctx.createLinearGradient(cx-r,cy-r,cx+r,cy+r);
  bezel.addColorStop(0,'#666');bezel.addColorStop(.25,'#aaa');bezel.addColorStop(.45,'#ddd');bezel.addColorStop(.55,'#ddd');bezel.addColorStop(.75,'#aaa');bezel.addColorStop(1,'#666');
  ctx.beginPath();ctx.arc(cx,cy,r+3,0,2*Math.PI);ctx.strokeStyle=bezel;ctx.lineWidth=7;ctx.stroke();
  // Inner shadow ring
  ctx.beginPath();ctx.arc(cx,cy,r-1,0,2*Math.PI);ctx.strokeStyle='rgba(0,0,0,.4)';ctx.lineWidth=2;ctx.stroke();
  // Center hub
  ctx.beginPath();ctx.arc(cx,cy,74,0,2*Math.PI);
  const co=ctx.createRadialGradient(cx-10,cy-10,8,cx,cy,74);
  co.addColorStop(0,'#3a3a48');co.addColorStop(.25,'#252530');co.addColorStop(.6,'#161620');co.addColorStop(1,'#0a0a12');
  ctx.fillStyle=co;ctx.fill();
  // Metallic hub ring
  const cr=ctx.createLinearGradient(cx-74,cy,cx+74,cy);
  cr.addColorStop(0,'#444');cr.addColorStop(.35,'#888');cr.addColorStop(.5,'#aaa');cr.addColorStop(.65,'#888');cr.addColorStop(1,'#444');
  ctx.strokeStyle=cr;ctx.lineWidth=3;ctx.stroke();
  // Hub specular
  ctx.beginPath();ctx.arc(cx-14,cy-16,16,0,2*Math.PI);
  const ch=ctx.createRadialGradient(cx-14,cy-16,1,cx-14,cy-16,16);
  ch.addColorStop(0,'rgba(255,255,255,.18)');ch.addColorStop(1,'rgba(255,255,255,0)');
  ctx.fillStyle=ch;ctx.fill();
}

let hasSpunOnce=false;
let activeWheelColors=WHEEL_COLORS;

// Determine which segment index is under the pointer (top = 3*PI/2 in screen space)
function getSegmentAtPointer(){
  const n=wheelFormats.length;if(!n)return 0;
  const arc=2*Math.PI/n;
  // Normalize wheelAngle to [0, 2*PI)
  const a=((wheelAngle%((2*Math.PI)))+2*Math.PI)%(2*Math.PI);
  // The pointer is at screen angle 3*PI/2 (top). A segment drawn at angle i*arc
  // appears at screen angle i*arc + wheelAngle. So the unrotated angle at the pointer is:
  const pointerAngle=((3*Math.PI/2-a)%(2*Math.PI)+2*Math.PI)%(2*Math.PI);
  return Math.floor(pointerAngle/arc)%n;
}

function spinWheel(){
  if(spinning)return;
  // ~10% chance CCW (Lucky Lefty)
  setSpinDir(Math.random()<0.10?-1:1);
  spinning=true;lastTickSegment=-1;tickerAngle=0;tickerVelocity=0;
  if(!hasSpunOnce){hasSpunOnce=true;document.getElementById('wheelTop').style.display='none'}
  const btn=document.getElementById('spinBtn');btn.style.pointerEvents='none';btn.classList.add('spinning');
  setTimeout(()=>btn.classList.remove('spinning'),300);
  const n=wheelFormats.length;
  const arc=2*Math.PI/n;

  // Pick a target segment, avoiding repeats unless allowed
  let ci;
  if(!allowRepeatFormats){
    const unused=[];for(let i=0;i<n;i++)if(!usedFormats.has(wheelFormats[i].label))unused.push(i);
    ci=unused.length?unused[Math.floor(Math.random()*unused.length)]:Math.floor(Math.random()*n);
  }else{ci=Math.floor(Math.random()*n)}

  // Calculate the final angle where segment ci's center is at 3*PI/2 (pointer)
  // Screen position of segment ci center = ci*arc + arc/2 + wheelAngle
  // We need: ci*arc + arc/2 + finalAngle ≡ 3*PI/2 (mod 2*PI)
  // So: finalAngle ≡ 3*PI/2 - ci*arc - arc/2 (mod 2*PI)
  const targetRest=((3*Math.PI/2-ci*arc-arc/2)%(2*Math.PI)+2*Math.PI)%(2*Math.PI);
  // CW: travel forward to targetRest; CCW: travel backward (negative) to reach same rest angle
  const distCW=((targetRest-wheelAngle)%(2*Math.PI)+2*Math.PI)%(2*Math.PI);
  const distCCW=((wheelAngle-targetRest)%(2*Math.PI)+2*Math.PI)%(2*Math.PI);
  const dist=spinDir===1?distCW:distCCW;
  const fullSpins=(5+Math.random()*4)*2*Math.PI;
  const target=fullSpins+dist;
  const dir=spinDir;
  function doSpin(){
  const start=wheelAngle,dur=(4200+Math.random()*1800)*(reduceMotionOn()?0.3:1),t0=performance.now();
  const ptr=document.getElementById('wheelPointer');
  const ptrSvg=ptr?ptr.querySelector('svg'):null;
  (function anim(now){
    const p=Math.min((now-t0)/dur,1);wheelAngle=start+dir*target*(1-Math.pow(1-p,5));drawWheel();
    // Tick sound on segment change
    const curSeg=Math.floor(((wheelAngle%(2*Math.PI))+2*Math.PI)%(2*Math.PI)/arc)%n;
    if(curSeg!==lastTickSegment){
      lastTickSegment=curSeg;playTick(1-p);
      // Pulse pointer with segment color + spring impulse
      const segColor=activeWheelColors[curSeg%activeWheelColors.length];
      if(ptr){
        ptr.style.setProperty('--pointer-glow',segColor);ptr.style.setProperty('--pointer-inner',segColor);
        tickerVelocity+=dir*(1-p)*8;
      }
      const ptrFill=document.getElementById('ptrFill');
      if(ptrFill)ptrFill.setAttribute('stroke',segColor);
    }
    tickerVelocity+=-0.22*tickerAngle;tickerVelocity*=0.76;tickerAngle+=tickerVelocity;
    if(ptrSvg)ptrSvg.style.transform=`rotate(${tickerAngle.toFixed(2)}deg)`;
    if(p<1)requestAnimationFrame(anim);
    else{
      spinning=false;btn.style.pointerEvents='';
      // Read the ACTUAL segment under the pointer — what you see is what you get
      const landed=getSegmentAtPointer();
      chosenFormat=wheelFormats[landed];
      // Don't track penalty segments as "used formats" — they can land repeatedly
      if(!chosenFormat.isPenalty){usedFormats.add(chosenFormat.label);allTimeSpun.add(chosenFormat.label);try{localStorage.setItem('kvn_spun_labels',JSON.stringify([...allTimeSpun]))}catch{}}
      // Lock pointer — bite down into segment
      const landedColor=activeWheelColors[landed%activeWheelColors.length];
      const ptr=document.getElementById('wheelPointer');
      if(ptr){ptr.style.setProperty('--pointer-glow',landedColor);ptr.style.setProperty('--pointer-inner',landedColor);ptr.classList.add('locked')}
      const pf=document.getElementById('ptrFill');
      if(pf)pf.setAttribute('stroke',landedColor);
      // Skip the celebratory win sound on penalty landings — triggerLoseSpace plays its own sound
      if(!chosenFormat.isPenalty)playWinSound();
      setTimeout(advanceFromWheel,700);
    }
  })(performance.now());
  } // end doSpin
  if(dir===-1){showLuckyLefty(doSpin);}else{doSpin();}
}

function rebuildWheel(){pickWheelFormats();wheelAngle=0;drawWheel()}
function setWheelMode(m){wheelMode=m;document.getElementById('modeRandom').classList.toggle('active',m==='random');document.getElementById('modeSelected').classList.toggle('active',m==='selected');if(currentScreen==='wheel-screen')rebuildWheel()}

// Deep Dive mode: filters for old-video formats + appends Before: to searches
let deepDiveActive=false;
const DEEP_DIVE_YEAR=2010;
// Formats known to surface old/ancient videos
const DEEP_DIVE_LABELS=new Set(['IMG XXXX','MVI XXXX','MOV XXXX','DSC XXXX','DSCFXXXX','DSCNXXXX','100 XXXX','SAM XXXX','GOPRXXXX','VideoXXXX','MAQ0XXXX','PICTXXXX','XXXX.MP4','M2U0XXXX','MAH0XXXX','HPIMXXXX','GEDCXXXX','SANYXXXX','VID0XXXX','MOV0XXXX','IMGPXXXX','CIMGXXXX','P100XXXX','PC10XXXX','AVSEQXX','Trim 4XXX','"HHMMSS"','VID YYYYMMDD','Capture YYYYMMDD','WIN YYYYMMDD','WP YYYYMMDD','Webcam YYYYMMDD','"You have new picture mail! (video)"','"Media1.3gp"','"Media1.3g2"','"Video.3g2"','"New Multimedia Message"','"Multimedia Message"','"Video from my phone"','"Video uploaded from my mobile phone"','"Sent from my blackberry smartphone"','"My Ezvid Video"','"This video was uploaded from an Android phone"','"Sprint PictureMail"','"My stop motion movie"','"My Great Movie"','"My First Project"','"Qik"','"Made with One True Media"','"Jing"','"My Slideshow Video"','"My Stupeflix Video"','"My Videolicious Video"','".VOB"','".AVI"','".WMV"','".3gp"','".3g2"']);

function toggleDeepDive(){
  deepDiveActive=!deepDiveActive;
  document.getElementById('modeDeepDive').classList.toggle('active',deepDiveActive);

  if(deepDiveActive){
    // Anchor drop wipe IN
    const wipe=document.createElement('div');wipe.className='anchor-wipe';
    // Build premium wipe with water texture, sonar rings, splash droplets, particles
    let wipeHtml='<div class="anchor-bg"></div><div class="water-surface"></div>';
    wipeHtml+='<div class="anchor-rings"></div><div class="anchor-rings"></div><div class="anchor-rings"></div>';
    // Splash droplets flying up from where the anchor hits
    for(let i=0;i<8;i++){
      const x=40+Math.random()*20,sz=4+Math.random()*8,d=.6+Math.random()*.6,delay=.85+Math.random()*.3;
      wipeHtml+=`<div class="splash-drop" style="left:${x}%;bottom:45%;width:${sz}px;height:${sz}px;animation-duration:${d}s;animation-delay:${delay}s"></div>`;
    }
    wipeHtml+='<div class="anchor-particles">';
    for(let i=0;i<25;i++){const x=Math.random()*100,d=.5+Math.random()*1.5,delay=Math.random()*1.2;
      wipeHtml+=`<div class="anchor-particle" style="left:${x}%;bottom:${Math.random()*50}%;animation-duration:${d}s;animation-delay:${delay}s"></div>`}
    wipeHtml+='</div>';
    wipeHtml+='<div class="anchor-icon">&#9875;</div><div class="anchor-text">DEEP DIVE</div><div class="anchor-sub">SEARCHING THE ABYSS</div><div class="anchor-splash"></div>';
    wipe.innerHTML=wipeHtml;
    document.body.appendChild(wipe);
    playAnchorDrop();

    // Apply theme at the midpoint of the wipe (when screen is covered)
    setTimeout(()=>{
      document.body.classList.add('deep-dive');
      prevSoundMode=soundMode;
      soundMode='nautical';document.getElementById('soundPick').value='nautical';
      selectedFormats.clear();
      formats.forEach((f,i)=>{
        if(DEEP_DIVE_LABELS.has(f.label))selectedFormats.add(i);
        if(f.sp==='date'&&(f.minY||2006)<2013)selectedFormats.add(i);
        if(f.sp==='static'&&DEEP_DIVE_LABELS.has(f.label))selectedFormats.add(i);
      });
      wheelMode='selected';
      document.getElementById('modeSelected').classList.add('active');
      document.getElementById('modeRandom').classList.remove('active');
      buildFormatPanel();rebuildWheel();startBubbles();
    },600);

    // Remove wipe overlay after animation completes
    setTimeout(()=>{wipe.remove();showToast(`Deep Dive: ${selectedFormats.size} formats, Before:${DEEP_DIVE_YEAR}`);markAchievement('deepdive');checkAchievements()},1800);

  }else{
    // Anchor rising wipe OUT
    const wipe=document.createElement('div');wipe.className='anchor-wipe rising';
    wipe.innerHTML='<div class="anchor-bg"></div><div class="anchor-icon">&#9875;</div><div class="anchor-text"></div>';
    document.body.appendChild(wipe);

    setTimeout(()=>{
      document.body.classList.remove('deep-dive');
      const restore=prevSoundMode||localStorage.getItem('kvn_sound')||'tick';
      setSound(restore);document.getElementById('soundPick').value=restore;
      wheelMode='random';
      document.getElementById('modeRandom').classList.add('active');
      document.getElementById('modeSelected').classList.remove('active');
      selectedFormats=new Set(formats.map((_,i)=>i));
      buildFormatPanel();rebuildWheel();stopBubbles();
    },500);

    setTimeout(()=>{wipe.remove();showToast('Normal mode')},1200);
  }
}
let prevSoundMode=null;

// ═══════════════════════════════════
//  BUBBLE PHYSICS (Deep Dive mode)
// ═══════════════════════════════════
let bubbles=[];let bubbleAnim=null;let popParticles=[];let bubbleResizeHandler=null;
const MAX_BUBBLES=60;

function spawnBubble(W,H){
  const hue=170+Math.random()*40; // teal-cyan range
  return{
    x:Math.random()*W,
    y:H+Math.random()*50,
    r:2+Math.random()*16,
    vx:(Math.random()-.5)*.4,
    vy:-(0.3+Math.random()*1.0),
    wobbleAmp:0.4+Math.random()*0.8,
    wobbleFreq:0.008+Math.random()*0.02,
    wobblePhase:Math.random()*Math.PI*2,
    opacity:0.12+Math.random()*0.3,
    hue:hue,
    age:0
  };
}

function playBubblePop(){
  if(!audioUnlocked)return;
  try{
    const ctx=getAudioCtx();const t=ctx.currentTime;
    // Short pop: filtered noise burst + high ping
    const buf=ctx.createBuffer(1,ctx.sampleRate*.08,ctx.sampleRate);
    const d=buf.getChannelData(0);for(let i=0;i<d.length;i++)d[i]=(Math.random()*2-1)*Math.exp(-i/(ctx.sampleRate*.02));
    const n=ctx.createBufferSource();n.buffer=buf;
    const bp=ctx.createBiquadFilter();bp.type='highpass';bp.frequency.value=3000;
    const g=ctx.createGain();g.gain.setValueAtTime(.06,t);g.gain.exponentialRampToValueAtTime(.001,t+.08);
    n.connect(bp);bp.connect(g);g.connect(ctx.destination);n.start(t);
    // Tiny ping
    const o=ctx.createOscillator();const og=ctx.createGain();o.connect(og);og.connect(ctx.destination);
    o.type='sine';o.frequency.value=1800+Math.random()*600;
    og.gain.setValueAtTime(.03,t);og.gain.exponentialRampToValueAtTime(.001,t+.06);
    o.start(t);o.stop(t+.06);
  }catch{}
}

function popBubbleAt(mx,my){
  for(let i=bubbles.length-1;i>=0;i--){
    const b=bubbles[i];
    const dx=b.x-mx,dy=b.y-my;
    if(dx*dx+dy*dy<(b.r+8)*(b.r+8)){
      // Spawn pop particles
      const count=6+Math.floor(b.r);
      for(let j=0;j<count;j++){
        const angle=Math.PI*2*j/count+Math.random()*.5;
        const speed=1+Math.random()*3;
        popParticles.push({x:b.x,y:b.y,vx:Math.cos(angle)*speed,vy:Math.sin(angle)*speed,
          r:1+Math.random()*2,life:1,hue:b.hue});
      }
      bubbles.splice(i,1);
      playBubblePop();trackBubblePop();checkAchievements();
      return true;
    }
  }
  return false;
}

// Click listener for bubble popping (on document, checks position)
document.addEventListener('click',function(e){
  if(!deepDiveActive)return;
  if(popBubbleAt(e.clientX,e.clientY))e.stopPropagation();
},{capture:true});

function startBubbles(){
  const c=document.getElementById('bubbleCanvas');
  if(!c)return;
  const dpr=window.devicePixelRatio||1;
  function resize(){
    c.width=window.innerWidth*dpr;c.height=window.innerHeight*dpr;
    c.style.width=window.innerWidth+'px';c.style.height=window.innerHeight+'px';
  }
  resize();
  if(bubbleResizeHandler)window.removeEventListener('resize',bubbleResizeHandler); // drop a stale handler if startBubbles ran without stopBubbles
  bubbleResizeHandler=resize;window.addEventListener('resize',resize);
  const ctx=c.getContext('2d');
  bubbles=[];popParticles=[];
  for(let i=0;i<MAX_BUBBLES;i++)bubbles.push(spawnBubble(window.innerWidth,window.innerHeight));
  bubbles.forEach(b=>{b.y=Math.random()*window.innerHeight});

  function frame(){
    if(!deepDiveActive){bubbleAnim=null;return}
    const W=window.innerWidth,H=window.innerHeight;
    ctx.setTransform(dpr,0,0,dpr,0,0);
    ctx.clearRect(0,0,W,H);

    // Spawn new bubbles from bottom
    if(bubbles.length<MAX_BUBBLES&&Math.random()<.15)bubbles.push(spawnBubble(W,H));

    for(let i=bubbles.length-1;i>=0;i--){
      const b=bubbles[i];
      b.age++;
      b.y+=b.vy;
      b.x+=b.vx+Math.sin(b.age*b.wobbleFreq+b.wobblePhase)*b.wobbleAmp;
      b.vy-=0.001;
      if(b.y<-b.r*2){bubbles.splice(i,1);continue}
      if(b.x<-b.r)b.x=W+b.r;
      if(b.x>W+b.r)b.x=-b.r;
      const fadeZone=H*0.15;
      const alpha=b.y<fadeZone?b.opacity*(b.y/fadeZone):b.opacity;

      // Outer ring with rainbow refraction
      ctx.beginPath();ctx.arc(b.x,b.y,b.r,0,Math.PI*2);
      ctx.strokeStyle=`hsla(${b.hue+b.age*.3},70%,70%,${alpha*1.2})`;ctx.lineWidth=b.r>8?1.5:1;ctx.stroke();
      // Glass gradient with hue
      const g=ctx.createRadialGradient(b.x-b.r*.3,b.y-b.r*.3,b.r*.05,b.x,b.y,b.r);
      g.addColorStop(0,`hsla(${b.hue+10},80%,90%,${alpha*.5})`);
      g.addColorStop(.3,`hsla(${b.hue},60%,65%,${alpha*.18})`);
      g.addColorStop(.7,`hsla(${b.hue-10},50%,50%,${alpha*.06})`);
      g.addColorStop(1,`hsla(${b.hue-20},40%,40%,${alpha*.02})`);
      ctx.fillStyle=g;ctx.fill();
      // Primary specular
      ctx.beginPath();ctx.arc(b.x-b.r*.25,b.y-b.r*.3,b.r*.3,0,Math.PI*2);
      ctx.fillStyle=`rgba(255,255,255,${alpha*.5})`;ctx.fill();
      // Secondary highlight
      if(b.r>6){ctx.beginPath();ctx.arc(b.x+b.r*.15,b.y+b.r*.2,b.r*.12,0,Math.PI*2);
      ctx.fillStyle=`hsla(${b.hue+30},80%,85%,${alpha*.2})`;ctx.fill()}
      // Rainbow edge refraction on large bubbles
      if(b.r>10){
        ctx.beginPath();ctx.arc(b.x,b.y,b.r*.92,Math.PI*.8,Math.PI*1.4);
        ctx.strokeStyle=`hsla(${b.hue+60+b.age*.5},90%,75%,${alpha*.3})`;ctx.lineWidth=1.5;ctx.stroke();
      }
    }

    // Draw pop particles
    for(let i=popParticles.length-1;i>=0;i--){
      const p=popParticles[i];
      p.x+=p.vx;p.y+=p.vy;p.vy+=.05;p.life-=.03;
      if(p.life<=0){popParticles.splice(i,1);continue}
      ctx.globalAlpha=p.life;
      ctx.beginPath();ctx.arc(p.x,p.y,p.r*p.life,0,Math.PI*2);
      ctx.fillStyle=`hsla(${p.hue},80%,75%,${p.life})`;ctx.fill();
      ctx.globalAlpha=1;
    }

    bubbleAnim=requestAnimationFrame(frame);
  }
  bubbleAnim=requestAnimationFrame(frame);
}

function stopBubbles(){
  if(bubbleAnim){cancelAnimationFrame(bubbleAnim);bubbleAnim=null}
  if(bubbleResizeHandler){window.removeEventListener('resize',bubbleResizeHandler);bubbleResizeHandler=null}
  bubbles=[];popParticles=[];
  const c=document.getElementById('bubbleCanvas');
  if(c){const ctx=c.getContext('2d');ctx.clearRect(0,0,c.width,c.height)}
}

// ═══════════════════════════════════
//  FORMAT / NUMBER / RESULT
// ═══════════════════════════════════
function showFormatReveal(){
  const b=document.getElementById('formatBanner'),f=chosenFormat;if(!f)return;
  // Build the final HTML to reveal
  let finalHtml;
  if(f.sp==='static')finalHtml=`<span>${esc(f.tpl)}</span>`;
  else if(f.sp==='date'){const pre=f.tpl.replace('{V}','');finalHtml=(pre?`<span>${esc(pre)}</span>`:'') +`<span class="vp">YYYY</span><span class="rng"> (${f.minY||2006}–${f.maxY||2026})</span><span class="vp"> MMDD</span><span class="rng"> (random)</span>`;}
  else if(f.sp==='shortdate'){const pre=f.tpl.replace('{V}','');finalHtml=(pre?`<span>${esc(pre)}</span>`:'')+`<span class="vp">${f.yr4?'MM/DD/YYYY':'MM/DD/YY'}</span><span class="rng"> (random date)</span>`;}
  else if(f.sp==='monthdate')finalHtml=`<span>${esc(f.label)}</span><span class="rng"> (random)</span>`;
  else if(f.sp==='hex4'||f.sp==='hexN')finalHtml=`<span>${esc(f.label)}</span><span class="rng"> (hex)</span>`;
  else if(f.sp==='time')finalHtml=`<span>${esc(f.label)}</span><span class="rng"> (time of day)</span>`;
  else{const p=f.pad||4;finalHtml=`${f.tpl.replace('{V}',`<span class="vp">${'X'.repeat(p)}</span>`)}<span class="rng">(${String(f.min).padStart(p,'0')}-${String(f.max).padStart(p,'0')})</span>`}
  // Rainbow text shuffle for 1.5s then reveal
  const plainText=f.label;
  const dur=1500,t0=performance.now();
  (function frame(now){
    const p=Math.min((now-t0)/dur,1);
    const lockPt=Math.floor(p*p*plainText.length);
    let html='';
    for(let i=0;i<plainText.length;i++){
      if(i<lockPt)html+=`<span style="color:#111">${esc(plainText[i])}</span>`;
      else{const c=SHUFFLE_CHARS[Math.floor(Math.random()*SHUFFLE_CHARS.length)];html+=`<span style="color:${SHUFFLE_COLORS[Math.floor(Math.random()*SHUFFLE_COLORS.length)]}">${c}</span>`}
    }
    b.innerHTML=html;
    if(Math.random()<(1-p)*0.3)playTick(p);
    if(p<1)requestAnimationFrame(frame);
    else{b.innerHTML=finalHtml;playWinSound()}
  })(performance.now());
}

function setupNumberScreen(){
  const f=chosenFormat;if(!f)return;
  const single=document.getElementById('numSingle'),dateParts=document.getElementById('numDate');
  if(f.sp==='date'){
    single.style.display='none'; dateParts.style.display='flex';
    document.getElementById('yrMin').textContent=f.minY||'2006';
    document.getElementById('yrMax').textContent=f.maxY||'2026';
    document.getElementById('rollingYear').textContent='----';
    document.getElementById('rollingSuffix').textContent='----';
    return;
  }
  single.style.display='flex'; dateParts.style.display='none';
  const mn=document.getElementById('rangeMin'),mx=document.getElementById('rangeMax'),nm=document.getElementById('rollingNumber');
  if(f.sp==='shortdate'){const lo=String(f.minY||2006),hi=String(f.maxY||2026);mn.textContent=f.yr4?'01/01/'+lo:'01/01/'+lo.slice(-2);mx.textContent=f.yr4?'12/31/'+hi:'12/31/'+hi.slice(-2);nm.textContent=f.yr4?'--/--/----':'--/--/--'}
  else if(f.sp==='monthdate'){mn.textContent='2007';mx.textContent='2013';nm.textContent='--- --, ----'}
  else if(f.sp==='hex4'){mn.textContent='0000';mx.textContent='FFFF';nm.textContent='----'}
  else if(f.sp==='hexN'){const p=f.pad||3;mn.textContent='0'.repeat(p);mx.textContent='F'.repeat(p);nm.textContent='-'.repeat(p)}
  else if(f.sp==='time'){mn.textContent='000000';mx.textContent='235959';nm.textContent='------'}
  else{const p=f.pad||4;mn.textContent=String(f.min).padStart(p,'0');mx.textContent=String(f.max).padStart(p,'0');nm.textContent='0'.repeat(p)}
}

let numberGenerating=false;
function generateNumber(){
  if(numberGenerating)return;numberGenerating=true;
  const f=chosenFormat,btn=document.getElementById('genBtn');
  btn.style.pointerEvents='none';
  const final=generateFinalNumber();
  chosenNumber=final;
  const dur=3000,t0=performance.now();
  const allChars='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

  if(f.sp==='date'){
    const yrEl=document.getElementById('rollingYear'),sfxEl=document.getElementById('rollingSuffix');
    const yrFinal=final.slice(0,4),sfxFinal=final.slice(4);
    (function frame(now){
      const elapsed=now-t0,progress=Math.min(elapsed/dur,1);
      const lock=Math.floor(progress*progress*4);
      let yh='',sh='';
      for(let i=0;i<4;i++){
        if(i<lock){yh+=`<span style="color:#fff">${esc(yrFinal[i])}</span>`;sh+=`<span style="color:#fff">${esc(sfxFinal[i])}</span>`}
        else{const c1=allChars[Math.floor(Math.random()*allChars.length)],c2=allChars[Math.floor(Math.random()*allChars.length)];
          yh+=`<span style="color:${SHUFFLE_COLORS[Math.floor(Math.random()*SHUFFLE_COLORS.length)]}">${c1}</span>`;
          sh+=`<span style="color:${SHUFFLE_COLORS[Math.floor(Math.random()*SHUFFLE_COLORS.length)]}">${c2}</span>`}
      }
      yrEl.innerHTML=yh;sfxEl.innerHTML=sh;
      if(Math.random()<(1-progress)*0.4)playTick(progress);
      if(progress<1){requestAnimationFrame(frame)}
      else{yrEl.textContent=yrFinal;sfxEl.textContent=sfxFinal;btn.style.pointerEvents='';numberGenerating=false;playWinSound();setTimeout(goNext,900)}
    })(performance.now());
    return;
  }

  const nm=document.getElementById('rollingNumber');
  (function frame(now){
    const elapsed=now-t0,progress=Math.min(elapsed/dur,1);
    const lockPoint=Math.floor(progress*progress*final.length);
    let html='';
    for(let i=0;i<final.length;i++){
      if(i<lockPoint){
        html+=`<span style="color:#fff">${esc(final[i])}</span>`;
      }else{
        const rc=allChars[Math.floor(Math.random()*allChars.length)];
        const color=SHUFFLE_COLORS[Math.floor(Math.random()*SHUFFLE_COLORS.length)];
        html+=`<span style="color:${color}">${rc}</span>`;
      }
    }
    nm.innerHTML=html;
    if(Math.random()<(1-progress)*0.4)playTick(progress);
    if(progress<1){requestAnimationFrame(frame)}
    else{nm.textContent=final;btn.style.pointerEvents='';numberGenerating=false;playWinSound();setTimeout(goNext,900)}
  })(performance.now());
}

// style: how the date token appeared in the format label, so the search string
// matches how the device actually writes filenames ("Desktop 2014 03 17", not "20140317").
function randDate(minY,maxY,style){
  const lo=minY||2006,hi=maxY||2026;
  const y=lo+Math.floor(Math.random()*(hi-lo+1)),m=1+Math.floor(Math.random()*12),d=1+Math.floor(Math.random()*28);
  const MM=String(m).padStart(2,'0'),DD=String(d).padStart(2,'0');
  switch(style){
    case'y':return String(y);                          // WhatsApp Video YYYY
    case'ym_sp':return`${y} ${MM}`;                    // KakaoTalk Video YYYY MM
    case'ymd_sp':return`${y} ${MM} ${DD}`;             // Desktop YYYY MM DD
    case'ymd_dash':return`${y}-${MM}-${DD}`;           // vlc-record-YYYY-MM-DD
    case'dmy8':return`${DD}${MM}${y}`;                 // XRecorder DDMMYYYY
    case'mdy_sp':return`${MM} ${DD} ${y}`;             // ScreenRecording MM DD YYYY
    case'ymd6':return`${String(y).slice(-2)}${MM}${DD}`; // 720p YYMMDD
    default:return`${y}${MM}${DD}`;                    // YYYYMMDD
  }
}
function randMonthDate(minY,maxY,monthOnly){const ms=['January','February','March','April','May','June','July','August','September','October','November','December'];const lo=minY||2007,hi=maxY||2013;const y=lo+Math.floor(Math.random()*(hi-lo+1));const mon=ms[Math.floor(Math.random()*12)];return monthOnly?`${mon} ${y}`:`${mon} ${String(1+Math.floor(Math.random()*28)).padStart(2,'0')}, ${y}`}
function randShortDate(minY,maxY,yr4){const lo=minY||2006,hi=maxY||2026;const y=lo+Math.floor(Math.random()*(hi-lo+1)),m=1+Math.floor(Math.random()*12),d=1+Math.floor(Math.random()*28);const yy=yr4?String(y):String(y).slice(-2);return`${String(m).padStart(2,'0')}/${String(d).padStart(2,'0')}/${yy}`}
function randHex(n){const len=n||4;let s='';for(let i=0;i<len;i++)s+='0123456789ABCDEF'[Math.floor(Math.random()*16)];return s}

// ─── Power Search — engine adapted from NBVS ─────────────────────────────────
// https://github.com/kvnaust/YouTube-NonBiasedVideoSearcher (GPL-3.0)
const PS_SORT_OPTIONS=[
  {value:'viewCount',   label:'Views Low → High ⭐'},
  {value:'date',        label:'Upload Date — Newest'},
  {value:'dateOldest',  label:'Upload Date — Oldest'},
  {value:'viewCountDesc',label:'Views High → Low'},
  {value:'durationAsc', label:'Duration — Shortest'},
  {value:'durationDesc',label:'Duration — Longest'},
  {value:'relevance',   label:'Relevance'},
];
let psApiKey='',psSortBy='viewCount',psNextPageToken=null,psCurrentQuery='';
let psResults_=[],psViewCounts_={},psDurations_={},psShortsMap_={};
let psSortMenuOpen_=false;

function psInit(){
  psApiKey=localStorage.getItem('ps_api_key')||'';
  const inp=document.getElementById('sApiKey');
  if(inp&&psApiKey)inp.value=psApiKey;
  updatePsApiKeyStatus();
  buildPsSortMenu();
  document.addEventListener('click',e=>{
    if(psSortMenuOpen_&&!document.getElementById('psSortWrap')?.contains(e.target))togglePsSortMenu(false);
  });
}
function psHasKey(){
  return !!(window.__KVN_YT_PROXY__?.isAvailable())||!!psApiKey;
}
function savePsApiKey(){
  const proxy=window.__KVN_YT_PROXY__;
  // When logged in, save to cloud via localStorage → shim sync
  const inp=document.getElementById(proxy?.isAvailable()?'sApiKeyCloudInput':'sApiKey');
  const k=(inp?.value||'').trim();
  if(!k){showToast('Enter a key first','warn');return;}
  localStorage.setItem('kvn_yt_api_key',k);
  if(!proxy?.isAvailable()){
    // Also store under legacy ps_api_key for local-only mode
    localStorage.setItem('ps_api_key',k);
    psApiKey=k;
  }
  updatePsApiKeyStatus();
  showToast(proxy?.isAvailable()?'☁ Key saved to cloud — syncing…':'⚡ Power Search active!');
}
function clearPsApiKey(){
  const proxy=window.__KVN_YT_PROXY__;
  const inp=document.getElementById('sApiKey');
  const cinp=document.getElementById('sApiKeyCloudInput');
  if(inp)inp.value='';
  if(cinp)cinp.value='';
  localStorage.removeItem('ps_api_key');
  localStorage.removeItem('kvn_yt_api_key');
  psApiKey='';
  updatePsApiKeyStatus();
  showToast('API key cleared');
}
function updatePsApiKeyStatus(){
  const proxy=window.__KVN_YT_PROXY__;
  const useCloud=proxy?.isAvailable();
  const cloudWrap=document.getElementById('sApiKeyCloud');
  const localWrap=document.getElementById('sApiKeyLocal');
  const status=document.getElementById('sApiKeyStatus');
  const clearBtn=document.getElementById('sClearApiKey');
  const psBtn=document.getElementById('psBtn');
  if(useCloud){
    if(cloudWrap)cloudWrap.style.display='';
    if(localWrap)localWrap.style.display='none';
    if(psBtn){psBtn.style.opacity='1';psBtn.title='⚡ Power Search — via KVN Cloud (10,000 units/day)';}
  }else{
    if(cloudWrap)cloudWrap.style.display='none';
    if(localWrap)localWrap.style.display='';
    if(psApiKey){
      if(status){status.textContent='⚡ Active — key stored in your browser only.';status.style.color='#2ecc71';}
      if(clearBtn)clearBtn.style.display='';
      if(psBtn){psBtn.style.opacity='1';psBtn.title='⚡ Power Search — real view counts, sort by fewest views';}
    }else{
      if(status){status.textContent='No key — Power Search disabled. Add one above.';status.style.color='#555';}
      if(clearBtn)clearBtn.style.display='none';
      if(psBtn){psBtn.style.opacity='0.4';psBtn.title='Add a YouTube Data API key in Settings to enable Power Search';}
    }
  }
}
function psUpdateQuota(quota){
  if(!quota)return;
  const wrap=document.getElementById('psQuotaWrap');
  const text=document.getElementById('psQuotaText');
  const bar=document.getElementById('psQuotaBar');
  const badge=document.getElementById('psCloudBadge');
  if(wrap)wrap.style.display='';
  if(badge)badge.style.display='';
  if(text)text.textContent=`${quota.used.toLocaleString()}/${(quota.limit/1000).toFixed(0)}K units · resets ${quota.resets_in}`;
  if(bar){
    const pct=Math.min(100,quota.pct||0);
    bar.style.width=pct+'%';
    bar.style.background=pct>85?'#e74c3c':pct>60?'#f39c12':'var(--accent)';
  }
  // Update cloud key status area if settings is open
  const cloudUsed=document.getElementById('sApiKeyCloudUsed');
  if(cloudUsed)cloudUsed.textContent=`${quota.used.toLocaleString()} / ${quota.limit.toLocaleString()} units used today · resets in ${quota.resets_in}`;
}
function buildPsSortMenu(){
  const menu=document.getElementById('psSortMenu');
  if(!menu)return;
  menu.innerHTML=PS_SORT_OPTIONS.map(o=>
    `<button onclick="setPsSort('${o.value}')" style="width:100%;text-align:left;padding:8px 12px;font-size:.72rem;color:${o.value===psSortBy?'var(--accent)':'#aaa'};background:none;border:none;cursor:pointer;display:block" onmouseover="this.style.background='#1e1e3a'" onmouseout="this.style.background='none'">${o.value===psSortBy?'✓ ':''}${o.label}</button>`
  ).join('');
}
function setPsSort(val){
  psSortBy=val;
  const opt=PS_SORT_OPTIONS.find(o=>o.value===val);
  const lbl=document.getElementById('psSortLabel');
  if(lbl)lbl.textContent=opt?opt.label:val;
  togglePsSortMenu(false);
  buildPsSortMenu();
}
function togglePsSortMenu(force){
  psSortMenuOpen_=force!==undefined?force:!psSortMenuOpen_;
  const menu=document.getElementById('psSortMenu');
  const arrow=document.getElementById('psSortArrow');
  if(menu)menu.style.display=psSortMenuOpen_?'block':'none';
  if(arrow)arrow.textContent=psSortMenuOpen_?'▲':'▼';
}
function openPowerSearch(){
  if(!psHasKey()){showToast('Add a YouTube API key in Settings first','warn');toggleSettings();return;}
  const q=getQ();
  psCurrentQuery=q;
  const qd=document.getElementById('psQueryDisplay');
  if(qd)qd.textContent=q;
  document.getElementById('psOverlay').classList.add('open');
  psResults_=[];psNextPageToken=null;psViewCounts_={};psDurations_={};psShortsMap_={};
  psSearch(false);
}
function closePowerSearch(){document.getElementById('psOverlay').classList.remove('open');}
function psExtractTitle(q){return q.replace(/\b(before|after|site|intitle|inurl|filetype|related|cache|allintitle|allinurl|allintext|AROUND\(\d+\)):\S+/gi,'').replace(/^["']|["']$/g,'').trim();}
function psParseDuration(iso){
  if(!iso)return'';
  const m=iso.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
  if(!m)return'';
  const h=parseInt(m[1]||0),mn=parseInt(m[2]||0),s=parseInt(m[3]||0);
  if(h>0)return`${h}:${String(mn).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
  return`${mn}:${String(s).padStart(2,'0')}`;
}
function psDurToSec(str){
  if(!str)return 0;
  const p=str.split(':').map(Number);
  if(p.length===3)return p[0]*3600+p[1]*60+p[2];
  if(p.length===2)return p[0]*60+p[1];
  return 0;
}
function psFormatViews(n){
  if(n===0)return'0 views';
  if(n<1000)return`${n} view${n===1?'':'s'}`;
  if(n<1e6)return`${(n/1000).toFixed(1)}K views`;
  return`${(n/1e6).toFixed(1)}M views`;
}
function psFormatDate(ds){
  const d=new Date(ds),now=new Date(),diff=Math.floor((now-d)/86400000);
  if(diff<1)return'today';if(diff<7)return`${diff}d ago`;
  if(diff<30)return`${Math.floor(diff/7)}w ago`;
  if(diff<365)return`${Math.floor(diff/30)}mo ago`;
  return`${Math.floor(diff/365)}y · ${d.toISOString().split('T')[0]}`;
}
async function psGetViewCounts(videos){
  const ids=videos.map(v=>v.id.videoId).filter(Boolean);
  const vcMap={},durMap={};
  const proxy=window.__KVN_YT_PROXY__;
  const useProxy=proxy?.isAvailable();
  for(let i=0;i<ids.length;i+=50){
    const batch=ids.slice(i,i+50).join(',');
    try{
      let r,d;
      if(useProxy){
        r=await fetch(`${proxy.url}?action=videos&part=statistics,contentDetails&id=${encodeURIComponent(batch)}`,{headers:{'X-KVN-Token':proxy.getToken()}});
        if(r.ok){const env=await r.json();if(env.ok){d=env.data;if(env.quota)psUpdateQuota(env.quota);}else{throw new Error(env.detail||env.error||'proxy error');}}
      }else{
        r=await fetch(`https://www.googleapis.com/youtube/v3/videos?part=statistics,contentDetails&id=${batch}&key=${psApiKey}`);
        if(r.ok)d=await r.json();
      }
      if(d&&d.items)d.items.forEach(v=>{vcMap[v.id]=parseInt(v.statistics?.viewCount||0);durMap[v.id]=psParseDuration(v.contentDetails?.duration);});
    }catch(e){}
  }
  Object.assign(psDurations_,durMap);
  return{vcMap,durMap};
}
function psSortVideos(videos,vcMap,durMap){
  if(psSortBy==='relevance')return[...videos];
  return[...videos].sort((a,b)=>{
    if(psSortBy==='date')return new Date(b.snippet.publishedAt)-new Date(a.snippet.publishedAt);
    if(psSortBy==='dateOldest')return new Date(a.snippet.publishedAt)-new Date(b.snippet.publishedAt);
    if(psSortBy==='viewCountDesc'){const d=(vcMap[b.id.videoId]||0)-(vcMap[a.id.videoId]||0);return d||new Date(a.snippet.publishedAt)-new Date(b.snippet.publishedAt);}
    if(psSortBy==='durationAsc')return psDurToSec(durMap[a.id.videoId])-psDurToSec(durMap[b.id.videoId]);
    if(psSortBy==='durationDesc')return psDurToSec(durMap[b.id.videoId])-psDurToSec(durMap[a.id.videoId]);
    const d=(vcMap[a.id.videoId]||0)-(vcMap[b.id.videoId]||0);
    return d||new Date(a.snippet.publishedAt)-new Date(b.snippet.publishedAt);
  });
}
async function psCheckOrientations(videos){
  const entries=await Promise.all(videos.map(v=>new Promise(resolve=>{
    const id=v.id.videoId,t=v.snippet.title||'',desc=v.snippet.description||'';
    if(t.includes('#')||desc.includes('#'))return resolve([id,true]);
    const img=new Image();
    img.onload=()=>resolve([id,img.naturalHeight>img.naturalWidth]);
    img.onerror=()=>resolve([id,null]);
    img.src=`https://i.ytimg.com/vi/${id}/oardefault.jpg`;
  })));
  const map=Object.fromEntries(entries);
  Object.assign(psShortsMap_,map);
  return map;
}
function psApplyFilters(items,durMap,oriMap){
  const filterShorts=document.getElementById('psFilterShorts')?.checked;
  if(!filterShorts)return items;
  return items.filter(item=>{
    const id=item.id.videoId,ori=oriMap[id];
    if(ori===true)return false;if(ori===false)return true;
    const secs=psDurToSec(durMap[id]);
    return!(secs>0&&secs<=60);
  });
}
async function psFetchPage(url,query,proxyHeaders){
  const r=proxyHeaders?await fetch(url,{headers:proxyHeaders}):await fetch(url);
  if(!r.ok){const e=await r.json();throw new Error(e.detail||e.error?.message||e.error||'API request failed');}
  const env=await r.json();
  // Unwrap proxy envelope if present
  const data=env.ok&&env.data?env.data:env;
  if(env.quota)psUpdateQuota(env.quota);
  // Pass through YouTube errors
  if(data.error)throw new Error(data.error.message||JSON.stringify(data.error));
  let items=data.items||[];
  const filterShorts=document.getElementById('psFilterShorts')?.checked;
  const exactTitle=document.getElementById('psExactTitle')?.checked;
  if(filterShorts)items=items.filter(i=>!(i.snippet.title||'').includes('#')&&!(i.snippet.description||'').includes('#'));
  if(exactTitle){const t=psExtractTitle(query).toLowerCase();items=items.filter(i=>i.snippet.title.trim().toLowerCase()===t);}
  return{items,nextPageToken:data.nextPageToken||null};
}
async function psSearch(isLoadMore=false){
  if(!psHasKey()){showToast('No API key','warn');return;}
  const proxy=window.__KVN_YT_PROXY__;
  const useProxy=proxy?.isAvailable();
  const btn=document.getElementById('psSearchBtn');
  const resultsEl=document.getElementById('psResultsWrap');
  const loadMoreWrap=document.getElementById('psLoadMoreWrap');
  if(!isLoadMore){
    psResults_=[];psNextPageToken=null;psViewCounts_={};psDurations_={};psShortsMap_={};
    resultsEl.innerHTML='<div class="ps-loading">Searching…</div>';
    loadMoreWrap.style.display='none';
  }else{
    const lmb=document.getElementById('psLoadMoreBtn');
    if(lmb)lmb.textContent='Loading…';
  }
  if(btn)btn.disabled=true;
  try{
    const query=psCurrentQuery;
    const apiOrder=psSortBy==='viewCountDesc'?'viewCount':psSortBy==='relevance'?'relevance':'date';
    let baseUrl,proxyHeaders=null;
    if(useProxy){
      baseUrl=`${proxy.url}?action=search&part=snippet&q=${encodeURIComponent(query)}&type=video&maxResults=50&order=${apiOrder}`;
      proxyHeaders={'X-KVN-Token':proxy.getToken()};
    }else{
      baseUrl=`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(query)}&type=video&maxResults=50&order=${apiOrder}&key=${psApiKey}`;
    }
    let newItems=[],newNextToken=null;
    if(psSortBy==='dateOldest'&&!isLoadMore){
      let pageToken=null,pages=0;
      do{
        const url=pageToken?`${baseUrl}&pageToken=${pageToken}`:baseUrl;
        const{items,nextPageToken:npt}=await psFetchPage(url,query,proxyHeaders);
        newItems=[...newItems,...items];pageToken=npt;pages++;
      }while(pageToken&&pages<4);
      newNextToken=pageToken;
    }else{
      const url=isLoadMore&&psNextPageToken?`${baseUrl}&pageToken=${psNextPageToken}`:baseUrl;
      const{items,nextPageToken:npt}=await psFetchPage(url,query,proxyHeaders);
      newItems=items;newNextToken=npt;
    }
    const{vcMap,durMap}=await psGetViewCounts(newItems);
    const oriMap=await psCheckOrientations(newItems);
    const filtered=psApplyFilters(newItems,durMap,oriMap);
    Object.assign(psViewCounts_,vcMap);
    psResults_=isLoadMore?psSortVideos([...psResults_,...filtered],psViewCounts_,psDurations_):psSortVideos(filtered,vcMap,durMap);
    psNextPageToken=newNextToken;
    psRenderResults();
  }catch(err){
    const msg=err.message.toLowerCase();
    resultsEl.innerHTML=`<div class="ps-error">${msg.includes('quota')||msg.includes('exceeded')?'API quota exceeded — daily limit resets at midnight PST. Swap in another key to continue.':err.message}</div>`;
  }finally{
    if(btn)btn.disabled=false;
    const lmb=document.getElementById('psLoadMoreBtn');
    if(lmb)lmb.textContent='Load 50 More';
  }
}
function psGetVideoUrl(id){
  const ori=psShortsMap_[id];
  if(ori===true)return`https://www.youtube.com/shorts/${id}`;
  if(ori===false)return`https://www.youtube.com/watch?v=${id}`;
  const secs=psDurToSec(psDurations_[id]);
  return(secs>0&&secs<=60)?`https://www.youtube.com/shorts/${id}`:`https://www.youtube.com/watch?v=${id}`;
}
function psRenderResults(){
  const el=document.getElementById('psResultsWrap');
  const lmw=document.getElementById('psLoadMoreWrap');
  if(!psResults_.length){el.innerHTML=`<div class=”ps-empty”>No results for “${psCurrentQuery}”</div>`;lmw.style.display='none';return;}
  // Always sorted lowest-first by default; re-sort just in case results arrived out of order
  if(psSortBy==='viewCount')psResults_.sort((a,b)=>{
    const va=psViewCounts_[a.id.videoId]??Infinity,vb=psViewCounts_[b.id.videoId]??Infinity;
    return va-vb||new Date(a.snippet.publishedAt)-new Date(b.snippet.publishedAt);
  });
  el.innerHTML=psResults_.map((v,idx)=>{
    const id=v.id.videoId,url=psGetVideoUrl(id);
    const thumb=v.snippet.thumbnails?.medium?.url||`https://i.ytimg.com/vi/${id}/mqdefault.jpg`;
    const views=psViewCounts_[id]!==undefined?psViewCounts_[id]:null;
    const dur=psDurations_[id];
    const year=v.snippet.publishedAt?new Date(v.snippet.publishedAt).getFullYear():0;
    const isZero=views===0;
    const isAncient=!isZero&&year>0&&year<=2007;
    const specialClass=isZero?'ps-zero':isAncient?'ps-ancient':'';
    const delay=`${Math.min(idx,.15)*0.08}s`; // max ~12ms stagger cap
    const viewColor=isZero?'#ffd700':views!==null&&views<50?'#e74c3c':views!==null&&views<500?'#e67e22':'#666';
    const canBank=isZero&&window.__KVN_YT_PROXY__&&window.__KVN_YT_PROXY__.isAvailable&&window.__KVN_YT_PROXY__.isAvailable();
    const bankBtn=canBank?`<button class=”vt-btn” style=”margin-top:5px;padding:3px 10px;font-size:.6rem;background:linear-gradient(135deg,#0a2a0a,#0d3d0d);border-color:#2ecc7160;color:#2ecc71” onclick=”event.preventDefault();event.stopPropagation();psLogFind('${id}',${JSON.stringify(v.snippet.title||'')},${''+views},'${v.snippet.publishedAt||''}',${JSON.stringify(psCurrentQuery||'')})”>&#x2601; Bank it</button>`:'';
    const specialBadge=isZero
      ?`<div class=”ps-zero-badge”>&#11088; ZERO VIEWS — POTENTIAL FIND</div>${bankBtn}`
      :isAncient
      ?`<div class=”ps-ancient-badge”>&#x1F4FC; VINTAGE &middot; ${year}</div>`:'';
    return`<div class=”ps-result${specialClass?' '+specialClass:''}” style=”--psd:${delay}”>
      <a href=”${url}” target=”_blank” rel=”noopener” class=”ps-thumb”><img src=”${thumb}” alt=”” loading=”lazy”>${dur?`<span class=”ps-dur”>${dur}</span>`:''}</a>
      <div class=”ps-meta”>
        <a href=”${url}” target=”_blank” rel=”noopener” class=”ps-title”>${v.snippet.title||''}</a>
        <div class=”ps-channel”>${v.snippet.channelTitle||''}</div>
        <div class=”ps-views” style=”color:${viewColor}”>${views!==null?psFormatViews(views):'—'}</div>
        <div class=”ps-date”>${psFormatDate(v.snippet.publishedAt)}</div>
        ${specialBadge}
        <div class=”ps-desc”>${v.snippet.description||''}</div>
      </div>
    </div>`;
  }).join('');
  if(psNextPageToken&&psResults_.length<2000){
    lmw.style.display='block';
    const lc=document.getElementById('psLoadedCount');
    if(lc)lc.textContent=`${psResults_.length} results loaded`;
  }else{lmw.style.display='none';}
}
// ─── End Power Search ─────────────────────────────────────────────────────────

function ytSearchUrl(q){return'https://www.youtube.com/results?search_query='+encodeURIComponent(q)+'&sp=CAI%253D'}
function showResult(){
  finalString=chosenFormat.sp==='static'?chosenFormat.tpl:chosenFormat.tpl.replace('{V}',chosenNumber);
  resultDork=0;updateDorkChips();
  renderResultPill();updateEraChip();
  resetTracker();
  setTimeout(browseResults,200);
  saveGameState();
}
function _showManualEntry(){
  const me=document.getElementById('vtManualEntry');
  const rs=document.getElementById('vtRatingSection');
  if(me)me.style.display='';
  if(rs)rs.style.display='';
}
function copyResult(){const q=getQ();navigator.clipboard.writeText(q).then(()=>showToast('Copied!')).catch(()=>{})}
function searchYouTube(){const q=getQ();window.open('https://www.youtube.com/results?search_query='+encodeURIComponent(q)+'&sp=CAI%253D','_blank')}

// ═══════════════════════════════════
//  IN-APP SEARCH RESULTS
// ═══════════════════════════════════
const INVIDIOUS_INSTANCES=['https://iv.melmac.space','https://inv.nadeko.net','https://invidious.privacyredirect.com','https://yt.drgnz.club'];
const CORS_PROXIES=['https://api.allorigins.win/raw?url='];
let currentSearchVideos=[]; // {videoId,title,author,viewCount,thumbnail,clicked,rating:{}}
let searchResultsOpen=false;

async function browseResults(){
  const box=document.getElementById('srInline');
  if(!box)return;
  // Inline video list requires the wrapper YT proxy — not available in FOSS
  if(!window.__KVN_WRAPPER_LOADED__){box.innerHTML='';return;}
  box.innerHTML='<div class="sr-loading" style="padding:16px 0;font-size:.75rem">Searching...</div>';

  const results=await searchInvidious(finalString);
  if(!results||!results.length){
    box.innerHTML=`<div class="sr-bummer">
      <div class="sr-bummer-nine">9</div>
      <div class="sr-bummer-none">ine Found</div>
      <div class="sr-bummer-sub">That's zero. Invidious came up empty — the recycle bin recycles again.</div>
      <button class="vt-btn yt-btn" style="margin-top:4px;font-size:.7rem" onclick="searchYouTube()">Open in YouTube ↗</button>
    </div>`;
    _showManualEntry();
    return;
  }

  // Map ALL results, sort ALL, then slice for inline display
  currentSearchVideos=results.map(v=>({
    videoId:v.videoId,title:v.title,author:v.author||v.authorId||'Unknown',
    viewCount:v.viewCount||0,lengthSeconds:v.lengthSeconds||0,
    published:v.published||0,
    thumbnail:v.videoThumbnails?v.videoThumbnails.find(t=>t.quality==='medium')?.url||v.videoThumbnails[0]?.url:'',
    clicked:false,rating:{entertainment:0,weirdness:0,gem:0,liked:0}
  }));
  currentSearchVideos.sort((a,b)=>{
    const tier=v=>{
      if(v.viewCount===0)return 0;
      const y=v.published>0?new Date(v.published*1000).getFullYear():9999;
      return y<2008?1:2;
    };
    const ta=tier(a),tb=tier(b);
    if(ta!==tb)return ta-tb;
    if(a.published>0&&b.published>0)return a.published-b.published;
    return a.published>0?-1:b.published>0?1:a.viewCount-b.viewCount;
  });
  renderInlineResults();
}

function renderInlineResults(){
  const box=document.getElementById('srInline');
  if(!box)return;
  const MN={entertainment:'Ent',weirdness:'Weird',gem:'Gem',liked:'Liked'};
  const TOP_N=5;
  const displayed=currentSearchVideos.slice(0,TOP_N);
  const total=currentSearchVideos.length;
  const countLabel=`Top ${displayed.length}${total>TOP_N?' of '+total+' found':' shown'}`;
  const viewAllBtn=total>TOP_N
    ?`<button onclick="openAllResultsModal()" style="font-size:.6rem;color:var(--accent);background:none;border:1px solid var(--accent);border-radius:4px;padding:2px 8px;cursor:pointer;font-weight:700;white-space:nowrap">View All ${total} →</button>`
    :'';
  // Stats-driven hue: base from rarity tier + per-card variance from index + videoId chars
  function cardHue(v,i){
    const yr=v.published>0?new Date(v.published*1000).getFullYear():null;
    let base;
    if(v.viewCount===0)base=318;
    else if(v.viewCount<10)base=350;
    else if(v.viewCount<100)base=28;
    else if(v.viewCount<1000)base=135;
    else if(yr&&yr<2008)base=264;
    else base=198;
    const id0=v.videoId?(v.videoId.charCodeAt(0)+v.videoId.charCodeAt(v.videoId.length-1)):0;
    return((base+(i*41+id0*7)%44-22)+360)%360;
  }
  box.innerHTML=`<div class="sr-inline-header"><span>${countLabel}</span>${viewAllBtn}</div><div class="sr-inline-grid">`
    +displayed.map((v,i)=>{
      const views=v.viewCount<1000?String(v.viewCount):(v.viewCount/1000).toFixed(1)+'K';
      const dur=v.lengthSeconds?`${Math.floor(v.lengthSeconds/60)}:${String(v.lengthSeconds%60).padStart(2,'0')}`:'';
      const pubDate=v.published>0?new Date(v.published*1000):null;
      const dateStr=pubDate?pubDate.toLocaleDateString('en-US',{month:'short',year:'numeric'}):'';
      const ageMs=pubDate?Date.now()-pubDate.getTime():0;
      const ageYrs=Math.floor(ageMs/(365.25*24*3600*1e3));
      const ageMos=Math.floor(ageMs/(30.44*24*3600*1e3));
      const ageStr=pubDate?(ageYrs>=1?ageYrs+'y ago':ageMos>=1?ageMos+'mo ago':'recent'):'';
      const stars=(['entertainment','weirdness','gem','liked']).map(m=>
        `<div style="display:flex;align-items:center;gap:2px">
          <span style="font-size:.58rem;color:${METRIC_COLORS[m]};width:2.2em;flex-shrink:0;opacity:.9">${MN[m]}</span>
          ${[1,2,3,4,5].map(s=>
            `<span class="vt-star${v.rating[m]>=s?' lit':''}" onclick="rateSearchVideo(${i},'${m}',${s})">&#9733;</span>`
          ).join('')}
        </div>`
      ).join('');
      const avg=avgMetric(v.rating);
      const scoreHtml=avg>0
        ?`<span style="color:#f39c12">★ ${avg.toFixed(1)}</span><span style="color:#555"> / 5</span>`
        :`<span style="color:#2a2a3a">★ rate me</span>`;
      const hue=cardHue(v,i);
      const isZeroViews=v.viewCount===0;
      const year=pubDate?pubDate.getFullYear():null;
      const isPre2008=year!==null&&year<2008;
      // Every card gets a unique tinted background; rarity cards get stronger glow
      const glowStr=isZeroViews?`.35`:isPre2008?`.22`:`.12`;
      const cardStyle=`style="background:linear-gradient(175deg,hsl(${hue},30%,10%) 0%,hsl(${hue},18%,7%) 100%);border-color:hsl(${hue},52%,32%);box-shadow:0 0 16px hsla(${hue},65%,45%,${glowStr})"`;
      // Overlay badge on every card: year + age (tier-coloured)
      const badgeLabel=isZeroViews
        ?(year?`0 VIEWS · ${year}`:'0 VIEWS')
        :isPre2008
          ?(year?`${year} — VINTAGE`:'VINTAGE')
          :(year&&ageStr?`${year} · ${ageStr}`:year?String(year):ageStr||'');
      const badgeHtml=badgeLabel
        ?`<div class="sr-inline-thumb-badge" style="background:hsla(${hue},80%,18%,.92);color:hsl(${hue},90%,70%);border:1px solid hsl(${hue},65%,38%)">${badgeLabel}</div>`
        :'';
      const metaHtml=`<span style="color:#7ec0e8">${esc(v.author)}</span>${dur?` <span style="color:#444">·</span> <span style="color:#667">${dur}</span>`:''} <span style="color:#444">·</span> <span style="color:#c9934a">${views} views</span>`;
      return`<div class="sr-inline-card${v.clicked?' clicked':''}" id="sri-${i}" ${cardStyle}>
        <div class="sr-inline-thumb-wrap">
          <img class="sr-inline-thumb" src="${v.thumbnail||''}" alt="" onerror="this.src='https://img.youtube.com/vi/${v.videoId}/mqdefault.jpg'" loading="lazy">
          ${badgeHtml}
        </div>
        <div class="sr-inline-body">
          <div class="sr-inline-title" style="color:hsl(${hue},55%,80%)">${esc(v.title)}</div>
          <div class="sr-inline-meta">${metaHtml}</div>
          ${dateStr?`<div class="sr-inline-date">${dateStr} <span style="color:#6a8a7a">· ${ageStr}</span></div>`:''}
          <div class="sr-inline-stars">${stars}</div>
          <div class="sri-score">${scoreHtml}</div>
          <div class="sr-inline-actions">
            <button class="vt-btn" style="background:var(--accent);flex:1" onclick="watchVideoInline(${i})">Watch</button>
            <button class="vt-btn" style="background:var(--card2);flex:1" onclick="saveVideoFromSearch(${i})">Save</button>
            <button class="vt-btn add-records" style="flex:1" onclick="saveAndRecordFromSearch(${i})">Record</button>
          </div>
        </div>
      </div>`;
    }).join('')+'</div>';
}

async function searchInvidious(query){
  const q=encodeURIComponent(query);
  // Pass 1: all instances, sorted by upload date
  for(const instance of INVIDIOUS_INSTANCES){
    try{
      const r=await fetch(`${instance}/api/v1/search?q=${q}&sort_by=upload_date&type=video`);
      if(!r.ok)continue;
      const data=await r.json();
      if(Array.isArray(data)&&data.length)return data.slice(0,20);
    }catch{}
  }
  // Pass 2: retry with relevance sort — some queries return 0 by date but have results by relevance
  for(const instance of INVIDIOUS_INSTANCES){
    try{
      const r=await fetch(`${instance}/api/v1/search?q=${q}&sort_by=relevance&type=video`);
      if(!r.ok)continue;
      const data=await r.json();
      if(Array.isArray(data)&&data.length)return data.slice(0,20);
    }catch{}
  }
  return null;
}

function renderSearchResults(){
  const list=document.getElementById('srList');
  list.innerHTML=currentSearchVideos.map((v,i)=>{
    const views=v.viewCount<1000?v.viewCount:(v.viewCount/1000).toFixed(1)+'K';
    const dur=v.lengthSeconds?`${Math.floor(v.lengthSeconds/60)}:${String(v.lengthSeconds%60).padStart(2,'0')}`:'';
    const badge=v.rating&&avgMetric(v.rating)>0?'<span class="sr-badge saved">rated</span>':v.clicked?'<span class="sr-badge viewed">viewed</span>':'';
    return`<div class="sr-card${v.clicked?' clicked':''}${avgMetric(v.rating)>0?' rated':''}" id="sr-${i}">
      ${badge}
      <img class="sr-thumb" src="${v.thumbnail||''}" alt="" onerror="this.src='https://img.youtube.com/vi/${v.videoId}/mqdefault.jpg'" loading="lazy">
      <div class="sr-body">
        <div class="sr-title">${esc(v.title)}</div>
        <div class="sr-channel">${esc(v.author)}${dur?' &middot; '+dur:''}</div>
        <div class="sr-views">${views} views</div>
        <div class="sr-actions">
          <button class="vt-btn" style="background:var(--accent)" onclick="watchVideo(${i})">Watch</button>
          <button class="vt-btn" style="background:var(--card2)" onclick="saveVideoFromSearch(${i})">Save to Round</button>
        </div>
        <div class="sr-rate" data-idx="${i}">
          ${['entertainment','weirdness','gem','liked'].map(m=>
            `<span style="font-size:.55rem;color:${METRIC_COLORS[m]};margin-right:4px">${METRIC_LABELS[m]}:${[1,2,3,4,5].map(s=>
              `<span class="vt-star${v.rating[m]>=s?' lit':''}" style="font-size:.8rem" onclick="rateSearchVideo(${i},'${m}',${s})">&#9733;</span>`
            ).join('')}</span>`
          ).join('')}
        </div>
      </div>
    </div>`;
  }).join('');
}

function watchVideo(idx){
  const v=currentSearchVideos[idx];if(!v)return;
  v.clicked=true;
  window.open('https://www.youtube.com/watch?v='+v.videoId,'_blank');
  renderSearchResults();
}
function watchVideoInline(idx){
  const v=currentSearchVideos[idx];if(!v)return;
  v.clicked=true;
  window.open('https://www.youtube.com/watch?v='+v.videoId,'_blank');
  renderInlineResults();
}

function rateSearchVideo(idx,metric,value){
  const v=currentSearchVideos[idx];if(!v)return;
  v.rating[metric]=value;
  if(searchResultsOpen){renderSearchResults();return;}
  // Surgical update — avoid full re-render on every star click
  const card=document.getElementById(`sri-${idx}`);
  if(card){
    const metricIdx=['entertainment','weirdness','gem','liked'].indexOf(metric);
    const rows=card.querySelectorAll('.sr-inline-stars > div');
    if(rows[metricIdx])rows[metricIdx].querySelectorAll('.vt-star').forEach((s,si)=>s.classList.toggle('lit',si<value));
    const scoreEl=card.querySelector('.sri-score');
    if(scoreEl){
      const avg=avgMetric(v.rating);
      scoreEl.innerHTML=avg>0
        ?`<span style="color:#f39c12">★ ${avg.toFixed(1)}</span><span style="color:#555"> / 5</span>`
        :`<span style="color:#2a2a3a">★ rate me</span>`;
    }
  }else{
    renderInlineResults();
  }
  saveGameState();
}

function _fillTrackerFromSearchVideo(v){
  document.getElementById('vtLink').value='https://www.youtube.com/watch?v='+v.videoId;
  if(v.published){
    const d=new Date(v.published*1000);
    document.getElementById('vtDatePosted').value=`${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
  }
  if(v.viewCount!==undefined)document.getElementById('vtViews').value=v.viewCount;
  if(avgMetric(v.rating)>0){
    currentMetrics={...v.rating};
    document.querySelectorAll('.vt-stars[data-metric]').forEach(el=>{
      const m=el.dataset.metric;
      el.querySelectorAll('.vt-star').forEach(s=>s.classList.toggle('lit',+s.dataset.v<=currentMetrics[m]));
    });
  }
}

function saveVideoFromSearch(idx){
  const v=currentSearchVideos[idx];if(!v)return;
  _fillTrackerFromSearchVideo(v);
  _showManualEntry();
  showToast('Video loaded — fill in details & save');
}

function saveAndRecordFromSearch(idx){
  const v=currentSearchVideos[idx];if(!v)return;
  _fillTrackerFromSearchVideo(v);
  _showManualEntry();
  addCurrentToRecords();
}

function closeSearchResults(){
  document.getElementById('searchResults').classList.remove('open');
  searchResultsOpen=false;
  _showManualEntry();
}
function openAllResultsModal(){
  document.getElementById('srTitle').textContent='All Results — '+finalString;
  renderSearchResults();
  document.getElementById('searchResults').classList.add('open');
  searchResultsOpen=true;
}

// ═══════════════════════════════════
//  VIDEO TRACKING
// ═══════════════════════════════════
let currentMetrics={entertainment:0,weirdness:0,gem:0,liked:0};

function setMetric(metric,v){
  currentMetrics[metric]=v;
  document.querySelectorAll(`.vt-stars[data-metric="${metric}"] .vt-star`).forEach(s=>s.classList.toggle('lit',+s.dataset.v<=v));
}

function resetTracker(){
  currentMetrics={entertainment:0,weirdness:0,gem:0,liked:0};
  document.querySelectorAll('.vt-star').forEach(s=>s.classList.remove('lit'));
  const me=document.getElementById('vtManualEntry');
  const rs=document.getElementById('vtRatingSection');
  if(me)me.style.display='none';
  if(rs)rs.style.display='none';
}

function avgMetric(m){const vals=Object.values(m).filter(v=>v>0);return vals.length?(vals.reduce((a,b)=>a+b,0)/vals.length):0}

function makeRound(){
  const m={...currentMetrics};
  // Include browsed videos data (clicked, rated, skipped)
  const browsed=currentSearchVideos.filter(v=>v.clicked||avgMetric(v.rating)>0).map(v=>({
    videoId:v.videoId,title:v.title,author:v.author,views:v.viewCount,
    clicked:v.clicked,rating:v.rating
  }));
  return{search:finalString,format:chosenFormat?chosenFormat.label:'',number:chosenNumber||'',
    link:document.getElementById('vtLink').value.trim(),
    datePosted:document.getElementById('vtDatePosted').value.trim(),
    viewsWhenFound:document.getElementById('vtViews').value.trim(),
    channelVids:document.getElementById('vtChannelVids').value.trim(),
    metrics:m,rating:Math.round(avgMetric(m)*10)/10,
    browsed:browsed.length?browsed:undefined,
    date:new Date().toISOString()};
}

// Flashy re-randomize with 3-second character shuffle animation
let shuffleAnimRunning=false;
const SHUFFLE_CHARS='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789._-';
const SHUFFLE_COLORS=['#e74c3c','#f39c12','#2ecc71','#3498db','#9b59b6','#e91e63','#00bcd4','#ff5722','#ffeb3b','#8bc34a','#fff','#4fc3f7'];

function generateFinalNumber(){
  const f=chosenFormat;
  if(f.sp==='date')return randDate(f.minY,f.maxY,f.style);
  if(f.sp==='shortdate')return randShortDate(f.minY,f.maxY,f.yr4);
  if(f.sp==='monthdate')return randMonthDate(f.minY,f.maxY,f.mo);
  if(f.sp==='hex4')return randHex(4);
  if(f.sp==='hexN')return randHex(f.pad||3);
  if(f.sp==='time'){const h=Math.floor(Math.random()*24),m=Math.floor(Math.random()*60),s=Math.floor(Math.random()*60);return String(h).padStart(2,'0')+String(m).padStart(2,'0')+String(s).padStart(2,'0')}
  if(f.sp!=='static'){const p=f.pad||4;return String(Math.floor(Math.random()*(f.max-f.min+1))+f.min).padStart(p,'0')}
  return'';
}

function buildFinalString(num){
  const f=chosenFormat;
  return f.sp==='static'?f.tpl:f.tpl.replace('{V}',num);
}

function animatedReRandomize(callback){
  if(!chosenFormat||shuffleAnimRunning)return;
  if(reduceMotionOn()){const nn=generateFinalNumber();chosenNumber=nn;finalString=buildFinalString(nn);renderResultPill();updateEraChip();if(callback)callback();return}
  shuffleAnimRunning=true;
  const pill=document.getElementById('resultPill');
  const newNum=generateFinalNumber();
  const target=buildFinalString(newNum);
  const dur=3000;
  const t0=performance.now();
  const len=Math.max(target.length,finalString.length,8);

  // Run the shuffle animation
  function frame(now){
    const elapsed=now-t0;
    const progress=Math.min(elapsed/dur,1);
    // Ease: characters lock in from left to right as progress increases
    const lockPoint=Math.floor(progress*progress*len); // quadratic ease - slow start, fast finish
    let html='';
    for(let i=0;i<target.length;i++){
      if(i<lockPoint){
        // Locked - show final character in white
        html+=`<span style="color:#fff">${esc(target[i])}</span>`;
      }else{
        // Still shuffling - random char, random color
        const rc=SHUFFLE_CHARS[Math.floor(Math.random()*SHUFFLE_CHARS.length)];
        const color=SHUFFLE_COLORS[Math.floor(Math.random()*SHUFFLE_COLORS.length)];
        html+=`<span style="color:${color};transition:color .05s">${rc}</span>`;
      }
    }
    pill.innerHTML=html;

    // Play ticks during shuffle (decreasing frequency as it slows)
    if(Math.random()<(1-progress)*0.4)playTick(progress);

    if(progress<1){
      requestAnimationFrame(frame);
    }else{
      // Final: set clean text
      chosenNumber=newNum;
      finalString=target;
      renderResultPill();updateEraChip();
      pill.style.borderColor='';
      shuffleAnimRunning=false;
      playWinSound();
      if(callback)callback();
    }
  }

  // Start with a border flash
  pill.style.borderColor='var(--accent)';
  requestAnimationFrame(frame);
}

function reRandomize(){animatedReRandomize(()=>{showToast('Re-randomized!');browseResults();})}

function openPillEditor(){
  const f=chosenFormat;
  if(!f||f.sp!=='date'){copyResult();return;}
  const pill=document.getElementById('resultPill');
  const yr=(chosenNumber||'').slice(0,4),sfx=(chosenNumber||'').slice(4,8);
  const minY=f.minY||2006,maxY=f.maxY||2026;
  pill.innerHTML='<div style="display:flex;align-items:flex-end;gap:16px;justify-content:center;flex-wrap:wrap;padding:4px 0">'
    +'<div style="text-align:center"><div style="font-size:.55rem;color:var(--muted);letter-spacing:1px;margin-bottom:4px">YEAR ('+minY+'–'+maxY+')</div>'
    +'<input id="pillYrIn" type="number" min="'+minY+'" max="'+maxY+'" value="'+yr+'" '
    +'style="width:100px;text-align:center;background:transparent;border:none;border-bottom:2px solid var(--accent);'
    +'color:#fff;font-family:\'Space Mono\',monospace;font-size:1.8rem;font-weight:700;outline:none;-moz-appearance:textfield"></div>'
    +'<div style="text-align:center"><div style="font-size:.55rem;color:var(--muted);letter-spacing:1px;margin-bottom:4px">MMDD (RANDOM)</div>'
    +'<input id="pillSfxIn" type="text" maxlength="4" value="'+sfx+'" '
    +'style="width:100px;text-align:center;background:transparent;border:none;border-bottom:2px solid var(--accent);'
    +'color:#fff;font-family:\'Space Mono\',monospace;font-size:1.8rem;font-weight:700;outline:none"></div>'
    +'<div style="display:flex;flex-direction:column;gap:6px">'
    +'<button onclick="applyPillEdit()" style="background:var(--accent);border:none;color:#fff;padding:7px 18px;border-radius:8px;cursor:pointer;font-weight:700;font-size:.75rem;letter-spacing:1px">APPLY</button>'
    +'<button onclick="closePillEditor()" style="background:#333;border:1px solid #444;color:#999;padding:5px 14px;border-radius:8px;cursor:pointer;font-size:.7rem">cancel</button>'
    +'</div></div>';
  setTimeout(function(){var el=document.getElementById('pillYrIn');if(el)el.select();},50);
}
function closePillEditor(){var p=document.getElementById('resultPill');if(p)renderResultPill();}
function applyPillEdit(){
  const f=chosenFormat,minY=f.minY||2006,maxY=f.maxY||2026;
  const yIn=document.getElementById('pillYrIn'),sIn=document.getElementById('pillSfxIn');
  if(!yIn||!sIn)return;
  let y=parseInt(yIn.value,10);
  if(isNaN(y))y=minY;
  y=Math.max(minY,Math.min(maxY,y));
  const sfx=sIn.value.trim();
  if(!/^\d{4}$/.test(sfx)){showToast('Enter 4-digit MMDD (e.g. 0315)','warn');return;}
  chosenNumber=String(y)+sfx;
  finalString=buildFinalString(chosenNumber);
  closePillEditor();
  browseResults();
}


// Reshuffle bingo during flash
function reshuffleBingoFlash(){
  pickBingoCategories();
  bingoState=Array(25).fill(false);
  buildBingoFromPicked();
  showBingoFlash();
}
function clearVtLink(){document.getElementById('vtLink').value='';document.getElementById('vtDatePosted').value='';document.getElementById('vtViews').value='';document.getElementById('vtChannelVids').value='';const s=document.getElementById('vtFetchStatus');if(s)s.textContent=''}

let vtFetchTimer=null;
function onVideoLinkChange(val){
  clearTimeout(vtFetchTimer);
  const vid=getVideoId(val.trim());
  if(!vid)return;
  const status=document.getElementById('vtFetchStatus');
  if(status)status.textContent='fetching...';
  vtFetchTimer=setTimeout(()=>fetchVideoMeta(vid),500);
}

async function fetchVideoMeta(vid){
  const status=document.getElementById('vtFetchStatus');
  const now=new Date();
  const today=now.toLocaleDateString('en-GB',{day:'2-digit',month:'2-digit',year:'numeric'});
  const time=now.toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit'});

  function applyData(d){
    if(d.title)_vtTitle=d.title;
    if(d.published){const dt=typeof d.published==='number'?new Date(d.published*1000):new Date(d.published);document.getElementById('vtDatePosted').value=dt.toLocaleDateString('en-GB',{day:'2-digit',month:'2-digit',year:'numeric'})}
    if(d.viewCount!==undefined)document.getElementById('vtViews').value=`${d.viewCount} (found ${today} ${time})`;
    else if(d.views!==undefined)document.getElementById('vtViews').value=`${d.views} (found ${today} ${time})`;
    if(d.channelVideos)document.getElementById('vtChannelVids').value=d.channelVideos;
  }

  async function tryFetch(url,timeout){
    const ctrl=new AbortController();const t=setTimeout(()=>ctrl.abort(),timeout||6000);
    try{const r=await fetch(url,{signal:ctrl.signal});clearTimeout(t);return r}catch{clearTimeout(t);return null}
  }

  // Try 1: Hosted proxy (fastest, no CORS issues when on falcontechnix.com)
  try{
    const r=await tryFetch(`/KVN_AUST/videometa.php?v=${vid}`,5000);
    if(r&&r.ok){const d=await r.json();if(d.ok){
      applyData(d);
      if(status)status.textContent='auto-filled';
      setTimeout(()=>{if(status)status.textContent=''},3000);
      // Channel video count — fire-and-forget (YouTube scrape can take 10s+)
      if(!d.channelVideos&&d.authorId){
        (async()=>{try{const cr=await tryFetch(`/KVN_AUST/videometa.php?channel=${d.authorId}`,15000);if(cr&&cr.ok){const cd=await cr.json();if(cd.videoCount)document.getElementById('vtChannelVids').value=cd.videoCount}}catch{}})();
      }
      return;
    }}
  }catch{}

  // Try 2: Invidious via CORS proxy (works from file:// and any origin)
  for(const instance of INVIDIOUS_INSTANCES){
    const apiUrl=`${instance}/api/v1/videos/${vid}?fields=title,viewCount,published,author,authorId`;
    // Try direct first (might work if instance sends CORS headers)
    let r=await tryFetch(apiUrl,5000);
    // If direct fails, try via CORS proxy
    if(!r||!r.ok){for(const proxy of CORS_PROXIES){r=await tryFetch(proxy+encodeURIComponent(apiUrl),6000);if(r&&r.ok)break}}
    if(r&&r.ok){
      try{
        const d=await r.json();
        applyData(d);
        if(status)status.textContent='auto-filled';
        setTimeout(()=>{if(status)status.textContent=''},3000);
        // Fire-and-forget channel count
        if(d.authorId){
          (async()=>{try{const chUrl=`${instance}/api/v1/channels/${d.authorId}?fields=videoCount`;let cr=await tryFetch(chUrl,8000);if(!cr||!cr.ok){for(const proxy of CORS_PROXIES){cr=await tryFetch(proxy+encodeURIComponent(chUrl),8000);if(cr&&cr.ok)break}}if(cr&&cr.ok){const cd=await cr.json();if(cd.videoCount)document.getElementById('vtChannelVids').value=cd.videoCount}}catch{}})();
        }
        return;
      }catch{}
    }
  }

  if(status)status.textContent='could not fetch';
  setTimeout(()=>{if(status)status.textContent=''},3000);
}
function saveVideo(){sessionRounds.push(makeRound());clearVtLink();showToast('Saved!');checkAchievements();setTimeout(()=>{resetTracker();startNextRound()},600)}
function skipVideo(){sessionRounds.push({...makeRound(),link:'',rating:0,metrics:{entertainment:0,weirdness:0,gem:0,liked:0}});clearVtLink();resetTracker();startNextRound()}
function saveAndReRandomize(){
  sessionRounds.push(makeRound());
  clearVtLink();resetTracker();
  // Stay on result screen - just re-roll the number
  if(!chosenFormat){showToast('No format selected','warn');return}
  animatedReRandomize(()=>{showToast('Saved! Re-randomized');browseResults();});
}
function saveAndEnd(){
  const round=makeRound();
  sessionRounds.push(round);
  clearVtLink();resetTracker();
  saveGameToHistory();checkAchievements();
  showSummary();
  gameActive=false;
}
function endSession(){
  if(finalString){
    const round=makeRound();
    round.link='';round.rating=0;
    sessionRounds.push(round);
  }
  clearVtLink();resetTracker();
  saveGameToHistory();checkAchievements();
  showSummary();
  gameActive=false;
}

async function fetchVideoInfo(url){try{const r=await fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(url)}&format=json`);if(!r.ok)return null;return await r.json()}catch{return null}}
function getVideoId(url){try{const u=new URL(url);if(u.hostname.includes('youtu.be'))return u.pathname.slice(1);return u.searchParams.get('v')||''}catch{return''}}

const METRIC_COLORS={entertainment:'#e74c3c',weirdness:'#9b59b6',gem:'#f39c12',liked:'#2ecc71'};
const METRIC_LABELS={entertainment:'Ent',weirdness:'Weird',gem:'Gem',liked:'Liked'};

function metricBars(m){
  if(!m)return'';
  return Object.entries(m).filter(([,v])=>v>0).map(([k,v])=>
    `<span style="display:inline-flex;align-items:center;gap:2px;font-size:.6rem;color:${METRIC_COLORS[k]||'#888'}"><b>${METRIC_LABELS[k]||k}</b>${'&#9733;'.repeat(v)}</span>`
  ).join(' ');
}

async function showSummary(){
  showFooter();
  const list=document.getElementById('summaryList');
  if(!sessionRounds.length){list.innerHTML='<div class="hist-empty">No rounds played.</div>';document.getElementById('summaryAvg').textContent='';showScreen('summary-screen');return}
  const cardColors=['#1a2535','#1f1a30','#1a2a25','#2a1a1a','#1a1a2a','#251a20','#1a2520','#201a2a'];
  let totalM={entertainment:0,weirdness:0,gem:0,liked:0},countM={entertainment:0,weirdness:0,gem:0,liked:0},html='';
  for(let i=0;i<sessionRounds.length;i++){
    const r=sessionRounds[i];
    const m=r.metrics||{};
    for(const k of ['entertainment','weirdness','gem','liked']){if(m[k]>0){totalM[k]+=m[k];countM[k]++}}
    const vid=r.link?getVideoId(r.link):'',thumb=vid?`https://img.youtube.com/vi/${vid}/mqdefault.jpg`:'';
    const bg=cardColors[i%cardColors.length];
    html+=`<div class="summary-card" style="animation-delay:${i*80}ms;background:${bg};border-color:${bg}">${thumb?`<img class="sc-thumb" src="${thumb}">`:''}
      <div class="sc-num" style="color:${['#e74c3c','#f39c12','#2ecc71','#3498db','#9b59b6','#e91e63','#00bcd4','#ff5722'][i%8]}">#${i+1}</div>
      <div class="sc-body"><div class="sc-search">${esc(r.search)}</div>
      <div class="sc-vid-title" id="sc-t-${i}"></div><div class="sc-vid-views" id="sc-a-${i}"></div>
      ${r.link?`<div class="sc-link"><a href="${esc(r.link)}" target="_blank">${esc(r.link)}</a></div>`:'<div class="sc-nolink">No video</div>'}
      <div style="margin-top:3px">${metricBars(m)||'<span style="font-size:.6rem;color:#444">Not rated</span>'}</div></div></div>`;
  }
  list.innerHTML=html;
  // Build avg summary with per-metric breakdown
  let avgHtml=`<div style="font-size:.85rem;margin-bottom:4px">${sessionRounds.length} rounds</div>`;
  for(const k of ['entertainment','weirdness','gem','liked']){
    const avg=countM[k]>0?(totalM[k]/countM[k]).toFixed(1):'--';
    avgHtml+=`<span style="color:${METRIC_COLORS[k]};margin:0 8px;font-weight:700">${METRIC_LABELS[k]}: ${avg}</span>`;
  }
  document.getElementById('summaryAvg').innerHTML=avgHtml;
  showScreen('summary-screen');
  for(let i=0;i<sessionRounds.length;i++){if(sessionRounds[i].link)fetchVideoInfo(sessionRounds[i].link).then(info=>{if(!info)return;const t=document.getElementById('sc-t-'+i),a=document.getElementById('sc-a-'+i);if(t)t.textContent=info.title||'';if(a)a.textContent=info.author_name?'by '+info.author_name:''})}
}

// ═══════════════════════════════════
//  BINGO
// ═══════════════════════════════════
function getMosaicSrc(){return IMG_URLS.mosaic||IMG_URLS.avatar}

// 50 unique SVG daub stamp generators - no two repeat per game
const STAMP_GENERATORS=[
  // Circles with variations
  (c)=>`<circle cx="50" cy="50" r="42" fill="${c}"/>`,
  (c)=>`<circle cx="50" cy="50" r="38" fill="${c}" stroke="${c}" stroke-width="6" fill-opacity=".6"/>`,
  (c)=>`<circle cx="50" cy="50" r="44" fill="none" stroke="${c}" stroke-width="8"/>`,
  (c)=>`<circle cx="50" cy="50" r="36" fill="${c}"/><circle cx="50" cy="50" r="44" fill="none" stroke="${c}" stroke-width="3" opacity=".5"/>`,
  (c)=>`<circle cx="50" cy="50" r="40" fill="${c}" opacity=".7"/><circle cx="46" cy="46" r="12" fill="#fff" opacity=".2"/>`,
  // Stars
  (c)=>`<polygon points="50,8 61,38 94,38 67,56 78,88 50,70 22,88 33,56 6,38 39,38" fill="${c}"/>`,
  (c)=>`<polygon points="50,10 58,35 85,35 63,52 72,78 50,62 28,78 37,52 15,35 42,35" fill="${c}" stroke="${c}" stroke-width="3"/>`,
  (c)=>`<polygon points="50,5 62,40 95,40 68,60 79,95 50,72 21,95 32,60 5,40 38,40" fill="none" stroke="${c}" stroke-width="5"/>`,
  // Crosses / X marks
  (c)=>`<path d="M20,20 L80,80 M80,20 L20,80" stroke="${c}" stroke-width="12" stroke-linecap="round"/>`,
  (c)=>`<path d="M25,25 L75,75 M75,25 L25,75" stroke="${c}" stroke-width="8" stroke-linecap="round"/><circle cx="50" cy="50" r="8" fill="${c}"/>`,
  (c)=>`<rect x="20" y="42" width="60" height="16" rx="4" fill="${c}" transform="rotate(45,50,50)"/><rect x="20" y="42" width="60" height="16" rx="4" fill="${c}" transform="rotate(-45,50,50)"/>`,
  // Diamonds
  (c)=>`<polygon points="50,6 94,50 50,94 6,50" fill="${c}"/>`,
  (c)=>`<polygon points="50,10 90,50 50,90 10,50" fill="none" stroke="${c}" stroke-width="6"/>`,
  (c)=>`<polygon points="50,12 88,50 50,88 12,50" fill="${c}" opacity=".5"/><polygon points="50,25 75,50 50,75 25,50" fill="${c}"/>`,
  // Hearts
  (c)=>`<path d="M50,85 C20,60 5,35 25,20 C35,12 50,20 50,30 C50,20 65,12 75,20 C95,35 80,60 50,85Z" fill="${c}"/>`,
  (c)=>`<path d="M50,80 C25,58 10,38 28,24 C36,18 48,22 50,32 C52,22 64,18 72,24 C90,38 75,58 50,80Z" fill="none" stroke="${c}" stroke-width="5"/>`,
  // Squares / Rects
  (c)=>`<rect x="12" y="12" width="76" height="76" rx="8" fill="${c}"/>`,
  (c)=>`<rect x="15" y="15" width="70" height="70" rx="6" fill="none" stroke="${c}" stroke-width="6"/>`,
  (c)=>`<rect x="10" y="10" width="80" height="80" fill="${c}" opacity=".4"/><rect x="22" y="22" width="56" height="56" fill="${c}" opacity=".6"/>`,
  (c)=>`<rect x="18" y="18" width="64" height="64" rx="12" fill="${c}" transform="rotate(15,50,50)"/>`,
  // Triangles
  (c)=>`<polygon points="50,8 92,88 8,88" fill="${c}"/>`,
  (c)=>`<polygon points="50,12 88,85 12,85" fill="none" stroke="${c}" stroke-width="5"/>`,
  (c)=>`<polygon points="50,88 8,12 92,12" fill="${c}"/>`,
  // Splatters / blobs
  (c)=>`<circle cx="50" cy="50" r="30" fill="${c}"/><circle cx="30" cy="35" r="14" fill="${c}"/><circle cx="72" cy="38" r="12" fill="${c}"/><circle cx="35" cy="68" r="10" fill="${c}"/><circle cx="68" cy="65" r="13" fill="${c}"/>`,
  (c)=>`<circle cx="50" cy="50" r="25" fill="${c}"/><circle cx="28" cy="40" r="16" fill="${c}" opacity=".7"/><circle cx="70" cy="42" r="14" fill="${c}" opacity=".7"/><circle cx="42" cy="72" r="12" fill="${c}" opacity=".6"/><circle cx="62" cy="70" r="11" fill="${c}" opacity=".6"/><circle cx="50" cy="28" r="13" fill="${c}" opacity=".6"/>`,
  // Spirals / swirls (approximated)
  (c)=>`<circle cx="50" cy="50" r="40" fill="none" stroke="${c}" stroke-width="4"/><circle cx="50" cy="50" r="28" fill="none" stroke="${c}" stroke-width="4"/><circle cx="50" cy="50" r="16" fill="none" stroke="${c}" stroke-width="4"/><circle cx="50" cy="50" r="6" fill="${c}"/>`,
  // Checkmark
  (c)=>`<path d="M18,52 L38,72 L82,28" fill="none" stroke="${c}" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>`,
  (c)=>`<path d="M20,50 L40,70 L80,25" fill="none" stroke="${c}" stroke-width="8" stroke-linecap="round"/><circle cx="50" cy="50" r="44" fill="none" stroke="${c}" stroke-width="3" opacity=".4"/>`,
  // Paw print
  (c)=>`<ellipse cx="50" cy="58" rx="18" ry="15" fill="${c}"/><circle cx="34" cy="38" r="8" fill="${c}"/><circle cx="66" cy="38" r="8" fill="${c}"/><circle cx="24" cy="50" r="7" fill="${c}"/><circle cx="76" cy="50" r="7" fill="${c}"/>`,
  // Donut
  (c)=>`<circle cx="50" cy="50" r="40" fill="${c}"/><circle cx="50" cy="50" r="18" fill="#161625"/>`,
  // Target
  (c)=>`<circle cx="50" cy="50" r="42" fill="${c}" opacity=".3"/><circle cx="50" cy="50" r="30" fill="${c}" opacity=".5"/><circle cx="50" cy="50" r="18" fill="${c}" opacity=".7"/><circle cx="50" cy="50" r="8" fill="${c}"/>`,
  // Hexagon
  (c)=>`<polygon points="50,6 90,28 90,72 50,94 10,72 10,28" fill="${c}"/>`,
  (c)=>`<polygon points="50,10 86,30 86,70 50,90 14,70 14,30" fill="none" stroke="${c}" stroke-width="5"/>`,
  // Octagon
  (c)=>`<polygon points="30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30" fill="${c}"/>`,
  // Lightning bolt
  (c)=>`<polygon points="55,5 30,48 48,48 42,95 72,45 52,45" fill="${c}"/>`,
  // Flame
  (c)=>`<path d="M50,8 C65,30 80,45 75,65 C72,80 58,92 50,92 C42,92 28,80 25,65 C20,45 35,30 50,8Z" fill="${c}"/><path d="M50,40 C58,52 62,60 58,72 C56,78 52,82 50,82 C48,82 44,78 42,72 C38,60 42,52 50,40Z" fill="#161625" opacity=".3"/>`,
  // Music note
  (c)=>`<circle cx="35" cy="70" r="12" fill="${c}"/><rect x="45" y="18" width="5" height="55" fill="${c}"/><path d="M50,18 Q70,10 75,25 Q78,35 60,32 L50,30Z" fill="${c}"/>`,
  // Play button
  (c)=>`<circle cx="50" cy="50" r="42" fill="${c}" opacity=".4"/><polygon points="38,25 38,75 78,50" fill="${c}"/>`,
  // Skull (simple)
  (c)=>`<circle cx="50" cy="42" r="30" fill="${c}"/><rect x="35" y="65" width="30" height="15" rx="4" fill="${c}"/><circle cx="38" cy="38" r="8" fill="#161625"/><circle cx="62" cy="38" r="8" fill="#161625"/><ellipse cx="50" cy="52" rx="5" ry="6" fill="#161625"/>`,
  // Crown
  (c)=>`<polygon points="10,70 10,35 28,50 50,25 72,50 90,35 90,70" fill="${c}"/><rect x="10" y="70" width="80" height="12" rx="3" fill="${c}"/>`,
  // Eye
  (c)=>`<ellipse cx="50" cy="50" rx="42" ry="25" fill="${c}"/><circle cx="50" cy="50" r="15" fill="#161625"/><circle cx="50" cy="50" r="7" fill="${c}"/>`,
  // Crescent moon
  (c)=>`<circle cx="50" cy="50" r="38" fill="${c}"/><circle cx="62" cy="42" r="30" fill="#161625"/>`,
  // Flower
  (c)=>`<circle cx="50" cy="28" r="14" fill="${c}" opacity=".7"/><circle cx="72" cy="42" r="14" fill="${c}" opacity=".7"/><circle cx="65" cy="68" r="14" fill="${c}" opacity=".7"/><circle cx="35" cy="68" r="14" fill="${c}" opacity=".7"/><circle cx="28" cy="42" r="14" fill="${c}" opacity=".7"/><circle cx="50" cy="50" r="12" fill="${c}"/>`,
  // Recycle symbol (simplified)
  (c)=>`<polygon points="50,15 65,40 35,40" fill="none" stroke="${c}" stroke-width="5"/><polygon points="25,70 50,45 40,70" fill="none" stroke="${c}" stroke-width="5" transform="rotate(120,50,50)"/><polygon points="25,70 50,45 40,70" fill="none" stroke="${c}" stroke-width="5" transform="rotate(240,50,50)"/>`,
  // Thumbs up
  (c)=>`<path d="M30,50 L30,82 L55,82 L65,50 L55,18 L45,18 L42,40 L30,40Z" fill="${c}"/><rect x="12" y="50" width="20" height="32" rx="4" fill="${c}" opacity=".7"/>`,
  // Explosion/burst
  (c)=>`<polygon points="50,5 56,35 85,15 65,40 95,50 65,60 85,85 56,65 50,95 44,65 15,85 35,60 5,50 35,40 15,15 44,35" fill="${c}"/>`,
  // Ring of dots
  (c)=>{let s='';for(let a=0;a<360;a+=36){const x=50+35*Math.cos(a*Math.PI/180),y=50+35*Math.sin(a*Math.PI/180);s+=`<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="7" fill="${c}"/>`}return s},
  // Crosshair
  (c)=>`<circle cx="50" cy="50" r="38" fill="none" stroke="${c}" stroke-width="4"/><line x1="50" y1="5" x2="50" y2="95" stroke="${c}" stroke-width="3"/><line x1="5" y1="50" x2="95" y2="50" stroke="${c}" stroke-width="3"/><circle cx="50" cy="50" r="8" fill="${c}"/>`,
  // Hashtag
  (c)=>`<rect x="30" y="10" width="8" height="80" rx="2" fill="${c}" transform="rotate(10,50,50)"/><rect x="58" y="10" width="8" height="80" rx="2" fill="${c}" transform="rotate(-5,50,50)"/><rect x="10" y="32" width="80" height="8" rx="2" fill="${c}"/><rect x="10" y="58" width="80" height="8" rx="2" fill="${c}"/>`,
  // Infinity
  (c)=>`<path d="M50,50 C50,30 20,20 20,50 C20,80 50,70 50,50 C50,30 80,20 80,50 C80,80 50,70 50,50Z" fill="none" stroke="${c}" stroke-width="6"/>`,
];

let gameStamps=[]; // 25 unique stamps for this game
function pickGameStamps(){
  const pool=[...Array(STAMP_GENERATORS.length).keys()];
  shuffle(pool);
  gameStamps=pool.slice(0,25);
}
function getDaubSVG(cellIdx){
  const gen=STAMP_GENERATORS[gameStamps[cellIdx]||0];
  const col=getComputedStyle(document.documentElement).getPropertyValue('--daub').trim()||'rgba(76,175,80,.65)';
  return`<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">${gen(col)}</svg>`;
}

function buildBingoFromPicked(){
  if(!bingoPicked)return;
  const grid=document.getElementById('bingoGrid');grid.innerHTML='';
  const cols=['B','I','N','G','O'];
  const mSrc=getMosaicSrc();
  for(let row=0;row<5;row++){for(let ci=0;ci<5;ci++){
    const isFree=setupFreeSpace&&row===2&&ci===2,idx=row*5+ci;
    const cell=document.createElement('div');cell.className='bingo-cell'+(isFree?' free':'');
    // Mosaic: <img> inside overflow:hidden wrapper, positioned to show this cell's 1/25th slice
    const imgLeft=-(ci*100);const imgTop=-(row*100);
    cell.innerHTML=`<div class="mosaic-wrap"><img src="${mSrc}" style="left:${imgLeft}%;top:${imgTop}%" alt=""></div><span style="position:relative;z-index:1">${isFree?'FREE SPACE':esc(bingoPicked[cols[ci]][row])}</span><div class="daub"><div class="daub-mark">${getDaubSVG(idx)}</div></div>`;
    // Wave delay: diagonal ripple from top-left (col+row determines wave phase)
    const waveDelay=((ci+row)*0.15).toFixed(2);
    cell.style.setProperty('--wave-delay',waveDelay+'s');
    if(isFree){
      cell.style.animation=`cellReveal .4s ${idx*35}ms ease both, bingoWave 4s ${waveDelay}s ease-in-out infinite, freeShimmer 6s ease-in-out infinite`;
    }else{
      cell.style.animation=`cellReveal .4s ${idx*35}ms ease both, bingoWave 4s ${waveDelay}s ease-in-out infinite`;
    }
    const cellTxt=isFree?'FREE SPACE':bingoPicked[cols[ci]][row];
    cell.onclick=()=>toggleDaub(idx,isFree);
    cell.oncontextmenu=ev=>{ev.preventDefault();previewBingoCell(cellTxt,isFree)};
    cell.addEventListener('touchstart',()=>{window._kvnLpTimer=setTimeout(()=>previewBingoCell(cellTxt,isFree),550)},{passive:true});
    cell.addEventListener('touchend',()=>clearTimeout(window._kvnLpTimer),{passive:true});
    cell.addEventListener('touchmove',()=>clearTimeout(window._kvnLpTimer),{passive:true});
    grid.appendChild(cell);
    if(bingoState[idx])cell.classList.add('daubed');
  }}
  saveBingoState();
  updateAllProximity();
}

function saveBingoState(){
  try{localStorage.setItem('kvn_bingo_state',JSON.stringify({state:bingoState,picked:bingoPicked,gameId:currentGameId}))}catch{}
}

function loadBingoState(){
  try{
    const saved=JSON.parse(localStorage.getItem('kvn_bingo_state')||'null');
    if(saved&&saved.gameId===currentGameId&&saved.state&&saved.picked){
      bingoState=saved.state;
      bingoPicked=saved.picked;
      return true;
    }
  }catch{}
  return false;
}
function pickBingoCategories(){
  const cols=['B','I','N','G','O'];
  bingoPicked={};
  // Shuffle all categories, pick 24 (or 25 if free space is disabled)
  let pool=[...BINGO_LIVE];
  pool=[...new Set(pool)]; // deduplicate
  shuffle(pool);
  const need=setupFreeSpace?24:25;
  const picked=pool.slice(0,need);
  let idx=0;
  for(const c of cols)bingoPicked[c]=[];
  for(let row=0;row<5;row++){
    for(let ci=0;ci<5;ci++){
      if(setupFreeSpace&&row===2&&ci===2)bingoPicked[cols[ci]].push('FREE SPACE');
      else bingoPicked[cols[ci]].push(picked[idx++]||'???');
    }
  }
}

function buildBingo(){
  pickBingoCategories();
  buildBingoFromPicked();
}

function toggleDaub(idx,isFree){if(isFree)return;bingoState[idx]=!bingoState[idx];if(bingoState[idx])lastDaubIdx=idx;document.querySelectorAll('#bingoGrid .bingo-cell')[idx].classList.toggle('daubed',bingoState[idx]);saveBingoState();updateAllProximity();if(bingoState[idx])checkBingo()}

// Returns all winning lines (rows, cols, diagonals) as arrays of indices
function getWinLines(){
  const lines=[];
  for(let r=0;r<5;r++)lines.push([r*5,r*5+1,r*5+2,r*5+3,r*5+4]);
  for(let c=0;c<5;c++)lines.push([c,5+c,10+c,15+c,20+c]);
  lines.push([0,6,12,18,24]);lines.push([4,8,12,16,20]);
  return lines;
}

// For each daubed cell, find the best (most-filled) line it belongs to
function getCellProximity(idx){
  const lines=getWinLines();
  let best=0;
  for(const line of lines){
    if(!line.includes(idx))continue;
    const filled=line.filter(i=>bingoState[i]).length;
    if(filled>best)best=filled;
  }
  return best;
}

function updateAllProximity(){
  const cells=document.querySelectorAll('#bingoGrid .bingo-cell');
  cells.forEach((cell,idx)=>{
    cell.classList.remove('prox-2','prox-3','prox-4');
    if(!bingoState[idx])return;
    const p=getCellProximity(idx);
    if(p>=4)cell.classList.add('prox-4');
    else if(p>=3)cell.classList.add('prox-3');
    else if(p>=2)cell.classList.add('prox-2');
  });
}
function setDaubColor(c){const[r,g,b]=[parseInt(c.slice(1,3),16),parseInt(c.slice(3,5),16),parseInt(c.slice(5,7),16)];const o=document.getElementById('daubOpacity').value;document.documentElement.style.setProperty('--daub',`rgba(${r},${g},${b},${o/100})`);localStorage.setItem('kvn_daub',JSON.stringify({color:c,opacity:+o}))}
function setDaubOpacity(v){const c=document.getElementById('daubColor').value;const[r,g,b]=[parseInt(c.slice(1,3),16),parseInt(c.slice(3,5),16),parseInt(c.slice(5,7),16)];document.documentElement.style.setProperty('--daub',`rgba(${r},${g},${b},${v/100})`);localStorage.setItem('kvn_daub',JSON.stringify({color:c,opacity:+v}))}
function resetBingoCard(){bingoState=Array(25).fill(false);if(setupFreeSpace)bingoState[12]=true;bingoWinShown=false;buildBingoFromPicked();saveBingoState()}
function checkBingo(){if(bingoWinShown)return;const s=bingoState;for(let r=0;r<5;r++)if(s[r*5]&&s[r*5+1]&&s[r*5+2]&&s[r*5+3]&&s[r*5+4]){triggerBingo();return}for(let c=0;c<5;c++)if(s[c]&&s[5+c]&&s[10+c]&&s[15+c]&&s[20+c]){triggerBingo();return}if(s[0]&&s[6]&&s[12]&&s[18]&&s[24]){triggerBingo();return}if(s[4]&&s[8]&&s[12]&&s[16]&&s[20])triggerBingo()}
function triggerBingo(){bingoWinShown=true;document.getElementById('easterMsg').textContent=EASTER_EGGS[Math.floor(Math.random()*EASTER_EGGS.length)];document.getElementById('bingoWin').classList.add('show');const mainEl=document.querySelector('.main');mainEl.style.animation='screenShake .6s';setTimeout(()=>mainEl.style.animation='',700);spawnConfetti();playBingoWinSound();markAchievement('bingo');checkAchievements()}
function dismissBingoWin(){document.getElementById('bingoWin').classList.remove('show');document.getElementById('confettiBox').innerHTML=''}

// Lose-a-Space: count daubed (non-free) cells, dramatically pick one, unmark it.
// Open the bingo overlay so the player can see the cell get poofed.
function triggerLoseSpace(){
  const overlay=document.getElementById('loseSpaceOverlay');
  const sub=document.getElementById('lsSub'),roll=document.getElementById('lsRoll'),tgt=document.getElementById('lsTarget'),dismiss=document.getElementById('lsDismiss');
  sub.textContent='';roll.textContent='';tgt.textContent='';dismiss.classList.remove('show');
  overlay.classList.add('show');
  const mainEl=document.querySelector('.main');if(mainEl){mainEl.style.animation='screenShake .5s';setTimeout(()=>mainEl.style.animation='',600)}
  const marked=bingoState.map((v,i)=>(v&&(!setupFreeSpace||i!==12))?i:null).filter(i=>i!==null);
  if(!marked.length){
    sub.textContent='Lucky escape — no marked spaces to lose.';
    dismiss.classList.add('show');
    return;
  }
  setTimeout(()=>{sub.textContent=`You have ${marked.length} marked space${marked.length===1?'':'s'}…`},350);
  // Roll a random index 1..N with a quick rolling animation
  setTimeout(()=>{
    const finalPick=Math.floor(Math.random()*marked.length);
    const targetIdx=marked[finalPick];
    const dur=1200,t0=performance.now();
    (function frame(now){
      const p=Math.min((now-t0)/dur,1);
      if(p<1){
        roll.textContent='#'+(Math.floor(Math.random()*marked.length)+1);
        requestAnimationFrame(frame);
      }else{
        roll.textContent='#'+(finalPick+1);
        playLoseSound();
        unmarkBingoCell(targetIdx);
      }
    })(performance.now());
  },1100);
}

function unmarkBingoCell(idx){
  const cells=document.querySelectorAll('#bingoGrid .bingo-cell');
  const cell=cells[idx];
  const cols=['B','I','N','G','O'];
  const row=Math.floor(idx/5),ci=idx%5;
  const label=bingoPicked&&bingoPicked[cols[ci]]?bingoPicked[cols[ci]][row]:'space';
  document.getElementById('lsTarget').textContent=`${cols[ci]} · ${label}`;
  if(cell){
    cell.classList.add('losing');
    setTimeout(()=>{
      cell.classList.remove('losing','daubed');
      bingoState[idx]=false;
      saveBingoState();
      updateAllProximity();
      document.getElementById('lsDismiss').classList.add('show');
    },550);
  }else{
    bingoState[idx]=false;saveBingoState();updateAllProximity();
    document.getElementById('lsDismiss').classList.add('show');
  }
}

function closeLoseSpace(){
  document.getElementById('loseSpaceOverlay').classList.remove('show');
  // Return to wheel for next spin
  setTimeout(()=>{showScreen('wheel-screen');pickWheelFormats();drawWheel();resetPointer()},250);
}
function spawnConfetti(){const box=document.getElementById('confettiBox');box.innerHTML='';const defaultColors=['#e74c3c','#f39c12','#2ecc71','#3498db','#9b59b6','#e91e63','#00bcd4','#ff5722','#ffeb3b','#8bc34a'];const colors=CONFETTI_HOLIDAY_COLORS||defaultColors;for(let i=0;i<140;i++){const c=document.createElement('div');c.className='confetti';const sz=6+Math.random()*10;c.style.cssText=`width:${sz}px;height:${sz}px;background:${colors[Math.floor(Math.random()*colors.length)]};left:${Math.random()*100}%;top:-20px;border-radius:${Math.random()>.5?'50%':'2px'};animation:confettiFall ${2+Math.random()*3}s ${Math.random()*1.5}s ease-in forwards`;box.appendChild(c)}}

// ═══════════════════════════════════
//  PANELS
// ═══════════════════════════════════
function toggleBingo(){const o=document.getElementById('bingoOverlay');o.classList.toggle('open');document.getElementById('bingoToggle').classList.toggle('active',o.classList.contains('open'))}
function toggleFormatPanel(){const p=document.getElementById('formatPanel');p.classList.toggle('open');document.getElementById('formatsBtn').classList.toggle('active',p.classList.contains('open'))}
function toggleHistory(){const p=document.getElementById('historyPanel');p.classList.toggle('open');document.getElementById('historyBtn').classList.toggle('active',p.classList.contains('open'));if(p.classList.contains('open'))renderHistory()}

// Sonder etymology modal — opens when the H1 on the start screen is clicked.
function showSonderModal(){const m=document.getElementById('sonderModal');if(m)m.classList.add('show')}
function closeSonderModal(){const m=document.getElementById('sonderModal');if(m)m.classList.remove('show')}

// ─── KVN AUST Recycle Bin video gallery ───
// Curated to ONLY include Recycle Bin / 0-View / mapping topic videos. Update this list
// when KVN drops a new one. Dates are ISO YYYY-MM-DD; videos within 24h get a NEW highlight.
const KVN_RECYCLE_BIN_VIDEOS=[
  {id:'RmQ24cXNOfA',title:'Exploring "0-View YouTube" until I get a Bingo (Hard Mode)',published:'2026-04-29'},
  {id:'efXJwWPxOOw',title:'The oldest YouTube video with NO VIEWS has been found',published:'2026-04-15'},
  {id:'LHyzYxSEtpg',title:'Exploring "0-View YouTube" until I get a Bingo #4',published:'2026-03-29'},
  {id:'PcLeBHcF39k',title:'We mapped out "0-view YouTube" | YouTube\'s Recycle Bin 5',published:'2025-12-29'},
  {id:'Mx-Mna6u4lc',title:'Exploring "0-View YouTube" until I get a Bingo (Halloween)',published:'2025-10-29'},
  {id:'UVfMdyTD0W4',title:'Weird Anomalies on 0-View YouTube',published:'2025-10-29'},
  {id:'mfyKkr4o1jg',title:'Exploring "0-View YouTube" Until We Get a Bingo (RACE)',published:'2025-09-29'},
  {id:'4s12Hs40rUU',title:'I mapped out "0-view YouTube" | YouTube\'s Recycle Bin 4',published:'2025-09-29'},
  {id:'id1vDi42kjU',title:'Finding Low-view Videos from "Old YouTube" (2005-2007)',published:'2025-08-29'},
  {id:'zYmkOInF6Us',title:'Exploring "0-View YouTube" Until I Get a Bingo',published:'2025-08-29'},
  {id:'KBJB9Cj8Qj8',title:'YouTube\'s Recycle Bin: The Rarest, Oldest, & Least Viewed Videos 2',published:'2025-04-29'},
  {id:'8uHFm6LK6PE',title:'I mapped out "0-view YouTube" | YouTube\'s Recycle Bin 3',published:'2025-04-29'},
  {id:'QDWkJeYtz0o',title:'YouTube\'s Recycle Bin: Weird & Funny Finds w/ 0 views #3',published:'2025-04-29'},
  {id:'igGBVqFzMcs',title:'YouTube\'s Recycle Bin: The Rarest, Oldest, & Least Viewed Videos 1',published:'2024-04-29'},
  {id:'0TBxX9CB12o',title:'YouTube\'s Recycle Bin: Weird & Funny Finds w/ 0 views #2',published:'2024-04-29'},
  {id:'9Zo4lv0CbHU',title:'YouTube\'s Recycle Bin: Weird & Funny Finds w/ 0 views #1',published:'2024-04-29'},
  {id:'zc3SpIc8OUE',title:'I mapped out "0-view YouTube" | YouTube\'s Recycle Bin 2',published:'2024-04-29'},
  {id:'-0kmMJ6F9WM',title:'I mapped out "0-view YouTube" | YouTube\'s Recycle Bin',published:'2024-04-29'}
];

function isKvnVideoNew(pub){
  if(!pub)return false;
  const d=new Date(pub+'T00:00:00');
  const ms=Date.now()-d.getTime();
  return ms>=0 && ms < 24*60*60*1000;
}

function fmtKvnDate(pub){
  if(!pub)return'';
  try{return new Date(pub+'T00:00:00').toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'})}catch{return pub}
}

function renderKvnVideos(){
  const list=document.getElementById('kvnVideosList');
  if(!list)return;
  list.innerHTML=KVN_RECYCLE_BIN_VIDEOS.map(v=>{
    const isNew=isKvnVideoNew(v.published);
    const newBadge=isNew?'<span class="kvp-new-badge">NEW</span>':'';
    return `<a class="kvp-card${isNew?' is-new':''}" href="https://www.youtube.com/watch?v=${esc(v.id)}" target="_blank" rel="noopener">${newBadge}<img class="kvp-thumb" src="https://i.ytimg.com/vi/${esc(v.id)}/mqdefault.jpg" loading="lazy" alt=""><div class="kvp-info"><div class="kvp-title">${esc(v.title)}</div><div class="kvp-meta">${esc(fmtKvnDate(v.published))}${isNew?' · <span style="color:#e74c3c;font-weight:900">JUST DROPPED</span>':''}</div></div></a>`;
  }).join('');
}

function toggleKvnVideos(){
  const p=document.getElementById('kvnVideosPanel');
  p.classList.toggle('open');
  if(p.classList.contains('open'))renderKvnVideos();
}

// On load: show NEW dot on the start-screen button if any video is fresh
function refreshKvnVideoDot(){
  const dot=document.getElementById('kvnVideosNewDot');
  if(!dot)return;
  const anyNew=KVN_RECYCLE_BIN_VIDEOS.some(v=>isKvnVideoNew(v.published));
  dot.style.display=anyNew?'':'none';
}
let activeFpCat='all';
function buildFormatPanel(){
  markNewFormats();
  const list=document.getElementById('formatList');list.innerHTML='';
  formats.forEach((f,i)=>{
    const d=document.createElement('div');d.className='fp-item';d.dataset.label=f.label.toLowerCase();
    d.dataset.sec=f.sec||'numbered';d.dataset.idx=i;
    let type='numbered',typeLabel='',rangeHtml='';
    if(f.sp==='static'){type='static';typeLabel=f.sec==='extension'?'ext':'phrase'}
    else if(f.sp==='date'||f.sp==='shortdate'||f.sp==='monthdate'){type='date'}
    else if(f.sp==='hex4'||f.sp==='hexN'){type='special';typeLabel=f.sp}
    else if(f.sp==='time'){type='special';typeLabel='time'}
    else{typeLabel=`${String(f.min||0).padStart(f.pad||4,'0')}-${String(f.max||9999).padStart(f.pad||4,'0')}`}
    if(type==='date'){
      // Era micro-timeline: the format's active years on a 2005–2026 track
      const lo=f.minY||2006,hi=f.maxY||2026;
      const left=Math.max(0,Math.min(94,(lo-2005)/21*100)).toFixed(0);
      const width=Math.max(6,Math.min(100,(hi-lo+1)/21*100)).toFixed(0);
      rangeHtml=`<span class="fp-era" title="${lo}–${hi}"><i style="left:${left}%;width:${width}%"></i><em>${String(lo).slice(-2)}–${String(hi).slice(-2)}</em></span>`;
    }else if(type==='numbered'){rangeHtml=`<span class="fp-range">${typeLabel}</span>`}
    else{rangeHtml=`<span class="fp-type ${type}">${typeLabel}</span>`}
    const isFav=favFormats.has(f.label);
    d.innerHTML=`<input type="checkbox" ${selectedFormats.has(i)?'checked':''} onchange="toggleFormat(${i},this.checked)"><span>${esc(f.label)}</span>${f.isNew?'<span class="fp-new">NEW</span>':''}${rangeHtml}<button class="fp-fav${isFav?' on':''}" onclick="toggleFavIdx(${i},this)" aria-label="Favorite" title="Favorite">${isFav?'★':'☆'}</button>`;
    list.appendChild(d);
  });
  applyFpFilter();
}
function fpSetCat(btn){
  activeFpCat=btn.dataset.cat;
  document.querySelectorAll('.fp-cat').forEach(b=>b.classList.toggle('active',b===btn));
  applyFpFilter();
}
function filterFormats(q){
  applyFpFilter();
}
function applyFpFilter(){
  const q=(document.getElementById('fpSearch')||{}).value||'';
  const lq=q.toLowerCase();
  document.querySelectorAll('#formatList .fp-item').forEach(d=>{
    const matchText=!lq||d.dataset.label.includes(lq);
    const matchCat=activeFpCat==='all'||(activeFpCat==='fav'?favFormats.has((formats[+d.dataset.idx]||{}).label):d.dataset.sec===activeFpCat);
    d.classList.toggle('hidden',!matchText||!matchCat);
  });
  updateFpCount();
}
function updateFpCount(){
  const total=formats.length,selected=selectedFormats.size;
  const visible=document.querySelectorAll('#formatList .fp-item:not(.hidden)').length;
  const el=document.getElementById('fpCount');
  if(el)el.textContent=`${selected} selected of ${total} formats`+(visible<total?` (${visible} shown)`:'');
}
function toggleFormat(i,ch){if(ch)selectedFormats.add(i);else selectedFormats.delete(i)}
function fpSelectAll(){selectedFormats=new Set(formats.map((_,i)=>i));buildFormatPanel()}
function fpSelectNone(){selectedFormats.clear();buildFormatPanel()}
function fpSelectRandom(){selectedFormats.clear();const p=[...formats.keys()];shuffle(p);p.slice(0,20).forEach(i=>selectedFormats.add(i));buildFormatPanel()}
// KVN AUST's curated "Bingo Picks" - formats that consistently produce good results
const KVN_BINGO_PICKS=['IMG XXXX','CIMGXXXX','IMGPXXXX','MVI XXXX','DSC XXXX','DSCFXXXX','VideoXXXX','MAQ0XXXX','100 XXXX','M2U0XXXX','XXXX.MP4','VID0XXXX','P100XXXX','Trim 4XXX','"HHMMSS"','VID YYYYMMDD','Capture YYYYMMDD','WIN YYYYMMDD','WP YYYYMMDD'];
function fpBingoPicks(){selectedFormats.clear();formats.forEach((f,i)=>{if(KVN_BINGO_PICKS.includes(f.label))selectedFormats.add(i)});buildFormatPanel();showToast(`KVN's Bingo Picks: ${selectedFormats.size} formats selected`)}

function renderHistory(){
  const list=document.getElementById('historyList'),games=getAllGames();
  if(!games.length){list.innerHTML='<div class="hist-empty">No games yet!</div>';return}
  list.innerHTML=games.map((g,gi)=>{
    // Compute per-metric averages across all rounds in this game
    const mTot={entertainment:0,weirdness:0,gem:0,liked:0},mCnt={entertainment:0,weirdness:0,gem:0,liked:0};
    g.rounds.forEach(r=>{const m=r.metrics||{};for(const k of ['entertainment','weirdness','gem','liked']){if(m[k]>0){mTot[k]+=m[k];mCnt[k]++}}});
    const avgLine=['entertainment','weirdness','gem','liked'].map(k=>{
      const a=mCnt[k]>0?(mTot[k]/mCnt[k]).toFixed(1):'--';
      return`<span style="color:${METRIC_COLORS[k]};font-size:.6rem">${METRIC_LABELS[k]}:${a}</span>`;
    }).join(' ');
    return`<div class="game-block"><div class="game-header"><span>Game ${games.length-gi} &middot; ${new Date(g.date).toLocaleDateString()} &middot; ${g.rounds.length}r</span><span class="gh-avg">${avgLine}</span></div>${g.rounds.map(r=>`<div class="hist-item" onclick="copyText('${esc(r.search).replace(/'/g,"\\'")}')"><div class="hi-search">${esc(r.search)}</div><div class="hi-format">${esc(r.format)} ${metricBars(r.metrics)}</div>${r.link?`<div class="hi-date"><a href="${esc(r.link)}" target="_blank" style="color:#5b7fc7;text-decoration:none" onclick="event.stopPropagation()">${esc(r.link).substring(0,45)}</a></div>`:''}${r.datePosted?`<div class="hi-date" style="color:#e74c3c">Posted: ${esc(r.datePosted)}${r.viewsWhenFound?' · '+esc(r.viewsWhenFound)+' views':''}${r.channelVids?' · '+esc(r.channelVids)+' ch vids':''}</div>`:''}<div class="hi-date">${new Date(r.date).toLocaleString()}</div></div>`).join('')}</div>`}).join('')}
function copyText(t){navigator.clipboard.writeText(t).then(()=>showToast('Copied: '+t)).catch(()=>{})}

// ═══════════════════════════════════
//  CREDITS MODAL (fetches from GitHub MD)
// ═══════════════════════════════════
let creditsLoaded=false;
function showCredits(){
  document.getElementById('creditsOverlay').classList.add('open');
  if(!creditsLoaded)fetchCredits();
}
function closeCredits(){document.getElementById('creditsOverlay').classList.remove('open')}

function showGallery(){
  document.getElementById('galleryOverlay').classList.add('open');
  renderGallery();
}
function closeGallery(){document.getElementById('galleryOverlay').classList.remove('open')}

function renderGallery(){
  const grid=document.getElementById('galleryGrid');
  const search=(document.getElementById('galSearch').value||'').toLowerCase();
  const sort=document.getElementById('galSort').value;
  // Collect all videos from game history
  let videos=[];
  getAllGames().forEach(g=>g.rounds.forEach(r=>{
    if(!r.link)return;
    const vid=getVideoId(r.link);if(!vid)return;
    videos.push({vid,search:r.search||'',format:r.format||'',link:r.link,
      date:r.date,metrics:r.metrics||{},datePosted:r.datePosted||'',views:r.viewsWhenFound||''});
  }));
  // Dedup by video ID
  const seen=new Set();videos=videos.filter(v=>{if(seen.has(v.vid))return false;seen.add(v.vid);return true});
  // Filter
  if(search)videos=videos.filter(v=>(v.search+v.format+v.vid).toLowerCase().includes(search));
  // Sort
  if(sort==='oldest')videos.sort((a,b)=>new Date(a.datePosted||a.date)-new Date(b.datePosted||b.date));
  else if(sort==='views')videos.sort((a,b)=>(parseInt(a.views)||9999)-(parseInt(b.views)||9999));
  else if(sort==='rating')videos.sort((a,b)=>{const ar=Object.values(b.metrics).reduce((s,v)=>s+v,0);const br=Object.values(a.metrics).reduce((s,v)=>s+v,0);return ar-br});
  else videos.sort((a,b)=>new Date(b.date)-new Date(a.date));

  if(!videos.length){grid.innerHTML='<div style="text-align:center;color:#555;font-size:.75rem;padding:20px;grid-column:1/-1">No videos found yet. Play some rounds and paste YouTube links!</div>';return}
  grid.innerHTML=videos.map(v=>{
    const thumb=`https://img.youtube.com/vi/${v.vid}/mqdefault.jpg`;
    const avgR=Object.values(v.metrics).filter(x=>x>0);
    const avg=avgR.length?(avgR.reduce((s,x)=>s+x,0)/avgR.length).toFixed(1):'—';
    return`<div style="background:linear-gradient(145deg,var(--card),#0a0a14);border:1px solid #2a2a40;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.3)" onclick="window.open('${esc(v.link)}','_blank','noopener')" onmouseover="this.style.borderColor='var(--accent)';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='#2a2a40';this.style.transform=''">
      <img src="${thumb}" style="width:100%;aspect-ratio:16/9;object-fit:cover;display:block" alt="${esc(v.search)}" loading="lazy">
      <div style="padding:6px 8px">
        <div style="font-size:.7rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(v.search)}</div>
        <div style="font-size:.58rem;color:#666;display:flex;justify-content:space-between;margin-top:2px">
          <span>${esc(v.format)}</span><span style="color:#f39c12">${avg==='—'?'':'★'+avg}</span>
        </div>
      </div>
    </div>`;
  }).join('');
}

function showAchievements(){
  document.getElementById('achievementsOverlay').classList.add('open');
  checkAchievements();
  const unlocked=getUnlockedAchievements();
  const total=Object.keys(ACHIEVEMENTS).length;
  const done=Object.keys(unlocked).length;
  document.getElementById('achievProgress').textContent=`${done} / ${total} unlocked`;
  const list=document.getElementById('achievList');
  list.innerHTML=Object.entries(ACHIEVEMENTS).map(([id,a])=>{
    const u=unlocked[id];
    const dateStr=u?new Date(u).toLocaleDateString('en-US',{month:'short',day:'numeric'}):'';
    return`<div style="background:${u?'linear-gradient(145deg,#1a2a1a,#0a1a0a)':'linear-gradient(145deg,#1a1a1a,#0a0a0a)'};border:1px solid ${u?'rgba(46,204,113,.3)':'#222'};border-radius:10px;padding:10px;text-align:center;transition:all .2s;${u?'box-shadow:0 0 8px rgba(46,204,113,.1)':'opacity:.5'}">
      <div style="font-size:1.6rem;margin-bottom:4px;${u?'':'filter:grayscale(1) brightness(.5)'}">${a.icon}</div>
      <div style="font-size:.72rem;font-weight:700;color:${u?'#2ecc71':'#555'}">${a.name}</div>
      <div style="font-size:.58rem;color:#666;margin-top:2px">${a.desc}</div>
      ${u?`<div style="font-size:.5rem;color:#444;margin-top:4px">${dateStr}</div>`:''}
    </div>`;
  }).join('');
}
function closeAchievements(){document.getElementById('achievementsOverlay').classList.remove('open')}

function showStats(){
  document.getElementById('statsOverlay').classList.add('open');
  renderStats();
}
function closeStats(){document.getElementById('statsOverlay').classList.remove('open')}

function showShortcuts(){document.getElementById('shortcutsOverlay').classList.add('open')}
function closeShortcuts(){document.getElementById('shortcutsOverlay').classList.remove('open')}

function renderStats(){
  const el=document.getElementById('statsContent');
  const games=getAllGames();
  if(!games.length){el.innerHTML='<div style="text-align:center;color:#555">No games played yet.</div>';return}
  let totalRounds=0,mTot={entertainment:0,weirdness:0,gem:0,liked:0},mCnt={entertainment:0,weirdness:0,gem:0,liked:0};
  let formatCount={},bestVideo=null,bestAvg=0;
  games.forEach(g=>{
    totalRounds+=g.rounds.length;
    g.rounds.forEach(r=>{
      const m=r.metrics||{};
      for(const k of ['entertainment','weirdness','gem','liked']){if(m[k]>0){mTot[k]+=m[k];mCnt[k]++}}
      if(r.format)formatCount[r.format]=(formatCount[r.format]||0)+1;
      const ra=avgMetric(m);
      if(ra>bestAvg&&r.search){bestAvg=ra;bestVideo=r}
    });
  });
  const topFormat=Object.entries(formatCount).sort((a,b)=>b[1]-a[1])[0];
  const uniqueFormats=Object.keys(formatCount).length;
  let html=`<div style="display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:12px">`;
  html+=`<div style="text-align:center;background:var(--card2);padding:10px 18px;border-radius:8px"><div style="font-size:1.4rem;font-weight:900;color:#e74c3c">${games.length}</div><div style="font-size:.65rem;color:#777">Games</div></div>`;
  html+=`<div style="text-align:center;background:var(--card2);padding:10px 18px;border-radius:8px"><div style="font-size:1.4rem;font-weight:900;color:#3498db">${totalRounds}</div><div style="font-size:.65rem;color:#777">Rounds</div></div>`;
  html+=`<div style="text-align:center;background:var(--card2);padding:10px 18px;border-radius:8px"><div style="font-size:1.4rem;font-weight:900;color:#2ecc71">${uniqueFormats}</div><div style="font-size:.65rem;color:#777">Formats Used</div></div>`;
  html+=`</div>`;
  html+=`<div style="font-weight:700;margin-bottom:4px;color:#aaa">Average Ratings</div>`;
  for(const k of ['entertainment','weirdness','gem','liked']){
    const avg=mCnt[k]>0?(mTot[k]/mCnt[k]).toFixed(1):'--';
    html+=`<div style="margin:2px 0"><span style="color:${METRIC_COLORS[k]};font-weight:700">${METRIC_LABELS[k]}</span>: <span style="color:#fff">${avg}</span></div>`;
  }
  if(topFormat){html+=`<div style="margin-top:8px"><span style="font-weight:700;color:#aaa">Most Used Format:</span> <span style="color:#f39c12">${esc(topFormat[0])}</span> <span style="color:#555">(${topFormat[1]}x)</span></div>`}
  if(bestVideo){html+=`<div style="margin-top:8px"><span style="font-weight:700;color:#aaa">Best Rated:</span> <span style="color:#7e9cd8;font-family:'Space Mono',monospace">${esc(bestVideo.search)}</span> <span style="color:#f39c12">(${bestAvg.toFixed(1)})</span></div>`}
  el.innerHTML=html;
}

const CREDIT_COLORS=['#3498db','#2ecc71','#9b59b6','#e67e22','#1abc9c','#e91e63','#00bcd4','#8bc34a','#ff5722','#607d8b','#795548','#4fc3f7','#ab47bc','#26a69a','#ef5350','#66bb6a','#42a5f5','#ffa726','#ec407a','#7e57c2'];

async function fetchCredits(){
  try{
    const r=await fetch(`${RAW_URL}/FORMAT-MAP.md?_=${Date.now()}`);
    if(!r.ok)throw new Error('HTTP '+r.status);
    const md=await r.text();
    const section=md.split(/## Contributors/i)[1]||'';
    const names=[...new Set(section.match(/@[\w._]+/g)||[])];
    const list=document.getElementById('creditsList');
    if(names.length){
      list.innerHTML='<div style="display:flex;flex-wrap:wrap;gap:5px;justify-content:center">'+
        names.map((n,i)=>{
          const handle=n.replace('@','');
          const isKVN=handle.toLowerCase()==='kvnaust'||handle.toLowerCase()==='mingkastermk';
          const isMe=handle.toLowerCase()==='chegnus';
          let color,extra='';
          if(isKVN){color='#e74c3c';extra='animation:creditPulse 2s ease-in-out infinite;font-weight:900;border-color:#e74c3c;font-size:.8rem'}
          else if(isMe){color=CREDIT_COLORS[Math.floor(Math.random()*CREDIT_COLORS.length)];extra='animation:creditPulse 3s ease-in-out infinite;font-weight:900;font-size:.8rem;border-color:'+color}
          else{color=CREDIT_COLORS[i%CREDIT_COLORS.length];extra=''}
          const avatarUrl=isKVN?IMG_URLS.avatar:(isMe?IMG_URLS.footer:`https://ui-avatars.com/api/?name=${handle.slice(0,2)}&background=${color.slice(1)}&color=fff&size=32&bold=true`);
          return`<a href="https://www.youtube.com/${n}" target="_blank" style="display:inline-flex;align-items:center;gap:5px;background:var(--card2);padding:3px 10px 3px 3px;border-radius:20px;color:${color};text-decoration:none;font-size:.7rem;border:1px solid #2a2a40;transition:all .2s;${extra}" onmouseover="this.style.transform='scale(1.06)';this.style.borderColor='${color}'" onmouseout="this.style.transform='';this.style.borderColor='${isKVN||isMe?color:'#2a2a40'}'"><img src="${avatarUrl}" style="width:22px;height:22px;border-radius:50%;border:1px solid ${color}" onerror="this.style.display='none'">${n}</a>`;
        }).join('')+
        '</div><div style="text-align:center;margin-top:10px;font-size:.6rem;color:#555">'+names.length+' contributors</div>';
      creditsLoaded=true;
    }else throw new Error('No names found');
  }catch(e){
    document.getElementById('creditsList').innerHTML='<div style="text-align:center;color:#555">Could not load contributors. <a href="'+REPO_URL+'/blob/main/FORMAT-MAP.md#contributors" target="_blank" style="color:#7e9cd8">View on GitHub</a></div>';
  }
}

// ═══════════════════════════════════
//  RECORDS TIMELINE
// ═══════════════════════════════════
const RECORDS_KEY='kvn_records';
function getRecords(){try{return JSON.parse(localStorage.getItem(RECORDS_KEY)||'[]')}catch{return[]}}
function saveRecords(r){localStorage.setItem(RECORDS_KEY,JSON.stringify(r))}

function showRecords(){
  document.getElementById('recordsOverlay').classList.add('open');
  renderRecords();
  updateRecordHolder();
  // Ensure list view is active by default
  if(recViewMode!=='list'){
    recViewMode='list';
    document.getElementById('recGraphicWrap').style.display='none';
    document.getElementById('recListWrap').style.display='';
    const hint=document.getElementById('recViewHint');
    const fA=document.getElementById('filterAllBtn');
    const fZ=document.getElementById('filterZeroBtn');
    const fZR=document.getElementById('recZoomResetBtn');
    const btn=document.getElementById('recViewToggleBtn');
    if(hint)hint.style.display='none';
    if(fA)fA.style.display='none';
    if(fZ)fZ.style.display='none';
    if(fZR)fZR.style.display='none';
    if(btn)btn.innerHTML='&#9641; Timeline';
    const sb=document.getElementById('recListShareBar');if(sb)sb.style.display='';
  }
  if(!communityFetchedOnce){
    fetchCommunityRecords();
  } else {
    renderFullListView(communityFinds);
    renderRecentStrip(communityFinds);
    renderLbHero(communityFinds);
  }
  setTimeout(()=>{drawRecordsTimeline();initTimelineInteraction()},400);
}
function closeRecords(){document.getElementById('recordsOverlay').classList.remove('open')}

function showRecordTab(tab){
  const mine=document.getElementById('recordsList'),comm=document.getElementById('communityRecordsList');
  const btnMine=document.getElementById('recTabMine'),btnComm=document.getElementById('recTabComm');
  if(tab==='mine'){mine.style.display='';comm.style.display='none';btnMine.style.background='var(--accent)';btnMine.style.borderColor='var(--accent)';btnComm.style.background='';btnComm.style.borderColor=''}
  else{mine.style.display='none';comm.style.display='';btnComm.style.background='var(--accent)';btnComm.style.borderColor='var(--accent)';btnMine.style.background='';btnMine.style.borderColor='';fetchCommunityRecords()}
}

let communityFinds=[];let communityFetchedOnce=false;
const FINDS_API='https://kvnaust.falcontechnix.com/finds.php';

async function fetchCommunityRecords(){
  const list=document.getElementById('communityRecordsList');
  if(!communityFetchedOnce)list.innerHTML='<div style="text-align:center;color:#555;font-size:.7rem;padding:12px">Loading community finds...</div>';
  try{
    const r=await fetch(FINDS_API+'?limit=500&order=asc');
    if(!r.ok)throw new Error('HTTP '+r.status);
    const data=await r.json();
    if(!data.ok||!data.finds)throw new Error('bad response');
    communityFinds=data.finds;
    communityFetchedOnce=true;
    renderRecentStrip(data.finds);   // always — the recent strip/ticker can be visible outside the Records panel
    updateRecordHolder();            // cheap; updates the record-holder badge
    // Everything below rebuilds DOM/canvas that only exists inside the Records overlay. Skip it
    // when the panel is closed — showRecords() rebuilds the visible views on open, and the
    // Community tab rebuilds via showRecordTab(). This keeps the 60s poll from tearing down and
    // rebuilding up to 500 rows while nobody is looking.
    const recOpen=document.getElementById('recordsOverlay')?.classList.contains('open');
    if(!recOpen)return;
    if(recViewMode==='list'){renderFullListView(data.finds);renderLbHero(data.finds);}
    const rc=data.rarity_colors||{};
    list.innerHTML=data.finds.map((f,i)=>{
      const color=rc[f.rarity]||getRecordColor(new Date(f.date_posted));
      const medal=i===0?'&#x1F947; ':i===1?'&#x1F948; ':i===2?'&#x1F949; ':'';
      const dateStr=new Date(f.date_posted).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
      const addedStr=f.discovered_at?(()=>{const n=Number(f.discovered_at);const d=isFinite(n)?new Date(n<1e11?n*1000:n):new Date(f.discovered_at);return isNaN(d)?'':d.toLocaleDateString('en-US',{month:'short',day:'numeric'})+' '})():'';
      return`<div class="rec-entry" style="cursor:pointer" onclick="showFindDetail(${i})"><span style="min-width:20px;font-size:.8rem">${medal}</span><span class="rec-date" style="color:${color}">${dateStr}</span><span class="rec-views" title="Views when found">${f.views_when_found??'?'} views</span><span style="color:${color};font-size:.6rem;font-weight:700;min-width:55px">${esc(f.rarity||'')}</span><span style="color:#fff;font-size:.68rem;font-weight:700;min-width:70px;text-shadow:0 0 6px ${color}">${esc(f.found_by||'?')}</span><span style="color:#444;font-size:.55rem">${addedStr}</span></div>`;
    }).join('')+`<div style="text-align:center;font-size:.6rem;color:#333;margin-top:6px">${data.total} finds &#183; oldest: ${data.oldest_post_date} &#183; newest: ${data.newest_post_date}</div>`;
    // Redraw timeline with community data (updateRecordHolder already ran above, unconditionally)
    drawRecordsTimeline();
  }catch(e){
    if(!communityFetchedOnce){
      list.innerHTML=`<div style="text-align:center;color:#555;font-size:.7rem;padding:12px">Could not load community finds.<br><a href="https://kvnaust.falcontechnix.com/" style="color:#5b7fc7">Play on falcontechnix.com</a> for the full leaderboard.</div>`;
      const lw=document.getElementById('recListWrap');
      if(lw)lw.innerHTML=`<div style="text-align:center;color:#555;font-size:.78rem;padding:32px">Could not load community finds.<br><a href="https://kvnaust.falcontechnix.com/" style="color:#5b7fc7">Play on falcontechnix.com</a> for the full leaderboard.</div>`;
    }
  }
}

// Unified record detail modal — works for community finds and local records
function showFindDetail(idx){showRecordModal(communityFinds[idx],'community')}
function showLocalRecordModal(idx){const recs=getRecords();if(recs[idx])showRecordModal(recs[idx],'local')}

function showRecordModal(f,type){
  if(!f)return;
  const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  // Normalize fields between community and local
  const datePosted=f.date_posted||f.date||'unknown';
  const views=f.views_when_found??f.views??'?';
  const url=f.video_url||f.url||'';
  const vid=url?getVideoId(url):'';
  const thumb=vid?`https://img.youtube.com/vi/${vid}/mqdefault.jpg`:'';
  const title=f.video_title||'';
  const rarity=f.rarity||getRarityLabel(new Date(datePosted).getFullYear());
  const color=rc[rarity]||'#888';
  const lead=f.lead||'';
  const channel=f.channel_name||'';
  const chVids=f.channel_videos||'';
  const chSubs=f.channel_subs||'';
  const foundBy=f.found_by||(type==='local'?'You':'anonymous');
  const src=f.source||'';const srcSym=SOURCE_SYMBOLS[src.toLowerCase()]||'';
  const server=f.server||'';
  const addedAt=f.discovered_at||f.added||'';

  const d=document.createElement('div');d.className='rec-find-detail';
  d.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)';
  d.onclick=e=>{if(e.target===d)d.remove()};

  let html=`<div style="text-align:center;padding:22px;background:linear-gradient(145deg,#111,#0a0a14);border:1px solid #2a2a40;border-radius:16px;max-width:400px;width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)">`;
  // Thumbnail
  if(thumb)html+=`<img src="${esc(thumb)}" style="width:300px;max-width:100%;border-radius:10px;border:2px solid ${color};margin-bottom:12px;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.5)" alt="${esc(title)}" onclick="window.open('${esc(url)}','_blank','noopener')">`;
  // Title
  if(title)html+=`<div style="font-weight:900;font-size:1.1rem;color:#fff;margin-bottom:4px;text-shadow:0 1px 4px rgba(0,0,0,.5)">${esc(title)}</div>`;
  // Rarity badge
  html+=`<div style="display:inline-block;font-size:.75rem;color:${color};font-weight:900;padding:3px 14px;border:1px solid ${color};border-radius:20px;margin-bottom:12px;background:rgba(0,0,0,.3);text-shadow:0 0 8px ${color}">${esc(rarity)}</div>`;
  // Detail grid
  html+=`<div style="font-size:.78rem;color:#bbb;line-height:2;text-align:left;padding:0 14px">`;
  html+=`<div>&#10038; <strong style="color:#e74c3c">Date posted:</strong> ${esc(datePosted)}</div>`;
  html+=`<div>&#10038; <strong style="color:#2ecc71">Views when found:</strong> ${views}</div>`;
  if(lead)html+=`<div>&#10038; <strong style="color:#f39c12">Lead:</strong> <code style="background:#1a1a2e;padding:2px 6px;border-radius:4px;font-size:.72rem">${esc(lead)}</code></div>`;
  if(channel)html+=`<div>&#10038; <strong style="color:#3498db">Channel:</strong> ${esc(channel)}${chVids?' ('+chVids+' videos)':''}${chSubs?' &#183; '+chSubs+' subs':''}</div>`;
  // Found by — prominent
  html+=`<div style="margin-top:8px;padding:6px 10px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06)">`;
  html+=`<span style="color:#888">Found by</span> <strong style="color:#fff;font-size:.85rem;text-shadow:0 0 8px ${color}">${esc(foundBy)}</strong>`;
  if(srcSym)html+=` <span style="color:#555;font-size:.65rem">[${srcSym}]</span>`;
  if(server)html+=` <span style="color:#444;font-size:.62rem">in ${esc(server)}</span>`;
  if(addedAt){const _n=Number(addedAt);const _d=isFinite(_n)?new Date(_n<1e11?_n*1000:_n):new Date(addedAt);if(!isNaN(_d))html+=`<div style="color:#333;font-size:.58rem;margin-top:2px">Added ${_d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})}</div>`;}
  html+=`</div></div>`;
  // Buttons
  html+=`<div style="margin-top:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center">`;
  if(url)html+=`<button class="vt-btn yt-btn" style="flex:0 0 auto;min-width:auto;padding:8px 16px;font-size:.72rem" onclick="window.open('${esc(url)}','_blank','noopener')">Watch on YouTube</button>`;
  html+=`<button class="vt-btn share-svg" style="flex:0 0 auto;min-width:auto;padding:8px 14px;font-size:.72rem" onclick="exportFindSVG(${JSON.stringify({datePosted,views:views+'',lead,rarity,foundBy,url,title,channel}).replace(/"/g,'&quot;')})">Share SVG</button>`;
  html+=`<button class="vt-btn share-discord" style="flex:0 0 auto;min-width:auto;padding:8px 14px;font-size:.72rem" onclick="copyFindForDiscord(${JSON.stringify({datePosted,views:views+'',lead,rarity,foundBy,url,title,channel}).replace(/"/g,'&quot;')})">Discord</button>`;
  html+=`<button class="nav-btn" style="font-size:.72rem;padding:6px 14px" onclick="this.closest('.rec-find-detail').remove()">Close</button>`;
  html+=`</div></div>`;

  d.innerHTML=html;
  document.body.appendChild(d);
}

function exportFindSVG(f){
  const w=420,h=240,pad=20;
  const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  const color=rc[f.rarity]||'#888';
  let svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
  svg+=`<rect width="${w}" height="${h}" rx="14" fill="#0d0d14"/>`;
  svg+=`<rect x="1" y="1" width="${w-2}" height="${h-2}" rx="13" fill="none" stroke="#2a2a40" stroke-width="1"/>`;
  svg+=`<text x="${w/2}" y="${pad+22}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="900" font-size="12" fill="${color}">${escXml(f.rarity)}</text>`;
  if(f.title)svg+=`<text x="${w/2}" y="${pad+42}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="700" font-size="14" fill="#fff">${escXml(f.title.substring(0,40))}</text>`;
  let y=pad+65;
  svg+=`<text x="${pad}" y="${y}" font-family="Inter,sans-serif" font-size="11" fill="#e74c3c">&#10038; Date: ${escXml(f.datePosted)}</text>`;y+=20;
  svg+=`<text x="${pad}" y="${y}" font-family="Inter,sans-serif" font-size="11" fill="#2ecc71">&#10038; Views: ${escXml(f.views)}</text>`;y+=20;
  if(f.lead){svg+=`<text x="${pad}" y="${y}" font-family="Inter,sans-serif" font-size="11" fill="#f39c12">&#10038; Lead: ${escXml(f.lead)}</text>`;y+=20}
  if(f.channel){svg+=`<text x="${pad}" y="${y}" font-family="Inter,sans-serif" font-size="11" fill="#3498db">&#10038; Channel: ${escXml(f.channel)}</text>`;y+=20}
  svg+=`<text x="${pad}" y="${y+5}" font-family="Inter,sans-serif" font-size="10" fill="#888">Found by </text><text x="${pad+55}" y="${y+5}" font-family="Inter,sans-serif" font-weight="700" font-size="10" fill="#fff">${escXml(f.foundBy)}</text>`;
  svg+=`<text x="${w/2}" y="${h-12}" text-anchor="middle" font-family="Inter,sans-serif" font-size="7" fill="#555">YouTube&apos;s Recycle Bin &#183; @KVNAUST &#183; kvnaust.falcontechnix.com</text>`;
  svg+=`</svg>`;
  downloadFile('kvnaust-find-'+f.datePosted.replace(/\//g,'-')+'.svg',svg,'image/svg+xml');
  showToast('Find exported as SVG!');
}

function copyFindForDiscord(f){
  const rc={'LEGENDARY':'🏆','SUPER RARE':'🔴','VERY RARE':'🟠','RARE':'🟢','COMMON':'🔵'};
  const emoji=rc[f.rarity]||'';
  const lines=[
    `## ${emoji} ${f.rarity} — Recycle Bin Find`,
    f.title?`**${f.title}**`:'',
    '',
    `✮ **Date posted:** ${f.datePosted}`,
    `✮ **Views when found:** ${f.views}`,
    f.lead?`✮ **Lead:** ${f.lead}`:'',
    f.channel?`✮ **Channel:** ${f.channel}`:'',
    '',
    `Found by **${f.foundBy}**`,
    f.url?`🔗 ${f.url}`:'',
    '',
    `*[YouTube's Recycle Bin](<https://kvnaust.falcontechnix.com/>) — @KVNAUST*`
  ].filter(Boolean);
  navigator.clipboard.writeText(lines.join('\n')).then(()=>showToast('Copied for Discord!')).catch(()=>showToast('Copy failed','err'));
}

// Index-based share helpers — used by inline buttons in list/graphic view
function _findShareData(f){
  const url=f.video_url||f.url||'';
  return{datePosted:f.date_posted||f.date||'',views:(f.views_when_found??f.views??'?')+'',lead:f.lead||'',rarity:f.rarity||'',foundBy:f.found_by||(f.added_by||'?'),url,title:f.video_title||'',channel:f.channel_name||''};
}
function shareFindSVG(idx){const f=communityFinds[idx];if(f)exportFindSVG(_findShareData(f));}
function shareFindDiscord(idx){const f=communityFinds[idx];if(f)copyFindForDiscord(_findShareData(f));}
function shareFindBoth(idx){shareFindSVG(idx);shareFindDiscord(idx);}

function shareLeaderboard(n,mode){
  if(!communityFinds.length){showToast('No finds loaded yet','warn');return;}
  const slice=communityFinds.slice(0,Math.min(n,communityFinds.length));
  if(mode==='svg'||mode==='both')exportLeaderboardSVG(slice,n);
  if(mode==='discord'||mode==='both')copyLeaderboardDiscord(slice,n);
}

function exportLeaderboardSVG(finds,n){
  const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  const cols=n>20?2:1;
  const actual=Math.min(finds.length,n);
  const half=Math.ceil(actual/2);
  const rowsPerCol=cols===2?half:actual;
  const rowH=n>50?19:n>20?22:27;
  const fs=n>50?8.5:n>20?9:10;
  const hdrH=80,subH=24,footH=26;
  // column x offsets (relative to each column's padL)
  const CX={rank:0,date:30,rarity:114,views:182,finder:244,added:0/*set per colW*/};
  const colW=cols===2?332:564;
  CX.added=colW;
  const colGap=16,padL=18,padR=18;
  const w=padL+cols*colW+(cols-1)*colGap+padR;
  const h=hdrH+subH+rowsPerCol*rowH+footH;

  let s=`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
  // defs
  s+=`<defs>
    <linearGradient id="lb_hg" x1="0" y1="0" x2="${w}" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#1e1600"/><stop offset="55%" stop-color="#100e0a"/><stop offset="100%" stop-color="#0c0c1e"/>
    </linearGradient>
    <linearGradient id="lb_ta" x1="0" y1="0" x2="${w}" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#ffd700"/><stop offset="45%" stop-color="#ffd70060"/><stop offset="100%" stop-color="#5b4fc700"/>
    </linearGradient>
    <linearGradient id="lb_bg" x1="0" y1="0" x2="0" y2="${h}" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#0e0e1c"/><stop offset="100%" stop-color="#080810"/>
    </linearGradient>
  </defs>`;
  // bg
  s+=`<rect width="${w}" height="${h}" rx="14" fill="url(#lb_bg)"/>`;
  s+=`<rect x="0.5" y="0.5" width="${w-1}" height="${h-1}" rx="13.5" fill="none" stroke="#16162c" stroke-width="1"/>`;
  // header
  s+=`<rect width="${w}" height="${hdrH}" rx="14" fill="url(#lb_hg)"/>`;
  s+=`<rect y="${hdrH-1}" width="${w}" height="2" fill="#0e0e1c"/>`;
  s+=`<rect width="${w}" height="3" rx="2" fill="url(#lb_ta)"/>`;
  s+=`<line x1="${padL}" y1="${hdrH}" x2="${w-padR}" y2="${hdrH}" stroke="#ffd70015" stroke-width="1"/>`;
  // star decoration
  s+=`<text x="${padL}" y="44" font-family="Arial,sans-serif" font-size="26" fill="#ffd700" opacity="0.9">&#9733;</text>`;
  // title
  s+=`<text x="${padL+34}" y="34" font-family="Arial,Helvetica,sans-serif" font-weight="900" font-size="19" fill="#ffd700" letter-spacing="0.5">KVN AUST</text>`;
  s+=`<text x="${padL+34}" y="52" font-family="Arial,Helvetica,sans-serif" font-weight="300" font-size="9.5" fill="#555" letter-spacing="3.5">COMMUNITY LEADERBOARD</text>`;
  s+=`<text x="${padL+34}" y="68" font-family="Arial,Helvetica,sans-serif" font-size="8" fill="#383848">${escXml(new Date().toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'}))} · oldest zero-view YouTube finds</text>`;
  // TOP N badge
  const bW=n>=100?54:n>=10?46:40;
  s+=`<rect x="${w-padR-bW}" y="22" width="${bW}" height="26" rx="13" fill="#ffd70015" stroke="#ffd70055" stroke-width="0.8"/>`;
  s+=`<text x="${w-padR-bW/2}" y="39" text-anchor="middle" font-family="Arial,Helvetica,sans-serif" font-weight="900" font-size="12" fill="#ffd700" letter-spacing="1">TOP ${n}</text>`;
  // col headers
  for(let c=0;c<cols;c++){
    const cx0=padL+c*(colW+colGap);
    const chy=hdrH+subH-7;
    const bgX=c===0?0:cx0-colGap/2;
    const bgW=c===0?(cols>1?cx0+colW+colGap/2:w):colW+colGap/2;
    s+=`<rect x="${bgX}" y="${hdrH}" width="${bgW}" height="${subH}" fill="#0b0b18"/>`;
    [
      {x:cx0+CX.rank+14,anchor:'middle',t:'#'},
      {x:cx0+CX.date,anchor:'start',t:'DATE POSTED'},
      {x:cx0+CX.rarity,anchor:'start',t:'RARITY'},
      {x:cx0+CX.views,anchor:'start',t:'VIEWS'},
      {x:cx0+CX.finder,anchor:'start',t:'FINDER'},
      {x:cx0+CX.added,anchor:'end',t:'ADDED'},
    ].forEach(l=>s+=`<text x="${l.x}" y="${chy}" text-anchor="${l.anchor}" font-family="Arial,sans-serif" font-size="6.5" fill="#28283c" font-weight="700" letter-spacing="1">${escXml(l.t)}</text>`);
    if(c<cols-1)s+=`<line x1="${cx0+colW+colGap/2}" y1="${hdrH}" x2="${cx0+colW+colGap/2}" y2="${h-footH}" stroke="#14142c" stroke-width="1"/>`;
  }
  s+=`<line x1="0" y1="${hdrH+subH}" x2="${w}" y2="${hdrH+subH}" stroke="#12122a" stroke-width="1"/>`;
  // rows
  finds.slice(0,actual).forEach((f,i)=>{
    const c=cols===2?(i>=half?1:0):0;
    const r=cols===2?(c===0?i:i-half):i;
    const cx0=padL+c*(colW+colGap);
    const y=hdrH+subH+r*rowH;
    const color=rc[f.rarity]||'#888';
    // row bg
    if(r%2!==0)s+=`<rect x="${c===0?0:cx0}" y="${y}" width="${cols===1?w:colW}" height="${rowH}" fill="#ffffff05"/>`;
    // rarity left bar
    s+=`<rect x="${c===0?0:cx0}" y="${y}" width="3" height="${rowH}" fill="${color}" opacity="0.8"/>`;
    // rank
    const rkC=i===0?'#ffd700':i===1?'#b0bec5':i===2?'#cd7f32':'#2a2a44';
    const rkT=i===0?'1st':i===1?'2nd':i===2?'3rd':`#${i+1}`;
    s+=`<text x="${cx0+CX.rank+26}" y="${y+rowH/2+fs/3}" text-anchor="end" font-family="Arial,sans-serif" font-weight="${i<3?'900':'600'}" font-size="${i<3?fs:fs-0.5}" fill="${rkC}">${escXml(rkT)}</text>`;
    // date in rarity color
    s+=`<text x="${cx0+CX.date}" y="${y+rowH/2+fs/3}" font-family="Courier New,Courier,monospace" font-size="${fs}" fill="${color}" font-weight="700">${escXml(f.date_posted||'')}</text>`;
    // rarity pill
    const rarMap={'LEGENDARY':'LEGEND','SUPER RARE':'S·RARE','VERY RARE':'V·RARE','RARE':'RARE','COMMON':'COMMON'};
    const rarT=rarMap[f.rarity]||(f.rarity||'').substring(0,7);
    const pW=62,pH=Math.min(rowH-6,16);
    s+=`<rect x="${cx0+CX.rarity}" y="${y+(rowH-pH)/2}" width="${pW}" height="${pH}" rx="${pH/2}" fill="${color}18" stroke="${color}" stroke-width="0.5"/>`;
    s+=`<text x="${cx0+CX.rarity+pW/2}" y="${y+rowH/2+Math.min(fs-2,3.5)/2}" text-anchor="middle" font-family="Arial,sans-serif" font-weight="800" font-size="${Math.max(fs-2,6.5)}" fill="${color}" letter-spacing="0.3">${escXml(rarT)}</text>`;
    // views
    const v=f.views_when_found;const vC=v===0?'#ffd700':'#484868';
    s+=`<text x="${cx0+CX.views}" y="${y+rowH/2+fs/3}" font-family="Arial,sans-serif" font-size="${fs}" fill="${vC}" font-weight="${v===0?'900':'400'}">${escXml(v===0?'0 ★':`${v??'?'}`)}</text>`;
    // finder
    const maxBy=cols===2?14:19;const byRaw=f.found_by||'?';
    s+=`<text x="${cx0+CX.finder}" y="${y+rowH/2+fs/3}" font-family="Arial,sans-serif" font-size="${fs}" fill="#ccc">${escXml(byRaw.length>maxBy?byRaw.substring(0,maxBy-1)+'…':byRaw)}</text>`;
    // added date
    if(f.discovered_at){const _n=Number(f.discovered_at);const _d=isFinite(_n)?new Date(_n<1e11?_n*1000:_n):new Date(f.discovered_at);
      if(!isNaN(_d))s+=`<text x="${cx0+CX.added}" y="${y+rowH/2+fs/3}" text-anchor="end" font-family="Arial,sans-serif" font-size="${Math.max(fs-1,7)}" fill="#2a2a44">${escXml(_d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'2-digit'}))}</text>`;}
    // row divider
    s+=`<line x1="${c===0?0:cx0}" y1="${y+rowH}" x2="${c===0?w:cx0+colW}" y2="${y+rowH}" stroke="#0f0f1e" stroke-width="0.5"/>`;
  });
  // footer
  const fy=hdrH+subH+rowsPerCol*rowH;
  s+=`<line x1="0" y1="${fy}" x2="${w}" y2="${fy}" stroke="#14142c" stroke-width="1"/>`;
  s+=`<rect y="${fy}" width="${w}" height="${footH}" fill="#070710"/>`;
  s+=`<rect y="${h-14}" width="${w}" height="14" rx="14" fill="#070710"/>`;
  s+=`<text x="${w/2}" y="${fy+footH/2+3.5}" text-anchor="middle" font-family="Arial,sans-serif" font-size="7.5" fill="#1c1c2e" letter-spacing="0.8">kvnaust.falcontechnix.com  ·  @KVNAUST  ·  YouTube&apos;s Recycle Bin</text>`;
  s+=`</svg>`;
  downloadFile(`kvnaust-leaderboard-top${n}.svg`,s,'image/svg+xml');
  showToast(`Top ${n} leaderboard exported!`);
}

function copyLeaderboardDiscord(finds,n){
  const rc={'LEGENDARY':'🏆','SUPER RARE':'🔴','VERY RARE':'🟠','RARE':'🟢','COMMON':'🔵'};
  const pad=(s,l)=>String(s).padEnd(l);
  const lpad=(s,l)=>String(s).padStart(l);
  const header=`${pad('#',4)} ${pad('DATE',11)} ${pad('RARITY',11)} ${pad('VIEWS',8)} ${pad('FINDER',20)} ADDED`;
  const divider='─'.repeat(header.length);
  const rows=finds.slice(0,n).map((f,i)=>{
    const rank=i===0?'1st ':i===1?'2nd ':i===2?'3rd ':`#${i+1}`.padEnd(4);
    const date=pad(f.date_posted||'',11);
    const rarMap={'LEGENDARY':'LEGENDARY ','SUPER RARE':'SUPER RARE ','VERY RARE':'VERY RARE  ','RARE':'RARE       ','COMMON':'COMMON     '};
    const rar=rarMap[f.rarity]||pad(f.rarity||'',11);
    const v=f.views_when_found;
    const views=pad(v===0?'0 ★':`${v??'?'}`,8);
    const by=pad((f.found_by||'?').substring(0,20),20);
    let added='';
    if(f.discovered_at){const _n=Number(f.discovered_at);const _d=isFinite(_n)?new Date(_n<1e11?_n*1000:_n):new Date(f.discovered_at);
      if(!isNaN(_d))added=_d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'2-digit'});}
    return`${rank} ${date} ${rar} ${views} ${by} ${added}`;
  });
  const lines=[
    `## 🏆 KVN AUST Community Leaderboard — Top ${n}`,
    `*${new Date().toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'})} · ${finds.length} total finds · oldest zero-view YouTube finds*`,
    '',
    '```',
    header,
    divider,
    ...rows,
    divider,
    '```',
    '',
    `**kvnaust.falcontechnix.com** · *@KVNAUST's YouTube Recycle Bin*`
  ];
  navigator.clipboard.writeText(lines.join('\n')).then(()=>showToast(`Top ${n} copied for Discord!`)).catch(()=>showToast('Copy failed','err'));
}

let recFetchTimer=null;
function onRecordLinkChange(val){
  clearTimeout(recFetchTimer);
  const vid=getVideoId(val.trim());
  const status=document.getElementById('recFetchStatus');
  const btn=document.getElementById('recAddBtn');
  const dateEl=document.getElementById('recDate');
  const viewsEl=document.getElementById('recViews');
  if(!vid){btn.disabled=true;btn.style.opacity='.5';dateEl.disabled=true;viewsEl.disabled=true;if(status)status.textContent='';return}
  if(status)status.textContent='fetching...';
  recFetchTimer=setTimeout(()=>fetchRecordMeta(vid),500);
}

async function fetchRecordMeta(vid){
  const status=document.getElementById('recFetchStatus');
  const dateEl=document.getElementById('recDate');
  const viewsEl=document.getElementById('recViews');
  const btn=document.getElementById('recAddBtn');

  // Same fetch chain as the result screen
  function applyMeta(d){
    if(d.published){
      const dt=typeof d.published==='number'?new Date(d.published*1000):new Date(d.published);
      const iso=dt.toISOString().slice(0,10);
      dateEl.value=iso;
    }
    if(d.viewCount!==undefined)viewsEl.value=d.viewCount;
    else if(d.views!==undefined)viewsEl.value=d.views;
    dateEl.disabled=false;viewsEl.disabled=false;
    btn.disabled=false;btn.style.opacity='1';
    if(status)status.textContent='auto-filled — verify & add';
    setTimeout(()=>{if(status&&status.textContent.includes('verify'))status.textContent=''},5000);
  }

  async function tryFetchR(url,timeout){
    const ctrl=new AbortController();const t=setTimeout(()=>ctrl.abort(),timeout||6000);
    try{const r=await fetch(url,{signal:ctrl.signal});clearTimeout(t);return r}catch{clearTimeout(t);return null}
  }

  // Try hosted proxy
  try{
    const r=await tryFetchR(`/KVN_AUST/videometa.php?v=${vid}`,5000);
    if(r&&r.ok){const d=await r.json();if(d.ok){applyMeta(d);return}}
  }catch{}
  // Try Invidious via CORS proxy
  for(const instance of INVIDIOUS_INSTANCES){
    const apiUrl=`${instance}/api/v1/videos/${vid}?fields=title,viewCount,published`;
    let r=await tryFetchR(apiUrl,5000);
    if(!r||!r.ok){for(const proxy of CORS_PROXIES){r=await tryFetchR(proxy+encodeURIComponent(apiUrl),6000);if(r&&r.ok)break}}
    if(r&&r.ok){try{const d=await r.json();applyMeta(d);return}catch{}}
  }
  // Fallback: enable manual entry
  dateEl.disabled=false;viewsEl.disabled=false;
  btn.disabled=false;btn.style.opacity='1';
  if(status)status.textContent='could not auto-fetch — enter manually';
  setTimeout(()=>{if(status)status.textContent=''},5000);
}

let lastAddedRecordUrl=null; // for highlighting new entries

function addCurrentToRecords(){
  const url=document.getElementById('vtLink').value.trim();
  const vid=getVideoId(url);
  if(!vid){showToast('Paste a YouTube link first','warn');return}
  const datePosted=document.getElementById('vtDatePosted').value.trim();
  const viewsRaw=document.getElementById('vtViews').value.trim();
  const views=parseInt(viewsRaw)||0;
  const recs=getRecords();
  if(recs.some(r=>r.url&&getVideoId(r.url)===vid)){showToast('Already in your records','warn');showRecords();return}
  // Parse date — vtDatePosted is DD/MM/YYYY, need ISO for storage
  let isoDate='';
  if(datePosted){
    const parts=datePosted.match(/(\d{2})\/(\d{2})\/(\d{4})/);
    if(parts)isoDate=`${parts[3]}-${parts[2]}-${parts[1]}`;
    else isoDate=datePosted; // fallback
  }
  if(!isoDate){showToast('No date available — fetch metadata first','warn');return}
  recs.push({date:isoDate,views:views,url:url,lead:chosenFormat?chosenFormat.label:'',added:new Date().toISOString()});
  recs.sort((a,b)=>new Date(a.date)-new Date(b.date));
  saveRecords(recs);
  lastAddedRecordUrl=url;
  showRecords();
  showToast('Added to Records!');
  showFoundIt(vid,_vtTitle||'',views,isoDate);
  huntCheckFind(views,isoDate);
}

function addRecord(){
  const url=document.getElementById('recUrl').value.trim();
  const vid=getVideoId(url);
  if(!vid){showToast('Paste a valid YouTube link','warn');return}
  const dateVal=document.getElementById('recDate').value;
  if(!dateVal){showToast('Date is required','warn');return}
  const views=parseInt(document.getElementById('recViews').value)||0;
  const recs=getRecords();
  // Prevent duplicate video IDs
  if(recs.some(r=>r.url&&getVideoId(r.url)===vid)){showToast('This video is already in your records','warn');return}
  recs.push({date:dateVal,views:views,url:url,lead:'',added:new Date().toISOString()});
  recs.sort((a,b)=>new Date(a.date)-new Date(b.date));
  saveRecords(recs);
  document.getElementById('recDate').value='';document.getElementById('recDate').disabled=true;
  document.getElementById('recViews').value='';document.getElementById('recViews').disabled=true;
  document.getElementById('recUrl').value='';
  document.getElementById('recAddBtn').disabled=true;document.getElementById('recAddBtn').style.opacity='.5';
  document.getElementById('recFetchStatus').textContent='';
  renderRecords();drawRecordsTimeline();updateRecordHolder();
  showToast('Record added!');checkAchievements();
}

function deleteRecord(i){
  const recs=getRecords();recs.splice(i,1);saveRecords(recs);renderRecords();drawRecordsTimeline();
}

function renderRecords(){
  const recs=getRecords(),list=document.getElementById('recordsList');
  if(!recs.length){list.innerHTML='<div style="text-align:center;color:#555;font-size:.7rem;padding:8px">No finds yet. Discover the oldest zero-view video you can!</div>';return}
  list.innerHTML=recs.map((r,i)=>{
    const d=new Date(r.date);
    const dateStr=d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
    const color=getRecordColor(d);
    const isNew=lastAddedRecordUrl&&r.url&&r.url===lastAddedRecordUrl;
    const highlight=isNew?'border-color:'+color+';box-shadow:0 0 12px '+color+';animation:daubPulse 1.5s ease-in-out 3':'';
    return`<div class="rec-entry" style="cursor:pointer;${highlight}" onclick="showLocalRecordModal(${i})"><span class="rec-date" style="color:${color}">${dateStr}</span><span class="rec-views">${r.views} views</span>${r.url?`<span class="rec-link" style="color:#5b7fc7">${esc(r.url).substring(0,50)}</span>`:'<span style="color:#333;flex:1">no link</span>'}<button class="rec-del" onclick="event.stopPropagation();deleteRecord(${i})" title="Remove">&times;</button></div>`;
  }).join('');
  // Clear highlight after render
  if(lastAddedRecordUrl)setTimeout(()=>{lastAddedRecordUrl=null},5000);
}

function getRecordColor(d){
  const y=d.getFullYear();
  if(y<=2005)return'#ffd700';
  if(y<=2006)return'#e74c3c';
  if(y<=2008)return'#e67e22';
  if(y<=2012)return'#2ecc71';
  return'#3498db';
}

function getRarityLabel(y){
  if(y<=2005)return'LEGENDARY';
  if(y<=2006)return'SUPER RARE';
  if(y<=2008)return'VERY RARE';
  if(y<=2012)return'RARE';
  return'COMMON';
}

let timelineDotPositions=[]; // {x,y,type:'local'|'community',idx,data}
let timelineFilter='all'; // 'all' or 'zero'
let recViewMode='timeline'; // 'timeline'|'list'
const SOURCE_SYMBOLS={discord:'D',github:'G','google doc':'GD',manual:'M',kvn:'K'};

function toggleRecView(){
  const btn=document.getElementById('recViewToggleBtn');
  const gw=document.getElementById('recGraphicWrap');
  const lw=document.getElementById('recListWrap');
  const hint=document.getElementById('recViewHint');
  const fAll=document.getElementById('filterAllBtn');
  const fZero=document.getElementById('filterZeroBtn');
  const fZoom=document.getElementById('recZoomResetBtn');
  const sb=document.getElementById('recListShareBar');
  if(recViewMode==='list'){
    recViewMode='timeline';
    gw.style.display='';lw.style.display='none';
    hint.style.display='';fAll.style.display='';fZero.style.display='';fZoom.style.display='';
    if(sb)sb.style.display='none';
    btn.innerHTML='&#9776; List';
    setTimeout(()=>{drawRecordsTimeline();initTimelineInteraction()},50);
  }else{
    recViewMode='list';
    gw.style.display='none';lw.style.display='';
    hint.style.display='none';fAll.style.display='none';fZero.style.display='none';fZoom.style.display='none';
    if(sb)sb.style.display='';
    btn.innerHTML='&#9641; Timeline';
    renderFullListView(communityFinds);
  }
}

function renderRecentStrip(finds){
  const strip=document.getElementById('recRecentStrip');
  if(!strip||!finds||!finds.length){if(strip)strip.style.display='none';return}
  const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  const recent=[...finds].filter(f=>f.discovered_at).sort((a,b)=>Number(b.discovered_at)-Number(a.discovered_at)).slice(0,10);
  if(!recent.length){strip.style.display='none';return}
  const cards=recent.map(f=>{
    const color=rc[f.rarity]||'#888';
    const dateStr=new Date(f.date_posted).toLocaleDateString('en-US',{month:'short',year:'numeric'});
    const _n=Number(f.discovered_at);const _d=isFinite(_n)?new Date(_n<1e11?_n*1000:_n):new Date(f.discovered_at);
    const addedStr=!isNaN(_d)?_d.toLocaleDateString('en-US',{month:'short',day:'numeric'}):'';
    const fi=finds.indexOf(f);
    return`<div class="rec-recent-card" style="--c:${color};border-color:#1a1a2a"><div style="cursor:pointer" onclick="showFindDetail(${fi})"><div style="font-size:.52rem;color:#444;margin-bottom:1px">${addedStr}</div><div style="font-size:.7rem;font-weight:900;color:${color}">${esc(dateStr)}</div><div style="font-size:.58rem;color:#777;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px">${esc(f.found_by||'?')}</div></div><div style="display:flex;gap:2px;margin-top:4px;justify-content:center"><button class="vt-btn share-svg" style="padding:2px 5px;font-size:.5rem;min-width:auto;line-height:1" onclick="shareFindSVG(${fi})" title="SVG">SVG</button><button class="vt-btn share-discord" style="padding:2px 5px;font-size:.5rem;min-width:auto;line-height:1" onclick="shareFindDiscord(${fi})" title="Discord">D</button><button class="vt-btn" style="padding:2px 5px;font-size:.5rem;min-width:auto;line-height:1;background:linear-gradient(135deg,#5b4fc7,#3d2fa8)" onclick="shareFindBoth(${fi})" title="Both">&#x2605;</button></div></div>`;
  }).join('');
  strip.innerHTML=`<div style="font-size:.5rem;color:#444;flex-shrink:0;padding-top:6px;padding-right:8px;white-space:nowrap;letter-spacing:.05em">&#10024; NEW</div><div class="rec-recent-cards">${cards}</div>`;
  strip.style.display='flex';
}

function renderFullListView(finds){
  const wrap=document.getElementById('recListWrap');if(!wrap)return;
  const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  if(!finds||!finds.length){wrap.innerHTML='<div style="text-align:center;color:#555;font-size:.78rem;padding:32px">No community finds loaded.</div>';return}
  const medals=['🥇','🥈','🥉'];
  const rows=finds.map((f,i)=>{
    const color=rc[f.rarity]||'#888';
    const rank=i<3?medals[i]:`<span style="color:#555;font-size:.7rem">#${i+1}</span>`;
    const dateStr=new Date(f.date_posted).toLocaleDateString('en-US',{weekday:'long',year:'numeric',month:'long',day:'numeric'});
    const _n=Number(f.discovered_at);const _d=isFinite(_n)?new Date(_n<1e11?_n*1000:_n):new Date(f.discovered_at);
    const addedStr=!isNaN(_d)?_d.toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'}):'';
    const url=f.video_url||'';const vid=url?getVideoId(url):'';
    const thumb=vid?`https://i.ytimg.com/vi/${vid}/mqdefault.jpg`:'';
    const zeroView=f.views_when_found===0?`<span style="font-size:.58rem;background:#ffd700;color:#000;font-weight:900;padding:1px 7px;border-radius:8px;margin-left:4px">&#11088; ZERO VIEWS</span>`:'';
    const fields=[
      f.lead?`<div><span style="color:#555">Lead:</span> <code style="background:#0d0d18;padding:1px 5px;border-radius:3px;color:#aaa;font-size:.68rem">${esc(f.lead)}</code></div>`:'',
      f.channel_name?`<div><span style="color:#555">Channel:</span> <span style="color:#bbb">${esc(f.channel_name)}</span>${f.channel_videos?` <span style="color:#444">(${f.channel_videos} vid${f.channel_videos!==1?'s':''})</span>`:''}</div>`:'',
      f.channel_subs?`<div><span style="color:#555">Subscribers:</span> <span style="color:#bbb">${Number(f.channel_subs).toLocaleString()}</span></div>`:'',
      addedStr?`<div><span style="color:#555">Added to leaderboard:</span> <span style="color:#bbb">${addedStr}</span></div>`:'',
      f.source?`<div><span style="color:#555">Source:</span> <span style="color:#666">${esc(f.source)}${f.server?' / '+esc(f.server):''}</span></div>`:'',
      f.note?`<div><span style="color:#555">Note:</span> <span style="color:#888;font-style:italic">${esc(f.note)}</span></div>`:'',
    ].filter(Boolean).join('');
    return`<div style="padding:14px 16px;margin-bottom:10px;background:#08080f;border:1px solid #16162a;border-left:4px solid ${color};border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)"><div style="display:flex;gap:12px">${thumb?`<a href="${url?esc(url):'#'}" target="_blank" rel="noopener" style="flex-shrink:0;display:block"><img src="${esc(thumb)}" style="width:112px;height:63px;border-radius:5px;object-fit:cover;border:1px solid #222;display:block" loading="lazy"></a>`:''}<div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:.85rem">${rank}</span><span style="font-size:.62rem;font-weight:900;color:${color};padding:2px 9px;border:1px solid ${color};border-radius:10px;letter-spacing:.03em">${esc(f.rarity||'')}</span>${zeroView}</div><div style="font-size:.95rem;font-weight:900;color:${color};margin-bottom:2px">${esc(dateStr)}</div>${f.video_title?`<div style="font-size:.72rem;color:#aaa;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${esc(f.video_title)}">${esc(f.video_title)}</div>`:''}<div style="font-size:.7rem;line-height:1.9;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 12px;margin-bottom:8px"><div><span style="color:#555">Views when found:</span> <strong style="color:${f.views_when_found===0?'#ffd700':'#ddd'}">${f.views_when_found??'?'}</strong></div>${fields}</div><div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><div style="font-size:.82rem;font-weight:900"><span style="color:#666">Found by </span><span style="color:#fff;text-shadow:0 0 10px ${color}">${esc(f.found_by||'?')}</span></div><div style="display:flex;gap:4px;margin-left:auto;flex-wrap:wrap" onclick="event.stopPropagation()">${url?`<button class="vt-btn yt-btn" style="padding:4px 10px;font-size:.62rem;min-width:auto;flex:0 0 auto" onclick="window.open('${esc(url)}','_blank','noopener')">&#9654; Watch</button>`:''}<button class="vt-btn share-svg" style="padding:4px 10px;font-size:.62rem;min-width:auto;flex:0 0 auto" onclick="shareFindSVG(${i})" title="Export SVG card">SVG</button><button class="vt-btn share-discord" style="padding:4px 10px;font-size:.62rem;min-width:auto;flex:0 0 auto" onclick="shareFindDiscord(${i})" title="Copy Discord format">Discord</button><button class="vt-btn" style="padding:4px 10px;font-size:.62rem;min-width:auto;flex:0 0 auto;background:linear-gradient(135deg,#5b4fc7,#3d2fa8)" onclick="shareFindBoth(${i})" title="Export SVG + copy Discord">&#9733; Both</button></div></div></div></div></div>`;
  });
  wrap.innerHTML=rows.join('')+`<div style="text-align:center;font-size:.6rem;color:#333;padding:8px">${finds.length} finds total</div>`;
}

function setTimelineFilter(f){
  timelineFilter=f;
  document.getElementById('filterAllBtn').style.background=f==='all'?'var(--accent)':'';
  document.getElementById('filterAllBtn').style.borderColor=f==='all'?'var(--accent)':'';
  document.getElementById('filterZeroBtn').style.background=f==='zero'?'#ffd700':'';
  document.getElementById('filterZeroBtn').style.borderColor=f==='zero'?'#ffd700':'';
  document.getElementById('filterZeroBtn').style.color=f==='zero'?'#000':'';
  drawRecordsTimeline();
}

function findNearestDot(e){
  const canvas=document.getElementById('recordsCanvas');
  const rect=canvas.getBoundingClientRect();
  const mx=e.clientX-rect.left,my=e.clientY-rect.top;
  let best=null,bestDist=18;
  for(const dot of timelineDotPositions){
    const dx=dot.x-mx,dy=dot.y-my,dist=Math.sqrt(dx*dx+dy*dy);
    if(dist<bestDist){bestDist=dist;best=dot}
  }
  return{best,mx,my};
}

// Hover: basic info tooltip
function handleTimelineHover(e){
  const{best,mx,my}=findNearestDot(e);
  const tip=document.getElementById('timelineTooltip');
  const canvas=document.getElementById('recordsCanvas');
  if(!best){tip.style.display='none';canvas.style.cursor='default';return}
  canvas.style.cursor='pointer';
  const d=best.data;const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  if(best.type==='community'){
    const color=rc[d.rarity]||'#888';const src=d.source||'';const srcSym=SOURCE_SYMBOLS[src.toLowerCase()]||'?';
    tip.innerHTML=`<span style="color:${color};font-weight:700">${esc(d.rarity)}</span> <span style="color:#aaa">${esc(d.date_posted)}</span><br>${esc(d.video_title||d.lead||'')}<br><span style="color:#666">${d.views_when_found??'?'} views &#183; [${srcSym}] ${esc(d.found_by||'?')}</span>`;
  }else{
    tip.innerHTML=`<span style="color:#e74c3c;font-weight:700">Your Find</span> <span style="color:#aaa">${esc(d.date||'')}</span><br>${d.views||0} views`;
  }
  const rect=document.querySelector('.rec-timeline').getBoundingClientRect();
  const tx=Math.min(mx+14,rect.width-230),ty=Math.max(my-50,4);
  tip.style.left=tx+'px';tip.style.top=ty+'px';tip.style.display='block';
}

// Click: full detail modal (both community and local)
function handleTimelineClick(e){
  const{best}=findNearestDot(e);
  document.getElementById('timelineTooltip').style.display='none';
  if(!best)return;
  if(best.type==='community'){
    showFindDetail(best.idx);
  }else{
    showLocalRecordModal(best.idx);
  }
}

function updateRecordHolder(){
  const el=document.getElementById('recordHolder');if(!el)return;
  // Score: oldest date (heaviest) + lowest views + lowest channel videos
  function scoreFind(f){
    const d=new Date(f.date_posted||f.date);
    const age=(new Date().getFullYear()-d.getFullYear())*365; // older = higher score
    const views=-(f.views_when_found??f.views??9999); // fewer views = higher score (negative so lower is better)
    const chVids=-(f.channel_videos||9999); // fewer channel vids = higher
    return age*1000+views*10+chVids; // age weighted heaviest
  }
  let best=null,bestScore=-Infinity,bestCommunityIdx=-1;
  // Check community finds
  communityFinds.forEach((f,i)=>{const s=scoreFind(f);if(s>bestScore){bestScore=s;bestCommunityIdx=i;best={date_posted:f.date_posted,found_by:f.found_by,rarity:f.rarity,views_when_found:f.views_when_found,channel_videos:f.channel_videos,video_url:f.video_url,video_title:f.video_title,lead:f.lead,channel_name:f.channel_name}}});
  // Check local records
  getRecords().forEach(r=>{const s=scoreFind(r);if(s>bestScore){bestScore=s;bestCommunityIdx=-1;best={date_posted:r.date,found_by:'You',rarity:getRarityLabel(new Date(r.date).getFullYear()),views_when_found:r.views,video_url:r.url,video_title:'',lead:r.lead||'',channel_name:''}}});
  if(!best){el.innerHTML='';return}
  const rc={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  const color=rc[best.rarity]||'#888';
  const dateStr=new Date(best.date_posted).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  const viewsTxt=best.views_when_found!==undefined?best.views_when_found+' views':'? views';
  const chTxt=best.channel_videos?best.channel_videos+' ch vids':'';
  const shareRow=bestCommunityIdx>=0?`<span onclick="event.stopPropagation()" style="display:inline-flex;gap:4px;vertical-align:middle;margin-left:8px"><button class="vt-btn share-svg" style="padding:2px 7px;font-size:.55rem;min-width:auto;line-height:1.2" onclick="shareFindSVG(${bestCommunityIdx})" title="Export SVG">SVG</button><button class="vt-btn share-discord" style="padding:2px 7px;font-size:.55rem;min-width:auto;line-height:1.2" onclick="shareFindDiscord(${bestCommunityIdx})" title="Copy Discord">D</button><button class="vt-btn" style="padding:2px 7px;font-size:.55rem;min-width:auto;line-height:1.2;background:linear-gradient(135deg,#5b4fc7,#3d2fa8)" onclick="shareFindBoth(${bestCommunityIdx})" title="Export both">&#x2605;</button></span>`:'';
  el.innerHTML=`&#x1F3C6; <strong style="color:${color}">Record Holder:</strong> <span style="color:#fff">${dateStr}</span> <span style="color:${color}">(${best.rarity})</span> &#183; ${viewsTxt}${chTxt?' &#183; '+chTxt:''} &#183; <strong style="color:#aaa">${esc(best.found_by||'?')}</strong>${shareRow}`;
}

// Timeline zoom/pan state
let tlZoom=1,tlPanX=0,tlDragging=false,tlDragStartX=0,tlDragStartPan=0;
function initTimelineInteraction(){
  const c=document.getElementById('recordsCanvas');if(!c)return;
  if(c.dataset.tlInit)return;c.dataset.tlInit='1'; // attach the 7 listeners once, not on every Records open
  c.addEventListener('wheel',e=>{
    e.preventDefault();
    const rect=c.getBoundingClientRect();
    const mx=(e.clientX-rect.left)/rect.width;
    const oldZoom=tlZoom;
    tlZoom=Math.max(1,Math.min(10,tlZoom*(e.deltaY<0?1.15:.87)));
    // Zoom toward mouse position
    tlPanX=mx-(mx-tlPanX)*(tlZoom/oldZoom);
    tlPanX=Math.max(0,Math.min(1-1/tlZoom,tlPanX));
    drawRecordsTimeline();
  },{passive:false});
  c.addEventListener('mousedown',e=>{tlDragging=true;tlDragStartX=e.clientX;tlDragStartPan=tlPanX;c.style.cursor='grabbing'});
  c.addEventListener('mousemove',e=>{if(!tlDragging)return;const rect=c.getBoundingClientRect();const dx=(e.clientX-tlDragStartX)/rect.width/tlZoom;tlPanX=Math.max(0,Math.min(1-1/tlZoom,tlDragStartPan-dx));drawRecordsTimeline()});
  c.addEventListener('mouseup',()=>{tlDragging=false;document.getElementById('recordsCanvas').style.cursor='pointer'});
  c.addEventListener('mouseleave',()=>{if(tlDragging){tlDragging=false;c.style.cursor='pointer'}});
  // Touch support
  let touchStartX=0,touchStartPan=0;
  c.addEventListener('touchstart',e=>{if(e.touches.length===1){touchStartX=e.touches[0].clientX;touchStartPan=tlPanX}},{passive:true});
  c.addEventListener('touchmove',e=>{if(e.touches.length===1){const rect=c.getBoundingClientRect();const dx=(e.touches[0].clientX-touchStartX)/rect.width/tlZoom;tlPanX=Math.max(0,Math.min(1-1/tlZoom,touchStartPan-dx));drawRecordsTimeline()}},{passive:true});
}
function resetTimelineZoom(){tlZoom=1;tlPanX=0;drawRecordsTimeline()}

function drawRecordsTimeline(){
  const canvas=document.getElementById('recordsCanvas');
  const dpr=window.devicePixelRatio||1;
  const rect=canvas.parentElement.getBoundingClientRect();
  canvas.width=rect.width*dpr;canvas.height=rect.height*dpr;
  canvas.style.width=rect.width+'px';canvas.style.height=rect.height+'px';
  const ctx=canvas.getContext('2d');
  ctx.scale(dpr,dpr);
  const W=rect.width,H=rect.height;
  timelineDotPositions=[];

  // Background gradient
  const bgGrad=ctx.createLinearGradient(0,0,0,H);
  bgGrad.addColorStop(0,'#050510');bgGrad.addColorStop(.5,'#030308');bgGrad.addColorStop(1,'#080812');
  ctx.fillStyle=bgGrad;ctx.fillRect(0,0,W,H);

  // Timeline config
  const fullStartYear=2005,fullEndYear=new Date().getFullYear()+1;
  const fullRange=fullEndYear-fullStartYear;
  // Apply zoom/pan
  const viewRange=fullRange/tlZoom;
  const startYear=fullStartYear+tlPanX*fullRange;
  const endYear=startYear+viewRange;
  const totalYears=viewRange;
  const padL=52,padR=24,padT=36,padB=44;
  const chartW=W-padL-padR,chartH=H-padT-padB;

  // Rarity zone backgrounds with gradients
  const zones=[
    {y1:2005,y2:2006,c1:'rgba(255,215,0,.12)',c2:'rgba(255,215,0,.03)',label:''},
    {y1:2006,y2:2007,c1:'rgba(231,76,60,.14)',c2:'rgba(231,76,60,.04)',label:'SUPER RARE'},
    {y1:2007,y2:2009,c1:'rgba(230,126,34,.10)',c2:'rgba(230,126,34,.03)',label:'VERY RARE'},
    {y1:2009,y2:2013,c1:'rgba(46,204,113,.08)',c2:'rgba(46,204,113,.02)',label:'RARE'},
    {y1:2013,y2:endYear,c1:'rgba(52,152,219,.06)',c2:'rgba(52,152,219,.015)',label:'COMMON'}
  ];
  zones.forEach(z=>{
    const x1=padL+((z.y1-startYear)/totalYears)*chartW;
    const x2=padL+((z.y2-startYear)/totalYears)*chartW;
    // Vertical gradient per zone: brighter at bottom, fading up
    const zGrad=ctx.createLinearGradient(0,padT,0,padT+chartH);
    zGrad.addColorStop(0,z.c2);zGrad.addColorStop(1,z.c1);
    ctx.fillStyle=zGrad;ctx.fillRect(x1,padT,x2-x1,chartH);
    // Zone divider with gradient fade
    const dGrad=ctx.createLinearGradient(0,padT,0,padT+chartH);
    dGrad.addColorStop(0,'rgba(255,255,255,.02)');dGrad.addColorStop(.5,'rgba(255,255,255,.08)');dGrad.addColorStop(1,'rgba(255,255,255,.03)');
    ctx.strokeStyle=dGrad;ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(x2,padT);ctx.lineTo(x2,padT+chartH);ctx.stroke();
    // Zone label — only if zone is wide enough to fit
    if(z.label){
      const zoneW=x2-x1;
      const fs=zoneW<60?0:zoneW<90?8:zoneW<130?10:12;
      if(fs>0){ctx.fillStyle='rgba(255,255,255,.12)';ctx.font=`bold ${fs}px Inter,sans-serif`;ctx.textAlign='center';ctx.fillText(z.label,(x1+x2)/2,padT+18)}
    }
  });

  // YouTube launch marker — glowing bar
  const ytX=padL+((2005.1-startYear)/totalYears)*chartW;
  ctx.shadowColor='#ffd700';ctx.shadowBlur=20;
  ctx.fillStyle='#ffd700';ctx.fillRect(ytX-3,padT,6,chartH);
  ctx.shadowBlur=0;
  // YT launch label with background pill
  ctx.font='bold 10px Inter,sans-serif';ctx.textAlign='center';
  const ytLabel='YT LAUNCH';const ytLW=ctx.measureText(ytLabel).width;
  ctx.fillStyle='rgba(255,215,0,.15)';
  ctx.beginPath();ctx.roundRect(ytX-ytLW/2-6,padT-20,ytLW+12,16,4);ctx.fill();
  ctx.fillStyle='#ffd700';ctx.fillText(ytLabel,ytX,padT-9);

  // Y-axis
  const yTicks=[0,10,50,100,500,1000,5000];
  const yLabels=['0','10','50','100','500','1k','5k+'];
  ctx.textAlign='right';
  yTicks.forEach((v,i)=>{
    const y=padT+chartH-(i/(yTicks.length-1))*chartH;
    ctx.fillStyle='#555';ctx.font='bold 10px Inter,sans-serif';
    ctx.fillText(yLabels[i],padL-10,y+4);
    // Grid lines
    ctx.strokeStyle='rgba(255,255,255,.04)';ctx.lineWidth=1;
    ctx.setLineDash([4,4]);ctx.beginPath();ctx.moveTo(padL,y);ctx.lineTo(padL+chartW,y);ctx.stroke();
    ctx.setLineDash([]);
  });

  // X-axis
  // Timeline base line with gradient
  const blGrad=ctx.createLinearGradient(padL,0,padL+chartW,0);
  blGrad.addColorStop(0,'rgba(255,255,255,.3)');blGrad.addColorStop(.5,'#fff');blGrad.addColorStop(1,'rgba(255,255,255,.3)');
  ctx.strokeStyle=blGrad;ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(padL,padT+chartH);ctx.lineTo(padL+chartW,padT+chartH);ctx.stroke();
  // Year labels
  ctx.font='bold 11px Inter,sans-serif';ctx.textAlign='center';
  for(let y=Math.ceil(startYear);y<endYear;y++){
    const x=padL+((y-startYear)/totalYears)*chartW;
    ctx.fillStyle='#666';
    ctx.fillText("'"+String(y).slice(2),x,padT+chartH+18);
    ctx.strokeStyle='#444';ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(x,padT+chartH);ctx.lineTo(x,padT+chartH+5);ctx.stroke();
  }

  // Plot user records
  const recs=getRecords();
  function viewsToY(v){
    if(v<=0)return padT+chartH;
    const logMax=Math.log10(5000),logV=Math.log10(Math.min(v,5000));
    return padT+chartH-(logV/logMax)*chartH;
  }

  recs.forEach((r,ri)=>{
    const views=r.views||0;
    if(timelineFilter==='zero'&&views!==0)return;
    const d=new Date(r.date);
    const yearFrac=d.getFullYear()+(d.getMonth()/12)+(d.getDate()/365);
    const x=padL+((yearFrac-startYear)/totalYears)*chartW;
    const y=viewsToY(views);
    const color=getRecordColor(d);
    const rarity=getRarityLabel(d.getFullYear());
    const isRare=d.getFullYear()<=2008;
    const isNewlyAdded=lastAddedRecordUrl&&r.url&&r.url===lastAddedRecordUrl;

    // Vertical beam from bottom to dot
    const beamGrad=ctx.createLinearGradient(0,padT+chartH,0,y);
    beamGrad.addColorStop(0,color);beamGrad.addColorStop(1,'rgba(0,0,0,0)');
    ctx.strokeStyle=beamGrad;ctx.lineWidth=isRare?3:2;ctx.beginPath();ctx.moveTo(x,padT+chartH);ctx.lineTo(x,y);ctx.stroke();

    // Ambient glow under dot
    const glowR=isRare?30:18;
    const ambGrad=ctx.createRadialGradient(x,y,0,x,y,glowR);
    ambGrad.addColorStop(0,color.replace(')',',0.35)').replace('rgb','rgba'));
    ambGrad.addColorStop(1,'rgba(0,0,0,0)');
    ctx.fillStyle=ambGrad;ctx.beginPath();ctx.arc(x,y,glowR,0,Math.PI*2);ctx.fill();

    // Dot with metallic ring
    const dotR=isNewlyAdded?10:isRare?8:6;
    if(isNewlyAdded){ctx.shadowColor='#fff';ctx.shadowBlur=20}
    ctx.beginPath();ctx.arc(x,y,dotR,0,Math.PI*2);
    ctx.fillStyle=color;ctx.fill();
    ctx.strokeStyle=isNewlyAdded?'#fff':'rgba(255,255,255,.3)';ctx.lineWidth=isNewlyAdded?2.5:1.5;ctx.stroke();
    if(isNewlyAdded){ctx.shadowBlur=0}
    // Inner highlight
    ctx.beginPath();ctx.arc(x-2,y-2,dotR*.4,0,Math.PI*2);
    const hlGrad=ctx.createRadialGradient(x-2,y-2,0,x-2,y-2,dotR*.4);
    hlGrad.addColorStop(0,'rgba(255,255,255,.4)');hlGrad.addColorStop(1,'rgba(255,255,255,0)');
    ctx.fillStyle=hlGrad;ctx.fill();
    timelineDotPositions.push({x,y,type:'local',idx:ri,data:r});

    // Date label with background
    const dateStr=d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
    ctx.font=`bold ${isRare?11:10}px Inter,sans-serif`;ctx.textAlign='center';
    const lblW=ctx.measureText(dateStr).width;
    ctx.fillStyle='rgba(0,0,0,.6)';
    ctx.beginPath();ctx.roundRect(x-lblW/2-5,y-26,lblW+10,15,3);ctx.fill();
    ctx.fillStyle=color;
    ctx.fillText(dateStr,x,y-15);
    // Rarity tag
    if(isRare){
      ctx.font='bold 8px Inter,sans-serif';
      const rW=ctx.measureText(rarity).width;
      ctx.fillStyle='rgba(0,0,0,.5)';
      ctx.beginPath();ctx.roundRect(x-rW/2-4,y+dotR+3,rW+8,12,3);ctx.fill();
      ctx.fillStyle='rgba(255,255,255,.6)';
      ctx.fillText(rarity,x,y+dotR+12);
    }
  });

  // Community finds (smaller, dimmer, behind personal records)
  const rarityColors={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
  if(communityFinds.length){
    communityFinds.forEach((f,fi)=>{
      const views=f.views_when_found||0;
      const isZero=views===0;
      // Filter
      if(timelineFilter==='zero'&&!isZero)return;
      const d=new Date(f.date_posted);
      const yearFrac=d.getFullYear()+(d.getMonth()/12)+(d.getDate()/365);
      const x=padL+((yearFrac-startYear)/totalYears)*chartW;
      const y=viewsToY(views);
      const color=rarityColors[f.rarity]||'#555';
      // Zero views: big, bright, fully saturated. Non-zero: smaller, desaturated
      const dotR=isZero?7:Math.max(3,5-Math.min(views,20)*.1);
      const alpha=isZero?0.9:Math.max(0.2,0.5-views*.02);
      const beamW=isZero?2.5:1;
      ctx.globalAlpha=alpha;
      // Beam
      if(isZero){
        const beamGrad=ctx.createLinearGradient(0,padT+chartH,0,y);
        beamGrad.addColorStop(0,color);beamGrad.addColorStop(1,'rgba(0,0,0,0)');
        ctx.strokeStyle=beamGrad;
      }else{ctx.strokeStyle=color}
      ctx.lineWidth=beamW;ctx.beginPath();ctx.moveTo(x,padT+chartH);ctx.lineTo(x,y);ctx.stroke();
      // Dot
      ctx.beginPath();ctx.arc(x,y,dotR,0,Math.PI*2);ctx.fillStyle=color;ctx.fill();
      ctx.strokeStyle=isZero?'rgba(255,255,255,.4)':'rgba(255,255,255,.15)';ctx.lineWidth=isZero?1.5:1;ctx.stroke();
      // Zero-view glow
      if(isZero){ctx.shadowColor=color;ctx.shadowBlur=12;ctx.beginPath();ctx.arc(x,y,dotR*.6,0,Math.PI*2);ctx.fillStyle=color;ctx.fill();ctx.shadowBlur=0}
      // Source symbol
      const src=f.source||'';const srcSym=SOURCE_SYMBOLS[src.toLowerCase()]||'?';
      ctx.fillStyle=isZero?'rgba(255,255,255,.8)':'rgba(255,255,255,.5)';ctx.font=`bold ${isZero?7:6}px Inter,sans-serif`;ctx.textAlign='center';
      ctx.fillText(srcSym,x,y+(isZero?2.5:2));
      ctx.globalAlpha=1;
      timelineDotPositions.push({x,y,type:'community',idx:fi,data:f});
    });
    // Label
    ctx.fillStyle='rgba(255,255,255,.2)';ctx.font='9px Inter,sans-serif';ctx.textAlign='right';
    ctx.fillText('Community finds shown as small dots',padL+chartW,padT+chartH-6);
  }

  // Empty state
  if(!recs.length&&!communityFinds.length){
    // Centered text with subtle glow
    ctx.shadowColor='rgba(231,76,60,.2)';ctx.shadowBlur=20;
    ctx.fillStyle='#444';ctx.font='bold 16px Inter,sans-serif';ctx.textAlign='center';
    ctx.fillText('Add your oldest zero-view finds to see them here',W/2,H/2-8);
    ctx.shadowBlur=0;
    ctx.fillStyle='#2a2a2a';ctx.font='12px Inter,sans-serif';
    ctx.fillText('The older the video, the rarer the find',W/2,H/2+14);
    // Decorative crosshair at center
    ctx.strokeStyle='rgba(255,255,255,.04)';ctx.lineWidth=1;
    ctx.beginPath();ctx.moveTo(W/2-30,H/2+30);ctx.lineTo(W/2+30,H/2+30);ctx.stroke();
  }
}

// ═══════════════════════════════════
//  SETTINGS (image customization)
// ═══════════════════════════════════
const SETTINGS_KEY='kvn_settings';
const DEFAULT_IMGS={...IMG_URLS};

function loadSettings(){
  try{
    const s=JSON.parse(localStorage.getItem(SETTINGS_KEY)||'null');
    if(s){
      if(s.avatar)IMG_URLS.avatar=s.avatar;
      if(s.banner)IMG_URLS.banner=s.banner;
      if(s.footer&&s.footer.indexOf(DEAD_FOOTER_TOKEN)===-1)IMG_URLS.footer=s.footer;
      if(s.mosaic)IMG_URLS.mosaic=s.mosaic;
    }
  }catch{}
}

function saveSettings(){
  const s={avatar:IMG_URLS.avatar,banner:IMG_URLS.banner,footer:IMG_URLS.footer};
  if(IMG_URLS.mosaic)s.mosaic=IMG_URLS.mosaic;
  localStorage.setItem(SETTINGS_KEY,JSON.stringify(s));
}

function toggleSettings(){
  const o=document.getElementById('settingsOverlay');
  o.classList.toggle('open');
  if(o.classList.contains('open')){populateSettingsForm();buildThemePills()}
}

function populateSettingsForm(){
  document.getElementById('sAvatarUrl').value=IMG_URLS.avatar||'';
  document.getElementById('sBannerUrl').value=IMG_URLS.banner||'';
  document.getElementById('sMosaicUrl').value=IMG_URLS.mosaic||'';
  document.getElementById('sAvatarPreview').src=IMG_URLS.avatar||'';
  document.getElementById('sBannerPreview').src=IMG_URLS.banner||'';
  document.getElementById('sMosaicPreview').src=IMG_URLS.mosaic||IMG_URLS.avatar||'';
  document.getElementById('sAllowRepeats').checked=allowRepeatFormats;
}

function handleFileSelect(type,input){
  const file=input.files[0];if(!file)return;
  const reader=new FileReader();
  reader.onload=function(e){
    const dataUrl=e.target.result;
    if(type==='avatar'){
      document.getElementById('sAvatarUrl').value='[local file]';
      document.getElementById('sAvatarPreview').src=dataUrl;
      IMG_URLS.avatar=dataUrl;
    }else if(type==='banner'){
      document.getElementById('sBannerUrl').value='[local file]';
      document.getElementById('sBannerPreview').src=dataUrl;
      IMG_URLS.banner=dataUrl;
    }else if(type==='mosaic'){
      document.getElementById('sMosaicUrl').value='[local file]';
      document.getElementById('sMosaicPreview').src=dataUrl;
      IMG_URLS.mosaic=dataUrl;
    }
  };
  reader.readAsDataURL(file);
  input.value='';
}

function applySettings(){
  // Read URLs from inputs (unless they're [local file] which means data URL already set)
  const av=document.getElementById('sAvatarUrl').value.trim();
  const bn=document.getElementById('sBannerUrl').value.trim();
  const mo=document.getElementById('sMosaicUrl').value.trim();
  if(av&&av!=='[local file]')IMG_URLS.avatar=av;
  if(bn&&bn!=='[local file]')IMG_URLS.banner=bn;
  if(mo&&mo!=='[local file]')IMG_URLS.mosaic=mo;
  IMG_URLS.footer=IMG_URLS.avatar; // footer avatar matches profile

  allowRepeatFormats=document.getElementById('sAllowRepeats').checked;
  localStorage.setItem('kvn_allow_repeats',allowRepeatFormats?'1':'0');

  saveSettings();
  applyImagesToDOM();
  toggleSettings();
  showToast('Settings saved!');
}

function applyImagesToDOM(){
  document.getElementById('bannerImg').src=IMG_URLS.banner;
  document.getElementById('avatarImg').src=IMG_URLS.avatar;
  document.getElementById('bigAvatarImg').src=IMG_URLS.avatar;
  // KVN AUST's avatar and Justin's B&B avatar are separate attributions — never
  // fall back one onto the other (that's how they got blended in the first place).
  document.getElementById('footerKvnAvatar').src=IMG_URLS.avatar;
  document.getElementById('footerAvatar').src=IMG_URLS.footer;
  document.getElementById('spinAvatar').src=IMG_URLS.avatar;
  document.getElementById('favicon').href=IMG_URLS.avatar;
  // Rebuild bingo card if active to update mosaic slices with new image
  if(bingoPicked)buildBingoFromPicked();
}

function resetSettingsToDefault(){
  IMG_URLS.avatar=DEFAULT_IMGS.avatar;
  IMG_URLS.banner=DEFAULT_IMGS.banner;
  IMG_URLS.footer=DEFAULT_IMGS.footer;
  delete IMG_URLS.mosaic;
  localStorage.removeItem(SETTINGS_KEY);
  applyImagesToDOM();
  populateSettingsForm();
  showToast('Reset to defaults');
}

async function fetchChannelImages(){
  const url=document.getElementById('sChannelUrl').value.trim();
  if(!url){showToast('Enter a YouTube channel URL','warn');return}
  showToast('Fetching channel...');
  try{
    // Try fetching the channel page via proxy (needed for CORS)
    const proxied=location.protocol==='file:'
      ?'https://api.allorigins.win/raw?url='+encodeURIComponent(url)
      :url;
    const r=await fetch(proxied);
    if(!r.ok)throw new Error('HTTP '+r.status);
    const html=await r.text();
    // Extract avatar from og:image
    const ogMatch=html.match(/property="og:image"[^>]*content="([^"]+)"/)||html.match(/content="([^"]+)"[^>]*property="og:image"/);
    if(ogMatch){
      const avatarUrl=ogMatch[1].replace(/=s\d+/,'=s200');
      document.getElementById('sAvatarUrl').value=avatarUrl;
      document.getElementById('sAvatarPreview').src=avatarUrl;
      IMG_URLS.avatar=avatarUrl;
      showToast('Avatar found!');
    }
    // Extract banner from channelBanner or og-like patterns
    const bannerMatch=html.match(/banner.*?url\(([^)]+)\)/i)||html.match(/"bannerExternalUrl":"([^"]+)"/);
    if(bannerMatch){
      document.getElementById('sBannerUrl').value=bannerMatch[1];
      document.getElementById('sBannerPreview').src=bannerMatch[1];
      IMG_URLS.banner=bannerMatch[1];
      showToast('Banner found!');
    }else{
      // Try to build banner URL from avatar domain pattern
      const avUrl=IMG_URLS.avatar||'';
      if(avUrl.includes('yt3.googleusercontent.com'))showToast('Avatar found. Banner may need manual entry.','warn');
    }
  }catch(e){
    showToast('Channel fetch failed: '+e.message,'err');
  }
}

// ═══════════════════════════════════
//  BINGO SVG EXPORT
// ═══════════════════════════════════
function escXml(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&apos;')}
function exportBingoSVG(){
  if(!bingoPicked)return showToast('No bingo card to export','warn');
  const cols=['B','I','N','G','O'];const cw=100,ch=100,gap=4,pad=20;
  const w=pad*2+5*(cw+gap)-gap;const hdrH=50;const ltH=40;
  const footH=50;
  const h=pad+hdrH+ltH+5*(ch+gap)-gap+pad+footH;
  const gColors=['#e74c3c','#f39c12','#2ecc71','#3498db','#9b59b6'];
  let svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
  svg+=`<rect width="${w}" height="${h}" rx="12" fill="#161625"/>`;
  // Title
  svg+=`<text x="${w/2}" y="${pad+28}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="900" font-size="18" fill="#e74c3c">YouTube&apos;s Recycle Bin [KVN AUST]</text>`;
  // Letters
  for(let i=0;i<5;i++){
    const x=pad+i*(cw+gap)+cw/2;
    svg+=`<text x="${x}" y="${pad+hdrH+30}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="900" font-size="26" fill="${gColors[i]}">${cols[i]}</text>`;
  }
  // Cells
  for(let row=0;row<5;row++){
    for(let ci=0;ci<5;ci++){
      const idx=row*5+ci;const isFree=setupFreeSpace&&row===2&&ci===2;
      const x=pad+ci*(cw+gap);const y=pad+hdrH+ltH+row*(ch+gap);
      const daubed=bingoState[idx];
      svg+=`<rect x="${x}" y="${y}" width="${cw}" height="${ch}" rx="6" fill="${isFree?'#fff9c4':'#f5f5f0'}" stroke="${daubed?'#388e3c':'#bbb'}" stroke-width="2"/>`;
      if(daubed){svg+=`<circle cx="${x+cw/2}" cy="${y+ch/2}" r="${Math.min(cw,ch)/2*.75}" fill="rgba(76,175,80,.55)"/>`}
      const txt=isFree?'FREE SPACE':bingoPicked[cols[ci]][row];
      // Word wrap
      const words=txt.split(' ');let lines=[];let cur='';
      for(const wd of words){if((cur+' '+wd).length>12&&cur){lines.push(cur);cur=wd}else cur=cur?cur+' '+wd:wd}
      if(cur)lines.push(cur);
      const fs=isFree?11:9;const lh=fs+3;const startY=y+ch/2-(lines.length-1)*lh/2+fs/3;
      lines.forEach((l,li)=>{svg+=`<text x="${x+cw/2}" y="${startY+li*lh}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="${isFree?'900':'600'}" font-size="${fs}" fill="${isFree?'#e74c3c':'#222'}">${escXml(l)}</text>`});
    }
  }
  // Footer with KVN AUST links
  const fy=h-footH+8;
  // YouTube icon (play button triangle in rounded rect)
  svg+=`<g transform="translate(${w/2-90},${fy})">`;
  svg+=`<rect width="24" height="17" rx="4" fill="#e74c3c"/>`;
  svg+=`<polygon points="10,3.5 10,13.5 18,8.5" fill="#fff"/>`;
  svg+=`</g>`;
  svg+=`<a href="https://www.youtube.com/@KVNAUST" target="_blank">`;
  svg+=`<text x="${w/2-60}" y="${fy+13}" font-family="Inter,sans-serif" font-weight="700" font-size="11" fill="#e74c3c">@KVNAUST</text></a>`;
  // X/Twitter icon (stylized X)
  svg+=`<g transform="translate(${w/2+30},${fy+1})">`;
  svg+=`<rect width="16" height="16" rx="3" fill="#333"/>`;
  svg+=`<text x="8" y="12.5" text-anchor="middle" font-family="Inter,sans-serif" font-weight="900" font-size="11" fill="#fff">X</text>`;
  svg+=`</g>`;
  svg+=`<a href="https://x.com/MingKasterMK" target="_blank">`;
  svg+=`<text x="${w/2+52}" y="${fy+13}" font-family="Inter,sans-serif" font-weight="700" font-size="11" fill="#aaa">@MingKasterMK</text></a>`;
  // Subtle branding line
  svg+=`<text x="${w/2}" y="${fy+32}" text-anchor="middle" font-family="Inter,sans-serif" font-size="8" fill="#555">YouTube&apos;s Recycle Bin &#183; youtu.be/@KVNAUST</text>`;
  svg+=`</svg>`;
  downloadFile('kvnaust-bingo-'+new Date().toISOString().slice(0,10)+'.svg',svg,'image/svg+xml');
  showToast('Bingo card exported!');
}

function exportSummaryText(){
  if(!sessionRounds.length)return showToast('No rounds to export','warn');
  const pad=20,cardW=600,rowH=80,hdrH=50,footH=50,gap=8;
  const h=pad+hdrH+sessionRounds.length*(rowH+gap)+footH+pad+40;
  const w=cardW+pad*2;
  const mc=METRIC_COLORS,ml=METRIC_LABELS;
  let svg=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
  svg+=`<rect width="${w}" height="${h}" rx="12" fill="#0d0d14"/>`;
  // Title
  svg+=`<text x="${w/2}" y="${pad+30}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="900" font-size="20" fill="#e74c3c">Game Summary</text>`;
  svg+=`<text x="${w/2}" y="${pad+45}" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#777">${escXml(new Date().toLocaleDateString())} &#183; ${sessionRounds.length} rounds</text>`;
  let y=pad+hdrH;
  const cardColors=['#1a2535','#1f1a30','#1a2a25','#2a1a1a','#1a1a2a','#251a20','#1a2520','#201a2a'];
  const numColors=['#e74c3c','#f39c12','#2ecc71','#3498db','#9b59b6','#e91e63','#00bcd4','#ff5722'];
  sessionRounds.forEach((r,i)=>{
    const bg=cardColors[i%cardColors.length];
    const nc=numColors[i%numColors.length];
    const vid=r.link?getVideoId(r.link):'';
    // Card background
    svg+=`<rect x="${pad}" y="${y}" width="${cardW}" height="${rowH}" rx="8" fill="${bg}"/>`;
    // Thumbnail
    if(vid){
      svg+=`<image x="${pad+6}" y="${y+6}" width="${106}" height="${60}" href="https://img.youtube.com/vi/${vid}/mqdefault.jpg" preserveAspectRatio="xMidYMid slice" clip-path="inset(0 round 4px)"/>`;
    }
    const tx=vid?pad+120:pad+12;
    // Round number
    svg+=`<text x="${tx}" y="${y+20}" font-family="Inter,sans-serif" font-weight="900" font-size="14" fill="${nc}">#${i+1}</text>`;
    // Search string
    svg+=`<text x="${tx+30}" y="${y+20}" font-family="Space Mono,monospace" font-weight="700" font-size="12" fill="#7e9cd8">${escXml(r.search)}</text>`;
    // Video link
    if(r.link){
      svg+=`<a href="${escXml(r.link)}" target="_blank"><text x="${tx}" y="${y+35}" font-family="Inter,sans-serif" font-size="8" fill="#5b7fc7">${escXml(r.link.substring(0,60))}</text></a>`;
    }
    // Metrics
    const m=r.metrics||{};
    let mx=tx;
    for(const k of ['entertainment','weirdness','gem','liked']){
      if(m[k]>0){
        svg+=`<text x="${mx}" y="${y+50}" font-family="Inter,sans-serif" font-weight="700" font-size="8" fill="${mc[k]||'#888'}">${ml[k]||k}: ${'&#9733;'.repeat(m[k])}</text>`;
        mx+=90;
      }
    }
    // Format
    svg+=`<text x="${tx}" y="${y+65}" font-family="Inter,sans-serif" font-size="7" fill="#555">${escXml(r.format)}</text>`;
    y+=rowH+gap;
  });
  // Averages
  const mTot={},mCnt={};
  sessionRounds.forEach(r=>{const m=r.metrics||{};for(const[k,v]of Object.entries(m))if(v>0){mTot[k]=(mTot[k]||0)+v;mCnt[k]=(mCnt[k]||0)+1}});
  let ax=pad+20;
  svg+=`<text x="${pad}" y="${y+16}" font-family="Inter,sans-serif" font-size="10" fill="#777">Averages:</text>`;
  ax+=70;
  for(const k of ['entertainment','weirdness','gem','liked']){
    if(mCnt[k]){
      const avg=(mTot[k]/mCnt[k]).toFixed(1);
      svg+=`<text x="${ax}" y="${y+16}" font-family="Inter,sans-serif" font-weight="700" font-size="10" fill="${mc[k]}">${ml[k]}: ${avg}</text>`;
      ax+=100;
    }
  }
  // Footer
  y+=30;
  svg+=`<text x="${w/2}" y="${y+16}" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="#e74c3c">@KVNAUST</text>`;
  svg+=`<text x="${w/2}" y="${y+28}" text-anchor="middle" font-family="Inter,sans-serif" font-size="7" fill="#555">YouTube&apos;s Recycle Bin &#183; youtube.com/@KVNAUST &#183; x.com/MingKasterMK</text>`;
  svg+=`</svg>`;
  downloadFile('kvnaust-summary-'+new Date().toISOString().slice(0,10)+'.svg',svg,'image/svg+xml');
  showToast('Summary exported as SVG!');
}

function exportShareCard(){
  if(!finalString)return showToast('No search string yet','warn');
  const datePosted=document.getElementById('vtDatePosted').value.trim();
  const views=document.getElementById('vtViews').value.trim();
  const chVids=document.getElementById('vtChannelVids').value.trim();
  const extraLines=[datePosted,views,chVids].filter(Boolean).length;
  const w=480,h=340+extraLines*20,pad=24;
  const mc=METRIC_COLORS,ml={entertainment:'Entertainment',weirdness:'Weirdness',gem:'Gem Factor',liked:'I Just Liked It'};
  const link=document.getElementById('vtLink').value.trim();
  const m=currentMetrics;
  let svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
  svg+=`<rect width="${w}" height="${h}" rx="14" fill="#0d0d14"/>`;
  svg+=`<rect x="1" y="1" width="${w-2}" height="${h-2}" rx="13" fill="none" stroke="#2a2a40" stroke-width="1"/>`;
  // Search string
  svg+=`<text x="${w/2}" y="${pad+32}" text-anchor="middle" font-family="Space Mono,monospace" font-weight="700" font-size="28" fill="#fff">${escXml(finalString)}</text>`;
  // Format name
  const fmtLabel=chosenFormat?chosenFormat.label:'';
  svg+=`<text x="${w/2}" y="${pad+54}" text-anchor="middle" font-family="Inter,sans-serif" font-size="11" fill="#777">${escXml(fmtLabel)}</text>`;
  // Video metadata
  let infoY=pad+72;
  if(datePosted){svg+=`<text x="${pad+8}" y="${infoY}" font-family="Inter,sans-serif" font-size="10" fill="#e74c3c">&#10038; Date posted: ${escXml(datePosted)}</text>`;infoY+=18}
  if(views){svg+=`<text x="${pad+8}" y="${infoY}" font-family="Inter,sans-serif" font-size="10" fill="#2ecc71">&#10038; Views when found: ${escXml(views)}</text>`;infoY+=18}
  if(chVids){svg+=`<text x="${pad+8}" y="${infoY}" font-family="Inter,sans-serif" font-size="10" fill="#3498db">&#10038; Channel: ${escXml(chVids)} video${chVids==='1'?'':'s'}</text>`;infoY+=18}
  // Metric star ratings
  let my=infoY+8;
  for(const k of ['entertainment','weirdness','gem','liked']){
    const v=m[k]||0;
    svg+=`<text x="${pad+8}" y="${my}" font-family="Inter,sans-serif" font-weight="600" font-size="11" fill="${mc[k]}">${escXml(ml[k])}</text>`;
    for(let s=1;s<=5;s++){
      svg+=`<text x="${pad+140+(s-1)*20}" y="${my}" font-family="sans-serif" font-size="14" fill="${v>=s?mc[k]:'#333'}">&#9733;</text>`;
    }
    my+=26;
  }
  // YouTube link
  if(link){
    svg+=`<a href="${escXml(link)}" target="_blank"><text x="${w/2}" y="${my+10}" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="#5b7fc7">${escXml(link.substring(0,60))}</text></a>`;
  }
  // Footer branding
  const fy=h-36;
  svg+=`<text x="${w/2}" y="${fy}" text-anchor="middle" font-family="Inter,sans-serif" font-weight="900" font-size="12" fill="#e74c3c">YouTube&apos;s Recycle Bin</text>`;
  svg+=`<text x="${w/2}" y="${fy+16}" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="#555">@KVNAUST &#183; @MingKasterMK</text>`;
  svg+=`</svg>`;
  downloadFile('kvnaust-share-'+finalString.replace(/[^a-zA-Z0-9]/g,'')+'.svg',svg,'image/svg+xml');
  showToast('Share card exported!');markAchievement('shared');checkAchievements();
}

function shareToDiscord(){
  if(!finalString)return showToast('No search string yet','warn');
  const link=document.getElementById('vtLink').value.trim();
  const videoId=link.match(/(?:v=|youtu\.be\/)([^&\s]+)/)?.[1]||'';
  const datePosted=document.getElementById('vtDatePosted').value.trim();
  const views=document.getElementById('vtViews').value.trim();
  const yr=yearFromDatePosted(datePosted);
  const text=buildDiscordShare({
    searchStr:finalString,
    lead:chosenFormat?chosenFormat.label:'',
    datePosted,views,
    channelVids:document.getElementById('vtChannelVids').value.trim(),
    videoId,metrics:currentMetrics,
    rarity:yr?getRarityLabel(yr):''
  });
  navigator.clipboard.writeText(text).then(()=>showToast('Copied for Discord!')).catch(()=>showToast('Copy failed','err'));
}

function downloadFile(name,content,type){
  const blob=new Blob([content],{type});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url;a.download=name;a.style.display='none';
  document.body.appendChild(a);a.click();
  setTimeout(()=>{document.body.removeChild(a);URL.revokeObjectURL(url)},100);
}

// ═══════════════════════════════════
//  KEYBOARD
// ═══════════════════════════════════
// ── 7.20.0 QoL functions ──
function renderResultPill(){
  const p=document.getElementById('resultPill');if(!p)return;
  if(chosenFormat&&chosenFormat.sp!=='static'&&chosenNumber!=null&&chosenFormat.tpl&&chosenFormat.tpl.includes('{V}')){
    const parts=chosenFormat.tpl.split('{V}');
    p.innerHTML=esc(parts[0])+'<span class="rp-var">'+esc(String(chosenNumber))+'</span>'+esc(parts[1]||'');
  }else p.textContent=finalString;
}
function updateEraChip(){
  const wrap=document.getElementById('resultMeta'),el=document.getElementById('eraChip');
  if(!wrap||!el)return;
  let year=null;const f=chosenFormat,num=String(chosenNumber==null?'':chosenNumber);
  if(f&&(f.sp==='date'||f.sp==='monthdate'||f.sp==='shortdate')){
    const m=num.match(/(19|20)\d{2}/);
    if(m)year=parseInt(m[0]);
    else if(f.sp==='shortdate'&&/\/(\d{2})$/.test(num))year=2000+parseInt(num.slice(-2));
    else if(f.style==='ymd6'&&/^\d{6}$/.test(num))year=2000+parseInt(num.slice(0,2));
  }
  if(!year&&deepDiveActive)year=DEEP_DIVE_YEAR-1;
  if(!year){wrap.style.display='none';return}
  const t=year<=2005?['\u{1F3C6}','LEGENDARY','#f1c40f']:year===2006?['\u{1F534}','SUPER RARE','#e74c3c']:year<=2008?['\u{1F7E0}','VERY RARE','#e67e22']:year<=2012?['\u{1F7E2}','RARE','#2ecc71']:['\u{1F535}','COMMON','#3498db'];
  el.innerHTML=`${t[0]} ${year} era \u2014 a 0-view find here is <b style="color:${t[2]}">${t[1]}</b>`;
  wrap.style.display='';
}
function setDork(btn){
  const y=parseInt(btn.dataset.y);
  resultDork=resultDork===y?0:y;
  document.querySelectorAll('#dorkChips .dork-chip').forEach(b=>b.classList.toggle('active',parseInt(b.dataset.y)===resultDork));
  showToast(resultDork?`Copy & YouTube search now include before:${resultDork}`:'Year filter cleared');
}
function updateDorkChips(){
  const row=document.getElementById('dorkChips');if(!row)return;
  row.style.display=deepDiveActive?'none':'';
  document.querySelectorAll('#dorkChips .dork-chip').forEach(b=>b.classList.remove('active'));
}
function markNewFormats(){
  try{
    const KEY='kvn_fmt_seen_v1';
    if(!ALL_FORMATS.length)return;
    const stored=localStorage.getItem(KEY);
    const now=Date.now();
    if(!stored){const init={};ALL_FORMATS.forEach(f=>init[f.label]=0);localStorage.setItem(KEY,JSON.stringify(init));return}
    const seen=JSON.parse(stored)||{};
    let fresh=0;
    for(const f of ALL_FORMATS){
      if(!(f.label in seen)){seen[f.label]=now;fresh++}
      f.isNew=!!seen[f.label]&&(now-seen[f.label])<14*86400000;
    }
    if(fresh){
      localStorage.setItem(KEY,JSON.stringify(seen));
      if(fresh>=10&&!sessionStorage.getItem('__kvn_new_fmt_toast')){sessionStorage.setItem('__kvn_new_fmt_toast','1');showToast(`\u2728 ${fresh} new formats just landed from the Format Map!`)}
    }
  }catch{}
}
function toggleFavIdx(i,btn){
  const lbl=(formats[i]||{}).label;if(!lbl)return;
  if(favFormats.has(lbl))favFormats.delete(lbl);else favFormats.add(lbl);
  try{localStorage.setItem('kvn_fav_formats',JSON.stringify([...favFormats]))}catch{}
  btn.textContent=favFormats.has(lbl)?'\u2605':'\u2606';btn.classList.toggle('on',favFormats.has(lbl));
  if(activeFpCat==='fav')applyFpFilter();
}
function fpSelectFavs(){
  if(!favFormats.size){showToast('Star some formats first \u2014 tap \u2606 on any format','warn');return}
  selectedFormats.clear();formats.forEach((f,i)=>{if(favFormats.has(f.label))selectedFormats.add(i)});
  buildFormatPanel();showToast(`Favorites: ${selectedFormats.size} formats selected`);
}
function toggleKbHelp(){document.getElementById('kbOverlay').classList.toggle('open')}
function previewBingoCell(txt,isFree){
  closeBingoPreview();
  const d=document.createElement('div');d.id='bingoPrevPop';d.className='bingo-prevpop';
  d.innerHTML=`<div class="bpp-t">${isFree?'FREE SPACE':esc(txt)}</div><div class="bpp-s">${isFree?'Automatically yours.':'Find a video matching this to daub the square. Right-click / long-press any cell to peek like this.'}</div><button onclick="closeBingoPreview()">Got it</button>`;
  document.body.appendChild(d);
}
function closeBingoPreview(){const d=document.getElementById('bingoPrevPop');if(d)d.remove()}
function undoDaub(){
  if(lastDaubIdx==null||!bingoState[lastDaubIdx]){showToast('Nothing to undo');return}
  toggleDaub(lastDaubIdx,false);lastDaubIdx=null;showToast('Last daub undone');
}
async function shareResultCard(){
  if(!finalString){showToast('Spin first!','warn');return}
  const W=800,H=418;
  const xml=v=>String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  const q=finalString;
  const fsz=q.length>30?Math.max(16,Math.floor(1050/q.length)):34;
  const fmtLabel=chosenFormat?chosenFormat.label:'';
  const chipEl=document.getElementById('eraChip'),metaEl=document.getElementById('resultMeta');
  const chipTxt=(metaEl&&metaEl.style.display!=='none'&&chipEl)?chipEl.textContent:'';
  let svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}">`;
  svg+=`<rect width="${W}" height="${H}" fill="#12121f"/><rect width="${W}" height="6" fill="#e74c3c"/>`;
  svg+=`<text x="${W/2}" y="64" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-weight="900" font-size="26" fill="#e74c3c">YOUTUBE'S RECYCLE BIN</text>`;
  svg+=`<text x="${W/2}" y="92" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="13" fill="#667">the wheel chose\u2026</text>`;
  svg+=`<rect x="60" y="150" width="${W-120}" height="90" rx="45" fill="#1c1c30" stroke="#e74c3c" stroke-width="2"/>`;
  svg+=`<text x="${W/2}" y="${195+fsz/3}" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-weight="800" font-size="${fsz}" fill="#fff">${xml(q)}</text>`;
  if(fmtLabel)svg+=`<text x="${W/2}" y="285" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="14" fill="#7e9cd8">format: ${xml(fmtLabel)}</text>`;
  if(chipTxt)svg+=`<text x="${W/2}" y="315" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="14" fill="#f1c40f">${xml(chipTxt)}</text>`;
  svg+=`<text x="${W/2}" y="${H-28}" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="13" fill="#556">kvnaust.falcontechnix.com \u00b7 YouTube's Recycle Bin \u00b7 @KVNAUST</text></svg>`;
  try{
    const img=new Image();
    const url=URL.createObjectURL(new Blob([svg],{type:'image/svg+xml'}));
    await new Promise((res,rej)=>{img.onload=res;img.onerror=rej;img.src=url});
    const cv=document.createElement('canvas');cv.width=W*2;cv.height=H*2;
    cv.getContext('2d').drawImage(img,0,0,W*2,H*2);
    URL.revokeObjectURL(url);
    const blob=await new Promise(r=>cv.toBlob(r,'image/png'));
    if(navigator.clipboard&&window.ClipboardItem){
      await navigator.clipboard.write([new ClipboardItem({'image/png':blob})]);
      showToast('Card copied \u2014 paste it in Discord!');
    }else{
      const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='recyclebin-spin.png';a.click();
      showToast('Card downloaded');
    }
  }catch(e){showToast('Card failed: '+e.message,'warn')}
}
(function initQol(){
  try{
    wheelCatColor=qolPref('kvn_wheel_catcolor');
    const c1=document.getElementById('sCatColor');if(c1)c1.checked=wheelCatColor;
    const c2=document.getElementById('sPreferUnspun');if(c2)c2.checked=qolPref('kvn_prefer_unspun');
    const c3=document.getElementById('sReduceMotion');if(c3)c3.checked=qolPref('kvn_reduce_motion');
  }catch{}
  if(reduceMotionOn())document.body.classList.add('reduce-motion');
  updateWheelLegend();
})();

document.addEventListener('keydown',e=>{
  const inInput=document.activeElement.tagName==='INPUT'||document.activeElement.tagName==='SELECT';
  if((e.key==='r'||e.key==='R')&&!inInput&&currentScreen==='summary-screen'&&!e.ctrlKey)newSession();
  if(e.ctrlKey&&e.key==='Enter'&&currentScreen==='wheel-screen'&&!spinning){e.preventDefault();spinWheel()}
  if((e.key===' '||e.key==='Enter')&&currentScreen==='number-screen'&&!inInput){e.preventDefault();generateNumber()}
  // Prevent spacebar from activating focused buttons on other screens (which could trigger sounds)
  if(e.key===' '&&!inInput&&currentScreen!=='number-screen'){e.preventDefault()}
  if((e.key==='b'||e.key==='B')&&!inInput)toggleBingo();
  if(e.key==='?'&&!inInput){e.preventDefault();toggleKbHelp()}
  if(e.key==='ArrowRight'&&!inInput&&(currentScreen==='format-screen'))goNext();
  if(e.key==='ArrowLeft'&&!inInput)goPrev();
  if(e.key==='Escape'){
    if(document.getElementById('bingoOverlay').classList.contains('open'))toggleBingo();
    if(document.getElementById('formatPanel').classList.contains('open'))toggleFormatPanel();
    if(document.getElementById('historyPanel').classList.contains('open'))toggleHistory();
    if(document.getElementById('kbOverlay').classList.contains('open'))toggleKbHelp();
    closeBingoPreview();
    if(document.getElementById('bingoWin').classList.contains('show'))dismissBingoWin();
    if(document.getElementById('bingoFlash').classList.contains('show')&&document.getElementById('bfContinue').classList.contains('show'))closeBingoFlash();
    if(document.getElementById('bingoSetup').classList.contains('open'))toggleBingoSetup();
    if(document.getElementById('errPanel').classList.contains('open'))toggleErrPanel();
    if(searchResultsOpen)closeSearchResults();
    if(document.getElementById('settingsOverlay').classList.contains('open'))toggleSettings();
    if(document.getElementById('statsOverlay').classList.contains('open'))closeStats();
    if(document.getElementById('shortcutsOverlay').classList.contains('open'))closeShortcuts();
    if(document.getElementById('achievementsOverlay').classList.contains('open'))closeAchievements();
    if(document.getElementById('galleryOverlay').classList.contains('open'))closeGallery();
    if(document.getElementById('recordsOverlay').classList.contains('open'))closeRecords();
    if(document.getElementById('creditsOverlay').classList.contains('open'))closeCredits();
    const findDetail=document.querySelector('.rec-find-detail');if(findDetail)findDetail.remove();
  }
});

// ═══════════════════════════════════
//  BINGO SETUP PANEL
// ═══════════════════════════════════
// Per-letter bingo removed — functions kept as stubs for wrapper compat
function togglePerLetter(){}
function loadPerLetterSetting(){}

function toggleBingoSetup(){
  const p=document.getElementById('bingoSetup');p.classList.toggle('open');
  document.getElementById('bingoToggle').classList.toggle('active',p.classList.contains('open'));
  if(p.classList.contains('open'))renderBingoSetup();
}

function renderBingoSetup(){
  const list=document.getElementById('bingoSetupList');
  list.innerHTML=`<div style="font-size:.65rem;color:var(--muted);margin-bottom:6px">${BINGO_LIVE.length} categories</div>`+
    BINGO_LIVE.map((cat,i)=>
      `<div class="bs-cat"><input value="${esc(cat)}" onchange="updateBingoCat(${i},this.value)"><button onclick="removeBingoCat(${i})">&#10005;</button></div>`
    ).join('')+
    `<button class="bs-add" onclick="addBingoCat()">+ Add Category</button>`;
}

function updateBingoCat(idx,val){BINGO_LIVE[idx]=val;saveBingoCategories()}
function removeBingoCat(idx){if(BINGO_LIVE.length<=24){showToast('Need at least 24 categories','warn');return}BINGO_LIVE.splice(idx,1);saveBingoCategories();renderBingoSetup()}
function addBingoCat(){BINGO_LIVE.push('New category');saveBingoCategories();renderBingoSetup()}
function resetBingoToDefaults(){try{const e=JSON.parse(document.getElementById('embedded-bingo-cats').textContent);BINGO_LIVE=e.categories||[...BINGO_CATS]}catch{BINGO_LIVE=[...BINGO_CATS]}saveBingoCategories();renderBingoSetup();showToast('Reset to defaults ('+BINGO_LIVE.length+' categories)')}
function exportBingoJSON(){
  const out={categories:BINGO_LIVE};
  const blob=new Blob([JSON.stringify(out,null,2)],{type:'application/json'});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='bingo-categories.json';a.click();showToast('Exported!');
}
function importBingoJSON(input){
  const file=input.files[0];if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{
    try{
      const data=JSON.parse(e.target.result);
      let cats=Array.isArray(data)?data:data.categories||null;
      // Support old B/I/N/G/O format
      if(!cats&&data.B)cats=[...data.B,...(data.I||[]),...(data.N||[]),...(data.G||[]),...(data.O||[])];
      if(!cats||cats.length<24)throw new Error('Need at least 24 categories');
      BINGO_LIVE=cats;saveBingoCategories();renderBingoSetup();showToast('Imported!');
    }catch(err){showToast('Import failed: '+err.message,'err');logError('error','Bingo import: '+err.message)}
  };
  reader.readAsText(file);input.value='';
}

// ═══════════════════════════════════
//  UTIL
// ═══════════════════════════════════
function shuffle(a){for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]]}}
function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
function showToast(msg,type){
  const t=document.getElementById('toast');t.textContent=msg;
  t.className='toast '+(type||'ok');
  t.classList.add('show');
  if(type==='err'||type==='warn')logError(type==='err'?'error':'warn',msg);
  setTimeout(()=>t.classList.remove('show'),type==='err'?4000:1800);
}

// ═══════════════════════════════════
//  INIT (must be after all declarations)
// ═══════════════════════════════════
pickGameStamps();
allowRepeatFormats=localStorage.getItem('kvn_allow_repeats')==='1';
// Restore saved daub color/opacity
try{const daubSaved=JSON.parse(localStorage.getItem('kvn_daub'));if(daubSaved){document.getElementById('daubColor').value=daubSaved.color;document.getElementById('daubOpacity').value=daubSaved.opacity;setDaubColor(daubSaved.color)}}catch{}
// Restore saved sound preference
try{const savedSound=localStorage.getItem('kvn_sound');if(savedSound&&savedSound!=='nautical'){soundMode=savedSound;document.getElementById('soundPick').value=savedSound}else if(savedSound==='nautical'){localStorage.removeItem('kvn_sound')}}catch{}
loadGameSetup();loadWheelTheme();checkResumeGame();

// ══════════ FOUND IT / HUNT / LIVE FEED / LEADERBOARD HERO ══════════
const RARITY_COLORS={'LEGENDARY':'#ffd700','SUPER RARE':'#e74c3c','VERY RARE':'#e67e22','RARE':'#2ecc71','COMMON':'#3498db'};
function rarityFromDate(iso){
  if(!iso)return'COMMON';
  const y=new Date(iso).getFullYear();
  if(y<=2005)return'LEGENDARY';
  if(y===2006)return'SUPER RARE';
  if(y<=2008)return'VERY RARE';
  if(y<=2012)return'RARE';
  return'COMMON';
}

// ── FOUND IT ──
let _foundItParticles=[];
let _foundItData={};
function showFoundIt(videoId,title,views,isoDate){
  const rarity=rarityFromDate(isoDate);
  const color=RARITY_COLORS[rarity]||'#ffd700';
  _foundItData={
    videoId,title,views,isoDate,rarity,
    searchStr:finalString,
    lead:chosenFormat?chosenFormat.label:'',
    datePosted:document.getElementById('vtDatePosted').value.trim(),
    channelVids:document.getElementById('vtChannelVids').value.trim(),
    metrics:{...currentMetrics}
  };
  const ov=document.getElementById('foundOv');
  if(!ov)return;
  const thumb=document.getElementById('foundThumb');
  const rarityLbl=document.getElementById('foundRarityLbl');
  const vTitle=document.getElementById('foundVTitle');
  const vSub=document.getElementById('foundVSub');
  const watchBtn=document.getElementById('foundWatchBtn');
  const ovEl=document.getElementById('foundOverall');
  if(thumb)thumb.src=videoId?`https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`:'';
  if(rarityLbl){rarityLbl.textContent=rarity;rarityLbl.style.color=color;rarityLbl.style.textShadow=`0 0 24px ${color}`;}
  if(vTitle)vTitle.textContent=title||'';
  if(vSub){vSub.textContent=views===0?'ZERO VIEWS — POTENTIAL FIND':`${(views||0).toLocaleString()} views when found`;vSub.style.color=views===0?'#ffd700':'#ccc';}
  if(watchBtn)watchBtn.dataset.url=`https://www.youtube.com/watch?v=${videoId}`;
  // Overall score display
  if(ovEl){
    const m=currentMetrics;
    const vals=[m.entertainment,m.weirdness,m.gem,m.liked].filter(v=>v>0);
    if(vals.length){
      const avg=Math.round(vals.reduce((a,b)=>a+b,0)/vals.length*10)/10;
      const full=Math.round(avg);
      const stars='🌟'.repeat(full)+'✩'.repeat(5-full);
      ovEl.innerHTML=`<span class="ov-stars">${stars}</span><span style="color:#ffd700;font-weight:700">${avg.toFixed(1)}</span><span class="ov-score"> / 5.0 overall</span>`;
      ovEl.style.display='';
    }else{ovEl.style.display='none';}
  }
  ov.style.setProperty('--f-color',color);
  ov.classList.add('open');
  document.body.style.overflow='hidden';
  if(rarity==='LEGENDARY'||views===0)spawnParticles(color);
}
function closeFoundIt(){
  const ov=document.getElementById('foundOv');
  if(ov)ov.classList.remove('open');
  document.body.style.overflow='';
  clearParticles();
}
// ── shared helper: build rich Discord share text ──
function fmtShareDate(s){
  if(!s)return'';
  const iso=s.match(/^(\d{4})-(\d{2})-(\d{2})/);
  if(iso){const M=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];return`${parseInt(iso[3])} ${M[parseInt(iso[2])-1]} ${iso[1]}`;}
  return s;
}
function yearFromDatePosted(s){
  if(!s)return null;
  const iso=s.match(/^(\d{4})-(\d{2})-(\d{2})/);if(iso)return parseInt(iso[1]);
  const dd=s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);if(dd)return parseInt(dd[3]);
  return null;
}
function buildDiscordShare({searchStr,lead,datePosted,isoDate,views,channelVids,videoId,metrics,rarity}){
  const stars=(n,tot=5)=>'⭐'.repeat(n||0)+'✩'.repeat(tot-(n||0));
  const m=metrics||{};
  const date=fmtShareDate(datePosted||isoDate);
  const url=videoId?`https://www.youtube.com/watch?v=${videoId}`:'';
  const RARITY_EMOJI={'LEGENDARY':'🏆','SUPER RARE':'🔴','VERY RARE':'🟠','RARE':'🟢','COMMON':'🔵'};
  const DATE_ICON={'LEGENDARY':'🕰️','SUPER RARE':'📜','VERY RARE':'🗓️','RARE':'🗓️','COMMON':'📅'};
  const rarityLabel=rarity||(()=>{const yr=yearFromDatePosted(datePosted||isoDate);return yr?getRarityLabel(yr):'';})();
  const dateIcon=DATE_ICON[rarityLabel]||'📅';
  const L=[];
  const hdRarity=rarityLabel?`${RARITY_EMOJI[rarityLabel]||''} ${rarityLabel} — `:'';
  L.push(`## 🗑️ ${hdRarity}Recycle Bin Find`);
  if(searchStr)L.push(`\`\`\`${searchStr}\`\`\``);
  L.push('');
  const meta=[];
  if(date)meta.push(`${dateIcon} **${date}**`);
  if(views!==undefined&&views!=='')meta.push(`👁️ **${Number(views).toLocaleString()} views**`);
  if(meta.length)L.push(meta.join('  ·  '));
  if(lead)L.push(`📌 Lead: \`${lead}\``);
  if(channelVids)L.push(`📺 ${channelVids} channel video${channelVids==='1'?'':'s'}`);
  const ratedKeys=['entertainment','weirdness','gem','liked'];
  const ratedVals=ratedKeys.map(k=>m[k]||0);
  const anyRated=ratedVals.some(v=>v>0);
  if(anyRated){
    L.push('');
    L.push(`🎭 Entertainment  ${stars(m.entertainment)}  ${m.entertainment||0}/5`);
    L.push(`👽 Weirdness      ${stars(m.weirdness)}  ${m.weirdness||0}/5`);
    L.push(`💎 Gem Factor     ${stars(m.gem)}  ${m.gem||0}/5`);
    L.push(`❤️ I Just Liked   ${stars(m.liked)}  ${m.liked||0}/5`);
    const nonZero=ratedVals.filter(v=>v>0);
    const avg=Math.round(nonZero.reduce((a,b)=>a+b,0)/nonZero.length*10)/10;
    L.push('');
    L.push(`✨ **Overall  ${'🌟'.repeat(Math.round(avg))}${'✩'.repeat(5-Math.round(avg))}  ${avg.toFixed(1)} / 5.0**`);
  }
  if(url){L.push('');L.push(`🔗 ${url}`);}
  L.push('');
  L.push(`*Found with [YouTube\'s Recycle Bin](<https://kvnaust.falcontechnix.com/>) — @KVNAUST*`);
  // collapse consecutive blank lines
  return L.reduce((a,l,i)=>a.length&&a[a.length-1]===''&&l===''?a:[...a,l],[]).join('\n');
}
function shareFoundItDiscord(){
  const text=buildDiscordShare(_foundItData);
  navigator.clipboard.writeText(text).then(()=>showToast('Copied for Discord!')).catch(()=>showToast('Copy failed','err'));
}
function copyFoundItLink(){
  navigator.clipboard.writeText(`https://youtu.be/${_foundItData.videoId||''}`).then(()=>showToast('Link copied!')).catch(()=>showToast('Copy failed','err'));
}
function spawnParticles(color){
  clearParticles();
  const colors=[color,'#fff','#ffd700','#e74c3c','#3498db'];
  for(let i=0;i<60;i++){
    const el=document.createElement('div');
    el.className='found-particle';
    const c=colors[i%colors.length];
    const w=4+Math.random()*6,h=6+Math.random()*8;
    el.style.cssText=`left:${Math.random()*100}vw;top:-12px;width:${w}px;height:${h}px;background:${c};animation-delay:${Math.random()*1.2}s;animation-duration:${2+Math.random()*1.5}s`;
    document.body.appendChild(el);
    _foundItParticles.push(el);
  }
  setTimeout(clearParticles,4000);
}
function clearParticles(){
  _foundItParticles.forEach(e=>e.remove());
  _foundItParticles=[];
}

// ── BANK IT — Log Find from Power Search ──
let _vtTitle='';
async function psLogFind(videoId,title,views,publishedAt,query){
  const proxy=window.__KVN_YT_PROXY__;
  if(!proxy||!proxy.isAvailable()){showToast('Log in to save finds to the community leaderboard','warn');return;}
  const token=proxy.getToken();
  if(!token)return;
  try{
    const res=await fetch('https://kvnaust.falcontechnix.com/finds.php',{
      method:'POST',
      headers:{'Content-Type':'application/json','X-KVN-Token':token},
      body:JSON.stringify({video_id:videoId,video_title:title,views_when_found:views,date_posted:publishedAt,lead:query||'',source:'sonder'})
    });
    const d=await res.json();
    if(!d||!d.ok){showToast(d&&d.error?d.error:'Could not save find','warn');return;}
    showToast('Find banked!');
    showFoundIt(videoId,title,views,publishedAt);
  }catch{showToast('Network error saving find','warn');}
}

// ── LIVE FIND FEED ──

// ── LEADERBOARD HERO ──
function renderLbHero(finds){
  const hero=document.getElementById('lbHero');
  if(hero)hero.classList.remove('show');
  return; // hero removed — squashed thumbnail, redundant with record holder header
  if(!hero||!finds||!finds.length){if(hero)hero.classList.remove('show');return;}
  const sorted=[...finds].sort((a,b)=>{
    const az=a.views_when_found===0,bz=b.views_when_found===0;
    if(az&&!bz)return-1;if(!az&&bz)return 1;
    const vd=(a.views_when_found??999999)-(b.views_when_found??999999);
    if(vd!==0)return vd;
    return new Date(a.date_posted)-new Date(b.date_posted);
  });
  const f=sorted[0];
  const color=RARITY_COLORS[f.rarity]||'#888';
  const vid=f.video_url?getVideoId(f.video_url):'';
  const thumb=vid?`https://i.ytimg.com/vi/${vid}/mqdefault.jpg`:'';
  const dateStr=new Date(f.date_posted).toLocaleDateString('en-US',{weekday:'long',year:'numeric',month:'long',day:'numeric'});
  hero.style.borderColor=`${color}30`;
  hero.style.boxShadow=`0 4px 24px ${color}18`;
  hero.innerHTML=`${thumb?`<img class="lb-hero-thumb" src="${esc(thumb)}" alt="">`:''}
<div class="lb-hero-over">
  <span class="lb-hero-rarity" style="color:${color};border-color:${color}40">${esc(f.rarity||'')}</span>
  <div class="lb-hero-date" style="color:${color}">${esc(dateStr)}</div>
  ${f.video_title?`<div class="lb-hero-title">${esc(f.video_title)}</div>`:''}
  <div class="lb-hero-meta"><span class="lb-hero-finder">${esc(f.found_by||'?')}</span> &middot; ${f.views_when_found===0?'<span style="color:#ffd700">0 views</span>':(f.views_when_found??'?')+' views when found'}</div>
</div>
<div class="lb-crown">&#x1F451;</div>`;
  hero.classList.add('show');
}
// ══════════ END FEATURES ══════════

// Load saved app theme before anything renders
(()=>{const t=localStorage.getItem('app_theme');if(t&&t!=='default')applyAppTheme(t)})();
loadImages();loadBingoCategories();loadPerLetterSetting();buildBingo();buildFormatPanel();fetchDocFormats();updateNavArrows();updateBingoBtn();refreshKvnVideoDot();psInit();buildThemePills();
// Re-check NEW status periodically (every 10 min) so the "JUST DROPPED" badge ages out without a reload
setInterval(refreshKvnVideoDot,10*60*1000);
checkForUpdates();checkHoliday();
// Service worker registration handled by hosted wrapper (sw.js not bundled in monolithic HTML)
// Fetch community finds in background, poll every 60s — but only while the tab is visible
// (a backgrounded tab did a 500-record fetch + DOM rebuild every minute forever).
setTimeout(fetchCommunityRecords,2000);
setInterval(()=>{if(document.visibilityState==='visible')fetchCommunityRecords()},60000);
// Refresh once immediately when the tab comes back to the foreground.
document.addEventListener('visibilitychange',()=>{if(document.visibilityState==='visible'&&communityFetchedOnce)fetchCommunityRecords()});
// Hash routing: #records, #stats, #shortcuts, #credits
function handleHash(){
  const h=location.hash.toLowerCase().replace('#','');
  if(h==='records')setTimeout(showRecords,300);
  else if(h==='stats')setTimeout(showStats,300);
  else if(h==='achievements'||h==='badges')setTimeout(showAchievements,300);
  else if(h==='gallery')setTimeout(showGallery,300);
  else if(h==='shortcuts')setTimeout(showShortcuts,300);
  else if(h==='credits')setTimeout(showCredits,300);
}
handleHash();
window.addEventListener('hashchange',handleHash);
</script>

<!-- ═══ EMBEDDED BINGO CATEGORIES (fallback when JSON can't be loaded) ═══ -->
<script type="application/json" id="embedded-bingo-cats">
{"categories":["Fever dream","Conspiracy theory","Future world leader","\"I've been to this place\"","Possibly a crime","Unhinged rambler","5 seconds of nothing","Intimate family moment","Test upload","Security cam footage","Zoom call","Pet video","Car ride","Baby's first steps","Drunk recording","Potential cult leader","Feels like a deep web video","Dial 911","Tweaker","Ancient artifact (2005-2006)","Foreign language (to me)","Randomly nsfw","Potential serial killer","Actual wisdom / insight","Wholesome content","Someone's backyard","Late night thoughts","Accidental upload","Mirror selfie video","Garage band","Phone left recording","Cooking attempt","Parking lot footage","Dark room vibes","Toddler with phone","I learned something new","Recurring character","AMV","Happy human","Sad human","Actual talent","Rabbit-hole channel","New sport unlocked","Creepy","Karaoke session","School presentation","Minecraft gameplay","Unboxing something weird","Dance practice","Cat content","Screen recording","Birthday party","Storm footage","Toy review","Tutorial attempt","Randomly creepy / unnerving","School project / presentation","Church / office production","Concert footage","Just plain weird / WTF","Good music","May be mentally unwell","Channel has 20,000+ uploads","School assignment / project","Bass boosted / distorted audio","Nature footage","Religious content","Stop motion","Someone's commute","Dashcam clip","Foreign news","Gaming rage","Exercise video","Magic trick","Time lapse","Channel has 5,000+ uploads","Gameplay of an obscure game","Innovative idea / technology","Same uploader in 2 searches","New lead discovery","Random food spotted","Old meme","Gives me Nostalgia","Life-hack","Jump scare","Vintage quality","Before 2010 energy","Someone singing","Hotel room tour","Construction site","Wedding footage","Elevator music","Walmart adventure","Drone footage","Soundcheck","Random animal spotted","Home video","Underrated creator","Liminality","No context but makes sense","Potential undiscovered 9/11 video"]}
</script>

<!-- ═══ EMBEDDED VERSION (monolithic - update here when releasing) ═══ -->
<script type="application/json" id="app-version-data">{"version":"7.20.0","build":"2026-07-16T12:00:00"}</script>

<!-- ── FOUND IT overlay ── -->
<div id="foundOv" onclick="closeFoundIt()">
  <div class="found-card" onclick="event.stopPropagation()">
    <div class="found-thumb-wrap"><img id="foundThumb" src="" alt=""></div>
    <div class="found-rarity" id="foundRarityLbl"></div>
    <div class="found-title" id="foundVTitle"></div>
    <div class="found-sub" id="foundVSub"></div>
    <div class="found-overall" id="foundOverall"></div>
    <div class="found-btns" style="grid-template-columns:1fr 1fr 1fr">
      <button class="vt-btn yt-btn" id="foundWatchBtn" onclick="event.stopPropagation();window.open(this.dataset.url,'_blank','noopener')">&#9654; Watch</button>
      <button class="vt-btn share-discord" onclick="event.stopPropagation();shareFoundItDiscord()">Discord</button>
      <button class="vt-btn share-svg" onclick="event.stopPropagation();exportShareCard()">Share SVG</button>
      <button class="vt-btn" style="background:var(--card2)" onclick="event.stopPropagation();copyFoundItLink()">Copy Link</button>
      <button class="vt-btn add-records" onclick="event.stopPropagation();addCurrentToRecords()">Add to Records</button>
      <button class="vt-btn" onclick="closeFoundIt()">Close</button>
    </div>
  </div>
</div>


<script type="application/json" id="app-manifest">
{
  "version": "7.20.0",
  "build": "2026-07-16T00:00:00",
  "changelog": "QoL drop: era+rarity forecast on results, highlighted variables, year-filter chips, format favorites, NEW badges, category-colored wheel, fresh-first spins, share cards, bingo peek+undo, shortcuts help (?), reduced-motion mode",
  "repo": "https://github.com/sworrl/KVN_AUST",
  "live": "https://kvnaust.falcontechnix.com/kvnaust-recyclebin.html"
}
</script>

<!-- SEO: Semantic content block for crawlers. Visually hidden via clip/clip-path (sr-only pattern),
     accessible to screen readers and search engines. Headings start at h2 to avoid duplicating the app's h1. -->
<section id="kvn-seo-about" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0">
  <h2>KVN AUST Game Tool — YouTube's Recycle Bin</h2>
  <p>Play the official KVN AUST format wheel, Recycle Bin Bingo, and zero-view video finder. Welcome to the <strong>KVN AUST game tool</strong> — the interactive fan-made companion to <a href="https://www.youtube.com/@KVNAUST" rel="noopener">KVN AUST's YouTube Recycle Bin</a> series. This is the full <strong>KVNAUST HTML</strong> game, also referred to as <strong>KVN_AUST</strong>, <strong>KVNAUST</strong>, or simply <strong>kvn aust</strong>. Play free at <a href="https://falcontechnix.com/KVN_AUST/">falcontechnix.com/KVN_AUST/</a>.</p>

  <h3>What the KVN AUST game does</h3>
  <p>The KVN AUST game tool lets you spin the <strong>format wheel</strong> to get a default camera or phone filename pattern — <code>IMG_1234</code>, <code>DSC_0001</code>, <code>VID_20230101</code>, <code>MVI_5678</code>, <code>P_20230101_123456</code>, <code>100_NIKON</code>, and more. Paste the generated string into YouTube search and you often find videos with zero views. This mirrors exactly how <strong>KVN AUST</strong> (known elsewhere as <strong>MingKasterMK</strong>, <strong>Ming Kaster MK</strong>, or <strong>@MingKasterMK</strong> on X/Twitter) hunts zero-view uploads on his channel.</p>

  <h3>KVN AUST Recycle Bin Bingo</h3>
  <p>Besides the format wheel, the KVN AUST tool includes <strong>Recycle Bin Bingo</strong> — a 5x5 bingo card with categories drawn from recurring finds on the KVN AUST Recycle Bin series. Mark squares as you discover matching zero-view videos. Logged-in players sync completed cards across devices via FalconTechnix cloud save.</p>

  <h3>The KVN AUST format map</h3>
  <p>The full <strong>KVN AUST format map</strong> (also known as the Recycle Bin format map or kvnaust map) is a complete catalog of every default filename lead KVN AUST has used in the Recycle Bin series, organized by era — classic point-and-shoot cameras, DSLRs, camcorders, smartphones, and manufacturer-specific schemes. Each entry includes a description of where the format comes from and example search strings.</p>

  <h3>Common searches this tool answers</h3>
  <ul>
    <li>kvn aust html — the browser-based KVN AUST game tool</li>
    <li>kvn aust game — interactive companion to the YouTube Recycle Bin series</li>
    <li>kvn aust tool — official fan tool for spinning format wheel and finding zero-view videos</li>
    <li>kvn aust bingo — Recycle Bin Bingo card built into the KVN AUST game</li>
    <li>kvn aust wheel — the random filename-format wheel / spinner</li>
    <li>kvn aust map — the format map / Recycle Bin map of default filenames</li>
    <li>kvnaust — alternate spelling of KVN AUST</li>
    <li>KVN_AUST — repository name at github.com/sworrl/KVN_AUST</li>
    <li>KVNAUST bingo / KVNAUST wheel / KVNAUST game — the same tool</li>
    <li>youtube recycle bin — KVN AUST's YouTube series about zero-view videos</li>
    <li>zero view videos / zero-view youtube — what KVN AUST finds using default filenames</li>
    <li>MingKasterMK — KVN AUST's X/Twitter handle</li>
  </ul>

  <h3>About KVN AUST</h3>
  <p><strong>KVN AUST</strong> (pronounced "Kevin Aust") is the YouTuber behind the <em>YouTube's Recycle Bin</em> series — a long-running comedy investigation series searching for zero-view and near-zero-view YouTube uploads. His main channel is <a href="https://www.youtube.com/@KVNAUST" rel="noopener">youtube.com/@KVNAUST</a> and his X/Twitter is <a href="https://x.com/MingKasterMK" rel="noopener">@MingKasterMK</a>. The <strong>KVN AUST</strong> name is also styled as <strong>KVNAUST</strong>, <strong>KVN_AUST</strong>, or casually as <strong>kvn aust</strong>. This game tool is built and maintained by Justin Earl (<a href="https://x.com/Chegnus" rel="noopener">@Chegnus</a>) at <a href="https://falcontechnix.com/">FalconTechnix</a>.</p>

  <h3>How to play the KVN AUST game</h3>
  <ol>
    <li>Open <a href="https://falcontechnix.com/KVN_AUST/">the KVN AUST game tool</a> in your browser — no install required.</li>
    <li>Hit the format wheel / spinner to generate a default filename pattern.</li>
    <li>Copy the search string and paste it into YouTube search.</li>
    <li>Browse results for zero-view or near-zero-view videos (the Recycle Bin finds).</li>
    <li>Track discoveries and complete KVN AUST Recycle Bin Bingo cards.</li>
    <li>Log in (optional) to sync progress across devices.</li>
  </ol>
</section>

<script nonce="173fdfc5a324414af2735481bb5efc38">(function(){
  // Whitelist ONLY the canonical Sonder hosts: kvnaust.falcontechnix.com (current),
  // falcontechnix.com / www.falcontechnix.com (legacy / apex). Localhost for dev.
  // Everything else gets the banner — including nbvs.falcontechnix.com (different
  // product, same wrapper code) and any third-party re-host. Intentional: the banner
  // pushes users back to the canonical KVN_AUST tool, regardless of which non-canonical
  // surface served the page.
  var ok = /^(?:(?:www|kvnaust)\.)?falcontechnix\.com$/i.test(location.hostname)
        || /^localhost(?::\d+)?$/i.test(location.host)
        || /^127\.0\.0\.1(?::\d+)?$/i.test(location.host);
  if (ok) return;
  setTimeout(function(){
    var b = document.createElement('div');
    b.style.cssText='position:fixed;inset:auto 0 0 0;padding:14px 18px;background:#7a1d1d;color:#fff;'
      +'font-family:Inter,system-ui,sans-serif;font-size:14px;text-align:center;z-index:2147483647;'
      +'box-shadow:0 -4px 16px rgba(0,0,0,.5)';
    b.innerHTML='<strong>This is a fan re-host.</strong> '
      +'For the actual KVN AUST tool — login, cloud save, leaderboards, multiplayer — '
      +'visit <a href="https://kvnaust.falcontechnix.com/" '
      +'style="color:#ffd54f;font-weight:700;text-decoration:underline">kvnaust.falcontechnix.com</a>.';
    document.body.appendChild(b);
  }, 1200);
})();</script>

<!-- KVN Cloud Save Shim (injected by server) -->
<script nonce="173fdfc5a324414af2735481bb5efc38">
/**
 * KVN_AUST Cloud Save Shim
 * Injected by the server — the source HTML is completely unaware of this.
 *
 * What it does:
 * 1. Intercepts localStorage for kvn_* keys and mirrors to server
 * 2. Provides a login/register UI (floating button)
 * 3. Warns guest users that data won't persist across sessions
 * 4. Checks for HTML updates from GitHub and prompts reload
 */

(function() {
'use strict';

// Domain lock — this shim is proprietary Falcon Technix IP.
// It will not initialize on unauthorized domains.
const _h = location.hostname;
if (_h !== 'kvnaust.falcontechnix.com' && _h !== 'localhost' && _h !== '127.0.0.1'
    && !_h.startsWith('192.168.') && !_h.startsWith('10.')) return;

// Origin marker the HTML file checks for. If shim hasn't loaded by 4s after
// DOMContentLoaded, the HTML self-redirects to the canonical wrapper URL.
window.__KVN_WRAPPER_LOADED__ = true;
window.__KVN_WRAPPER_ORIGIN__ = 'falcontechnix.com';

// ─── Telemetry ───
(function() {
    var _sid = sessionStorage.getItem('_kvn_sid');
    if (!_sid) { _sid = Math.random().toString(36).slice(2); sessionStorage.setItem('_kvn_sid', _sid); }
    function _send(path, data) {
        try { fetch(path, {method:'POST', keepalive:true, body:JSON.stringify(data), headers:{'Content-Type':'application/json'}}).catch(function(){}); } catch(e) {}
    }
    window._kvnTele = function(event, extra) {
        _send('/telemetry', Object.assign({site:'kvnaust', event:event, sid:_sid}, extra||{}));
    };
    window.addEventListener('error', function(e) {
        _send('/telemetry/error', {site:'kvnaust', msg:(e.message||'').slice(0,200), url:(e.filename||location.pathname).slice(0,100)});
    });
    window.addEventListener('unhandledrejection', function(e) {
        var msg=''; try{msg=String(e.reason&&e.reason.message||e.reason||'').slice(0,200);}catch(x){}
        _send('/telemetry/error', {site:'kvnaust', msg:msg, url:location.pathname});
    });
    window._kvnTele('load');
})();

const SYNC_URL = '/KVN_AUST/sync.php';
const VERSION_URL = '/KVN_AUST/version.php';
const SONDER_URL = '/KVN_AUST/sonder.php';
const SONDER_MP  = '/KVN_AUST/multiplayer.php';
const SONDER_GLOBAL = 'sonder:global';
const TOKEN_KEY = '__kvn_auth_token';
const USER_KEY = '__kvn_auth_user';
const GUEST_WARNED_KEY = '__kvn_guest_warned';
const PENDING_KEY = '__kvn_pending_sync';              // persisted queue survives refresh/crash
const LAST_SEEN_KEY = '__kvn_last_seen';               // timestamp for welcome-back modal
const WELCOME_THRESHOLD_MS = 15 * 60 * 1000;           // show welcome-back if absent this long
// NOTE: kvn_doc_formats* and kvn_doc_ts intentionally NOT synced — they're regenerable
// GitHub format caches. Syncing them causes cross-device pollution (old v3 cache overwrites
// a fresh device's v4 slot, stale timestamp makes isCacheStale() return false, the app then
// trusts the stale cache and never re-fetches — stuck at 68 formats instead of 177).
const SYNCED_KEYS = ['kvn_games', 'kvn_bingo_state', 'kvn_bingo_cats', 'kvn_settings', 'kvn_completed_bingo', 'kvn_bingo_perLetter', 'kvn_records', 'kvn_allow_repeats', 'kvn_daub', 'kvn_sound', 'sp_last_url', 'kvn_avatar_webp'];
// Purged from localStorage on every shim boot. Any legacy format-cache key goes here.
// Source HTML's current cache lives at kvn_fmt_v5 / kvn_fmt_ts_v5 — NOT listed (still in use).
const LEGACY_LOCAL_KEYS = [
    'kvn_doc_formats', 'kvn_doc_formats_v2', 'kvn_doc_formats_v3', 'kvn_doc_formats_v4',
    'kvn_doc_ts'
];
const SYNC_DEBOUNCE_MS = 3000;
const RETRY_BACKOFF_MS = [2000, 5000, 15000, 45000];  // escalating retries on failure

let syncTimer = null;
let retryTimer = null;
let retryIndex = 0;
let pendingSync = {};
let isAuthenticated = false;
let currentUser = null;
let isOnline = typeof navigator !== 'undefined' ? navigator.onLine !== false : true;
let authJustCompleted = false; // guard: set for 8s after login so SW reload doesn't kick logged-in user

// ─── Auth helpers ───
function getToken() { return sessionStorage.getItem(TOKEN_KEY) || localStorage.getItem(TOKEN_KEY) || ''; }
function getUser() { return sessionStorage.getItem(USER_KEY) || localStorage.getItem(USER_KEY) || ''; }

function setAuth(token, username, remember) {
    const store = remember ? localStorage : sessionStorage;
    store.setItem(TOKEN_KEY, token);
    store.setItem(USER_KEY, username);
    // Clean the other store
    (remember ? sessionStorage : localStorage).removeItem(TOKEN_KEY);
    (remember ? sessionStorage : localStorage).removeItem(USER_KEY);
    isAuthenticated = true;
    currentUser = username;
    // Block SW-triggered reloads for 8s so controllerchange can't kick the user out mid-login
    authJustCompleted = true;
    clearTimeout(setAuth._t);
    setAuth._t = setTimeout(() => { authJustCompleted = false; }, 8000);
    updateYtProxy();
    updateUI();
}

function clearAuth() {
    localStorage.removeItem(TOKEN_KEY);
    localStorage.removeItem(USER_KEY);
    sessionStorage.removeItem(TOKEN_KEY);
    sessionStorage.removeItem(USER_KEY);
    isAuthenticated = false;
    currentUser = null;
    updateYtProxy();
    updateUI();
}

// Expose the YT proxy endpoint to the FOSS HTML. getToken() is a closure so it
// always returns the current (rotated) token — the HTML never holds a stale copy.
function updateYtProxy() {
    window.__KVN_YT_PROXY__ = isAuthenticated ? {
        url: '/KVN_AUST/yt-search',
        getToken: () => getToken(),
        isAvailable: () => isAuthenticated,
    } : null;
}

// ─── Request signing (HMAC-SHA512 over method|path|sha512(body)|ts|nonce|action) ──
// Mirrors sync.php's verifyRequestSignature. Signing key = HKDF-SHA512 over the
// raw 32-byte decoded session token with info="kvn-sig-v1".
const _SYNC_PATH = '/KVN_AUST/sync.php';
function _hexToBytes(hex) {
    const b = new Uint8Array(hex.length / 2);
    for (let i = 0; i < b.length; i++) b[i] = parseInt(hex.substr(i * 2, 2), 16);
    return b;
}
function _bytesToHex(bytes) {
    let s = '';
    for (const b of bytes) s += b.toString(16).padStart(2, '0');
    return s;
}
async function _sha512Hex(strOrBytes) {
    const buf = await crypto.subtle.digest('SHA-512',
        typeof strOrBytes === 'string' ? new TextEncoder().encode(strOrBytes) : strOrBytes);
    return _bytesToHex(new Uint8Array(buf));
}
async function _deriveSigningKey(token) {
    // Token is 64 hex chars → 32 bytes of key material → HKDF-SHA512 to 64-byte signing key.
    const ikm = _hexToBytes(token);
    const hkdfKey = await crypto.subtle.importKey('raw', ikm, 'HKDF', false, ['deriveBits']);
    const bits = await crypto.subtle.deriveBits({
        name: 'HKDF', hash: 'SHA-512',
        salt: new Uint8Array(),
        info: new TextEncoder().encode('kvn-sig-v1'),
    }, hkdfKey, 64 * 8);
    return crypto.subtle.importKey('raw', bits, { name: 'HMAC', hash: 'SHA-512' }, false, ['sign']);
}
async function _signRequest(token, action, bodyStr) {
    const ts = String(Math.floor(Date.now() / 1000));
    const nonce = _bytesToHex(crypto.getRandomValues(new Uint8Array(16)));
    const bodyHash = await _sha512Hex(bodyStr);
    const canonical = `POST\n${_SYNC_PATH}\n${bodyHash}\n${ts}\n${nonce}\n${action}`;
    const key = await _deriveSigningKey(token);
    const sig = new Uint8Array(await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(canonical)));
    return { ts, nonce, sig: _bytesToHex(sig) };
}

// ─── API calls ───
// Server rotates the bearer token on every authed response (phase 4 hardening).
// We read X-KVN-New-Token and persist it before returning the JSON body.
async function apiCall(action, body = {}) {
    const token = getToken();
    const bodyStr = JSON.stringify({ action, ...body });
    const headers = { 'Content-Type': 'application/json' };
    if (token) {
        headers['X-KVN-Token'] = token;
        try {
            const s = await _signRequest(token, action, bodyStr);
            headers['X-KVN-Timestamp'] = s.ts;
            headers['X-KVN-Nonce']     = s.nonce;
            headers['X-KVN-Signature'] = s.sig;
        } catch (e) {
            console.warn('[KVN Sync] sign failed:', e.message);
            // Let the request go unsigned; server will reject in strict mode and the shim
            // will surface the error. Better than silently dropping a write.
        }
    }

    try {
        const r = await fetch(SYNC_URL, { method: 'POST', headers, body: bodyStr });
        const rotated = r.headers.get('X-KVN-New-Token');
        if (rotated && /^[a-f0-9]{64}$/.test(rotated)) {
            const persistent = !!localStorage.getItem(TOKEN_KEY);
            setAuth(rotated, currentUser, persistent);
        }
        return await r.json();
    } catch (e) {
        console.warn('[KVN Sync]', action, 'failed:', e.message);
        return { error: 'Network error' };
    }
}

// ─── localStorage interception ───
const _origSetItem = localStorage.setItem.bind(localStorage);
const _origGetItem = localStorage.getItem.bind(localStorage);
const _origRemoveItem = localStorage.removeItem.bind(localStorage);

// Persist pendingSync to localStorage so queued writes survive refresh/crash/offline.
function persistPending() {
    try {
        if (Object.keys(pendingSync).length > 0) {
            _origSetItem(PENDING_KEY, JSON.stringify(pendingSync));
        } else {
            _origRemoveItem(PENDING_KEY);
        }
    } catch {}
}
function loadPending() {
    try {
        const raw = _origGetItem(PENDING_KEY);
        if (raw) {
            const parsed = JSON.parse(raw);
            if (parsed && typeof parsed === 'object') pendingSync = parsed;
        }
    } catch {}
}

localStorage.setItem = function(key, value) {
    _origSetItem(key, value);
    if (isAuthenticated && SYNCED_KEYS.includes(key)) {
        pendingSync[key] = value;
        persistPending();
        updateSyncIndicator();
        clearTimeout(syncTimer);
        syncTimer = setTimeout(flushSync, SYNC_DEBOUNCE_MS);
    }
};

localStorage.removeItem = function(key) {
    _origRemoveItem(key);
    if (isAuthenticated && SYNCED_KEYS.includes(key)) {
        pendingSync[key] = '';
        persistPending();
        updateSyncIndicator();
        clearTimeout(syncTimer);
        syncTimer = setTimeout(flushSync, SYNC_DEBOUNCE_MS);
    }
};

async function flushSync() {
    if (!isAuthenticated || Object.keys(pendingSync).length === 0) return;
    if (!isOnline) return; // online-handler will retrigger when connection returns
    const data = { ...pendingSync };
    const res = await apiCall('sync_push', { data });
    if (res.error || !res.ok) {
        // Keep data in queue; schedule retry with backoff
        console.warn('[KVN Sync] Push failed, will retry:', res.error || 'no ok');
        scheduleRetry();
    } else {
        // Only clear entries we actually sent — any new writes during the request stay queued
        for (const k of Object.keys(data)) {
            if (pendingSync[k] === data[k]) delete pendingSync[k];
        }
        persistPending();
        retryIndex = 0;
        clearTimeout(retryTimer);
    }
    updateSyncIndicator();
}

function scheduleRetry() {
    clearTimeout(retryTimer);
    const delay = RETRY_BACKOFF_MS[Math.min(retryIndex, RETRY_BACKOFF_MS.length - 1)];
    retryIndex++;
    retryTimer = setTimeout(flushSync, delay);
}

// Best-effort flush on page unload. fetch(keepalive:true) lets the browser complete the
// request after the page is gone. We sign async but fire-and-forget — the .then()
// runs on the unload-scheduled microtask queue, which still gets the keepalive request
// dispatched before the tab is fully torn down.
function flushOnUnload() {
    if (!isAuthenticated || Object.keys(pendingSync).length === 0) return;
    const token = getToken();
    if (!token) return;
    const body = JSON.stringify({ action: 'sync_push', data: { ...pendingSync } });
    try {
        _signRequest(token, 'sync_push', body).then(s => {
            fetch(SYNC_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-KVN-Token': token,
                    'X-KVN-Timestamp': s.ts,
                    'X-KVN-Nonce': s.nonce,
                    'X-KVN-Signature': s.sig,
                },
                body,
                keepalive: true,
            });
        }).catch(() => {
            // Last-resort unsigned fallback so we at least try. Server rejects in strict
            // mode; the next session's loadPending() re-queues and retries signed.
            fetch(SYNC_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-KVN-Token': token },
                body, keepalive: true,
            });
        });
    } catch {}
}

// Visibility change → best moment to flush, especially on mobile where tabs may be killed
function onVisibilityChange() {
    if (document.visibilityState === 'hidden') flushOnUnload();
    else if (document.visibilityState === 'visible' && isOnline && Object.keys(pendingSync).length > 0) {
        flushSync();
    }
}

function onOnline() {
    isOnline = true;
    retryIndex = 0; // reset backoff
    updateSyncIndicator();
    if (isAuthenticated && Object.keys(pendingSync).length > 0) flushSync();
}
function onOffline() {
    isOnline = false;
    updateSyncIndicator();
}

async function pullAndHydrate() {
    const res = await apiCall('sync_pull');
    if (res.ok && res.data) {
        let hydrated = 0;
        for (const [key, value] of Object.entries(res.data)) {
            if (SYNCED_KEYS.includes(key) && value) {
                const old = _origGetItem(key);
                _origSetItem(key, value);
                // Fire storage event so the app picks up changes without a reload
                try {
                    window.dispatchEvent(new StorageEvent('storage', {
                        key, newValue: value, oldValue: old, storageArea: localStorage
                    }));
                } catch {}
                hydrated++;
            }
        }
        if (hydrated > 0) {
            console.log(`[KVN Sync] Hydrated ${hydrated} keys from cloud`);
            shimToast('Cloud save loaded! ' + hydrated + ' setting' + (hydrated !== 1 ? 's' : '') + ' restored.', 'ok');
        } else {
            shimToast('Logged in — no cloud saves yet', 'ok');
        }
        return hydrated;
    }
    return 0;
}

// Full push of all current localStorage kvn keys to server
async function pushAll() {
    const data = {};
    for (const key of SYNCED_KEYS) {
        const val = _origGetItem(key);
        if (val) data[key] = val;
    }
    if (Object.keys(data).length > 0) {
        await apiCall('sync_push', { data });
    }
}

// ─── Version check ───
let knownSha = null;
let initialSha = null;             // SHA of the HTML this browser actually loaded with
let initialWrapperVersion = null;  // wrapper_version at page load — changes mean new shim/PHP
let updatePending = false;         // true once we detect the user is running a stale version
let lastVersionData = null;
let lastInteraction = Date.now();
// Track user activity — used to decide when to safely auto-reload
['click','keydown','touchstart','mousedown','pointerdown','input','wheel'].forEach(ev => {
    document.addEventListener(ev, () => { lastInteraction = Date.now(); }, { passive: true, capture: true });
});
async function checkVersion() {
    try {
        const r = await fetch(VERSION_URL + '?check=1&_=' + Date.now());
        const data = await r.json();
        if (!data.sha) return;
        lastVersionData = data;

        // Lock in the SHA this browser actually loaded with on the FIRST successful check.
        // `data.updated` is spurious (it's just "server pulled something recently"), so we
        // compare against our own initial SHA to know whether THIS tab is actually stale.
        if (!initialSha) {
            initialSha = data.sha;
            initialWrapperVersion = data.wrapper_version || null;
            console.log('[KVN Sync] initialSha locked:', data.sha.substring(0,12), 'v' + (data.version || '?'), 'wrapper', data.wrapper_version || '?');
            // If server already has a newer game version than what this tab loaded, fire immediately.
            // Use version-based dedup: skip if we already notified for this exact server version.
            const myVersion = (typeof APP_VERSION !== 'undefined') ? APP_VERSION : null;
            const notifiedVer = sessionStorage.getItem('__kvn_update_notified_ver');
            // Clear dedup entry once the user is running the version they were notified about.
            if (notifiedVer && myVersion && myVersion === notifiedVer) sessionStorage.removeItem('__kvn_update_notified_ver');
            if (myVersion && data.version && data.version !== myVersion && !updatePending && notifiedVer !== data.version) {
                sessionStorage.setItem('__kvn_update_notified_ver', data.version);
                updatePending = true;
                console.log('[KVN Sync] VERSION MISMATCH on first check — loaded', myVersion, 'server has', data.version);
                onUpdateDetected(data, 'html');
            }
        } else {
            // Check HTML (game) update
            if (initialSha !== data.sha && !updatePending) {
                updatePending = true;
                console.log('[KVN Sync] HTML UPDATE —', initialSha.substring(0,12), '→', data.sha.substring(0,12));
                onUpdateDetected(data, 'html');
            // Check wrapper update (shim.js, PHP files)
            } else if (initialWrapperVersion && data.wrapper_version &&
                       data.wrapper_version !== initialWrapperVersion && !updatePending) {
                updatePending = true;
                console.log('[KVN Sync] WRAPPER UPDATE —', initialWrapperVersion, '→', data.wrapper_version);
                onUpdateDetected(data, 'wrapper');
            } else {
                console.log('[KVN Sync] version-check: no change (' + data.sha.substring(0,12) + ')');
            }
        }
        knownSha = data.sha;
        updateVersionBadge();
    } catch (e) {
        console.warn('[KVN Sync] version-check failed:', e.message);
    }
}

// Manual trigger for testing from DevTools console: window.kvnCheckNow()
window.kvnCheckNow = checkVersion;
window.kvnForceUpdate = () => {
    console.log('[KVN Sync] Simulating update detection...');
    updatePending = true;
    onUpdateDetected(lastVersionData || { version: 'TEST' }, 'html');
};

// ─── Server-Sent Events: instant push from server when HTML SHA changes ───
// Opens a long-lived connection; the server holds it up to ~4.5 min then closes with
// event:close (we auto-reconnect). On update the server sends event:update with the
// new SHA and closes — we trigger onUpdateDetected immediately.
let eventSource = null;
let sseReconnectTimer = null;
function connectUpdateStream() {
    if (typeof EventSource === 'undefined') return; // very old browser; falls back to polling
    if (eventSource) { try { eventSource.close(); } catch {} }
    clearTimeout(sseReconnectTimer);

    const shaParam = initialSha ? '?sha=' + encodeURIComponent(initialSha) : '';
    try {
        eventSource = new EventSource('/KVN_AUST/version-stream.php' + shaParam);
    } catch (e) {
        console.warn('[KVN Sync] EventSource unavailable:', e.message);
        return;
    }

    eventSource.addEventListener('baseline', (e) => {
        try {
            const d = JSON.parse(e.data);
            if (d.sha && !initialSha) {
                initialSha = d.sha;
                console.log('[KVN Sync] SSE baseline sha:', d.sha.substring(0,12));
            }
        } catch {}
    });

    eventSource.addEventListener('update', (e) => {
        try {
            const d = JSON.parse(e.data);
            if (d.sha && d.sha !== initialSha && !updatePending) {
                updatePending = true;
                console.log('[KVN Sync] SSE UPDATE — ' + initialSha.substring(0,12) + ' → ' + d.sha.substring(0,12));
                onUpdateDetected(d, 'html');
            }
        } catch {}
    });

    eventSource.addEventListener('close', () => {
        // Server rotated the connection; reconnect shortly
        try { eventSource.close(); } catch {}
        sseReconnectTimer = setTimeout(connectUpdateStream, 500);
    });

    eventSource.onerror = () => {
        // Network blip, server restart, etc. — reconnect with backoff
        try { eventSource.close(); } catch {}
        sseReconnectTimer = setTimeout(connectUpdateStream, 5000);
    };
}

// ─── Graceful update flow ───
// Fired once, when we first see a SHA different from the one this browser loaded with.

// ─── Update classification + pause overlay ─────────────────────────
//
// Safe = patch or minor bump (1.2.3 → 1.2.4, 1.2 → 1.3) — no schema or
// game-loop changes. Auto-apply at next round transition.
// Breaking = major bump (1.x → 2.x) OR changelog declares 'BREAKING'.
// Requires explicit user consent before reload.
function isBreakingUpdate(curVer, newVer, changelogText) {
    try {
        if (changelogText && /\bBREAKING\b|\bMIGRATION REQUIRED\b/i.test(changelogText)) return true;
        if (!curVer || !newVer) return false;
        const curMajor = parseInt(String(curVer).split('.')[0], 10) || 0;
        const newMajor = parseInt(String(newVer).split('.')[0], 10) || 0;
        return newMajor > curMajor;
    } catch { return false; }
}

// Visual pause overlay — full-screen dim + spinner. Blocks pointer
// events so the user can't tap a button while we're swapping.
function kvnPauseGame(message) {
    if (document.getElementById('kvn-pause-overlay')) return;
    const o = document.createElement('div');
    o.id = 'kvn-pause-overlay';
    Object.assign(o.style, {
        position:'fixed', inset:'0', zIndex:'1000000',
        background:'rgba(8,12,22,.86)', backdropFilter:'blur(6px)',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        color:'#eee', fontFamily:'Inter,sans-serif', textAlign:'center', padding:'30px',
        animation:'kvn-pause-fadein .25s ease-out'
    });
    if (!document.getElementById('kvn-pause-style')) {
        const st = document.createElement('style');
        st.id = 'kvn-pause-style';
        st.textContent = '@keyframes kvn-pause-fadein{from{opacity:0}to{opacity:1}}@keyframes kvn-pause-spin{to{transform:rotate(360deg)}}';
        document.head.appendChild(st);
    }
    o.innerHTML = `
      <div style="width:54px;height:54px;border:4px solid rgba(79,195,247,.18);border-top-color:#4fc3f7;border-radius:50%;animation:kvn-pause-spin 1s linear infinite;margin-bottom:18px"></div>
      <div style="font-size:16px;font-weight:700;color:#fff;margin-bottom:6px">${message || 'Updating\u2026'}</div>
      <div style="font-size:12px;color:#7fa9c2;max-width:340px;line-height:1.5">Your game state is being saved. The page will reload and pick up exactly where you left off.</div>
    `;
    document.body.appendChild(o);
}
function kvnResumeGame() {
    const o = document.getElementById('kvn-pause-overlay');
    if (o) o.remove();
}

// Breaking-update modal — explicit consent before reload.
function showBreakingUpdateModal(newVer) {
    if (document.getElementById('kvn-breaking-modal')) return;
    const o = document.createElement('div');
    o.id = 'kvn-breaking-modal';
    Object.assign(o.style, {
        position:'fixed', inset:'0', zIndex:'999998',
        background:'rgba(0,0,0,.78)', backdropFilter:'blur(4px)',
        display:'flex', alignItems:'center', justifyContent:'center', padding:'20px',
        fontFamily:'Inter,sans-serif'
    });
    o.innerHTML = `
      <div style="background:linear-gradient(160deg,#26111a,#1a0e15);border:1px solid rgba(231,76,60,.45);border-radius:14px;width:480px;max-width:100%;color:#fff;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.7)">
        <div style="font-size:14px;font-weight:700;color:#ff7a5c;margin-bottom:10px;letter-spacing:.04em">\u26A0\uFE0F BREAKING UPDATE</div>
        <h2 style="margin:0 0 12px;font-size:18px;font-weight:700">Major version available: v${newVer}</h2>
        <p style="margin:0 0 14px;font-size:13px;color:#cdb9bf;line-height:1.55">
          A breaking update is live. Your in-progress game has been saved and will restore after reload, but features may behave differently.
        </p>
        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px">
          <button id="kvn-bu-later" style="padding:8px 14px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#aaa;font-size:12px;cursor:pointer">Later</button>
          <button id="kvn-bu-now" style="padding:8px 16px;background:linear-gradient(135deg,#e74c3c,#ff6b4a);border:none;border-radius:6px;color:#fff;font-weight:700;font-size:12px;cursor:pointer">Save & Update Now</button>
        </div>
      </div>`;
    document.body.appendChild(o);
    document.getElementById('kvn-bu-later').onclick = () => o.remove();
    document.getElementById('kvn-bu-now').onclick = () => {
        kvnPauseGame('Updating to v' + newVer + '\u2026');
        setTimeout(() => safeReload('user-accepted-breaking'), 400);
    };
}

function onUpdateDetected(data, type) {
    // type: 'html' = game page updated on GitHub; 'wrapper' = shim/PHP files updated on server
    const curVer = (lastVersionData && lastVersionData.version) ||
        (() => { try { return JSON.parse(document.getElementById('app-version-data').textContent).version; } catch { return null; } })();
    const newVer = (data && data.version) || null;
    const breaking = type !== 'wrapper' && isBreakingUpdate(curVer, newVer, data && data.changelog);

    // Breaking update: hard consent. Show modal regardless of game state.
    if (breaking) {
        showBreakingUpdateModal(newVer);
        return;
    }

    // Safe update + user idle on start screen → silent reload now.
    // Authenticated sessions never auto-reload (safeReload refuses them and
    // would strand the blocking pause overlay) — they get the toast instead.
    if (isUserIdle() && !isAuthenticated && !authJustCompleted) {
        kvnPauseGame('Updating…');
        setTimeout(() => safeReload('idle-at-detection'), 200);
        return;
    }

    // Safe update + user in-game → toast, and (anonymous sessions only) arm
    // hooks to reload silently at the next safe point. Authed sessions never
    // auto-reload, so arming hooks for them just spams refused safeReload calls.
    showSoftUpdateToast(data, type);
    if (!isAuthenticated && !authJustCompleted) armGracefulReloadHooks();
}

// User is "idle" = sitting on the start screen with no recent input.
// IMPORTANT: the app keeps ALL .screen elements at display:flex always — only the
// .active class switches opacity/pointer-events. So we MUST check for .active
// exclusively. Checking computed display is always true and would nuke any mid-game
// session the instant an update lands.
function isUserIdle() {
    const ss = document.getElementById('start-screen');
    const onStart = !!(ss && ss.classList.contains('active'));
    return onStart && (Date.now() - lastInteraction) > 10000;
}

// Flush pending cloud writes, then reload. Never force-reload without a flush.
// If a bingo game was in progress, mark sessionStorage so the post-reload boot
// auto-resumes the user into that game instead of showing the welcome-back prompt.
function safeReload(reason) {
    // Never auto-reload right after login, or while authenticated on a non-user-initiated reason.
    // User-initiated reasons are the breaking update consent and explicit update button clicks.
    const userInitiated = reason === 'user-accepted-breaking' || reason === 'user-clicked-now' || reason === 'badge-click-authed';
    if (!userInitiated && (authJustCompleted || isAuthenticated)) {
        // Refused reload: never leave the blocking "Updating…" overlay up.
        // No toast here — onUpdateDetected already showed it once; re-showing
        // from every refused call made it respawn endlessly after dismissal.
        kvnResumeGame();
        return;
    }
    try {
        const saved = JSON.parse(_origGetItem('kvn_bingo_state') || 'null');
        if (saved && saved.gameId && Array.isArray(saved.state) && saved.state.some(Boolean)) {
            sessionStorage.setItem('__kvn_resume_after_reload', '1');
        }
    } catch {}
    // Show the pause overlay if it isn't up yet — covers the brief reload
    // window so the user can't tap stale buttons.
    if (!document.getElementById('kvn-pause-overlay')) {
        kvnPauseGame('Updating\u2026');
    }
    try { flushOnUnload(); } catch {}
    setTimeout(() => {
        try { location.reload(); } catch {}
    }, 220);
}

function showSoftUpdateToast(data, type) {
    if (document.getElementById('kvn-update-toast')) return;
    const toastVer = (data && (data.version || data.wrapper_version)) || '?';
    // "Later" means later — don't re-show for the same version this session.
    try { if (sessionStorage.getItem('__kvn_toast_dismissed') === toastVer) return; } catch {}
    const isWrapper = type === 'wrapper';
    const label = isWrapper ? '🔧 Server update available' : '✨ New version available';
    const detail = isWrapper
        ? `Wrapper v${(data && data.wrapper_version) || '?'} is live — new server features and fixes.`
        : `Game v${(data && data.version) || '?'} is live. Refresh when you finish the current round.`;
    const el = document.createElement('div');
    el.id = 'kvn-update-toast';
    Object.assign(el.style, {
        position:'fixed', bottom:'16px', left:'16px', zIndex:'99998', maxWidth:'300px',
        background:'linear-gradient(135deg,#1a1a2e,#161625)', border:'1px solid rgba(231,76,60,.35)',
        borderRadius:'10px', padding:'12px 14px', color:'#eee', fontFamily:'Inter,sans-serif',
        boxShadow:'0 10px 40px rgba(0,0,0,.5)', fontSize:'12px', animation:'kvn-slide-in .4s ease-out'
    });
    el.innerHTML = `
    <style>@keyframes kvn-slide-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}</style>
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
      <span style="font-weight:700;color:#fff">${label}</span>
    </div>
    <div style="color:#888;font-size:11px;line-height:1.4;margin-bottom:10px">${detail}</div>
    <div style="display:flex;gap:6px">
      <button id="kvn-upd-now" style="flex:1;padding:7px 10px;background:linear-gradient(135deg,#e74c3c,#ff6b4a);
        border:none;border-radius:6px;color:#fff;font-weight:700;font-size:11px;cursor:pointer">Refresh now</button>
      <button id="kvn-upd-dismiss" style="padding:7px 10px;background:transparent;border:1px solid #2a2a40;
        border-radius:6px;color:#999;font-size:11px;cursor:pointer">Later</button>
    </div>`;
    document.body.appendChild(el);
    document.getElementById('kvn-upd-now').onclick = () => {
        safeReload('user-clicked-now');
    };
    document.getElementById('kvn-upd-dismiss').onclick = () => {
        try { sessionStorage.setItem('__kvn_toast_dismissed', toastVer); } catch {}
        el.style.animation = 'kvn-slide-in .2s ease-in reverse';
        setTimeout(() => el.remove(), 180);
    };
}

// Install safe-point hooks: reload when user returns to start screen OR becomes idle there.
function armGracefulReloadHooks() {
    if (window._kvnUpdateHooksArmed) return;
    window._kvnUpdateHooksArmed = true;

    // 1. MutationObserver: when #start-screen transitions to .active, the user has returned
    //    to the lobby — perfect moment to swap in the new version.
    //    ONLY check the .active class. All screens have display:flex at all times.
    const ss = document.getElementById('start-screen');
    if (ss) {
        let wasActive = ss.classList.contains('active');
        const obs = new MutationObserver(() => {
            if (!updatePending) return;
            const nowActive = ss.classList.contains('active');
            // Only fire on the transition into active, not every mutation while active.
            if (!wasActive && nowActive) {
                wasActive = true;
                setTimeout(() => { if (updatePending) safeReload('back-to-start-screen'); }, 800);
            } else if (wasActive && !nowActive) {
                wasActive = false;
            }
        });
        obs.observe(ss, { attributes: true, attributeFilter: ['class'] });
    }

    // 2. Idle polling: every 5s, if user IS on the start screen (.active) AND hasn't
    //    interacted in 30s, reload. This never fires mid-game now.
    const idleTimer = setInterval(() => {
        if (!updatePending) { clearInterval(idleTimer); return; }
        const ss = document.getElementById('start-screen');
        const onStart = !!(ss && ss.classList.contains('active'));
        if (onStart && (Date.now() - lastInteraction) > 30000) {
            safeReload('idle-30s-on-start');
            clearInterval(idleTimer);
        }
    }, 5000);
}

// ─── Toast (our own, separate from the app's) ───
function shimToast(msg, type) {
    let el = document.getElementById('kvn-shim-toast');
    if (!el) {
        el = document.createElement('div');
        el.id = 'kvn-shim-toast';
        Object.assign(el.style, {
            position:'fixed', bottom:'70px', left:'50%', transform:'translateX(-50%)',
            padding:'10px 20px', borderRadius:'10px', fontSize:'13px', fontWeight:'600',
            fontFamily:'Inter,sans-serif', zIndex:'999999', transition:'opacity .3s',
            opacity:'0', pointerEvents:'none', color:'#fff', maxWidth:'90vw', textAlign:'center'
        });
        document.body.appendChild(el);
    }
    el.textContent = msg;
    el.style.background = type === 'err' ? '#e74c3c' : type === 'warn' ? '#f39c12' : '#27ae60';
    el.style.opacity = '1';
    setTimeout(() => el.style.opacity = '0', type === 'err' ? 4000 : 2500);
}

// ─── Auth Modal ───
function createModal() {
    if (document.getElementById('kvn-auth-overlay')) return;

    const overlay = document.createElement('div');
    overlay.id = 'kvn-auth-overlay';
    Object.assign(overlay.style, {
        position:'fixed', inset:'0', background:'rgba(0,0,0,.7)', backdropFilter:'blur(4px)',
        zIndex:'999990', display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'Inter,sans-serif'
    });
    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };

    overlay.innerHTML = `
    <style>
    #kvn-auth-overlay input:-webkit-autofill,
    #kvn-auth-overlay input:-webkit-autofill:hover,
    #kvn-auth-overlay input:-webkit-autofill:focus {
        -webkit-text-fill-color:#eee !important;
        -webkit-box-shadow:0 0 0 1000px #0d0d14 inset !important;
        caret-color:#eee;
    }
    #kvn-auth-overlay input::placeholder { color:#444; }
    </style>
    <div style="background:#161625;border:1px solid #2a2a40;border-radius:16px;padding:28px;width:340px;max-width:92vw;
        box-shadow:0 20px 60px rgba(0,0,0,.6);color:#eee">
        <div style="text-align:center;margin-bottom:18px">
            <div style="font-size:28px;margin-bottom:4px">\u{1F3AE}</div>
            <h2 style="margin:0;font-size:18px;font-weight:700" id="kvn-modal-title">Cloud Save</h2>
            <p style="margin:6px 0 0;font-size:12px;color:#888" id="kvn-modal-sub">
                Save your game data across devices. No email required.
            </p>
            <p style="margin:8px 0 0;font-size:10px;color:#e74c3c;line-height:1.4;background:rgba(231,76,60,.08);
                padding:6px 10px;border-radius:6px;border:1px solid rgba(231,76,60,.15)">
                This is not meant to store personal data securely. Do not use a password or username you use elsewhere.
            </p>
        </div>

        <div id="kvn-auth-form">
            <div style="margin-bottom:12px">
                <label style="font-size:11px;color:#999;display:block;margin-bottom:4px">Pick a username</label>
                <input id="kvn-username" type="text" maxlength="24" placeholder="e.g. xXgamerXx, taco_steve"
                    style="width:100%;padding:10px 12px;background:#0d0d14;border:1px solid #2a2a40;border-radius:8px;
                    color:#eee;font-size:14px;outline:none;box-sizing:border-box"
                    onfocus="this.style.borderColor='#e74c3c'" onblur="this.style.borderColor='#2a2a40'">
            </div>
            <div style="margin-bottom:12px">
                <label style="font-size:11px;color:#999;display:block;margin-bottom:4px">Password (4+ characters)</label>
                <input id="kvn-password" type="password" maxlength="128" placeholder="Something memorable"
                    style="width:100%;padding:10px 12px;background:#0d0d14;border:1px solid #2a2a40;border-radius:8px;
                    color:#eee;font-size:14px;outline:none;box-sizing:border-box"
                    onfocus="this.style.borderColor='#e74c3c'" onblur="this.style.borderColor='#2a2a40'">
            </div>
            <div style="margin-bottom:14px;display:flex;align-items:center;gap:6px">
                <input id="kvn-remember" type="checkbox" checked style="accent-color:#e74c3c">
                <label for="kvn-remember" style="font-size:11px;color:#999;cursor:pointer">Remember me on this device</label>
            </div>
            <div id="kvn-auth-error" style="color:#e74c3c;font-size:12px;margin-bottom:10px;display:none"></div>
            <button id="kvn-btn-login" style="width:100%;padding:11px;background:linear-gradient(135deg,#e74c3c,#ff6b4a);
                border:none;border-radius:8px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-bottom:8px;
                transition:opacity .2s" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
                Log In
            </button>
            <button id="kvn-btn-register" style="width:100%;padding:11px;background:transparent;
                border:1px solid #2a2a40;border-radius:8px;color:#999;font-weight:600;font-size:13px;cursor:pointer;
                transition:all .2s" onmouseover="this.style.borderColor='#e74c3c';this.style.color='#eee'"
                onmouseout="this.style.borderColor='#2a2a40';this.style.color='#999'">
                Create Account
            </button>
        </div>

        <div style="margin-top:14px;padding-top:12px;border-top:1px solid #2a2a40;text-align:center">
            <button id="kvn-btn-guest" style="background:none;border:none;color:#666;font-size:11px;cursor:pointer;
                text-decoration:underline" onmouseover="this.style.color='#999'" onmouseout="this.style.color='#666'">
                Continue as guest (data won't sync)
            </button>
        </div>
    </div>`;

    document.body.appendChild(overlay);

    // Wire up buttons
    document.getElementById('kvn-btn-login').onclick = doLogin;
    document.getElementById('kvn-btn-register').onclick = doRegister;
    document.getElementById('kvn-btn-guest').onclick = () => {
        overlay.remove();
        shimToast('Playing as guest \u2014 data stays in this browser only', 'warn');
        sessionStorage.setItem(GUEST_WARNED_KEY, '1');
    };

    // Enter key submits
    ['kvn-username', 'kvn-password'].forEach(id => {
        document.getElementById(id).addEventListener('keydown', (e) => {
            if (e.key === 'Enter') doLogin();
        });
    });

    setTimeout(() => document.getElementById('kvn-username')?.focus(), 100);
}

function showAuthError(msg) {
    const el = document.getElementById('kvn-auth-error');
    if (el) { el.textContent = msg; el.style.display = 'block'; }
}

function setAuthLoading(loading) {
    const btns = ['kvn-btn-login', 'kvn-btn-register'];
    btns.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.disabled = loading;
            el.style.opacity = loading ? '.5' : '1';
        }
    });
}

async function doLogin() {
    const username = document.getElementById('kvn-username')?.value.trim();
    const password = document.getElementById('kvn-password')?.value;
    const remember = document.getElementById('kvn-remember')?.checked;
    if (!username || !password) { showAuthError('Fill in both fields.'); return; }

    setAuthLoading(true);
    const res = await apiCall('login', { username, password });
    setAuthLoading(false);

    if (res.error) { showAuthError(res.error); return; }
    if (res.ok) {
        setAuth(res.token, res.username, remember);
        document.getElementById('kvn-auth-overlay')?.remove();
        shimToast('Welcome back, ' + res.username + '!', 'ok');
        await pullAndHydrate();
    }
}

async function doRegister() {
    const username = document.getElementById('kvn-username')?.value.trim();
    const password = document.getElementById('kvn-password')?.value;
    const remember = document.getElementById('kvn-remember')?.checked;
    if (!username || !password) { showAuthError('Fill in both fields.'); return; }

    setAuthLoading(true);
    const res = await apiCall('register', { username, password });
    setAuthLoading(false);

    if (res.error) { showAuthError(res.error); return; }
    if (res.ok) {
        setAuth(res.token, res.username, remember);
        document.getElementById('kvn-auth-overlay')?.remove();
        shimToast('Account created! Your game data will sync.', 'ok');
        // Push any existing localStorage data to the new account
        await pushAll();
    }
}

// ─── Floating sync button ───
function createSyncButton() {
    if (document.getElementById('kvn-sync-btn')) return;

    const btn = document.createElement('button');
    btn.id = 'kvn-sync-btn';
    Object.assign(btn.style, {
        position:'fixed', bottom:'16px', right:'16px', zIndex:'99999',
        width:'44px', height:'44px', borderRadius:'50%', border:'2px solid #2a2a40',
        background:'#161625', color:'#888', fontSize:'18px', cursor:'pointer',
        display:'flex', alignItems:'center', justifyContent:'center',
        transition:'all .25s', boxShadow:'0 4px 16px rgba(0,0,0,.4)'
    });
    btn.onmouseover = () => { btn.style.borderColor = '#e74c3c'; btn.style.color = '#fff'; btn.style.transform = 'scale(1.1)'; };
    btn.onmouseout = () => { btn.style.borderColor = isAuthenticated ? '#27ae60' : '#2a2a40'; btn.style.color = '#888'; btn.style.transform = 'scale(1)'; };
    btn.onclick = () => {
        if (isAuthenticated) {
            showSyncMenu();
        } else {
            createModal();
        }
    };

    document.body.appendChild(btn);
    updateUI();
}

function updateUI() {
    const btn = document.getElementById('kvn-sync-btn');
    if (!btn) return;
    if (isAuthenticated) {
        const avatar = _origGetItem('kvn_avatar_webp');
        if (avatar) {
            btn.innerHTML = `<img src="${avatar}" style="width:100%;height:100%;object-fit:cover;border-radius:50%">`;
        } else {
            btn.innerHTML = '\u2601\uFE0F';
        }
        btn.style.borderColor = '#27ae60';
        btn.title = 'Cloud Save: ' + currentUser;
    } else {
        btn.innerHTML = '\u{1F464}'; // person silhouette
        btn.style.borderColor = '#2a2a40';
        btn.title = 'Log in to sync saves';
    }
    updateSyncIndicator();
}

// Colored dot on the cloud button showing sync state
function updateSyncIndicator() {
    const btn = document.getElementById('kvn-sync-btn');
    if (!btn) return;
    let dot = document.getElementById('kvn-sync-dot');
    if (!dot) {
        dot = document.createElement('span');
        dot.id = 'kvn-sync-dot';
        Object.assign(dot.style, {
            position:'absolute', bottom:'-2px', right:'-2px', width:'12px', height:'12px',
            borderRadius:'50%', border:'2px solid #161625', transition:'background-color .2s'
        });
        btn.style.position = 'fixed';
        btn.appendChild(dot);
    }
    const pending = Object.keys(pendingSync).length;
    if (!isAuthenticated) {
        dot.style.display = 'none';
    } else if (!isOnline) {
        dot.style.display = 'block';
        dot.style.background = '#e74c3c'; // red — offline
        btn.title = 'Offline — ' + pending + ' change(s) queued, will sync when connection returns';
    } else if (pending > 0) {
        dot.style.display = 'block';
        dot.style.background = '#f39c12'; // amber — pending
        btn.title = 'Syncing ' + pending + ' change(s) to cloud...';
    } else {
        dot.style.display = 'block';
        dot.style.background = '#27ae60'; // green — synced
        btn.title = 'Cloud Save: ' + (currentUser || '') + ' — all changes synced';
    }
}

function showSyncMenu() {
    if (document.getElementById('kvn-sync-menu')) {
        document.getElementById('kvn-sync-menu').remove();
        return;
    }

    const menu = document.createElement('div');
    menu.id = 'kvn-sync-menu';
    Object.assign(menu.style, {
        position:'fixed', bottom:'68px', right:'16px', zIndex:'99999',
        background:'#161625', border:'1px solid #2a2a40', borderRadius:'12px',
        padding:'12px', width:'240px', maxWidth:'calc(100vw - 32px)', fontFamily:'Inter,sans-serif',
        boxShadow:'0 8px 32px rgba(0,0,0,.5)', color:'#eee'
    });

    menu.innerHTML = `
        <div style="font-size:13px;font-weight:700;margin-bottom:4px">\u2601\uFE0F ${currentUser}</div>
        <div style="font-size:11px;color:#666;margin-bottom:10px">Cloud save is active</div>
        <div style="margin-bottom:10px">
            <label style="display:block;font-size:10.5px;color:#888;margin-bottom:4px;letter-spacing:.04em">DISPLAY NAME (NICKNAME)</label>
            <div>
                <input id="kvn-dn-input" type="text" maxlength="32" placeholder="leaderboard nickname"
                    style="width:100%;padding:6px 8px;background:#0f0f1a;border:1px solid #2a2a40;border-radius:5px;color:#eee;font-size:12px;font-family:inherit;outline:none;box-sizing:border-box"/>
                <button id="kvn-dn-save" style="width:100%;margin-top:5px;padding:6px 10px;background:#1e1e32;border:1px solid #2a2a40;border-radius:5px;color:#4fc3f7;font-size:11px;font-weight:700;cursor:pointer">Save Display Name</button>
            </div>
            <div id="kvn-dn-msg" style="font-size:10px;color:#666;margin-top:4px;min-height:12px"></div>
        </div>
        <div style="margin-bottom:10px">
            <label style="display:block;font-size:10.5px;color:#888;margin-bottom:6px;letter-spacing:.04em">PROFILE IMAGE</label>
            <div style="display:flex;align-items:center;gap:8px">
                <div id="kvn-avatar-preview" style="width:40px;height:40px;border-radius:50%;background:#1e1e32;border:1px solid #2a2a40;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#444;font-size:18px">&#x1F464;</div>
                <label style="flex:1;padding:6px 10px;background:#1e1e32;border:1px solid #2a2a40;border-radius:5px;color:#4fc3f7;font-size:11px;font-weight:700;cursor:pointer;text-align:center;display:block">
                    Upload Image
                    <input id="kvn-avatar-input" type="file" accept="image/*" style="display:none">
                </label>
            </div>
            <div id="kvn-avatar-msg" style="font-size:10px;color:#666;margin-top:4px;min-height:12px"></div>
        </div>
        <button id="kvn-force-sync" style="width:100%;padding:8px;background:#1e1e32;border:1px solid #2a2a40;
            border-radius:6px;color:#ccc;font-size:12px;font-weight:600;cursor:pointer;margin-bottom:6px;
            transition:border-color .2s" onmouseover="this.style.borderColor='#27ae60'"
            onmouseout="this.style.borderColor='#2a2a40'">
            \u{1F504} Sync Now
        </button>
        <button id="kvn-do-logout" style="width:100%;padding:8px;background:transparent;border:1px solid #2a2a40;
            border-radius:6px;color:#888;font-size:12px;cursor:pointer;transition:border-color .2s;margin-bottom:6px"
            onmouseover="this.style.borderColor='#e74c3c';this.style.color='#e74c3c'"
            onmouseout="this.style.borderColor='#2a2a40';this.style.color='#888'">
            Log Out
        </button>
        <button id="kvn-delete-account" style="width:100%;padding:8px;background:transparent;border:1px solid #2a2a40;
            border-radius:6px;color:#555;font-size:11px;cursor:pointer;transition:all .2s"
            onmouseover="this.style.borderColor='#e74c3c';this.style.color='#e74c3c';this.style.background='rgba(231,76,60,.08)'"
            onmouseout="this.style.borderColor='#2a2a40';this.style.color='#555';this.style.background='transparent'">
            Delete Account & Data
        </button>`;

    document.body.appendChild(menu);

    document.getElementById('kvn-force-sync').onclick = async () => {
        await pushAll();
        shimToast('Synced!', 'ok');
        menu.remove();
    };

    document.getElementById('kvn-do-logout').onclick = async () => {
        await apiCall('logout');
        clearAuth();
        menu.remove();
        shimToast('Logged out', 'warn');
    };

    document.getElementById('kvn-delete-account').onclick = () => {
        menu.remove();
        showDeleteConfirm();
    };

    const dnInput = document.getElementById('kvn-dn-input');
    const dnSave  = document.getElementById('kvn-dn-save');
    const dnMsg   = document.getElementById('kvn-dn-msg');
    if (dnInput) dnInput.value = (window.currentDisplayName || '');
    if (dnSave) dnSave.onclick = async () => {
        const v = (dnInput.value || '').trim();
        dnMsg.style.color = '#666';
        dnMsg.textContent = 'Saving…';
        try {
            const res = await apiCall('set_display_name', { display_name: v });
            if (res && res.ok) {
                window.currentDisplayName = v;
                dnMsg.style.color = '#27ae60';
                dnMsg.textContent = v ? 'Saved.' : 'Cleared (will show username on leaderboards).';
            } else {
                dnMsg.style.color = '#e74c3c';
                dnMsg.textContent = (res && res.error) || 'Save failed.';
            }
        } catch (e) {
            dnMsg.style.color = '#e74c3c';
            dnMsg.textContent = 'Network error.';
        }
    };

    // ── Avatar upload wiring ──
    const avatarPreview = document.getElementById('kvn-avatar-preview');
    const avatarInput   = document.getElementById('kvn-avatar-input');
    const avatarMsg     = document.getElementById('kvn-avatar-msg');

    // Populate preview from stored avatar
    const storedAvatar = _origGetItem('kvn_avatar_webp');
    if (storedAvatar && avatarPreview) {
        avatarPreview.innerHTML = `<img src="${storedAvatar}" style="width:100%;height:100%;object-fit:cover">`;
    }

    if (avatarInput) avatarInput.onchange = (e) => {
        const file = e.target.files[0];
        avatarInput.value = '';
        if (!file) return;
        openAvatarCropper(file, (dataUrl) => {
            localStorage.setItem('kvn_avatar_webp', dataUrl);
            if (avatarPreview) avatarPreview.innerHTML = `<img src="${dataUrl}" style="width:100%;height:100%;object-fit:cover">`;
            updateUI();
            if (avatarMsg) { avatarMsg.style.color = '#27ae60'; avatarMsg.textContent = 'Saved.'; }
        });
    };

    // Close on outside click
    setTimeout(() => {
        const closer = (e) => {
            if (!menu.contains(e.target) && e.target.id !== 'kvn-sync-btn') {
                menu.remove();
                document.removeEventListener('click', closer);
            }
        };
        document.addEventListener('click', closer);
    }, 50);
}

// ─── Avatar crop tool ───
function openAvatarCropper(file, onSave) {
    const PREVIEW = 280, CROP_R = 110, CX = 140, CY = 140, OUTPUT = 80;

    const overlay = document.createElement('div');
    overlay.id = 'kvn-crop-overlay';
    Object.assign(overlay.style, {
        position:'fixed', inset:'0', zIndex:'1000001',
        background:'rgba(0,0,0,.88)', backdropFilter:'blur(8px)',
        display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'Inter,sans-serif'
    });

    const box = document.createElement('div');
    Object.assign(box.style, {
        background:'#12121e', borderRadius:'16px', padding:'20px',
        width:'320px', maxWidth:'calc(100vw - 32px)', boxShadow:'0 20px 60px rgba(0,0,0,.7)'
    });

    // Title
    const title = document.createElement('div');
    Object.assign(title.style, {fontSize:'14px',fontWeight:'700',color:'#eee',marginBottom:'12px',textAlign:'center'});
    title.textContent = 'Crop Profile Photo';

    // Preview canvas
    const canvas = document.createElement('canvas');
    canvas.width = PREVIEW; canvas.height = PREVIEW;
    Object.assign(canvas.style, {
        display:'block', borderRadius:'10px', cursor:'grab',
        width:PREVIEW+'px', height:PREVIEW+'px', userSelect:'none', touchAction:'none'
    });
    const ctx = canvas.getContext('2d');

    const img = new Image();
    let panX = 0, panY = 0, zoom = 1, minZoom = 1;
    let dragging = false, dragStart = {x:0,y:0}, panStart = {x:0,y:0};

    function clampPan() {
        // Keep crop circle always covered by image
        const hw = (img.width * zoom) / 2, hh = (img.height * zoom) / 2;
        const maxPX = hw - CROP_R, maxPY = hh - CROP_R;
        panX = Math.max(-maxPX, Math.min(maxPX, panX));
        panY = Math.max(-maxPY, Math.min(maxPY, panY));
    }

    function draw() {
        ctx.clearRect(0, 0, PREVIEW, PREVIEW);
        if (!img.complete || !img.naturalWidth) return;
        const dw = img.width * zoom, dh = img.height * zoom;
        const dx = CX - dw/2 + panX, dy = CY - dh/2 + panY;

        // Image at full brightness
        ctx.drawImage(img, dx, dy, dw, dh);

        // Darken everything outside the crop circle
        ctx.save();
        ctx.fillStyle = 'rgba(0,0,0,.62)';
        ctx.fillRect(0, 0, PREVIEW, PREVIEW);
        ctx.globalCompositeOperation = 'destination-out';
        ctx.beginPath(); ctx.arc(CX, CY, CROP_R, 0, Math.PI*2); ctx.fill();
        ctx.restore();

        // Redraw image inside circle at full brightness
        ctx.save();
        ctx.beginPath(); ctx.arc(CX, CY, CROP_R, 0, Math.PI*2); ctx.clip();
        ctx.drawImage(img, dx, dy, dw, dh);
        ctx.restore();

        // Circle guide ring
        ctx.beginPath(); ctx.arc(CX, CY, CROP_R, 0, Math.PI*2);
        ctx.strokeStyle = 'rgba(255,255,255,.45)'; ctx.lineWidth = 1.5; ctx.stroke();
    }

    function setZoom(z) {
        zoom = Math.max(minZoom, Math.min(minZoom * 6, z));
        clampPan(); draw();
        slider.value = String(zoom);
    }

    // Drag (mouse)
    canvas.addEventListener('mousedown', e => {
        dragging = true; canvas.style.cursor = 'grabbing';
        dragStart = {x:e.clientX, y:e.clientY}; panStart = {x:panX, y:panY};
    });
    window.addEventListener('mousemove', e => {
        if (!dragging) return;
        panX = panStart.x + (e.clientX - dragStart.x);
        panY = panStart.y + (e.clientY - dragStart.y);
        clampPan(); draw();
    });
    window.addEventListener('mouseup', () => { dragging = false; canvas.style.cursor = 'grab'; });

    // Drag (touch)
    canvas.addEventListener('touchstart', e => {
        dragging = true;
        dragStart = {x:e.touches[0].clientX, y:e.touches[0].clientY};
        panStart = {x:panX, y:panY}; e.preventDefault();
    }, {passive:false});
    window.addEventListener('touchmove', e => {
        if (!dragging) return;
        panX = panStart.x + (e.touches[0].clientX - dragStart.x);
        panY = panStart.y + (e.touches[0].clientY - dragStart.y);
        clampPan(); draw(); e.preventDefault();
    }, {passive:false});
    window.addEventListener('touchend', () => { dragging = false; });

    // Wheel zoom
    canvas.addEventListener('wheel', e => {
        e.preventDefault();
        setZoom(zoom * (e.deltaY > 0 ? 0.93 : 1.08));
    }, {passive:false});

    // Zoom slider
    const sliderRow = document.createElement('div');
    Object.assign(sliderRow.style, {display:'flex',alignItems:'center',gap:'8px',margin:'10px 0 14px'});
    const sliderLbl = document.createElement('span');
    Object.assign(sliderLbl.style, {fontSize:'11px',color:'#555',flexShrink:'0'});
    sliderLbl.textContent = 'Zoom';
    const slider = document.createElement('input');
    slider.type = 'range'; slider.step = '0.001';
    Object.assign(slider.style, {flex:'1', accentColor:'#4fc3f7', cursor:'pointer'});
    slider.oninput = () => { zoom = parseFloat(slider.value); clampPan(); draw(); };
    sliderRow.append(sliderLbl, slider);

    // Buttons
    const btnRow = document.createElement('div');
    Object.assign(btnRow.style, {display:'flex', gap:'8px'});
    const cancelBtn = document.createElement('button');
    Object.assign(cancelBtn.style, {
        flex:'1', padding:'10px', background:'transparent', border:'1px solid #2a2a40',
        borderRadius:'8px', color:'#888', fontSize:'13px', cursor:'pointer'
    });
    cancelBtn.textContent = 'Cancel';
    cancelBtn.onclick = () => { overlay.remove(); URL.revokeObjectURL(img.src); };

    const saveBtn = document.createElement('button');
    Object.assign(saveBtn.style, {
        flex:'2', padding:'10px',
        background:'linear-gradient(135deg,#1a6fa8,#4fc3f7)',
        border:'none', borderRadius:'8px', color:'#fff', fontSize:'13px', fontWeight:'700', cursor:'pointer'
    });
    saveBtn.textContent = 'Crop & Save';
    saveBtn.onclick = async () => {
        saveBtn.disabled = true; saveBtn.textContent = 'Saving…';
        try {
            const out = document.createElement('canvas');
            out.width = OUTPUT; out.height = OUTPUT;
            const oc = out.getContext('2d');

            const dw = img.width * zoom, dh = img.height * zoom;
            const dx = CX - dw/2 + panX, dy = CY - dh/2 + panY;
            // Source crop in image coords
            const srcX = (CX - CROP_R - dx) / zoom;
            const srcY = (CY - CROP_R - dy) / zoom;
            const srcWH = (CROP_R * 2) / zoom;

            // Circular clip on output
            oc.beginPath(); oc.arc(OUTPUT/2, OUTPUT/2, OUTPUT/2, 0, Math.PI*2); oc.clip();
            oc.drawImage(img, srcX, srcY, srcWH, srcWH, 0, 0, OUTPUT, OUTPUT);

            // Smallest WebP — try 0.82 quality, step down if >12 KB
            const dataUrl = await new Promise((res, rej) => {
                const attempt = (q) => out.toBlob(b => {
                    if (!b) { rej(new Error('toBlob failed')); return; }
                    if (b.size > 12000 && q > 0.35) { attempt(Math.max(0.35, q - 0.18)); return; }
                    const r = new FileReader();
                    r.onload = () => res(r.result); r.onerror = rej;
                    r.readAsDataURL(b);
                }, 'image/webp', q);
                attempt(0.82);
            });

            overlay.remove();
            URL.revokeObjectURL(img.src);
            onSave(dataUrl);
        } catch (err) {
            saveBtn.disabled = false; saveBtn.textContent = 'Crop & Save';
            console.warn('[KVN avatar]', err);
        }
    };

    btnRow.append(cancelBtn, saveBtn);
    box.append(title, canvas, sliderRow, btnRow);
    overlay.appendChild(box);
    document.body.appendChild(overlay);

    img.onload = () => {
        // Min zoom: image must cover the crop circle entirely
        minZoom = Math.max((CROP_R * 2) / img.width, (CROP_R * 2) / img.height);
        zoom = minZoom;
        slider.min = String(minZoom);
        slider.max = String(minZoom * 6);
        slider.value = String(zoom);
        panX = 0; panY = 0;
        draw();
    };
    img.onerror = () => { overlay.remove(); };
    img.src = URL.createObjectURL(file);
}

// ─── Delete account confirmation ───
function showDeleteConfirm() {
    const overlay = document.createElement('div');
    overlay.id = 'kvn-delete-overlay';
    Object.assign(overlay.style, {
        position:'fixed', inset:'0', background:'rgba(0,0,0,.7)', backdropFilter:'blur(4px)',
        zIndex:'999990', display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'Inter,sans-serif'
    });
    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };

    overlay.innerHTML = `
    <div style="background:#161625;border:1px solid #2a2a40;border-radius:16px;padding:28px;width:340px;max-width:92vw;
        box-shadow:0 20px 60px rgba(0,0,0,.6);color:#eee;text-align:center">
        <div style="font-size:28px;margin-bottom:8px">\u26A0\uFE0F</div>
        <h2 style="margin:0 0 8px;font-size:16px;font-weight:700;color:#e74c3c">Delete Account?</h2>
        <p style="font-size:12px;color:#999;margin:0 0 6px;line-height:1.5">
            This will permanently delete your account <strong style="color:#eee">${currentUser}</strong> and all saved game data. This cannot be undone.
        </p>
        <p style="font-size:11px;color:#666;margin:0 0 18px">
            Your local browser data will remain but will no longer sync.
        </p>
        <div style="display:flex;gap:8px">
            <button id="kvn-delete-cancel" style="flex:1;padding:10px;background:#1e1e32;border:1px solid #2a2a40;
                border-radius:8px;color:#ccc;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s"
                onmouseover="this.style.borderColor='#4a4a6a'" onmouseout="this.style.borderColor='#2a2a40'">
                Cancel
            </button>
            <button id="kvn-delete-confirm" style="flex:1;padding:10px;background:#e74c3c;border:1px solid #e74c3c;
                border-radius:8px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .2s"
                onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
                Delete Everything
            </button>
        </div>
    </div>`;

    document.body.appendChild(overlay);

    document.getElementById('kvn-delete-cancel').onclick = () => overlay.remove();
    document.getElementById('kvn-delete-confirm').onclick = async () => {
        const btn = document.getElementById('kvn-delete-confirm');
        btn.disabled = true;
        btn.textContent = 'Deleting...';
        btn.style.opacity = '.5';

        const res = await apiCall('delete_account');
        overlay.remove();

        if (res.ok) {
            clearAuth();
            shimToast('Account deleted.', 'warn');
        } else {
            shimToast(res.error || 'Failed to delete account', 'err');
        }
    };
}

// ─── Welcome-back modal for returning users ───
// Fires on page load if signed in AND last active > 15 minutes ago.
// Shows personalized stats pulled from localStorage so it feels useful.
function humanizeTime(ms) {
    const s = Math.floor(ms / 1000);
    if (s < 60) return 'just now';
    const m = Math.floor(s / 60);
    if (m < 60) return m + ' minute' + (m !== 1 ? 's' : '') + ' ago';
    const h = Math.floor(m / 60);
    if (h < 24) return h + ' hour' + (h !== 1 ? 's' : '') + ' ago';
    const d = Math.floor(h / 24);
    if (d < 30) return d + ' day' + (d !== 1 ? 's' : '') + ' ago';
    const mo = Math.floor(d / 30);
    return mo + ' month' + (mo !== 1 ? 's' : '') + ' ago';
}

function getPlayerStats() {
    const stats = { games: 0, bingos: 0, records: 0, oldestDate: null, oldestRarity: null, inProgress: null };
    try {
        const games = JSON.parse(_origGetItem('kvn_games') || '[]');
        if (Array.isArray(games)) stats.games = games.length;
    } catch {}
    try {
        const bingos = JSON.parse(_origGetItem('kvn_completed_bingo') || '[]');
        if (Array.isArray(bingos)) stats.bingos = bingos.filter(c => c.trigger === 'bingo').length;
    } catch {}
    try {
        const records = JSON.parse(_origGetItem('kvn_records') || '[]');
        if (Array.isArray(records) && records.length > 0) {
            stats.records = records.length;
            const oldest = records.reduce((a, b) => (a.date < b.date ? a : b));
            stats.oldestDate = oldest.date;
            const y = new Date(oldest.date).getFullYear();
            stats.oldestRarity = y <= 2005 ? 'LEGENDARY' : y <= 2006 ? 'SUPER RARE' : y <= 2008 ? 'VERY RARE' : y <= 2012 ? 'RARE' : 'COMMON';
        }
    } catch {}
    // Detect an in-progress game: kvn_bingo_state has a gameId not yet in kvn_games history,
    // and at least one cell has been daubed (so it's genuinely a game in motion).
    try {
        const saved = JSON.parse(_origGetItem('kvn_bingo_state') || 'null');
        if (saved && saved.gameId && Array.isArray(saved.state)) {
            const daubed = saved.state.filter(Boolean).length;
            const history = JSON.parse(_origGetItem('kvn_games') || '[]');
            const isFinished = Array.isArray(history) && history.some(g => g && g.id === saved.gameId);
            if (!isFinished && daubed > 0) {
                // Free-space (index 12) is auto-daubed, so subtract to get real play
                const realDaubs = saved.state[12] ? daubed - 1 : daubed;
                stats.inProgress = {
                    gameId: saved.gameId,
                    daubed: daubed,
                    realDaubs: realDaubs,
                    total: saved.state.length,
                    percent: Math.round((daubed / saved.state.length) * 100),
                    pickedCats: saved.picked ? Object.values(saved.picked).flat().filter(Boolean) : []
                };
            }
        }
    } catch {}
    return stats;
}

// Restore a saved in-progress bingo game into the live HTML state.
// The HTML's `let currentGameId`, `bingoPicked`, `bingoState`, `gameActive`, `maxReachedIdx`
// live in the shared global lexical environment (both scripts are non-module), so bare
// assignment reaches them. Returns true if resume fully succeeded.
function resumeInProgressGame() {
    try {
        const saved = JSON.parse(_origGetItem('kvn_bingo_state') || 'null');
        if (!saved || !saved.gameId || !Array.isArray(saved.state) || !saved.picked) return false;
        if (typeof buildBingoFromPicked !== 'function') return false;
        currentGameId = saved.gameId;
        bingoPicked = saved.picked;
        bingoState = saved.state;
        gameActive = true;
        if (typeof maxReachedIdx !== 'undefined') maxReachedIdx = 1;
        if (typeof bingoWinShown !== 'undefined') bingoWinShown = false;
        if (typeof pickGameStamps === 'function') pickGameStamps();
        buildBingoFromPicked();
        if (typeof updateBingoBtn === 'function') updateBingoBtn();
        if (typeof toggleBingo === 'function') {
            const overlay = document.getElementById('bingoOverlay');
            if (overlay && !overlay.classList.contains('open')) toggleBingo();
        }
        return true;
    } catch (e) {
        console.warn('[KVN Sync] resumeInProgressGame failed:', e);
        return false;
    }
}

function showWelcomeBack(lastSeenMs) {
    if (document.getElementById('kvn-welcome-back')) return;
    const stats = getPlayerStats();
    const elapsed = Date.now() - lastSeenMs;
    const when = humanizeTime(elapsed);
    const hasAnyStats = stats.games > 0 || stats.bingos > 0 || stats.records > 0;

    const overlay = document.createElement('div');
    overlay.id = 'kvn-welcome-back';
    Object.assign(overlay.style, {
        position:'fixed', inset:'0', background:'rgba(0,0,0,.65)', backdropFilter:'blur(4px)',
        zIndex:'999995', display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'Inter,sans-serif', animation:'kvn-fade-in .35s ease-out'
    });
    overlay.onclick = (e) => { if (e.target === overlay) dismiss(); };

    const statRow = (emoji, label, value) => value
        ? `<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dotted #2a2a40">
             <span style="color:#999;font-size:12px">${emoji} ${label}</span>
             <span style="color:#eee;font-weight:700;font-size:13px">${value}</span>
           </div>` : '';
    const rarityColor = {LEGENDARY:'#ffd700', 'SUPER RARE':'#e74c3c', 'VERY RARE':'#e67e22', RARE:'#2ecc71', COMMON:'#3498db'}[stats.oldestRarity] || '#888';

    const ip = stats.inProgress;

    overlay.innerHTML = `
    <style>@keyframes kvn-fade-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
           @keyframes kvn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.4)}50%{box-shadow:0 0 0 6px rgba(231,76,60,0)}}</style>
    <div style="background:linear-gradient(160deg,#1a1a2e 0%,#161625 100%);border:1px solid #2a2a40;border-radius:16px;
         padding:24px;width:${ip ? '360px' : '340px'};max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(231,76,60,.15);color:#eee;
         animation:kvn-fade-in .35s ease-out">
      <div style="text-align:center;margin-bottom:16px">
        <div style="font-size:36px;margin-bottom:4px">\u{1F44B}</div>
        <h2 style="margin:0;font-size:17px;font-weight:700;color:#fff">Welcome back, ${currentUser}!</h2>
        <p style="margin:4px 0 0;font-size:11px;color:#888">Last played ${when}</p>
      </div>

      ${ip ? `
      <div style="background:linear-gradient(135deg,rgba(231,76,60,.15),rgba(243,156,18,.08));border:1px solid rgba(231,76,60,.35);
           border-radius:10px;padding:12px 14px;margin-bottom:14px;animation:kvn-pulse 2.2s infinite">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
          <span style="font-size:10px;font-weight:700;color:#ff6b4a;text-transform:uppercase;letter-spacing:.12em">\u{1F3AE} Game in progress</span>
          <span style="font-size:10px;color:#999;font-family:'Space Mono',monospace">#${ip.gameId.substring(0,6)}</span>
        </div>
        <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:8px">
          <span style="font-size:28px;font-weight:900;color:#ffbb4a;line-height:1">${ip.realDaubs}</span>
          <span style="font-size:11px;color:#999">of 24 squares daubed <span style="color:#666">(+free space)</span></span>
        </div>
        <div style="height:6px;background:rgba(0,0,0,.3);border-radius:3px;overflow:hidden;margin-bottom:4px">
          <div style="width:${ip.percent}%;height:100%;background:linear-gradient(90deg,#e74c3c,#f39c12);transition:width .4s"></div>
        </div>
        <div style="font-size:10px;color:#888;text-align:right">${ip.percent}% complete</div>
      </div>` : ''}

      ${hasAnyStats ? `
      <div style="background:rgba(0,0,0,.25);border-radius:10px;padding:10px 14px;margin-bottom:16px">
        <div style="font-size:10px;font-weight:700;color:#e74c3c;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px">Your Progress</div>
        ${statRow('\u{1F3AF}', 'Games played', stats.games)}
        ${statRow('\u{1F3B1}', 'Bingo wins', stats.bingos)}
        ${statRow('\u{1F55B}', 'Zero-view finds', stats.records)}
        ${stats.oldestDate ? `
        <div style="display:flex;justify-content:space-between;padding:6px 0">
          <span style="color:#999;font-size:12px">\u{1F48E} Rarest find</span>
          <span style="font-weight:700;font-size:13px;color:${rarityColor}">${stats.oldestDate.substring(0,4)} · ${stats.oldestRarity}</span>
        </div>` : ''}
      </div>` : (ip ? '' : `
      <p style="text-align:center;font-size:12px;color:#888;background:rgba(0,0,0,.2);padding:12px;border-radius:8px;margin-bottom:16px">
        Your cloud save is synced and ready. Start spinning the wheel to find your first zero-view video!
      </p>`)}

      ${ip ? `
      <div style="display:flex;gap:8px">
        <button id="kvn-welcome-continue"
          style="flex:1;padding:11px;background:linear-gradient(135deg,#e74c3c,#ff6b4a);border:none;border-radius:8px;
                 color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:opacity .2s"
          onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
          Continue
        </button>
        <button id="kvn-welcome-new"
          style="flex:1;padding:11px;background:#1e1e32;border:1px solid #2a2a40;border-radius:8px;
                 color:#ccc;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s"
          onmouseover="this.style.borderColor='#e74c3c';this.style.color='#fff'"
          onmouseout="this.style.borderColor='#2a2a40';this.style.color='#ccc'">
          Start New
        </button>
      </div>` : `
      <button id="kvn-welcome-continue"
        style="width:100%;padding:11px;background:linear-gradient(135deg,#e74c3c,#ff6b4a);border:none;border-radius:8px;
               color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:opacity .2s"
        onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
        Continue Playing
      </button>`}
    </div>`;

    document.body.appendChild(overlay);

    function dismiss() { overlay.style.animation = 'kvn-fade-in .2s ease-in reverse'; setTimeout(() => overlay.remove(), 180); }
    document.getElementById('kvn-welcome-continue').onclick = () => {
        dismiss();
        if (ip) {
            if (resumeInProgressGame()) {
                shimToast('\u{1F3AE} Game resumed', 'ok');
            } else {
                shimToast('Your bingo card is saved \u2014 open BINGO to see it', 'warn');
            }
        }
    };
    const newBtn = document.getElementById('kvn-welcome-new');
    if (newBtn) {
        newBtn.onclick = () => {
            // Clear the in-progress bingo state so the next game starts clean.
            // localStorage.removeItem goes through our intercepted setter, so the deletion
            // also syncs to the cloud.
            localStorage.removeItem('kvn_bingo_state');
            dismiss();
            shimToast('Fresh start \u2014 previous game cleared', 'warn');
        };
    }
    // Auto-dismiss after 10 seconds (slightly longer when there's more to read)
    setTimeout(dismiss, ip ? 12000 : 8000);
}

function maybeShowWelcomeBack() {
    if (!isAuthenticated) return;
    const lastSeen = parseInt(_origGetItem(LAST_SEEN_KEY) || '0', 10);
    // Write new timestamp FIRST — even if modal logic bails, we keep the marker fresh
    _origSetItem(LAST_SEEN_KEY, String(Date.now()));
    if (!lastSeen) return; // First-ever login handled by the success toast, don't double-popup
    if (Date.now() - lastSeen < WELCOME_THRESHOLD_MS) return;
    // Small delay so the app's UI has settled
    setTimeout(() => showWelcomeBack(lastSeen), 1200);
}

// ─── Guest warning on page load ───
function showGuestWarning() {
    if (isAuthenticated) return;
    if (sessionStorage.getItem(GUEST_WARNED_KEY)) return;

    // Wait for the app to finish loading before showing
    setTimeout(() => {
        createModal();
    }, 2000);
}

// ─── Init ───
async function init() {
    // Mobile layout fixes — override inline styles on pills + FABs via !important
    if (!document.getElementById('kvn-mobile-style')) {
        const _ms = document.createElement('style');
        _ms.id = 'kvn-mobile-style';
        _ms.textContent = '@media(max-width:479px){' +
            '#kvn-wrapper-pill,#kvn-date-pill,#kvn-online-pill{display:none!important}' +
            '#kvn-sync-btn,#sonder-chat-btn{width:36px!important;height:36px!important;bottom:10px!important;font-size:15px!important}' +
            '#kvn-sync-btn{right:10px!important}' +
            '#sonder-chat-btn{right:50px!important}' +
        '}';
        document.head.appendChild(_ms);
    }

    // Purge legacy format cache keys — they caused a nasty bug where cross-device sync
    // reintroduced v3 cache (68 entries) onto v4 devices and isCacheStale() wrongly returned
    // false, locking the app at the old count. These caches are regenerable from GitHub.
    for (const k of LEGACY_LOCAL_KEYS) {
        try { _origRemoveItem(k); } catch {}
    }

    // Register service worker for offline + asset caching.
    registerServiceWorker();

    // Pick up any pending writes that didn't flush in a previous session (crash, offline, etc.)
    loadPending();

    // Wire up persistence safety nets
    window.addEventListener('pagehide', flushOnUnload);
    window.addEventListener('beforeunload', flushOnUnload);
    document.addEventListener('visibilitychange', onVisibilityChange);
    window.addEventListener('online', onOnline);
    window.addEventListener('offline', onOffline);

    // Check for existing auth
    const token = getToken();
    if (token) {
        const res = await apiCall('heartbeat');
        if (res.ok) {
            isAuthenticated = true;
            currentUser = res.username;
            updateYtProxy();
            // If we have queued writes from a previous session, flush them now
            if (Object.keys(pendingSync).length > 0) {
                flushSync();
            }
            // Welcome-back modal fires for returning users (> 15 min absence)
            maybeShowWelcomeBack();
        } else if (res.error) {
            // Network/parse failure — keep token AND treat as logged in optimistically.
            // The next successful request will re-validate or rotate the token.
            isAuthenticated = true;
            currentUser = currentUser || getUser();
            updateYtProxy();
            console.warn('[KVN Sync] heartbeat network error on init, staying logged in optimistically:', res.error);
        } else {
            // Explicit server-side rejection (ok:false, no error field) — bad/expired token.
            clearAuth();
        }
    }

    // Create UI
    createSyncButton();
    updateSyncIndicator();
    initSonderChat();

    // Show guest warning if not logged in
    if (!isAuthenticated) {
        showGuestWarning();
    }

    // Version detection: push (SSE) as primary, polling as fallback.
    // checkVersion() also locks in initialSha, which SSE needs as its baseline.
    checkVersion();
    setInterval(checkVersion, 5 * 60 * 1000);      // fallback poll in case SSE is blocked
    setTimeout(connectUpdateStream, 500);           // start SSE after initialSha is locked

    // Start-screen "Recent Games" panel
    setTimeout(wireRecentGamesPanel, 800);

    // Refresh the "X minutes ago" text every minute (no per-second countdown anymore)
    setInterval(updateVersionBadge, 60 * 1000);

    // Enhance credits modal with X/Twitter profile pics
    enhanceCredits();

    // Re-inject settings checkbox when settings panel opens
    if (isAuthenticated) {
        const settingsOverlay = document.getElementById('settingsOverlay');
        if (settingsOverlay) {
            const observer = new MutationObserver(() => {
                if (settingsOverlay.classList.contains('open')) {
                    setTimeout(injectBingoSettingsCheckbox, 50);
                }
            });
            observer.observe(settingsOverlay, { attributes: true, attributeFilter: ['class'] });
        }
    }

    // Enhance header buttons with counters and live indicator
    // Delay to let the app's DOM build (format panel, version badge, etc.)
    setTimeout(() => {
        enhanceHeaderButtons();
        setInterval(enhanceHeaderButtons, 5000);
        enhanceVersionBadge();
        pollOnlineCount();
        setInterval(pollOnlineCount, 30 * 1000);
        hookBingoCapture();
        hookBingoMerge();
        injectBingoSettingsCheckbox();
    }, 2500);

    // Auto-resume after a safeReload fired mid-game (graceful update flow).
    // Waits for the HTML's inline script to finish initialising its let-bindings
    // and build the DOM before we reach in and restore the saved game.
    if (sessionStorage.getItem('__kvn_resume_after_reload') === '1') {
        sessionStorage.removeItem('__kvn_resume_after_reload');
        setTimeout(() => {
            if (resumeInProgressGame()) {
                shimToast('\u{1F3AE} Game resumed after update', 'ok');
            }
        }, 1500);
    }
}

// ─── Sonder Chat ──────────────────────────────────────────────────────────────
// Public room + friends list + whispers + DMs.
// Button sits to the left of the profile/sync button (bottom-right corner).
// SSE for real-time delivery via multiplayer.php; friends managed by sonder.php.

const sonder = {
    open:    false,
    tab:     'global',            // 'global' | 'friends' | 'dm:<username>'
    msgs:    {},                  // roomId → [{id,attribution,text,at,whisper_to,img}]
    friends: [],                  // [{user_id,username,display,nick,online}]
    online:  [],                  // [{attribution,last_seen}]
    streams: {},                  // roomId → EventSource
    lastId:  {},                  // roomId → int
    dmRooms: {},                  // username → roomId
    dmTabs:  [],                  // [{username,roomId}]
    unread:  {},                  // roomId → count
};

async function sonderFetch(body) {
    const token = getToken();
    if (!token) return null;
    try {
        const r = await fetch(SONDER_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-KVN-Token': token },
            body: JSON.stringify(body),
        });
        return r.ok ? await r.json() : null;
    } catch { return null; }
}

async function sonderEmit(room, payload) {
    const token = getToken();
    if (!token) return;
    try {
        await fetch(SONDER_MP, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-KVN-Token': token },
            body: JSON.stringify({ action: 'emit', room, event: 'sonder_chat', payload }),
        });
    } catch {}
}

function sonderOpenStream(room) {
    if (sonder.streams[room]) return;
    const token = getToken();
    if (!token) return;
    const url = `${SONDER_MP}?room=${encodeURIComponent(room)}&since=${sonder.lastId[room] || 0}&t=${encodeURIComponent(token)}`;
    let es;
    try { es = new EventSource(url); } catch { return; }
    sonder.streams[room] = es;

    es.addEventListener('msg', e => {
        try {
            const ev = JSON.parse(e.data);
            if (ev.id) sonder.lastId[room] = Math.max(sonder.lastId[room] || 0, ev.id);
            if (ev.event !== 'sonder_chat') return;
            const p = ev.payload || {};
            // Whisper privacy: only show if addressed to me or sent by me
            if (p.whisper_to && p.whisper_to !== currentUser && ev.attribution !== currentUser) return;
            if (!sonder.msgs[room]) sonder.msgs[room] = [];
            sonder.msgs[room].push({
                id: ev.id, attribution: ev.attribution,
                text: p.text || '', at: ev.at,
                whisper_to: p.whisper_to || null,
                img: p.img || null,
            });
            if (sonder.msgs[room].length > 300) sonder.msgs[room].splice(0, 100);
            const viewing = sonder.open && sonder.tab === (room === SONDER_GLOBAL ? 'global' : `dm:${Object.keys(sonder.dmRooms).find(u => sonder.dmRooms[u] === room) || ''}`);
            if (!viewing) {
                sonder.unread[room] = (sonder.unread[room] || 0) + 1;
                sonderUpdateBadge();
                if (sonder.open) sonderRenderTabs();
            } else {
                sonderRenderMessages();
            }
        } catch {}
    });
    es.addEventListener('close', () => { es.close(); delete sonder.streams[room]; setTimeout(() => sonderOpenStream(room), 3000); });
    es.onerror = () => { es.close(); delete sonder.streams[room]; setTimeout(() => sonderOpenStream(room), 5000); };
}

function sonderEsc(s) {
    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

function sonderMd(raw) {
    // HTML-escape first, then apply safe markdown transforms
    let s = sonderEsc(raw);
    s = s
        .replace(/`([^`\n]+)`/g, '<code style="background:rgba(255,255,255,.1);padding:1px 5px;border-radius:3px;font-family:monospace;font-size:12px">$1</code>')
        .replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
        .replace(/\*(.+?)\*/g, '<em>$1</em>');
    // Links: [text](https://...)
    s = s.replace(/\[([^\]]{1,100})\]\((https?:\/\/[^\s)]{1,500})\)/g,
        '<a href="$2" target="_blank" rel="noopener noreferrer" style="color:#4ade80">$1</a>');
    // Bare URLs — render as image if image extension, else link
    s = s.replace(/(^|[\s>])(https?:\/\/[^\s<>"]{4,500})/g, (_, pre, url) => {
        if (/\.(gif|jpg|jpeg|png|webp)(\?[^\s]*)?$/i.test(url.replace(/&amp;/g,'&'))) {
            return `${pre}<img src="${url}" style="max-width:220px;max-height:150px;border-radius:6px;display:block;margin:4px 0;vertical-align:top" loading="lazy">`;
        }
        return `${pre}<a href="${url}" target="_blank" rel="noopener noreferrer" style="color:#4ade80;word-break:break-all">${url}</a>`;
    });
    return s;
}

function sonderFmtTime(ts) {
    return new Date(ts * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

function sonderActiveRoom() {
    if (sonder.tab === 'global') return SONDER_GLOBAL;
    if (sonder.tab.startsWith('dm:')) return sonder.dmRooms[sonder.tab.slice(3)] || null;
    return null;
}

function sonderRenderMessages() {
    const area = document.getElementById('sonder-msgs');
    if (!area) return;
    const room = sonderActiveRoom();
    const msgs = room ? (sonder.msgs[room] || []) : [];
    if (!msgs.length) {
        area.innerHTML = '<div style="color:#555;font-size:12px;text-align:center;padding:24px 8px">No messages yet</div>';
        return;
    }
    area.innerHTML = msgs.map(m => {
        const isMe = m.attribution === currentUser;
        const friend = sonder.friends.find(f => f.username === m.attribution);
        const displayName = friend?.nick || m.attribution;
        const isWhisper = !!m.whisper_to;
        const bg = isWhisper ? 'rgba(255,177,70,.09)' : isMe ? 'rgba(45,212,191,.06)' : '';
        const border = isWhisper ? 'border-left:2px solid #ffb14a;padding-left:6px;' : '';
        const whisperTag = isWhisper ? `<span style="color:#ffb14a;font-size:10px;margin-right:4px">→ ${sonderEsc(m.whisper_to)}</span>` : '';
        const imgHtml = m.img ? `<img src="${sonderEsc(m.img)}" style="max-width:220px;max-height:150px;border-radius:6px;display:block;margin:4px 0" loading="lazy" onerror="this.style.display='none'">` : '';
        return `<div style="padding:3px 8px;border-radius:6px;margin:1px 0;${bg ? 'background:' + bg + ';' : ''}${border}">
            <span style="font-size:10px;color:#555">${sonderFmtTime(m.at)}</span>
            ${whisperTag}<b style="color:${isMe?'#2dd4bf':'#e8a450'};cursor:pointer;font-size:13px" onclick="window.sonderWhisperTo(${JSON.stringify(m.attribution)})">${sonderEsc(displayName)}</b>
            <span style="color:#d4d4d4;font-size:13px;word-break:break-word"> ${sonderMd(m.text)}</span>${imgHtml}
        </div>`;
    }).join('');
    area.scrollTop = area.scrollHeight;
}

function sonderRenderOnline() {
    const list = document.getElementById('sonder-online-list');
    if (!list) return;
    if (!sonder.online.length) {
        list.innerHTML = '<div style="color:#555;font-size:11px;text-align:center;padding:8px 4px">—</div>';
        return;
    }
    list.innerHTML = sonder.online.map(u => {
        const isMe = u.attribution === currentUser;
        return `<div style="padding:3px 6px;font-size:12px;border-radius:5px;cursor:${isMe?'default':'pointer'};display:flex;align-items:center;gap:5px;color:${isMe?'#2dd4bf':'#c8c8d8'}"
                     title="${isMe ? 'You' : 'Click to whisper'}" onclick="${isMe ? '' : `window.sonderWhisperTo(${JSON.stringify(u.attribution)})`}">
            <span style="width:7px;height:7px;border-radius:50%;flex-shrink:0;background:${isMe?'#2dd4bf':'#4ade80'}"></span>
            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${sonderEsc(u.attribution)}</span>
        </div>`;
    }).join('');
}

function sonderRenderFriends() {
    const area = document.getElementById('sonder-friends-area');
    if (!area) return;
    if (!sonder.friends.length) {
        area.innerHTML = '<div style="color:#555;font-size:12px;text-align:center;padding:24px 8px">No friends yet — add one above</div>';
        return;
    }
    area.innerHTML = sonder.friends.map(f => {
        const nick = f.nick ? `<span style="color:#ffb14a;font-size:11px">(${sonderEsc(f.nick)})</span> ` : '';
        return `<div style="display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid #1a1a2a">
            <span style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:${f.online?'#4ade80':'#333'}" title="${f.online?'Online':'Offline'}"></span>
            <span style="flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d4d4d4">
                ${nick}${sonderEsc(f.display)}<span style="color:#555;font-size:11px"> @${sonderEsc(f.username)}</span>
            </span>
            <button onclick="window.sonderDmOpen(${JSON.stringify(f.username)})" title="Send DM"
              style="background:#1e3a38;color:#2dd4bf;border:1px solid #2dd4bf33;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer">DM</button>
            <button onclick="window.sonderEditNick(${JSON.stringify(f.username)})" title="Set nickname"
              style="background:rgba(255,255,255,.05);color:#888;border:1px solid #2a2a40;border-radius:5px;padding:2px 6px;font-size:11px;cursor:pointer">✏️</button>
            <button onclick="window.sonderRemoveFriend(${JSON.stringify(f.username)})" title="Remove friend"
              style="background:rgba(231,76,60,.12);color:#e74c3c;border:1px solid rgba(231,76,60,.25);border-radius:5px;padding:2px 6px;font-size:11px;cursor:pointer">×</button>
        </div>`;
    }).join('');
}

function sonderRenderTabs() {
    const bar = document.getElementById('sonder-tab-bar');
    if (!bar) return;
    const tabs = [
        { id: 'global',  label: '🌐 Global',  room: SONDER_GLOBAL },
        { id: 'friends', label: '👥 Friends', room: null },
        ...sonder.dmTabs.map(dt => ({ id: `dm:${dt.username}`, label: `💬 ${dt.username}`, room: dt.roomId, close: dt.username })),
    ];
    bar.innerHTML = tabs.map(t => {
        const active = sonder.tab === t.id;
        const unread = t.room ? (sonder.unread[t.room] || 0) : 0;
        const badge  = unread > 0 ? `<span style="background:#e74c3c;color:#fff;border-radius:9px;padding:0 4px;font-size:10px;margin-left:3px">${Math.min(unread,99)}</span>` : '';
        const close  = t.close ? `<span style="opacity:.45;margin-left:3px;font-size:14px" onclick="event.stopPropagation();window.sonderCloseDm(${JSON.stringify(t.close)})">×</span>` : '';
        return `<div onclick="window.sonderSwitchTab(${JSON.stringify(t.id)})"
              style="padding:7px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer;
                     white-space:nowrap;display:inline-flex;align-items:center;user-select:none;
                     color:${active?'#2dd4bf':'#555'};border-bottom:2px solid ${active?'#2dd4bf':'transparent'}">
            ${t.label}${badge}${close}
        </div>`;
    }).join('');
}

function sonderBuildGlobalBody() {
    const auth = isAuthenticated;
    return `<div style="display:flex;flex:1 1 auto;min-height:0">
        <div style="flex:1 1 auto;min-height:0;display:flex;flex-direction:column;min-width:0">
            <div id="sonder-msgs" style="flex:1 1 auto;overflow-y:auto;padding:8px 6px;font-size:13px;line-height:1.5;scroll-behavior:smooth"></div>
            <div style="flex:0 0 auto;padding:8px;border-top:1px solid #1a1a2a">
                <div style="display:flex;gap:4px">
                    <input id="sonder-input" maxlength="500"
                      placeholder="${auth ? 'Message… or /w user text' : 'Log in to chat'}"
                      ${auth ? '' : 'disabled'}
                      style="flex:1;min-width:0;background:#0a0a14;border:1px solid #2a2a40;border-radius:8px;
                             padding:7px 10px;color:#e8e8f0;font-size:13px;font-family:inherit;outline:none">
                    <button id="sonder-send" ${auth ? '' : 'disabled'}
                      style="background:${auth?'#2dd4bf':'#222'};color:${auth?'#0d0d14':'#444'};
                             border:0;border-radius:8px;padding:7px 12px;font-weight:700;font-size:16px;
                             cursor:${auth?'pointer':'default'}">→</button>
                </div>
                <div style="font-size:10px;color:#3a3a4a;margin-top:3px">
                    /w username message to whisper · paste image URL to share
                </div>
            </div>
        </div>
        <div style="width:100px;flex-shrink:0;border-left:1px solid #1a1a2a;display:flex;flex-direction:column;padding:8px 0 0">
            <div style="font-size:10px;font-weight:700;color:#444;letter-spacing:.07em;text-transform:uppercase;padding:0 8px 5px">Online</div>
            <div id="sonder-online-list" style="flex:1 1 auto;overflow-y:auto;padding-bottom:8px"></div>
        </div>
    </div>`;
}

function sonderBuildDmBody(username) {
    return `<div style="display:flex;flex-direction:column;flex:1 1 auto;min-height:0">
        <div id="sonder-msgs" style="flex:1 1 auto;overflow-y:auto;padding:8px 6px;font-size:13px;line-height:1.5;scroll-behavior:smooth"></div>
        <div style="flex:0 0 auto;padding:8px;border-top:1px solid #1a1a2a">
            <div style="display:flex;gap:4px">
                <input id="sonder-input" maxlength="500" placeholder="Message ${sonderEsc(username)}…"
                  style="flex:1;min-width:0;background:#0a0a14;border:1px solid #2a2a40;border-radius:8px;
                         padding:7px 10px;color:#e8e8f0;font-size:13px;font-family:inherit;outline:none">
                <button id="sonder-send"
                  style="background:#2dd4bf;color:#0d0d14;border:0;border-radius:8px;padding:7px 12px;font-weight:700;font-size:16px;cursor:pointer">→</button>
            </div>
        </div>
    </div>`;
}

function sonderBuildFriendsBody() {
    return `<div style="display:flex;flex-direction:column;flex:1 1 auto;min-height:0">
        <div style="flex:0 0 auto;padding:8px;border-bottom:1px solid #1a1a2a;display:flex;gap:4px">
            <input id="sonder-friend-input" placeholder="Add by username…" maxlength="32"
              style="flex:1;background:#0a0a14;border:1px solid #2a2a40;border-radius:8px;
                     padding:6px 10px;color:#e8e8f0;font-size:13px;font-family:inherit;outline:none">
            <button id="sonder-friend-add"
              style="background:#2dd4bf;color:#0d0d14;border:0;border-radius:8px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer">Add</button>
        </div>
        <div id="sonder-friends-area" style="flex:1 1 auto;overflow-y:auto;padding:4px 8px"></div>
    </div>`;
}

function sonderRebuildBody() {
    const body = document.getElementById('sonder-body');
    if (!body) return;
    if (sonder.tab === 'global') {
        body.innerHTML = sonderBuildGlobalBody();
        sonderRenderMessages();
        sonderRenderOnline();
        document.getElementById('sonder-send').onclick = sonderSend;
        document.getElementById('sonder-input').onkeydown = e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sonderSend(); } };
    } else if (sonder.tab === 'friends') {
        body.innerHTML = sonderBuildFriendsBody();
        sonderRenderFriends();
        document.getElementById('sonder-friend-add').onclick = sonderAddFriend;
        document.getElementById('sonder-friend-input').onkeydown = e => { if (e.key === 'Enter') sonderAddFriend(); };
    } else if (sonder.tab.startsWith('dm:')) {
        const username = sonder.tab.slice(3);
        body.innerHTML = sonderBuildDmBody(username);
        sonderRenderMessages();
        document.getElementById('sonder-send').onclick = sonderSend;
        document.getElementById('sonder-input').onkeydown = e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sonderSend(); } };
    }
}

window.sonderSwitchTab = function(id) {
    sonder.tab = id;
    const room = sonderActiveRoom();
    if (room) { sonder.unread[room] = 0; sonderUpdateBadge(); }
    sonderRebuildBody();
    sonderRenderTabs();
};

window.sonderWhisperTo = function(username) {
    if (!username || username === currentUser) return;
    const inp = document.getElementById('sonder-input');
    if (!inp) {
        // Switch to global if not there and re-wire
        if (sonder.tab !== 'global') sonderSwitchTab('global');
        setTimeout(() => { const i2 = document.getElementById('sonder-input'); if (i2) { i2.value = `/w ${username} `; i2.focus(); } }, 50);
        return;
    }
    inp.value = `/w ${username} `;
    inp.focus();
};

window.sonderDmOpen = async function(username) {
    if (!username || username === currentUser) return;
    if (!document.getElementById('sonder-modal')) sonderOpen();
    if (sonder.dmRooms[username]) {
        sonderSwitchTab(`dm:${username}`); return;
    }
    const d = await sonderFetch({ action: 'room_for', username });
    if (!d?.room) { shimToast(`Couldn't open DM with @${username}`, 'err'); return; }
    sonder.dmRooms[username] = d.room;
    if (!sonder.dmTabs.find(t => t.username === username)) {
        sonder.dmTabs.push({ username, roomId: d.room });
    }
    sonderOpenStream(d.room);
    sonderSwitchTab(`dm:${username}`);
};

window.sonderCloseDm = function(username) {
    sonder.dmTabs = sonder.dmTabs.filter(t => t.username !== username);
    const room = sonder.dmRooms[username];
    if (room && sonder.streams[room]) { sonder.streams[room].close(); delete sonder.streams[room]; }
    if (sonder.tab === `dm:${username}`) sonder.tab = 'global';
    sonderRebuildBody();
    sonderRenderTabs();
};

window.sonderRemoveFriend = async function(username) {
    await sonderFetch({ action: 'friends_remove', username });
    sonder.friends = sonder.friends.filter(f => f.username !== username);
    if (sonder.open && sonder.tab === 'friends') sonderRenderFriends();
};

window.sonderEditNick = function(username) {
    const friend = sonder.friends.find(f => f.username === username);
    const cur = friend?.nick || '';
    const nick = prompt(`Custom nickname for @${username} (blank to clear):`, cur);
    if (nick === null) return;
    sonderFetch({ action: 'friends_nick', username, nick }).then(d => {
        if (d?.ok && friend) { friend.nick = nick.trim() || null; if (sonder.open && sonder.tab === 'friends') sonderRenderFriends(); }
    });
};

async function sonderSend() {
    const inp = document.getElementById('sonder-input');
    if (!inp || !isAuthenticated) return;
    let text = inp.value.trim();
    if (!text) return;
    inp.value = '';

    let whisper_to = null;
    const isDm = sonder.tab.startsWith('dm:');

    if (!isDm && (text.startsWith('/w ') || text.startsWith('/whisper '))) {
        const body = text.replace(/^\/w(?:hisper)?\s+/, '');
        const spaceIdx = body.indexOf(' ');
        if (spaceIdx < 0) { inp.value = `/w ${body} `; inp.focus(); return; }
        whisper_to = body.slice(0, spaceIdx).trim();
        text = body.slice(spaceIdx + 1).trim();
        if (!text) { inp.value = `/w ${whisper_to} `; inp.focus(); return; }
    }

    const room = sonderActiveRoom();
    if (!room) return;

    // Detect bare image URL (auto-promoted to img payload)
    let img = null;
    if (!whisper_to && /^https?:\/\/\S+\.(gif|jpg|jpeg|png|webp)(\?[^\s]*)?$/i.test(text)) {
        img = text; text = '';
    }

    // Optimistic local echo
    if (!sonder.msgs[room]) sonder.msgs[room] = [];
    sonder.msgs[room].push({ id: Date.now(), attribution: currentUser, text, at: Math.floor(Date.now() / 1000), whisper_to, img });
    sonderRenderMessages();

    await sonderEmit(room, { text, whisper_to, img });
}

async function sonderAddFriend() {
    const inp = document.getElementById('sonder-friend-input');
    if (!inp || !isAuthenticated) return;
    const username = inp.value.trim();
    if (!username) return;
    inp.value = '';
    const d = await sonderFetch({ action: 'friends_add', username });
    if (!d) { shimToast('Network error', 'err'); return; }
    if (d.error === 'not_found') { shimToast(`@${username} not found`, 'err'); return; }
    if (d.error === 'bad_username') { shimToast('Invalid username', 'err'); return; }
    if (d.ok) {
        shimToast(`Added @${username} as a friend`, 'ok');
        const fl = await sonderFetch({ action: 'friends_list' });
        if (fl?.ok) { sonder.friends = fl.friends || []; sonderRenderFriends(); }
    }
}

function sonderUpdateBadge() {
    const badge = document.getElementById('sonder-badge');
    if (!badge) return;
    const total = Object.values(sonder.unread).reduce((a, b) => a + b, 0);
    if (total > 0) {
        badge.textContent = String(Math.min(total, 99));
        badge.style.display = 'flex';
    } else {
        badge.style.display = 'none';
    }
}

async function sonderRefreshData() {
    const [fl, ol] = await Promise.all([
        isAuthenticated ? sonderFetch({ action: 'friends_list' }) : Promise.resolve(null),
        fetch(SONDER_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'online' }) }).then(r => r.json()).catch(() => null),
    ]);
    if (fl?.ok) sonder.friends = fl.friends || [];
    if (ol?.ok) sonder.online = ol.online || [];
    const hdr = document.getElementById('sonder-hdr-online');
    if (hdr) hdr.textContent = sonder.online.length > 0 ? `${sonder.online.length} online` : '';
    if (sonder.open) {
        if (sonder.tab === 'friends') sonderRenderFriends();
        else if (sonder.tab === 'global') { sonderRenderOnline(); }
    }
}

function sonderOpen() {
    let modal = document.getElementById('sonder-modal');
    if (modal) { modal.style.display = 'flex'; sonder.open = true; sonderRenderTabs(); sonderRebuildBody(); sonderRefreshData(); return; }

    modal = document.createElement('div');
    modal.id = 'sonder-modal';
    const _mob = window.innerWidth < 600;
    Object.assign(modal.style, {
        position: 'fixed', zIndex: '99998',
        bottom: _mob ? '0' : '70px',
        right: _mob ? '0' : '16px',
        left: _mob ? '0' : 'auto',
        width: _mob ? '100%' : '360px',
        maxWidth: _mob ? '100%' : 'calc(100vw - 32px)',
        height: _mob ? '72vh' : '460px',
        maxHeight: _mob ? '72vh' : 'calc(100vh - 90px)',
        background: '#11111c', border: '1px solid #2a2a40',
        borderRadius: _mob ? '14px 14px 0 0' : '14px',
        boxShadow: '0 -4px 30px rgba(0,0,0,.75)',
        display: 'flex', flexDirection: 'column',
        fontFamily: 'Inter,sans-serif', color: '#e8e8f0', overflow: 'hidden',
    });
    modal.innerHTML = `
        <div style="flex:0 0 auto;padding:8px 12px;background:#161625;border-bottom:1px solid #2a2a40;
                    display:flex;align-items:center;gap:8px">
            <span style="font-size:14px;font-weight:800;letter-spacing:.04em">💬 Sonder</span>
            <span id="sonder-hdr-online" style="font-size:11px;color:#4ade80;margin-left:2px"></span>
            <span style="flex:1"></span>
            <button id="sonder-close-btn" style="background:transparent;border:0;color:#666;font-size:20px;
                    cursor:pointer;padding:0 4px;line-height:1;border-radius:4px">×</button>
        </div>
        <div id="sonder-tab-bar" style="flex:0 0 auto;display:flex;overflow-x:auto;scrollbar-width:none;
                background:#0e0e1a;border-bottom:1px solid #1a1a2a;padding:0 6px"></div>
        <div id="sonder-body" style="flex:1 1 auto;min-height:0;display:flex;flex-direction:column"></div>`;

    document.body.appendChild(modal);
    document.getElementById('sonder-close-btn').onclick = sonderClose;
    sonder.open = true;
    sonderRenderTabs();
    sonderRebuildBody();
    sonderRefreshData();
}

function sonderClose() {
    const modal = document.getElementById('sonder-modal');
    if (modal) { modal.style.display = 'none'; sonder.open = false; }
}

function initSonderChat() {
    const btn = document.createElement('button');
    btn.id = 'sonder-chat-btn';
    Object.assign(btn.style, {
        position: 'fixed', bottom: '16px', right: '70px', zIndex: '99999',
        width: '44px', height: '44px', borderRadius: '50%', border: '2px solid #2a2a40',
        background: '#161625', color: '#e8e8f0', fontSize: '18px', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'border-color .2s, transform .2s', boxShadow: '0 4px 16px rgba(0,0,0,.4)',
        padding: '0', outline: 'none',
    });
    btn.title = 'Sonder Chat';
    btn.innerHTML = '💬';
    btn.onmouseover = () => { btn.style.borderColor = '#2dd4bf'; btn.style.transform = 'scale(1.08)'; };
    btn.onmouseout  = () => { btn.style.borderColor = '#2a2a40'; btn.style.transform = 'scale(1)'; };
    btn.onclick = () => { sonder.open ? sonderClose() : sonderOpen(); };

    const badge = document.createElement('span');
    badge.id = 'sonder-badge';
    Object.assign(badge.style, {
        position: 'absolute', top: '-3px', right: '-3px', background: '#e74c3c',
        color: '#fff', fontSize: '10px', fontWeight: '700', borderRadius: '9px',
        padding: '2px 5px', minWidth: '16px', height: '16px',
        display: 'none', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Inter,sans-serif', lineHeight: '1', pointerEvents: 'none',
    });
    btn.appendChild(badge);
    document.body.appendChild(btn);

    // Connect to global room for real-time messages + background unread tracking
    if (isAuthenticated) sonderOpenStream(SONDER_GLOBAL);

    // Periodic refresh: friends online status + online list
    setInterval(sonderRefreshData, 30 * 1000);
}

// ─── Credits enhancement ───
// Swap YouTube links for X/Twitter, use unavatar.io for profile pics
function enhanceCredits() {
    // Watch for credits modal to open and enhance the links
    const creditsOverlay = document.getElementById('creditsOverlay');
    if (!creditsOverlay) return;

    const observer = new MutationObserver(() => {
        if (creditsOverlay.classList.contains('open')) {
            setTimeout(patchCreditsLinks, 300);
        }
    });
    observer.observe(creditsOverlay, { attributes: true, attributeFilter: ['class'] });

    // Also patch the static credit lines at the bottom
    patchStaticCredits();
}

function patchCreditsLinks() {
    const list = document.getElementById('creditsList');
    if (!list || list.dataset.enhanced) return;
    list.dataset.enhanced = '1';

    const links = list.querySelectorAll('a');
    links.forEach(link => {
        const text = link.textContent.trim();
        if (!text.startsWith('@')) return;

        const handle = text.replace('@', '');
        const origHref = link.getAttribute('href') || '';

        // Link to X/Twitter first
        link.href = 'https://x.com/' + handle;
        link.title = handle + ' on X';

        // Avatar: X/Twitter pic → YouTube pic → generated
        const img = link.querySelector('img');
        if (img) {
            const ytUrl = origHref.includes('youtube.com') ? origHref : 'https://www.youtube.com/@' + handle;
            img.src = 'https://unavatar.io/x/' + handle;
            img.onerror = function() {
                // Fallback to YouTube avatar
                this.src = 'https://unavatar.io/youtube/' + handle;
                this.onerror = function() {
                    // Final fallback to generated
                    this.src = 'https://ui-avatars.com/api/?name=' + handle.slice(0, 2) + '&background=333&color=fff&size=32&bold=true';
                    this.onerror = null;
                };
            };
        }

        // Check if X profile exists — if not, fall back link to YouTube
        fetch('https://unavatar.io/x/' + handle, { method: 'HEAD', mode: 'no-cors' }).catch(() => {
            link.href = 'https://www.youtube.com/@' + handle;
            link.title = handle + ' on YouTube';
        });
    });
}

function patchStaticCredits() {
    // Update Justin's credit line in the static section
    const creditsOverlay = document.getElementById('creditsOverlay');
    if (!creditsOverlay) return;

    const observer = new MutationObserver(() => {
        if (creditsOverlay.classList.contains('open')) {
            const divs = creditsOverlay.querySelectorAll('div');
            divs.forEach(div => {
                // Find and update Justin's credit line
                if (div.innerHTML && div.innerHTML.includes('@Chegnus') && div.innerHTML.includes('Tool Development') && !div.innerHTML.includes('Githubization')) {
                    div.innerHTML = div.innerHTML.replace('Tool Development', 'Tool Development, Githubization of Maps');
                }
            });
        }
    });
    observer.observe(creditsOverlay, { attributes: true, attributeFilter: ['class'] });
}

// ─── Bingo category merging ───
// For logged-in users: user's custom categories AUGMENT the built-in bingo-categories.json
// unless they check "Disable built-in bingo categories" in settings
const DISABLE_BUILTIN_KEY = '__kvn_disable_builtin_bingo';
let builtinCategories = null; // loaded from bingo-categories.json

function hookBingoMerge() {
    if (!isAuthenticated) return;

    // Fetch and cache the built-in categories from the JSON file
    fetch('/KVN_AUST/bingo-categories.json?_=' + Date.now())
        .then(r => r.ok ? r.json() : null)
        .then(data => {
            if (!data) return;
            let ok = true;
            for (const k of ['B','I','N','G','O']) {
                if (!Array.isArray(data[k]) || data[k].length < 5) { ok = false; break; }
            }
            if (ok) {
                builtinCategories = data;
                // Now apply the merge if user has custom categories
                applyBingoMerge();
            }
        })
        .catch(() => {});

    // Hook saveBingoCategories so user edits trigger a re-merge
    if (typeof window.saveBingoCategories === 'function' && !window._origSaveBingoCategories) {
        window._origSaveBingoCategories = window.saveBingoCategories;
        window.saveBingoCategories = function() {
            window._origSaveBingoCategories.apply(this, arguments);
            // After the app saves user edits, re-apply merge
            setTimeout(applyBingoMerge, 100);
        };
    }
}

function applyBingoMerge() {
    if (!isAuthenticated || !builtinCategories) return;
    if (_origGetItem(DISABLE_BUILTIN_KEY) === '1') return; // user disabled built-ins

    const userCats = window.BINGO_LIVE;
    if (!userCats) return;

    // Check if user has any custom categories (different from built-in)
    let hasCustom = false;
    for (const col of ['B','I','N','G','O']) {
        const builtinSet = new Set(builtinCategories[col] || []);
        for (const cat of (userCats[col] || [])) {
            if (!builtinSet.has(cat) && cat !== 'New category') {
                hasCustom = true;
                break;
            }
        }
        if (hasCustom) break;
    }

    if (!hasCustom) return; // nothing custom to merge

    // Merge: built-in + user's unique additions (deduped)
    const merged = {};
    for (const col of ['B','I','N','G','O']) {
        const base = [...(builtinCategories[col] || [])];
        const baseSet = new Set(base);
        for (const cat of (userCats[col] || [])) {
            if (!baseSet.has(cat)) {
                base.push(cat);
                baseSet.add(cat);
            }
        }
        merged[col] = base;
    }

    // Apply merged categories to the live set
    window.BINGO_LIVE = merged;
    // Rebuild the bingo setup panel if it exists
    if (typeof window.renderBingoSetup === 'function') {
        try { window.renderBingoSetup(); } catch {}
    }
}

function injectBingoSettingsCheckbox() {
    if (document.getElementById('kvn-disable-builtin-bingo')) return;
    // Target specifically the settings overlay, NOT the credits overlay
    const settingsOverlay = document.getElementById('settingsOverlay');
    if (!settingsOverlay) return;
    const modal = settingsOverlay.querySelector('.settings-modal');
    if (!modal) return;

    // Find the last s-divider before the buttons
    const dividers = modal.querySelectorAll('.s-divider');
    const lastDivider = dividers[dividers.length - 1];
    if (!lastDivider) return;

    const group = document.createElement('div');
    group.className = 's-group';
    group.innerHTML = `
        <div style="display:flex;align-items:center;gap:8px;padding:2px 0">
            <input type="checkbox" id="kvn-disable-builtin-bingo" style="accent-color:#e74c3c;width:16px;height:16px;cursor:pointer"
                ${_origGetItem(DISABLE_BUILTIN_KEY) === '1' ? 'checked' : ''}>
            <label for="kvn-disable-builtin-bingo" style="font-size:.75rem;color:#ccc;cursor:pointer">
                Disable built-in bingo categories
            </label>
        </div>
        <div style="font-size:.62rem;color:#555;margin-top:4px;margin-left:24px">
            Only use your custom categories. Uncheck to merge yours with the built-in set.
        </div>`;

    lastDivider.parentNode.insertBefore(group, lastDivider);

    document.getElementById('kvn-disable-builtin-bingo').addEventListener('change', function() {
        if (this.checked) {
            _origSetItem(DISABLE_BUILTIN_KEY, '1');
            shimToast('Built-in categories disabled', 'warn');
        } else {
            _origRemoveItem(DISABLE_BUILTIN_KEY);
            applyBingoMerge();
            shimToast('Categories merged with built-in set', 'ok');
        }
    });
}

// ─── Bingo card capture ───
// Hooks into triggerBingo() and exportBingoSVG() to save completed cards for logged-in users
function hookBingoCapture() {
    // Hook triggerBingo — fires when a bingo line is detected
    if (typeof window.triggerBingo === 'function' && !window._origTriggerBingo) {
        window._origTriggerBingo = window.triggerBingo;
        window.triggerBingo = function() {
            window._origTriggerBingo.apply(this, arguments);
            if (isAuthenticated) saveBingoCard('bingo');
        };
    }

    // Hook exportBingoSVG — fires when user exports the card
    if (typeof window.exportBingoSVG === 'function' && !window._origExportBingoSVG) {
        window._origExportBingoSVG = window.exportBingoSVG;
        window.exportBingoSVG = function() {
            window._origExportBingoSVG.apply(this, arguments);
            if (isAuthenticated) saveBingoCard('export');
        };
    }
}

function saveBingoCard(trigger) {
    try {
        // Read current bingo state from the app's globals
        const picked = window.bingoPicked;
        const state = window.bingoState;
        const gameId = window.currentGameId;
        if (!picked || !state) return;

        // Build the card snapshot
        const card = {
            id: gameId || ('card_' + Date.now()),
            trigger: trigger, // 'bingo' or 'export'
            date: new Date().toISOString(),
            picked: picked,
            state: Array.from(state),
            daubed: state.filter(Boolean).length,
            total: state.length
        };

        // Load existing completed cards
        let cards = [];
        try {
            cards = JSON.parse(_origGetItem('kvn_completed_bingo') || '[]');
            if (!Array.isArray(cards)) cards = [];
        } catch { cards = []; }

        // Don't save duplicate cards for the same game+trigger
        const dupeKey = card.id + '_' + trigger;
        if (cards.some(c => (c.id + '_' + c.trigger) === dupeKey)) return;

        // Prepend and cap at 100
        cards.unshift(card);
        if (cards.length > 100) cards.length = 100;

        // Save — this goes through our intercepted localStorage.setItem which auto-syncs
        localStorage.setItem('kvn_completed_bingo', JSON.stringify(cards));

        shimToast(trigger === 'bingo' ? 'Bingo card saved to cloud!' : 'Exported card saved to cloud!', 'ok');
    } catch (e) {
        console.warn('[KVN Sync] Failed to save bingo card:', e.message);
    }
}

// ─── Header button enhancements ───
// As of v7.0.1 the header buttons are icon-only with status slots.
// We update those slots, NOT the whole innerHTML (which would clobber
// the SVG icon). Slots:
//   #hdrFmtDot       — coloured circle showing sync state (live/cached)
//   #hdrFmtCount     — small (count) shown beside the formats icon
//   #historyCountPill — corner badge for game-history count
function enhanceHeaderButtons() {
    const fmtBtn   = document.getElementById('formatsBtn');
    const fmtDot   = document.getElementById('hdrFmtDot');
    const fmtCount = document.getElementById('hdrFmtCount');
    if (fmtBtn && fmtDot && fmtCount) {
        const panel  = document.getElementById('formatPanel');
        const count  = panel ? panel.querySelectorAll('.fp-item').length : 0;
        const docTs  = _origGetItem('kvn_doc_ts');
        const isLive = docTs && (Date.now() - parseInt(docTs || '0')) < 1000 * 60 * 35;

        fmtDot.classList.toggle('live',   !!isLive);
        fmtDot.classList.toggle('cached', !isLive);
        fmtCount.textContent = count > 0 ? '(' + count + ')' : '';
        fmtBtn.title = isLive
            ? 'Format Browser — ' + count + ' formats synced live from GitHub'
            : 'Format Browser — ' + count + ' formats (using cached / hardcoded fallback)';
    }

    const histBtn  = document.getElementById('historyBtn');
    const histPill = document.getElementById('historyCountPill');
    if (histBtn && histPill) {
        let gameCount = 0;
        try {
            const games = JSON.parse(_origGetItem('kvn_games') || '[]');
            gameCount = Array.isArray(games) ? games.length : 0;
        } catch {}
        if (gameCount > 0) {
            histPill.textContent = gameCount > 99 ? '99+' : String(gameCount);
            histBtn.title = 'Game History — ' + gameCount + ' game' + (gameCount === 1 ? '' : 's') + ' saved';
        } else {
            histPill.textContent = '';
            histBtn.title = 'Game History';
        }
    }
}

// ─── Version badge override ───
function enhanceVersionBadge() {
    updateVersionBadge();
}

// Live "X online now" — fetched from the public stats endpoint and shown in
// the footer pill next to the version. Hidden when 0 to avoid clutter.
async function pollOnlineCount() {
    try {
        const r = await fetch(SYNC_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'get_public_stats' }),
        });
        const data = await r.json();
        if (!data || !data.ok) return;
        const pill = document.getElementById('kvn-online-pill');
        const num  = document.getElementById('kvn-online-pill-num');
        if (!pill || !num) return;
        const n = parseInt(data.online_now, 10) || 0;
        num.textContent = String(n);
        pill.title =
            `${n} online now\n` +
            `${data.online_24h || 0} active in last 24 h\n` +
            `${data.total_users || 0} total registered players`;
        pill.style.display = n > 0 ? 'inline-flex' : 'none';
    } catch {}
}

function updateVersionBadge() {
    const badge = document.getElementById('versionBadge');
    if (!badge) return;

    let repo = 'https://github.com/sworrl/KVN_AUST';
    try {
        const embedded = JSON.parse(document.getElementById('app-version-data').textContent);
        repo = embedded.repo || repo;
    } catch {}

    const version = (lastVersionData && lastVersionData.version) || (() => {
        try { return JSON.parse(document.getElementById('app-version-data').textContent).version; } catch { return '?'; }
    })();
    const sha = (lastVersionData && lastVersionData.sha) ? lastVersionData.sha.substring(0, 7) : '';
    const wrapperV = (lastVersionData && lastVersionData.wrapper_version) || '';

    let syncDisplay = '';
    let exactTs = '';
    if (lastVersionData && lastVersionData.last_sync) {
        try {
            const d = new Date(lastVersionData.last_sync);
            if (!isNaN(d)) {
                const diffMin = Math.floor((Date.now() - d.getTime()) / 60000);
                if (diffMin < 1) syncDisplay = 'just now';
                else if (diffMin < 60) syncDisplay = diffMin + 'm ago';
                else if (diffMin < 1440) syncDisplay = Math.floor(diffMin / 60) + 'h ago';
                else syncDisplay = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
                exactTs = d.toLocaleString();
            }
        } catch {}
    }

    // Make the source badge itself look like a pill, and ensure a sibling wrapper pill.
    // The source HTML's span is flat text — we upgrade it to a proper pill inline with a
    // second companion pill for the wrapper version.
    badge.style.display = 'inline-flex';
    badge.style.alignItems = 'center';
    badge.style.gap = '3px';
    badge.style.padding = '2px 7px';
    badge.style.borderRadius = '999px';
    badge.style.border = '1px solid rgba(255,255,255,.08)';
    badge.style.background = 'rgba(255,255,255,.05)';
    badge.style.fontSize = '.55rem';
    badge.style.lineHeight = '1';

    // Ensure a sibling wrapper pill exists right after the source pill
    let wrapperPill = document.getElementById('kvn-wrapper-pill');
    if (!wrapperPill && badge.parentNode) {
        wrapperPill = document.createElement('span');
        wrapperPill.id = 'kvn-wrapper-pill';
        Object.assign(wrapperPill.style, {
            display: 'inline-flex', alignItems: 'center', gap: '3px',
            padding: '2px 7px', borderRadius: '999px',
            border: '1px solid rgba(79,195,247,.25)',
            background: 'rgba(79,195,247,.08)',
            color: '#4fc3f7', fontSize: '.55rem', lineHeight: '1',
            marginLeft: '4px', cursor: 'pointer'
        });
        wrapperPill.onclick = (e) => {
            e.stopPropagation(); e.preventDefault();
            showWrapperChangelogModal();
        };
        badge.parentNode.insertBefore(wrapperPill, badge.nextSibling);
    }

    // Date chip — shows today's date so the footer has a live calendar reference.
    let datePill = document.getElementById('kvn-date-pill');
    if (!datePill && badge.parentNode) {
        datePill = document.createElement('span');
        datePill.id = 'kvn-date-pill';
        Object.assign(datePill.style, {
            display: 'inline-flex', alignItems: 'center', gap: '3px',
            padding: '2px 7px', borderRadius: '999px',
            border: '1px solid rgba(255,255,255,.10)',
            background: 'rgba(255,255,255,.04)',
            color: '#888', fontSize: '.55rem', lineHeight: '1',
            marginLeft: '4px', fontFamily: 'inherit', cursor: 'default',
        });
        badge.parentNode.insertBefore(datePill, badge.nextSibling);
        const _updateDatePill = () => {
            const d = new Date();
            const M = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            datePill.textContent = `${M[d.getMonth()]} ${d.getDate()}`;
            datePill.title = d.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
        };
        _updateDatePill();
        setInterval(_updateDatePill, 60 * 1000);
    }

    // Ensure an online-count pill (live "X online now") sits next to the wrapper pill.
    // Populated by pollOnlineCount() on a schedule.
    let onlinePill = document.getElementById('kvn-online-pill');
    if (!onlinePill && badge.parentNode) {
        onlinePill = document.createElement('span');
        onlinePill.id = 'kvn-online-pill';
        Object.assign(onlinePill.style, {
            display: 'none', alignItems: 'center', gap: '4px',
            padding: '2px 7px', borderRadius: '999px',
            border: '1px solid rgba(76,175,80,.30)',
            background: 'rgba(76,175,80,.10)',
            color: '#4caf50', fontSize: '.55rem', lineHeight: '1',
            marginLeft: '4px', fontWeight: '700'
        });
        // Live dot styling (pulsing)
        if (!document.getElementById('kvn-online-pulse-style')) {
            const st = document.createElement('style');
            st.id = 'kvn-online-pulse-style';
            st.textContent = '@keyframes kvn-online-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}';
            document.head.appendChild(st);
        }
        onlinePill.innerHTML = '<span style="width:6px;height:6px;border-radius:50%;background:#4caf50;display:inline-block;animation:kvn-online-pulse 1.6s ease-in-out infinite"></span><span id="kvn-online-pill-num">0</span> online';
        badge.parentNode.insertBefore(onlinePill, badge);
    }

    if (updatePending) {
        const parts = ['\u26A0\uFE0F v' + version, 'update ready'];
        badge.textContent = parts.join(' \u00B7 ');
        badge.style.color = '#ffbb4a';
        badge.style.fontWeight = '700';
        badge.style.borderColor = 'rgba(255,187,74,.4)';
        badge.style.background = 'rgba(255,187,74,.08)';
        badge.title = 'A new version is ready.\n' +
            (isAuthenticated ? 'Click to refresh now.' : 'Click for changelog. Sign in to refresh in-place.');
        badge.style.animation = 'kvn-badge-pulse 1.6s ease-in-out infinite';
        if (!document.getElementById('kvn-badge-pulse-style')) {
            const st = document.createElement('style');
            st.id = 'kvn-badge-pulse-style';
            st.textContent = '@keyframes kvn-badge-pulse{0%,100%{opacity:1}50%{opacity:.55}}';
            document.head.appendChild(st);
        }
    } else {
        const parts = ['v' + version];
        if (sha) parts.push(sha);
        if (syncDisplay) parts.push(syncDisplay);
        badge.textContent = parts.join(' \u00B7 ');
        badge.style.color = '#4caf50';
        badge.style.fontWeight = '';
        badge.style.animation = '';
        badge.style.borderColor = 'rgba(76,175,80,.25)';
        badge.style.background = 'rgba(76,175,80,.08)';
        badge.title = 'Game v' + version +
            (sha ? '\nCommit ' + sha : '') +
            (exactTs ? '\nLast updated: ' + exactTs : '') +
            '\nClick for changelog';
    }

    if (wrapperPill) {
        // Always show — even before version.php fetch resolves, so the
        // license attribution is visible from page load.
        wrapperPill.textContent = wrapperV ? ('wrapper v' + wrapperV) : 'wrapper';
        wrapperPill.title =
            (wrapperV ? ('Server wrapper v' + wrapperV) : 'FalconTechnix server wrapper') +
            '\n\u00a9 Justin @ Falcon Technix \u2014 All Rights Reserved.\n' +
            'This wrapper layer (server-side cloud save + update + leaderboard infrastructure) is\n' +
            'fully owned and copyrighted by Justin / Falcon Technix.\n' +
            'Click for changelog + license details.';
        wrapperPill.style.display = 'inline-flex';
    }

    badge.style.cursor = 'pointer';
    badge.onclick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        onVersionBadgeClick();
    };
}

function onVersionBadgeClick() {
    // If an update is pending AND user is signed in, they can reload in-place now.
    // Otherwise show the changelog modal for the current/latest version.
    if (updatePending && isAuthenticated) {
        // Immediately reload (will flush pending syncs first)
        shimToast('Refreshing to the latest version...', 'ok');
        setTimeout(() => safeReload('badge-click-authed'), 300);
        return;
    }
    if (updatePending) {
        // Guest: inform + show changelog
        shimToast('Sign in and click the badge again to refresh in place', 'warn');
    }
    showChangelogModal();
}

// ─── Changelog modal ───
// Fetches CHANGELOG.md (served from same dir, auto-pulled from GitHub), parses the top
// version section, and renders it. Caches for 10 min in-memory.
let _changelogCache = { text: null, ts: 0 };
async function fetchChangelog() {
    const TEN_MIN = 10 * 60 * 1000;
    if (_changelogCache.text && (Date.now() - _changelogCache.ts) < TEN_MIN) return _changelogCache.text;
    try {
        const r = await fetch('/KVN_AUST/CHANGELOG.md?_=' + Date.now(), { cache: 'no-store' });
        if (!r.ok) return null;
        const text = await r.text();
        _changelogCache = { text, ts: Date.now() };
        return text;
    } catch { return null; }
}

// Parse a markdown-keep-a-changelog file into [{version, date, body}, ...]
function parseChangelog(md) {
    if (!md) return [];
    // Match either:  ## [1.2.3] - YYYY-MM-DD   OR   ## 1.2.3 — YYYY-MM-DD
    // The separator can be ASCII hyphen, en-dash, or em-dash — Markdown
    // editors love auto-correcting "- " to " — " in headings, which broke
    // the previous parser silently and dumped raw .md into the modal.
    // Trailing text after the date (e.g. "— Header polish") becomes part
    // of the title shown in the modal summary.
    const re = /^##\s+\[?([0-9]+\.[0-9]+\.[0-9]+[^\]\s]*)\]?\s*[-–—]\s*(\d{4}-\d{1,2}-\d{1,2})\s*(?:[-–—]\s*(.+?))?\s*$/gm;
    const starts = [];
    let m;
    while ((m = re.exec(md)) !== null) {
        starts.push({ version: m[1], date: m[2], title: (m[3] || '').replace(/\*\*/g, '').trim(), offset: m.index });
    }
    const entries = [];
    for (let i = 0; i < starts.length; i++) {
        const s = starts[i];
        const end = (i + 1 < starts.length) ? starts[i + 1].offset : md.length;
        const bodyStart = md.indexOf('\n', s.offset) + 1;
        let body = md.substring(bodyStart, end).trim();
        body = body.replace(/\n---+\s*$/, '').trim();
        entries.push({ version: s.version, date: s.date, title: s.title, body });
    }
    return entries;
}

// Render a subset of markdown to HTML. Safe: escape first, then apply
// targeted regex-based formatting in a fixed order. Supports headings,
// bold, italic, inline code, fenced code blocks, links, blockquotes,
// horizontal rules, and bullet lists. Tables are rendered as monospace
// preformatted blocks (cheap fallback — looks fine for changelog use).
function renderMarkdown(md) {
    if (!md) return '';
    const esc = s => s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));

    // Pull fenced code blocks out first so their content survives every
    // other regex below. Restore at the end.
    const fences = [];
    md = md.replace(/```([a-z]*)\n([\s\S]*?)```/gi, (_, lang, code) => {
        fences.push(`<pre style="background:rgba(0,0,0,.4);border:1px solid #2a2a40;border-radius:6px;padding:10px 12px;overflow-x:auto;font-family:'Space Mono',monospace;font-size:11px;color:#ffd27a;margin:8px 0;line-height:1.5">${esc(code).trim()}</pre>`);
        return ` FENCE${fences.length - 1} `;
    });

    let out = esc(md);

    // Headings (### only; ## handled by the section header)
    out = out.replace(/^###\s+(.+)$/gm, '<h4 style="margin:12px 0 6px;font-size:13px;color:#ffbb4a;font-weight:700">$1</h4>');
    out = out.replace(/^####\s+(.+)$/gm, '<h5 style="margin:10px 0 5px;font-size:12px;color:#ffbb4a;font-weight:700;opacity:.85">$1</h5>');

    // Horizontal rule (--- on its own line)
    out = out.replace(/^---+\s*$/gm, '<hr style="border:none;border-top:1px solid #2a2a40;margin:14px 0">');

    // Blockquotes — collect consecutive `> ` lines, wrap once
    out = out.replace(/(^&gt;\s+.+(?:\n&gt;\s+.+)*)/gm, (block) => {
        const inner = block.replace(/^&gt;\s?/gm, '');
        return `<blockquote style="margin:8px 0;padding:6px 12px;border-left:3px solid #e74c3c;background:rgba(231,76,60,.06);color:#ddd;font-style:italic">${inner}</blockquote>`;
    });

    // Markdown tables — render as a styled table when the row pattern matches
    out = out.replace(/((?:^\|.+\|\s*$\n?){2,})/gm, (block) => {
        const rows = block.trim().split('\n').map(r => r.trim().slice(1, -1).split('|').map(c => c.trim()));
        if (rows.length < 2) return block;
        const isSep = r => r.every(c => /^:?-{2,}:?$/.test(c));
        const headRows = rows[1] && isSep(rows[1]) ? [rows[0]] : [];
        const bodyRows = rows[1] && isSep(rows[1]) ? rows.slice(2) : rows;
        const td = (txt, tag) => `<${tag} style="padding:5px 9px;border:1px solid #2a2a40;color:#ddd">${txt}</${tag}>`;
        const th = headRows.length ? '<thead><tr>' + headRows[0].map(c => td(c, 'th')).join('') + '</tr></thead>' : '';
        const tb = '<tbody>' + bodyRows.map(r => '<tr>' + r.map(c => td(c, 'td')).join('') + '</tr>').join('') + '</tbody>';
        return `<table style="border-collapse:collapse;margin:8px 0;font-size:12px;width:100%">${th}${tb}</table>`;
    });

    // Inline: links, bold, italic, code. Order matters — code first so backticks
    // inside don't get gobbled by other patterns.
    out = out.replace(/`([^`\n]+)`/g, '<code style="background:rgba(255,255,255,.08);padding:1px 5px;border-radius:3px;font-family:\'Space Mono\',monospace;font-size:.9em;color:#ffd27a">$1</code>');
    out = out.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+&quot;[^&]*&quot;)?\)/g, '<a href="$2" target="_blank" rel="noopener" style="color:#5b9bd5;text-decoration:underline">$1</a>');
    out = out.replace(/\*\*([^*\n]+)\*\*/g, '<strong style="color:#fff">$1</strong>');
    out = out.replace(/(^|[^*])\*([^*\n]+)\*([^*]|$)/g, '$1<em style="color:#ddd">$2</em>$3');

    // Bullets ("-" or "*"). Convert each line independently first, then group.
    out = out.replace(/(^|\n)[-*]\s+(.+)/g, '$1<li style="margin:3px 0;line-height:1.5;color:#cdcdcd">$2</li>');
    out = out.replace(/(<li[\s\S]*?<\/li>)(?:\s*<li[\s\S]*?<\/li>)+/g, '<ul style="margin:6px 0;padding-left:20px;list-style:disc outside">$&</ul>');
    // Single-li wrap (the multi-li regex above only catches 2+).
    out = out.replace(/(?<!<\/ul>\s*)(<li[\s\S]*?<\/li>)(?!\s*<li)/g, '<ul style="margin:6px 0;padding-left:20px;list-style:disc outside">$1</ul>');

    // Paragraph breaks
    out = out.replace(/\n\n+/g, '</p><p style="margin:10px 0;color:#bbb">');
    out = '<p style="margin:10px 0;color:#bbb">' + out + '</p>';
    // Tidy: block-level elements shouldn't be wrapped in <p>
    out = out.replace(/<p[^>]*>\s*(<ul[\s\S]*?<\/ul>|<table[\s\S]*?<\/table>|<blockquote[\s\S]*?<\/blockquote>|<pre[\s\S]*?<\/pre>|<hr[^>]*>|<h[45][\s\S]*?<\/h[45]>)\s*<\/p>/g, '$1');
    out = out.replace(/<p[^>]*>\s*<\/p>/g, '');

    // Restore fenced code blocks
    out = out.replace(/ FENCE(\d+) /g, (_, i) => fences[+i]);

    return out;
}

async function showChangelogModal() {
    if (document.getElementById('kvn-changelog-modal')) return;

    const overlay = document.createElement('div');
    overlay.id = 'kvn-changelog-modal';
    Object.assign(overlay.style, {
        position:'fixed', inset:'0', background:'rgba(0,0,0,.75)', backdropFilter:'blur(4px)',
        zIndex:'999996', display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'Inter,sans-serif', padding:'20px', animation:'kvn-fade-in .3s ease-out'
    });
    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };

    overlay.innerHTML = `
    <div style="background:linear-gradient(160deg,#1a1a2e 0%,#161625 100%);border:1px solid #2a2a40;border-radius:14px;
         width:560px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;
         box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(231,76,60,.12);color:#eee;overflow:hidden">
      <div style="padding:18px 22px 14px;border-bottom:1px solid #2a2a40;display:flex;align-items:center;justify-content:space-between">
        <div>
          <h2 style="margin:0;font-size:15px;font-weight:700;color:#fff">\u{1F4DC} What's new</h2>
          <div id="kvn-cl-sub" style="font-size:11px;color:#888;margin-top:2px">Loading changelog...</div>
        </div>
        <button id="kvn-cl-close" style="background:none;border:none;color:#888;font-size:22px;cursor:pointer;padding:0 4px"
          onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#888'">&times;</button>
      </div>
      <div id="kvn-cl-body" style="padding:6px 22px;overflow-y:auto;flex:1;font-size:12.5px;line-height:1.55">
        <div style="text-align:center;color:#666;padding:40px 0;font-size:12px">Fetching CHANGELOG.md...</div>
      </div>
      <div style="padding:12px 22px;border-top:1px solid #2a2a40;display:flex;gap:8px;justify-content:flex-end">
        <a id="kvn-cl-github" href="https://github.com/sworrl/KVN_AUST/blob/main/CHANGELOG.md" target="_blank" rel="noopener"
           style="padding:8px 14px;background:transparent;border:1px solid #2a2a40;border-radius:6px;color:#aaa;font-size:12px;text-decoration:none"
           onmouseover="this.style.borderColor='#e74c3c';this.style.color='#fff'"
           onmouseout="this.style.borderColor='#2a2a40';this.style.color='#aaa'">View on GitHub \u2197</a>
        <button id="kvn-cl-ok" style="padding:8px 16px;background:linear-gradient(135deg,#e74c3c,#ff6b4a);border:none;border-radius:6px;
          color:#fff;font-weight:700;font-size:12px;cursor:pointer" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
          Got it
        </button>
      </div>
    </div>`;
    document.body.appendChild(overlay);

    const dismiss = () => overlay.remove();
    document.getElementById('kvn-cl-close').onclick = dismiss;
    document.getElementById('kvn-cl-ok').onclick = dismiss;

    const md = await fetchChangelog();
    const body = document.getElementById('kvn-cl-body');
    const sub = document.getElementById('kvn-cl-sub');
    if (!md) {
        body.innerHTML = '<div style="text-align:center;color:#e74c3c;padding:40px 0">Couldn\'t load CHANGELOG.md. <a href="https://github.com/sworrl/KVN_AUST/blob/main/CHANGELOG.md" target="_blank" style="color:#ff6b4a">View on GitHub</a></div>';
        sub.textContent = 'Changelog unavailable';
        return;
    }
    const entries = parseChangelog(md);
    if (!entries.length) {
        body.innerHTML = '<pre style="white-space:pre-wrap;color:#aaa;font-family:inherit">' + md.replace(/[<>&]/g, c => ({'<':'&lt;','>':'&gt;','&':'&amp;'}[c])) + '</pre>';
        sub.textContent = 'Raw changelog';
        return;
    }

    // Show latest 5 versions, with the newest first expanded
    const shown = entries.slice(0, 5);
    sub.textContent = 'Latest ' + shown.length + ' version' + (shown.length !== 1 ? 's' : '');
    body.innerHTML = shown.map((e, i) => `
        <details ${i === 0 ? 'open' : ''} style="margin:10px 0;border:1px solid #2a2a40;border-radius:8px;overflow:hidden">
          <summary style="padding:10px 14px;background:rgba(255,255,255,.03);cursor:pointer;list-style:none;
            display:flex;align-items:center;justify-content:space-between">
            <span style="font-weight:700;color:#fff">v${e.version}</span>
            <span style="font-size:11px;color:#888;font-family:'Space Mono',monospace">${e.date}</span>
          </summary>
          <div style="padding:2px 16px 14px">${renderMarkdown(e.body)}</div>
        </details>`).join('');
}

// Expose for manual testing
window.kvnShowChangelog = showChangelogModal;

// ─── Wrapper changelog modal ───
// Same shell as the source-changelog modal but pulls /KVN_AUST/WRAPPER-CHANGELOG.md
// (server-side wrapper-only history) and labels it accordingly. Cached locally.
let _wrapperChangelogCache = { text: null, ts: 0 };
async function fetchWrapperChangelog() {
    const TEN_MIN = 10 * 60 * 1000;
    if (_wrapperChangelogCache.text && (Date.now() - _wrapperChangelogCache.ts) < TEN_MIN) return _wrapperChangelogCache.text;
    // First, try the persisted local copy (lets users pop the modal offline / on flaky networks).
    let lsCached = null;
    try {
        const raw = localStorage.getItem('__kvn_wrapper_changelog');
        if (raw) {
            const obj = JSON.parse(raw);
            if (obj && typeof obj.text === 'string') {
                lsCached = obj.text;
                // Use cached immediately if it's < 6 hours old; otherwise just keep as fallback.
                if ((Date.now() - (obj.ts || 0)) < 6 * 3600 * 1000) {
                    _wrapperChangelogCache = { text: lsCached, ts: Date.now() };
                    // Still kick off a refresh in the background so the next open is up to date.
                    refreshWrapperChangelog();
                    return lsCached;
                }
            }
        }
    } catch {}

    try {
        const r = await fetch('/KVN_AUST/WRAPPER-CHANGELOG.md?_=' + Date.now(), { cache: 'no-store' });
        if (!r.ok) return lsCached;
        const text = await r.text();
        _wrapperChangelogCache = { text, ts: Date.now() };
        try { localStorage.setItem('__kvn_wrapper_changelog', JSON.stringify({ text, ts: Date.now() })); } catch {}
        return text;
    } catch { return lsCached; }
}

function refreshWrapperChangelog() {
    fetch('/KVN_AUST/WRAPPER-CHANGELOG.md?_=' + Date.now(), { cache: 'no-store' })
        .then(r => r.ok ? r.text() : null)
        .then(text => {
            if (!text) return;
            _wrapperChangelogCache = { text, ts: Date.now() };
            try { localStorage.setItem('__kvn_wrapper_changelog', JSON.stringify({ text, ts: Date.now() })); } catch {}
        }).catch(() => {});
}

async function showWrapperChangelogModal() {
    if (document.getElementById('kvn-wcl-modal')) return;

    const overlay = document.createElement('div');
    overlay.id = 'kvn-wcl-modal';
    Object.assign(overlay.style, {
        position:'fixed', inset:'0', background:'rgba(0,0,0,.75)', backdropFilter:'blur(4px)',
        zIndex:'999996', display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'Inter,sans-serif', padding:'20px', animation:'kvn-fade-in .3s ease-out'
    });
    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };

    const wrapperVersionLine = (lastVersionData && lastVersionData.wrapper_version)
        ? 'Wrapper v' + lastVersionData.wrapper_version
        : 'FalconTechnix wrapper';

    overlay.innerHTML = `
    <style>
      @keyframes kvn-license-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
      @keyframes kvn-license-breathe{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(255,255,255,.35))}}
      .kvn-license-pulse{
        background:linear-gradient(90deg,#ff5252,#ffb74d,#ffd54f,#aed581,#4dd0e1,#4fc3f7,#9575cd,#f06292,#ff5252);
        background-size:200% 100%;
        -webkit-background-clip:text;background-clip:text;
        -webkit-text-fill-color:transparent;color:transparent;
        animation:kvn-license-flow 8s linear infinite, kvn-license-breathe 3s ease-in-out infinite;
      }
      @media (prefers-reduced-motion:reduce){.kvn-license-pulse{animation:none}}
    </style>
    <div style="background:linear-gradient(160deg,#0e1726 0%,#11192c 100%);border:1px solid rgba(79,195,247,.25);border-radius:14px;
         width:560px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;
         box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(79,195,247,.12);color:#eee;overflow:hidden">
      <div style="padding:18px 22px 14px;border-bottom:1px solid rgba(79,195,247,.18);display:flex;align-items:center;justify-content:space-between">
        <div>
          <h2 style="margin:0;font-size:15px;font-weight:700;color:#fff">\u{1F9E9} Wrapper changelog</h2>
          <div id="kvn-wcl-sub" style="font-size:11px;color:#7fa9c2;margin-top:2px">Loading WRAPPER-CHANGELOG.md...</div>
        </div>
        <button id="kvn-wcl-close" style="background:none;border:none;color:#7fa9c2;font-size:22px;cursor:pointer;padding:0 4px"
          onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#7fa9c2'">&times;</button>
      </div>
      <div id="kvn-wcl-meta" style="padding:10px 22px;font-size:11px;color:#6f8caa;border-bottom:1px solid rgba(79,195,247,.08);display:flex;flex-direction:column;gap:4px">
        <div style="display:flex;justify-content:space-between">
          <span>${wrapperVersionLine}</span>
          <span>Server-side layer \u2014 mono-HTML doesn't ship any of this</span>
        </div>
        <div class="kvn-license-pulse" style="font-size:10.5px;letter-spacing:.02em;font-weight:600">
          \u00a9 Justin / Falcon Technix \u2014 All Rights Reserved.
          The wrapper (cloud-save, update orchestration, leaderboard, push, multiplayer relay)
          is proprietary infrastructure owned and copyrighted by Justin @ Falcon Technix.
        </div>
      </div>
      <div id="kvn-wcl-body" style="padding:6px 22px;overflow-y:auto;flex:1;font-size:12.5px;line-height:1.55">
        <div style="text-align:center;color:#666;padding:40px 0;font-size:12px">Fetching...</div>
      </div>
      <div style="padding:12px 22px;border-top:1px solid rgba(79,195,247,.18);display:flex;gap:8px;justify-content:flex-end">
        <button id="kvn-wcl-source" style="padding:8px 14px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#aaa;font-size:12px;cursor:pointer"
           onmouseover="this.style.borderColor='#e74c3c';this.style.color='#fff'"
           onmouseout="this.style.borderColor='rgba(255,255,255,.12)';this.style.color='#aaa'">Source HTML changelog</button>
        <button id="kvn-wcl-ok" style="padding:8px 16px;background:linear-gradient(135deg,#2095d4,#4fc3f7);border:none;border-radius:6px;
          color:#fff;font-weight:700;font-size:12px;cursor:pointer" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
          Got it
        </button>
      </div>
    </div>`;
    document.body.appendChild(overlay);

    const dismiss = () => overlay.remove();
    document.getElementById('kvn-wcl-close').onclick = dismiss;
    document.getElementById('kvn-wcl-ok').onclick = dismiss;
    document.getElementById('kvn-wcl-source').onclick = () => { dismiss(); showChangelogModal(); };

    const md = await fetchWrapperChangelog();
    const body = document.getElementById('kvn-wcl-body');
    const sub  = document.getElementById('kvn-wcl-sub');
    if (!md) {
        body.innerHTML = '<div style="text-align:center;color:#e74c3c;padding:40px 0">Couldn\'t load WRAPPER-CHANGELOG.md.</div>';
        sub.textContent = 'Wrapper changelog unavailable';
        return;
    }
    const entries = parseChangelog(md);
    if (!entries.length) {
        body.innerHTML = '<pre style="white-space:pre-wrap;color:#aaa;font-family:inherit">' + md.replace(/[<>&]/g, c => ({'<':'&lt;','>':'&gt;','&':'&amp;'}[c])) + '</pre>';
        sub.textContent = 'Raw';
        return;
    }
    const shown = entries.slice(0, 8);
    sub.textContent = 'Latest ' + shown.length + ' wrapper version' + (shown.length !== 1 ? 's' : '');
    body.innerHTML = shown.map((e, i) => `
        <details ${i === 0 ? 'open' : ''} style="margin:10px 0;border:1px solid rgba(79,195,247,.18);border-radius:8px;overflow:hidden">
          <summary style="padding:10px 14px;background:rgba(79,195,247,.05);cursor:pointer;list-style:none;
            display:flex;align-items:center;justify-content:space-between">
            <span style="font-weight:700;color:#fff">v${e.version}</span>
            <span style="font-size:11px;color:#7fa9c2;font-family:'Space Mono',monospace">${e.date}</span>
          </summary>
          <div style="padding:2px 16px 14px">${renderMarkdown(e.body)}</div>
        </details>`).join('');
}

window.kvnShowWrapperChangelog = showWrapperChangelogModal;

// ─── Recent Games panel on the start screen ───
// Reads kvn_games from localStorage and renders a scrollable list of recent sessions
// into the start-screen. Re-renders whenever the start-screen becomes active and
// whenever kvn_games changes (covers: new game saved, cloud pull, localStorage edit).
function renderRecentGames() {
    const startScreen = document.getElementById('start-screen');
    if (!startScreen) return;

    let games = [];
    try {
        const raw = _origGetItem('kvn_games');
        if (raw) games = JSON.parse(raw) || [];
    } catch {}
    if (!Array.isArray(games)) games = [];

    let panel = document.getElementById('kvn-recent-games');
    if (games.length === 0) {
        if (panel) panel.remove();
        return;
    }

    if (!panel) {
        panel = document.createElement('div');
        panel.id = 'kvn-recent-games';
        Object.assign(panel.style, {
            marginTop: '24px', width: '100%', maxWidth: '480px',
            fontFamily: 'Inter, sans-serif', fontSize: '12px',
            alignSelf: 'center'
        });
        // Attach inside the logo-area so it sits cleanly below the NEW GAME button
        const logoArea = startScreen.querySelector('.logo-area') || startScreen;
        logoArea.appendChild(panel);
    }

    const humanize = (iso) => {
        try {
            const d = new Date(iso);
            const diffMs = Date.now() - d.getTime();
            const s = Math.floor(diffMs / 1000);
            if (s < 60) return 'just now';
            const m = Math.floor(s / 60);
            if (m < 60) return m + 'm ago';
            const h = Math.floor(m / 60);
            if (h < 24) return h + 'h ago';
            const days = Math.floor(h / 24);
            if (days < 7) return days + 'd ago';
            return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        } catch { return ''; }
    };

    const avgRating = (rounds) => {
        const rated = rounds.filter(r => typeof r.rating === 'number' && r.rating > 0);
        if (!rated.length) return 0;
        return rated.reduce((s, r) => s + r.rating, 0) / rated.length;
    };

    const starStr = (n) => {
        const full = Math.round(n);
        return '\u2605'.repeat(Math.max(0, Math.min(5, full))) + '\u2606'.repeat(Math.max(0, 5 - full));
    };

    const show = games.slice(0, 10);
    panel.innerHTML = `
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 4px">
          <span style="font-size:11px;font-weight:700;color:#e74c3c;text-transform:uppercase;letter-spacing:.12em">\u{1F4C2} Recent Games</span>
          <span style="font-size:10px;color:#555">${games.length} saved</span>
        </div>
        <div style="display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;padding-right:4px">
          ${show.map((g, gi) => {
              const when = humanize(g.date);
              const rounds = Array.isArray(g.rounds) ? g.rounds : [];
              const found = rounds.filter(r => r && r.link).length;
              const avg = avgRating(rounds);
              return `
                <details data-game-idx="${gi}" style="background:rgba(22,22,37,.85);border:1px solid #2a2a40;border-radius:8px;overflow:hidden">
                  <summary style="padding:8px 12px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px">
                    <span style="flex:1;font-size:11.5px;color:#eee">
                      <span style="color:#999">#${(g.id || '').substring(0,6)}</span>
                      <span style="color:#666;margin:0 6px">\u00B7</span>
                      <span>${when}</span>
                    </span>
                    <span style="font-size:10px;color:#aaa">${rounds.length} ${rounds.length===1?'round':'rounds'}</span>
                    ${found ? `<span style="font-size:10px;color:#4caf50">\u{1F3AC} ${found}</span>` : ''}
                    ${avg > 0 ? `<span style="font-size:10px;color:#f39c12;letter-spacing:1px">${starStr(avg)}</span>` : ''}
                  </summary>
                  <div style="padding:2px 12px 10px;font-size:11px;color:#bbb;max-height:180px;overflow-y:auto">
                    ${rounds.length === 0 ? '<div style="color:#666;text-align:center;padding:10px">No rounds recorded.</div>' :
                      rounds.map((r, ri) => `
                        <div style="display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px dotted #2a2a40">
                          <span style="color:#555;font-size:10px;min-width:22px">#${ri+1}</span>
                          <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                            ${r.link ? `<a href="${encodeURI(r.link)}" target="_blank" rel="noopener" style="color:#4fc3f7;text-decoration:none">\u{1F517} ${(r.search||'(no search)').replace(/[<>]/g,'')}</a>`
                                     : `<span style="color:#888">${(r.search||'(skipped)').replace(/[<>]/g,'')}</span>`}
                          </span>
                          ${r.rating > 0 ? `<span style="font-size:10px;color:#f39c12">${starStr(r.rating)}</span>` : ''}
                        </div>`).join('')}
                  </div>
                </details>`;
          }).join('')}
        </div>
        ${games.length > 10 ? `<div style="text-align:center;font-size:10px;color:#555;margin-top:6px">Showing 10 of ${games.length} — older games in History panel</div>` : ''}
    `;
}

// Fire rendering whenever the start-screen becomes visible.
function wireRecentGamesPanel() {
    const startScreen = document.getElementById('start-screen');
    if (!startScreen) return;
    // Initial render if the start screen is visible
    if (startScreen.classList.contains('active')) setTimeout(renderRecentGames, 100);
    // Re-render on screen transitions
    const obs = new MutationObserver(() => {
        if (startScreen.classList.contains('active')) renderRecentGames();
    });
    obs.observe(startScreen, { attributes: true, attributeFilter: ['class'] });
}

// Also re-render whenever the cloud save shim writes kvn_games back to localStorage
// (via cloud pull or the app's own saveAllGames). This is additive — we hook in
// alongside the existing setItem intercept.
const _kvn_prev_setItem = localStorage.setItem;
localStorage.setItem = function(key, value) {
    _kvn_prev_setItem.call(localStorage, key, value);
    if (key === 'kvn_games') {
        const ss = document.getElementById('start-screen');
        if (ss && ss.classList.contains('active')) setTimeout(renderRecentGames, 50);
    }
};

// ─── Service Worker registration ─────────────────────────────────────────
function registerServiceWorker() {
    if (!('serviceWorker' in navigator)) return;
    if (location.protocol !== 'https:' && location.hostname !== 'localhost') return;

    const SW_URL = '/KVN_AUST/sw.js';
    const SW_SCOPE = '/KVN_AUST/';

    window.addEventListener('load', () => {
        navigator.serviceWorker.register(SW_URL, { scope: SW_SCOPE })
            .then(reg => {
                // Check for updates whenever the tab regains focus.
                document.addEventListener('visibilitychange', () => {
                    if (document.visibilityState === 'visible') reg.update().catch(() => {});
                });

                // New worker found — prompt it to take over once the old tabs close,
                // or immediately if the user is OK with it.
                reg.addEventListener('updatefound', () => {
                    const sw = reg.installing;
                    if (!sw) return;
                    sw.addEventListener('statechange', () => {
                        if (sw.state === 'installed' && navigator.serviceWorker.controller) {
                            // There's an old worker still controlling this page; let it finish.
                            // We don't auto-skipWaiting here — avoids interrupting an in-flight game.
                            try { sw.postMessage({ type: 'SKIP_WAITING' }); } catch {}
                        }
                    });
                });

                // Periodic background sync (Chrome). Best-effort; silently no-ops on Firefox/Safari.
                if ('periodicSync' in reg) {
                    navigator.permissions?.query({ name: 'periodic-background-sync' }).then(p => {
                        if (p.state === 'granted') {
                            reg.periodicSync.register('kvn-refresh', { minInterval: 12 * 60 * 60 * 1000 }).catch(() => {});
                        }
                    }).catch(() => {});
                }
            })
            .catch(() => { /* registration failed — app still works without SW */ });

        // Reload once when the controller changes (new SW activated).
        let reloaded = false;
        navigator.serviceWorker.addEventListener('controllerchange', () => {
            if (reloaded) return;
            reloaded = true;
            // Don't reload if mid-game, auth overlay is open, or user just logged in.
            try {
                const inGame = document.querySelector('#wheel-screen.active, #format-screen.active, #number-screen.active, #result-screen.active');
                const authOpen = document.getElementById('kvn-auth-overlay');
                if (!inGame && !authOpen && !authJustCompleted) location.reload();
            } catch { /* ignore */ }
        });
    });
}

// Wait for DOM
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    // Small delay to let the app initialize first
    setTimeout(init, 500);
}

// ─── KVN AUST Gameplay Telemetry ───
// Wraps game globals — they're defined in inline scripts before shim.js loads.
(function() {
    function wrap(name, before) {
        var orig = window[name];
        if (typeof orig !== 'function') return;
        window[name] = function() {
            try { before.apply(null, arguments); } catch(e) {}
            return orig.apply(this, arguments);
        };
    }
    function snap(key) {
        try { return window[key]; } catch(e) { return undefined; }
    }

    wrap('startGame', function() {
        window._kvnTele('game_start');
    });
    wrap('startNextRound', function() {
        var rounds = snap('sessionRounds');
        window._kvnTele('round_start', {round: Array.isArray(rounds) ? rounds.length + 1 : undefined});
    });
    wrap('spinWheel', function() {
        window._kvnTele('spin');
    });
    wrap('searchYouTube', function() {
        var q = snap('finalString') || '';
        window._kvnTele('search', {q: String(q).slice(0, 100), fmt: snap('chosenFormat'), num: snap('chosenNumber')});
    });
    wrap('watchVideo', function(idx) {
        window._kvnTele('watch', {idx: idx});
    });
    wrap('watchVideoInline', function(idx) {
        window._kvnTele('watch_inline', {idx: idx});
    });
    wrap('saveVideoFromSearch', function(idx) {
        window._kvnTele('save_from_search', {idx: idx});
    });
    wrap('setMetric', function(metric, v) {
        window._kvnTele('rate', {metric: metric, val: v});
    });
    wrap('saveVideo', function() {
        var m = snap('currentMetrics') || {};
        window._kvnTele('save', {metrics: m});
    });
    wrap('saveAndReRandomize', function() {
        var m = snap('currentMetrics') || {};
        window._kvnTele('save_rerandom', {metrics: m});
    });
    wrap('saveAndEnd', function() {
        var m = snap('currentMetrics') || {};
        window._kvnTele('save_end', {metrics: m});
    });
    wrap('skipVideo', function() {
        var rounds = snap('sessionRounds');
        window._kvnTele('skip', {round: Array.isArray(rounds) ? rounds.length + 1 : undefined});
    });
    wrap('endSession', function() {
        var rounds = snap('sessionRounds');
        window._kvnTele('session_end', {rounds: Array.isArray(rounds) ? rounds.length : undefined});
    });
    wrap('closeBingoFlash', function() {
        window._kvnTele('bingo');
    });
})();

})();

</script>
</body>
</html>