:root{
  --bg:#eef4fb;
  --bg2:#f7fafd;
  --navy:#25324a;
  --navy-soft:#5b6b85;
  --blue:#2f8dff;
  --blue-dark:#1c6fe0;
  --blue-light:#7fc0ff;
  --card:#ffffff;
  --line:#dbe6f2;
  --shadow: 0 10px 30px rgba(31,90,180,0.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 500px at 10% -10%, #ffffff 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #eaf3ff 0%, transparent 55%),
    linear-gradient(180deg,#f5f9fd 0%, #eef4fb 40%, #eaf1fa 100%);
  color:var(--navy);
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  overflow-x:hidden;
  position:relative;
}

/* decorative diagonal lines + cubes */
.deco-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg, transparent, #8fbdf5, transparent);
  opacity:.55;
  transform-origin:left center;
}
.deco-band{
  position:absolute;
  background:linear-gradient(90deg, transparent 0%, rgba(178,208,250,.6) 45%, rgba(178,208,250,.35) 60%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
.cube{
  position:absolute;
  will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(30,100,220,.35));
}
.cube img{display:block;width:100%;height:100%;}
.cube.tiny{width:16px;height:16px;}
.cube.small{width:22px;height:22px;}
.cube.mid{width:30px;height:30px;}
.cube.big{width:40px;height:40px;}
.cube.xbig{width:52px;height:52px;}

.wrap{
  max-width:1752px;
  margin:0 auto;
  position:relative;
  padding:0 40px;
}

/* ---------- NAV ---------- */
header{
  position:relative;
  z-index:5;
  padding:26px 0 0;
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
}
.brand-icon{
  width:34px;height:34px;object-fit:contain;
}
.brand-text{
  line-height:1;
}
.brand-text .b1{
  font-weight:800;
  font-size:12px;
  letter-spacing:1px;
  color:var(--navy);
}
.brand-text .b2{
  font-size:8px;
  letter-spacing:2px;
  color:var(--blue-dark);
  font-weight:600;
}
nav ul{
  list-style:none;
  display:flex;
  gap:34px;
  margin:0;
  padding:0;
}
nav a{
  text-decoration:none;
  color:var(--navy-soft);
  font-size:13px;
  letter-spacing:1px;
  font-weight:600;
  padding-bottom:10px;
  position:relative;
  transition:color .2s;
  cursor:pointer;
  background:none;
  border:none;
}
nav a:hover{color:var(--blue-dark);}
nav a.active{color:var(--navy);}
nav a.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--blue);
  border-radius:2px;
}

/* "Помощь" nav item — not a section of its own, just a hover trigger for
   the dropdown (Правила / Политика / Команды). Styled by hand to match
   "nav a" above since it's a <span>, not an <a> (it doesn't navigate
   anywhere itself, only the three links inside the dropdown do). Shares
   .nav-item-dropdown below with the user menu (avatar/nickname) — same
   hover-dropdown mechanics, different trigger markup/styling. */
.nav-item-help{position:relative;}
.nav-link-help{
  display:inline-block;
  text-decoration:none;
  color:var(--navy-soft);
  font-size:13px;
  letter-spacing:1px;
  font-weight:600;
  padding-bottom:10px;
  cursor:pointer;
  transition:color .2s;
  position:relative;
}
.nav-item-help:hover .nav-link-help,
.nav-item-help:focus-within .nav-link-help{color:var(--blue-dark);}
/* Underline "Помощь" itself whenever Правила/Политика/Команды is the open
   section — set server-side on first load ($activeSection in
   header.blade.php) and client-side after an AJAX swap (setActiveLink()
   in app.js). Same treatment as "nav a.active::after" above, just written
   out by hand since .nav-link-help is a <span>, not an <a>. */
.nav-link-help.active{color:var(--navy);}
.nav-link-help.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--blue);
  border-radius:2px;
}
/* Clicking a dropdown link doesn't move the mouse (it's an AJAX swap, not
   a real navigation), so plain :hover would leave the dropdown sitting
   open over the new page. app.js adds this class on click and clears it
   on mouseleave — the !important is needed to win over :hover itself.
   Shared by both hover dropdowns (.nav-item-help and .nav-item-user). */
.nav-item-dropdown.force-closed .nav-dropdown{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.nav-dropdown{
  list-style:none;
  margin:0;
  padding:10px;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:230px;
  background:var(--card);
  border-radius:14px;
  box-shadow:0 20px 40px rgba(20,40,80,.18);
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:60;
}
/* Rightmost nav item (the user menu) — its dropdown must line up exactly
   under the avatar+nickname trigger, not wider or narrower and not
   off-center, so it's anchored with left:0/right:0 against the trigger's
   own box (.nav-item-user, position:relative below) instead of centering
   under it with a fixed min-width like .nav-dropdown's default above. */
.nav-dropdown.nav-dropdown-user{left:0; right:0; transform:none; min-width:0;}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.nav-dropdown a, .nav-dropdown button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border:none;
  background:none;
  border-radius:9px;
  font:inherit;
  font-size:12.5px;
  letter-spacing:.3px;
  font-weight:600;
  color:var(--navy-soft);
  text-decoration:none;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-dropdown a svg, .nav-dropdown button svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  color:#9aa7bc;
}
.nav-dropdown a:hover, .nav-dropdown a.active, .nav-dropdown button:hover{
  background:#eaf3ff;
  color:var(--blue-dark);
}
.nav-dropdown form{margin:0;}

.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
}
/* User menu trigger (avatar + nickname + role) — see .nav-item-user in
   partials/header.blade.php. Square, not rounded — it's a crop of a
   blocky Minecraft skin, a hard edge suits it better than a rounded
   avatar would. Wrapped together with the nickname/role in one padded
   "chip" (.nav-user-trigger) so the whole thing reads as a real control,
   not a label sitting next to a button.
   Deliberately flat 2D here, NOT the skinview3d canvas the profile page
   uses (see session notes #40) — a nav link that's glanced at in passing
   should look straight back at you, not be turned a few degrees off-axis
   the way the profile's 3/4-angle 3D model is. This is just the skin
   texture's own front-facing head pixels, so there's no camera angle to
   get "wrong" in the first place. */
.skin-avatar{
  position:relative;
  width:48px;
  height:48px;
  overflow:hidden;
  flex:0 0 auto;
  background:#eaf3ff;
  box-shadow:0 0 0 1.5px var(--line) inset;
}
/* Two stacked crops of the same texture (--skin-url, set inline per-user in
   header.blade.php) — the overlay/"hat" layer (hair strands, etc. painted
   on the head's second UV layer) drawn on top of the base head layer
   underneath, exactly like real Minecraft renders composite it. Both
   layers are the same 64x64 atlas scaled 6x (so an 8px UV region fills
   this 48px box) and shifted via background-position to the head's front
   UV coordinates — base at (8,8), overlay at (40,8), per the skin format
   (see session notes #37 for the full 12-region map this project has used
   elsewhere). For a skin with nothing painted on the overlay (default
   Steve, most skins) that layer is fully transparent and simply lets the
   base layer show through untouched. */
