/* Relic and reward sheets: illustrated inventory objects, readable effects,
   and one clear choice. Card reveal geometry and ownership hooks stay intact. */
svg.relic-object-art { display: block; width: 100%; height: 100%; max-width: 128px; max-height: 128px; overflow: visible; }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-options { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; width: 100%; align-content: start; }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice {
 display: grid; grid-template-columns: 68px minmax(0,1fr); grid-template-rows: auto auto; align-items: center;
 gap: 5px 14px; min-width: 0; min-height: 96px; padding: 14px; text-align: left;
 border: 1px solid color-mix(in srgb,var(--pm-ui-line) 65%,transparent); border-radius: 22px;
 background: var(--pm-ui-surface); color: var(--pm-ui-text); box-shadow: 0 4px 14px var(--pm-ui-shadow);
}
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > span {
 grid-column: 1; grid-row: 1 / 5; width: 68px; height: 76px; display: grid; place-items: center; color: var(--pm-ui-muted);
 background: radial-gradient(ellipse,var(--pm-ui-surface-raised),transparent 72%); border-radius: 18px;
}
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > span > :is(img,svg) { width: 100%; height: 100%; object-fit: contain; max-width: 76px; max-height: 76px; }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > strong { grid-column: 2; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--pm-ui-text); }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > small { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--pm-ui-muted); }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > :is(b,.relic-build-fit) { grid-column: 2; font-size: 13px; line-height: 1.4; color: var(--pm-ui-text); }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice.selected {
 background: color-mix(in srgb,var(--pm-ui-accent) 10%,var(--pm-ui-surface)); border-color: var(--pm-ui-accent);
 box-shadow: inset 3px 0 var(--pm-ui-accent),0 4px 14px var(--pm-ui-shadow);
}
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice:focus-visible { outline: 2px solid var(--pm-ui-focus); outline-offset: 3px; }
.pack-experience.reward-view-relics .pack-heading { align-items: flex-start; text-align: left; }
.pack-experience.reward-view-relics .pack-heading > h2 { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; color: var(--pm-ui-text); }
.pack-experience.reward-view-relics .pack-relics { align-self: start; padding: 0; border: 0; background: transparent; box-shadow: none; }
.pack-experience.reward-view-relics .journey-choice-note { color: var(--pm-ui-muted); font-size: 14px; line-height: 1.45; }
.pack-experience .reward-step-navigation { padding: 4px; border: 0; border-radius: 999px; background: var(--pm-ui-surface-raised); gap: 4px; }
.pack-experience .reward-step-navigation .reward-step { border: 0; min-height: 44px; border-radius: 999px; background: transparent; box-shadow: none; color: var(--pm-ui-muted); }
.pack-experience .reward-step-navigation .reward-step[aria-pressed=true] { background: var(--pm-ui-surface); color: var(--pm-ui-text); box-shadow: 0 2px 7px var(--pm-ui-shadow); }
.exp-modal:is(.modal-relic,.modal-shrine,.modal-relics) { background: var(--pm-ui-surface-soft); border: 0; border-radius: 28px; }
.exp-modal:is(.modal-relic,.modal-shrine,.modal-relics) :is(h2,.ship-relic-heading h2) { font-size: 24px; font-weight: 650; letter-spacing: -.025em; color: var(--pm-ui-text); }
.exp-modal:is(.modal-relic,.modal-shrine,.modal-relics) :is(p,.ship-relic-heading p) { color: var(--pm-ui-muted); font-size: 14px; line-height: 1.45; }
.exp-modal:is(.modal-relic,.modal-shrine,.modal-relics) .exp-screen-footer .exp-button { min-height: 44px; border-radius: 999px; }
.exp-modal:is(.modal-relic,.modal-shrine,.modal-relics) .ship-relic-scroll { width: 100%; min-height: 0; }
.exp-modal:is(.modal-relic,.modal-shrine) .shrine-care { background: transparent; border: 0; text-align: left; }
.exp-modal:is(.modal-relic,.modal-shrine) .shrine-care > summary { min-height: 44px; display: flex; align-items: center; color: var(--pm-ui-text); font-size: 14px; }
@media (max-height:500px) and (orientation:landscape) {
 :is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice { grid-template-columns: 52px minmax(0,1fr); padding: 10px 12px; gap: 4px 10px; min-height: 76px; }
 :is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > span { width: 52px; height: 60px; }
 :is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice > small { font-size: 13px; }
 .pack-experience.reward-view-relics .pack-heading > h2 { font-size: 21px; }
}

