:root {
            /*Nectarland Colors*/
            --nectar-blue: #2B4162; /* The deep blue of the shield */
            --nectar-gold: #F5C55D; /* The gold of the crown and borders */
            --nectar-gold-dark: #D4A03A; /* Darker gold for shadows/borders */
            --nectar-white: #F8F9FA; /* Off-white for text/icons */

            /* Environmental colors for NectarLand */
            --grass-green: #4A7C59;
            --castle-stone: #8D99AE;
            --sky-blue: #A2D2FF;

            --correct-green: #38b000;
            --wrong-red: #d00000;
        }

        body {
                    font-family: 'Lora', serif;
                    background-color: #1a1a1a;
                    color: var(--nectar-white);
                    margin: 0;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /* KUNCI UTAMA: Gunakan DVH agar menyesuaikan address bar HP */
                    height: 100vh;
                    height: 100dvh;
                    overflow: hidden;
                }

                /* --- THE REALM OF NECTARLAND (Mobile Container) --- */
                .mobile-container {
                    width: 100%;
                    max-width: 414px;
                    height: 100dvh;
                    max-height: 740px; /* Dibatasi agar tidak terlalu tinggi */
                    background: url('../../img/kofn.png') center/cover no-repeat;
                    border-radius: 16px;
                    box-shadow: inset 0 0 0 4px var(--nectar-gold), 0 10px 30px rgba(0,0,0,0.8);
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                }

        /* --- UI CONTENT WRAPPER --- */
                .content-wrapper {
                    position: relative;
                    z-index: 10;
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    /* Gelapkan sedikit agar UI terbaca di atas background yang ramai */
                    background: rgba(15, 12, 10, 0.5);
                }

                /* --- HEADER & SHIELD SCOREBOARD (Compact Version) --- */
                        .header {
                            padding: 10px 15px 0 15px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            z-index: 20;
                        }
                        /* --- GUILD INFO SCROL */
                        .guild-info-scroll {
                            position: absolute;
                            left: 12px;
                            top: 10px;
                            background-color: #f4e8c1;
                            background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');
                            border: 1px solid #8b5a2b;
                            border-radius: 3px;
                            padding: 5px 8px;
                            box-shadow: 0 4px 8px rgba(0,0,0,0.6);
                            text-align: center;
                            max-width: 95px; /* Membatasi lebar agar tidak menabrak perisai tengah */
                            z-index: 25;
                        }

                        /* Scroll effect for guild info scroll */
                        .guild-info-scroll::before, .guild-info-scroll::after {
                            content: '';
                            position: absolute;
                            left: -4%;
                            width: 108%;
                            height: 8px;
                            background: linear-gradient(to bottom, #d4b886 0%, #f4e8c1 40%, #c29f64 100%);
                            border: 1px solid #8b5a2b;
                            border-radius: 4px;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
                        }
                        .guild-info-scroll::before { top: -5px; }
                        .guild-info-scroll::after { bottom: -5px; }

                        .guild-class {
                            font-family: 'Uncial Antiqua', cursive;
                            font-size: 10px;
                            color: #5a0000;
                            border-bottom: 1px dashed rgba(139, 90, 43, 0.5);
                            margin-bottom: 3px;
                            padding-bottom: 2px;
                            letter-spacing: 0.5px;
                        }

                        .guild-name {
                            font-family: 'Lora', serif;
                            font-size: 10px;
                            font-weight: 700;
                            color: #3e2723;
                            white-space: nowrap; /* Teks memanjang ke samping */
                            overflow: hidden;
                            text-overflow: ellipsis; /* Menambahkan "..." jika nama terlalu panjang */
                        }

                        .shield-score {
                            background-color: var(--nectar-blue);
                            border: 3px solid var(--nectar-gold);
                            border-radius: 0 0 25px 25px;
                            padding: 6px 20px 12px;
                            text-align: center;
                            box-shadow: 0 6px 15px rgba(0,0,0,0.5);
                            position: relative;
                            margin-top: -15px;
                        }

                        .shield-score::before {
                            content: '♛';
                            position: absolute;
                            top: -18px;
                            left: 50%;
                            transform: translateX(-50%);
                            font-size: 20px;
                            color: var(--nectar-gold);
                        }

                        .class-score-title {
                            font-family: 'Uncial Antiqua', cursive;
                            font-size: 11px;
                            color: var(--nectar-gold);
                            letter-spacing: 1px;
                            margin-bottom: 2px;
                        }

                        .class-score-points {
                            font-family: 'Lora', serif;
                            font-size: 24px;
                            font-weight: 700;
                            color: var(--nectar-white);
                        }

                        .session-timer {
                            position: absolute;
                            right: 12px;
                            top: 10px;
                            background: rgba(15, 12, 10, 0.6);
                            border: 1px solid var(--nectar-gold);
                            padding: 3px 8px;
                            border-radius: 5px;
                            font-family: 'Uncial Antiqua', cursive;
                            font-size: 11px;
                            color: var(--nectar-white);
                        }

                        /* --- NECTARIANS (Avatars Split Kiri-Kanan Compact) --- */
                        .players-grid {
                            position: absolute;
                            top: 85px; /* Up header */
                            left: 0;
                            width: 100%;
                            box-sizing: border-box;
                            padding: 0 10px;
                            display: grid;
                            grid-template-columns: 65px 65px; /* Shallow Depth */
                            grid-template-rows: repeat(3, auto);
                            grid-auto-flow: column;
                            justify-content: space-between;
                            gap: 8px;
                            z-index: 5;
                            pointer-events: none;
                        }

                        .nectarian {
                            pointer-events: auto;
                            background: rgba(255,255,255,0.95);
                            border: 1.5px solid var(--nectar-gold-dark);
                            border-radius: 6px;
                            padding: 3px;
                            text-align: center;
                            position: relative;
                            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
                        }

                        .nectarian.active {
                            background: var(--nectar-blue);
                            border-color: var(--nectar-gold);
                            transform: scale(1.1) translateX(3px);
                            box-shadow: 0 0 12px var(--nectar-gold);
                            z-index: 15;
                        }

                        #p4.active, #p5.active, #p6.active {
                            transform: scale(1.1) translateX(-3px);
                        }

                        .nectarian-number {
                            position: absolute;
                            top: -6px;
                            left: 50%;
                            transform: translateX(-50%);
                            background: var(--nectar-gold);
                            color: var(--nectar-blue);
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            font-family: 'Uncial Antiqua', cursive;
                            font-size: 10px;
                            line-height: 15px;
                            border: 1px solid var(--nectar-blue);
                        }

                        .avatar-icon {
                            font-size: 18px;
                            margin: 4px 0 1px;
                        }

                        .nectarian-name {
                            font-family: 'Lora', serif;
                            font-size: 8px;
                            font-weight: 700;
                            color: var(--nectar-blue);
                            text-transform: uppercase;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        /* --- PLAY AREA & ROYAL WHEEL (Compact) --- */
                        .play-area {
                            flex-grow: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-end;
                            align-items: center;
                            padding: 10px 15px 30px 15px; /* Bottom padding for mobile */
                            z-index: 10;
                        }

                        #dice-state {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 100%;
                        }

                        .royal-wheel-container {
                            width: 120px; /* Bottom pixel */
                            height: 120px;
                            margin-bottom: 15px;
                            position: relative;
                        }

                        .royal-wheel {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            background: radial-gradient(circle, #5c4033 20%, #3e2723 80%);
                            border: 6px solid var(--nectar-gold);
                            box-shadow: 0 6px 15px rgba(0,0,0,0.6);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-family: 'Uncial Antiqua', cursive;
                            font-size: 48px;
                            color: var(--nectar-white);
                            position: relative;
                            transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
                        }

                        .wheel-pointer {
                            position: absolute;
                            top: -15px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 10px solid transparent;
                            border-right: 10px solid transparent;
                            border-top: 20px solid var(--nectar-blue);
                            z-index: 2;
                        }

                        .btn-action {
                            background: var(--nectar-blue);
                            color: var(--nectar-gold);
                            border: 2px solid var(--nectar-gold);
                            padding: 12px 30px;
                            font-size: 15px;
                            font-family: 'Uncial Antiqua', cursive;
                            border-radius: 6px;
                            cursor: pointer;
                            box-shadow: 0 4px 0 var(--nectar-gold-dark), 0 6px 10px rgba(0,0,0,0.5);
                            transition: all 0.1s;
                            width: 85%;
                            letter-spacing: 1px;
                            text-transform: uppercase;
                        }
                        .btn-action:active {
                            transform: translateY(4px);
                            box-shadow: 0 0 0 var(--nectar-gold-dark);
                        }

                /* --- STATE 2: THE PARCHMENT CARD --- */
                #card-state {
                    display: none;
                    width: 100%;
                    flex-direction: column;
                    align-items: center;
                    margin-top: auto;
                }
                /* --- Scroll Card --- */
                        .scroll-card {
                            background-color: #f4e8c1;
                            background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');
                            width: 92%;
                            padding: 20px 15px; /* Padding diperkecil */
                            position: relative;
                            box-shadow: 0 10px 20px rgba(0,0,0,0.8);
                            border-radius: 5px;
                            color: #3e2723;
                            text-align: center;
                            margin-bottom: 15px; /* Jarak bawah diperkecil */
                            border-left: 1px solid #8b5a2b;
                            border-right: 1px solid #8b5a2b;
                        }

                        /* Efek Gulungan Atas dan Bawah Scroll (Lebih tipis) */
                        .scroll-card::before, .scroll-card::after {
                            content: '';
                            position: absolute;
                            left: -3%;
                            width: 106%;
                            height: 18px; /* Diperkecil */
                            background: linear-gradient(to bottom, #d4b886 0%, #f4e8c1 40%, #c29f64 100%);
                            border: 1px solid #8b5a2b;
                            border-radius: 9px;
                            box-shadow: 0 4px 8px rgba(0,0,0,0.6);
                            z-index: 2;
                        }
                        .scroll-card::before { top: -8px; }
                        .scroll-card::after { bottom: -8px; }

                        /* Typography Scramble & Clue */
                        .scramble-text {
                            font-size: 22px; /* Font diperkecil agar muat */
                            font-weight: 700;
                            letter-spacing: 4px;
                            color: #5a0000;
                            font-family: 'Uncial Antiqua', cursive;
                            margin: 5px 0;
                            text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
                        }

                        .clue-text {
                            font-size: 14px; /* Fonts */
                            font-style: italic;
                            color: #3e2723;
                            font-family: 'Lora', serif;
                            border-top: 1px dashed #8b5a2b;
                            padding-top: 8px;
                            margin-top: 5px;
                            font-weight: 600;
                        }

                        /* Options (Wooden Planks style - COMPACT) */
                        .options-grid {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 8px; /* Jarak antar tombol diperkecil */
                            width: 100%;
                        }
                        .option-btn {
                            background: #5c4033;
                            border: 2px solid #3e2723;
                            border-radius: 4px;
                            color: #f4e8c1;
                            padding: 10px 5px; /* Shallow */
                            font-size: 13px; /* Low*/
                            font-family: 'Lora', serif;
                            font-weight: 700;
                            cursor: pointer;
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4);
                            position: relative;
                            overflow: hidden;
                            transition: all 0.2s;
                        }

        /* Wood grain effect */
        .option-btn::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(0,0,0,0.1) 10px,
                rgba(0,0,0,0.1) 20px
            );
            pointer-events: none;
            opacity: 0.5;
        }

        .option-btn:hover {
            background: #6d4c41;
        }
        .option-btn.correct {
            background: var(--correct-green);
            border-color: #2b7a0b;
            color: white;
        }
        .option-btn.wrong {
            background: var(--wrong-red);
            border-color: #9b0000;
            color: white;
        }
        /* --- ANTI-CHEAT */
        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        /* --- FEATHER QUILL TIMER BAR --- */
                .quill-timer-container {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    width: 90%;
                    margin-bottom: 10px;
                }
                .quill-icon {
                    font-size: 18px;
                }
                .timer-bar-bg {
                    flex-grow: 1;
                    height: 10px;
                    background: rgba(0, 0, 0, 0.5);
                    border: 1px solid var(--nectar-gold);
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                }
                .timer-bar {
                    height: 100%;
                    width: 100%;
                    background: linear-gradient(90deg, var(--nectar-gold) 0%, #ff4d4d 100%);
                    border-radius: 4px;
                }
                .active-turn-text {
                    font-family: 'Uncial Antiqua', cursive;
                    color: var(--nectar-gold);
                    font-size: 13px;
                    margin-bottom: 8px;
                    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
                }

                /* --- COMPACT SETUP SCREEN --- */
                #setup-screen {
                    padding: 10px 15px !important;
                }
                /* --- ROYAL HANGING BANNER (KOFN STYLE) --- */
                .banner-container {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 0px;
                    margin-bottom: 2px;
                    position: relative;
                }

                /* 1. Rope */
                .banner-rope {
                    width: 0;
                    height: 0;
                    border-left: 28px solid transparent;
                    border-right: 28px solid transparent;
                    border-bottom: 16px solid #b8860b;
                    position: relative;
                    margin-bottom: -2px;
                    z-index: 1;
                }

                .banner-rope::after {
                    content: '';
                    position: absolute;
                    top: 2px;
                    left: -25px;
                    width: 0;
                    height: 0;
                    border-left: 25px solid transparent;
                    border-right: 25px solid transparent;
                    border-bottom: 14px solid rgba(15, 12, 10, 0.92);
                }

                /* 2. Baner Rod */
                .banner-rod {
                    width: 100px;
                    height: 6px;
                    background: linear-gradient(180deg, #8b5a2b 0%, #4a2e16 100%);
                    border-radius: 3px;
                    border: 1px solid var(--nectar-gold);
                    box-shadow: 0 3px 6px rgba(0,0,0,0.8);
                    position: relative;
                    z-index: 3;
                }

                /* Mahkota Emas di Ujung Kayu Kiri & Kanan */
                .banner-rod::before, .banner-rod::after {
                    content: '◆';
                    position: absolute;
                    top: -5px;
                    font-size: 10px;
                    color: var(--nectar-gold);
                }
                .banner-rod::before { left: -8px; }
                .banner-rod::after { right: -8px; }

                /* 3. Kain Banner Kerajaan (Pointed Pennant Shape) */
                .royal-banner {
                    width: 70px;
                    padding: 6px 6px 14px 6px;
                    background: linear-gradient(180deg, var(--nectar-blue) 0%, #152238 100%);
                    border-left: 1.5px solid var(--nectar-gold);
                    border-right: 1.5px solid var(--nectar-gold);
                    border-bottom: 1.5px solid var(--nectar-gold);
                    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: -2px;
                    z-index: 2;
                }

                .banner-crest {
                    width: 55px;
                    height: auto;
                    display: block;
                    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
                }

                /* 4. Judul & Subtitle */
                .banner-title {
                    font-family: 'Uncial Antiqua', cursive;
                    color: var(--nectar-gold);
                    text-align: center;
                    margin: 12px 0 2px;
                    font-size: 1.5rem;
                    letter-spacing: 1px;
                    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
                }

                .banner-divider {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    margin-bottom: 8px;
                }

                .divider-line {
                    height: 1px;
                    width: 35px;
                    background: linear-gradient(to right, transparent, var(--nectar-gold));
                }

                .divider-line:last-child {
                    background: linear-gradient(to left, transparent, var(--nectar-gold));
                }

                .banner-subtitle {
                    color: #cbd5e1;
                    font-size: 0.78rem;
                    margin: 0;
                    font-style: italic;
                    font-family: 'Lora', serif;
                }