*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#ffffff;color:#1a1a1a;font-family:'Arial',sans-serif}
:root{--gold:#FFEC31;--construction-yellow:#FFEC31;--construction-orange:#ff8c00;--text-dark:#1a1a1a;--text-light:#ffffff;--bg-white:#ffffff;--bg-light:#f8f8f8;--border-yellow:#FFEC31}

.magic-panel main.container{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;justify-content:space-between!important;align-items:center!important;padding:0}
.magic-panel .header h1{font-family:monospace;font-size:20px;font-weight:700;color:var(--gold);letter-spacing:0.15em;text-align:center;margin-bottom:14px;text-transform:uppercase}
.magic-panel .message{max-width:100%;text-align:center;margin:0 0 12px 0;padding:0;border:none;background:transparent;box-shadow:none;font-size:12px;line-height:1.5;opacity:.9}
.magic-panel .message p{margin:0}
.magic-panel .signature{color:var(--gold);font-weight:700;opacity:.9}
.magic-panel #magic{animation:none;box-shadow:none;width:100%;background:rgba(0,0,0,.8);border:1px solid var(--gold);border-radius:12px;padding:12px 14px;margin-bottom:12px;box-shadow:0 0 10px rgba(255,236,49,.4),inset 0 0 10px rgba(255,236,49,.1)}
.magic-panel #magic h2{color:var(--gold);font-size:17px;letter-spacing:0.24em;text-align:center;margin-bottom:14px;text-shadow:0 0 10px rgba(255,236,49,.8),0 0 20px rgba(255,236,49,.5);margin-top:0}
.magic-panel #magicText{font-size:15px;text-align:center;margin-bottom:12px;color:var(--gold)}
.magic-panel .magic-buttons{display:flex;gap:14px;justify-content:center;margin-top:14px;margin-bottom:14px}
.magic-panel .magic-reset{margin-top:0!important;margin-bottom:0!important}
.magic-panel .magic-reset button{opacity:0.9!important;padding:10px 14px!important;font-size:12px!important;letter-spacing:0.08em!important;background:linear-gradient(180deg,#000,#050505)!important;color:var(--gold)!important;border:1px solid rgba(255,236,49,0.6)!important;border-radius:12px!important;font-weight:800!important;box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 14px rgba(255,236,49,0.25)!important;text-shadow:0 0 6px rgba(255,236,49,.8)!important;transition:all .25s!important}
.magic-panel .magic-reset button:hover{opacity:1!important;box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 22px rgba(255,236,49,0.45)!important}
.magic-panel .footer{flex:0 0 auto!important;margin-top:0!important;opacity:.6;font-size:12px;padding-top:4px}
.magic-panel .edge-number{color:#000;font-weight:700;opacity:1}
.page{height:100vh}
.game{display:flex;flex-direction:column;height:100%}
/* Construction Site Design - Absperrbänder */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px);z-index:1000;pointer-events:none;opacity:0.8}
body::after{content:'';position:fixed;bottom:0;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px);z-index:1000;pointer-events:none;opacity:0.8}

header{text-align:center;padding:14px 10px;border-bottom:3px solid var(--gold);background:linear-gradient(180deg,var(--bg-white),#fafafa);position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8)}
header::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 16px,#000 16px,#000 32px);opacity:0.9}
.header-content{display:flex;align-items:center;justify-content:center;gap:12px;position:relative}
.flip-arrow-header{background:linear-gradient(135deg,var(--gold),#FFD700);color:#000;border:3px solid #000;font-size:20px;font-weight:900;width:38px;height:38px;border-radius:50%;cursor:pointer;transition:all .2s;box-shadow:3px 3px 0 #000,0 0 8px rgba(255,236,49,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:10;position:relative;line-height:1;min-width:38px;min-height:38px}
.flip-arrow-header:hover{box-shadow:4px 4px 0 #000,0 0 12px rgba(255,236,49,0.5);background:linear-gradient(135deg,#FFD700,var(--gold));transform:scale(1.05)}
.header-text{display:flex;flex-direction:column;align-items:center;justify-content:center}
.bob-image{height:calc(1.2em + 11px + 4px);width:auto;object-fit:contain;animation:bobFloat 3s ease-in-out infinite;filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.3));flex-shrink:0;margin-top:6px}
@keyframes bobFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}
h1{margin:0;color:var(--text-dark);letter-spacing:.35em;font-size:19px;font-weight:900;line-height:1.3em;text-shadow:2px 2px 0 var(--gold),-1px -1px 0 var(--gold),0 0 10px rgba(255,236,49,0.3)}
.tagline{font-size:11px;color:var(--text-dark);opacity:.85;margin:0;margin-top:5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase}
.hud{display:flex;justify-content:space-between;font-size:12px;align-items:center;flex-wrap:wrap;gap:6px;background:linear-gradient(135deg,var(--bg-light),#f5f5f5);padding:10px 12px;border-radius:8px;border:3px solid var(--gold);margin:6px 0;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1),0 2px 4px rgba(255,236,49,0.2);flex-shrink:0}
.hud span{color:var(--text-dark);font-weight:700;letter-spacing:0.05em}
.hud b{color:#000;font-weight:900;font-size:13px;text-shadow:0 1px 2px rgba(255,236,49,0.3)}
.hud-highscore-btn{background:linear-gradient(135deg,var(--gold),#FFD700);color:#000;border:2px solid var(--gold);font-weight:900;padding:6px 12px;border-radius:6px;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:all .2s;box-shadow:0 0 8px rgba(255,236,49,0.3);flex-shrink:0}
.hud-highscore-btn:hover{box-shadow:0 0 12px rgba(255,236,49,0.5);background:linear-gradient(135deg,#FFD700,var(--gold));border-color:#000}
.hud-highscore-btn:active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
.swipe-hint{text-align:center;font-size:11px;color:var(--gold);font-weight:700;padding:8px 14px;margin:4px 0;opacity:0.85;animation:swipePulse 2s ease-in-out infinite;cursor:pointer;text-transform:uppercase;letter-spacing:0.12em;border:2px dashed var(--gold);border-radius:6px;background:linear-gradient(135deg,var(--bg-light),#f0f0f0);box-shadow:inset 0 1px 3px rgba(255,236,49,0.2)}
@keyframes swipePulse{0%,100%{opacity:0.8}50%{opacity:1}}
.swipe-hint:hover{opacity:1;border-color:#000;background:var(--gold);color:#000}
#highscoreOverlay{position:fixed;inset:0;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;z-index:50;overflow-y:auto;padding:20px;backdrop-filter:blur(4px)}
#highscorePopup{position:relative;width:100%;max-width:420px;background:linear-gradient(180deg,var(--bg-white),#fafafa);border:4px solid var(--gold);box-shadow:8px 8px 0 #000,0 0 0 2px var(--gold),0 4px 16px rgba(255,236,49,0.2);border-radius:12px;padding:28px;text-align:center;animation:pop .3s ease-out;max-height:90vh;overflow-y:auto}
#highscorePopup::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px);border-radius:12px 12px 0 0;opacity:0.9}
.milestones{display:flex;justify-content:space-around;font-size:11px;padding:10px 12px;background:linear-gradient(135deg,var(--bg-light),#f0f0f0);border:3px solid var(--gold);border-radius:8px;margin:6px 0;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1),0 2px 4px rgba(255,236,49,0.2);gap:8px;flex-shrink:0}
.milestones span{color:var(--text-dark);font-weight:700;opacity:.4;padding:6px 12px;border-radius:6px;transition:all .3s ease;position:relative;text-transform:uppercase;letter-spacing:0.1em;font-size:10px;background:rgba(0,0,0,0.05);border:2px solid transparent}
.milestones .on{opacity:1;color:#000;font-weight:900;background:linear-gradient(135deg,var(--gold),#FFD700);border-color:#000;box-shadow:0 0 15px rgba(255,236,49,0.6),inset 0 1px 2px rgba(255,255,255,0.3),0 2px 4px rgba(0,0,0,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.2);transform:scale(1.05)}
.progressTop{height:18px;margin-top:0px;margin-bottom:0px;margin-left:16px;margin-right:16px;background:linear-gradient(135deg,var(--bg-light),#e8e8e8);border-radius:8px;border:3px solid var(--gold);overflow:hidden;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(255,236,49,0.2);flex-shrink:0}
.progressTop::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 12px,#000 12px,#000 24px);opacity:0.6;z-index:1}
.progressTop .fill{height:100%;width:0%;background:linear-gradient(90deg,#FFD700,var(--gold),#FFEC31,#FFD700);background-size:200% 100%;box-shadow:inset 0 1px 3px rgba(255,255,255,0.4),inset 0 -1px 3px rgba(0,0,0,0.2),0 0 10px rgba(255,236,49,0.4);animation:shimmer 2s linear infinite}
.play{flex:1;overflow:hidden;background:linear-gradient(135deg,var(--bg-light),#f0f0f0);border:3px solid var(--gold);margin-top:0px;margin-bottom:0px;margin-left:8px;margin-right:8px;border-radius:8px;position:relative;box-shadow:inset 0 2px 8px rgba(0,0,0,0.1),0 2px 4px rgba(255,236,49,0.2)}
.play::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px);z-index:1;pointer-events:none;opacity:0.8}
canvas{width:100%;height:100%;display:block}
footer{padding:14px;border-top:3px solid var(--gold);background:linear-gradient(180deg,#fafafa,var(--bg-white));position:relative;display:flex;flex-direction:column;gap:8px;box-shadow:0 -2px 8px rgba(0,0,0,0.05);flex-shrink:0}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px);opacity:0.9}
#drop{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold),#FFD700,var(--gold));color:#000;border:3px solid var(--gold);font-weight:900;box-shadow:0 0 12px rgba(255,236,49,0.4);transition:all .2s;text-transform:uppercase;letter-spacing:0.12em;font-size:15px;border-radius:6px;position:relative;overflow:hidden}
#drop:hover{box-shadow:0 0 18px rgba(255,236,49,0.6);background:linear-gradient(135deg,#FFD700,var(--gold),#FFD700);background-size:200% 100%;border-color:#000}
#drop:active{box-shadow:0 0 8px rgba(255,236,49,0.3)!important}
.disclaimer-note{text-align:center;font-size:10px;color:var(--text-dark);opacity:0.8;margin:8px 0 4px 0;font-weight:600;line-height:1.4}
.legal-links{display:flex;justify-content:center;align-items:center;gap:8px;font-size:10px;margin-top:4px}
.legal-links a{color:var(--gold);text-decoration:none;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:0.05em}
.legal-links a:hover{color:#000;text-decoration:underline}
.legal-links span{color:var(--text-dark);opacity:0.5}
.legal-content{text-align:left;font-size:12px;line-height:1.6;color:var(--text-dark);max-height:400px;overflow-y:auto;padding:16px;background:var(--bg-light);border:2px solid var(--gold);border-radius:4px;margin:16px 0}
.legal-content h4{color:var(--text-dark);font-size:14px;font-weight:900;margin-top:16px;margin-bottom:8px;text-transform:uppercase}
.legal-content h4:first-child{margin-top:0}
.legal-content p{margin:8px 0;color:var(--text-dark)}
.legal-content ul{margin:8px 0;padding-left:20px}
.legal-content li{margin:4px 0;color:var(--text-dark)}
#overlay{position:fixed;inset:0;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;z-index:50;overflow-y:auto;padding:20px;backdrop-filter:blur(4px)}
#popup{position:relative;width:100%;max-width:420px;background:linear-gradient(180deg,var(--bg-white),#fafafa);border:4px solid var(--gold);box-shadow:8px 8px 0 #000,0 0 0 2px var(--gold),0 4px 16px rgba(255,236,49,0.2);border-radius:12px;padding:28px;text-align:center;animation:pop .3s ease-out;max-height:90vh;overflow-y:auto}
#popup::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px);border-radius:12px 12px 0 0;opacity:0.9}
#popup img{width:80px;margin-bottom:8px}
.pscore{font-size:13px;margin:8px 0;color:#000;font-weight:700}
.name-input{width:100%;padding:14px;background:linear-gradient(135deg,var(--bg-white),#fafafa);border:3px solid var(--gold);color:var(--text-dark);border-radius:8px;font-size:13px;font-family:monospace;margin:12px 0;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1),0 0 8px rgba(255,236,49,0.2);text-align:center;letter-spacing:0.03em;font-weight:700;transition:all .3s ease}
.name-input:focus{outline:none;border-color:#000;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1),0 0 12px rgba(255,236,49,0.4),4px 4px 0 #000;background:var(--bg-white);transform:scale(1.02)}
.name-input::placeholder{color:var(--text-dark);opacity:0.5}
.highscore-tabs{display:flex;gap:8px;margin:16px 0 12px;justify-content:center}
.tab-btn{padding:10px 16px;background:linear-gradient(135deg,var(--bg-light),#f0f0f0);color:var(--text-dark);border:3px solid var(--gold);font-size:11px;font-weight:700;letter-spacing:0.1em;border-radius:6px;cursor:pointer;transition:all .2s;flex:1;max-width:120px;box-shadow:0 0 8px rgba(255,236,49,0.2),inset 0 1px 2px rgba(0,0,0,0.1);white-space:nowrap;min-width:80px;display:flex;align-items:center;justify-content:center;text-align:center}
.tab-btn:hover{box-shadow:0 0 12px rgba(255,236,49,0.4);background:linear-gradient(135deg,#fff8dc,var(--gold));color:#000;border-color:#000}
.tab-btn.active{background:linear-gradient(135deg,var(--gold),#FFD700);color:#000;border-color:#000;box-shadow:0 0 12px rgba(255,236,49,0.4);font-weight:900}
.tab-btn:active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
.highscore-list{margin:12px 0;border:3px solid var(--gold);border-radius:8px;overflow:hidden;background:var(--bg-white);box-shadow:4px 4px 0 #000,0 2px 8px rgba(255,236,49,0.2)}
.hs-header{display:grid;grid-template-columns:50px 1fr 80px;gap:8px;padding:14px 12px;background:linear-gradient(135deg,var(--gold),#FFD700);border-bottom:3px solid #000;font-size:10px;font-weight:900;letter-spacing:0.12em;color:#000;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(255,255,255,0.3)}
.hs-entries{max-height:300px;overflow-y:auto;background:linear-gradient(135deg,var(--bg-light),#f5f5f5)}
.hs-entry{display:grid;grid-template-columns:50px 1fr 80px;gap:8px;padding:12px;border-bottom:2px solid rgba(255,236,49,0.3);font-size:12px;color:var(--text-dark);font-family:monospace;align-items:center;font-weight:600;transition:all .2s ease;background:transparent;position:relative}
.hs-entry:last-child{border-bottom:none}
.hs-entry:hover{color:#000}
.hs-rank{text-align:center;font-weight:900;color:#000}
.hs-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-score{text-align:right;font-weight:900;color:#000}
.popup-buttons{margin-top:16px}
#popup button,#highscorePopup button:not(.close-btn){width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),#FFD700);color:#000;border:3px solid var(--gold);font-weight:900;box-shadow:0 0 10px rgba(255,236,49,0.3);transition:all .2s;cursor:pointer;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;border-radius:6px}
#popup button:hover,#highscorePopup button:not(.close-btn):hover{box-shadow:0 0 15px rgba(255,236,49,0.5);background:linear-gradient(135deg,#FFD700,var(--gold));border-color:#000}
#popup button:active,#highscorePopup button:not(.close-btn):active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--gold);border:3px solid #000;color:#000;padding:14px 24px;border-radius:4px;font-size:13px;font-family:monospace;z-index:100;box-shadow:4px 4px 0 #000;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;letter-spacing:0.05em;font-weight:900;text-transform:uppercase}
.toast.show{opacity:1;pointer-events:auto;animation:toastSlideIn .3s ease}
@keyframes toastSlideIn{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* Dynamische Animationen */
@keyframes glowPulse{0%,100%{box-shadow:0 0 10px rgba(255,236,49,.4),inset 0 0 10px rgba(255,236,49,.1)}50%{box-shadow:0 0 20px rgba(255,236,49,.8),inset 0 0 15px rgba(255,236,49,.3)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
/* Entfernte Animationen, die Bewegung verursachen */
@keyframes numberCount{0%{color:inherit}50%{color:var(--gold)}100%{color:inherit}}
@keyframes progressGlow{0%,100%{box-shadow:inset 0 0 10px rgba(0,0,0,0.2),0 0 5px rgba(255,236,49,.3)}50%{box-shadow:inset 0 0 15px rgba(0,0,0,0.3),0 0 15px rgba(255,236,49,.6)}}
/* Entfernte milestoneActivate Animation */

/* HUD Dynamische Effekte */
.hud b{transition:color .3s ease;display:inline-block}
.hud b.score-updated{animation:numberCount .5s ease-out}
.hud-highscore-btn{position:relative;overflow:hidden}
.hud-highscore-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}
.hud-highscore-btn:hover::before{left:100%}

/* Milestones Dynamische Effekte */
.milestones span{transition:all .3s cubic-bezier(0.4,0,0.2,1);position:relative}
.milestones .on{text-shadow:0 0 10px rgba(255,236,49,.8),0 0 20px rgba(255,236,49,.5);animation:milestoneGlow 2s ease-in-out infinite}
@keyframes milestoneGlow{0%,100%{box-shadow:0 0 15px rgba(255,236,49,0.6),inset 0 1px 2px rgba(255,255,255,0.3),0 2px 4px rgba(0,0,0,0.2)}50%{box-shadow:0 0 20px rgba(255,236,49,0.8),inset 0 1px 2px rgba(255,255,255,0.4),0 3px 6px rgba(0,0,0,0.3)}}

/* Progress Bar Dynamische Effekte */
.progressTop .fill{transition:width .5s cubic-bezier(0.4,0,0.2,1)}

/* Buttons Dynamische Effekte */
.flip-arrow-header:hover{box-shadow:4px 4px 0 #000,0 0 15px rgba(255,236,49,.6);background:#FFEC31}
#drop{position:relative;overflow:hidden}

/* Header Dynamische Effekte */
.tagline{opacity:.8;transition:opacity .3s}
.tagline:hover{opacity:1}

/* Popup Dynamische Effekte */
#popup,#highscorePopup,#slotBuyPopup,#statsPopup,#legalPopup,#welcomePopup{animation:pop .3s ease-out,bounceIn .5s ease-out}
.hs-entry{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.hs-entry:hover{color:#000}

/* Tab Buttons Dynamische Effekte */
.tab-btn{position:relative;overflow:hidden}
.tab-btn::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--gold);transition:width .3s ease;z-index:-1}
.tab-btn:hover::before{width:100%}
.tab-btn.active{animation:glowPulse 2s ease-in-out infinite}

/* Score Counter Animation */
.score-counter{display:inline-block;transition:all .3s ease}
.score-counter.updated{animation:numberCount .5s ease-out}

/* Canvas Container Dynamische Effekte */
.play{position:relative}
.play::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:radial-gradient(circle at center,transparent 0%,rgba(255,236,49,.05) 50%,transparent 100%);opacity:0;transition:opacity .3s}
.play:hover::after{opacity:1}

/* Footer Dynamische Effekte */

/* Background Dynamische Partikel-Effekte */

/* Slot Dynamische Effekte */
.slot{transition:box-shadow .3s ease,border-color .3s ease;position:relative}
.slot::after{content:'';position:absolute;inset:0;border-radius:4px;opacity:0;background:radial-gradient(circle,var(--gold),transparent);transition:opacity .3s;pointer-events:none}
.slot:hover::after{opacity:.2}
.slot:hover{box-shadow:6px 6px 0 #000,inset 0 0 0 2px var(--bg-light),0 0 20px rgba(255,236,49,.4);border-color:#FFEC31}

/* Stats Panel Dynamische Effekte */
.stat-card{transition:box-shadow .3s ease,border-color .3s ease;position:relative}
.stat-card:hover{box-shadow:inset 0 0 14px rgba(0,0,0,0.9),0 0 10px rgba(255,236,49,.3);border-color:var(--gold)}
.stat-value{transition:color .3s ease;display:inline-block}
.stat-value.updated{animation:numberCount .5s ease-out}

/* Smooth Scroll für Overlays */

/* Input Fields Dynamische Effekte */
.name-input,.form-input{transition:border-color .3s ease,box-shadow .3s ease}
.name-input:focus,.form-input:focus{animation:glowPulse 2s ease-in-out infinite}

/* Close Button Dynamische Effekte */
.close-btn{transition:box-shadow .3s ease,background .3s ease}
.close-btn:hover{box-shadow:3px 3px 0 #000!important;background:#FFEC31!important}

/* Share Button Dynamische Effekte */
.share-btn{position:relative;overflow:hidden}
.share-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}
.share-btn:hover::before{width:300px;height:300px}
.share-btn:hover{box-shadow:0 0 20px rgba(255,236,49,.5);border-color:#000}
.share-btn:active{box-shadow:0 0 10px rgba(255,236,49,.3)!important}

.desktop-layout{display:grid;grid-template-columns:1fr;width:100vw;height:100vh;gap:0;background:var(--bg-white);position:relative}
.desktop-layout::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--bg-light) 2px,var(--bg-light) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,var(--bg-light) 2px,var(--bg-light) 4px);opacity:0.3;pointer-events:none;z-index:0}
.left-panel,.right-panel{display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;height:100%;background:var(--bg-white);position:relative;z-index:1}
.left-panel *,.right-panel *{filter:saturate(0.9)}
.right-panel.split{display:flex;flex-direction:column;height:100%;min-height:100vh;width:100%;position:relative}
.right-top,.right-bottom{flex:1;min-height:50%}
.right-divider{display:none!important}
.game-right{display:flex;height:100%}
.right-panel{display:flex!important;flex-direction:column!important;width:100%!important;overflow:hidden!important;padding:24px 32px!important;gap:12px!important;align-items:stretch!important;position:relative}
.right-panel::before{display:none}
.right-panel::after{display:none}

.left-top,.left-middle{flex:1 1 auto!important;min-height:0!important;border:1px solid rgba(255,236,49,.7);border-radius:18px;padding:12px 14px;background:rgba(0,0,0,.7);display:flex!important;flex-direction:column!important;box-shadow:0 0 15px rgba(255,236,49,.3),0 0 30px rgba(255,236,49,.15),inset 0 0 20px rgba(0,0,0,.5)}
.left-top{background:linear-gradient(180deg,rgba(255,236,49,0.10),rgba(0,0,0,0.85))!important;border:1px solid rgba(255,236,49,0.45)!important;box-shadow:inset 0 0 40px rgba(255,236,49,0.15),0 0 24px rgba(0,0,0,0.8)!important;padding:28px 32px!important}
.left-top h1{text-align:left;font-size:17px;letter-spacing:0.24em;margin-top:0;margin-bottom:14px;padding-top:0;line-height:1.2;color:var(--gold);text-shadow:0 0 10px rgba(255,236,49,.8),0 0 20px rgba(255,236,49,.5);font-family:monospace;text-transform:uppercase}
.left-middle{background:linear-gradient(180deg,rgba(255,236,49,0.10),rgba(0,0,0,0.85))!important;border:1px solid rgba(255,236,49,0.45)!important;box-shadow:inset 0 0 40px rgba(255,236,49,0.15),0 0 24px rgba(0,0,0,0.8)!important;padding:28px 32px!important}
.left-middle h2{text-align:left!important;font-size:17px!important;letter-spacing:0.24em!important;margin-top:0!important;margin-bottom:14px!important;padding-top:0!important;line-height:1.2!important;color:var(--gold)!important;text-shadow:0 0 10px rgba(255,236,49,.8),0 0 20px rgba(255,236,49,.5)!important;font-family:monospace!important;text-transform:uppercase!important}
.left-bottom{flex:0 0 auto!important;border:none!important;border-radius:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;display:flex!important;flex-direction:column!important}
.left-panel{display:flex!important;flex-direction:column!important;width:100%!important;overflow:hidden!important;padding:0!important;gap:0!important;justify-content:center!important;align-items:center!important;perspective:2500px;perspective-origin:center center;background:var(--bg-white)}

.flip-container{position:relative;width:100%;height:100%;overflow:hidden}
.flip-container-inner{position:relative;width:100%;height:100%}
.flip-front{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow-y:auto;opacity:1;pointer-events:auto;visibility:visible}
.flip-back{display:none!important}

.slots-page{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:60px;padding-bottom:20px;padding-left:20px;padding-right:20px;position:relative;background:var(--bg-white);overflow-y:auto}
.slots-header{position:fixed;top:0;left:0;right:0;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:10px 20px;z-index:100;background:var(--bg-white);border-bottom:3px solid var(--gold);width:100%;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.slots-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px)}
.slots-header h1{color:var(--text-dark);font-size:24px;letter-spacing:0.2em;font-weight:900;margin:0;text-shadow:2px 2px 0 var(--gold),-1px -1px 0 var(--gold)}

.lt-textarea{width:100%!important;min-height:100px;background:rgba(0,0,0,0.75);border:1px solid rgba(255,236,49,0.45);color:var(--gold);border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5;margin-bottom:0;box-shadow:inset 0 0 22px rgba(0,0,0,0.8),0 0 14px rgba(255,236,49,0.15);pointer-events:none;user-select:text;font-family:monospace}
.lt-textarea a{pointer-events:auto;color:var(--gold)!important;text-decoration:none;transition:opacity 0.25s}
.lt-textarea a:hover{opacity:0.8;text-decoration:underline}
.lt-magic-desc a{color:var(--gold)!important;text-decoration:none;transition:opacity 0.25s}
.lt-magic-desc a:hover{opacity:0.8;text-decoration:underline}
.lt-textarea .signature{font-weight:700;opacity:.9}
.lt-textarea.lt-magic-intro{min-height:auto!important;padding:12px 16px!important}
.lt-magic-desc{text-align:left;font-size:12px;margin-bottom:8px!important;margin-top:0!important;opacity:0.7;color:var(--gold);line-height:1.5;width:100%}
.lt-card-area{width:100%!important;min-height:100px;background:rgba(0,0,0,0.75);border:1px solid rgba(255,236,49,0.45);color:var(--gold);border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5;margin-bottom:6px!important;margin-top:12px!important;box-shadow:inset 0 0 22px rgba(0,0,0,0.8),0 0 14px rgba(255,236,49,0.15);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}

#card{width:100%!important;display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:10px 14px!important;font-family:monospace!important;font-size:14px!important;line-height:1.2!important;flex:1;align-items:flex-start;justify-content:flex-start;margin-top:0!important;max-width:420px!important;min-height:120px!important;padding:14px!important;background:rgba(0,0,0,0.45)!important;border-radius:12px!important;text-align:center!important;transform:none!important;animation:none!important;opacity:1!important;margin-left:auto!important;margin-right:auto!important}
#card span{display:block!important;color:var(--gold)!important}
#card:has(.celebrate-image){display:flex!important;align-items:flex-start!important;justify-content:center!important;padding-top:4px!important}
#card .celebrate-image{max-width:80px!important;max-height:80px!important;width:auto!important;height:auto!important;object-fit:contain!important;object-position:center!important;display:block!important}

.magic-buttons{display:flex;gap:14px;justify-content:center;width:100%;margin:0 0 6px 0!important}
.magic-buttons button{flex:1;background:linear-gradient(180deg,#000,#050505)!important;color:var(--gold)!important;border:1px solid rgba(255,236,49,0.6)!important;padding:10px 14px!important;border-radius:12px!important;font-weight:800!important;font-size:12px!important;letter-spacing:0.08em!important;cursor:pointer;box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 14px rgba(255,236,49,0.25)!important;text-shadow:0 0 6px rgba(255,236,49,.8);transition:all .25s;margin-top:0!important}
.magic-buttons button:hover{box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 22px rgba(255,236,49,0.45)!important}
.magic-reset{width:100%;margin:0 0 0 0!important}
.magic-reset button{width:100%;background:linear-gradient(180deg,#000,#050505)!important;color:var(--gold)!important;border:1px solid rgba(255,236,49,0.6)!important;padding:10px 14px!important;border-radius:12px!important;font-weight:800!important;font-size:12px!important;letter-spacing:0.08em!important;cursor:pointer;box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 14px rgba(255,236,49,0.25)!important;text-shadow:0 0 6px rgba(255,236,49,.8);transition:all .25s;opacity:0.9!important}
.magic-reset button:hover{box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 22px rgba(255,236,49,0.45)!important;transform:scale(1.03)}
#magic button{background:linear-gradient(180deg,#000,#050505)!important;color:var(--gold)!important;border:1px solid rgba(255,236,49,0.6)!important;padding:10px 14px!important;border-radius:12px!important;font-weight:800!important;font-size:12px!important;letter-spacing:0.08em!important;cursor:pointer;box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 14px rgba(255,236,49,0.25)!important;text-shadow:0 0 6px rgba(255,236,49,.8);transition:all .25s;margin-top:0!important}
#magic button:hover{box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 22px rgba(255,236,49,0.45)!important}
#magic{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;flex:1 1 auto!important;min-height:0!important;padding-top:0!important;margin-top:10px!important;margin-bottom:0!important}

.progress-slot{background:rgba(0,0,0,0.45)!important;border:1px solid rgba(255,236,49,0.25)!important;border-radius:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:monospace!important;font-size:11px!important;letter-spacing:0.18em!important;text-transform:uppercase!important;color:#000!important;box-shadow:inset 0 0 20px rgba(0,0,0,0.8),0 0 6px rgba(255,236,49,0.08)!important;opacity:0.9!important;text-align:center!important;position:relative!important;cursor:default!important;width:100%!important;min-height:80px!important;padding:12px 16px!important}
.progress-slot::after{content:attr(data-status);position:absolute;bottom:10px;font-size:12px;letter-spacing:0.1em;text-transform:none;color:#000;opacity:0;transition:opacity 0.25s ease;font-weight:700}
.progress-slot:hover{opacity:1!important;border-color:rgba(255,236,49,0.45)!important;box-shadow:inset 0 0 20px rgba(0,0,0,0.8),0 0 10px rgba(255,236,49,0.25)!important}
.progress-slot:hover::after{opacity:1}

.right-top{flex:0 0 30%!important;min-height:0!important;border:1px solid rgba(255,236,49,.7);border-radius:18px;padding:12px 14px;background:rgba(0,0,0,.7);display:flex!important;flex-direction:column!important;box-shadow:0 0 15px rgba(255,236,49,.3),0 0 30px rgba(255,236,49,.15),inset 0 0 20px rgba(0,0,0,.5);background:linear-gradient(180deg,rgba(255,236,49,0.10),rgba(0,0,0,0.85))!important;border:1px solid rgba(255,236,49,0.45)!important;box-shadow:inset 0 0 40px rgba(255,236,49,0.15),0 0 24px rgba(0,0,0,0.8)!important;width:100%!important;max-width:none!important;padding:18px 20px!important;margin:0!important;justify-content:flex-start!important;overflow:hidden!important}
.right-top h2{text-align:left!important;font-size:15px!important;letter-spacing:0.24em!important;margin-top:0!important;margin-bottom:10px!important;padding-top:0!important;line-height:1.2!important;color:var(--gold)!important;text-shadow:0 0 10px rgba(255,236,49,.8),0 0 20px rgba(255,236,49,.5)!important;font-family:monospace!important;text-transform:uppercase!important}
.right-top textarea{width:100%!important;max-width:100%!important;min-height:60px!important;max-height:60px!important;font-size:13px!important;line-height:1.4!important;padding:10px 12px!important;margin-bottom:4px!important;background:rgba(0,0,0,0.75);color:var(--gold);border:1px solid rgba(255,236,49,0.45);border-radius:12px;box-shadow:inset 0 0 22px rgba(0,0,0,0.8),0 0 14px rgba(255,236,49,0.15);resize:none;transition:all .25s;flex-shrink:0!important}
.right-top textarea::placeholder{color:rgba(255,236,49,0.5)}
.right-top textarea:focus{outline:none;box-shadow:0 0 15px rgba(255,236,49,.7),0 0 30px rgba(255,236,49,.3),inset 0 0 15px rgba(255,236,49,.15);border-color:#FFEC31}
.right-top button{background:linear-gradient(180deg,#000,#050505)!important;color:var(--gold)!important;border:1px solid rgba(255,236,49,0.6);font-size:11px!important;letter-spacing:0.08em;padding:8px 12px!important;box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 14px rgba(255,236,49,0.25);transition:all .25s;flex-shrink:0!important}
.right-top button:hover{box-shadow:inset 0 0 16px rgba(0,0,0,0.9),0 0 22px rgba(255,236,49,0.45)}
.right-top .rt-row:last-child button{opacity:0.9}
.right-bottom{flex:0 0 70%!important;min-height:0!important;border:1px solid rgba(255,236,49,.7);border-radius:18px;padding:16px 18px!important;background:rgba(0,0,0,.7);display:flex!important;flex-direction:column!important;box-shadow:0 0 15px rgba(255,236,49,.3),0 0 30px rgba(255,236,49,.15),inset 0 0 20px rgba(0,0,0,.5);opacity:0.85;border:1px solid rgba(255,236,49,0.35);box-shadow:inset 0 0 30px rgba(0,0,0,0.6),0 0 18px rgba(255,236,49,0.12);overflow:hidden!important}

.rt-row{display:flex;gap:10px!important;margin:0 0 4px 0!important;width:100%;flex-shrink:0!important}
.rt-row:last-child{margin-bottom:0!important}
.rt-row button{flex:1;background:#000;color:var(--gold);border:1px solid var(--gold);border-radius:12px;font-weight:800;font-size:11px!important;padding:8px 10px!important;box-shadow:0 0 10px rgba(255,236,49,.5),0 0 20px rgba(255,236,49,.2);text-shadow:0 0 6px rgba(255,236,49,.8);transition:all .25s}
.rt-row button:hover{box-shadow:0 0 15px rgba(255,236,49,.8),0 0 30px rgba(255,236,49,.4);border-color:#FFEC31}

.stats-panel{margin-bottom:14px;padding:10px 12px;background:rgba(0,0,0,0.7);border:1px solid rgba(255,236,49,0.45);border-radius:14px;box-shadow:inset 0 0 22px rgba(0,0,0,0.8),0 0 14px rgba(255,236,49,0.15);display:flex;flex-direction:column;gap:10px}
.stats-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stats-header h3{margin:0;font-size:12px;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase;text-shadow:0 0 8px rgba(255,236,49,.8)}
.stats-subtitle{font-size:10px;color:rgba(255,236,49,0.7);letter-spacing:0.08em;text-transform:uppercase}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.stat-card{background:rgba(0,0,0,0.75);border:1px solid rgba(255,236,49,0.35);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 0 14px rgba(0,0,0,0.9)}
.stat-card-wide{grid-column:1/-1}
.stat-label{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,236,49,0.75)}
.stat-value{font-family:monospace;font-size:15px;color:#000;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-hint{font-size:9px;color:rgba(255,236,49,0.6);letter-spacing:0.06em;text-transform:uppercase}
.stat-value a{color:inherit;text-decoration:none;display:inline-block;width:100%}
.stat-value a:hover{text-decoration:none}

.slots-burned-display{text-align:center;margin-bottom:12px;padding:12px;background:var(--gold);border:3px solid #000;border-radius:4px;font-family:monospace;font-size:12px;letter-spacing:0.1em;color:#000;box-shadow:4px 4px 0 #000;text-decoration:none;display:block;cursor:pointer;transition:all .2s;font-weight:900;text-transform:uppercase}
.slots-burned-display:hover{box-shadow:6px 6px 0 #000;background:#FFEC31}
.slots-burned-display .burned-label{opacity:0.9;margin-right:8px}
.slots-burned-display .burned-amount{font-weight:900}
.slots{display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(3,1fr)!important;gap:12px!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;padding:8px}
.slot{position:relative;border:3px solid var(--gold);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-white);box-shadow:4px 4px 0 #000,inset 0 0 0 2px var(--bg-light);transition:all .2s;min-height:0;aspect-ratio:1/1}
.slot::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 15px,#000 15px,#000 30px);opacity:0.6}
.slot img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}
.slot a{width:100%;height:100%;display:block}
.slot:hover{box-shadow:6px 6px 0 #000,inset 0 0 0 2px var(--bg-light);border-color:#FFEC31}
.slot-empty{font-size:11px;text-align:center;padding:6px;color:var(--text-dark);font-family:monospace;letter-spacing:0.18em;text-transform:uppercase;opacity:0.6;font-weight:600}
.slot-buy{cursor:pointer!important;background:var(--bg-light)!important;border:3px dashed var(--gold)!important;flex-direction:column!important;gap:8px!important;padding:12px!important;box-shadow:4px 4px 0 #000!important}
.slot-buy:hover{border-color:#000!important;box-shadow:6px 6px 0 #000!important;background:var(--gold)!important}
.slot-buy-text{font-size:12px;font-weight:900;color:var(--text-dark);font-family:monospace;letter-spacing:0.15em;text-transform:uppercase}
.slot-buy:hover .slot-buy-text{color:#000}
.slot-price{font-size:10px;color:var(--text-dark);font-family:monospace;letter-spacing:0.1em;opacity:0.8}

/* Slot Buy Popup */
#slotBuyOverlay,#slotsViewOverlay,#translatorViewOverlay,#statsOverlay,#legalOverlay,#welcomeOverlay{position:fixed;inset:0;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;overflow-y:auto;backdrop-filter:blur(4px)}
#slotBuyPopup,#slotsViewPopup,#translatorViewPopup,#statsPopup,#legalPopup,#welcomePopup{background:var(--bg-white);border:4px solid var(--gold);box-shadow:8px 8px 0 #000,0 0 0 2px var(--gold);border-radius:8px;padding:24px;text-align:center;animation:pop .3s ease-out;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
#slotBuyPopup::before,#slotsViewPopup::before,#translatorViewPopup::before,#statsPopup::before,#legalPopup::before,#welcomePopup::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 40px)}
#welcomePopup{z-index:1000}
#welcomePopup h2{color:var(--text-dark);font-size:28px;font-weight:900;margin-bottom:20px;text-transform:uppercase;letter-spacing:0.1em;text-shadow:2px 2px 0 var(--gold)}
.welcome-content{text-align:left;font-size:14px;line-height:1.8;color:var(--text-dark);max-height:400px;overflow-y:auto;padding:20px;background:var(--bg-light);border:2px solid var(--gold);border-radius:4px;margin:20px 0}
.welcome-content p{margin:12px 0;color:var(--text-dark);font-weight:500}
.welcome-content p strong{color:var(--text-dark);font-weight:900;font-size:16px;display:block;margin-bottom:4px}
.welcome-content ul{margin:12px 0;padding-left:24px}
.welcome-content li{margin:8px 0;color:var(--text-dark);line-height:1.6}
.welcome-content li strong{color:var(--text-dark);font-weight:700}

/* Welcome popup: in-game button replica (non-interactive) */
.welcome-game-button-wrapper{margin:8px 0 10px}
.welcome-game-button{
  width:100%;
  padding:10px 12px;
  background:linear-gradient(135deg,var(--gold),#FFD700,var(--gold));
  color:#000;
  border:2px solid var(--gold);
  font-weight:600;
  box-shadow:0 0 8px rgba(255,236,49,0.3);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:clamp(10px,2.8vw,12px);
  border-radius:6px;
  position:relative;
  overflow:hidden;
  pointer-events:none;
  white-space:nowrap;
  line-height:1.3;
  text-align:center;
}
.welcome-howto{font-size:14px;line-height:1.8;margin-bottom:8px}
.welcome-combos-text{margin:12px 0}
.welcome-combos-line1,.welcome-combos-line2,.welcome-combos-line3{font-size:14px;line-height:1.8;margin:0!important;color:var(--text-dark);text-align:left}

/* Welcome popup: stickers (match in-game vibe) */
.welcome-stickers{margin:10px 0 2px}
.welcome-sticker-row{display:flex;gap:10px;justify-content:center;align-items:center;margin:8px 0;flex-wrap:wrap}
.welcome-sticker{
  --sticker:#4facfe;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  background:#0b0b0b;
  color:#fff;
  border:3px solid var(--sticker);
  border-radius:8px;
  font-weight:900;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  box-shadow:0 0 18px color-mix(in srgb, var(--sticker) 55%, transparent), inset 0 0 10px rgba(0,0,0,0.55);
}
.welcome-sticker.s-x125{--sticker:#4facfe}
.welcome-sticker.s-x150{--sticker:#ff3cac}
.welcome-sticker.s-808{--sticker:#FFD700;color:#fff}
.welcome-sticker.s-build{--sticker:#8f00ff} /* avoid second pink */
.welcome-sticker.s-wagbi{--sticker:#00ff9c;color:#fff}
.welcome-sticker.s-bob{--sticker:#ffe600;color:#fff}
#legalPopup h3{color:var(--text-dark);font-size:24px;font-weight:900;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.1em;text-shadow:2px 2px 0 var(--gold)}
#slotsViewPopup{max-width:90vw;max-width:min(90vw,650px);padding-top:40px}
#translatorViewPopup{max-width:90vw;max-width:min(90vw,500px)!important;padding:16px 20px!important}
.slots-view-container{margin:0;min-height:200px}
#slotsViewContainer .slot{aspect-ratio:1/1!important}
.slots-view-buy{margin-top:20px}
#translatorViewPopup .translator-view-container{margin:8px 0!important}
#translatorViewPopup .translator-textarea{width:100%!important;padding:10px!important;background:rgba(0,0,0,0.8)!important;border:1px solid var(--gold)!important;color:var(--gold)!important;border-radius:8px!important;font-size:13px!important;font-family:monospace!important;margin-bottom:8px!important;min-height:80px!important;resize:vertical!important;box-shadow:inset 0 0 10px rgba(255,236,49,0.2)!important}
#translatorViewPopup .translator-textarea:focus{outline:none!important;border-color:#FFEC31!important;box-shadow:inset 0 0 15px rgba(255,236,49,0.3),0 0 10px rgba(255,236,49,0.4)!important}
#translatorViewPopup .translator-textarea::placeholder{color:rgba(255,236,49,0.5)!important}
#translatorViewPopup .translator-buttons{display:flex!important;gap:10px!important;margin-bottom:8px!important;justify-content:center!important}
#translatorViewPopup .translator-btn{padding:8px 16px!important;background:#000!important;color:var(--gold)!important;border:1px solid var(--gold)!important;font-size:12px!important;font-weight:700!important;letter-spacing:0.1em!important;border-radius:8px!important;cursor:pointer!important;transition:all .25s!important;flex:1!important;max-width:150px!important}
#translatorViewPopup .translator-btn:hover{box-shadow:0 0 10px rgba(255,236,49,0.5)!important;border-color:#FFEC31!important;background:rgba(255,236,49,0.1)!important}
#slotBuyPopup h3,#translatorViewPopup h3,#statsPopup h3{color:var(--gold)!important;font-size:20px!important;margin-bottom:12px!important;text-shadow:0 0 10px rgba(255,236,49,0.6)!important;letter-spacing:0.1em!important}
.slot-buy-info{text-align:left;margin-bottom:20px}
.slot-buy-desc{color:var(--gold);font-size:14px;margin-bottom:16px;opacity:0.9}
.wallet-info,.token-info{margin-bottom:16px}
.wallet-label,.token-label{color:rgba(255,236,49,0.7);font-size:11px;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.1em}
.wallet-address,.token-address{background:rgba(0,0,0,0.6);border:1px solid rgba(255,236,49,0.4);border-radius:8px;padding:10px;color:var(--gold);font-family:monospace;font-size:11px;word-break:break-all;margin-bottom:8px}
.copy-btn{background:var(--gold);color:#000;border:3px solid var(--gold);border-radius:4px;padding:8px 14px;font-size:11px;cursor:pointer;transition:all .2s;font-family:monospace;font-weight:900;box-shadow:0 0 8px rgba(255,236,49,0.3);letter-spacing:0.05em;text-transform:uppercase}
.copy-btn:hover{box-shadow:0 0 12px rgba(255,236,49,0.5);background:#FFEC31;border-color:#000}
.copy-btn:active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
.qr-code-container{display:flex;justify-content:center;margin:16px 0;padding:12px;background:rgba(0,0,0,0.4);border-radius:8px}
.slot-buy-form{margin-top:20px}
.form-label{color:var(--gold);font-size:13px;margin-bottom:12px;opacity:0.9}
.form-input{width:100%;padding:10px;margin-bottom:12px;background:rgba(0,0,0,0.6);border:1px solid rgba(255,236,49,0.4);border-radius:8px;color:var(--gold);font-family:monospace;font-size:12px;box-sizing:border-box}
.form-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 10px rgba(255,236,49,0.3)}
button:focus-visible, .close-btn:focus-visible, .stats-return-btn:focus-visible, .stats-refresh-btn:focus-visible, .copy-btn:focus-visible, .translator-btn:focus-visible, .tab-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 15px rgba(255,236,49,0.6)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.file-label{display:block;color:rgba(255,236,49,0.7);font-size:11px;margin-top:-8px;margin-bottom:12px;text-align:left}
.slot-buy-legal{margin:16px 0;padding:12px;background:rgba(255,193,7,0.1);border:2px solid var(--gold);border-radius:8px;text-align:left}
.legal-disclaimer-text{font-size:11px;line-height:1.6;color:var(--text-dark);margin:0;font-weight:500}
.legal-disclaimer-text strong{color:var(--gold);font-weight:900;font-size:12px}
.form-buttons{display:flex;gap:12px;margin-top:16px}
.submit-btn,.cancel-btn{flex:1;padding:12px;background:var(--gold);color:#000;border:3px solid var(--gold);font-weight:900;box-shadow:0 0 10px rgba(255,236,49,0.3);transition:all .2s;cursor:pointer;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;border-radius:4px}
.submit-btn:hover,.cancel-btn:hover{box-shadow:0 0 15px rgba(255,236,49,0.5);background:#FFEC31;border-color:#000}
.submit-btn:active,.cancel-btn:active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
.cancel-btn{opacity:0.9}
.close-btn{position:absolute!important;top:12px!important;right:12px!important;background:linear-gradient(135deg,var(--gold),#FFD700)!important;border:3px solid var(--gold)!important;color:#000!important;font-size:20px!important;cursor:pointer!important;padding:6px 12px!important;width:auto!important;height:auto!important;display:inline-block!important;line-height:1!important;transition:all .2s!important;box-shadow:0 0 8px rgba(255,236,49,0.3)!important;font-weight:900!important;letter-spacing:normal!important;border-radius:6px!important}
.close-btn:hover{box-shadow:0 0 12px rgba(255,236,49,0.5)!important;background:linear-gradient(135deg,#FFD700,var(--gold))!important;border-color:#000!important}
.close-btn:active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}

.stats-popup .stats-intro{font-size:12px;color:rgba(255,236,49,0.8);margin-top:4px;margin-bottom:12px}
.stats-view{display:block}
.stats-grid-large{margin-top:8px}
.stats-footer{margin-top:18px;display:flex;gap:12px;justify-content:center}
.stats-return-btn,.popup-buttons button:not(.close-btn){padding:12px 18px;background:var(--gold);color:#000;border:3px solid var(--gold);font-weight:900;letter-spacing:0.1em;text-transform:uppercase;border-radius:4px;cursor:pointer;box-shadow:0 0 10px rgba(255,236,49,0.3);transition:all .2s;font-size:12px;text-decoration:none;display:inline-block}
.stats-return-btn:hover,.popup-buttons button:not(.close-btn):hover{box-shadow:0 0 15px rgba(255,236,49,0.5);background:#FFEC31;border-color:#000}
.stats-return-btn:active,.popup-buttons button:not(.close-btn):active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
.stats-refresh-btn{background:var(--gold);color:#000;border:3px solid var(--gold);border-radius:4px;cursor:pointer;padding:8px 12px;font-size:16px;font-weight:900;transition:all .2s;box-shadow:0 0 8px rgba(255,236,49,0.3);min-width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.stats-refresh-btn:hover{box-shadow:0 0 12px rgba(255,236,49,0.5);background:#FFEC31;border-color:#000}
.stats-refresh-btn:active{box-shadow:0 0 6px rgba(255,236,49,0.3)!important}
.stats-alltime-btn{flex:0 0 auto}

.stats-list{margin-top:8px;font-family:monospace;font-size:11px;color:#000;display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto}
.stats-list-item{display:flex;flex-direction:column;align-items:flex-start;padding:6px 8px;background:rgba(0,0,0,0.65);border-radius:6px;border:1px solid rgba(255,236,49,0.25)}
.stats-list-item-main{display:flex;width:100%;justify-content:space-between;gap:8px}
.stats-list-item-address{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-list-item-amount{font-weight:700;color:#000}
.stats-list-item-sub{margin-top:2px;font-size:10px;opacity:0.8}
.stats-list-placeholder{opacity:0.7;font-style:italic;text-align:left}
.skeleton-loader{display:inline-block;background:linear-gradient(90deg,rgba(255,236,49,0.1) 25%,rgba(255,236,49,0.2) 50%,rgba(255,236,49,0.1) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;min-width:60px}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,236,49,0.3);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-bar-container{width:100%;height:6px;background:rgba(0,0,0,0.5);border-radius:3px;overflow:hidden;margin:10px 0}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),#FFEC31);transition:width 0.3s ease;border-radius:3px}
.progress-text{font-size:11px;color:var(--gold);text-align:center;margin-top:4px}

/* Stats Popup Layout - Mobile-Layout für alle Geräte (Desktop & Mobile) */
#statsPopup .stats-grid-large{display:flex!important;flex-direction:column!important;gap:10px}
#statsPopup .stat-card-total{order:1;width:100%!important}
#statsPopup .stats-row-mobile{order:2;display:flex!important;gap:10px!important;width:100%!important}
#statsPopup .stats-row-mobile .stat-card{width:calc(50% - 5px)!important;flex:1 1 auto!important}
#statsPopup .stat-card-last{order:3;width:100%!important}

.magic-panel{position:relative;border-radius:0;background:transparent;border:none;box-shadow:none;display:flex!important;flex-direction:column!important;width:100%!important;max-width:620px!important;height:100%!important;max-height:100%!important;margin:0 auto!important;padding:24px 32px!important}
.magic-panel::after{display:none}
.magic-panel h2{letter-spacing:0.25em;font-size:16px;opacity:0.9;text-shadow:0 0 10px rgba(255,236,49,0.4),0 0 24px rgba(255,236,49,0.25)}
.magic-panel .header{flex:0 0 auto!important;margin-top:-12px!important}
.magic-panel .header h1{transform:translateY(-18px);font-size:40px!important;margin-bottom:6px!important}
.magic-panel .subtitle{font-size:11px;margin-bottom:18px!important;margin-top:-10px!important}
.magic-panel .message{margin:10px 0!important;padding:16px 22px!important;max-width:100%!important;font-size:14px;line-height:1.35!important}
.magic-panel .message:first-of-type{margin-top:4px!important}

.header h1{position:sticky;top:12px;z-index:10}
.footer{position:sticky;bottom:12px;z-index:10;pointer-events:none}
.final-contract-box{grid-column:1/-1;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 10px!important;min-height:unset!important;height:auto!important;background:rgba(0,0,0,0.55);border-radius:8px;font-family:monospace;font-size:12px;line-height:1.2;letter-spacing:0.04em;color:#000;opacity:0.9;user-select:all}

.game-wrapper{column-gap:0}
.game-left,.game-right{padding:0}
.game-center{display:none!important}

@media (min-width:900px){
  body{display:flex;justify-content:center;background:#000}
  .game-wrapper{display:grid;grid-template-columns:1fr;width:100%;max-width:1400px;margin:0 auto}
  .game-left,.game-right{color:#777;font-size:14px;padding:20px}
  canvas{margin:0 auto;display:block}
  .game-right{display:none!important}
  .right-panel{display:none!important}
  .right-bottom{padding:14px 16px!important}
  .slots{gap:8px!important}
  .desktop-layout{grid-template-columns:1fr!important}
}

@media (max-height:900px){.magic-panel main.container{transform:scale(0.9)}}
@media (max-height:850px){.magic-panel{padding:20px 20px!important}.magic-panel .message{margin:12px 0!important;padding:18px 18px!important}}
@media (max-height:820px){.magic-panel main.container{transform:scale(0.85)}}
@media (max-height:800px){.magic-panel main.container{transform:scale(0.85)}}
@media (max-height:740px){.magic-panel main.container{transform:scale(0.8)}}
@media (max-height:720px){.magic-panel{padding:16px 16px!important}.magic-panel .message{font-size:14px;padding:16px 16px!important}#magic h2{font-size:14px}.magic-panel main.container{transform:scale(0.78)}}
@media (max-height:680px){.magic-panel main.container{transform:scale(0.75)}}
@media (max-height:650px){.magic-panel main.container{transform:scale(0.72)}}

/* Mobile & Tablet - Portrait Mode Only - Optimiert für alle Elemente sichtbar */
@media (pointer:coarse) and (orientation:portrait){
  html,body{width:100vw;height:100svh;overflow:hidden;position:fixed}
  /* Gelb-schwarze Linien oben und unten entfernt */
  body::before{display:none!important}
  body::after{display:none!important}
  .desktop-layout{display:flex!important;width:100vw!important;height:100svh!important;max-width:100vw!important;max-height:100svh!important}
  .left-panel{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;overflow:hidden!important}
  .flip-container{width:100%!important;height:100%!important;max-width:100vw!important;max-height:100svh!important}
  .flip-container-inner{width:100%!important;height:100%!important}
  .flip-front,.flip-back{width:100%!important;height:100%!important;max-width:100vw!important;max-height:100svh!important}
  .page{width:100%!important;height:100%!important;max-width:100vw!important;max-height:100svh!important}
  .game{width:100%!important;height:100%!important;max-width:100vw!important;max-height:100svh!important;display:flex!important;flex-direction:column!important;padding:0!important;margin:0!important;justify-content:flex-start!important}
  
  /* Header optimiert für Mobile */
  header{padding:8px 6px!important;flex-shrink:0!important}
  .header-content{gap:6px!important}
  .bob-image{width:32px!important;height:32px!important;flex-shrink:0!important}
  .header-text h1{font-size:16px!important;margin:0!important;line-height:1.2!important}
  .header-text .tagline{font-size:9px!important;margin:2px 0 0 0!important}
  
  /* HUD optimiert */
  .hud{font-size:10px!important;padding:6px 8px!important;margin:4px 0!important;gap:4px!important;flex-shrink:0!important}
  .hud span{font-size:10px!important}
  .hud b{font-size:11px!important}
  .hud-highscore-btn{padding:4px 8px!important;font-size:9px!important;letter-spacing:0.06em!important;white-space:nowrap!important}
  
  /* Milestones optimiert */
  .milestones{font-size:9px!important;padding:6px 8px!important;margin:4px 0!important;gap:4px!important;flex-shrink:0!important}
  .milestones span{padding:4px 6px!important;font-size:8px!important;letter-spacing:0.08em!important}
  
  /* Progress Bar optimiert */
  .progressTop{height:14px!important;margin:4px 8px!important;flex-shrink:0!important}
  
  /* Canvas - nimmt restlichen Platz ein */
  .play{flex:1 1 auto!important;min-height:0!important;margin:4px 8px!important;overflow:hidden!important}
  canvas{width:100%!important;height:100%!important;display:block!important}
  
  /* Footer optimiert */
  footer{padding:8px!important;flex-shrink:0!important;gap:4px!important}
  #drop{padding:10px 12px!important;font-size:11px!important;letter-spacing:0.1em!important}
  
  .slots-page{width:100%!important;height:100%!important;padding:10px!important}
  .slots-header{top:0!important;z-index:100!important;position:absolute!important;display:flex!important}
  #highscoreOverlay,#overlay,#slotBuyOverlay,#legalOverlay,#statsOverlay{padding:20px!important}
  #highscorePopup,#popup,#slotBuyPopup,#legalPopup,#statsPopup{max-width:95vw!important;max-height:90svh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
}

/* Tablet Portrait - Optimiert */
@media (pointer:coarse) and (orientation:portrait) and (min-width:600px) and (max-width:1024px){
  header{padding:10px 8px!important}
  .header-text h1{font-size:18px!important}
  .hud{font-size:11px!important;padding:8px 10px!important}
  .milestones{font-size:10px!important;padding:8px 10px!important}
  .milestones span{font-size:9px!important;padding:5px 8px!important}
}

/* Sehr kleine Mobile Geräte */
@media (pointer:coarse) and (orientation:portrait) and (max-height:700px){
  header{padding:6px 4px!important}
  .header-content{gap:4px!important}
  .bob-image{width:28px!important;height:28px!important}
  .header-text h1{font-size:14px!important}
  .header-text .tagline{font-size:8px!important;margin:1px 0 0 0!important}
  .hud{font-size:9px!important;padding:4px 6px!important;margin:2px 0!important}
  .hud b{font-size:10px!important}
  .hud-highscore-btn{padding:3px 6px!important;font-size:8px!important}
  .milestones{font-size:8px!important;padding:4px 6px!important;margin:2px 0!important}
  .milestones span{padding:3px 5px!important;font-size:7px!important}
  .progressTop{height:12px!important;margin:2px 6px!important}
  .play{margin:2px 6px!important}
  footer{padding:6px!important}
  #drop{padding:8px 10px!important;font-size:10px!important}
}

/* Landscape Mode - Blocked */
@media (pointer:coarse) and (orientation:landscape){
  .desktop-layout{display:none!important}
  body{overflow:hidden!important;position:fixed;width:100vw;height:100vh}
  body::before{content:"PLEASE ROTATE YOUR DEVICE\A PORTRAIT MODE REQUIRED";white-space:pre-line;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9999;display:flex!important;justify-content:center!important;align-items:center!important;background:var(--bg-white);color:var(--gold);font-family:system-ui,monospace;font-size:20px;letter-spacing:0.2em;text-align:center;font-weight:900;text-shadow:2px 2px 0 #000;border:4px solid var(--gold);box-shadow:8px 8px 0 #000;margin:0;padding:0}
  body::after{display:none!important}
}

/* Tablet Landscape - Also Blocked */
@media (pointer:coarse) and (orientation:landscape) and (min-width:600px){
  body::before{font-size:24px!important}
}

/* Desktop - Pointer Fine (Mouse/Trackpad) */
@media (pointer:fine){
  .desktop-layout{display:grid!important;grid-template-columns:1fr!important;width:100vw!important;height:100vh!important}
  .left-panel{display:flex!important;overflow:hidden!important;z-index:1;justify-content:center!important;align-items:center!important}
  .right-panel{display:none!important}
  .game-center{display:none!important}
  .flip-container{max-width:420px!important;max-height:800px!important;width:100%!important;height:100%!important}
  .flip-container-inner{max-width:420px!important;max-height:800px!important;width:100%!important;height:100%!important}
  .flip-front,.flip-back{max-width:420px!important;max-height:800px!important;width:100%!important;height:100%!important}
  .page{width:100%!important;height:100%!important;max-width:420px!important;max-height:800px!important}
  .game{position:relative!important;width:100%!important;height:100%!important;max-width:420px!important;max-height:800px!important;transform:none!important;display:flex!important;flex-direction:column!important}
  canvas{width:100%!important;height:100%!important;flex:1 1 auto!important}
  .slots-page{max-width:420px!important;max-height:800px!important}
  .slots-view-container .slots{max-width:380px!important}
}

html,body{min-height:100%;overflow-x:hidden}
@supports (padding:env(safe-area-inset-top)){
  body{min-height:100svh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:#000}
  .desktop-layout{min-height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}

.slots-view-container{flex:1;overflow-y:auto;padding:10px;width:100%;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;margin-top:60px}
.slots-view-container .slots{display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(3,1fr)!important;gap:10px!important;width:100%!important;max-width:500px!important;margin:0 auto!important;aspect-ratio:1/1!important}
.slots-view-container .slots-burned-display{width:100%;max-width:500px;margin:0 auto}
.stats-content{display:flex;flex-direction:column;gap:20px;max-height:70vh;overflow-y:auto;padding:10px}
.stats-summary{display:flex;flex-direction:column;gap:12px;padding:15px;background:var(--bg-light);border:3px solid var(--gold);border-radius:8px}
.stat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,236,49,0.3)}
.stat-item:last-child{border-bottom:none}
.stat-label{font-weight:700;color:var(--text-dark);font-size:14px}
.stat-value{font-weight:900;color:#000;font-size:16px;text-shadow:none}
.stats-lists{display:flex;flex-direction:column;gap:20px}
.stats-list-section h4{color:var(--text-dark);font-size:16px;font-weight:900;margin:0 0 10px 0;text-transform:uppercase;letter-spacing:0.1em}
.stats-list{display:flex;flex-direction:column;gap:8px;max-height:none;overflow-y:visible}
.stats-list-item{display:flex;flex-direction:column;padding:10px;background:var(--bg-light);border:2px solid var(--gold);border-radius:6px;gap:4px}
.stats-list-item-main{display:flex;justify-content:space-between;align-items:center}
.stats-list-item-address{font-family:monospace;font-size:12px;color:var(--text-dark);font-weight:700}
.stats-list-item-amount{font-size:14px;color:#000;font-weight:900}
.stats-list-item-sub{font-size:11px;color:rgba(0,0,0,0.6);font-style:italic}
.stats-list-placeholder{text-align:center;color:rgba(0,0,0,0.5);font-style:italic;padding:20px}

/* Zusätzliche dynamische Effekte */
@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}
/* Entfernte Animationen, die Skalierung verursachen */

/* Dynamische Text-Effekte */
h1{position:relative;display:inline-block}
h1::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--gold);transition:width .5s ease}
h1:hover::after{width:100%}

/* Dynamische Slot-Effekte beim Laden - nur visuelle Effekte, keine Bewegung */

/* Dynamische Highscore Entry Animationen - nur visuelle Effekte */

/* Dynamische Stat Card Animationen - nur visuelle Effekte */

/* Dynamische Scroll-Indikatoren */
.hs-entries::-webkit-scrollbar{width:8px}
.hs-entries::-webkit-scrollbar-track{background:var(--bg-light);border-radius:4px}
.hs-entries::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px;transition:background .3s}
.hs-entries::-webkit-scrollbar-thumb:hover{background:#FFD700}

/* Dynamische Focus States */
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,236,49,.2)}

/* Dynamische Success/Error States */
.success{animation:pulse .5s ease-out,glowPulse 2s ease-in-out infinite}
.error{animation:shake .5s ease-out}

/* Dynamische Cursor-Effekte */

/* Reduzierte Animationen bei niedriger Performance */
body.low-performance *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}

/* Accessibility: Reduzierte Animationen bei User-Präferenz */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}