.skin-avatar-face{
  position:absolute;
  inset:0;
  background-image:var(--skin-url), var(--skin-url);
  background-repeat:no-repeat, no-repeat;
  background-size:384px 384px, 384px 384px;
  background-position:-240px -48px, -48px -48px;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}
/* min-width guards against short usernames (3-4 chars — the avatar+text
   chip above shrinks to fit its content, and .nav-dropdown-user below is
   pinned to that same width via left:0/right:0, see the comment on it
   above). Below ~120px the dropdown gets narrower than "Профиль"/"Выйти"
   themselves need (icon + nowrap text + padding), so the text pokes past
   the dropdown's own rounded edge instead of sitting inside it — this
   keeps the chip (and so the dropdown) at a safe minimum regardless of
   nickname length. Set here rather than on .nav-buttons itself: that's a
   plain flex row and its children size to content by default, so a
   min-width there wouldn't have propagated down to this item at all. */
.nav-item-user{position:relative; min-width:150px;}
.nav-user-trigger{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 16px 6px 6px;
  border-radius:12px;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s;
}
.nav-item-dropdown:hover .nav-user-trigger,
.nav-item-dropdown:focus-within .nav-user-trigger{background:#eaf3ff;}
.nav-user-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}
.nav-item-user:hover .nav-username,
.nav-item-user:focus-within .nav-username{color:var(--blue-dark);}
.nav-username{
  font-weight:800;
  font-size:15px;
  letter-spacing:.3px;
  color:var(--navy);
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .2s;
}
.nav-role{
  font-size:11.5px;
  letter-spacing:.3px;
  color:#8a97ad;
}
.btn-login{
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#3f9bff,#1c6fe0);
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(28,111,224,.35);
  transition:background .2s, box-shadow .2s;
}
.btn-login:hover{
  background:linear-gradient(135deg,#5aacff,#2f7ae5);
  box-shadow:0 12px 26px rgba(28,111,224,.45);
}
.btn-login svg{width:16px;height:16px;}
.btn-register{
  background:transparent;
  color:var(--blue-dark);
  border:1.5px solid #bcd6f7;
  padding:11px 20px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.btn-register:hover{background:#eaf3ff; border-color:var(--blue);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 0 10px;
  min-height:480px;
  perspective:1200px;
}
.island{
  width:41%;
  max-width:680px;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 20px 30px rgba(40,90,170,.18));
  will-change:transform;
}
.island img{width:100%;display:block;}
.island.left{margin-left:-60px;}
.island.right{margin-right:-60px;}

.hero-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 20px;
  position:relative;
  z-index:3;
}
.logo-icon-hero{
  width:150px;
  height:auto;
  margin-bottom:6px;
  position:relative;
}
.hero-title{
  font-size:52px;
  font-weight:800;
  letter-spacing:3px;
  margin:0;
  line-height:1;
  background:radial-gradient(ellipse 140% 240% at 50% -60%, #ffffff 0%, #d3e3f7 20%, #7288a8 45%, var(--navy) 72%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:24px;
  font-weight:700;
  letter-spacing:10px;
  background:linear-gradient(90deg,#3f9bff,#1c6fe0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:2px 0 10px;
}
.hero-tag{
  font-size:12px;
  letter-spacing:4px;
  color:#b7c0d1;
  font-weight:400;
  margin-bottom:28px;
}

.online-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border-radius:16px;
  padding:16px 26px;
  box-shadow:var(--shadow);
  margin-bottom:22px;
}
.online-card .icon{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-dark);
}
.online-card .icon svg{width:26px;height:26px;}
/* min-width keeps the card's proportions steady regardless of how wide
   the live number is — "142 / 1000" and "0 / 40" shouldn't make the
   whole card visibly resize/re-center every poll (session notes #54). */
.online-text{text-align:left; min-width:92px;}
.online-text .label{
  font-size:10px;
  letter-spacing:1.5px;
  color:#93a1b8;
  font-weight:500;
}
.online-text .value{
  font-size:21px;
  font-weight:700;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
.dot{
  width:9px;height:9px;
  border-radius:50%;
  background:#39d97a;
  box-shadow:0 0 0 4px rgba(57,217,122,.18);
  margin-left:4px;
  transition:background .25s ease, box-shadow .25s ease;
}
/* Subtle "alive" pulse — only while genuinely online (not loading/offline). */
.dot:not(.is-loading):not(.is-offline){
  animation:online-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes online-dot-pulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(57,217,122,.18); }
  50%{ box-shadow:0 0 0 7px rgba(57,217,122,.05); }
}
/* Before the first /server-status response lands — see hero.blade.php. */
.dot.is-loading{
  background:#c7cedc;
  box-shadow:0 0 0 4px rgba(199,206,220,.18);
}
.dot.is-offline{
  background:#ff4d4f;
  box-shadow:0 0 0 4px rgba(255,77,79,.18);
}

