/* A quieter gallery surrounding the antique brass and walnut cabinet.
   Append after styles.css, retro.css and orbit.css. No game state is changed. */
:root {
  --bg: #0b1517;
  --panel: #152326;
  --line: #354345;
  --gold: #debf84;
  --muted: #a6b6b7;
  --cyan: #a4cbbd;
}
body {
  background: radial-gradient(ellipse at 27% 0%, #2436328c, transparent 55%),
    radial-gradient(ellipse at 95% 54%, #382b1f30, transparent 46%), #0b1517;
}
.topbar { border-bottom-color: #a78a572e; }
.brand-mark { border-color: #a88b59; box-shadow: inset 0 0 0 3px #0b1517; }
.brand small, .edition span { color: #aab7b6; }
main { padding-top: 30px; }
.workspace { gap: 26px; }
.panel:not(.machine-panel) {
  border-color: #45524a85;
  border-radius: 18px;
  background: linear-gradient(145deg, #1b2b2a, #111f23 76%);
  box-shadow: 0 12px 32px #0000001f, inset 0 1px 0 #ead6ab09;
}
.character-panel { position: relative; }
.character-panel .panel-top { padding-top: 26px; padding-bottom: 17px; }
.character-panel h1 { letter-spacing: .075em; font-weight: 500; }
.level-tag { border-color: #829c8970; color: #c8ddcc; background: #a6bd9710; }
.role-switch { background: #091714b3; border-color: #54605766; padding: 5px; }
.role-switch button { padding: 9px 8px; transition: background .2s, color .2s; }
.role-switch button.active { background: linear-gradient(135deg, #45584a, #2c4037); color: #f6f2e6; }
.character-stage {
  --stage-paper: #d9dfd2;
  --stage-mid: #a2b6a4;
  --stage-edge: #526f60;
  --stage-arch: #e1c79155;
  height: 540px;
  margin-top: 18px;
  background: radial-gradient(ellipse at 50% 33%, var(--stage-paper) 0, var(--stage-mid) 36%, var(--stage-edge) 105%);
  border-top: 1px solid #d3d6b92e;
  border-bottom: 1px solid #d3d6b927;
}
body[data-role="female"] .character-stage {
  --stage-paper: #f8f6ed;
  --stage-mid: #e5ece0;
  --stage-edge: #abbfaf;
  --stage-arch: #88724639;
  background: radial-gradient(ellipse at 49% 34%, var(--stage-paper) 0, var(--stage-mid) 42%, var(--stage-edge) 115%);
}
body[data-role="male"] .character-stage {
  --stage-paper: #819a76;
  --stage-mid: #48664c;
  --stage-edge: #162e25;
  --stage-arch: #dec89a47;
  background: radial-gradient(ellipse at 49% 34%, var(--stage-paper) 0, var(--stage-mid) 43%, var(--stage-edge) 105%);
}
.character-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 13% 51%, #ffffff17, transparent 33%),
    radial-gradient(ellipse at 92% 63%, #71816b18, transparent 28%),
    linear-gradient(110deg, transparent 19%, #ffffff09 20%, transparent 21%, transparent 63%, #fff8de0c 64%, transparent 65%);
}
.portal,
body[data-role="female"] .portal,
body[data-role="male"] .portal {
  top: 29px;
  width: min(352px, 86%);
  height: 460px;
  border: 1px solid var(--stage-arch);
  border-bottom-color: transparent;
  border-radius: 48% 48% 5% 5%;
  box-shadow: none;
}
.portal::before {
  inset: 12px;
  border: 1px solid var(--stage-arch);
  border-bottom-color: transparent;
  border-radius: inherit;
  opacity: .5;
}
.portal::after { display: none; }
.orbital { display: none; }
.character-sprite {
  top: 14px;
  height: 516px;
  width: 172px;
  filter: drop-shadow(0 8px 8px #213c2d22);
}
.wardrobe-layer { filter: none; }
.orbit-view {
  top: 14px;
  height: 516px;
  width: 258px;
  filter: drop-shadow(0 8px 8px #213c2d22);
}
.stage-floor {
  bottom: 6px;
  width: 230px;
  height: 26px;
  border: 0;
  background: radial-gradient(ellipse, #35594230 0, #55725b12 45%, transparent 75%);
}
body[data-role="male"] .stage-floor { background: radial-gradient(ellipse, #081f1655, transparent 72%); }
.gear-pin { width: 38px; height: 38px; border-color: color-mix(in srgb, var(--rarity) 65%, #a39169); background-color: #152b26dc; box-shadow: 0 2px 10px #2437281c; }
.gear-pin:nth-child(1) { left: 10%; }
.gear-pin:nth-child(2) { right: 10%; }
.gear-pin:nth-child(3) { left: 7%; }
.gear-pin:nth-child(4) { right: 7%; }
.mount-companion { right: 14px; bottom: 24px; color: #385847; text-shadow: 0 1px 1px #f4f6e9bb; }
body[data-role="male"] .mount-companion { color: #e4ebcb; text-shadow: 0 1px 2px #173b26; }
.mount-companion .item-art { filter: drop-shadow(0 3px 6px #183b2726); }
.preview-label,
body[data-role="female"] .preview-label,
body[data-role="male"] .preview-label {
  bottom: 8px;
  background: #172c25ed;
  border-color: #d6c296a3;
  color: #efe9d6;
  font-size: 11px;
  padding: 3px 12px;
  box-shadow: 0 2px 8px #14291d24;
}
.character-caption { padding-top: 19px; padding-bottom: 15px; gap: 15px; }
.character-caption h2 { font-size: 25px; font-weight: 500; letter-spacing: .14em; }
.character-caption p { color: #b9c6bf; margin-top: 3px; }
.character-caption > .text-button { flex: 0 0 auto; }
/* The face close-up remains visible before opening the full portrait. */
.portrait-button {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  margin: 9px 0 0;
  border: 1px solid #8f815866;
  border-radius: 8px;
  background: linear-gradient(130deg, #f0d6a30e, #f0d6a305);
  color: #ead6ae;
  padding: 5px 12px 5px 5px;
  font-size: 12px;
  letter-spacing: .06em;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.portrait-thumbnail {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border: 1px solid #d4cca78c;
  border-radius: 5px;
  background: #e8eddf;
}
.portrait-thumbnail img {
  position: absolute;
  top: -18px;
  left: -28px;
  display: block;
  width: 112px;
  height: auto;
  max-width: none;
}
.portrait-button-label { white-space: nowrap; }
.portrait-button-label::after { content: " ›"; font-size: 17px; color: #c4b184; }
.portrait-button:hover { border-color: #cfb77c; background: #f0d6a315; }
.portrait-button:focus-visible { outline-color: #e5c78b; }
.orbit-controls { padding-bottom: 19px; }
.orbit-modes { background: #091714a6; border-color: #52615380; }
.orbit-mode-button[aria-pressed="true"] { background: #344d41; color: #f4f3e8; }
.orbit-angle-range { accent-color: #afc6ac; }
.orbit-angle-label { color: #d5decc; }
.orbit-explainer { color: #aebcb6; }
.orbit-auto-button { color: #e5cf9e; border-color: #a08c5f70; }
.loadout-summary { background: #0a181b94; border-color: #4c5d4c55; color: #b2c1b8; line-height: 1.65; padding-top: 13px; padding-bottom: 13px; }
.loadout-summary b { color: #ececd9; font-size: 14px; }
.equipped-slots { gap: 7px; padding-top: 17px; padding-bottom: 24px; }
.slot-button {
  border: 1px solid #59635369;
  border-radius: 6px;
  background: linear-gradient(145deg, #293b338c, #0c1d1b);
  box-shadow: inset 0 1px 0 #e3d5b00c;
  padding: 4px;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.slot-button .item-art { opacity: .39; }
.slot-button.owned { border-color: color-mix(in srgb, var(--rarity) 58%, #797957); background: linear-gradient(140deg, color-mix(in srgb, var(--rarity) 11%, #243b30), #101f1b); }
.slot-button.owned .item-art { opacity: 1; filter: drop-shadow(0 2px 3px #0004); }
.slot-button:hover { border-color: #d2bf93; background: #344735; box-shadow: inset 0 0 0 1px #d5c49b24; }
.slot-button:hover .item-art { opacity: .8; }
.slot-button.owned:hover .item-art { opacity: 1; }
.slot-button:focus-visible { outline-color: #e6c68a; outline-offset: 3px; }
.question-panel { padding-top: 25px; padding-bottom: 24px; }
.question-panel h2 { color: #f0f0e7; font-weight: 500; }
.answer-button { background: #0d2020; border-color: #52655880; border-radius: 7px; }
.answer-button:hover:not(:disabled) { background: #284739; border-color: #b2c5a2; }
.answer-letter { color: #b0bcac; }
.inventory-panel { padding: 26px; }
.inventory-top h2 { font-weight: 500; letter-spacing: .025em; }
.inventory-toolbar { border-color: #57674c66; }
.secondary-button { background: #293f34; border-color: #66745780; color: #e0e4d3; border-radius: 6px; }
.secondary-button:hover { background: #344d3e; border-color: #b2c195; }
.filter-button.active { border-color: #7d8b638f; background: #344535; color: #f3eddd; }
select { background: #12261f; border-color: #66745788; color: #d2dbca; }
.inventory-grid { gap: 13px; scrollbar-color: #71846d #12221f; }
.item-card {
  border-color: color-mix(in srgb, var(--rarity) 38%, #53634c);
  background: linear-gradient(145deg, color-mix(in srgb, var(--rarity) 6%, #24382d), #101f1c);
  border-radius: 8px;
  padding-top: 14px;
  padding-bottom: 13px;
  box-shadow: inset 0 1px 0 #efdfb00a;
  transition: border-color .16s, box-shadow .16s, background .16s, transform .16s;
}
.item-card b { font-weight: 400; line-height: 1.65; color: #f0eee0; }
.item-card small { font-size: 11px; letter-spacing: .03em; }
.item-card .item-art { margin-bottom: 10px; filter: drop-shadow(0 3px 4px #0003); }
.item-card.locked { opacity: 1; border-color: #65725761; background: linear-gradient(145deg, #26372c70, #101f1c); }
.item-card.locked .item-art { opacity: .39; }
.item-card.locked b { color: #aeb9a8; }
.item-card.locked small { color: #94a18f; }
.item-card:hover { transform: translateY(-2px); background: #304b38; border-color: #d4c193; box-shadow: 0 5px 12px #0003, inset 0 0 0 1px #ddcca31f; }
.item-card.locked:hover .item-art { opacity: .75; }
.item-card:focus-visible { outline-color: #e6c68a; }
.item-card.locked:focus-visible .item-art { opacity: 1; }
.empty-inventory { min-height: 190px; color: #aebdaf; }
.empty-inventory b { color: #e4e6d7; font-weight: 400; }
footer { color: #9aa79e; }
footer b { color: #cccfbe; }
/* Larger identity portrait, separate from the full-body equipment viewer. */
.portrait-dialog {
  width: min(690px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid #ba9e68;
  border-radius: 15px;
  background: #edf0e7;
  color: #344d3b;
  box-shadow: 0 25px 100px #0009, inset 0 0 0 5px #fff8;
}
.portrait-dialog::backdrop { background: #05120be0; backdrop-filter: blur(9px); }
.portrait-heading { position: relative; padding: 24px 66px 16px 28px; border-bottom: 1px solid #a898722e; }
.portrait-heading .eyebrow { color: #8e7950; font-size: 10px; letter-spacing: .22em; margin-bottom: 6px; }
.portrait-heading h2 { color: #3e5543; font-size: 22px; font-weight: 400; letter-spacing: .12em; line-height: 1.45; }
.portrait-heading p { color: #798575; font-size: 12px; margin-top: 7px; }
.portrait-close {
  position: absolute;
  top: 21px;
  right: 21px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #a4966c6b;
  border-radius: 50%;
  background: #fffffc9e;
  color: #5d6a52;
  font-size: 24px;
  line-height: 1;
}
.portrait-close:hover { border-color: #8f8058; background: #fffdf4; }
.portrait-close:focus-visible { outline-color: #607d5f; }
.portrait-frame { margin: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 34%, #fbfcf8, #e4e9de 72%, #c7d6c5); }
.portrait-art { display: block; max-width: 100%; height: min(72dvh, 820px); width: auto; object-fit: contain; filter: drop-shadow(0 3px 5px #58634915); }
.portrait-note { text-align: center; padding: 12px 20px 14px; font-size: 12px; color: #73806b; letter-spacing: .05em; border-top: 1px solid #9d9a6c26; }
@media (max-width: 1100px) {
  .workspace { gap: 18px; }
  .gear-pin:nth-child(1) { left: 7%; }
  .gear-pin:nth-child(2) { right: 7%; }
  .gear-pin:nth-child(3) { left: 4%; }
  .gear-pin:nth-child(4) { right: 4%; }
  .character-caption { gap: 10px; }
  .character-caption h2 { font-size: 23px; }
  .equipped-slots { gap: 6px; }
}
@media (max-width: 760px) {
  main { padding-top: 16px; }
  .workspace { gap: 17px; }
  .character-panel .panel-top { padding: 22px 20px 15px; }
  .character-panel h1 { font-size: 19px; }
  .role-switch { margin-right: 20px; margin-left: 20px; }
  .character-stage { height: 448px; margin-top: 16px; }
  .portal, body[data-role="female"] .portal, body[data-role="male"] .portal { height: 376px; width: min(284px, 86%); top: 27px; }
  .character-sprite { top: 12px; height: 432px; width: 144px; }
  .orbit-view { top: 12px; height: 432px; width: 216px; }
  .stage-floor { width: 190px; bottom: 3px; height: 22px; }
  .character-caption { padding: 17px 21px 15px; }
  .character-caption h2 { font-size: 24px; }
  .character-caption p { font-size: 12px; }
  .portrait-button { padding: 5px 10px 5px 5px; gap: 9px; font-size: 12px; }
  .orbit-controls { padding-bottom: 18px; }
  .loadout-summary { padding-right: 20px; padding-left: 20px; font-size: 11px; }
  .loadout-summary b { font-size: 13px; }
  .equipped-slots { gap: 5px; padding-right: 20px; padding-left: 20px; padding-bottom: 21px; }
  .slot-button { padding: 3px; }
  .question-panel { padding: 20px; }
  .inventory-panel { padding: 21px 19px; }
  .inventory-grid { gap: 9px; }
  .item-card { padding: 12px 5px; }
  .item-card b { font-size: 12px; }
  .item-card small { font-size: 10px; }
  .mount-companion { width: 80px; right: 5px; bottom: 23px; font-size: 10px; }
  .mount-companion .item-art { width: 80px; height: 76px; }
  .gear-pin { width: 31px; height: 31px; }
  .portrait-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .portrait-heading { padding: 20px 58px 14px 21px; }
  .portrait-heading h2 { font-size: 20px; letter-spacing: .08em; }
  .portrait-close { top: 17px; right: 16px; width: 32px; height: 32px; }
  .portrait-art { height: auto; width: 100%; max-height: 70dvh; object-fit: contain; }
  .portrait-note { font-size: 11px; padding: 11px 12px; }
}
@media (max-width: 370px) {
  .character-panel .panel-top { padding-right: 16px; padding-left: 16px; }
  .character-panel h1 { font-size: 17px; }
  .level-tag { font-size: 11px; padding: 3px 8px; }
  .role-switch { margin-left: 16px; margin-right: 16px; }
  .role-switch button { font-size: 12px; padding-right: 4px; padding-left: 4px; }
  .character-stage { height: 438px; }
  .character-sprite { height: 422px; width: 140.6667px; }
  .orbit-view { height: 422px; width: 211px; }
  .portal, body[data-role="female"] .portal, body[data-role="male"] .portal { height: 365px; width: 252px; }
  .character-caption { padding-right: 17px; padding-left: 17px; }
  .character-caption h2 { font-size: 22px; }
  .character-caption > .text-button { font-size: 12px; }
  .loadout-summary { flex-wrap: wrap; gap: 4px 9px; padding-right: 16px; padding-left: 16px; }
  .equipped-slots { gap: 4px; padding-right: 15px; padding-left: 15px; }
  .slot-button { padding: 2px; }
  .inventory-panel { padding: 20px 15px; }
  .inventory-grid { gap: 7px; }
  .item-card b { font-size: 11px; }
  .item-card .item-art { width: 69px; height: 67px; }
}
@media (prefers-reduced-motion: reduce) {
  .role-switch button, .portrait-button, .slot-button, .item-card { transition: none; }
  .item-card:hover { transform: none; }
}

/* ── v16：寶物卡＝收藏品（箔面、卡框、翻出、隨滑鼠微傾）── */
.reward-dialog { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out; border-width: 2px; border-color: color-mix(in srgb, var(--rarity) 65%, #e8d6a8); box-shadow: 0 0 100px #000b, 0 0 0 1px color-mix(in srgb, var(--rarity) 35%, transparent), 0 0 44px color-mix(in srgb, var(--rarity) 30%, transparent), inset 0 0 0 1px #ffffff14, inset 0 0 60px color-mix(in srgb, var(--rarity) 10%, transparent); }
.reward-dialog.card-in { animation: card-in .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes card-in { 0% { transform: perspective(1100px) rotateY(-70deg) scale(.86); opacity: 0; } 55% { transform: perspective(1100px) rotateY(10deg) scale(1.02); opacity: 1; } 100% { transform: perspective(1100px) rotateY(0deg) scale(1); } }
.reward-dialog .reward-foil { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, transparent 0%, transparent calc(var(--foil-x, 50%) - 22%), #ffffff22 calc(var(--foil-x, 50%) - 6%), color-mix(in srgb, var(--rarity) 55%, #fff) var(--foil-x, 50%), #ffffff22 calc(var(--foil-x, 50%) + 6%), transparent calc(var(--foil-x, 50%) + 22%), transparent 100%); opacity: .22; mix-blend-mode: screen; transition: opacity .3s; }
@property --foil-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
.reward-dialog.foil-run .reward-foil { animation: foil-sweep 2.2s ease-in-out .5s 1; }
@keyframes foil-sweep { 0% { --foil-x: -20%; opacity: .05; } 50% { opacity: .35; } 100% { --foil-x: 120%; opacity: .22; } }
.reward-dialog[data-rarity="4"], .reward-dialog[data-rarity="5"] { box-shadow: 0 0 120px #000b, 0 0 0 2px color-mix(in srgb, var(--rarity) 70%, #fff), 0 0 70px color-mix(in srgb, var(--rarity) 45%, transparent), inset 0 0 0 1px #ffffff22, inset 0 0 80px color-mix(in srgb, var(--rarity) 16%, transparent); }
.reward-dialog .rarity-label { position: relative; z-index: 1; letter-spacing: .2em; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .reward-dialog, .reward-dialog.card-in, .reward-dialog.foil-run .reward-foil { animation: none !important; transform: none !important; transition: none !important; } }