/*
Theme Name: Gopode
Description: An editorial dark block theme for game news, guides, and reference hubs. Requires Gopode Core for game views.
Version: 0.1.0
Requires at least: 6.8
Requires PHP: 8.2
Author: Gopode
License: GPL-2.0-or-later
Text Domain: gopode
*/

:root {
  --gp-bg:var(--wp--preset--color--background, #30333a);
  --gp-surface:var(--wp--preset--color--surface, #3c4049);
  --gp-text:var(--wp--preset--color--text, #f5f5f6);
  --gp-muted:var(--wp--preset--color--muted, #d0d3d9);
  --gp-accent:var(--wp--preset--color--accent, #7bc5ed);
  --gp-line:var(--wp--preset--color--separator, #4c515b);
  --gp-focus:var(--wp--preset--color--focus, #ffd38a);
  --gp-dark:var(--wp--preset--color--dark, #272a30);
  --gp-reading-surface:rgba(22,25,31,.24);
  --gp-control-border:var(--wp--preset--color--control-border, #9299a5);
  --gp-max:1200px;
  --gp-gutter:clamp(16px,4vw,48px);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:var(--gp-bg);
  color:var(--gp-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}

a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  color:var(--gp-accent);
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--gp-focus);
  outline-offset:5px;
}

img {
  max-width:100%;
  height:auto;
}

h1,h2,h3,p {
  margin-top:0;
}

h1,h2,h3 {
  line-height:1.17;
  letter-spacing:-.035em;
}

h1 {
  font-size:clamp(34px,5.2vw,62px);
  font-weight:740;
}

h2 {
  font-size:24px;
  font-weight:650;
}

h3 {
  font-size:18px;
  font-weight:620;
}

p {
  margin-bottom:1em;
}

button,input,select {
  color:var(--gp-text);
  background:var(--gp-surface);
  border:1px solid var(--gp-control-border);
  border-radius:6px;
  min-height:44px;
}

button {
  padding:8px 16px;
}

input,select {
  padding:9px 12px;
}

input::placeholder {
  color:var(--gp-muted);
}

[hidden] {
  display:none!important;
}

.screen-reader-text {
  border:0;
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  white-space:nowrap;
}

.screen-reader-text:focus {
  clip-path:none;
  height:auto;
  width:auto;
  left:16px;
  top:16px;
  z-index:1000;
  padding:12px;
  background:var(--gp-bg);
}

.wp-site-blocks {
  padding:0;
  position:relative;
  isolation:isolate;
}

.gp-home-art {
  position:absolute;
  inset:0 0 auto;
  height:clamp(720px,75vw,1200px);
  max-height:100%;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  opacity:.09;
  mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%);
}

.gp-home-art .gp-home-art-slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:0;
  transition:opacity 1.4s ease;
}

.gp-home-art .gp-home-art-slide.is-active { opacity:1; }
.gp-home-art-toggle {
  display:block;
  margin:24px 0 0 auto;
  background:transparent;
  border:0;
  color:var(--gp-muted);
  font-size:12px;
}

@media (prefers-reduced-motion:reduce) {
  .gp-home-art .gp-home-art-slide { transition:none; }
}

.gp-shell {
  max-width:calc(var(--gp-max) + 2 * var(--gp-gutter));
  padding:0 var(--gp-gutter) 64px;
  margin:0 auto!important;
  min-height:70vh;
}

/* Keep the shared artwork visible through the central reading area. */
main.gp-shell {
  background-color:var(--gp-reading-surface);
  background-image:repeating-linear-gradient(135deg, transparent 0 7px, rgba(215,228,240,.018) 7px 8px);
  border-radius:8px;
}

.gp-header {
  background:transparent;
  border-bottom:0;
  position:relative;
  z-index:20;
  margin:0!important;
}

.gp-header-inner,.gp-footer-inner {
  max-width:calc(var(--gp-max) + 2 * var(--gp-gutter));
  padding:22px var(--gp-gutter);
  margin:auto;
  display:flex;
  align-items:center;
  gap:48px;
}

.gp-wordmark {
  font-size:25px;
  font-weight:850;
  letter-spacing:-.055em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.gp-wordmark-dot {
  color:var(--gp-accent);
  margin-left:-10px;
}

.gp-mark {
  width:23px;
  height:23px;
  border:6px solid var(--gp-accent);
  border-radius:8px 8px 8px 2px;
  transform:rotate(-12deg);
}

.gp-header nav {
  display:flex;
  gap:28px;
  align-items:center;
  margin-left:auto;
}

.gp-header nav a {
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
  min-height:44px;
  display:flex;
  align-items:center;
  color:var(--gp-text);
}

.gp-header nav a[aria-current] {
  color:var(--gp-text);
}

.gp-header nav a:hover { color:var(--gp-accent); }
.gp-games-nav { position:relative; display:flex; align-items:center; }
.gp-games-dropdown summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-height:44px;
  color:var(--gp-accent);
  font-size:24px;
}
.gp-games-dropdown summary::-webkit-details-marker { display:none; }
.gp-games-dropdown[open] summary span { transform:rotate(180deg); }
.gp-games-list {
  position:absolute;
  top:100%;
  right:0;
  min-width:210px;
  max-width:calc(100vw - 32px);
  max-height:60vh;
  overflow-y:auto;
  list-style:none;
  margin:0;
  padding:8px;
  background:var(--gp-dark);
  border:1px solid var(--gp-line);
  border-radius:8px;
  box-shadow:0 12px 28px #0004;
}
.gp-header .gp-games-list a { padding:8px 14px; font-size:16px; border-radius:4px; }
.gp-header .gp-games-list a:hover,.gp-header .gp-games-list a:focus-visible { background:var(--gp-surface); }

.gp-demo-note {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.015em;
  color:var(--gp-muted);
  padding:14px 0;
  border-bottom:1px solid var(--gp-line);
}

.gp-demo-note>span:last-child {
  margin-left:auto;
  text-align:right;
}

.gp-status-dot {
  width:6px;
  height:6px;
  flex-shrink:0;
  background:#9bc6b7;
  border-radius:50%;
}

.gp-intro {
  padding:42px 0 28px;
  max-width:820px;
}

.gp-intro h1 {
  margin:12px 0 18px;
  line-height:1.05;
}

.gp-intro>p:last-child {
  color:var(--gp-muted);
  font-size:16px;
}

.gp-eyebrow {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:650;
  color:var(--gp-muted);
  margin-bottom:10px;
}

.gp-eyebrow a:hover {
  text-decoration:underline;
}

.gp-accent {
  color:var(--gp-accent);
}

.gp-section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:20px;
}

.gp-section-heading h2 {
  margin:0;
  display:flex;
  align-items:baseline;
  gap:12px;
}

.gp-section-number {
  font-family:ui-monospace,monospace;
  font-size:10px;
  color:var(--gp-muted);
  letter-spacing:0;
  font-weight:400;
}

.gp-text-link {
  font-size:14px;
  color:var(--gp-muted);
  white-space:nowrap;
}

.gp-text-link span {
  margin-left:8px;
}

.gp-game-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin-bottom:48px;
}

.gp-game-card {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-radius:9px;
  background:var(--gp-surface);
  isolation:isolate;
  transition:transform .2s;
}

.gp-game-card:hover {
  transform:translateY(-3px);
}

.gp-game-card-text {
  position:absolute;
  left:20px;
  bottom:20px;
  right:36px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.gp-game-card-text .gp-eyebrow {
  font-size:8px;
  color:var(--gp-muted);
  margin:0;
}

.gp-game-card-text strong {
  font-size:24px;
  letter-spacing:-.04em;
  line-height:1.2;
  color:var(--gp-text);
}

.gp-card-arrow {
  position:absolute;
  bottom:20px;
  right:18px;
  color:var(--gp-text);
}

.gp-art {
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  background:linear-gradient(145deg,#526b7c,#354956 55%,#272a30);
  isolation:isolate;
}

.gp-art-teal {
  background:linear-gradient(145deg,#526f72,#374f52 55%,#272a30);
}

.gp-art-amber {
  background:linear-gradient(145deg,#766c53,#514d40 55%,#272a30);
}

.gp-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#272a30f5,transparent 85%);
  z-index:1;
}

.gp-art img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.gp-art-orbit {
  position:absolute;
  right:-10%;
  top:-55%;
  width:90%;
  aspect-ratio:1;
  border:1px solid #ffffff22;
  border-radius:50%;
  transform:rotate(-30deg);
}

.gp-art-line {
  position:absolute;
  width:22%;
  height:190%;
  background:linear-gradient(90deg,#ffffff02,#ffffff14,#ffffff00);
  transform:rotate(28deg);
  right:30%;
  top:-50%;
  border-left:1px solid #ffffff24;
}

.gp-art-label {
  position:absolute;
  top:12px;
  left:14px;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gp-text);
  opacity:.78;
  z-index:2;
}

.gp-paired-feeds {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin:44px 0;
}

.gp-feed {
  min-width:0;
}

.gp-feed-list {
  display:flex;
  flex-direction:column;
  gap:22px;
}

.gp-article-row {
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.gp-thumbnail {
  display:block;
  position:relative;
  aspect-ratio:1.25;
  overflow:hidden;
  border-radius:5px;
  background:var(--gp-surface);
}

.gp-thumbnail>img {
  height:100%;
  width:100%;
  object-fit:cover;
}

.gp-thumbnail .gp-art-label {
  font-size:6px;
  left:7px;
  top:7px;
  letter-spacing:0;
}

.gp-thumbnail .gp-art-orbit {
  top:-30%;
}

.gp-meta {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  font-size:14px;
  color:var(--gp-muted);
  margin:0 0 5px;
}

.gp-meta>span:first-child {
  color:var(--gp-accent);
}

.gp-meta time {
  color:var(--gp-muted);
}

.gp-row-copy h3 {
  margin:0 0 7px;
  font-size:16px;
  line-height:1.35;
  letter-spacing:-.015em;
}

.gp-description {
  font-size:14px;
  line-height:1.55;
  color:var(--gp-muted);
  margin:0;
}

.gp-trends {
  border-top:1px solid var(--gp-line);
  padding-top:30px;
  margin-top:32px;
}

.gp-trends .gp-feed-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.gp-trends .gp-article-row {
  display:block;
}

.gp-trends .gp-thumbnail {
  aspect-ratio:2.3;
  margin-bottom:14px;
}

.gp-trends .gp-row-copy h3 {
  font-size:19px;
}

.gp-trends .gp-description {
  font-size:14px;
}

.gp-footer {
  background:var(--gp-dark);
  border-top:1px solid var(--gp-line);
  margin:0!important;
}

.gp-footer-inner {
  padding-top:30px;
  padding-bottom:30px;
  gap:24px;
  color:var(--gp-muted);
  font-size:11px;
  flex-wrap:wrap;
}

.gp-footer .gp-wordmark {
  color:var(--gp-text);
  font-size:20px;
}

.gp-footer p {
  margin:0;
}

.gp-footer span {
  margin-left:auto;
}

.gp-game-heading {
  padding:24px 0 12px;
}

.gp-game-heading .gp-eyebrow {
  margin-bottom:8px;
}

.gp-game-heading h1 {
  font-size:36px;
  margin:0;
  overflow-wrap:anywhere;
}

.gp-section-nav {
  display:flex;
  gap:26px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--gp-control-border) var(--gp-bg);
  border-bottom:1px solid var(--gp-line);
  padding:10px 4px;
  margin-bottom:24px;
}

.gp-section-nav a {
  flex-shrink:0;
  white-space:nowrap;
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:14px;
  color:var(--gp-muted);
  position:relative;
}

.gp-section-nav [aria-current] {
  color:var(--gp-accent);
}

.gp-section-nav [aria-current]:after {
  position:absolute;
  content:"";
  height:2px;
  bottom:0;
  left:0;
  right:0;
  background:var(--gp-accent);
}

.gp-game-identity {
  margin-top:24px;
  font-size:18px;
  font-weight:700;
}
.gp-game-identity a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--gp-text);
}
.gp-breadcrumbs {
  margin:0 0 16px;
  font-size:14px;
  color:var(--gp-muted);
}
.gp-breadcrumbs ol {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 8px;
  list-style:none;
  margin:0;
  padding:0;
}
.gp-breadcrumbs li {
  min-width:0;
  overflow-wrap:anywhere;
}
.gp-breadcrumbs a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.gp-breadcrumbs li > span[aria-hidden] {
  margin-right:8px;
}
.gp-profile-back {
  margin:0 0 16px;
  font-size:14px;
}
.gp-profile-back a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:4px;
}

.gp-codes {
  padding:20px;
  background:var(--gp-dark);
  border-radius:8px;
  overflow-anchor:none;
}

.gp-codes-heading {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 16px;
  margin-bottom:14px;
}

.gp-codes h2 {
  font-size:23px;
  margin:0;
}

.gp-code-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.gp-code {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  min-width:0;
  padding:12px 14px;
  border:0;
  border-radius:6px;
  background:var(--gp-surface);
  color:var(--gp-text);
  text-align:left;
  overflow-wrap:anywhere;
}

button.gp-code:hover,button.gp-code.is-copied {
  background:var(--gp-bg);
}

.gp-code code {
  font-size:14px;
  font-weight:700;
  user-select:text;
  max-width:100%;
}

.gp-code-rewards {
  color:var(--gp-muted);
  font-size:14px;
  line-height:1.45;
}

.gp-copy-hint {
  color:var(--gp-accent);
  font-size:12px;
}

.gp-codes-toggle {
  background:transparent;
  border-color:var(--gp-control-border);
  margin-top:12px;
  font-size:14px;
  color:var(--gp-accent);
}

.gp-copy-status {
  font-size:14px;
  color:var(--gp-muted);
  margin:10px 0 0;
}

.gp-copy-status:empty {
  margin:0;
}

.gp-code-fallback {
  display:grid;
  gap:6px;
  font-size:14px;
  margin-top:10px;
}

.gp-code-fallback input {
  min-width:0;
  width:100%;
}

.gp-expired {
  margin-top:8px;
}

.gp-expired summary {
  cursor:pointer;
  min-height:44px;
  padding:10px 0;
  color:var(--gp-muted);
  font-size:14px;
}

.gp-expired .gp-code {
  background:transparent;
  border-bottom:1px solid var(--gp-line);
  border-radius:0;
}

.is-expired code {
  text-decoration:line-through;
  color:var(--gp-muted);
}

.gp-codes .gp-empty {
  padding:0;
  margin:0;
}

.gp-archive-list {
  max-width:850px;
  display:grid;
  gap:28px;
}

.gp-archive-list .gp-article-row {
  grid-template-columns:160px 1fr;
}

.gp-archive-list h3 {
  font-size:22px;
}

.gp-archive-list .gp-description {
  font-size:14px;
}

.gp-archive-list .gp-meta {
  font-size:14px;
}

.gp-pagination {
  display:flex;
  gap:12px;
  margin:36px 0;
}

.gp-pagination a {
  min-width:44px;
  min-height:44px;
  padding:8px;
  text-align:center;
  border:1px solid var(--gp-line);
  border-radius:4px;
}

.gp-pagination [aria-current] {
  color:var(--gp-accent);
  border-color:var(--gp-accent);
}

.gp-empty {
  color:var(--gp-muted);
  font-size:14px;
  padding:18px 0;
}

.gp-article,.gp-profile {
  max-width:780px;
  margin:48px auto;
}

.gp-profile {
  max-width:none;
}

.gp-breadcrumbs ~ .gp-article,.gp-breadcrumbs ~ .gp-profile {
  margin-top:8px;
}

.gp-article h1,.gp-profile h1 {
  font-size:clamp(30px,4vw,48px);
  line-height:1.13;
  margin:16px 0;
}

.gp-deck {
  font-size:18px;
  color:var(--gp-muted);
  line-height:1.6;
}

.gp-article-fallback { position:relative; height:100px; max-height:100px; overflow:hidden; margin:24px 0; border-radius:6px; }

.gp-byline {
  color:var(--gp-muted);
  font-size:14px;
  line-height:1.6;
  margin:12px 0 24px;
}

.gp-article header>.gp-meta {
  font-size:14px;
  padding-bottom:24px;
  border-bottom:1px solid var(--gp-line);
  margin-bottom:28px;
}

.gp-prose {
  font-size:17px;
  line-height:1.8;
}
.gp-article-image { margin:24px 0; }
.gp-article-image img { display:block; max-width:100%; height:auto; border-radius:6px; }
.gp-article-image figcaption { color:var(--gp-muted); font-size:14px; line-height:1.5; margin-top:8px; }

.gp-prose h2 {
  margin:36px 0 16px;
  font-size:27px;
}

.gp-prose h3 {
  margin:28px 0 12px;
  font-size:21px;
}

.gp-prose a {
  color:var(--gp-accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

.gp-prose blockquote {
  margin:24px 0;
  padding:4px 24px;
  border-left:3px solid var(--gp-accent);
  color:var(--gp-muted);
}

.gp-profile-facts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:1px;
  padding:1px;
  border:1px solid var(--gp-line);
  border-radius:8px;
  background:var(--gp-line);
  overflow:hidden;
  margin-bottom:24px;
}
.gp-profile-facts > div { min-width:0; padding:12px 14px; background:var(--gp-dark); }
.gp-profile-facts dd { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-height:26px; overflow-wrap:anywhere; }
.gp-fact-value { display:inline-flex; align-items:center; gap:7px; }
.gp-fact-value .gp-attribute-icon { width:22px; height:22px; flex:0 0 22px; }
.gp-fact-star { color:#e8c46a; font-size:20px; line-height:1; }

.gp-profile-facts small {
  display:block;
  color:var(--gp-muted);
  font-size:14px;
}

.gp-filters {
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0;
}

.gp-filters label {
  font-size:14px;
  color:var(--gp-muted);
  display:grid;
  gap:6px;
}

.gp-filters label:first-child {
  flex:1;
  min-width:180px;
}

.gp-filters input,.gp-filters select {
  width:100%;
  font-size:14px;
}

.gp-filters button,.gp-clear {
  font-size:14px;
}

.gp-clear {
  min-height:44px;
  padding:10px;
  display:inline-block;
  text-decoration:underline;
}

.gp-character-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(125px,1fr));
  gap:16px;
}

/* Motive cards link to compact details on the same page. */
.gp-motive-item { min-width:0; position:relative; }
.gp-profile-teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.gp-profile-team h3 { margin:0 0 12px; font-size:18px; }
.gp-profile-team-roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.gp-profile-team>p,.gp-equipment-note { margin:14px 0 0; font-size:14px; line-height:1.65; }
.gp-profile-team-portrait { --gp-badge-size:22.88px; width:100%; }
.gp-profile-team-portrait,
.gp-profile-motives .gp-motive-card { border:1px solid rgba(181,200,218,.28); }
.gp-profile-team-portrait>.gp-article-image { margin:0; width:100%; height:100%; }
.gp-profile-team-portrait>.gp-article-image img { width:100%; height:100%; object-fit:cover; }
.gp-profile-team-link.gp-motive-card { position:absolute; inset:0; background:transparent; }
.gp-profile-team-portrait .gp-profile-team-link strong { font-size:12px; padding:36px 28px 8px 8px; }
.gp-profile-team-link:focus-visible { outline-offset:-2px; }
.gp-profile-team-portrait .gp-card-badge { z-index:1; pointer-events:none; }
.gp-profile-team-portrait .gp-card-badge .gp-article-image { margin:0; width:100%; height:100%; }
.gp-profile-team-portrait .gp-card-badge img { width:100%; height:100%; object-fit:contain; }
.gp-profile-team-portrait .gp-card-badge--identity .gp-article-image { width:80%; height:80%; padding:2px; background:linear-gradient(135deg,#fff3bf,#d4b85d); border-radius:2px; }
.gp-profile-team-portrait .gp-card-badge--identity img { filter:brightness(0); }
@media (max-width:900px) { .gp-profile-teams { grid-template-columns:1fr; gap:22px; } .gp-profile-team-roster { max-width:600px; } }
@media (max-width:520px) { .gp-profile-team-roster { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:360px; } }
.gp-profile-motives { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:736px; }
@media (max-width:600px) { .gp-profile-motives { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:360px; } }
.gp-profile-motives .gp-motive-pick { margin:0 0 8px; font-size:14px; font-weight:700; color:var(--gp-accent); }
.gp-profile-motives .gp-motive-card>.gp-article-image { margin:0; width:100%; height:100%; }
.gp-profile-motives .gp-motive-card>.gp-article-image img { width:100%; height:100%; object-fit:cover; }
.gp-profile-motives .gp-card-badge .gp-article-image { margin:0; width:80%; height:80%; padding:2px; background:linear-gradient(135deg,#fff3bf,#d4b85d); border-radius:2px; box-shadow:0 1px 4px #0006; }
.gp-profile-motives .gp-card-badge .gp-article-image img { width:100%; height:100%; object-fit:contain; border-radius:0; filter:brightness(0); }
.gp-motive-item[hidden] { display:none; }
.gp-motive-card { display:block; cursor:pointer; background:var(--gp-dark,#25282e); }
.gp-motive-card:focus-visible { outline:2px solid var(--gp-accent); outline-offset:3px; }
.gp-motive-card.gp-character-card strong { padding:42px 9px 34px; font-size:13px; }
.gp-motive-stars { position:absolute; bottom:8px; left:9px; color:#f1cc68; font-size:12px; letter-spacing:1px; }
.gp-motive-tooltip { display:none; position:absolute; z-index:100; top:100%; left:0; width:340px; max-width:calc(100vw - 24px); padding:16px; border:1px solid #535b69; border-radius:8px; background:#20232a; color:#f1f3f7; box-shadow:0 10px 30px #0008; font-size:14px; line-height:1.5; }
.gp-motive-tooltip strong { display:block; font-size:17px; line-height:1.3; }
.gp-motive-tooltip-meta { color:#85c9e8; margin-top:5px; }
.gp-motive-tooltip p { margin:10px 0 0; }
.gp-motive-item:not(.gp-tooltip-ready):hover .gp-motive-tooltip,
.gp-motive-item:not(.gp-tooltip-ready):focus-within .gp-motive-tooltip { display:block; }
.gp-motive-tooltip[popover] { position:fixed; inset:auto; margin:0; max-height:calc(100dvh - 24px); overflow:auto; }
.gp-motive-tooltip:popover-open { display:block; }
.gp-motive-stat-values { display:flex; flex-wrap:wrap; gap:8px 24px; }
.gp-motive-stat-values b { color:var(--gp-accent); margin-right:6px; }
.gp-motive-stat-note { display:block; color:var(--gp-muted); font-size:12px; margin-top:2px; }
.gp-motive-intro { font-size:16px; font-weight:400; line-height:1.5; margin:0 0 16px; }
.gp-motive-details { margin-top:24px; }
.gp-motive-details>h2 { margin:0 0 12px; }
.gp-motive-detail { display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:start; padding:16px 0; border-top:1px solid var(--gp-line); scroll-margin-top:24px; overflow-wrap:anywhere; }
.gp-motive-detail-art { aspect-ratio:3/4; overflow:hidden; border-radius:6px; background:var(--gp-surface); }
.gp-motive-detail-art img { display:block; width:100%; height:100%; object-fit:cover; }
.gp-motive-detail-copy { min-width:0; }
@media (max-width:600px) {
  .gp-motive-detail { grid-template-columns:88px minmax(0,1fr); gap:12px; }
}
.gp-motive-detail:target { border-top-color:var(--gp-accent); }
.gp-motive-detail:focus-visible { outline:2px solid var(--gp-accent); outline-offset:4px; }
.gp-motive-detail h3 { margin:0; font-size:21px; line-height:1.3; }
.gp-motive-detail-meta { font-size:13px; color:var(--gp-muted); margin:3px 0 8px; }
.gp-motive-detail p { margin:8px 0 0; font-size:15px; line-height:1.5; }
.gp-motive-best-for a { text-decoration:underline; text-underline-offset:3px; }

.gp-character-card {
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
  border-radius:6px;
}

.gp-character-card>img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.gp-character-card strong {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:30px 12px 12px;
  background:linear-gradient(transparent,#272a30f5);
  font-size:14px;
  line-height:1.3;
}

.gp-character-card-meta {
  display: block;
  margin-top: .3rem;
  color: var(--gp-muted, #bec4ce);
  font-size: .72rem;
  font-weight: 500;
}

.gp-portrait-initial {
  position:absolute;
  top:18%;
  left:0;
  right:0;
  text-align:center;
  font-size:65px;
  font-weight:200;
  color:#ffffff35;
}

.gp-new {
  position:absolute;
  top:12px;
  right:10px;
  background:var(--gp-accent);
  color:var(--gp-dark);
  font-size:9px;
  letter-spacing:.08em;
  padding:3px 6px;
  border-radius:3px;
}

.gp-tier-row {
  display:grid;
  grid-template-columns:65px repeat(3,minmax(0,1fr));
  gap:20px;
  padding:22px 0;
  border-top:1px solid var(--gp-line);
}

.gp-tier-row>h2 {
  font-size:29px;
  color:var(--gp-accent);
  margin:0;
  padding:8px 0;
}

.gp-tier-role h3 {
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gp-muted);
  margin:0 0 12px;
}

.gp-tier-character {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  margin:10px 0;
}

.gp-mini-portrait {
  width:40px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:3px;
  background:var(--gp-surface);
  color:var(--gp-accent);
  font-size:22px;
}

.gp-muted {
  font-size:14px;
  color:var(--gp-muted);
}

.gp-ad {
  min-height:120px;
  text-align:center;
  margin:32px 0;
  background:var(--gp-surface);
}

.gp-ad>span {
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gp-muted);
  padding:8px;
}

.gp-404 {
  padding:90px 0;
}

.gp-404 p {
  color:var(--gp-muted);
}

@media(min-width:1600px) {
  .gp-intro {
    padding-top:52px;
  }
}

@media(max-width:1023px) {
  .gp-game-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .gp-paired-feeds {
    gap:28px;
  }
  .gp-article-row {
    grid-template-columns:80px minmax(0,1fr);
    gap:12px;
  }
  .gp-trends .gp-feed-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .gp-code-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .gp-section-nav {
    gap:20px;
  }
}

@media(max-width:699px) {
  .gp-header-inner {
    padding-top:12px;
    padding-bottom:12px;
    gap:12px;
  }
  .gp-header nav {
    margin-left:auto;
    gap:14px;
  }
  .gp-header nav a { font-size:16px; }
  .gp-wordmark {
    font-size:23px;
  }
  .gp-mark {
    width:20px;
    height:20px;
    border-width:5px;
  }
  .gp-demo-note {
    font-size:9px;
    align-items:start;
  }
  .gp-demo-note>span:last-child {
    max-width:220px;
  }
  .gp-status-dot {
    margin-top:4px;
  }
  .gp-intro {
    padding:32px 0 20px;
  }
  .gp-intro h1 {
    font-size:42px;
  }
  .gp-intro>p:last-child {
    font-size:14px;
    max-width:300px;
  }
  .gp-game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:32px;
  }
  .gp-game-card {
    aspect-ratio:1.3;
  }
  .gp-game-card-text {
    left:14px;
    bottom:15px;
  }
  .gp-game-card-text strong {
    font-size:21px;
  }
  .gp-game-card-text .gp-eyebrow {
    font-size:7px;
  }
  .gp-card-arrow {
    bottom:14px;
    right:12px;
  }
  .gp-paired-feeds {
    grid-template-columns:1fr;
    gap:34px;
    margin:34px 0;
  }
  .gp-section-heading h2 {
    font-size:23px;
  }
  .gp-article-row {
    grid-template-columns:100px minmax(0,1fr);
    gap:16px;
  }
  .gp-row-copy h3 {
    font-size:16px;
  }
  .gp-trends .gp-feed-list {
    grid-template-columns:1fr;
  }
  .gp-trends .gp-article-row {
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
  }
  .gp-trends .gp-thumbnail {
    aspect-ratio:1.25;
    margin:0;
  }
  .gp-trends .gp-row-copy h3 {
    font-size:16px;
  }
  .gp-footer-inner {
    gap:12px;
  }
  .gp-footer span {
    width:100%;
    margin-left:0;
  }
  .gp-game-heading {
    padding-top:20px;
  }
  .gp-game-heading h1 {
    font-size:30px;
  }
  .gp-section-nav {
    gap:4px 20px;
    padding:8px 0;
  }
  .gp-section-nav [aria-current]:after {
    bottom:0;
  }
  .gp-codes {
    padding:16px;
  }
  .gp-code-list {
    gap:8px;
  }
  .gp-code {
    padding:10px;
  }
  .gp-archive-list .gp-article-row {
    grid-template-columns:90px minmax(0,1fr);
  }
  .gp-archive-list h3 {
    font-size:18px;
  }
  .gp-archive-list .gp-description {
    font-size:14px;
  }
  .gp-archive-list .gp-meta {
    font-size:14px;
  }
  .gp-article,.gp-profile {
    margin:32px auto;
  }
  .gp-deck {
    font-size:16px;
  }
  .gp-prose {
    font-size:16px;
  }
  .gp-tier-row {
    grid-template-columns:40px 1fr;
    gap:18px;
  }
  .gp-tier-row>h2 {
    grid-row:span 3;
    font-size:24px;
  }
  .gp-tier-role {
    grid-column:2;
  }
  .gp-character-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .gp-character-card strong {
    font-size:12px;
    padding:24px 8px 10px;
  }
  .gp-character-card .gp-art-label {
    font-size:6px;
    left:7px;
    top:8px;
  }
  .gp-new {
    top:21px;
    right:6px;
    font-size:7px;
  }
  .gp-portrait-initial {
    font-size:48px;
  }
  .gp-filters label {
    flex:1;
    min-width:100px;
  }
  .gp-filters label:first-child {
    flex-basis:100%;
  }
}

@media(max-width:359px) {
  .gp-intro h1 {
    font-size:36px;
  }
  .gp-character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .gp-wordmark {
    font-size:20px;
  }
  .gp-header nav {
    gap:10px;
  }
  .gp-game-card-text strong {
    font-size:18px;
  }
  .gp-article-row {
    grid-template-columns:75px minmax(0,1fr);
    gap:12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}

/* Character identity and shared portrait media. */
.gp-profile-identity .gp-profile-epithet {
  color: #e4be55;
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.5;
  margin: .35rem 0 .75rem;
}
.gp-profile-identity {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.gp-profile-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
}
.gp-profile-portrait > img, .gp-mini-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gp-mini-portrait {
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 699px) {
  .gp-profile-identity {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 16px;
  }
  .gp-profile-identity h1 {
    font-size: 30px;
  }
  .gp-profile-identity .gp-deck {
    font-size: 14px;
  }
}

/* Compact publication introduction; directory and archive titles retain their scale. */
.gp-home-intro {
  max-width:none;
  text-align:center;
  padding:30px 0 28px;
}
.gp-home-intro h1 {
  font-size:clamp(25px,3vw,36px);
  line-height:1.2;
  margin:0 0 12px;
}
.gp-home-intro > p:last-child {
  max-width:760px;
  margin:0 auto;
  font-size:16px;
  line-height:1.6;
}
@media(max-width:699px) {
  .gp-home-intro {
    padding:24px 0;
  }
  .gp-home-intro > p:last-child {
    font-size:14px;
  }
}
@media(max-width:359px) {
  .gp-code-list {
    grid-template-columns:minmax(0,1fr);
  }
}

/* Continuous, shared character build guide. */
.gp-character-guide {
  max-width:none;
}
.gp-profile-overview {
  position:relative;
  isolation:isolate;
  padding-top:12px;
  overflow:hidden;
}
.gp-profile-atmosphere {
  position:absolute;
  z-index:-1;
  inset:0 0 0 45%;
  opacity:.08;
  mask-image:linear-gradient(90deg,transparent,#000 40%,transparent);
  pointer-events:none;
}
.gp-profile-atmosphere > img,.gp-profile-atmosphere > .gp-placeholder-icon {
  width:100%;
  height:100%;
  object-fit:cover;
  font-size:240px;
}
.gp-character-guide .gp-profile-identity {
  grid-template-columns:136px minmax(0,1fr);
  max-width:850px;
}
.gp-placeholder-icon {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--gp-surface),var(--gp-dark));
  color:var(--gp-accent);
  font-size:26px;
  font-weight:500;
}
.gp-profile-portrait .gp-placeholder-icon {
  font-size:64px;
}
.gp-profile-facts dt {
  color:var(--gp-muted);
  font-size:12px;
  margin-bottom:5px;
}
.gp-profile-facts dd {
  margin:0;
}
.gp-build-demo {
  color:var(--gp-muted);
  font-size:14px;
  padding-left:14px;
  border-left:2px solid var(--gp-accent);
  max-width:780px;
}
.gp-jump {
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:10;
  background:var(--gp-dark);
  border:1px solid var(--gp-line);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  margin:20px 0 8px;
  min-width:0;
  padding:5px 8px;
}
.admin-bar .gp-jump {
  top:32px;
}
.gp-jump > span {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding-inline:4px;
  color:var(--gp-muted);
  white-space:nowrap;
}
.gp-jump > div {
  display:flex;
  overflow-x:auto;
  gap:3px;
  min-width:0;
  padding:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--gp-control-border) var(--gp-bg);
}
.gp-jump a {
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  white-space:nowrap;
  color:var(--gp-muted);
  font-weight:600;
  text-decoration:none;
  padding:8px 11px;
  border-radius:5px;
  border-bottom:2px solid transparent;
}
.gp-jump a:hover,.gp-jump a:focus-visible,.gp-jump a[aria-current="location"] {
  color:var(--gp-accent);
  background:rgba(123,197,237,.09);
}
.gp-jump a[aria-current="location"] { border-bottom-color:var(--gp-accent); }
@media (max-width:359px) {
  .gp-profile-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gp-profile-facts > div { padding:10px; }
  .gp-jump > span { display:none; }
}
.gp-build-section {
  padding:30px 0;
  border-bottom:1px solid var(--gp-line);
  scroll-margin-top:100px;
  outline-offset:6px;
  overflow-wrap:anywhere;
}
.admin-bar .gp-build-section {
  scroll-margin-top:140px;
}
.gp-build-section h2 {
  margin-bottom:18px;
}
.gp-build-section > :last-child {
  margin-bottom:0;
}
/* Compact continuous guides and inspectable Implements. */
.gp-character-guide .gp-build-section { padding:20px 0; }
.gp-character-guide .gp-build-section h2 { margin:0 0 12px; }
.gp-rotation-scroll { overflow-x:auto; padding:2px 3px 8px; }
.gp-rotation-row { display:flex; gap:20px; min-width:760px; }
.gp-rotation-step { flex:1 0 0; text-align:center; }
.gp-priority-row { min-width:640px; max-width:760px; margin-inline:auto; }
.gp-priority-row .gp-rotation-step:not(:last-child)::after { content:'>'; }
.gp-priority-note { max-width:880px; margin:12px auto 0; text-align:center; }
.gp-rotation-step:not(:last-child)::after { content:'→'; position:absolute; top:28px; right:-16px; color:var(--gp-accent, #78c9ec); }
.gp-rotation-row .gp-rotation-step > summary { padding:0; border:0; background:none; }
.gp-rotation-icon { width:60px; height:60px; margin:0 auto; padding:5px; overflow:hidden; border:1px solid var(--gp-line); border-radius:6px; background:#25282e; }
.gp-rotation-icon .gp-article-image { margin:0; width:100%; height:100%; }
.gp-rotation-icon .gp-article-image img { width:100%; height:100%; object-fit:contain; }
.gp-gift-row .gp-article-image { width:88px; height:88px; margin:0; overflow:hidden; border:1px solid rgba(181,200,218,.28); border-radius:6px; background:rgba(22,25,31,.14); }
.gp-gift-row .gp-article-image img { width:100%; height:100%; object-fit:contain; }
.gp-rotation-step > summary:hover .gp-rotation-icon,.gp-rotation-step[open] .gp-rotation-icon { border-color:var(--gp-accent, #78c9ec); }
.gp-rotation-label { display:block; margin-top:6px; font-size:14px; font-weight:600; white-space:nowrap; }
.gp-rotation-row summary:focus-visible { outline:2px solid var(--gp-accent, #78c9ec); outline-offset:2px; }
.gp-rotation-row .gp-gear-tooltip { position:fixed; top:12px; left:12px; width:360px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; text-align:left; z-index:100; }
.gp-rotation-row .gp-gear-tooltip p { margin:0 0 10px; font-size:14px; line-height:1.5; }
.gp-rotation-row .gp-gear-tooltip p:last-child { margin-bottom:0; }
.gp-gear-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
.gp-gear-grid > * { min-width:0; }
.gp-gear-grid .gp-gear-heading { min-height:56px; }
.gp-gear-kind { display:inline-block; margin-bottom:7px; padding:3px 8px; border:1px solid #78c9ec55; border-radius:4px; color:var(--gp-accent, #78c9ec); font-size:12px; line-height:1.4; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.gp-gear-grid > .gp-gear-set > .gp-gear-effect { margin:0; padding:0 18px 18px; }
.gp-gear-epiphany .gp-gear-pieces { grid-template-columns:minmax(0, 112px); }
.gp-epiphany-heading-icon { flex:0 0 35px; width:35px; height:40px; }
.gp-epiphany-heading-icon .gp-article-image { margin:0; }
.gp-epiphany-heading-icon .gp-article-image img { width:35px; height:40px; object-fit:contain; border-radius:0; }
.gp-character-guide .gp-material-section { padding:12px 0; }
.gp-material-panels { display:grid; grid-template-columns:minmax(0, 1fr) 100px minmax(0, 1fr); gap:12px; }
.gp-level-materials { grid-column:1; min-width:0; }
.gp-skill-materials { grid-column:3; min-width:0; }
.gp-total-materials { grid-column:2; align-self:center; min-width:0; }
.gp-level-materials h3,.gp-skill-materials h3 { margin:0 0 6px; font-size:18px; }
.gp-material-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
.gp-material-grid-pair { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.gp-total-materials .gp-material-grid { grid-template-columns:minmax(0, 1fr); }
.gp-material-family { margin-top:8px; padding-top:8px; border-top:1px solid var(--gp-line); }
.gp-material-family h4 { margin:0 0 4px; font-size:13px; color:var(--gp-muted); font-weight:600; }
.gp-material-family .gp-material-name { min-height:18px; }
.gp-material-tile { min-width:0; text-align:center; }
.gp-material-name { display:flex; justify-content:center; align-items:end; min-height:34px; margin-bottom:4px; font-size:12px; line-height:1.4; font-weight:600; }
.gp-material-tile .gp-gear-piece { width:60px; margin:auto; text-align:left; }
.gp-material-tile .gp-gear-piece > summary { padding:4px; }
.gp-material-quantity { display:block; margin-top:3px; font-size:14px; font-weight:700; }
.gp-material-grid .gp-gear-tooltip p { margin:0 0 10px; font-size:14px; line-height:1.45; }
.gp-material-grid .gp-gear-tooltip p:last-child { margin-bottom:0; }
.gp-material-grid .gp-gear-tooltip p strong { display:inline; margin:0; font-size:inherit; }
.gp-material-grid summary:focus-visible { outline:2px solid var(--gp-accent, #78c9ec); outline-offset:3px; }
@media (max-width:899px) {
  .gp-gear-grid { grid-template-columns:minmax(0, 1fr); }
  .gp-material-panels { grid-template-columns:minmax(0, 1fr); }
  .gp-level-materials,.gp-total-materials,.gp-skill-materials { grid-column:1; }
  .gp-total-materials { padding:6px 0; border-block:1px solid var(--gp-line); }
  .gp-total-materials .gp-material-name { min-height:0; }
}
.gp-gear-set { border:1px solid var(--gp-line); border-radius:8px; background:var(--gp-surface, #25282e); }
.gp-gear-set > summary { padding:18px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
.gp-gear-set > summary::-webkit-details-marker,
.gp-gear-piece > summary::-webkit-details-marker { display:none; }
.gp-gear-heading { display:flex; align-items:center; gap:14px; }
.gp-gear-heading::after { content:'+'; margin-left:auto; color:var(--gp-accent, #78c9ec); font-size:24px; }
.gp-gear-set[open] > summary .gp-gear-heading::after { content:'−'; }
.gp-gear-heading strong { display:block; font-size:21px; line-height:1.3; }
.gp-gear-heading small { display:block; color:var(--gp-muted); font-size:14px; }
.gp-gear-effect { margin:12px 0 0; font-size:16px; line-height:1.65; }
/* Clip to the supplied in-game symbol while preserving its source image. */
.gp-gear-set-symbol { width:35px; height:22px; flex:0 0 35px; overflow:hidden; }
.gp-gear-set-symbol .gp-article-image { margin:0; }
.gp-gear-set-symbol .gp-article-image img { width:636px; max-width:none; height:266px; border-radius:0; transform:translate(-8px, -18px); }
.gp-gear-pieces { display:grid; grid-template-columns:repeat(4, minmax(0, 112px)); gap:12px; padding:0 18px 18px; }
.gp-gear-piece { position:relative; min-width:0; }
.gp-gear-piece > summary { list-style:none; cursor:pointer; border:1px solid #65543a; border-radius:6px; background:linear-gradient(145deg, #493719, #292622); padding:5px; -webkit-tap-highlight-color:transparent; }
.gp-gear-piece > summary:hover,
.gp-gear-piece[open] > summary { border-color:var(--gp-accent, #78c9ec); }
.gp-gear-piece .gp-article-image { margin:0; position:relative; aspect-ratio:1; overflow:hidden; }
.gp-gear-piece .gp-article-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.gp-gear-set summary:focus-visible { outline:2px solid var(--gp-accent, #78c9ec); outline-offset:3px; }
.gp-gear-tooltip { position:absolute; left:0; top:calc(100% + 6px); z-index:15; width:280px; max-width:calc(100vw - 48px); padding:14px; border:1px solid var(--gp-line); border-radius:6px; background:#202329; color:var(--gp-text); box-shadow:0 8px 24px #0008; font-size:14px; line-height:1.45; }
.gp-gear-tooltip::before { content:''; position:absolute; height:7px; bottom:100%; left:0; width:100%; }
.gp-gear-tooltip small { display:block; color:var(--gp-muted); font-size:12px; }
.gp-gear-tooltip strong { display:block; margin:3px 0 12px; font-size:16px; }
.gp-gear-tooltip dl { margin:0; }
.gp-gear-tooltip dl > div { display:flex; justify-content:space-between; gap:16px; padding:4px 0; }
.gp-gear-tooltip dt { color:var(--gp-muted); }
.gp-gear-tooltip dd { margin:0; white-space:nowrap; font-weight:600; }
@media (max-width:599px) {
  .gp-gear-pieces { grid-template-columns:repeat(2, minmax(0, 112px)); }
  .gp-gear-piece:nth-child(even) .gp-gear-tooltip { left:calc(-100% - 12px); right:auto; }
}
/* Compact, always-visible recommendations; item stats remain accessible disclosures. */
.gp-material-panels-compact { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.gp-material-panels-compact .gp-skill-materials { grid-column:2; }
.gp-material-row { position:relative; grid-template-columns:repeat(7, minmax(76px, 1fr)); gap:2px; overflow-x:auto; padding-bottom:4px; }
.gp-material-row .gp-material-tile { grid-row:1; }
.gp-material-row .gp-material-name { min-height:48px; font-size:11px; line-height:1.35; }
.gp-material-family-label { position:absolute; top:0; grid-column:4 / span 4; grid-row:1; width:100%; padding-bottom:3px; border-bottom:1px solid var(--gp-line); text-align:center; color:var(--gp-muted); font-size:12px; line-height:1.4; }
.gp-material-row .gp-material-quantity { font-size:13px; }
.gp-material-row .gp-gear-tooltip { position:fixed; top:12px; left:12px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; z-index:100; }
.gp-gear-grid-open { align-items:stretch; }
.gp-gear-open { display:flex; flex-direction:column; padding:14px; gap:12px; }
.gp-gear-open .gp-gear-panel-header { padding:0; }
.gp-gear-open .gp-gear-heading { min-height:40px; gap:10px; }
.gp-gear-open .gp-gear-heading::after { content:none; }
.gp-gear-open .gp-gear-kind { margin-bottom:5px; }
.gp-gear-grid > .gp-gear-open > .gp-gear-effect { padding:0; font-size:15px; line-height:1.5; }
.gp-gear-open .gp-gear-pieces { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:0; margin-top:auto; align-items:stretch; }
.gp-gear-open .gp-gear-pieces > .gp-gear-piece > summary { height:100%; }
.gp-gear-item-name { display:block; margin-top:4px; font-size:11px; line-height:1.3; font-weight:600; text-align:center; }
.gp-gear-open .gp-gear-pieces > .gp-gear-piece:nth-child(4) .gp-gear-tooltip { left:auto; right:0; }
.gp-epiphany-contents { display:grid; grid-template-columns:112px minmax(0, 1fr); align-items:center; gap:16px; margin-top:auto; }
.gp-epiphany-contents .gp-gear-pieces { grid-template-columns:minmax(0, 1fr); margin:0; }
.gp-epiphany-stats small { font-size:12px; color:var(--gp-muted); }
.gp-epiphany-stats dl { margin:4px 0 0; font-size:14px; }
.gp-epiphany-stats dl > div { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
.gp-epiphany-stats dt { color:var(--gp-muted); }
.gp-epiphany-stats dd { margin:0; font-weight:600; }
@media (max-width:1099px) {
  .gp-material-panels-compact { grid-template-columns:minmax(0, 1fr); gap:16px; }
  .gp-material-panels-compact .gp-skill-materials { grid-column:1; }
}
@media (max-width:599px) {
  .gp-gear-open .gp-gear-pieces { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gp-gear-open .gp-gear-pieces > .gp-gear-piece .gp-gear-tooltip { left:0; right:auto; }
  .gp-gear-open .gp-gear-pieces > .gp-gear-piece:nth-child(even) .gp-gear-tooltip { left:auto; right:0; }
  .gp-epiphany-contents { grid-template-columns:90px minmax(0, 1fr); gap:10px; }
  .gp-epiphany-contents .gp-gear-pieces { grid-template-columns:minmax(0, 1fr); }
}
.gp-group-label,.gp-slot-role {
  font-size:14px;
  color:var(--gp-muted);
  font-weight:500;
  letter-spacing:0;
}
.gp-materials {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  list-style:none;
  padding:0;
  margin:0 0 24px;
  gap:16px 24px;
}
.gp-materials li {
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}
.gp-materials strong {
  display:block;
  font-size:14px;
  line-height:1.4;
}
.gp-quantity {
  color:var(--gp-muted);
  font-size:14px;
}
.gp-item-icon {
  display:block;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:6px;
  overflow:hidden;
}
.gp-item-icon img,.gp-team-portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.gp-sequence {
  display:flex;
  gap:10px 12px;
  flex-wrap:wrap;
  padding:0;
  margin:0 0 16px;
  list-style:none;
}
.gp-sequence li {
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
  max-width:100%;
}
.gp-sequence li:not(:last-child)::after {
  content:"\2192";
  color:var(--gp-accent);
  flex-shrink:0;
}
.gp-sequence li > span {
  border-bottom:1px solid var(--gp-line);
  padding-bottom:5px;
}
.gp-team {
  margin:24px 0;
}
.gp-team h3 {
  margin-bottom:8px;
}
.gp-team-slots {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:20px;
  max-width:760px;
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.gp-team-slots li {
  min-width:0;
}
.gp-slot-role {
  display:block;
  margin-bottom:8px;
}
.gp-team-member {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  line-height:1.4;
}
.gp-team-portrait {
  display:block;
  width:56px;
  height:68px;
  flex:0 0 56px;
  overflow:hidden;
  border-radius:5px;
}
.gp-equipment {
  list-style:none;
  padding:0;
  margin:0 0 24px;
  counter-reset:equipment;
  max-width:850px;
}
.gp-equipment li {
  counter-increment:equipment;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:14px 0;
}
.gp-ranked li::before {
  content:counter(equipment,decimal-leading-zero);
  color:var(--gp-accent);
  font-size:18px;
  min-width:26px;
}
.gp-equipment h3 {
  font-size:18px;
  margin:0 0 6px;
}
.gp-equipment p {
  color:var(--gp-muted);
  margin:0;
  font-size:16px;
}
.gp-equipment .gp-equipment-level {
  font-size:14px;
  margin-bottom:6px;
}
.gp-main-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px 24px;
  margin:16px 0 26px;
}
.gp-main-stats dt {
  font-size:14px;
  color:var(--gp-muted);
}
.gp-main-stats dd {
  margin:4px 0 0;
}
.gp-maximize {
  color:var(--gp-accent);
}
.gp-spoiler-notice {
  border-left:2px solid var(--gp-accent);
  padding-left:14px;
  color:var(--gp-muted);
}
.gp-build-section .gp-prose,.gp-build-media {
  max-width:780px;
}
.gp-build-media {
  margin:24px 0;
}
.gp-build-media img {
  border-radius:6px;
}
.gp-build-media figcaption {
  color:var(--gp-muted);
  font-size:14px;
}
.gp-build-video {
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  border:0;
}
@media(max-width:782px) {
  .admin-bar .gp-jump { top:46px; }
}
@media(max-width:699px) {
  .gp-character-guide .gp-profile-identity {
    grid-template-columns:90px minmax(0,1fr);
    gap:16px;
  }
  .gp-build-section {
    padding:26px 0;
  }
  .gp-jump {
    gap:10px;
  }
  .gp-materials {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px;
  }
  .gp-materials li {
    align-items:flex-start;
    gap:8px;
  }
  .gp-materials .gp-item-icon {
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .gp-team-slots {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 12px;
  }
  .gp-team-many {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .gp-team-member {
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .gp-equipment li {
    gap:10px;
  }
  .gp-equipment p {
    font-size:14px;
  }
  .gp-equipment .gp-item-icon {
    width:40px;
    height:40px;
    flex-basis:40px;
  }
}
@media(max-width:600px) {
  .admin-bar .gp-jump { top:0; }
}
@media(max-width:359px) {
  .gp-team-slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Shared attribute filters and portrait badges. */
.gp-filter-field { display:grid; gap:6px; min-width:140px; }
.gp-filter-field label:first-child { min-width:0; }
.gp-filter-picker { position:relative; color:var(--gp-text); min-width:145px; }
.gp-filter-picker summary { display:flex; align-items:center; gap:9px; list-style:none; cursor:pointer; padding:8px 12px; height:44px; border:1px solid var(--gp-line); border-radius:6px; background:var(--gp-dark); font-size:14px; }
.gp-filter-picker summary::-webkit-details-marker { display:none; }
.gp-filter-picker summary::before { content:""; flex:none; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid var(--gp-accent); }
.gp-filter-picker[open] summary::before { transform:rotate(90deg); }
[data-picker-current] { display:inline-flex; gap:8px; align-items:center; min-width:0; }
[data-picker-current]>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-attribute-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; }
.gp-attribute-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.gp-attribute-icon--combat-style img { filter:brightness(0) invert(1); }
.gp-attribute-icon--identity { background:linear-gradient(135deg,#fff3bf,#d4b85d); border-radius:2px; padding:2px; box-shadow:0 1px 4px #0006; }
.gp-attribute-icon--identity img { filter:brightness(0); }
.gp-filter-options { position:absolute; top:calc(100% + 6px); left:0; z-index:25; width:max-content; min-width:100%; max-width:min(310px,85vw); max-height:340px; overflow:auto; padding:6px; border:1px solid var(--gp-line); border-radius:6px; background:var(--gp-dark); box-shadow:0 12px 32px #0008; }
.gp-filter-options button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 12px; color:var(--gp-text); border:0; background:transparent; text-align:left; }
.gp-filter-options button:hover,.gp-filter-options button[aria-pressed="true"] { background:#ffffff12; color:var(--gp-accent); }
.gp-filter-picker :focus-visible,.gp-filters input:focus-visible,.gp-filters>button:focus-visible { outline:2px solid var(--gp-accent); outline-offset:2px; }
.gp-filters input,.gp-filters select,.gp-filters>button { background:var(--gp-dark); border:1px solid var(--gp-line); border-radius:6px; height:44px; color:var(--gp-text); }
.gp-filters>button:hover,.gp-filters>button:focus-visible { background:var(--gp-accent); color:var(--gp-dark); border-color:var(--gp-accent); }
.gp-filter-picker[hidden] { display:none; }
.gp-character-card { --gp-badge-size:26.4px; }
.gp-card-badge { position:absolute; width:var(--gp-badge-size); height:var(--gp-badge-size); filter:drop-shadow(0 2px 3px #0008); }
.gp-card-badge .gp-attribute-icon { width:100%; height:100%; }
.gp-card-badge--reactor,.gp-card-badge--combat-style { background:#181c24f2; border-radius:5px; box-shadow:0 0 0 1px #ffffff29,0 2px 4px #0008; }
.gp-card-badge--reactor { left:8px; top:calc(12px + var(--gp-badge-size)); }
.gp-card-badge--combat-style { left:8px; top:8px; }
.gp-card-badge--identity { right:6px; bottom:6px; display:flex; align-items:center; justify-content:center; }
/* Normalize the solid identity tile to the visible glyph area of the transparent symbols. */
.gp-card-badge--identity .gp-attribute-icon { width:80%; height:80%; }
.gp-card-reactor-text { position:absolute; right:8px; bottom:8px; }
.gp-character-card:has(.gp-card-badge--identity) strong { padding-right:40px; }

/* One set of role headings, compact rows and distinct tier markers. */
.gp-tier-intro { text-align:center; margin:28px auto 0; max-width:900px; }
.gp-tier-intro h2 { font-size:clamp(26px,3vw,36px); margin:0 0 12px; }
.gp-tier-intro h2 span { color:var(--gp-accent); }
.gp-tier-intro p { color:var(--gp-muted); line-height:1.65; margin:0; }
.gp-tier-test-note { margin:10px 0 24px; text-align:center; font-size:12px; color:var(--gp-muted); }
.gp-tier-scroll { overflow-x:auto; padding-bottom:6px; }
.gp-tier-scroll-hint { display:none; }
.gp-tier-scroll:focus-visible { outline:2px solid var(--gp-accent); outline-offset:2px; }
.gp-tier-list { min-width:620px; }
.gp-tier-head,.gp-tier-row { display:grid; grid-template-columns:64px repeat(3,minmax(0,1fr)); gap:0; }
.gp-tier-head { align-items:stretch; padding:0; margin-bottom:6px; border-left:4px solid transparent; border-right:1px solid transparent; }
.gp-tier-corner { font-size:11px; text-align:center; color:var(--gp-muted); text-transform:uppercase; letter-spacing:.1em; }
.gp-tier-head h3 { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:10px 8px; font-size:clamp(20px,2vw,28px); line-height:1.2; background:var(--gp-dark); border-right:1px solid var(--gp-line); }
#gp-tier-role-dps { color:#ee8195; }
#gp-tier-role-sub-dps { color:#be9dea; background:#34353f; }
#gp-tier-role-support { color:#8bcbbb; border-right:0; }
.gp-role-emblem { display:block; flex:none; width:1em; height:1em; overflow:visible; }
.gp-tier-row { --gp-tier-color:#e9c56d; padding:0; margin:0 0 6px; border:1px solid var(--gp-line); border-left:4px solid var(--gp-tier-color); border-radius:2px; background:#25282e99; }
.gp-tier-row[data-tier="S"] { --gp-tier-color:#ed9aaf; }
.gp-tier-row[data-tier="A"] { --gp-tier-color:#be9dea; }
.gp-tier-row[data-tier="B"] { --gp-tier-color:#80ccec; }
.gp-tier-row[data-tier="C"] { --gp-tier-color:#8bcbbb; }
.gp-tier-row[data-tier="F"] { --gp-tier-color:#b8bec8; }
.gp-tier-row>h2 { grid-row:auto; display:flex; align-items:center; justify-content:center; align-self:stretch; margin:0; padding:8px 0; min-height:64px; font-size:34px; font-weight:800; color:var(--gp-tier-color); border-right:1px solid var(--gp-line); }
.gp-tier-role { grid-column:auto; min-width:0; padding:10px; border-right:1px solid var(--gp-line); }
.gp-tier-role:last-child { border-right:0; }
.gp-tier-role[aria-labelledby="gp-tier-role-sub-dps"] { background:#ffffff04; }
.gp-tier-directory .gp-filters { margin-bottom:10px; }
.gp-tier-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); gap:8px; }
.gp-tier-cards .gp-character-card { --gp-badge-size:22.88px; max-width:140px; width:100%; }
.gp-tier-cards .gp-character-card strong { font-size:12px; padding-left:8px; }
.gp-tier-cards .gp-character-card:has(.gp-card-badge--identity) strong { padding-right:32px; }
.gp-tier-cards .gp-card-badge--reactor,.gp-tier-cards .gp-card-badge--combat-style { left:5px; }
.gp-tier-cards .gp-character-card[hidden] { display:none; }
@media(max-width:600px) {
  .gp-filter-field { flex:1; min-width:135px; }
  .gp-filter-picker { min-width:0; }
  .gp-filter-options { max-width:180px; }
  .gp-tier-head,.gp-tier-row { grid-template-columns:48px repeat(3,minmax(0,1fr)); gap:0; }
  .gp-tier-head h3 { font-size:20px; gap:8px; }
  .gp-tier-role { padding:8px; }
  .gp-tier-row>h2 { font-size:28px; }
  .gp-tier-scroll-hint { display:block; color:var(--gp-muted); font-size:12px; margin:0 0 6px; }
  .gp-tier-row>h2,.gp-tier-corner { position:sticky; left:0; z-index:2; background:var(--gp-dark); }
  .gp-tier-cards { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
}