/* PC screen only. Keep the shared palette, fonts and controls from style.css. */
#scr-pc { z-index: 55; padding: 22px; }
#scr-pc .pc-shell { width: min(1440px, 100%); max-width: 1440px; height: min(900px, 94dvh); padding: 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; background: #141028; border: 2px solid #736199; box-shadow: 0 18px 80px #0009; }
.pc-head { display: flex; align-items: center; gap: 20px; }
.pc-head h2 { margin: 0; font-size: 28px; color: #ffe2a1; }
.pc-eyebrow { color: #b7a7d0; font-size: 12px; }
.pc-head p { margin-left: auto; color: #c9bfe0; }
.pc-tools { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 8px; }
.pc-tools input, .pc-tools select { min-width: 0; width: 100%; padding: 9px; background: #231b3d; border: 1px solid #66537f; color: #f1e8ff; font: inherit; }
.pc-flags { display: flex; flex-wrap: wrap; gap: 18px; color: #dacded; }
.pc-flags label { display: flex; gap: 6px; align-items: center; }
.pc-warning:empty { display: none; }
.pc-warning { margin: 0; color: #ffd58a; font-size: 13px; }
/* Wave 2 panel: the selected species on the right, over the list on narrow screens. */
#scr-pc .pc-shell { position: relative; }
.pc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 380px); gap: 12px; }
.pc-panel { min-height: 0; overflow: auto; background: #1d1633; border: 1px solid #67507e; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; color: #e9def7; }
.pc-panel-hint { margin: auto; text-align: center; color: #b9a8d2; }
.pc-panel-back { display: none; align-self: flex-start; }
.pc-panel-head { display: flex; gap: 12px; align-items: center; }
.pc-panel-sprite { flex: none; width: 120px; display: flex; justify-content: center; background: radial-gradient(ellipse, #51427166, transparent 65%); }
.pc-panel-sprite canvas { image-rendering: pixelated; }
.pc-panel-head small { color: #b5a0cc; }
.pc-panel-head h2 { margin: 2px 0 6px; color: #ffe2a1; font-size: 22px; overflow-wrap: anywhere; }
.pc-panel-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-tag { font-size: 12px; color: #ffe2a1; }
.pc-panel section h3 { margin: 0 0 4px; font-size: 13px; color: #c7b3e6; }
.pc-panel section p { margin: 2px 0; font-size: 13px; }
.pc-panel-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-panel-row button { flex: 1; }
.pc-panel-note { margin: -4px 0 0; font-size: 11px; color: #b39fcd; }
.pc-panel-stars { color: #ffd640; letter-spacing: 2px; font-size: 18px; }
.pc-panel-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.pc-panel-stats th, .pc-panel-stats td { padding: 3px 6px; text-align: right; border-bottom: 1px solid #3a2e55; }
.pc-panel-stats th[scope=row] { text-align: left; color: #c7b3e6; font-weight: normal; }
.pc-panel-stats thead th { color: #9f8cbd; font-weight: normal; font-size: 11px; }
#scr-pc .pc-panel-link { align-self: flex-start; background: transparent; border: 0; color: #b7cffa; padding: 4px 0; }
.pc-panel-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #524066; padding: 10px 0 2px; position: sticky; bottom: -14px; background: #1d1633; }
.pc-panel h2:focus { outline: none; }
.pc-panel-foot button { flex: 1; }
.pc-card { cursor: pointer; }
.pc-card.pc-focus { border-color: #d0a7ff; box-shadow: 0 0 0 2px #d0a7ff55; }
#scr-pc .pc-open { all: unset; cursor: pointer; display: block; width: 100%; overflow-wrap: anywhere; }
#scr-pc .pc-open:focus-visible { outline: 2px solid #76e6ee; outline-offset: 2px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; overflow: auto; min-height: 0; flex: 1; align-content: start; padding: 2px 5px 5px 2px; }
.pc-card { background: #241b3b; border: 1px solid #67507e; border-radius: 9px; padding: 10px; min-width: 0; }
.pc-protected { border-color: #b39356; }
.pc-card-top { display: flex; justify-content: space-between; gap: 5px; color: #b5a0cc; font-size: 11px; }
.pc-protected .pc-card-top span { color: #e9c77e; }
.pc-sprite { min-height: 80px; display: flex; justify-content: center; background: radial-gradient(ellipse, #51427155, transparent 65%); }
.pc-sprite canvas { image-rendering: pixelated; }
.pc-card h3 { margin: 3px 0 6px; color: #f8edff; font-size: 17px; overflow-wrap: anywhere; }
.pc-rarity { display: flex; justify-content: space-between; align-items: center; min-height: 18px; }
.pc-rarity span { color: #ccb6dc; font-size: 11px; }
.pc-forms, .pc-card-actions, .pc-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
#scr-pc button { min-height: 32px; font: inherit; background: #33264b; color: #f1e8ff; border: 1px solid #8a6aab; border-radius: 5px; padding: 6px 10px; cursor: pointer; }
#scr-pc button.primary { background: #785c28; color: #fff5d5; border-color: #e9bd72; }
#scr-pc button:hover:enabled { filter: brightness(1.2); }
.pc-forms button, .pc-card-actions button, .pc-links button { flex: 1; padding: 5px; font-size: 12px !important; }
#scr-pc .pc-forms button[aria-pressed=true], #scr-pc .pc-card-actions button[aria-pressed=true] { background: #635094; border-color: #d0a7ff; }
#scr-pc button:disabled { opacity: .48; cursor: default; }
#scr-pc :focus-visible { outline: 2px solid #76e6ee; outline-offset: 2px; }
.pc-links button { background: transparent; color: #b7cffa; border: 0; }
.pc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid #524066; padding-top: 10px; }
.pc-actions span { margin-right: auto; color: #ddd0ef; }
.pc-actions button { padding: 8px 12px; }
.pc-pending { background: #493454; border: 1px solid #ebbd76; padding: 10px; display: flex; align-items: center; gap: 10px; }
.pc-pending button { margin-left: auto; }
.pc-dialog { z-index: 56; color: #f1e8ff; background: #241b3b; border: 2px solid #ab87cc; border-radius: 10px; max-width: 520px; width: 90vw; max-height: 80dvh; padding: 22px; font: inherit; }
.pc-dialog::backdrop { background: #100b20cc; }
.pc-dialog h2 { color: #ffe2a1; }
.pc-dialog ul { max-height: 25dvh; overflow: auto; padding-left: 22px; }
.pc-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.pc-empty { color: #cdbbdf; grid-column: 1 / -1; text-align: center; padding: 30px; }
@media (max-width: 900px) {
  #scr-pc { padding: 8px; }
  #scr-pc .pc-shell { height: 96dvh; padding: 10px; gap: 6px; }
  .pc-head h2 { font-size: 21px; }
  .pc-eyebrow { display: none; }
  .pc-tools { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 5px; }
  .pc-tools input, .pc-tools select { padding: 5px; font-size: 12px; }
  .pc-flags { gap: 10px; font-size: 12px; }
  .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pc-card { padding: 7px; }
  .pc-actions { padding-top: 5px; font-size: 12px; }
  .pc-actions button { padding: 4px 8px; }
  .pc-head p { margin-top: 0; margin-bottom: 0; }
}
@media (max-width: 700px) {
  .pc-body { grid-template-columns: minmax(0, 1fr); }
  .pc-panel { display: none; }
  .pc-panel-open .pc-panel { display: flex; position: absolute; inset: 0; z-index: 3; border-radius: 0; border: 0; padding: 12px; }
  .pc-panel-back { display: inline-block; }
  .pc-panel-head { flex-direction: column; align-items: flex-start; }
}