/*
 * Runestone Vale player-portal layer.
 * Design reminder: preserve the site's Cinzel/Crimson Text, engraved gold, soot-black,
 * stone, parchment, and restrained rune-light language; prefer asymmetric field-guide
 * compositions over generic app cards.
 */
:root {
  --portal-ink: #0c0b09;
  --portal-ink-soft: #14120e;
  --portal-stone: #211e18;
  --portal-stone-2: #2b261d;
  --portal-line: rgba(196, 156, 71, .27);
  --portal-gold: #d5ad57;
  --portal-gold-bright: #f1d58a;
  --portal-parchment: #e7dcc2;
  --portal-muted: #aaa08d;
  --portal-rune: #6fa8c7;
  --portal-ember: #9e493b;
  --portal-green: #6c9b5d;
  --portal-ease: cubic-bezier(.23, 1, .32, 1);
}

body.portal-route {
  background:
    radial-gradient(circle at 76% 6%, rgba(181, 134, 45, .08), transparent 28rem),
    radial-gradient(circle at 10% 46%, rgba(59, 97, 118, .07), transparent 34rem),
    #0b0a08;
}

.portal-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 140px 0 88px;
}

.portal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(250px, .72fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: end;
  min-height: 320px;
  padding: clamp(26px, 5vw, 62px) 0 52px;
  border-bottom: 1px solid var(--portal-line);
}

.portal-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 -1px auto;
  width: min(46vw, 520px);
  pointer-events: none;
  opacity: .58;
  background:
    linear-gradient(90deg, transparent, rgba(13, 12, 9, .72)),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(213, 173, 87, .045) 18px 19px);
  mask-image: linear-gradient(to left, #000, transparent);
}

.portal-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--portal-gold);
  font: 700 .72rem/1 Cinzel, Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.portal-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--portal-gold);
  box-shadow: 12px 0 0 rgba(213, 173, 87, .25);
}

.portal-title {
  max-width: 820px;
  margin: 16px 0 12px;
  color: var(--portal-parchment);
  font: 700 clamp(2.45rem, 7vw, 5.9rem)/.93 Cinzel, Georgia, serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.portal-intro {
  max-width: 670px;
  margin: 0;
  color: #bbb09b;
  font: 400 clamp(1.05rem, 2vw, 1.25rem)/1.65 'Crimson Text', Georgia, serif;
}

.portal-hero-aside {
  position: relative;
  z-index: 1;
  padding: 20px 0 4px 24px;
  border-left: 1px solid var(--portal-line);
}

.portal-hero-aside strong,
.portal-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--portal-gold-bright);
  font: 700 .76rem/1.3 Cinzel, Georgia, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portal-hero-aside p {
  margin: 0;
  color: var(--portal-muted);
  font-size: .9rem;
  line-height: 1.7;
}

.portal-status {
  margin: 28px 0;
  min-height: 64px;
}

.portal-banner,
.portal-empty,
.portal-loading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  color: var(--portal-muted);
  border: 1px solid var(--portal-line);
  background: linear-gradient(108deg, rgba(42, 37, 28, .9), rgba(18, 16, 12, .86));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
}

.portal-banner::before {
  content: '';
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 3px;
  background: var(--portal-gold);
}

.portal-banner-icon,
.portal-empty-icon {
  flex: 0 0 auto;
  font-size: 1.65rem;
  filter: saturate(.8);
}

.portal-banner h2,
.portal-empty h2 {
  margin: 0 0 3px;
  color: var(--portal-parchment);
  font: 700 1rem/1.25 Cinzel, Georgia, serif;
}

.portal-banner p,
.portal-empty p { margin: 0; line-height: 1.55; }

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.portal-button,
button.portal-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 17px;
  cursor: pointer;
  border: 1px solid var(--portal-gold);
  border-radius: 1px;
  color: #110f0b;
  background: var(--portal-gold);
  font: 800 .72rem/1 Cinzel, Georgia, serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms var(--portal-ease), background 180ms var(--portal-ease), color 180ms var(--portal-ease);
}

