/* 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;
    }
}


/* =====================================================
   MOBILE-FIX: SUCHOBJEKTE BLEIBEN INNERHALB DES BILDES
   Wenn Gegenstände auf Handy oben/unten über das Bild hinausragen,
   hier width/min-width reduzieren.
   ===================================================== */
.hidden-object{
    transform:translate(-50%, -50%);
    max-width:70px;
    max-height:70px;
    object-fit:contain;
}

.hidden-object:hover{
    transform:translate(-50%, -50%) scale(1.18) rotate(-3deg);
}

@media(max-width:800px){
    .hidden-object{
        width:8%;
        min-width:40px;
        max-width:54px;
        max-height:54px;
    }
}

@media(max-width:600px){
    .hidden-object{
        width:9%;
        min-width:30px;
        max-width:46px;
        max-height:46px;
    }

    body.fullscreen-game .hidden-object{
        width:9%;
        min-width:30px;
        max-width:46px;
        max-height:46px;
    }
}


/* =====================================================
   VORSCHAUBILDER NEBEN "FINDE DIESE 5 DINGE"
   Die kleinen Icons zeigen, welche Gegenstände gesucht werden müssen.
   ===================================================== */
.object-list ul{
    columns:1;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding-left:0;
    list-style:none;
}

.object-list li{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:6px 8px;
}

.object-thumb{
    width:50px;
    height:50px;
    object-fit:contain;
    flex:0 0 auto;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.65));
}

.object-list li.done .object-thumb{
    opacity:.35;
    filter:grayscale(1);
}

@media(max-width:600px){
    .object-list ul{
        gap:7px;
    }

    .object-list li{
        padding:6px 8px;
        font-size:14px;
    }

    .object-thumb{
        width:40px;
        height:40px;
    }
}

.object-list li span{font-size:14px;}
@media(max-width:600px){.object-list li span{font-size:12px;}}


/* =====================================================
   KOMPAKTE MOBILE-ANSICHT DER 5 SUCHGEGENSTÄNDE
   Auf dem Handy werden die 5 Dinge als Icon-Leiste angezeigt.
   ===================================================== */
@media(max-width:700px){
    .object-list{
        padding:10px;
        margin:8px 0;
    }

    .object-list h2{
        font-size:20px;
        margin:0 0 8px;
        line-height:1.1;
    }

    .object-list ul{
        display:grid;
        grid-template-columns:repeat(5, 1fr);
        gap:6px;
    }

    .object-list li{
        justify-content:center;
        padding:6px 4px;
        min-height:58px;
    }

    .object-list li span{
        display:none;
    }

    .object-thumb{
        width:46px;
        height:46px;
    }
}

@media(max-width:420px){
    .object-list h2{
        font-size:18px;
    }

    .object-thumb{
        width:40px;
        height:40px;
    }

    .object-list li{
        min-height:52px;
    }
}


/* BONUS-TROPHÄEN-GALERIE */
.bonus-unlocked img,
.bonus-image,
.bonus-thumb{
    cursor:pointer;
    transition:transform .25s ease;
}
.bonus-unlocked img:hover,
.bonus-image:hover,
.bonus-thumb:hover{
    transform:scale(1.05);
}

.bonus-viewer{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    z-index:99999;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.bonus-viewer.open{
    display:flex;
}
.bonus-viewer img{
    max-width:95vw;
    max-height:90vh;
    border-radius:18px;
    box-shadow:0 0 40px rgba(255,215,0,.5);
}
#bonusViewerClose{
    position:absolute;
    top:20px;
    right:30px;
    color:white;
    font-size:48px;
    cursor:pointer;
}


/* =====================================================
   ALLE 5 SUCHGEGENSTÄNDE GLEICH GROSS
   ===================================================== */
.object-list ul{
    align-items:stretch;
}

.object-list li{
    width:180px;
    min-width:180px;
    height:72px;
    box-sizing:border-box;
    justify-content:flex-start;
}

.object-thumb{
    width:50px !important;
    height:50px !important;
    object-fit:contain;
}