.btn-connect{
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,#3f9bff,#1c6fe0);
  color:#fff;
  border:none;
  padding:16px 30px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  letter-spacing:1.5px;
  cursor:pointer;
  box-shadow:0 14px 26px rgba(28,111,224,.4);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-connect:hover{
  transform:translateY(-4px) scale(1.045);
  box-shadow:0 20px 36px rgba(28,111,224,.5);
}
.btn-connect:active{
  transform:translateY(-1px) scale(1.01);
}
.btn-connect:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.btn-connect:disabled:hover{
  transform:none;
  box-shadow:none;
}
.btn-connect:hover .arrow{
  transform:translateX(4px);
}
.btn-connect svg{width:18px;height:18px;}
.btn-connect .arrow{margin-left:6px; transition:transform .25s ease;}

/* ---------- MODS ---------- */
.mods{
  position:absolute;
  right:36px;
  top:374px;
  display:flex;
  gap:26px;
  padding:18px 26px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(31,90,180,.08);
  z-index:4;
}
.mods.left{
  right:auto;
  left:36px;
}
.mod-item{
  text-align:center;
  width:88px;
}
.mod-icon-frame{
  width:54px;height:54px;
  margin:0 auto 12px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Colour comes from CSS custom properties set inline per mod (sampled from
   each mod's own icon artwork — see the $modColors array in hero.blade.php)
   rather than a fixed set of named classes, so a diamond's colour always
   matches the icon sitting inside it. Falls back to the original blue if a
   mod is ever added without a computed colour. */
.mod-icon-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--frame-bg1, #eef5ff), var(--frame-bg2, #d7e8fb));
  border:1.5px solid var(--frame-border, #bcd6f7);
  border-radius:9px;
  transform:rotate(45deg);
  box-shadow:0 8px 16px var(--frame-shadow, rgba(31,90,180,.16)), inset 0 1px 0 rgba(255,255,255,.55);
  opacity:.85;
}
/* Sized/positioned by frame (not by .mod-item) so any icon placed inside a
   .mod-icon-frame — the hero showcase, a family header, a plain list row —
   sits centred and on top of the diamond, scaled to that frame's size. */
.mod-icon-frame img{
  width:56%;height:56%;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 3px 6px rgba(30,60,120,.22));
}
.mod-icon-frame img.pixel-icon{
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}
.mod-item .name{
  font-size:12px;
  font-weight:800;
  color:var(--navy);
}
.mod-item .desc{
  font-size:9px;
  letter-spacing:.5px;
  color:#96a3b8;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.3;
  margin-top:2px;
}

/* ---------- DYNAMIC CONTENT (AJAX-swapped block) ---------- */
#dynamic-content{
  position:relative;
  min-height:200px;
}
#dynamic-content.is-loading{
  opacity:.35;
  pointer-events:none;
  transition:opacity .15s ease;
}
#dynamic-content.is-ready{
  animation:section-fade-in .35s ease both;
}
@keyframes section-fade-in{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- NEWS ---------- */
.news-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:70px 0 34px;
  position:relative;
  z-index:3;
}
.news-heading .line{
  width:70px;height:2px;
  background:linear-gradient(90deg,transparent,#b9cde8);
}
.news-heading .line.r{background:linear-gradient(90deg,#b9cde8,transparent);}
.news-heading h2{
  margin:0;
  font-size:26px;
  letter-spacing:5px;
  font-weight:800;
  color:var(--navy);
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  max-width:1120px;
  margin:0 auto;
  padding-bottom:16px;
  position:relative;
  z-index:3;
}
.news-card{
  /* Now an <a> (see sections/home.blade.php — cards are clickable,
     session notes #45), not an <article>: display:flex below already
     overrides the anchor's default inline, these two just undo the
     browser's default link styling so it still reads as a card, not
     a link. */
  text-decoration:none;
  color:inherit;
  background:var(--card);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.news-card:hover{
  transform:translateY(-4px) scale(1.025);
  box-shadow:0 18px 36px rgba(31,90,180,.18);
}
.news-thumb{
  position:relative;
  height:104px;
}
.news-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.badge{
  position:absolute;
  top:14px;left:14px;
  background:#2f8dff;
  color:#fff;
  font-size:10px;
  font-weight:400;
  letter-spacing:1px;
  padding:6px 12px;
  border-radius:6px;
}
.news-body{
  padding:20px 22px 22px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.news-body h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:800;
  color:var(--navy);
}
.news-body p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#8493aa;
  flex:1;
}
.news-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
/* Groups .news-date + .news-views together on the left of .news-foot/
   .news-list-foot, so .news-arrow (card only) still gets pushed all the
   way right by justify-content:space-between on the parent. */
.news-meta-group{
  display:flex;
  align-items:center;
  gap:16px;
}
.news-date{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:#93a1b8;
  font-weight:600;
}
.news-date svg{width:14px;height:14px;}
.news-views{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:#93a1b8;
  font-weight:600;
}
.news-views svg{width:14px;height:14px;}
.news-arrow{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-dark);
}
.news-arrow svg{width:18px;height:18px;}

.news-more{
  display:flex;
  justify-content:center;
  margin-top:6px;
}
.btn-all-news{
  background:transparent;
  color:var(--blue-dark);
  border:1.5px solid #bcd6f7;
  padding:13px 30px;
  border-radius:11px;
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
}
.btn-all-news:hover{background:#eaf3ff; border-color:var(--blue); transform:translateY(-2px);}

/* ---------- NEWS LIST (страница «Новости») ---------- */
/* The home page shows the latest 3 news as a card grid (.news-grid above);
   the full "Новости" page shows the whole history as a single-column list
   of rows instead — reuses .badge/.news-date/.news-arrow from the card so
   the two views still read as the same design language. */
.news-list{
  max-width:900px;
  margin:0 auto 20px;
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  z-index:3;
}
/* Shown instead of .news-list when the `news` table has nothing published
   (see sections/news.blade.php) — same card treatment as .news-list itself
   so an empty state doesn't look like a layout gap. */
.news-empty{
  max-width:900px;
  margin:0 auto 20px;
  padding:40px 26px;
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  text-align:center;
  color:var(--navy-soft);
  font-size:14px;
  position:relative;
  z-index:3;
}
.news-list-row{
  /* Now an <a> too (see sections/news.blade.php, session notes #45) —
     same reasoning as .news-card above. */
  text-decoration:none;
  color:inherit;
  display:flex;
  gap:22px;
  padding:22px 26px;
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.news-list-row:last-child{border-bottom:none;}
.news-list-row:hover{background:#f6faff;}
.news-list-thumb{
  position:relative;
  width:150px;
  height:100px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
}
.news-list-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.news-list-thumb .badge{
  top:8px; left:8px;
  padding:5px 10px;
  font-size:9px;
}
.news-list-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.news-list-body h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:800;
  color:var(--navy);
}
.news-list-body p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#8493aa;
  flex:1;
}
.news-list-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}

/* ---------- CONTACTS PAGE (страница «Контакты») ---------- */
/* The only real contact channel is Discord. Two plain rectangular panels
   (light pitch + dark Discord-widget card) with no hard seam at all — the
   site's own floating crystal cubes are scattered loosely across the whole
   hero, straddling both the light and dark halves in different spots, at
   different sizes and small random tilts, for a deliberately careless
   "clutter" feel instead of a neat line down the middle. */
.contacts-hero{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:clamp(420px, 58vh, 560px);
  max-width:1120px;
  margin:0 auto 20px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
  z-index:3;
  background:linear-gradient(160deg, #ffffff 0%, #eef4fc 100%);
}
.contacts-cubes{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.contacts-cubes .cube{opacity:.92;}
.contacts-hero-light{
  position:relative;
  z-index:2;
  flex:1 1 46%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:50px 40px 50px 54px;
}
.contacts-kicker{
  margin-bottom:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--blue-dark);
}
.contacts-hero-light h2{
  margin:0 0 16px;
  font-size:29px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--navy);
}
.contacts-hero-light p{
  margin:0 0 26px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--navy-soft);
  max-width:320px;
}
.discord-invite-plain{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:9px;
  padding:11px 18px;
  border-radius:11px;
  background:#eaf3ff;
  border:1px solid #d7e7fb;
  color:var(--blue-dark);
  font-weight:700;
  font-size:13px;
  letter-spacing:.3px;
}
.contacts-hero-dark{
  position:relative;
  z-index:1;
  flex:1 1 54%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 44px;
  background:
    radial-gradient(480px 320px at 75% 0%, rgba(127,192,255,.35) 0%, transparent 65%),
    linear-gradient(165deg, #32456c 0%, #22304d 55%, #11182a 100%);
}
.discord-widget{
  position:relative;
  z-index:1;
  width:100%;
  max-width:280px;
  background:rgba(15,20,38,.55);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(6px);
  box-shadow:0 20px 44px rgba(5,8,24,.45);
}
.discord-widget-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg,#5865f2,#4752c4);
}
.discord-widget-head svg{width:20px; height:20px; fill:#fff; flex-shrink:0;}
.discord-widget-head span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.4px;
  color:#fff;
}
.discord-widget-dot{
  margin-left:auto;
  width:8px; height:8px;
  border-radius:50%;
  background:#3ba55c;
  box-shadow:0 0 0 3px rgba(59,165,92,.25);
}
.discord-widget-body{
  padding:22px 18px 24px;
  text-align:center;
}
.discord-widget-body p{
  margin:0 0 18px;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.btn-discord-join{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:#fff;
  color:#4752c4;
  border:none;
  padding:13px 18px;
  border-radius:11px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(5,8,24,.35);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-discord-join:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 32px rgba(5,8,24,.42);
}
.btn-discord-join:active{transform:translateY(-1px) scale(1.005);}
.btn-discord-join svg{width:17px; height:17px; fill:#5865f2; flex-shrink:0;}
.btn-discord-join .arrow{width:15px; height:15px; margin-left:1px; transition:transform .25s ease;}
.btn-discord-join:hover .arrow{transform:translateX(3px);}

/* ---------- TOP PLAYERS ---------- */
.leaders{
  max-width:820px;
  margin:0 auto;
  padding:0 0 20px;
  position:relative;
  z-index:3;
}
.leaders-card{
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.leader-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 26px;
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.leader-row:last-child{border-bottom:none;}
.leader-row:hover{background:#f6faff;}
.leader-rank{
  width:30px;
  font-size:14px;
  font-weight:800;
  color:#a7b2c4;
  text-align:center;
  flex-shrink:0;
}
.leader-row.top .leader-rank{
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:13px;
}
.leader-row.rank-1 .leader-rank{background:linear-gradient(135deg,#ffd873,#e8a812);}
.leader-row.rank-2 .leader-rank{background:linear-gradient(135deg,#dbe4ee,#a9b6c8);}
.leader-row.rank-3 .leader-rank{background:linear-gradient(135deg,#e5b083,#b9773f);}
.leader-avatar{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:14px;
  flex-shrink:0;
}
.leader-info{flex:1; min-width:0;}
.leader-name{
  font-size:14px;
  font-weight:700;
  color:var(--navy);
}
.leader-label{
  font-size:10px;
  letter-spacing:.5px;
  color:#9aa5b8;
  text-transform:uppercase;
  margin-top:1px;
}
.leader-time{
  font-size:14px;
  font-weight:700;
  color:var(--blue-dark);
  flex-shrink:0;
}

@media (max-width: 560px){
  .leader-row{padding:14px 16px; gap:10px;}
  .leader-name{font-size:13px;}
  .leader-time{font-size:12px;}
}

/* ---------- INFO SECTIONS (О сервере / О клане / Правила / Карта / Контакты) ---------- */
.info-card{
  max-width:920px;
  margin:0 auto 20px;
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:36px 40px 40px;
  position:relative;
  z-index:3;
}
.info-lead{
  margin:0 0 24px;
  font-size:15px;
  line-height:1.7;
  color:#5b6b85;
}
.info-lead code, .info-note code{
  background:#eef4fb;
  color:var(--blue-dark);
  border-radius:5px;
  padding:2px 6px;
  font-size:13px;
}
.info-list{
  margin:0 0 20px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.info-list li{
  position:relative;
  padding-left:26px;
  font-size:13.5px;
  line-height:1.6;
  color:#5b6b85;
}
.info-list li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:9px;height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,#3f9bff,#1c6fe0);
}
.info-note{
  margin:0;
  font-size:13px;
  color:#93a1b8;
}
.info-note a, .info-lead a{
  color:var(--blue-dark);
  font-weight:600;
  text-decoration:none;
}
.info-note a:hover, .info-lead a:hover{text-decoration:underline;}
.info-rules{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.info-rules li{
  font-size:13.5px;
  line-height:1.6;
  color:#5b6b85;
  padding-left:6px;
}
.info-rules li::marker{
  font-weight:800;
  color:var(--blue-dark);
}

/* ---------- COMMAND LIST (Команды сервера) ---------- */
.cmd-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cmd-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 14px;
  padding:12px 16px;
  border-radius:10px;
  background:#f6faff;
  border:1px solid var(--line);
}
.cmd-code{
  flex:0 0 auto;
  font-family:'Courier New', monospace;
  font-size:12.5px;
  font-weight:700;
  color:var(--blue-dark);
  background:#eaf3ff;
  padding:4px 10px;
  border-radius:6px;
  white-space:nowrap;
}
.cmd-desc{
  font-size:13px;
  line-height:1.6;
  color:#5b6b85;
}

/* ---------- SKIN RENDERER (профиль + header avatar) ----------
   A real 3D model (skinview3d, three.js-based — see app.js) instead of the
   flat CSS crops this used to be. The flat "paper doll" approach (front/
   back crops swapped on hover) couldn't show hair drawn on the head's
   side textures or a genuinely inflated overlay cube, and kept coming up
   short against real Minecraft renders — see session notes #36-38 for the
   escalating patches, and #39 for the actual switch. skinview3d owns the
   canvas entirely (rotation, lighting, the model itself); the rules below
   are just its container framing. */
.skin-viewer-canvas{
  display:block;
  margin:0 auto;
  cursor:grab;
}
.skin-viewer-canvas:active{cursor:grabbing;}

/* Podium behind the skin figure — a soft gradient panel plus a drawn
   ground-shadow ellipse, purely decorative (aria-hidden'd where used). */
.skin-stage{
  position:relative;
  width:216px;
  margin:0 auto 16px;
  padding:26px 0 24px;
  border-radius:20px;
  background:
    radial-gradient(ellipse at 50% 90%, rgba(63,155,255,.24), transparent 65%),
    linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%);
  border:1px solid var(--line);
  overflow:hidden;
}
.skin-stage::after{
  content:"";
  position:absolute;
  left:50%; bottom:22px;
  width:118px; height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(40,90,170,.24), transparent 72%);
  z-index:0;
}
.skin-stage .skin-viewer-canvas{position:relative; z-index:1;}

.btn-skin-change{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:10px 16px;
  border:1.5px solid var(--blue);
  border-radius:10px;
  background:#fff;
  color:var(--blue-dark);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.btn-skin-change:hover{background:var(--blue); color:#fff;}
.btn-skin-change svg{width:15px; height:15px; flex:0 0 auto;}
.btn-skin-change input[type="file"]{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.btn-skin-change.is-loading{opacity:.6; pointer-events:none;}
.skin-upload-form{margin-top:0;}
.skin-upload-form .field-error{margin-top:6px;}
.skin-upload-form .modal-msg{margin-top:6px;}

/* ---------- PROFILE PAGE ----------
   Deliberately not .info-card like the other sections — this is the
   player's own page, so it borrows the hero's premium feel instead
   (gradient text, a soft glow background, a couple of the same floating
   cubes as .hero, see partials/hero-decor.blade.php) rather than sitting
   in a plain flat card like Правила/Контакты/etc. */
.profile-hero{
  position:relative;
  overflow:hidden;
  max-width:960px;
  margin:0 auto 20px;
  padding:48px 52px;
  border-radius:26px;
  background:
    radial-gradient(circle at 12% 18%, rgba(120,190,255,.22), transparent 55%),
    radial-gradient(circle at 90% 88%, rgba(63,155,255,.16), transparent 50%),
    var(--card);
  box-shadow:0 24px 60px rgba(31,90,180,.16);
  display:flex;
  align-items:center;
  gap:52px;
}
.profile-hero-decor{position:absolute; inset:0; z-index:0; pointer-events:none;}
/* cube-4.png (41x46) / cube-5.png (61x68) — the two highest-resolution cube
   assets in public/images, shown near their native size so they stay crisp
   instead of the blurry 3-4x upscale the smaller cubes needed at this size. */
.profile-cube{position:absolute; filter:drop-shadow(0 10px 18px rgba(40,90,170,.18)); opacity:.85;}
.profile-cube.c1{width:61px; top:8%;  right:8%;  transform:rotate(-14deg);}
.profile-cube.c2{width:41px; top:62%; right:23%; transform:rotate(18deg);}

.profile-skin-col{position:relative; z-index:1; flex:0 0 auto;}
.profile-info-col{position:relative; z-index:1; flex:1; min-width:0;}

.profile-role-badge{
  display:inline-block;
  background:#eaf3ff;
  color:var(--blue-dark);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:20px;
  margin-bottom:12px;
}
.profile-username{
  margin:0 0 26px;
  font-size:36px;
  font-weight:800;
  letter-spacing:.5px;
  background:linear-gradient(135deg,#3f9bff,#1c6fe0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.profile-stats{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}
.profile-stat{
  display:flex;
  align-items:center;
  gap:14px;
  background:#f6faff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 16px;
}
.profile-stat-icon{
  width:36px;
  height:36px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#eaf3ff;
  color:var(--blue-dark);
}
.profile-stat-icon svg{width:17px; height:17px;}
.profile-stat-text{display:flex; flex-direction:column; gap:2px;}
.profile-stat-label{font-size:12px; color:#5b6b85;}
.profile-stat-value{font-size:13.5px; font-weight:700; color:var(--navy);}

/* Основное / Плащ / Статус / Префикс — own namespace (.profile-tab*), not
   a generalized version of .clan-tab* above, even though the visual style
   (bottom-border nav + sliding underline) is deliberately the same. Kept
   separate so nothing here can affect the already-shipped clan tabs. */
.profile-tabs-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0 22px;
  margin-bottom:20px;
  border-bottom:1.5px solid var(--line);
}
.profile-tab-btn{
  background:none;
  border:none;
  font:inherit;
  font-weight:700;
  font-size:13px;
  letter-spacing:.4px;
  color:var(--navy-soft);
  padding:9px 2px 12px;
  margin-bottom:-1.5px;
  cursor:pointer;
  position:relative;
  transition:color .2s;
}
.profile-tab-btn:hover{color:var(--blue-dark);}
.profile-tab-btn.active{color:var(--navy);}
.profile-tab-btn.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1.5px;
  height:2px;
  background:var(--blue);
  border-radius:2px;
}
.profile-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:34px 20px;
  text-align:center;
  background:#f6faff;
  border:1px dashed var(--line);
  border-radius:12px;
  color:#8a97ad;
}
.profile-placeholder svg{width:26px; height:26px; opacity:.7;}
.profile-placeholder-text{font-size:13px; font-weight:600;}

@media (max-width: 760px){
  .profile-hero{flex-direction:column; text-align:center; padding:36px 24px;}
  .profile-info-col{display:flex; flex-direction:column; align-items:center;}
  .profile-stat{width:100%;}
  .profile-tabs-nav{justify-content:center;}
  /* On the stacked mobile layout the info column sits right under the
     cubes' absolute top/right coordinates (sized for the wide desktop
     card), so they'd otherwise land on top of the tabs/username text. */
  .profile-hero-decor{display:none;}
}

/* ---------- SERVER STATS (О сервере) ---------- */
.server-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:24px;
}
.stat-tile{
  background:#f6faff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 18px;
  text-align:center;
}
.stat-value{
  font-size:20px;
  font-weight:800;
  color:var(--blue-dark);
  margin-bottom:6px;
}
.stat-label{
  font-size:12px;
  letter-spacing:.4px;
  color:#8493aa;
  text-transform:uppercase;
  font-weight:700;
}

/* ---------- MODS LIST (О сервере) ---------- */
.mods-section-title{
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 14px;
}
.mods-section-title-client{
  margin-top:32px;
}

/* Two-column row list rather than a wall of icon tiles — reads much
   better once you're past half a dozen mods, and leaves room for the
   name next to the icon instead of squeezed underneath it. */
.mods-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2px 28px;
}
.mod-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 6px;
  border-bottom:1px solid var(--line);
  border-radius:8px;
  transition:background .15s ease;
}
.mod-row:hover{
  background:#f6faff;
}
.mod-row .name{
  font-size:13px;
  font-weight:700;
  color:var(--navy);
}

/* No diamond frame here — just the icon on its own, with a thin colour
   tag standing in for the frame's colour-coding. Reads much calmer once
   you have 40+ of them in a row than a wall of identical rotated tiles. */
.mod-icon-plain{
  width:30px;height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.mod-icon-plain img{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(30,60,120,.25));
}
/* Colour comes from an inline style (sampled per-icon in the Blade view)
   rather than a fixed set of modifier classes — every mod gets its own
   shade instead of one of six repeating presets. */
.mod-tag{
  width:4px;
  height:22px;
  border-radius:3px;
  flex-shrink:0;
}

/* Thaumcraft / Botania / Blood Magic get their own highlighted card so
   their addons read as a nested group instead of blending into the
   surrounding alphabet. */
.mod-family{
  grid-column:1 / -1;
  background:#f6faff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px 8px;
  margin:6px 0 10px;
}
.mod-family-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:10px;
  border-bottom:1.5px solid #dbe9fb;
}
.mod-family-head .mod-icon-plain{
  width:44px;height:44px;
}
.mod-family-head .mod-tag{
  width:5px;
  height:34px;
}
.mod-family-head .name{
  font-size:15px;
  font-weight:800;
}
.mod-family-addons{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 24px;
}
.mod-family-addons .mod-row{
  padding:7px 4px;
  border-bottom-color:#dbe9fb;
}
.mod-family-addons .mod-row:hover{
  background:#eaf3ff;
}
.mod-family-addons .mod-icon-plain{
  width:24px;height:24px;
}
.mod-family-addons .mod-tag{
  height:16px;
}

.map-embed{
  margin-bottom:24px;
}
.map-embed-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:420px;
  max-height:640px;
  border-radius:14px;
  overflow:hidden;
  background:#0f1b2d;
  box-shadow:var(--shadow);
}
.map-embed-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.map-embed-fallback{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:12px 18px;
  border-radius:11px;
  background:#eaf3ff;
  border:1px solid #d5e6fb;
}
.map-embed-fallback p{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:#5b6b85;
  max-width:560px;
}
.map-embed-fallback a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border-radius:9px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:12.5px;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .2s ease, transform .2s ease;
}
.map-embed-fallback a:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
}
@media (max-width: 640px){
  .map-embed-frame{
    aspect-ratio:auto;
    min-height:280px;
    max-height:420px;
  }
  .map-embed-fallback{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .map-embed-fallback a{
    justify-content:center;
  }
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.contact-tile{
  background:#f6faff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
}
.contact-label{
  font-size:10px;
  letter-spacing:1.5px;
  color:#93a1b8;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:6px;
}
.contact-value{
  font-size:15px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:4px;
}
.contact-desc{
  font-size:12.5px;
  color:#8493aa;
  line-height:1.5;
}

/* ---------- CLAN PAGE (О клане) ---------- */
.clan-banner{
  max-width:920px;
  margin:0 auto 20px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow);
  z-index:3;
}
.clan-banner-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 42%;
  transform:scale(1.02);
}
.clan-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,12,26,.28) 0%, rgba(9,10,22,.72) 62%, rgba(7,8,18,.92) 100%);
}
.clan-banner-content{
  position:relative;
  z-index:1;
  padding:52px 40px 42px;
  text-align:center;
  color:#fff;
}
.clan-emblem{
  width:88px;
  height:auto;
  margin-bottom:10px;
  filter:drop-shadow(0 0 26px rgba(150,120,255,.55));
}
.clan-name{
  font-size:38px;
  font-weight:800;
  letter-spacing:4px;
  color:#fff;
  text-shadow:0 0 22px rgba(150,125,255,.6), 0 2px 12px rgba(0,0,0,.45);
}
.clan-tagline{
  max-width:560px;
  margin:12px auto 20px;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.8);
}
.clan-motto{
  display:inline-block;
  font-style:italic;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.2px;
  color:#e2d4ff;
  padding:10px 24px;
  border:1px solid rgba(202,175,255,.4);
  border-radius:30px;
  background:rgba(140,100,255,.14);
}

.clan-tabs-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0 26px;
  margin-bottom:30px;
  border-bottom:1.5px solid var(--line);
}
.clan-tab-btn{
  background:none;
  border:none;
  font:inherit;
  font-weight:700;
  font-size:13px;
  letter-spacing:.4px;
  color:var(--navy-soft);
  padding:10px 2px 13px;
  margin-bottom:-1.5px;
  cursor:pointer;
  position:relative;
  transition:color .2s;
}
.clan-tab-btn:hover{color:var(--blue-dark);}
.clan-tab-btn.active{color:var(--navy);}
.clan-tab-btn.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1.5px;
  height:2px;
  background:var(--blue);
  border-radius:2px;
}

