@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;700&display=swap');

/* =========================================================
   MOTYW MMO – zmienne
   ========================================================= */
:root {
  /* bazowe */
  --color-bg: #050507;
  --color-surface: #0b0c10;
  --color-surface-2: #0f1117;
  --color-text: #f7f7f7;
  --color-muted: #c6c6c6;
  --color-frame: rgba(255, 255, 255, .08);
  --color-outline: #575757;    /* RAMKI MENU ITP ramka */

  /* akcent fantasy/ognisty – GOLDEN EMBER THEME */
  --accent: #ffb400;           /* złoto główne */
  --accent-2: #ff9000;         /* pomarańcz – badge/przyciski */
  --accent-3: #ff5a00;         /* czerwony żar */
  --accent-glow: none;         /* usunięta poświata */
  --accent-gradient: linear-gradient(90deg, #ffcc33, #ff9900, #ffb400);
  --accent-gradient-light: linear-gradient(180deg, rgba(255, 200, 80, 0.15), rgba(255, 150, 0, 0.05));

  /* guziki */
  --color-btn-bg: #f7b003;
  --color-btn-text: #000;
  --color-btn-bg-hover: #eaeaea;

  --discord-accent: #5865F2;

  --radius: 14px;
  --radius-sm: 10px;
  --page-max: 1120px;
  --col-left: 220px;
  --col-right: 260px;
  --gap: 20px;

  --mobile-bar-h: 56px;

  /* globalny cień dla box-shadow (możesz dopasować do silnika cieni w projekcie) */
  --box-shadow-strong: 0 10px 40px rgba(0,0,0,.45);
  --box-shadow-medium: 0 6px 28px rgba(0,0,0,.35);
  --box-shadow-soft: 0 4px 18px rgba(0,0,0,.28);
  --box-shadow-light: 0 2px 10px rgba(0,0,0,.22);
  --box-shadow-small: 0 2px 8px rgba(0,0,0,.18);
}

/* =========================================================
   Reset i baza
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{
	font-size:16px;
	line-height:1.5;
	background-color: #0a0a0a;
	
}



body{
  background-color: var(--color-bg);
  background: 
    radial-gradient(1000px 600px at 50% -10%, rgba(255,193,79,.12), transparent 70%),
    radial-gradient(600px 400px at 0% 0%, rgba(255,153,0,.06), transparent 60%),
    linear-gradient(180deg, #0a0a12, #050507 80%);
  background-attachment: fixed;
  background-size: cover;
  color:var(--color-text);
  font-family:'Eczar',serif;
  -webkit-font-smoothing:antialiased;
  padding-top: 12px;
}

/* linki */
a{color:var(--color-text);text-decoration:none;transition:opacity .15s ease;}
a:hover{opacity:.98;text-decoration:none;} /* bez text-shadow */

/* focusy – czytelne, ale subtelne */
:focus-visible{
  outline:2px solid rgba(255, 193, 79, .55);
  outline-offset:2px;
  border-radius:6px;
}

#center-col {
    min-width: 0;
}

/* =========================================================
   Top menu / baner
   ========================================================= */
#top-menu{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 auto 8px;width: min(900px, 100%);height:70px;padding:0 16px;
}
#top-menu img{max-height:60px;width:auto;display:block;}
#top-menu .auth .btn-link{
  display:inline-block;padding:8px 16px;margin-left:10px;border-radius:999px;
  background:var(--color-btn-bg);color:var(--color-btn-text);font-weight:700;
  box-shadow: none; /* bez poświaty */
  transition:filter .15s ease, transform .05s ease;
}
#top-menu .auth .btn-link:hover{filter:brightness(.95);} /* usunięty złoty box-shadow */
#baner{
  width:min(900px,100%);height:120px;margin:2px auto;border-radius:var(--radius);
  overflow:hidden;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--box-shadow-strong);
}
#baner img{width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================
   Siatka strony
   ========================================================= */
.page{
  max-width:var(--page-max);
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  gap: var(--gap);
  align-items:start;
}

