/* ========================================================= THEME TOKENS — Background + Borders + Corners + Font Color + Font Wszystko sterowane atrybutami na , patrz JS na dole. ========================================================= */ :root{ --mono: "JetBrains Mono", "Consolas", monospace; --font-body: var(--mono); --radius: 4px; } /* ---- CARD BACKGROUND THEMES ---- */ html[data-theme="dark"]{ --bg: #0a0a0d; --bg-radial: #101014; --panel: #121216; --panel-grad-a: #16161b; --panel-grad-b: #0e0e12; --panel-border: #26262c; --panel-border-hover: #3a3a44; --text-dim: #6b6b76; --text-mid: #9a9aa4; --text-bright: #e8e8ec; --accent: #f4c430; --accent-dim: #4a3f1a; } html[data-theme="aurora"]{ --bg: #060a10; --bg-radial: #0a121c; --panel: #0c141d; --panel-grad-a: #10202b; --panel-grad-b: #08121a; --panel-border: #1c3040; --panel-border-hover: #2c4a5e; --text-dim: #5f7a8a; --text-mid: #8fb4c4; --text-bright: #e4f6fb; --accent: #5ee7ff; --accent-dim: #163b45; } html[data-theme="light"]{ --bg: #f2f0ea; --bg-radial: #ffffff; --panel: #ffffff; --panel-grad-a: #ffffff; --panel-grad-b: #ece9e1; --panel-border: #d8d4c8; --panel-border-hover: #b8b2a0; --text-dim: #8a8474; --text-mid: #5a5548; --text-bright: #1c1a14; --accent: #e0a900; --accent-dim: #f2e2a8; } html[data-theme="bloodweb"]{ --bg: #0c0505; --bg-radial: #150808; --panel: #130808; --panel-grad-a: #1a0a0a; --panel-grad-b: #0a0404; --panel-border: #3a1414; --panel-border-hover: #5c1c1c; --text-dim: #7a5555; --text-mid: #b07a7a; --text-bright: #f5e2e2; --accent: #e02c2c; --accent-dim: #4a1414; } /* ---- FONT COLOR (kolor czcionki w całej aplikacji, łącznie z tekstami w tabelach) ---- */ html[data-name="gold"] { --text-bright:#f4c430; --text-mid:#f4c430; --text-dim:#f4c430; } html[data-name="teal"] { --text-bright:#2dd4bf; --text-mid:#2dd4bf; --text-dim:#2dd4bf; } html[data-name="aurora"] { --text-bright:#5ee7ff; --text-mid:#5ee7ff; --text-dim:#5ee7ff; } html[data-name="cream"] { --text-bright:#f2ecd8; --text-mid:#f2ecd8; --text-dim:#f2ecd8; } html[data-name="white"] { --text-bright:#ffffff; --text-mid:#ffffff; --text-dim:#ffffff; } html[data-name="crimson"] { --text-bright:#e0303f; --text-mid:#e0303f; --text-dim:#e0303f; } html[data-name="violet"] { --text-bright:#a463f2; --text-mid:#a463f2; --text-dim:#a463f2; } html[data-name="bloodweb"] { --text-bright:#ff3b3b; --text-mid:#ff3b3b; --text-dim:#ff3b3b; } /* ---- FONT ---- */ html[data-font="kode"] { --font-body: "Kode Mono", "Consolas", monospace; } html[data-font="newrocker"]{ --font-body: "New Rocker", "Georgia", serif; } /* ---- BORDERS (ramki wszystkich tabel/paneli w aplikacji — sterowane przez zmienną --panel-border, z której korzysta praktycznie każdy bordered element w apce) ---- */ html[data-border="gold"] { --panel-border: #7a5f10; } html[data-border="teal"] { --panel-border: #157b70; } html[data-border="blood"] { --panel-border: #7a1a1a; } html[data-border="gold"] .slot{ box-shadow: 0 0 0 1px #7a5f1055 inset; } html[data-border="teal"] .slot{ box-shadow: 0 0 0 1px #157b7055 inset; } html[data-border="blood"] .slot{ box-shadow: 0 0 0 1px #7a1a1a55 inset; } html[data-border="none"] .slot{ box-shadow: none; } /* ---- CORNERS (rogi wszystkich tabel/paneli w aplikacji — sterowane przez zmienną --radius, z której korzysta praktycznie każdy zaokrąglony element w apce) ---- */ html[data-corners="lshapes"]{ --radius: 0; } html[data-corners="lshapes"] .slot::before, html[data-corners="lshapes"] .slot::after{ content:""; position:absolute; width: 10px; height: 10px; border: 1px solid var(--name-color, var(--accent)); opacity: .85; } html[data-corners="lshapes"] .slot::before{ top: -1px; left: -1px; border-right: none; border-bottom: none; } html[data-corners="lshapes"] .slot::after{ bottom: -1px; right: -1px; border-left: none; border-top: none; } *{ box-sizing: border-box; } html, body{ background: var(--bg); } body{ margin:0; min-height:100vh; background: radial-gradient(ellipse at 50% 0%, var(--bg-radial) 0%, var(--bg) 55%); color: var(--text-mid); font-family: var(--font-body); letter-spacing: 0.02em; padding: 40px 24px 80px; transition: background .25s ease, color .25s ease; } .page-topbar{ max-width: 1180px; margin: 0 auto 36px; position: relative; } /* ---- TOP BANNER (colors follow the active card theme) ---- */ .app-banner{ display:flex; flex-direction: column; align-items:center; justify-content: center; gap: 6px; background: var(--accent); border-bottom: 4px solid var(--bg); border-radius: var(--radius); padding: 18px 20px; transition: background .25s ease; } .banner-subrow{ display:flex; align-items:center; justify-content:center; gap: 10px; } .banner-logo{ width: 26px; height: 26px; flex-shrink: 0; display: inline-block; background-color: var(--bg); -webkit-mask-image: url("/icons/logo.png"); mask-image: url("/icons/logo.png"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .banner-text{ display:flex; align-items:baseline; gap: 10px; } .banner-brand{ font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bg); font-weight: 700; margin: 0; } .banner-tagline{ font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bg); font-weight: 700; margin: 0; } /* ---- OPTIONS BUTTON (gear icon only, top-right corner of the page) ---- */ .options-btn{ position: absolute; top: -14px; right: -14px; display:flex; align-items:center; justify-content:center; width: 34px; height: 34px; background: var(--panel); border: 1px solid var(--panel-border); color: var(--text-mid); border-radius: 50%; cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .2s ease; } .options-btn:hover{ color: var(--text-bright); border-color: var(--panel-border-hover); transform: rotate(35deg); } .options-btn svg{ width: 17px; height: 17px; flex-shrink: 0; } @media (max-width: 640px){ .options-btn{ top: -10px; right: 6px; } } /* ---- TAB BAR ---- */ .tab-bar{ max-width: 1180px; margin: 0 auto 28px; display:flex; justify-content:center; gap: 8px; flex-wrap: wrap; } .tab-btn{ background: var(--panel); border: 1px solid var(--panel-border); color: var(--text-dim); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .tab-btn:hover{ color: var(--text-bright); border-color: var(--panel-border-hover); } .tab-btn.active{ color: var(--bg); background: var(--name-color, var(--accent)); border-color: var(--name-color, var(--accent)); } .tab-btn-import{ border-color: #3ddc6f; animation: breathe-green 3s ease-in-out infinite; } .tab-btn-import:hover{ border-color: #3ddc6f; animation-play-state: paused; box-shadow: 0 0 12px 2px rgba(61, 220, 111, 0.65); } .tab-btn-import.active{ background: #3ddc6f; border-color: #3ddc6f; animation: breathe-green-active 2.6s ease-in-out infinite; } @keyframes breathe-green{ 0%, 100%{ box-shadow: 0 0 5px 1px rgba(61, 220, 111, 0.30); } 50%{ box-shadow: 0 0 12px 2px rgba(61, 220, 111, 0.65); } } @keyframes breathe-green-active{ 0%, 100%{ box-shadow: 0 0 9px 2px rgba(61, 220, 111, 0.45); } 50%{ box-shadow: 0 0 18px 4px rgba(61, 220, 111, 0.80); } } .new-build-btn{ background: var(--panel); border: 1px solid #3ddc6f; color: var(--text-dim); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; animation: breathe-green 3s ease-in-out infinite; } .new-build-btn:hover{ color: var(--text-bright); border-color: #3ddc6f; animation-play-state: paused; box-shadow: 0 0 12px 2px rgba(61, 220, 111, 0.65); } /* ---- BUILD MENU: "Build" button that reveals a dropdown on hover ---- */ .build-menu{ position: relative; } .build-menu-dropdown{ position: absolute; top: 100%; left: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px; margin-top: 2px; background: var(--panel); border: 1px solid var(--panel-border-hover); border-radius: var(--radius); box-shadow: 0 10px 24px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 40; width: max-content; min-width: 100%; } .build-menu:hover .build-menu-dropdown, .build-menu:focus-within .build-menu-dropdown{ opacity: 1; visibility: visible; transform: translateY(0); } /* Invisible bridge so the mouse can travel from the button down into the dropdown without the :hover gap closing it. */ .build-menu-dropdown::before{ content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px; } .build-menu-item{ display: block; width: 100%; background: transparent; border: 1px solid transparent; color: var(--text-dim); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; padding: 9px 14px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; } .build-menu-item:hover{ color: var(--text-bright); border-color: var(--panel-border-hover); background: var(--panel-grad-a); } .build-menu-item[disabled]{ cursor: default; opacity: 0.45; } .build-menu-item[disabled]:hover{ color: var(--text-dim); border-color: transparent; background: transparent; } @media (max-width: 640px){ .tab-bar{ gap: 6px; } .tab-btn{ padding: 9px 14px; font-size: 9px; } .new-build-btn{ padding: 9px 14px; font-size: 9px; } } .build-layout{ display: grid; grid-template-columns: 130px 1fr 130px; gap: 28px; max-width: 1180px; margin: 0 auto; align-items: start; } .slot-column{ display:flex; flex-direction: column; gap: 16px; } .slot{ position: relative; height: 92px; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-radius: var(--radius); display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 4px; padding: 8px 6px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .slot:hover{ border-color: var(--panel-border-hover); } .slot:active{ transform: scale(0.98); } .slot.filled{ border-color: var(--name-color, var(--accent)); } .slot-label{ font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .slot.filled .slot-label{ color: var(--name-color, var(--accent)); } .slot-icon{ display: none; } .rarity-Mythic{ box-shadow: 0 0 0 1px #5b3d8c inset; } .rarity-Mythic .slot-label{ color: #b48cff; } .slot-item-name{ font-size: 10px; letter-spacing: 0.02em; color: var(--name-color, var(--text-bright)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; } .slot-item-quality, .slot-item-score{ font-size: 9px; letter-spacing: 0.04em; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; } /* ---- RARITY GLOW: subtle for Legendary, strong for Mythic ---- */ /* Glow lives on the frame (box-shadow) and breathes — a slow, gentle pulse between a dim and bright state. Sparkle points (.slot-sparkle, injected by JS) twinkle on top, scattered across the whole item frame at random positions/timings. Kept inside the slot's own frame (overflow hidden) so nothing spills past the border. */ .slot{ z-index: 0; overflow: hidden; } html .slot[data-rarity="legendary"]{ border-color: #ff9a3c; animation: breathe-legendary 3.2s ease-in-out infinite; } .slot[data-rarity="legendary"] .slot-item-name{ text-shadow: 0 0 4px rgba(255,154,60,0.5); } html .slot[data-rarity="mythic"]{ border-color: #ff4d4d; animation: breathe-mythic 2.8s ease-in-out infinite; } .slot[data-rarity="mythic"] .slot-item-name{ text-shadow: 0 0 6px rgba(255,77,77,0.75), 0 0 13px rgba(255,77,77,0.4); } @keyframes breathe-legendary{ 0%, 100%{ box-shadow: 0 0 12px 1px rgba(255,154,60,0.30); } 50%{ box-shadow: 0 0 26px 3px rgba(255,154,60,0.65); } } @keyframes breathe-mythic{ 0%, 100%{ box-shadow: 0 0 13px 1px rgba(255,77,77,0.35); } 50%{ box-shadow: 0 0 28px 3px rgba(255,77,77,0.80); } } /* Sparkle points: tiny twinkling glints scattered over legendary/mythic items. Each .slot-sparkle gets its own position/delay/duration via inline custom properties (set in JS), so they twinkle independently rather than as one synchronized pulse. */ .slot-sparkle{ position: absolute; left: var(--sx, 50%); top: var(--sy, 50%); width: 3px; height: 3px; border-radius: 50%; background: var(--sparkle-color, #fff); box-shadow: 0 0 3px 1px var(--sparkle-color, #fff), 0 0 7px 2px var(--sparkle-color, #fff); opacity: 0; pointer-events: none; z-index: 1; animation: slot-sparkle-twinkle var(--sparkle-dur, 2.6s) ease-in-out infinite; animation-delay: var(--sparkle-delay, 0s); } @keyframes slot-sparkle-twinkle{ 0%, 80%, 100%{ opacity: 0; transform: scale(.2); } 40%{ opacity: 1; transform: scale(1); } } /* Smaller sparkle variant for item cards (built-item-row), which are far smaller/flatter than a 92px equipment slot — same twinkle animation, scaled-down point size and glow so it reads correctly at card scale. */ .slot-sparkle.sparkle-sm{ width: 2px; height: 2px; box-shadow: 0 0 2px 0.5px var(--sparkle-color, #fff), 0 0 4px 1px var(--sparkle-color, #fff); } @media (prefers-reduced-motion: reduce){ .slot-sparkle{ animation: none; opacity: 0; } .slot[data-rarity="legendary"], .slot[data-rarity="mythic"], .craft-panel[data-rarity="legendary"], .craft-panel[data-rarity="mythic"], .slot-tooltip.visible, .tab-btn-import, .tab-btn-import.active, .new-build-btn{ animation: none !important; } .slot[data-rarity="legendary"]{ box-shadow: 0 0 20px 2px rgba(255,154,60,0.45); } .slot[data-rarity="mythic"]{ box-shadow: 0 0 20px 2px rgba(255,77,77,0.5); } .craft-panel[data-rarity="legendary"]{ box-shadow: 0 0 20px 2px rgba(255,154,60,0.45), 0 12px 28px rgba(0,0,0,0.35); } .craft-panel[data-rarity="mythic"]{ box-shadow: 0 0 20px 2px rgba(255,77,77,0.5), 0 12px 28px rgba(0,0,0,0.35); } .slot-tooltip.visible{ box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 14px 1px color-mix(in srgb, var(--tooltip-color, transparent) 35%, transparent); } .tab-btn-import{ box-shadow: 0 0 8px 1px rgba(61, 220, 111, 0.45); } .tab-btn-import.active{ box-shadow: 0 0 14px 3px rgba(61, 220, 111, 0.65); } .new-build-btn{ box-shadow: 0 0 8px 1px rgba(61, 220, 111, 0.45); } } /* ---- SLOT TOOLTIP: item details shown on hover over an equipped slot ---- */ .slot-tooltip{ position: fixed; z-index: 3000; min-width: 190px; max-width: 260px; padding: 10px 13px; border-radius: var(--radius); border: 1px solid var(--tooltip-color, var(--panel-border)); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 14px 1px color-mix(in srgb, var(--tooltip-color, transparent) 35%, transparent); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; overflow: hidden; } .slot-tooltip.visible{ opacity: 1; visibility: visible; transform: translateY(0); animation: breathe-tooltip 3s ease-in-out infinite; } @keyframes breathe-tooltip{ 0%, 100%{ box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 9px 1px color-mix(in srgb, var(--tooltip-color, transparent) 20%, transparent); } 50%{ box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 18px 3px color-mix(in srgb, var(--tooltip-color, transparent) 50%, transparent); } } .slot-tooltip-name{ font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--tooltip-color, var(--text-bright)); } .slot-tooltip-type{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; } .slot-tooltip-quality-score{ font-size: 11px; color: var(--text-mid); margin-top: 6px; } .slot-tooltip-affixes{ margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 3px; } .slot-tooltip-affix{ font-size: 11px; color: var(--text-mid); line-height: 1.35; } .slot-tooltip-effect{ margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--panel-border); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--tooltip-color, var(--accent)); } @media (max-width: 720px){ .slot-tooltip{ display: none; } } .center-panel{ border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-radius: var(--radius); min-height: 640px; padding: 22px 26px 26px; display:flex; flex-direction: column; } .panel-heading{ text-align:center; font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-mid); margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--panel-border); } .stats-placeholder{ flex:1; display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 10px; text-align:center; color: var(--text-dim); } .stats-placeholder .glyph{ font-size: 28px; color: var(--panel-border-hover); line-height:1; } .stats-placeholder .msg-main{ font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mid); } .stats-placeholder .msg-sub{ font-size: 10px; letter-spacing: 0.05em; max-width: 340px; line-height: 1.6; } .stat-grid-preview{ margin-top: 28px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; width: 100%; max-width: 480px; opacity: .35; } .stat-row{ display:flex; flex-direction: column; gap: 4px; align-items:center; } .stat-name{ font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); } .stat-value{ font-size: 13px; color: var(--text-mid); } .notes-panel{ max-width: 1180px; margin: 28px auto 0; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-radius: var(--radius); padding: 22px 26px 26px; } .notes-textarea{ width: 100%; min-height: 160px; resize: vertical; background: transparent; border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; line-height: 1.6; padding: 14px 16px; outline: none; transition: border-color .15s ease; } .notes-textarea::placeholder{ color: var(--text-dim); } .notes-textarea:focus{ border-color: var(--name-color, var(--accent)); } /* ---- TAB VIEWS ---- */ .tab-view{ display: none; } .tab-view.active{ display: block; } /* ---- ITEMS VIEW ---- */ .items-columns{ max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 586px) minmax(0, 370px); gap: 24px; align-items: start; } .items-left-group{ display: flex; gap: 8px; min-width: 0; max-width: 100%; } .items-column{ display:flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 0; max-width: none; } .items-stack{ display:flex; flex-direction: column; gap: 16px; flex: 1 1 0; max-width: none; } .items-stack-row{ display:flex; flex-direction: column; gap: 8px; flex: 1; } .items-col-label{ font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mid); } .items-label-mythic{ color: #ff4d4d; } .items-label-legendary{ color: #ff9a3c; } .items-search{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em; padding: 10px 12px; outline: none; transition: border-color .15s ease; width: 100%; } .items-search::placeholder{ color: var(--text-dim); } .items-search:focus{ border-color: var(--name-color, var(--accent)); } .items-search-mythic{ border-color: #7a1a1a; } .items-search-mythic:focus{ border-color: #ff4d4d; } .items-search-legendary{ border-color: #7a4a12; } .items-search-legendary:focus{ border-color: #ff9a3c; } .items-list{ flex: 1; min-height: 540px; max-height: 540px; min-width: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-radius: var(--radius); } .items-list-stack{ min-height: 155px; max-height: 220px; overflow-y: auto; } /* ---- CUSTOM SCROLLBARS (consistent with the panel chrome) ---- */ .items-list, .items-list-stack, .db-list, .combo-dropdown{ scrollbar-width: thin; scrollbar-color: var(--panel-border-hover) transparent; } .items-list::-webkit-scrollbar, .items-list-stack::-webkit-scrollbar, .db-list::-webkit-scrollbar, .combo-dropdown::-webkit-scrollbar{ width: 8px; } .items-list::-webkit-scrollbar-track, .items-list-stack::-webkit-scrollbar-track, .db-list::-webkit-scrollbar-track, .combo-dropdown::-webkit-scrollbar-track{ background: transparent; } .items-list::-webkit-scrollbar-thumb, .items-list-stack::-webkit-scrollbar-thumb, .db-list::-webkit-scrollbar-thumb, .combo-dropdown::-webkit-scrollbar-thumb{ background: var(--panel-border-hover); border-radius: var(--radius); } .items-list::-webkit-scrollbar-thumb:hover, .items-list-stack::-webkit-scrollbar-thumb:hover, .db-list::-webkit-scrollbar-thumb:hover, .combo-dropdown::-webkit-scrollbar-thumb:hover{ background: var(--name-color, var(--accent)); } .items-craft-column{ position: relative; display:flex; flex-direction: column; gap: 12px; max-width: none; } .craft-btn{ background: var(--name-color, var(--accent)); border: 1px solid var(--name-color, var(--accent)); color: var(--bg); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: opacity .15s ease; } .craft-btn:hover{ opacity: .85; } /* ---- CRAFT: EXPORT / IMPORT ---- */ .craft-btn-row{ display: flex; align-items: stretch; gap: 8px; } .craft-btn-row .craft-btn{ flex: 1; } .craft-io-btn{ display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--panel-border); color: var(--text-bright); border-radius: var(--radius); cursor: pointer; font-size: 14px; line-height: 1; transition: background .15s ease, border-color .15s ease; } .craft-io-btn:hover{ background: rgba(255,255,255,0.06); border-color: var(--name-color, var(--accent)); } .craft-io-panel{ display: none; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 12px; } .craft-io-panel.open{ display: flex; } .craft-io-label{ font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .craft-io-textarea{ background: var(--bg); border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.02em; padding: 8px 10px; outline: none; resize: vertical; min-height: 70px; width: 100%; word-break: break-all; } .craft-io-textarea:focus{ border-color: var(--name-color, var(--accent)); } .craft-io-actions{ display: flex; gap: 8px; } .craft-io-action-btn{ flex: 1; background: transparent; border: 1px solid var(--panel-border); color: var(--text-bright); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .craft-io-action-btn:hover{ background: rgba(255,255,255,0.06); border-color: var(--name-color, var(--accent)); } .craft-io-hint{ font-size: 9px; letter-spacing: 0.03em; color: var(--text-dim); margin: 0; } .craft-io-hint.is-error{ color: #ff6b6b; } .craft-io-hint.is-success{ color: #6ee7b7; } /* ---- CRAFT PANEL (inline, expands below the button — not a modal) ---- */ .craft-panel{ display: none; position: absolute; top: calc(100% + 12px); left: 0; right: 0; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-radius: var(--radius); min-height: 300px; z-index: 20; box-shadow: 0 12px 28px rgba(0,0,0,0.35); transition: border-color .2s ease, border-width .2s ease, box-shadow .2s ease; } .craft-panel[data-rarity="common"]{ border-color: #f2f2f2; border-width: 2px; } .craft-panel[data-rarity="rare"]{ border-color: #3b82f6; border-width: 2px; } .craft-panel[data-rarity="epic"]{ border-color: #a463f2; border-width: 2px; } .craft-panel[data-rarity="legendary"]{ border-color: #ff9a3c; border-width: 3px; animation: breathe-panel-legendary 3.2s ease-in-out infinite; } .craft-panel[data-rarity="mythic"]{ border-color: #ff4d4d; border-width: 3px; animation: breathe-panel-mythic 2.8s ease-in-out infinite; } @keyframes breathe-panel-legendary{ 0%, 100%{ box-shadow: 0 0 14px 1px rgba(255,154,60,0.30), 0 12px 28px rgba(0,0,0,0.35); } 50%{ box-shadow: 0 0 28px 3px rgba(255,154,60,0.65), 0 12px 28px rgba(0,0,0,0.35); } } @keyframes breathe-panel-mythic{ 0%, 100%{ box-shadow: 0 0 15px 1px rgba(255,77,77,0.35), 0 12px 28px rgba(0,0,0,0.35); } 50%{ box-shadow: 0 0 30px 3px rgba(255,77,77,0.80), 0 12px 28px rgba(0,0,0,0.35); } } .craft-panel.open{ display:block; } .craft-row-3.stats-hidden{ display: none; } .craft-panel-placeholder{ display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 10px; text-align:center; color: var(--text-dim); padding: 30px 14px; min-height: 300px; } .craft-panel-placeholder .glyph{ font-size: 26px; color: var(--panel-border-hover); } .craft-panel-placeholder .msg-main{ font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mid); } .craft-panel-placeholder .msg-sub{ font-size: 10px; letter-spacing: 0.05em; } /* ---- CRAFT FORM ---- */ .craft-form{ display:flex; flex-direction: column; gap: 16px; padding: 18px 20px 22px; } .craft-field{ display:flex; flex-direction: column; gap: 6px; min-width: 0; } .craft-label{ font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mid); } .craft-input{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em; padding: 10px 12px; outline: none; transition: border-color .15s ease; width: 100%; } .craft-input::placeholder{ color: var(--text-dim); } .craft-input:focus{ border-color: var(--name-color, var(--accent)); } .craft-input:disabled{ opacity: .5; cursor: not-allowed; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); } /* ---- FIXED AFFIX SLOTS (Health / Defense) — identical styling for both ---- */ .craft-affix-locked-tag{ color: var(--name-color, var(--accent)); font-size: 9px; letter-spacing: 0.1em; margin-left: 6px; opacity: .85; } .craft-affix-fixed-value{ display:flex; align-items:center; background: var(--panel-grad-b); border-style: dashed; color: var(--text-mid); cursor: not-allowed; user-select: none; } .craft-row-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } .craft-row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .craft-affixes{ display:flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--panel-border); } .craft-affixes-label{ margin-top: 6px; } .craft-affix-list{ display:flex; flex-direction: column; gap: 10px; } .craft-affix-empty{ font-size: 10px; letter-spacing: 0.05em; color: var(--text-dim); padding: 4px 0 2px; } /* ---- CUSTOM COMBO (styled dropdown, matches site chrome) ---- */ .craft-combo{ position: relative; } .craft-combo .craft-input{ padding-right: 30px; cursor: pointer; } .combo-arrow{ position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 9px; color: var(--text-dim); pointer-events: none; transition: transform .15s ease, color .15s ease; } .craft-combo.open .combo-arrow{ transform: translateY(-50%) rotate(180deg); color: var(--name-color, var(--accent)); } .craft-combo.locked .craft-input{ cursor: not-allowed; } .craft-combo.locked .combo-arrow{ opacity: .3; } .combo-dropdown{ display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 190px; overflow-y: auto; background: var(--panel); border: 1px solid var(--panel-border-hover); border-radius: var(--radius); z-index: 40; box-shadow: 0 10px 24px rgba(0,0,0,0.4); } .craft-combo.open .combo-dropdown{ display: block; } .combo-option{ padding: 8px 12px; font-size: 11px; letter-spacing: 0.03em; color: var(--text-bright); cursor: pointer; transition: background .1s ease; } .combo-option:hover, .combo-option.active{ background: var(--panel-border); } .combo-option.selected{ color: var(--name-color, var(--accent)); } .combo-option.disabled{ color: var(--text-dim); cursor: not-allowed; display: flex; align-items: center; justify-content: space-between; gap: 8px; opacity: .55; } .combo-option.disabled:hover{ background: transparent; } .combo-option-tag{ font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 1px 5px; flex-shrink: 0; } .combo-empty{ padding: 8px 12px; font-size: 10px; letter-spacing: 0.05em; color: var(--text-dim); font-style: italic; } /* ---- LEGENDARY / MYTHIC EFFECT FIELDS ---- */ .craft-effects{ display: flex; flex-direction: column; gap: 16px; } .craft-effects:empty{ display: none; } .craft-effect-field{ display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--panel-border); } .craft-effect-label{ font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .craft-effect-label.is-legendary{ color: #ff9a3c; } .craft-effect-label.is-mythic{ color: #ff4d4d; } .craft-effect-textarea{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em; padding: 10px 12px; outline: none; resize: none; overflow: hidden; min-height: 56px; width: 100%; transition: border-color .15s ease, height .1s ease; } .craft-effect-textarea::placeholder{ color: var(--text-dim); } .craft-effect-textarea:focus{ border-color: var(--name-color, var(--accent)); } .craft-effect-textarea:disabled{ opacity: .5; cursor: not-allowed; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); } .craft-effect-field.is-legendary .craft-effect-textarea:focus{ border-color: #ff9a3c; } .craft-effect-field.is-mythic .craft-effect-textarea:focus{ border-color: #ff4d4d; } /* ---- CRAFT FORM: REFORGE CHECKBOX ---- */ .craft-reforge-row{ display: flex; align-items: center; gap: 8px; padding-top: 4px; } .craft-reforge-checkbox{ width: 15px; height: 15px; accent-color: var(--name-color, var(--accent)); cursor: pointer; flex-shrink: 0; } .craft-reforge-checkbox:disabled{ cursor: not-allowed; opacity: .5; } .craft-reforge-label{ font-size: 11px; letter-spacing: 0.05em; color: var(--text-bright); cursor: pointer; user-select: none; } .craft-reforge-hint{ font-size: 9px; letter-spacing: 0.04em; color: var(--text-dim); margin: 0 0 0 23px; } .craft-affix-reforge-target .craft-combo{ border-radius: var(--radius); box-shadow: 0 0 0 1px #5ee7ff; } .craft-affix-reforge-target .craft-label{ color: #5ee7ff; } .craft-affix-field{ position: relative; } .craft-affix-pick-btn{ display: none; align-items: center; gap: 4px; margin-top: 4px; background: transparent; border: 1px solid rgba(94, 231, 255, 0.4); color: #5ee7ff; border-radius: var(--radius); font-family: var(--font-body); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; cursor: pointer; transition: background .15s ease, opacity .15s ease; } .craft-affix-pick-btn:hover{ background: rgba(94, 231, 255, 0.12); } .craft-affix-field.reforge-pickable .craft-affix-pick-btn{ display: inline-flex; } .craft-affix-field.craft-affix-reforge-target .craft-affix-pick-btn{ display: inline-flex; background: rgba(94, 231, 255, 0.18); opacity: .9; } /* Pairs each affix's selector/fixed-value with its own Value input on the same row: affix takes the remaining space, Value stays a fixed narrow column. */ .craft-affix-row{ display:flex; align-items: center; gap: 8px; } .craft-affix-row > .craft-combo, .craft-affix-row > .craft-affix-fixed-value{ flex: 1; min-width: 0; } .craft-affix-value-input{ flex: 0 0 72px; text-align: center; } /* ---- CRAFT SUBMIT ---- */ .craft-submit-row{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 6px; border-top: 1px solid var(--panel-border); } .craft-submit-hint{ margin: 0; font-size: 10px; letter-spacing: 0.04em; color: #ff8080; min-height: 12px; } .craft-submit-actions{ display:flex; gap: 10px; } .craft-cancel-btn{ background: transparent; border: 1px solid var(--panel-border); color: var(--text-mid); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; transition: border-color .15s ease, color .15s ease; } .craft-cancel-btn:hover{ border-color: var(--panel-border-hover); color: var(--text-bright); } .craft-submit-btn{ background: var(--name-color, var(--accent)); border: 1px solid var(--name-color, var(--accent)); color: var(--bg); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; transition: opacity .15s ease; } .craft-submit-btn:hover{ opacity: .85; } /* ---- BUILT ITEM ROWS (rendered inside .items-list after crafting) ---- */ .built-item-row{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); cursor: default; min-width: 0; max-width: 100%; position: relative; overflow: hidden; } .built-item-remove{ flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease, border-color .15s ease, color .15s ease; } .built-item-row:hover .built-item-remove{ opacity: 1; } .built-item-remove:hover{ color: #ff6b6b; border-color: #ff6b6b; } .built-item-row:last-child{ border-bottom: none; } .built-item-icon{ width: 28px; height: 28px; flex-shrink: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; background-color: var(--text-bright); transition: background-color .15s ease; } .built-item-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .built-item-name{ font-size: 11px; letter-spacing: 0.03em; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .built-item-meta{ font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .built-item-score{ font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .built-item-row[data-rarity="common"] .built-item-icon{ background-color: #f2f2f2; } .built-item-row[data-rarity="common"] .built-item-name{ color: #f2f2f2; } .built-item-row[data-rarity="rare"] .built-item-icon{ background-color: #3b82f6; } .built-item-row[data-rarity="rare"] .built-item-name{ color: #6ea8ff; } .built-item-row[data-rarity="epic"] .built-item-icon{ background-color: #a463f2; } .built-item-row[data-rarity="epic"] .built-item-name{ color: #c298ff; } .built-item-row[data-rarity="legendary"] .built-item-icon{ background-color: #ff9a3c; filter: drop-shadow(0 0 3px rgba(255,154,60,0.6)); } .built-item-row[data-rarity="legendary"] .built-item-name{ color: #ff9a3c; text-shadow: 0 0 4px rgba(255,154,60,0.5); } .built-item-row[data-rarity="mythic"] .built-item-icon{ background-color: #ff4d4d; filter: drop-shadow(0 0 5px rgba(255,77,77,0.75)) drop-shadow(0 0 11px rgba(255,77,77,0.4)); } .built-item-row[data-rarity="mythic"] .built-item-name{ color: #ff4d4d; text-shadow: 0 0 6px rgba(255,77,77,0.75), 0 0 13px rgba(255,77,77,0.4); } .built-item-effect{ font-size: 9px; letter-spacing: 0.04em; font-style: italic; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .built-item-row[data-rarity="legendary"] .built-item-effect{ color: #d99757; } .built-item-row[data-rarity="mythic"] .built-item-effect{ color: #e26363; } /* ---- REFORGED STATUS TAG ---- */ .reforged-tag{ display: inline-block; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 1px 6px; border-radius: var(--radius); color: #5ee7ff; background: rgba(94, 231, 255, 0.12); border: 1px solid rgba(94, 231, 255, 0.35); white-space: nowrap; } /* ---- EMPTY AFFIXES WARNING TAG ---- */ .no-affixes-tag{ display: inline-block; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 1px 6px; border-radius: var(--radius); color: #ff9a3c; background: rgba(255, 154, 60, 0.12); border: 1px solid rgba(255, 154, 60, 0.4); white-space: nowrap; } /* ---- CATALOG ROWS (predefined Legendary/Mythic items, dblclick to craft) ---- */ .catalog-item-row{ cursor: pointer; transition: background-color .15s ease; } .catalog-item-row:hover{ background-color: rgba(255,255,255,0.04); } .items-list-empty{ padding: 14px 12px; font-size: 10px; letter-spacing: 0.05em; color: var(--text-dim); } /* ---- QUALITY TAGS (shown in item list meta line) ---- */ .quality-tag{ font-weight: 600; } .quality-tag[data-tier="godroll"]{ color: #ff9a3c; text-shadow: 0 0 6px rgba(255,154,60,0.75), 0 0 12px rgba(255,154,60,0.35); } .quality-tag[data-tier="perfect"]{ color: #c298ff; text-shadow: 0 0 4px rgba(164,99,242,0.5); } .quality-tag[data-tier="excellent"]{ color: #5ea8ff; } .quality-tag[data-tier="good"]{ color: #79f28c; } .quality-tag[data-tier="common"]{ color: #f2f2f2; } .quality-tag[data-tier="broken"]{ color: #8a8a8a; } @media (max-width: 560px){ .craft-row-2, .craft-row-3{ grid-template-columns: 1fr; } } @media (max-width: 980px){ .items-columns{ grid-template-columns: 1fr; } .items-left-group{ flex-direction: column; } .items-column, .items-stack, .items-craft-column{ max-width: none; } .items-list{ min-height: 280px; } .items-list-stack{ min-height: 160px; } } /* ---- GLOSSARY VIEW ---- */ .glossary-page{ max-width: 980px; margin: 0 auto; } .glossary-search-row{ margin-bottom: 20px; } .glossary-search{ width: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.03em; padding: 12px 16px; outline: none; transition: border-color .15s ease; } .glossary-search::placeholder{ color: var(--text-dim); } .glossary-search:focus{ border-color: var(--name-color, var(--accent)); } .glossary-sections{ display:flex; flex-direction: column; gap: 14px; } /* Top-level chapter accordion (1. Core Stats, 2. Status Effects, ...) */ .gl-chapter{ border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-radius: var(--radius); overflow: hidden; } .gl-chapter-head{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; user-select: none; } .gl-chapter-title{ font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-bright); margin: 0; } .gl-chapter-count{ font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); margin-left: 10px; } .gl-chapter-arrow{ color: var(--text-dim); font-size: 11px; transition: transform .2s ease; flex-shrink: 0; } .gl-chapter.open .gl-chapter-arrow{ transform: rotate(180deg); color: var(--name-color, var(--accent)); } .gl-chapter-body{ display: none; padding: 0 20px 18px; border-top: 1px solid var(--panel-border); } .gl-chapter.open .gl-chapter-body{ display: block; padding-top: 14px; } .gl-chapter-intro{ font-size: 10px; color: var(--text-dim); line-height: 1.6; margin: 0 0 14px; } /* Individual entry accordion (a single stat, status effect, or item) */ .gl-entries{ display:flex; flex-direction: column; gap: 8px; } .gl-entry{ border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel); overflow: hidden; } .gl-entry-head{ display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; } .gl-entry-name{ font-size: 11px; letter-spacing: 0.04em; color: var(--text-bright); } .gl-entry-meta{ font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-left: 8px; } .gl-entry-tag{ font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius); border: 1px solid var(--panel-border-hover); color: var(--text-dim); white-space: nowrap; margin-left: 14px; } .gl-entry-tag.tag-bleed{ color: #ff4444; border-color: #7a1a1a; } .gl-entry-tag.tag-burn{ color: #ff9a3c; border-color: #7a4a12; } .gl-entry-tag.tag-crit{ color: #ff8c78; border-color: #7a3a2c; } .gl-entry-tag.tag-execute{ color: #b32020; border-color: #5c1010; } .gl-entry-tag.tag-fire{ color: #ff9a3c; border-color: #7a4a12; } .gl-entry-tag.tag-frost{ color: #7fd8ff; border-color: #1f5a70; } .gl-entry-tag.tag-holy{ color: #fff6a8; border-color: #7a7020; } .gl-entry-tag.tag-lightning{ color: #ffe94d; border-color: #7a6f12; } .gl-entry-tag.tag-neutral{ color: #f2f2f2; border-color: #555559; } .gl-entry-tag.tag-poison{ color: #4dd672; border-color: #1e5c30; } .gl-entry-tag.tag-shadow{ color: #b478f2; border-color: #4a2a70; } .gl-entry-tag.tag-thorns{ color: #a3a3a3; border-color: #555555; } .gl-entry-tag.tag-vampire{ color: #9c1f3f; border-color: #4a0f1e; } .gl-entry-arrow{ color: var(--text-dim); font-size: 10px; transition: transform .2s ease; flex-shrink: 0; } .gl-entry.open .gl-entry-arrow{ transform: rotate(180deg); color: var(--name-color, var(--accent)); } .gl-entry-body{ display:none; padding: 0 14px 14px; font-size: 11px; line-height: 1.6; color: var(--text-mid); } .gl-entry.open .gl-entry-body{ display:block; } .gl-entry-body p{ margin: 0 0 8px; } .gl-entry-body p:last-child{ margin-bottom: 0; } .gl-entry-label{ font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); display:block; margin-bottom: 3px; } /* Simple data table used inside chapters 5 & 6 */ .gl-table{ width: 100%; border-collapse: collapse; font-size: 10px; margin-bottom: 14px; } .gl-table th{ text-align:left; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 6px 10px; border-bottom: 1px solid var(--panel-border); } .gl-table td{ padding: 7px 10px; color: var(--text-mid); border-bottom: 1px solid var(--panel-border); } .gl-table tr:last-child td{ border-bottom: none; } .gl-table-title{ font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px; } .gl-no-results{ text-align:center; padding: 30px 10px; color: var(--text-dim); font-size: 11px; letter-spacing: 0.05em; } .footer-note{ text-align:center; margin-top: 40px; font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; } .footer-note.site-disclaimer{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: none; margin: 0; padding: 10px 24px; background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%); border-top: 1px solid var(--panel-border); text-transform: none; letter-spacing: 0.02em; font-size: 11px; } @media (max-width: 820px){ .build-layout{ grid-template-columns: 1fr; } .slot-column{ flex-direction: row; flex-wrap: wrap; justify-content: center; } .slot{ width: 110px; } .center-panel{ order: -1; min-height: auto; padding-bottom: 30px; } } /* ========================================================= OPTIONS MODAL ========================================================= */ .modal-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 100; overflow-y: auto; } .modal-overlay.open{ display:flex; } .modal{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); width: 100%; max-width: 560px; padding: 26px 28px 30px; color: var(--text-mid); font-family: var(--font-body); } .modal-header{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 22px; } .modal-title{ font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-bright); margin: 0; } .modal-close{ background: none; border: 1px solid var(--panel-border); color: var(--text-dim); width: 26px; height: 26px; border-radius: var(--radius); cursor: pointer; font-size: 13px; line-height: 1; display:flex; align-items:center; justify-content:center; } .modal-close:hover{ color: var(--text-bright); border-color: var(--panel-border-hover); } .modal-choice-row{ display: flex; gap: 12px; } .modal-choice-btn{ flex: 1; background: transparent; border: 1px solid var(--panel-border); color: var(--text-bright); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 24px 14px; border-radius: var(--radius); cursor: pointer; text-align: center; transition: background .15s ease, border-color .15s ease; } .modal-choice-btn:hover{ background: rgba(255,255,255,0.06); border-color: var(--name-color, var(--accent)); } .opt-section{ margin-bottom: 22px; } .opt-section:last-child{ margin-bottom: 0; } .opt-section-title{ font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; } .opt-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .opt-grid.cols-3{ grid-template-columns: repeat(3, 1fr); } .opt-card{ position: relative; background: #0000; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; text-align:left; color: var(--text-mid); font-family: var(--font-body); transition: border-color .15s ease; display:flex; flex-direction: column; gap: 8px; } .opt-card:hover{ border-color: var(--panel-border-hover); } .opt-card.selected{ border-color: var(--name-color, var(--accent)); } .opt-swatch{ height: 20px; border-radius: var(--radius); background: linear-gradient(90deg, #1a1a1e 0%, #1a1a1e 68%, var(--swatch-accent, #f4c430) 68%, var(--swatch-accent, #f4c430) 100%); } .opt-swatch.border-only{ background: linear-gradient(90deg, transparent 0%, transparent 68%, var(--swatch-accent, #f4c430) 68%, var(--swatch-accent, #f4c430) 100%); border: 1px solid var(--swatch-border, var(--panel-border)); } .opt-swatch.lshape-preview{ background: none; border: none; position: relative; height: 22px; } .opt-swatch.lshape-preview::before, .opt-swatch.lshape-preview::after{ content:""; position:absolute; width: 9px; height: 9px; border: 1px solid var(--swatch-accent, #f4c430); } .opt-swatch.lshape-preview::before{ top:0; left:0; border-right:none; border-bottom:none; } .opt-swatch.lshape-preview::after{ bottom:0; right:0; border-left:none; border-top:none; } .opt-card-label{ font-size: 11px; letter-spacing: 0.05em; color: var(--text-bright); } .opt-card-sub{ font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: -4px; } .opt-card.selected .opt-card-sub{ color: var(--name-color, var(--accent)); } .name-dot-row{ display:flex; align-items:center; gap: 8px; } .name-dot{ width: 10px; height:10px; border-radius: 50%; background: var(--dot-color, #fff); flex-shrink:0; } /* Podgląd w sekcji Font Color ma zawsze pokazywać swój własny kolor, niezależnie od tego, który Font Color jest aktualnie wybrany. */ .name-dot-row .opt-card-label{ color: var(--dot-color, var(--text-bright)) !important; } .opt-card.bloodweb-card, .opt-card.blood-name{ border-color: #7a1a1a99; } .opt-card.bloodweb-card .opt-card-label, .opt-card.blood-name .opt-card-label{ color: #ff5b5b; } .opt-card.bloodweb-card.selected, .opt-card.blood-name.selected{ border-color: #ff3b3b; } /* ---- ACCOUNT / LOGIN (Options modal) ---- */ .login-row{ display: flex; gap: 8px; } .login-input{ flex: 1 1 auto; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 8px 10px; font-size: 11px; color: var(--text-bright); font-family: var(--font-body); } .login-input:focus{ border-color: var(--name-color, var(--accent)); outline: none; } .login-btn{ flex-shrink: 0; background: transparent; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 8px 14px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-bright); cursor: pointer; font-family: var(--font-body); transition: border-color .15s ease, opacity .15s ease; } .login-btn:hover{ border-color: var(--panel-border-hover); } .login-status{ font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 8px 0 0; } .login-status.is-error{ color: #ff6b6b; } .login-status.is-ok{ color: #79f28c; } .logout-btn{ width: 100%; margin-top: 8px; background: transparent; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 8px 12px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; font-family: var(--font-body); } .logout-btn:hover{ color: #ff6b6b; border-color: #ff6b6b; } /* ---- DATABASE PAGE (Legendary / Mythic catalog editor) ---- */ .db-page{ max-width: 1180px; margin: 0 auto; } .db-page-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .db-page-header .logout-btn{ width: auto; margin-top: 0; } .db-tabs{ display: flex; gap: 8px; margin-bottom: 18px; } .db-tab{ flex: 1 1 auto; background: transparent; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 9px 10px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; font-family: var(--font-body); transition: border-color .15s ease, color .15s ease; } .db-tab:hover{ border-color: var(--panel-border-hover); } .db-tab.active[data-rarity="Legendary"]{ color: #ff9a3c; border-color: #7a4a12; } .db-tab.active[data-rarity="Mythic"]{ color: #ff4d4d; border-color: #7a1a1a; } .db-list{ display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; } .db-row{ display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--panel-border); border-radius: var(--radius); } .db-row-main{ display: grid; grid-template-columns: 130px 1.6fr 1fr 1fr auto; gap: 8px; align-items: center; } .db-row-main .db-delete-btn{ justify-self: start; } .db-effect-desc{ margin-top: 10px; padding: 10px 12px; background: var(--panel-grad-b); border: 1px dashed var(--panel-border); border-radius: var(--radius); font-size: 10px; line-height: 1.55; color: var(--text-mid); } .db-effect-desc p{ margin: 0 0 6px; } .db-effect-desc p:last-child{ margin-bottom: 0; } .db-effect-desc-label{ display:block; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; } .db-effect-desc-empty{ color: var(--text-dim); font-style: italic; } .db-affixes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--panel-border); } .db-affixes-empty{ font-size: 9px; letter-spacing: 0.05em; color: var(--text-dim); margin-top: 8px; } .db-affix-field{ display:flex; align-items:center; gap: 6px; } .db-affix-index{ flex-shrink: 0; width: 16px; text-align:center; font-size: 9px; color: var(--text-dim); } .db-affix-combo{ flex: 1; min-width: 0; } .db-affix-combo .craft-input{ font-size: 10px; padding: 7px 8px; } .db-affix-fixed-value{ flex: 1; display:flex; align-items:center; gap: 6px; background: var(--panel-grad-b); border-style: dashed; color: var(--text-dim); cursor: not-allowed; user-select: none; font-size: 9px; } .db-affix-input{ font-size: 9px; } .db-input, .db-select{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 7px 8px; font-size: 10px; color: var(--text-bright); font-family: var(--font-body); min-width: 0; width: 100%; } .db-input:focus, .db-select:focus{ border-color: var(--name-color, var(--accent)); outline: none; } .db-delete-btn{ flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .db-delete-btn:hover{ color: #ff6b6b; border-color: #ff6b6b; } .db-empty{ padding: 14px 12px; font-size: 10px; letter-spacing: 0.05em; color: var(--text-dim); } .db-add-row{ display: flex; gap: 10px; } .db-add-row .login-btn{ flex: 1 1 auto; text-align: center; } .db-hint{ font-size: 9px; letter-spacing: 0.06em; color: var(--text-dim); margin: 10px 0 0; } @media (max-width: 900px){ .db-row-main{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .db-row-main{ grid-template-columns: 1fr; } .db-row-main .db-delete-btn{ width: 100%; height: 30px; justify-self: stretch; } .db-affixes{ grid-template-columns: 1fr; } }