@charset "UTF-8"; /* ============================================================ EXTRAS.CSS — Volume slider · Particles · Shortcut hints · Card backs · Frames ============================================================ */ /* ───────────────────────────────────────────────────────────── TWEAKS PANEL — Volume slider ───────────────────────────────────────────────────────────── */ .tw-slider-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; } .tw-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: linear-gradient(90deg, var(--neon-1) 0%, var(--accent-warm) 100%); background-size: var(--val, 50%) 100%; background-repeat: no-repeat; background-color: rgba(255,255,255,0.08); border-radius: 999px; outline: none; } .tw-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #fff, var(--neon-1)); border: 2px solid #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(var(--neon-1-rgb), 0.5); transition: transform 0.15s; } .tw-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .tw-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #fff, var(--neon-1)); border: 2px solid #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(var(--neon-1-rgb), 0.5); } .tw-slider-val { font-family: var(--body-font); font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; color: var(--accent-warm); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────── LIGHT PARTICLE FIELD — CSS-only, no JS RAF 8 particles drift upward via long-running CSS keyframes ───────────────────────────────────────────────────────────── */ #light-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .lp-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle, currentColor 0%, transparent 70%); opacity: 0; animation: lpDrift 28s linear infinite; } .lp-spark.big { width: 5px; height: 5px; } .lp-spark.tiny { width: 2px; height: 2px; } @keyframes lpDrift { 0% { transform: translate3d(var(--x, 50vw), 110vh, 0); opacity: 0; } 10% { opacity: var(--max-op, 0.7); } 50% { transform: translate3d(calc(var(--x, 50vw) + var(--drift, 30px)), 50vh, 0); } 90% { opacity: var(--max-op, 0.7); } 100% { transform: translate3d(calc(var(--x, 50vw) - var(--drift, 30px)), -10vh, 0); opacity: 0; } } [data-anim="low"] #light-particles { display: none; } body.no-light-particles #light-particles { display: none; } /* ───────────────────────────────────────────────────────────── KEYBOARD SHORTCUT BADGES — small key labels on bid buttons ───────────────────────────────────────────────────────────── */ .bid-btn .kbd-hint { position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; background: rgba(0,0,0,0.85); color: var(--neon-2); font-family: 'Outfit', monospace; font-size: 0.55rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); text-shadow: 0 0 4px currentColor; pointer-events: none; opacity: 0; transition: opacity 0.2s; } body.show-kbd-hints .bid-btn .kbd-hint { opacity: 1; } .bid-btn { position: relative; } /* "Press 1-9" hint above bid controls */ .kbd-hint-row { font-family: var(--body-font); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--ink-4); text-transform: uppercase; text-align: center; margin-top: 4px; opacity: 0.7; } @media (max-width: 768px) { .kbd-hint, .kbd-hint-row { display: none !important; } } /* ───────────────────────────────────────────────────────────── CARD BACKS — 4 selectable designs Toggle via [data-cardback="..."] on ───────────────────────────────────────────────────────────── */ /* DEFAULT: damask (current — already in game-polish.css) */ /* CYBER — neon grid */ [data-cardback="cyber"] .card-back { background: /* grid */ repeating-linear-gradient(0deg, transparent 0 5px, rgba(var(--neon-2-rgb), 0.18) 5px 6px), repeating-linear-gradient(90deg, transparent 0 5px, rgba(var(--neon-1-rgb), 0.18) 5px 6px), radial-gradient(ellipse 100% 70% at 50% 50%, rgba(var(--neon-1-rgb), 0.28) 0%, transparent 70%), linear-gradient(160deg, #050b1f 0%, #0c1230 50%, #04050f 100%) !important; border: 1.5px solid rgba(var(--neon-2-rgb), 0.7) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(var(--neon-2-rgb), 0.4), inset 0 0 22px rgba(var(--neon-1-rgb), 0.25), 0 0 18px rgba(var(--neon-2-rgb), 0.3) !important; } [data-cardback="cyber"] .card-back::before { inset: 6px !important; border: 1px dashed rgba(var(--neon-2-rgb), 0.7) !important; border-radius: 6px !important; } [data-cardback="cyber"] .card-back::after { content: '◊' !important; color: var(--neon-2) !important; text-shadow: 0 0 14px currentColor !important; } /* MARBLE — cool white marble */ [data-cardback="marble"] .card-back { background: radial-gradient(ellipse 60% 30% at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 60%), radial-gradient(ellipse 50% 20% at 70% 70%, rgba(255,255,255,0.1) 0%, transparent 60%), radial-gradient(ellipse 40% 15% at 50% 20%, rgba(180,200,220,0.12) 0%, transparent 60%), linear-gradient(160deg, #3a3e4e 0%, #1e2030 60%, #08090f 100%) !important; border: 1.5px solid #b0c4d8 !important; box-shadow: 0 10px 24px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 -8px 22px rgba(0,0,0,0.4) !important; } [data-cardback="marble"] .card-back::before { inset: 6px !important; border: 1px solid rgba(74,210,255, 0.5) !important; border-radius: 6px !important; } [data-cardback="marble"] .card-back::after { content: '✦' !important; color: rgba(220,235,255, 0.8) !important; text-shadow: 0 0 14px rgba(74,210,255, 0.55) !important; } /* VELVET — wine quilted */ [data-cardback="velvet"] .card-back { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.12) 8px 9px), repeating-linear-gradient(-45deg, transparent 0 8px, rgba(0,0,0,0.12) 8px 9px), radial-gradient(ellipse 80% 60% at 50% 50%, #7a1024 0%, #4a0a18 60%, #1a0408 100%) !important; border: 1.5px solid #c89030 !important; box-shadow: 0 10px 24px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,235,180,0.5), inset 0 -8px 22px rgba(0,0,0,0.45) !important; } [data-cardback="velvet"] .card-back::before { inset: 6px !important; border: 1px solid rgba(255,210,120,0.7) !important; border-radius: 6px !important; } [data-cardback="velvet"] .card-back::after { content: '♛' !important; color: rgba(255,225,150, 0.85) !important; text-shadow: 0 0 14px rgba(255,200,100,0.55) !important; } /* ───────────────────────────────────────────────────────────── AVATAR FRAMES — 4 selectable rings on player avatars Toggle via [data-frame="..."] on ───────────────────────────────────────────────────────────── */ .pavatar { position: relative; } /* DEFAULT: subtle white ring (already exists) */ /* GOLD ROYALE */ [data-frame="gold"] .pavatar { border-color: var(--accent-warm) !important; box-shadow: 0 0 0 1.5px var(--accent-warm), 0 0 14px rgba(var(--accent-warm-rgb), 0.6), 0 4px 12px rgba(0,0,0,0.6), inset 0 -2px 4px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.25) !important; } /* NEON DUAL */ [data-frame="neon"] .pavatar { border-color: var(--neon-1) !important; box-shadow: 0 0 0 1.5px var(--neon-1), 0 0 0 3px rgba(0,0,0,0.6), 0 0 0 4px var(--neon-2), 0 0 18px rgba(var(--neon-1-rgb), 0.55), 0 0 24px rgba(var(--neon-2-rgb), 0.4) !important; } /* MARBLE */ [data-frame="marble"] .pavatar { border-color: #b0c4d8 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 0 0 2px #b0c4d8, 0 0 0 3px #6a7a90, 0 4px 14px rgba(74,210,255, 0.25), inset 0 -2px 4px rgba(0,0,0,0.3) !important; } /* VELVET CROWN */ [data-frame="velvet"] .pavatar { border-color: #c89030 !important; box-shadow: 0 0 0 1px rgba(255,235,180,0.5), 0 0 0 2px #c89030, 0 0 0 4px #7a1024, 0 4px 14px rgba(122,16,36,0.35), inset 0 -2px 4px rgba(0,0,0,0.3) !important; } /* In Tweaks panel, the frame swatch shows a mini-avatar */ .tw-frame-row { display: flex; align-items: center; gap: 10px; padding: 10px; } .tw-frame-mini { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 0.78rem; color: #fff; background: linear-gradient(135deg, #3a5cc0, #1a3080); border: 2px solid rgba(255,255,255,0.15); flex-shrink: 0; } .tw-frame-mini.gold { border-color: #ffc24a; box-shadow: 0 0 0 1.5px #ffc24a, 0 0 10px rgba(255,194,74,0.6); } .tw-frame-mini.neon { border-color: #ff2d8b; box-shadow: 0 0 0 1.5px #ff2d8b, 0 0 0 3px rgba(0,0,0,0.6), 0 0 0 4px #00e0ff, 0 0 12px rgba(255,45,139,0.55); } .tw-frame-mini.marble { border-color: #b0c4d8; box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 0 0 2px #b0c4d8, 0 0 0 3px #6a7a90; } .tw-frame-mini.velvet { border-color: #c89030; box-shadow: 0 0 0 1px rgba(255,235,180,0.5), 0 0 0 2px #c89030, 0 0 0 4px #7a1024; } /* ───────────────────────────────────────────────────────────── HAND DRAG REORDER — visual feedback during drag ───────────────────────────────────────────────────────────── */ .card.dragging { opacity: 0.6; transform: scale(1.08) rotate(2deg); z-index: 200 !important; cursor: grabbing !important; filter: brightness(1.1); } .card.drag-over { outline: 2px dashed var(--neon-2) !important; outline-offset: 2px !important; } #hand-bottom .card.playable { cursor: grab; } #hand-bottom .card.playable:active { cursor: grabbing; } /* ───────────────────────────────────────────────────────────── ACHIEVEMENTS TIMELINE (profile modal extension) ───────────────────────────────────────────────────────────── */ .ach-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-1); } .ach-title { font-family: var(--body-font); font-size: 0.6rem; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--ink-3); font-weight: 800; text-transform: uppercase; margin-bottom: 10px; } .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ach-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 4px; text-align: center; position: relative; transition: transform 0.18s; } .ach-tile.unlocked { background: linear-gradient(135deg, rgba(var(--accent-warm-rgb), 0.12), rgba(0,0,0,0.4)); border-color: rgba(var(--accent-warm-rgb), 0.5); } .ach-tile:not(.unlocked) { opacity: 0.45; filter: grayscale(0.7); } .ach-tile:hover { transform: translateY(-2px); } .ach-tile .ach-emoji { font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(var(--accent-warm-rgb), 0.4)); line-height: 1; } .ach-tile .ach-label { font-family: var(--body-font); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.5px; color: var(--ink-2); margin-top: 4px; text-transform: uppercase; line-height: 1.1; } .ach-tile.unlocked .ach-label { color: var(--accent-warm); } .ach-tile .ach-count { position: absolute; top: 4px; right: 4px; font-size: 0.55rem; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; } .ach-tile.unlocked .ach-count { background: var(--accent-warm); color: #1a0e00; border-radius: 8px; padding: 1px 5px; border: 1px solid rgba(0,0,0,0.6); } /* Sub-tabs in profile modal */ .pm-tabs { display: flex; background: rgba(0,0,0,0.4); border-radius: 8px; padding: 3px; margin-top: 4px; } .pm-tab { flex: 1; padding: 8px 12px; background: transparent; border: none; color: var(--ink-3); font-family: var(--body-font); font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; border-radius: 6px; transition: all 0.15s; } .pm-tab.active { background: linear-gradient(135deg, var(--neon-1), var(--accent-cool)); color: #fff; box-shadow: 0 3px 12px rgba(var(--neon-1-rgb), 0.4); } .pm-tab-content { display: none; flex-direction: column; gap: 8px; } .pm-tab-content.active { display: flex; } /* Cosmetics tab: card-back + frame selectors */ .cosm-section { margin-top: 4px; } .cosm-title { font-family: var(--body-font); font-size: 0.6rem; letter-spacing: 0.4em; text-indent: 0.4em; color: var(--ink-3); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; } .cosm-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .cosm-card-pick { aspect-ratio: 0.71; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative; } .cosm-card-pick.active { border-color: var(--accent-warm); transform: scale(1.05); box-shadow: 0 0 0 2px rgba(var(--accent-warm-rgb), 0.3), 0 0 20px rgba(var(--accent-warm-rgb), 0.4); } .cosm-card-pick:hover { transform: translateY(-2px); } .cosm-frame-pick { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: linear-gradient(135deg, #3a5cc0, #1a3080); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1.1rem; border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .cosm-frame-pick.active { transform: scale(1.06); } .cosm-frame-pick:hover { transform: translateY(-2px); }