@media(max-width:700px){
    .object-list li{
        width:auto;
        min-width:0;
        height:64px;
    }
}

/* =====================================================
   GOLDENER FREIGESCHALTET-RAHMEN FÜR BONUSBILDER
   ===================================================== */
.bonus-unlocked img,
.bonus-image,
.bonus-thumb{
    border:4px solid #ffd700;
    border-radius:18px;
    box-shadow:
      0 0 12px rgba(255,215,0,.8),
      0 0 28px rgba(255,215,0,.45);
    position:relative;
}

.bonus-unlocked::before{
    content:"⭐ FREIGESCHALTET";
    display:inline-block;
    margin-bottom:10px;
    padding:6px 14px;
    border-radius:999px;
    background:linear-gradient(180deg,#ffe98a,#ffd700);
    color:#222;
    font-weight:800;
    letter-spacing:.5px;
}


/* =====================================================
   MOBILE FIX:
   Keine überstehenden Bilder, nur Icons ohne Text
   ===================================================== */
@media (max-width: 768px){

  .object-list ul{
    display:grid !important;
    grid-template-columns:repeat(5, 1fr);
    gap:4px;
    width:100%;
  }

  .object-list li{
    width:100% !important;
    min-width:0 !important;
    height:58px !important;
    padding:4px !important;
    overflow:hidden;
    justify-content:center !important;
    align-items:center !important;
  }

  .object-list li span{
    display:none !important;
  }

  .object-thumb{
    width:38px !important;
    height:38px !important;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
}

@media (max-width: 480px){

  .object-list li{
    height:52px !important;
  }

  .object-thumb{
    width:34px !important;
    height:34px !important;
  }
}


/* =====================================================
   WICHTIGER MOBILE-FIX:
   Das Spielfeld bleibt IMMER 16:9.
   Dadurch liegen die Suchobjekte exakt auf dem Hintergrundbild
   und nicht in den schwarzen Balken darüber/darunter.
   ===================================================== */

#gameArea{
    aspect-ratio:16/9 !important;
    height:auto !important;
}

#roomImage{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

#objectsLayer{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    pointer-events:none;
}

.hidden-object{
    pointer-events:auto;
}

/* Vollbildmodus: NICHT mehr künstlich in die Höhe ziehen */
body.fullscreen-game #gameArea{
    aspect-ratio:16/9 !important;
    height:auto !important;
    max-height:none !important;
}

/* Hochformat Mobile: Bild soll groß sein, aber ohne schwarze Balken */
@media(max-width:800px) and (orientation:portrait){
    body.fullscreen-game #gameArea,
    #gameArea{
        width:100% !important;
        aspect-ratio:16/9 !important;
        height:auto !important;
        min-height:0 !important;
    }

    body.fullscreen-game #roomImage,
    #roomImage{
        object-fit:cover !important;
    }

    .hidden-object{
        width:7.5% !important;
        min-width:26px !important;
        max-width:42px !important;
        max-height:42px !important;
    }
}

/* Querformat Mobile: Spielfeld nutzt die Breite, bleibt aber korrekt 16:9 */
@media(max-height:600px) and (orientation:landscape){
    body.fullscreen-game #gameArea{
        width:100% !important;
        aspect-ratio:16/9 !important;
        height:auto !important;
        min-height:0 !important;
    }

    body.fullscreen-game .object-list{
        display:block !important;
    }

    .hidden-object{
        width:6.5% !important;
        min-width:28px !important;
        max-width:48px !important;
        max-height:48px !important;
    }
}

/* Sehr kleine Displays */
@media(max-width:430px){
    .hidden-object{
        width:7% !important;
        min-width:24px !important;
        max-width:38px !important;
        max-height:38px !important;
    }
}


/* =====================================================
   ATTRAKTIVER STARTSCREEN MIT WIMMELBILD-PREVIEW
   ===================================================== */
.start-hero-game{
    padding:18px;
}

.start-preview{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:22px;
    align-items:center;
}

