/* Site theme: the game's own palette and HUD look (see play.html --ui-* tokens and the in-game panels). */
:root{
  --bg:#14231d;--bg-deep:#0e1914;
  --panel:#1c3028;--panel-2:#233b30;--line:#8f7a51;--line-soft:#4d4530;
  --gold:#f1d39a;--gold-hi:#ffe7b3;--gold-dim:#b89a62;
  --text:#f4efde;--mut:#c9c4ae;--danger:#c0553a;
  --radius:8px;--max:1080px;
  /* Type scale: one step each for small, body and headings; use these instead of ad-hoc sizes. */
  --fs-xs:0.88rem;--fs-sm:0.99rem;--fs-body:1.1rem;--fs-lg:1.265rem;--space:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-body)/1.65 Grenze Gotisch,Georgia,serif;min-height:100vh;overflow-x:hidden;overflow-wrap:break-word}
h1,h2,h3{font-family:Grenze Gotisch,Georgia,serif;color:var(--gold);line-height:1.2;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.31rem,6vw,3.74rem);letter-spacing:.02em}
h2{font-size:clamp(1.485rem,3.2vw,1.98rem);margin-top:1.6em}
h2+h3,h2+p{margin-top:.4em}
h3{font-size:1.21rem}
p{margin:0 0 1em}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-hi)}
a{padding-block:10px}
.skip{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--bg-deep);color:var(--gold-hi);padding:8px 12px;z-index:9;border-radius:6px}

