/* Web interpretation of Liquid Glass: translucent material, edge light and
   background colour. Native CSS, not Apple's platform material framework. */
:root {
  --bg: #0b1426; --text: #f4f7ff; --muted: #bac9e2;
  --line: rgba(196,220,255,.22); --glass: rgba(29,48,78,.56);
  --glass-strong: rgba(53,77,110,.72); --accent: #a4e7f4;
  --blue: #8fbaff; --cyan: #a4e7f4; --violet: #c5b6ff; --radius: 26px;
  --glass-shadow: inset 0 1px 0 rgba(242,250,255,.28), inset 0 -1px 0 rgba(184,206,255,.06), 0 18px 52px rgba(1,8,23,.22);
}
html, body { background: var(--bg); }
body {
  background: linear-gradient(180deg,rgba(103,70,184,.19),transparent 220px),
    radial-gradient(ellipse 950px 740px at 0 0,rgba(88,58,171,.46),transparent 100%),
    radial-gradient(ellipse 800px 720px at 100% 430px,rgba(116,77,176,.35),transparent 100%),
    radial-gradient(ellipse 950px 780px at 0 53%,rgba(35,140,142,.25),transparent 100%),
    radial-gradient(ellipse 850px 750px at 100% 78%,rgba(140,85,113,.21),transparent 100%), #0b1426;
}
body { isolation: isolate; }
.glass, .join-options .join-teaser, .team-callout, .hero-scene {
  background: linear-gradient(135deg,rgba(220,239,255,.12),rgba(156,180,225,.025) 58%), var(--glass);
  border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.topbar, .topbar.scrolled {
  top: 16px; left: 50%; transform: translateX(-50%); width: min(1320px,calc(100% - 40px));
  height: 72px; padding: 0 24px; gap: 24px; border: 1px solid rgba(213,234,255,.24); border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0,rgba(255,255,255,.18),transparent 30%),
    linear-gradient(105deg,rgba(99,69,176,.74),rgba(63,48,132,.66) 42%,rgba(43,34,102,.72)),
    rgba(25,24,64,.78);
  box-shadow: var(--glass-shadow), 0 14px 40px rgba(25,12,68,.34); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
}
.topbar.scrolled { background-color: rgba(34,27,78,.9); }
.nav-pill { gap: 7px; }
.nav-pill a { padding: 10px 11px; border-radius: 12px; font-size: .875rem; }
.nav-pill a:hover, .nav-pill a.active { background: rgba(210,232,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.nav-pill a.active::after { left: 12px; right: 12px; bottom: 3px; background: #d0b9ff; box-shadow: 0 0 14px rgba(180,139,255,.55); }
.identity { border-radius: 14px; background: linear-gradient(120deg,rgba(177,219,255,.14),rgba(202,176,255,.08)); border-color: rgba(211,232,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.13); }
.icon-btn, .menu-btn { border-radius: 14px; }
.id-avatar { border-radius: 8px; }
.primary-btn, .secondary-btn, .danger-btn { border-radius: 14px; }
.primary-btn {
  color: #101e37; border-color: rgba(240,252,255,.7);
  background: linear-gradient(125deg,#b9f3f2,#a8ceff 65%,#c9c1ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(80,113,181,.18), 0 8px 24px rgba(66,140,205,.20);
}
.primary-btn:hover { background: linear-gradient(125deg,#d4fcf7,#c3dfff 65%,#dcd5ff); border-color: #e7f6ff; transform: translateY(-1px); }
.secondary-btn { background: linear-gradient(135deg,rgba(211,232,255,.14),rgba(179,201,242,.045)); border-color: rgba(207,229,255,.3); box-shadow: inset 0 1px 0 rgba(240,249,255,.16); }
.secondary-btn:hover { background: rgba(189,214,255,.18); border-color: rgba(226,242,255,.5); transform: translateY(-1px); }
.home-page { padding-top: 104px; }
.hero.hero-with-assets { gap: 48px; padding-block: 60px; min-height: 640px; }
.hero.hero-with-assets h1 { color: #f2f8ff; text-shadow: 0 2px 32px rgba(145,208,240,.12); }
.hero h2 { color: #d6eaff; }
.hero-scene { padding: 12px; transform: rotate(1deg); }
.hero-scene img { border-radius: 17px; height: 425px; }
.hero-scene figcaption { padding: 14px 8px 4px; color: #e9eef8; }
.home-page .about-yolo-section { border-top-color: rgba(196,220,255,.18); }
.home-page .screenshot-card { padding: 10px; border-radius: 22px; background: linear-gradient(145deg,rgba(181,219,255,.10),rgba(202,190,245,.035)); border: 1px solid rgba(197,221,255,.18); box-shadow: inset 0 1px 0 rgba(226,243,255,.16); }
.home-page .screenshot-card img { border-radius: 13px; }
.home-page .screenshot-card figcaption { padding: 12px 7px 5px; color: #c9d7ee; }
.home-page .screenshot-card:hover { border-color: rgba(211,235,255,.42); }
.join-options { gap: 28px; }
.join-options .join-teaser { padding: 0; overflow: hidden; border-radius: 30px; }
.join-options .join-teaser-media { border-radius: 0; }
.join-options .join-teaser-copy { padding: 42px; background: linear-gradient(145deg,rgba(25,34,53,.96),rgba(10,17,29,.94)); }
.join-options .join-teaser-copy h2 { color: #f4f7ff; font-size: clamp(2rem,3.8vw,3.4rem); }
.join-options .join-teaser-copy p { color: #c5cede; }
.join-options .join-teaser-copy .secondary-btn { color: #edf3ff; background: rgba(214,226,245,.10); border-color: rgba(222,234,250,.34); }
.join-options .join-teaser--paid { background: linear-gradient(135deg,rgba(220,239,255,.12),rgba(156,180,225,.025) 58%),var(--glass); }
.join-options .join-teaser--paid .join-teaser-copy { background: linear-gradient(145deg,rgba(25,34,53,.96),rgba(10,17,29,.94)); }
.team-callout { padding: 34px 36px; border-block: 1px solid var(--line); background: linear-gradient(115deg,rgba(34,113,139,.22),rgba(73,62,117,.19)),rgba(27,43,69,.6); }
.news-grid > .empty-state { border-radius: 20px; padding: 28px; border: 1px solid rgba(196,220,255,.16); background: rgba(25,40,66,.42); }
.news-card, .news-card:first-child { padding: 28px; border: 1px solid var(--line); border-radius: 22px; margin-bottom: 14px; }
.news-card-cover { border-radius: 14px; }
.os-card { background: linear-gradient(135deg,rgba(139,190,242,.12),rgba(88,107,160,.04)),rgba(25,41,69,.64); }
.os-card:first-child { background: linear-gradient(145deg,rgba(67,125,182,.25),rgba(31,49,83,.54)); }
.os-icon, .os-icon.windows { color: #b6e7ff; background: linear-gradient(145deg,rgba(108,197,237,.26),rgba(119,140,219,.16)); border-radius: 20px; border-color: rgba(207,232,255,.32); box-shadow: inset 0 1px 0 rgba(243,252,255,.3); }
.os-icon.linux { color: #f3d1ab; background: linear-gradient(145deg,rgba(214,159,112,.22),rgba(155,111,182,.13)); }
.os-icon.mac { color: #c9caff; background: linear-gradient(145deg,rgba(164,158,233,.27),rgba(119,173,211,.12)); }
.pass-card { padding: 14px; border-radius: 24px; }
.pass-art { border-radius: 15px; }
.arrow-btn { background: rgba(197,218,255,.12); border-radius: 12px; }
.join-method-card, .join-method-card:nth-child(2) { background: var(--glass); border-radius: 26px; }
.join-method-media { background: linear-gradient(150deg,rgba(44,124,162,.2),rgba(59,78,139,.15)); }
.join-method-card:nth-child(2) .join-method-media { background: linear-gradient(150deg,rgba(117,87,163,.25),rgba(59,78,139,.15)); }
.form-card, .wiki-sidebar, .wiki-main, .notice-card, .ticket-card, .news-list-card, .stat-card, .skin-card, .support-help, .team-application-card { border-radius: 24px; }
input, textarea, select, .rich-editor, .team-page .team-form input, .team-page .team-form textarea { color: #f4f7ff; background: rgba(15,27,49,.64); border-color: rgba(168,198,231,.4); border-radius: 12px; box-shadow: inset 0 1px 3px rgba(3,9,24,.14); }
input::placeholder, textarea::placeholder, .team-page .team-form input::placeholder, .team-page .team-form textarea::placeholder { color: #b3c2db; }
.category-btn { border-radius: 12px; }
.category-btn.active { background: rgba(151,206,247,.14); color: #c3efff; }
.wiki-item { border-radius: 14px; }
.wiki-item-icon, .stat-icon, .notice-icon { border-radius: 12px; color: #b6e7ff; background: rgba(141,179,223,.15); }
.auth-modal { border-radius: 28px; background: linear-gradient(135deg,rgba(134,170,206,.14),rgba(148,125,198,.09)),rgba(21,35,59,.95); }
.modal-logo-image { border-radius: 15px; }
.close-btn { border-radius: 12px; }
.pass-stat { background: linear-gradient(120deg,rgba(81,129,186,.25),rgba(141,100,190,.21)); border-color: rgba(185,210,249,.26); border-radius: 24px; box-shadow: var(--glass-shadow); }
.team-page .team-intro.glass { background: linear-gradient(135deg,rgba(151,203,240,.12),rgba(118,133,198,.04)),rgba(27,43,70,.65) !important; border-radius: 24px; box-shadow: var(--glass-shadow); }
.team-page .team-form { border-radius: 24px; }
footer.site-footer { background: rgba(8,18,35,.5); border-color: rgba(173,203,241,.17); }
.footer-bottom { border-color: rgba(173,203,241,.17); }
.category-btn.active { background: rgba(255,255,255,.11); color: #f1f3f7; }
.wiki-item-icon, .stat-icon, .notice-icon { color: #edf1f6; background: rgba(255,255,255,.11); }
footer.site-footer { background: linear-gradient(110deg,rgba(7,18,31,.97),rgba(18,20,38,.97)); border-color: rgba(190,202,221,.18); color: #e5e8ef; }
.site-footer a, .site-footer .footer-socials a, .site-footer .footer-nav a { color: #e5e8ef; }
.site-footer .footer-disclaimer { color: #bdc4d2; }
.site-footer .footer-bottom { border-color: rgba(190,202,221,.18); }
.photo-lightbox-dialog { border-radius: 24px; }
.photo-lightbox-controls button { border-radius: 10px; }

/* Home polish requested after the first Liquid Glass pass. */
.identity:not(.is-authenticated) { width: 116px; }
.identity:not(.is-authenticated) .id-avatar {
  border: 1px solid rgba(207,229,255,.3);
  background: radial-gradient(circle at 32% 25%,rgba(184,243,247,.22),transparent 40%),rgba(9,23,42,.9) url('/assets/design-20260920/logo.webp') center/82% 82% no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(1,8,23,.22);
}
.identity:not(.is-authenticated) .identity-main strong { color: #f4f7ff; }
.news-card,.news-card:first-child {
  background: linear-gradient(140deg,rgba(218,237,255,.11),rgba(165,184,226,.03) 60%),rgba(29,48,78,.56);
  border-color: rgba(196,220,255,.22);
}
.news-card--with-cover {
  display: grid;
  grid-template-columns: minmax(280px,480px) minmax(0,1fr);
  gap: 34px;
  align-items: stretch;
}
.news-card--with-cover .news-card-cover {
  width: 100%;
  height: 100%;
  min-height: 270px;
  margin: 0;
  object-fit: cover;
}
.news-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-card::after { background: #8c72dc; opacity: .18; }
@media(max-width:1100px) {
  .topbar { padding-inline: 16px; gap: 12px; }
  .nav-pill { gap: 0; }
  .nav-pill a { font-size: .8125rem; padding-inline: 7px; }
  .hero.hero-with-assets { gap: 30px; }
}
@media(max-width:900px) {
  .topbar { top: 10px; width: calc(100% - 24px); height: 68px; border-radius: 20px; }
  .nav-pill { top: 78px; left: 0; right: 0; padding: 14px; border: 1px solid rgba(205,226,255,.26); border-radius: 20px; background: rgba(20,35,60,.97); backdrop-filter: blur(24px); }
  .nav-pill a { padding: 13px 12px; font-size: 1rem; }
  .hero-scene img { height: 390px; }
}
@media(max-width:767px) {
  .page { padding-top: 112px; }
  .home-page { padding-top: 90px; }
  .hero.hero-with-assets { padding: 32px 0 48px; min-height: 0; gap: 30px; }
  .hero-scene { transform: none; padding: 9px; border-radius: 23px; }
  .hero-scene img { height: auto; aspect-ratio: 1600 / 879; object-fit: cover; border-radius: 15px; }
  .hero-scene figcaption { padding: 12px 7px 4px; }
  .join-options { gap: 28px; }
  .join-options .join-teaser-copy { padding: 22px 12px 14px; }
  .team-callout { padding: 28px 24px; }
  .news-card--with-cover { grid-template-columns: 1fr; gap: 20px; }
  .news-card--with-cover .news-card-cover { height: auto; min-height: 0; }
  .glass { backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); }
  .topbar { backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); }
  .auth-modal { background: #172640; }
  .photo-lightbox-dialog { border-radius: 0; }
}
@media(max-width:400px) {
  .topbar { padding-inline: 10px; gap: 4px; }
  .header-actions { gap: 0; }
  .identity { width: 100px; }
  .topbar .icon-btn, .topbar .menu-btn { width: 36px; }
}
@media(prefers-reduced-transparency:reduce) {
  .glass, .topbar, .topbar.scrolled, .hero-scene, .join-options .join-teaser, .team-callout { background: #1b2d49; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not (backdrop-filter:blur(1px)) {
  .glass, .topbar, .topbar.scrolled, .hero-scene, .join-options .join-teaser, .team-callout { background: #1b2d49; }
}