* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
    font-family:Arial,Helvetica,sans-serif;
    background:#111;
    color:white;
}

#app{
    width:100vw;
    max-width:none;
    height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);
    background:#101010;
}

/* TOP */

#topBar{
    height:62px;
    width:100%;
    padding:0;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    background:
    linear-gradient(
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.45)
    ),
    url("../pix/wood3.jpg");

    background-size:cover;
    background-position:center;
    border:0;
    overflow:hidden;
    position:relative;
}

.topbar-title-row{
    position:relative;
    width:100%;
    height:22px;
    margin-top:10px;
    flex:0 0 22px;

    display:flex;
    align-items:center;
    justify-content:center;
}

#headerMenuButton{
    position:absolute;
    left:8px;

    background:none;
    border:none;
    padding:0;

    color:white;
    font-size:22px;
    line-height:1;
}

#diceValuesDisplay{
    width:100%;
    height:28px;
    flex:0 0 28px;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:5px;
    margin:0;
    padding:0;
}


.mini-die{

    width:26px;
    height:26px;

    background:rgba(255,255,255,0.9);

    border-radius:5px;

    display:grid;

    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, 1fr);

    padding:3px;

}


.dot{

    width:5px;
    height:5px;

    background:#111;

    border-radius:50%;

    justify-self:center;
    align-self:center;

}

.game-title{
    width:100%;
    font-size:18px;
    font-weight:bold;
    letter-spacing:2px;
    text-align:center;

    margin:0;
    padding:0;
    line-height:22px;
}



/* CONTENT */

#content {
    flex: 1;
    overflow:hidden;
    position:relative;
    min-height:0;
    width:100%;
    max-width:100%;
}


.screen {
    display:none;
    height:100%;
    width:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px;
    text-align:center;
}


.screen.active {
    display: block;
}

#gameScreen.screen.active {
    display: flex;
}

/* BUTTONS */

button {
    width: 90%;
    max-width: 320px;

    min-height: 54px;

    margin: 10px auto;
    padding: 10px 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 14px;

    background: #333;
    color: white;

    font-size: 18px;
    font-weight: bold;

    box-shadow: 0 3px 8px black;
}

button:active {
    transform: scale(0.97);
}

#homeScreen button:nth-of-type(2){
    background:
        linear-gradient(
            180deg,
            #3f5060,
            #202a33
        );
}

#homeScreen button,
#networkScreen button,
#setupScreen button,
#createGameScreen button,
#joinGameScreen button{
    width:86%;
    max-width:300px;

    min-height:48px;

    margin:6px auto;
    padding:10px 14px;

    border:1px solid rgba(255,255,255,0.12);
    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            rgba(80,80,80,0.95),
            rgba(35,35,35,0.95)
        );

    color:white;

    font-size:16px;
    font-weight:600;
    letter-spacing:0.8px;

    box-shadow:
        0 3px 7px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

#homeScreen button:active,
#networkScreen button:active,
#setupScreen button:active,
#createGameScreen button:active,
#joinGameScreen button:active{
    transform:translateY(1px);
}

/* HOME */

.logo{
    margin:8px 0 18px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.logo img{
    display:block;

    width:90%;
    max-width:300px;
    height:auto;

    border-radius:10px;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.5);
}

/* SETUP */

.player-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}


.player-buttons button {
    width: 60px;
}


input {
    width: 90%;
    max-width: 320px;
    padding: 14px;
    margin: 8px;

    border-radius: 10px;
    border: none;

    font-size: 18px;
}


/* GAME */

.game-status{
    display:flex;
    justify-content:space-between;
    align-items:center;

    height:35px;
    padding:0 15px;

    font-size:16px;
    font-weight:600;

    margin:0 0 4px;

    background:rgba(0,0,0,0.22);

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.dice {

    aspect-ratio: 1;

    background: white;

    color: black;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 45px;

    box-shadow: 0 5px 12px black;

}


/* GAME LAYOUT */

#gameScreen {
    display: none;
    height: 100%;
    flex-direction: column;
    overflow:hidden;
}


.dice-area {

    flex: 1;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 20px;

    align-content: center;

    margin-top: 0;

}


/* =====================================
   ACTION BUTTONS
===================================== */

.action-buttons{
    margin-top:0;
    flex-shrink:0;

    padding:8px 10px 10px;

    display:flex;
    gap:10px;
}

.action-buttons button{
    flex:1;

    width:auto;
    max-width:none;
    min-height:54px;

    margin:0;
    padding:10px;

    border:1px solid rgba(255,255,255,0.18);
    border-radius:10px;

    color:white;

    font-size:17px;
    font-weight:bold;
    letter-spacing:1px;

    box-shadow:
        0 3px 7px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

#rollButton{
    background:
        linear-gradient(
            180deg,
            #4b4b4b,
            #242424
        );
}

#bankButton{
    background:
        linear-gradient(
            180deg,
            #5a4a24,
            #2c2412
        );
}

.action-buttons button:active{
    transform:translateY(1px);

    box-shadow:
        0 1px 3px rgba(0,0,0,0.5);
}

/* SCORE */

.score-list{
    text-align:left;
    padding:6px;
}

.score-list div{
    min-height:44px;

    margin:4px 0;
    padding:8px 10px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;

    font-size:16px;
}

.score-list span{
    min-width:48px;

    padding:4px 8px;

    text-align:center;

    background:#111;
    border-radius:6px;

    color:#eee;

    font-size:16px;
    font-weight:bold;
}

hr {

    border: 0;

    height: 1px;

    background: #555;

}



/* HIGHSCORE */

.highscore{
    width:100%;
    max-width:420px;

    margin:10px auto;
    padding:8px;

    background:rgba(0,0,0,0.25);

    border-radius:10px;
}

.highscore-row{
    display:grid;
    grid-template-columns:45px 1fr 70px;
    align-items:center;

    min-height:44px;
    padding:6px 10px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.highscore-row:last-child{
    border-bottom:0;
}

.highscore-place{
    text-align:center;
    font-size:18px;
}

.highscore-name{
    text-align:left;

    font-size:16px;
    font-weight:600;
}

.highscore-score{
    text-align:right;

    font-size:17px;
    font-weight:bold;

    color:#f0d58a;
}

/* BOTTOM MENU */

#bottomMenu{
    height:54px;
    flex-shrink:0;

    display:none;
    align-items:flex-start;

    padding:0 0 12px 0;

    background:#000;

    border-top:0;

    z-index:10;
}

#bottomMenu button{
    flex:1;

    width:auto;
    max-width:none;

    height:42px;
    min-height:42px;

    margin:0;
    padding:0;

    background:
        linear-gradient(
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.55)
        ),
        url("../pix/wood3.jpg");

    background-size:cover;
    background-position:center;

    border:0;
    border-radius:0;
    box-shadow:none;

    color:white;

    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
}

#bottomMenu button + button{
    border-left:1px solid rgba(255,255,255,0.18);
}

#bottomMenu button:active{
    background:rgba(255,255,255,0.12);
    transform:none;
}

#threeContainer{
    width:100%;
    flex:1;
    min-height:300px;
    background:#444;
    overflow:hidden;
    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.45);
}

.yatzy-effect {

    color: #ffd700;
    font-size: 34px;
    font-weight: 900;

    animation:
        yatzyPop 0.4s ease-out,
        yatzyPulse 0.6s infinite alternate;

}


@keyframes yatzyPop {

    0% {
        transform: scale(0);
        opacity:0;
    }

    70% {
        transform: scale(1.3);
        opacity:1;
    }

    100% {
        transform: scale(1);
    }

}