/* Relic review is a content-sized decision sheet, not a full-height pack stage. */
.exp-overlay.pack-overlay-focus:has(.reward-view-relics) { padding: 16px; align-items: center; background: var(--pm-ui-scrim); }
.exp-overlay.pack-overlay-focus .exp-modal:has(.reward-view-relics) {
 width: min(100%,560px); height: auto; min-height: 0; max-height: calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 flex: none; padding: 28px 16px 16px; border-radius: 28px; background: var(--pm-ui-surface-soft);
 box-shadow: 0 16px 48px var(--pm-ui-shadow); overflow: hidden; align-self: center;
}
.exp-overlay.pack-overlay-focus .exp-modal > .pack-experience.reward-view-relics {
 display: flex; flex-direction: column; flex: 0 1 auto; height: auto; min-height: 0; max-height: 100%;
 padding: 0; gap: 14px; overflow-y: auto; overscroll-behavior: contain;
}
.exp-modal .pack-experience.reward-view-relics > * { flex-shrink: 0; }
.exp-modal .pack-experience.reward-view-relics > .pack-primary { position: sticky; bottom: 0; width: 100%; margin-top: 2px; box-shadow: 0 -6px 10px var(--pm-ui-surface-soft); }
.exp-modal .pack-experience.reward-view-relics .pack-relics { padding: 0; width: 100%; }
@media (max-height:500px) and (orientation:landscape) {
 .exp-overlay.pack-overlay-focus .exp-modal > .pack-experience.reward-view-relics { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(240px,1.3fr); gap: 10px 16px; }
 .exp-modal .pack-experience.reward-view-relics > .pack-heading { grid-column: 1; grid-row: 1; }
 .exp-modal .pack-experience.reward-view-relics > .reward-step-navigation { grid-column: 1; grid-row: 2; }
 .exp-modal .pack-experience.reward-view-relics > .pack-primary { grid-column: 1; grid-row: 3; position: static; }
 .exp-modal .pack-experience.reward-view-relics > .pack-relics { grid-column: 2; grid-row: 1 / 5; }
 .exp-overlay.pack-overlay-focus .exp-modal:has(.reward-view-relics) { width: min(100%,720px); padding-top: 24px; }
}

@media(max-width:359px){
 .shell .exp-modal:has(.reward-view-relics) .exp-relic-choice{grid-template-columns:42px minmax(0,1fr);gap:4px 9px;padding:10px;min-height:76px}
 .shell .exp-modal:has(.reward-view-relics) .exp-relic-choice>span{width:42px;height:54px}
 .shell .exp-modal:has(.reward-view-relics) .exp-relic-choice>strong{font-size:14px}
 .shell .exp-modal:has(.reward-view-relics) .exp-relic-choice>small{font-size:13px;line-height:1.35}
 .shell .exp-modal:has(.reward-view-relics) .pack-heading>h2{font-size:21px}
}

/* A single flowing copy column prevents legacy grid rows from stacking bonus
   text over rules. Art has its own bounded column at every stop/reward. */
.shell .exp-modal .exp-relic-options .exp-relic-choice {
 display:grid; grid-template-columns:88px minmax(0,1fr); grid-template-rows:auto;
 align-items:center; gap:16px; padding:16px 12px; width:100%; min-width:0; height:auto;
 text-align:left; white-space:normal; box-sizing:border-box;
}
.shell .exp-modal .exp-relic-options .exp-relic-choice > .relic-illustration {
 grid-column:1; grid-row:1; width:88px; height:104px; min-width:0; min-height:0;
 align-self:center; overflow:hidden; background:none; border-radius:0;
}
.shell .exp-modal .exp-relic-options .exp-relic-choice > .relic-illustration > :is(img,svg) {
 display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain;
}
.shell .exp-modal .exp-relic-options .exp-relic-choice > .relic-copy {
 grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:stretch;
 gap:8px; width:auto; height:auto; min-width:0; min-height:0; background:none;
 border-radius:0; color:var(--pm-ui-text); overflow-wrap:anywhere;
}
.shell .exp-modal .exp-relic-options .exp-relic-choice .relic-copy > * { margin:0; width:auto; height:auto; }
.shell .exp-modal .exp-relic-options .exp-relic-choice .relic-copy > strong { font-size:17px; line-height:1.3; color:var(--pm-ui-text); }
.shell .exp-modal .exp-relic-options .exp-relic-choice .relic-copy > small { font-size:14px; line-height:1.5; color:var(--pm-ui-muted); }
.shell .exp-modal .exp-relic-options .exp-relic-choice .relic-copy > .relic-build-fit {
 padding:8px 10px; color:var(--pm-ui-text)!important;
 background:var(--pm-ui-surface-raised); border-left:3px solid var(--pm-ui-accent); border-radius:8px;
 font-size:12px; line-height:1.45;
}
.shell .exp-modal .exp-relic-options .exp-relic-choice .relic-copy > b { font-size:13px; line-height:1.4; color:var(--pm-ui-text); }
@media(max-width:420px){
 .shell .exp-modal .exp-relic-options .exp-relic-choice { grid-template-columns:minmax(0,1fr); gap:12px; padding:12px 6px; }
 .shell .exp-modal .exp-relic-options .exp-relic-choice > .relic-illustration { grid-column:1; grid-row:1; width:112px; height:112px; justify-self:center; }
 .shell .exp-modal .exp-relic-options .exp-relic-choice > .relic-copy { grid-column:1; grid-row:2; text-align:left; }
}