.clan-callout{
  background:linear-gradient(135deg,#f7f2ff,#ece2fb);
  border:1px solid #ded0f6;
  border-radius:14px;
  padding:22px 26px;
  margin:22px 0 30px;
}
.clan-callout-label{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
  color:#7c5cd6;
  margin-bottom:8px;
}
.clan-callout p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:#453a63;
}

.clan-values{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin:14px 0 32px;
}
.value-card{
  background:#f6faff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
}
.value-num{
  position:absolute;
  top:8px; right:14px;
  font-size:26px;
  font-weight:800;
  color:rgba(47,141,255,.16);
  line-height:1;
}
.value-title{
  position:relative;
  z-index:1;
  font-size:13.5px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 6px;
  padding-right:26px;
}
.value-desc{
  position:relative;
  z-index:1;
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:#8493aa;
}

.clan-origin-teaser p{
  font-size:13.5px;
  line-height:1.7;
  color:#5b6b85;
  margin:0 0 14px;
}
.clan-read-more{
  background:none;
  border:none;
  padding:0;
  margin-top:4px;
  font:inherit;
  font-weight:700;
  font-size:13px;
  color:var(--blue-dark);
  cursor:pointer;
  transition:color .2s;
}
.clan-read-more:hover{color:var(--blue); text-decoration:underline;}

