:root{--color-bg: #1a0a2e;--color-bg-card: #2d1b4e;--color-surface: #3d2a5e;--color-surface-2: #4a3570;--color-primary: #8b5cf6;--color-primary-dark:#6d28d9;--color-secondary: #ec4899;--color-gold: #f59e0b;--color-red: #ef4444;--color-green: #22c55e;--color-text: #f3e8ff;--color-text-dim: #a78bda;--color-border: #5b3d8a;--color-common: #6b7280;--color-uncommon: #3b82f6;--color-rare: #8b5cf6;--color-epic: #f59e0b;--card-width: 76px;--card-height: 114px;--card-radius: 8px;--font-main: system-ui, -apple-system, sans-serif;--font-size-base: 16px;--gap-xs: 4px;--gap-sm: 8px;--gap-md: 12px;--gap-lg: 16px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{font-size:var(--font-size-base);font-family:var(--font-main);color:var(--color-text);background:var(--color-bg)}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;touch-action:manipulation}input{font:inherit;color:inherit;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:.6rem .8rem;outline:none;width:100%}input:focus{border-color:var(--color-primary)}h1,h2,h3{line-height:1.2}body{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;overscroll-behavior:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;height:calc(var(--vh, 1vh) * 100);overflow:hidden;background:var(--color-bg)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;overflow:hidden}.screen-active{display:flex}.hidden{display:none!important}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.2rem;border-radius:8px;font-size:.95rem;font-weight:600;min-height:44px;transition:opacity .15s,transform .1s;width:100%}.btn:active{transform:scale(.97);opacity:.85}.btn:disabled{opacity:.4;pointer-events:none}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-secondary);color:#fff}.btn-ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-text-dim)}.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-text)}.btn-back{background:none;border:none;font-size:1.4rem;color:var(--color-text-dim);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.btn-group{display:flex;gap:var(--gap-sm)}.btn-option{flex:1;padding:.5rem;border-radius:6px;border:1px solid var(--color-border);color:var(--color-text-dim);min-height:44px;font-size:.9rem}.btn-option-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn-lang{padding:.3rem .7rem;border-radius:4px;border:1px solid var(--color-border);color:var(--color-text-dim);font-size:.8rem}.btn-lang.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.form-group{display:flex;flex-direction:column;gap:var(--gap-xs);width:100%}.form-label{font-size:.85rem;color:var(--color-text-dim)}.screen-header{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-md) var(--gap-md) var(--gap-sm);flex-shrink:0}.screen-header h2{font-size:1.1rem;color:var(--color-text)}#screen-menu{display:none;align-items:center;justify-content:space-between;padding:2rem var(--gap-lg);background:radial-gradient(ellipse at top,#2d1b4e 0%,var(--color-bg) 70%)}#screen-menu.screen-active{display:flex}.menu-logo{text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.menu-logo h1{font-size:2.4rem;color:var(--color-gold);text-shadow:0 0 20px rgba(245,158,11,.4);letter-spacing:.05em}.menu-subtitle{color:var(--color-text-dim);font-size:.9rem;margin-top:.4rem}.menu-buttons{display:flex;flex-direction:column;gap:var(--gap-md);width:100%;max-width:320px;align-self:center}.menu-footer{display:flex;justify-content:center;gap:var(--gap-sm);padding-bottom:.5rem}#screen-solo-setup{background:var(--color-bg)}.setup-form{display:flex;flex-direction:column;gap:var(--gap-lg);padding:var(--gap-md) var(--gap-lg);overflow-y:auto;flex:1}#screen-multiplayer-lobby{background:var(--color-bg)}.lobby-connect{display:flex;flex-direction:column;gap:var(--gap-md);padding:var(--gap-md) var(--gap-lg)}.lobby-divider{text-align:center;color:var(--color-text-dim);font-size:.85rem;position:relative}.lobby-divider:before,.lobby-divider:after{content:"";position:absolute;top:50%;width:35%;height:1px;background:var(--color-border)}.lobby-divider:before{left:0}.lobby-divider:after{right:0}.join-form{display:flex;gap:var(--gap-sm)}.join-form input{flex:1;text-transform:uppercase;letter-spacing:.2em;text-align:center;font-size:1.2rem}.join-form .btn{width:auto;flex-shrink:0}.lobby-room{display:flex;flex-direction:column;gap:var(--gap-md);padding:var(--gap-md) var(--gap-lg);flex:1}.lobby-code-display{text-align:center;color:var(--color-text-dim)}.lobby-code-value{display:block;font-size:2.5rem;font-weight:700;color:var(--color-gold);letter-spacing:.3em;margin-top:.2rem}.lobby-players{display:flex;flex-direction:column;gap:var(--gap-sm)}.lobby-waiting{text-align:center;color:var(--color-text-dim);font-size:.9rem}#screen-game{display:none;grid-template-rows:auto 1fr auto;background:var(--color-bg)}#screen-game.screen-active{display:grid}.game-opponents{display:flex;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-md);overflow-x:auto;scrollbar-width:none;background:#0003;flex-shrink:0;min-height:52px}.game-opponents::-webkit-scrollbar{display:none}.opponent-chip{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:var(--gap-xs);background:var(--color-surface);border-radius:8px;padding:var(--gap-xs) var(--gap-sm) var(--gap-xs) var(--gap-xs);min-width:100px;flex-shrink:0;border:1px solid transparent;transition:border-color .2s}.opponent-chip.is-active{border-color:var(--color-gold)}.opponent-avatar{grid-row:1 / 3;font-size:1.4rem;display:flex;align-items:center;justify-content:center}.opponent-name{font-size:.72rem;color:var(--color-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}.opponent-level{font-size:.85rem;font-weight:700;color:var(--color-gold)}.game-table{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-md);padding:var(--gap-sm);overflow:hidden;position:relative}.game-decks{display:flex;gap:var(--gap-lg);align-items:center;justify-content:center}.deck-pile{display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs);cursor:pointer}.deck-back{width:var(--card-width);height:var(--card-height);background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--card-radius);display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:2px 2px 8px #0006}.deck-count{font-size:.75rem;color:var(--color-text-dim)}.active-card-area{display:flex;justify-content:center}.combat-area{display:flex;align-items:center;gap:var(--gap-lg);background:#0000004d;border-radius:12px;padding:var(--gap-sm) var(--gap-lg);border:1px solid var(--color-border)}.combat-side{display:flex;flex-direction:column;align-items:center;gap:2px}.combat-label{font-size:.7rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.combat-strength{font-size:1.6rem;font-weight:700}.combat-strength-player{color:var(--color-green)}.combat-strength-monster,.combat-strength-player.losing{color:var(--color-red)}.combat-strength-monster.winning{color:var(--color-green)}.combat-vs{color:var(--color-text-dim);font-size:.9rem}.combat-log{display:none;flex-direction:column;gap:2px;font-size:.78rem;color:var(--color-text-dim);max-height:60px;overflow-y:auto;width:100%;padding:0 var(--gap-sm)}.game-player{display:flex;flex-direction:column;background:#00000040;border-top:1px solid var(--color-border);max-height:45vh;overflow:hidden;flex-shrink:0}.player-status{display:flex;align-items:baseline;gap:var(--gap-md);padding:var(--gap-xs) var(--gap-md);background:#0003;flex-shrink:0}.player-name{font-weight:700;font-size:.9rem;color:var(--color-text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-stat{font-size:.85rem;color:var(--color-text-dim);white-space:nowrap}.player-stat strong{color:var(--color-gold)}.hand-cards{display:flex;gap:var(--gap-sm);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--gap-sm) var(--gap-md);flex-shrink:0}.hand-cards::-webkit-scrollbar{display:none}.action-bar{display:flex;gap:var(--gap-xs);padding:var(--gap-xs) var(--gap-md) var(--gap-sm);flex-shrink:0}.btn-action{flex:1;padding:.45rem .4rem;font-size:.78rem;min-height:44px;border-radius:6px;font-weight:600;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-align:center;line-height:1.2}.btn-action-primary{background:var(--color-primary);border-color:var(--color-primary)}.btn-action-danger{background:var(--color-red);border-color:var(--color-red)}.btn-action:disabled{opacity:.4;pointer-events:none}.card{width:var(--card-width);height:var(--card-height);border-radius:var(--card-radius);background:var(--color-bg-card);border:2px solid var(--color-common);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px;cursor:pointer;flex-shrink:0;scroll-snap-align:start;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.card:active{transform:scale(.95)}.card.card-selected{transform:translateY(-8px);box-shadow:0 8px 20px #8b5cf680}.card-emoji{font-size:2rem;line-height:1;flex:1;display:flex;align-items:center;justify-content:center}.card-name{font-size:.6rem;text-align:center;color:var(--color-text);line-height:1.2;max-height:2.6em;overflow:hidden}.card-level{font-size:.65rem;font-weight:700;color:var(--color-red);align-self:flex-start}.card-bonus{font-size:.65rem;font-weight:700;color:var(--color-green);align-self:flex-end}.card-quality-uncommon{border-color:var(--color-uncommon)}.card-quality-rare{border-color:var(--color-rare);box-shadow:0 0 8px #8b5cf666}.card-quality-epic{border-color:var(--color-epic);box-shadow:0 0 12px #f59e0b80}.card-type-monster{background:#2d1015;border-color:var(--color-red)}.card-type-curse{background:#1a0d2e;border-color:#9333ea}.card-type-race{background:#0d2318;border-color:var(--color-green)}.card-type-class{background:#1a1a0d;border-color:var(--color-gold)}.card-type-treasure{background:#1a1200;border-color:var(--color-gold)}.card-type-help{background:#0d1a2d;border-color:var(--color-uncommon)}.card-back{background:linear-gradient(135deg,#2d1b4e,#1a0a2e);border-color:var(--color-border);cursor:default}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009}.modal-content{position:relative;background:var(--color-surface);border-radius:16px 16px 0 0;padding:var(--gap-lg);width:100%;max-height:80vh;overflow-y:auto;z-index:1;display:flex;flex-direction:column;gap:var(--gap-md)}.modal-close{align-self:center;width:auto}.modal-rules-content{max-height:80vh}.rules-text{font-size:.9rem;color:var(--color-text-dim);line-height:1.6;flex:1;overflow-y:auto}.rules-text h4,#rules-content h4{color:var(--color-text);margin:1rem 0 .3rem;font-size:.95rem}#rules-content{font-size:.9rem;color:var(--color-text-dim);line-height:1.6}#rules-content p{margin-bottom:.4rem}.card-detail{display:flex;flex-direction:column;align-items:center;gap:var(--gap-md);text-align:center;padding:var(--gap-sm) 0}.card-detail-emoji{font-size:3.5rem;line-height:1}.card-detail-name{font-size:1.2rem;color:var(--color-text)}.card-detail-desc{font-size:.9rem;color:var(--color-text-dim);line-height:1.5}.card-detail-level{font-size:.85rem;color:var(--color-red);font-weight:600}.card-detail-bonus{font-size:1.4rem;font-weight:700;color:var(--color-green)}.card-detail-bad{font-size:.82rem;color:var(--color-secondary);background:#ec48991a;border-radius:6px;padding:var(--gap-xs) var(--gap-sm);width:100%}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%) translateY(20px);background:var(--color-surface-2);color:var(--color-text);padding:.6rem 1.2rem;border-radius:20px;font-size:.88rem;font-weight:500;white-space:nowrap;z-index:5000;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;border:1px solid var(--color-border)}.toast.toast-visible{opacity:1;transform:translate(-50%) translateY(0)}.phase-indicator{display:none;font-size:.75rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.08em;padding:2px var(--gap-sm)}.lobby-player-entry{display:flex;align-items:center;justify-content:space-between;background:var(--color-surface);border-radius:8px;padding:var(--gap-sm) var(--gap-md);font-size:.9rem}.lobby-player-entry .ready-badge{font-size:.75rem;color:var(--color-green);font-weight:600}.lobby-player-entry .waiting-badge{font-size:.75rem;color:var(--color-text-dim)}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none}.tutorial-spotlight{position:absolute;border-radius:8px;box-shadow:0 0 0 9999px #000000c2;transition:left .32s ease,top .32s ease,width .32s ease,height .32s ease;pointer-events:none}.tutorial-bubble{position:absolute;background:var(--color-surface);border:1px solid rgba(245,158,11,.5);border-radius:12px;padding:var(--gap-md);width:calc(100% - 2 * var(--gap-lg));max-width:340px;z-index:1;display:flex;flex-direction:column;gap:var(--gap-sm);pointer-events:all;box-shadow:0 8px 32px #0009;animation:tutorialBubbleIn .2s ease-out both}@keyframes tutorialBubbleIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}#tutorial-text{font-size:.88rem;line-height:1.55;color:var(--color-text)}.tutorial-step-dots{display:flex;gap:5px;justify-content:center}.tutorial-dot{width:6px;height:6px;border-radius:50%;background:#ffffff40;transition:background .2s}.tutorial-dot.active{background:var(--color-primary)}.tutorial-controls{display:flex;gap:var(--gap-sm)}.tutorial-controls .btn{flex:1}#screen-gameover{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#2d1b4e,var(--color-bg));padding:var(--gap-lg)}.gameover-content{display:flex;flex-direction:column;align-items:center;gap:var(--gap-lg);width:100%;max-width:320px}.gameover-icon{font-size:4rem}#gameover-title{font-size:2rem;text-align:center}.gameover-message{color:var(--color-text-dim);text-align:center;font-size:.95rem}@keyframes cardReveal{0%{transform:scale(.85) rotateY(90deg);opacity:0}to{transform:scale(1) rotateY(0);opacity:1}}@keyframes chipPulse{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 0 6px #f59e0b00}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeInUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-card-reveal{animation:cardReveal .3s ease-out}.animate-shake{animation:shake .4s ease-in-out}.opponent-chip.is-active{animation:chipPulse 1.5s infinite}.fade-in-up{animation:fadeInUp .25s ease-out}@media (min-width: 600px){:root{--card-width: 90px;--card-height: 135px}.combat-log{display:flex}.hand-cards{overflow-x:visible;scroll-snap-type:none;justify-content:center;padding:20px var(--gap-md) 8px;position:relative;min-height:160px}.hand-cards .card{scroll-snap-align:none}.hand-cards .card:nth-child(1){transform:rotate(-8deg) translateY(6px)}.hand-cards .card:nth-child(2){transform:rotate(-4deg) translateY(2px)}.hand-cards .card:nth-child(3){transform:rotate(0)}.hand-cards .card:nth-child(4){transform:rotate(4deg) translateY(2px)}.hand-cards .card:nth-child(5){transform:rotate(8deg) translateY(6px)}.hand-cards .card:nth-child(6){transform:rotate(10deg) translateY(10px)}.hand-cards .card:nth-child(7){transform:rotate(12deg) translateY(14px)}.hand-cards .card:nth-child(8){transform:rotate(14deg) translateY(18px)}.hand-cards .card:hover,.hand-cards .card:focus{transform:translateY(-12px) scale(1.05)!important;z-index:10}.menu-logo h1{font-size:3rem}.btn{font-size:1rem}}.player-equipment{display:flex;flex-wrap:wrap;gap:4px;padding:2px var(--gap-sm);min-height:0}.equip-chip{display:inline-flex;align-items:center;gap:3px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:10px;padding:2px 8px;font-size:.72rem;color:var(--color-green);white-space:nowrap}.action-waiting{flex:1;text-align:center;font-size:.82rem;color:var(--color-text-dim);font-style:italic;padding:var(--gap-sm);align-self:center}.card-detail-actions{display:flex;flex-direction:column;gap:var(--gap-sm);margin-top:var(--gap-md);padding-top:var(--gap-md);border-top:1px solid var(--color-border);width:100%}.card-detail-actions .btn{width:100%}.card-detail-meta{font-size:.85rem;color:var(--color-red);font-weight:600}.card-detail-restriction{font-size:.78rem;color:var(--color-text-dim)}.card-slot{position:absolute;top:3px;right:4px;font-size:.55rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.04em;line-height:1}.combat-strength.winning{color:var(--color-green)}.combat-strength.losing{color:var(--color-red)}.log-entry{font-size:.78rem;color:var(--color-text-dim);padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.3}.log-combatWin{color:var(--color-gold)}.log-combatLoss{color:var(--color-red)}.log-fled{color:var(--color-green)}.log-fleeFailed,.log-cursed,.log-badThings{color:var(--color-secondary)}@keyframes combatFlash{0%{opacity:0}20%{opacity:.45}to{opacity:0}}@keyframes screenFlash{0%{opacity:0}15%{opacity:.6}to{opacity:0}}@keyframes levelUpGlow{0%{box-shadow:0 0 #f59e0b00}35%{box-shadow:0 0 0 14px #f59e0ba6}70%{box-shadow:0 0 0 22px #f59e0b40}to{box-shadow:0 0 #f59e0b00}}.combat-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ef4444;pointer-events:none;z-index:9000;animation:combatFlash .45s ease-out forwards}.screen-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9000;animation:screenFlash .65s ease-out forwards}.animate-level-up-glow{animation:levelUpGlow .75s ease-out;border-radius:8px}.btn-audio-toggle{position:absolute;top:env(safe-area-inset-top,8px);right:8px;z-index:50;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:50%;width:34px;height:34px;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:background .15s;flex-shrink:0}.btn-audio-toggle:hover{background:#ffffff2e}#screen-game{position:relative}@media screen and (orientation: landscape) and (max-height: 600px){#app>.screen{display:none!important}#app:after{content:"Bitte drehe dein Gerät ins Hochformat · Please rotate your device to portrait mode";display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-bg);color:var(--color-text);font-size:1rem;text-align:center;padding:2rem;z-index:99999}}