:root { --bg-grad-start: #1a1d3a; --bg-grad-end: #2d4a7c; --btn-grad-start: #667eea; --btn-grad-end: #764ba2; --title-color: #00d4ff; --shop-title-color: #ffd700; --settings-title-color: #a7f5ff; --glass-bg: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.2); --shadow-color: rgba(0, 0, 0, 0.3); } body { background: linear-gradient(135deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 50%, #4c1d95 100%); background-attachment: fixed; min-height: 100vh; font-family: 'Inter', 'Montserrat', Arial, sans-serif; margin: 0; color: #eee; overflow-x: hidden; } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%); pointer-events: none; z-index: -1; } /* Theme definitions - applied to now */ .theme-default { --bg-grad-start: #22283e; --bg-grad-end: #4d7d85; --btn-grad-start: #6491ff; --btn-grad-end: #36c2d0; --title-color: #66e3fd; } .theme-green-blue { --bg-grad-start: #1e4d3b; --bg-grad-end: #2a5b7e; --btn-grad-start: #50c878; --btn-grad-end: #4682b4; --title-color: #7fffd4; } .theme-green-yellow { --bg-grad-start: #2e5c36; --bg-grad-end: #6d662c; --btn-grad-start: #7cfc00; --btn-grad-end: #fdda0d; --title-color: #d2ff78; } .theme-yellow-red { --bg-grad-start: #7d6e2e; --bg-grad-end: #7c2e2e; --btn-grad-start: #ffc40c; --btn-grad-end: #ff5252; --title-color: #ffd875; } .theme-red-purple { --bg-grad-start: #6e2e4b; --bg-grad-end: #4c306d; --btn-grad-start: #ff5a5f; --btn-grad-end: #a46de5; --title-color: #ff99cc; } .theme-options { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .theme-btn { padding: 10px 15px; border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.2s; border: 2px solid var(--btn-grad-start); background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); } .theme-btn.selected { border-color: #fff; box-shadow: 0 0 8px #fff; } /* Celestial realm styles: applied via .celestial-realm on #app to tint UI and provide unique button styles */ .celestial-realm { --bg-grad-start: #1a1330; --bg-grad-end: #3b2a66; --btn-grad-start: #e6a5c3; --btn-grad-end: #836e95; --title-color: #ffd8ff; } .celestial-realm #app { background: linear-gradient(135deg, rgba(36,16,58,0.88) 0%, rgba(60,32,92,0.88) 60%, rgba(40,20,70,0.95) 100%); border-color: rgba(180,160,220,0.09); box-shadow: 0 10px 40px rgba(50,20,80,0.45); } .celestial-realm h1 { background: linear-gradient(135deg, #f6d7ff 0%, #e6a5c3 40%, #836e95 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 6px 28px rgba(140,80,150,0.18); } #app { max-width: 430px; margin: 36px auto; background: rgba(30, 40, 60, 0.85); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); padding: 32px 18px 28px 18px; border-radius: 24px; box-shadow: 0 8px 32px var(--shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.05); } h1 { /* Main title style */ text-align: center; margin-bottom: 14px; letter-spacing: 3px; font-size: 2.8em; font-weight: 800; background: linear-gradient(135deg, #00d4ff 0%, #667eea 50%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(0, 212, 255, 0.3); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } .menu-btn, .guide-btn { width: 100%; display: block; margin: 12px 0; padding: 18px 0; font-size: 1.2em; font-weight: 700; background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .menu-btn::before, .guide-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s; } .menu-btn:hover::before, .guide-btn:hover::before { left: 100%; } .menu-btn:hover, .guide-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .menu-btn:active, .guide-btn:active { /* No transform scaling */ } .menu-btn[disabled], .menu-btn.locked { background: #32446b77; color: #bbb; cursor: not-allowed; } .menu { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0 0; } .menu #live-match-btn { margin-top: 0; } .title-sep { border-bottom: 3px solid rgba(102, 126, 234, 0.6); width: 60%; margin: 0 auto 22px auto; box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); } #swirling-runes-container { position: relative; width: 140px; height: 140px; margin: 0 auto; animation: rotate-container 60s linear infinite; display: flex; justify-content: center; align-items: center; } @keyframes rotate-container { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #searching-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(12, 21, 35, 0.9); backdrop-filter: blur(10px); z-index: 20; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #aefdff; font-size: 1.2em; text-align: center; padding: 20px; } #searching-box { padding: 40px; background: rgba(30, 43, 68, 0.5); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .swirling-rune { position: absolute; top: 50%; left: 50%; font-size: 1.5em; transform-origin: center; animation: swirl 12s ease-in-out infinite alternate; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-60px) rotate(calc(-1 * var(--angle))); } @keyframes swirl { from { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-60px) rotate(calc(-1 * var(--angle))) scale(1); } to { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-65px) rotate(calc(-1 * var(--angle))) scale(1.1); } } #searching-status-container { background: rgba(23, 43, 54, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 25px 20px; border-radius: 24px; max-width: 380px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } #searching-title { font-size: 1.6em; font-weight: 700; color: #89f7fe; margin: 0; letter-spacing: 1px; } #searching-player-list-container { width: 100%; margin-top: 10px; } #searching-player-list-container h4 { color: #a3f3ff; margin: 0 0 10px 0; font-size: 1em; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.8; } #searching-player-list { display: flex; flex-direction: column; gap: 8px; max-height: 150px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 12px; } .searching-player-card { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; width: 100%; } .searching-player-card img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(137, 247, 254, 0.5); } .searching-player-card span { color: #e0fcff; font-weight: 500; } .no-players-text { color: #8aa9b3; font-style: italic; font-size: 0.9em; padding: 10px; } .searching-buttons { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; width: 100%; } .searching-buttons .menu-btn, .searching-buttons .guide-btn { width: 100%; margin: 0; padding: 15px 0; } .searching-buttons #request-duel-btn { background: linear-gradient(90deg, #ffc40c, #ff8c42); } .searching-buttons #cancel-search-btn { width: auto; padding: 10px 20px; font-size: 1.05em; } #searching-text, #opponent-found-text { letter-spacing: 1px; font-weight: 600; font-size: 1em; color: #c1faff; } #opponent-found-text { color: #7affc1; font-weight: bold; } /* Guidebook styles */ #guide-modal-bg { display: none; position: fixed; backdrop-filter: blur(8px); left: 0; top: 0; right: 0; bottom: 0; background: rgba(12, 21, 35, 0.8); align-items: center; justify-content: center; z-index: 10; } #guide-modal-bg.open { display: flex; } #guide-modal { background: rgba(30, 43, 51, 0.95); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 28px 28px; max-width: 390px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); color: #eee; font-size: 1.06em; position: relative; max-height: 80vh; overflow-y: auto; animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); min-width: 280px; } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } #guide-modal h2 { margin-top: 0; text-align: center; letter-spacing: 2px; font-size: 1.8em; font-weight: 800; background: linear-gradient(135deg, #55e6ff 0%, #667eea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #guide-modal table { width: 100%; margin-top: 8px; border-collapse: collapse; } #guide-modal th, #guide-modal td { padding: 6px 7px; text-align: center; border-bottom: 1px solid #2a394b77; } #guide-modal th { color: #c7f3ff; background: #20436833; font-weight: 700; } #guide-modal tr:last-child td { border-bottom: none; } .spell-name { font-weight: bold; color: #78f6dc; } .rune-span { display: inline-block; min-width: 68px; border-radius: 12px; font-size: 1.1em; margin: 0 3px; font-weight: 700; letter-spacing: 0.8px; color: #fff; padding: 4px 12px; background: linear-gradient(135deg, #4d9ef7 60%, #479ad5 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(77, 158, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.2s ease; } .rune-span:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(77, 158, 247, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .rune-span:active { filter: brightness(1.2); } .rune-fire { background: linear-gradient(135deg, #ff4927 0%, #ff8c42 100%); color: #2a1810; box-shadow: 0 4px 16px rgba(255, 217, 58, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 217, 58, 0.3); } .rune-water { background: linear-gradient(135deg, #28cfff 0%, #00b4d8 100%); color: #fff; box-shadow: 0 4px 12px rgba(40, 207, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .rune-earth { background: linear-gradient(135deg, #74c882 0%, #52b788 100%); color: #fff; box-shadow: 0 4px 12px rgba(116, 200, 130, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .rune-air { background: linear-gradient(135deg, #e0e0e0 0%, #f8f9fa 100%); color: #2c3e50; box-shadow: 0 4px 12px rgba(224, 224, 224, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .rune-light { background: linear-gradient(135deg, #fff2a8 0%, #ffd60a 100%); color: #2c2006; box-shadow: 0 4px 16px rgba(255, 214, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 214, 10, 0.3); letter-spacing: 0.8px; } .rune-crystal { background: linear-gradient(135deg, #ff4b6e 0%, #ff7f99 100%); color: #fff; box-shadow: 0 4px 12px rgba(255, 75, 110, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 75, 110, 0.3); } .rune-electric { background: linear-gradient(135deg, #FFD700 0%, #FFEC33 50%, #FFB300 100%); /* Yellow shades */ color: #5C4000; /* Darker text for contrast */ box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 215, 0, 0.3); } .rune-nature { background: linear-gradient(135deg, #32CD32 0%, #228B22 100%); /* Lime Green to Forest Green */ color: #fff; box-shadow: 0 4px 12px rgba(50, 205, 50, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(50, 205, 50, 0.3); } .rune-physical { background: linear-gradient(135deg, #a1887f 0%, #795548 100%); /* Brown shades */ color: #fff; box-shadow: 0 4px 12px rgba(121, 85, 72, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(121, 85, 72, 0.3); } .rune-technology { background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%); /* Gray shades */ color: #fff; box-shadow: 0 4px 12px rgba(97, 97, 97, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(97, 97, 97, 0.3); } .rune-celestial { background: linear-gradient(135deg, #e6a5c3 0%, #836e95 100%); color: #fff; box-shadow: 0 4px 12px rgba(131, 110, 149, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(131, 110, 149, 0.3); } .rune-blinded { background: linear-gradient(90deg, #181a1d 70%, #2f3135 100%); color: #9a99a2 !important; border: 1.5px solid #101113; font-weight: 900 !important; letter-spacing: 2.2px !important; } .rune-stunned { background: linear-gradient(90deg, #5c6270 60%, #838a9b 100%); color: #d1d8e6; text-align: center; box-shadow: 0 2px 8px #2d334255; } .rune-candy { background: linear-gradient(135deg, #ff9bd4 0%, #ffd1e8 100%); color: #521a3a; box-shadow: 0 4px 12px rgba(255, 155, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 155, 212, 0.35); } .tab-row { display: flex; gap: 2px; justify-content: center; margin-bottom: 20px; margin-top: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 4px; } .guide-tab { flex: 1 1 50%; background: transparent; padding: 14px 8px 13px 8px; border-radius: 8px; color: #92efff; cursor: pointer; border: none; font-size: 1.1em; letter-spacing: 1px; font-weight: 700; transition: all 0.3s ease; position: relative; z-index: 1; outline: none; } .guide-tab.selected, .guide-tab:hover { background: linear-gradient(135deg, #2d5c87 0%, #667eea 100%); color: #fff; box-shadow: 0 4px 12px rgba(45, 92, 135, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); z-index: 2; } .tab-panel { display: none; padding: 3px 0 0 0; min-height: 170px; animation: fadeIn 0.21s; } .tab-panel.selected { display: block; } @keyframes fadeIn { from {opacity:0;} to {opacity:1;} } .rune-list { display: flex; flex-direction: column; gap: 15px; padding: 12px 0 7px 0; } .rune-item { display: flex; align-items: center; gap: 15px; padding: 12px 10px; background: rgba(33, 58, 68, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; min-height: 60px; position: relative; z-index: 1500; /* allow visible overflow so popups aren't clipped by rune-item */ overflow: visible; } .rune-item:hover { background: rgba(39, 72, 87, 0.8); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .rune-item:active { background: #27485782; } /* Popup fixed mode to ensure it's above everything and not clipped */ .rune-desc-popup { position: absolute; left: 50%; top: 110%; transform: translateX(-50%); z-index: 2000; background: #153049f6; color: #cbfff6; padding: 11px 15px 9px 15px; border-radius: 13px; box-shadow: 0 4px 14px #0139554c; font-size: 0.99em; white-space: pre-line; min-width: 180px; max-width: 270px; text-align: left; display: none; } .rune-desc-popup.fixed-popup { /* When we move it to body for fixed positioning, boost z-index and use fixed positioning */ position: fixed !important; z-index: 1000000 !important; transform: none !important; box-shadow: 0 8px 28px rgba(0,0,0,0.55); } .rune-item.show-popup .rune-desc-popup { display: block; animation: fadeIn 0.2s; } .spell-list { width: 100%; border-collapse: collapse; margin-top: 5px; } .spell-list th, .spell-list td { padding: 7px 6px; border-bottom: 1px solid #1d364966; } .spell-list th { background: #244c5b52; color: #a3f3ff; font-weight: 700; } .spell-list tr:last-child td { border-bottom: none; } .spell-row { cursor: pointer; background: none; transition: background 0.13s; } .spell-row:hover, .spell-row.selected { background: rgba(39, 91, 106, 0.8); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .spell-detail-popup { padding: 18px 16px 14px 16px; background: rgba(20, 54, 73, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; color: #e7fffc; margin-top: 8px; margin-bottom: 6px; box-shadow: 0 8px 32px rgba(13, 41, 63, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: fadeIn 0.3s ease; } .spell-detail-combo { margin-top: 6px; font-size: 1em; color: #bfeeff; font-weight: 500; } /* ---- Boss Menu ---- */ .boss-challenge, .boss-list { margin-bottom: 20px; width: 100%; } .boss-challenge h4, .boss-list h4 { color: #ffb8c9; letter-spacing: 1px; margin-bottom: 10px; text-align: center; } .challenge-item { background: #2338498b; border-radius: 10px; padding: 14px; text-align: center; } .challenge-item p { margin-top: 0; margin-bottom: 12px; color: #d1f8ff; line-height: 1.5; } .challenge-status-complete { color: #7affc1; font-weight: bold; margin: 10px 0 0 0; } .challenge-status-incomplete { color: #ff9a9e; font-weight: bold; margin: 10px 0 0 0; } /* ---- Effects Tab ---- */ .effect-list { display: flex; flex-direction: column; gap: 16px; padding: 12px 2px; } .effect-item { background: rgba(33, 58, 68, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 14px 18px; transition: all 0.3s ease; } .effect-item:hover { background: rgba(39, 72, 87, 0.8); transform: translateY(-1px); box-shadow: 0 44px 16px rgba(0, 0, 0, 0.2); } .effect-item:active { background: #27485782; } .effect-name { margin: 0 0 8px 0; color: #a3f3ff; font-size: 1.1em; letter-spacing: 0.5px; } .effect-desc { margin: 0; font-size: 0.98em; line-height: 1.5; color: #d1f8ff; } /* --- HP Bar: make player HP bar wider for full number display (desktop, mobile automatic) */ .duel-avatar-block .duel-hpbar-outer { min-width: 130px; max-width: 210px; margin-left: auto; margin-right: auto; } /* For the player specifically, make it even wider (120px-210px default, 210px for player) */ .duel-avatars-horiz .duel-avatar-block:first-child .duel-hpbar-outer, .duel-avatars-vert .duel-avatar-block:first-child .duel-hpbar-outer { min-width: 175px; max-width: 260px; } .online-players-container { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 40px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 12px; } .online-player-icon { display: inline-block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(137, 247, 254, 0.5); box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s ease; } .online-player-icon:hover { transform: scale(1.1); } .online-player-icon img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 600px) { .duel-avatar-block .duel-hpbar-outer { min-width: 110px; max-width: 100vw; } .duel-avatars-horiz .duel-avatar-block:first-child .duel-hpbar-outer, .duel-avatars-vert .duel-avatar-block:first-child .duel-hpbar-outer { min-width: 120px; max-width: 92vw; } } @media (max-width:470px) { #app { max-width:100vw; border-radius:0; padding:18px 2px;} #guide-modal { max-width:92vw;} #searching-status-container { padding: 25px 20px; } } .rune-select-checkbox { appearance: none; width: 22px; height: 22px; border: 2px solid #5a8ebb; border-radius: 5px; background-color: #25445e; cursor: pointer; position: relative; margin-right: 10px; transition: background-color 0.15s, border-color 0.15s; } .rune-select-checkbox:checked { background-color: #6aff99; border-color: #a1ffd0; } .rune-select-checkbox:checked::after { content: '✔'; position: absolute; top: 0px; left: 4px; color: #1a4d2e; font-size: 1.1em; font-weight: bold; } /* Add duel request indicator styles */ .duel-request-indicator { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: #ff4444; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; animation: pulse-red 2s infinite; z-index: 5; border: 2px solid white; box-shadow: 0 2px 8px rgba(255, 68, 68, 0.4); } @keyframes pulse-red { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } #play-btn { position: relative; } #gacha-roll-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 16px 24px; font-size: 1.1em; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; } #gacha-roll-btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); } #gacha-roll-btn:not([disabled]):active { animation: gachaRoll 0.8s ease-in-out; } @keyframes gachaRoll { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(0.95) rotate(-2deg); } 50% { transform: scale(1.05) rotate(2deg); } 75% { transform: scale(0.98) rotate(-1deg); } 100% { transform: scale(1) rotate(0deg); } } /* Creator Tools Styles */ #creator-tools-content { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(163, 243, 255, 0.2); } #creator-tools-content h4 { color: #ffb8c9; /* A different color to distinguish */ margin-bottom: 10px; } #creator-player-list { max-height: 150px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; margin-bottom: 15px; } .creator-player-item { display: flex; align-items: center; gap: 10px; padding: 5px; } .creator-player-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); } .creator-player-item img { width: 24px; height: 24px; border-radius: 50%; } .creator-player-item span { color: #e0fcff; } .creator-actions { display: flex; flex-direction: column; gap: 10px; } .creator-actions .setting-item { gap: 5px; /* Tighter gap for controls */ } .creator-input { flex-grow: 1; background: #25445e; border: 1px solid #5a8ebb; color: #fff; border-radius: 6px; padding: 8px; } .creator-btn { background: #3a687d; border: 1px solid #5a8ebb; color: #fff; padding: 8px 12px; border-radius: 6px; cursor: pointer; } .creator-btn:hover { background: #4a7e99; } /* Stardust Challenge Button */ .stardust-challenge-btn { background: none; border: none; font-size: 1.5em; cursor: pointer; padding: 0 5px; animation: pulse-yellow 1.5s infinite; vertical-align: middle; } @keyframes pulse-yellow { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Jukebox Styles */ #jukebox-container { display: flex; flex-direction: column; gap: 20px; } .jukebox-section h4 { color: #a3f3ff; margin-bottom: 10px; border-bottom: 1px solid rgba(163, 243, 255, 0.2); padding-bottom: 5px; } .jukebox-tracklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .jukebox-track { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(33, 58, 68, 0.4); border-radius: 8px; transition: background 0.2s; } .jukebox-track.active { background: rgba(45, 92, 135, 0.7); box-shadow: 0 0 0 2px #6aff99 inset; } .jukebox-play-btn, .jukebox-set-active-btn { background: #274857; border: 1px solid #457b9d; color: #e0fbfc; border-radius: 6px; cursor: pointer; padding: 6px 10px; font-weight: 600; transition: background 0.2s, color 0.2s; } .jukebox-play-btn { width: 40px; } .jukebox-play-btn:hover, .jukebox-set-active-btn:hover { background: #3a687d; } .jukebox-track-title { flex-grow: 1; color: #d1f8ff; } /* New styles for checkbox toggle */ .jukebox-active-toggle { appearance: none; width: 20px; height: 20px; border: 2px solid #5a8ebb; border-radius: 5px; background-color: #25445e; cursor: pointer; position: relative; transition: background-color 0.15s, border-color 0.15s; margin-left: 10px; } .jukebox-active-toggle:checked { background-color: #6aff99; border-color: #a1ffd0; } .jukebox-active-toggle:checked::after { content: '✔'; position: absolute; top: 0px; left: 3px; color: #1a4d2e; font-size: 1em; font-weight: bold; } /* Rune Awakening modal */ #awakening-modal-bg { display: none; position: fixed; left:0; right:0; top:0; bottom:0; align-items: center; justify-content: center; backdrop-filter: blur(8px); background: rgba(6,8,20,0.8); z-index: 60; } #awakening-modal-bg.open { display: flex; } #awakening-modal { background: linear-gradient(180deg, rgba(32,18,56,0.98), rgba(48,28,76,0.98)); border-radius: 16px; padding: 20px; width: 360px; max-width: 92%; color: #fff; border: 1px solid rgba(200,170,230,0.12); box-shadow: 0 12px 40px rgba(30,10,60,0.6); } .awakening-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; } .awaken-btn { padding:8px 12px; border-radius:8px; border:none; cursor:pointer; background: linear-gradient(90deg, #ffd9f8, #caa2dd); color: #2a0b2b; font-weight:700; } .awaken-btn[disabled] { opacity:0.5; cursor:not-allowed; filter:grayscale(0.2); } /* small helper text */ .awakening-note { font-size:0.9em; color:#d6c3e6; margin-top:8px; }