/* ----- Устав tab ----- */
.clan-charter-kicker{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
  color:#93a1b8;
  margin-bottom:8px;
}
.charter-block{margin:26px 0;}
.charter-block:first-of-type{margin-top:22px;}
.charter-block h3{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
  color:var(--navy);
}
.penalty-scale{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}
.penalty-step{
  background:#f6faff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  font-size:12.5px;
  font-weight:700;
  color:var(--navy);
}
.penalty-arrow{
  color:#b7c0d1;
  font-size:14px;
  font-weight:700;
}
.charter-induction{margin:0;}

/* ----- Предыстория tab ----- */
.lore-kicker{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
  color:#93a1b8;
  margin-bottom:8px;
}
.lore-heading{
  margin:4px 0 22px;
  font-size:20px;
  font-weight:800;
  color:var(--navy);
}
.lore-article{max-width:720px; margin:0 auto;}
.lore-article p{
  font-size:14px;
  line-height:1.85;
  color:#5b6b85;
  margin:0 0 18px;
}
.lore-quote{
  margin:28px 0;
  padding:20px 26px;
  border-left:3px solid var(--blue);
  background:#f6faff;
  border-radius:0 12px 12px 0;
  font-size:15px;
  font-style:italic;
  font-weight:600;
  color:var(--navy);
  line-height:1.7;
}
.lore-illustration{
  display:block;
  width:100%;
  max-width:420px;
  margin:8px auto 30px;
  border-radius:16px;
  filter:drop-shadow(0 14px 30px rgba(31,90,180,.18));
}

