/* HIER KANNST DU SCHRIFTEN, FARBEN UND GAME-LOOK ANPASSEN */
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#242424,#090909 55%);color:#fff;font-family:'Fredoka',Arial,sans-serif}
.page{max-width:1220px;margin:0 auto;padding:18px}
.hidden{display:none!important}
.hero{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#252525,#151515);border:1px solid #333;border-radius:22px;padding:22px;margin-bottom:14px;box-shadow:0 10px 35px rgba(0,0,0,.35)}
h1{font-size:48px;margin:0 0 6px;letter-spacing:.5px}
h2{margin-top:0}
p{color:#ddd}
button{background:#ffcc00;color:#111;border:0;padding:11px 18px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #8f7300}
button:hover{transform:translateY(1px);box-shadow:0 3px 0 #8f7300}
button.secondary{background:#2e2e2e;color:#fff;box-shadow:0 4px 0 #111;border:1px solid #444}
button.small{font-size:12px;padding:8px 10px}
input{width:100%;max-width:360px;padding:14px 16px;border-radius:12px;border:1px solid #555;background:#111;color:#fff;font-size:18px;margin:8px 8px 8px 0}
.panel{background:rgba(30,30,30,.92);border:1px solid #383838;border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.start-panel{text-align:center}
.topbar{display:flex;gap:14px;align-items:center;justify-content:space-between;background:#202020;padding:12px 16px;border-radius:16px;margin:14px 0;flex-wrap:wrap;border:1px solid #3a3a3a}
#gameArea{position:relative;width:100%;aspect-ratio:16/9;border:3px solid #444;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 35px rgba(0,0,0,.6)}
#roomImage{width:100%;height:100%;object-fit:cover;display:block}
#objectsLayer{position:absolute;inset:0}
.hidden-object{position:absolute;width:6%;min-width:44px;cursor:pointer;transition:.18s transform,.25s opacity;filter:drop-shadow(0 4px 6px rgba(0,0,0,.75))}
.hidden-object:hover{transform:scale(1.22) rotate(-3deg)}
.hidden-object.found{opacity:0;pointer-events:none}
.object-list ul{margin:0;padding-left:20px;columns:2}
.object-list li{padding:5px 0}
.object-list li.done{text-decoration:line-through;color:#888}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#highscoreList{padding-left:24px;max-height:330px;overflow:auto}
#highscoreList li{padding:5px 0;border-bottom:1px solid #333}
.bonus-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.bonus-gallery img{width:100%;border-radius:12px;border:1px solid #444;opacity:.95}
.bonus-gallery .locked{height:75px;border-radius:12px;border:1px dashed #555;display:flex;align-items:center;justify-content:center;color:#777;background:#151515}
.ad{display:flex;align-items:center;justify-content:center;color:#aaa;background:repeating-linear-gradient(45deg,#1b1b1b,#1b1b1b 10px,#222 10px,#222 20px);border:1px dashed #555;border-radius:14px;margin:14px 0;text-align:center}
.ad-top,.ad-bottom{min-height:90px}
.ad-modal{min-height:250px;max-width:336px;margin:16px auto}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.modal-card{background:#222;border:1px solid #555;border-radius:22px;padding:22px;max-width:560px;text-align:center;box-shadow:0 0 45px #000}
/* HIER WIRD DIE GRÖSSE DES BONUS-/GESCHAFFT-BILDES IM MODAL GESTEUERT */
.modal-card img{
width:auto;
max-width:400px;
max-height:250px;
object-fit:contain;
display:block;
margin:0 auto 20px auto;
border-radius:16px;
border:1px solid #444;
}
@media(max-width:800px){h1{font-size:34px}.hero{display:block}.grid{grid-template-columns:1fr}.hidden-object{width:10%}.object-list ul{columns:1}.ad-top,.ad-bottom{min-height:80px}}


.progress-wrap{
width:220px;height:24px;background:#333;border-radius:20px;overflow:hidden;
box-shadow:0 0 12px rgba(255,100,0,.5)
}
.fire-progress{
width:0%;height:100%;
background:linear-gradient(90deg,#ff0000,#ff7b00,#ffd000,#ff3c00);
background-size:300% 100%;
animation:fireMove 1s linear infinite;
transition:width .4s ease;
}
@keyframes fireMove{
from{background-position:0 0}to{background-position:300% 0}
}
.share-box{margin:15px 0}
@media(max-width:800px){
.progress-wrap{width:100%;order:10}
.topbar{flex-direction:column;align-items:stretch}
button,input{min-height:48px}
}


/* Schrift- und Game-Look-Upgrade */
h1{
font-size:clamp(42px,8vw,82px);
font-weight:700;
color:#ffd700;
line-height:1;
letter-spacing:.5px;
text-shadow:
0 0 5px #ffae00,
0 0 14px #ffae00,
0 0 30px #ff5a00,
0 0 55px #ff2200;
}

.hero p{
font-size:clamp(18px,3vw,25px);
font-weight:600;
color:#fff2b8;
text-shadow:0 2px 10px rgba(0,0,0,.7);
}

h2{
font-size:clamp(25px,4vw,38px);
font-weight:700;
color:#ffd700;
text-shadow:0 0 10px rgba(255,130,0,.9);
}

.object-list h2::before{
content:"🔥 ";
}

.object-list li{
font-size:clamp(18px,3vw,24px);
font-weight:600;
}

.topbar{
font-size:clamp(16px,2.6vw,20px);
font-weight:600;
}

button{
font-family:'Fredoka',Arial,sans-serif;
font-size:clamp(16px,2.8vw,20px);
letter-spacing:.2px;
}

input{
font-family:'Fredoka',Arial,sans-serif;
}

.modal-card h2{
font-size:clamp(30px,6vw,48px);
}

.modal-card p,.share-box h3{
font-size:clamp(20px,4vw,30px);
font-weight:700;
color:#fff2b8;
text-shadow:0 0 10px rgba(255,120,0,.7);
}


@media(max-width:800px){
.modal-card img{
max-width:100%;
max-height:180px;
}
}


/* BONUSBILD IM LEVEL-GESCHAFFT-DIALOG */
#bonusImage{
    width:180px !important;
    max-width:90%;
    max-height:100px !important;
    object-fit:contain;
    display:block;
    margin:0 auto 10px auto;
}


/* =====================================================
   MOBILE-OPTIMIERUNG FÜR LEVEL-GESCHAFFT-MODAL
   Hier kannst du Grösse von Bonusbild, Container,
   Werbung und Texten auf Handy/Tablet anpassen.
   ===================================================== */

.modal{
    overflow-y:auto;
    align-items:flex-start;
    padding:10px;
}

.modal-card{
    width:min(94vw,620px);
    max-width:620px;
    margin:10px auto;
    padding:14px;
    border-radius:18px;
}

#bonusImage{
    width:150px !important;
    max-width:75vw !important;
    max-height:80px !important;
    object-fit:contain;
    margin:0 auto 8px auto !important;
}

.modal-card h2{
    font-size:clamp(28px,7vw,42px);
    margin:8px 0 10px;
    line-height:1.05;
}

.modal-card p{
    font-size:clamp(18px,5vw,28px);
    margin:8px 0 12px;
    line-height:1.2;
}

.ad-modal{
    min-height:180px;
    max-width:300px;
    margin:12px auto;
}

.share-box{
    margin:10px 0 12px;
}

.share-box h3{
    font-size:clamp(20px,5.5vw,30px);
    margin:8px 0 12px;
    line-height:1.15;
}

#shareBtn,
#nextRoomBtn{
    width:min(260px,90%);
    margin:6px auto;
    display:block;
}

@media(max-width:600px){
    .modal{
        padding:6px;
    }

    .modal-card{
        width:96vw;
        padding:10px;
        border-radius:14px;
    }

    #bonusImage{
        width:120px !important;
        max-height:65px !important;
    }

    .modal-card h2{
        font-size:30px;
    }

    .modal-card p{
        font-size:20px;
    }

    .ad-modal{
        min-height:140px;
        max-width:260px;
    }

    .share-box h3{
        font-size:22px;
    }
}

@media(max-height:760px){
    #bonusImage{
        width:100px !important;
        max-height:55px !important;
    }

    .ad-modal{
        min-height:120px;
    }

    .modal-card h2{
        font-size:26px;
    }

    .modal-card p,
    .share-box h3{
        font-size:18px;
    }
}


/* =====================================================
   VOLLBILD-MODUS FÜR MOBILE / TABLET
   Der Button ist in der Topbar: "⛶ Vollbild"
   Im Vollbildmodus wird das Spielfeld maximal gross.
   ===================================================== */

.fullscreen-btn{
    background:#ff5a00;
    color:#fff;
    box-shadow:0 4px 0 #8a2d00;
}

body.fullscreen-game{
    background:#000;
}

body.fullscreen-game .page{
    max-width:none;
    width:100vw;
    padding:6px;
}

body.fullscreen-game .hero,
body.fullscreen-game .ad-top,
body.fullscreen-game .ad-bottom,
body.fullscreen-game .grid{
    display:none !important;
}

body.fullscreen-game .topbar{
    margin:4px 0 6px;
    border-radius:10px;
    padding:8px;
}

body.fullscreen-game #gameArea{
    width:100%;
    max-width:none;
    height:calc(100vh - 150px);
    aspect-ratio:auto;
    border-radius:12px;
}

body.fullscreen-game #roomImage{
    object-fit:contain;
    background:#000;
}

body.fullscreen-game .object-list{
    margin:6px 0 0;
    padding:10px;
}

body.fullscreen-game .object-list h2{
    font-size:22px;
    margin-bottom:6px;
}

body.fullscreen-game .object-list ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    padding-left:0;
    list-style:none;
}

body.fullscreen-game .object-list li{
    font-size:16px;
    padding:2px 0;
}

@media(max-width:800px){
    #gameArea{
        min-height:52vh;
    }

    .fullscreen-btn{
        width:100%;
    }

    body.fullscreen-game #gameArea{
        height:calc(100vh - 210px);
        min-height:55vh;
    }
}

@media(max-width:600px){
    body.fullscreen-game .topbar{
        font-size:14px;
        gap:6px;
    }

    body.fullscreen-game #gameArea{
        height:calc(100vh - 230px);
    }

    body.fullscreen-game .hidden-object{
        width:12%;
        min-width:46px;
    }
}

@media(orientation:landscape) and (max-height:600px){
    body.fullscreen-game .topbar{
        flex-direction:row;
        align-items:center;
        justify-content:center;
    }

    body.fullscreen-game #gameArea{
        height:calc(100vh - 95px);
    }

    body.fullscreen-game .object-list{
        display:none;
    }
}