:root {
  --net-bg: #f5f7f9;
  --net-surface: #fff;
  --net-surface-soft: #f0f3f5;
  --net-ink: #11171c;
  --net-copy: #5f6971;
  --net-muted: #929ba2;
  --net-line: #e2e7ea;
  --net-line-strong: #cfd7dc;
  --net-accent: #19a5ae;
  --net-accent-deep: #087f89;
  --net-good: #2eaa67;
  --net-danger: #d9564c;
  --net-radius: 14px;
  --net-shadow: 0 18px 55px rgba(28, 46, 55, .08);
  --topbar-height: 68px;
  color-scheme: light;
}

* { box-sizing: border-box; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.network-body { min-width: 320px; min-height: 100vh; background: var(--net-bg); color: var(--net-ink); }
.skip-link { position: fixed; z-index: 999; left: 14px; top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--net-ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.network-topbar { position: sticky; z-index: 40; top: 0; height: var(--topbar-height); border-bottom: 1px solid var(--net-line); background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); }
.network-topbar-inner { width: min(1440px, 100%); height: 100%; margin: auto; padding: 0 28px; display: grid; grid-template-columns: 210px minmax(250px, 430px) 1fr; align-items: center; gap: 28px; }
.network-brand, .login-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }
.network-brand { font-size: 17px; }
.network-brand span, .login-brand span { font-size: 20px; }
.global-search { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid var(--net-line); border-radius: 13px; background: var(--net-surface-soft); transition: border-color .18s, background .18s, box-shadow .18s; }
.global-search:focus-within { border-color: var(--net-accent); background: var(--net-surface); box-shadow: 0 0 0 4px rgba(25,165,174,.11); }
.global-search svg, .player-search svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--net-muted); flex: 0 0 auto; }
.global-search input, .player-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--net-ink); }
.global-search input::placeholder, .player-search input::placeholder, textarea::placeholder { color: var(--net-muted); }
.top-links { justify-self: end; display: flex; gap: 28px; color: var(--net-copy); font-size: 13px; font-weight: 650; }
.top-links a:hover { color: var(--net-ink); }
.mobile-menu { display: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--net-surface-soft); }
.mobile-menu span { display: block; width: 18px; height: 2px; margin: 5px auto; background: currentColor; }

.account-loading, .state-view { min-height: calc(100dvh - var(--topbar-height)); display: grid; place-content: center; justify-items: center; gap: 16px; padding: 32px; text-align: center; }
.account-loading p { color: var(--net-copy); font-size: 13px; font-weight: 650; }
.loading-mark { display: flex; gap: 4px; align-items: end; height: 30px; }
.loading-mark span { width: 12px; height: 12px; background: var(--net-accent); animation: block-jump .9s infinite ease-in-out; }
.loading-mark span:nth-child(2) { animation-delay: .12s; }
.loading-mark span:nth-child(3) { animation-delay: .24s; }
@keyframes block-jump { 0%, 55%, 100% { transform: translateY(0); } 28% { transform: translateY(-12px); } }

