2 lines
14 KiB
CSS
2 lines
14 KiB
CSS
@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600&display=swap";:root{--bg-dark: #0d0f14;--bg-card: #1a1d26;--bg-surface: #14161e;--bg-hover: #1f2233;--text-primary: #e8e6e3;--text-secondary: #9a9a9a;--text-muted: #666;--accent-gold: #d4a843;--accent-glow: #f0d060;--border: #2a2d3a;--danger: #cc4422;--success: #44aa55;--radiance: #f0d060;--tide: #4499dd;--shadow: #8a6098;--flame: #ee5533;--growth: #55aa44}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow:hidden}.app{width:100vw;height:100vh;display:flex;flex-direction:column}.title-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at center,#1a1530 0%,var(--bg-dark) 70%)}.game-title{font-family:Cinzel,serif;font-size:4.5rem;font-weight:700;background:linear-gradient(135deg,var(--accent-gold),#fff8e0,var(--accent-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;letter-spacing:4px;margin-bottom:8px}.game-subtitle{font-size:1.1rem;color:var(--text-secondary);margin-bottom:48px;letter-spacing:2px}.name-form{display:flex;flex-direction:column;align-items:center;gap:16px}.name-input{width:320px;padding:14px 20px;font-size:1.1rem;border:2px solid var(--border);border-radius:8px;background:var(--bg-surface);color:var(--text-primary);outline:none;transition:border-color .2s;text-align:center;font-family:Inter,sans-serif}.name-input:focus{border-color:var(--accent-gold)}.btn{padding:10px 24px;font-size:.95rem;font-weight:600;border:2px solid var(--border);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all .15s;font-family:Inter,sans-serif}.btn:hover{background:var(--bg-hover);border-color:var(--accent-gold)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#3a3020,#2a2518);border-color:var(--accent-gold);color:var(--accent-glow)}.btn-primary:hover{background:linear-gradient(135deg,#4a4030,#3a3020)}.btn-small{padding:6px 14px;font-size:.8rem}.btn-back{border:none;background:none;color:var(--text-secondary);padding:8px 12px}.btn-back:hover{color:var(--text-primary);background:none}.btn-join{padding:8px 20px;font-size:.85rem}.btn-pass{background:linear-gradient(135deg,#1a2a1a,#152015);border-color:var(--success);color:#8d8}.btn-target{background:linear-gradient(135deg,#2a1a1a,#201515);border-color:var(--danger);color:#e88;animation:pulse-border 1s infinite}@keyframes pulse-border{0%,to{box-shadow:0 0 #c426}50%{box-shadow:0 0 0 4px #cc44221a}}.btn-start{width:100%;padding:16px;font-size:1.1rem;margin-top:24px}.lobby{height:100vh;display:flex;flex-direction:column;overflow-y:auto}.lobby-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg-surface)}.game-title-small{font-family:Cinzel,serif;font-size:1.5rem;color:var(--accent-gold)}.player-badge{color:var(--text-secondary);font-size:.9rem}.lobby-content{flex:1;max-width:700px;margin:0 auto;padding:32px 24px;width:100%}.create-room{margin-bottom:40px}.create-room h3,.room-list h3{font-family:Cinzel,serif;font-size:1.2rem;color:var(--accent-gold);margin-bottom:16px}.create-room-form{display:flex;gap:12px}.room-input{flex:1;padding:12px 16px;border:2px solid var(--border);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);font-size:.95rem;outline:none;font-family:Inter,sans-serif}.room-input:focus{border-color:var(--accent-gold)}.room-item{display:flex;justify-content:space-between;align-items:center;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--bg-surface);margin-bottom:8px;transition:border-color .2s}.room-item:hover{border-color:var(--accent-gold)}.room-info{display:flex;flex-direction:column;gap:4px}.room-name{font-weight:600}.room-meta{font-size:.85rem;color:var(--text-secondary)}.no-rooms{padding:40px;text-align:center;color:var(--text-muted);border:1px dashed var(--border);border-radius:8px}.room-view{max-width:800px;margin:0 auto;padding:32px 24px}.room-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}.room-header h2{font-family:Cinzel,serif;color:var(--accent-gold)}.room-players{margin-bottom:32px}.room-players h3{font-family:Cinzel,serif;color:var(--accent-gold);margin-bottom:12px}.room-player{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid var(--border);border-radius:6px;margin-bottom:8px;background:var(--bg-surface)}.room-player.ready{border-color:var(--success)}.room-player.waiting{color:var(--text-muted);border-style:dashed;justify-content:center}.player-status{font-size:.85rem;color:var(--text-secondary)}.deck-selection h3{font-family:Cinzel,serif;color:var(--accent-gold);margin-bottom:16px}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.deck-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;border:2px solid var(--border);border-radius:10px;background:var(--bg-surface);cursor:pointer;transition:all .2s;text-align:center}.deck-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}.deck-card.selected{border-color:var(--accent-gold);box-shadow:0 0 20px #d4a8434d}.deck-card.color-radiance:hover,.deck-card.color-radiance.selected{border-color:var(--radiance);box-shadow:0 0 20px #f0d06033}.deck-card.color-tide:hover,.deck-card.color-tide.selected{border-color:var(--tide);box-shadow:0 0 20px #49d3}.deck-card.color-shadow:hover,.deck-card.color-shadow.selected{border-color:var(--shadow);box-shadow:0 0 20px #8a609833}.deck-card.color-flame:hover,.deck-card.color-flame.selected{border-color:var(--flame);box-shadow:0 0 20px #e533}.deck-card.color-growth:hover,.deck-card.color-growth.selected{border-color:var(--growth);box-shadow:0 0 20px #5a43}.deck-symbol{font-size:2.5rem}.deck-name{font-family:Cinzel,serif;font-weight:600;font-size:1rem;color:var(--text-primary)}.deck-desc{font-size:.8rem;color:var(--text-secondary)}.game-board{display:flex;flex-direction:column;height:100vh;background:radial-gradient(ellipse at center,#111520 0%,var(--bg-dark) 100%)}.game-top-bar{display:flex;align-items:center;gap:12px;padding:6px 12px;background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:10}.phase-tracker{display:flex;gap:2px;flex:1;justify-content:center;flex-wrap:wrap}.phase-pip{padding:3px 8px;font-size:.7rem;border-radius:3px;color:var(--text-muted);background:transparent;transition:all .2s}.phase-pip.active{background:var(--accent-gold);color:#000;font-weight:700}.phase-pip.active.my-turn{background:var(--success)}.turn-info{font-size:.8rem;color:var(--text-secondary);white-space:nowrap}.opponent-area,.my-area{flex:1;display:flex;flex-direction:column;min-height:0;padding:4px 12px}.opponent-area{border-bottom:1px solid rgba(255,255,255,.05)}.player-info{display:flex;align-items:center;gap:16px;padding:6px 12px;font-size:.85rem;flex-shrink:0}.life-total{font-size:1.2rem;font-weight:700;color:#e55}.hand-count,.library-count{color:var(--text-secondary);font-size:.8rem}.mana-pool{display:flex;gap:8px;margin-left:auto}.mana{font-size:.85rem;font-weight:600;padding:2px 6px;border-radius:4px;background:#ffffff14}.mana-radiance{color:var(--radiance)}.mana-tide{color:var(--tide)}.mana-shadow{color:var(--shadow)}.mana-flame{color:var(--flame)}.mana-growth{color:var(--growth)}.mana-colorless{color:var(--text-secondary)}.battlefield{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0;overflow-x:auto}.battlefield.opponent{flex-direction:column-reverse}.bf-row{display:flex;gap:6px;align-items:center;min-height:36px;flex-wrap:wrap}.bf-creatures{flex:1;justify-content:center;align-content:center}.bf-lands,.bf-others{justify-content:center}.bf-empty{color:var(--text-muted);font-size:.8rem;font-style:italic}.bf-creature-slot{position:relative}.bf-creature-slot.attacking .card{transform:translateY(-8px);box-shadow:0 0 12px #ee553380}.bf-creature-slot.blocking .card{box-shadow:0 0 12px #4499dd80}.combat-badge{position:absolute;top:-4px;right:-4px;padding:2px 6px;border-radius:4px;font-size:.6rem;font-weight:700;z-index:5}.attack-badge{background:var(--flame);color:#fff}.block-badge{background:var(--tide);color:#fff}.combat-zone{flex-shrink:0;min-height:0}.combat-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;background:#d4a84314;border-top:1px solid rgba(212,168,67,.2);border-bottom:1px solid rgba(212,168,67,.2);font-size:.85rem}.hand-area{flex-shrink:0;background:#0000004d;border-top:1px solid var(--border);padding:6px 12px 8px;display:flex;align-items:center;gap:8px}.hand{display:flex;gap:4px;overflow-x:auto;flex:1;padding:4px 0}.hand-slot,.hand-actions{flex-shrink:0}.card{width:130px;min-height:180px;border:2px solid var(--card-border, var(--border));border-radius:8px;background:var(--card-bg, var(--bg-card));display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:all .15s;position:relative;font-size:.75rem}.card:hover{transform:translateY(-4px);box-shadow:0 6px 20px #0006;z-index:10}.card.card-small{width:100px;min-height:130px;font-size:.65rem}.card.tapped{transform:rotate(90deg);margin:10px 15px}.card.tapped:hover{transform:rotate(90deg) translateY(-4px)}.card.selected{box-shadow:0 0 0 3px var(--accent-gold),0 0 20px #d4a84366;transform:translateY(-8px)}.card.selectable{cursor:pointer}.card.selectable:hover{box-shadow:0 0 0 2px var(--accent-gold)}.card.summoning-sick{opacity:.75}.card-facedown{width:100px;min-height:130px;border:2px solid var(--border);border-radius:8px;background:linear-gradient(135deg,#1a1530,#2a1a40);display:flex;align-items:center;justify-content:center}.card-back{font-family:Cinzel,serif;font-size:.7rem;color:var(--accent-gold);text-align:center;transform:rotate(-30deg);opacity:.6}.card-header{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 8px 4px;gap:4px}.card-name{font-weight:700;font-size:.7em;line-height:1.2;flex:1}.card-cost{font-size:.75em;white-space:nowrap;flex-shrink:0}.card-art{display:flex;align-items:center;justify-content:center;padding:0;flex:1;background:#00000026;min-height:40px;overflow:hidden}.card-type-line{padding:3px 8px;font-size:.6em;color:inherit;opacity:.7;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15)}.card-text{padding:4px 8px;flex:0;font-size:.6em;line-height:1.3}.card-keywords{font-weight:700;font-style:italic;margin-bottom:2px}.card-flavor{font-style:italic;opacity:.6;margin-top:2px;font-size:.9em}.card-pt{padding:4px 8px;text-align:right;font-weight:700;font-size:.9em}.card-pt .damaged{color:var(--danger)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-surface);border:2px solid var(--accent-gold);border-radius:12px;padding:32px;max-width:400px;text-align:center}.modal h3{font-family:Cinzel,serif;color:var(--accent-gold);margin-bottom:20px}.x-picker{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px}.x-picker button{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:1.2rem;cursor:pointer}.x-value{font-size:2rem;font-weight:700;color:var(--accent-gold);min-width:40px}.modal-actions{display:flex;gap:12px;justify-content:center}.mana-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mana-choice-btn{padding:12px 16px!important;font-size:1rem!important}.mana-choice-btn.color-radiance{border-color:var(--radiance)!important;color:var(--radiance)!important}.mana-choice-btn.color-tide{border-color:var(--tide)!important;color:var(--tide)!important}.mana-choice-btn.color-shadow{border-color:var(--shadow)!important;color:var(--shadow)!important}.mana-choice-btn.color-flame{border-color:var(--flame)!important;color:var(--flame)!important}.mana-choice-btn.color-growth{border-color:var(--growth)!important;color:var(--growth)!important}.mana-choice-btn.color-colorless{border-color:var(--text-secondary)!important}.target-banner{position:fixed;top:50px;left:50%;transform:translate(-50%);background:#cc4422e6;color:#fff;padding:10px 20px;border-radius:8px;display:flex;align-items:center;gap:12px;font-weight:600;z-index:50;animation:slide-down .2s ease-out}@keyframes slide-down{0%{transform:translate(-50%) translateY(-20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.game-log-panel{position:fixed;right:0;top:0;bottom:0;width:320px;background:var(--bg-surface);border-left:1px solid var(--border);z-index:50;display:flex;flex-direction:column}.log-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}.log-header h3{font-family:Cinzel,serif;color:var(--accent-gold)}.log-entries{flex:1;overflow-y:auto;padding:8px}.log-entry{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.03);font-size:.8rem;display:flex;gap:8px}.log-turn{color:var(--accent-gold);font-weight:600;flex-shrink:0}.log-msg{color:var(--text-secondary)}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:200}.game-over-modal{text-align:center;padding:48px}.game-over-modal h1{font-family:Cinzel,serif;font-size:3rem;background:linear-gradient(135deg,var(--accent-gold),#fff8e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.game-over-modal p{color:var(--text-secondary);margin-bottom:32px;font-size:1.1rem}.error-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#cc4422f2;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;z-index:300;animation:toast-in .2s ease-out}@keyframes toast-in{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.card.color-radiance{border-color:var(--radiance)}.card.color-tide{border-color:var(--tide)}.card.color-shadow{border-color:var(--shadow);background:#1a1520;color:#ddd}.card.color-flame{border-color:var(--flame)}.card.color-growth{border-color:var(--growth)}.card.color-colorless{border-color:#888}
|