/* =========================================================
   Karty / wspólna powierzchnia
   ========================================================= */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) , var(--color-surface);
  border:1px solid var(--color-outline);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    var(--box-shadow-strong);
}
.card .card-header,
.news-header{
  margin:-16px -16px 12px;
  padding:12px 16px;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-weight:700; letter-spacing:.2px;
}
.card h1,.card h2,.card h3,h1,h2,h3{
  font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.55);
}

/* Złoty akcent na nagłówkach/headingach */
.heading-accent,
.card h1,.card h2,.card h3,h1,h2,h3{
  background: var(--accent-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow: none; /* bez złotej poświaty */
}

.card p{color:#e8e8ea}
.card p + p{margin-top:.7rem}

/* =========================================================
   LEWY SIDEBAR – nowa karta + linki MMO
   ========================================================= */
#sidebar-left{
  background:transparent;border:none;padding:0;
}
#sidebar-left .group{
  position:relative;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    var(--color-surface);
  border:1px solid var(--color-outline);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), var(--box-shadow-medium);
}
#sidebar-left .group + .group{ margin-top: var(--gap); }

#sidebar-left h2{
  font-size:1.2rem;margin:2px 0 10px;letter-spacing:.3px;opacity:.95;
}

/* lista */
#sidebar-left nav ul{list-style:none}
#sidebar-left nav li + li{margin-top:4px}

/* linki z paskiem akcentu i stanem aktywnym */
#sidebar-left nav a{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:10px 12px 10px 18px;border-radius:12px;border:1px solid transparent;
  color:var(--color-text);opacity:.95;background:transparent;
  transition:
    background .18s ease, border-color .18s ease,
    transform .05s ease, opacity .12s ease;
}
#sidebar-left nav a::before{
  content:"";position:absolute;left:8px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(180deg, var(--accent), rgba(255,255,255,0));
  opacity:.0; transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
#sidebar-left nav a:hover{
  background: rgba(255,193,79,.06);
  border-color: rgba(255,193,79,.20);
  opacity:1;
  /* usunięty złoty box-shadow */
}
#sidebar-left nav a:hover::before{opacity:1;transform:translateX(0)}

/* klasa active do oznaczania aktualnej sekcji */
#sidebar-left nav a.active{
  background: var(--accent-gradient-light);
  border-color: rgba(255, 190, 80, .35);
  /* usunięta poświata i animacja */
}
#sidebar-left nav a.active::before{opacity:1;transform:none}

/* mikro-badge przy linkach (np. NEW) */
.nav-badge{
  margin-left:auto;
  font-size:.75rem; line-height:1;
  padding:4px 7px;border-radius:999px;
  color:#101215;background:var(--accent-2);font-weight:800;
  box-shadow: none; /* bez glow */
}

/* =========================================================
   ŚRODEK – typowe listy newsów/artykułów
   ========================================================= */
#center-col{display:flex;flex-direction:column;gap:var(--gap);}
.news-list{list-style:none;margin:0;padding:0}
.news-item{
  padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  transition:background .18s ease, transform .05s ease, border-color .18s ease;
}
.news-item + .news-item{margin-top:10px}
.news-item:hover{
  background:rgba(255,193,79,.05);
  border-color:rgba(255,193,79,.22);
  /* usunięty box-shadow glow */
}
.news-item .meta{color:var(--color-muted);font-size:.95rem}

