/* GENERATED FILE - DO NOT EDIT. Source: assets/css/src; Build: php tools/build_css.php */
@layer reset, tokens, base, layout, components, screens, states, theme, overrides;

/* SOURCE: 00-tokens/tokens.css */
/* =========================================================
   TOKENS: Semantic design tokens
   Scope: Global
   Theme API: semantic custom properties
   ========================================================= */

@layer tokens {
:root,
[data-theme="default"] {
  color-scheme: light;

  --surface-page: #f7fbff;
  --surface-page-accent: #f7d9ea;
  --surface-panel: rgba(255, 255, 255, 0.78);
  --surface-panel-strong: rgba(255, 255, 255, 0.9);
  --surface-control: rgba(255, 255, 255, 0.72);
  --surface-card-muted: rgba(255, 255, 255, 0.66);
  --surface-card: #ffffff;
  --surface-subtle: #eef5ff;
  --surface-inverse: #1d2c45;

  --text-primary: #1d2c45;
  --text-secondary: #5a6884;
  --text-muted: #73809a;
  --text-inverse: #ffffff;

  --surface-glow-warm: rgba(255, 246, 215, 0.8);
  --surface-glow-pink: rgba(247, 178, 206, 0.72);
  --theme-page-image: none;
  --theme-page-size: auto;

  --accent-primary: #5c87ff;
  --accent-secondary: #f7b2ce;
  --accent-soft: #7bdcff;
  --status-danger: #b84b63;
  --status-warning: #a26c14;
  --status-success: #2f7c53;

  --border-card: rgba(111, 149, 213, 0.18);
  --border-panel: rgba(111, 149, 213, 0.24);
  --border-focus: rgba(66, 103, 169, 0.58);

  --radius-sm: 8px;
  --radius-sm-plus: 10px;
  --radius-md: 12px;
  --radius-md-plus: 14px;
  --radius-lg: 18px;
  --radius-card: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 24px 70px rgba(77, 95, 140, 0.17);
  --shadow-panel: 0 24px 70px rgba(77, 95, 140, 0.2);
  --shadow-focus: 0 0 0 3px rgba(66, 103, 169, 0.18);

  --font-body: "Manrope", system-ui, sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --text-2xs: 0.58rem;
  --text-xs: 0.68rem;
  --text-xs-plus: 0.72rem;
  --text-sm: 0.78rem;
  --text-sm-plus: 0.82rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.8rem, 4vw, 3.1rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 22px;
  --space-7: 28px;
  --space-8: 36px;

  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --ease-standard: ease;

  /* Kompatibilitaets-Aliase: werden nach der Markup-Migration entfernt. */
  --bg-top: var(--surface-page-accent);
  --bg-bottom: var(--surface-page);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --card: var(--surface-panel);
  --card-strong: var(--surface-panel-strong);
  --line: var(--border-card);
  --blue: var(--accent-primary);
  --ice: var(--accent-soft);
  --pink: var(--accent-secondary);
  --danger: var(--status-danger);
  --warning: var(--status-warning);
  --success: var(--status-success);
  --shadow: var(--shadow-card);
}
}

/* SOURCE: 10-base/reset.css */
/* =========================================================
   BASE: Reset
   Scope: Global
   ========================================================= */

@layer reset {
*,
*::before,
*::after {
  box-sizing: border-box;
}
}

/* SOURCE: 10-base/document.css */
/* =========================================================
   BASE: Document
   Scope: Global
   ========================================================= */

@layer base {
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--surface-page);
  background-image:
    var(--theme-page-image),
    radial-gradient(circle at top right, var(--surface-glow-warm), transparent 28%),
    radial-gradient(circle at top left, var(--surface-glow-pink), transparent 30%),
    linear-gradient(180deg, var(--surface-page-accent) 0%, var(--surface-page) 78%);
  background-size: var(--theme-page-size), auto, auto, auto;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3-5);
  margin-top: 26px;
  padding: 18px 2px 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer-links a {
  text-decoration: none;
}

.prose {
  display: grid;
  gap: var(--space-4);
}

.prose p,
.prose li {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.prose ul {
  margin: 0;
  padding-left: 18px;
}
}

/* SOURCE: 20-layout/shell.css */
/* =========================================================
   LAYOUT: Application shell
   Scope: Global
   Hook: .l-site-shell / legacy .site-shell
   ========================================================= */

@layer layout {
:where(.l-site-shell, .site-shell) {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 48px;
}

:where(.c-site-header, .site-topbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

:where(.c-brand, .brand) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3-5);
  text-decoration: none;
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at center, #ffffff 0 16%, transparent 17%),
    radial-gradient(circle at center, rgba(123, 220, 255, 0.95) 0 32%, rgba(93, 134, 255, 0.85) 33%, rgba(247, 178, 206, 0.85) 75%, rgba(255,255,255,0.8) 100%);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.5), 0 10px 24px rgba(102, 130, 187, 0.22);
}

.brand-copy strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.98rem;
}

.brand-copy span {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.site-nav a,
.link-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  background: var(--surface-control);
  border: 1px solid var(--border-card);
  box-shadow: 0 10px 24px rgba(95, 119, 168, 0.1);
}

.site-nav .nav-cta {
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-soft) 100%);
}
}

/* SOURCE: 30-components/primitives.css */
/* =========================================================
   COMPONENTS: Shared UI primitives
   Scope: Global
   Hooks: .c-card, .c-button, .c-badge, .c-dialog, .c-progress
   ========================================================= */

@layer components {
.inline-form {
  margin: 0;
}

.link-button {
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}

.page-intro {
  margin-bottom: 18px;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.76);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm-plus);
  font-weight: 800;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 0.98;
}

h1 {
  font-size: clamp(2.6rem, 5vw, 4.5rem);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.45rem;
}

.page-lead,
.panel p,
.meta-list dd,
.support-list li,
.field-help,
.status-list li,
.flash,
.error-list li {
  color: var(--muted);
  line-height: 1.65;
}

.flash-stack {
  display: grid;
  gap: var(--space-3);
  margin-bottom: 18px;
}

.flash {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--card-strong);
  border: 1px solid var(--line);
}

.flash-success {
  border-color: rgba(47, 124, 83, 0.26);
  color: var(--success);
}

.flash-error {
  border-color: rgba(184, 75, 99, 0.26);
  color: var(--danger);
}

.flash-info {
  border-color: rgba(92, 135, 255, 0.22);
  color: var(--ink);
}

.dashboard-grid,
.maintenance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.86fr);
  gap: var(--space-6);
}

:where(.c-card, .panel) {
  padding: 26px;
  border-radius: 30px;
  background: var(--surface-panel);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

.panel-strong {
  background: rgba(20, 34, 65, 0.72);
  color: #f3f7ff;
}

.panel-strong p,
.panel-strong li,
.panel-strong .field-help {
  color: rgba(243, 247, 255, 0.84);
}

.panel-hero {
  overflow: hidden;
  padding: 18px;
}

.panel-hero img {
  border-radius: 24px;
  min-height: 540px;
  object-fit: cover;
  box-shadow: 0 22px 46px rgba(54, 73, 120, 0.18);
}

.hero-caption {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: rgba(17, 30, 59, 0.7);
  color: #f3f7ff;
}

.hero-caption strong {
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: 16px;
}

.field label,
.checkbox-row strong {
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(111, 149, 213, 0.24);
  background: rgba(255,255,255,0.86);
  color: var(--ink);
  font: inherit;
}

.checkbox-grid {
  display: grid;
  gap: var(--space-3-5);
  margin: 18px 0 12px;
}

.checkbox-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(111, 149, 213, 0.16);
}

.checkbox-row input {
  margin-top: 2px;
}

.checkbox-row span {
  display: block;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 18px;
}

:where(.c-button, .button, .button-ghost) {
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

:where(.c-button--primary, .button) {
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-soft) 100%);
  box-shadow: 0 16px 30px rgba(103, 148, 255, 0.24);
}

.button-small {
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-soft) 100%);
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

:where(.c-button--ghost, .button-ghost) {
  color: var(--text-primary);
  background: var(--surface-control);
  border-color: var(--border-card);
}

.button-ghost.button-small {
  color: var(--ink);
  background: rgba(255,255,255,0.72);
}

.text-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}

.error-list {
  margin: 0 0 18px;
  padding: 14px 18px 14px 38px;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(184, 75, 99, 0.24);
}

.error-list li {
  color: var(--danger);
}

.support-list,
.status-list {
  margin: 14px 0 0;
  padding-left: 18px;
}

.support-list li,
.status-list li {
  margin-bottom: 8px;
}

.meta-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: 18px;
}

:where(.c-card--compact, .meta-card, .status-card) {
  padding: 18px;
  border-radius: var(--radius-card);
  background: var(--surface-card-muted);
  border: 1px solid var(--border-card);
}

.meta-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.meta-list div {
  display: grid;
  gap: var(--space-1);
}

.meta-list dt {
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.meta-list dd {
  margin: 0;
}

:where(.c-badge, .badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 800;
}

.badge-success {
  background: rgba(47, 124, 83, 0.12);
  color: var(--success);
}

.badge-danger {
  background: rgba(184, 75, 99, 0.12);
  color: var(--danger);
}

.badge-warn {
  background: rgba(162, 108, 20, 0.14);
  color: var(--warning);
}

.badge-neutral {
  background: rgba(111, 149, 213, 0.14);
  color: var(--ink);
}

:where(.c-table, .table) {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

:where(.c-table, .table) th,
:where(.c-table, .table) td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(111, 149, 213, 0.12);
  font-size: 0.94rem;
}

:where(.c-table, .table) th {
  color: var(--muted);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table-note {
  color: var(--muted);
  font-size: 0.88rem;
}
}

/* SOURCE: 30-components/music.css */
/* =========================================================
   COMPONENT: Music player
   Scope: Global
   Legacy hook: game music classes
   ========================================================= */

@layer components {
.game-music-player {
  --music-ink: #f8f2df;
  --music-safe-bottom: 12px;
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(var(--music-safe-bottom), env(safe-area-inset-bottom));
  z-index: 1300;
  font-family: Manrope, sans-serif;
}

.game-music-orb {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(241, 218, 143, .48);
  border-radius: 50%;
  color: var(--music-ink);
  background: rgba(20, 24, 37, .72);
  box-shadow: 0 7px 24px rgba(0, 0, 0, .26);
  opacity: .38;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.game-music-orb:hover,
.game-music-orb:focus-visible,
.game-music-orb[aria-expanded="true"] {
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(24, 29, 45, .96);
}

.game-music-player.is-off .game-music-orb {
  color: #aaa5a0;
}

.game-music-panel {
  position: absolute;
  right: 0;
  bottom: 46px;
  width: min(292px, calc(100vw - 24px));
  padding: 15px;
  border: 1px solid rgba(230, 208, 138, .42);
  border-radius: 16px;
  color: var(--music-ink);
  background: linear-gradient(155deg, rgba(31, 36, 54, .98), rgba(14, 18, 29, .98));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
}

.game-music-panel[hidden] { display: none; }

.game-music-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.game-music-head span { min-width: 0; }
.game-music-head small,
.game-music-head strong { display: block; }
.game-music-head small { color: #c8b982; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.game-music-head strong { margin-top: 3px; overflow: hidden; font-family: "Cormorant Garamond", serif; font-size: 1.2rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }

.game-music-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  color: #ddd4bd;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}

.game-music-status {
  min-height: 1.25em;
  margin: 8px 0 12px;
  color: #aaaec0;
  font-size: .76rem;
}

.game-music-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.game-music-actions button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  color: #f2ead5;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
}

.game-music-actions button:hover,
.game-music-actions button:focus-visible { background: rgba(226, 197, 108, .16); border-color: rgba(226, 197, 108, .45); }
.game-music-actions span { font-size: .67rem; }

.game-music-volume {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2-5);
  margin: 13px 0 9px;
  color: #c7c2b5;
  font-size: var(--text-xs-plus);
}

.game-music-volume input { width: 100%; accent-color: #d7ba63; }
.game-music-panel > a { color: #d9c77d; font-size: var(--text-xs-plus); text-decoration: none; }
.game-music-panel > a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .game-music-player {
    --music-safe-bottom: 8px;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(var(--music-safe-bottom), env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-music-orb { transition: none; }
}
}

/* SOURCE: 30-components/student-images.css */
/* =========================================================
   COMPONENT: Student image
   Scope: Game screens
   Hook: [data-student-image]
   ========================================================= */

@layer components {
[data-student-image] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-student-image] > .game-student-generated-image {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

[data-student-image].has-student-image > .game-student-generated-image {
  opacity: 1;
}

[data-student-image].has-student-image > :not(.game-student-generated-image):not(.game-student-image-loader) {
  opacity: 0;
}

.game-student-image-loader {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 9;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: rgba(255,255,255,.9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

[data-student-image].is-student-image-loading .game-student-image-loader {
  opacity: 1;
  animation: game-student-image-spin .85s linear infinite;
}

[data-student-image].is-student-image-loading:not(.has-student-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.12) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: game-student-image-wait 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes game-student-image-spin { to { transform: rotate(360deg); } }
@keyframes game-student-image-wait { 60%, 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .game-student-image-loader,
  [data-student-image].is-student-image-loading:not(.has-student-image)::after {
    animation: none;
  }
}
}

/* SOURCE: 30-components/tutor.css */
/* =========================================================
   COMPONENT: Guided tutor
   Scope: Game and story
   Hook: [data-game-tutor]
   ========================================================= */

@layer components {
/* Geführter Spieleinstieg: ein sichtbarer Schritt, danach bleibt der Tutor als Anzeige. */
.game-tutor-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: min(310px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-2-5);
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(205, 162, 78, 0.48);
  border-radius: 20px;
  background: rgba(19, 27, 39, 0.96);
  color: #f8edcf;
  box-shadow: 0 20px 48px rgba(13, 18, 31, 0.34);
  backdrop-filter: blur(14px);
}

.game-tutor-panel[hidden],
.game-tutorial-return[hidden] {
  display: none;
}

.game-tutor-panel.is-guiding {
  border-color: rgba(239, 190, 90, 0.84);
  animation: gameTutorGoldGlow 2.8s ease-in-out infinite;
}

.game-tutor-panel.is-passive {
  width: min(270px, calc(100vw - 36px));
  opacity: 0.92;
}

.game-tutor-owl {
  width: 46px;
  height: 46px;
  border: 2px solid rgba(226, 188, 113, 0.72);
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 34% 38%, #fff4d5 0 10%, transparent 11%),
    radial-gradient(circle at 66% 38%, #fff4d5 0 10%, transparent 11%),
    radial-gradient(circle at 50% 56%, #e4ae4e 0 7%, transparent 8%),
    linear-gradient(180deg, #765d3c, #2e251c);
}

.game-lektor-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(226, 188, 113, 0.72);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(229, 181, 83, 0.24), rgba(50, 73, 111, 0.58));
  color: #fff0c8;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
}

.game-lektor-mark--small {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: 1.35rem;
}

.game-tutor-copy,
.game-tutor-copy strong,
.game-tutor-copy p {
  min-width: 0;
  margin: 0;
}

.story-page-body .game-tutor-panel {
  top: 72px;
  right: 18px;
  bottom: auto;
  width: min(290px, calc(100vw - 36px));
}

.game-tutor-panel.is-placement-center,
.story-page-body .game-tutor-panel.is-placement-center {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(330px, calc(100vw - 36px));
  transform: translate(-50%, -50%);
}

.game-tutor-copy {
  display: grid;
  gap: var(--space-1);
}

.game-tutor-step {
  color: #e6b85d;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-tutor-copy strong {
  color: #fff7e5;
  font-size: 0.98rem;
}

.game-tutor-copy p {
  color: #d7dbe5;
  font-size: var(--text-sm);
  line-height: 1.42;
}

.game-tutor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-top: 6px;
}

.game-tutor-action {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: #18243a;
  background: linear-gradient(135deg, #f1c46f, #ffe5a8);
  font-size: 0.7rem;
  font-weight: 900;
  text-decoration: none;
}

.game-tutor-action:hover,
.game-tutor-action:focus-visible {
  background: #fff0c8;
}

.game-tutor-dismiss {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #afbacb;
  font: inherit;
  font-size: 0.7rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.game-tutor-dismiss:hover,
.game-tutor-dismiss:focus-visible {
  color: #fff0c8;
}

@keyframes gameTutorGoldGlow {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(239, 190, 90, 0.1), 0 20px 44px rgba(13, 18, 31, 0.34);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 207, 107, 0.2), 0 24px 52px rgba(116, 78, 20, 0.28);
  }
}

.game-tutorial-return {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  max-width: calc(100vw - 36px);
  padding: 10px 12px;
  border: 1px solid rgba(205, 162, 78, 0.44);
  border-radius: 16px;
  background: rgba(19, 27, 39, 0.96);
  box-shadow: 0 16px 38px rgba(13, 18, 31, 0.3);
  color: #d7dbe5;
}

.game-tutorial-return > div {
  display: grid;
  gap: 2px;
}

.game-tutorial-return span {
  color: #e6b85d;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-tutorial-return button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff7e5;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}

.game-tutorial-return button:hover,
.game-tutorial-return button:focus-visible {
  color: #e6b85d;
}

.is-tutorial-focus {
  position: relative;
  z-index: 121;
  outline: 3px solid rgba(239, 190, 90, 0.96);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(239, 190, 90, 0.14), 0 16px 38px rgba(13, 18, 31, 0.2);
}

.game-home.is-tutorial-guided [data-tutorial-target="first-call"] {
  border-color: rgba(64, 112, 204, 0.48);
  box-shadow: 0 18px 44px rgba(46, 76, 143, 0.16);
}

.character-onboarding.is-guided [data-character-create-panel] {
  border-color: rgba(65, 111, 202, 0.3);
  box-shadow: 0 22px 54px rgba(46, 76, 143, 0.13);
}


/* Ausgeblendeter Lektor: nur das L bleibt, Feldhilfen erscheinen darüber. */
.game-tutorial-return {
  width: 46px;
  height: 46px;
  max-width: calc(100vw - 24px);
  padding: 4px;
  overflow: visible;
  gap: 0;
  border-radius: var(--radius-md-plus);
  transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.game-tutorial-return > .game-lektor-mark--small {
  position: relative;
  z-index: 2;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.game-tutorial-return > div:not(.game-tutorial-return-help) {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 238px;
  min-height: 46px;
  align-content: center;
  padding: 6px 10px 6px 50px;
  border: 1px solid rgba(205, 162, 78, 0.44);
  border-radius: var(--radius-md-plus);
  background: rgba(19, 27, 39, 0.98);
  box-shadow: 0 16px 38px rgba(13, 18, 31, 0.3);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 180ms ease;
}

.game-tutorial-return:hover,
.game-tutorial-return:focus-within {
  width: 238px;
  background: transparent;
  box-shadow: none;
}

.game-tutorial-return:hover > div:not(.game-tutorial-return-help),
.game-tutorial-return:focus-within > div:not(.game-tutorial-return-help) {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.game-tutorial-return-help {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  width: min(330px, calc(100vw - 24px));
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(205, 162, 78, 0.48);
  border-radius: var(--radius-md-plus);
  color: #f8edcf;
  background: rgba(19, 27, 39, 0.98);
  box-shadow: 0 18px 42px rgba(13, 18, 31, 0.34);
  pointer-events: none;
}

.game-tutorial-return-help[hidden] {
  display: none;
}

.game-tutorial-return-help strong,
.game-tutorial-return-help p {
  margin: 0;
}

.game-tutorial-return-help strong {
  color: #fff7e5;
  font-size: var(--text-sm);
}

.game-tutorial-return-help p {
  color: #d7dbe5;
  font-size: .7rem;
  line-height: 1.35;
}

@media (max-width: 820px) {
  .game-tutorial-return {
    position: fixed;
    right: 12px;
    bottom: 12px;
  }
}
}

/* SOURCE: 40-screens/account.css */
/* =========================================================
   SCREEN: Account and dashboard
   Scope: .p-account only
   Root: .p-account
   PHP: account-*.php, dashboard.php
   ========================================================= */

@layer screens {
.p-account .account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin-bottom: 18px;
}

.p-account .account-nav-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(111, 149, 213, 0.18);
  box-shadow: 0 10px 24px rgba(95, 119, 168, 0.08);
  text-decoration: none;
  font-weight: 700;
}

.p-account .account-nav-link.is-active {
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--blue) 0%, var(--ice) 100%);
}

.p-account .account-section {
  margin-top: 6px;
}

.p-account .dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 88% 12%, rgba(126, 202, 255, 0.2), transparent 34%),
    var(--card);
}

.p-account .dashboard-welcome h2,
.p-account .dashboard-welcome p {
  margin-bottom: 0;
}

.p-account .dashboard-kicker {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-account .dashboard-welcome-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

.p-account .dashboard-welcome-actions .button,
.p-account .dashboard-welcome-actions .button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.p-account .dashboard-main-grid {
  margin-top: 22px;
}

.p-account .dashboard-stat-card {
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.p-account .dashboard-stat-card:hover,
.p-account .dashboard-stat-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(92, 135, 255, 0.35);
  box-shadow: 0 14px 30px rgba(77, 105, 161, 0.12);
  outline: none;
}

.p-account .dashboard-quick-links {
  margin-top: 18px;
}

.p-account .table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.p-account .dashboard-current-session {
  display: inline-flex;
  margin: 4px 0 0;
  white-space: nowrap;
}

.p-account .dashboard-overview-title {
  margin-top: 22px;
}

.p-account .account-form-stack {
  display: grid;
  gap: var(--space-3-5);
}

.p-account .account-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.p-account .account-stat-grid .status-card {
  display: grid;
  gap: var(--space-2);
  place-items: start;
}

.p-account .account-stat-grid strong {
  font-size: 2rem;
  font-family: "Cormorant Garamond", serif;
  line-height: 1;
}

.p-account .stack-list {
  display: grid;
  gap: var(--space-3);
}

.p-account .stack-item {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(111, 149, 213, 0.16);
}

.p-account .game-access-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--space-5);
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.72), transparent 34%),
    linear-gradient(135deg, rgba(22, 38, 71, 0.88), rgba(62, 95, 166, 0.78));
  color: #f1f6ff;
  border: 1px solid rgba(171, 207, 255, 0.18);
  box-shadow: 0 26px 52px rgba(40, 54, 98, 0.2);
}

.p-account .game-access-banner .eyebrow,
.p-account .game-access-banner .page-lead {
  color: rgba(241, 246, 255, 0.88);
}

.p-account .game-access-stats {
  display: grid;
  gap: var(--space-3);
}

.p-account .game-access-stats span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3-5);
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.95rem;
}

.p-account .game-access-stats strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  line-height: 1;
}

.p-account .game-nav {
  align-items: center;
}

.p-account .game-nav-meta {
  margin-left: auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: rgba(20, 34, 65, 0.08);
  color: var(--muted);
  font-weight: 700;
}

.p-account .game-card-grid,
.p-account .game-character-grid,
.p-account .game-empathy-grid {
  display: grid;
  gap: var(--space-4);
}

.p-account .game-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-account .game-character-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-account .game-character-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.p-account .game-empathy-grid {
  grid-template-columns: 1fr;
}

.p-account .game-empathy-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3-5);
  align-items: start;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(111, 149, 213, 0.18);
  cursor: pointer;
}

.p-account .game-empathy-card input {
  margin-top: 4px;
}

.p-account .game-empathy-copy {
  display: grid;
  gap: 6px;
}

.p-account .game-empathy-copy strong {
  font-size: var(--text-md);
}

.p-account .game-empathy-copy span,
.p-account .game-empathy-copy small {
  color: var(--muted);
  line-height: 1.6;
}

.p-account .game-empathy-copy small {
  font-size: 0.85rem;
}
}

/* SOURCE: 40-screens/studio.css */
/* =========================================================
   SCREEN: Character Studio
   Scope: .p-studio only
   Root: .p-studio
   PHP: game/studio.php
   ========================================================= */

@layer screens {
.p-studio .studio-character-switch {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  width: min(100%, 1320px);
  margin-inline: auto;
}

.p-studio .studio-character-chip {
  min-width: 148px;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(111, 149, 213, 0.18);
  box-shadow: 0 10px 24px rgba(95, 119, 168, 0.08);
}

.p-studio .studio-character-chip strong {
  font-size: 0.92rem;
  line-height: 1.15;
}

.p-studio .studio-character-chip span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.p-studio .studio-character-chip.is-active {
  color: var(--text-inverse);
  background: linear-gradient(135deg, rgba(35, 57, 105, 0.92), rgba(91, 135, 255, 0.86));
}

.p-studio .studio-character-chip.is-active span {
  color: rgba(255,255,255,0.82);
}

.p-studio .studio-headline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-5);
}

.p-studio .studio-headline h2 {
  margin-bottom: 0;
}

.p-studio .studio-layout-grid {
  grid-template-columns: minmax(420px, 0.85fr) minmax(470px, 1.15fr);
  align-items: start;
  gap: var(--space-3);
  width: min(100%, 1480px);
  margin: 10px auto 0;
}

.p-studio .studio-editor-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2-5);
  height: min(640px, calc(100vh - 235px));
  min-height: 500px;
  padding: 12px;
}

.p-studio .studio-builder-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  height: 100%;
}

.p-studio .studio-builder-scroll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  overflow: auto;
  min-height: 0;
  padding-right: 4px;
  margin-right: -2px;
}

.p-studio .studio-builder-column {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.p-studio .studio-builder-scroll::-webkit-scrollbar {
  width: 10px;
}

.p-studio .studio-builder-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: rgba(92, 135, 255, 0.24);
}

.p-studio .studio-group-card {
  margin: 0;
  border-radius: var(--radius-md-plus);
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(111, 149, 213, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
  min-width: 0;
}

.p-studio .studio-group-card:last-child {
  margin-bottom: 0;
}

.p-studio .studio-group-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px 9px;
  cursor: pointer;
}

.p-studio .studio-group-summary::-webkit-details-marker {
  display: none;
}

.p-studio .studio-group-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.p-studio .studio-group-summary-copy strong {
  font-size: 0.88rem;
  line-height: 1.12;
}

.p-studio .studio-group-summary-copy span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-studio .studio-group-toggle-text {
  flex-shrink: 0;
  width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(111, 149, 213, 0.16);
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: 700;
}

.p-studio .studio-group-body {
  display: grid;
  gap: var(--space-2);
  padding: 0 10px 10px;
}

.p-studio .studio-control-list {
  display: grid;
  gap: 7px;
}

.p-studio .studio-control-row {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  border-radius: var(--radius-sm-plus);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(111, 149, 213, 0.14);
}

.p-studio .studio-control-row--slider {
  grid-template-columns: minmax(78px, 112px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-2-5);
}

.p-studio .studio-control-row--slider .studio-control-head {
  grid-column: 1;
  display: grid;
  gap: 1px;
}

.p-studio .studio-control-row--slider .studio-slider,
.p-studio .studio-control-row--slider .studio-slider-scale {
  grid-column: 2;
}

.p-studio .studio-control-row--choice {
  gap: 7px;
}

.p-studio .studio-control-row--cards,
.p-studio .studio-control-row--chips,
.p-studio .studio-control-row--color,
.p-studio .studio-control-row--multi {
  gap: 9px;
}

.p-studio .studio-control-row--text {
  margin-top: 2px;
}

.p-studio .studio-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.p-studio .studio-control-head label {
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.15;
}

.p-studio .studio-control-current {
  flex-shrink: 0;
  color: rgba(27, 62, 133, 0.88);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.15;
}

.p-studio .studio-slider {
  width: 100%;
  margin: 0;
  accent-color: rgba(27, 62, 133, 0.92);
}

.p-studio .studio-slider-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.2;
}

.p-studio .studio-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p-studio .studio-choice-row--control {
  gap: 7px;
}

.p-studio .studio-choice-row--mini {
  gap: 6px;
}

.p-studio .studio-choice-chip {
  border: 1px solid rgba(111, 149, 213, 0.22);
  background: rgba(255,255,255,0.62);
  color: var(--ink);
  border-radius: var(--radius-sm-plus);
  padding: 5px 8px;
  font: inherit;
  font-size: var(--text-sm-plus);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.p-studio .studio-choice-chip span {
  pointer-events: none;
}

.p-studio .studio-choice-chip--soft {
  background: rgba(255,255,255,0.72);
}

.p-studio .studio-choice-chip--card {
  min-height: 40px;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  border-radius: var(--radius-sm-plus);
  padding: 7px 9px;
  background: rgba(250, 252, 255, 0.88);
}

.p-studio .studio-choice-chip--color {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm-plus);
  padding: 5px 9px 5px 6px;
}

.p-studio .studio-choice-chip--multi {
  background: rgba(248, 251, 255, 0.86);
}

.p-studio .studio-choice-chip:hover,
.p-studio .studio-choice-chip.is-active {
  background: rgba(27, 62, 133, 0.92);
  border-color: rgba(27, 62, 133, 0.92);
  color: var(--text-inverse);
  transform: translateY(-1px);
}

.p-studio .studio-choice-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--swatch, #d7deef);
  border: 1px solid rgba(16, 24, 40, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
  flex-shrink: 0;
}

.p-studio .studio-choice-chip--color .studio-choice-swatch {
  width: 16px;
  height: 16px;
}

.p-studio .studio-subgroup {
  border-radius: var(--radius-md);
  background: rgba(248, 251, 255, 0.9);
  border: 1px dashed rgba(111, 149, 213, 0.24);
}

.p-studio .studio-subgroup summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: var(--text-sm-plus);
  font-weight: 700;
  color: var(--muted);
}

.p-studio .studio-subgroup summary::-webkit-details-marker {
  display: none;
}

.p-studio .studio-detail-stack {
  display: grid;
  gap: var(--space-2);
  padding: 0 10px 10px;
}

.p-studio .studio-detail-section {
  display: grid;
  gap: var(--space-2);
}

.p-studio .studio-detail-section h3 {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Manrope", sans-serif;
}

.p-studio .studio-detail-list {
  padding: 0;
}

.p-studio .studio-text-input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: var(--radius-sm-plus);
  border: 1px solid rgba(111, 149, 213, 0.22);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font: inherit;
}

.p-studio .studio-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

.p-studio .studio-action-row--footer {
  padding-top: 6px;
  border-top: 1px solid rgba(111, 149, 213, 0.12);
}

.p-studio .studio-preview-panel {
  position: sticky;
  top: 10px;
  height: min(640px, calc(100vh - 235px));
  min-height: 500px;
  max-height: none;
  overflow: auto;
  padding: 12px;
}

.p-studio .studio-preview-shell {
  display: grid;
  gap: 7px;
}

.p-studio .studio-preview-controlbar {
  display: grid;
  gap: var(--space-2);
}

.p-studio .studio-style-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.p-studio .studio-style-choice {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 11px;
  border: 1px solid rgba(111, 149, 213, 0.2);
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.p-studio .studio-style-choice strong {
  font-size: var(--text-sm);
}

.p-studio .studio-style-choice span {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.25;
}

.p-studio .studio-style-choice.is-active {
  color: var(--text-inverse);
  border-color: rgba(27, 62, 133, 0.92);
  background: linear-gradient(135deg, rgba(27, 62, 133, 0.96), rgba(72, 112, 197, 0.9));
}

.p-studio .studio-style-choice.is-active span {
  color: rgba(255,255,255,0.8);
}

.p-studio .studio-variant-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
}

.p-studio .studio-variant-switch > span {
  color: var(--muted);
  font-size: var(--text-xs-plus);
  font-weight: 700;
}

.p-studio .studio-preview-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(111, 149, 213, 0.16);
  overflow: hidden;
}

.p-studio .studio-preview-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(78, 129, 231, 0.18), rgba(78, 129, 231, 0.86), rgba(78, 129, 231, 0.18));
}

.p-studio .studio-preview-progress[data-status="queued"] span,
.p-studio .studio-preview-progress[data-status="processing"] span {
  width: 45%;
  animation: studio-progress-slide 1.2s linear infinite;
}

.p-studio .studio-preview-progress[data-status="done"] span {
  width: 100%;
  animation: none;
}

.p-studio .studio-preview-progress[data-status="failed"] span {
  width: 100%;
  background: rgba(181, 67, 67, 0.82);
  animation: none;
}

.p-studio .studio-preview-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(111, 149, 213, 0.16);
  min-height: 390px;
  height: min(52vh, 520px);
  display: grid;
  place-items: center;
}

.p-studio .studio-preview-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.p-studio .studio-preview-frame > #studioPreviewImage {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.p-studio .studio-preview-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.p-studio .studio-preview-overlay-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm-plus);
  background: rgba(22, 38, 71, 0.82);
  color: #f4f7ff;
  font-size: 0.76rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(40, 54, 98, 0.18);
}

.p-studio .studio-preview-overlay[data-status="failed"] .studio-preview-overlay-chip {
  background: rgba(181, 67, 67, 0.9);
}

.p-studio .studio-preview-empty {
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.p-studio .studio-preview-status {
  margin: 0;
  font-size: var(--text-sm);
}

.p-studio .studio-preview-tools {
  display: grid;
  gap: 6px;
}

.p-studio .studio-speaker-crop-panel {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: grid;
  grid-template-columns: 128px;
  justify-items: center;
  gap: 6px;
  width: 148px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: rgba(247,250,255,0.92);
  border: 1px solid rgba(111, 149, 213, 0.16);
  box-shadow: 0 14px 34px rgba(29, 45, 84, 0.2);
  backdrop-filter: blur(10px);
}

.p-studio .studio-speaker-crop-head {
  display: grid;
  justify-items: start;
  gap: 1px;
}

.p-studio .studio-speaker-crop-head strong {
  font-size: var(--text-sm-plus);
  white-space: nowrap;
}

.p-studio .studio-speaker-crop-head span {
  color: var(--muted);
  font-size: 0.65rem;
}

.p-studio .studio-speaker-crop-copy {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.p-studio .studio-speaker-crop-frame {
  position: relative;
  width: 128px;
  aspect-ratio: 196 / 268;
  justify-self: start;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(111, 149, 213, 0.24);
  background: rgba(231, 235, 249, 0.86);
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
  --studio-speaker-zoom: 1;
  --studio-speaker-x: 50%;
  --studio-speaker-y: 40%;
}

.p-studio .studio-speaker-crop-frame:focus-visible {
  box-shadow: 0 0 0 3px rgba(75, 116, 196, 0.26);
}

.p-studio .studio-speaker-crop-frame.is-dragging {
  cursor: grabbing;
}

.p-studio .studio-speaker-crop-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--studio-speaker-x) var(--studio-speaker-y);
  transform: scale(var(--studio-speaker-zoom));
  transform-origin: var(--studio-speaker-x) var(--studio-speaker-y);
  pointer-events: none;
}

.p-studio .studio-speaker-crop-help {
  margin: 0;
  color: var(--ink);
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.p-studio .studio-speaker-crop-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
}

.p-studio .studio-speaker-crop-actions .button-small {
  min-height: 30px;
  padding: 4px 8px;
  font-size: var(--text-xs-plus);
}

.p-studio .studio-mini-drawer {
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(111, 149, 213, 0.14);
  padding: 0 10px 10px;
}

.p-studio .studio-mini-drawer summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 0;
  font-weight: 700;
  font-size: 0.86rem;
}

.p-studio .studio-mini-drawer summary::-webkit-details-marker {
  display: none;
}

.p-studio .studio-mini-row {
  display: grid;
  gap: 6px;
}

.p-studio .studio-mini-row--range {
  gap: 6px;
}

.p-studio .studio-mini-range,
.p-studio .studio-mini-range-grid input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: rgba(27, 62, 133, 0.92);
}

.p-studio .studio-mini-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.p-studio .studio-mini-label {
  color: var(--muted);
  font-size: var(--text-xs-plus);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.p-studio .studio-save-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2-5);
  padding-top: 8px;
  border-top: 1px solid rgba(111, 149, 213, 0.14);
}

.p-studio .studio-save-strip span {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.25;
}

.p-studio .studio-save-strip .button-primary {
  flex-shrink: 0;
  min-height: 38px;
  padding: 8px 13px;
}

body.p-studio.game-studio-page .game-nav {
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 48px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.p-studio.game-studio-page .game-nav-link,
body.p-studio.game-studio-page .game-nav-meta {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 11px;
  font-size: 0.8rem;
}

body.p-studio.game-studio-page .studio-character-switch {
  margin-bottom: 0;
}

.p-studio .studio-output-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.p-studio .studio-output-tile {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: var(--radius-sm-plus);
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(111, 149, 213, 0.16);
}

.p-studio .studio-output-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.p-studio .studio-output-tile .inline-form,
.p-studio .studio-output-tile .button-small {
  width: 100%;
}

.p-studio .studio-output-tile .button-small {
  justify-content: center;
}

.p-studio .studio-saved-card {
  display: grid;
  gap: var(--space-2);
}

@keyframes studio-progress-slide {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(320%);
  }
}
}

/* SOURCE: 40-screens/story.css */
/* =========================================================
   SCREEN: Story
   Scope: .p-story only
   Root: .p-story
   PHP: game/story.php
   ========================================================= */

@layer screens {
.p-story .story-page-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(255, 232, 245, 0.94), rgba(255, 232, 245, 0.64) 30%, rgba(246, 239, 255, 0.92) 64%, rgba(239, 247, 255, 0.96)),
    linear-gradient(180deg, #fde7f4 0%, #f3efff 45%, #eef7ff 100%);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
}

.p-story .story-page-shell {
  width: min(100% - 24px, 1120px);
  margin: 0 auto;
  padding: 18px 0 30px;
}

.p-story .story-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 14px;
}

.p-story .story-toolbar-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(123, 144, 202, 0.14);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}

.p-story .story-toolbar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(123, 144, 202, 0.16);
  color: var(--ink);
  font-weight: 700;
}

.p-story .story-alert-stack {
  display: grid;
  gap: var(--space-2-5);
  margin-bottom: 14px;
}

.p-story .story-page-main {
  display: grid;
}

.p-story .story-frame {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 108px);
}

.p-story .story-frame--center {
  min-height: calc(100vh - 180px);
}

.p-story .story-empty-card {
  width: min(100%, 820px);
  display: grid;
  gap: var(--space-4);
  padding: 30px;
  border-radius: 36px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(123, 144, 202, 0.14);
  box-shadow: 0 28px 64px rgba(70, 74, 110, 0.12);
}

.p-story .story-empty-card--wide {
  width: min(100%, 1100px);
}

.p-story .story-empty-card h1,
.p-story .story-empty-card p {
  margin: 0;
}

.p-story .story-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: 10px;
}

.p-story .story-character-card {
  display: grid;
  gap: var(--space-3);
  padding: 20px;
  border-radius: 26px;
  background: rgba(247, 248, 255, 0.88);
  border: 1px solid rgba(123, 144, 202, 0.12);
}

.p-story .story-player-stage {
  width: min(100%, 1080px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 38px;
  overflow: hidden;
  border: 1px solid rgba(118, 146, 205, 0.18);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 32px 84px rgba(72, 75, 118, 0.18);
}

.p-story .story-player-visual {
  position: relative;
  min-height: 650px;
  --story-shift-back-x: 0px;
  --story-shift-back-y: 0px;
  --story-shift-base-x: 0px;
  --story-shift-base-y: 0px;
  --story-shift-middle-x: 0px;
  --story-shift-middle-y: 0px;
  --story-shift-front-x: 0px;
  --story-shift-front-y: 0px;
  --story-user-zoom: 1;
  --story-charisma-rgb: 255, 211, 105;
  --story-charisma-alpha: 0;
  --story-charisma-soft-alpha: 0;
  --story-charisma-edge-alpha: 0;
  --story-base-zoom: 1;
  --story-depth-strength: 0.2;
  --story-depth-middle-opacity: 0.11;
  --story-depth-front-opacity: 0.08;
  --story-emotion-rgb: 255, 255, 255;
  --story-emotion-line-alpha: 0.16;
  --story-emotion-glow-alpha: 0.08;
  --story-emotion-fill-alpha: 0.04;
  --story-emotion-image-alpha: 0.00;
  background:
    linear-gradient(160deg, rgba(253, 234, 244, 0.95), rgba(244, 246, 255, 0.88)),
    radial-gradient(circle at top, rgba(255,255,255,0.84), rgba(240, 243, 255, 0.74));
  isolation: isolate;
  outline: none;
  cursor: pointer;
}

.p-story .story-player-visual:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(92, 126, 198, 0.5);
}

.p-story .story-admin-moment-link {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 8;
  max-width: min(62%, 520px);
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid rgba(217, 227, 255, 0.2);
  border-radius: 7px;
  background: rgba(11, 20, 42, 0.46);
  color: rgba(244, 247, 255, 0.76);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(7px);
}

.p-story .story-admin-moment-link:hover,
.p-story .story-admin-moment-link:focus-visible {
  background: rgba(26, 48, 94, 0.84);
  color: var(--text-inverse);
}

.p-story .story-moment-info-button {
  position: absolute;
  top: 58px;
  right: 18px;
  z-index: 9;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: rgba(18, 28, 54, 0.66);
  color: var(--text-inverse);
  font-family: Georgia, serif;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 48, 0.2);
  backdrop-filter: blur(8px);
}

.p-story .story-moment-info-button:hover,
.p-story .story-moment-info-button:focus-visible,
.p-story .story-moment-info-button[aria-expanded="true"] {
  background: rgba(31, 67, 145, 0.92);
}

.p-story .story-moment-info-panel {
  position: absolute;
  top: 54px;
  right: 60px;
  z-index: 10;
  width: min(360px, calc(100% - 84px));
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(137, 160, 211, 0.36);
  border-radius: 20px;
  background: rgba(249, 250, 255, 0.95);
  color: var(--ink);
  box-shadow: 0 22px 54px rgba(19, 29, 58, 0.28);
  backdrop-filter: blur(16px);
  cursor: default;
}

.p-story .story-moment-info-panel[hidden] {
  display: none;
}

.p-story .story-moment-info-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm-plus);
  line-height: 1.45;
}

.p-story .story-moment-info-panel label {
  color: rgba(43, 66, 110, 0.84);
  font-size: var(--text-sm);
  font-weight: 800;
}

.p-story .story-moment-info-panel textarea {
  width: 100%;
  resize: vertical;
  min-height: 74px;
  max-height: 150px;
  padding: 10px 12px;
  border: 1px solid rgba(129, 158, 216, 0.32);
  border-radius: 13px;
  background: var(--surface-card);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
}

.p-story .story-moment-info-close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.p-story .story-moment-reference-row,
.p-story .story-moment-report-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-story .story-moment-reference-row code {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(35, 57, 104, 0.88);
  font-size: var(--text-xs-plus);
}

.p-story .story-moment-copy-button,
.p-story .story-moment-report-button {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 9px;
  background: rgba(31, 67, 145, 0.92);
  color: var(--text-inverse);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.p-story .story-moment-report-actions span {
  color: rgba(59, 75, 111, 0.86);
  font-size: 0.75rem;
  line-height: 1.35;
}

.p-story .story-image-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  --story-emotion-rgb: 255, 255, 255;
  --story-emotion-line-alpha: 0.16;
  --story-emotion-glow-alpha: 0.08;
  --story-emotion-fill-alpha: 0.04;
  --story-emotion-image-alpha: 0.00;
  overflow: hidden;
  perspective: 1000px;
}

.p-story .story-image-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
  display: block;
  will-change: transform, opacity;
}

.p-story .story-image-layer.is-visible {
  opacity: 1;
}

.p-story .story-image-stage.is-hard-cut .story-image-layer,
.p-story .story-image-stage.is-hard-cut .story-image-depth-layer {
  transition: none;
}

.p-story .story-image-layer--back {
  z-index: 0;
  transform: translate3d(
      var(--story-shift-back-x),
      var(--story-shift-back-y),
      0
    )
    scale(calc(var(--story-base-zoom) + var(--story-user-zoom) + 0.02 - 1));
}

.p-story .story-image-layer--front {
  z-index: 1;
  transform: translate3d(
      var(--story-shift-base-x),
      var(--story-shift-base-y),
      0
    )
    scale(calc(var(--story-base-zoom) + var(--story-user-zoom) + 0.014 - 1));
}

.p-story .story-image-depth-layer {
  position: absolute;
  inset: -2.5%;
  width: 105%;
  height: 105%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.22s ease;
  will-change: transform, opacity;
}

.p-story .story-image-depth-layer.is-visible {
  opacity: 0;
}

.p-story .story-image-depth-layer--middle {
  z-index: 2;
  opacity: 0;
  filter: saturate(1.025) contrast(1.015);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 56%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 56%, transparent 82%);
  transform: translate3d(
      var(--story-shift-middle-x),
      var(--story-shift-middle-y),
      18px
    )
    scale(calc(var(--story-base-zoom) + var(--story-user-zoom) + 0.025 - 1));
}

.p-story .story-player-visual.is-depth-active .story-image-depth-layer--middle.is-visible {
  opacity: var(--story-depth-middle-opacity);
}

.p-story .story-image-depth-layer--front {
  z-index: 3;
  opacity: 0;
  filter: saturate(1.045) contrast(1.025);
  -webkit-mask-image: linear-gradient(to bottom, transparent 48%, rgba(0, 0, 0, 0.34) 62%, #000 82%);
  mask-image: linear-gradient(to bottom, transparent 48%, rgba(0, 0, 0, 0.34) 62%, #000 82%);
  transform: translate3d(
      var(--story-shift-front-x),
      var(--story-shift-front-y),
      36px
    )
    scale(calc(var(--story-base-zoom) + var(--story-user-zoom) + 0.04 - 1));
}

.p-story .story-player-visual.is-depth-active .story-image-depth-layer--front.is-visible {
  opacity: var(--story-depth-front-opacity);
}

.p-story .story-image-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(11, 18, 38, 0.18) 0%, rgba(11, 18, 38, 0.04) 28%, rgba(11, 18, 38, 0.08) 62%, rgba(11, 18, 38, 0.34) 100%),
    linear-gradient(135deg, rgba(var(--story-charisma-rgb), var(--story-charisma-alpha)), transparent 46%, rgba(var(--story-charisma-rgb), var(--story-charisma-soft-alpha))),
    radial-gradient(circle at center, transparent 44%, rgba(var(--story-emotion-rgb), var(--story-emotion-image-alpha)) 100%);
  box-shadow:
    inset 0 0 150px rgba(var(--story-charisma-rgb), var(--story-charisma-edge-alpha)),
    inset 0 0 120px rgba(var(--story-emotion-rgb), calc(var(--story-emotion-image-alpha) + 0.02)),
    inset 0 0 44px rgba(8, 14, 30, 0.08);
}

.p-story .story-cast-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.p-story .story-speaker-window {
  position: absolute;
  --story-emotion-rgb: 255, 255, 255;
  --story-emotion-line-alpha: 0.16;
  --story-emotion-glow-alpha: 0.08;
  --story-emotion-fill-alpha: 0.04;
  --story-emotion-image-alpha: 0.00;
  display: grid;
  justify-items: center;
  gap: var(--space-2-5);
  transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease;
}

.p-story .story-speaker-window[hidden] {
  display: none;
}

.p-story .story-speaker-window--left {
  left: 22px;
  bottom: 124px;
}

.p-story .story-speaker-window--right {
  right: 22px;
  bottom: 124px;
}

.p-story .story-speaker-window--center {
  left: 50%;
  top: 44px;
  transform: translateX(-50%);
}

.p-story .story-speaker-window.is-passive {
  opacity: 0.48;
  filter: saturate(0.82);
  transform: translateY(8px);
}

.p-story .story-speaker-window.is-active {
  opacity: 1;
  filter: none;
}

.p-story .story-speaker-window.has-custom-position {
  left: var(--story-speaker-position-x, 50%);
  right: auto;
  top: var(--story-speaker-position-y, 50%);
  bottom: auto;
  transform: translate(-50%, -50%) scale(var(--story-speaker-scale, 1));
}

.p-story .story-speaker-window.has-custom-position.is-passive {
  transform: translate(-50%, calc(-50% + 8px)) scale(var(--story-speaker-scale, 1));
}

.p-story .story-speaker-frame {
  width: 196px;
  height: 268px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(245, 246, 255, 0.94), rgba(231, 235, 249, 0.86)),
    radial-gradient(circle at top, rgba(255,255,255,0.9), transparent 55%);
  border: 1px solid rgba(var(--story-emotion-rgb), var(--story-emotion-line-alpha));
  box-shadow:
    0 18px 44px rgba(20, 30, 60, 0.24),
    0 0 30px rgba(var(--story-emotion-rgb), var(--story-emotion-glow-alpha));
}

.p-story .story-speaker-window--center .story-speaker-frame {
  width: 170px;
  height: 224px;
  border-radius: var(--radius-pill) 999px 28px 28px;
}

.p-story .story-speaker-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-story .story-speaker-frame img.has-speaker-crop {
  object-position: var(--story-speaker-x, 50%) var(--story-speaker-y, 40%);
  transform: scale(var(--story-speaker-zoom, 1));
  transform-origin: var(--story-speaker-x, 50%) var(--story-speaker-y, 40%);
}

.p-story .story-speaker-name {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(16, 26, 52, 0.68), rgba(16, 26, 52, 0.58)),
    radial-gradient(circle at top, rgba(var(--story-emotion-rgb), var(--story-emotion-fill-alpha)), transparent 62%);
  color: #f7f9ff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.p-story .story-dialog-overlay {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 4;
  width: min(calc(100% - 360px), 640px);
  display: grid;
  gap: var(--space-2-5);
  padding: 20px 22px;
  transform: translateX(-50%);
  border-radius: 30px;
  --story-emotion-rgb: 255, 255, 255;
  --story-emotion-line-alpha: 0.16;
  --story-emotion-glow-alpha: 0.08;
  --story-emotion-fill-alpha: 0.04;
  --story-emotion-image-alpha: 0.00;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248, 243, 255, 0.88));
  border: 1px solid rgba(var(--story-emotion-rgb), var(--story-emotion-line-alpha));
  box-shadow:
    0 18px 44px rgba(22, 30, 58, 0.2),
    0 0 34px rgba(var(--story-emotion-rgb), var(--story-emotion-glow-alpha));
  backdrop-filter: blur(16px);
}

.p-story .story-dialog-overlay.has-choices {
  width: min(calc(100% - 96px), 940px);
  max-height: calc(100% - 72px);
  padding: 16px 18px;
  gap: 7px;
}

.p-story .story-dialog-overlay[data-text-density="short"] .story-dialog-text {
  min-height: 56px;
}

.p-story .story-dialog-overlay[data-text-density="long"] .story-dialog-text {
  font-size: clamp(0.98rem, 1.18vw, 1.1rem);
  line-height: 1.64;
}

.p-story .story-dialog-overlay[data-text-density="dense"] .story-dialog-text {
  min-height: 72px;
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.54;
}

.p-story .story-dialog-overlay.has-choices .story-dialog-text {
  min-height: 0;
  line-height: 1.5;
}

.p-story .story-dialog-overlay[data-voice="god"] {
  background:
    linear-gradient(180deg, rgba(253, 248, 255, 0.84), rgba(240, 244, 255, 0.9)),
    radial-gradient(circle at top, rgba(var(--story-emotion-rgb), var(--story-emotion-fill-alpha)), transparent 58%);
}

.p-story .story-dialog-overlay[data-voice="memory"] {
  background:
    linear-gradient(180deg, rgba(244, 248, 255, 0.78), rgba(247, 242, 255, 0.9)),
    radial-gradient(circle at top, rgba(var(--story-emotion-rgb), var(--story-emotion-fill-alpha)), transparent 58%);
}

.p-story .story-dialog-speaker {
  min-height: 24px;
  color: rgba(43, 66, 110, 0.84);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p-story .story-dialog-text {
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(1.06rem, 1.34vw, 1.22rem);
  line-height: 1.82;
  color: var(--ink);
}

.p-story .story-choice-panel {
  display: grid;
  gap: var(--space-3);
  margin-top: 6px;
}

.p-story .story-choice-panel[hidden] {
  display: none;
}

.p-story .story-choice-panel.is-busy {
  opacity: 0.75;
}

.p-story .story-choice-title {
  color: rgba(43, 66, 110, 0.78);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p-story .story-choice-list {
  display: grid;
  gap: var(--space-2-5);
}

.p-story .story-choice-list--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-story .story-choice-list--dense {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.p-story .story-choice-button {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(129, 158, 216, 0.28);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246, 248, 255, 0.84)),
    radial-gradient(circle at top, rgba(var(--story-emotion-rgb), 0.08), transparent 68%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.p-story .story-choice-button:hover,
.p-story .story-choice-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(91, 127, 199, 0.46);
  box-shadow: 0 18px 30px rgba(64, 84, 140, 0.14);
}

.p-story .story-choice-button strong {
  font-size: 0.98rem;
  font-weight: 800;
}

.p-story .story-choice-button span {
  color: rgba(73, 86, 116, 0.82);
  font-size: 0.88rem;
  line-height: 1.55;
}

.p-story .story-player-status {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  pointer-events: none;
}

.p-story .story-player-state {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(18, 28, 54, 0.58);
  color: #f6f8ff;
  font-size: var(--text-sm-plus);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.p-story .story-image-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: var(--space-2-5);
  text-align: center;
  padding: 28px;
  color: var(--muted);
}

.p-story .story-charisma-change {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 9;
  min-width: 116px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: var(--radius-pill);
  background: rgba(21, 29, 52, 0.86);
  color: var(--text-inverse);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px) scale(0.96);
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: 0 12px 30px rgba(18, 26, 52, 0.24);
  backdrop-filter: blur(10px);
}

.p-story .story-charisma-change[hidden] {
  display: none;
}

.p-story .story-charisma-change.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.p-story .story-charisma-change.is-positive {
  background: rgba(111, 78, 18, 0.9);
  box-shadow: 0 12px 32px rgba(255, 211, 105, 0.28);
}

.p-story .story-charisma-change.is-negative {
  background: rgba(88, 25, 49, 0.92);
  box-shadow: 0 12px 32px rgba(147, 40, 78, 0.28);
}

.p-story .story-choice-list--wide .story-choice-button,
.p-story .story-choice-list--dense .story-choice-button {
  align-content: start;
  padding: 10px 12px;
  border-radius: var(--radius-md-plus);
}

.p-story .story-choice-list--dense .story-choice-button strong {
  font-size: 0.86rem;
}

.p-story .story-choice-list--dense .story-choice-button span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.76rem;
  line-height: 1.35;
}

.p-story .story-player-visual.has-choices .story-speaker-window--left:not(.has-custom-position),
.p-story .story-player-visual.has-choices .story-speaker-window--right:not(.has-custom-position) {
  top: auto;
  bottom: var(--story-dialog-safe-bottom, 280px);
}

.p-story .story-player-visual.has-choices .story-speaker-window.is-passive {
  display: none;
}

.p-story .story-player-visual.has-choices .story-speaker-window.is-active .story-speaker-frame {
  width: 146px;
  height: 198px;
}

.p-story .story-player-visual.has-choices .story-speaker-window--center.is-dialog-overlap {
  top: 18px;
}

.p-story .story-player-visual.has-choices .story-speaker-window--center.is-dialog-overlap .story-speaker-frame {
  width: 112px;
  height: 148px;
}

.p-story .story-player-visual.has-choices .story-speaker-window.has-custom-position.is-dialog-overlap {
  opacity: 0.28;
}

.p-story .story-image-empty[hidden] {
  display: none;
}

.p-story .story-control-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.72);
  border-top: 1px solid rgba(118, 146, 205, 0.14);
  border-bottom: 1px solid rgba(118, 146, 205, 0.14);
}

.p-story .story-control-button {
  min-width: 62px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  border: 0;
  border-radius: 11px;
  background: rgba(246, 249, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(70, 74, 118, 0.08);
}

.p-story .story-control-button.is-active,
.p-story .story-control-button:hover {
  background: rgba(31, 67, 145, 0.92);
  color: #f7f9ff;
}

.p-story .story-control-button--primary {
  min-width: 78px;
  background: rgba(46, 79, 156, 0.94);
  color: #f7f9ff;
}

.p-story .story-control-button--speed {
  min-width: 48px;
  padding-inline: 7px;
  background: rgba(233, 238, 250, 0.92);
}

.p-story .story-control-button--danger:hover {
  background: rgba(160, 61, 83, 0.94);
}

.p-story .story-control-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.p-story .story-control-icon {
  font-size: 0.86rem;
  line-height: 1;
}

.p-story .story-control-text {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .p-story .dashboard-grid,
.p-story .maintenance-grid {
    grid-template-columns: 1fr;
  }

  .p-story .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .p-story .game-access-banner,
.p-story .game-card-grid,
.p-story .game-character-grid,
.p-story .studio-output-grid {
    grid-template-columns: 1fr;
  }

  .p-story .panel-hero img {
    min-height: 440px;
  }

  .p-story .story-character-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .p-story .site-shell {
    width: min(100% - 20px, 100%);
  }

  .p-story .site-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .p-story .site-nav {
    justify-content: stretch;
  }

  .p-story .site-nav a,
.p-story .site-nav .inline-form,
.p-story .site-nav .inline-form .link-button {
    width: 100%;
  }

  .p-story .field-grid,
.p-story .meta-card-grid,
.p-story .account-stat-grid {
    grid-template-columns: 1fr;
  }

  .p-story .dashboard-welcome-actions,
.p-story .dashboard-welcome-actions .button,
.p-story .dashboard-welcome-actions .button-ghost {
    width: 100%;
  }

  .p-story .game-nav-meta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .p-story .studio-headline {
    flex-direction: column;
  }

  .p-story .panel {
    padding: 20px;
  }

  .p-story .panel-hero img {
    min-height: 360px;
  }

  .p-story .site-footer {
    flex-direction: column;
  }

  .p-story .story-page-shell {
    width: min(100% - 16px, 100%);
  }

  .p-story .story-page-toolbar {
    display: grid;
    justify-items: stretch;
    text-align: center;
  }

  .p-story .story-toolbar-link,
.p-story .story-toolbar-chip {
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .p-story .studio-layout-grid {
    grid-template-columns: 1fr;
  }

  .p-story .studio-preview-panel {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .p-story .studio-preview-frame {
    min-height: 420px;
  }

  .p-story .studio-output-strip {
    grid-template-columns: 1fr 1fr;
  }

  .p-story .studio-builder-form {
    min-height: 0;
    height: auto;
  }

  .p-story .studio-builder-scroll {
    grid-template-columns: 1fr;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
  }

  .p-story .studio-editor-panel {
    height: auto;
    min-height: 0;
  }

  .p-story .story-player-stage {
    min-height: auto;
  }

  .p-story .story-player-visual {
    min-height: 520px;
  }

  .p-story .story-dialog-overlay {
    width: min(calc(100% - 210px), 600px);
  }

  .p-story .story-dialog-overlay.has-choices {
    width: min(calc(100% - 34px), 760px);
  }

  .p-story .story-choice-list--dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-story .story-speaker-frame {
    width: 156px;
    height: 214px;
  }

  .p-story .story-speaker-window--center .story-speaker-frame {
    width: 144px;
    height: 196px;
  }

  .p-story .story-speaker-window--left,
.p-story .story-speaker-window--right {
    bottom: 138px;
  }
}

@media (max-width: 640px) {
  .p-story .studio-output-strip {
    grid-template-columns: 1fr;
  }

  .p-story .studio-choice-row,
.p-story .studio-choice-row--control,
.p-story .studio-choice-row--mini {
    gap: 6px;
  }

  .p-story .studio-choice-chip {
    padding: 7px 10px;
  }

  .p-story .studio-control-row--slider,
.p-story .studio-mini-range-grid {
    grid-template-columns: 1fr;
  }

  .p-story .studio-control-row--slider .studio-control-head,
.p-story .studio-control-row--slider .studio-slider,
.p-story .studio-control-row--slider .studio-slider-scale {
    grid-column: auto;
  }

  .p-story .studio-preview-frame {
    min-height: 360px;
  }

  .p-story .studio-speaker-crop-panel {
    right: 7px;
    bottom: 7px;
    grid-template-columns: 98px;
    width: 116px;
    padding: 6px;
  }

  .p-story .studio-speaker-crop-frame {
    width: 98px;
  }

  .p-story .studio-speaker-crop-help {
    font-size: 0.62rem;
  }

  .p-story .story-control-bar {
    gap: 5px;
  }

  .p-story .story-control-button {
    min-width: 54px;
    padding: 6px 8px;
  }

  .p-story .story-player-visual {
    min-height: 460px;
  }

  .p-story .story-dialog-overlay {
    width: min(calc(100% - 34px), 100%);
    bottom: 18px;
    padding: 16px 18px;
  }

  .p-story .story-dialog-overlay.has-choices {
    width: min(calc(100% - 20px), 100%);
    max-height: calc(100% - 44px);
    padding: 12px;
    overflow: hidden;
  }

  .p-story .story-choice-panel {
    min-height: 0;
  }

  .p-story .story-choice-list--wide,
.p-story .story-choice-list--dense {
    grid-template-columns: 1fr;
    max-height: min(52vh, 290px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
  }

  .p-story .story-player-visual.has-choices .story-speaker-window.is-active {
    display: none;
  }

  .p-story .story-moment-info-button {
    top: 54px;
    right: 10px;
    width: 32px;
    height: 32px;
  }

  .p-story .story-moment-info-panel {
    top: 50px;
    right: 10px;
    width: min(340px, calc(100% - 20px));
  }

  .p-story .story-dialog-text {
    min-height: 86px;
    font-size: var(--text-md);
    line-height: 1.7;
  }

  .p-story .story-speaker-frame {
    width: 120px;
    height: 168px;
    border-radius: var(--radius-card);
  }

  .p-story .story-speaker-window--center .story-speaker-frame {
    width: 116px;
    height: 156px;
  }

  .p-story .story-speaker-window--left,
.p-story .story-speaker-window--right {
    bottom: 146px;
  }

  .p-story .story-speaker-window--left {
    left: 10px;
  }

  .p-story .story-speaker-window--right {
    right: 10px;
  }

  .p-story .story-speaker-window--center {
    top: 20px;
  }

  .p-story .story-speaker-name {
    font-size: var(--text-sm);
    min-height: 28px;
    padding: 0 10px;
  }

  .p-story .studio-group-summary {
    align-items: start;
  }

  .p-story .studio-group-toggle-text {
    display: none;
  }
}

.p-story .story-effect-target.is-wake-soft {
  animation: story-wake-soft 0.42s ease;
}

.p-story .story-effect-target.is-wake-blink {
  animation: story-wake-blink 0.46s ease;
}

.p-story .story-effect-target.is-wake-hard {
  animation: story-wake-hard 0.58s ease;
}

.p-story .story-effect-target.is-memory-pulse {
  animation: story-memory-pulse 0.52s ease;
}

.p-story .story-effect-target.is-dream-drift {
  animation: story-dream-drift 0.76s ease;
}

.p-story .story-effect-target.is-dream-sway {
  animation: story-dream-sway 0.7s ease;
}

.p-story .story-effect-target.is-flash-white {
  animation: story-flash-white 0.22s ease;
}

.p-story .story-effect-target.is-flash-rose {
  animation: story-flash-rose 0.26s ease;
}

.p-story .story-effect-target.is-focus-in {
  animation: story-focus-in 0.34s ease;
}

.p-story .story-effect-target.is-heartbeat {
  animation: story-heartbeat 0.56s ease;
}

.p-story .story-effect-target.is-shiver {
  animation: story-shiver 0.38s ease;
}

.p-story .story-effect-target.is-glow-soft {
  animation: story-glow-soft 0.62s ease;
}

.p-story .story-effect-target.is-echo-fade {
  animation: story-echo-fade 0.52s ease;
}

.p-story .story-effect-target.is-meteor-shadow {
  animation: story-meteor-shadow 0.9s ease-out;
}

.p-story .story-effect-target.is-whiteout {
  animation: story-whiteout 0.52s ease-out;
}

.p-story .story-effect-target.is-fade {
  animation: story-fade 0.62s ease;
}

.p-story .story-effect-target.is-glow-hard {
  animation: story-glow-hard 0.68s ease-out;
}

.p-story .story-image-stage.is-camera-drift .story-image-layer {
  animation: story-camera-drift 1.1s ease-in-out;
}

.p-story .story-image-stage.is-depth-pulse .story-image-vignette {
  animation: story-depth-pulse-vignette 0.82s ease-out;
}

.p-story .story-effect-target.is-impact-soft {
  animation: story-impact-soft 0.54s ease-out;
}

@keyframes story-wake-soft {
  0% { transform: translate3d(0, 0, 0) scale(1.01); filter: brightness(1.08); }
  24% { transform: translate3d(-3px, 2px, 0) scale(1.012); filter: brightness(1.16); }
  52% { transform: translate3d(2px, -2px, 0) scale(1.004); filter: brightness(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes story-wake-blink {
  0% { transform: translate3d(0, 0, 0); filter: brightness(1.18); }
  20% { transform: translate3d(-4px, 0, 0); filter: brightness(0.96); }
  44% { transform: translate3d(4px, -2px, 0); filter: brightness(1.12); }
  70% { transform: translate3d(-2px, 2px, 0); filter: brightness(0.98); }
  100% { transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes story-wake-hard {
  0% { transform: translate3d(0, 0, 0) scale(1.014); filter: brightness(1.18) saturate(1.04); }
  18% { transform: translate3d(-8px, 3px, 0) scale(1.02); filter: brightness(0.96); }
  34% { transform: translate3d(8px, -4px, 0) scale(1.01); filter: brightness(1.1); }
  54% { transform: translate3d(-5px, 3px, 0) scale(1.008); filter: brightness(0.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes story-memory-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.012); filter: brightness(1.08) saturate(1.05); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes story-dream-drift {
  0% { transform: translate3d(0, 0, 0) scale(1.01); filter: brightness(1) blur(0); }
  35% { transform: translate3d(10px, -4px, 0) scale(1.018); filter: brightness(1.04) blur(1px); }
  68% { transform: translate3d(-6px, 3px, 0) scale(1.014); filter: brightness(1.02) blur(0.6px); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) blur(0); }
}

@keyframes story-dream-sway {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  28% { transform: translate3d(-8px, 0, 0) rotate(-0.5deg); }
  58% { transform: translate3d(7px, 0, 0) rotate(0.45deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes story-flash-white {
  0% { filter: brightness(1.42) saturate(1.08); }
  45% { filter: brightness(1.06) saturate(1.02); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes story-flash-rose {
  0% { filter: brightness(1.26) saturate(1.14) hue-rotate(-6deg); }
  46% { filter: brightness(1.08) saturate(1.05) hue-rotate(-2deg); }
  100% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
}

@keyframes story-focus-in {
  0% { transform: scale(1.022); filter: blur(3px) brightness(1.06); }
  60% { transform: scale(1.008); filter: blur(0.8px) brightness(1.02); }
  100% { transform: scale(1); filter: blur(0) brightness(1); }
}

@keyframes story-heartbeat {
  0% { transform: scale(1); filter: brightness(1); }
  22% { transform: scale(1.018); filter: brightness(1.05); }
  44% { transform: scale(1); filter: brightness(1); }
  68% { transform: scale(1.012); filter: brightness(1.03); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes story-shiver {
  0% { transform: translate3d(0, 0, 0); }
  18% { transform: translate3d(-5px, 1px, 0); }
  36% { transform: translate3d(5px, -1px, 0); }
  54% { transform: translate3d(-3px, 1px, 0); }
  72% { transform: translate3d(3px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes story-glow-soft {
  0% { filter: brightness(1) saturate(1); }
  44% { filter: brightness(1.09) saturate(1.08) drop-shadow(0 0 14px rgba(255, 255, 255, 0.28)); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes story-echo-fade {
  0% { opacity: 1; filter: brightness(1); }
  32% { opacity: 0.78; filter: brightness(1.06); }
  66% { opacity: 0.92; filter: brightness(0.98); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes story-meteor-shadow {
  0% { filter: brightness(1) saturate(1); }
  38% { filter: brightness(var(--story-effect-shadow-brightness, 0.94)) saturate(0.94) contrast(1.025); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes story-whiteout {
  0% { filter: brightness(var(--story-effect-brightness, 1.14)) saturate(0.94); }
  55% { filter: brightness(1.06) saturate(0.98); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes story-fade {
  0% { opacity: 1; }
  46% { opacity: var(--story-effect-fade-opacity, 0.88); }
  100% { opacity: 1; }
}

@keyframes story-glow-hard {
  0% { filter: brightness(1); }
  42% { filter: brightness(var(--story-effect-brightness, 1.14)) drop-shadow(0 0 var(--story-effect-glow, 14px) rgba(255, 244, 216, 0.42)); }
  100% { filter: brightness(1); }
}

@keyframes story-camera-drift {
  0% { object-position: var(--story-focus-x, 50%) var(--story-focus-y, 50%); }
  55% { object-position: calc(var(--story-focus-x, 50%) + 0.8%) calc(var(--story-focus-y, 50%) - 0.4%); }
  100% { object-position: var(--story-focus-x, 50%) var(--story-focus-y, 50%); }
}

@keyframes story-depth-pulse-vignette {
  0%, 100% { opacity: 1; }
  38% { opacity: 0.86; }
}

@keyframes story-impact-soft {
  0% { transform: translate3d(0, 0, 0); filter: brightness(1); }
  16% { transform: translate3d(-5px, 2px, 0); filter: brightness(var(--story-effect-brightness, 1.14)); }
  36% { transform: translate3d(var(--story-effect-shift, 5px), -2px, 0); filter: brightness(0.96); }
  58% { transform: translate3d(-2px, 1px, 0); filter: brightness(1.03); }
  100% { transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .p-story .story-image-layer,
.p-story .story-image-depth-layer,
.p-story .story-speaker-window,
.p-story .story-effect-target {
    animation: none;
    transition-duration: 0.01ms;
  }
}
}

/* SOURCE: 40-screens/game-shell.css */
/* =========================================================
   SCREEN: Game shell
   Scope: .p-game only
   Root: .p-game
   PHP: app/game.php
   ========================================================= */

@layer screens {
body.p-game.game-body {
  background:
    radial-gradient(circle at top right, rgba(255, 244, 210, 0.72), transparent 28%),
    radial-gradient(circle at left center, rgba(247, 178, 206, 0.56), transparent 26%),
    linear-gradient(180deg, #f8d7e7 0%, #f7f1fb 42%, #f8fbff 100%);
}

body.p-game.game-body .site-shell {
  width: min(1380px, calc(100% - 18px));
  padding-top: 14px;
}

body.p-game.game-body .site-topbar {
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(111, 149, 213, 0.14);
  box-shadow: 0 18px 40px rgba(100, 117, 166, 0.12);
}

.p-game .game-shell-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: 14px;
  padding: 22px 24px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(21, 30, 58, 0.94) 0%, rgba(33, 54, 101, 0.88) 56%, rgba(63, 120, 190, 0.74) 100%);
  color: #f4f8ff;
  box-shadow: 0 28px 56px rgba(54, 73, 120, 0.2);
}

.p-game .game-shell-kicker {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 247, 255, 0.76);
}

.p-game .game-shell-title {
  margin: 0;
  font-size: clamp(2.25rem, 3.4vw, 3.4rem);
  line-height: 0.96;
}

.p-game .game-shell-lead {
  margin: 8px 0 0;
  max-width: none;
  color: rgba(239, 245, 255, 0.84);
  line-height: 1.45;
}

.p-game .game-shell-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

.p-game .game-shell-meta span {
  min-width: 108px;
  display: grid;
  gap: var(--space-1);
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
}

.p-game .game-shell-meta strong {
  font-size: 1.3rem;
}

.p-game .game-shell-meta small {
  font-size: var(--text-sm-plus);
  color: rgba(239, 245, 255, 0.82);
}

.p-game .game-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: 12px;
  padding: 7px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(111, 149, 213, 0.16);
  box-shadow: 0 16px 34px rgba(95, 119, 168, 0.08);
}

.p-game .game-nav-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(111, 149, 213, 0.12);
}

.p-game .game-nav-link.is-active {
  color: var(--text-inverse);
  background: linear-gradient(135deg, #25335f 0%, #567de2 58%, #77d9f9 100%);
  box-shadow: 0 14px 28px rgba(77, 112, 212, 0.24);
}

.p-game .game-nav-meta {
  margin-left: auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: rgba(20, 33, 63, 0.82);
  color: rgba(245, 248, 255, 0.92);
  text-decoration: none;
  font-weight: 800;
}

.p-game .game-nav-meta strong {
  font-size: 0.9rem;
}

.p-game .game-nav-meta span {
  color: rgba(245, 248, 255, 0.74);
  font-size: 0.88rem;
}

.p-game .game-home {
  display: grid;
  gap: var(--space-5);
  margin-top: 8px;
}

.p-game .game-home-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.84fr) minmax(0, 1.48fr) minmax(250px, 0.9fr);
  gap: var(--space-5);
  align-items: stretch;
}

.p-game .game-sidebar {
  display: grid;
  gap: var(--space-4);
}

.p-game .game-panel,
.p-game .game-stage-card,
.p-game .game-module-card {
  position: relative;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(111, 149, 213, 0.14);
  box-shadow: 0 24px 56px rgba(84, 102, 150, 0.14);
  backdrop-filter: blur(16px);
}

.p-game .game-panel {
  padding: 18px;
}

.p-game .game-panel--compact {
  background: linear-gradient(180deg, rgba(25, 37, 73, 0.92) 0%, rgba(40, 63, 114, 0.86) 100%);
  color: #f5f8ff;
}

.p-game .game-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 12px;
}

.p-game .game-panel-label {
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.p-game .game-panel-note {
  font-size: 0.84rem;
  color: var(--muted);
}

.p-game .game-panel--compact .game-panel-label,
.p-game .game-panel--compact .game-panel-note,
.p-game .game-panel--compact p,
.p-game .game-panel--compact strong {
  color: #f5f8ff;
}

.p-game .game-panel-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.p-game .game-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 800;
}

.p-game .game-chip--signal {
  color: var(--text-inverse);
  background: linear-gradient(135deg, #ff8fa8 0%, #ffcf86 100%);
  box-shadow: 0 12px 22px rgba(255, 155, 170, 0.28);
}

.p-game .alarm-clock-widget {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.p-game .alarm-clock-face {
  width: 78px;
  height: 78px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at center, rgba(17, 24, 48, 0.94) 0 52%, transparent 54%),
    conic-gradient(from 180deg, #ff9cb7 0deg, #ffd3a1 100deg, #7bdcff 240deg, #ff9cb7 360deg);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.22), 0 16px 34px rgba(19, 30, 61, 0.34);
}

.p-game .alarm-clock-face::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 2px solid rgba(255, 218, 170, 0.92);
  animation: tutorialPulse 1.8s ease-out infinite;
}

.p-game .alarm-clock-face span {
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-inverse);
}

.p-game .game-lector-list,
.p-game .game-roster-list,
.p-game .game-meter-stack {
  display: grid;
  gap: var(--space-3);
}

.p-game .game-lector-item,
.p-game .game-roster-item {
  padding: 14px 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(111, 149, 213, 0.12);
}

.p-game .game-lector-item strong,
.p-game .game-roster-item strong {
  display: block;
  margin-bottom: 6px;
}

.p-game .game-lector-item p,
.p-game .game-roster-item span {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.p-game .game-roster-item.is-empty {
  background: rgba(245, 249, 255, 0.76);
}

.p-game .game-stage-card {
  min-height: 680px;
  overflow: hidden;
  padding: 24px;
  background: linear-gradient(180deg, rgba(12, 20, 43, 0.96) 0%, rgba(25, 39, 82, 0.92) 100%);
  color: #f7fbff;
}

.p-game .game-stage-backdrop,
.p-game .game-stage-glow {
  position: absolute;
  inset: 0;
}

.p-game .game-stage-backdrop {
  background-position: center;
  background-size: cover;
  opacity: 0.38;
  filter: saturate(1.08) blur(0.8px);
}

.p-game .game-stage-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 10, 24, 0.08) 0%, rgba(11, 18, 38, 0.36) 28%, rgba(10, 14, 28, 0.7) 100%);
}

.p-game .game-stage-glow {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 229, 173, 0.22), transparent 22%),
    radial-gradient(circle at 48% 84%, rgba(124, 220, 255, 0.18), transparent 30%);
}

.p-game .game-stage-topline,
.p-game .game-stage-center,
.p-game .game-stage-actions {
  position: relative;
  z-index: 1;
}

.p-game .game-stage-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 8px;
}

.p-game .game-stage-location,
.p-game .game-stage-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(247, 251, 255, 0.82);
  font-size: var(--text-sm-plus);
  letter-spacing: 0.04em;
}

.p-game .game-stage-center {
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 0.92fr);
  gap: var(--space-2);
  align-items: end;
}

.p-game .game-stage-copy {
  align-self: start;
  padding-top: 34px;
  max-width: 360px;
}

.p-game .game-stage-eyebrow {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 248, 255, 0.72);
}

.p-game .game-stage-copy h2 {
  margin: 0;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 0.92;
}

.p-game .game-stage-copy p {
  margin: 14px 0 0;
  color: rgba(245, 249, 255, 0.84);
  line-height: 1.72;
}

.p-game .game-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin-top: 18px;
}

.p-game .game-hero-tags span,
.p-game .game-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(246, 250, 255, 0.92);
  font-size: 0.84rem;
  font-weight: 700;
}

.p-game .game-stage-portrait-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.p-game .game-stage-portrait {
  max-height: 560px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 60px rgba(12, 18, 38, 0.48));
}

.p-game .game-stage-silhouette {
  width: min(360px, 100%);
  aspect-ratio: 3 / 5;
  border-radius: var(--radius-pill) 999px 34px 34px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.82) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 10%, rgba(122, 219, 255, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(159, 194, 255, 0.48) 0%, rgba(255, 186, 208, 0.24) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.p-game .game-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 8px;
}

.p-game .game-stage-action {
  min-width: 180px;
  flex: 1 1 0;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 24px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f7fbff;
}

.p-game .game-stage-action strong {
  font-size: var(--text-md);
}

.p-game .game-stage-action span {
  color: rgba(244, 248, 255, 0.74);
  font-size: 0.88rem;
}

.p-game .game-stage-action.is-primary {
  background: linear-gradient(135deg, rgba(255, 146, 183, 0.92) 0%, rgba(109, 222, 255, 0.9) 100%);
  color: #0e1730;
}

.p-game .game-stage-action.is-primary span {
  color: rgba(14, 23, 48, 0.72);
}

.p-game .game-meter-row {
  display: grid;
  gap: var(--space-2);
}

.p-game .game-meter-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
}

.p-game .game-meter-copy strong {
  font-size: 0.92rem;
}

.p-game .game-meter-copy span {
  font-size: 0.88rem;
  color: var(--muted);
}

.p-game .game-meter-bar {
  height: 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(218, 229, 246, 0.72);
}

.p-game .game-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.p-game .game-meter-fill.is-blue {
  background: linear-gradient(90deg, #5c87ff 0%, #8bb6ff 100%);
}

.p-game .game-meter-fill.is-ice {
  background: linear-gradient(90deg, #57cfe8 0%, #7bdcff 100%);
}

.p-game .game-meter-fill.is-pink {
  background: linear-gradient(90deg, #ff8fa8 0%, #f7b2ce 100%);
}

.p-game .game-meter-fill.is-gold {
  background: linear-gradient(90deg, #f2b55f 0%, #ffd995 100%);
}

.p-game .game-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.p-game .game-module-card {
  padding: 18px;
}

.p-game .game-module-card--wide {
  grid-column: span 2;
}

.p-game .game-module-title {
  display: block;
  margin-bottom: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.p-game .game-module-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.12rem;
}

.p-game .game-module-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.p-game .game-module-card svg {
  width: 100%;
  height: 120px;
  margin: 8px 0 10px;
}

.p-game .game-module-card polyline {
  fill: none;
  stroke: #f17f97;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p-game .game-module-card polyline.alt {
  stroke: #67cde8;
}

.p-game .game-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin-bottom: 10px;
}

.p-game .game-pill {
  color: var(--ink);
  background: rgba(241, 246, 255, 0.9);
  border-color: rgba(111, 149, 213, 0.12);
}

.p-game .game-tutorial-overlay[hidden] {
  display: none;
}

.p-game .game-tutorial-dimmer {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(16, 24, 46, 0.58);
  backdrop-filter: blur(3px) grayscale(0.18);
}

.p-game .game-tutorial-card {
  width: min(520px, calc(100% - 24px));
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 122;
  transform: translateX(-50%);
  padding: 20px 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(111, 149, 213, 0.18);
  box-shadow: 0 28px 56px rgba(22, 31, 56, 0.28);
}

.p-game .game-tutorial-card h2 {
  margin: 6px 0 10px;
  font-size: 2rem;
}

.p-game .game-tutorial-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.p-game .game-tutorial-step {
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.p-game .game-tutorial-focus {
  position: relative;
  z-index: 121;
}

.p-game .game-tutorial-focus::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 2px solid rgba(255, 215, 150, 0.96);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.12),
    0 0 36px rgba(255, 201, 122, 0.44);
  animation: tutorialPulse 1.7s ease-out infinite;
  pointer-events: none;
}

@keyframes tutorialPulse {
  0% {
    opacity: 0.28;
    transform: scale(0.985);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.005);
  }
  100% {
    opacity: 0.34;
    transform: scale(1.02);
  }
}

@media (max-width: 1180px) {
  .p-game .game-home-grid {
    grid-template-columns: 1fr;
  }

  .p-game .game-stage-card {
    min-height: 0;
  }

  .p-game .game-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .p-game .game-shell-intro {
    grid-template-columns: 1fr;
  }

  .p-game .game-shell-meta {
    justify-content: flex-start;
  }

  .p-game .game-stage-center {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .p-game .game-stage-copy {
    max-width: none;
    padding-top: 12px;
  }

  .p-game .game-stage-portrait-wrap {
    order: -1;
    min-height: 300px;
  }
}

@media (max-width: 720px) {
  body.p-game.game-body .site-shell {
    width: min(100% - 10px, 100%);
  }

  .p-game .game-nav {
    padding: 8px;
  }

  .p-game .game-nav-meta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .p-game .game-module-grid {
    grid-template-columns: 1fr;
  }

  .p-game .game-module-card--wide {
    grid-column: span 1;
  }

  .p-game .game-stage-actions {
    flex-direction: column;
  }

  .p-game .game-tutorial-card {
    bottom: 12px;
    padding: 18px;
  }
}

.p-game .game-userbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.p-game .game-userbar-copy {
  display: grid;
  gap: 2px;
  text-align: right;
}

.p-game .game-userbar-copy strong {
  font-size: 0.96rem;
}

.p-game .game-userbar-copy span {
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.p-game .game-user-menu {
  position: relative;
}

.p-game .game-user-menu summary {
  list-style: none;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #24315c 0%, #4f77df 58%, #77d8f9 100%);
  color: var(--text-inverse);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.p-game .game-user-menu summary::-webkit-details-marker {
  display: none;
}

.p-game .game-user-menu-panel {
  width: 220px;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: var(--space-2-5);
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(111, 149, 213, 0.16);
  box-shadow: 0 24px 44px rgba(57, 73, 118, 0.18);
}

.p-game .game-user-menu-panel a,
.p-game .game-user-menu-panel .link-button {
  min-height: 42px;
  justify-content: flex-start;
  box-shadow: none;
}

.p-game .game-home-grid--room {
  grid-template-columns: minmax(280px, 0.84fr) minmax(0, 1.72fr);
  align-items: start;
}

.p-game .game-stage-card--room {
  min-height: 0;
  padding: 22px;
}

.p-game .game-sidebar--left {
  align-content: start;
  grid-auto-rows: max-content;
}

.p-game .game-interest-dot {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #ff96ae 0%, #ffd692 100%);
  box-shadow: 0 0 0 0 rgba(255, 189, 133, 0.56);
  animation: tutorialPulse 1.8s ease-out infinite;
}

.p-game .game-timer-stack,
.p-game .game-bond-list,
.p-game .game-stat-stack,
.p-game .game-helper-grid {
  display: grid;
  gap: var(--space-3);
}

.p-game .game-timer-row,
.p-game .game-bond-item {
  display: grid;
  gap: var(--space-2);
}

.p-game .game-timer-copy,
.p-game .game-bond-copy,
.p-game .game-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.p-game .game-timer-copy strong,
.p-game .game-bond-copy strong,
.p-game .game-stat-row strong {
  font-size: 0.94rem;
}

.p-game .game-timer-copy span,
.p-game .game-bond-copy span,
.p-game .game-stat-row span {
  color: var(--muted);
  font-size: 0.86rem;
}

.p-game .game-timer-bar,
.p-game .game-bond-meter {
  height: 12px;
  position: relative;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(220, 229, 246, 0.76);
}

.p-game .game-timer-fill,
.p-game .game-bond-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
}

.p-game .game-timer-fill.is-rose {
  background: linear-gradient(90deg, #ff93ae 0%, #ffd29b 100%);
}

.p-game .game-timer-fill.is-blue {
  background: linear-gradient(90deg, #5c87ff 0%, #8bb7ff 100%);
}

.p-game .game-timer-fill.is-ice {
  background: linear-gradient(90deg, #59d0e8 0%, #82dfff 100%);
}

.p-game .game-timer-fill.is-gold {
  background: linear-gradient(90deg, #f5bb67 0%, #ffdd9d 100%);
}

.p-game .game-bond-center {
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(45, 61, 105, 0.18);
}

.p-game .game-bond-fill.is-white {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, #a7c4ff 100%);
}

.p-game .game-bond-fill.is-gold {
  background: linear-gradient(90deg, #f4c777 0%, #ffe3a4 100%);
}

.p-game .game-bond-fill.is-red {
  background: linear-gradient(90deg, #ff8aa0 0%, #d85b66 100%);
}

.p-game .game-room-stage-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.74fr);
  gap: var(--space-5);
  align-items: stretch;
  margin-top: 14px;
}

.p-game .game-room-hero {
  display: grid;
  gap: var(--space-4);
}

.p-game .game-room-hero-header {
  max-width: 420px;
}

.p-game .game-room-hero-header h2 {
  margin: 0;
  font-size: clamp(2.8rem, 4.6vw, 4.6rem);
  line-height: 0.92;
}

.p-game .game-room-hero-header p {
  margin: 12px 0 0;
  color: rgba(246, 250, 255, 0.84);
  line-height: 1.72;
}

.p-game .game-room-hero-visual {
  min-height: 420px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.p-game .game-emotion-halo {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 58%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
  filter: blur(28px);
  opacity: 0.56;
}

.p-game .game-emotion-halo.is-white,
.p-game .game-stage-glow.is-white {
  background: radial-gradient(circle at center, rgba(255,255,255,0.72) 0%, rgba(130, 213, 255, 0.16) 60%, transparent 74%);
}

.p-game .game-emotion-halo.is-gold,
.p-game .game-stage-glow.is-gold {
  background: radial-gradient(circle at center, rgba(255, 214, 139, 0.74) 0%, rgba(255, 236, 182, 0.2) 60%, transparent 76%);
}

.p-game .game-emotion-halo.is-red,
.p-game .game-stage-glow.is-red {
  background: radial-gradient(circle at center, rgba(243, 107, 127, 0.62) 0%, rgba(200, 54, 73, 0.22) 60%, transparent 76%);
}

.p-game .game-room-emotion-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.p-game .game-room-emotion-label {
  color: rgba(245, 249, 255, 0.76);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p-game .game-room-emotion-tone {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  text-transform: capitalize;
}

.p-game .game-room-emotion-tone.is-white {
  color: #eff6ff;
  background: rgba(124, 220, 255, 0.18);
}

.p-game .game-room-emotion-tone.is-gold {
  color: #3f2c12;
  background: rgba(255, 224, 153, 0.92);
}

.p-game .game-room-emotion-tone.is-red {
  color: #fff2f4;
  background: rgba(220, 84, 103, 0.78);
}

.p-game .game-equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2-5);
}

.p-game .game-equipment-slot {
  padding: 12px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.p-game .game-equipment-slot strong {
  display: block;
  margin-bottom: 6px;
  color: #f7fbff;
  font-size: 0.9rem;
}

.p-game .game-equipment-slot span {
  color: rgba(245, 249, 255, 0.68);
  font-size: var(--text-sm-plus);
}

.p-game .game-room-side {
  display: grid;
  gap: var(--space-3-5);
  align-self: start;
  align-content: start;
  grid-auto-rows: max-content;
}

.p-game .game-panel--nested {
  background: rgba(17, 30, 61, 0.82);
  border-color: rgba(157, 190, 241, 0.24);
  box-shadow: 0 16px 34px rgba(7, 13, 29, 0.22);
}

.p-game .game-stage-card--room .game-panel--nested .game-panel-label,
.p-game .game-stage-card--room .game-panel--nested .game-panel-note,
.p-game .game-stage-card--room .game-panel--nested .game-stat-row span {
  color: rgba(232, 240, 255, 0.78);
}

.p-game .game-stage-card--room .game-panel--nested .game-stat-row strong {
  color: #fff7e5;
}

.p-game .game-helper-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.p-game .game-helper-chip {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: rgba(241, 246, 255, 0.92);
  border: 1px solid rgba(111, 149, 213, 0.12);
  color: #20314d;
  font-weight: 700;
}

.p-game .game-module-grid--room {
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.84fr);
  align-items: start;
}

.p-game .game-module-card--character {
  min-height: 0;
}

.p-game .game-character-room-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-4);
  align-items: center;
}

.p-game .game-character-room-card img,
.p-game .game-character-room-fallback {
  width: 130px;
  height: 170px;
  border-radius: 24px;
  object-fit: cover;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.86) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(129, 205, 255, 0.48) 0%, rgba(255, 177, 207, 0.34) 100%);
  box-shadow: 0 16px 30px rgba(90, 111, 163, 0.16);
}

.p-game .game-character-room-card p {
  margin: 8px 0 0;
}

@media (max-width: 1180px) {
  .p-game .game-home-grid--room {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .p-game .game-room-stage-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .p-game .game-module-grid--room {
    grid-template-columns: 1fr;
  }

  .p-game .game-module-grid--room .game-module-card--wide {
    grid-column: span 1;
  }
}
}

/* SOURCE: 40-screens/forest.css */
/* =========================================================
   SCREEN: Forest
   Scope: .p-forest only
   Root: .p-forest
   PHP: game/school.php; JS: game-forest.js
   ========================================================= */

@layer screens {
.p-forest .forest-screen {
  --forest-panel: rgba(14, 22, 27, 0.95);
  --forest-panel-soft: rgba(24, 34, 37, 0.9);
  --forest-line: rgba(180, 202, 184, 0.22);
  --forest-line-strong: rgba(228, 194, 116, 0.48);
  --forest-text: #f2f6ec;
  --forest-muted: rgba(225, 235, 224, 0.72);
  --forest-gold: #e4c274;
  --forest-green: #82bf73;
  --forest-red: #df766c;
  display: grid;
  gap: var(--space-3);
  min-height: calc(100svh - 126px);
  color: var(--forest-text);
}

.p-forest .forest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.p-forest .forest-head p,
.p-forest .forest-head h1 {
  margin: 0;
}

.p-forest .forest-head p {
  color: var(--forest-muted);
  font-size: var(--text-xs-plus);
  font-weight: 800;
  text-transform: uppercase;
}

.p-forest .forest-head h1 {
  color: #fff1c7;
  font-size: 2.4rem;
  line-height: 1;
}

.p-forest .forest-head-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.p-forest .forest-head-stats span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background: rgba(14, 22, 27, 0.78);
  color: #fff1c7;
  font-size: var(--text-sm-plus);
  font-weight: 800;
}

.p-forest .forest-layout {
  display: grid;
  grid-template-columns: 300px minmax(520px, 1fr) 270px;
  gap: var(--space-3);
  min-height: 590px;
  height: min(720px, calc(100svh - 230px));
}

.p-forest .forest-panel,
.p-forest .forest-roster {
  overflow: hidden;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background: var(--forest-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.p-forest .forest-panel-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  padding: 0 14px;
  border-bottom: 1px solid var(--forest-line);
  background: linear-gradient(180deg, rgba(54, 43, 31, 0.96), rgba(28, 31, 29, 0.96));
}

.p-forest .forest-panel-title strong {
  color: #fff1c7;
  font-size: 0.9rem;
  font-weight: 900;
}

.p-forest .forest-panel-title span {
  color: var(--forest-muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.p-forest .forest-tasks {
  display: flex;
  flex-direction: column;
}

.p-forest .forest-task-list {
  display: grid;
  gap: var(--space-2);
  padding: 12px;
}

.p-forest .forest-task,
.p-forest .forest-student {
  width: 100%;
  border: 1px solid rgba(180, 202, 184, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.055);
  color: var(--forest-text);
  text-align: left;
  cursor: pointer;
}

.p-forest .forest-task {
  min-height: 68px;
  padding: 12px;
}

.p-forest .forest-task strong,
.p-forest .forest-task span,
.p-forest .forest-student strong,
.p-forest .forest-student span,
.p-forest .forest-student small {
  display: block;
}

.p-forest .forest-task strong,
.p-forest .forest-student strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.p-forest .forest-task span,
.p-forest .forest-student span,
.p-forest .forest-student small {
  margin-top: 5px;
  color: var(--forest-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.p-forest .forest-task.is-selected {
  border-color: var(--forest-line-strong);
  background: linear-gradient(180deg, rgba(228, 194, 116, 0.2), rgba(113, 91, 48, 0.2));
  box-shadow: inset 0 0 0 1px rgba(228, 194, 116, 0.12);
}

.p-forest .forest-task-detail {
  display: grid;
  gap: var(--space-2-5);
  margin: auto 12px 12px;
  padding: 12px;
  border-top: 1px solid var(--forest-line);
  background: rgba(0, 0, 0, 0.14);
}

.p-forest .forest-task-detail h2,
.p-forest .forest-task-detail p {
  margin: 0;
}

.p-forest .forest-task-detail h2 {
  color: #fff1c7;
  font-size: 1.3rem;
  line-height: 1.1;
}

.p-forest .forest-task-detail p {
  color: var(--forest-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.p-forest .forest-task-detail > strong {
  color: var(--forest-green);
  font-size: 0.86rem;
  font-weight: 900;
}

.p-forest .forest-finds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p-forest .forest-finds span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(228, 194, 116, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(228, 194, 116, 0.12);
  color: #fff1c7;
  font-size: 0.74rem;
  font-weight: 900;
}

.p-forest .forest-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background: #15231d;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.p-forest .forest-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 8, 8, 0.08), rgba(4, 8, 8, 0.28)),
    var(--forest-bg) center / cover no-repeat;
}

.p-forest .forest-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 194, 116, 0.22), transparent 32%),
    linear-gradient(180deg, transparent 54%, rgba(6, 9, 9, 0.46));
}

.p-forest .forest-screen.is-positive .forest-bg {
  filter: saturate(1.08) brightness(1.08);
}

.p-forest .forest-screen.is-negative .forest-bg {
  filter: sepia(0.32) saturate(0.82) brightness(0.56) contrast(1.14);
}

.p-forest .forest-slots {
  position: absolute;
  left: 50%;
  top: 26px;
  width: min(650px, calc(100% - 40px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2-5);
  transform: translateX(-50%);
}

.p-forest .forest-slot {
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: 12px;
  border: 1px solid rgba(255, 241, 199, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 24, 0.78);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.p-forest .forest-slot.is-filled {
  border-color: rgba(130, 191, 115, 0.68);
  background: rgba(19, 38, 29, 0.84);
}

.p-forest .forest-slot.is-drop-target {
  border-color: var(--forest-gold);
  background: rgba(228, 194, 116, 0.16);
}

.p-forest .forest-slot strong {
  color: #fff1c7;
  font-size: var(--text-md);
  font-weight: 900;
}

.p-forest .forest-slot span {
  color: var(--forest-muted);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.35;
}

.p-forest .forest-slot-remove {
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 241, 199, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--forest-text);
  cursor: pointer;
  font-size: var(--text-xs-plus);
  font-weight: 900;
}

.p-forest .forest-actions {
  position: absolute;
  left: 50%;
  bottom: 24px;
  display: flex;
  gap: var(--space-2-5);
  transform: translateX(-50%);
}

.p-forest .forest-start,
.p-forest .forest-cancel {
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 241, 199, 0.42);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 900;
}

.p-forest .forest-start {
  background: linear-gradient(180deg, #8cbf62, #4e7337);
  color: #08120c;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.p-forest .forest-start:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}

.p-forest .forest-start.is-risky {
  background: linear-gradient(180deg, #df9d64, #8b4e38);
}

.p-forest .forest-cancel {
  background: rgba(15, 23, 24, 0.82);
  color: #fff1c7;
}

.p-forest .forest-rating dl {
  display: grid;
  margin: 0;
  padding: 8px 14px 4px;
}

.p-forest .forest-rating dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 13px 0;
  border-bottom: 1px solid rgba(180, 202, 184, 0.14);
}

.p-forest .forest-rating dt,
.p-forest .forest-rating dd {
  margin: 0;
  font-size: var(--text-sm-plus);
  font-weight: 900;
}

.p-forest .forest-rating dt {
  color: var(--forest-muted);
}

.p-forest .forest-rating dd {
  color: var(--forest-green);
  text-align: right;
}

.p-forest .forest-rating-note,
.p-forest .forest-rating-subnote {
  margin: 12px 14px 0;
  border-radius: var(--radius-sm);
}

.p-forest .forest-rating-note {
  padding: 12px;
  background: rgba(130, 191, 115, 0.14);
  color: #dff5cc;
  font-size: 0.9rem;
  font-weight: 900;
}

.p-forest .forest-rating-subnote {
  padding: 10px 12px;
  color: var(--forest-muted);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--text-sm);
  font-weight: 800;
}

.p-forest .forest-roster {
  align-self: start;
}

.p-forest .forest-roster-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: var(--space-2);
  padding: 10px;
}

.p-forest .forest-student {
  min-height: 82px;
  padding: 11px;
}

.p-forest .forest-student.is-selected {
  border-color: var(--forest-line-strong);
  background: rgba(228, 194, 116, 0.15);
}

.p-forest .forest-student.is-good-fit {
  box-shadow: inset 0 0 0 1px rgba(130, 191, 115, 0.2);
}

.p-forest .forest-student.is-unsuitable {
  border-color: rgba(223, 118, 108, 0.46);
}

.p-forest .forest-student.is-gold strong {
  color: #fff1c7;
}

.p-forest .forest-student.is-blue strong {
  color: #b9d8ff;
}

.p-forest .forest-student.is-red strong {
  color: #ffb3aa;
}

.p-forest .forest-empty {
  display: grid;
  gap: 6px;
  padding: 14px;
  color: var(--forest-muted);
}

.p-forest .forest-empty strong {
  color: var(--forest-text);
}

@media (max-width: 1120px) {
  .p-forest .forest-layout {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .p-forest .forest-stage {
    min-height: 520px;
  }

  .p-forest .forest-roster-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .p-forest .forest-head,
.p-forest .forest-head-stats,
.p-forest .forest-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .p-forest .forest-slots {
    grid-template-columns: 1fr;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: 14px;
    transform: none;
  }

  .p-forest .forest-stage {
    min-height: auto;
  }

  .p-forest .forest-actions {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 14px;
    transform: none;
  }
}

/* Forest mission screen: dark reference structure, theme-ready layer. */
.p-forest .forest-screen {
  --forest-bg-image: var(--forest-bg);
  --forest-ui-sprite: url('/assets/forest/forest-ui-atlas-01.jpg?v=20260717');
  --forest-ui-theme-offset-x: 0px;
  --forest-slot-theme-offset-x: 0px;
  --forest-status-theme-offset-x: 0px;
  --forest-surface: rgba(9, 14, 14, 0.96);
  --forest-panel: rgba(13, 21, 20, 0.96);
  --forest-panel-strong: rgba(21, 28, 24, 0.98);
  --forest-paper: #ead9b8;
  --forest-paper-text: #2c2118;
  --forest-text: #f5edd3;
  --forest-muted: rgba(245, 237, 211, 0.68);
  --forest-line: rgba(219, 171, 82, 0.34);
  --forest-line-soft: rgba(219, 171, 82, 0.18);
  --forest-green: #79b85c;
  --forest-blue: #63a6d8;
  --forest-red: #d06a55;
  --forest-gold: #d9aa51;
  --forest-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--space-2-5);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(100svh - 88px);
  overflow-x: hidden;
  box-sizing: border-box;
  color: var(--forest-text);
  background:
    linear-gradient(180deg, rgba(13, 9, 5, 0.92), rgba(3, 8, 7, 0.96)),
    #06100d;
}

.p-forest .forest-theme-dark {
  --forest-surface: rgba(9, 14, 14, 0.96);
  --forest-panel: rgba(13, 21, 20, 0.96);
  --forest-panel-strong: rgba(21, 28, 24, 0.98);
  --forest-text: #f5edd3;
  --forest-muted: rgba(245, 237, 211, 0.68);
  --forest-line: rgba(219, 171, 82, 0.34);
  --forest-line-soft: rgba(219, 171, 82, 0.18);
}

.p-forest .forest-theme-light {
  --forest-ui-theme-offset-x: -320px;
  --forest-slot-theme-offset-x: -682px;
  --forest-status-theme-offset-x: -213px;
  --forest-surface: rgba(244, 229, 194, 0.96);
  --forest-panel: rgba(255, 245, 219, 0.96);
  --forest-panel-strong: rgba(236, 211, 163, 0.98);
  --forest-text: #2b2118;
  --forest-muted: rgba(43, 33, 24, 0.68);
  --forest-line: rgba(124, 83, 38, 0.32);
  --forest-line-soft: rgba(124, 83, 38, 0.18);
  --forest-shadow: 0 18px 42px rgba(75, 48, 22, 0.24);
}

.p-forest .forest-top-filters,
.p-forest .forest-steps,
.p-forest .forest-panel,
.p-forest .forest-side > article {
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(217, 170, 81, 0.12), transparent 42%),
    linear-gradient(180deg, var(--forest-panel-strong), var(--forest-panel));
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 205, 0.04),
    var(--forest-shadow);
}

.p-forest .forest-top-filters {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--space-2-5);
  padding: 8px;
  background:
    linear-gradient(90deg, rgba(217, 170, 81, 0.16), transparent 24%, transparent 76%, rgba(217, 170, 81, 0.16)),
    linear-gradient(180deg, rgba(45, 31, 16, 0.94), rgba(7, 12, 10, 0.98));
}

.p-forest .forest-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: visible;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: rgba(5, 8, 7, 0.38);
}

.p-forest .forest-filter-group strong {
  min-width: 58px;
  color: var(--forest-gold);
  font-size: var(--text-sm);
  font-weight: 900;
  text-align: center;
}

.p-forest .forest-filter-chip {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 5px;
  border: 1px solid var(--forest-line-soft);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(61, 45, 22, 0.7), rgba(12, 18, 15, 0.82));
  color: var(--forest-text);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
}

.p-forest .forest-filter-chip.is-active {
  border-color: rgba(121, 184, 92, 0.7);
  background:
    linear-gradient(180deg, rgba(93, 124, 48, 0.92), rgba(37, 66, 30, 0.92));
  color: #f8edc8;
}

.p-forest .forest-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(36, 26, 13, 0.92), rgba(10, 11, 9, 0.94));
}

.p-forest .forest-step {
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-2-5);
  align-items: center;
  padding: 10px 16px;
  border-right: 1px solid var(--forest-line-soft);
  color: var(--forest-muted);
}

.p-forest .forest-step:last-child {
  border-right: 0;
}

.p-forest .forest-step span {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-pill);
  color: var(--forest-gold);
  font-weight: 900;
}

.p-forest .forest-step strong {
  color: var(--forest-text);
  font-size: 0.96rem;
  font-weight: 900;
}

.p-forest .forest-step small {
  font-size: 0.75rem;
  font-weight: 700;
}

.p-forest .forest-step.is-active {
  background: linear-gradient(90deg, rgba(75, 111, 43, 0.85), rgba(30, 49, 27, 0.36));
  color: #f8edc8;
}

.p-forest .forest-main {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr) minmax(270px, 1fr);
  grid-template-rows: 480px minmax(245px, auto);
  gap: var(--space-2-5);
  align-items: start;
}

.p-forest .forest-main > *,
.p-forest .forest-quest-list,
.p-forest .forest-stage,
.p-forest .forest-side,
.p-forest .forest-roster {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.p-forest .forest-quest-list {
  height: 480px;
  display: flex;
  flex-direction: column;
}

.p-forest .forest-panel-title,
.p-forest .forest-roster-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 12px;
  border-bottom: 1px solid var(--forest-line-soft);
  background:
    linear-gradient(180deg, rgba(75, 54, 24, 0.9), rgba(22, 28, 20, 0.94)),
    rgba(21, 27, 22, 0.9);
}

.p-forest .forest-panel-title strong,
.p-forest .forest-roster-head strong {
  color: var(--forest-gold);
  font-size: 0.86rem;
  font-weight: 900;
}

.p-forest .forest-panel-title span,
.p-forest .forest-roster-head span {
  color: var(--forest-muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.p-forest .forest-quest-scroll {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.p-forest .forest-quest-card {
  height: 104px;
  min-height: 104px;
  display: grid;
  grid-template-columns: 48px 1fr 12px;
  gap: var(--space-2-5);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--forest-line-soft);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, rgba(217, 170, 81, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(23, 34, 29, 0.96), rgba(8, 15, 13, 0.96));
  color: var(--forest-text);
  cursor: pointer;
  text-align: left;
}

.p-forest .forest-quest-card.is-active {
  border-color: rgba(121, 184, 92, 0.75);
  background:
    linear-gradient(90deg, rgba(217, 170, 81, 0.18), transparent 46%),
    linear-gradient(90deg, rgba(49, 82, 34, 0.94), rgba(13, 25, 21, 0.92));
}

.p-forest .forest-quest-card.is-consumed {
  opacity: 0.62;
  background: rgba(255, 255, 255, 0.025);
}

.p-forest .forest-quest-card.is-consumed i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(217, 170, 81, 0.72);
}

.p-forest .forest-quest-card strong,
.p-forest .forest-quest-card small,
.p-forest .forest-quest-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-quest-card strong {
  font-size: var(--text-md);
  font-weight: 900;
}

.p-forest .forest-quest-card small,
.p-forest .forest-quest-card em {
  margin-top: 3px;
  color: var(--forest-muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 800;
}

.p-forest .forest-quest-card .forest-quest-run {
  color: #f7e8bd;
}

.p-forest .forest-quest-progress {
  width: 100%;
  height: 7px;
  margin-top: 5px;
  accent-color: var(--forest-green);
}

.p-forest .forest-quest-icon {
  --forest-icon-x: -14px;
  --forest-icon-y: -725px;
  width: 42px;
  height: 42px;
  margin-left: 8px;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background-color: rgba(12, 20, 17, 0.92);
  background-image: var(--forest-ui-sprite);
  background-position: calc(var(--forest-ui-theme-offset-x) + var(--forest-icon-x)) var(--forest-icon-y);
  background-repeat: no-repeat;
  background-size: 640px 960px;
  box-shadow: inset 0 0 0 1px rgba(255, 239, 186, 0.08);
}

.p-forest .forest-quest-icon--collect,
.p-forest .forest-quest-icon--gathering {
  --forest-icon-x: -73px;
  --forest-icon-y: -725px;
}

.p-forest .forest-quest-icon--search {
  --forest-icon-x: -253px;
  --forest-icon-y: -785px;
}

.p-forest .forest-quest-icon--help {
  --forest-icon-x: -73px;
  --forest-icon-y: -785px;
}

.p-forest .forest-quest-icon--explore,
.p-forest .forest-quest-icon--exploration {
  --forest-icon-x: -14px;
  --forest-icon-y: -725px;
}

.p-forest .forest-quest-icon--retrieve {
  --forest-icon-x: -14px;
  --forest-icon-y: -785px;
}

.p-forest .forest-quest-icon--disturbance,
.p-forest .forest-quest-icon--training {
  --forest-icon-x: -131px;
  --forest-icon-y: -725px;
}

.p-forest .forest-more-quests,
.p-forest .forest-reset,
.p-forest .forest-start {
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 900;
}

.p-forest .forest-more-quests {
  min-height: 38px;
  margin: 0 10px 10px;
  border: 1px solid var(--forest-line-soft);
  background:
    linear-gradient(180deg, rgba(61, 45, 22, 0.7), rgba(12, 18, 15, 0.82));
  color: var(--forest-text);
}

.p-forest .forest-reset-note {
  margin: 0 10px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 170, 81, 0.34);
  border-radius: var(--radius-sm);
  background: rgba(92, 73, 28, 0.24);
  color: #f7e8bd;
  font-size: 0.75rem;
  font-weight: 900;
}

.p-forest .forest-stage {
  position: relative;
  isolation: isolate;
  height: 480px;
  overflow: hidden;
  border: 2px solid rgba(217, 170, 81, 0.46);
  border-radius: var(--radius-sm);
  background: #0f1914;
  box-shadow: var(--forest-shadow);
}

.p-forest .forest-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32)),
    var(--forest-bg-image) center / cover no-repeat;
}

.p-forest .forest-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(217, 170, 81, 0.2), transparent 30%),
    linear-gradient(180deg, transparent 55%, rgba(3, 7, 6, 0.48));
}

.p-forest .forest-stage-title {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 5;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(61, 45, 22, 0.78), rgba(12, 18, 15, 0.82));
  color: #f7e8bd;
  font-size: var(--text-md);
  font-weight: 900;
  transform: translateX(-50%);
}

.p-forest .forest-slot-row {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 2;
  width: min(350px, calc(100% - 36px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  justify-items: center;
  transform: translate(-50%, -50%);
}

.p-forest .forest-slot {
  position: relative;
  width: 100%;
  max-width: 104px;
  aspect-ratio: 0.84;
  min-height: 0;
  display: grid;
  place-items: center;
  gap: var(--space-1);
  padding: 10px 8px 12px;
  overflow: hidden;
  border: 2px solid rgba(217, 170, 81, 0.78);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(217, 170, 81, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(24, 34, 27, 0.97), rgba(8, 14, 12, 0.98));
  color: #f7e8bd;
  box-shadow:
    inset 0 0 0 2px rgba(255, 238, 177, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.34);
  cursor: pointer;
}

.p-forest .forest-slot::before,
.p-forest .forest-slot::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.p-forest .forest-slot::before {
  top: 4px;
  left: 4px;
  border-top: 2px solid var(--forest-gold);
  border-left: 2px solid var(--forest-gold);
}

.p-forest .forest-slot::after {
  right: 4px;
  bottom: 4px;
  border-right: 2px solid var(--forest-gold);
  border-bottom: 2px solid var(--forest-gold);
}

.p-forest .forest-slot-plus {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(217, 170, 81, 0.7);
  border-radius: var(--radius-pill);
  color: var(--forest-gold);
  font-size: 1.65rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.24);
}

.p-forest .forest-slot.is-filled {
  border-color: rgba(121, 184, 92, 0.92);
  background:
    linear-gradient(135deg, rgba(121, 184, 92, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(28, 52, 33, 0.98), rgba(8, 18, 13, 0.98));
}

.p-forest .forest-slot.is-target-slot {
  box-shadow:
    inset 0 0 0 2px rgba(255, 238, 177, 0.12),
    0 0 0 3px rgba(217, 170, 81, 0.25),
    0 12px 24px rgba(0, 0, 0, 0.34);
}

.p-forest .forest-slot.is-drop-target {
  border-color: #f0cf74;
  background: rgba(84, 75, 29, 0.94);
}

.p-forest .forest-slot-portrait {
  width: 62px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(217, 170, 81, 0.28), rgba(45, 79, 44, 0.68));
  color: #07100c;
  font-weight: 900;
}

.p-forest .forest-slot strong {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--text-xs-plus);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-slot small {
  color: var(--forest-muted);
  font-size: 0.64rem;
  font-weight: 900;
}

.p-forest .forest-slot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--forest-line-soft);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.36);
  color: var(--forest-text);
  cursor: pointer;
  font-weight: 900;
}

.p-forest .forest-duo {
  position: absolute;
  left: 50%;
  bottom: 105px;
  z-index: 2;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(121, 184, 92, 0.55);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(50, 86, 39, 0.92), rgba(18, 46, 24, 0.88));
  color: #dff2c5;
  font-size: var(--text-sm);
  font-weight: 900;
  transform: translateX(-50%);
}

.p-forest .forest-selection-notes {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  width: min(440px, calc(100% - 32px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) 10px;
  padding: 9px 12px;
  border: 1px solid rgba(217, 170, 81, 0.52);
  border-radius: 7px;
  background: rgba(8, 15, 12, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%);
}

.p-forest .forest-selection-notes[hidden] {
  display: none;
}

.p-forest .forest-selection-notes > strong {
  grid-column: 1 / -1;
  color: #f7e8bd;
  font-size: 0.76rem;
}

.p-forest .forest-selection-notes p {
  display: contents;
  margin: 0;
}

.p-forest .forest-selection-notes span,
.p-forest .forest-selection-notes b {
  font-size: var(--text-xs);
  line-height: 1.25;
}

.p-forest .forest-selection-notes span {
  font-weight: 900;
}

.p-forest .forest-selection-notes .is-pro span {
  color: #9bd47d;
}

.p-forest .forest-selection-notes .is-con span {
  color: #e08a75;
}

.p-forest .forest-selection-notes b {
  overflow: hidden;
  color: var(--forest-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-side {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.p-forest .forest-side > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.p-forest .forest-side > article {
  overflow: hidden;
}

.p-forest .forest-side [data-forest-side-panel].is-tab-focus {
  outline: 2px solid rgba(217, 170, 81, 0.72);
  outline-offset: 2px;
}

.p-forest .forest-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--forest-line-soft);
}

.p-forest .forest-tabs button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid var(--forest-line-soft);
  background:
    linear-gradient(180deg, rgba(61, 45, 22, 0.62), rgba(12, 18, 15, 0.72));
  color: var(--forest-muted);
  cursor: pointer;
  font-weight: 900;
}

.p-forest .forest-tabs button:last-child {
  border-right: 0;
}

.p-forest .forest-tabs button.is-active {
  background:
    linear-gradient(180deg, rgba(83, 113, 47, 0.86), rgba(30, 58, 29, 0.82));
  color: #f7e8bd;
}

.p-forest .forest-info-body {
  display: grid;
  gap: 9px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 248, 226, 0.72), rgba(220, 194, 146, 0.28)),
    var(--forest-paper);
  color: var(--forest-paper-text);
}

.p-forest .forest-info-icon {
  width: 50px;
  height: 50px;
  border: 3px solid #8f6230;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 50% 50%, #8f6230 0 18%, transparent 19%),
    radial-gradient(circle at 36% 42%, #8f6230 0 8%, transparent 9%),
    radial-gradient(circle at 64% 42%, #8f6230 0 8%, transparent 9%),
    #ecd8ad;
}

.p-forest .forest-info-body h2,
.p-forest .forest-info-body h3,
.p-forest .forest-info-body p,
.p-forest .forest-info-body ul {
  margin: 0;
}

.p-forest .forest-info-body h2 {
  font-size: 1.35rem;
  font-weight: 900;
}

.p-forest .forest-info-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm-plus);
  font-weight: 800;
}

.p-forest .forest-info-body p,
.p-forest .forest-info-body li {
  font-size: var(--text-sm-plus);
  line-height: 1.35;
}

.p-forest .forest-info-body h3 {
  margin-top: 4px;
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.p-forest .forest-info-body ul {
  padding-left: 18px;
}

.p-forest .forest-reward-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: 12px;
}

.p-forest .forest-reward-grid span,
.p-forest .forest-reward-box {
  min-height: 92px;
  display: grid;
  grid-template-rows: 52px auto auto;
  gap: 2px;
  place-items: center;
  padding: 6px 4px;
  border: 1px solid var(--forest-line-soft);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 24%, rgba(217, 170, 81, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(42, 31, 18, 0.86), rgba(11, 17, 14, 0.86));
  color: var(--forest-text);
  font-size: 0.75rem;
  font-weight: 900;
  text-align: center;
}

.p-forest .forest-reward-box i {
  --forest-reward-icon-position: 0% center;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url('/assets/forest/forest-reward-icons-v1.png?v=20260717');
  background-position: var(--forest-reward-icon-position);
  background-repeat: no-repeat;
  background-size: 600% auto;
  color: transparent;
  font-size: 0;
  font-style: normal;
  font-weight: 900;
}

.p-forest .forest-reward-box strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--forest-text);
  font-size: 0.7rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-reward-box small {
  color: var(--forest-muted);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1.1;
}

.p-forest .forest-reward-box.reward-xp i,
.p-forest .forest-reward-box.reward-blue i {
  border-color: rgba(99, 166, 216, 0.64);
  color: #cfeaff;
}

.p-forest .forest-reward-box.reward-xp i {
  --forest-reward-icon-position: 0% center;
}

.p-forest .forest-reward-box.reward-gold i {
  --forest-reward-icon-position: 20% center;
  border-color: rgba(217, 170, 81, 0.76);
  color: #ffe3a8;
}

.p-forest .forest-reward-box.reward-green i {
  --forest-reward-icon-position: 40% center;
  border-color: rgba(121, 184, 92, 0.72);
  color: #dff2c5;
}

.p-forest .forest-reward-box.reward-brown i {
  --forest-reward-icon-position: 60% center;
}

.p-forest .forest-reward-box.reward-blue i {
  --forest-reward-icon-position: 80% center;
}

.p-forest .forest-reward-box.reward-muted i {
  --forest-reward-icon-position: 100% center;
}

.p-forest .forest-rating-card {
  display: grid;
}

.p-forest .forest-rating-row {
  --forest-status-x: -88px;
  --forest-status-y: -568px;
  display: grid;
  grid-template-columns: 26px 54px 1fr 64px;
  gap: var(--space-2);
  align-items: center;
  padding: 10px 12px;
}

.p-forest .forest-rating-row::before {
  content: "";
  width: 26px;
  height: 26px;
  background-image: var(--forest-ui-sprite);
  background-position: calc(var(--forest-status-theme-offset-x) + var(--forest-status-x)) var(--forest-status-y);
  background-repeat: no-repeat;
  background-size: 427px 640px;
}

.p-forest .forest-rating-row--strength {
  --forest-status-x: -88px;
  --forest-status-y: -568px;
}

.p-forest .forest-rating-row--risk {
  --forest-status-x: -10px;
  --forest-status-y: -568px;
}

.p-forest .forest-rating-row--duration {
  --forest-status-x: -127px;
  --forest-status-y: -568px;
}

.p-forest .forest-rating-row span,
.p-forest .forest-rating-row strong {
  font-size: var(--text-sm);
  font-weight: 900;
}

.p-forest .forest-rating-row meter {
  width: 100%;
  height: 12px;
  background:
    rgba(255, 255, 255, 0.05);
}

.p-forest .forest-start-card {
  display: grid;
  gap: var(--space-2);
  padding: 12px;
}

.p-forest .forest-start-card form {
  display: grid;
}

.p-forest .forest-start {
  min-height: 50px;
  border: 1px solid rgba(217, 170, 81, 0.72);
  background:
    linear-gradient(180deg, #1f6fa4, #123a5c);
  color: #f4ead1;
  font-size: 1.05rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 205, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.26);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

.p-forest .forest-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.p-forest .forest-reset {
  min-height: 34px;
  border: 1px solid var(--forest-line-soft);
  background:
    linear-gradient(180deg, rgba(61, 45, 22, 0.7), rgba(12, 18, 15, 0.82));
  color: var(--forest-muted);
}

.p-forest .forest-start-card p {
  margin: 0;
  color: var(--forest-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.p-forest .forest-run-card {
  display: grid;
  gap: var(--space-2);
  padding-bottom: 12px;
}

.p-forest .forest-run-list {
  order: 8;
  display: grid;
  gap: var(--space-2-5);
}

.p-forest .forest-run-card h3,
.p-forest .forest-run-card p,
.p-forest .forest-run-card small {
  margin: 0 12px;
}

.p-forest .forest-run-card h3 {
  color: var(--forest-text);
  font-size: 0.98rem;
  font-weight: 900;
}

.p-forest .forest-run-card > strong {
  margin: 0 12px;
  color: #f7e8bd;
  font-size: 0.9rem;
}

.p-forest .forest-run-card p,
.p-forest .forest-run-card small {
  color: var(--forest-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.p-forest .forest-run-card form {
  display: grid;
  margin: 2px 12px 0;
}

.p-forest .forest-run-progress-row {
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: var(--space-2);
  align-items: center;
  margin: 0 12px;
}

.p-forest .forest-run-progress-row progress {
  width: 100%;
  height: 10px;
  accent-color: var(--forest-green);
  background:
    rgba(255, 255, 255, 0.05);
}

.p-forest .forest-run-progress-row span {
  color: var(--forest-muted);
  font-size: var(--text-xs-plus);
  font-weight: 900;
  text-align: right;
}

.p-forest .forest-run-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 12px;
}

.p-forest .forest-run-items .forest-reward-box {
  min-width: 76px;
  min-height: 92px;
  padding: 6px 4px;
}

.p-forest .forest-run-items span:not(.forest-reward-box) {
  padding: 5px 8px;
  border: 1px solid rgba(121, 184, 92, 0.42);
  border-radius: var(--radius-pill);
  background: rgba(38, 75, 37, 0.4);
  color: #dff2c5;
  font-size: var(--text-xs-plus);
  font-weight: 900;
}

.p-forest .forest-run-items--malus span:not(.forest-reward-box) {
  border-color: rgba(207, 96, 72, 0.46);
  background: rgba(100, 40, 34, 0.42);
  color: #ffd8cb;
}

.p-forest .forest-event-card {
  order: 7;
  min-height: 140px;
}

.p-forest .forest-event-list {
  display: grid;
  gap: 5px;
  max-height: 132px;
  overflow: hidden;
  padding: 10px 12px;
}

.p-forest .forest-event-list p {
  margin: 0;
  overflow: hidden;
  color: var(--forest-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-tip-card {
  order: 6;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--space-2-5);
  align-items: center;
  padding: 12px;
  border: 1px solid var(--forest-line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(217, 170, 81, 0.12), transparent 48%),
    rgba(13, 21, 20, 0.96);
  box-shadow: var(--forest-shadow);
}

.p-forest .forest-side > article.forest-tip-card {
  background:
    linear-gradient(135deg, rgba(217, 170, 81, 0.12), transparent 48%),
    rgba(13, 21, 20, 0.96);
}

.p-forest .forest-owl {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 4px;
  background-image: var(--forest-ui-sprite);
  background-position: calc(var(--forest-ui-theme-offset-x) - 11px) -510px;
  background-repeat: no-repeat;
  background-size: 640px 960px;
}

.p-forest .forest-tip-card strong,
.p-forest .forest-tip-card p {
  margin: 0;
}

.p-forest .forest-tip-card strong {
  color: #f7e8bd;
  font-size: 0.9rem;
  font-weight: 900;
}

.p-forest .forest-tip-card p {
  margin-top: 4px;
  color: var(--forest-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.p-forest .forest-roster {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: start;
  min-height: 245px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.p-forest .forest-roster-filters {
  display: grid;
  grid-template-columns: 120px 130px minmax(160px, 1fr) 150px;
  gap: var(--space-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--forest-line-soft);
}

.p-forest .forest-roster-filters button,
.p-forest .forest-roster-filters input {
  min-height: 32px;
  border: 1px solid var(--forest-line-soft);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(61, 45, 22, 0.7), rgba(12, 18, 15, 0.82));
  color: var(--forest-text);
  font-size: 0.76rem;
  font-weight: 800;
}

.p-forest .forest-roster-filters input {
  padding: 0 10px;
}

.p-forest .forest-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--space-2);
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.p-forest .forest-student-card {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-rows: 72px auto auto auto;
  gap: var(--space-1);
  justify-items: center;
  padding: 8px;
  border: 2px solid var(--forest-blue);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 20%, rgba(99, 166, 216, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(27, 37, 36, 0.94), rgba(9, 15, 14, 0.96));
  color: var(--forest-text);
  cursor: pointer;
}

.p-forest .forest-student-card.fit-good {
  border-color: var(--forest-green);
  background:
    radial-gradient(circle at 50% 20%, rgba(121, 184, 92, 0.2), transparent 35%),
    linear-gradient(180deg, rgba(28, 45, 31, 0.94), rgba(9, 15, 14, 0.96));
}

.p-forest .forest-student-card.fit-ok {
  border-color: var(--forest-blue);
  background:
    radial-gradient(circle at 50% 20%, rgba(99, 166, 216, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(27, 37, 36, 0.94), rgba(9, 15, 14, 0.96));
}

.p-forest .forest-student-card.fit-risk {
  border-color: var(--forest-red);
  background:
    radial-gradient(circle at 50% 20%, rgba(208, 106, 85, 0.2), transparent 35%),
    linear-gradient(180deg, rgba(49, 29, 26, 0.94), rgba(16, 13, 12, 0.96));
}

.p-forest .forest-student-card.fit-locked {
  border-color: rgba(173, 162, 141, 0.44);
  background:
    radial-gradient(circle at 50% 20%, rgba(173, 162, 141, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(31, 32, 30, 0.94), rgba(12, 13, 12, 0.96));
}

.p-forest .forest-student-card.is-selected {
  box-shadow: 0 0 0 3px rgba(217, 170, 81, 0.28);
}

.p-forest .forest-student-card.is-locked {
  border-color: rgba(165, 165, 157, 0.34);
  background: linear-gradient(180deg, rgba(42, 43, 40, 0.98), rgba(14, 15, 14, 0.98));
  color: rgba(236, 236, 228, 0.62);
  cursor: not-allowed;
}

.p-forest .forest-student-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(214, 214, 205, 0.34);
  border-radius: 7px;
  pointer-events: none;
}

.p-forest .forest-student-card.is-locked::before {
  display: none;
}

.p-forest .forest-student-portrait {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #274426, #815d35);
}

.p-forest .forest-student-portrait > span {
  color: #0f1914;
  font-size: 1.5rem;
  font-weight: 900;
}

.p-forest .forest-student-card.is-locked .forest-student-avatar {
  opacity: 0.34;
  filter: grayscale(1) contrast(0.78);
}

.p-forest .forest-student-card.is-locked strong,
.p-forest .forest-student-card.is-locked small {
  color: rgba(230, 230, 220, 0.52);
}

.p-forest .forest-student-lock {
  position: absolute;
  z-index: 4;
  top: 58px;
  left: 50%;
  max-width: calc(100% - 12px);
  padding: 3px 6px;
  border: 1px solid rgba(226, 226, 216, 0.4);
  border-radius: 4px;
  background: rgba(8, 9, 8, 0.9);
  color: #e0dfd4;
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.p-forest .forest-student-avatar {
  position: relative;
  width: 62px;
  height: 76px;
  display: block;
  overflow: hidden;
  --classroom-skin-sprite: url("/assets/classroom_skin_sprite_100x100.png");
  --classroom-hair-sprite: url("/assets/classroom_hair_sprite_100x100.png");
  --classroom-face-sprite: url("/assets/classroom_face_emotions_100x100.png");
  --classroom-character-sheet-size: 500px 400px;
  --classroom-body-cloth-sprite: url("/assets/classroom_body_cloth_sprite_100x130.png");
  --classroom-body-skin-sprite: url("/assets/classroom_body_skin_sprite_100x130.png");
  --classroom-body-line-sprite: url("/assets/classroom_body_line_sprite_100x130.png");
  --classroom-body-sheet-size: 500px 400px;
  --character-head-scale: 1.15;
}

.p-forest .forest-student-avatar.is-slot-avatar {
  transform: scale(0.92);
  transform-origin: 50% 100%;
}

.p-forest .forest-avatar-body {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: 100px;
  height: 130px;
  transform: translate(calc(-50% + var(--character-body-offset-x, 0px)), var(--character-body-offset-y, 0px)) scale(var(--character-body-scale, 0.68));
  transform-origin: 50% 0;
}

.p-forest .forest-avatar-body-cloth,
.p-forest .forest-avatar-body-skin,
.p-forest .forest-avatar-body-line {
  position: absolute;
  inset: 0;
  background-position: var(--character-body-sprite-position, 0px 0px);
  background-repeat: no-repeat;
  background-size: var(--classroom-body-sheet-size);
}

.p-forest .forest-avatar-body-cloth {
  z-index: 0;
  background-image: var(--classroom-body-cloth-sprite);
  filter: var(--character-outfit-filter, none);
}

.p-forest .forest-avatar-body-skin {
  z-index: 1;
  background-image: var(--classroom-body-skin-sprite);
  filter: var(--character-body-skin-filter, var(--character-skin-filter, none));
}

.p-forest .forest-avatar-body-line {
  z-index: 2;
  background-image: var(--classroom-body-line-sprite);
}

.p-forest .forest-avatar-head {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: translate(var(--character-head-offset-x, 0px), var(--character-head-offset-y, 0px)) rotate(var(--character-head-rotate, 0deg)) scale(var(--character-head-scale, 1));
  transform-origin: var(--character-head-transform-origin, 50% 50%);
}

.p-forest .forest-avatar-hair,
.p-forest .forest-avatar-skin,
.p-forest .forest-avatar-face {
  position: absolute;
  left: 50%;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: var(--classroom-character-sheet-size);
}

.p-forest .forest-avatar-hair {
  z-index: 1;
  top: 27px;
  transform: translate(calc(-50% + var(--character-hair-offset-x, 0px)), calc(-50% + var(--character-hair-offset-y, 0px))) scale(var(--character-hair-scale, 0.58));
  background-image: var(--classroom-hair-sprite);
  background-position: var(--character-hair-sprite-position, 0px 0px);
  clip-path: inset(var(--character-hair-clip-top, 0px) 0 0 0);
  filter: var(--character-hair-filter, none);
}

.p-forest .forest-avatar-skin {
  z-index: 2;
  top: 27px;
  transform: translate(calc(-50% + var(--character-skin-offset-x, 0px)), calc(-50% + var(--character-skin-offset-y, 0px))) scale(var(--character-skin-scale, 0.58));
  background-image: var(--classroom-skin-sprite);
  background-position: var(--character-skin-sprite-position, 0px 0px);
  filter: var(--character-skin-filter, none);
}

.p-forest .forest-avatar-face {
  z-index: 3;
  top: 31px;
  transform: translate(calc(-50% + var(--character-face-offset-x, 0px)), calc(-50% + var(--character-face-offset-y, 0px))) scale(var(--character-face-scale, 0.46));
  background-image: var(--classroom-face-sprite);
  background-position: var(--character-face-sprite-position, -200px 0px);
}

.p-forest .forest-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #d9aa51, #2d4f2c);
  color: #07100c;
  font-size: 1.35rem;
  font-weight: 900;
}

.p-forest .forest-student-card strong,
.p-forest .forest-student-card small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-student-card strong {
  font-size: var(--text-sm);
  font-weight: 900;
}

.p-forest .forest-student-card small {
  color: var(--forest-muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.p-forest .forest-student-card .forest-student-signal {
  color: rgba(247, 232, 189, 0.82);
  font-size: 0.64rem;
}

.p-forest .forest-student-card em {
  position: absolute;
  right: 6px;
  bottom: 6px;
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(12, 15, 12, 0.82);
  color: #f7e8bd;
  font-size: var(--text-xs-plus);
  font-style: normal;
  font-weight: 900;
}

.p-forest .forest-empty {
  padding: 12px;
  color: var(--forest-muted);
}

.p-forest .forest-empty strong {
  display: block;
  color: var(--forest-text);
}

@media (max-width: 1100px) {
  .p-forest .forest-top-filters,
.p-forest .forest-main,
.p-forest .forest-steps {
    grid-template-columns: 1fr;
  }

  .p-forest .forest-main {
    grid-template-rows: auto auto auto auto;
  }

  .p-forest .forest-side,
.p-forest .forest-roster {
    grid-column: auto;
    grid-row: auto;
  }

  .p-forest .forest-stage {
    min-height: 520px;
  }

  .p-forest .forest-roster-filters {
    grid-template-columns: 1fr;
  }
}


/* Forest screen corrections. Kept separate from the shared application skin. */
body.p-forest.game-body .site-shell {
  width: min(1580px, calc(100% - 24px));
  overflow-x: clip;
}

.p-forest .forest-screen {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(217, 170, 81, 0.32);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.p-forest .forest-top-filters {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr) minmax(0, 1.05fr);
  gap: var(--space-2);
  overflow: hidden;
}

.p-forest .forest-filter-group {
  min-width: 0;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(217, 170, 81, 0.34);
  border-left-width: 3px;
  background: rgba(4, 8, 7, 0.68);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 199, 0.03);
}

.p-forest .forest-filter-group strong {
  min-width: 52px;
  flex: 0 0 52px;
  font-size: 0.7rem;
}

.p-forest .forest-filter-chip {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 4px;
  overflow: hidden;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forest .forest-steps {
  border-color: rgba(217, 170, 81, 0.48);
}

.p-forest .forest-step {
  border-right: 2px solid rgba(217, 170, 81, 0.38);
  background: rgba(4, 8, 7, 0.34);
}

.p-forest .forest-step.is-active {
  box-shadow: inset 0 0 0 1px rgba(143, 190, 94, 0.22);
}

.p-forest .forest-main {
  grid-template-columns: minmax(205px, 0.76fr) minmax(0, 2.65fr) minmax(250px, 0.9fr);
  grid-template-rows: 520px minmax(245px, auto);
}

.p-forest .forest-quest-list,
.p-forest .forest-stage {
  height: 520px;
}

.p-forest .forest-stage {
  border-width: 1px;
}

.p-forest .forest-bg {
  inset: -6%;
}

.p-forest .forest-screen.is-positive {
  --forest-charisma-rgb: 255, 211, 105;
}

.p-forest .forest-screen.is-negative {
  --forest-charisma-rgb: 118, 38, 68;
}

.p-forest .forest-stage::after {
  background:
    linear-gradient(135deg, rgba(var(--forest-charisma-rgb, 255, 255, 255), var(--forest-charisma-alpha, 0)), transparent 58%),
    radial-gradient(circle at 50% 45%, rgba(217, 170, 81, 0.2), transparent 30%),
    linear-gradient(180deg, transparent 55%, rgba(3, 7, 6, 0.48));
}

.p-forest .forest-quest-card {
  grid-template-columns: 46px minmax(0, 1fr) 8px;
  gap: var(--space-2);
  padding: 8px 6px;
  box-sizing: border-box;
}

.p-forest .forest-quest-card > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
}

.p-forest .forest-quest-icon {
  --forest-quest-icon-position: 0% center;
  width: 42px;
  height: 42px;
  margin: 0;
  border-color: rgba(217, 170, 81, 0.38);
  background-color: rgba(10, 17, 14, 0.88);
  background-image: url('/assets/forest/forest-reward-icons-v1.png?v=20260717b');
  background-position: var(--forest-quest-icon-position);
  background-repeat: no-repeat;
  background-size: 600% auto;
}

.p-forest .forest-quest-icon--collect,
.p-forest .forest-quest-icon--gathering {
  --forest-quest-icon-position: 40% center;
}

.p-forest .forest-quest-icon--search {
  --forest-quest-icon-position: 80% center;
}

.p-forest .forest-quest-icon--help,
.p-forest .forest-quest-icon--training {
  --forest-quest-icon-position: 60% center;
}

.p-forest .forest-quest-icon--explore,
.p-forest .forest-quest-icon--exploration {
  --forest-quest-icon-position: 0% center;
}

.p-forest .forest-quest-icon--retrieve {
  --forest-quest-icon-position: 100% center;
}

.p-forest .forest-quest-icon--disturbance {
  --forest-quest-icon-position: 80% center;
}

.p-forest .forest-tab-card {
  display: block;
  min-height: 250px;
}

.p-forest .forest-tabs {
  border-bottom: 2px solid rgba(217, 170, 81, 0.42);
}

.p-forest .forest-tabs button {
  border-right: 1px solid rgba(217, 170, 81, 0.42);
}

.p-forest .forest-tabs button.is-active {
  box-shadow: inset 0 -3px 0 rgba(160, 205, 105, 0.72);
}

.p-forest .forest-tab-panel {
  min-width: 0;
}

.p-forest .forest-tab-panel[hidden] {
  display: none;
}

.p-forest .forest-tab-panel.is-active {
  display: block;
}

.p-forest .forest-tab-panel .forest-info-body {
  min-height: 235px;
  box-sizing: border-box;
}

.p-forest .forest-tab-panel.forest-reward-card {
  min-height: 235px;
  padding: 10px;
  box-sizing: border-box;
}

.p-forest .forest-tab-panel .forest-reward-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2-5);
  padding: 0;
}

.p-forest .forest-reward-box {
  min-width: 0;
  border-color: rgba(217, 170, 81, 0.38);
  background:
    radial-gradient(circle at 50% 28%, rgba(217, 170, 81, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(34, 29, 19, 0.92), rgba(8, 14, 12, 0.96));
}

.p-forest .forest-reward-box i {
  width: 48px;
  height: 48px;
  background-image: url('/assets/forest/forest-reward-icons-v1.png?v=20260717b');
  background-position: var(--forest-reward-icon-position);
  background-size: 600% auto;
}

.p-forest .forest-tab-panel.forest-rating-card {
  min-height: 235px;
  align-content: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.p-forest .forest-tab-panel.forest-rating-card.is-active {
  display: grid;
}

.p-forest .forest-student-avatar.is-image {
  border-radius: 7px;
  background: #101812;
}

.p-forest .forest-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.p-forest .forest-rating-row {
  grid-template-columns: 26px 52px minmax(62px, 1fr) 68px;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  box-sizing: border-box;
}

.p-forest .forest-rating-row::before {
  justify-self: center;
}

.p-forest .forest-rating-row meter {
  min-width: 0;
}

.p-forest .forest-rating-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  body.p-forest.game-body .site-shell {
    width: min(100% - 12px, 100%);
  }

  .p-forest .forest-top-filters,
.p-forest .forest-main,
.p-forest .forest-steps {
    grid-template-columns: 1fr;
  }

  .p-forest .forest-filter-group {
    flex-wrap: wrap;
    overflow: visible;
  }

  .p-forest .forest-filter-chip {
    flex: 0 1 auto;
  }

  .p-forest .forest-main {
    grid-template-rows: auto auto auto auto;
  }

  .p-forest .forest-quest-list,
.p-forest .forest-stage {
    height: auto;
  }

  .p-forest .forest-stage {
    min-height: 520px;
  }
}
}

/* SOURCE: 40-screens/classroom.css */
/* =========================================================
   SCREEN: Classroom
   Scope: .p-classroom only
   Root: .p-classroom
   PHP: game/school.php; JS: game-classroom*.js
   ========================================================= */

@layer screens {
/* Classroom live layout: one consolidated layer, 2026-05-14. */
.p-classroom .game-stage-card--classroom,
.p-classroom .game-classroom-shell {
  --classroom-bg: #070d17;
  --classroom-bg-soft: #0d1725;
  --classroom-panel: rgba(15, 25, 39, 0.94);
  --classroom-panel-soft: rgba(22, 34, 51, 0.92);
  --classroom-panel-lit: rgba(34, 48, 70, 0.92);
  --classroom-line: rgba(141, 163, 198, 0.22);
  --classroom-line-strong: rgba(160, 184, 222, 0.35);
  --classroom-text: #edf4ff;
  --classroom-muted: rgba(216, 226, 242, 0.7);
  --classroom-dim: rgba(154, 174, 205, 0.56);
  --classroom-red: #ef667c;
  --classroom-red-soft: rgba(239, 102, 124, 0.16);
  --classroom-gold: #f0bd67;
  --classroom-gold-soft: rgba(240, 189, 103, 0.17);
  --classroom-blue: #78bfff;
  --classroom-blue-soft: rgba(120, 191, 255, 0.16);
  --classroom-green: #7ddaa6;
  --classroom-green-soft: rgba(125, 218, 166, 0.14);
  --classroom-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  color: var(--classroom-text);
}

.p-classroom .game-stage-card--classroom {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(113, 138, 177, 0.18);
  background: radial-gradient(circle at 50% -15%, rgba(52, 76, 110, 0.22), transparent 42%), var(--classroom-bg);
  box-shadow: 0 28px 80px rgba(2, 7, 14, 0.44);
}

.p-classroom .game-stage-card--classroom .game-stage-topline {
  display: none;
}

.p-classroom .game-classroom-shell {
  width: 100%;
  min-height: calc(100vh - 20px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2-5);
  padding: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(120, 191, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(11, 18, 30, 0.98), rgba(5, 10, 18, 0.98));
}

.p-classroom .game-classroom-shell *,
.p-classroom .game-classroom-shell *::before,
.p-classroom .game-classroom-shell *::after {
  box-sizing: border-box;
}

.p-classroom .game-classroom-shell [hidden] {
  display: none;
}

.p-classroom .game-classroom-shell .game-room-emotion-tone {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 1px solid rgba(156, 181, 219, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(21, 34, 51, 0.72);
  color: var(--classroom-text);
  line-height: 1;
}

.p-classroom .game-classroom-shell .game-room-emotion-tone.is-red,
.p-classroom .game-classroom-shell .is-red > .game-room-emotion-tone {
  border-color: rgba(239, 102, 124, 0.38);
  background: var(--classroom-red-soft);
  color: #ffd8df;
}

.p-classroom .game-classroom-shell .game-room-emotion-tone.is-gold,
.p-classroom .game-classroom-shell .is-gold > .game-room-emotion-tone {
  border-color: rgba(240, 189, 103, 0.4);
  background: var(--classroom-gold-soft);
  color: #ffe1a7;
}

.p-classroom .game-classroom-shell .game-room-emotion-tone.is-blue,
.p-classroom .game-classroom-shell .is-blue > .game-room-emotion-tone {
  border-color: rgba(120, 191, 255, 0.38);
  background: var(--classroom-blue-soft);
  color: #d7ecff;
}

.p-classroom .game-classroom-shell .game-room-emotion-tone.is-white {
  color: rgba(234, 241, 252, 0.88);
}

.p-classroom .game-classroom-hud {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(150px, 0.76fr) repeat(5, minmax(120px, 1fr));
  gap: var(--space-2-5);
  align-items: stretch;
}

.p-classroom .game-classroom-hud-block {
  min-width: 0;
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 15px;
  overflow: hidden;
  border: 1px solid var(--classroom-line);
  border-radius: var(--radius-sm-plus);
  background: linear-gradient(180deg, rgba(22, 33, 50, 0.96), rgba(14, 24, 39, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.p-classroom .game-classroom-hud-block + .game-classroom-hud-block::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 1px;
  background: rgba(154, 176, 211, 0.16);
}

.p-classroom .game-classroom-hud-block--brand,
.p-classroom .game-classroom-hud-block--tick {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.p-classroom .game-classroom-hud-brand {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.p-classroom .game-classroom-hud-brand::before {
  content: "";
  width: 32px;
  height: 38px;
  border: 1px solid rgba(239, 102, 124, 0.55);
  border-radius: var(--radius-sm) 8px 12px 12px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.28) 52%, transparent 53%),
    linear-gradient(180deg, rgba(239, 102, 124, 0.9), rgba(98, 38, 64, 0.95));
  box-shadow: 0 0 18px rgba(239, 102, 124, 0.18);
  clip-path: polygon(50% 0, 100% 10%, 90% 78%, 50% 100%, 10% 78%, 0 10%);
}

.p-classroom .game-classroom-hud-brand-title,
.p-classroom .game-classroom-hud-label,
.p-classroom .game-panel-label,
.p-classroom .game-stage-eyebrow {
  color: rgba(222, 231, 246, 0.78);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.p-classroom .game-classroom-hud-brand-meta {
  display: grid;
  gap: var(--space-1);
}

.p-classroom .game-classroom-hud-time,
.p-classroom .game-classroom-hud-block strong {
  color: var(--classroom-text);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.12;
}

.p-classroom .game-classroom-hud-time {
  white-space: nowrap;
}

.p-classroom .game-classroom-hud-day,
.p-classroom .game-classroom-hud-remaining,
.p-classroom .game-classroom-hud-block small,
.p-classroom .game-panel-note {
  color: var(--classroom-muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.p-classroom .game-classroom-hud-day {
  display: none;
}

.p-classroom .game-classroom-hud-block--tick {
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 13px;
  border-color: rgba(239, 102, 124, 0.56);
  background: linear-gradient(180deg, rgba(89, 33, 49, 0.95), rgba(42, 21, 36, 0.94));
  box-shadow: 0 0 0 1px rgba(239, 102, 124, 0.16), inset 0 0 22px rgba(239, 102, 124, 0.16);
}

.p-classroom .game-classroom-hud-block--tick::after {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 42px;
  height: 42px;
  align-self: center;
  border: 3px solid rgba(255, 238, 242, 0.86);
  border-right-color: rgba(255, 238, 242, 0.32);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(239, 102, 124, 0.12);
}

.p-classroom .game-classroom-hud-block--tick .game-classroom-hud-label,
.p-classroom .game-classroom-hud-block--tick .game-classroom-hud-tick {
  grid-column: 2;
}

.p-classroom .game-classroom-hud-tick {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffb3c0;
  font-size: 1.85rem;
  line-height: 0.95;
}

.p-classroom .game-classroom-board-frame {
  min-width: 0;
  min-height: calc(100vh - 118px);
  display: grid;
  grid-template-columns: 266px minmax(0, 1fr);
  gap: var(--space-2-5);
  align-items: stretch;
  overflow: hidden;
}

.p-classroom .game-classroom-rail,
.p-classroom .game-classroom-main,
.p-classroom .game-classroom-sidepane,
.p-classroom .game-classroom-stage-pane,
.p-classroom .game-classroom-seat-zone {
  min-width: 0;
}

.p-classroom .game-classroom-main {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 392px;
  gap: var(--space-2-5);
  align-items: stretch;
  overflow: hidden;
}

.p-classroom .game-classroom-rail,
.p-classroom .game-classroom-sidepane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 161, 205, 0.36) transparent;
}

.p-classroom .game-classroom-sidepane {
  max-height: calc(100vh - 118px);
}

.p-classroom .game-classroom-side-card,
.p-classroom .game-classroom-stage-pane {
  border: 1px solid var(--classroom-line);
  border-radius: var(--radius-sm-plus);
  background: linear-gradient(180deg, rgba(18, 29, 45, 0.96), rgba(10, 18, 31, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.p-classroom .game-classroom-side-card {
  display: grid;
  gap: var(--space-2-5);
  padding: 14px;
}

.p-classroom .game-classroom-side-card .game-panel-head,
.p-classroom .game-classroom-stage-header,
.p-classroom .game-classroom-chain-top,
.p-classroom .game-classroom-builder-top,
.p-classroom .game-classroom-seat-contact-head,
.p-classroom .game-classroom-seat-preview-head,
.p-classroom .game-classroom-desk-top {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
}

.p-classroom .game-classroom-side-card p,
.p-classroom .game-classroom-side-card small,
.p-classroom .game-classroom-chain-meta,
.p-classroom .game-classroom-live-note p,
.p-classroom .game-classroom-spillover p,
.p-classroom .game-classroom-presence-card p,
.p-classroom .game-classroom-builder-copy p,
.p-classroom .game-classroom-break-item p,
.p-classroom .game-classroom-seat-action p,
.p-classroom .game-classroom-console-focus small,
.p-classroom .game-classroom-console-note {
  margin: 0;
  color: var(--classroom-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.p-classroom .game-classroom-side-card--schedule {
  min-height: 0;
}

.p-classroom .game-classroom-schedule {
  position: relative;
  display: grid;
  gap: var(--space-2-5);
  padding-left: 0;
}

.p-classroom .game-classroom-schedule-line {
  position: absolute;
  z-index: 2;
  left: -14px;
  top: var(--schedule-line-top, 0%);
  width: 3px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--classroom-red);
  box-shadow: 0 0 18px rgba(239, 102, 124, 0.48);
}

.p-classroom .game-classroom-schedule-line::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 9px solid var(--classroom-red);
}

.p-classroom .game-classroom-schedule-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(134, 156, 190, 0.16);
  border-radius: 9px;
  background: rgba(28, 41, 60, 0.72);
}

.p-classroom .game-classroom-schedule-row strong,
.p-classroom .game-classroom-schedule-row small {
  display: block;
}

.p-classroom .game-classroom-schedule-row strong {
  color: var(--classroom-text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.p-classroom .game-classroom-schedule-row small {
  margin-top: 8px;
  color: var(--classroom-dim);
  font-size: 0.79rem;
}

.p-classroom .game-classroom-schedule-row.is-active {
  border-color: rgba(239, 102, 124, 0.72);
  background: linear-gradient(180deg, rgba(100, 46, 62, 0.7), rgba(61, 31, 46, 0.72));
  box-shadow: inset 3px 0 0 var(--classroom-red), 0 0 0 1px rgba(239, 102, 124, 0.1);
}

.p-classroom .game-classroom-schedule-row.is-past {
  opacity: 0.56;
}

.p-classroom .game-classroom-stage-pane {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100vh - 118px);
  overflow: hidden;
}

.p-classroom .game-classroom-stage-header {
  display: none;
}

.p-classroom .game-classroom-seat-zone {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-sm-plus) 10px 0 0;
  background: #4f3929;
  --seat-stage-fit: 1;
  --classroom-desk-sprite-size: 100% 100%;
  --classroom-character-sprite-size: auto;
  --classroom-skin-sprite: url("/assets/classroom_skin_sprite_100x100.png");
  --classroom-hair-sprite: url("/assets/classroom_hair_sprite_100x100.png");
  --classroom-face-sprite: url("/assets/classroom_face_emotions_100x100.png");
  --classroom-character-sheet-size: 500px 400px;
  --character-head-scale: 1.15;
  --classroom-body-cloth-sprite: url("/assets/classroom_body_cloth_sprite_100x130.png");
  --classroom-body-skin-sprite: url("/assets/classroom_body_skin_sprite_100x130.png");
  --classroom-body-line-sprite: url("/assets/classroom_body_line_sprite_100x130.png");
  --classroom-body-sheet-size: 500px 400px;
}

.p-classroom .game-classroom-seat-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(6, 12, 20, 0.06), rgba(4, 8, 14, 0.44)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 980'%3E%3Crect width='1600' height='980' fill='%23634831'/%3E%3Crect width='1600' height='555' fill='%23856b4f'/%3E%3Crect y='555' width='1600' height='425' fill='%235f4029'/%3E%3Crect x='460' y='74' width='680' height='208' rx='18' fill='%23354f49' stroke='%23513a22' stroke-width='14'/%3E%3Crect x='82' y='128' width='244' height='408' rx='20' fill='%23e4c98e' fill-opacity='.72'/%3E%3Crect x='1274' y='128' width='244' height='408' rx='20' fill='%23dac087' fill-opacity='.62'/%3E%3Crect x='544' y='294' width='512' height='126' rx='24' fill='%238e6238'/%3E%3Crect x='1295' y='338' width='132' height='314' rx='16' fill='%23473725'/%3E%3Ccircle cx='1384' cy='296' r='45' fill='%235d7784'/%3E%3Ccircle cx='1384' cy='296' r='36' fill='none' stroke='%23d8b66e' stroke-width='3'/%3E%3Crect x='1378' y='342' width='12' height='52' fill='%23b48a58'/%3E%3Cg stroke='%239b7b55' stroke-opacity='.34' stroke-width='4'%3E%3Cpath d='M0 628h1600'/%3E%3Cpath d='M0 708h1600'/%3E%3Cpath d='M0 788h1600'/%3E%3Cpath d='M0 868h1600'/%3E%3C/g%3E%3Cg stroke='%23c09a70' stroke-opacity='.18' stroke-width='3'%3E%3Cpath d='M280 980L610 555'/%3E%3Cpath d='M520 980L760 555'/%3E%3Cpath d='M760 980L920 555'/%3E%3Cpath d='M1000 980L1080 555'/%3E%3Cpath d='M1240 980L1240 555'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-size: cover;
}

.p-classroom .game-classroom-seat-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 19% 28%, rgba(255, 228, 174, 0.28), transparent 30%),
    linear-gradient(90deg, rgba(5, 10, 17, 0.34), transparent 20%, transparent 76%, rgba(5, 10, 17, 0.44));
  pointer-events: none;
}

.p-classroom .game-classroom-desk {
  position: absolute;
  z-index: 4;
  top: 36px;
  left: 50%;
  width: min(260px, 32%);
  min-height: 70px;
  padding: 10px 13px;
  transform: translateX(-50%);
  border: 1px solid rgba(72, 42, 20, 0.55);
  border-radius: var(--radius-sm-plus);
  background: linear-gradient(180deg, rgba(145, 92, 47, 0.96), rgba(95, 55, 30, 0.96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  pointer-events: none;
}

.p-classroom .game-classroom-desk p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: rgba(241, 226, 198, 0.72);
  font-size: var(--text-xs-plus);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.p-classroom .game-classroom-seat-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
}

.p-classroom .game-classroom-seat {
  position: absolute;
  z-index: var(--seat-z, 100);
  left: var(--seat-x, 50%);
  top: var(--seat-y, 50%);
  width: 154px;
  height: 128px;
  transform: translate(-50%, -50%) scale(var(--seat-scale, 1)) scale(var(--seat-stage-fit, 1));
  transform-origin: 50% 74%;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--classroom-text);
  pointer-events: auto;
  --desk-lift: 0px;
  --character-lift: 0px;
  --ring-scale: 0.95;
}

.p-classroom .game-classroom-seat-shadow,
.p-classroom .game-classroom-seat-desk,
.p-classroom .game-classroom-character,
.p-classroom .game-classroom-seat-focus-ring,
.p-classroom .game-classroom-seat-nameplate {
  position: absolute;
  pointer-events: none;
}

.p-classroom .game-classroom-seat-shadow {
  z-index: 0;
  left: var(--desk-anchor-x, 50%);
  top: calc(var(--desk-anchor-y, 54%) + 25%);
  width: 168px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08) 58%, transparent 72%);
  filter: blur(1px);
  opacity: 0.23;
}

.p-classroom .game-classroom-seat-desk {
  z-index: 2;
  left: var(--desk-anchor-x, 50%);
  top: var(--desk-anchor-y, 54%);
  width: 166px;
  height: 82px;
  transform: translate(-50%, -50%) translateY(var(--desk-lift));
  border-radius: var(--radius-sm-plus);
  background-image:
    linear-gradient(90deg, rgba(255, 229, 174, 0.16), transparent 35%, rgba(0, 0, 0, 0.13)),
    var(--classroom-desk-sprite, linear-gradient(180deg, #b98952 0%, #96673d 52%, #68472f 100%));
  background-position: center, var(--desk-sprite-position, 0 0);
  background-repeat: no-repeat;
  background-size: 100% 100%, var(--classroom-desk-sprite-size, 100% 100%);
  border: 1px solid rgba(73, 44, 25, 0.48);
  box-shadow:
    0 15px 24px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 rgba(255, 225, 159, 0.25),
    inset 0 -5px 10px rgba(72, 39, 20, 0.22);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.p-classroom .game-classroom-seat-desk::before,
.p-classroom .game-classroom-seat-desk::after {
  content: "";
  position: absolute;
  top: 68%;
  width: 8px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #5b4937, #251e19);
  box-shadow: 48px 1px 0 #2a211b;
}

.p-classroom .game-classroom-seat-desk::before {
  left: 19px;
}

.p-classroom .game-classroom-seat-desk::after {
  right: 67px;
}

.p-classroom .game-classroom-seat-zone.has-desk-sprites .game-classroom-seat-desk::before,
.p-classroom .game-classroom-seat-zone.has-desk-sprites .game-classroom-seat-desk::after {
  display: none;
}

.p-classroom .game-classroom-character {
  display: block;
  z-index: 3;
  left: var(--character-anchor-x, 50%);
  top: calc(var(--character-anchor-y, 9%) + 1px);
  width: 72px;
  height: 90px;
  transform: translateX(-50%) translateY(var(--character-lift));
  background-image: var(--classroom-character-sprite, none);
  background-position: var(--character-sprite-position, 0 0);
  background-repeat: no-repeat;
  background-size: var(--classroom-character-sprite-size, auto);
  transition: transform 160ms ease, filter 160ms ease;
}

.p-classroom .game-classroom-player-image {
  border-radius: 46% 46% 12px 12px;
  display: block;
  height: 100%;
  inset: 0;
  z-index: 5;
  object-fit: cover;
  object-position: var(--player-portrait-x, 50%) var(--player-portrait-y, 38%);
  position: absolute;
  transform: scale(var(--player-portrait-zoom, 1));
  transform-origin: var(--player-portrait-x, 50%) var(--player-portrait-y, 38%);
  width: 100%;
}

.p-classroom .game-classroom-character.has-player-portrait {
  background-image: none;
}

.p-classroom .game-classroom-seat.is-player .game-classroom-character {
  border-radius: var(--radius-md-plus);
  overflow: hidden;
}

.p-classroom .game-classroom-character-shadow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 5px;
  width: 58px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3), transparent 70%);
}

.p-classroom .game-classroom-character-body {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: 100px;
  height: 130px;
  transform: translate(calc(-50% + var(--character-body-offset-x, 0px)), var(--character-body-offset-y, 0px)) scale(var(--character-body-scale, 0.68));
  transform-origin: 50% 0;
  background-color: transparent;
}

.p-classroom .game-classroom-character-body-cloth,
.p-classroom .game-classroom-character-body-skin,
.p-classroom .game-classroom-character-body-line {
  position: absolute;
  inset: 0;
  background-position: var(--character-body-sprite-position, 0px 0px);
  background-repeat: no-repeat;
  background-size: var(--classroom-body-sheet-size);
  pointer-events: none;
}

.p-classroom .game-classroom-character-body-cloth {
  z-index: 0;
  background-image: var(--classroom-body-cloth-sprite);
  filter: var(--character-outfit-filter, none);
}

.p-classroom .game-classroom-character-body-skin {
  z-index: 1;
  background-image: var(--classroom-body-skin-sprite);
  filter: var(--character-body-skin-filter, var(--character-skin-filter, none));
}

.p-classroom .game-classroom-character-body-line {
  z-index: 2;
  background-image: var(--classroom-body-line-sprite);
}

.p-classroom .game-classroom-character-head-group {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translate(var(--character-head-offset-x, 0px), var(--character-head-offset-y, 0px)) rotate(var(--character-head-rotate, 0deg)) scale(var(--character-head-scale, 1));
  transform-origin: var(--character-head-transform-origin, 50% 50%);
  pointer-events: none;
}

.p-classroom .game-classroom-character-head {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 27px;
  width: 100px;
  height: 100px;
  transform: translate(calc(-50% + var(--character-skin-offset-x, 0px)), calc(-50% + var(--character-skin-offset-y, 0px))) scale(var(--character-skin-scale, 0.58));
  background-color: transparent;
  background-image: var(--classroom-skin-sprite);
  background-position: var(--character-skin-sprite-position, 0px 0px);
  background-repeat: no-repeat;
  background-size: var(--classroom-character-sheet-size);
  filter: var(--character-skin-filter, none);
}

.p-classroom .game-classroom-character-face,
.p-classroom .game-classroom-character-hair {
  position: absolute;
  left: 50%;
  top: 31px;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
}

.p-classroom .game-classroom-character-face {
  z-index: 3;
  transform: translate(calc(-50% + var(--character-face-offset-x, 0px)), calc(-50% + var(--character-face-offset-y, 0px))) scale(var(--character-face-scale, 0.46));
  background-color: transparent;
  background-image: var(--classroom-face-sprite);
  background-position: var(--character-face-sprite-position, -200px 0px);
  background-size: var(--classroom-character-sheet-size);
}

.p-classroom .game-classroom-character-hair {
  z-index: 1;
  top: 27px;
  transform: translate(calc(-50% + var(--character-hair-offset-x, 0px)), calc(-50% + var(--character-hair-offset-y, 0px))) scale(var(--character-hair-scale, 0.58));
  background-color: transparent;
  background-image: var(--classroom-hair-sprite);
  background-position: var(--character-hair-sprite-position, 0px 0px);
  background-size: var(--classroom-character-sheet-size);
  clip-path: inset(var(--character-hair-clip-top, 0px) 0 0 0);
  filter: var(--character-hair-filter, none);
}

.p-classroom .game-classroom-seat-zone.has-character-sprites .game-classroom-character > span {
  display: none;
}

.p-classroom .game-classroom-seat-focus-ring {
  z-index: 5;
  left: var(--desk-anchor-x, 50%);
  top: var(--desk-anchor-y, 54%);
  width: 180px;
  height: 96px;
  transform: translate(-50%, -50%) scale(var(--ring-scale));
  border: 2px solid rgba(120, 191, 255, 0.82);
  border-radius: 16px;
  opacity: 0;
  box-shadow:
    0 0 0 4px rgba(120, 191, 255, 0.14),
    0 0 28px rgba(120, 191, 255, 0.22),
    inset 0 0 26px rgba(120, 191, 255, 0.08);
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.p-classroom .game-classroom-seat-nameplate {
  z-index: 6;
  left: var(--label-anchor-x, 50%);
  top: var(--label-anchor-y, 72%);
  width: 128px;
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 3px;
  transform: translateX(-50%);
  padding: 8px 10px 8px;
  border: 1px solid rgba(142, 163, 194, 0.35);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(42, 57, 76, 0.94), rgba(27, 40, 57, 0.96));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.p-classroom .game-classroom-seat strong,
.p-classroom .game-classroom-seat small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-classroom .game-classroom-seat strong {
  color: var(--classroom-text);
  font-size: 0.86rem;
  line-height: 1.08;
}

.p-classroom .game-classroom-seat small {
  color: var(--classroom-muted);
  font-size: var(--text-xs-plus);
  line-height: 1.15;
}

.p-classroom .game-classroom-seat.is-empty {
  opacity: 0.84;
}

.p-classroom .game-classroom-seat.is-empty .game-classroom-character {
  display: none;
}

.p-classroom .game-classroom-seat.is-empty strong {
  color: rgba(239, 246, 255, 0.88);
}

.p-classroom .game-classroom-seat.is-clickable {
  cursor: pointer;
}

.p-classroom .game-classroom-seat.is-clickable:hover,
.p-classroom .game-classroom-seat.is-clickable:focus-visible,
.p-classroom .game-classroom-seat.is-previewed {
  outline: none;
  --desk-lift: -4px;
  --character-lift: 0px;
  --ring-scale: 1;
}

.p-classroom .game-classroom-seat.is-clickable:hover .game-classroom-seat-focus-ring,
.p-classroom .game-classroom-seat.is-clickable:focus-visible .game-classroom-seat-focus-ring,
.p-classroom .game-classroom-seat.is-previewed .game-classroom-seat-focus-ring {
  opacity: 1;
}

.p-classroom .game-classroom-seat.is-targeted {
  --desk-lift: -3px;
  --character-lift: 0px;
  --ring-scale: 1.02;
}

.p-classroom .game-classroom-seat.is-targeted .game-classroom-seat-focus-ring {
  opacity: 1;
  border-color: rgba(239, 102, 124, 0.94);
  box-shadow:
    0 0 0 5px rgba(239, 102, 124, 0.18),
    0 0 34px rgba(239, 102, 124, 0.3),
    inset 0 0 30px rgba(239, 102, 124, 0.12);
}

.p-classroom .game-classroom-seat.is-targeted .game-classroom-seat-nameplate {
  border-color: rgba(239, 102, 124, 0.62);
  background: linear-gradient(180deg, rgba(93, 46, 61, 0.98), rgba(39, 35, 53, 0.98));
}

.p-classroom .game-classroom-seat.is-disabled {
  opacity: 0.5;
  filter: grayscale(0.3);
}

.p-classroom .game-classroom-seat.is-player .game-classroom-seat-nameplate {
  border-color: rgba(120, 191, 255, 0.62);
}

.p-classroom .game-classroom-seat.is-duo .game-classroom-seat-nameplate,
.p-classroom .game-classroom-seat.is-gold .game-classroom-seat-nameplate {
  border-color: rgba(240, 189, 103, 0.54);
}

.p-classroom .game-classroom-seat.is-red .game-classroom-seat-nameplate {
  border-color: rgba(239, 102, 124, 0.5);
}

.p-classroom .game-classroom-seat-queue {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--classroom-gold);
  color: #2c1d0d;
  font-size: var(--text-xs);
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(240, 189, 103, 0.16);
}

.p-classroom .game-classroom-seat.is-queued .game-classroom-seat-focus-ring {
  opacity: 0.48;
  border-color: rgba(240, 189, 103, 0.72);
  box-shadow:
    0 0 0 4px rgba(240, 189, 103, 0.12),
    0 0 24px rgba(240, 189, 103, 0.18);
}

.p-classroom .game-classroom-seat.is-targeted.is-queued .game-classroom-seat-focus-ring {
  opacity: 1;
  border-color: rgba(239, 102, 124, 0.94);
  box-shadow:
    0 0 0 5px rgba(239, 102, 124, 0.18),
    0 0 34px rgba(239, 102, 124, 0.3),
    inset 0 0 30px rgba(239, 102, 124, 0.12);
}

.p-classroom .game-classroom-seat[data-seat-depth="1"] .game-classroom-seat-shadow {
  opacity: 0.14;
}

.p-classroom .game-classroom-seat[data-seat-depth="2"] .game-classroom-seat-shadow {
  opacity: 0.18;
}

.p-classroom .game-classroom-seat[data-seat-depth="4"] .game-classroom-seat-shadow {
  opacity: 0.28;
}

.p-classroom .game-classroom-seat[data-seat-depth="5"] .game-classroom-seat-shadow {
  opacity: 0.34;
}

.p-classroom .game-classroom-shell.has-locked-target .game-classroom-seat.is-clickable:not(.is-targeted):not(:hover) {
  opacity: 0.74;
}

.p-classroom .game-classroom-seat-preview,
.p-classroom .game-classroom-seat-popover {
  position: absolute;
  z-index: 32;
  border: 1px solid rgba(126, 156, 199, 0.34);
  border-radius: var(--radius-sm-plus);
  background: linear-gradient(180deg, rgba(24, 37, 55, 0.98), rgba(15, 27, 43, 0.98));
  box-shadow: var(--classroom-shadow);
  color: var(--classroom-text);
}

.p-classroom .game-classroom-seat-preview {
  width: min(250px, calc(100% - 20px));
  display: grid;
  gap: var(--space-2);
  padding: 10px;
}

.p-classroom .game-classroom-seat-preview-grid,
.p-classroom .game-classroom-seat-contact-meta {
  display: grid;
  gap: 5px;
}

.p-classroom .game-classroom-seat-preview-grid .game-stat-row,
.p-classroom .game-classroom-seat-contact-meta .game-stat-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  color: var(--classroom-muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.p-classroom .game-classroom-seat-preview-grid strong,
.p-classroom .game-classroom-seat-contact-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--classroom-text);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-classroom .game-classroom-seat-preview p {
  display: none;
}

.p-classroom .game-classroom-seat-popover {
  width: min(430px, calc(100% - 24px));
  max-height: min(78vh, 610px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-2-5);
  padding: 14px;
  overflow: hidden;
}

.p-classroom .game-classroom-seat-contact-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.p-classroom .game-classroom-seat-contact-copy > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.p-classroom .game-classroom-seat-contact-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--classroom-text);
  font-size: 1.12rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-classroom .game-classroom-seat-target-mark {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--classroom-gold);
  box-shadow: 0 0 0 4px rgba(240, 189, 103, 0.14);
}

.p-classroom .game-classroom-popover-tools,
.p-classroom .game-classroom-action-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.p-classroom .game-classroom-info-dot {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(132, 181, 239, 0.42);
  border-radius: var(--radius-pill);
  background: rgba(33, 52, 76, 0.95);
  color: rgba(228, 239, 255, 0.95);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.p-classroom .game-classroom-info-dot::after {
  content: attr(data-info);
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, 72vw);
  max-height: 210px;
  overflow: auto;
  padding: 0.58rem 0.65rem;
  border: 1px solid rgba(146, 177, 218, 0.36);
  border-radius: 0.7rem;
  background: linear-gradient(180deg, rgba(8, 18, 31, 0.98), rgba(5, 12, 23, 0.98));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
  color: rgba(231, 240, 253, 0.95);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: normal;
}

.p-classroom .game-classroom-info-dot:hover::after,
.p-classroom .game-classroom-info-dot:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.p-classroom .game-classroom-seat-popover .status-card,
.p-classroom .game-classroom-seat-popover .game-classroom-action-preview,
.p-classroom .game-classroom-sidepane .game-classroom-action-preview {
  display: none;
}

.p-classroom .game-classroom-seat-actions,
.p-classroom .game-classroom-builder-list,
.p-classroom .game-classroom-chain-list,
.p-classroom .game-classroom-break-list,
.p-classroom .game-classroom-presence-grid,
.p-classroom .game-classroom-summary-grid,
.p-classroom .game-classroom-role-grid,
.p-classroom .game-classroom-phase-stats,
.p-classroom .game-classroom-interrupt-actions {
  display: grid;
  gap: var(--space-2);
}

.p-classroom .game-classroom-seat-actions {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.p-classroom .game-classroom-seat-actions-head {
  padding-top: 4px;
  border-top: 1px solid rgba(145, 167, 203, 0.16);
}

.p-classroom .game-classroom-seat-action,
.p-classroom .game-classroom-builder-item,
.p-classroom .game-classroom-chain-item,
.p-classroom .game-classroom-break-item,
.p-classroom .game-classroom-live-note,
.p-classroom .game-classroom-interrupt-card,
.p-classroom .game-classroom-spillover,
.p-classroom .game-classroom-presence-card,
.p-classroom .game-classroom-role-card,
.p-classroom .game-classroom-summary-card,
.p-classroom .game-classroom-phase-stat {
  min-width: 0;
  border: 1px solid rgba(138, 163, 202, 0.16);
  border-radius: 9px;
  background: rgba(25, 38, 57, 0.72);
  color: var(--classroom-text);
}

.p-classroom .game-classroom-seat-action,
.p-classroom .game-classroom-builder-item,
.p-classroom .game-classroom-break-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top form"
    "copy form";
  gap: 3px 10px;
  align-items: center;
  padding: 8px 9px;
}

.p-classroom .game-classroom-builder-top {
  grid-area: top;
}

.p-classroom .game-classroom-builder-top strong,
.p-classroom .game-classroom-chain-top strong,
.p-classroom .game-classroom-live-note strong,
.p-classroom .game-classroom-spillover strong,
.p-classroom .game-classroom-presence-card strong,
.p-classroom .game-classroom-summary-card strong,
.p-classroom .game-classroom-role-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--classroom-text);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-classroom .game-classroom-action-short,
.p-classroom .game-classroom-builder-copy p,
.p-classroom .game-classroom-break-item p {
  grid-area: copy;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-classroom .game-classroom-action-mastery,
.p-classroom .game-classroom-action-lock-note,
.p-classroom .game-classroom-builder-copy small,
.p-classroom .game-classroom-break-item small,
.p-classroom .game-classroom-inline-target {
  display: none;
}

.p-classroom .game-classroom-builder-form {
  grid-area: form;
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 5px;
}

.p-classroom .game-classroom-duration-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.p-classroom .game-classroom-shell .button-small,
.p-classroom .game-classroom-shell .button-ghost,
.p-classroom .game-classroom-shell .button-primary,
.p-classroom .game-classroom-duration-row .button-ghost {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid rgba(132, 181, 239, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(32, 50, 75, 0.92);
  color: #cfe7ff;
  font-size: var(--text-xs-plus);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.p-classroom .game-classroom-shell .button-ghost:hover,
.p-classroom .game-classroom-shell .button-ghost:focus-visible,
.p-classroom .game-classroom-duration-row .button-ghost:hover,
.p-classroom .game-classroom-duration-row .button-ghost:focus-visible {
  border-color: rgba(120, 191, 255, 0.62);
  background: rgba(49, 78, 116, 0.96);
}

.p-classroom .game-classroom-shell .button-ghost:disabled,
.p-classroom .game-classroom-builder-form .button-ghost:disabled {
  opacity: 0.44;
  cursor: not-allowed;
}

.p-classroom .game-classroom-seat-action.is-locked,
.p-classroom .game-classroom-builder-item.is-locked {
  opacity: 0.58;
}

.p-classroom .game-classroom-live-note,
.p-classroom .game-classroom-interrupt-card,
.p-classroom .game-classroom-spillover,
.p-classroom .game-classroom-presence-card,
.p-classroom .game-classroom-phase-stat,
.p-classroom .game-classroom-role-card,
.p-classroom .game-classroom-summary-card {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.p-classroom .game-classroom-sidepane > .game-classroom-side-card {
  order: 2;
}

.p-classroom .game-classroom-sidepane > .game-classroom-side-card--reaction {
  order: 0;
}

.p-classroom .game-classroom-admin-console {
  order: 4;
}

.p-classroom .game-classroom-admin-console .game-panel-head .game-panel-note {
  display: none;
}

.p-classroom .game-classroom-progress {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(123, 148, 184, 0.18);
}

.p-classroom .game-classroom-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--classroom-red), var(--classroom-gold));
}

.p-classroom .game-classroom-phase-stats,
.p-classroom .game-classroom-presence-grid--compact,
.p-classroom .game-classroom-summary-grid,
.p-classroom .game-classroom-role-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-classroom .game-classroom-phase-stat {
  padding: 9px 10px;
}

.p-classroom .game-classroom-phase-stat span,
.p-classroom .game-classroom-console-focus span,
.p-classroom .game-classroom-console-grid span,
.p-classroom .game-classroom-console-line span,
.p-classroom .game-classroom-echo-pill,
.p-classroom .game-classroom-chain-note {
  color: var(--classroom-muted);
  font-size: var(--text-xs-plus);
  line-height: 1.2;
}

.p-classroom .game-classroom-phase-stat strong {
  color: var(--classroom-text);
  font-size: 1.08rem;
  line-height: 1.1;
}

.p-classroom .game-classroom-chain-list {
  min-height: 0;
}

.p-classroom .game-classroom-chain-item {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 10px;
  overflow: hidden;
}

.p-classroom .game-classroom-chain-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: var(--action-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, var(--classroom-blue), var(--classroom-gold));
  opacity: 0.8;
}

.p-classroom .game-classroom-chain-top .game-room-emotion-tone,
.p-classroom .game-classroom-chain-meta .game-classroom-chain-note,
.p-classroom .game-classroom-chain-effects span,
.p-classroom .game-classroom-console-effects span,
.p-classroom .game-classroom-duration-row .button-ghost {
  min-height: 0;
  padding: 0.18rem 0.48rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0;
}

.p-classroom .game-classroom-chain-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.p-classroom .game-classroom-chain-result {
  padding: 0.42rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  font-size: var(--text-xs-plus);
}

.p-classroom .game-classroom-chain-effects,
.p-classroom .game-classroom-console-effects,
.p-classroom .game-classroom-echo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.p-classroom .game-classroom-chain-effects span,
.p-classroom .game-classroom-console-effects span,
.p-classroom .game-classroom-echo-pill {
  border: 1px solid rgba(142, 165, 202, 0.18);
  background: rgba(18, 30, 47, 0.72);
}

.p-classroom .game-classroom-chain-form {
  justify-self: end;
}

.p-classroom .game-classroom-chain-item.is-status-active {
  border-color: rgba(120, 191, 255, 0.42);
  background: rgba(31, 48, 71, 0.86);
}

.p-classroom .game-classroom-chain-item.is-status-completed {
  opacity: 0.74;
}

.p-classroom .game-classroom-chain-item.is-status-cancelled,
.p-classroom .game-classroom-chain-item.is-status-failed {
  opacity: 0.62;
}

.p-classroom .game-classroom-chain-item.is-next-tick {
  animation: classroom-next-tick 1.15s ease-in-out infinite;
}

.p-classroom .game-classroom-builder-list .game-classroom-builder-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.p-classroom .game-classroom-console-body {
  display: grid;
  gap: var(--space-2);
}

.p-classroom .game-classroom-console-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.p-classroom .game-classroom-console-grid span,
.p-classroom .game-classroom-console-line,
.p-classroom .game-classroom-console-focus {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px 8px;
  border: 1px solid rgba(137, 160, 198, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(13, 24, 39, 0.66);
}

.p-classroom .game-classroom-console-focus {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.p-classroom .game-classroom-console-grid strong,
.p-classroom .game-classroom-console-line strong,
.p-classroom .game-classroom-console-focus strong {
  color: var(--classroom-text);
  font-size: var(--text-sm);
}

.p-classroom .game-classroom-console-note:empty {
  display: none;
}

.p-classroom .game-classroom-interrupt-card[hidden] {
  display: none;
}

.p-classroom .game-classroom-interrupt-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-classroom .game-classroom-interrupt-form {
  display: grid;
  gap: 5px;
}

.p-classroom .game-classroom-spillover,
.p-classroom .game-classroom-presence-card {
  padding: 9px;
}

.p-classroom .game-classroom-live-note.is-red,
.p-classroom .game-classroom-interrupt-card.is-red,
.p-classroom .game-classroom-spillover.is-red,
.p-classroom .game-classroom-presence-card.is-red,
.p-classroom .game-classroom-break-item.is-red,
.p-classroom .game-classroom-builder-item.is-red,
.p-classroom .game-classroom-chain-item.is-red {
  border-color: rgba(239, 102, 124, 0.32);
  background: rgba(63, 31, 46, 0.72);
}

.p-classroom .game-classroom-live-note.is-gold,
.p-classroom .game-classroom-interrupt-card.is-gold,
.p-classroom .game-classroom-spillover.is-gold,
.p-classroom .game-classroom-presence-card.is-gold,
.p-classroom .game-classroom-break-item.is-gold,
.p-classroom .game-classroom-builder-item.is-gold,
.p-classroom .game-classroom-chain-item.is-gold,
.p-classroom .game-classroom-role-card.is-gold,
.p-classroom .game-classroom-summary-card.is-gold {
  border-color: rgba(240, 189, 103, 0.32);
  background: rgba(66, 51, 29, 0.68);
}

.p-classroom .game-classroom-live-note.is-blue,
.p-classroom .game-classroom-interrupt-card.is-blue,
.p-classroom .game-classroom-spillover.is-blue,
.p-classroom .game-classroom-presence-card.is-blue,
.p-classroom .game-classroom-break-item.is-blue,
.p-classroom .game-classroom-builder-item.is-blue,
.p-classroom .game-classroom-chain-item.is-blue,
.p-classroom .game-classroom-role-card.is-blue {
  border-color: rgba(120, 191, 255, 0.3);
  background: rgba(30, 48, 70, 0.68);
}

.p-classroom .game-classroom-role-form,
.p-classroom .game-classroom-summary-form {
  display: flex;
  justify-content: flex-end;
}

.p-classroom .game-classroom-role-card,
.p-classroom .game-classroom-summary-card {
  padding: 12px;
}

.p-classroom .game-classroom-roundbrief {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 9, 16, 0.58);
  backdrop-filter: blur(8px);
}

.p-classroom .game-classroom-roundbrief-card {
  width: min(640px, 100%);
  display: grid;
  gap: var(--space-3-5);
  padding: 22px;
  border: 1px solid rgba(142, 169, 210, 0.32);
  border-radius: var(--radius-md-plus);
  background: linear-gradient(180deg, rgba(22, 35, 53, 0.98), rgba(10, 18, 31, 0.98));
  box-shadow: var(--classroom-shadow);
}

.p-classroom .game-classroom-roundbrief-card h2,
.p-classroom .game-classroom-roundbrief-card p {
  margin: 0;
}

.p-classroom .game-classroom-roundbrief-card h2 {
  color: var(--classroom-text);
  font-size: 1.35rem;
  line-height: 1.14;
}

.p-classroom .game-classroom-roundbrief-card p {
  color: var(--classroom-muted);
}

.p-classroom .game-classroom-roundbrief-role-grid,
.p-classroom .game-classroom-roundbrief-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2-5);
}

.p-classroom .game-classroom-roundbrief-role,
.p-classroom .game-classroom-roundbrief-stats span {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  padding: 10px;
  border: 1px solid rgba(137, 160, 198, 0.18);
  border-radius: 9px;
  background: rgba(19, 31, 48, 0.72);
}

.p-classroom .game-classroom-stage-legend {
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3-5) 24px;
  padding: 9px 14px;
  border-top: 1px solid rgba(137, 160, 198, 0.16);
  background: rgba(9, 16, 27, 0.84);
}

.p-classroom .game-classroom-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--classroom-muted);
  font-size: 0.76rem;
  line-height: 1;
}

.p-classroom .game-classroom-legend-item i {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.p-classroom .game-classroom-legend-item.is-target i { color: var(--classroom-red); background: var(--classroom-red); }
.p-classroom .game-classroom-legend-item.is-preview i { color: var(--classroom-blue); }
.p-classroom .game-classroom-legend-item.is-queued i { color: var(--classroom-gold); }
.p-classroom .game-classroom-legend-item.is-disabled i { color: rgba(128, 147, 177, 0.7); }

.p-classroom .game-classroom-seat-reaction {
  position: absolute;
  z-index: 8;
  left: var(--effect-anchor-x, 50%);
  top: var(--effect-anchor-y, 0%);
  bottom: auto;
  max-width: 170px;
  transform: translate(-50%, -100%);
  padding: 5px 8px;
  border: 1px solid rgba(120, 191, 255, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(12, 22, 35, 0.94);
  color: #dcefff;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

.p-classroom .game-classroom-seat-reaction:empty,
.p-classroom .game-classroom-seat-reaction[hidden] {
  display: none;
}

.p-classroom .game-classroom-seat.is-seat-bound-feedback .game-classroom-seat-focus-ring,
.p-classroom .game-classroom-seat.is-seat-reacting .game-classroom-seat-focus-ring {
  opacity: 1;
  animation: classroom-seat-feedback 0.55s ease-out;
}

.p-classroom .game-classroom-seat.seat-react-red .game-classroom-seat-reaction {
  border-color: rgba(239, 102, 124, 0.46);
  color: #ffd8df;
}

.p-classroom .game-classroom-seat.seat-react-gold .game-classroom-seat-reaction {
  border-color: rgba(240, 189, 103, 0.48);
  color: #ffe1a7;
}

.p-classroom .game-classroom-task-flight {
  position: fixed;
  z-index: 120;
  min-width: 94px;
  padding: 7px 10px;
  border: 1px solid rgba(120, 191, 255, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(18, 33, 53, 0.96);
  color: var(--classroom-text);
  font-size: 0.74rem;
  font-weight: 800;
  pointer-events: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  animation: classroom-task-flight 0.78s cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
}

.p-classroom .game-classroom-chain-list.is-plan-pulse,
.p-classroom .game-classroom-chain-list.is-result-pulse,
.p-classroom .game-classroom-chain-list.is-cancel-pulse {
  animation: classroom-queue-pulse 0.82s ease-out;
}

.p-classroom .game-classroom-chain-list.is-cancel-pulse {
  outline: 1px solid rgba(239, 102, 124, 0.3);
}

.p-classroom .game-classroom-chain-list.is-plan-pulse,
.p-classroom .game-classroom-chain-list.is-result-pulse {
  outline: 1px solid rgba(120, 191, 255, 0.26);
}

.p-classroom .game-classroom-shell.is-pressure-high .game-classroom-seat-zone {
  box-shadow: inset 0 0 0 2px rgba(239, 102, 124, 0.2);
}

.p-classroom .game-classroom-shell.is-pressure-watch .game-classroom-seat-zone {
  box-shadow: inset 0 0 0 2px rgba(240, 189, 103, 0.14);
}

.p-classroom .game-classroom-shell.is-rumor-high .game-classroom-stage-pane::after,
.p-classroom .game-classroom-shell.is-rumor-watch .game-classroom-stage-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0%, rgba(240, 189, 103, 0.08) 48%, transparent 74%);
  mix-blend-mode: screen;
}

.p-classroom .game-classroom-shell .input-field,
.p-classroom .game-classroom-shell .input-field--small {
  border-color: rgba(130, 155, 194, 0.26);
  background: rgba(10, 20, 34, 0.9);
  color: var(--classroom-text);
}

@keyframes classroom-seat-feedback {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 3px rgba(120, 191, 255, 0.1), 0 0 18px rgba(120, 191, 255, 0.14);
  }
  45% {
    filter: brightness(1.28);
    box-shadow: 0 0 0 7px rgba(120, 191, 255, 0.2), 0 0 34px rgba(120, 191, 255, 0.32);
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 4px rgba(120, 191, 255, 0.14), 0 0 28px rgba(120, 191, 255, 0.22);
  }
}

@keyframes classroom-task-flight {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.94);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--flight-x, 0), var(--flight-y, -80px), 0) scale(0.82);
  }
}

@keyframes classroom-queue-pulse {
  0% { box-shadow: 0 0 0 0 rgba(120, 191, 255, 0.24); }
  100% { box-shadow: 0 0 0 16px rgba(120, 191, 255, 0); }
}

@keyframes classroom-next-tick {
  0%, 100% { border-color: rgba(120, 191, 255, 0.32); }
  50% { border-color: rgba(120, 191, 255, 0.72); }
}

@media (max-width: 1480px) {
  .p-classroom .game-classroom-hud {
    grid-template-columns: minmax(170px, 1fr) minmax(138px, 0.76fr) repeat(5, minmax(108px, 1fr));
  }

  .p-classroom .game-classroom-board-frame {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .p-classroom .game-classroom-main {
    grid-template-columns: minmax(620px, 1fr) 350px;
  }

  .p-classroom .game-classroom-seat-zone {
    --seat-stage-fit: 0.93;
  }
}

@media (max-width: 1180px) {
  .p-classroom .game-classroom-shell {
    overflow: visible;
  }

  .p-classroom .game-classroom-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-classroom .game-classroom-board-frame,
.p-classroom .game-classroom-main {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: visible;
  }

  .p-classroom .game-classroom-rail,
.p-classroom .game-classroom-sidepane {
    max-height: none;
    overflow: visible;
  }

  .p-classroom .game-classroom-schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-classroom .game-classroom-seat-zone,
.p-classroom .game-classroom-stage-pane {
    min-height: 720px;
  }

  .p-classroom .game-classroom-seat-popover,
.p-classroom .game-classroom-seat-preview {
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto;
  }
}

@media (max-width: 760px) {
  .p-classroom .game-classroom-shell {
    padding: 8px;
  }

  .p-classroom .game-classroom-hud {
    grid-template-columns: 1fr;
  }

  .p-classroom .game-classroom-hud-block {
    min-height: 64px;
  }

  .p-classroom .game-classroom-schedule,
.p-classroom .game-classroom-phase-stats,
.p-classroom .game-classroom-presence-grid--compact,
.p-classroom .game-classroom-summary-grid,
.p-classroom .game-classroom-role-grid,
.p-classroom .game-classroom-roundbrief-role-grid,
.p-classroom .game-classroom-roundbrief-stats,
.p-classroom .game-classroom-interrupt-actions {
    grid-template-columns: 1fr;
  }

  .p-classroom .game-classroom-seat-zone,
.p-classroom .game-classroom-stage-pane {
    min-height: 980px;
  }

  .p-classroom .game-classroom-desk {
    top: 28px;
    width: min(250px, calc(100% - 40px));
  }

  .p-classroom .game-classroom-seat-grid {
    inset: 0;
  }

  .p-classroom .game-classroom-seat {
    width: 132px;
    height: 116px;
  }

  .p-classroom .game-classroom-seat-zone {
    --seat-stage-fit: 0.72;
  }

  .p-classroom .game-classroom-seat-action,
.p-classroom .game-classroom-builder-item,
.p-classroom .game-classroom-break-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "copy"
      "form";
  }

  .p-classroom .game-classroom-builder-form {
    justify-items: stretch;
  }

  .p-classroom .game-classroom-duration-row {
    flex-wrap: wrap;
  }
}
}

/* SOURCE: 40-screens/character-create.css */
/* =========================================================
   SCREEN: Character creation
   Scope: .p-character-create only
   Root: .p-character-create
   PHP: game/characters.php
   ========================================================= */

@layer screens {
/* Charaktererstellung: kurze Eingabe, Statuswerte im Formular, Erklärungen im Lektor. */
.p-character-create .game-character-create-page .game-shell-intro {
  padding: 12px 18px;
}

.p-character-create .game-character-create-page .game-shell-title {
  font-size: clamp(1.9rem, 2.6vw, 2.65rem);
}

.p-character-create .game-character-create-page .game-shell-lead {
  margin-top: 5px;
  font-size: 0.88rem;
}

.p-character-create .character-create-grid {
  grid-template-columns: 1fr;
  gap: var(--space-3-5);
}

.p-character-create .character-create-panel {
  padding: 18px 20px;
  border-radius: 24px;
}

.p-character-create .character-create-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 14px;
}

.p-character-create .character-create-heading .game-panel-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-character-create .character-create-heading h2 {
  font-size: 1.85rem;
}

.p-character-create .game-character-create-page .game-tutor-panel.is-placement-float {
  position: fixed;
  top: auto;
  right: 18px;
  bottom: 18px;
  left: auto;
  width: min(310px, calc(100vw - 36px));
  transform: none;
}

.p-character-create .game-character-create-page .game-tutor-panel.is-placement-float .game-lektor-mark,
.p-character-create .game-character-create-page .game-tutor-panel.is-placement-float .game-tutor-owl {
  cursor: grab;
  touch-action: none;
}

.p-character-create .game-character-create-page .game-tutor-panel.is-placement-float.is-dragging .game-lektor-mark,
.p-character-create .game-character-create-page .game-tutor-panel.is-placement-float.is-dragging .game-tutor-owl {
  cursor: grabbing;
}

.p-character-create .character-create-form {
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1fr) minmax(260px, 1.25fr);
  gap: var(--space-2-5) 12px;
  margin-top: 0;
}

.p-character-create .character-create-form .field {
  gap: 5px;
  margin: 0;
}

.p-character-create .character-create-form .field label,
.p-character-create .character-create-form .field legend {
  font-size: 0.84rem;
  font-weight: 800;
}

.p-character-create .character-create-form .field input,
.p-character-create .character-create-form .field textarea {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 13px;
}

.p-character-create .character-create-form .field textarea {
  height: 64px;
  min-height: 64px;
  resize: vertical;
}

.p-character-create .character-empathy-field {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0;
  border: 0;
}

.p-character-create .character-empathy-field legend {
  margin-bottom: 6px;
}

.p-character-create .character-create-form .game-empathy-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}

.p-character-create .character-create-form .game-empathy-card {
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 15px;
}

.p-character-create .character-create-form .game-empathy-card:has(input:checked) {
  border-color: rgba(65, 111, 202, 0.62);
  background: rgba(225, 237, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(65, 111, 202, 0.1);
}

.p-character-create .character-create-form .game-empathy-copy {
  gap: 3px;
}

.p-character-create .character-create-form .game-empathy-copy strong {
  font-size: var(--text-sm-plus);
}

.p-character-create .character-create-form .game-empathy-copy small {
  display: grid;
  gap: 1px;
  font-size: var(--text-xs);
  line-height: 1.25;
}

.p-character-create .character-roster-panel {
  padding: 18px 20px;
  border-radius: 24px;
}

.p-character-create .character-roster-panel > p {
  margin-bottom: 0;
}

.p-character-create .story-page-body.is-tutorial-guided #story-next-button {
  box-shadow: 0 0 0 2px rgba(64, 112, 204, 0.1), 0 8px 18px rgba(40, 70, 135, 0.14);
}

.p-character-create .forest-screen.is-tutorial-guided[data-forest-tutorial-phase="select_mission"] .forest-quest-list,
.p-character-create .forest-screen.is-tutorial-guided[data-forest-tutorial-phase="select_students"] .forest-roster,
.p-character-create .forest-screen.is-tutorial-guided[data-forest-tutorial-phase="start"] .forest-start-card,
.p-character-create .forest-screen.is-tutorial-guided[data-forest-tutorial-phase="wait"] .forest-run-list,
.p-character-create .forest-screen.is-tutorial-guided[data-forest-tutorial-phase="claim"] .forest-run-list {
  outline: 2px solid rgba(229, 181, 83, 0.58);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(229, 181, 83, 0.08);
}

@media (max-width: 820px) {
  .p-character-create .game-tutor-panel {
    position: sticky;
    right: auto;
    bottom: auto;
    width: calc(100% - 24px);
    margin: 12px auto;
  }

  .p-character-create .game-tutor-panel.is-passive {
    width: calc(100% - 24px);
  }

  .p-character-create .story-page-body .game-tutor-panel {
    top: auto;
    right: auto;
    width: calc(100% - 24px);
  }

  .p-character-create .game-tutor-panel.is-placement-center,
.p-character-create .game-tutor-panel.is-placement-side,
.p-character-create .story-page-body .game-tutor-panel.is-placement-center {
    top: auto;
    left: auto;
    transform: none;
  }

  .p-character-create .game-tutorial-return {
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }

}

@media (max-width: 1180px) {
  .p-character-create .character-create-form .game-empathy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .p-character-create .character-create-heading {
    align-items: flex-start;
  }

  .p-character-create .character-create-form {
    grid-template-columns: 1fr;
  }

  .p-character-create .character-empathy-field {
    grid-column: auto;
  }

  .p-character-create .character-create-form .game-empathy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .p-character-create .character-create-heading {
    display: grid;
  }

  .p-character-create .character-create-heading .button-small {
    width: 100%;
  }

  .p-character-create .game-character-create-page .game-tutor-panel.is-placement-float {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }

}
}

/* SOURCE: 40-screens/armory.css */
/* =========================================================
   SCREEN: Armory
   Scope: .p-armory only
   Root: .p-armory
   PHP: game/armory-view.php
   ========================================================= */

@layer screens {
/* Waffenkammer: player-facing room, profiles, workshop and training flow. */
body.p-armory.game-body .site-shell {
  width: min(1740px, calc(100% - 24px));
  overflow-x: clip;
}

.p-armory .armory-screen {
  --armory-accent: #956b25;
  --armory-accent-soft: rgba(149, 107, 37, 0.16);
  --armory-accent-line: rgba(149, 107, 37, 0.42);
  --armory-ink: #211c18;
  --armory-muted: #6a6258;
  --armory-panel: rgba(255, 252, 243, 0.9);
  --armory-panel-strong: rgba(255, 254, 249, 0.97);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 760px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--armory-accent-line);
  border-radius: var(--radius-md);
  color: var(--armory-ink);
  background: #f7f2e7;
  box-shadow: 0 22px 64px rgba(45, 33, 20, 0.2);
}

.p-armory .armory-screen.is-charisma-holy {
  --armory-accent: #9d762b;
  --armory-accent-soft: rgba(213, 168, 69, 0.18);
  --armory-accent-line: rgba(168, 125, 43, 0.46);
}

.p-armory .armory-screen.is-charisma-demon {
  --armory-accent: #8f3037;
  --armory-accent-soft: rgba(143, 48, 55, 0.15);
  --armory-accent-line: rgba(120, 38, 45, 0.48);
}

.p-armory .armory-room-art,
.p-armory .armory-room-veil {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
}

.p-armory .armory-room-art {
  background-image: var(--armory-room-image);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.92;
  filter: sepia(0.08) contrast(1.04);
  transform: scale(1.012);
  transition: opacity .25s ease, filter .25s ease;
}

.p-armory .armory-screen.is-room-image-loading .armory-room-art {
  opacity: .45;
}

.p-armory .armory-screen.is-room-image-fallback .armory-room-art {
  opacity: .78;
  filter: sepia(.12) saturate(.72) contrast(1.02);
}

.p-armory .armory-screen.is-room-image-unavailable .armory-room-art {
  opacity: 1;
  filter: none;
  transform: none;
  background-image:
    radial-gradient(circle at 52% 17%, rgba(255, 236, 181, .5), transparent 26%),
    linear-gradient(135deg, #493c31, #9a7846 48%, #322923);
}

.p-armory .armory-room-veil {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.12), rgba(246, 238, 220, 0.68) 74%, rgba(239, 229, 207, 0.92)),
    radial-gradient(circle at 50% 16%, transparent 0 25%, rgba(255, 252, 244, 0.48) 70%);
}

.p-armory .armory-screen.is-charisma-holy .armory-room-veil {
  background:
    linear-gradient(180deg, rgba(255, 251, 231, 0.06), rgba(248, 235, 186, 0.48) 74%, rgba(235, 218, 162, 0.84)),
    radial-gradient(circle at 50% 12%, rgba(255, 245, 180, 0.08), rgba(255, 254, 244, 0.5) 72%);
}

.p-armory .armory-screen.is-charisma-demon .armory-room-art {
  filter: sepia(0.1) saturate(0.78) contrast(1.12);
}

.p-armory .armory-screen.is-charisma-demon .armory-room-veil {
  background:
    linear-gradient(180deg, rgba(74, 23, 27, 0.06), rgba(86, 31, 35, 0.23) 68%, rgba(55, 29, 29, 0.56)),
    radial-gradient(circle at 50% 8%, transparent 0 22%, rgba(255, 244, 232, 0.5) 72%);
}

.p-armory .armory-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: 8px;
}

.p-armory .armory-command-copy,
.p-armory .armory-charisma-card,
.p-armory .armory-charisma-visual,
.p-armory .armory-flow,
.p-armory .armory-player-notice,
.p-armory .armory-panel {
  border: 1px solid var(--armory-accent-line);
  background: var(--armory-panel);
  box-shadow: 0 12px 34px rgba(51, 38, 23, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
}

.p-armory .armory-command-copy {
  min-width: 0;
  padding: 14px 18px;
  border-left: 5px solid var(--armory-accent);
}

.p-armory .armory-kicker,
.p-armory .armory-panel-head small {
  margin: 0;
  color: var(--armory-accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.p-armory .armory-command-copy h1 {
  margin: 3px 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.42rem, 2vw, 2.08rem);
  line-height: 1;
}

.p-armory .armory-command-copy > p:last-child {
  max-width: 780px;
  margin: 0;
  color: var(--armory-muted);
  font-size: 0.84rem;
}

.p-armory .armory-charisma-visual {
  position: relative;
  height: 118px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--armory-accent-line);
  background: #332b24;
  box-shadow: 0 12px 34px rgba(51, 38, 23, 0.16);
}

.p-armory .armory-charisma-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 28%;
  transition: opacity .2s ease;
}

.p-armory .armory-screen.is-room-image-fallback .armory-charisma-visual img { opacity: .9; }
.p-armory .armory-screen.is-room-image-loading .armory-charisma-visual img { opacity: .45; }
.p-armory .armory-screen.is-room-image-unavailable .armory-charisma-visual {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 226, 139, .4), transparent 32%),
    linear-gradient(120deg, #43362c, #856a42 55%, #302824);
}
.p-armory .armory-screen.is-room-image-unavailable .armory-charisma-visual img { display: none; }

.p-armory .armory-charisma-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 7px 10px;
  color: #fffdf5;
  background: linear-gradient(180deg, transparent, rgba(24, 18, 14, .9) 34%);
  text-shadow: 0 1px 3px #000;
}

.p-armory .armory-charisma-visual figcaption span {
  align-self: end;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.p-armory .armory-charisma-visual figcaption strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: end;
  color: #ffe49a;
  font-family: Georgia, serif;
  font-size: 1.55rem;
}

.p-armory .armory-charisma-visual figcaption p {
  margin: 0;
  overflow: hidden;
  font-size: .56rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-armory .armory-charisma-card {
  padding: 12px 14px;
  background:
    linear-gradient(110deg, var(--armory-panel-strong), rgba(248, 238, 217, 0.82)),
    var(--armory-panel);
}

.p-armory .armory-charisma-card.is-holy {
  background: linear-gradient(110deg, rgba(255, 254, 238, 0.96), rgba(246, 224, 157, 0.84));
}

.p-armory .armory-charisma-card.is-demon {
  background: linear-gradient(110deg, rgba(255, 246, 239, 0.94), rgba(206, 154, 148, 0.85));
}

.p-armory .armory-charisma-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.p-armory .armory-charisma-head span {
  font-size: var(--text-xs-plus);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-armory .armory-charisma-head strong {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--armory-accent);
  font-size: 1.55rem;
}

.p-armory .armory-charisma-track {
  position: relative;
  height: 27px;
  margin: 4px 0 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #7a202a, #b87873 32%, #e4ded2 50%, #d8bd69 68%, #fff2ae);
  box-shadow: inset 0 1px 4px rgba(39, 28, 21, 0.35);
}

.p-armory .armory-charisma-track span {
  position: absolute;
  top: 6px;
  z-index: 1;
  color: rgba(31, 25, 22, 0.84);
  font-size: 0.61rem;
  font-weight: 900;
}

.p-armory .armory-charisma-negative { left: 9px; }
.p-armory .armory-charisma-neutral { left: 50%; transform: translateX(-50%); }
.p-armory .armory-charisma-positive { right: 9px; }

.p-armory .armory-charisma-track i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--armory-charisma-position);
  width: 16px;
  height: 33px;
  border: 2px solid #342b26;
  border-radius: 7px;
  background: #fffdf6;
  box-shadow: 0 3px 7px rgba(39, 28, 21, 0.34);
  transform: translate(-50%, -50%);
}

.p-armory .armory-charisma-card p {
  margin: 0;
  color: #574c42;
  font-size: 0.7rem;
  line-height: 1.25;
}

.p-armory .armory-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(255, 253, 247, 0.88);
}

.p-armory .armory-flow span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 28px;
  border-right: 1px solid var(--armory-accent-line);
  font-size: 0.59rem;
  font-weight: 800;
  text-transform: uppercase;
}

.p-armory .armory-flow span:last-child { border-right: 0; }

.p-armory .armory-flow b {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: #fffdf7;
  background: var(--armory-accent);
  font-size: 0.65rem;
}

.p-armory .armory-player-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 8px;
  padding: 9px 12px;
  border-left: 5px solid #9b3038;
  color: #5f272b;
  background: rgba(255, 238, 233, 0.95);
  font-size: 0.75rem;
}

.p-armory .armory-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(540px, 1.7fr) minmax(330px, 1.02fr);
  gap: var(--space-2);
  align-items: start;
}

.p-armory .armory-panel {
  min-width: 0;
  overflow: hidden;
}

.p-armory .armory-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--armory-accent-line);
  background: linear-gradient(90deg, rgba(255, 253, 247, 0.96), var(--armory-accent-soft));
}

.p-armory .armory-panel-head h2 {
  margin: 1px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.p-armory .armory-panel-head > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--armory-accent-line);
  color: var(--armory-accent);
  background: rgba(255, 255, 255, 0.56);
  font-size: 0.62rem;
  font-weight: 800;
  text-align: right;
}

.p-armory .armory-subject-list {
  max-height: 582px;
  padding: 6px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--armory-accent-line) transparent;
}

.p-armory .armory-subject-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 48px auto;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  min-height: 70px;
  margin: 0 0 5px;
  padding: 5px 7px;
  border: 1px solid rgba(100, 82, 58, 0.2);
  border-left: 4px solid transparent;
  color: var(--armory-ink);
  background: rgba(255, 254, 249, 0.82);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.p-armory .armory-subject-card:hover,
.p-armory .armory-subject-card:focus-visible {
  border-color: var(--armory-accent-line);
  background: rgba(255, 251, 238, 0.97);
  transform: translateX(2px);
  outline: none;
}

.p-armory .armory-subject-card.is-selected {
  border-left-color: var(--armory-accent);
  background: linear-gradient(90deg, var(--armory-accent-soft), rgba(255, 254, 249, 0.96));
}

.p-armory .armory-subject-card.is-locked {
  opacity: 0.68;
  filter: grayscale(0.5);
}

.p-armory .armory-subject-avatar {
  position: relative;
  display: grid;
  width: 52px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--armory-accent-line);
  border-radius: 50% 50% 12px 12px;
  background: radial-gradient(circle at 50% 30%, #fffef8, #dfd4bd);
}

.p-armory .armory-subject-avatar > b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
}

.p-armory .armory-subject-own-image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 40%);
  transform: scale(var(--portrait-zoom, 1));
  transform-origin: var(--portrait-x, 50%) var(--portrait-y, 40%);
  width: 100%;
}

.p-armory .armory-subject-avatar .forest-student-avatar {
  position: absolute;
  top: -17px;
  left: -14px;
  transform: scale(0.62);
  transform-origin: top left;
}

.p-armory .armory-subject-copy {
  min-width: 0;
}

.p-armory .armory-subject-copy strong,
.p-armory .armory-subject-copy small,
.p-armory .armory-subject-copy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-armory .armory-subject-copy strong { font-size: var(--text-sm); }
.p-armory .armory-subject-copy small { color: var(--armory-muted); font-size: 0.64rem; }
.p-armory .armory-subject-copy em { margin-top: 3px; color: var(--armory-accent); font-size: 0.61rem; font-style: normal; }

.p-armory .armory-subject-slots {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  gap: 2px;
  align-self: center;
}

.p-armory .armory-subject-slot {
  display: grid;
  width: 14px;
  height: 20px;
  place-items: center;
  border: 1px dashed rgba(100, 82, 58, .32);
  color: #9b9182;
  background: rgba(245, 240, 228, .7);
  font-size: .48rem;
}

.p-armory .armory-subject-slot.is-filled { border-style: solid; color: var(--armory-accent); background: #fffdf7; }
.p-armory .armory-subject-slot.is-rare { border-color: #3381aa; color: #28769e; }
.p-armory .armory-subject-slot.is-epic { border-color: #9c52bd; color: #82429f; }

.p-armory .armory-subject-route {
  align-self: start;
  padding: 3px 5px;
  border: 1px solid rgba(66, 110, 68, 0.32);
  color: #315e36;
  background: rgba(213, 237, 209, 0.72);
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.p-armory .armory-subject-route.is-locked {
  border-color: rgba(117, 57, 61, 0.3);
  color: #74393e;
  background: rgba(245, 215, 211, 0.76);
}

.p-armory .armory-access-rule {
  margin: 0 6px 6px;
  padding: 9px;
  border: 1px dashed var(--armory-accent-line);
  background: rgba(246, 237, 219, 0.78);
}

.p-armory .armory-access-rule strong { font-size: 0.7rem; }
.p-armory .armory-access-rule p { margin: 3px 0 0; color: var(--armory-muted); font-size: 0.63rem; line-height: 1.35; }

.p-armory .armory-profile-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: var(--space-2);
  padding: 10px;
  border-bottom: 1px solid var(--armory-accent-line);
  background: rgba(255, 254, 249, 0.76);
}

.p-armory .armory-profile-summary > p {
  min-height: 31px;
  margin: 0 0 8px;
  color: var(--armory-muted);
  font-size: 0.71rem;
  line-height: 1.35;
}

.p-armory .armory-family-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.p-armory .armory-family-card {
  display: grid;
  min-width: 0;
  min-height: 103px;
  align-content: center;
  justify-items: center;
  padding: 7px 4px;
  border: 1px solid rgba(100, 82, 58, 0.24);
  color: var(--armory-ink);
  background: rgba(255, 254, 250, 0.86);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.p-armory .armory-family-card:hover,
.p-armory .armory-family-card:focus-visible,
.p-armory .armory-family-card.is-selected {
  border-color: var(--armory-accent);
  background: var(--armory-accent-soft);
  outline: none;
}

.p-armory .armory-family-card > span {
  color: var(--armory-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1;
}

.p-armory .armory-family-card strong {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-armory .armory-family-card small { margin-top: 3px; font-size: 0.55rem; }
.p-armory .armory-family-card small.is-gold { color: #8d661d; }
.p-armory .armory-family-card small.is-blue { color: #2d668e; }
.p-armory .armory-family-card small.is-red { color: #9b3038; }

.p-armory .armory-family-card > i {
  display: block;
  width: calc(100% - 8px);
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(75, 61, 46, 0.14);
}

.p-armory .armory-family-card > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--armory-accent);
  transition: width 180ms ease;
}

.p-armory .armory-data-list {
  margin-top: 6px;
  border: 1px solid var(--armory-accent-line);
  background: rgba(255, 253, 247, 0.72);
}

.p-armory .armory-data-list summary {
  padding: 6px 8px;
  color: var(--armory-ink);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 900;
}

.p-armory .armory-data-list > div { overflow-x: auto; }
.p-armory .armory-data-list table { width: 100%; border-collapse: collapse; font-size: 0.57rem; }
.p-armory .armory-data-list th,
.p-armory .armory-data-list td { padding: 5px 7px; border-top: 1px solid rgba(119, 94, 40, 0.18); text-align: left; white-space: nowrap; }
.p-armory .armory-data-list th { color: var(--armory-muted); font-size: 0.51rem; text-transform: uppercase; letter-spacing: 0.04em; }
.p-armory .armory-data-list p { margin: 0; padding: 7px; color: var(--armory-muted); font-size: 0.57rem; }
.p-armory .armory-produced-list { margin: 0 6px 6px; }

.p-armory .armory-profile-read {
  display: grid;
  gap: 5px;
}

.p-armory .armory-profile-read > div {
  display: grid;
  align-content: center;
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid rgba(100, 82, 58, 0.21);
  background: rgba(245, 239, 225, 0.8);
}

.p-armory .armory-profile-read span {
  color: var(--armory-muted);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p-armory .armory-profile-read strong {
  margin-top: 2px;
  color: var(--armory-accent);
  font-size: 0.67rem;
  line-height: 1.2;
}

.p-armory .armory-equipped {
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgba(100, 82, 58, .2);
  background: rgba(242, 235, 219, .72);
}

.p-armory .armory-equipped-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 5px;
  font-size: var(--text-2xs);
}

.p-armory .armory-equipped-head span { color: var(--armory-muted); }
.p-armory .armory-equipped-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.p-armory .armory-equipped-slot {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-height: 39px;
  padding: 4px 5px;
  border: 1px dashed rgba(100, 82, 58, .28);
  background: rgba(255, 254, 249, .72);
}
.p-armory .armory-equipped-slot > span { color: #8d8374; font-size: .95rem; text-align: center; }
.p-armory .armory-equipped-slot small,
.p-armory .armory-equipped-slot strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-armory .armory-equipped-slot small { color: var(--armory-muted); font-size: .45rem; text-transform: uppercase; }
.p-armory .armory-equipped-slot strong { font-size: .54rem; }
.p-armory .armory-equipped-slot > b { color: #8f8374; font-size: .48rem; }
.p-armory .armory-equipped-slot.is-filled { border-style: solid; border-color: var(--armory-accent-line); background: #fffdf7; }
.p-armory .armory-equipped-slot.is-filled > span { color: var(--armory-accent); }
.p-armory .armory-equipped-slot.is-rare { border-color: #3381aa; }
.p-armory .armory-equipped-slot.is-epic { border-color: #9c52bd; background: linear-gradient(145deg, #fffdf7, #eee0f5); }

.p-armory .armory-owl-tip {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  margin: 0 10px;
  padding: 7px 9px;
  border: 1px solid rgba(100, 82, 58, .22);
  border-left: 4px solid var(--armory-accent);
  background: rgba(255, 252, 240, .9);
}

.p-armory .armory-owl-mark {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #6e5a34;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 31% 39%, #241d16 0 2px, #f9e7ad 3px 7px, transparent 8px), radial-gradient(circle at 69% 39%, #241d16 0 2px, #f9e7ad 3px 7px, transparent 8px), #a37a32;
}
.p-armory .armory-owl-mark::after { content: ''; position: absolute; left: 12px; top: 17px; border: 4px solid transparent; border-top-color: #49351e; }
.p-armory .armory-owl-tip strong { display: block; font-size: .63rem; }
.p-armory .armory-owl-tip p { margin: 2px 0 0; color: var(--armory-muted); font-size: .57rem; line-height: 1.3; }
.p-armory .armory-owl-tip.is-warning { border-left-color: #a33b42; background: rgba(255, 235, 228, .95); }
.p-armory .armory-owl-tip.is-warning strong { color: #8f2d35; }
.p-armory .armory-owl-tip.is-bonus { border-left-color: #3f804d; background: rgba(230, 245, 224, .94); }
.p-armory .armory-owl-tip.is-bonus strong { color: #326e3e; }

.p-armory .armory-training-form {
  padding: 10px;
  background: rgba(255, 253, 247, 0.82);
}

.p-armory .armory-training-form > label {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-bottom: 7px;
}

.p-armory .armory-training-form > label > span,
.p-armory .armory-training-form legend {
  color: var(--armory-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.p-armory .armory-training-form select {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--armory-accent-line);
  color: var(--armory-ink);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.7rem;
}

.p-armory .armory-training-form select:focus-visible {
  outline: 2px solid var(--armory-accent-soft);
  outline-offset: 1px;
}

.p-armory .armory-training-form fieldset {
  margin: 9px 0 0;
  padding: 8px;
  border: 1px solid var(--armory-accent-line);
}

.p-armory .armory-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.p-armory .armory-method-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 116px;
  align-content: start;
  padding: 9px 7px 7px;
  border: 1px solid rgba(100, 82, 58, 0.23);
  background: rgba(250, 246, 236, 0.88);
  cursor: pointer;
}

.p-armory .armory-method-card:has(input:checked) {
  border-color: var(--armory-accent);
  box-shadow: inset 0 0 0 2px var(--armory-accent-soft);
  background: rgba(255, 252, 239, 0.98);
}

.p-armory .armory-method-card.is-demon:has(input:checked) { border-color: #98333c; }
.p-armory .armory-method-card.is-holy:has(input:checked) { border-color: #ad812d; }

.p-armory .armory-method-card input {
  position: absolute;
  top: 7px;
  right: 7px;
  accent-color: var(--armory-accent);
}

.p-armory .armory-method-card strong { padding-right: 18px; font-size: var(--text-xs-plus); }
.p-armory .armory-method-card span { margin-top: 5px; color: var(--armory-muted); font-size: 0.59rem; line-height: 1.3; }
.p-armory .armory-method-card small { margin-top: auto; padding-top: 7px; color: var(--armory-accent); font-size: 0.53rem; line-height: 1.25; }

.p-armory .armory-training-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2-5);
  margin-top: 9px;
}

.p-armory .armory-training-submit > div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 6px;
  align-items: center;
  margin-right: auto;
  color: var(--armory-muted);
  font-size: 0.61rem;
}

.p-armory .armory-training-submit > div strong {
  grid-column: 2;
  grid-row: 1;
  color: var(--armory-accent);
  font-size: var(--text-md);
}

.p-armory .armory-training-submit button,
.p-armory .armory-recipe-card form button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #403523;
  color: #fffdf6;
  background: linear-gradient(180deg, #a77b2d, #71501d);
  box-shadow: 0 5px 10px rgba(61, 42, 18, 0.22);
  cursor: pointer;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.p-armory .armory-screen.is-charisma-demon .armory-training-submit button,
.p-armory .armory-screen.is-charisma-demon .armory-recipe-card form button {
  background: linear-gradient(180deg, #a9474d, #70272e);
}

.p-armory .armory-training-submit button:disabled,
.p-armory .armory-recipe-card form button:disabled {
  border-color: #9d968b;
  color: #ded8cc;
  background: #9d968b;
  box-shadow: none;
  cursor: not-allowed;
}

.p-armory .armory-resource-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--armory-accent-line);
  background: rgba(255, 253, 247, 0.82);
}

.p-armory .armory-resource-strip > span {
  display: grid;
  grid-template-columns: 23px 1fr;
  grid-template-rows: 1fr 1fr;
  min-width: 0;
  padding: 7px 5px;
  border-right: 1px solid rgba(100, 82, 58, 0.16);
}

.p-armory .armory-resource-strip > span:last-child { border-right: 0; }
.p-armory .armory-resource-strip b { grid-row: 1 / 3; align-self: center; color: var(--armory-accent); font-family: Georgia, serif; font-size: 1.05rem; }
.p-armory .armory-resource-strip strong { font-size: 0.76rem; }
.p-armory .armory-resource-strip small { color: var(--armory-muted); font-size: 0.51rem; }

.p-armory .armory-recipe-filter {
  display: flex;
  gap: var(--space-1);
  padding: 6px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(100, 82, 58, 0.16);
  background: rgba(246, 239, 223, .78);
  scrollbar-width: thin;
}

.p-armory .armory-recipe-filter button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(100, 82, 58, .28);
  border-radius: var(--radius-pill);
  color: var(--armory-ink);
  background: rgba(255, 254, 249, .86);
  cursor: pointer;
  font: inherit;
  font-size: .56rem;
  font-weight: 850;
}

.p-armory .armory-recipe-filter button span { color: var(--armory-accent); }
.p-armory .armory-recipe-filter button.is-selected {
  border-color: var(--armory-accent);
  color: #fffdf6;
  background: var(--armory-accent);
}
.p-armory .armory-recipe-filter button.is-selected span { color: inherit; }
.p-armory .armory-recipe-card[hidden] { display: none; }

.p-armory .armory-recipe-list {
  max-height: 403px;
  padding: 6px;
  overflow: auto;
  scrollbar-width: thin;
}

.p-armory .armory-recipe-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 84px;
  margin-bottom: 5px;
  padding: 7px;
  border: 1px solid rgba(100, 82, 58, 0.21);
  background: rgba(255, 254, 249, 0.87);
}

.p-armory .armory-item-icon {
  display: grid;
  width: 38px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--armory-accent-line);
  color: var(--armory-accent);
  background: var(--armory-accent-soft);
  font-family: Georgia, serif;
  font-size: 1.45rem;
}

.p-armory .armory-recipe-card > div { min-width: 0; }
.p-armory .armory-recipe-card > div > strong { display: block; font-size: 0.73rem; }
.p-armory .armory-recipe-card p { margin: 2px 0 5px; color: var(--armory-muted); font-size: 0.6rem; line-height: 1.28; }

.p-armory .armory-cost-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.p-armory .armory-cost-row span {
  padding: 2px 4px;
  border: 1px solid rgba(100, 82, 58, 0.18);
  color: #67553b;
  background: rgba(240, 229, 206, 0.7);
  font-size: 0.54rem;
  font-weight: 800;
}

.p-armory .armory-recipe-card form button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 0.56rem;
}

.p-armory .armory-screen form[aria-busy="true"] button[type="submit"] {
  cursor: wait;
}

.p-armory .armory-inventory {
  margin: 0 6px 6px;
  border: 1px solid var(--armory-accent-line);
  background: rgba(251, 246, 235, 0.86);
}

.p-armory .armory-section-title {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 8px;
  border-bottom: 1px solid rgba(100, 82, 58, 0.17);
  font-size: 0.61rem;
}

.p-armory .armory-section-title span { color: var(--armory-muted); }
.p-armory .armory-empty { margin: 0; padding: 12px; color: var(--armory-muted); font-size: 0.67rem; }

.p-armory .armory-inventory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  max-height: 126px;
  padding: 5px;
  overflow: auto;
}

.p-armory .armory-inventory-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 4px;
  border: 1px solid rgba(100, 82, 58, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.p-armory .armory-inventory-item > b { grid-row: 1 / 3; align-self: center; color: var(--armory-accent); font-size: var(--text-md); }
.p-armory .armory-inventory-item strong { overflow: hidden; font-size: 0.56rem; text-overflow: ellipsis; white-space: nowrap; }
.p-armory .armory-inventory-item small { color: var(--armory-muted); font-size: 0.5rem; }
.p-armory .armory-inventory-item.is-training { border-color: rgba(38, 101, 131, 0.42); background: rgba(222, 239, 245, 0.82); }

.p-armory .armory-training-log {
  margin-top: 8px;
}

.p-armory .armory-training-log-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
}

.p-armory .armory-training-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 62px;
  padding: 7px;
  border: 1px solid rgba(100, 82, 58, 0.2);
  background: rgba(255, 254, 249, 0.84);
}

.p-armory .armory-training-entry > span { color: var(--armory-accent); font-family: Georgia, serif; font-size: 1.3rem; text-align: center; }
.p-armory .armory-training-entry > div { min-width: 0; }
.p-armory .armory-training-entry strong,
.p-armory .armory-training-entry p,
.p-armory .armory-training-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-armory .armory-training-entry strong { font-size: 0.64rem; }
.p-armory .armory-training-entry p { margin: 2px 0; color: var(--armory-muted); font-size: 0.55rem; }
.p-armory .armory-training-entry small { color: #70685e; font-size: 0.5rem; }
.p-armory .armory-training-entry > b { padding: 3px 5px; color: #3c6d46; background: rgba(216, 239, 214, 0.72); font-size: 0.51rem; text-transform: uppercase; }
.p-armory .armory-training-entry.is-running > b { color: #356c82; background: rgba(207, 234, 244, 0.78); }

/* Waffenkammer V2: skalierbare Slots, Warteschlange und Fortschritt */
.p-armory .armory-profile-read { grid-template-columns: 1fr; }
.p-armory .armory-profile-read > div { min-height: 45px; }
.p-armory .armory-resource-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.p-armory .armory-recipe-card.is-locked { opacity: 0.62; }
.p-armory .armory-quality-chance {
  display: block;
  margin-top: 5px;
  color: #755c2b;
  font-size: 0.52rem;
  font-weight: 800;
}

.p-armory .armory-recipe-effect {
  display: block;
  margin-top: 4px;
  color: #397044;
  font-size: .5rem;
  font-weight: 800;
}

.p-armory .armory-training-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

.p-armory .armory-training-choice > div {
  display: grid;
  gap: 2px;
  min-height: 45px;
  padding: 7px 9px;
  border: 1px solid var(--armory-accent-line);
  background: rgba(255, 255, 255, 0.72);
}

.p-armory .armory-training-choice span { color: var(--armory-muted); font-size: 0.55rem; font-weight: 900; text-transform: uppercase; }
.p-armory .armory-training-choice strong { overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.p-armory .armory-training-slots { display: flex; gap: 5px; min-height: 49px; padding: 5px; overflow-x: auto; border: 1px solid rgba(100, 82, 58, 0.18); background: rgba(242, 234, 217, 0.58); }
.p-armory .armory-training-slots > p { margin: auto 4px; color: var(--armory-muted); font-size: 0.6rem; }

.p-armory .armory-mini-slot,
.p-armory .armory-item-slot {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(100, 82, 58, 0.3);
  color: var(--armory-ink);
  background: rgba(255, 254, 249, 0.92);
  cursor: pointer;
  font: inherit;
}

.p-armory .armory-mini-slot { width: 42px; height: 42px; }
.p-armory .armory-mini-slot > b { color: var(--armory-accent); font-size: 1.08rem; }
.p-armory .armory-mini-slot > small,
.p-armory .armory-item-slot > small {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 13px;
  padding: 1px 3px;
  color: var(--text-inverse);
  background: #766c5c;
  font-size: 0.46rem;
  font-weight: 900;
  text-align: center;
}

.p-armory .armory-mini-slot.is-selected,
.p-armory .armory-item-slot.is-selected,
.p-armory .armory-item-slot.is-training-selected { box-shadow: inset 0 0 0 2px var(--armory-accent), 0 0 0 1px rgba(255,255,255,.8); }
.p-armory .armory-mini-slot.is-rare,
.p-armory .armory-item-slot.is-rare { border-color: #3381aa; background: linear-gradient(145deg, #fff, #dcedf5); }
.p-armory .armory-mini-slot.is-epic,
.p-armory .armory-item-slot.is-epic { border-color: #9c52bd; background: linear-gradient(145deg, #fff9dd, #ead8f5); box-shadow: 0 0 9px rgba(156, 82, 189, 0.24); }
.p-armory .armory-mini-slot.is-rare > small,
.p-armory .armory-item-slot.is-rare > small { background: #28769e; }
.p-armory .armory-mini-slot.is-epic > small,
.p-armory .armory-item-slot.is-epic > small { background: #82429f; }

.p-armory .armory-recipe-filter button:focus-visible,
.p-armory .armory-mini-slot:focus-visible,
.p-armory .armory-item-slot:focus-visible {
  outline: 3px solid rgba(72, 123, 167, .62);
  outline-offset: 2px;
}

.p-armory .armory-training-submit > div small { grid-column: 1 / -1; font-size: 0.52rem; }

.p-armory .armory-inventory-filter {
  display: grid;
  grid-template-columns: minmax(135px, 1.3fr) repeat(3, minmax(90px, 0.8fr)) auto;
  gap: var(--space-1);
  padding: 6px;
  border-bottom: 1px solid rgba(100, 82, 58, 0.18);
}

.p-armory .armory-inventory-filter input,
.p-armory .armory-inventory-filter select,
.p-armory .armory-inventory-filter button {
  min-width: 0;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid var(--armory-accent-line);
  background: rgba(255,255,255,.88);
  font: inherit;
  font-size: var(--text-2xs);
}

.p-armory .armory-inventory-filter button { color: var(--text-inverse); background: #78602e; cursor: pointer; font-weight: 900; }
.p-armory .armory-inventory-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(185px, 0.72fr); gap: 6px; padding: 6px; }
.p-armory .armory-slot-grid { display: grid; grid-template-columns: repeat(6, minmax(37px, 1fr)); gap: var(--space-1); align-content: start; }
.p-armory .armory-item-slot { width: 100%; min-width: 37px; min-height: 46px; aspect-ratio: 1; }
.p-armory .armory-item-slot > span { color: var(--armory-accent); font-size: 1.15rem; }
.p-armory .armory-item-slot > b { position: absolute; top: 2px; left: 3px; color: #756a5c; font-size: 0.42rem; }
.p-armory .armory-item-slot.is-equipped { background-image: linear-gradient(135deg, transparent 72%, rgba(52, 103, 139, .45) 72%); }
.p-armory .armory-item-slot.is-training { opacity: .68; background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(48, 119, 151, .12) 6px, rgba(48, 119, 151, .12) 12px); }
.p-armory .armory-item-slot.is-salvaging { opacity: .56; filter: grayscale(.7); }
.p-armory .armory-item-slot.is-broken { opacity: .65; background-image: linear-gradient(135deg, transparent 48%, rgba(129, 46, 46, .38) 49%, rgba(129, 46, 46, .38) 52%, transparent 53%); }

.p-armory .armory-item-detail { min-height: 225px; padding: 8px; border: 1px solid rgba(100, 82, 58, .22); background: rgba(255,254,249,.9); }
.p-armory .armory-item-detail.is-rare { border-color: rgba(45, 117, 156, .55); }
.p-armory .armory-item-detail.is-epic { border-color: rgba(130, 66, 159, .58); background: linear-gradient(145deg, rgba(255,254,249,.96), rgba(239,224,248,.82)); }
.p-armory .armory-item-detail-head { display: grid; grid-template-columns: 39px 1fr; gap: 7px; align-items: center; }
.p-armory .armory-item-detail-head > span { display: grid; height: 39px; place-items: center; border: 1px solid var(--armory-accent-line); color: var(--armory-accent); font-size: 1.25rem; }
.p-armory .armory-item-detail-head small,
.p-armory .armory-item-detail-head strong { display: block; }
.p-armory .armory-item-detail-head small { color: var(--armory-muted); font-size: .5rem; text-transform: uppercase; }
.p-armory .armory-item-detail-head strong { font-size: var(--text-xs); }
.p-armory .armory-item-detail > p { min-height: 35px; margin: 7px 0; color: var(--armory-muted); font-size: .56rem; line-height: 1.3; }
.p-armory .armory-item-detail dl { display: grid; gap: 2px; margin: 0; }
.p-armory .armory-item-detail dl > div { display: flex; justify-content: space-between; gap: 5px; padding: 2px 0; border-bottom: 1px solid rgba(100,82,58,.1); font-size: .52rem; }
.p-armory .armory-item-detail dt { color: var(--armory-muted); }
.p-armory .armory-item-detail dd { margin: 0; font-weight: 800; text-align: right; }
.p-armory .armory-item-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); margin-top: 8px; }
.p-armory .armory-item-actions form { margin: 0; }
.p-armory .armory-item-actions button { width: 100%; min-height: 31px; padding: 3px 5px; border: 1px solid #725726; color: var(--text-inverse); background: #8f6d2d; cursor: pointer; font: inherit; font-size: .51rem; font-weight: 900; }
.p-armory .armory-item-actions button:disabled { border-color: #a39b8f; background: #aaa297; cursor: not-allowed; }
.p-armory .armory-item-actions [data-armory-salvage-form] button { border-color: #77474a; background: #884d50; }
.p-armory .armory-inventory-pages { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 6px 6px; }
.p-armory .armory-inventory-pages a { display: grid; min-width: 26px; height: 26px; place-items: center; border: 1px solid var(--armory-accent-line); color: var(--armory-ink); background: var(--surface-card); font-size: .56rem; text-decoration: none; }
.p-armory .armory-inventory-pages a[aria-current="page"] { color: var(--text-inverse); background: var(--armory-accent); }

.p-armory .armory-salvage-list { margin: 0 6px 6px; padding-top: 5px; border-top: 1px solid var(--armory-accent-line); }
.p-armory .armory-salvage-list > strong { display: block; margin-bottom: 4px; font-size: .61rem; }
.p-armory .armory-salvage-list article { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 5px; align-items: center; min-height: 40px; margin-bottom: 3px; padding: 4px 5px 7px; border: 1px solid rgba(100,82,58,.18); background: rgba(255,255,255,.72); }
.p-armory .armory-salvage-list article > span { color: var(--armory-accent); font-size: var(--text-md); text-align: center; }
.p-armory .armory-salvage-list article strong,
.p-armory .armory-salvage-list article small { display: block; font-size: .53rem; }
.p-armory .armory-salvage-list article small { color: var(--armory-muted); }
.p-armory .armory-salvage-list article > b { font-size: .5rem; }
.p-armory .armory-salvage-list article > i { position: absolute; right: 5px; bottom: 3px; left: 5px; height: 3px; overflow: hidden; background: rgba(80,65,48,.12); }
.p-armory .armory-salvage-list article > i b { display: block; width: 0; height: 100%; background: #985353; }

.p-armory .armory-active-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 7px; }
.p-armory .armory-training-entry { position: relative; overflow: hidden; }
.p-armory .armory-training-entry > div > em { display: block; margin-top: 4px; color: #6c5e49; font-size: .53rem; font-style: normal; line-height: 1.25; white-space: normal; }
.p-armory .armory-training-entry > div > i { display: block; height: 5px; margin-top: 6px; overflow: hidden; border-radius: var(--radius-sm); background: rgba(77,65,48,.13); }
.p-armory .armory-training-entry > div > i b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2f789a, #6cb7ce); transition: width 1s linear; }
.p-armory .armory-training-entry.is-epic > div > i b { background: linear-gradient(90deg, #7a3e97, #d293e6); }
.p-armory .armory-training-entry.is-empty { opacity: .58; border-style: dashed; }
.p-armory .armory-queue-strip { padding: 0 7px 7px; }
.p-armory .armory-queue-strip ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin: 0; padding: 5px 0 0; list-style: none; }
.p-armory .armory-queue-strip li { display: grid; grid-template-columns: 20px 25px minmax(0,1fr); gap: var(--space-1); align-items: center; min-height: 48px; padding: 4px; border: 1px solid rgba(100,82,58,.19); background: rgba(255,254,249,.82); }
.p-armory .armory-queue-strip li > b { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--text-inverse); background: var(--armory-accent); font-size: .48rem; }
.p-armory .armory-queue-strip li > span { color: var(--armory-accent); font-size: .92rem; text-align: center; }
.p-armory .armory-queue-strip li strong,
.p-armory .armory-queue-strip li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .51rem; }
.p-armory .armory-queue-strip li small { color: var(--armory-muted); }
.p-armory .armory-queue-strip li > em { grid-column: 1 / -1; color: #39748a; font-size: .47rem; font-style: normal; text-align: right; }
.p-armory .armory-queue-strip li.is-empty { opacity: .48; border-style: dashed; }
.p-armory .armory-training-history { padding: 0 7px 7px; }
.p-armory .armory-training-history > article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 6px; align-items: center; min-height: 39px; padding: 4px 6px; border-bottom: 1px solid rgba(100,82,58,.13); background: rgba(255,255,255,.55); }
.p-armory .armory-training-history article > span { color: var(--armory-accent); text-align: center; }
.p-armory .armory-training-history article strong,
.p-armory .armory-training-history article small { display: block; font-size: .54rem; }
.p-armory .armory-training-history article small { color: var(--armory-muted); }
.p-armory .armory-training-history article > b { color: #397544; font-size: .53rem; }

/* Der ruhende globale Tutor darf die Werkbank und Warteschlange nicht verdecken. */
.p-armory .game-tutor-panel.is-passive { display: none; }

@media (max-width: 1260px) {
  .p-armory .armory-layout {
    grid-template-columns: minmax(230px, 0.72fr) minmax(520px, 1.55fr);
  }

  .p-armory .armory-workbench-panel {
    grid-column: 1 / -1;
  }

  .p-armory .armory-recipe-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .p-armory .armory-training-log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-armory .armory-slot-grid { grid-template-columns: repeat(10, minmax(38px, 1fr)); }
  .p-armory .armory-inventory-workspace { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 860px) {
  body.p-armory.game-body .site-shell { width: min(100% - 12px, 760px); }
  .p-armory .armory-screen { padding: 7px; }
  .p-armory .armory-command,
.p-armory .armory-layout { grid-template-columns: 1fr; }
  .p-armory .armory-flow { grid-template-columns: repeat(5, minmax(88px, 1fr)); overflow-x: auto; }
  .p-armory .armory-flow span { padding: 0 8px; white-space: nowrap; }
  .p-armory .armory-charisma-visual { height: 156px; }
  .p-armory .armory-subject-list { max-height: 330px; }
  .p-armory .armory-workbench-panel { grid-column: auto; }
  .p-armory .armory-recipe-list { grid-template-columns: 1fr; }
  .p-armory .armory-slot-grid { grid-template-columns: repeat(8, minmax(38px, 1fr)); }
  .p-armory .armory-inventory-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-armory .armory-inventory-filter input { grid-column: 1 / -1; }
  .p-armory .armory-queue-strip ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .p-armory .armory-command { display: block; }
  .p-armory .armory-charisma-card,
.p-armory .armory-charisma-visual { margin-top: 6px; }
  .p-armory .armory-charisma-visual { height: 132px; }
  .p-armory .armory-player-notice { align-items: flex-start; flex-direction: column; }
  .p-armory .armory-profile-stage { grid-template-columns: 1fr; }
  .p-armory .armory-profile-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-armory .armory-family-grid,
.p-armory .armory-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-armory .armory-training-form > label { grid-template-columns: 1fr; gap: 3px; }
  .p-armory .armory-training-log-grid { grid-template-columns: 1fr; }
  .p-armory .armory-recipe-card { grid-template-columns: 38px minmax(0, 1fr); }
  .p-armory .armory-recipe-card form { grid-column: 2; }
  .p-armory .armory-resource-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-armory .armory-training-choice,
.p-armory .armory-active-lanes,
.p-armory .armory-inventory-workspace { grid-template-columns: 1fr; }
  .p-armory .armory-slot-grid { grid-template-columns: repeat(6, minmax(36px, 1fr)); }
  .p-armory .armory-inventory-filter { grid-template-columns: 1fr; }
  .p-armory .armory-inventory-filter input { grid-column: auto; }
  .p-armory .armory-equipped-slots { grid-template-columns: 1fr; }
  .p-armory .armory-subject-card { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .p-armory .armory-subject-slots { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .p-armory .armory-subject-card,
.p-armory .armory-family-card > i b,
.p-armory .armory-room-art,
.p-armory .armory-charisma-visual img { transition: none; }
}
}

/* SOURCE: 40-screens/courtyard.css */
/* =========================================================
   SCREEN: Courtyard
   Scope: .p-courtyard only
   Root: .p-courtyard
   PHP: game/courtyard-view.php
   ========================================================= */

@layer screens {
.p-courtyard .courtyard-shell {
  --courtyard-bg: #070c18;
  --courtyard-panel: rgba(9, 16, 31, 0.94);
  --courtyard-line: rgba(145, 177, 224, 0.22);
  --courtyard-muted: #91a0b8;
  --courtyard-text: #edf5ff;
  --courtyard-cyan: #76e6ff;
  --courtyard-gold: #ffd889;
  --courtyard-red: #ff7785;
  --courtyard-violet: #b99aff;
  color: var(--courtyard-text);
  display: grid;
  gap: var(--space-3-5);
  margin: 0 auto 36px;
  max-width: 1880px;
  padding: 0 14px;
}

.p-courtyard .courtyard-shell *,
.p-courtyard .courtyard-shell *::before,
.p-courtyard .courtyard-shell *::after {
  box-sizing: border-box;
}

.p-courtyard .courtyard-shell button,
.p-courtyard .courtyard-shell select,
.p-courtyard .courtyard-shell input {
  font: inherit;
}

.p-courtyard .courtyard-gate-hero {
  align-items: end;
  background:
    linear-gradient(90deg, rgba(3, 8, 19, 0.94) 0%, rgba(3, 8, 19, 0.67) 36%, rgba(3, 8, 19, 0.13) 67%, rgba(3, 8, 19, 0.72) 100%),
    linear-gradient(0deg, rgba(3, 8, 19, 0.97) 0%, transparent 45%),
    url('/assets/game/courtyard/school-gates-v1.webp') center 43% / cover no-repeat;
  border: 1px solid rgba(173, 203, 245, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  min-height: 390px;
  overflow: hidden;
  padding: 34px;
  position: relative;
}

.p-courtyard .courtyard-gate-hero::before,
.p-courtyard .courtyard-gate-hero::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.p-courtyard .courtyard-gate-hero::before {
  background: radial-gradient(circle at 53% 29%, rgba(255, 217, 137, 0.19), transparent 34%);
}

.p-courtyard .courtyard-gate-hero::after {
  background: linear-gradient(90deg, transparent, rgba(118, 230, 255, 0.12), transparent);
  height: 1px;
  inset: auto 0 18px;
}

.p-courtyard .courtyard-gate-copy,
.p-courtyard .courtyard-rank-card {
  position: relative;
  z-index: 1;
}

.p-courtyard .courtyard-gate-copy {
  max-width: 680px;
}

.p-courtyard .courtyard-kicker,
.p-courtyard .courtyard-building header > span,
.p-courtyard .courtyard-room-head > div > span,
.p-courtyard .courtyard-resonance-copy > span,
.p-courtyard .courtyard-action-deck header span,
.p-courtyard .courtyard-student-section > header span,
.p-courtyard .courtyard-panel > header span,
.p-courtyard .courtyard-last-echo > span {
  color: var(--courtyard-cyan);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.p-courtyard .courtyard-gate-copy h1 {
  font-size: clamp(2.1rem, 4vw, 4.8rem);
  letter-spacing: -0.045em;
  line-height: 0.96;
  margin: 8px 0 14px;
  max-width: 810px;
  text-shadow: 0 5px 24px rgba(0, 0, 0, 0.7);
}

.p-courtyard .courtyard-gate-copy > p {
  color: #d9e5f7;
  font-size: 1.03rem;
  line-height: 1.55;
  margin: 0;
  max-width: 590px;
}

.p-courtyard .courtyard-gate-rule {
  align-items: center;
  background: rgba(4, 10, 22, 0.78);
  border: 1px solid rgba(255, 216, 137, 0.38);
  border-radius: var(--radius-sm-plus);
  display: inline-flex;
  gap: var(--space-3);
  margin-top: 22px;
  padding: 10px 13px;
}

.p-courtyard .courtyard-gate-rule strong {
  color: var(--courtyard-gold);
  white-space: nowrap;
}

.p-courtyard .courtyard-gate-rule span {
  color: #bdcbe0;
  font-size: var(--text-sm-plus);
}

.p-courtyard .courtyard-rank-card {
  align-self: stretch;
  backdrop-filter: blur(10px);
  background: linear-gradient(160deg, rgba(8, 16, 34, 0.83), rgba(3, 8, 19, 0.95));
  border: 1px solid rgba(118, 230, 255, 0.32);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 22px;
}

.p-courtyard .courtyard-rank-card > span {
  color: var(--courtyard-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
}

.p-courtyard .courtyard-rank-card > strong {
  color: var(--text-inverse);
  font-size: 5.4rem;
  letter-spacing: -0.08em;
  line-height: 0.9;
  margin: 8px 0;
}

.p-courtyard .courtyard-rank-card > b {
  color: var(--courtyard-gold);
  font-size: 0.94rem;
}

.p-courtyard .courtyard-rank-card progress,
.p-courtyard .courtyard-resonance-card progress,
.p-courtyard .courtyard-student-card progress {
  appearance: none;
  background: rgba(255, 255, 255, 0.09);
  border: 0;
  border-radius: var(--radius-pill);
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.p-courtyard .courtyard-rank-card progress {
  margin: 18px 0 9px;
}

.p-courtyard .courtyard-shell progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.09);
}

.p-courtyard .courtyard-shell progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--courtyard-cyan), var(--courtyard-gold));
}

.p-courtyard .courtyard-shell progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--courtyard-cyan), var(--courtyard-gold));
}

.p-courtyard .courtyard-rank-card small {
  color: var(--courtyard-muted);
  font-size: var(--text-xs-plus);
}

.p-courtyard .courtyard-signal-bar {
  background: rgba(8, 14, 27, 0.96);
  border: 1px solid var(--courtyard-line);
  border-radius: 13px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.p-courtyard .courtyard-signal-bar > div {
  border-right: 1px solid var(--courtyard-line);
  display: grid;
  gap: 2px;
  padding: 10px 14px;
}

.p-courtyard .courtyard-signal-bar > div:last-child {
  border-right: 0;
}

.p-courtyard .courtyard-signal-bar span {
  color: var(--courtyard-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.p-courtyard .courtyard-signal-bar strong {
  color: var(--text-inverse);
  font-size: 1.12rem;
}

.p-courtyard .courtyard-signal-bar small {
  color: #718198;
  font-size: var(--text-xs);
}

.p-courtyard .courtyard-signal-bar__actions strong {
  color: var(--courtyard-gold);
}

.p-courtyard .courtyard-signal-bar__cooldown strong {
  color: var(--courtyard-cyan);
}

.p-courtyard .courtyard-last-echo {
  align-items: center;
  background: linear-gradient(90deg, rgba(118, 230, 255, 0.1), rgba(8, 14, 27, 0.96) 24%);
  border: 1px solid rgba(118, 230, 255, 0.22);
  border-radius: var(--radius-sm-plus);
  display: grid;
  gap: var(--space-3-5);
  grid-template-columns: auto 1fr;
  padding: 9px 13px;
}

.p-courtyard .courtyard-last-echo p {
  color: #dbe8f9;
  font-size: var(--text-sm-plus);
  margin: 0;
}

.p-courtyard .courtyard-layout {
  align-items: start;
  display: grid;
  gap: var(--space-3-5);
  grid-template-columns: 280px minmax(560px, 1fr) 320px;
}

.p-courtyard .courtyard-building,
.p-courtyard .courtyard-room-stage,
.p-courtyard .courtyard-panel {
  background: var(--courtyard-panel);
  border: 1px solid var(--courtyard-line);
  border-radius: var(--radius-md-plus);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.23);
}

.p-courtyard .courtyard-building {
  overflow: hidden;
  position: relative;
}

.p-courtyard .courtyard-building > header,
.p-courtyard .courtyard-panel > header {
  display: grid;
  gap: 3px;
  padding: 14px 15px;
}

.p-courtyard .courtyard-building > header {
  background: linear-gradient(130deg, rgba(118, 230, 255, 0.1), transparent);
  border-bottom: 1px solid var(--courtyard-line);
}

.p-courtyard .courtyard-building header strong,
.p-courtyard .courtyard-panel > header strong {
  color: #f6f9ff;
  font-size: 0.94rem;
}

.p-courtyard .courtyard-floor-stack {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.p-courtyard .courtyard-floor {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: inherit;
  display: grid;
  gap: 9px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 66px;
  padding: 8px 9px;
  text-decoration: none;
  transition: 160ms ease;
}

.p-courtyard .courtyard-floor + .courtyard-floor {
  border-top-color: rgba(145, 177, 224, 0.11);
}

.p-courtyard .courtyard-floor:hover,
.p-courtyard .courtyard-floor:focus-visible,
.p-courtyard .courtyard-floor.is-active {
  background: rgba(118, 230, 255, 0.08);
  border-color: rgba(118, 230, 255, 0.28);
  outline: none;
  transform: translateX(2px);
}

.p-courtyard .courtyard-floor.is-light.is-active {
  background: rgba(255, 216, 137, 0.09);
  border-color: rgba(255, 216, 137, 0.33);
}

.p-courtyard .courtyard-floor.is-shadow.is-active {
  background: rgba(185, 154, 255, 0.1);
  border-color: rgba(185, 154, 255, 0.34);
}

.p-courtyard .courtyard-floor-number {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  color: var(--text-inverse);
  display: flex;
  font-size: 0.76rem;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.p-courtyard .courtyard-floor.is-light .courtyard-floor-number {
  color: var(--courtyard-gold);
}

.p-courtyard .courtyard-floor.is-shadow .courtyard-floor-number {
  color: var(--courtyard-violet);
}

.p-courtyard .courtyard-floor-copy,
.p-courtyard .courtyard-floor-state {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.p-courtyard .courtyard-floor-copy small,
.p-courtyard .courtyard-floor-state small {
  color: #71839e;
  font-size: 0.59rem;
  font-style: normal;
}

.p-courtyard .courtyard-floor-copy strong {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-courtyard .courtyard-floor-copy em {
  color: var(--courtyard-muted);
  font-size: 0.63rem;
  font-style: normal;
}

.p-courtyard .courtyard-floor-state {
  justify-items: end;
}

.p-courtyard .courtyard-floor-state b {
  color: #dfeaff;
  font-size: 0.84rem;
}

.p-courtyard .courtyard-floor.is-rank-locked {
  opacity: 0.66;
}

.p-courtyard .courtyard-building > footer {
  background: rgba(3, 7, 15, 0.54);
  border-top: 1px solid var(--courtyard-line);
  display: grid;
  gap: 2px;
  padding: 11px 14px;
}

.p-courtyard .courtyard-building > footer span,
.p-courtyard .courtyard-building > footer strong {
  color: var(--courtyard-muted);
  font-size: 0.66rem;
}

.p-courtyard .courtyard-building > footer strong {
  color: #ccd9ec;
}

.p-courtyard .courtyard-room-stage {
  background:
    radial-gradient(circle at 84% 2%, rgba(118, 230, 255, 0.09), transparent 30%),
    var(--courtyard-panel);
  min-width: 0;
  overflow: hidden;
}

.p-courtyard .courtyard-room-stage.is-light {
  background: radial-gradient(circle at 84% 2%, rgba(255, 216, 137, 0.12), transparent 31%), var(--courtyard-panel);
}

.p-courtyard .courtyard-room-stage.is-shadow {
  background: radial-gradient(circle at 84% 2%, rgba(185, 154, 255, 0.13), transparent 31%), var(--courtyard-panel);
}

.p-courtyard .courtyard-room-head {
  align-items: start;
  border-bottom: 1px solid var(--courtyard-line);
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr auto;
  padding: 20px;
}

.p-courtyard .courtyard-room-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.7rem);
  letter-spacing: -0.035em;
  margin: 4px 0 7px;
}

.p-courtyard .courtyard-room-head p {
  color: #aebcd0;
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
  max-width: 680px;
}

.p-courtyard .courtyard-room-strength {
  background: rgba(3, 8, 18, 0.62);
  border: 1px solid var(--courtyard-line);
  border-radius: var(--radius-sm-plus);
  display: grid;
  gap: 2px;
  min-width: 125px;
  padding: 10px 12px;
  text-align: right;
}

.p-courtyard .courtyard-room-strength span,
.p-courtyard .courtyard-room-strength small {
  color: var(--courtyard-muted);
  font-size: 0.63rem;
}

.p-courtyard .courtyard-room-strength strong {
  color: var(--courtyard-gold);
  font-size: 1.25rem;
}

.p-courtyard .courtyard-resonance-card {
  align-items: center;
  background: rgba(4, 10, 22, 0.63);
  border-bottom: 1px solid var(--courtyard-line);
  display: grid;
  gap: var(--space-3-5);
  grid-template-columns: minmax(190px, 1fr) minmax(120px, 0.6fr) auto;
  padding: 12px 20px;
}

.p-courtyard .courtyard-resonance-copy {
  display: grid;
  gap: 2px;
}

.p-courtyard .courtyard-resonance-copy strong {
  font-size: var(--text-md);
}

.p-courtyard .courtyard-resonance-copy small {
  color: var(--courtyard-muted);
  font-size: 0.65rem;
}

.p-courtyard .courtyard-resonance-lanes {
  display: flex;
  gap: 5px;
}

.p-courtyard .courtyard-resonance-lanes span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--courtyard-muted);
  display: grid;
  font-size: 0.57rem;
  gap: 1px;
  min-width: 54px;
  padding: 5px 7px;
}

.p-courtyard .courtyard-resonance-lanes b {
  color: var(--text-inverse);
  font-size: var(--text-xs-plus);
}

.p-courtyard .courtyard-action-deck,
.p-courtyard .courtyard-student-section {
  padding: 18px 20px;
}

.p-courtyard .courtyard-action-deck {
  border-bottom: 1px solid var(--courtyard-line);
}

.p-courtyard .courtyard-action-deck > header,
.p-courtyard .courtyard-student-section > header {
  align-items: end;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: 12px;
}

.p-courtyard .courtyard-action-deck h3,
.p-courtyard .courtyard-student-section h3 {
  font-size: var(--text-md);
  margin: 2px 0 0;
}

.p-courtyard .courtyard-action-deck > header small {
  color: var(--courtyard-muted);
  font-size: 0.66rem;
}

.p-courtyard .courtyard-target-select {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--courtyard-line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto 1fr;
  margin-bottom: 9px;
  padding: 6px 8px 6px 11px;
}

.p-courtyard .courtyard-target-select > span {
  color: var(--courtyard-muted);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.p-courtyard .courtyard-target-select select,
.p-courtyard .courtyard-mandate-form select,
.p-courtyard .courtyard-transfer-form select,
.p-courtyard .courtyard-student-section input {
  background: #0a1222;
  border: 1px solid rgba(145, 177, 224, 0.24);
  border-radius: 6px;
  color: #eaf3ff;
  min-height: 34px;
  padding: 6px 8px;
  width: 100%;
}

.p-courtyard .courtyard-action-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.p-courtyard .courtyard-action {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(145, 177, 224, 0.2);
  border-radius: var(--radius-sm);
  color: #eaf3ff;
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 9px;
  text-align: left;
  transition: 150ms ease;
}

.p-courtyard .courtyard-action:hover:not(:disabled),
.p-courtyard .courtyard-action:focus-visible:not(:disabled) {
  background: rgba(118, 230, 255, 0.09);
  border-color: rgba(118, 230, 255, 0.42);
  outline: none;
  transform: translateY(-2px);
}

.p-courtyard .courtyard-action.is-gold {
  border-color: rgba(255, 216, 137, 0.29);
}

.p-courtyard .courtyard-action.is-red {
  border-color: rgba(255, 119, 133, 0.32);
}

.p-courtyard .courtyard-action.is-violet {
  border-color: rgba(185, 154, 255, 0.29);
}

.p-courtyard .courtyard-action strong {
  font-size: 0.75rem;
}

.p-courtyard .courtyard-action span {
  color: var(--courtyard-muted);
  font-size: 0.64rem;
  line-height: 1.35;
}

.p-courtyard .courtyard-action small {
  align-self: end;
  color: var(--courtyard-gold);
  font-size: var(--text-2xs);
}

.p-courtyard .courtyard-action:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.45;
}

.p-courtyard .courtyard-student-section > header label {
  width: min(230px, 40%);
}

.p-courtyard .courtyard-student-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.p-courtyard .courtyard-student-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(145, 177, 224, 0.17);
  border-radius: var(--radius-sm-plus);
  cursor: pointer;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: 10px;
  transition: 150ms ease;
}

.p-courtyard .courtyard-student-card:hover,
.p-courtyard .courtyard-student-card:focus-visible,
.p-courtyard .courtyard-student-card.is-targeted {
  background: rgba(118, 230, 255, 0.075);
  border-color: rgba(118, 230, 255, 0.38);
  outline: none;
}

.p-courtyard .courtyard-student-card.is-gold {
  border-color: rgba(255, 216, 137, 0.32);
}

.p-courtyard .courtyard-student-card.is-blue {
  border-color: rgba(111, 161, 255, 0.28);
}

.p-courtyard .courtyard-student-head {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.p-courtyard .courtyard-student-avatar {
  align-items: center;
  background: linear-gradient(145deg, rgba(118, 230, 255, 0.26), rgba(185, 154, 255, 0.2));
  border: 1px solid rgba(118, 230, 255, 0.28);
  border-radius: 48% 48% 10px 10px;
  color: var(--text-inverse);
  display: flex;
  font-size: 0.8rem;
  font-weight: 900;
  height: 56px;
  justify-content: center;
  width: 48px;
}

.p-courtyard .courtyard-student-avatar > .game-student-generated-image {
  object-fit: cover;
  object-position: 50% 28%;
}

.p-courtyard .courtyard-student-card.is-open .courtyard-student-head {
  align-items: start;
  grid-template-columns: 88px minmax(0, 1fr) auto;
}

.p-courtyard .courtyard-student-card.is-open .courtyard-student-avatar {
  border-radius: var(--radius-md-plus);
  height: 112px;
  width: 88px;
}

.p-courtyard .courtyard-student-access {
  align-self: start;
  margin: 0 10px 8px 58px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  color: #b8c6ca;
  font-size: .7rem;
  font-style: normal;
  letter-spacing: .04em;
}

.p-courtyard .courtyard-student-access.is-gold { border-color: rgba(237,197,94,.42); color: #f2d787; }
.p-courtyard .courtyard-student-access.is-cyan { border-color: rgba(103,214,255,.38); color: #8ce7ff; }
.p-courtyard .courtyard-student-access.is-red { border-color: rgba(255,96,103,.42); color: #ff9a9e; }
.p-courtyard .courtyard-student-card.is-access-hostile,
.p-courtyard .courtyard-student-card.is-access-blocked { box-shadow: inset 3px 0 0 rgba(255,82,91,.58); }
.p-courtyard .courtyard-student-access-note { color: #e7c6c8; }
.p-courtyard .courtyard-student-detail blockquote {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(255,96,103,.55);
  background: rgba(90,18,24,.22);
  color: #ffd2d4;
  font-style: italic;
}

.p-courtyard .courtyard-student-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.p-courtyard .courtyard-student-head strong {
  font-size: 0.77rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-courtyard .courtyard-student-head small {
  color: var(--courtyard-muted);
  font-size: 0.61rem;
}

.p-courtyard .courtyard-student-head > b {
  color: var(--courtyard-gold);
  font-size: var(--text-md);
}

.p-courtyard .courtyard-student-card > p {
  color: #b8c5d8;
  font-size: 0.66rem;
  line-height: 1.35;
  margin: 0;
  min-height: 34px;
}

.p-courtyard .courtyard-student-read {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-courtyard .courtyard-student-read span {
  background: rgba(255, 255, 255, 0.035);
  border-radius: 5px;
  color: #7f8fa6;
  display: grid;
  font-size: 0.56rem;
  gap: 1px;
  padding: 4px 5px;
}

.p-courtyard .courtyard-student-read b {
  color: #dae7f9;
  font-size: 0.63rem;
}

.p-courtyard .courtyard-student-note {
  color: #7e8ea5;
  font-size: var(--text-2xs);
  line-height: 1.3;
}

.p-courtyard .courtyard-transfer-form {
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.p-courtyard .courtyard-transfer-form select {
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
}

.p-courtyard .courtyard-transfer-form button,
.p-courtyard .courtyard-mandate-form button {
  background: linear-gradient(135deg, #1c7187, #294f9d);
  border: 1px solid rgba(118, 230, 255, 0.35);
  border-radius: 6px;
  color: var(--text-inverse);
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 6px 8px;
}

.p-courtyard .courtyard-transfer-form button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.4;
}

.p-courtyard .courtyard-empty {
  border: 1px dashed rgba(145, 177, 224, 0.24);
  border-radius: 9px;
  display: grid;
  gap: 3px;
  padding: 16px;
  text-align: center;
}

.p-courtyard .courtyard-empty strong {
  font-size: 0.8rem;
}

.p-courtyard .courtyard-empty span {
  color: var(--courtyard-muted);
  font-size: var(--text-xs);
}

.p-courtyard .courtyard-planner {
  display: grid;
  gap: var(--space-2-5);
  position: sticky;
  top: 10px;
}

.p-courtyard .courtyard-panel {
  overflow: hidden;
}

.p-courtyard .courtyard-panel > header {
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--courtyard-line);
}

.p-courtyard .courtyard-panel > p {
  color: #9cacbf;
  font-size: 0.69rem;
  line-height: 1.45;
  margin: 0;
  padding: 11px 14px 0;
}

.p-courtyard .courtyard-membership-list {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
}

.p-courtyard .courtyard-membership-list article {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(145, 177, 224, 0.13);
  border-radius: 7px;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr auto;
  padding: 7px 9px;
}

.p-courtyard .courtyard-membership-list article > span,
.p-courtyard .courtyard-membership-list article > small {
  color: var(--courtyard-muted);
  font-size: 0.59rem;
}

.p-courtyard .courtyard-membership-list article > strong {
  font-size: 0.71rem;
  text-align: right;
}

.p-courtyard .courtyard-membership-list article > small {
  grid-column: 1 / -1;
}

.p-courtyard .courtyard-membership-list article.is-active {
  border-color: rgba(255, 216, 137, 0.28);
}

.p-courtyard .courtyard-membership-list article.is-empty {
  border-style: dashed;
  opacity: 0.64;
}

.p-courtyard .courtyard-mandate-form {
  border-top: 1px solid var(--courtyard-line);
  display: grid;
  gap: 6px;
  padding: 11px 12px;
}

.p-courtyard .courtyard-mandate-lock {
  background: rgba(255, 119, 133, 0.045);
  border-top: 1px solid rgba(255, 119, 133, 0.15);
  display: grid;
  gap: 2px;
  padding: 10px 13px;
}

.p-courtyard .courtyard-mandate-lock span,
.p-courtyard .courtyard-mandate-lock strong {
  color: #b8c4d7;
  font-size: 0.64rem;
}

.p-courtyard .courtyard-mandate-lock strong {
  color: var(--courtyard-red);
}

.p-courtyard .courtyard-settlement-panel ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 6px 12px 11px;
}

.p-courtyard .courtyard-settlement-panel li {
  border-bottom: 1px solid rgba(145, 177, 224, 0.1);
  counter-increment: settlement;
  display: grid;
  gap: 2px;
  padding: 8px 2px 8px 24px;
  position: relative;
}

.p-courtyard .courtyard-settlement-panel ol {
  counter-reset: settlement;
}

.p-courtyard .courtyard-settlement-panel li::before {
  align-items: center;
  background: rgba(118, 230, 255, 0.1);
  border: 1px solid rgba(118, 230, 255, 0.25);
  border-radius: 50%;
  color: var(--courtyard-cyan);
  content: counter(settlement);
  display: flex;
  font-size: var(--text-2xs);
  height: 17px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 9px;
  width: 17px;
}

.p-courtyard .courtyard-settlement-panel li:last-child {
  border-bottom: 0;
}

.p-courtyard .courtyard-settlement-panel b {
  font-size: 0.67rem;
}

.p-courtyard .courtyard-settlement-panel li span {
  color: var(--courtyard-muted);
  font-size: 0.61rem;
  line-height: 1.35;
}

.p-courtyard .courtyard-rank99-panel {
  background: linear-gradient(145deg, rgba(185, 154, 255, 0.08), var(--courtyard-panel));
  opacity: 0.75;
}

.p-courtyard .courtyard-rank99-panel.is-open {
  border-color: rgba(255, 216, 137, 0.38);
  opacity: 1;
}

.p-courtyard .courtyard-rank99-panel > p {
  padding-bottom: 9px;
}

.p-courtyard .courtyard-rank99-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 12px 12px;
}

.p-courtyard .courtyard-rank99-panel > div span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  color: #aebbd0;
  font-size: 0.57rem;
  padding: 4px 7px;
}

.p-courtyard .courtyard-intent-panel > article {
  border-bottom: 1px solid rgba(145, 177, 224, 0.1);
  display: grid;
  gap: 2px;
  padding: 8px 13px;
}

.p-courtyard .courtyard-intent-panel > article strong,
.p-courtyard .courtyard-intent-panel > article span,
.p-courtyard .courtyard-intent-panel > article small {
  font-size: 0.63rem;
}

.p-courtyard .courtyard-intent-panel > article span,
.p-courtyard .courtyard-intent-panel > article small {
  color: var(--courtyard-muted);
}

.p-courtyard .courtyard-intent-panel > article.is-accepted strong {
  color: var(--courtyard-gold);
}

.p-courtyard .courtyard-oath {
  align-items: center;
  background: rgba(7, 12, 23, 0.96);
  border: 1px solid var(--courtyard-line);
  border-radius: var(--radius-sm-plus);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto 1fr;
  padding: 11px 14px;
}

.p-courtyard .courtyard-oath strong {
  color: var(--courtyard-gold);
  font-size: 0.76rem;
}

.p-courtyard .courtyard-oath span {
  color: #9eacc0;
  font-size: 0.7rem;
}

.p-courtyard .courtyard-shell--pending {
  min-height: 60vh;
  place-items: center;
}

.p-courtyard .courtyard-pending-card {
  background: var(--courtyard-panel);
  border: 1px solid var(--courtyard-line);
  border-radius: 15px;
  max-width: 540px;
  padding: 28px;
  text-align: center;
}

.p-courtyard .courtyard-pending-card h1 {
  margin: 7px 0;
}

.p-courtyard .courtyard-pending-card p {
  color: var(--courtyard-muted);
  margin: 0;
}

.p-courtyard .courtyard-student-card[hidden] {
  display: none;
}

@media (max-width: 1380px) {
  .p-courtyard .courtyard-layout {
    grid-template-columns: 250px minmax(500px, 1fr);
  }

  .p-courtyard .courtyard-planner {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: static;
  }

  .p-courtyard .courtyard-intent-panel {
    grid-column: 1 / -1;
  }

  .p-courtyard .courtyard-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .p-courtyard .courtyard-gate-hero {
    grid-template-columns: 1fr 210px;
    min-height: 340px;
    padding: 24px;
  }

  .p-courtyard .courtyard-layout {
    grid-template-columns: 1fr;
  }

  .p-courtyard .courtyard-building,
.p-courtyard .courtyard-planner {
    position: static;
  }

  .p-courtyard .courtyard-floor-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-courtyard .courtyard-building > footer {
    display: none;
  }

  .p-courtyard .courtyard-student-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .p-courtyard .courtyard-shell {
    padding: 0 7px;
  }

  .p-courtyard .courtyard-gate-hero {
    background:
      linear-gradient(0deg, rgba(3, 8, 19, 0.97) 0%, rgba(3, 8, 19, 0.48) 74%, rgba(3, 8, 19, 0.5) 100%),
      url('/assets/game/courtyard/school-gates-v1.webp') 51% center / cover no-repeat;
    grid-template-columns: 1fr;
    min-height: 520px;
    padding: 20px;
  }

  .p-courtyard .courtyard-gate-copy {
    align-self: end;
  }

  .p-courtyard .courtyard-gate-copy h1 {
    font-size: 2.35rem;
  }

  .p-courtyard .courtyard-gate-rule {
    align-items: start;
    display: grid;
  }

  .p-courtyard .courtyard-rank-card {
    align-self: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 0;
  }

  .p-courtyard .courtyard-rank-card > strong {
    font-size: 3.4rem;
    grid-row: 1 / 4;
    margin-right: 14px;
  }

  .p-courtyard .courtyard-rank-card progress,
.p-courtyard .courtyard-rank-card small {
    grid-column: 1 / -1;
  }

  .p-courtyard .courtyard-signal-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-courtyard .courtyard-signal-bar > div {
    border-bottom: 1px solid var(--courtyard-line);
  }

  .p-courtyard .courtyard-signal-bar > div:nth-child(2n) {
    border-right: 0;
  }

  .p-courtyard .courtyard-signal-bar > div:last-child {
    grid-column: 1 / -1;
  }

  .p-courtyard .courtyard-last-echo,
.p-courtyard .courtyard-oath {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .p-courtyard .courtyard-floor-stack,
.p-courtyard .courtyard-student-grid,
.p-courtyard .courtyard-planner,
.p-courtyard .courtyard-action-grid {
    grid-template-columns: 1fr;
  }

  .p-courtyard .courtyard-room-head,
.p-courtyard .courtyard-resonance-card {
    grid-template-columns: 1fr;
  }

  .p-courtyard .courtyard-room-strength {
    text-align: left;
  }

  .p-courtyard .courtyard-resonance-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-courtyard .courtyard-action-deck,
.p-courtyard .courtyard-student-section,
.p-courtyard .courtyard-room-head {
    padding: 14px;
  }

  .p-courtyard .courtyard-action-deck > header,
.p-courtyard .courtyard-student-section > header {
    align-items: start;
    flex-direction: column;
  }

  .p-courtyard .courtyard-student-section > header label {
    width: 100%;
  }

  .p-courtyard .courtyard-action {
    min-height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-courtyard .courtyard-floor,
.p-courtyard .courtyard-action,
.p-courtyard .courtyard-student-card {
    transition: none;
  }
}

/* Atlas V2: 21 Stufen, Klassenwechsel, drei verständliche Sozialwege. */
.p-courtyard .courtyard-skill-paths {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.p-courtyard .courtyard-skill-paths article {
  background: rgba(7, 13, 26, 0.94);
  border: 1px solid var(--courtyard-line);
  border-radius: var(--radius-sm-plus);
  display: grid;
  gap: var(--space-1);
  padding: 10px 12px;
}

.p-courtyard .courtyard-skill-paths article.is-gold { border-color: rgba(255, 216, 137, 0.3); }
.p-courtyard .courtyard-skill-paths article.is-violet { border-color: rgba(185, 154, 255, 0.32); }
.p-courtyard .courtyard-skill-paths article > span { color: var(--courtyard-muted); font-size: 0.63rem; font-weight: 800; text-transform: uppercase; }
.p-courtyard .courtyard-skill-paths article > strong { font-size: 0.9rem; }
.p-courtyard .courtyard-skill-paths article > p { color: #9caec4; font-size: 0.64rem; line-height: 1.35; margin: 0; min-height: 34px; }

.p-courtyard .courtyard-floor-stack {
  max-height: none;
  overflow: visible;
}

.p-courtyard .courtyard-floor {
  min-height: 48px;
  padding-block: 5px;
}

.p-courtyard .courtyard-class-switch {
  align-items: center;
  background: rgba(3, 8, 18, 0.8);
  border-bottom: 1px solid var(--courtyard-line);
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  min-height: 54px;
}

.p-courtyard .courtyard-class-switch a {
  align-items: center;
  color: var(--courtyard-cyan);
  display: flex;
  font-size: 1.25rem;
  height: 100%;
  justify-content: center;
  text-decoration: none;
}

.p-courtyard .courtyard-class-switch a:hover,
.p-courtyard .courtyard-class-switch a:focus-visible {
  background: rgba(118, 230, 255, 0.08);
  outline: none;
}

.p-courtyard .courtyard-class-switch div { display: grid; gap: 1px; text-align: center; }
.p-courtyard .courtyard-class-switch span { color: var(--courtyard-muted); font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; }
.p-courtyard .courtyard-class-switch strong { font-size: var(--text-sm); }

.p-courtyard .courtyard-action-path {
  border: 1px solid rgba(145, 177, 224, 0.14);
  border-radius: 9px;
  margin-top: 8px;
  overflow: hidden;
}

.p-courtyard .courtyard-action-path > header {
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

.p-courtyard .courtyard-action-path > header strong { font-size: var(--text-xs-plus); }
.p-courtyard .courtyard-action-path > header span { color: var(--courtyard-muted); font-size: 0.61rem; text-transform: none; }
.p-courtyard .courtyard-action-path .courtyard-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px; }
.p-courtyard .courtyard-action-path .courtyard-action { min-height: 88px; }

.p-courtyard .courtyard-seat-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.p-courtyard .courtyard-seat {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(145, 177, 224, 0.14);
  border-radius: var(--radius-sm);
  min-height: 68px;
  padding: 8px;
}

.p-courtyard .courtyard-seat.is-empty {
  align-content: center;
  border-style: dashed;
  color: #607087;
  display: grid;
  font-size: var(--text-2xs);
  gap: 2px;
  text-align: center;
}

.p-courtyard .courtyard-seat.is-empty strong { color: #74869e; font-size: var(--text-xs); }
.p-courtyard .courtyard-seat.courtyard-student-card { min-height: 68px; }
.p-courtyard .courtyard-seat.courtyard-student-card.is-open { grid-column: 1 / -1; }
.p-courtyard .courtyard-student-detail { border-top: 1px solid rgba(145, 177, 224, 0.12); display: grid; gap: var(--space-2); margin-top: 2px; padding-top: 8px; }
.p-courtyard .courtyard-student-detail[hidden] { display: none; }
.p-courtyard .courtyard-student-detail > p { color: #b8c5d8; font-size: var(--text-xs); line-height: 1.4; margin: 0; }
.p-courtyard .courtyard-student-missing { color: var(--courtyard-gold); font-size: 0.6rem; line-height: 1.35; }
.p-courtyard .courtyard-membership-list article.is-home { background: rgba(255, 216, 137, 0.06); border-color: rgba(255, 216, 137, 0.38); }

@media (max-width: 980px) {
  .p-courtyard .courtyard-floor-stack { max-height: none; }
  .p-courtyard .courtyard-skill-paths { grid-template-columns: 1fr; }
  .p-courtyard .courtyard-skill-paths article > p { min-height: 0; }
  .p-courtyard .courtyard-seat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .p-courtyard .courtyard-seat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-courtyard .courtyard-seat.courtyard-student-card.is-open { grid-column: 1 / -1; }
  .p-courtyard .courtyard-action-path .courtyard-action-grid { grid-template-columns: 1fr; }
  .p-courtyard .courtyard-class-switch { grid-template-columns: 46px 1fr 46px; }
}

/* Atlas V3: spielbare Fläche zuerst, Erklärungen nur kurz über die Eule. */
.p-courtyard .courtyard-shell { gap: 9px; }

.p-courtyard .courtyard-gate-hero {
  grid-template-columns: minmax(0, 1fr) 190px;
  min-height: 220px;
  padding: 22px 24px;
}

.p-courtyard .courtyard-gate-copy h1 {
  font-size: clamp(2rem, 3vw, 3.35rem);
  margin: 5px 0 10px;
}

.p-courtyard .courtyard-atlas-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.p-courtyard .courtyard-atlas-facts span {
  background: rgba(4, 10, 22, 0.72);
  border: 1px solid rgba(145, 177, 224, 0.24);
  border-radius: var(--radius-pill);
  color: #dbe8f9;
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 4px 8px;
}

.p-courtyard .courtyard-gate-rule {
  gap: 7px;
  margin-top: 12px;
  padding: 6px 9px;
}

.p-courtyard .courtyard-gate-rule strong { font-size: var(--text-sm); }
.p-courtyard .courtyard-gate-rule span { font-size: var(--text-xs); }

.p-courtyard .courtyard-last-echo {
  cursor: help;
  gap: var(--space-2);
  grid-template-columns: auto auto;
  justify-content: start;
  padding: 6px 9px;
}

.p-courtyard .courtyard-last-echo strong { color: #dbe8f9; font-size: 0.66rem; }

.p-courtyard .courtyard-rank-card { padding: 14px; }
.p-courtyard .courtyard-rank-card > strong { font-size: 3.65rem; margin: 4px 0; }
.p-courtyard .courtyard-rank-card progress { margin: 9px 0 6px; }
.p-courtyard .courtyard-rank-card small { font-size: 0.62rem; }

.p-courtyard .courtyard-layout {
  gap: 9px;
  grid-template-columns: 245px minmax(520px, 1fr) 275px;
}

.p-courtyard .courtyard-building > header,
.p-courtyard .courtyard-panel > header { padding: 9px 11px; }

.p-courtyard .courtyard-floor-stack { padding: 5px; }

.p-courtyard .courtyard-floor {
  gap: 7px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 39px;
  padding: 4px 6px;
}

.p-courtyard .courtyard-floor-number {
  font-size: var(--text-xs);
  height: 26px;
  width: 26px;
}

.p-courtyard .courtyard-floor-copy strong { font-size: 0.69rem; }
.p-courtyard .courtyard-floor-copy small,
.p-courtyard .courtyard-floor-state small { font-size: 0.53rem; }
.p-courtyard .courtyard-floor-state b { font-size: var(--text-xs-plus); }

.p-courtyard .courtyard-class-switch { min-height: 42px; }
.p-courtyard .courtyard-room-head { padding: 12px 14px; }
.p-courtyard .courtyard-room-head h2 { margin-block: 2px; }
.p-courtyard .courtyard-room-strength { cursor: help; padding: 7px 9px; }

.p-courtyard .courtyard-resonance-card {
  cursor: help;
  gap: 9px;
  padding: 9px 14px;
}

.p-courtyard .courtyard-resonance-copy { gap: 1px; }
.p-courtyard .courtyard-resonance-copy strong { font-size: 0.92rem; }

.p-courtyard .courtyard-action-deck { padding: 11px 14px 13px; }

.p-courtyard .courtyard-action-deck > header {
  align-items: center;
  margin-bottom: 7px;
}

.p-courtyard .courtyard-action-deck h3 { font-size: 0.92rem; }
.p-courtyard .courtyard-action-deck > header small { white-space: nowrap; }
.p-courtyard .courtyard-action-deck > header small b { color: var(--courtyard-cyan); }

.p-courtyard .courtyard-target-select {
  gap: 7px;
  margin-bottom: 7px;
  padding: 4px 6px 4px 9px;
}

.p-courtyard .courtyard-target-select select { min-height: 30px; padding-block: 4px; }

.p-courtyard .courtyard-action-grid {
  gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.p-courtyard .courtyard-action-wrap { display: flex; min-width: 0; }

.p-courtyard .courtyard-action {
  align-content: space-between;
  gap: 3px;
  min-height: 68px;
  padding: 7px 8px;
  width: 100%;
}

.p-courtyard .courtyard-action:hover:not(:disabled),
.p-courtyard .courtyard-action:focus-visible:not(:disabled) { transform: translateY(-1px); }

.p-courtyard .courtyard-action > span {
  color: var(--courtyard-muted);
  font-size: 0.49rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}

.p-courtyard .courtyard-action strong {
  font-size: var(--text-xs);
  line-height: 1.15;
}

.p-courtyard .courtyard-action small {
  align-items: center;
  display: flex;
  font-size: 0.53rem;
  justify-content: space-between;
}

.p-courtyard .courtyard-action small b {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  color: #dfeaff;
  font-size: 0.5rem;
  padding: 2px 5px;
}

.p-courtyard .courtyard-action:disabled { pointer-events: none; }

.p-courtyard .courtyard-student-section { padding: 12px 14px; }
.p-courtyard .courtyard-student-section > header { margin-bottom: 8px; }

.p-courtyard .courtyard-mandate-panel > p,
.p-courtyard .courtyard-settlement-panel,
.p-courtyard .courtyard-action-path,
.p-courtyard .courtyard-skill-paths { display: none; }

.p-courtyard .courtyard-membership-list { padding: 7px; }
.p-courtyard .courtyard-membership-list article { min-height: 48px; padding: 7px 8px; }

.p-courtyard .courtyard-compact-rule {
  cursor: help;
  display: grid;
  gap: 2px;
  padding: 10px 11px;
}

.p-courtyard .courtyard-compact-rule > span {
  color: var(--courtyard-cyan);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.13em;
}

.p-courtyard .courtyard-compact-rule > strong { font-size: var(--text-sm-plus); }
.p-courtyard .courtyard-compact-rule > small { color: var(--courtyard-muted); font-size: var(--text-2xs); }

.p-courtyard .courtyard-rank99-panel { padding: 10px 11px; }
.p-courtyard .courtyard-rank99-panel::before { display: none; }

.p-courtyard .courtyard-oath {
  gap: var(--space-2);
  grid-template-columns: auto 1fr;
  padding: 8px 11px;
}

.p-courtyard .courtyard-oath strong,
.p-courtyard .courtyard-oath span { font-size: 0.66rem; }

body.p-courtyard.courtyard-info-mode .game-tutor-panel {
  bottom: 18px;
  left: 18px;
  margin: 0;
  position: fixed;
  right: auto;
  top: auto;
  transform: none;
  transition: width 130ms ease, padding 130ms ease, opacity 130ms ease;
}

body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-idle {
  cursor: help;
  grid-template-columns: 42px;
  opacity: 0.82;
  padding: 4px;
  width: 52px;
}

body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-idle .game-tutor-copy { display: none; }
body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-idle .game-tutor-owl,
body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-idle .game-lektor-mark {
  height: 42px;
  width: 42px;
}

body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-info {
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 10px;
  width: min(310px, calc(100vw - 36px));
}

body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-info .game-tutor-owl,
body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-info .game-lektor-mark {
  height: 50px;
  width: 50px;
}

body.p-courtyard.courtyard-info-mode .game-tutor-panel .game-tutor-actions { display: none; }
body.p-courtyard.courtyard-info-mode .game-tutor-panel .game-tutor-step { font-size: var(--text-2xs); }
body.p-courtyard.courtyard-info-mode .game-tutor-panel .game-tutor-copy strong { font-size: 0.84rem; }
body.p-courtyard.courtyard-info-mode .game-tutor-panel .game-tutor-copy p { font-size: 0.67rem; line-height: 1.32; }

@media (max-width: 1380px) {
  .p-courtyard .courtyard-layout { grid-template-columns: 225px minmax(480px, 1fr); }
  .p-courtyard .courtyard-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .p-courtyard .courtyard-gate-hero { min-height: 200px; padding: 18px; }
  .p-courtyard .courtyard-layout { grid-template-columns: minmax(0, 1fr); }
  .p-courtyard .courtyard-layout > *,
.p-courtyard .courtyard-building,
.p-courtyard .courtyard-room-stage,
.p-courtyard .courtyard-planner { min-width: 0; width: 100%; }
  .p-courtyard .courtyard-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .p-courtyard .courtyard-gate-hero {
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 230px;
    padding: 15px;
  }

  .p-courtyard .courtyard-gate-copy { align-self: center; min-width: 0; }
  .p-courtyard .courtyard-gate-copy h1 { font-size: 2rem; }
  .p-courtyard .courtyard-gate-rule { display: inline-flex; }

  .p-courtyard .courtyard-rank-card {
    align-self: stretch;
    display: flex;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
  }

  .p-courtyard .courtyard-rank-card > strong {
    font-size: 2.7rem;
    grid-row: auto;
    margin: 3px 0;
  }

  .p-courtyard .courtyard-rank-card progress,
.p-courtyard .courtyard-rank-card small { grid-column: auto; }
  .p-courtyard .courtyard-rank-card small { display: none; }
  .p-courtyard .courtyard-rank-card > span { font-size: 0.52rem; }
  .p-courtyard .courtyard-rank-card > b { font-size: 0.62rem; overflow-wrap: anywhere; }

  .p-courtyard .courtyard-floor-stack { grid-template-columns: 1fr; }
  .p-courtyard .courtyard-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-courtyard .courtyard-action-deck > header { align-items: start; }
  .p-courtyard .courtyard-target-select { grid-template-columns: 42px 1fr; }

  body.p-courtyard.courtyard-info-mode .game-tutor-panel,
body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-passive,
body.p-courtyard.courtyard-info-mode .game-tutor-panel.is-courtyard-info {
    bottom: 12px;
    left: 12px;
    margin: 0;
    position: fixed;
    right: auto;
    top: auto;
  }
}
}

/* SOURCE: 40-screens/forecourt.css */
/* =========================================================
   SCREEN: Forecourt
   Scope: .p-forecourt only
   Root: .p-forecourt
   PHP: game/forecourt-view.php
   ========================================================= */

@layer screens {
.p-forecourt .forecourt-shell {
  --fc-ink: #eaf7f4;
  --fc-muted: #8fa9a5;
  --fc-line: rgba(122, 208, 190, 0.2);
  --fc-panel: rgba(8, 25, 28, 0.9);
  --fc-panel-soft: rgba(13, 37, 39, 0.82);
  --fc-mint: #58d6b5;
  --fc-gold: #f2c879;
  --fc-red: #e87979;
  position: relative;
  width: min(1880px, 100%);
  min-height: calc(100vh - 112px);
  margin: 12px auto 24px;
  padding: 18px;
  color: var(--fc-ink);
  border: 1px solid rgba(117, 199, 181, 0.2);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(72, 143, 130, 0.18), transparent 36%),
    linear-gradient(135deg, #0f3739 0%, #123034 38%, #071b1f 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.p-forecourt .forecourt-shell::before,
.p-forecourt .forecourt-shell::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.p-forecourt .forecourt-shell::before {
  inset: 0;
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(112, 185, 169, 0.12) 50%, transparent 50.3%),
    repeating-linear-gradient(90deg, transparent 0 116px, rgba(114, 179, 164, 0.05) 117px 118px),
    linear-gradient(170deg, transparent 0 28%, rgba(4, 13, 15, 0.38) 28.2% 29%, transparent 29.2%);
}

.p-forecourt .forecourt-shell::after {
  display: none;
}

.p-forecourt .forecourt-shell > * {
  position: relative;
  z-index: 1;
}

.p-forecourt .forecourt-scene-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 210px;
  margin: -18px -18px 0;
  padding: 34px 38px 28px;
  border-bottom: 1px solid var(--fc-line);
  background:
    linear-gradient(90deg, rgba(2, 11, 13, 0.9) 0, rgba(2, 11, 13, 0.55) 40%, rgba(2, 11, 13, 0.08) 78%),
    linear-gradient(0deg, rgba(4, 18, 20, 0.92), transparent 58%),
    url("/assets/game/forecourt/forecourt-hall-v1.jpg") center 56% / cover no-repeat;
}

.p-forecourt .forecourt-eyebrow,
.p-forecourt .forecourt-panel-head span,
.p-forecourt .forecourt-object-kind {
  color: var(--fc-mint);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.p-forecourt .forecourt-scene-head h1 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.1vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.p-forecourt .forecourt-scene-head p {
  margin: 10px 0 0;
  color: #bad1cc;
  font-size: 0.98rem;
}

.p-forecourt .forecourt-live-sign {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-2);
  min-width: 170px;
  padding: 10px 14px;
  border: 1px solid var(--fc-line);
  border-radius: 13px;
  background: rgba(5, 22, 24, 0.76);
}

.p-forecourt .forecourt-live-sign i,
.p-forecourt .forecourt-chat-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fc-mint);
  box-shadow: 0 0 12px var(--fc-mint);
}

.p-forecourt .forecourt-live-sign strong {
  font-size: 1.05rem;
}

.p-forecourt .forecourt-live-sign span {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--fc-muted);
  font-size: 0.69rem;
}

.p-forecourt .forecourt-jump-nav {
  display: flex;
  gap: 6px;
  padding: 11px 2px;
}

.p-forecourt .forecourt-jump-nav a {
  padding: 7px 12px;
  color: var(--fc-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}

.p-forecourt .forecourt-jump-nav a:hover,
.p-forecourt .forecourt-jump-nav a:focus-visible {
  color: var(--fc-ink);
  border-color: var(--fc-line);
  background: rgba(72, 166, 145, 0.12);
}

.p-forecourt .forecourt-jump-nav span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 99px;
  color: #08231f;
  background: var(--fc-mint);
}

.p-forecourt .forecourt-alert {
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid rgba(88, 214, 181, 0.3);
  border-radius: var(--radius-sm-plus);
  color: #dff9f1;
  background: rgba(24, 79, 68, 0.92);
}

.p-forecourt .forecourt-alert.is-error {
  border-color: rgba(232, 121, 121, 0.45);
  background: rgba(91, 32, 35, 0.94);
}

.p-forecourt .forecourt-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(500px, 1.55fr) minmax(285px, 0.92fr);
  gap: var(--space-3);
  min-height: 660px;
}

.p-forecourt .forecourt-left-rail,
.p-forecourt .forecourt-right-rail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.p-forecourt .forecourt-panel,
.p-forecourt .forecourt-setup-card {
  border: 1px solid var(--fc-line);
  border-radius: 15px;
  background: var(--fc-panel);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 12px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.p-forecourt .forecourt-panel {
  padding: 14px;
}

.p-forecourt .forecourt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  min-height: 39px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(113, 190, 174, 0.12);
}

.p-forecourt .forecourt-panel-head h2 {
  margin: 2px 0 0;
  font-size: var(--text-md);
}

.p-forecourt .forecourt-panel-head b {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 7px;
  color: var(--fc-mint);
  border: 1px solid rgba(88, 214, 181, 0.25);
  border-radius: 9px;
  background: rgba(36, 105, 91, 0.19);
}

.p-forecourt .forecourt-panel-note {
  margin: 12px 0;
  color: var(--fc-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.p-forecourt .forecourt-share-form,
.p-forecourt .forecourt-note-form {
  display: grid;
  gap: var(--space-2);
}

.p-forecourt .forecourt-share-form label,
.p-forecourt .forecourt-note-form label,
.p-forecourt .forecourt-composer label {
  color: #b9ceca;
  font-size: var(--text-xs-plus);
  font-weight: 800;
}

.p-forecourt .forecourt-share-form select,
.p-forecourt .forecourt-note-form textarea,
.p-forecourt .forecourt-composer textarea {
  width: 100%;
  color: var(--fc-ink);
  border: 1px solid rgba(124, 194, 180, 0.24);
  border-radius: 9px;
  outline: none;
  background: rgba(3, 17, 19, 0.8);
}

.p-forecourt .forecourt-share-form select {
  min-height: 42px;
  padding: 0 10px;
  text-overflow: ellipsis;
}

.p-forecourt .forecourt-share-form select:focus,
.p-forecourt .forecourt-note-form textarea:focus,
.p-forecourt .forecourt-composer textarea:focus {
  border-color: var(--fc-mint);
  box-shadow: 0 0 0 3px rgba(88, 214, 181, 0.1);
}

.p-forecourt .forecourt-share-form button,
.p-forecourt .forecourt-inline-action button,
.p-forecourt .forecourt-note-form button,
.p-forecourt .forecourt-composer button,
.p-forecourt .forecourt-set-card button {
  min-height: 38px;
  padding: 0 13px;
  color: #06221d;
  border: 0;
  border-radius: 9px;
  font-weight: 850;
  cursor: pointer;
  background: linear-gradient(180deg, #73e1c4, #47ba9c);
  box-shadow: 0 6px 16px rgba(38, 164, 133, 0.16);
}

.p-forecourt .forecourt-share-form button:disabled,
.p-forecourt .forecourt-inline-action button:disabled,
.p-forecourt .forecourt-note-form button:disabled,
.p-forecourt .forecourt-composer button:disabled,
.p-forecourt .forecourt-set-card button:disabled {
  color: #77918c;
  cursor: not-allowed;
  background: #193b3b;
  box-shadow: none;
}

.p-forecourt .forecourt-share-rules {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(113, 190, 174, 0.12);
}

.p-forecourt .forecourt-share-rules span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fc-muted);
  font-size: 0.75rem;
}

.p-forecourt .forecourt-share-rules i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #0b2c26;
  border-radius: 50%;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
  background: var(--fc-gold);
}

.p-forecourt .forecourt-reward-panel {
  margin-top: auto;
}

.p-forecourt .forecourt-reward-art {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 142px;
  margin: 12px 0 0;
  object-fit: cover;
  object-position: center 48%;
  border: 1px solid rgba(242, 200, 121, 0.2);
  border-radius: 11px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.22);
}

.p-forecourt .forecourt-reward-panel > strong {
  display: block;
  margin-top: 13px;
  color: var(--fc-gold);
  font-size: 0.88rem;
}

.p-forecourt .forecourt-reward-panel progress {
  width: 100%;
  height: 7px;
  margin: 9px 0 3px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: #173638;
}

.p-forecourt .forecourt-reward-panel progress::-webkit-progress-bar { background: #173638; }
.p-forecourt .forecourt-reward-panel progress::-webkit-progress-value { background: linear-gradient(90deg, #bf9150, var(--fc-gold)); }
.p-forecourt .forecourt-reward-panel progress::-moz-progress-bar { background: var(--fc-gold); }

.p-forecourt .forecourt-reward-panel small {
  color: var(--fc-muted);
  font-size: 0.69rem;
}

.p-forecourt .forecourt-fame-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.p-forecourt .forecourt-fame-row > span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(242, 200, 121, 0.2);
  border-radius: 9px;
  background: rgba(100, 76, 31, 0.14);
}

.p-forecourt .forecourt-fame-row strong { color: var(--fc-gold); font-size: var(--text-md); }

.p-forecourt .forecourt-earned-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.p-forecourt .forecourt-earned-list span {
  padding: 5px 7px;
  color: #efdba9;
  border: 1px solid rgba(242, 200, 121, 0.22);
  border-radius: 7px;
  font-size: 0.67rem;
  background: rgba(100, 76, 31, 0.2);
}

.p-forecourt .forecourt-achievement-panel {
  max-height: 420px;
}

.p-forecourt .forecourt-achievement-list {
  display: grid;
  gap: 7px;
  max-height: 315px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.p-forecourt .forecourt-achievement-card {
  padding: 8px 9px;
  border: 1px solid rgba(115, 199, 181, 0.16);
  border-radius: var(--radius-sm-plus);
  background: rgba(7, 29, 31, 0.78);
}

.p-forecourt .forecourt-achievement-card.is-locked {
  opacity: 0.68;
}

.p-forecourt .forecourt-achievement-card.is-silver,
.p-forecourt .forecourt-object-card.is-silver { border-color: rgba(198, 221, 225, 0.34); }
.p-forecourt .forecourt-achievement-card.is-gold,
.p-forecourt .forecourt-object-card.is-gold { border-color: rgba(242, 200, 121, 0.48); }
.p-forecourt .forecourt-achievement-card.is-master,
.p-forecourt .forecourt-object-card.is-master { border-color: rgba(140, 231, 211, 0.58); box-shadow: inset 0 0 22px rgba(88, 214, 181, 0.08); }

.p-forecourt .forecourt-achievement-card summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #d9ebe7;
  cursor: pointer;
  font-size: var(--text-xs-plus);
  list-style: none;
}

.p-forecourt .forecourt-achievement-card summary::-webkit-details-marker { display: none; }
.p-forecourt .forecourt-achievement-card summary > span { color: var(--fc-gold); }
.p-forecourt .forecourt-achievement-card summary small { color: var(--fc-muted); }
.p-forecourt .forecourt-achievement-card > p { margin: 8px 0 5px; color: var(--fc-muted); font-size: var(--text-xs); line-height: 1.4; }
.p-forecourt .forecourt-achievement-card progress { width: 100%; height: 6px; border: 0; }
.p-forecourt .forecourt-achievement-card > small { display: block; margin-top: 5px; color: #728d88; font-size: 0.63rem; }
.p-forecourt .forecourt-achievement-share { margin-top: 7px; }
.p-forecourt .forecourt-achievement-share button { min-height: 28px; font-size: 0.65rem; }

.p-forecourt .forecourt-chat-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(360px, 1fr) auto auto auto;
  min-width: 0;
  max-height: calc(100vh - 178px);
}

.p-forecourt .forecourt-chat-head {
  padding-bottom: 12px;
}

.p-forecourt .forecourt-chat-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-forecourt .forecourt-info-panel { position: relative; }

.p-forecourt .forecourt-info-panel > summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--fc-gold);
  border: 1px solid rgba(242, 200, 121, 0.32);
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 900;
  list-style: none;
  background: rgba(73, 57, 30, 0.4);
}

.p-forecourt .forecourt-info-panel > summary::-webkit-details-marker { display: none; }

.p-forecourt .forecourt-info-panel > div {
  position: absolute;
  z-index: 8;
  top: 35px;
  right: 0;
  width: min(270px, 78vw);
  padding: 12px;
  color: #c9ddd9;
  border: 1px solid rgba(242, 200, 121, 0.28);
  border-radius: 11px;
  background: rgba(5, 22, 24, 0.98);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.38);
}

.p-forecourt .forecourt-info-panel ul { margin: 7px 0 0; padding-left: 17px; }
.p-forecourt .forecourt-info-panel li { margin-top: 4px; color: var(--fc-muted); font-size: 0.7rem; line-height: 1.35; }

.p-forecourt .forecourt-chat-state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fc-muted);
  font-size: var(--text-xs-plus);
}

.p-forecourt .forecourt-channel-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0 3px;
  overflow-x: auto;
}

.p-forecourt .forecourt-channel-tabs > a {
  position: relative;
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--fc-muted);
  border: 1px solid rgba(115, 199, 181, 0.15);
  border-radius: 9px;
  background: rgba(6, 25, 27, 0.72);
  font-size: var(--text-xs-plus);
  font-weight: 800;
  text-decoration: none;
}

.p-forecourt .forecourt-channel-tabs > a.is-active {
  color: #092821;
  border-color: var(--fc-mint);
  background: var(--fc-mint);
}

.p-forecourt .forecourt-channel-tabs > a i {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fc-gold);
  box-shadow: 0 0 8px rgba(242, 200, 121, 0.8);
}

.p-forecourt .forecourt-channel-tabs > .forecourt-language-settings {
  margin-left: auto;
  color: #89aaa3;
  border-color: transparent;
  background: transparent;
  font-size: 0.64rem;
  font-weight: 650;
}

.p-forecourt .forecourt-channel-description {
  margin: 3px 0 0;
  color: #78958f;
  font-size: 0.66rem;
}

.p-forecourt .forecourt-message-list,
.p-forecourt .forecourt-collection-list {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 214, 181, 0.34) transparent;
}

.p-forecourt .forecourt-message-list {
  padding: 10px 4px 10px 0;
}

.p-forecourt .forecourt-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 6px;
  border-bottom: 1px solid rgba(118, 186, 172, 0.08);
}

.p-forecourt .forecourt-message.is-own {
  background: linear-gradient(90deg, rgba(40, 109, 93, 0.11), transparent 70%);
}

.p-forecourt .forecourt-avatar,
.p-forecourt .forecourt-object-mark {
  display: grid;
  place-items: center;
  color: #c8f3e8;
  border: 1px solid rgba(88, 214, 181, 0.24);
  background: linear-gradient(145deg, #276f62, #153d3e);
}

.p-forecourt .forecourt-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm-plus);
  font-size: 0.76rem;
  font-weight: 900;
}

.p-forecourt .forecourt-message-body {
  min-width: 0;
}

.p-forecourt .forecourt-message-body > header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.p-forecourt .forecourt-message-body > header strong {
  font-size: var(--text-sm);
}

.p-forecourt .forecourt-message-body time {
  color: #66817d;
  font-size: 0.65rem;
}

.p-forecourt .forecourt-message-body > p {
  margin: 4px 0 0;
  color: #c7d9d5;
  font-size: 0.81rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.p-forecourt .forecourt-object-card {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(115, 199, 181, 0.17);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(25, 67, 65, 0.72), rgba(9, 30, 32, 0.84));
}

.p-forecourt .forecourt-object-card.is-rarity-uncommon {
  border-color: rgba(79, 194, 132, .42);
  box-shadow: inset 0 0 24px rgba(50, 156, 105, .07);
}

.p-forecourt .forecourt-object-card.is-rarity-rare {
  border-color: rgba(72, 153, 224, .62);
  box-shadow: inset 0 0 26px rgba(52, 128, 211, .11), 0 0 12px rgba(48, 132, 217, .08);
}

.p-forecourt .forecourt-object-card.is-rarity-epic {
  border-color: rgba(167, 101, 221, .68);
  box-shadow: inset 0 0 28px rgba(132, 69, 188, .13), 0 0 14px rgba(139, 72, 204, .1);
}

.p-forecourt .forecourt-object-card.is-rarity-legendary {
  border-color: rgba(236, 184, 75, .78);
  box-shadow: inset 0 0 30px rgba(202, 145, 39, .15), 0 0 16px rgba(226, 169, 54, .12);
}

.p-forecourt .forecourt-object-card.is-rarity-mythic {
  border-color: rgba(235, 101, 174, .8);
  box-shadow: inset 0 0 32px rgba(190, 56, 133, .17), 0 0 18px rgba(217, 76, 155, .15);
}

.p-forecourt .forecourt-object-card.is-type-violet { border-left: 4px solid #5153a6; }
.p-forecourt .forecourt-object-card.is-type-teal { border-left: 4px solid #2477b5; }
.p-forecourt .forecourt-object-card.is-type-blue { border-left: 4px solid #a03d50; }
.p-forecourt .forecourt-object-card.is-type-amber { border-left: 4px solid #8a5a2d; }
.p-forecourt .forecourt-object-card.is-type-indigo { border-left: 4px solid #7448a8; }
.p-forecourt .forecourt-object-card.is-type-orange { border-left: 4px solid #24765e; }
.p-forecourt .forecourt-object-card.is-type-gold { border-left: 4px solid #a87011; }
.p-forecourt .forecourt-object-card.is-type-rose { border-left: 4px solid #087c83; }
.p-forecourt .forecourt-object-card.is-type-slate { border-left: 4px solid #4e6472; }

.p-forecourt .forecourt-object-card > summary {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 18px;
  gap: var(--space-2-5);
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.p-forecourt .forecourt-object-card > summary::-webkit-details-marker { display: none; }

.p-forecourt .forecourt-object-card[open] .forecourt-card-open {
  transform: rotate(45deg);
}

.p-forecourt .forecourt-object-image,
.p-forecourt .forecourt-object-image-host,
.p-forecourt .forecourt-object-mark {
  width: 70px;
  height: 84px;
  border-radius: 11px;
}

.p-forecourt .forecourt-object-image {
  object-fit: cover;
  object-position: center 18%;
}

.p-forecourt .forecourt-object-image-host {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(184, 225, 215, .24);
  background: radial-gradient(circle at 50% 30%, rgba(98, 158, 148, .28), rgba(5, 25, 27, .92) 72%);
  box-shadow: inset 0 0 0 2px rgba(2, 17, 18, .5);
}

.p-forecourt .forecourt-object-image-host > .forecourt-object-mark {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.p-forecourt .forecourt-object-image-host > .game-student-generated-image {
  object-fit: contain;
  object-position: 50% 100%;
  transform: scale(1.08);
  transform-origin: 50% 100%;
}

.p-forecourt .forecourt-object-card.is-rarity-rare .forecourt-object-image-host { border-color: rgba(86, 171, 239, .72); }
.p-forecourt .forecourt-object-card.is-rarity-epic .forecourt-object-image-host { border-color: rgba(183, 113, 239, .78); }
.p-forecourt .forecourt-object-card.is-rarity-legendary .forecourt-object-image-host { border-color: rgba(247, 195, 83, .88); }
.p-forecourt .forecourt-object-card.is-rarity-mythic .forecourt-object-image-host { border-color: rgba(246, 114, 188, .9); }

.p-forecourt .forecourt-object-mark {
  font-family: Georgia, serif;
  font-size: 1.45rem;
}

.p-forecourt .forecourt-object-copy {
  min-width: 0;
}

.p-forecourt .forecourt-object-copy strong {
  display: block;
  margin-top: 1px;
  font-size: var(--text-sm-plus);
}

.p-forecourt .forecourt-object-subtitle {
  display: block;
  margin: 2px 0 5px;
  overflow: hidden;
  color: #9db6b1;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forecourt .forecourt-card-open {
  color: var(--fc-mint);
  font-size: 1.15rem;
  text-align: center;
  transition: transform 160ms ease;
}

.p-forecourt .forecourt-object-copy code {
  display: block;
  overflow: hidden;
  color: #acd9ce;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forecourt .forecourt-object-copy small {
  display: block;
  margin-top: 3px;
  color: #718d87;
  font-size: 0.62rem;
}

.p-forecourt .forecourt-tile-rating {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  color: #08231f;
  border-radius: var(--radius-pill);
  background: var(--fc-gold);
  font-size: var(--text-2xs);
  font-weight: 900;
}

.p-forecourt .forecourt-tile-rating.is-common { color: #e8edf0; background: #59636c; }
.p-forecourt .forecourt-tile-rating.is-uncommon { color: #effff6; background: #247b50; }
.p-forecourt .forecourt-tile-rating.is-rare { color: #f3f9ff; background: #286da9; }
.p-forecourt .forecourt-tile-rating.is-epic { color: #fbf6ff; background: #7545ad; }
.p-forecourt .forecourt-tile-rating.is-legendary { color: #241803; background: #d49b24; }
.p-forecourt .forecourt-tile-rating.is-mythic { color: #fff5fb; background: #b63880; }

.p-forecourt .forecourt-object-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 0;
}

.p-forecourt .forecourt-object-facts div {
  min-width: 0;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(1, 17, 18, 0.45);
}

.p-forecourt .forecourt-object-facts dt {
  color: #6f918a;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.p-forecourt .forecourt-object-facts dd {
  margin: 1px 0 0;
  overflow: hidden;
  color: #cce3de;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-forecourt .forecourt-inline-action,
.p-forecourt .forecourt-archive-form {
  display: inline-block;
  margin: 7px 5px 0 0;
}

.p-forecourt .forecourt-inline-action button {
  min-height: 28px;
  font-size: var(--text-xs);
}

.p-forecourt .forecourt-archive-form button {
  padding: 3px 5px;
  color: #718e88;
  border: 0;
  cursor: pointer;
  background: transparent;
  font-size: 0.62rem;
}

.p-forecourt .forecourt-archive-form button:hover {
  color: var(--fc-red);
}

.p-forecourt .forecourt-report-menu {
  display: inline-block;
  margin-top: 7px;
  color: #718e88;
  font-size: 0.62rem;
}

.p-forecourt .forecourt-report-menu summary {
  width: max-content;
  padding: 3px 5px;
  cursor: pointer;
  list-style: none;
}

.p-forecourt .forecourt-report-menu summary::-webkit-details-marker {
  display: none;
}

.p-forecourt .forecourt-report-menu summary:hover,
.p-forecourt .forecourt-report-menu[open] summary {
  color: var(--fc-red);
}

.p-forecourt .forecourt-report-form {
  display: grid;
  width: min(310px, 100%);
  gap: 7px;
  margin: 6px 0 3px;
  padding: 10px;
  border: 1px solid rgba(232, 121, 121, 0.24);
  border-radius: 9px;
  background: rgba(24, 22, 25, 0.94);
}

.p-forecourt .forecourt-report-form label {
  color: #cdb9b9;
  font-size: 0.67rem;
  font-weight: 800;
}

.p-forecourt .forecourt-report-form select {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  color: #eadede;
  border: 1px solid rgba(232, 121, 121, 0.24);
  border-radius: 7px;
  background: #191719;
}

.p-forecourt .forecourt-report-form button {
  min-height: 32px;
  padding: 0 9px;
  color: #fff1f1;
  border: 1px solid rgba(232, 121, 121, 0.32);
  border-radius: 7px;
  cursor: pointer;
  background: rgba(133, 50, 55, 0.78);
  font-size: 0.67rem;
  font-weight: 800;
}

.p-forecourt .forecourt-report-form button:hover {
  background: rgba(162, 60, 66, 0.9);
}

.p-forecourt .forecourt-unread-button {
  justify-self: center;
  min-height: 34px;
  margin: 4px 0 8px;
  padding: 0 14px;
  color: #092a25;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(180deg, #f5d798, #d7a957);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  font-size: var(--text-xs-plus);
  font-weight: 900;
}

.p-forecourt .forecourt-unread-button[hidden] {
  display: none;
}

.p-forecourt .forecourt-composer {
  padding-top: 11px;
  border-top: 1px solid var(--fc-line);
}

.p-forecourt .forecourt-composer > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: var(--space-2);
  margin-top: 6px;
}

.p-forecourt .forecourt-composer textarea {
  min-height: 54px;
  max-height: 110px;
  padding: 9px 10px;
  resize: vertical;
}

.p-forecourt .forecourt-composer small {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #6f8984;
  font-size: 0.64rem;
}

.p-forecourt .forecourt-composer small b {
  margin-left: auto;
  padding-right: 6px;
  color: var(--fc-gold);
}

.p-forecourt .forecourt-blocked-note {
  margin-top: 8px;
  padding: 8px 10px;
  color: #ffd6d6;
  border: 1px solid rgba(232, 121, 121, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(81, 28, 31, 0.7);
  font-size: var(--text-xs-plus);
}

.p-forecourt .forecourt-blocked-note span {
  margin-left: 7px;
  color: #cda7a7;
}

.p-forecourt .forecourt-duo-panel {
  flex: 0 0 auto;
  max-height: 480px;
}

.p-forecourt .forecourt-duo-search {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.p-forecourt .forecourt-duo-search label {
  color: #89aaa3;
  font-size: 0.65rem;
  font-weight: 800;
}

.p-forecourt .forecourt-duo-search select,
.p-forecourt .forecourt-duo-search input {
  width: 100%;
  min-height: 35px;
  padding: 0 8px;
  color: #dcece8;
  border: 1px solid rgba(115, 199, 181, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(4, 22, 24, 0.88);
}

.p-forecourt .forecourt-duo-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.p-forecourt .forecourt-duo-search button,
.p-forecourt .forecourt-duo-share button {
  min-height: 35px;
  padding: 0 10px;
  font-size: 0.67rem;
}

.p-forecourt .forecourt-duo-results {
  max-height: 260px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.p-forecourt .forecourt-duo-result + .forecourt-duo-result {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(115, 199, 181, 0.1);
}

.p-forecourt .forecourt-duo-share {
  margin-top: 6px;
}

.p-forecourt .forecourt-collection-panel {
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr);
  min-height: 0;
  flex: 1 1 0;
}

.p-forecourt .forecourt-collection-list {
  padding-top: 8px;
}

.p-forecourt .forecourt-collected-card {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(118, 186, 172, 0.1);
}

.p-forecourt .forecourt-collected-card + .forecourt-collected-card {
  padding-top: 4px;
}

.p-forecourt .forecourt-collected-card .forecourt-object-card {
  grid-template-columns: 44px minmax(0, 1fr);
  border: 0;
  background: rgba(11, 35, 36, 0.6);
}

.p-forecourt .forecourt-collected-card .forecourt-object-image,
.p-forecourt .forecourt-collected-card .forecourt-object-image-host,
.p-forecourt .forecourt-collected-card .forecourt-object-mark {
  width: 44px;
  height: 55px;
}

.p-forecourt .forecourt-collection-credit {
  display: inline-block;
  margin: 5px 9px 0;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 850;
}

.p-forecourt .forecourt-collection-credit.is-progress {
  color: #bff7e7;
  background: rgba(38, 118, 94, 0.42);
}

.p-forecourt .forecourt-collection-credit.is-archive {
  color: #93aaa5;
  background: rgba(68, 85, 83, 0.38);
}

.p-forecourt .forecourt-note-form {
  margin: 6px 9px 0;
}

.p-forecourt .forecourt-note-form textarea {
  min-height: 48px;
  padding: 7px 8px;
  resize: vertical;
  font-size: var(--text-xs-plus);
}

.p-forecourt .forecourt-note-form button {
  justify-self: start;
  min-height: 28px;
  font-size: 0.65rem;
}

.p-forecourt .forecourt-archive-form {
  margin-left: 9px;
}

.p-forecourt .forecourt-set-list {
  display: grid;
  gap: 9px;
  max-height: 430px;
  overflow: auto;
  scrollbar-width: thin;
}

.p-forecourt .forecourt-set-card {
  padding: 10px;
  border: 1px solid rgba(115, 199, 181, 0.15);
  border-radius: 11px;
  background: rgba(5, 25, 27, 0.72);
}

.p-forecourt .forecourt-set-card.is-ready { border-color: rgba(242, 200, 121, 0.48); }
.p-forecourt .forecourt-set-card.is-completed { border-color: rgba(88, 214, 181, 0.42); background: rgba(28, 77, 65, 0.27); }
.p-forecourt .forecourt-set-card > header { display: flex; justify-content: space-between; gap: var(--space-2); }
.p-forecourt .forecourt-set-card > header strong { color: #d9ebe7; font-size: 0.76rem; }
.p-forecourt .forecourt-set-card > header span { color: var(--fc-gold); font-size: 0.65rem; white-space: nowrap; }
.p-forecourt .forecourt-set-card > p { margin: 6px 0 8px; color: var(--fc-muted); font-size: 0.67rem; line-height: 1.4; }
.p-forecourt .forecourt-set-card ul { display: grid; gap: var(--space-1); margin: 0 0 9px; padding: 0; list-style: none; }
.p-forecourt .forecourt-set-card li { display: flex; justify-content: space-between; gap: var(--space-2); padding: 4px 6px; color: #809a94; border-radius: 6px; font-size: 0.65rem; background: rgba(2, 15, 17, 0.5); }
.p-forecourt .forecourt-set-card li.is-complete { color: #bff7e7; }
.p-forecourt .forecourt-set-card button { width: 100%; min-height: 32px; font-size: var(--text-xs); }

.p-forecourt .forecourt-board-panel {
  flex: 0 0 auto;
}

.p-forecourt .forecourt-notice-list {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.p-forecourt .forecourt-notice-list > article {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  padding: 6px 0;
}

.p-forecourt .forecourt-notice-list i {
  width: 5px;
  height: 100%;
  min-height: 28px;
  border-radius: 99px;
  background: var(--fc-gold);
}

.p-forecourt .forecourt-notice-list strong,
.p-forecourt .forecourt-notice-list span {
  display: block;
  font-size: var(--text-xs);
}

.p-forecourt .forecourt-notice-list span,
.p-forecourt .forecourt-notice-list time {
  margin-top: 2px;
  color: #718b86;
}

.p-forecourt .forecourt-notice-list time {
  font-size: var(--text-2xs);
}

.p-forecourt .forecourt-empty {
  display: grid;
  gap: var(--space-1);
  padding: 18px 10px;
  color: #8ca7a1;
  text-align: center;
}

.p-forecourt .forecourt-empty strong {
  color: #bad0cb;
  font-size: var(--text-sm);
}

.p-forecourt .forecourt-empty span {
  font-size: 0.69rem;
  line-height: 1.45;
}

.p-forecourt .forecourt-safety-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) 22px;
  margin-top: 11px;
  padding: 10px;
  color: #78938d;
  border-top: 1px solid var(--fc-line);
  font-size: 0.66rem;
}

.p-forecourt .forecourt-safety-strip i {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  color: #092821;
  border-radius: 50%;
  font-style: normal;
  font-weight: 900;
  background: var(--fc-mint);
}

.p-forecourt .forecourt-setup-card {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 620px;
  margin: 70px auto;
  padding: 22px;
}

.p-forecourt .forecourt-setup-card h2,
.p-forecourt .forecourt-setup-card p {
  margin: 0;
}

.p-forecourt .forecourt-setup-card p {
  margin-top: 6px;
  color: var(--fc-muted);
}

@media (max-width: 1180px) {
  .p-forecourt .forecourt-grid {
    grid-template-columns: minmax(210px, 0.72fr) minmax(460px, 1.45fr);
  }

  .p-forecourt .forecourt-right-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
  }

  .p-forecourt .forecourt-chat-panel {
    max-height: 760px;
  }
}

@media (max-width: 780px) {
  .p-forecourt .forecourt-shell {
    width: calc(100% - 12px);
    min-height: auto;
    margin-top: 6px;
    padding: 10px;
    border-radius: 15px;
  }

  .p-forecourt .forecourt-shell::after {
    display: none;
  }

  .p-forecourt .forecourt-scene-head {
    min-height: 145px;
    margin: -10px -10px 0;
    padding: 18px 16px 16px;
    background-position: center 58%;
  }

  .p-forecourt .forecourt-scene-head p {
    margin-top: 6px;
    font-size: var(--text-sm);
  }

  .p-forecourt .forecourt-live-sign {
    min-width: 92px;
    padding: 8px;
  }

  .p-forecourt .forecourt-live-sign span {
    display: none;
  }

  .p-forecourt .forecourt-jump-nav {
    position: sticky;
    z-index: 5;
    top: 0;
    overflow-x: auto;
    background: rgba(6, 24, 26, 0.96);
    scrollbar-width: none;
  }

  .p-forecourt .forecourt-jump-nav::-webkit-scrollbar { display: none; }

  .p-forecourt .forecourt-jump-nav a {
    flex: 0 0 auto;
  }

  .p-forecourt .forecourt-grid,
.p-forecourt .forecourt-right-rail {
    display: flex;
    flex-direction: column;
  }

  .p-forecourt .forecourt-chat-panel {
    order: -1;
    min-height: 620px;
    max-height: none;
  }

  .p-forecourt .forecourt-message-list {
    max-height: 540px;
  }

  .p-forecourt .forecourt-reward-art {
    max-height: 190px;
  }

  .p-forecourt .forecourt-report-form {
    width: min(100%, 330px);
  }

  .p-forecourt .forecourt-left-rail,
.p-forecourt .forecourt-right-rail {
    display: contents;
  }

  .p-forecourt .forecourt-share-panel { order: 2; }
  .p-forecourt .forecourt-achievement-panel { order: 3; max-height: 520px; }
  .p-forecourt .forecourt-reward-panel { order: 4; }
  .p-forecourt .forecourt-duo-panel { order: 5; max-height: 620px; }
  .p-forecourt .forecourt-collection-panel { order: 6; max-height: 680px; }
  .p-forecourt .forecourt-set-panel { order: 7; }
  .p-forecourt .forecourt-board-panel { order: 8; }

  .p-forecourt .forecourt-channel-tabs > .forecourt-language-settings {
    margin-left: 0;
  }

  .p-forecourt .forecourt-object-card > summary {
    grid-template-columns: 54px minmax(0, 1fr) 16px;
  }

  .p-forecourt .forecourt-object-image,
.p-forecourt .forecourt-object-image-host,
.p-forecourt .forecourt-object-mark {
    width: 54px;
    height: 66px;
  }

  .p-forecourt .forecourt-safety-strip {
    justify-content: flex-start;
  }
}
}

/* SOURCE: 40-screens/magic.css */
/* =========================================================
   SCREEN: Magic chamber
   Scope: .p-magic only
   Root: .p-magic
   PHP: game/magic-view.php
   ========================================================= */

@layer screens {
.p-magic .magic-screen {
  --magic-ink: #f7f0db;
  --magic-muted: #bdb7ae;
  --magic-line: rgba(221, 202, 160, .2);
  --magic-panel: rgba(12, 14, 18, .86);
  --magic-gold: #e3b965;
  --magic-blue: #85c9e8;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 72px);
  margin: -1.5rem;
  padding: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  color: var(--magic-ink);
  background: #111318;
}

.p-magic .magic-room-art,
.p-magic .magic-room-veil {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
}

.p-magic .magic-room-art {
  background-image: var(--magic-room-image);
  background-position: center top;
  background-size: cover;
  opacity: .48;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.015);
  transition: opacity .25s ease, filter .25s ease;
}

.p-magic .magic-screen.is-room-image-fallback .magic-room-art {
  opacity: .36;
  filter: saturate(.52) contrast(1.04);
}

.p-magic .magic-room-veil {
  z-index: -1;
  background:
    radial-gradient(circle at 52% 18%, rgba(73, 75, 83, .18), transparent 38%),
    linear-gradient(180deg, rgba(8, 10, 13, .48), rgba(8, 10, 13, .82) 52%, #090b0f 100%);
}

.p-magic .magic-screen.is-charisma-heaven .magic-room-veil {
  background: linear-gradient(180deg, rgba(25, 28, 31, .28), rgba(9, 11, 14, .76) 55%, #090b0f 100%);
}

.p-magic .magic-screen.is-charisma-hell .magic-room-veil {
  background: radial-gradient(circle at 50% 18%, rgba(90, 28, 21, .18), transparent 42%), linear-gradient(180deg, rgba(8, 8, 10, .42), rgba(9, 8, 11, .82) 58%, #08090c 100%);
}

.p-magic .magic-command,
.p-magic .magic-flow,
.p-magic .magic-resource-bar,
.p-magic .magic-notice,
.p-magic .magic-main-grid {
  width: min(100%, 1740px);
  margin-inline: auto;
}

.p-magic .magic-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  gap: 1rem;
  align-items: end;
  margin-bottom: .8rem;
}

.p-magic .magic-title-copy {
  max-width: 870px;
  padding: 1.35rem 1.5rem;
  border-left: 3px solid var(--magic-gold);
  background: linear-gradient(90deg, rgba(5, 7, 10, .82), rgba(5, 7, 10, .18));
  text-shadow: 0 2px 16px #000;
}

.p-magic .magic-kicker,
.p-magic .magic-panel-head small {
  margin: 0 0 .28rem;
  color: var(--magic-gold);
  font-size: var(--text-xs-plus);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.p-magic .magic-title-copy h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 500;
  line-height: .92;
}

.p-magic .magic-title-copy > p:last-child {
  max-width: 760px;
  margin: .85rem 0 0;
  color: #ddd8ce;
  font-size: clamp(.9rem, 1.2vw, 1.08rem);
}

.p-magic .magic-charisma-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--magic-line);
  background: rgba(9, 11, 14, .88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
}

.p-magic .magic-charisma-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.p-magic .magic-charisma-card span {
  color: #d8d0bf;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.p-magic .magic-charisma-card strong {
  color: var(--magic-gold);
  font-family: Georgia, serif;
  font-size: 1.65rem;
}

.p-magic .magic-charisma-scale {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 3px;
  margin: .55rem 0;
}

.p-magic .magic-charisma-scale i {
  height: 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .12);
}

.p-magic .magic-charisma-scale i:nth-child(-n+10) { background: rgba(186, 63, 49, .28); }
.p-magic .magic-charisma-scale i:nth-child(n+12) { background: rgba(229, 205, 138, .28); }
.p-magic .magic-charisma-scale i.is-active { height: 10px; margin-top: -2px; background: #fff4ca; box-shadow: 0 0 12px #fff4ca; }
.p-magic .magic-charisma-card.is-hell .magic-charisma-scale i.is-active { background: #ed604d; box-shadow: 0 0 12px #ed604d; }
.p-magic .magic-charisma-card p { margin: .5rem 0 0; color: var(--magic-muted); font-size: var(--text-sm-plus); line-height: 1.45; }

.p-magic .magic-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: .65rem;
  border: 1px solid var(--magic-line);
  background: rgba(8, 10, 13, .8);
}

.p-magic .magic-flow span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-height: 42px;
  color: #cfc7b8;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.p-magic .magic-flow span + span { border-left: 1px solid var(--magic-line); }
.p-magic .magic-flow b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #947b4c; border-radius: 50%; color: var(--magic-gold); }

.p-magic .magic-resource-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 150px)) 1fr;
  gap: .55rem;
  align-items: stretch;
  margin-bottom: .65rem;
}

.p-magic .magic-resource-bar.has-gold { grid-template-columns: repeat(5, minmax(96px, 145px)) 1fr; }

.p-magic .magic-resource-bar > div,
.p-magic .magic-resource-bar > p {
  margin: 0;
  border: 1px solid var(--magic-line);
  background: rgba(8, 10, 13, .84);
}

.p-magic .magic-resource-bar > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: .5rem;
  padding: .55rem .7rem;
}

.p-magic .magic-resource-icon { grid-row: 1 / 3; place-self: center; color: var(--magic-gold); font-size: 1.28rem; }
.p-magic .magic-resource-icon.is-gold { color: #f2cc68; font-family: Georgia, serif; font-weight: 800; }
.p-magic .magic-resource-bar small { align-self: end; color: var(--magic-muted); font-size: var(--text-xs); text-transform: uppercase; }
.p-magic .magic-resource-bar strong { align-self: start; font-size: 1.05rem; }
.p-magic .magic-resource-bar > p { display: flex; align-items: center; padding: .7rem .9rem; color: var(--magic-muted); font-size: var(--text-sm); line-height: 1.35; }

.p-magic .magic-notice {
  display: flex;
  gap: .7rem 1.2rem;
  margin-bottom: .65rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(224, 178, 84, .52);
  background: rgba(72, 48, 18, .88);
  color: #f5e1b7;
  font-size: var(--text-sm-plus);
}

.p-magic .magic-main-grid {
  display: grid;
  grid-template-columns: minmax(275px, .78fr) minmax(580px, 1.8fr) minmax(280px, .82fr);
  gap: .7rem;
  align-items: start;
}

.p-magic .magic-panel {
  border: 1px solid var(--magic-line);
  background: var(--magic-panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
}

.p-magic .magic-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 63px;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--magic-line);
}

.p-magic .magic-panel-head h2 { margin: 0; font-family: Georgia, serif; font-size: 1.27rem; font-weight: 500; }
.p-magic .magic-panel-head > span { padding: .25rem .48rem; border: 1px solid var(--magic-line); color: var(--magic-muted); font-size: var(--text-xs); }

.p-magic .magic-search { padding: .75rem; border-bottom: 1px solid var(--magic-line); }
.p-magic .magic-search > label { display: block; margin-bottom: .35rem; color: var(--magic-muted); font-size: var(--text-xs); font-weight: 750; text-transform: uppercase; }
.p-magic .magic-search > div { display: grid; grid-template-columns: 1fr auto; }
.p-magic .magic-search input,
.p-magic .magic-search button,
.p-magic .magic-plan select,
.p-magic .magic-plan-submit button {
  min-height: 38px;
  border: 1px solid rgba(219, 203, 170, .28);
  border-radius: 0;
  color: var(--magic-ink);
  background: rgba(5, 7, 10, .8);
}
.p-magic .magic-search input { min-width: 0; padding: .5rem .65rem; }
.p-magic .magic-search button { padding: .5rem .7rem; color: var(--magic-gold); cursor: pointer; }

.p-magic .magic-subject-list { max-height: 650px; overflow: auto; scrollbar-color: #675944 #121418; }
.p-magic .magic-subject {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: .65rem;
  align-items: center;
  min-height: 70px;
  padding: .58rem .72rem;
  border-bottom: 1px solid rgba(221, 202, 160, .1);
  color: inherit;
  text-decoration: none;
}
.p-magic .magic-subject:hover,
.p-magic .magic-subject.is-selected { background: rgba(198, 165, 98, .12); }
.p-magic .magic-subject.is-selected { box-shadow: inset 3px 0 var(--magic-gold); }
.p-magic .magic-subject.is-locked { opacity: .62; }
.p-magic .magic-subject-avatar { display: grid; place-items: center; width: 52px; height: 58px; overflow: hidden; border: 1px solid #796948; border-radius: 48% 48% 12px 12px; background: #191a1c; color: var(--magic-gold); font-family: Georgia, serif; font-size: 1.1rem; }
.p-magic .magic-subject-avatar > .game-student-generated-image { object-fit: cover; object-position: 50% 24%; transform: scale(1.32); transform-origin: 50% 26%; }
.p-magic .magic-subject-own-image { display: block; height: 100%; object-fit: cover; object-position: var(--portrait-x, 50%) var(--portrait-y, 40%); transform: scale(var(--portrait-zoom, 1)); transform-origin: var(--portrait-x, 50%) var(--portrait-y, 40%); width: 100%; }
.p-magic .magic-subject-copy { display: grid; gap: 1px; min-width: 0; }
.p-magic .magic-subject-copy strong,
.p-magic .magic-subject-copy small,
.p-magic .magic-subject-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-magic .magic-subject-copy strong { font-size: .84rem; }
.p-magic .magic-subject-copy small { color: var(--magic-muted); font-size: .7rem; }
.p-magic .magic-subject-copy em { color: #caa968; font-size: .65rem; font-style: normal; }
.p-magic .magic-subject-state { color: #85c58e; font-size: .62rem; text-transform: uppercase; }
.p-magic .magic-subject.is-locked .magic-subject-state { color: #c7796f; }

.p-magic .magic-pages { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border-top: 1px solid var(--magic-line); border-bottom: 1px solid var(--magic-line); }
.p-magic .magic-pages a { display: grid; place-items: center; min-height: 38px; color: var(--magic-gold); text-decoration: none; }
.p-magic .magic-pages a.is-disabled { opacity: .25; pointer-events: none; }
.p-magic .magic-pages span { text-align: center; color: var(--magic-muted); font-size: .7rem; }
.p-magic .magic-access-rule { padding: .8rem .9rem; }
.p-magic .magic-access-rule strong { color: var(--magic-gold); font-size: var(--text-sm); }
.p-magic .magic-access-rule p { margin: .35rem 0 0; color: var(--magic-muted); font-size: var(--text-xs-plus); line-height: 1.4; }

.p-magic .magic-profile-read { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(300px, 1.3fr); gap: .8rem; padding: .8rem; border-bottom: 1px solid var(--magic-line); }
.p-magic .magic-profile-lead > p { margin: 0 0 .7rem; color: #d2ccbf; font-size: var(--text-sm); line-height: 1.45; }
.p-magic .magic-vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.p-magic .magic-vitals span { padding: .5rem; border: 1px solid rgba(221, 202, 160, .14); background: rgba(0, 0, 0, .2); }
.p-magic .magic-vitals small { display: block; color: var(--magic-muted); font-size: var(--text-2xs); text-transform: uppercase; }
.p-magic .magic-vitals strong { color: var(--magic-gold); font-size: .9rem; }
.p-magic .magic-signal-grid { display: grid; gap: .4rem; }
.p-magic .magic-signal { display: grid; grid-template-columns: 28px 1fr; gap: .5rem; align-items: center; padding: .43rem .55rem; border: 1px solid rgba(221, 202, 160, .14); background: rgba(0, 0, 0, .2); }
.p-magic .magic-signal > span { color: var(--magic-blue); font-size: 1.15rem; text-align: center; }
.p-magic .magic-signal > div { display: grid; }
.p-magic .magic-signal strong { font-size: .74rem; }
.p-magic .magic-signal small { color: var(--magic-muted); font-size: .62rem; }
.p-magic .magic-signal i { grid-column: 1 / 3; height: 3px; background: rgba(255, 255, 255, .08); }
.p-magic .magic-signal i b { display: block; height: 100%; background: var(--magic-blue); }
.p-magic .magic-signal.is-ember i b { background: #db7051; }
.p-magic .magic-signal.is-healing i b,
.p-magic .magic-signal.is-nature i b { background: #84be87; }
.p-magic .magic-signal.is-shadow i b { background: #9a72c4; }
.p-magic .magic-profile-foot { grid-column: 1 / -1; margin: 0; color: #9f998e; font-size: var(--text-xs); font-style: italic; }

.p-magic .magic-plan { padding: .85rem; }
.p-magic .magic-plan fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.p-magic .magic-plan legend,
.p-magic .magic-choice-grid label > span { display: block; margin-bottom: .42rem; color: var(--magic-gold); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.p-magic .magic-activity-grid { display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: .42rem; }
.p-magic .magic-activity { min-height: 78px; padding: .52rem .4rem; border: 1px solid rgba(221, 202, 160, .18); color: var(--magic-ink); background: rgba(5, 7, 10, .65); cursor: pointer; text-align: left; }
.p-magic .magic-activity:hover,
.p-magic .magic-activity.is-selected { border-color: var(--magic-gold); background: rgba(171, 128, 57, .17); }
.p-magic .magic-activity strong,
.p-magic .magic-activity span,
.p-magic .magic-activity small { display: block; }
.p-magic .magic-activity strong { font-size: .76rem; }
.p-magic .magic-activity span { margin-top: .22rem; color: var(--magic-muted); font-size: .63rem; line-height: 1.25; }
.p-magic .magic-activity small { margin-top: .3rem; color: var(--magic-gold); font-size: .56rem; text-transform: uppercase; }
.p-magic .magic-action-note { margin: .55rem 0 .8rem; padding: .45rem .6rem; border-left: 2px solid var(--magic-gold); color: var(--magic-muted); background: rgba(0, 0, 0, .18); font-size: .7rem; }

.p-magic .magic-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .85rem; }
.p-magic .magic-choice-grid label { min-width: 0; }
.p-magic .magic-plan select { width: 100%; padding: .42rem .55rem; }
.p-magic .magic-choice-grid label > small { display: block; min-height: 27px; margin-top: .32rem; color: var(--magic-muted); font-size: .61rem; line-height: 1.35; }

.p-magic .magic-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .42rem; }
.p-magic .magic-method { position: relative; display: grid; gap: .18rem; min-height: 75px; padding: .55rem .55rem .55rem 1.7rem; border: 1px solid rgba(221, 202, 160, .14); background: rgba(0, 0, 0, .18); cursor: pointer; }
.p-magic .magic-method:has(input:checked) { border-color: var(--magic-gold); background: rgba(168, 127, 63, .15); }
.p-magic .magic-method input { position: absolute; top: .65rem; left: .55rem; accent-color: var(--magic-gold); }
.p-magic .magic-method strong { font-size: .73rem; }
.p-magic .magic-method span { color: var(--magic-muted); font-size: .62rem; line-height: 1.3; }
.p-magic .magic-method.is-red,
.p-magic .magic-method.is-dark { border-color: rgba(173, 66, 57, .28); }

.p-magic .magic-plan-submit { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--magic-line); }
.p-magic .magic-plan-submit p { display: grid; gap: .2rem; margin: 0; }
.p-magic .magic-plan-submit p strong { color: var(--magic-gold); font-size: .84rem; }
.p-magic .magic-plan-submit p span { color: var(--magic-muted); font-size: .65rem; }
.p-magic .magic-plan-submit button { padding: .65rem 1rem; border-color: #a9864a; color: #16120a; background: linear-gradient(180deg, #ead295, #c99d51); font-weight: 850; cursor: pointer; }
.p-magic .magic-plan-submit button:disabled { opacity: .36; cursor: not-allowed; }

.p-magic .magic-side-stack { display: grid; gap: .7rem; }
.p-magic .magic-projects article { display: grid; grid-template-columns: 1fr 38px; gap: .38rem .6rem; padding: .62rem .75rem; border-bottom: 1px solid rgba(221, 202, 160, .1); }
.p-magic .magic-projects article > div { display: grid; }
.p-magic .magic-projects article strong { font-size: .75rem; }
.p-magic .magic-projects article small { color: var(--magic-muted); font-size: .6rem; text-transform: uppercase; }
.p-magic .magic-projects article > i { grid-column: 1; height: 4px; background: rgba(255, 255, 255, .09); }
.p-magic .magic-projects article > i b { display: block; height: 100%; background: var(--magic-gold); }
.p-magic .magic-projects article > span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--magic-muted); font-size: .66rem; }
.p-magic .magic-artifacts article { display: grid; grid-template-columns: 28px 1fr; gap: .5rem; align-items: center; padding: .55rem .75rem; border-bottom: 1px solid rgba(221, 202, 160, .1); }
.p-magic .magic-artifacts article > span { color: var(--magic-gold); font-size: 1.2rem; }
.p-magic .magic-artifacts article div { display: grid; }
.p-magic .magic-artifacts article strong { font-size: var(--text-xs-plus); }
.p-magic .magic-artifacts article small { color: var(--magic-muted); font-size: .61rem; }
.p-magic .magic-history article { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .55rem .75rem; border-bottom: 1px solid rgba(221, 202, 160, .1); }
.p-magic .magic-history article span { color: var(--magic-muted); font-size: .64rem; }
.p-magic .magic-history article strong { grid-column: 1; font-size: var(--text-xs-plus); }
.p-magic .magic-history article small { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--magic-gold); font-size: .57rem; text-transform: uppercase; }
.p-magic .magic-muted { margin: 0; padding: .85rem; color: var(--magic-muted); font-size: .7rem; line-height: 1.45; }
.p-magic .magic-empty { display: grid; gap: .4rem; min-height: 300px; place-content: center; text-align: center; color: var(--magic-muted); }

@media (max-width: 1380px) {
  .p-magic .magic-main-grid { grid-template-columns: 280px minmax(550px, 1fr); }
  .p-magic .magic-side-stack { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .p-magic .magic-activity-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .p-magic .magic-screen { margin: -1rem; }
  .p-magic .magic-command,
.p-magic .magic-main-grid { grid-template-columns: 1fr; }
  .p-magic .magic-resource-bar { grid-template-columns: repeat(4, 1fr); }
  .p-magic .magic-resource-bar.has-gold { grid-template-columns: repeat(3, 1fr); }
  .p-magic .magic-resource-bar > p { grid-column: 1 / -1; }
  .p-magic .magic-side-stack { grid-column: auto; grid-template-columns: 1fr; }
  .p-magic .magic-profile-read { grid-template-columns: 1fr; }
  .p-magic .magic-profile-foot { grid-column: auto; }
}

@media (max-width: 680px) {
  .p-magic .magic-screen { padding: .75rem; }
  .p-magic .magic-flow { grid-template-columns: 1fr; }
  .p-magic .magic-flow span + span { border-left: 0; border-top: 1px solid var(--magic-line); }
  .p-magic .magic-resource-bar { grid-template-columns: repeat(2, 1fr); }
  .p-magic .magic-resource-bar.has-gold { grid-template-columns: repeat(2, 1fr); }
  .p-magic .magic-choice-grid,
.p-magic .magic-method-grid { grid-template-columns: 1fr; }
  .p-magic .magic-activity-grid { grid-template-columns: repeat(2, 1fr); }
  .p-magic .magic-plan-submit { grid-template-columns: 1fr; }
  .p-magic .magic-plan-submit button { width: 100%; }
}

/* Magiekammer V2: drei klare Wege und stufenweise Freischaltung */
.p-magic .magic-v2 .magic-v2-flow { grid-template-columns: repeat(3, 1fr); }
.p-magic .magic-v2 .magic-workbench { overflow: hidden; }

.p-magic .magic-level-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: .8rem;
  padding: .8rem;
  border-bottom: 1px solid var(--magic-line);
  background: linear-gradient(90deg, rgba(196, 151, 69, .11), transparent 72%);
}

.p-magic .magic-level-orb {
  display: grid;
  place-content: center;
  width: 70px;
  height: 70px;
  border: 1px solid #b69150;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 174, 98, .19), rgba(8, 10, 13, .92));
  text-align: center;
  box-shadow: inset 0 0 24px rgba(217, 175, 92, .12), 0 0 18px rgba(0, 0, 0, .35);
}

.p-magic .magic-level-orb small { color: var(--magic-muted); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; }
.p-magic .magic-level-orb strong { color: var(--magic-gold); font-family: Georgia, serif; font-size: 1.9rem; line-height: 1; }
.p-magic .magic-level-copy { min-width: 0; }
.p-magic .magic-level-copy > div { display: flex; justify-content: space-between; gap: .7rem; }
.p-magic .magic-level-copy > div strong { color: #f2dfb1; font-size: .83rem; }
.p-magic .magic-level-copy > div span { color: var(--magic-muted); font-size: .65rem; }
.p-magic .magic-level-copy p { margin: .36rem 0 0; color: #d5cec0; font-size: .69rem; line-height: 1.35; }
.p-magic .magic-level-copy p b { color: var(--magic-gold); }
.p-magic .magic-level-copy .magic-next-unlock { color: var(--magic-muted); }
.p-magic .magic-level-bar { display: block; height: 7px; margin-top: .45rem; border: 1px solid rgba(225, 194, 129, .2); background: rgba(0, 0, 0, .42); }
.p-magic .magic-level-bar b { display: block; height: 100%; background: linear-gradient(90deg, #9c7337, #efd994); box-shadow: 0 0 9px rgba(225, 184, 96, .45); }

.p-magic .magic-beginner-signals { padding: .72rem .8rem; border-bottom: 1px solid var(--magic-line); }
.p-magic .magic-beginner-signals > div:first-child { display: flex; justify-content: space-between; gap: .7rem; margin-bottom: .45rem; }
.p-magic .magic-beginner-signals > div:first-child strong { color: var(--magic-gold); font-size: .75rem; }
.p-magic .magic-beginner-signals > div:first-child span { color: var(--magic-muted); font-size: .64rem; }
.p-magic .magic-beginner-signals .magic-signal-grid { grid-template-columns: repeat(2, 1fr); }
.p-magic .magic-beginner-signals .magic-signal { min-height: 56px; }

.p-magic .magic-path-fieldset legend { margin-bottom: .5rem; }
.p-magic .magic-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.p-magic .magic-path {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .08rem .4rem;
  min-height: 104px;
  padding: .6rem;
  border: 1px solid rgba(221, 202, 160, .18);
  color: var(--magic-ink);
  background: rgba(4, 6, 9, .67);
  text-align: left;
  cursor: pointer;
}
.p-magic .magic-path:hover,
.p-magic .magic-path.is-selected { border-color: var(--magic-gold); background: rgba(171, 128, 57, .17); box-shadow: inset 0 -2px var(--magic-gold); }
.p-magic .magic-path > span { grid-row: 1 / 4; color: var(--magic-gold); font-size: 1.3rem; text-align: center; }
.p-magic .magic-path strong { font-size: var(--text-sm); }
.p-magic .magic-path small { color: #d1cabd; font-size: .65rem; line-height: 1.25; }
.p-magic .magic-path em { grid-column: 2; margin-top: .2rem; color: var(--magic-muted); font-size: var(--text-2xs); font-style: normal; line-height: 1.25; }

.p-magic .magic-path-fields { margin-top: .7rem; padding: .72rem; border: 1px solid rgba(221, 202, 160, .15); background: rgba(0, 0, 0, .22); }
.p-magic .magic-path-fields.is-hidden { display: none; }
.p-magic .magic-action-explain { display: grid; grid-template-columns: 70px 1fr; gap: .55rem; margin-bottom: .7rem; padding: .52rem .62rem; border-left: 2px solid var(--magic-gold); background: rgba(191, 148, 72, .09); }
.p-magic .magic-action-explain strong { color: var(--magic-gold); font-size: .7rem; text-transform: uppercase; }
.p-magic .magic-action-explain span { color: #d8d1c4; font-size: .7rem; line-height: 1.4; }
.p-magic .magic-choice-grid.is-two { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }

.p-magic .magic-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.p-magic .magic-recipe { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: .4rem; min-height: 132px; padding: .56rem; border: 1px solid rgba(221, 202, 160, .16); background: rgba(4, 6, 9, .6); cursor: pointer; }
.p-magic .magic-recipe:has(input:checked) { border-color: var(--magic-gold); background: rgba(171, 128, 57, .14); }
.p-magic .magic-recipe input { position: absolute; top: .5rem; right: .5rem; accent-color: var(--magic-gold); }
.p-magic .magic-recipe > span { color: var(--magic-gold); font-size: var(--text-md); }
.p-magic .magic-recipe > div { display: grid; align-content: start; gap: .2rem; }
.p-magic .magic-recipe strong { padding-right: 1rem; font-size: var(--text-xs-plus); }
.p-magic .magic-recipe small { color: var(--magic-muted); font-size: .6rem; line-height: 1.28; }
.p-magic .magic-recipe em { color: #d2c092; font-size: .6rem; font-style: normal; line-height: 1.28; }
.p-magic .magic-recipe b { margin-top: .2rem; color: var(--magic-gold); font-size: .59rem; font-weight: 650; }
.p-magic .magic-unlock-note { margin: .6rem 0 0; color: var(--magic-muted); font-size: .65rem; }
.p-magic .magic-find-select { display: block; margin-bottom: .65rem; }
.p-magic .magic-find-select > span { display: block; margin-bottom: .35rem; color: var(--magic-gold); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.p-magic .magic-find-select select { width: 100%; }
.p-magic .magic-empty.is-small { min-height: 115px; }

.p-magic .magic-item-list,
.p-magic .magic-find-list { display: grid; }
.p-magic .magic-v3 .magic-item-list { max-height: 560px; overflow: auto; scrollbar-color: #675944 #121418; }
.p-magic .magic-item-card { display: grid; grid-template-columns: 28px 1fr auto; gap: .48rem; align-items: start; padding: .62rem .7rem; border-bottom: 1px solid rgba(221, 202, 160, .1); }
.p-magic .magic-item-card.is-equipped { background: rgba(166, 129, 64, .12); box-shadow: inset 3px 0 var(--magic-gold); }
.p-magic .magic-item-card > span { color: var(--magic-gold); font-size: 1.1rem; }
.p-magic .magic-item-card > div { display: grid; gap: .12rem; min-width: 0; }
.p-magic .magic-item-card strong { font-size: var(--text-xs-plus); }
.p-magic .magic-item-card small { color: var(--magic-muted); font-size: .61rem; line-height: 1.32; }
.p-magic .magic-item-card em { color: #d3b977; font-size: var(--text-2xs); font-style: normal; }
.p-magic .magic-item-card form { align-self: center; }
.p-magic .magic-item-card button { min-height: 30px; padding: .35rem .48rem; border: 1px solid #8d7549; color: var(--magic-gold); background: rgba(8, 10, 13, .72); font-size: .62rem; cursor: pointer; }
.p-magic .magic-item-card button:disabled { opacity: .36; cursor: not-allowed; }
.p-magic .magic-side-note { margin: 0; padding: .62rem .72rem; border-top: 1px solid var(--magic-line); color: var(--magic-muted); font-size: .62rem; line-height: 1.4; }
.p-magic .magic-basic-heal { display: flex; justify-content: space-between; gap: .7rem; align-items: center; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid rgba(221, 202, 160, .12); }
.p-magic .magic-basic-heal span { display: grid; gap: .14rem; }
.p-magic .magic-basic-heal strong { color: #ddd3bf; font-size: .7rem; }
.p-magic .magic-basic-heal small,
.p-magic .magic-next-recipe { color: var(--magic-muted); font-size: .6rem; }
.p-magic .magic-basic-heal button { min-height: 32px; padding: .42rem .62rem; border: 1px solid #8d7549; color: var(--magic-gold); background: rgba(8, 10, 13, .72); cursor: pointer; }
.p-magic .magic-basic-heal button:disabled { opacity: .36; cursor: not-allowed; }
.p-magic .magic-next-recipe { margin: .55rem 0 0; }
.p-magic .magic-side-note b { color: #d6bd82; }
.p-magic .magic-find-card em { color: var(--magic-gold); font-size: var(--text-2xs); font-style: normal; }
.p-magic .magic-find-card.is-attuned { background: rgba(91, 142, 98, .11); }
.p-magic .magic-find-card.is-identified { background: rgba(177, 138, 67, .1); }

@media (max-width: 1380px) {
  .p-magic .magic-v2 .magic-side-stack { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .p-magic .magic-v2 .magic-side-stack { grid-template-columns: 1fr; }
  .p-magic .magic-recipe-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .p-magic .magic-v2 .magic-v2-flow,
.p-magic .magic-path-grid,
.p-magic .magic-recipe-grid,
.p-magic .magic-choice-grid.is-two,
.p-magic .magic-beginner-signals .magic-signal-grid { grid-template-columns: 1fr; }
  .p-magic .magic-level-card { grid-template-columns: 58px 1fr; }
  .p-magic .magic-level-orb { width: 54px; height: 54px; }
  .p-magic .magic-level-orb strong { font-size: 1.4rem; }
  .p-magic .magic-level-copy > div,
.p-magic .magic-beginner-signals > div:first-child { display: grid; }
}

/* Magiekammer V3: Analysekreislauf, 2+5-Planung und stabile AJAX-Oberflaeche */
.p-magic .magic-v3 .magic-v3-flow { grid-template-columns: repeat(3, 1fr); }
.p-magic .magic-v3-grid { grid-template-columns: minmax(270px, .72fr) minmax(650px, 1.75fr) minmax(310px, .82fr); }
.p-magic .magic-v3.is-updating .magic-workbench,
.p-magic .magic-v3.is-updating .magic-v3-side,
.p-magic .magic-v3.is-updating .magic-runtime-queue { opacity: .66; pointer-events: none; }
.p-magic .magic-v3 .magic-workbench,
.p-magic .magic-v3 .magic-v3-side,
.p-magic .magic-v3 .magic-runtime-queue { transition: opacity .14s ease; }

.p-magic .magic-live-message {
  display: none;
  width: min(100%, 1740px);
  margin: 0 auto .65rem;
  padding: .7rem .9rem;
  border: 1px solid var(--magic-line);
  background: rgba(8, 10, 13, .92);
  color: #ddd5c5;
  font-size: .76rem;
}
.p-magic .magic-live-message.is-visible { display: block; }
.p-magic .magic-live-message.is-success { border-color: rgba(106, 188, 118, .58); color: #c9e8c8; }
.p-magic .magic-live-message.is-error { border-color: rgba(211, 91, 73, .64); color: #f2b7ae; }

.p-magic .magic-v3-level .magic-level-orb { position: relative; }
.p-magic .magic-level-orb em { color: var(--magic-muted); font-size: .52rem; font-style: normal; }

.p-magic .magic-skill-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .42rem;
  padding: .68rem .8rem;
  border-bottom: 1px solid var(--magic-line);
  background: rgba(0, 0, 0, .18);
}
.p-magic .magic-skill-row article { display: grid; grid-template-columns: 1fr auto; gap: .2rem .45rem; padding: .5rem .58rem; border: 1px solid rgba(221, 202, 160, .15); background: rgba(5, 7, 10, .58); }
.p-magic .magic-skill-row span { color: #ddd3bf; font-size: .66rem; font-weight: 750; }
.p-magic .magic-skill-row strong { color: var(--magic-gold); font-size: var(--text-xs); }
.p-magic .magic-skill-row i { grid-column: 1 / -1; height: 4px; background: rgba(255, 255, 255, .08); }
.p-magic .magic-skill-row i b { display: block; height: 100%; background: linear-gradient(90deg, #9a7439, #ead18e); }
.p-magic .magic-skill-row small { grid-column: 1 / -1; color: var(--magic-muted); font-size: .56rem; }

.p-magic .magic-affinity-read { padding: .68rem .8rem; border-bottom: 1px solid var(--magic-line); }
.p-magic .magic-affinity-read > div:first-child { display: flex; justify-content: space-between; gap: .7rem; margin-bottom: .42rem; }
.p-magic .magic-affinity-read > div:first-child strong { color: var(--magic-gold); font-size: var(--text-xs-plus); }
.p-magic .magic-affinity-read > div:first-child span { color: var(--magic-muted); font-size: .61rem; }
.p-magic .magic-affinity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.p-magic .magic-affinity-grid article { display: grid; grid-template-columns: 25px 1fr; gap: .35rem; align-items: center; padding: .5rem; border: 1px solid rgba(221, 202, 160, .15); background: rgba(0, 0, 0, .22); }
.p-magic .magic-affinity-grid article > span { color: var(--magic-blue); font-size: var(--text-md); text-align: center; }
.p-magic .magic-affinity-grid article > div { display: grid; }
.p-magic .magic-affinity-grid strong { font-size: .67rem; }
.p-magic .magic-affinity-grid small { color: var(--magic-muted); font-size: .57rem; }
.p-magic .magic-affinity-grid em { grid-column: 1 / -1; color: #cdb16f; font-size: .56rem; font-style: normal; }
.p-magic .magic-affinity-grid article.is-unusable { border-color: rgba(176, 73, 64, .4); opacity: .7; }
.p-magic .magic-affinity-read > p { margin: .45rem 0 0; color: var(--magic-muted); font-size: .61rem; line-height: 1.35; }

.p-magic .magic-runtime-plan { scroll-margin-top: 1rem; }
.p-magic .magic-analysis-odds { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: .42rem; align-items: center; margin: .55rem 0; padding: .5rem .6rem; border: 1px solid rgba(221, 202, 160, .14); background: rgba(0, 0, 0, .2); }
.p-magic .magic-analysis-odds span { color: #ded4bf; font-size: .65rem; }
.p-magic .magic-analysis-odds b { padding: .25rem .4rem; border: 1px solid rgba(221, 202, 160, .18); color: var(--magic-muted); font-size: var(--text-2xs); }
.p-magic .magic-analysis-odds b:nth-last-child(2) { color: #82c8e6; }
.p-magic .magic-analysis-odds b:last-child { color: #c992ea; }
.p-magic .magic-medium-line { display: grid; grid-template-columns: 150px 1fr; gap: .6rem; align-items: center; margin-top: .55rem; }
.p-magic .magic-medium-line > span { color: var(--magic-gold); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.p-magic .magic-medium-line select { width: 100%; }

.p-magic .magic-essence-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: .42rem; max-height: 270px; overflow: auto; }
.p-magic .magic-essence-option { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: .4rem; min-height: 75px; padding: .52rem; border: 1px solid rgba(221, 202, 160, .15); background: rgba(0, 0, 0, .24); cursor: pointer; }
.p-magic .magic-essence-option:has(input:checked) { border-color: var(--magic-gold); background: rgba(171, 128, 57, .15); }
.p-magic .magic-essence-option.is-rare { border-left: 3px solid #65b8dc; }
.p-magic .magic-essence-option.is-epic { border-left: 3px solid #bd78df; }
.p-magic .magic-essence-option.is-reserved { opacity: .46; cursor: not-allowed; }
.p-magic .magic-essence-option input { position: absolute; top: .45rem; right: .45rem; accent-color: var(--magic-gold); }
.p-magic .magic-essence-option > span { color: var(--magic-blue); font-size: var(--text-md); }
.p-magic .magic-essence-option > div { display: grid; gap: .12rem; }
.p-magic .magic-essence-option strong { padding-right: 1.1rem; font-size: var(--text-xs); }
.p-magic .magic-essence-option small { color: var(--magic-muted); font-size: var(--text-2xs); }
.p-magic .magic-essence-option em { color: #d0b674; font-size: .56rem; font-style: normal; }
.p-magic .magic-plan-blocked { margin: .55rem 0 0; padding: .5rem .62rem; border: 1px solid rgba(195, 84, 70, .48); color: #e7afa6; background: rgba(92, 28, 23, .2); font-size: .65rem; }

.p-magic .magic-v3-side { align-content: start; }
.p-magic .magic-crystal-card,
.p-magic .magic-mini-log article { display: grid; grid-template-columns: 27px 1fr; gap: .45rem; padding: .55rem .7rem; border-bottom: 1px solid rgba(221, 202, 160, .1); }
.p-magic .magic-crystal-card > span { color: var(--magic-blue); font-size: var(--text-md); }
.p-magic .magic-crystal-card > div { display: grid; gap: .1rem; }
.p-magic .magic-crystal-card strong { font-size: var(--text-xs); }
.p-magic .magic-crystal-card small { color: var(--magic-muted); font-size: var(--text-2xs); }
.p-magic .magic-crystal-card em { color: #d0b674; font-size: .55rem; font-style: normal; }
.p-magic .magic-crystal-card.is-rare { box-shadow: inset 3px 0 #65b8dc; }
.p-magic .magic-crystal-card.is-epic { box-shadow: inset 3px 0 #bd78df; }
.p-magic .magic-item-card.is-rare { border-left: 3px solid #65b8dc; }
.p-magic .magic-item-card.is-epic { border-left: 3px solid #bd78df; }
.p-magic .magic-mini-log article > span { color: var(--magic-gold); }
.p-magic .magic-mini-log article p { margin: 0; color: #d1cabd; font-size: .6rem; line-height: 1.38; }

.p-magic .magic-runtime-queue { width: min(100%, 1740px); margin: .7rem auto 0; }
.p-magic .magic-active-lanes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; padding: .65rem; }
.p-magic .magic-job { display: grid; grid-template-columns: 38px 1fr auto; gap: .55rem; align-items: center; min-height: 78px; padding: .6rem .7rem; border: 1px solid rgba(221, 202, 160, .16); background: rgba(0, 0, 0, .24); }
.p-magic .magic-job > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #8e7547; border-radius: 50%; color: var(--magic-gold); }
.p-magic .magic-job > div { display: grid; gap: .1rem; }
.p-magic .magic-job small { color: var(--magic-muted); font-size: .57rem; text-transform: uppercase; }
.p-magic .magic-job strong { font-size: .75rem; }
.p-magic .magic-job p { margin: 0; color: #d2c9b8; font-size: .62rem; }
.p-magic .magic-job time { color: var(--magic-gold); font-family: ui-monospace, monospace; font-size: .92rem; }
.p-magic .magic-job.is-running { border-color: rgba(209, 169, 88, .45); background: linear-gradient(90deg, rgba(181, 137, 60, .13), rgba(0, 0, 0, .24)); }
.p-magic .magic-job.is-empty { opacity: .56; }

.p-magic .magic-queue-strip { padding: 0 .65rem .65rem; }
.p-magic .magic-queue-strip > strong,
.p-magic .magic-job-history > strong { display: block; margin-bottom: .4rem; color: var(--magic-gold); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.p-magic .magic-queue-strip ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.p-magic .magic-queue-strip li { display: grid; grid-template-columns: 22px 24px 1fr; gap: .3rem; align-items: center; min-height: 60px; padding: .45rem; border: 1px solid rgba(221, 202, 160, .13); background: rgba(0, 0, 0, .2); }
.p-magic .magic-queue-strip li > b { color: var(--magic-gold); font-size: .64rem; }
.p-magic .magic-queue-strip li > span { color: var(--magic-blue); }
.p-magic .magic-queue-strip li > div { display: grid; min-width: 0; }
.p-magic .magic-queue-strip li strong,
.p-magic .magic-queue-strip li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-magic .magic-queue-strip li strong { font-size: .62rem; }
.p-magic .magic-queue-strip li small { color: var(--magic-muted); font-size: .53rem; }
.p-magic .magic-queue-strip li time { grid-column: 1 / -1; color: #cbb06d; font-size: .54rem; }
.p-magic .magic-queue-strip li.is-empty { opacity: .42; }
.p-magic .magic-job-history { padding: .65rem; border-top: 1px solid var(--magic-line); }
.p-magic .magic-job-history article { display: grid; grid-template-columns: 28px 1fr auto; gap: .45rem; align-items: center; padding: .42rem 0; border-bottom: 1px solid rgba(221, 202, 160, .08); }
.p-magic .magic-job-history article > span { color: var(--magic-gold); }
.p-magic .magic-job-history article > div { display: grid; }
.p-magic .magic-job-history article strong { font-size: .64rem; }
.p-magic .magic-job-history article small { color: var(--magic-muted); font-size: .56rem; line-height: 1.3; }
.p-magic .magic-job-history article > b { color: #91ca95; font-size: var(--text-2xs); }

.p-magic .magic-known-spells { margin-top: .65rem; padding: .65rem; border: 1px solid rgba(126, 183, 255, .22); background: rgba(5, 12, 28, .42); }
.p-magic .magic-known-spells > div:first-child { display: flex; justify-content: space-between; gap: .7rem; align-items: baseline; }
.p-magic .magic-known-spells > div:first-child span,
.p-magic .magic-known-spells > p { color: var(--magic-muted); font-size: .62rem; }
.p-magic .magic-known-spells > div:last-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .4rem; margin-top: .5rem; }
.p-magic .magic-known-spells article { display: flex; gap: .45rem; padding: .5rem; border: 1px solid rgba(142, 196, 255, .16); background: rgba(8, 18, 38, .58); }
.p-magic .magic-known-spells article > span { color: var(--magic-gold); }
.p-magic .magic-known-spells article div { display: grid; gap: .1rem; }
.p-magic .magic-known-spells article small,
.p-magic .magic-known-spells article em { color: var(--magic-muted); font-size: var(--text-2xs); font-style: normal; }
.p-magic .magic-build-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: .55rem 0; }
.p-magic .magic-build-mode label { display: flex; gap: .45rem; padding: .55rem; border: 1px solid rgba(144, 193, 255, .2); background: rgba(7, 16, 35, .55); cursor: pointer; }
.p-magic .magic-build-mode label:has(input:checked) { border-color: var(--magic-gold); background: rgba(89, 65, 20, .28); }
.p-magic .magic-build-mode label:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.p-magic .magic-build-mode span { display: grid; gap: .1rem; }
.p-magic .magic-build-mode small { color: var(--magic-muted); font-size: var(--text-2xs); }
.p-magic .magic-item-card > a { align-self: center; padding: .35rem .45rem; border: 1px solid rgba(147, 197, 255, .25); color: #d9e7ff; text-decoration: none; font-size: var(--text-2xs); }

@media (max-width: 1380px) {
  .p-magic .magic-v3-grid { grid-template-columns: 280px minmax(620px, 1fr); }
  .p-magic .magic-v3-side { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .p-magic .magic-v3 .magic-v3-flow,
.p-magic .magic-v3-grid,
.p-magic .magic-active-lanes { grid-template-columns: 1fr; }
  .p-magic .magic-v3-side { grid-column: auto; grid-template-columns: 1fr; }
  .p-magic .magic-queue-strip ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .p-magic .magic-skill-row,
.p-magic .magic-affinity-grid,
.p-magic .magic-essence-choice,
.p-magic .magic-queue-strip ol { grid-template-columns: 1fr; }
  .p-magic .magic-analysis-odds { grid-template-columns: repeat(3, 1fr); }
  .p-magic .magic-analysis-odds span { grid-column: 1 / -1; }
  .p-magic .magic-medium-line { grid-template-columns: 1fr; }
  .p-magic .magic-build-mode { grid-template-columns: 1fr; }
  .p-magic .magic-known-spells > div:first-child { display: grid; }
}
}

/* SOURCE: 40-screens/sports.css */
/* =========================================================
   SCREEN: Sports arena
   Scope: .p-sports only
   Root: .p-sports
   PHP: game/sports-view.php
   ========================================================= */

@layer screens {
.p-sports .sports-screen {
  --sports-ink: #eef7ff;
  --sports-muted: #91a7b8;
  --sports-line: rgba(188, 225, 244, 0.2);
  --sports-blue: #58d7ff;
  --sports-red: #ff6d68;
  --sports-gold: #f6cf72;
  --sports-green: #73e0aa;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--space-3-5);
  min-height: calc(100vh - 92px);
  padding: 16px;
  overflow: hidden;
  color: var(--sports-ink);
  background:
    radial-gradient(circle at 50% 12%, rgba(78, 158, 193, 0.2), transparent 30%),
    linear-gradient(145deg, #07131b 0%, #0b1820 46%, #080f15 100%);
}

.p-sports .sports-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 42px 42px;
}

.p-sports .sports-screen.is-charisma-holy { --sports-blue: #86e3ff; --sports-gold: #ffe69b; }
.p-sports .sports-screen.is-charisma-demon { --sports-blue: #d55aff; --sports-red: #ff4f65; --sports-gold: #ff9e76; }

.p-sports .sports-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 15px 19px;
  border: 1px solid var(--sports-line);
  border-radius: var(--radius-lg);
  background: rgba(8, 20, 28, 0.88);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.p-sports .sports-topline h1,
.p-sports .sports-topline p,
.p-sports .sports-topline span,
.p-sports .sports-topline small,
.p-sports .sports-topline strong { margin: 0; }
.p-sports .sports-topline h1 { font: 800 clamp(1.55rem, 2.3vw, 2.4rem)/1 "Rajdhani", "Segoe UI", sans-serif; letter-spacing: 0.02em; }
.p-sports .sports-topline p { max-width: 760px; margin-top: 5px; color: var(--sports-muted); font-size: var(--text-sm-plus); }
.p-sports .sports-kicker { display: block; margin-bottom: 5px; color: var(--sports-blue); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }

.p-sports .sports-command-state { display: flex; flex: 0 0 auto; gap: var(--space-2); }
.p-sports .sports-command-state > span { display: grid; min-width: 92px; padding: 9px 12px; border: 1px solid var(--sports-line); border-radius: var(--radius-md); background: rgba(255,255,255,0.035); }
.p-sports .sports-command-state small { color: var(--sports-muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.p-sports .sports-command-state strong { margin-top: 2px; font-size: 0.95rem; }
.p-sports .sports-command-state .is-charisma strong { color: var(--sports-gold); }

.p-sports .sports-empty { display: grid; place-items: center; min-height: 480px; border: 1px dashed var(--sports-line); border-radius: 20px; background: rgba(8,20,28,0.72); text-align: center; }
.p-sports .sports-empty span { color: var(--sports-blue); font-size: var(--text-xs-plus); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.p-sports .sports-empty h2 { margin: 7px 0 0; }

.p-sports .sports-arena {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) 82px minmax(250px, 0.9fr) minmax(330px, 1.15fr);
  grid-template-areas: "player center opponent log";
  align-items: stretch;
  gap: 13px;
  min-height: 390px;
  padding: 60px 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(112, 206, 239, 0.28);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse at 44% 88%, rgba(84, 211, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(8, 24, 34, 0.48), rgba(3, 12, 18, 0.88)),
    url('/assets/game/sports/arena-background.png') center 58% / cover no-repeat;
  box-shadow: inset 0 -80px 100px rgba(0,0,0,0.35), 0 24px 55px rgba(0,0,0,0.3);
}

.p-sports .sports-arena::before,
.p-sports .sports-arena::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.p-sports .sports-arena::before {
  left: 4%; right: 29%; bottom: 12px; height: 48%;
  border: 2px solid rgba(164, 229, 248, 0.18);
  border-radius: 50%;
  transform: perspective(380px) rotateX(58deg);
  box-shadow: 0 0 36px rgba(82, 203, 255, 0.12), inset 0 0 40px rgba(82, 203, 255, 0.1);
}
.p-sports .sports-arena::after {
  inset: 0 27% 0 0;
  opacity: 0.16;
  background: repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,0.045) 77px 78px);
}
.p-sports .sports-arena-light { position: absolute; left: 34%; top: -180px; width: 220px; height: 500px; transform: rotate(6deg); background: linear-gradient(180deg, rgba(115,226,255,0.2), transparent 74%); filter: blur(18px); pointer-events: none; }
.p-sports .sports-screen.is-charisma-demon .sports-arena-light { background: linear-gradient(180deg, rgba(221,70,255,0.22), transparent 74%); }

.p-sports .sports-round-hud {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 16px;
  right: calc(27% + 16px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3-5);
  padding: 8px 13px;
  border: 1px solid var(--sports-line);
  border-radius: var(--radius-md);
  background: rgba(3, 12, 18, 0.78);
  backdrop-filter: blur(12px);
}
.p-sports .sports-round-hud span { color: var(--sports-blue); font-size: 0.73rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.p-sports .sports-round-hud strong { color: var(--text-inverse); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.p-sports .sports-round-hud small { justify-self: end; color: var(--sports-muted); font-size: 0.63rem; }

.p-sports .sports-team { position: relative; z-index: 2; display: grid; align-content: center; gap: 11px; }
.p-sports .sports-team--player { grid-area: player; }
.p-sports .sports-team--opponent { grid-area: opponent; }
.p-sports .sports-team h2 { margin: 0 0 2px; color: var(--sports-muted); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; }
.p-sports .sports-team--opponent h2 { text-align: right; }

.p-sports .sports-fighter {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-areas: "avatar copy" "avatar hp" "avatar condition";
  align-items: center;
  gap: 3px 10px;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid var(--sports-line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10,28,38,0.92), rgba(6,16,23,0.86));
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform, filter;
}
.p-sports .sports-fighter.is-opponent { grid-template-columns: 1fr 58px; grid-template-areas: "copy avatar" "hp avatar" "condition avatar"; text-align: right; }
.p-sports .sports-fighter.is-down { opacity: 0.45; filter: grayscale(0.8); transform: translateY(5px); }
.p-sports .sports-fighter-avatar { grid-area: avatar; position: relative; display: grid; place-items: center; width: 58px; height: 68px; overflow: hidden; border: 1px solid rgba(103,214,255,0.35); border-radius: 13px; background: radial-gradient(circle at 50% 28%, rgba(92,211,255,0.24), rgba(5,17,24,0.92)); }
.p-sports .sports-fighter.is-opponent .sports-fighter-avatar { border-color: rgba(255,109,104,0.35); background: radial-gradient(circle at 50% 28%, rgba(255,92,93,0.24), rgba(26,10,14,0.92)); }
.p-sports .sports-fighter-avatar > b { font: 800 1.3rem/1 "Rajdhani", sans-serif; }
.p-sports .sports-fighter-avatar .forest-student-avatar { transform: scale(0.68); transform-origin: 50% 52%; }
.p-sports .sports-fighter-avatar .forest-student-avatar,
.p-sports .sports-card-avatar .forest-student-avatar { position: relative; z-index: 3; }
.p-sports .sports-fighter-avatar:not(:has(.forest-student-avatar))::before,
.p-sports .sports-card-avatar:not(:has(.forest-student-avatar))::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2px;
  width: 37px;
  height: 43px;
  border: 1px solid rgba(197,238,255,0.28);
  border-radius: var(--radius-md-plus) 14px 8px 8px;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,0.16) 17% 22%, transparent 23% 77%, rgba(255,255,255,0.12) 78% 83%, transparent 84%),
    linear-gradient(155deg, #327f9f, #15384b 58%, #091d29);
  clip-path: polygon(23% 0, 77% 0, 100% 100%, 0 100%);
  transform: translate3d(-50%,0,0);
  box-shadow: 0 0 20px rgba(88,215,255,0.2);
}
.p-sports .sports-fighter-avatar:not(:has(.forest-student-avatar))::after,
.p-sports .sports-card-avatar:not(:has(.forest-student-avatar))::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 8px;
  width: 24px;
  height: 27px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 46% 46% 50% 50%;
  background: radial-gradient(circle at 62% 34%, #e9c9ae 0 7%, #9b654e 9% 13%, transparent 14%), linear-gradient(150deg, #263b4a 0 28%, #d3a080 29% 100%);
  transform: translate3d(-50%,0,0);
  box-shadow: 0 -5px 0 -1px #182934;
}
.p-sports .sports-fighter-avatar > b,
.p-sports .sports-card-avatar > b { position: relative; z-index: 4; color: rgba(255,255,255,0.92); text-shadow: 0 1px 5px #031017; }
.p-sports .sports-fighter.is-opponent .sports-fighter-avatar:not(:has(.forest-student-avatar))::before,
.p-sports .sports-deployment-team.is-opponent .sports-card-avatar:not(:has(.forest-student-avatar))::before { background: linear-gradient(155deg, #a54c59, #542633 58%, #260f17); box-shadow: 0 0 20px rgba(255,109,104,0.2); }
.p-sports .sports-fighter-avatar.is-seed-1 { filter: hue-rotate(18deg); }
.p-sports .sports-fighter-avatar.is-seed-2 { filter: hue-rotate(80deg); }
.p-sports .sports-fighter-avatar.is-seed-3 { filter: hue-rotate(145deg); }
.p-sports .sports-fighter-avatar.is-seed-4 { filter: hue-rotate(245deg); }
.p-sports .sports-fighter-copy { grid-area: copy; display: grid; min-width: 0; }
.p-sports .sports-fighter-copy strong { overflow: hidden; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.p-sports .sports-fighter-copy small { color: var(--sports-muted); font-size: 0.62rem; }
.p-sports .sports-hp { grid-area: hp; position: relative; display: block; height: 16px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255,255,255,0.065); }
.p-sports .sports-hp > i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #258ec1, var(--sports-blue)); box-shadow: 0 0 13px rgba(88,215,255,0.35); transition: width 350ms ease; }
.p-sports .sports-fighter.is-opponent .sports-hp > i { right: 0; left: auto; background: linear-gradient(90deg, var(--sports-red), #b63245); box-shadow: 0 0 13px rgba(255,109,104,0.35); }
.p-sports .sports-hp > b { position: relative; z-index: 1; display: block; padding: 1px 6px; color: var(--text-inverse); font-size: var(--text-2xs); line-height: 14px; text-align: center; text-shadow: 0 1px 3px #000; }
.p-sports .sports-fighter-condition { grid-area: condition; color: var(--sports-blue); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.p-sports .sports-fighter.is-opponent .sports-fighter-condition { color: #ff9c98; }
.p-sports .sports-impact-fx {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: -4px;
  min-width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-pill);
  color: var(--text-inverse);
  background: rgba(9,20,27,0.94);
  box-shadow: 0 7px 22px rgba(0,0,0,0.42);
  font: 900 0.64rem/1 "Rajdhani", "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  pointer-events: none;
  transform: translate3d(-50%,0,0);
}
.p-sports .sports-impact-fx.is-hit { border-color: rgba(255,109,104,0.72); color: #ffaaa6; }
.p-sports .sports-impact-fx.is-critical,
.p-sports .sports-impact-fx.is-combo { border-color: rgba(246,207,114,0.8); color: #ffe7a5; background: rgba(50,31,10,0.95); }
.p-sports .sports-impact-fx.is-guard { border-color: rgba(88,215,255,0.78); color: #a9edff; }
.p-sports .sports-impact-fx.is-dodge,
.p-sports .sports-impact-fx.is-recover { border-color: rgba(115,224,170,0.72); color: #a8f2cf; }
.p-sports .sports-arena.has-new-round { border-color: rgba(126,230,255,0.54); }

.p-sports .sports-center-mark { grid-area: center; position: relative; z-index: 2; display: grid; place-items: center; }
.p-sports .sports-center-mark::before { content: ""; position: absolute; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; box-shadow: 0 0 28px rgba(88,215,255,0.18), inset 0 0 24px rgba(88,215,255,0.1); }
.p-sports .sports-center-mark span { position: relative; font: 900 1.18rem/1 "Rajdhani", sans-serif; color: var(--sports-gold); }

.p-sports .sports-live-log { grid-area: log; position: relative; z-index: 3; display: grid; grid-template-rows: auto 1fr; min-height: 0; overflow: hidden; border: 1px solid var(--sports-line); border-radius: 16px; background: rgba(3,12,18,0.84); backdrop-filter: blur(12px); }
.p-sports .sports-live-log > header { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--sports-line); }
.p-sports .sports-live-log > header span { color: var(--sports-muted); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.p-sports .sports-live-log > header strong { color: var(--sports-green); font-size: 0.67rem; }
.p-sports .sports-live-log > div { display: flex; flex-direction: column; gap: var(--space-2); max-height: 310px; padding: 10px 12px 14px; overflow: auto; scrollbar-width: thin; }
.p-sports .sports-live-log section { padding: 8px 9px; border-left: 2px solid rgba(88,215,255,0.36); background: rgba(255,255,255,0.025); }
.p-sports .sports-live-log section b { color: var(--sports-blue); font-size: 0.65rem; }
.p-sports .sports-live-log p { margin: 4px 0 0; color: #c9d9e2; font-size: 0.7rem; line-height: 1.35; }

.p-sports .sports-roster { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--sports-line); border-radius: 20px; background: rgba(7,18,25,0.9); }
.p-sports .sports-roster.is-locked { opacity: 0.68; }
.p-sports .sports-roster-head { display: flex; justify-content: space-between; gap: 24px; padding: 13px 16px 10px; border-bottom: 1px solid var(--sports-line); }
.p-sports .sports-roster-head span { color: var(--sports-blue); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.p-sports .sports-roster-head h2 { margin: 2px 0 0; font-size: 1.04rem; }
.p-sports .sports-roster-head p { max-width: 560px; margin: 0; align-self: center; color: var(--sports-muted); font-size: 0.7rem; text-align: right; }
.p-sports .sports-matchmaking-note { display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px; border-bottom: 1px solid var(--sports-line); background: linear-gradient(90deg, rgba(246,207,114,0.09), rgba(88,215,255,0.04)); }
.p-sports .sports-matchmaking-note strong { flex: 0 0 auto; color: var(--sports-gold); font-size: 0.61rem; letter-spacing: 0.08em; text-transform: uppercase; }
.p-sports .sports-matchmaking-note span { color: #c8d8df; font-size: 0.64rem; line-height: 1.3; }
.p-sports .sports-roster-form { display: grid; }
.p-sports .sports-student-grid { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 9px; max-height: 350px; padding: 11px; overflow: auto; }

.p-sports .sports-student-card { position: relative; display: grid; grid-template-columns: 57px 1fr; gap: 9px; min-height: 116px; padding: 9px; overflow: hidden; border: 1px solid rgba(180,220,239,0.17); border-radius: var(--radius-md-plus); background: rgba(255,255,255,0.028); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.p-sports .sports-student-card:hover { border-color: rgba(88,215,255,0.42); transform: translateY(-1px); }
.p-sports .sports-student-card:has(input:checked) { border-color: var(--sports-blue); background: rgba(72,188,231,0.11); box-shadow: inset 0 0 24px rgba(88,215,255,0.06); }
.p-sports .sports-student-card:has(input:focus-visible) { outline: 2px solid var(--sports-blue); outline-offset: 2px; }
.p-sports .sports-student-card.is-locked { cursor: default; opacity: 0.48; filter: grayscale(0.4); }
.p-sports .sports-student-card.is-locked:hover { transform: none; border-color: rgba(180,220,239,0.17); }
.p-sports .sports-student-card > input { position: absolute; opacity: 0; pointer-events: none; }
.p-sports .sports-card-check { position: absolute; top: 8px; right: 8px; width: 15px; height: 15px; border: 1px solid var(--sports-line); border-radius: 50%; background: #07141b; }
.p-sports .sports-student-card:has(input:checked) .sports-card-check { border: 4px solid #07141b; background: var(--sports-blue); box-shadow: 0 0 0 1px var(--sports-blue); }
.p-sports .sports-card-avatar { position: relative; display: grid; place-items: center; width: 57px; height: 76px; overflow: hidden; border-radius: var(--radius-md); background: radial-gradient(circle at 50% 26%, rgba(87,207,248,0.2), rgba(4,14,20,0.9)); }
.p-sports .sports-card-avatar .forest-student-avatar { transform: scale(0.7); transform-origin: 50% 54%; }
.p-sports .sports-card-avatar > b { font: 800 1.25rem/1 "Rajdhani", sans-serif; }
.p-sports .sports-card-main { display: grid; align-content: start; min-width: 0; }
.p-sports .sports-card-title { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-right: 15px; }
.p-sports .sports-card-title strong { overflow: hidden; font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; }
.p-sports .sports-card-title b { color: var(--sports-gold); font-size: 0.64rem; white-space: nowrap; }
.p-sports .sports-card-main > small { min-height: 26px; margin-top: 2px; color: var(--sports-muted); font-size: 0.59rem; line-height: 1.25; }
.p-sports .sports-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 4px; }
.p-sports .sports-card-tags em { padding: 2px 5px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.055); color: #bfd0db; font-size: 0.51rem; font-style: normal; }
.p-sports .sports-card-tags .is-loyal { color: var(--sports-gold); }
.p-sports .sports-card-tags .is-suppressed { color: var(--sports-red); }
.p-sports .sports-card-tags .is-respect { color: var(--sports-blue); }
.p-sports .sports-card-abilities { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 6px; }
.p-sports .sports-card-abilities i { padding: 3px 5px; border: 1px solid rgba(88,215,255,0.16); border-radius: 5px; color: #d4e5ee; font-size: 0.52rem; font-style: normal; }
.p-sports .sports-card-abilities .is-hidden { border-style: dashed; color: var(--sports-muted); }
.p-sports .sports-level-track { grid-column: 1 / -1; height: 4px; margin-top: 7px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255,255,255,0.07); }
.p-sports .sports-level-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #358fb4, var(--sports-blue)); }

.p-sports .sports-roster-submit { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); padding: 9px 12px 11px; border-bottom: 1px solid var(--sports-line); background: rgba(0,0,0,0.13); }
.p-sports .sports-combo-preview { min-width: 270px; margin-right: auto; padding-left: 10px; border-left: 2px solid rgba(246,207,114,0.45); text-align: left; }
.p-sports .sports-combo-preview > span { color: var(--sports-gold); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; }
.p-sports .sports-combo-preview > strong { color: #f4f7f8; font-size: var(--text-xs-plus); }
.p-sports .sports-combo-preview > small { max-width: 440px; }
.p-sports .sports-roster-submit > div { display: grid; text-align: right; }
.p-sports .sports-roster-submit span { color: var(--sports-blue); font-size: 0.76rem; font-weight: 900; }
.p-sports .sports-roster-submit small { color: var(--sports-muted); font-size: var(--text-2xs); }
.p-sports .sports-roster-submit button { min-width: 160px; padding: 9px 16px; border: 1px solid rgba(88,215,255,0.48); border-radius: var(--radius-sm-plus); color: #041018; background: linear-gradient(135deg, #7ee6ff, #46bfe9); font-weight: 900; cursor: pointer; }
.p-sports .sports-roster-submit button:disabled { border-color: var(--sports-line); color: #6f818b; background: #16242b; cursor: default; }

.p-sports .sports-deployment { position: relative; overflow: hidden; border: 1px solid rgba(111,218,255,0.26); border-radius: var(--radius-card); background: radial-gradient(circle at 50% 20%, rgba(54,159,200,0.12), transparent 45%), linear-gradient(145deg, rgba(8,24,33,0.97), rgba(5,14,20,0.95)); box-shadow: 0 22px 52px rgba(0,0,0,0.28); }
.p-sports .sports-deployment::before { content: ""; position: absolute; inset: 74px 8% auto; height: 210px; border: 2px solid rgba(126,226,255,0.12); border-radius: 50%; transform: perspective(430px) rotateX(62deg); pointer-events: none; }
.p-sports .sports-deployment-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--sports-line); background: rgba(3,12,18,0.52); }
.p-sports .sports-deployment-head div { display: grid; }
.p-sports .sports-deployment-head span { color: var(--sports-gold); font-size: 0.59rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.p-sports .sports-deployment-head h2 { margin: 2px 0 0; font-size: 1.15rem; }
.p-sports .sports-deployment-head > strong { color: var(--sports-blue); font: 900 1.65rem/1 "Rajdhani", sans-serif; }
.p-sports .sports-deployment-head > strong small { color: var(--sports-muted); font-size: 0.65rem; }
.p-sports .sports-deployment-ring { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px,1fr) 150px minmax(260px,1fr); gap: 20px; padding: 20px 24px 16px; }
.p-sports .sports-deployment-team { display: grid; align-content: start; gap: 9px; }
.p-sports .sports-deployment-team h3 { margin: 0 0 2px; color: var(--sports-muted); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase; }
.p-sports .sports-deployment-team.is-opponent h3 { text-align: right; }
.p-sports .sports-deployment-team article { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 9px; min-height: 82px; padding: 9px 11px; border: 1px solid rgba(132,211,239,0.17); border-radius: 15px; background: rgba(6,18,25,0.86); }
.p-sports .sports-deployment-team.is-opponent article { grid-template-columns: 1fr 58px; text-align: right; }
.p-sports .sports-deployment-team.is-opponent article .sports-card-avatar { grid-column: 2; grid-row: 1; border: 1px solid rgba(255,109,104,0.24); }
.p-sports .sports-deployment-team.is-opponent article > span:not(.sports-card-avatar) { grid-column: 1; grid-row: 1; }
.p-sports .sports-deployment-team article > span:not(.sports-card-avatar) { display: grid; min-width: 0; }
.p-sports .sports-deployment-team article strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sports .sports-deployment-team article small { color: var(--sports-muted); font-size: 0.6rem; }
.p-sports .sports-deployment-team .sports-card-avatar { height: 66px; }
.p-sports .sports-deployment-skills { grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
.p-sports .sports-deployment-skills i,
.p-sports .sports-duo-techniques i { padding: 3px 6px; border: 1px solid rgba(88,215,255,0.2); border-radius: var(--radius-pill); color: #d6e9f1; font-size: 0.52rem; font-style: normal; }
.p-sports .sports-deployment-skills .is-hidden,
.p-sports .sports-duo-techniques .is-hidden { border-style: dashed; color: var(--sports-muted); }
.p-sports .sports-deployment-center { display: grid; place-content: center; gap: var(--space-2); text-align: center; }
.p-sports .sports-deployment-center > span { color: var(--sports-gold); font: 900 1.25rem/1 "Rajdhani",sans-serif; text-shadow: 0 0 18px rgba(246,207,114,0.32); }
.p-sports .sports-deployment-center form { margin: 0; }
.p-sports .sports-fight-button,
.p-sports .sports-release-button { width: 142px; padding: 9px 10px; border-radius: var(--radius-sm-plus); font-size: var(--text-xs); font-weight: 900; cursor: pointer; }
.p-sports .sports-fight-button { border: 1px solid rgba(88,215,255,0.58); color: #031119; background: linear-gradient(135deg,#8ceaff,#43bee9); box-shadow: 0 8px 22px rgba(55,185,229,0.18); }
.p-sports .sports-release-button { border: 1px solid var(--sports-line); color: var(--sports-muted); background: rgba(6,17,24,0.8); }
.p-sports .sports-fight-button:disabled,
.p-sports .sports-release-button:disabled { opacity: 0.52; cursor: default; }
.p-sports .sports-duo-report { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(250px,0.9fr) minmax(360px,1.4fr); gap: var(--space-3-5) 20px; padding: 13px 18px 16px; border-top: 1px solid var(--sports-line); background: rgba(2,10,15,0.62); }
.p-sports .sports-duo-report-copy { display: grid; align-content: start; gap: 3px; }
.p-sports .sports-duo-report-copy span { color: var(--sports-gold); font-size: var(--text-2xs); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.p-sports .sports-duo-report-copy strong { font-size: var(--text-sm); line-height: 1.3; }
.p-sports .sports-duo-report-copy small { color: var(--sports-muted); font-size: 0.6rem; line-height: 1.3; }
.p-sports .sports-duo-metrics,
.p-sports .sports-preview-metrics { display: grid; grid-template-columns: repeat(3,minmax(110px,1fr)); gap: 6px 10px; }
.p-sports .sports-duo-metrics > span,
.p-sports .sports-preview-metrics > span { display: grid; grid-template-columns: 63px 1fr 24px; align-items: center; gap: 5px; }
.p-sports .sports-duo-metrics small,
.p-sports .sports-preview-metrics small { color: #b8cbd4; font-size: 0.53rem; }
.p-sports .sports-duo-metrics span > i,
.p-sports .sports-preview-metrics span > i { height: 5px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255,255,255,0.075); }
.p-sports .sports-duo-metrics span > i b,
.p-sports .sports-preview-metrics span > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#298db9,var(--sports-blue)); }
.p-sports .sports-duo-metrics span > strong,
.p-sports .sports-preview-metrics span > strong { color: var(--sports-blue); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-align: right; }
.p-sports .sports-duo-techniques { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.p-sports .sports-card-learned { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 5px; }
.p-sports .sports-card-learned i { display: grid; padding: 3px 5px; border-left: 2px solid rgba(246,207,114,0.48); border-radius: 3px; background: rgba(246,207,114,0.045); color: #e9edf0; font-size: 0.51rem; font-style: normal; }
.p-sports .sports-card-learned i small { color: var(--sports-muted); font-size: 0.46rem; }
.p-sports .sports-card-learned .is-hidden { border-left-style: dashed; color: var(--sports-muted); }
.p-sports .sports-preview-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.p-sports .sports-preview-title span { color: var(--sports-gold); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; }
.p-sports .sports-preview-title strong { color: var(--sports-blue); font-size: 0.76rem; }
.p-sports .sports-preview-metrics { margin-top: 6px; }
.p-sports .sports-preview-metrics em { justify-self: start; padding: 3px 6px; border-radius: var(--radius-pill); background: rgba(88,215,255,0.08); color: var(--sports-blue); font-size: 0.52rem; font-style: normal; }
.p-sports .sports-preview-techniques { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 5px; }
.p-sports .sports-preview-techniques i { padding: 2px 5px; border: 1px solid rgba(246,207,114,0.18); border-radius: var(--radius-pill); color: #d7e2e7; font-size: 0.49rem; font-style: normal; }
.p-sports .sports-preview-techniques .is-hidden { border-style: dashed; color: var(--sports-muted); }
.p-sports .sports-combo-preview { width: min(780px,65%); }

@media (max-width: 1250px) {
  .p-sports .sports-arena { grid-template-columns: 1fr 64px 1fr; grid-template-areas: "player center opponent" "log log log"; }
  .p-sports .sports-round-hud { right: 16px; }
  .p-sports .sports-live-log > div { max-height: 180px; }
  .p-sports .sports-student-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
  .p-sports .sports-deployment-ring { grid-template-columns: 1fr 120px 1fr; }
  .p-sports .sports-duo-report { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .p-sports .sports-screen { padding: 9px; }
  .p-sports .sports-topline { align-items: flex-start; flex-direction: column; }
  .p-sports .sports-command-state { width: 100%; }
  .p-sports .sports-command-state > span { flex: 1; min-width: 0; }
  .p-sports .sports-arena { grid-template-columns: 1fr 1fr; grid-template-areas: "player opponent" "log log"; padding-top: 70px; }
  .p-sports .sports-center-mark { display: none; }
  .p-sports .sports-round-hud { grid-template-columns: 1fr auto; }
  .p-sports .sports-round-hud small { grid-column: 1 / -1; justify-self: start; }
  .p-sports .sports-fighter,
.p-sports .sports-fighter.is-opponent { grid-template-columns: 48px 1fr; grid-template-areas: "avatar copy" "hp hp" "condition condition"; text-align: left; }
  .p-sports .sports-fighter-avatar { width: 48px; height: 58px; }
  .p-sports .sports-roster-head { flex-direction: column; gap: 5px; }
  .p-sports .sports-roster-head p { text-align: left; }
  .p-sports .sports-matchmaking-note { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .p-sports .sports-student-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .p-sports .sports-deployment-ring { grid-template-columns: 1fr 1fr; }
  .p-sports .sports-deployment-center { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto auto auto; align-items: center; }
  .p-sports .sports-deployment-team.is-opponent h3 { text-align: left; }
  .p-sports .sports-duo-metrics,
.p-sports .sports-preview-metrics { grid-template-columns: repeat(2,minmax(110px,1fr)); }
  .p-sports .sports-combo-preview { width: 100%; }
  .p-sports .sports-roster-submit { flex-wrap: wrap; }
}

@media (max-width: 540px) {
  .p-sports .sports-command-state { gap: var(--space-1); }
  .p-sports .sports-command-state > span { padding: 7px; }
  .p-sports .sports-arena { grid-template-columns: 1fr; grid-template-areas: "player" "opponent" "log"; }
  .p-sports .sports-team--opponent h2 { text-align: left; }
  .p-sports .sports-student-grid { grid-template-columns: 1fr; max-height: none; }
  .p-sports .sports-roster-submit { align-items: stretch; flex-direction: column; }
  .p-sports .sports-roster-submit > div { text-align: left; }
  .p-sports .sports-roster-submit button { width: 100%; }
  .p-sports .sports-deployment-ring { grid-template-columns: 1fr; }
  .p-sports .sports-deployment-center { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .p-sports .sports-deployment-team.is-opponent article { grid-template-columns: 58px 1fr; text-align: left; }
  .p-sports .sports-deployment-team.is-opponent article .sports-card-avatar { grid-column: 1; }
  .p-sports .sports-deployment-team.is-opponent article > span:not(.sports-card-avatar) { grid-column: 2; }
  .p-sports .sports-duo-report { grid-template-columns: 1fr; }
  .p-sports .sports-duo-metrics,
.p-sports .sports-preview-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .p-sports .sports-fighter,
.p-sports .sports-student-card,
.p-sports .sports-hp > i { transition-duration: 0.01ms; }
  .p-sports .sports-fighter { will-change: auto; }
}


.p-sports .sports-live-screen {
  --sports-live-bg: #061018;
  --sports-live-panel: rgba(8, 23, 32, 0.94);
  --sports-live-panel-soft: rgba(13, 31, 42, 0.82);
  --sports-live-panel-strong: rgba(3, 13, 20, 0.97);
  --sports-live-line: rgba(167, 218, 239, 0.2);
  --sports-live-line-strong: rgba(109, 217, 255, 0.45);
  --sports-live-text: #eef8fc;
  --sports-live-muted: #91a9b7;
  --sports-live-blue: #62dcff;
  --sports-live-blue-dark: #2697c3;
  --sports-live-red: #ff716f;
  --sports-live-gold: #f5cd70;
  --sports-live-green: #78e1ae;
  --sports-live-purple: #bd83ff;
  --sports-live-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
  min-height: calc(100dvh - 92px);
  padding: 14px;
  overflow-x: hidden;
  color: var(--sports-live-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 163, 204, 0.2), transparent 31%),
    radial-gradient(circle at 100% 78%, rgba(189, 131, 255, 0.08), transparent 28%),
    linear-gradient(145deg, #07141c, var(--sports-live-bg) 58%, #040a10);
}

.p-sports .sports-live-screen,
.p-sports .sports-live-screen *,
.p-sports .sports-live-screen *::before,
.p-sports .sports-live-screen *::after {
  box-sizing: border-box;
}

.p-sports .sports-live-screen button,
.p-sports .sports-live-screen input,
.p-sports .sports-live-screen select {
  font: inherit;
}

.p-sports .sports-live-screen button {
  min-height: 44px;
}

.p-sports .sports-live-screen button:focus-visible,
.p-sports .sports-live-screen input:focus-visible,
.p-sports .sports-live-screen select:focus-visible,
.p-sports .sports-live-screen [tabindex]:focus-visible {
  outline: 2px solid var(--sports-live-blue);
  outline-offset: 3px;
}

.p-sports .sports-live-topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3-5);
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-lg);
  background: rgba(7, 20, 28, 0.92);
  box-shadow: 0 15px 36px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.p-sports .sports-live-brand {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-kicker {
  color: var(--sports-live-blue);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.p-sports .sports-live-brand h1,
.p-sports .sports-live-brand h2 {
  margin: 2px 0 0;
  overflow: hidden;
  font: 800 clamp(1.4rem, 2vw, 2.1rem)/1 "Rajdhani", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-brand p {
  margin: 4px 0 0;
  color: var(--sports-live-muted);
  font-size: var(--text-xs-plus);
}

.p-sports .sports-live-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: var(--space-1);
  padding: 4px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-md-plus);
  background: rgba(0, 0, 0, 0.2);
}

.p-sports .sports-live-mode-button {
  min-width: 78px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm-plus);
  color: var(--sports-live-muted);
  background: transparent;
  font-size: var(--text-xs-plus);
  font-weight: 900;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.p-sports .sports-live-mode-button:hover {
  color: var(--sports-live-text);
  background: rgba(255, 255, 255, 0.05);
}

.p-sports .sports-live-mode-button.is-active,
.p-sports .sports-live-mode-button[aria-selected="true"] {
  border-color: rgba(98, 220, 255, 0.45);
  color: #03131b;
  background: linear-gradient(135deg, #92eaff, #58c8ef);
}

.p-sports .sports-live-status-cluster {
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.p-sports .sports-live-connection,
.p-sports .sports-live-tick-mini,
.p-sports .sports-live-points {
  display: grid;
  align-content: center;
  min-width: 102px;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
}

.p-sports .sports-live-connection small,
.p-sports .sports-live-tick-mini small,
.p-sports .sports-live-points small {
  color: var(--sports-live-muted);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p-sports .sports-live-connection strong,
.p-sports .sports-live-tick-mini strong,
.p-sports .sports-live-points strong {
  margin-top: 2px;
  color: var(--sports-live-text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.p-sports .sports-live-connection strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--sports-live-green);
  box-shadow: 0 0 10px rgba(120, 225, 174, 0.6);
}

.p-sports .sports-live-connection.is-slow strong {
  color: var(--sports-live-gold);
}

.p-sports .sports-live-connection.is-slow strong::before {
  background: var(--sports-live-gold);
  box-shadow: 0 0 10px rgba(245, 205, 112, 0.55);
}

.p-sports .sports-live-connection.is-offline strong,
.p-sports .sports-live-connection.is-unstable strong {
  color: var(--sports-live-red);
}

.p-sports .sports-live-connection.is-offline strong::before,
.p-sports .sports-live-connection.is-unstable strong::before {
  background: var(--sports-live-red);
  box-shadow: 0 0 10px rgba(255, 113, 111, 0.55);
}

.p-sports .sports-live-tick-mini strong {
  color: var(--sports-live-blue);
}

.p-sports .sports-live-points strong {
  color: var(--sports-live-gold);
}

.p-sports .sports-live-lobby {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(520px, 1.45fr) minmax(320px, 0.75fr);
  gap: var(--space-3);
  min-width: 0;
  min-height: min(690px, calc(100dvh - 190px));
}

.p-sports .sports-live-lobby-main,
.p-sports .sports-live-invite-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: 20px;
  background: var(--sports-live-panel);
  box-shadow: var(--sports-live-shadow);
}

.p-sports .sports-live-lobby-head,
.p-sports .sports-live-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--sports-live-line);
  background: rgba(0, 0, 0, 0.14);
}

.p-sports .sports-live-lobby-head > div,
.p-sports .sports-live-panel-head > div {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-lobby-head span,
.p-sports .sports-live-panel-head span {
  color: var(--sports-live-blue);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-sports .sports-live-lobby-head h2,
.p-sports .sports-live-panel-head h2 {
  margin: 2px 0 0;
  font-size: 1.08rem;
}

.p-sports .sports-live-lobby-head p,
.p-sports .sports-live-panel-head p {
  margin: 3px 0 0;
  color: var(--sports-live-muted);
  font-size: 0.66rem;
}

.p-sports .sports-live-party-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 1fr));
  gap: var(--space-2-5);
  padding: 14px;
}

.p-sports .sports-live-party-grid[data-team-size="4"] {
  grid-template-columns: repeat(2, minmax(230px, 1fr));
}

.p-sports .sports-live-party-slot {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2-5);
  min-height: 104px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(18, 43, 56, 0.76), rgba(5, 17, 24, 0.88));
}

.p-sports .sports-live-party-slot.is-empty {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.018);
}

.p-sports .sports-live-party-slot.is-self {
  border-color: rgba(98, 220, 255, 0.48);
  box-shadow: inset 0 0 24px rgba(98, 220, 255, 0.06);
}

.p-sports .sports-live-party-slot.is-ready::after {
  content: "BEREIT";
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--sports-live-green);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.p-sports .sports-live-player-avatar,
.p-sports .sports-live-invite-avatar,
.p-sports .sports-live-character-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 66px;
  overflow: hidden;
  border: 1px solid rgba(98, 220, 255, 0.34);
  border-radius: var(--radius-md);
  color: var(--sports-live-text);
  background:
    radial-gradient(circle at 50% 28%, rgba(98, 220, 255, 0.22), transparent 38%),
    linear-gradient(150deg, #183645, #07151e);
  font: 900 1.2rem/1 "Rajdhani", "Segoe UI", sans-serif;
}

.p-sports .sports-live-player-copy {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-player-copy strong {
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-player-copy small {
  margin-top: 2px;
  color: var(--sports-live-muted);
  font-size: var(--text-2xs);
}

.p-sports .sports-live-student-duo {
  display: flex;
  gap: var(--space-1);
  margin-top: 7px;
}

.p-sports .sports-live-student-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: #d9edf5;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.61rem;
  font-weight: 900;
}

.p-sports .sports-live-student-portrait.is-active {
  border-color: var(--sports-live-blue);
  box-shadow: 0 0 12px rgba(98, 220, 255, 0.25);
}

.p-sports .sports-live-slot-action,
.p-sports .sports-live-invite-button,
.p-sports .sports-live-ready-button,
.p-sports .sports-live-search-button,
.p-sports .sports-live-plan-add,
.p-sports .sports-live-result-button {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(98, 220, 255, 0.42);
  border-radius: 11px;
  color: #03131a;
  background: linear-gradient(135deg, #91e9ff, #54c5ec);
  font-size: 0.67rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.p-sports .sports-live-slot-action:hover,
.p-sports .sports-live-invite-button:hover,
.p-sports .sports-live-ready-button:hover,
.p-sports .sports-live-search-button:hover,
.p-sports .sports-live-plan-add:hover,
.p-sports .sports-live-result-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.p-sports .sports-live-slot-action.is-quiet,
.p-sports .sports-live-invite-button.is-quiet,
.p-sports .sports-live-result-button.is-quiet {
  border-color: var(--sports-live-line);
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, 0.035);
}

.p-sports .sports-live-slot-action:disabled,
.p-sports .sports-live-invite-button:disabled,
.p-sports .sports-live-ready-button:disabled,
.p-sports .sports-live-search-button:disabled,
.p-sports .sports-live-plan-add:disabled,
.p-sports .sports-live-result-button:disabled {
  opacity: 0.46;
  cursor: default;
  filter: none;
  transform: none;
}

.p-sports .sports-live-lobby-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--sports-live-line);
  background: rgba(0, 0, 0, 0.12);
}

.p-sports .sports-live-ready-state {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-ready-state strong {
  color: var(--sports-live-gold);
  font-size: var(--text-xs-plus);
}

.p-sports .sports-live-ready-state small {
  margin-top: 2px;
  color: var(--sports-live-muted);
  font-size: var(--text-2xs);
}

.p-sports .sports-live-ready-button {
  min-width: 170px;
}

.p-sports .sports-live-ready-button.is-ready {
  border-color: rgba(120, 225, 174, 0.48);
  background: linear-gradient(135deg, #a4f0ca, #65d49e);
}

.p-sports .sports-live-invite-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.p-sports .sports-live-invite-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--sports-live-line);
}

.p-sports .sports-live-invite-tab {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm-plus);
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.67rem;
  font-weight: 900;
  cursor: pointer;
}

.p-sports .sports-live-invite-tab.is-active,
.p-sports .sports-live-invite-tab[aria-selected="true"] {
  border-color: rgba(98, 220, 255, 0.32);
  color: var(--sports-live-blue);
  background: rgba(98, 220, 255, 0.09);
}

.p-sports .sports-live-invite-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 0 11px 10px;
  border-bottom: 1px solid var(--sports-live-line);
}

.p-sports .sports-live-invite-search input {
  min-width: 0;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm-plus);
  color: var(--sports-live-text);
  background: rgba(0, 0, 0, 0.22);
}

.p-sports .sports-live-invite-search input::placeholder {
  color: #6f8795;
}

.p-sports .sports-live-invite-list {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 220, 255, 0.35) transparent;
}

.p-sports .sports-live-invite-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

.p-sports .sports-live-invite-avatar {
  width: 42px;
  height: 48px;
  border-radius: var(--radius-sm-plus);
  font-size: 0.95rem;
}

.p-sports .sports-live-invite-copy {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-invite-copy strong {
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-invite-copy small {
  margin-top: 2px;
  color: var(--sports-live-muted);
  font-size: 0.55rem;
}

.p-sports .sports-live-matchmaking {
  display: grid;
  place-items: center;
  gap: var(--space-3-5);
  min-height: min(560px, calc(100dvh - 250px));
  padding: 28px;
  border: 1px solid var(--sports-live-line);
  border-radius: 20px;
  background: var(--sports-live-panel);
  text-align: center;
}

.p-sports .sports-live-matchmaking-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 2px solid rgba(98, 220, 255, 0.14);
  border-radius: 50%;
}

.p-sports .sports-live-matchmaking-ring::before,
.p-sports .sports-live-matchmaking-ring::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.p-sports .sports-live-matchmaking-ring::before {
  inset: 8px;
  border: 3px solid transparent;
  border-top-color: var(--sports-live-blue);
  border-right-color: rgba(98, 220, 255, 0.45);
  animation: sports-live-spin 1.2s linear infinite;
}

.p-sports .sports-live-matchmaking-ring::after {
  inset: 24px;
  border: 1px solid rgba(245, 205, 112, 0.42);
  box-shadow: inset 0 0 18px rgba(245, 205, 112, 0.12);
}

.p-sports .sports-live-matchmaking h2 {
  margin: 0;
  font-size: 1.2rem;
}

.p-sports .sports-live-matchmaking p {
  max-width: 420px;
  margin: 0;
  color: var(--sports-live-muted);
  font-size: var(--text-xs-plus);
  line-height: 1.45;
}

.p-sports .sports-live-match-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(560px, 1fr) minmax(320px, 360px);
  grid-template-areas:
    "teams stage plan"
    "events events plan";
  grid-template-rows: minmax(480px, 1fr) auto;
  gap: var(--space-2-5);
  width: 100%;
  max-width: 100%;
  height: calc(100dvh - 190px);
  min-height: 610px;
  overflow: hidden;
}

.p-sports .sports-live-teams {
  grid-area: teams;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  min-height: 0;
}

.p-sports .sports-live-team-rail {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 9px;
  overflow-y: auto;
  border: 1px solid var(--sports-live-line);
  border-radius: 17px;
  background: var(--sports-live-panel);
  scrollbar-width: thin;
}

.p-sports .sports-live-team-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 2px 4px;
}

.p-sports .sports-live-team-title strong {
  color: var(--sports-live-blue);
  font-size: 0.61rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-sports .sports-live-team-rail.is-opponent .sports-live-team-title strong {
  color: #ff9c99;
}

.p-sports .sports-live-team-title small {
  color: var(--sports-live-muted);
  font-size: 0.53rem;
}

.p-sports .sports-live-participant {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "avatar copy"
    "avatar duo"
    "health health";
  align-items: center;
  gap: 3px 8px;
  min-width: 0;
  min-height: 82px;
  padding: 7px 8px;
  border: 1px solid rgba(170, 220, 240, 0.17);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(14, 37, 49, 0.94), rgba(5, 17, 24, 0.9));
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, border-color 180ms ease;
  backface-visibility: hidden;
}

.p-sports .sports-live-participant.is-active {
  border-color: var(--sports-live-blue);
  box-shadow: inset 0 0 20px rgba(98, 220, 255, 0.06), 0 0 14px rgba(98, 220, 255, 0.1);
}

.p-sports .sports-live-participant.is-targeted {
  border-color: var(--sports-live-red);
}

.p-sports .sports-live-participant.is-down {
  opacity: 0.45;
  filter: grayscale(0.8);
  transform: translateY(3px);
}

.p-sports .sports-live-character-avatar {
  grid-area: avatar;
  width: 44px;
  height: 54px;
  border-radius: var(--radius-sm-plus);
  font-size: 0.95rem;
}

.p-sports .sports-live-participant-copy {
  grid-area: copy;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.p-sports .sports-live-participant-copy strong {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-participant-copy small {
  flex: 0 0 auto;
  color: var(--sports-live-muted);
  font-size: 0.5rem;
}

.p-sports .sports-live-participant .sports-live-student-duo {
  grid-area: duo;
  margin-top: 2px;
}

.p-sports .sports-live-participant .sports-live-student-portrait {
  width: 25px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.52rem;
}

.p-sports .sports-live-health {
  grid-area: health;
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.065);
}

.p-sports .sports-live-health > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--sports-live-health, 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sports-live-blue-dark), var(--sports-live-blue));
  box-shadow: 0 0 10px rgba(98, 220, 255, 0.3);
  transition: width 300ms ease;
}

.p-sports .sports-live-team-rail.is-opponent .sports-live-health > i {
  background: linear-gradient(90deg, #b93b4c, var(--sports-live-red));
  box-shadow: 0 0 10px rgba(255, 113, 111, 0.28);
}

.p-sports .sports-live-health > b {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 5px;
  color: var(--text-inverse);
  font-size: 0.48rem;
  line-height: 12px;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}

.p-sports .sports-live-stage {
  grid-area: stage;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(112, 211, 244, 0.3);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 86%, rgba(90, 220, 255, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(5, 19, 28, 0.38), rgba(2, 10, 16, 0.86)),
    url("/assets/game/sports/arena-background.png") center 58% / cover no-repeat;
  box-shadow: inset 0 -90px 110px rgba(0, 0, 0, 0.38), var(--sports-live-shadow);
}

.p-sports .sports-live-stage::before {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 5%;
  left: 6%;
  height: 43%;
  border: 2px solid rgba(155, 231, 255, 0.17);
  border-radius: 50%;
  transform: perspective(480px) rotateX(62deg);
  box-shadow: 0 0 36px rgba(98, 220, 255, 0.12), inset 0 0 34px rgba(98, 220, 255, 0.09);
  pointer-events: none;
}

.p-sports .sports-live-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background: repeating-linear-gradient(90deg, transparent 0 82px, rgba(255, 255, 255, 0.045) 83px 84px);
  pointer-events: none;
}

.p-sports .sports-live-tick-hud {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 10px;
  padding: 7px 10px;
  border: 1px solid var(--sports-live-line);
  border-radius: 13px;
  background: rgba(2, 12, 18, 0.84);
  backdrop-filter: blur(12px);
}

.p-sports .sports-live-tick-copy {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-tick-copy strong {
  color: var(--sports-live-blue);
  font-size: 0.67rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.p-sports .sports-live-tick-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--sports-live-muted);
  font-size: 0.51rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-tick-ring {
  --sports-live-tick-progress: 100%;
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: conic-gradient(var(--sports-live-blue) var(--sports-live-tick-progress), rgba(255, 255, 255, 0.09) 0);
  box-shadow: 0 0 18px rgba(98, 220, 255, 0.16);
}

.p-sports .sports-live-tick-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #06131b;
}

.p-sports .sports-live-tick-ring strong {
  position: relative;
  color: var(--text-inverse);
  font: 900 1rem/1 "Rajdhani", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.p-sports .sports-live-tick-server {
  display: grid;
  justify-items: end;
  min-width: 0;
}

.p-sports .sports-live-tick-server strong {
  color: var(--sports-live-green);
  font-size: 0.61rem;
}

.p-sports .sports-live-tick-server small {
  margin-top: 2px;
  color: var(--sports-live-muted);
  font-size: 0.5rem;
}

.p-sports .sports-live-stage-field {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  min-width: 0;
  min-height: 0;
  padding: 12px 7% 38px;
}

.p-sports .sports-live-stage-side {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 1.3vw, 16px);
  min-width: 0;
}

.p-sports .sports-live-stage-side.is-opponent {
  flex-direction: row-reverse;
}

.p-sports .sports-live-stage-figure {
  position: relative;
  display: grid;
  place-items: end center;
  width: clamp(54px, 5.8vw, 94px);
  height: clamp(108px, 16vh, 170px);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, filter;
}

.p-sports .sports-live-stage-figure::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 82%;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  filter: blur(4px);
}

.p-sports .sports-live-stage-figure img,
.p-sports .sports-live-stage-figure > span {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.p-sports .sports-live-stage-figure.is-active {
  filter: drop-shadow(0 0 15px rgba(98, 220, 255, 0.5));
}

.p-sports .sports-live-stage-side.is-opponent .sports-live-stage-figure.is-active {
  filter: drop-shadow(0 0 15px rgba(255, 113, 111, 0.45));
}

.p-sports .sports-live-impact {
  position: absolute;
  z-index: 15;
  top: 10%;
  left: 50%;
  min-width: 54px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 113, 111, 0.72);
  border-radius: var(--radius-pill);
  color: #ffaaa7;
  background: rgba(35, 8, 12, 0.94);
  font-size: 0.61rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.p-sports .sports-live-impact.is-guard {
  border-color: rgba(98, 220, 255, 0.72);
  color: #b3efff;
  background: rgba(5, 29, 39, 0.94);
}

.p-sports .sports-live-impact.is-combo,
.p-sports .sports-live-impact.is-critical {
  border-color: rgba(245, 205, 112, 0.8);
  color: #ffe8a9;
  background: rgba(42, 28, 7, 0.95);
}

.p-sports .sports-live-event-strip {
  grid-area: events;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  min-height: 86px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: 16px;
  background: var(--sports-live-panel);
}

.p-sports .sports-live-event-label {
  display: grid;
  place-content: center;
  width: 80px;
  border-right: 1px solid var(--sports-live-line);
  color: var(--sports-live-gold);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.p-sports .sports-live-event-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.p-sports .sports-live-event {
  min-width: 0;
  padding: 8px 9px;
  border-left: 2px solid rgba(98, 220, 255, 0.4);
  border-radius: 4px 9px 9px 4px;
  background: rgba(255, 255, 255, 0.03);
}

.p-sports .sports-live-event.is-opponent {
  border-left-color: rgba(255, 113, 111, 0.48);
}

.p-sports .sports-live-event strong {
  display: block;
  overflow: hidden;
  color: var(--sports-live-blue);
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-event.is-opponent strong {
  color: #ffaaa7;
}

.p-sports .sports-live-event p {
  display: -webkit-box;
  margin: 3px 0 0;
  overflow: hidden;
  color: #c5d8e0;
  font-size: 0.57rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.p-sports .sports-live-plan-panel {
  grid-area: plan;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-lg);
  background: var(--sports-live-panel-strong);
  box-shadow: var(--sports-live-shadow);
}

.p-sports .sports-live-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--sports-live-line);
}

.p-sports .sports-live-plan-head > div {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-plan-head span {
  color: var(--sports-live-gold);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-sports .sports-live-plan-head h2 {
  margin: 2px 0 0;
  font-size: var(--text-md);
}

.p-sports .sports-live-plan-count {
  color: var(--sports-live-blue);
  font: 900 1rem/1 "Rajdhani", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.p-sports .sports-live-command-builder {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--sports-live-line);
  background: rgba(255, 255, 255, 0.018);
}

.p-sports .sports-live-command-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.p-sports .sports-live-command-field {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-command-field label {
  margin-bottom: 3px;
  color: var(--sports-live-muted);
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.p-sports .sports-live-command-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 26px 7px 8px;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: 9px;
  color: var(--sports-live-text);
  background: #0b1e28;
  font-size: 0.59rem;
  text-overflow: ellipsis;
}

.p-sports .sports-live-plan-add {
  width: 100%;
}

.p-sports .sports-live-plan-list {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 220, 255, 0.35) transparent;
}

.p-sports .sports-live-plan-empty {
  display: grid;
  place-items: center;
  min-height: 126px;
  padding: 18px;
  border: 1px dashed var(--sports-live-line);
  border-radius: var(--radius-md);
  color: var(--sports-live-muted);
  font-size: 0.62rem;
  line-height: 1.45;
  text-align: center;
}

.p-sports .sports-live-plan-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 51px;
  padding: 5px 6px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm-plus);
  background: rgba(255, 255, 255, 0.025);
}

.p-sports .sports-live-plan-item.is-next {
  border-color: rgba(98, 220, 255, 0.48);
  background: rgba(98, 220, 255, 0.075);
}

.p-sports .sports-live-plan-item.is-pending {
  border-style: dashed;
}

.p-sports .sports-live-plan-item.is-rejected {
  border-color: rgba(255, 113, 111, 0.46);
}

.p-sports .sports-live-plan-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--sports-live-blue);
  background: rgba(98, 220, 255, 0.09);
  font-size: 0.63rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.p-sports .sports-live-plan-copy {
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-plan-copy strong {
  overflow: hidden;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-plan-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--sports-live-muted);
  font-size: 0.49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-plan-item.is-pending .sports-live-plan-copy small {
  color: var(--sports-live-gold);
}

.p-sports .sports-live-plan-item.is-rejected .sports-live-plan-copy small {
  color: var(--sports-live-red);
}

.p-sports .sports-live-plan-actions {
  display: flex;
  gap: 3px;
}

.p-sports .sports-live-plan-action {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sports-live-line);
  border-radius: 9px;
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.69rem;
  font-weight: 900;
  cursor: pointer;
}

.p-sports .sports-live-plan-action:hover {
  border-color: var(--sports-live-line-strong);
  color: var(--sports-live-text);
}

.p-sports .sports-live-plan-action.is-remove:hover {
  border-color: rgba(255, 113, 111, 0.52);
  color: var(--sports-live-red);
}

.p-sports .sports-live-plan-status {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border-top: 1px solid var(--sports-live-line);
  background: rgba(0, 0, 0, 0.15);
}

.p-sports .sports-live-plan-status strong {
  color: var(--sports-live-green);
  font-size: var(--text-2xs);
}

.p-sports .sports-live-plan-status small {
  color: var(--sports-live-muted);
  font-size: 0.51rem;
  line-height: 1.3;
}

.p-sports .sports-live-plan-status.is-pending strong {
  color: var(--sports-live-gold);
}

.p-sports .sports-live-plan-status.is-error strong {
  color: var(--sports-live-red);
}

.p-sports .sports-live-result {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(245, 205, 112, 0.42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 50%, rgba(245, 205, 112, 0.17), transparent 29%),
    linear-gradient(135deg, rgba(18, 35, 43, 0.98), rgba(5, 15, 21, 0.98));
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.4);
}

.p-sports .sports-live-result::after {
  content: "";
  position: absolute;
  top: -70px;
  right: 18%;
  width: 170px;
  height: 230px;
  transform: rotate(12deg);
  background: linear-gradient(180deg, rgba(245, 205, 112, 0.18), transparent);
  filter: blur(14px);
  pointer-events: none;
}

.p-sports .sports-live-result-copy {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
}

.p-sports .sports-live-result-copy span {
  color: var(--sports-live-gold);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-sports .sports-live-result-copy h2 {
  margin: 3px 0 0;
  font: 900 clamp(1.5rem, 2.8vw, 2.5rem)/1 "Rajdhani", "Segoe UI", sans-serif;
}

.p-sports .sports-live-result-copy p {
  margin: 6px 0 0;
  color: var(--sports-live-muted);
  font-size: 0.7rem;
}

.p-sports .sports-live-result-points {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 10px;
  color: var(--sports-live-gold);
}

.p-sports .sports-live-result-points strong {
  font: 900 1.55rem/1 "Rajdhani", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.p-sports .sports-live-result-points small {
  font-size: 0.59rem;
  font-weight: 800;
  text-transform: uppercase;
}

.p-sports .sports-live-result-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 7px;
}

.p-sports .sports-live-toast-stack {
  position: fixed;
  z-index: 80;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 7px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.p-sports .sports-live-toast {
  padding: 10px 12px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-md);
  color: var(--sports-live-text);
  background: rgba(5, 18, 25, 0.96);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
  font-size: 0.63rem;
  line-height: 1.35;
  pointer-events: auto;
}

.p-sports .sports-live-toast.is-success {
  border-color: rgba(120, 225, 174, 0.45);
}

.p-sports .sports-live-toast.is-warning {
  border-color: rgba(245, 205, 112, 0.5);
}

.p-sports .sports-live-toast.is-error {
  border-color: rgba(255, 113, 111, 0.5);
}

.p-sports .sports-live-only-mobile {
  display: none;
}

@keyframes sports-live-spin {
  to { transform: rotate(1turn); }
}

@keyframes sports-live-pulse {
  0%, 100% { opacity: 0.58; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 1320px) {
  .p-sports .sports-live-match-shell {
    grid-template-columns: minmax(200px, 235px) minmax(480px, 1fr) minmax(300px, 330px);
  }

  .p-sports .sports-live-stage-field {
    padding-right: 4%;
    padding-left: 4%;
  }

  .p-sports .sports-live-stage-figure {
    width: clamp(48px, 5.2vw, 76px);
  }

  .p-sports .sports-live-plan-item {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 5px;
  }

  .p-sports .sports-live-plan-action {
    width: 40px;
    min-width: 40px;
  }
}

@media (max-width: 1080px) {
  .p-sports .sports-live-topbar {
    grid-template-columns: minmax(210px, 1fr) auto;
  }

  .p-sports .sports-live-status-cluster {
    grid-column: 1 / -1;
  }

  .p-sports .sports-live-connection,
.p-sports .sports-live-tick-mini,
.p-sports .sports-live-points {
    flex: 1;
  }

  .p-sports .sports-live-lobby {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.7fr);
  }

  .p-sports .sports-live-match-shell {
    grid-template-columns: minmax(200px, 225px) minmax(460px, 1fr);
    grid-template-areas:
      "teams stage"
      "events events";
    grid-template-rows: minmax(500px, 1fr) auto;
    height: auto;
    min-height: calc(100dvh - 190px);
    overflow: visible;
  }

  .p-sports .sports-live-plan-panel {
    position: fixed;
    z-index: 70;
    top: auto;
    right: 12px;
    bottom: 12px;
    width: min(390px, calc(100vw - 24px));
    max-height: min(720px, calc(100dvh - 24px));
    transform: translate3d(calc(100% + 24px), 0, 0);
    transition: transform 220ms ease;
  }

  .p-sports .sports-live-plan-panel.is-open {
    transform: translate3d(0, 0, 0);
  }

  .p-sports .sports-live-only-mobile {
    display: inline-grid;
  }
}

@media (max-width: 820px) {
  .p-sports .sports-live-screen {
    display: block;
    min-height: 100dvh;
    padding: 8px;
    overflow-x: hidden;
  }

  .p-sports .sports-live-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: 8px;
    border-radius: var(--radius-md-plus);
  }

  .p-sports .sports-live-brand p,
.p-sports .sports-live-kicker {
    display: none;
  }

  .p-sports .sports-live-brand h1,
.p-sports .sports-live-brand h2 {
    font-size: 1.18rem;
  }

  .p-sports .sports-live-mode-switch {
    grid-row: 1;
    grid-column: 2;
  }

  .p-sports .sports-live-mode-button {
    min-width: 60px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .p-sports .sports-live-status-cluster {
    grid-column: 1 / -1;
    gap: var(--space-1);
  }

  .p-sports .sports-live-connection,
.p-sports .sports-live-tick-mini,
.p-sports .sports-live-points {
    min-width: 0;
    min-height: 44px;
    padding: 5px 7px;
  }

  .p-sports .sports-live-connection small,
.p-sports .sports-live-tick-mini small,
.p-sports .sports-live-points small {
    font-size: 0.45rem;
  }

  .p-sports .sports-live-connection strong,
.p-sports .sports-live-tick-mini strong,
.p-sports .sports-live-points strong {
    font-size: 0.66rem;
  }

  .p-sports .sports-live-lobby {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    min-height: 0;
    margin-top: 8px;
  }

  .p-sports .sports-live-lobby-main,
.p-sports .sports-live-invite-panel {
    border-radius: 15px;
  }

  .p-sports .sports-live-party-grid,
.p-sports .sports-live-party-grid[data-team-size="4"] {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .p-sports .sports-live-party-slot {
    min-height: 92px;
  }

  .p-sports .sports-live-lobby-footer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    padding: 9px;
  }

  .p-sports .sports-live-invite-panel {
    max-height: 520px;
  }

  .p-sports .sports-live-invite-list {
    max-height: 350px;
  }

  .p-sports .sports-live-matchmaking {
    min-height: calc(100dvh - 170px);
    margin-top: 8px;
    border-radius: 15px;
  }

  .p-sports .sports-live-match-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "teams"
      "events";
    grid-template-rows: minmax(430px, 56dvh) auto auto;
    gap: var(--space-2);
    width: 100%;
    min-height: 0;
    margin-top: 8px;
    overflow: visible;
  }

  .p-sports .sports-live-stage {
    border-radius: 15px;
  }

  .p-sports .sports-live-tick-hud {
    position: sticky;
    top: 103px;
    margin: 7px;
    padding: 5px 7px;
  }

  .p-sports .sports-live-tick-ring {
    width: 48px;
    height: 48px;
  }

  .p-sports .sports-live-stage-field {
    padding: 8px 3% 28px;
  }

  .p-sports .sports-live-stage-side {
    gap: var(--space-1);
  }

  .p-sports .sports-live-stage-figure {
    width: clamp(42px, 12vw, 66px);
    height: clamp(94px, 17vh, 132px);
  }

  .p-sports .sports-live-teams {
    grid-template-rows: auto auto;
  }

  .p-sports .sports-live-team-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    border-radius: var(--radius-md-plus);
  }

  .p-sports .sports-live-team-title {
    grid-column: 1 / -1;
  }

  .p-sports .sports-live-team-rail[data-team-size="4"] .sports-live-participant {
    min-height: 78px;
  }

  .p-sports .sports-live-event-strip {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: var(--radius-md-plus);
  }

  .p-sports .sports-live-event-label {
    width: auto;
    min-height: 28px;
    border-right: 0;
    border-bottom: 1px solid var(--sports-live-line);
  }

  .p-sports .sports-live-event-list {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-event:nth-child(n+3) {
    display: none;
  }

  .p-sports .sports-live-plan-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 70dvh;
    border-radius: var(--radius-lg) 18px 0 0;
    transform: translate3d(0, 105%, 0);
  }

  .p-sports .sports-live-plan-panel.is-open {
    transform: translate3d(0, 0, 0);
  }

  .p-sports .sports-live-command-row {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-plan-actions {
    gap: var(--space-1);
  }

  .p-sports .sports-live-plan-action {
    width: 44px;
    min-width: 44px;
  }

  .p-sports .sports-live-result {
    grid-template-columns: 1fr;
    margin-top: 8px;
    padding: 16px;
    border-radius: 15px;
  }

  .p-sports .sports-live-result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .p-sports .sports-live-result-button {
    width: 100%;
  }
}

@media (max-width: 540px) {
  .p-sports .sports-live-topbar {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-mode-switch {
    grid-row: auto;
    grid-column: 1;
    width: 100%;
  }

  .p-sports .sports-live-mode-button {
    width: 100%;
  }

  .p-sports .sports-live-party-slot {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .p-sports .sports-live-player-avatar {
    width: 46px;
    height: 58px;
  }

  .p-sports .sports-live-party-slot > .sports-live-slot-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .p-sports .sports-live-invite-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .p-sports .sports-live-invite-card > .sports-live-invite-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .p-sports .sports-live-lobby-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .p-sports .sports-live-ready-button {
    width: 100%;
  }

  .p-sports .sports-live-match-shell {
    grid-template-rows: minmax(390px, 54dvh) auto auto;
  }

  .p-sports .sports-live-tick-hud {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .p-sports .sports-live-tick-server {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-items: start;
  }

  .p-sports .sports-live-team-rail {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-team-title {
    grid-column: 1;
  }

  .p-sports .sports-live-participant {
    min-height: 82px;
  }

  .p-sports .sports-live-stage-figure {
    width: clamp(38px, 11.5vw, 54px);
  }

  .p-sports .sports-live-plan-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .p-sports .sports-live-plan-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .p-sports .sports-live-plan-action {
    flex: 1;
  }

  .p-sports .sports-live-result-actions {
    grid-template-columns: 1fr;
  }
}

/* Arena 2.0: Modus zuerst, kompakte Teams und ruhige Live-Aktualisierung. */
.p-sports .sports-live-topbar {
  grid-template-columns: minmax(180px, 1fr) auto;
}

.p-sports .sports-live-rules-button {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(245, 205, 112, .55);
  border-radius: var(--radius-md);
  color: var(--sports-live-gold);
  background: rgba(245, 205, 112, .08);
  font: 900 1rem/1 "Rajdhani", "Segoe UI", sans-serif;
  cursor: pointer;
}

.p-sports .sports-live-rules-button:hover,
.p-sports .sports-live-rules-button:focus-visible {
  color: #111a23;
  background: var(--sports-live-gold);
}

.p-sports .sports-live-mode-flow {
  display: grid;
  gap: var(--space-2-5);
  padding: 12px;
}

.p-sports .sports-live-mode-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.p-sports .sports-live-step-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--sports-live-line-strong);
  border-radius: 50%;
  color: var(--sports-live-blue);
  font-size: var(--text-xs);
  font-weight: 900;
}

.p-sports .sports-live-mode-flow .sports-live-mode-switch {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}

.p-sports .sports-live-mode-flow .sports-live-mode-button,
.p-sports .sports-live-competition-button {
  min-width: 0;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--sports-live-line);
  border-radius: 13px;
  color: var(--sports-live-text);
  background: rgba(255, 255, 255, .035);
  text-align: left;
  cursor: pointer;
}

.p-sports .sports-live-mode-flow .sports-live-mode-button:hover,
.p-sports .sports-live-competition-button:hover {
  border-color: var(--sports-live-line-strong);
  background: rgba(98, 220, 255, .08);
}

.p-sports .sports-live-mode-flow .sports-live-mode-button.is-active,
.p-sports .sports-live-competition-button.is-active {
  border-color: rgba(98, 220, 255, .72);
  color: #07141c;
  background: linear-gradient(135deg, #a5efff, #62d0f1);
  box-shadow: 0 8px 20px rgba(38, 151, 195, .18);
}

.p-sports .sports-live-competition-button.is-ladder {
  border-color: rgba(245, 205, 112, .34);
}

.p-sports .sports-live-competition-button.is-sparring {
  border-color: rgba(120, 225, 174, .32);
}

.p-sports .sports-live-competition-button b,
.p-sports .sports-live-competition-button small {
  display: block;
}

.p-sports .sports-live-competition-button b {
  font-size: .79rem;
}

.p-sports .sports-live-competition-button small {
  margin-top: 3px;
  color: var(--sports-live-muted);
  font-size: .57rem;
}

.p-sports .sports-live-competition-button.is-active small,
.p-sports .sports-live-mode-flow .sports-live-mode-button.is-active small,
.p-sports .sports-live-mode-flow .sports-live-mode-button.is-active b {
  color: #173444;
}

.p-sports .sports-live-competition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.p-sports [data-sports-live-home] {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.p-sports [data-sports-live-home] .sports-live-lobby-main {
  display: grid;
  align-content: start;
}

.p-sports [data-sports-live-home] [data-sports-live-loadout] {
  margin: 0 12px 12px;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .025);
}

.p-sports [data-sports-live-home] [data-sports-live-loadout] .sports-live-panel-head {
  padding: 9px 11px;
}

.p-sports [data-sports-live-home] [data-sports-live-loadout] .sports-live-command-row {
  padding: 10px;
}

.p-sports .sports-live-sync-button {
  width: calc(100% - 20px);
  min-height: 44px;
  margin: 0 10px 10px;
  border: 1px solid rgba(98, 220, 255, .5);
  border-radius: var(--radius-md);
  color: #06141d;
  background: linear-gradient(135deg, #9bedff, #59c8ed);
  font-size: var(--text-xs-plus);
  font-weight: 900;
  cursor: pointer;
}

.p-sports .sports-live-active-pool,
.p-sports .sports-live-live-table {
  margin: 0 10px 10px;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-md);
}

.p-sports .sports-live-active-pool > header,
.p-sports .sports-live-live-table > header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px 9px;
  border-bottom: 1px solid var(--sports-live-line);
  color: var(--sports-live-muted);
  font-size: .62rem;
}

.p-sports .sports-live-active-list,
.p-sports .sports-live-live-table > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 210px;
  margin: 0;
  padding: 7px;
  overflow-y: auto;
  list-style: none;
}

.p-sports .sports-live-active-player {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm-plus);
}

.p-sports .sports-live-active-player .sports-live-invite-avatar {
  width: 34px;
  height: 36px;
}

.p-sports .sports-live-active-actions {
  display: flex;
  gap: 3px;
}

.p-sports .sports-live-table-team {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm);
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}

.p-sports .sports-live-table-team.is-selected {
  border-color: var(--sports-live-blue);
  color: #05151e;
  background: var(--sports-live-blue);
}

.p-sports .sports-live-active-empty {
  grid-column: 1 / -1;
  padding: 8px;
  color: var(--sports-live-muted);
  font-size: .62rem;
  text-align: center;
}

.p-sports .sports-live-live-table-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px 7px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .035);
  font-size: .62rem;
}

.p-sports .sports-live-live-table-row > span,
.p-sports .sports-live-live-table-row > b {
  color: var(--sports-live-gold);
}

.p-sports [data-sports-live-lobby] {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  gap: var(--space-2-5);
}

.p-sports [data-sports-live-lobby] .sports-live-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-2-5);
}

.p-sports [data-sports-live-lobby] .sports-live-party-grid,
.p-sports [data-sports-live-lobby] .sports-live-party-grid[data-team-size="4"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--sports-live-line);
  border-radius: 15px;
  background: rgba(4, 16, 23, .72);
}

.p-sports [data-sports-live-lobby] .sports-live-team-title {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 2px 3px;
  color: var(--sports-live-blue);
  font-size: .73rem;
}

.p-sports [data-sports-live-lobby] .sports-live-party-slot {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 64px;
  padding: 7px;
  border-radius: 11px;
}

.p-sports [data-sports-live-lobby] .sports-live-party-slot .sports-live-player-avatar {
  width: 38px;
  height: 44px;
  border-radius: 9px;
  font-size: .85rem;
}

.p-sports [data-sports-live-lobby] .sports-live-party-slot .sports-live-student-duo {
  display: none;
}

.p-sports [data-sports-live-lobby] .sports-live-participant-copy {
  min-width: 0;
}

.p-sports [data-sports-live-lobby] .sports-live-participant-copy strong,
.p-sports [data-sports-live-lobby] .sports-live-participant-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports [data-sports-live-lobby] .sports-live-participant-copy strong {
  font-size: .7rem;
}

.p-sports [data-sports-live-lobby] .sports-live-participant-copy small {
  color: var(--sports-live-muted);
  font-size: .55rem;
}

.p-sports .sports-live-participant-ready {
  justify-self: end;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, .04);
  font-size: .5rem;
  font-weight: 900;
}

.p-sports .sports-live-party-slot.is-ready {
  border-color: rgba(120, 225, 174, .55);
  box-shadow: inset 0 0 20px rgba(120, 225, 174, .06);
}

.p-sports .sports-live-party-slot.is-ready .sports-live-participant-ready {
  color: #062117;
  background: var(--sports-live-green);
}

.p-sports .sports-live-lobby-clock {
  margin-left: auto;
  color: var(--sports-live-gold);
  font-variant-numeric: tabular-nums;
}

.p-sports [data-sports-live-lobby] .sports-live-invite-list {
  max-height: 250px;
}

.p-sports [data-sports-live-lobby] .sports-live-lobby-footer {
  justify-content: flex-end;
  padding: 9px 11px;
}

.p-sports [data-sports-live-lobby] .sports-live-lobby-footer .sports-live-ready-state {
  margin-right: auto;
}

.p-sports .sports-live-ready-button.is-ready {
  color: #062117;
  background: linear-gradient(135deg, #acf4d1, #65d69f);
  box-shadow: 0 0 0 3px rgba(120, 225, 174, .1);
}

.p-sports .sports-live-search-button.is-enabled {
  border-color: rgba(120, 225, 174, .62);
  background: linear-gradient(135deg, #c2f8de, #78e1ae);
}

.p-sports .sports-live-stage-field {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.p-sports .sports-live-stage-arena {
  position: relative;
  min-height: 0;
}

.p-sports .sports-live-stage-arena .sports-live-stage-figures {
  inset: 28px 18px 20px;
}

.p-sports .sports-live-event-strip {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 6;
  margin: 0 10px 10px;
  overflow: hidden;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-md);
  background: rgba(4, 14, 21, .94);
}

.p-sports .sports-live-event-strip > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 6px 9px;
  cursor: pointer;
  list-style: none;
}

.p-sports .sports-live-event-strip > summary::-webkit-details-marker {
  display: none;
}

.p-sports .sports-live-event-strip > summary::after {
  content: "+";
  color: var(--sports-live-blue);
  font-weight: 900;
}

.p-sports .sports-live-event-strip[open] > summary::after {
  content: "−";
}

.p-sports .sports-live-event-strip > summary > strong {
  overflow: hidden;
  color: var(--sports-live-muted);
  font-size: .59rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-event-strip .sports-live-event-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: 112px;
  padding: 0 8px 8px;
  overflow-y: auto;
}

.p-sports .sports-live-event-strip .sports-live-event {
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  border-left: 2px solid rgba(98, 220, 255, .36);
  color: var(--sports-live-text);
  background: rgba(255, 255, 255, .025);
  font-size: .61rem;
  line-height: 1.3;
}

.p-sports .sports-live-result {
  grid-template-columns: minmax(220px, .8fr) minmax(170px, .4fr) minmax(300px, 1fr);
  align-items: start;
}

.p-sports .sports-live-result-mvp {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid rgba(245, 205, 112, .36);
  border-radius: 13px;
  background: rgba(245, 205, 112, .06);
}

.p-sports .sports-live-result-mvp > span,
.p-sports .sports-live-result-mvp > small {
  color: var(--sports-live-gold);
  font-size: var(--text-2xs);
}

.p-sports .sports-live-result-ranking h4 {
  margin: 0 0 7px;
  font-size: .76rem;
}

.p-sports .sports-live-ranking-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-sports .sports-live-ranking-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  font-size: .63rem;
}

.p-sports .sports-live-ranking-row > span {
  color: var(--sports-live-gold);
  font-weight: 900;
}

.p-sports .sports-live-ranking-row > small {
  grid-column: 1 / -1;
  color: var(--sports-live-muted);
  font-size: .52rem;
}

.p-sports .sports-live-improvement-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.p-sports .sports-live-improvement-link {
  padding: 8px 11px;
  border: 1px solid var(--sports-live-line-strong);
  border-radius: var(--radius-sm-plus);
  color: var(--sports-live-blue);
  font-size: .64rem;
  font-weight: 900;
  text-decoration: none;
}

.p-sports .sports-live-result-actions {
  grid-column: 1 / -1;
}

.p-sports .sports-live-rules-dialog {
  width: min(610px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(245, 205, 112, .48);
  border-radius: var(--radius-lg);
  color: var(--sports-live-text);
  background: linear-gradient(145deg, rgba(12, 29, 39, .99), rgba(4, 13, 19, .99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .58);
}

.p-sports .sports-live-rules-dialog:not([open]) {
  display: none;
}

.p-sports .sports-live-rules-dialog::backdrop {
  background: rgba(1, 7, 11, .72);
  backdrop-filter: blur(5px);
}

.p-sports .sports-live-rules-card {
  display: grid;
  gap: var(--space-3);
  padding: 18px;
}

.p-sports .sports-live-rules-card header > span {
  color: var(--sports-live-gold);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.p-sports .sports-live-rules-card h3 {
  margin: 2px 0 0;
}

.p-sports .sports-live-rules-card > strong {
  color: var(--sports-live-gold);
  font-size: .7rem;
}

.p-sports .sports-live-rules-card ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 22px;
  margin: 0;
  padding-left: 22px;
  color: var(--sports-live-muted);
  font-size: var(--text-xs);
}

.p-sports .sports-live-rules-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

@media (max-width: 1080px) {
  .p-sports .sports-live-competition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-sports [data-sports-live-lobby] .sports-live-teams {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-result {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .p-sports .sports-live-status-cluster {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .p-sports .sports-live-mode-step {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-step-number {
    display: none;
  }

  .p-sports .sports-live-active-list,
.p-sports .sports-live-live-table > ol,
.p-sports [data-sports-live-lobby] .sports-live-party-grid,
.p-sports [data-sports-live-lobby] .sports-live-party-grid[data-team-size="4"],
.p-sports .sports-live-event-strip .sports-live-event-list,
.p-sports .sports-live-rules-card ol {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-result {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-sports .sports-live-screen *,
.p-sports .sports-live-screen *::before,
.p-sports .sports-live-screen *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }

  .p-sports .sports-live-stage-figure,
.p-sports .sports-live-participant {
    will-change: auto;
  }
}
/* Live-Kreis: abschließende Layout-Regeln für die tatsächliche DOM-Struktur. */
.p-sports .sports-live-lobby-head,
.p-sports .sports-live-lobby-main,
.p-sports .sports-live-invite-panel,
.p-sports .sports-live-lobby-footer,
.p-sports .sports-live-teams,
.p-sports .sports-live-lobby > .sports-live-plan-panel {
  grid-column: 1 / -1;
}

.p-sports .sports-live-match-shell {
  display: grid;
  grid-template-areas:
    "tick tick"
    "stage plan";
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  grid-template-rows: auto minmax(0, 1fr);
}

.p-sports .sports-live-tick-hud {
  grid-area: tick;
}

.p-sports .sports-live-stage {
  grid-area: stage;
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(190px, 250px);
  min-width: 0;
}

.p-sports .sports-live-plan-panel {
  grid-area: plan;
}

.p-sports .sports-live-health > i {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(25, 36, 70, .14);
}

.p-sports .sports-live-health > i > b,
.p-sports .sports-live-stage-health > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69e8c1, #7cb9ff);
}

.p-sports .sports-live-health > small {
  display: block;
}

.p-sports .sports-live-stage-field {
  position: relative;
  min-height: 360px;
}

.p-sports .sports-live-stage-figures {
  position: absolute;
  inset: 44px 24px 118px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: var(--space-4) 24px;
}

.p-sports .sports-live-stage-figure {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: var(--radius-lg);
  color: var(--text-inverse);
  background: rgba(20, 31, 63, .82);
  box-shadow: 0 16px 36px rgba(12, 22, 49, .24);
}

.p-sports .sports-live-stage-figure.is-team-b {
  grid-column: 2;
}

.p-sports .sports-live-stage-figure.is-down {
  opacity: .52;
  filter: grayscale(.7);
}

.p-sports .sports-live-stage-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #172545;
  font-weight: 900;
  background: linear-gradient(145deg, #fff7cf, #79d9ff);
}

.p-sports .sports-live-stage-copy {
  min-width: 0;
}

.p-sports .sports-live-stage-copy strong,
.p-sports .sports-live-stage-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-stage-copy small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .76);
  font-size: var(--text-xs-plus);
}

.p-sports .sports-live-stage-health {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16);
}

.p-sports .sports-training-section {
  margin: 22px 0 0;
  border: 1px solid rgba(88, 111, 167, .18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .58);
}

.p-sports .sports-training-section > summary {
  padding: 14px 18px;
  cursor: pointer;
  color: #2b3b62;
  font-weight: 800;
}

.p-sports .sports-training-section__body {
  padding: 0 14px 14px;
}

.p-sports .sports-live-connection.is-unstable {
  border-color: rgba(222, 98, 122, .58);
  color: #8d2941;
}

@media (max-width: 1080px) {
  .p-sports .sports-live-match-shell {
    grid-template-areas:
      "tick"
      "stage"
      "plan";
    grid-template-columns: minmax(0, 1fr);
  }

  .p-sports .sports-live-plan-panel {
    position: relative;
    inset: auto;
    width: auto;
    max-height: none;
    transform: none;
  }

  .p-sports .sports-live-stage {
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(150px, 210px);
  }
}

@media (max-width: 760px) {
  .p-sports .sports-live-stage {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-team-rail {
    display: none;
  }

  .p-sports .sports-live-stage-figures {
    inset-inline: 12px;
    gap: var(--space-2-5);
  }

  .p-sports .sports-live-stage-figure {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 8px;
  }

  .p-sports .sports-live-stage-avatar {
    width: 38px;
    height: 38px;
  }
}

/* Release-Korrekturen: kompakte Arena, stabile 4v4-Seiten und mobile Höhen. */
.p-sports .sports-live-screen {
  min-height: 0;
}

.p-sports .sports-live-lobby {
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
}

.p-sports .sports-live-lobby-head,
.p-sports .sports-live-lobby-footer,
.p-sports .sports-live-teams {
  grid-column: 1 / -1;
}

.p-sports .sports-live-lobby-main,
.p-sports .sports-live-lobby > .sports-live-plan-panel {
  grid-column: 1;
}

.p-sports .sports-live-invite-panel {
  grid-column: 2;
}

.p-sports .sports-live-lobby > .sports-live-plan-panel {
  grid-area: auto;
  max-height: 430px;
}

.p-sports .sports-live-match-shell {
  min-height: 0;
  height: min(730px, calc(100dvh - 220px));
  grid-template-rows: auto minmax(0, 1fr);
}

.p-sports .sports-live-stage-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-height: 0;
}

.p-sports .sports-live-event-strip {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 4;
  grid-area: auto;
}

.p-sports .sports-live-stage-figures {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.p-sports .sports-live-stage-figure {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  place-items: initial;
}

.p-sports .sports-live-stage-figure.is-team-a {
  grid-column: 1;
}

.p-sports .sports-live-stage-figure.is-team-b {
  grid-column: 2;
}

@media (max-width: 1080px) {
  .p-sports .sports-live-lobby {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-sports .sports-live-lobby-main,
.p-sports .sports-live-invite-panel,
.p-sports .sports-live-lobby > .sports-live-plan-panel {
    grid-column: 1;
  }

  .p-sports .sports-live-match-shell {
    height: auto;
    min-height: 0;
    grid-template-rows: auto minmax(420px, 62dvh) auto;
  }
}

@media (max-width: 540px) {
  .p-sports .sports-live-match-shell {
    grid-template-rows: auto minmax(360px, 58dvh) auto;
  }

  .p-sports .sports-live-tick-hud {
    position: relative;
    top: auto;
    margin: 0;
  }

  .p-sports .sports-live-stage-figures {
    inset: 38px 10px 110px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 9px;
  }

  .p-sports .sports-live-stage-figure {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    border-radius: 11px;
  }

  .p-sports .sports-live-stage-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .p-sports .sports-live-stage-copy strong {
    font-size: .67rem;
  }

  .p-sports .sports-live-stage-copy small {
    font-size: var(--text-2xs);
  }
}

/* Arena V3: echte Porträts, fortlaufende Aktionsleiste und getrennte Ringstimme. */
.p-sports .sports-live-generated-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.p-sports .sports-live-character-avatar,
.p-sports .sports-live-stage-avatar,
.p-sports .sports-live-student-portrait {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.p-sports .sports-live-stage-student {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #102334;
  border-radius: 50%;
  color: #102334;
  background: #dff8ff;
  font-size: .55rem;
  font-style: normal;
}

.p-sports [data-sports-live-lobby] {
  grid-template-areas:
    "lobby-head lobby-head"
    "teams teams"
    "plan invites"
    "lobby-footer lobby-footer";
  grid-template-columns: minmax(0, 1.45fr) minmax(390px, .75fr);
  align-items: start;
}

.p-sports [data-sports-live-lobby] .sports-live-lobby-head { grid-area: lobby-head; }
.p-sports [data-sports-live-lobby] .sports-live-teams { grid-area: teams; }
.p-sports [data-sports-live-lobby] > .sports-live-plan-panel { grid-area: plan; }
.p-sports [data-sports-live-lobby] > .sports-live-invite-panel { grid-area: invites; }
.p-sports [data-sports-live-lobby] .sports-live-lobby-footer { grid-area: lobby-footer; }

.p-sports [data-sports-live-lobby] > .sports-live-invite-panel,
.p-sports [data-sports-live-lobby] > .sports-live-plan-panel {
  width: 100%;
  height: 520px;
  min-height: 0;
  max-height: 520px;
}

.p-sports [data-sports-live-lobby] .sports-live-teams {
  grid-template-rows: minmax(0, auto);
  grid-auto-rows: minmax(0, auto);
}

.p-sports .sports-live-invite-filter {
  display: block;
  padding: 9px 10px 0;
}

.p-sports .sports-live-invite-filter input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm-plus);
  color: var(--sports-live-text);
  background: rgba(255, 255, 255, .045);
  font: inherit;
}

.p-sports [data-sports-live-lobby] .sports-live-invite-list {
  max-height: 446px;
  padding: 9px 10px 10px;
  overflow-y: auto;
}

.p-sports .sports-live-match-shell {
  grid-template-areas:
    "tick tick"
    "stage plan"
    "events plan";
  grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(780px, calc(100dvh - 190px));
}

.p-sports .sports-live-stage {
  min-height: 0;
}

.p-sports .sports-live-stage-field {
  display: block;
  min-height: 0;
}

.p-sports .sports-live-stage-arena {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.p-sports .sports-live-stage-figures {
  inset: 22px 18px;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--space-2) 12px;
}

.p-sports .sports-live-stage-figure {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  padding: 7px;
  border-radius: 13px;
}

.p-sports .sports-live-stage-avatar {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.p-sports .sports-live-event-strip {
  grid-area: events;
  width: 100%;
  margin-top: 8px;
  position: relative;
  inset: auto;
}

.p-sports .sports-live-event-strip .sports-live-event-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 118px;
}

.p-sports .sports-live-plan-panel {
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.p-sports .sports-live-plan-head-state {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.p-sports .sports-live-plan-head-state small {
  color: var(--sports-live-green);
  font-size: .52rem;
}

.p-sports .sports-live-plan-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 5px;
  padding: 8px 10px 0;
}

.p-sports .sports-live-plan-presets button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--sports-live-line);
  border-radius: 9px;
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}

.p-sports .sports-live-plan-presets button.is-active {
  border-color: var(--sports-live-blue);
  color: var(--sports-live-text);
  background: rgba(98, 220, 255, .12);
}

.p-sports .sports-live-plan-presets button.is-filled b {
  color: var(--sports-live-green);
}

.p-sports .sports-live-plan-presets button small {
  overflow: hidden;
  font-size: .51rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-plan-presets .sports-live-preset-save {
  display: block;
  color: var(--sports-live-gold);
  font-size: .55rem;
  font-weight: 900;
}

.p-sports .sports-live-command-builder {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
}

.p-sports .sports-live-action-palette {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.p-sports .sports-live-action-palette button,
.p-sports .sports-live-target-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  gap: 1px;
  padding: 5px 3px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm-plus);
  color: var(--sports-live-muted);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}

.p-sports .sports-live-action-palette button.is-active,
.p-sports .sports-live-target-button.is-active {
  border-color: var(--sports-live-blue);
  color: var(--sports-live-text);
  background: linear-gradient(145deg, rgba(98, 220, 255, .2), rgba(120, 225, 174, .08));
  box-shadow: 0 0 18px rgba(98, 220, 255, .12);
}

.p-sports .sports-live-action-palette kbd,
.p-sports .sports-live-target-button kbd,
.p-sports .sports-live-plan-add kbd {
  border: 0;
  color: var(--sports-live-gold);
  background: transparent;
  font: 900 .5rem/1 inherit;
}

.p-sports .sports-live-action-palette i {
  font: normal 900 1.05rem/1 inherit;
}

.p-sports .sports-live-action-palette span {
  max-width: 100%;
  overflow: hidden;
  font-size: .46rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-target-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.p-sports .sports-live-target-button {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 36px;
  padding: 5px 7px;
}

.p-sports .sports-live-target-button span {
  overflow: hidden;
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-sports .sports-live-target-empty {
  grid-column: 1 / -1;
  padding: 8px;
  color: var(--sports-live-muted);
  font-size: var(--text-2xs);
  text-align: center;
}

.p-sports .sports-live-plan-add {
  min-height: 38px;
}

@media (max-width: 1080px) {
  .p-sports [data-sports-live-lobby] {
    grid-template-areas: "lobby-head" "teams" "plan" "invites" "lobby-footer";
    grid-template-columns: minmax(0, 1fr);
  }

  .p-sports .sports-live-match-shell {
    grid-template-areas: "tick" "stage" "events" "plan";
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .p-sports .sports-live-action-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sichtbare Zustände: ausgeblendete Lobby-/Kampfbereiche dürfen keinen Platz belegen. */
.p-sports .sports-live-screen [hidden] {
  display: none;
}

.p-sports .sports-live-lobby {
  align-content: start;
  min-height: 0;
  grid-auto-rows: auto;
}

.p-sports .sports-live-lobby-head {
  align-self: start;
}

.p-sports .sports-live-lobby-head > p {
  max-width: 62ch;
  text-align: right;
}

.p-sports .sports-live-invite-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.p-sports .sports-live-mode-button > b,
.p-sports .sports-live-mode-button > small {
  display: block;
}

.p-sports .sports-live-mode-button > b {
  color: var(--sports-live-text);
  font-size: var(--text-sm);
  line-height: 1.15;
}

.p-sports .sports-live-mode-button > small {
  margin-top: 3px;
  color: var(--sports-live-muted);
  font-size: .56rem;
  line-height: 1.2;
}

@media (max-width: 760px) {
  .p-sports .sports-live-lobby-head {
    display: grid;
  }

  .p-sports .sports-live-lobby-head > p {
    max-width: none;
    text-align: left;
  }
}

/* Fairplay bleibt kompakt; ausführliche Hilfe übernimmt der Lektor. */
.p-sports .sports-live-fairplay {
  position: relative;
  z-index: 19;
  border: 1px solid rgba(245, 205, 112, 0.24);
  border-radius: var(--radius-md-plus);
  background: rgba(7, 20, 28, 0.88);
}

.p-sports .sports-live-fairplay > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 42px;
  padding: 8px 12px;
  color: var(--sports-live-text);
  cursor: pointer;
  list-style: none;
}

.p-sports .sports-live-fairplay > summary::-webkit-details-marker {
  display: none;
}

.p-sports .sports-live-fairplay > summary::after {
  content: "+";
  color: var(--sports-live-gold);
  font-weight: 900;
}

.p-sports .sports-live-fairplay[open] > summary::after {
  content: "−";
}

.p-sports .sports-live-fairplay > summary span {
  color: var(--sports-live-gold);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.p-sports .sports-live-fairplay > summary small {
  margin-left: auto;
  color: var(--sports-live-muted);
  font-size: .6rem;
}

.p-sports .sports-live-fairplay-body {
  display: grid;
  gap: 9px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(245, 205, 112, 0.14);
}

.p-sports .sports-live-fairplay-body > strong {
  padding-top: 10px;
  color: var(--sports-live-gold);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.p-sports .sports-live-fairplay-body ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 22px;
  margin: 0;
  padding-left: 20px;
  color: var(--sports-live-muted);
  font-size: .64rem;
  line-height: 1.35;
}

.p-sports .sports-live-report-button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 113, 111, .4);
  border-radius: var(--radius-sm-plus);
  color: #ffd2d1;
  background: rgba(255, 113, 111, .09);
  font-size: .6rem;
  font-weight: 900;
  cursor: pointer;
}

.p-sports .sports-live-report-button:hover {
  border-color: rgba(255, 113, 111, .72);
  background: rgba(255, 113, 111, .17);
}

.p-sports .sports-live-tick-server .sports-live-report-button {
  margin-top: 4px;
}

.p-sports .sports-live-report-dialog {
  width: min(440px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 24px));
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(245, 205, 112, .45);
  border-radius: var(--radius-lg);
  color: var(--sports-live-text);
  background: linear-gradient(145deg, rgba(12, 29, 39, .99), rgba(4, 13, 19, .99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .58);
}

.p-sports .sports-live-report-dialog:not([open]) {
  display: none;
}

.p-sports .sports-live-report-dialog::backdrop {
  background: rgba(1, 7, 11, .72);
  backdrop-filter: blur(5px);
}

.p-sports .sports-live-report-form {
  display: grid;
  gap: 13px;
  padding: 18px;
}

.p-sports .sports-live-report-form header {
  display: grid;
  gap: var(--space-1);
}

.p-sports .sports-live-report-form header > span {
  color: var(--sports-live-gold);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.p-sports .sports-live-report-form h3,
.p-sports .sports-live-report-form p {
  margin: 0;
}

.p-sports .sports-live-report-form h3 {
  font: 900 1.45rem/1 "Rajdhani", "Segoe UI", sans-serif;
}

.p-sports .sports-live-report-form p {
  color: var(--sports-live-muted);
  font-size: .69rem;
  line-height: 1.45;
}

.p-sports .sports-live-report-form > label {
  display: grid;
  gap: 6px;
}

.p-sports .sports-live-report-form > label > span {
  color: var(--sports-live-muted);
  font-size: .61rem;
  font-weight: 850;
}

.p-sports .sports-live-report-form select,
.p-sports .sports-live-report-form textarea {
  width: 100%;
  border: 1px solid var(--sports-live-line);
  border-radius: 11px;
  color: var(--sports-live-text);
  background: rgba(255, 255, 255, .055);
}

.p-sports .sports-live-report-form select {
  min-height: 42px;
  padding: 8px 10px;
}

.p-sports .sports-live-report-form textarea {
  min-height: 88px;
  padding: 10px;
  resize: vertical;
  font: inherit;
  line-height: 1.4;
}

.p-sports .sports-live-report-form option {
  color: #07141c;
}

.p-sports .sports-live-report-form footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.p-sports .sports-live-report-submit {
  padding: 8px 14px;
  border: 1px solid rgba(245, 205, 112, .62);
  border-radius: 11px;
  color: #191102;
  background: linear-gradient(135deg, #ffe29a, var(--sports-live-gold));
  font-weight: 900;
  cursor: pointer;
}

.p-sports .sports-live-report-submit:disabled {
  cursor: wait;
  opacity: .65;
}

@media (max-width: 540px) {
  .p-sports .sports-live-fairplay-body ol {
    grid-template-columns: 1fr;
  }

  .p-sports .sports-live-report-form {
    padding: 15px;
  }

  .p-sports .sports-live-report-form footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .p-sports .sports-live-report-form footer button {
    width: 100%;
  }
}

/* Das bestehende autonome Schüler-Sparring bleibt als kompakte Trainingskarte erreichbar. */
.p-sports .sports-training-section.sports-training-launcher {
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid rgba(120, 225, 174, .34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 50%, rgba(120, 225, 174, .13), transparent 28%),
    linear-gradient(135deg, rgba(10, 31, 36, .96), rgba(5, 18, 25, .96));
  box-shadow: 0 15px 36px rgba(0, 0, 0, .18);
}

.p-sports .sports-training-section.sports-training-launcher > summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 9px 13px;
  color: var(--sports-live-text, #eef8fc);
  cursor: pointer;
  list-style: none;
}

.p-sports .sports-training-section.sports-training-launcher > summary::-webkit-details-marker {
  display: none;
}

.p-sports .sports-training-launcher__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(120, 225, 174, .48);
  border-radius: 13px;
  color: var(--sports-live-green, #78e1ae);
  background: rgba(120, 225, 174, .08);
  font-size: 1.35rem;
}

.p-sports .sports-training-section.sports-training-launcher > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.p-sports .sports-training-section.sports-training-launcher > summary small {
  color: var(--sports-live-green, #78e1ae);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.p-sports .sports-training-section.sports-training-launcher > summary strong {
  font-size: .8rem;
}

.p-sports .sports-training-section.sports-training-launcher > summary > b {
  padding: 7px 10px;
  border: 1px solid rgba(120, 225, 174, .42);
  border-radius: 9px;
  color: #071b14;
  background: var(--sports-live-green, #78e1ae);
  font-size: .62rem;
}

.p-sports .sports-training-section.sports-training-launcher[open] > summary > b::before {
  content: "Schließen";
  font-size: .62rem;
}

.p-sports .sports-training-section.sports-training-launcher[open] > summary > b {
  font-size: 0;
}

.p-sports .sports-training-section.sports-training-launcher .sports-training-section__body {
  padding: 0 10px 10px;
  border-top: 1px solid rgba(120, 225, 174, .14);
}

.p-sports .sports-live-matchmaking-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0 10px 10px;
  padding: 8px 9px;
  border: 1px solid rgba(98, 220, 255, .4);
  border-radius: 11px;
  background: rgba(98, 220, 255, .07);
}

.p-sports .sports-live-matchmaking-state > strong {
  color: var(--sports-live-blue);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.p-sports .sports-live-matchmaking-state > span {
  color: var(--sports-live-muted);
  font-size: .61rem;
}

.p-sports .sports-live-matchmaking-state > button {
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--sports-live-line);
  border-radius: var(--radius-sm);
  color: var(--sports-live-text);
  background: rgba(255, 255, 255, .04);
  font-size: var(--text-2xs);
  cursor: pointer;
}
}

/* SOURCE: 50-states/states.css */
/* =========================================================
   STATES: Global states and utilities
   Scope: Global
   Hooks: .is-*, .has-*, .u-*
   ========================================================= */

@layer states {
[hidden] {
  display: none;
}

.is-hidden {
  display: none;
}

[data-student-image].has-student-image > :not(.game-student-generated-image):not(.game-student-image-loader) {
  opacity: 0;
}

.is-disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

.u-flow > * + * {
  margin-block-start: var(--flow-space, var(--space-4));
}

.u-stack-xs { margin-block-start: var(--space-2); }
.u-stack-10 { margin-block-start: var(--space-2-5); }
.u-stack-sm { margin-block-start: var(--space-3); }
.u-stack-14 { margin-block-start: var(--space-3-5); }
.u-stack-base { margin-block-start: var(--space-4); }
.u-stack-md { margin-block-start: var(--space-5); }
.u-stack-lg { margin-block-start: var(--space-6); }
.u-separate-md { margin-block-end: var(--space-5); }
.u-separate-lg { margin-block-end: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
}

/* SOURCE: 90-overrides/legacy-compat.css */
/* =========================================================
   OVERRIDE: Legacy compatibility
   Scope: Global
   Removal: after complete markup and JS hook migration
   ========================================================= */

@layer overrides {
/*
 * Legacy aliases remain until markup and JS have moved to semantic hooks.
 * They intentionally have zero specificity so screen rules keep control.
 */
:where(.c-card, .panel, .status-card, .meta-card) {
  border-color: var(--border-card);
}

:where(.c-button, .button, .button-ghost, .button-danger, .link-button) {
  font-family: var(--font-body);
}

:where(.c-badge, .badge) {
  border-radius: var(--radius-pill);
}

:where(.c-progress__fill, [data-progress-fill]) {
  width: var(--progress, 0%);
}

.game-stage-backdrop {
  background-image: var(--game-stage-backdrop-image, none);
}
}