:root{--bg-color: #1a472a;--panel-color: #2c3e50;--text-color: #ecf0f1;--accent-color: #27ae60;--secondary-color: #2980b9;--danger-color: #c0392b;--card-shadow: 0 4px 8px rgba(0,0,0,.3)}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:var(--bg-color);color:var(--text-color);overflow:hidden;height:100vh}#app{display:flex;flex-direction:column;height:100vh}.game-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap;gap:10px}.logo{font-size:1.5rem;font-weight:700}.logo span{font-size:.8rem;color:var(--accent-color);text-transform:uppercase}.stats{display:flex;gap:10px;font-weight:700;color:var(--accent-color);flex-wrap:wrap}.stat-item{background:#0000004d;padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.1);font-size:.9rem}.difficulty-badge{display:flex;align-items:center;gap:8px;transition:all .3s ease}.difficulty-badge:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background-color:currentColor;box-shadow:0 0 8px currentColor}.diff-level-1{background-color:#2ecc7126;color:#2ecc71;border:1px solid rgba(46,204,113,.3)!important}.diff-level-2{background-color:#f1c40f26;color:#f1c40f;border:1px solid rgba(241,196,15,.3)!important}.diff-level-3{background-color:#e67e2226;color:#e67e22;border:1px solid rgba(230,126,34,.3)!important}.diff-level-4{background-color:#e74c3c26;color:#e74c3c;border:1px solid rgba(231,76,60,.3)!important}.diff-level-5{background-color:#9b59b633;color:#9b59b6;border:1px solid rgba(155,89,182,.4)!important;font-weight:900}.game-over-msg{background-color:var(--danger-color)!important;color:#fff;font-weight:700;animation:flash 1s infinite}@keyframes flash{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.new-game-container{display:flex;align-items:center;gap:8px}.new-game-text{font-size:.75rem;font-weight:700;color:#fff9;text-transform:uppercase}.new-game-group{display:flex;background:#0006;padding:2px 6px;border-radius:30px;border:1px solid rgba(255,255,255,.1);align-items:center}.btn-icon-game{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:4px;filter:grayscale(.8) opacity(.5);transition:all .2s}.btn-icon-game:hover,.btn-icon-game.active{filter:grayscale(0) opacity(1);transform:scale(1.1) rotate(10deg)}.difficulty-picker{display:flex;gap:4px;margin-left:8px;padding-left:8px;border-left:1px solid rgba(255,255,255,.1)}.btn-diff{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:3px;filter:grayscale(.8) opacity(.5);transition:all .2s}.btn-diff:hover,.btn-diff.active{filter:grayscale(0) opacity(1);transform:scale(1.2)}.toggle-container{display:flex;align-items:center;gap:8px;background:#0000004d;padding:4px 8px;border-radius:20px}.toggle-label{font-size:.6rem;text-transform:uppercase;color:#ffffffb3}.switch{position:relative;display:inline-block;width:30px;height:18px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#444;transition:.4s}.slider:before{position:absolute;content:"";height:12px;width:12px;left:3px;bottom:3px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--accent-color)}input:checked+.slider:before{transform:translate(12px)}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.btn{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .2s ease;color:#fff;font-size:.85rem}.btn-primary{background-color:var(--accent-color)}.btn-primary:hover{background-color:#2ecc71;transform:translateY(-1px)}.btn-secondary{background-color:var(--secondary-color)}.btn-secondary:hover{background-color:#3498db}.btn-icon{background:none;font-size:1.1rem;border:none;color:#fff;cursor:pointer}.btn-icon:hover{transform:rotate(45deg)}.btn-full{width:100%;margin-top:10px}.game-board{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px;gap:10px;overflow-y:auto}.top-row{display:flex;justify-content:center;gap:10px;width:100%;flex-wrap:nowrap}.canvas-container{display:flex;flex-direction:column;align-items:center;background:#0003;border-radius:8px;padding:5px;flex:1;min-width:0}.label{font-size:.6rem;text-transform:uppercase;color:#ffffff80;margin-bottom:2px}canvas{max-width:100%;height:auto;filter:drop-shadow(var(--card-shadow));cursor:pointer;touch-action:none}.tableau{width:100%;display:flex;justify-content:center;margin-top:5px}.drawer{position:fixed;right:0;top:0;bottom:0;width:350px;background:var(--panel-color);box-shadow:-5px 0 15px #00000080;transition:transform .3s ease;z-index:100;display:flex;flex-direction:column}.drawer.hidden{transform:translate(100%)}@media (max-width: 768px){.game-header{padding:5px 10px}.logo{font-size:1.1rem}.stats{width:100%;justify-content:space-between;order:3}.actions{width:100%;justify-content:space-between;order:2}.new-game-container{flex:1}.new-game-text{display:none}.drawer{width:100%}.game-board{padding:5px}.top-row{gap:5px}.toggle-container{padding:4px 6px}.toggle-label{font-size:.55rem}.replay-overlay{padding:15px 25px;bottom:20px;width:85%;gap:5px}.replay-overlay .title{font-size:1.2rem;letter-spacing:2px}.replay-overlay .subtitle{font-size:.75rem}}@media (max-width: 480px){.stats{gap:5px}.stat-item{padding:3px 8px;font-size:.8rem}.difficulty-badge span:first-child{display:none}}.drawer-header{padding:20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.drawer-content{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}.btn-close{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer}.form-group{display:flex;flex-direction:column;gap:5px}.picker-container{display:flex;flex-direction:column;gap:10px;background:#0003;padding:10px;border-radius:8px}.picker-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.badge{min-width:32px;height:32px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#fff;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.badge:hover{background:#ffffff26}.badge.active{background:var(--accent-color);box-shadow:0 0 10px var(--accent-color);border-color:#fff}.badge.text-badge{padding:0 10px;font-size:.7rem;text-transform:uppercase}.badge[data-col=C],.badge[data-col=K],.badge[data-col=R]{color:#e74c3c}.badge[data-col=C].active,.badge[data-col=K].active,.badge[data-col=R].active{background:#e74c3c;box-shadow:0 0 10px #e74c3c;color:#fff}.saved-games-list{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;background:#0003;padding:10px;border-radius:8px}.save-item{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;padding:8px 12px;border-radius:4px;font-size:.85rem;cursor:pointer;transition:background .2s}.save-item:hover{background:#ffffff1a}.save-item .delete-save{color:var(--danger-color);font-weight:700;padding:5px;cursor:pointer}input,textarea{padding:10px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff}textarea{resize:none}.game-footer{text-align:center;padding:10px;font-size:.8rem;color:#ffffff4d;background:#0003}.particle{position:absolute;width:18px;height:18px;border-radius:50%;pointer-events:none;z-index:2000}.replay-overlay{position:fixed;bottom:40px;left:50%;transform:translate(-50%);background:#000000d9;padding:32px 48px;border-radius:16px;text-align:center;box-shadow:0 0 40px #27ae6066;z-index:3000;pointer-events:none;display:flex;flex-direction:column;gap:12px}.replay-overlay .title{font-size:2.4rem;font-weight:900;color:var(--accent-color);text-transform:uppercase;letter-spacing:4px}.replay-overlay .subtitle{font-size:1rem;color:#fff;opacity:.8}.flying-card{position:absolute;z-index:1000;pointer-events:none;transition:all .3s cubic-bezier(.25,.46,.45,.94);background:#fff;border-radius:8px;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;padding:8px;border:1px solid rgba(0,0,0,.2);width:110px;height:150px;font-family:Segoe UI,Arial}.flying-card .card-value{font-size:25px;font-weight:700;color:inherit}.flying-card .card-icon{font-size:80px;position:absolute;top:50%;left:50%;transform:translate(-50%,-40%);opacity:.1;color:inherit}.hidden{display:none!important}