@keyframes yatzyPulse {

    from {

        text-shadow:
        0 0 5px #fff,
        0 0 10px gold;

    }


    to {

        text-shadow:
        0 0 15px #fff,
        0 0 30px gold,
        0 0 50px orange;

    }

}

.confetti-container{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    pointer-events:none;

    overflow:hidden;

    z-index:999;

}


.confetti{

    position:absolute;

    top:-20px;

    width:10px;
    height:18px;

    background:gold;

    animation: fall 4s ease-out forwards;

}


@keyframes fall{

    to{

        transform:
        translateY(110vh)
        rotate(720deg);

    }

}

/* ================================
   EXTRA YATZY POPUP - MOBILE
================================ */

#yatzyPopup{
    position:fixed;
    top:48px;
    right:6px;
    bottom:58px;

    width:min(260px,68vw);

    z-index:5000;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    pointer-events:none;
}

#yatzyPopup .yatzyPopup{
    width:100%;
    padding:10px;

    background:rgba(24,24,24,.97);

    border:1px solid #555;
    border-radius:10px;

    box-shadow:0 8px 25px rgba(0,0,0,.7);

    pointer-events:auto;
}

#yatzyPopup h2{
    margin:0 0 5px;
    font-size:19px;
    color:#ffd700;
}

#yatzyPopup p{
    margin:4px 0 7px;
    font-size:13px;
}

#yatzyPopup button{
    width:100%;
    min-height:34px;

    margin:3px 0;
    padding:5px 7px;

    border:1px solid #555;
    border-radius:6px;

    background:#292929;
    color:white;

    font-size:13px;
}

.bank-ready {

    animation: bankPulse 1s infinite alternate;

}


@keyframes bankPulse {

    from {

        box-shadow:
        0 0 5px #ffd700;

    }


    to {

        box-shadow:
        0 0 20px #ffd700,
        0 0 35px orange;

    }

}

.bonus-effect{

    position:fixed;

    top:35%;

    left:50%;

    transform:translate(-50%,-50%);

    color:#ffd700;

    font-size:30px;
    white-space:nowrap;

    font-weight:900;

    text-shadow:
        0 0 10px gold,
        0 0 25px orange;

    animation:
        bonusPop 0.5s ease-out;

    z-index:10000;

}


@keyframes bonusPop{

    0%{
        transform:
        translate(-50%,-50%)
        scale(0);
    }

    70%{
        transform:
        translate(-50%,-50%)
        scale(1.2);
    }

    100%{
        transform:
        translate(-50%,-50%)
        scale(1);
    }

}

#opponentStatus{
    position: fixed;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    z-index: 9999;

    font-size: 32px;
    font-weight: bold;

    pointer-events: none;
    opacity: 0;
}

#opponentStatus.show{
    animation: opponentStatusFly 2.8s ease-out forwards;
}

@keyframes opponentStatusFly{

    0%{
        opacity: 0;
        transform:
            translate(-50%, 80px)
            scale(0.7);
    }

    15%{
        opacity: 1;
    }

    70%{
        opacity: 1;
    }

    100%{
        opacity: 0;
        transform:
            translate(-50%, -120px)
            scale(1.15);
    }

}

#networkPlayerCount{
    font-size: 18px;
    padding: 8px 12px;
    margin-top: 6px;
    min-width: 140px;
}

.net-player-slots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:18px 0;
}

.net-player-slot{
    min-width:55px;
    text-align:center;
}

.net-player-number{
    font-size:16px;
}

.net-player-status{
    font-size:24px;
    font-weight:bold;
}

.net-player-name{
    font-size:14px;
    margin-top:4px;
}

/* ================================
   CHAT
================================ */

.chat-button{
    position:absolute;
    top:55px;
    right:10px;

    width:42px;
    height:42px;

    padding:0;

    border:none;
    border-radius:50%;

    font-size:22px;

    z-index:30;
}

.chat-box{
    display:none;

    position:absolute;
    top:105px;
    right:10px;

    width:260px;
    max-width:calc(100% - 20px);

    padding:10px;

    border-radius:12px;

    background:rgba(20,20,20,0.95);

    z-index:40;
}

.chat-box.show{
    display:block;
}

.chat-header{
    text-align:center;
    font-weight:bold;
    margin-bottom:8px;
}

.chat-messages{
    min-height:60px;
    max-height:140px;

    overflow-y:auto;

    margin-bottom:8px;

    font-size:14px;
}

.chat-input-row{
    display:flex;
    gap:6px;
}

.chat-input-row input{
    flex:1;
    min-width:0;
}

.chat-input-row button{
    width:auto;
    padding:6px 10px;
}

.chat-emojis{
    display:grid;
    grid-template-columns:repeat(6, 1fr);

    gap:3px;
    margin-bottom:6px;
}

.chat-emojis button{
    width:100%;
    height:25px;
    min-height:25px;

    margin:0;
    padding:0;

    border:none;
    border-radius:5px;

    font-size:17px;
    cursor:pointer;
}

#chatButton{
    display:none;
}

#topBar{
    position:relative;
}

#headerMenuButton{
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);

    width:28px;
    max-width:none;
    height:28px;
    min-height:0;

    margin:0;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;

    color:white;
    font-size:22px;
    font-weight:normal;
    line-height:1;

    z-index:10;
}

.main-menu{
    display:none;

    position:absolute;
    top:52px;
    left:8px;

    width:150px;
    padding:6px;

    background:#181818;
    border-radius:8px;

    z-index:110;
}

.main-menu.show{
    display:block;
}

.main-menu button{
    display:block;
    width:100%;

    margin:2px 0;
    padding:8px;

    border:none;
    border-radius:5px;

    text-align:left;
    font-size:14px;
}

/* Mulig score */

.score-list div.score-possible{
    background:rgba(70,140,80,0.18);
}

.score-list div.score-possible span{
    color:#b9e8bf;
}


/* Ingen point */

.score-list div.score-empty{
    opacity:0.65;
}

.score-list div.score-empty span{
    color:#777;
}

/* =====================================
   SCORE TOTALS
===================================== */

.score-list div.score-total{
    background:rgba(150,110,40,0.22);
    border-color:rgba(220,180,80,0.25);
    opacity:1;
}

.score-list div.score-total span{
    background:rgba(0,0,0,0.35);
    color:#f0d58a;
}


/* TOTAL */

.score-list div.score-grand-total{
    background:rgba(180,130,35,0.32);

    font-weight:bold;

    border-color:rgba(255,210,90,0.4);
}

.score-list div.score-grand-total span{
    color:#ffd86a;
    font-size:18px;
}

#setupScreen{
    position:relative;
}

#setupMessage{
    position:absolute;
    left:50%;
    top:35%;

    transform:translate(-50%,-50%);

    padding:12px 18px;

    background:rgba(20,20,20,0.95);
    border-radius:10px;

    font-weight:bold;
    font-size:16px;

    opacity:0;
    pointer-events:none;

    transition:opacity 0.2s;

    z-index:100;
}

#setupMessage.show{
    opacity:1;
}

.back-button{
    width:auto;
    min-height:36px;

    margin:14px auto 4px;
    padding:6px 16px;

    background:transparent;

    border:1px solid rgba(255,255,255,0.18);
    border-radius:7px;

    box-shadow:none;

    color:#aaa;

    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

.back-button:active{
    background:rgba(255,255,255,0.08);
    color:white;
    transform:none;
}

/* ================================
   SPROG I BURGER
================================ */
.menu-divider{height:1px;margin:5px 4px;background:rgba(255,255,255,.15);}
/* Sprog åbner som side-menu, så alle sprog er synlige uden at gøre burger-menuen højere. */
.language-choices{
    display:none;
    position:absolute;
    left:calc(100% + 6px);
    bottom:6px;
    width:150px;
    padding:6px;
    background:#181818;
    border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,.45);
    z-index:111;
}
.language-choices.show{display:block;}
.language-choices button{padding-left:18px;}
@media (max-width:330px){
    .language-choices{left:auto;right:calc(-100% - 6px);}
}


