/* Loose, portrait playing cards. Controls stay outside the moving sheets. */
#app #opponent-screen .opponent-content{padding:22px 100px 38px;scroll-padding:22px 100px 38px;overflow-x:hidden}
#app #opponent-screen .rival-collectible{width:min(350px,100%);padding:0;border:0;background:none;box-shadow:none;display:block;--rival-art-height:clamp(160px,23dvh,220px)}
#app #opponent-screen .rival-collectible::after{content:none}
.rival-pile{position:relative;isolation:isolate}
#app #opponent-screen .rival-sheet{position:relative;z-index:4;display:grid;gap:12px;padding:16px 14px 18px;border:4px solid var(--brand-ink);border-radius:20px 15px 22px 16px;background:var(--rival-paper,#fff2da);box-shadow:inset 0 0 0 5px var(--rival-accent,#ed8a35),0 6px 0 var(--brand-ink),0 12px 18px #03263333;transform:translate(var(--pile-x,0px),var(--pile-y,0px)) rotate(var(--card-tilt,-1.2deg));transform-origin:50% 70%;--rival-accent:#ed8a35;--rival-paper:#fff2da}
/* Broad round corners, square corners and opposite diagonals alternate in the deck. */
#app #opponent-screen .rival-sheet[data-character="classic"]{border-radius:36px;--rival-stage-corners:26px}
#app #opponent-screen .rival-sheet[data-character="sir_return"]{--rival-accent:#647e9a;--rival-paper:#eaf0f8;border-radius:3px;--rival-stage-corners:2px}
#app #opponent-screen .rival-sheet[data-character="joker"]{--rival-accent:#b27dde;--rival-paper:#f4ebff;border-radius:4px 50px 4px 50px;--rival-stage-corners:3px 36px 3px 36px}
#app #opponent-screen .rival-sheet[data-character="goat"]{--rival-accent:#55a89f;--rival-paper:#eaf5ed;border-radius:44px 18px 44px 18px;--rival-stage-corners:32px 12px 32px 12px;outline:1px solid var(--rival-accent);outline-offset:-10px}
#app #opponent-screen .rival-sheet[data-character="bull"]{--rival-accent:#e45a43;--rival-paper:#fff0e8;border-radius:2px 14px 2px 14px;--rival-stage-corners:2px 12px 2px 12px}
#app #opponent-screen .rival-sheet[data-character="white_geisha"]{--rival-accent:#d97fa3;--rival-paper:#fff0f6;border-radius:48px 48px 22px 22px;--rival-stage-corners:36px 36px 12px 12px}
#app #opponent-screen .rival-sheet[data-character="lion"]{--rival-accent:#d8ad36;--rival-paper:#fff5d7;border-radius:46px 4px 46px 4px;--rival-stage-corners:32px 3px 32px 3px}
#app #opponent-screen .rival-sheet[data-character="graefin"]{--rival-accent:#8e66b0;--rival-paper:#f1eaf8;border-radius:12px 2px 12px 2px;--rival-stage-corners:8px 2px 8px 2px}
#app #opponent-screen .rival-sheet[data-character="carrot"]{--rival-accent:#83ac4d;--rival-paper:#f2f7e5;border-radius:52px 8px 8px 52px;--rival-stage-corners:38px 5px 5px 38px}
#app #opponent-screen .rival-sheet[data-character="sirena"]{--rival-accent:#42a9be;--rival-paper:#e8f8fc;border-radius:10px 40px 48px 10px;--rival-stage-corners:6px 28px 36px 6px}
#app #opponent-screen .rival-underlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#app #opponent-screen .rival-leaving{z-index:6}
#app #opponent-screen .fighter{grid-template-rows:auto auto;gap:10px}
#app #opponent-screen .rival-card-header{justify-content:space-between;gap:12px;padding:0 3px;min-height:36px}
#app #opponent-screen .fighter-name{font-size:30px}
.rival-emblem{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;font:900 28px/1 'Segoe Print',cursive;color:var(--rival-accent);text-shadow:1px 1px 0 var(--brand-ink);rotate:8deg}
.rival-emblem img{display:block;width:27px;height:27px;object-fit:contain}
#app #opponent-screen .rival-sheet:not([data-character="classic"]) .rival-emblem{font-size:0;width:40px;height:40px;background-position:center;background-repeat:no-repeat;background-size:contain;border:0}
#app #opponent-screen .rival-sheet[data-character="joker"] .rival-emblem{background-image:url('../opponents/emblems/joker.svg')}
#app #opponent-screen .rival-sheet[data-character="bull"] .rival-emblem{background-image:url('../opponents/emblems/bull.svg')}
#app #opponent-screen .rival-sheet[data-character="lion"] .rival-emblem{background-image:url('../opponents/emblems/lion.svg')}
#app #opponent-screen .rival-sheet[data-character="carrot"] .rival-emblem{background-image:url('../opponents/emblems/carrot.svg')}
#app #opponent-screen .rival-sheet[data-character="goat"] .rival-emblem{background-image:url('../opponents/emblems/goat.svg')}
#app #opponent-screen .rival-sheet[data-character="sir_return"] .rival-emblem{background-image:url('../opponents/emblems/sir_return.svg')}
#app #opponent-screen .rival-sheet[data-character="white_geisha"] .rival-emblem{background-image:url('../opponents/emblems/white_geisha.svg')}
#app #opponent-screen .rival-sheet[data-character="sirena"] .rival-emblem{background-image:url('../opponents/emblems/sirena.svg')}
#app #opponent-screen .rival-sheet[data-character="graefin"] .rival-emblem{background-image:url('../opponents/emblems/graefin.svg')}
#app #opponent-screen .rival-sheet[data-character="classic"] .rival-emblem{width:38px;height:38px;border-radius:0;background:none;rotate:0deg}
#app #opponent-screen .rival-sheet[data-character="classic"] .rival-emblem img{width:36px;height:36px}
#app #opponent-screen .fighter-stage{height:var(--rival-art-height);border-radius:var(--rival-stage-corners,12px 9px 15px 9px);container-type:size}
/* Match the showcase's available silhouette height, including narrow cards.
   Portrait metrics account for transparent padding and keep the feet at 16px. */
