<!--

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░▓████████████████████████▒░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▓█████▓▒░░░░░░░░░░░░░░░▒██████▒░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░████▒░░░░░░░░░░░░░░░░░░░░░░░░░▓███▒░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░███░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███░░░░░░░░░░░░░░░
░░░░░░░░░░░░░▒██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒██░░░░░░░░░░░░░░
░░░░░░░░░░░░▒██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░░░░░░░░
░░░░░░░░░░░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░░░░░░░
░░░░░░░░░░░██▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒░░██░░░░░░░░░░░░
░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░
░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░
░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░
░░░░░░░░░░░██▒░██▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██▓░▒██░░░░░░░░░░░
░░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░░
░░░░░░░░░░░░██▒░██░░░░░▒▒▓███▒░░░░░░░▒███▓▒▒░░░░░██░▓██░░░░░░░░░░░░
░░░░░░░░░░░░░██░██░░██████████▒░░░░░▓██████████░░██▒██░░░░░░░░░░░░░
░░░░░░░░░░░░░░████░████████████░░░░░████████████░████░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░███░▒██████████░░░░░░░██████████▒░██▒░░░░░░░░░▒░░░░░
░░░▒████░░░░░░░▓█▒░░█████████░░░░░░░░░█████████░░▒█▓░░░░░░▓████░░░░
░░░██░▒██▒░░░░░██░░░░██████▓░░░░█░█░░░░███████░░░░██░░░░░███░░██░░░
░░░██░░░██▓░░░░██░░░░░░▒▓▓░░░░▒██░██░░░░░▓▓▒░░░░░▒██░░░░███░░░██░░░
░▓██▒░░░░████▓░░██░░░░░░░░░░░░███░███░░░░░░░░░░░░██░░█████░░░░▓██▒░
██▓░░░░░░░░▒████████▓░░░░░░░░████░███▓░░░░░░░▒▓████████░░░░░░░░░███
██▓▒▓███▓░░░░░░▓████████▓░░░░████░███▓░░░░▓████████▓░░░░░░████▓▓███
░███████████▒░░░░░░███████░░░░██░░░██░░░░██████▓░░░░░░▓███████████░
░░░░░░░░░░▓█████░░░░██▓▓░██░░░░░░░░░░░░░██░█▒██░░░▒█████▓░░░░░░░░░░
░░░░░░░░░░░░░▒█████▒▒█▓█░███▓▓▒▒▒▓▒▒▓▓▓███▒███░▓█████░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▒████▒▓█▒▒█░█▒█░█░█▓█▒█▓░█░█████▒░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░██░░██▓█▓█▓█▒█▒█▓█▓████░▓█▓░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▓████▓░▓█▓█░█▒█░█░█▒█▒███▒░██████░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░▓█████░░██░░░▒█████▓█▓█████▒░░░██░▒█████▓░░░░░░░░░░░░░
░░░░▒██████████▓░░░░░███░░░░░░░░░░░░░░░░░░░██▒░░░░░▓██████████▒░░░░
░░░░██░░░▓▓▓░░░░░░▒██████▓░░░░░░░░░░░░░░░███████▒░░░░░░▓▓▒░░▒██░░░░
░░░░▓██░░░░░░░░▓████▓░░░█████▒░░░░░░▒▓█████░░░▓████▓░░░░░░░▒██▓░░░░
░░░░░░███░░░░████▒░░░░░░░░▓█████████████▒░░░░░░░░▒████░░░░███░░░░░░
░░░░░░░██░░░██▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓██░░░██░░░░░░░
░░░░░░░██▒▓██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒██▒▓██░░░░░░░
░░░░░░░░████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

███████████████████████████
███████▀▀▀░░░░░░░▀▀▀███████
████▀░░░░░░░░░░░░░░░░░▀████
███│░░░░░░░░░░░░░░░░░░░│███
██▌│░░░░░░░░░░░░░░░░░░░│▐██
██░└┐░░░░░░░░░░░░░░░░░┌┘░██
██░░└┐░░░░░░░░░░░░░░░┌┘░░██
██░░┌┘▄▄▄▄▄░░░░░▄▄▄▄▄└┐░░██
██▌░│██████▌░░░▐██████│░▐██
███░│▐███▀▀░░▄░░▀▀███▌│░███
██▀─┘░░░░░░░▐█▌░░░░░░░└─▀██
██▄░░░▄▄▄▓░░▀█▀░░▓▄▄▄░░░▄██
████▄─┘██▌░░░░░░░▐██└─▄████
█████░░▐█─┬┬┬┬┬┬┬─█▌░░█████
████▌░░░▀┬┼┼┼┼┼┼┼┬▀░░░▐████
█████▄░░░└┴┴┴┴┴┴┴┘░░░▄█████
███████▄░░░░░░░░░░░▄███████
██████████▄▄▄▄▄▄▄██████████
███████████████████████████

              YOU SHOULD NOT BE HERE  ·  MarquisDeSade  ·  TortillaTV  ·  ☠


⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣀⡤⠤⠴⠶⠶⠒⠶⠶⠦⠤⢤⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣤⢶⠟⠫⠅⠐⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢽⣛⠶⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣠⡴⠟⢋⡵⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣈⠛⢷⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣠⡾⠋⢀⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠑⢄⠈⠻⣦⡀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⠋⢀⠔⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⢦⡘⢻⣆⠀⠀⠀⠀⠀
⠀⠀⠀⣠⡞⢁⡴⢃⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠒⠙⣷⡀⠀⠀⠀
⠀⠀⣰⠏⢰⠏⠀⠀⠃⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢷⡄⠀⠀
⠀⣸⠏⢠⣿⢠⣄⠀⠘⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠀⠈⢿⡄⠀
⢠⡏⢀⢿⣯⠀⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠈⣷⠀
⣾⠀⢼⣿⣿⡀⠹⣿⣶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⠀⠀⠀⢸⡇
⡿⠀⠀⢿⣿⣇⠀⢿⣾⡷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⣇
⣇⠀⠀⠼⣿⣿⠀⠸⣯⣶⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀⣿
⣿⠀⠘⢿⣿⣿⣇⠀⢿⣿⠷⠖⠓⠲⠆⠀⠠⠾⢶⣄⠀⠀⠀⠀⠀⠀⣠⡴⠖⠙⠋⠉⠁⠀⠀⠀⠀⠀⠀⠀⣿⡁⠀⠀⠀⢠⡟
⢻⡆⠀⢹⣿⣿⡿⠂⠀⠀⠀⠀⠀⣀⠀⢤⠀⠀⠀⠀⠁⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡀⠀⠄⠀⠀⠀⠀⠘⣿⣺⠀⠀⠀⣼⠃
⠘⣷⠀⠘⢿⣿⡄⠀⢀⣠⣤⣴⣾⣿⣿⣿⣷⣦⣤⣀⣀⣷⣤⣼⣧⠀⣀⣤⣤⣶⣾⣿⣷⣶⣦⣤⣄⡀⠀⠀⢻⡗⠀⠀⢀⡿⠀
⠀⠸⣧⠀⠈⢿⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠈⡇⢈⡿⢦⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⢻⠃⠀⢀⣼⠃⠀
⠀⠀⠙⢷⣤⣿⣶⣶⣶⣶⢦⣄⡹⡄⠀⠀⠀⠳⡘⢿⣿⠗⣿⡿⢣⠏⠀⠀⠀⡠⢊⣤⣶⣶⣶⣾⣷⣤⣤⡴⠋⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠻⣷⣤⣿⣶⣶⣶⣶⢦⣄⡹⡄⠀⠙⠿⣷⣄⣤⣅⡀⠀⠀⡠⢊⣤⣶⣶⣶⣾⣷⣤⣤⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠙⢷⣄⣀⠀⠀⢀⠀⠀⠀⠉⠻⠿⠛⠉⠁⠀⠀⠀⡀⠀⠀⣷⣠⣤⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠳⣦⡀⠙⠢⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⡴⠚⠁⢀⣴⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⢷⣄⠀⠉⠁⠀⠀⠒⠒⠈⠗⠃⢀⣠⡶⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⠶⠶⠶⠶⠶⠶⠶⣶⡶⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀


    ██████████████████████████████████████████████████████████████████████████████████████████████
    ██                                                                                        ██
    ██                                    ████████████                                        ██
    ██                                ████████████████████                                    ██
    ██                              ██████████████████████████                                ██
    ██                           █████████████████████████████████                            ██
    ██                          ████████████████████████████████████                          ██
    ██                         ██████████████████████████████████████                         ██
    ██                        ████████████████████████████████████████                        ██
    ██                        ████████████████████████████████████████                        ██
    ██                       ██████████████████████████████████████████                       ██
    ██                       ██████████████████████████████████████████                       ██
    ██                       ██████████████████████████████████████████                       ██
    ██                       ██████████     ████████     ██████████████                       ██
    ██                       ████████         ████         ████████████                       ██
    ██                       ███████    ████   ██   ████    ███████████                       ██
    ██                       ███████   ██████  ██  ██████   ███████████                       ██
    ██                       ███████   ██████  ██  ██████   ███████████                       ██
    ██                       ███████    ████   ██   ████    ███████████                       ██
    ██                       ████████         ████         ████████████                       ██
    ██                       ██████████     ████████     ██████████████                       ██
    ██                       ██████████████████████████████████████████                       ██
    ██                        ████████████████████████████████████████                        ██
    ██                        ████████████████████████████████████████                        ██
    ██                         ████████████████  ████████████████████                         ██
    ██                          ██████████████    ██████████████████                          ██
    ██                           ████████████  ██  ██████████████                             ██
    ██                            ██████████  ████  ████████████                              ██
    ██                              ████████  ████  ██████████                                ██
    ██                                ██████ ██████ ████████                                  ██
    ██                                  ████████████████                                      ██
    ██                                    ████████████                                        ██
    ██                                      ████████                                          ██
    ██                                        ████                                            ██
    ██                                         ██                                             ██
    ██                                                                                        ██
    ██                   █████                                    █████                        ██
    ██                ██████████                                ██████████                     ██
    ██              ██████████████                            ██████████████                   ██
    ██            ████████████████████                    ████████████████████                 ██
    ██              ██████████████████████████████████████████████████████                     ██
    ██                  ████████████████████████████████████████████████                       ██
    ██                      ████████████████████████████████████████                           ██
    ██                  ████████████████████████████████████████████████                       ██
    ██              ██████████████████████████████████████████████████████                     ██
    ██            ████████████████████                    ████████████████████                 ██
    ██              ██████████████                            ██████████████                   ██
    ██                ██████████                                ██████████                     ██
    ██                   █████                                    █████                        ██
    ██                                                                                        ██
    ██                                                                                        ██
    ██          ╔═══════════════════════════════════════════════════════════╗                   ██
    ██          ║     YOU SHOULD NOT BE HERE  ·  MarquisDeSade  ·  ☠      ║                   ██
    ██          ╚═══════════════════════════════════════════════════════════╝                   ██
    ██                                                                                        ██
    ██                                                                                        ██
    ██████████████████████████████████████████████████████████████████████████████████████████████
    ██████████████████████████████████████████████████████████████████████████████████████████████


                                              |
                                             _|_
                                            /   \
                                           /_____\
                                      ___|/_______\___|_
                                     |  __|       |__  |
                                     | |  | ☠   ☠ |  | |
                                     | |  |  ___  |  | |
                                     | |__|_/   \_|__| |
                                     |_____|     |_____|
                                          |       |
                                     |    |       |    |
                                    .|    |       |    |.
                                   .:|    |       |    |:.
                                  .::| ___|_______|___ |::.
                                 .:::||               ||:::.
                                .::::||               ||::::.
                               .:::::||               ||:::::.
                               |:::::||               ||:::::|
                     ____......|:::::||               ||:::::|......____
              _.-"""           |:::::||               ||:::::|           """"-._
           .-'                 |:::::||               ||:::::|                 '-.
          /                    |:::::||               ||:::::|                    \
        _/                      \:::||               ||:::/                      \_
       /  \                      \::||               ||::/                      /  \
      /    \                      \.||               ||./                      /    \
     /      \__                    |/               \|                    __/      \
    /          """"---_____________|_________________|_____________---""""          \
   (                                                                               )
    \                                                                             /
     \_                                                                         _/
       """"----_________                                       _________----""""
                        """"""""-------.................-------""""""""
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                          MarquisDeSade  ·  Mariconcito si lees esto·  ☠

                          )ԅ‾⌣‾(ԅ) • () • (⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣀⣄⢦⣒⢳⣌⡲⣜⢮⠳⣍⡒⣬⣳⢳⣭⡷⣎⠷⣞⡽⢻⣯⡞⣟⣯⣟⣿⣿⣿⣴⣤⣀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠉⠐⠟⡿⣾⣴⣠⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⣳⢮
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣄⡤⠶⣙⡹⣍⠦⣒⡹⢝⣣⢵⣮⢻⣽⡻⣟⢯⣿⣿⣿⣿⣴⣠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣄⠀⠏⣼⢌⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⡿⣺⢷⣎
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣀⣤⢦⡖⡛⣩⡵⢮⢳⣿⣟⣯⣿⣿⣿⣴⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡅⡼⢠⠀⢀⠣⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠊⡿⣽⢻⣴⢻⢧
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣀⣤⢶⡷⣟⣿⣿⣿⢛⠛⠛⠉⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡅⡞⠀⠀⠀⠀⠀⡀⢤⠓⠀⠀⠀⠀⠀⠉⠋⠿⣯⣵⢞⣣⡕⣫⠔⢫
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡁⣞⣠⣀⣀⣀⣄⣦⣶⢿⠿⠿⠛⠙⠉⠀⠀⠀⠀⠀⠃⢠⠀⠀⠀⠀⠀⠀⠀⠀⢧⠟⠿⡿⣿⣯⢾⣗⣮⣳⡜⢫⡴⠞⣌⠓
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠤⠑⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⡰⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣤⣶⣿⣿⣿⠿⠛⠈⠀⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⡄⣿⣷⣟⣯⢿⣎⢻⣎⠳⣌⠳⣡⢜⣉⠦
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠢⠉⠀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠀⡀⠡⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠞⢠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣦⣿⣿⣿⠿⣿⡝⠋⠉⠀⠀⠀⠀⠀⠀⠀⣆⣻⡵⣞⡽⢿⢫⢴⢺⡌⠜⠫⡔⠙⣧
⠀⠀⠀⠂⡿⣿⠿⠛⠙⠉⠀⠀⠀⠀⠀⠀⡀⢦⠃⠛⠾⡒⣤⣀⠀⠀⠀⠀⣀⣄⠦⢟⠙⠈⠀⠀⠀⠀⠁⠂⠈⠱⢃⡼⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣧⣿⣿⣿⣿⣿⣿⢿⠘⠀⠀⠀⠀⠀⠀⢧⣫⡼⣟⢯⣳⣼⠎⢍⡳⢯⡺⠙⢣
⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⢿⠛⠈⠀⠀⠀⠁⣾⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢆⡘⢧⣝⠛⠻⠟⡹⠿⢏⡿⣰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡄⣷⣿⣿⣿⣿⣿⣿⣿⠿⠻⠛⠈⠀⠀⡀⢿⣜⠿⣎⣿⡷⢎⡙⡱⢮⣇⠰⢳
⠀⠀⠀⡇⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⠻⠄⡧⠸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠋⣾⡤⣤⣀⠀⠤⡰⣄⣧⣰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠇⣶⣶⣤⣀⠀⠀⣀⣤⣦⣶⣷⠻⠙⠈⣇⡵⢞⣯⡗⣯⢽⡻⠵⡙⢣⣡⡿
⠀⠀⠀⠀⣧⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣻⢹⠑⠀⠀⠀⠀⠀⠀⠀⠀⠋⡶⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⡸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠄⠃⣰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣄⣷⣻⢯⣜⡻⢧⣾⡽⣾⡽⣳⣞⡷
⠀⠀⠀⠀⡀⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⠿⠛⠉⠛⠖⠤⣀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⡜⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠤⠓⠈⠀⠀⠀⠀⠋⢨⡐⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣽⠾⣏⡱⢾⣏⣳⢿⣂⢢⣝⣦
⠀⠁⠀⠀⠀⠀⣀⣷⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⠈⠁⠀⠀⠀⠀⠀⠀⠀⠀⡀⠋⣷⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⢦⠙⠚⡬⣾⢿⠼⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷⣯⢳⣮⡟⢣⣼⣻⢿⠀⠀⢠
⠀⠁⠀⠀⠀⠀⠀⡀⡸⣉⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⡘⠄⠀⠀⠀⠀⠀⠀⠀⠀⣰⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⢨⢀⢻⣹⢷⢈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⣯⡽⢻⣭⡺⢷⣧⣟⠾⠛⠛
⠀⠄⠀⠀⠀⠀⠀⠃⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⠙⠀⠁⠀⠀⠂⠈⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢳⠀⣿⢸⡇⣿⠶⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⣷⣷⣻⢿⣟⣿⣿⣻⣼⢾⣛
⠂⠀⠀⠀⠀⠀⠃⣿⣿⣿⣿⣿⣿⣸⢀⣇⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⡘⠙⠀⠀⢃⠀⠀⢰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡄⠸⣾⠁⡾⢀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⣭⡻⣿⣿⣷⣟⣯⠷⣬⢓⢡
⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣩⠄⣶⢠⠀⠀⢣⣄⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠻⠉⠀⠱⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠇⢋⡰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⣿⣯⣟⡿⣷⡽⢯⡳⢜⡱⢠
⠄⠀⠀⠀⠀⠀⣿⣿⣿⣾⣿⣿⠿⡟⢰⠀⠀⢄⠙⡀⣄⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠻⠸⢠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡅⣿⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠇⠀⡇⣽⣎⡱⢺⣽⡶⣝⢣⡌⠓⡬
⠀⠀⠀⠀⠀⡏⣿⣿⣿⣿⣿⣿⣷⢻⠟⠾⠩⢋⣿⣿⣿⠿⡹⣌⣦⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡁⣼⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢀⡟⠞⣵⣰⢞⣩⡽⡹⢾⣝⠳⠴
⠀⠀⠀⠀⡛⡞⣿⣿⣿⣿⣿⠛⡿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⠻⣉⣤⣶⣷⣿⣿⣿⣿⣿⣿⣿⢻⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡆⢠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡰⠃⢒⢎⡙⡶⢞⣯⡗⢯⡶⣈⠱⠖
⠀⠁⠋⠷⣸⢷⡟⣿⣿⣿⣿⣿⣿⣷⣶⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠿⡻⣙⣬⣤⣿⣿⢿⡿⢾⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠊⢠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⡔⠃⣱⢱⢦⡛⢦⣹⣳⢯⣎⡽⣒⠄⠈
⠟⣫⢬⣠⠀⠀⢧⣮⣿⣿⣿⣿⣿⣿⡿⣥⣫⡞⣱⣿⣿⣿⣿⣿⣿⣿⣶⣠⣊⣠⠀⠀⣀⣅⣯⣠⣀⣀⠀⠀⠄⢑⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠜⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠃⠠⠏⢢⡰⡐⢉⣱⢦⡔⢣⢢⢝⡡⠰⢠⠀
⣿⣿⣿⢽⠻⠈⠀⣄⣦⣿⣿⣿⣿⣿⣯⣝⠉⠦⣮⣴⣦⣶⣯⣶⣧⣶⣤⣠⠀⠀⠀⠀⠋⣴⢀⠀⠀⠀⠀⠀⠀⠀⢄⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠊⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠐⢋⡴⢀⢂⡀⠠⢀⡁⠂⣈⠱⢦⡈⡐⠀⠀⠀
⣿⣿⣿⣿⣿⢿⠉⠀⠀⠀⣀⣤⣶⣶⣷⣿⣿⢿⣷⣯⠔⡠⢀⠀⠀⠀⠀⠀⠀⠀⠁⡞⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠄⠢⠐⠁⠉⠉⠁⠉⠋⠖⠩⣀⢄⠒⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡡⠊⡤⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢯⣼⡿⣾⣿⣿⣿⢿⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠏⣠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠞⡱⣬⢆⣀⣠⢀⡀⠀⠀⣄⠢⠓⠉⣉⢌⠠⠀⠀⠀⠀⠉⠉⠊⠔⡠⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠶⣍⢳⣮⣝⡿⣿⣿⣿⣿⢿⠻⠙⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠃⡴⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⡴⣓⢢⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠄⡀⣠⣀⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀


-->⠀<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CubanGuesser - Adivina la provincia</title>
  <meta name="description" content="Adivina de que provincia de Cuba es cada persona. Un juego diario de geografia cubana.">
  <meta property="og:title" content="CubanGuesser">
  <meta property="og:description" content="Adivina de que provincia de Cuba es cada persona.">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9111680160617343" crossorigin="anonymous"></script>
  <style>
    :root {
      --bg: #faf6f0;
      --bg-card: #ffffff;
      --blue: #0050a0;
      --blue-light: #1a6fc4;
      --red: #cc1229;
      --red-light: #e8293f;
      --white: #ffffff;
      --sand: #e8e0d6;
      --sand-dark: #d4c8b8;
      --text: #1a1a1a;
      --text-muted: #6b7280;
      --text-light: #9ca3af;
      --green: #22c55e;
      --orange: #f97316;
      --gold: #f59e0b;
      --radius: 12px;
      --radius-sm: 8px;
      --shadow: 0 4px 20px rgba(0,0,0,0.08);
      --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6;
    }

    /* ---- Header ---- */
    .header {
      background: var(--blue); color: var(--white); padding: 0 1.5rem; height: 56px;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 100;
      box-shadow: 0 2px 12px rgba(0,80,160,0.3);
    }
    .header__logo {
      font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800;
      display: flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--white);
    }
    .header__logo span { color: var(--red-light); }
    .header__stats { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; font-weight: 600; }
    .header__stat { display: flex; align-items: center; gap: 0.3rem; opacity: 0.9; }
    .header__nav { display: flex; gap: 0.4rem; }
    .header__nav a {
      color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; font-weight: 500;
      padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); transition: 0.2s;
    }
    .header__nav a:hover, .header__nav a.active { background: rgba(255,255,255,0.15); color: var(--white); }
    .btn--back {
      background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
      color: var(--white); padding: 0.25rem 0.75rem; border-radius: var(--radius-sm);
      font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
      transition: 0.2s;
    }
    .btn--back:hover { background: rgba(255,255,255,0.25); }

    /* ---- Buttons ---- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.8rem 2rem; border: none; border-radius: var(--radius);
      font-family: inherit; font-size: 1rem; font-weight: 700;
      cursor: pointer; transition: all 0.25s ease; text-decoration: none;
    }
    .btn--primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 16px rgba(0,80,160,0.3); }
    .btn--primary:hover { background: var(--blue-light); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,80,160,0.4); }
    .btn--primary:disabled { background: var(--sand-dark); color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; }
    .btn--red { background: var(--red); box-shadow: 0 4px 16px rgba(204,18,41,0.3); }
    .btn--red:hover { background: var(--red-light); transform: translateY(-2px); }
    .btn--secondary { background: var(--white); color: var(--blue); border: 2px solid var(--blue); }
    .btn--secondary:hover { background: var(--blue); color: var(--white); }
    .btn--small { padding: 0.5rem 1.2rem; font-size: 0.85rem; }
    .btn--confirm {
      background: var(--blue); color: var(--white); padding: 0.7rem 2.5rem;
      border-radius: 999px; font-size: 0.95rem;
      box-shadow: 0 4px 20px rgba(0,80,160,0.4), 0 0 0 3px rgba(255,255,255,0.3);
      backdrop-filter: blur(8px);
    }
    .btn--confirm:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 28px rgba(0,80,160,0.5), 0 0 0 3px rgba(255,255,255,0.4); }
    .btn--confirm:disabled { background: rgba(100,100,120,0.5); box-shadow: none; }

    /* ---- Landing Screen ---- */
    .landing {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: calc(100vh - 56px); padding: 2rem; text-align: center;
    }
    .landing__title {
      font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 6vw, 4rem);
      font-weight: 800; color: var(--blue); margin-bottom: 0.5rem;
    }
    .landing__title span { color: var(--red); }
    .landing__subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 500px; }

    .mode-cards { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
    .mode-card {
      background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 1.5rem 2rem; text-align: center; width: 240px; transition: transform 0.2s, box-shadow 0.2s;
    }
    .mode-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .mode-card__icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
    .mode-card__title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 800; margin-bottom: 0.3rem; }
    .mode-card__desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; }
    .mode-card__plays { font-size: 0.8rem; color: var(--text-light); margin-bottom: 1rem; }

    /* ---- Daily Limit ---- */
    .daily-limit {
      display: none; flex-direction: column; align-items: center; justify-content: center;
      min-height: calc(100vh - 56px); padding: 2rem; text-align: center;
    }
    .daily-limit.active { display: flex; }
    .daily-limit__icon { font-size: 4rem; margin-bottom: 1rem; }
    .daily-limit__title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 800; color: var(--blue); margin-bottom: 0.5rem; }
    .daily-limit__text { color: var(--text-muted); margin-bottom: 1.5rem; max-width: 400px; }
    .daily-limit__countdown { font-size: 2rem; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }

    /* ---- Game Layout ---- */
    .game { display: none; }
    .game.active { display: block; }

    /* ---- Top HUD ---- */
    .game-hud {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.6rem 1.25rem;
      background: rgba(0,0,0,0.75); color: var(--white);
      backdrop-filter: blur(10px);
      position: relative; z-index: 15;
    }
    .game-hud__mode {
      font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.08em; opacity: 0.7;
    }
    .game-hud__score {
      font-size: 1.2rem; font-weight: 800; color: var(--gold);
      font-variant-numeric: tabular-nums;
    }

    /* Round progress dots */
    .round-dots {
      display: flex; gap: 6px; align-items: center;
    }
    .round-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,0.25); transition: all 0.3s;
    }
    .round-dot.active {
      background: var(--white); width: 12px; height: 12px;
      box-shadow: 0 0 8px rgba(255,255,255,0.5);
    }
    .round-dot.done-good { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
    .round-dot.done-ok { background: var(--gold); }
    .round-dot.done-bad { background: var(--red); }

    /* ---- Map Scene (full-bleed, centered) ---- */
    .map-scene {
      position: relative; width: 100%;
      height: calc(100dvh - 56px - 42px); /* dvh = dynamic viewport height (respects Safari bar) */
      overflow: hidden; isolation: isolate;
      background: #030810;
      touch-action: none; /* prevent page scroll on map */
    }
    /* Prevent body scroll when game is active */
    body.game-active { overflow: hidden; position: fixed; width: 100%; }

    /* Sea bg hidden — Leaflet tiles replace it */
    .sea-bg { display: none; }

    /* Leaflet map container */
    #cuba-map {
      position: absolute; z-index: 3;
      inset: 0; width: 100%; height: 100%;
    }
    .leaflet-control-zoom { display: none !important; }
    .leaflet-control-attribution { font-size: 9px !important; opacity: 0.5; }

    .zoom-controls {
      position: absolute; bottom: 1rem; right: 1rem; z-index: 1000;
      display: flex; flex-direction: column; gap: 0.3rem;
    }
    .zoom-btn {
      width: 36px; height: 36px; border: none; border-radius: 8px;
      background: rgba(255,255,255,0.9); color: var(--blue); font-size: 1.2rem; font-weight: 800;
      cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: flex;
      align-items: center; justify-content: center; transition: 0.2s;
    }
    .zoom-btn:hover { background: #fff; transform: scale(1.08); }

    /* Leaflet municipality styles via CSS on SVG paths */
    .selected-pulse {
      animation: selectedPulse 1.5s ease-in-out infinite;
    }
    @keyframes selectedPulse {
      0%, 100% { filter: drop-shadow(0 0 8px rgba(0,80,160,0.5)); }
      50% { filter: drop-shadow(0 0 16px rgba(0,80,160,0.8)); }
    }
    .correct-glow {
      animation: correctPulse 0.8s ease-out forwards;
    }
    @keyframes correctPulse {
      0% { filter: drop-shadow(0 0 0px rgba(34,197,94,0)); }
      50% { filter: drop-shadow(0 0 20px rgba(34,197,94,1)); }
      100% { filter: drop-shadow(0 0 12px rgba(34,197,94,0.8)); }
    }

    /* Map labels */
    .map-label {
      font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 700;
      color: #fff; white-space: nowrap; pointer-events: none;
      text-shadow: -1px -1px 3px rgba(0,0,0,0.8), 1px 1px 3px rgba(0,0,0,0.8);
    }

    /* Tooltip */
    .map-tooltip {
      position: absolute; background: rgba(10,10,30,0.92); color: var(--white);
      padding: 0.4rem 0.85rem; border-radius: 999px;
      font-size: 0.8rem; font-weight: 600; pointer-events: none;
      opacity: 0; transition: opacity 0.15s; z-index: 20; white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .map-tooltip.visible { opacity: 1; }

    /* Floating photo panel */
    .photo-panel {
      position: fixed; top: 5rem; left: 1rem; z-index: 15;
      background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
      border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.25);
      width: 340px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.5);
      transform-origin: top left;
      zoom: reset;
    }
    .photo-panel__img-wrap { width: 100%; aspect-ratio: 3/4; overflow: hidden; background: var(--sand); cursor: pointer; }
    .photo-panel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Expanded photo overlay */
    .photo-expanded {
      display: none; position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
      align-items: center; justify-content: center; padding: 1rem;
      cursor: pointer;
    }
    .photo-expanded.active { display: flex; }
    .photo-expanded img {
      max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      animation: modalSlideUp 0.3s ease-out;
    }

    /* Floating confirm button */
    .map-actions {
      position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 15;
    }

    /* ---- Round Result Modal ---- */
    .round-result {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      z-index: 200; align-items: center; justify-content: center; padding: 1rem;
    }
    .round-result.active { display: flex; }
    .round-result__card {
      background: var(--bg-card); border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 2rem;
      max-width: 440px; width: 100%; text-align: center;
      animation: modalSlideUp 0.35s ease-out;
    }
    @keyframes modalSlideUp {
      from { opacity: 0; transform: translateY(30px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .round-result__score {
      font-family: 'Playfair Display', serif;
      font-size: 3.5rem; font-weight: 800; color: var(--blue); margin-bottom: 0.15rem;
      animation: scoreCount 0.6s ease-out;
    }
    @keyframes scoreCount {
      from { opacity: 0; transform: scale(0.3); }
      60% { transform: scale(1.12); }
      to { opacity: 1; transform: scale(1); }
    }
    .round-result__score.perfect { color: var(--green); }
    .round-result__label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
    .round-result__province { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem; }
    .round-result__distance { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; }
    .round-result__ad { margin: 1rem 0; min-height: 90px; }

    /* ---- Game Over Modal ---- */
    .game-over {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      z-index: 200; align-items: center; justify-content: center; padding: 1rem;
    }
    .game-over.active { display: flex; }
    .game-over__card {
      background: var(--bg-card); border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 2rem;
      max-width: 480px; width: 100%; text-align: center;
      animation: modalSlideUp 0.35s ease-out;
    }
    .game-over__title {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem; font-weight: 800; color: var(--blue); margin-bottom: 0.5rem;
    }
    .game-over__total {
      font-family: 'Playfair Display', serif;
      font-size: 3.5rem; font-weight: 800; color: var(--gold); margin-bottom: 0.15rem;
      animation: scoreCount 0.6s ease-out;
    }
    .game-over__max { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; }
    .game-over__stars { font-size: 2rem; margin-bottom: 0.75rem; }
    .game-over__breakdown { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; text-align: left; }
    .game-over__round-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.5rem 0.75rem; background: #f9f7f4;
      border-radius: var(--radius-sm); font-size: 0.85rem;
    }
    .game-over__round-row .province { font-weight: 600; }
    .game-over__round-row .score { font-weight: 700; color: var(--blue); }
    .game-over__round-row .score.perfect { color: var(--green); }
    .game-over__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

    /* ---- Cupido Promo Popup ---- */
    .cupido-popup-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
      z-index: 500; align-items: center; justify-content: center; padding: 1rem;
    }
    .cupido-popup-overlay.active { display: flex; }
    .cupido-popup {
      background: linear-gradient(135deg, #1a1a2e, #252545);
      border-radius: 20px; padding: 2rem 1.75rem; max-width: 380px; width: 100%;
      text-align: center; color: #fff; position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      animation: modalSlideUp 0.4s ease-out;
    }
    .cupido-popup__close {
      position: absolute; top: 12px; right: 14px; background: none; border: none;
      color: rgba(255,255,255,0.5); font-size: 1.4rem; cursor: pointer; line-height: 1;
    }
    .cupido-popup__close:hover { color: #fff; }
    .cupido-popup__icon { font-size: 3rem; margin-bottom: 0.75rem; }
    .cupido-popup__title {
      font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800;
      background: linear-gradient(135deg, #ec4899, #f97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      margin-bottom: 0.5rem;
    }
    .cupido-popup__desc {
      font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.5; margin-bottom: 1.25rem;
    }
    .cupido-popup__steps {
      text-align: left; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem;
    }
    .cupido-popup__step {
      display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: rgba(255,255,255,0.85);
    }
    .cupido-popup__step-num {
      width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #ec4899, #f97316); font-weight: 800; font-size: 0.75rem; flex-shrink: 0;
    }
    .cupido-popup__cta {
      display: inline-block; padding: 0.75rem 2rem; border-radius: 30px; border: none;
      background: linear-gradient(135deg, #ec4899, #f97316); color: #fff;
      font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
    }
    .cupido-popup__cta:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(236,72,153,0.4); }
    .cupido-popup__skip {
      display: block; margin-top: 0.75rem; background: none; border: none;
      color: rgba(255,255,255,0.4); font-size: 0.8rem; cursor: pointer; font-family: inherit;
    }
    .cupido-popup__skip:hover { color: rgba(255,255,255,0.7); }

    .creator-card {
      margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sand);
      text-align: center;
    }
    .creator-card__cta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; font-weight: 700; }
    .creator-card__links { display: flex; gap: 1rem; justify-content: center; margin-bottom: 0.5rem; }
    .creator-link {
      display: flex; align-items: center; justify-content: center;
      width: 48px; height: 48px; border-radius: 14px;
      transition: transform 0.3s, box-shadow 0.3s;
      animation: socialFloat 3s ease-in-out infinite;
    }
    .creator-link:nth-child(1) {
      background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      color: #fff; box-shadow: 0 4px 15px rgba(225,48,108,0.4);
    }
    .creator-link:nth-child(2) {
      background: #25D366; color: #fff;
      box-shadow: 0 4px 15px rgba(37,211,102,0.4);
      animation-delay: 0.5s;
    }
    .creator-link:nth-child(3) {
      background: linear-gradient(135deg, var(--blue), var(--blue-light));
      color: #fff; box-shadow: 0 4px 15px rgba(0,80,160,0.4);
      animation-delay: 1s;
    }
    .creator-link:hover { transform: scale(1.15) translateY(-3px); }
    .creator-link:nth-child(1):hover { box-shadow: 0 8px 25px rgba(225,48,108,0.6); }
    .creator-link:nth-child(2):hover { box-shadow: 0 8px 25px rgba(37,211,102,0.6); }
    .creator-link:nth-child(3):hover { box-shadow: 0 8px 25px rgba(0,80,160,0.6); }
    @keyframes socialFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    .creator-card__web { font-size: 0.75rem; color: var(--text-light); margin-top: 0.25rem; }
    .creator-card__web a { color: var(--blue); font-weight: 700; text-decoration: none; }
    .creator-card__web a:hover { text-decoration: underline; }

    /* ---- Timer bar ---- */
    .timer-bar {
      position: absolute; top: 0; left: 0; right: 0; z-index: 20;
      height: 4px; background: rgba(0,0,0,0.2);
    }
    .timer-bar__fill {
      height: 100%; width: 100%;
      background: linear-gradient(90deg, var(--green), var(--gold), var(--red));
      transition: width 0.1s linear;
      border-radius: 0 2px 2px 0;
    }
    .timer-bar__fill.urgent { animation: timerPulse 0.5s ease-in-out infinite; }
    @keyframes timerPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .timer-display {
      position: absolute; top: 10px; right: 1rem; z-index: 20;
      font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 800;
      color: var(--white); text-shadow: 0 2px 8px rgba(0,0,0,0.5);
      font-variant-numeric: tabular-nums;
    }
    .timer-display.urgent { color: var(--red-light); animation: timerPulse 0.5s ease-in-out infinite; }

    /* ---- Level/Rank badge ---- */
    .rank-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      color: var(--white); padding: 0.35rem 0.85rem;
      border-radius: 999px; font-size: 0.8rem; font-weight: 700;
      box-shadow: 0 2px 10px rgba(37,99,235,0.3);
      margin-bottom: 1rem;
    }
    .rank-badge__icon { font-size: 1.1rem; }
    .xp-bar {
      width: 200px; height: 6px; background: rgba(0,0,0,0.1);
      border-radius: 3px; margin: 0.4rem auto 0; overflow: hidden;
    }
    .xp-bar__fill {
      height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light));
      border-radius: 3px; transition: width 0.5s ease;
    }
    .xp-bar__label {
      font-size: 0.7rem; color: var(--text-light); margin-top: 0.2rem;
    }

    /* ---- Province fact ---- */
    .province-fact {
      background: #f0f7ff; border-left: 3px solid var(--blue);
      padding: 0.6rem 0.8rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-size: 0.8rem; color: var(--text); text-align: left;
      margin-bottom: 1rem; line-height: 1.4;
    }
    .province-fact__icon { margin-right: 0.3rem; }

    /* ---- Confetti ---- */
    .confetti-container {
      position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden;
    }
    .confetti-piece {
      position: absolute; width: 10px; height: 10px;
      top: -20px; opacity: 1;
      animation: confettiFall 1.8s ease-in forwards;
    }
    @keyframes confettiFall {
      0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
    }

    /* ---- Feedback messages ---- */
    .feedback-msg {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      z-index: 250; pointer-events: none;
      font-family: 'Playfair Display', serif; font-weight: 800;
      font-size: clamp(2rem, 5vw, 3.5rem);
      text-shadow: 0 4px 20px rgba(0,0,0,0.3);
      animation: feedbackPop 1.2s ease-out forwards;
    }
    .feedback-msg.perfect { color: var(--green); }
    .feedback-msg.close { color: var(--gold); }
    .feedback-msg.far { color: var(--orange); }
    @keyframes feedbackPop {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
      30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
      60% { transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -70%) scale(0.9); }
    }
    @keyframes screenShake {
      0%, 100% { transform: translateX(0); }
      10% { transform: translateX(-6px) translateY(2px); }
      20% { transform: translateX(5px) translateY(-2px); }
      30% { transform: translateX(-4px) translateY(1px); }
      40% { transform: translateX(3px) translateY(-1px); }
      50% { transform: translateX(-2px); }
      60% { transform: translateX(1px); }
    }

    /* ---- Achievement Popup ---- */
    .achievement-popup {
      position: fixed; top: -80px; left: 50%; transform: translateX(-50%);
      z-index: 500; display: flex; align-items: center; gap: 0.75rem;
      background: linear-gradient(135deg, #1a1a2e, #252545);
      border: 2px solid var(--gold); border-radius: 14px;
      padding: 0.75rem 1.25rem; box-shadow: 0 8px 30px rgba(245,158,11,0.3);
      transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .achievement-popup.visible { top: 80px; }
    .achievement-popup__icon { font-size: 2rem; }
    .achievement-popup__title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 700; }
    .achievement-popup__name { font-size: 1rem; font-weight: 800; color: #fff; font-family: 'Playfair Display', serif; }
    .achievement-popup__detail { font-size: 0.75rem; color: #ccc; margin-top: 0.25rem; max-width: 260px; line-height: 1.3; }
    /* Special (Kristoff / vs Kristoff) popup */
    .achievement-popup--special {
      padding: 1rem 1.5rem; border-width: 3px;
      background: linear-gradient(135deg, #1a0a0a, #2d1020);
      border-color: #ef4444; box-shadow: 0 8px 40px rgba(239,68,68,0.4);
    }

    /* ---- Modal Overlay (shared) ---- */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem;
    }
    .modal-card {
      background: var(--bg-card); border-radius: 16px; box-shadow: var(--shadow-lg);
      padding: 1.5rem; width: 100%; animation: modalSlideUp 0.35s ease-out;
    }
    /* Room player row */
    .room-player {
      display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
      background: var(--bg); border-radius: var(--radius-sm); font-size: 0.85rem;
    }
    .room-player__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
    .room-player__name { flex: 1; font-weight: 600; }
    .room-player__host { font-size: 0.65rem; background: var(--gold); color: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; }
    .room-player__ready { color: var(--green); font-weight: 700; font-size: 0.8rem; }
    /* Multi result row */
    .multi-result-row {
      display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem;
      background: var(--bg); border-radius: var(--radius-sm);
    }
    .multi-result-row.winner { background: rgba(34,197,94,0.1); border: 2px solid var(--green); }
    .multi-result-rank { font-size: 1.2rem; width: 30px; text-align: center; }
    .multi-result-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
    .multi-result-name { flex: 1; font-weight: 700; font-size: 0.9rem; }
    .multi-result-score { font-weight: 800; color: var(--blue); font-size: 1rem; }

    /* ---- Cupido Card ---- */
    /* Cupido Card — mobile story ratio (9:16) */
    .cupido-card {
      position: relative; overflow: hidden; color: #fff;
      width: 320px; max-width: 90vw;
      aspect-ratio: 9 / 14;
      border-radius: 28px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(236,72,153,0.3);
      animation: modalSlideUp 0.4s ease-out, cupidoGlow 3s ease-in-out infinite;
    }
    @keyframes cupidoGlow {
      0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(236,72,153,0.3); }
      50% { box-shadow: 0 20px 70px rgba(0,0,0,0.7), 0 0 40px rgba(236,72,153,0.2), 0 0 0 1px rgba(236,72,153,0.5); }
    }
    .cupido-card__photo {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; display: block; z-index: 0;
    }
    /* Gradient overlay on photo */
    .cupido-card__overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 65%);
    }
    /* Badge top-left */
    .cupido-card__badge {
      position: absolute; top: 1rem; left: 1rem; z-index: 3;
      background: linear-gradient(135deg, #e8293f, #ec4899);
      padding: 0.25rem 0.9rem; border-radius: 20px; font-size: 0.65rem; font-weight: 800;
      letter-spacing: 2px; text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(236,72,153,0.4);
    }
    /* Socials overlay top-right */
    .cupido-card__socials {
      position: absolute; top: 1rem; right: 1rem; z-index: 3;
      display: flex; flex-direction: column; gap: 0.6rem;
    }
    .cupido-social-link {
      width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      color: #fff; text-decoration: none; backdrop-filter: blur(8px);
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
      animation: socialFloat 3s ease-in-out infinite;
    }
    .cupido-social-link svg { width: 22px; height: 22px; }
    .cupido-social-link:hover { transform: scale(1.2); }
    .cupido-social-link--ig {
      background: linear-gradient(135deg, rgba(240,148,51,0.9), rgba(220,39,67,0.9), rgba(188,24,136,0.9));
      box-shadow: 0 4px 16px rgba(225,48,108,0.5);
    }
    .cupido-social-link--wa {
      background: rgba(37,211,102,0.9);
      box-shadow: 0 4px 16px rgba(37,211,102,0.5);
      animation-delay: 0.3s;
    }
    .cupido-social-link--phone {
      background: rgba(74,144,217,0.9);
      box-shadow: 0 4px 16px rgba(0,80,160,0.5);
      animation-delay: 0.6s;
    }
    /* Bottom content over gradient */
    .cupido-card__body {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
      padding: 0 1.25rem 1.25rem; text-align: left;
    }
    .cupido-card__name {
      font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800;
      margin-bottom: 0.2rem; color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.9);
    }
    .cupido-card__bio {
      font-size: 0.85rem; color: rgba(255,255,255,0.9); line-height: 1.4; margin-bottom: 0.75rem;
      max-height: 60px; overflow-y: auto;
      text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 15px rgba(0,0,0,0.4);
    }
    .cupido-card__btn {
      background: linear-gradient(135deg, #e8293f, #ec4899) !important; border: none !important;
      width: 100%; padding: 0.75rem !important; font-size: 0.9rem !important;
      border-radius: 14px !important; letter-spacing: 0.5px;
      box-shadow: 0 4px 16px rgba(236,72,153,0.4);
    }

    /* ---- Stats Modal ---- */
    .stats-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      z-index: 200; align-items: center; justify-content: center; padding: 1rem;
    }
    .stats-overlay.active { display: flex; }
    .stats-card {
      background: var(--bg-card); border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 1.5rem;
      max-width: 400px; width: 100%; text-align: center;
      animation: modalSlideUp 0.35s ease-out;
      max-height: 85vh; overflow-y: auto;
    }
    .stats-card h2 {
      font-family: 'Playfair Display', serif; font-size: 1.2rem;
      font-weight: 800; color: var(--blue); margin-bottom: 0.75rem;
    }
    .stats-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;
    }
    .stat-box {
      background: #f9f7f4; border-radius: var(--radius-sm); padding: 0.75rem;
    }
    .stat-box__value {
      font-family: 'Playfair Display', serif; font-size: 1.5rem;
      font-weight: 800; color: var(--blue);
    }
    .stat-box__label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
    .streak-display {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: linear-gradient(135deg, #fff7ed, #fef3c7);
      border-radius: var(--radius); padding: 0.75rem; margin-bottom: 1rem;
      border: 1px solid #fde68a;
    }
    .streak-display__fire { font-size: 1.5rem; }
    .streak-display__count { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 800; color: #d97706; }
    .streak-display__label { font-size: 0.8rem; color: #92400e; }

    /* ---- Achievements Grid ---- */
    .achievements-section { margin-top: 0.75rem; text-align: left; }
    .achievements-section__header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 0.75rem;
    }
    .achievements-section__title {
      font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 800; color: var(--text);
    }
    .achievements-section__count { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
    .achievements-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 0.5rem;
    }
    .achievement-tile {
      display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.25rem;
      border-radius: 10px; background: #f9f7f4; cursor: pointer; transition: 0.2s; position: relative;
    }
    .achievement-tile:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .achievement-tile.locked { opacity: 0.35; filter: grayscale(1); }
    .achievement-tile__icon { font-size: 1.5rem; line-height: 1; }
    .achievement-tile__name {
      font-size: 0.55rem; font-weight: 700; color: var(--text-muted);
      margin-top: 0.2rem; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .achievement-tooltip {
      display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
      background: #1a1a2e; color: #fff; padding: 0.5rem 0.75rem; border-radius: 8px;
      font-size: 0.75rem; white-space: nowrap; z-index: 10; pointer-events: none;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    .achievement-tooltip::after {
      content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
      border: 5px solid transparent; border-top-color: #1a1a2e;
    }
    .achievement-tile:hover .achievement-tooltip { display: block; }

    /* ---- Achievement Categories ---- */
    .ach-category { margin-bottom: 0.75rem; }
    .ach-category__header {
      display: flex; align-items: center; gap: 0.4rem; cursor: pointer;
      padding: 0.35rem 0.5rem; border-radius: 8px; background: #f3f1ee;
      margin-bottom: 0.4rem; user-select: none; transition: background 0.15s;
    }
    .ach-category__header:hover { background: #ebe8e3; }
    .ach-category__arrow {
      font-size: 0.6rem; color: var(--text-muted); transition: transform 0.2s;
      width: 12px; text-align: center;
    }
    .ach-category.collapsed .ach-category__arrow { transform: rotate(-90deg); }
    .ach-category__label {
      font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
    }
    .ach-category__progress { font-size: 0.65rem; color: var(--blue); font-weight: 700; margin-left: auto; }
    .ach-category__grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 0.35rem;
    }
    .ach-category.collapsed .ach-category__grid { display: none; }

    /* Special category styles (Kristoff / vs Kristoff) */
    .ach-category__header--special {
      background: linear-gradient(135deg, #1a0a0a, #2d1020);
      border: 1px solid rgba(239,68,68,0.3);
    }
    .ach-category__header--special .ach-category__label { color: #f87171; }
    .ach-category__header--special .ach-category__arrow { color: #f87171; }
    .ach-category__header--special .ach-category__progress { color: #ef4444; }
    .ach-category__header--special:hover { background: linear-gradient(135deg, #2a0a0a, #3d1030); }
    .ach-category__grid--special {
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem;
    }
    .achievement-tile--special {
      background: linear-gradient(135deg, #1a0a0a, #1f1025);
      border: 1px solid rgba(239,68,68,0.2);
      padding: 0.6rem 0.4rem;
    }
    .achievement-tile--special:not(.locked) {
      border-color: rgba(239,68,68,0.5);
      box-shadow: 0 2px 10px rgba(239,68,68,0.15);
    }
    .achievement-tile--special .achievement-tile__icon { font-size: 1.8rem; }
    .achievement-tile--special .achievement-tile__name { color: #f87171; font-size: 0.6rem; }
    .achievement-tile--special .achievement-tooltip--special {
      background: linear-gradient(135deg, #1a0a0a, #2d1020);
      border: 1px solid #ef4444; max-width: 220px; white-space: normal; text-align: center;
    }
    .achievement-tile--special .achievement-tooltip--special::after { border-top-color: #1a0a0a; }

    /* ---- Player Profile Modal ---- */
    .player-profile-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      z-index: 300; align-items: center; justify-content: center; padding: 1rem;
    }
    .player-profile-overlay.active { display: flex; }
    .player-profile-card {
      background: var(--bg-card); border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 1.5rem;
      max-width: 400px; width: 100%; text-align: center;
      animation: modalSlideUp 0.35s ease-out;
      max-height: 85vh; overflow-y: auto;
    }
    .player-profile__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; text-align: left; }
    .player-profile__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blue); }
    .player-profile__name { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 800; }
    .player-profile__level { font-size: 0.85rem; color: var(--text-muted); }
    .player-profile__stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;
    }
    .player-profile__stat {
      background: #f9f7f4; border-radius: var(--radius-sm); padding: 0.5rem;
    }
    .player-profile__stat-val {
      font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 800; color: var(--blue);
    }
    .player-profile__stat-label { font-size: 0.65rem; color: var(--text-muted); }

    /* ---- Game Over mini-map ---- */
    .result-minimap {
      background: rgba(16,86,138,0.1); border-radius: var(--radius-sm);
      padding: 0.75rem; margin-bottom: 1rem;
    }
    .result-minimap svg { width: 100%; height: auto; }
    .result-minimap .province-path { fill: rgba(200,195,188,0.5); stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
    .result-minimap .province-path.mini-correct { fill: var(--green); filter: drop-shadow(0 0 4px rgba(34,197,94,0.5)); }
    .result-minimap .province-path.mini-wrong { fill: var(--orange); }
    .result-minimap .mini-marker {
      font-size: 7px; fill: #fff; text-anchor: middle; font-weight: 800;
      paint-order: stroke; stroke: rgba(0,0,0,0.5); stroke-width: 2px;
    }

    /* Stats button on landing */
    .stats-btn {
      background: none; border: 2px solid var(--blue); color: var(--blue);
      padding: 0.5rem 1.2rem; border-radius: var(--radius);
      font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
      margin-top: 1.5rem; transition: 0.2s;
    }
    .stats-btn:hover { background: var(--blue); color: var(--white); }

    /* ---- Login screen ---- */
    .login-screen {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: calc(100vh - 56px); padding: 2rem; text-align: center;
    }
    .login-screen__card {
      background: var(--bg-card); border-radius: 20px; padding: 2.5rem 2rem;
      box-shadow: var(--shadow-lg); max-width: 400px; width: 100%;
    }
    .login-screen__title {
      font-family: 'Playfair Display', serif; font-size: 2.5rem;
      font-weight: 800; color: var(--blue); margin-bottom: 0.3rem;
    }
    .login-screen__title span { color: var(--red); }
    .login-screen__desc { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem; }
    .btn--google {
      background: #fff; color: #444; border: 2px solid #ddd;
      padding: 0.75rem 1.5rem; border-radius: var(--radius);
      font-family: inherit; font-size: 0.95rem; font-weight: 600;
      cursor: pointer; transition: 0.2s; width: 100%;
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    }
    .btn--google:hover { border-color: #4285f4; box-shadow: 0 2px 12px rgba(66,133,244,0.2); }
    .btn--google svg { width: 20px; height: 20px; }
    .btn--guest {
      background: transparent; color: var(--text-muted); border: 2px dashed #ccc;
      padding: 0.65rem 1.5rem; border-radius: var(--radius);
      font-family: inherit; font-size: 0.9rem; font-weight: 600;
      cursor: pointer; transition: 0.2s; width: 100%; margin-top: 0.75rem;
    }
    .btn--guest:hover { border-color: var(--blue); color: var(--blue); }
    .login-screen__guest-note { font-size: 0.75rem; color: var(--text-light); margin-top: 0.5rem; }
    .guest-upgrade-banner {
      background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #93c5fd;
      border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 1rem;
      display: flex; align-items: center; gap: 0.6rem; cursor: pointer; transition: 0.2s;
    }
    .guest-upgrade-banner:hover { box-shadow: 0 2px 10px rgba(59,130,246,0.2); }
    .guest-upgrade-banner__text { font-size: 0.8rem; color: #1e40af; font-weight: 600; }
    .guest-upgrade-banner__icon { font-size: 1.1rem; }

    /* ---- User profile on landing ---- */
    .user-profile {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .user-profile__avatar {
      width: 44px; height: 44px; border-radius: 50%;
      border: 2px solid var(--blue); object-fit: cover;
    }
    .user-profile__info { text-align: left; }
    .user-profile__name { font-weight: 700; font-size: 0.95rem; }
    .user-profile__logout {
      background: none; border: none; color: var(--text-light);
      font-size: 0.75rem; cursor: pointer; text-decoration: underline;
    }

    /* ---- Leaderboard ---- */
    .leaderboard {
      background: var(--bg-card); border-radius: var(--radius);
      box-shadow: var(--shadow); padding: 1rem; margin-top: 1.5rem;
      max-width: 500px; width: 100%;
    }
    .lb-tabs {
      display: flex; gap: 0.4rem; margin-bottom: 0.75rem;
    }
    .lb-tab {
      flex: 1; padding: 0.4rem 0.5rem; border: 2px solid var(--sand-dark); border-radius: var(--radius-sm);
      background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.75rem;
      font-weight: 700; cursor: pointer; transition: 0.2s; text-align: center;
    }
    .lb-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
    .lb-tab:hover:not(.active) { border-color: var(--blue-light); color: var(--blue); }
    .leaderboard__title {
      font-weight: 800; font-size: 0.85rem; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.75rem;
      text-align: center;
    }
    .leaderboard__row {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.45rem 0.5rem; border-radius: var(--radius-sm);
      font-size: 0.85rem;
    }
    .leaderboard__row:nth-child(even) { background: #f9f7f4; }
    .leaderboard__rank { width: 24px; font-weight: 800; color: var(--text-muted); text-align: center; }
    .leaderboard__row:nth-child(2) .leaderboard__rank { color: var(--gold); font-size: 1.1rem; }
    .leaderboard__row:nth-child(3) .leaderboard__rank { color: #94a3b8; }
    .leaderboard__row:nth-child(4) .leaderboard__rank { color: #b45309; }
    .leaderboard__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
    .leaderboard__name { flex: 1; font-weight: 600; }
    .leaderboard__score { font-weight: 800; color: var(--blue); }
    .leaderboard__you { background: rgba(0,80,160,0.06) !important; }

    /* Hide footer when game is active */
    .game.active ~ .footer { display: none; }

    /* ---- Ad Containers ---- */
    .ad-container { max-width: 728px; margin: 1.5rem auto; text-align: center; min-height: 90px; }

    /* ---- Footer ---- */
    .footer {
      text-align: center; padding: 2rem 1rem; font-size: 0.8rem;
      color: var(--text-light); border-top: 1px solid #eae6e0; margin-top: 2rem;
    }
    .footer a { color: var(--blue); text-decoration: none; }

    /* ---- Responsive ---- */
    @media (max-width: 768px) {
      .photo-panel {
        position: absolute; width: 180px; top: 0.5rem; left: 0.5rem;
        border-radius: 10px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.3);
        zoom: unset;
      }
      .photo-panel__img-wrap { aspect-ratio: 3/4; }
      .game-hud { padding: 0.5rem 0.75rem; }
      .game-hud__score { font-size: 1rem; }
      .round-result__card, .game-over__card { padding: 1.25rem; }
      .round-result__score { font-size: 2.5rem; }
      .game-over__total { font-size: 2.5rem; }
      .mode-cards { gap: 1rem; }
      .mode-card { width: 200px; padding: 1.25rem 1.5rem; }
    }
    @media (max-width: 480px) {
      .header { padding: 0 0.75rem; height: 44px; }
      .header__logo { font-size: 1rem; }
      .header__nav { display: none; }
      /* Hide ALL ads on mobile */
      .ad-container { display: none !important; }
      /* Photo panel — small, compact, top-left */
      .photo-panel {
        position: absolute; width: 100px; top: 0.3rem; left: 0.3rem;
        border-radius: 8px; zoom: unset;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      }
      .photo-panel__img-wrap { aspect-ratio: 3/4; }
      /* Full bleed map — dvh for Safari */
      .map-scene { height: calc(100dvh - 44px - 34px); }
      .game-hud { padding: 0.3rem 0.5rem; height: 34px; }
      .game-hud__mode { font-size: 0.7rem; }
      .game-hud__score { font-size: 0.9rem; }
      .round-dot { width: 8px; height: 8px; }
      .btn--confirm { padding: 0.6rem 1.5rem; font-size: 0.85rem; }
      .map-actions { bottom: env(safe-area-inset-bottom, 0.75rem); padding-bottom: 0.5rem; }
      /* Zoom controls smaller */
      .zoom-controls { bottom: 0.5rem; right: 0.5rem; }
      .zoom-btn { width: 32px; height: 32px; font-size: 1rem; }
      /* Landing */
      .landing__title { font-size: 1.8rem; }
      .landing__subtitle { font-size: 0.85rem; }
      .mode-card { width: 100%; max-width: 280px; }
      .mode-cards { gap: 0.75rem; }
      .stats-btn { margin-top: 0.75rem; }
      /* Modals compact */
      .round-result__card, .game-over__card { padding: 1rem; }
      .round-result__score { font-size: 1.8rem; }
      .game-over__total { font-size: 1.8rem; }
      .feedback-msg { font-size: 1.6rem !important; }
      /* Timer bar thinner */
      .timer-bar { height: 3px; }
      .timer-display { font-size: 0.75rem; top: 4px; }
      /* Creator card compact */
      .creator-card { padding: 0.75rem !important; }
      .creator-card__cta { font-size: 0.75rem; }
      .creator-link { width: 40px; height: 40px; }
      /* Leaderboard compact */
      .leaderboard { padding: 0.75rem; }
      .lb-tab { font-size: 0.65rem; padding: 0.3rem 0.4rem; }
    }
    /* Landscape mobile */
    @media (max-height: 500px) {
      .ad-container { display: none !important; }
      .map-scene { height: calc(100dvh - 44px); }
      .game-hud { padding: 0.25rem 0.5rem; height: 30px; }
      .photo-panel { position: absolute; width: 80px; top: 0.2rem; left: 0.2rem; zoom: unset; }
      .photo-panel__img-wrap { aspect-ratio: 1; }
      .map-actions { bottom: 0.4rem; }
      .btn--confirm { padding: 0.4rem 1.2rem; font-size: 0.8rem; }
    }
  </style>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="/cubanguesser/js/provinces.js?v=10" defer></script>
  <script src="/cubanguesser/js/municipalities.js?v=10" defer></script>
  <script src="/cubanguesser/js/game.js?v=10" defer></script>
</head>
<body>
<!--

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░▓████████████████████████▒░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▓█████▓▒░░░░░░░░░░░░░░░▒██████▒░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░████▒░░░░░░░░░░░░░░░░░░░░░░░░░▓███▒░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░███░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███░░░░░░░░░░░░░░░
░░░░░░░░░░░░░▒██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒██░░░░░░░░░░░░░░
░░░░░░░░░░░░▒██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░░░░░░░░
░░░░░░░░░░░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░░░░░░░░
░░░░░░░░░░░██▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒░░██░░░░░░░░░░░░
░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░
░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░
░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░
░░░░░░░░░░░██▒░██▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██▓░▒██░░░░░░░░░░░
░░░░░░░░░░░░██░░██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░██░░░░░░░░░░░░
░░░░░░░░░░░░██▒░██░░░░░▒▒▓███▒░░░░░░░▒███▓▒▒░░░░░██░▓██░░░░░░░░░░░░
░░░░░░░░░░░░░██░██░░██████████▒░░░░░▓██████████░░██▒██░░░░░░░░░░░░░
░░░░░░░░░░░░░░████░████████████░░░░░████████████░████░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░███░▒██████████░░░░░░░██████████▒░██▒░░░░░░░░░▒░░░░░
░░░▒████░░░░░░░▓█▒░░█████████░░░░░░░░░█████████░░▒█▓░░░░░░▓████░░░░
░░░██░▒██▒░░░░░██░░░░██████▓░░░░█░█░░░░███████░░░░██░░░░░███░░██░░░
░░░██░░░██▓░░░░██░░░░░░▒▓▓░░░░▒██░██░░░░░▓▓▒░░░░░▒██░░░░███░░░██░░░
░▓██▒░░░░████▓░░██░░░░░░░░░░░░███░███░░░░░░░░░░░░██░░█████░░░░▓██▒░
██▓░░░░░░░░▒████████▓░░░░░░░░████░███▓░░░░░░░▒▓████████░░░░░░░░░███
██▓▒▓███▓░░░░░░▓████████▓░░░░████░███▓░░░░▓████████▓░░░░░░████▓▓███
░███████████▒░░░░░░███████░░░░██░░░██░░░░██████▓░░░░░░▓███████████░
░░░░░░░░░░▓█████░░░░██▓▓░██░░░░░░░░░░░░░██░█▒██░░░▒█████▓░░░░░░░░░░
░░░░░░░░░░░░░▒█████▒▒█▓█░███▓▓▒▒▒▓▒▒▓▓▓███▒███░▓█████░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▒████▒▓█▒▒█░█▒█░█░█▓█▒█▓░█░█████▒░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░██░░██▓█▓█▓█▒█▒█▓█▓████░▓█▓░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▓████▓░▓█▓█░█▒█░█░█▒█▒███▒░██████░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░▓█████░░██░░░▒█████▓█▓█████▒░░░██░▒█████▓░░░░░░░░░░░░░
░░░░▒██████████▓░░░░░███░░░░░░░░░░░░░░░░░░░██▒░░░░░▓██████████▒░░░░
░░░░██░░░▓▓▓░░░░░░▒██████▓░░░░░░░░░░░░░░░███████▒░░░░░░▓▓▒░░▒██░░░░
░░░░▓██░░░░░░░░▓████▓░░░█████▒░░░░░░▒▓█████░░░▓████▓░░░░░░░▒██▓░░░░
░░░░░░███░░░░████▒░░░░░░░░▓█████████████▒░░░░░░░░▒████░░░░███░░░░░░
░░░░░░░██░░░██▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓██░░░██░░░░░░░
░░░░░░░██▒▓██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒██▒▓██░░░░░░░
░░░░░░░░████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

███████████████████████████
███████▀▀▀░░░░░░░▀▀▀███████
████▀░░░░░░░░░░░░░░░░░▀████
███│░░░░░░░░░░░░░░░░░░░│███
██▌│░░░░░░░░░░░░░░░░░░░│▐██
██░└┐░░░░░░░░░░░░░░░░░┌┘░██
██░░└┐░░░░░░░░░░░░░░░┌┘░░██
██░░┌┘▄▄▄▄▄░░░░░▄▄▄▄▄└┐░░██
██▌░│██████▌░░░▐██████│░▐██
███░│▐███▀▀░░▄░░▀▀███▌│░███
██▀─┘░░░░░░░▐█▌░░░░░░░└─▀██
██▄░░░▄▄▄▓░░▀█▀░░▓▄▄▄░░░▄██
████▄─┘██▌░░░░░░░▐██└─▄████
█████░░▐█─┬┬┬┬┬┬┬─█▌░░█████
████▌░░░▀┬┼┼┼┼┼┼┼┬▀░░░▐████
█████▄░░░└┴┴┴┴┴┴┴┘░░░▄█████
███████▄░░░░░░░░░░░▄███████
██████████▄▄▄▄▄▄▄██████████
███████████████████████████

              YOU SHOULD NOT BE HERE  ·  MarquisDeSade  ·  TortillaTV  ·  ☠


⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣀⡤⠤⠴⠶⠶⠒⠶⠶⠦⠤⢤⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣤⢶⠟⠫⠅⠐⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢽⣛⠶⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣠⡴⠟⢋⡵⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣈⠛⢷⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣠⡾⠋⢀⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠑⢄⠈⠻⣦⡀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⠋⢀⠔⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⢦⡘⢻⣆⠀⠀⠀⠀⠀
⠀⠀⠀⣠⡞⢁⡴⢃⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠒⠙⣷⡀⠀⠀⠀
⠀⠀⣰⠏⢰⠏⠀⠀⠃⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢷⡄⠀⠀
⠀⣸⠏⢠⣿⢠⣄⠀⠘⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠀⠈⢿⡄⠀
⢠⡏⢀⢿⣯⠀⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠈⣷⠀
⣾⠀⢼⣿⣿⡀⠹⣿⣶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⠀⠀⠀⢸⡇
⡿⠀⠀⢿⣿⣇⠀⢿⣾⡷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⣇
⣇⠀⠀⠼⣿⣿⠀⠸⣯⣶⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀⣿
⣿⠀⠘⢿⣿⣿⣇⠀⢿⣿⠷⠖⠓⠲⠆⠀⠠⠾⢶⣄⠀⠀⠀⠀⠀⠀⣠⡴⠖⠙⠋⠉⠁⠀⠀⠀⠀⠀⠀⠀⣿⡁⠀⠀⠀⢠⡟
⢻⡆⠀⢹⣿⣿⡿⠂⠀⠀⠀⠀⠀⣀⠀⢤⠀⠀⠀⠀⠁⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡀⠀⠄⠀⠀⠀⠀⠘⣿⣺⠀⠀⠀⣼⠃
⠘⣷⠀⠘⢿⣿⡄⠀⢀⣠⣤⣴⣾⣿⣿⣿⣷⣦⣤⣀⣀⣷⣤⣼⣧⠀⣀⣤⣤⣶⣾⣿⣷⣶⣦⣤⣄⡀⠀⠀⢻⡗⠀⠀⢀⡿⠀
⠀⠸⣧⠀⠈⢿⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠈⡇⢈⡿⢦⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⢻⠃⠀⢀⣼⠃⠀
⠀⠀⠙⢷⣤⣿⣶⣶⣶⣶⢦⣄⡹⡄⠀⠀⠀⠳⡘⢿⣿⠗⣿⡿⢣⠏⠀⠀⠀⡠⢊⣤⣶⣶⣶⣾⣷⣤⣤⡴⠋⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠻⣷⣤⣿⣶⣶⣶⣶⢦⣄⡹⡄⠀⠙⠿⣷⣄⣤⣅⡀⠀⠀⡠⢊⣤⣶⣶⣶⣾⣷⣤⣤⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠙⢷⣄⣀⠀⠀⢀⠀⠀⠀⠉⠻⠿⠛⠉⠁⠀⠀⠀⡀⠀⠀⣷⣠⣤⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠳⣦⡀⠙⠢⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⡴⠚⠁⢀⣴⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⢷⣄⠀⠉⠁⠀⠀⠒⠒⠈⠗⠃⢀⣠⡶⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⠶⠶⠶⠶⠶⠶⠶⣶⡶⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀


    ██████████████████████████████████████████████████████████████████████████████████████████████
    ██                                                                                        ██
    ██                                    ████████████                                        ██
    ██                                ████████████████████                                    ██
    ██                              ██████████████████████████                                ██
    ██                           █████████████████████████████████                            ██
    ██                          ████████████████████████████████████                          ██
    ██                         ██████████████████████████████████████                         ██
    ██                        ████████████████████████████████████████                        ██
    ██                        ████████████████████████████████████████                        ██
    ██                       ██████████████████████████████████████████                       ██
    ██                       ██████████████████████████████████████████                       ██
    ██                       ██████████████████████████████████████████                       ██
    ██                       ██████████     ████████     ██████████████                       ██
    ██                       ████████         ████         ████████████                       ██
    ██                       ███████    ████   ██   ████    ███████████                       ██
    ██                       ███████   ██████  ██  ██████   ███████████                       ██
    ██                       ███████   ██████  ██  ██████   ███████████                       ██
    ██                       ███████    ████   ██   ████    ███████████                       ██
    ██                       ████████         ████         ████████████                       ██
    ██                       ██████████     ████████     ██████████████                       ██
    ██                       ██████████████████████████████████████████                       ██
    ██                        ████████████████████████████████████████                        ██
    ██                        ████████████████████████████████████████                        ██
    ██                         ████████████████  ████████████████████                         ██
    ██                          ██████████████    ██████████████████                          ██
    ██                           ████████████  ██  ██████████████                             ██
    ██                            ██████████  ████  ████████████                              ██
    ██                              ████████  ████  ██████████                                ██
    ██                                ██████ ██████ ████████                                  ██
    ██                                  ████████████████                                      ██
    ██                                    ████████████                                        ██
    ██                                      ████████                                          ██
    ██                                        ████                                            ██
    ██                                         ██                                             ██
    ██                                                                                        ██
    ██                   █████                                    █████                        ██
    ██                ██████████                                ██████████                     ██
    ██              ██████████████                            ██████████████                   ██
    ██            ████████████████████                    ████████████████████                 ██
    ██              ██████████████████████████████████████████████████████                     ██
    ██                  ████████████████████████████████████████████████                       ██
    ██                      ████████████████████████████████████████                           ██
    ██                  ████████████████████████████████████████████████                       ██
    ██              ██████████████████████████████████████████████████████                     ██
    ██            ████████████████████                    ████████████████████                 ██
    ██              ██████████████                            ██████████████                   ██
    ██                ██████████                                ██████████                     ██
    ██                   █████                                    █████                        ██
    ██                                                                                        ██
    ██                                                                                        ██
    ██          ╔═══════════════════════════════════════════════════════════╗                   ██
    ██          ║     YOU SHOULD NOT BE HERE  ·  MarquisDeSade  ·  ☠      ║                   ██
    ██          ╚═══════════════════════════════════════════════════════════╝                   ██
    ██                                                                                        ██
    ██                                                                                        ██
    ██████████████████████████████████████████████████████████████████████████████████████████████
    ██████████████████████████████████████████████████████████████████████████████████████████████


                                              |
                                             _|_
                                            /   \
                                           /_____\
                                      ___|/_______\___|_
                                     |  __|       |__  |
                                     | |  | ☠   ☠ |  | |
                                     | |  |  ___  |  | |
                                     | |__|_/   \_|__| |
                                     |_____|     |_____|
                                          |       |
                                     |    |       |    |
                                    .|    |       |    |.
                                   .:|    |       |    |:.
                                  .::| ___|_______|___ |::.
                                 .:::||               ||:::.
                                .::::||               ||::::.
                               .:::::||               ||:::::.
                               |:::::||               ||:::::|
                     ____......|:::::||               ||:::::|......____
              _.-"""           |:::::||               ||:::::|           """"-._
           .-'                 |:::::||               ||:::::|                 '-.
          /                    |:::::||               ||:::::|                    \
        _/                      \:::||               ||:::/                      \_
       /  \                      \::||               ||::/                      /  \
      /    \                      \.||               ||./                      /    \
     /      \__                    |/               \|                    __/      \
    /          """"---_____________|_________________|_____________---""""          \
   (                                                                               )
    \                                                                             /
     \_                                                                         _/
       """"----_________                                       _________----""""
                        """"""""-------.................-------""""""""
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                          MarquisDeSade  ·  Mariconcito si lees esto·  ☠


-->

  <!-- Header -->
  <header class="header">
    <a href="/cubanguesser/" class="header__logo">Cuban<span>Guesser</span></a>
    <div class="header__stats">
      <button class="btn--back" id="btn-back" style="display:none" title="Volver">&#8592; Volver</button>
    </div>
    <nav class="header__nav">
      <a href="/cubanguesser/" class="active">Jugar</a>
      <a href="/cubanguesser/submit.html">Enviar Ronda</a>
    </nav>
  </header>

  <!-- Login Screen (shown when not logged in) -->
  <section class="login-screen" id="screen-login">
    <div class="login-screen__card">
      <h1 class="login-screen__title">Cuban<span>Guesser</span></h1>
      <p class="login-screen__desc">Adivina de que provincia de Cuba es cada foto. Inicia sesion para jugar y guardar tu progreso.</p>
      <button class="btn--google" id="btn-google-login">
        <svg viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
        Continuar con Google
      </button>
      <button class="btn--guest" id="btn-guest-login">Jugar como Invitado</button>
      <p class="login-screen__guest-note">1 partida diaria sin cuenta</p>
    </div>
  </section>

  <!-- Landing Screen (shown when logged in) -->
  <section class="landing" id="screen-landing" style="display:none">
    <h1 class="landing__title">Cuban<span>Guesser</span></h1>

    <!-- Guest upgrade banner -->
    <div class="guest-upgrade-banner" id="guest-upgrade-banner" style="display:none;" onclick="document.getElementById('btn-google-login').click(); document.getElementById('screen-login').style.display='';">
      <span class="guest-upgrade-banner__icon">🔓</span>
      <span class="guest-upgrade-banner__text">Inicia sesion con Google para partidas ilimitadas y multijugador</span>
    </div>

    <!-- User profile -->
    <div class="user-profile" id="user-profile">
      <img class="user-profile__avatar" id="user-avatar" src="" alt="">
      <div class="user-profile__info">
        <div class="user-profile__name" id="user-name"></div>
        <button class="user-profile__logout" id="btn-logout">Cerrar sesion</button>
      </div>
    </div>

    <div class="rank-badge" id="rank-badge"><span class="rank-badge__icon">&#127758;</span> <span id="rank-name">Turista</span></div>
    <div class="xp-bar"><div class="xp-bar__fill" id="xp-fill" style="width:0%"></div></div>
    <div class="xp-bar__label" id="xp-label">0 / 5,000 XP</div>

    <a href="/cubanguesser/submit.html" class="btn btn--primary" style="margin-top:1rem;">&#128248; Crear Niveles</a>

    <div class="mode-cards">
      <div class="mode-card">
        <div class="mode-card__icon">&#128100;</div>
        <h3 class="mode-card__title">Personas</h3>
        <p class="mode-card__desc">Adivina el municipio de cada persona</p>
        <button class="btn btn--primary" id="btn-play-personas">Jugar</button>
      </div>
      <div class="mode-card">
        <div class="mode-card__icon">&#127961;</div>
        <h3 class="mode-card__title">Lugares</h3>
        <p class="mode-card__desc">Adivina el municipio de cada lugar</p>
        <button class="btn btn--primary btn--red" id="btn-play-lugares">Jugar</button>
      </div>
    </div>

    <!-- Creator socials -->
    <div class="creator-card" style="max-width:400px;margin:1.25rem auto 0;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;">
      <p class="creator-card__cta">Sigueme o hablame para tu negocio</p>
      <div class="creator-card__links">
        <a href="https://www.instagram.com/marquisdsad3/" target="_blank" rel="noopener" class="creator-link" title="Instagram">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
        </a>
        <a href="https://wa.me/9087525839" target="_blank" rel="noopener" class="creator-link" title="WhatsApp">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        </a>
        <a href="https://sadestudio.design" target="_blank" rel="noopener" class="creator-link" title="Web">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
        </a>
      </div>
      <p class="creator-card__web">Para tu propia web: <a href="https://sadestudio.design" target="_blank">sadestudio.design</a></p>
    </div>

    <!-- Leaderboard -->
    <div class="leaderboard" id="leaderboard">
      <div class="leaderboard__title">Ranking Global</div>
      <div class="lb-tabs">
        <button class="lb-tab active" data-sort="avgScore">Promedio</button>
        <button class="lb-tab" data-sort="totalScore">Puntos Totales</button>
        <button class="lb-tab" data-sort="xp">Nivel</button>
      </div>
      <div id="leaderboard-rows">Cargando...</div>
    </div>

    <button class="stats-btn" id="btn-stats">Mis Estadisticas</button>
  </section>

  <!-- Stats Modal -->
  <div class="stats-overlay" id="modal-stats">
    <div class="stats-card">
      <h2>Tus Estadisticas</h2>
      <div class="streak-display">
        <span class="streak-display__fire">&#128293;</span>
        <span class="streak-display__count" id="stat-streak">0</span>
        <span class="streak-display__label">dias seguidos</span>
      </div>
      <div class="stats-grid">
        <div class="stat-box">
          <div class="stat-box__value" id="stat-games">0</div>
          <div class="stat-box__label">Partidas</div>
        </div>
        <div class="stat-box">
          <div class="stat-box__value" id="stat-best">0</div>
          <div class="stat-box__label">Mejor Score</div>
        </div>
        <div class="stat-box">
          <div class="stat-box__value" id="stat-avg">0</div>
          <div class="stat-box__label">Promedio</div>
        </div>
        <div class="stat-box">
          <div class="stat-box__value" id="stat-perfect">0</div>
          <div class="stat-box__label">Provincias Exactas</div>
        </div>
      </div>
      <!-- Achievements Grid -->
      <div class="achievements-section">
        <div class="achievements-section__header">
          <span class="achievements-section__title">Logros</span>
          <span class="achievements-section__count" id="achievements-count">0/28</span>
        </div>
        <div class="achievements-grid" id="achievements-grid"></div>
      </div>

      <button class="btn btn--primary btn--small" id="btn-close-stats" style="margin-top:1rem;">Cerrar</button>
    </div>
  </div>

  <!-- Player Profile Modal -->
  <div class="player-profile-overlay" id="modal-player-profile">
    <div class="player-profile-card">
      <div class="player-profile__header">
        <img class="player-profile__avatar" id="pp-avatar" src="" alt="">
        <div>
          <div class="player-profile__name" id="pp-name"></div>
          <div class="player-profile__level" id="pp-level"></div>
        </div>
      </div>
      <div class="player-profile__stats">
        <div class="player-profile__stat">
          <div class="player-profile__stat-val" id="pp-games">0</div>
          <div class="player-profile__stat-label">Partidas</div>
        </div>
        <div class="player-profile__stat">
          <div class="player-profile__stat-val" id="pp-best">0</div>
          <div class="player-profile__stat-label">Mejor Score</div>
        </div>
        <div class="player-profile__stat">
          <div class="player-profile__stat-val" id="pp-duels">0</div>
          <div class="player-profile__stat-label">Duelos Ganados</div>
        </div>
      </div>
      <div class="achievements-section">
        <div class="achievements-section__header">
          <span class="achievements-section__title">Logros</span>
          <span class="achievements-section__count" id="pp-achievements-count">0/28</span>
        </div>
        <div class="achievements-grid" id="pp-achievements-grid"></div>
      </div>
      <button class="btn btn--primary btn--small" id="btn-close-profile" style="margin-top:1rem;">Cerrar</button>
    </div>
  </div>

  <!-- Daily Limit Screen -->
  <section class="daily-limit" id="screen-limit" style="display:none">
    <div class="daily-limit__icon">&#9203;</div>
    <h2 class="daily-limit__title">Vuelve manana</h2>
    <p class="daily-limit__text" id="limit-text">Ya usaste tu partida de hoy. Regresa manana para seguir jugando.</p>
    <div id="guest-limit-upgrade" style="display:none;margin-bottom:1.25rem;">
      <button class="btn btn--primary" id="btn-guest-upgrade" style="padding:0.75rem 2rem;">
        <svg viewBox="0 0 24 24" width="18" height="18" style="margin-right:0.4rem;vertical-align:middle;"><path fill="#fff" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#fff" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/></svg>
        Iniciar sesion para jugar mas
      </button>
      <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">Partidas ilimitadas + multijugador + leaderboard</p>
    </div>
    <div class="daily-limit__countdown" id="countdown"></div>
  </section>

  <!-- Game Screen -->
  <section class="game" id="screen-game" style="display:none">
    <!-- HUD bar -->
    <div class="game-hud">
      <div class="game-hud__mode" id="game-mode-label">Personas</div>
      <div class="round-dots" id="round-dots"></div>
      <div class="game-hud__score" id="total-score">0</div>
    </div>

    <!-- Full-bleed Map Scene -->
    <div class="map-scene">
      <div class="sea-bg"></div>

      <!-- Timer bar (multiplayer only) -->
      <div class="timer-bar" id="timer-bar" style="display:none;">
        <div class="timer-bar__fill" id="timer-fill"></div>
        <span class="timer-display" id="timer-display">30</span>
      </div>

      <!-- Photo panel floating -->
      <div class="photo-panel">
        <div class="photo-panel__img-wrap" id="photo-panel-click">
          <img class="photo-panel__img" id="round-photo" src="" alt="Persona">
        </div>
      </div>
      <!-- Expanded photo overlay -->
      <div class="photo-expanded" id="photo-expanded">
        <img id="photo-expanded-img" src="" alt="">
      </div>

      <!-- Leaflet Map -->
      <div id="cuba-map"></div>
      <div class="map-tooltip" id="map-tooltip"></div>

      <!-- Zoom controls -->
      <div class="zoom-controls">
        <button class="zoom-btn" id="btn-zoom-in" title="Acercar">+</button>
        <button class="zoom-btn" id="btn-zoom-out" title="Alejar">&minus;</button>
        <button class="zoom-btn" id="btn-zoom-reset" title="Resetear" style="font-size:0.8rem;">&#8634;</button>
      </div>

      <!-- Confirm button floating -->
      <div class="map-actions">
        <button class="btn btn--confirm" id="btn-confirm" disabled>Confirmar</button>
      </div>
    </div>

    <!-- Ad below game area -->
    <div class="ad-container" id="ad-game-bottom">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9111680160617343"
           data-ad-slot="1234567890" data-ad-format="horizontal" data-full-width-responsive="true"></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>
  </section>

  <!-- Round Result Modal -->
  <div class="round-result" id="modal-round-result">
    <div class="round-result__card">
      <div class="round-result__score" id="result-score">0</div>
      <div class="round-result__label">puntos</div>
      <div class="round-result__province" id="result-province"></div>
      <div class="round-result__distance" id="result-distance"></div>
      <div class="province-fact" id="result-fact" style="display:none"><span class="province-fact__icon">&#128161;</span><span id="fact-text"></span></div>
      <div class="round-result__ad" id="ad-between-rounds">
        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9111680160617343"
             data-ad-slot="1234567893" data-ad-format="fluid" data-ad-layout="in-article"></ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
      </div>
      <button class="btn btn--primary" id="btn-next-round">Siguiente Ronda</button>
    </div>
  </div>

  <!-- Game Over Modal -->
  <div class="game-over" id="modal-game-over">
    <div class="game-over__card">
      <h2 class="game-over__title">Resultado Final</h2>
      <div class="game-over__total" id="final-total">0</div>
      <div class="game-over__max">de 50,000 puntos posibles</div>
      <div class="game-over__stars" id="final-stars"></div>
      <div class="result-minimap" id="result-minimap"></div>
      <div class="game-over__breakdown" id="final-breakdown"></div>
      <div class="game-over__actions">
        <button class="btn btn--primary" id="btn-play-again">Revancha</button>
        <button class="btn btn--secondary btn--small" id="btn-share">Compartir</button>
        <button class="btn btn--small" id="btn-duel" style="background:var(--orange);color:#fff;">Retar Amigo</button>
        <button class="btn btn--small" id="btn-exit-game" style="background:var(--text-muted);color:#fff;">Salir</button>
      </div>

      <!-- Creator socials -->
      <div class="creator-card">
        <p class="creator-card__cta">Sigueme o hablame para tu negocio</p>
        <div class="creator-card__links">
          <a href="https://www.instagram.com/marquisdsad3/" target="_blank" rel="noopener" class="creator-link" title="Instagram">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
          </a>
          <a href="https://wa.me/9087525839" target="_blank" rel="noopener" class="creator-link" title="WhatsApp">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
          </a>
          <a href="https://sadestudio.design" target="_blank" rel="noopener" class="creator-link" title="Web">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
          </a>
        </div>
        <p class="creator-card__web">Para tu propia web: <a href="https://sadestudio.design" target="_blank">sadestudio.design</a></p>
      </div>
    </div>
  </div>

  <!-- Cupido Promo Popup (daily) -->
  <div class="cupido-popup-overlay" id="cupido-promo-popup">
    <div class="cupido-popup">
      <button class="cupido-popup__close" id="cupido-popup-close">&times;</button>
      <div class="cupido-popup__icon">💘</div>
      <h2 class="cupido-popup__title">Modo Cupido</h2>
      <p class="cupido-popup__desc">Ahora puedes promocionar tus redes sociales y tu negocio en CubanGuesser! Miles de jugadores veran tu perfil mientras juegan.</p>
      <div class="cupido-popup__steps">
        <div class="cupido-popup__step">
          <span class="cupido-popup__step-num">1</span>
          <span>Sube tu foto y tus redes sociales</span>
        </div>
        <div class="cupido-popup__step">
          <span class="cupido-popup__step-num">2</span>
          <span>Tu perfil aparece durante el juego</span>
        </div>
        <div class="cupido-popup__step">
          <span class="cupido-popup__step-num">3</span>
          <span>Miles de jugadores ven tu perfil y redes</span>
        </div>
      </div>
      <a href="/cubanguesser/submit?cupido=1" class="cupido-popup__cta">Quiero Aparecer!</a>
      <button class="cupido-popup__skip" id="cupido-popup-skip">Ahora no</button>
    </div>
  </div>

  <!-- Play Type Popup (Solo vs Multiplayer) -->
  <div class="modal-overlay" id="modal-play-type" style="display:none;">
    <div class="modal-card" style="max-width:380px;">
      <h2 style="font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:800;text-align:center;margin-bottom:1rem;">Como quieres jugar?</h2>
      <div style="display:flex;flex-direction:column;gap:0.75rem;">
        <button class="btn btn--primary" id="btn-play-solo" style="width:100%;padding:1rem;">Solo</button>
        <button class="btn" id="btn-play-multi" style="width:100%;padding:1rem;background:var(--orange);color:#fff;">Crear Sala (2-5)</button>
      </div>
      <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sand);">
        <div style="font-size:0.8rem;font-weight:700;color:var(--text-muted);text-align:center;margin-bottom:0.5rem;">Unirse a una sala:</div>
        <div style="display:flex;gap:0.5rem;">
          <input type="text" id="join-code-input" maxlength="6" placeholder="CODIGO" style="flex:1;padding:0.75rem;border:2px solid var(--sand-dark);border-radius:var(--radius-sm);font-family:monospace;font-size:1.2rem;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:4px;">
          <button class="btn btn--primary" id="btn-join-code" style="padding:0.75rem 1.25rem;">Unirse</button>
        </div>
        <div id="join-error" style="color:var(--red);font-size:0.8rem;margin-top:0.3rem;text-align:center;min-height:1.2em;"></div>
      </div>
      <button class="btn btn--secondary btn--small" id="btn-play-type-close" style="margin-top:0.75rem;width:100%;">Cancelar</button>
    </div>
  </div>

  <!-- Waiting Room -->
  <div class="modal-overlay" id="modal-waiting-room" style="display:none;">
    <div class="modal-card" style="max-width:420px;">
      <h2 style="font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:800;text-align:center;margin-bottom:0.5rem;">Sala Multijugador</h2>
      <p style="text-align:center;font-size:0.8rem;color:var(--text-muted);margin-bottom:1rem;" id="room-mode-label">Lugares</p>
      <div style="text-align:center;margin-bottom:1rem;">
        <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:0.3rem;">Comparte este codigo:</div>
        <div id="room-code-display" style="font-family:monospace;font-size:2.5rem;font-weight:900;letter-spacing:8px;color:var(--blue);background:var(--bg);padding:0.5rem 1rem;border-radius:var(--radius);border:3px dashed var(--blue);display:inline-block;"></div>
        <button class="btn btn--small btn--primary" id="btn-copy-room" style="margin-top:0.5rem;display:block;margin-left:auto;margin-right:auto;">Copiar Codigo</button>
      </div>
      <div style="margin:1rem 0;">
        <div style="font-size:0.8rem;font-weight:700;color:var(--text-muted);margin-bottom:0.5rem;">Jugadores (<span id="room-player-count">1</span>/10):</div>
        <div id="room-players-list" style="display:flex;flex-direction:column;gap:0.4rem;max-height:260px;overflow-y:auto;"></div>
      </div>
      <div id="room-waiting-msg" style="text-align:center;font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem;">Esperando jugadores...</div>
      <button class="btn btn--primary" id="btn-start-room" style="width:100%;" disabled>Empezar (min 2 jugadores)</button>
      <button class="btn btn--secondary btn--small" id="btn-leave-room" style="margin-top:0.5rem;width:100%;">Salir</button>
    </div>
  </div>

  <!-- Multiplayer Result -->
  <div class="modal-overlay" id="modal-multi-result" style="display:none;">
    <div class="modal-card" style="max-width:450px;">
      <h2 style="font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:800;text-align:center;margin-bottom:1rem;">Resultado Multijugador</h2>
      <div id="multi-result-list" style="display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem;"></div>
      <div id="multi-waiting-others" style="text-align:center;font-size:0.85rem;color:var(--text-muted);display:none;">
        <div style="font-size:1.5rem;margin-bottom:0.3rem;">&#9203;</div>
        Esperando a otros jugadores...
      </div>
      <div style="margin-top:1rem;text-align:center;">
        <button class="btn btn--primary" id="btn-multi-close">Volver al Menu</button>
      </div>
    </div>
  </div>

  <!-- Cupido Card Modal -->
  <div class="modal-overlay" id="modal-cupido-card" style="display:none;">
    <div class="cupido-card">
      <img class="cupido-card__photo" id="cupido-card-photo" src="" alt="">
      <div class="cupido-card__badge">CUPIDO</div>
      <div class="cupido-card__body">
        <div class="cupido-card__name" id="cupido-card-name"></div>
        <div class="cupido-card__bio" id="cupido-card-bio"></div>
        <div class="cupido-card__socials" id="cupido-card-socials"></div>
        <button class="btn btn--primary cupido-card__btn" id="btn-cupido-next">Siguiente &rarr;</button>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <p>CubanGuesser &mdash; <a href="/">Manguito</a> | <a href="/cubanguesser/privacy">Privacy</a> | <a href="/cubanguesser/terms">Terms</a> | <a href="https://sadestudio.design" target="_blank">sadestudio.design</a></p>
  </footer>

</body>
</html>