.login-view { min-height: calc(100dvh - var(--topbar-height)); padding: clamp(24px,3.5vw,48px) 28px; background: var(--net-bg); }
.login-shell { width: min(1360px,100%); margin: 0 auto; }
.login-heading { max-width: 980px; margin-bottom: clamp(22px,3vw,34px); }
.login-heading h1 { max-width: 18ch; margin-top: 10px; font: 800 clamp(38px,4.2vw,58px)/1.02 var(--display); letter-spacing: -.055em; }
.login-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,390px); gap: 20px; align-items: stretch; }
.login-wheel { position: relative; min-width: 0; padding: 10px 0 14px; overflow: hidden; border: 1px solid var(--net-line); border-radius: 20px; background: var(--net-surface); box-shadow: var(--net-shadow); }
.login-wheel-track { --login-slide-width:min(82%,760px); --login-wheel-gap:16px; --login-edge-fade:68px; position: relative; display: flex; gap: var(--login-wheel-gap); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none; padding: 10px 0 16px; touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 var(--login-edge-fade),#000 calc(100% - var(--login-edge-fade)),transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 var(--login-edge-fade),#000 calc(100% - var(--login-edge-fade)),transparent 100%); }
.login-wheel.at-start .login-wheel-track { -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - var(--login-edge-fade)),transparent 100%); mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - var(--login-edge-fade)),transparent 100%); }
.login-wheel.at-end .login-wheel-track { -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 var(--login-edge-fade),#000 100%); mask-image: linear-gradient(90deg,transparent 0,#000 var(--login-edge-fade),#000 100%); }
.login-wheel.at-start.at-end .login-wheel-track { -webkit-mask-image: none; mask-image: none; }
.login-wheel-track::before,.login-wheel-track::after { content: ""; flex: 0 0 max(0px,calc((100% - var(--login-slide-width))/2 - var(--login-wheel-gap))); align-self: stretch; pointer-events: none; }
.login-wheel-track::-webkit-scrollbar { display: none; }
/* Keep the native outline out of the masked track; mark keyboard focus on its shell. */
.login-wheel-track:focus { outline: none; }
.login-wheel:has(.login-wheel-track:focus-visible:not(.is-pointer-focus)) { outline: 2px solid var(--net-accent); outline-offset: 3px; }
.login-wheel-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.login-wheel-slide { position: relative; flex: 0 0 var(--login-slide-width); min-height: 420px; padding: clamp(28px,4vw,48px); overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: radial-gradient(circle at 86% 48%,rgba(58,153,185,.16),transparent 38%),#192126; color: #f4f7f8; opacity: .48; transform: translateY(8px) scale(.95); transform-origin: center; transform-style: preserve-3d; transition: opacity .35s ease,transform .45s cubic-bezier(.2,.75,.2,1),border-color .3s ease,box-shadow .35s ease; }
.login-wheel-slide.is-active { z-index: 2; opacity: 1; transform: none; border-color: rgba(74,200,207,.34); box-shadow: 0 28px 52px -34px rgba(18,51,56,.64); }
.login-wheel-slide.is-tilting { transition: opacity .25s ease,transform .12s ease-out,border-color .25s ease,box-shadow .3s ease; }
.login-wheel-track.is-dragging .login-wheel-slide { transition-duration: .12s; }
.login-slide-copy { position: relative; z-index: 2; max-width: 52%; transform: translateZ(24px); }
.login-slide-copy > span { display: inline-flex; margin-bottom: 18px; color: #7ed4d9; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-slide-copy h2 { max-width: 17ch; font: 800 clamp(27px,3.1vw,42px)/1.04 var(--display); letter-spacing: -.045em; }
.login-slide-copy p { max-width: 40ch; margin-top: 18px; color: rgba(244,247,248,.76); font-size: clamp(14px,1.3vw,17px); line-height: 1.52; }
.login-slide-art { position: absolute; z-index: 1; top: 50%; right: 7px; width: 46%; height: calc(100% - 24px); display: grid; place-items: center; pointer-events: none; transform: translateY(-50%) translateZ(34px); }
.login-slide-art picture,.login-slide-art img { width: 100%; height: 100%; display: block; }
.login-slide-art img { object-fit: contain; object-position: center; filter: drop-shadow(0 18px 25px rgba(3,13,20,.24)); transform: scale(.98); }
.login-slide-art-friends,.login-slide-art-vibecode { width: 48%; }
.login-slide-art-safety { top: 58%; }
.login-slide-art-final { width: 49%; right: 2px; }
.login-wheel-slide-final { background: radial-gradient(circle at 85% 48%,rgba(97,198,205,.2),transparent 42%),#14393d; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .login-slide-art img { transition: transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease; }
  .login-wheel-slide.is-active:hover .login-slide-art img { filter: drop-shadow(0 24px 30px rgba(3,13,20,.32)); transform: translate3d(0,-4px,18px) scale(1.025); }
}
.login-wheel-controls { min-height: 48px; padding: 0 18px; display: grid; grid-template-columns: 104px 1fr 128px; align-items: center; gap: 12px; }
.login-wheel-button { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--net-line); border-radius: 11px; background: var(--net-surface-soft); color: var(--net-copy); font-size: 11px; font-weight: 800; cursor: pointer; transition: transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease; }
.login-wheel-button.next { color: var(--net-ink); }
.login-wheel-button:hover:not(:disabled) { border-color: rgba(25,165,174,.34); background: rgba(25,165,174,.09); color: var(--net-accent-deep); transform: translateY(-1px); }
.login-wheel-button:active:not(:disabled) { transform: scale(.98); }
.login-wheel-button:disabled { opacity: .34; cursor: default; }
.login-wheel-button:focus-visible,.login-wheel-dot:focus-visible { outline: 3px solid rgba(25,165,174,.2); outline-offset: 2px; }
.login-wheel-arrow { width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.login-wheel-arrow.previous { transform: rotate(-135deg); }
.login-wheel-dots { display: flex; justify-content: center; gap: 4px; }
.login-wheel-dot { width: 27px; height: 30px; padding: 0 4px; border: 0; background: transparent; cursor: pointer; }
.login-wheel-dot::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 3px; background: var(--net-line-strong); transition: transform .2s ease,background .2s ease; }
.login-wheel-dot[aria-current="true"]::before { background: var(--net-accent); transform: scaleY(1.5); }
.login-access { min-height: 492px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; overflow: visible; border: 1px solid var(--net-line); border-radius: 20px; background: var(--net-surface); box-shadow: var(--net-shadow); transition: border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.login-access.is-called { border-color: rgba(25,165,174,.55); box-shadow: 0 24px 60px rgba(25,165,174,.14); transform: translateY(-2px); }
.login-access h2 { max-width: 12ch; margin-top: 0; font: 800 clamp(27px,2.8vw,38px)/1.05 var(--display); letter-spacing: -.045em; }
.login-auth-box { position: relative; isolation: isolate; flex: 1; min-height: 286px; padding: 18px 20px 22px; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; overflow: visible; border: 1px solid rgba(25,165,174,.2); border-radius: 15px; background: #effafa; }
.login-telegram-mascot { --mascot-rx:0deg; --mascot-ry:0deg; --mascot-lift:0px; --mascot-scale:1; position: absolute; z-index: 1; top: -4px; left: 50%; width: min(250px,96%); aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateX(-50%) perspective(700px) translateY(var(--mascot-lift)) rotateX(var(--mascot-rx)) rotateY(var(--mascot-ry)) scale(var(--mascot-scale)); transform-style: preserve-3d; transition: transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease; }
.login-telegram-mascot picture,.login-telegram-mascot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.login-telegram-mascot img { object-fit: contain; filter: drop-shadow(0 13px 18px rgba(30,89,139,.13)); transition: filter .34s ease; }
.login-telegram-mascot-base { z-index: 1; transform: translateZ(12px); }
.login-telegram-plane { z-index: 3; transform: translateZ(24px); transform-origin: 86% 50%; }
.login-telegram-mascot.is-hovered { --mascot-lift:-5px; --mascot-scale:1.035; transition-duration: .12s; }
.login-telegram-mascot.is-hovered img { filter: drop-shadow(0 20px 24px rgba(30,89,139,.2)); }
.login-telegram-mascot:active { --mascot-lift:1px; --mascot-scale:.975; transition-duration: .08s; }
.login-telegram-mascot:focus-visible { outline: 0; filter: drop-shadow(0 0 5px rgba(25,165,174,.42)); }
.telegram-widget { position: relative; z-index: 5; width: min(210px,100%); min-height: 48px; display: grid; place-items: center; }
.telegram-widget iframe { max-width: 100%; }
.setup-login { width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 12px; background: #229ed9; color: #fff; font-size: 13px; font-weight: 800; transition: transform .16s ease,background .16s ease; }
.setup-login:hover { background: #168dcc; transform: translateY(-1px); }
.setup-login:active { transform: scale(.98); }
@keyframes telegram-plane-launch {
  0%,12% { opacity: 1; transform: translate3d(0,0,24px) rotate(0) scale(1); }
  22% { opacity: 1; transform: translate3d(-5px,3px,24px) rotate(4deg) scale(1.03); }
  38% { opacity: 1; transform: translate3d(22px,-9px,24px) rotate(-1deg) scale(1.02); }
  72% { opacity: .94; transform: translate3d(150px,-68px,24px) rotate(-7deg) scale(.9); }
  100% { opacity: 0; transform: translate3d(320px,-165px,24px) rotate(-14deg) scale(.68); }
}
.login-auth-box.is-launching .login-telegram-plane { animation: telegram-plane-launch 1.05s linear both; }
.state-card { width: min(470px, 100%); padding: 46px; border: 1px solid var(--net-line); border-radius: 24px; background: var(--net-surface); box-shadow: var(--net-shadow); }
.state-card h1 { margin-top: 10px; font: 800 31px/1.1 var(--display); letter-spacing: -.045em; }
.state-card > p:not(.eyebrow) { margin: 12px auto 24px; color: var(--net-copy); }
.state-icon { width: 52px; height: 52px; margin: 0 auto 20px; display: grid; place-items: center; border: 4px solid #a4612d; background: var(--net-accent); font: 800 23px var(--display); box-shadow: 5px 5px 0 #d8d0c2; }
.state-icon.error { border-color: #963e38; background: var(--net-danger); color: #fff; }
.telegram-person { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; }
.telegram-person img { width: 36px; height: 36px; border-radius: 50%; }

.button { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--net-line-strong); border-radius: 12px; background: var(--net-surface); font-size: 12px; font-weight: 750; cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.button:hover { border-color: #c4bcaf; background: #fbfaf7; }
.button:active { transform: translateY(1px); }
.button.primary { border-color: var(--net-accent); background: var(--net-accent); color: #fff; }
.button.primary:hover { border-color: var(--net-accent-deep); background: var(--net-accent-deep); }
.button.quiet { border-color: transparent; background: transparent; color: var(--net-copy); }
.button.subtle { background: var(--net-surface-soft); }
.button:disabled { opacity: .48; cursor: wait; }
.eyebrow { color: var(--net-accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .13em; }

.network-app { min-height: calc(100dvh - var(--topbar-height)); }
.network-layout { width: min(1440px, 100%); margin: 0 auto; padding: 26px 28px 70px; display: grid; grid-template-columns: 210px minmax(0, 1fr) 276px; gap: 26px; align-items: start; }
.network-sidebar, .network-rail { position: sticky; top: calc(var(--topbar-height) + 26px); }
.network-sidebar { min-height: calc(100dvh - var(--topbar-height) - 52px); display: flex; flex-direction: column; }
.network-nav { display: grid; gap: 5px; }
.network-nav button { width: 100%; min-height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 13px; background: transparent; color: var(--net-copy); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: background .16s, color .16s, transform .16s; }
.network-nav button:hover { background: rgba(255,255,255,.66); color: var(--net-ink); }
.network-nav button.is-active { background: var(--net-surface); color: var(--net-ink); box-shadow: 0 1px 2px rgba(45,38,28,.05); }
.network-nav button:active { transform: scale(.985); }
.network-nav svg, .sidebar-card svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.network-nav b { margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--net-accent); color: #fff; font-size: 10px; }
.sidebar-card { margin-top: auto; padding: 11px; display: grid; grid-template-columns: 38px 1fr 30px; align-items: center; gap: 9px; border: 1px solid var(--net-line); border-radius: 15px; background: rgba(255,255,255,.6); }
.sidebar-card > div:nth-child(2) { min-width: 0; }
.sidebar-card strong, .sidebar-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-card strong { font-size: 12px; }
.sidebar-card span { margin-top: 2px; color: var(--net-muted); font-size: 10px; }
.sidebar-avatar, .mini-avatar { overflow: hidden; border-radius: 11px; background: #ded8cc; }
.sidebar-avatar { width: 38px; height: 38px; }
.sidebar-avatar img, .mini-avatar img, .profile-avatar img, .person-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.sidebar-card form button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--net-muted); cursor: pointer; }
.sidebar-card form button:hover { color: var(--net-ink); }

.network-content { min-width: 0; }
.route-view { animation: page-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(7px); } }
.surface { border: 1px solid var(--net-line); border-radius: var(--net-radius); background: var(--net-surface); box-shadow: 0 1px 2px rgba(45,38,28,.025); }
.profile-card { overflow: hidden; border: 1px solid #26333a; border-radius: 16px; background: var(--net-surface); box-shadow: var(--net-shadow); }
.profile-cover { position: relative; height: 270px; isolation: isolate; overflow: hidden; background: #172126; }
.profile-cover-image { position: absolute; z-index: -2; inset: 0; background: url('/assets/images/home/mc-hero-1600.webp') 50% 46% / cover no-repeat; filter: grayscale(.35); opacity: .14; transform: scale(1.02); }
.profile-cover::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(12,19,23,.35); }
.profile-identity { position: absolute; z-index: 3; left: 30px; bottom: 28px; display: flex; align-items: end; gap: 17px; color: #fff; }
.profile-avatar { width: 88px; height: 88px; flex: 0 0 auto; overflow: hidden; border: 5px solid rgba(255,255,255,.92); border-radius: 20px; background: #d8d0c2; box-shadow: 0 10px 28px rgba(0,0,0,.24); }
.profile-identity h1 { max-width: 15ch; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; font: 800 clamp(30px,4vw,48px)/.98 var(--display); letter-spacing: -.055em; }
.profile-identity p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600; }
.online-label { display: inline-flex; align-items: center; gap: 7px; color: #a9f2c7; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.online-label i { width: 7px; height: 7px; border-radius: 50%; background: #4bd47f; box-shadow: 0 0 0 4px rgba(75,212,127,.16); }
.online-label.is-offline { color: rgba(255,255,255,.62); }
.online-label.is-offline i { background: #a4a29b; box-shadow: none; }
.cover-character { position: absolute; z-index: 2; right: 14px; bottom: -35px; width: 320px; height: 330px; pointer-events: none; }
.cover-character canvas { width: 100%; height: 100%; display: block; }
.skin-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.65); font-size: 12px; }
.profile-actions { min-height: 74px; padding: 0 24px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.profile-counters { display: flex; gap: 26px; }
.profile-counters button { padding: 0; display: flex; align-items: baseline; gap: 6px; border: 0; background: transparent; cursor: pointer; }
.profile-counters strong { font: 800 17px var(--display); }
.profile-counters span { color: var(--net-copy); font-size: 11px; }

.profile-columns { margin-top: 18px; display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 18px; align-items: start; }
.profile-main-column { display: grid; gap: 18px; }
.profile-side-column { display: grid; gap: 18px; }
.profile-about, .wall-section, .compact-panel, .inventory-section { padding: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading h2 { margin-top: 5px; font: 800 21px/1.15 var(--display); letter-spacing: -.035em; }
.section-heading h3 { font: 800 15px var(--display); letter-spacing: -.025em; }
.section-heading.small h2 { font-size: 18px; }
.section-heading > span { color: var(--net-muted); font-size: 11px; }
.text-link { padding: 4px 0; border: 0; background: transparent; color: var(--net-accent-deep); font-size: 11px; font-weight: 750; cursor: pointer; }
.text-link:hover { color: var(--net-ink); }
.quick-status { margin-top: 19px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vital-card { min-width: 0; padding: 13px 14px; border-radius: 13px; background: var(--net-surface-soft); }
.vital-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: var(--net-copy); font-size: 10px; }
.vital-card strong { color: var(--net-ink); }
.heart-row, .food-row { display: grid; grid-template-columns: repeat(10,16px); gap: 1px; margin-top: 8px; }
.heart-cell, .food-cell { width: 16px; height: 16px; position: relative; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; image-rendering: pixelated; }
.heart-cell { background-image: url('/assets/game/minecraft/gui/hud-heart-container.png'); }
.heart-cell::after, .food-cell::after { content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; image-rendering: pixelated; }
.heart-cell.is-full::after { background-image: url('/assets/game/minecraft/gui/hud-heart-full.png'); }
.heart-cell.is-half::after { background-image: url('/assets/game/minecraft/gui/hud-heart-half.png'); }
.food-cell { background-image: url('/assets/game/minecraft/gui/hud-food_empty.png'); }
.food-cell.is-full::after { background-image: url('/assets/game/minecraft/gui/hud-food_full.png'); }
.food-cell.is-half::after { background-image: url('/assets/game/minecraft/gui/hud-food_half.png'); }
.quick-items { margin-top: 14px; display: flex; gap: 8px; }
.quick-item { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid var(--net-line); border-radius: 12px; background: var(--net-surface-soft); }
.quick-item img, .quick-item canvas { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
.quick-item.more { color: var(--net-copy); font-size: 11px; font-weight: 800; }

.post-composer { margin-top: 18px; padding-bottom: 18px; display: grid; grid-template-columns: 38px 1fr 38px; gap: 11px; align-items: start; border-bottom: 1px solid var(--net-line); }
.post-composer.large { margin: 0 0 18px; padding: 18px; grid-template-columns: 44px 1fr auto; border-bottom: 1px solid var(--net-line); }
.mini-avatar { width: 38px; height: 38px; }
.post-composer.large .mini-avatar { width: 44px; height: 44px; }
.post-composer label { min-width: 0; }
.post-composer textarea { width: 100%; min-height: 38px; max-height: 130px; padding: 9px 2px; resize: none; border: 0; outline: 0; background: transparent; color: var(--net-ink); line-height: 1.45; }
.post-composer.large textarea { min-height: 54px; }
.icon-submit { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 11px; background: var(--net-accent); cursor: pointer; }
.icon-submit svg { width: 17px; fill: none; stroke: #fff; stroke-width: 1.8; }
.post-list { display: grid; }
.feed-list { gap: 14px; }
.post-card { padding: 18px 0; border-bottom: 1px solid var(--net-line); }
.feed-list .post-card { padding: 20px; border: 1px solid var(--net-line); border-radius: var(--net-radius); background: var(--net-surface); }
.post-card:last-child { border-bottom: 0; }
.post-author { display: flex; align-items: center; gap: 11px; }
.post-author .person-avatar { width: 40px; height: 40px; }
.post-author strong, .post-author span { display: block; }
.post-author strong { font-size: 12px; }
.post-author span { margin-top: 2px; color: var(--net-muted); font-size: 10px; }
.post-copy { margin: 13px 0 12px 51px; color: #42413d; line-height: 1.56; }
.post-actions { margin-left: 51px; display: flex; gap: 18px; }
.post-actions button { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--net-muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.post-actions button:hover, .post-actions button.is-active { color: var(--net-accent-deep); }
.post-actions svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.empty-feed { padding: 30px 0 8px; color: var(--net-muted); text-align: center; font-size: 12px; }

.compact-panel { min-height: 142px; }
.clan-compact { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.clan-mark { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border: 4px solid #6f382a; background: #9a4e39; color: #ffe4bd; font: 16px Minecraft, monospace; box-shadow: inset 0 0 0 3px #ca7656; image-rendering: pixelated; }
.clan-compact strong, .clan-compact span { display: block; }
.clan-compact strong { font-size: 12px; }
.clan-compact span { margin-top: 3px; color: var(--net-muted); font-size: 10px; }
.avatar-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.avatar-grid button { min-width: 0; border: 0; background: transparent; cursor: pointer; }
.avatar-grid .person-avatar { width: 100%; aspect-ratio: 1; }
.avatar-grid span { display: block; margin-top: 5px; overflow: hidden; color: var(--net-copy); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.page-heading { min-height: 104px; padding: 9px 3px 22px; display: flex; align-items: end; justify-content: space-between; }
.page-heading h1 { margin-top: 6px; font: 800 clamp(32px,4.5vw,50px)/1 var(--display); letter-spacing: -.055em; }
.page-heading p:not(.eyebrow) { margin-top: 8px; color: var(--net-copy); font-size: 13px; }
.player-search { min-height: 68px; padding: 12px 13px 12px 18px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; }
.form-message { min-height: 18px; margin: 8px 2px; color: var(--net-copy); font-size: 11px; }
.form-message.is-error { color: var(--net-danger); }
.people-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.search-grid { margin: 12px 0 22px; }
.requests-section, .friends-section { margin-top: 28px; }
.people-grid .person-card { min-width: 0; padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--net-line); border-radius: 13px; background: var(--net-surface); }
.person-avatar { position: relative; overflow: visible; border-radius: 12px; background: #ded8cc; }
.person-card .person-avatar { width: 46px; height: 46px; }
.person-avatar img { border-radius: inherit; }
.person-avatar i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid var(--net-surface); border-radius: 50%; background: #aaa; }
.person-avatar i.online { background: var(--net-good); }
.person-copy { min-width: 0; }
.person-copy strong, .person-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-copy strong { font-size: 12px; }
.person-copy span { margin-top: 3px; color: var(--net-muted); font-size: 10px; }
.person-actions { display: flex; gap: 6px; }
.mini-button { min-height: 34px; padding: 0 11px; border: 1px solid var(--net-line); border-radius: 10px; background: var(--net-surface-soft); font-size: 10px; font-weight: 750; cursor: pointer; }
.mini-button.primary { border-color: var(--net-accent); background: var(--net-accent); }
.mini-button:disabled { opacity: .48; cursor: default; }
.count-badge { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 99px; background: #dff4f5; color: var(--net-accent-deep); font-size: 11px; font-weight: 800; }
.empty-state { margin-top: 12px; padding: 42px; border: 1px dashed var(--net-line-strong); border-radius: var(--net-radius); text-align: center; }
.empty-state h3 { font: 800 17px var(--display); }
.empty-state p { margin-top: 7px; color: var(--net-copy); font-size: 12px; }

.clan-page-hero { position: relative; min-height: 250px; overflow: hidden; padding: 28px; display: flex; align-items: end; border-radius: 22px; background: #27231d url('/assets/images/home/card-world.jpg') 50% 48% / cover no-repeat; color: #fff; isolation: isolate; }
.clan-page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(18,16,13,.66); }
.clan-page-copy { display: flex; align-items: center; gap: 18px; }
.clan-page-copy .clan-mark { width: 76px; height: 76px; font-size: 20px; }
.clan-page-copy h1 { margin-top: 7px; font: 800 clamp(30px,4vw,48px)/1 var(--display); letter-spacing: -.05em; }
.clan-page-copy p:last-child { margin-top: 8px; color: rgba(255,255,255,.68); font-size: 12px; }
.clan-page-actions { margin-left: auto; }
.clan-roster { margin-top: 18px; padding: 22px; }
.clan-empty { min-height: 570px; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; }
.clan-empty h1 { margin-top: 12px; font: 800 37px/1 var(--display); letter-spacing: -.05em; }
.clan-empty > p:not(.eyebrow) { max-width: 45ch; margin: 14px 0 24px; color: var(--net-copy); }
.empty-flag { width: 72px; height: 82px; margin-bottom: 22px; display: grid; place-items: center; border: 5px solid #6f382a; background: #9a4e39; color: #ffe4bd; box-shadow: inset 0 0 0 4px #ca7656, 7px 7px 0 #e3ddd3; }
.empty-flag span { font: 28px Minecraft, monospace; }

.character-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(250px,.7fr); gap: 18px; }
.character-stage { position: relative; height: 500px; overflow: hidden; background: #e8e2d5 url('/assets/images/home/mc-island-1-q.png') 8% 82% / 260px auto no-repeat; }
.character-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.character-stage canvas:active { cursor: grabbing; }
.character-skin-empty { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: var(--net-muted); font-size: 12px; }
.stage-copy { position: absolute; z-index: 2; left: 24px; top: 22px; pointer-events: none; }
.stage-copy strong { display: block; }
.stage-copy strong { font: 800 24px var(--display); }
.stage-vitals { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; padding: 12px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: rgba(255,255,255,.78); backdrop-filter: blur(14px); }
.stage-vitals > div > span { color: var(--net-copy); font-size: 9px; font-weight: 750; }
.location-card { min-height: 230px; padding: 22px; }
.location-locked, .location-open { margin-top: 23px; display: grid; gap: 16px; }
.location-locked > div { filter: blur(5px); color: var(--net-copy); font: 700 15px ui-monospace, monospace; user-select: none; }
.location-open > p { color: var(--net-copy); font-size: 11px; }
.location-open > div { display: grid; gap: 8px; }
.location-open > div span { min-height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 11px; background: var(--net-surface-soft); color: var(--net-accent-deep); font-size: 10px; font-weight: 800; }
.location-open b { color: var(--net-ink); font: 750 14px ui-monospace, monospace; }
.inventory-section { margin-top: 18px; overflow: hidden; }
.inventory-window { margin-top: 18px; padding: 18px; overflow-x: auto; border: 3px solid; border-color: #fff #555 #555 #fff; background: #c6c6c6; box-shadow: inset 0 0 0 2px #8b8b8b; color: #3f3f3f; }
.inventory-layout { min-width: 610px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; }
.equipment-slots { display: grid; grid-template-rows: repeat(5,48px); align-content: start; }
.inventory-main { display: grid; align-content: end; gap: 14px; }
.inventory-grid { display: grid; grid-template-columns: repeat(9,minmax(48px,1fr)); }
.inventory-grid.hotbar { padding-top: 14px; }
.item-slot { aspect-ratio: 1; min-height: 48px; position: relative; display: grid; place-items: center; border: 0; border-radius: 0; background: #8b8b8b; box-shadow: inset 2px 2px #373737, inset -2px -2px #fff; image-rendering: pixelated; }
.equipment-slots .item-slot { aspect-ratio: auto; }
.item-slot:hover { filter: brightness(1.1); }
.item-slot[data-kind]::after { content: ""; width: 52%; height: 52%; background-position: center; background-repeat: no-repeat; background-size: contain; image-rendering: pixelated; opacity: .45; }
.item-slot.has-item::after { display: none; }
.item-slot[data-kind="helmet"]::after { background-image: url('/assets/game/minecraft/gui/helmet.png'); }
.item-slot[data-kind="chestplate"]::after { background-image: url('/assets/game/minecraft/gui/chestplate.png'); }
.item-slot[data-kind="leggings"]::after { background-image: url('/assets/game/minecraft/gui/leggings.png'); }
.item-slot[data-kind="boots"]::after { background-image: url('/assets/game/minecraft/gui/boots.png'); }
.item-slot[data-kind="shield"]::after { background-image: none; border: 2px solid rgba(255,255,255,.22); border-radius: 3px; transform: scaleX(.72); }
.item-slot img, .item-slot canvas { position: relative; z-index: 1; width: 88%; height: 88%; object-fit: contain; image-rendering: pixelated; }
.item-count { position: absolute; z-index: 2; right: 3px; bottom: 2px; color: #fff; font: 16px Minecraft, ui-monospace, monospace; text-shadow: 2px 2px #3f3f3f,-2px 2px #3f3f3f,2px -2px #3f3f3f,-2px -2px #3f3f3f; }
.item-fallback { font: 16px Minecraft, monospace; }
.mc-tooltip { position: fixed; z-index: 80; left: 0; top: 0; min-width: 190px; max-width: min(330px,calc(100vw - 24px)); padding: 9px 11px 10px; display: grid; gap: 3px; visibility: hidden; opacity: 0; border: 2px solid #24063f; background: rgba(16,0,16,.98); box-shadow: inset 0 0 0 2px #4b1880,4px 4px 0 rgba(0,0,0,.48); color: #aaaaff; font: 14px/1.25 Minecraft,ui-monospace,monospace; pointer-events: none; }
.mc-tooltip.is-visible { visibility: visible; opacity: 1; }
.mc-tooltip strong { color: #f1f1f1; font: inherit; }
.mc-tooltip.is-enchanted strong { color: #55ffff; }
.mc-tooltip .item-description { margin-top: 4px; color: #a8a8a8; }

.network-rail { display: grid; gap: 13px; }
.rail-section { padding: 16px; border: 1px solid var(--net-line); border-radius: 16px; background: rgba(255,255,255,.62); }
.rail-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rail-heading strong { font: 800 12px var(--display); }
.rail-heading button { border: 0; background: transparent; color: var(--net-accent-deep); font-size: 10px; font-weight: 750; cursor: pointer; }
.rail-action { min-height: 30px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--net-line-strong); border-radius: 999px; background: var(--net-surface-soft); color: var(--net-ink); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .01em; box-shadow: 0 2px 7px rgba(28,46,55,.05); appearance: none; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.rail-action-arrow { width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.rail-action:hover { border-color: rgba(25,165,174,.32); background: rgba(25,165,174,.09); color: var(--net-accent-deep); box-shadow: 0 6px 16px rgba(25,165,174,.12); transform: translateY(-1px); }
.rail-action:hover .rail-action-arrow { transform: translateX(2px) rotate(45deg); }
.rail-action:active { transform: translateY(0) scale(.97); }
.rail-action:focus-visible { outline: 3px solid rgba(25,165,174,.2); outline-offset: 2px; }
.rail-people, [data-rail-request-list] { margin-top: 12px; display: grid; gap: 9px; }
.rail-person { display: flex; align-items: center; gap: 9px; }
.rail-person .person-avatar { width: 34px; height: 34px; flex: 0 0 auto; }
.rail-person strong, .rail-person span { display: block; }
.rail-person strong { max-width: 135px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.rail-person span { margin-top: 2px; color: var(--net-muted); font-size: 9px; }
.rail-empty { color: var(--net-muted); font-size: 10px; line-height: 1.5; }
.server-card { position: relative; min-height: 118px; padding: 17px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 16px; background: #1f1e19 url('/assets/images/home/card-world.jpg') 50% 50% / cover no-repeat; color: #fff; isolation: isolate; }
.server-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(20,18,15,.62); }
.server-card span { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.67); font-size: 9px; }
.server-card i { width: 6px; height: 6px; border-radius: 50%; background: var(--net-good); }
.server-card strong { margin-top: 7px; max-width: 12ch; font: 750 14px/1.2 var(--display); }
.server-card svg { position: absolute; right: 14px; bottom: 15px; width: 18px; fill: none; stroke: #fff; stroke-width: 1.8; }

.network-dialog { position: fixed; inset: 0; width: min(510px,calc(100% - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 22px; background: transparent; color: var(--net-ink); }
.network-dialog::backdrop { background: rgba(24,22,18,.62); backdrop-filter: blur(8px); }
.network-dialog[open] { animation: dialog-in .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog-panel { position: relative; padding: 30px; border: 1px solid var(--net-line); border-radius: 22px; background: var(--net-surface); box-shadow: 0 35px 100px rgba(22,18,12,.28); }
.dialog-close { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 11px; background: var(--net-surface-soft); cursor: pointer; }
.dialog-close svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dialog-panel h2 { margin-top: 10px; font: 800 29px/1.1 var(--display); letter-spacing: -.045em; }
.dialog-lead { max-width: 42ch; margin-top: 10px; color: var(--net-copy); font-size: 12px; line-height: 1.55; }
.dialog-fields { margin-top: 24px; display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 10px; }
.dialog-fields.single { grid-template-columns: 1fr; }
.dialog-fields label span { display: block; margin-bottom: 7px; color: var(--net-copy); font-size: 10px; font-weight: 700; }
.dialog-fields input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--net-line-strong); border-radius: 12px; outline: 0; background: var(--net-surface-soft); color: var(--net-ink); }
.dialog-fields input:focus { border-color: var(--net-accent); box-shadow: 0 0 0 4px rgba(25,165,174,.11); }
.dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 9px; }
.network-toast { position: fixed; z-index: 90; left: 50%; bottom: 24px; max-width: calc(100% - 32px); padding: 12px 17px; border-radius: 12px; background: var(--net-ink); color: #fff; box-shadow: 0 14px 45px rgba(0,0,0,.2); font-size: 11px; font-weight: 700; transform: translateX(-50%); }
.network-toast.is-visible { animation: toast-in .2s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px); } }

/* Public player profiles */
.person-open { min-width: 0; padding: 0; display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 11px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.person-open:hover strong, .post-author:hover strong, .rail-person:hover strong { color: var(--net-accent-deep); }
.post-author { width: max-content; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.rail-person { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.public-profile-loading { display: grid; gap: 18px; }
.profile-skeleton, .content-skeleton { border: 1px solid var(--net-line); border-radius: 16px; background: var(--net-surface); }
.profile-skeleton { min-height: 164px; padding: 28px; display: flex; align-items: center; gap: 18px; }
.profile-skeleton > i { width: 82px; height: 82px; border-radius: 18px; background: var(--net-surface-soft); animation: skeleton-pulse 1.2s infinite alternate; }
.profile-skeleton > div { width: min(360px,60%); display: grid; gap: 11px; }
.profile-skeleton span, .content-skeleton span { height: 14px; border-radius: 4px; background: var(--net-surface-soft); animation: skeleton-pulse 1.2s infinite alternate; }
.profile-skeleton span:first-child { width: 42%; height: 28px; }
.profile-skeleton span:last-child { width: 72%; }
.content-skeleton { min-height: 430px; padding: 24px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.content-skeleton span { height: 100%; }
@keyframes skeleton-pulse { to { opacity: .48; } }

.public-profile-hero { min-height: 164px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #26343b; border-radius: 16px; background: #172126; color: #fff; box-shadow: 0 18px 48px rgba(20,40,49,.12); }
.public-profile-identity { min-width: 0; display: flex; align-items: center; gap: 18px; }
.public-avatar { position: relative; width: 90px; height: 90px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.2); border-radius: 17px; background: #26343b; }
.public-avatar img, .public-fallback-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; image-rendering: pixelated; }
.public-avatar i { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border: 3px solid #172126; border-radius: 50%; background: #6b747a; }
.public-avatar i.online { background: #44d47d; }
.public-profile-identity h1 { margin-top: 5px; white-space: nowrap; font: 800 clamp(26px,2.8vw,40px)/1 var(--display); letter-spacing: -.05em; }
.public-profile-identity p { max-width: 58ch; margin-top: 9px; color: #b8c2c7; font-size: 12px; line-height: 1.5; }
.public-status { color: #98a4aa; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.public-status.online { color: #65e098; }
.public-identity-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.public-identity-meta span { padding: 5px 8px; border: 1px solid #34434b; border-radius: 7px; color: #c8d0d4; font-size: 9px; }
.public-identity-meta b { color: #72dde3; }
.public-hero-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.public-profile-hero .button.subtle { border-color: #3a4a52; background: #243139; color: #fff; }
.public-profile-hero .button.quiet { color: #9eabb1; }
.public-profile-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(250px,.75fr); gap: 18px; align-items: start; }
.public-profile-main, .public-profile-side { display: grid; gap: 18px; }
.public-player-card { min-height: 400px; display: grid; grid-template-columns: minmax(300px,1.2fr) minmax(240px,.8fr); overflow: hidden; border: 1px solid var(--net-line); border-radius: 16px; background: var(--net-surface); }
.public-player-canvas { position: relative; min-height: 400px; overflow: hidden; background: #dfe6e6 url('/assets/images/home/mc-island-1-q.png') 5% 92% / 215px auto no-repeat; }
.public-player-canvas canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.public-player-canvas canvas:active { cursor: grabbing; }
.public-skin-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--net-copy); font-size: 11px; }
.public-fallback-avatar { width: 76px; height: 76px; border-radius: 14px; background: #cbd4d4; }
.public-game-state { padding: 25px; display: flex; flex-direction: column; justify-content: center; background: #172126; color: #fff; }
.public-game-state > div:first-child span, .public-game-state > div:first-child strong { display: block; }
.public-game-state > div:first-child span { color: #91a0a7; font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.public-game-state > div:first-child strong { margin-top: 6px; font: 750 19px/1.2 var(--display); }
.public-vitals { margin-top: 25px; display: grid; gap: 19px; }
.public-vitals > div > span { color: #9ba7ac; font-size: 9px; }
.public-vitals .heart-row, .public-vitals .food-row { grid-template-columns: repeat(5,18px); grid-auto-rows: 18px; width: 94px; }
.public-vitals .heart-cell, .public-vitals .food-cell { width: 18px; height: 18px; background-size: 18px; }
.public-vitals .heart-cell::after, .public-vitals .food-cell::after { background-size: 18px; }
.public-privacy-note { margin-top: 22px; color: #aeb8bd; font-size: 11px; line-height: 1.55; }
.public-wall { padding: 22px; }
.public-profile-side .surface { padding: 20px; }
.reputation-top { display: grid; gap: 5px; }
.reputation-top > div { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.reputation-top > div span { font: 750 16px var(--display); }
.reputation-top > div strong { color: var(--net-accent-deep); font: 800 34px/1 var(--display); }
.reputation-top > span { color: var(--net-muted); font-size: 9px; }
.reputation-meter { height: 5px; margin: 16px 0; overflow: hidden; border-radius: 2px; background: var(--net-surface-soft); }
.reputation-meter i { display: block; height: 100%; background: var(--net-accent); }
.reputation-categories { display: grid; gap: 5px; }
.reputation-categories button { width: 100%; min-height: 55px; padding: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.reputation-categories button:hover:not(:disabled) { border-color: var(--net-line); background: var(--net-surface-soft); }
.reputation-categories button:disabled { cursor: default; }
.reputation-categories span, .reputation-categories strong, .reputation-categories small { display: block; }
.reputation-categories strong { font-size: 10px; }
.reputation-categories small { max-width: 27ch; margin-top: 3px; color: var(--net-muted); font-size: 8px; line-height: 1.35; }
.reputation-categories b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #e2f5f6; color: var(--net-accent-deep); font-size: 10px; }
.public-friends-card .section-heading > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--net-surface-soft); color: var(--net-copy); font-size: 9px; font-weight: 750; }
.public-friend-list { margin-top: 14px; display: grid; gap: 10px; }

@media (max-width: 1280px) {
  .network-layout { grid-template-columns: 190px minmax(0,1fr); }
  .network-rail { display: none; }
  .network-topbar-inner { grid-template-columns: 190px minmax(250px,430px) 1fr; }
}
@media (max-width: 900px) {
  .network-topbar-inner { padding: 0 18px; grid-template-columns: 1fr minmax(200px,330px) auto; }
  .top-links { display: none; }
  .mobile-menu { display: block; }
  .network-layout { padding: 18px 18px 70px; grid-template-columns: 1fr; }
  .network-sidebar { position: fixed; z-index: 50; left: 14px; right: 14px; top: calc(var(--topbar-height) + 10px); min-height: 0; padding: 12px; display: none; border: 1px solid var(--net-line); border-radius: 18px; background: var(--net-surface); box-shadow: var(--net-shadow); }
  .network-sidebar.is-open { display: block; }
  .sidebar-card { margin-top: 12px; }
  .profile-columns { grid-template-columns: 1fr; }
  .profile-side-column { grid-template-columns: 1fr 1fr; }
  .public-profile-grid { grid-template-columns: 1fr; }
  .public-profile-side { grid-template-columns: 1fr 1fr; }
  .login-view { padding: 28px 18px 40px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-access { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); align-items: center; }
  .login-auth-box { min-height: 300px; }
}
@media (max-width: 680px) {
  :root { --topbar-height: 60px; --net-radius: 15px; }
  .network-topbar-inner { grid-template-columns: 1fr auto; gap: 10px; }
  .global-search { display: none; }
  .network-brand { font-size: 15px; }
  .network-layout { padding: 12px 12px 70px; }
  .login-view { padding: 22px 0 34px; }
  .login-heading { padding: 0 18px; margin-bottom: 18px; }
  .login-heading h1 { max-width: 16ch; font-size: 34px; }
  .login-layout { gap: 14px; }
  .login-wheel { border-left: 0; border-right: 0; border-radius: 0; }
  .login-wheel-track { --login-slide-width:88vw; --login-wheel-gap:12px; --login-edge-fade:28px; padding-top: 8px; }
  .login-wheel-slide { min-height: 570px; padding: 26px 23px; border-radius: 16px; background: radial-gradient(circle at 50% 82%,rgba(58,153,185,.16),transparent 42%),#192126; }
  .login-slide-copy { max-width: none; transform: translateZ(20px); }
  .login-slide-copy h2 { font-size: 29px; }
  .login-slide-copy p { max-width: none; font-size: 14px; line-height: 1.52; }
  .login-slide-art,.login-slide-art-friends,.login-slide-art-vibecode,.login-slide-art-final { top: auto; right: auto; bottom: 4px; left: 50%; width: min(96%,430px); height: 48%; transform: translateX(-50%) translateZ(28px); }
  .login-slide-art-final { height: 53%; }
  .login-wheel-slide-final { background: radial-gradient(circle at 50% 82%,rgba(97,198,205,.2),transparent 44%),#14393d; }
  .login-wheel-controls { padding: 0 13px; grid-template-columns: 80px 1fr 92px; gap: 6px; }
  .login-wheel-button { padding: 0 9px; }
  .login-wheel-dot { width: 14px; padding: 0 2px; }
  .login-access { margin: 0 12px; padding: 25px 22px; display: flex; min-height: 500px; }
  .login-access h2 { font-size: 31px; }
  .login-auth-box { width: 100%; min-height: 300px; }
  .login-telegram-mascot { top: 2px; width: min(240px,96%); }
  .profile-cover { height: 330px; }
  .cover-character { right: 0; bottom: 88px; width: 220px; height: 220px; transform: none; opacity: 1; }
  .profile-cover::after { background: rgba(12,12,10,.52); }
  .profile-identity { left: 18px; right: 18px; bottom: 20px; align-items: center; }
  .profile-avatar { width: 66px; height: 66px; border-width: 4px; border-radius: 16px; }
  .profile-identity h1 { font-size: 29px; }
  .profile-actions { padding: 0 16px; }
  .profile-actions > .button { display: none; }
  .profile-columns, .profile-main-column, .profile-side-column { gap: 12px; }
  .profile-side-column { grid-template-columns: 1fr; }
  .profile-about, .wall-section, .compact-panel, .inventory-section { padding: 17px; }
  .quick-status { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
  .page-heading { min-height: 91px; padding: 8px 2px 18px; }
  .page-heading h1 { font-size: 34px; }
  .post-composer.large { grid-template-columns: 38px 1fr; }
  .post-composer.large .button { grid-column: 2; justify-self: start; }
  .character-grid { grid-template-columns: 1fr; }
  .character-stage { height: 460px; }
  .stage-copy { left: 20px; top: 18px; }
  .stage-vitals { grid-template-columns: 1fr; }
  .clan-page-hero { min-height: 310px; padding: 20px; }
  .clan-page-copy { align-items: end; }
  .clan-page-actions { position: absolute; right: 18px; top: 18px; }
  .dialog-panel { padding: 26px 20px; }
  .dialog-fields { grid-template-columns: 1fr; }
  .inventory-section { margin-left: -1px; margin-right: -1px; }
  .public-profile-hero { padding: 20px; align-items: flex-start; flex-direction: column; }
  .public-avatar { width: 70px; height: 70px; }
  .public-profile-identity { align-items: flex-start; }
  .public-hero-actions { width: 100%; flex-direction: row; }
  .public-hero-actions .button { flex: 1; }
  .public-profile-side { grid-template-columns: 1fr; }
  .public-player-card { grid-template-columns: 1fr; }
  .public-player-canvas { min-height: 390px; }
  .public-game-state { min-height: 175px; }
  .public-vitals { grid-template-columns: 1fr 1fr; }
}

html[data-theme="dark"] {
  --net-bg:#161614; --net-surface:#20201d; --net-surface-soft:#282824; --net-ink:#f1efe9; --net-copy:#b2afa6; --net-muted:#7e7b73; --net-line:#34332e; --net-line-strong:#48463f; --net-shadow:0 20px 60px rgba(0,0,0,.22); color-scheme:dark;
}
html[data-theme="dark"] .network-topbar { background: rgba(28,28,25,.92); }
html[data-theme="dark"] .network-nav button:hover,
html[data-theme="dark"] .network-nav button.is-active,
html[data-theme="dark"] .rail-section,
html[data-theme="dark"] .sidebar-card { background: rgba(35,35,31,.82); }
html[data-theme="dark"] .profile-cover::after { background: rgba(8,8,7,.48); }
html[data-theme="dark"] .post-copy { color: #d3d0c8; }
html[data-theme="dark"] .character-stage { background-color: #d6cfbf; color: #211f1a; }
html[data-theme="dark"] .stage-vitals { background: rgba(33,32,28,.86); border-color: rgba(255,255,255,.08); }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Login cards move around a ring. There is no scroll position or clone reset. */
.login-wheel-track.is-circular{display:grid;grid-template-columns:100%;overflow:hidden;scroll-snap-type:none;touch-action:pan-y pinch-zoom}
.login-wheel-track.is-circular::before,.login-wheel-track.is-circular::after{content:none}
.login-wheel-track.is-circular .login-wheel-slide{grid-area:1/1;justify-self:center;width:var(--login-slide-width);min-width:0;scroll-snap-align:none;will-change:translate}