/* =====================================
   SLUTSCORE - GAME OVER
===================================== */

#finalScoreScreen{
    padding:4px 5px;
    overflow:hidden;
}

#finalScoreScreen.screen.active{
    display:flex;
    flex-direction:column;
}

#finalScoreScreen h2{
    flex:0 0 auto;
    margin:0 0 3px;
    font-size:15px;
    line-height:20px;
}

.final-score-list{
    flex:1;
    min-height:0;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1px;
}

.final-score-row{
    flex:1 1 0;
    min-height:0;
    display:grid;
    align-items:stretch;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.07);
    border-radius:3px;
    font-size:clamp(9px,1.45vh,11px);
    line-height:1;
}

.final-score-header{
    flex:1.65 1 0;
    background:#181818;
    font-weight:bold;
}

.final-score-row>div{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1px 2px;
    border-right:1px solid rgba(255,255,255,.07);
    overflow:hidden;
}

.final-score-row>div:last-child{border-right:0;}

.final-score-header>div{
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.05;
    font-size:clamp(8px,1.35vh,10px);
}

.final-score-category{
    justify-content:flex-start !important;
    padding-left:4px !important;
    white-space:nowrap;
    font-size:clamp(9px,1.4vh,10.5px);
}

.final-score-total{
    background:rgba(150,110,40,.22);
    border-color:rgba(220,180,80,.25);
}

.final-score-total>div:not(:first-child){color:#f0d58a;}

.final-score-grand-total{
    background:rgba(180,130,35,.34);
    border-color:rgba(255,210,90,.4);
    font-weight:bold;
}

.final-score-grand-total>div:not(:first-child){color:#ffd86a;}


/* ================================
   PRIVAT / OFFENTLIGT NET-PLAY
================================ */
.network-game-type,
.network-join-block{
    width:100%;
    max-width:320px;
    margin:10px auto;
    padding:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
}
.network-public-check{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}
.network-public-check input{
    width:18px;
    height:18px;
}
.network-game-type-info{
    margin-top:5px;
    font-size:13px;
    line-height:1.3;
    opacity:.72;
    text-align:center;
}
.network-join-block h3{
    margin:0 0 4px;
    font-size:15px;
}
.network-or{
    margin:5px 0;
    text-align:center;
    opacity:.45;
}


.lobby-expiry{
    margin-top:10px;
    font-size:13px;
    font-variant-numeric:tabular-nums;
    opacity:.72;
}


/* ================================
   PREAPP UI FINISH - COMPACT NET-PLAY
   Kun layout/spacing. Ingen NET-PLAY logik.
================================ */
#createGameScreen,
#joinGameScreen{
    padding-top:6px;
    padding-bottom:6px;
}
#createGameScreen h2,
#joinGameScreen h2{
    margin:8px 0 12px;
}
#createGameScreen > label,
#joinGameScreen > label{
    display:block;
    margin:2px 0 1px;
}
#createGameScreen > input,
#joinGameScreen > input,
#joinGameScreen .network-join-block input{
    min-height:46px;
    padding:10px 14px;
    margin:5px auto;
}
#createGameScreen #networkPlayerCount{
    min-height:44px;
    padding:7px 12px;
    margin:4px auto 5px;
}
#createGameScreen button,
#joinGameScreen button{
    min-height:48px;
    padding:8px 12px;
    margin:4px auto;
}
#createGameScreen .network-game-type,
#joinGameScreen .network-join-block{
    margin:7px auto;
    padding:8px 10px;
}
#joinGameScreen .network-join-block + .network-join-block{
    margin-top:10px;
}
#joinGameScreen .network-join-block h3{
    margin:0 0 3px;
}
#createGameScreen .network-game-type-info,
#joinGameScreen .network-game-type-info{
    margin-top:3px;
    line-height:1.2;
}
#joinGameScreen #joinGameInfo,
#createGameScreen #createdGameInfo{
    margin:4px 0;
}
#joinGameScreen .net-player-slots,
#createGameScreen .net-player-slots{
    gap:9px;
    margin:10px 0;
}
#joinGameScreen .net-player-status,
#createGameScreen .net-player-status{
    font-size:21px;
}
#joinGameScreen .net-player-name,
#createGameScreen .net-player-name{
    margin-top:2px;
}
#joinGameScreen .lobby-expiry,
#createGameScreen .lobby-expiry{
    margin-top:6px;
}


/* ================================
   PREAPP UI FINISH #2
   Varm NET-PLAY tone + rent waiting room
================================ */

#createGameScreen .network-game-type,
#joinGameScreen .network-join-block{
    background:rgba(115,58,20,0.24);
    border-color:rgba(220,125,55,0.42);
}

#createGameScreen .network-game-type-info,
#joinGameScreen .network-game-type-info{
    color:#c8b5a6;
}

/* Når forbindelse er etableret får waiting room pladsen. */
#createGameScreen #createdGameInfo:not(:empty),
#joinGameScreen #joinGameInfo:not(:empty){
    margin-top:4px;
}

#createGameScreen #createdGameInfo:not(:empty) h3,
#joinGameScreen #joinGameInfo:not(:empty) h3{
    margin:5px 0 3px;
}

#createGameScreen #createdGameInfo:not(:empty) h1,
#joinGameScreen #joinGameInfo:not(:empty) h1{
    margin:2px 0 8px;
}

#createGameScreen #createdGameInfo:not(:empty) p,
#joinGameScreen #joinGameInfo:not(:empty) p{
    margin:7px 0;
}

.network-menu-info:empty{display:none;}
.network-cancel-message{
    display:block;
    width:min(92%,420px);
    margin:10px auto;
    padding:10px 12px;
    border:1px solid rgba(220,125,55,.42);
    border-radius:10px;
    background:rgba(115,58,20,.24);
    color:#f2dfcf;
    text-align:center;
    line-height:1.25;
}

/* NET-PLAY 1.2: spiller som har forladt kampen */
.player-left-label{
    display:block;
    margin-top:1px;
    font-size:9px;
    line-height:1;
    opacity:.65;
    font-weight:600;
    white-space:nowrap;
}

.player-name-left{
    text-decoration-line:line-through;
    text-decoration-thickness:2px;
}