/* tytuł z subtelnym akcentem */
.heading-accent{
  display:inline-block;
  background: var(--accent-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* =========================================================
   PRAWY PANEL – Discord i konto
   ========================================================= */
#sidebar-right{align-self:start}
#sidebar-right.discord{
  border:1px solid rgba(88,101,242,.25);
  border-radius:var(--radius);
  background:var(--color-surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), var(--box-shadow-strong);
  overflow:hidden;position:relative;
}
.discord .discord-body{
  position:relative;z-index:1;padding:22px;height:220px;
  background: linear-gradient(180deg, rgba(50,62,130,.88), rgba(18,22,50,.9));
  display:flex;flex-direction:column;gap:16px;
}
.discord h3{font-size:1.5rem}
.discord p{color:#d7dbff}
.btn-discord{
  margin-top:auto;display:inline-block;padding:12px 18px;border-radius:999px;
  background:var(--discord-accent);color:#fff;font-weight:700;text-align:center;
  transition:filter .15s ease, transform .05s ease;
  box-shadow:none; /* bez glow */
}
.btn-discord:hover{filter:brightness(1.05)}
.btn-discord:active{transform:translateY(1px)}

/* Box konta */
.account-card.card{}
.account-card h3{margin-bottom:10px}
.account-welcome .nick{color:#ffda72}
.account-welcome .premdays{color:#ffd666}
.account-card .form-row + .form-row{margin-top:8px}
.account-card input[type="text"], .account-card input[type="password"]{
  width:100%;padding:10px 12px;border:1px solid var(--color-outline);border-radius:10px;
  background:#0d0f14;color:var(--color-text);outline:none;
  transition:border .2s ease, background .2s ease;
}
.account-card input:focus{
  border-color:#d6a84b;background:#131722;
  /* usunięty box-shadow focus */
}
.account-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.btn-pill{
  display:block;width:100%;padding:10px 14px;border-radius:12px;
  background:#141720;border:1px solid var(--color-outline);color:var(--color-text);
  font-weight:700;text-align:center;
  transition:filter .15s, transform .05s, background .2s, border-color .2s;
}
.btn-pill:hover{background:#171b28;filter:brightness(1.03)}
.btn-pill:active{transform:translateY(1px)}
.btn-pill.primary{
  background: var(--accent-gradient);
  color:#000;border-color:transparent;
  box-shadow:none;       /* bez glow */
  animation:none;        /* bez żaru */
}
.btn-pill.primary:hover{filter:brightness(1.05)}
.btn-pill.danger{background:#1a1315;border-color:rgba(255,255,255,.14)}
.btn-pill.danger:hover{background:#1e1517}

#sidebar-right > .card + .card{margin-top:var(--gap)}

/* =========================================================
   Formularze i przyciski (global)
   ========================================================= */
input[type="text"], input[type="password"], select{
  width:100%;padding:10px 12px;border:1px solid #2b2f36;border-radius:10px;
  background:#0e1117;color:var(--color-text);font-size:1rem;
  transition:border .2s ease, background .2s ease;
}
input:focus, select:focus{
  border-color:#d6a84b;background:#121724;
  /* bez box-shadow */
}
select:not([multiple]){
  height:42px;padding:0 40px 0 12px;appearance:none;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23d6a84b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position:right 12px center;background-size:18px;
}
select:not([multiple]):hover{background-color:#121724}
select:not([multiple]):focus{border-color:#d6a84b;background-color:#151b2b}

input[type="submit"], button[type="submit"], .btn, .btn.btn-info{
  height:42px;padding:0 18px;border-radius:12px;border:1px solid transparent;
  background: var(--accent-gradient);color:#000;font-weight:800;cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
  box-shadow:none; /* bez glow */
}
input[type="submit"]:hover, button[type="submit"]:hover, .btn:hover{filter:brightness(1.05)}
input[type="submit"]:active, button[type="submit"]:active, .btn:active{transform:translateY(1px)}

/* =========================================================
   Rejestracja / formularze specjalne
   ========================================================= */
#register{
  max-width:520px;margin:0 auto;padding:20px;border:1px solid var(--color-outline);
  border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), var(--box-shadow-medium);
}
#register ul{list-style:none}
#register li{margin:14px 0}
#register a{text-decoration:none}

/* =========================================================
   Tabele
   ========================================================= */
table{
  width:100%;border-collapse:collapse;background:var(--color-surface-2);color:var(--color-text);
  border:1px solid rgba(255,255,255,.10);border-radius:10px;overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), var(--box-shadow-light);
}
th,td{padding:10px 12px;border-bottom:1px solid var(--color-frame);text-align:left}
th{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  font-weight:800; letter-spacing:.4px; text-transform:uppercase;
}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,193,79,.05)}

/* =========================================================
   Tabsy i paginacja
   ========================================================= */
.page-tabs,.pagination{display:inline-flex;gap:8px;margin-top:12px}
.page-tabs a,.pagination a,.pagination span{
  display:inline-block;padding:8px 12px;border-radius:999px;background:#141720;
  border:1px solid rgba(255,255,255,.10);
  transition:background .18s,border-color .18s,transform .05s;
}
.page-tabs .active,.pagination .active{
  background: var(--accent-gradient-light);
  border-color: rgba(255, 190, 80, .35);
  /* bez box-shadow */
}

/* =========================================================
   Stopka
   ========================================================= */
#site-footer{margin-top:2rem;padding:16px 0;text-align:center}
#site-footer .brand{margin:0;font-family:'Eczar',serif;font-size:1.1rem}
#site-footer .tagline{margin:4px 0 0;font-size:.95rem;letter-spacing:.3px;color:var(--color-muted)}

/* =========================================================
   Mobile: pasek, szuflada, overlay, scrollbar
   ========================================================= */
#menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;z-index:998;
}
@media (min-width:916px){ #mobile-bar{display:none!important} #menu-overlay{display:none!important} }

@media (max-width:915px){
  .page{grid-template-columns:1fr}
  #baner{height:120px}
  #top-menu{display:none}

  #mobile-bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:1000;height:var(--mobile-bar-h);
    background:var(--color-bg);border-bottom:1px solid var(--color-frame);
    padding:10px 12px;margin-top:-9px;
  }
  #mobile-bar .brand img{display:block;height:calc(var(--mobile-bar-h) - 22px);width:auto}
  #mobile-bar .hamburger{
    display:inline-flex;align-items:center;gap:8px;border:1px solid var(--color-frame);
    border-radius:10px;background:#0f1117;color:var(--color-text);
    padding:10px 14px;font-weight:800;cursor:pointer;
  }

  body.menu-open #menu-overlay{opacity:1;visibility:visible}
  body.menu-open{overflow:hidden}

  /* szuflada */
  #sidebar-left{
    position:fixed;top:var(--mobile-bar-h);left:0;z-index:999;
    height:calc(100dvh - var(--mobile-bar-h)); width:min(85vw, 320px);
    padding:16px;background:#050507; transform:translateX(-100%);
    transition:transform .22s ease; overflow-y:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--color-frame) transparent;
    box-shadow: var(--box-shadow-small);
  }
  body.menu-open #sidebar-left{transform:translateX(0)}

  /* webkit scrollbar */
  #sidebar-left::-webkit-scrollbar{width:10px;height:10px}
  #sidebar-left::-webkit-scrollbar-track{background:transparent;border-left:1px solid var(--color-frame)}
  #sidebar-left::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.10));
    border: 2px solid transparent;border-radius: calc(var(--radius) - 2px);
    background-clip: padding-box;
  }
  #sidebar-left::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.18));
  }

  .card,#sidebar-right{box-shadow:var(--box-shadow-small)}
}