/* Header: same bar as the game's top HUD */
header{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;padding:12px 16px;background:rgb(14 25 20 / .94);border-bottom:2px solid var(--line)}
.brand{font:700 1.43rem Grenze Gotisch,Georgia,serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--gold);min-height:44px;display:inline-flex;align-items:center}
nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
nav a{color:var(--text);text-decoration:none;font-size:1.045rem;padding:6px 2px;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
nav a:hover{color:var(--gold-hi);border-bottom-color:var(--gold-dim)}
nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* Buttons: the game's green panel buttons with gold edges */
.play,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:linear-gradient(#355b47,#203a2d);color:var(--text);padding:10px 20px;border-radius:var(--radius);text-decoration:none;font-weight:700;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08)}
.play:hover,.btn:hover{background:linear-gradient(#49755a,#2c4d3a);border-color:var(--gold);color:var(--gold-hi)}
.btn.alt{background:transparent;color:var(--gold);border:1px solid var(--line)}
.btn.alt:hover{border-color:var(--gold);color:var(--gold-hi)}
.play{min-height:44px;padding:8px 16px}
button{font:inherit}

/* Layout */
main{max-width:var(--max);margin:0 auto;padding:20px 16px 40px}
main p,main ul:not(.promises),main ol{max-width:72ch}
.banner{border:1px solid var(--danger);background:#2a1814;padding:12px 14px;border-radius:var(--radius)}
footer{padding:24px 16px 32px;text-align:center;border-top:2px solid var(--line);color:var(--mut);font-size:var(--fs-sm);background:var(--bg-deep)}
footer a{color:var(--text);margin:0 4px;padding:0 6px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
footer a:hover{color:var(--gold-hi);text-decoration:underline}

/* Landing hero: the game's grassland terrain, with the hero figure beside the headline */
.hero{position:relative;isolation:isolate;margin:-20px -16px 0;padding:48px 16px 56px;display:grid;gap:24px;align-items:center;min-height:min(78vh,620px);background:linear-gradient(180deg,rgb(14 25 20 / .25) 0%,rgb(14 25 20 / .75) 70%,var(--bg) 100%),url(/assets/generated/production/terrain-raster-staging/world-chunk-grassland-highland-v1.png) center/cover no-repeat;border-bottom:2px solid var(--line)}
.hero .copy{max-width:600px}
.hero .figure{justify-self:center;margin:0}
.hero .figure img{width:min(260px,62vw);filter:drop-shadow(0 18px 30px rgb(0 0 0 / .6))}
.eyebrow{margin:0 0 10px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:0.88rem;font-weight:700}
.lede{font-size:var(--fs-lg);color:#fff6e0;max-width:36em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (min-width:820px){.hero{margin:-20px calc(50% - 50vw) 0;padding:72px max(32px,calc(50vw - 524px)) 72px;grid-template-columns:1.25fr .75fr}.hero .figure img{width:min(340px,30vw)}}

/* Panels: the in-game panel look (dark green, gold edge) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-top:3px solid var(--gold-dim);padding:16px 18px;border-radius:var(--radius);margin:16px 0;box-shadow:0 6px 18px rgb(0 0 0 / .3)}
.grid .card{margin:0}
.card h3{margin:0 0 6px;color:var(--gold)}
.card p{margin:0;color:#e4dcc4}
.card.art{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden}
.card.art img{display:block;width:100%;height:200px;object-fit:contain;margin:0;padding:8px 0;background:radial-gradient(ellipse at center,#22382e,var(--bg-deep))}
.card.art .body{padding:14px 16px}
.card.video{display:flex;flex-direction:column;gap:10px}
.card.video video{width:100%;height:auto;max-height:70vh;border-radius:var(--radius);background:#000;border:1px solid var(--line-soft)}
.section-title{display:flex;align-items:center;gap:12px}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dim),transparent)}

/* Lists */
.promises{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}
.promises li{position:relative;padding:12px 14px 12px 40px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.promises li::before{content:"\2726";position:absolute;left:14px;top:11px;color:var(--gold)}
ul:not(.promises){padding-left:22px}
ul:not(.promises) li{margin:6px 0}
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.subnav a{border:1px solid var(--line);padding:8px 14px;border-radius:var(--radius);text-decoration:none;color:var(--text);min-height:44px;display:inline-flex;align-items:center;background:var(--panel)}
.subnav a:hover{border-color:var(--gold);color:var(--gold-hi)}

/* Forms */
.signup{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.signup label{color:var(--text)}
.signup input[type=text],.signup input[type=email]{width:100%;max-width:440px;min-height:44px;padding:10px 12px;background:var(--bg-deep);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit}
.signup button{min-height:44px;border:0;cursor:pointer}
.check{display:block;position:relative;padding-left:30px;line-height:1.5}
.check input{position:absolute;left:0;top:5px;width:18px;height:18px;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.muted{color:var(--mut)}
.crumbs{margin:0 0 6px;font-size:var(--fs-sm);color:var(--mut)}
img{max-width:100%;height:auto}

/* Tables: wrap long cells instead of pushing the page sideways on phones */
table{width:100%;border-collapse:collapse;margin:12px 0 16px;font-size:var(--fs-sm)}
th,td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line-soft);overflow-wrap:anywhere}
th{color:var(--gold);font-weight:700}

/* Small screens: 16px gutters, no sideways scroll */
@media (max-width:600px){
  body{font-size:17.5px}
  header{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 12px;position:static}
  .brand{font-size:1.21rem}
  header nav{width:100%;flex-wrap:nowrap;gap:4px 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 0 3px}
  header nav>a,header nav>details,header nav>.acct{flex:0 0 auto}
  header nav>a{font-size:0.99rem}
  header .play{margin-left:0}
  header .more-menu{position:fixed;top:78px;left:auto;right:12px;max-height:calc(100dvh - 96px);overflow-y:auto}
  .hero{margin:-20px -16px 0;padding:32px 16px 40px}
  .cta .btn,.cta .play{flex:1 1 100%}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Supporter tiers */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0}
.tier{background:#1c3028;border:1px solid #8f7a51;border-radius:10px;padding:14px;display:grid;gap:6px;min-width:0}
.tier img{width:96px;height:96px;object-fit:contain;background:#10201a;border-radius:8px;justify-self:center}
.tier h3{margin:0;color:#f1d39a;font-family:Grenze Gotisch,Georgia,serif}
.tier-price{margin:0;font-weight:700;color:#f1d39a}
.tier ul{margin:0;padding-left:18px}
.tier-cta{min-height:44px;border-radius:8px;border:1px solid #8f7a51;background:#203a2d;color:#f4efde;font:inherit;cursor:not-allowed;opacity:.8}
.note{font-size:var(--fs-sm);color:#c6c9b9}
.buy-list{list-style:none;padding:0;display:grid;gap:10px;max-width:360px}
.tier-cta:not(:disabled){cursor:pointer;opacity:1}

/* Live status panel (status.html). */
.status-stats{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.status-stat{display:flex;flex-direction:column;min-width:120px;padding:8px 12px;border:1px solid currentColor;border-radius:6px}
.status-stat strong{font-size:1.375rem}
.status-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.status-chart{margin:0}
.status-chart svg{width:100%;height:60px}
.status-chart figcaption{font-size:var(--fs-sm)}

/* faq-wiki */
.pager{justify-content:space-between}
.card.featured{border-top-color:var(--gold)}
.faq{margin:0 0 8px}
details.qa{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:10px 0;padding:0 16px}
details.qa summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--text);list-style-position:outside}
details.qa summary:hover{color:var(--gold-hi)}
details.qa[open] summary{color:var(--gold-hi)}
details.qa p{margin:0 0 14px}
details.qa .more{color:var(--mut);font-size:var(--fs-sm)}
nav.crumbs{margin:0 0 6px}
nav.crumbs a{color:var(--mut)}

/* Polish: depth and feedback on the cards, legibility over the hero art. Motion stays off for reduced-motion users. */
h1,h2{text-shadow:0 2px 14px rgb(0 0 0 / .45)}
.card.art{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card.art:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 28px rgb(0 0 0 / .45)}
.card.art img{background:radial-gradient(ellipse at 50% 40%,#2a4a3a,var(--bg-deep) 70%)}
.promises li{transition:border-color .2s ease,background .2s ease}
.promises li:hover{border-color:var(--gold-dim);background:var(--panel-2)}
.lede{text-shadow:0 1px 10px rgb(0 0 0 / .6)}
@media (prefers-reduced-motion:reduce){.card.art,.promises li{transition:none}.card.art:hover{transform:none}}

/* Header nav: primary links, a More menu for the rest, and account links beside Play. */
header nav{gap:6px 16px}
header details.more{position:relative}
header details.more summary{list-style:none;cursor:pointer;color:var(--text);font-size:1.045rem;min-height:44px;display:inline-flex;align-items:center;padding:6px 2px;border-bottom:2px solid transparent}
header details.more summary::-webkit-details-marker{display:none}
header details.more summary::after{content:"\25BE";margin-left:6px;color:var(--gold-dim);font-size:.8em}
header details.more summary:hover,header details.more[open] summary{color:var(--gold-hi);border-bottom-color:var(--gold-dim)}
header .more-menu{position:absolute;top:100%;left:0;z-index:6;min-width:200px;display:grid;gap:2px;padding:8px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold-dim);border-radius:var(--radius);box-shadow:0 14px 28px rgb(0 0 0 / .45)}
header .more-menu a{display:flex;align-items:center;min-height:44px;padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none}
header .more-menu a:hover{background:var(--panel-2);color:var(--gold-hi)}
header .acct{display:inline-flex;align-items:center;gap:14px;padding-left:12px;border-left:1px solid var(--line-soft)}
header .acct a{color:var(--text);text-decoration:none;font-size:1.045rem;min-height:44px;display:inline-flex;align-items:center}
header .acct a:hover{color:var(--gold-hi)}
@media (max-width:600px){header .acct{border-left:0;padding-left:0}header .more-menu{left:auto;right:0}}
header .acct .acct-name{color:var(--gold);font-size:1.045rem}
header .acct .acct-out{min-height:44px;min-width:44px;padding:6px 12px;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:1.045rem;cursor:pointer}
header .acct .acct-out:hover{color:var(--gold-hi);border-color:var(--gold)}
#store-signin{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:var(--space)}
#store-signin h2{margin-top:0}

/* Customer site polish: keep the display face for Kheldra's identity and make long-form reading calmer. */
:root{
  --font-display:Grenze Gotisch,Georgia,serif;
  --font-reading:Georgia,"Times New Roman",serif;
  --panel-shadow:0 10px 28px rgb(0 0 0 / .22);
}
body{font-family:var(--font-reading);line-height:1.72}
h1,h2,h3,.brand,.tier h3{font-family:var(--font-display)}
header nav,nav a,.play,.btn,button,input,select,textarea,table,footer,.crumbs{font-family:var(--font-reading)}
header{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
main p,main ul:not(.promises),main ol{max-width:68ch}
main p a:not(.btn):not(.play),main li a{ text-decoration:underline;text-decoration-color:var(--gold-dim);text-underline-offset:3px}
main p a:hover,main li a:hover{text-decoration-color:var(--gold-hi)}
.hero{background-position:center;background-size:cover}
.hero .copy{max-width:640px}
.eyebrow{font-family:var(--font-reading);font-size:.78rem;letter-spacing:.16em}
.lede{line-height:1.55}
.grid{align-items:stretch}
.card{border-radius:12px;box-shadow:var(--panel-shadow)}
.card.art img{height:clamp(170px,18vw,220px);padding:12px}
.card.art .body{display:flex;flex:1;flex-direction:column;padding:16px 18px 18px}
.card.art .body h3{line-height:1.25}
.card.video video{display:block;aspect-ratio:16/9;object-fit:contain}
.promises li{line-height:1.55}
.signup{max-width:680px;margin:20px 0}
.signup input[type=text],.signup input[type=email],.signup input[type=password],.signup select,.signup textarea{
  display:block;width:100%;max-width:520px;min-height:48px;padding:11px 13px;
  background:var(--bg-deep);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius);font:inherit
}
.signup input::placeholder,.signup textarea::placeholder{color:var(--mut);opacity:.85}
.signup input:focus-visible,.signup select:focus-visible,.signup textarea:focus-visible{
  border-color:var(--gold-hi);box-shadow:0 0 0 3px rgb(241 211 154 / .16)
}
.signup label{display:inline-block;margin:0 0 6px;font-weight:600}
.signup p{margin:0 0 16px}
button:not(:disabled){cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.62}
footer{border-top-width:1px;line-height:1.5}
footer a{border-radius:6px}
header nav a,header details.more summary{font-size:1rem;letter-spacing:.01em}
header nav a[aria-current=page]{font-weight:700}
.subnav a{font-family:var(--font-reading);font-size:.96rem}
details.qa{border-radius:10px}
details.qa summary{font-weight:700}
:target{scroll-margin-top:88px}
@media (max-width:820px){
  main{padding-top:18px}
  .hero .figure img{width:min(260px,58vw)}
  .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
}
@media (max-width:600px){
  body{font-size:17px}
  header nav{scrollbar-color:var(--gold-dim) transparent;scroll-padding-inline:12px;scroll-snap-type:x proximity}
  header nav>a,header nav>details,header nav>.acct{scroll-snap-align:start}
  .hero{min-height:0;padding:28px 16px 34px;background-position:55% center}
  .hero .figure img{width:min(220px,56vw)}
  .eyebrow{font-size:.72rem}
  .lede{font-size:1.12rem}
  .card.art img{height:210px}
  .signup{padding:16px}
  footer{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
}
@media (prefers-reduced-motion:no-preference){
  a,button,.subnav a{transition:color .16s ease,border-color .16s ease,background-color .16s ease}
}

/* Wiki catalog entries, relationships and live facts use a phone-first card layout. */
.wiki-catalog-grid,.wiki-related-grid,.wiki-facts,.wiki-drop-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;
}
.wiki-catalog-grid{margin:18px 0 24px}
.wiki-related-grid{margin:8px 0 22px}
.wiki-entry-card,.wiki-related-card,.wiki-fact,.wiki-drop-list li{
  min-width:0;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px 14px;
}
.wiki-entry-card h2{font-size:1.34rem;margin:0 0 6px}
.wiki-entry-card p{font-size:var(--fs-sm);line-height:1.5;margin:0 0 8px}
.wiki-entry-card .wiki-entry-count{color:var(--mut);margin:0}
.wiki-entry-more{display:inline-flex;align-items:center;min-height:40px;font-weight:700}
.wiki-related-card{display:flex;align-items:center;overflow-wrap:anywhere}
.wiki-related-card a{display:block;width:100%;min-height:24px}
.wiki-data-group{margin:18px 0 24px}
.wiki-data-group .section-title{margin-bottom:10px}
.wiki-facts{margin:0}
.wiki-fact dt{color:var(--mut);font-size:var(--fs-sm);line-height:1.35}
.wiki-fact dd{margin:5px 0 0;line-height:1.45;overflow-wrap:anywhere}
.wiki-drop-list{list-style:none;margin:0;padding:0}
.wiki-drop-list li{display:flex;flex-direction:column;gap:4px}
.wiki-drop-list li span{color:var(--mut);font-size:var(--fs-sm)}
.wiki-pagination{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
@media(max-width:600px){
  .wiki-catalog-grid,.wiki-related-grid,.wiki-facts,.wiki-drop-list{grid-template-columns:minmax(0,1fr)}
  .wiki-entry-card,.wiki-related-card,.wiki-fact,.wiki-drop-list li{padding:12px}
  .wiki-fact{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:start;gap:10px}
  .wiki-fact dt,.wiki-fact dd{min-width:0}
  .wiki-fact dd{margin:0}
  .wiki-drop-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
  table.wiki-responsive-table,table.wiki-responsive-table tbody{display:block;width:100%}
  table.wiki-responsive-table{border:0}
  table.wiki-responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.wiki-responsive-table tbody{display:grid;gap:10px}
  table.wiki-responsive-table tr{display:block;min-width:0;padding:9px 12px;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius)}
  table.wiki-responsive-table td{display:grid;grid-template-columns:minmax(6.5rem,38%) minmax(0,1fr);gap:8px;border:0;padding:5px 0;overflow-wrap:anywhere}
  table.wiki-responsive-table td::before{content:attr(data-label);color:var(--mut);font-weight:700}
}

/* Homepage community snapshot: compact live presence and longer-term account activity. */
.community-snapshot{
  align-self:center;width:min(100%,360px);padding:20px;
  color:var(--text);background:linear-gradient(145deg,rgb(15 29 24 / .96),rgb(8 17 14 / .96));
  border:1px solid var(--gold-dim);border-radius:14px;
  box-shadow:0 18px 42px rgb(0 0 0 / .42),inset 0 1px rgb(255 255 255 / .04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.community-snapshot-head{display:flex;align-items:center;gap:11px}
.community-snapshot-head h2{font-size:1.35rem;margin:0;line-height:1.2}
.community-kicker{font:600 .69rem/1.3 var(--font-reading);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 3px}
.live-indicator{width:10px;height:10px;flex:none;border-radius:50%;background:#79d69a;box-shadow:0 0 0 4px rgb(121 214 154 / .12),0 0 14px rgb(121 214 154 / .55)}
.community-online{display:flex;align-items:baseline;gap:9px;margin:15px 0 12px;padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.community-online strong{font:500 2.35rem/1 var(--font-display);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.community-online span{font-size:.92rem;color:var(--mut)}
.community-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.community-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:9px 10px;background:rgb(255 255 255 / .035);border:1px solid rgb(230 211 164 / .12);border-radius:8px}
.community-stat strong{font:500 1.2rem/1.2 var(--font-display);font-variant-numeric:tabular-nums;color:var(--gold-hi)}
.community-stat span{font-size:.76rem;line-height:1.25;color:var(--mut)}
.community-record{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin-top:10px;padding:10px;background:rgb(179 143 76 / .09);border:1px solid rgb(179 143 76 / .22);border-radius:8px}
.community-record>span{color:var(--mut);font-size:.8rem}
.community-record>strong{color:var(--gold-hi);font:500 1.15rem/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.community-record>small{grid-column:1/-1;color:var(--mut);font-size:.7rem}
.community-ranks{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.community-rank{padding:3px 7px;border:1px solid var(--line-soft);border-radius:999px;color:var(--mut);font-size:.68rem;line-height:1.2}
.community-status-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--gold-hi);font-size:.83rem;text-decoration:none}
.community-status-link:hover{text-decoration:underline}
.community-snapshot.is-unavailable .live-indicator{background:#ca8065;box-shadow:0 0 0 4px rgb(202 128 101 / .12)}
@media(max-width:820px){.community-snapshot{width:min(100%,520px);margin:12px auto 0}}
@media(max-width:600px){
  .community-snapshot{padding:16px;width:100%;border-radius:11px}
  .community-online{margin:12px 0 10px}
  .community-online strong{font-size:2rem}
  .community-ranks{gap:4px}
  .community-rank{font-size:.64rem}
}