*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body,html{width:100%;height:100dvh;background-color:#050510;overflow:hidden;font-family:Arial,sans-serif}#app{position:relative;width:100vw;height:100dvh;display:flex;justify-content:center;align-items:center;background-image:url(/games/magic/assets/background.png);background-size:cover;background-position:center}#game-canvas-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#game-canvas-container canvas{max-width:100%;max-height:100%;object-fit:contain}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}button,.panel-rect,.modal{pointer-events:auto}#message-box{margin-top:10vh;text-align:center;font-size:clamp(2rem,5vw,4rem);font-weight:900;color:gold;text-shadow:0 0 10px #ff8c00,0 0 20px #ff0000;transition:opacity .3s,transform .3s}#message-box.hidden{opacity:0;transform:scale(.8);pointer-events:none}#message-box.error{color:#f33;text-shadow:0 0 10px #aa0000}#controls-bar{width:100%;max-width:950px;margin:auto auto 20px;border-radius:20px;padding:15px 20px;background:#0a0f1e66;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;gap:15px}.control-row{display:flex;justify-content:space-between;align-items:center;width:100%}#display-balance{flex-grow:1;display:flex;justify-content:space-between;align-items:center;margin:0 15px;background:#0000004d;font-size:clamp(1rem,2vw,1.4rem);letter-spacing:1px}#val-balance{color:gold;font-weight:900}button{border:none;outline:none;cursor:pointer;transition:transform .1s}button:active{transform:scale(.95)}.btn-circle{width:50px;height:50px;border-radius:50%;background:#222;border:2px solid #00ffcc;color:#0fc;font-size:24px;font-style:italic;font-weight:700}.btn-rect,.panel-rect{padding:15px 25px;border-radius:10px;font-size:clamp(1rem,2vw,1.2rem);font-weight:700;white-space:nowrap}.btn-rect{background:#333;border:2px solid #ffd700;color:gold}.panel-rect{background:#111;border:2px solid #00ffcc;color:#fff}.btn-text{background:none;color:#aaa;font-size:1.2rem;font-weight:900;padding:10px}.btn-text.active{color:#0fc;text-shadow:0 0 5px #00ffcc}.spin-btn{background:#6a0dad;border:4px solid #ffd700;color:#fff;font-size:1.5rem;box-shadow:0 0 15px #6a0dadcc;padding:15px 40px}.spin-btn.free-spin-mode{background:linear-gradient(45deg,#ff007f,#f0f);border-color:#0ff;box-shadow:0 0 20px #f0f;color:#fff;font-size:1.2rem;animation:pulse-free-spin .6s alternate infinite;pointer-events:none}@keyframes pulse-free-spin{0%{transform:scale(1)}to{transform:scale(1.05)}}.auto-btn{background:#222;border:2px solid #555;color:#888;transition:all .3s ease}.auto-btn.active{background:#032;border:2px solid #00ffcc;color:#0fc;box-shadow:0 0 10px #0fc}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:100}.modal.hidden{display:none}.paytable-box{background:#1e2532;border:2px solid #3a4b66;border-radius:16px;width:90%;max-width:750px;padding:25px 30px;position:relative;box-shadow:0 10px 30px #000c}.btn-close{position:absolute;right:20px;top:20px;background:none;border:none;color:gold;font-size:24px;font-weight:700;cursor:pointer;transition:transform .2s}.btn-close:hover{transform:scale(1.2)}.paytable-title{text-align:center;color:gold;font-size:28px;font-weight:900;margin-bottom:25px;letter-spacing:2px}.paytable-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:20px}.pt-card{background:#11151c;border:1px solid #2a3649;border-radius:12px;padding:15px;width:140px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 6px #00000080}.pt-payouts{width:100%;font-size:14px;margin-top:15px}.pt-payouts div{display:flex;justify-content:center;margin-bottom:6px;color:#ccc;font-weight:700}.pt-payouts span{color:gold}.paytable-footer{background:#2a3649;border-radius:10px;padding:15px 20px;display:flex;flex-direction:column;gap:12px}.pt-special{display:flex;align-items:center;gap:15px}.special-icon{transform:scale(.6);margin:-15px 0}.special-text{color:#eee;font-size:14px;line-height:1.5}.special-text strong{color:gold;font-size:16px}.sym-icon{width:80px;height:80px;background-image:url(/games/magic/assets/symbols.png);background-size:500% 200%;background-repeat:no-repeat;filter:drop-shadow(0 5px 5px rgba(0,0,0,.8))}.sym-0{background-position:0% 0%}.sym-1{background-position:25% 0%}.sym-2{background-position:50% 0%}.sym-3{background-position:75% 0%}.sym-4{background-position:100% 0%}.sym-5{background-position:0% 100%}.sym-6{background-position:25% 100%}.sym-7{background-position:50% 100%}.sym-8{background-position:75% 100%}.sym-9{background-position:100% 100%}@media(max-width:600px){.pt-card{width:46%;padding:10px}.sym-icon{width:60px;height:60px}.paytable-box{padding:15px;width:95%;max-height:90vh;overflow-y:auto}}@media(orientation:landscape)and (max-height:600px){.paytable-box{max-height:90vh;overflow-y:auto;padding:15px 20px}.pt-card{width:120px;padding:10px}.sym-icon{width:50px;height:50px}.paytable-grid{gap:8px}}@media(max-aspect-ratio:1/1){#game-canvas-container{padding-bottom:20vh}}@media(max-width:600px)and (orientation:portrait){#controls-bar{max-width:100%;margin-bottom:0;border-radius:20px 20px 0 0;padding:10px 15px;gap:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.btn-rect,.panel-rect{padding:12px 10px;font-size:.85rem}.spin-btn{padding:12px 20px;font-size:1.1rem}#display-balance{margin:0 10px;font-size:.95rem}#game-canvas-container{padding-bottom:22vh}}@media(orientation:landscape)and (max-height:600px){#controls-bar{max-width:850px;margin-bottom:env(safe-area-inset-bottom);padding:5px calc(15px + env(safe-area-inset-right)) 5px calc(15px + env(safe-area-inset-left));border-radius:15px;display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:10px}.control-row{display:contents}#btn-info{order:1}#btn-bgm{order:2}#display-balance{order:3;margin:0 10px;font-size:.85rem}#btn-bet{order:4}#btn-auto{order:5}#btn-spin{order:6}.btn-circle{width:35px;height:35px;font-size:16px;border-width:2px}.btn-rect,.panel-rect{padding:4px 10px;font-size:.8rem;border-width:2px;border-radius:6px}.spin-btn{padding:4px 20px;font-size:1rem;border-width:2px}#message-box{margin-top:5vh;font-size:clamp(1.5rem,4vw,3rem)}#game-canvas-container{padding-bottom:45px}}#display-balance.win-state{background:linear-gradient(45deg,indigo,#8a2be2)!important;border-color:gold!important;box-shadow:0 0 20px gold!important;animation:pulse-win .5s alternate infinite ease-in-out!important;z-index:10!important}#display-balance.win-state #lbl-balance{color:gold!important;font-weight:900!important;text-shadow:0 0 8px #ffd700!important}#display-balance.win-state #val-balance{color:#fff!important;text-shadow:0 0 10px #ffffff!important;font-size:1.2em!important}@keyframes pulse-win{0%{transform:scale(1)}to{transform:scale(1.08)}}#start-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#1a0b2e,#050510);z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;transition:opacity .5s ease}#start-overlay.hidden{opacity:0;pointer-events:none}.game-title{color:gold;font-size:clamp(3rem,8vw,5rem);font-weight:900;text-shadow:0 0 20px #ff00ff,0 0 40px #6a0dad;letter-spacing:5px;margin-bottom:20px}.start-hint{color:#aaa;font-size:1.2rem;letter-spacing:2px}#top-win-message{position:absolute;top:8vh;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50;text-align:center;pointer-events:none;animation:drop-down-bounce .5s cubic-bezier(.175,.885,.32,1.275) forwards}#top-win-message.hidden{display:none}#twm-amount{color:gold;font-size:clamp(2.5rem,6vw,4rem);font-weight:900;letter-spacing:2px;text-shadow:0 5px 10px rgba(0,0,0,.8),0 0 20px #ffaa00}#twm-lines{color:#fff;font-size:clamp(1rem,3vw,1.5rem);font-weight:700;background:#0009;padding:5px 20px;border-radius:25px;border:2px solid #00ffcc;box-shadow:0 0 10px #0fc}@keyframes drop-down-bounce{0%{top:-10vh;opacity:0;transform:translate(-50%,-20px) scale(.8)}to{top:8vh;opacity:1;transform:translate(-50%) scale(1)}}@media(orientation:landscape)and (max-height:600px){#top-win-message{display:none!important}}