/* =========================================================
   Drobne utility pod MMO
   ========================================================= */
.badge{
  display:inline-block;padding:4px 8px;border-radius:8px;
  background:rgba(255,193,79,.18);border:1px solid rgba(255,193,79,.35);
  color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.2px;
}
.badge.gold{
  background:rgba(255,209,102,.2);
  border-color:rgba(255,209,102,.45);
  color:#101215;
  box-shadow:none; /* bez poświaty */
}

.icon-16{width:16px;height:16px;display:inline-block;flex:0 0 16px}
.dim{opacity:.8}
.hr{height:1px;background:var(--color-frame);margin:10px 0;border-radius:1px}

/* poprawki dla niepełnych treści, żeby kolumny się nie rozciągały */
#sidebar-left, #sidebar-right{ align-self:start; }

/* mobile – układ 3 elementów w jednym rzędzie (np. w panelu konta) */
@media (max-width:600px){
  #myaccount form table{width:100%;text-align:center;table-layout:auto}
  #myaccount form tr{display:block}
  #myaccount form td{display:inline-block;vertical-align:middle;margin:0 6px;width:auto}
  #myaccount select.form-control{width:140px;max-width:40vw;box-sizing:border-box}
  #submit_button{width:auto;padding:10px 16px;box-sizing:border-box}
}

/* =========================================================
   Efekty specjalne – subtelny żar
   ========================================================= */
@keyframes ember-glow {
  0%, 100% { box-shadow: none; } /* zgaszone */
  50% { box-shadow: none; }
}