/* ================= AVATAR TEST 1 ================= */
.avatar-menu-thumb{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:5px;border:2px solid #d9b44a}
.avatar-screen{padding:12px 10px 90px;overflow-y:auto}
.avatar-editor{max-width:680px;margin:0 auto;text-align:center;color:#fff}
.avatar-editor h2{margin:8px 0;font-size:26px}.avatar-editor h3{margin:14px 0 7px;font-size:14px;color:#f4d56a;letter-spacing:.5px}
.avatar-intro{margin:0 0 10px;color:#ddd}.avatar-preview{position:relative;width:118px;height:148px;margin:8px auto 12px;border:3px solid #d5ae43;border-radius:18px;overflow:hidden;background:#143d28;box-shadow:0 5px 18px #0008}
.avatar-preview-img{width:100%;height:100%;object-fit:cover}.avatar-die-logo{position:absolute;right:6px;bottom:5px;font-size:25px;filter:drop-shadow(0 2px 2px #000)}
.avatar-base-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-width:500px;margin:auto}.avatar-base-card{position:relative;padding:0;height:105px;overflow:hidden;border:2px solid #52715e;border-radius:12px;background:#123a27}.avatar-base-card img{width:100%;height:100%;object-fit:cover}.avatar-base-card span{position:absolute;left:5px;bottom:4px;width:22px;height:22px;border-radius:50%;background:#000a;color:#fff;line-height:22px}.avatar-base-card.selected{border-color:#ffd84d;box-shadow:0 0 0 2px #ffd84d55}
.avatar-swatches{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.avatar-swatch{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff55;box-shadow:0 2px 4px #0008}.avatar-swatch.selected{border-color:#fff;outline:3px solid #e6b83f;transform:scale(1.08)}
.skin-light{background:#f4d1b4}.skin-warm{background:#dca77e}.skin-tan{background:#b97850}.skin-brown{background:#815033}.skin-dark{background:#4b2c20}.hair-black{background:#171717}.hair-brown{background:#6b3f24}.hair-blonde{background:#e2bf69}.hair-red{background:#9f4929}.hair-grey{background:#888}.hair-white{background:#eee}.shirt-green{background:#1f7a4c}.shirt-blue{background:#2674b8}.shirt-red{background:#b92d35}.shirt-yellow{background:#f2cf36}.shirt-purple{background:#71449a}.shirt-black{background:#171717}.shirt-white{background:#eee}.shirt-orange{background:#d9782d}
.avatar-reward-note,.avatar-dog-note{max-width:520px;margin:14px auto;padding:9px 12px;border-radius:10px;background:#0003;color:#ddd}.avatar-actions{display:flex;justify-content:center;gap:10px;margin-top:14px}.avatar-actions button{min-width:145px}
@media(max-width:430px){.avatar-base-card{height:88px}.avatar-preview{width:100px;height:125px}.avatar-swatch{width:31px;height:31px}}


/* ================= TURN AVATAR TEST 2 ================= */
.turn-avatar{
    position:absolute;
    right:2px;
    bottom:78px;
    width:min(38vw,190px);
    height:min(48vh,330px);
    z-index:24;
    pointer-events:none;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:visible;
    filter:drop-shadow(0 7px 7px rgba(0,0,0,.6));
}
.turn-avatar-img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    object-position:right bottom;
}
.turn-avatar-name{
    position:absolute;
    right:8px;
    bottom:2px;
    max-width:145px;
    padding:4px 10px;
    border:1px solid rgba(255,216,77,.72);
    border-radius:14px;
    background:rgba(0,0,0,.68);
    color:#fff;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 2px 7px #0008;
}
@media(max-width:430px){
    .turn-avatar{width:39vw;height:39vh;bottom:78px;right:-3px}
    .turn-avatar-name{right:5px;font-size:11px;max-width:110px;padding:3px 8px}
}

/* ================= AVATAR TEST 3 FIXES ================= */
.avatar-preview-img,.avatar-base-card img{object-fit:contain}
.avatar-preview{background:transparent}
.turn-avatar{width:min(34vw,175px);height:min(43vh,300px)}
.turn-avatar-img{max-width:92%;max-height:92%}
.turn-avatar.turn-avatar-dog .turn-avatar-img{max-width:78%;max-height:82%}
@media(max-width:430px){.turn-avatar{width:34vw;height:35vh;bottom:78px;right:-3px}}

/* ================= AVATAR TEST 4 ================= */
.local-player-setup-row{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0}
.local-player-setup-row input{flex:1;min-width:0;margin:0!important}
.local-avatar-pick{width:auto!important;min-width:92px!important;padding:5px 8px!important;display:flex!important;align-items:center;justify-content:center;gap:5px;font-size:11px!important}
.local-avatar-pick img{width:30px;height:34px;object-fit:contain;display:block}
/* Mobil: aktiv spiller står øverst til venstre og holdes fri af bord/knapper. */
@media(max-width:700px){
  .turn-avatar{left:4px!important;right:auto!important;top:54px!important;bottom:auto!important;width:min(25vw,112px)!important;height:min(24vh,170px)!important;align-items:flex-start;justify-content:flex-start;filter:drop-shadow(0 5px 5px rgba(0,0,0,.6))}
  .turn-avatar-img{max-width:88%!important;max-height:88%!important;object-position:left top!important}
  .turn-avatar.turn-avatar-dog .turn-avatar-img{max-width:72%!important;max-height:74%!important}
  .turn-avatar-name{left:2px!important;right:auto!important;top:auto!important;bottom:0!important;max-width:100px!important;font-size:10px!important;padding:2px 6px!important}
}
/* ================= AVATAR TEST 5 - GRANNY LIVE COLORS ================= */
.avatar-preview-canvas{width:100%;height:100%;object-fit:contain;display:block}
.eye-blue,.eyes-blue{background:#2d82be}.eye-green,.eyes-green{background:#4c8246}.eye-grey,.eyes-grey{background:#788287}.eye-brown,.eyes-brown{background:#784623}.eye-darkbrown,.eyes-darkbrown{background:#41281c}.eye-amber,.eyes-amber{background:#c37819}
.hair-silver{background:#e0e0da}.hair-lightbrown{background:#97623d}.hair-darkbrown{background:#523122}

/* AVATAR TEST 6 - fixed live preview / scrolling controls */
#avatarScreen.avatar-screen{overflow:hidden;padding:8px 8px 74px;box-sizing:border-box}
#avatarScreen .avatar-editor-v6{height:100%;max-width:none;display:flex;flex-direction:column;overflow:hidden}
#avatarScreen .avatar-fixed-preview{order:-1;flex:0 0 34vh;min-height:190px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0d1712,#07100c);border:1px solid #ffffff18;border-radius:14px;margin-bottom:7px}
#avatarScreen .avatar-fixed-preview .avatar-preview{width:min(38vw,180px);height:100%;max-height:32vh;margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;background:transparent}
#avatarScreen .avatar-options-pane{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 5px 18px;scrollbar-gutter:stable}
#avatarScreen .avatar-options-pane h2{font-size:21px;margin:5px 0 2px}
#avatarScreen .avatar-intro{font-size:13px;margin-bottom:5px}
@media(min-width:600px){
 #avatarScreen .avatar-editor-v6{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,40%);gap:14px}
 #avatarScreen .avatar-options-pane{grid-column:1;grid-row:1;padding:0 8px 22px}
 #avatarScreen .avatar-fixed-preview{order:0;grid-column:2;grid-row:1;height:100%;max-height:none;margin:0;position:sticky;top:0}
 #avatarScreen .avatar-fixed-preview .avatar-preview{width:80%;height:94%;max-height:none}
}
/* AVATAR TEST 7 - compact controls */
.avatar-swatch{width:28px;height:28px;border-width:2px}
@media(max-width:430px){.avatar-swatch{width:27px;height:27px}}
/* AVATAR TEST 8 - mobile uses normal page scrolling; preview stays visible */
@media(max-width:599px){
 #avatarScreen.avatar-screen{overflow-y:auto!important;overflow-x:hidden!important;padding:8px 8px 74px!important;-webkit-overflow-scrolling:touch}
 #avatarScreen .avatar-editor-v6{height:auto!important;min-height:100%;overflow:visible!important;display:flex!important;flex-direction:column!important}
 #avatarScreen .avatar-fixed-preview{position:sticky!important;top:0!important;z-index:4;flex:0 0 31vh!important;min-height:175px!important}
 #avatarScreen .avatar-options-pane{overflow:visible!important;min-height:auto!important;padding-bottom:28px!important}
}
/* AVATAR TEST 9 - boxed editor and visible back control */
#avatarScreen .avatar-fixed-preview{border:2px solid #d8b83e!important;border-radius:16px!important}
#avatarScreen .avatar-options-pane{border:1px solid #ffffff18;border-radius:16px;background:#050806;padding-left:10px!important;padding-right:10px!important}
#avatarScreen .avatar-editor-top{display:flex;justify-content:flex-start;position:relative;z-index:6;padding:8px 0 2px}
#avatarScreen .avatar-back-top{border:1px solid #87918c;border-radius:14px;background:#28312f;color:#fff;padding:7px 14px;font-size:14px}

/* ================= AVATAR TEST 10 =================
   Mobile: compact controls, no duplicate top BACK button. */
@media(max-width:699px){
  #avatarScreen .avatar-editor-top{display:none!important}
  #avatarScreen .avatar-swatch{width:22px!important;height:22px!important;border-width:2px!important;outline-offset:1px!important}
  #avatarScreen .avatar-swatches{gap:7px!important;padding:6px 7px!important}
  #avatarScreen .avatar-options-pane h3{margin:10px 0 6px!important;font-size:13px!important}
  #avatarScreen .avatar-options-pane h2{margin-top:4px!important}
}
/* AVATAR TEST 11 - mobil: små farvevalg og ingen top-tilbage */
@media(max-width:700px){
 #avatarScreen .avatar-back-top{display:none!important}
 #avatarScreen .avatar-swatch{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;border-width:1px!important;outline-width:2px!important}
 #avatarScreen .avatar-swatches{gap:6px!important;padding:5px 6px!important}
 #avatarScreen .avatar-human-options h3,#avatarScreen .avatar-options-pane>h3{margin:8px 0 5px!important}
}

/* AVATAR TEST 12 - compact mobile controls */
@media (max-width: 600px){
  #avatarScreen .avatar-swatch{
    width:16px!important;height:16px!important;
    min-width:16px!important;min-height:16px!important;
    border-width:1px!important;outline-width:2px!important;
  }
  #avatarScreen .avatar-swatches{gap:5px!important;padding:4px 5px!important}
  #avatarScreen .avatar-human-options h3,
  #avatarScreen .avatar-options-pane>h3{font-size:12px!important;margin:7px 0 4px!important}
}

/* TEST 16e - mere naturlige avatarfarver */
.skin-fair{background:#f6d8c2}.skin-light{background:#edc3a7}.skin-peach{background:#dfa98b}.skin-warm{background:#cf9672}.skin-golden{background:#bd845f}.skin-tan{background:#a96f50}
.eyes-blue{background:#527e97}.eyes-green{background:#587956}.eyes-grey{background:#768084}.eyes-hazel{background:#7e6a48}.eyes-brown{background:#664834}.eyes-darkbrown{background:#42342d}

.skin-original{background:linear-gradient(135deg,#efc4a8,#c98e69,#8e5b43)!important}
.skin-light{background:#eec6aa!important}.skin-warm{background:#daa584!important}.skin-tan{background:#c28b65!important}.skin-brown{background:#9b6749!important}.skin-deep{background:#5b392b!important}
.hair-greywhite{background:#c2bfb5!important}.hair-grey{background:#7e7e7a!important}
.local-avatar-pick,.desktop-local-avatar-pick{position:relative!important;z-index:10!important;pointer-events:auto!important}
/* Avatar test 16i: skofarver */
.shoes-original{background:linear-gradient(135deg,#f2f2f2 0 45%,#777 46% 55%,#d5b45b 56% 100%)!important}
.shoes-green{background:#1e8446!important}.shoes-blue{background:#2674b8!important}.shoes-red{background:#be2d35!important}.shoes-yellow{background:#f2cf36!important}.shoes-purple{background:#71449a!important}.shoes-black{background:#232323!important}.shoes-white{background:#ebebeb!important}.shoes-orange{background:#d9782d!important}

/* Avatar 16j - pelsfarver */
.fur-original{background:linear-gradient(135deg,#d99652 0 48%,#f0c58d 49% 100%)!important}.fur-cream{background:#c7b29b!important}.fur-golden{background:#bc8c60!important}.fur-brown{background:#95655b!important}.fur-dark{background:#594d4b!important}.fur-grey{background:#9a9a9a!important}

/* TEST 16O: ufærdige avatarer er synlige, men tydeligt låst */
.avatar-base-card.avatar-base-locked{cursor:not-allowed;filter:saturate(.45) brightness(.62);opacity:.82}
.avatar-base-card.avatar-base-locked img{filter:grayscale(.18)}
.avatar-base-card .avatar-lock-cross{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:76px;font-weight:900;line-height:1;color:#e53935;text-shadow:0 2px 4px #000,0 0 2px #fff;pointer-events:none;z-index:3}
.avatar-base-card.avatar-base-locked span{z-index:4}
.avatar-base-card.avatar-base-locked:disabled{border-color:#5b625e}

/* TEST 16p - egen avatar erstatter hånden med terninger på mobil-forsiden */
#homeScreen .home-avatar-mobile{height:clamp(165px,29vh,270px);margin:0 0 2px;background:transparent;overflow:visible}
#homeScreen .home-avatar-mobile img{width:auto;max-width:82%;height:100%;max-height:100%;object-fit:contain;object-position:center bottom;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55))}
/* Avatar test 16x: bukser, original cap/t-shirt og justeret hudtone */
.pants-original,.tshirt-original,.cap-original{background:linear-gradient(135deg,#eee 0 42%,#777 43% 52%,#c7a46a 53% 100%)!important}
.pants-green,.tshirt-green{background:#1e8446!important}.pants-blue,.tshirt-blue{background:#2674b8!important}.pants-red,.tshirt-red{background:#be2d35!important}.pants-yellow,.tshirt-yellow{background:#f2cf36!important}.pants-purple,.tshirt-purple{background:#71449a!important}.pants-black,.tshirt-black{background:#232323!important}.pants-white,.tshirt-white{background:#ebebeb!important}.pants-orange,.tshirt-orange{background:#d9782d!important}
.skin-tan{background:#cd8e5c!important}
.hair-original{background:#19b51f!important}
.socks-original{background:linear-gradient(135deg,#f4e21f 0 50%,#fff 50% 100%)!important}
.socks-green{background:#1e8446!important}.socks-blue{background:#2674b8!important}.socks-red{background:#be2d35!important}.socks-yellow{background:#f2cf36!important}.socks-purple{background:#71449a!important}.socks-black{background:#232323!important}.socks-white{background:#ebebeb!important}.socks-orange{background:#d9782d!important}


/* TEST 16ab: vinder-avatar + avatar foran highscore */
.winner-avatar-wrap{height:210px;display:flex;align-items:flex-end;justify-content:center;margin:2px auto 8px;overflow:hidden;}
.winner-avatar-img{height:205px;width:150px;object-fit:contain;object-position:center bottom;display:block;}
.highscore-row{grid-template-columns:42px 48px minmax(0,1fr) auto;}
.highscore-avatar-slot{width:44px;height:52px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.highscore-avatar-img{width:42px;height:52px;object-fit:contain;object-position:center bottom;display:block;}

/* TEST 16ad: renderede avatarer på vinder/highscore */
#winnerScreen .winner-avatar-wrap{height:min(190px,26vh);min-height:120px;overflow:visible;}
#winnerScreen .winner-avatar-img{height:100%;width:min(145px,38vw);object-fit:contain;object-position:center bottom;}
#highscoreScreen .highscore-avatar-slot{display:flex!important;}
#highscoreScreen .highscore-avatar-img{display:block!important;visibility:visible!important;}

/* v5d: reserved tournament button slot */
.tournament-placeholder:disabled{opacity:1;cursor:default;pointer-events:none;}

.tournament-coming{max-width:420px;margin:35px auto;color:#fff;font-weight:700;line-height:1.5}

/* v8: avatar action buttons must fit narrow mobile screens */
.avatar-actions{width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px;padding:0 6px;}
.avatar-actions button{min-width:0!important;max-width:100%;flex:1 1 120px;box-sizing:border-box;padding-left:8px;padding-right:8px;font-size:clamp(12px,3.5vw,16px);white-space:normal;}

/* v9 tournament signup */
.sy-tournament-card{max-width:430px;margin:0 auto;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(0,0,0,.28);color:#fff;text-align:center}.sy-tournament-card h3{margin:2px 0 8px;color:#f3d66b;font-size:22px}.sy-tournament-status{font-weight:900;margin:8px 0 12px}.sy-tournament-join{width:auto!important;min-width:180px;margin:8px auto 16px!important}.sy-tournament-card h4{margin:12px 0 7px}.sy-tournament-players{max-height:210px;overflow:auto;text-align:left;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 12px}.sy-tournament-players div{padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.09)}.sy-tournament-players div:last-child{border-bottom:0}

/* v9c tournament overlay - independent of game screen navigation */
#syTournamentOverlay{display:none;position:fixed;inset:0;z-index:9000;background:rgba(4,10,7,.97);padding:58px 10px 12px;box-sizing:border-box;overflow:auto;color:#fff}
#syTournamentOverlay.show{display:block}
.sy-tournament-panel{width:min(460px,100%);margin:0 auto;text-align:center}
.sy-tournament-head{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.sy-tournament-head h2{margin:0;color:#fff}.sy-tournament-head button{position:absolute;right:0;top:-5px;width:42px!important;height:42px;padding:0!important;margin:0!important;min-width:0!important;border-radius:50%}
.sy-tournament-back{width:auto!important;min-width:160px;margin:18px auto 0!important}.sy-tournament-small{font-size:13px;opacity:.78}
/* v13u compact tournament podium */
.sy-tournament-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:9px 0 4px;align-items:end}
.sy-tournament-podium-player{min-width:0;text-align:center}
.sy-tournament-avatar{display:block;width:100%;height:clamp(130px,29vw,205px);object-fit:contain;object-position:bottom center;background:rgba(255,255,255,.04);border-radius:10px}
.sy-tournament-podium-name{font-size:clamp(12px,2.5vw,16px);font-weight:800;line-height:1.2;margin-top:4px;overflow-wrap:anywhere}

/* v13z: accessories share the left-side editor pane; avatar stays visible. */
#avatarScreen .avatar-accessories-pane{display:none;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px;background:#050806;border:1px solid #ffffff28;border-radius:16px;color:#fff}
#avatarScreen .avatar-accessories-open .avatar-options-pane{display:none!important}
#avatarScreen .avatar-accessories-open .avatar-accessories-pane{display:block;flex:1 1 auto}
#avatarScreen .sy-acc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#avatarScreen .sy-acc-top h2{font-size:18px;margin:0;color:#f3d66b}
#avatarScreen .sy-acc-top button{padding:7px 9px;border-radius:9px;white-space:nowrap}
#avatarScreen .sy-acc-tabs{display:flex;gap:6px;margin-bottom:10px}
#avatarScreen .sy-acc-tabs button{flex:1;min-width:0;border:0;border-radius:8px;padding:8px 5px;font-weight:800;font-size:12px}
#avatarScreen .sy-acc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
#avatarScreen .sy-sunglasses-preview{padding:1px;border:1px solid #ffffff30;border-radius:6px;background:transparent;cursor:pointer;min-width:0}
#avatarScreen .sy-sunglasses-preview.selected{border:2px solid #f4d15e;background:#ffffff1c}
#avatarScreen .sy-sunglasses-preview img{display:block;width:100%;height:54px;object-fit:contain}
#avatarScreen .sy-acc-items{max-width:100%}
@media(min-width:600px){#avatarScreen .avatar-accessories-open .avatar-accessories-pane{grid-column:1;grid-row:1}}
@media(max-width:599px){#avatarScreen .avatar-accessories-open .avatar-accessories-pane{overflow:visible!important;flex:auto!important}}

/* v13za: Repair accessory editor layout: same slot as colour controls. */
#avatarScreen .avatar-editor.avatar-accessories-open .avatar-options-pane,
#desktopAvatarScreen .avatar-editor.avatar-accessories-open .avatar-options-pane{display:none!important}
#avatarScreen .avatar-editor.avatar-accessories-open .avatar-accessories-pane,
#desktopAvatarScreen .avatar-editor.avatar-accessories-open .avatar-accessories-pane{display:block!important;box-sizing:border-box;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-column:1;grid-row:1;flex:1 1 auto;max-width:100%;padding:10px;background:#050806;border:1px solid #ffffff28;border-radius:16px;color:white}
#avatarScreen .avatar-editor.avatar-accessories-open .avatar-fixed-preview,
#desktopAvatarScreen .avatar-editor.avatar-accessories-open .avatar-fixed-preview{display:flex!important;visibility:visible!important;opacity:1!important}
#avatarScreen .avatar-editor.avatar-accessories-open .avatar-preview-canvas:not([hidden]),
#desktopAvatarScreen .avatar-editor.avatar-accessories-open .avatar-preview-canvas:not([hidden]){display:block!important}
#avatarScreen .avatar-editor .avatar-preview-canvas[hidden],
#desktopAvatarScreen .avatar-editor .avatar-preview-canvas[hidden]{display:none!important}
#desktopAvatarScreen .avatar-accessories-pane{display:none;min-width:0;min-height:0;overflow:auto}
#desktopAvatarScreen .sy-acc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#desktopAvatarScreen .sy-acc-tabs{display:flex;gap:6px;margin-bottom:10px}
#desktopAvatarScreen .sy-acc-tabs button{flex:1;min-width:0}
#desktopAvatarScreen .sy-acc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
#desktopAvatarScreen .sy-sunglasses-preview{padding:1px;border:1px solid #ffffff30;border-radius:6px;background:transparent;min-width:0}
#desktopAvatarScreen .sy-sunglasses-preview.selected{border:2px solid #f4d15e}
#desktopAvatarScreen .sy-sunglasses-preview img{width:100%;height:54px;object-fit:contain}
@media(max-width:599px){
 #avatarScreen .avatar-editor.avatar-accessories-open{display:flex!important;flex-direction:column!important}
 #avatarScreen .avatar-editor.avatar-accessories-open .avatar-fixed-preview{order:-1!important;position:sticky!important;top:0!important;flex:0 0 31vh!important;min-height:175px!important;z-index:4}
 #avatarScreen .avatar-editor.avatar-accessories-open .avatar-accessories-pane{order:0!important;overflow:visible!important;flex:1 1 auto!important}
}

/* v13zc: prevent a sticky black back-button strip across the editor. */
#avatarScreen .avatar-editor-top{position:relative!important;top:auto!important;background:transparent!important;z-index:1!important;}
#avatarScreen .avatar-accessories-pane .sy-acc-top{position:relative!important;background:transparent!important;}

/* v13zd: preserve identical editor footprint when switching between colors/accessories. */
#desktopAvatarScreen .avatar-editor-v6,
#desktopAvatarScreen .avatar-editor-v6.avatar-accessories-open{width:min(1180px,100%)!important;height:calc(100vh - 36px)!important;grid-template-columns:minmax(0,1fr) minmax(300px,38%)!important;gap:14px!important;align-items:stretch!important;}
#desktopAvatarScreen .avatar-editor-v6>.avatar-options-pane,
#desktopAvatarScreen .avatar-editor-v6.avatar-accessories-open>.avatar-accessories-pane{height:100%!important;max-height:100%!important;min-height:0!important;overflow-y:auto!important;box-sizing:border-box!important;}
#desktopAvatarScreen .avatar-editor-v6>.avatar-fixed-preview{height:100%!important;min-height:0!important;}
#avatarScreen .avatar-editor-v6.avatar-accessories-open{width:100%!important;max-width:100%!important;}
#avatarScreen .avatar-editor-v6.avatar-accessories-open>.avatar-accessories-pane{min-height:0;}

/* v13zf: fixed editor shell for all editor tabs */
#avatarScreen .avatar-editor-v6,#avatarScreen .avatar-editor-v6.avatar-accessories-open{width:100%!important;max-width:100%!important;min-height:0!important;box-sizing:border-box!important}#avatarScreen .avatar-editor-v6>.avatar-options-pane,#avatarScreen .avatar-editor-v6>.avatar-accessories-pane{min-height:0;overflow-y:auto}
.avatar-swatch.hair-none{background:#17221e!important;color:#fff!important;font-weight:900!important;font-size:24px!important;display:inline-flex!important;align-items:center;justify-content:center;}

@media(max-width:767px){
.avatar-editor-host .avatar-fixed-preview{cursor:zoom-in}
.avatar-editor-host .avatar-fixed-preview.sy-preview-expanded{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;z-index:999999!important;background:#03140f!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:zoom-out;overflow:hidden!important}
.avatar-editor-host .avatar-fixed-preview.sy-preview-expanded .avatar-preview{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:flex!important;align-items:center!important;justify-content:center!important}
.avatar-editor-host .avatar-fixed-preview.sy-preview-expanded img,.avatar-editor-host .avatar-fixed-preview.sy-preview-expanded canvas{object-fit:contain!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}
}

@media(max-width:767px){
body>.avatar-fixed-preview.sy-preview-expanded{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;z-index:2147483000!important;background:#03140f!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:12px!important;box-sizing:border-box!important}
body>.avatar-fixed-preview.sy-preview-expanded .avatar-preview{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
body>.avatar-fixed-preview.sy-preview-expanded canvas,body>.avatar-fixed-preview.sy-preview-expanded img{width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
}
.avatar-editor .avatar-swatch.hair-none{background:#18251e!important;color:white!important;font-size:25px!important;line-height:1!important;border:2px solid #eee!important}

/* Explicit minus swatch, independent of color-selector backgrounds */
.avatar-editor-v6 .avatar-swatches .avatar-swatch.hair-none{background:#24332d!important;background-image:none!important;color:#fff!important;border:2px solid #fff!important;border-radius:50%!important;font-size:25px!important;font-weight:900!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-shadow:none!important;line-height:1!important;opacity:1!important;visibility:visible!important}

/* Original hair color is not necessarily green. Circular reset icon. */
.avatar-editor .avatar-swatch.hair-original{background:#53615a!important;color:#fff!important;font-size:23px!important;font-weight:800!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.avatar-editor .avatar-swatch.hair-none{background:#17221e!important;color:white!important;font-size:25px!important;font-weight:900!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:2px solid white!important;border-radius:50%!important}

/* v13zw: final podium order 2 - 1 - 3, winner raised */
.sy-podium-place-1{transform:translateY(-12px)}
.sy-podium-place-1 .sy-tournament-avatar{height:clamp(145px,32vw,225px)}

/* v13zx: prominent persistent tiebreak, independent of scrolling and polling */
.sy-tiebreak-modal{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.87);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;overflow-y:auto}
.sy-tiebreak-box{box-sizing:border-box;width:min(440px,100%);max-height:95dvh;overflow-y:auto;padding:24px 18px;border:3px solid #f5c85c;border-radius:18px;background:#111e1c;color:#fff;text-align:center;box-shadow:0 0 45px rgba(245,200,92,.5)}
.sy-tiebreak-box h2{color:#ffdb6e;font-size:clamp(26px,7vw,38px);margin:0 0 12px}.sy-tiebreak-box p{font-size:17px;line-height:1.4}
.sy-tiebreak-seconds{font-size:clamp(48px,15vw,78px);font-weight:900;color:#ffdb6e;font-variant-numeric:tabular-nums}
.sy-tiebreak-box select{display:block;width:100%;font-size:28px;padding:12px;margin:12px 0;background:#fff;color:#111}
.sy-tiebreak-box button{width:100%;font-size:20px;font-weight:900;padding:16px;background:#e9b940;color:#171717;border-radius:12px}

/* v13zy: tiebreak stays centered above every game overlay. */
.sy-tiebreak-modal{z-index:2147483646!important;position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;}
.sy-tiebreak-box{max-height:calc(100dvh - 30px)!important;overflow-y:auto!important;}

.fur-black{background:#2b2a2b!important;border:1px solid #888!important}

/* Flag selection: compact images, selected border, no empty accessory folders. */
#avatarScreen .sy-flag-grid,#desktopAvatarScreen .sy-flag-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#avatarScreen .sy-flag-choice,#desktopAvatarScreen .sy-flag-choice{background:#18231d;color:#fff;border:2px solid #ffffff35;border-radius:9px;min-width:0;min-height:73px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5px;cursor:pointer}
#avatarScreen .sy-flag-choice.selected,#desktopAvatarScreen .sy-flag-choice.selected{border-color:#f4d15e;box-shadow:inset 0 0 0 1px #f4d15e}
#avatarScreen .sy-flag-choice img,#desktopAvatarScreen .sy-flag-choice img{width:100%;max-height:43px;object-fit:contain}
#avatarScreen .sy-flag-choice small,#desktopAvatarScreen .sy-flag-choice small{font-size:10px;opacity:.85}

/* v14c: fixed bottom actions respect dynamic mobile viewport and safe area */
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
  .screen { max-height: 100dvh; }
}

/* v14f: swatches match the supplied dog-body PNG variants, light to dark. */
.avatar-swatch.fur-white{background:#ededeb!important}
.avatar-swatch.fur-cream{background:#cbb49e!important}
.avatar-swatch.fur-golden{background:#c58d68!important}
.avatar-swatch.fur-original{background:#ce956f!important}
.avatar-swatch.fur-midbrown{background:#986344!important}
.avatar-swatch.fur-brown{background:#633e35!important}
.avatar-swatch.fur-grey{background:#777777!important}
.avatar-swatch.fur-black{background:#272727!important}

#syTournamentOverlay.show{background:#071711!important;isolation:isolate;}

/* Highscore responsive layout TEST146: preserve ten visible entries when height allows. */
#highscoreScreen{box-sizing:border-box;overflow-y:auto;}
#highscoreScreen .highscore{box-sizing:border-box;width:min(96vw,690px);max-width:690px;margin:8px auto;padding:6px;}
#highscoreScreen .highscore-row{box-sizing:border-box;grid-template-columns:clamp(30px,5vw,48px) clamp(54px,8vw,86px) minmax(0,1fr) auto;gap:clamp(5px,1vw,12px);min-height:clamp(58px,7.4vh,78px);padding:3px clamp(6px,1vw,12px);}
#highscoreScreen .highscore-avatar-slot{width:100%;height:clamp(52px,7vh,72px);overflow:visible;}
#highscoreScreen .highscore-avatar-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;}
#highscoreScreen .highscore-place{font-size:clamp(17px,1.5vw,24px);}
#highscoreScreen .highscore-name{font-size:clamp(15px,1.25vw,21px);min-width:0;overflow-wrap:anywhere;}
#highscoreScreen .highscore-score{font-size:clamp(16px,1.4vw,23px);}
@media (max-height:720px){#highscoreScreen .highscore-row{min-height:54px;}#highscoreScreen .highscore-avatar-slot{height:50px;}}
@media (max-width:600px){#highscoreScreen .highscore{width:100%;}#highscoreScreen .highscore-row{grid-template-columns:30px 58px minmax(0,1fr) auto;gap:5px;min-height:59px;}#highscoreScreen .highscore-avatar-slot{height:55px;}}

/* TEST147 — GPGPC landscape: size actual highscore rows and tournament content. */
@media (min-width:900px) and (min-height:600px) {
 #highscoreScreen{display:none; padding:clamp(12px,2vh,24px);}
 #highscoreScreen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;gap:clamp(4px,.6vh,9px);}
 #highscoreScreen>h2{flex:none;margin:0;font-size:clamp(25px,2.3vw,36px);}
 #highscoreScreen .highscore{flex:0 1 auto;overflow:auto;width:min(80vw,860px);max-width:860px;margin:0 auto;padding:0 4px;}
 #highscoreScreen .highscore-row{grid-template-columns:58px 90px minmax(0,1fr) 90px;min-height:clamp(58px,7.4vh,83px);padding:2px 12px;margin:2px 0;border:1px solid #343434;border-radius:7px;background:linear-gradient(#292929,#1b1b1b);}
 #highscoreScreen .highscore-avatar-slot{height:clamp(54px,7.1vh,78px);width:88px;}
 #highscoreScreen .highscore-avatar-img{height:100%;width:100%;}
 #highscoreScreen .highscore-name{font-size:clamp(17px,1.3vw,23px);}
 #highscoreScreen .highscore-score{font-size:clamp(18px,1.4vw,24px);}
 #highscoreScreen>.back-button{flex:none;margin:0 auto;min-height:clamp(40px,5vh,54px);width:min(75vw,480px);max-width:480px;font-size:clamp(16px,1.2vw,21px);}
 #syTournamentOverlay{padding:clamp(18px,3vh,40px) 18px 28px;}
 #syTournamentOverlay .sy-tournament-panel{width:min(88vw,920px);max-width:920px;}
 #syTournamentOverlay .sy-tournament-card{max-width:none;width:100%;padding:clamp(18px,2.2vw,28px);font-size:clamp(16px,1.15vw,21px);}
 #syTournamentOverlay .sy-tournament-card h3{font-size:clamp(23px,1.8vw,31px);}
 #syTournamentOverlay .sy-tournament-head h2{font-size:clamp(26px,2vw,36px);}
 #syTournamentOverlay .sy-tournament-small{font-size:clamp(15px,1.05vw,19px);}
 #syTournamentOverlay .sy-tournament-players{max-height:36vh;font-size:inherit;}
 #syTournamentOverlay button{font-size:clamp(16px,1.15vw,21px);min-height:44px;}
 #syTournamentOverlay .sy-tournament-podium{gap:16px;}
 #syTournamentOverlay .sy-tournament-avatar{height:clamp(180px,29vh,340px);}
 #createGameScreen,#joinGameScreen{font-size:clamp(17px,1.25vw,22px);}
 #createGameScreen h2,#joinGameScreen h2{font-size:clamp(26px,2vw,34px);}
 #createGameScreen input,#createGameScreen select,#joinGameScreen input{font-size:clamp(17px,1.15vw,21px);}
 #createGameScreen button,#joinGameScreen button{font-size:clamp(16px,1.1vw,20px);min-height:50px;}
 #createGameScreen .net-player-name,#joinGameScreen .net-player-name{font-size:clamp(17px,1.1vw,21px);}
}

/* TEST148: large landscape GPGPC screens: enlarge the CONTENT, not only the shell. */
@media (min-width:900px) and (min-height:600px) {
 #networkScreen .menuBox{box-sizing:border-box;width:min(78vw,760px);max-width:760px;padding:clamp(22px,3vh,40px);margin:clamp(25px,7vh,75px) auto 0;}
 #networkScreen .menuBox h2{font-size:clamp(30px,2.6vw,42px);margin:0 0 22px;}
 #networkScreen .menuBox .setup-info{font-size:clamp(19px,1.4vw,24px);margin-bottom:28px;}
 #networkScreen .menuBox button{box-sizing:border-box;width:90%;max-width:620px;min-height:clamp(58px,7vh,76px);font-size:clamp(19px,1.5vw,25px);margin:12px auto;}
 #createGameScreen,#joinGameScreen{box-sizing:border-box;width:min(90vw,850px);max-width:850px;height:auto;max-height:calc(100% - 30px);margin:15px auto;padding:clamp(22px,3vw,44px);border:1px solid #ffffff30;border-radius:14px;background:#141414;overflow-y:auto;}
 #createGameScreen #createGameForm,#joinGameScreen #joinGameForm{width:100%;max-width:720px;margin:auto;}
 #createGameScreen input:not([type=checkbox]),#createGameScreen select,#joinGameScreen input{box-sizing:border-box;width:90%;max-width:650px;min-height:54px;font-size:clamp(19px,1.4vw,24px);}
 #createGameScreen button,#joinGameScreen button{box-sizing:border-box;width:90%;max-width:650px;min-height:60px;font-size:clamp(19px,1.4vw,24px);}
 #createGameScreen .network-game-type,#joinGameScreen .network-join-block{box-sizing:border-box;width:90%;max-width:650px;padding:18px 22px;font-size:clamp(18px,1.35vw,23px);}
 #createGameScreen .network-game-type-info,#joinGameScreen .network-game-type-info{font-size:clamp(16px,1.1vw,20px);line-height:1.35;}
 #createGameScreen .net-player-slots,#joinGameScreen .net-player-slots{max-width:680px;margin:14px auto;}
 #createGameScreen .net-player-slot,#joinGameScreen .net-player-slot{font-size:clamp(18px,1.35vw,24px);padding:10px;}
 #syTournamentOverlay .sy-tournament-panel{box-sizing:border-box;width:min(90vw,980px);max-width:980px;}
 #syTournamentOverlay .sy-tournament-card{box-sizing:border-box;width:100%;max-width:none!important;padding:clamp(20px,2.5vw,38px);font-size:clamp(19px,1.4vw,24px);line-height:1.45;}
 #syTournamentOverlay .sy-tournament-card h3{font-size:clamp(26px,2vw,34px);}
 #syTournamentOverlay .sy-tournament-head h2{font-size:clamp(28px,2.2vw,38px);}
 #syTournamentOverlay .sy-tournament-small{font-size:clamp(17px,1.2vw,21px);}
 #syTournamentOverlay .sy-tournament-players{max-height:42vh;font-size:clamp(19px,1.3vw,23px);}
 #syTournamentOverlay .sy-tournament-players div{padding:12px;}
 #syTournamentOverlay button{font-size:clamp(19px,1.3vw,23px);min-height:55px;padding:12px 20px;max-width:none;}
 #syTournamentOverlay .sy-tournament-avatar{height:clamp(230px,35vh,420px);}
 #highscoreScreen .highscore{width:min(92vw,960px);max-width:960px;}
 #highscoreScreen .highscore-row{grid-template-columns:55px 130px minmax(0,1fr) 95px;min-height:clamp(88px,11vh,120px);gap:14px;padding:3px 16px;}
 #highscoreScreen .highscore-avatar-slot{width:130px;height:clamp(84px,10.5vh,114px);overflow:visible;}
 #highscoreScreen .highscore-avatar-img{width:100%;height:100%;object-fit:contain;transform:scale(1.18);transform-origin:center bottom;}
 #highscoreScreen .highscore-name{font-size:clamp(20px,1.5vw,26px);}
 #highscoreScreen .highscore-score{font-size:clamp(22px,1.6vw,28px);}
}

/* TEST151: Larger highscore avatar showcase on wide emulator screens. */
@media (min-width:900px) and (min-height:600px){
 #highscoreScreen .highscore-row{grid-template-columns:55px 170px minmax(0,1fr) 95px;min-height:clamp(120px,14.8vh,158px);gap:14px;}
 #highscoreScreen .highscore-avatar-slot{width:170px;height:clamp(112px,14vh,150px);}
 #highscoreScreen .highscore-avatar-img{transform:scale(1.25);transform-origin:center bottom;}
}