/* Spülzug Premium – eigenständiges Bonusspiel im dunkelblauen KanalJet-Stil */
:root{
    --sp-navy-950:#031423;
    --sp-navy-900:#05233a;
    --sp-navy-850:#072b46;
    --sp-navy-800:#0a3858;
    --sp-blue:#0b7fc1;
    --sp-cyan:#22c6e8;
    --sp-gold:#ffb51f;
    --sp-green:#28a745;
    --sp-ink:#102c42;
    --sp-paper:#eef5f8;
}

/* Startkarte im Hauptspiel */
.spuel-home-card{
    overflow:hidden;
    border:1px solid rgba(255,181,31,.42);
    background:linear-gradient(115deg,#06273f,#0a4266 58%,#096394);
    color:#fff;
    box-shadow:0 12px 24px rgba(2,45,75,.23),inset 0 1px 0 rgba(255,255,255,.16);
}
.spuel-home-thumb{border:2px solid rgba(255,255,255,.72);background:#072b46;box-shadow:0 5px 12px rgba(0,0,0,.25)}
.spuel-home-thumb img{object-position:center 58%;filter:saturate(1.08) contrast(1.03)}
.spuel-home-thumb i{background:var(--sp-gold);color:#163044;box-shadow:0 2px 7px rgba(0,0,0,.28)}
.spuel-home-card>div>small{color:#ffd15a}
.spuel-home-card>div>b{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.34)}
.spuel-home-card p{color:rgba(255,255,255,.75)}
.spuel-home-card em{background:rgba(0,0,0,.28)}
.spuel-home-card em i{background:linear-gradient(90deg,#1fd8ec,#ffca35)}
.spuel-home-card>strong,.spuel-home-card>i{color:#fff}

/* Vollbild-Startmotiv */
.spuel-launch-premium-overlay{z-index:10050!important;padding:0!important;background:var(--sp-navy-950)!important}
.spuel-launch-premium{position:relative;width:100%;height:100dvh;overflow:hidden;background:#062d4a;color:#fff}
.spuel-launch-premium>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:auto}
.spuel-launch-premium-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(1,13,26,.28) 69%,rgba(1,11,22,.97) 100%)}
.spuel-launch-premium-status{position:absolute;right:0;bottom:0;left:0;padding:19px 20px calc(24px + env(safe-area-inset-bottom));text-shadow:0 2px 5px rgba(0,0,0,.6)}
.spuel-launch-premium-status>b{display:block;margin-bottom:10px;font-size:13px;letter-spacing:.01em}
.spuel-launch-premium-status>div{height:13px;overflow:hidden;border:2px solid rgba(255,255,255,.54);border-radius:999px;background:rgba(0,0,0,.42);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.spuel-launch-premium-status>div i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#18cbe9,#f4fdff 63%,#ffb718);box-shadow:0 0 16px rgba(48,216,249,.88)}
.spuel-launch-premium-status>span{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;color:rgba(255,255,255,.75)}
.spuel-launch-premium-status small{font-size:10px}
.spuel-launch-premium-status strong{color:#fff;font-size:12px}

/* Einsatzübersicht */
.spuel-page-overlay{background:var(--sp-navy-950)!important;backdrop-filter:none!important}
.spuel-page-overlay .spuel-page-card{width:min(100%,760px);min-height:100dvh;border-radius:0!important;background:var(--sp-paper);box-shadow:0 0 45px rgba(0,0,0,.4)}
.spuel-page-overlay .page-card-header{
    position:sticky;
    z-index:40;
    top:0;
    min-height:calc(70px + env(safe-area-inset-top));
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    color:#fff;
    background:linear-gradient(120deg,#06233a,#073c5d 70%,#075782);
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 5px 14px rgba(1,25,43,.28);
}
.spuel-page-overlay .page-card-header .icon-button{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.46);
    border-radius:12px;
    background:rgba(255,255,255,.08);
    font-size:28px;
}
.spuel-page-overlay .page-card-header small{color:#91d9ef;font-size:8px;letter-spacing:.1em}
.spuel-page-overlay .page-card-header h2{margin-top:2px;font-size:22px}
.spuel-header-wallet{
    min-width:96px;
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    align-items:center;
    justify-content:center;
    gap:0 6px;
    padding:6px 9px!important;
    border:1px solid rgba(255,185,37,.34);
    border-radius:14px!important;
    color:#fff!important;
    background:rgba(1,17,30,.56)!important;
    box-shadow:none!important;
}
.spuel-header-wallet>span{grid-row:1/3;font-size:20px}
.spuel-header-wallet>b{font-size:14px;line-height:1}
.spuel-header-wallet>small{color:#c7dae3!important;font-size:6px!important;letter-spacing:0!important;text-transform:uppercase}
.spuel-page-overlay .page-card-body{padding:12px 11px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(#dcebf1,#f4f8fa 260px)}
.spuel-level-body{gap:11px}

.spuel-title-hero{
    position:relative;
    display:block;
    min-height:224px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.84);
    border-radius:21px;
    background:#073756;
    color:#fff;
    box-shadow:0 10px 23px rgba(3,47,76,.24);
}
.spuel-title-hero>img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 58%;filter:saturate(1.06) contrast(1.02)}
.spuel-title-hero:after{position:absolute;inset:0;content:'';background:linear-gradient(90deg,rgba(1,19,32,.07) 0 28%,rgba(2,25,41,.48) 50%,rgba(2,23,38,.96) 100%)}
.spuel-title-hero>div{position:relative;z-index:2;width:60%;display:flex;flex-direction:column;justify-content:center;margin-left:auto;padding:17px 15px}
.spuel-title-hero h3{margin:7px 0 4px;color:#fff;font-size:21px;text-shadow:0 2px 4px rgba(0,0,0,.35)}
.spuel-title-hero p{margin:0;color:rgba(255,255,255,.86);font-size:10.5px;line-height:1.38}
.spuel-badge{padding:5px 9px;border:1px solid rgba(255,255,255,.65);background:rgba(3,28,47,.48);font-size:9px}
.spuel-wallet{margin-top:10px;padding:7px 10px;border:1px solid rgba(255,185,31,.28);background:rgba(1,18,31,.68)}
.spuel-wallet b{color:#fff;font-size:17px}
.spuel-wallet small{color:#d8e7ed;font-size:8px}

.spuel-subnav{
    position:sticky;
    z-index:30;
    top:calc(70px + env(safe-area-inset-top));
    gap:5px;
    margin:1px 0 2px;
    padding:5px;
    border:1px solid #c5d7df;
    border-radius:14px;
    background:#dce8ed;
    box-shadow:0 5px 12px rgba(5,50,78,.11);
}
.spuel-subnav button{min-height:41px;padding:5px 3px;border-radius:10px;color:#24465e;font-size:10px}
.spuel-subnav button.active{color:#fff;background:linear-gradient(145deg,#086aab,#07538a);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 4px 8px rgba(4,62,102,.22)}

.spuel-level-section{margin-top:12px;padding:10px;border:1px solid #cedce2;border-radius:17px;background:#e7eef2;box-shadow:0 5px 12px rgba(8,52,76,.08)}
.spuel-level-section>header{gap:9px;margin-bottom:8px}
.spuel-level-section>header>span{width:39px;height:39px;padding:5px;border-radius:11px;background:linear-gradient(145deg,#d8f2fb,#fff);box-shadow:inset 0 0 0 1px #c1dce7}
.spuel-premium-area-icon{display:block;width:100%;height:100%}
.spuel-level-section header b{color:var(--sp-ink);font-size:15px}
.spuel-level-section header small{margin-top:1px;color:#6b808d;font-size:9px}
.spuel-level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.spuel-level-grid button{
    position:relative;
    min-height:61px;
    padding:5px 2px;
    border:1px solid #173e58;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(160deg,#113b58,#071f34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 7px rgba(5,39,62,.18);
    touch-action:manipulation;
}
.spuel-level-grid button b{font-size:17px}
.spuel-level-grid button small{margin-top:3px;color:#a7c2d2;font-size:7px}
.spuel-level-grid button.current{border-color:#54d070;background:linear-gradient(155deg,#38b94f,#168b35);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 10px rgba(22,133,53,.25)}
.spuel-level-grid button.current small{color:#effff2}
.spuel-level-grid button.completed{border-color:#e6b746;background:linear-gradient(155deg,#315c4f,#133b35)}
.spuel-level-grid button.completed small{color:#ffd866}
.spuel-level-grid button.locked{border-color:#1a3d55;background:linear-gradient(155deg,#17364c,#0b263a);color:#91a7b5;opacity:.72;box-shadow:none}
.spuel-level-grid button.locked b{font-size:15px;filter:grayscale(.35)}
.spuel-level-grid button.starting:after{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:rgba(5,112,74,.94);color:#fff;content:'START';font-size:8px;font-weight:900}

/* Düsenlager und Upgrades */
.spuel-wallet-line{position:sticky;z-index:20;top:calc(122px + env(safe-area-inset-top));border:1px solid #c5d9e2;background:#e4f1f6}
.spuel-wallet-line span{color:#084f7a}
.spuel-nozzle-card,.spuel-upgrade-card{border-color:#c5d7df;background:#fff;box-shadow:0 5px 12px rgba(6,53,81,.08)}
.spuel-nozzle-card.selected{border-color:#1688c6;box-shadow:0 0 0 2px rgba(14,132,192,.15),0 6px 13px rgba(6,53,81,.1)}
.spuel-nozzle-card>header>span,.spuel-upgrade-card>span{background:linear-gradient(145deg,#dcedf4,#fff)}
.spuel-nozzle-card button,.spuel-upgrade-card button{background:linear-gradient(145deg,#0879b8,#075286)}

/* Einsatz */
.app.spuel-active{
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
}
.spuel-game-screen{
    width:100%;
    max-width:100vw;
    height:100dvh;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    color:#dcebf2;
    background:linear-gradient(180deg,#061b2d,#092d47 31%,#0b2235 100%);
}
.spuel-game-header{
    position:sticky;
    z-index:80;
    top:0;
    min-height:calc(66px + env(safe-area-inset-top));
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:8px;
    padding:calc(7px + env(safe-area-inset-top)) 9px 7px;
    border-bottom:1px solid rgba(255,255,255,.1);
    background:linear-gradient(120deg,rgba(3,24,41,.98),rgba(5,52,81,.98));
    box-shadow:0 5px 14px rgba(0,0,0,.3);
    backdrop-filter:blur(10px);
}
.spuel-game-header,.spuel-game-main{width:100%;min-width:0;max-width:100%}
.spuel-game-header>*,.spuel-game-main>*,.spuel-mission>*,.spuel-hud-grid>*,.spuel-current-task>*{min-width:0}
.spuel-game-header .icon-button{width:38px;height:38px;border:1px solid rgba(255,255,255,.48);border-radius:11px;background:rgba(255,255,255,.08);font-size:27px}
.spuel-game-title{min-width:0}
.spuel-game-title small{display:block;overflow:hidden;color:#8bcfe5;font-size:7px;letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap}
.spuel-game-title h1{margin:1px 0 0;color:#fff;font-size:18px;white-space:nowrap}
.spuel-game-tools{display:flex;align-items:center;gap:5px}
.spuel-game-clock{min-width:47px;padding:4px 6px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(0,0,0,.25)}
.spuel-game-clock b{font-size:16px;line-height:1}
.spuel-game-clock small{margin-top:2px;color:#aac4d2;font-size:6px}
.spuel-game-credits{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px;min-height:37px;padding:4px 6px;border:1px solid rgba(255,185,31,.25);border-radius:11px;background:rgba(0,0,0,.24);color:#fff}
.spuel-game-credits span{font-size:15px}
.spuel-game-credits b{font-size:11px;white-space:nowrap}
.spuel-game-main{gap:8px;max-width:820px;overflow-x:hidden;padding:8px 8px calc(83px + env(safe-area-inset-bottom))}

.spuel-mission{min-height:53px;padding:8px 10px;border:1px solid rgba(255,255,255,.5);border-radius:13px;background:#f5f8fa;color:var(--sp-ink);box-shadow:0 5px 12px rgba(0,0,0,.15)}
.spuel-mission small{color:#6d808c;font-size:7px}
.spuel-mission b{font-size:12px}
.spuel-mission>span{padding:5px 7px;background:#d4eaf4;color:#075b90;font-size:7px}
.spuel-mission b,.spuel-current-task b,.spuel-current-task p{overflow-wrap:anywhere}

.spuel-scene,.spuel-underground,.spuel-pipe-track,.spuel-hud-grid,.spuel-current-task,.spuel-nozzle-dock{width:100%;min-width:0;max-width:100%}
.spuel-scene{border:2px solid #b9cad2;border-radius:17px;background:#071a28;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.spuel-aboveground{height:145px;background:#0a4164}
.spuel-aboveground>img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:saturate(1.08) contrast(1.04)}
.spuel-aboveground:after{background:linear-gradient(180deg,rgba(2,24,39,.04),rgba(1,17,28,.31))}
.spuel-scene-label{left:8px;bottom:7px;padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(2,19,32,.84)}
.spuel-scene-label b{font-size:11px}
.spuel-scene-label small{font-size:7px}
.spuel-underground{padding:8px;background:linear-gradient(#5c3927 0 12%,#171719 12% 100%)}
.spuel-pipe-track{height:102px;border:7px solid #8e989d;background:linear-gradient(180deg,#11191d,#263238 47%,#111a1e 48%,#202c31);box-shadow:inset 0 0 28px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.15)}
.spuel-pipe-track:before{position:absolute;z-index:2;inset:8px 0 auto;height:2px;content:'';background:rgba(255,255,255,.1)}
.spuel-pipe-track:after{height:25%;background:linear-gradient(180deg,rgba(19,132,185,.28),rgba(12,87,135,.72))}
.spuel-clean-zone{background:linear-gradient(90deg,rgba(34,177,222,.06),rgba(59,214,250,.27))}
.spuel-nozzle-sprite span{width:40px;height:40px;padding:4px;border:2px solid #d0dbe0;background:radial-gradient(circle at 35% 28%,#e9f0f3,#566a75 60%,#273640);box-shadow:0 0 14px rgba(50,204,255,.88)}
.spuel-nozzle-sprite i{width:48px;height:19px;background:linear-gradient(90deg,rgba(230,251,255,.98),rgba(39,188,246,.04))}
.spuel-premium-icon{display:block;width:100%;height:100%}
.spuel-obstacle{width:53px}
.spuel-obstacle>span{width:31px;height:31px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.62))}
.spuel-premium-obstacle{display:block;width:100%;height:100%}
.spuel-obstacle>small{font-size:6px}
.spuel-obstacle>i{width:41px;height:4px}
.spuel-distance{margin-top:6px;color:#fff}
.spuel-distance>span{height:7px;background:rgba(255,255,255,.16)}
.spuel-distance i{background:linear-gradient(90deg,#28cdea,#65e9ff)}
.spuel-distance b{font-size:9px}

.spuel-hud-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.spuel-hud-grid article{min-height:66px;padding:8px;border:1px solid rgba(255,255,255,.46);border-radius:13px;background:#f5f8fa;color:var(--sp-ink);box-shadow:0 5px 11px rgba(0,0,0,.14)}
.spuel-hud-grid article>small{margin-bottom:4px;color:#637986;font-size:7px}
.spuel-hud-grid article>b{margin-top:3px;font-size:10px}
.spuel-gauge b{font-size:18px}
.spuel-gauge em{font-size:8px}
.spuel-hud-grid input[type=range]{width:100%;min-width:0;max-width:100%;height:14px;margin-top:3px;accent-color:#0b83c6}
.spuel-status-bar{height:8px}

.spuel-current-task{grid-template-columns:42px minmax(0,1fr);gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.5);border-radius:13px;background:#f5f8fa;color:var(--sp-ink);box-shadow:0 5px 11px rgba(0,0,0,.14)}
.spuel-current-task>span{width:42px;height:42px;padding:3px;border-radius:11px;background:#dceef5}
.spuel-premium-target{display:block;width:100%;height:100%}
.spuel-current-task small{color:#a65b18;font-size:7px}
.spuel-current-task b{font-size:11px}
.spuel-current-task p{font-size:8px}

.spuel-nozzle-dock{overflow:hidden;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(2,16,28,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.spuel-nozzle-dock>small{display:block;margin:0 0 6px 2px;color:#9fc9da;font-size:7px;font-weight:900;letter-spacing:.08em}
.spuel-nozzle-selector{width:100%;min-width:0;max-width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:78px;grid-template-columns:none;gap:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;padding:0 0 2px;scroll-snap-type:x proximity;scrollbar-width:none}
.spuel-nozzle-selector::-webkit-scrollbar{display:none}
.spuel-nozzle-selector button{min-width:78px;min-height:72px;padding:5px 3px;border:1px solid #294b62;border-radius:11px;background:linear-gradient(160deg,#173b53,#0b263a);color:#dcebf2;scroll-snap-align:start}
.spuel-nozzle-selector button.active{border-color:#55d673;background:linear-gradient(160deg,#164b3b,#0e332b);box-shadow:0 0 0 2px rgba(49,195,91,.17)}
.spuel-nozzle-selector button:disabled{opacity:.42}
.spuel-nozzle-selector span{width:29px;height:29px;margin:auto}
.spuel-nozzle-selector b{margin-top:3px;color:#fff;font-size:7px}
.spuel-nozzle-selector small{color:#8fb1c2;font-size:6px}
.spuel-nozzle-selector button.active small{color:#6ee487}

.spuel-action-button{
    position:fixed;
    z-index:95;
    right:8px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    left:8px;
    width:auto;
    max-width:804px;
    min-height:62px;
    margin:0 auto;
    border:2px solid rgba(255,255,255,.42);
    border-radius:15px;
    background:linear-gradient(145deg,#39b83e,#168d32);
    color:#fff;
    box-shadow:0 12px 27px rgba(0,0,0,.42),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -4px 0 rgba(0,75,20,.28);
}
.spuel-action-button.running{background:linear-gradient(145deg,#ef812f,#c93c32)}
.spuel-action-button>span{font-size:25px}
.spuel-action-button b{font-size:15px}
.spuel-action-button small{font-size:8px}

@media(min-width:620px){
    .spuel-game-main{padding-right:12px;padding-left:12px}
    .spuel-game-header{padding-right:14px;padding-left:14px}
    .spuel-aboveground{height:190px}
    .spuel-pipe-track{height:130px}
    .spuel-hud-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .spuel-nozzle-selector{grid-auto-columns:minmax(92px,1fr)}
}

@media(max-width:390px){
    .spuel-page-overlay .page-card-header{grid-template-columns:40px minmax(0,1fr) auto;padding-right:8px;padding-left:8px}
    .spuel-page-overlay .page-card-header h2{font-size:19px}
    .spuel-header-wallet{min-width:82px;padding:5px 7px!important}
    .spuel-header-wallet>span{font-size:17px}
    .spuel-header-wallet>b{font-size:12px}
    .spuel-title-hero{min-height:211px}
    .spuel-title-hero>div{width:64%;padding:14px 12px}
    .spuel-title-hero h3{font-size:18px}
    .spuel-title-hero p{display:-webkit-box;overflow:hidden;font-size:9.5px;-webkit-line-clamp:4;-webkit-box-orient:vertical}
    .spuel-level-section{padding:8px}
    .spuel-level-grid{gap:5px}
    .spuel-level-grid button{min-height:57px;border-radius:10px}
    .spuel-level-grid button b{font-size:15px}
    .spuel-game-header{grid-template-columns:39px minmax(0,1fr) auto;padding-right:7px;padding-left:7px}
    .spuel-game-header .icon-button{width:36px;height:36px}
    .spuel-game-title h1{font-size:16px}
    .spuel-game-credits{padding-right:5px;padding-left:5px}
    .spuel-game-credits span{font-size:13px}
    .spuel-game-credits b{font-size:9px}
    .spuel-game-clock{min-width:43px}
    .spuel-aboveground{height:130px}
    .spuel-pipe-track{height:94px}
    .spuel-game-main{padding-right:7px;padding-left:7px}
    .spuel-mission{grid-template-columns:1fr auto}
    .spuel-mission>span{grid-column:1/-1;grid-row:2;padding:3px;text-align:center}
    .spuel-action-button{right:7px;left:7px}
}

@media(max-height:700px) and (max-width:619px){
    .spuel-aboveground{height:112px}
    .spuel-pipe-track{height:84px}
    .spuel-hud-grid article{min-height:59px;padding:6px 8px}
    .spuel-current-task{padding-top:6px;padding-bottom:6px}
}