@font-face{
    font-family:'Khmer OS Battambang';
    src:local('Khmer OS Battambang'),local('KhmerOSBattambang');
    font-display:swap;
}
*{font-family:'Khmer OS Battambang','Noto Sans Khmer',Inter,sans-serif!important}
body{background:#f1f5f9;color:#0f172a;user-select:none;font-size:14px;line-height:1.55}
html,body{min-height:100%;overflow:hidden}
.font-game{font-weight:700;}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#e2e8f0;border-radius:4px}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px}
.app-shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.board-host{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;padding:4px}
.board-square-wrapper{aspect-ratio:1/1;height:100%;max-height:100%;max-width:100%;position:relative}
.board-grid{display:grid;grid-template-columns:2fr repeat(9,1fr) 2fr;grid-template-rows:2fr repeat(9,1fr) 2fr;width:100%;height:100%;background:#dbeafe;border:6px solid #1e293b;box-shadow:0 10px 30px -8px rgba(15,23,42,.3);border-radius:8px;overflow:hidden;position:relative}
.board-center{grid-area:2/2/11/11;background:radial-gradient(circle,#fff 0%,#e0f2fe 100%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;padding:4px;overflow:hidden;box-shadow:inset 0 0 20px rgba(15,23,42,.05)}
.board-tile{border:1px solid rgba(15,23,42,.18);background:#fff;display:flex;position:relative;color:#0f172a;font-size:.55rem;transition:filter .15s;cursor:pointer}
.board-tile:hover{filter:brightness(.97);z-index:30}
.tile-top,.tile-bottom{flex-direction:column}
.tile-left,.tile-right{flex-direction:row}
.tile-top .color-bar{height:26%;width:100%;order:1;border-bottom:1px solid rgba(0,0,0,.18)}
.tile-bottom .color-bar{height:26%;width:100%;order:2;border-top:1px solid rgba(0,0,0,.18)}
.tile-left .color-bar{width:26%;height:100%;order:1;border-right:1px solid rgba(0,0,0,.18)}
.tile-right .color-bar{width:26%;height:100%;order:2;border-left:1px solid rgba(0,0,0,.18)}
.tile-top .tile-info{flex:1;order:2}
.tile-bottom .tile-info{flex:1;order:1}
.tile-left .tile-info{flex:1;order:2}
.tile-right .tile-info{flex:1;order:1}
.tile-info{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1px;text-align:center}
.tile-name{font-weight:800;font-size:9px;line-height:1.05;color:#0f172a;word-break:break-word}
.tile-price{font-weight:900;font-size:9px;color:#475569}
.tile-ico{width:20px;height:20px}
.tile-ico-lg{width:26px;height:26px}
.bg-brown{background:#c4a878}
.bg-light-blue{background:#8fc4b0}
.bg-pink{background:#e8a8a0}
.bg-orange{background:#e8b878}
.bg-red{background:#d87878}
.bg-yellow{background:#e8cc78}
.bg-green{background:#78a878}
.bg-dark-blue{background:#7898c4}

/* TOKENS */
.token{width:var(--token-size,46px);height:var(--token-size,46px);position:absolute;top:50%;left:50%;margin-top:calc(var(--token-size,46px) / -2);margin-left:calc(var(--token-size,46px) / -2);z-index:25;pointer-events:none;transform:var(--offset,translate(0,0));will-change:transform}
.token-inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;line-height:1;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.7);border:3px solid #fff;text-shadow:0 1px 2px rgba(0,0,0,.3);transform:translateY(0);transform-origin:center bottom}
.token-inner .emoji{font-size:30px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.token-inner .num-badge{font-size:18px;font-weight:800}
@keyframes tokenPop{0%{transform:translateY(0) scale(.3);opacity:0}60%{transform:translateY(0) scale(1.15);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.token-inner.token-pop-replay{animation:tokenPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes tokenHop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-18px) scale(1.14)}70%{transform:translateY(-4px) scale(1.04)}100%{transform:translateY(0) scale(1)}}
.token-inner.hopping{animation:tokenHop .32s ease-in-out;z-index:60;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}

/* DICE */
.dice-stage{width:52px;height:52px;perspective:400px;position:relative}
.dice-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.2,.64,1)}
.dice-cube.rolling{animation:dice-tumble .55s linear infinite}
@keyframes dice-tumble{0%{transform:rotateX(0) rotateY(0) rotateZ(0)}100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}
.dice-face{position:absolute;width:52px;height:52px;background:#fff;border-radius:8px;border:1px solid #cbd5e1;box-shadow:inset 0 0 6px rgba(15,23,42,.15);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:5px;box-sizing:border-box}
.pip{width:8px;height:8px;background:#0f172a;border-radius:50%;align-self:center;justify-self:center;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.face-1{transform:rotateY(0) translateZ(26px)}.face-2{transform:rotateY(90deg) translateZ(26px)}.face-3{transform:rotateY(180deg) translateZ(26px)}.face-4{transform:rotateY(-90deg) translateZ(26px)}.face-5{transform:rotateX(90deg) translateZ(26px)}.face-6{transform:rotateX(-90deg) translateZ(26px)}
.face-1 .pip:nth-child(1){grid-area:2/2}
.face-2 .pip:nth-child(1){grid-area:1/1}.face-2 .pip:nth-child(2){grid-area:3/3}
.face-3 .pip:nth-child(1){grid-area:1/1}.face-3 .pip:nth-child(2){grid-area:2/2}.face-3 .pip:nth-child(3){grid-area:3/3}
.face-4 .pip:nth-child(1){grid-area:1/1}.face-4 .pip:nth-child(2){grid-area:1/3}.face-4 .pip:nth-child(3){grid-area:3/1}.face-4 .pip:nth-child(4){grid-area:3/3}
.face-5 .pip:nth-child(1){grid-area:1/1}.face-5 .pip:nth-child(2){grid-area:1/3}.face-5 .pip:nth-child(3){grid-area:2/2}.face-5 .pip:nth-child(4){grid-area:3/1}.face-5 .pip:nth-child(5){grid-area:3/3}
.face-6 .pip:nth-child(1){grid-area:1/1}.face-6 .pip:nth-child(2){grid-area:1/3}.face-6 .pip:nth-child(3){grid-area:2/1}.face-6 .pip:nth-child(4){grid-area:2/3}.face-6 .pip:nth-child(5){grid-area:3/1}.face-6 .pip:nth-child(6){grid-area:3/3}

/* HOUSES / HOTELS */
.house-dot{width:10px;height:10px;color:#16a34a;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));display:inline-block}
.hotel-dot{width:13px;height:13px;color:#dc2626;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));display:inline-block}
.house-dot svg, .hotel-dot svg{width:100%;height:100%;display:block}
.mortgaged-badge{position:absolute;inset:0;background:rgba(15,23,42,.72);color:#fecaca;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.6rem;z-index:15}

/* MODALS */
.modal-backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(6px)}
.ico{display:inline-block;vertical-align:middle}
.fade-in{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}

/* CARDS */
.card-frame{background:#fbf6e8;border:2px solid #2a2a2a;border-radius:12px;padding:10px;box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 0 30px rgba(139,110,60,.1);position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column}
.card-frame.chance{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.6) 0%,transparent 60%),linear-gradient(135deg,#fbf6e8 0%,#e6f0fa 100%)}
.card-frame.chest{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.6) 0%,transparent 60%),linear-gradient(135deg,#fbf6e8 0%,#fbeed6 100%)}
.card-frame::before{content:'';position:absolute;inset:5px;border:1px solid #8a7a4a;border-radius:8px;pointer-events:none;background-image:repeating-linear-gradient(45deg,transparent 0 4px,rgba(138,122,74,.06) 4px 5px),repeating-linear-gradient(-45deg,transparent 0 4px,rgba(138,122,74,.06) 4px 5px)}
.card-frame::after{content:'';position:absolute;inset:10px;border:1px solid rgba(138,122,74,.35);border-radius:5px;pointer-events:none}
.card-title{position:relative;z-index:2;text-align:center;font-size:12px;font-weight:900;letter-spacing:3px;color:#2a2a2a;text-transform:uppercase;padding:2px 0 6px;border-bottom:1px solid rgba(138,122,74,.4);margin-bottom:4px}
.card-icon-circle{position:relative;z-index:2;width:150px;height:150px;border-radius:50%;background:#fff;border:3px solid #2a2a2a;margin:8px auto;display:flex;align-items:center;justify-content:center;font-size:88px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.2),inset 0 -4px 12px rgba(0,0,0,.06);animation:cardIconPop .4s cubic-bezier(.34,1.56,.64,1)}
.card-icon-circle.red{background:linear-gradient(135deg,#fff 0%,#fef2f2 100%);border-color:#d32f2f}
.card-icon-circle.blue{background:linear-gradient(135deg,#fff 0%,#eff6ff 100%);border-color:#1e40af}
.card-icon-circle.green{background:linear-gradient(135deg,#fff 0%,#f0fdf4 100%);border-color:#16a34a}
.card-icon-circle.amber{background:linear-gradient(135deg,#fff 0%,#fffbeb 100%);border-color:#d97706}
@keyframes cardIconPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.card-text{position:relative;z-index:2;font-size:14px;font-weight:700;color:#2a2a2a;line-height:1.4;text-align:center;margin:6px 0 2px;padding:0 6px}
.card-subtext{position:relative;z-index:2;font-size:11px;color:#6b6b6b;font-style:italic;text-align:center;padding:0 6px;margin-bottom:6px}
.card-corner-badge{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:50%;background:#fbf6e8;border:2px solid #d32f2f;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;color:#2a2a2a;transform:rotate(-12deg);z-index:3;font-family:'Fredoka One','Khmer OS Battambang',sans-serif;line-height:1;text-align:center}
.card-copyright{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:8px;color:#6b6b6b;letter-spacing:.4px;z-index:2}

/* DECK CARD BACKS */
.deck-card-back{width:66px;height:92px;border-radius:7px;border:2px solid #2a2a2a;background:#fbf6e8;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25);position:relative;overflow:hidden}
.deck-card-back::before{content:'';position:absolute;inset:3px;border:1px solid #8a7a4a;border-radius:5px}
.deck-card-back .deck-badge{width:26px;height:26px;border-radius:50%;background:#fbf6e8;border:1.5px solid #d32f2f;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:#2a2a2a;transform:rotate(-12deg);z-index:2;margin-bottom:4px}
.deck-card-back .deck-label{font-size:8px;font-weight:800;letter-spacing:1px;color:#2a2a2a;text-transform:uppercase;z-index:2}

/* ============================================================
   TABLET / MOBILE — page scrolls, board stays square
   ============================================================ */

@media(max-width:1023px){

    /* ⭐ THE REAL FIX: kill ALL height constraints + allow scroll */
    html, body{
        height:auto !important;
        min-height:100% !important;
        max-height:none !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        -webkit-text-size-adjust:100%;
    }

    .app-shell{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        display:block !important;
        overflow:visible !important;
        padding-bottom:calc(env(safe-area-inset-bottom,0) + 8px);
    }

    body > main{
        display:block !important;
        overflow:visible !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        padding:4px !important;
    }
    body > main > section{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        margin-bottom:8px;
    }

    .board-host{
        display:block !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        padding:4px !important;
    }

    .board-square-wrapper{
        width:100% !important;
        max-width:min(100vw - 16px, 520px) !important;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:1 / 1;
        margin:0 auto;
        position:relative;
    }

    header{
        display:flex;
        flex-wrap:wrap;
        row-gap:4px;
        position:sticky;
        top:0;
        z-index:35;
    }
    header > div:last-child{
        flex-wrap:wrap;
        justify-content:flex-end;
    }

    section.lg\:col-span-5 > div,
    section.lg\:col-span-7 > div{
        max-height:none !important;
        overflow:visible !important;
    }
    #players-list,
    #owned-properties-container,
    #game-log{
        max-height:none !important;
        overflow:visible !important;
    }
}

/* ============================================================
   PHONE — aggressively smaller typography, icons & UI
   ============================================================ */

@media(max-width:640px){

    /* ---- Global ---- */
    body{font-size:11px !important;line-height:1.4}

    /* ---- Header ---- */
    header{padding:3px 4px !important}
    header h1{font-size:10px !important;line-height:1.1}
    header p{display:none !important}
    header button{
        padding:2px 4px !important;
        font-size:8px !important;
        border-radius:5px !important;
        gap:2px !important;
    }
    header button span:not(#sound-label):not(#speed-label){display:none !important}
    header button svg{width:9px !important;height:9px !important}
    header .w-7{width:20px !important;height:20px !important}
    header .w-7 svg{width:11px !important;height:11px !important}

    /* ---- Board ---- */
    .board-grid{border-width:3px !important}
    .board-center{padding:1px !important}
    .board-tile{font-size:.4rem !important}
    .tile-name{font-size:6px !important;line-height:1 !important}
    .tile-price{font-size:6px !important}
    .tile-ico{width:12px !important;height:12px !important}
    .tile-ico-lg{width:15px !important;height:15px !important}

    /* ⭐ CORNER TILE ICONS — GO, Jail, Parking, Go-To-Jail */
    #tile-0 .ico,
    #tile-10 .ico,
    #tile-20 .ico,
    #tile-30 .ico{
        width:14px !important;
        height:14px !important;
    }
    /* Jail's inner lock box */
    #tile-10 .w-3\/4{width:70% !important;height:70% !important}
    /* All SVG icons directly inside corner tiles (Tailwind w-6/8/9) */
    #tile-0 > svg, #tile-10 > svg,
    #tile-20 > svg, #tile-30 > svg,
    #tile-0 svg.ico, #tile-10 svg.ico,
    #tile-20 svg.ico, #tile-30 svg.ico{
        width:14px !important;
        height:14px !important;
    }
    /* Corner tile text */
    #tile-0 .text-\[9px\], #tile-10 .text-\[9px\],
    #tile-20 .text-\[9px\], #tile-30 .text-\[9px\]{
        font-size:6px !important;
        line-height:1.05 !important;
    }
    #tile-0 .font-game{font-size:7px !important}
    /* GO arrow icon (w-9 h-9) */
    #tile-0 svg[class*="w-9"]{width:16px !important;height:16px !important}

    /* Board center logo */
    .board-center .font-game{font-size:11px !important;padding:2px 6px !important}

    /* Deck cards */
    .deck-card-back{width:34px !important;height:48px !important;border-width:1.5px !important}
    .deck-card-back::before{inset:2px !important}
    .deck-card-back .deck-badge{width:14px !important;height:14px !important;font-size:5px !important;margin-bottom:2px !important}
    .deck-card-back .deck-label{font-size:5px !important;letter-spacing:0 !important}
    .deck-card-back svg{width:11px !important;height:11px !important}

    /* Current player + dice panel */
    .board-center .bg-white{padding:4px !important;max-width:140px !important;border-radius:8px !important}
    .board-center .bg-white .text-\[9px\]{font-size:7px !important}
    #current-player-name{font-size:9px !important}
    #current-player-color{width:14px !important;height:14px !important}
    #current-player-color .text-\[11px\]{font-size:7px !important}
    #dice-total{font-size:8px !important}
    #btn-roll, #btn-end-turn{
        font-size:8px !important;
        padding:3px 4px !important;
        border-radius:5px !important;
        gap:2px !important;
    }
    #btn-roll svg, #btn-end-turn svg{width:10px !important;height:10px !important}
    .board-center .space-y-2 > * + *{margin-top:4px !important}

    /* Dice */
    .dice-stage{width:28px !important;height:28px !important}
    .dice-face{width:28px !important;height:28px !important;padding:3px !important;border-radius:5px !important}
    .pip{width:4px !important;height:4px !important}
    .face-1{transform:rotateY(0) translateZ(14px) !important}
    .face-2{transform:rotateY(90deg) translateZ(14px) !important}
    .face-3{transform:rotateY(180deg) translateZ(14px) !important}
    .face-4{transform:rotateY(-90deg) translateZ(14px) !important}
    .face-5{transform:rotateX(90deg) translateZ(14px) !important}
    .face-6{transform:rotateX(-90deg) translateZ(14px) !important}

    /* ---- Section headers ---- */
    main section h2{font-size:10px !important}
    main section h2 svg{width:10px !important;height:10px !important}
    main section .border-b{padding-bottom:3px !important;margin-bottom:4px !important}

    /* ---- Player list ---- */
    #players-list{padding:0 !important}
    #players-list > div{padding:4px 5px !important;gap:4px !important}
    #players-list .w-9{width:22px !important;height:22px !important}
    #players-list .w-9 svg{width:12px !important;height:12px !important}
    #players-list .text-\[13px\]{font-size:9px !important}
    #players-list .text-\[11px\]{font-size:8px !important}
    #players-list .text-\[9px\]{font-size:7px !important}

    /* ---- Owned properties ---- */
    #owned-properties-container .text-\[12px\]{font-size:8px !important}
    #owned-properties-container button{font-size:7px !important;padding:2px 3px !important;border-radius:3px !important}
    #owned-properties-container .w-3{width:8px !important;height:8px !important}
    #owned-properties-container .text-\[10px\]{font-size:7px !important}

    /* ---- Game log ---- */
    #game-log{font-size:8px !important;line-height:1.35 !important}
    #game-log > div{font-size:8px !important;padding-bottom:1px !important}

    /* ---- Buttons in panels ---- */
    main section button{font-size:8px !important;padding:2px 5px !important}

    /* ---- Action / card modal ---- */
    #action-modal .card-frame{min-height:190px !important;padding:5px !important}
    .card-title{font-size:9px !important;letter-spacing:1.5px !important;padding:1px 0 4px !important}
    .card-icon-circle{width:80px !important;height:80px !important;font-size:44px !important;border-width:2px !important;margin:4px auto !important}
    .card-text{font-size:10px !important;margin:4px 0 1px !important}
    .card-subtext{font-size:8px !important;margin-bottom:4px !important}
    .card-corner-badge{width:20px !important;height:20px !important;font-size:6px !important;top:5px !important;left:5px !important}
    .card-copyright{font-size:6px !important;bottom:5px !important}

    #action-modal-header{font-size:10px !important}
    #action-modal-simple-body{font-size:10px !important}
    #action-modal-buttons{gap:4px !important}
    #action-modal-buttons button{font-size:9px !important;padding:4px 8px !important}
    #action-modal-timer .text-\[11px\]{font-size:8px !important}

    /* ---- Trade / auction / tile / liquidate ---- */
    #trade-modal, #auction-modal, #tile-modal, #liquidate-modal{font-size:10px !important}
    #trade-modal h3, #auction-modal h3, #tile-modal h3, #liquidate-modal h3{font-size:11px !important}
    #trade-modal input, #auction-modal input, #liquidate-modal input{font-size:10px !important;padding:2px 4px !important}
    #trade-modal .text-\[12px\], #auction-modal .text-\[12px\], #liquidate-modal .text-\[12px\]{font-size:9px !important}
    #trade-modal .text-\[11px\], #auction-modal .text-\[11px\]{font-size:8px !important}
    #auction-modal .max-h-40{max-height:150px !important}
    #liquidate-modal .max-h-64{max-height:180px !important}

    /* ---- Rules / About ---- */
    #rules-modal h2, #about-modal h2{font-size:12px !important}
    #rules-modal h3, #about-modal h3{font-size:10px !important}
    #rules-modal .text-\[13px\], #about-modal .text-\[13px\]{font-size:9px !important}
    #rules-modal .text-\[12px\], #about-modal .text-\[12px\]{font-size:8px !important}
    #rules-modal .text-\[14px\], #about-modal .text-\[14px\]{font-size:10px !important}
    #rules-modal .text-\[11px\], #about-modal .text-\[11px\]{font-size:8px !important}

    /* ---- Setup modal ---- */
    #setup-modal h2{font-size:12px !important}
    #setup-modal .text-\[12px\]{font-size:9px !important}
    #setup-modal .text-\[11px\]{font-size:8px !important}
    #setup-modal .text-\[10px\]{font-size:7px !important}
    #setup-modal input{font-size:10px !important;padding:2px 4px !important}
    #setup-modal .w-10{width:26px !important;height:26px !important}
    #setup-modal .text-xl{font-size:14px !important}
    #player-count-buttons button{font-size:9px !important;padding:2px 0 !important}
    #player-rows > div{padding:4px !important}

    /* ---- Game over ---- */
    #gameover-modal h2{font-size:12px !important}
    #winner-name{font-size:11px !important}
    #gameover-modal .w-12{width:34px !important;height:34px !important}
}

/* ---------- Very small phones ---------- */
@media(max-width:380px){
    body{font-size:10px !important}
    header h1{font-size:9px !important}
    header button{font-size:7px !important;padding:2px 3px !important}
    .tile-name{font-size:5.5px !important}
    .tile-price{font-size:5.5px !important}
    .tile-ico{width:10px !important;height:10px !important}
    .tile-ico-lg{width:13px !important;height:13px !important}

    /* Corner icons even smaller */
    #tile-0 svg, #tile-10 svg,
    #tile-20 svg, #tile-30 svg{
        width:11px !important;
        height:11px !important;
    }
    #tile-0 .text-\[9px\], #tile-10 .text-\[9px\],
    #tile-20 .text-\[9px\], #tile-30 .text-\[9px\]{
        font-size:5px !important;
    }

    .board-square-wrapper{max-width:calc(100vw - 8px) !important}
    #players-list .text-\[13px\]{font-size:8px !important}
    #game-log{font-size:7px !important}
    #game-log > div{font-size:7px !important}
    #action-modal-buttons button{font-size:8px !important;padding:3px 6px !important}
}