.portal-button:hover { background: var(--portal-gold-bright); color: #080705; }
.portal-button:active { transform: scale(.97); }
.portal-button.secondary { color: var(--portal-gold-bright); background: transparent; }
.portal-button.danger { color: #f0c5be; border-color: #8f4136; background: rgba(116, 43, 33, .25); }
.portal-button[disabled] { cursor: wait; opacity: .55; }

.portal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.portal-panel {
  position: relative;
  grid-column: span 6;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(196, 156, 71, .2);
  background:
    linear-gradient(145deg, rgba(41, 36, 27, .93), rgba(17, 15, 11, .95)),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,.014) 20px 21px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .23);
}

.portal-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(241, 213, 138, .05);
}

.portal-panel.span-12 { grid-column: span 12; }
.portal-panel.span-8 { grid-column: span 8; }
.portal-panel.span-4 { grid-column: span 4; }

.portal-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(196, 156, 71, .16);
}

.portal-panel-title {
  margin: 0;
  color: var(--portal-gold-bright);
  font: 700 .88rem/1.2 Cinzel, Georgia, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portal-panel-note { color: var(--portal-muted); font-size: .78rem; }

.portal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-stat {
  min-width: 0;
  padding: 16px 15px 14px;
  border: 1px solid rgba(196, 156, 71, .15);
  background: rgba(8, 7, 5, .38);
}

.portal-stat-label {
  display: block;
  margin-bottom: 5px;
  color: #8f8675;
  font: 700 .64rem/1.25 Cinzel, Georgia, serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.portal-stat-value {
  display: block;
  overflow-wrap: anywhere;
  color: var(--portal-parchment);
  font: 700 1.35rem/1.15 Cinzel, Georgia, serif;
}

.portal-stat-value.gold { color: var(--portal-gold-bright); }
.portal-stat-value.rune { color: #8fc5df; }
.portal-stat-value.green { color: #99c58c; }

.portal-character {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.portal-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  color: var(--portal-gold-bright);
  border: 1px solid var(--portal-gold);
  background: radial-gradient(circle at 50% 32%, #3a3225, #15120e 70%);
  font: 700 2rem/1 Cinzel, Georgia, serif;
  transform: rotate(45deg);
}

.portal-avatar > span { transform: rotate(-45deg); }
.portal-character-name { margin: 0; color: var(--portal-parchment); font: 700 1.6rem/1.1 Cinzel, Georgia, serif; }
.portal-character-title { margin: 7px 0 3px; color: var(--portal-gold); font-style: italic; }
.portal-character-meta { margin: 0; color: var(--portal-muted); font-size: .82rem; }

.portal-skill-list { display: grid; gap: 12px; }
.portal-skill-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.portal-skill-icon { font-size: 1.15rem; text-align: center; }
.portal-skill-top { display: flex; justify-content: space-between; gap: 12px; color: var(--portal-parchment); font-size: .82rem; }
.portal-skill-level { color: var(--portal-gold-bright); font-weight: 700; }
.portal-xp-track { height: 5px; margin-top: 5px; overflow: hidden; background: rgba(0, 0, 0, .52); }
.portal-xp-fill { height: 100%; background: linear-gradient(90deg, #806025, var(--portal-gold-bright)); box-shadow: 0 0 12px rgba(213, 173, 87, .3); }
.portal-xp-copy { margin-top: 3px; color: #817a6d; font-size: .66rem; }

.portal-filterbar,
.portal-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 22px;
}

.portal-filter,
.portal-tab {
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  border: 1px solid rgba(196, 156, 71, .22);
  color: var(--portal-muted);
  background: rgba(21, 18, 13, .78);
  font: 700 .67rem/1 Cinzel, Georgia, serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color 180ms var(--portal-ease), border-color 180ms var(--portal-ease), transform 160ms var(--portal-ease);
}

.portal-filter:hover,
.portal-tab:hover,
.portal-filter.active,
.portal-tab.active { color: var(--portal-gold-bright); border-color: var(--portal-gold); }
.portal-filter:active,
.portal-tab:active { transform: scale(.97); }

.portal-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.portal-card {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(196, 156, 71, .18);
  color: inherit;
  background: linear-gradient(145deg, rgba(42, 36, 27, .86), rgba(15, 13, 10, .92));
  text-decoration: none;
  transition: transform 220ms var(--portal-ease), border-color 220ms var(--portal-ease), background 220ms var(--portal-ease);
}

.portal-card:hover { transform: translateY(-4px); border-color: rgba(213, 173, 87, .55); background: linear-gradient(145deg, rgba(52, 44, 31, .92), rgba(18, 15, 11, .96)); }
.portal-card-icon { display: block; margin-bottom: 26px; font-size: 1.72rem; }
.portal-card-title { margin: 0 0 8px; color: var(--portal-parchment); font: 700 1rem/1.25 Cinzel, Georgia, serif; }
.portal-card-copy { margin: 0; color: var(--portal-muted); font-size: .86rem; line-height: 1.58; }
.portal-card-arrow { position: absolute; top: 22px; right: 22px; color: var(--portal-gold); transition: transform 180ms var(--portal-ease); }
.portal-card:hover .portal-card-arrow { transform: translateX(4px); }
.portal-badge { display: inline-flex; margin-top: 14px; padding: 4px 7px; color: var(--portal-gold-bright); border: 1px solid var(--portal-line); font: 700 .55rem/1 Cinzel, Georgia, serif; letter-spacing: .1em; }

.portal-skill-card { cursor: pointer; }
.portal-skill-card .portal-card-icon { margin-bottom: 18px; }
.portal-skill-card .portal-category { color: var(--portal-gold); font: 700 .62rem/1 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }

.portal-detail {
  display: grid;
  grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr);
  gap: 26px;
  margin-top: 20px;
}

.portal-detail-nav { align-self: start; position: sticky; top: 108px; }
.portal-detail-section + .portal-detail-section { margin-top: 28px; }
.portal-detail-section h3 { margin: 0 0 8px; color: var(--portal-gold-bright); font: 700 .95rem/1.3 Cinzel, Georgia, serif; }
.portal-detail-section p { margin: 0; color: #bcb29e; line-height: 1.72; }

.portal-table-wrap { margin-top: 13px; overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th,
.portal-table td { padding: 11px 12px; border: 1px solid rgba(196, 156, 71, .16); text-align: left; }
.portal-table th { color: var(--portal-gold); background: rgba(0,0,0,.24); font: 700 .65rem/1.2 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.portal-table td { color: #bcb29e; font-size: .82rem; line-height: 1.45; }

.portal-search {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(196, 156, 71, .25);
  border-radius: 0;
  outline: none;
  color: var(--portal-parchment);
  background: rgba(13, 11, 8, .74);
  font: 400 1rem/1 'Crimson Text', Georgia, serif;
}
.portal-search:focus { border-color: var(--portal-gold); box-shadow: 0 0 0 3px rgba(213, 173, 87, .08); }

.portal-group + .portal-group { margin-top: 50px; }
.portal-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; margin-bottom: 16px; }
.portal-group-title { margin: 0; color: var(--portal-gold-bright); font: 700 1.25rem/1.2 Cinzel, Georgia, serif; }
.portal-group-count { color: #81796a; font: 700 .65rem/1 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }

.portal-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
.portal-chat-log { height: min(58vh, 620px); overflow: auto; padding: 16px; border: 1px solid rgba(196,156,71,.18); background: rgba(5,5,4,.42); scroll-behavior: smooth; }
.portal-message { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 10px 4px 14px; }
.portal-message + .portal-message { border-top: 1px solid rgba(196,156,71,.1); }
.portal-message-avatar { display: grid; place-items: center; width: 34px; height: 34px; color: var(--portal-gold-bright); border: 1px solid var(--portal-line); background: #16130e; font: 700 .78rem/1 Cinzel, Georgia, serif; }
.portal-message-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.portal-message-name { color: var(--portal-gold-bright); font-weight: 700; }
.portal-message-role { color: var(--portal-rune); font-size: .62rem; text-transform: uppercase; }
.portal-message-time { color: #746d60; font-size: .68rem; }
.portal-message-body { margin: 4px 0 0; color: #c6baa4; line-height: 1.45; overflow-wrap: anywhere; }
.portal-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; }
.portal-composer textarea { min-height: 50px; max-height: 160px; resize: vertical; padding: 13px 14px; color: var(--portal-parchment); border: 1px solid var(--portal-line); background: rgba(12,10,8,.78); font: 400 .95rem/1.4 'Crimson Text', Georgia, serif; }

.portal-notification-list { display: grid; gap: 12px; }
.portal-notification { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px; border: 1px solid rgba(196,156,71,.16); background: rgba(18,15,11,.74); }
.portal-notification.unread { border-left: 3px solid var(--portal-gold); background: linear-gradient(90deg, rgba(112,81,28,.14), rgba(18,15,11,.74) 24%); }
.portal-notification-icon { font-size: 1.3rem; }
.portal-notification h3 { margin: 0 0 5px; color: var(--portal-parchment); font: 700 .88rem/1.3 Cinzel, Georgia, serif; }
.portal-notification p { margin: 0; color: var(--portal-muted); line-height: 1.5; }
.portal-notification time { white-space: nowrap; color: #766f63; font-size: .68rem; }

.portal-form { display: grid; gap: 13px; }
.portal-field { display: grid; gap: 6px; }
.portal-field label { color: #988f80; font: 700 .65rem/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.portal-field input,
.portal-field select,
.portal-field textarea { width: 100%; min-height: 43px; padding: 10px 12px; color: var(--portal-parchment); border: 1px solid rgba(196,156,71,.24); border-radius: 0; outline: 0; background: #100e0b; font: 400 .94rem/1.45 'Crimson Text', Georgia, serif; }
.portal-field textarea { min-height: 100px; resize: vertical; }
.portal-field input:focus,
.portal-field select:focus,
.portal-field textarea:focus { border-color: var(--portal-gold); }

.portal-step-list { counter-reset: portal-steps; display: grid; gap: 0; }
.portal-step { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; padding: 27px 0; border-top: 1px solid rgba(196,156,71,.17); }
.portal-step-number { color: rgba(213,173,87,.7); font: 700 2.1rem/1 Cinzel, Georgia, serif; }
.portal-step h2 { margin: 0 0 8px; color: var(--portal-parchment); font: 700 1rem/1.3 Cinzel, Georgia, serif; }
.portal-step p { margin: 0; max-width: 740px; color: var(--portal-muted); line-height: 1.65; }

.portal-toast { position: fixed; z-index: 3000; right: 20px; bottom: 20px; max-width: 380px; padding: 14px 17px; color: var(--portal-parchment); border: 1px solid var(--portal-gold); background: #17130e; box-shadow: 0 18px 60px rgba(0,0,0,.58); animation: portal-toast-in 220ms var(--portal-ease) both; }
@keyframes portal-toast-in { from { opacity: 0; transform: translateY(10px); } }

.portal-skeleton { position: relative; overflow: hidden; min-height: 48px; background: #17140f; }
.portal-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(213,173,87,.09), transparent); animation: portal-shimmer 1.25s infinite; }
@keyframes portal-shimmer { to { transform: translateX(100%); } }

@media (max-width: 900px) {
  .portal-hero { grid-template-columns: 1fr; min-height: 0; }
  .portal-hero-aside { max-width: 580px; }
  .portal-panel.span-8,
  .portal-panel.span-4 { grid-column: span 12; }
  .portal-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-detail { grid-template-columns: 1fr; }
  .portal-detail-nav { position: static; }
  .portal-chat-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .portal-shell { width: min(100% - 22px, 1180px); padding-top: 104px; }
  .portal-title { font-size: clamp(2.25rem, 14vw, 3.8rem); }
  .portal-panel,
  .portal-panel.span-12,
  .portal-panel.span-8,
  .portal-panel.span-4 { grid-column: span 12; }
  .portal-card-grid { grid-template-columns: 1fr; }
  .portal-stat-grid { grid-template-columns: 1fr 1fr; }
  .portal-character { grid-template-columns: 58px minmax(0, 1fr); }
  .portal-avatar { width: 54px; font-size: 1.3rem; }
  .portal-chat-log { height: 52vh; }
  .portal-composer { grid-template-columns: 1fr; }
  .portal-notification { grid-template-columns: 32px minmax(0, 1fr); }
  .portal-notification time { grid-column: 2; }
  .portal-step { grid-template-columns: 58px minmax(0, 1fr); gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-card,
  .portal-button,
  .portal-filter,
  .portal-tab { transition: none; }
  .portal-skeleton::after { animation: none; }
}