/* The circle chooses a companion. It never pretends to turn a flat portrait in 3D. */
.heroes-dialog{width:820px;max-width:min(820px,calc(100vw - 28px))}.heroes-dialog .sheet-heading{margin-bottom:4px}.heroes-dialog .sheet-heading h2{margin-bottom:8px}.heroes-dialog .sheet-heading p:last-child{margin:8px 0;font-size:var(--ag-body2-size);line-height:var(--ag-body2-line)}
#hero-roster.companion-ring{display:block;margin:0}.companion-orbit{height:390px;position:relative;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}.companion-orbit-ground{position:absolute;left:12%;right:12%;top:38%;height:40%;border:1px solid #5a8eae55;border-radius:50%;background:radial-gradient(ellipse,#1f7c9520,transparent 70%);box-shadow:0 0 40px #2b7ba80f}.companion-orbit-ground::after{content:"";position:absolute;inset:18%;border:1px dashed #78b8cc35;border-radius:50%}
#hero-roster .companion-card{position:absolute;left:calc(50% + var(--ring-x));top:calc(42% + var(--ring-y));transform:translate(-50%,-50%);width:156px;min-height:48px;padding:0 4px 5px;border:0;background:transparent;box-shadow:none;display:flex;align-items:center;flex-direction:column;gap:0;transition:left .24s ease-out,top .24s ease-out;overflow:visible}
#hero-roster .companion-card::after{content:"";position:absolute;bottom:28px;left:20%;right:20%;height:13px;background:#02071275;border-radius:50%;z-index:-1}#hero-roster .companion-card[data-selected=true]::after{border:1px solid #5bcfe7;box-shadow:0 0 25px #37b8dd55}
.companion-art{width:calc(190px * var(--ring-scale));height:calc(185px * var(--ring-scale));position:relative;display:grid;place-items:center;filter:drop-shadow(0 5px 6px #0008)}#hero-roster .companion-art img{width:100%;height:100%;object-fit:contain;max-width:none;opacity:.74}#hero-roster .companion-card[data-selected=true] .companion-art img{opacity:1}.companion-selected-idle{width:calc(240px * var(--ring-scale));height:calc(199px * var(--ring-scale));position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
#hero-roster .companion-card [hidden]{display:none!important}.companion-label{font-family:var(--ag-font-sans);font-size:var(--ag-caption-size);line-height:var(--ag-caption-line);padding:5px 10px;border-radius:var(--ag-control-radius);background:#081320dd;border:1px solid #6f879b55;white-space:nowrap;color:var(--ag-ui-text)}.companion-card[data-selected=true] .companion-label{font-size:var(--ag-h4-size);line-height:var(--ag-h4-line);font-weight:500;border-color:var(--ag-ui-accent);background:#143447}
.companion-ring-controls{display:flex;align-items:center;justify-content:center;gap:16px}#hero-roster .companion-step{min-height:48px;min-width:88px;width:auto;height:48px;display:inline-flex;flex-direction:row;justify-content:center;padding:8px 16px;border-radius:var(--ag-control-radius);font-size:var(--ag-body2-size);line-height:var(--ag-body2-line)}.companion-position{font-size:var(--ag-caption-size);line-height:var(--ag-caption-line);color:var(--ag-ui-secondary);font-variant-numeric:tabular-nums}.heroes-dialog .companion-ring-hint,.heroes-dialog .companion-motion-note{margin:8px 0;text-align:center;font-size:var(--ag-caption-size);line-height:var(--ag-caption-line);color:var(--ag-ui-secondary)}.hero-detail{grid-template-columns:1fr;padding:14px 0}.hero-detail>img{display:none}.hero-detail h3{margin:0}.hero-detail p{line-height:var(--ag-body2-line)}.guardian-picker-cue{font-size:var(--ag-caption-size);line-height:var(--ag-caption-line);color:#caedf6}
@media(max-width:700px){.heroes-dialog{padding:24px 16px;max-width:calc(100vw - 20px)}.companion-orbit{height:320px}.companion-art{width:calc(144px * var(--ring-scale));height:calc(146px * var(--ring-scale))}.companion-selected-idle{width:calc(200px * var(--ring-scale));height:calc(166px * var(--ring-scale))}#hero-roster .companion-card{width:118px;top:calc(40% + var(--ring-y)*.8)}.companion-card[data-selected=true] .companion-label{font-size:var(--ag-body1-size);line-height:var(--ag-body1-line)}.companion-label{padding:5px 6px}.companion-ring-controls{gap:10px}#hero-roster .companion-step{padding:8px 12px}.hero-actions{flex-wrap:wrap}.hero-actions>.button{min-width:150px}.guardian-picker-cue{font-size:12px}}
@media(prefers-reduced-motion:reduce){#hero-roster .companion-card{transition:none}}[data-reduced-motion=true] #hero-roster .companion-card{transition:none}
/* The ring reserves the visible nameplate for its frontmost companion; every
   portrait retains a full accessible selection name and keyboard access. */
#hero-roster .companion-card:not([data-selected=true]) .companion-label{visibility:hidden}

/* Visible-art calibration: selected idle is fitted by its measured bounds and
   foot pivot; static portraits use their exact alpha viewBox, not full image size. */
.companion-orbit{--ring-selected-w:240px;--ring-selected-h:210px;height:380px}
#hero-roster .companion-card{top:calc(35% + var(--ring-y));width:130px}
.companion-art{width:calc(200px * var(--ring-scale));height:calc(200px * var(--ring-scale))}
#hero-roster .companion-art img{display:none!important}
.companion-portrait{width:100%;height:100%;overflow:visible;opacity:.72}
.companion-card[data-selected=true] .companion-portrait{opacity:1}
.companion-selected-idle{width:var(--idle-width,260px);height:calc(var(--idle-width,260px) * .8285714286);bottom:calc(var(--idle-width,260px) * var(--idle-foot-bottom,0));left:50%;transform:translateX(-50%)}
@media(max-width:700px){.companion-orbit{--ring-selected-w:210px;--ring-selected-h:180px;height:320px}#hero-roster .companion-card{width:102px;top:calc(40% + var(--ring-y)*.8)}.companion-art{width:calc(170px * var(--ring-scale));height:calc(168px * var(--ring-scale))}}
/* Keep both the hit area and visible silhouette inside the dialog's breathing room. */
#hero-roster .companion-card{--ring-half-card:69px;left:clamp(var(--ring-half-card),calc(50% + var(--ring-x)),calc(100% - var(--ring-half-card)))}
@media(max-width:700px){#hero-roster .companion-card{--ring-half-card:55px}}
/* Transparent atlas padding must not intercept taps on companions behind it. */
.companion-selected-idle{pointer-events:none}
/* Only visible portrait art accepts pointer input; invisible label/card padding
   may overlap the next depth layer but must never steal its tap. */
#hero-roster .companion-card{pointer-events:none}
#hero-roster .companion-card .companion-portrait{pointer-events:auto}

/* Inline companion plaza: one presentation player, no selection overlay.
   Normal document flow preserves game entries when translated text grows. */
.hall{height:auto;min-height:calc(100svh - 66px);display:flex;flex-direction:column;overflow:visible}
.hall-heading{padding-bottom:12px}
.landmarks{position:relative;inset:auto;display:flex;justify-content:center;gap:16px;margin:0 16px 12px}
.portal-deck{position:relative;inset:auto;display:grid;grid-template-columns:minmax(220px,1fr) minmax(430px,1.65fr) minmax(220px,1fr);align-items:center;gap:20px;width:calc(100% - 64px);max-width:1420px;margin:0 auto;pointer-events:auto}
.portal-deck>.portal{width:100%;min-width:0;max-width:none}
.portal-deck>.bifrost{grid-column:1}.portal-deck>.survivor{grid-column:3}
.companion-showcase{grid-column:2;min-width:0;align-self:start;padding:10px 4px 14px;scroll-margin-top:16px}
.showcase-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px}
.showcase-heading h2{font:var(--ag-type-h4)}
.showcase-heading .tier-picker{display:flex;gap:6px;flex:none}
.showcase-heading .tier-picker button{min-width:60px;padding:8px 12px}
.showcase-modes{display:flex;justify-content:center;gap:6px;margin:10px 0 2px;flex-wrap:wrap}
.showcase-modes button{min-height:48px;padding:8px 12px;border-radius:var(--ag-control-radius);font:var(--ag-type-body2)}
.showcase-modes button[aria-pressed=true]{background:#16404e;border-color:var(--ag-ui-accent)}
.companion-showcase .companion-orbit{height:300px;--ring-selected-w:220px;--ring-selected-h:190px}
.companion-showcase #hero-roster .companion-card{top:calc(30% + var(--ring-y)*.78)}
.companion-showcase .companion-art{width:calc(190px * var(--ring-scale));height:calc(180px * var(--ring-scale))}
.companion-showcase .companion-ring-controls{gap:12px}
.companion-showcase .companion-ring-hint,.companion-showcase .companion-motion-note{text-align:center;font:var(--ag-type-caption);color:var(--muted);margin:8px 0}
.companion-showcase .companion-motion-note{min-height:16px}
.showcase-identity{margin:12px 0 6px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.showcase-identity>p{display:flex;flex-direction:column;gap:4px}
.showcase-identity strong{font:var(--ag-type-h4)}
.showcase-identity span,.showcase-source,.showcase-note,.angle-boundary{font:var(--ag-type-caption);color:var(--muted)}
.showcase-source,.showcase-note,.angle-boundary{margin:6px 0;line-height:var(--ag-caption-line)}
.showcase-identity .text-button{min-height:48px;flex:none;padding:8px;display:flex;align-items:center}
.companion-showcase .angle-panel{padding-top:10px}
.companion-showcase .angle-stage{background:radial-gradient(ellipse at 50% 75%,#23413e55,transparent 70%);border:0;margin-top:0}
.companion-showcase .angle-canvas{height:300px}
.companion-showcase .angle-heading{justify-content:center;gap:8px}
.companion-showcase .angle-status{text-align:center}
.companion-showcase .angle-buttons{justify-content:center}
.companion-showcase .angle-hint,.companion-showcase .angle-limit{font:var(--ag-type-caption)!important;margin:8px 0}
.companion-showcase .angle-limit{display:none} /* Same truthful boundary is always visible below both modes. */
.hall-bottom{margin-top:auto;padding-top:18px}
@media(max-width:1100px){
 .portal-deck{grid-template-columns:minmax(190px,1fr) minmax(350px,1.5fr) minmax(190px,1fr);gap:12px;width:calc(100% - 32px)}
 .portal-copy{padding:14px}.portal h2{font:var(--ag-type-h3)}.portal-art{height:100px}
 .portal .button{font:var(--ag-type-body2);padding:8px;min-height:48px}
 .showcase-heading{flex-wrap:wrap;justify-content:center;text-align:center}
 .companion-showcase .companion-orbit{--ring-selected-w:205px;--ring-selected-h:180px}
}
@media(max-width:820px){
 .portal-deck{grid-template-columns:1fr 1fr;gap:14px;max-width:680px}
 .companion-showcase{grid-column:1/-1;grid-row:1;width:min(100%,520px);justify-self:center;padding-top:0}
 .portal-deck>.bifrost{grid-column:1;grid-row:2}.portal-deck>.survivor{grid-column:2;grid-row:2}
 .showcase-heading{flex-wrap:nowrap;justify-content:space-between}
 .portal-art{height:64px}.portal-description{display:none}.portal h2{font:var(--ag-type-h3)}
 .portal-genre,[data-locale=en] .portal-genre{display:block;min-height:32px;font:var(--ag-type-caption)}
 .portal-status,[data-locale=en] .portal-status{min-height:40px;font:var(--ag-type-caption)}
 .portal h2 small{font:var(--ag-type-caption)}
 .hall{height:auto;min-height:calc(100svh - 64px)}
 .hall-heading{padding:16px 16px 8px}.landmarks{display:none}
 .hall-bottom{padding:18px 16px}.hall-dock>a,.hall-dock>button{min-height:54px;font:var(--ag-type-caption)}
}
@media(max-width:450px){
 .portal-deck{width:calc(100% - 24px);gap:12px}
 .showcase-heading{padding:0}.showcase-heading h2{font:var(--ag-type-body1)}
 .showcase-heading .tier-picker button{min-width:54px;padding:8px}
 .showcase-modes{gap:4px}.showcase-modes button{padding:8px;font:var(--ag-type-caption)}
 .companion-showcase .companion-orbit{height:265px;--ring-selected-w:190px;--ring-selected-h:165px}
 .companion-showcase #hero-roster .companion-card{top:calc(31% + var(--ring-y)*.68);--ring-half-card:48px;width:94px}
 .companion-showcase .companion-art{width:calc(150px * var(--ring-scale));height:calc(155px * var(--ring-scale))}
 .companion-showcase .angle-canvas{height:265px}
 .showcase-identity{gap:8px;margin-top:8px}.showcase-identity .text-button{font:var(--ag-type-caption);max-width:130px;text-align:center}
 .showcase-source{max-width:45ch}.showcase-note{margin-bottom:0}
 .portal-copy{padding:10px}.portal h2{font:var(--ag-type-h4)}.portal .button{min-height:56px}
 .hall-heading .text-button{max-width:86px}
}
.mobile-game-shortcuts{display:none}
@media(max-width:820px){
 .mobile-game-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 12px 12px}
 .mobile-game-shortcuts a{min-height:48px;padding:8px 10px;border:1px solid #52888b;border-radius:var(--ag-control-radius);background:#102634dd;display:grid;grid-template-columns:1fr auto;align-content:center;gap:0 8px}
 .mobile-game-shortcuts strong{font:var(--ag-type-body1);grid-column:1}
 .mobile-game-shortcuts span:not(.css-arrow){font:var(--ag-type-caption);color:var(--muted);grid-column:1}
 .mobile-game-shortcuts .css-arrow{grid-column:2;grid-row:1/3;align-self:center;color:var(--accent)}
 .companion-showcase .companion-motion-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
}

/* Authored directions occupy the same frontmost companion slot. The ring and
   its selection buttons remain visible; angle gestures belong to this canvas. */
.companion-angle-canvas{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:264px!important;height:220px!important;pointer-events:auto;touch-action:pan-y;outline-offset:4px}
#hero-roster[data-angle-mode=true] .companion-card[data-selected=true] .companion-portrait{display:none}
.companion-showcase #hall-angle-host .angle-heading{display:none}
@media(max-width:450px){.companion-angle-canvas{width:228px!important;height:190px!important}}

/* Keep the mode controls outside the portrait selection plane. Rear portraits
   extend above their orbit centre, so reserve real space instead of hiding heads
   behind a raised toolbar. The lower stacking context also contains hit targets. */
.companion-showcase .showcase-modes{position:relative;z-index:2;isolation:isolate}
.companion-showcase #hero-roster{position:relative;z-index:1;padding-top:40px}