/* Progressive detail controls only on playable cards; historical portraits stay unchanged. */
#charaktere .character-card[data-details-hint] { position:relative; -webkit-touch-callout:none; }
#charaktere .character-card[data-details-hint]::after { content:attr(data-details-hint); position:absolute; top:.6rem; left:.6rem; right:.6rem; padding:.45rem .55rem; border-radius:.5rem; background:#12142b; color:#f4f7ff; font-size:.7rem; line-height:1.4; text-align:center; pointer-events:none; opacity:0; transition:opacity 120ms; }
#charaktere .character-card[data-details-hint]:focus-visible::after { opacity:1; }
@media (hover:hover) { #charaktere .character-card[data-details-hint]:hover::after { opacity:1; } }
.landing-opponent-dialog { box-sizing:border-box; width:min(880px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #6c6793; border-radius:24px; background:#171731; color:#f4f7ff; box-shadow:0 24px 90px #0009; overflow:hidden; }
.landing-opponent-dialog::backdrop { background:#050818cc; }
.landing-opponent-dialog [hidden] { display:none!important; }
.landing-opponent-shell { position:relative; display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:16px 26px; padding:28px; max-height:calc(100dvh - 34px); box-sizing:border-box; }
.landing-opponent-close { position:absolute; z-index:1; right:8px; top:8px; width:44px; height:44px; min-height:44px; border:0; border-radius:50%; background:#242443; color:#f4f7ff; font:inherit; font-size:32px; line-height:1; cursor:pointer; }
.landing-opponent-portrait { grid-column:1; grid-row:1/4; display:block; width:100%; height:auto; max-height:100%; aspect-ratio:1; object-fit:contain; align-self:center; border-radius:18px; background:#0d0e23; }
.landing-opponent-head { grid-column:2; min-width:0; padding-right:28px; }
.landing-opponent-kicker { margin:0 0 8px; color:#aaa4d7; font-size:.68rem; font-weight:700; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.landing-opponent-head h2 { margin:0; font-size:clamp(1.4rem,3vw,2rem); line-height:1.2; overflow-wrap:normal; word-break:normal; hyphens:none; }
.landing-opponent-meta { margin:8px 0 0; color:#d9d8ed; font-size:.78rem; line-height:1.45; }
.landing-opponent-body { grid-column:2; min-height:0; max-height:310px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#8577ad transparent; padding:0 4px 0 0; color:#f0eff8; font-size:.91rem; line-height:1.6; }
.landing-opponent-field + .landing-opponent-field { margin-top:16px; }
.landing-opponent-field h3 { margin:0 0 4px; font:700 .74rem/1.4 "Avenir Next",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#b4ace2; }
.landing-opponent-field p, .landing-opponent-body>p { margin:0; }
.landing-opponent-actions { grid-column:2; display:grid; gap:10px; }
.landing-opponent-actions .button { min-height:44px; white-space:normal; text-align:center; font-size:.84rem; }
.landing-opponent-difficulty { margin:0; color:#d9d8ed; font-size:.74rem; line-height:1.45; }
.landing-opponent-dialog :is(button,a):focus-visible, .landing-opponent-body:focus-visible { outline:2px solid #8bd2ff; outline-offset:2px; }
.landing-opponent-head h2:focus { outline:none; }
@media(max-width:600px) {
  .landing-opponent-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:18px; }
  .landing-opponent-shell { grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:14px; padding:18px; max-height:calc(100dvh - 22px); }
  .landing-opponent-portrait { grid-column:1; grid-row:1; align-self:start; }
  .landing-opponent-head { padding-right:22px; }
  .landing-opponent-head h2 { font-size:1.3rem; }
  .landing-opponent-kicker { font-size:.6rem; margin-bottom:6px; }
  .landing-opponent-meta { font-size:.7rem; margin-top:6px; }
  .landing-opponent-body, .landing-opponent-actions { grid-column:1/3; }
  .landing-opponent-body { font-size:.87rem; max-height:320px; line-height:1.55; }
  .landing-opponent-field + .landing-opponent-field { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) { #charaktere .character-card[data-details-hint]::after { transition:none; } }