/* ----- Состав tab ----- */
.roster-intro{margin-bottom:22px;}
.roster-group{margin-bottom:28px;}
.roster-group:last-child{margin-bottom:0;}
.roster-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:10px;
}
.roster-rank-dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.roster-count{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  color:#93a1b8;
  background:#f0f4fa;
  padding:3px 10px;
  border-radius:999px;
  text-transform:none;
  letter-spacing:0;
}
.roster-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.roster-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.roster-row:hover{background:#f6faff; border-color:var(--line);}
.roster-avatar{
  width:34px;height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:13px;
  flex-shrink:0;
}
.roster-name{
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.roster-you-badge{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#3f9bff,#1c6fe0);
  padding:3px 8px;
  border-radius:999px;
  flex-shrink:0;
}
.roster-link-icon{
  width:14px;height:14px;
  color:#b7c0d1;
  flex-shrink:0;
  transition:color .15s;
}
.roster-row:hover .roster-link-icon{color:var(--blue-dark);}

.rank-glava{background:linear-gradient(135deg,#ffd873,#e8a812);}
.rank-zamestitel{background:linear-gradient(135deg,#c9b6ff,#7c5cd6);}
.rank-ofitser{background:linear-gradient(135deg,#7fc0ff,#1c6fe0);}
.rank-doverennyy{background:linear-gradient(135deg,#5eead4,#0d9488);}
.rank-uchastnik{background:linear-gradient(135deg,#cbd5e1,#8ea0b8);}
.rank-novobranets{background:linear-gradient(135deg,#8fe0a8,#22a35a);}

@media (max-width: 640px){
  .info-card{padding:26px 20px 30px;}
  .contact-grid{grid-template-columns:1fr;}
  .server-stats{grid-template-columns:1fr;}
  .mods-list, .mod-family-addons{grid-template-columns:1fr;}
  .mod-family{padding:14px 14px 6px;}
  .clan-banner-content{padding:40px 22px 32px;}
  .clan-name{font-size:28px; letter-spacing:2px;}
  .clan-emblem{width:70px;}
  .clan-tabs-nav{gap:0 14px;}
  .clan-tab-btn{font-size:11.5px; padding:8px 2px 11px;}
  .clan-values, .roster-list{grid-template-columns:1fr;}
  .penalty-scale{gap:6px 8px;}
  .news-list-row{flex-direction:column;}
  .news-list-thumb{width:100%;height:170px;}
  .contacts-hero{min-height:auto; border-radius:20px; flex-direction:column;}
  .contacts-hero-light{max-width:100%; padding:32px 22px 24px;}
  .contacts-hero-light h2{font-size:23px;}
  .contacts-hero-light p{max-width:100%;}
  .contacts-cubes{display:none;}
  .contacts-hero-dark{padding:26px 22px 32px;}
  .discord-widget{max-width:100%;}
}

/* ---------- FOOTER ---------- */
footer{
  position:relative;
  z-index:3;
  border-top:1px solid var(--line);
  padding:26px 0 32px;
}
.footer-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:start;
}
.footer-brand img{
  width:26px;height:26px;
  object-fit:contain;
  filter:grayscale(1) opacity(.55);
}
.footer-brand-text{
  line-height:1.35;
}
.footer-brand-text .fb1{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  color:#9aa5b8;
}
.footer-brand-text .fb2{
  font-size:11px;
  color:#b3bdcc;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:center;
}
.footer-discord{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 20px;
  border-radius:20px;
  background:var(--card);
  color:#5b6b85;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  box-shadow:0 6px 16px rgba(31,90,180,.08);
  transition:color .2s, transform .2s;
}
.footer-discord:hover{color:var(--blue-dark); transform:translateY(-2px);}
.footer-discord svg{width:16px;height:16px;}
.footer-top{
  width:40px;height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#3f9bff,#1c6fe0);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(28,111,224,.35);
  transition:transform .2s;
  flex-shrink:0;
  justify-self:end;
}
.footer-top:hover{transform:translateY(-3px);}
.footer-top svg{width:18px;height:18px;}

/* ---------- MODALS (Войти / Регистрация) ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(20,30,50,.45);
  backdrop-filter:blur(2px);
  z-index:50;
  opacity:0;
  transition:opacity .2s ease;
}
.modal-backdrop.is-open{opacity:1;}

.modal{
  position:fixed;
  inset:0;
  z-index:51;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.modal-card{
  background:var(--card);
  border-radius:20px;
  padding:34px 34px 28px;
  width:100%;
  max-width:400px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  box-shadow:0 30px 60px rgba(20,40,80,.28);
  position:relative;
  transform:translateY(14px) scale(.97);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.modal.is-open .modal-card{
  transform:translateY(0) scale(1);
}

/* Registration popup as one merged card, split into an art panel + the
   form panel (register.blade.php only) — matches the two-panel reference
   the user sent. The art panel's background is a painted gradient with the
   character artwork layered on top: the artwork itself is a transparent
   cutout (no opaque background of its own), so the gradient is what makes
   the panel read as a single filled rectangle instead of a floating
   sticker on empty space. On narrow screens there's no room for a second
   panel, so it collapses back to a single-column card (the .modal-card
   base rules above already give it the right padding/width there). */
.modal-card-register{
  overflow:hidden; /* clips both panels to the card's rounded corners */
}
.modal-card-body{
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
.modal-art{
  display:none;
}
@media (min-width:900px){
  .modal-card-register{
    display:flex;
    align-items:stretch;
    padding:0;
    max-width:740px;
    max-height:calc(100vh - 40px);
  }
  .modal-art{
    display:block;
    /* flex:1 (flex-basis:0) looked like an even split but isn't one once
       one side has padding and the other doesn't: with a 0 flex-basis,
       Chrome/Firefox distribute the *content-box* free space equally and
       then add each side's own padding on top — box-sizing:border-box on
       the item does NOT correct this (checked in a real browser). A
       percentage flex-basis doesn't have that problem — it resolves
       against the border-box container width, padding included on both
       sides — so this is a real 50/50 split with .modal-card-body below. */
    flex:0 1 50%;
    min-width:0;
    /* Dark background, on purpose — the artwork's magic-glow effects only
       read against a dark backdrop; on a light background they wash out
       and the art loses its "wow" factor (checked both side by side).
       Base blue is the site's own --blue/--blue-dark (#3f9bff/#1c6fe0),
       darkened a notch — at full brightness the flat blue competed with
       the artwork's own glow and made the transparent-PNG edges show. */
    background:
      radial-gradient(circle at 50% 65%, rgba(120,190,255,.2), transparent 55%),
      url('../images/modal/register-art.png') center 58%/120% no-repeat,
      linear-gradient(135deg, #2c74c9 0%, #10336f 100%);
  }
  .modal-card-register .modal-card-body{
    flex:0 1 50%; /* same fix as .modal-art — see comment there */
    min-width:0;
    padding:34px 34px 28px;
  }
}
.modal-close{
  position:absolute;
  top:16px; right:16px;
  width:30px;height:30px;
  border-radius:50%;
  border:none;
  background:#f0f4fa;
  color:#8493aa;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.modal-close:hover{background:#e2ecfb; color:var(--blue-dark);}
.modal-title{
  margin:0 0 4px;
  font-size:20px;
  font-weight:800;
  color:var(--navy);
}
.modal-subtitle{
  margin:0 0 22px;
  font-size:13px;
  color:#93a1b8;
}
.modal-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modal-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  color:#5b6b85;
  text-transform:uppercase;
}
.modal-field input{
  font:inherit;
  text-transform:none;
  font-weight:400;
  padding:11px 14px;
  border-radius:10px;
  border:1.5px solid var(--line);
  background:#f8fafd;
  color:var(--navy);
  transition:border-color .2s, background .2s;
}
.modal-field input:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
}
.modal-field input::placeholder{
  color:#b7c3d6;
  opacity:1;
}
.field-error{
  min-height:14px;
  font-size:11px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color:#e2554f;
}
.field-error:empty{min-height:0;}
.field-hint{
  min-height:14px;
  font-size:11px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color:#93a1b8;
}
.field-hint:empty{min-height:0;}
.field-hint.is-success{color:#2f9c66;}
.field-hint.is-error{color:#e2554f;}

/* "Логин" field on the register popup — input + reserved "Проверить"
   button for a future nickname-availability check against the users
   table. Everything else about .modal-field still applies (the row is
   just one more stacked child, in place of a bare <input>). */
.modal-field-row{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.modal-field-row input{flex:1 1 auto; min-width:0;}
.btn-check-login{
  flex:0 0 auto;
  padding:0 14px;
  border-radius:10px;
  border:1.5px solid var(--line);
  background:#f0f4fa;
  color:var(--blue-dark);
  font:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.btn-check-login:hover{background:#e2ecfb; border-color:var(--blue);}
.btn-check-login:disabled{opacity:.6; cursor:default; pointer-events:none;}

/* Reserved slot for the anti-bot captcha (Cloudflare Turnstile, most
   likely) — plain placeholder box until a site key exists. */
.modal-captcha-slot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-radius:10px;
  border:1.5px dashed var(--line);
  background:#f8fafd;
  color:#93a1b8;
  font-size:11.5px;
  font-weight:600;
  line-height:1.4;
  text-transform:none;
  letter-spacing:0;
}
.modal-captcha-slot svg{width:20px; height:20px; flex-shrink:0; color:#b7c3d6;}

/* Consent checkboxes (rules/privacy policy + data processing) below the
   captcha slot — plain rows, not .modal-field (no uppercase label / no
   column layout, just checkbox + wrapping text side by side). */
.modal-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  font-weight:400;
  line-height:1.55;
  color:#5b6b85;
  cursor:pointer;
}
.modal-checkbox input{
  flex-shrink:0;
  width:16px; height:16px;
  margin-top:2px;
  accent-color:var(--blue);
  cursor:pointer;
}
.modal-checkbox a{color:var(--blue-dark); font-weight:600; text-decoration:none;}
.modal-checkbox a:hover{text-decoration:underline;}
.modal-checkbox + .field-error{margin-top:-6px;}
.modal-submit{
  width:100%;
  justify-content:center;
  margin-top:6px;
}
.modal-msg{
  min-height:18px;
  margin:0;
  font-size:12.5px;
  font-weight:600;
  text-align:center;
}
.modal-msg.is-success{color:#2f9c66;}
.modal-msg.is-error{color:#e2554f;}
.modal-switch{
  margin:10px 0 0;
  text-align:center;
  font-size:12.5px;
  color:#93a1b8;
}
.modal-switch button{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  font-weight:700;
  color:var(--blue-dark);
  cursor:pointer;
}

/* "Забыли пароль?" — login popup only, sits right under .modal-switch. */
.modal-forgot{
  margin:6px 0 0;
  text-align:center;
  font-size:12px;
}
.modal-forgot-link{
  color:var(--blue-dark);
  font-weight:600;
  text-decoration:none;
}
.modal-forgot-link:hover{text-decoration:underline;}

.modal-submit.is-loading .btn-label{opacity:.5;}

body.modal-open{overflow:hidden;}

@media (max-width: 700px){
  .footer-row{grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px;}
  .footer-brand{justify-self:center;}
}

@media (max-width: 1100px){
  .mods{display:none;}
  nav ul{gap:16px;}
  nav a{font-size:11px;}
  .hero-title{font-size:38px;}
  .hero-sub{font-size:17px;letter-spacing:6px;}
  .island{width:33%;}
}
@media (max-width: 860px){
  .wrap{padding:0 20px;}
  nav ul{display:none;}
  .hero{flex-direction:column;gap:24px;padding-top:10px;}
  .island{width:82%;max-width:400px;margin:0;}
  .news-grid{grid-template-columns:1fr;}
}
@media (max-width: 480px){
  .nav-buttons{gap:8px;}
  .btn-register{padding:9px 12px; font-size:11px;}
  .btn-login{padding:9px 14px; font-size:11px;}
  .btn-login svg{display:none;}
  .modal-card{padding:28px 22px 24px;}
}

/* ---------- NEWS ARTICLE PAGE (/news/{slug}, resources/views/news/show.
   blade.php) — session notes #45. A real standalone page (own route, not
   an AJAX section), so it reuses the same .wrap/header/hero/footer shell
   as home.blade.php but its own content below the hero. ---------- */
.news-article{
  max-width:900px;
  margin:70px auto 40px;
  position:relative;
  z-index:3;
}
.news-article-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding:11px 20px 11px 16px;
  border-radius:11px;
  background:var(--card);
  box-shadow:var(--shadow);
  color:var(--blue-dark);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.news-article-back svg{width:16px;height:16px; transition:transform .2s ease;}
.news-article-back:hover{
  background:#eaf3ff;
  color:var(--blue);
  transform:translateX(-3px);
  box-shadow:0 14px 28px rgba(31,90,180,.14);
}
.news-article-back:hover svg{transform:translateX(-2px);}
.news-article-card{
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.news-article-cover{
  position:relative;
  height:340px;
}
.news-article-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.news-article-body{padding:32px 36px 40px;}
.news-article-body h1{
  margin:0 0 16px;
  font-size:26px;
  font-weight:800;
  color:var(--navy);
  line-height:1.3;
}
.news-article-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  padding-bottom:20px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.news-article-author{
  font-size:12px;
  color:#93a1b8;
  font-weight:600;
}
.news-article-text{
  font-size:15px;
  line-height:1.8;
  color:#4c5a72;
}
.news-article-text p{margin:0 0 16px;}
.news-article-text p:last-child{margin-bottom:0;}

@media (max-width:640px){
  .news-article-cover{height:200px;}
  .news-article-body{padding:24px 20px 30px;}
}

/* ---------- IMPERSONATION BANNER ---------- */
/* Shown across the top of every public page while a /backend admin is
   browsing the site logged in AS someone else (Backend\UserController::
   impersonate() sets session('impersonate_admin_id'), see layouts/app.
   blade.php). "Вернуться в бэкенд" posts to the ordinary /logout route —
   AuthController::logout() special-cases this session flag to log out
   only the public 'web' guard and send the admin back to /backend instead
   of doing a full session teardown (which would also sign them out of
   /backend — same class of bug as the one EnsureAdmin had to avoid, see
   session notes #44/#45). */
.impersonate-bar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 20px;
  background:#2f3b52;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-align:center;
}
.impersonate-bar strong{color:#ffd479;}
.impersonate-bar form{margin:0;}
.impersonate-bar button{
  padding:6px 14px;
  border:none;
  border-radius:8px;
  background:#ffd479;
  color:#2f3b52;
  font:inherit;
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
}
.impersonate-bar button:hover{background:#ffc94f;}