/* Background safety-net: Some browsers can "drop" the body background-image while scrolling when using background-attachment: fixed. When that happens, the background becomes visible (often as a flat color). We paint the same background on as a fallback so the artwork never gets covered. */ html{ background: #0b0e14; background-image: url("../img/bg.jpg"); background-size: cover; background-position: center top; background-attachment: fixed; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; } :root{ --panel-bg: rgba(10, 12, 18, 0.95); --panel-bg-strong: rgba(10, 12, 18, 0.99); --border: rgba(255, 255, 255, 0.10); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.72); --accent: rgba(255, 200, 80, 0.95); --shadow: 0 18px 60px rgba(0,0,0,0.55); --radius: 18px; --max: 1200px; --max-wide: 1400px; } .panel.character{ background: rgba(10, 12, 18, 0.75); box-shadow: none; border: none; } *{ box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background-image: url("../img/bg.jpg"); background-size: cover; background-position: center top; background-attachment: fixed; overflow-x: hidden; overflow-y: scroll; } /* Prevent wide media from forcing horizontal scroll on small screens */ img, video, canvas, svg{ max-width: 100%; height: auto; } .overlay{ min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 20% 10%, rgba(0,0,0,0.25), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); } .overlay > main{ flex: 1 0 auto; } /* TOP MENU */ header{ position: relative; z-index: 50; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(10, 12, 18, 0.55); border-bottom: 1px solid var(--border); } /* Fixed vote banner (used on homepage) */ .vote-banner{ position: fixed; top: 0; right: 0; z-index: 999; display: block; line-height: 0; } .vote-banner img{ display: block; width: 98px; /* 30% smaller */ height: auto; border-bottom-left-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); } .nav{ max-width: var(--max); margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* Brand + (mobile) menu button wrapper */ .nav-head{ display:flex; align-items:center; gap: 12px; } /* Mobile menu toggle button (hidden on desktop) */ .nav-toggle{ display:none; align-items:center; justify-content:center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; user-select: none; } .nav-toggle:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); } /* Hamburger icon inside the mobile menu button */ .nav-toggle-icon{ position: relative; width: 18px; height: 12px; display: inline-block; flex: 0 0 auto; } .nav-toggle-icon:before, .nav-toggle-icon:after, .nav-toggle-icon{ --bar-h: 2px; } .nav-toggle-icon:before, .nav-toggle-icon:after{ content: ""; position: absolute; left: 0; right: 0; height: var(--bar-h); background: currentColor; border-radius: 999px; opacity: .92; } .nav-toggle-icon:before{ top: 0; } .nav-toggle-icon:after{ bottom: 0; } .nav-toggle-icon{ background: linear-gradient(currentColor, currentColor); background-size: 100% var(--bar-h); background-repeat: no-repeat; background-position: 0 50%; border-radius: 999px; opacity: .92; } .brand{ display: flex; align-items: center; } .brand img{ height: 88px; /* zmieĹ„ jeĹ›li trzeba */ width: auto; display: block; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6)); } .nav ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; justify-content: flex-end; width: 100%; max-width: 520px; } /* ZMIANA: stylujemy tylko linki w menu (ul), nie logo */ .nav ul a{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); border: 1px solid transparent; transition: transform .12s ease, background .12s ease, border-color .12s ease; background: rgba(255,255,255,0.06); justify-content: center; min-height: 44px; } .nav ul a.is-placeholder{ opacity: .76; border-style: dashed; pointer-events: none; cursor: default; } /* ZMIANA: hover tylko dla linkĂłw menu */ .nav ul a:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.10); } /* ZMIANA: CTA tylko dla linku w menu */ .nav ul .cta{ background: rgba(255, 200, 80, 0.14); border-color: rgba(255, 200, 80, 0.35); } .nav ul .cta:hover{ background: rgba(255, 200, 80, 0.20); border-color: rgba(255, 200, 80, 0.45); } /* MAIN LAYOUT */ main{ max-width: var(--max); margin: 0 auto; padding: 22px 18px 28px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px; } .item-page-main{ display: block; width: 100%; } .item-page-main > .panel{ display: block; width: 100% !important; min-width: 100%; max-width: 100%; } .item-page-main > .panel + .panel{ margin-top: 18px; } /* Wider layout (used by account panels) */ main.wide{ max-width: var(--max-wide); } /* Account dashboard */ .account-grid{ display: grid; /* 20% narrower sidebar to give more space to the right panel */ grid-template-columns: 272px 1fr; gap: 16px; align-items: start; } .account-sidebar .title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 0 0 12px; } .account-sidebar .title h2{ margin:0; font-size:22px; } .account-sidebar .email{ font-size: 18px; font-weight: 700; word-break: break-word; } .account-sidebar .meta{ margin-top: 8px; color: var(--muted); font-size: 13px; } .account-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; } /* Account sidebar menu (dashboard) */ .account-coins{ margin-top: 12px; /* remove the golden pill background; keep only the content */ padding: 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius: 0; font-weight: 900; line-height: 1.1; color: rgba(255, 220, 140, 0.98); background: transparent; border: 0; box-shadow: none; font-size: 16px; } .account-coins .coins-label{ display:flex; align-items:center; gap:8px; letter-spacing: .2px; color: rgba(255, 186, 90, 0.95); } /* Icon for Genesis Coins (replaces the âś¦ symbol) */ .account-coins .coins-icon{ width: 16px; height: 16px; display:inline-block; transform: translateY(-1px); } .account-coins .coins-value{ padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.12); color: rgba(255, 220, 140, 0.98); min-width: 64px; text-align:center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .account-coins-link{ display:block; margin-top: 6px; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, 0.82); opacity: .95; } .account-coins-link .account-coins-link-icon{ display:inline-flex; align-items:center; justify-content:center; margin-right: 6px; transform: translateY(1px); } .account-coins-link .account-coins-link-icon svg{ width: 14px; height: 14px; fill: currentColor; opacity: .95; } .account-coins-link:hover{ opacity: 1; text-decoration: underline; color: rgba(255, 255, 255, 0.95); } /* Simple modal (in-page, adblock-safe) */ .modal{ position: fixed; inset: 0; z-index: 9999; } .modal-overlay{ position:absolute; inset:0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); } .modal-card{ position: relative; max-width: 560px; width: calc(100% - 28px); margin: 80px auto 20px; padding: 16px 16px 18px; border-radius: 18px; background: rgba(20,20,24,0.96); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 60px rgba(0,0,0,0.55); } .account-menu{ margin-top: 72px; display:flex; flex-direction: column; gap: 12px; } .account-menu-item{ display:flex; align-items:center; justify-content:flex-start; gap: 12px; padding: 18px 14px; border-radius: 14px; text-decoration:none; font-weight: 900; letter-spacing: .3px; text-transform: none; /* non-active items should be white-ish; active stays yellow */ color: rgba(255, 255, 255, 0.86); background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 28px rgba(0,0,0,0.35); transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease; } .account-menu-icon{ width: 20px; height: 20px; display:flex; align-items:center; justify-content:center; flex: 0 0 20px; opacity: 0.92; } .account-menu-svg{ width: 20px; height: 20px; display:block; } .account-menu-text{ display:block; line-height: 1; } .account-menu-item:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); filter: brightness(1.03); } .account-menu-item.is-active{ color: rgba(255, 186, 90, 0.95); border-color: rgba(255, 200, 80, 0.42); background: rgba(255, 200, 80, 0.10); } .account-menu-item.is-danger{ color: rgba(255, 170, 170, 0.98); border-color: rgba(255, 80, 80, 0.28); background: rgba(255, 80, 80, 0.06); } .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;} .panel-head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .list{ display:grid; gap:10px; margin-top: 10px; } .list-item{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.10); text-decoration:none; color: var(--text); transition: transform .12s ease, background .12s ease, border-color .12s ease; } .list-item:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); } .list-item .name{ font-weight: 800; letter-spacing: .2px; } .list-item .sub{ color: var(--muted); font-size: 12px; margin-top: 2px; } /* Account accordion (panel -> expandable game accounts) */ .acc-list{ display:grid; gap:10px; margin-top: 10px; } details.acc-item{ border-radius: 16px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; } details.acc-item[open]{ border-color: rgba(255,255,255,0.16); } details.acc-item summary{ list-style: none; cursor: pointer; display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 14px; user-select: none; } details.acc-item summary::-webkit-details-marker{ display:none; } .acc-summary-left{ display:flex; align-items:center; gap:10px; } .acc-chevron{ opacity:.8; transform: translateY(1px); } details.acc-item[open] .acc-chevron{ transform: rotate(90deg) translateX(1px); } .acc-summary-right{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; justify-content:flex-end; } .acc-body{ padding: 0 14px 14px; } .acc-body .table{ margin-top: 6px; width: 100%; } .badge-pill{ padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text); white-space: nowrap; } .badge-pill.active{ border-color: rgba(120,255,180,.45); background: rgba(120,255,180,.10); color: rgba(120,255,180,.95); font-weight: 800; letter-spacing: .2px; } .list-item.banned{ border-color: rgba(255, 70, 70, 0.55); background: rgba(255, 70, 70, 0.07); } .list-item.banned .name{ color: rgba(255, 90, 90, 0.96); text-decoration: line-through; } .badge-pill.banned{ border-color: rgba(255, 70, 70, 0.6); background: rgba(255, 70, 70, 0.12); color: rgba(255, 170, 170, 0.98); font-weight: 800; } .cta-card{ padding: 16px; border-radius: 18px; background: rgba(255, 200, 80, 0.08); border: 1px solid rgba(255, 200, 80, 0.24); } .cta-card h3{ margin: 0 0 6px; } .cta-card p{ margin: 0 0 12px; color: var(--muted); } /* Characters table */ .table{ width: 80%; border-collapse: collapse; margin-top: 10px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22); } .table th, .table td{ padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; font-size: 14px; } .table th{ color: rgba(255,255,255,0.78); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } .table tr:last-child td{ border-bottom: none; } .btn[disabled], button.btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none !important; } @media (max-width: 980px){ main.wide{ max-width: var(--max); } .account-grid{ grid-template-columns: 1fr; } } /* ===== HOME: Position 1 countdown + Positions 2/3 cards ===== */ .home-countdown{ /* no big "pill" container â€“ only spacing */ margin-top: -6px; margin-bottom: 10px; padding: 0; border: none; background: none; box-shadow: none; border-radius: 0; } .home-countdown .hc-wrap{ padding: 16px 8px; text-align: center; display:flex; flex-direction: column; align-items: center; gap: 10px; } .hc-eyebrow{ font-size: 11px; text-transform: uppercase; letter-spacing: .55px; color: rgba(255,255,255,.75); } .hc-eyebrow--main{ font-size: 16px; font-weight: 900; letter-spacing: .65px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.78); border: 1px solid rgba(255,255,255,0.14); text-shadow: 0 8px 20px rgba(0,0,0,0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .hc-timer{ margin-top: 10px; display:flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap; } .hc-unit{ min-width: 108px; padding: 14px 14px 12px; text-align:center; border-radius: 18px; /* more solid squares */ /* even less transparency for better readability on bright backgrounds */ background: rgba(0,0,0,0.78); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .hc-num{ font-size: 38px; font-weight: 900; letter-spacing: .8px; color: var(--accent); text-shadow: 0 0 18px rgba(255,200,80,.20); } .hc-lbl{ margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .55px; color: rgba(255,255,255,.70); } .hc-foot{ margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.80); padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,0.78); border: 1px solid rgba(255,255,255,0.14); text-shadow: 0 8px 20px rgba(0,0,0,0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .home-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; margin-bottom: 18px; } .home-uptime{ position: relative; overflow: hidden; background: radial-gradient(900px 220px at 20% 0%, rgba(90,200,255,.16), rgba(0,0,0,0) 60%), radial-gradient(900px 220px at 90% 0%, rgba(255,200,80,.12), rgba(0,0,0,0) 62%), var(--panel-bg); } .home-uptime:before{ content:""; position:absolute; inset:-2px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0)); pointer-events:none; opacity:.35; } .hu-eyebrow{ position: relative; font-size: 11px; text-transform: uppercase; letter-spacing: .55px; color: rgba(255,255,255,.72); } .hu-title{ position: relative; margin-top: 6px; font-size: 18px; font-weight: 900; letter-spacing: .2px; } .hu-title--center{ text-align: center; margin-top: 0; } .hc-timer--uptime{ margin-top: 12px; } .hu-cta{ margin-top: 14px; display:flex; justify-content:center; } .hu-cta .btn{ padding: 11px 16px; border-radius: 16px; font-weight: 700; } .hu-value{ position: relative; margin-top: 14px; font-size: 34px; font-weight: 900; letter-spacing: .6px; line-height: 1.15; text-shadow: 0 0 22px rgba(90,200,255,.12), 0 0 18px rgba(255,200,80,.12); } .hu-foot{ position: relative; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.70); } /* Center helper for status messages (e.g. uptime disabled) */ .hu-foot.hu-foot--centered{ display:flex; align-items:center; justify-content:center; text-align:center; min-height: 34px; } .home-news{ text-decoration:none; color: inherit; display:block; } .home-news:hover{ border-color: rgba(255,255,255,0.20); } .hn-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; } .hn-title{ font-size: 16px; font-weight: 700; } .hn-sub{ margin-top: 6px; color: var(--muted); font-size: 13px; } .hn-body{ display:grid; grid-template-columns: 120px 1fr; gap: 14px; margin-top: 14px; } .hn-img{ width:120px; height:120px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(255,255,255,0.10); } .hn-headline{ font-size: 15px; font-weight: 800; line-height: 1.25; } .hn-date{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.65); } .hn-excerpt{ margin-top: 10px; color: rgba(255,255,255,.78); line-height: 1.45; font-size: 13px; } .hn-empty, .hn-error{ margin-top: 14px; color: var(--muted); } @media (max-width: 980px){ .home-countdown .hc-wrap{ padding: 20px 14px; } .hc-unit{ min-width: 140px; } .home-row{ grid-template-columns: 1fr; } .hn-body{ grid-template-columns: 1fr; } .hn-img{ width:100%; height:160px; } } /* Phones: keep both countdowns aligned and prevent odd wrapping */ @media (max-width: 520px){ .hc-timer{ gap: 10px; } .hc-unit{ min-width: calc(50% - 10px); flex: 1 1 calc(50% - 10px); padding: 12px 10px 10px; border-radius: 16px; } .hc-num{ font-size: 32px; } .hc-lbl{ font-size: 10px; } .hc-eyebrow--main{ font-size: 14px; } } /* GLĂ“WNY BLOK: lewy panel + postaÄ‡ */ .top-grid{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; align-items: stretch; } .panel{ background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } /* LOGO zamiast h1 - WYĹšRODKOWANE */ .logo{ display: block; max-width: 360px; width: 100%; height: auto; margin: 4px auto 14px; /* <-- center */ filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6)); } .panel p{ margin: 0 0 12px; color: var(--muted); line-height: 1.55; } .badges{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .badge{ padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); font-size: 13px; color: var(--text); } .badge b{ color: var(--accent); font-weight: 700; } .info-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .card{ background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 12px; } .card .k{ font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.70); margin-bottom: 6px; } .card .v{ font-size: 15px; color: rgba(255,255,255,0.92); } /* Legal links (homepage above footer) */ .legal-links{ max-width: var(--wrap); margin: 14px auto 0; padding: 0 18px 22px; display: flex; gap: 10px; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); flex-wrap: wrap; } .legal-links a{ color: rgba(255,255,255,0.82); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18); } .legal-links a:hover{ color: var(--accent); border-bottom-color: rgba(255,255,255,0.35); } .legal-links .sep{ opacity: 0.7; } /* PRZYCISKI - WYĹšRODKOWANE (tylko lewy panel) */ .panel-left-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; /* <-- center */ } .btn{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .12s ease, background .12s ease, border-color .12s ease; } .btn{ height: 40px; } button.btn{ height: 40px; } .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); } .btn.primary{ background: rgba(255, 200, 80, 0.16); border-color: rgba(255, 200, 80, 0.35); } .btn.primary:hover{ background: rgba(255, 200, 80, 0.22); border-color: rgba(255, 200, 80, 0.48); } /* PANEL Z POSTACIÄ„ */ .character{ position: relative; overflow: hidden; background: var(--panel-bg-strong); display: flex; align-items: center; justify-content: center; /* The character images are swapped via opacity. Make the panel itself define the available space and let images scale DOWN to always fit inside the rounded container. */ padding: 0; height: clamp(360px, 48vh, 520px); } .character::before{ content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(255, 200, 80, 0.15), transparent 55%), radial-gradient(circle at 70% 60%, rgba(120, 180, 255, 0.12), transparent 58%); transform: rotate(10deg); pointer-events: none; } .character img{ position: absolute; inset: 0; margin: auto; /* Always fit inside the panel */ width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 22px 55px rgba(0,0,0,0.6)); transform: translateY(6px); } .character .note{ position: absolute; bottom: 12px; left: 12px; right: 12px; font-size: 12px; color: rgba(255,255,255,0.72); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 10px 12px; } /* DOLNY BLOK */ .bottom{ padding: 18px; } .bottom h2{ margin: 0 0 10px; font-size: 20px; letter-spacing: 0.2px; } .columns{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; } .columns .card{ min-height: 88px; } .links{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* STOPKA */ footer{ max-width: var(--max); margin: auto auto 0; padding: 10px 18px 8px; color: rgba(255,255,255,0.65); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } footer a{ color: rgba(255,255,255,0.75); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.25); } footer a:hover{ color: rgba(255,255,255,0.92); } @media (max-width: 980px){ .top-grid{ grid-template-columns: 1fr; } /* Panel height already clamps; no extra max-height needed for images */ .columns{ grid-template-columns: 1fr; } .info-grid{ grid-template-columns: 1fr; } .nav{ gap: 10px; } } /* Image swap animation (sizing is defined in the main .character img rule above) */ .character img{ opacity: 0; transition: opacity 1.2s ease; } .character img.active{ opacity: 1; } .columns.four{ grid-template-columns: repeat(4, 1fr); } /* Mobile overflow fix: Ensure .columns.four doesn't override the responsive 1-column layout on narrow screens (it was declared after the @media block above). */ @media (max-width: 980px){ .columns.four{ grid-template-columns: 1fr; } } .card.feature{ text-align: center; } .card.feature img{ width: 100%; max-width: 90px; height: auto; margin: 4px auto 10px; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); opacity: 0.9; } /* IKONKI W TOP MENU */ .nav-ico{ width: 18px; height: 18px; flex: 0 0 18px; display: inline-block; opacity: .92; } .nav ul{ align-items: center; } .nav ul li{ flex: initial; } .nav ul a{ width: 100%; white-space: nowrap; padding: 0 14px; } /* ===== Mobile navigation (hamburger) ===== Desktop stays identical (button hidden). On phones: a single "Menu" button toggles the list to avoid overflow and broken header. */ @media (max-width: 720px){ /* Mobile browsers + fixed backgrounds can cause a "shifted/cut" layout. Keep the same background image but disable fixed attachment on phones. */ html{ background-attachment: scroll; } body{ background-attachment: scroll; } /* Prefer clip over hidden to avoid weird horizontal scroll states */ html, body{ overflow-x: clip; } .nav{ flex-direction: column; align-items: stretch; padding: 12px 14px; } .nav-head{ flex-direction: column; align-items: center; gap: 10px; } .brand{ justify-content: center; } .brand img{ height: 61px; } /* Mobile: make the menu button full-width */ .nav-toggle{ display: inline-flex; width: 100%; } /* Hide menu until opened */ .nav ul{ display: none; flex-direction: column; width: 100%; gap: 10px; justify-content: flex-start; } .nav.is-open ul{ display: flex; } .nav ul li{ flex: 1 1 auto; } .nav ul a{ display: flex; width: 100%; justify-content: center; white-space: normal; height: auto; padding: 10px 12px; } /* Mobile: make menu items true full-width buttons */ .nav ul li{ width: 100%; } /* Mobile: hide the "Install/Download client" CTA from the header */ .nav ul li.nav-download{ display:none; } /* Mobile: hide the character image swap panel (rotating PNGs) */ .panel.character{ display:none; } /* Extra guard: ensure no section can clip/cause the page to look "cut" */ header, main, footer, .overlay{ max-width: 100%; } /* Mobile "page shifted / cut" fix: When a shrink-to-fit container (commonly images, long meta rows, or inline-block panels) becomes wider than the viewport, the whole layout can appear shifted and clipped. Force common culprits to respect the viewport width on phones. */ body{ width: 100%; max-width: 100%; overflow-x: hidden; } .overlay{ width: 100%; max-width: 100%; overflow-x: hidden; } main{ width: 100%; max-width: 100%; } /* News "fit" view: remove fixed 800px shrink-to-fit trap */ .news-wrap.news-fit{ width: 100%; max-width: 100%; padding: 0 14px; } .news-wrap.news-fit .panel{ width: 100%; max-width: 800px; } .news-wrap.news-fit .news-img{ width: 100%; max-width: 100%; } /* If any table/row is wider than the phone, allow it to scroll instead of shifting the page */ table{ display:block; max-width: 100%; overflow-x: auto; } pre{ max-width: 100%; overflow-x: auto; } /* Big scaled button can create horizontal overflow on some phones */ .vote-go-btn{ transform: none !important; } } @media (max-width: 520px){ .nav ul{ gap: 8px; } .nav-ico{ width: 16px; height: 16px; flex: 0 0 16px; } .vote-banner img{ width: 72px; } } .form .field .k{ font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,0.70); display:block; margin-bottom: 6px; } .input{ width: 100%; height: 44px; border-radius: 14px; padding: 0 12px; color: var(--text); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); } .input:focus{ outline: none; border-color: rgba(255,200,80,0.45); box-shadow: 0 0 0 3px rgba(255,200,80,0.12); } /* AUTH PAGES (login/register) */ main.auth{ max-width: 520px; margin: 0 auto; padding: 40px 18px 28px; /* rÄ™cznie kontrolowany odstÄ™p od gĂłry */ min-height: auto; /* NIE 100vh */ display: block; /* ĹĽadnego flexa */ } main.auth > .panel{ width: 100%; /* ĹĽeby panel nie zrobiĹ‚ siÄ™ wÄ™ĹĽszy */ } .captcha-center { display: flex; justify-content: center; margin-top: 14px; margin-bottom: 6px; } /* Remember me checkbox */ .remember-row{ margin-top: 12px; display:flex; justify-content:center; } .pretty-check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; color: rgba(255,255,255,0.82); font-weight: 700; font-size: 13px; } .pretty-check input{ position:absolute; opacity:0; width:0; height:0; } .pretty-check .check-ui{ width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); display:inline-flex; align-items:center; justify-content:center; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .pretty-check:hover .check-ui{ border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.09); } .pretty-check input:focus-visible + .check-ui{ outline: none; box-shadow: 0 0 0 3px rgba(255,200,80,0.14); border-color: rgba(255,200,80,0.50); } .pretty-check .check-ui:after{ content:""; width: 10px; height: 6px; border-left: 2px solid rgba(0,0,0,0); border-bottom: 2px solid rgba(0,0,0,0); transform: rotate(-45deg) scale(0.9); opacity: 0; transition: opacity .12s ease; } .pretty-check input:checked + .check-ui{ background: rgba(255, 200, 80, 0.22); border-color: rgba(255, 200, 80, 0.55); } .pretty-check input:checked + .check-ui:after{ border-left-color: rgba(255,255,255,0.96); border-bottom-color: rgba(255,255,255,0.96); opacity: 1; } /* lekko uspĂłjnia z panelem */ .captcha-center iframe { border-radius: 6px; } .ticket-list { list-style: none; padding: 0; } .ticket-list li { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.1); } .ticket-status { float: right; font-size: 12px; } .ticket-status.open { color: #4caf50; } .ticket-status.closed { color: #f44336; } .select, .textarea { width: 100%; margin-bottom: 10px; } .support-form{ display: flex; flex-direction: column; gap: 12px; } .support-form .k{ font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.70); margin-bottom: 6px; } .support-form .textarea, .support-form .select{ margin-bottom: 0; } .textarea{ border-radius: 14px; padding: 10px 12px; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); } .textarea::placeholder{ color: rgba(255,255,255,0.45); } .textarea:focus{ outline: none; border-color: rgba(255,200,80,0.45); box-shadow: 0 0 0 3px rgba(255,200,80,0.12); } .select-shell{ position: relative; width: 100%; } .select-trigger{ width: 100%; height: 44px; border-radius: 14px; padding: 0 42px 0 12px; text-align: left; color: var(--text); background: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%), linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%), linear-gradient(to right, rgba(255,255,255,0.06), rgba(255,255,255,0.06)); background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px, 0 0; background-size: 6px 6px, 6px 6px, 100% 100%; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,0.14); appearance: none; } .select-trigger:focus{ outline: none; border-color: rgba(255,200,80,0.45); box-shadow: 0 0 0 3px rgba(255,200,80,0.12); } .select-shell.is-disabled .select-trigger{ opacity: 0.6; cursor: not-allowed; } .select-list{ position: absolute; z-index: 40; left: 0; right: 0; margin-top: 8px; max-height: 240px; overflow: auto; padding: 6px; border-radius: 14px; background: rgba(0,0,0,0.94); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 40px rgba(0,0,0,0.55); display: none; } .select-shell.is-open .select-list{ display: block; } .select-option{ width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.92); cursor: pointer; } .select-option:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } /* SUPPORT layout */ .support-wrap { max-width: 1200px; margin: 0 auto; } .support-panel { padding: 18px; } /* Utility: pages/panels that should visually reach near the bottom with a ~15% gap */ .page-bottom-gap{ padding-bottom: 15vh !important; } .panel.fill-viewport{ /* header + footer + default paddings â‰ 240px; keep ~15% viewport gap at the bottom */ min-height: calc(100vh - 240px - 15vh); } /* When a panel uses fill-viewport, allow inner blocks to stretch (needed for full-height separators etc.) */ .support-panel.fill-viewport{ display:flex; flex-direction:column; } /* mniej przebijania tĹ‚a */ .support-card, .ticket-row, .msg { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.35); } .support-card { padding: 12px 14px; margin-top: 12px; } .support-card.solid { background: rgba(0,0,0,.65); } .support-card.ok { border-color: rgba(120,255,180,.28); } .support-card.error { border-color: rgba(255,120,120,.35); } .admin-actions{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .support-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .support-actions { display:flex; gap:10px; } /* 2 kolumny na listach */ .support-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top: 14px; /* stretch to fill the remaining panel height so the divider can reach the bottom */ flex: 1; /* make the single grid row stretch to the container height */ align-content: stretch; position: relative; } .support-grid > div{ padding: 6px 10px; } .support-grid > div + div{ padding-left: 22px; } .support-grid::before{ content:none; display:none; } .support-grid h3, .support-grid p.muted{ text-align:center; } @media (max-width: 860px){ .support-grid { grid-template-columns: 1fr; } .support-grid > div + div{ border-left: none; padding-left: 10px; } .support-grid::before{ display:none; } } .ticket-list { display:flex; flex-direction:column; gap:10px; margin-top: 10px; } .ticket-row { display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; text-decoration:none; color: inherit; transition: transform .08s ease, border-color .08s ease; } .ticket-row:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); } .ticket-row.closed { opacity: .85; } .ticket-title { display:flex; align-items:center; gap:10px; font-weight: 600; } .ticket-title .ticket-right{ margin-left:auto; } .ticket-meta { display:flex; gap:12px; align-items:center; font-size: 12px; } .status-open { opacity:.95; } .status-closed{ color: rgba(255,90,90,.95); font-weight: 800; letter-spacing: .2px; } .status-answered{ color: rgba(120,255,180,.95); font-weight: 800; letter-spacing: .2px; } .status-confirmed{ color: rgba(120,255,180,.95); font-weight: 800; letter-spacing: .2px; } .status-review{ color: rgba(255,190,90,.95); font-weight: 800; letter-spacing: .2px; } .muted { opacity: .75; } /* badge type (Ĺ‚adne kolory) */ .badge { display:inline-flex; align-items:center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); } .badge-news { } .badge-news-announcement { /* announcement - base: #0c182d (tint for readability) */ background: rgba(60,120,220,.18); border-color: rgba(60,120,220,.38); } .badge-news-event { /* event - base: #6ad496 (slightly stronger, still same hue) */ background: rgba(106,212,150,.24); border-color: rgba(106,212,150,.42); } .badge-news-maintenance { /* maintenance - base: #1e1f21 (tint for readability) */ background: rgba(86,87,88,.30); border-color: rgba(86,87,88,.56); } .badge-news-server-info { /* server_info - base: #2b1113 (tint for readability) */ background: rgba(220,70,80,.18); border-color: rgba(220,70,80,.38); } .badge-question { background: rgba(110,255,180,.18); border-color: rgba(110,255,180,.32); } .badge-report-player { background: rgba(255,90,90,.18); border-color: rgba(255,90,90,.32); } .badge-donation { background: rgba(255,210,80,.18); border-color: rgba(255,210,80,.32); } .badge-ban-appeal { background: rgba(80,150,255,.18); border-color: rgba(80,150,255,.32); } .badge-technical-problem { background: rgba(170,110,255,.18); border-color: rgba(170,110,255,.32); } .badge-bug-game-client{ background: rgba(90,220,200,.18); border-color: rgba(90,220,200,.32); } .badge-bug-npc{ background: rgba(255,170,90,.18); border-color: rgba(255,170,90,.32); } .badge-bug-quest{ background: rgba(120,220,140,.18); border-color: rgba(120,220,140,.32); } .badge-bug-skill{ background: rgba(180,120,255,.18); border-color: rgba(180,120,255,.32); } .badge-bug-item{ background: rgba(255,210,90,.18); border-color: rgba(255,210,90,.32); } .badge-bug-website{ background: rgba(90,170,255,.18); border-color: rgba(90,170,255,.32); } .badge-bug-other{ background: rgba(200,200,200,.12); border-color: rgba(200,200,200,.22); } /* New ticket type pills */ .type-pills { display:flex; gap:10px; flex-wrap: wrap; margin-top: 6px; justify-content: center; } .pill { display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); cursor:pointer; user-select:none; font-weight: 650; } .pill input { accent-color: auto; } .pill.question { border-color: rgba(110,255,180,.32); background: rgba(110,255,180,.10); } .pill.report-player { border-color: rgba(255,90,90,.32); background: rgba(255,90,90,.10); } .pill.donation { border-color: rgba(255,210,80,.32); background: rgba(255,210,80,.10); } .pill.ban-appeal { border-color: rgba(80,150,255,.32); background: rgba(80,150,255,.10); } .pill.technical-problem { border-color: rgba(170,110,255,.32); background: rgba(170,110,255,.10); } .pill.bug-game-client{ border-color: rgba(90,220,200,.32); background: rgba(90,220,200,.10); } .pill.bug-npc{ border-color: rgba(255,170,90,.32); background: rgba(255,170,90,.10); } .pill.bug-quest{ border-color: rgba(120,220,140,.32); background: rgba(120,220,140,.10); } .pill.bug-skill{ border-color: rgba(180,120,255,.32); background: rgba(180,120,255,.10); } .pill.bug-item{ border-color: rgba(255,210,90,.32); background: rgba(255,210,90,.10); } .pill.bug-website{ border-color: rgba(90,170,255,.32); background: rgba(90,170,255,.10); } .pill.bug-other{ border-color: rgba(200,200,200,.22); background: rgba(200,200,200,.08); } /* wiÄ™ksze pole treĹ›ci */ .textarea-big { min-height: 190px; resize: vertical; line-height: 1.35; } /* Ticket body */ .ticket-body { margin-top: 8px; white-space: normal; } /* Messages */ .messages { display:flex; flex-direction:column; gap:10px; margin-top: 10px; } .msg { padding: 12px 14px; } .msg-user { border-left: 3px solid rgba(255,255,255,.18); } .msg-support { border-left: 3px solid rgba(60,140,255,.35); } .msg-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; } .msg-body { margin-top: 8px; } /* NEWS */ .news-wrap{ max-width: 840px; margin: 0 auto; } /* View mode: keep the panel centered, but let its width be driven by the image */ .news-wrap.news-fit{ max-width: none; margin: 0 auto; padding: 0 18px; /* prevent sticking to the viewport edge */ display: flex; justify-content: center; } .news-wrap.news-fit .panel{ display: inline-block; width: auto; max-width: 800px; } .news-wrap.news-fit .news-img{ width: 800px; max-width: 100%; height: auto; object-fit: cover; } .news-list { display:flex; flex-direction:column; gap:14px; margin-top: 12px; } .news-row { display:block; text-decoration:none; color: inherit; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.55); box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .08s ease, border-color .08s ease; } .news-row:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); } .news-img { width: 100%; max-width: 800px; height: 180px; object-fit: cover; display:block; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); } .news-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top: 10px; } .news-title { font-size: 18px; font-weight: 750; line-height: 1.15; } .news-meta { display:flex; gap:10px; align-items:center; font-size: 12px; opacity:.82; white-space: nowrap; } .news-excerpt{ margin-top: 10px; line-height: 1.45; opacity: .85; } .news-body { margin-top: 10px; line-height: 1.45; } .news-admin-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; } .btn.danger { border-color: rgba(255,70,70,.30); background: rgba(255,70,70,.10); } /* Simple in-page modal (adblock-safe) */ .modal{ position: fixed; inset: 0; z-index: 9999; } .modal-overlay{ position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); } .modal-card{ position: relative; width: min(560px, calc(100vw - 28px)); margin: 10vh auto 0; background: rgba(0,0,0,0.70); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; box-shadow: 0 18px 55px rgba(0,0,0,0.55); padding: 16px; } .vote-go-btn{ transform: scale(1.7); transform-origin: center; display: inline-block; } /* ĹĽeby nie rozjechaĹ‚o ukĹ‚adu w flexie */ .panel-head .vote-go-btn{ margin: 18px 24px; /* dopasuj jak trzeba */ } /* How to start (premium cards) */ .howto-pro{ position: relative; overflow: hidden; background: var(--panel-bg); } .howto-pro:before{ display:none; } .howto-pro__head{ position: relative; display:flex; align-items:flex-end; justify-content: space-between; gap: 16px; } .howto-pro__head h2{ margin: 0; } .howto-pro__head p{ margin: 6px 0 0; color: rgba(255,255,255,0.78); line-height: 1.55; max-width: 62ch; } .howto-pro__headActions{ position: relative; display:flex; gap: 10px; flex-wrap: wrap; } .howto-pro__steps{ position: relative; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .howto-pro__step{ text-decoration: none; color: inherit; padding: 16px; border-radius: 18px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 55px rgba(0,0,0,0.25); display:flex; flex-direction: column; gap: 10px; transition: transform .18s ease, border-color .18s ease, background .18s ease; } .howto-pro__step:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.05); } .howto-pro__top{ display:flex; align-items:center; justify-content: space-between; gap: 12px; } .howto-pro__num{ width: 36px; height: 36px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-weight: 900; letter-spacing: .2px; background: rgba(255, 200, 80, 0.18); border: 1px solid rgba(255, 200, 80, 0.42); } .howto-pro__icon{ width: 46px; height: 46px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); flex: 0 0 auto; } .howto-pro__icon img{ width: 24px; height: 24px; opacity: 0.95; } .howto-pro__title{ font-size: 16px; font-weight: 950; letter-spacing: .2px; } .howto-pro__text{ color: rgba(255,255,255,0.78); line-height: 1.5; font-size: 13px; min-height: 44px; } .howto-pro__cta{ margin-top: auto; color: rgba(255,255,255,0.86); font-weight: 900; letter-spacing: .2px; border-bottom: 1px solid rgba(255,255,255,0.16); width: fit-content; } .howto-pro__step:hover .howto-pro__cta{ border-bottom-color: rgba(255,255,255,0.35); } /* connectors removed (clean layout) */ .howto-pro__steps > .howto-pro__step{ position: relative; } .howto-pro__steps > .howto-pro__step:not(:last-child):after{ display:none; } @media (max-width: 920px){ .howto-pro__head{ flex-direction: column; align-items: flex-start; } .howto-pro__steps{ grid-template-columns: 1fr; } .howto-pro__steps > .howto-pro__step:not(:last-child):after{ display:none; } } /* Wiki */ .wiki-hero h1{ margin: 0 0 8px; font-size: clamp(30px, 4vw, 44px); font-weight: 950; } .wiki-hero-logo{ display: block; width: min(460px, 88%); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.62)); } .wiki-hero-sub-placeholder{ height: 22px; } .wiki-hero{ min-height: 380px; display: grid; align-items: center; background: transparent; border: 0; box-shadow: none; position: relative; overflow: visible; } .wiki-home-main{ padding-bottom: 20px; } .wiki-hero::before{ content: none; } .wiki-hero-inner{ max-width: 760px; margin: 0 auto; width: 100%; text-align: center; display: grid; gap: 14px; padding: 12px 18px 30px; position: relative; z-index: 1; } .wiki-hero-search{ display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 620px; width: 100%; margin: 0 auto; align-items: stretch; position: relative; } .wiki-hero-search-input{ position: relative; display: block; background: transparent; border: 0; border-radius: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; } .wiki-hero-search input{ min-height: 44px; width: 100%; border-radius: 10px; border: 1px solid rgba(105, 140, 215, 0.55); padding: 10px 14px 10px 44px; background: #0e0f15; color: var(--text); font-size: 16px; letter-spacing: .2px; text-shadow: none; box-shadow: none; } .wiki-search-icon{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; color: rgba(255, 200, 80, 0.95); pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .wiki-search-icon svg{ width: 28px; height: 28px; display: block; } .wiki-hero-search .btn{ min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; align-self: stretch; white-space: nowrap; box-shadow: none; } .wiki-hero-search .items-search-btn{ background: linear-gradient(180deg, rgba(255, 210, 110, 0.96), rgba(232, 170, 58, 0.96)); border-color: rgba(255, 214, 132, 0.92); color: rgba(30, 18, 2, 0.98); font-weight: 800; } .wiki-hero-search .items-search-btn:hover{ background: linear-gradient(180deg, rgba(255, 220, 135, 0.98), rgba(240, 180, 72, 0.98)); border-color: rgba(255, 223, 152, 0.98); color: rgba(24, 14, 2, 1); } .wiki-hero-search input:focus{ outline: none; box-shadow: 0 0 0 3px rgba(106, 145, 230, 0.30); } .wiki-suggest{ position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(14, 15, 21, 0.97); box-shadow: 0 18px 44px rgba(0,0,0,0.48); min-height: 150px; max-height: 270px; overflow: auto; padding: 8px 0; text-align: left; } .wiki-suggest.is-hidden{ display: none; } .wiki-suggest-group + .wiki-suggest-group{ border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; padding-top: 6px; } .wiki-suggest-title{ color: rgba(255,255,255,0.52); font-size: 12px; letter-spacing: .2px; padding: 4px 14px 6px; } .wiki-suggest-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 12px; color: rgba(255,255,255,0.9); text-decoration: none; } .wiki-suggest-row:hover{ background: rgba(255,255,255,0.06); } .wiki-suggest-left{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .wiki-suggest-icon{ width: 22px; height: 22px; border-radius: 3px; object-fit: cover; border: 1px solid rgba(255,255,255,0.10); flex: 0 0 auto; } .wiki-suggest-dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 200, 80, 0.92); box-shadow: 0 0 0 2px rgba(255,255,255,0.06); flex: 0 0 auto; margin-left: 7px; margin-right: 7px; } .wiki-suggest-name{ font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .wiki-suggest-tag{ display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.66); font-size: 12px; font-weight: 700; flex: 0 0 auto; } .wiki-hero-links{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .wiki-hero-links a{ display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font-weight: 700; } .wiki-hero-links a:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); } .wiki-muted{ margin: 0; color: var(--muted); } .wiki-alert{ margin-top: 12px; padding: 12px; border-radius: 10px; background: rgba(255, 110, 110, 0.18); border: 1px solid rgba(255, 110, 110, 0.34); color: #ffd3d3; } .wiki-stats .card{ min-height: 180px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: rgba(10, 12, 18, 0.90); border: 1px solid rgba(255,255,255,0.12); } .wiki-number{ margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 900; color: var(--accent); } .wiki-list-head{ display: grid; gap: 12px; align-items: center; } .wiki-list-head h1{ margin: 0; font-size: clamp(26px, 3.6vw, 38px); } .wiki-search{ display: flex; gap: 10px; flex-wrap: wrap; } .wiki-search input{ flex: 1 1 320px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); padding: 10px 12px; background: rgba(0,0,0,0.25); color: var(--text); font-size: 16px; } .wiki-search select{ min-height: 44px; border-radius: 10px; border: 1px solid var(--border); padding: 10px 12px; background: rgba(0,0,0,0.25); color: var(--text); font-size: 16px; } .wiki-search label{ display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; } .wiki-table-wrap{ overflow-x: auto; } .wiki-table{ width: 100%; border-collapse: collapse; min-width: 860px; } .wiki-table th, .wiki-table td{ text-align: left; border-bottom: 1px solid rgba(255,255,255,0.10); padding: 10px 8px; font-size: 14px; vertical-align: top; } .wiki-table th{ color: rgba(255,255,255,0.86); font-weight: 800; text-transform: uppercase; letter-spacing: .35px; font-size: 12px; } .wiki-table td a{ color: var(--accent); text-decoration: none; font-weight: 700; } .wiki-table td a:hover{ text-decoration: underline; } .wiki-item-icon{ width: 34px; height: 34px; border-radius: 6px; display: block; object-fit: cover; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); } .wiki-pagination{ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .wiki-pagination-main{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wiki-page-nav, .wiki-page-num{ min-width: 40px; text-align: center; padding-left: 10px; padding-right: 10px; } .wiki-page-num.is-active{ background: rgba(255, 189, 67, 0.92); border-color: rgba(255, 189, 67, 0.92); color: #141414; font-weight: 900; pointer-events: none; } .wiki-page-nav.is-disabled{ opacity: .45; pointer-events: none; } .wiki-page-ellipsis{ color: rgba(255,255,255,0.62); font-weight: 800; letter-spacing: .2px; padding: 0 2px; } .wiki-pagination-meta{ color: rgba(255,255,255,0.74); font-size: 13px; white-space: nowrap; } .wiki-page-jump{ display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; } .wiki-page-jump input[type="number"]{ width: 88px; min-height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text); padding: 0 10px; } @media (max-width: 860px){ .wiki-pagination{ justify-content: flex-start; } .wiki-pagination-meta{ order: 3; width: 100%; } .wiki-page-jump{ margin-left: 0; } } .wiki-detail h1{ margin-top: 0; margin-bottom: 14px; } .wiki-pre{ margin: 0; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px; white-space: pre-wrap; word-break: break-word; max-height: 540px; overflow: auto; color: rgba(255,255,255,0.86); font-size: 12px; line-height: 1.4; } .items-browser{ background: linear-gradient(145deg, rgba(10, 12, 18, 0.98), rgba(14, 17, 25, 0.98)); border: 1px solid rgba(255,255,255,0.12); } .wiki-breadcrumb{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgba(255,255,255,0.70); font-size: 13px; margin-bottom: 8px; } .wiki-breadcrumb a{ color: rgba(255,255,255,0.78); text-decoration: none; } .wiki-breadcrumb a:hover{ color: #fff; } .items-search-hero{ background: linear-gradient(145deg, rgba(10, 12, 18, 0.96), rgba(14, 17, 25, 0.96)); border: 1px solid rgba(255,255,255,0.10); padding: 10px; } .items-search-form{ display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; } .items-search-icon{ width: 30px; height: 30px; color: rgba(255, 200, 80, 0.95); display: inline-flex; align-items: center; justify-content: center; } .items-search-icon svg{ width: 28px; height: 28px; display: block; } .items-search-form input[type="text"]{ min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text); padding: 0 14px; font-size: 16px; letter-spacing: .2px; } .items-search-btn{ min-height: 44px; border-radius: 10px; padding: 0 16px; } .items-season{ min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.92); font-weight: 700; padding: 0 14px; cursor: default; } .items-tabs{ display: flex; flex-wrap: wrap; gap: 6px; } .items-tabs a{ display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px 8px 0 0; color: rgba(255,255,255,0.92); text-decoration: none; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-bottom-color: rgba(255,255,255,0.18); } .items-tabs a:hover{ background: rgba(255,255,255,0.10); } .items-tabs a.is-active{ background: rgba(255, 200, 80, 0.16); border-color: rgba(255, 200, 80, 0.42); color: rgba(255,255,255,0.98); } .items-tabs-grade, .items-tabs-type{ padding: 8px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); } .items-tabs-grade a, .items-tabs-type a{ min-height: 34px; border-radius: 6px; background: transparent; border: 1px solid transparent; font-weight: 650; } .items-tabs-grade a.is-active, .items-tabs-type a.is-active{ background: rgba(255, 200, 80, 0.14); border-color: rgba(255, 200, 80, 0.32); } .items-results{ background: linear-gradient(145deg, rgba(10, 12, 18, 0.96), rgba(14, 17, 25, 0.96)); } .items-table{ min-width: 1020px; } .items-table thead th{ background: rgba(255,255,255,0.05); border-bottom: 0; font-size: 14px; text-transform: none; letter-spacing: 0; padding-top: 12px; padding-bottom: 12px; font-weight: 800; } .items-table tbody tr:nth-child(even){ background: rgba(255,255,255,0.025); } .item-name-cell{ display: flex; align-items: center; gap: 12px; min-width: 360px; } .item-name-meta{ display: grid; gap: 4px; } .item-name-link{ color: rgba(255,255,255,0.98); text-decoration: none; font-weight: 800; font-size: 20px; } .item-name-link:hover{ color: #fff; text-decoration: underline; } .item-name-main{ color: rgba(255, 201, 110, 0.96); } .item-name-add{ color: #ffffff; } .item-sub{ color: rgba(255,255,255,0.62); font-size: 13px; } .item-top-card{ background: var(--panel-bg); } .item-top-head{ display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.10); } .item-top-icon{ width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); flex: 0 0 auto; } .item-top-title h1{ margin: 0 0 4px; font-size: 22px; display: flex; align-items: center; gap: 8px; } .item-top-sub{ color: rgba(255,255,255,0.68); font-size: 13px; } .item-top-stats{ display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; color: rgba(255,255,255,0.86); } .item-drops h2{ margin-top: 0; margin-bottom: 10px; } .item-drops{ width: 100%; min-width: 0; } .item-loot-tabs{ display: inline-flex; gap: 0; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.03); } .item-loot-tabs a{ display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 34px; padding: 0 12px; color: rgba(255,255,255,0.88); text-decoration: none; font-weight: 800; font-size: 13px; border-right: 1px solid rgba(255,255,255,0.08); transition: background .12s ease, color .12s ease; } .item-loot-tabs a:last-child{ border-right: 0; } .item-loot-tabs a:hover{ background: rgba(255,255,255,0.06); color: #fff; } .item-loot-tabs a.is-active{ background: rgba(255, 189, 67, 0.92); color: #141414; } .item-loot-panel{ min-height: 460px; width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; } .item-loot-panel .wiki-alert, .item-loot-panel .wiki-table-wrap, .item-loot-panel .craft-recipes, .item-loot-panel .craft-recipe-card, .item-loot-panel .craft-recipe-layout{ width: 100%; max-width: 100%; min-width: 0; } .craft-recipes{ display: grid; gap: 12px; width: 100%; min-width: 0; } .craft-recipe-card{ border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(0,0,0,0.20); padding: 10px; width: 100%; min-width: 0; } .craft-recipe-head{ display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.10); padding-bottom: 10px; margin-bottom: 10px; } .craft-recipe-title{ font-weight: 800; color: rgba(255,255,255,0.96); font-size: 16px; } .craft-recipe-rate{ color: rgba(255, 189, 67, 0.95); font-weight: 700; } .craft-recipe-meta{ margin-top: 4px; color: rgba(255,255,255,0.70); font-size: 13px; } .craft-recipe-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; width: 100%; min-width: 0; } .craft-recipe-tree, .craft-recipe-summary{ min-width: 0; } .craft-recipe-summary{ border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; background: rgba(255,255,255,0.03); padding: 10px; position: sticky; top: 8px; } .craft-recipe-summary h3{ margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: rgba(255,255,255,0.84); } .craft-summary-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .craft-summary-list li{ display: flex; align-items: center; gap: 8px; min-height: 26px; } .craft-summary-count{ min-width: 34px; text-align: right; color: rgba(255,255,255,0.95); font-weight: 800; } .craft-summary-name{ color: rgba(255,255,255,0.86); font-size: 13px; } .craft-summary-empty{ color: rgba(255,255,255,0.60); font-size: 13px; } .craft-tree{ list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid rgba(255,255,255,0.16); } .craft-tree .craft-tree{ margin-top: 6px; padding-left: 22px; } .craft-tree-node{ margin: 4px 0; position: relative; } .craft-tree-node::before{ content: ""; position: absolute; left: -18px; top: 15px; width: 14px; border-top: 1px solid rgba(255,255,255,0.16); } .craft-tree-row{ display: flex; align-items: center; gap: 8px; min-height: 28px; } .craft-tree-details > summary{ list-style: none; cursor: pointer; } .craft-tree-details > summary::-webkit-details-marker{ display: none; } .craft-tree-expander{ width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,0.65); border-bottom: 2px solid rgba(255,255,255,0.65); transform: rotate(-45deg); transition: transform .12s ease; margin-right: 2px; flex: 0 0 auto; opacity: .9; } .craft-tree-details[open] > summary .craft-tree-expander{ transform: rotate(45deg); } .craft-tree-expander.is-empty{ border: 0; opacity: 0; } .craft-tree-icon{ width: 24px; height: 24px; border-radius: 4px; flex: 0 0 auto; } .craft-tree-count{ min-width: 24px; text-align: right; color: rgba(255,255,255,0.95); font-weight: 700; } .craft-tree-name{ color: rgba(255, 201, 110, 0.96); font-weight: 700; } .craft-tree-total{ color: rgba(255,255,255,0.62); font-size: 13px; } @media (max-width: 980px){ .craft-recipe-layout{ grid-template-columns: 1fr; } .craft-recipe-summary{ position: static; } .item-loot-panel{ min-height: 360px; } } .item-all-data summary{ cursor: pointer; font-weight: 800; color: rgba(255,255,255,0.92); outline: none; } .item-all-data summary::-webkit-details-marker{ color: rgba(255,255,255,0.75); } .item-all-data-wrap{ margin-top: 12px; max-height: 62vh; overflow: auto; } .item-all-data-table{ min-width: 0; table-layout: fixed; } .item-all-data-table th, .item-all-data-table td{ white-space: normal; word-break: break-word; overflow-wrap: anywhere; } .item-all-data-table th:first-child, .item-all-data-table td:first-child{ width: 36%; } .grade-chip{ display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(58,111,165,0.75); color: #fff; font-size: 12px; font-weight: 800; } .avail-wrap{ display: flex; flex-wrap: wrap; gap: 6px; } .avail-chip{ display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(255, 189, 67, 0.92); color: #131313; font-size: 12px; font-weight: 800; letter-spacing: .1px; } @media (max-width: 720px){ .wiki-hero{ min-height: 300px; } .wiki-hero-search{ grid-template-columns: 1fr; } .wiki-suggest{ top: calc(100% + 6px); } .items-search-form{ grid-template-columns: auto 1fr; } .items-search-form .items-season, .items-search-form .items-search-btn{ grid-column: span 2; } }