:root{color-scheme:dark;--bg:#111315;--panel:#1c1f22;--text:#eeeae1;--muted:#aaa9a2;--gold:#dbc17c;--border:#363731}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#39312155,transparent 60%),var(--bg);color:var(--text);font:15px/1.65 system-ui,'Segoe UI',sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{color:var(--text);background:#25282a;border:1px solid #4a4940;border-radius:12px;padding:9px 16px;cursor:pointer}button:hover{border-color:var(--gold);background:#37342b}button:disabled{opacity:.45;cursor:wait}button.primary{background:linear-gradient(130deg,#e6d099,#b39145);color:#221d11;border:0;font-weight:700}a{color:var(--gold)}:focus-visible{outline:2px solid #f4d68b;outline-offset:4px}header{display:flex;align-items:center;gap:32px;padding:22px max(24px,calc((100vw - 1200px)/2));border-bottom:1px solid var(--border);background:#151719e8}nav{display:flex;gap:8px;flex:1}nav button{border:0;background:transparent;color:var(--muted)}nav button.active{color:var(--gold);background:#3a3226}.brand{text-decoration:none;font-size:24px;letter-spacing:4px;font-weight:800;line-height:1.2}.brand span{display:block;font-size:9px;letter-spacing:3px;color:var(--muted)}#identity{display:flex;align-items:center;gap:12px;font-size:12px;max-width:320px;overflow-wrap:anywhere}.environment{padding:9px 24px;text-align:center;color:#b8a982;font-size:11px;letter-spacing:1px;border-bottom:1px solid #302d25}main{max-width:1200px;margin:auto;padding:38px 24px 90px}h1{font-size:34px;line-height:1.25;margin:8px 0 14px}h2{font-size:22px;margin:0 0 12px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 18px}.muted,small{color:var(--muted)}.eyebrow{color:var(--gold);text-transform:uppercase;font-size:11px;letter-spacing:2px}.hero{padding:42px;border:1px solid #5b4e32;border-radius:26px;background:linear-gradient(120deg,#53412766,#1d222480);margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}.panel{padding:25px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(150deg,#242628,#191d20);min-width:0}.panel p,.panel li{overflow-wrap:anywhere}.auth{max-width:480px;margin:20px auto}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:24px}.field{display:block;margin:16px 0;color:#d3d1c9;font-size:13px}.field input,.field textarea,.field select{display:block;width:100%;margin-top:7px;padding:11px 13px;border:1px solid #46483f;border-radius:11px;background:#141719;color:var(--text)}textarea{min-height:92px;resize:vertical}fieldset{border:1px solid #444135;border-radius:14px;margin:18px 0;padding:16px;min-width:0}legend{color:var(--gold);font-size:13px}.checks{display:flex;flex-wrap:wrap;gap:12px}.check{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px}input[type=checkbox]{accent-color:var(--gold);width:17px;height:17px}.pill{display:inline-block;padding:4px 10px;border:1px solid #655638;border-radius:99px;font-size:11px;color:#e2c987;margin:0 6px 7px 0}.placeholder{display:grid;place-items:center;min-height:140px;background:radial-gradient(ellipse,#68502e66,transparent),#14181a;border-radius:14px;color:#c9ac6b;font-size:30px;margin-bottom:20px;letter-spacing:7px}.empty{padding:45px;text-align:center;border:1px dashed #5b513c;border-radius:20px}.notice{border-left:3px solid var(--gold);padding:12px 18px;background:#3d342438;color:#d8caaa;margin:18px 0}.error{color:#ffb5a7}.review-content{white-space:pre-wrap;overflow-wrap:anywhere}#message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#302d24;border:1px solid #817046;border-radius:12px;padding:12px 22px;max-width:90vw;box-shadow:0 8px 30px #0009;z-index:5}#message:empty{display:none}footer{max-width:1200px;margin:auto;padding:22px 24px;color:var(--muted);border-top:1px solid var(--border);font-size:12px;display:flex;justify-content:space-between;gap:20px}.table{width:100%;border-collapse:collapse;font-size:12px}.table td,.table th{text-align:left;padding:10px;border-bottom:1px solid var(--border)}@media(max-width:700px){header{padding:18px;flex-wrap:wrap;gap:14px}nav{order:3;flex-basis:100%;overflow:auto}#identity{margin-left:auto;max-width:190px}.split{grid-template-columns:1fr}.hero{padding:24px}h1{font-size:27px}main{padding:25px 16px 75px}.grid{grid-template-columns:1fr}footer{flex-direction:column}.panel{padding:18px}}

/* --- Public storefront and game detail (Gold, Steam-inspired hierarchy; see design/wireframes/layout-v2.css) --- */

[hidden] { display: none !important; }
main h1, main h2, main h3 { overflow-wrap: anywhere; }
nav button[aria-current="page"] { color: var(--gold); background: #3a3226; }
nav { flex-wrap: wrap; }
.locale-switch { display: flex; gap: 4px; }
.locale-switch button { padding: 6px 12px; min-height: 36px; border-radius: 10px; color: var(--muted); }
.locale-switch button[aria-pressed="true"] { color: var(--gold); background: #3a3226; border-color: var(--gold); }

/* Keep compact account identity and logout on one line across desktop and mobile. */
#site-header { flex-wrap: wrap; }
#identity { flex-shrink: 0; min-width: 0; max-width: 380px; margin-left: auto; }
#identity .header-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; }
#identity .header-avatar .profile-art-fallback { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
#identity > button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 700px) {
  #identity { flex-basis: auto; max-width: 100%; margin-left: auto; }
  #identity .header-avatar { flex-basis: 32px; width: 32px; height: 32px; }
}

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.section-title h2 { font-size: 20px; margin: 0; }
.section-title .muted { font-size: 12px; }

.store-discovery {
  padding: 22px 26px;
  margin-bottom: 28px;
  border: 1px solid #393a3d;
  border-radius: 22px;
  background: radial-gradient(ellipse at 90% 0, #8a733f33, transparent 60%), linear-gradient(100deg, #2b2920, #1d1e22);
}
.store-discovery h1 { font-size: 28px; margin: 4px 0 6px; }
.store-discovery p { margin: 0; font-size: 14px; }

.featured { margin-bottom: 34px; }
.featured-status { margin-top: 10px; }
.featured-stage { width: 100%; aspect-ratio: 16 / 9; max-height: 480px; }
.hero-card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #5b4e32;
  border-radius: 24px;
  background: linear-gradient(150deg, #262521, #1a1d20);
}
.hero-art-link { display: block; width: 100%; height: 100%; min-width: 0; border-radius: inherit; }
.featured .hero-art { width: 100%; height: 100%; min-height: 0; }
.featured .art-image { object-fit: contain; }
.featured-stage .hero-art-link { animation: featured-reveal 300ms ease-out; }
@keyframes featured-reveal { from { opacity: .45; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .featured-stage .hero-art-link { animation: none; } }
.hero-art-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.featured-skeleton { width: 100%; aspect-ratio: 16 / 9; max-height: 480px; margin-bottom: 34px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(110deg, #202325 30%, #2b2d2c 50%, #202325 70%); background-size: 200% 100%; animation: featured-shimmer 1.4s linear infinite; }
@keyframes featured-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .featured-skeleton { animation: none; } }
.featured-error { margin-bottom: 34px; }
.featured-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.featured-dots { display: flex; gap: 6px; }
.featured-dot { min-width: 36px; min-height: 36px; border-radius: 50%; padding: 0; }
.featured-dot[aria-current="true"] { color: var(--gold); background: #3a3226; border-color: var(--gold); }
.featured-counter { font-size: 12px; min-width: 9ch; text-align: center; }
.title-en { margin: 0 0 14px; }

/* Gradient artwork placeholders: deliberately not game images. */
.art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 22px;
  min-width: 0;
  overflow: hidden;
  color: #e4dac0;
  background: radial-gradient(ellipse at 50% 80%, #88743450, transparent 70%), linear-gradient(135deg, #1d3033, #33332c 60%, #151c24);
}
.art-v1 { background: radial-gradient(ellipse at 30% 75%, #9f894e45, transparent 70%), linear-gradient(140deg, #2a2a22, #3b3427 55%, #171b22); }
.art-v2 { background: radial-gradient(ellipse at 70% 70%, #b4975038, transparent 70%), linear-gradient(130deg, #20373c, #31352c, #1a1d26); }
.art-v3 { background: radial-gradient(ellipse at 50% 30%, #c9ac6b33, transparent 65%), linear-gradient(150deg, #33302a, #252a2c 60%, #14181d); }
.art-title {
  font-size: clamp(22px, 3.6vw, 44px);
  font-weight: 300;
  letter-spacing: 5px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 0 30px #e5c76433;
  overflow-wrap: anywhere;
}
.art-caption { font-size: 11px; letter-spacing: 1px; color: #b7b19f; }
/* Game cover layered over the placeholder; the placeholder text hides only once the image really loaded. */
.art { position: relative; }
.art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art:not(.art-has-image) .art-image { opacity: 0; }
.art-has-image > .art-caption, .art-has-image > .art-title { visibility: hidden; }
/* Detail gallery, reviewer media and editor media section. No autoplay; native buttons only. */
.media-gallery { margin: 18px 0; }
/* The frame size depends only on the viewport, never on the current image, so portrait/landscape switches and the
   load/error state do not move the page. Images are letterboxed (contain), never cropped. */
.media-frame { position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; background: #14181d; border: 1px solid #3d4944; border-radius: 14px; overflow: hidden; }
.media-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.media-frame img[hidden] { display: none; }
.media-frame .media-fail { margin: 0; padding: 12px; text-align: center; }
.media-viewer { margin: 0; }
/* Reserve two caption lines so a long or empty caption does not shift the nav below. */
.media-viewer figcaption { box-sizing: border-box; height: calc(2 * 1.4em + 8px); padding-top: 8px; line-height: 1.4; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; overscroll-behavior: contain; }
.media-viewer figcaption:focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.media-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.media-thumbs, .media-review-list, .media-asset-list, .media-gallery-edit { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0; }
.media-thumb { width: 88px; height: 60px; padding: 0; overflow: hidden; border-radius: 10px; }
.media-thumb[aria-current="true"] { outline: 2px solid #c9ac6b; outline-offset: 2px; }
.media-thumb img, .media-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item { display: flex; flex-direction: column; gap: 6px; width: 200px; max-width: 100%; padding: 8px; border: 1px solid #3d4944; border-radius: 12px; }
.media-preview { height: 110px; border-radius: 8px; }
.media-review-list img { max-width: 100%; max-height: 200px; object-fit: contain; }
.media-anchor:focus { outline: none; }
/* Profile media: safe artwork frame (fallback until the image loads) and the avatar/cover editor panels. */
.profile-art { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; overflow: hidden; background: #14181d; border: 1px solid #3d4944; color: #b7b19f; }
.profile-art-avatar { width: 56px; height: 56px; border-radius: 50%; }
.profile-art-cover { display: flex; width: 100%; aspect-ratio: 3 / 1; border-radius: 14px; }
.profile-art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .profile-art, .social-avatar .profile-art { width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; color: inherit; }
.profile-avatar .profile-art-fallback, .social-avatar .profile-art-fallback { font-size: inherit; padding: 0; }
.profile-avatar { overflow: hidden; }
.profile-cover { position: relative; overflow: hidden; }
.profile-cover .profile-art-cover { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: inherit; background: transparent; }
.profile-art-image[hidden],.profile-art-fallback[hidden] { display: none; }
.profile-art-fallback { font-size: 12px; padding: 4px; text-align: center; overflow: hidden; }
.profile-media-editor { min-width: 0; max-width: 100%; }
.profile-media-panel { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid #3d4944; border-radius: 14px; }
.profile-media-body, .profile-media-panel .media-selected, .profile-media-panel .media-assets, .profile-media-panel .media-upload { min-width: 0; max-width: 100%; }
.profile-media-panel .media-selected .media-preview { width: 160px; max-width: 100%; }
.profile-media-panel .media-item small, .profile-media-panel .muted { overflow-wrap: anywhere; }
.profile-media-panel .media-upload input[type="file"] { max-width: 100%; }
.profile-media-panel button:focus-visible, .profile-media-panel input:focus-visible { outline: 2px solid #c9ac6b; outline-offset: 2px; }
@media (max-width: 640px) {
  .profile-media-panel .media-selected .media-preview { width: 100%; }
}
@media (max-width: 640px) {
  .media-item { width: 100%; }
  .media-thumb { width: 72px; height: 52px; }
}
.hero-art { min-height: 300px; }
.mini-art { width: 175px; min-height: 98px; flex-shrink: 0; padding: 12px; border-radius: 14px; }
.mini-art .art-title { font-size: 14px; letter-spacing: 2px; }
.mini-art .art-caption { font-size: 9px; }
.detail-art { min-height: 330px; border: 1px solid #3d4944; border-radius: 20px; }

.tag-list, .badge-list, .capability-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; }
.tag-list .pill { margin: 0 6px 6px 0; }
.badge { display: inline-block; padding: 3px 10px; margin: 0 6px 6px 0; border-radius: 8px; font-size: 11px; color: #d8d3c4; background: #2f3130; border: 1px solid #45463f; }
.disclosure-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.disclosures dd { margin-left: 0; overflow-wrap: anywhere; }
.disclosures dt { margin-top: 10px; font-weight: 600; }
.editor-section textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; }
.capability-list { gap: 8px; }
.capability-list li { padding: 6px 12px; border-radius: 12px; background: linear-gradient(130deg, #353428, #242629); border: 1px solid #4a4536; }

.button-link {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid #4a4940;
  border-radius: 12px;
  background: #25282a;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.button-link:hover { border-color: var(--gold); background: #37342b; }
.button-link.primary { background: linear-gradient(130deg, #e6d099, #b39145); color: #221d11; border: 0; font-weight: 700; }

.catalog { margin-top: 8px; }
.store-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 4px 20px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(150deg, #222426, #1a1d20);
}
.store-search { grid-row: span 2; }
.store-search .field { margin: 0; }
.chip-set { margin: 0 0 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-set legend { padding: 0 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid #4a4536;
  border-radius: 99px;
  font-size: 13px;
  cursor: pointer;
  background: #232527;
}
.chip input { accent-color: var(--gold); margin: 0; width: 15px; height: 15px; }
.chip:has(input:checked) { background: #3d3526; border-color: #998448; color: #f0dc9c; }
.chip:has(input:focus-visible) { outline: 2px solid #f4d68b; outline-offset: 2px; }

/* Store discovery: server-paged results, bounded tag filter, pager. */
.store-search { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.store-search .field { width: 100%; }
.store-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 10px; }
.store-selects .field { margin: 0; }
.store-tag-filter { grid-column: 1 / -1; margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
.store-tag-filter legend { padding: 0 6px; }
.tag-chosen, .store-tag-results { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.store-tag-results .tag-result { border: 0; padding: 0; background: none; }
.tag-filter-count { margin: 0 0 6px; font-size: 13px; }
.chip-on, button.chip-on { background: #3d3526; border-color: #998448; color: #f0dc9c; }
button.chip:disabled { opacity: 0.5; cursor: not-allowed; }
button.chip:focus-visible, .store-pager button:focus-visible, .store-search button:focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.game-list.is-loading { opacity: 0.45; pointer-events: none; }
.store-pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.store-pager[hidden] { display: none; }

/* Store search: prominent, centered, wide and rounded; every facet is collapsed behind the filter toggle. */
.store-filters { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; min-width: 0; }
.store-filters .store-search {
  grid-row: auto;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  margin: 0 auto;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: #15171a;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.store-filters .store-search:focus-within { box-shadow: 0 0 0 3px rgba(244, 214, 139, 0.35), 0 6px 24px rgba(0, 0, 0, 0.35); }
.store-filters .store-search .field { flex: 1 1 auto; min-width: 0; width: auto; padding: 0 0 0 16px; display: flex; flex-direction: column; justify-content: center; font-size: 12px; }
.store-filters .store-search input[type="search"] { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 16px; line-height: 1.3; padding: 0; min-height: 44px; outline: none; box-shadow: none; }
.store-filters .store-search button { border-radius: 0; min-height: 44px; padding: 0 20px; flex: 0 0 auto; }
.store-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; min-width: 0; }
.store-filter-summary { margin: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.store-filter-toggle {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid #998448;
  border-radius: 999px;
  background: #232527;
  color: #f0dc9c;
  cursor: pointer;
}
.store-filter-toggle[aria-expanded="true"] { background: #3d3526; }
.store-filter-toggle:focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.store-filter-panel { min-width: 0; }
.store-filter-panel[hidden] { display: none; }
#catalog-heading:focus { outline: none; }
#catalog-heading:focus-visible { outline: 2px solid #f4d68b; outline-offset: 4px; }

/* Developer tag picker: bounded result list and an explicit ranked selection. */
.tag-picker-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.tag-ranked, .tag-results { list-style: none; margin: 0 0 10px; padding: 0; }
.tag-ranked-item, .tag-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid #4a4536;
  border-radius: 10px;
  background: #232527;
}
.tag-ranked-item { background: #3d3526; border-color: #998448; }
.tag-rank { color: #f0dc9c; font-weight: 700; min-width: 2ch; }
.tag-name, .tag-text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.tag-ranked-item button, .tag-result button { min-height: 44px; min-width: 44px; }
.tag-ranked-item button:focus-visible, .tag-result button:focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.tag-results { max-height: 420px; overflow-y: auto; }

.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.result-count { margin: 0; color: var(--muted); font-size: 13px; }
.results-bar button { font-size: 13px; padding: 6px 14px; }

/* Horizontal discovery rows under Featured; swipe/scroll-snap on touch, the links stay keyboard-reachable. */
.discovery-rows[hidden] { display: none; }
.discovery-row { margin: 20px 0; }
.tile-list { list-style: none; margin: 0; padding: 4px 2px 10px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.tile-list { scrollbar-width: none; } /* no visible bar; swipe, wheel/trackpad and keyboard focus still scroll */
.tile-list::-webkit-scrollbar { display: none; }
.tile-list > li { flex: 0 0 min(220px, 72vw); scroll-snap-align: start; }
.game-tile { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, #242628, #191d20); }
.game-tile:hover { border-color: #5b4e32; }
.tile-art-link { display: block; width: 100%; text-decoration: none; border-radius: 0; min-width: 0; }
.tile-art-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tile-art { width: 100%; min-height: 124px; box-sizing: border-box; padding: 12px; border-radius: 0; }
.tile-art .art-title { font-size: 14px; letter-spacing: 2px; }
.tile-art .art-caption { font-size: 9px; }
.tile-art-link:hover .tile-art { opacity: 0.92; }
.tile-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px 14px; }
.tile-body h3 { margin: 0; font-size: 16px; width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-body h3 a { color: inherit; text-decoration: none; }
.tile-body h3 a:hover { color: var(--gold); text-decoration: underline; }
.tile-body h3 a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.tile-body .button-link { margin-top: auto; }
.reason-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; color: #221d11; background: linear-gradient(130deg, #e6d099, #b39145); }
.game-list { display: grid; gap: 12px; }
.game-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(150deg, #242628, #191d20);
}
.game-row:hover { border-color: #5b4e32; }
.mini-art-link { display: block; flex-shrink: 0; text-decoration: none; border-radius: 14px; }
.mini-art-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mini-art-link:hover .mini-art { opacity: 0.92; }
.row-info { flex: 1; min-width: 0; }
.row-info h3 { margin: 2px 0 0; }
.row-info h3 a { color: inherit; text-decoration: none; }
.row-info h3 a:hover { color: var(--gold); text-decoration: underline; }
.row-info h3 a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.row-info .title-en { margin-bottom: 8px; font-size: 13px; }
.row-action { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 0 10px; }
.channel { font-size: 12px; }

/* Library split: bounded selector (search, count, scrolling list) beside the selected game. */
.library-split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
.library-split.is-empty { grid-template-columns: minmax(0, 1fr); }
.library-split.is-empty .library-picker { display: none; }
.library-picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.library-picker .store-search, .library-picker .field { margin: 0; }
.library-picker .field input { max-width: 100%; }
.library-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-height: min(560px, 70vh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 2px; }
.library-select { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px; text-align: left; border-radius: 12px; background: #1d1f22; }
.library-select .mini-art { width: 64px; min-height: 40px; height: 40px; padding: 4px; border-radius: 8px; }
.library-select .mini-art .art-title { font-size: 9px; letter-spacing: 0; line-height: 1.1; }
.library-select .mini-art .art-caption { display: none; }
.library-select-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.library-select-title { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.library-select-caption { flex: none; max-width: 40%; font-size: 12px; color: #c9b89a; overflow-wrap: anywhere; }
.library-select[aria-pressed="true"] { color: #f0dc9c; border-color: var(--gold); background: #3d3526; }
.library-select:focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.library-detail { min-width: 0; }
.library-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 14px; border: 1px solid #5b4e32; border-radius: 22px; background: linear-gradient(150deg, #262521, #1a1d20); }
.library-card.unavailable { border-color: #7a4a3c; }
.library-cover { width: 100%; aspect-ratio: 16 / 9; min-height: 0; border: 1px solid #3d4944; border-radius: 16px; }
.library-cover .art-image { object-fit: cover; }
.library-info { min-width: 0; padding: 0 6px 6px; overflow-wrap: anywhere; word-break: break-word; }
.library-info h3 { font-size: 22px; margin: 2px 0 0; }
.library-info .title-en { margin-bottom: 8px; font-size: 13px; }
.library-channels { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.library-actions > * { min-width: 0; max-width: 100%; white-space: normal; }
.list-scope { font-size: 12px; margin-top: 18px; }

.state-panel { padding: 36px; text-align: center; border-radius: 20px; }
.state-panel h1, .state-panel h2, .state-panel h3 { margin-top: 0; }
.error-panel { border-color: #7a4a3c; }

.back-link { display: inline-block; font-size: 13px; padding: 5px 12px; margin-bottom: 12px; border: 1px solid #4a4940; border-radius: 99px; text-decoration: none; }
.game-detail > h1 { font-size: 32px; margin: 4px 0 2px; }
.game-highlights { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 22px; margin: 18px 0 22px; }
.game-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13px; margin: 0 0 18px; }
.game-summary dt { color: var(--muted); }
.game-summary dd { margin: 0; }
.small-heading { font-size: 13px; color: var(--muted); font-weight: 400; margin: 0 0 8px; }
.play-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  margin-bottom: 22px;
  border-radius: 20px;
  border: 1px solid #5b4e32;
  background: linear-gradient(110deg, #393629, #242622);
}
.play-strip h2 { font-size: 20px; margin: 0; }
.play-strip p { margin: 4px 0; font-size: 13px; }
.play-strip small { color: #b9bdaf; font-size: 12px; overflow-wrap: anywhere; }
.detail-content { margin-top: 34px; }
.detail-section-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.detail-section-heading h2 { margin: 0; font-size: 24px; flex-shrink: 0; }
.detail-section-heading::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, #77623d, #393a3d); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.detail-primary { display: grid; gap: 20px; min-width: 0; }
.detail-content .panel { padding: 26px; border-radius: 18px; background: linear-gradient(145deg, #242526, #1b1e20); }
.detail-content .panel > h2 { font-size: 18px; margin: 0 0 18px; }
.detail-content .small-heading { font-size: 14px; font-weight: 600; color: #dfc78c; margin-bottom: 12px; }
.detail-content p { font-size: 14px; line-height: 1.85; }
.detail-content .disclosures > .muted { margin: -6px 0 24px; font-size: 12px; line-height: 1.7; }
.detail-content .disclosure-text { margin: 0; line-height: 1.9; }
.detail-content .disclosures > .disclosure-text { margin-bottom: 24px; }
.detail-content .disclosure-list { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); margin: 0; font-size: 13px; }
.detail-content .disclosure-list > dt,
.detail-content .disclosure-list > dd { margin: 0; padding: 15px 0; border-top: 1px solid #383a38; min-width: 0; overflow-wrap: anywhere; }
.detail-content .disclosure-list > dt { padding-right: 20px; color: var(--muted); font-weight: 400; }
.detail-content .disclosure-list .disclosure-text { font-size: 13px; }
.detail-content .disclosure-list dd > .disclosure-text { margin-top: 6px; }
.detail-content .detail-capabilities { background: #202321; }
.detail-content .capability-list { gap: 10px; margin: 0; }
.detail-content .capability-list li { padding: 9px 14px; border-radius: 10px; font-size: 13px; }
.detail-content .game-metadata > h2 { margin-bottom: 20px; }
.detail-content .channel-detail { padding: 16px 18px; margin-bottom: 14px; border: 1px solid #4b4435; border-radius: 12px; background: #b8954d08; min-width: 0; }
.detail-content .channel-detail .small-heading { margin-bottom: 8px; }
.detail-content .channel-detail p { margin: 0; font-size: 13px; }
.detail-content .channel-detail h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; }
.detail-content .channel-detail dl { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 12px; }
.detail-content .channel-detail dt { color: var(--muted); overflow-wrap: anywhere; }
.detail-content .channel-detail dd { margin: 0; overflow-wrap: anywhere; }
.detail-content .language-matrix,
.detail-content .crossplay { margin-top: 24px; min-width: 0; }
.detail-content .language-matrix table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.detail-content .language-matrix th,
.detail-content .language-matrix td { padding: 12px 4px; text-align: center; border-bottom: 1px solid #3b3d39; overflow-wrap: anywhere; }
.detail-content .language-matrix tr:first-child th { color: var(--muted); font-size: 11px; font-weight: 400; background: #14171960; }
.detail-content .language-matrix th:first-child { text-align: left; padding-left: 10px; }
.detail-content .language-matrix th[scope='row'] { font-weight: 400; }
.detail-content .language-supported { color: #e2c987; font-weight: 600; }
.detail-content .language-unsupported { color: var(--muted); }
.detail-content .crossplay { border-top: 1px solid #3b3d39; padding-top: 20px; }
.detail-content .crossplay p { margin: 0; font-size: 13px; }
.detail-note { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 24px; padding: 20px 2px 0; border-top: 1px solid #383a38; }
.detail-note h3 { margin: 0 0 5px; font-size: 13px; color: #d6d2c6; }
.detail-note p { margin: 0; font-size: 12px; }
.detail-note button { flex-shrink: 0; font-size: 12px; color: var(--muted); background: transparent; }
.detail-note button:hover { color: var(--gold); border-color: var(--gold); }
.game-detail .collection-box { margin: 0 0 24px; }
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  .detail-content { margin-top: 28px; }
  .detail-section-heading h2 { font-size: 21px; }
  .detail-content .panel { padding: 18px; }
  .detail-content .disclosure-list { grid-template-columns: 1fr; }
  .detail-content .disclosure-list > dt { padding: 14px 0 4px; }
  .detail-content .disclosure-list > dd { padding: 0 0 14px; border-top: 0; }
  .detail-note { align-items: flex-start; flex-direction: column; gap: 14px; }
  .detail-note button { min-height: 44px; }
}
.side { background: #1e2023; }
.side h2 { font-size: 17px; }

/* --- Store sub-navigation, collections and private profile --- */

nav button { white-space: nowrap; }
.store-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -14px 0 18px; }
.store-tab { padding: 6px 14px; border: 1px solid #45463f; border-radius: 99px; font-size: 13px; color: var(--muted); text-decoration: none; background: #1d1f22; }
.store-tab:hover { border-color: var(--gold); color: var(--text); }
.store-tab[aria-current="page"] { color: #f0dc9c; border-color: #998448; background: #3d3526; }
.actions.centered { justify-content: center; }
.page-head { padding: 22px 26px; margin-bottom: 22px; border: 1px solid #393a3d; border-radius: 22px;
  background: radial-gradient(ellipse at 90% 0, #8a733f2e, transparent 60%), linear-gradient(100deg, #2b2920, #1d1e22); }
.page-head h1 { font-size: 28px; margin: 4px 0 6px; }
.page-head p { margin: 0; font-size: 14px; }

.collection-box { padding: 16px 20px; margin: -8px 0 22px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(150deg, #232426, #1a1d20); }
.collection-box .actions { margin-top: 0; }
.collection-status { margin: 10px 0 4px; font-size: 13px; color: #e2c987; min-height: 1.3em; overflow-wrap: anywhere; }
.fine-print { margin: 0; font-size: 12px; }
button.toggle.on { border-color: #998448; background: #3d3526; color: #f0dc9c; }

.collection-search { max-width: 460px; margin-bottom: 6px; }
.undo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 12px; border: 1px solid #655638; border-radius: 14px; background: #3d342438; font-size: 13px; overflow-wrap: anywhere; }
.undo-bar button { font-size: 13px; padding: 5px 14px; }
.collection-row .row-action { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.collection-row.unavailable { border-style: dashed; opacity: .85; }
.art-unavailable { background: repeating-linear-gradient(135deg, #1e2022 0 10px, #24262a 10px 20px); }
.added-at, .game-id { font-size: 12px; margin: 4px 0 0; overflow-wrap: anywhere; }

.profile-panel { width: 100%; }
.profile-card, .profile-preview { position: relative; width: 100%; }
.profile-preview { margin-bottom: 18px; }
.profile-cover { height: 150px; border-radius: 18px; border: 1px solid #4a4536; }
.cover-default, .cover-aurora { background: radial-gradient(ellipse at 20% 0, #9fd8b955, transparent 60%), linear-gradient(120deg, #1f3533, #3a3a2a 55%, #c9ac6b55); }
.cover-nebula { background: radial-gradient(ellipse at 70% 30%, #b28ad455, transparent 60%), linear-gradient(130deg, #241f33, #3a3026 60%, #c9ac6b44); }
.cover-dunes { background: radial-gradient(ellipse at 50% 100%, #e6c47f66, transparent 65%), linear-gradient(160deg, #3b3022, #5a4a2d 60%, #2a241b); }
.cover-forest { background: radial-gradient(ellipse at 30% 80%, #7fae6a44, transparent 60%), linear-gradient(140deg, #1b2a20, #2f3a27 60%, #c9ac6b33); }
.cover-ocean { background: radial-gradient(ellipse at 80% 70%, #6fb2c955, transparent 60%), linear-gradient(130deg, #142430, #22343a 60%, #c9ac6b33); }
.profile-avatar, .preset-avatar { display: grid; place-items: center; border-radius: 50%; border: 2px solid #c9ac6b; color: #f6e7bd; background: linear-gradient(140deg, #3d3526, #1d1f22); }
.profile-avatar { width: 189px; height: 189px; margin: -99px 0 0 22px; font-size: 85.5px; position: relative; box-shadow: 0 6px 20px #0008; }
.preset-avatar { width: 60px; height: 60px; font-size: 28px; border-width: 1px; }
.avatar-nova { background: linear-gradient(140deg, #5a4a26, #1f2226); }
.avatar-ember { background: linear-gradient(140deg, #6b3a22, #2a1f1c); }
.avatar-tide { background: linear-gradient(140deg, #234650, #1a2228); }
.avatar-grove { background: linear-gradient(140deg, #2e4a2c, #1b231c); }
.avatar-dusk { background: linear-gradient(140deg, #3a2f52, #1c1b26); }
.avatar-prism { background: linear-gradient(140deg, #4b4a5c, #2a2b2f); }
.preset-cover { width: 88px; height: 44px; border-radius: 8px; border: 1px solid #4a4536; }
.profile-body { padding: 10px 6px 0; min-width: 0; }
.profile-panel > .actions > .button-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.profile-name { font-size: 24px; margin: 6px 0 4px; overflow-wrap: anywhere; }
.profile-about { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 12px; }
.profile-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 13px; margin: 16px 0 0; }
.profile-facts dt { color: var(--muted); }
.profile-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-id { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.char-count { display: block; margin-top: 4px; text-align: right; font-size: 12px; }
.char-count.over { color: #ffb5a7; }
.preset-set { display: block; margin: 14px 0; min-width: 0; }
.preset-strip { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; min-width: 0; overflow-x: auto; padding: 6px 4px 12px; scrollbar-width: thin; scrollbar-color: #b39145 #171b1e; }
.preset { flex: 0 0 auto; padding: 6px 12px 6px 8px; white-space: nowrap; }
.preset-avatar, .preset-cover { position: relative; flex: 0 0 auto; overflow: hidden; }
.preset-artwork { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.social-avatar { position: relative; }

.confirm-dialog { max-width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid #655638; border-radius: 20px; background: linear-gradient(150deg, #262521, #1a1d20); color: var(--text); }
.confirm-dialog::backdrop { background: #000b; }
.confirm-dialog h2 { font-size: 19px; }

.security-panel { max-width: 760px; margin-bottom: 18px; }
.security-on { display: inline-block; border-color: #998448; background: #3d3526; color: #f0dc9c; }
.mfa-panel { max-width: 520px; margin: 0 auto; }
.mfa-panel .mfa-form { text-align: left; max-width: 340px; margin: 14px auto; }
.test-banner { padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 600; color: #f0dc9c; background: #3d3526; border-bottom: 1px solid var(--gold); overflow-wrap: anywhere; }
.test-banner[hidden] { display: none; }
.test-grant { margin: 14px auto 0; max-width: 340px; padding-top: 14px; border-top: 1px dashed #998448; text-align: left; }
.test-grant .actions { margin-top: 8px; }
.test-grant button { min-height: 44px; width: 100%; }
.mfa-form { margin-top: 18px; }
.mfa-form h3 { font-size: 16px; margin: 0 0 8px; }
.mfa-form input[name="code"] { font-family: ui-monospace, Consolas, monospace; letter-spacing: 4px; font-size: 18px; max-width: 12ch; }
.mfa-setup { margin-top: 12px; }
.secret-key, .secret-uri { display: block; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.secret-key { font-size: 18px; letter-spacing: 2px; color: #f6e7bd; }
.secret-uri { font-size: 12px; color: var(--muted); }
.session-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.session { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; overflow-wrap: anywhere; }
.session.current { border-color: #998448; background: #3d342438; }

@media (max-width: 700px) {
  .store-tabs { margin-top: -8px; }
  .page-head { padding: 18px; }
  .page-head h1 { font-size: 23px; }
  .collection-box { padding: 14px; }
  .collection-row .row-action { justify-content: flex-start; }
  .collection-box .actions button, .collection-row .row-action > * { white-space: normal; }
  .profile-cover { height: 110px; }
  .profile-avatar { width: 153px; height: 153px; margin: -81px 0 0 14px; font-size: 67.5px; }
  .store-discovery { padding: 18px; }
  .store-discovery h1 { font-size: 23px; }
  .game-highlights, .detail-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 190px; }
  .store-filters { grid-template-columns: 1fr; padding: 14px; }
  .store-search { grid-row: auto; margin-bottom: 10px; }
  .store-search button, .store-pager button, button.chip, .chip { min-height: 44px; }
  .store-filters .store-search .field { padding-left: 14px; }
  .store-filters .store-search input[type="search"] { font-size: 16px; }
  .store-filters .store-search button { padding: 0 14px; min-height: 44px; }
  .store-filter-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .library-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .library-list { max-height: 240px; }
  .library-info h3 { font-size: 19px; }
  .library-actions > * { flex: 1 1 100%; text-align: center; }
  .game-row { flex-wrap: wrap; gap: 12px; }
  .mini-art { width: 96px; min-height: 80px; padding: 8px; }
  .mini-art .art-title { font-size: 11px; letter-spacing: 1px; }
  .mini-art .art-caption { display: none; }
  .row-action { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding: 0; }
  .detail-art { min-height: 200px; }
  .play-strip { flex-direction: column; align-items: stretch; padding: 18px; }
  .play-strip .button-link { text-align: center; white-space: normal; }
  .game-detail > h1 { font-size: 26px; }
  .state-panel { padding: 24px 16px; }
  .secret-key { font-size: 16px; letter-spacing: 1px; }
  .mfa-form .actions button { white-space: normal; }
}

/* --- Friends & Chat dock (Gold): fixed bottom-right, panel opens above the toggle; see public/social.js --- */

/* Support center: all presentation rules stay within this page. */
.support-center { display: grid; gap: 28px; min-width: 0; }
.support-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 36px; border: 1px solid #615035; border-radius: 22px; background: radial-gradient(ellipse at 90% 40%, #b68c3520, transparent 60%), linear-gradient(125deg, #302a20, #1b1e20 75%); overflow: hidden; }
.support-intro { min-width: 0; max-width: 690px; }
.support-intro .eyebrow { font-size: 10px; letter-spacing: 2.8px; }
.support-intro h1 { margin: 10px 0 12px; font-size: clamp(28px, 3vw, 40px); font-weight: 650; letter-spacing: -.6px; }
.support-intro p { margin: 0; max-width: 610px; font-size: 14px; line-height: 1.85; color: #c4bdb0; }
.support-emblem { display: grid; place-items: center; flex: 0 0 104px; height: 104px; border: 1px solid #a78b494a; border-radius: 50%; background: #b4984420; box-shadow: 0 0 0 16px #b4984407, 0 0 0 32px #b4984404; }
.support-center h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.support-center h3 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.5; }
.support-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.support-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; padding: 24px; border: 1px solid #44443b; border-radius: 18px; background: linear-gradient(135deg, #262727, #1c1f21); text-decoration: none; color: var(--text); transition: border-color .18s ease, background-color .18s ease; }
.support-card-featured { border-color: #70603d; background: linear-gradient(125deg, #342e22, #232424); }
.support-card:hover { border-color: var(--gold); background: #2d2b25; }
.support-card:focus-visible { outline: 2px solid #f4d68b; outline-offset: 4px; border-color: var(--gold); }
.support-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.support-card-arrow { color: #afa38a; font-size: 23px; line-height: 1; }
.support-card:hover .support-card-arrow { color: var(--gold); }
.support-card p { margin: 0; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.support-card-action { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; color: #e2c987; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.support-card-action::after { content: '→'; flex: none; font-size: 18px; }
.support-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid #3e423b; border-radius: 12px; background: #1c211d; color: #b5c7b7; font-size: 12px; overflow-wrap: anywhere; }
.support-status::before { content: ''; display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; align-self: center; background: currentColor; }
.support-status[data-state="checking"], .support-status[data-state="unknown"] { border-color: #454238; background: #24231f; color: #beb8a8; }
.support-status[data-state="active"] { border-color: #786040; background: #33291e; color: #edcd94; }
.support-status .button-link { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; text-decoration: underline; white-space: normal; font-size: inherit; }
.support-guest-note { margin: 12px 0 0; padding: 0 2px; font-size: 12px; }
.support-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.support-details-full { grid-template-columns: 1fr; }
.support-help { padding: 24px; border-radius: 18px; background: #1c1f21; }
.support-guide { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid #363731; }
.support-guide-copy { min-width: 0; }
.support-guide h3 { font-size: 15px; }
.support-guide p { margin: 4px 0 0; font-size: 13px; line-height: 1.8; }
.support-text-link { display: inline-flex; align-items: center; min-height: 36px; margin-top: 5px; font-size: 12px; text-underline-offset: 4px; }
.support-help-note { margin: 0; padding-top: 14px; border-top: 1px solid #363731; font-size: 11px; line-height: 1.8; }
.support-shortcuts { min-width: 0; }
.support-card-shortcut { position: relative; gap: 5px; padding: 18px 0 18px 50px; margin: 0; border: 0; border-top: 1px solid #363731; border-radius: 0; background: transparent; }
.support-card-shortcut:hover { background: #b69a4c08; }
.support-card-shortcut .support-card-top { position: absolute; top: 18px; left: 0; margin: 0; }
.support-card-shortcut .support-card-arrow { display: none; }
.support-card-shortcut h3 { font-size: 15px; }
.support-card-shortcut p { font-size: 13px; }
.support-card-shortcut .support-card-action { padding-top: 6px; font-size: 12px; }
.support-limits { margin: -2px 0 0; padding: 16px 0 0; border-top: 1px solid #363731; font-size: 11px; line-height: 1.85; color: #9c998f; }
.support-icon { --support-image: none; display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #b69a4c30; border-radius: 12px; background: #b69a4c12; color: #e2c987; }
.support-icon::before { content: ''; display: block; width: 22px; height: 22px; background: currentColor; mask: var(--support-image) center / contain no-repeat; }
.support-icon-report { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.support-icon-shield { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6zM8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.support-icon-game { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10a4 4 0 0 1 4 3l1 7a2 2 0 0 1-3 2l-4-3H9l-4 3a2 2 0 0 1-3-2l1-7a4 4 0 0 1 4-3ZM7 10v4M5 12h4M15 11h.01M18 13h.01'/%3E%3C/svg%3E"); }
.support-icon-chat { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11a8 8 0 0 1-8 8H7l-4 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4ZM7 8h10M7 12h7'/%3E%3C/svg%3E"); }
.support-icon-lock { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14v3'/%3E%3C/svg%3E"); }
.support-icon-code { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7-5 5 5 5M17 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E"); }
.support-icon-headset { --support-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 18 0v6a4 4 0 0 1-4 4h-3'/%3E%3Crect x='2' y='10' width='4' height='8' rx='2'/%3E%3Crect x='18' y='10' width='4' height='8' rx='2'/%3E%3C/svg%3E"); }
.support-emblem .support-icon { width: 52px; height: 52px; border: 0; border-radius: 0; background: transparent; }
.support-emblem .support-icon::before { width: 44px; height: 44px; }
.support-guide .support-icon, .support-card-shortcut .support-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; }
.support-guide .support-icon::before, .support-card-shortcut .support-icon::before { width: 19px; height: 19px; }
@media (max-width: 760px) {
  .support-center { gap: 24px; }
  .support-hero { gap: 20px; padding: 24px; }
  .support-emblem { flex-basis: 68px; height: 68px; box-shadow: 0 0 0 12px #b4984407; }
  .support-emblem .support-icon::before { width: 32px; height: 32px; }
  .support-details { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .support-hero { padding: 24px 20px; border-radius: 18px; }
  .support-emblem { display: none; }
  .support-intro p { font-size: 13px; }
  .support-primary-grid { grid-template-columns: 1fr; gap: 12px; }
  .support-card { padding: 20px; }
  .support-card h3 { font-size: 17px; }
  .support-card p { font-size: 12px; }
  .support-help { padding: 20px; }
  .support-guide { gap: 12px; }
  .support-card-shortcut { padding: 18px 0 18px 46px; }
  .support-card-shortcut h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .support-card { transition: none; } }

.management-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; min-width: 0; }
.management-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.management-card h2, .management-card p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.social-dock { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(400px, calc(100% - 32px)); }
.social-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 99px; box-shadow: 0 8px 30px #0009; }
.social-badge { min-width: 22px; padding: 0 6px; border-radius: 99px; background: #221d11; color: #f4d68b; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.social-panel { display: flex; flex-direction: column; width: 100%; height: min(600px, calc(100vh - 96px)); height: min(600px, calc(100dvh - 96px)); border: 1px solid #655638; border-radius: 20px; background: linear-gradient(150deg, #262521, #1a1d20); box-shadow: 0 12px 40px #000c; overflow: hidden; }
.social-panel:focus-visible, .social-panel :focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.social-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.social-head h2 { font-size: 17px; margin: 0; }
.social-tabs { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.social-tab { flex: 1 0 auto; min-height: 40px; padding: 6px 12px; border-radius: 99px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.social-tab.active { color: var(--gold); background: #3a3226; border-color: #998448; }
.social-notice { margin: 0; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border); background: #3d342438; overflow-wrap: anywhere; }
.social-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; }
.social-section { margin-bottom: 18px; }
.social-section h3 { font-size: 15px; }
.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.social-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; }
.social-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #655638; background: #25282a; font-size: 18px; }
.social-info { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.social-code, .social-code-small { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.social-code { user-select: all; color: #f6e7bd; font-size: 14px; }
.social-code-small { font-size: 11px; }
.social-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.social-actions button, .social-composer button, .social-body button { min-height: 40px; padding: 6px 12px; font-size: 13px; white-space: normal; }
.social-chat-list { gap: 2px; }
.social-chat-row { min-width: 0; }
.social-body .social-chat-open { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 56px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.social-chat-open:hover, .social-chat-open:focus-visible { background: #99844822; }
.social-chat-open .social-avatar { width: 34px; height: 34px; border-radius: 8px; }
.social-chat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 14px; font-weight: 600; }
.social-chat-unread { flex: none; }
.social-state { padding: 12px 14px; border: 1px dashed #5b513c; border-radius: 14px; margin: 8px 0; }
.social-state p { margin: 0 0 10px; }
.social-strip { margin: 8px 0; font-size: 13px; }
.social-lookup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.social-lookup .field { flex: 1 1 180px; margin: 0; }
.social-room { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -12px -14px; }
.social-room-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.social-room-status { padding: 0 14px; }
.social-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.social-newmsg { align-self: center; margin: 0 14px 6px; }
.social-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border); background: #25282a; overflow-wrap: anywhere; }
.social-msg.mine { align-self: flex-end; background: #3a3226; border-color: #998448; }
.social-msg.theirs { align-self: flex-start; }
.social-msg.outbox.pending { opacity: .7; }
.social-msg.outbox.failed, .social-msg.outbox.rejected { border-color: #b3695a; }
.social-msg-text { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.social-msg small { display: block; font-size: 11px; }
.social-composer { padding: 8px 14px 12px; border-top: 1px solid var(--border); }
.social-composer .field { margin: 0 0 6px; }
.social-composer textarea { min-height: 56px; max-height: 120px; font-size: 16px; }
.social-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 360px) {
  .social-dock { right: 8px; bottom: 8px; width: calc(100% - 16px); }
  .social-panel { height: calc(100vh - 80px); height: calc(100dvh - 80px); border-radius: 16px; }
  .social-body { padding: 10px; }
  .social-room { margin: -10px; }
  .social-row { padding: 8px; }
  .social-tab { padding: 6px 8px; font-size: 12px; }
  .social-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) { .social-dock * { scroll-behavior: auto; transition: none; animation: none; } }



/* --- Developer applications: applicant form/history (#apply) and staff queue (#applications); see public/applications.js --- */

.app-top { display: grid; gap: 18px; margin-bottom: 18px; }
.app-state, .app-form, .app-history, .app-detail, .app-queue { max-width: 760px; min-width: 0; margin-bottom: 18px; }
.app-top > .panel { margin-bottom: 0; }
.app-state h2, .app-form h2, .app-history h2, .app-detail h2, .app-queue h2 { margin: 10px 0 8px; font-size: 19px; }
.app-state:focus-visible, .app-detail:focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }
.app-form textarea { min-height: 140px; resize: vertical; }
.app-form .error, .app-decision .error { min-height: 1.3em; margin: 8px 0 0; overflow-wrap: anywhere; }
.app-form[aria-busy="true"], .app-decision[aria-busy="true"] { opacity: .7; }
.app-form .fine-print, .app-decision .fine-print { margin-top: 12px; }

.app-status { display: inline-block; font-weight: 700; }
.app-pending { border-color: #998448; background: #3d3526; color: #f0dc9c; }
.app-approved { border-color: #5f8f6a; background: #1f3326; color: #bfe6c8; }
.app-rejected { border-color: #a1584a; background: #3a211d; color: #ffcbc0; }
.app-unknown { border-color: #55565c; background: #26272b; color: var(--muted); }

.app-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.app-item { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #1e2023; overflow-wrap: anywhere; }
.app-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.app-item h3 { margin: 0; font-size: 16px; min-width: 0; }
.app-item p { margin: 0; }
.app-when { font-size: 12px; }
.app-reason { padding: 8px 12px; border-left: 3px solid #998448; background: #3d342438; font-size: 13px; white-space: pre-wrap; }
.app-item > button { justify-self: start; }
.app-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 12px; }

.app-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.app-review .app-queue, .app-review .app-detail { max-width: none; margin-bottom: 0; }
.app-pick { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 10px 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.app-pick[aria-current="true"] { border-color: #998448; background: #3d3526; }
.app-decision { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.app-decision textarea { min-height: 110px; resize: vertical; }
.app-state .actions, .app-decision .actions, .app-detail .actions { flex-wrap: wrap; }
.app-state .button-link, .app-state button, .app-decision button { white-space: normal; }

@media (max-width: 700px) {
  .app-review { grid-template-columns: 1fr; }
  .app-state, .app-form, .app-history, .app-detail, .app-queue { padding: 14px; }
  .app-state .profile-facts { grid-template-columns: 1fr; gap: 2px; }
  .app-state .profile-facts dd { margin-bottom: 8px; }
}

@media (max-width: 360px) {
  .app-top { gap: 12px; }
  .app-state, .app-form, .app-history, .app-detail, .app-queue { padding: 12px; border-radius: 16px; }
  .app-form textarea, .app-decision textarea { font-size: 16px; }
  .app-state .actions > *, .app-decision .actions > *, .app-form .actions > * { flex: 1 1 100%; text-align: center; }
  .app-item { padding: 10px; }
}

/* --- Reports (#reports, #moderation, report dialog); reuses the .app-review/.app-item layout above; see public/reports.js --- */

.rp-received { border-color: #998448; background: #3d3526; color: #f0dc9c; }
.rp-reviewing { border-color: #6f86a8; background: #1f2a3a; color: #c4d6f2; }
.rp-resolved { border-color: #5f8f6a; background: #1f3326; color: #bfe6c8; }
.rp-no_action, .rp-unknown { border-color: #55565c; background: #26272b; color: var(--muted); }

.rp-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; overflow-wrap: anywhere; }
.rp-dialog form, .rp-dialog .field { min-width: 0; }
.rp-dialog select, .rp-dialog textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.rp-dialog textarea { min-height: 120px; resize: vertical; }
.rp-dialog .error { min-height: 1.3em; margin: 8px 0 0; overflow-wrap: anywhere; }
.rp-dialog .actions { flex-wrap: wrap; }
.rp-dialog button, .rp-dialog .button-link { white-space: normal; }
.rp-dialog form[aria-busy="true"] { opacity: .7; }
.rp-target { margin: 0 0 10px; overflow-wrap: anywhere; word-break: break-word; }
.rp-preview { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid #998448; background: #3d342438; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 8em; overflow-y: auto; }

.rp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rp-filters button { white-space: normal; }
.rp-filters button[aria-pressed="true"] { border-color: #998448; background: #3d3526; color: var(--gold); }
.rp-evidence { min-width: 0; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed #655638; border-radius: 12px; overflow-wrap: anywhere; word-break: break-word; }
.rp-evidence .profile-facts { margin-top: 0; }
.rp-evidence .app-text { margin-bottom: 0; }
.app-detail .profile-facts, .app-queue .app-item { overflow-wrap: anywhere; word-break: break-word; }
.app-detail .actions button, .app-queue > button { white-space: normal; }
.app-review button:focus-visible, .rp-dialog :is(button, select, textarea, a):focus-visible { outline: 2px solid #f4d68b; outline-offset: 2px; }

/* Report buttons inside the social dock stay quiet: a plain text-weight action, not a call to action. */
.social-dock [data-report-target] { min-height: 36px; background: transparent; border-color: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.social-dock [data-report-target]:hover, .social-dock [data-report-target]:focus-visible { color: var(--text); border-color: var(--border); }
.social-msg [data-report-target] { margin-top: 2px; padding: 2px 6px; min-height: 32px; }
.social-room-head { min-width: 0; }
.social-room-head strong, .social-room-head .social-code-small { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 360px) {
  .rp-dialog { padding: 14px; border-radius: 16px; }
  .rp-dialog textarea { font-size: 16px; }
  .rp-dialog .actions > * { flex: 1 1 100%; text-align: center; }
  .rp-filters button { flex: 1 1 100%; }
  .rp-evidence { padding: 8px; }
  .social-room-head { gap: 6px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-dialog, .rp-dialog *, .app-review * { scroll-behavior: auto; transition: none; animation: none; }
}

/* --- Scoped restrictions (#restrictions, #sanctions, restriction notice); reuses .app-review/.app-item above; see public/sanctions.js --- */

.sx-active { border-color: #a1584a; background: #3a211d; color: #ffcbc0; }
.sx-revoked { border-color: #5f8f6a; background: #1f3326; color: #bfe6c8; }
.sx-expired, .sx-unknown { border-color: #55565c; background: #26272b; color: var(--muted); }

.sx-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; padding: 10px 14px; border: 1px solid #998448; border-radius: 12px; background: #3d3526; overflow-wrap: anywhere; }
.sx-banner button, .sx-banner .button-link { white-space: normal; }
.page-head > .back-link { margin-bottom: 8px; }
.panel > p[role="status"] { margin: 14px 0 0; padding: 10px 14px; border: 1px solid #4a4940; border-radius: 12px; background: #24251f; overflow-wrap: anywhere; }
.panel > p[role="status"] .button-link { margin-left: 6px; white-space: normal; }
.sx-duration { min-width: 0; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.sx-duration legend { padding: 0 6px; }
.sx-duration select, .sx-duration input { max-width: 100%; box-sizing: border-box; }
.app-detail form select, .app-detail form input[type="text"], .app-detail form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

@media (max-width: 360px) {
  .sx-banner { padding: 8px 10px; }
  .sx-banner > * { flex: 1 1 100%; text-align: center; }
}

/* --- Staff access management (#staff); reuses .app-review/.app-item/.app-decision above; see public/staff-management.js --- */

.sm-filters { display: grid; gap: 10px; margin: 10px 0; min-width: 0; }
.sm-filters .field { min-width: 0; }
.sm-filters input, .sm-filters select { width: 100%; max-width: 100%; box-sizing: border-box; }
.sm-editor { min-width: 0; overflow-wrap: anywhere; }
.sm-duties { min-width: 0; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.sm-duties legend { padding: 0 6px; }
.sm-check { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 6px 0; overflow-wrap: anywhere; }
.sm-check input { flex: none; margin-top: 3px; }
.sm-check[aria-disabled="true"] { opacity: .75; }
.sm-readonly { overflow-wrap: anywhere; }

@media (max-width: 360px) {
  .sm-duties { padding: 8px; }
}

.mfa-qr{display:block;max-width:100%;height:auto;background:#fff;image-rendering:pixelated;margin:1rem 0}.mfa-instructions{padding-inline-start:1.5rem}.mfa-instructions li{margin-block:.6rem}

/* Sticky header: stays in flow, slides up and fades once header-scroll.js adds .header-hidden.
   Hidden controls stay focusable (no visibility/inert); focusing one reveals the header again. */
body > header#site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: transform 200ms ease, opacity 200ms ease;
}
body > header#site-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body > header#site-header { transition: none; }
}

/* Header logo: original horizontal symbol + wordmark PNG (1983x793), sized by width so the wordmark stays legible
   and height:auto keeps the ratio. flex-shrink:0 stops the header flex row from squeezing it; the wrapped layout
   (max-width 700px) leaves 284px/324px of content width at 320/360px, so 168px fits on its own row. */
.brand { display: block; flex: 0 0 auto; min-width: 0; }
.button-link .game-access-notice{display:block;max-width:42ch;white-space:normal;font-size:12px;line-height:1.5;font-weight:400;color:inherit}
.game-status-preview,.game-status-label{color:var(--gold);overflow-wrap:anywhere}
.game-status-badge{display:block;max-width:100%;font-size:12px;line-height:1.5;white-space:normal}
.row-info>.game-status-badge,.library-info>.game-status-badge{margin:6px 0 8px}
.game-status-facts{margin:16px 0;padding:12px 0;border-bottom:1px solid var(--border)}
.brand img { display: block; width: 180px; height: auto; max-width: 100%; }
@media (max-width: 480px) {
  .brand img { width: 168px; }
}


/* Unified Gold social dock: fixed list controls and an adjacent, persistent conversation. */
.social-dock { width: auto; max-width: calc(100vw - 32px); }
.social-workspace { display: flex; align-items: stretch; justify-content: flex-end; gap: 12px; width: min(360px, calc(100vw - 32px)); }
.social-workspace.has-room { width: min(752px, calc(100vw - 32px)); }
.social-workspace .social-panel { width: 360px; max-width: 100%; flex: 0 0 auto; }
.social-workspace .social-panel { border-color: #a38b553d; background: linear-gradient(145deg, #202324, #191d1e 65%); box-shadow: 0 24px 64px #0009, inset 0 1px 0 #ffffff06; }
.social-head { padding: 16px 18px 12px; border-bottom-color: #ffffff0c; }
.social-head h2 { font-size: 18px; font-weight: 500; letter-spacing: .15px; }
.social-head .social-panel-minimize { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #b5b3aa; font-size: 24px; line-height: 1; transition: color 160ms, background 160ms, border-color 160ms; }
.social-head .social-panel-minimize:hover, .social-head .social-panel-minimize:focus-visible { color: #e7cd92; border-color: #c5a56538; background: #c5a56512; }
.social-room-pane { width: 380px; min-width: 0; height: min(600px, calc(100vh - 96px)); height: min(600px, calc(100dvh - 96px)); border: 1px solid #655638; border-radius: 20px; background: linear-gradient(150deg, #262521, #1a1d20); box-shadow: 0 12px 40px #000b; overflow: hidden; }
.social-room-pane .social-room { margin: 0; }
.social-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.social-toolbar .social-search { flex: 1; width: 0; min-width: 0; font-size: 14px; min-height: 40px; padding: 8px 11px; border: 1px solid #65563880; border-radius: 12px; background: #171b1c; color: var(--text); }
.social-toolbar .social-search::placeholder { color: var(--muted); }
.social-toolbar button { min-height: 40px; padding: 6px 10px; white-space: nowrap; color: var(--gold); font-size: 13px; }
.social-code-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; padding: 10px 12px; border-top: 1px solid #655638; background: #1b1d1ce8; }
.social-code-footer > .muted { font-size: 11px; }
.social-code-footer > .social-code { grid-column: 1; grid-row: 2; white-space: nowrap; font-size: 12px; }
.social-code-footer > button { grid-column: 2; grid-row: 1 / 3; min-height: 40px; padding: 6px 10px; font-size: 12px; }
.social-group { margin: 0 0 12px; }
.social-body .social-group-head { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: #c1c0b8; font-size: 13px; font-weight: 500; line-height: 20px; }
.social-group-head:hover, .social-group-head:focus-visible { background: #c5a5650b; color: #e7cd92; }
.social-group-arrow { display: grid; place-items: center; flex: none; color: #cbb178; width: 16px; height: 16px; transition: transform 160ms; }
.social-group-arrow svg { display: block; width: 16px; height: 16px; }
.social-group-arrow.collapsed { transform: rotate(-90deg); }
.social-group-count { margin-left: auto; color: #ae9e77; font-size: 11px; }
.social-empty { margin: 4px 0 8px 24px; font-size: 12px; }
.social-body .social-inline-more { margin: 4px 0 0 24px; min-height: 32px; padding: 3px 6px; border: 0; background: transparent; color: var(--gold); font-size: 12px; }
.social-peer-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 6px; min-width: 0; min-height: 60px; padding: 0 8px; border: 1px solid transparent; border-radius: 12px; transition: background 160ms, border-color 160ms; }
.social-peer-row:hover, .social-peer-row:focus-within, .social-peer-row[data-selected="true"] { border-color: #b99c5433; background: linear-gradient(105deg, #b99c541c, #b99c540c); }
.social-peer-row .social-chat-open { flex: 0 1 auto; width: auto; max-width: calc(100% - 42px); padding: 9px 0; min-height: 58px; gap: 10px; background: transparent; }
.social-peer-info { display: flex; flex-direction: column; min-width: 0; }
.social-peer-info .social-chat-name { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; }
.social-peer-meta { font-size: 11px; line-height: 1.4; }
.social-row-avatar { flex: none; }
.social-chat-open .social-avatar { width: 38px; height: 38px; border-radius: 10px; border-color: #c6a77170; font-size: 16px; box-shadow: inset 0 0 0 1px #ffffff05; }
.social-dock .social-peer-chevron { flex: none; display: grid; place-items: center; width: 32px; height: 34px; min-height: 34px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #e4ca8e; opacity: 0; transition: opacity 140ms, background 140ms, border-color 140ms; }
.social-peer-chevron .social-menu-icon, .social-dock .social-peer-chevron svg { display: block; width: 16px; height: 16px; color: inherit; }
.social-peer-row:hover .social-peer-chevron, .social-peer-row:focus-within .social-peer-chevron, .social-peer-chevron[aria-expanded="true"], .social-dock .social-room-chevron { opacity: 1; }
.social-peer-row:hover .social-peer-chevron, .social-peer-row:focus-within .social-peer-chevron, .social-dock .social-peer-chevron:hover, .social-dock .social-peer-chevron[aria-expanded="true"] { background: linear-gradient(145deg, #b99c5430, #b99c5418); border-color: #c5a56555; }
.social-peer-row > .social-chat-unread { margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: 8px; background: linear-gradient(135deg, #e7cd92, #b89954); color: #201c13; font-size: 12px; font-weight: 600; line-height: 24px; box-shadow: inset 0 1px 0 #fff3; }
.social-peer-row[data-kind="incoming"], .social-peer-row[data-kind="outgoing"] { flex-wrap: nowrap; }
.social-peer-row[data-kind="incoming"] .social-chat-open, .social-peer-row[data-kind="outgoing"] .social-chat-open { flex: 1 1 auto; max-width: none; gap: 8px; }
.social-request-actions { flex: none; margin-left: auto; gap: 4px; }
.social-request-actions button { min-height: 32px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.social-peer-menu { position: fixed; z-index: 35; right: 16px; bottom: 80px; width: min(252px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border: 1px solid #c6a771b3; border-radius: 14px; background: linear-gradient(140deg, #222627, #191d1e 72%); box-shadow: 0 16px 40px #0009, inset 0 1px 0 #ffffff08; }
.social-menu-head { display: flex; align-items: center; gap: 10px; margin: 0 3px 4px; padding: 4px 3px 10px; border-bottom: 1px solid #ffffff0e; min-width: 0; }
.social-menu-head .social-avatar { width: 32px; height: 32px; border-color: #c6a77199; font-size: 16px; border-radius: 8px; }
.social-menu-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.social-dock .social-menu-action, .social-peer-menu [data-report-target] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #eeeae0; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; text-decoration: none; transition: background 140ms, border-color 140ms, color 140ms; }
.social-dock .social-menu-action:hover, .social-dock .social-menu-action:focus-visible { border-color: #c6a77159; background: linear-gradient(100deg, #b99c542b, #b99c541a); color: #f3e7ca; }
.social-menu-action[aria-expanded] { margin-top: 5px; border-top-color: #ffffff12; border-radius: 0 0 8px 8px; }
.social-menu-chevron { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: auto; color: #e1d4b2; transition: transform 160ms; }
.social-menu-chevron svg { display: block; width: 16px; height: 16px; }
.social-menu-action[aria-expanded="true"] .social-menu-chevron { transform: rotate(180deg); }
.social-menu-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: inherit; font-size: 18px; }
.social-menu-icon svg { display: block; width: 18px; height: 18px; }
.social-menu-action:hover > .social-menu-icon, .social-menu-action:focus-visible > .social-menu-icon { color: #e4ca8e; }
.social-menu-management { margin: 4px 0 5px 18px; padding: 0 0 0 6px; border-left: 1px solid #ffffff16; }
.social-menu-management .social-menu-action { min-height: 34px; padding: 6px 8px; font-size: 13px; color: #c6c4bd; }
.social-dock .social-menu-danger { color: #ed9189; }
.social-dock .social-menu-danger:hover, .social-dock .social-menu-danger:focus-visible { color: #ffaca2; border-color: #ed918938; background: #ed918914; }
.social-room-head { flex-wrap: nowrap; padding: 8px 10px; gap: 4px; }
.social-room-head button { min-height: 36px; padding: 4px 8px; font-size: 13px; }
.social-room-head .social-room-peer { flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.social-room-head .social-room-minimize, .social-room-head .social-room-close { width: 32px; flex: none; padding: 0; background: transparent; border: 0; font-size: 20px; color: var(--muted); }
.social-room-head .social-room-back { display: none; }
.social-room-pane :focus-visible { outline: 2px solid #f4d68b; outline-offset: -2px; }
.social-peer-menu :focus-visible { outline: 1px solid #f4d68b; outline-offset: -1px; }
@media (max-width: 780px) {
  .social-dock { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
  .social-workspace, .social-workspace.has-room { width: min(400px, calc(100vw - 16px)); }
  .social-workspace .social-panel { width: 100%; height: calc(100vh - 80px); height: calc(100dvh - 80px); border-radius: 16px; }
  .social-workspace.has-room .social-panel { display: none; }
  .social-room-pane { width: 100%; height: calc(100vh - 80px); height: calc(100dvh - 80px); border-radius: 16px; }
  .social-room-head .social-room-back { display: block; }
  .social-room-head .social-room-minimize { display: none; }
  .social-dock .social-peer-chevron { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .social-dock .social-peer-chevron { opacity: 1; min-height: 44px; } }
@media (hover: none), (pointer: coarse) {
  .social-dock .social-menu-action, .social-peer-menu [data-report-target] { min-height: 44px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .social-dock * { transition: none !important; animation: none !important; } }

.oauth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
  background: #ffffff;
  color: #1f1f1f;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid #d4af37;
  text-decoration: none;
  transition: background 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}
.oauth-google-btn:hover {
  background: #f5eedb;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
.oauth-google-btn svg.google-icon {
  flex-shrink: 0;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1rem 0 1.25rem;
  color: #b8aba0;
  font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.auth-divider span {
  padding: 0 0.75rem;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}