.preview-image-wrap{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    border:3px solid #444;
    box-shadow:0 0 35px rgba(255,90,0,.25);
    aspect-ratio:16/9;
    background:#000;
}

.preview-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.preview-badge{
    position:absolute;
    left:14px;
    top:14px;
    background:linear-gradient(180deg,#ffef84,#ffcc00);
    color:#111;
    padding:8px 14px;
    border-radius:999px;
    font-weight:900;
    box-shadow:0 0 18px rgba(255,204,0,.7);
}

.preview-info{
    text-align:left;
}

.preview-info h2{
    margin:0 0 8px;
    font-size:clamp(32px,4vw,52px);
}

.preview-sub{
    font-size:20px;
    font-weight:700;
    color:#fff2b8;
    margin:0 0 16px;
}

.preview-items-title{
    font-size:22px;
    font-weight:900;
    color:#ffd700;
    margin-bottom:10px;
    text-shadow:0 0 10px rgba(255,130,0,.9);
}

.preview-items{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    margin-bottom:16px;
}

.preview-items img{
    width:100%;
    height:74px;
    object-fit:contain;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    padding:6px;
    box-shadow:0 0 16px rgba(0,0,0,.35);
}

.preview-bonus{
    display:flex;
    gap:12px;
    align-items:center;
    background:rgba(255,215,0,.08);
    border:2px solid #ffd700;
    border-radius:18px;
    padding:10px;
    margin:12px 0 16px;
    box-shadow:0 0 20px rgba(255,215,0,.25);
}

.preview-bonus img{
    width:120px;
    height:68px;
    object-fit:cover;
    border-radius:12px;
    filter:blur(2px) brightness(.75);
}

.preview-bonus strong{
    display:block;
    color:#ffd700;
    font-size:20px;
}

.preview-bonus span{
    display:block;
    color:#ddd;
    font-size:15px;
}

.start-inline{
    display:flex;
    gap:10px;
    align-items:center;
}

.start-inline input{
    margin:0;
    max-width:none;
}

.start-inline button{
    white-space:nowrap;
}

@media(max-width:900px){
    .start-preview{
        grid-template-columns:1fr;
    }

    .preview-info{
        text-align:center;
    }

    .start-inline{
        justify-content:center;
    }
}

@media(max-width:600px){
    .start-hero-game{
        padding:12px;
    }

    .preview-badge{
        font-size:13px;
        padding:6px 10px;
    }

    .preview-sub{
        font-size:17px;
    }

    .preview-items img{
        height:54px;
        padding:4px;
    }

    .preview-bonus{
        flex-direction:column;
        text-align:center;
    }

    .preview-bonus img{
        width:150px;
        height:84px;
    }

    .start-inline{
        flex-direction:column;
    }

    .start-inline input,
    .start-inline button{
        width:100%;
    }
}


/* =====================================================
   MOBILE-HINWEIS BEI QUERFORMAT
   Wird angezeigt, wenn das Handy horizontal gehalten wird.
   ===================================================== */
.rotate-notice{
    position:fixed;
    inset:0;
    z-index:999998;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.92);
    padding:20px;
}

.rotate-card{
    width:min(92vw,420px);
    text-align:center;
    background:linear-gradient(135deg,#252525,#111);
    border:2px solid #ffd700;
    border-radius:24px;
    padding:24px;
    box-shadow:
      0 0 25px rgba(255,215,0,.45),
      0 0 60px rgba(255,90,0,.25);
}

.rotate-icon{
    font-size:64px;
    margin-bottom:10px;
}

.rotate-card h2{
    margin:0 0 10px;
    color:#ffd700;
    font-size:clamp(26px,6vw,42px);
}

.rotate-card p{
    color:#fff2b8;
    font-size:18px;
    font-weight:700;
}

#rotateContinueBtn{
    margin-top:12px;
    background:#ff5a00;
    color:#fff;
    box-shadow:0 4px 0 #8a2d00;
}

/* Auf Desktop nie anzeigen */
@media(min-width:901px){
    .rotate-notice{
        display:none !important;
    }
}