@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/fredoka-one-400-1d92d7b002.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/nunito-700-fd8b8aea8f.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/nunito-900-fd8b8aea8f.woff2') format('woff2');
}

body { 
            margin: 0; 
            overflow: hidden; 
            font-family: 'Nunito', sans-serif; 
            background-color: #A9E1FF; 
            touch-action: none;
        }
        
        #info {
            position: absolute;
            top: 30px;
            width: 100%;
            text-align: center;
            z-index: 10;
            pointer-events: none;
        }
        h1 {
            font-family: 'Fredoka One', cursive;
            margin: 0;
            font-size: 42px;
            color: #ffffff;
            -webkit-text-stroke: 2px #2d3436;
            text-shadow: 0px 4px 0px #2d3436;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        p.subtitle {
            margin: 5px 0 0 0;
            font-size: 18px;
            font-weight: 900;
            color: #2d3436;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: #ffffff;
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            border: 2px solid #2d3436;
            box-shadow: 0 4px 0 rgba(45,52,54,0.1);
        }
        
        #hud {
            position: absolute;
            top: 30px;
            left: 30px;
            background: #ffffff;
            padding: 15px 20px;
            border-radius: 16px;
            z-index: 10;
            min-width: 180px;
            border: 3px solid #2d3436;
            box-shadow: 4px 6px 0px rgba(45,52,54,0.1);
            pointer-events: auto;
        }
        #hud h3 { 
            margin: 0 0 12px 0; 
            border-bottom: 3px dashed #dfe6e9; 
            padding-bottom: 8px; 
            font-family: 'Fredoka One', cursive;
            color: #2d3436;
            font-size: 20px;
        }
        .player-stat {
            font-size: 18px;
            margin: 8px 0;
            font-weight: 900;
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 10px;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: #2d3436;
            border: 2px solid transparent;
        }
        .color-box {
            width: 20px; height: 20px; border-radius: 6px; margin-right: 12px; display: inline-block;
            border: 2px solid #2d3436;
        }
        .active-turn {
            background: #fff3cd;
            border: 2px solid #2d3436;
            transform: scale(1.05) translateX(5px);
            box-shadow: 2px 4px 0 rgba(45,52,54,0.1);
        }

        #message-box {
            position: absolute;
            top: 70px;
            right: 30px;
            background: #2d3436;
            color: #ffffff;
            padding: 15px 25px;
            border-radius: 12px;
            font-weight: 900;
            display: none;
            z-index: 15;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            animation: fadeInOut 3s forwards;
            font-size: 16px;
            border: 3px solid #1e272e;
            pointer-events: none;
        }

        #ui {
            position: absolute;
            bottom: 40px;
            left: 30px;
            background: #ffffff;
            padding: 24px;
            border-radius: 20px;
            display: none;
            border: 3px solid #2d3436;
            box-shadow: 4px 8px 0px rgba(45,52,54,0.1);
            border-left: 12px solid #b2bec3;
            min-width: 260px;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 10;
            pointer-events: auto;
        }
        #prop-name { 
            margin: 0 0 12px 0; 
            font-family: 'Fredoka One', cursive;
            font-size: 26px; 
            color: #2d3436; 
            line-height: 1.1; 
        }
        .detail { margin: 6px 0; font-size: 16px; color: #636e72; font-weight: 800;}
        .price { font-weight: 900; color: #00b894; font-size: 22px; font-family: 'Fredoka One', cursive;}
        #prop-owner { font-weight: 900; color: #6c5ce7; }
        
        .btn {
            padding: 12px 20px; border: 3px solid #2d3436; border-radius: 12px; cursor: pointer; font-weight: 900; margin-right: 8px; margin-top: 15px;
            font-size: 16px;
            transition: all 0.1s;
            text-transform: uppercase;
            box-shadow: 0 4px 0 #2d3436;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #2d3436; filter: brightness(1.1); }
        .btn:active { transform: translateY(4px); box-shadow: 0 0 0 #2d3436; }
        .btn-buy { background: #00b894; color: white; }
        .btn-pass { background: #ff7675; color: white; }
        .btn-end { background: #0984e3; color: white; }

        #loading {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Fredoka One', cursive;
            font-size: 36px;
            color: #ffffff;
            -webkit-text-stroke: 2px #2d3436;
            text-shadow: 0px 4px 0px #2d3436;
            z-index: 50;
            background: #A9E1FF;
            padding: 20px 40px;
            border-radius: 20px;
            border: 4px solid #2d3436;
            pointer-events: none;
        }

        #dice-container {
            position: absolute;
            bottom: 40px;
            right: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            z-index: 20;
            pointer-events: none;
        }
        #dice-container > * {
            pointer-events: auto;
        }
        #dice-btn {
            background: #ff4757;
            color: white;
            border: 3px solid #2d3436;
            padding: 20px 40px;
            font-size: 24px;
            border-radius: 16px;
            cursor: pointer;
            box-shadow: 0 6px 0 #2d3436;
            font-weight: 900;
            transition: all 0.1s;
            font-family: 'Fredoka One', cursive;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        #dice-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 0 #2d3436; }
        #dice-btn:active { transform: translateY(6px); box-shadow: 0 0 0 #2d3436; }
        
        .citizen-bubble {
            position: absolute;
            background: white;
            border: 2px solid #2d3436;
            border-radius: 12px;
            padding: 6px 10px;
            font-family: 'Nunito', sans-serif;
            font-size: 12px;
            font-weight: bold;
            color: #2d3436;
            pointer-events: none;
            transform: translate(-50%, -100%);
            z-index: 5;
            box-shadow: 0 4px 0 rgba(45,52,54,0.1);
            max-width: 150px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .citizen-bubble::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px 6px 0;
            border-style: solid;
            border-color: #2d3436 transparent transparent transparent;
        }
        
        #dice-btn:disabled { background: #b2bec3 !important; cursor: not-allowed; transform: translateY(6px); box-shadow: 0 0 0 #2d3436; filter: none;}
        
        #dice-result {
            font-size: 20px;
            font-weight: 900;
            color: #2d3436;
            background: #ffffff;
            padding: 10px 20px;
            border-radius: 12px;
            border: 3px solid #2d3436;
            box-shadow: 4px 4px 0px rgba(45,52,54,0.1);
        }

        #watermark-dropdown button:hover {
            background: #f1f2f6 !important;
        }
        #watermark-container {
            user-select: none;
        }

        @media (max-width: 768px) {
            #info { top: 10px; padding: 0 10px; z-index: 5; text-align: left; }
            h1 { font-size: 20px; letter-spacing: 0px; -webkit-text-stroke: 1px #2d3436; text-shadow: 0px 2px 0px #2d3436; }
            p.subtitle { font-size: 10px; padding: 2px 6px; border-width: 1px; }

            #hud { 
                top: 70px; 
                left: 10px; 
                padding: 8px 12px; 
                min-width: 120px; 
                border-width: 2px;
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(4px);
            }
            #hud h3 { font-size: 14px; margin: 0 0 6px 0; border-bottom: 2px dashed #dfe6e9; padding-bottom: 4px; }
            .player-stat { font-size: 12px; padding: 4px 6px; margin: 3px 0; }
            .color-box { width: 12px; height: 12px; margin-right: 6px; border-width: 1px; border-radius: 4px; }

            #watermark-container { top: 10px; right: 10px; gap: 8px; z-index: 1000; pointer-events: auto; }
            #watermark-container > div { pointer-events: auto; }
            #watermark { font-size: 11px; padding: 4px 8px; }
            #quick-play-mode-btn { font-size: 11px; padding: 4px 8px; box-sizing: border-box; text-align: center; white-space: nowrap; width: 100%; pointer-events: auto; }

            #message-box { 
                top: 60px; 
                right: 10px; 
                left: 10px; 
                text-align: center; 
                font-size: 13px; 
                padding: 8px; 
                pointer-events: none;
            }

            #ui { 
                bottom: 100px; 
                top: auto;
                left: 50%; 
                transform: translateX(-50%); 
                width: 92%; 
                max-width: 340px; 
                padding: 15px; 
                box-sizing: border-box; 
                z-index: 100;
                box-shadow: 0 8px 24px rgba(0,0,0,0.2);
                border-width: 2px;
                border-left-width: 8px;
            }
            #prop-name { font-size: 18px; margin-bottom: 8px; }
            .detail { font-size: 13px; margin: 4px 0; }
            .price { font-size: 16px; }
            .btn { padding: 10px 12px; font-size: 14px; width: 100%; margin-right: 0; margin-bottom: 8px; box-sizing: border-box; border-width: 2px; }

            #dice-container { 
                bottom: 30px; 
                left: 50%; 
                transform: translateX(-50%); 
                right: auto; 
                width: 92%; 
                max-width: 340px; 
            }
            #dice-btn { 
                width: 100%; 
                padding: 12px 15px; 
                font-size: 18px; 
                border-width: 2px;
                border-radius: 12px;
            }
            #dice-result { 
                font-size: 14px; 
                padding: 6px 12px; 
            }
            #superagent-panel {
                width: 100%;
                bottom: 100%;
                right: 0;
                margin-bottom: 8px;
                border-width: 2px;
            }
            
            #loading {
                font-size: 20px;
                padding: 15px 20px;
                width: 85%;
                text-align: center;
                box-sizing: border-box;
                border-width: 2px;
            }

            #login-screen > div, #settings-modal > div {
                width: 95%;
                padding: 20px;
            }
            #login-screen h1 { font-size: 36px; }
            #login-screen p { font-size: 16px; }
        }