#app #opponent-screen .fighter-portrait{--figure-height:min(calc(100cqh - 30px),calc((100cqw - 20px)/1.55))}
#app #opponent-screen .rival-sheet[data-character="classic"] .fighter-stage::after{content:"";position:absolute;inset:-4px auto auto 12px;width:48px;height:15px;border-radius:1px;background:#fff5c8c9;rotate:-12deg;box-shadow:0 1px 2px #0003}
#app #opponent-screen .rival-sheet[data-character="bull"] .fighter-stage{box-shadow:5px 5px 0 var(--rival-accent)}
#app #opponent-screen .rival-sheet[data-character="lion"] .rival-card-header{border-bottom:3px double var(--rival-accent);padding-bottom:5px}
#app #opponent-screen .rival-sheet[data-character="carrot"] .rival-emblem{rotate:0deg}
#app #opponent-screen .rival-sheet[data-character="goat"] .rival-emblem{border:0;border-radius:0;rotate:0deg}
#app #opponent-screen .rival-dossier{gap:12px}
#app #opponent-screen .rival-intro .rival-quote{position:relative;margin:2px 0 8px;padding:14px 16px 16px;border:2px solid var(--brand-ink);border-radius:16px 10px 16px 5px;background:#fffdf5;color:var(--brand-ink);font-family:var(--font-display);font-size:17px;font-weight:400;line-height:1.4;text-align:center;transform:rotate(-1deg);box-shadow:3px 4px 0 var(--rival-accent)}
#app #opponent-screen .rival-intro .rival-quote::before{content:'';position:absolute;left:24px;bottom:-8px;width:13px;height:13px;background:#fffdf5;border-right:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);rotate:45deg}
#app #opponent-screen .rival-intro .rival-quote::after{content:none}
#app #opponent-screen .trait-columns{gap:9px}
#app #opponent-screen .rival-traits{padding:8px 6px}
#app #opponent-screen .rival-traits li{font-size:12px;line-height:1.35}
#app #opponent-screen .rival-arrow{top:45%;z-index:10}
.rival-pile{touch-action:pan-y pinch-zoom}
#app #opponent-screen .rival-swipe-hint{display:none;position:relative;margin:40px 0 0;color:var(--brand-cream);font-size:12px;line-height:1.5;font-weight:800;text-align:center}
#app #opponent-screen .rival-arrow .arrow-symbol{width:25px;height:25px;stroke-width:3}
#app #opponent-screen .rival-arrow.previous{left:-95px}
#app #opponent-screen .rival-arrow.next{right:-95px}
@media(max-width:759px){
  #app #opponent-screen .opponent-content{padding:20px 54px 34px;scroll-padding:20px 54px 34px}
  #app #opponent-screen .rival-collectible{width:min(350px,100%);--rival-art-height:clamp(175px,25dvh,240px)}
  #app #opponent-screen .rival-sheet{padding:13px 10px 16px;gap:10px}
  #app #opponent-screen .fighter-name{font-size:25px}
  #app #opponent-screen .rival-arrow.previous{left:-49px}
  #app #opponent-screen .rival-arrow.next{right:-49px}
  #app #opponent-screen .rival-traits li{font-size:11px}
  #app #opponent-screen .rival-intro .rival-quote{font-size:16px;padding:13px 12px 15px}
}
@media(max-width:759px),(max-width:950px) and (max-height:540px){
  #app[data-touch="true"] #opponent-screen .rival-swipe-hint{display:block}
}
@media(max-width:420px){
  #app #opponent-screen .opponent-content{padding-inline:34px}
  #app #opponent-screen .rival-collectible{width:290px;max-width:100%}
  #app #opponent-screen .rival-arrow{top:37%}
  #app #opponent-screen .rival-arrow.previous{left:-27px}
  #app #opponent-screen .rival-arrow.next{right:-27px}
}