.companions-page { --companion-ink: #4d6545; --companion-muted: #7d8c70; }
.companions-header { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.companions-eyebrow { display: block; font-size: 11px; letter-spacing: 2px; color: #8fa17b; margin-bottom: 10px; }
.companions-header h1 { color: var(--companion-ink); font-size: 31px; font-weight: 600; line-height: 1.45; }
.companions-header h1 span { color: #8ca575; }
.companions-header p { color: var(--companion-muted); font-size: 12px; line-height: 1.9; margin-top: 10px; }
.companions-stats { display: flex; gap: 12px; flex-shrink: 0; }
.companions-stats > div { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid #e4e8d7; border-radius: 16px; background: #f3f5e9; color: #94a579; }
.companions-stats > div:last-child { background: #f7f1df; border-color: #eae2c8; color: #b89c5e; }
.companions-stats > div > span { display: flex; flex-direction: column; gap: 4px; }
.companions-stats strong { font-size: 23px; font-weight: 600; line-height: 1; }
.companions-stats small { font-size: 14px; font-weight: 400; }
.companions-stats span span { font-size: 10px; white-space: nowrap; }
.companions-welcome { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border: 1px solid #dfe8d4; border-radius: 12px; background: #edf3e6; color: #7a9166; }
.companions-welcome > svg { flex-shrink: 0; }
.companions-welcome p { font-size: 11px; line-height: 1.9; }
.companions-welcome strong { color: #617b51; font-weight: 600; }
.companions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; margin-top: 26px; }
.companions-card { --companion-card: #eef3e5; --companion-line: #dfe7d3; display: flex; flex-direction: column; min-width: 0; padding: 19px 22px 22px; border: 1px solid var(--companion-line); border-radius: 20px; background: var(--companion-card); text-align: center; overflow: hidden; }
.companions-mint { --companion-card: #eaf2e8; --companion-line: #dce6d8; }
.companions-peach { --companion-card: #f8eee3; --companion-line: #eddfd0; }
.companions-cream { --companion-card: #f8f2e3; --companion-line: #ebe1cb; }
.companions-blue { --companion-card: #edf1f1; --companion-line: #dce5e3; }
.companions-fern { --companion-card: #eaf2e7; --companion-line: #dce7d5; }
.companions-sand { --companion-card: #f6eede; --companion-line: #eadeca; }
.companions-card-top { display: flex; justify-content: space-between; align-items: center; gap: 7px; min-height: 24px; }
.companions-species { color: #728264; font-size: 11px; font-weight: 600; letter-spacing: 1px; white-space: nowrap; }
.companions-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #a18c5d; background: #ffffff87; border-radius: 20px; padding: 5px 8px; white-space: nowrap; }
.companions-status-known { color: #7b9266; }
.companions-portrait { position: relative; isolation: isolate; display: grid; place-items: center; height: 185px; margin: 10px 0 5px; }
.companions-halo { position: absolute; z-index: -1; width: 154px; height: 154px; border-radius: 50%; background: #fffdf77a; bottom: 9px; }
.companions-portrait > svg, .companions-growing-pet > svg { display: block; width: 155px; height: 172px; max-width: 100%; }
.companions-portrait-pony > svg { width: 216px; height: 165px; }
.companions-portrait-rhino > svg, .companions-portrait-trex > svg { width: 210px; height: 175px; }
.companions-growing-pet { display: grid; place-items: center; width: 165px; height: 180px; transform: scale(var(--companion-scale)); transform-origin: 50% 80%; }
.companions-portrait-grown > svg { width: 180px; height: 178px; }
.companions-identity h2 { color: var(--companion-ink); font-size: 26px; font-weight: 600; letter-spacing: 2px; }
.companions-identity > span { display: inline-block; font-size: 10px; color: #89967b; margin-top: 7px; letter-spacing: .4px; }
.companions-title { font-size: 12px; color: #718261; font-weight: 500; margin-top: 16px; }
.companions-message { color: var(--companion-muted); font-size: 11px; line-height: 1.95; margin: 9px 0 17px; min-height: 43px; }
.companions-growth { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--companion-line); padding-top: 11px; color: #7a8c68; font-size: 10px; }
.companions-growth > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.companions-growth > span:last-child { white-space: nowrap; }
.companions-growth-hint { font-size: 10px; line-height: 1.8; color: #929a7f; text-align: left; margin: 8px 0 16px; }
.companions-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: auto; }
.companions-actions > .button { width: 100%; justify-content: center; font-size: 11px; padding: 11px 10px; }
.companions-ending { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #738859; font-size: 10px; line-height: 1.7; }
.companions-note { display: flex; align-items: center; gap: 18px; padding: 24px 26px; margin-top: 25px; background: #fffefa; border: 1px solid #e8e7d9; border-radius: 15px; color: #bba16b; }
.companions-note > svg { flex-shrink: 0; }
.companions-note h2 { font-size: 13px; color: #788866; font-weight: 600; }
.companions-note p { font-size: 11px; line-height: 1.9; color: #929c84; margin-top: 6px; }
@media (max-width: 1200px) {
  .companions-header { flex-wrap: wrap; gap: 17px; }
  .companions-stats > div { padding: 12px 16px; }
  .companions-card { padding: 17px 16px 20px; }
  .companions-grid { gap: 15px; }
}
@media (max-width: 1000px) {
  .companions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .companions-header h1 { font-size: 25px; }
  .companions-header p { font-size: 11px; }
  .companions-eyebrow { font-size: 10px; }
  .companions-stats { gap: 9px; }
  .companions-stats > div { gap: 9px; padding: 11px 13px; }
  .companions-stats strong { font-size: 21px; }
  .companions-welcome { padding: 12px 13px; align-items: flex-start; }
  .companions-welcome > svg { margin-top: 2px; }
  .companions-welcome p { font-size: 10px; }
  .companions-welcome strong { display: block; }
  .companions-grid { gap: 12px; margin-top: 19px; }
  .companions-card { padding: 14px 12px 18px; border-radius: 16px; }
  .companions-card-top { flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .companions-portrait { height: 153px; }
  .companions-halo { width: 121px; height: 121px; }
  .companions-portrait > svg, .companions-growing-pet > svg { width: 127px; height: 145px; }
  .companions-growing-pet { width: 136px; height: 150px; }
  .companions-portrait-pony > svg, .companions-portrait-rhino > svg, .companions-portrait-trex > svg { width: 160px; height: 143px; }
  .companions-portrait-grown > svg { width: 149px; height: 147px; }
  .companions-identity h2 { font-size: 23px; }
  .companions-identity > span, .companions-status { font-size: 9px; }
  .companions-message { font-size: 10px; min-height: 58px; }
  .companions-growth { flex-wrap: wrap; justify-content: center; font-size: 9px; }
  .companions-actions > .button { font-size: 10px; padding: 10px 6px; gap: 5px; }
  .companions-note { padding: 18px 15px; gap: 12px; align-items: flex-start; }
  .companions-note h2 { font-size: 12px; line-height: 1.7; }
  .companions-note p { font-size: 10px; }
}
@media (max-width: 540px) {
  .companions-grid { grid-template-columns: minmax(0, 1fr); }
  .companions-header h1 { font-size: 23px; }
  .companions-header h1 span { display: block; }
  .companions-stats { width: 100%; }
  .companions-stats > div { flex: 1; justify-content: center; padding: 12px 7px; gap: 8px; }
  .companions-stats > div > svg { width: 18px; }
  .companions-stats span span { font-size: 9px; }
  .companions-card { padding: 18px 20px 22px; }
  .companions-card-top { justify-content: space-between; }
  .companions-portrait { height: 172px; }
  .companions-halo { width: 145px; height: 145px; }
  .companions-portrait > svg, .companions-growing-pet > svg { width: 145px; height: 163px; }
  .companions-growing-pet { width: 154px; height: 169px; }
  .companions-portrait-pony > svg, .companions-portrait-rhino > svg, .companions-portrait-trex > svg { width: 205px; height: 163px; }
  .companions-portrait-grown > svg { width: 172px; height: 165px; }
  .companions-message { min-height: 0; font-size: 11px; }
  .companions-growth { justify-content: space-between; font-size: 10px; }
  .companions-actions > .button { font-size: 11px; padding: 12px; }
}